/* Riso poster look. Two inks on cream paper: --a is the structure ink (text, outlines, ground), --b the accent ink (buttons, wood, sun).
   Both come from the day's palette (src/palette.js sets the variables). No gradients, no blur, no glow: flat ink, hard offset
   "second ink" shadows, slightly irregular corners and a baked speckle layer (--grain, made in src/riso.js). */
@font-face { font-family: "Bowlby One"; src: url("../assets/fonts/BowlbyOne-Regular-latin.woff2") format("woff2"), url("../assets/fonts/BowlbyOne-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url("../assets/fonts/SplineSansMono-var-latin.woff2") format("woff2"), url("../assets/fonts/SplineSansMono-var.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
:root {
  --paper: #F2E8D5; --paper2: #E1D8C6; --a: #1D4FA8; --a2: #9AAAB7; --b: #FF5A1F; --b2: #F7A982; --k: #0B1B3F;
  --at: #1D4FA8; --ground: #1D4FA8; --on-ground: #F2E8D5; --btn-ink: #0B1B3F;
  --display: "Bowlby One", Impact, "Arial Black", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --stage: 600px;
  --r: 3px 7px 4px 6px / 6px 3px 7px 4px;           /* hand-cut corners */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--k); font-family: var(--mono); font-weight: 400; overscroll-behavior: none; }
body { display: flex; justify-content: center; }
/* The paper speckle: one baked tile over the whole page, above everything (it never takes a tap). */
body::after { content: ""; position: fixed; inset: 0; background-image: var(--grain, none); background-size: 256px 256px; pointer-events: none; z-index: 100; }
/* One column on every screen: full width on a phone, a centred poster on a desktop. */
#app { position: relative; container-type: size; container-name: stage; width: min(100%, var(--stage)); height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; background: var(--paper); }
@media (min-width: 700px) { #app { border-left: 3px solid var(--a); border-right: 3px solid var(--a); } }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }
.k, .kick { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* ---- play screen ---- */
.hud { position: absolute; top: calc(var(--safe-t) + 14px); left: 20px; right: 14px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.brandSmall { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--k); width: 36%; text-transform: uppercase; }
.dots { display: flex; gap: 8px; align-items: center; justify-content: center; border: 2px solid var(--a); border-radius: var(--r); padding: 6px 10px; background: var(--paper); }
.dots i { width: 11px; height: 11px; background: var(--a); border: 2px solid var(--a); transition: transform .2s; }
.dots i.used { background: transparent; }
.dots i.now { background: var(--b); transform: scale(1.2) rotate(8deg); }
.iconBtn { width: 36%; display: flex; justify-content: flex-end; background: none; border: 0; padding: 6px 4px; cursor: pointer; pointer-events: auto; min-height: 44px; min-width: 44px; align-items: center; }
.iconBtn svg { display: block; }

.score { position: absolute; left: 18px; top: calc(var(--safe-t) + 44px); pointer-events: none; color: var(--at); }
.scoreRow { display: flex; align-items: baseline; gap: 8px; }
.scoreNum { font-family: var(--display); font-size: 88px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--at); text-shadow: 3px 2px 0 var(--b); }
.scoreUnit { font-family: var(--display); font-size: 26px; color: var(--at); text-shadow: 2px 1.5px 0 var(--b); }
.scoreLbl { margin: 2px 0 0 4px; color: var(--k); }
.gain { margin: 4px 0 0 4px; height: 26px; font-family: var(--display); font-size: 22px; color: var(--b); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; text-shadow: 1.5px 1px 0 var(--a); }
.gain.on { opacity: 1; transform: none; }
.note { position: absolute; left: 24px; right: 24px; top: calc(var(--safe-t) + 56px); font-size: 12px; font-weight: 600; color: var(--k); pointer-events: none; text-align: center; }
.score.hasNote { top: calc(var(--safe-t) + 74px); }

.power { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.power span { font-family: var(--display); font-size: 36px; color: var(--at); font-variant-numeric: tabular-nums; text-shadow: 2px 2px 0 var(--b2); }

.dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 22px calc(var(--safe-b) + 22px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; pointer-events: none; color: var(--on-ground); }
.objLine { font-family: var(--display); font-size: 21px; min-height: 28px; }
.objLine small { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.tray { display: flex; gap: 14px; pointer-events: auto; }
.tile { position: relative; width: 62px; height: 62px; padding: 0; border: 2.5px solid var(--a); border-radius: var(--r); background: var(--paper); cursor: pointer; transition: transform .15s; }
.tile canvas { width: 50px; height: 50px; display: block; margin: 4px auto 0; pointer-events: none; }
.tile.sel { transform: translateY(-4px); box-shadow: 3px 3px 0 var(--b); }
.tile.spent { opacity: .35; cursor: default; }
.hint { font-size: 13px; font-weight: 600; min-height: 18px; letter-spacing: .02em; color: var(--on-ground); }

/* the guess strip: a small paper card at the bottom of the play screen while you aim and throw */
.dock.withStrip .objLine { display: none; }
.guessStrip { display: flex; align-items: center; gap: 10px; width: min(100%, 520px); padding: 7px 10px; color: var(--k); background: var(--paper); border: 2.5px solid var(--a); border-radius: var(--r); box-shadow: 3px 2px 0 var(--b); pointer-events: none; }
.guessStrip canvas { width: 44px; height: 44px; flex: none; border: 2px solid var(--a); border-radius: var(--r); background: var(--paper); }
.gsText { min-width: 0; flex: 1; display: grid; gap: 1px; font-size: 12px; line-height: 1.25; }
.gsQ { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsLine b { font-weight: 700; color: var(--at); }
.gsGet { font-family: var(--display); font-size: 14px; color: var(--at); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsGet small { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--k); }

/* ---- the recap ("See the answers") ---- */
.recap { display: grid; gap: 10px; margin-bottom: 14px; text-align: left; }
.rcCard { border: 2px solid var(--a); border-radius: var(--r); background: var(--paper2); }
.rcCard summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; min-height: 48px; font-size: 13px; font-weight: 700; line-height: 1.25; }
.rcCard summary::-webkit-details-marker { display: none; }
.rcN { font-family: var(--display); font-size: 18px; color: var(--at); text-shadow: 1.5px 1px 0 var(--b); }
.rcK { font-family: var(--display); font-size: 15px; color: var(--at); white-space: nowrap; }
.rcBody { padding: 0 12px 12px; display: grid; gap: 8px; font-size: 13px; line-height: 1.4; }
.rcNums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rcNums div { display: grid; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rcNums b { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--at); }
.rcNums small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.rcBody p { margin: 0 !important; }
.rcNap span { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; color: #A2330C; }
html[data-stock="dark"] .rcNap span { color: var(--b); }
.rcSrc a { color: var(--at); font-weight: 600; display: inline-block; padding: 14px 6px; margin: -14px -6px; }   /* round 11: a 16 px high link is hard to hit with a thumb; the padding makes the tap area 44 px without moving the text */
.rcThrow { display: flex; gap: 10px; align-items: center; padding-top: 8px; border-top: 2px dashed var(--a2); }
.rcThrow canvas { width: 44px; height: 44px; flex: none; border: 2px solid var(--a); border-radius: var(--r); background: var(--paper); }

/* ---- buttons ---- */
.btn { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .005em; color: var(--btn-ink); background: var(--b); border: 2.5px solid var(--a); border-radius: var(--r); padding: 14px 24px; min-height: 52px; cursor: pointer; box-shadow: 4px 3px 0 var(--a); transition: transform .1s, box-shadow .1s; width: auto; max-width: 100%; transform: rotate(-.6deg); }
.btn:active { transform: translate(2px, 2px) rotate(-.6deg); box-shadow: 2px 1px 0 var(--a); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.done { background: var(--a); color: var(--paper); }
.link { background: none; border: 0; padding: 8px 4px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---- title ---- */
.title { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: calc(var(--safe-t) + 34px) 24px calc(var(--safe-b) + 26px); pointer-events: none; transition: opacity .3s; }
.title.leaving { opacity: 0; }
.title > * { pointer-events: auto; }
.titleTop { pointer-events: none; width: 100%; }
.titleNo { color: var(--k); }
.logo { font-family: var(--display); font-size: clamp(56px, 18.5vw, 100px); line-height: .88; letter-spacing: -.01em; margin-top: 12px; color: var(--at); text-transform: uppercase; text-shadow: 3.5px 2.5px 0 var(--b); }
.logo span { display: block; }
.tagline { margin-top: 14px; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--k); }
.meta { margin-top: 6px; font-size: 12px; font-weight: 500; letter-spacing: .03em; color: var(--k); }
.titleBottom { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--on-ground); }
.foot { font-size: 12px; line-height: 1.5; margin: 6px 0 0; max-width: 26em; }

/* ---- results ---- */
.results { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: calc(var(--safe-t) + 32px) 24px calc(var(--safe-b) + 24px); pointer-events: none; animation: fadeIn .4s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.results > * { pointer-events: auto; }
.resTop { pointer-events: none; width: 100%; min-height: 0; }   /* round 11: on a short window an open drawer overlays the headline instead of pushing Share off the screen */
.resTitle { color: var(--k); }
.resBig { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; color: var(--at); }
.resBig span { font-family: var(--display); font-size: clamp(76px, 25vw, 116px); line-height: .95; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-shadow: 3.5px 2.5px 0 var(--b); }
.resBig small { font-family: var(--display); font-size: 32px; text-shadow: 2px 1.5px 0 var(--b); }
.resSub { font-family: var(--display); font-size: clamp(30px, 9vw, 44px); line-height: 1; margin-top: 4px; color: var(--at); text-shadow: 2.5px 2px 0 var(--b); }
.resCompare { margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--k); min-height: 20px; max-width: 15em; line-height: 1.3; }
.resFore { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--k); min-height: 18px; }
.resChips { display: flex; gap: 8px; margin-top: 12px; }
.resChips span { font-size: 13px; font-weight: 700; padding: 4px 9px; border: 2px solid var(--a); border-radius: var(--r); background: var(--paper); color: var(--k); font-variant-numeric: tabular-nums; }
.resBottom { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--on-ground); }
.resFoot { display: grid; gap: 2px; font-size: 13px; font-weight: 500; }
#resNext { font-size: 12.5px; }
.resLinks { display: flex; gap: 14px; }
/* round 11: the bottom sheet. Collapsed it is one line (the percentile) and Share, so the wreck stays in view; tap the line, press Enter or Space on it, or drag it up to open the drawer
   (the day's scores in ten bars, one line per question), and tap, drag down or press Escape to close. Without stats (off, offline, failed) the sheet is just Share on the ground, as before. */
.resSheet { width: min(100%, 440px); display: flex; flex-direction: column; gap: 10px; color: var(--k); }
.resSheet.hasBench { gap: 0; padding: 0 11px 11px; background: var(--paper); border: 2.5px solid var(--a); border-radius: var(--r); box-shadow: 4px 3px 0 var(--b); animation: fadeIn .35s ease-out; }
.resHandle { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; width: 100%; min-height: 54px; padding: 17px 0 5px; margin: 0; color: var(--at); background: none; border: 0; text-align: left; font: inherit; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.resHandle:focus-visible { outline: 3px solid var(--b); outline-offset: 2px; border-radius: var(--r); }
.resGrip { position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--a); opacity: .5; }
.resBeat { font-family: var(--display); font-size: 17px; line-height: 1.1; }
.resChev { display: block; width: 30px; height: 30px; }
.resChev::before { content: ""; display: block; width: 9px; height: 9px; margin: 12px auto 0; border-left: 3px solid var(--a); border-top: 3px solid var(--a); transform: rotate(45deg); transition: transform .2s ease; }
.resHandle[aria-expanded="true"] .resChev::before { margin-top: 8px; transform: rotate(225deg); }
.resBenchWrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.resSheet.open .resBenchWrap { grid-template-rows: 1fr; }
.resBench { min-height: 0; overflow: hidden; color: var(--k); }
.resSheet.open .resBench { overflow-y: auto; max-height: min(54cqh, 440px); margin-bottom: 8px; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .resBenchWrap, .resChev::before { transition: none; } .resSheet.hasBench { animation: none; } }
.bnHead { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.bnLine { font-family: var(--display); font-size: 16px; line-height: 1.1; color: var(--at); }
.bnN { font-size: 10.5px; font-weight: 600; margin-top: 3px; opacity: .85; }
.bnHist { display: block; width: 112px; height: 38px; }
.bnHist rect { fill: var(--a); opacity: .28; }
.bnHist rect.me { fill: var(--b); opacity: 1; stroke: var(--a); stroke-width: 1px; }
.bnHist .caret { fill: var(--a); }
.bnTab { width: 100%; margin-top: 6px; padding-top: 3px; border-top: 2px dashed var(--a2); border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.bnTab th { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 4px 4px 1px 0; opacity: .85; white-space: nowrap; }
.bnTab td { padding: 1px 4px 1px 0; white-space: nowrap; font-weight: 500; }
.bnTab td:last-child, .bnTab th:last-child { padding-right: 0; width: 72px; }
.bnTab b { font-weight: 800; color: var(--at); }
.bnQ { font-family: var(--display); font-size: 13px; color: var(--at); width: 1.1em; }
.bnDist { display: block; width: 72px; height: 18px; }
.bnDist rect { fill: var(--a); opacity: .38; }
.bnDist line.ans { stroke: var(--a); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.bnDist path.you { fill: var(--b); stroke: var(--a); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rcCrowd { display: grid; gap: 3px; padding: 7px 9px; border: 2px dashed var(--a2); border-radius: var(--r); background: var(--paper); }
.rcCrowdT { font-size: 12.5px; line-height: 1.35; }
.rcCrowdT span { display: block; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; color: #A2330C; }
html[data-stock="dark"] .rcCrowdT span { color: var(--b); }
.rcCrowd .bnDist { width: 100%; height: 44px; }
.rcCrowdAx { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 600; opacity: .85; }

/* ---- modal: how to play, collection, past days ---- */
.modal { position: absolute; inset: 0; z-index: 8; background: rgba(18, 18, 30, .55); display: flex; align-items: center; justify-content: center; padding: 20px; touch-action: pan-y; }
.modalCard { position: relative; width: min(100%, 400px); max-height: 88vh; overflow: auto; background: var(--paper); color: var(--k); border: 3px solid var(--a); border-radius: var(--r); padding: 26px 22px 18px; box-shadow: 6px 5px 0 var(--b); }
.modalClose { position: absolute; top: 2px; right: 6px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; border: 0; background: none; color: var(--at); cursor: pointer; }
.modalCard h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--at); text-shadow: 2px 1.5px 0 var(--b); }
.how { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 14px; font-size: 15px; font-weight: 500; line-height: 1.35; }
.how b { font-weight: 700; color: var(--at); }
.modalCard .btn { width: 100%; }
.more { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 12px; margin-top: 8px; }
.more a, .more button { color: var(--at); font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 6px 2px; min-height: 44px; display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; text-align: left; }
.mcard { border: 2px solid var(--a); border-radius: var(--r); padding: 8px; font-size: 12px; background: var(--paper2); }
.mcard canvas { width: 64px; height: 64px; display: block; margin: 0 0 4px; }
.mcard b { display: block; font-family: var(--display); font-weight: 400; font-size: 14px; color: var(--at); }
.mcard.locked { opacity: .55; }
.mcard ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 3px; font-size: 11px; }
.archRow { display: flex; align-items: center; gap: 10px; border: 2px solid var(--a); border-radius: var(--r); padding: 8px 12px; margin-bottom: 8px; font-size: 14px; font-weight: 700; text-align: left; background: var(--paper2); }
.archRow .nm { flex: 1; } .archRow small { display: block; font-weight: 500; font-size: 12px; }
.archRow .btn { width: auto; font-size: 15px; padding: 8px 14px; min-height: 44px; box-shadow: 3px 2px 0 var(--a); }
.modalCard p { font-size: 13px; margin: 0 0 12px; line-height: 1.4; }

.confetti { position: fixed; top: -14px; width: 9px; height: 9px; z-index: 5; pointer-events: none; animation: fall 2.6s linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

.dev { position: absolute; right: 0; top: 42%; z-index: 9; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; }
.dev button { font: inherit; font-size: 12px; padding: 2px 8px; }
.dev .devBody { display: none; background: var(--paper); border: 2px solid var(--a); padding: 6px; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 70vw; }
.dev.open .devBody { display: flex; }
.dev input { width: 130px; font-size: 12px; }
#devToggle { opacity: .6; }

/* ---- the guess: one poster card with a big slider ---- */
.quiz { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-b) + 16px); z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 4px; color: var(--k); background: var(--paper); border: 3px solid var(--a); border-radius: var(--r); padding: 12px 14px 14px; box-shadow: 5px 4px 0 var(--b); --warn: #EC4A0A; }
#qAsk, #qAnswer { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.qTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 15px; }
.qKick { color: #A2330C; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
html[data-stock="dark"] .qKick { color: var(--b); }
.qVal { text-align: left; font-family: var(--display); font-size: 32px; line-height: 1; color: var(--at); font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 2px; }
.qVal small { font-family: var(--display); font-size: 17px; }
.qPrompt { font-family: var(--display); font-size: 19px; line-height: 1.08; color: var(--k); margin-top: 2px; }
.quiz input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; margin: 0; touch-action: pan-x; cursor: pointer; }
.quiz input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--a); }
.quiz input[type=range]::-moz-range-track { height: 4px; background: var(--a); }
.quiz input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 48px; margin-top: -22px; background: var(--b); border: 3px solid var(--a); border-radius: var(--r); box-shadow: 3px 2px 0 var(--a); }
.quiz input[type=range]::-moz-range-thumb { width: 40px; height: 44px; background: var(--b); border: 3px solid var(--a); border-radius: 3px 7px 4px 6px; box-shadow: 3px 2px 0 var(--a); }
.quiz input[type=range]:focus-visible { outline: 3px dashed var(--a); outline-offset: 2px; }
.qRow { display: flex; align-items: center; gap: 8px; }
.qRow input[type=range] { flex: 1; min-width: 0; }
.qNudge { flex: none; width: 44px; height: 44px; padding: 0; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--a); background: var(--paper); border: 2.5px solid var(--a); border-radius: var(--r); box-shadow: 2px 2px 0 var(--a); cursor: pointer; touch-action: manipulation; }
.qNudge:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--a); }
.qNudge:focus-visible { outline: 3px dashed var(--a); outline-offset: 2px; }
.qScale { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; margin-top: -2px; }
.qBtn { margin-top: 6px; width: 100%; min-height: 48px; padding: 10px 22px; }
/* round 9: the prize ladder. What each kind of guess earns, before you lock in; on the answer, the rung you earned lights up */
.qLadder { margin-top: 4px; }
.qLadder:empty { display: none; }
.qlTitle { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.qRungs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.qRung { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 4px 3px 5px; border: 2px solid var(--a); border-radius: var(--r); background: var(--paper2); min-width: 0; }
.qRung.special { border-style: dashed; }
.qrLbl { font-family: var(--display); font-size: 12.5px; line-height: 1; color: var(--at); white-space: nowrap; }
.qrMid { display: flex; align-items: center; gap: 4px; }
.qrMid canvas { width: 26px; height: 26px; flex: none; }
.qrKg { font-size: 11px; font-weight: 700; white-space: nowrap; }
.qrName { font-size: 9.5px; letter-spacing: -.035em; font-weight: 600; line-height: 1.15; max-width: 100%; min-height: 2.3em; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; }
#qAnswer .qRung { opacity: .45; }
#qAnswer .qRung.lit { opacity: 1; background: var(--b); color: var(--btn-ink); box-shadow: 3px 2px 0 var(--a); transform: rotate(-1.5deg); }
#qAnswer .qRung.lit .qrLbl { color: var(--btn-ink); }
/* the answer: You vs Answer, on the slider's own scale */
.qSaid { margin-top: 2px; }
.qVs { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.qVs span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k); }
.qVs b { display: block; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qYou b { color: var(--b); text-shadow: 2px 1.5px 0 var(--a); }
html[data-stock="dark"] .qYou b { text-shadow: none; }
.qAns { text-align: right; }
.qAns b { color: var(--at); text-shadow: 2px 1.5px 0 var(--b); }
.qV { font-family: var(--display); font-size: 16px; color: var(--k); padding-bottom: 6px; }
.qUnitR { text-align: right; font-size: 12px; font-weight: 600; margin-top: 1px; }
.qLine { margin: 8px 0 2px; }
.qTrack { position: relative; height: 18px; border-bottom: 3px solid var(--a); }
.qTrack i { position: absolute; bottom: -3px; }
.qTrack i.nb { height: 12px; background: var(--b2); }
.qTrack i.cl { height: 12px; background: var(--b); opacity: .85; }
.qTrack i.ans { width: 4px; height: 22px; margin-left: -2px; background: var(--a); }
.qTrack i.you { width: 0; height: 0; margin-left: -8px; bottom: 16px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--b); filter: drop-shadow(1.5px 1px 0 var(--a)); }
.qEnds { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 600; margin-top: 3px; opacity: .8; }
.qNote { font-size: 12.5px; line-height: 1.35; margin-top: 4px; }
.qGets { font-size: 13px; line-height: 1.3; }
.qGets b { font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--at); }
.qGets small { font-size: 12px; white-space: nowrap; }
.qPrompt.long { font-size: 16.5px; line-height: 1.1; }
.qVerdict { font-family: var(--display); color: var(--at); }
/* round 9: the 30-second guess timer. Round 10 (Chris: "i did not even notice the timer"): a big clock in a pill at the top right, a thick bar that drains
   under it, and a one-time line saying what it is. The last 5 seconds the pill fills orange (white figures, so it stands apart from a rust or orange ink) and ticks */
