/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V5 */
/* Hallmark · genre: atmospheric · macrostructure: Manifesto · theme: Terminal
 * enrichment: Tier-A (static scanlines + one bloom) · nav: N9 edge-aligned · footer: Ft2 inline
 * type: Tomorrow 800 display + JetBrains Mono 400/700 body · anchor hue: 145 phosphor
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57)
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { overflow-x: clip; height: 100%; }

body {
  overflow: clip;
  overscroll-behavior: none; /* no pull-to-refresh mid-rally on mobile */
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: block;
  cursor: crosshair; /* pointer lock hides it while playing; visible otherwise */
  touch-action: none;
}

/* CRT scanlines — Tier-A craft, static, sits over everything */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky);
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    var(--scanline) 2px 3px
  );
}

.hidden { display: none !important; }

b { font-weight: 700; color: var(--color-ink); }

/* ---------- HUD — one flat mono strip ---------- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-raised);
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  padding: max(var(--space-sm), env(safe-area-inset-top))
           max(var(--space-lg), env(safe-area-inset-right))
           var(--space-sm)
           max(var(--space-lg), env(safe-area-inset-left));
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.hud-group { display: flex; align-items: baseline; gap: var(--space-xs); }
.hud-label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral);
}
.hud-value {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
}
.hud-value.is-dim { color: var(--color-neutral); }
.hud-value.is-lives { color: var(--color-accent); letter-spacing: 0.1em; }
.hud-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
}
.combo {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.combo.is-fever { color: var(--color-amber); }
.combo.pop { animation: pop var(--dur-short) var(--ease-out); }
@keyframes pop {
  from { transform: scale(1.5); }
  to { transform: scale(1); }
}
/* progress toward FEVER — fills as the combo grows */
.combo-track {
  display: block;
  width: min(9rem, 40vw);
  height: 3px;
  background: var(--color-rule);
  border-radius: var(--radius-block);
  overflow: hidden;
}
#combo-fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-out);
}
#combo-fill.is-fever { background: var(--color-amber); }
/* active-effect chips: L·6s E·3.5s … */
#hud-fx { gap: var(--space-2xs); }
.fx-chip {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent-dim);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-block);
  padding: var(--space-3xs) var(--space-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- buttons ---------- */
.btn-block {
  min-height: var(--control-min);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--color-accent);
  background: var(--color-paper-2);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-block);
  padding: var(--space-md) var(--space-xl);
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.btn-block:active { transform: translateY(1px); }
.btn-block:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn-block:disabled { color: var(--color-neutral); border-color: var(--color-rule); background: var(--color-paper-2); cursor: not-allowed; opacity: 0.55; transform: none; }
.btn-block[data-state="loading"] { color: var(--color-neutral); border-color: var(--color-accent-dim); pointer-events: none; }
.btn-block[data-state="error"] { color: var(--color-danger); border-color: var(--color-danger); }
.btn-block[data-state="success"] { background: var(--color-accent); color: var(--color-accent-ink); }

.btn-ghost {
  pointer-events: auto;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-neutral);
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-block);
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.btn-ghost:active { color: var(--color-accent); }
.btn-ghost:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn-ghost:disabled { color: var(--color-rule); border-color: var(--color-rule); cursor: not-allowed; opacity: 0.55; }

/* icon-only ghost buttons — hand-built SVG, one stroke voice */
.btn-icon { padding: var(--space-2xs); line-height: 0; }
.btn-icon svg { width: 18px; height: 18px; display: block; }
.btn-icon .ic-off, .btn-icon .ic-play { display: none; }
.btn-icon.is-muted .ic-wave { display: none; }
.btn-icon.is-muted .ic-off { display: block; }
.btn-icon.is-muted { color: var(--color-danger); border-color: var(--color-danger); }
.btn-icon.is-paused .ic-pause { display: none; }
.btn-icon.is-paused .ic-play { display: block; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(42rem 30rem at 10% 4%, var(--bloom), transparent 62%),
    var(--color-paper);
  overflow-y: auto;
}
.overlay.is-thin {
  background: var(--scrim);
  align-items: center;
  justify-content: center;
}

/* N9 — edge-aligned corner nav */
.corner-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl) 0;
}
.wordmark {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-neutral);
}
.corner-link {
  min-height: var(--control-min);
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: var(--space-3xs);
  white-space: nowrap;
}
.corner-link:active { color: var(--color-accent); }
.corner-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .btn-block:hover { background: var(--color-accent); color: var(--color-accent-ink); }
  .btn-ghost:hover { color: var(--color-accent); border-color: var(--color-accent-dim); }
  .corner-link:hover { color: var(--color-accent); }
}

/* manifesto poster — left-biased, generous top / tight bottom */
.poster {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg) var(--space-xl) var(--space-xl) clamp(var(--space-lg), 7vw, var(--space-3xl));
  max-width: 68rem;
}
.poster.is-narrow { max-width: 34rem; margin-inline: auto; justify-content: center; padding: var(--space-xl); }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
  transform: rotate(-2deg);
  transform-origin: left bottom;
  margin-bottom: var(--space-lg);
}
.display.is-sub { font-size: var(--text-display-s); margin-bottom: var(--space-lg); }
.display-line { display: block; }
.display.is-sub .display-line { display: inline; }
.display-block {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: 0 var(--space-sm);
}

