@font-face {
  font-family: "Silkscreen";
  src: url("/pulse/fonts/silkscreen-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --buy: #ccff00;
  --buy-soft: #e7ff7b;
  --ink: #090b08;
  --panel: #10120f;
  --paper: #f7f7f3;
  --muted: #8d9288;
  --rule: rgba(247, 247, 243, 0.18);
  --signal: #ff5c4d;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --sans: "Hanken Grotesk", Arial, sans-serif;
  --pixel: "Silkscreen", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
}

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--buy); outline-offset: 3px; }

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

.topbar {
  min-height: 64px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--rule);
  background: rgba(9, 11, 8, 0.96);
  position: relative;
  z-index: 20;
}

.wordmark {
  width: max-content;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.chain-state, .utilities, .utility-button { display: flex; align-items: center; }

.chain-state {
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chain-state i {
  width: 8px;
  height: 8px;
  display: block;
  border: 1px solid var(--buy);
  border-radius: 50%;
  background: transparent;
}

body[data-source="live"] .chain-state i {
  background: var(--buy);
  box-shadow: 0 0 0 5px rgba(204, 255, 0, 0.12);
}

body[data-source="held"] .chain-state i { border-color: var(--signal); background: var(--signal); }
body[data-source="demo"] .chain-state i { background: var(--buy-soft); }

.utilities { justify-content: flex-end; gap: 8px; }

.utility-button {
  min-height: 36px;
  padding: 0 11px;
  gap: 7px;
  border: 1px solid var(--rule);
  background: transparent;
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  cursor: pointer;
}

.utility-button:hover:not(:disabled) { border-color: var(--buy); color: var(--buy); }
.utility-button:disabled { opacity: 0.36; cursor: not-allowed; }

#soundControl {
  min-height: 46px;
  padding: 0 16px;
  position: fixed;
  z-index: 120;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-color: var(--buy);
  background: rgba(9, 11, 8, 0.94);
  color: var(--buy);
  font-size: 9px;
  box-shadow: 0 0 0 4px rgba(204, 255, 0, 0.1), 0 12px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

#soundControl span { display: inline; }
#soundControl i { font-size: 14px; }
body[data-sound="off"] #soundControl { animation: sound-control-nudge 2.4s ease-in-out 3; }
body[data-sound="on"] #soundControl { border-color: var(--buy); background: var(--buy); color: var(--ink); }

@keyframes sound-control-nudge {
  0%, 100% { box-shadow: 0 0 0 4px rgba(204, 255, 0, 0.1), 0 12px 30px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: 0 0 0 9px rgba(204, 255, 0, 0.2), 0 12px 34px rgba(0, 0, 0, 0.68); }
}

.attack-shell { min-height: calc(100vh - 64px); }

.attack-hud {
  min-height: 178px;
  padding: 22px 28px 18px;
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(150px, 0.72fr)) minmax(150px, 0.58fr);
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}

.attack-title-block, .hud-stat, .hud-actions { min-width: 0; }
.attack-title-block { padding-right: 22px; }

.attack-title-block > span, .hud-stat > span, .hud-stat small, .hud-actions time,
.arena-corner, .truth-rail, .receipt-deck header > div > span, .receipt-deck header p {
  font-family: var(--mono);
  text-transform: uppercase;
}

.attack-title-block > span { color: var(--buy); font-size: 8px; }

.attack-title-block h1 {
  max-width: 560px;
  margin: 8px 0 0;
  font-size: clamp(34px, 4.1vw, 68px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.78;
}

.hud-stat {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--rule);
}

.hud-stat > span { color: var(--muted); font-size: 7px; }
.hud-stat strong { margin: 9px 0 6px; overflow: hidden; font-family: var(--pixel); font-size: clamp(20px, 2.3vw, 38px); line-height: 1; text-overflow: ellipsis; }
.hud-stat small { color: var(--muted); font-size: 7px; line-height: 1.45; }
.hud-total strong, .hud-buy strong { color: var(--buy); }

.hud-actions {
  padding-left: 16px;
  display: grid;
  align-content: center;
  gap: 12px;
  border-left: 1px solid var(--rule);
}

.hud-actions button {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--buy);
  background: transparent;
  color: var(--buy);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  cursor: pointer;
}

.hud-actions button:hover:not(:disabled) { background: var(--buy); color: var(--ink); }
.hud-actions button:disabled { border-color: var(--rule); color: var(--muted); cursor: not-allowed; }
.hud-actions time { color: var(--muted); font-size: 7px; line-height: 1.45; }

.arena {
  height: clamp(590px, 56.25vw, 900px);
  min-height: 590px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  border-bottom: 1px solid var(--rule);
  background: #060806;
}

