/* ============================================================
   MYSTIC TRINITY — daily video game trivia
   Palette: deep aubergine ground · amethyst interaction ·
            antique gold reserved for reward moments
   Type:    Cinzel (ceremonial) · Spectral (reading) · Plex Mono (data)
   ============================================================ */

:root{
  --bg:#EDEAF2; --surface:#FBFAFD; --surface-2:#E4DFEE; --sunken:#E9E5F1;
  --ink:#1C1526; --ink-soft:#5F5673; --ink-faint:#8B819E;
  --line:#D3CBE0; --line-soft:#E2DCEC;
  --accent:#6D3FBF; --accent-2:#8B62D9; --accent-soft:#EDE4FB; --accent-ink:#FFFFFF;
  --gold:#8F6B18; --gold-2:#B8912F; --gold-soft:#F6EED9;
  --easy:#2C7350; --easy-bg:#DEEFE6; --medium:#8E6415; --medium-bg:#F5EAD6; --hard:#A5364A; --hard-bg:#F8E1E5;
  --good:#2C7350; --good-bg:#DEEFE6; --bad:#A5364A; --bad-bg:#F8E1E5; --warn:#8E6415; --warn-bg:#F5EAD6;
  --glow:rgba(109,63,191,.10);
  --mote-rgb:96 74 132;
  --shadow-sm:0 1px 2px rgba(28,21,38,.06);
  --shadow:0 2px 4px rgba(28,21,38,.05), 0 12px 32px rgba(28,21,38,.10);
  --shadow-lg:0 4px 8px rgba(28,21,38,.06), 0 24px 60px rgba(28,21,38,.16);
  --display:"Cinzel",Georgia,serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#120E1A; --surface:#1C1628; --surface-2:#261E36; --sunken:#171223;
    --ink:#EFE9F6; --ink-soft:#A79CBC; --ink-faint:#7C7191;
    --line:#332942; --line-soft:#2A2138;
    --accent:#B48CF7; --accent-2:#C9AAFF; --accent-soft:#291F44; --accent-ink:#150F22;
    --gold:#E2BA5F; --gold-2:#F0D28E; --gold-soft:#2E2413;
    --easy:#5DC694; --easy-bg:#14301F; --medium:#E0B45C; --medium-bg:#2E2413; --hard:#E7768A; --hard-bg:#2E1720;
    --good:#5DC694; --good-bg:#14301F; --bad:#E7768A; --bad-bg:#2E1720; --warn:#E0B45C; --warn-bg:#2E2413;
    --glow:rgba(180,140,247,.13);
    --mote-rgb:200 174 240;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
    --shadow-lg:0 4px 8px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#120E1A; --surface:#1C1628; --surface-2:#261E36; --sunken:#171223;
  --ink:#EFE9F6; --ink-soft:#A79CBC; --ink-faint:#7C7191;
  --line:#332942; --line-soft:#2A2138;
  --accent:#B48CF7; --accent-2:#C9AAFF; --accent-soft:#291F44; --accent-ink:#150F22;
  --gold:#E2BA5F; --gold-2:#F0D28E; --gold-soft:#2E2413;
  --easy:#5DC694; --easy-bg:#14301F; --medium:#E0B45C; --medium-bg:#2E2413; --hard:#E7768A; --hard-bg:#2E1720;
  --good:#5DC694; --good-bg:#14301F; --bad:#E7768A; --bad-bg:#2E1720; --warn:#E0B45C; --warn-bg:#2E2413;
  --glow:rgba(180,140,247,.13);
  --mote-rgb:200 174 240;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --shadow-lg:0 4px 8px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(130% 70% at 50% -8%, var(--glow) 0%, transparent 62%);
}
#bg{position:fixed; inset:0; z-index:-1; pointer-events:none}
#app{max-width:41rem; margin:0 auto; padding:1.5rem 1.15rem 4.5rem; position:relative}
a{color:inherit}

/* ---------------- masthead ---------------- */
.masthead{text-align:center; padding:1.1rem 0 1rem; position:relative}
.crest{
  font-family:var(--display); font-weight:700; letter-spacing:.02em;
  font-size:clamp(1.25rem,5.6vw,2rem); line-height:1.12; margin:0; color:var(--ink); text-wrap:balance;
}
.crest a{text-decoration:none}
.crest .glyph{
  display:block; font-size:.62em; color:var(--gold); margin:0 auto .5rem;
  letter-spacing:.3em; text-indent:.3em; line-height:1;
}
.rule{display:flex; align-items:center; gap:.7rem; margin:.85rem auto 0; max-width:24rem; color:var(--line)}
.rule::before,.rule::after{content:""; flex:1; height:1px; background:currentColor}
.rule span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}
.homebtn{
  position:absolute; top:.9rem; left:0; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); text-decoration:none;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:.3rem .6rem; line-height:1; display:inline-block;
}
.homebtn:hover{color:var(--ink); border-color:var(--ink-soft)}
.homebtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Sound and theme sit together in the top right. Grouping them in a flex row
   avoids hard-coding an offset that would break if either label changed width. */
