.games-page {
  --track-blue: #78c8ee;
  --track-green: #79b84b;
  --track-red: #e53c2f;
}

.arcade-ticker { background: var(--blue); color: white; }
.arcade-ticker b { color: var(--yellow); }

.games-hero {
  min-height: 650px;
  padding: clamp(65px, 9vw, 125px) clamp(18px, 6vw, 90px);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
  border-bottom: 4px solid var(--ink);
  background:
    linear-gradient(115deg, rgba(255,255,255,0.15), transparent 42%),
    var(--blue);
  color: white;
}

.games-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(78px, 11.2vw, 168px);
  line-height: 0.78;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.games-hero h1 i {
  color: var(--yellow);
  font-style: normal;
  text-shadow: 6px 6px 0 var(--ink);
}

.games-hero > div > p:last-child {
  max-width: 670px;
  margin: 35px 0 0;
  font-size: clamp(19px, 2vw, 25px);
}

.arcade-pass {
  padding: 27px;
  border: 4px solid var(--ink);
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--yellow);
  transform: rotate(2deg);
}

.arcade-pass > span,
.arcade-pass > small {
  font-family: var(--utility);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.arcade-pass > strong {
  display: block;
  margin: 17px 0;
  padding-block: 17px;
  border-block: 2px dashed var(--ink);
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 0.95;
  text-transform: uppercase;
}

.arcade-pass p { margin: 0 0 18px; font-family: var(--mono); font-weight: bold; }

.strong-game-section { background: var(--yellow); }

.strong-title {
  max-width: 1400px;
  margin: 0 auto 55px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(38px, 7vw, 100px);
  align-items: end;
}

.strong-title h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(80px, 11vw, 158px);
  line-height: 0.78;
  text-transform: uppercase;
}

.strong-title h2 i { color: var(--blue); font-style: normal; text-shadow: 5px 5px 0 var(--ink); }
.strong-rules > p { max-width: 580px; margin: 0 0 22px; font-size: 20px; }
.strong-rules ol { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.strong-rules li {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
}
.strong-rules li b { text-transform: uppercase; }

.strong-layout {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(310px, 0.6fr);
  gap: 35px;
  align-items: start;
}

.strong-console,
.strong-ranking-card {
  border: 4px solid var(--ink);
  background: var(--paper-light);
  box-shadow: 11px 11px 0 var(--ink);
}

.strong-console-top,
.ranking-card-head {
  padding: 11px 15px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  background: var(--ink);
  color: white;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
}

#strong-state-chip { color: var(--yellow); }

.strong-player-form { padding: 18px; border-bottom: 3px solid var(--ink); background: #d8edf5; }
.strong-player-form label { display: block; margin-bottom: 7px; font-family: var(--utility); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.strong-player-form > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.strong-player-form input {
  min-width: 0;
  padding: 13px;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: white;
  font-family: var(--mono);
}

.phase-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 3px solid var(--ink); }
.phase-strip span {
  padding: 11px 7px;
  border-right: 2px solid var(--ink);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}
.phase-strip span:last-child { border-right: 0; }
.phase-strip span.active { background: var(--orange); color: white; }
.phase-strip span.done { background: var(--green); color: white; }

.race-hud { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 3px solid var(--ink); }
.race-hud div { padding: 14px; border-right: 2px solid var(--ink); text-align: center; }
.race-hud div:last-child { border-right: 0; }
.race-hud small { display: block; font-family: var(--utility); font-size: 9px; font-weight: 900; letter-spacing: 0.12em; }
.race-hud strong { font-family: var(--mono); font-size: clamp(17px, 2.5vw, 26px); }

.strong-track {
  position: relative;
  height: clamp(260px, 32vw, 390px);
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
  background:
    linear-gradient(var(--track-blue) 0 55%, var(--track-green) 55% 67%, #c9824f 67% 100%);
}

.strong-track::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 13%;
  left: 0;
  height: 5px;
  background: white;
  box-shadow: 0 17px 0 rgba(255,255,255,0.55), 0 -17px 0 rgba(255,255,255,0.55);
}

.track-skyline {
  position: absolute;
  right: 0;
  bottom: 45%;
  left: 0;
  height: 32%;
  opacity: 0.22;
  background: repeating-linear-gradient(90deg, var(--ink) 0 35px, transparent 35px 53px);
  clip-path: polygon(0 65%, 7% 65%, 7% 20%, 15% 20%, 15% 52%, 24% 52%, 24% 5%, 35% 5%, 35% 70%, 44% 70%, 44% 35%, 53% 35%, 53% 58%, 61% 58%, 61% 15%, 73% 15%, 73% 62%, 84% 62%, 84% 28%, 94% 28%, 94% 72%, 100% 72%, 100% 100%, 0 100%);
}

.start-line,
.finish-line {
  position: absolute;
  z-index: 1;
  top: 55%;
  bottom: 0;
  width: 24px;
  padding-top: 8px;
  background: repeating-conic-gradient(var(--ink) 0 25%, white 0 50%) 0 / 24px 24px;
  color: transparent;
}
.start-line { left: 4%; }
.finish-line { right: 5%; }

.race-runner {
  position: absolute;
  z-index: 4;
  bottom: 17%;
  width: clamp(58px, 8vw, 92px);
  height: clamp(100px, 13vw, 155px);
  transform: translateX(-50%);
  transition: left 80ms linear;
}

.race-runner .runner-head {
  position: absolute;
  top: 0;
  left: 18%;
  width: 58%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 44px);
  line-height: 1;
}

.race-runner .runner-body {
  position: absolute;
  top: 35%;
  left: 22%;
  width: 58%;
  height: 38%;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  font-family: var(--utility);
  font-size: clamp(7px, 1vw, 10px);
  font-weight: 900;
  transform: rotate(-8deg);
}

.race-runner i,
.race-runner b {
  position: absolute;
  top: 67%;
  left: 35%;
  width: 65%;
  height: 6px;
  background: var(--ink);
  transform-origin: left center;
}
.race-runner i { transform: rotate(35deg); }
.race-runner b { transform: rotate(-28deg); }

.runner-player { left: 7%; }
.runner-player .runner-head { background: var(--blue); color: white; }
.runner-player .runner-body { background: var(--orange); color: white; }
.runner-strong { left: 70%; }
.runner-strong .runner-head { background: var(--yellow); color: var(--ink); }
.runner-strong .runner-body { background: var(--ink); color: white; }

.strong-track.running .race-runner i { animation: leg-a 190ms linear infinite alternate; }
.strong-track.running .race-runner b { animation: leg-b 190ms linear infinite alternate; }
@keyframes leg-a { to { transform: rotate(-34deg); } }
@keyframes leg-b { to { transform: rotate(38deg); } }

.countdown {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(28,25,23,0.66);
  color: var(--yellow);
  font-family: var(--display);
  font-size: clamp(110px, 22vw, 220px);
  line-height: 1;
  text-shadow: 7px 7px 0 var(--orange);
}
.countdown.visible { display: grid; }

.strong-message { min-height: 29px; margin: 0; padding: 14px 18px; background: white; font-family: var(--mono); font-size: 12px; font-weight: bold; }
.strong-controls { padding: 17px; display: grid; gap: 10px; background: var(--ink); }
.strong-controls [hidden],
.strong-result[hidden] { display: none; }
.strong-tap {
  min-height: 92px;
  border: 4px solid var(--ink);
  background: var(--orange);
  color: white;
  box-shadow: inset 0 -9px 0 rgba(0,0,0,0.2), 0 0 0 3px var(--yellow);
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 55px);
  line-height: 0.9;
  text-transform: uppercase;
  touch-action: manipulation;
  user-select: none;
}
.strong-tap small { display: block; margin-top: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; }
.strong-tap:active:not(:disabled) { transform: translateY(5px); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 0 0 3px var(--yellow); }
.strong-tap:disabled { cursor: not-allowed; filter: grayscale(0.8); opacity: 0.5; }