.arena-floor, .arena-vignette {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.arena-floor { z-index: -3; object-fit: contain; object-position: center; }

.arena-vignette {
  z-index: -2;
  background: rgba(9, 11, 8, 0.08);
  pointer-events: none;
}

.arena-map {
  width: min(100cqw, calc(100cqh * 16 / 9));
  height: min(100cqh, calc(100cqw * 9 / 16));
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.lane-board { width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; inset: 0; list-style: none; }
.lane-loading { position: absolute; inset: 30% 0 auto; color: var(--muted); font-family: var(--mono); font-size: 9px; text-align: center; }

.traffic-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
}

.lane-runner {
  --runner-from-x: 0px;
  --runner-from-y: 0px;
  --runner-to-x: 0px;
  --runner-to-y: 0px;
  --runner-duration: 3000ms;
  width: clamp(18px, 1.8cqw, 26px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translate3d(var(--runner-from-x), var(--runner-from-y), 0) translate(-50%, -50%) scale(0.48);
  will-change: transform, opacity;
  animation: lane-runner-travel var(--runner-duration) linear forwards;
}

.lane-runner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(247, 247, 243, 0.72);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(9, 11, 8, 0.72), 0 8px 14px rgba(0, 0, 0, 0.54);
  animation: lane-runner-step 340ms steps(2, end) infinite;
}

.lane-runner.is-buy img {
  border-color: var(--buy);
  box-shadow: 0 0 0 3px rgba(9, 11, 8, 0.76), 0 0 13px rgba(204, 255, 0, 0.5);
}

@keyframes lane-runner-travel {
  0% {
    opacity: 0;
    transform: translate3d(var(--runner-from-x), var(--runner-from-y), 0) translate(-50%, -50%) scale(0.48);
  }
  8% { opacity: 0.92; }
  78% { opacity: 0.96; }
  91% {
    opacity: 1;
    transform: translate3d(var(--runner-to-x), var(--runner-to-y), 0) translate(-50%, -50%) scale(1.04);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--runner-to-x), var(--runner-to-y), 0) translate(-50%, -50%) scale(0.12);
  }
}

@keyframes lane-runner-step {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-3px) rotate(5deg); }
}

.lane-station {
  width: clamp(105px, 10.8vw, 168px);
  min-height: 80px;
  padding: 8px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(247, 247, 243, 0.18);
  background: rgba(9, 11, 8, 0.88);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.lane-station:hover { z-index: 8; border-color: var(--buy); transform: translate(-50%, -50%) scale(1.03); }
.lane-station.is-live { border-color: rgba(204, 255, 0, 0.62); }
.lane-station.is-buy { background: rgba(204, 255, 0, 0.92); color: var(--ink); }
.lane-station.is-unknown { border-style: dashed; }

.lane-station:nth-child(1) { --x: 31.2%; --y: 8.8%; }
.lane-station:nth-child(2) { --x: 50%; --y: 7.5%; }
.lane-station:nth-child(3) { --x: 68.8%; --y: 8.8%; }
.lane-station:nth-child(4) { --x: 85.6%; --y: 24.4%; }
.lane-station:nth-child(5) { --x: 92.7%; --y: 42.7%; }
.lane-station:nth-child(6) { --x: 90.5%; --y: 64.8%; }
.lane-station:nth-child(7) { --x: 76.2%; --y: 84.4%; }
.lane-station:nth-child(8) { --x: 50%; --y: 92.5%; }
.lane-station:nth-child(9) { --x: 23.8%; --y: 84.4%; }
.lane-station:nth-child(10) { --x: 9.5%; --y: 64.8%; }
.lane-station:nth-child(11) { --x: 7.3%; --y: 42.7%; }
.lane-station:nth-child(12) { --x: 15.6%; --y: 24.4%; }

.lane-mark {
  width: 34px;
  height: 34px;
  display: block;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--paper);
}

.lane-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lane-copy { min-width: 0; display: grid; gap: 2px; }
.lane-copy > span { color: var(--muted); font-family: var(--mono); font-size: 6px; text-transform: uppercase; }
.lane-copy strong { overflow: hidden; font-family: var(--pixel); font-size: clamp(8px, 0.72vw, 11px); letter-spacing: -0.035em; text-overflow: ellipsis; white-space: nowrap; }
.lane-copy b { display: inline-block; font-size: 20px; line-height: 1; transform-origin: left center; }
.lane-copy small { color: var(--muted); font-family: var(--mono); font-size: 6px; text-transform: uppercase; }
.lane-station.is-buy .lane-copy > span, .lane-station.is-buy .lane-copy small { color: rgba(9, 11, 8, 0.66); }
.lane-station.is-count-up .lane-live-count { animation: lane-count-up 620ms cubic-bezier(0.16, 0.84, 0.22, 1); }

