:root { --ink:#18334b; --cream:#fff7df; --sky:#77c8e7; --gold:#f7b83f; --blue:#328bb8; --green:#4f9b69; --coral:#e77357; font-family: ui-rounded, "Avenir Next", system-ui, sans-serif; color:var(--ink); background:#d9f0f6; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(#b9e6f4,#fff0c9); }
button, select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%, 1100px); min-height:100vh; margin:auto; padding:18px; }
.topbar, .screen-heading, .race-topline, .control-row, .assist-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar { border-bottom:3px solid rgba(24,51,75,.14); padding-bottom:12px; }
.eyebrow { margin:0; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:#55738a; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:2rem; } h2 { margin-bottom:0; }
.screen { padding:30px 0; } .hidden { display:none!important; }
.home-screen { text-align:center; max-width:630px; margin:50px auto; }
.hero-mark,.finish-star { color:var(--gold); font-size:5rem; text-shadow:0 2px 0 #fff, 0 0 25px #ffd975; }
.welcome { font-size:clamp(1.35rem,3vw,2rem); line-height:1.25; font-weight:800; }
.helper-copy { color:#547086; }
.primary-button,.secondary-button,.quiet-button,.back-button { border:0; border-radius:999px; padding:.78rem 1.25rem; font-weight:800; margin:6px; }
.primary-button { background:var(--coral); color:#fff; box-shadow:0 4px 0 #b84d40; } .primary-button:active { transform:translateY(3px); box-shadow:0 1px 0 #b84d40; }
.primary-button.large { font-size:1.3rem; padding:1rem 2rem; }
.secondary-button { background:#fff; color:var(--ink); box-shadow:0 2px 0 #c9d5d6; }.quiet-button,.back-button { background:#e9f5f6; color:var(--ink); }
.choice-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:22px 0; } fieldset { border:2px solid #b6d6d4; border-radius:20px; background:#ffffffaa; padding:14px; } legend { font-weight:900; padding:0 8px; }
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.vehicle-grid { grid-template-columns:1fr; }
.choice-card,.circuit-card { border:3px solid transparent; border-radius:16px; background:var(--cream); padding:12px; text-align:left; min-height:75px; color:var(--ink); }.choice-card.selected,.circuit-card:hover { border-color:var(--coral); background:#fff; }.choice-card strong,.circuit-card strong { display:block; font-size:1rem; }.choice-card span,.circuit-card span { color:#5e7585; font-size:.82rem; }.driver-card { display:grid; grid-template-columns:54px 1fr; column-gap:8px; align-items:center; }.driver-card img { grid-row:span 2; width:54px; height:54px; object-fit:cover; object-position:50% 30%; border-radius:12px; border:2px solid #fff; background:#b9e6f4; }
.circuit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; }.circuit-card { min-height:132px; position:relative; overflow:hidden; padding-left:118px; }.circuit-card img { position:absolute; left:0; top:0; width:104px; height:100%; object-fit:cover; border-right:3px solid #fff5dc; }.circuit-card::after { content:""; position:absolute; right:-20px; bottom:-40px; width:100px; height:100px; border-radius:50%; background:var(--card-color,#a9d8b2); opacity:.35; }
.race-stage { --race-sky:#83d0e9; --race-land:#b9db8a; --race-road:#e9c27a; --race-art:none; position:relative; min-height:52vh; overflow:hidden; border-radius:28px; background-image:linear-gradient(#fff7df22,#fff7df22),var(--race-art),linear-gradient(var(--race-sky) 0 38%,var(--race-land) 38% 58%,var(--race-road) 58%); background-size:cover; background-position:center; border:5px solid #fff5dc; box-shadow:0 4px 0 #769eac; }.route-label { position:absolute; left:20px; top:18px; font-weight:900; font-size:clamp(1rem,2vw,1.3rem); text-shadow:0 2px 0 #fff7df; }.landmark-label { position:absolute; left:20px; top:48px; font-size:.8rem; font-weight:800; color:#34566a; background:#fff8dfdd; border-radius:999px; padding:4px 9px; }.sky-star { position:absolute; right:20%; top:8%; color:#fff7bd; font-size:2rem; }.start-countdown { position:absolute; z-index:10; left:50%; top:48%; transform:translate(-50%,-50%) rotate(-3deg); min-width:78px; padding:10px 16px; border-radius:22px; background:#e77357; border:4px solid #fff7df; box-shadow:0 4px 0 #a9473a; color:#fff; text-align:center; font-size:2.5rem; font-weight:1000; text-shadow:0 2px 0 #a9473a; }.start-countdown.hidden { display:none; }
.track { position:absolute; inset:12% 4% 9%; }.route-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }.route-shadow,.route-path,.route-dash { fill:none; stroke-linecap:round; stroke-linejoin:round; }.route-shadow { stroke:#704e3670; stroke-width:82; }.route-path { stroke:#e7bb76e8; stroke-width:66; }.route-dash { stroke:#fff4d1; stroke-width:5; stroke-dasharray:17 22; }
.recovery-lane { position:absolute; left:2%; bottom:8%; height:32%; width:23%; border:10px solid #a4ddc1; border-radius:45%; opacity:.9; }.recovery-lane::after { content:"Safe return"; position:absolute; bottom:-25px; left:20px; font-size:.75rem; font-weight:800; color:#356e65; }
.kart-player,.ai-kart { position:absolute; bottom:24%; width:86px; height:48px; border-radius:30px 30px 18px 18px; color:#fff; display:flex; align-items:flex-end; justify-content:center; gap:4px; padding:4px; font-size:.64rem; font-weight:900; background-size:cover; background-position:center 32%; box-shadow:0 3px 8px #18334b66; transition:left .14s linear, transform .14s linear; }.kart-player { left:9%; background-color:var(--blue); border:4px solid #fff5dc; z-index:3; }.ai-kart { border:3px solid #fff5dc; opacity:.96; z-index:2; }.ai-kart.friend { background-color:#4f9b69; }.ai-kart.mischief { background-color:#714f94; }.kart-player span:last-child,.ai-kart span:last-child { max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#18334baa; border-radius:999px; padding:1px 4px; }.kart-face { color:#f8d07d; }.turn-cue { position:absolute; top:8%; min-width:74px; transform:translateX(-50%); text-align:center; color:#284c5d; font-size:.72rem; font-weight:900; padding:4px 7px; border-radius:10px; background:#fff7dfdd; border:2px solid #fff; }.obstacle { position:absolute; left:48%; top:15%; font-size:2rem; transition:opacity .3s; }.shortcut-lights { position:absolute; right:10%; top:17%; display:flex; gap:8px; }.shortcut-lights span { display:block; width:22px; height:22px; border-radius:50%; background:#f9c34f; box-shadow:0 0 10px #fff; }.shortcut-lights.taken span { background:#a8d8b2; box-shadow:none; }.communion-glow { position:absolute; left:67%; bottom:21%; width:36px; height:36px; border-radius:50%; background:#fff1a3; box-shadow:0 0 22px 10px #ffe9a0; opacity:.75; }
.race-hud { padding:14px 4px; }.route-status { display:flex; gap:16px; font-weight:800; }.route-status span:last-child { color:#577287; }.lap-route { position:relative; height:18px; margin:11px 0 2px; border-radius:999px; background:#d9e9df; overflow:visible; }.lap-progress { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#f7b83f,#e77357); transition:width .12s linear; }.turn-pips { position:absolute; inset:0; }.turn-pip { position:absolute; top:50%; width:28px; height:28px; transform:translate(-50%,-50%); border:3px solid #fff; border-radius:50%; display:grid; place-items:center; background:#fff7df; font-size:.85rem; box-shadow:0 1px 3px #18334b44; }.turn-pip.done { background:#a8d8b2; }.turn-pip.current { background:#f9c34f; transform:translate(-50%,-50%) scale(1.13); }.turn-pip.finish { left:100%; background:#e77357; color:#fff; }.loadout-cue,.rival-cue { margin:7px 0 0; font-size:.82rem; font-weight:800; }.loadout-cue { color:#356e65; }.rival-cue { color:#6b5079; }.control-row { justify-content:center; flex-wrap:wrap; margin-top:12px; }.control-button,.boost-button,.drive-button,.brake-button { border:0; border-radius:18px; min-width:70px; min-height:58px; font-size:1rem; font-weight:900; }.control-button { background:#e6f5f0; color:var(--ink); }.drive-button { background:var(--coral); color:#fff; box-shadow:0 4px 0 #b84d40; min-width:88px; }.drive-button.driving { transform:translateY(3px); box-shadow:0 1px 0 #b84d40; }.brake-button { background:#d8e7ee; color:#284c5d; box-shadow:0 4px 0 #94aebc; }.brake-button.braking { transform:translateY(3px); box-shadow:0 1px 0 #94aebc; }.boost-button { background:var(--gold); color:#684100; box-shadow:0 4px 0 #cc8d27; }.boost-button.cooling { opacity:.55; }.steering-joystick { width:76px; height:76px; border-radius:50%; background:#d8edf3; border:4px solid #fff7df; box-shadow:inset 0 0 0 3px #9ec5d2; touch-action:none; position:relative; }.steering-joystick::before,.steering-joystick::after { content:""; position:absolute; background:#83acb8; opacity:.55; }.steering-joystick::before { left:12px; right:12px; top:50%; border-top:2px dashed #83acb8; }.steering-joystick::after { top:12px; bottom:12px; left:50%; border-left:2px dashed #83acb8; }.joystick-knob { position:absolute; left:50%; top:50%; width:31px; height:31px; transform:translate(-50%,-50%); border-radius:50%; background:#328bb8; border:3px solid #fff; box-shadow:0 2px 3px #18334b55; }.assist-row { justify-content:center; margin-top:10px; font-size:.82rem; color:#4e6a7d; }.assist-row select { border-radius:12px; border:1px solid #91b9c4; padding:4px; }
dialog { border:0; border-radius:24px; padding:28px; text-align:center; color:var(--ink); box-shadow:0 20px 70px #17374780; max-width:420px; } dialog::backdrop { background:#163c5366; }.finish-virtue { padding:10px 14px; border-radius:14px; color:#356e65; background:#e8f5e9; font-weight:800; }
.finish-places { margin:12px auto; padding:8px 12px 8px 32px; max-width:260px; border-radius:14px; background:#fff7df; text-align:left; font-weight:900; }.finish-places .player-place { color:#b84d40; }
.finish-next { margin:8px 0; color:#854d0e; font-size:.84rem; font-weight:900; }
@media (max-width:650px) { .app-shell { padding:10px; }.choice-layout,.circuit-grid { grid-template-columns:1fr; }.race-stage { min-height:46vh; }.route-status { flex-direction:column; gap:5px; }.recovery-lane::after { content:"↩"; font-size:1.4rem; }.topbar h1 { font-size:1.6rem; } }
.kart-player,.ai-kart { bottom:auto; transition:left .14s linear, top .14s linear, transform .14s linear; }
.kart-player span,.ai-kart span { transform:rotate(calc(var(--heading, 0) * -1deg)); }
.route-markers { position:absolute; inset:0; pointer-events:none; z-index:1; }.route-marker { position:absolute; width:70px; height:14px; border:3px solid #fff7df; border-radius:4px; background:repeating-linear-gradient(90deg,#284c5d 0 8px,#fff7df 8px 16px); box-shadow:0 2px 3px #18334b66; }.route-marker span { position:absolute; left:50%; top:-25px; padding:2px 6px; border-radius:999px; color:#284c5d; background:#fff7df; font-size:.62rem; font-weight:1000; white-space:nowrap; box-shadow:0 1px 2px #18334b44; }.route-marker.checkpoint { width:42px; background:repeating-linear-gradient(90deg,#f9c34f 0 8px,#fff7df 8px 16px); opacity:.92; }.route-marker.checkpoint span { top:17px; }.shortcut-lights { right:auto; transform:translate(-50%,-50%); }
.course-facts { display:inline-block; margin-top:4px; font-weight:800; color:#356e65!important; }.mini-route { position:absolute; right:2px; bottom:-8px; width:120px; height:66px; opacity:.6; pointer-events:none; }.mini-route path { fill:none; stroke:#fff7df; stroke-width:52px; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 0 #34566a66); }

/* Storybook-racer visual pass: deliberately chunky, matte, and easy to read at child distance. */
body { background:radial-gradient(circle at 12% 8%,#fff7dfb8 0 2px,transparent 3px),radial-gradient(circle at 86% 15%,#fff7df8c 0 3px,transparent 4px),linear-gradient(145deg,#9bd8eb 0%,#d9f0f6 48%,#f8dfac 100%); }
.app-shell { position:relative; background:#fffaf0a8; box-shadow:0 0 0 1px #fff7df88,0 16px 40px #315c7030; }
.topbar { padding:12px 14px 16px; border:3px solid #fff7df; border-radius:0 0 24px 24px; background:linear-gradient(100deg,#e5f4ef,#fff7df); box-shadow:0 4px 0 #769eac; }
.topbar h1 { letter-spacing:-.04em; text-shadow:0 2px 0 #fff7df; }.screen-heading { padding:0 4px 12px; border-bottom:2px dashed #8fbdc7; }
.home-screen { padding:34px 24px; border:3px solid #fff7df; border-radius:32px; background:linear-gradient(145deg,#ffffffd9,#e3f5f0cc); box-shadow:0 7px 0 #9cc8cf; }.home-screen::before { content:""; display:block; height:14px; margin:-20px auto 18px; width:min(280px,80%); border-radius:999px; background:repeating-linear-gradient(90deg,#328bb8 0 18px,#fff7df 18px 36px); box-shadow:0 2px 0 #245f82; }
.primary-button,.secondary-button,.quiet-button,.back-button,.choice-card,.circuit-card { transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }.primary-button:hover,.secondary-button:hover,.choice-card:hover,.circuit-card:hover { transform:translateY(-2px); box-shadow:0 6px 0 #769eac; }
fieldset { box-shadow:0 4px 0 #b1d0d0; }.choice-card { border-color:#e2efe8; box-shadow:0 2px 0 #b8d3d0; }.choice-card.selected { box-shadow:0 4px 0 #d35d4b; }
.circuit-card { min-height:156px; padding:16px 130px 14px 128px; border-color:#fff7df; box-shadow:0 4px 0 #78a1ad; background:linear-gradient(105deg,#fffaf0 20%,#f4fbf8 100%); }.circuit-card img { width:112px; border-right:4px solid #fff7df; }.circuit-card strong { font-size:1.08rem; line-height:1.08; padding-bottom:3px; }.circuit-card::after { width:130px; height:130px; right:-28px; bottom:-55px; opacity:.45; }.mini-route { z-index:1; right:0; bottom:-3px; width:126px; height:73px; opacity:.9; }.mini-route path { stroke:var(--card-color,#a9d8b2); stroke-width:48px; filter:drop-shadow(0 3px 0 #34566a77); }.course-facts { position:relative; z-index:2; padding:3px 6px; border-radius:999px; background:#e7f4ee; }
.race-topline { margin-bottom:10px; padding:0 4px; }.race-title { font-size:clamp(.88rem,2vw,1.1rem); font-weight:1000; text-align:center; text-shadow:0 2px 0 #fff7df; }
.race-stage { isolation:isolate; min-height:58vh; border-width:6px; box-shadow:0 6px 0 #5a8795,0 15px 30px #24465b38; }.race-stage::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#17374712 0 45%,transparent 45% 100%),radial-gradient(ellipse at center,#fff7df18 0 38%,#17374716 100%); pointer-events:none; }.race-stage::after { content:""; position:absolute; inset:10px; border:2px dashed #fff7df9c; border-radius:19px; pointer-events:none; }
.race-stage.glow::before { z-index:6; background:radial-gradient(circle at 50% 50%,#fffce6a8 0 10%,#ffe8a04d 34%,#ffe0a700 70%),linear-gradient(180deg,#fff7df22,transparent); animation:communion-warmth 1.4s ease-out; pointer-events:none; }
@keyframes communion-warmth { 0% { opacity:0; } 22% { opacity:1; } 100% { opacity:.18; } }
.route-label { z-index:4; padding:5px 10px; border-radius:12px; background:#fff7dfd9; box-shadow:0 2px 0 #6e9eaa; }.landmark-label { z-index:4; box-shadow:0 2px 0 #769eac; }.track { z-index:1; }.skid-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }.route-shadow { stroke:#523a2a88; stroke-width:94; }.route-path { stroke:#d59659f2; stroke-width:76; }.route-dash { stroke:#fff8d8; stroke-width:7; stroke-dasharray:15 20; }
.kart-player,.ai-kart { overflow:visible; border-radius:36px 36px 20px 20px; box-shadow:0 5px 0 #17374788,0 8px 12px #18334b55; }.kart-player::before,.ai-kart::before { content:""; position:absolute; left:11px; bottom:-8px; width:15px; height:15px; border-radius:50%; background:radial-gradient(circle,#c9d5d6 0 24%,#2a3f4a 27% 62%,#111e27 65%); box-shadow:49px 0 0 #111e27; z-index:-1; }.kart-player { box-shadow:0 0 0 3px #e77357,0 5px 0 #17374788,0 8px 12px #18334b55; }.kart-player span,.ai-kart span { position:relative; z-index:2; }.ai-kart.friend { box-shadow:0 0 0 2px #a8d8b2,0 5px 0 #17374788,0 8px 12px #18334b55; }.ai-kart.mischief { box-shadow:0 0 0 2px #e9a1a9,0 5px 0 #17374788,0 8px 12px #18334b55; }
.turn-cue { z-index:5; border-width:3px; box-shadow:0 3px 0 #6e9eaa; }.obstacle { z-index:4; filter:drop-shadow(0 3px 1px #18334b66); }.shortcut-lights { z-index:4; }.shortcut-lights span { border:3px solid #fff7df; }.communion-glow { z-index:2; }
.race-hud { margin-top:13px; padding:15px; border:3px solid #fff7df; border-radius:22px; background:linear-gradient(135deg,#ffffff,#e9f5f6); box-shadow:0 4px 0 #86afb9; }.lap-route { height:20px; border:2px solid #fff7df; box-shadow:inset 0 1px 2px #4d7b8744; }.control-button,.boost-button,.drive-button,.brake-button { border:3px solid #fff7df; }.steering-joystick { box-shadow:inset 0 0 0 3px #9ec5d2,0 3px 0 #769eac; }
@media (max-width:650px) { .app-shell { padding:10px 8px; }.circuit-card { min-height:144px; padding:14px 112px 12px 112px; }.circuit-card img { width:96px; }.mini-route { width:108px; height:64px; }.race-stage { min-height:55vh; }.route-label { max-width:46%; } }
.steer-controls,.drive-controls { display:flex; align-items:center; justify-content:center; gap:8px; }
@media (max-width:650px) { .control-row { display:grid; grid-template-columns:1fr; width:100%; gap:10px; }.steer-controls,.drive-controls { width:100%; }.steer-controls .control-button { min-width:52px; min-height:52px; }.drive-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }.drive-controls button { min-width:0; min-height:54px; padding:6px; font-size:.88rem; }.kart-player { width:76px; height:42px; }.ai-kart { width:50px; height:30px; padding:2px; font-size:.48rem; }.ai-kart span:last-child { display:none; }.kart-player::before,.ai-kart::before { transform:scale(.75); transform-origin:left bottom; } }

.kart-player,.ai-kart { width:112px; height:84px; padding:0; overflow:visible; background:none!important; border:0; border-radius:14px; box-shadow:0 4px 9px #18334b66; }
.kart-player::before,.ai-kart::before { display:none; }
.race-kart-name { position:absolute!important; z-index:3!important; left:50%; bottom:-9px; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transform:translateX(-50%)!important; padding:2px 6px; border:2px solid #fff7df; border-radius:999px; background:#18334bcc; color:#fff; font-size:.59rem; font-weight:1000; line-height:1; text-shadow:none; }
.ai-kart { width:78px; height:59px; opacity:.98; }
.ai-kart .race-kart-name { max-width:72px; font-size:.48rem; bottom:-7px; padding:1px 4px; }
@media (max-width:650px) { .kart-player { width:100px; height:75px; }.ai-kart { width:64px; height:48px; }.ai-kart .race-kart-name { display:none; }.race-kart-name { bottom:-7px; } }

/* A top-down course is its own reusable renderer mode: the painted road is the
   course surface, while the hidden SVG remains the configurable movement rail. */
.topdown-camera .route-svg { opacity:0; }
.topdown-camera .recovery-lane { display:none; }
.topdown-camera .track { inset:0; }
.topdown-camera .kart-player { z-index:5; }
.topdown-camera .ai-kart { z-index:3; }
.topdown-camera { min-height:auto; aspect-ratio:4/3; background-size:cover,contain,cover!important; background-repeat:no-repeat; background-color:#a8cf83; }
.topdown-camera .communion-glow,.topdown-camera .shortcut-lights { display:none; }
.topdown-camera .topdown-vehicle { display:block; position:relative; width:100%; height:100%; background-size:200% 200%; background-repeat:no-repeat; filter:drop-shadow(0 3px 4px #18334b77); transform:rotate(calc(var(--heading, 0) * 1deg - 90deg)); transition:none!important; }
.topdown-camera .cockpit-face { position:absolute; left:50%; top:38%; width:26px; height:26px; transform:translate(-50%,-50%) rotate(calc(var(--heading, 0) * -1deg + 90deg)); border-radius:50%; border:2px solid #fff; background:#fff; object-fit:cover; object-position:center; box-shadow:0 1.5px 4px #18334b80; overflow:hidden; }
.topdown-camera .ai-kart .cockpit-face { width:20px; height:20px; border-width:1.5px; }
.topdown-camera .kart-player,.topdown-camera .ai-kart { background:none!important; background-color:transparent!important; border:0!important; box-shadow:none!important; padding:0; transition:none!important; }
.topdown-camera .kart-player { width:68px; height:68px; }
.topdown-camera .ai-kart { width:52px; height:52px; opacity:1; }
.topdown-camera .race-kart-name { bottom:-11px; transform:translateX(-50%)!important; }
.topdown-camera .kart-player .race-kart-name { font-size:.72rem; padding:3px 7px; }
.topdown-camera .topdown-identity { display:none; }
@media (max-width:650px) { .topdown-camera .kart-player { width:62px; height:62px; }.topdown-camera .ai-kart { width:46px; height:46px; }.topdown-camera .cockpit-face { width:22px; height:22px; }.topdown-camera .ai-kart .cockpit-face { width:17px; height:17px; } }

/* Real-time reactive charism banner */
.charism-banner { grid-column:1 / -1; display:flex; align-items:center; gap:12px; padding:10px 16px; margin:4px 0 10px; background:linear-gradient(135deg,rgba(255,250,240,0.95),rgba(230,246,242,0.9)); border:2px solid #ffd77a; border-radius:16px; box-shadow:0 3px 8px rgba(24,51,75,0.08),inset 0 0 0 1px #fff; }
.charism-star { color:#d97706; font-size:1.3rem; line-height:1; text-shadow:0 0 8px #fde68a; animation:pulse-star 2.4s ease-in-out infinite; }
.charism-body { flex:1; min-width:0; }
.charism-topline { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font-size:0.86rem; color:var(--ink); }
.charism-topline strong { font-weight:900; color:#173747; }
.charism-guide { color:#356e65; font-weight:700; }
.charism-tag { background:#fdf2d0; border:1px solid #f6cf70; color:#854d0e; border-radius:999px; padding:1px 8px; font-size:0.72rem; font-weight:800; letter-spacing:0.02em; }
.charism-quote { margin:3px 0 0; font-size:0.8rem; font-style:italic; font-weight:600; color:#4b6b7a; line-height:1.25; }

/* Status halos (Turbo boost & Grace shield) */
.status-halo { position:absolute; inset:-6px; border-radius:50%; pointer-events:none; opacity:0; transition:opacity .25s ease,transform .25s ease; }
.kart-player.boosting .status-halo { opacity:.95; border:4px solid #ffd700; box-shadow:0 0 16px 6px #ffd700cc,inset 0 0 8px #fff7a0; animation:halo-pulse .75s ease-in-out infinite alternate; }
.kart-player.shielded .status-halo { opacity:.95; border:4px solid #5eead4; box-shadow:0 0 16px 6px #5eead4cc,inset 0 0 8px #d1fae5; animation:halo-pulse 1.1s ease-in-out infinite alternate; }
@keyframes halo-pulse { 0% { transform:scale(.96); opacity:.7; } 100% { transform:scale(1.08); opacity:1; } }
@keyframes pulse-star { 0%,100% { transform:scale(1); filter:drop-shadow(0 0 2px #f59e0b); } 50% { transform:scale(1.15); filter:drop-shadow(0 0 6px #f59e0b); } }

/* Live in-race position badge */
.position-badge { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:24px; padding:0 9px; border-radius:999px; background:linear-gradient(135deg,#ffd700,#f59e0b); color:#5d3d00; font-weight:1000; font-size:0.86rem; line-height:1; border:2px solid #fff; box-shadow:0 2px 5px rgba(24,51,75,0.22); }
.position-badge.lead { background:linear-gradient(135deg,#ffe066,#f59e0b); box-shadow:0 0 10px #ffd700aa,0 2px 5px rgba(24,51,75,0.22); }

/* Circuit personal best badge */
.circuit-record { display:inline-block; margin-top:3px; padding:2px 8px; background:#fef3c7; color:#92400e; border:1.5px solid #fcd34d; border-radius:999px; font-size:0.75rem; font-weight:900; }

/* Soft kart bump recoil */
.kart-player.bumped { animation:kart-bump-recoil .28s ease-out; }
@keyframes kart-bump-recoil { 0% { transform:translate(-50%,-50%) scale(1); } 35% { transform:translate(-50%,-50%) scale(0.92); } 100% { transform:translate(-50%,-50%) scale(1); } }

/* Mobile: on-screen controls overlaid on the play area (joystick left, buttons right) */
@media (max-width:650px) {
  .race-topline { flex-wrap:nowrap; gap:6px; }
  .race-topline .quiet-button { font-size:.7rem; padding:5px 8px; min-width:0; white-space:nowrap; }
  .race-topline .race-title { font-size:.78rem; line-height:1.05; text-align:center; }
  #race-screen { padding-bottom:150px; }
  #race-screen .race-hud .loadout-cue,
  #race-screen .race-hud .rival-cue,
  #race-screen .race-hud .assist-row { display:none; }
  .race-hud .control-row { position:fixed; left:0; right:0; bottom:0; z-index:45; margin:0; width:auto;
    padding:0 12px calc(10px + env(safe-area-inset-bottom,0px)); display:flex; flex-wrap:nowrap;
    justify-content:space-between; align-items:flex-end; gap:0; pointer-events:none; }
  .race-hud .steer-controls,.race-hud .drive-controls { width:auto; pointer-events:auto; }
  .race-hud .steer-controls { gap:0; }
  .race-hud .steer-controls .control-button { display:none; }
  .race-hud .steering-joystick { width:116px; height:116px; opacity:.82; background:#d8edf3cc;
    box-shadow:inset 0 0 0 3px #9ec5d2aa,0 3px 0 #769eac99; }
  .race-hud .joystick-knob { width:42px; height:42px; opacity:.95; }
  .race-hud .drive-controls { display:grid; grid-template-columns:auto auto; gap:7px; }
  .race-hud .drive-controls #boost-button { grid-column:1 / -1; }
  .race-hud .drive-controls button { min-width:86px; min-height:54px; padding:6px 8px; font-size:.9rem; opacity:.9; }
}

/* Phone PORTRAIT during a race: ask the player to rotate */
@media (max-width:650px) and (orientation:portrait) {
  #race-screen:not(.hidden) { position:fixed; inset:0; z-index:60; background:#12333f;
    display:flex; align-items:center; justify-content:center; padding:0; }
  #race-screen:not(.hidden) > * { display:none!important; }
  #race-screen:not(.hidden)::after {
    content:"\21BB  Turn your phone sideways to race\A\21BB  Gira el tel\00E9fono para jugar";
    white-space:pre-line; text-align:center; color:#fff7df; font-weight:900; font-size:1.05rem;
    line-height:1.8; padding:0 34px; }
}

/* Phone LANDSCAPE during a race: full-screen track, joystick left / buttons right */
@media (max-width:960px) and (orientation:landscape) and (max-height:540px) {
  html, body { overflow:hidden; }
  #race-screen:not(.hidden) { position:fixed; inset:0; z-index:60; background:#0f2f3b;
    display:flex; align-items:center; justify-content:center; padding:0; margin:0; }
  #race-screen .race-topline { position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:62;
    width:auto; gap:8px; padding:3px 10px; background:#fff7dfd9; border-radius:999px; box-shadow:0 2px 6px #12333f55; }
  #race-screen .race-topline .quiet-button { font-size:.66rem; padding:4px 8px; min-width:0; white-space:nowrap; }
  #race-screen .race-topline .race-title { font-size:.68rem; line-height:1; }
  #race-screen .race-hud { position:fixed; inset:auto 0 0 0; z-index:61; margin:0; padding:0;
    background:none; border:0; box-shadow:none; pointer-events:none; }
  #race-screen .race-hud .route-status,
  #race-screen .race-hud .loadout-cue,
  #race-screen .race-hud .rival-cue,
  #race-screen .race-hud .assist-row { display:none; }
  #race-screen .race-hud .lap-route { position:fixed; top:0; left:0; right:0; margin:0; height:9px; border:0; border-radius:0;
    background:#12333f66; box-shadow:none; z-index:64; }
  #race-screen .race-hud .lap-progress { box-shadow:0 0 6px #f7b83f88; }
  #race-screen .race-stage { height:100vh; width:auto; aspect-ratio:4/3; min-height:0!important;
    border:0; border-radius:0; box-shadow:none; }
  #race-screen .race-stage.topdown-camera { aspect-ratio:4/3; }
  #race-screen .race-stage::after { display:none; }
  #race-screen .route-label, #race-screen .landmark-label, #race-screen .sky-star { display:none; }
  #race-screen .route-marker { width:28px; height:9px; border-width:2px; opacity:.65; }
  #race-screen .route-marker span { display:none; }
  #race-screen .topdown-camera .ai-kart .race-kart-name { display:none; }
  #race-screen .topdown-camera .kart-player .race-kart-name { font-size:.72rem; bottom:-12px; }
  #race-screen .control-row { position:fixed; inset:0; z-index:63; margin:0; width:auto;
    padding:14px 10px calc(12px + env(safe-area-inset-bottom,0px));
    display:flex; flex-wrap:nowrap; align-items:flex-end; justify-content:space-between; gap:0; pointer-events:none; }
  #race-screen .steer-controls, #race-screen .drive-controls { width:auto; pointer-events:auto; }
  #race-screen .steer-controls { gap:0; }
  #race-screen .steer-controls .control-button { display:none; }
  #race-screen .steering-joystick { width:76px; height:76px; opacity:.8; background:#d8edf3cc;
    box-shadow:inset 0 0 0 3px #9ec5d2aa,0 3px 0 #769eac99; }
  #race-screen .joystick-knob { width:32px; height:32px; opacity:.95; }
  #race-screen .drive-controls { display:grid; grid-template-columns:76px; gap:6px; }
  #race-screen .drive-controls #boost-button { grid-column:auto; }
  #race-screen .drive-controls button { min-width:76px; min-height:42px; padding:4px 6px; font-size:.75rem; opacity:.9; }
}

/* Shared FJ Faith & Family menu chrome. Race art keeps its bright storybook
   palette; only home, garage, and circuit selection use the common portal. */
body { background:radial-gradient(circle at 50% 8%,#1e3a58 0%,#0c1c2e 45%,#060e18 100%); }
.app-shell { background:transparent; box-shadow:none; }
.topbar { border:0; border-bottom:2px solid #d97706; border-radius:0; background:#0f172af2; box-shadow:0 4px 18px #0006; color:#fff8de; }
.brand-lockup { display:flex; align-items:center; gap:10px; }
.fj-brand-logo { width:52px; height:38px; object-fit:contain; filter:drop-shadow(0 2px 4px #000a); }
.topbar .eyebrow { color:#f7d778; }
.topbar h1 { color:#fff8de; text-shadow:0 2px 10px #f59e0b55; }
.topbar .quiet-button { border:1px solid #f59e0b88; background:#17243a; color:#fff8de; box-shadow:none; }
.home-screen,.choice-layout,.circuit-grid { color:#fff8de; }
.home-screen { border-color:#d2b76c77; background:rgba(10,15,26,.92); box-shadow:0 16px 48px #0008,inset 0 1px 0 #f6cf7c22; }
.home-screen::before { background:linear-gradient(90deg,transparent,#f59e0b,transparent); box-shadow:none; }
.home-screen .welcome { color:#fff8de; text-shadow:0 2px 12px #f59e0b33; }
.home-screen .helper-copy { color:#cbd5e1; }
.primary-button { background:linear-gradient(135deg,#f59e0b,#d97706); color:#172033; box-shadow:0 4px 0 #9a4f08; }
.secondary-button,.back-button { border:1px solid #f6cf7c66; background:#17243a; color:#fff8de; box-shadow:none; }
.home-pilot-strip { display:flex; justify-content:center; gap:8px; margin:18px auto 14px; }
.home-pilot-strip img { width:46px; height:46px; object-fit:cover; border-radius:50%; border:2px solid #f59e0b; background:#0f172a; box-shadow:0 2px 7px #0008; }
.home-build { margin:0; color:#f6cf7c; font-size:.76rem; font-weight:800; }
.home-credits { max-width:490px; margin:14px auto 0; padding-top:12px; border-top:1px solid #ffffff22; color:#b8cad7; font-size:.72rem; line-height:1.45; }
.home-credits span { display:block; margin-top:4px; color:#89a8bd; }
.screen-heading { border-color:#d2b76c66; color:#fff8de; }
fieldset { border-color:#d2b76c66; background:#0f1d30e8; box-shadow:none; }
legend { color:#f7d778; }
.choice-card,.circuit-card { border-color:#ffffff26; background:#17243ae8; box-shadow:0 3px 10px #0005; color:#fff8de; }
.choice-card strong,.circuit-card strong { color:#fff8de; }
.choice-card span,.circuit-card span { color:#cbd5e1; }
.choice-card.selected { border-color:#f59e0b; background:linear-gradient(135deg,#5b3912,#17243a); box-shadow:0 0 0 2px #f59e0b55,0 6px 12px #0007; }
.circuit-card { background:linear-gradient(100deg,#17243af2,#0f1d30e8); }
.circuit-card::after { opacity:.22; }
@media (max-width:650px) { .fj-brand-logo { width:42px; height:32px; }.home-pilot-strip img { width:40px; height:40px; gap:5px; }.home-credits { font-size:.67rem; } }