/* ==========================================================================
   KÁRMÁN · ui.css
   Everything the player touches: top bar, altimeter, the gondola card and its
   screens, sheets, toast.

   TYPE RULES (two voices, kept strict so the interface reads calmly)
     Big Shoulders  display only: altitude, guess readout, titles, verdicts
     Instrument Sans everything else, numbers with tabular figures
   Instrument Serif italic appears only in milestone banners and the results
   tier name ("Stratosphere"). Plex Mono appears only on the share ticket.
   ========================================================================== */

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* Small uppercase labels, one style everywhere */
.eyebrow, .cat-tag, .alt-label {
  margin: 0;
  font: 600 11px/1.3 var(--f-ui);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber);
}
.eyebrow.ember { color: var(--ember); }

/* ---------------------------------------------------------------- top bar */
#topbar {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 8px;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.wordmark {
  font: 800 1.3rem/1 var(--f-display);
  letter-spacing: 0.14em;
  color: #FFF4E2;
  text-shadow: 0 1px 12px rgba(5, 8, 25, 0.35);
}
.flight-no { font: 600 var(--t-sm)/1 var(--f-ui); color: var(--amber); font-variant-numeric: tabular-nums; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn, .streak-pill {
  height: 38px; min-width: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: rgba(10, 13, 30, 0.4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 0 10px;
  transition: transform var(--d-press) var(--ease-out), background var(--d-state);
}
.icon-btn:hover, .streak-pill:hover { background: rgba(30, 36, 66, 0.55); }
.icon-btn:active, .streak-pill:active { transform: scale(0.94); }
.icon-btn svg, .streak-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.streak-pill { font: 600 var(--t-sm)/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--text-dim); }
.streak-pill svg { fill: currentColor; stroke: none; }
.streak-pill.lit { color: var(--amber); border-color: rgba(255, 181, 71, 0.35); }
.streak-pill.lit svg { filter: drop-shadow(0 0 5px rgba(255, 140, 50, 0.7)); }

/* ---------------------------------------------------------------- altimeter */
#altimeter {
  position: absolute; z-index: 5;
  right: max(16px, env(safe-area-inset-right, 0px));
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: none;
  transition: opacity 400ms;
}
.alt-label { color: rgba(255, 255, 255, 0.62); }
body[data-screen="results"] #altimeter { opacity: 0; } /* the results card shows the final altitude */
.alt-value { display: flex; align-items: baseline; gap: 5px; }
.odo {
  display: inline-flex; height: 1em; line-height: 1; overflow: hidden;
  font: 800 2.7rem/1 var(--f-display);
  font-variant-numeric: tabular-nums;
  color: #FFF4E2;
  filter: drop-shadow(0 0 14px rgba(255, 181, 71, 0.3));
}
.odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.odo-strip span { display: block; height: 1em; text-align: center; }
.odo-sep { display: inline-block; }
.alt-unit { font: 600 var(--t-sm)/1 var(--f-ui); color: var(--amber); }

/* ---------------------------------------------------------------- the gondola
   Phones: a full-bleed bottom sheet. Desktop: a floating card.
   It has one fixed height, so the balloon and card never jump between steps. */
#dock {
  position: absolute; z-index: 4;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--gondola-h) + env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: 0 -18px 50px rgba(2, 4, 14, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color var(--d-state), width var(--d-sheet) var(--ease-out), height var(--d-sheet) var(--ease-out);
  overflow: hidden;
}

