/* ============================================================
   OBJECTIVITY - Triviagon chrome around an interrogation chamber
   ============================================================

   Same contract as Star Miner: the page chrome speaks Triviagon
   (amethyst, antique gold, Cinzel/Spectral/Plex Mono, both themes;
   tokens match mt.css exactly), and the BOARD keeps its own palette
   in both themes. Star Miner's board is a window into space; this
   one is an examination room with the lights off - a specimen
   under a spotlight and twenty-five sealed questions around it.

   Most questions are 50/50s ("Wood, or metal?") whose answer names
   a side, so a revealed tile is a STATEMENT, not a verdict - every
   back shares one teal-lit look, and red is reserved for wrong
   guesses, the only true mistake in the game.
   ============================================================ */

:root{
  --bg:#EDEAF2; --surface:#FBFAFD; --surface-2:#E4DFEE; --sunken:#E9E5F1;
  --ink:#1C1526; --ink-soft:#5F5673; --ink-faint:#6D6380;
  --line:#D3CBE0; --line-soft:#E2DCEC;
  --accent:#6D3FBF; --accent-2:#8B62D9; --accent-soft:#EDE4FB; --accent-ink:#FFFFFF;
  --gold:#8F6B18; --gold-2:#B8912F; --gold-soft:#F6EED9;
  --good:#2C7350; --good-bg:#DEEFE6; --bad:#A5364A; --bad-bg:#F8E1E5;
  --glow:rgba(109,63,191,.10);
  --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;

  /* the chamber - one palette, both themes */
  --ob-void:#0C0E1A;         /* board ground */
  --ob-tile:#141A30;         /* sealed tile face */
  --ob-tile-2:#1A2240;       /* sealed tile face, raised edge */
  --ob-line:#28345A;         /* tile hairline */
  --ob-line-2:#3A4C7E;       /* tile hairline, lit */
  --ob-ink:#D9E4FA;          /* board text */
  --ob-dim:#8093B8;          /* board text, secondary */
  --ob-yes:#6FE8C4;          /* an answer of yes - teal signal */
  --ob-no:#C9A1FF;           /* an answer of no - violet signal */
  --ob-spent:#070910;        /* flipped tile ground */
  --ob-gold:#F0CE72;         /* the specimen, reveals, reward */
  --ob-bad:#FF6273;          /* wrong guess - the only red on the board */
  --ob-free:#FFE04A;         /* free-flip pips */
}
@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:#877C9C;
    --line:#332942; --line-soft:#2A2138;
    --accent:#B48CF7; --accent-2:#C9AAFF; --accent-soft:#291F44; --accent-ink:#150F22;
    --gold:#E2BA5F; --gold-2:#F0D28E; --gold-soft:#2E2413;
    --good:#5DC694; --good-bg:#14301F; --bad:#E7768A; --bad-bg:#2E1720;
    --glow:rgba(180,140,247,.13);
    --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:#877C9C;
  --line:#332942; --line-soft:#2A2138;
  --accent:#B48CF7; --accent-2:#C9AAFF; --accent-soft:#291F44; --accent-ink:#150F22;
  --gold:#E2BA5F; --gold-2:#F0D28E; --gold-soft:#2E2413;
  --good:#5DC694; --good-bg:#14301F; --bad:#E7768A; --bad-bg:#2E1720;
  --glow:rgba(180,140,247,.13);
  --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:-1; pointer-events:none;
  background:radial-gradient(130% 70% at 50% -8%, var(--glow) 0%, transparent 62%);
}
#app{max-width:62rem; margin:0 auto; padding:1.5rem 1.15rem 4.5rem; position:relative}
a{color:inherit}

/* ---------------- masthead (mirrors the trivia pages) ---------------- */
.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.35rem,5.6vw,2.1rem); 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:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.45rem .85rem; line-height:1; display:inline-block; box-shadow:var(--shadow-sm);
}
.homebtn:hover{color:var(--gold); border-color:var(--gold)}
.homebtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hdr-actions{position:absolute; top:.9rem; right:0; display:flex; align-items:center; gap:.35rem}
/* .patbtn belongs in every one of these selectors. The pattern switcher is
   injected by /assets/bgpat.js, which supplies no styling of its own - each
   page's stylesheet dresses it. Left out here, it fell back to the browser's
   default button: a white rectangle beside two themed ovals. mt.css and
   sm.css group the three the same way. */
