/* ============================================================================
   Before or After - "Clay".
   Everything on screen is an inflated solid of warm clay. One light source, fixed
   top-left: every element carries a white inner rim on its upper edge and a warm
   inner shadow on its lower one. Raised things cast a soft outer shadow; sunken
   things have none and invert their inner ones. No borders, no hairlines, no
   textures - the entire surface treatment is box-shadow.
   Light only. Order: font, tokens, recipes, base, layout, components, states.
   Reskin contract: docs/UI_HOOKS.md.
   ========================================================================== */

@font-face {
  font-family: Gabarito;
  src: url('/assets/Gabarito-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- colour ---- */
  --c-bg:         oklch(0.925 0.025 72);
  --c-surface:    oklch(0.965 0.018 78);
  --c-surface-2:  oklch(0.955 0.020 76);
  --c-sunken:     oklch(0.905 0.028 70);
  --c-sunken-2:   oklch(0.895 0.028 68);
  --c-fg:         oklch(0.34 0.035 50);
  --c-muted:      oklch(0.50 0.035 50);
  --c-muted-2:    oklch(0.56 0.040 50);
  --c-accent:     oklch(0.74 0.115 42);
  --c-accent-2:   oklch(0.62 0.130 42);
  --c-right:      oklch(0.74 0.140 152);
  --c-right-ink:  oklch(0.30 0.050 152);
  --c-wrong:      oklch(0.70 0.160 28);
  --c-wrong-surface: oklch(0.945 0.030 40);
  --c-wrong-ink:  oklch(0.55 0.150 28);
  --c-focus:      oklch(0.45 0.130 250);
  /* the whole-screen right/wrong flash. Green needs more of it than red: red fights the
     warm sand ground, green sits near it in lightness and washes to olive at low alpha. */
  --c-flash-right: oklch(0.72 0.250 148);
  --c-flash-wrong: oklch(0.62 0.250 27);
  --flash-alpha-right: 62%;
  --flash-alpha-wrong: 55%;

  /* ---- clay shadows: the whole style lives here ---- */
  --sh-raise:     0 14px 26px -12px rgba(120,80,50,.45),
                  inset -5px -7px 14px rgba(180,130,95,.26),
                  inset  5px  7px 14px rgba(255,255,255,.95);
  --sh-raise-sm:  0 8px 16px -10px rgba(120,80,50,.40),
                  inset -3px -4px 9px rgba(180,130,95,.20),
                  inset  3px  4px 9px rgba(255,255,255,.90);
  --sh-sunken:    inset  3px 5px 9px rgba(150,105,75,.42),
                  inset -3px -4px 8px rgba(255,255,255,.75);
  --sh-sunken-deep: inset 3px 4px 8px rgba(150,95,70,.50),
                  inset -2px -3px 6px rgba(255,255,255,.70);
  --sh-accent:    0 14px 26px -10px rgba(150,80,40,.62),
                  inset -5px -7px 14px rgba(150,80,40,.35),
                  inset  5px  7px 14px rgba(255,255,255,.55);
  --sh-accent-down: inset 4px 6px 12px rgba(140,70,35,.55),
                  inset -3px -4px 9px rgba(255,255,255,.35);
  --sh-green:     0 5px 10px -5px rgba(40,110,70,.50),
                  inset -2px -3px 6px rgba(45,110,75,.35),
                  inset  2px  3px 6px rgba(255,255,255,.60);
  --sh-green-flat: inset -2px -3px 6px rgba(45,110,75,.35),
                  inset  2px  3px 6px rgba(255,255,255,.60);
  --sh-float:     0 22px 38px -14px rgba(120,80,50,.55);

  /* ---- type ---- */
  --font:         Gabarito, system-ui, -apple-system, sans-serif;
  --fs-xs:        11px;
  --fs-sm:        12.5px;
  --fs-md:        14.5px;
  --fs-lg:        17px;
  --fs-q:         18px;
  --fs-xl:        34px;
  --fs-card:      28px;
  --fs-year:      44px;
  --fs-score:     58px;
  --fw-normal:    500;
  --fw-bold:      700;
  --lh-tight:     1.14;
  --lh-body:      1.45;
  --ls-caps:      0.14em;
  --ls-tight:     -0.03em;

  /* ---- space, shape ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 22px; --sp-6: 28px;
  --radius:       28px;
  --radius-key:   26px;
  --radius-row:   22px;
  --radius-chip:  14px;
  --radius-pill:  999px;
  --border:       0;
  --col-max:      480px;
  --card-h:       212px;
  --card-w:       318px;
  --card-inset:   22px;
  --zone-h:       76px;
  --channel-h:    22px;

  /* ---- motion (mirrors config.js) ---- */
  --t-spring:     220ms;
  --t-leave:      240ms;
  --t-flash:      150ms;
  --t-press:      110ms;
  --t-row:         80ms;
  --t-toast:     1600ms;
  --t-reveal-fade: 500ms;
  --ease:         cubic-bezier(0.20, 0.70, 0.25, 1);
  --ease-out:     cubic-bezier(0.30, 0.00, 0.60, 1);
  --ease-spring:  cubic-bezier(.34, 1.3, .64, 1);
}

/* ---- the four recipes ---- */

.clay         { border-radius: var(--radius-row); background: var(--c-surface-2); box-shadow: var(--sh-raise-sm); }
.clay--lg     { border-radius: var(--radius);     background: var(--c-surface);   box-shadow: var(--sh-raise); }
.clay--sunken { border-radius: var(--radius-row); background: var(--c-sunken);    box-shadow: var(--sh-sunken); }

.key {
  height: var(--zone-h);
  border: 0;
  border-radius: var(--radius-key);
  background: var(--c-surface-2);
  box-shadow: var(--sh-raise);
  color: var(--c-fg);
  font: var(--fw-bold) var(--fs-lg)/1 var(--font);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
}
.key--accent { background: var(--c-accent); box-shadow: var(--sh-accent); }
/* clay squashes, it does not travel */
.key:active, .key[data-down] { transform: scale(0.985); box-shadow: var(--sh-sunken); }
.key--accent:active, .key--accent[data-down] { box-shadow: var(--sh-accent-down); }
.key[disabled] {
  background: var(--c-sunken); box-shadow: var(--sh-sunken);
  color: var(--c-muted-2); cursor: default; transform: none;
}

/* ---- base ---- */

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

html { background: var(--c-bg); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  min-height: 100svh;
  display: flex;
  justify-content: center;
  overscroll-behavior: contain;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* clay has no borders, so the focus ring is the only affordance a keyboard gets */
[tabindex="-1"]:focus { outline: none; }
:where(button, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-key);
}

/* ---- layout ---- */

.shell {
  width: 100%;
  max-width: var(--col-max);
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding:
    calc(var(--sp-4) + env(safe-area-inset-top))
    calc(var(--card-inset) + env(safe-area-inset-right))
    calc(var(--sp-4) + env(safe-area-inset-bottom))
    calc(var(--card-inset) + env(safe-area-inset-left));
}

.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-5); }
.bar--plain { justify-content: flex-start; }

