:root {
  color-scheme: dark;
  --ink: #f4f8ff;
  --muted: #8795ad;
  --panel: #0b1424;
  --line: rgba(255,255,255,.12);
  --cyan: #43e7ff;
  --blue: #4e79ff;
  --orange: #ff8a32;
  --gold: #ffd451;
  --lime: #bfff46;
  --red: #ff5873;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
html { background: #050914; }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; font-size: 16px; background: radial-gradient(circle at 50% -15%,#152c54 0,#091220 34%,#050914 76%); }
button,input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.ambient { position: fixed; z-index: -1; width: 28rem; height: 28rem; border-radius: 50%; opacity: .13; filter: blur(100px); pointer-events: none; }
.ambient-a { top: 8%; left: -12rem; background: var(--cyan); }
.ambient-b { right: -12rem; bottom: 5%; background: var(--orange); }
.app { min-height: 100vh; }
.runland-nav { min-height: 42px; padding: 8px clamp(14px,3vw,38px); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #8f9db4; border-bottom: 1px solid rgba(255,255,255,.07); background: #050914d9; }
.runland-nav a { min-height: 30px; display: inline-flex; align-items: center; gap: 8px; color: #dbe7f7; font-size: 14px; font-weight: 800; text-decoration: none; }
.runland-nav a:hover { color: var(--cyan); }
.runland-nav strong { font-size: 13px; }
.topbar { min-height: 90px; padding: 13px clamp(14px,3vw,38px); display: grid; grid-template-columns: minmax(210px,1fr) minmax(390px,1.4fr) auto; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,#07101df2,#0e192bf2,#07101df2); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { width: 58px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; color: #09111d; border-radius: 8px 18px 8px 8px; background: linear-gradient(135deg,var(--gold),var(--orange)); box-shadow: 0 0 24px rgba(255,138,50,.22); font: 1000 22px/1 var(--display); transform: skewX(-7deg); }
.brand > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.brand strong { overflow: hidden; font: 1000 clamp(20px,2.4vw,31px)/.95 var(--display); font-style: italic; letter-spacing: .035em; white-space: nowrap; }
.brand small { margin-top: 5px; color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.scoreboard { min-height: 62px; display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #030812a6; }
.scoreboard > div { min-width: 0; padding: 8px 12px; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: 6px; border-left: 1px solid var(--line); }
.scoreboard > div:first-child { border-left: 0; }
.scoreboard span { flex-basis: 100%; color: #75849d; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-align: center; }
.scoreboard strong { font: 1000 clamp(20px,2.5vw,30px)/1 var(--display); font-style: italic; letter-spacing: .02em; }
.scoreboard small { color: #6e7c94; font-size: 9px; font-weight: 900; }
.scoreboard .score-best strong { color: var(--lime); }
.sound-button { min-width: 84px; min-height: 44px; padding: 0 13px; color: #dce7f6; border: 1px solid var(--line); border-radius: 999px; background: #111d30; cursor: pointer; }
.sound-button span { color: var(--cyan); margin-right: 6px; }
.sound-button b { font-size: 10px; letter-spacing: .08em; }
main { width: min(1180px,100%); margin: 0 auto; padding: 24px clamp(12px,2.5vw,28px) 42px; }
.game-shell { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: #080e1b; box-shadow: 0 30px 80px #0008; }
.status-strip { min-height: 41px; padding: 6px 15px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 10px; background: linear-gradient(90deg,#07101d,#111e32,#07101d); border-bottom: 1px solid var(--line); }
.live { color: var(--orange); font: 900 10px/1 var(--display); letter-spacing: .12em; }
.live i { width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .28; } }
#statusText { font-size: 14px; letter-spacing: .02em; text-align: center; }
#statusText.good { color: var(--lime); }
#statusText.bad { color: var(--red); }
.wind { justify-self: end; color: #7c8aa1; font-size: 10px; }
.wind small { margin-right: 7px; color: #65748d; font-weight: 900; letter-spacing: .1em; }
.wind b { color: var(--cyan); font: 900 17px/1 var(--display); }
.stadium { position: relative; min-height: 500px; overflow: hidden; isolation: isolate; user-select: none; background: radial-gradient(ellipse at 50% -10%,rgba(98,151,255,.48),transparent 42%),linear-gradient(#12224d 0 43%,#07101e 43% 58%,#173d35 58%); }
.stadium::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg,rgba(0,0,0,.28),transparent 17% 83%,rgba(0,0,0,.35)); }
.crowd { position: absolute; left: 0; width: 100%; background-color: #080d19; background-image: radial-gradient(circle,#7fe4ff 0 1px,transparent 1.5px),radial-gradient(circle,#ffd16f 0 1px,transparent 1.5px),radial-gradient(circle,#c596ff 0 1px,transparent 1.5px); background-size: 21px 17px,29px 23px,35px 19px; }
.crowd-upper { top: 16%; height: 14%; opacity: .48; }
.crowd-lower { top: 30%; height: 17%; opacity: .78; border-top: 1px solid rgba(255,255,255,.08); }
.lights { position: absolute; z-index: 5; top: 3%; display: flex; gap: 3px; padding: 5px; background: #1a2235; box-shadow: 0 0 48px rgba(207,237,255,.5); }
.light-left { left: 4%; transform: rotate(7deg); }
.light-right { right: 4%; transform: rotate(-7deg); }
.lights i { width: 12px; height: 8px; background: #f3fbff; box-shadow: 0 0 11px #dcf5ff; }
.stadium-banner { position: absolute; z-index: 3; top: 47%; left: 0; width: 100%; height: 29px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: rgba(255,255,255,.43); font: 900 10px/1 var(--display); letter-spacing: .65em; white-space: nowrap; background: linear-gradient(90deg,#9b3f16,#d56824,#9b3f16); border-block: 1px solid rgba(255,255,255,.14); }
.field { position: absolute; z-index: 4; left: -2%; right: -2%; bottom: -4%; height: 49%; overflow: hidden; perspective: 720px; background: linear-gradient(165deg,#43804f,#285d3d 48%,#173d32); box-shadow: 0 -16px 35px rgba(0,0,0,.28); }
.field::before { position: absolute; inset: 0; content: ""; opacity: .45; background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 66px),linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); }
.sector-line { position: absolute; z-index: 4; left: 14%; width: 92%; height: 2px; transform-origin: left; background: rgba(255,255,255,.84); box-shadow: 0 0 4px rgba(255,255,255,.25); }
.sector-top { top: 43%; transform: rotate(-13deg); }
.sector-bottom { top: 70%; transform: rotate(9deg); }
.distance-arc { position: absolute; z-index: 2; top: 28%; bottom: 0; width: 1px; border-left: 1px dashed rgba(255,255,255,.45); transform: skewX(-10deg); }
.distance-arc span { position: absolute; top: 3px; left: 5px; color: rgba(255,255,255,.7); font: 900 10px/1 var(--display); transform: skewX(10deg); }
.arc-5 { left: 34%; }.arc-10 { left: 52%; }.arc-15 { left: 70%; }.arc-20 { left: 88%; }
.throw-circle { position: absolute; z-index: 6; left: 9%; bottom: 12%; width: clamp(118px,16vw,178px); aspect-ratio: 2.1/1; border: 4px solid rgba(255,255,255,.95); border-radius: 50%; background: #8c9198; box-shadow: 0 6px 15px #0005,inset 0 0 0 2px #60666d; transform: perspective(230px) rotateX(58deg); }
.throw-circle i { position: absolute; right: -3%; top: 28%; width: 10px; height: 45%; border-radius: 7px; background: #f4f6f7; box-shadow: 1px 2px 3px #0005; }
.spin-trail { --spin-opacity: 0; --spin-duration: 1.2s; position: absolute; z-index: 9; left: 3.3%; bottom: 12%; width: clamp(150px,21vw,245px); height: 62%; opacity: 0; transform: perspective(360px) rotateX(67deg); pointer-events: none; transition: opacity .15s; }
.spin-trail.active { opacity: var(--spin-opacity); }
.spin-trail i { position: absolute; inset: 5%; border: 3px solid transparent; border-top-color: var(--cyan); border-right-color: rgba(67,231,255,.32); border-radius: 50%; animation: trailOrbit var(--spin-duration) linear infinite; filter: drop-shadow(0 0 5px rgba(67,231,255,.55)); }
.spin-trail i:nth-child(2) { inset: 17%; border-top-color: var(--gold); border-right-color: rgba(255,212,81,.25); animation-direction: reverse; animation-delay: -.16s; }
.spin-trail i:nth-child(3) { inset: 29%; border-width: 2px; border-top-color: var(--lime); animation-delay: -.29s; }
@keyframes trailOrbit { to { transform: rotate(360deg); } }
.athlete { --spin-angle: 0deg; --spin-tilt: 0deg; position: absolute; z-index: 11; left: 4.5%; bottom: 5%; width: clamp(145px,20vw,235px); height: 92%; transform: perspective(720px) rotateY(var(--spin-angle)) rotateZ(var(--spin-tilt)); transform-origin: 50% 82%; transform-style: preserve-3d; will-change: transform; filter: drop-shadow(0 10px 6px rgba(0,0,0,.52)); pointer-events: none; }
.athlete img { width: 100%; height: 100%; object-fit: contain; backface-visibility: visible; }
.athlete.charging { filter: drop-shadow(0 10px 6px rgba(0,0,0,.52)) drop-shadow(0 0 7px rgba(67,231,255,.22)); }
.athlete.aiming { animation: aimPulse .38s ease-in-out infinite alternate; }
.athlete.released { animation: releaseSnap .55s cubic-bezier(.17,.8,.2,1); }
@keyframes aimPulse { to { filter: drop-shadow(0 10px 6px rgba(0,0,0,.52)) drop-shadow(0 0 15px rgba(255,212,81,.48)); } }
@keyframes releaseSnap { 0% { transform: perspective(720px) rotateY(0deg) rotateZ(-5deg) scale(.98); } 38% { transform: perspective(720px) rotateY(0deg) rotateZ(8deg) translateX(7px) scale(1.035); } 100% { transform: perspective(720px) rotateY(0deg) rotateZ(0deg); } }
.shot { position: absolute; z-index: 14; left: 0; top: 0; width: clamp(13px,1.8vw,21px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%,#fff,#b7c3cf 20%,#606c79 54%,#19222c 100%); box-shadow: 0 0 10px #fff8,0 5px 6px #0006; will-change: transform; }
.impact-marker { position: absolute; z-index: 9; bottom: 24%; width: 3px; height: 28px; background: var(--gold); transform: translateX(-50%); box-shadow: 0 0 12px rgba(255,212,81,.8); }
.impact-marker i { position: absolute; left: 50%; bottom: -5px; width: 34px; height: 10px; border-radius: 50%; background: rgba(19,38,27,.68); transform: translateX(-50%); }
.impact-marker strong { position: absolute; left: 50%; bottom: 110%; padding: 4px 7px; color: #251706; border-radius: 5px; background: var(--gold); font: 900 12px/1 var(--display); white-space: nowrap; transform: translateX(-50%); }
.power-burst { position: absolute; z-index: 8; left: 12%; bottom: 28%; width: 70px; height: 70px; border: 3px solid var(--gold); border-radius: 50%; opacity: 0; transform: scale(.2); pointer-events: none; }
.power-burst.on { animation: burst .55s ease-out; }
@keyframes burst { 20% { opacity: .9; } to { opacity: 0; transform: scale(2.2); } }
.countdown { position: absolute; z-index: 35; inset: 0; display: grid; place-items: center; color: #fff; font: 1000 clamp(92px,16vw,190px)/1 var(--display); font-style: italic; text-shadow: 0 0 50px rgba(67,231,255,.45); background: rgba(3,7,16,.25); backdrop-filter: blur(2px); animation: countPop .7s both; }
.countdown.go { color: var(--lime); font-size: clamp(76px,14vw,156px); }
@keyframes countPop { from { opacity: 0; transform: scale(.65); } 35% { opacity: 1; transform: scale(1); } to { opacity: .25; transform: scale(1.12); } }
.start-overlay,.result-panel { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; overflow: auto; background: linear-gradient(90deg,rgba(3,7,16,.94),rgba(3,8,18,.62) 55%,rgba(3,7,16,.88)); backdrop-filter: blur(4px); }
.start-card { width: min(760px,95%); text-align: center; }
.event-chip,.result-chip { display: inline-flex; padding: 6px 10px; color: var(--gold); font: 900 10px/1 var(--display); letter-spacing: .16em; border: 1px solid rgba(255,212,81,.42); border-radius: 999px; background: rgba(255,212,81,.08); }
.start-card h1 { margin: 11px 0 14px; font: 1000 clamp(35px,5.4vw,67px)/.96 var(--display); font-style: italic; letter-spacing: -.05em; }
.start-card h1 em { color: var(--lime); font-style: inherit; }
.player-entry { width: min(620px,100%); margin: 0 auto 9px; }
.player-entry label { display: grid; grid-template-columns: auto minmax(160px,260px); align-items: center; justify-content: center; gap: 12px; }
.player-entry label span { color: var(--cyan); 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,.85); }
.player-entry input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(67,231,255,.12); }
.player-entry input::placeholder { color: #707d94; font-weight: 600; }
.player-entry p { min-height: 15px; margin: 3px 0 0; color: var(--red); font-size: 12px; }
.how-to { width: min(690px,100%); margin: 0 auto 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; text-align: left; }
.how-to > div { min-height: 66px; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.05); }
.how-to b { flex: 0 0 27px; height: 27px; display: grid; place-items: center; color: #071018; border-radius: 50%; background: var(--gold); }
.how-to span { display: flex; flex-direction: column; gap: 3px; }
.how-to strong { font-size: 12px; line-height: 1.4; }
.how-to small { color: #8c99b0; font-size: 10px; line-height: 1.35; }
.primary-button { min-width: 220px; min-height: 50px; padding: 0 23px; color: #071018; font-size: 15px; font-weight: 1000; border: 0; border-radius: 7px; background: linear-gradient(135deg,var(--gold),var(--orange)); box-shadow: 0 12px 29px rgba(255,138,50,.2); cursor: pointer; transition: transform .15s; }
.primary-button:hover { transform: translateY(-2px); }
.primary-button:active { transform: translateY(1px); }
.primary-button span { margin-left: 18px; }
.save-note { margin: 11px 0 0; color: #7f8ca3; font-size: 11px; }
.result-panel { background: rgba(2,5,13,.76); }
.result-card { width: min(470px,95%); padding: 24px 27px; text-align: center; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: linear-gradient(150deg,rgba(18,29,48,.98),rgba(6,10,20,.98)); box-shadow: 0 30px 80px #0009,inset 0 1px rgba(255,255,255,.07); }
.result-card > p { margin: 12px 0 3px; color: #8c98ae; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.result-distance { display: flex; justify-content: center; align-items: baseline; }
.result-distance strong { color: var(--gold); font: 1000 clamp(66px,10vw,100px)/.9 var(--display); font-style: italic; letter-spacing: -.035em; }
.result-distance small { margin-left: 6px; color: #8290a6; font: 900 20px/1 var(--display); }
.result-card h2 { margin: 6px 0 16px; color: var(--lime); font: 1000 19px/1 var(--display); font-style: italic; letter-spacing: .08em; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.result-stats div { min-height: 54px; padding: 9px 5px; display: flex; flex-direction: column; gap: 5px; border-left: 1px solid rgba(255,255,255,.08); }
.result-stats div:first-child { border-left: 0; }
.result-stats span { color: #7d899f; font-size: 11px; }
.result-stats b { font: 900 15px/1 var(--display); }
.new-record { margin: 13px 0 0; color: var(--lime); font: 1000 12px/1 var(--display); letter-spacing: .14em; animation: glow 1s infinite alternate; }
@keyframes glow { to { text-shadow: 0 0 18px var(--lime); } }
.global-save-status { min-height: 18px; margin: 11px 0 0; color: #a8b4c8; font-size: 12px; }
.global-save-status.success { color: var(--lime); }
.global-save-status.error { color: #ff9bae; }
.result-card .primary-button { min-height: 45px; margin-top: 12px; }
.throw-hud { padding: 13px 17px; display: grid; grid-template-columns: 1.5fr 1.5fr .65fr .75fr; gap: 9px; background: linear-gradient(90deg,#080d19,#0c1425,#080d19); border-top: 1px solid rgba(255,255,255,.08); }
.hud-item { min-height: 55px; padding: 7px 10px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.08); }
.hud-item:first-child { border-left: 0; }
.hud-item span { color: #748198; font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.hud-item strong { margin-top: 5px; font: 900 17px/1 var(--display); }
.meter-item > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.meter-item > div:first-child strong { margin: 0; }
.meter-track { position: relative; height: 9px; margin-top: 8px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.08); }
.meter-track > span { position: relative; z-index: 2; display: block; width: 0; height: 100%; transition: width .08s linear; }
.power-track > span { background: linear-gradient(90deg,var(--blue),var(--cyan),var(--lime),var(--gold)); box-shadow: 0 0 10px rgba(67,231,255,.35); }
.angle-track > span { background: linear-gradient(90deg,var(--blue),var(--cyan),var(--gold)); }
.sweet-zone,.angle-zone { position: absolute; z-index: 3; top: 0; bottom: 0; border-inline: 2px solid rgba(255,255,255,.9); background: rgba(191,255,70,.2); }
.sweet-zone { left: 88%; width: 12%; }
.angle-zone { left: 52%; width: 12%; }
.controls { padding: 12px 16px 7px; display: grid; grid-template-columns: 1fr minmax(160px,.82fr) 1fr; gap: 9px; background: #060a14; }
.controls,.controls button,.controls button * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.controls button { min-height: 72px; position: relative; color: #edf3ff; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: linear-gradient(145deg,#152039,#0b1220); box-shadow: inset 0 1px rgba(255,255,255,.05),0 7px 20px #0004; cursor: pointer; touch-action: none; transition: transform .08s,border-color .1s; }
.controls button * { pointer-events: none; }
.controls button:hover { border-color: rgba(67,231,255,.45); }
.controls button.active { transform: translateY(3px); border-color: var(--cyan); background: #11314b; }
.controls button > span { position: absolute; left: 15px; 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%); }
.controls .right > span { left: auto; right: 15px; color: #fff; background: var(--blue); }
.controls button strong { font: 1000 18px/1 var(--display); font-style: italic; letter-spacing: .07em; }
.controls button small { display: block; margin-top: 5px; color: #738097; font-size: 10px; }
.controls .throw-button { border-color: rgba(255,212,81,.4); background: linear-gradient(145deg,#4a3015,#21180f); }
.controls .throw-button > span { color: #201406; background: var(--gold); }
.controls .throw-button.ready { border-color: var(--lime); box-shadow: inset 0 1px rgba(255,255,255,.1),0 0 20px rgba(191,255,70,.2); }
.keyboard-help { margin: 0; padding: 5px 12px 12px; color: #69758b; font-size: 11px; text-align: center; background: #060a14; }
.records-grid { margin-top: 22px; display: grid; grid-template-columns: .75fr 1.4fr; gap: 13px; }
.personal-card,.history-card,.global-leaderboard { padding: 21px 23px; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; background: linear-gradient(145deg,rgba(15,24,41,.95),rgba(6,10,19,.95)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.section-tag { color: var(--cyan); font: 900 10px/1 var(--display); letter-spacing: .14em; }
.personal-card h2,.history-card h2,.global-leaderboard h2 { margin: 7px 0 0; font-size: 17px; }
.personal-distance { margin: 17px 0 7px; display: flex; align-items: baseline; }
.personal-distance strong { color: var(--lime); font: 1000 55px/.9 var(--display); font-style: italic; }
.personal-distance span { margin-left: 6px; color: #8995aa; font-weight: 900; }
.personal-card p { color: #7d899f; font-size: 13px; }
.history-list { margin-top: 12px; display: grid; gap: 6px; }
.history-row { min-height: 38px; padding: 6px 9px; display: grid; grid-template-columns: 36px 84px 1fr auto; align-items: center; gap: 8px; border-radius: 7px; background: rgba(255,255,255,.045); }
.history-row span { color: #738097; font-size: 12px; }
.history-row strong { font: 900 17px/1 var(--display); }
.history-row small { color: #667289; font-size: 11px; }
.empty,.global-empty { margin: 24px 0; color: #7c889e; font-size: 14px; text-align: center; }
.global-leaderboard { margin-top: 13px; border-color: rgba(67,231,255,.17); }
.global-board-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.global-board-head button { min-width: 68px; min-height: 38px; color: #061018; font-size: 13px; font-weight: 900; border: 0; border-radius: 999px; background: var(--cyan); cursor: pointer; }
.global-board-meta { margin: 15px 0 9px; display: flex; justify-content: space-between; gap: 12px; color: #8794aa; font-size: 13px; }
.global-board-meta strong { color: #dce5f3; font-size: 13px; }
.global-board-meta strong.saving { color: var(--cyan); }
.global-board-meta strong.error { color: #ff9bae; }
.global-list { display: grid; gap: 6px; }
.global-row { min-height: 44px; padding: 7px 11px; display: grid; grid-template-columns: 44px minmax(0,1fr) 110px 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(--cyan); background: rgba(67,231,255,.085); }
.global-rank { color: #92a0b5; 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 18px/1 var(--display); text-align: right; }
.global-date { color: #707c92; font-size: 12px; text-align: right; }
.global-row.rank-1 .global-score { color: #ffd369; }
.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: 18px; color: #657188; border-top: 1px solid rgba(255,255,255,.07); }
footer span { font: 900 10px/1 var(--display); letter-spacing: .13em; }
footer small { font-size: 11px; }
button:focus-visible,a:focus-visible,input:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
@media (max-width:900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .scoreboard { grid-column: 1/-1; grid-row: 2; width: 100%; }
  .sound-button { grid-column: 2; grid-row: 1; }
  .stadium { min-height: 445px; }
  .throw-hud { grid-template-columns: 1fr 1fr .7fr; }
  .throw-hud .hud-item:last-child { display: none; }
}
@media (max-width:680px) {
  .runland-nav strong { display: none; }
  .topbar { min-height: 78px; gap: 11px; }
  .brand-mark { width: 44px; height: 40px; font-size: 17px; }
  .brand strong { font-size: 19px; }
  .brand small { display: none; }
  .sound-button { min-width: 42px; width: 42px; padding: 0; }
  .sound-button b { display: none; }
  .sound-button span { margin: 0; }
  .scoreboard > div { padding: 8px 5px; }
  .scoreboard strong { font-size: 20px; }
  .scoreboard small { display: none; }
  main { padding: 12px 6px 32px; }
  .game-shell { border-radius: 13px; }
  .status-strip { grid-template-columns: 1fr auto; padding-inline: 10px; }
  .live { display: none; }
  #statusText { text-align: left; font-size: 12px; }
  .stadium { min-height: 390px; }
  .crowd-upper { top: 14%; }
  .crowd-lower { top: 29%; }
  .stadium-banner { top: 45%; }
  .field { height: 51%; }
  .athlete { left: 1%; width: clamp(122px,37vw,166px); height: 87%; }
  .throw-circle { left: 5%; width: 116px; }
  .start-overlay,.result-panel { padding: 10px; }
  .start-card h1 { margin: 8px 0 9px; font-size: 31px; }
  .player-entry { margin-bottom: 5px; }
  .player-entry label { grid-template-columns: 1fr; gap: 4px; text-align: left; }
  .player-entry p { text-align: left; }
  .how-to { grid-template-columns: 1fr; gap: 4px; margin-bottom: 9px; }
  .how-to > div { min-height: 42px; padding: 5px 8px; }
  .how-to b { flex-basis: 23px; height: 23px; font-size: 12px; }
  .how-to strong { font-size: 11px; }
  .how-to small { font-size: 9px; }
  .save-note { display: none; }
  .primary-button { min-height: 44px; }
  .result-card { padding: 18px 13px; }
  .result-distance strong { font-size: 59px; }
  .throw-hud { grid-template-columns: 1fr 1fr .62fr; padding: 9px 7px; gap: 4px; }
  .hud-item { padding: 5px; }
  .hud-item strong { font-size: 14px; }
  .controls { padding: 8px 6px 5px; grid-template-columns: 1fr 1.05fr 1fr; gap: 5px; }
  .controls button { min-height: 69px; }
  .controls button > span { position: relative; left: auto!important; right: auto!important; top: auto; width: 25px; height: 25px; margin: 0 auto 5px; font-size: 11px; transform: none; }
  .controls button strong { font-size: 14px; }
  .controls button small { font-size: 9px; }
  .keyboard-help { display: none; }
  .records-grid { grid-template-columns: 1fr; }
  .personal-card,.history-card,.global-leaderboard { padding: 17px 14px; }
  .history-row { grid-template-columns: 29px 76px 1fr; }
  .history-row small { display: none; }
  .global-board-meta { flex-direction: column; gap: 5px; }
  .global-row { grid-template-columns: 38px minmax(0,1fr) 92px; gap: 7px; }
  .global-date { display: none; }
  .global-score { font-size: 16px; }
  .global-note { text-align: left; }
  footer { flex-direction: column; align-items: flex-start; gap: 7px; }
}
@media (max-width:390px) {
  .stadium { min-height: 375px; }
  .start-card h1 { font-size: 28px; }
  .how-to > div { min-height: 39px; }
  .player-entry input { min-height: 38px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
}