/* EnoTrivia — luminous gold, deep teal and Bordeaux. */
:root{color-scheme:dark;--gold:#f7d18a;--ink:#071f29;--wine:#641e38;--cream:#fff4e4;background:var(--ink);color:var(--cream)}
body{background:radial-gradient(ellipse at 14% 5%,#23566480,transparent 45%),radial-gradient(ellipse at 95% 60%,#67233d45,transparent 50%),linear-gradient(155deg,#0d303c,#071c26 75%);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#e7c88b18 .7px,transparent .7px);background-size:22px 22px;z-index:-1}
.shell{max-width:1080px;padding:24px 28px 22px}
.top{padding-bottom:14px;border-bottom:1px solid #ebcb8c20}
.compact-brand{font-size:25px;font-weight:800;letter-spacing:-1px}.brand span{color:var(--gold)}
#sound{background:#ffffff08;border:1px solid #f7d18a35;border-radius:50%;width:42px;height:42px;padding:0}
.langs{margin:16px 0 0;gap:8px}.langs .lang{border:1px solid transparent;background:transparent;color:#bed0d4;padding:8px 12px;border-radius:30px;min-height:40px;font-size:12px;transition:background .2s,border-color .2s}
.langs .lang.active{background:#f7d18a14;border-color:#f7d18a70;color:#ffe2ab;box-shadow:inset 0 1px #fff1}
.community-nav{gap:10px;margin:14px 0 22px}.community-nav .secondary{background:#ffffff06;border-color:#ffffff24;color:#d9e4e3}.community-nav .primary{background:#f7d18a12;border:1px solid #f7d18a60;color:#ffe0a5;box-shadow:none}
.primary{background:linear-gradient(115deg,#ffe0a0,#e8b95f);color:#392015;border:1px solid #ffde9b;border-radius:16px;box-shadow:0 7px 0 #9d7131,0 14px 28px #0004;font-weight:850;transition:transform .18s,box-shadow .18s}
.primary:hover{background:linear-gradient(115deg,#ffe9bc,#f1c477)}.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 4px 0 #9d7131,0 9px 20px #0004}
.secondary{background:#ffffff07;border-color:#f7d18a55;border-radius:14px;color:var(--cream)}
.card{border:1px solid #d7a07165;border-radius:30px;background:radial-gradient(ellipse at 5% 0%,#ac526340,transparent 60%),linear-gradient(130deg,#70273f,#39172b);box-shadow:0 24px 75px #0005,inset 0 1px #fff1}
.welcome{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:.92fr 1.08fr;gap:36px;padding:46px 50px;width:auto;margin:0;text-align:left;min-height:390px}
.welcome::before{content:"";position:absolute;inset:12px;border:1px solid #f7d18a1c;border-radius:21px;z-index:-1;pointer-events:none}
.welcome::after{content:"✦";position:absolute;right:30px;top:20px;color:#f7d18a65;font-size:25px;pointer-events:none}
.logo-stage{position:relative;padding:20px;aspect-ratio:1;max-width:310px;justify-self:center;width:100%}
.logo-stage::before{content:"";position:absolute;inset:0;border:1px solid #f7d18a48;border-radius:50%;background:radial-gradient(circle,#eabf7920,transparent 68%);box-shadow:0 0 65px #f5c8790c,inset 0 0 40px #f5c87909;z-index:-1}
.logo-stage::after{content:"✦";position:absolute;top:6%;right:12%;font-size:19px;color:#f7d18a;text-shadow:0 0 16px #ffd69588}
.welcome .hero-logo{width:100%;max-width:260px;mask-image:radial-gradient(ellipse 68% 68% at center,#000 56%,transparent 100%)}
.welcome .eyebrow{font-size:10px;letter-spacing:3px;color:#f3ce94;display:flex;gap:10px;align-items:center}.welcome .eyebrow::before{content:"";width:24px;height:1px;background:#f3ce94;flex:none}
.welcome h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,4.7vw,52px);font-weight:500;line-height:1.08;letter-spacing:-1.4px;margin:18px 0;color:#fff1df;max-width:440px;text-wrap:balance}
.welcome .muted{font-size:14px;line-height:1.65;color:#e5c7cd;max-width:375px}
.welcome .pillrow{display:flex;gap:9px;margin:22px 0 25px;flex-wrap:wrap}.welcome .pill{border:0;border-radius:0;background:transparent;padding:0 10px 0 0;font-size:11px;color:#f4dac2}.welcome .pill+.pill{border-left:1px solid #f7d18a40;padding-left:12px}
.welcome .primary{font-size:15px;min-height:54px;padding:15px 28px;border-radius:14px;letter-spacing:.15px}
.welcome>p{color:#e5c7cd;margin-top:12px}
.eyebrow{color:var(--gold)}
body.trial-playing .shell{max-width:920px;padding-top:28px}
.gamehead{gap:18px}.gamehead>.eyebrow{border:1px solid #f7d18a50;border-radius:30px;padding:9px 14px;font-size:10px;letter-spacing:1.5px;background:#f7d18a0b}
.stats{gap:22px;color:#dcb9c4;font-size:10px;text-transform:uppercase;letter-spacing:1px}.stats strong{font-size:25px;line-height:1.3;color:#ffe2aa;font-variant-numeric:tabular-nums}
.bar{height:4px;margin:24px 0 12px;background:#ffffff14}.fill{background:linear-gradient(90deg,#bb8245,#ffe0a1)}
.timer{height:5px;margin-bottom:27px;background:#ffffff14}.timerfill{background:#70c4b5;box-shadow:0 0 12px #70c4b555}.timerfill.urgent{background:#ff8b8b}
#app>.card:not(.welcome) h2{font-size:clamp(25px,3.5vw,36px);line-height:1.25;letter-spacing:-.7px;text-wrap:balance;margin:18px 0 28px}
.options{gap:18px}.option{position:relative;background:#ffffff08;border:1px solid #d3a8b64d;border-radius:17px;padding:19px;min-height:80px;color:#fff4e8;line-height:1.45;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s}
/* Every unanswered option stays neutral, including touch hover and pointer focus. */
.option:hover:not(:disabled){background:#ffffff08;border-color:#d3a8b64d}
.letter{width:34px;height:34px;border-radius:11px;background:#f7d18a10;border:1px solid #f7d18a28;color:#f7d18a;font-size:13px}
.option.correct{background:#195a49;border-color:#85d7af;color:#fff}.option.wrong{background:#67283b;border-color:#f09caa;color:#fff}
.option.correct .letter{background:#a4f0c61a;border-color:#a4f0c680;color:#c8ffdf}.option.wrong .letter{background:#ff9caa15;border-color:#ff9caa80;color:#ffced4}
.feedback{font-size:14px;line-height:1.6;color:#f7d18a;margin-top:20px}
.resultnum{color:#ffe0a1;text-shadow:0 4px 28px #f7d18a25;font-variant-numeric:tabular-nums}.resultcell{background:#ffffff07;border:1px solid #f7d18a25;border-radius:18px}.resultcell strong{color:#ffe0a1}.resultcell span{color:#e5c7cd}
.review{border-top-color:#f7d18a25}.reviewitem{border-bottom-color:#f7d18a18}.reviewitem b{color:#ffe0a1}.explanation{color:#e5c7cd}
.community-dialog{background:radial-gradient(ellipse at top left,#77344a55,transparent 60%),#102c36;color:#fff4e4;border-color:#d7ac6e65;border-radius:26px;padding:28px;box-shadow:0 30px 120px #0008}.community-dialog::backdrop{background:#03121edb;backdrop-filter:blur(8px)}
.community-dialog h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;color:#ffe1ad}.community-dialog input:not([type=checkbox]){background:#071e29;border-color:#e2bf7e55;border-radius:12px;min-height:48px}.community-dialog .actions{gap:16px}.community-dialog .primary{margin-bottom:6px}
.community-dialog .option{margin:0;width:100%}#ranked-options{display:grid;gap:18px;margin-top:22px}.ranked-timer{color:#ffe1ad}.community-dialog progress{accent-color:#70c4b5}
.foot{color:#9ab6bf;font-size:10px;margin-top:22px}.community-foot{gap:22px;margin-top:10px;font-size:11px}.community-foot a{color:#bfd0d1;text-decoration-color:#bfd0d140;text-underline-offset:4px}.community-notice{font-size:10px;color:#93acb4;max-width:580px;line-height:1.6;margin-top:12px}
@media(hover:hover) and (pointer:fine){.langs .lang:hover{background:#ffffff0a}.community-nav .secondary:hover{border-color:#f7d18a70}.welcome .primary:hover{transform:translateY(-2px);box-shadow:0 9px 0 #9d7131,0 18px 32px #0004}}
@media(max-width:600px){
 .shell{padding:16px 16px 20px}.top{padding-bottom:10px}.compact-brand{font-size:22px}
 .langs{gap:3px;margin-top:12px}.langs .lang{font-size:10px;gap:5px;padding:8px 7px;min-height:38px}.flag{width:18px;height:12px}
 .community-nav{gap:7px;margin:12px 0 18px}.community-nav .secondary,.community-nav .primary{font-size:10px;padding:9px 10px;min-height:38px;border-radius:11px}
 .welcome{grid-template-columns:1fr;gap:12px;padding:25px 24px 32px;text-align:center;border-radius:26px;min-height:0}.welcome::before{inset:9px;border-radius:19px}.welcome::after{right:21px;top:15px;font-size:18px}
 .logo-stage{max-width:156px;padding:9px}.welcome .hero-logo{max-width:145px}.welcome-copy{margin:0}.welcome .eyebrow{justify-content:center;font-size:9px;letter-spacing:2.4px}.welcome .eyebrow::before{width:18px}
 .welcome h2{font-size:36px;line-height:1.08;max-width:310px;margin:13px auto}.welcome .muted{font-size:12px;line-height:1.6;margin:auto;max-width:290px}.welcome .pillrow{justify-content:center;gap:6px;margin:19px 0 22px}.welcome .pill{font-size:10px;padding-right:5px}.welcome .pill+.pill{padding-left:10px}.welcome .actions{justify-content:center}.welcome .primary{width:100%;min-height:54px;font-size:14px}
 .foot{margin-top:18px}.community-foot{font-size:10px;gap:20px}.community-notice{font-size:9px;margin-top:10px}
 body.trial-playing .shell{padding:16px 12px 24px}#app>.card:not(.welcome){padding:23px 18px;border-radius:24px}.gamehead{gap:12px}.gamehead>.eyebrow{padding:8px 10px;font-size:9px;letter-spacing:1px}.stats{gap:15px;font-size:9px}.stats strong{font-size:22px}.bar{margin-top:20px}.timer{margin-bottom:22px}#app>.card:not(.welcome) h2{font-size:26px;margin:16px 0 24px}
 .options{grid-template-columns:1fr;gap:16px}.option{min-height:70px;padding:16px;gap:13px;font-size:15px;border-radius:15px}.letter{width:32px;height:32px}.feedback{font-size:13px;min-height:42px}
 .community-dialog{padding:22px 18px;width:calc(100vw - 24px);max-height:94dvh}.community-dialog h2{font-size:29px}.community-dialog h3{font-size:23px;line-height:1.3}.community-dialog .option{min-height:70px}#ranked-options{gap:16px}
}
@media(max-width:360px){.shell{padding-left:10px;padding-right:10px}.langs .lang{padding:8px 5px;font-size:9px}.welcome{padding:23px 20px 29px}.welcome h2{font-size:32px}.community-nav{gap:5px}.community-nav .secondary,.community-nav .primary{padding:8px;font-size:9px}.gamehead{align-items:flex-start}.stats{gap:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.primary:hover,.primary:active{transform:none!important}}

.option:focus:not(:focus-visible){outline:none}
.option:disabled{opacity:1;-webkit-text-fill-color:currentColor}

/* Home refinements: original logo, paired rules, single-line headline. */
.logo-stage::before,.logo-stage::after{content:none;display:none}
.welcome .eyebrow::after{content:"";width:24px;height:1px;background:#f3ce94;flex:none}
.welcome{grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:28px}
.welcome-copy{min-width:0}
.welcome h2{white-space:nowrap;text-wrap:nowrap;max-width:none;font-size:clamp(25px,3.2vw,38px);letter-spacing:-1px}
@media(min-width:601px) and (max-width:900px){.welcome{grid-template-columns:1fr;text-align:center;gap:24px;padding:34px}.logo-stage{max-width:200px}.welcome .eyebrow,.welcome .pillrow,.welcome .actions{justify-content:center}.welcome .muted{margin-inline:auto}.welcome h2{font-size:clamp(25px,4.2vw,36px)}}
@media(max-width:600px){.welcome{grid-template-columns:1fr;gap:12px}.welcome h2{font-size:clamp(18px,5.6vw,26px);letter-spacing:-.6px;max-width:none}.welcome .eyebrow::after{width:18px}}

/* A smaller welcome rectangle while preserving a single-line title. */
.welcome{max-width:900px;width:100%;margin-inline:auto;padding:30px 34px;min-height:300px;gap:24px;grid-template-columns:minmax(160px,.6fr) minmax(0,1.4fr)}
.welcome .logo-stage{max-width:230px;padding:10px}
.welcome h2{font-size:clamp(25px,3.1vw,36px);margin-block:14px}
.welcome .pillrow{margin-block:17px 21px}
@media(min-width:601px) and (max-width:900px){.welcome{grid-template-columns:1fr;min-height:0;padding:26px;gap:18px}.welcome .logo-stage{max-width:160px}.welcome h2{font-size:clamp(25px,4.2vw,34px)}}
@media(max-width:600px){.welcome{grid-template-columns:1fr;min-height:0;padding:20px 22px 27px;gap:10px}.welcome .logo-stage{max-width:125px;padding:6px}.welcome h2{font-size:clamp(18px,5.6vw,26px);margin-block:11px}.welcome .pillrow{margin-block:16px 19px}}

/* Fit the desktop welcome panel to its content, without the empty right wing. */
@media(min-width:901px){
 .welcome{width:fit-content;max-width:100%;grid-template-columns:180px minmax(0,390px);gap:24px;padding:28px;min-height:0}
 .welcome .logo-stage{max-width:180px;padding:0}
 .welcome h2{font-size:32px;letter-spacing:-1px}
 .welcome .muted{max-width:375px}
}

/* Sig. Eno explains the free round and registration in two speech bubbles. */
.eno-guide{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:12px;margin:16px 0 22px;text-align:left}
.eno-avatar{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 6px #0003)}
.eno-dialogue{min-width:0}.welcome .eno-hello{font-size:12px;font-weight:800;color:#ffe0a1;line-height:1.4;margin:0 0 9px;letter-spacing:.1px}
.eno-bubble{position:relative;background:#fff5e5;border:1px solid #fff8ef;border-radius:13px;padding:11px 13px;color:#422034;box-shadow:0 4px 12px #170a191a}
.eno-bubble::before{content:"";position:absolute;left:-7px;top:17px;width:11px;height:11px;transform:rotate(45deg);background:inherit;border-bottom:1px solid #fff8ef;border-left:1px solid #fff8ef}
.eno-bubble+.eno-bubble{margin-top:9px}.eno-rule-label{display:block;font-size:11px;font-weight:800;line-height:1.4;color:#713046}
.welcome .eno-bubble p{font-size:12px;line-height:1.5;margin:5px 0 0;color:#422034}.eno-bubble b{font-size:17px;font-weight:900;color:#641e38;font-variant-numeric:tabular-nums}
.eno-bubble-gold{background:#f7d18a;border-color:#f7d18a}.eno-bubble-gold::before{border-color:#f7d18a}.eno-bubble-gold .eno-rule-label{color:#643b19}
.welcome .actions{margin-top:0}
@media(max-width:600px){.eno-guide{grid-template-columns:52px minmax(0,1fr);gap:10px;margin:15px 0 22px}.eno-bubble{padding:10px 11px}.welcome .eno-hello{font-size:11px}.eno-rule-label{font-size:10px}.welcome .eno-bubble p{font-size:11px}.eno-bubble b{font-size:16px}}
@media(min-width:601px) and (max-width:900px){.eno-guide{max-width:390px;margin-inline:auto}}

/* Center the home copy and emphasize both instructions. */
.welcome-copy,.eno-guide,.eno-dialogue,.eno-bubble,.welcome .eno-hello{text-align:center}
.welcome .eyebrow,.welcome .actions{justify-content:center}
.welcome h2,.welcome .muted{margin-left:auto;margin-right:auto}
.eno-rule-label{text-transform:uppercase;letter-spacing:.6px}