@keyframes lane-count-up {
  0%, 100% { transform: scale(1); }
  38% { color: var(--buy); transform: scale(1.28); }
  70% { transform: scale(0.96); }
}

.hud-leader strong { font-size: clamp(18px, 1.7vw, 26px); }

.lane-station.is-struck { animation: station-strike 620ms cubic-bezier(0.16, 0.84, 0.22, 1); }
.lane-station.is-struck::after {
  content: "LANE HIT";
  padding: 4px 6px;
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translate(-50%, -100%);
  background: var(--buy);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 7px;
  white-space: nowrap;
}

.lane-station.is-buy.is-struck::after { content: "BUY PRESS"; }

@keyframes station-strike {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  36% { transform: translate(-50%, -50%) scale(0.9); }
  64% { transform: translate(-50%, -50%) scale(1.08); }
}

.hero-machine {
  width: min(45vw, 680px);
  aspect-ratio: 1.85;
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 42.5%;
  transform: translate(-50%, -50%);
}

.hero-button {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.62));
  transform: translateY(0) scale(1);
  transform-origin: center;
  will-change: transform, filter;
}

.hero-machine.is-pressed .hero-button { animation: hero-press 760ms cubic-bezier(0.18, 0.78, 0.2, 1); }
.hero-machine.is-pressed .shockwave { animation: shockwave 880ms ease-out; }
.hero-machine.is-echoing .hero-button { animation: hero-echo 440ms cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes hero-press {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.62)); }
  30% { transform: translateY(16px) scale(0.96); filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.66)); }
  58% { transform: translateY(-5px) scale(1.025); filter: drop-shadow(0 30px 28px rgba(204, 255, 0, 0.38)); }
}

@keyframes hero-echo {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.62)); }
  34% { transform: translateY(6px) scale(0.992); filter: drop-shadow(0 15px 14px rgba(0, 0, 0, 0.64)) drop-shadow(0 0 12px rgba(247, 247, 243, 0.24)); }
  68% { transform: translateY(-2px) scale(1.004); }
}

.shockwave {
  width: 68%;
  aspect-ratio: 1;
  position: absolute;
  z-index: -1;
  border: 2px solid var(--buy);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.42);
}

@keyframes shockwave { 0% { opacity: 0.9; transform: scale(0.42); } 100% { opacity: 0; transform: scale(2.4); } }

.hero-status {
  width: min(520px, 88%);
  padding: 10px 14px;
  display: grid;
  gap: 3px;
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--rule);
  background: rgba(9, 11, 8, 0.9);
  text-align: center;
}

