:root {
  color-scheme: dark;
  --ink: #f5f7ff;
  --muted: #a9b2c8;
  --panel: #0b1120;
  --line: rgba(255, 255, 255, 0.12);
  --lime: #c8ff36;
  --green: #66f6b3;
  --cyan: #4ee7ff;
  --violet: #896cff;
  --orange: #ff9d43;
  --red: #ff4866;
  --sand: #e6bd70;
  --display: "Arial Narrow", "Aptos Display", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --body: Inter, "Aptos", "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #040711; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  background:
    radial-gradient(circle at 13% 3%, rgba(65, 92, 255, 0.24), transparent 30rem),
    radial-gradient(circle at 93% 14%, rgba(0, 226, 180, 0.12), transparent 32rem),
    linear-gradient(145deg, #060a16 0%, #040711 52%, #08101d 100%);
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.16;
  pointer-events: none;
}

.ambient-one { top: 22%; left: -22rem; background: #6236ff; }
.ambient-two { right: -21rem; bottom: 2%; background: #00d8a6; }

.app { width: min(1440px, 100%); margin: 0 auto; }

.runland-nav {
  min-height: 42px;
  padding: 8px clamp(14px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #aeb8ce;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(3, 7, 17, 0.72);
  backdrop-filter: blur(14px);
}

.runland-nav a {
  color: #d7deee;
  text-decoration: none;
  transition: color .2s ease;
}

.runland-nav a:hover { color: var(--lime); }
.runland-nav strong { font-weight: 700; }

.topbar {
  min-height: 92px;
  padding: 13px clamp(14px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(110px, 1fr);
  align-items: center;
  gap: 20px;
}

.brand { display: flex; align-items: center; gap: 11px; }

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #07100e;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 1000;
  font-style: italic;
  border-radius: 12px 4px 12px 4px;
  background: linear-gradient(135deg, var(--lime), var(--green));
  box-shadow: 0 0 24px rgba(155, 255, 74, 0.3);
  transform: skewX(-5deg);
}

.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font: 950 21px/1 var(--display); font-style: italic; letter-spacing: .04em; }
.brand-copy small { margin-top: 5px; color: #7d89a4; font-size: 9px; font-weight: 800; letter-spacing: .22em; }

.scoreboard {
  display: flex;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  overflow: hidden;
  background: #070b15;
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
}

.score-item {
  min-width: 112px;
  padding: 9px 17px 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  border-left: 1px solid rgba(255,255,255,.08);
}

.score-item:first-child { border-left: 0; }
.score-item span { grid-column: 1 / -1; color: #7d88a2; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.score-item strong { font: 900 25px/1 var(--display); font-style: italic; letter-spacing: .03em; }
.score-item small { padding: 0 0 2px 5px; color: #6f7a91; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.score-pb strong { color: var(--lime); text-shadow: 0 0 16px rgba(200,255,54,.28); }

.sound-button {
  justify-self: end;
  min-width: 98px;
  min-height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #d7deed;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}

.sound-button[aria-pressed="false"] { color: #747e94; }
.sound-icon { color: var(--lime); font-weight: 900; }
.sound-button[aria-pressed="false"] .sound-icon { color: #747e94; }
#soundLabel { font-size: 9px; font-weight: 900; letter-spacing: .14em; }

main { padding: 0 clamp(10px, 2.4vw, 34px) 50px; }

.game-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(7, 12, 24, .92);
  box-shadow: 0 30px 80px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.06);
}

.status-strip {
  min-height: 42px;
  padding: 6px 14px 6px 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  color: #b7c0d5;
  background: #090f1d;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.live-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}

.live-label span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: livePulse 1.8s infinite;
}

@keyframes livePulse { 50% { opacity: .35; } }

.status-text { color: #eef2fb; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-align: center; }
.status-text.good { color: var(--lime); }
.status-text.bad { color: var(--red); }

.wind-box {
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--display);
}

.wind-box span { color: #68748d; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.wind-box strong { color: var(--cyan); font-size: 17px; font-style: italic; }
.wind-box small { color: #657088; font-size: 7px; font-weight: 800; }

.stadium {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(134, 161, 255, .38), transparent 36%),
    linear-gradient(#101a3b 0 31%, #080d1b 31% 51%, #193d35 51% 100%);
  user-select: none;
  touch-action: manipulation;
}

.stadium::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,10,20,.35), transparent 18% 82%, rgba(8,10,20,.35)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.025) 80px 81px);
}

.stadium::after {
  content: "LONG JUMP  •  KUMAMOTO  •  LONG JUMP  •  KUMAMOTO  •  LONG JUMP  •  KUMAMOTO";
  position: absolute;
  z-index: 2;
  top: 44%;
  left: 0;
  width: 100%;
  height: 22px;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.3);
  font: 900 9px/1 var(--display);
  letter-spacing: .9em;
  white-space: nowrap;
  background: linear-gradient(90deg, #315d50, #154237, #315d50);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(0,0,0,.25);
}

.stadium-ring {
  position: absolute;
  z-index: 0;
  top: -47%;
  left: 4%;
  width: 92%;
  height: 85%;
  border: 2px solid rgba(179, 202, 255, .21);
  border-radius: 0 0 50% 50%;
  box-shadow: 0 0 60px rgba(143, 170, 255, .15);
}

.crowd {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #090e1c;
  background-image:
    radial-gradient(circle, #80e8ff 0 1px, transparent 1.5px),
    radial-gradient(circle, #ffcf75 0 1px, transparent 1.5px),
    radial-gradient(circle, #bc8cff 0 1px, transparent 1.5px);
  background-size: 23px 17px, 31px 23px, 37px 19px;
  opacity: .58;
}

.crowd-back { top: 18%; height: 14%; transform: perspective(250px) rotateX(-5deg); }
.crowd-front { top: 31%; height: 14%; opacity: .82; border-top: 1px solid rgba(255,255,255,.08); }

.floodlight {
  position: absolute;
  z-index: 3;
  top: 2%;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 2px;
  background: #171d2e;
  box-shadow: 0 0 50px rgba(191,220,255,.4);
}

.floodlight-left { left: 3%; transform: rotate(8deg); }
.floodlight-right { right: 3%; transform: rotate(-8deg); }
.floodlight i { width: 12px; height: 8px; background: #eaf7ff; box-shadow: 0 0 13px #c9efff; }

.field-floor {
  position: absolute;
  z-index: 0;
  inset: 51% 0 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 50%, transparent 50%) 0 0 / 120px 100%,
    linear-gradient(#1f5a47, #0e3029);
}

.runway {
  position: absolute;
  z-index: 4;
  left: -1%;
  right: 34%;
  bottom: 8%;
  height: 27%;
  transform: perspective(650px) rotateX(3deg);
  transform-origin: bottom;
  background:
    repeating-linear-gradient(105deg, rgba(255,255,255,.018) 0 3px, transparent 3px 9px),
    linear-gradient(#983846, #6e2333 48%, #401b2b);
  box-shadow: 0 -7px 28px rgba(0,0,0,.26), inset 0 0 30px rgba(255,255,255,.03);
}

.runway-line { position: absolute; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,.76); }
.line-top { top: 8%; }
.line-bottom { bottom: 8%; }
.runway-center { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,.08); }

.takeoff-zone {
  position: absolute;
  z-index: 5;
  left: 55.5%;
  bottom: 8%;
  width: 8.5%;
  height: 27%;
  display: flex;
  justify-content: center;
  background: linear-gradient(90deg, transparent, rgba(200,255,54,.17));
  border-right: 1px dashed rgba(200,255,54,.72);
}

.takeoff-zone span {
  position: absolute;
  top: 9%;
  color: var(--lime);
  font: 900 7px/1 var(--display);
  letter-spacing: .12em;
  white-space: nowrap;
}

.takeoff-board {
  position: absolute;
  z-index: 6;
  left: 63.5%;
  bottom: 8%;
  width: 1%;
  min-width: 9px;
  height: 27%;
  background: #f7f5e9;
  border-left: 3px solid #d7d3c4;
  box-shadow: 0 0 13px rgba(255,255,255,.3);
}

.foul-line {
  position: absolute;
  z-index: 7;
  left: 65%;
  bottom: 8%;
  width: 2px;
  height: 31%;
  background: var(--red);
  box-shadow: 0 0 10px rgba(255,72,102,.75);
}

.foul-line span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  padding-bottom: 4px;
  color: var(--red);
  font: 900 7px/1 var(--display);
  letter-spacing: .1em;
  transform: translateX(-50%);
}

.sand-pit {
  position: absolute;
  z-index: 4;
  left: 66%;
  right: 1.5%;
  bottom: 7.3%;
  height: 29%;
  overflow: hidden;
  border: 6px solid #e6e7e3;
  border-radius: 3px 18px 18px 3px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.2) 0 1px, transparent 2px) 0 0 / 14px 13px,
    linear-gradient(115deg, #d6a95a, #eccb87 58%, #d4a04e);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 0 25px rgba(129,74,16,.22);
}

.sand-texture { position: absolute; width: 70%; height: 1px; background: rgba(127,77,25,.22); transform: rotate(-4deg); }
.sand-one { left: 9%; top: 38%; }
.sand-two { left: 23%; top: 68%; }

.distance-scale { position: absolute; inset: auto 3% 8px; height: 15px; color: rgba(88,54,21,.72); font: 900 8px/1 var(--display); }
.distance-scale span { position: absolute; bottom: 0; transform: translateX(-50%); }
.distance-scale span::before { content: ""; position: absolute; left: 50%; bottom: 13px; width: 1px; height: 5px; background: rgba(88,54,21,.5); }

.legend-line { position: absolute; top: 0; bottom: 0; left: 95%; width: 2px; background: rgba(186,35,57,.6); }
.legend-line span { position: absolute; top: 6px; left: 50%; color: #9c1f32; font: 900 8px/1 var(--display); transform: translateX(-50%); }

.athlete {
  --x: 0px;
  --y: 0px;
  --rot: 0deg;
  position: absolute;
  z-index: 12;
  left: 0;
  bottom: 13.5%;
  width: clamp(92px, 11vw, 156px);
  aspect-ratio: 3 / 2;
  pointer-events: none;
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--rot));
  transform-origin: 54% 74%;
  will-change: transform;
  filter: drop-shadow(0 10px 6px rgba(0,0,0,.5));
}

.athlete img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: screen;
  filter: saturate(1.22) contrast(1.12);
  pointer-events: none;
}

.athlete.running { animation: runnerBob .15s steps(2, end) infinite; }
.athlete.charging { filter: drop-shadow(0 0 13px rgba(200,255,54,.35)) drop-shadow(0 10px 6px rgba(0,0,0,.5)); }

@keyframes runnerBob {
  0% { margin-bottom: 0; }
  50% { margin-bottom: 4px; }
}

.speed-trail {
  position: absolute;
  z-index: -1;
  top: 46%;
  right: 70%;
  width: 0;
  height: 23%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(78,231,255,.42));
  clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 70%);
  transition: width .15s, opacity .15s;
}

.athlete.fast .speed-trail { width: 90%; opacity: 1; }

.landing-mark {
  position: absolute;
  z-index: 11;
  bottom: 9%;
  left: 72%;
  width: 3px;
  height: 25%;
  background: #10131b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
  transform: rotate(2deg);
}

.landing-mark span {
  position: absolute;
  left: 50%;
  top: -25px;
  min-width: 51px;
  padding: 5px 7px;
  color: #07100e;
  font: 900 11px/1 var(--display);
  text-align: center;
  border-radius: 4px;
  background: var(--lime);
  transform: translateX(-50%);
  box-shadow: 0 4px 13px rgba(0,0,0,.3);
}

.sand-splash { position: absolute; z-index: 13; left: 80%; bottom: 19%; width: 1px; height: 1px; opacity: 0; }
.sand-splash.active { animation: splashFade .85s ease-out; }
.sand-splash i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #f1d398; box-shadow: 0 0 8px rgba(255,227,175,.55); }
.sand-splash i:nth-child(1) { --sx:-42px; --sy:-32px; }
.sand-splash i:nth-child(2) { --sx:-20px; --sy:-50px; }
.sand-splash i:nth-child(3) { --sx:8px; --sy:-55px; }
.sand-splash i:nth-child(4) { --sx:30px; --sy:-35px; }
.sand-splash i:nth-child(5) { --sx:45px; --sy:-20px; }
.sand-splash.active i { animation: sandParticle .65s ease-out forwards; }

@keyframes splashFade { 0%,75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sandParticle { from { transform: translate(0,0) scale(.5); } to { transform: translate(var(--sx), var(--sy)) scale(0); } }

.countdown {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: 1000 clamp(86px, 15vw, 190px)/1 var(--display);
  font-style: italic;
  text-shadow: 0 0 60px rgba(78,231,255,.55);
  background: rgba(4,8,18,.28);
  backdrop-filter: blur(2px);
  animation: countPop .72s both;
}

.countdown.go { color: var(--lime); font-size: clamp(74px, 13vw, 160px); }
@keyframes countPop { 0% { opacity: 0; transform: scale(.6); } 28% { opacity: 1; transform: scale(1); } 100% { opacity: .3; transform: scale(1.12); } }

.start-overlay,
.result-panel {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: linear-gradient(90deg, rgba(4,7,16,.92), rgba(5,9,20,.55) 55%, rgba(4,7,16,.88));
  backdrop-filter: blur(4px);
  overflow: auto;
}

.start-overlay[hidden], .result-panel[hidden], .countdown[hidden], .landing-mark[hidden], .new-record[hidden] { display: none; }

.start-card { width: min(760px, 94%); text-align: center; }
.event-label,
.result-kicker {
  display: inline-flex;
  padding: 6px 10px;
  color: var(--lime);
  font: 900 9px/1 var(--display);
  letter-spacing: .2em;
  border: 1px solid rgba(200,255,54,.4);
  border-radius: 999px;
  background: rgba(200,255,54,.08);
}

.start-card h1 {
  margin: 12px 0 18px;
  font: 1000 clamp(34px, 5.5vw, 68px)/.96 var(--display);
  font-style: italic;
  letter-spacing: -.05em;
}

.start-card h1 em { color: var(--lime); font-style: inherit; text-shadow: 0 0 24px rgba(200,255,54,.24); }

.player-entry { width: min(650px, 100%); margin: 0 auto 10px; }
.player-entry label { display: grid; grid-template-columns: auto minmax(150px, 260px); align-items: center; justify-content: center; gap: 12px; }
.player-entry label span { color: var(--lime); font: 900 12px/1 var(--display); letter-spacing: .12em; }
.player-entry input { width: 100%; min-height: 42px; padding: 0 13px; color: #fff; font-size: 16px; font-weight: 800; border: 1px solid rgba(255,255,255,.22); border-radius: 7px; outline: 0; background: rgba(3,8,17,.78); }
.player-entry input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(200,255,54,.12); }
.player-entry input::placeholder { color: #717c93; font-weight: 600; }
.player-entry p { min-height: 16px; margin: 3px 0 0; color: var(--red); font-size: 12px; text-align: center; }

.how-to {
  width: min(650px, 100%);
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: left;
}

.how-to > div {
  min-height: 72px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
}

.how-to b {
  flex: 0 0 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #07100e;
  font: 900 14px/1 var(--display);
  border-radius: 50%;
  background: var(--lime);
}

.how-to span { display: flex; flex-direction: column; gap: 4px; }
.how-to strong { font-size: 11px; line-height: 1.4; }
.how-to small { color: #8e99b1; font-size: 8px; line-height: 1.35; }

.start-button,
.continue-button {
  min-width: 220px;
  min-height: 50px;
  padding: 0 24px;
  color: #06100d;
  font-weight: 1000;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--lime), #71f7a6);
  box-shadow: 0 12px 30px rgba(118,247,166,.2);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.start-button:hover, .continue-button:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(118,247,166,.3); }
.start-button:active, .continue-button:active { transform: translateY(1px); }
.start-button span, .continue-button span { margin-left: 18px; }
.start-card > p { margin: 13px 0 0; color: #7f8ba4; font-size: 9px; }

.result-panel { background: rgba(2,5,13,.74); }
.result-card {
  width: min(470px, 94%);
  padding: 25px 28px 24px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(18,28,47,.98), rgba(7,11,21,.98));
  box-shadow: 0 30px 80px rgba(0,0,0,.54), inset 0 1px rgba(255,255,255,.08);
}

.result-kicker.foul { color: var(--red); border-color: rgba(255,72,102,.42); background: rgba(255,72,102,.08); }
.result-distance { margin: 8px 0 0; display: flex; justify-content: center; align-items: baseline; }
.result-distance strong { font: 1000 clamp(68px, 10vw, 105px)/.9 var(--display); font-style: italic; letter-spacing: -.045em; }
.result-distance small { margin-left: 6px; color: var(--lime); font: 900 25px/1 var(--display); }
.result-distance.is-foul strong { color: var(--red); font-size: clamp(50px, 8vw, 78px); letter-spacing: .02em; }
.result-distance.is-foul small { display: none; }
.result-card h2 { margin: 5px 0 17px; color: var(--lime); font: 1000 18px/1 var(--display); font-style: italic; letter-spacing: .08em; }
.result-data { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; }
.result-data div { min-height: 52px; padding: 9px 5px; display: flex; flex-direction: column; gap: 5px; border-left: 1px solid rgba(255,255,255,.08); }
.result-data div:first-child { border-left: 0; }
.result-data span { color: #7d89a2; font-size: 8px; font-weight: 800; }
.result-data b { font: 900 14px/1 var(--display); }
.new-record { margin: 14px 0 0; color: var(--lime); font: 1000 12px/1 var(--display); letter-spacing: .16em; animation: recordGlow 1s ease-in-out infinite alternate; }
@keyframes recordGlow { to { text-shadow: 0 0 18px var(--lime); } }
.global-save-status { min-height: 18px; margin: 12px 0 -5px; color: #aebad0; font-size: 12px; }
.global-save-status.success { color: var(--lime); }
.global-save-status.error { color: #ff9aab; }
.continue-button { min-width: 190px; min-height: 44px; margin-top: 18px; }

.performance-panel {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, #090e1b, #0c1323, #090e1b);
}

.meter-block, .runway-progress-block { min-width: 0; }
.meter-head { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meter-head span { color: #77839c; font: 900 8px/1 var(--display); letter-spacing: .13em; }
.meter-head strong { font: 900 14px/1 var(--display); font-style: italic; }
.meter-block > small, .runway-progress-block > small { display: block; margin-top: 5px; color: #68748c; font-size: 8px; }

.speed-meter, .angle-meter, .runway-progress {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
}

.speed-meter > span, .angle-meter > span, .runway-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #3d55ff, var(--cyan), var(--lime));
  box-shadow: 0 0 12px rgba(78,231,255,.35);
  transition: width .08s linear;
}

.angle-meter > span { background: linear-gradient(90deg, #ff7b48, var(--lime) 65%, #ff5570); }
.runway-progress > span { background: linear-gradient(90deg, var(--violet), #cf60ff); }
.speed-target, .angle-target, .runway-progress i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: white; box-shadow: 0 0 7px white; }
.speed-target { left: 90%; }
.angle-target { left: 58%; width: 15%; opacity: .45; background: var(--lime); }
.runway-progress i { left: 97.5%; background: var(--red); box-shadow: 0 0 7px var(--red); }

.controls {
  padding: 13px 18px 8px;
  display: grid;
  grid-template-columns: 1fr minmax(160px, .7fr) 1fr;
  gap: 10px;
  background: #070b15;
}

.controls,
.controls button,
.controls button * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.controls button {
  min-height: 67px;
  position: relative;
  overflow: hidden;
  color: #edf2ff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: linear-gradient(145deg, #151e31, #0c1220);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.22);
  cursor: pointer;
  touch-action: none;
  transition: transform .08s, border-color .12s, background .12s;
}

.controls button * { pointer-events: none; }

.controls button::after { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(135deg, rgba(78,231,255,.22), transparent); transition: opacity .12s; }
.controls button:hover { border-color: rgba(78,231,255,.42); }
.controls button:active, .controls button.pressed { transform: translateY(2px) scale(.992); border-color: var(--cyan); background: #14273a; }
.controls button:active::after, .controls button.pressed::after { opacity: 1; }
.controls button strong { position: relative; z-index: 1; font: 1000 18px/1 var(--display); font-style: italic; letter-spacing: .08em; }
.controls button small { position: relative; z-index: 1; display: block; margin-top: 5px; color: #728099; font-size: 8px; font-weight: 800; }

.foot {
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #071018;
  font: 1000 14px/1 var(--display);
  border-radius: 50%;
  background: var(--cyan);
  transform: translateY(-50%);
}

.right-button .foot { left: auto; right: 16px; background: var(--violet); color: white; }
.jump-button { border-color: rgba(200,255,54,.32) !important; background: linear-gradient(145deg, #284024, #111d19) !important; }
.jump-button .jump-arrow { position: absolute; left: 16px; top: 50%; color: var(--lime); font-size: 27px; font-weight: 900; transform: translateY(-55%); }
.jump-button.charging { box-shadow: 0 0 25px rgba(200,255,54,.18), inset 0 0 22px rgba(200,255,54,.11); border-color: var(--lime) !important; }
.keyboard-help { margin: 0; padding: 5px 15px 13px; color: #66728a; font-size: 8px; text-align: center; background: #070b15; }

.records {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(260px, .72fr) 1.5fr;
  gap: 14px;
}

.record-main, .attempt-history {
  min-height: 200px;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(15,23,39,.94), rgba(6,10,19,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}

.record-main { position: relative; overflow: hidden; }
.record-main::after { content: "PB"; position: absolute; right: -6px; bottom: -26px; color: rgba(255,255,255,.035); font: 1000 130px/1 var(--display); font-style: italic; }
.record-tag { color: var(--lime); font: 900 8px/1 var(--display); letter-spacing: .17em; }
.record-main h2, .history-head h2 { margin: 8px 0 0; font-size: 15px; }
.record-value { margin: 17px 0 5px; display: flex; align-items: baseline; }
.record-value strong { color: var(--lime); font: 1000 58px/.9 var(--display); font-style: italic; letter-spacing: -.04em; }
.record-value span { margin-left: 6px; color: #919cb3; font: 900 16px/1 var(--display); }
.record-main p { margin: 10px 0 0; color: #7f8aa1; font-size: 10px; }

.history-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }
.history-head h2 { margin: 0; }
.history-head span { color: #68748b; font: 900 8px/1 var(--display); letter-spacing: .14em; }
.history-list { display: grid; gap: 7px; }
.history-item {
  min-height: 34px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 33px 70px 1fr auto;
  align-items: center;
  gap: 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.045);
}
.history-item .history-rank { color: #6e7990; font: 900 8px/1 var(--display); letter-spacing: .1em; }
.history-item strong { font: 900 17px/1 var(--display); font-style: italic; }
.history-item strong.foul { color: var(--red); font-size: 12px; letter-spacing: .08em; }
.history-item span { color: #7b879e; font-size: 9px; }
.history-item small { color: #616d84; font-size: 8px; text-align: right; }
.empty-history { margin: 28px 0; color: #6e7990; font-size: 10px; text-align: center; }

.global-leaderboard {
  margin-top: 14px;
  padding: 22px 24px 18px;
  border: 1px solid rgba(200,255,54,.18);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(13,29,29,.96), rgba(6,10,19,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.global-board-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.global-board-head h2 { margin: 7px 0 0; font-size: 18px; }
.global-board-head button { min-width: 68px; min-height: 38px; color: #07100e; font-size: 13px; font-weight: 900; border: 0; border-radius: 999px; background: var(--lime); cursor: pointer; }
.global-board-meta { margin: 15px 0 9px; display: flex; justify-content: space-between; gap: 14px; color: #8b97ad; font-size: 13px; }
.global-board-meta strong { color: #dce5f4; font-size: 13px; }
.global-board-meta strong.saving { color: var(--cyan); }
.global-board-meta strong.error { color: #ff9aab; }
.global-list { display: grid; gap: 6px; }
.global-row { min-height: 44px; padding: 7px 11px; display: grid; grid-template-columns: 44px minmax(0,1fr) 100px 45px; align-items: center; gap: 10px; border-radius: 8px; background: rgba(255,255,255,.045); }
.global-row.is-you { box-shadow: inset 3px 0 var(--lime); background: rgba(200,255,54,.09); }
.global-rank { color: #93a0b6; font-size: 13px; }
.global-name { overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.global-score { color: #fff; font: 900 19px/1 var(--display); text-align: right; }
.global-date { color: #707d93; font-size: 12px; text-align: right; }
.global-row.rank-1 .global-score { color: #ffd96b; }
.global-empty { margin: 24px 0; color: #7f8ba1; font-size: 14px; text-align: center; }
.global-note { margin: 11px 0 0; color: #66738a; font-size: 12px; text-align: right; }

footer {
  min-height: 70px;
  padding: 20px clamp(18px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #667087;
  border-top: 1px solid rgba(255,255,255,.07);
}
footer span { font: 900 9px/1 var(--display); letter-spacing: .16em; }
footer small { font-size: 8px; }

button:focus-visible, a:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .scoreboard { grid-row: 2; grid-column: 1 / -1; width: 100%; }
  .score-item { flex: 1; min-width: 0; }
  .sound-button { grid-column: 2; grid-row: 1; }
  .stadium { min-height: 420px; }
  .performance-panel { grid-template-columns: 1fr 1fr; }
  .runway-progress-block { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .runland-nav strong { display: none; }
  .topbar { min-height: 78px; gap: 12px; }
  .brand-mark { width: 39px; height: 39px; font-size: 18px; }
  .brand-copy strong { font-size: 17px; }
  .sound-button { min-width: 42px; width: 42px; padding: 0; }
  #soundLabel { display: none; }
  .score-item { padding: 8px 8px 7px; }
  .score-item strong { font-size: 20px; }
  .score-item small { display: none; }
  main { padding-inline: 7px; }
  .game-frame { border-radius: 13px; }
  .status-strip { grid-template-columns: 1fr auto; padding-left: 11px; gap: 8px; }
  .live-label { display: none; }
  .status-text { text-align: left; font-size: 10px; }
  .stadium { min-height: 365px; }
  .stadium::after { top: 42%; }
  .crowd-back { top: 15%; }
  .crowd-front { top: 28%; }
  .field-floor { inset-block-start: 48%; }
  .runway { bottom: 7%; height: 29%; }
  .takeoff-zone, .takeoff-board { bottom: 7%; height: 29%; }
  .foul-line { bottom: 7%; height: 33%; }
  .sand-pit { bottom: 6%; height: 31%; border-width: 4px; }
  .distance-scale span:nth-child(even) { display: none; }
  .athlete { width: clamp(78px, 23vw, 116px); bottom: 13%; }
  .start-overlay, .result-panel { padding: 12px; }
  .start-card h1 { margin-bottom: 14px; }
  .how-to { grid-template-columns: 1fr; gap: 5px; }
  .how-to > div { min-height: 47px; padding: 7px 10px; }
  .how-to b { flex-basis: 24px; height: 24px; font-size: 12px; }
  .start-button { min-height: 46px; }
  .player-entry label { grid-template-columns: 1fr; gap: 5px; text-align: left; }
  .player-entry input { min-height: 39px; }
  .player-entry p { text-align: left; }
  .result-card { padding: 21px 15px 19px; }
  .result-data b { font-size: 12px; }
  .performance-panel { padding: 12px; grid-template-columns: 1fr; gap: 11px; }
  .runway-progress-block { grid-column: auto; }
  .controls { padding: 10px 8px 6px; grid-template-columns: 1fr .9fr 1fr; gap: 6px; }
  .controls button { min-height: 72px; }
  .controls button strong { font-size: 14px; }
  .controls button small { font-size: 7px; }
  .foot { position: relative; left: auto; top: auto; width: 25px; height: 25px; margin: 0 auto 6px; font-size: 11px; transform: none; }
  .right-button .foot { left: auto; right: auto; }
  .jump-button .jump-arrow { position: relative; left: auto; top: auto; display: block; margin: 0 auto 3px; font-size: 22px; transform: none; }
  .keyboard-help { display: none; }
  .records { grid-template-columns: 1fr; }
  .record-main, .attempt-history { min-height: auto; padding: 18px; }
  .history-item { grid-template-columns: 29px 58px 1fr; gap: 6px; }
  .history-item small { grid-column: 3; text-align: left; }
  .global-leaderboard { padding: 18px 13px 15px; }
  .global-board-head h2 { font-size: 16px; }
  .global-board-meta { flex-direction: column; gap: 5px; }
  .global-row { grid-template-columns: 38px minmax(0,1fr) 82px; gap: 7px; }
  .global-date { display: none; }
  .global-score { font-size: 17px; }
  .global-note { text-align: left; }
  footer { flex-direction: column; align-items: flex-start; gap: 7px; }
}

@media (max-width: 390px) {
  .stadium { min-height: 350px; }
  .start-card h1 { font-size: 31px; }
  .start-card > p { display: none; }
  .how-to strong { font-size: 10px; }
  .how-to small { font-size: 7px; }
  .controls button { min-height: 67px; }
}

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