.hdr-actions{
  position:absolute; top:.9rem; right:0; display:flex; align-items:center; gap:.35rem;
}
.sndbtn, .themebtn{
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:.3rem .6rem; cursor:pointer; line-height:1;
}
.sndbtn:hover, .themebtn:hover{color:var(--ink); border-color:var(--ink-soft)}
.sndbtn:focus-visible, .themebtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sndbtn[aria-pressed="true"]{color:var(--gold); border-color:var(--gold)}
.themebtn{min-width:1.9rem; text-align:center; font-size:.7rem; padding:.26rem .5rem}

/* ---------------- top nav ---------------- */
.topnav{
  display:flex; justify-content:center; gap:.4rem; margin:1.1rem 0 .2rem;
}
.topnav a{
  font-family:var(--display); font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-faint);
  padding:.42rem .95rem; border:1px solid var(--line); border-radius:999px;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.topnav a:hover{color:var(--ink); border-color:var(--ink-soft)}
.topnav a[aria-current="page"]{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.topnav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------------- stepper ---------------- */
.stepper{
  display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:center; gap:.3rem;
  list-style:none; margin:1.15rem 0 1.5rem; padding:0 0 1.35rem;
  border-bottom:1px solid var(--line-soft); cursor:default; user-select:none;
}
.stepper .step{display:flex; flex-direction:column; align-items:center; gap:.4rem; width:5.1rem; flex:0 0 auto}
.stepper .node{
  width:2.5rem; height:2.5rem; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:.92rem;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-faint);
  position:relative; transition:transform .25s ease, box-shadow .25s ease;
}
.stepper .node::after{content:""; position:absolute; inset:3px; border-radius:50%; border:1px solid transparent}
.stepper .lbl{
  font-family:var(--display); font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.stepper .note{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); text-align:center;
}
.step.done .node{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.step.done .node::after{border-color:rgba(255,255,255,.18)}
.step.done .lbl{color:var(--ink)}
.step.done .note{color:var(--good); font-weight:600}
.step.done.zero .node{background:var(--bad); border-color:var(--bad); color:var(--surface)}
.step.done.zero .note{color:var(--bad)}
.step.current .node{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  box-shadow:0 0 0 4px var(--accent-soft), 0 6px 18px var(--glow); transform:scale(1.06);
}
.step.current .node::after{border-color:rgba(255,255,255,.3)}
.step.current .lbl{color:var(--ink)}
.step.current .note{color:var(--accent); font-weight:600}
.step.upcoming .node{border-style:dashed; background:var(--sunken)}
.stepper .connector{
  flex:1 1 auto; min-width:.6rem; height:1.5px; background:var(--line);
  margin-top:1.25rem; position:relative;
}
.stepper .connector::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  border-left:5px solid var(--line); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}
.stepper .connector.filled{background:var(--ink)}
.stepper .connector.filled::after{border-left-color:var(--ink)}

/* ---------------- round header ---------------- */
.round-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem}
.chip{
  font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; padding:.36rem .72rem; border-radius:2px; border:1px solid currentColor;
}
.chip.easy{background:var(--easy-bg); color:var(--easy)}
.chip.medium{background:var(--medium-bg); color:var(--medium)}
.chip.hard{background:var(--hard-bg); color:var(--hard)}
.stake{font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint)}

/* ---------------- clue cards ---------------- */
.deck{perspective:1400px}
.clue{
  background:var(--surface); border:1px solid var(--line); border-radius:5px;
  padding:1.15rem 1.3rem 1.25rem; margin-bottom:.8rem; box-shadow:var(--shadow);
  position:relative; transform-origin:top center;
}
.clue::before{content:""; position:absolute; inset:5px; border-radius:3px; border:1px solid var(--line-soft); pointer-events:none}
.clue.active{border-color:var(--accent); box-shadow:var(--shadow-lg)}
.clue.active::before{border-color:var(--accent-soft)}
.clue.past{opacity:.62; box-shadow:var(--shadow-sm); background:var(--sunken)}
.clue .tag{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; position:relative}
.clue .cno{font-family:var(--display); font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}
.clue.active .cno{color:var(--accent)}
.clue .worth{display:flex; align-items:center; gap:.38rem}
.pips{letter-spacing:.14em; font-size:.7rem; color:var(--gold)}
.pips i{font-style:normal; opacity:.22}
.pips i.lit{opacity:1}
.clue.past .pips{color:var(--ink-faint)}
.clue.past .pips i.lit{opacity:.5}
.worth .num{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase}
.clue p{margin:0; font-size:1.09rem; line-height:1.68; color:var(--ink)}
.clue.active p{font-size:1.13rem}