.qClockW { flex: none; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; margin: -2px -4px -2px 0; color: var(--at); background: var(--paper2); border: 2.5px solid var(--a); border-radius: 999px; box-shadow: 2px 2px 0 var(--a); }
.qClockW svg { flex: none; }
.qClock { font-family: var(--display); font-size: 23px; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: inherit; min-width: 2.2em; text-align: right; }
.qBar { position: relative; height: 9px; margin: 5px 0 3px; background: var(--paper2); border: 2px solid var(--a); border-radius: 999px; overflow: hidden; }
.qBar i { position: absolute; inset: 0; background: var(--a); transform-origin: left center; will-change: transform; }
.quiz.warn .qBar i { background: var(--warn); }
.quiz.warn .qClockW { color: #fff; background: var(--warn); border-color: var(--warn); box-shadow: 2px 2px 0 var(--a); }
.quiz.warn .qClockW.tick { animation: qTick .4s ease-out; }
@keyframes qTick { from { transform: scale(1.14); } to { transform: scale(1); } }
.qTHint { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--k); background: var(--paper2); border-left: 4px solid var(--b); padding: 4px 8px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .quiz.warn .qClockW.tick { animation: none; } }
.meta { }

/* a big desktop window: bigger poster type, and the guess card stays a card instead of stretching across the stage */
@media (min-width: 900px) and (min-height: 700px) {
  :root { --stage: 720px; }
  .logo { font-size: 118px; } .tagline { font-size: 21px; } .meta { font-size: 14px; } .foot { font-size: 14px; } .title { padding-left: 44px; padding-right: 44px; }
  .scoreNum { font-size: 112px; } .scoreUnit { font-size: 32px; } .brandSmall, .k { font-size: 12px; }
  .resBig span { font-size: 140px; } .resSub { font-size: 54px; } .resCompare { font-size: 17px; } .resFore { font-size: 15px; } .results { padding-left: 44px; padding-right: 44px; }
  .quiz { left: 50%; right: auto; width: min(580px, calc(100% - 32px)); transform: translateX(-50%); padding: 16px 20px 18px; }
  .qPrompt { font-size: 24px; } .qPrompt.long { font-size: 20px; } .qVal { font-size: 38px; } .qVs b { font-size: 40px; } .qrName { font-size: 11px; } .qrLbl { font-size: 14px; } .qrMid canvas { width: 30px; height: 30px; } .qNote { font-size: 13.5px; } .qGets { font-size: 14px; }
  .objLine { font-size: 26px; } .dock { padding-left: 44px; }
}
/* Short windows. Sizes follow the stage (container units), not the screen, so iPhone Safari with its bars (the window really is 664 px tall)
   and a laptop browser with its toolbars (680 px) get the same treatment. Rules: the tower is never covered, the main button is never below
   the fold, and what has to go goes in this order: the long explainer lines, then the small labels, then the type size. */