.wordmark { font-size: 16px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.wordmark i { font-style: normal; color: var(--c-accent-2); }

.bar-actions { display: flex; gap: var(--sp-2); }
.stud {
  width: 38px; height: 38px; padding: 0; border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-surface-2); box-shadow: var(--sh-raise-sm);
  color: var(--c-fg); font: var(--fw-bold) 16px/1 var(--font);
  display: grid; place-items: center; cursor: pointer;
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
}
.stud:active { transform: scale(0.96); box-shadow: var(--sh-sunken); }

.main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen { display: none; flex: 1; flex-direction: column; min-height: 0; }
:root[data-screen="landing"] [data-role="screen-landing"],
:root[data-screen="play"]    [data-role="screen-play"],
:root[data-screen="results"] [data-role="screen-results"],
:root[data-screen="error"]   [data-role="screen-error"] { display: flex; }

/* ---- landing: the mark, the blurb, the key ---- */

.screen-landing { justify-content: center; }
.blurb-lead {
  font-size: 21px; line-height: 1.45; font-weight: var(--fw-normal);
  letter-spacing: var(--ls-tight); text-wrap: pretty;
  margin: 0;
}
.notice { font-size: var(--fs-lg); color: var(--c-muted); text-align: center; }
/* the key sits with the blurb as one centred block, not pinned to the bottom */
.landing-foot { padding-top: var(--sp-6); }
.landing-foot .key { width: 100%; }

/* ---- play ---- */

.screen-play { justify-content: space-between; overflow: hidden; --drag: 0; }