.sndbtn,.themebtn,.patbtn{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:.45rem .85rem; cursor:pointer; line-height:1;
  box-shadow:var(--shadow-sm);
}
.sndbtn:hover,.themebtn:hover,.patbtn:hover{color:var(--gold); border-color:var(--gold)}
.sndbtn:focus-visible,.themebtn:focus-visible,.patbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sndbtn[aria-pressed="true"]{color:var(--gold); border-color:var(--gold)}
.themebtn,.patbtn{min-width:2rem; text-align:center; font-size:.78rem; padding:.4rem .6rem}

/* ---------------- top nav ----------------
   Same shape as the trivia pages' .topnav in mt.css, restated here because
   this page carries its own stylesheet and does not load that one. */
.topnav{display:flex; justify-content:center; gap:.4rem; margin:1.1rem 0 .2rem; flex-wrap:wrap}
.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}

/* The archive lives in /assets/arc.css now - one definition shared by
   every original puzzle. See that file for why. */

/* ---------------- layout ---------------- */
.playwrap{display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:1.4rem; align-items:start; margin-top:1rem}
@media (max-width:46rem){ .playwrap{grid-template-columns:1fr} }

/* ---------------- HUD ---------------- */
.hud{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:0 0 .8rem; flex-wrap:wrap}
.hud .day{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.hud .day b{color:var(--ink); font-weight:600}
.hud .day .past{
  color:var(--accent); border:1px solid var(--accent); border-radius:999px;
  padding:.1rem .45rem; margin-left:.3rem; font-size:.9em; white-space:nowrap;
}
/* Labels are spelled out in full ("Score Remaining", not "Score"), which is
   worth more than compactness - so the row is allowed to wrap and the
   letter-spacing is eased to buy the width back. */
.scorebox{display:flex; gap:1.15rem; align-items:flex-end; position:relative; flex-wrap:wrap; justify-content:flex-end}
.scorebox .cell{text-align:right}
.scorebox .lbl{font-family:var(--mono); font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); display:block; white-space:nowrap}
.scorebox .val{font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1}
.scorebox .val.dim{font-size:1.15rem; color:var(--ink-soft)}
/* the flip allowance, as pips that burn away and refill */
.pips{display:inline-flex; gap:.28rem; align-items:center; margin-left:.1rem; padding-bottom:.3rem}
.pips i{
  width:.55rem; height:.55rem; border-radius:50%; background:var(--gold);
  border:1px solid var(--gold); transition:background .3s ease, opacity .3s ease;
}
.pips i.out{background:transparent; opacity:.4}
.scoretip{
  position:absolute; top:100%; right:0; z-index:20; margin-top:.45rem;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); padding:.6rem .8rem;
  font-family:var(--mono); font-size:.68rem; line-height:1.7; letter-spacing:.03em;
  color:var(--ink-soft); white-space:nowrap; text-align:left; font-weight:400;
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease;
}
.scorebox:hover .scoretip,.scorebox:focus-visible .scoretip{opacity:1; transform:none}
.scoretip b{color:var(--ink); font-weight:600}
.scoretip .tot{display:block; margin-top:.4rem; padding-top:.4rem; border-top:1px solid var(--line-soft); color:var(--ink)}
/* Narrow screens: the four spelled-out labels cannot sit on one line, and
   left to itself flex fills greedily and wraps 3 + 1, stranding the score
   - the number that matters most - alone on its own row. Give each cell a
   half-width basis so it breaks evenly 2 + 2 instead. */
@media (max-width:34rem){
  .hud{gap:.5rem}
  .scorebox{width:100%; gap:.5rem .9rem}
  .scorebox .cell{flex:1 1 40%; text-align:left}
  .scorebox .pips{padding-bottom:0}
}
.scorebox:focus{outline:none}
.scorebox:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:4px}

/* ---------------- the chamber ---------------- */
.boardshell{
  background:var(--ob-void); border:1px solid var(--line); border-radius:14px;
  padding:clamp(.7rem,2.2vw,1.1rem); box-shadow:var(--shadow-lg), inset 0 0 70px rgba(10,14,30,.8);
  position:relative; overflow:hidden;
}
/* the examination light: a cone from above, and a faint ring on the floor */
.boardshell::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 34% at 50% -4%, rgba(240,206,114,.10) 0%, transparent 70%),
    radial-gradient(45% 20% at 50% 13%, rgba(217,228,250,.05) 0%, transparent 70%);
}
.boardshell > *{position:relative; z-index:1}