@container stage (max-height: 800px) {
  /* title: tighter top block, single explainer line gone, the how-to link stays */
  .title { padding: calc(var(--safe-t) + 18px) 24px calc(var(--safe-b) + 12px); }
  .logo { font-size: clamp(40px, min(17cqw, 9.6cqh), 100px); margin-top: 8px; }
  .tagline { font-size: 15px; margin-top: 8px; } .meta { font-size: 11.5px; margin-top: 3px; }
  .titleBottom { gap: 2px; } .foot { display: none; }
  .btn { padding: 10px 22px; min-height: 48px; }
  /* play screen */
  .scoreNum { font-size: 64px; text-shadow: 2.5px 2px 0 var(--b); } .scoreUnit { font-size: 22px; } .score { top: calc(var(--safe-t) + 48px); } .score.hasNote { top: calc(var(--safe-t) + 74px); }
  .objLine { font-size: 19px; min-height: 24px; } .dock { gap: 8px; padding-bottom: calc(var(--safe-b) + 16px); }
  /* the guess card */
  .quiz { bottom: calc(var(--safe-b) + 10px); padding: 8px 12px 10px; gap: 2px; } #qAsk, #qAnswer { gap: 2px; }
  .qPrompt { font-size: 17px; margin-top: 0; } .qPrompt.long { font-size: 15px; } .qVal { font-size: 26px; } .qVal small { font-size: 14px; }
  .qClock { font-size: 19px; } .qClockW { padding: 2px 8px 2px 6px; } .qBar { height: 7px; margin: 3px 0 2px; } .qTHint { font-size: 11.5px; padding: 3px 7px; }
  .quiz input[type=range] { height: 44px; } .quiz input[type=range]::-webkit-slider-thumb { width: 40px; height: 42px; margin-top: -19px; } .quiz input[type=range]::-moz-range-thumb { height: 40px; width: 36px; }
  .qBtn { margin-top: 4px; min-height: 44px; padding: 8px 20px; } .qNote { font-size: 12px; } .qVs b { font-size: 26px; } .qLine { margin-top: 4px; }
  /* the ladder keeps its labels, objects and kg; the object names go */
  .qrName { display: none; } .qlTitle { margin-bottom: 3px; } .qRung { padding: 3px 2px 4px; } .qrMid { gap: 2px; } .qrMid canvas { width: 22px; height: 22px; } .qrKg { font-size: 10.5px; letter-spacing: -.02em; }
  /* results */
  .results { padding: calc(var(--safe-t) + 18px) 24px calc(var(--safe-b) + 12px); }
  .resBig { margin-top: 4px; } .resBig span { font-size: clamp(52px, min(22cqw, 10.4cqh), 116px); } .resBig small { font-size: 26px; }
  .resSub { font-size: clamp(22px, min(8cqw, 4.6cqh), 44px); } .resCompare { margin-top: 8px; font-size: 13.5px; max-width: none; min-height: 0; }
  .resFore { min-height: 0; } .resChips { margin-top: 8px; } .resChips span { font-size: 12px; padding: 2px 8px; }
  .resBottom { gap: 4px; } .resFoot { font-size: 12.5px; } .resLinks { gap: 14px; }
  .resSheet.hasBench { padding: 0 9px 9px; } .resHandle { min-height: 48px; padding-top: 15px; } .resBeat { font-size: 15.5px; } .bnLine { font-size: 15px; } .bnHist { height: 32px; width: 100px; } .bnTab { font-size: 11px; margin-top: 4px; } .bnDist { height: 16px; width: 60px; } .bnTab td:last-child, .bnTab th:last-child { width: 60px; }
}
/* a wide stage (laptop window, tablet): the title name fits on one line at any height, so the tower gets the room (the towers are taller and thinner now) */
@container stage (min-width: 480px) {
  .logo { font-size: clamp(40px, min(12.4cqw, 11.6cqh), 112px); } .logo span { display: inline; }
}
@container stage (max-height: 620px) {
  .title { padding-top: calc(var(--safe-t) + 14px); } .tagline { font-size: 14px; margin-top: 6px; }
  .resFore { display: none; } .scoreLbl { display: none; } .qlTitle { display: none; } .qNote { display: none; }
  .scoreNum { font-size: 56px; } .score { top: calc(var(--safe-t) + 44px); }
}
@container stage (max-height: 620px) { .dock { padding-bottom: calc(var(--safe-b) + 8px); } .guessStrip { padding: 5px 8px; } .guessStrip canvas { width: 38px; height: 38px; } .gsText { font-size: 11.5px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; } .gsQ { flex-basis: 100%; } .gsGet { font-size: 13px; } }
/* a very short window (phone on its side): tighten the vertical rhythm */
@media (max-height: 560px) {
  .scoreNum { font-size: 52px; } .score { top: calc(var(--safe-t) + 34px); } .gain { font-size: 18px; height: 20px; } .scoreLbl { display: none; }
  .tile { width: 48px; height: 48px; } .tile canvas { width: 38px; height: 38px; }
  .dock { gap: 6px; padding-bottom: 10px; } .objLine { font-size: 17px; }
  .logo { font-size: 46px; } .tagline { font-size: 14px; margin-top: 8px; } .title { padding-top: 18px; padding-bottom: 12px; } .btn { padding: 10px 20px; font-size: 18px; min-height: 44px; }
  .foot { display: none; }
  .resBig span { font-size: 56px; } .resSub { font-size: 24px; } .results { padding-top: 16px; padding-bottom: 10px; } .resBottom { gap: 4px; }
  .qPrompt { font-size: 15px; } .qVal { font-size: 22px; } .quiz { gap: 1px; padding: 6px 12px 8px; bottom: 8px; } .quiz input[type=range] { height: 44px; } .qrName { display: none; } .qVs b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .title, .results, .gain, .dots i, .btn { transition: none !important; animation: none !important; } .confetti { display: none; } }