/* ---------------- input ---------------- */
.guessrow{display:flex; gap:.55rem; margin-top:1.35rem}
.guessrow input{
  flex:1; min-width:0; font-family:var(--body); font-size:1.05rem; padding:.78rem .95rem;
  border:1.5px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.guessrow input::placeholder{color:var(--ink-faint); font-style:italic}
.guessrow input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
button{
  font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; border-radius:4px; padding:.78rem 1.2rem; cursor:pointer;
  border:1.5px solid transparent; transition:transform .14s ease, filter .18s ease, border-color .18s ease, color .18s ease;
}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); box-shadow:0 3px 12px var(--glow)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent; color:var(--ink-faint); border-color:var(--line)}
.btn-ghost:hover{color:var(--ink); border-color:var(--ink-soft)}
.skiprow{margin-top:.7rem; text-align:right}

.feedback{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; margin-top:.8rem;
  padding:.6rem .85rem; border-radius:4px; display:none; border-left:3px solid currentColor;
}
.feedback.show{display:block}
.feedback.bad{background:var(--bad-bg); color:var(--bad)}
.feedback.warn{background:var(--warn-bg); color:var(--warn)}

/* ---------------- answer ---------------- */
.answer{
  position:relative; border-radius:6px; padding:1.5rem 1.4rem 1.4rem; margin-top:1.2rem;
  background:var(--surface); border:1.5px solid var(--good); box-shadow:var(--shadow-lg); overflow:hidden;
}
.answer::before{content:""; position:absolute; inset:5px; border-radius:4px; border:1px solid var(--good); opacity:.28; pointer-events:none}
.answer.missed{border-color:var(--bad)}
.answer.missed::before{border-color:var(--bad)}
.answer .bloom{
  position:absolute; left:50%; top:-30%; width:22rem; height:22rem; margin-left:-11rem;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--gold-soft) 0%, transparent 68%); opacity:0;
}
.answer .verdict{font-family:var(--display); font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--good); position:relative}
.answer.missed .verdict{color:var(--bad)}
.answer h2{
  font-family:var(--display); font-weight:600; font-size:clamp(1.35rem,5.2vw,1.75rem);
  margin:.5rem 0 .35rem; line-height:1.22; text-wrap:balance; position:relative;
}
.answer .meta{font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); letter-spacing:.07em; text-transform:uppercase; position:relative}
.answer .earned{font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.9rem; color:var(--good); position:relative}
.answer.missed .earned{color:var(--bad)}
.nextrow{margin-top:1.35rem; text-align:center}

/* ---------------- results ---------------- */
.results{text-align:center; padding-top:1rem}
.results .crown{font-family:var(--display); font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint)}
.results .final{
  font-family:var(--display); font-weight:700; font-size:4rem; line-height:1;
  margin:.5rem 0 .2rem; color:var(--gold); font-variant-numeric:tabular-nums;
}
.results .final span{color:var(--ink-faint); font-size:1.6rem}
.results .grade{font-family:var(--body); font-style:italic; font-size:1.05rem; color:var(--ink-soft); margin-top:.15rem}
.breakdown{margin:1.9rem auto 0; max-width:27rem; text-align:left}
.breakdown .row{
  display:flex; align-items:center; gap:.8rem; background:var(--surface);
  border:1px solid var(--line); border-radius:5px; padding:.75rem .95rem; margin-bottom:.55rem;
}
.breakdown .tiername{font-family:var(--display); font-size:.6rem; font-weight:700; letter-spacing:.16em; width:4.2rem; flex:0 0 auto}
.breakdown .gametitle{flex:1; min-width:0; line-height:1.3}
.breakdown .gt-name{display:block; font-size:.95rem}
.breakdown .gt-credit{
  display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.02em;
  color:var(--ink-faint); margin-top:.2rem;
}
.breakdown .rungset{display:flex; gap:.22rem; flex:0 0 auto}
.breakdown .rung{width:.8rem; height:.8rem; border-radius:2px; background:var(--sunken); border:1px solid var(--line)}
.breakdown .rung.hit{background:var(--good); border-color:var(--good)}
.breakdown .rung.spent{background:var(--line); border-color:var(--line)}
.breakdown .rung.miss{background:var(--bad); border-color:var(--bad); opacity:.55}
.breakdown .rowpts{font-family:var(--mono); font-size:.78rem; font-weight:600; width:1.9rem; text-align:right; flex:0 0 auto; font-variant-numeric:tabular-nums}
.shareblock{margin-top:1.7rem}
.sharebox{
  font-family:var(--mono); font-size:.78rem; line-height:1.75; text-align:left; white-space:pre;
  background:var(--sunken); border:1px dashed var(--line); border-radius:5px;
  padding:.95rem 1.15rem; max-width:20rem; margin:0 auto .8rem; overflow-x:auto; color:var(--ink-soft);
}
.shareblock button{margin:.2rem}