/* the one thing that never moves is the one thing pressed into the slab */
.question-band {
  position: relative;
  border-radius: var(--radius-row);
  background: var(--c-sunken);
  box-shadow: var(--sh-sunken);
  padding: 14px 18px;
  text-align: center;
}
.eyebrow {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-muted-2); margin: 0 0 6px;
}
.eyebrow--lead { position: absolute; left: 18px; right: 18px; top: 14px; }
.question {
  font-size: var(--fs-q); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0;
}
.question b { color: var(--c-accent-2); font-weight: var(--fw-bold); }

.stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; perspective: 950px; }

/* the axis is a pressed channel through the middle of the slab */
.stage-axis {
  position: absolute; left: -4px; right: -4px;
  top: calc(50% - var(--channel-h) / 2);
  height: var(--channel-h);
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.stage-label {
  position: absolute; top: calc(50% - 134px); z-index: 2;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-muted-2);
  transition: color var(--t-press) var(--ease);
}
.stage-label--before { left: 0; }
.stage-label--after { right: 0; }

.card {
  grid-area: 1 / 1;
  width: var(--card-w); max-width: 100%; height: var(--card-h);
  display: grid; place-items: center;
  padding: var(--sp-5);
  text-align: center;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  border-radius: var(--radius);
}
.card-next {
  background: var(--c-surface);
  transform: translateY(14px) scale(0.95);
  box-shadow: 0 10px 18px -10px rgba(120,80,50,.4);   /* behind the light: no inner rim */
  border-radius: var(--radius);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
/* the card's inner shadows counter-move with the turn so the light stays put.
   Without this it reads as a sticker rather than a solid. */
.card-top {
  --shx: calc(1 - var(--drag) * 0.35);
  background: var(--c-surface);
  box-shadow:
    var(--sh-float),
    inset calc(-5px * var(--shx)) -7px 14px rgba(180,130,95,.26),
    inset calc( 5px * var(--shx))  7px 14px rgba(255,255,255,.95);
  transform-origin: 50% 120%;
  z-index: 1;
}
.card-text {
  max-width: 100%; min-width: 0; overflow-wrap: break-word;
  font-size: var(--fs-card); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
  text-wrap: balance;
}
.card-sheen { display: none; }   /* clay has no sheen; the shadows do the work */

/* the flash covers the viewport, not just the stage - under the modals, over everything else */
.screen-flash {
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none; opacity: 0;
  /* Promoted up front, and hidden rather than merely transparent when idle. Without the
     layer existing before the first flash, iOS repaints it partially on that first fade
     and leaves colour banded at the top and bottom of the screen - and only on the first
     one, because the layer exists by the second. */
  visibility: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}
:root[data-flash] .screen-flash { visibility: visible; }
/* No fade. A gradual fade is what made the lag visible: iOS re-composites the strips
   under its toolbars a frame late, so with a 200ms fade the top and bottom trailed the
   middle. Full strength, then cut - either a region is painted or it isn't, and a
   one-frame difference on a hard edge reads as instant. */
@keyframes wash { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
.flash {
  position: absolute; z-index: 3; pointer-events: none;
  font-size: 56px; font-weight: var(--fw-bold);
  opacity: 0; transform: scale(0.92);
  display: grid; place-items: center;
}
.flash img { width: 56px; height: 56px; display: block; }

.reveal-year {
  position: absolute; z-index: 2; margin: 0; pointer-events: none;
  font-size: var(--fs-year); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums;
  line-height: 1;
}

.play-foot { padding-top: var(--sp-4); }
.dots { display: flex; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 0 0 14px; }
.dots li {
  width: 15px; height: 15px; border-radius: var(--radius-pill);
  background: var(--c-sunken); box-shadow: var(--sh-sunken);
}
.dots li[data-result="right"] {
  background: var(--c-accent);
  box-shadow: 0 4px 8px -4px rgba(150,80,40,.6),
              inset -1px -2px 4px rgba(150,80,40,.35),
              inset  1px  2px 4px rgba(255,255,255,.55);
}
.dots li[data-result="wrong"] { background: var(--c-sunken-2); box-shadow: var(--sh-sunken-deep); }

.zones { display: flex; gap: var(--sp-3); align-items: center; }
.zones .key { flex: 1; }
.zones .key[data-down] { height: calc(var(--zone-h) - 6px); }

/* ---- results ---- */

.screen-results { gap: var(--sp-3); }
.score-block { padding: 18px 20px; }
.results-header {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-muted-2); margin: 0 0 var(--sp-2);
}
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.score {
  font-size: var(--fs-score); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums;
  line-height: 1; margin: 0;
}
.score small { font-size: 30px; color: var(--c-muted-2); }
.score-line {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  max-width: 142px; text-align: right; margin: 0 0 var(--sp-1);
}

.chips { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.chips li { flex: 1; height: 34px; border-radius: var(--radius-chip); display: grid; place-items: center; }
.chips li[data-result="right"] {
  background: var(--c-right); box-shadow: var(--sh-green);
  color: var(--c-right-ink); font-size: 16px; font-weight: var(--fw-bold);
}
.chips li[data-result="wrong"] {
  background: var(--c-sunken-2); box-shadow: var(--sh-sunken-deep); overflow: visible;
}
.chips li[data-result="wrong"] img {
  width: 46px; height: 46px;
  transform: rotate(-7deg) translateY(-2px);
  filter: drop-shadow(0 3px 4px rgba(120,70,35,.4));
}

.breakdown { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.breakdown li {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: start; gap: 0 var(--sp-3);
  padding: 11px 14px;
  border-radius: var(--radius-row);
  background: var(--c-surface-2);
  box-shadow: var(--sh-raise-sm);
  opacity: 0;
}
.breakdown li[data-revealed="true"] {
  opacity: 1; transform: translateY(0);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.breakdown li:not([data-revealed="true"]) { transform: translateY(8px); box-shadow: none; }
.breakdown .year {
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; color: var(--c-muted-2);
}
.breakdown .dot { display: none; }   /* clay uses the row itself, not a spine */
.breakdown .card-title { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); display: block; }
.breakdown .blurb {
  font-size: var(--fs-sm); font-weight: var(--fw-normal); line-height: var(--lh-body);
  color: var(--c-muted); text-wrap: pretty; display: block; margin-top: 3px;
}
.breakdown li[data-result="wrong"] {
  background: var(--c-wrong-surface);
  box-shadow: 0 8px 16px -10px rgba(140,70,45,.45),
              inset -3px -4px 9px rgba(190,120,95,.26),
              inset  3px  4px 9px rgba(255,255,255,.9);
}
.breakdown li[data-result="wrong"] .year { color: var(--c-wrong-ink); }
.breakdown .mark {
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--c-right); box-shadow: var(--sh-green-flat);
  color: var(--c-right-ink); font-size: 12px; font-weight: var(--fw-bold);
}
.breakdown .mark img {
  width: 36px; height: 36px; display: block;
  transform: rotate(6deg); margin: -8px -10px 0 0;
}
.breakdown li[data-result="wrong"] .mark { background: none; box-shadow: none; }

/* the anchor row is not a slab: a fat accent bar dividing before from after */
.breakdown li.anchor-row {
  grid-template-columns: 44px 1fr; align-items: center;
  background: none; box-shadow: none; padding: var(--sp-2) 14px;
}
.breakdown li.anchor-row .year { color: var(--c-fg); }
.breakdown li.anchor-row .anchor-rule { display: flex; align-items: center; gap: var(--sp-3); }
.breakdown li.anchor-row .anchor-rule::before {
  content: ""; height: 8px; flex: 1;
  border-radius: var(--radius-pill); background: var(--c-accent);
}
.breakdown li.anchor-row .anchor-label {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  white-space: nowrap; color: var(--c-muted-2);
}

.share-key { width: 100%; margin-top: var(--sp-2); }
.manual-share textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm);
  margin-top: var(--sp-3); background: var(--c-sunken); color: var(--c-fg);
  border: 0; border-radius: var(--radius-row); padding: var(--sp-3); box-shadow: var(--sh-sunken);
}
.results-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-2); margin: 0;
  font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--c-muted);
}
.results-foot b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--c-fg); }
.link { font: inherit; font-weight: var(--fw-bold); color: var(--c-fg); background: none; border: 0; padding: 0; cursor: pointer; }
.link:hover, .link:focus-visible { text-decoration: underline; }