/* the specimen pedestal */
.pedestal{display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.4rem 0 .9rem}
.pedestal .plabel{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.3em; text-indent:.3em;
  text-transform:uppercase; color:var(--ob-dim);
}
.specimen{
  min-width:9.5rem; text-align:center; padding:.5rem 1.2rem;
  border:1px solid var(--ob-line-2); border-radius:10px;
  background:linear-gradient(180deg, rgba(26,34,64,.9), rgba(16,21,40,.9));
  font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:.14em;
  color:var(--ob-gold); text-shadow:0 0 18px rgba(240,206,114,.35);
}
.specimen.unknown{color:var(--ob-dim); text-shadow:0 0 14px rgba(128,147,184,.3)}
@media (prefers-reduced-motion:no-preference){
  .specimen.unknown{animation:breathe 3.2s ease-in-out infinite}
  @keyframes breathe{50%{text-shadow:0 0 26px rgba(217,228,250,.45); color:var(--ob-ink)}}
  .specimen.revealed{animation:revealPop .5s cubic-bezier(.3,1.4,.5,1)}
  @keyframes revealPop{0%{transform:scale(.6); opacity:0} 100%{transform:scale(1); opacity:1}}
}

/* ---------------- the standing brief ----------------
   Sits between the pedestal and the grid, because that is where a player
   looks between deciding and flipping. The countdown takes the same gold
   as the pips in the score row, so the two read as one idea. */
.brief{text-align:center; margin:0 0 1rem; padding:0 .4rem}
.brief .lead{
  margin:0 0 .3rem; font-family:var(--body); font-size:clamp(.86rem,2.3vw,.98rem);
  color:var(--ob-ink); line-height:1.45; text-wrap:balance;
}
.brief .lead b{
  color:var(--ob-gold); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:1.1em; text-shadow:0 0 12px rgba(240,206,114,.35);
}
.brief .fine{
  margin:0 auto; max-width:34rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.04em;
  line-height:1.7; color:var(--ob-dim); text-wrap:balance;
}

/* ---------------- the grid of questions ---------------- */
.qgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(5px,1vw,8px); grid-auto-rows:1fr}
@media (max-width:40rem){ .qgrid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:26rem){ .qgrid{grid-template-columns:repeat(3,1fr)} }

.qtile{
  position:relative; border:0; padding:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent; perspective:520px; min-height:5.6rem;
  font:inherit; color:inherit; text-align:center;
}
.qtile:focus-visible{outline:2px solid var(--ob-yes); outline-offset:2px; border-radius:10px}
.qtile .in{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.42,0,.22,1);
}
.qtile.flipped .in{transform:rotateY(180deg)}
.qtile .face{
  position:absolute; inset:0; border-radius:10px; padding:.5rem .45rem;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
}
.qtile .front{
  background:linear-gradient(155deg, var(--ob-tile-2), var(--ob-tile));
  border:1px solid var(--ob-line);
  box-shadow:inset 0 1px 0 rgba(217,228,250,.06);
  transition:border-color .18s ease, transform .18s ease;
}
.qtile:not(.flipped):not(:disabled):hover .front{border-color:var(--ob-line-2)}
@media (prefers-reduced-motion:no-preference){
  .qtile:not(.flipped):not(:disabled):hover{transform:translateY(-1px)}
}
.qtile .front .sig{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; color:var(--ob-dim); line-height:1;
}
.qtile .front .qq{
  font-family:var(--body); font-weight:500; font-size:clamp(.62rem,1.6vw,.76rem);
  line-height:1.38; color:var(--ob-ink); text-wrap:balance;
}
.qtile .back{
  transform:rotateY(180deg);
  background:var(--ob-spent); border:1px solid rgba(40,52,90,.6);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.65);
}
.qtile .back .aa{
  font-family:var(--body); font-weight:500; font-size:clamp(.66rem,1.7vw,.8rem);
  line-height:1.4; text-wrap:balance; color:#C9EFE0;
}
/* every revealed tile shares one look: a statement where the question was,
   lit faintly from the teal of the chamber. There is no yes and no here
   any more - the answer to "wood, or metal?" is simply "Metal." */
.qtile .back{background:linear-gradient(160deg, rgba(111,232,196,.09), var(--ob-spent) 58%)}
.qtile .back::after{
  content:""; position:absolute; left:18%; right:18%; top:.42rem; height:1px;
  background:linear-gradient(90deg, transparent, rgba(111,232,196,.45), transparent);
}
.qtile:disabled{cursor:default}

/* ---------------- guess bar ---------------- */
.guessbar{margin-top:.9rem; position:relative}
.guessrow{display:flex; gap:.5rem}
#guess{
  flex:1; min-width:0; background:rgba(10,13,26,.9); color:var(--ob-ink);
  border:1px solid var(--ob-line-2); border-radius:10px; padding:.62rem .85rem;
  font-family:var(--mono); font-size:.85rem; letter-spacing:.02em;
}
#guess::placeholder{color:var(--ob-dim)}
#guess:focus{outline:none; border-color:var(--ob-yes); box-shadow:0 0 0 1px var(--ob-yes), 0 0 18px rgba(111,232,196,.15)}
#gbtn{
  font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ob-gold); background:transparent;
  border:1px solid var(--ob-gold); border-radius:10px; padding:.55rem 1.05rem; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