/* percent score and the perfect 100% (round 5) */
.score.perfect .scoreNum, .score.perfect .scoreUnit { color: var(--b); animation: perfectPulse .6s ease-in-out infinite alternate; }
.results.perfect .resBig span, .results.perfect .resBig small { color: var(--b); text-shadow: 3.5px 2.5px 0 var(--a); animation: perfectPulse .7s ease-in-out infinite alternate; }
.results.perfect .resSub { color: var(--b); text-shadow: 2.5px 2px 0 var(--a); }
@keyframes perfectPulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.perfectFlash { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: radial-gradient(circle at 50% 40%, var(--b) 0, transparent 70%); opacity: 0; animation: perfectFlash 1.6s ease-out; mix-blend-mode: multiply; }
@keyframes perfectFlash { 0% { opacity: 0; } 12% { opacity: .55; } 100% { opacity: 0; } }
.bullseye { animation: bullseyePop .5s ease-out; }
@keyframes bullseyePop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.archRow .aPct { font-family: var(--display); font-size: 26px; color: var(--at); text-shadow: 1.5px 1px 0 var(--b); min-width: 64px; text-align: right; }
.archRow .aPct.perfect { color: var(--b); text-shadow: 1.5px 1px 0 var(--a); }
.archRow.off { opacity: .45; }
.archRow .lIcon { flex: none; color: var(--a); }
.archRow .tag { display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid var(--b); color: var(--b); border-radius: 3px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; }
.archSum { margin: 0 0 10px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .score.perfect .scoreNum, .results.perfect .resBig span, .perfectFlash, .bullseye { animation: none; } }