.hero-status span, .hero-status small { color: var(--muted); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
.hero-status strong { overflow: hidden; font-family: var(--pixel); font-size: clamp(11px, 1.15vw, 18px); text-overflow: ellipsis; white-space: nowrap; }
.hero-machine.is-pressed .hero-status { border-color: var(--buy); }
.hero-machine.is-pressed .hero-status strong { color: var(--buy); }
.hero-machine.is-echoing .hero-status { border-color: rgba(247, 247, 243, 0.46); }
.hero-machine.is-echoing .hero-status strong { color: var(--paper); }

.arena-corner {
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  position: absolute;
  z-index: 7;
  bottom: 14px;
  border: 1px solid var(--rule);
  background: rgba(9, 11, 8, 0.82);
  font-size: 7px;
}

.arena-corner strong { color: var(--buy); font-size: 9px; }
.arena-corner-left { left: 18px; }
.arena-corner-right { right: 18px; text-align: right; }

.event-hand {
  width: clamp(86px, 10vw, 148px);
  position: absolute;
  z-index: 12;
  left: var(--hand-x);
  top: var(--hand-y);
  transform: translate(-50%, -94%) rotate(var(--hand-r)) scale(1.08);
  transform-origin: 50% 94%;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  animation: hand-strike 820ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

@keyframes hand-strike {
  0% { opacity: 0; transform: translate(-50%, -94%) rotate(var(--hand-r)) translateY(-48%) scale(1.2); }
  28% { opacity: 1; }
  55% { opacity: 1; transform: translate(-50%, -94%) rotate(var(--hand-r)) translateY(0) scale(0.92); }
  100% { opacity: 0; transform: translate(-50%, -94%) rotate(var(--hand-r)) translateY(-42%) scale(1.16); }
}

.receipt-deck { padding: 24px 28px 28px; border-bottom: 1px solid var(--rule); }
.receipt-deck header { display: grid; grid-template-columns: 1fr minmax(260px, 480px); align-items: end; gap: 24px; }
.receipt-deck header > div > span { color: var(--buy); font-size: 7px; }
.receipt-deck h2 { margin: 4px 0 0; font-size: clamp(30px, 3vw, 52px); line-height: 0.9; }
.receipt-deck header p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; text-align: right; }

.receipt-tape { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.receipt-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px minmax(100px, 0.7fr) minmax(150px, 1fr) minmax(110px, 0.8fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}
.receipt-row img { width: 32px; height: 32px; display: block; border-radius: 50%; object-fit: cover; }
.receipt-row strong { color: var(--buy); font-family: var(--pixel); font-size: 10px; }
.receipt-row span, .receipt-row time { color: var(--muted); }
.receipt-row a { padding: 9px 10px; border: 1px solid var(--rule); }
.receipt-row a:hover { border-color: var(--buy); color: var(--buy); }
.receipt-empty { padding: 26px 0; color: var(--muted); font-family: var(--mono); font-size: 8px; }

.truth-rail {
  min-height: 52px;
  padding: 12px 190px 12px 28px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 7px;
}
.truth-rail b { color: var(--paper); }
.truth-rail a { margin-left: auto; color: var(--buy); }

.toast {
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  position: fixed;
  z-index: 60;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--buy);
  background: var(--ink);
  color: var(--buy);
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

.noscript { margin: 0; padding: 18px 28px; border-top: 1px solid var(--signal); font-family: var(--mono); font-size: 9px; }
.noscript a { color: var(--buy); }

@media (max-width: 1100px) {
  .attack-hud { grid-template-columns: 1.3fr repeat(3, 0.7fr); }
  .hud-actions { grid-column: 1 / -1; min-height: 52px; padding: 12px 0 0; grid-template-columns: auto 1fr; align-items: center; border-left: 0; border-top: 1px solid var(--rule); }
  .hud-actions time { text-align: right; }
  .lane-station { width: 110px; grid-template-columns: 28px 1fr; min-height: 66px; }
  .lane-mark { width: 28px; height: 28px; }
}

@media (max-width: 760px) {
  .topbar { min-height: 58px; padding: 0 14px; grid-template-columns: 1fr auto; }
  .chain-state { display: none; }
  .utilities { gap: 5px; }
  .utility-button { min-height: 34px; padding: 0 8px; }
  .utility-button span { display: none; }
  #soundControl { min-height: 44px; padding: 0 13px; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  #soundControl span { display: inline; }
  #trafficControl { display: none; }
  .attack-hud { min-height: auto; padding: 18px 14px 14px; grid-template-columns: repeat(2, 1fr); }
  .attack-title-block { grid-column: 1 / -1; padding: 0 0 16px; }
  .attack-title-block h1 { font-size: clamp(42px, 14vw, 64px); }
  .hud-stat { min-height: 100px; padding: 10px; border-top: 1px solid var(--rule); border-left: 0; }
  .hud-leader { border-left: 1px solid var(--rule); }
  .hud-buy { grid-column: 1 / -1; border-top: 1px solid var(--rule); }
  .hud-actions { grid-template-columns: 1fr; }
  .hud-actions time { text-align: left; }
  .arena { height: 690px; min-height: 690px; }
  .arena-floor { object-fit: cover; object-position: center; opacity: 0.62; }
  .arena-map { width: 100%; height: 100%; left: 0; top: 0; transform: none; }
  .traffic-layer { display: none; }
  .lane-board {
    width: auto;
    height: auto;
    padding: 12px 12px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    position: absolute;
    z-index: 9;
    inset: 290px 0 auto;
  }
  .lane-station, .lane-station:nth-child(n) {
    width: auto;
    min-height: 56px;
    padding: 6px;
    grid-template-columns: 24px 1fr;
    gap: 6px;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    box-shadow: none;
  }
  .lane-station:hover { transform: none; }
  .lane-station.is-struck { animation: mobile-station-strike 620ms ease; }
  .lane-mark { width: 24px; height: 24px; }
  .lane-copy b { font-size: 14px; }
  .lane-copy strong { font-size: 7px; }
  .lane-copy small, .lane-copy > span { display: none; }
  .hero-machine { width: min(92vw, 520px); top: 15%; }
  .hero-status { top: calc(100% - 2px); }
  .arena-corner { bottom: 10px; }
  .receipt-deck { padding: 22px 14px; }
  .receipt-deck header { grid-template-columns: 1fr; gap: 10px; }
  .receipt-deck header p { text-align: left; }
  .receipt-row { grid-template-columns: 34px 1fr auto; gap: 9px; }
  .receipt-row > span, .receipt-row > time { display: none; }
  .truth-rail { padding: 14px 14px calc(72px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr; gap: 8px; }
  .truth-rail a { margin-left: 0; }
}

@keyframes mobile-station-strike {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(0.92); }
  70% { transform: scale(1.04); }
}

@media (max-width: 420px) {
  .wordmark { font-size: 13px; }
  .lane-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena { height: 790px; min-height: 790px; }
  .hero-machine { top: 14%; }
  .arena-corner { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .event-hand, .traffic-layer { display: none !important; }
}