:root{
  --bg:#0f1117; --panel:#181b24; --line:#2a2e3a; --text:#eef0f4; --muted:#9aa1b0;
  --green:#2ec27e; --red:#e05a5a; --skip:#5b6472; --accent:#7c5cff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; align-items:center; min-height:100%;
  /* respect notch / home-indicator insets (no-op on desktop); pairs with viewport-fit=cover */
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.topbar{
  width:100%; max-width:520px; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.logo{font-size:1.5rem; margin:0; letter-spacing:.5px; font-weight:800}
.logo span{color:var(--accent)}
.icon-btn{
  background:none; border:1px solid var(--line); color:var(--text); width:36px;height:36px;
  border-radius:8px; font-size:1rem; cursor:pointer;
}
.icon-btn:hover{border-color:var(--accent)}
.game{width:100%; max-width:520px; padding:16px; flex:1}
.player-wrap{position:relative; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden}
#player-host{position:absolute; inset:0; transition:filter .4s ease}
#player-host iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* guess phase: a static thumbnail frame, blurred via #player-host's filter (ToS-compliant — no
   overlay on a live embed). Scaled up slightly so the blur has no soft edge at the borders. */
#player-host img.thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06)}
.reveal-hint{color:var(--muted); font-size:.82rem; text-align:center; margin:10px 0 0}
/* music test modes: mini player (guess 5, ~YouTube min size), audio + play controls */
.player-wrap.mini{max-width:356px; margin:0 auto}
.mm-controls{display:flex; justify-content:center; margin:12px 0 0; min-height:1px}
.mm-controls .play-btn{background:var(--accent); color:#fff; border:0; padding:11px 18px; border-radius:10px; font-weight:700; cursor:pointer; font-size:.95rem}
.mm-controls .play-btn:active{transform:translateY(1px)}
/* flipbook playback controls (pause + speed) */
.mm-bar{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.mm-btn{padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); font-size:.82rem; font-weight:600; cursor:pointer}
.mm-btn:hover{border-color:var(--accent)}
.mm-btn.on{border-color:var(--accent); background:rgba(124,92,255,.18)}
/* mode 1 only: black bars hiding the embed's title/branding + a tap-blocking shield */
.mm-mask{position:absolute; left:0; right:0; background:#000; z-index:6; pointer-events:none}
.mm-mask-top{top:0; height:22%}
.mm-mask-bottom{bottom:0; height:20%}
.mm-shield{position:absolute; inset:0; z-index:5}
/* six-segment reveal progress bar (one per guess/stage) */
.progress{display:flex; gap:4px; margin:8px 0 0}
.progress .seg{flex:1; height:6px; border-radius:3px; background:var(--line)}
.progress .seg.on{background:var(--accent)}
.progress .seg.full{background:var(--green)}
/* rows are display-only — never let one (esp. mid flip-animation) intercept taps on the buttons below */
.rows{display:flex; flex-direction:column; gap:8px; margin:14px 0; perspective:700px; pointer-events:none; transition:max-height .35s ease, opacity .3s ease}
.rows.rows-collapsed{opacity:0; margin-top:0; margin-bottom:0}            /* tucked away on the endcard; height handled inline */
/* "Show/Hide guesses" toggle that appears on the endcard */
.rows-toggle{display:block; width:100%; background:none; border:0; color:var(--muted); font-size:.8rem; font-weight:600; cursor:pointer; padding:6px 0; margin:2px 0 0}
.rows-toggle:hover{color:var(--text)}
.row{
  min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--panel);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:8px 12px; font-size:.92rem; color:var(--muted);
}
.row.filled{color:var(--text)}
.row.wrong{border-color:var(--skip)}                                    /* a miss is neutral, not red */
.row.wrong.near{border-color:#caa84a; background:rgba(202,168,74,.10)}   /* near-miss → yellow accent (matches 🟨) */
.row.skip{border-color:var(--skip)}
.row.correct{border-color:var(--green); background:rgba(46,194,126,.12)}
.row-main{display:flex; align-items:center; width:100%}
.row .tag{margin-left:auto; font-size:1rem}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:.7rem; padding:3px 7px; border-radius:6px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.chip.g{background:rgba(46,194,126,.18); border-color:var(--green); color:#d6f5e6}
.chip.y{background:rgba(202,168,74,.16); border-color:#caa84a; color:#f0e3b8}
.chip.x{background:transparent; border-color:var(--line); color:var(--muted)}
.guess-form{display:flex; flex-direction:column; gap:10px}
#guess{
  width:100%; padding:13px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); font-size:1rem;
}
#guess:focus{outline:none; border-color:var(--accent)}
.guess-actions{display:flex; gap:10px}
.primary{
  flex:1; background:var(--accent); color:#fff; border:0; padding:13px; border-radius:10px;
  font-weight:700; font-size:1rem; cursor:pointer;
}
.ghost{
  background:none; border:1px solid var(--line); color:var(--text); padding:13px 16px;
  border-radius:10px; cursor:pointer; font-weight:600;
}
.primary:active,.ghost:active{transform:translateY(1px)}
.endcard{margin-top:18px; text-align:center; border-top:1px solid var(--line); padding-top:18px}
.endcard-msg{font-size:1.15rem; font-weight:700; margin:0 0 6px}
.endcard-answer{color:var(--muted); margin:0 0 12px}
.yt-link{display:inline-flex; align-items:center; gap:7px; color:var(--accent); text-decoration:none; margin:0 12px 14px 0}
.yt-link:hover{text-decoration:underline}
/* brand icons sit at YouTube's 20px minimum (icon height); 12px right margin clears the next link */
.link-ic{height:20px; width:auto; flex:0 0 auto; display:block}
/* icon-only secondary links (watch-on-YouTube + this title's rankings) — text removed since both are
   secondary (the full video already plays in-page on solve). Padding gives a ~40px tap target. */
.icon-link{gap:0; margin:0 4px 12px; padding:9px; border-radius:10px}
.icon-link:hover{text-decoration:none; background:rgba(124,92,255,.14)}
.share-btn{width:100%}
.share-status{color:var(--green); font-size:.85rem; height:1em; margin:8px 0 0}
.guess-msg{color:var(--muted); font-size:.82rem; min-height:1em; margin:8px 0 0; text-align:center; transition:opacity .2s}
.footer{color:var(--muted); font-size:.8rem; padding:18px; text-align:center}
/* FTC affiliate disclosure: kept small + unobtrusive via size/placement, but at the footer's normal
   muted contrast (NOT faded) — FTC requires it stay legible/"clear and conspicuous". ~11px is the floor. */
.affiliate-note{font-size:.7rem; margin-top:5px}
/* ad slots — reserved height so a filled slot causes ZERO layout shift (docs/research/14).
   Hidden until SCAds.enable(); no network is wired yet. */
.ad-slot{width:100%; max-width:520px; min-height:90px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px dashed var(--line); border-radius:8px; margin:12px auto; color:var(--muted); font-size:.72rem}
.ad-slot::before{content:"Ad"}
.ad-anchor{position:fixed; left:0; right:0; bottom:0; max-width:none; min-height:60px; margin:0; border-radius:0; z-index:40}
body.ads-on{padding-bottom:64px} /* keep the sticky anchor from covering the footer */
.muted{color:var(--muted)}
.hidden{display:none !important}
/* screen-reader-only live region */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* settings row in the help modal */
.setting{display:flex; align-items:center; gap:8px; margin:14px 0 4px; font-size:.9rem; cursor:pointer}
.setting input{width:18px; height:18px; accent-color:var(--accent)}
/* opt-in colorblind / high-contrast palette (Okabe-Ito: correct=blue, close=orange) */
body.cb .chip.g{background:#0072B2; border-color:#0072B2; color:#fff}
body.cb .chip.y{background:#E69F00; border-color:#E69F00; color:#1a1a1a}
body.cb .row.correct{border-color:#0072B2; background:rgba(0,114,178,.18)}
body.cb .row.wrong.near{border-color:#E69F00; background:rgba(230,159,0,.12)}
body.cb .dist-bar{background:#7a7f8c}
body.cb .dist-bar.hi{background:#0072B2}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; max-width:380px; width:100%; padding:22px; position:relative}
.modal-card h2{margin:0 0 12px}
.modal-card ul{padding-left:18px; line-height:1.6}
.modal-close{position:absolute; top:10px; right:12px; background:none; border:0; color:var(--muted); font-size:1.6rem; cursor:pointer; line-height:1}
.stats-body{display:flex; justify-content:space-around; text-align:center}
.stat .num{font-size:1.6rem; font-weight:800}
.stat .lbl{font-size:.75rem; color:var(--muted)}
/* endcard streak + countdown */
.endcard-streak{font-size:1rem; font-weight:700; color:#ffb000; margin:0 0 10px}
.next-up{color:var(--muted); font-size:.82rem; margin:14px 0 0}
.countdown{color:var(--text); font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:.5px}
/* guess-distribution chart */
.stats-dist-title{font-size:.85rem; color:var(--muted); margin:18px 0 8px; font-weight:600}
.stats-dist{display:flex; flex-direction:column; gap:5px}
.dist-row{display:flex; align-items:center; gap:8px; font-size:.8rem}
.dist-n{width:1ch; color:var(--muted); text-align:center}
.dist-bar{background:var(--skip); color:#fff; padding:2px 8px; border-radius:4px; text-align:right; min-width:1.6em; font-weight:700; transition:width .5s ease}
.dist-bar.hi{background:var(--green)}
/* inline endcard sections: stats grid, distribution + the cross-category "keep playing" row */
.endcard-h{font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:18px 0 8px; text-align:left}
.endcard #endcard-stats-body{margin-bottom:2px}
.endcard-more{margin-top:8px; border-top:1px solid var(--line); padding-top:4px}
/* daily-completion meter ("X of N dailies done today") */
.endcard-meter{margin:0 0 12px}
.meter-label{font-size:.82rem; color:var(--muted); margin-bottom:6px}
.meter-label strong{color:var(--text); font-weight:800}
.meter-track{height:8px; background:var(--skip); border-radius:99px; overflow:hidden}
.meter-fill{display:block; height:100%; background:var(--green); border-radius:99px; transition:width .5s ease}
.endcard-cats{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.promo-cat{display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); font-size:.85rem; font-weight:600; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease}
.promo-cat:hover{border-color:var(--accent); background:rgba(124,92,255,.12)}
.promo-cat:active{transform:translateY(1px)}
.promo-emoji{font-size:1.05rem}
.promo-mark{font-size:.8rem; opacity:.85}
.promo-play{border-color:var(--accent)}              /* unplayed category gets the nudge */
.promo-play .promo-mark{color:var(--accent)}
.promo-won .promo-mark{color:var(--green)}
.promo-lost{opacity:.8}
/* cross-device save-code (export/import) */
.sync{margin-top:16px; border-top:1px solid var(--line); padding-top:14px; display:flex; flex-wrap:wrap; gap:8px}
.sync-btn{flex:1; font-size:.82rem; padding:9px 10px; white-space:nowrap}
.sync-status{width:100%; color:var(--green); font-size:.78rem; min-height:1em; margin:4px 0 0}
/* full-screen confetti overlay (win celebration) — never blocks interaction */
.confetti-canvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:70}
/* tabs */
.tabs{display:flex; gap:6px; width:100%; max-width:520px; padding:10px 12px 0}
.tab{flex:1; padding:9px 6px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap}
.tab.active{color:#fff; border-color:var(--accent); background:rgba(124,92,255,.18)}
.subbar{width:100%; max-width:520px; padding:8px 12px 0; display:flex; justify-content:flex-end}
.archive-btn{background:none; border:1px solid var(--line); color:var(--text); padding:6px 12px; border-radius:8px; font-size:.82rem; cursor:pointer}
.archive-btn:hover{border-color:var(--accent)}
.coming{text-align:center; padding:48px 16px; color:var(--muted)}
.coming-emoji{font-size:3rem}
.coming h2{margin:8px 0 4px; color:var(--text)}
.day-grid{margin-top:10px}
/* archive month calendar */
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin:2px 0 12px}
.cal-title{font-weight:700; font-size:1rem}
.cal-arrow{background:var(--panel); border:1px solid var(--line); color:var(--text); width:36px; height:36px; border-radius:8px; font-size:1.3rem; line-height:1; cursor:pointer}
.cal-arrow:hover:not(:disabled){border-color:var(--accent)}
.cal-arrow:disabled{opacity:.25; cursor:default}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal-dow{margin-bottom:5px}
.cal-dowcell{text-align:center; font-size:.68rem; color:var(--muted); padding:2px 0}
.cal-cell{position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); font-size:.82rem; cursor:pointer}
/* completed-puzzle markers: ✓ solved (green) / ✕ failed (muted), corner badge */
.cal-cell.done::after{content:'✓'; position:absolute; top:2px; right:4px; font-size:.58rem; font-weight:800; line-height:1; color:var(--green)}
.cal-cell.done.lost::after{content:'✕'; color:var(--muted)}
.cal-cell.done.won{border-color:var(--green)}
.cal-cell.cal-blank{border:0; background:none; cursor:default}
.cal-cell.cal-empty{opacity:.25; cursor:default; border-style:dotted}
.cal-cell:not(.cal-empty):not(.cal-blank):hover{border-color:var(--accent)}
.cal-cell.today{border-color:var(--accent); font-weight:800}
.cal-cell.active{background:rgba(124,92,255,.28); border-color:var(--accent)}
.cal-cell.locked{opacity:.5; border-style:dashed}
/* transient toast (visual only — screen readers use #live); no layout shift */
.toast{position:fixed; left:50%; top:16%; transform:translateX(-50%); background:#000; color:#fff;
  padding:10px 16px; border-radius:9px; font-size:.9rem; z-index:60; opacity:0; pointer-events:none;
  transition:opacity .2s ease; max-width:90%; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.5)}
.toast.show{opacity:.96}
.play-btn:active,.icon-btn:active{transform:translateY(1px)}
/* motion is the enhancement — only animate when the user hasn't asked for reduced motion */
@media (prefers-reduced-motion: no-preference){
  .row.reveal{animation:sc-flip .5s ease}
  #guess.shake{animation:sc-shake .5s}
  @keyframes sc-flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
  @keyframes sc-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
    30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
}

/* ====================== UX polish pass ======================
   Visual elevation + microinteractions. Research-grounded: Wordle's reveal-as-reward + gentle
   error shake, 120–220ms ease-out feedback, depth via subtle shadows, restraint. Appended so it
   layers over the base rules; all keyframe motion stays gated by prefers-reduced-motion. */
:root{
  --accent-2:#9d7bff;
  --ring:rgba(124,92,255,.38);
  --elev-2:0 10px 30px rgba(0,0,0,.45);
  --elev-3:0 18px 50px rgba(0,0,0,.55);
}
/* subtle top accent glow for depth (paint-only, no layout cost) */
body{ background-image:radial-gradient(1100px 460px at 50% -12%, rgba(124,92,255,.12), transparent 68%); background-attachment:fixed }
/* logo: tighter tracking + gradient accent */
.logo{ letter-spacing:-.6px }
.logo span{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
/* depth on the video frame + modal */
.player-wrap{ box-shadow:var(--elev-2), inset 0 0 0 1px rgba(255,255,255,.05) }
.modal-card{ box-shadow:var(--elev-3) }
/* primary button: gradient + lift/glow feedback (≤200ms) */
.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 4px 14px rgba(124,92,255,.35); transition:filter .15s ease, box-shadow .15s ease, transform .1s ease }
.primary:hover{ filter:brightness(1.06); box-shadow:0 6px 22px rgba(124,92,255,.5) }
.ghost,.icon-btn,.archive-btn{ transition:border-color .15s ease, background .15s ease, transform .1s ease }
.ghost:hover{ border-color:var(--accent); background:rgba(124,92,255,.08) }
.icon-btn:hover,.archive-btn:hover{ background:rgba(124,92,255,.10) }
/* input focus ring */
#guess:focus{ box-shadow:0 0 0 3px var(--ring) }
/* tabs: smooth feedback + active glow */
.tab{ transition:color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease }
.tab:hover{ color:var(--text); border-color:var(--accent) }
.tab:active{ transform:translateY(1px) }
.tab.active{ box-shadow:0 2px 12px rgba(124,92,255,.28) }
/* progress: animate fills + glow the current stage */
.progress .seg{ transition:background-color .3s ease, box-shadow .3s ease }
.progress .seg.cur{ background:var(--accent); box-shadow:0 0 10px rgba(124,92,255,.55) }
.progress .seg.full.cur{ background:var(--green); box-shadow:0 0 10px rgba(46,194,126,.5) }
/* resting transitions + bigger endcard headline */
.row{ transition:border-color .2s ease, background .2s ease }
.endcard-msg{ font-size:1.3rem }
/* motion-only enhancements (entrances) */
@media (prefers-reduced-motion: no-preference){
  .chips .chip{ animation:sc-chip-in .22s ease-out both }
  .chips .chip:nth-child(2){ animation-delay:.05s }
  .chips .chip:nth-child(3){ animation-delay:.10s }
  .chips .chip:nth-child(n+4){ animation-delay:.15s }
  .modal:not(.hidden) .modal-card{ animation:sc-modal-in .2s ease-out }
  @keyframes sc-chip-in{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
  @keyframes sc-modal-in{ from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }
}

/* ====================== Light theme (opt-in; dark stays the default) ======================
   Applied via `html.light` — set by a no-flash head script + the Help-modal toggle. Token
   overrides cascade to everything; the few white-text-on-accent-tint states get readable colors.
   Colorblind palette still wins (chip fixes scoped :not(.cb)). */
html.light{
  --bg:#f6f7fa; --panel:#ffffff; --line:#dce0e8; --text:#1b1e26; --muted:#5f6675;
  --green:#1f9d57; --red:#cf4242; --skip:#6b7280; --accent:#6c4cf0; --accent-2:#8a6bf5;
  --ring:rgba(108,76,240,.30);
  --elev-2:0 8px 24px rgba(20,24,40,.10); --elev-3:0 16px 40px rgba(20,24,40,.14);
}
html.light body{ background-image:radial-gradient(1100px 460px at 50% -12%, rgba(108,76,240,.10), transparent 68%) }
html.light .tab.active{ color:#5b3fd4; background:rgba(108,76,240,.12) }
html.light .day-btn.active{ color:#5b3fd4; background:rgba(108,76,240,.12) }
html.light .endcard-streak{ color:#b07400 }
html.light body:not(.cb) .chip.g{ background:rgba(31,157,87,.14); border-color:var(--green); color:#15663a }
html.light body:not(.cb) .chip.y{ background:rgba(180,130,20,.14); border-color:#b48214; color:#7a5b0c }

/* ---- accounts + Scenedle+ (UI dormant unless accountsReady()) ---- */
.topbar-right{ display:flex; gap:8px; align-items:center }
#account-modal input{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:1rem; margin-top:8px }
#account-modal input:focus{ outline:none; border-color:var(--accent) }
.or-sep{ text-align:center; color:var(--muted); font-size:.8rem; margin:12px 0 4px; position:relative }
.plus-status{ margin:10px 0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); font-weight:600; text-align:center }
.plus-perks{ list-style:none; padding:0; margin:8px 0 16px }
.plus-perks li{ padding:7px 0 7px 26px; position:relative; color:var(--text) }
.plus-perks li::before{ content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800 }
.plus-plans{ display:flex; flex-direction:column; gap:10px; margin:8px 0 }
.plan-btn{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; font-size:1rem }
.plan-btn:hover{ border-color:var(--accent) }
#plan-annual{ border-color:var(--accent); background:rgba(124,92,255,.12) }
.plan-head{ font-weight:700 }
.plan-price{ font-weight:800; white-space:nowrap }
#recaptcha-host{ display:flex; justify-content:center }