.linkRow { display: flex; gap: 22px; justify-content: flex-start; align-items: center; }

a.archRow { text-decoration: none; color: inherit; cursor: pointer; } a.archRow:hover { background: var(--paper2); } a.archRow .nm small { color: var(--k); opacity: .75; }

/* round 6: the menu button (always there) and the skip button */
.menuBtn { position: absolute; top: calc(var(--safe-t) + 8px); right: 8px; z-index: 22; width: 48px; height: 48px; display: grid; place-items: center; background: var(--paper); border: 2.5px solid var(--a); border-radius: var(--r); box-shadow: 3px 2px 0 var(--b); cursor: pointer; padding: 0; opacity: .94; }
.menuBtn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--b); }
.menuBtn svg { display: block; }
.skipBtn { position: absolute; right: 10px; top: calc(var(--safe-t) + 68px); z-index: 21; font-family: var(--display); font-size: 14px; letter-spacing: .02em; color: var(--btn-ink); background: var(--b); border: 2.5px solid var(--k); border-radius: var(--r); padding: 9px 14px; min-height: 44px; cursor: pointer; box-shadow: 3px 2px 0 var(--a); }
.skipBtn:active { transform: translate(1px, 1px); }
.menuList { display: grid; gap: 10px; margin: 12px 0 4px; }
.menuList button, .menuList a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 10px 16px; font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--k); background: var(--paper); border: 2.5px solid var(--a); border-radius: var(--r); text-decoration: none; cursor: pointer; box-shadow: 3px 2px 0 var(--b); }
.menuList small { font-weight: 500; opacity: .7; }
@container stage (max-width: 480px) { .hud { right: 64px; } }