.screen-error { justify-content: center; gap: var(--sp-5); }
.retry-key { width: 100%; }

/* ---- modals ---- */

.modal { position: fixed; inset: 0; z-index: 10; display: flex; justify-content: center; background: var(--c-bg); }
.modal[hidden] { display: none; }
.modal-sheet {
  width: 100%; max-width: var(--col-max);
  display: flex; flex-direction: column;
  padding:
    calc(var(--sp-4) + env(safe-area-inset-top))
    calc(var(--card-inset) + env(safe-area-inset-right))
    calc(var(--sp-4) + env(safe-area-inset-bottom))
    calc(var(--card-inset) + env(safe-area-inset-left));
  overflow: auto;
  animation: modalIn 180ms var(--ease) both;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.modal-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-5); }
.modal-sheet .key { width: 100%; margin-top: auto; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: 0 0 var(--sp-6); }
.stat-grid > div {
  background: var(--c-sunken); box-shadow: var(--sh-sunken);
  border-radius: var(--radius-row); padding: var(--sp-4) var(--sp-3); text-align: center;
}
.stat-grid dt { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted-2); margin-top: 6px; }
.stat-grid dd { margin: 0; font-size: 32px; font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }

.dist-title { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted-2); margin: 0 0 var(--sp-3); }
.dist { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-2); }
.dist li { display: grid; grid-template-columns: 14px 1fr; gap: var(--sp-3); align-items: center; }
.dist .digit { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-muted-2); font-variant-numeric: tabular-nums; }
.dist .track {
  height: 18px; border-radius: var(--radius-pill);
  background: var(--c-sunken); box-shadow: var(--sh-sunken);
}
.dist .bar {
  height: 18px; border-radius: var(--radius-pill);
  background: var(--c-accent); box-shadow: var(--sh-accent);
  color: var(--c-fg); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 18px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--sp-2); min-width: 18px;
}
.dist li[data-current="true"] .digit { color: var(--c-accent-2); }
.first-day { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--sp-5); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--zone-h) + var(--sp-6) + env(safe-area-inset-bottom));
  z-index: 20;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--c-surface-2); box-shadow: var(--sh-raise-sm);
  color: var(--c-fg); font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.toast[hidden] { display: none; }

