/* High-resolution illustrated title and portrait selection; independent of WebGL quality. */
body{min-height:100dvh;display:grid;place-items:center;background:#0b2546}body>.masthead,body>footer{display:none}#frame{width:min(1250px,100vw,150dvh)}
#frame:is([data-stage="title"],[data-stage="characters"])>:not(#titleScreen):not(#driverScreen):not(#leaderboard):not(#rotateGate):not(#loading):not(#controlSettings):not(#playMode):not(#onlineLobby):not(#onlineWait){visibility:hidden!important;pointer-events:none!important}
.front-screen{position:absolute;inset:0;z-index:12;overflow:hidden;color:#fff9e8}
#titleScreen{background:#227dad}
.title-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;pointer-events:none}
.title-shade{position:absolute;inset:0;background:linear-gradient(90deg,#08335c55,transparent 46%),linear-gradient(0deg,#082c51c9,transparent 29%);pointer-events:none}
.title-logo{position:absolute;top:7%;left:5%;margin:0;display:flex;flex-direction:column;align-items:center;transform:rotate(-7deg);font-family:'Arial Rounded MT Bold','Arial Black',Arial,sans-serif;font-weight:1000;font-style:italic;letter-spacing:-.075em;line-height:.89;font-size:clamp(50px,8.7vw,116px);color:#fff8d7;-webkit-text-stroke:2px #153e68;paint-order:stroke fill;text-shadow:0 5px 0 #12365e,3px 8px 0 #12365e,0 13px 25px #06274c60}
.title-logo .kart-word{font-size:1.11em;color:#ffda58;letter-spacing:-.06em}.title-logo small{font-size:clamp(12px,1.5vw,19px);letter-spacing:.23em;line-height:1.6;background:#164b78;color:#fff8d6;border:2px solid #fff4c9;border-radius:8px;padding:3px 16px;margin-top:14px;text-shadow:none;-webkit-text-stroke:0}
#pressStart{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);min-height:56px;min-width:260px;max-width:85%;padding:13px 32px;border:2px solid #fff3ad;border-radius:14px;background:#123d75b8;color:#fff7cb;font-size:clamp(18px,2.2vw,28px);font-weight:900;letter-spacing:.16em;box-shadow:0 4px 0 #082b50,0 0 25px #69eaff44;backdrop-filter:none;display:flex;gap:14px;align-items:center;justify-content:center}
#pressStart:not(:disabled) .start-label{animation:start-glimmer 1.5s ease-in-out infinite}#pressStart:disabled{opacity:.8;cursor:wait}.start-chevron{color:#ffe05f;font-size:.85em}.title-credit{position:absolute;bottom:2.5%;width:100%;text-align:center;font-size:12px;letter-spacing:.13em;color:#e3f5ff;margin:0}.title-sound{position:absolute;right:var(--safe-right);top:20px;background:#143c6699;border:2px solid #fff5b0;border-radius:50%;width:44px;height:44px;color:#fff3a3;padding:10px;z-index:1}.title-sound .icon{width:22px;height:22px}
@keyframes start-glimmer{0%,100%{opacity:1;text-shadow:0 0 14px #fff1a76b}50%{opacity:.38;text-shadow:none}}
#driverScreen{background:radial-gradient(ellipse at 15% 20%,#248cbd,transparent 65%),linear-gradient(130deg,#134677,#133354 70%);padding:24px var(--safe-right) 20px var(--safe-left);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px}
.driver-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.driver-heading small{font-size:13px;color:#a7efff;font-weight:900;letter-spacing:.15em}.driver-heading h2{font-size:clamp(24px,3.2vw,42px);font-weight:900;font-style:italic;margin:3px 0 0;letter-spacing:-.04em;line-height:1.05}.front-back{min-height:44px;padding:10px 15px;display:flex;align-items:center;gap:8px;border:2px solid #8bd5ee;border-radius:12px;background:#133960b3;color:#fff;font-size:14px;font-weight:800}.front-back .icon{width:20px;height:20px}
.portrait-lineup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;min-height:0;padding:7px 4px 10px}
.portrait-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;border:3px solid var(--portrait-color);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 7px 0 #081f41;transition:transform .18s,border-color .18s;isolation:isolate}
.portrait-card img{display:block;width:100%;height:100%;min-height:0;flex:1;object-fit:cover;object-position:50% 25%;pointer-events:none}.portrait-card strong{position:relative;padding:14px 4px;background:var(--portrait-color);color:#173459;font-size:clamp(17px,2.2vw,28px);font-weight:1000;font-style:italic;letter-spacing:.035em;line-height:1;z-index:2;flex:none}
.portrait-card .pick-marker{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border-radius:50%;border:2px solid white;background:#123960;color:#fff;display:grid;place-items:center;opacity:0}.portrait-card[aria-pressed="true"]{border-color:#fff8cf;box-shadow:0 0 0 3px #ffda58,0 9px 0 #092844;transform:translateY(-5px)}.portrait-card[aria-pressed="true"] .pick-marker{opacity:1}.portrait-card[aria-pressed="true"] strong{background:#ffde65}.portrait-card:focus-visible,#pressStart:focus-visible,.front-back:focus-visible,#confirmDriver:focus-visible{outline:3px solid white;outline-offset:4px}
.driver-confirm-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:62px}.driver-selected-copy{min-width:0}.driver-selected-copy strong{font-size:25px;font-style:italic;color:#ffde65;letter-spacing:.025em}.driver-selected-copy p{margin:4px 0 0;font-size:14px;color:#e0f5ff}.driver-confirm-row .primary{width:auto;min-width:230px;max-width:none;min-height:54px;gap:25px;justify-content:center;background:linear-gradient(125deg,#ffd654,#ff9c65);border:2px solid #fff0ad;border-radius:15px;color:#173454;box-shadow:0 5px 0 #975142;font-size:16px;font-weight:900;padding:14px 24px}
#garageDrivers{position:absolute;bottom:4%;left:4%;min-height:44px;z-index:5}.garage-stage #menuFullscreen{left:auto;right:34%;top:4%;bottom:auto}.garage-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.garage-tabs [data-category="driver"]{display:none}.garage-stage .flow-heading small{font-size:12px}
#result{background:linear-gradient(110deg,#153d70f5,#2b477deb);backdrop-filter:none}#result .result-card{width:min(940px,100%);grid-template-columns:1fr 1.15fr;padding:24px;gap:15px 25px}.summary-identity{display:flex;align-items:center;gap:10px;text-align:left;margin:10px 0}.summary-identity .driver-portrait{width:52px;height:52px;aspect-ratio:1;flex:none;border:2px solid #ffe3a0}.summary-identity strong{font-size:21px;color:#ffe38a}.summary-identity small{display:block;color:#ddf4ff;font-size:13px;margin-top:4px}#summaryLaps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}#summaryLaps span{background:#13365f80;border:1px solid #98d5f480;border-radius:10px;padding:8px 4px}#summaryLaps small{display:block;font-size:12px;color:#b5e9ff}#summaryLaps strong{font-size:16px;color:#fff4bf;font-variant-numeric:tabular-nums}.summary-metrics{grid-column:1/-1;display:flex;justify-content:space-around;gap:12px;border-top:1px solid #8bddff66;padding-top:12px}.summary-metrics span{display:flex;gap:8px;align-items:center}.summary-metrics small{font-size:12px;color:#b6f2ff}.summary-metrics strong{font-size:16px;color:#fff4bf}#result .result-actions{grid-template-columns:1fr 1fr 1fr;gap:10px}#result .result-actions #resultHome{background:#3a548b;border-color:#a2c7ff;color:#fff7cc}#result .result-actions button{font-size:14px;min-height:48px;justify-content:center;gap:10px}
@media(max-height:550px){#driverScreen{padding-top:14px;padding-bottom:max(14px,env(safe-area-inset-bottom));gap:10px}.driver-heading h2{font-size:27px}.driver-heading small{font-size:12px}.portrait-lineup{gap:12px;padding-bottom:6px}.portrait-card{border-radius:15px}.portrait-card strong{padding:9px 2px;font-size:19px}.driver-confirm-row{min-height:48px}.driver-selected-copy strong{font-size:20px}.driver-selected-copy p{font-size:13px}.driver-confirm-row .primary{min-height:46px;padding:10px 20px;min-width:210px}.title-logo{font-size:clamp(46px,8.5vw,80px);top:8%}.title-logo small{margin-top:10px;font-size:12px}#pressStart{bottom:8%;min-height:48px;font-size:20px;padding:10px 24px}.title-credit{font-size:12px;bottom:2%}#result{padding:12px var(--safe-right) 12px var(--safe-left)}#result .result-card{padding:13px 18px;gap:8px 22px}#result h2{font-size:27px;margin:6px 0}#result #finishTime{font-size:27px}.summary-identity{margin:5px 0}.summary-identity .driver-portrait{width:38px;height:38px}.summary-identity strong{font-size:17px}#result #finishStats{margin:3px 0;font-size:12px}.finish-row{padding:4px 8px;margin:3px 0}.finish-row .driver-portrait{height:32px;width:32px}#summaryLaps{margin-top:6px}#summaryLaps span{padding:4px}.summary-metrics{padding-top:7px}.summary-metrics span{gap:5px}#result .result-actions button{min-height:44px;font-size:13px;padding:8px}.garage-stage #menuFullscreen{right:34%}}
@media(max-height:350px){#driverScreen{gap:7px;padding-top:10px}.driver-heading h2{font-size:23px}.driver-heading small{display:none}.front-back{padding:8px 12px}.portrait-card strong{padding:7px 2px;font-size:17px}.driver-selected-copy p{font-size:12px}.title-logo{font-size:54px}.title-logo small{font-size:12px}#result .result-card{align-items:start}.summary-metrics{display:none}}
@media(prefers-reduced-motion:reduce){#pressStart .start-label{animation:none!important}.portrait-card{transition:none}}
/* Reference-matched Game 3 lettering; the approved key visual stays untouched. */
.title-logo.original-game-logo{display:block;left:4%;top:4%;width:48%;height:37%;max-width:560px;max-height:250px;transform:none;line-height:0;font-size:inherit;text-shadow:none;-webkit-text-stroke:0}
.original-game-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left top;pointer-events:none}
/* Single-driver hero carousel: crisp supplied portraits, no WebGL cost. */
#driverScreen{background:radial-gradient(ellipse at 50% 45%,#ed967a 0%,#874256 48%,#1b2349 100%);transition:background .25s;touch-action:none}
#driverScreen[data-driver="kuro"]{background:radial-gradient(ellipse at 50% 45%,#b18bd4,#51366d 48%,#171d3a)}
#driverScreen[data-driver="piyo"]{background:radial-gradient(ellipse at 50% 45%,#ffe086,#bb782e 48%,#3c3448)}
#driverScreen[data-driver="penpen"]{background:radial-gradient(ellipse at 50% 45%,#8ceafa,#276b9b 48%,#152348)}
.portrait-lineup{display:block;position:relative;padding:0;isolation:isolate}
.portrait-lineup .portrait-card{position:absolute;left:50%;top:0;height:100%;width:42%;max-width:410px;transform:translateX(-50%);transition:transform .28s ease,opacity .28s ease;box-shadow:0 12px 35px #071d4566;border-width:3px;border-radius:26px;background:#fff}
.portrait-lineup .portrait-card img{object-fit:contain;object-position:center;background:#fff;height:calc(100% - 36px)}
.portrait-lineup .portrait-card strong{font-size:20px;padding:8px;flex:none}
.portrait-lineup .portrait-card[data-slot="current"]{z-index:3;transform:translateX(-50%);box-shadow:0 0 0 3px #ffe488,0 14px 40px #0b173c80}
.portrait-lineup .portrait-card[data-slot="previous"]{z-index:1;transform:translateX(-142%) scale(.77) rotate(-7deg);opacity:.52}
.portrait-lineup .portrait-card[data-slot="next"]{z-index:1;transform:translateX(42%) scale(.77) rotate(7deg);opacity:.52}
.portrait-lineup .portrait-card[data-slot="away"]{visibility:hidden;pointer-events:none;opacity:0;transform:translateX(-50%) scale(.6)}
.carousel-arrow{position:absolute;top:42%;z-index:5;width:52px;height:52px;border:2px solid #fff3bf;border-radius:50%;background:#182e60e6;color:#fff8d5;font-size:26px;box-shadow:0 4px 0 #101e3b;display:grid;place-items:center;padding:0}
.carousel-arrow.previous{left:12%}.carousel-arrow.next{right:12%}.driver-page{position:absolute;right:0;bottom:0;font-size:14px;font-weight:900;letter-spacing:.15em;color:#fff3d9}
.driver-selected-copy strong{font-size:clamp(24px,3.8vw,44px);color:#fff7d3}.driver-selected-copy p{color:white}.driver-heading h2{font-size:clamp(22px,3vw,36px)}
@media(max-height:550px){.portrait-lineup .portrait-card{width:35%;border-radius:17px}.portrait-lineup .portrait-card strong{font-size:16px;padding:6px}.portrait-lineup .portrait-card img{height:calc(100% - 28px)}.carousel-arrow.previous{left:20%}.carousel-arrow.next{right:20%}.driver-selected-copy strong{font-size:24px}.carousel-arrow{width:44px;height:44px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.portrait-lineup .portrait-card,#driverScreen{transition:none}}

/* Attract mode: the original key visual dissolves over the live race. */
#pressStart{transform:translateX(-50%) scale(.5);transform-origin:center center}
#pressStart::after{content:"";position:absolute;inset:-16px 0}
#frame[data-stage="demo"]>:not(#demoStart):not(#rotateGate){pointer-events:none!important}
#frame[data-stage="demo"] #titleScreen{pointer-events:none}
#demoStart{position:absolute;inset:0;z-index:13;width:100%;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff8d7;display:flex;align-items:flex-end;justify-content:center;padding:0 0 5%;cursor:pointer}
#demoStart[hidden]{display:none!important}
#demoStart span{font-size:14px;font-weight:900;letter-spacing:.16em;padding:10px 18px;border:1px solid #fff2af80;border-radius:20px;background:#102c5799;text-shadow:0 2px 4px #092840}
#demoStart:focus-visible{outline:3px solid #fff2ad;outline-offset:-6px}