* {box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;}
html,body {width:100%;height:100%;overflow:hidden;background:#03152f;font-family:'Arial Black',Arial,sans-serif;overscroll-behavior:none;touch-action:none;}
button {font:inherit;cursor:pointer;touch-action:manipulation;}
#canvas-container {position:absolute;inset:0;z-index:1;outline:none;}
#canvas-container canvas {display:block;width:100%;height:100%;}
#canvas-container {background:linear-gradient(150deg,#178ee7 0%,#0d6fc5 42%,#083a74 100%);}
#canvas-container[aria-busy="true"] canvas {visibility:hidden;}
#landscape-lock {display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:28px;color:#fff;background:linear-gradient(145deg,#03152f,#07539a);}
#landscape-lock strong {font:italic 900 clamp(26px,4vw,58px)/1 Impact,'Arial Black',sans-serif;color:#ffe51a;letter-spacing:.05em;text-shadow:3px 4px #001332;}
#landscape-lock span {font:700 clamp(13px,1.5vw,22px)/1.4 Arial,sans-serif;color:#d6efff;}
/* Desktop pointers stay landscape even when the browser window is narrower than
   801px (for example a portrait-shaped Chrome window). Touch devices keep their
   responsive portrait menu. */
@media (orientation:portrait) and (min-width:801px),
       (orientation:portrait) and (hover:hover) and (pointer:fine) {
 #landscape-lock {display:flex;}
}
#arcade-hud {position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;}
:root {--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);}
#hud {position:absolute;inset:0;z-index:10;pointer-events:none;}
.hud-row-top,.hud-row-bottom,#drift-indicator {display:none;}
#countdown-banner {position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);display:none;font-family:Impact,'Arial Black',sans-serif;text-align:center;color:#ffe621;-webkit-text-stroke:5px #111323;paint-order:stroke fill;text-shadow:4px 5px #10111e;font-size:clamp(75px,13vw,150px);font-style:italic;}
#banner-alert {position:absolute;left:50%;top:58px;transform:translateX(-50%);display:none;font-family:Impact,'Arial Black',sans-serif;text-align:center;color:#ffe621;-webkit-text-stroke:1px #051025;paint-order:stroke fill;text-shadow:2px 2px #000;font-size:clamp(16px,2.6vw,30px);letter-spacing:1.5px;white-space:nowrap;background:rgba(3,16,45,0.82);padding:6px 22px;border-radius:6px;border:2px solid rgba(255,230,30,0.75);box-shadow:0 4px 14px rgba(0,0,0,0.6);z-index:15;pointer-events:none;}
.race-toast {position:absolute;left:50%;top:100px;transform:translateX(-50%);z-index:26;padding:6px 16px;background:rgba(4,18,40,.9);border:1px solid rgba(255,229,26,.75);color:#ffe51a;font:900 12px/1.25 Arial,sans-serif;letter-spacing:.06em;box-shadow:2px 2px #001033;pointer-events:none;white-space:nowrap;}
@media (max-width:800px) { .race-toast {font-size:11px;top:88px;padding:5px 12px;} }
@media (max-height:480px) { .race-toast {top:72px;font-size:10px;padding:4px 10px;} }
#finish-results {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;min-width:min(360px,72vw);padding:18px 28px 16px;color:#fff;text-align:center;background:linear-gradient(145deg,rgba(4,23,57,.94),rgba(3,57,105,.9));border:2px solid #ffe51a;box-shadow:0 0 0 3px rgba(0,11,36,.72),0 10px 32px rgba(0,0,0,.48);z-index:19;pointer-events:none;}
#finish-results.is-visible {display:block;animation:finish-pop .35s ease-out both;}
.is-replay #finish-results.is-visible {left:max(14px,env(safe-area-inset-left));top:110px;transform:none;min-width:0;width:clamp(170px,23vw,265px);padding:10px 14px;animation:none;opacity:.9;}
.is-replay #finish-results-title {font-size:24px;}
.is-replay #finish-lap-times {font-size:12px;}
.is-replay #finish-replay-hint {font-size:9px;letter-spacing:.04em;}
.is-replay #touch-controls,.is-replay #race-controls-right,.is-replay #arcade-hud {display:none!important;}
@media(max-height:450px) {
 .is-replay #finish-results.is-visible {top:12px;left:50%;transform:translateX(-50%);width:auto;max-width:62vw;}
 .is-replay #finish-results-title {font-size:18px;margin-bottom:3px;}
 .is-replay #finish-lap-times {display:none;}
 .is-replay #finish-replay-hint {margin-top:3px;}
}
#finish-results-title {font:italic 900 clamp(30px,5vw,58px)/.95 Impact,'Arial Black',sans-serif;letter-spacing:.08em;color:#ffe51a;text-shadow:3px 4px #06132e;margin-bottom:10px;}
#finish-results.is-timeup #finish-results-title {color:#ff3b30;text-shadow:3px 4px #330000;}
#finish-lap-times {display:grid;gap:3px;font:900 clamp(13px,1.8vw,20px)/1.3 'Arial Black',Arial,sans-serif;letter-spacing:.08em;}
#finish-lap-times .finish-lap-row {display:flex;justify-content:space-between;gap:28px;padding:3px 0;border-bottom:1px solid rgba(180,220,255,.35);}
#finish-lap-times .finish-lap-row span:last-child {color:#fff7a3;}
#finish-lap-times .finish-lap-row.is-me {color:#ffe51a;font-weight:900;}
#finish-lap-times .finish-lap-row.is-me span:last-child {color:#ffe51a;}
#finish-lap-times .finish-lap-row.is-dnf span:last-child {color:#ff6b6b;}
#finish-replay-hint {margin-top:12px;color:#b9e8ff;font:900 clamp(9px,1.2vw,13px)/1.3 Arial,sans-serif;letter-spacing:.12em;}
.finish-online-record {margin-top:8px;color:#ffe51a;font:900 clamp(11px,1.5vw,16px)/1.3 'Arial Black',Arial,sans-serif;letter-spacing:.08em;}
.online-record {color:#ffe51a;font:900 11px/1.2 Arial,sans-serif;letter-spacing:.06em;background:rgba(4,22,54,.8);border:1px solid #2a5c94;padding:3px 7px;}
#finish-actions {display:none;justify-content:center;gap:12px;margin-top:16px;pointer-events:auto;}
#finish-results.is-complete {pointer-events:auto;}
#finish-results.is-complete #finish-actions {display:flex;}
.finish-action-button {min-width:116px;min-height:40px;padding:8px 14px;color:#07162d;background:#ffe51a;border:2px solid #fff47c;box-shadow:3px 3px #001033;font:900 12px/1 Arial,sans-serif;letter-spacing:.08em;cursor:pointer;touch-action:manipulation;}
#finish-ranking {background:#e65c00;color:#fff;border-color:#ff9344;}
#finish-menu {background:#0b3765;color:#f1f8ff;border-color:#65a0d2;}
.finish-action-button:hover,.finish-action-button:focus-visible {filter:brightness(1.16);outline:2px solid #fff;outline-offset:2px;}
.finish-action-button.is-highlight {background:#00e676;color:#003311;border-color:#b9f6ca;animation:rematch-pulse .8s infinite alternate;}
@keyframes rematch-pulse {from{transform:scale(1);box-shadow:0 0 6px #00e676,3px 3px #001033;}to{transform:scale(1.06);box-shadow:0 0 16px #00e676,3px 3px #001033;}}
body.is-finished-results #race-controls-left,body.is-finished-results #race-controls-right,body.is-finished-results #touch-controls {display:none!important;}
@keyframes finish-pop {from{opacity:0;transform:translate(-50%,-45%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#race-controls-left,#race-controls-right {position:absolute;z-index:20;display:grid;gap:8px;pointer-events:auto;}
#race-controls-left {left:8px;top:58px;width:min(116px,24vw);gap:6px;}
#race-controls-right {right:18px;top:64px;width:min(200px,40vw);grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;}
.arcade-btn,#preview-controls button {color:#fff6aa;background:#071d4bc9;border:1px solid #b4caea77;padding:8px 12px;font-size:10px;letter-spacing:1px;box-shadow:2px 2px #001033;}
.arcade-btn:hover,#preview-controls button:hover {background:#124da9;}
#race-controls-left button {min-height:24px;padding:4px 6px;font-size:7px;letter-spacing:.5px;}
#race-controls-right button {min-height:16px;padding:2px 2px;font-size:6px;letter-spacing:.4px;}
.camera-choice {border-width:1px;min-width:0;white-space:nowrap;transition:background .15s ease,border-color .15s ease,filter .15s ease;}
.camera-choice[data-camera-mode="close"] {--camera-accent:#ffe51a;color:#fff2a0;border-color:#d4aa16;background:rgba(103,78,4,.88);}
.camera-choice[data-camera-mode="rear"] {--camera-accent:#ff6a5e;color:#ffd0ca;border-color:#e04b42;background:rgba(105,31,35,.88);}
.camera-choice[data-camera-mode="hood"] {--camera-accent:#50d6f4;color:#c9f6ff;border-color:#2daecf;background:rgba(9,75,105,.9);}
.camera-choice[data-camera-mode="chase_high"] {--camera-accent:#bb91ff;color:#e6d7ff;border-color:#8b63d6;background:rgba(65,36,111,.9);}
.camera-choice:hover {filter:brightness(1.18);}
.camera-choice.is-active {color:#07162d;background:var(--camera-accent);border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.28),2px 2px #001033;filter:none;}
#race-controls-left button:focus-visible,#race-controls-right button:focus-visible,#preview-controls button:focus-visible,#start-overlay button:focus-visible {outline:3px solid #fff;outline-offset:3px;}
.is-preview #race-controls-left,.is-preview #race-controls-right,.is-preview #touch-controls {display:none!important;}
#preview-controls {display:none;position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:25;gap:5px;white-space:nowrap;}
.is-preview #preview-controls {display:none;}
.is-preview #arcade-hud {display:none;}
#preview-controls button {font-size:9px;padding:6px 9px;background:#064596aa;box-shadow:none;}
#preview-controls button.selected {background:#ffdf16;color:#052047;border-color:#ffe729;}
#start-overlay {position:absolute;inset:0;z-index:30;color:#fff;overflow:hidden;background:linear-gradient(90deg,rgba(2,18,48,.86) 0%,rgba(3,25,61,.52) 43%,rgba(0,63,123,.06) 72%);}
#start-overlay::before {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(26,148,239,.22),transparent 20%,transparent 76%,rgba(0,15,42,.7));}
.menu-noise {position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.12) 4px);mix-blend-mode:overlay;}
.menu-screen {position:absolute;inset:0;display:none;padding:max(18px,3vh) max(24px,4vw) max(18px,3vh);}
.menu-screen.is-active {display:flex;}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.start-kicker,.screen-eyebrow {display:block;color:#bfe6ff;font-size:clamp(9px,1vw,13px);letter-spacing:.34em;font-style:italic;text-shadow:2px 2px #00356c;}
.main-menu-screen {align-items:center;}
.main-menu-copy {width:min(520px,44vw);max-height:calc(100% - 14px);margin-left:2vw;padding:4px 12px 10px 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffe51a rgba(4,35,76,.45);touch-action:pan-y;transform:skewX(-4deg);}
#start-overlay h1 {font-family:Impact,'Arial Black',sans-serif;line-height:.72;font-style:italic;margin:18px 0 12px;filter:drop-shadow(6px 7px 0 #011027);}
#start-overlay h1 span {display:block;margin:0;}
.logo-astro {font-size:clamp(58px,8.5vw,130px);letter-spacing:.015em;color:#ffdf16;-webkit-text-stroke:3px #07101d;paint-order:stroke fill;text-shadow:0 8px #e12e1f,0 13px #fff;}
.logo-racer {font-size:clamp(37px,5.4vw,83px);letter-spacing:.07em;color:#fff;-webkit-text-stroke:3px #07101d;paint-order:stroke fill;text-align:right;padding-right:5%;}
.logo-subtitle {font:900 clamp(8px,.8vw,12px)/1 Arial,sans-serif;letter-spacing:.3em;text-align:right;color:#fff;margin:0 8% 26px 0;}
.main-menu-actions {display:grid;gap:7px;width:min(360px,90%);}
.menu-choice {position:relative;min-height:60px;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:9px 20px 9px 27px;color:#fff;background:linear-gradient(100deg,#09244a 0%,#06335e 76%,transparent 77%);border:0;border-left:8px solid #ef233c;filter:drop-shadow(3px 4px 0 rgba(0,10,28,.65));}
.menu-choice::before {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent);pointer-events:none;}
.menu-choice strong,.menu-choice small {display:block;}
.menu-choice strong {font-size:clamp(15px,1.55vw,23px);letter-spacing:.04em;}
.menu-choice small {font:700 clamp(9px,.82vw,12px)/1.3 Arial,sans-serif;color:#cfe9ff;margin-top:2px;}
.menu-choice b {font:900 42px/1 Arial,sans-serif;margin-right:8%;}
.menu-choice:hover,.menu-choice.is-primary {color:#07152d;background:linear-gradient(100deg,#ffe50c,#ffef45 76%,transparent 77%);border-left-color:#ff3143;}
.menu-choice:hover small,.menu-choice.is-primary small {color:#15223a;}
.menu-choice:disabled {cursor:not-allowed;}
.menu-choice.is-unavailable {filter:grayscale(1);opacity:.46;color:#c5ced7;background:linear-gradient(100deg,#182230 0%,#263545 76%,transparent 77%);border-left-color:#778493;}
.menu-choice.is-unavailable small {color:#a8b4bf;}
.menu-choice.is-unavailable::after {content:'UNAVAILABLE';position:absolute;right:9%;bottom:5px;padding:2px 4px;background:rgba(4,13,26,.82);color:#c5ced7;font:900 7px/1 Arial,sans-serif;letter-spacing:.08em;}
.menu-choice.is-unavailable:hover {color:#c5ced7;background:linear-gradient(100deg,#182230 0%,#263545 76%,transparent 77%);border-left-color:#778493;filter:grayscale(1);}
/* Live online-lobby badge on the main menu: shows how many players are
   queueing right now (heartbeat-based, see docs/sql/2026-09-21_lobby_presence.sql). */
.menu-wait-badge {display:inline-flex;align-items:center;gap:6px;margin-left:auto;margin-right:10px;padding:3px 9px;border:2px solid #2fe07c;background:rgba(4,32,20,.92);color:#8dffc0;font:900 clamp(8px,.8vw,11px)/1.1 Arial,sans-serif;letter-spacing:.08em;white-space:nowrap;}
.menu-wait-badge .wait-dot {width:7px;height:7px;border-radius:50%;background:#2fe07c;box-shadow:0 0 6px #2fe07c;animation:wait-badge-pulse 1.4s ease-in-out infinite;}
.menu-choice:hover .menu-wait-badge,.menu-choice.is-primary .menu-wait-badge {border-color:#0b3d22;background:#0b3d22;color:#9dffcb;}
@keyframes wait-badge-pulse {0%,100% {opacity:1;transform:scale(1);} 50% {opacity:.35;transform:scale(.72);}}
.main-menu-tagline {position:absolute;right:6vw;top:9vh;display:grid;transform:skewX(-9deg);color:rgba(229,244,255,.72);font:italic 900 clamp(16px,2.1vw,34px)/1.25 Arial,sans-serif;text-align:right;text-shadow:2px 2px #0860a8;}
.menu-fullscreen {position:absolute;right:max(22px,3vw);bottom:calc(38px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:7px;padding:7px 11px;color:rgba(229,244,255,.78);background:rgba(3,28,61,.42);border:1px solid rgba(174,218,249,.42);font:700 9px/1 Arial,sans-serif;letter-spacing:.08em;backdrop-filter:blur(3px);}
.menu-fullscreen span {font-size:16px;line-height:.7;}
.menu-fullscreen:hover {color:#07162d;background:#ffe51a;border-color:#fff47c;}
.menu-help {position:absolute;left:0;right:0;bottom:0;padding:8px max(24px,4vw) calc(8px + env(safe-area-inset-bottom));background:rgba(1,23,56,.86);border-top:2px solid rgba(255,255,255,.65);font:700 clamp(10px,1vw,14px)/1.2 Arial,sans-serif;}

.course-menu-screen,.car-menu-screen {flex-direction:column;background:linear-gradient(180deg,rgba(0,79,151,.82),rgba(2,20,51,.86));}
.screen-header {height:62px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid rgba(142,218,255,.8);padding:0 12px;flex:none;}
.screen-header h2 {font:italic 900 clamp(25px,3.4vw,48px)/.88 Impact,'Arial Black',sans-serif;color:#ffe51a;-webkit-text-stroke:2px #081126;paint-order:stroke fill;text-shadow:3px 4px #0054a4;letter-spacing:.035em;}
.step-indicator {font-size:clamp(10px,1.25vw,17px);letter-spacing:.1em;color:#ffe525;}
.filter-strip {height:36px;display:flex;align-items:stretch;justify-content:center;gap:4px;padding:4px 0;flex:none;}
.filter-strip span {min-width:110px;text-align:center;padding:5px 22px;background:#063765;color:#d9efff;font:700 11px/1.2 Arial,sans-serif;border-bottom:2px solid #0e77c5;}
.filter-strip span.is-active {background:#ffe51a;color:#081a34;border-color:#fff;}
#track-select,#car-select {border:0;min-width:0;}
#track-select {flex:1;min-height:0;display:flex;align-items:center;}
#track-choices {width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
.track-choice {min-width:0;text-align:left;padding:5px;background:#061d42;color:#fff;border:2px solid #5a8db9;box-shadow:0 4px 0 rgba(0,8,25,.7);}
.track-choice:hover {border-color:#fff;transform:translateY(-2px);}
.track-choice[aria-pressed="true"] {border:4px solid #ffe51a;padding:3px;box-shadow:0 0 0 2px #092443,0 5px 0 rgba(0,8,25,.8);}
.track-choice:disabled {cursor:not-allowed;}
.track-choice.is-unavailable {position:relative;filter:grayscale(1);opacity:.46;border-color:#778493;background:rgba(24,34,48,.88);box-shadow:0 4px 0 rgba(0,8,25,.5);}
.track-choice.is-unavailable::after {content:'UNAVAILABLE';position:absolute;right:6px;bottom:6px;padding:3px 5px;background:rgba(4,13,26,.82);color:#c5ced7;font:900 8px/1 Arial,sans-serif;letter-spacing:.08em;}
.track-choice.is-unavailable:hover {transform:none;border-color:#778493;}
.course-visual {position:relative;display:block;height:clamp(75px,16vh,190px);overflow:hidden;background:linear-gradient(#31aff5 0 47%,#6bac45 48% 61%,#555b60 62% 100%);}
.course-visual::before {content:"";position:absolute;width:135%;height:90%;left:-19%;top:57%;border:clamp(16px,2.4vw,38px) solid #b8bcc0;border-radius:50%;transform:rotate(-9deg);box-shadow:0 0 0 5px #51565a,inset 0 0 0 3px #fff;}
.course-visual::after {content:"";position:absolute;left:8%;top:18%;width:18%;height:32%;background:linear-gradient(120deg,#225c23,#0c321b);clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(25px 5px 0 #194b25) drop-shadow(50px -2px 0 #286330);}
[data-track-id="daytona2"] .course-visual {background:linear-gradient(#38b4f5 0 44%,#ca713a 45% 66%,#6e3e29 67%);}
[data-track-id="daytona2"] .course-visual::after {background:#7d3b24;clip-path:polygon(30% 0,100% 100%,0 100%);filter:drop-shadow(38px 8px 0 #a84d29) drop-shadow(78px -5px 0 #613020);}
[data-track-id="daytona2_rolling"] .course-visual {background:linear-gradient(#1f7fd0 0 44%,#c1652f 45% 66%,#5d3320 67%);}
[data-track-id="daytona2_rolling"] .course-visual::after {background:#6b3120;clip-path:polygon(30% 0,100% 100%,0 100%);filter:drop-shadow(38px 8px 0 #94411f) drop-shadow(78px -5px 0 #52281a);}
[data-track-id="daytona2_real"] .course-visual {background:linear-gradient(#3ba9ea 0 43%,#386c36 44% 64%,#4f5150 65%);}
[data-track-id="segarally2"] .course-visual {background:linear-gradient(#34aef2 0 43%,#d79746 44% 68%,#976135 69%);}
[data-track-id="segarally2_app"] .course-visual {background:linear-gradient(#168ce8 0 42%,#7c563a 43% 67%,#3b6d25 68%);}
[data-track-id="segarally2_app"] .course-visual::after {background:#9a5d35;clip-path:polygon(9% 100%,32% 15%,55% 100%,72% 27%,100% 100%);filter:drop-shadow(22px -3px 0 #d18a4a) drop-shadow(53px 2px 0 #65402e);}
[data-track-id="daytona_beginner_app"] .course-visual {background:linear-gradient(#168ce8 0 42%,#5c8f23 43% 67%,#5d6265 68%);}
[data-track-id="daytona_beginner_app"] .course-visual::after {background:#765342;clip-path:polygon(3% 100%,23% 22%,42% 100%,63% 9%,86% 100%);filter:drop-shadow(20px -3px 0 #a87d53) drop-shadow(45px 2px 0 #4b392f);}

/* Course cards show real in-game screenshots (captured from the same 3D
   preview the car-select screen shows) instead of the flat colour art. */
.track-choice.has-shot .course-visual {background-size:cover;background-position:center 58%;background-repeat:no-repeat;}
.track-choice.has-shot .course-visual::before,
.track-choice.has-shot .course-visual::after {content:none;}
.track-choice[data-track-id="daytona_beginner_real"].has-shot .course-visual {background-image:url('assets/course_shots/daytona_beginner_real.jpg?v=2');}
.track-choice[data-track-id="daytona2"].has-shot .course-visual {background-image:url('assets/course_shots/daytona2.jpg?v=2');}
.track-choice[data-track-id="daytona2_rolling"].has-shot .course-visual {background-image:url('assets/course_shots/daytona2_rolling.jpg?v=2');}
.track-choice[data-track-id="segarally2"].has-shot .course-visual {background-image:url('assets/course_shots/segarally2.jpg?v=2');}
.track-choice[data-track-id="f1_1"].has-shot .course-visual {background-image:url('assets/course_shots/f1_1.jpg?v=2');}
.track-choice strong {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* The card blurb carries the course comment now, so let it use up to three
   lines instead of clipping to one. */
.track-choice>span:last-child {display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.track-choice strong {font-size:clamp(9px,1.2vw,16px);margin:7px 5px 0;}
.track-choice>span:last-child {font:700 clamp(8px,.85vw,12px)/1.3 Arial,sans-serif;color:#cfe5f5;margin:3px 5px 5px;}
.course-detail {display:grid;grid-template-columns:1fr minmax(320px,45%);min-height:74px;background:rgba(2,25,58,.94);border:2px solid #477da7;flex:none;}
.course-detail-copy {display:flex;flex-direction:column;justify-content:center;padding:9px 18px;border-right:1px solid #477da7;}
.course-detail-copy small,.car-title small {font:700 9px/1 Arial,sans-serif;letter-spacing:.18em;color:#7cc7fa;}
.course-detail-copy strong,.car-title strong {font-size:clamp(15px,1.7vw,24px);margin:3px 0;}
.course-detail-copy span,.car-title span {font:700 clamp(9px,.9vw,12px)/1.3 Arial,sans-serif;color:#d5eafd;}
.course-detail dl {display:grid;grid-template-columns:repeat(3,1fr);align-items:center;}
.course-detail dl div {padding:5px 11px;border-right:1px solid #315d82;}
.course-detail dt {font:700 9px/1 Arial,sans-serif;color:#7cc7fa;}
.course-detail dd {font-size:clamp(10px,1vw,14px);margin-top:5px;white-space:nowrap;}
.screen-actions {height:54px;display:flex;justify-content:space-between;align-items:end;flex:none;padding-top:8px;}
.back-action,.next-action {min-width:128px;min-height:42px;border:2px solid #72a3c8;color:#fff;background:#06345f;padding:7px 20px;font-size:clamp(11px,1.05vw,15px);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}
.next-action {border-color:#fff17b;background:#ffe51a;color:#07162d;}

.car-menu-screen {background:linear-gradient(180deg,rgba(0,69,137,.72) 0 19%,rgba(1,34,76,.16) 35% 68%,rgba(2,18,46,.88) 88% 100%);}
#start-overlay[data-menu-screen="car"] {background:linear-gradient(180deg,rgba(2,25,60,.48) 0 19%,rgba(0,18,40,.03) 35% 68%,rgba(1,16,40,.72) 86% 100%);}
#start-overlay[data-menu-screen="car"]::before {background:radial-gradient(ellipse at 50% 54%,transparent 0 28%,rgba(3,28,64,.08) 58%,rgba(0,15,42,.45) 100%);}
body.is-preview:has(#start-overlay[data-menu-screen="car"]) #canvas-container canvas {filter:brightness(1.16) saturate(1.12) contrast(1.04);}
.car-showcase {flex:1;min-height:90px;display:flex;justify-content:space-between;align-items:flex-start;padding:12px 2vw;pointer-events:none;}
.car-title {display:flex;flex-direction:column;text-shadow:2px 3px #00152c;}
.car-title strong {font-size:clamp(22px,3.1vw,46px);color:#ffe51a;}
.car-stats {width:min(270px,31vw);display:grid;gap:6px;padding:11px;background:rgba(3,25,57,.78);border-left:4px solid #ffe51a;}
.car-stats span {display:grid;grid-template-columns:74px 1fr;align-items:center;font-size:clamp(8px,.9vw,12px);}
.car-stats i {display:block;height:10px;background:repeating-linear-gradient(90deg,#64788a 0 calc(20% - 3px),transparent calc(20% - 3px) 20%);}
.car-stats b {display:block;height:100%;width:50%;background:repeating-linear-gradient(90deg,#ffe51a 0 calc(20% - 3px),transparent calc(20% - 3px) 20%);}
#car-select {flex:none;}
#car-choices {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
.car-choice {position:relative;min-width:0;min-height:75px;display:grid;grid-template-columns:55px 1fr;align-items:center;text-align:left;padding:7px;background:rgba(3,28,61,.94);color:#fff;border:2px solid #4f7fa7;border-top:4px solid var(--car-color);box-shadow:0 4px 0 rgba(0,8,25,.72);}
.car-choice:hover:not(:disabled) {border-color:#fff;transform:translateY(-2px);}
.car-choice[aria-pressed="true"] {background:#ffe51a;color:#07172f;border-color:#fff47c;box-shadow:0 0 0 2px #092443,0 5px 0 #00122d;}
.car-swatch {position:relative;width:45px;height:22px;background:var(--car-color);border:3px solid #08172d;border-radius:4px 13px 3px 4px;transform:skewX(-8deg);box-shadow:0 8px 0 -5px #050a12;}
.car-swatch::before {content:"";position:absolute;left:8px;top:-12px;width:25px;height:14px;background:var(--car-color);border:3px solid #08172d;border-bottom:0;clip-path:polygon(18% 100%,35% 0,82% 0,100% 100%);}
.car-swatch::after {content:attr(data-number);position:absolute;inset:1px 5px auto auto;color:#fff;font:900 10px/1 Arial,sans-serif;text-shadow:1px 1px #000;}
.car-choice strong,.car-choice>span:last-child {display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.car-choice strong {font-size:clamp(8px,.9vw,13px);}
.car-choice>span:last-child {grid-column:2;font:700 clamp(7px,.7vw,10px)/1.2 Arial,sans-serif;margin-top:-17px;opacity:.75;}
.car-choice:disabled {cursor:not-allowed;}
.car-choice.is-unavailable {filter:grayscale(1);opacity:.46;border-color:#778493;border-top-color:#778493;background:rgba(24,34,48,.88);box-shadow:0 4px 0 rgba(0,8,25,.5);}
.car-choice.is-unavailable::after {content:'UNAVAILABLE';position:absolute;inset:auto 5px 5px auto;padding:2px 4px;background:rgba(4,13,26,.82);color:#c5ced7;font:900 7px/1 Arial,sans-serif;letter-spacing:.08em;}
.car-choice.is-unavailable:hover {transform:none;border-color:#778493;}
.start-status:disabled {cursor:wait;opacity:.55;}
.load-statuses {min-height:28px;display:flex;justify-content:space-between;gap:15px;align-items:center;padding:4px 6px;font:700 clamp(8px,.78vw,11px)/1.2 Arial,sans-serif;color:#d4ebff;}
.load-statuses p {margin:0;}
.settings-menu-screen,.credits-menu-screen {flex-direction:column;background:linear-gradient(180deg,rgba(0,78,149,.86),rgba(2,18,46,.94));}
/* Short windows (or the compact mobile rows) must stay reachable instead of clipping. */
.settings-menu-screen {overflow-y:auto;touch-action:pan-y;}
.settings-panel {width:min(980px,92vw);margin:auto;display:grid;grid-template-columns:230px 1fr;background:rgba(2,25,57,.94);border:2px solid #3979ac;box-shadow:8px 10px 0 rgba(0,10,28,.45);}
.settings-tabs {display:flex;flex-direction:column;border-right:3px solid #d3ad14;}
.settings-tabs span {padding:18px 16px;background:#062b54;border-bottom:1px solid #275479;color:#cde9ff;font-size:12px;}
.settings-tabs span.is-active {background:#ffe51a;color:#07162d;}
.settings-fields {padding:8px 18px;}
.setting-row {min-height:70px;display:grid;grid-template-columns:minmax(145px,1fr) minmax(180px,2fr) 48px;align-items:center;gap:18px;border-bottom:1px solid #315a7c;color:#fff;}
.setting-row>span strong,.setting-row>span small,.setting-row>label strong,.setting-row>label small,.drift-setting legend strong,.drift-setting legend small {display:block;}
.setting-row small,.drift-setting legend small {font:700 10px/1.3 Arial,sans-serif;color:#a9d5f5;margin-top:3px;}
.setting-row input[type="range"] {width:100%;height:10px;accent-color:#ffe51a;cursor:pointer;}
.setting-row output {min-width:42px;padding:7px 4px;text-align:center;background:#051b39;border:1px solid #497ba5;color:#ffe51a;}
/* サウンドパターンの一覧選択（AUDIO） */
.setting-row.select-setting {min-height:62px;}
.setting-row.select-setting>label {cursor:pointer;}
.setting-select {grid-column:2;width:100%;min-height:44px;padding:7px 9px;background:#051b39;border:2px solid #487ca7;color:#ffe51a;font:700 12px/1.2 'Arial Black',Arial,sans-serif;letter-spacing:.02em;cursor:pointer;}
.setting-select:focus-visible {outline:3px solid #fff;outline-offset:2px;}
.setting-select option {background:#051b39;color:#ffe51a;}
.sound-preview-btn {grid-column:3;justify-self:stretch;min-width:44px;min-height:44px;padding:0;background:#082f59;border:2px solid #487ca7;color:#ffe51a;font-size:14px;line-height:1;cursor:pointer;}
.sound-preview-btn:hover,.sound-preview-btn:focus-visible {background:#0d4680;border-color:#ffe51a;}
.sound-preview-btn:active {transform:translateY(1px);}
.select-setting .sound-preview-btn {grid-row:1;align-self:center;}
.drift-setting {grid-template-columns:minmax(145px,1fr) minmax(300px,2fr);border:0;border-bottom:1px solid #315a7c;padding:0;}
.drift-setting legend {display:contents;}
/* The legend is display:contents so its text can sit in the label column, but
   that also lets auto-placement push the control group into the label column:
   the 1fr button tracks then collapse to min-content and every button ends up a
   different size. Place the legend text (left) and the controls (right)
   explicitly instead. */
.drift-setting legend strong {grid-column:1;grid-row:1;align-self:end;}
.drift-setting legend small {grid-column:1;grid-row:2;align-self:start;}
.drift-setting .segment-control {grid-column:2;grid-row:1 / 3;}
.segment-control {display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.segment-control.two-up {grid-template-columns:repeat(2,1fr);}
.segment-control label {position:relative;cursor:pointer;display:flex;}
.segment-control input {position:absolute;opacity:0;pointer-events:none;}
.segment-control span {flex:1;min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#082f59;border:2px solid #487ca7;color:#d9eeff;font-size:11px;text-align:center;padding:4px 2px;}
.segment-control input:checked+span {background:#ffe51a;border-color:#fff47c;color:#07162d;}
.segment-control input:checked+span small {color:#172139;}
.segment-control input:focus-visible+span {outline:3px solid #fff;outline-offset:2px;}
/* This row stacks (see the .supabase-setting rule below), so its legend must
   stay a normal block: as a grid/flex item the title and its sub-label ended up
   on one line at opposite edges. The fieldset border is replaced by the same
   bottom rule the other setting rows use, so it no longer cuts through the
   legend text. */
.supabase-setting {border:0;border-bottom:1px solid #315a7c;}
.supabase-setting legend strong,.supabase-setting legend small {display:block;}
.supabase-setting .supabase-status-badge {display:flex;align-items:center;gap:7px;min-height:34px;padding:6px 10px;background:#051b39;border:1px solid #497ba5;font:700 11px/1.3 Arial,sans-serif;}
.supabase-setting .supabase-status-badge .status-indicator {font-size:10px;}
.setting-help {min-height:42px;padding:9px 0;font:700 11px/1.45 Arial,sans-serif;color:#cfe8fa;}
.credits-grid {width:min(1100px,92vw);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.credits-grid article {min-height:260px;padding:20px;background:linear-gradient(150deg,rgba(5,41,79,.96),rgba(2,22,49,.96));border:2px solid #3979ac;border-top:6px solid #ffe51a;box-shadow:5px 7px 0 rgba(0,10,28,.48);}
.credits-grid h3 {font:italic 900 clamp(19px,2vw,28px)/1 Impact,'Arial Black',sans-serif;color:#ffe51a;letter-spacing:.08em;margin-bottom:20px;}
.credits-grid p,.credits-grid li,.credits-grid a {font:700 12px/1.55 Arial,sans-serif;color:#d7ebfa;}
.credits-grid ul {list-style:none;margin:12px 0;}
.credits-grid li {padding:5px 0;border-bottom:1px solid #315a7c;}
.credits-grid a {display:inline-block;color:#ffe51a;margin-top:6px;text-decoration-thickness:2px;text-underline-offset:3px;}
.credits-grid .credit-note {font-size:10px;color:#94bddb;margin-top:12px;}
#touch-controls {position:absolute;bottom:15px;left:0;right:0;display:none;align-items:flex-end;justify-content:space-between;padding:0 20px;pointer-events:none;z-index:20;}
.touch-group {display:flex;gap:10px;}
.steer-group {min-width:146px;}
.touch-btn {pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center;text-align:center;width:68px;height:68px;border:2px solid #f2f6fac9;background:#102e6177;color:#fff;font-size:25px;border-radius:12px;text-shadow:2px 2px #001435;}
.touch-btn.active {background:#faf5ccaa;}
.steer-btn {font-size:30px;font-weight:900;line-height:1;background:linear-gradient(145deg,#174b86e8,#08234fd9);border-color:#b8ddffcc;box-shadow:2px 3px 0 #001033, inset 0 0 0 1px rgba(255,255,255,.12);}
.steer-btn.active {background:#ffe51acc;color:#07162d;border-color:#fff47c;}
.btn-brake {font-size:12px;background:#a6231b88;border-color:#ff8c6a;}
.btn-accel {font-size:13px;background:#15815288;border-color:#abff8b;}
@media(max-width:800px) {
 #preview-controls {top:70px;}
 #preview-controls button {font-size:8px;padding:5px 7px;}
 #finish-results {min-width:min(330px,82vw);padding:13px 18px 12px;}
 #finish-results-title {margin-bottom:7px;}
 #finish-actions {gap:8px;margin-top:12px;}
 .finish-action-button {min-width:105px;min-height:38px;padding:7px 10px;font-size:11px;}
 #finish-replay-hint {margin-top:8px;font-size:8px;}
 #race-controls-left {left:6px;top:52px;width:min(108px,30vw);gap:5px;}
 #race-controls-left button {min-height:22px;padding:3px 4px;font-size:6px;letter-spacing:.35px;}
 #race-controls-right {right:12px;top:58px;width:min(200px,64vw);grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;}
 #race-controls-right button {min-height:18px;padding:2px 2px;font-size:6px;letter-spacing:.35px;}
 .arcade-btn {font-size:8px;padding:7px 8px;}
 .menu-screen {padding:12px 15px calc(10px + env(safe-area-inset-bottom));}
 .main-menu-copy {width:55vw;margin-left:0;}
 .main-menu-actions {gap:4px;}
 .menu-choice {min-height:44px;padding:5px 15px 5px 19px;border-left-width:6px;}
 .menu-choice b {font-size:28px;}
 .main-menu-tagline {right:4vw;top:12vh;}
 .menu-fullscreen {right:15px;bottom:calc(32px + env(safe-area-inset-bottom));padding:6px 8px;font-size:8px;}
 .logo-subtitle {margin-bottom:12px;}
 .screen-header {height:45px;}
 .filter-strip {display:none;}
 #track-choices {gap:5px;}
 .track-choice strong {margin-top:4px;}
 .course-detail {min-height:55px;grid-template-columns:1fr 55%;}
 .course-detail-copy {padding:5px 10px;}
 .course-detail-copy span {display:none;}
 .course-detail dl div {padding:4px 7px;}
 .screen-actions {height:43px;padding-top:4px;}
 .back-action,.next-action {min-height:36px;min-width:110px;padding:4px 14px;}
 .car-showcase {padding:6px 1vw;}
 .car-stats {padding:7px;gap:4px;}
 .car-choice {min-height:56px;grid-template-columns:42px 1fr;padding:4px;}
 .car-swatch {width:35px;height:18px;}
 .car-swatch::before {width:20px;height:11px;top:-10px;}
 .load-statuses {min-height:20px;padding:2px 4px;}
 .settings-panel {width:100%;grid-template-columns:150px 1fr;}
 .settings-tabs span {padding:10px;font-size:9px;}
 .settings-fields {padding:3px 10px;}
 .setting-row {min-height:57px;grid-template-columns:120px 1fr 38px;gap:9px;font-size:10px;}
 .drift-setting {grid-template-columns:120px 1fr;}
 .segment-control span {min-height:42px;font-size:9px;}
 .setting-help {font-size:9px;min-height:30px;padding:5px 0;}
 .setting-row.select-setting {min-height:52px;}
 .setting-select {min-height:38px;padding:5px 6px;font-size:10px;}
 .sound-preview-btn {min-width:38px;min-height:38px;font-size:12px;}
 .credits-grid {width:100%;gap:6px;}
 .credits-grid article {min-height:220px;padding:11px;}
 .credits-grid h3 {margin-bottom:8px;}
 .credits-grid p,.credits-grid li,.credits-grid a {font-size:9px;}
 .credits-grid .credit-note {font-size:8px;margin-top:6px;}
}
@media(orientation:portrait) and (max-width:800px) {
 #start-overlay[data-menu-screen="car"] {background:linear-gradient(180deg,rgba(0,54,112,.54) 0 23%,rgba(0,20,46,.02) 38% 72%,rgba(1,15,38,.82) 88% 100%);}
 #start-overlay[data-menu-screen="car"]::before {background:radial-gradient(ellipse at 50% 54%,rgba(255,255,255,.04) 0 24%,transparent 48%,rgba(0,15,42,.36) 79%,rgba(0,12,32,.72) 100%);}
 body.is-preview:has(#start-overlay[data-menu-screen="car"]) #canvas-container canvas {filter:brightness(1.28) saturate(1.16) contrast(1.06);}
 .car-menu-screen {background:linear-gradient(180deg,rgba(0,66,132,.68) 0 20%,transparent 32% 74%,rgba(2,18,46,.9) 88% 100%);}
 .car-showcase {background:linear-gradient(180deg,rgba(2,26,60,.34),transparent 72%);}
 .car-title strong {color:#fff04a;text-shadow:2px 3px #00152c,0 0 12px rgba(255,229,26,.35);}
}
@media(max-height:450px) {
 #preview-controls {top:13px;}
 .main-menu-screen {align-items:flex-start;padding-top:8px;}
 .main-menu-copy {max-height:calc(100% - 4px);margin-top:0;padding-bottom:18px;}
 #start-overlay h1 {margin:8px 0 7px;}
 .logo-astro {font-size:clamp(46px,8vw,66px);}
 .logo-racer {font-size:clamp(31px,5vw,42px);}
 .logo-subtitle {margin-bottom:7px;}
 .main-menu-actions {gap:3px;}
 .menu-choice {height:42px;min-height:42px;padding:3px 16px 3px 21px;}
 .menu-choice strong {font-size:13px;line-height:1;}
 .menu-choice small {font-size:8px;line-height:1.1;margin-top:2px;}
 .menu-choice b {font-size:25px;}
 .menu-help {padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom));}
 .menu-fullscreen {bottom:calc(27px + env(safe-area-inset-bottom));}
 .steer-group {min-width:118px;gap:6px;}
 .steer-btn {width:56px;height:55px;font-size:25px;}
 .touch-btn {height:55px;width:55px;}
 #touch-controls {bottom:10px;}
 #race-controls-left {top:52px;}
 #race-controls-right {top:58px;}
 .course-visual {height:clamp(58px,18vh,92px);}
 .course-detail {min-height:52px;}
 .car-showcase {min-height:68px;}
 .car-choice {min-height:51px;}
 .load-statuses {min-height:18px;}
 .settings-panel {margin:7px auto 0;}
 .settings-tabs span {padding:8px 10px;}
  .setting-row {min-height:51px;}
  .setting-row.select-setting {min-height:47px;}
  .setting-select {min-height:34px;padding:4px 6px;}
  .sound-preview-btn {min-width:34px;min-height:34px;font-size:11px;}
  .setting-help {min-height:24px;}
  .credits-grid {margin:7px auto 0;}
 .credits-grid article {min-height:0;padding:10px 12px;}
 .credits-grid h3 {margin-bottom:6px;}
 .credits-grid li {padding:3px 0;}
}
@media(prefers-reduced-motion:reduce) {*{animation:none!important;}}

@keyframes ne-pop {from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.name-entry-modal {position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;background:rgba(2,10,28,.88);backdrop-filter:blur(6px);padding:16px;touch-action:manipulation;}
.name-entry-modal.is-open {display:flex;}
.name-entry-modal.is-open .name-entry-card {animation:ne-pop .28s ease-out both;}
.name-entry-card {width:min(560px,96vw);background:linear-gradient(145deg,rgba(4,23,57,.96),rgba(3,57,105,.94));border:3px solid #ffe51a;box-shadow:0 0 24px rgba(255,229,26,.3),0 12px 36px rgba(0,0,0,.6);padding:18px 20px 16px;text-align:center;color:#fff;position:relative;}
.name-entry-header {position:relative;margin-bottom:12px;}
.name-entry-badge {display:inline-block;padding:2px 8px;font:900 10px/1 Arial,sans-serif;letter-spacing:.2em;background:#ef233c;color:#fff;margin-bottom:4px;}
.name-entry-title {font:italic 900 clamp(22px,3.8vw,36px)/1 Impact,'Arial Black',sans-serif;letter-spacing:.06em;color:#ffe51a;text-shadow:2px 3px #05132d;margin:3px 0 6px;}
.name-entry-record-info {display:flex;justify-content:center;align-items:baseline;gap:14px;font:900 13px Arial,sans-serif;color:#a8d5ff;}
.name-entry-record-info strong {font:italic 900 22px/1 Impact,Arial,sans-serif;color:#fff;letter-spacing:.05em;}
.name-entry-timer {position:absolute;right:0;top:0;display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.5);padding:4px 8px;border:1px solid rgba(255,255,255,.2);}
.timer-label {font:900 8px Arial,sans-serif;letter-spacing:.15em;color:#ff9e9e;}
.timer-val {font:italic 900 20px/1 Impact,sans-serif;color:#ff3344;}
.name-entry-slots {display:flex;justify-content:center;gap:clamp(3px,1vw,8px);margin:14px 0 10px;}
.name-slot {flex:0 0 auto;width:clamp(28px,4.5vw,42px);height:clamp(38px,6vw,50px);background:#05132d;border:2px solid #295185;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;box-shadow:inset 0 0 8px rgba(0,0,0,.6);}
.name-slot:hover {border-color:#5c9be6;}
.name-slot.is-active {border-color:#ffe51a;box-shadow:0 0 14px rgba(255,229,26,.7),inset 0 0 10px rgba(255,229,26,.35);transform:translateY(-2px);animation:slot-blink .9s infinite alternate;}
.slot-char {font:italic 900 clamp(20px,3.2vw,30px)/1 Impact,'Arial Black',sans-serif;color:#fff;text-shadow:2px 2px #000;}
.name-slot.is-active .slot-char {color:#ffe51a;}
.name-slot.is-empty .slot-char {color:rgba(255,255,255,.2);font-style:normal;}
@keyframes slot-blink {0%{filter:brightness(1);}100%{filter:brightness(1.25);}}
.name-entry-controls-bar {display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-bottom:8px;}
.name-entry-alphabet-grid {display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-height:none;padding:6px;background:rgba(0,10,30,.5);border:1px solid rgba(255,255,255,.1);margin-bottom:12px;}
.ne-char-btn {width:28px;height:28px;padding:0;background:#06234b;border:1px solid #356299;color:#e1f0ff;font:900 12px/1 Impact,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ne-char-btn:hover,.ne-char-btn:active {background:#ffe51a;color:#06132d;border-color:#fff;}
.name-entry-actions {display:flex;justify-content:center;gap:10px;}
.ne-btn {padding:6px 12px;min-height:34px;font:900 11px/1 Arial,sans-serif;letter-spacing:.08em;cursor:pointer;touch-action:manipulation;box-shadow:2px 2px #001033;}
.nav-btn {background:#0a325c;color:#cce6ff;border:1px solid #528ecb;min-width:34px;}
.nav-btn:hover {background:#144b87;color:#fff;}
.util-btn {background:#133363;color:#ffd700;border:1px solid #2d61a8;}
.util-btn:hover {background:#1e4b8f;color:#fff;}
.confirm-btn {background:#ffe51a;color:#07162d;border:2px solid #fff58c;min-width:140px;font-size:13px;font-weight:900;}
.confirm-btn:hover {filter:brightness(1.18);}
body.is-name-entry-open #finish-results {display:none!important;}

/* Leaderboard Screen */
#start-overlay[data-menu-screen="leaderboard"] {background:linear-gradient(135deg,rgba(2,12,36,.96) 0%,rgba(3,24,60,.95) 100%);}
.leaderboard-menu-screen {flex-direction:column;}
.leaderboard-player-info {display:flex;align-items:center;gap:8px;}
.player-label {font:900 11px Arial,sans-serif;letter-spacing:.15em;color:#8cc8ff;}
#lb-current-player-name {font:italic 900 20px/1 Impact,Arial,sans-serif;color:#ffe51a;letter-spacing:.05em;}
.leaderboard-track-tabs {display:flex;gap:4px;overflow-x:auto;padding-bottom:6px;margin:8px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.leaderboard-track-tabs::-webkit-scrollbar {display:none;}
.lb-tab {flex:0 0 auto;padding:7px 14px;background:#05244e;color:#badeff;border:1px solid #23548e;font:900 11px/1 Arial,sans-serif;letter-spacing:.06em;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;}
.lb-tab:hover {background:#0e3e7e;color:#fff;}
.lb-tab.is-active {background:#ffe51a;color:#07162d;border-color:#fff;box-shadow:0 0 10px rgba(255,229,26,.4);}
.leaderboard-table-wrap {flex:1 1 auto;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(3,18,44,.88),rgba(1,11,30,.92));border:1px solid #1a4a82;overflow:hidden;min-height:0;}
.leaderboard-table-header {display:grid;grid-template-columns:50px minmax(0,1fr) 120px 96px;gap:8px;padding:8px 14px;background:#072b5c;font:900 10px/1 Arial,sans-serif;letter-spacing:.12em;color:#8bc5fc;border-bottom:2px solid #ffe51a;}
.leaderboard-table-header .col-time {text-align:right;}
.leaderboard-table-body {flex:1 1 auto;overflow-y:auto;padding:2px 0;}
.lb-row {display:grid;grid-template-columns:50px minmax(0,1fr) 120px 96px;gap:8px;padding:7px 14px;align-items:center;font:900 clamp(11px,1.4vw,14px)/1.2 'Arial Black',Arial,sans-serif;border-bottom:1px solid rgba(255,255,255,.07);color:#e6f3ff;}
.lb-row:nth-child(even) {background:rgba(255,255,255,.02);}
.lb-row.rank-1 {color:#ffe51a;text-shadow:0 0 6px rgba(255,229,26,.4);}
.lb-row.rank-2 {color:#e2e8f0;}
.lb-row.rank-3 {color:#f97316;}
.lb-row.is-current-player {background:rgba(14,165,233,.22);border-left:4px solid #38bdf8;box-shadow:inset 0 0 12px rgba(56,189,248,.35);}
.lb-row .col-rank {font:italic 900 16px/1 Impact,sans-serif;}
.lb-row .col-name {letter-spacing:.08em;display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.lb-row .col-name strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-you-badge {display:inline-block;padding:1px 4px;font:900 8px Arial,sans-serif;background:#0284c7;color:#fff;border-radius:2px;letter-spacing:.05em;flex-shrink:0;}
.lb-sample-badge {display:inline-block;padding:1px 4px;font:900 8px Arial,sans-serif;background:rgba(255,255,255,.14);color:#cbd5e1;border-radius:2px;letter-spacing:.05em;flex-shrink:0;}
.lb-car-badge {display:inline-block;padding:1px 4px;font:900 8px Arial,sans-serif;background:rgba(255,255,255,.08);color:#9fb6cc;border-radius:2px;letter-spacing:.05em;flex-shrink:0;text-transform:uppercase;}
.lb-row.is-sample {opacity:.72;}
.lb-row.is-offboard {margin-top:8px;border-top:1px dashed rgba(255,255,255,.28);background:rgba(14,165,233,.10);}
#lb-submit-status {margin-top:10px;color:#b9e8ff;font:900 clamp(9px,1.2vw,13px)/1.35 Arial,sans-serif;letter-spacing:.06em;}
#lb-submit-status.is-error {color:#ffb4b4;}

/* Online match lobby (Phase 1) */
.online-menu-screen {flex-direction:column;background:linear-gradient(180deg,rgba(0,66,132,.70) 0 22%,rgba(3,30,68,.28) 45%,rgba(2,18,46,.86));}
.online-panel {display:block;width:min(900px,94vw);margin:8px auto 0;}
.online-panel[hidden] {display:none;}
.online-status {width:min(900px,94vw);margin:6px auto 0;min-height:0;text-align:center;}
#online-track-buttons {grid-template-columns:repeat(3,1fr);}
#online-capacity-buttons {grid-template-columns:repeat(4,1fr);}
.online-actions {display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.online-actions button {min-height:44px;touch-action:manipulation;}
.online-room-head {display:flex;justify-content:space-between;align-items:baseline;padding:0 6px 8px;font:900 13px Arial,sans-serif;letter-spacing:.08em;color:#ffe51a;}
.online-slot-list {display:grid;gap:6px;}
.online-slot {display:grid;grid-template-columns:44px minmax(0,1fr) 110px;gap:10px;align-items:center;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:rgba(255,255,255,.03);font:900 13px Arial,sans-serif;letter-spacing:.06em;color:#e6f3ff;}
.online-slot.is-empty {opacity:.42;}
.online-slot.is-me {border-color:#38bdf8;background:rgba(14,165,233,.18);box-shadow:inset 0 0 10px rgba(56,189,248,.3);}
.online-slot.is-host .online-slot-name::after {content:' ★HOST';color:#ffe51a;font-size:9px;}
.online-slot-slot {font:italic 900 16px/1 Impact,sans-serif;color:#9fb6cc;}
.online-slot-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.online-slot-car {text-align:right;color:#9fb6cc;font-size:10px;letter-spacing:.05em;}
.online-countdown {margin-top:14px;text-align:center;font:italic 900 clamp(30px,7vw,64px)/1 Impact,sans-serif;color:#ffe51a;text-shadow:0 0 18px rgba(255,229,26,.45);}
.lb-row .col-time {color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.05em;text-align:right;}
.lb-row .col-date {font:800 10px Arial,sans-serif;color:#7fa4cb;}
.leaderboard-status {padding:14px;text-align:center;font:900 12px Arial,sans-serif;color:#a0caff;}
.leaderboard-footer {display:flex;justify-content:space-between;gap:8px;padding-top:10px;}

/* Responsive: Mobile Portrait & Narrow screens (<= 640px) */
@media (max-width: 640px) {
  .leaderboard-menu-screen {padding:8px 10px calc(10px + env(safe-area-inset-bottom));}
  .leaderboard-menu-screen .screen-header {height:auto;min-height:44px;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px;padding:0 2px 6px;margin-bottom:4px;}
  .leaderboard-menu-screen #leaderboard-heading {font-size:clamp(18px, 5vw, 24px);}
  .leaderboard-player-info {gap:6px;background:rgba(4,22,54,.75);padding:3px 8px;border:1px solid #1a4a82;border-radius:4px;}
  #lb-current-player-name {font-size:15px;max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #lb-btn-edit-name {padding:4px 7px;font-size:8.5px;}
  .leaderboard-track-tabs {margin:3px 0 6px;padding-bottom:3px;gap:3px;}
  .lb-tab {padding:5px 9px;font-size:9.5px;}
  .leaderboard-table-header,.lb-row {grid-template-columns:46px minmax(0,1fr) 90px;gap:8px;padding:7px 10px;font-size:12px;}
  .leaderboard-table-header .col-rank {letter-spacing:.05em;}
  .col-date {display:none!important;}
  .lb-row .col-rank {font-size:13px;}
  .lb-row .col-time {font-size:12.5px;}
  .leaderboard-menu-screen .screen-actions.leaderboard-footer {height:auto;min-height:48px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:6px;padding-bottom:2px;}
  .leaderboard-footer .back-action {grid-column:1;min-width:0;min-height:36px;font-size:11px;padding:4px 6px;justify-content:center;}
  .leaderboard-footer #lb-btn-refresh {grid-column:2;min-width:0;min-height:36px;font-size:10px;padding:4px 6px;}
  .leaderboard-footer .next-action {grid-column:1/-1;min-width:0;min-height:40px;font-size:13px;justify-content:center;}

  /* Name Entry Modal Portrait */
  .name-entry-card {width:min(390px,95vw);padding:14px 10px 12px;}
  .name-entry-title {font-size:22px;margin:2px 0 4px;}
  .name-entry-slots {gap:2px;margin:8px 0 8px;}
  .name-slot {width:clamp(22px,7.4vw,32px);height:clamp(34px,10vw,42px);border-width:1.5px;}
  .slot-char {font-size:clamp(16px,5.2vw,22px);}
  .name-entry-controls-bar {gap:3px;margin-bottom:6px;flex-wrap:nowrap;}
  .name-entry-controls-bar .ne-btn {min-height:28px;padding:3px 5px;font-size:9px;min-width:24px;}
  .name-entry-alphabet-grid {display:grid;grid-template-columns:repeat(10,1fr);gap:2px;padding:4px 3px;margin-bottom:8px;}
  .ne-char-btn {width:100%;height:28px;font-size:11px;}
  .name-entry-actions .confirm-btn {width:100%;min-height:38px;font-size:13px;}
}

/* Responsive: Mobile Landscape (<= 480px height) */
@media (max-height: 480px) {
  .leaderboard-menu-screen {padding:4px 14px calc(6px + env(safe-area-inset-bottom));}
  .leaderboard-menu-screen .screen-header {height:32px;margin-bottom:2px;}
  .leaderboard-menu-screen .screen-eyebrow {font-size:8px;}
  .leaderboard-menu-screen #leaderboard-heading {font-size:18px;}
  .leaderboard-player-info {gap:6px;}
  #lb-current-player-name {font-size:15px;}
  #lb-btn-edit-name {min-height:22px;padding:3px 7px;font-size:8px;}
  .leaderboard-track-tabs {margin:2px 0 4px;padding-bottom:2px;}
  .lb-tab {padding:3px 8px;font-size:9px;}
  .leaderboard-table-header {padding:3px 10px;font-size:8.5px;}
  .lb-row {padding:3px 10px;font-size:10.5px;}
  .lb-row .col-rank {font-size:12px;}
  .leaderboard-menu-screen .screen-actions.leaderboard-footer {height:auto;min-height:32px;padding-top:4px;gap:6px;}
  .leaderboard-footer button {min-height:28px;font-size:9.5px;padding:3px 10px;}

  /* Name Entry Modal Landscape */
  .name-entry-modal {padding:4px 8px;}
  .name-entry-card {width:min(620px,98vw);max-height:98vh;padding:5px 12px 6px;border-width:2px;}
  .name-entry-header {margin-bottom:3px;}
  .name-entry-badge {display:none;}
  .name-entry-title {font-size:16px;margin:0 0 2px;}
  .name-entry-record-info {font-size:10px;gap:8px;}
  .name-entry-record-info strong {font-size:14px;}
  .name-entry-timer {padding:1px 5px;top:-2px;right:-2px;}
  .timer-label {font-size:6px;}
  .timer-val {font-size:14px;}
  .name-entry-slots {margin:2px 0 4px;gap:2px;}
  .name-slot {width:clamp(20px,3.2vw,26px);height:clamp(25px,4vw,30px);border-width:1.5px;}
  .slot-char {font-size:15px;}
  .name-entry-controls-bar {gap:2px;margin-bottom:3px;}
  .name-entry-controls-bar .ne-btn {min-height:22px;padding:2px 5px;font-size:8.5px;min-width:22px;}
  .name-entry-alphabet-grid {display:grid;grid-template-columns:repeat(20,1fr);gap:2px;padding:2px;margin-bottom:4px;}
  .ne-char-btn {width:100%;height:20px;font-size:10px;}
  .name-entry-actions .confirm-btn {min-height:26px;min-width:120px;font-size:11px;padding:3px 12px;}
}

/* Supabase settings row */
.supabase-setting {display:flex;flex-direction:column;gap:6px;}
.supabase-fields {display:grid;gap:6px;width:100%;margin-top:4px;}
.setting-subrow {display:flex;justify-content:space-between;align-items:center;gap:12px;font:900 10px Arial,sans-serif;color:#b9dcff;}
.setting-subrow input {flex:1 1 220px;max-width:320px;padding:5px 8px;background:#021028;border:1px solid #23548e;color:#fff;font:900 11px monospace;}
.supabase-actions {display:flex;align-items:center;gap:12px;margin-top:4px;}
.setting-status {font:900 10px Arial,sans-serif;color:#8cc8ff;}


/* Floating car name tags (online) */
.car-name-layer {position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:6;}
.car-name {position:absolute;left:0;top:0;display:none;padding:3px 9px;border-radius:3px;border:1px solid rgba(130,205,255,.75);background:rgba(3,16,30,.78);color:#eaf6ff;font:900 14px/1.1 'Arial Black',Arial,sans-serif;letter-spacing:.07em;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.85);box-shadow:0 2px 8px rgba(0,0,0,.35);}
.car-name.is-me {color:#ffe51a;border-color:rgba(255,229,26,.8);background:rgba(30,24,0,.78);}
@media (max-width:820px) { .car-name {font-size:12px;padding:2px 6px;letter-spacing:.05em;} }

/* Name entry actions (skip + confirm) */
.name-entry-actions {display:flex;gap:8px;align-items:stretch;justify-content:center;}

/* Online lobby on phones (portrait / narrow) */
@media (max-width:800px) {
  .online-menu-screen {padding:8px 12px calc(10px + env(safe-area-inset-bottom));}
  .online-menu-screen .screen-header {height:auto;min-height:44px;flex-wrap:wrap;gap:4px 8px;padding:0 2px 6px;margin-bottom:4px;}
  .online-menu-screen #online-heading {font-size:clamp(20px,5.4vw,26px);}
  .online-panel {width:100%;margin:4px auto 0;}
  .online-panel .settings-fields {padding:4px 8px;}
  .online-menu-screen .segment-control span {min-height:42px;font-size:10px;}
  .online-slot {grid-template-columns:34px minmax(0,1fr) 70px;gap:6px;padding:6px 8px;font-size:11px;}
  .online-slot-slot {font-size:13px;}
  .online-actions {gap:6px;margin-top:6px;}
  .online-actions .next-action,.online-actions .arcade-btn {flex:1 1 40%;min-height:42px;font-size:12px;}
  .online-countdown {font-size:clamp(24px,9vw,46px);margin-top:8px;}
  #lb-submit-status {font-size:9.5px;margin-top:6px;}
  .name-entry-actions {flex-direction:column;}
  .name-entry-actions .ne-btn {width:100%;min-height:36px;}
}

/* Online lobby on landscape phones (short screens) */
@media (max-height:480px) {
  .online-menu-screen {padding:4px 14px calc(6px + env(safe-area-inset-bottom));}
  .online-menu-screen .screen-header {height:32px;min-height:32px;margin-bottom:2px;}
  .online-menu-screen #online-heading {font-size:18px;}
  .online-menu-screen .screen-eyebrow {font-size:8px;}
  .online-panel {margin-top:2px;}
  .online-panel .settings-fields {padding:2px 10px;}
  .online-menu-screen .setting-row {min-height:44px;}
  .online-menu-screen .segment-control span {min-height:34px;font-size:9.5px;}
  .online-menu-screen .setting-help {min-height:20px;padding:3px 0;font-size:9px;}
  .online-slot {grid-template-columns:30px minmax(0,1fr) 64px;padding:4px 8px;font-size:11px;min-height:28px;}
  .online-actions {margin-top:4px;gap:6px;}
  .online-actions button {min-height:34px;font-size:11px;padding:4px 12px;}
  .online-countdown {font-size:34px;margin-top:5px;}
  .name-entry-actions {flex-direction:row;gap:6px;}
  .name-entry-actions .ne-btn {width:auto;min-height:28px;}
}