/* ---- the Vault (Before or After+) ---- */

.vault-entry { display: block; margin: var(--sp-4) auto 0; font-size: var(--fs-md); color: var(--c-muted); }
.vault-entry[hidden] { display: none; }
.foot-links { display: flex; gap: var(--sp-3); }
.results-foot [hidden] { display: none; }

.vault-lead { font-size: var(--fs-lg); line-height: var(--lh-body); margin: 0 0 var(--sp-5); }
.vault-plans { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.modal-sheet .vault-plans .key, .modal-sheet .restore .key { margin-top: 0; }
.vault-small { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--sp-4); text-align: left; }
.vault-small:empty { display: none; }
.vault-member { font-weight: var(--fw-bold); color: var(--c-fg); }
.restore { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.restore[hidden] { display: none; }
.field { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-muted); }
.field input {
  font: var(--fw-bold) var(--fs-lg)/1.2 var(--font); color: var(--c-fg);
  background: var(--c-sunken); box-shadow: var(--sh-sunken);
  border: 0; border-radius: var(--radius-row); padding: var(--sp-4);
}
.field input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.vault-list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-2); }
.vault-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); color: var(--c-fg); text-decoration: none;
}
a.vault-row:active { transform: scale(0.985); box-shadow: var(--sh-sunken); }
.vault-row[aria-disabled="true"] { opacity: 0.55; }
.vault-row-text { display: grid; gap: 2px; min-width: 0; }
.vault-row-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted-2); }
.vault-row-title { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.vault-row-meta { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.pack-card { overflow: hidden; padding: 0; }
.pack-cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.pack-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.pack-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.pack-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.pack-meta { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.pack-rounds { list-style: none; margin: 0; padding: 0; display: grid; }
.pack-round {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 7px 0; color: var(--c-fg); text-decoration: none;
  font-size: var(--fs-md); font-weight: var(--fw-bold);
}
.pack-rounds li + li .pack-round { box-shadow: inset 0 1px 0 rgba(150,105,75,.14); }
a.pack-round:hover .pack-round-name, a.pack-round:focus-visible .pack-round-name { text-decoration: underline; }
.pack-round-year { flex: none; font-weight: var(--fw-normal); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.pack-card[data-locked] .pack-body { opacity: 0.7; }
.vault-stats { margin-bottom: var(--sp-5); }
.vault-stats-body { padding: var(--sp-4); font-size: var(--fs-md); line-height: var(--lh-body); }
.vault-stats[data-locked] .vault-stats-body { color: var(--c-muted); font-weight: var(--fw-bold); }
.stats-versus { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.stats-versus > div {
  display: grid; justify-items: center; padding: var(--sp-3);
  background: var(--c-sunken); box-shadow: var(--sh-sunken); border-radius: var(--radius-row);
}
.stats-figure { font-size: 32px; font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats-versus > div:first-child .stats-figure { color: var(--c-accent-2); }
.stats-figure-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted-2); }
.stats-caption { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-muted); text-align: center; }
.stats-subtitle { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted-2); }
.best-calls { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.best-calls li { display: grid; gap: 2px; }
.best-call-text { font-weight: var(--fw-bold); }
.best-call-note { font-size: var(--fs-sm); color: var(--c-accent-2); font-weight: var(--fw-bold); }
.stat-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.stat-bars li { display: grid; grid-template-columns: 7.5em 1fr 2.6em; gap: var(--sp-3); align-items: center; }
.stat-bar-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.stat-bars .track { height: 14px; border-radius: var(--radius-pill); background: var(--c-sunken); box-shadow: var(--sh-sunken); overflow: hidden; }
.stat-bars .bar { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-right); box-shadow: var(--sh-green-flat); }
.stat-bar-value { text-align: right; font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.vault-foot { display: flex; justify-content: space-between; gap: var(--sp-3); margin: auto 0 0; padding-top: var(--sp-3); font-size: var(--fs-sm); }
.vault-foot [hidden] { display: none; }

/* ---- the anchor reveal ----
   Everything arrives in its final position; only opacity changes. The resting state
   is a single class (0,1,0) and every step is attribute + class (0,2,0), so the
   steps always win. */

.question, .eyebrow, .eyebrow--lead, .stage-axis, .card,
.stage-label, .dots, .zones, .reveal-year, .question-band {
  opacity: 0;
  transition: opacity var(--t-reveal-fade) var(--ease);
}

[data-reveal="lead"] .eyebrow--lead,
[data-reveal="anchor"] .eyebrow--lead,
[data-reveal="year"] .eyebrow--lead { opacity: 1; }

[data-reveal="lead"] .question-band,
[data-reveal="anchor"] .question-band,
[data-reveal="year"] .question-band,
[data-reveal="swap"] .question-band,
[data-reveal="card"] .question-band,
[data-reveal="done"] .question-band { opacity: 1; }

[data-reveal="anchor"] .question,
[data-reveal="year"] .question,
[data-reveal="swap"] .question,
[data-reveal="card"] .question,
[data-reveal="done"] .question { opacity: 1; }

[data-reveal="anchor"] .stage-axis,
[data-reveal="year"] .stage-axis,
[data-reveal="swap"] .stage-axis,
[data-reveal="card"] .stage-axis,
[data-reveal="done"] .stage-axis { opacity: 1; }

[data-reveal="year"] .reveal-year,
[data-reveal="swap"] .reveal-year { opacity: 1; }

[data-reveal="swap"] .eyebrow,
[data-reveal="card"] .eyebrow,
[data-reveal="done"] .eyebrow { opacity: 1; }
[data-reveal="swap"] .eyebrow--lead,
[data-reveal="card"] .eyebrow--lead,
[data-reveal="done"] .eyebrow--lead { opacity: 0; }

[data-reveal="card"] .card,
[data-reveal="card"] .stage-label,
[data-reveal="done"] .card,
[data-reveal="done"] .stage-label { opacity: 1; }

[data-reveal="card"] .dots,
[data-reveal="card"] .zones { opacity: 1; transition-delay: 120ms; }
[data-reveal="done"] .dots,
[data-reveal="done"] .zones { opacity: 1; }

[data-role="card-next"][hidden] { display: none; }

/* ---- play states ---- */

[data-state="idle"] .card-top { transition: transform var(--t-spring) var(--ease-spring), box-shadow var(--t-spring) var(--ease); }
[data-state="wobble"] .card-top { transition: transform 140ms linear; }
[data-state="dragging"] .card-top { transition: none; }
[data-state="leaving"] .card-top { transition: transform var(--t-leave) var(--ease-out), opacity var(--t-leave) var(--ease-out); }
[data-state="leaving"] .card-next { transform: translateY(0) scale(1); box-shadow: var(--sh-raise); transition: transform var(--t-leave) var(--ease), box-shadow var(--t-leave) var(--ease); }

/* driven from :root, not from the play screen, so no ancestor can clip it */
:root[data-flash] .screen-flash { animation: wash var(--t-flash) steps(1, end) forwards; }
:root[data-flash="right"] .screen-flash { background: color-mix(in oklch, var(--c-flash-right) var(--flash-alpha-right), transparent); }
:root[data-flash="wrong"] .screen-flash { background: color-mix(in oklch, var(--c-flash-wrong) var(--flash-alpha-wrong), transparent); }
[data-state="flash-right"] .flash,
[data-state="flash-wrong"] .flash { animation: flash var(--t-flash) var(--ease-spring) forwards; }
[data-state="flash-right"] .flash { color: var(--c-right-ink); }
[data-state="flash-wrong"] .flash { color: var(--c-wrong-ink); }
[data-state="flash-right"] .card-top,
[data-state="flash-wrong"] .card-top,
[data-state="beat"] .card-top { opacity: 0; }
[data-state="beat"] .card-next { opacity: 0; }

@keyframes flash { from { opacity: 1; transform: scale(0.92); } 60% { transform: scale(1.04); } to { opacity: 0; transform: scale(1); } }

/* ---- responsive ---- */

@media (max-width: 359px) {
  :root {
    --card-inset: 16px;
    --fs-xl: 28px; --fs-year: 38px; --fs-score: 48px; --fs-card: 24px;
    --card-w: 288px; --card-h: 188px; --zone-h: 68px;
    --radius: 24px; --radius-key: 22px;
    /* clay at full blur on a small element turns to mush */
    --sh-raise:    0 11px 21px -10px rgba(120,80,50,.45),
                   inset -4px -6px 11px rgba(180,130,95,.26),
                   inset  4px  6px 11px rgba(255,255,255,.95);
    --sh-raise-sm: 0 6px 13px -8px rgba(120,80,50,.40),
                   inset -2px -3px 7px rgba(180,130,95,.20),
                   inset  2px  3px 7px rgba(255,255,255,.90);
  }
  .breakdown li { padding: 9px 12px; grid-template-columns: 40px 1fr auto; }
  .breakdown li.anchor-row { grid-template-columns: 40px 1fr; }
}

@media (min-width: 481px) {
  .key:hover { transform: translateY(-1px); }
}

@media (orientation: landscape) and (max-height: 480px) {
  .stage { min-height: 44vh; }
  .card { height: min(var(--card-h), 44vh); }
  .stage-label { top: var(--sp-2); }
  .dots { margin-bottom: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  [data-state="leaving"] .card-top { transition: opacity var(--t-leave) linear; }
  [data-state="idle"] .card-top, [data-state="wobble"] .card-top { transition: transform 140ms linear; }
  .breakdown li:not([data-revealed="true"]) { transform: none; box-shadow: var(--sh-raise-sm); }
  .breakdown li[data-revealed="true"] { transition: none; }
  [data-state="flash-right"] .flash, [data-state="flash-wrong"] .flash { animation: none; opacity: 1; transform: none; }
  :root[data-flash] .screen-flash { animation: none; opacity: 1; }
  .card-next { transition: opacity var(--t-press) linear; }
  .modal-sheet { animation: none; }
  .question, .eyebrow, .eyebrow--lead, .stage-axis, .card,
  .stage-label, .dots, .zones, .reveal-year, .question-band { transition: none; }
  /* the key squash stays: it is feedback, not decoration */
}

/* ---- legal: the footer links on the landing, and the /terms and /privacy pages ---- */

.legal-links { margin: var(--sp-4) 0 0; text-align: center; font-size: var(--fs-xs); color: var(--c-muted); }
.legal-links a, .legal-page a { color: inherit; }
:root:not([data-screen="landing"]) .legal-links { display: none; }

.legal-page {
  width: 100%; max-width: 640px;
  padding: var(--sp-5) 16px calc(var(--sp-6) + env(safe-area-inset-bottom));
  font-size: var(--fs-md); line-height: 1.55;
}
.legal-page h1 { font-size: 26px; margin: var(--sp-5) 0 0; letter-spacing: var(--ls-tight); }
.legal-page h2 { font-size: var(--fs-lg); margin: var(--sp-5) 0 0; }
.legal-page .legal-date { color: var(--c-muted); font-size: var(--fs-sm); margin-top: 4px; }