.strong-result { padding: 22px; border-top: 3px solid var(--ink); background: var(--green); color: white; text-align: center; }
.strong-result > span { display: block; font-family: var(--utility); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; }
.strong-result > strong { display: block; margin: 7px; font-family: var(--display); font-size: clamp(62px, 9vw, 110px); line-height: 0.9; }
.strong-result p { margin: 0; }
.strong-result .button { margin-top: 14px; }
.strong-track.resetting .race-runner { transition: none; }

.strong-ranking-card { transform: rotate(-1deg); }
.strong-ranking { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.strong-ranking li:not(.ranking-empty) {
  counter-increment: rank;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
}
.strong-ranking li:not(.ranking-empty)::before { content: counter(rank, decimal-leading-zero); font-weight: bold; }
.strong-ranking li:nth-child(1) { background: var(--yellow); }
.strong-ranking li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strong-ranking li span { font-weight: bold; }
.ranking-empty { padding: 30px 20px; font-style: italic; }
.ranking-note { margin: 0; padding: 16px; background: #e8dfc7; font-size: 12px; }

.old-game-wrap { background: var(--blue); }
.moved-game { max-width: 1400px; margin: 0 auto; padding: 0; }
.legacy-ranking { max-width: 900px; margin: 70px auto 0; border: 4px solid var(--ink); background: var(--paper-light); box-shadow: 10px 10px 0 var(--yellow); }
.legacy-ranking header { padding: 15px 18px; display: flex; justify-content: space-between; gap: 20px; background: var(--ink); color: white; font-family: var(--mono); font-size: 11px; }
.legacy-ranking header strong { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .strong-track.running .race-runner i,
  .strong-track.running .race-runner b { animation: none; }
  .race-runner { transition: none; }
}

@media (max-width: 950px) {
  .games-hero,
  .strong-title,
  .strong-layout { grid-template-columns: 1fr; }
  .arcade-pass { max-width: 600px; transform: none; }
  .strong-ranking-card { transform: none; }
}

@media (max-width: 620px) {
  .games-hero { min-height: auto; padding: 58px 17px 70px; }
  .games-hero h1 { font-size: clamp(70px, 23vw, 102px); }
  .strong-title h2 { font-size: clamp(73px, 23vw, 105px); }
  .strong-player-form > div { grid-template-columns: 1fr; }
  .strong-player-form .button { width: 100%; }
  .strong-console,
  .strong-ranking-card { box-shadow: 7px 7px 0 var(--ink); }
  .strong-console-top { align-items: start; flex-direction: column; gap: 4px; }
  .phase-strip span { font-size: 8px; }
  .race-hud div { padding-inline: 6px; }
  .race-hud strong { font-size: 15px; }
  .strong-track { height: 300px; }
  .strong-tap { min-height: 105px; }
  .legacy-ranking header { align-items: start; flex-direction: column; gap: 4px; }
}