/* MyBibleQuiz — shared styles, built on the My Bible Quiz design system
   ("Morning in Eden"): warm parchment ground, Eden-green brand fills, and the
   four fruit colours only where the game happens (answer tiles, points).
   The page ground is `surface` dressed with static brand art (a soft sunrise,
   a faint leaf-and-sun wallpaper, dew-green hills) — painted once, never
   animated. Fonts are served locally so the app works offline. */

@font-face { font-family:'Fredoka'; src:url('/assets/Fredoka-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Fredoka'; src:url('/assets/Fredoka-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Fredoka'; src:url('/assets/Fredoka-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/Nunito-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/Nunito-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/Nunito-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/Nunito-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/Nunito-900.woff2') format('woff2'); font-weight:900; font-display:swap; }

:root{
  /* ---- design-system tokens ---- */
  --surface:#fbf6e9; --surface-raised:#ffffff; --surface-sunk:#f1ead6; --dew:#e6f1d8;
  --line:#ded4b8; --line-strong:#7d7152;
  --ink:#1b2a1f; --ink-muted:#4e5d51;
  --eden:#1f4d2b; --eden-deep:#13301b; --on-eden:#fbf6e9;
  --fig:#2f7d32; --sprout:#9bd35a; --pomegranate:#b8303a; --river:#1f6fa8;
  --sunfruit:#f2b21b; --sun-deep:#a8760a; --soil:#6b4a2f;
  --answer-fruit:#c8323c; --answer-river:#1f6fa8; --answer-sun:#f2b21b; --answer-leaf:#2f7d32;
  --on-answer:#ffffff; --ink-on-sun:#1b2a1f;
  --success:#2f7d32; --danger:#b3261e; --focus:#1f6fa8;
  --font-display:Fredoka,"Baloo 2",ui-rounded,system-ui,sans-serif;
  --font-body:Nunito,ui-rounded,system-ui,sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
  --radius-sm:8px; --radius-md:14px; --radius-lg:24px; --radius-pill:999px;
  --ledge:0 5px 0 #13301b;
  --leaf-lift:0 10px 30px rgba(31,77,43,.14);

  /* ---- older names the page scripts still use, pointed at the tokens ---- */
  --gold:var(--sunfruit); --gold-deep:var(--sun-deep); --gold-ink:var(--ink-on-sun);
  --good:var(--success); --bad:var(--danger);
  --red:var(--answer-fruit); --blue:var(--answer-river); --amber:var(--answer-sun); --green:var(--answer-leaf);
  --leaf-100:var(--dew); --leaf-300:var(--sprout); --leaf-500:var(--fig); --leaf-700:var(--eden);
  --leaf-900:var(--eden); --leaf-950:var(--surface);
  --ink-dim:var(--ink-muted);
  --page:var(--surface-raised); --page-ink:var(--ink);
  --card:var(--surface-raised); --card-line:var(--line);

  /* Answer lanes, always fruit, river, sun, leaf — each with its shape and letter. */
  --a-0:var(--answer-fruit); --a-0-edge:#8e1f28; --a-0-ink:var(--on-answer);
  --a-1:var(--answer-river); --a-1-edge:#134b73; --a-1-ink:var(--on-answer);
  --a-2:var(--answer-sun);   --a-2-edge:#a8760a; --a-2-ink:var(--ink-on-sun);
  --a-3:var(--answer-leaf);  --a-3-edge:#1d5320; --a-3-ink:var(--on-answer);

  --gutter:clamp(16px,4vw,40px);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; min-height:100%;
  background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-weight:600; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
/* "Morning in Eden": sunrise top-right, wallpaper everywhere, hills along the
   bottom of the page. Plain background layers on <body>, so it scrolls with
   the page and costs nothing per frame. */
body{
  background:
    url('/assets/bg-sunrise.svg') no-repeat right top / min(980px,135vw) auto,
    url('/assets/bg-hills.svg') no-repeat center bottom / 100% clamp(96px,17vh,200px),
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(155,211,90,.16), transparent 70%),
    url('/assets/bg-pattern.svg') repeat 0 0 / 240px 240px,
    var(--surface);
}
/* The host lobby on `eden`, the brand's lobby ground: the same art at dusk-green. */
body.on-eden{
  background:
    url('/assets/bg-sunrise.svg') no-repeat right top / min(980px,135vw) auto,
    url('/assets/bg-hills-eden.svg') no-repeat center bottom / 100% clamp(96px,17vh,200px),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(155,211,90,.12), transparent 70%),
    url('/assets/bg-pattern-eden.svg') repeat 0 0 / 240px 240px,
    var(--eden);
}
.on-eden .screen{ color:var(--on-eden); }
.on-eden .eyebrow{ color:rgba(251,246,233,.78); }
.on-eden .pin-display .eyebrow{ color:var(--ink-muted); }
.on-eden .join-url{ color:var(--sprout); }
.on-eden .player-chips .dim{ color:rgba(251,246,233,.8); }
.on-eden .btn:not(.ghost){ background:var(--sunfruit); color:var(--ink-on-sun); box-shadow:0 5px 0 var(--sun-deep); }
.on-eden .btn:not(.ghost):active{ box-shadow:none; }
.on-eden .chip{ box-shadow:0 3px 0 rgba(0,0,0,.18); }
a{ color:var(--fig); }

button,input,select,textarea{ font:inherit; color:inherit; }
button{
  border:0; background:none; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  user-select:none;
}
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; color:var(--ink); }
code{ background:var(--surface-sunk); padding:1px 6px; border-radius:6px; }

.screen{
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:max(var(--gutter),env(safe-area-inset-top)) var(--gutter)
          max(var(--gutter),env(safe-area-inset-bottom));
  gap:clamp(14px,2.4vh,28px);
}
.center{ align-items:center; justify-content:center; text-align:center; }
.hidden{ display:none !important; }
.grow{ flex:1 1 auto; min-height:0; }
.row{ display:flex; align-items:center; gap:14px; }
.between{ justify-content:space-between; }
.wrap{ flex-wrap:wrap; }

/* Brand lockup: the design system's logo file, never retyped. */
.logo{ display:inline-flex; align-items:center; text-decoration:none; }
.logo .lockup{ height:36px; width:auto; display:block; }

.eyebrow{
  font-family:var(--font-body); font-weight:800; font-size:12px; line-height:16px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);
}
.dim{ color:var(--ink-muted); }
.big{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; line-height:1.05; color:var(--ink); }

/* ------------------------------------------------------------- controls -- */
/* Chunky game-show buttons on a 5px ledge that drop onto it when pressed. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:12px var(--space-6); border-radius:var(--radius-md);
  background:var(--eden); color:var(--on-eden);
  font-family:var(--font-display); font-weight:600; font-size:18px; line-height:24px;
  box-shadow:var(--ledge); text-decoration:none;
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(5px); box-shadow:none; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:var(--ledge); }
.btn.ghost{
  background:var(--surface-raised); color:var(--eden);
  box-shadow:inset 0 0 0 2px var(--line-strong), 0 5px 0 var(--line);
}
.btn.ghost:hover{ filter:none; background:var(--dew); }
.btn.ghost:active{ box-shadow:inset 0 0 0 2px var(--line-strong); }
.btn.sun{ background:var(--sunfruit); color:var(--ink-on-sun); box-shadow:0 5px 0 var(--sun-deep); }
.btn.big-cta{ font-size:22px; line-height:28px; padding:var(--space-4) var(--space-8); }
.btn.sm{ font-size:15px; padding:8px var(--space-4); }

.field{
  width:100%; padding:12px var(--space-4); border-radius:var(--radius-sm);
  background:var(--surface-sunk); border:2px solid var(--line-strong);
  color:var(--ink); outline:none; font-size:18px; font-weight:700;
}
.field::placeholder{ color:var(--ink-muted); font-weight:600; }
.field:focus{ outline:3px solid var(--focus); outline-offset:2px; }
.field.sm{ padding:10px 14px; font-size:16px; }
select.field{ color:var(--ink); }
.field.pin{
  text-align:center; font-family:var(--font-display); font-size:clamp(30px,9vw,44px); font-weight:600;
  letter-spacing:.2em; padding:14px 12px;
}

.card{
  background:var(--surface-raised); color:var(--ink);
  border-radius:var(--radius-lg); padding:clamp(16px,2.2vw,24px);
  box-shadow:var(--leaf-lift);
}
button.card{ text-align:left; transition:box-shadow .12s ease, background .12s ease; }
button.card:hover{ box-shadow:var(--leaf-lift), inset 0 0 0 2px var(--fig); }

.notice{
  padding:12px 16px; border-radius:var(--radius-md); font-weight:700; font-size:15px;
  background:#fbe6e4; border:2px solid var(--danger); color:var(--danger);
}
.notice.ok{ background:var(--dew); border-color:var(--success); color:var(--eden); }

/* ------------------------------------------------------ the question page -- */
.qtext{
  position:relative; align-self:stretch;
  background:var(--surface-raised); color:var(--ink);
  border-radius:var(--radius-lg); box-shadow:var(--leaf-lift);
  padding:clamp(18px,2.6vw,32px) clamp(20px,3vw,40px);
  font-family:var(--font-display); font-weight:600; line-height:1.25; text-align:center;
  font-size:clamp(22px,3.2vw,48px);
}
.qimage{
  max-height:26vh; max-width:100%; object-fit:contain;
  border-radius:var(--radius-md); align-self:center; border:4px solid var(--surface-raised);
  box-shadow:var(--leaf-lift);
}