/* ---------------- archive ---------------- */
.arc-head{text-align:center; margin-bottom:1.4rem}
.arc-head h2{font-family:var(--display); font-weight:600; font-size:1.5rem; margin:0 0 .3rem}
.arc-head p{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0}
/* 4 across on desktop, stepping down on narrow screens. Fixed column counts
   rather than auto-fill, because the long date sets the card's minimum width
   and auto-fill would drop to 3. */
.arc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem}
@media (max-width:36rem){ .arc-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:28rem){ .arc-grid{grid-template-columns:repeat(2,1fr)} }
.acard{
  display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:5px; padding:.7rem .62rem .75rem; transition:border-color .18s ease, transform .14s ease, box-shadow .18s ease;
}
.acard:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow)}
.acard:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.acard .num{font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1}
/* Sized so the longest date ("September 30, 2026") clears a 4-across card
   even if the webfont renders wider than the fallback. */
.acard .dt{font-family:var(--mono); font-size:.55rem; letter-spacing:0; color:var(--ink-faint); margin-top:.3rem; display:block; white-space:nowrap}
.acard .score{
  display:inline-block; margin-top:.45rem; font-family:var(--mono); font-size:.6rem; font-weight:600;
  letter-spacing:.08em; padding:.14rem .4rem; border-radius:3px; background:var(--gold-soft); color:var(--gold);
}
.acard .score.none{background:var(--sunken); color:var(--ink-faint)}
.acard .score.perfect{background:var(--good-bg); color:var(--good)}
.acard.is-done{border-left:3px solid var(--gold)}
.acard.is-today{border-color:var(--accent); background:var(--accent-soft)}
.acard.is-today .num{color:var(--accent)}

/* ---------------- notices ---------------- */
.notice{
  text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:2.2rem 1.5rem; box-shadow:var(--shadow); margin-top:.5rem;
}
.notice .sigil{font-family:var(--display); font-size:1.8rem; color:var(--gold); letter-spacing:.2em}
.notice h2{font-family:var(--display); font-weight:600; font-size:1.35rem; margin:.7rem 0 .5rem; text-wrap:balance}
.notice p{color:var(--ink-soft); margin:0 auto; max-width:26rem}
.notice .when{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:1rem}
.notice .acts{margin-top:1.5rem; display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap}
.notice .acts a{text-decoration:none}
.err{font-family:var(--mono); font-size:.75rem; color:var(--bad); word-break:break-word}

footer{
  margin-top:3.5rem; padding-top:1.3rem; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.6rem; color:var(--ink-faint);
  letter-spacing:.07em; text-align:center; line-height:1.9;
}

@media (prefers-reduced-motion: no-preference){
  .clue.turn{animation:turnCard .6s cubic-bezier(.22,.72,.28,1) both}
  @keyframes turnCard{0%{transform:rotateX(-82deg) translateY(-6px); opacity:0}60%{opacity:1}100%{transform:rotateX(0) translateY(0); opacity:1}}
  .answer.enter{animation:riseIn .5s cubic-bezier(.22,.72,.28,1) both}
  @keyframes riseIn{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
  .answer.won .bloom{animation:bloomOut 1.5s ease-out forwards}
  @keyframes bloomOut{0%{opacity:0; transform:scale(.4)}30%{opacity:.85}100%{opacity:0; transform:scale(1.5)}}
  .shake{animation:shakeX .34s cubic-bezier(.36,.07,.19,.97)}
  @keyframes shakeX{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
  .step.current .node{animation:pulseNode 2.6s ease-in-out infinite}
  @keyframes pulseNode{0%,100%{box-shadow:0 0 0 4px var(--accent-soft), 0 6px 18px var(--glow)}50%{box-shadow:0 0 0 7px var(--accent-soft), 0 6px 22px var(--glow)}}
  .results .final{animation:riseIn .6s cubic-bezier(.22,.72,.28,1) both}
  .breakdown .row{animation:riseIn .45s cubic-bezier(.22,.72,.28,1) both}
  .breakdown .row:nth-child(1){animation-delay:.1s}
  .breakdown .row:nth-child(2){animation-delay:.2s}
  .breakdown .row:nth-child(3){animation-delay:.3s}
}