.screen {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: flex; flex-direction: column;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
/* Primary actions sit on the card's bottom edge on every screen */
.screen > .hold-btn, .screen > .controls { margin-top: auto; }

/* ---------------------------------------------------------------- buttons */
.btn-primary, .btn-square {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px;
  border-radius: var(--r-ctl);
  font: 650 17px/1 var(--f-ui); font-weight: 650;
  transition: transform var(--d-press) var(--ease-out), filter var(--d-state), box-shadow var(--d-state);
}
.btn-primary {
  width: 100%;
  border: 0;
  background: linear-gradient(180deg, #FFC766, var(--amber) 60%, #F5A43C);
  color: var(--on-amber);
  box-shadow: 0 8px 22px rgba(255, 160, 60, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary.ember { background: linear-gradient(180deg, #FF9364, var(--ember) 60%, #E2502A); color: #210803; box-shadow: 0 8px 24px rgba(255, 90, 50, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn-square {
  width: 56px; flex: none;
  border: 1px solid var(--hairline-strong); background: rgba(255, 255, 255, 0.05); color: var(--text);
}
.btn-square svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-square:active { transform: scale(0.94); }

/* ---------------------------------------------------------------- home */
.home-title {
  margin: 8px 0 8px;
  font: 800 3.25rem/0.92 var(--f-display);
  letter-spacing: 0.01em; text-transform: uppercase;
  color: #FFF4E2;
  text-wrap: balance;
}
.home-title span { color: var(--amber); }
.home-lede { margin: 0 0 16px; max-width: 40ch; color: var(--text-dim); font-size: 15px; line-height: 1.45; }

/* Categories as a tidy 3 × 2 grid, so they always align */
.manifest {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.manifest li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--hairline);
  min-width: 0;
}
.manifest .leg-no { font: 600 11px/1 var(--f-ui); color: var(--amber); font-variant-numeric: tabular-nums; }
.manifest .leg-cat { font: 600 13px/1.2 var(--f-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-status { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 16px; font-size: var(--t-sm); color: var(--text-faint); }
.home-status b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Hold-to-take-off: a filled primary button whose glow fills as you hold */
.hold-btn {
  position: relative; overflow: hidden; flex: none;
  width: 100%; height: 56px;
  border-radius: var(--r-ctl);
  border: 0;
  background: linear-gradient(180deg, #FFC766, var(--amber) 60%, #F5A43C);
  color: var(--on-amber);
  font: 650 17px/1 var(--f-ui); font-weight: 650;
  box-shadow: 0 8px 22px rgba(255, 160, 60, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform var(--d-press) var(--ease-out), box-shadow var(--d-state);
}
.hold-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #FF7A30, #FF9A4A 70%, #FFD08A);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}
.hold-label { position: relative; display: grid; place-items: center; }
.hold-idle, .hold-live { grid-area: 1 / 1; transition: opacity 140ms, transform var(--d-state) var(--ease-out); }
.hold-live { opacity: 0; transform: translateY(6px); }
.hold-btn.holding { transform: scale(0.985); box-shadow: 0 0 0 4px rgba(255, 140, 60, 0.25), 0 10px 30px rgba(255, 120, 50, 0.45); }
.hold-btn.holding .hold-idle { opacity: 0; transform: translateY(-6px); }
.hold-btn.holding .hold-live { opacity: 1; transform: none; }
.hold-btn.fired .hold-fill { transform: scaleX(1); }
.hold-btn.fired { animation: fired 480ms var(--ease-out); }
@keyframes fired { 0% { filter: brightness(1.6); } 100% { filter: brightness(1); } }

/* ---------------------------------------------------------------- round */
.round { --chip: var(--c-snug); padding-top: 18px; }
.fuse { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.fuse-fill {
  position: absolute; inset: 0; transform-origin: left center;
  background: linear-gradient(90deg, #F07C2C, var(--amber));
  box-shadow: 0 0 10px rgba(255, 181, 71, 0.8);
}
.round.low-time .fuse-fill { background: linear-gradient(90deg, #E2402A, var(--ember)); animation: fuseflick 160ms steps(2) infinite; }
@keyframes fuseflick { 50% { opacity: 0.6; } }

.round-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.legs { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.leg { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.13); transition: background var(--d-state); }
.leg-now { background: rgba(255, 255, 255, 0.7); }
.leg-hit { background: var(--c); }
.leg-miss { background: transparent; box-shadow: inset 0 0 0 1px var(--c-miss); }

.updraft {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 9px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 181, 71, 0.4);
  font: 600 11px/1 var(--f-ui); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 210, 150, 0.8);
  transition: opacity var(--d-state) 200ms, border-color var(--d-state), background var(--d-state);
}
.updraft b { font: 700 13px/1 var(--f-ui); letter-spacing: 0; color: var(--amber); font-variant-numeric: tabular-nums; }
.updraft.u0 { opacity: 0; }  /* hidden until the multiplier is above ×1 */
.updraft.u3, .updraft.u4 { background: rgba(255, 181, 71, 0.12); border-color: var(--amber); }
.updraft.pop { animation: pop 420ms var(--ease-out); }
.updraft.crack { animation: crack 420ms ease-out; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes crack { 20% { transform: translateX(-4px) rotate(-3deg); } 45% { transform: translateX(3px) rotate(2deg); } 100% { transform: none; } }

.round-timer { margin-left: auto; font: 600 13px/1 var(--f-ui); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.round-timer b { font: 800 1.35rem/1 var(--f-display); color: var(--text-dim); margin-right: 1px; }
.round.low-time .round-timer b { color: var(--ember); }

.question {
  margin: 6px 0 10px;
  font: 600 1.16rem/1.3 var(--f-ui);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.readout { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.guess { font: 800 2.6rem/1 var(--f-display); font-variant-numeric: tabular-nums; color: #FFF4E2; }
.guess-unit { font-size: 15px; color: var(--text-dim); }
.range-note { margin-left: auto; font: 500 13px/1 var(--f-ui); color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* The scale */
.scale { position: relative; padding: 14px 12px 0; user-select: none; -webkit-user-select: none; }
.track { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.band {
  position: absolute; top: -4px; bottom: -4px;
  min-width: 6px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--c) 32%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--c);
  transition: left 200ms var(--ease-out), width var(--d-state) var(--ease-out), background var(--d-state), box-shadow var(--d-state);
}
.band.no-anim { transition: none; }
.round.dragging .band { transition: width var(--d-state) var(--ease-out), background var(--d-state); }
/* Your guess: a pin at the centre of the ruler (the ruler is drawn around it) */
.knob {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 22px;
  margin: -11px 0 0 -1.5px;
  border-radius: 2px;
  background: #FFF6E8;
  box-shadow: 0 0 0 1px rgba(5, 8, 25, 0.4), 0 0 8px rgba(255, 246, 232, 0.6);
  z-index: 1;
  transition: opacity var(--d-state);
}
.round.empty .knob, .round.empty .band { opacity: 0; }
.round.empty .track { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 12px); }
.round.is-locked .knob { opacity: 0.35; }

.scale-ticks { position: relative; height: 24px; margin-top: 7px; }
.tick { position: absolute; top: 0; width: 1px; height: 4px; background: rgba(255, 255, 255, 0.2); }
.tick.major { height: 7px; background: rgba(255, 255, 255, 0.42); }
.tick em {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  font: 500 12px/1 var(--f-ui); font-style: normal; color: rgba(224, 230, 248, 0.55); font-variant-numeric: tabular-nums;
  transition: color var(--d-press);
  white-space: nowrap;
}
.tick em.edge-l { left: 0; transform: none; }
.tick em.edge-r { left: auto; right: 0; transform: none; }
.tick.near em { color: var(--text); }

/* Needle: hovers above, then drops onto the true answer */
.needle {
  position: absolute; bottom: 50%; width: 2px; height: 32px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
  transform-origin: bottom center; z-index: 2;
}
.needle::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; }
.needle-label {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 4px; padding: 4px 8px; border-radius: 7px;
  background: #fff; color: #0B0E1C;
  font: 700 13px/1.1 var(--f-ui); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.needle.label-l .needle-label { left: auto; right: -6px; transform: none; }
.needle.label-r .needle-label { left: -6px; transform: none; }
.needle.hover { animation: needleHover 560ms ease-in-out both; }
.needle.drop { animation: needleDrop 380ms var(--ease-in) both; }
@keyframes needleHover {
  0% { opacity: 0; transform: translateY(-28px); }
  45% { opacity: 1; transform: translateY(-18px); }
  100% { transform: translateY(-20px); }
}
@keyframes needleDrop {
  0% { transform: translateY(-20px); }
  75% { transform: translateY(1px) scaleY(0.94); }
  100% { transform: none; }
}
.round.is-revealed .scale { padding-top: 46px; }
.needle.offscale .needle-label { background: #FFE0B8; }
.band.hit { background: color-mix(in srgb, var(--c) 55%, transparent); animation: bandHit 600ms var(--ease-out); }
.band.miss { background: rgba(139, 147, 167, 0.2); box-shadow: inset 0 0 0 1.5px rgba(139, 147, 167, 0.7); animation: bandMiss 380ms ease-out; }
@keyframes bandHit { 0% { filter: brightness(2); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 0 0 var(--c); } 100% { filter: none; box-shadow: inset 0 0 0 1.5px var(--c), 0 0 22px 1px color-mix(in srgb, var(--c) 45%, transparent); } }
@keyframes bandMiss { 25% { transform: translateX(-4px); } 55% { transform: translateX(3px); } }

/* Width chips: name + payout, selection shown by border and tint only */
.chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.chip {
  --c: var(--c-snug);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 48px; padding: 5px 2px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.035);
  transition: background var(--d-press), border-color var(--d-press), transform var(--d-press) var(--ease-out);
}
.chip-wide { --c: var(--c-wide); } .chip-fair { --c: var(--c-fair); } .chip-snug { --c: var(--c-snug); }
.chip-tight { --c: var(--c-tight); } .chip-pinpoint { --c: var(--c-pinpoint); }
.chip-name { font: 600 13px/1 var(--f-ui); color: var(--text-dim); }
.chip-lift { font: 600 13px/1 var(--f-ui); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.chip:hover { background: rgba(255, 255, 255, 0.06); }
.chip.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.chip.on .chip-name { color: var(--text); }
.chip.on .chip-lift { color: var(--c); }
.chip:active, .chip.press { transform: scale(0.95); }
.round.is-locked .chip:not(.on) { opacity: 0.35; }
.round.is-locked .chips { pointer-events: none; }

.controls { padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
#btn-lock:disabled { filter: grayscale(0.6) brightness(0.6); box-shadow: none; cursor: default; }

/* Number pad: 4 columns, quiet keys, one press flash */
.keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.key {
  height: 44px; border-radius: 12px;
  border: 0; background: rgba(255, 255, 255, 0.07);
  font: 600 20px/1 var(--f-ui); color: var(--text); font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  transition: background var(--d-press), transform var(--d-press) var(--ease-out);
  touch-action: manipulation;
}
.key:hover { background: rgba(255, 255, 255, 0.11); }
.key:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.16); }
.key.tap { animation: keyTap 220ms var(--ease-out); }
@keyframes keyTap { 0% { background: rgba(255, 181, 71, 0.35); } 100% { background: rgba(255, 255, 255, 0.07); } }
.key-del svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.key-del, .key-dot { background: rgba(255, 255, 255, 0.04); color: var(--text-dim); }
.keypad.years .key-dot { opacity: 0.3; pointer-events: none; }
.guess.nope { animation: nope 300ms ease-out; }
@keyframes nope { 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
.round.empty .guess::after { /* blinking caret where your number will go */
  content: ""; display: inline-block; width: 3px; height: 0.82em; margin-left: 2px; vertical-align: -0.04em;
  background: var(--amber); border-radius: 2px; animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.round.empty .track { background: rgba(255, 255, 255, 0.06) !important; }
.guess.roll { animation: roll 140ms var(--ease-out); }
@keyframes roll { from { transform: translateY(5px); opacity: 0.6; } to { transform: none; opacity: 1; } }

/* Reveal panel replaces the readout, chips and button, at the same card height */
.result { display: flex; flex-direction: column; flex: 1; padding-top: 14px; animation: rise var(--d-state) var(--ease-out) both; }
.result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.verdict {
  font: 800 2rem/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--c);
}
.verdict.is-hit { animation: verdictIn 460ms var(--ease-spring) both; }
@keyframes verdictIn { from { transform: scale(1.35); opacity: 0; } to { transform: none; opacity: 1; } }
.verdict-delta { font: 600 15px/1.2 var(--f-ui); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.result-line { margin: 10px 0 0; font: 400 15px/1.4 var(--f-ui); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.result-line strong { color: var(--text); font-weight: 700; }
.result-fact { margin: 12px 0 16px; padding-top: 12px; border-top: 1px solid var(--hairline); font: 400 15px/1.5 var(--f-ui); color: var(--text-dim); }
.result .btn-primary { margin-top: auto; }
.round.is-revealed .chips, .round.is-revealed .readout, .round.is-revealed .controls { display: none; }

.round.enter .question, .round.enter .readout, .round.enter .scale, .round.enter .chips {
  animation: rise var(--d-state) var(--ease-out) both;
}
.round.enter .readout { animation-delay: 40ms; }
.round.enter .scale { animation-delay: 80ms; }
.round.enter .chips { animation-delay: 120ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- results */
.results { display: block; }
.res-hero { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.res-alt {
  font: 800 4.6rem/0.88 var(--f-display);
  font-variant-numeric: tabular-nums;
  color: #FFF4E2;
  text-shadow: 0 0 30px rgba(255, 181, 71, 0.4);
}
.res-unit { font: 600 var(--t-lg)/1 var(--f-ui); color: var(--amber); }
.res-tier { margin: 2px 0 0; font: italic 400 1.55rem/1.1 var(--f-serif); color: #F7EBD8; }
.res-note { margin: 8px 0 0; font: 500 15px/1.4 var(--f-ui); color: var(--amber); }
.res-note:empty { display: none; }
.res-note span { color: var(--text-dim); font-weight: 400; }

/* An inked stamp. --ink comes from the tier. */
.ink {
  --ink: var(--ink-1);
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  color: var(--ink);
  transform: rotate(var(--r, -6deg));
  opacity: 0.85;
}
.ink::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid var(--ink); opacity: 0.5; }
.ink svg { width: 22px; height: 22px; }
.ink b { font: 700 8px/1 var(--f-ui); letter-spacing: 0.01em; text-transform: uppercase; text-align: center; max-width: 56px; white-space: nowrap; }
.ink.t2 { --ink: var(--ink-2); } .ink.t3 { --ink: var(--ink-3); } .ink.t4 { --ink: var(--ink-4); } .ink.t5 { --ink: var(--ink-5); }
.ink.t5::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 35%, rgba(85,82,95,.35) 0 2px, transparent 2.5px), radial-gradient(circle at 68% 62%, rgba(85,82,95,.3) 0 3px, transparent 3.5px), radial-gradient(circle at 55% 25%, rgba(85,82,95,.25) 0 1.5px, transparent 2px); }
.ink.big { width: 88px; height: 88px; flex: none; opacity: 1; border-width: 3px; }
.ink.big svg { width: 30px; height: 30px; }
.ink.big b { font-size: 10px; max-width: 70px; }
.ink.slammed { animation: slam 520ms var(--ease-spring) 700ms both; }
@keyframes slam { 0% { opacity: 0; transform: scale(1.9) rotate(-18deg); } 100% { opacity: 1; transform: scale(1) rotate(var(--r, -6deg)); } }

/* ---- Answers recap ---- */
.recap-head { display: flex; justify-content: space-between; align-items: baseline; margin: 24px 0 4px; }
.recap-head h3 { margin: 0; font: 600 15px/1 var(--f-ui); }
.recap-head span { font: 500 13px/1 var(--f-ui); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.recap { list-style: none; margin: 0; padding: 0; }

.res-foot { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: var(--t-sm); color: var(--text-faint); }
.res-foot b { font: 700 15px/1 var(--f-ui); color: var(--amber); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- sheets */
.sheet-wrap {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4, 6, 16, 0);
  transition: background var(--d-sheet);
}
.sheet-wrap.open { background: rgba(4, 6, 16, 0.6); }
.sheet {
  width: min(100%, 520px); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: var(--glass-strong);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--hairline); border-bottom: 0;
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform var(--d-sheet) var(--ease-out);
}
.sheet-wrap.open .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sheet-head h2 { margin: 0; font: 800 1.9rem/1 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase; }
body.sheet-open #rail { opacity: 0; }

.lb-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lb-stats div { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 2px; border-radius: 12px; background: rgba(255, 255, 255, 0.045); }
.lb-stats b { font: 800 1.6rem/1 var(--f-display); font-variant-numeric: tabular-nums; color: #FFF4E2; }
.lb-stats span { font: 500 11px/1 var(--f-ui); color: var(--text-faint); white-space: nowrap; }
.lb-h { margin: 26px 0 12px; display: flex; justify-content: space-between; align-items: baseline; font: 600 15px/1 var(--f-ui); }
.lb-h small { font: 500 13px/1 var(--f-ui); color: var(--text-faint); }
.lb-tiers { display: flex; gap: 12px; margin: -4px 0 12px; font: 500 12px/1 var(--f-ui); color: var(--text-faint); }
.lb-tiers i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }

.stamp-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 14px; border-radius: 14px; background: var(--paper); }
.sb-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #1E2A55; }
.sb-item .ink { --r: -4deg; }
.sb-item:nth-child(even) .ink { --r: 5deg; }
.sb-name { font: 600 12px/1.2 var(--f-ui); }
.sb-meta { font: 500 11px/1.2 var(--f-ui); color: rgba(30, 42, 85, 0.6); font-variant-numeric: tabular-nums; }
.sb-item.locked .ink { --ink: rgba(30, 42, 85, 0.22); opacity: 1; }
.sb-item.locked .sb-name { color: rgba(30, 42, 85, 0.45); }

.cal { display: flex; flex-direction: column; gap: 10px; }
.cal-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 84px; gap: 12px; align-items: center; }
.cal-name { font-size: var(--t-sm); color: var(--text-dim); }
.cal-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cal-bar i { display: block; height: 100%; background: var(--c); border-radius: 4px; }
.cal-val { text-align: right; font: 600 var(--t-sm)/1 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-val small { font-weight: 400; color: var(--text-faint); margin-left: 4px; }
.lb-note { margin: 16px 0 0; font: 400 14px/1.5 var(--f-ui); color: var(--text-dim); }

.recent { list-style: none; margin: 0; padding: 0; }
.recent li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: var(--t-sm); }
.recent li:first-child { border-top: 0; }
.recent .r-no { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.recent .r-date { color: var(--text-dim); }
.recent .r-alt { font-weight: 700; font-variant-numeric: tabular-nums; }
.recent .r-legs { display: flex; gap: 3px; margin-top: 5px; }
.recent .r-legs i { width: 12px; height: 4px; border-radius: 2px; background: var(--c); }
.recent .r-legs i.m { background: transparent; box-shadow: inset 0 0 0 1px var(--c-miss); }

.how { list-style: none; counter-reset: how; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.how li { counter-increment: how; position: relative; padding-left: 38px; font-size: 15px; line-height: 1.5; color: var(--text-dim); }
.how li::before {
  content: counter(how); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 181, 71, 0.15); color: var(--amber); font: 600 13px/1 var(--f-ui);
}
.how b { color: var(--text); }
.how-widths { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.how-widths .w { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px; border-radius: 10px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 12px; font-weight: 600; }
.how-widths .w b { font: 600 13px/1 var(--f-ui); color: var(--c); font-variant-numeric: tabular-nums; }
.w-wide { --c: var(--c-wide); } .w-fair { --c: var(--c-fair); } .w-snug { --c: var(--c-snug); } .w-tight { --c: var(--c-tight); } .w-pin { --c: var(--c-pinpoint); }
.home-widths { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
.home-widths .w { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font-size: 12px; font-weight: 600; color: var(--text-dim); }
.home-widths .w b { font: 600 13px/1 var(--f-ui); color: var(--c); font-variant-numeric: tabular-nums; }
.how-foot { margin: 0 0 16px; font: 400 14px/1.5 var(--f-ui); color: var(--text-dim); }

/* ---------------------------------------------------------------- toast, dev */
#toast {
  position: fixed; z-index: 30; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 60px);
  max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--glass-strong); border: 1px solid var(--hairline-strong);
  font-size: var(--t-sm); text-align: center;
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  transition: transform var(--d-state) var(--ease-out), opacity var(--d-state);
}
#toast.show { transform: translate(-50%, 0); opacity: 1; }

#dev {
  position: fixed; z-index: 15; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.45); border: 1px dashed rgba(255, 255, 255, 0.25);
  font: 500 11px/1 var(--f-ui); color: rgba(255, 255, 255, 0.7);
}
#dev span { letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); padding: 0 4px; font-weight: 600; }
#dev button { border: 0; background: rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 5px 8px; font: inherit; color: #fff; }

/* ---------------------------------------------------------------- larger screens */
@media (min-width: 720px) {
  /* Floating card on tablets and desktop */
  #dock {
    left: 50%; right: auto; bottom: 20px;
    width: var(--card-max);
    height: var(--gondola-h);
    transform: translateX(-50%);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    box-shadow: 0 24px 60px rgba(2, 4, 14, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .screen { padding: 22px 22px 18px; }
  .home-title { font-size: 3.8rem; }
}
@media (min-width: 1024px) {
  /* Results open into two columns: your flight on the left, the answers on the right */
  body[data-screen="results"] #dock { width: min(920px, calc(100% - 48px)); height: max(460px, min(620px, calc(100% - 300px))); }
  .results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; overflow: hidden; }
  .results .res-main, .results .res-side { overflow-y: auto; scrollbar-width: none; min-height: 0; }
  .results .res-side .recap-head { margin-top: 4px; }
}
@media (max-height: 700px) {
  .question { font-size: 1.05rem; margin: 4px 0 8px; }
  .guess { font-size: 2.2rem; }
  .screen { padding-top: 16px; }
  .home-title { font-size: 2.7rem; }
  .home-lede { margin-bottom: 12px; }
}

/* ==========================================================================
   v3 additions: points, width slider, units, sound, answers view, stats
   ========================================================================== */

/* Sound toggle */
#btn-sound .snd-off { display: none; }
#btn-sound.muted .snd-on { display: none; }
#btn-sound.muted .snd-off { display: block; }
#btn-sound.muted { color: var(--text-faint); }

/* Altimeter: points under the km */
.alt-pts { font: 500 13px/1 var(--f-ui); color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.alt-pts b { font-weight: 700; color: #FFF4E2; }

/* Round header: running score */
.score-pill {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 181, 71, 0.35);
  font: 500 12px/1 var(--f-ui); color: rgba(255, 210, 150, 0.8);
}
.score-pill b { font: 700 14px/1 var(--f-ui); color: var(--amber); font-variant-numeric: tabular-nums; }
.score-pill.pop { animation: pop 420ms var(--ease-out); }

/* Unit toggle next to the typed number */
.unit-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: none;
  font: 500 15px/1 var(--f-ui); color: var(--text-dim);
}
.unit-toggle svg { display: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.unit-toggle.swap { border-color: var(--hairline-strong); background: rgba(255, 255, 255, 0.05); cursor: pointer; }
.unit-toggle.swap svg { display: block; }
.unit-toggle.swap:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.unit-toggle:disabled { cursor: default; }
.unit-toggle.flip span { animation: rise var(--d-state) var(--ease-out); }

/* Width slider */
.width { margin-top: 10px; }
.width-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.width-label { display: inline-flex; align-items: baseline; gap: 8px; }
.width-label b { font: 700 16px/1 var(--f-ui); color: var(--chip); display: inline-block; }
.width-label b.pop { animation: pop 300ms var(--ease-out); }
.width-label span { font: 700 15px/1 var(--f-ui); color: var(--text); font-variant-numeric: tabular-nums; }
.width-label span::after { content: " pts"; font-weight: 500; color: var(--text-faint); font-size: 13px; }
.width-range { font: 500 14px/1 var(--f-ui); color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }
.round.empty .width-range { color: var(--text-faint); }

input[type="range"]#width {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer;
}
#width::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background:
    radial-gradient(circle, rgba(255,255,255,.45) 0 2px, transparent 2.5px) 0 50% / 25% 100% repeat-x,
    linear-gradient(90deg, var(--c-wide), var(--c-fair) 25%, var(--c-snug) 50%, var(--c-tight) 75%, var(--c-pinpoint));
  opacity: 0.9;
}
#width::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c-wide), var(--c-fair) 25%, var(--c-snug) 50%, var(--c-tight) 75%, var(--c-pinpoint));
}
#width::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: #FFF6E8; border: 4px solid var(--chip);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 14px color-mix(in srgb, var(--chip) 50%, transparent);
  transition: border-color var(--d-press);
}
#width::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #FFF6E8; border: 4px solid var(--chip);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.round.is-locked #width { pointer-events: none; opacity: 0.5; }
.width-stops { position: relative; display: flex; justify-content: space-between; margin: -2px -6px 0; }
.stop {
  border: 0; background: none; padding: 2px 4px;
  font: 600 11px/1 var(--f-ui); color: var(--text-faint);
  transition: color var(--d-press);
}
.stop.on { color: var(--text); }
.stop:hover { color: var(--text-dim); }
.round.is-revealed .width { display: none; }

/* The ruler's band animates its width as you slide */
.band { transition: left var(--d-state) var(--ease-out), width var(--d-state) var(--ease-out), background var(--d-state), box-shadow var(--d-state); }

/* Keypad keys a touch shorter to fit the width slider */
.key { height: 42px; }
.key-zeros { font-size: 16px; color: var(--text-dim); background: rgba(255, 255, 255, 0.045); }
.keypad.years .key-zeros { opacity: 0.25; pointer-events: none; }

/* Results hero in points */
.res-unit { font: 600 var(--t-lg)/1 var(--f-ui); }
.res-tier { font: 500 15px/1.3 var(--f-ui); color: var(--text-dim); }
.res-tier em { font: italic 400 1.3rem/1 var(--f-serif); color: #F7EBD8; }
.res-rank { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 181, 71, 0.08); border: 1px solid rgba(255, 181, 71, 0.22); font: 500 15px/1.35 var(--f-ui); color: var(--text); }
.res-rank b { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }
.sample { margin-left: 6px; padding: 2px 6px; border-radius: 6px; border: 1px dashed rgba(255, 255, 255, 0.35); font: 600 10px/1 var(--f-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); vertical-align: 2px; }



.res-rank { margin: 8px 0 0; padding: 0; background: none; border: 0; font: 500 15px/1.4 var(--f-ui); color: var(--text-dim); }
.res-rank b { font: 800 20px/1 var(--f-display); color: var(--amber); letter-spacing: 0.02em; }
.res-note { margin: 10px 0 2px; font: 500 13px/1.4 var(--f-ui); color: var(--text-faint); }
.res-note span { color: var(--text-faint); }

/* ==========================================================================
   v4 · Lean round card. Target ≈ half the screen so the sky stays the show.
   ========================================================================== */
.round { padding-top: 14px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
.round .round-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 28px; }
.round .legs { gap: 3px; flex: none; }
.round .leg { width: 14px; height: 4px; }
.round .cat-tag { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.round .round-timer { margin: 0; font: 800 20px/1 var(--f-display); color: var(--ember); font-variant-numeric: tabular-nums; }
.round .round-timer:empty { display: none; }
.clue-chip {
  flex: none; height: 28px; padding: 0 11px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 181, 71, 0.55); background: rgba(255, 181, 71, 0.06);
  font: 600 12px/1 var(--f-ui); color: var(--amber); white-space: nowrap;
  transition: background var(--d-press), transform var(--d-press) var(--ease-out), opacity var(--d-state);
}
.clue-chip { display: inline-flex; align-items: center; gap: 5px; }
.clue-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.clue-chip:hover { background: rgba(255, 181, 71, 0.14); }
.clue-chip:active { transform: scale(0.95); }
.clue-chip.armed { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
.clue-chip.used { opacity: 0.4; }
.round.clued .clue-chip { opacity: 1; background: rgba(255, 181, 71, 0.16); }

.round .question { margin: 0 0 4px; font: 600 1.15rem/1.3 var(--f-ui); }
.hint {
  margin: 0 0 12px; font: 400 13px/1.35 var(--f-ui); color: rgba(238, 241, 250, 0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 180ms;
}
.hint.swap { opacity: 0; }
.hint.is-clue { color: var(--amber); white-space: normal; }
.hint.is-clue b { font-weight: 700; color: #FFD48A; }
.hint.is-clue > b:first-child { color: var(--amber); }

/* Range readout: low ⟵ guess ⟶ high */
.round .readout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
  min-height: 62px; margin: 0;
}
.r-edge { display: flex; align-items: center; gap: 8px; font: 800 clamp(22px, 7.4vw, 30px)/1 var(--f-display); color: rgba(238, 241, 250, 0.85); font-variant-numeric: tabular-nums; min-width: 0; }
.r-edge::after, .r-edge::before { content: ""; flex: 1; min-width: 10px; height: 1.5px; background: rgba(238, 241, 250, 0.28); }
.r-lo::before { display: none; }
.r-hi::after { display: none; }
.r-lo { justify-content: flex-start; }
.r-hi { justify-content: flex-end; text-align: right; }
.r-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.round .guess { font: 800 clamp(36px, 12vw, 48px)/1 var(--f-display); color: var(--amber); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(255, 181, 71, 0.3); }
.round .unit-toggle { padding: 2px 6px; border: 0; background: none; font: 600 12px/1 var(--f-ui); color: var(--text-dim); }
.round .unit-toggle svg { width: 12px; height: 12px; }
.round .unit-toggle.swap { background: rgba(255, 255, 255, 0.06); border-radius: 6px; }
.round.empty .r-edge { color: rgba(238, 241, 250, 0.25); }
.round.empty .guess::before { content: "your guess"; font: 500 15px/1 var(--f-ui); color: var(--text-faint); margin-right: 4px; vertical-align: 0.5em; }

/* Ruler only at the reveal */
.round .scale { display: none; padding: 30px 10px 0; }
.round.show-ruler .scale { display: block; animation: rise var(--d-state) var(--ease-out) both; }
.round.show-ruler .readout { display: none; }

/* Width slider with a chip riding the thumb */
.round .width { position: relative; margin-top: 4px; padding-top: 28px; }
.thumb-chip {
  position: absolute; top: 0; transform: translateX(-50%);
  padding: 4px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--chip) 20%, rgba(10, 13, 30, 0.9)); border: 1px solid var(--chip);
  font: 600 12px/1 var(--f-ui); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: left var(--d-state) var(--ease-out), background var(--d-press), border-color var(--d-press);
  pointer-events: none;
}
.thumb-chip[data-edge="l"] { transform: translateX(-13px); }
.thumb-chip[data-edge="r"] { transform: translateX(calc(-100% + 13px)); }
.thumb-chip b { color: var(--chip); font-weight: 700; }
.thumb-chip s { color: var(--text-faint); margin-right: 2px; }
.thumb-chip.pop { animation: pop 260ms var(--ease-out); }
.round.is-revealed .width, .round.is-locked .width { display: none; }

/* Keypad: 5 × 3, Lock spans three keys */
.round .controls { padding-top: 10px; }
.round .keypad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.round .key { height: 44px; font-size: 19px; }
.round .key-lock { grid-column: span 3; min-height: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
.round .key-zeros { font-size: 15px; }
.kbd-note { display: none; margin: 8px 0 0; text-align: center; font: 500 12px/1 var(--f-ui); color: var(--text-faint); }
@media (pointer: fine) {
  .round .key:not(.key-lock) { display: none; }
  .round .key-lock { grid-column: 1 / -1; height: 50px; }
  .kbd-note { display: block; }
}

/* Reveal panel sits in the same space */
.round .result { padding-top: 10px; }
.round .result-fact { margin: 10px 0 12px; }

/* ==========================================================================
   v4 · Results: score → today's pilots → six leg tiles → one ticket.
   Details (each answer) open on demand, so the first glance stays calm.
   ========================================================================== */
.res-hero { margin-top: 4px; }
.res-alt { font-size: 4.2rem; }

/* ---- Today's pilots histogram ---- */
.crowd { margin: 14px 0 0; }
.crowd[hidden] { display: none; }
.crowd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 500 12.5px/1.2 var(--f-ui); color: var(--text-faint); }
.crowd-head b { color: var(--text-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.crowd-chart { margin: 4px -2px 0; }
.hist-svg { display: block; width: 100%; height: auto; overflow: visible; }
.h-axis { stroke: var(--hairline-strong); stroke-width: 1; }
.h-bar { fill: rgba(238, 241, 250, 0.18); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.h-bar.space { fill: rgba(255, 181, 71, 0.35); }
.h-bar.mine { fill: var(--amber); filter: drop-shadow(0 0 5px rgba(255, 181, 71, 0.55)); }
.h-median { stroke: rgba(238, 241, 250, 0.38); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.h-mlabel { font: 600 7.5px var(--f-ui); letter-spacing: 0.08em; fill: rgba(238, 241, 250, 0.5); opacity: 0; }
.h-tick { fill: none; stroke: rgba(238, 241, 250, 0.45); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.h-you { opacity: 0; }
.h-balloon { fill: var(--ember); stroke: var(--amber); stroke-width: 1.5; }
.h-stripe { stroke: rgba(255, 244, 226, 0.75); stroke-width: 1.4; }
.h-string { stroke: rgba(238, 241, 250, 0.7); stroke-width: 1; }
.h-youtag { opacity: 0; }
.h-pill { fill: #0F1430; stroke: rgba(255, 181, 71, 0.55); stroke-width: 0.8; }
.h-youlabel { font: 700 8px var(--f-ui); letter-spacing: 0.08em; fill: var(--amber); }
.crowd-chart.draw .h-bar { transform: scaleY(1); transition: transform 520ms var(--ease-out); transition-delay: calc(80ms + var(--i) * 24ms); }
.crowd-chart.draw .h-median, .crowd-chart.draw .h-mlabel { opacity: 1; transition: opacity 300ms 700ms; }
.crowd-chart.draw .h-you { animation: hDrop 620ms var(--ease-spring) 820ms forwards; }
.crowd-chart.draw .h-youtag { opacity: 1; transition: opacity 260ms 1200ms; }
@keyframes hDrop { from { opacity: 0; transform: translateY(-26px); } 60% { opacity: 1; } to { opacity: 1; transform: translateY(0); } }
.res-rank { margin: 6px 0 0; }

/* ---- Leg strip: six tiles, tap for the answer ---- */
.legstrip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.leg-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  height: 64px; padding: 0; border-radius: 12px;
  border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.045);
  color: var(--text); cursor: pointer;
  transition: background var(--d-press), border-color var(--d-state), transform var(--d-press) var(--ease-out);
  animation: rise 380ms var(--ease-out) both; animation-delay: calc(300ms + var(--i) * 60ms);
}
.leg-tile:hover { background: rgba(255, 255, 255, 0.08); }
.leg-tile:active { transform: scale(0.95); }
.leg-tile.open { border-color: var(--amber); background: rgba(255, 181, 71, 0.1); box-shadow: 0 0 0 1px var(--amber); }
.lt-no { font: 600 10px/1 var(--f-ui); letter-spacing: 0.08em; color: var(--text-faint); }
.lt-pts { font: 700 13px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--c); }
.leg-tile.miss .lt-pts { color: var(--text-faint); }
.legstrip-note { margin: 8px 0 0; text-align: center; font: 500 12px/1 var(--f-ui); color: rgba(224, 230, 248, 0.55); }
.legstrip-note[hidden] { display: none; }
.leg-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-state) var(--ease-out); }
.leg-detail > div { overflow: hidden; }
.leg-detail.open { grid-template-rows: 1fr; }

/* ---- Share: one boarding-pass ticket ---- */
.ticket-row { display: flex; gap: 8px; margin-top: 16px; }
.ticket-btn {
  --cut: 74%;
  position: relative; flex: 1; display: flex; align-items: stretch;
  height: 56px; padding: 0; border: 0; border-radius: 10px;
  background: var(--paper); color: #14213D; cursor: pointer;
  /* two half-circle notches where the stub tears off */
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
  transition: transform var(--d-press) var(--ease-out), filter var(--d-press);
}
.ticket-btn::after { content: ""; position: absolute; left: var(--cut); top: 10px; bottom: 10px; border-left: 1.5px dashed rgba(20, 33, 61, 0.35); }
.ticket-btn:hover { filter: brightness(1.04); }
.ticket-btn:active { transform: scale(0.98); }
.ticket-main { flex: 0 0 var(--cut); display: flex; align-items: center; justify-content: center; gap: 9px; font: 700 16px/1 var(--f-ui); letter-spacing: 0.01em; }
.ticket-main svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ticket-stub { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 800 13px/1 var(--f-display); letter-spacing: 0.06em; color: rgba(20, 33, 61, 0.7); white-space: nowrap; transform-origin: 0 50%; }
.ticket-stub small { font: 500 10px/1 var(--f-mono); letter-spacing: 0.04em; color: rgba(20, 33, 61, 0.5); }
.ticket-btn.torn .ticket-stub { animation: tear 620ms var(--ease-out); }
@keyframes tear { 0% { transform: none; } 30% { transform: translate(5px, 2px) rotate(7deg); } 60% { transform: translate(2px, 0) rotate(-2deg); } 100% { transform: none; } }

/* ---- Passport: one row; the book lives in the logbook ---- */
.passport-row {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 8px 12px 8px 8px;
  border-radius: 14px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.035);
  color: var(--text); text-align: left; cursor: pointer; transition: background var(--d-press);
}
.passport-row:hover { background: rgba(255, 255, 255, 0.07); }
.passport-row .ink { width: 44px; height: 44px; flex: none; background: var(--paper); border-width: 1.5px; opacity: 1; }
.passport-row .ink svg { width: 18px; height: 18px; }
.passport-row .ink b { display: none; }
.pr-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font: 400 13px/1.3 var(--f-ui); color: var(--text-faint); }
.pr-title { font: 600 14px/1.2 var(--f-ui); color: var(--text); }
.pr-text b { color: var(--amber); font-weight: 600; }
.pr-chev { margin-left: auto; font: 400 22px/1 var(--f-ui); color: var(--text-faint); }

/* Phone and tablet: answers live behind the tiles. Desktop: both columns. */
.res-side { display: none; }
@media (min-width: 1024px) {
  .res-side { display: block; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); padding-bottom: 40px; }
  .legstrip, .legstrip-note, .leg-detail { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .h-bar { transform: none !important; transition: none !important; }
  .h-median, .h-mlabel, .h-you, .h-youtag { opacity: 1 !important; animation: none !important; transition: none !important; }
  .leg-tile { animation: none !important; }
  .ticket-btn.torn .ticket-stub { animation: none; }
}

/* ==========================================================================
   v5 · Answers as number lines, a numbered histogram, two tickets.
   ========================================================================== */
/* Histogram: numbered axis instead of icons */
.h-num { font: 600 8px var(--f-ui); fill: rgba(224, 230, 248, 0.5); font-variant-numeric: tabular-nums; }
.h-tickline { stroke: rgba(224, 230, 248, 0.25); stroke-width: 1; }
.crowd-head:empty { display: none; }
.crowd-head { justify-content: flex-end; }

/* Answers header */
.recap-head { margin: 4px 0 2px; }
.recap-head h3 { font: 600 12px/1 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.recap-head span { font: 500 13px/1 var(--f-ui); color: var(--text-dim); }
.recap-head span b { color: var(--text); font-weight: 600; }

/* One leg = question, one number line, one fact. No boxes. */
.ans { padding: 16px 0; border-top: 1px solid rgba(224, 230, 248, 0.08); }
.recap .ans:first-child { border-top: 0; padding-top: 10px; }
.ans-top { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; }
.ans-no { font: 600 16px/20px var(--f-display); color: var(--text-faint); }
.ans-q { margin: 0; font: 500 15px/20px var(--f-ui); color: rgba(238, 241, 250, 0.9); }
.ans.none .ans-q { color: var(--text-faint); }
.ans-pts { display: inline-flex; align-items: center; gap: 5px; font: 700 22px/20px var(--f-display); font-variant-numeric: tabular-nums; color: var(--amber); }
.ans.miss .ans-pts, .ans.none .ans-pts { color: var(--text-faint); }
.ans-clue { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: 0.7; }

.ans-line { position: relative; height: 56px; margin: 12px 0 0 28px; }
.ans-track { position: absolute; left: 0; right: 0; top: 27px; height: 2px; border-radius: 1px; background: rgba(224, 230, 248, 0.1); }
.ans-track.dash { background: repeating-linear-gradient(90deg, rgba(224, 230, 248, 0.22) 0 4px, transparent 4px 8px); }
.ans-range { position: absolute; top: 24px; height: 8px; border-radius: 4px; background: var(--c); transform-origin: 50% 50%; }
.ans.hit .ans-range { box-shadow: 0 0 12px color-mix(in srgb, var(--c) 35%, transparent); }
.ans.miss .ans-range { opacity: 0.35; }
.ans-pin { position: absolute; top: 19px; width: 2px; height: 18px; margin-left: -1px; border-radius: 1px; background: #EEF1FA; box-shadow: 0 0 0 2px #121A33; }
.ans-val { position: absolute; top: 0; font: 700 22px/16px var(--f-display); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.ans-val.l { transform: translateX(-6px); }
.ans-val.r { transform: translateX(calc(-100% + 6px)); }
.ans-val small { margin-left: 4px; font: 500 12px/1 var(--f-ui); color: var(--text-dim); }
.ans-end { position: absolute; top: 38px; font: 500 12px/14px var(--f-ui); color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ans-end.hi { text-align: right; }
.ans-end.solo { transform: translateX(-50%); }
.ans.none .ans-end.solo { color: var(--text-faint); }
.ans-off { position: absolute; top: 38px; transform: translateX(-50%); font: 600 11px/1 var(--f-ui); color: var(--text-faint); white-space: nowrap; }
.ans-fact { margin: 10px 0 0 28px; font: italic 400 15px/20px var(--f-serif); color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The line draws itself: range grows from its centre, then the pin drops in. */
.leg-detail.open .ans .ans-range, .recap.reveal-seq .ans .ans-range { animation: ansGrow 240ms var(--ease-out) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
.leg-detail.open .ans .ans-pin, .leg-detail.open .ans .ans-val,
.recap.reveal-seq .ans .ans-pin, .recap.reveal-seq .ans .ans-val { animation: ansRise 200ms var(--ease-out) both; animation-delay: calc(var(--i) * 60ms + 420ms); }
@keyframes ansRise { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.recap.reveal-seq .ans { animation: rise 320ms var(--ease-out) both; animation-delay: calc(var(--i) * 60ms + 60ms); }
@keyframes ansGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ansDrop { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
.leg-detail .ans { padding: 14px 0 4px; border-top: 1px solid rgba(224, 230, 248, 0.08); margin-top: 12px; }
.leg-detail.open .ans { animation: fadeIn 150ms ease-out both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Leg tiles: ring = width colour; filled = hit, outline = miss, dashed = no guess */
.legstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.leg-tile .lt-glyph { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c); }
.leg-tile.hit .lt-glyph { background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 55%, transparent); }
.leg-tile.miss .lt-glyph { border-color: rgba(238, 241, 250, 0.35); border-style: solid; }
.leg-tile.none .lt-glyph { border-color: rgba(238, 241, 250, 0.3); border-style: dashed; }
.leg-tile .lt-pts { color: var(--amber); }
.leg-tile.miss .lt-pts, .leg-tile.none .lt-pts { color: var(--text-faint); }
.leg-tile.open { border-color: rgba(238, 241, 250, 0.5); background: rgba(255, 255, 255, 0.08); box-shadow: none; }

/* Two tickets: share (cream, primary) and copy image (sky paper, secondary) */
.ticket-btn#btn-share { flex: 1.55; }
.ticket-img { --cut: 72%; background: #D9E4F2; flex: 1; }
.ticket-img .ticket-main { white-space: nowrap; }
.ticket-img .ticket-stub svg { width: 18px; height: 18px; fill: none; stroke: rgba(20, 33, 61, 0.55); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ticket-btn.done .ticket-main { animation: ticketOk 900ms var(--ease-out); }
@keyframes ticketOk { 0% { opacity: 1; } 20% { opacity: 0.35; } 100% { opacity: 1; } }
@media (max-width: 420px) {
  .ticket-main { font-size: 15px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ans .ans-range, .ans .ans-pin, .ans .ans-val, .ans .ans-you, .recap.reveal-seq .ans, .leg-detail.open .ans { animation: none !important; }
}

/* ==========================================================================
   v6 · A short, wide home strip (the sky and balloon are the hero) and a
   boarding-pass Take off ticket.
   ========================================================================== */
body[data-screen="home"] #dock { height: max(calc(268px + env(safe-area-inset-bottom, 0px)), var(--home-fit, 0px)); }
#screen-home { overflow: hidden; touch-action: manipulation; }   /* a fixed strip: never scrolls */
.home { padding-top: 18px; gap: 12px; justify-content: space-between; }
.home-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home-top .eyebrow { margin: 0; }
.home .home-status { margin: 0; gap: 4px 12px; font-size: 12.5px; }
.home-main { display: flex; flex-direction: column; gap: 14px; }
.home .home-title { margin: 0; font-size: 2.6rem; }
.home .home-lede { margin: 6px 0 0; font-size: 14px; color: var(--text-dim); }

/* Take off ticket: cream boarding pass, tear-off stub with the flight number */
.launch-ticket {
  --cut: 76%;
  display: flex; align-items: stretch; padding: 0; height: 60px;
  border-radius: 12px;
  background: var(--paper); color: #14213D;
  box-shadow: 0 10px 28px rgba(255, 170, 80, 0.18);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
}
.launch-ticket::after { content: ""; position: absolute; left: var(--cut); top: 10px; bottom: 10px; border-left: 1.5px dashed rgba(20, 33, 61, 0.35); }
.launch-ticket .hold-label { flex: 0 0 var(--cut); font: 800 24px/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; }
.launch-ticket .hold-idle { display: inline-flex; align-items: center; gap: 10px; }
.launch-ticket .hold-idle svg { width: 20px; height: 20px; fill: var(--ember); animation: flick 1.4s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes flick { from { transform: scale(1, 1); } to { transform: scale(0.92, 1.1) skewX(-3deg); } }
.launch-ticket .hold-live { font: 600 15px/1 var(--f-ui); letter-spacing: 0; text-transform: none; }
.launch-stub { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.launch-stub small { font: 500 10px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(20, 33, 61, 0.55); }
.launch-stub b { font: 800 20px/1 var(--f-display); letter-spacing: 0.04em; }
.launch-ticket .hold-fill { background: linear-gradient(90deg, #FFB547, #FFCF7A 80%, #FFE3B0); }
.launch-ticket:hover { filter: brightness(1.03); }
.launch-ticket.holding { box-shadow: 0 0 0 4px rgba(255, 181, 71, 0.25), 0 12px 32px rgba(255, 150, 60, 0.4); }
.launch-ticket.fired .launch-stub { animation: tear 620ms var(--ease-out); transform-origin: 0 50%; }

@media (min-width: 720px) {
  body[data-screen="home"] #dock { width: min(680px, calc(100% - 48px)); height: max(204px, var(--home-fit, 0px)); }
  .home-main { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .launch-ticket { width: 280px; flex: none; }
  .home .home-title { font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .launch-ticket .hold-idle svg { animation: none; } }

/* v6 · Answer line: YOU above (width colour), ANSWER below (white pin). */
.ans-line { height: 66px; }
.ans-track { top: 31px; }
.ans-range { top: 28px; }
.ans-gmark { position: absolute; top: 21px; margin-left: -5px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--c); }
.ans.miss .ans-gmark { border-top-color: color-mix(in srgb, var(--c) 70%, #fff 0%); }
.ans-pin { top: 25px; height: 16px; }
.ans-you, .ans-val { position: absolute; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ans-you { top: 0; font: 700 18px/18px var(--f-display); color: var(--c); }
.ans.miss .ans-you { color: color-mix(in srgb, var(--c) 75%, #EEF1FA); }
.ans-you.none { font: 500 12px/18px var(--f-ui); color: var(--text-faint); }
.ans-val { top: 45px; font: 700 18px/18px var(--f-display); color: var(--text); }
.ans-you em, .ans-val em { font: 600 9.5px/1 var(--f-ui); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.ans-you em { color: inherit; opacity: 0.8; }
.ans-val em { color: var(--text-dim); }
.ans-you.c, .ans-val.c { transform: translateX(-50%); }
.ans-you.l, .ans-val.l { transform: translateX(-6px); }
.ans-you.r, .ans-val.r { transform: translateX(calc(-100% + 6px)); }
.ans-off { top: 4px; }
.ans-fact { font: 400 14px/19px var(--f-ui); font-style: normal; }
.leg-detail.open .ans .ans-you, .recap.reveal-seq .ans .ans-you { animation: ansDrop 180ms var(--ease-out) both; animation-delay: calc(var(--i) * 60ms + 300ms); }

/* v7 · Width as five buttons: name + what it pays; the chosen one glows in its colour. */
.wbtns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.wbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 46px; padding: 0 2px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  background: rgba(255, 255, 255, 0.035); color: var(--text-dim); cursor: pointer;
  transition: background var(--d-press), border-color var(--d-state), color var(--d-state), transform var(--d-press) var(--ease-out);
}
.wbtn span { font: 600 11.5px/1 var(--f-ui); }
.wbtn b { font: 700 14px/1 var(--f-display); letter-spacing: 0.02em; color: var(--c); font-variant-numeric: tabular-nums; }
.wbtn:hover { background: rgba(255, 255, 255, 0.07); }
.wbtn:active { transform: scale(0.95); }
.wbtn.on { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); color: var(--text); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); }
.wbtn.pop { animation: pop 300ms var(--ease-out); }
.round.is-locked .wbtns { pointer-events: none; opacity: 0.6; }
.round.is-revealed .wbtns { display: none; }
.key-dot { font-size: 22px; }
.keypad.years .key-dot { opacity: 0.25; pointer-events: none; }

/* v7 · Labelled top-bar buttons and the simpler How to fly sheet */
.text-btn { width: auto; padding: 0 12px 0 10px; gap: 6px; border-radius: 999px; }
.text-btn span { font: 600 13px/1 var(--f-ui); color: var(--text); white-space: nowrap; }
@media (max-width: 440px) {
  .flight-no { display: none; }
  .text-btn { padding: 0 11px; }
  .text-btn svg { display: none; }
  .top-actions { gap: 5px; }
}
.how-extra { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 14px 0 0; font-size: 14px; line-height: 1.4; }
.how-extra dt { font-weight: 700; color: var(--amber); }
.how-extra dd { margin: 0; color: var(--text-dim); }
.why { margin: 16px 0 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 181, 71, 0.07); border: 1px solid rgba(255, 181, 71, 0.2); }
.why h3 { margin: 0 0 6px; font: 800 18px/1 var(--f-display); letter-spacing: 0.06em; color: var(--amber); }
.why p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }

/* v7 · Range ends sit on the line beside the bar; the scale's ends sit faintly at the edges. */
.ans-end { position: absolute; top: 25px; padding: 0 3px; font: 600 11px/14px var(--f-ui); color: var(--text-dim); background: #0E1330; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ans-end.lo, .ans-end.hi { transform: none; text-align: left; }
.ans-axis { position: absolute; top: 47px; font: 500 10px/14px var(--f-ui); color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ans-axis.l { left: 0; }
.ans-axis.r { right: 0; }
.ans-track { left: 0; right: 0; }
.ans-pin { z-index: 1; }

#screen-home.leaving-slow { opacity: 0; transition: opacity 400ms ease 200ms; }

/* ==========================================================================
   v8 · Logbook as a pilot's folio, How to fly as a pre-flight briefing.
   Printed things (licence, passport, strips, tickets) are cream paper with a
   faint grain; everything else stays navy glass.
   ========================================================================== */
:root { --grain: radial-gradient(rgba(30, 42, 85, 0.035) 1px, transparent 1px) 0 0 / 3px 3px, linear-gradient(#F5ECDA, #EFE3CC); --ink: #1E2A55; }
.sheet-head { align-items: flex-start; }
.sheet-head h2 { font-size: 34px; }
.sheet-sub { margin: 6px 0 0; font: 500 11px/1 var(--f-mono); letter-spacing: 0.04em; color: var(--text-dim); }
.sheet-head .sheet-x { width: 36px; height: 36px; min-width: 36px; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; }
.lb-h { margin: 28px 0 12px; font: 600 11px/1 var(--f-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }

/* Licence */
.licence { position: relative; padding: 16px; border-radius: 14px; background: var(--grain); color: var(--ink); transform: rotate(-0.6deg); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); animation: licIn 420ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes licIn { from { opacity: 0; transform: translateY(12px) rotate(-3deg); } to { opacity: 1; transform: rotate(-0.6deg); } }
.lic-strip { font: 500 10px/1 var(--f-mono); letter-spacing: 0.08em; padding-bottom: 8px; border-bottom: 2px solid var(--ember); }
.lic-body { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; margin-top: 14px; }
.lic-g { position: relative; width: 84px; height: 84px; }
.lic-gauge { display: block; width: 84px; height: 84px; }
.lic-gv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.lic-gv b { font: 700 28px/1 var(--f-display); }
.lic-gv span { font: 500 9px/1 var(--f-mono); letter-spacing: 0.06em; opacity: 0.7; }
.lic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.lic-grid div { display: flex; flex-direction: column; gap: 3px; }
.lic-grid b { font: 700 26px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.lic-grid span { font: 500 9px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.lic-grid .ths { display: flex; gap: 4px; height: 26px; align-items: center; opacity: 1; }
.th { width: 16px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.3; }
.th.on { fill: var(--ember); stroke: var(--ink); }
.lic-seal { position: absolute; right: -8px; bottom: -14px; }
.lic-seal .ink { width: 46px; height: 46px; background: rgba(243, 233, 214, 0.9); opacity: 0.95; }
.lic-seal .ink svg { width: 18px; height: 18px; }
.lic-seal .ink b { display: none; }

/* Passport page */
.pp-page { position: relative; padding: 14px 14px 12px 22px; border-radius: 14px; background: var(--grain); color: var(--ink); }
.pp-page::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(30, 42, 85, 0.18); border-radius: 9px; pointer-events: none; }
.pp-page::after { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 1px; background: repeating-linear-gradient(to bottom, rgba(30, 42, 85, 0.3) 0 6px, transparent 6px 11px); }
.pp-head { display: flex; justify-content: space-between; font: 500 11px/1 var(--f-mono); letter-spacing: 0.08em; padding: 4px 6px 10px; }
.pp-empty { margin: 0 6px 8px; font: 500 14px/1.4 var(--f-ui); }
.pp-page .stamp-book { background: none; padding: 4px 0; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 6px; }
.sb-stamp { position: relative; display: grid; place-items: center; width: 84px; height: 84px; }
.sb-ring { position: absolute; inset: 0; width: 84px; height: 84px; }
.sb-stamp .ink { width: 70px; height: 70px; opacity: 0.88; mix-blend-mode: multiply; }
.sb-name { font: 600 12px/1.25 var(--f-ui); }
.sb-meta { font: 500 9px/1 var(--f-mono); letter-spacing: 0.06em; opacity: 0.65; }
.sb-ghost { display: grid; place-items: center; width: 72px; height: 72px; margin: 6px; border-radius: 50%; border: 1px dotted rgba(30, 42, 85, 0.35); font: 700 18px/1 var(--f-display); color: rgba(30, 42, 85, 0.4); }
.sb-ghost small { display: block; font: 500 8px/1 var(--f-mono); }
.pp-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 6px 2px; margin-top: 6px; border-top: 1px dashed rgba(30, 42, 85, 0.2); font: 500 9.5px/1 var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.pp-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }

/* Calibration */
.cal { gap: 0; }
.cal-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 70px; gap: 12px; align-items: center; height: 34px; }
.cal-row.unused { opacity: 0.35; }
.cal-name { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--f-ui); color: var(--text); }
.cal-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cal-track { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.cal-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--c); }
.cal-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, 0.75); }
.cal-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
.cal-val b { font: 700 18px/1 var(--f-display); }
.cal-val small { font: 500 10px/1 var(--f-mono); color: var(--text-faint); margin: 0; }
.lb-note { margin: 10px 0 0; font: 400 13px/1.45 var(--f-ui); color: var(--text-dim); }

/* Flight strips */
.fstrips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fstrip { --cut: 72%; position: relative; display: flex; height: 56px; border-radius: 8px; background: var(--grain); color: var(--ink);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat; }
.fstrip::after { content: ""; position: absolute; left: var(--cut); top: 9px; bottom: 9px; border-left: 1.5px dashed rgba(30, 42, 85, 0.3); }
.fs-main { flex: 0 0 var(--cut); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 14px; }
.fs-id { font: 500 10px/1 var(--f-mono); letter-spacing: 0.06em; }
.fs-dots { display: flex; gap: 5px; }
.fs-dots i { width: 9px; height: 9px; border-radius: 50%; }
.fs-dots i.m { box-shadow: inset 0 0 0 1.5px rgba(30, 42, 85, 0.45); }
.fs-dots i.clue { outline: 2px solid var(--amber); outline-offset: 1px; }
.fs-stub { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 3px; align-self: center; }
.fs-stub b { font: 700 22px/1 var(--f-display); }
.fs-stub small { font: 500 9px/1 var(--f-mono); opacity: 0.65; }
.fstrip.ghost { background: none; border: 1px dashed rgba(255, 255, 255, 0.2); -webkit-mask: none; mask: none; color: var(--text-faint); }
.fstrip.ghost::after { display: none; }

/* ---- How to fly: pre-flight briefing ---- */
.brief { list-style: none; margin: 0; padding: 0; }
.brief li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(238, 241, 250, 0.08); }
.brief li:first-child { border-top: 0; padding-top: 4px; }
.br-n { font: 800 28px/1 var(--f-display); color: var(--amber); }
.br-t { font: 400 15px/1.5 var(--f-ui); color: var(--text-dim); }
.br-t b { font-weight: 600; color: var(--text); }
.br-ill { width: 64px; height: 40px; overflow: visible; }
.il-track, .il-rail { stroke: rgba(238, 241, 250, 0.3); stroke-width: 2; stroke-linecap: round; }
.il-pin { stroke: #EEF1FA; stroke-width: 2; stroke-linecap: round; }
.il-dot { fill: var(--amber); }
.il-range { fill: var(--c-snug); }
.il-tick { stroke: rgba(238, 241, 250, 0.4); stroke-width: 1; }
.il-climb { stroke: var(--amber); stroke-width: 2; stroke-linecap: round; }
.il-env { fill: var(--ember); }
.il-basket { fill: #8A5A34; }
.il-earth { fill: none; stroke: rgba(120, 180, 255, 0.7); stroke-width: 2; }
.il-karman { stroke: var(--amber); stroke-width: 1.2; stroke-dasharray: 3 3; }
.il-lbl { font: 600 6px var(--f-mono); fill: var(--amber); }
.brief li.br-ladder-row { display: block; border-top: 0; padding: 0 0 14px 42px; }
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; height: 92px; }
.lad { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.lad b { font: 700 16px/1 var(--f-display); color: var(--c); }
.lad i { width: 100%; height: calc(48px * var(--h) / 100); border-radius: 5px 5px 2px 2px; background: var(--c); opacity: 0.85; }
.lad em { font: 600 11px/1 var(--f-ui); font-style: normal; color: var(--text-dim); }
.br-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
@media (max-width: 360px) { .br-cards { grid-template-columns: 1fr; } }
.br-card { padding: 12px; border-radius: 12px; background: var(--grain); color: var(--ink); }
.br-tag { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1 var(--f-mono); letter-spacing: 0.08em; }
.br-tag svg { width: 13px; height: 13px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.br-card p { margin: 8px 0 0; font: 400 14px/1.4 var(--f-ui); }
.why { position: relative; overflow: hidden; margin: 16px 0 0; padding: 40px 16px 16px; border-radius: 14px; background: linear-gradient(#0B1030, #121A44); border: 1px solid rgba(255, 255, 255, 0.08); }
.why-arc { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 60px; }
.why-earth { fill: none; stroke: rgba(120, 180, 255, 0.35); stroke-width: 2; }
.why-line { fill: none; stroke: var(--amber); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.8; }
.why-km { position: absolute; right: 14px; top: 8px; font: 500 10px/1 var(--f-mono); color: var(--amber); }
.why h3 { margin: 0 0 6px; font: 800 22px/1 var(--f-display); letter-spacing: 0.04em; color: var(--amber); }
.why p { margin: 0; font: 400 14px/1.5 var(--f-ui); color: var(--text-dim); }
.br-foot { position: sticky; bottom: -1px; margin: 18px -20px -20px; padding: 24px 20px 20px; background: linear-gradient(to bottom, rgba(10, 13, 28, 0), rgba(10, 13, 28, 0.95) 24px); }
.ready-ticket { --cut: 78%; position: relative; display: flex; align-items: stretch; width: 100%; height: 64px; padding: 0; border: 0; border-radius: 10px; background: var(--grain); color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); transition: transform var(--d-press), box-shadow var(--d-press);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat; }
.ready-ticket::after { content: ""; position: absolute; left: var(--cut); top: 10px; bottom: 10px; border-left: 1.5px dashed rgba(30, 42, 85, 0.35); }
.ready-ticket:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.rt-main { flex: 0 0 var(--cut); display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 22px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; }
.rt-main svg { width: 18px; height: 18px; fill: var(--ember); }
.rt-stub { flex: 1; display: grid; place-items: center; font: 500 11px/1 var(--f-mono); letter-spacing: 0.06em; transition: transform 220ms var(--ease-out), opacity 220ms; }
.ready-ticket.torn .rt-stub { transform: translateX(14px) rotate(8deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .licence { animation: none; } .rt-stub { transition: none; } }

.sheet:focus { outline: none; }
.legstrip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.leg-tile { height: 58px; gap: 4px; }
.leg-tile .lt-pts { font-size: 12px; }

/* ==========================================================================
   v9 · Archive, Keep flying, paywall, report link
   ========================================================================== */
.home .home-status { margin-top: 8px; }
.home-top { align-items: center; }

/* Keep flying: a dark boarding pass (the night sky edition) */
.keep-ticket { --cut: 78%; position: relative; display: flex; align-items: stretch; width: 100%; height: 58px; margin-top: 16px; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(100deg, #1C2758, #2A2F6A 60%, #3B2E62); color: #FFF4E2;
  box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.35), 0 10px 26px rgba(10, 12, 40, 0.45);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
  transition: transform var(--d-press) var(--ease-out), filter var(--d-press); }
.keep-ticket::after { content: ""; position: absolute; left: var(--cut); top: 10px; bottom: 10px; border-left: 1.5px dashed rgba(255, 181, 71, 0.45); }
.keep-ticket:hover { filter: brightness(1.12); }
.keep-ticket:active { transform: scale(0.985); }
.kt-main { flex: 0 0 var(--cut); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 18px; text-align: left; }
.kt-main b { font: 800 21px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.kt-main small { font: 500 12px/1 var(--f-ui); color: rgba(255, 244, 226, 0.7); }
.kt-stub { flex: 1; display: grid; place-items: center; font: 800 22px/1 var(--f-display); letter-spacing: 0.06em; color: var(--amber); }
.kt-stub svg { width: 20px; height: 20px; fill: none; stroke: var(--amber); stroke-width: 1.8; }
.link-btn { display: block; margin: 12px auto 0; padding: 4px 6px; border: 0; background: none; color: var(--text-dim); font: 500 13px/1.3 var(--f-ui); text-decoration: underline; text-decoration-color: rgba(238, 241, 250, 0.25); text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--text); }
.link-btn[hidden] { display: none; }


/* Archive calendar */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.cal-nav b { font: 800 22px/1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
.cal-nav .icon-btn { width: 36px; height: 36px; font-size: 20px; color: var(--text); }
.cal-nav .icon-btn:disabled { opacity: 0.25; pointer-events: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font: 600 10px/1 var(--f-mono); color: var(--text-faint); padding-bottom: 4px; }
.cal-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; aspect-ratio: 1 / 1.1; border-radius: 10px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; padding: 0; }
.cal-day b { font: 700 16px/1 var(--f-display); }
.cal-day small { font: 600 9.5px/1 var(--f-ui); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cal-day.off { border-color: transparent; background: none; color: rgba(224, 230, 248, 0.18); cursor: default; }
.cal-day.played { background: var(--grain); color: var(--ink); border-color: transparent; }
.cal-day.played small { color: #A0602A; font-weight: 700; }
.cal-day.today { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.cal-day.today small { color: var(--amber); }
.cal-day.locked { opacity: 0.55; }
.cal-day small.lock { width: 10px; height: 11px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v10H5V11a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v10H5V11a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cal-day:not(.off):hover { border-color: rgba(255, 255, 255, 0.35); }
.cal-key { margin: 14px 0 4px; font: 400 13px/1.45 var(--f-ui); color: var(--text-dim); }

/* Paywall */
.pay-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pay-list li { position: relative; padding-left: 26px; font: 400 15px/1.45 var(--f-ui); color: var(--text-dim); }
.pay-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, var(--amber) 0 3px, transparent 3.5px), rgba(255, 181, 71, 0.15); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.5); }
.pay-list b { color: var(--text); font-weight: 600; }
.pay-note { margin: 14px 0 0; font: 500 13px/1.3 var(--f-ui); color: var(--amber); }
.pay-cta { margin-top: 18px; min-height: 64px; display: grid; place-items: center; }
.buy-ticket { --cut: 70%; position: relative; display: flex; align-items: stretch; width: 100%; height: 64px; padding: 0; border: 0; border-radius: 10px; background: var(--grain); color: var(--ink); cursor: pointer;
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, transparent 7px, #000 7.5px) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, transparent 7px, #000 7.5px) bottom / 100% 51% no-repeat; }
.buy-ticket::after { content: ""; position: absolute; left: var(--cut); top: 10px; bottom: 10px; border-left: 1.5px dashed rgba(30, 42, 85, 0.35); }
.buy-ticket:active { transform: translateY(1px); }
.bt-main { flex: 0 0 var(--cut); display: grid; place-items: center; font: 800 21px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; }
.bt-stub { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.bt-stub b { font: 800 22px/1 var(--f-display); }
.bt-stub small { font: 500 9.5px/1 var(--f-mono); letter-spacing: 0.08em; opacity: 0.6; }
.gsi[hidden], .buy-ticket[hidden] { display: none; }
.pay-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; margin-top: 6px; }
.pay-links .link-btn { margin-top: 8px; }
.code-form { display: flex; gap: 8px; margin-top: 12px; }
.code-form[hidden] { display: none; }
.code-form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--hairline-strong); background: rgba(255, 255, 255, 0.05); color: var(--text); font: 600 15px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.code-go { height: 44px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--amber); color: var(--on-amber); font: 700 14px/1 var(--f-ui); cursor: pointer; }
.pay-fine { margin: 16px 0 0; font: 400 11.5px/1.5 var(--f-ui); color: var(--text-faint); text-align: center; }
.pay-fine a { color: var(--text-dim); }


/* Krillion-style footer line: tiny mono caps, links underlined */
.site-foot { margin: 18px 0 2px; text-align: center; font: 500 10.5px/1.6 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(224, 230, 248, 0.38); }
.site-foot a { color: rgba(224, 230, 248, 0.7); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(224, 230, 248, 0.3); }
.site-foot a:hover { color: var(--amber); }

/* Archive: a tiny tear-off desk calendar leaf showing today's date */
.cal-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: rgba(255, 255, 255, 0.05); color: var(--text); font: 600 12.5px/1 var(--f-ui); cursor: pointer; transition: background var(--d-press); }
.cal-btn:hover { background: rgba(255, 255, 255, 0.1); }
.cal-btn:hover .leaf { transform: rotate(-6deg); }
.leaf { position: relative; display: flex; flex-direction: column; width: 26px; height: 28px; border-radius: 5px; overflow: hidden; background: var(--grain); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); transform: rotate(-3deg); transition: transform var(--d-state) var(--ease-spring); }
.leaf::before, .leaf::after { content: ""; position: absolute; top: 1.5px; width: 3px; height: 3px; border-radius: 50%; background: #0A0D1C; }
.leaf::before { left: 6px; } .leaf::after { right: 6px; }
.leaf i { display: block; height: 10px; padding-top: 1px; background: var(--ember); color: #FFF4E2; font: 700 6.5px/9px var(--f-mono); font-style: normal; letter-spacing: 0.06em; text-align: center; }
.leaf b { flex: 1; display: grid; place-items: center; font: 800 15px/1 var(--f-display); color: var(--ink); }

/* Copy passport: an ink stamp pressed onto the page itself */
.pp-legend { padding-right: 84px; }
.pp-stamp { position: absolute; right: 14px; bottom: 12px; width: 78px; height: 78px; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(-12deg); transition: transform var(--d-state) var(--ease-spring); }
.pp-stamp svg { width: 100%; height: 100%; overflow: visible; }
.pps-ring { fill: rgba(255, 106, 61, 0.06); stroke: var(--ember); stroke-width: 3.5; }
.pps-ring.thin { fill: none; stroke-width: 1.2; }
.pps-txt { font: 700 9.5px var(--f-mono); letter-spacing: 0.12em; fill: var(--ember); }
.pps-ico { fill: none; stroke: var(--ember); stroke-width: 2.6; stroke-linejoin: round; }
.pp-stamp:hover { transform: rotate(-4deg) scale(1.06); }
.pp-stamp.thunk { animation: thunk 380ms var(--ease-out); }
@keyframes thunk { 0% { transform: rotate(-12deg) scale(1.3); opacity: 0.6; } 55% { transform: rotate(-12deg) scale(0.92); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); } }

/* ================= v10 · round card "flight strip" (keep last) ================= */
/* ==========================================================================
   KÁRMÁN · round card v5 "flight strip"
   Append to the END of web/css/ui.css (it overrides the v4 round rules).

   The card reads like a boarding pass laid on an instrument panel:
     stub row   chronometer dial · leg + category over a 7-waypoint route · clue tag
     ---- perforation (notches cut into the card edge) ----
     body       question · scale hint (serif annotation) · range readout
                five-way width selector (one switch, not five cards)
                keypad, with the Lock ticket whose stub shows what you're betting

   Driven by round.js through:
     .round  --left       0..1, fraction of the 30 s remaining (set every frame)
     .round  .t-mid       ≤ 15 s left
     .round  .t-low       ≤ 5 s left   (replaces .low-time)
     #round-timer .beat   re-added on each whole second while .t-low
     #btn-clue[data-state] ready | armed | on | spent
   ========================================================================== */

.round { --left: 1; --perf-y: 74px; padding-top: 14px; }

/* ---------------------------------------------------------------- stub row */
.round .round-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; height: 48px; min-height: 0; margin: 0 0 24px;
}

/* Leg block: "LEG 3 / 7" over the route line */
.round .leg-block { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.round .cat-tag {
  display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: none;
  font: 800 15px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); white-space: nowrap; overflow: hidden;
}
.round .cat-tag .leg-no { color: var(--amber); flex: none; }
.round .cat-tag .leg-of { color: var(--text-faint); font-weight: 700; margin-left: -3px; }
.round .cat-tag .leg-cat { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }

/* Route: 7 waypoints on a dashed line, flown legs filled in their width colour */
.round .legs {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  gap: 0; width: 100%; max-width: 150px; height: 8px; margin: 0; padding: 0; list-style: none;
}
.round .legs::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 0;
  border-top: 1.5px dashed rgba(238, 241, 250, 0.22);
}
.round .leg {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: var(--night); box-shadow: inset 0 0 0 1.5px rgba(238, 241, 250, 0.3);
  transition: background var(--d-state), box-shadow var(--d-state);
}
.round .leg-hit { background: var(--c); box-shadow: none; }
.round .leg-miss { background: var(--night); box-shadow: inset 0 0 0 1.5px var(--c-miss); }
.round .leg-miss::after { /* a small × through a missed waypoint */
  content: ""; position: absolute; inset: 3px 0 auto; height: 1.5px; background: var(--c-miss); transform: rotate(-45deg);
}
.round .leg-now { width: 9px; height: 9px; background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.22); }

/* ---------------------------------------------------------------- chronometer
   A 48 px aviation clock: 30 second ticks on the bezel, an arc of what's left,
   the whole seconds in the middle. Calm (cream), mid (amber), last 5 s (ember). */
.round .round-timer {
  --arc: rgba(243, 233, 214, 0.9);
  --face: rgba(6, 8, 20, 0.72);
  position: relative; display: grid; place-items: center;
  width: 48px; height: 48px; margin: 0; border-radius: 50%;
  background: var(--face);
  box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 0 0 0 transparent;
  color: var(--text); font: 800 21px/1 var(--f-display); font-variant-numeric: tabular-nums;
  transition: box-shadow var(--d-state), color var(--d-state);
}
.round .round-timer:empty { display: grid; }
/* the arc of time remaining; its leading edge moves clockwise like a sweep hand */
.round .round-timer::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(238, 241, 250, 0.07) calc((1 - var(--left)) * 360deg), var(--arc) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  transition: background var(--d-state);
}
/* the bezel: 30 second ticks, longer every 5 s */
.round .round-timer::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background:
    repeating-conic-gradient(from -1deg, rgba(238, 241, 250, 0.55) 0 2deg, transparent 2deg 60deg),
    repeating-conic-gradient(from -0.6deg, rgba(238, 241, 250, 0.22) 0 1.2deg, transparent 1.2deg 12deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.round .round-timer b { position: relative; z-index: 1; font: inherit; margin: 0; color: inherit; letter-spacing: 0.01em; }
.round.t-mid .round-timer { --arc: var(--amber); }
.round.t-low .round-timer {
  --arc: var(--ember); color: var(--ember);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 61, 0.55), 0 0 18px rgba(255, 106, 61, 0.35);
}
.round.t-low .round-timer.beat b { animation: beat 1000ms var(--ease-out); }
@keyframes beat { 0% { transform: scale(1.22); } 35% { transform: scale(1); } }
.round.is-locked .round-timer { opacity: 0.35; }

/* ---------------------------------------------------------------- clue tag
   A small paper luggage tag with a tear-off stub. The stub is the price. */
.round .clue-tag {
  --paper-ink: #14213D;
  position: relative; display: flex; align-items: stretch;
  height: 36px; padding: 0; border: 0; border-radius: 7px;
  background: var(--paper); color: var(--paper-ink); cursor: pointer;
  font: inherit;
  -webkit-mask: radial-gradient(circle at var(--cut, 58%) 0, transparent 4px, #000 4.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut, 58%) 100%, transparent 4px, #000 4.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut, 58%) 0, transparent 4px, #000 4.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut, 58%) 100%, transparent 4px, #000 4.5px) bottom / 100% 51% no-repeat;
  transition: transform var(--d-press) var(--ease-out), background var(--d-state), opacity var(--d-state);
}
.round .clue-tag::after { /* perforation */
  content: ""; position: absolute; left: var(--cut, 58%); top: 7px; bottom: 7px;
  border-left: 1.5px dashed rgba(20, 33, 61, 0.35);
}
.round .clue-tag:active { transform: scale(0.96); }
.round .ct-main {
  display: flex; align-items: center; gap: 6px; padding: 0 9px 0 10px;
  font: 800 15px/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.round .ct-main svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.round .ct-stub {
  display: flex; align-items: center; justify-content: center; padding: 0 9px 0 10px;
  font: 800 15px/1 var(--f-display); letter-spacing: 0.02em; white-space: nowrap;
  color: rgba(20, 33, 61, 0.62); transform-origin: 0 100%;
  transition: transform var(--d-state) var(--ease-out);
}
.round .ct-stub small { font: 600 10px/1 var(--f-ui); letter-spacing: 0.04em; margin-left: 3px; }
.round .clue-tag:hover { filter: brightness(1.05); }

/* armed: the tag turns amber and the stub starts to tear */
.round .clue-tag[data-state="armed"] { background: var(--amber); --paper-ink: var(--on-amber); }
.round .clue-tag[data-state="armed"] .ct-stub { transform: rotate(9deg) translate(1px, -1px); color: var(--on-amber); }
.round .clue-tag[data-state="armed"]::after { border-color: rgba(29, 18, 4, 0.45); }

/* on (this leg): the stub is gone, the tag hangs outlined in amber */
.round .clue-tag[data-state="on"] {
  background: transparent; color: var(--amber); cursor: default; -webkit-mask: none; mask: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 181, 71, 0.75);
}
.round .clue-tag[data-state="on"]::after, .round .clue-tag[data-state="on"] .ct-stub { display: none; }

/* spent (used on another leg): a voided ghost of the tag */
.round .clue-tag[data-state="spent"] {
  background: transparent; color: var(--text-faint); cursor: default; -webkit-mask: none; mask: none;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.round .clue-tag[data-state="spent"]::after, .round .clue-tag[data-state="spent"] .ct-stub { display: none; }
.round .clue-tag[data-state="spent"] .ct-main { font: 600 12px/1 var(--f-ui); letter-spacing: 0; text-transform: none; }
.round .clue-tag:disabled { pointer-events: none; }

/* ---------------------------------------------------------------- perforation
   The dashed tear line between the stub row and the body. The notches are cut
   into #dock itself (see body[data-screen="round"] #dock below). */
.round .round-head::after {
  content: ""; position: absolute; left: 0; right: 0; top: var(--perf-y); height: 0;
  border-top: 1.5px dashed rgba(238, 241, 250, 0.13);
  pointer-events: none;
}
body[data-screen="round"] #dock {
  -webkit-mask: radial-gradient(circle at 0 var(--perf-y, 74px), transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% var(--perf-y, 74px), transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 var(--perf-y, 74px), transparent 9px, #000 9.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% var(--perf-y, 74px), transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
}

/* ---------------------------------------------------------------- question + hint */
.round .question { margin: 0 0 6px; font: 600 19px/1.25 var(--f-ui); letter-spacing: -0.005em; color: var(--text); text-wrap: balance; }
.round .hint {
  margin: 0 0 14px; font: 400 italic 16px/1.25 var(--f-serif); color: rgba(238, 241, 250, 0.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the clue, once bought, replaces the scale hint as an amber dispatch */
.round .hint.is-clue {
  display: block; white-space: normal;
  font: 500 15px/1.25 var(--f-ui); font-style: normal; color: #FFD48A;
  padding: 5px 0 5px 10px; border-left: 2px solid var(--amber);
}
.round .hint.is-clue > b:first-child { margin-right: 6px; font: 800 13px/1 var(--f-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.round .hint.is-clue b { font-weight: 700; color: #FFE6BA; }
/* while armed: the cost, spelled out, for 2.5 s */
.round .hint.is-cost { font: 500 15px/1.25 var(--f-ui); font-style: normal; color: var(--amber); white-space: normal; }

/* ---------------------------------------------------------------- readout
   low ├ - - - 1,896 - - - ┤ high : the scoring range as a bracketed span */
.round .readout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: 10px; min-height: 66px; margin: 0;
}
.round .r-edge {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font: 700 clamp(22px, 7vw, 28px)/1 var(--f-display); color: rgba(238, 241, 250, 0.8); font-variant-numeric: tabular-nums;
}
.round .r-edge::before, .round .r-edge::after { content: none; }
.round .r-lo::after, .round .r-hi::before {
  content: ""; display: block; flex: 1; min-width: 12px; height: 12px;
  background:
    linear-gradient(rgba(238, 241, 250, 0.4), rgba(238, 241, 250, 0.4)) var(--cap) / 1.5px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(238, 241, 250, 0.32) 0 5px, transparent 5px 9px) center / 100% 1.5px no-repeat;
}
.round .r-lo::after { --cap: left center; }
.round .r-hi::before { --cap: right center; }
.round .r-hi { justify-content: flex-end; }
.round .r-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.round .guess { font: 800 clamp(40px, 12.5vw, 50px)/0.95 var(--f-display); color: var(--amber); font-variant-numeric: tabular-nums; text-shadow: none; }
.round .unit-toggle { padding: 3px 7px; border: 0; background: none; font: 600 12px/1 var(--f-ui); color: var(--text-dim); border-radius: 6px; }
.round .unit-toggle.swap { background: rgba(255, 255, 255, 0.07); }
.round.empty .r-edge { color: rgba(238, 241, 250, 0.25); }

/* ---------------------------------------------------------------- width selector
   One five-position switch. Lit segment = your width, filled in its colour. */
.round .wbtns {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  margin-top: 14px; padding: 3px; border-radius: 13px;
  background: rgba(4, 6, 16, 0.45); box-shadow: inset 0 0 0 1px var(--hairline);
}
.round .wbtn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 48px; padding: 0 2px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-dim); box-shadow: none; cursor: pointer;
  transition: background var(--d-state) var(--ease-out), color var(--d-state);
}
.round .wbtn + .wbtn::before { /* hairline dividers between unlit segments */
  content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 1px; background: var(--hairline);
}
.round .wbtn.on::before, .round .wbtn.on + .wbtn::before { display: none; }
.round .wbtn span { font: 600 11.5px/1 var(--f-ui); }
.round .wbtn b { font: 800 17px/1 var(--f-display); letter-spacing: 0.02em; color: var(--c); font-variant-numeric: tabular-nums; }
.round .wbtn:hover { background: rgba(255, 255, 255, 0.05); }
.round .wbtn.on { background: var(--c); color: rgba(10, 13, 28, 0.72); box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 28%, transparent); }
.round .wbtn.on b { color: var(--night); }
.round .wbtn:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }

/* ---------------------------------------------------------------- keypad + lock ticket */
.round .controls { padding-top: 14px; }
.round .keypad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.round .key { height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); font: 600 19px/1 var(--f-ui); }
.round .key-del, .round .key-dot { background: rgba(255, 255, 255, 0.035); }
.round .key-lock {
  --cut: 70%;
  grid-column: span 3; position: relative; display: flex; align-items: stretch; justify-content: flex-start;
  height: 44px; min-height: 44px; padding: 0; gap: 0; border: 0; border-radius: 10px;
  background: var(--amber); color: var(--on-amber); box-shadow: 0 6px 18px rgba(255, 160, 60, 0.22);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 5px, #000 5.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 5px, #000 5.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, transparent 5px, #000 5.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 5px, #000 5.5px) bottom / 100% 51% no-repeat;
}
.round .key-lock::after { content: ""; position: absolute; left: var(--cut); top: 8px; bottom: 8px; border-left: 1.5px dashed rgba(29, 18, 4, 0.35); }
.round .kl-main { flex: 0 0 var(--cut); display: flex; align-items: center; justify-content: center; font: 650 16px/1 var(--f-ui); }
.round .kl-stub { flex: 1; display: flex; align-items: center; justify-content: center; font: 800 17px/1 var(--f-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.round.empty .key-lock { background: rgba(255, 181, 71, 0.35); box-shadow: none; }
.round.t-low .key-lock { background: var(--ember); }

@media (pointer: fine) {
  .round .key:not(.key-lock) { display: none; }
  .round .key-lock { grid-column: 1 / -1; height: 52px; --cut: 78%; }
  .round .kl-main { font-size: 17px; }
}

/* ---------------------------------------------------------------- short phones */
@media (max-height: 700px) {
  .round { --perf-y: 66px; }
  .round .round-head { height: 42px; margin-bottom: 20px; }
  .round .round-timer { width: 42px; height: 42px; font-size: 19px; }
  .round .question { font-size: 17px; }
  .round .hint { font-size: 15px; margin-bottom: 10px; }
  .round .key, .round .key-lock { height: 38px; min-height: 38px; }
  .round .readout { min-height: 50px; }
  .round .controls { padding-top: 8px; }
  .round .keypad { gap: 5px; }
}
/* Never squash rows into each other: if a card is ever too short, it scrolls */
.round > * { flex-shrink: 0; }

/* ---------------------------------------------------------------- reduced motion
   The dial still drains (stepped per second by round.js), still changes colour;
   it just never pulses, and the clue stub does not tilt. */
@media (prefers-reduced-motion: reduce) {
  .round.t-low .round-timer.beat b { animation: none; }
  .round .clue-tag[data-state="armed"] .ct-stub { transform: none; }
  .round .round-timer, .round .round-timer::before, .round .wbtn, .round .clue-tag { transition: none; }
}
.round.is-locked .clue-tag { opacity: 0.45; pointer-events: none; }

/* ================= v11 · results boarding pass, elevated card, menu, leg transition (keep last) ================= */
/* ================= v11 · elevated card, percentile gauge, leg transition, menu (keep last) ================= */
/* ==========================================================================
   KÁRMÁN · v11
   Append to the END of web/css/ui.css (after the v10 round-card block).

   1  The card surface: deeper night glass, a burner-lit top rim, a bevel.
   2  Results: the percentile gauge (replaces the histogram + median),
      a vertical perforation between the two desktop columns, a calmer
      answers list with a waypoint gutter.
   3  Round card: lifted keys, Lock / Next tickets with paper depth.
   4  Leg-to-leg transition: .leg-out → .leg-in on #screen-round.
   5  Menu: #btn-menu in the top bar, #sheet-menu (phone sheet, desktop popover).
   ========================================================================== */

/* Lets the dial arc animate (leg transition) instead of jumping. */
@property --left { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------------------------------------------------------------- 1 · surface */
#dock {
  background:
    linear-gradient(180deg, rgba(27, 33, 68, 0.80) 0%, rgba(15, 19, 42, 0.86) 34%, rgba(9, 11, 26, 0.93) 100%);
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  border-color: rgba(226, 232, 255, 0.13);
  box-shadow:
    0 -20px 60px rgba(2, 4, 14, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
/* The burner catches the card's top rim: one warm hairline, brightest in the middle. */
#dock::before {
  content: ""; position: absolute; z-index: 3; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 130, 0.55) 30%, rgba(255, 214, 160, 0.8) 50%, rgba(255, 200, 130, 0.55) 70%, transparent);
  pointer-events: none;
}
/* …and a faint warm wash spills a little way down from it. */
#dock::after {
  content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 140px;
  background: radial-gradient(55% 100% at 50% 0, rgba(255, 170, 80, 0.075), transparent 72%);
  pointer-events: none;
}
#dock > .screen { z-index: 1; }
@media (min-width: 720px) {
  #dock {
    box-shadow:
      0 30px 80px rgba(2, 4, 14, 0.5), 0 2px 6px rgba(2, 4, 14, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  }
}

/* ---------------------------------------------------------------- 2 · results */
.results { padding-top: 24px; }
.results .res-hero { margin-top: 10px; }
.results .res-tier { margin-top: 6px; }

/* The percentile: one figure, one sentence, one gauge.
     .pctl              hidden until stats arrive (or with no data at all)
     .pctl[data-kind]   rank | grounded | first
     --p                0..1, your percentile (drives the gauge)            */
.pctl { --p: 0; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--hairline); }
.pctl[hidden] { display: none; }
.pctl-read { display: flex; align-items: center; gap: 14px; }
.pctl-fig {
  flex: none; display: inline-flex; align-items: baseline;
  font: 800 44px/0.86 var(--f-display); letter-spacing: 0.01em; color: #FFF4E2; font-variant-numeric: tabular-nums;
}
.pctl-fig i { font-style: normal; font-size: 26px; margin-left: 1px; color: var(--amber); }
.pctl-txt { margin: 0; font: 500 14.5px/1.35 var(--f-ui); color: var(--text-dim); text-wrap: balance; }
.pctl-txt b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pctl-txt .sample { margin-left: 4px; vertical-align: 1px; }

/* The gauge: a fine comb of ticks, 0 → 100. Ticks you passed are lit amber; a
   cream needle stands at your percentile. Long ticks every 25. */
.pctl-gauge { position: relative; height: 18px; margin-top: 14px; }
.pctl-gauge::before, .pg-lit {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  /* end tick · long ticks every 25 · short ticks every 2 ("round" fits whole tiles, so they always align) */
  background:
    linear-gradient(currentColor, currentColor) right bottom / 1.5px 100% no-repeat,
    linear-gradient(90deg, currentColor 1.5px, transparent 0) left bottom / 25% 100% round no-repeat,
    linear-gradient(90deg, currentColor 1px, transparent 0) left bottom / 2% 9px round no-repeat;
}
.pctl-gauge::before { color: rgba(224, 230, 248, 0.2); }
.pg-lit {
  display: block; color: var(--amber);
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
  filter: drop-shadow(0 0 4px rgba(255, 181, 71, 0.45));
}
.pg-needle {
  position: absolute; bottom: -3px; left: calc(var(--p) * 100%); width: 2px; height: 24px; margin-left: -1px;
  border-radius: 1px; background: #FFF4E2; box-shadow: 0 0 0 2px rgba(9, 11, 26, 0.9);
}
.pg-needle::after { /* the head of the needle */
  content: ""; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: #FFF4E2; box-shadow: 0 0 0 2px rgba(9, 11, 26, 0.9);
}
/* Arrival: the lit comb sweeps from 0 to you while the figure counts up (ui.js). */
.pctl.sweep .pg-lit { animation: pgSweep 900ms var(--ease-out) 250ms both; }
.pctl.sweep .pg-needle { animation: pgNeedle 900ms var(--ease-out) 250ms both; }
@keyframes pgSweep { from { clip-path: inset(0 100% 0 0); } }
@keyframes pgNeedle { from { left: 0; } }

/* Grounded (0 points): no figure, the needle rests at the far left. */
.pctl[data-kind="grounded"] .pctl-fig, .pctl[data-kind="first"] .pctl-fig { display: none; }
.pctl[data-kind="grounded"] .pg-needle { background: var(--c-miss); }
.pctl[data-kind="grounded"] .pg-needle::after { background: var(--c-miss); }
/* Only you so far: a single line, no gauge. */
.pctl[data-kind="first"] .pctl-gauge { display: none; }
.pctl[data-kind="first"] .pctl-txt { color: var(--text-dim); }

.results .res-note { margin: 16px 0 0; }
.results .legstrip { margin-top: 24px; }
.results .keep-ticket { margin-top: 22px; }
.results .ticket-row { margin-top: 10px; }
.results .passport-row { margin-top: 10px; }
.results .res-foot { margin-top: 18px; }

/* Desktop: a two-column boarding pass. The tear line runs between your flight
   and the answers, with notches cut into the card's top and bottom edges. */
@media (min-width: 1024px) {
  body[data-screen="results"] #dock {
    --split: 446px;
    width: min(980px, calc(100% - 48px));
    -webkit-mask: radial-gradient(circle at var(--split) 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat,
                  radial-gradient(circle at var(--split) 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle at var(--split) 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat,
                  radial-gradient(circle at var(--split) 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
  }
  .results { grid-template-columns: 420px minmax(0, 1fr); gap: 0; padding: 0 0 0 26px; }
  .results .res-main { padding: 26px 28px 20px 0; }
  .results .res-side { position: relative; padding: 26px 32px 40px 32px; }
  .results::before {
    content: ""; position: absolute; left: 446px; top: 14px; bottom: 14px; width: 0;
    border-left: 1.5px dashed rgba(238, 241, 250, 0.13); pointer-events: none;
  }
  body[data-screen="results"] #dock::before { left: 4%; right: 4%; }
}

/* ---- Answers: a route down the page. Number = waypoint, no row borders. ---- */
.results .recap-head { margin: 0 0 6px; padding-left: 36px; }
.recap { position: relative; }
.recap::before { /* the route the waypoints sit on */
  content: ""; position: absolute; left: 11px; top: 30px; bottom: 30px; width: 0;
  border-left: 1.5px dashed rgba(238, 241, 250, 0.14);
}
.recap .ans, .recap .ans:first-child { position: relative; padding: 22px 0 22px; border-top: 0; }
.recap .ans-top { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; }
.recap .ans-no {
  position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -2px;
  border-radius: 50%; background: #0D1027; box-shadow: inset 0 0 0 1.5px rgba(238, 241, 250, 0.3);
  font: 800 13px/1 var(--f-display); color: var(--text-dim);
}
.recap .ans.hit .ans-no { background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); color: var(--night); }
.recap .ans.none .ans-no { box-shadow: none; outline: 1.5px dashed rgba(238, 241, 250, 0.3); outline-offset: -1.5px; }
.recap .ans-q { font: 500 15px/21px var(--f-ui); color: rgba(238, 241, 250, 0.88); }
.recap .ans-pts { font-size: 20px; line-height: 21px; }
.recap .ans-line { margin: 16px 0 0 36px; }
.recap .ans-fact, .leg-detail .ans-fact {
  margin: 12px 0 0 36px; max-width: 46ch;
  font: 400 13.5px/19px var(--f-ui); color: rgba(224, 230, 248, 0.5);
}
/* The scale's own end labels add text without adding meaning: gone. */
.ans-axis { display: none; }
.leg-detail .ans-line, .leg-detail .ans-fact { margin-left: 28px; }

/* Phone leg tiles: same waypoint language, a touch more air. */
.results .leg-tile { border-color: rgba(226, 232, 255, 0.09); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)); }
.results .legstrip-note { margin-top: 10px; }

/* ---------------------------------------------------------------- 3 · round card */
.round .key {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}
.round .key-del, .round .key-dot { background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.round .wbtns { background: rgba(4, 6, 16, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(226, 232, 255, 0.09); }

/* Lock it in / Next leg: a printed ticket. Lit paper stock with a bevel, a
   darker tear-off stub; the stub carries the bet (a pip in your width's colour). */
.round .key-lock, .round .next-ticket {
  --cut: 70%;
  --stock: linear-gradient(180deg, #FFCB74 0%, #FFB547 52%, #F7A53D 100%);
  background:
    linear-gradient(90deg, transparent var(--cut), rgba(120, 58, 0, 0.12) var(--cut)),
    var(--stock);
  box-shadow: inset 0 1px 0 rgba(255, 246, 224, 0.65), inset 0 -2px 0 rgba(120, 58, 0, 0.22);
  color: var(--on-amber);
  transition: transform var(--d-press) var(--ease-out), filter var(--d-state), background var(--d-state);
}
.round .key-lock:active, .round .next-ticket:active { transform: translateY(1px) scale(0.99); box-shadow: inset 0 1px 0 rgba(255, 246, 224, 0.4), inset 0 0 0 rgba(0, 0, 0, 0); }
.round .key-lock:hover, .round .next-ticket:hover { filter: brightness(1.04); }
/* masks clip outlines: focus is drawn inside the ticket */
.round .key-lock:focus-visible, .round .next-ticket:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--on-amber), inset 0 0 0 4px #FFF4E2; }
.round .kl-main { gap: 8px; font: 650 16px/1 var(--f-ui); letter-spacing: 0.005em; }
.round .kl-main svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.round .kl-stub { gap: 7px; }
.round .kl-stub .kl-pip { width: 9px; height: 9px; border-radius: 50%; background: var(--chip, var(--c-snug)); box-shadow: 0 0 0 1.5px rgba(29, 18, 4, 0.75); }
.round.empty .key-lock {
  --stock: linear-gradient(180deg, rgba(255, 181, 71, 0.16), rgba(255, 181, 71, 0.1));
  background: var(--stock); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.22); color: rgba(255, 196, 120, 0.7); filter: none;
}
.round.empty .key-lock::after { border-color: rgba(255, 181, 71, 0.3); }
.round.empty .kl-pip { opacity: 0.5; box-shadow: none; }
.round.t-low .key-lock { --stock: linear-gradient(180deg, #FF946A 0%, var(--ember) 55%, #EC5631 100%); }
.round.t-low.empty .key-lock { --stock: rgba(255, 106, 61, 0.16); color: #FF9C7E; }

/* Next leg uses the same ticket. Markup: button#btn-next.btn-primary.next-ticket
   > span.kl-main + span.kl-stub (round.js showResult fills both). */
.round .next-ticket {
  --cut: 74%;
  position: relative; display: flex; align-items: stretch; padding: 0; height: 52px; min-height: 52px; border: 0; border-radius: 12px;
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 6px, #000 6.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 6px, #000 6.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, transparent 6px, #000 6.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 6px, #000 6.5px) bottom / 100% 51% no-repeat;
}
.round .next-ticket::after { content: ""; position: absolute; left: var(--cut); top: 9px; bottom: 9px; border-left: 1.5px dashed rgba(29, 18, 4, 0.35); }
.round .next-ticket .kl-main { flex: 0 0 var(--cut); display: flex; align-items: center; justify-content: center; font: 650 17px/1 var(--f-ui); }
.round .next-ticket .kl-stub { flex: 1; display: flex; align-items: center; justify-content: center; font: 800 16px/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; }
.round .next-ticket .kl-stub svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- 4 · leg transition
   round.js advance() drives #screen-round:
     0 ms     .leg-out   the body tears off below the perforation, header flaps shut
     200 ms   render(next leg) · .leg-out → .leg-in
              header flaps open, body feeds up, dial rewinds to full, waypoint lands
     660 ms   .leg-in removed · timer starts
   Any key or tap during the sequence jumps straight to the end. */
.leg-body { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; }
.leg-body > .controls { margin-top: auto; }
.leg-body > * { flex-shrink: 0; }

.round.leg-out .leg-body { animation: tearOut 200ms var(--ease-in) both; transform-origin: 0 0; pointer-events: none; }
@keyframes tearOut { to { opacity: 0; transform: translate(8px, 30px) rotate(2.2deg); } }
.round.leg-out .round-head::after { animation: perfFlash 220ms ease-out both; }
@keyframes perfFlash { 40% { border-top-color: rgba(255, 181, 71, 0.6); } }
.round.leg-out .cat-tag > span { animation: flapOut 140ms var(--ease-in) both; }
.round.leg-out .round-timer b { animation: flapOut 140ms var(--ease-in) both; }
.round .cat-tag > span, .round .round-timer b { transform-origin: 50% 60%; backface-visibility: hidden; }
@keyframes flapOut { to { transform: perspective(200px) rotateX(88deg); opacity: 0.2; } }

.round.leg-in { animation: dialRewind 460ms var(--ease-out) both; }
@keyframes dialRewind { from { --left: 0; } to { --left: 1; } }
.round.leg-in .cat-tag > span, .round.leg-in .round-timer b { animation: flapIn 280ms var(--ease-out) both; }
.round.leg-in .cat-tag > span:nth-child(2) { animation-delay: 40ms; }
.round.leg-in .cat-tag > span:nth-child(3) { animation-delay: 80ms; }
.round.leg-in .round-timer b { animation-delay: 160ms; }
@keyframes flapIn { from { transform: perspective(200px) rotateX(-88deg); opacity: 0.2; } }
.round.leg-in .leg-body { animation: feedIn 380ms var(--ease-out) both; }
@keyframes feedIn { from { opacity: 0; transform: translateY(18px); } }
.round.leg-in .leg-body .wbtns { animation: feedIn 380ms var(--ease-out) 50ms both; }
.round.leg-in .leg-body .controls { animation: feedIn 380ms var(--ease-out) 90ms both; }
.round.leg-in .leg-now { animation: wpArrive 520ms var(--ease-spring) 140ms both; }
@keyframes wpArrive { from { transform: scale(0.2); box-shadow: 0 0 0 0 rgba(255, 181, 71, 0.6); } 60% { box-shadow: 0 0 0 7px rgba(255, 181, 71, 0); } to { transform: none; } }
.round.leg-in .leg-prev { animation: wpDone 360ms var(--ease-spring) 60ms both; }
@keyframes wpDone { from { transform: scale(1.7); } }
/* the old per-render "enter" rise would double up with .leg-in */
.round.leg-in .question, .round.leg-in .readout, .round.leg-in .scale, .round.leg-in .chips { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .round.leg-out .leg-body { animation: fadeOut 120ms linear both; }
  .round.leg-in .leg-body { animation: fadeIn 160ms linear both; }
  @keyframes fadeOut { to { opacity: 0; } }
  .round.leg-in, .round.leg-out .round-head::after,
  .round.leg-out .cat-tag > span, .round.leg-in .cat-tag > span,
  .round.leg-out .round-timer b, .round.leg-in .round-timer b,
  .round.leg-in .leg-body .wbtns, .round.leg-in .leg-body .controls,
  .round.leg-in .leg-now, .round.leg-in .leg-prev { animation: none; }
}

/* ---------------------------------------------------------------- 5 · menu */
/* Top bar: wordmark · streak · Menu. Sound, logbook and help moved into the menu. */
.menu-btn {
  height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--hairline-strong);
  background: rgba(10, 13, 30, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--text); font: 600 13px/1 var(--f-ui); cursor: pointer;
  transition: background var(--d-state), transform var(--d-press) var(--ease-out), border-color var(--d-state);
}
.menu-btn:hover { background: rgba(30, 36, 66, 0.6); }
.menu-btn:active { transform: scale(0.95); }
.menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-btn[aria-expanded="true"] { border-color: rgba(255, 181, 71, 0.55); color: var(--amber); }
/* a round is running behind the menu: a small amber "in flight" light on the button */
.menu-btn .mb-live { display: none; width: 6px; height: 6px; margin-left: -2px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
body[data-screen="round"] .menu-btn .mb-live { display: block; }
.top-actions { gap: 8px; }

/* The sheet. Phone: bottom sheet. Desktop: a popover under the button. */
.menu { padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); }
.menu-wrap .sheet {
  background: linear-gradient(180deg, rgba(25, 30, 62, 0.94) 0%, rgba(11, 13, 30, 0.97) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 -20px 60px rgba(2, 4, 14, 0.5);
  position: relative;
}
.menu::before { /* same lit rim as the card */
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 160, 0.7) 50%, transparent);
}
.menu-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.menu-head h2 { margin: 0; font: 800 22px/1 var(--f-display); letter-spacing: 0.1em; text-transform: uppercase; color: #FFF4E2; }
.menu-head .sheet-x { width: 38px; padding: 0; }

/* Resume strip: the flight you left, still running. A dark pass with an amber stub. */
.menu-resume {
  --cut: 76%; --left: 1;
  position: relative; display: flex; align-items: center; width: 100%; height: 64px; margin: 0 0 14px; padding: 0;
  border: 0; border-radius: 12px; cursor: pointer; text-align: left; color: var(--text);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.055) var(--cut), rgba(255, 181, 71, 0.16) var(--cut));
  box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.3);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent 6px, #000 6.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 6px, #000 6.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, transparent 6px, #000 6.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent 6px, #000 6.5px) bottom / 100% 51% no-repeat;
}
.menu-resume[hidden] { display: none; }
.menu-resume::after { content: ""; position: absolute; left: var(--cut); top: 10px; bottom: 10px; border-left: 1.5px dashed rgba(255, 181, 71, 0.45); }
.mr-dial {
  --arc: rgba(243, 233, 214, 0.9);
  position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin: 0 12px 0 13px;
  border-radius: 50%; background: rgba(6, 8, 20, 0.7); box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font: 800 16px/1 var(--f-display); font-variant-numeric: tabular-nums;
}
.mr-dial::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(238, 241, 250, 0.07) calc((1 - var(--left)) * 360deg), var(--arc) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.mr-dial b { position: relative; }
.menu-resume.t-mid .mr-dial { --arc: var(--amber); }
.menu-resume.t-low .mr-dial { --arc: var(--ember); color: var(--ember); }
.mr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mr-text b { font: 800 16px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.mr-text small { font: 500 12.5px/1.2 var(--f-ui); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-go { flex: 0 0 calc(100% - var(--cut)); display: grid; place-items: center; font: 800 16px/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.menu-resume:hover { filter: brightness(1.12); }

/* Tiles: 2 columns. Icon top-left, name bottom-left, state top-right. */
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.menu-tile {
  box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  height: 84px; padding: 13px 14px 13px; border-radius: 14px;
  border: 1px solid rgba(226, 232, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--d-press), border-color var(--d-state), transform var(--d-press) var(--ease-out);
}
.menu-tile:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)); }
.menu-tile:active { transform: scale(0.97); }
.menu-tile > svg { width: 22px; height: 22px; fill: none; stroke: rgba(243, 233, 214, 0.86); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-tile > b { font: 600 15px/1.15 var(--f-ui); }
#mt-unlimited, #mt-archive { display: contents; }
.mt-meta { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--f-ui); color: var(--text-dim); }
/* Current mode: amber edge, amber icon, a live dot. */
.menu-tile[aria-current="page"] { border-color: rgba(255, 181, 71, 0.5); background: linear-gradient(180deg, rgba(255, 181, 71, 0.12), rgba(255, 181, 71, 0.04)); }
.menu-tile[aria-current="page"] > svg { stroke: var(--amber); }
.menu-tile[aria-current="page"] .mt-meta { color: var(--amber); }
.menu-tile[aria-current="page"] .mt-meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
/* Locked: a small paper price stub, like the clue tag. */
.mt-price {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 7px 0 6px; border-radius: 5px; background: var(--paper); color: #14213D;
  font: 800 13px/1 var(--f-display); letter-spacing: 0.04em;
}
.mt-price svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.menu-tile.locked > svg { stroke: rgba(243, 233, 214, 0.5); }
.menu-tile.locked > b { color: var(--text-dim); }

/* Preferences: two small switches, the same five-way-switch language as width. */
.menu-prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pref { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 12px 14px; border-radius: 14px; border: 1px solid rgba(226, 232, 255, 0.09); }
.pref > span { font: 600 12px/1 var(--f-ui); color: var(--text-dim); }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 0; border: 0; border-radius: 10px; background: rgba(4, 6, 16, 0.5); box-shadow: inset 0 0 0 1px var(--hairline); cursor: pointer; }
.seg i { display: grid; place-items: center; height: 28px; border-radius: 8px; font: 600 12.5px/1 var(--f-ui); font-style: normal; color: var(--text-faint); transition: background var(--d-state), color var(--d-state); }
.seg[aria-checked="true"] i:first-child, .seg[aria-checked="false"] i:last-child { background: rgba(243, 233, 214, 0.92); color: #14213D; }
.menu-foot { margin: 16px 0 0; text-align: center; font: 500 12px/1.4 var(--f-ui); color: var(--text-faint); }
.menu-foot a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(224, 230, 248, 0.3); }

/* Desktop / tablet: the same panel as a popover under the button. */
@media (min-width: 720px) {
  .menu-wrap { align-items: flex-start; justify-content: flex-end; padding: calc(env(safe-area-inset-top, 0px) + 58px) 16px 0 0; }
  .menu-wrap.open { background: rgba(4, 6, 16, 0.32); }
  .menu-wrap .sheet {
    width: 384px; max-height: calc(100vh - 80px); border: 1px solid rgba(226, 232, 255, 0.13); border-radius: 20px;
    padding: 18px; transform: translateY(-6px) scale(0.98); opacity: 0; transform-origin: 92% 0;
    transition: transform 220ms var(--ease-out), opacity 160ms ease-out;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 80px rgba(2, 4, 14, 0.55);
  }
  .menu-wrap.open .sheet { transform: none; opacity: 1; }
  .menu-tile { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-wrap .sheet { transition: opacity 120ms linear; transform: none; }
}

/* ================= v12 · paper results pass, cream Lock ticket, histogram (keep last) ================= */
/* ================= v12 · paper Lock ticket, paper results pass, live histogram (keep last) ================= */
/* ==========================================================================
   KÁRMÁN · v12
   Append to the END of web/css/ui.css (after the v11 block).

   1  Lock it in / Next leg: cream boarding-pass stock, navy ink, the bet on
      the tear-off stub. States: empty (blank stock), ready, last 5 s (ember
      ink + ember priority edge), reveal (Next leg).
   2  Results card: a paper boarding pass. Cream stock, faint fibre, navy ink.
      Every dark-glass colour inside #screen-results is re-pointed at ink
      through the custom properties, so older rules follow automatically.
   3  Today's pilots: the live histogram, printed in ink, your bar in amber.
   4  Legs + answers on paper. Desktop answers are ruled like a ledger, the
      waypoint number sitting on each rule.
   5  Tickets, passport and footer on paper.
   ========================================================================== */

:root {
  --stock: #F3E9D6;          /* = --paper */
  --stock-hi: #FAF4E8;
  --stock-lo: #E8DAC0;
  --ink: #14213D;            /* the share ticket's navy */
  --ink-2: rgba(20, 33, 61, 0.72);
  --ink-3: rgba(20, 33, 61, 0.52);
  --ink-rule: rgba(20, 33, 61, 0.14);
  --amber-ink: #B4600C;      /* amber that reads as text on cream */
  --ember-ink: #CC4218;      /* ember that reads as text on cream */
}

/* ---------------------------------------------------------------- 1 · Lock / Next ticket */
.round .key-lock, .round .next-ticket {
  --stock-g: linear-gradient(180deg, #FBF5EA 0%, #F3E9D6 58%, #EBDDC4 100%);
  background:
    linear-gradient(90deg, transparent var(--cut), rgba(20, 33, 61, 0.055) var(--cut)),
    var(--stock-g);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(120, 88, 36, 0.2);
  filter: none;
}
.round .key-lock::after, .round .next-ticket::after { border-left-color: rgba(20, 33, 61, 0.32); }
.round .key-lock .kl-main, .round .next-ticket .kl-main {
  gap: 9px; font: 800 19px/1 var(--f-display); letter-spacing: 0.09em; text-transform: uppercase;
}
.round .key-lock .kl-stub, .round .next-ticket .kl-stub {
  gap: 7px; font: 800 18px/1 var(--f-display); letter-spacing: 0.04em; color: var(--ink);
}
.round .kl-stub .kl-pip {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--chip, var(--c-snug)); box-shadow: 0 0 0 1.5px var(--ink);
}
.round .key-lock:hover, .round .next-ticket:hover { filter: brightness(1.025); }
.round .key-lock:active, .round .next-ticket:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 transparent;
}
.round .key-lock:focus-visible, .round .next-ticket:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--stock-hi), inset 0 0 0 3.5px var(--ink);
}

/* Empty: the same stock, unprinted and in shadow. Clearly a ticket, clearly not ready. */
.round.empty .key-lock {
  --stock-g: linear-gradient(180deg, #D0C6B4 0%, #C3B8A4 100%);
  background:
    linear-gradient(90deg, transparent var(--cut), rgba(20, 33, 61, 0.04) var(--cut)),
    var(--stock-g);
  color: rgba(20, 33, 61, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); filter: none;
}
.round.empty .key-lock::after { border-left-color: rgba(20, 33, 61, 0.22); }
.round.empty .key-lock .kl-main { font: 600 15px/1 var(--f-ui); letter-spacing: 0.01em; text-transform: none; }
.round.empty .key-lock .kl-stub { color: rgba(20, 33, 61, 0.42); }
.round.empty .kl-pip { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(20, 33, 61, 0.38); }

/* Last 5 s: ember ink and an ember priority edge down the left, like a
   rush-handling strip printed on the pass. No orange slab. */
.round.t-low .key-lock {
  --stock-g: linear-gradient(180deg, #FDF2E6 0%, #F6E5D0 58%, #EED6BD 100%);
  background:
    linear-gradient(90deg, var(--ember) 0 6px, transparent 6px),
    repeating-linear-gradient(135deg, rgba(255, 106, 61, 0.9) 0 3px, transparent 3px 6px) 6px 0 / 4px 100% no-repeat,
    linear-gradient(90deg, transparent var(--cut), rgba(204, 66, 24, 0.07) var(--cut)),
    var(--stock-g);
  color: var(--ember-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1.5px rgba(204, 66, 24, 0.55);
}
.round.t-low .key-lock::after { border-left-color: rgba(204, 66, 24, 0.5); }
.round.t-low .key-lock .kl-stub { color: var(--ember-ink); }
.round.t-low .key-lock .kl-pip { box-shadow: 0 0 0 1.5px var(--ember-ink); }
.round.t-low.empty .key-lock {
  --stock-g: linear-gradient(180deg, #CDBDAA 0%, #C0AE99 100%);
  background:
    linear-gradient(90deg, var(--ember) 0 6px, transparent 6px),
    linear-gradient(90deg, transparent var(--cut), rgba(20, 33, 61, 0.04) var(--cut)),
    var(--stock-g);
  color: rgba(160, 50, 20, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* the edge beats with the dial, once a second */
.round.t-low:has(.round-timer.beat) .key-lock { animation: lockBeat 1s var(--ease-out); }
@keyframes lockBeat { 0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 2.5px rgba(255, 106, 61, 0.8); } 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1.5px rgba(204, 66, 24, 0.55); } }

/* Next leg (reveal) rides the same stock; its stub says where you go next. */
.round .next-ticket .kl-main { font-size: 20px; }
.round .next-ticket .kl-stub { font-size: 15px; letter-spacing: 0.1em; color: var(--ink-2); }
.round .next-ticket .kl-stub svg { width: 15px; height: 15px; stroke: var(--ink); }

@media (pointer: fine) {
  .round .key-lock { height: 54px; min-height: 54px; --cut: 80%; }
  .round .key-lock .kl-main { font-size: 21px; }
  .round.empty .key-lock .kl-main { font-size: 16px; }
  .round .next-ticket { --cut: 80%; }
}

/* ---------------------------------------------------------------- 2 · results: a paper pass */
body[data-screen="results"] #dock {
  background: var(--stock);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-top-color: transparent;
  box-shadow: 0 -18px 50px rgba(2, 4, 14, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body[data-screen="results"] #dock::before, body[data-screen="results"] #dock::after { display: none; }

/* The stock: a soft light falloff, a faint fibre speckle (three offset dot
   lattices with co-prime pitches, so the pattern never visibly repeats) and a
   barely-there edge tone. It scrolls with the content, like real paper. */
#screen-results {
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --text-faint: var(--ink-3);
  --hairline: var(--ink-rule);
  --hairline-strong: rgba(20, 33, 61, 0.24);
  --amber: var(--amber-ink);
  --ember: var(--ember-ink);
  /* chip colours, tuned to read on cream (each also gets an ink edge where drawn) */
  --c-wide: #FFFFFF;
  --c-fair: #4A90F2;
  --c-snug: #34B97C;
  --c-tight: #F2C531;
  --c-pinpoint: #EE4A4F;
  --c-miss: #8E95A6;
  color: var(--ink);
  background:
    /* light falls on the top-left of the stock */
    radial-gradient(130% 60% at 12% 0%, rgba(255, 252, 244, 0.7), transparent 62%),
    /* mottling: broad, uneven tone, the way real card stock absorbs ink */
    radial-gradient(38% 26% at 82% 34%, rgba(214, 190, 146, 0.16), transparent 70%),
    radial-gradient(46% 30% at 18% 72%, rgba(214, 190, 146, 0.13), transparent 70%),
    radial-gradient(30% 22% at 64% 88%, rgba(255, 250, 238, 0.4), transparent 70%),
    /* fibre: short, faint strands, each in its own odd-sized tile so the
       layers drift against each other and never line up into a grid */
    radial-gradient(9px 0.8px at 31% 42%, rgba(130, 98, 46, 0.16), transparent) 0 0 / 97px 41px,
    radial-gradient(12px 0.7px at 62% 18%, rgba(130, 98, 46, 0.12), transparent) 0 0 / 131px 59px,
    radial-gradient(0.8px 8px at 44% 66%, rgba(130, 98, 46, 0.12), transparent) 0 0 / 59px 113px,
    radial-gradient(14px 0.9px at 70% 70%, rgba(255, 255, 255, 0.5), transparent) 0 0 / 173px 83px,
    radial-gradient(0.9px 10px at 20% 30%, rgba(255, 255, 255, 0.45), transparent) 0 0 / 151px 127px,
    linear-gradient(180deg, transparent 70%, rgba(214, 196, 160, 0.22));
  background-attachment: local;
}
#screen-results ::selection { background: rgba(255, 181, 71, 0.45); }

#screen-results .eyebrow { color: var(--ember-ink); letter-spacing: 0.1em; }
#screen-results .res-alt { color: var(--ink); text-shadow: none; }
#screen-results .res-unit { color: var(--amber-ink); }
#screen-results .res-tier { color: var(--ink-2); font: 500 15px/1.2 var(--f-ui); }
#screen-results .res-tier em { font: italic 400 1.55rem/1 var(--f-serif); color: var(--ink); }
#screen-results .res-note { color: var(--amber-ink); font-weight: 600; }
#screen-results .sample { border-color: rgba(20, 33, 61, 0.35); color: var(--ink-3); }

/* ---------------------------------------------------------------- 3 · today's pilots */
.pctl { margin-top: 20px; padding-top: 16px; border-top-color: var(--ink-rule); }
#screen-results .pctl-fig { color: var(--ink); }
#screen-results .pctl-fig i { color: var(--amber-ink); }
#screen-results .pctl-txt { color: var(--ink-2); }
#screen-results .pctl-txt b { color: var(--ink); }
.pctl[data-kind="first"] .pctl-read { min-height: 0; }

.crowd-chart { margin: 14px 0 0; }
.crowd-chart:empty { display: none; }
.hist-svg { display: block; width: 100%; height: auto; overflow: visible; }
#screen-results .h-axis { stroke: rgba(20, 33, 61, 0.55); stroke-width: 1; }
#screen-results .h-tickline { stroke: rgba(20, 33, 61, 0.45); stroke-width: 1; }
#screen-results .h-num { font: 600 9px var(--f-ui); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
#screen-results .h-bar { fill: rgba(20, 33, 61, 0.26); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
#screen-results .h-bar.mine { fill: var(--amber-real, #FFB547); stroke: #C26A12; stroke-width: 1; filter: none; }
#screen-results .h-lead { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 1.5 2; opacity: 0.7; }
#screen-results .h-flag { fill: var(--ink); }
#screen-results .h-youlabel { font: 700 8.5px var(--f-ui); letter-spacing: 0.12em; fill: var(--stock); }
#screen-results .h-you { opacity: 0; }
#screen-results .crowd-chart.draw .h-bar { transform: scaleY(1); transition: transform 520ms var(--ease-out); transition-delay: calc(60ms + var(--i) * 16ms); }
#screen-results .crowd-chart.draw .h-you { animation: hFlag 420ms var(--ease-out) 640ms forwards; }
@keyframes hFlag { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pctl[data-kind="first"] .h-bar.mine { fill: #FFB547; }

/* ---------------------------------------------------------------- 4 · legs + answers on paper */
/* Phone leg tiles: little paper chits */
#screen-results .leg-tile {
  border: 1px solid rgba(20, 33, 61, 0.13);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.75), rgba(255, 253, 248, 0.35));
  color: var(--ink);
}
#screen-results .leg-tile:hover { background: rgba(255, 253, 248, 0.95); }
#screen-results .leg-tile.open { border-color: var(--ink); background: #FFFDF8; box-shadow: 0 0 0 1px var(--ink); }
#screen-results .lt-no { color: var(--ink-3); }
#screen-results .leg-tile .lt-glyph { box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.55); border-width: 2px; }
#screen-results .leg-tile.hit .lt-glyph { border-color: var(--c); background: var(--c); box-shadow: 0 0 0 1.5px var(--ink); }
#screen-results .leg-tile.miss .lt-glyph { border-color: rgba(20, 33, 61, 0.3); box-shadow: none; }
#screen-results .leg-tile.none .lt-glyph { border-color: rgba(20, 33, 61, 0.3); box-shadow: none; }
#screen-results .leg-tile .lt-pts { color: var(--amber-ink); }
#screen-results .leg-tile.miss .lt-pts, #screen-results .leg-tile.none .lt-pts { color: var(--ink-3); }
#screen-results .legstrip-note { color: var(--ink-3); }

/* One answer row, on paper */
#screen-results .ans-q, #screen-results .recap .ans-q { color: var(--ink); }
#screen-results .ans.none .ans-q { color: var(--ink-3); }
#screen-results .ans-pts { color: var(--amber-ink); }
#screen-results .ans.miss .ans-pts, #screen-results .ans.none .ans-pts { color: var(--ink-3); }
#screen-results .ans-track { background: rgba(20, 33, 61, 0.18); }
#screen-results .ans-track.dash { background: repeating-linear-gradient(90deg, rgba(20, 33, 61, 0.32) 0 4px, transparent 4px 8px); }
#screen-results .ans-range { background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.5); }
#screen-results .ans.hit .ans-range { box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.55), 0 1px 0 rgba(20, 33, 61, 0.12); }
#screen-results .ans.miss .ans-range { opacity: 1; background: color-mix(in srgb, var(--c) 40%, var(--stock)); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.3); }
#screen-results .ans-gmark { border-top-color: var(--ink); }
#screen-results .ans.miss .ans-gmark { border-top-color: var(--ink-3); }
#screen-results .ans-pin { background: var(--ink); box-shadow: 0 0 0 2px var(--stock); }
/* YOU above, ANSWER below: ink type, the bar carries the colour */
#screen-results .ans-you { color: var(--ink); }
#screen-results .ans.miss .ans-you { color: var(--ink-2); }
#screen-results .ans-you em { color: var(--ink-3); opacity: 1; }
#screen-results .ans-you.none { color: var(--ink-3); }
#screen-results .ans-val { color: var(--ink); }
#screen-results .ans-val em { color: var(--ink-3); }
#screen-results .ans-val small { color: var(--ink-2); }
#screen-results .ans-end { background: var(--stock); color: var(--ink-2); }
#screen-results .ans-off { color: var(--ink-3); }
#screen-results .ans-fact, #screen-results .recap .ans-fact, #screen-results .leg-detail .ans-fact {
  font: italic 400 15px/20px var(--f-serif); color: rgba(20, 33, 61, 0.66);
}
#screen-results .leg-detail .ans { border-top-color: var(--ink-rule); }

/* Desktop answers: a ruled ledger. Every leg opens on a full-width hairline;
   its waypoint number sits ON the rule at the left, its points ON the rule at
   the right, so each entry is bounded and the eye can't slip between two. */
#screen-results .recap::before { display: none; }
#screen-results .recap .ans, #screen-results .recap .ans:first-child { padding: 0 0 26px; border: 0; }
#screen-results .recap .ans:first-child { margin-top: 16px; }
#screen-results .recap .ans-top {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "no rule pts" "q q q";
  gap: 0 10px; align-items: center;
}
#screen-results .recap .ans-top::before {   /* the rule between number and points */
  content: ""; grid-area: rule; height: 0; border-top: 1px solid rgba(20, 33, 61, 0.22);
}
#screen-results .recap .ans-no {
  grid-area: no; position: static; display: grid; place-items: center; width: 26px; height: 26px; margin: 0;
  border-radius: 50%; outline: 0; background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(20, 33, 61, 0.45);
  font: 800 14px/1 var(--f-display); color: var(--ink);
}
#screen-results .recap .ans.hit .ans-no { background: var(--c); box-shadow: inset 0 0 0 1.5px var(--ink); }
#screen-results .recap .ans.none .ans-no { box-shadow: none; outline: 1.5px dashed rgba(20, 33, 61, 0.4); outline-offset: -1.5px; color: var(--ink-3); }
#screen-results .recap .ans-pts { grid-area: pts; font-size: 21px; line-height: 21px; }
#screen-results .recap .ans.miss .ans-pts, #screen-results .recap .ans.none .ans-pts { font-size: 18px; }
#screen-results .recap .ans-q { grid-area: q; margin: 12px 0 0; font: 500 15.5px/22px var(--f-ui); max-width: 54ch; }
#screen-results .recap .ans-line, #screen-results .recap .ans-fact { margin-left: 0; }
#screen-results .recap .ans-line { margin-top: 14px; }
#screen-results .recap-head { padding-left: 0; }
#screen-results .recap-head h3 { color: var(--ink-2); }

/* ---------------------------------------------------------------- 5 · tickets, passport, foot */
/* Phone: the pass tears here; the actions below are its stub. */
.res-tear {
  position: relative; height: 0; margin: 26px -20px 0;
  border-top: 1.5px dashed rgba(20, 33, 61, 0.28);
}
.res-tear::before, .res-tear::after {   /* punched ends, in the sky's colour */
  content: ""; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: #18234A; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.res-tear::before { left: -8px; }
.res-tear::after { right: -8px; }
#screen-results .res-tear + .keep-ticket { margin-top: 24px; }

/* Keep flying stays a night ticket: the one dark object on the paper. */
#screen-results .keep-ticket { --amber: #FFB547; box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.35); }
/* (fix) the main part's padding was added on top of --cut, squeezing the stub ("FREE" clipped) */
.keep-ticket .kt-main { box-sizing: border-box; }
.keep-ticket .kt-stub { font-size: 20px; letter-spacing: 0.05em; white-space: nowrap; }

/* Share + Copy: separate tickets lying on the pass. The row casts the shadow
   because each ticket's mask would clip its own. */
#screen-results .ticket-row { filter: drop-shadow(0 1px 0 rgba(20, 33, 61, 0.12)) drop-shadow(0 6px 10px rgba(80, 56, 20, 0.12)); }
#screen-results .ticket-btn#btn-share { background: linear-gradient(180deg, #FFFDF8, #FBF5EA); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.14); }
#screen-results .ticket-img { background: linear-gradient(180deg, #E3EBF6, #D5E0F0); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.12); }
#screen-results .ticket-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }

#screen-results .passport-row { border-color: rgba(20, 33, 61, 0.13); background: rgba(255, 253, 248, 0.55); color: var(--ink); }
#screen-results .passport-row:hover { background: rgba(255, 253, 248, 0.9); }
#screen-results .passport-row .ink { background: #FFFDF8; }
#screen-results .pr-title { color: var(--ink); }
#screen-results .pr-chev { color: var(--ink-3); }

#screen-results .res-foot { color: var(--ink-3); border-top-color: var(--ink-rule); }
#screen-results .res-foot b { color: var(--ink); }
#screen-results .link-btn { color: var(--ink-2); text-decoration-color: rgba(20, 33, 61, 0.3); }
#screen-results .link-btn:hover { color: var(--ink); }
#screen-results .site-foot { color: var(--ink-3); }
#screen-results .site-foot a { color: var(--ink-2); text-decoration-color: rgba(20, 33, 61, 0.3); }
#screen-results .site-foot a:hover { color: var(--ember-ink); }

/* ---------------------------------------------------------------- desktop: two-column pass */
@media (min-width: 1024px) {
  body[data-screen="results"] #dock {
    box-shadow: 0 30px 80px rgba(2, 4, 14, 0.5), 0 2px 6px rgba(2, 4, 14, 0.25);
  }
  /* The grain belongs to the whole card here: columns scroll on their own. */
  .results::before { border-left-color: rgba(20, 33, 61, 0.26); }
  .res-tear { display: none; }
  #screen-results .res-tear + .keep-ticket { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-results .h-bar { transform: none !important; transition: none !important; }
  #screen-results .h-you { opacity: 1 !important; animation: none !important; }
  .round.t-low .key-lock { animation: none !important; }
}

/* Take-off: the home card slides out of the way for the lift-off, then the round card rises */
#dock { transition: border-color var(--d-state), width var(--d-sheet) var(--ease-out), height var(--d-sheet) var(--ease-out), translate 420ms var(--ease-out), opacity 300ms ease; }
#dock.away { translate: 0 calc(100% + 80px); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #dock { transition: none; } }

/* The question card is a fixed instrument: it never scrolls (wheel or touch). */
#screen-round { overflow: hidden; overscroll-behavior: none; }

/* ================= v13 · passport results (keep last) ================= */
/* ================= v13 · the results pass becomes a passport (keep last) ================= */
/* ==========================================================================
   KÁRMÁN · v13
   Append to the END of web/css/ui.css (after the v12 block).

   The paper results pass from v12 gets a passport's document character:
   1  Security border: a printed rope-and-rail guilloche just inside the
      edge, concentric with the card's corners. One frame on the phone sheet;
      on desktop each page of the open spread has its own.
   2  Silhouette: the pass lies on a short stack of pages (page edges peek
      under the desktop card, above the phone sheet), and the desktop spread
      is bound at a sewn gutter instead of a perforation.
   3  Watermark: the balloon under the Kármán line, printed into the paper.
   4  MRZ: two machine-readable lines at the foot of the pass (#res-mrz).
   Everything is scoped to body[data-screen="results"] / #screen-results.
   ========================================================================== */

#screen-results {
  --mrz-ink: rgba(20, 33, 61, 0.27);
}

/* ---------------------------------------------------------------- 1 · security border */
body[data-screen="results"] #dock::after {
  display: block; content: ""; position: absolute; z-index: 2; pointer-events: none;
  /* corners are 18 px squares cut from the SVG, so the rope's corner arc is
     concentric with the card's 24 px radius */
  top: 6px; left: 6px; right: 6px; bottom: -40px;   /* phone: the frame runs off the bottom of the screen */
  height: auto; width: auto;
  background: none;
  border: 18px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108' viewBox='0 0 108 108'%3E %3Cg id='s'%3E%3Cg fill='none' stroke-width='1.1'%3E %3Cpath stroke='rgba(20,33,61,0.26)' d='M4 36A32 32 0 0 1 36 4H72M16 36A20 20 0 0 1 36 16H72'/%3E %3Cpath stroke='rgba(180,96,12,0.55)' d='M10 36A26 26 0 0 1 36 10C42 4 48 4 54 10S66 16 72 10M36 10C42 16 48 16 54 10S66 4 72 10'/%3E %3C/g%3E%3C/g%3E %3Cuse href='%23s' transform='rotate(90 54 54)'/%3E%3Cuse href='%23s' transform='rotate(180 54 54)'/%3E%3Cuse href='%23s' transform='rotate(270 54 54)'/%3E%3C/svg%3E") 36 / 18px round;
}

/* The pass's top edge fades content out before it reaches the printed rails. */
@media (max-width: 1023.98px) {
  #screen-results {
    -webkit-mask: linear-gradient(180deg, transparent 16px, #000 32px);
            mask: linear-gradient(180deg, transparent 16px, #000 32px);
  }
}

/* ---------------------------------------------------------------- 2 · silhouette */
/* Phone: the sheet is the top page of a short stack; two page edges peek above it. */
body[data-screen="results"] #dock {
  box-shadow:
    0 -1px 0 0 rgba(150, 118, 66, 0.45),
    0 -4px 0 -2px #E9DDC5,
    0 -5px 0 -2px rgba(150, 118, 66, 0.4),
    0 -8px 0 -4px #DFD0B3,
    0 -9px 0 -4px rgba(150, 118, 66, 0.35),
    0 -24px 50px rgba(2, 4, 14, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------- 3 · watermark */
#screen-results::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 22px; right: 8px; width: 168px; height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 260' fill='none' stroke='%2314213D' stroke-width='1.4' stroke-linecap='round'%3E %3Cpath d='M110 44C160 44 190 80 190 122C190 160 152 190 126 214H94C68 190 30 160 30 122C30 80 60 44 110 44Z'/%3E %3Cpath d='M110 44C86 80 84 160 101 214M110 44C134 80 136 160 119 214M110 44C62 72 54 150 94 214M110 44C158 72 166 150 126 214'/%3E %3Cpath d='M94 214L100 236M126 214L120 236'/%3E %3Crect x='99' y='236' width='22' height='15' rx='2.5'/%3E %3C/svg%3E") center / contain no-repeat;
  opacity: 0.075;
}

/* ---------------------------------------------------------------- 4 · MRZ */
.res-mrz {
  container-type: inline-size;
  margin: 26px 0 4px;
  user-select: none;
}
.res-mrz:empty { display: none; }
.res-mrz span {
  display: block; overflow: hidden; white-space: nowrap;
  /* 44 characters exactly fill the line: 3/4 glyph advance, 1/4 tracking */
  font: 500 calc(100cqw / 44 / 0.6 * 0.76) / 1.55 var(--f-mono);
  letter-spacing: calc(100cqw / 44 * 0.24);
  color: var(--mrz-ink);
}

/* ---------------------------------------------------------------- desktop: an open passport */
@media (min-width: 1024px) {
  body[data-screen="results"] #dock {
    /* bound, not torn: no notches, so the page stack and shadow can show */
    -webkit-mask: none; mask: none;
    box-shadow:
      0 1px 0 0 rgba(150, 118, 66, 0.5),
      0 4px 0 -2px #EADFC8,
      0 5px 0 -2px rgba(150, 118, 66, 0.45),
      0 8px 0 -4px #E1D3B7,
      0 9px 0 -4px rgba(150, 118, 66, 0.4),
      /* the cover: navy board just proud of the pages, a gilt hairline on its edge */
      0 8px 0 5px #1B2850,
      0 8px 0 6px rgba(226, 180, 112, 0.5),
      0 34px 80px rgba(2, 4, 14, 0.55),
      0 4px 12px rgba(2, 4, 14, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  /* Two pages, two frames: left (your flight) ends just short of the gutter */
  body[data-screen="results"] #dock::before {
    display: block; content: ""; position: absolute; z-index: 2; pointer-events: none;
    top: 6px; bottom: 6px; left: 6px; right: auto; width: calc(var(--split) - 14px); height: auto; box-sizing: border-box;
    background: none;
    border: 18px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108' viewBox='0 0 108 108'%3E %3Cg id='s'%3E%3Cg fill='none' stroke-width='1.1'%3E %3Cpath stroke='rgba(20,33,61,0.26)' d='M4 36A32 32 0 0 1 36 4H72M16 36A20 20 0 0 1 36 16H72'/%3E %3Cpath stroke='rgba(180,96,12,0.55)' d='M10 36A26 26 0 0 1 36 10C42 4 48 4 54 10S66 16 72 10M36 10C42 16 48 16 54 10S66 4 72 10'/%3E %3C/g%3E%3C/g%3E %3Cuse href='%23s' transform='rotate(90 54 54)'/%3E%3Cuse href='%23s' transform='rotate(180 54 54)'/%3E%3Cuse href='%23s' transform='rotate(270 54 54)'/%3E%3C/svg%3E") 36 / 18px round;
  }
  body[data-screen="results"] #dock::after { left: calc(var(--split) + 8px); bottom: 6px; }

  /* The gutter: a soft fold in the paper with a stitched binding. */
  .results::before {
    left: calc(var(--split, 446px) - 22px); top: 0; bottom: 0; width: 44px;
    border-left: 0;
    background:
      /* the thread: a saddle stitch down the fold */
      repeating-linear-gradient(180deg, rgba(20, 33, 61, 0.5) 0 9px, transparent 9px 15px) 50% 30px / 1.5px calc(100% - 60px) no-repeat,
      /* the fold: shade into the spine, a crease of light either side */
      linear-gradient(90deg,
        transparent 0, rgba(140, 108, 58, 0.05) 30%, rgba(110, 82, 40, 0.16) 47%,
        rgba(20, 33, 61, 0.2) 50%,
        rgba(110, 82, 40, 0.16) 53%, rgba(140, 108, 58, 0.05) 70%, transparent 100%);
  }
  /* The watermark sits on the data page, to the right of the score. */
  #screen-results::after { top: 24px; right: auto; left: 248px; width: 190px; height: 224px; }

  /* Columns fade out before they pass under the printed rails. */
  .results .res-main, .results .res-side {
    -webkit-mask: linear-gradient(180deg, transparent 12px, #000 26px, #000 calc(100% - 26px), transparent calc(100% - 12px));
            mask: linear-gradient(180deg, transparent 12px, #000 26px, #000 calc(100% - 26px), transparent calc(100% - 12px));
  }
  .results .res-main { padding-bottom: 30px; }
  .res-mrz { margin-top: 18px; }
}

@media (min-width: 1024px) and (max-width: 1100px) {
  #screen-results::after { opacity: 0.06; }
}

/* Percentile as one sentence: "You did better than 78% of today's N pilots." */
#screen-results #pctl-txt { font-size: 17px; line-height: 1.35; }
#screen-results #pctl-txt .pctl-inline { font: 800 1.55em/1 var(--f-display); letter-spacing: 0.01em; color: var(--amber-deep); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- unlock page (Krillion-style: a page, not a sales sheet)
   Full screen night, the balloon, one line, one ticket. Prices live only here. */
#sheet-paywall { align-items: center; }
#sheet-paywall.open { background: rgba(5, 7, 18, 0.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#sheet-paywall .sheet.pay {
  position: relative; width: min(440px, calc(100% - 32px)); max-height: none;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 8px 28px; background: none; border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; max-height: 100vh;
  transform: translateY(16px); opacity: 0; transition: transform 320ms var(--ease-out), opacity 240ms ease;
}
#sheet-paywall.open .sheet.pay { transform: none; opacity: 1; }
#sheet-paywall .pay-x { position: fixed; top: 18px; right: 18px; }
.pay-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 30px; }
.pay-balloon { width: 58px; height: 72px; filter: drop-shadow(0 0 18px rgba(255, 106, 61, 0.35)); animation: payfloat 4s ease-in-out infinite; }
@keyframes payfloat { 50% { transform: translateY(-6px); } }
.pay-eyebrow { margin: 6px 0 0; font: 600 11px/1 var(--f-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); }
.pay-title { margin: 0; font: 800 clamp(34px, 9vw, 46px)/0.95 var(--f-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); text-shadow: 0 0 24px rgba(255, 181, 71, 0.25); }
#sheet-paywall .pay-cta { width: 100%; max-width: 360px; }
#sheet-paywall .pay-note { max-width: 34ch; margin: 18px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
#sheet-paywall .pay-links { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
#sheet-paywall .link-btn { font-size: 13px; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
#sheet-paywall .code-form { margin-top: 14px; }
#sheet-paywall .pay-fine { margin-top: 26px; font-size: 11.5px; color: var(--text-faint); max-width: 38ch; }
@media (prefers-reduced-motion: reduce) { .pay-balloon { animation: none; } }

/* ================= v14 · cream paper everywhere, round HUD, minimal help (keep last) ================= */

/* ================= v14 · paper everywhere, round HUD, one-card briefing (keep last) ================= */
/* ==========================================================================
   KÁRMÁN · v14
   Append to the END of web/css/ui.css (after the v13 block).

   One rule for the whole interface now:
     DOCUMENTS are paper   card, sheets, menu, toasts, the top-bar ticket.
                           Cream stock with a faint fibre, navy ink, rules,
                           perforations. The one dark object on any paper is
                           its primary action: a navy ticket (Take off, Lock
                           it in, Next leg, Keep flying, Resume).
     INSTRUMENTS sit on the sky   altimeter, rail, and the new round HUD
                           (a paper dial + the route), drawn in cream ink.
   The sky itself is unchanged.

   1  Tokens: fibre, ink stock, the perforation offsets.
   2  The card (#dock) becomes paper on every screen.
   3  Top bar: streak + Menu as one torn ticket.
   4  Round HUD (#hud): dial, leg, route at the top of the screen.
   5  Round card: clue tag, question, readout, width switch, keypad, Lock.
   6  Reveal on paper.
   7  Home strip.
   8  Sheets: paper pads with a sticky head, safe areas, dvh.
   9  How to fly, 10 Logbook, 11 Archive, 12 Menu, 13 Toast.
   ========================================================================== */

/* ---------------------------------------------------------------- 1 · tokens */
:root {
  /* the stock's fibre: light falloff, mottling, short strands in co-prime tiles */
  --strands:
    radial-gradient(9px 0.8px at 31% 42%, rgba(130, 98, 46, 0.065), transparent) 0 0 / 97px 41px,
    radial-gradient(12px 0.7px at 62% 18%, rgba(130, 98, 46, 0.05), transparent) 0 0 / 131px 59px,
    radial-gradient(0.8px 8px at 44% 66%, rgba(130, 98, 46, 0.05), transparent) 0 0 / 59px 113px,
    radial-gradient(14px 0.9px at 70% 70%, rgba(255, 255, 255, 0.3), transparent) 0 0 / 173px 83px;
  /* the card's stock: light falloff and mottling over the strands */
  --fibre:
    radial-gradient(130% 70% at 12% 0%, rgba(255, 252, 244, 0.6), transparent 62%),
    radial-gradient(40% 30% at 84% 40%, rgba(214, 190, 146, 0.12), transparent 70%),
    radial-gradient(46% 32% at 16% 78%, rgba(214, 190, 146, 0.1), transparent 70%),
    var(--strands);
  --cream: #F6EEDD;                      /* ink on navy stock */
  --navy-stock: linear-gradient(180deg, #24345C 0%, #1A2747 55%, #15203B 100%);
  --amber-real: #FFB547;
  --perf-c: rgba(20, 33, 61, 0.26);      /* a perforation printed on paper */
  /* Round card: the bottom block (width switch + keypad) has fixed heights,
     so the perforation above it is placed from the bottom edge. */
  --kh: 44px;                            /* keypad key height */
  --kg: 6px;                             /* keypad gap */
  --pad-b: calc(env(safe-area-inset-bottom, 0px) + 14px);
  --perf-b: calc(var(--pad-b) + 3 * var(--kh) + 2 * var(--kg) + 12px + 50px + 14px);
  --round-h: clamp(420px, 54svh, 468px);
}
@media (max-height: 700px) {
  :root { --kh: 38px; --kg: 5px; --round-h: 412px; }
}
@media (pointer: fine) {
  :root { --perf-b: calc(var(--pad-b) + 54px + 12px + 50px + 16px); }
}
@media (min-width: 720px) {
  :root { --round-h: 436px; }
}

/* Paper scope: every legacy colour rule inside a document follows the ink. */
#dock, .sheet-wrap:not(#sheet-paywall) .sheet, #toast {
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --text-faint: var(--ink-3);
  --hairline: var(--ink-rule);
  --hairline-strong: rgba(20, 33, 61, 0.24);
  --amber: var(--amber-ink);
  --ember: var(--ember-ink);
  --c-wide: #FFFFFF;
  --c-fair: #4A90F2;
  --c-snug: #34B97C;
  --c-tight: #F2C531;
  --c-pinpoint: #EE4A4F;
  --c-miss: #8E95A6;
  color: var(--ink);
}

/* ---------------------------------------------------------------- 2 · the card */
#dock {
  background: var(--fibre), var(--stock);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: 0 -1px 0 rgba(150, 118, 66, 0.4), 0 -18px 50px rgba(2, 4, 14, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
body:not([data-screen="results"]) #dock::before,
body:not([data-screen="results"]) #dock::after { display: none; }
@media (min-width: 720px) {
  #dock { box-shadow: 0 1px 0 rgba(150, 118, 66, 0.45), 0 30px 70px rgba(2, 4, 14, 0.45), 0 2px 6px rgba(2, 4, 14, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.75); }
}
#dock ::selection { background: rgba(255, 181, 71, 0.45); }
#dock button:focus-visible { outline-color: var(--ink); }
#screen-closed .eyebrow { color: var(--ember-ink); }
#screen-closed .home-title { color: var(--ink); }

/* ---------------------------------------------------------------- 3 · top bar */
/* Streak and Menu are one small ticket, torn at the ends, perforated between. */
.top-actions {
  gap: 0; height: 38px; padding: 0 3px;
  border-radius: 5px;
  background: var(--fibre), var(--stock);
  color: var(--ink);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right / 51% 100% no-repeat;
}
#topbar { filter: drop-shadow(0 6px 14px rgba(2, 4, 14, 0.22)); }
#topbar .wordmark { filter: none; }
.top-actions .streak-pill, .top-actions .menu-btn {
  height: 38px; min-width: 0; border: 0; border-radius: 3px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  color: var(--ink);
}
.top-actions .streak-pill { padding: 0 11px 0 12px; gap: 5px; font: 800 17px/1 var(--f-display); letter-spacing: 0.02em; color: var(--ink-3); }
.top-actions .streak-pill svg { width: 15px; height: 15px; fill: currentColor; filter: none; }
.top-actions .streak-pill.lit { color: var(--ink); border: 0; }
.top-actions .streak-pill.lit svg { color: var(--ember-ink); filter: none; }
.top-actions .menu-btn {
  position: relative; gap: 7px; padding: 0 13px 0 12px;
  font: 800 15px/1 var(--f-display); letter-spacing: 0.12em; text-transform: uppercase;
}
.top-actions .menu-btn::before { /* the perforation between the two halves */
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; border-left: 1.5px dashed var(--perf-c);
}
.top-actions .menu-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.top-actions .streak-pill:hover, .top-actions .menu-btn:hover { background: rgba(20, 33, 61, 0.06); }
.top-actions .menu-btn[aria-expanded="true"] { color: var(--ember-ink); border: 0; }
.top-actions .menu-btn .mb-live { width: 6px; height: 6px; margin-left: -1px; background: var(--ember-ink); box-shadow: none; }
.top-actions button:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }

/* ---------------------------------------------------------------- 4 · round HUD
   Phone: centred under the top bar, between the rail and the altimeter.
   Desktop: in the top bar row itself. Only ever visible on the round screen. */
#hud {
  --left: 1;
  position: absolute; z-index: 6; left: max(16px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 12px);
  filter: drop-shadow(0 6px 14px rgba(2, 4, 14, 0.25));
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
body[data-screen="round"] #hud { opacity: 1; visibility: visible; transition: opacity 300ms ease 120ms, visibility 0s; }
body[data-screen="round"]:has(#dock.away) #hud { opacity: 0; }
@media (min-width: 720px) {
  #hud { left: 50%; transform: translateX(-50%); }
}
/* Phones: the strip takes the wordmark's place in the top bar for the round */
@media (max-width: 719.98px) {
  #topbar .brand { transition: opacity 240ms ease; }
  body[data-screen="round"] #topbar .brand { opacity: 0; pointer-events: none; }
}
/* A flight strip clipped to the top of the sky: same stock and torn ends as the top-bar ticket */
#hud .hud-strip {
  display: flex; align-items: center; gap: 10px;
  max-width: min(200px, calc(100vw - 206px)); height: 38px; padding: 0 13px 0 3px; box-sizing: border-box;
  border-radius: 5px;
  background: var(--strands), var(--stock); color: var(--ink);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right / 51% 100% no-repeat;
}
@media (min-width: 720px) { #hud .hud-strip { max-width: 280px; } }

/* The dial: ink bezel ticks, the arc of time left in ink (amber ≤ 15 s,
   ember ≤ 5 s), whole seconds in the middle. */
#hud .round-timer {
  --arc: var(--ink);
  position: relative; flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; margin: 0 0 0 4px; border-radius: 50%;
  background: none; box-shadow: none;
  color: var(--ink); font: 800 17px/1 var(--f-display); font-variant-numeric: tabular-nums;
  transition: opacity var(--d-state);
}
#hud .round-timer::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(20, 33, 61, 0.1) calc((1 - var(--left)) * 360deg), var(--arc) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
#hud .round-timer::after {
  content: ""; position: absolute; inset: 4.5px; border-radius: 50%;
  background:
    repeating-conic-gradient(from -1deg, rgba(20, 33, 61, 0.5) 0 2deg, transparent 2deg 60deg),
    repeating-conic-gradient(from -0.6deg, rgba(20, 33, 61, 0.2) 0 1.2deg, transparent 1.2deg 12deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
#hud .round-timer b { position: relative; z-index: 1; font: inherit; color: inherit; transform-origin: 50% 60%; backface-visibility: hidden; }
body:has(#screen-round.t-mid) #hud .round-timer { --arc: #D98A14; }
body:has(#screen-round.t-low) #hud .round-timer { --arc: var(--ember-ink); color: var(--ember-ink); }
body:has(#screen-round.t-low) #hud .hud-strip { background: var(--strands), #FBE3D2; }
body:has(#screen-round.t-low) #hud .round-timer.beat b { animation: beat 1000ms var(--ease-out); }
body:has(#screen-round.is-locked) #hud .round-timer { opacity: 0.45; }

/* Leg + category over the route */
#hud .leg-block { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#hud .cat-tag {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  font: 800 13.5px/1 var(--f-display); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; overflow: hidden;
}
#hud .cat-tag > span { transform-origin: 50% 60%; backface-visibility: hidden; }
#hud .cat-tag .leg-no { flex: none; color: var(--ink); }
#hud .cat-tag .leg-of { flex: none; margin-left: -3px; color: var(--ink-3); font-weight: 700; }
#hud .cat-tag .leg-cat { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
#hud .legs {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  gap: 0; width: 108px; height: 9px; margin: 0; padding: 0; list-style: none;
}
#hud .legs::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 1.5px dashed rgba(20, 33, 61, 0.3); }
#hud .leg { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--stock); box-shadow: inset 0 0 0 1.5px rgba(20, 33, 61, 0.4); }
#hud .leg-hit { background: var(--c); box-shadow: 0 0 0 1.5px var(--ink); }
#hud .leg-miss { background: var(--stock); box-shadow: inset 0 0 0 1.5px rgba(20, 33, 61, 0.4); }
#hud .leg-miss::after { content: ""; position: absolute; inset: 3px -1px auto; height: 1.5px; background: rgba(20, 33, 61, 0.55); transform: rotate(-45deg); }
#hud .leg-now { width: 9px; height: 9px; background: var(--amber-real); box-shadow: 0 0 0 1.5px var(--ink); }

/* Leg to leg: the HUD flaps like a departures board while the card tears off */
body:has(#screen-round.leg-out) #hud .cat-tag > span,
body:has(#screen-round.leg-out) #hud .round-timer b { animation: flapOut 140ms var(--ease-in) both; }
body:has(#screen-round.leg-in) #hud { animation: dialRewind 460ms var(--ease-out) both; }
body:has(#screen-round.leg-in) #hud .cat-tag > span,
body:has(#screen-round.leg-in) #hud .round-timer b { animation: flapIn 280ms var(--ease-out) both; }
body:has(#screen-round.leg-in) #hud .cat-tag > span:nth-child(2) { animation-delay: 40ms; }
body:has(#screen-round.leg-in) #hud .cat-tag > span:nth-child(3) { animation-delay: 80ms; }
body:has(#screen-round.leg-in) #hud .round-timer b { animation-delay: 160ms; }
body:has(#screen-round.leg-in) #hud .leg-now { animation: wpArrive 520ms var(--ease-spring) 140ms both; }
body:has(#screen-round.leg-in) #hud .leg-prev { animation: wpDone 360ms var(--ease-spring) 60ms both; }

/* ---------------------------------------------------------------- 5 · round card */
body[data-screen="round"] #dock { height: calc(var(--round-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 720px) { body[data-screen="round"] #dock { height: var(--round-h); } }

#screen-round.round { padding: 20px 20px var(--pad-b); }
@media (min-width: 720px) { #screen-round.round { padding: 22px 24px var(--pad-b); } }
#screen-round .leg-body > .controls { margin-top: 0; }
/* the readout floats in whatever room the question leaves; the stub stays put */
#screen-round .leg-body > .readout { margin-block: auto; }
#screen-round .leg-body > .wbtns { margin-top: 28px; }

/* The perforation: between the printed question and the stub you act on,
   with notches cut into the card's edges at the same height. */
#screen-round::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--perf-b); height: 0;
  border-top: 1.5px dashed var(--perf-c); pointer-events: none;
}
body[data-screen="round"] #dock {
  -webkit-mask: radial-gradient(circle at 0 calc(100% - var(--perf-b)), transparent 8px, #000 8.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% calc(100% - var(--perf-b)), transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 calc(100% - var(--perf-b)), transparent 8px, #000 8.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% calc(100% - var(--perf-b)), transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
}
/* the reveal reflows the card, so the tear line steps aside */
#screen-round.is-revealed::after { display: none; }
/* after the reveal the scale hint has done its job: room for the answer */
#screen-round.is-revealed .hint { display: none; }
#screen-round.is-revealed .scale { padding-top: 40px; }
body[data-screen="round"]:has(#screen-round.is-revealed) #dock { -webkit-mask: none; mask: none; }

/* Question, with the clue tag hanging at the top right */
#screen-round .q-wrap { display: flow-root; margin: 0 0 6px; }
#screen-round .q-wrap .clue-tag { float: right; margin: -1px 0 6px 14px; }
#screen-round .question { margin: 0; font: 600 19px/1.27 var(--f-ui); letter-spacing: -0.006em; color: var(--ink); text-wrap: pretty; }
#screen-round .hint { margin: 0 0 12px; font: italic 400 16px/1.25 var(--f-serif); color: rgba(20, 33, 61, 0.62); }
#screen-round .hint.is-clue { color: var(--ink); font: 500 15px/1.3 var(--f-ui); border-left-color: var(--amber-ink); }
#screen-round .hint.is-clue > b:first-child { color: var(--amber-ink); }
#screen-round .hint.is-clue b { color: var(--ink); }
#screen-round .hint.is-cost { color: var(--amber-ink); }

/* Clue tag: an ink-outlined luggage tag on the paper */
#screen-round .clue-tag {
  height: 32px; background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
#screen-round .clue-tag::after { border-left-color: rgba(20, 33, 61, 0.38); top: 6px; bottom: 6px; }
#screen-round .ct-main { font-size: 14px; padding: 0 8px 0 10px; }
#screen-round .ct-stub { font-size: 14px; color: var(--ink-2); padding: 0 9px 0 9px; }
#screen-round .clue-tag:hover { background: rgba(20, 33, 61, 0.05); filter: none; }
#screen-round .clue-tag[data-state="armed"] { background: var(--amber-real); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
#screen-round .clue-tag[data-state="armed"] .ct-stub { color: var(--ink); }
#screen-round .clue-tag[data-state="armed"]::after { border-color: rgba(20, 33, 61, 0.45); }
#screen-round .clue-tag[data-state="on"] { background: rgba(255, 181, 71, 0.16); color: var(--amber-ink); box-shadow: inset 0 0 0 1.5px var(--amber-ink); }
#screen-round .clue-tag[data-state="spent"] { color: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.22); }
#screen-round.is-locked .clue-tag { opacity: 0.4; }
@media (max-height: 700px) {
  #screen-round.round { padding-top: 16px; }
  #screen-round .question { font-size: 17.5px; line-height: 1.25; }
  #screen-round .hint { font-size: 15px; margin-bottom: 8px; }
  #screen-round .readout { min-height: 54px; }
  #screen-round .leg-body > .wbtns { margin-top: 24px; }
}

/* Readout: low ├ guess ┤ high, in ink */
#screen-round .readout { min-height: 62px; }
#screen-round .r-edge { color: var(--ink-2); }
#screen-round .r-lo::after, #screen-round .r-hi::before {
  background:
    linear-gradient(rgba(20, 33, 61, 0.5), rgba(20, 33, 61, 0.5)) var(--cap) / 1.5px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(20, 33, 61, 0.38) 0 5px, transparent 5px 9px) center / 100% 1.5px no-repeat;
}
#screen-round .guess { color: var(--ink); }
#screen-round .unit-toggle { color: var(--ink-2); }
#screen-round .unit-toggle.swap { background: rgba(20, 33, 61, 0.07); }
#screen-round .unit-toggle.swap:hover { background: rgba(20, 33, 61, 0.12); color: var(--ink); }
/* Empty: no brackets, no dashes. Just a blinking caret and what to do. */
#screen-round.empty .r-edge { visibility: hidden; }
#screen-round.empty .guess { display: inline-flex; align-items: center; }
#screen-round.empty .guess::before {
  content: ""; display: block; width: 3px; height: 0.8em; margin: 0 8px 0 0;
  background: var(--ember-ink); border-radius: 1px; animation: caret 1.05s steps(1) infinite;
}
#screen-round.empty .guess::after {
  content: "type a number"; display: block; width: auto; height: auto; margin: 0; background: none; animation: none;
  font: italic 400 22px/1 var(--f-serif); letter-spacing: 0; color: rgba(20, 33, 61, 0.4);
}
@media (prefers-reduced-motion: reduce) { #screen-round.empty .guess::before { animation: none; } }

/* Width: one five-position switch printed in ink. Each segment carries its
   colour as a swatch; the chosen one is filled with it. */
#screen-round .wbtns {
  height: 50px; padding: 0; gap: 0; border-radius: 7px;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink);
}
#screen-round .wbtn { height: 50px; gap: 4px; padding: 0 2px 5px; border-radius: 0; color: var(--ink-2); }
#screen-round .wbtn + .wbtn::before { top: 0; bottom: 0; background: var(--ink-rule); }
#screen-round .wbtn.on::before, #screen-round .wbtn.on + .wbtn::before { display: none; }
#screen-round .wbtn::after { /* the colour swatch */
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 7px; height: 3px; border-radius: 1px;
  background: var(--c); box-shadow: 0 0 0 0.75px rgba(20, 33, 61, 0.4);
}
#screen-round .wbtn span { font: 600 11.5px/1 var(--f-ui); }
#screen-round .wbtn b { font: 800 17px/1 var(--f-display); color: var(--ink); }
#screen-round .wbtn:hover { background: rgba(20, 33, 61, 0.05); }
#screen-round .wbtn.on { z-index: 1; background: var(--c); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
#screen-round .wbtn.on::after { display: none; }
#screen-round .wbtn.on b { color: var(--ink); }
#screen-round .wbtn:first-child { border-radius: 7px 0 0 7px; }
#screen-round .wbtn:last-child { border-radius: 0 7px 7px 0; }
#screen-round .wbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#screen-round.is-locked .wbtns { opacity: 0.55; }

/* Keypad: flat paper keys with a pressed edge */
#screen-round .controls { padding-top: 12px; }
#screen-round .keypad { gap: var(--kg); }
#screen-round .key {
  height: var(--kh); border-radius: 6px;
  background: #E9DDC5; color: var(--ink);
  box-shadow: inset 0 -1.5px 0 rgba(120, 88, 36, 0.28), inset 0 0 0 1px rgba(20, 33, 61, 0.06);
  font: 600 19px/1 var(--f-ui);
}
#screen-round .key:hover { background: #E3D5BB; }
#screen-round .key:active { background: #DCCDB1; transform: translateY(1px); }
#screen-round .key-del, #screen-round .key-dot { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.14); }
#screen-round .key.tap { animation: keyTapPaper 220ms var(--ease-out); }
@keyframes keyTapPaper { 0% { background: var(--amber-real); } 100% { background: #E9DDC5; } }

/* Lock it in / Next leg: the navy ticket, the one dark object on the paper */
#screen-round .key-lock, #screen-round .next-ticket {
  height: var(--kh); min-height: var(--kh);
  background: linear-gradient(90deg, transparent var(--cut), rgba(0, 0, 0, 0.2) var(--cut)), var(--navy-stock);
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}
#screen-round .next-ticket { height: 52px; min-height: 52px; }
#screen-round .key-lock::after, #screen-round .next-ticket::after { border-left-color: rgba(246, 238, 221, 0.38); }
#screen-round .key-lock .kl-stub, #screen-round .next-ticket .kl-stub { color: var(--cream); }
#screen-round .next-ticket .kl-stub { color: rgba(246, 238, 221, 0.75); }
#screen-round .next-ticket .kl-stub svg { stroke: var(--cream); }
#screen-round .kl-stub .kl-pip { box-shadow: 0 0 0 1.5px var(--cream); }
#screen-round .key-lock:hover, #screen-round .next-ticket:hover { filter: brightness(1.12); }
#screen-round .key-lock:focus-visible, #screen-round .next-ticket:focus-visible { box-shadow: inset 0 0 0 2px var(--cream), inset 0 0 0 3.5px var(--ink); }
/* empty: the same ticket, unprinted */
#screen-round.empty .key-lock {
  background: linear-gradient(90deg, transparent var(--cut), rgba(20, 33, 61, 0.04) var(--cut)), rgba(20, 33, 61, 0.08);
  color: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.1); filter: none;
}
#screen-round.empty .key-lock::after { border-left-color: rgba(20, 33, 61, 0.22); }
#screen-round.empty .key-lock .kl-stub { color: var(--ink-3); }
#screen-round.empty .kl-pip { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(20, 33, 61, 0.35); }
/* last 5 s: the ticket is printed in ember */
#screen-round.t-low .key-lock {
  background: linear-gradient(90deg, transparent var(--cut), rgba(0, 0, 0, 0.14) var(--cut)), linear-gradient(180deg, #E4612F 0%, #CC4218 100%);
  color: #FFF4E2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.22); animation: none;
}
#screen-round.t-low .key-lock .kl-stub { color: #FFF4E2; }
#screen-round.t-low .key-lock::after { border-left-color: rgba(255, 244, 226, 0.45); }
#screen-round.t-low.empty .key-lock { background: rgba(204, 66, 24, 0.1); color: var(--ember-ink); box-shadow: inset 0 0 0 1px rgba(204, 66, 24, 0.35); }
#screen-round.t-low.empty .key-lock .kl-stub { color: var(--ember-ink); }
@media (pointer: fine) {
  #screen-round .key-lock { height: 54px; min-height: 54px; }
}

/* ---------------------------------------------------------------- 6 · reveal on paper */
#screen-round .scale { padding-left: 4px; padding-right: 4px; }
#screen-round .track { background: rgba(20, 33, 61, 0.1); box-shadow: inset 0 1px 0 rgba(20, 33, 61, 0.08); }
#screen-round .band { box-shadow: inset 0 0 0 1.5px var(--ink); background: color-mix(in srgb, var(--c) 45%, transparent); }
#screen-round .band.hit { background: var(--c); box-shadow: inset 0 0 0 1.5px var(--ink); animation: bandHitPaper 520ms var(--ease-out); }
@keyframes bandHitPaper { 0% { transform: scaleY(1.6); } 100% { transform: none; } }
#screen-round .band.miss { background: rgba(20, 33, 61, 0.06); box-shadow: inset 0 0 0 1.5px rgba(20, 33, 61, 0.4); }
#screen-round .knob { background: var(--ink); box-shadow: 0 0 0 2px var(--stock); }
#screen-round .tick { background: rgba(20, 33, 61, 0.22); }
#screen-round .tick.major { background: rgba(20, 33, 61, 0.45); }
#screen-round .tick em { color: var(--ink-3); }
#screen-round .tick.near em { color: var(--ink); }
#screen-round .needle { background: var(--ink); box-shadow: none; }
#screen-round .needle::after { background: var(--ink); box-shadow: 0 0 0 2px var(--stock); }
#screen-round .needle-label { background: var(--ink); color: var(--cream); border-radius: 3px; font: 800 15px/1.05 var(--f-display); letter-spacing: 0.03em; padding: 4px 7px 3px; }
#screen-round .needle.offscale .needle-label { background: var(--ember-ink); color: #FFF4E2; }
/* the verdict, inked, with a highlighter stroke in your width's colour */
#screen-round .verdict {
  color: var(--ink); padding: 0 3px; margin-left: -3px;
  background: linear-gradient(transparent 50%, color-mix(in srgb, var(--c) 85%, transparent) 50%, color-mix(in srgb, var(--c) 85%, transparent) 86%, transparent 86%);
}
#screen-round .verdict.is-miss { color: var(--ink-2); background: linear-gradient(transparent 50%, rgba(20, 33, 61, 0.12) 50%, rgba(20, 33, 61, 0.12) 86%, transparent 86%); }
#screen-round .verdict-delta { color: var(--ink-2); }
#screen-round .result-line { color: var(--ink-2); }
#screen-round .result-line strong { color: var(--ink); }
#screen-round .result-fact { border-top: 1.5px dashed var(--perf-c); font: italic 400 16.5px/1.35 var(--f-serif); color: rgba(20, 33, 61, 0.72); }

/* ---------------------------------------------------------------- 7 · home strip */
#screen-home .eyebrow { color: var(--ember-ink); letter-spacing: 0.1em; }
#screen-home .home-title { color: var(--ink); }
#screen-home .home-title span { color: var(--amber-ink); }
#screen-home .home-lede { color: var(--ink-2); }
#screen-home .home-status { color: var(--ink-3); }
#screen-home .home-status b { color: var(--ink); }
#screen-home .cal-btn { height: 32px; padding: 0 2px 0 0; gap: 8px; border: 0; background: none; color: var(--ink); font: 600 13px/1 var(--f-ui); }
#screen-home .cal-btn > span:last-child { text-decoration: underline; text-decoration-color: rgba(20, 33, 61, 0.3); text-underline-offset: 3px; }
#screen-home .cal-btn:hover { background: none; }
#screen-home .cal-btn:hover > span:last-child { text-decoration-color: var(--ink); }
#screen-home .leaf { box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.22), 0 2px 0 rgba(20, 33, 61, 0.18); background: #FBF6EC; }
#screen-home .leaf::before, #screen-home .leaf::after { background: var(--stock); box-shadow: inset 0 0 0 0.75px rgba(20, 33, 61, 0.35); }
#screen-home .leaf i { background: var(--ember-ink); }
/* Take off: the navy ticket */
#screen-home .launch-ticket {
  background: linear-gradient(90deg, transparent var(--cut), rgba(0, 0, 0, 0.2) var(--cut)), var(--navy-stock);
  color: var(--cream); box-shadow: none;
}
#screen-home .launch-ticket::after { border-left-color: rgba(246, 238, 221, 0.38); }
#screen-home .launch-ticket .hold-idle svg { fill: #FF7A45; }
#screen-home .launch-stub small { color: rgba(246, 238, 221, 0.6); }
#screen-home .launch-ticket .hold-fill { background: linear-gradient(90deg, #B83A16, #E0592F 80%, #F07C2C); }
#screen-home .launch-ticket:hover { filter: brightness(1.12); }
#screen-home .launch-ticket.holding { box-shadow: none; }

/* ---------------------------------------------------------------- 8 · sheets
   Paper pads: the top edge is perforated where the sheet tore off the pad,
   the head sticks while the body scrolls, and the whole sheet always fits
   the visible viewport (iOS Safari bars included). */
.sheet-wrap.open { background: rgba(4, 6, 16, 0.55); }
.sheet-wrap:not(#sheet-paywall) .sheet {
  box-sizing: border-box;
  max-height: calc(100vh - 24px);
  max-height: calc(100svh - env(safe-area-inset-top, 0px) - 12px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
  padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: var(--strands), var(--stock);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-radius: 0;
  box-shadow: none;   /* the perforated mask would clip a shadow; the dimmed backdrop carries the depth */
  scrollbar-width: thin; scrollbar-color: rgba(20, 33, 61, 0.25) transparent;
  -webkit-mask: radial-gradient(circle at 5px 0, transparent 3.2px, #000 3.7px) 0 0 / 10px 100% repeat-x;
          mask: radial-gradient(circle at 5px 0, transparent 3.2px, #000 3.7px) 0 0 / 10px 100% repeat-x;
}
.sheet-wrap:not(#sheet-paywall) .sheet-head {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -20px 16px; padding: 22px 20px 14px;
  background: var(--stock);
}
.sheet-wrap:not(#sheet-paywall) .sheet-head::after { /* the rule under the pad's head */
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; border-top: 1.5px solid var(--ink);
}
.sheet-wrap:not(#sheet-paywall) .sheet-head h2 { margin: 0; font: 800 32px/0.95 var(--f-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
.sheet-wrap:not(#sheet-paywall) .sheet-sub { margin: 7px 0 0; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-3); }
/* Close: a printed box with an ×, always reachable at the top */
.sheet-wrap:not(#sheet-paywall) .sheet-x, .menu-head .sheet-x {
  flex: none; width: 38px; height: 38px; min-width: 38px; padding: 0;
  border: 1.5px solid var(--ink); border-radius: 5px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  color: var(--ink);
}
.sheet-wrap:not(#sheet-paywall) .sheet-x:hover, .menu-head .sheet-x:hover { background: var(--ink); color: var(--cream); }
.sheet-wrap:not(#sheet-paywall) .sheet-x svg { width: 17px; height: 17px; stroke-width: 2; }
.sheet-wrap:not(#sheet-paywall) .icon-btn:focus-visible { outline: 2px solid var(--ember-ink); outline-offset: 2px; }
@media (min-width: 720px) {
  .sheet-wrap:not(.menu-wrap):not(#sheet-paywall) { align-items: center; padding: 24px; }
  .sheet-wrap:not(.menu-wrap):not(#sheet-paywall) .sheet {
    width: min(520px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding-bottom: 24px;
    transform: translateY(18px); opacity: 0;
    transition: transform var(--d-sheet) var(--ease-out), opacity 200ms ease;
  }
  .sheet-wrap:not(.menu-wrap):not(#sheet-paywall).open .sheet { transform: none; opacity: 1; }
  .sheet-wrap:not(#sheet-paywall) .sheet-head { padding-top: 24px; }
}

/* ---------------------------------------------------------------- 9 · how to fly */
.sheet.help .sheet-head { margin-bottom: 4px; }
.hf { list-style: none; margin: 0; padding: 0; }
.hf li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 72px; gap: 4px 12px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--ink-rule);
}
.hf-n { font: 800 26px/1 var(--f-display); color: var(--ember-ink); align-self: start; }
.hf p { margin: 0; font: 400 15px/1.4 var(--f-ui); color: var(--ink-2); }
.hf p b { font-weight: 650; color: var(--ink); }
.hf-ill { width: 72px; height: 40px; overflow: visible; }
.hi-line { fill: none; stroke: rgba(20, 33, 61, 0.45); stroke-width: 1.5; stroke-linecap: round; }
.hi-tick { stroke: rgba(20, 33, 61, 0.35); stroke-width: 1.2; }
.hi-pin { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.hi-dot { fill: var(--ember-ink); }
.hi-karman { stroke: var(--ember-ink); stroke-width: 1.3; stroke-dasharray: 3 3; }
.hi-climb { stroke: rgba(20, 33, 61, 0.4); stroke-width: 1.5; stroke-dasharray: 2 2.5; }
.hi-env { fill: #D9452B; stroke: var(--ink); stroke-width: 1; }
.hi-basket { fill: #A0602A; }
/* step 2 shows the real switch, in miniature */
.hf-ladder {
  grid-column: 2 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 10px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ink);
}
.hf-ladder .lad {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: auto; padding: 7px 0 12px;
}
.hf-ladder .lad + .lad { box-shadow: inset 1px 0 0 var(--ink-rule); }
.hf-ladder .lad b { font: 800 15px/1 var(--f-display); color: var(--ink); }
.hf-ladder .lad em { font: 600 10.5px/1 var(--f-ui); font-style: normal; color: var(--ink-2); order: -1; }
.hf-ladder .lad i { position: absolute; left: 30%; right: 30%; bottom: 6px; width: auto; height: 3px; border-radius: 1px; background: var(--c); opacity: 1; box-shadow: 0 0 0 0.75px rgba(20, 33, 61, 0.4); }
.hf-note { margin: 14px 0 0; font: italic 400 16px/1.4 var(--f-serif); color: rgba(20, 33, 61, 0.7); }
.sheet.help .br-foot { position: static; margin: 18px 0 0; padding: 0; background: none; }
/* Got it: the navy ticket; the stub says where it takes you */
.sheet.help .ready-ticket {
  --cut: 74%; height: 58px;
  background: linear-gradient(90deg, transparent var(--cut), rgba(0, 0, 0, 0.2) var(--cut)), var(--navy-stock);
  color: var(--cream); box-shadow: none;
}
.sheet.help .ready-ticket::after { border-left-color: rgba(246, 238, 221, 0.38); }
.sheet.help .ready-ticket:hover { filter: brightness(1.12); }
.sheet.help .rt-main { font: 800 22px/1 var(--f-display); letter-spacing: 0.1em; }
.sheet.help .rt-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sheet.help .rt-stub small { font: 500 9.5px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246, 238, 221, 0.6); }
.sheet.help .rt-stub b { font: 800 18px/1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.sheet.help .ready-ticket:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cream), inset 0 0 0 3.5px var(--ink); }
@media (max-width: 360px) { .hf li { grid-template-columns: 22px minmax(0, 1fr) 56px; } .hf-ill { width: 56px; } }

/* ---------------------------------------------------------------- 10 · logbook */
#sheet-logbook .lb-h {
  display: flex; align-items: center; gap: 10px;
  margin: 28px 0 12px; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
#sheet-logbook .lb-h::after { content: ""; flex: 1; border-top: 1px solid var(--ink-rule); }
/* the licence: a laminated card lying on the page */
#sheet-logbook .licence {
  background: var(--fibre), #FBF6EB;
  box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.14), 0 1px 0 rgba(20, 33, 61, 0.12), 0 10px 22px rgba(80, 56, 20, 0.14);
  border-radius: 10px;
}
#sheet-logbook .lic-seal .ink { background: #FBF6EB; }
/* passport page: whiter, framed, its own dashed inner rule */
#sheet-logbook .pp-page { background: #FBF6EB; box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.14); border-radius: 10px; }
/* calibration in ink */
#sheet-logbook .cal-name { color: var(--ink); }
#sheet-logbook .cal-name i { box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.45); }
#sheet-logbook .cal-track { background: rgba(20, 33, 61, 0.09); }
#sheet-logbook .cal-fill { box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.4); }
#sheet-logbook .cal-tick { background: var(--ink); }
#sheet-logbook .cal-val b { color: var(--ink); }
#sheet-logbook .cal-val small { color: var(--ink-3); }
#sheet-logbook .lb-note { color: var(--ink-2); font: italic 400 15.5px/1.4 var(--f-serif); }
/* flight strips: tickets on the page */
#sheet-logbook .fstrip { background: #FBF6EB; box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.14); }
#sheet-logbook .fstrip::after { border-left-color: var(--perf-c); }
#sheet-logbook .fs-dots i { box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.45); }
#sheet-logbook .fs-dots i.m { box-shadow: inset 0 0 0 1.5px rgba(20, 33, 61, 0.4); }
#sheet-logbook .fs-dots i.clue { outline-color: var(--amber-ink); }
#sheet-logbook .fstrip.ghost { background: none; box-shadow: none; border: 1.5px dashed var(--ink-rule); color: var(--ink-3); }

/* ---------------------------------------------------------------- 11 · archive: a desk calendar page */
#sheet-archive .cal-nav { margin: 4px 0 14px; }
#sheet-archive .cal-nav b { color: var(--ink); font-size: 24px; }
#sheet-archive .cal-nav .icon-btn {
  width: 36px; height: 36px; min-width: 36px; padding: 0; border: 1.5px solid var(--ink); border-radius: 5px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink); font: 600 20px/1 var(--f-ui);
}
#sheet-archive .cal-nav .icon-btn:hover { background: var(--ink); color: var(--cream); }
#sheet-archive .cal-nav .icon-btn:disabled { opacity: 0.2; }
#sheet-archive .cal-grid { gap: 0; border-top: 1.5px solid var(--ink); }
#sheet-archive .cal-dow { padding: 8px 0 7px; font: 500 10px/1 var(--f-mono); color: var(--ink-3); border-bottom: 1px solid var(--ink-rule); }
#sheet-archive .cal-grid > span:not(.cal-dow), #sheet-archive .cal-day { border-bottom: 1px solid var(--ink-rule); }
#sheet-archive .cal-day {
  position: relative; aspect-ratio: 1 / 1.08; gap: 4px; border-radius: 0; border: 0;
  border-bottom: 1px solid var(--ink-rule);
  background: transparent; color: var(--ink);
}
#sheet-archive .cal-day b { font: 700 17px/1 var(--f-display); color: var(--ink); }
#sheet-archive .cal-day small { font: 600 9.5px/1 var(--f-ui); color: var(--ink-3); }
#sheet-archive .cal-day.off { color: rgba(20, 33, 61, 0.2); background: none; }
#sheet-archive .cal-day.off b { color: inherit; }
#sheet-archive .cal-day:not(.off):hover { background: rgba(20, 33, 61, 0.05); border-color: var(--ink-rule); }
/* played: the score is stamped under the date */
#sheet-archive .cal-day.played { background: none; }
#sheet-archive .cal-day.played::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -19px 0 0 -18px;
  border-radius: 50%; border: 1.5px solid rgba(43, 63, 122, 0.55); transform: rotate(-8deg); pointer-events: none;
}
#sheet-archive .cal-day.played small { color: var(--ink-1, #2B3F7A); font-weight: 700; }
/* today: circled in ember */
#sheet-archive .cal-day.today { box-shadow: inset 0 0 0 2px var(--ember-ink); border-color: transparent; }
#sheet-archive .cal-day.today small { color: var(--ember-ink); font-weight: 700; }
#sheet-archive .cal-day.locked { opacity: 0.5; }
#sheet-archive .cal-key { margin: 14px 0 0; color: var(--ink-2); font: italic 400 15.5px/1.4 var(--f-serif); }

/* ---------------------------------------------------------------- 12 · menu */
#sheet-menu .sheet.menu { padding-top: 0; }
#sheet-menu .menu::before { display: none; }
#sheet-menu .menu-head {
  position: sticky; top: 0; z-index: 4; margin: 0 -18px 14px; padding: 20px 18px 12px;
  background: var(--stock);
}
#sheet-menu .menu-head::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; border-top: 1.5px solid var(--ink); }
#sheet-menu .menu-head h2 { color: var(--ink); font-size: 26px; letter-spacing: 0.08em; }
/* Resume: a navy ticket; its dial is the same paper face as the HUD */
#sheet-menu .menu-resume {
  background: linear-gradient(90deg, transparent var(--cut), rgba(0, 0, 0, 0.22) var(--cut)), var(--navy-stock);
  color: var(--cream); box-shadow: none;
}
#sheet-menu .menu-resume::after { border-left-color: rgba(246, 238, 221, 0.38); }
#sheet-menu .menu-resume:hover { filter: brightness(1.12); }
#sheet-menu .mr-dial { --arc: var(--ink); background: var(--stock); box-shadow: none; color: var(--ink); }
#sheet-menu .mr-dial::before { inset: 2px; background: conic-gradient(rgba(20, 33, 61, 0.1) calc((1 - var(--left)) * 360deg), var(--arc) 0); }
#sheet-menu .menu-resume.t-mid .mr-dial { --arc: #D98A14; }
#sheet-menu .menu-resume.t-low .mr-dial { --arc: var(--ember-ink); color: var(--ember-ink); }
#sheet-menu .mr-text small { color: rgba(246, 238, 221, 0.7); }
#sheet-menu .mr-go { color: var(--amber-real); }
/* Destinations: a printed index, 2 × 3 cells in one ruled frame */
#sheet-menu .menu-grid { gap: 0; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--ink); overflow: hidden; }
#sheet-menu .menu-tile {
  height: 78px; border: 0; border-radius: 0; background: transparent;
  box-shadow: inset -1px 0 0 var(--ink-rule), inset 0 -1px 0 var(--ink-rule);
  color: var(--ink);
}
#sheet-menu .menu-tile:nth-child(2n) { box-shadow: inset 0 -1px 0 var(--ink-rule); }
#sheet-menu .menu-tile:nth-last-child(-n + 2) { box-shadow: inset -1px 0 0 var(--ink-rule); }
#sheet-menu .menu-tile:last-child { box-shadow: none; }
#sheet-menu .menu-tile:hover { background: rgba(20, 33, 61, 0.05); }
#sheet-menu .menu-tile:active { transform: none; background: rgba(20, 33, 61, 0.09); }
#sheet-menu .menu-tile > svg { stroke: var(--ink); }
#sheet-menu .menu-tile > b { color: var(--ink); }
#sheet-menu .mt-meta { color: var(--ink-3); }
#sheet-menu .menu-tile[aria-current="page"] { background: rgba(255, 181, 71, 0.14); border: 0; }
#sheet-menu .menu-tile[aria-current="page"] > svg { stroke: var(--ember-ink); }
#sheet-menu .menu-tile[aria-current="page"] .mt-meta { color: var(--ember-ink); }
#sheet-menu .menu-tile[aria-current="page"] .mt-meta::before { background: var(--ember-ink); box-shadow: none; }
#sheet-menu .menu-tile:focus-visible { outline: 2px solid var(--ember-ink); outline-offset: -3px; }
/* Preferences: two printed switches */
#sheet-menu .menu-prefs { margin-top: 14px; gap: 14px; }
#sheet-menu .pref { padding: 0; border: 0; gap: 7px; }
#sheet-menu .pref > span { font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
#sheet-menu .seg { padding: 0; border-radius: 6px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
#sheet-menu .seg i { height: 32px; border-radius: 0; color: var(--ink-2); font: 600 13px/1 var(--f-ui); font-style: normal; }
#sheet-menu .seg[aria-checked="true"] i:first-child, #sheet-menu .seg[aria-checked="false"] i:last-child { background: var(--ink); color: var(--cream); }
#sheet-menu .seg i:first-child { border-radius: 5px 0 0 5px; }
#sheet-menu .seg i:last-child { border-radius: 0 5px 5px 0; }
#sheet-menu .seg:focus-visible { outline: 2px solid var(--ember-ink); outline-offset: 2px; }
#sheet-menu .menu-foot { color: var(--ink-3); }
#sheet-menu .menu-foot a { color: var(--ink-2); text-decoration-color: rgba(20, 33, 61, 0.3); }
@media (min-width: 720px) {
  #sheet-menu.menu-wrap .sheet {
    width: 372px; border: 0; border-radius: 0;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    box-shadow: none;
  }
  #sheet-menu .menu-tile { height: 74px; }
}

/* ---------------------------------------------------------------- 13 · toast: a paper slip */
#toast {
  padding: 11px 16px; border: 0; border-radius: 4px;
  background: var(--fibre), var(--stock);
  box-shadow: 0 0 0 1px rgba(150, 118, 66, 0.35), 0 12px 28px rgba(2, 4, 14, 0.32);
  font: 500 14px/1.4 var(--f-ui); color: var(--ink);
  width: max-content; max-width: min(340px, calc(100vw - 32px)); box-sizing: border-box;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- legacy nodes no longer in the round card */
.kbd-note { display: none !important; }

/* (fix) v12 re-declared --ink-2 / --ink-3 on :root as navy text tones, which
   also repainted the bronze and silver stamp tiers. Pin the stamp inks back. */
.ink.t2 { --ink: #A0602A; }
.ink.t3 { --ink: #6E7A90; }
.pp-legend span:nth-child(2) i { background: #A0602A !important; }
.pp-legend span:nth-child(3) i { background: #6E7A90 !important; }

/* ---------------------------------------------------------------- guided first leg (coach.js)
   A small paper slip with an arrow, pinned above the thing to touch next. */
.coach-slip {
  position: fixed; z-index: 30; display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 6px;
  background: #F6EDDB; color: #14213D; font: 500 14px/1.35 var(--f-ui);
  box-shadow: 0 10px 28px rgba(5, 8, 22, 0.35), inset 0 0 0 1px rgba(20, 33, 61, 0.14);
  opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 260ms var(--ease-out);
  pointer-events: none;
}
.coach-slip.in { opacity: 1; transform: none; }
.coach-slip b { font-weight: 700; }
.coach-slip::after {
  content: ""; position: absolute; top: 100%; left: var(--arrow-x, 50%); translate: -50% 0;
  border: 8px solid transparent; border-top-color: #F6EDDB; filter: drop-shadow(0 2px 1px rgba(5, 8, 22, 0.2));
}
.coach-step { flex: none; font: 800 12px/1.4 var(--f-display); letter-spacing: 0.08em; color: var(--amber-deep, #C25A12); padding-top: 1px; }
.coach-target { position: relative; animation: coachpulse 1.6s ease-in-out infinite; border-radius: 10px; }
@keyframes coachpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 124, 44, 0); } 50% { box-shadow: 0 0 0 5px rgba(240, 124, 44, 0.35); } }
@media (prefers-reduced-motion: reduce) { .coach-target { animation: none; box-shadow: 0 0 0 3px rgba(240, 124, 44, 0.45); } .coach-slip { transition: none; } }

/* Share nudge: two small bumps on the share ticket and a paper tag above it */
.ticket-row { position: relative; }
.share-nudge {
  position: absolute; left: 10px; bottom: calc(100% + 8px); z-index: 2;
  padding: 5px 9px; border-radius: 4px; background: #14213D; color: #F6EDDB;
  font: 700 11px/1 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity 240ms ease, transform 280ms var(--ease-out); pointer-events: none;
}
.share-nudge::after { content: ""; position: absolute; top: 100%; left: 22px; border: 5px solid transparent; border-top-color: #14213D; }
.share-nudge.in { opacity: 1; transform: none; }
#btn-share.nudge { animation: sharebump 900ms var(--ease-out) 2; }
@keyframes sharebump { 0%, 100% { translate: 0 0; } 30% { translate: 0 -4px; } 55% { translate: 0 0; } 70% { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) { #btn-share.nudge { animation: none; } }
.coach-slip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #F6EDDB; }
/* the tag sits under the share ticket (Keep flying is right above it) */
.share-nudge { bottom: auto; top: calc(100% + 8px); }
.share-nudge::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #14213D; }