/* -------------------------------------------------------- answer tiles --- */
.answers{
  display:grid; gap:var(--space-3);
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.tile{
  --bg:var(--a-0); --edge:var(--a-0-edge); --fg:var(--a-0-ink);
  position:relative; display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-4) var(--space-6); border-radius:var(--radius-md); min-height:clamp(84px,15vh,150px);
  background:var(--bg); color:var(--fg);
  box-shadow:0 5px 0 var(--edge);
  font-family:var(--font-display); font-weight:600; font-size:clamp(17px,2vw,26px); line-height:1.25;
  text-align:left; transition:transform .08s ease, box-shadow .08s ease, opacity .2s ease;
}
.tile[data-lane="1"]{ --bg:var(--a-1); --edge:var(--a-1-edge); --fg:var(--a-1-ink); }
.tile[data-lane="2"]{ --bg:var(--a-2); --edge:var(--a-2-edge); --fg:var(--a-2-ink); }
.tile[data-lane="3"]{ --bg:var(--a-3); --edge:var(--a-3-edge); --fg:var(--a-3-ink); }
button.tile:active{ transform:translateY(5px); box-shadow:none; }
.tile .shape{
  flex:0 0 auto; width:clamp(34px,3.6vw,50px); height:clamp(34px,3.6vw,50px);
  padding:clamp(6px,.7vw,9px); border-radius:50%;
  background:rgba(255,255,255,.22);
}
.tile[data-lane="2"] .shape{ background:rgba(27,42,31,.12); }
.tile .label{ flex:1 1 auto; min-width:0; }
.tile .pick{
  position:absolute; top:8px; right:12px; font-family:var(--font-body); font-size:13px; font-weight:800;
  background:rgba(255,255,255,.92); color:var(--ink); padding:2px 10px; border-radius:var(--radius-pill);
}

.tile.dimmed{ opacity:.38; }
.tile.chosen{ box-shadow:0 0 0 4px var(--surface), 0 0 0 7px var(--ink); }
.tile.right{ box-shadow:0 0 0 4px var(--surface), 0 0 0 7px var(--success); }
.tile.right .pick{ font-size:clamp(14px,1.7vw,20px); }
.tile.right .pick::after{ content:' ✓'; }
.tile .tally{
  position:absolute; right:14px; bottom:10px;
  min-width:2em; padding:2px 10px; border-radius:var(--radius-pill); text-align:center;
  background:rgba(255,255,255,.92); color:var(--ink);
  font-family:var(--font-display); font-size:clamp(15px,1.8vw,22px); font-weight:700;
}

/* ------------------------------------------------------------ host bits -- */
.pin-display{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--surface-raised); color:var(--ink); padding:var(--space-4) var(--space-6);
  border-radius:var(--radius-lg); box-shadow:var(--leaf-lift);
}
.pin-value{
  font-family:var(--font-display); font-weight:700; font-size:clamp(46px,9vw,110px); line-height:1;
  letter-spacing:.06em; color:var(--eden);
}
.qr-panel{
  background:var(--surface-raised); padding:14px; border-radius:var(--radius-lg); line-height:0;
  box-shadow:var(--leaf-lift);
}
.qr-panel img{ display:block; width:clamp(150px,20vw,240px); height:auto; }
.join-url{ font-family:var(--font-display); font-weight:600; font-size:clamp(16px,2vw,26px); color:var(--fig); word-break:break-all; }

.player-chips{ display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; overflow:auto; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--radius-pill); font-weight:800; font-size:clamp(14px,1.4vw,19px);
  background:var(--surface-raised); color:var(--ink); box-shadow:inset 0 0 0 2px var(--line);
}
.chip.gone{ opacity:.45; }
.chip button{ opacity:.6; font-weight:800; padding:0 2px; color:var(--ink); }
.chip button:hover{ opacity:1; color:var(--danger); }

.timer{
  flex:0 0 auto; width:clamp(64px,7vw,104px); height:clamp(64px,7vw,104px);
  display:grid; place-items:center; position:relative;
  background:var(--surface-raised); border-radius:50%; box-shadow:var(--leaf-lift);
}
.timer svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.timer .ring-track{ stroke:var(--dew); }
.timer .ring-fill{ stroke:var(--river); transition:stroke-dashoffset .3s linear, stroke .3s; }
.timer.urgent .ring-fill{ stroke:var(--pomegranate); }
.timer span{ position:relative; font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,38px); color:var(--ink); }

.board{ display:flex; flex-direction:column; gap:10px; width:min(760px,100%); }
.board-row{
  display:flex; align-items:center; gap:16px;
  padding:12px 20px; border-radius:var(--radius-md);
  background:var(--surface-raised); color:var(--ink);
  box-shadow:var(--leaf-lift);
  font-weight:800; font-size:clamp(16px,1.9vw,24px);
}
.board-row .rank{
  display:grid; place-items:center; width:1.8em; height:1.8em; border-radius:50%;
  background:var(--dew); color:var(--eden); font-family:var(--font-display); font-weight:700; font-size:.85em;
}
.board-row .who{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.board-row.me{ background:var(--sunfruit); color:var(--ink-on-sun); }
.board-row.me .rank{ background:rgba(27,42,31,.12); color:var(--ink-on-sun); }

.podium{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,2vw,26px); width:100%; }
.podium-step{ display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 1 min(260px,30%); }
.podium-bar{
  width:100%; border-radius:var(--radius-md) var(--radius-md) 0 0; background:var(--fig);
  display:flex; align-items:flex-start; justify-content:center; padding-top:14px;
  font-family:var(--font-display); font-size:clamp(26px,4vw,54px); font-weight:700; color:var(--on-answer);
}
.podium-step[data-place="1"] .podium-bar{ height:clamp(130px,22vh,230px); background:var(--sunfruit); color:var(--ink-on-sun); }
.podium-step[data-place="2"] .podium-bar{ height:clamp(96px,16vh,170px); background:var(--eden); color:var(--on-eden); }
.podium-step[data-place="3"] .podium-bar{ height:clamp(72px,12vh,130px); background:var(--soil); color:var(--on-eden); }
.podium-name{ font-family:var(--font-display); font-weight:600; font-size:clamp(15px,1.8vw,24px); text-align:center; word-break:break-word; color:var(--ink); }

/* ------------------------------------------------ the winners' reveal ---
   Five steps, 4-2-1-3-5 left to right so first place stands in the middle.
   Each step starts flat and rises when its place is announced. */
.podium.five{ gap:clamp(6px,1.4vw,18px); min-height:clamp(250px,46vh,470px); }
.podium.five .podium-step{ flex:0 1 min(220px,19%); }
.podium.five .podium-bar{
  height:0; padding-top:0; overflow:hidden;
  transition:height .6s ease-out, padding-top .6s ease-out;
}
.podium.five .podium-name{ opacity:0; transform:scale(.9); transition:opacity .4s ease, transform .4s ease; min-height:3.4em; display:flex; flex-direction:column; justify-content:flex-end; }
.podium.five .podium-step.up .podium-bar{ padding-top:14px; }
.podium.five .podium-step.up[data-place="1"] .podium-bar{ height:clamp(150px,27vh,270px); }
.podium.five .podium-step.up[data-place="2"] .podium-bar{ height:clamp(118px,21vh,210px); }
.podium.five .podium-step.up[data-place="3"] .podium-bar{ height:clamp(92px,16vh,165px); }
.podium.five .podium-step.up[data-place="4"] .podium-bar{ height:clamp(66px,11vh,118px); }
.podium.five .podium-step.up[data-place="5"] .podium-bar{ height:clamp(46px,7.5vh,84px); }
.podium.five .podium-step.named .podium-name{ opacity:1; transform:none; }
.podium-step[data-place="4"] .podium-bar,
.podium-step[data-place="5"] .podium-bar{ background:var(--fig); color:var(--on-answer); font-size:clamp(20px,3vw,40px); }
.podium-step.named[data-place="1"] .podium-name{ color:var(--eden); font-size:clamp(20px,2.6vw,36px); }
.podium-crown{ font-size:clamp(28px,3.6vw,52px); line-height:1; }

.reveal-title{ transition:opacity .4s ease; }
.reveal-later{ opacity:0; pointer-events:none; transition:opacity .4s ease; }
.reveal-later.shown{ opacity:1; pointer-events:auto; }

.confetti{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:40; }

/* ---------------------------------------------- highlights and streaks --- */
.highlights{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.hl{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--radius-pill); font-weight:800; font-size:clamp(14px,1.5vw,19px);
  background:var(--surface-raised); color:var(--ink); box-shadow:inset 0 0 0 2px var(--line);
}
.hl.fast{ background:var(--sunfruit); color:var(--ink-on-sun); box-shadow:none; }
.hl.fire{ background:var(--dew); color:var(--eden); box-shadow:inset 0 0 0 2px var(--sprout); }

.board-row .move{ font-size:.7em; font-weight:800; min-width:2.6em; text-align:center; }
.board-row .move.up{ color:var(--success); }
.board-row .move.down{ color:var(--danger); }
.board-row .flame{
  font-size:.72em; padding:2px 9px; border-radius:var(--radius-pill); white-space:nowrap;
  background:var(--dew); color:var(--eden);
}
.board-row .gain{ font-size:.66em; color:var(--fig); white-space:nowrap; }
.board-row.me .gain{ color:var(--ink-on-sun); opacity:.75; }

/* Phone-side banners. */
.banner{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius:var(--radius-pill); font-weight:800; font-size:clamp(15px,4.4vw,19px);
}
.banner.podium-b{ background:var(--sunfruit); color:var(--ink-on-sun); }
.banner.fast{ background:var(--surface-raised); color:var(--ink); box-shadow:inset 0 0 0 2px var(--line); }
.banner.fire{ background:var(--dew); color:var(--eden); box-shadow:inset 0 0 0 2px var(--sprout); }
.banner.move-up{ background:var(--dew); color:var(--success); }
.banner.move-down{ background:#fbe6e4; color:var(--danger); }
.banners{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.suspense{ width:clamp(76px,22vw,112px); height:auto; }

/* Line icons from client.js / sound.js, sized to the text they sit in. */
.ico{ width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; }
.eyebrow.ref{ display:inline-flex; align-items:center; gap:6px; }
.verdict{ display:inline-flex; align-items:center; justify-content:center; gap:.18em; }
.verdict .ico{ width:.78em; height:.78em; stroke-width:3.2; }
.verdict .ico.crown, .podium-crown .ico{ fill:var(--sunfruit); stroke:var(--sun-deep); stroke-width:1.6; }
.podium-crown .ico{ width:1em; height:1em; vertical-align:middle; }
.hl .ico, .banner .ico{ width:1.1em; height:1.1em; }
.board-row .flame{ display:inline-flex; align-items:center; gap:4px; }
.sound-toggle .ico, .music-btn .ico{ width:22px; height:22px; }
.sound-mini .ico{ width:19px; height:19px; color:var(--eden); }

/* Floating sound + music controls. */
.sound-toggle, .music-btn{
  position:fixed; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); z-index:45;
  width:46px; height:46px; border-radius:50%; font-size:20px; line-height:1;
  background:var(--surface-raised); color:var(--eden); box-shadow:inset 0 0 0 2px var(--line-strong), var(--leaf-lift);
  display:grid; place-items:center; cursor:pointer;
}
.music-btn{ bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px); font-family:var(--font-display); font-weight:700; font-size:22px; }
.sound-toggle:hover, .music-btn:hover{ background:var(--dew); }
.sound-mini{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; font-size:17px; line-height:1;
  background:var(--surface-raised); box-shadow:inset 0 0 0 2px var(--line-strong); display:grid; place-items:center;
}
.music-panel{
  position:fixed; z-index:60; right:max(12px,env(safe-area-inset-right)); bottom:calc(max(12px,env(safe-area-inset-bottom)) + 112px);
  width:min(340px, calc(100vw - 24px)); max-height:min(78vh, 560px); overflow:auto;
  padding:var(--space-4); border-radius:var(--radius-lg);
  background:var(--surface-raised); color:var(--ink); box-shadow:0 10px 30px rgba(31,77,43,.22);
  display:none;
}
.music-panel.open{ display:block; }
.music-head{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; font-family:var(--font-display); font-size:20px; font-weight:600; }
.music-x{ width:32px; height:32px; border-radius:50%; font-size:22px; line-height:1; background:var(--surface-sunk); }
.music-grid{ display:grid; gap:8px; }
.music-opt{
  display:flex; flex-direction:column; gap:2px; width:100%; padding:10px 12px; text-align:left;
  border-radius:var(--radius-md); background:var(--surface-sunk); box-shadow:inset 0 0 0 2px transparent;
}
.music-opt:hover{ background:var(--dew); }
.music-opt[aria-pressed="true"]{ background:var(--dew); box-shadow:inset 0 0 0 2px var(--fig); }
.music-opt b{ font-weight:800; font-size:15px; }
.music-opt small{ font-size:13px; color:var(--ink-muted); }

.dist{ display:flex; flex-direction:column; gap:10px; }
.dist-row{ display:flex; align-items:center; gap:12px; font-weight:700; }
.dist-bar{ flex:1 1 auto; height:26px; border-radius:var(--radius-sm); background:var(--surface-sunk); overflow:hidden; }
.dist-fill{ height:100%; border-radius:var(--radius-sm); transition:width .5s ease; }

/* --------------------------------------------------------- player bits --- */
.status-hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; flex:1 1 auto;
}
.verdict{ font-family:var(--font-display); font-weight:700; font-size:clamp(36px,11vw,64px); line-height:1; }
.verdict.good{ color:var(--success); }
.verdict.bad{ color:var(--danger); }
.verdict.gold{ color:var(--eden); }
.points-won{
  font-family:var(--font-display); font-weight:700; font-size:clamp(24px,7vw,40px);
  background:var(--sunfruit); color:var(--ink-on-sun); padding:6px 22px; border-radius:var(--radius-pill);
}
.streak-flag{
  display:inline-block; padding:6px 14px; border-radius:var(--radius-pill);
  background:var(--dew); color:var(--eden); font-weight:800; font-size:15px;
}
.score-pill{
  padding:6px 14px; border-radius:var(--radius-pill); background:var(--surface-raised); color:var(--ink);
  font-weight:800; font-size:15px; box-shadow:inset 0 0 0 2px var(--line); white-space:nowrap;
}

.spinner{
  width:46px; height:46px; border-radius:50%;
  border:5px solid var(--dew); border-top-color:var(--fig);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Entrances stay: short and functional, not ambient. */
.pop{ animation:fade .2s ease; }
.fade{ animation:fade .2s ease; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

.offline-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:var(--danger); color:#fff; font-weight:800; text-align:center; font-size:15px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media (max-width:640px){
  .qtext{ font-size:clamp(20px,6vw,28px); }
  .tile{ min-height:clamp(96px,17vh,150px); font-size:18px; flex-direction:column; align-items:flex-start; justify-content:space-between; }
  .logo .lockup{ height:30px; }
}

/* ------------------------------------------------------- quiz editor ---
   Denser than the game screens on purpose: this one is read at desk
   distance on a laptop, not from the back of a hall. */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto; border-radius:var(--radius-sm);
  background:var(--surface-raised); box-shadow:inset 0 0 0 2px var(--line-strong);
  color:var(--ink); font-weight:800; font-size:16px; line-height:1; cursor:pointer;
}
.icon-btn:hover{ background:var(--dew); }
.icon-btn[disabled]{ opacity:.35; cursor:default; }
.qedit{ display:flex; flex-direction:column; gap:12px; }
.qedit .opt{ display:flex; align-items:center; gap:10px; }
.qedit .opt input[type=radio], .qedit .opt input[type=checkbox]{
  width:24px; height:24px; flex:0 0 auto; accent-color:var(--fig); cursor:pointer;
}
.qedit .lane{
  width:30px; flex:0 0 auto; text-align:center;
  font-weight:800; color:var(--ink-muted);
}
.qedit select{
  padding:9px 12px; border-radius:var(--radius-sm); font-weight:700; font-size:15px;
  background:var(--surface-sunk); color:var(--ink); border:2px solid var(--line-strong); cursor:pointer;
}
.qedit textarea{
  width:100%; min-height:96px; resize:vertical; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--surface-sunk); color:var(--ink); border:2px solid var(--line-strong);
  font:inherit; font-size:16px; font-weight:700; outline:none;
}
.qedit textarea:focus{ outline:3px solid var(--focus); outline-offset:2px; }
.editor-bar{
  position:sticky; bottom:0; display:flex; gap:12px; flex-wrap:wrap;
  padding:14px 0 4px; background:var(--surface); box-shadow:0 -12px 12px var(--surface);
}

/* ----------------------------------------------------------- bible library -- */
.library-card{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--dew); }
.lib-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.lib-grid.weeks{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.lib-tile{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-raised); color:var(--ink); border-radius:var(--radius-lg);
  box-shadow:0 0 0 1px var(--line), var(--leaf-lift); transition:transform .18s ease, box-shadow .18s ease; }
.lib-tile:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px var(--line), 0 18px 40px rgba(31,77,43,.2); }
.lib-cover{ position:relative; display:block; aspect-ratio:16/9; background:var(--dew); overflow:hidden; }
.lib-art{ display:block; width:100%; height:100%; transition:transform .4s ease; }
/* Painted covers (library-art.js) fill the frame like the drawn ones. */
img.lib-art, img.cv-art{ object-fit:cover; }
.lib-tile:hover .lib-art{ transform:scale(1.05); }
/* Fine print grain over drawn covers (not over uploaded photos), one shared tile. */
.cv::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:url('/assets/grain.svg') repeat 0 0 / 180px 180px; opacity:.16; mix-blend-mode:overlay; }
/* Separate rule: a browser without :has() drops only this one. */
.lib-cover:not(:has(> img))::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:url('/assets/grain.svg') repeat 0 0 / 180px 180px; opacity:.16; mix-blend-mode:overlay; }

/* ---- covers built from data (library-art.js): weeks, quizzes, own quizzes */
.cv{ position:relative; display:block; width:100%; height:100%; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 88% 0%, rgba(255,246,214,.34), rgba(255,246,214,0) 58%),
             linear-gradient(135deg, var(--c1), var(--c2));
  color:var(--mt); container-type:inline-size; }
.cv-scene{ background:var(--eden); }
.cv:has(> img)::after{ content:none; }
.cv-art{ display:block; width:100%; height:100%; transition:transform .4s ease; }
.cv-emblem{ position:absolute; z-index:-1; right:-6%; top:50%; width:62%; height:auto; aspect-ratio:1; opacity:.3;
  transform:translateY(-50%) rotate(var(--tilt,0deg)); transition:transform .4s ease, opacity .3s ease; }
.cv-week .cv-kicker{ position:absolute; left:7%; top:12%; font-weight:900; font-size:11px; font-size:clamp(10px,4.4cqi,13px);
  letter-spacing:.16em; text-transform:uppercase; opacity:.82; }
/* Sizes follow the cover width (cqi); the plain size before each is for older browsers. */
.cv-week .cv-num{ position:absolute; left:6%; top:20%; font-family:var(--font-display); font-weight:600; line-height:1;
  font-size:52px; font-size:clamp(36px,25cqi,84px); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#fffaf0;
  text-shadow:0 2px 0 rgba(0,0,0,.12); }
.cv-week .cv-book{ position:absolute; left:7%; bottom:17%; max-width:62%; font-weight:900; font-size:13px; font-size:clamp(11px,5.4cqi,17px);
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-strip{ position:absolute; left:7%; right:7%; bottom:8%; display:flex; gap:3px; height:5px; }
.cv-strip i{ flex:1; border-radius:3px; box-shadow:0 0 0 1px rgba(255,250,240,.55); }
.cv-own .cv-mono{ position:absolute; left:7%; bottom:10%; font-family:var(--font-display); font-weight:600; line-height:.9;
  font-size:52px; font-size:clamp(34px,24cqi,80px); letter-spacing:-.01em; color:#fffaf0; }
.cv-own .cv-emblem{ opacity:.34; }
*:hover > .cv .cv-emblem, *:hover > * > .cv .cv-emblem{ opacity:.42; }
.lib-tile-body{ display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1; }
.lib-tile h3{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,1.6vw,21px); line-height:1.25; }
.lib-tile p{ margin:0; font-size:14px; }
.lib-meta{ font-size:13px; color:var(--ink-muted); }
.lib-meta b{ color:var(--eden); }
.lib-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px; }
.lib-badge{ position:absolute; top:12px; left:12px; padding:4px 12px; border-radius:var(--radius-pill);
  background:var(--sunfruit); color:var(--ink-on-sun); font-weight:800; font-size:12px; box-shadow:0 3px 0 var(--sun-deep); }
.lib-weekno{ position:absolute; right:12px; bottom:10px; min-width:44px; padding:2px 10px; border-radius:var(--radius-md);
  background:rgba(251,246,233,.92); color:var(--eden); text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:22px; }
.lib-plan{ cursor:pointer; text-align:left; }
.lib-plan.mine, .lib-week.now{ box-shadow:0 0 0 3px var(--fig), var(--leaf-lift); }
.lib-plan:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.lib-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:4px; }
.lib-stats > span{ display:flex; flex-direction:column; align-items:center; padding:8px 4px; border-radius:var(--radius-md);
  background:var(--surface-sunk); font-size:12px; color:var(--ink-muted); }
.lib-stats b{ font-family:var(--font-display); font-size:20px; color:var(--eden); line-height:1.1; }
.lib-open{ margin-top:auto; padding-top:6px; font-weight:800; color:var(--fig); }
.lib-week.review{ background:var(--surface-sunk); }
.lib-week h3{ font-size:17px; }
.lib-week .lib-cover{ aspect-ratio:2/1; }
.lib-hero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); overflow:hidden;
  background:var(--surface-raised); border-radius:var(--radius-lg); box-shadow:0 0 0 1px var(--line), var(--leaf-lift); }
.lib-hero-art .lib-art{ min-height:240px; }
.lib-hero-body{ display:flex; flex-direction:column; gap:10px; padding:clamp(18px,3vw,32px); }
.lib-hero h2{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3vw,34px); }
.lib-hero p{ margin:0; }
@media (max-width:720px){ .lib-hero{ grid-template-columns:1fr; } .lib-hero-art .lib-art{ min-height:0; aspect-ratio:16/9; } }
.lib-week .lib-cover{ aspect-ratio:16/8; }
.lib-week .lib-tile-body{ padding:14px 16px 16px; }
.lib-week.past:not(:hover){ opacity:.72; }
.lib-week.now{ box-shadow:0 0 0 3px var(--sunfruit), 0 18px 40px rgba(31,77,43,.2); }
.lib-actions .btn.sm{ padding:7px 12px; font-size:14px; }
.cover-tool{ position:absolute; top:10px; right:10px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(13,30,18,.55); color:#fffaf0; backdrop-filter:blur(4px); opacity:0; transition:opacity .15s ease; }
.cover-tool .ico{ width:16px; height:16px; }
.lib-tile:hover .cover-tool, .cover-tool:focus-visible{ opacity:1; }
.cover-tool:hover{ background:var(--eden); }
@media (hover:none){ .cover-tool{ opacity:1; } }
.plan-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px; border-radius:var(--radius-md); background:var(--surface-sunk); }
.plan-form label{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px; }
.plan-form label .ico{ width:18px; height:18px; color:var(--fig); }
.plan-form .field{ width:auto; }
.qtr-nav{ display:flex; flex-wrap:wrap; gap:6px; }
.qtr-nav a{ padding:5px 12px; border-radius:var(--radius-pill); font-size:13px; font-weight:800; color:var(--eden); text-decoration:none;
  background:var(--surface-raised); box-shadow:inset 0 0 0 1px var(--line); font-variant-numeric:tabular-nums; }
.qtr-nav a:hover{ box-shadow:inset 0 0 0 2px var(--fig); }
.qtr-nav a.on{ background:var(--eden); color:var(--on-eden); box-shadow:none; }
.qtr{ scroll-margin-top:16px; }
#shelf .ptabs{ align-self:flex-start; }
.tab{ padding:8px 18px; border-radius:var(--radius-pill); font-weight:800; font-size:15px; cursor:pointer;
  background:var(--surface-raised); color:var(--ink); box-shadow:inset 0 0 0 2px var(--line); }
.tab.on{ background:var(--eden); color:var(--on-eden); box-shadow:none; }
.card.explain{ display:flex; flex-direction:column; gap:6px; text-align:left; padding:14px 18px; background:var(--dew); box-shadow:none; }
.card.explain .eyebrow{ color:var(--eden); }
.explain-text{ font-size:clamp(15px,1.6vw,20px); line-height:1.4; }
.explain-answer{ display:flex; gap:8px; align-items:center; font-weight:800; color:var(--eden); font-size:clamp(15px,1.7vw,21px); }

/* True or false: the one answer being asked about, under the question. */
.claim{
  align-self:center; max-width:min(100%,900px); text-align:center;
  padding:clamp(12px,1.8vw,20px) clamp(18px,2.6vw,32px);
  background:var(--dew); color:var(--eden); border:3px dashed var(--fig); border-radius:var(--radius-lg);
  font-family:var(--font-display); font-weight:600; line-height:1.25;
  font-size:clamp(20px,2.6vw,38px);
}

/* Host screen: who dropped out mid-game and how they get back. */
.offline-note{
  align-self:center; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center;
  padding:8px 16px; border-radius:var(--radius-pill);
  background:var(--surface-raised); color:var(--danger); font-weight:700; font-size:clamp(13px,1.3vw,16px);
  box-shadow:inset 0 0 0 2px var(--line);
}

/* ------------------------------------------------- website (set in /admin) -- */
/* While hosting is free (lib/free.js puts .free-mode on <html>), pages show their free wording. */
.free-mode [data-paid], html:not(.free-mode) [data-free]{ display:none !important; }

/* The announcement bar, written by the owner in /admin → Website. */
.announce{
  position:relative; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 52px 10px 16px; text-align:center; font-size:15px; line-height:22px; font-weight:700;
  background:var(--eden); color:var(--on-eden);
}
.announce.tone-sun{ background:var(--sunfruit); color:var(--ink-on-sun); }
.announce.tone-dew{ background:var(--dew); color:var(--eden); box-shadow:inset 0 -1px 0 var(--line); }
.announce-text{ margin:0; }
.announce a{ color:inherit; font-weight:900; text-decoration:underline; text-underline-offset:3px; }
.announce-link{ white-space:nowrap; margin-left:6px; }
.announce-x{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%; font-size:22px; line-height:1; color:inherit; opacity:.8;
}
.announce-x:hover{ opacity:1; background:rgba(0,0,0,.08); }
.announce-phone{ display:none; }
@media (max-width:600px){
  .announce{ padding:8px 46px 8px 14px; font-size:14px; line-height:20px; }
  .announce-wide{ display:none; }
  .announce-phone{ display:inline; }
}

/* The owner's own pages (/about and friends). */
.cms-wrap{ width:min(1120px,100%); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.prose{
  max-width:720px; margin:clamp(12px,4vw,40px) auto 0; padding:clamp(22px,4vw,44px);
  background:var(--surface-raised); border-radius:var(--radius-lg); box-shadow:var(--leaf-lift);
  font-weight:400; font-size:18px; line-height:1.65; overflow-wrap:anywhere;
}
.prose > * + *{ margin-top:16px; }
.prose h1{ font-weight:700; font-size:clamp(30px,5vw,44px); line-height:1.08; letter-spacing:-.01em; }
.prose .prose-meta{ margin-top:8px; color:var(--ink-muted); font-size:14px; font-weight:700; }
.prose h2{ font-size:26px; line-height:1.2; margin-top:34px; }
.prose h3{ font-size:20px; line-height:1.3; margin-top:26px; }
.prose p, .prose li{ color:var(--ink); }
.prose strong{ font-weight:800; }
.prose a{ color:var(--fig); font-weight:700; }
.prose ul, .prose ol{ padding-left:24px; margin-bottom:0; }
.prose li + li{ margin-top:6px; }
.prose blockquote{
  margin-left:0; margin-right:0; padding:14px 20px; border-left:5px solid var(--sprout);
  background:var(--dew); border-radius:0 var(--radius-md) var(--radius-md) 0; color:var(--eden); font-weight:600;
}
.prose img{ display:block; max-width:100%; height:auto; border-radius:var(--radius-md); margin-left:auto; margin-right:auto; }
.prose hr{ border:0; height:1px; background:var(--line); margin:30px 0; }
/* ----------------------------------------------------- blog + reading pages -- */
/* ------------------------------------------------- site header and footer -- */
/* lib/chrome.js builds them; /site.js opens the menus and shows who is signed in. */
.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; }

.site-head{ display:flex; align-items:center; gap:12px 20px; position:relative; z-index:30;
            padding-top:max(16px,env(safe-area-inset-top)); padding-bottom:16px; }
.site-head .logo{ flex:0 0 auto; }
.site-links{ display:flex; align-items:center; gap:4px 18px; margin-left:auto; }
.site-actions{ display:flex; align-items:center; gap:10px; }
.site-actions .acct-out, .site-actions .acct-in{ display:flex; align-items:center; gap:10px; }
.site-actions [hidden]{ display:none !important; }
.nav-link{ color:var(--ink); text-decoration:none; font-weight:800; font-size:15px; padding:8px 2px; }
.nav-link:hover, .nav-link[aria-current]{ color:var(--fig); }
.nav-link[aria-current]{ box-shadow:inset 0 -3px 0 var(--sprout); }
.site-head .btn.sm{ padding:8px 16px; font-size:15px; }

.menu-btn{ display:none; width:44px; height:44px; border-radius:12px; place-items:center; color:var(--eden);
           box-shadow:inset 0 0 0 2px var(--line-strong); background:var(--surface-raised); }

/* The profile picture: Google photo, or the first letter of the name. */
.pic{ width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; overflow:hidden;
      background:linear-gradient(135deg,var(--fig),var(--eden)); color:var(--on-eden);
      font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1;
      box-shadow:0 0 0 2px var(--surface-raised), 0 0 0 4px var(--sunfruit); }
.pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.pic.lg{ width:48px; height:48px; font-size:20px; }
.me-wrap{ position:relative; display:inline-flex; }
.me-btn{ display:inline-flex; align-items:center; gap:6px; padding:3px; border-radius:var(--radius-pill); color:var(--ink); min-height:44px; }
.me-btn .wide-only{ display:inline-flex; padding-right:4px; }
.me-btn:hover .pic{ box-shadow:0 0 0 2px var(--surface-raised), 0 0 0 4px var(--fig); }
.me-menu{ position:absolute; right:0; top:calc(100% + 8px); width:min(280px,calc(100vw - 24px)); z-index:40;
          background:var(--surface-raised); color:var(--ink); border-radius:var(--radius-md); padding:6px;
          box-shadow:0 0 0 1.5px var(--line), 0 16px 36px rgba(19,48,27,.22); display:flex; flex-direction:column; }
.me-menu[hidden]{ display:none; }
.me-head{ display:flex; gap:12px; align-items:center; padding:10px 10px 12px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.me-head > div{ display:flex; flex-direction:column; min-width:0; }
.me-head b{ font-family:var(--font-display); font-weight:600; font-size:17px; line-height:1.2; }
.me-head small{ color:var(--ink-muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-menu a{ padding:11px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:800; font-size:15px; }
.me-menu a:hover, .me-menu a:focus-visible{ background:var(--surface); }
.me-menu a.out{ border-top:1px solid var(--line); border-radius:0 0 10px 10px; margin-top:4px; color:var(--ink-muted); }
.plan-chip{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:6px;
            background:var(--dew); color:var(--eden); border-radius:var(--radius-pill); padding:3px 10px; font-size:12px; font-weight:800; white-space:nowrap; }
.plan-chip[hidden]{ display:none; }
.plan-chip::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--fig); }
.plan-chip.warn{ background:#fdf0cc; color:#6b4a00; }
.plan-chip.warn::before{ background:var(--sun-deep); }
.plan-chip.bad{ background:#fbe6e4; color:var(--danger); }
.plan-chip.bad::before{ background:var(--danger); }

/* Phone menu: a panel from the right over a dimmed page. */
.site-menu{ position:fixed; inset:0; z-index:60; }
.site-menu[hidden]{ display:none; }
.site-menu-scrim{ position:absolute; inset:0; background:rgba(19,48,27,.55); }
.site-menu-panel{ position:absolute; top:0; right:0; bottom:0; width:min(340px,86vw); overflow-y:auto;
                  background:var(--surface); color:var(--ink); display:flex; flex-direction:column; gap:2px;
                  padding:max(14px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));
                  box-shadow:-12px 0 32px rgba(0,0,0,.25); animation:menu-in .22s ease both; }
@keyframes menu-in{ from{ transform:translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .site-menu-panel{ animation:none; } }
.site-menu-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; margin-bottom:6px; }
.site-menu-top [hidden]{ display:none !important; }
.me-mini{ display:flex; align-items:center; gap:10px; font-weight:800; min-width:0; }
.me-mini b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-x{ margin-left:auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--ink);
         box-shadow:inset 0 0 0 2px var(--line); }
.menu-link{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 4px; min-height:48px;
            border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:800; font-size:17px; }
.menu-link[aria-current]{ color:var(--fig); }
.menu-link small{ font-size:12px; font-weight:800; background:var(--surface-sunk); color:var(--ink-muted); border-radius:var(--radius-pill); padding:2px 9px; }
.menu-ctas{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.menu-ctas[hidden]{ display:none; }
.menu-ctas .btn{ width:100%; }
.menu-login{ text-align:center; padding:12px; font-weight:800; color:var(--fig); text-decoration:none; }
html.menu-open, html.menu-open body{ overflow:hidden; }
/* The panel is parchment even on the dark home page. */
.site-menu .btn.ghost, .home .site-menu .btn.ghost{ background:var(--surface-raised); color:var(--eden); box-shadow:inset 0 0 0 2px var(--line-strong), 0 5px 0 var(--line); }
.home .site-menu :focus-visible, .home .me-menu :focus-visible{ outline-color:var(--focus); }

/* On the eden ground (home). */
.site-head.dark .nav-link{ color:var(--on-eden); }
.site-head.dark .nav-link:hover, .site-head.dark .nav-link[aria-current]{ color:var(--sprout); }
.site-head.dark .btn.ghost{ background:transparent; color:var(--on-eden); box-shadow:inset 0 0 0 2px rgba(251,246,233,.55), 0 5px 0 rgba(0,0,0,.28); }
.site-head.dark .btn.ghost:hover{ background:rgba(251,246,233,.1); }
.site-head.dark .menu-btn{ background:transparent; color:var(--on-eden); box-shadow:inset 0 0 0 2px rgba(251,246,233,.5); }
.site-head.dark .me-btn{ color:var(--on-eden); }
.site-head.dark .pic{ box-shadow:0 0 0 2px var(--eden), 0 0 0 4px var(--sunfruit); }
.site-head.dark .acct-in .btn:not(.ghost){ background:var(--on-eden); color:var(--eden); box-shadow:0 5px 0 rgba(0,0,0,.3); }
.site-head.dark :focus-visible{ outline-color:var(--sprout); }

@media (max-width:960px){
  .site-links, .site-head .wide-only{ display:none !important; }
  .menu-btn{ display:grid; }
  .site-actions{ margin-left:auto; }
}
@media (max-width:360px){
  .site-head .acct-out .btn.sm{ padding:8px 12px; font-size:14px; }
  .site-head .logo .lockup{ height:30px; }
}

.site-foot{ margin-top:48px; padding-top:36px; padding-bottom:max(36px,env(safe-area-inset-bottom)); border-top:1px solid var(--line);
            display:grid; grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.site-foot p{ margin-top:10px; max-width:30em; font-size:14px; line-height:1.5; color:var(--ink-muted); font-weight:600; }
.site-foot p a{ color:inherit; font-weight:800; }
.site-foot nav{ display:flex; flex-direction:column; gap:4px; }
.site-foot nav b{ font-family:var(--font-display); font-weight:600; color:var(--ink); margin-bottom:4px; }
.site-foot nav a{ color:var(--ink-muted); text-decoration:none; font-weight:700; padding:4px 0; }
.site-foot nav a:hover{ color:var(--fig); }
.site-foot .foot-credit{ grid-column:1 / -1; margin:0; font-size:13px; }
.site-foot.dark{ border-top-color:rgba(251,246,233,.14); }
.site-foot.dark p, .site-foot.dark nav a{ color:rgba(251,246,233,.8); }
.site-foot.dark nav b{ color:var(--on-eden); }
.site-foot.dark nav a:hover{ color:var(--sprout); }
@media (max-width:860px){ .site-foot{ grid-template-columns:1fr 1fr; } .site-foot .foot-brand{ grid-column:1 / -1; } }

/* The 404 page. */
.e404{ max-width:560px; margin:clamp(24px,8vw,72px) auto 0; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; }
.e404 h1{ font-weight:700; font-size:clamp(30px,6vw,44px); line-height:1.1; }
.e404 p{ color:var(--ink-muted); font-size:17px; }
.e404 .links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; font-weight:800; }
.e404 .links a{ color:var(--fig); }


.crumbs{ font-size:14px; font-weight:700; color:var(--ink-muted); margin-top:8px; }
.crumbs a{ color:var(--ink-muted); text-decoration:none; }
.crumbs a:hover{ color:var(--fig); text-decoration:underline; }

.blog-hero{ padding:clamp(16px,3vw,36px) 0 clamp(20px,3vw,32px); max-width:860px; }
.blog-hero h1{ font-weight:700; font-size:clamp(32px,5vw,54px); line-height:1.05; letter-spacing:-.01em; margin-top:10px; }
.blog-hero .intro{ font-size:18px; line-height:1.6; color:var(--ink-muted); font-weight:400; margin-top:14px; max-width:42em; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chip-link{ display:inline-flex; gap:6px; align-items:center; padding:7px 14px; border-radius:var(--radius-pill);
  background:var(--surface-raised); color:var(--ink); text-decoration:none; font-weight:800; font-size:15px; box-shadow:inset 0 0 0 2px var(--line); }
.chip-link span{ color:var(--ink-muted); font-weight:700; }
.chip-link:hover{ box-shadow:inset 0 0 0 2px var(--fig); }
.chip-link.on{ background:var(--eden); color:var(--on-eden); box-shadow:none; }
.chip-link.on span{ color:var(--sprout); }

.blog-grid{ margin-top:8px; }
.blog-featured{ margin-bottom:24px; }
.post-card{ text-decoration:none; cursor:pointer; }
.post-card .lib-tile-body p{ color:var(--ink-muted); font-weight:600; line-height:1.45; }
.post-card.big{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); }
.post-card.big .lib-cover{ aspect-ratio:auto; min-height:260px; }
.post-card.big h3{ font-size:clamp(22px,2.6vw,32px); }
.post-card.big .lib-tile-body{ padding:clamp(18px,3vw,32px); justify-content:center; gap:12px; }
@media (max-width:760px){ .post-card.big{ grid-template-columns:1fr; } .post-card.big .lib-cover{ aspect-ratio:16/9; min-height:0; } }

.post{ max-width:780px; margin:0 auto; }
.post-head{ margin-top:18px; }
.post-head .eyebrow{ text-decoration:none; color:var(--fig); }
.post-head h1{ font-weight:700; font-size:clamp(30px,5vw,48px); line-height:1.08; letter-spacing:-.01em; margin-top:10px; }
.post-meta{ margin-top:12px; color:var(--ink-muted); font-size:15px; font-weight:700; }
.post-cover{ margin-top:22px; aspect-ratio:2/1; border-radius:var(--radius-lg); overflow:hidden; background:var(--dew);
  box-shadow:0 0 0 1px var(--line); }
.post-cover .lib-art{ width:100%; height:100%; object-fit:cover; }
.quick-answer{ margin-top:22px; padding:18px 22px; border-radius:var(--radius-lg); background:var(--dew);
  box-shadow:inset 5px 0 0 var(--fig); }
.quick-answer .eyebrow{ color:var(--eden); }
.quick-answer p{ margin-top:6px; font-size:18px; line-height:1.6; font-weight:600; color:var(--eden); }
.toc{ margin-top:18px; padding:16px 22px; border-radius:var(--radius-lg); background:var(--surface-raised); box-shadow:0 0 0 1px var(--line); }
.toc ol{ margin:8px 0 0; padding-left:22px; columns:2 260px; column-gap:28px; }
.toc li{ margin:4px 0; break-inside:avoid; }
.toc a{ color:var(--ink); font-weight:700; text-decoration:none; }
.toc a:hover{ color:var(--fig); text-decoration:underline; }
.post .prose{ max-width:none; margin-top:18px; }
.prose h2[id], .prose h3[id]{ scroll-margin-top:20px; }
.post-tags{ margin-top:16px; display:flex; flex-wrap:wrap; gap:6px; }
.post-tags .tag{ padding:3px 10px; border-radius:var(--radius-pill); background:var(--surface-sunk); color:var(--ink-muted); font-size:13px; font-weight:800; }

/* Tables in posts. */
.table-scroll{ overflow-x:auto; border-radius:var(--radius-md); box-shadow:0 0 0 1px var(--line); }
.prose table{ width:100%; border-collapse:collapse; font-size:16px; line-height:1.45; }
.prose th, .prose td{ padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.prose th{ background:var(--surface-sunk); font-weight:800; }
.prose tbody tr:last-child td{ border-bottom:0; }

/* Quiz questions with a hidden answer (Q:/+/-/@/= in a post). */
.prose ol.quiz{ list-style:none; padding:0; counter-reset:none; }
.quiz-q{ position:relative; padding:16px 18px 14px 58px; border-radius:var(--radius-md); background:var(--surface);
  box-shadow:0 0 0 1px var(--line); }
.prose .quiz-q + .quiz-q{ margin-top:12px; }
.quiz-q::before{ content:attr(value); position:absolute; left:14px; top:14px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--eden); color:var(--on-eden); font-family:var(--font-display); font-weight:700; font-size:15px; }
.quiz-text{ font-weight:800; line-height:1.45; }
.prose .quiz-options{ margin:8px 0 0; padding-left:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 18px; }
.prose .quiz-options li{ margin:0; font-size:16px; }
@media (max-width:560px){ .prose .quiz-options{ grid-template-columns:1fr; } .quiz-q{ padding-left:50px; } .quiz-q::before{ left:10px; } }
.quiz-answer{ margin-top:10px; }
.quiz-answer summary{ display:inline-block; cursor:pointer; list-style:none; padding:4px 12px; border-radius:var(--radius-pill);
  background:var(--surface-raised); box-shadow:inset 0 0 0 2px var(--line-strong); font-weight:800; font-size:14px; color:var(--eden); }
.quiz-answer summary::-webkit-details-marker{ display:none; }
.quiz-answer[open] summary{ background:var(--eden); color:var(--on-eden); box-shadow:none; }
.quiz-answer p{ margin-top:8px; font-size:16px; line-height:1.5; }
.quiz-ref{ color:var(--ink-muted); font-weight:700; }
.quiz-why{ color:var(--ink-muted); }

/* Calls to action in and after posts. */
.post-mini-cta{ display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap;
  margin:28px 0 8px !important; padding:14px 18px; border-radius:var(--radius-md); background:var(--dew); }
.post-mini-cta p{ margin:0; font-size:16px; color:var(--eden); }
.post-mini-cta .btn{ text-decoration:none; color:var(--on-eden); }
.post-cta{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 28px; align-items:center; margin-top:28px;
  padding:clamp(22px,4vw,36px); border-radius:var(--radius-lg); background:var(--eden); color:var(--on-eden); }
.post-cta .eyebrow{ color:var(--sprout); }
.post-cta .cta-title{ color:var(--on-eden); font-size:clamp(24px,3vw,32px); line-height:1.15; margin-top:6px; }
.post-cta p{ margin-top:10px; opacity:.9; font-weight:400; line-height:1.55; }
.post-cta-actions{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.post-cta-actions .btn{ text-decoration:none; }
.post-cta-actions .btn.ghost{ background:transparent; color:var(--on-eden); box-shadow:inset 0 0 0 2px rgba(251,246,233,.5); }
@media (max-width:720px){ .post-cta{ grid-template-columns:1fr; } .post-cta .big-cta{ font-size:19px; } }
.related{ max-width:1120px; margin:44px auto 0; }
.related h2{ font-size:clamp(24px,3vw,32px); margin-bottom:16px; }

/* Forgot / reset password pages. */
.auth-card{ max-width:480px; margin:clamp(16px,6vw,56px) auto 0; background:var(--surface-raised); border-radius:var(--radius-lg);
            padding:clamp(22px,4vw,36px); box-shadow:var(--leaf-lift), 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:14px; }
.auth-card h1{ font-weight:700; font-size:clamp(26px,5vw,34px); line-height:1.1; }
.auth-card p{ color:var(--ink-muted); line-height:1.55; }
.auth-card p a{ color:var(--fig); font-weight:800; }
.auth-card .btn{ align-self:stretch; }
.auth-form{ display:flex; flex-direction:column; gap:12px; }
.auth-form label{ display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:800; }
.pw-wrap{ position:relative; display:block; }
.pw-wrap .field{ padding-right:72px; }
.pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); min-width:56px; min-height:36px; padding:4px 10px;
            border-radius:8px; font-weight:800; font-size:13px; color:var(--fig); }
.pw-toggle:hover{ background:var(--dew); }

/* ------------------------------------------------------- host console -- */
/* The bar on every console screen outside a game: logo, plan chip, profile photo. */
.app-bar{ display:flex; align-items:center; gap:12px; min-height:48px; }
.app-bar .app-title{ font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted);
                     padding-left:12px; border-left:2px solid var(--line); }
.app-bar .sp{ flex:1; }
.app-bar .bar-chip .plan-chip{ margin:0; }
.app-bar .me-btn .chev{ color:var(--ink-muted); }
.pic.xl{ width:72px; height:72px; font-size:30px; }
.me-scrim{ display:none; }
.me-menu button{ text-align:left; padding:11px 12px; border-radius:10px; font-weight:800; font-size:15px; color:var(--ink); }
.me-menu button:hover, .me-menu button:focus-visible{ background:var(--surface); }
.me-menu .grab{ display:none; }

/* Phones: the account menu slides up from the bottom, within thumb reach. */
@media (max-width:640px){
  .app-bar .app-title, .app-bar .bar-chip, .app-bar .me-btn .chev{ display:none; }
  .me-scrim:not([hidden]){ display:block; position:fixed; inset:0; z-index:89; background:rgba(19,48,27,.5); }
  .me-menu{ position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; border-radius:20px 20px 0 0; z-index:90;
            padding:8px 14px max(18px,env(safe-area-inset-bottom)); box-shadow:0 -10px 30px rgba(0,0,0,.25); }
  .me-menu .grab{ display:block; width:40px; height:4px; border-radius:2px; background:var(--line); align-self:center; margin:4px 0 8px; }
  .me-menu a, .me-menu button{ padding:14px 12px; font-size:16px; }
}

.page-col{ display:flex; flex-direction:column; gap:18px; max-width:820px; margin:0 auto; width:100%; overflow-y:auto; }
/* ------------------------------------------------ host console: the quiz picker */
.console{ display:flex; flex-direction:column; gap:28px; max-width:1240px; margin:0 auto; width:100%; padding-bottom:40px; }
.con-head{ display:flex; gap:16px 24px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; padding-top:8px; }
.con-head h1{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.6vw,42px); line-height:1.1; letter-spacing:-.01em; }
.con-head p{ margin:6px 0 0; color:var(--ink-muted); font-size:16px; max-width:56ch; }
.con-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn .ico, .btn-link .ico{ width:18px; height:18px; vertical-align:-3px; margin-right:6px; }
.btn-link .ico{ margin:0 0 0 4px; }
.btn-link.back{ display:inline-flex; align-items:center; gap:2px; text-decoration:none; color:var(--fig); padding:0; margin-bottom:10px; }
.btn-link.back .ico{ margin:0 4px 0 0; }
.btn.light{ background:var(--on-eden); color:var(--eden); box-shadow:0 5px 0 rgba(0,0,0,.3); }
.btn.danger{ background:var(--danger); color:#fff; box-shadow:0 5px 0 #7c1a14; }
.btn.danger-line{ color:var(--danger); box-shadow:inset 0 0 0 2px var(--danger), 0 5px 0 #f1c9c4; }
.btn-link{ font-weight:800; font-size:15px; color:inherit; text-decoration:underline; text-underline-offset:3px; padding:8px 4px; }
.notice.warn{ background:#fdf0cc; border-color:var(--sun-deep); color:#6b4a00; }
.btn .n{ display:inline-block; min-width:1.6em; margin-left:4px; padding:0 6px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.18); font-size:.82em; font-variant-numeric:tabular-nums; }
.btn.light .n, .btn.sun .n{ background:rgba(19,48,27,.1); }

/* Games already running: one row each, with a live dot. */
.running{ display:flex; flex-direction:column; gap:8px; }
.live-chip{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; text-align:left; padding:12px 16px; border-radius:var(--radius-md);
  background:var(--surface-raised); box-shadow:0 0 0 2px var(--fig); font-size:15px; }
.live-chip span{ color:var(--ink-muted); }
.live-chip .go{ margin-left:auto; color:var(--fig); font-weight:800; display:inline-flex; align-items:center; }
.live-chip .go .ico{ width:18px; height:18px; margin-left:4px; }
.live-dot{ width:10px; height:10px; border-radius:50%; background:var(--answer-fruit); box-shadow:0 0 0 4px rgba(200,50,60,.18); }

/* This week's quiz night: the week's cover beside one clear next step. */
.week-hero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); overflow:hidden; border-radius:var(--radius-lg);
  background:var(--eden-deep); color:var(--on-eden); box-shadow:0 20px 50px rgba(19,48,27,.28); }
.wh-cover{ min-height:260px; }
.wh-cover .cv{ border-radius:0; }
.wh-body{ display:flex; flex-direction:column; gap:10px; padding:clamp(22px,3vw,36px); justify-content:center;
  background:radial-gradient(120% 120% at 100% 0%, rgba(155,211,90,.16), transparent 60%); }
.wh-body .eyebrow{ color:var(--sprout); }
.wh-body h2{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3vw,38px); line-height:1.1; }
.wh-reading{ margin:0; font-size:17px; color:rgba(251,246,233,.88); font-weight:700; }
.wh-progress{ height:8px; border-radius:var(--radius-pill); background:rgba(251,246,233,.16); overflow:hidden; max-width:420px; }
.wh-progress span{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--sprout), var(--sunfruit)); }
.wh-meta{ font-size:13px; font-weight:800; letter-spacing:.02em; opacity:.8; }
.wh-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.wh-actions .btn-link{ color:var(--sprout); text-decoration:none; display:inline-flex; align-items:center; }
.lib-hero .wh-progress{ background:var(--surface-sunk); }
.lib-hero .wh-meta{ color:var(--eden); opacity:1; }
.cv-week.big .cv-num{ font-size:96px; font-size:clamp(64px,30cqi,150px); }
.cv-week.big .cv-kicker{ font-size:clamp(12px,3.4cqi,16px); }
.cv-week.big .cv-book{ font-size:clamp(14px,4.4cqi,22px); }
.cv-week.big .cv-strip{ height:7px; }
@media (max-width:760px){ .week-hero{ grid-template-columns:1fr; } .wh-cover{ min-height:0; aspect-ratio:16/8; } }

/* No plan yet: an invitation, with three plans to pick from. */
.plan-promo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:24px; align-items:center;
  padding:clamp(20px,3vw,32px); border-radius:var(--radius-lg); background:var(--eden-deep); color:var(--on-eden);
  box-shadow:0 20px 50px rgba(19,48,27,.24); }
.pp-body{ display:flex; flex-direction:column; gap:10px; }
.pp-body .eyebrow{ color:var(--sprout); }
.pp-body h2, .wh-body h2{ color:var(--on-eden); }
.pp-body h2{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(24px,2.8vw,34px); line-height:1.15; }
.pp-body p{ margin:0; color:rgba(251,246,233,.84); }
.pp-actions{ margin-top:6px; }
.pp-plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.pp-plan{ display:flex; flex-direction:column; gap:2px; text-align:left; color:var(--on-eden); border-radius:var(--radius-md);
  padding:0 0 12px; background:rgba(251,246,233,.06); box-shadow:inset 0 0 0 1px rgba(251,246,233,.14); overflow:hidden;
  transition:transform .18s ease, background .18s ease; }
.pp-plan:hover{ transform:translateY(-3px); background:rgba(251,246,233,.12); }
.pp-art{ display:block; aspect-ratio:16/10; margin-bottom:8px; overflow:hidden; }
.pp-art .lib-art{ width:100%; height:100%; }
.pp-plan b{ padding:0 12px; font-size:15px; line-height:1.25; }
.pp-plan > span:last-child{ padding:0 12px; font-size:12px; color:rgba(251,246,233,.7); }
@media (max-width:860px){ .plan-promo{ grid-template-columns:1fr; } }
@media (max-width:520px){ .pp-plans{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:72%; overflow-x:auto; scroll-snap-type:x mandatory; }
  .pp-plan{ scroll-snap-align:start; } }

/* Section heads over each shelf of cards. */
.qshelf, .recent, .qtr{ display:flex; flex-direction:column; gap:14px; }
.qshelf + .qshelf{ margin-top:18px; }
.qshelf-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.qshelf-head h2{ margin:0; font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.2; }
.qshelf-head > span{ font-size:13px; font-weight:800; color:var(--ink-muted); padding:1px 9px; border-radius:var(--radius-pill); background:var(--surface-sunk); }
.qshelf-head .qtr-parts{ background:none; padding:0; font-weight:700; }
.qshelf-more{ align-self:center; }

/* Jump back in: small horizontal cards, one tap to host again. */
.recent-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.recent-card{ display:flex; align-items:center; gap:12px; padding:8px 12px 8px 8px; text-align:left; border-radius:var(--radius-md);
  background:var(--surface-raised); box-shadow:0 0 0 1px var(--line), 0 6px 16px rgba(31,77,43,.07); min-width:0;
  transition:box-shadow .15s ease, transform .15s ease; }
.recent-card:hover{ transform:translateY(-2px); box-shadow:0 0 0 2px var(--fig), 0 10px 22px rgba(31,77,43,.12); }
.recent-cover{ flex:none; width:84px; aspect-ratio:16/10; border-radius:10px; overflow:hidden; }
.recent-cover .cv-week .cv-num{ font-size:26px; top:16%; }
.recent-cover .cv-week .cv-kicker, .recent-cover .cv-week .cv-book{ display:none; }
.recent-cover .cv-own .cv-mono{ font-size:24px; }
.recent-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.recent-text b{ font-size:14px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.recent-text span{ font-size:12px; color:var(--ink-muted); }
.recent-go{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--dew); color:var(--eden); }
.recent-go .ico{ width:14px; height:14px; }
@media (max-width:900px){ .recent-row{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(260px,80%); overflow-x:auto;
  scroll-snap-type:x mandatory; padding:2px 2px 8px; } .recent-card{ scroll-snap-align:start; } }