#gbtn:hover{background:rgba(240,206,114,.12)}
#gbtn:focus-visible{outline:2px solid var(--ob-gold); outline-offset:2px}
#gbtn:disabled{opacity:.35; cursor:default}
.guessbar.shake #guess{animation:gshake .3s linear}
@keyframes gshake{25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}}
/* The refill slot, under the specimen and above the line that explains the
   cost. Reserves no height when there is nothing to show, so the board does
   not shift as the button comes and goes. */
.refillbar{display:flex; justify-content:center; margin:0 0 .9rem}
.refillbar:empty{display:none}
/* Sized as the decision it is rather than the chip it was in the score row:
   the board's gold on the board's dark ground, wide enough to be the obvious
   next move for somebody who has just run out of flips. */
/* Outlined, the way the nav marks its current section: the colour carries the
   border and the text, and the fill is that same colour taken almost to black.

   Filling it solid made it louder than the specimen above it, which inverts
   the emphasis - the answer is what the board is for. Held as an outline it
   keeps the size and stays plainly a button, without competing.

   Values are literal rather than tokens on purpose: the board keeps one
   palette across both themes, so a control sitting ON the board must not
   follow the page chrome. */
.refill{
  font-family:var(--display); font-size:.86rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ob-gold); background:#221B0C; border:1px solid var(--ob-gold);
  /* padding tuned so the control clears the 44px minimum tap target - it is
     the primary action on a phone once the flips run out */
  border-radius:999px; padding:.88rem 1.7rem; cursor:pointer; line-height:1.1;
  white-space:nowrap;
  transition:transform .15s ease, background .15s ease;
}
@media (prefers-reduced-motion:no-preference){
  .refill:hover{transform:translateY(-1px)}
}
.refill:hover{background:#33280F}
.refill:focus-visible{outline:2px solid var(--ob-gold); outline-offset:2px}
.refill .cost{opacity:.7; font-size:.92em}
.refill.shake{animation:gshake .3s linear}
.scorebox .val.stars{color:var(--gold-2); letter-spacing:.08em; font-size:.95rem}
.results .bigscore.stars{color:var(--gold-2); letter-spacing:.1em}
/* Earned versus spent.

   Both halves used to be the same gold, separated only by whether the glyph
   was filled - which at this size is close to unreadable at a glance. A spent
   star is now solid black instead.

   Pure black would disappear into the dark theme's near-black page, so the
   unlit colour is a token that resolves to black on light and to the darkest
   ink the palette has on dark, with a hairline rim in both. Still reads as
   "black star", still countable, never invisible. */
:root{ --ob-star-off:#000000; --ob-star-rim:rgba(255,255,255,.30); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ob-star-off:#05060B; --ob-star-rim:rgba(255,255,255,.42); }
}
:root[data-theme="dark"]{ --ob-star-off:#05060B; --ob-star-rim:rgba(255,255,255,.42); }
.stars .lit{color:var(--gold-2)}
.stars .unlit{
  color:var(--ob-star-off);
  text-shadow:0 0 1px var(--ob-star-rim), 0 0 2px var(--ob-star-rim);
}
/* the line under the guess box: status on the left, the exit on the right */
.underbar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin:.5rem .1rem 0; min-height:1.4rem;
}
.gnote{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; color:var(--ob-dim);
}
.gnote .miss{color:var(--ob-bad)}
/* Legible, and where the player already is. The first version was 9.6px
   grey text at the foot of a side card and was reported as missing -
   which, for practical purposes, it was. */
.giveup{
  flex:none; font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ob-dim); background:transparent;
  border:1px solid var(--ob-line-2); border-radius:999px; padding:.32rem .8rem;
  cursor:pointer; line-height:1; white-space:nowrap; font-weight:500;
  transition:color .18s ease, border-color .18s ease;
}
.giveup:hover{color:var(--ob-bad); border-color:var(--ob-bad)}
.giveup:focus-visible{outline:2px solid var(--ob-bad); outline-offset:2px}
@media (max-width:26rem){ .underbar{flex-wrap:wrap} }

/* wrong guesses, each with the tile that ruled it out */
/* Explains the wrong-guess list, and only exists when that list does. Sized
   as a footnote: it is read once and then skipped for the rest of the game,
   so it must not compete with the guesses themselves. */
