/* The Daily Scrub In: arcade hub. Dark clinical-arcade look, mobile first.
 * Motion is decoration only: it runs on hover / focus / selection and stops with prefers-reduced-motion. */
:root { --bg:#060b12; --bg2:#0b1420; --panel:#0e1a28; --panel2:#132436; --line:rgba(255,255,255,.1); --mint:#5fe0c0; --ink:#eaf4f2; --dim:#9db5be; --gold:#ffcf4a; --hot:#ff5a7a;
  --f-head:"Fredoka","Trebuchet MS",system-ui,sans-serif; --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif; --ease:cubic-bezier(.2,.8,.2,1); --px:0; --py:0; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:700 16px/1.4 var(--f-body); overflow-x:hidden; }
a { color:inherit; }
button { font:inherit; color:inherit; }
:focus-visible { outline:3px solid #fff; outline-offset:3px; border-radius:12px; }

/* ---------- ambient environment ---------- */
.bgfx { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; width:70vmax; height:70vmax; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform; transition:transform .6s var(--ease); }
.orb.a { left:-25vmax; top:-30vmax; background:radial-gradient(circle,#14566b,transparent 65%); transform:translate(calc(var(--px)*22px),calc(var(--py)*18px)); animation:drift1 38s ease-in-out infinite alternate; }
.orb.b { right:-30vmax; top:20vh; background:radial-gradient(circle,#4a2a78,transparent 65%); opacity:.38; transform:translate(calc(var(--px)*-26px),calc(var(--py)*-14px)); animation:drift2 46s ease-in-out infinite alternate; }
.orb.c { left:10vw; bottom:-45vmax; background:radial-gradient(circle,#0d5a47,transparent 65%); opacity:.35; animation:drift1 52s ease-in-out infinite alternate-reverse; }
.gridfx { position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); -webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 0,transparent 75%); mask-image:radial-gradient(ellipse at 50% 20%,#000 0,transparent 75%); transform:translate(calc(var(--px)*8px),calc(var(--py)*6px)); }
#ecg { position:absolute; left:0; right:0; top:84px; width:100%; height:120px; opacity:.55; }
.dust { position:absolute; inset:0; }
.dust i { position:absolute; width:3px; height:3px; border-radius:50%; background:#9fe9d6; opacity:.0; animation:rise linear infinite; }
@keyframes drift1 { to { margin:6vmax 0 0 8vmax; } } @keyframes drift2 { to { margin:-6vmax 8vmax 0 0; } }
@keyframes rise { 0% { transform:translateY(0); opacity:0; } 15% { opacity:.55; } 100% { transform:translateY(-70vh); opacity:0; } }

/* ---------- layout ---------- */
.app { position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:calc(env(safe-area-inset-top,0px) + 12px) max(14px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 90px) max(14px,env(safe-area-inset-left,0px)); }
.top { display:flex; align-items:center; gap:10px; min-height:52px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex:1; min-width:0; }
.logo .mark { width:38px; height:38px; flex:none; border-radius:12px; background:linear-gradient(145deg,#1b8f7a,#0d4f66); display:grid; place-items:center; box-shadow:0 0 0 1.5px rgba(95,224,192,.5),0 6px 18px rgba(0,0,0,.4); }
.logo svg { width:22px; height:22px; }
.logo b { font:600 18px/1 var(--f-head); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .logo b span { color:var(--mint); }
.ibtn { width:44px; height:44px; border-radius:14px; border:1.5px solid var(--line); background:rgba(255,255,255,.05); display:grid; place-items:center; cursor:pointer; text-decoration:none; font-size:19px; position:relative; transition:transform .15s var(--ease),background .15s; flex:none; }
.ibtn:hover { background:rgba(255,255,255,.1); } .ibtn:active { transform:scale(.94); }
.flame { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 12px; border-radius:14px; border:1.5px solid rgba(255,170,60,.45); background:rgba(255,150,40,.1); font:600 16px var(--f-head); color:#ffd08a; flex:none; }
.flame i { font-style:normal; display:inline-block; animation:flick 1.6s ease-in-out infinite; } @keyframes flick { 50% { transform:scale(1.18) rotate(-6deg); } }

/* ---------- hero ---------- */
.hero { position:relative; margin:10px 0 18px; padding:18px; border-radius:28px; border:1.5px solid var(--line); background:linear-gradient(135deg,rgba(24,60,78,.78),rgba(12,22,36,.86) 62%); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:16px 22px; align-items:center; }
.hero::after { content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(95,224,192,.22),transparent 65%); pointer-events:none; }
.kick { font:600 12px/1.3 var(--f-head); letter-spacing:.2em; text-transform:uppercase; color:var(--mint); }
.hero h1 { margin:8px 0 6px; font:600 clamp(28px,7.4vw,54px)/1.02 var(--f-head); letter-spacing:-.01em; text-transform:uppercase; }
.hero h1 em { font-style:normal; color:var(--mint); }
.sub { color:var(--dim); font-size:15px; margin:0 0 14px; }
.cta { display:inline-flex; align-items:center; gap:12px; min-height:58px; max-width:100%; padding:10px 24px 10px 14px; border-radius:20px; border:0; background:linear-gradient(180deg,#7df0d4,#3fcfae); color:#04241d; text-decoration:none; font:600 clamp(17px,4.6vw,21px)/1.1 var(--f-head); cursor:pointer; box-shadow:0 7px 0 #1e8f78,0 14px 30px rgba(0,0,0,.4); transition:transform .12s var(--ease),box-shadow .12s; position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%); animation:sheen 3.6s ease-in-out infinite 1.2s; }
@keyframes sheen { 0%,60% { transform:translateX(-120%); } 100% { transform:translateX(120%); } }
.cta:hover { transform:translateY(-2px); } .cta:active { transform:translateY(5px); box-shadow:0 2px 0 #1e8f78,0 6px 16px rgba(0,0,0,.4); }
.cta .play { width:38px; height:38px; flex:none; border-radius:12px; background:#04241d; color:var(--mint); display:grid; place-items:center; font-size:15px; }
.cta small { display:block; font:700 12px var(--f-body); opacity:.8; letter-spacing:.04em; }
.cta.alt { background:rgba(255,255,255,.08); color:var(--ink); box-shadow:0 0 0 1.5px var(--line); } .cta.alt::before { display:none; } .cta.alt .play { background:rgba(255,255,255,.12); color:#fff; }
.ctas { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ctas { flex-wrap:nowrap; } #shareTop { width:58px; height:58px; padding:0; font-size:22px; flex:none; border-radius:18px; }
.chipbtn { min-height:48px; padding:0 16px; border-radius:16px; border:1.5px solid var(--line); background:rgba(255,255,255,.05); font:600 15px var(--f-head); cursor:pointer; }

/* progress ring + stats */
.mission { display:flex; flex-direction:column; align-items:center; gap:10px; }
.ring { position:relative; width:128px; height:128px; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring .bgc { fill:none; stroke:rgba(255,255,255,.1); stroke-width:10; }
.ring .fg { fill:none; stroke:var(--mint); stroke-width:10; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset 1.1s var(--ease); filter:drop-shadow(0 0 8px rgba(95,224,192,.6)); }
.ring.done .fg { stroke:var(--gold); filter:drop-shadow(0 0 10px rgba(255,207,74,.7)); }
.ring .mid { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring .mid b { font:600 34px/1 var(--f-head); } .ring .mid span { font:700 12px var(--f-body); letter-spacing:.14em; color:var(--dim); text-transform:uppercase; }
.ring.pulse { animation:ringpop .9s var(--ease); } @keyframes ringpop { 40% { transform:scale(1.1); } }
.stats { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.stat { text-align:center; padding:6px 12px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid var(--line); min-width:76px; }
.stat b { display:block; font:600 18px/1.1 var(--f-head); } .stat span { font:700 12px var(--f-body); letter-spacing:.1em; color:var(--dim); text-transform:uppercase; }
.timer { font:700 13px var(--f-body); color:var(--dim); } .timer b { color:var(--ink); font-variant-numeric:tabular-nums; }

.results { display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; margin:0 0 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.results::-webkit-scrollbar { display:none; }
.res { flex:none; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--line); font:700 13px var(--f-body); white-space:nowrap; }
.res b { font:600 15px var(--f-head); color:var(--mint); }

/* ---------- game library ---------- */
h2.sec { margin:22px 2px 10px; font:600 13px/1 var(--f-head); letter-spacing:.28em; text-transform:uppercase; color:var(--dim); display:flex; align-items:center; gap:10px; }
h2.sec::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }
.lib { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.g { --ac:#5fe0c0; position:relative; display:flex; flex-direction:column; border-radius:24px; overflow:hidden; text-decoration:none; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1.5px solid var(--line); min-height:226px; transition:transform .22s var(--ease),border-color .22s,box-shadow .22s; -webkit-tap-highlight-color:transparent; isolation:isolate; }
.g::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--ac) 38%,transparent),transparent 62%); opacity:.55; transition:opacity .25s; }
.g:hover,.g:focus-visible,.g.on { transform:translateY(-5px) scale(1.012); border-color:color-mix(in srgb,var(--ac) 75%,#fff 10%); box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent),0 0 38px color-mix(in srgb,var(--ac) 28%,transparent); }
.g:hover::before,.g:focus-visible::before,.g.on::before { opacity:1; }
.g:active { transform:scale(.985); }
.art { position:relative; height:112px; flex:none; display:block; }
.art svg { width:100%; height:100%; display:block; }
.art *, .a * { animation-play-state:paused; }
.g:hover .art *,.g:focus-visible .art *,.g.on .art *,.g.next .art * { animation-play-state:running; }
.gb { padding:10px 14px 62px; display:flex; flex-direction:column; gap:4px; flex:1; }
.gname { margin:0; font:600 clamp(17px,4.4vw,21px)/1.1 var(--f-head); }
.tag { margin:0; font-size:13.5px; color:#c5d8de; font-weight:600; line-height:1.3; }
.more:empty { display:none!important; }
.more { display:none; margin:2px 0 0; font-size:13px; color:var(--dim); font-weight:600; line-height:1.35; }
.badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.bd { font:700 12px/1 var(--f-body); padding:5px 8px; border-radius:99px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:#cfe0e5; white-space:nowrap; }
.bd.g3 { border-color:rgba(95,224,192,.5); color:var(--mint); } .bd.g2 { border-color:rgba(255,207,74,.5); color:var(--gold); }
.act { position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 14px; border-radius:15px; font:600 16px var(--f-head); background:color-mix(in srgb,var(--ac) 82%,#fff 6%); color:#08121a; transition:transform .15s var(--ease),filter .15s; }
.g:hover .act,.g:focus-visible .act,.g.on .act { filter:brightness(1.12); transform:translateY(-1px); }
.act i { font-style:normal; font-size:14px; }
.g.done { border-color:rgba(95,224,192,.28); } .g.done::before { opacity:.28; }
.g.done { background:rgba(8,16,26,.85); } .g.done .art { filter:grayscale(.85) brightness(.55); } .g.done .gname,.g.done .tag,.g.done .more { opacity:.6; }
.stamp { position:absolute; top:28px; left:50%; transform:translateX(-50%); z-index:2; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:rgba(95,224,192,.95); color:#04241d; font:700 30px/1 var(--f-head); box-shadow:0 6px 20px rgba(0,0,0,.45); pointer-events:none; }
.g.next { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold),0 0 28px rgba(255,207,74,.22); } .g.done:hover .art,.g.done:focus-visible .art { filter:none; }
.g.done .act { background:rgba(255,255,255,.1); color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(95,224,192,.45); }
.score { position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:12px; background:rgba(5,12,20,.82); border:1px solid rgba(95,224,192,.5); font:600 14px var(--f-head); color:var(--mint); z-index:2; }
.score::before { content:"✓"; font-size:13px; }
.up { position:absolute; top:10px; left:10px; z-index:2; padding:6px 10px; border-radius:12px; background:var(--gold); color:#2a2000; font:700 12px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; }
.toppick { position:absolute; top:10px; left:10px; z-index:2; padding:5px 9px; border-radius:10px; background:rgba(5,12,20,.82); border:1px solid var(--gold); font:700 12px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.last { position:absolute; top:10px; left:10px; z-index:2; padding:5px 9px; border-radius:10px; background:rgba(5,12,20,.82); border:1px solid var(--line); font:700 12px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.g.pop { animation:cardpop 1s var(--ease); } @keyframes cardpop { 0% { transform:scale(1); } 30% { transform:scale(1.045); box-shadow:0 0 60px rgba(95,224,192,.7); } 100% { transform:scale(1); } }
.g.free { min-height:206px; }
.g.soon { opacity:.55; border-style:dashed; min-height:150px; pointer-events:none; } .g.soon .gb { padding-bottom:14px; }
.g.leaving { transform:scale(1.04); transition:transform .22s var(--ease); }
body.leaving .app { opacity:0; transform:scale(1.015); transition:opacity .22s ease,transform .22s ease; }
.flash { position:fixed; inset:0; z-index:90; pointer-events:none; background:radial-gradient(circle at 50% 60%,var(--fl,#5fe0c0),transparent 60%); opacity:0; }
body.leaving .flash { opacity:.35; transition:opacity .2s; }

/* ---------- toast / overlays / footer ---------- */
.toast { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 74px); transform:translate(-50%,20px); z-index:60; padding:10px 16px; border-radius:99px; background:rgba(8,16,26,.95); border:1.5px solid var(--mint); font:600 15px var(--f-head); opacity:0; transition:opacity .25s,transform .25s var(--ease); pointer-events:none; white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis; }
.toast.on { opacity:1; transform:translate(-50%,0); }
.cleared { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(3,8,14,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.cleared.on { display:flex; }
.cbox { width:min(420px,100%); text-align:center; padding:26px 20px; border-radius:28px; background:linear-gradient(160deg,#16394a,#0e1a28); border:2px solid var(--gold); box-shadow:0 0 60px rgba(255,207,74,.3); animation:cardpop .9s var(--ease); position:relative; overflow:hidden; }
.cbox h3 { margin:6px 0; font:600 clamp(28px,8vw,38px)/1 var(--f-head); color:var(--gold); text-transform:uppercase; } .cbox p { margin:0 0 14px; color:var(--dim); }
.cbox .big { font-size:56px; line-height:1; animation:flick 1.6s ease-in-out infinite; }
.cbox .ctas { justify-content:center; }
.conf { position:absolute; inset:0; pointer-events:none; overflow:hidden; } .conf i { position:absolute; top:-10px; font-style:normal; animation:fall linear forwards; } @keyframes fall { to { transform:translateY(520px) rotate(360deg); opacity:0; } }
.dock { position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; justify-content:center; gap:14px; padding:8px 12px calc(env(safe-area-inset-bottom,0px) + 8px); background:linear-gradient(0deg,rgba(6,11,18,.96),transparent); font:700 13px var(--f-body); color:var(--dim); }
body.pad .dock { display:flex; } .dock b { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; margin-right:5px; font:700 12px var(--f-body); }
.footer { margin-top:30px; text-align:center; color:var(--dim); font-size:13px; }
.footer .links { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.footer .links a { text-decoration:none; padding:10px 16px; border-radius:99px; border:1.5px solid var(--line); background:rgba(255,255,255,.04); font:600 15px var(--f-head); min-height:44px; display:inline-flex; align-items:center; }
.footer .links a.p { background:#fff; color:#08121a; border-color:#fff; }
.footer details { max-width:40em; margin:12px auto; text-align:left; } .footer summary { cursor:pointer; font-weight:800; min-height:36px; display:flex; align-items:center; }
.footer ol { margin:6px 0 0 20px; padding:0; font-weight:600; line-height:1.5; }
.footer .finelinks { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:12px 0 0; } .footer .finelinks a { color:#b9dbe6; font:600 14.5px var(--f-body); min-height:44px; display:inline-flex; align-items:center; padding:0 6px; text-underline-offset:3px; }
@media (max-width:600px) { .footer { font-size:15px; line-height:1.55; color:#c5d8de; padding:0 4px; } .footer .fine { font-size:14px; line-height:1.6; margin-top:14px; padding:14px 6px 0; border-top:1px solid var(--line); text-align:left; } .footer summary { min-height:44px; font-size:15px; } .footer ol { line-height:1.6; font-size:14.5px; } }
.footer .fine { max-width:42em; margin:12px auto 0; font-size:12.5px; line-height:1.5; } .footer .fine a { color:#9fc4d0; }
.skeleton { height:226px; border-radius:24px; background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 70%); background-size:200% 100%; animation:shim 1.4s linear infinite; } @keyframes shim { to { background-position:-200% 0; } }

/* ---------- game art animations ---------- */
@keyframes dashmove { to { stroke-dashoffset:-60; } }
@keyframes bob { 50% { transform:translateY(-6px); } }
@keyframes fly { 0% { transform:translate(0,0); } 50% { transform:translate(48px,-34px); } 100% { transform:translate(96px,6px); opacity:.2; } }
@keyframes ping { 0% { transform:scale(.4); opacity:.9; } 100% { transform:scale(1.6); opacity:0; } }
@keyframes swayA { 0%,100% { transform:translateX(0) rotate(0); } 25% { transform:translateX(-26px) rotate(-12deg); } 75% { transform:translateX(26px) rotate(12deg); } }
@keyframes flip { 0%,45% { transform:scaleX(1); } 50% { transform:scaleX(0); } 55%,100% { transform:scaleX(1); } }
@keyframes drop { 0% { transform:translateY(-30px); opacity:0; } 15% { opacity:1; } 100% { transform:translateY(78px); opacity:.3; } }
@keyframes blink { 50% { opacity:.25; } }
@keyframes scan { 0%,100% { transform:translate(0,0); } 50% { transform:translate(42px,10px); } }
@keyframes ecgmove { to { transform:translateX(-40px); } }
@keyframes beat { 0%,100% { transform:scale(1); } 20% { transform:scale(1.22); } 40% { transform:scale(1); } 60% { transform:scale(1.14); } }
.t-dash { stroke-dasharray:8 8; animation:dashmove 1.2s linear infinite; } .t-dots { stroke-dasharray:1 16; stroke-linecap:round; animation:dashmove 2.4s linear infinite; }
.t-bob { animation:bob 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; } .t-fly { animation:fly 1.8s ease-in infinite; } .t-ping { animation:ping 1.6s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.t-sway { animation:swayA 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; } .t-flip { animation:flip 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.t-drop { animation:drop 2s linear infinite; } .t-blink { animation:blink 1.4s ease-in-out infinite; } .t-scan { animation:scan 2.6s ease-in-out infinite; } .t-ecg { animation:ecgmove 1s linear infinite; } .t-beat { animation:beat 1.1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }

/* ---------- responsive ---------- */
@media (min-width:640px) { .lib { grid-template-columns:repeat(3,minmax(0,1fr)); } .more { display:block; } .gb { padding-bottom:64px; } }
@media (min-width:960px) {
  .lib { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
  .hero { padding:28px 32px; } .ring { width:150px; height:150px; } #ecg { top:96px; }
}
@media (min-width:1280px) { .app { max-width:1240px; } .hero { padding:26px 30px; } }
@media (max-width:640px) {
  .hero { grid-template-columns:minmax(0,1fr); padding:16px; gap:14px; border-radius:24px; overflow:hidden; } .hero > * { min-width:0; } .hero h1 { overflow-wrap:anywhere; }
  .results { flex-wrap:wrap; overflow-x:visible; }
  .ctas { flex-wrap:wrap; } .mission { flex-wrap:wrap; } .stat { min-width:60px; }
  .mission { flex-direction:row; justify-content:space-between; align-items:center; gap:12px; }
  .ring { width:96px; height:96px; flex:none; } .ring .mid b { font-size:26px; }
  .stats { justify-content:flex-end; flex:1; } .stat { min-width:68px; padding:5px 8px; }
  .cta { flex:1; min-width:0; justify-content:flex-start; } #cta small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .logo b { font-size:16px; }
}
@media (max-width:470px) { .logo b .long { display:none; } }
@media (max-width:360px) { .lib { grid-template-columns:1fr; } .logo b { display:none; } }
@media (pointer:coarse) { .bd.pd { display:none; } }
@media (hover:none) { .g:hover { transform:none; } .art *, .g .art * { animation-play-state:running; } }
@media (prefers-reduced-motion:reduce) {
  .orb,.gridfx,.dust i,.flame i,.cta::before,.cbox .big { animation:none!important; transition:none!important; } .art * { animation:none!important; }
  .g,.g:hover,.g.on,.cta,.ring .fg { transition:none!important; transform:none!important; } .g.pop,.ring.pulse,.cbox { animation:none!important; } .dust,#ecg { display:none; }
}

.g.nope{opacity:.8;cursor:default;pointer-events:none;filter:grayscale(.4)}
.g.nope .act{background:transparent !important;color:#cfe3e0 !important;border:1px dashed #5b7686;box-shadow:none !important;font-size:14px;justify-content:center;text-align:center}

.peds { margin:0 0 18px; padding:14px 16px; border-radius:20px; border:1.5px solid rgba(255,207,74,.35); background:linear-gradient(135deg,rgba(255,207,74,.07),rgba(255,255,255,.03)); }
.peds .pnote { margin:6px 0 12px; font-size:14px; line-height:1.45; color:var(--dim,#9fb4c4); }
.pbtns { display:flex; flex-wrap:wrap; gap:8px; }
.pbtns a { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.07); color:var(--ink); text-decoration:none; font:700 14px var(--f-body); }
.pbtns a small { font-weight:600; opacity:.7; }
.pbtns a:hover, .pbtns a:focus-visible { border-color:var(--gold); }
.cta[hidden], .peds[hidden] { display:none; }
.peds.step2 { border-color:rgba(127,212,255,.4); background:linear-gradient(135deg,rgba(127,212,255,.08),rgba(255,255,255,.03)); }

#tracks[hidden] { display:none; }

/* practice modes: three separate tabs, each with its own panel and color */
.practice { margin:0 0 20px; padding:14px 16px 16px; border-radius:22px; border:1.5px solid var(--line); background:rgba(255,255,255,.035); }
.practice[hidden], .mpanel[hidden], .mtab[hidden] { display:none; }
.mnote { margin:4px 0 12px; font:600 15px/1.4 var(--f-body); color:var(--dim,#9fb4c4); }
.mtabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 14px; }
.mtab { display:flex; align-items:center; gap:10px; min-height:60px; padding:8px 12px; border-radius:16px; border:1.5px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink); text-align:left; cursor:pointer; font-family:var(--f-body); }
.mt-i { font-size:24px; line-height:1; } .mt-b { display:flex; flex-direction:column; gap:1px; min-width:0; } .mt-b b { font:800 15px var(--f-body); } .mt-b small { font:600 12px/1.25 var(--f-body); color:var(--dim,#9fb4c4); }
.mtab:hover { border-color:var(--ac); }
.mtab[aria-selected="true"] { border-color:var(--ac); background:color-mix(in srgb,var(--ac) 20%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent); }
.mtab[aria-selected="true"] .mt-b small { color:var(--ink); }
.mtab:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.mpanel { padding:14px 14px 16px; border-radius:18px; border:1.5px solid color-mix(in srgb,var(--ac) 55%,transparent); background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 10%,transparent),rgba(255,255,255,.02)); }
.mp-h { margin:0 0 4px; font:800 20px var(--f-body); color:var(--ac); }
.mp-d { margin:0 0 6px; font:600 15px/1.4 var(--f-body); color:var(--ink); }
.how { margin:0 0 14px; font:600 14px/1.45 var(--f-body); color:var(--dim,#9fb4c4); }
.how summary { cursor:pointer; min-height:36px; display:flex; align-items:center; font-weight:800; color:var(--dim,#9fb4c4); }
.how p { margin:2px 0 6px; }
.step { margin:0 0 16px; } .step:last-child { margin-bottom:0; }
.step + .step { padding-top:14px; border-top:1px solid var(--line); }
.step-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; font:800 16px var(--f-body); color:var(--ink); }
.num { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ac); color:#10101a; font:900 14px var(--f-body); }
.step-ctx { margin-left:auto; font:700 14px var(--f-body); color:var(--ac); }
.grp { margin:0 0 12px; } .grp:last-child { margin-bottom:0; }
.grp-l { margin:0 0 6px; font:800 11px var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--dim,#9fb4c4); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.trk-chip { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:99px; border:1.5px solid var(--line); background:rgba(255,255,255,.05); color:var(--ink); font:700 14px var(--f-body); cursor:pointer; }
.trk-chip .chk { display:none; font-weight:900; }
.trk-chip:hover { border-color:var(--ac); }
.trk-chip[aria-pressed="true"] { border-color:var(--ac); background:var(--ac); color:#10101a; box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 28%,transparent); }
.trk-chip[aria-pressed="true"] .chk { display:inline; }
.trk-chip:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.gcs { display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:10px; }
.gc { display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"i t t" "d d d" "n n go"; text-align:left; align-items:center; column-gap:10px; row-gap:6px; min-height:104px; padding:12px; border-radius:16px; border:1.5px solid var(--line); background:rgba(255,255,255,.07); color:var(--ink); text-decoration:none; }
.gc-i { grid-area:i; font-size:26px; line-height:1; } .gc-t { grid-area:t; font:800 15px/1.2 var(--f-body); overflow-wrap:anywhere; }
.gc-d { grid-area:d; font:600 12.5px/1.3 var(--f-body); color:var(--dim,#9fb4c4); }
.gc-n { grid-area:n; align-self:end; white-space:nowrap; font:600 13px var(--f-body); color:var(--dim,#9fb4c4); } .gc-n b { color:var(--ink); font-size:15px; }
.gc-go { grid-area:go; justify-self:end; align-self:end; font:800 12px var(--f-body); color:#10101a; background:var(--ac); border-radius:99px; padding:4px 10px; white-space:nowrap; }
a.gc:hover, a.gc:focus-visible { border-color:var(--ac); background:color-mix(in srgb,var(--ac) 12%,transparent); transform:translateY(-1px); } a.gc:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.gc.off { opacity:.5; border-style:dashed; min-height:0; grid-template-areas:"i t t" "d d d"; }
@media (max-width:640px) { .gc-go .pw { display:none; } .gc-go { padding:3px 9px; font-size:11px; } .gc-n { font-size:12px; } .gc-n b { font-size:14px; } .gc { padding:12px 10px; column-gap:8px; } .mtabs { grid-template-columns:1fr; } .mtab { min-height:56px; } .step-ctx { margin-left:0; width:100%; } .gcs { grid-template-columns:repeat(2,1fr); } }
@media (max-width:360px) { .gcs { grid-template-columns:1fr; } }

/* one-tap Step 2 CK shortcut next to the main CTA */
.cta2 { display:inline-flex; align-items:center; gap:10px; min-height:58px; padding:8px 18px 8px 14px; border-radius:20px; border:2px solid #7fd4ff; background:rgba(127,212,255,.1); color:#cfeeff; text-decoration:none; font:600 clamp(15px,4vw,18px)/1.1 var(--f-head); }
.cta2[hidden] { display:none; } .cta2:hover { background:rgba(127,212,255,.2); } .cta2:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.cta2 small { display:block; font:700 12px var(--f-body); opacity:.8; letter-spacing:.04em; }
.ctas { flex-wrap:wrap; }
@media (max-width:640px) { .cta2 { flex:1 1 100%; } }
.hero .what { margin:10px 0 6px; max-width:60ch; font-size:clamp(15px,3.9vw,17px); line-height:1.45; color:var(--ink,#dfeaf0); opacity:.92; }
.lib { grid-auto-rows:1fr; }

.g.ptile { border-style:dashed; background:rgba(127,212,255,.06); }
.g.ptile .art { display:grid; place-items:center; } .g.ptile .art svg { width:70px; height:100%; }
@media (min-width:640px) and (max-width:959px) { .g.ptile { display:none; } }

#cTease { margin:0 0 14px; text-align:left; font-size:14px; } #cTease b { display:block; color:var(--gold); margin-bottom:4px; } #cTease span { display:block; margin:3px 0; color:var(--dim); }

.ptoggle { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:8px; cursor:pointer; min-height:44px; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; } .ptoggle:hover { color:var(--ink); } .ptoggle:focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:6px; }
.ptoggle .chev { display:inline-block; flex:none; transition:transform .2s; } .ptoggle[aria-expanded="false"] .chev { transform:rotate(-90deg); }
#pbody[hidden] { display:none; }
@media (prefers-reduced-motion:reduce) { .ptoggle .chev { transition:none; } }

#soon { display:block; }
.vote { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:22px 24px; border-radius:20px; border:2px solid var(--gold); background:linear-gradient(135deg,rgba(255,207,74,.20),rgba(95,224,192,.12)); box-shadow:0 0 0 4px rgba(255,207,74,.12),0 12px 32px rgba(0,0,0,.35); color:var(--ink); text-decoration:none; transition:transform .15s,box-shadow .15s; }
.vote:hover { transform:translateY(-2px); box-shadow:0 0 0 5px rgba(255,207,74,.22),0 16px 36px rgba(0,0,0,.4); }
.vote:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.vote-i { font-size:44px; line-height:1; flex:none; }
.vote-t { flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:4px; } .vote-t b { font:600 clamp(24px,5vw,32px)/1.1 var(--f-head); color:#fff; } .vote-t span { font:600 16px/1.4 var(--f-body); color:var(--dim,#c3d3dd); }
.vote-go { flex:none; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; background:var(--gold); color:#2a2000; font:800 17px var(--f-body); box-shadow:0 4px 0 #b08a14; } .vote-go i { font-style:normal; font-size:13px; }
@media (max-width:520px) { .vote-go { width:100%; justify-content:center; } }
@media (prefers-reduced-motion:reduce) { .vote, .vote:hover { transition:none; transform:none; } }

/* the whole Practice bar toggles; collapsed it shrinks to a slim strip */
#practice > h2.sec { cursor:pointer; } #practice > h2.sec:hover .ptoggle { color:var(--ink); }
#practice.collapsed { padding-top:2px; padding-bottom:2px; margin-bottom:14px; border-radius:16px; }
#practice.collapsed > h2.sec { margin-bottom:0; }
/* collapsed Practice bar: clearly a button (brighter label, mint edge, hint text) */
.phint { display:none; }
#practice.collapsed { border-color:rgba(95,224,192,.55); background:linear-gradient(90deg,rgba(95,224,192,.14),rgba(255,255,255,.05)); box-shadow:0 0 0 1px rgba(95,224,192,.12),0 6px 18px rgba(0,0,0,.28); }
#practice.collapsed > h2.sec { color:var(--ink); font-size:15px; }
#practice.collapsed .ptoggle { min-height:52px; color:var(--ink); } #practice.collapsed .chev { color:var(--mint); width:20px; height:20px; }
#practice.collapsed .phint { display:inline; font:600 13px/1.2 var(--f-body); letter-spacing:.02em; text-transform:none; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#practice.collapsed:hover { border-color:var(--mint); }
@media (max-width:520px) { #practice.collapsed .phint { display:none; } }


/* ---------- brand lockup, domain pill, plain-language intro, how it works ---------- */
.logo .domain { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 14px 0 12px; border-radius:99px; border:1.5px solid rgba(95,224,192,.5); background:linear-gradient(90deg,rgba(95,224,192,.16),rgba(127,212,255,.08)); font:600 16px/1 var(--f-head); letter-spacing:.02em; color:#fff; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.logo .domain .dn { overflow:hidden; text-overflow:ellipsis; } .logo .domain em { font-style:normal; color:var(--mint); }
.logo .domain i { width:8px; height:8px; flex:none; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(95,224,192,.7); animation:live 2s ease-out infinite; }
@keyframes live { 70% { box-shadow:0 0 0 8px rgba(95,224,192,0); } 100% { box-shadow:0 0 0 0 rgba(95,224,192,0); } }
.hero h1.brand { margin:10px 0 4px; display:flex; flex-direction:column; align-items:flex-start; gap:0; text-transform:uppercase; line-height:.95; letter-spacing:0; }
.brand .b-the { display:inline-block; padding:5px 14px 4px; border-radius:10px; background:var(--gold); color:#2a2000; font:700 clamp(13px,3.4vw,18px)/1.1 var(--f-head); letter-spacing:.34em; transform:rotate(-2deg); margin:0 0 4px 2px; box-shadow:0 4px 0 #b08a14; }
.brand .b-main { display:block; font:700 clamp(54px,15.5vw,124px)/.92 var(--f-head); letter-spacing:-.015em; background:linear-gradient(100deg,#8ff7de 0%,#5fe0c0 34%,#7fd4ff 68%,#b79cff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 4px 0 rgba(8,60,50,.55)) drop-shadow(0 0 28px rgba(95,224,192,.28)); padding:2px 0 8px; }
.brand .b-main em { font-style:normal; }
.hero .tagline { margin:2px 0 0; font:600 clamp(20px,5.2vw,32px)/1.1 var(--f-head); text-transform:uppercase; letter-spacing:.02em; color:#fff; } .hero .tagline em { font-style:normal; color:var(--gold); }
.hero .what { margin-top:10px; }
.facts { list-style:none; margin:4px 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.facts li { padding:7px 12px; border-radius:99px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); font:700 13.5px/1 var(--f-body); color:#e6f1f4; white-space:nowrap; }
.facts li:nth-child(1) { border-color:rgba(255,207,74,.5); } .facts li:nth-child(2) { border-color:rgba(95,224,192,.5); } .facts li:nth-child(3) { border-color:rgba(127,212,255,.5); }

.how3 { margin:0 0 16px; border-radius:22px; border:1.5px solid var(--line); background:rgba(255,255,255,.04); }
.how3 summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding:0 18px; font:600 15px var(--f-head); letter-spacing:.16em; text-transform:uppercase; color:var(--mint); }
.how3 summary::-webkit-details-marker { display:none; } .how3 summary:hover { color:#fff; }
.how3 .chev { transition:transform .2s; } .how3 details:not([open]) .chev { transform:rotate(-90deg); }
.steps3 { list-style:none; margin:0; padding:2px 14px 6px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.steps3 li { position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 14px 14px; border-radius:18px; border:1.5px solid color-mix(in srgb,var(--ac) 50%,transparent); background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 14%,transparent),rgba(255,255,255,.02)); }
.steps3 i { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 17px var(--f-head); font-style:normal; background:var(--ac); color:#10101a; margin-bottom:4px; }
.steps3 b { font:600 19px/1.15 var(--f-head); color:#fff; } .steps3 span { font:600 14.5px/1.4 var(--f-body); color:#c5d8de; }
.how3 .who { margin:6px 18px 16px; font:600 14.5px/1.5 var(--f-body); color:#c5d8de; } .how3 .who b { color:var(--gold); } .how3 .who a { color:var(--mint); }
@media (max-width:640px) { .steps3 { grid-template-columns:1fr; } .facts li { font-size:13px; padding:7px 10px; } }
@media (max-width:360px) { .logo .domain { font-size:14px; padding:0 10px; } }
@media (prefers-reduced-motion:reduce) { .logo .domain i { animation:none; } .how3 .chev { transition:none; } }
.dhero { display:none!important; }
@media (max-width:470px) { .logo .domain { display:none; } .logo { flex:1; } .dhero { display:inline-flex!important; margin:2px 0 12px; min-height:34px; font-size:16px; padding:0 14px 0 12px; border-radius:99px; border:1.5px solid rgba(95,224,192,.5); background:linear-gradient(90deg,rgba(95,224,192,.16),rgba(127,212,255,.08)); font-family:var(--f-head); font-weight:600; color:#fff; align-items:center; gap:8px; } .dhero i { width:8px; height:8px; border-radius:50%; background:var(--mint); animation:live 2s ease-out infinite; } .dhero em { font-style:normal; color:var(--mint); } .hero .tagline { margin-top:0; } }

/* ---------- optional theme: Neon Coast (sunset, hard shadows). Hub only; saved per device ---------- */
.neonsun { display:none; }
html[data-theme="neon"] { --bg:#1a0b3d; --panel:#150a2e; --panel2:#1d0f3f; --mint:#19e3d4; --gold:#ffd23f; --line:rgba(255,255,255,.28); --f-head:"Anton","Impact","Arial Black",system-ui,sans-serif; }
html[data-theme="neon"] body { background:linear-gradient(180deg,#1a0b3d 0%,#5b1470 28%,#d92d7c 58%,#ff8a1f 84%,#ffd23f 100%) fixed; }
html[data-theme="neon"] .orb, html[data-theme="neon"] .gridfx, html[data-theme="neon"] .dust, html[data-theme="neon"] #ecg { display:none; }
html[data-theme="neon"] .neonsun { display:block; position:absolute; left:50%; top:170px; width:min(440px,80vw); aspect-ratio:1; margin-left:calc(min(440px,80vw) / -2); border-radius:50%; background:linear-gradient(180deg,#ffe14a,#ff9a1f 45%,#ff2d95); opacity:.5; -webkit-mask-image:linear-gradient(180deg,#000 0 55%,transparent 55% 58%,#000 58% 72%,transparent 72% 76%,#000 76% 86%,transparent 86% 91%,#000 91%); mask-image:linear-gradient(180deg,#000 0 55%,transparent 55% 58%,#000 58% 72%,transparent 72% 76%,#000 76% 86%,transparent 86% 91%,#000 91%); }
html[data-theme="neon"] .logo .mark { background:linear-gradient(145deg,#ff2d95,#ff8a1f); box-shadow:0 0 0 2px #fff,3px 3px 0 #150a2e; }
html[data-theme="neon"] .logo .domain, html[data-theme="neon"] .dhero { background:rgba(21,10,46,.75); border:2px solid var(--mint); color:var(--mint); box-shadow:0 0 18px rgba(25,227,212,.45); } html[data-theme="neon"] .logo .domain em, html[data-theme="neon"] .dhero em { color:#fff; }
html[data-theme="neon"] .ibtn { background:rgba(21,10,46,.72); border:2px solid rgba(255,255,255,.35); }
html[data-theme="neon"] .flame { background:var(--gold); border:2px solid #fff; color:#3a1200; }
html[data-theme="neon"] .hero { border-radius:6px; border:3px solid #fff; background:rgba(21,10,46,.62); box-shadow:8px 8px 0 #ff2d95,0 0 40px rgba(255,45,149,.4); } html[data-theme="neon"] .hero::after { display:none; }
html[data-theme="neon"] .kick { color:var(--gold); }
html[data-theme="neon"] .brand .b-the { background:transparent; box-shadow:none; transform:none; color:#fff; padding:0; text-shadow:0 0 12px var(--mint); letter-spacing:.5em; font-weight:400; }
html[data-theme="neon"] .brand .b-main { font-weight:400; letter-spacing:.01em; background:linear-gradient(180deg,#ffe14a 0%,#ff9a1f 40%,#ff2d95 75%,#b51ac9 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(4px 4px 0 #150a2e) drop-shadow(0 0 20px rgba(255,45,149,.55)); }
html[data-theme="neon"] .hero .tagline em { color:var(--mint); } html[data-theme="neon"] .hero .tagline, html[data-theme="neon"] .steps3 b { font-weight:400; }
html[data-theme="neon"] .facts li { border-radius:4px; background:#150a2e; border:2px solid var(--gold); transform:skew(-8deg); }
html[data-theme="neon"] .cta { border-radius:0; background:linear-gradient(180deg,var(--gold),#ff8a1f); border:3px solid #fff; color:#2a0a00; transform:skew(-8deg); box-shadow:6px 6px 0 #ff2d95; font-weight:400; text-transform:uppercase; } html[data-theme="neon"] .cta > * { transform:skew(8deg); } html[data-theme="neon"] .cta .play { border-radius:0; background:#150a2e; color:var(--gold); }
html[data-theme="neon"] .cta:hover { transform:skew(-8deg) translateY(-2px); } html[data-theme="neon"] .cta:active { transform:skew(-8deg) translate(4px,4px); box-shadow:2px 2px 0 #ff2d95; }
html[data-theme="neon"] .cta.alt { background:rgba(21,10,46,.8); color:#fff; box-shadow:5px 5px 0 var(--mint); }
html[data-theme="neon"] .cta2 { border-radius:0; border:3px solid var(--mint); background:rgba(21,10,46,.8); color:#fff; box-shadow:5px 5px 0 var(--mint); }
html[data-theme="neon"] .ring .fg { stroke:var(--mint); } html[data-theme="neon"] .ring .bgc { stroke:rgba(255,255,255,.2); }
html[data-theme="neon"] .stat { border-radius:6px; background:rgba(21,10,46,.8); border:2px solid rgba(255,255,255,.35); } html[data-theme="neon"] .timer { color:#ffe9f5; }
html[data-theme="neon"] .how3, html[data-theme="neon"] .practice, html[data-theme="neon"] .footer { background:rgba(21,10,46,.78); border-color:rgba(255,255,255,.35); border-radius:8px; }
html[data-theme="neon"] .footer { padding:16px; color:#ffe9f5; }
html[data-theme="neon"] .steps3 li { border-radius:0; border:3px solid var(--ac); background:rgba(21,10,46,.8); box-shadow:5px 5px 0 var(--ac); } html[data-theme="neon"] .steps3 i { border-radius:0; transform:skew(-8deg); }
html[data-theme="neon"] .steps3 li:nth-child(3) { --ac:#ff2d95!important; }
html[data-theme="neon"] h2.sec { color:#fff; text-shadow:0 0 10px #ff2d95; font-weight:400; }
html[data-theme="neon"] .g { border-radius:0; border:3px solid var(--ac); background:#150a2e; box-shadow:5px 5px 0 var(--ac); } html[data-theme="neon"] .g::before { background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 45%,transparent),transparent 70%); opacity:.9; }
html[data-theme="neon"] .g:hover, html[data-theme="neon"] .g:focus-visible, html[data-theme="neon"] .g.on { transform:translate(-2px,-4px); box-shadow:7px 9px 0 var(--ac); }
html[data-theme="neon"] .gname { font-weight:400; text-transform:uppercase; } html[data-theme="neon"] .tag { color:#ffe1f0; }
html[data-theme="neon"] .act { border-radius:0; font-weight:400; text-transform:uppercase; background:var(--ac); color:#150a2e; }
html[data-theme="neon"] .g.done { background:#150a2e; } html[data-theme="neon"] .g.next { border-color:var(--gold); box-shadow:5px 5px 0 var(--gold); }
html[data-theme="neon"] .up, html[data-theme="neon"] .toppick { border-radius:0; }
html[data-theme="neon"] .vote { border-radius:0; background:#150a2e; border:3px solid var(--gold); box-shadow:6px 6px 0 #ff2d95; }
html[data-theme="neon"] .mtab, html[data-theme="neon"] .mpanel, html[data-theme="neon"] .gc, html[data-theme="neon"] .trk-chip, html[data-theme="neon"] .chipbtn { border-radius:6px; }
html[data-theme="neon"] .toast { background:#150a2e; border-color:var(--gold); }
@media (max-width:640px) { html[data-theme="neon"] .neonsun { top:230px; } }

/* ---- Settings menu, games line, review note ---- */
.setmenu { position:relative; flex:none; }
.setpanel { position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:min(260px,calc(100vw - 32px)); padding:8px; border-radius:16px; border:1.5px solid var(--line); background:#0e1a26; box-shadow:0 14px 34px rgba(0,0,0,.55); }
.setpanel[hidden] { display:none; }
.setitem { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; min-height:48px; padding:0 12px; border:0; border-radius:12px; background:transparent; color:inherit; font:700 15px var(--f-body); text-decoration:none; text-align:left; cursor:pointer; }
.setitem:hover { background:rgba(255,255,255,.08); } .setitem:focus-visible { outline:2px solid #fff; outline-offset:-2px; }
.setitem span { width:24px; text-align:center; font-size:18px; flex:none; }
.setitem em { margin-left:auto; font-style:normal; font-size:13px; opacity:.8; }
.setitem[aria-pressed="true"] em { color:var(--mint); opacity:1; }
html[data-theme="neon"] .setpanel { background:#150a2e; border:2px solid rgba(255,255,255,.4); }
.gamesline { margin:10px 0 2px; font:700 14px/1.3 var(--f-body); color:var(--mint); letter-spacing:.02em; }
.hero .facts { margin:8px 0 0; }
.revnote { margin:0 0 14px; font:600 13px/1.4 var(--f-body); color:var(--dim); }

/* ---- tap targets: at least 44px; no text under 12px ---- */
.logo { min-height:44px; display:inline-flex; align-items:center; }
details.how > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; }
.gc-go { font-size:12px; } @media (max-width:640px) { .gc-go { font-size:12px; } }