/* 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.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.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; }
.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%; }
.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; }

/* ---- 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: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; align-items: end; 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); }
.quiz > *, #qAsk > *, #qAnswer > * { grid-column: 1 / -1; }
#qAsk, #qAnswer { display: contents; }
.qKick { grid-column: 1 !important; color: #A2330C; align-self: center; }
html[data-stock="dark"] .qKick { color: var(--b); }
.qVal { grid-column: 2 !important; grid-row: 1; text-align: right; font-family: var(--display); font-size: 28px; line-height: 1; color: var(--at); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qVal small { font-family: var(--display); font-size: 16px; }
.qPrompt { font-family: var(--display); font-size: 20px; line-height: 1.08; color: var(--k); min-height: 44px; display: flex; align-items: center; margin-top: 2px; }
.quiz input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 56px; 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: 54px; margin-top: -25px; 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: 48px; 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; }
.qScale { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: .06em; margin-top: -4px; }
.qHint { font-size: 12px; font-weight: 500; margin-top: 2px; }
.qBtn { justify-self: stretch; margin-top: 8px; width: 100%; }
.qSaid { font-size: 15px; line-height: 1.35; margin-top: 2px; }
.qSaid b { font-weight: 700; color: var(--at); }
.qNote { font-size: 12.5px; min-height: 34px; line-height: 1.35; }
.qGets { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; }
.qGets canvas { width: 54px; height: 54px; flex: none; border: 2px solid var(--a); border-radius: var(--r); background: var(--paper); }
.qGets b { font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--at); }
.qGets small { font-size: 12px; }
.qGetsRow { display: flex; align-items: center; gap: 10px; }
.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; } .qVal { font-size: 34px; } .qSaid { font-size: 17px; }
  .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; row-gap: 2px; }
  .qPrompt { font-size: 17px; min-height: 0; margin-top: 0; } .qVal { font-size: 24px; } .qVal small { font-size: 14px; }
  .quiz input[type=range] { height: 46px; } .quiz input[type=range]::-webkit-slider-thumb { width: 40px; height: 44px; margin-top: -20px; } .quiz input[type=range]::-moz-range-thumb { height: 42px; width: 36px; }
  .qBtn { margin-top: 4px; } .qNote { min-height: 0; font-size: 12px; } .qSaid { font-size: 14px; } .qGets canvas { width: 44px; height: 44px; }
  /* 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; }
}
/* 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; } .qHint { 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; min-height: 0; } .qVal { font-size: 22px; } .quiz { row-gap: 1px; padding: 6px 12px 8px; bottom: 8px; } .quiz input[type=range] { height: 46px; }
}
@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 .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"; }
/* narrow windows (360 px phones): the "Before you throw" label would wrap to three lines beside a long value and push the card up over the tower, so drop it there */
@container stage (max-width: 420px) { .qKick { display: none; } .qVal { grid-column: 1 / -1 !important; text-align: left; } }
/* 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; } }