/* Tabs and search above the quiz cards. */
.con-quizzes{ display:flex; flex-direction:column; gap:18px; }
.picker-tools{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ptabs{ display:flex; gap:4px; border-bottom:2px solid var(--line); }
.ptab{ padding:10px 14px; font-weight:800; font-size:15px; color:var(--ink-muted); border-bottom:3px solid transparent; margin-bottom:-2px; }
.ptab span{ display:inline-block; min-width:1.8em; padding:0 6px; border-radius:var(--radius-pill); background:var(--surface-sunk); font-size:13px; text-align:center; }
.ptab.on{ color:var(--eden); border-bottom-color:var(--eden); }
.ptab.on span{ background:var(--dew); }
.ptab:hover{ color:var(--eden); }
.search{ flex:1 1 240px; max-width:380px; display:flex; align-items:center; gap:8px; padding:0 14px; border-radius:var(--radius-pill);
  background:var(--surface-raised); box-shadow:inset 0 0 0 1.5px var(--line-strong); color:var(--ink-muted); }
.search:focus-within{ outline:3px solid var(--focus); outline-offset:2px; }
.search input{ flex:1; min-width:0; border:0; background:none; outline:none; padding:11px 0; font-size:16px; font-weight:700; color:var(--ink); }
#qresults{ display:flex; flex-direction:column; gap:8px; }
.list-note{ font-size:14px; margin:0; color:var(--ink-muted); }

/* Quiz cards: cover on top (it starts the quiz too), title, one line of detail, Host. */
.qgrid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.qcard{ display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:var(--radius-lg); background:var(--surface-raised);
  box-shadow:0 0 0 1px var(--line), 0 8px 22px rgba(31,77,43,.08); transition:transform .18s ease, box-shadow .18s ease; }
.qcard:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px var(--line), 0 16px 34px rgba(31,77,43,.16); }
.qcard-cover{ position:relative; display:block; aspect-ratio:16/9; padding:0; overflow:hidden; cursor:pointer; }
.qcard-cover .cv-art{ transition:transform .4s ease; }
.qcard:hover .cv-art{ transform:scale(1.04); }
.qcard-count{ position:absolute; right:10px; top:10px; padding:3px 10px; border-radius:var(--radius-pill); font-size:12px; font-weight:800;
  background:rgba(13,30,18,.55); color:#fffaf0; backdrop-filter:blur(4px); }
.qcard-play{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(13,30,18,.28); color:#fff; opacity:0; transition:opacity .18s ease; }
.qcard-play .ico{ width:22px; height:22px; padding:14px; border-radius:50%; background:var(--sunfruit); color:var(--ink-on-sun);
  box-shadow:0 4px 0 var(--sun-deep); box-sizing:content-box; }
.qcard-cover:hover .qcard-play, .qcard-cover:focus-visible .qcard-play{ opacity:1; }
.qcard-body{ display:flex; flex-direction:column; gap:4px; padding:14px 16px 16px; flex:1; }
.qcard-body h3{ margin:0; font-size:16px; font-weight:900; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.qcard-sub{ margin:0; font-size:13px; color:var(--ink-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.qcard-foot{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:12px; }
.qcard-meta{ flex:1; min-width:0; font-size:12px; font-weight:700; color:var(--ink-muted); display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qcard-meta .ico{ width:14px; height:14px; flex:none; }
.qcard .btn.sm{ padding:7px 14px; font-size:14px; flex:none; }
.qcard-rounds{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:12px; }
.btn.alt{ background:var(--eden-deep); }
.btn .ico.done{ width:15px; height:15px; margin-right:4px; color:var(--sprout); stroke-width:3; }
.btn.icon-only{ padding:7px 10px; }
.btn.icon-only .ico{ margin:0; }

.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:40px 20px;
  border-radius:var(--radius-lg); background:var(--surface-raised); box-shadow:0 0 0 1px var(--line); }
.empty-state > .ico{ width:40px; height:40px; padding:12px; box-sizing:content-box; border-radius:50%; background:var(--dew); color:var(--eden); }
.empty-state b{ font-size:18px; }
.empty-state span{ color:var(--ink-muted); max-width:46ch; }
.empty-state .btn{ margin-top:6px; }

@media (max-width:560px){
  .console{ gap:22px; }
  .picker-tools{ flex-direction:column; align-items:stretch; }
  .search{ max-width:none; flex:0 0 auto; }
  .qgrid{ grid-template-columns:1fr 1fr; gap:12px; }
  .qcard-body{ padding:10px 12px 12px; }
  .qcard-body h3{ font-size:14px; }
  .qcard-sub{ display:none; }
  .qcard-foot{ flex-wrap:wrap; }
  .qcard-meta{ flex-basis:100%; }
  .qcard-foot .btn.ghost{ display:none; }
  .qcard-foot .btn{ flex:1; }
  .qcard-rounds .btn{ flex:1; padding-left:8px; padding-right:8px; }
  .con-head-actions{ width:100%; }
  .con-head-actions .btn{ flex:1; white-space:nowrap; padding-left:12px; padding-right:12px; font-size:16px; }
}

/* My account. */
.acct-sec{ display:flex; flex-direction:column; gap:10px; background:var(--surface-raised); border-radius:var(--radius-md);
           padding:18px 20px; box-shadow:0 0 0 1px var(--line); }
.acct-sec h2{ font-size:19px; }
.acct-sec p{ margin:0; line-height:1.5; }
.acct-sec a{ color:var(--fig); font-weight:800; }
.acct-sec .btn{ text-decoration:none; }
.acct-who{ flex-direction:row; align-items:center; gap:16px; }
.acct-who > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.acct-who b{ font-family:var(--font-display); font-weight:600; font-size:22px; }
.acct-plan{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.acct-plan > div{ display:flex; flex-direction:column; gap:2px; }
.acct-plan b{ font-size:17px; }
.acct-plan a.btn{ color:inherit; }
.acct-plan a.btn.sun{ color:var(--ink-on-sun); }
.danger-zone{ box-shadow:0 0 0 1.5px var(--danger); }
.danger-zone h2{ color:var(--danger); }

/* Quiz editor: labels that stay, a save bar that stays, previews. */
.ed-lab{ display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:800; color:var(--ink); }
.ed-lab .dim{ font-weight:700; font-size:13px; }
.qedit .icon-btn, .qedit select{ min-height:40px; }
.qedit .icon-btn{ width:40px; height:40px; }
.qedit .icon-btn .ico{ width:20px; height:20px; }
.save-bar{ position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
           padding:12px calc(var(--gutter) + 64px) max(12px,env(safe-area-inset-bottom)) var(--gutter); background:var(--surface-raised);
           box-shadow:0 -1px 0 var(--line), 0 -8px 24px rgba(27,42,31,.1); }
.save-status{ font-weight:800; font-size:14px; color:var(--fig); display:flex; align-items:center; gap:8px; }
.save-status::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--fig); }
.draft-offer{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.pv-overlay{ position:fixed; inset:0; z-index:70; background:rgba(19,48,27,.6); display:grid; place-items:center; padding:16px; }
.pv-dialog{ width:min(420px,100%); max-height:100%; overflow:auto; background:var(--surface); border-radius:var(--radius-lg);
            padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.pv-phone{ display:flex; flex-direction:column; gap:12px; border-radius:28px; padding:18px 14px; background:var(--surface);
           box-shadow:0 0 0 8px var(--eden-deep); margin:8px; }
.pv-phone .qtext{ font-size:20px; padding:14px; }
.pv-phone .tile{ min-height:90px; font-size:16px; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:12px; }
.pv-phone .tile .shape{ width:30px; height:30px; padding:6px; }
.pv-typed{ padding:14px; border-radius:var(--radius-sm); background:var(--surface-sunk); color:var(--ink-muted); font-weight:700; text-align:center; }

/* Library: five plans read as 3 + 2, not 4 + 1. */
@media (min-width:900px){ .lib-grid.plans{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* --------------------------------------------------- live game screens -- */
.lobby-quiz{ display:flex; flex-direction:column; gap:4px; }
.lobby-quiz b{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3.2vw,44px); line-height:1.1; }
.on-eden .lobby-quiz b{ color:var(--on-eden); }

.q-top{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(12px,2vw,28px); align-items:center; }
.q-progress{ display:flex; flex-direction:column; gap:8px; align-items:center; min-width:0; }
.q-dots{ display:flex; gap:clamp(3px,.4vw,6px); width:100%; max-width:720px; }
.q-dots i{ flex:1; height:clamp(6px,.8vh,10px); border-radius:6px; background:var(--line); }
.q-dots i.done{ background:var(--fig); }
.q-dots i.now{ background:var(--sunfruit); }
.q-bar{ width:100%; max-width:720px; height:10px; border-radius:6px; background:var(--line); overflow:hidden; }
.q-bar span{ display:block; height:100%; background:var(--fig); }
.answered-meter{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; min-width:clamp(120px,14vw,220px); }
.answered-meter .meter{ display:block; width:100%; height:8px; border-radius:6px; background:var(--line); overflow:hidden; }
.answered-meter .meter span{ display:block; height:100%; background:var(--eden); transition:width .3s ease; }
/* The question takes the room that used to sit empty under it. */
.qtext.big-q{ flex:1 1 auto; display:grid; place-items:center; font-size:clamp(26px,4.4vw,64px); min-height:min(26vh,260px); }

/* Answer reveal: wrong answers stay readable from the back row. */
.tile.wrong{ background:var(--surface-sunk); color:var(--ink); box-shadow:0 5px 0 var(--line); }
.tile.wrong .shape{ background:var(--surface-raised); color:var(--a-0); }
.tile.wrong[data-lane="1"] .shape{ color:var(--a-1); }
.tile.wrong[data-lane="2"] .shape{ color:var(--sun-deep); }
.tile.wrong[data-lane="3"] .shape{ color:var(--a-3); }
.tile.wrong .pick{ background:var(--surface-raised); }
.tile.wrong .tally{ background:var(--ink); color:var(--surface); }
.card.explain.explain-big{ padding:clamp(14px,1.8vw,24px) clamp(18px,2.4vw,32px); }
.card.explain.explain-big .eyebrow{ font-size:clamp(13px,1.2vw,17px); }
.card.explain.explain-big .explain-text{ font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2.1vw,30px); line-height:1.3; }
.reveal-body .tile{ min-height:clamp(64px,12vh,130px); }
@media (max-width:700px){
  .q-top{ grid-template-columns:auto minmax(0,1fr); }
  .answered-meter{ grid-column:1 / -1; flex-direction:row; align-items:center; min-width:0; }
  .qtext.big-q{ min-height:0; font-size:clamp(20px,6vw,28px); }
}

/* Player phone: what you picked, and the right answer in its own colour and shape. */
.you-picked{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; color:var(--ink-muted); font-weight:700; margin:0; }
.mini-lane{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 4px; border-radius:6px;
            background:var(--a-0); color:var(--on-answer); font-size:12px; font-weight:800; }
.mini-lane[data-lane="1"]{ background:var(--a-1); }
.mini-lane[data-lane="2"]{ background:var(--a-2); color:var(--ink-on-sun); }
.mini-lane[data-lane="3"]{ background:var(--a-3); }
.right-answer{ display:flex; flex-direction:column; gap:8px; width:min(420px,100%); text-align:left; }
.right-answer .eyebrow{ color:var(--fig); }
.tile.mini{ min-height:0; padding:12px 16px; font-size:19px; flex-direction:row; align-items:center; }
.tile.mini .shape{ width:32px; height:32px; padding:6px; }
.right-typed{ padding:12px 16px; border-radius:var(--radius-md); background:var(--dew); color:var(--eden); font-family:var(--font-display); font-weight:600; font-size:19px; }
.joined-quiz{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 16px; border-radius:var(--radius-md); background:var(--surface-raised); box-shadow:0 0 0 1px var(--line); }
.joined-quiz b{ font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.25; }