.missnote{
  margin:.85rem 0 0; font-family:var(--body); font-size:.76rem; line-height:1.5;
  color:var(--ob-dim); max-width:44rem;
}
.missrow{list-style:none; margin:.45rem 0 0; padding:0; display:flex; flex-direction:column; gap:.3rem}
.missrow .miss{
  display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap;
  padding:.32rem .6rem; border-radius:8px;
  background:rgba(255,98,115,.06); border:1px solid rgba(255,98,115,.22);
}
.missrow .mname{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--ob-bad);
  text-decoration:line-through; text-decoration-thickness:1px; flex:none;
}
.missrow .mwhy{
  font-family:var(--body); font-size:.76rem; line-height:1.35; color:#B8F5E2;
}
.missrow .mwhy::before{content:"- "; color:var(--ob-dim)}
/* not yet knowable: stated quietly, as an invitation to flip */
.missrow .miss.pending{background:rgba(128,147,184,.06); border-color:rgba(128,147,184,.22)}
.missrow .miss.pending .mwhy{color:var(--ob-dim); font-style:italic}

/* the autofill list - dark sibling of the trivia pages' acbox */
.acbox{
  position:absolute; bottom:calc(100% + .4rem); left:0; right:0; z-index:30;
  margin:0; padding:.3rem; list-style:none; max-height:14rem; overflow:auto;
  background:rgba(12,15,29,.98); border:1px solid var(--ob-line-2); border-radius:10px;
  box-shadow:0 -8px 30px rgba(0,0,0,.5);
}
.acbox[hidden]{display:none}
.acbox li{
  font-family:var(--mono); font-size:.78rem; color:var(--ob-ink);
  padding:.4rem .6rem; border-radius:7px; cursor:pointer;
}
.acbox li.on{background:rgba(111,232,196,.14); color:var(--ob-yes)}
.acbox li.gone{color:var(--ob-dim); text-decoration:line-through; opacity:.55}
/* the word the player actually typed, when it differs from the object's name -
   quiet enough to stay a footnote, present enough to explain the row */
.acbox li .via{
  float:right; margin-left:.75rem; color:var(--ob-dim); font-size:.86em;
  font-style:italic; text-decoration:none;
}
.acbox li .via::before{content:"“"}
.acbox li .via::after{content:"”"}

/* ---------------- side panel ---------------- */
.side{display:flex; flex-direction:column; gap:1rem}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:1rem 1.1rem; box-shadow:var(--shadow-sm);
}
.card h3{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 .7rem; font-weight:500;
}
.howto{font-size:.82rem; line-height:1.55; color:var(--ink-soft); margin:0}
.howto b{color:var(--ink)}
/* (the old side-panel .giveup rule lived here and silently overrode the
   in-board one further up the file - same selector, later in the cascade,
   so the button stayed 9.6px however hard the other rule was edited. The
   button moved into the board; this rule went with it.) */

/* ---------------- results ---------------- */
.results{
  margin-top:1.2rem; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:1.2rem 1.3rem; box-shadow:var(--shadow);
}
.results .headline{display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap}
.results .verdict{font-family:var(--display); font-weight:700; font-size:1.3rem}
.results .verdict.win{color:var(--good)}
.results .verdict.lose{color:var(--bad)}
.results .bigscore{
  font-family:var(--display); font-weight:700; font-size:2rem; color:var(--ink);
  font-variant-numeric:tabular-nums; margin-left:auto;
}
.results .bigscore small{font-size:.55em; color:var(--ink-faint); font-weight:600}
.results .detail{font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--ink-soft); margin:.5rem 0 0; line-height:1.9}
.results .sharebtn{
  margin-top:.9rem; font-family:var(--display); font-weight:600; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent); border:1px solid var(--accent); border-radius:999px;
  padding:.55rem 1.3rem; cursor:pointer; box-shadow:0 3px 12px var(--glow);
}
.results .sharebtn:hover{filter:brightness(1.1)}
.results .sharebtn.ghost{background:transparent; color:var(--ink-faint); border-color:var(--line); box-shadow:none}
.results .sharebtn.ghost:hover{color:var(--ink); border-color:var(--ink-soft); filter:none}
.results .sharebtn.copied{background:var(--good); border-color:var(--good)}
.results .demo{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:.9rem}

/* solve sparkle */
#fx{position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden}
.spark{
  position:absolute; width:6px; height:6px; border-radius:2px;
  animation:sparkfall 1.15s cubic-bezier(.2,.5,.6,1) forwards;
}
@keyframes sparkfall{
  0%{transform:translate(0,0) rotate(0); opacity:1}
  100%{transform:translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .qtile .in{transition:none}
  .spark{display:none}
}