.claim {
  max-width: 46ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
}
.claim strong { color: var(--color-amber); font-weight: 700; }

.cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}
.best-line { display: flex; align-items: baseline; gap: var(--space-xs); font-variant-numeric: tabular-nums; }

/* power-up index — head stacked above list, list on raised surface */
.powerup-index { max-width: 30rem; }
.index-head {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-bottom: var(--space-xs);
}
.index-list {
  background: var(--color-paper-2);
  border-radius: var(--radius-block);
  padding: var(--space-sm) var(--space-md);
}
.index-row {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-2xs) 0;
  font-size: var(--text-sm);
}
.index-row dt { font-weight: 700; color: var(--color-accent); }
.index-row dd { color: var(--color-muted); }

/* Ft2 — one inline footer line */
.foot-line {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  align-items: baseline;
  padding: var(--space-md) var(--space-xl) var(--space-lg) clamp(var(--space-lg), 7vw, var(--space-3xl));
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-neutral);
}
.foot-line b { font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.foot-sound { margin-left: auto; color: var(--color-accent-dim); }

/* ---------- game over ---------- */
.newbest {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: var(--space-md);
  animation: blink 500ms steps(2, jump-none) 3 both;
}
@keyframes blink { from { opacity: 0.25; } to { opacity: 1; } }

.score-list {
  margin-bottom: var(--space-xl);
  font-variant-numeric: tabular-nums;
}
.score-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-rule);
}
.score-row dt {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral);
}
.score-row dd { font-size: var(--text-xl); font-weight: 700; }

/* ---------- pause ---------- */
.pause-line { font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-md); text-align: center; }

/* ---------- page-load reveal — fade only (atmospheric), one orchestration ---------- */
.reveal {
  opacity: 0;
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; } }

/* wide viewports — poster becomes an asymmetric two-column fold (no scroll needed) */
@media (min-width: 56rem) {
  .poster {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-content: center;
  }
  .poster > .display, .poster > .claim, .poster > .cta-row { grid-column: 1; }
  .poster > .powerup-index {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    max-width: none;
  }
  .poster > .cta-row { margin-bottom: 0; }
  .poster.is-narrow { display: flex; }
  /* display sized to the narrower column so the wordmark never breaks mid-word */
  .poster > .display { font-size: clamp(2.5rem, 6vw, 5.5rem); }
}

/* ultra-wide — balance the leftover right space by centring the poster block */
@media (min-width: 90rem) {
  .poster { margin-inline: auto; padding-left: var(--space-xl); }
  .corner-nav, .foot-line { max-width: 90rem; margin-inline: auto; width: 100%; }
}


/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .poster { padding-top: var(--space-lg); justify-content: flex-start; }
  .corner-nav {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
    align-items: center;
    padding: var(--space-md) var(--space-lg) 0;
  }
  .corner-link { justify-self: end; }
  .cta-row { gap: var(--space-md); margin-bottom: var(--space-xl); }
  .foot-line {
    gap: var(--space-sm) var(--space-md);
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }
  .foot-sound { margin-left: 0; }
  .display { margin-bottom: var(--space-lg); }

  /* compact HUD: score + lives + buttons on row 1, combo meter + chips below */
  #hud { gap: var(--space-sm) var(--space-md); flex-wrap: wrap; align-items: center; }
  .hud-hi { display: none; }
  #hud .hud-label { display: none; }
  .hud-value { font-size: var(--text-base); }
  .hud-center { order: 9; flex-basis: 100%; align-items: flex-start; }
  #hud-fx { order: 10; }
  .btn-icon { padding: var(--space-xs); } /* expanded to the 44px token below */
  .btn-icon svg { width: 20px; height: 20px; }
}

@media (pointer: coarse) {
  .btn-icon {
    min-width: var(--control-min);
    min-height: var(--control-min);
    display: inline-grid;
    place-items: center;
  }
}

/* short windows — compress vertical rhythm so the menu fold never scrolls.
   Placed last so it wins over the width-based blocks above. */
@media (max-height: 780px) {
  .corner-nav { padding-top: var(--space-md); }
  .poster { padding-block: var(--space-md); }
  .poster > .display { font-size: clamp(2rem, 4.5vw, 4.25rem); margin-bottom: var(--space-md); }
  .claim { font-size: var(--text-base); margin-bottom: var(--space-md); }
  .cta-row { margin-bottom: var(--space-md); }
  .btn-block { font-size: var(--text-md); padding: var(--space-sm) var(--space-lg); }
  .index-list { padding: var(--space-xs) var(--space-sm); }
  .index-row { padding: var(--space-3xs) 0; font-size: var(--text-xs); }
  .foot-line { padding-block: var(--space-sm); }
  .foot-sound { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: reveal 150ms linear forwards; }
}