.racing-page .space-header{height:56px;max-width:1100px}
.racing-page main{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:calc(100% - 2*var(--gut));max-width:1100px;margin:auto}
.racing-page .page-hero{grid-column:1;grid-row:1;padding:4px 0 0;align-self:center}
.racing-page .hero-text{width:100%}
.racing-page .back-link{font-size:14px;min-height:30px;margin-bottom:4px}
.racing-page .eyebrow{font-size:14px;margin-bottom:4px}
.racing-page .page-hero h1{font-size:clamp(28px,3vw,40px);line-height:1.15}
.racing-page .page-content{grid-column:1/-1;width:100%}
.racing-gallery,.start-game{max-width:1100px;width:100%}
.racing-gallery{margin:0;max-width:360px}
.gallery-stage{height:160px;background:#101316;overflow:hidden}
.gallery-photo{display:block;width:100%;height:100%}
.gallery-photo[hidden]{display:none}
.gallery-photo img{display:block;width:100%;height:100%;object-fit:contain}
.gallery-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px;color:#a5afb5;font-size:14px}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}
.gallery-controls button{min-width:36px;min-height:32px;border:1px solid #343d43;background:transparent;color:#e7eaec;cursor:pointer;font-size:20px}
.gallery-controls button:hover{background:#1a2025}
.gallery-controls button:disabled{opacity:.3;cursor:default}
#gallery-count{font:400 14px var(--font-mono);white-space:nowrap}
.start-game{--steel:#bac5cf;--signal:#ff433c;--rotor-speed:1.36s;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);margin-bottom:0;color:#e6ebee}
.game-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.game-heading h2{font-size:28px;line-height:1.15;margin:0;letter-spacing:-.045em}
.game-heading p{color:#9eaab3;font-size:16px;line-height:1.4;margin:2px 0 0}
.grid-ticket{display:flex;align-items:center;gap:20px;border-left:2px solid #687680;padding-left:20px;text-align:right}
#driver-name{max-width:150px;font-size:17px;line-height:1.3}
#grid-position{font:400 30px/1 var(--font-mono);color:#e5ebef}
.launch-console{display:grid;grid-template-columns:minmax(0,1fr) 142px;border:1px solid #424d55;border-radius:8px 0 0 0;overflow:hidden;background:#11161a;box-shadow:0 1px 0 #6d788155 inset}
.gantry-area{align-content:center;padding:12px;min-width:0;background:repeating-linear-gradient(100deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(150deg,#273038,#11171c 47%,#1b242b)}
.gantry-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px;color:#c5cfd6}
#procedure-label{color:#a9b5bf;text-align:right}
.prestart-panel{display:flex;align-items:center;justify-content:center;gap:8px;height:32px;margin-top:8px;color:#9badba;font:400 14px var(--font-text);white-space:nowrap}
.prestart-panel b{font-weight:400}
.prestart-panel>span{width:32px;height:6px;background:#26343d;border:1px solid #536675;border-radius:1px}
[data-state=warmup] .prestart-panel{color:#99ceff}
[data-state=warmup] .prestart-panel>span{background:#62b2ff;box-shadow:0 0 12px #368de9;animation:prestart-flash .6s steps(1) infinite}
@keyframes prestart-flash{50%{opacity:.15}}
.light-board{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:300px;margin:8px auto 0;padding:16px 6px 14px;background:linear-gradient(#353e46 0 5px,#080b0e 6px 11px,transparent 11px),linear-gradient(0deg,#35404a 0 5px,#0b1014 6px 10px,transparent 10px);border-radius:4px}
.light-board::before,.light-board::after{content:'';position:absolute;top:2px;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#8c979f,#273139);box-shadow:0 0 0 1px #080b0d}
.light-board::before{left:4px}.light-board::after{right:4px}
.light-pair{position:relative;display:flex;flex-direction:column;gap:10px;align-items:center;padding:10px 4px 8px;border:1px solid #46515a;border-bottom:3px solid #080c0f;border-radius:4px 4px 9px 9px;background:linear-gradient(100deg,#3c454c,#1c2329 12%,#11161a 77%,#3d474f);box-shadow:3px 6px 8px #0008,inset 1px 0 0 #69757e55}
.light-pair i{--led:#30383b;position:relative;display:block;width:100%;aspect-ratio:1;border:4px solid #070b0e;border-radius:50%;background:radial-gradient(circle,var(--led) 0 1.35px,transparent 1.7px) center/5px 5px,#101619;box-shadow:0 1px 0 #6b777966,inset 0 2px 5px #000;isolation:isolate}
.light-pair i::before{content:'';position:absolute;inset:-7px -6px 25%;border-radius:50% 50% 18% 18%;border-top:5px solid #56616a;border-left:3px solid #2e3942;border-right:3px solid #151d23;box-shadow:0 -2px 2px #0008;z-index:-1}
.light-pair i::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#d9e8f116,transparent 55%);pointer-events:none}
[data-signal=green] .light-pair i{--led:#60c899;background-color:#102a21;box-shadow:0 0 16px #42bc7520,inset 0 0 7px #8cffa022}
[data-signal=red] .light-pair.on i{--led:#ff7060;background-color:#4a100c;box-shadow:0 0 19px #ff302e66,inset 0 0 12px #ff514c66}
.gantry-caption{min-height:42px;text-align:center;color:#b6c1c9;font-size:15px;line-height:1.4;margin:14px 0 0;font-variant-numeric:tabular-nums}
.power-unit{align-content:center;padding:12px;border-left:1px solid #414c54;background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 3px),#151c22;min-width:0}
.power-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;font-size:14px;color:#b9c5cd}
.engine-indicator{color:#9ab7ca;font-size:14px}
.engine-indicator::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#71bf9b;margin-right:5px}
.turbo-housing{position:relative;width:64px;height:64px;margin:12px auto 8px;border-radius:50%;background:radial-gradient(circle,#0a1014 0 52%,#4b5963 53% 55%,#172128 56% 64%,#81909b 65% 66%,#252e36 67%);box-shadow:0 3px 6px #0009,inset 0 1px 1px #adbac5}
.turbo-rotor{position:absolute;inset:21%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#99a9b6 0deg 8deg,#34434e 9deg 16deg,#101920 17deg 30deg);animation:turbo-spin var(--rotor-speed) linear infinite;box-shadow:0 0 0 3px #070c10}
.turbo-hub{position:absolute;inset:41%;border:2px solid #71838e;border-radius:50%;background:radial-gradient(circle at 30% 25%,#a7b6c2,#37434e 70%);box-shadow:0 2px 3px #000}
@keyframes turbo-spin{to{transform:rotate(360deg)}}
.rpm-readout{display:flex;justify-content:center;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.rpm-readout strong{font:400 21px var(--font-mono);letter-spacing:-1px}
.rpm-readout>span{color:#93a1ac;font-size:14px}
.power-track{height:8px;margin:10px 0 12px;background:repeating-linear-gradient(90deg,transparent 0 8px,#151c22 8px 11px),#303c45;position:relative;isolation:isolate}
.power-track::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 8px,#151c22 8px 11px);pointer-events:none}
#power-fill{height:100%;width:12%;background:linear-gradient(90deg,#84aebf,#c2d5dc 65%,#e9a97d)}
.power-values{font-size:14px;margin:0;display:grid;gap:6px}
.power-values>div{display:flex;justify-content:space-between;gap:8px}
.power-values dt{color:#92a1ac}.power-values dd{margin:0;color:#d9e1e6}
.race-conversation{height:360px;min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#47545e #0e1419;display:flex;flex-direction:column;gap:10px;padding:14px;background:#0e1419;border:1px solid #343f48;border-left:0;border-radius:0 8px 0 0}
.race-message{max-width:94%;flex-shrink:0;font-size:17px;line-height:1.35}
.message-speaker{display:block;font-size:14px;color:#a0b1bf;margin-bottom:3px}
.race-message p{margin:0;max-width:65ch}
.race-message--team{align-self:flex-start}
.race-message--team p{padding:8px 12px;border-left:2px solid #819db3;background:#1c2730;border-radius:0 8px 8px 8px}
.race-message--driver{align-self:flex-end;text-align:right}
.race-message--driver p{padding:8px 12px;border-right:2px solid #d1b08a;background:#2b2926;border-radius:8px 0 8px 8px}
.race-message--driver .message-speaker{color:#c9b18f}
.race-message--reaction p{display:flex;align-items:baseline;gap:8px;padding:8px 14px}
.reaction-time{font:400 44px/1.05 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.06em;color:#f2dbc0}
.race-message--reaction small{font-size:16px;color:#c9b18f}
.reaction-caption{font-size:14px;color:#c9b18f}
.race-message--commentator{align-self:center;text-align:center;max-width:100%;color:#bac4cc}
.race-message--commentator .message-speaker{color:#e3e9ed}
.driver-controls{grid-column:1/-1;min-height:70px;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:10px 16px;border:1px solid #414d55;border-top:0;border-radius:0 0 8px 8px;background:linear-gradient(#232d34,#1b242c);box-shadow:0 -1px 0 #ffffff09 inset}
.driver-controls p{margin:0 auto 0 0;max-width:52ch;font-size:15px;line-height:1.4;color:#b6c3cc}
.radio-reply,.clutch-button{cursor:pointer;border:1px solid #71808b;border-radius:5px;color:#e4ebef;min-height:44px;padding:8px 14px;flex-shrink:0;background:#303d47;box-shadow:0 2px 0 #0a0e11;line-height:1.3;font-size:16px}
.radio-reply:hover{background:#41515d}
.radio-reply[hidden]{display:none}
.clutch-button{min-width:124px;background:linear-gradient(120deg,#b7c3cb,#8798a5);border:1px solid #e1e9ee;color:#0d1921;box-shadow:0 4px 0 #081015,0 5px 0 #4d5e6a;transform:skew(-5deg)}
.clutch-button span{display:block;font:400 19px/1.3 var(--font-display);letter-spacing:-.04em}
.clutch-button small{font-size:14px;display:block;margin-top:2px}
.clutch-button:hover:not(:disabled){filter:brightness(1.12)}
.clutch-button:active:not(:disabled){transform:skew(-5deg) translateY(3px);box-shadow:0 1px 0 #081015}
.clutch-button:disabled{opacity:.3;cursor:default}
.game-footnote{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:8px;font-size:14px;color:#99a9b5}
@media(max-width:900px){.start-game{grid-template-columns:1fr}.launch-console{grid-template-columns:minmax(0,1fr) 170px;border-radius:8px 8px 0 0}.race-conversation{height:340px;border-left:1px solid #343f48;border-top:0;border-radius:0}[data-state=result] .race-conversation{height:480px}.driver-controls{flex-wrap:wrap}.driver-controls p{flex:1 1 100%;max-width:none}}
@media(max-width:560px){.racing-page .space-header{height:auto;flex-wrap:wrap;gap:8px;padding-top:16px;padding-bottom:12px}.racing-page .header-links{width:100%;gap:28px}.racing-page main{grid-template-columns:1fr;gap:16px}.racing-page .page-hero{grid-row:1}.racing-gallery{grid-column:1;grid-row:2;width:100%;max-width:280px;justify-self:center}.gallery-stage{height:120px}.game-heading{align-items:flex-start}.game-heading p{max-width:22ch;font-size:16px}.grid-ticket{flex-direction:column;align-items:flex-end;gap:8px;padding-left:10px;min-width:105px}#driver-name{font-size:16px}.launch-console{grid-template-columns:minmax(0,1fr) 130px}.gantry-area{padding:12px 8px}.power-unit{padding:10px 8px}.light-board{gap:4px;padding-inline:0}.light-pair{padding-inline:2px}.light-pair i{border-width:2px}.prestart-panel>span{width:12px}.gantry-header{font-size:14px}.race-conversation{padding:12px}.driver-controls{padding:12px;gap:12px}.game-footnote{font-size:14px}}
@media(prefers-reduced-motion:reduce){.turbo-rotor,[data-state=warmup] .prestart-panel>span{animation:none}}