/* Feedback (append to css/style.css). Same two-ink look as the rest of the game; nothing here uses a new colour. */
.shareRow { display: flex; align-items: center; gap: 10px; width: 100%; }
.fbFaces { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.fbFaces button[data-r] { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; color: var(--k); background: var(--paper); border: 2.5px solid var(--a); border-radius: var(--r); box-shadow: 2px 2px 0 var(--b); cursor: pointer; }
.fbFaces button[data-r]:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--b); }
.fbFaces button[data-r]:disabled { opacity: .55; cursor: default; }
.fbThanks { font-size: 12.5px; font-weight: 600; color: var(--k); background: var(--paper); border: 2px solid var(--a); border-radius: var(--r); padding: 2px 10px; text-align: right; line-height: 1.2; display: grid; justify-items: end; white-space: nowrap; }   /* a paper chip, so it reads on both the cream and the blue ground */
.fbThanks .link { padding: 4px 0; min-height: 32px; font-size: 12px; color: var(--at); }
.fbBtns { display: flex; gap: 8px; }
.fbBtns button, .fbChips button { font-family: var(--mono); font-weight: 700; font-size: 13px; min-height: 44px; flex: 1; padding: 6px 4px; color: var(--k); background: var(--paper); border: 2.5px solid var(--a); border-radius: var(--r); box-shadow: 2px 2px 0 var(--b); cursor: pointer; }
.fbBtns button:active, .fbChips button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--b); }
.fbBtns button.on, .fbChips button.on { background: var(--b); }
.modalCard .fbIntro { margin: 0 0 12px; }
.modalCard .fbBtns { margin-bottom: 10px; }
.fbChips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fbChips button { flex: 0 1 auto; padding: 6px 12px; font-size: 12.5px; min-height: 40px; box-shadow: 2px 1.5px 0 var(--b2); }
.fbNote { width: 100%; resize: none; font-family: var(--mono); font-size: 14px; line-height: 1.4; color: var(--k); background: var(--paper2); border: 2.5px solid var(--a); border-radius: var(--r); padding: 10px 12px; user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.fbNote:focus { outline: 3px solid var(--b); outline-offset: 1px; }
.fbCount { text-align: right; font-size: 11px; opacity: .7; margin: 2px 2px 8px; }
.fbHp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* honeypot: people never see or tab to it */
.fbErr { font-size: 12.5px; font-weight: 600; color: var(--b); min-height: 0; margin-bottom: 8px; }
.fbErr:empty { display: none; }
.fbErr a { color: var(--at); }
.fbFine { font-size: 11.5px; opacity: .8; margin: 10px 0 0; line-height: 1.4; }
.fbFine a { color: var(--at); font-weight: 600; }
/* very narrow stages: smaller faces so Share keeps its width */
@container stage (max-width: 340px) { .fbFaces button[data-r] { width: 40px; height: 40px; } .fbFaces { gap: 6px; } }

/* Ads (append to css/style.css). The slot is a fixed 320x50 box, so the page never jumps when an ad loads. */
.adSlot { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 10px; color: var(--on-ground); }
.adLbl { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.adSlot ins { max-width: 100%; background: var(--paper2); border: 1.5px dashed var(--paper); }
.adSlot.empty { display: none; }
/* only on a tall stage. Measured in a mock of the current game: on a 390 x 844 phone the banner pushes Share up onto the wreck, so
   phones and short laptop windows get no ad until the results screen is redesigned to leave room. The game never gives up a button for an ad. */
@container stage (max-height: 800px) { .adSlot { display: none; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Round 7: small text that sits on the halftone ground gets a hard outline in the ground colour, so the dots never cut through the letters */
.hint, .objLine, .titleBottom .foot, .resFoot, .linkRow .link, .resLinks .link {
  text-shadow: 1.5px 0 var(--ground), -1.5px 0 var(--ground), 0 1.5px var(--ground), 0 -1.5px var(--ground), 1.2px 1.2px 0 var(--ground), -1.2px -1.2px 0 var(--ground), 1.2px -1.2px 0 var(--ground), -1.2px 1.2px 0 var(--ground);
}
.hint:not(:empty), .objLine:not(:empty) { background: var(--ground); padding: 2px 7px 3px; margin-left: -7px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.qTap { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-top: 6px; }
#resChips::before { content: "Throws"; align-self: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-right: 2px; opacity: .8; }
/* the hamburger sits above the page, so it used to lie across the corner of an open dialog: hide it while one is open (the dialog has its own close) */
#app:has(#modal:not(.hidden)) .menuBtn { visibility: hidden; }
/* a phone on its side leaves a 390 px tall window: it works, but the guess card and the results sit over a small tower, so say so */
@media (orientation: landscape) and (max-height: 430px) and (pointer: coarse) { #themeMeta::after { content: " \00B7  Plays best upright"; } }
/* the answers recap: a plus on a closed row and a dash on an open one, so rows read as openable */
.rcCard summary { grid-template-columns: auto 1fr auto auto; }
.rcCard summary::after { content: "+"; font-family: var(--display); font-size: 18px; line-height: 1; color: var(--at); }
.rcCard[open] summary::after { content: "\2013"; }

/* the floating pull number is the launch power, not a score: say so */
.power::before { content: "POWER"; display: block; text-align: center; font: 700 11px/1 var(--mono); letter-spacing: .14em; color: var(--at); margin-bottom: 2px; }
/* tall windows have room for the whole question in the strip while you aim (two lines at most) */
@container stage (min-height: 700px) { .gsQ { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }