@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root{color-scheme:dark;--ink:#edfaff;--muted:#a6c4d0;--cream:#101e36;--sun:#7ce8cf;--kart-color:#ff9850}
*{box-sizing:border-box}body{margin:0;background:#8bd7ef;color:var(--ink);font-family:'Noto Sans JP',sans-serif;overflow:hidden}button,a,select,summary{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,summary{cursor:pointer}button{transition:transform .15s,background .15s,box-shadow .15s}button:active{transform:translateY(3px)}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #2285a0;outline-offset:4px}[hidden]{display:none!important}#game{position:fixed;inset:0;width:100%;height:100%;outline:0}.vignette{position:fixed;inset:0;background:linear-gradient(90deg,#08172ff2 0%,#0a1c35e8 29%,#102a4099 57%,#12263d16 100%),url('./assets/aurora-world.webp') center/cover no-repeat;pointer-events:none}header{position:fixed;top:0;left:0;right:0;padding:27px 4.5%;display:flex;justify-content:space-between;align-items:center;z-index:5}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-family:'Fredoka',sans-serif;font-size:26px;font-weight:700;letter-spacing:1.2px}.brand-icon{display:grid;place-items:center;background:var(--sun);width:44px;height:46px;border-radius:15px;transform:rotate(-8deg);font:700 34px 'Fredoka';box-shadow:0 4px 0 #dda74a;letter-spacing:-2px}.brand-sub{display:block;font:8px 'Noto Sans JP',sans-serif;font-weight:700;letter-spacing:2.1px;margin-top:2px}.header-right{display:flex;gap:9px;align-items:center}.header-right button,.course-tag{background:#10273add;border:1px solid #b4ecdf66;border-radius:14px;color:#efffff;padding:11px 15px;min-height:44px;font-weight:700;font-size:12px;box-shadow:0 3px 0 #06132655}.course-tag{font:600 12px 'Fredoka',sans-serif;letter-spacing:1px;padding:14px 17px}.header-right button:hover{background:#1b4051}#fullscreen{font-size:20px!important;padding:8px 14px}
#menu{position:fixed;inset:132px 4.5% 77px;display:flex;justify-content:space-between;align-items:center;gap:28px}.intro{max-width:600px;align-self:center}.eyebrow{display:flex;align-items:center;gap:10px;font:600 11px 'Fredoka',sans-serif;letter-spacing:2px}.eyebrow>span{width:22px;height:3px;background:#e4a532;border-radius:4px}h1{font:700 clamp(65px,7.1vw,116px)/.97 'Fredoka',sans-serif;letter-spacing:-4px;margin:25px 0 20px;transform:rotate(-2deg);transform-origin:left bottom}h1 em{font-style:normal;color:#ec9671;text-shadow:3px 4px 0 #fff3d4;letter-spacing:-5px}.intro-ja{font-size:24px;font-weight:900;letter-spacing:1px;margin:24px 0 15px}.description{font-size:15px;line-height:1.9;color:#567384;font-weight:500}.race-details{display:flex;gap:25px;margin:24px 0;font-size:11px;color:#607c8c;align-items:center}.race-details span{display:flex;align-items:center;gap:7px}.race-details b{font:600 29px 'Fredoka';color:var(--ink)}.primary{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--sun);border:2px solid #fff3b0;color:var(--ink);border-radius:18px;box-shadow:0 5px 0 #dfaa44,0 10px 25px #ab82322a;min-height:64px;padding:16px 23px;font-size:16px;font-weight:900}.primary:hover{background:#ffda7c;transform:translateY(-2px)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #dfaa44}.primary>span{font:600 28px 'Fredoka';margin-left:20px}.primary:disabled{opacity:.6;cursor:not-allowed}.best{font:600 11px 'Fredoka','Noto Sans JP',sans-serif;color:#6b858e;letter-spacing:.6px;margin-top:16px}.quick-controls{margin-top:27px;font-size:10px;color:#6a818e}.quick-controls kbd{margin-left:8px}.quick-controls kbd:first-child{margin-left:0}kbd{display:inline-grid;place-items:center;min-width:23px;height:23px;padding:2px 5px;border:1px solid #8ca7ab55;border-radius:6px;background:#ffffff9e;font:10px Arial;box-shadow:0 2px 0 #8ca7ab22;color:var(--ink)}
.setup{width:315px;align-self:end;background:#fffaf0f2;border:2px solid #fff;border-radius:22px;padding:23px;box-shadow:0 12px 35px #315f6830;backdrop-filter:blur(10px)}.panel-label{display:flex;justify-content:space-between;color:#68838e;font:600 9px 'Fredoka';letter-spacing:1px}.panel-label span{font-size:7px;letter-spacing:.5px}.pilot-heading{display:flex;justify-content:space-between;align-items:center;margin-top:19px}#pilot-name{font-size:11px;font-weight:700;color:#7a8d91;letter-spacing:1px}.setup h2{font:700 39px/1 'Fredoka';margin:5px 0}.racer-stamp{font:600 13px/.95 'Fredoka';color:#dc9779;border:2px dashed #e6b8a2;border-radius:50%;width:56px;height:56px;display:grid;place-content:center;text-align:center;transform:rotate(12deg)}.setup>p{font-size:11px;line-height:1.8;color:#617d89;min-height:40px}.swatches{display:flex;gap:9px;margin:17px 0}.swatches button{flex:1;border:2px solid #e2e9e3;border-radius:13px;padding:9px 3px;background:#fff;font-size:10px;color:#6d808c;font-weight:700}.swatches button span{display:block;font-size:27px;margin-bottom:4px;filter:saturate(.85)}.swatches .selected{border-color:var(--kart-color);background:#fff1d8;box-shadow:0 3px 0 #f0c890;color:var(--ink)}.stats{display:grid;gap:8px;padding:2px 0 18px;border-bottom:1px dashed #b9cdc9}.stats label{display:flex;justify-content:space-between;font-size:10px;color:#72858c}.stats span{color:#e7a653;letter-spacing:4px;font-size:11px}.options{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:9px;margin-top:15px}.options label{font-size:10px;color:#6e8590}.options select{background:#edf3ef;border:1px solid #d1dfdb;color:var(--ink);border-radius:8px;font-size:10px;padding:7px 8px;height:35px}.controls-guide{border-top:1px dashed #b9cdc9;margin-top:15px;padding-top:7px}.controls-guide summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:36px;font-size:10px;font-weight:700}.controls-guide summary::-webkit-details-marker{display:none}.controls-guide[open] summary span{transform:rotate(45deg)}.controls-guide p{font-size:10px;line-height:1.8;color:#617d89;margin:9px 0}.controls-guide small{font-size:10px;color:#6a838c}.controls-guide kbd{min-width:19px;height:20px;font-size:9px}.controls-guide[open]{max-height:220px;overflow:auto}footer{position:fixed;bottom:24px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;align-items:center;color:#3c6675;font:600 9px 'Fredoka';letter-spacing:1.4px}footer>span{background:#fff9e6b3;border-radius:10px;padding:8px 12px}footer i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#efb557;margin-right:6px}
#hud{position:fixed;inset:0;pointer-events:none}.position{position:absolute;left:4.5%;top:120px;display:flex;gap:12px;align-items:center;filter:drop-shadow(0 4px 0 #345e6522)}.position>strong{font:700 95px/.9 'Fredoka';color:#ffce59;-webkit-text-stroke:3px #fff5d9;paint-order:stroke fill}.position>span{font:600 23px 'Fredoka';color:white;text-shadow:0 2px 3px #28465866}.position small{display:block;font-size:9px;letter-spacing:1px}.lap{position:absolute;top:113px;right:4.5%;display:flex;gap:22px;background:#fff9e6f2;box-shadow:0 4px 0 #24495c18;border:2px solid white;border-radius:17px;padding:13px 18px}.lap span{font:600 9px 'Fredoka';letter-spacing:1px;color:#6b8895}.lap b{display:block;font:600 25px 'Fredoka';color:var(--ink);letter-spacing:.5px;margin-top:3px}.coin-counter{color:#edb03e!important}.coin-counter b{display:inline;margin-left:5px;font-size:23px}.item-slot{position:absolute;left:4.5%;bottom:90px;pointer-events:auto;width:118px;background:#fff9e6ef;border:3px solid #fff;border-radius:20px;color:var(--ink);padding:12px;box-shadow:0 5px 0 #345c7029;min-height:118px;text-align:center}.item-slot>span{font:600 8px 'Fredoka';letter-spacing:1px}.item-slot b{display:block;color:#aabdbd;font:600 38px 'Fredoka';margin:3px 0}.item-slot small{font-size:9px;color:#6b8290}.item-slot.has-item{border-color:#ffda76;background:#fffbdf}.item-slot.has-item b{color:#eeae3d}.speed{position:absolute;right:5%;bottom:65px;text-align:right;color:white;text-shadow:0 3px 0 #2a59753b}.speed b{font:600 67px/.9 'Fredoka';-webkit-text-stroke:1.5px #ffffff88;paint-order:stroke fill}.speed>span{font:600 10px 'Fredoka';margin-left:8px;letter-spacing:1px}.speed-bar{width:180px;height:7px;background:#ffffff6b;border-radius:7px;margin-top:13px;overflow:hidden}.speed-bar i{display:block;background:#ffda64;height:100%;width:0;border-radius:7px}.drift{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);text-align:center;width:250px;background:#fff9e6d9;border:1px solid #fff;border-radius:13px;padding:9px 15px;color:var(--ink);font-size:10px;font-weight:700}.drift>div{height:6px;background:#c7deda;border-radius:5px;margin-top:8px;overflow:hidden}.drift i{display:block;height:100%;width:0;border-radius:5px}#map{position:absolute;right:4%;top:210px;width:160px;height:134px;filter:drop-shadow(0 3px 2px #215c7022)}#announcement{position:fixed;top:25%;left:50%;transform:translateX(-50%) rotate(-2deg);font-size:20px;font-weight:900;white-space:nowrap;color:var(--ink);padding:10px 20px;border-radius:13px;pointer-events:none}#announcement:not(:empty){background:#fff8e6ec;border:2px solid white;box-shadow:0 4px 0 #3f758625}#countdown{position:fixed;top:37%;left:0;right:0;text-align:center;font:700 125px/.9 'Fredoka';color:#ffcc53;-webkit-text-stroke:6px #fff;paint-order:stroke fill;filter:drop-shadow(0 8px 0 #2f68744a);pointer-events:none}
#touch{position:fixed;bottom:max(15px,env(safe-area-inset-bottom));left:12px;right:12px;display:flex;justify-content:space-between;z-index:6;touch-action:none}#touch>div{display:flex;gap:7px}#touch button{min-width:52px;height:57px;border:2px solid #fff;border-radius:15px;background:#fff8e8e6;color:var(--ink);font:600 10px 'Fredoka';box-shadow:0 4px 0 #32596744;touch-action:none;user-select:none}#touch button[data-input=accelerate]{background:#ffce59}#touch button.held{background:#ffdaa0;transform:translateY(3px);box-shadow:0 1px 0 #32596744}#overlay{position:fixed;inset:0;background:#468c9d65;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:10}.modal{width:min(460px,91vw);padding:32px;background:#fff8e8;border:3px solid white;border-radius:27px;box-shadow:0 15px 0 #24536620}.modal .eyebrow{font-size:9px;color:#83979c}.modal h2{font-size:27px;font-weight:900;margin:22px 0 13px;letter-spacing:-.8px}.modal>p{font-size:12px;color:#6b8793;line-height:1.8}.modal button{width:100%;margin-top:13px}.modal .primary{font-size:14px;min-height:55px}.secondary{border:1px solid #d3e0db;border-radius:12px;padding:12px;background:#fffdf3;color:var(--ink);min-height:44px;font-size:12px;font-weight:700}.secondary:hover{background:#edf5ee}#results{margin:20px 0}#results p{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#607c89;padding:9px 8px;margin:0;border-bottom:1px solid #d6e0d9}#results .you{background:#ffe7a8;border-radius:8px;color:var(--ink);font-weight:700}body.racing .vignette{background:linear-gradient(#5493a51a,transparent 25%,transparent 80%,#28677333)}body.racing .brand{color:#fff7df;text-shadow:0 2px 2px #2e596b44}body.racing .brand-icon{color:var(--ink);text-shadow:none}#loading{position:fixed;inset:0;z-index:20;background:#fff7e7;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;font-size:16px}.loading-sun{font-size:58px;color:#eab045;animation:sun-turn 8s linear infinite}@keyframes sun-turn{to{transform:rotate(360deg)}}
@media(max-height:820px) and (min-width:761px){#menu{top:115px;bottom:65px}h1{font-size:clamp(65px,6.3vw,100px);margin:15px 0}.intro-ja{margin:16px 0 10px;font-size:21px}.description{font-size:13px}.race-details{margin:18px 0}.quick-controls{margin-top:19px}.setup{padding:18px}.pilot-heading{margin-top:12px}.setup h2{font-size:33px}.setup>p{font-size:10px}.swatches{margin:12px 0}.swatches button{padding:6px}.swatches button span{font-size:24px}.stats{gap:6px;padding-bottom:12px}.options{margin-top:10px}.controls-guide{margin-top:10px}}
@media(max-width:1000px) and (min-width:761px){h1{font-size:75px}.setup{width:270px;padding:17px}.intro-ja{font-size:20px}.race-details{gap:17px}.quick-controls{font-size:8px}.primary{font-size:13px;padding:15px 18px}.course-tag{display:none}.panel-label span{display:none}}
@media(max-width:760px){header{padding:17px 5%}.brand{font-size:20px;gap:8px}.brand-icon{width:34px;height:36px;font-size:26px;border-radius:12px}.brand-sub{font-size:6px;letter-spacing:1px}.header-right{gap:6px}.header-right button{font-size:10px;padding:9px;min-width:44px;min-height:44px;border-radius:12px}.course-tag{display:none}#fullscreen{display:none}#menu{inset:105px 6% 57px;display:block;overflow-y:auto;scrollbar-width:none;padding-bottom:20px}.vignette{background:linear-gradient(90deg,#08172ff2 0%,#0a1c35d9 45%,#102a4080 76%,#12263d30 100%),url('./assets/aurora-world.webp') center/cover no-repeat}.eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:clamp(59px,16vw,95px);letter-spacing:-3px;margin:22px 0 21px}h1 em{letter-spacing:-3px}.intro-ja{font-size:20px;letter-spacing:0;margin:18px 0 12px}.description{font-size:14px}.race-details{gap:20px;margin:19px 0;font-size:10px}.race-details b{font-size:25px}.primary{width:100%;font-size:14px;min-height:60px;padding:14px 18px}.best{font-size:10px}.quick-controls{display:none}.setup{width:100%;margin-top:28px;padding:20px}.setup h2{font-size:35px}.stats{display:none}.setup>p{font-size:12px}.pilot-heading{margin-top:15px}.panel-label span{font-size:7px}.swatches button{min-height:64px}.options label{font-size:11px}.options select{font-size:11px;height:40px}.controls-guide summary{font-size:12px;min-height:44px}.controls-guide p{font-size:12px}.controls-guide small{font-size:11px}footer{bottom:13px;font-size:7px;left:5%;right:5%;gap:7px;letter-spacing:.5px}footer>span{padding:7px 8px}footer>span:last-child{display:none}.position{top:100px;left:6%;gap:6px}.position>strong{font-size:65px;-webkit-text-stroke:2px #fff5d9}.position>span{font-size:19px}.position small{font-size:7px}.lap{top:101px;right:5%;gap:13px;border-radius:13px;padding:10px 12px}.lap span{font-size:7px}.lap b{font-size:19px}.coin-counter{position:absolute;top:64px;right:4px;background:#fff9e6ed;padding:5px 10px;border-radius:10px}.coin-counter b{font-size:16px}.item-slot{left:5%;bottom:107px;width:91px;min-height:91px;border-radius:16px;padding:8px}.item-slot b{font-size:29px}.item-slot>span{font-size:7px}.item-slot small{font-size:8px}.speed{bottom:112px;right:6%}.speed b{font-size:47px}.speed>span{font-size:8px}.speed-bar{width:100px;height:5px}.drift{bottom:208px;width:206px;font-size:9px;padding:8px 12px}#map{top:201px;width:115px;height:96px;right:4%}#announcement{top:30%;font-size:16px;max-width:95%;padding:9px 12px}#countdown{top:39%;font-size:95px}.modal{padding:25px}.modal h2{font-size:24px}}
@media(max-width:350px){.brand{font-size:17px}.brand-sub{font-size:5px}.brand-icon{width:30px;height:33px}.header-right button{padding:8px;min-width:40px}.lap{gap:10px;padding:8px 10px}.position>strong{font-size:57px}h1{font-size:58px}.intro-ja{font-size:18px}#touch button{min-width:49px}.race-details{gap:15px}}
@media(prefers-reduced-motion:reduce){button{transition:none}.loading-sun{animation:none}}

.assists{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:10px}.assists label{display:flex;align-items:center;gap:3px;font-size:10px;color:#617d89;min-height:32px;cursor:pointer}.assists input{accent-color:#e7ae47;width:15px;height:15px}@media(max-width:760px){.assists label{font-size:11px;min-height:44px}}
@media(max-width:760px){.drift{top:182px;bottom:auto;left:5%;transform:none;width:min(190px,50vw);font-size:8px;padding:8px 10px}}

.course-picker{max-width:490px;margin:20px 0}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.course-grid button{background:#fff8eae8;border:2px solid #d2ded7;border-radius:12px;padding:10px 6px;color:var(--ink);min-height:91px}.course-grid button.selected{border-color:#e9af49;background:#fff0c8;box-shadow:0 3px 0 #e5bc6a}.course-grid span{display:block;font-size:25px}.course-grid b{display:block;font-size:10px;margin:5px 0}.course-grid small{font-size:9px;color:#617d89}.course-picker>p{font-size:11px;color:#567384;line-height:1.7;min-height:38px}.swatches{display:grid;grid-template-columns:repeat(3,1fr)}.personality{padding:12px;background:#f4eddc;border-radius:10px;margin-bottom:15px}.personality p{font-size:12px;font-weight:700;margin:0 0 8px}.personality b{font-size:11px;display:block}.personality small{font-size:10px;display:block;color:#607986;margin:4px 0 8px;line-height:1.7}.personality>span{font-size:11px;color:#855c30;font-weight:700}.setup{max-height:100%;overflow-y:auto;scrollbar-width:thin}.intro{max-height:100%;overflow-y:auto;scrollbar-width:thin;padding:5px 10px 10px 0}h1{font-size:clamp(60px,6.5vw,100px);margin:15px 0}.intro-ja{margin:15px 0 8px}.race-details{margin:15px 0}.quick-controls{margin-top:17px}.skill-slot{left:calc(4.5% + 136px)}.skill-slot b{color:#9f82cb}.skill-slot:disabled{opacity:.72;cursor:default}.skill-slot:not(:disabled){border-color:#d5b7ef;background:#faf0ff}
@media(max-width:760px){.intro{overflow:visible;max-height:none;padding-right:0}.setup{max-height:none;overflow:visible}.course-picker{margin-top:23px}.course-grid{gap:5px}.course-grid b{font-size:9px}.course-grid button{padding:8px 3px}.personality p{font-size:14px}.personality b,.personality>span{font-size:12px}.personality small{font-size:12px}.skill-slot{left:5%;bottom:211px;min-height:86px;width:91px}.skill-slot small{font-size:8px}h1{font-size:clamp(58px,16vw,95px)}}

@media(min-width:1001px) and (min-height:850px){.setup{padding:18px;width:315px}.pilot-heading{margin-top:12px}.setup h2{font-size:32px}.swatches{margin:10px 0;gap:7px}.swatches button{padding:6px 3px}.swatches button span{font-size:24px}.personality{padding:10px;margin-bottom:10px}.stats{padding-bottom:10px;gap:5px}.controls-guide{margin-top:10px}.intro{overflow-y:auto;max-height:100%;scrollbar-width:thin}h1{font-size:90px}.course-picker{margin:16px 0}.setup>p{margin:10px 0}.assists label{min-height:30px}}

.course-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.course-grid button{position:relative;text-align:left;min-width:0;min-height:91px;padding:7px 9px 4px}.course-grid button b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.course-grid button small{display:block;height:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.course-grid svg{display:block;width:56px;height:36px;margin:1px auto 0;overflow:visible}.course-grid svg path{fill:none;stroke:#678791;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.course-grid button.selected svg path{stroke:var(--kart-color)}.course-grid button .course-icon{position:absolute;right:7px;top:6px;font-size:14px}
.online-panel{margin:12px 0 8px;padding:13px 15px;background:#fff8e9ed;border:1px solid #ddded0;border-radius:14px;box-shadow:0 4px 16px #41607012}.online-panel>label,.online-vote-wrap{display:block;font-size:11px;font-weight:800;color:var(--ink);margin-bottom:7px}.online-actions,.online-room-code,.online-lobby-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.online-actions input{flex:1;min-width:112px;min-height:42px;border:1px solid #cbd9d4;border-radius:10px;padding:9px 12px;background:white;color:var(--ink);font:700 14px 'Fredoka',sans-serif;letter-spacing:2px}.online-actions button,.online-lobby-actions button,.online-room-code button{min-height:42px;padding:9px 13px}.online-room-code{justify-content:space-between;padding:8px 0 2px}.online-room-code>span{font:700 9px 'Fredoka',sans-serif;letter-spacing:1.5px;color:#77909a}.online-room-code>strong{font:700 24px 'Fredoka',sans-serif;letter-spacing:4px;color:#235b67}.online-panel #online-status{font-size:11px;color:#5c7882;line-height:1.6;margin:9px 0}.online-roster{display:grid;grid-template-columns:1fr 1fr;gap:6px}.online-roster span{padding:8px;background:#f2f0e5;border-radius:8px;font-size:10px;color:#456474}.online-lobby-actions{margin-top:8px}.online-lobby-actions select{display:block;min-height:38px;border:1px solid #cbd9d4;border-radius:9px;background:#fff;padding:6px 9px;color:var(--ink)}.online-panel button:disabled{opacity:.46;cursor:not-allowed}body.online-race #map{display:none}body.online-race .duel-card{padding:9px 12px}body.online-race .duel-controls{display:none}body.online-race #touch{display:flex!important}
@media(max-width:760px){.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.course-grid button{min-height:83px}.course-grid svg{width:50px;height:27px}}






.swatches button .luna-avatar{width:27px;height:27px;margin:0 auto 4px}.luna-avatar svg{display:block;width:100%;height:100%}


.pad-guide{border-top:1px dashed #c9d7d1;padding-top:8px}.controls-guide kbd{margin:0 2px}

.options input[type=range]{width:100%;height:35px;accent-color:#e7ae47}

/* Championship presentation */
.race-format{max-width:490px;margin:15px 0 17px}.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.mode-picker button{min-height:54px;padding:7px 10px;text-align:left;border:2px solid #d2ded7;border-radius:11px;background:#fff9ed;color:var(--ink)}.mode-picker button.selected{border-color:#e5ad47;background:#fff0c8;box-shadow:0 3px 0 #e5bc6a}.mode-picker strong,.mode-picker small{display:block}.mode-picker strong{font:700 10px 'Fredoka';letter-spacing:.65px}.mode-picker small{margin-top:4px;color:#66808b;font-size:9px}.race-format>p{min-height:0;margin:7px 0 0;color:#68808b;font-size:10px;line-height:1.6}.modal{max-height:90dvh;overflow-y:auto;scrollbar-width:thin}.modal #cup-standings{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;margin:14px 0 17px}.cup-row{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;margin:0;padding:8px 7px;border:1px solid #d7e2dc;border-radius:8px;color:#607c89;font-size:10px}.cup-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cup-row b{flex:none;color:#956424}.cup-row.is-you{border-color:#e8b14a;background:#ffedbd;color:#29495a;font-weight:700}.modal #next-race{margin-top:8px}
@media(max-width:760px){.race-format{margin:17px 0}.mode-picker button{min-height:57px;padding:8px}.mode-picker strong{font-size:10px}.mode-picker small{font-size:10px}.race-format>p{font-size:11px}.modal{max-height:88dvh;padding:21px}.modal h2{margin:14px 0 8px}.modal #results{margin:12px 0}.modal #results p{padding:7px 6px;font-size:10px}.modal #cup-standings{gap:4px;margin:10px 0 12px}.cup-row{font-size:9px;padding:7px 5px}}

/* Fixed-screen setup: no page or panel scrolling */
.setup-tabs{display:flex;justify-content:center;gap:8px;grid-row:1;min-width:0}.setup-tabs button{flex:1;max-width:180px;min-width:0;min-height:42px;padding:8px 14px;border:1px solid #ffffff;background:#fffaf0dc;border-radius:12px;color:#526e7a;font-size:12px;font-weight:800;box-shadow:0 3px 0 #315f6820}.setup-tabs button.selected{background:#24495c;color:#fff8e7;border-color:#24495c;box-shadow:0 3px 0 #183746}.setup-tabs button:hover{transform:translateY(-1px)}
#menu{inset:105px 4.5% 66px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) 60px 18px;gap:7px;align-items:stretch;justify-items:stretch;overflow:hidden}
#menu .intro,#menu .setup{grid-row:2;align-self:stretch;justify-self:center;max-height:none;overflow:hidden;margin:0}
#menu .intro{max-width:none;width:min(100%,1000px)}
#menu[data-screen=course] .setup,#menu[data-screen=racer] .intro,#menu[data-screen=settings] .intro{display:none}
#menu[data-screen=course] .intro{display:grid;grid-template-columns:minmax(0,1fr) 225px;grid-template-rows:28px 91px minmax(0,1fr);gap:4px 22px;align-items:stretch}
#menu[data-screen=course] .eyebrow{grid-area:1/1}.setup-tabs{grid-row:1}
#menu[data-screen=course] h1{grid-area:2/1;margin:0;font-size:clamp(34px,3.7vw,50px);line-height:.92;letter-spacing:-2px;transform:none;align-self:center}
#menu[data-screen=course] .intro-ja,#menu[data-screen=course] .description,#menu[data-screen=course] .race-details,#menu[data-screen=course] .quick-controls{display:none}
#menu[data-screen=course] .course-picker{grid-area:3/1;margin:0;max-width:none;min-height:0;display:grid;grid-template-rows:17px minmax(0,1fr) 36px;gap:5px}
#menu[data-screen=course] .course-grid{grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(74px,1fr));min-height:0;gap:7px;margin:0}
#menu[data-screen=course] .course-picker>p{grid-row:3;margin:0;min-height:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#menu[data-screen=course] .race-format{grid-area:1/2/4/3;align-self:center;display:flex;flex-direction:column;gap:8px;max-width:none;margin:0}
#menu[data-screen=course] .mode-picker{grid-template-columns:1fr;gap:7px;margin:0}
#menu[data-screen=course] .mode-picker button{min-height:58px}
#menu[data-screen=course] .race-format>p{margin:0}
#menu #start{grid-row:3;align-self:stretch;justify-self:center;width:min(100%,1000px);margin:0}
#menu #best{grid-row:4;align-self:center;justify-self:center;margin:0;text-align:center}
#menu[data-screen=racer] .setup,#menu[data-screen=settings] .setup{display:flex;flex-direction:column;gap:12px;width:min(100%,620px);padding:16px}
#menu #settings-panel{display:none}
#menu #driver-panel{display:flex;flex-direction:column;gap:8px;min-height:0}
#menu[data-screen=settings] #driver-panel{display:none}
#menu[data-screen=settings] #settings-panel{display:flex;flex-direction:column;gap:10px;min-height:0}
#menu[data-screen=racer] .swatches{grid-template-columns:repeat(3,minmax(0,1fr));margin:6px 0;gap:8px}
#menu[data-screen=racer] .swatches button{min-height:74px}
#menu[data-screen=racer] .personality{margin-top:2px}
#menu .options{margin-top:4px}
#menu[data-screen=settings]:has(.controls-guide[open]) .options,#menu[data-screen=settings]:has(.controls-guide[open]) .assists{display:none}
#menu .controls-guide[open]{max-height:none;overflow:visible}
@media(max-width:760px){
 #menu{inset:70px 5% 55px;grid-template-rows:38px minmax(0,1fr) 52px 14px;gap:6px}
 .setup-tabs{gap:5px}.setup-tabs button{min-height:38px;padding:6px 5px;font-size:11px;border-radius:10px}
 #menu[data-screen=course] .intro{display:flex;flex-direction:column;gap:6px;width:100%;min-height:0}
 #menu[data-screen=course] .eyebrow,#menu[data-screen=course] h1{display:none}
 #menu[data-screen=course] .course-picker{flex:1;display:grid;grid-template-rows:14px minmax(0,1fr);gap:4px}
 #menu[data-screen=course] .course-grid{grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(50px,1fr));gap:5px}
 #menu[data-screen=course] .course-grid button{min-height:50px;padding:4px 3px;text-align:center;border-radius:9px}
 #menu[data-screen=course] .course-grid button .course-icon{top:3px;right:4px;font-size:11px}
 #menu[data-screen=course] .course-grid button b{margin:4px 0 2px;font-size:8px;line-height:1.2;white-space:normal}
 #menu[data-screen=course] .course-grid button small{display:none}
 #menu[data-screen=course] .course-grid svg{display:none}
 #menu[data-screen=course] .course-picker>p{display:none}
 #menu[data-screen=course] .race-format{display:flex;flex-direction:column;gap:4px;margin:0}
 #menu[data-screen=course] .race-format .panel-label{font-size:8px}
 #menu[data-screen=course] .mode-picker{grid-template-columns:1fr 1fr;gap:5px}
 #menu[data-screen=course] .mode-picker button{min-height:46px;padding:5px 7px;border-radius:9px}
 #menu[data-screen=course] .mode-picker strong{font-size:9px}
 #menu[data-screen=course] .mode-picker small{font-size:8px}
 #menu[data-screen=course] .race-format>p{display:none}
 #menu #start{min-height:52px;padding:9px 15px;border-radius:14px;font-size:13px}
 #menu #start>span{font-size:24px}
 #menu #best{font-size:9px}
 #menu[data-screen=racer] .setup,#menu[data-screen=settings] .setup{width:100%;padding:10px;gap:6px;border-radius:16px}
 #menu #driver-panel{display:grid;grid-template-rows:14px 37px 32px minmax(100px,1fr) auto;gap:4px;height:100%}
 #menu #driver-panel>.panel-label{font-size:8px}
 #menu .pilot-heading{margin:0;min-height:0}
 #menu .pilot-heading h2{font-size:28px;margin:2px 0}
 #menu .racer-stamp{display:none}
 #menu #kart-desc{font-size:10px;line-height:1.45;min-height:0;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 #menu[data-screen=racer] .swatches{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(48px,1fr));gap:5px;margin:0;min-height:100px}
 #menu[data-screen=racer] .swatches button{min-height:48px;padding:3px 2px;border-radius:9px;font-size:9px}
 #menu[data-screen=racer] .swatches button span{font-size:20px;margin-bottom:1px}
 #menu .personality{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 6px;margin:0;padding:6px 8px;border-radius:8px;min-height:49px}
 #menu .personality p{grid-column:1;margin:0;font-size:9px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #menu .personality b{grid-column:1;font-size:9px;line-height:1.3}
 #menu .personality small{display:none}
 #menu .personality>span{grid-column:2;grid-row:1/3;align-self:center;font-size:8px;text-align:right;max-width:112px}
 #menu .stats{display:none}
 #menu[data-screen=settings] #settings-panel{gap:5px}
 #menu[data-screen=settings] #settings-panel:before{content:"RACE OPTIONS";font:700 9px 'Fredoka',sans-serif;letter-spacing:1px;color:#68838e}
 #menu .options{grid-template-columns:minmax(95px,1fr) 1.4fr;gap:4px 8px;margin:0}
 #menu .options label{font-size:10px}
 #menu .options select{height:32px;padding:4px 7px;font-size:10px}
 #menu .options input[type=range]{height:32px}
 #menu .assists{gap:2px 10px;margin:0}
 #menu .assists label{min-height:32px;font-size:9px}
 #menu .controls-guide{margin:0;padding-top:3px}
 #menu .controls-guide summary{min-height:35px;font-size:10px}
 #menu .controls-guide p,#menu .controls-guide small{font-size:9px;line-height:1.4;margin:4px 0}
}
@media(max-width:350px){
 #menu{inset:67px 4% 50px;grid-template-rows:36px minmax(0,1fr) 49px 12px;gap:5px}
 .setup-tabs button{font-size:10px}
 #menu[data-screen=course] .course-grid button b{font-size:7px}
 #menu[data-screen=racer] .setup,#menu[data-screen=settings] .setup{padding:8px}
 #menu #driver-panel{grid-template-rows:13px 34px 29px minmax(92px,1fr) auto}
 #menu #kart-desc{font-size:9px}
}
@media(max-width:760px){
 #menu[data-screen=course] .course-picker{grid-template-rows:14px auto;align-content:center}
 #menu[data-screen=course] .course-grid{grid-template-rows:repeat(2,72px);align-content:center}
}
@media(max-width:350px){#menu[data-screen=course] .course-grid button b{font-size:9px}}
@media(max-width:760px){
 #menu[data-screen=racer] .setup,#menu[data-screen=settings] .setup{align-self:center;height:auto;max-height:100%}
 #menu[data-screen=racer] #driver-panel{height:auto;grid-template-rows:14px 37px 32px auto auto}
 #menu[data-screen=racer] .swatches{grid-template-rows:repeat(2,62px);min-height:0}
}
@media(max-width:350px){
 #menu[data-screen=racer] #driver-panel{grid-template-rows:13px 34px 29px auto auto}
 #menu[data-screen=racer] .swatches{grid-template-rows:repeat(2,58px)}
}
#menu[data-screen=racer] .setup{gap:5px;padding:12px 16px}
#menu[data-screen=racer] #driver-panel{gap:4px}
#menu[data-screen=racer] .racer-stamp,#menu[data-screen=racer] .stats{display:none}
#menu[data-screen=racer] .swatches{margin:0}
#menu[data-screen=racer] .swatches button{min-height:56px;padding:5px}
#menu[data-screen=racer] .swatches button span{font-size:23px;margin-bottom:2px}
#menu[data-screen=racer] .personality{padding:8px;margin:0}
#menu[data-screen=racer] .personality p{font-size:11px;margin:0 0 4px}
#menu[data-screen=racer] .personality b{font-size:10px}
#menu[data-screen=racer] .personality small{font-size:9px;margin:2px 0 4px}
#menu[data-screen=racer] .pilot-heading{margin-top:4px}
#menu[data-screen=racer] #kart-desc{min-height:0;margin:0;line-height:1.55}
#menu[data-screen=settings] #settings-panel:before{content:none}

/* Put the racer card beside the 3D hero so every custom kart has room to read. */
@media(min-width:761px){
 #menu[data-screen=racer]{grid-template-columns:minmax(0,min(42vw,460px)) minmax(0,1fr)}
 #menu[data-screen=racer] .setup{grid-column:1;justify-self:start;width:100%;padding:18px}
 #menu[data-screen=racer] #start{grid-column:1;justify-self:start;width:100%}
 #menu[data-screen=racer] #best{grid-column:1;justify-self:center}
 #menu[data-screen=racer] #driver-panel{gap:7px}
 #menu[data-screen=racer] .swatches{margin:3px 0;gap:7px}
 #menu[data-screen=racer] .swatches button{min-height:67px}
 #menu[data-screen=racer] .personality{padding:9px;margin:0}
 #menu[data-screen=racer] #kart-desc{font-size:11px;line-height:1.5}
}
@media(min-width:1001px) and (min-height:761px){
 #menu[data-screen=racer] .racer-stamp{display:grid}
 #menu[data-screen=racer] .stats{display:grid;padding:8px 0 2px;gap:5px}
 #menu[data-screen=racer] .stats label{font-size:11px}
 #menu[data-screen=racer] .stats span{font-size:12px}
 #menu[data-screen=racer] .swatches button{min-height:72px}
}
@media(min-width:761px) and (max-height:760px){
 #menu[data-screen=racer] .racer-stamp,#menu[data-screen=racer] .stats{display:none}
 #menu[data-screen=racer] .setup{padding:12px 16px}
 #menu[data-screen=racer] .swatches button{min-height:58px;padding:4px}
 #menu[data-screen=racer] .personality{padding:7px}
}

.branch-prompt{position:fixed;z-index:5;top:45%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:min(580px,calc(100vw - 28px));padding:13px 20px;border:2px solid #fff5d8;border-radius:15px;background:#173c52eF;color:#fff9e8;box-shadow:0 5px 0 #15334366,0 10px 30px #102c3b55;text-align:center;font-size:clamp(12px,1.25vw,17px);font-weight:800;letter-spacing:.2px;line-height:1.45;pointer-events:none;white-space:normal}.branch-prompt strong{color:#ffd36e}.branch-prompt[hidden]{display:none}
@media(max-width:760px){.branch-prompt{top:43%;padding:10px 13px;font-size:12px;max-width:calc(100vw - 24px)}}

.drift{width:250px}.drift .drift-track{height:6px;background:#c7deda;border-radius:5px;margin-top:8px;overflow:hidden}.drift .sync-meter{height:auto;margin-top:9px;padding:0;background:transparent;overflow:visible;text-align:left}.sync-caption{display:flex;align-items:center;justify-content:space-between;color:#57717e;font:600 8px 'Fredoka';letter-spacing:1px}.sync-caption b{font:600 9px 'Fredoka';color:#567b89}.drift .sync-track{height:5px;margin-top:4px;background:#d9e6df;border-radius:5px;overflow:hidden}.drift .sync-track i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#55bdc6,#8c8fe6);transition:width .12s linear}.sync-meter small{display:block;margin-top:4px;color:#718992;font-size:8px;font-weight:600}.sync-meter.ready{animation:sync-breathe .9s ease-in-out infinite alternate}.sync-meter.ready .sync-caption,.sync-meter.ready .sync-caption b{color:#a66d17}.sync-meter.ready .sync-track{background:#f5ddb0}.sync-meter.ready .sync-track i{background:linear-gradient(90deg,#f1b73e,#ffdf72);box-shadow:0 0 9px #ffc849a8}.skill-slot.sync-ready:not(:disabled){border-color:#f1bd52;background:#fff5cf;box-shadow:0 5px 0 #d99c32,0 0 18px #ffd45f85}.skill-slot.sync-ready:not(:disabled) b{color:#d18b23}.skill-slot.sync-ready:not(:disabled) small{color:#9b681d;font-weight:800}@keyframes sync-breathe{to{filter:drop-shadow(0 0 5px #ffd45f)}}
@media(max-width:760px){.drift{width:min(190px,50vw)}#map{top:267px}}
@media(max-width:760px){.skill-slot small{font-size:7px}}

.coin-shop{position:static;pointer-events:auto}.coin-shop>summary{list-style:none;cursor:pointer}.coin-shop>summary::-webkit-details-marker{display:none}.coin-shop>summary:focus-visible{outline:3px solid #5c9ead;outline-offset:3px;border-radius:9px}.coin-counter{display:flex;align-items:center;gap:5px;white-space:nowrap}.coin-counter small{font:700 7px 'Fredoka';letter-spacing:.7px;color:#8e7852;border:1px solid #e3c984;border-radius:5px;padding:3px 4px}.coin-shop[open] .coin-counter{color:#a66f12!important}.coin-market{position:fixed;z-index:9;top:177px;right:4.5%;width:min(286px,calc(100vw - 24px));padding:13px;background:#fff8e9f5;border:2px solid #fff;box-shadow:0 8px 24px #23485b36;border-radius:16px;pointer-events:auto}.coin-market p{margin:0 0 10px;color:#55717d;font-size:10px;line-height:1.55}.coin-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.coin-options button{min-width:0;min-height:58px;padding:6px 3px;border:1px solid #e0d3b3;border-radius:10px;background:#fffdf5;color:#24495c;cursor:pointer}.coin-options button:hover:not(:disabled){transform:translateY(-2px);border-color:#e9b446;background:#fff2c8}.coin-options button:focus-visible{outline:3px solid #5c9ead;outline-offset:2px}.coin-options button:disabled{opacity:.42;cursor:not-allowed}.coin-options b,.coin-options span,.coin-options small{display:block}.coin-options b{font-size:17px}.coin-options span{font-size:10px;font-weight:800}.coin-options small{margin-top:3px;font:700 7px 'Fredoka';letter-spacing:.3px;color:#788b88;white-space:nowrap}#hud.coin-shop-open #map{top:310px}
@media(max-width:760px){.coin-market{top:156px;right:4%;width:min(278px,92vw);padding:10px}.coin-market p{font-size:9px;margin-bottom:7px}.coin-options{gap:5px}.coin-options button{min-height:53px}.coin-options span{font-size:9px}.coin-options small{font-size:6px}#hud.coin-shop-open #map{top:285px}}
#rival-status{position:absolute;top:222px;left:4.8%;display:flex;align-items:center;gap:7px;min-height:27px;padding:4px 9px;border:1px solid #fff9;border-radius:9px;background:#fff6dfdf;color:#24495c;box-shadow:0 2px 5px #28465820;pointer-events:none}#rival-status>span{font:700 8px 'Fredoka';letter-spacing:1px;color:#a77b32}#rival-status>b{font-size:11px;font-weight:900}#rival-status>small{font:700 9px 'Fredoka';letter-spacing:.3px;color:#6d7f83}#rival-status.near{background:#fff0c4f5;border-color:#ffd56b;box-shadow:0 0 0 2px #ffd56b44,0 2px 5px #28465820}#rival-status.near>small{color:#a66f12}@media(max-width:760px){#rival-status{top:168px;left:6%;gap:6px;min-height:24px;padding:3px 7px}#rival-status>b{font-size:9px}#rival-status>small{font-size:7px}.drift{top:207px}}@media(max-width:350px){#rival-status{top:162px;left:5%;padding:2px 6px}.drift{top:197px}}
.drift .draft-meter{height:auto;margin-top:9px;padding:0;background:transparent;overflow:visible;text-align:left}.draft-meter .sync-track i{background:linear-gradient(90deg,#46c9d8,#6ce4bd);transition:width .12s linear}.draft-meter button{display:block;width:100%;min-height:44px;margin-top:7px;padding:7px 8px;border:1px solid #b6d9d6;border-radius:9px;background:#f1fffb;color:#356b71;font-size:9px;font-weight:800;line-height:1.35;pointer-events:auto}.draft-meter button:disabled{opacity:.78;cursor:default}.draft-meter button:not(:disabled){border-color:#4db7b7;background:#d9fbef;color:#155e60;box-shadow:0 2px 0 #78cdbd;cursor:pointer}.draft-meter button:not(:disabled):hover{transform:translateY(-1px);background:#c3f6e4}.draft-meter.ready .sync-caption,.draft-meter.ready .sync-caption b{color:#16767a}.draft-meter.ready .sync-track{background:#bcebe1}.draft-meter.ready .sync-track i{background:linear-gradient(90deg,#49cad8,#9af4c8);box-shadow:0 0 9px #54e0c8a8}@media(max-width:760px){.drift .draft-meter{margin-top:7px}.draft-meter button{font-size:8px;min-height:44px}}

.ghost-status{position:absolute;right:4.8%;bottom:218px;display:flex;min-width:154px;max-width:196px;flex-direction:column;gap:3px;padding:8px 11px;border:1px solid #d9ffff;background:#eafff4e8;border-radius:11px;color:#245366;box-shadow:0 3px 9px #24495c23;pointer-events:none;text-align:right}.ghost-status>span{font:700 7px 'Fredoka';letter-spacing:1.1px;color:#448894}.ghost-status>b{font:700 12px 'Fredoka';color:#167b83;letter-spacing:.35px}.ghost-status>small{font-size:8px;color:#64808a;white-space:nowrap}.ghost-status.empty{background:#fff9e6dc;border-color:#fff}.ghost-status.empty>b{font-size:10px;color:#74888a}.ghost-status.empty>span{color:#a58b61}@media(max-width:760px){.ghost-status{right:5%;bottom:211px;min-width:142px;max-width:170px;padding:7px 9px}.ghost-status>span{font-size:6px}.ghost-status>b{font-size:10px}.ghost-status>small{font-size:7px}}@media(max-width:350px){.ghost-status{right:4%;min-width:128px;padding:6px 7px}.ghost-status>small{font-size:6px}}

/* Race HUD: keep status legible while leaving the racing line open. */
#hud{--race-paper:#fff9eaf5;--race-ink:#193f52}
.position{top:116px;left:4.2%;gap:10px;filter:drop-shadow(0 3px 2px #12364a48)}
.position>strong{font-size:78px;color:#ffc84e;-webkit-text-stroke:2.5px #fffdf1}
.position>span{font-size:18px;text-shadow:0 2px 4px #153649a8}
.position small{font-size:10px;letter-spacing:1.2px}
.lap{top:111px;right:4.2%;gap:18px;padding:11px 15px;border:1px solid #fff;background:var(--race-paper);box-shadow:0 5px 18px #183e4b26}
.lap span{font-size:10px;color:#547181}
.lap b{font-size:24px;color:var(--race-ink)}
.coin-counter small{font-size:8px}
#map{top:207px;right:4.2%;width:160px;height:134px;padding:6px;border:2px solid #fff;border-radius:15px;background:#fff8e9ed;box-shadow:0 5px 16px #183e4b2e;filter:none}
#rival-status{top:205px;left:4.2%;gap:8px;min-height:32px;padding:5px 10px;border-color:#fff;background:var(--race-paper);box-shadow:0 4px 12px #183e4b28}
#rival-status>span{font-size:9px;color:#8b6628}
#rival-status>b{font-size:12px;color:var(--race-ink)}
#rival-status>small{font-size:10px;color:#4b6876}
.drift{top:260px;bottom:auto;left:4.2%;width:min(226px,19vw);padding:11px 13px;transform:none;border:1px solid #fff;background:var(--race-paper);box-shadow:0 5px 16px #183e4b25;text-align:left;color:var(--race-ink);font-size:10px;line-height:1.35}
.drift>span{display:block;font-size:11px;line-height:1.4}
.drift .drift-track{margin-top:7px}
.drift .sync-meter,.drift .draft-meter{margin-top:10px}
.sync-caption{font-size:9px;color:#3d5e6d}
.sync-caption b{font-size:10px;color:#31596a}
.sync-meter small{font-size:9px;color:#4d6874}
.draft-meter button{font-size:10px;color:#20575c;background:#e6fbf3;border-color:#a4d9d1}
.draft-meter button:disabled{opacity:1;color:#426a6d;background:#eff8f3}
.ghost-status.empty{display:none}
.ghost-status:not(.empty){top:354px;right:4.2%;bottom:auto;min-width:162px;padding:8px 10px;border-color:#fff;background:#ecfff4f2;box-shadow:0 5px 16px #183e4b25}
.ghost-status:not(.empty)>span{font-size:8px}
.ghost-status:not(.empty)>b{font-size:12px}
.ghost-status:not(.empty)>small{font-size:9px}
.item-slot{left:4.2%;bottom:24px;width:106px;min-height:104px;padding:9px 8px;border-radius:17px;background:#fffaf0f5;box-shadow:0 5px 16px #183e4b30}
.item-slot>span{font-size:9px;color:#4d6874}
.item-slot b{font-size:34px;margin:2px 0}
.item-slot small{font-size:10px;color:#526c79}
.skill-slot{left:calc(4.2% + 118px)}
.speed{right:4.2%;bottom:26px;text-shadow:0 2px 5px #15384da8}
.speed b{font-size:58px;-webkit-text-stroke:1.5px #15384d}
.speed>span{font-size:11px}
.speed-bar{width:156px;height:8px;margin-top:9px;background:#173e526e;box-shadow:0 1px 4px #12364a62}

@media(max-width:760px){
 .position{top:96px;left:5%;gap:7px}
 .position>strong{font-size:59px;-webkit-text-stroke:2px #fffdf1}
 .position>span{font-size:15px}
 .position small{font-size:8px}
 .lap{top:98px;right:4%;gap:10px;padding:8px 10px}
 .lap span{font-size:8px}
 .lap b{font-size:18px}
 .coin-counter small{font-size:6px}
 #rival-status{top:157px;left:5%;gap:6px;min-height:27px;padding:4px 8px}
 #rival-status>span{font-size:8px}
 #rival-status>b{font-size:10px}
 #rival-status>small{font-size:8px}
 #map{top:254px;right:4%;width:112px;height:93px;padding:5px;border-radius:13px}
 .drift{top:198px;bottom:auto;left:5%;width:min(190px,47vw);padding:9px 10px;font-size:9px}
 .drift>span{font-size:10px}
 .drift .sync-meter,.drift .draft-meter{margin-top:8px}
 .sync-caption{font-size:8px}
 .sync-caption b{font-size:9px}
 .sync-meter small{display:none}
 .draft-meter button{font-size:9px;min-height:44px}
 .ghost-status:not(.empty){top:365px;right:4%;min-width:138px;max-width:160px;padding:7px 8px}
 .ghost-status:not(.empty)>span{font-size:7px}
 .ghost-status:not(.empty)>b{font-size:10px}
 .ghost-status:not(.empty)>small{font-size:8px}
 .item-slot{left:5%;bottom:20px;width:84px;min-height:84px;padding:6px;border-radius:14px}
 .item-slot>span{font-size:7px}
 .item-slot b{font-size:28px}
 .item-slot small{font-size:8px}
 .skill-slot{left:calc(5% + 94px);bottom:20px;width:84px;min-height:84px}
 .skill-slot small{font-size:7px}
 .speed{right:5%;bottom:26px}
 .speed b{font-size:43px}
 .speed>span{font-size:8px}
 .speed-bar{width:100px;height:6px;margin-top:7px}
}
@media(max-width:390px){
 .position>strong{font-size:53px}
 .lap{gap:7px;padding:7px 8px}
 .lap b{font-size:16px}
 #map{width:99px;height:82px}
 .drift{width:min(172px,46vw);padding:8px}
 .draft-meter button{font-size:8px;padding:6px}
 .item-slot,.skill-slot{width:76px;min-height:80px}
 .skill-slot{left:calc(5% + 85px)}
 .speed b{font-size:39px}
}
@media(min-width:761px) and (max-height:520px){
 .position{top:80px;left:3%}
 .position>strong{font-size:58px}
 .lap{top:78px;right:3%;padding:8px 11px}
 .lap b{font-size:20px}
 #rival-status{top:145px;left:3%}
 #map{top:145px;right:3%;width:112px;height:92px;padding:4px}
 .drift{top:auto;bottom:104px;left:50%;width:min(300px,36vw);padding:8px 10px;transform:translateX(-50%)}
 .drift .sync-meter,.drift .draft-meter{margin-top:6px}
 .sync-meter small{display:none}
 .draft-meter button{min-height:40px;margin-top:5px}
 .item-slot{left:3%;bottom:12px;width:82px;min-height:76px;padding:5px}
 .item-slot b{font-size:27px}
 .item-slot>span,.item-slot small{font-size:7px}
 .skill-slot{left:calc(3% + 92px)}
 .speed{right:3%;bottom:14px}
 .speed b{font-size:44px}
 .speed-bar{width:120px}
 .ghost-status:not(.empty){top:246px;right:3%;min-width:145px;max-width:172px;padding:6px 8px}
}

/* Translucent race HUD keeps the track visible behind status and prompts. */
#hud{--race-paper:rgba(255,249,234,.48)}
.lap{background:rgba(255,249,234,.54);border-color:rgba(255,255,255,.62);box-shadow:0 3px 12px #183e4b18}
.lap span,.lap b,.coin-counter,.coin-counter small{text-shadow:0 1px 2px #fff9}
#map{background:rgba(255,248,233,.34);border-color:rgba(255,255,255,.66);box-shadow:0 3px 11px #183e4b1c}
#rival-status{background:rgba(255,249,234,.46);border-color:rgba(255,255,255,.64);box-shadow:0 2px 8px #183e4b14}
#rival-status.near{background:rgba(255,232,174,.56);border-color:#ffd56bb0;box-shadow:0 0 0 2px #ffd56b30,0 2px 8px #183e4b18}
.drift{background:rgba(255,249,234,.40);border-color:rgba(255,255,255,.56);box-shadow:0 3px 10px #183e4b16}
.drift>span,.sync-caption,.sync-caption b,.sync-meter small{ text-shadow:0 1px 2px #fff,0 0 5px #fff9 }
.sync-meter small{display:none}
.draft-meter button:disabled{min-height:0;margin-top:4px;padding:2px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#315865;text-align:left;font-size:9px;line-height:1.35;opacity:.92}
.draft-meter button:not(:disabled){background:rgba(217,251,239,.78);border-color:#4db7b7cc;box-shadow:0 2px 0 #78cdbd88}
.ghost-status:not(.empty){background:rgba(234,255,244,.52);border-color:#d9ffffb0;box-shadow:0 3px 10px #183e4b18}
.item-slot{background:rgba(255,250,240,.52);border-color:#ffffffb0;box-shadow:0 3px 10px #183e4b1e}
.item-slot.has-item{background:rgba(255,251,223,.62)}
.item-slot>span,.item-slot small{text-shadow:0 1px 2px #fff9}
.skill-slot:not(:disabled){background:rgba(250,240,255,.62)}
.speed-bar{background:#173e524c;box-shadow:0 1px 4px #12364a40}
#announcement:not(:empty){background:rgba(255,248,230,.54);border-color:rgba(255,255,255,.66);box-shadow:0 3px 10px #3f75861a}
#announcement{ text-shadow:0 1px 2px #fff,0 0 6px #fff9 }
.branch-prompt{background:rgba(23,60,82,.72);border-color:#fff5d8b8;box-shadow:0 4px 14px #102c3b35}
#overlay{background:rgba(42,105,119,.24);backdrop-filter:blur(1px)}
.modal{background:rgba(255,248,232,.88);border-color:rgba(255,255,255,.86);box-shadow:0 10px 26px #2453661a}
.modal .cup-tuning{margin:12px 0 15px;padding:12px;border:1px solid #d9e3db;border-radius:14px;background:#fffdf6}.tuning-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:9px}.tuning-heading h3{margin:3px 0 0;color:#28495a;font-size:14px;font-weight:900}.tuning-heading>p{margin:0 0 2px;color:#71888d;font-size:8px;text-align:right}.tuning-kicker{color:#a87b31;font:700 8px 'Fredoka',sans-serif;letter-spacing:1px}.tuning-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.modal .tuning-option{position:relative;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto 1fr;align-items:center;gap:2px 6px;min-width:0;min-height:80px;margin:0;padding:8px;text-align:left;border:1px solid #d6e2dc;border-radius:10px;background:#fff;color:#29495a;transition:border-color .16s,background .16s,box-shadow .16s}.modal .tuning-option:hover{border-color:#d5a33d;background:#fff9e8}.modal .tuning-option.selected{border:2px solid #dda944;background:#fff1c9;box-shadow:0 2px 0 #e6c679}.tuning-icon{grid-row:1/3;display:grid;place-items:center;width:22px;height:28px;border-radius:7px;background:#edf3ed;color:#638274;font-size:16px}.tuning-option[data-tuning=grip] .tuning-icon{color:#358e90}.tuning-option[data-tuning=engine] .tuning-icon{color:#d78237}.tuning-option[data-tuning=aero] .tuning-icon{color:#7770c5}.tuning-option strong{overflow:hidden;color:#29495a;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.tuning-option small{overflow:hidden;color:#6d858d;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.tuning-option b{grid-column:1/-1;align-self:end;margin-top:4px;color:#61777c;font-size:7px;font-weight:700;line-height:1.45}.tuning-note{min-height:14px;margin:8px 0 0;color:#638078;font-size:8px;font-weight:700}
@media(max-width:760px){.modal .cup-tuning{margin:9px 0 12px;padding:9px}.tuning-heading{align-items:flex-start}.tuning-heading h3{font-size:13px}.tuning-heading>p{max-width:110px;font-size:7px}.tuning-grid{gap:6px}.modal .tuning-option{min-height:76px;padding:7px}.tuning-option strong{font-size:8px}.tuning-option small,.tuning-option b{font-size:7px}.tuning-note{font-size:7px}}
.secondary{background:rgba(255,253,243,.84)}
#touch button{background:rgba(255,248,232,.66);box-shadow:0 3px 0 #32596732}
#touch button[data-input=accelerate]{background:rgba(255,206,89,.82)}
@media(max-width:760px){
 .drift{background:rgba(255,249,234,.43)}
 .item-slot,.skill-slot{background:rgba(255,250,240,.55)}
 #map{background:rgba(255,248,233,.40)}
 .branch-prompt{background:rgba(23,60,82,.78)}
}
@media(max-width:760px){
 #announcement{display:none}
 #countdown{top:26%;font-size:58px;-webkit-text-stroke:3px #fff;filter:drop-shadow(0 4px 0 #2f68744a)}
 #rival-status{top:157px;gap:5px}
 #rival-status>span{display:none}
 .drift{top:242px;left:4%;width:min(154px,43vw);padding:7px 8px;background:rgba(255,249,234,.88)!important;border:1px solid rgba(255,255,255,.94);border-radius:12px;box-shadow:0 4px 16px #193d4d28;backdrop-filter:blur(7px);font-size:8px}
 .drift>span{font-size:9px}
 .drift .sync-meter,.drift .draft-meter{margin-top:6px}
 .draft-meter button:disabled{font-size:8px}
 .item-slot{left:4%;bottom:82px;width:62px;min-height:58px;padding:4px;border-width:1px;border-radius:11px}
 .item-slot>span{font-size:6px;letter-spacing:.2px}
 .item-slot b{font-size:23px;margin:0}
 .item-slot small{font-size:6px;line-height:1.1}
 .skill-slot{left:calc(4% + 68px);bottom:82px;width:62px;min-height:58px}
 .speed{right:6%;bottom:84px}
 .speed b{font-size:37px}
 .speed>span{font-size:7px}
 .speed-bar{width:86px;height:5px;margin-top:5px}
 #touch button{min-width:46px;height:49px;border-radius:12px}
}
@media(max-width:760px){
 .lap{background:rgba(255,249,234,.34);border-color:rgba(255,255,255,.42);box-shadow:none}
 .lap span,.lap b{text-shadow:0 1px 2px #fff,0 1px 4px #fff9}
 #rival-status{background:transparent;border-color:transparent;box-shadow:none;padding:2px 4px}
 #rival-status>b,#rival-status>small{text-shadow:0 1px 2px #fff,0 1px 5px #fff}
 .drift{background:transparent!important;border-color:transparent;box-shadow:none}
 .sync-caption,.sync-caption b,.sync-meter small,.drift>span{text-shadow:0 1px 2px #fff,0 1px 5px #fff}
 .drift .sync-track{background:rgba(255,255,255,.52)}
 .draft-meter button:disabled{color:#274d58;text-shadow:0 1px 2px #fff,0 1px 5px #fff}
 .item-slot,.skill-slot{background:rgba(255,250,240,.28)!important;border-color:rgba(255,255,255,.52);box-shadow:none}
 .item-slot,.skill-slot{width:52px;min-height:52px;padding:4px}
 .item-slot>span,.skill-slot>span{display:block;font-size:5px;letter-spacing:0;text-shadow:0 1px 3px #fff}
 .item-slot small,.skill-slot small{display:none}
 .item-slot b,.skill-slot b{font-size:25px;margin:0;text-shadow:0 1px 3px #fff}
 .item-slot:not(.has-item) b{color:#527987}
 .item-slot.has-item b{color:#b17814}
 .skill-slot b{color:#875fb0}
 .skill-slot{left:calc(4% + 58px)}
 #map{background:rgba(255,248,233,.26);border-color:rgba(255,255,255,.56);box-shadow:none}
 .ghost-status:not(.empty){background:rgba(234,255,244,.28);border-color:rgba(217,255,255,.55);box-shadow:none}
 .ghost-status:not(.empty)>span{display:none}
 .ghost-status:not(.empty)>small{font-size:7px}
}


#weather-status{position:absolute;top:164px;right:4.2%;display:flex;align-items:center;gap:7px;min-height:32px;padding:5px 10px;border:1px solid rgba(255,255,255,.68);border-radius:11px;background:rgba(242,250,255,.55);box-shadow:0 3px 10px #183e4b18;color:#214b61;pointer-events:none;transition:background .4s,border-color .4s}
#weather-icon{font-size:15px;line-height:1}
#weather-label{font-size:10px;letter-spacing:.2px;white-space:nowrap}
#weather-status>small{padding-left:6px;border-left:1px solid #55778a55;font:700 7px 'Fredoka';letter-spacing:.8px;color:#547181}
#weather-status[data-phase=incoming]{background:rgba(240,248,255,.65)}
#weather-status[data-phase=rain],#weather-status[data-phase=wet]{background:rgba(201,231,244,.64);border-color:rgba(231,250,255,.78);color:#1e506a}
#weather-status[data-phase=drying]{background:rgba(246,250,228,.6);color:#496342}
@media(max-width:760px){#weather-status{top:203px;right:4%;min-height:29px;padding:4px 8px;gap:5px}#weather-icon{font-size:13px}#weather-label{font-size:9px}#weather-status>small{font-size:6px;padding-left:5px}}
@media(max-width:390px){#weather-status{top:198px;right:4%;min-height:27px;padding:3px 7px}#weather-status>small{display:none}}

.apex-meter{height:auto!important;display:block;margin-top:9px;padding:7px 0 0;background:transparent;border:0;border-top:1px solid rgba(78,112,122,.22);border-radius:0;overflow:visible;text-align:left;color:var(--race-ink);transition:color .2s}
.apex-caption{display:flex;align-items:center;justify-content:space-between;font:700 8px 'Fredoka';letter-spacing:.8px;color:#7f8e83}
.apex-caption b{font:700 9px 'Fredoka';color:#6f8281}
.apex-track{height:5px!important;margin-top:5px!important;background:#d8e4dc!important;border-radius:5px;overflow:hidden}
.apex-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#f2bd55,#ffe28a);box-shadow:0 0 6px #ffd76c55;transition:width .12s linear}
.apex-meter>small{display:block;margin-top:4px;font-size:8px;font-weight:700;color:#55717c;line-height:1.3}
.apex-meter.active .apex-caption,.apex-meter.active .apex-caption b{color:#a16b19}
.apex-meter.active .apex-track{background:#f1e4c4!important}
.apex-meter.on-line .apex-caption,.apex-meter.on-line .apex-caption b{color:#287d78}
.apex-meter.on-line .apex-track i{background:linear-gradient(90deg,#49c8b6,#b0eb9d)}
.apex-meter.charged .apex-track i{background:linear-gradient(90deg,#ef9b43,#ffd762);box-shadow:0 0 9px #ffd26799}
@media(max-width:760px){.apex-meter{margin-top:7px;padding-top:5px}.apex-caption{font-size:7px}.apex-meter>small{font-size:7px}}
.trick-status{position:absolute;left:50%;bottom:151px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;min-height:42px;padding:7px 11px;border:1px solid #fff;border-radius:12px;background:rgba(244,239,255,.72);box-shadow:0 3px 12px #183e4b24;color:#453a68;pointer-events:none;white-space:nowrap}
.trick-status>span{font:700 8px 'Fredoka';letter-spacing:.7px;color:#8062b1}
.trick-status>b{font:800 12px 'Fredoka','Noto Sans JP',sans-serif}
.trick-status>div{width:54px;height:5px;border-radius:5px;background:#d9cde9;overflow:hidden}
.trick-status>div i{display:block;width:0;height:100%;border-radius:inherit;background:#a77be8;transition:width .08s linear}
.trick-status>small{font-size:8px;color:#61577b}
.trick-status.ready{background:rgba(249,241,255,.86);border-color:#d5b8ff;box-shadow:0 0 0 2px #bd91f249,0 4px 14px #183e4b28}
.trick-status.ready>div i{background:#ffbf55}
@media(max-width:760px){.trick-status{bottom:147px;min-height:38px;gap:6px;padding:6px 8px}.trick-status>span{font-size:7px}.trick-status>b{font-size:11px}.trick-status>div{width:40px}.trick-status>small{font-size:7px}}
@media(max-width:390px){.trick-status{bottom:140px;gap:5px;padding:5px 7px}.trick-status>small{display:none}}

#rival-status>#rival-style{font:800 8px 'Noto Sans JP',sans-serif;font-style:normal;letter-spacing:.05em;white-space:nowrap;color:#287a77;padding:2px 5px;border:1px solid #82c7b6;border-radius:99px;background:#e6f5e9}
#rival-status.near>#rival-style{color:#8b5b16;border-color:#f0c566;background:#fff4d1}
@media(max-width:390px){#rival-status>#rival-style{font-size:7px;padding:1px 4px}}

#course-event-status{position:absolute;top:77px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;min-height:31px;padding:4px 10px;border:1px solid rgba(255,255,255,.42);border-radius:10px;background:rgba(20,52,63,.48);backdrop-filter:blur(5px);box-shadow:0 3px 12px #193d4d22;color:#fff8e8;pointer-events:none;white-space:nowrap;transition:background .2s,border-color .2s,box-shadow .2s}
#course-event-status>span{font:700 7px 'Fredoka';letter-spacing:.9px;color:#b6edda}
#course-event-status>i{font:900 15px 'Fredoka';font-style:normal;color:#ffda77}
#course-event-status>b{font:800 10px 'Noto Sans JP',sans-serif}
#course-event-status>small{padding-left:7px;border-left:1px solid #ffffff5c;font:700 8px 'Fredoka';color:#fff2ce}
#course-event-status[data-lane=right]>i{color:#ffb780}
#course-event-status[data-lane=left]>i{color:#a8e8ff}
#course-event-status[data-lane=center]>i{color:#ffde75}
#course-event-status.imminent{background:rgba(115,54,39,.57);border-color:#ffd28c;box-shadow:0 0 0 2px #ffd28c38,0 3px 13px #193d4d30}
@media(max-width:760px){#course-event-status{top:75px;gap:6px;min-height:28px;padding:3px 8px}#course-event-status>b{font-size:9px}#course-event-status>small{font-size:7px}}
@media(max-width:390px){#course-event-status{top:71px;gap:5px;padding:3px 7px}#course-event-status>span{font-size:6px}#course-event-status>i{font-size:13px}}
@media(max-width:350px){#course-event-status>span{display:none}}

#challenge-gate-status{position:absolute;top:77px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;min-height:31px;padding:4px 10px;border:1px solid rgba(255,255,255,.52);border-radius:10px;background:rgba(77,57,24,.48);backdrop-filter:blur(5px);box-shadow:0 3px 12px #193d4d22;color:#fff8e8;pointer-events:none;white-space:nowrap;transition:background .2s,border-color .2s,box-shadow .2s}
#challenge-gate-status>span{font:700 7px 'Fredoka';letter-spacing:.9px;color:#ffe29a}
#challenge-gate-status>i{font:900 15px 'Fredoka';font-style:normal;color:#ffd45f}
#challenge-gate-status>b{font:800 10px 'Noto Sans JP',sans-serif}
#challenge-gate-status>small{padding-left:7px;border-left:1px solid #ffffff5c;font:700 8px 'Noto Sans JP',sans-serif;color:#fff2ce}
#challenge-gate-status[data-lane=left]>i{color:#a8e8ff}
#challenge-gate-status[data-lane=right]>i{color:#ffb780}
#challenge-gate-status.imminent{background:rgba(115,67,25,.62);border-color:#ffe29a;box-shadow:0 0 0 2px #ffe29a38,0 3px 13px #193d4d30}
@media(max-width:760px){#challenge-gate-status{top:75px;gap:6px;min-height:28px;padding:3px 8px}#challenge-gate-status>b{font-size:9px}#challenge-gate-status>small{font-size:7px}}
@media(max-width:390px){#challenge-gate-status{top:71px;gap:5px;padding:3px 7px}#challenge-gate-status>span{font-size:6px}#challenge-gate-status>i{font-size:13px}}
@media(max-width:350px){#challenge-gate-status>span{display:none}#challenge-gate-status>small{font-size:6px}}

@media(max-width:760px){#challenge-gate-status{width:max-content;max-width:calc(100vw - 20px);white-space:normal;flex-wrap:wrap;justify-content:center}#challenge-gate-status>small{flex-basis:100%;padding:3px 0 0;border-left:0;border-top:1px solid #ffffff5c;text-align:center}}


.driver-challenge{margin-top:10px;padding-top:8px;border-top:1px solid #47687930;color:var(--race-ink,#193f52)}.driver-challenge-head{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#56717c;font:700 8px 'Fredoka';letter-spacing:.85px}.driver-challenge-head b{color:#b67b24;font-size:7px}.driver-challenge>strong{display:block;margin-top:4px;font:800 10px 'Noto Sans JP',sans-serif}.challenge-track{height:5px;margin-top:6px;overflow:hidden;border-radius:99px;background:#718d8d35}.challenge-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e7a847,#f4d16b);transition:width .18s ease}.driver-challenge>small{display:block;margin-top:4px;color:#5d747d;font:600 8px 'Noto Sans JP',sans-serif;line-height:1.35}.driver-challenge[data-state=complete]{border-color:#70b89a}.driver-challenge[data-state=complete] .driver-challenge-head b{color:#188366}.driver-challenge[data-state=complete] .challenge-track i{background:linear-gradient(90deg,#3aa987,#9fdb96)}.driver-challenge[data-state=complete]>small{color:#19775f;font-weight:800}
@media(max-width:760px){.driver-challenge{margin-top:8px;padding-top:6px}.driver-challenge-head{font-size:7px}.driver-challenge>strong{font-size:9px}.driver-challenge>small{font-size:7px}}
@media(max-width:390px){.driver-challenge{margin-top:6px;padding-top:5px}.challenge-track{height:4px}.driver-challenge>small{font-size:6.5px}}

.drift>.driver-challenge{height:auto;margin-top:10px;padding-top:8px;overflow:visible;border-radius:0;background:transparent}
@media(max-width:760px){.drift>.driver-challenge{margin-top:8px;padding-top:6px}}
@media(max-width:390px){.drift>.driver-challenge{margin-top:6px;padding-top:5px}}

/* Local split-screen versus */
.mode-picker{grid-template-columns:repeat(4,minmax(0,1fr))}.mode-picker button{min-width:0;padding-inline:7px}.mode-picker strong{white-space:nowrap}.player2-picker{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:8px 10px;border:1px solid #d8e2d9;border-radius:11px;background:#fffaf0e8}.player2-picker label{display:flex;flex-direction:column;gap:3px;color:#29495a;font-size:10px;font-weight:900;letter-spacing:.5px}.player2-picker label span{color:#6d8285;font-size:8px;font-weight:600;letter-spacing:0}.player2-picker select{min-width:120px;min-height:38px;border:1px solid #d0ddd6;border-radius:8px;background:#fff;color:#29495a;padding:5px 8px;font-size:11px;font-weight:700}
#hud.duel-mode>:not(#duel-hud){display:none!important}.duel-hud{position:fixed;inset:0;z-index:4;pointer-events:none;color:#fff8e9}.duel-card{position:absolute;width:222px;padding:9px 12px 8px;border:1px solid #ffffffb8;border-radius:13px;background:#143447cf;box-shadow:0 4px 18px #102b3a44;backdrop-filter:blur(8px);text-shadow:0 1px 4px #102b3a88}.duel-card>span{display:block;color:#ffe08a;font:800 8px 'Fredoka',sans-serif;letter-spacing:1.3px}.duel-card>strong{display:block;margin-top:2px;font-size:14px}.duel-card>div{display:flex;align-items:baseline;gap:5px}.duel-card>div>b{font:800 24px 'Fredoka',sans-serif}.duel-card>div>small{font-size:8px;letter-spacing:.4px}.duel-card i{font-style:normal}.duel-card footer{display:flex;justify-content:space-between;font:700 9px 'Fredoka',sans-serif;letter-spacing:.4px}.duel-card>#p2-power{display:block;margin-top:3px;color:#dceee8;font-size:8px}.duel-p1{left:12px;top:12px}.duel-p2{right:12px;top:12px}.duel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:5px 9px;border:1px solid #fff8;border-radius:99px;background:#173c50ad;color:#fff4cf;font:800 8px 'Fredoka',sans-serif;letter-spacing:1px}.duel-controls{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);margin:0;padding:5px 9px;border-radius:99px;background:#173c50c9;color:#fff;font-size:8px;white-space:nowrap}
body.local-versus header{padding:10px 12px;justify-content:flex-end;pointer-events:none}body.local-versus header .brand,body.local-versus header .course-tag,body.local-versus header #sound,body.local-versus header #fullscreen{display:none}body.local-versus header #pause{display:block;pointer-events:auto;min-width:42px;min-height:40px;padding:8px;background:#173c50d9;color:#fff;border-color:#ffffff99}
body.local-versus::after{content:"";position:fixed;z-index:3;pointer-events:none;background:#fff9dfde;box-shadow:0 0 0 1px #173c50a0}
@media(orientation:portrait){body.local-versus::after{left:0;right:0;top:50%;height:3px}.duel-card{left:10px;right:10px;width:auto}.duel-p1{top:9px}.duel-p2{top:calc(50% + 10px)}.duel-center{top:50%}.duel-controls{bottom:calc(50% + 10px);max-width:94vw;overflow:hidden;text-overflow:ellipsis}}
@media(orientation:landscape){body.local-versus::after{top:0;bottom:0;left:50%;width:3px}.duel-p1{left:10px;top:58px;width:min(222px,44vw)}.duel-p2{right:10px;top:58px;width:min(222px,44vw)}.duel-controls{bottom:8px;max-width:48vw;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:420px){.mode-picker{gap:4px}.mode-picker button{padding:6px 3px;min-height:48px}.mode-picker strong{font-size:8px}.mode-picker small{font-size:8px}.player2-picker{margin-top:5px;padding:6px 8px}.player2-picker label{font-size:9px}.player2-picker select{min-width:102px}.duel-card{padding:7px 9px}.duel-card>strong{font-size:12px}.duel-card>div>b{font-size:21px}}

/* Cooperative lap-by-lap relay */
@media(max-width:760px){.mode-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.team-relay #driver-challenge,body.team-relay #ghost-status,body.team-relay #rival-status{display:none!important}
.relay-hud{position:fixed;z-index:4;top:210px;left:4.2%;width:min(285px,46vw);padding:9px 12px;border:1px solid #ffffffa8;border-radius:13px;background:#153c50d9;color:#fff9e9;box-shadow:0 4px 16px #15344938;pointer-events:none;text-shadow:0 1px 3px #15344975}
.relay-hud[hidden]{display:none}
.relay-hud>span{display:block;color:#ffe08b;font:800 8px 'Fredoka',sans-serif;letter-spacing:1.1px}
.relay-hud>span b{float:right;color:#fff;font-size:10px}
.relay-hud>strong{display:block;margin-top:3px;font-size:13px}
.relay-hud>p{margin:2px 0 6px;color:#d9e9e5;font:700 8px 'Fredoka',sans-serif;letter-spacing:.4px}
.relay-window{height:7px;overflow:hidden;border:1px solid #ffffff7c;border-radius:8px;background:#ffffff24}
.relay-window i{display:block;width:0;height:100%;border-radius:8px;background:linear-gradient(90deg,#68d9c7 0%,#ffe079 74%,#ffab4f 100%);box-shadow:0 0 9px #ffe079a6;transition:width .12s linear}
.relay-hud>small{display:block;min-height:13px;margin-top:4px;color:#fff6d5;font-size:8px;line-height:1.45}
@media(max-width:760px){.relay-hud{top:210px;left:5%;width:min(166px,44vw);padding:7px 9px}.relay-hud>strong{font-size:11px}.relay-hud>p{font-size:7px;margin-bottom:5px}.relay-hud>small{font-size:7px;min-height:12px}}
@media(max-width:420px){.mode-picker button{min-height:48px}.relay-hud{left:4%;width:44vw;padding:6px 8px}}.item-slot.is-rolling{border-color:#75d9e2;background:rgba(237,253,248,.88);box-shadow:0 0 0 3px #75d9e27a,0 5px 0 #345c7029;animation:item-roulette-pulse .32s ease-in-out infinite alternate}
.item-slot.is-rolling b{color:#597edf;text-shadow:0 1px 3px #fff;filter:drop-shadow(0 2px 0 #d3e7ff)}
.item-slot.is-rolling small{color:#254d69;font-weight:800}
@keyframes item-roulette-pulse{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-2px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.item-slot.is-rolling{animation:none}}

/* Mid-race elemental crafting */
.synthesis-shop>summary{list-style:none;cursor:pointer;min-height:28px;display:flex;align-items:center}
.synthesis-shop>summary::-webkit-details-marker{display:none}
.synthesis-shop>summary:focus-visible{outline:3px solid #5c9ead;outline-offset:3px;border-radius:9px}
.synthesis-counter{display:flex;align-items:center;gap:4px;white-space:nowrap;color:#8066ba!important;font:800 12px 'Fredoka',sans-serif}
.synthesis-counter b{display:inline!important;margin:0!important;color:#8066ba!important;font:800 15px 'Fredoka',sans-serif!important}
.synthesis-counter small{font:700 7px 'Fredoka',sans-serif;letter-spacing:.6px;color:#6b6384;border:1px solid #c9b9e7;border-radius:5px;padding:3px 4px}
.synthesis-shop[open] .synthesis-counter{color:#57468d!important}
.synthesis-market{position:fixed;z-index:9;top:177px;right:4.5%;width:min(326px,calc(100vw - 24px));padding:14px;background:rgba(255,250,239,.9);backdrop-filter:blur(5px);border:2px solid #fff;box-shadow:0 8px 24px #23485b36;border-radius:16px;color:#24495c;pointer-events:auto}
.synthesis-market>strong{display:block;color:#705b9f;font:800 9px 'Fredoka',sans-serif;letter-spacing:1.1px}
.synthesis-market>p{margin:5px 0 10px;color:#55717d;font-size:10px;line-height:1.5}
.material-pouch{display:flex;gap:7px;margin-bottom:10px}
.material-pouch>span{flex:1;display:flex;justify-content:center;align-items:center;gap:5px;min-height:29px;border:1px solid #d9dfe0;border-radius:9px;background:#fff;font:800 11px 'Fredoka',sans-serif;color:#59717a}
.material-pouch>span:nth-child(1){color:#a36b1d;border-color:#f1d5a7}.material-pouch>span:nth-child(2){color:#287c85;border-color:#b8e5e5}.material-pouch>span:nth-child(3){color:#7057af;border-color:#d6c8f5}
.material-pouch b{font:800 12px 'Fredoka',sans-serif}
.synthesis-recipes{display:grid;gap:6px}
.synthesis-recipes button{display:grid;grid-template-columns:53px 1fr auto;align-items:center;gap:7px;min-height:43px;padding:6px 8px;border:1px solid #d8dfdc;border-radius:10px;background:#fff;color:#24495c;text-align:left;cursor:pointer}
.synthesis-recipes button:hover:not(:disabled){transform:translateY(-1px);border-color:#b49be5;background:#fbf8ff}
.synthesis-recipes button:focus-visible{outline:3px solid #8066ba;outline-offset:2px}
.synthesis-recipes button:disabled{opacity:.48;cursor:not-allowed}
.synthesis-recipes button.can-craft{border-color:#a994d6;background:#f5f0ff;box-shadow:inset 3px 0 #8e74c8}
.synthesis-recipes button>b{color:#8066ba;font:800 12px 'Fredoka',sans-serif;white-space:nowrap}
.synthesis-recipes button>span{font-size:10px;font-weight:900}
.synthesis-recipes button>small{color:#668087;font-size:8px;white-space:nowrap}
#synthesis-note{display:block;margin-top:9px;color:#60757b;font-size:9px;font-weight:700}
#hud.synthesis-shop-open #map{top:310px}
@media(max-width:760px){.synthesis-market{top:156px;right:4%;width:min(326px,92vw);padding:11px}.synthesis-market>p{font-size:9px}.synthesis-recipes button{min-height:42px}.synthesis-recipes button>small{font-size:7px}#hud.synthesis-shop-open #map{top:285px}}
@media(max-width:390px){.synthesis-market{width:min(310px,92vw)}.synthesis-recipes button{grid-template-columns:44px 1fr auto;gap:5px;padding:5px 6px}.synthesis-recipes button>span{font-size:9px}.synthesis-recipes button>small{font-size:6px}}
.duel-card>#p1-power,.duel-card>#p2-power{display:block;margin-top:4px;color:#dceee8;font-size:7px;line-height:1.45;overflow-wrap:anywhere}

#drift-label.flow-active{color:#9b671c;font-weight:900;text-shadow:0 0 8px #ffd66e88}
body.championship-final #rival-status{border-color:#e0aa43;background:#fff0cde8;box-shadow:0 0 0 2px #fff5d5,0 0 18px #edb93f75}
body.championship-final #rival-status>span::after{content:' · CUP FINAL';color:#a66d17}
.cup-row.is-nemesis{border-color:#a67acb;background:#f6edff;color:#5e4777}

.item-slot[data-rarity="LEGENDARY"].has-item{border-color:#c6a0ff;background:rgba(248,241,255,.76);box-shadow:0 5px 16px #6b4bb13d}
.item-slot[data-rarity="LEGENDARY"] b{color:#8a67d4;filter:drop-shadow(0 2px 4px #c6a0ff80)}
.item-slot[data-rarity="LEGENDARY"].is-rolling{border-color:#bc8dff;box-shadow:0 0 0 3px #bd9bf07a,0 5px 0 #345c7029}

.course-preview-note{display:inline-block!important;padding:2px 6px;font-size:8px!important;letter-spacing:0!important;color:#526b72;background:#edf1df;border-radius:999px;white-space:nowrap}

.online-feedback{font-size:11px;color:#5c7882;line-height:1.5;margin:8px 0 0}.online-feedback[data-tone=error]{color:#a83b32;background:#fff0e9;border-radius:7px;padding:7px 9px}

/* Keep the complete mobile first view in a stable, non-overlapping flow. */
@media(max-width:760px){
 #menu{overflow:hidden}
 #menu[data-screen=course] .intro{display:flex;flex-direction:column;gap:7px;overflow:hidden}
 #menu[data-screen=course] .course-picker{flex:0 0 auto;grid-template-rows:14px auto;gap:4px}
 #menu[data-screen=course] .course-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,56px);align-content:start;gap:5px}
 #menu[data-screen=course] .course-grid button{min-height:56px}
 #menu[data-screen=course] .race-format{flex:0 0 auto;min-height:0;gap:4px}
 #menu[data-screen=course] .mode-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #menu[data-screen=course] .mode-picker button{min-height:43px;padding:5px 4px;text-align:center}
 #menu[data-screen=course] .mode-picker strong{font-size:9px;letter-spacing:0}
 #menu[data-screen=course] .mode-picker small{font-size:8px;line-height:1.2}
 #menu[data-screen=course] .online-panel{margin:5px 0 0;padding:8px 10px}
 #menu[data-screen=course] .online-panel>label{margin-bottom:4px}
 #menu[data-screen=course] .online-actions{gap:5px}
 #menu[data-screen=course] .online-actions input{min-width:80px;min-height:36px;padding:6px 8px;font-size:12px}
 #menu[data-screen=course] .online-actions button,#menu[data-screen=course] .online-lobby-actions button{min-height:36px;padding:6px 10px}
 #menu[data-screen=course] .online-panel #online-status{margin:5px 0;line-height:1.35}
 #menu[data-screen=course] .online-panel:has(#online-lobby:not([hidden])) #online-status{display:none}
 #menu[data-screen=course] .online-room-code{gap:5px;padding:4px 0 0}
 #menu[data-screen=course] .online-room-code>strong{font-size:20px;letter-spacing:3px}
 #menu[data-screen=course] .online-room-code button{min-height:34px;padding:5px 9px}
 #menu[data-screen=course] .online-roster{gap:4px}
 #menu[data-screen=course] .online-roster span{padding:5px 6px;font-size:9px}
 #menu[data-screen=course] .online-lobby-actions{gap:5px;margin-top:5px}
}
@media(max-width:760px) and (max-height:850px){
 #menu{inset:64px 4% 48px;grid-template-rows:35px minmax(0,1fr) 47px 12px;gap:4px}
 #menu[data-screen=course] .intro{gap:5px}
 #menu[data-screen=course] .course-grid{grid-template-rows:repeat(2,48px);gap:4px}
 #menu[data-screen=course] .course-grid button{min-height:48px;padding:3px}
 #menu[data-screen=course] .mode-picker{gap:4px}
 #menu[data-screen=course] .mode-picker button{min-height:39px;padding:4px 3px}
 #menu[data-screen=course] .online-panel{margin-top:3px;padding:6px 8px}
 #menu[data-screen=course] .online-panel #online-status{font-size:9px}
 #menu[data-screen=course] .online-room-code>strong{font-size:18px}
 #menu #start{min-height:47px}
}

/* Aurora identity and a stronger, readable first view. */
.brand{gap:12px;align-items:center}
.brand-icon{display:block;flex:none;width:48px;height:48px;border:0;padding:0;border-radius:15px;background:transparent;transform:none;box-shadow:0 7px 18px #15394b35;transition:transform .2s,filter .2s}
.brand:hover .brand-icon{transform:translateY(-2px);filter:drop-shadow(0 5px 8px #71cde05c)}
.brand-copy{display:flex;flex-direction:column;gap:5px}
.brand-name{display:block;color:#21475c;font:700 27px/.9 'Fredoka',sans-serif;letter-spacing:2.6px}
.brand-sub{display:block;margin:0;color:#456979;font:700 7px/1.2 'Noto Sans JP',sans-serif;letter-spacing:1.5px}
#menu[data-screen=course] .intro{grid-template-rows:28px 106px 32px minmax(0,1fr);row-gap:5px}
#menu[data-screen=course] .eyebrow{grid-area:1/1;gap:8px;color:#41697a;font-size:10px;letter-spacing:1.5px}
#menu[data-screen=course] .eyebrow>b{padding:4px 9px;border:1px solid #ffffffa8;border-radius:999px;background:#e6fbf5ad;color:#347f88;font:700 9px/1 'Fredoka',sans-serif;letter-spacing:1.1px}
#menu[data-screen=course] h1{grid-area:2/1;display:block;align-self:center;margin:0;color:#16394d;font-size:clamp(47px,5.2vw,68px);font-weight:700;line-height:.82;letter-spacing:-2.9px;transform:none;text-shadow:0 2px 0 #fff8e9a8}
#menu[data-screen=course] h1 em{display:inline-block;margin-top:5px;background:linear-gradient(100deg,#42cdb9 0%,#56a9e8 32%,#827ce5 58%,#c576cf 78%,#ee9d8c 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 #fff9e6bd);letter-spacing:-2.2px}
#menu[data-screen=course] .intro-ja{display:block;grid-area:3/1;align-self:center;margin:0;color:#365f70;font-size:14px;font-weight:700;letter-spacing:.2px;line-height:1.45}
#menu[data-screen=course] .course-picker{grid-area:4/1}
#menu[data-screen=course] .race-format{grid-area:1/2/5/3}
@media(max-width:760px){
 .brand{gap:9px}.brand-icon{width:42px;height:42px;border-radius:13px}.brand-copy{gap:4px}.brand-name{font-size:22px;letter-spacing:2.1px}.brand-sub{font-size:6px;letter-spacing:1.2px}
 #menu[data-screen=course] .intro{display:flex;flex-direction:column;gap:7px;overflow:hidden}
 #menu[data-screen=course] .eyebrow{display:flex;min-height:14px;font-size:8px;letter-spacing:1.25px}
 #menu[data-screen=course] .eyebrow>b{padding:3px 7px;font-size:8px}
 #menu[data-screen=course] h1{display:block;flex:none;margin:0;font-size:clamp(34px,9.2vw,42px);line-height:.84;letter-spacing:-1.6px}
 #menu[data-screen=course] h1 em{margin-top:3px;letter-spacing:-1.2px}
 #menu[data-screen=course] .intro-ja{display:block;flex:none;margin:0 0 2px;font-size:12px;line-height:1.45;letter-spacing:0}
 #menu[data-screen=course] .course-picker{flex:0 0 auto;grid-template-rows:14px auto;gap:5px;margin:0}
 #menu[data-screen=course] .course-grid{grid-template-rows:repeat(2,58px);gap:5px}
 #menu[data-screen=course] .course-grid button{min-height:58px;padding:4px 3px;border-radius:11px}
 #menu[data-screen=course] .course-grid button b{margin:4px 0 2px;font-size:9px;line-height:1.2}
 #menu[data-screen=course] .race-format{flex:0 0 auto;min-height:0;gap:5px;margin:0}
 #menu[data-screen=course] .race-format .panel-label{font-size:8px;letter-spacing:1.3px}
 #menu[data-screen=course] .mode-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #menu[data-screen=course] .mode-picker button{min-height:46px;padding:5px 3px;border-radius:10px}
 #menu[data-screen=course] .mode-picker strong{font-size:8px;letter-spacing:0}
 #menu[data-screen=course] .mode-picker small{font-size:7px;line-height:1.2}
}
@media(max-width:390px){
 .brand-name{font-size:20px}.brand-sub{font-size:5.5px;letter-spacing:1px}
 #menu[data-screen=course] .intro{gap:5px}
 #menu[data-screen=course] h1{font-size:clamp(32px,8.8vw,37px)}
 #menu[data-screen=course] .course-grid{grid-template-rows:repeat(2,54px)}
 #menu[data-screen=course] .course-grid button{min-height:54px}
 #menu[data-screen=course] .mode-picker button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.brand-icon{transition:none}}

/* Item archive and readable live power-up display. */
#menu[data-screen=items] .intro{display:none}
#menu[data-screen=items] .setup{align-self:stretch;justify-self:center;width:min(100%,900px);padding:15px;overflow:hidden}
#menu #items-panel{display:none}
#menu[data-screen=items] #driver-panel,#menu[data-screen=items] #settings-panel{display:none}
#menu[data-screen=items] #items-panel{display:flex;flex-direction:column;gap:10px;min-height:0;height:100%}
.item-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.item-guide-heading span{color:#9a7542;font:700 8px 'Fredoka',sans-serif;letter-spacing:1.3px}
.item-guide-heading h2{margin:3px 0 0;color:#24495c;font:700 23px/1 'Fredoka','Noto Sans JP',sans-serif}
.item-guide-heading p{margin:0;color:#68808b;font-size:9px;line-height:1.5;text-align:right}
.item-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:7px;min-height:0;flex:1}
.item-guide-card{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0;min-height:0;padding:6px 8px;border:1px solid #d8e3dd;border-radius:11px;background:linear-gradient(145deg,#fffef9,#f6fbf3);color:#29495a}
.item-guide-card>b{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffffbd;border-radius:10px;background:#fff2d6;box-shadow:0 2px 5px #25495c17;color:#d18c2e;font-size:21px;line-height:1}
.item-guide-card>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.item-guide-card strong{overflow:hidden;color:#29495a;font-size:10px;font-weight:900;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.item-guide-card small{overflow:hidden;color:#6a8288;font-size:8px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.item-guide-card>i{align-self:start;padding:3px 4px;border-radius:5px;background:#edf3ed;color:#70827b;font:700 6px 'Fredoka',sans-serif;letter-spacing:.3px;font-style:normal}
.item-guide-card[data-item=SHIELD]>b,.item-guide-card[data-item=DECOY]>b,.item-guide-card[data-item=GALE_FAN]>b,.item-guide-card[data-item=COIN_MAGNET]>b,.item-guide-card[data-item=PRISM_MIRROR]>b,.item-guide-card[data-item=REWIND_SPOOL]>b,.item-guide-card[data-item=TIDE_SURF]>b,.item-guide-card[data-item=DRAFT_BEACON]>b{background:#e9f7f4;color:#398b8c}
.item-guide-card[data-item=PULSE]>b,.item-guide-card[data-item=CHAIN_SPARK]>b,.item-guide-card[data-item=METEOR_MARKER]>b{background:#f0eaff;color:#8067c3}
.item-guide-card[data-item=AURORA_SWAP]>b{background:linear-gradient(145deg,#d8faf3,#eee4ff 55%,#ffe6df);color:#7568c1}
.item-guide-card[data-item=BOOST]>i{background:#fff1d2;color:#a97923}
.item-guide-card[data-item=PULSE]>i,.item-guide-card[data-item=CHAIN_SPARK]>i,.item-guide-card[data-item=METEOR_MARKER]>i{background:#f0eaff;color:#8067c3}
.item-guide-card[data-item=AURORA_SWAP]>i{background:#e9e2ff;color:#6e55ae}
.item-slot #item-name{display:block;overflow:hidden;color:#29495a;font-size:10px;font-weight:900;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.item-slot #item{line-height:1}
.item-slot.is-rolling #item-name{color:#355d92}
.item-slot[data-rarity=LEGENDARY] #item-name{color:#7254b0}

@media(max-width:760px){
 .setup-tabs button{max-width:none;flex:1 1 0;padding-inline:4px;font-size:10px}
 #menu[data-screen=items] .setup{width:100%;padding:10px;gap:7px}
 #menu[data-screen=items] #items-panel{gap:7px}
 .item-guide-heading h2{font-size:19px}
 .item-guide-heading p{font-size:8px}
 .item-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));gap:5px}
 .item-guide-card{grid-template-columns:30px minmax(0,1fr) auto;gap:5px;padding:4px 6px;border-radius:9px}
 .item-guide-card>b{width:29px;height:29px;border-radius:8px;font-size:18px}
 .item-guide-card strong{font-size:9px}
 .item-guide-card small{font-size:7px}
 .item-guide-card>i{font-size:5px;padding:3px 3px}
 #item-slot #item-name{font-size:8px}
}
@media(max-width:390px){
 #menu[data-screen=items] .setup{padding:8px}
 .item-guide-grid{gap:4px}
 .item-guide-card{grid-template-columns:26px minmax(0,1fr);gap:4px;padding:3px 5px}
 .item-guide-card>b{width:25px;height:25px;font-size:16px}
 .item-guide-card>i{display:none}
 .item-guide-card strong{font-size:8px}
 .item-guide-card small{font-size:6px}
 .item-guide-heading h2{font-size:17px}
 #item-slot #item-name{font-size:7px}
}
@media(max-width:760px){
 #item-slot{left:4%;bottom:82px;width:80px;min-height:64px;padding:4px}
 #item-slot #item{font-size:24px}
 #skill-slot{left:calc(4% + 88px);bottom:82px;width:52px;min-height:58px}
}
@media(max-width:390px){
 #item-slot{left:4%;width:76px;min-height:62px}
 #skill-slot{left:calc(4% + 83px);width:52px}
}

/* Aurora art direction: deep polar-night surfaces, with mint and ice-blue light. */
body{background:#08172d;color:#edfaff}
.vignette{background:linear-gradient(90deg,#07162fee 0%,#0a1b32e8 31%,#0d263c9c 57%,#10243c12 100%),url('./assets/aurora-world.webp') center/cover no-repeat}
.brand{color:#f1fbff;text-shadow:0 2px 18px #04132899}
.brand-icon{color:#0b2940;box-shadow:0 4px 0 #279b9b}
.brand-sub{color:#a8d2dc}
.eyebrow{color:#b5e2e2}
.eyebrow>span{background:#79ebd0;box-shadow:0 0 14px #65efd788}
h1{color:#f3fbff;text-shadow:0 5px 26px #07172a88}
h1 em{background:linear-gradient(100deg,#84f3cf 5%,#6de3ef 48%,#a6a4ff 96%);background-clip:text;color:transparent;text-shadow:none}
.intro-ja{color:#edfcff}
.description,.race-details,.quick-controls,.best{color:#bad0dc}
.race-details b{color:#eafffc}
.primary{background:linear-gradient(105deg,#8bf0d0,#78e1e7);border:1px solid #c7fff2;color:#09263b;box-shadow:0 4px 0 #258c91,0 12px 30px #44d9c32b}
.primary:hover{background:linear-gradient(105deg,#a8f6db,#a0f0ee)}
.primary:active{box-shadow:0 1px 0 #258c91}
.setup,.online-panel{background:#0b2038e8;border:1px solid #b5f0e44d;color:#effaff;box-shadow:0 18px 50px #020b1b66;backdrop-filter:blur(18px)}
.panel-label,.setup>p,.stats label,.options label,.controls-guide p,.controls-guide small,.online-panel #online-status,.online-roster span{color:#aec8d5}
#pilot-name{color:#99c4d1}
.setup h2{color:#f2fbff}
.racer-stamp{color:#8cebd4;border-color:#69d8cf}
.swatches button,.course-grid button,.mode-picker button{background:#112b43;border-color:#436477;color:#deeff5}
.swatches button.selected,.course-grid button.selected,.mode-picker button.selected{border-color:#83efd4;background:#183e50;box-shadow:0 3px 0 #1b777e;color:#fff}
.options select,.online-lobby-actions select{background:#112b43;border-color:#436477;color:#effaff}
.personality{background:#102d43;border:1px solid #8de5d235}
.personality small{color:#aec8d5}
.personality>span{color:#8be8d4}
.controls-guide{border-color:#426173}
footer{color:#d7edf2}
footer>span{background:#0a2034c9;border:1px solid #b3e9dd3d}
.lap,.item-slot,.drift,.course-tag,.header-right button{background:#0a2034eb;border-color:#a9e8e14d;color:#ecf9ff;box-shadow:0 5px 18px #03112155}
.lap span,.item-slot small{color:#a9c8d4}
.lap b{color:#f2fbff}
.coin-counter{color:#8df0d6!important}
.item-slot.has-item{background:#123b48;border-color:#8cebd4}
.item-slot.has-item b{color:#9af2d9}
.speed-bar{background:#d8f4f166}
.speed-bar i{background:linear-gradient(90deg,#80f1cb,#83e8fb,#a59fff)}
.drift{border-color:#9ce9e14d}
.drift>div{background:#496578}
.drift i{background:linear-gradient(90deg,#77e6f2,#9c9aff)}
#announcement:not(:empty){background:#0a2138e8;border-color:#8fe8db66;color:#f2fcff}
#countdown{color:#8bf0d0;-webkit-text-stroke-color:#eaffff;filter:drop-shadow(0 8px 0 #07172a99)}
#touch button{background:#102b43ed;border-color:#c8f4ec88;color:#effaff}
#touch button[data-input=accelerate]{background:#82ebd3;color:#09263b}
#touch button.held{background:#a7f5e2}
#overlay{background:#041226a8}
.modal{background:#0b2038;border-color:#8debd755;color:#effaff;box-shadow:0 15px 40px #020b1b88}
.modal .eyebrow,.modal>p{color:#b4cbd5}
.modal h2{color:#f3fbff}
.secondary{background:#102b43;border-color:#456576;color:#effaff}
.secondary:hover{background:#173b50}
#results p,.cup-row{color:#b7ccd7;border-color:#355466}
#results .you,.cup-row.is-you{background:#1d4651;border-color:#7be7d1;color:#f2ffff}
.online-actions input{background:#081a2f;border-color:#436477;color:#f4ffff}
.online-roster span{background:#112d43}
.online-room-code>span{color:#aac8d4}
.online-room-code>strong{color:#93f0d8}
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#84f1d6}
@media(max-width:760px){
 .vignette{background:linear-gradient(90deg,#07162ff0 0%,#0a1b32dc 47%,#0d263c80 78%,#10243c2e 100%),url('./assets/aurora-world.webp') 60% center/cover no-repeat}
 .setup{box-shadow:0 12px 36px #020b1b88}
}
.finish-showcase[hidden]{display:none}
.finish-showcase{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:20px;min-height:118px;margin:-5px 0 16px;padding:8px 16px;border:1px solid #b8fff044;border-radius:18px;background:linear-gradient(112deg,#0f3546ee,#153858ee 56%,#302b59e8);box-shadow:inset 0 1px #ffffff1f,0 12px 28px #020a1a66;overflow:hidden;animation:finish-banner .72s cubic-bezier(.16,1,.3,1) both}
.finish-showcase::before{content:"";position:absolute;inset:-90% -35%;z-index:-1;background:conic-gradient(from 14deg at 50% 50%,transparent 0 18%,#72f1d315 22%,transparent 28% 46%,#84c9ff16 50%,transparent 56% 75%,#b7a2ff14 79%,transparent 85%);animation:finish-rays 14s linear infinite}
.finish-showcase::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 17% 20%,#b6fffaa6 0 2px,transparent 3px),radial-gradient(circle at 82% 25%,#ffd978d9 0 2px,transparent 3px),radial-gradient(circle at 73% 82%,#f5a7ffa0 0 2px,transparent 3px),radial-gradient(circle at 29% 76%,#d4f8ffae 0 1.5px,transparent 3px);opacity:.8;animation:finish-sparkle 1.4s ease-in-out infinite alternate}
.finish-medal{position:relative;display:grid;place-content:center;justify-items:center;flex:0 0 88px;width:88px;height:88px;border:1px solid #ffe7a8aa;border-radius:50%;background:radial-gradient(circle at 35% 27%,#fff4ba,#f4bf52 38%,#b77928 76%,#5f472a);box-shadow:0 0 0 5px #ffe2a51a,0 0 36px #ffcf666e,inset 0 2px 8px #fff8cf;transform:rotate(-8deg);animation:finish-medal .85s cubic-bezier(.2,1.5,.4,1) .08s both}
.finish-medal::before{content:"";position:absolute;inset:6px;border:1px solid #fff9d6ad;border-radius:50%;box-shadow:inset 0 0 12px #ffffff55}
.finish-medal>span{position:absolute;top:5px;right:9px;color:#fff9d6;font-size:14px;text-shadow:0 0 12px #fff}
.finish-medal>b{color:#17384a;font:900 35px/.95 'Fredoka',sans-serif;text-shadow:0 1px #fff7c5}
.finish-medal>small{margin-top:4px;color:#3a5260;font:700 7px/1 'Fredoka',sans-serif;letter-spacing:1.4px}
.finish-copy{display:grid;gap:5px;min-width:0;text-align:left}
.finish-copy>span{color:#a6f5e6;font:700 8px/1.2 'Fredoka',sans-serif;letter-spacing:2.5px}
.finish-copy>strong{color:#fff9e9;font:900 clamp(15px,3.4vw,22px)/1.1 'Fredoka',sans-serif;letter-spacing:.4px;text-shadow:0 2px 18px #a5f8e777}
.finish-copy>i{width:45px;height:2px;border-radius:4px;background:linear-gradient(90deg,#ffda75,#7cf1d4,transparent);box-shadow:0 0 12px #7cf1d4a8}
.finish-copy>small{color:#d0e5e8;font-size:10px;font-weight:700}
.finish-spark{position:absolute;color:#ffdf86;text-shadow:0 0 18px #fff3b9;animation:finish-sparkle .9s ease-in-out infinite alternate}
.finish-spark-a{top:15px;left:17px;font-size:14px}.finish-spark-b{right:17px;bottom:13px;color:#9ef8e6;font-size:19px;animation-delay:.35s}
.finish-celebration #overlay{background:radial-gradient(ellipse at 50% 10%,#58e5cb36,transparent 56%),#031426c9;backdrop-filter:blur(7px) saturate(1.24)}
.finish-celebration #overlay::before{content:"";position:absolute;inset:-38%;pointer-events:none;background:conic-gradient(from -32deg at 50% 50%,transparent 0 8%,#91ffe70c 12%,transparent 17% 28%,#b6d9ff0c 32%,transparent 38% 56%,#ffdc800c 60%,transparent 66% 83%,#9fffe40c 88%,transparent 94%);animation:finish-rays 24s linear infinite}
.finish-celebration .modal{position:relative;max-height:94dvh;overflow:auto;width:min(500px,92vw);border:1px solid #a9f6e066;background:linear-gradient(150deg,#102c45f5,#09192ff7);box-shadow:0 24px 90px #020914b3,0 0 60px #51e6c51c,inset 0 1px #ffffff24;animation:finish-card .72s cubic-bezier(.16,1,.3,1) both}
.finish-celebration .modal .eyebrow{color:#a6f5e6;letter-spacing:2px}
.finish-celebration .modal h2{margin-top:13px;color:#fff8e7;text-shadow:0 3px 24px #7deed477}
.finish-celebration .modal>p{color:#c7dce2}
.finish-celebration #results p{border-color:#ffffff14;color:#d1e4e9}
.finish-celebration #results .you{background:linear-gradient(90deg,#174d58,#1d4651);color:#f5ffff;box-shadow:inset 3px 0 #7be7d1}
.finish-celebration .modal .primary{box-shadow:0 4px 0 #aa772e,0 0 26px #ffd47822}
@keyframes finish-banner{from{opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes finish-card{from{opacity:0;transform:translateY(28px) scale(.965);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes finish-medal{0%{opacity:0;transform:scale(.35) rotate(-32deg)}75%{transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:rotate(-8deg)}}
@keyframes finish-rays{to{transform:rotate(360deg)}}
@keyframes finish-sparkle{from{opacity:.35;transform:scale(.82)}to{opacity:1;transform:scale(1.16)}}
@media(max-width:760px){.finish-showcase{gap:14px;min-height:82px;margin:-3px 0 10px;padding:5px 12px}.finish-medal{flex-basis:68px;width:68px;height:68px}.finish-medal>b{font-size:29px}.finish-medal>span{font-size:11px}.finish-copy>span{font-size:7px;letter-spacing:1.8px}.finish-copy>small{font-size:9px}.finish-spark-a{top:8px;left:9px}.finish-spark-b{right:9px;bottom:7px}.finish-celebration .modal{padding:15px 17px}.finish-celebration .modal h2{margin:10px 0 7px;font-size:22px}.finish-celebration #results{margin:8px 0}.finish-celebration #results p{padding:5px 5px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.finish-showcase,.finish-showcase::before,.finish-showcase::after,.finish-medal,.finish-spark,.finish-celebration .modal,.finish-celebration #overlay::before{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.finish-showcase{flex-wrap:wrap;gap:8px 20px}
.finish-lineup{position:relative;z-index:1;display:flex;align-items:center;gap:10px;flex:1 0 100%;min-width:0;padding-top:7px;border-top:1px solid #d4fff026}
.finish-lineup-title{flex:0 0 auto;color:#9ff5e5;font:800 7px/1 'Fredoka',sans-serif;letter-spacing:1.2px;text-shadow:0 0 12px #7bf4df88}
.finish-cast{display:flex;align-items:center;justify-content:space-between;gap:3px;flex:1;min-width:0}
.finish-cast-member{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:2px;color:#d8edf0;animation:finish-cast-arrive .45s cubic-bezier(.16,1,.3,1) both}
.finish-cast-member:nth-child(2){animation-delay:.05s}.finish-cast-member:nth-child(3){animation-delay:.1s}.finish-cast-member:nth-child(4){animation-delay:.15s}.finish-cast-member:nth-child(5){animation-delay:.2s}.finish-cast-member:nth-child(6){animation-delay:.25s}
.finish-cast-avatar{display:grid;place-items:center;width:27px;height:27px;border:1px solid color-mix(in srgb,var(--cast-color) 75%,white);border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff8e9,var(--cast-color) 48%,#14233a 100%);box-shadow:0 0 13px color-mix(in srgb,var(--cast-color) 55%,transparent),inset 0 1px 5px #fff8;font-size:15px;line-height:1}
.finish-cast-member b{overflow:hidden;max-width:100%;color:#d8edf0;font:700 7px/1.1 'Fredoka',sans-serif;text-overflow:ellipsis;white-space:nowrap}
.finish-cast-member.is-player .finish-cast-avatar{border-color:#fff3b4;box-shadow:0 0 0 2px #fff1b53b,0 0 18px color-mix(in srgb,var(--cast-color) 75%,#ffe9a1)}
.finish-cast-member.is-player b{color:#fff0ad}
@keyframes finish-cast-arrive{from{opacity:0;transform:translateY(8px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){.finish-showcase{gap:7px 12px;min-height:112px}.finish-lineup{gap:7px;padding-top:6px}.finish-lineup-title{font-size:6px;letter-spacing:.8px}.finish-cast-avatar{width:24px;height:24px;font-size:14px}.finish-cast-member b{font-size:6.5px}.finish-celebration .modal{max-height:94dvh}}
@media(prefers-reduced-motion:reduce){.finish-cast-member{animation:none!important}}
#countdown{transform-origin:50% 54%;text-shadow:0 6px 0 #214e6270,0 0 30px #a6fff0a8}
#countdown{z-index:9}
#countdown:not(.countdown-go){font-size:clamp(88px,18vw,132px)}
#countdown.countdown-pop:not(.countdown-go){animation:countdown-number-pop .24s ease-out both}
@keyframes countdown-number-pop{0%{opacity:1;transform:scale(.9)}65%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
#countdown.countdown-pop{animation:countdown-pop .62s cubic-bezier(.18,1.45,.36,1) both}
#countdown.countdown-pop::before,#countdown.countdown-pop::after{position:absolute;top:9%;color:#fff0a8;font-size:.22em;line-height:1;text-shadow:0 0 16px #fff8cc;animation:countdown-spark .68s ease-out both}
#countdown.countdown-pop::before{content:"✦";left:calc(50% - 112px)}
#countdown.countdown-pop::after{content:"✧";left:calc(50% + 82px);color:#ffc4e9;animation-delay:.08s}
#countdown.countdown-go{font-size:clamp(54px,14vw,104px);letter-spacing:.02em;color:#ff86bb;-webkit-text-stroke:4px #fff8e8;filter:drop-shadow(0 7px 0 #743c7066) drop-shadow(0 0 23px #ffb6dfcc)}
#countdown.countdown-go::before{content:"✦ いっくよ〜！ ✦";left:0;right:0;top:-.9em;width:100%;font:700 clamp(13px,3.5vw,25px)/1.1 'Fredoka','Noto Sans JP',sans-serif;letter-spacing:.06em;color:#fff6b5;-webkit-text-stroke:0;text-shadow:0 2px 0 #a7519a,0 0 16px #ffe7a8;animation:countdown-go-caption .72s cubic-bezier(.18,1.45,.36,1) both}
#countdown.countdown-go::after{content:"✧";left:calc(50% + .9em);top:-.12em;color:#fff3a6;text-shadow:0 0 20px #fff1a1;animation:countdown-spark .72s ease-out both}
@keyframes countdown-go-caption{0%{opacity:0;transform:translateY(10px) scale(.6)}72%{opacity:1;transform:translateY(-3px) scale(1.12)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes countdown-pop{0%{opacity:0;transform:translateY(18px) scale(.48) rotate(-9deg);filter:blur(5px)}68%{opacity:1;transform:translateY(-4px) scale(1.12) rotate(3deg);filter:blur(0)}100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes countdown-spark{0%{opacity:0;transform:scale(.1) rotate(-35deg)}55%{opacity:1;transform:scale(1.25) rotate(12deg)}100%{opacity:.75;transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){#countdown.countdown-pop,#countdown.countdown-pop::before,#countdown.countdown-pop::after{animation:none!important}}
/* First view: bright aurora clubhouse with a playful, legible course picker. */
body:not(.racing) .vignette{background:radial-gradient(ellipse at 82% 8%,#ff9bd52e 0,transparent 38%),radial-gradient(ellipse at 14% 74%,#54efd32b 0,transparent 44%),linear-gradient(90deg,#08172fc9 0%,#0b1d34a8 36%,#122a4566 72%,#291b4b55 100%),url('./assets/aurora-world.webp') center/cover no-repeat}
#menu[data-screen=course] .intro{position:relative;isolation:isolate;padding:18px 20px;border-radius:27px}
#menu[data-screen=course] .intro::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid #d9fff36e;border-radius:inherit;background:linear-gradient(132deg,#102b48e8 0%,#102541e3 54%,#30264bdf 100%);box-shadow:0 20px 58px #02091f6b,inset 0 1px #ffffff2b;backdrop-filter:blur(15px) saturate(1.2)}
#menu[data-screen=course] .intro::after{content:"";position:absolute;z-index:-1;right:4%;top:-20%;width:30%;height:70%;border-radius:50%;background:radial-gradient(ellipse,#80eedb1c 0%,#a682ec12 42%,transparent 72%);pointer-events:none}
#menu[data-screen=course] .eyebrow{color:#d5f5f0;text-shadow:0 1px 12px #55ddc266}
#menu[data-screen=course] .eyebrow>span{height:5px;background:linear-gradient(90deg,#76f0cf,#a68dff,#ff9fca);box-shadow:0 0 15px #6be8d688}
#menu[data-screen=course] .eyebrow>b{background:linear-gradient(105deg,#b8fff0,#d5eaff 55%,#f5d7f7);border-color:#fff9;color:#285d70;box-shadow:0 2px 12px #5be1d52e}
#menu[data-screen=course] h1{color:#fff8f1;text-shadow:0 3px 0 #0d284877,0 8px 24px #07172b7a}
#menu[data-screen=course] h1 em{background:linear-gradient(100deg,#77f2cf 2%,#78ddf7 27%,#a5a2ff 54%,#ed9fe0 78%,#ffc478 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #162b4b) drop-shadow(0 0 18px #9cefe84a)}
#menu[data-screen=course] .intro-ja{color:#f4fbff;text-shadow:0 2px 12px #071a30a8}
#menu[data-screen=course] .panel-label{color:#b9e8e7;letter-spacing:1.4px}
#menu[data-screen=course] .panel-label span{color:#93b7cb}
#menu[data-screen=course] .course-grid button{border-width:1.5px;box-shadow:inset 0 1px #ffffffd9,0 4px 12px #07182c45;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
#menu[data-screen=course] .course-grid button:nth-child(1){--course-accent:#74f2d0}
#menu[data-screen=course] .course-grid button:nth-child(2){--course-accent:#8ce5fa}
#menu[data-screen=course] .course-grid button:nth-child(3){--course-accent:#80c9ff}
#menu[data-screen=course] .course-grid button:nth-child(4){--course-accent:#b3a0ff}
#menu[data-screen=course] .course-grid button:nth-child(5){--course-accent:#f0a9f2}
#menu[data-screen=course] .course-grid button:nth-child(6){--course-accent:#87f1e7}
#menu[data-screen=course] .course-grid button.selected{border-color:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--course-accent) 48%,transparent),0 7px 17px color-mix(in srgb,var(--course-accent) 27%,transparent),inset 0 1px #fff;transform:translateY(-2px)}
#menu[data-screen=course] .course-grid button:hover{filter:saturate(1.12);transform:translateY(-2px)}
#menu[data-screen=course] .course-grid button svg path{stroke:color-mix(in srgb,var(--course-accent,#62cdb7) 66%,#355367)}
#menu[data-screen=course] .course-grid button.selected svg path{stroke:color-mix(in srgb,var(--course-accent) 72%,#29475b)}
#menu[data-screen=course] .course-grid button small{color:#526a78}
#menu[data-screen=course] .course-picker>p{color:#d2e9ee}
#menu[data-screen=course] .mode-picker button{border:1px solid #fff9;color:#254357;box-shadow:inset 0 1px #fff,0 4px 11px #07182c3d;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
#menu[data-screen=course] .mode-picker button[data-mode=single]{--mode-accent:#7df0cf}
#menu[data-screen=course] .mode-picker button[data-mode=cup]{--mode-accent:#b4a2ff}
#menu[data-screen=course] .mode-picker button[data-mode=local]{--mode-accent:#86dff4}
#menu[data-screen=course] .mode-picker button[data-mode=relay]{--mode-accent:#9debc9}
#menu[data-screen=course] .mode-picker button[data-mode=online]{--mode-accent:#ecadf1}
#menu[data-screen=course] .mode-picker button.selected{border-color:#fff;background:linear-gradient(120deg,#fff0a7,#ffc3d9 56%,#c3caff);box-shadow:0 0 0 2px #fff5,0 7px 17px #b08ee052,inset 0 1px #fff;transform:translateY(-1px)}
#menu[data-screen=course] .mode-picker button:hover{filter:saturate(1.12);transform:translateY(-2px)}
#menu[data-screen=course] .mode-picker strong::before{display:inline-block;margin-right:5px;font-size:1.05em;vertical-align:-1px}
#menu[data-screen=course] .mode-picker button[data-mode=single] strong::before{content:"🏁"}
#menu[data-screen=course] .mode-picker button[data-mode=cup] strong::before{content:"🏆"}
#menu[data-screen=course] .mode-picker button[data-mode=local] strong::before{content:"🎮"}
#menu[data-screen=course] .mode-picker button[data-mode=relay] strong::before{content:"🤝"}
#menu[data-screen=course] .mode-picker button[data-mode=online] strong::before{content:"🌐"}
#menu[data-screen=course] .mode-picker small{color:#4d6977}
#menu #start{background:linear-gradient(108deg,#ffd16e 0%,#ffabd0 52%,#b3c4ff 100%);border:1.5px solid #fff;color:#253a53;box-shadow:0 4px 0 #b87885,0 12px 30px #ec9cc45c,inset 0 1px #fff;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
#menu #start:hover{background:linear-gradient(108deg,#ffe08c,#ffbce0 52%,#c4d1ff);filter:saturate(1.12);transform:translateY(-3px);box-shadow:0 6px 0 #b87885,0 16px 32px #ec9cc46e,inset 0 1px #fff}
#menu #start:active{transform:translateY(2px);box-shadow:0 2px 0 #b87885}
#menu #start>span{color:#25465e}
#menu #best{color:#c1d8e3}
@media(max-width:760px){
 #menu[data-screen=course] .intro{grid-template-columns:minmax(0,1fr);grid-template-rows:15px 52px 16px minmax(119px,1fr) 107px;gap:3px;padding:9px 11px;border-radius:22px}
 #menu[data-screen=course] .eyebrow{grid-area:1/1;gap:6px;font-size:8px;letter-spacing:1px}
 #menu[data-screen=course] h1{grid-area:2/1;align-self:center;font-size:clamp(39px,11.5vw,46px);line-height:.82;letter-spacing:-2.1px}
 #menu[data-screen=course] h1 em{margin-top:2px;letter-spacing:-1.8px}
 #menu[data-screen=course] .intro-ja{grid-area:3/1;align-self:center;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #menu[data-screen=course] .course-picker{grid-area:4/1;grid-template-rows:14px minmax(0,1fr) 13px;gap:3px;margin:0;min-height:0}
 #menu[data-screen=course] .panel-label{font-size:8px;letter-spacing:1px}
 #menu[data-screen=course] .course-preview-note{font-size:7px!important;letter-spacing:0}
 #menu[data-screen=course] .course-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(42px,1fr));gap:4px;margin:0;min-height:0}
 #menu[data-screen=course] .course-grid button{min-height:42px;padding:5px 7px;border-radius:11px}
 #menu[data-screen=course] .course-grid button b{font-size:9px;margin:0 10px 0 0}
 #menu[data-screen=course] .course-grid button small,#menu[data-screen=course] .course-grid svg{display:none}
 #menu[data-screen=course] .course-grid button .course-icon{top:4px;right:5px;font-size:11px}
 #menu[data-screen=course] .course-picker>p{min-height:0;margin:0;font-size:9px;line-height:1.3;white-space:nowrap}
 #menu[data-screen=course] .race-format{grid-area:5/1;display:grid;grid-template-rows:13px minmax(0,1fr);gap:4px;align-self:stretch;margin:0;min-height:0}
 #menu[data-screen=course] .mode-picker{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(42px,1fr));gap:4px;margin:0;min-height:0}
 #menu[data-screen=course] .mode-picker button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:42px;padding:3px 4px;border-radius:10px;text-align:center}
 #menu[data-screen=course] .mode-picker strong{font-size:8px;letter-spacing:.15px;white-space:nowrap}
 #menu[data-screen=course] .mode-picker strong::before{margin-right:3px;font-size:9px}
 #menu[data-screen=course] .mode-picker small{margin:0;font-size:7px;line-height:1;white-space:nowrap}
 #menu[data-screen=course] .race-format>p{display:none}
 #menu #start{min-height:47px;border-radius:16px;padding:10px 17px;font-size:13px}
 #menu #best{font-size:8px}
}
@media(max-height:650px) and (max-width:760px){#menu[data-screen=course] .intro{grid-template-rows:14px 45px 14px minmax(105px,1fr) 91px;gap:2px;padding:7px 9px}#menu[data-screen=course] h1{font-size:clamp(35px,10vw,41px)}#menu[data-screen=course] .course-grid{grid-template-rows:repeat(2,minmax(36px,1fr))}#menu[data-screen=course] .course-grid button{min-height:36px}#menu[data-screen=course] .mode-picker{grid-template-rows:repeat(2,minmax(36px,1fr))}#menu[data-screen=course] .mode-picker button{min-height:36px}}
@media(prefers-reduced-motion:reduce){#menu[data-screen=course] .course-grid button,#menu[data-screen=course] .mode-picker button,#menu #start{transition:none}}
#menu #start{position:relative;justify-content:center;text-align:center}
#menu #start>span{position:absolute;right:18px;margin:0;color:#25465e}
@media(max-width:760px){#menu #start>span{right:15px}}
@media(min-height:760px) and (max-width:760px){
 #menu[data-screen=course] .intro{justify-content:stretch;gap:5px}
 #menu[data-screen=course] .course-picker{flex:1 1 0;min-height:190px;grid-template-rows:14px minmax(0,1fr)}
 #menu[data-screen=course] .course-grid{grid-template-rows:repeat(2,minmax(82px,1fr));gap:6px}
 #menu[data-screen=course] .course-grid button{min-height:82px;padding:5px 4px}
 #menu[data-screen=course] .course-grid button b{min-height:2.25em;margin:4px 0 2px;font-size:8px;line-height:1.15}
 #menu[data-screen=course] .course-grid button small{display:block;font-size:7px;line-height:1.2;white-space:nowrap}
 #menu[data-screen=course] .course-grid svg{display:block;width:43px;height:21px;margin:1px auto 0}
 #menu[data-screen=course] .course-picker>p{display:none}
 #menu[data-screen=course] .race-format{flex:1 1 0;min-height:155px}
 #menu[data-screen=course] .mode-picker{flex:1 1 0;grid-template-rows:repeat(2,minmax(52px,1fr));gap:6px}
 #menu[data-screen=course] .mode-picker button{min-height:52px}
}
#home-racer{display:none}
@media(min-height:800px) and (max-width:760px){
 #menu[data-screen=course] .intro{justify-content:space-between;gap:4px}
 #menu[data-screen=course] .course-picker{flex:0 0 190px}
 #menu[data-screen=course] .race-format{flex:0 0 147px}
 #menu[data-screen=course] .mode-picker{flex:1 1 auto;grid-template-rows:repeat(2,minmax(52px,1fr))}
 #menu[data-screen=course] .mode-picker button{min-height:52px}
 #home-racer{display:flex;flex:0 0 62px;align-items:center;gap:10px;min-width:0;padding:6px 10px;border:1px solid #d8fff366;border-radius:16px;background:linear-gradient(105deg,#d5fff014,#fff0fa10 58%,#d9ddff19);box-shadow:inset 0 1px #ffffff24,0 5px 18px #05112624;overflow:hidden}
 .home-racer-avatar{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--kart-color) 55%,white);border-radius:14px;background:radial-gradient(circle at 32% 22%,#fff9,var(--kart-color) 78%);box-shadow:0 3px 9px color-mix(in srgb,var(--kart-color) 34%,transparent),inset 0 1px #fff9;font-size:25px;animation:home-racer-bob 2.8s ease-in-out infinite}
 .home-racer-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px;line-height:1.15}
 .home-racer-copy small{color:#b9e4e8;font-size:8px;letter-spacing:.08em}
 .home-racer-copy strong{color:#fff5da;font-size:12px}
 .home-racer-copy em{overflow:hidden;color:#d3e8ed;font-size:8px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
 .home-racer-ready{flex:none;color:#a7e8dc;font:600 7px 'Fredoka',sans-serif;letter-spacing:.7px}
 .home-racer-ready b{margin-left:2px;color:#ffdb80;font-size:11px}
}
@keyframes home-racer-bob{50%{transform:translateY(-3px) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.home-racer-avatar{animation:none!important}}

#menu #start{position:relative;justify-content:center;text-align:center}
#menu #start>span{position:absolute;right:18px;margin:0;color:#25465e}
@media(max-width:760px){#menu #start>span{right:15px}}

body:not(.racing) header .brand-name{background:linear-gradient(100deg,#77f2cf 2%,#78ddf7 27%,#a5a2ff 54%,#ed9fe0 78%,#ffc478 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 9px #7de6e766)}


/* Give the mobile item archive more visual weight without adding page scroll. */
#menu[data-screen=items] .setup{display:flex;flex-direction:column;height:100%;min-height:0}
#menu[data-screen=items] #items-panel{flex:1 1 0;height:auto}
@media(max-width:760px){
 #menu[data-screen=items] #items-panel{gap:clamp(5px,1.6vh,9px)}
 .item-guide-grid{gap:clamp(4px,1.5vw,7px)}
 .item-guide-card{grid-template-columns:clamp(34px,11vw,46px) minmax(0,1fr) auto;gap:clamp(4px,1.4vw,7px);padding:5px 7px;border-radius:11px}
 .item-guide-card>b{width:clamp(32px,10.5vw,44px);height:clamp(32px,10.5vw,44px);border-radius:11px;font-size:clamp(20px,6.2vw,27px)}
 .item-guide-card strong{font-size:clamp(9.5px,2.8vw,11.5px)}
 .item-guide-card small{font-size:clamp(7px,2.1vw,8.5px)}
 .item-guide-card>i{font-size:6px;padding:3px 4px}
}
@media(max-width:390px){
 .item-guide-card{grid-template-columns:clamp(37px,12vw,46px) minmax(0,1fr);gap:5px;padding:4px 6px}
 .item-guide-card>b{width:clamp(34px,11.5vw,44px);height:clamp(34px,11.5vw,44px);font-size:clamp(21px,7vw,28px)}
 .item-guide-card strong{font-size:clamp(8.5px,2.45vw,9.5px)}
 .item-guide-card small{font-size:clamp(6.5px,1.85vw,7.3px)}
}

/* Aurora-spectrum home palette: midnight glass with distinct, luminous route colors. */
#menu[data-screen=course] .setup-tabs button{
 border-color:#a9fff044;background:linear-gradient(145deg,#102842e8,#172a45e8);color:#c4e5f2;
 box-shadow:inset 0 1px #ffffff18,0 5px 18px #03102055;backdrop-filter:blur(12px)
}
#menu[data-screen=course] .setup-tabs button.selected{
 border-color:#8dffe5;background:linear-gradient(110deg,#29cdb7,#5abde5 52%,#a18af3);
 color:#08253c;box-shadow:0 0 0 1px #85ffe788,0 0 22px #59e6d34d,inset 0 1px #ffffffa8
}
#menu[data-screen=course] .course-picker,
#menu[data-screen=course] .race-format{color:#eafaff}
#menu[data-screen=course] .course-grid button{
 border:1px solid color-mix(in srgb,var(--course-accent) 72%,#c9fff4);
 background:linear-gradient(145deg,#102b47f0,#142641ec 62%,color-mix(in srgb,var(--course-accent) 22%,#172541));
 color:#f1fbff;box-shadow:inset 0 1px #ffffff20,0 5px 15px #030d1d66,0 0 14px color-mix(in srgb,var(--course-accent) 20%,transparent)
}
#menu[data-screen=course] .course-grid button:nth-child(1){--course-accent:#74f2d0}
#menu[data-screen=course] .course-grid button:nth-child(2){--course-accent:#8ce5fa}
#menu[data-screen=course] .course-grid button:nth-child(3){--course-accent:#80c9ff}
#menu[data-screen=course] .course-grid button:nth-child(4){--course-accent:#b3a0ff}
#menu[data-screen=course] .course-grid button:nth-child(5){--course-accent:#f0a9f2}
#menu[data-screen=course] .course-grid button:nth-child(6){--course-accent:#87f1e7}
#menu[data-screen=course] .course-grid button.selected{
 border-color:#eafffb;background:linear-gradient(135deg,color-mix(in srgb,var(--course-accent) 34%,#102b47),#172644 68%,color-mix(in srgb,var(--course-accent) 23%,#172644));
 box-shadow:0 0 0 2px color-mix(in srgb,var(--course-accent) 82%,white),0 0 24px color-mix(in srgb,var(--course-accent) 48%,transparent),inset 0 1px #ffffff55;
 transform:translateY(-2px)
}
#menu[data-screen=course] .course-grid button b{color:#f4fcff;text-shadow:0 1px 8px #071423}
#menu[data-screen=course] .course-grid button small{color:#bdd5e5}
#menu[data-screen=course] .course-grid button .course-icon{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--course-accent) 70%,transparent))}
#menu[data-screen=course] .course-grid button svg path{stroke:var(--course-accent)}
#menu[data-screen=course] .mode-picker button{
 border:1px solid #a8fff044;background:linear-gradient(140deg,#102b47ed,#182843ed);
 color:#effaff;box-shadow:inset 0 1px #ffffff20,0 5px 14px #030d1d55;backdrop-filter:blur(8px)
}
#menu[data-screen=course] .mode-picker button[data-mode=single]{--mode-accent:#7df0cf}
#menu[data-screen=course] .mode-picker button[data-mode=cup]{--mode-accent:#b4a2ff}
#menu[data-screen=course] .mode-picker button[data-mode=local]{--mode-accent:#86dff4}
#menu[data-screen=course] .mode-picker button[data-mode=relay]{--mode-accent:#9debc9}
#menu[data-screen=course] .mode-picker button[data-mode=online]{--mode-accent:#ecadf1}
#menu[data-screen=course] .mode-picker button.selected{
 border-color:color-mix(in srgb,var(--mode-accent) 78%,white);
 background:linear-gradient(120deg,color-mix(in srgb,var(--mode-accent) 28%,#102b47),#192746 68%,color-mix(in srgb,var(--mode-accent) 22%,#1c2541));
 color:#fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--mode-accent) 58%,transparent),0 0 20px color-mix(in srgb,var(--mode-accent) 25%,transparent),inset 0 1px #ffffff40
}
#menu[data-screen=course] .mode-picker button:hover{border-color:var(--mode-accent,#8dffe5);box-shadow:0 0 17px color-mix(in srgb,var(--mode-accent,#8dffe5) 35%,transparent),inset 0 1px #ffffff44}
#menu[data-screen=course] .mode-picker strong{color:#f3fbff}
#menu[data-screen=course] .mode-picker small{color:#b8d1e2}
#menu[data-screen=course] #start{
 border-color:#d7fff6;background:linear-gradient(105deg,#52e4c3 0%,#62d7e7 40%,#8eacf8 72%,#c4a2ef 100%);
 color:#082943;box-shadow:0 4px 0 #245b75,0 10px 28px #5fe7dd45,inset 0 1px #ffffffc9
}
#menu[data-screen=course] #start:hover{background:linear-gradient(105deg,#82f4d4,#81e6f0 42%,#a7bdff 75%,#ddb0f5);box-shadow:0 6px 0 #245b75,0 14px 34px #64e8df62,inset 0 1px #fff}
#menu[data-screen=course] #start>span{color:#10334f}
@media(prefers-reduced-motion:reduce){#menu[data-screen=course] .setup-tabs button{transition:none}}
@media(max-height:700px) and (max-width:760px){
 .item-guide-card>b{width:30px;height:30px;font-size:19px;border-radius:9px}
 .item-guide-card{grid-template-columns:33px minmax(0,1fr) auto}
}

/* Replace the sunny loading glyph with a luminous aurora portal. */
#loading{
 isolation:isolate;overflow:hidden;color:#eaffff;
 background:radial-gradient(ellipse at 50% 44%,#142c50 0%,#0a1a36 52%,#040b1d 100%);
 font-size:clamp(15px,4vw,19px);letter-spacing:.04em
}
#loading::before,#loading::after{content:"";position:absolute;z-index:-1;pointer-events:none}
#loading::before{
 inset:-32%;
 background:radial-gradient(ellipse 27% 72% at 24% 34%,#36edc928,transparent 72%),radial-gradient(ellipse 23% 68% at 49% 31%,#41d8ff2b,transparent 70%),radial-gradient(ellipse 24% 70% at 72% 33%,#a987ff2b,transparent 72%),radial-gradient(ellipse 18% 58% at 88% 45%,#f093e51b,transparent 70%);
 filter:blur(25px);animation:loading-aurora-drift 11s ease-in-out infinite alternate
}
#loading::after{
 top:14%;left:-18%;width:136%;height:38%;transform:rotate(-12deg);
 background:repeating-linear-gradient(102deg,transparent 0 9%,#81ffe70b 10% 11%,transparent 12% 19%,#91caff12 20% 21%,transparent 22% 30%);
 filter:blur(13px);mask-image:linear-gradient(transparent,#000 24% 76%,transparent);animation:loading-aurora-wave 8s ease-in-out infinite alternate
}
#loading strong{position:relative;color:#efffff;text-shadow:0 0 16px #67f5e859;font-weight:700}
.loading-orb{
 position:relative;display:block;width:clamp(96px,28vw,132px);aspect-ratio:1;border:1px solid #b9fff36b;border-radius:50%;
 background:radial-gradient(circle at 34% 29%,#d4fff2 0 2%,#67f5dc 4%,#27b8c2 13%,#355fb2 34%,#382a70 59%,#101b3b 72%);
 box-shadow:0 0 24px #61f5df70,0 0 72px #5f8dff38,inset -14px -18px 30px #06132c,inset 7px 6px 22px #d5fff34a;
 animation:loading-orb-float 3.4s ease-in-out infinite
}
.loading-orb::before,.loading-orb::after{content:"";position:absolute;inset:-12%;border:1px solid #8cffe67a;border-radius:50%;box-shadow:0 0 18px #59f0d340;transform:rotate(-24deg) scaleY(.47)}
.loading-orb::before{border-color:#8df6eea8 #b69aff4f #7ec8ff8f #a9ffe557;animation:loading-orb-ring 7s linear infinite}
.loading-orb::after{inset:-20%;border-color:#a4b4ff77 #8cffe86a #d9a8ff58 #70d9ffa8;transform:rotate(34deg) scaleY(.43);animation:loading-orb-ring 10s linear infinite reverse}
@keyframes loading-aurora-drift{to{transform:translate3d(4%,-2%,0) scale(1.08)}}
@keyframes loading-aurora-wave{to{transform:translateX(7%) rotate(-8deg);opacity:.65}}
@keyframes loading-orb-float{50%{transform:translateY(-7px) scale(1.035);filter:hue-rotate(13deg)}}
@keyframes loading-orb-ring{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.loading-orb,#loading::before,#loading::after{animation:none}}

/* Keep the two-line title optically balanced: the phrase leads, the world name anchors. */
#menu[data-screen=course] h1{
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center
}
#menu[data-screen=course] h1 .title-kicker{
 display:block;color:#dcfff7;font-size:.66em;font-weight:700;line-height:1.05;letter-spacing:.06em;
 text-shadow:0 2px 12px #70eed56b
}
#menu[data-screen=course] h1 em{display:block;margin:0;line-height:.94;letter-spacing:-.045em}

/* Mobile race HUD: compact information zones so labels never collide. */
@media(max-width:760px){
 #hud:not(.duel-mode) .position{top:82px}
 #hud:not(.duel-mode) .lap{top:80px}
 #hud:not(.duel-mode) .drift{
  top:214px;bottom:auto;left:4%;width:min(218px,calc(100vw - 174px));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;gap:5px 10px;
  padding:9px 10px;border:1px solid #9ce9e17a;border-radius:13px;
  background:rgba(5,24,44,.88)!important;box-shadow:0 6px 20px #03111f55;
  backdrop-filter:blur(10px);color:#effaff;font-size:8px;line-height:1.2
 }
 #hud:not(.duel-mode) .drift>span{grid-column:1/-1;margin:0;color:#ddf7f4;font-size:8px;text-shadow:none}
 #hud:not(.duel-mode) .drift>.drift-track{grid-column:1/-1;height:4px;margin:0;background:#557487}
 #hud:not(.duel-mode) .drift .sync-meter,
 #hud:not(.duel-mode) .drift .draft-meter,
 #hud:not(.duel-mode) .drift .apex-meter,
 #hud:not(.duel-mode) .drift>.driver-challenge{
  min-width:0;margin:0;padding:5px 0 0;border-top:1px solid #9ce9e13d;
  background:transparent;overflow:visible
 }
 #hud:not(.duel-mode) .sync-caption,
 #hud:not(.duel-mode) .sync-caption b,
 #hud:not(.duel-mode) .apex-caption,
 #hud:not(.duel-mode) .apex-caption b,
 #hud:not(.duel-mode) .driver-challenge-head{color:#b8d9e4;text-shadow:none;font-size:7px}
 #hud:not(.duel-mode) .sync-caption b,
 #hud:not(.duel-mode) .apex-caption b{color:#effaff}
 #hud:not(.duel-mode) .sync-meter small,
 #hud:not(.duel-mode) .apex-meter>small,
 #hud:not(.duel-mode) .driver-challenge>small{display:none}
 #hud:not(.duel-mode) .sync-track,
 #hud:not(.duel-mode) .apex-track{height:4px!important;margin-top:4px!important;background:#597589!important}
 #hud:not(.duel-mode) .draft-meter button{min-height:0;margin-top:4px;padding:4px 5px;border:1px solid #79d9d18a;border-radius:6px;background:#14384a;color:#dffaf4;font-size:7px;line-height:1.25;text-align:center}
 #hud:not(.duel-mode) .driver-challenge-head b{font-size:6px}
 #hud:not(.duel-mode) .driver-challenge>strong{display:block;overflow:hidden;margin-top:3px;color:#f1fbff;font-size:8px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
 #hud:not(.duel-mode) .challenge-track{height:4px;margin-top:4px}
 #hud:not(.duel-mode) #map{top:214px;right:4%;width:112px;height:94px;padding:4px;border:1px solid #9ce9e1a8;border-radius:13px;background:rgba(5,24,44,.86);box-shadow:0 6px 18px #03111f55}
 #hud:not(.duel-mode) #weather-status{top:112px;right:4%;min-height:29px;padding:4px 8px;border-color:#a9e8e17a;background:rgba(5,24,44,.88);color:#f2fbff;box-shadow:0 4px 12px #03111f44}
 #hud:not(.duel-mode) #weather-status>small{color:#b8d9e4;border-color:#9ce9e15c}
 #hud:not(.duel-mode) #rival-status{top:112px;left:4%;padding:4px 8px;border:1px solid #9ce9e17a;border-radius:9px;background:rgba(5,24,44,.84);box-shadow:0 4px 12px #03111f44}
 #hud:not(.duel-mode) #rival-status>b,
 #hud:not(.duel-mode) #rival-status>small{color:#effaff;text-shadow:none}
 #hud:not(.duel-mode) .ghost-status:not(.empty){top:auto;right:4%;bottom:178px;min-width:112px;max-width:136px;padding:6px 8px;border-color:#9ce9e17a;background:rgba(5,24,44,.88);color:#effaff;box-shadow:0 4px 14px #03111f4d;text-align:right}
 #hud:not(.duel-mode) .ghost-status:not(.empty)>b{color:#8ff1d9}
 #hud:not(.duel-mode) .ghost-status:not(.empty)>small{color:#c0d9e1;font-size:6px}
 #hud:not(.duel-mode) #item-slot,
 #hud:not(.duel-mode) #skill-slot{bottom:78px;min-height:58px;border:1px solid #9ce9e1a8;border-radius:12px;background:rgba(5,24,44,.9)!important;box-shadow:0 4px 12px #03111f55}
 #hud:not(.duel-mode) #item-slot{left:4%;width:62px}
 #hud:not(.duel-mode) #skill-slot{left:calc(4% + 68px);width:62px}
 #hud:not(.duel-mode) .item-slot>span,
 #hud:not(.duel-mode) .skill-slot>span{color:#b8d9e4;text-shadow:none}
 #hud:not(.duel-mode) .item-slot b,
 #hud:not(.duel-mode) .skill-slot b{text-shadow:none}
 #hud:not(.duel-mode) .speed{right:5%;bottom:82px}
 #hud:not(.duel-mode) .speed b{text-shadow:0 2px 8px #03111f}
 #hud:not(.duel-mode) .speed-bar{background:#8db4c37a}
 #hud:not(.duel-mode) #touch{bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px}
 #hud:not(.duel-mode) #touch button{background:rgba(5,24,44,.92);border-color:#9ce9e1a8;color:#effaff;box-shadow:0 4px 12px #03111f55}
 #hud:not(.duel-mode) #touch button[data-input=accelerate]{background:#72e5cb;color:#06263a}
 #hud:not(.duel-mode) #course-event-status,
 #hud:not(.duel-mode) #challenge-gate-status{top:148px;left:4%;right:auto;transform:none;width:min(218px,calc(100vw - 174px));max-width:none;justify-content:center;min-height:27px;padding:3px 6px;gap:4px;border-color:#9ce9e17a;background:rgba(5,24,44,.94);font-size:7px}
 #hud:not(.duel-mode) #course-event-status>span,
 #hud:not(.duel-mode) #challenge-gate-status>span{font-size:6px;letter-spacing:.4px}
 #hud:not(.duel-mode) #course-event-status>b,
 #hud:not(.duel-mode) #challenge-gate-status>b{font-size:8px}
 #hud:not(.duel-mode) #course-event-status>small,
 #hud:not(.duel-mode) #challenge-gate-status>small{font-size:6px;padding-left:4px}
 #hud:not(.duel-mode) #challenge-gate-status{top:179px}
}
@media(max-width:390px){
 #hud:not(.duel-mode) .drift{top:214px;left:3%;width:min(205px,calc(100vw - 162px));padding:8px;gap:4px 8px}
 #hud:not(.duel-mode) #map{top:214px;width:104px;height:88px}
 #hud:not(.duel-mode) .ghost-status:not(.empty){bottom:178px;min-width:104px;max-width:122px}
}
@media(max-height:700px) and (max-width:760px){
 #hud:not(.duel-mode) .position,#hud:not(.duel-mode) .lap{top:66px}
 #hud:not(.duel-mode) #rival-status,#hud:not(.duel-mode) #weather-status{top:96px}
 #hud:not(.duel-mode) #course-event-status{top:132px}
 #hud:not(.duel-mode) #challenge-gate-status{top:162px}
 #hud:not(.duel-mode) .drift{top:194px}
 #hud:not(.duel-mode) #map{top:194px}
 #hud:not(.duel-mode) #item-slot,#hud:not(.duel-mode) #skill-slot{bottom:69px}
 #hud:not(.duel-mode) .speed{bottom:72px}
 #hud:not(.duel-mode) .ghost-status:not(.empty){bottom:145px}
}

/* Keep race telemetry in compact top and bottom bands on portrait phones. */
@media(max-width:760px){
 #hud:not(.duel-mode) .drift{
  top:214px;left:4%;width:92%;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 9px;
  padding:6px 9px;border-radius:11px
 }
 #hud:not(.duel-mode) .drift>span,
 #hud:not(.duel-mode) .drift>.drift-track{display:none}
 #hud:not(.duel-mode) .drift .sync-meter,
 #hud:not(.duel-mode) .drift .draft-meter,
 #hud:not(.duel-mode) .drift .apex-meter,
 #hud:not(.duel-mode) .drift>.driver-challenge{padding-top:3px}
 #hud:not(.duel-mode) .sync-caption,
 #hud:not(.duel-mode) .sync-caption b,
 #hud:not(.duel-mode) .apex-caption,
 #hud:not(.duel-mode) .apex-caption b,
 #hud:not(.duel-mode) .driver-challenge-head{font-size:9px;line-height:1.15}
 #hud:not(.duel-mode) .sync-track,
 #hud:not(.duel-mode) .apex-track{height:3px!important;margin-top:3px!important}
 #hud:not(.duel-mode) .draft-meter button{
  min-height:0;height:16px;overflow:hidden;margin-top:3px;padding:1px 3px;
  border-radius:5px;font-size:7px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap
 }
 #hud:not(.duel-mode) .driver-challenge>strong{margin-top:2px;font-size:8px;line-height:1.15}
 #hud:not(.duel-mode) .challenge-track{height:3px;margin-top:3px}
 #hud:not(.duel-mode) #map{top:auto;right:4%;bottom:174px;width:88px;height:74px}
 #hud:not(.duel-mode) .ghost-status:not(.empty){top:auto;right:auto;bottom:145px;left:50%;transform:translateX(-50%);min-width:0;width:max-content;max-width:42%;text-align:center}
 #hud:not(.duel-mode).coin-shop-open #map{top:auto;bottom:174px}
}
@media(max-width:390px){
 #hud:not(.duel-mode) .drift{top:214px;left:3%;width:94%;padding:6px 7px;gap:2px 6px}
 #hud:not(.duel-mode) #map{right:3%;width:82px;height:70px}
 #hud:not(.duel-mode) .sync-caption{gap:2px;white-space:nowrap;letter-spacing:.2px}
 #hud:not(.duel-mode) .sync-caption,#hud:not(.duel-mode) .sync-caption b{font-size:7px}
 #hud:not(.duel-mode) #draft-meter .sync-caption span{font-size:6px;letter-spacing:0}
 #hud:not(.duel-mode) .driver-challenge-head>span{display:none}
 #hud:not(.duel-mode) .driver-challenge-head>b{font-size:7px}
}

/* Race HUD: keep the driving view open and give every telemetry group a clear zone. */
body.racing #hud:not(.duel-mode){
 --hud-glass:rgba(4,19,39,.88);
 --hud-line:rgba(132,239,225,.44);
 --hud-copy:#effcff;
 --hud-muted:#b6d1dc;
}
body.racing #hud:not(.duel-mode) .lap,
body.racing #hud:not(.duel-mode) .drift,
body.racing #hud:not(.duel-mode) #rival-status,
body.racing #hud:not(.duel-mode) #weather-status,
body.racing #hud:not(.duel-mode) #course-event-status,
body.racing #hud:not(.duel-mode) #challenge-gate-status,
body.racing #hud:not(.duel-mode) #map,
body.racing #hud:not(.duel-mode) .ghost-status:not(.empty),
body.racing #hud:not(.duel-mode) #item-slot,
body.racing #hud:not(.duel-mode) #skill-slot{
 border-color:var(--hud-line);
 box-shadow:0 5px 18px #020b1b66, inset 0 1px #d9fffa12;
}
body.racing #hud:not(.duel-mode) .position>strong{
 color:#ffd978;
 text-shadow:0 0 22px #ffd9786b;
}
body.racing #hud:not(.duel-mode) .lap,
body.racing #hud:not(.duel-mode) .drift,
body.racing #hud:not(.duel-mode) #rival-status,
body.racing #hud:not(.duel-mode) #weather-status,
body.racing #hud:not(.duel-mode) #course-event-status,
body.racing #hud:not(.duel-mode) #challenge-gate-status,
body.racing #hud:not(.duel-mode) .ghost-status:not(.empty){
 color:var(--hud-copy);
 background:var(--hud-glass);
 backdrop-filter:blur(12px) saturate(1.2);
}
body.racing #hud:not(.duel-mode) .lap b,
body.racing #hud:not(.duel-mode) #rival-status>b,
body.racing #hud:not(.duel-mode) #rival-status>small,
body.racing #hud:not(.duel-mode) .drift>span,
body.racing #hud:not(.duel-mode) .sync-caption b,
body.racing #hud:not(.duel-mode) .apex-caption b{color:var(--hud-copy)}
body.racing #hud:not(.duel-mode) .lap span,
body.racing #hud:not(.duel-mode) .drift .sync-caption,
body.racing #hud:not(.duel-mode) .drift .apex-caption,
body.racing #hud:not(.duel-mode) .drift .driver-challenge-head{color:var(--hud-muted)}
body.racing #hud:not(.duel-mode) .drift .sync-track,
body.racing #hud:not(.duel-mode) .drift .apex-track{background:#7391a278!important}
body.racing #hud:not(.duel-mode) .drift .sync-track i,
body.racing #hud:not(.duel-mode) .drift .apex-track i{box-shadow:0 0 10px #76e9e1a6}
body.racing #hud:not(.duel-mode) #map{background:var(--hud-glass)}
body.racing #hud:not(.duel-mode) .ghost-status:not(.empty)>b{color:#91f4dc}
body.racing #hud:not(.duel-mode) #item-slot.has-item,
body.racing #hud:not(.duel-mode) #skill-slot.sync-ready:not(:disabled){
 box-shadow:0 0 0 1px #82f2d77a,0 0 20px #5debd344,inset 0 1px #ffffff20;
}
@media(max-width:760px){
 body.racing #hud:not(.duel-mode) .position{top:76px;left:4%;gap:5px}
 body.racing #hud:not(.duel-mode) .position>strong{font-size:58px}
 body.racing #hud:not(.duel-mode) .position>span{font-size:16px}
 body.racing #hud:not(.duel-mode) .lap{top:76px;right:4%;gap:11px;padding:8px 10px}
 body.racing #hud:not(.duel-mode) .lap b{font-size:17px}
 body.racing #hud:not(.duel-mode) .coin-counter{position:static;top:auto;right:auto;padding:4px 5px;border:1px solid #78d9d05c;border-radius:8px;background:#12334add}
 body.racing #hud:not(.duel-mode) .coin-counter small,
 body.racing #hud:not(.duel-mode) .synthesis-counter small{display:none}
 body.racing #hud:not(.duel-mode) .synthesis-counter{font-size:10px}
 body.racing #hud:not(.duel-mode) .synthesis-counter b{font-size:12px!important}
 body.racing #hud:not(.duel-mode) #rival-status{top:132px;left:4%;min-height:30px;padding:4px 8px}
 body.racing #hud:not(.duel-mode) #weather-status{top:132px;right:4%;min-height:30px}
 body.racing #hud:not(.duel-mode) #course-event-status,
 body.racing #hud:not(.duel-mode) #challenge-gate-status{top:170px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:92vw;min-height:28px;padding:4px 9px;gap:6px}
 body.racing #hud:not(.duel-mode) #challenge-gate-status{top:202px}
 body.racing #hud:not(.duel-mode) .drift{
  top:238px;left:4%;width:92%;min-height:43px;
  grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:0;
  padding:5px 7px;border-radius:12px;
  background:linear-gradient(105deg,rgba(4,20,40,.9),rgba(10,38,58,.86) 58%,rgba(33,35,73,.85))!important;
  box-shadow:0 5px 18px #020b1b66,inset 0 1px #d9fffa1e;
 }
 body.racing #hud:not(.duel-mode) .drift .sync-meter,
 body.racing #hud:not(.duel-mode) .drift .draft-meter,
 body.racing #hud:not(.duel-mode) .drift .apex-meter,
 body.racing #hud:not(.duel-mode) .drift>.driver-challenge{
  min-height:30px;margin:0;padding:2px 7px 0;border:0;border-left:1px solid #9ce9e12e;
 }
 body.racing #hud:not(.duel-mode) .drift .sync-meter:first-of-type{border-left:0}
 body.racing #hud:not(.duel-mode) .sync-caption,
 body.racing #hud:not(.duel-mode) .sync-caption b,
 body.racing #hud:not(.duel-mode) .apex-caption,
 body.racing #hud:not(.duel-mode) .apex-caption b,
 body.racing #hud:not(.duel-mode) .driver-challenge-head{font-size:8px;line-height:1.2}
 body.racing #hud:not(.duel-mode) #draft-meter .sync-caption span{font-size:7px;letter-spacing:0}
 body.racing #hud:not(.duel-mode) .drift .draft-meter button{height:14px;margin-top:2px;padding:0 3px;font-size:6px}
 body.racing #hud:not(.duel-mode) .drift .draft-meter button{display:none}
 body.racing #hud:not(.duel-mode) .driver-challenge-head>span{display:none}
 body.racing #hud:not(.duel-mode) .driver-challenge-head>b{font-size:7px}
 body.racing #hud:not(.duel-mode) .driver-challenge>strong{font-size:7px}
 body.racing #hud:not(.duel-mode) #map{top:auto;right:4%;bottom:173px;width:78px;height:66px;padding:3px;border-radius:12px}
 body.racing #hud:not(.duel-mode) #item-slot,
 body.racing #hud:not(.duel-mode) #skill-slot{bottom:78px;min-height:62px;width:66px;padding:5px;border-radius:13px}
 body.racing #hud:not(.duel-mode) #item-slot{left:4%}
 body.racing #hud:not(.duel-mode) #skill-slot{left:calc(4% + 72px)}
 body.racing #hud:not(.duel-mode) .item-slot>span,
 body.racing #hud:not(.duel-mode) .skill-slot>span{font-size:6px}
 body.racing #hud:not(.duel-mode) .item-slot b,
 body.racing #hud:not(.duel-mode) .skill-slot b{font-size:25px}
 body.racing #hud:not(.duel-mode) .speed{right:5%;bottom:82px}
 body.racing #hud:not(.duel-mode) .speed b{font-size:43px}
 body.racing #hud:not(.duel-mode) #touch{bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px}
 body.racing #hud:not(.duel-mode) #touch button{min-width:54px;height:56px;border-radius:14px}
 body.racing #hud:not(.duel-mode) .ghost-status:not(.empty){bottom:143px;left:auto;right:4%;transform:none;width:max-content;min-width:0;max-width:42%;min-height:0;padding:4px 7px;text-align:right}
 body.racing #hud:not(.duel-mode) .ghost-status:not(.empty)>span{display:none}
 body.racing #hud:not(.duel-mode) .ghost-status:not(.empty)>small{display:none}
}
@media(max-width:390px){
 body.racing #hud:not(.duel-mode) .position{top:70px}
 body.racing #hud:not(.duel-mode) .lap{top:70px}
 body.racing #hud:not(.duel-mode) .lap{gap:6px;padding:7px 7px}
 body.racing #hud:not(.duel-mode) .lap>span{font-size:6px;letter-spacing:.5px}
 body.racing #hud:not(.duel-mode) .lap b{font-size:15px}
 body.racing #hud:not(.duel-mode) .coin-counter{gap:2px}
 body.racing #hud:not(.duel-mode) .coin-counter b{font-size:13px}
 body.racing #hud:not(.duel-mode) .synthesis-counter{gap:2px;font-size:9px}
 body.racing #hud:not(.duel-mode) .synthesis-counter b{font-size:11px!important}
 body.racing #hud:not(.duel-mode) #rival-status,
 body.racing #hud:not(.duel-mode) #weather-status{top:122px}
 body.racing #hud:not(.duel-mode) #course-event-status,
 body.racing #hud:not(.duel-mode) #challenge-gate-status{top:158px}
 body.racing #hud:not(.duel-mode) #challenge-gate-status{top:190px}
 body.racing #hud:not(.duel-mode) .drift{top:224px;min-height:41px}
 body.racing #hud:not(.duel-mode) #map{right:3%;width:72px;height:62px}
}
@media(max-height:720px) and (max-width:760px){
 body.racing #hud:not(.duel-mode) .position,body.racing #hud:not(.duel-mode) .lap{top:60px}
 body.racing #hud:not(.duel-mode) #rival-status,body.racing #hud:not(.duel-mode) #weather-status{top:108px}
 body.racing #hud:not(.duel-mode) #course-event-status,body.racing #hud:not(.duel-mode) #challenge-gate-status{top:144px}
 body.racing #hud:not(.duel-mode) #challenge-gate-status{top:174px}
 body.racing #hud:not(.duel-mode) .drift{top:208px}
}
@media(min-width:761px){
 body.racing #hud:not(.duel-mode) .drift{
  top:auto;bottom:14px;left:50%;transform:translateX(-50%);
  width:min(680px,68vw);min-height:52px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:0;
  padding:5px 8px;border-radius:13px;
  background:linear-gradient(105deg,rgba(4,20,40,.92),rgba(10,38,58,.9) 58%,rgba(33,35,73,.9))!important;
  box-shadow:0 5px 20px #020b1b70,inset 0 1px #d9fffa1e;
 }
 body.racing #hud:not(.duel-mode) .drift>span,
 body.racing #hud:not(.duel-mode) .drift>.drift-track{display:none}
 body.racing #hud:not(.duel-mode) .drift .sync-meter,
 body.racing #hud:not(.duel-mode) .drift .draft-meter,
 body.racing #hud:not(.duel-mode) .drift .apex-meter,
 body.racing #hud:not(.duel-mode) .drift>.driver-challenge{
  min-width:0;min-height:35px;margin:0;padding:3px 10px 0;border:0;border-left:1px solid #9ce9e12e;
 }
 body.racing #hud:not(.duel-mode) .drift .sync-meter{border-left:0}
 body.racing #hud:not(.duel-mode) .sync-caption,
 body.racing #hud:not(.duel-mode) .sync-caption b,
 body.racing #hud:not(.duel-mode) .apex-caption,
 body.racing #hud:not(.duel-mode) .apex-caption b,
 body.racing #hud:not(.duel-mode) .driver-challenge-head{font-size:9px;line-height:1.2}
 body.racing #hud:not(.duel-mode) .drift .draft-meter button,
 body.racing #hud:not(.duel-mode) .sync-meter small,
 body.racing #hud:not(.duel-mode) .apex-meter>small,
 body.racing #hud:not(.duel-mode) .driver-challenge>small{display:none}
 body.racing #hud:not(.duel-mode) .driver-challenge-head>span{display:none}
 body.racing #hud:not(.duel-mode) .driver-challenge-head>b{font-size:8px}
 body.racing #hud:not(.duel-mode) .driver-challenge>strong{margin-top:4px;font-size:9px;line-height:1.2;white-space:nowrap}
}

/* Portrait race layout: keep live telemetry in the upper band and driving
   controls, map, items, and speed together near the bottom edge. */
@media(max-width:760px) and (orientation:portrait){
 body.racing #hud:not(.duel-mode) .position,
 body.racing #hud:not(.duel-mode) .lap{top:clamp(58px,8vh,72px)}
 body.racing #hud:not(.duel-mode) #rival-status,
 body.racing #hud:not(.duel-mode) #weather-status{top:clamp(103px,13vh,122px)}
 body.racing #hud:not(.duel-mode) #course-event-status,
 body.racing #hud:not(.duel-mode) #challenge-gate-status{
  top:clamp(137px,16vh,158px);left:4%;right:auto;transform:none;
  width:44%;max-width:44%;min-height:29px;padding:4px 7px;gap:5px;
  overflow:hidden;white-space:nowrap;flex-wrap:nowrap
 }
 body.racing #hud:not(.duel-mode) #challenge-gate-status{left:auto;right:4%}
 body.racing #hud:not(.duel-mode) #course-event-status>span,
 body.racing #hud:not(.duel-mode) #challenge-gate-status>span{display:none}
 body.racing #hud:not(.duel-mode) #course-event-status>b,
 body.racing #hud:not(.duel-mode) #challenge-gate-status>b{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px
 }
 body.racing #hud:not(.duel-mode) #course-event-status>small,
 body.racing #hud:not(.duel-mode) #challenge-gate-status>small{flex:0 0 auto;padding-left:4px;font-size:6px}
 body.racing #hud:not(.duel-mode) .drift{
  top:clamp(174px,21vh,204px);bottom:auto;left:4%;width:92%;min-height:39px;
  padding:4px 6px;gap:0;border-radius:10px
 }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:620px){
 body.racing #hud:not(.duel-mode) .drift{top:164px}
 body.racing #hud:not(.duel-mode) #course-event-status,
 body.racing #hud:not(.duel-mode) #challenge-gate-status{top:128px}
}

/* Keep race-mode and start controls reliable on mobile touch screens. */
#menu .mode-picker button,
#menu #start{touch-action:manipulation;-webkit-user-select:none;user-select:none;pointer-events:auto}

/* Candy-bright race finish: vivid track accents with a readable cockpit. */
body.racing #game{filter:saturate(1.16) brightness(1.035)}
body.racing #hud:not(.duel-mode) #touch button:not([data-input=accelerate]){
 background:linear-gradient(145deg,rgba(18,63,84,.97),rgba(44,53,103,.97))!important;
 border-color:#82f4ed!important;box-shadow:0 4px 13px #04122666,inset 0 1px #ffffff32,0 0 12px #61dff02b
}
body.racing #hud:not(.duel-mode) #touch button[data-input=accelerate]{
 background:linear-gradient(120deg,#6df3c8,#55e3e9 48%,#a99bff)!important;
 border-color:#eaffff!important;color:#12334d!important;box-shadow:0 4px 14px #45e4d66b,inset 0 1px #ffffffb8
}
body.racing #hud:not(.duel-mode) .speed-bar i{background:linear-gradient(90deg,#71f4c8,#45dff0 38%,#9b91ff 72%,#ff8bc9);box-shadow:0 0 12px #84eaffaa}
body.racing #hud:not(.duel-mode) #item-slot.has-item{border-color:#ffdc79;background:linear-gradient(145deg,#173d55f5,#39396af2);box-shadow:0 0 0 1px #fff4,0 0 18px #ffcf6966,inset 0 1px #ffffff35}

/* The player's personal best remains on the results screen; keep its ghost out of the race HUD. */
#ghost-status{display:none!important}

/* Give each racer a cheerful, immediately recognizable color signature. */
#menu .swatches button{--racer-accent:#ff9a45;position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--racer-accent) 72%,#ffffff);background:linear-gradient(145deg,color-mix(in srgb,var(--racer-accent) 34%,#17314c),#10253d 88%);box-shadow:inset 0 1px #ffffff20;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
#menu .swatches button:nth-child(2){--racer-accent:#ff83bd}
#menu .swatches button:nth-child(3){--racer-accent:#55e7e9}
#menu .swatches button:nth-child(4){--racer-accent:#a996ff}
#menu .swatches button:nth-child(5){--racer-accent:#ffc85c}
#menu .swatches button:nth-child(6){--racer-accent:#8be59a}
#menu .swatches button::after{content:'✦';position:absolute;top:4px;right:6px;color:var(--racer-accent);font-size:8px;text-shadow:0 0 8px var(--racer-accent);opacity:.9}
#menu .swatches button:hover{transform:translateY(-2px);border-color:var(--racer-accent);box-shadow:0 5px 13px color-mix(in srgb,var(--racer-accent) 22%,transparent),inset 0 1px #ffffff24}
#menu .swatches button.selected{border-color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--racer-accent) 76%,#ffffff),color-mix(in srgb,var(--racer-accent) 52%,#17314c));box-shadow:0 0 0 1px #ffffff65,0 0 17px color-mix(in srgb,var(--racer-accent) 46%,transparent),inset 0 1px #ffffff72;color:#102943}
#menu .swatches button span{filter:drop-shadow(0 3px 5px color-mix(in srgb,var(--racer-accent) 35%,transparent));transition:transform .2s ease}
#menu .swatches button:hover span,#menu .swatches button.selected span{transform:translateY(-2px) scale(1.08)}
#menu .swatches button:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){#menu .swatches button,#menu .swatches button span{transition:none}}
#menu .swatches button .character-avatar{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 3px;border:1px solid color-mix(in srgb,var(--racer-accent) 75%,white);border-radius:50%;background:radial-gradient(circle at 34% 23%,color-mix(in srgb,var(--racer-accent) 52%,white),color-mix(in srgb,var(--racer-accent) 16%,#10253d) 78%);box-shadow:0 2px 9px color-mix(in srgb,var(--racer-accent) 38%,transparent),inset 0 1px #fff9;filter:none}
#menu .swatches button .character-avatar svg{display:block;width:100%;height:100%;overflow:visible}
#menu .swatches button .character-avatar img,.home-racer-avatar img,.finish-cast-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
#menu[data-screen=racer] .swatches button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:110px;font-size:12px}
#menu[data-screen=racer] .swatches button .character-avatar{width:76px;height:76px;margin:0;overflow:hidden;border-radius:14px}
@media(max-width:760px){#menu[data-screen=racer] .swatches{grid-template-rows:repeat(2,104px)}#menu[data-screen=racer] .swatches button{min-height:104px}#menu[data-screen=racer] .swatches button .character-avatar{width:70px;height:70px}}
@media(max-height:650px){#menu[data-screen=racer] .swatches{grid-template-rows:repeat(2,76px)}#menu[data-screen=racer] .swatches button{min-height:76px;gap:3px;font-size:10px}#menu[data-screen=racer] .swatches button .character-avatar{width:48px;height:48px;border-radius:10px}}
@media(max-width:760px){#menu .swatches button .character-avatar{width:31px;height:31px}}

/* Two edge bands leave the road and the racer clear in the centre. */
@media(max-width:760px) and (orientation:portrait){
 body.racing{--race-bottom: max(10px,env(safe-area-inset-bottom));}
 body.racing header{padding:5px 4%;align-items:center}
 body.racing .brand{gap:7px;font-size:18px}
 body.racing .brand-icon{width:32px;height:34px;border-radius:10px}
 body.racing .brand-sub{display:none}
 body.racing .header-right button{min-width:40px;min-height:40px;padding:7px;border-radius:12px}
 body.racing #hud:not(.duel-mode) .position{top:48px;left:4%;gap:4px}
 body.racing #hud:not(.duel-mode) .position>strong{font-size:40px;line-height:1}
 body.racing #hud:not(.duel-mode) .position>span{font-size:14px}
 body.racing #hud:not(.duel-mode) .position small{font-size:6px}
 body.racing #hud:not(.duel-mode) .lap{top:48px;right:4%;min-height:38px;padding:4px 8px;gap:8px}
 body.racing #hud:not(.duel-mode) .lap b{font-size:16px}
 body.racing #hud:not(.duel-mode) #rival-status,
 body.racing #hud:not(.duel-mode) #weather-status{top:91px;min-height:24px;padding:3px 7px}
 body.racing #hud:not(.duel-mode) #course-event-status,
 body.racing #hud:not(.duel-mode) #challenge-gate-status{top:120px;min-height:23px}
 body.racing #hud:not(.duel-mode) .drift{top:auto;bottom:calc(var(--race-bottom) + 110px);left:4%;width:calc(92% - 52px);min-height:32px;padding:2px 5px;transform:none;border-radius:8px}
 body.racing #hud:not(.duel-mode) .drift .sync-meter,
 body.racing #hud:not(.duel-mode) .drift .draft-meter,
 body.racing #hud:not(.duel-mode) .drift .apex-meter,
 body.racing #hud:not(.duel-mode) .drift>.driver-challenge{min-height:28px;padding:2px 6px 0}
 body.racing #hud:not(.duel-mode) #item-slot,
 body.racing #hud:not(.duel-mode) #skill-slot{top:auto;bottom:calc(var(--race-bottom) + 53px);width:60px;height:49px;min-height:0;padding:3px;border-radius:10px}
 body.racing #hud:not(.duel-mode) #item-slot{left:4%}
 body.racing #hud:not(.duel-mode) #skill-slot{left:calc(4% + 66px)}
 body.racing #hud:not(.duel-mode) #map{top:auto;bottom:calc(var(--race-bottom) + 54px);left:54%;right:auto;transform:translateX(-50%);width:58px;height:48px;padding:3px;border-radius:10px}
 body.racing #hud:not(.duel-mode) .speed{top:auto;bottom:calc(var(--race-bottom) + 56px);right:4%;width:86px;text-align:right}
 body.racing #hud:not(.duel-mode) .speed b{font-size:32px;line-height:1}
 body.racing #hud:not(.duel-mode) .speed>span{font-size:7px}
 body.racing #hud:not(.duel-mode) .speed-bar{width:86px;margin-top:5px}
 body.racing #touch{bottom:var(--race-bottom);left:4%;right:4%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
 body.racing #touch>div{display:contents}
 body.racing #touch button{width:100%;height:44px;min-height:44px;min-width:44px;padding:0 3px;border-radius:10px}
 body.racing #touch #touch-jump{position:absolute;right:0;bottom:110px;width:44px;height:44px;font-size:9px;border-color:#b3f6ff;background:#194f68;color:#eaffff}
 body.racing #hud:not(.duel-mode) #branch-prompt{top:auto;bottom:calc(var(--race-bottom) + 151px);max-width:92%;font-size:11px}
 body.racing #announcement{top:147px;font-size:12px;padding:5px 10px;max-width:88%}
}
@media(max-width:350px) and (orientation:portrait){
 body.racing .brand{font-size:16px}
 body.racing #hud:not(.duel-mode) .lap{gap:5px;padding:6px}
 body.racing #hud:not(.duel-mode) .lap b{font-size:14px}
 body.racing #hud:not(.duel-mode) #item-slot,
 body.racing #hud:not(.duel-mode) #skill-slot{width:49px}
 body.racing #hud:not(.duel-mode) #skill-slot{left:calc(4% + 55px)}
 body.racing #hud:not(.duel-mode) #map{width:49px;height:50px;left:53%}
 body.racing #hud:not(.duel-mode) .speed{width:76px}
 body.racing #hud:not(.duel-mode) .speed b{font-size:33px}
 body.racing #hud:not(.duel-mode) .speed-bar{width:76px}
}
@media(min-width:761px){
 body.racing #hud:not(.duel-mode) .position{top:96px}
 body.racing #hud:not(.duel-mode) .position>strong{font-size:76px;line-height:1}
 body.racing #hud:not(.duel-mode) .lap{top:96px;min-height:54px;padding:10px 14px}
 body.racing #hud:not(.duel-mode) #rival-status,
 body.racing #hud:not(.duel-mode) #weather-status{top:180px}
 body.racing #hud:not(.duel-mode) .drift{bottom:20px;width:min(520px,44vw)}
 body.racing #hud:not(.duel-mode) #item-slot,
 body.racing #hud:not(.duel-mode) #skill-slot{bottom:22px;width:82px;min-height:76px}
 body.racing #hud:not(.duel-mode) #skill-slot{left:calc(4.5% + 92px)}
 body.racing #hud:not(.duel-mode) .speed{bottom:24px}
 body.racing #hud:not(.duel-mode) #map{top:auto;bottom:110px;width:106px;height:88px}
}


/* Keep the tap-to-hop action in the thumb control row so it stays visible above the browser safe area. */
@media(max-width:760px) and (orientation:portrait){
 body.racing #touch{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(3px,1vw,6px)}
 body.racing #touch button{min-width:0;font-size:clamp(7px,2.15vw,9px);letter-spacing:-.1px}
 body.racing #touch #touch-jump{position:relative;right:auto;bottom:auto;width:100%;height:46px;min-height:44px;padding:0 2px;border:1px solid #efffffc9;border-radius:11px;background:linear-gradient(135deg,#cefff1 0%,#77e8d2 54%,#c1b2ff 100%);color:#082a43;font-size:clamp(7px,2.3vw,9px);font-weight:900;letter-spacing:.1px;box-shadow:0 0 0 1px #ffffff65,0 0 14px #76eed67a,inset 0 1px #fff9}
 body.racing #touch #touch-jump{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1}
 body.racing #touch #touch-jump::before{content:'↟';font-size:15px;line-height:14px;color:#fff;text-shadow:0 0 7px #31c9ff,0 0 13px #a58cff}
 body.racing #touch #touch-jump.held::before{transform:translateY(-2px)}
 body.racing #touch #touch-jump:not(:disabled):hover{filter:brightness(1.08);box-shadow:0 0 0 2px #ffffffa3,0 0 19px #76eed6ad,inset 0 1px #fff}
 body.racing #touch #touch-jump.held{transform:translateY(2px);filter:brightness(.94);box-shadow:0 0 0 2px #fff,0 0 7px #76eed688,inset 0 1px #fff}
 body.racing #touch #touch-jump:disabled{opacity:.62;filter:saturate(.65);box-shadow:inset 0 1px #fff8}
}
@media(max-width:350px) and (orientation:portrait){
 body.racing #touch{left:3%;right:3%;gap:3px}
 body.racing #touch button{padding:0 1px;font-size:7px}
 body.racing #touch #touch-jump{font-size:7px}
}
@media(prefers-reduced-motion:reduce){body.racing #touch #touch-jump{transition:none}}
/* Let the race stay alive behind the finish results so trailing karts remain visible. */
.finish-celebration #overlay{background:radial-gradient(ellipse at 50% 10%,rgba(88,229,203,.12),transparent 56%),rgba(3,20,38,.12);backdrop-filter:none}
.finish-celebration #overlay::before{opacity:.42}
.finish-celebration .modal{background:linear-gradient(150deg,#102c456b,#09192f80);backdrop-filter:none;box-shadow:0 12px 36px #02091440,inset 0 1px #ffffff24}
.finish-celebration .finish-showcase{background:linear-gradient(112deg,#0f3546b8,#153858bb 56%,#302b59b8)}
.finish-celebration #results p{background:rgba(5,20,36,.24)}
.finish-celebration .modal .cup-tuning{background:#102c455c;border-color:#a9f6e04d}
.finish-celebration .tuning-heading h3{color:#f2ffff}
.finish-celebration .tuning-heading>p,.finish-celebration .tuning-note{color:#d4e9ef}
.finish-celebration .tuning-kicker{color:#ffe29a}
.finish-celebration .modal .tuning-option{background:#091e3659;border-color:#b2deeb66;color:#f2ffff}
.finish-celebration .modal .tuning-option:hover{background:#16465c8c;border-color:#a9f6e0}
.finish-celebration .modal .tuning-option.selected{background:#20647570;border-color:#8df5df;box-shadow:inset 0 0 0 1px #8df5df40}
.finish-celebration .tuning-option strong{color:#f2ffff}
.finish-celebration .tuning-option small,.finish-celebration .tuning-option b{color:#d4e9ef}
.finish-celebration .tuning-icon{background:#a9f6e01c;color:#a9f6e0}
.finish-celebration .cup-row{background:#091e3640;color:#e2f4f7}
.finish-celebration .cup-row b{color:#ffe29a}
.finish-celebration .cup-row.is-you{background:#20647570}
.finish-celebration .cup-row.is-nemesis{background:#61498759;color:#f3eaff}
.finish-celebration .modal .secondary{background:#102c4566;border-color:#b2deeb66;color:#f2ffff}
.finish-celebration .modal .secondary:hover{background:#20647599}
.finish-celebration .modal :is(h2,p,strong,small,b,.eyebrow){text-shadow:0 1px 3px #031426cc}
.finish-celebration #hud{visibility:hidden}
/* A brief candy-coloured star shower marks the start without covering controls. */
#start-stars{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden;contain:strict}
#finish-fireworks{position:fixed;inset:0;z-index:11;overflow:hidden;pointer-events:none;contain:strict}
.finish-firework{position:absolute;width:0;height:0}
.finish-firework::before{content:'';position:absolute;width:112px;height:112px;border:2px solid var(--bloom-color);border-radius:50%;box-shadow:0 0 18px var(--bloom-color),inset 0 0 12px var(--bloom-color);animation:finish-firework-ring 1.1s ease-out var(--bloom-delay) both}
.finish-confetti{position:absolute;top:-24px;width:8px;height:16px;border-radius:2px;background:var(--confetti-color);box-shadow:0 0 5px #fff6;animation:finish-confetti-fall var(--confetti-duration) ease-in var(--confetti-delay) both;will-change:transform,opacity}
.finish-confetti:nth-child(3n){width:5px;height:22px;border-radius:4px}
#finish-fireworks::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#7effdc30,transparent 14% 86%,#ed8aff30);animation:finish-edge-glow 6s ease-out both}
@keyframes finish-firework-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.05)}15%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}}
@keyframes finish-confetti-fall{0%{opacity:0;transform:translateY(-20px) rotate(0)}8%,75%{opacity:1}100%{opacity:0;transform:translate(var(--confetti-drift),104dvh) rotate(var(--confetti-turn))}}
@keyframes finish-edge-glow{0%{opacity:0}12%,65%{opacity:1}100%{opacity:0}}
.opening-visible #menu,.opening-visible #menu-footer,.opening-visible #announcement,.opening-visible .course-tag{visibility:hidden}
#opening{position:fixed;z-index:8;inset:100px 4.5% 28px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;gap:24px;max-width:1240px;margin:auto;color:#f0fcff;text-align:center}
.opening-heading{position:relative;z-index:1;text-align:center}
.opening-visible header .brand{visibility:hidden;pointer-events:none}
.opening-eyebrow{margin:0 0 10px;color:#9ef2dd;font:700 11px/1 'Fredoka',sans-serif;letter-spacing:3px}
#opening h1{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;font:700 clamp(50px,7vw,92px)/.94 'Fredoka',sans-serif;letter-spacing:-3px;transform:none;transform-origin:center;text-align:center}
#opening h1>span{font-size:.42em;line-height:1.15;letter-spacing:.12em;color:#e5fff8}
#opening h1 em{font-style:normal;letter-spacing:-.04em;background:linear-gradient(100deg,#7bf1d0,#7ccfff 35%,#bb9afa 62%,#ffb5cb 80%,#ffcf87);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none}
.opening-tagline{margin:12px 0 0;font-size:15px;font-weight:700;color:#d8edf4}
.opening-cast{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:center;min-height:0;width:100%}
.opening-racer{position:relative;display:block;min-width:0;padding:0;aspect-ratio:3/4;overflow:hidden;border:1px solid color-mix(in srgb,var(--racer-color) 65%,#fff);border-radius:24px;background:#15304b;box-shadow:0 12px 32px #020c2859;color:#fff;transition:transform .2s,border-color .2s}
.opening-racer img,.opening-racer video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 36%}
.opening-racer>span{position:absolute;inset:auto 0 0;padding:32px 5px 13px;background:linear-gradient(transparent,#091b36e6);text-shadow:0 2px 5px #06132e}
.opening-racer strong,.opening-racer small{display:block}
.opening-racer strong{font-size:18px;line-height:1.2;letter-spacing:.04em}
.opening-racer small{margin-top:5px;font-size:9px;color:#daeff8}
.opening-racer:nth-child(2),.opening-racer:nth-child(5){transform:translateY(-12px)}
.opening-racer:nth-child(3),.opening-racer:nth-child(4){transform:translateY(-22px)}
.opening-racer:hover{transform:translateY(-12px) scale(1.025);border-color:#fff}
.opening-racer:focus-visible{outline:3px solid #fff;outline-offset:4px}
.opening-racer.is-selected{border:2px solid #b5ffec;box-shadow:0 0 0 2px #8bf0d05c,0 9px 27px #3adac84d}
.opening-racer.is-selected::after{content:'✓';position:absolute;top:8px;right:8px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#a4ffe4;color:#12334a;border:2px solid #f1fffa;font:700 16px/1 sans-serif;box-shadow:0 2px 8px #06182c70}
.opening-action{width:min(380px,100%);justify-self:center}
.opening-action .primary{position:relative;display:block;width:100%;min-height:60px;padding-left:44px;padding-right:44px;text-align:center;background:linear-gradient(105deg,#7bf1d0,#90c7fb 55%,#d9aff4);color:#10334f;border:2px solid #e2fff4;font-size:18px;box-shadow:0 5px 0 #3d6c8c}
.opening-action .primary .opening-cta-label{display:block;margin:0;text-align:center;font:inherit;line-height:1.4;letter-spacing:0}
.opening-action .primary .opening-cta-arrow{position:absolute;right:18px;top:50%;margin:0;transform:translateY(-50%);line-height:1}
.opening-action>p{width:100%;margin:12px auto 0;font-size:11px;line-height:1.6;text-align:center;text-wrap:balance;color:#c2dce9}
@media(max-width:760px){#opening{inset:90px 5% max(24px,env(safe-area-inset-bottom));gap:18px;grid-template-rows:auto minmax(0,1fr) auto}.opening-eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:7px}#opening h1{font-size:clamp(48px,14vw,70px)}.opening-tagline{font-size:12px;margin-top:9px}.opening-cast{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:450px;justify-self:center;align-content:center}.opening-racer{aspect-ratio:3/4;border-radius:17px}.opening-racer:nth-child(n){transform:none}.opening-racer>span{padding:25px 3px 9px}.opening-racer strong{font-size:14px}.opening-racer small{font-size:7px;margin-top:3px;white-space:nowrap}.opening-action .primary{min-height:56px;font-size:16px}.opening-action>p{font-size:10px}}
@media(max-height:680px){#opening{inset:75px 5% 16px;gap:10px}#opening h1{font-size:46px}.opening-eyebrow{font-size:8px;margin-bottom:5px}.opening-tagline{margin-top:6px;font-size:11px}.opening-cast{gap:7px;max-width:360px}.opening-racer{aspect-ratio:1/1.05;border-radius:13px}.opening-racer small{display:none}.opening-racer>span{padding-bottom:6px}.opening-action .primary{min-height:48px}.opening-action>p{margin-top:8px;font-size:9px}}
@media(min-width:761px) and (max-height:680px){.opening-cast{max-width:1050px}.opening-racer:nth-child(n){transform:none}#opening h1{font-size:58px}}
@media(prefers-reduced-motion:reduce){.opening-racer{transition:none}.opening-racer:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.finish-firework::before,#finish-fireworks::before{display:none}}
.finish-firework span{position:absolute;font-size:var(--firework-size);line-height:1;color:var(--firework-color);text-shadow:0 1px 0 #fff9,0 0 10px var(--firework-color);animation:finish-firework-burst 1.65s cubic-bezier(.12,.68,.3,1) var(--firework-delay) both;will-change:transform,opacity}
@keyframes finish-firework-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}9%{opacity:1}55%{opacity:1;transform:translate(calc(-50% + var(--firework-x)),calc(-50% + var(--firework-y))) scale(1) rotate(var(--firework-turn))}100%{opacity:0;transform:translate(calc(-50% + var(--firework-x)),calc(-50% + var(--firework-y) + 55px)) scale(.3) rotate(var(--firework-turn))}}
@media(prefers-reduced-motion:reduce){.finish-firework span{animation:finish-firework-fade .85s ease-out both;transform:translate(calc(-50% + var(--firework-x)),calc(-50% + var(--firework-y)))}@keyframes finish-firework-fade{0%,55%{opacity:.85}100%{opacity:0}}}
.start-star{position:absolute;left:50%;top:var(--origin-y);font-size:var(--star-size);line-height:1;color:var(--star-color);text-shadow:0 2px 0 #ffffffcc,0 0 9px #ffffff66;animation:start-star-flight 1.25s cubic-bezier(.12,.65,.25,1) var(--star-delay) both;will-change:transform,opacity}
@keyframes start-star-flight{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-20deg)}12%{opacity:1}62%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--star-x)),calc(-50% + var(--star-y))) scale(.6) rotate(var(--star-turn))}}
@media(prefers-reduced-motion:reduce){.start-star{animation:start-star-fade .75s ease-out both;transform:translate(calc(-50% + var(--star-x)),calc(-50% + var(--star-y)))}@keyframes start-star-fade{0%,65%{opacity:1}100%{opacity:0}}}
/* A centered character profile: character first, kart second, readable abilities. */
#menu[data-screen=racer] #driver-panel{display:flex;height:auto;flex-direction:column;gap:8px;text-align:center}
#menu[data-screen=racer] #driver-panel>.panel-label{justify-content:center;letter-spacing:1.6px;color:#a6eadd}
#menu[data-screen=racer] .pilot-heading{justify-content:center;margin:0;min-width:0}
#menu[data-screen=racer] .pilot-heading>div{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
#menu[data-screen=racer] #kart-name{order:-1;margin:0;color:#efffff;font:900 clamp(25px,4vw,34px)/1.2 'Noto Sans JP',sans-serif;letter-spacing:.08em}
#menu[data-screen=racer] #pilot-name{color:#aed1dc;font-size:10px;line-height:1.4;letter-spacing:.08em}
#menu[data-screen=racer] .racer-stamp{display:none}
#menu[data-screen=racer] #kart-desc{margin:0 auto;max-width:40em;text-align:center;font-size:12px;line-height:1.65;text-wrap:pretty}
#menu[data-screen=racer] .personality{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 12px;border-color:#8de5d24d;text-align:center}
#menu[data-screen=racer] .personality p{margin:0;max-width:100%;font-size:13px;line-height:1.55;white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}
#menu[data-screen=racer] .personality b{font-size:11px;color:#fff0bd;line-height:1.4}
#menu[data-screen=racer] .personality small{display:none}
#menu[data-screen=racer] .personality>span{max-width:none;align-self:center;font-size:10px;line-height:1.5;text-align:center;color:#9becdc}
#menu #start{position:relative;justify-content:center;text-align:center;padding-inline:44px}
#menu #start>span{position:absolute;right:18px;margin:0}
@media(max-width:760px){
 #menu[data-screen=racer] #driver-panel{gap:7px}
 #menu[data-screen=racer] #kart-desc{font-size:11px}
 #menu[data-screen=racer] .stats{display:none}
}
@media(max-height:650px){
 #menu[data-screen=racer] .setup{padding:8px 10px}
 #menu[data-screen=racer] #driver-panel{gap:4px}
 #menu[data-screen=racer] #kart-name{font-size:22px}
 #menu[data-screen=racer] #pilot-name{font-size:8px}
 #menu[data-screen=racer] #kart-desc{font-size:9px;line-height:1.45}
 #menu[data-screen=racer] .personality{padding:5px 7px;gap:2px}
 #menu[data-screen=racer] .personality p{font-size:10px}
 #menu[data-screen=racer] .personality b,#menu[data-screen=racer] .personality>span{font-size:9px}
}
@media(min-width:280px){
 body:not(.racing) header .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap}
 body:not(.racing) header .header-right{position:relative;z-index:1;margin-left:auto}
}

/* A post-finish beat: show the kart clearing the stripe before the crew high-fives. */
#finish-passage{position:fixed;inset:0;z-index:12;display:grid;place-items:center;overflow:hidden;padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom));pointer-events:none;background:radial-gradient(ellipse at 50% 48%,rgba(38,226,208,.13),transparent 50%),linear-gradient(180deg,rgba(3,15,36,.12),rgba(5,15,37,.3));animation:finish-passage-fade .35s ease both}
#finish-passage::before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 0deg at 50% 50%,transparent 0 17%,rgba(67,248,220,.12) 21%,transparent 27% 47%,rgba(141,123,255,.13) 51%,transparent 56% 76%,rgba(255,215,105,.1) 80%,transparent 86%);filter:blur(20px);animation:finish-passage-rays 8s linear infinite}
.finish-passage-panel{position:relative;isolation:isolate;width:min(520px,calc(100vw - 28px));padding:20px 22px 17px;overflow:hidden;border:1px solid rgba(166,255,243,.62);border-radius:27px;background:linear-gradient(145deg,rgba(7,31,59,.88),rgba(17,39,76,.86) 58%,rgba(47,35,82,.84));box-shadow:0 20px 80px rgba(1,9,25,.48),0 0 42px rgba(78,245,222,.19),inset 0 1px rgba(255,255,255,.2);backdrop-filter:blur(8px) saturate(1.28);text-align:center;animation:finish-panel-in .48s cubic-bezier(.16,1,.3,1) both}
.finish-passage-panel::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 4%,rgba(118,250,226,.18),transparent 43%),linear-gradient(110deg,transparent 18%,rgba(255,255,255,.035) 43%,transparent 68%)}
.finish-passage-panel::after{content:"";position:absolute;z-index:3;left:50%;top:53%;width:8px;height:8px;border-radius:50%;background:#fff7c4;box-shadow:0 0 0 0 rgba(255,240,162,.7);opacity:0;pointer-events:none;animation:finish-passage-impact 2.45s ease-out both}
.finish-passage-flag{display:flex;align-items:center;justify-content:center;gap:9px;color:#a9ffed;font:800 9px/1 'Fredoka',sans-serif;letter-spacing:2.2px;text-shadow:0 0 16px rgba(102,255,225,.55)}
.finish-passage-flag::before,.finish-passage-flag::after{content:"";width:34px;height:9px;border-radius:2px;background:repeating-conic-gradient(#f4ffff 0% 25%,#34516b 0% 50%) 50%/9px 9px;box-shadow:0 0 10px rgba(101,247,226,.32)}
.finish-passage-title{margin:8px 0 0;color:#fff8df;font:1000 clamp(44px,12vw,72px)/.95 'Fredoka',sans-serif;letter-spacing:1.2px;background:linear-gradient(100deg,#ffe271 5%,#fff9df 28%,#75ffe1 58%,#aab8ff 82%,#f8a6dc);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 17px rgba(112,240,231,.48));animation:finish-title-pop .7s cubic-bezier(.16,1,.3,1) both}
.finish-passage-caption{margin:8px 0 15px;color:#edf9ff;font-size:clamp(12px,3.4vw,15px);font-weight:850;letter-spacing:.02em;text-shadow:0 2px 14px rgba(82,242,216,.44)}
.finish-passage-duo{position:relative;display:flex;justify-content:center;align-items:stretch;gap:clamp(16px,6vw,34px);min-height:134px;overflow:visible}
.finish-passage-racer{position:relative;display:flex;flex:0 1 128px;min-width:0;flex-direction:column;align-items:center;gap:4px;padding:8px 8px 7px;border:1px solid color-mix(in srgb,var(--racer-color) 78%,white);border-radius:20px;background:linear-gradient(155deg,rgba(255,255,255,.15),rgba(12,35,65,.82) 45%);box-shadow:0 0 0 3px color-mix(in srgb,var(--racer-color) 18%,transparent),0 8px 22px rgba(0,8,25,.28),inset 0 1px rgba(255,255,255,.36);animation:finish-racer-arrive 2.45s cubic-bezier(.18,.84,.24,1) both;will-change:transform,opacity}
.finish-passage-racer-left{--entry:-86vw;--tilt:-9deg;--tap:9px;--tap-back:-5px;--tap-rotate:4deg}.finish-passage-racer-right{--entry:86vw;--tilt:9deg;--tap:-9px;--tap-back:5px;--tap-rotate:-4deg;animation-delay:.06s}
.finish-passage-portrait{display:grid;place-items:center;width:clamp(68px,20vw,88px);aspect-ratio:1;overflow:hidden;border:2px solid color-mix(in srgb,var(--racer-color) 76%,white);border-radius:22px;background:radial-gradient(circle at 35% 24%,rgba(255,255,255,.84),var(--racer-color) 54%,rgba(9,25,47,.95));box-shadow:0 0 21px color-mix(in srgb,var(--racer-color) 52%,transparent),inset 0 1px 8px rgba(255,255,255,.3)}
.finish-passage-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.finish-passage-racer strong{max-width:100%;overflow:hidden;color:#fff9e8;font:900 15px/1.1 'Fredoka',sans-serif;text-overflow:ellipsis;white-space:nowrap}
.finish-passage-racer small{max-width:100%;overflow:hidden;color:#b9dbed;font-size:9px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.finish-passage-palms{position:absolute;z-index:2;left:50%;top:51%;width:100px;height:58px;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 8px rgba(0,0,0,.38));pointer-events:none}
.finish-passage-palms span{position:absolute;top:10px;font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif;font-size:38px;line-height:1;filter:drop-shadow(0 0 10px rgba(255,255,255,.65));animation:finish-palm-left 2.45s cubic-bezier(.18,.84,.24,1) both}
.finish-passage-palms span:first-child{left:2px}.finish-passage-palms span:nth-child(2){right:2px;animation-name:finish-palm-right}
.finish-passage-hit-spark{position:absolute;left:50%;top:2px;color:#fff6a7;font:900 22px/1 'Fredoka',sans-serif;text-shadow:0 0 15px #ffe77a;opacity:0;animation:finish-hit-spark 2.45s ease-out both}
.finish-passage-impact{position:absolute;z-index:4;left:50%;top:calc(53% + 34px);color:#fff4b1;font:900 11px/1 'Fredoka',sans-serif;letter-spacing:.08em;text-shadow:0 2px 10px #ff9a4c,0 0 20px #ffe173;white-space:nowrap;opacity:0;transform:translateX(-50%);animation:finish-impact-label 2.45s ease-out both}
.finish-passage-cheer-title{display:block;margin-top:13px;color:#a6f6ec;font:800 8px/1.2 'Fredoka',sans-serif;letter-spacing:1.4px;text-shadow:0 0 12px rgba(123,240,229,.3)}
.finish-passage-cheer{display:flex;justify-content:center;gap:7px;margin-top:8px}
.finish-passage-friend{display:grid;place-items:center;width:30px;height:30px;overflow:hidden;border:1px solid color-mix(in srgb,var(--racer-color) 80%,white);border-radius:50%;background:radial-gradient(circle at 30% 20%,white,var(--racer-color) 60%,#172b45);box-shadow:0 0 12px color-mix(in srgb,var(--racer-color) 42%,transparent);animation:finish-friend-bounce .65s cubic-bezier(.16,1,.3,1) both;animation-delay:1.25s}
.finish-passage-friend img{width:100%;height:100%;object-fit:cover}
@keyframes finish-passage-fade{from{opacity:0}to{opacity:1}}
@keyframes finish-panel-in{from{opacity:0;transform:translateY(24px) scale(.94);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes finish-passage-rays{to{transform:rotate(360deg)}}
@keyframes finish-title-pop{0%{opacity:0;transform:scale(.48) translateY(12px)}72%{opacity:1;transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes finish-racer-arrive{0%{opacity:0;transform:translateX(var(--entry)) rotate(var(--tilt)) scale(.72);filter:blur(5px)}24%{opacity:1;transform:translateX(0) rotate(var(--tilt)) scale(.92);filter:blur(0)}53%{transform:translateX(var(--tap)) rotate(0) scale(1.08)}64%{transform:translateX(var(--tap-back)) rotate(var(--tap-rotate)) scale(.96)}80%{transform:translateX(0) rotate(0) scale(1.035)}100%{opacity:1;transform:translateX(0) rotate(0) scale(1)}}
@keyframes finish-palm-left{0%,24%{opacity:0;transform:translate(-40px,14px) rotate(-35deg) scale(.62)}47%{opacity:1;transform:translate(-9px,0) rotate(-12deg) scale(1)}58%{transform:translate(5px,-5px) rotate(7deg) scale(1.12)}67%{transform:translate(-1px,2px) rotate(-4deg) scale(.98)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes finish-palm-right{0%,24%{opacity:0;transform:translate(40px,14px) rotate(35deg) scale(.62)}47%{opacity:1;transform:translate(9px,0) rotate(12deg) scale(1)}58%{transform:translate(-5px,-5px) rotate(-7deg) scale(1.12)}67%{transform:translate(1px,2px) rotate(4deg) scale(.98)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes finish-hit-spark{0%,47%{opacity:0;transform:translateX(-50%) scale(.2) rotate(-45deg)}57%{opacity:1;transform:translateX(-50%) scale(1.55) rotate(20deg)}72%{opacity:0;transform:translateX(-50%) scale(.35) rotate(80deg)}100%{opacity:0}}
@keyframes finish-impact-label{0%,49%{opacity:0;transform:translate(-50%,8px) scale(.55)}58%{opacity:1;transform:translate(-50%,0) scale(1.08)}73%{opacity:0;transform:translate(-50%,-9px) scale(.92)}100%{opacity:0}}
@keyframes finish-passage-impact{0%,49%{opacity:0;transform:translate(-50%,-50%) scale(.2);box-shadow:0 0 0 0 rgba(255,240,162,.7)}58%{opacity:.95;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 58px rgba(255,240,162,.01),0 0 0 110px rgba(123,250,226,.01)}74%{opacity:0;transform:translate(-50%,-50%) scale(.35);box-shadow:0 0 0 120px rgba(255,240,162,0)}100%{opacity:0}}
@keyframes finish-friend-bounce{from{opacity:0;transform:translateY(9px) scale(.5)}70%{transform:translateY(-5px) scale(1.14)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:420px){.finish-passage-panel{padding:17px 12px 15px;border-radius:23px}.finish-passage-flag{font-size:8px;letter-spacing:1.6px}.finish-passage-flag::before,.finish-passage-flag::after{width:25px}.finish-passage-caption{margin:7px 0 12px}.finish-passage-duo{gap:12px;min-height:124px}.finish-passage-racer{flex-basis:112px;padding:7px 5px 6px;border-radius:17px}.finish-passage-racer strong{font-size:13px}.finish-passage-racer small{font-size:8px}.finish-passage-palms{top:50%;transform:translate(-50%,-50%) scale(.87)}.finish-passage-impact{top:calc(50% + 32px)}.finish-passage-cheer-title{font-size:8px;letter-spacing:1px}.finish-passage-friend{width:32px;height:32px}.finish-passage-friend{width:27px;height:27px}}
@media(prefers-reduced-motion:reduce){#finish-passage,#finish-passage::before,.finish-passage-panel,.finish-passage-title,.finish-passage-racer,.finish-passage-palms span,.finish-passage-hit-spark,.finish-passage-impact,.finish-passage-friend,.finish-passage-panel::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.finish-passage-panel::after{opacity:0}}

body.finish-passage-visible header,body.finish-passage-visible #hud,body.finish-passage-visible #touch,body.finish-passage-visible #pause,body.finish-passage-visible #countdown,body.finish-passage-visible #announcement{visibility:hidden!important}


/* Longer finish celebration: a clear arrival, one readable high-five, then a cast-wide cheer. */
#finish-passage::before{animation-duration:5.3s}
.finish-passage-panel::after{animation:finish-passage-impact-long 5.3s ease-out both}
.finish-passage-racer{animation:finish-racer-arrive-long 5.3s cubic-bezier(.18,.84,.24,1) both}
.finish-passage-palms span{animation-duration:5.3s}
.finish-passage-hit-spark{animation:finish-hit-spark-long 5.3s ease-out both}
.finish-passage-impact{top:calc(50% + 10px);font-size:clamp(28px,8vw,38px);animation:finish-impact-label-long 5.3s ease-out both}
.finish-passage-cheer-title{animation:finish-cheer-title-in .65s ease-out 2.2s both}
.finish-passage-friend{width:36px;height:36px;animation-duration:.72s;box-shadow:0 0 17px color-mix(in srgb,var(--racer-color) 65%,transparent),0 0 28px color-mix(in srgb,var(--racer-color) 25%,transparent)}
.finish-passage-celebrating .finish-passage-racer{animation:finish-racer-cheer .72s ease-in-out 3}
.finish-passage-celebrating .finish-passage-palms span{animation:finish-palm-cheer .72s ease-in-out 3}
.finish-passage-celebrating .finish-passage-hit-spark{animation:finish-spark-cheer .72s ease-out 3}
.finish-passage-celebrating .finish-passage-friend{animation:finish-friend-bounce .72s cubic-bezier(.16,1,.3,1) var(--celebration-delay,0s) both}
.finish-passage-celebrating .finish-passage-panel{box-shadow:0 20px 80px rgba(1,9,25,.48),0 0 55px rgba(78,245,222,.34),0 0 88px rgba(202,128,255,.18),inset 0 1px rgba(255,255,255,.2)}
@keyframes finish-racer-arrive-long{0%{opacity:0;transform:translateX(var(--entry)) rotate(var(--tilt)) scale(.72);filter:blur(5px)}13%{opacity:1;transform:translateX(0) rotate(var(--tilt)) scale(.94);filter:blur(0)}28%{transform:translateX(0) rotate(0) scale(1)}37%{transform:translateX(var(--tap)) rotate(var(--tap-rotate)) scale(1.1)}43%{transform:translateX(var(--tap-back)) rotate(0) scale(.97)}51%,100%{opacity:1;transform:translateX(0) rotate(0) scale(1)}}
@keyframes finish-palm-left{0%,32%{opacity:0;transform:translate(-40px,14px) rotate(-35deg) scale(.62)}38%{opacity:1;transform:translate(-9px,0) rotate(-12deg) scale(1)}42%{transform:translate(5px,-5px) rotate(7deg) scale(1.18)}47%{transform:translate(-1px,2px) rotate(-4deg) scale(.98)}55%,100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes finish-palm-right{0%,32%{opacity:0;transform:translate(40px,14px) rotate(35deg) scale(.62)}38%{opacity:1;transform:translate(9px,0) rotate(12deg) scale(1)}42%{transform:translate(-5px,-5px) rotate(-7deg) scale(1.18)}47%{transform:translate(1px,2px) rotate(4deg) scale(.98)}55%,100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes finish-hit-spark-long{0%,36%{opacity:0;transform:translateX(-50%) scale(.2) rotate(-45deg)}42%{opacity:1;transform:translateX(-50%) scale(1.8) rotate(20deg)}52%{opacity:0;transform:translateX(-50%) scale(.35) rotate(80deg)}100%{opacity:0}}
@keyframes finish-impact-label-long{0%,38%{opacity:0;transform:translate(-50%,5px) scale(.5)}43%,53%{opacity:1;transform:translate(-50%,0) scale(1.14)}64%,100%{opacity:0;transform:translate(-50%,-5px) scale(.9)}}
@keyframes finish-passage-impact-long{0%,39%{opacity:0;transform:translate(-50%,-50%) scale(.2);box-shadow:0 0 0 0 rgba(255,240,162,.7)}44%{opacity:.95;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 58px rgba(255,240,162,.01),0 0 0 110px rgba(123,250,226,.01)}58%,100%{opacity:0;transform:translate(-50%,-50%) scale(.35);box-shadow:0 0 0 120px rgba(255,240,162,0)}}
@keyframes finish-cheer-title-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes finish-racer-cheer{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-7px) scale(1.045)}70%{transform:translateY(1px) scale(.99)}}
@keyframes finish-palm-cheer{0%,100%{transform:translateY(0) rotate(0) scale(1)}42%{transform:translateY(-7px) rotate(-7deg) scale(1.13)}72%{transform:translateY(1px) rotate(5deg) scale(.98)}}
@keyframes finish-spark-cheer{0%,100%{opacity:.25;transform:translateX(-50%) scale(.65) rotate(0)}45%{opacity:1;transform:translateX(-50%) scale(1.6) rotate(28deg)}70%{opacity:.4;transform:translateX(-50%) scale(.8) rotate(55deg)}}
@media(max-width:420px){.finish-passage-panel{padding:17px 12px 15px}.finish-passage-duo{gap:12px;min-height:124px}}
@media(prefers-reduced-motion:reduce){.finish-passage-cheer-title{animation:none;opacity:1}.finish-passage-celebrating .finish-passage-racer,.finish-passage-celebrating .finish-passage-palms span,.finish-passage-celebrating .finish-passage-hit-spark,.finish-passage-celebrating .finish-passage-friend{animation:none}}


/* Center the celebratory result copy while preserving easy-to-scan two-column race data. */
.finish-celebration .modal{text-align:center}
.finish-celebration .modal .eyebrow,.finish-celebration .modal h2,.finish-celebration .modal>p{text-align:center}
.finish-celebration .finish-copy{justify-items:center;text-align:center}
.finish-celebration .finish-copy>i{width:min(82%,180px);background:linear-gradient(90deg,transparent,#ffda75 18%,#7cf1d4 52%,#b9a8ff 82%,transparent)}
.finish-celebration .finish-lineup{flex-direction:column;justify-content:center;gap:8px;padding-top:8px;text-align:center}
.finish-celebration .finish-lineup-title{flex:0 0 auto;text-align:center}
.finish-celebration .finish-cast{width:100%;max-width:440px}
.finish-celebration #results p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;text-align:center}
.finish-celebration #results p>span{justify-self:center;text-align:center}
@media(max-width:760px){.finish-celebration .finish-lineup{gap:6px;padding-top:7px}.finish-celebration #results p{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}


/* Final alignment pass: flex labels need justify-content, and finish rows read as one centered unit. */
.finish-celebration .modal .eyebrow{display:flex;justify-content:center;width:100%;text-align:center}
.finish-celebration #results p{display:flex;justify-content:center;gap:clamp(14px,4vw,28px);text-align:center}
.finish-celebration #results p>span{justify-self:auto;text-align:center}
@media(max-width:760px){
 .finish-celebration .finish-showcase{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;min-height:0;padding:11px 10px 9px}
 .finish-celebration .finish-medal{grid-column:1;grid-row:1;justify-self:center}
 .finish-celebration .finish-copy{grid-column:1;grid-row:2;width:100%;justify-items:center;text-align:center}
 .finish-celebration .finish-copy>i{width:min(76%,200px)}
 .finish-celebration .finish-lineup{grid-column:1;grid-row:3;width:100%}
}

/* Keep the celebration compact and put every finish time in a stable column. */
.finish-celebration #overlay{z-index:13}
.finish-celebration #touch{visibility:hidden;pointer-events:none}
.finish-celebration .modal{width:min(540px,94vw);padding:18px 20px;max-height:calc(100dvh - 24px)}
.finish-celebration .finish-showcase{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px 14px;min-height:0;margin:0 0 12px;padding:12px 14px}
.finish-celebration .finish-medal{grid-column:1;grid-row:1;width:64px;height:64px;justify-self:center}
.finish-celebration .finish-medal>b{font-size:28px}
.finish-celebration .finish-copy{grid-column:2;grid-row:1;width:100%;gap:6px;justify-items:center;text-align:center}
.finish-celebration .finish-copy>strong{font-size:clamp(14px,3.8vw,21px);line-height:1.2}
.finish-celebration .finish-copy>small{font-size:10px;line-height:1.5}
.finish-celebration .finish-lineup{grid-column:1/-1;grid-row:2;width:100%;gap:6px;padding-top:8px}
.finish-celebration .finish-cast{max-width:420px}
.finish-celebration .modal #result-label{font-size:10px;letter-spacing:.8px;line-height:1.5}
.finish-celebration .modal #result-title{margin:8px 0 4px;font-size:25px;line-height:1.3;letter-spacing:0}
.finish-celebration .modal #result-text{margin:0 0 12px;font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums}
.finish-celebration .modal #results{margin:0 0 12px}
.finish-times{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;color:#effaff;text-align:left;font-size:13px}
.finish-times th{padding:7px 8px;border-bottom:1px solid #a9f6e04d;color:#bbdbe1;font-size:10px;font-weight:700;white-space:nowrap}
.finish-times th:first-child{width:42px;text-align:center}
.finish-times th:last-child{width:108px;text-align:right}
.finish-times td{height:38px;padding:7px 8px;border-bottom:1px solid #ffffff19;background:#071c3038;vertical-align:middle}
.finish-times .result-rank{text-align:center;font-weight:900;color:#b9dfeb;font-variant-numeric:tabular-nums}
.finish-times .result-racer>span{overflow-wrap:anywhere;line-height:1.4}
.finish-times .result-time{text-align:right;white-space:nowrap;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.15px}
.finish-times .result-badge{display:inline-block;margin-left:6px;padding:2px 4px;border:1px solid #9af6e04d;border-radius:4px;color:#b9fff1;font:700 8px/1.2 'Fredoka',sans-serif;vertical-align:middle;text-shadow:none}
.finish-celebration .finish-times .you td{background:#164d58dd;color:#f5ffff;font-weight:800}
.finish-times .you td:first-child{border-radius:8px 0 0 8px;box-shadow:inset 3px 0 #7be7d1;color:#ffe096}
.finish-times .you td:last-child{border-radius:0 8px 8px 0}
.finish-times .is-waiting .result-time{color:#a7c9d4;font-size:11px;font-weight:600}
.finish-celebration #results .results-status{display:block;margin:8px 0 0;padding:0;border:0;background:none;color:#bce0e5;font-size:10px;line-height:1.5;text-align:center}
.finish-celebration .modal .secondary{min-height:44px;margin-top:8px;padding:10px 12px;font-size:13px}
@media(max-width:430px){
 .finish-celebration .modal{padding:14px;width:94vw}
 .finish-celebration .finish-showcase{grid-template-columns:56px minmax(0,1fr);gap:8px 10px;padding:10px;margin-bottom:10px}
 .finish-celebration .finish-medal{width:56px;height:56px}
 .finish-celebration .finish-medal>b{font-size:25px}
 .finish-celebration .finish-copy>span{font-size:6px;letter-spacing:1.4px}
 .finish-celebration .finish-copy>small{font-size:9px}
 .finish-celebration .finish-lineup-title{font-size:6px}
 .finish-celebration .modal #result-title{font-size:23px}
 .finish-times{font-size:12px}
 .finish-times th:first-child{width:32px}
 .finish-times th:last-child{width:96px}
 .finish-times th,.finish-times td{padding:6px}
 .finish-times td{height:34px}
 .finish-times .result-time{font-size:13px}
}
@media(max-height:700px){
 .finish-celebration header{visibility:hidden}
 .finish-celebration .modal{padding:10px 12px}
 .finish-celebration .finish-showcase{gap:5px 10px;padding:7px 10px;margin-bottom:7px}
 .finish-celebration .finish-medal{width:48px;height:48px}
 .finish-celebration .finish-medal>b{font-size:22px}
 .finish-celebration .finish-copy{gap:3px}
 .finish-celebration .finish-copy>small,.finish-celebration .finish-lineup-title{display:none}
 .finish-celebration .finish-lineup{gap:0;padding-top:5px}
 .finish-celebration .finish-cast-avatar{width:23px;height:23px}
 .finish-celebration .finish-cast-member>b{font-size:7px}
 .finish-celebration .modal #result-title{margin:5px 0 2px;font-size:21px}
 .finish-celebration .modal #result-text{margin-bottom:5px;font-size:11px}
 .finish-times td{height:28px;padding-top:4px;padding-bottom:4px}
 .finish-times th{padding-top:4px;padding-bottom:4px}
 .finish-celebration .modal #results{margin-bottom:5px}
 .finish-celebration #results .results-status{margin-top:5px;font-size:9px}
 .finish-celebration .modal .secondary{margin-top:6px}
}

/* Pause: one centered reading axis, with a separate arrow position. */
#overlay:has(#resume:not([hidden])) .modal{width:min(460px,91vw);padding:clamp(24px,5vw,36px);text-align:center;background:linear-gradient(145deg,#0c253eeb,#102b42f0);border:1px solid #9adbd370;box-shadow:0 18px 60px #03132066,inset 0 1px #d6fff128}
#overlay:has(#resume:not([hidden])) #result-label{justify-content:center;letter-spacing:2px;color:#9ae9df;font-size:10px}
#overlay:has(#resume:not([hidden])) #result-title{margin:20px 0 12px;font-size:clamp(27px,6vw,34px);line-height:1.3;letter-spacing:.02em;color:#f4fffc}
#overlay:has(#resume:not([hidden])) #result-text{margin:0 0 22px;color:#c3dce3;font-size:14px;line-height:1.8}
#overlay:has(#resume:not([hidden])) #results:empty{display:none}
#resume.primary{position:relative;display:block;min-height:62px;padding:16px 48px;text-align:center}
#resume.primary .resume-label{display:block;width:100%;margin:0;font:inherit;line-height:1.4}
#resume.primary .resume-arrow{position:absolute;right:20px;top:50%;transform:translateY(-50%);margin:0;font-size:25px;line-height:1}
#overlay:has(#resume:not([hidden])) .secondary{min-height:48px;font-size:14px;margin-top:14px;color:#e5f7fa;background:#173b5070;border-color:#9cd7dd55}
@media(max-height:540px){#overlay:has(#resume:not([hidden])) .modal{padding:18px 24px}#overlay:has(#resume:not([hidden])) #result-title{margin:10px 0 8px}#overlay:has(#resume:not([hidden])) #result-text{margin-bottom:12px}#resume.primary{min-height:48px}#overlay:has(#resume:not([hidden])) .secondary{margin-top:10px}}

/* A sky canopy frames results without obscuring racers or intercepting controls. */
.finish-celebration #overlay{isolation:isolate;background:linear-gradient(180deg,#03122d30,transparent 55%,#06172b18)}
.finish-celebration #overlay::before{inset:-10% -18% 28%;opacity:.68;background:repeating-linear-gradient(99deg,transparent 0 5%,#79ffe827 6%,#61deff38 8%,transparent 11%,#dba3ff32 14%,transparent 18%),radial-gradient(ellipse at 26% 12%,#44ffd64d,transparent 55%),radial-gradient(ellipse at 82% 24%,#b579ff55,transparent 48%);mask-image:linear-gradient(#000 15%,#0009 56%,transparent);transform-origin:50% 0;animation:results-aurora-drift 14s ease-in-out infinite alternate}
.finish-celebration #overlay::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#e3fffbe0 0 1px,transparent 2px),radial-gradient(circle,#ffd8f5b0 0 1px,transparent 2px);background-size:113px 137px,197px 173px;background-position:19px 37px,67px 93px;mask-image:linear-gradient(#000,transparent 78%);animation:results-stars 4s ease-in-out infinite alternate}
.finish-celebration .modal{border-color:#a4ffe887;box-shadow:0 12px 40px #020d2440,inset 0 1px #d7fff84d,0 0 40px #71ffe419}
@keyframes results-aurora-drift{from{transform:translateX(-2%) skewX(-6deg);opacity:.5}to{transform:translateX(3%) skewX(6deg);opacity:.8}}
@keyframes results-stars{from{opacity:.35}to{opacity:.85}}
@media(prefers-reduced-motion:reduce){.finish-celebration #overlay::before,.finish-celebration #overlay::after{animation:none}}

/* Song-inspired stardust stays beside the results, leaving the text clear. */
#finish-stardust{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;contain:strict}
#finish-stardust span{position:absolute;color:var(--glint-color);font-size:var(--glint-size);line-height:1;text-shadow:0 0 8px currentColor,0 0 22px currentColor;animation:aurora-jewel 4.8s ease-in-out var(--glint-delay) infinite}
.finish-celebration .finish-medal{box-shadow:0 0 20px #ffe17a50,0 0 48px #ffcf5830}
@keyframes aurora-jewel{0%,100%{opacity:.12;transform:translateY(8px) scale(.55) rotate(-12deg)}45%,60%{opacity:.95;transform:translateY(-8px) scale(1.15) rotate(12deg)}}
@media(prefers-reduced-motion:reduce){#finish-stardust span{animation:none;opacity:.65}}

/* Keep the view clear when item help contains multi-line instructions. */
body.racing #hud .item-slot{overflow:hidden;isolation:isolate}
body.racing #hud #item-help{display:none}
body.racing #hud #item-name,body.racing #hud #skill-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7f8f4;text-shadow:0 1px 3px #04182c}
body.racing #hud .item-slot>span{color:#b5d3e2;text-shadow:none}
body.racing #announcement{box-sizing:border-box;max-width:min(560px,86vw);max-height:62px;overflow:hidden;white-space:normal;overflow-wrap:anywhere;line-height:1.45;text-align:center;text-shadow:none;font-size:13px;transform:translateX(-50%);border-radius:14px}
@media(min-width:761px){body.racing #hud .item-slot{height:96px;min-height:0;max-height:96px}body.racing #hud .item-slot>span{display:block;font-size:8px}body.racing #hud .item-slot b{display:block;line-height:1.05;margin:4px 0}body.racing #hud #item-name,body.racing #hud #skill-name{font-size:9px}}

/* Fit all three skill rows inside the compact HUD button. */
body.racing #hud #skill-slot{
 display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:7px minmax(0,1fr) 18px;
 align-items:center;justify-items:center;gap:0;box-sizing:border-box;overflow:hidden;
 padding:3px;min-width:0;text-align:center;
}
body.racing #hud #skill-slot>span{display:block;max-width:100%;font-size:6px;line-height:7px;letter-spacing:0;white-space:nowrap;margin:0}
body.racing #hud #skill-icon{display:block;max-width:100%;font-size:16px;line-height:1.125;margin:0;padding:0;align-self:center}
body.racing #hud #skill-name{display:block;width:100%;min-width:0;max-width:100%;max-height:18px;margin:0;padding:0;font-size:7px;line-height:9px;white-space:normal;overflow-wrap:anywhere;word-break:normal;text-overflow:clip;overflow:hidden;align-self:center}
@media(min-width:761px){
 body.racing #hud #skill-slot{grid-template-rows:10px minmax(0,1fr) 24px;padding:7px;gap:2px}
 body.racing #hud #skill-slot>span{font-size:8px;line-height:10px}
 body.racing #hud #skill-icon{font-size:32px;line-height:1}
 body.racing #hud #skill-name{font-size:9px;line-height:12px;max-height:24px}
}

/* Keep the finish party visible without covering the characters. */
body.finish-friends-visible #overlay,body.finish-friends-visible #hud,body.finish-friends-visible #touch{visibility:hidden!important;pointer-events:none!important}
#finish-friends-caption{position:fixed;z-index:130;top:max(22px,env(safe-area-inset-top));left:16px;right:16px;text-align:center;color:#fff9db;font-size:clamp(18px,4.5vw,30px);font-weight:900;line-height:1.4;text-shadow:0 2px 5px #173958,0 0 18px #7ef5ec;pointer-events:none}

body.finish-friends-visible header .brand,body.finish-friends-visible #menu-footer{visibility:hidden;pointer-events:none}
#finish-friends-caption{left:20px;right:20px;font-size:clamp(16px,4vw,26px);top:max(60px,calc(env(safe-area-inset-top) + 48px))}

.skill-slot.skill-signal #skill-icon{animation:skill-mark-gleam 1.1s ease-out 1}
@keyframes skill-mark-gleam{0%,100%{filter:none;transform:scale(1)}35%{filter:brightness(1.65) drop-shadow(0 0 8px #fff0a3);transform:scale(1.16)}60%{filter:brightness(1.15) drop-shadow(0 0 3px #ffe78c);transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.skill-slot.skill-signal #skill-icon{animation:none;filter:brightness(1.2)}}

/* One shutter flash, then a still photograph with every racer in frame. */
#finish-photo{position:fixed;inset:0;z-index:125;margin:0;pointer-events:none;background:#071b30;animation:photo-develop .55s ease-out both}
#finish-photo canvas{display:block;width:100%;height:100%;object-fit:contain}
#finish-photo::before{content:"";position:absolute;inset:12px;border:2px solid #d2fff1;border-radius:18px;box-shadow:inset 0 0 25px #7effdd55,0 0 18px #d9b3ff55}
#finish-photo::after{content:"";position:absolute;inset:0;background:#eafff8;animation:photo-flash .36s ease-out both}
#finish-photo figcaption{position:absolute;bottom:max(28px,calc(env(safe-area-inset-bottom) + 20px));left:24px;right:24px;display:grid;gap:8px;text-align:center;color:#fff7dc;text-shadow:0 2px 8px #061e40,0 0 20px #80ffe7}
#finish-photo figcaption strong{font-size:clamp(25px,7vw,44px);letter-spacing:.14em}
#finish-photo figcaption span{font-size:clamp(12px,3.3vw,17px);font-weight:800}
@keyframes photo-flash{from{opacity:.72}to{opacity:0}}
@keyframes photo-develop{from{filter:saturate(.65)}to{filter:saturate(1.08)}}
@media(prefers-reduced-motion:reduce){#finish-photo{animation:none}#finish-photo::after{display:none}}

/* The expanded atlas scrolls independently, keeping race setup and start in reach. */
#menu[data-screen=course] .course-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:72px;max-height:240px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#85e9db #122d46;align-content:start;padding:3px}
#menu[data-screen=course] .course-grid button{min-height:64px;--course-accent:#a6e8ef}
#menu[data-screen=course] .course-grid button:nth-child(n+7){--course-accent:#e3b9ff}
#menu[data-screen=course] .course-grid button b{overflow-wrap:anywhere}
@media(max-width:760px){#menu[data-screen=course] .course-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:64px;max-height:240px;min-height:0}#menu[data-screen=course] .course-grid button{min-height:60px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:5px}#menu[data-screen=course] .course-grid button b{font-size:10px;min-height:0;margin:0 12px;line-height:1.3}#menu[data-screen=course] .course-grid button small{display:block;font-size:8px;white-space:normal;line-height:1.25}#menu[data-screen=course] .course-grid svg{display:none}#menu[data-screen=course] .course-picker>p{overflow:hidden;text-overflow:ellipsis}}
@media(max-height:650px) and (max-width:760px){#menu[data-screen=course] .course-grid{grid-auto-rows:50px;max-height:160px}#menu[data-screen=course] .course-grid button{min-height:46px}#menu[data-screen=course] .course-grid button small{font-size:7px}}

@media(max-width:760px){
 #menu[data-screen=course] .intro{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:13px 64px 18px minmax(90px,1fr) 112px;gap:4px}
 #menu[data-screen=course] .course-picker{flex:none;min-height:0;grid-template-rows:14px minmax(0,1fr)}
 #menu[data-screen=course] .course-picker>p{display:none}
 #menu[data-screen=course] .race-format{flex:none;min-height:0;grid-template-rows:13px minmax(0,1fr)}
 #menu[data-screen=course] .mode-picker{grid-template-rows:repeat(2,minmax(44px,1fr))}
}
@media(max-height:650px) and (max-width:760px){
 #menu[data-screen=course] .intro{grid-template-rows:10px 48px 14px minmax(72px,1fr) 96px;gap:3px}
 #menu[data-screen=course] .mode-picker{grid-template-rows:repeat(2,minmax(40px,1fr))}
 #menu[data-screen=course] .mode-picker button{min-height:40px}
}

/* A focused first-lap edition; the full ten-course game remains at the base URL. */
body.demo-mode #menu[data-screen=course] .intro{display:flex;flex-direction:column;gap:5px}
body.demo-mode #menu[data-screen=course] :is(.course-picker,.race-format,.home-racer,.quick-controls){display:none}
#demo-course{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.demo-edition{font-size:10px;font-weight:900;letter-spacing:.16em;color:#9bf4df}
.demo-map svg{width:150px;height:72px;overflow:visible}.demo-map svg path{fill:#8cebd917;stroke:#9bf4df;stroke-width:2.3;stroke-linejoin:round;filter:drop-shadow(0 0 5px #8cebd94d)}
#demo-course h2{margin:0;color:#f4ffff;font-size:clamp(19px,3.5vw,29px);line-height:1.4}
#demo-course .demo-description{display:block!important;margin:0;font-size:13px;line-height:1.7;color:#c7e9ee}
.demo-highlights{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.demo-highlights span{padding:5px 10px;border:1px solid #98e5df66;border-radius:8px;color:#e2ffff;font-size:11px;font-weight:800}
#demo-pilot{margin:0;color:#ffe2a2;font-size:12px;line-height:1.5}
.demo-links{display:flex;gap:14px;align-items:center;justify-content:center}.demo-links .secondary{min-height:44px;margin:0;padding:8px 14px;color:#f2ffff;background:#16364d;border:1px solid #89c9cd;font-size:12px}.demo-links a{display:flex;align-items:center;min-height:44px;font-size:12px;color:#b4f4e5;text-underline-offset:4px}
#demo-guide{width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow-y:auto;box-sizing:border-box;border:1px solid #92e3d5;border-radius:24px;padding:24px;color:#f1ffff;background:#0c263d;box-shadow:0 24px 80px #02142499;text-align:center}
#demo-guide::backdrop{background:#021222c7;backdrop-filter:blur(5px)}
#demo-guide h2{margin:8px 0;font-size:26px;line-height:1.4}.demo-guide-lead{margin:0;color:#b8dce5;font-size:14px;line-height:1.6}
.demo-steps{list-style:none;counter-reset:steps;margin:18px 0;padding:0;display:grid;gap:13px;text-align:left}.demo-steps li{counter-increment:steps;position:relative;padding-left:34px}.demo-steps li::before{content:counter(steps);position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#86ead8;color:#12354b;font-size:13px;font-weight:900}.demo-steps b{display:block;font-size:15px;line-height:1.5}.demo-steps span{display:block;margin-top:3px;color:#c6dfe7;font-size:12px;line-height:1.7}
.demo-check{min-height:44px;display:flex;align-items:center;gap:10px;text-align:left;font-size:13px}.demo-check input{width:19px;height:19px;accent-color:#90f1d9}
.demo-guide-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:14px}.demo-guide-actions button{min-height:48px;margin:0;justify-content:center;font-size:15px;padding:10px}
#demo-guide :focus-visible,.demo-links :focus-visible{outline:3px solid #ffe6a1;outline-offset:3px}
@media(max-width:760px){body.demo-mode #menu[data-screen=course] .intro{gap:4px}#demo-course{gap:8px}.demo-map svg{width:120px;height:62px}#demo-course .demo-description{font-size:12px}#demo-course h2{font-size:22px}}
@media(max-height:650px){#demo-course{gap:5px}.demo-map{display:none}#demo-course h2{font-size:18px}#demo-course .demo-description{font-size:11px;line-height:1.5}.demo-highlights span{padding:3px 7px;font-size:10px}#demo-pilot{font-size:11px}#demo-guide{padding:16px}#demo-guide h2{font-size:22px}.demo-guide-lead{display:none}.demo-steps{gap:9px;margin:12px 0}.demo-steps span{font-size:11px}.demo-check{min-height:38px}}

.demo-preview{position:relative;width:142px;height:142px;margin:2px 0 4px}#demo-portrait img{display:block;width:142px;height:142px;object-fit:cover;border-radius:28px;border:2px solid #b6f3e0;box-shadow:0 10px 25px #020f2d66}.demo-preview .demo-map{display:block;position:absolute;right:-19px;bottom:-8px;padding:5px;border:1px solid #92e9df88;border-radius:12px;background:#13384deb}.demo-preview .demo-map svg{display:block;width:64px;height:40px}
@media(max-height:650px){.demo-preview{display:none}}

.demo-steps span{font-size:14px;line-height:1.6}@media(max-height:650px){.demo-steps span{font-size:13px}}

#graphics-recovery{width:min(420px,calc(100vw - 32px));padding:24px;border:1px solid #98e5d8;border-radius:20px;background:#102c43;color:#eeffff;text-align:center}#graphics-recovery::backdrop{background:#041426df}#graphics-recovery h2{font-size:22px;line-height:1.5;margin:0 0 12px}#graphics-recovery p{font-size:14px;line-height:1.8;color:#c2e0e9}#graphics-recovery button{min-height:48px;font-size:15px}

/* Pastel aurora lettering stays still and legible over the finish scene. */
.finish-celebration .modal #result-title,
.finish-celebration #finish-kicker{color:#bffff0;text-shadow:0 2px 2px #071a36,0 0 14px #95f4dd44}
.finish-celebration .modal #result-title{font-weight:900;letter-spacing:.025em}
.finish-celebration #finish-subtitle{color:#d8fff3}
.finish-celebration #result-text{color:#d3f3ff}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .finish-celebration .modal #result-title,
 .finish-celebration #finish-kicker{
  background:linear-gradient(105deg,#adffe4 5%,#a9f3ff 30%,#d0c3ff 55%,#ffc2e6 78%,#ffe3a8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;text-shadow:none;
  filter:drop-shadow(0 2px 1px #07152fe6) drop-shadow(0 0 7px #b0eaff33);
 }
}
@media(forced-colors:active){
 .finish-celebration .modal #result-title,.finish-celebration #finish-kicker{
  background:none;-webkit-text-fill-color:CanvasText;color:CanvasText;filter:none;text-shadow:none;
 }
}

/* Center the inter-race championship screen and give its final-rival copy a friendly tone. */
.finish-celebration.cup-intermission .modal{text-align:center}
.finish-celebration.cup-intermission .modal #result-label,
.finish-celebration.cup-intermission .modal #result-title,
.finish-celebration.cup-intermission .modal #result-text{text-align:center}
.finish-celebration.cup-intermission #cup-standings{justify-items:stretch}
.finish-celebration.cup-intermission .cup-row{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;justify-items:center;gap:3px;min-height:42px;padding:6px 5px;text-align:center}
.finish-celebration.cup-intermission .cup-row span{width:100%;overflow-wrap:anywhere;text-align:center;text-overflow:clip;white-space:normal;line-height:1.35;text-wrap:balance}
.finish-celebration.cup-intermission .cup-row b{justify-self:center;text-align:center}
.finish-celebration.cup-intermission .finish-times th,
.finish-celebration.cup-intermission .finish-times td{text-align:center}
.finish-celebration.cup-intermission .finish-times th:first-child,
.finish-celebration.cup-intermission .finish-times th:last-child{width:auto;text-align:center}
.finish-celebration.cup-intermission .finish-times .result-time{font-size:13px}
.finish-celebration.cup-intermission .tuning-heading{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.finish-celebration.cup-intermission .tuning-heading h3,
.finish-celebration.cup-intermission .tuning-heading>p{text-align:center}
.finish-celebration.cup-intermission .tuning-heading>p{max-width:none;font-size:8px}
.finish-celebration.cup-intermission .tuning-option{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;text-align:center}
.finish-celebration.cup-intermission .tuning-icon{position:absolute;top:7px;left:7px;grid-row:auto}
.finish-celebration.cup-intermission .tuning-option strong{grid-column:1/-1;justify-self:center;width:100%;padding:12px 2px 0;text-align:center}
.finish-celebration.cup-intermission .tuning-option small{grid-column:1/-1;justify-self:center;width:100%;text-align:center}
.finish-celebration.cup-intermission .tuning-option b{grid-column:1/-1;justify-self:center;width:100%;text-align:center}
.finish-celebration.cup-intermission .tuning-note{text-align:center;line-height:1.5;text-wrap:balance}
.finish-celebration.cup-intermission .modal #next-race{display:flex;align-items:center;justify-content:center;min-height:56px;text-align:center;line-height:1.45;white-space:normal;text-wrap:balance}
@media(max-width:430px){
 .finish-celebration.cup-intermission .cup-row{min-height:40px;padding:5px 4px;font-size:9px}
 .finish-celebration.cup-intermission .tuning-heading h3{font-size:14px}
 .finish-celebration.cup-intermission .modal #next-race{min-height:54px;padding:10px 14px;font-size:14px}
}

/* Brief, directional warnings sit above the lower HUD and leave the road clear. */
#attack-feedback{position:fixed;inset:0;z-index:45;pointer-events:none;isolation:isolate}
#attack-feedback[hidden],.attack-cue[hidden]{display:none!important}
#attack-feedback::before{content:"";position:absolute;inset:0;opacity:.8;pointer-events:none}
#attack-feedback[data-direction=left]::before{background:linear-gradient(90deg,#ffbd984d,transparent 8%)}
#attack-feedback[data-direction=right]::before{background:linear-gradient(270deg,#ffbd984d,transparent 8%)}
#attack-feedback[data-direction=front]::before,#attack-feedback[data-direction=above]::before{background:linear-gradient(#ffc6e14d,transparent 9%)}
#attack-feedback[data-direction=rear]::before{background:linear-gradient(0deg,#c5a4ff55,transparent 9%)}
.attack-cue{position:absolute;left:50%;bottom:calc(var(--race-bottom,12px) + 154px);transform:translateX(-50%);display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:7px;align-items:center;width:244px;max-width:86vw;box-sizing:border-box;padding:8px 12px 9px;border:1px solid #ffdfb9;border-radius:13px;background:#102943ed;color:#fff4df;box-shadow:0 3px 13px #07182966;text-align:left}
.attack-cue>i{font-size:22px;line-height:1;font-style:normal;text-align:center;color:#ffd69c}
.attack-cue strong{display:block;font-size:14px;font-weight:900;line-height:1.35;letter-spacing:.02em}
.attack-cue small{display:block;font-size:10px;line-height:1.5;color:#e4edf6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attack-cue>span{position:absolute;bottom:0;left:10px;right:10px;height:3px;overflow:hidden;border-radius:2px;background:#ffffff20}
.attack-cue>span>b{display:block;height:100%;background:#ffd399;transform-origin:left center}
.attack-cue[data-urgent=true]{border-color:#fff0bd;background:#25445af5}
.attack-cue[data-mode=success]{border-color:#a3ffe4;background:#123e4aef;color:#c0fff0}
.attack-cue[data-mode=success]>i{color:#ffe89f}
.attack-cue[data-mode=success]>span>b{background:linear-gradient(90deg,#86f6cf,#9be2ff,#d5b7ff)}
body.racing #touch #touch-jump.dodge-ready{outline:2px solid #fff3ad;outline-offset:2px;box-shadow:0 0 16px #ffe0a5aa;animation:dodge-button-glow .6s ease-in-out infinite alternate}
@keyframes dodge-button-glow{to{filter:brightness(1.2)}}
@media(min-width:761px){.attack-cue{bottom:135px;width:270px;padding:10px 14px 11px}.attack-cue strong{font-size:16px}.attack-cue small{font-size:11px}}
body.local-versus:not(.online-race) #attack-cue-1{left:25%;max-width:44vw}
body.local-versus:not(.online-race) #attack-cue-2{left:75%;max-width:44vw}
@media(max-height:500px){.attack-cue{bottom:calc(var(--race-bottom,10px) + 94px);padding:5px 10px 6px;max-width:240px}.attack-cue strong{font-size:12px}.attack-cue small{font-size:9px}}
@media(prefers-reduced-motion:reduce){body.racing #touch #touch-jump.dodge-ready{animation:none}}
body.racing #branch-prompt[data-rainbow=true]{border:1px solid #c6fff0;background:linear-gradient(110deg,#174d56ef,#343666ed);color:#edfff5;box-shadow:0 3px 12px #09233c50;padding:7px 12px;border-radius:11px;font-weight:800;line-height:1.4;white-space:normal;pointer-events:none}
body.racing #branch-prompt[data-finale]{border:1px solid #c2fff0;background:linear-gradient(110deg,#143b52f0,#30365aed);color:#defff3;box-shadow:0 3px 12px #08253f50;padding:7px 12px;border-radius:11px;font-weight:800;line-height:1.4;white-space:normal;pointer-events:none}
body.racing #branch-prompt[data-finale=ice]{border-color:#c5f2ff;color:#e8faff;background:linear-gradient(110deg,#19425bf0,#34496bed)}

/* A compact atelier scrolls within the setup area; the race action stays in reach. */
#menu:not([data-screen=style]) #wardrobe-panel{display:none}
#menu[data-screen=style] .intro,#menu[data-screen=style] #driver-panel,#menu[data-screen=style] #settings-panel,#menu[data-screen=style] #items-panel{display:none!important}
#menu[data-screen=style] .setup{display:block;width:min(100%,1000px);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:16px;scrollbar-width:thin;scrollbar-color:#8ee5d3 #142d46}
.wardrobe-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.wardrobe-heading span{color:#a9e9da;font-size:9px;font-weight:800;letter-spacing:.14em}.wardrobe-heading h2{margin:4px 0 0;font-size:24px;line-height:1.25;color:#f0fff8}
.wardrobe-wallet{display:flex;align-items:center;gap:5px;flex:none;padding:9px 12px;background:#173e50;border:1px solid #8fe6cd;border-radius:13px;color:#fff0bc;font-weight:900}.wardrobe-wallet b{font-size:23px;font-variant-numeric:tabular-nums}
.wardrobe-intro,.wardrobe-save-note{margin:9px 0;color:#c4dce5;font-size:11px;line-height:1.6}.wardrobe-save-note{text-align:center;margin-bottom:0}
.wardrobe-racers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:12px 0}.wardrobe-racers button{min-height:54px;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;padding:5px;border:1px solid #68889b;border-radius:10px;background:#122d46;color:#e4f8fa;font-size:12px;font-weight:800}.wardrobe-racers img,.wardrobe-racers svg{width:34px;height:34px;border-radius:9px;object-fit:cover}.wardrobe-racers .selected{border-color:#c8fff0;background:#235569;color:#fff}
.wardrobe-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px}.wardrobe-showroom{min-width:0;background:#0d263f;border:1px solid #7793ad66;border-radius:16px;overflow:hidden}.wardrobe-showroom h3{font-size:14px;text-align:center;margin:12px 8px 0;color:#dffff3}#wardrobe-preview{display:block;width:100%;height:260px;touch-action:pan-y}#wardrobe-trial{margin:0 10px 8px;text-align:center;color:#ceeff3;font-size:11px}.wardrobe-turn{display:flex;align-items:center;gap:9px;margin:10px 12px 12px;color:#c9e3ee;font-size:10px}.wardrobe-turn input{flex:1;min-width:0;min-height:44px;accent-color:#8ae9d6}.wardrobe-options{min-width:0}
.wardrobe-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}.wardrobe-parts button{min-height:44px;border:1px solid #60869b;border-radius:10px;background:#112e47;color:#d9edf4;font-size:12px;font-weight:800}.wardrobe-parts .selected{background:#a8ecd9;color:#113a4e;border-color:#defff5}
.wardrobe-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.wardrobe-item{min-width:0;min-height:94px;display:grid;justify-items:center;align-content:center;gap:5px;padding:8px 4px;border:1px solid #7791a3;border-radius:12px;background:#17344d;color:#ecf9ff;text-align:center}.wardrobe-item>i{display:grid;place-items:center;font-size:25px;line-height:1.1;color:var(--style-color);font-style:normal;text-shadow:0 1px 4px #081f35}.wardrobe-item strong{font-size:10px;line-height:1.4;overflow-wrap:anywhere}.wardrobe-item small{font-size:10px;color:#eaddb7}.wardrobe-item.selected{border:2px solid #b6ffdf;background:#245067;padding:7px 3px}.wardrobe-item.owned small{color:#b1f4d5}.wardrobe-item:focus-visible,.wardrobe-racers button:focus-visible,.wardrobe-parts button:focus-visible{outline:2px solid #fff0b5;outline-offset:2px}
.wardrobe-decision{margin-top:10px;padding:12px 0 0;border-top:1px solid #809ab34d}.wardrobe-decision>strong{display:block;text-align:center;font-size:14px;color:#fff5d7}.wardrobe-decision p{margin:5px 0 9px;text-align:center;font-size:11px;line-height:1.5;color:#cce2eb}#wardrobe-action{width:100%;min-height:46px;padding:8px;font-size:13px;line-height:1.3;border-radius:12px}#wardrobe-action:disabled{background:#1c3b50;color:#b5d2dc;border-color:#6b889b;box-shadow:none;cursor:default;opacity:1}
#wardrobe-preview-fallback{min-height:150px;text-align:center;padding:18px;font-size:12px}#wardrobe-preview-fallback img{display:block;width:100px;height:100px;object-fit:cover;border-radius:20px;margin:0 auto 10px}.wardrobe-reward{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;border:1px solid #9df1d4;border-radius:13px;padding:10px 12px;margin:12px 0;background:#183f4edb}.wardrobe-reward strong{display:block;font-size:14px;color:#ffedb1}.wardrobe-reward small{display:block;margin-top:5px;font-size:10px;color:#c5efee}.wardrobe-reward button{flex:none;min-height:44px;padding:6px 10px;width:auto;font-size:11px;margin:0}
@media(max-width:760px){#menu[data-screen=style] .setup{padding:12px}.wardrobe-heading h2{font-size:20px}.wardrobe-wallet{padding:6px 10px}.wardrobe-wallet b{font-size:21px}.wardrobe-layout{grid-template-columns:1fr;gap:12px}.wardrobe-racers{margin:9px 0;gap:4px}.wardrobe-racers button{flex-direction:column;gap:3px;font-size:9px;min-height:57px}.wardrobe-racers img,.wardrobe-racers svg{width:30px;height:30px}.wardrobe-showroom h3{margin-top:9px}#wardrobe-preview{height:200px}.wardrobe-turn{margin-top:5px;margin-bottom:8px}.wardrobe-item{min-height:86px}.wardrobe-intro{font-size:10px}.wardrobe-decision{padding:10px 0 2px}.wardrobe-reward{gap:6px;padding:8px}.wardrobe-reward strong{font-size:12px}.wardrobe-reward small{font-size:9px}}
@media(max-height:650px){#wardrobe-preview{height:145px}.wardrobe-racers button{min-height:45px}.wardrobe-racers img,.wardrobe-racers svg{width:24px;height:24px}.wardrobe-heading h2{font-size:18px}.wardrobe-racers{margin:7px 0}.wardrobe-item{min-height:78px}.wardrobe-item>i{font-size:22px}}
body.racing #touch #touch-jump.rainbow-ready{outline:2px solid #d3fff0;outline-offset:2px;box-shadow:0 0 14px #aeeedfa6;background:linear-gradient(135deg,#bcffe3,#9beaff,#cfb8ff)}
@media(forced-colors:active){.attack-cue{background:Canvas;color:CanvasText;border-color:CanvasText}.attack-cue strong,.attack-cue small,.attack-cue>i{color:CanvasText}#attack-feedback::before{display:none}}
.online-cup-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#d7ffed}.online-cup-heading>strong{font-size:17px}.online-cup-heading>span{white-space:nowrap;font-size:12px;color:#f7e4a0}.online-panel>p{font-size:12px;line-height:1.6;color:#cde5ed}.online-panel>input{width:100%;min-height:44px;margin:5px 0 12px;padding:9px 12px;border:1px solid #799ab1;border-radius:10px;background:#102b43;color:#edfbff;font:inherit;font-size:14px}.online-panel label{font-size:13px}.online-cup-route{line-height:1.7;font-size:11px;color:#bcf2e0}.online-six-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0}.online-seat{display:flex;align-items:center;gap:7px;padding:9px 7px;border:1px solid #7294a766;border-radius:11px;background:#112e43;min-height:62px;min-width:0}.online-seat img{width:36px;height:36px;object-fit:cover;border-radius:10px}.online-seat>span{min-width:0;display:grid;gap:4px}.online-seat strong{font-size:12px;color:#edfbff}.online-seat small{font-size:10px;color:#b6d9e1;line-height:1.4;overflow-wrap:anywhere}.online-seat.is-you{border-color:#acf8df;background:#194655}.online-seat.is-empty{justify-content:center;color:#aac7d7;font-size:11px}.online-invitation{display:grid;gap:7px}.online-invitation button{margin:0!important;min-height:44px}.online-invitation input{min-width:0;width:100%;min-height:44px;border:1px solid #7593a4;background:#0f263b;color:#c3e6e9;border-radius:8px;padding:8px;font-size:11px}.online-result-actions h3{text-align:center;color:#b6ffe3;font-size:20px;margin:8px 0 12px}.online-result-actions ol{padding:0;margin:0;list-style:none;display:grid;gap:5px}.online-result-actions li{display:grid;grid-template-columns:26px 32px minmax(0,1fr) 58px;align-items:center;gap:7px;padding:7px 9px;border:1px solid #88b0bc44;border-radius:10px;background:#112b4166;font-size:13px}.online-result-actions li img{width:30px;height:30px;border-radius:50%;object-fit:cover}.online-result-actions li>b{color:#f2dc9c}.online-result-actions li>strong{color:#b3f6db;text-align:right}.online-result-actions li.is-you{background:#246567aa;border-color:#b4f3d7}.online-result-actions li span{overflow-wrap:anywhere;text-align:left}.online-result-actions p{font-size:12px;line-height:1.6;text-align:center;color:#d4e9ef}.online-result-actions>button{width:100%;margin:8px 0 0!important;min-height:46px;font-size:14px;padding:10px}.online-result-actions>button:disabled{opacity:.7;cursor:default}.online-race #restart{display:none}#online-connection{position:fixed;top:calc(env(safe-area-inset-top) + 110px);left:50%;transform:translateX(-50%);z-index:100;padding:10px 16px;max-width:90vw;border:1px solid #ffe0a2;border-radius:12px;background:#173348ee;color:#fff0c3;font-size:13px;text-align:center;pointer-events:none}.online-race #online-result-actions{display:block}.online-race #online-result-actions[hidden]{display:none}
@media(max-width:400px){.online-cup-heading>strong{font-size:14px}.online-seat img{width:28px;height:28px}.online-seat strong{font-size:11px}.online-seat{padding:7px 5px;gap:5px}.online-result-actions li{font-size:12px;gap:5px}.online-result-actions h3{font-size:17px}}
#menu>.online-panel{grid-area:2/1;justify-self:center;align-self:stretch;max-width:900px;width:100%;margin:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:#102b43ef;border:1px solid #8fc2ce77;border-radius:20px;padding:15px 18px;color:#d9edf4;scrollbar-width:thin}#menu:not([data-screen=course])>.online-panel{display:none!important}#menu[data-screen=course][data-mode=online]>.intro{display:none!important}#menu[data-screen=course][data-mode=online]{grid-template-rows:44px minmax(0,1fr) 0 18px}#menu>.online-panel .online-back{display:block;width:auto;min-height:44px;margin:0 0 8px;padding:6px 0;border:0;background:none;color:#b8ebe1;font-size:12px;font-weight:700}#menu>.online-panel label{color:#cce9ed}#online-course-select{display:block;width:100%;min-height:44px;background:#14384e;border:1px solid #7a9ba9;border-radius:9px;color:#edfbff;padding:9px;font:inherit;font-size:13px;margin:5px 0 10px}.online-panel #online-status{color:#c5f1e4!important}.online-lobby-actions>button{min-height:44px}.online-actions>button,.online-room-code>button{min-height:44px}.online-six-roster{grid-template-columns:repeat(3,minmax(0,1fr))}body.online-race #map{display:block}@media(max-width:600px){#menu>.online-panel{padding:10px 12px}.online-six-roster{grid-template-columns:repeat(2,minmax(0,1fr))}.online-actions{display:grid;grid-template-columns:minmax(0,1fr) auto}.online-actions input{min-width:0;width:100%}.online-actions #online-host{grid-column:1/-1;width:100%}.online-room-code>strong{font-size:23px;letter-spacing:3px}}
#online-panel[data-joined=true]>.online-actions,#online-panel[data-joined=true]>label,#online-panel[data-joined=true]>input{display:none}#online-panel[data-joined=true]>.online-cup-heading{margin-bottom:5px}

/* Live rear view: the main road remains unobstructed. */
#rear-mirrors{position:fixed;inset:0;z-index:7;pointer-events:none}.rear-view{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:216px;height:74px;padding:0;overflow:hidden;border:2px solid #a1dcd5;border-radius:11px;background:#173449;box-shadow:0 3px 10px #04162c55;pointer-events:auto;touch-action:none;user-select:none;transition:none}.rear-view canvas{display:block;width:100%;height:100%;transform:scaleX(-1);object-fit:cover}.rear-view>span{position:absolute;bottom:2px;left:5px;background:#102d43b8;border-radius:4px;padding:1px 4px;color:#eaffff;font-size:9px;font-weight:800;letter-spacing:.06em}.rear-view>i{position:absolute;right:4px;bottom:2px;padding:1px 4px;color:#edfffb;background:#102d43b8;border-radius:4px;font-size:12px;font-style:normal}.rear-view:focus-visible{outline:3px solid #ffe7a5;outline-offset:3px}.rear-view[data-threat=true]{border-color:#ffd991;box-shadow:0 0 0 2px #ff91b3,0 0 14px #ffb36c77}.rear-view[data-threat=true]>span{background:#8e3456;color:#fff1c5}.expanded .rear-view{width:320px;height:114px}.has-rear-mirror header .brand-copy{display:none}#rear-mirrors.split .rear-view{width:132px;height:48px}#rear-mirrors.split .rear-one{top:116px;left:calc(100% - 86px)}#rear-mirrors.split .rear-two{top:calc(50% + 116px);left:calc(100% - 86px)}#rear-mirrors.split.expanded .rear-view{width:164px;height:62px;left:calc(100% - 100px)}
@media(max-width:760px) and (orientation:portrait){.rear-view{top:max(6px,env(safe-area-inset-top));width:152px;height:54px;border-radius:9px}.rear-view>span{font-size:8px}.rear-view>i{font-size:10px}.expanded .rear-view{top:48px;width:220px;height:80px}body.has-rear-mirror #hud:not(.duel-mode) .position,body.has-rear-mirror #hud:not(.duel-mode) .lap{top:65px}body.has-rear-mirror #hud:not(.duel-mode) #rival-status,body.has-rear-mirror #hud:not(.duel-mode) #weather-status{top:108px}body.has-rear-mirror #hud:not(.duel-mode) #course-event-status,body.has-rear-mirror #hud:not(.duel-mode) #challenge-gate-status{top:137px}body.has-rear-mirror #announcement{top:164px}body.rear-expanded #hud:not(.duel-mode) .position,body.rear-expanded #hud:not(.duel-mode) .lap{top:137px}body.rear-expanded #hud:not(.duel-mode) #rival-status,body.rear-expanded #hud:not(.duel-mode) #weather-status{top:180px}body.rear-expanded #hud:not(.duel-mode) #course-event-status,body.rear-expanded #hud:not(.duel-mode) #challenge-gate-status{top:210px}body.rear-expanded #announcement{top:237px}}
@media(max-width:350px) and (orientation:portrait){.rear-view{width:130px;height:50px}.expanded .rear-view{width:200px;height:76px}}
@media(orientation:landscape){#rear-mirrors.split .rear-one{top:118px;left:25%}#rear-mirrors.split .rear-two{top:118px;left:75%}#rear-mirrors.split.expanded .rear-view{width:174px;height:64px}}
@media(max-height:500px) and (orientation:landscape){.rear-view{top:5px;width:180px;height:58px}.expanded .rear-view{top:4px;width:240px;height:76px}#rear-mirrors.split .rear-view{top:95px}}
@media(prefers-reduced-motion:reduce){.rear-view{transition:none}}

/* Larger live GPU mirror, with sound and pause on either side on phones. */
.rear-view{width:324px;height:108px}
.rear-view[data-live=true]{background:transparent}
.rear-view canvas{display:none}
.expanded .rear-view{width:444px;height:148px}
@media(max-width:760px) and (orientation:portrait){
 body.has-rear-mirror{--rear-h:clamp(68px,calc((100vw - 116px)/3),96px)}
 body.has-rear-mirror header{height:0;padding:0;pointer-events:none}
 body.has-rear-mirror header .brand{display:none}
 body.has-rear-mirror header #sound,body.has-rear-mirror header #pause{position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + (var(--rear-h) - 48px)/2);width:46px;height:48px;min-height:48px;padding:4px;pointer-events:auto;font-size:10px}
 body.has-rear-mirror header #sound{left:6px;right:auto}
 body.has-rear-mirror header #pause{left:auto;right:6px}
 .rear-view{top:max(8px,env(safe-area-inset-top));width:min(288px,calc(100vw - 116px));height:var(--rear-h);border-radius:11px}
 .rear-view>span{font-size:10px;bottom:3px}
 .rear-view>i{font-size:12px;bottom:3px}
 body.has-rear-mirror #hud:not(.duel-mode) .position,body.has-rear-mirror #hud:not(.duel-mode) .lap{top:calc(max(8px,env(safe-area-inset-top)) + var(--rear-h) + 8px)}
 body.has-rear-mirror #hud:not(.duel-mode) #rival-status,body.has-rear-mirror #hud:not(.duel-mode) #weather-status{top:calc(max(8px,env(safe-area-inset-top)) + var(--rear-h) + 52px)}
 body.has-rear-mirror #hud:not(.duel-mode) #course-event-status,body.has-rear-mirror #hud:not(.duel-mode) #challenge-gate-status{top:calc(max(8px,env(safe-area-inset-top)) + var(--rear-h) + 81px)}
 body.has-rear-mirror #announcement{top:calc(max(8px,env(safe-area-inset-top)) + var(--rear-h) + 108px)}
 body.rear-expanded{--rear-h:clamp(100px,calc((100vw - 20px)/3),120px)}
 .expanded .rear-view{top:max(8px,env(safe-area-inset-top));width:min(360px,calc(100vw - 20px));height:var(--rear-h)}
 body.rear-expanded header{visibility:hidden}
 #rear-mirrors.split .rear-view{width:174px;height:60px;left:calc(100% - 103px)}
 #rear-mirrors.split.expanded .rear-view{width:216px;height:74px;left:calc(100% - 124px)}
}
@media(orientation:landscape){#rear-mirrors.split .rear-view{width:174px;height:60px}#rear-mirrors.split.expanded .rear-view{width:222px;height:76px}}
@media(max-height:500px) and (orientation:landscape){.rear-view{top:5px;width:246px;height:78px}.expanded .rear-view{top:5px;width:288px;height:92px}}
.rear-view:active{transform:translateX(-50%)}

/* Two visible item slots share the lower HUD with skill, map and speed. */
body.racing #hud:not(.duel-mode) #reserve-slot{top:auto;bottom:22px;left:calc(4.5% + 92px);width:82px;height:96px;min-height:0;padding:6px;border-radius:14px;background:#142e46ed;color:#e8ffff;border:2px solid #83bdcf;touch-action:none}
body.racing #hud:not(.duel-mode) #skill-slot{left:calc(4.5% + 184px)}
#reserve-slot>span{display:block;font-size:8px;color:#bcebf3}
#reserve-slot b{font-size:30px;color:#9beddb;line-height:1;margin:4px 0}
#reserve-name{display:block;font-size:9px;line-height:1.3;color:#e8ffff;overflow-wrap:anywhere}
#reserve-help{display:block;font-size:8px;color:#bcebf3;margin-top:3px}
#reserve-slot:disabled{opacity:.65;cursor:default}
#reserve-slot.has-item{border-color:#a7a1f3;box-shadow:0 0 0 1px #c5c7ff44,inset 0 1px #ffffff22}
#reserve-slot:active:not(:disabled){border-color:#ffe8a9;background:#254c66}
@media(max-width:760px) and (orientation:portrait){
 body.racing{--loadout-item:clamp(44px,14vw,60px)}
 body.racing #hud:not(.duel-mode) #item-slot,body.racing #hud:not(.duel-mode) #reserve-slot,body.racing #hud:not(.duel-mode) #skill-slot{top:auto;bottom:calc(var(--race-bottom) + 53px);width:var(--loadout-item);height:72px;min-height:72px;max-height:72px;padding:4px 2px;border-width:2px;border-radius:11px}
 body.racing #hud:not(.duel-mode) #item-slot{left:4%}
 body.racing #hud:not(.duel-mode) #reserve-slot{left:calc(4% + var(--loadout-item) + 4px)}
 body.racing #hud:not(.duel-mode) #skill-slot{left:calc(4% + var(--loadout-item) * 2 + 8px);grid-template-rows:8px minmax(0,1fr) 20px}
 body.racing #hud:not(.duel-mode) #item-slot>span,body.racing #hud:not(.duel-mode) #reserve-slot>span{font-size:6px;line-height:8px;letter-spacing:0}
 body.racing #hud:not(.duel-mode) #item-slot b,body.racing #hud:not(.duel-mode) #reserve-slot b{font-size:25px;line-height:27px;margin:1px 0}
 body.racing #hud:not(.duel-mode) #item-name,body.racing #hud:not(.duel-mode) #reserve-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:7px;line-height:9px;max-height:18px}
 body.racing #hud:not(.duel-mode) #item-help{display:none}
 body.racing #hud:not(.duel-mode) #reserve-help{font-size:6px;line-height:8px;margin-top:1px;white-space:nowrap}
 body.racing #hud:not(.duel-mode) #skill-icon{font-size:25px}
 body.racing #hud:not(.duel-mode) #map{left:calc(4% + var(--loadout-item) * 3 + 12px);bottom:calc(var(--race-bottom) + 58px);width:var(--loadout-item);height:60px;transform:none}
 body.racing #hud:not(.duel-mode) .speed,body.racing #hud:not(.duel-mode) .speed-bar{width:70px}
 body.racing #hud:not(.duel-mode) .speed b{font-size:30px}
 body.racing #hud:not(.duel-mode) .drift{bottom:calc(var(--race-bottom) + 133px)}
 body.racing #hud:not(.duel-mode) #branch-prompt{bottom:calc(var(--race-bottom) + 174px)}
 .attack-cue{bottom:calc(var(--race-bottom,10px) + 178px)}
}
@media(max-width:350px) and (orientation:portrait){body.racing #hud:not(.duel-mode) .speed,body.racing #hud:not(.duel-mode) .speed-bar{width:62px}body.racing #hud:not(.duel-mode) .speed b{font-size:27px}}
@media(max-height:500px) and (orientation:landscape){body.racing #hud:not(.duel-mode) #reserve-slot{bottom:12px;width:54px;height:54px;min-height:0;left:calc(4.5% + 62px);padding:3px}body.racing #hud:not(.duel-mode) #item-slot{width:54px;height:54px;min-height:0;bottom:12px}body.racing #hud:not(.duel-mode) #skill-slot{left:calc(4.5% + 124px);width:54px;height:54px;min-height:0;bottom:12px}#reserve-slot b{font-size:22px;margin:0}#reserve-name{font-size:7px}#reserve-help{display:none}}
body.racing #hud #item-slot.is-rolling,body.racing #hud #reserve-slot.is-rolling{animation:none}
body.racing #hud .item-slot.is-rolling b{animation:inventory-icon-pulse .32s ease-in-out infinite alternate}
@keyframes inventory-icon-pulse{to{transform:scale(1.09);filter:brightness(1.2)}}
@media(prefers-reduced-motion:reduce){body.racing #hud .item-slot.is-rolling b{animation:none}}
body.racing #hud:not(.duel-mode) #reserve-slot{background:#182e48f2!important}
body.racing #hud:not(.duel-mode) #reserve-slot.has-item{background:#2b3556f5!important}
body.racing #hud:not(.duel-mode) #reserve-slot.is-rolling{background:#16465af5!important}
/* On short landscape screens, keep the loadout above the steering row. */
@media(max-height:500px) and (orientation:landscape){
 body.racing #hud:not(.duel-mode) #item-slot,body.racing #hud:not(.duel-mode) #reserve-slot,body.racing #hud:not(.duel-mode) #skill-slot{bottom:80px}
 body.racing #hud:not(.duel-mode) #map{top:auto;bottom:80px;left:calc(4.5% + 180px);right:auto;transform:none;width:64px;height:54px}
 body.racing #hud:not(.duel-mode) .drift{top:auto;bottom:80px;left:calc(4.5% + 254px);transform:none;width:calc(91vw - 344px);min-height:54px;padding:3px 5px}
 body.racing #hud:not(.duel-mode) .drift>div{min-width:0}
 body.racing #hud:not(.duel-mode) .speed{bottom:84px;right:4.5%;width:80px}
 body.racing #hud:not(.duel-mode) .speed b{font-size:36px}
 body.racing #hud:not(.duel-mode) .speed-bar{width:80px}
}
@media(min-width:761px) and (min-height:501px){
 body.racing:has(#touch:not([hidden])) #hud:not(.duel-mode) #item-slot,body.racing:has(#touch:not([hidden])) #hud:not(.duel-mode) #reserve-slot,body.racing:has(#touch:not([hidden])) #hud:not(.duel-mode) #skill-slot{bottom:82px}
}
body.racing #hud:not(.duel-mode) #skill-slot{background:#142e46f2!important}
@media(min-width:761px) and (min-height:501px){
 body.racing:has(#touch:not([hidden])) #hud:not(.duel-mode) #map{left:calc(4.5% + 276px);right:auto;top:auto;bottom:82px;transform:none;width:104px;height:88px}
 body.racing:has(#touch:not([hidden])) #hud:not(.duel-mode) .speed{bottom:82px}
}
@media(max-height:500px) and (orientation:landscape){
 body.racing #hud:not(.duel-mode) #item-slot,body.racing #hud:not(.duel-mode) #reserve-slot{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:8px 24px 12px;align-items:center;gap:0;padding:3px}
 body.racing #hud:not(.duel-mode) #item-slot>span,body.racing #hud:not(.duel-mode) #reserve-slot>span{font-size:6px;line-height:8px;letter-spacing:0;white-space:nowrap}
 body.racing #hud:not(.duel-mode) #item-slot b,body.racing #hud:not(.duel-mode) #reserve-slot b{font-size:22px;line-height:24px;margin:0}
 body.racing #hud:not(.duel-mode) #item-name,body.racing #hud:not(.duel-mode) #reserve-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:7px;line-height:10px}
 body.racing #hud:not(.duel-mode) #item-help{display:none}
 body.racing #hud:not(.duel-mode) #skill-slot{grid-template-rows:8px 24px 14px;padding:3px;gap:0}
 body.racing #hud:not(.duel-mode) #skill-slot>span{font-size:6px;line-height:8px}
 body.racing #hud:not(.duel-mode) #skill-icon{font-size:22px;line-height:24px}
 body.racing #hud:not(.duel-mode) #skill-name{font-size:6px;line-height:7px;max-height:14px}
}
@media(max-width:760px) and (orientation:portrait){body.racing #hud:not(.duel-mode) #reserve-help{font-size:7px;line-height:9px}}

/* The pair link uses the existing rival-label space, leaving the road clear. */
.duo-link{position:absolute;left:4.5%;top:180px;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:7px;width:260px;max-width:52vw;padding:6px 10px 8px;border:1px solid var(--duo-color,#ffb5db);border-radius:11px;background:#102b45eb;color:#efffff;overflow:hidden;pointer-events:none;box-shadow:0 2px 10px #041d3644}
.duo-link>span{font-size:23px;line-height:1;color:var(--duo-color,#ffb5db);text-align:center}
.duo-link strong,.duo-link small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.duo-link strong{font-size:12px;line-height:16px;color:#f5ffff}
.duo-link small{font-size:9px;line-height:13px;color:#bcebdd}
.duo-link>i{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff22}
.duo-link>i>b{display:block;height:100%;background:linear-gradient(90deg,var(--duo-color),var(--duo-accent));width:0}
.duo-link[data-state=active]{border-color:#ffe4a0;background:#254059f2;box-shadow:0 0 0 1px #c3fff044}
body.duo-link-visible #rival-status{visibility:hidden}
.duel-duo{color:#b5ffe8!important;font-weight:800;line-height:1.5;white-space:normal!important}
.duo-guide{margin:12px 0 4px;padding:10px 12px;border:1px solid #9dd9d766;border-radius:11px;background:#12304966;text-align:left;color:#d9f5f4}
.duo-guide summary{min-height:30px;font-size:12px;font-weight:800;cursor:pointer;line-height:1.6}
.duo-guide>p{font-size:11px;line-height:1.8;color:#c4e2e7}
.duo-guide-list{max-height:210px;overflow-y:auto;overscroll-behavior:contain}
.duo-guide-list p{margin:0;padding:7px 0;border-top:1px solid #94c8cc33}
.duo-guide-list strong,.duo-guide-list span{display:block;font-size:10px;line-height:1.7}
.duo-guide-list span{color:#b8d8dd}
@media(max-width:760px) and (orientation:portrait){
 .duo-link{left:4%;top:calc(max(8px,env(safe-area-inset-top)) + var(--rear-h,68px) + 52px);width:min(224px,55vw);grid-template-columns:18px minmax(0,1fr);gap:5px;padding:2px 6px 4px;border-radius:8px;min-height:26px;max-height:28px}
 .duo-link>span{font-size:18px}
 .duo-link strong{font-size:9px;line-height:11px}
 .duo-link small{font-size:7px;line-height:8px}
 .duo-link>i{height:2px}
}
@media(max-height:500px) and (orientation:landscape){.duo-link{top:180px;max-width:42vw;padding:3px 7px 5px}.duo-link strong{font-size:10px;line-height:12px}.duo-link small{font-size:8px;line-height:11px}}
#menu[data-screen=settings] .setup{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#menu[data-screen=settings]:has(.duo-guide[open]) .options,#menu[data-screen=settings]:has(.duo-guide[open]) .assists,#menu[data-screen=settings]:has(.duo-guide[open]) .controls-guide{display:none}
.duo-link>i>b{transition:width .12s linear}
@media(prefers-reduced-motion:reduce){.duo-link>i>b{transition:none}}
/* Story adventures share the garage shell; the story itself scrolls, never the start action. */
#menu[data-mode=adventure][data-screen=course]>.intro{display:none!important}
#menu>#adventure-panel{grid-area:2/1;width:min(100%,1000px);min-height:0;justify-self:center;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a6e8e1 #17334b;padding:16px 22px;background:linear-gradient(140deg,#123d54ef,#182842f5 75%);border:1px solid #9bcdd58a;border-radius:22px;color:#eaf8fa;text-align:center}
#menu:not([data-screen=course])>#adventure-panel{display:none!important}
.adventure-back{display:block;min-height:44px;padding:4px 0;border:0;background:none;color:#c1efe4;font-size:12px;font-weight:700;cursor:pointer}
.adventure-heading>span,.adventure-chapter-detail>span{font-size:10px;letter-spacing:2px;color:#b4ece2;font-weight:800}
.adventure-heading h2{font-size:clamp(23px,3vw,32px);margin:5px 0 6px;color:#eafff7;line-height:1.25}
.adventure-heading>p{margin:0 0 15px;color:#c3dfe5;font-size:13px}
.adventure-racers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;max-width:730px;margin:0 auto 20px}
.adventure-racers button{min-width:0;display:grid;justify-items:center;gap:5px;padding:9px 4px;border:1px solid #7195a7;border-radius:13px;background:#102a43;color:#e9f8ff;cursor:pointer}
.adventure-racers img{width:76px;max-width:100%;aspect-ratio:1;object-fit:cover;border-radius:13px}.adventure-racers strong{font-size:13px}.adventure-racers small{font-size:9px;color:#b7d7de}
.adventure-racers .selected{border:2px solid var(--adventure-color);padding:8px 3px;background:#30546b;box-shadow:0 0 0 2px #eaffff18}
#adventure-title{margin:5px 0 9px;font-size:20px;color:var(--adventure-color);line-height:1.5}#adventure-intro{font-size:13px;line-height:1.8;color:#d6e8ee;max-width:600px;margin:0 auto 16px}
.adventure-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 auto 14px;max-width:790px}
.adventure-chapters button{display:grid;align-content:center;gap:5px;min-height:68px;padding:9px 7px;border:1px solid #6d92a5;border-radius:11px;background:#112f49;color:#e4f4fa;cursor:pointer}
.adventure-chapters button b{font-size:10px;letter-spacing:1px}.adventure-chapters button span{font-size:12px;line-height:1.4}.adventure-chapters .selected{border-color:var(--adventure-color);background:#33556b}.adventure-chapters button:disabled{opacity:.45;cursor:not-allowed}
.adventure-chapter-detail{max-width:790px;margin:0 auto;background:#0a2239a3;border:1px solid #83c4c666;border-radius:14px;padding:17px 22px}.adventure-chapter-detail>span{letter-spacing:.8px;font-size:10px}.adventure-chapter-detail h4{font-size:21px;margin:8px 0;color:#fff2c9}.adventure-chapter-detail>p{font-size:14px;line-height:1.8;margin:10px auto;max-width:630px}
#adventure-goals{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;list-style:none;padding:0;margin:14px 0}#adventure-goals li{background:#285368;color:#dffff1;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:800}
.adventure-prize{display:flex;justify-content:center;align-items:center;gap:12px;border-top:1px solid #8ed4d33d;padding-top:13px;margin-top:14px}.adventure-prize>b{font-size:32px;color:var(--adventure-color)}.adventure-prize span>*{display:block}.adventure-prize small{font-size:10px;color:#c1dce1;line-height:1.8}.adventure-prize strong{font-size:16px;color:#fff0c4;line-height:1.6}.adventure-save-note{font-size:10px;color:#b3d4dd;line-height:1.6;margin:12px 0 0}
.adventure-back:focus-visible,.adventure-racers button:focus-visible,.adventure-chapters button:focus-visible{outline:3px solid #fff1b0;outline-offset:2px}
.wardrobe-parts{grid-template-columns:repeat(4,minmax(0,1fr))}
.adventure-result{margin:14px 0 20px;border:1px solid #9de9d099;border-radius:16px;padding:16px;background:#133e51bb;text-align:center;color:#effbfc}.adventure-result #adventure-result-portrait img{width:64px;height:64px;border-radius:50%;border:2px solid #c0f3df}.adventure-result>strong{display:block;color:#b7ffe0;letter-spacing:1px;margin:8px 0}.adventure-result>p{font-size:13px;line-height:1.8;margin:8px auto}.adventure-result ul{display:flex;flex-wrap:wrap;list-style:none;gap:6px;justify-content:center;padding:0}.adventure-result li{font-size:12px;border-radius:7px;background:#0d293ec7;padding:7px 10px}.adventure-result .met{color:#b8ffe0}.adventure-result .missed{color:#ffe0b4}.adventure-result #adventure-result-prize{font-weight:800;color:#ffecae}.adventure-result .secondary{width:100%;min-height:44px;margin:12px 0 0!important}.adventure-result .secondary:disabled{opacity:.65}#adventure-next{margin:14px 0;justify-content:center;min-height:56px;text-align:center}
.adventure-hud{position:absolute;left:4.5%;top:180px;max-width:52vw;width:260px;padding:6px 10px 8px;background:#123048ed;border:1px solid var(--adventure-color,#ade7df);border-radius:10px;color:#efffff;pointer-events:none;overflow:hidden}.adventure-hud strong,.adventure-hud small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adventure-hud strong{font-size:11px;color:var(--adventure-color);line-height:15px}.adventure-hud small{font-size:11px;line-height:15px}.adventure-hud>i{position:absolute;bottom:0;left:0;right:0;height:3px;background:#b9e4e52b}.adventure-hud>i>b{display:block;height:100%;width:0;background:var(--adventure-color)}.adventure-hud[data-ready=true]{border-color:#b5ffda}body.adventure-race #rival-status{visibility:hidden}body.duo-link-visible #adventure-hud{visibility:hidden}
@media(max-width:760px){#menu>#adventure-panel{padding:9px 12px}.adventure-heading>p{font-size:12px;margin-bottom:12px}.adventure-racers{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:14px}.adventure-racers button{grid-template-columns:40px 1fr;column-gap:6px;align-items:center;padding:7px;justify-items:start}.adventure-racers .selected{padding:6px}.adventure-racers img{width:40px;grid-area:1/1/3/2;border-radius:9px}.adventure-racers strong{font-size:12px}.adventure-racers small{font-size:9px}.adventure-chapters{gap:5px}.adventure-chapters button{min-height:72px;padding:6px 4px}.adventure-chapters button b{font-size:8px;letter-spacing:.5px}.adventure-chapters button span{font-size:10px}#adventure-title{font-size:18px}#adventure-intro{font-size:12px}.adventure-chapter-detail{padding:13px 11px}.adventure-chapter-detail h4{font-size:19px}.adventure-chapter-detail>p{font-size:13px}#adventure-goals li{font-size:12px}.adventure-prize strong{font-size:14px}.adventure-prize small{font-size:9px}.adventure-result{padding:12px}.adventure-result>p{font-size:12px}}
@media(max-width:760px) and (orientation:portrait){.adventure-hud{left:4%;top:calc(max(8px,env(safe-area-inset-top)) + var(--rear-h,68px) + 52px);width:55vw;max-width:55vw;padding:2px 6px 4px;min-height:26px;max-height:28px;border-radius:8px}.adventure-hud strong{font-size:8px;line-height:10px}.adventure-hud small{font-size:9px;line-height:10px}.adventure-hud>i{height:2px}}
body.demo-mode #mode-adventure,body.demo-mode #adventure-panel{display:none!important}
.adventure-racers img{height:76px;min-width:0}.adventure-result #adventure-result-portrait img{object-fit:cover}
@media(max-width:760px){.adventure-racers img{height:40px}}
.wardrobe-catalog[data-part=machine]{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Result pagination keeps the full classification and all actions inside the viewport. */
.result-page-header,.result-page-copy,.result-page-content,.result-pane,.result-page-actions,.result-page-primary,.result-page-secondary,.result-online-primary{display:contents}
.result-page-header,.result-page-actions{position:static;inset:auto;width:auto;margin:0;padding:0}.result-tabs{display:none}
#overlay.result-paged{inset:0;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden!important;align-items:center;justify-items:center}
#overlay.result-paged .modal{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 44px minmax(0,1fr) auto;gap:10px;width:min(640px,100%);height:min(740px,calc(100dvh - 24px));max-height:100%;min-height:0;overflow:hidden!important;padding:16px!important;margin:0!important;border:1px solid #a6e7df88;border-radius:23px;background:linear-gradient(145deg,#10364cdd,#152d48db 60%,#322e50da);box-sizing:border-box}
#overlay.result-paged .result-page-header{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;min-width:0;min-height:0;text-align:center}
#overlay.result-paged .result-page-copy{display:grid;gap:5px;min-width:0}
#overlay.result-paged #finish-showcase{display:block!important;position:relative;inset:auto;width:64px;height:64px;min-height:0;margin:0!important;padding:0!important;border:0;background:none;box-shadow:none;overflow:visible;transform:none}
#overlay.result-paged #finish-showcase .finish-copy,#overlay.result-paged #finish-showcase .finish-lineup,#overlay.result-paged #finish-showcase .finish-spark{display:none!important}
#overlay.result-paged #finish-showcase .finish-medal{position:relative;inset:auto;width:64px;height:64px;min-width:0;transform:none;margin:0!important}
#overlay.result-paged #finish-place{font-size:28px;line-height:1}#overlay.result-paged .finish-medal small{font-size:7px}#overlay.result-paged .finish-medal>span{font-size:12px}
#overlay.result-paged #result-label{display:block;width:100%;margin:0;padding:0;font-size:9px;letter-spacing:1px;line-height:1.5;text-align:center}
#overlay.result-paged #result-title{margin:0!important;padding:0;font-size:clamp(21px,3vw,28px);line-height:1.3;letter-spacing:.01em;text-align:center}
#overlay.result-paged #result-text{margin:0!important;font-size:11px;line-height:1.6;color:#d6edf0;text-align:center;text-wrap:balance}
#overlay.result-paged .result-tabs{display:flex;gap:6px;min-width:0;margin:0;padding:0}
#overlay.result-paged .result-tabs button{flex:1;min-width:0;width:auto;min-height:44px;height:44px;margin:0!important;padding:5px 7px;border:1px solid #8db6c3;border-radius:10px;background:#122e47;color:#d8eef4;font-size:12px;font-weight:800;cursor:pointer;line-height:1.3}
#overlay.result-paged .result-tabs button[aria-selected=true]{background:linear-gradient(110deg,#8eecd5,#b1c9f5);border-color:#d3fff1;color:#12374d;box-shadow:0 2px 0 #3b8495}
#overlay.result-paged .result-tabs button:focus-visible{outline:3px solid #ffeca9;outline-offset:2px}
#overlay.result-paged .result-page-content{display:block;min-height:0;overflow:hidden;position:relative}
#overlay.result-paged .result-pane{display:none;height:100%;min-height:0;overflow:hidden;align-content:center;gap:10px}
#overlay.result-paged .result-pane.is-current{display:grid}
#overlay.result-paged #results{width:100%;margin:0!important;min-height:0}
#overlay.result-paged .finish-times{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:13px;margin:0}
#overlay.result-paged .finish-times th{font-size:10px;line-height:1.5;padding:7px 6px!important;height:auto;color:#c4e2e7}
#overlay.result-paged .finish-times th:first-child{width:15%}#overlay.result-paged .finish-times th:last-child{width:33%}
#overlay.result-paged .finish-times td{height:38px;padding:5px 7px!important;font-size:13px;line-height:1.3;border-bottom:1px solid #a4c3d324}
#overlay.result-paged .finish-times .result-racer{white-space:normal;overflow-wrap:anywhere;text-align:center}#overlay.result-paged .finish-times .result-rank{font-size:15px}#overlay.result-paged .finish-times .result-time{font-size:14px;white-space:nowrap;text-align:center}
#overlay.result-paged .result-badge{font-size:8px;margin-left:4px;padding:1px 3px}
#overlay.result-paged #results .results-status{font-size:10px;line-height:1.5;margin:8px 0 0;padding:0;border:0;text-align:center;display:block;color:#c0dde3}
#overlay.result-paged #cup-standings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0!important;padding:0}
#overlay.result-paged #cup-standings .cup-row{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:3px;min-height:45px;margin:0;padding:8px 5px;text-align:center;font-size:12px;border:1px solid #98ced14a;border-radius:9px;background:#102c458c}
#overlay.result-paged .cup-row span{font-size:11px;line-height:1.4;overflow-wrap:anywhere;white-space:normal;text-align:center}#overlay.result-paged .cup-row b{font-size:14px;line-height:1.2;text-align:center}
#overlay.result-paged #wardrobe-reward{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;margin:0!important;border-radius:12px;min-height:60px}#overlay.result-paged #wardrobe-reward strong{font-size:13px;line-height:1.5}#overlay.result-paged #wardrobe-reward small{font-size:10px;line-height:1.5}#overlay.result-paged #wardrobe-reward-open{width:auto;min-height:44px;margin:0!important;padding:6px 9px;flex:none;font-size:11px}
#overlay.result-paged #cup-tuning{padding:12px!important;margin:0!important;background:#153b4bba;border-radius:14px;min-height:0}
#overlay.result-paged .tuning-heading{display:block;text-align:center;margin:0 0 9px}#overlay.result-paged .tuning-heading h3{font-size:18px;margin:4px 0}#overlay.result-paged .tuning-heading p{font-size:10px;margin:0}#overlay.result-paged .tuning-kicker{font-size:9px}
#overlay.result-paged .tuning-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}#overlay.result-paged .tuning-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:92px;padding:10px 6px!important;margin:0!important;text-align:center;border-radius:11px;background:#122b43;color:#eafaff}
#overlay.result-paged .tuning-icon{position:static;font-size:16px;line-height:1}#overlay.result-paged .tuning-option strong{font-size:12px;padding:0;line-height:1.3;color:inherit}#overlay.result-paged .tuning-option small{font-size:10px;line-height:1.4;color:inherit}#overlay.result-paged .tuning-option b{font-size:10px;line-height:1.45;color:inherit}#overlay.result-paged .tuning-option[aria-pressed=true]{background:#b0e9d6;color:#163d4c;border-color:#d6fff2}#overlay.result-paged .tuning-note{font-size:10px;line-height:1.6;margin:8px 0 0;text-align:center}
#overlay.result-paged .result-page-actions{display:grid;position:static;grid-template-columns:1fr;gap:8px;border-top:1px solid #a7e1df44;padding-top:10px;color:inherit;letter-spacing:0;min-width:0}
#overlay.result-paged .result-page-primary{display:grid;gap:6px;min-width:0}#overlay.result-paged .result-online-primary{display:grid;gap:6px;min-width:0}#overlay.result-paged .result-page-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#overlay.result-paged .result-page-actions button{width:100%;min-height:44px;margin:0!important;padding:8px 10px!important;font-size:12px;line-height:1.45;justify-content:center;text-align:center;white-space:normal;border-radius:12px;letter-spacing:0}
#overlay.result-paged .result-page-primary button{min-height:48px;background:linear-gradient(105deg,#8bead5,#a9c9f6);color:#10334a;border:1px solid #d8fff2;font-weight:900;box-shadow:0 3px 0 #347f92}
#overlay.result-paged .result-page-secondary button{background:#132e45d9;border:1px solid #8caeba;color:#f0fcff;box-shadow:none}#overlay.result-paged .result-page-secondary .result-retry-primary{background:#a5e9db;color:#12394b;border-color:#d5fff2}
#overlay.result-paged .result-page-actions[data-has-next=false] .result-page-primary{display:none}
#overlay.result-paged .result-page-actions[data-online=true] #restart{display:none}#overlay.result-paged .result-page-actions[data-online=true] .result-page-secondary{grid-template-columns:1fr}
#overlay.result-paged #online-result-actions{display:block;margin:0!important;padding:0!important}#overlay.result-paged #online-cup-title{font-size:16px;line-height:1.4;margin:0 0 8px}#overlay.result-paged #online-cup-scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;margin:0}#overlay.result-paged #online-cup-scores li{display:grid;grid-template-columns:20px 28px minmax(0,1fr);gap:4px;padding:6px;min-height:46px;font-size:10px;margin:0}#overlay.result-paged #online-cup-scores img{width:28px;height:28px}#overlay.result-paged #online-cup-scores li strong{grid-column:2/4;font-size:12px}#overlay.result-paged #online-cup-note{font-size:10px;margin:8px 0;line-height:1.5}#overlay.result-paged #online-photo-save{min-height:44px;margin:8px 0 0;padding:7px 10px;font-size:11px}
#overlay.result-paged .adventure-result{margin:0!important;padding:10px;border-radius:12px}#overlay.result-paged #adventure-result-portrait img{width:40px;height:40px}#overlay.result-paged #adventure-result-kicker{font-size:12px;margin:5px 0}#overlay.result-paged #adventure-result-story{font-size:12px;line-height:1.6;margin:5px 0}#overlay.result-paged #adventure-result-goals{margin:7px 0;gap:4px}#overlay.result-paged #adventure-result-goals li{font-size:11px;padding:5px 7px}#overlay.result-paged #adventure-result-prize{font-size:12px;margin:6px 0}#overlay.result-paged #adventure-equip{min-height:44px;margin:6px 0 0!important;padding:7px}
@media(max-height:650px) and (orientation:portrait){#overlay.result-paged .modal{padding:10px!important;gap:7px;grid-template-rows:auto 44px minmax(0,1fr) auto}#overlay.result-paged .result-page-header{grid-template-columns:46px minmax(0,1fr);gap:7px}#overlay.result-paged #finish-showcase,#overlay.result-paged #finish-showcase .finish-medal{width:46px;height:46px}#overlay.result-paged #finish-place{font-size:21px}#overlay.result-paged .finish-medal small{font-size:6px}#overlay.result-paged #result-title{font-size:19px}#overlay.result-paged #result-label{font-size:8px}#overlay.result-paged #result-text{font-size:10px;line-height:1.45}#overlay.result-paged .result-page-copy{gap:3px}#overlay.result-paged .finish-times td{height:29px;font-size:11px;padding:4px!important}#overlay.result-paged .finish-times .result-time{font-size:12px}#overlay.result-paged .finish-times th{padding:4px!important;font-size:9px}#overlay.result-paged #results .results-status{font-size:9px;margin-top:5px}#overlay.result-paged #cup-standings .cup-row{min-height:35px;padding:5px;gap:2px}#overlay.result-paged .cup-row span{font-size:10px}#overlay.result-paged .cup-row b{font-size:12px}#overlay.result-paged .result-pane{gap:7px}#overlay.result-paged #wardrobe-reward{padding:7px;min-height:54px}#overlay.result-paged #wardrobe-reward strong{font-size:11px}#overlay.result-paged #wardrobe-reward small{font-size:9px}#overlay.result-paged .tuning-option{min-height:76px;padding:6px!important;gap:3px}#overlay.result-paged .tuning-option small{display:none}#overlay.result-paged #cup-tuning{padding:8px!important}#overlay.result-paged .tuning-heading h3{font-size:15px}#overlay.result-paged .tuning-heading p{display:none}#overlay.result-paged .tuning-note{font-size:9px}#overlay.result-paged #adventure-result-portrait{display:none}#overlay.result-paged #adventure-result-story{font-size:11px;line-height:1.5}#overlay.result-paged .adventure-result{padding:8px}#overlay.result-paged #online-cup-title{font-size:13px}#overlay.result-paged #online-cup-scores li{min-height:38px;padding:4px;grid-template-columns:15px 20px minmax(0,1fr)}#overlay.result-paged #online-cup-scores img{width:20px;height:20px}#overlay.result-paged #online-cup-note{font-size:9px}}
@media(max-height:500px) and (orientation:landscape){#overlay.result-paged .modal{width:min(1060px,100%);height:calc(100dvh - 16px);padding:10px!important;gap:8px 14px;grid-template-columns:minmax(195px,.8fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr) auto}#overlay.result-paged .result-page-header{grid-area:1/1;grid-template-columns:44px minmax(0,1fr);gap:7px}#overlay.result-paged #finish-showcase,#overlay.result-paged #finish-showcase .finish-medal{width:44px;height:44px}#overlay.result-paged #finish-place{font-size:20px}#overlay.result-paged #result-title{font-size:19px}#overlay.result-paged #result-label{font-size:8px}#overlay.result-paged #result-text{font-size:10px}#overlay.result-paged .result-tabs{grid-area:2/1;display:grid;align-content:center;gap:8px}#overlay.result-paged .result-tabs button{flex:none}#overlay.result-paged .result-page-content{grid-area:1/2/3/3}#overlay.result-paged .result-page-actions{grid-area:3/1/4/3;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding-top:7px}#overlay.result-paged .result-page-actions[data-has-next=false]{grid-template-columns:1fr}#overlay.result-paged .finish-times td{height:29px;padding:4px!important;font-size:11px}#overlay.result-paged .finish-times .result-time{font-size:12px}#overlay.result-paged .finish-times th{padding:4px!important;font-size:9px}#overlay.result-paged #cup-standings .cup-row{min-height:34px;padding:5px;font-size:10px}#overlay.result-paged #wardrobe-reward{min-height:50px;padding:5px 8px}#overlay.result-paged #wardrobe-reward strong{font-size:11px}#overlay.result-paged .result-pane{gap:6px}#overlay.result-paged #cup-tuning{padding:8px!important}#overlay.result-paged .tuning-option{min-height:71px;gap:2px;padding:5px!important}#overlay.result-paged .tuning-option small{display:none}#overlay.result-paged .tuning-heading h3{font-size:14px;margin:2px 0}#overlay.result-paged .tuning-heading p{display:none}#overlay.result-paged .tuning-note{font-size:9px;margin-top:5px}#overlay.result-paged #adventure-result-portrait{display:none}#overlay.result-paged #adventure-result-story{font-size:11px;line-height:1.5}#overlay.result-paged #online-cup-title{font-size:13px}#overlay.result-paged #online-cup-scores li{min-height:36px;padding:4px;grid-template-columns:15px 20px minmax(0,1fr)}#overlay.result-paged #online-cup-scores img{width:20px;height:20px}#overlay.result-paged #online-cup-note{font-size:9px}}
#overlay.result-paged .tuning-heading>div{display:grid;gap:3px;line-height:1.3}#overlay.result-paged .tuning-kicker{display:block;line-height:12px}#overlay.result-paged .tuning-heading h3{line-height:1.3;margin:0}#overlay.result-paged .tuning-option b{display:none}#overlay.result-paged .tuning-icon{width:auto;height:auto;min-width:0;min-height:0;line-height:18px;margin:0;padding:0}#overlay.result-paged #result-tuning-spec{min-height:0;margin:9px 0 0;color:#c2fff0;font-size:12px;line-height:1.6;text-align:center;font-weight:700}#overlay.result-paged .tuning-note{min-height:0}
@media(max-height:650px) and (orientation:portrait){#overlay.result-paged .tuning-kicker{display:none}#overlay.result-paged .tuning-heading{margin-bottom:7px}#overlay.result-paged .tuning-option{min-height:62px;height:62px}#overlay.result-paged #result-tuning-spec{font-size:10px;line-height:1.5;margin-top:7px}#overlay.result-paged .tuning-option strong{font-size:11px}#overlay.result-paged .tuning-note{margin-top:5px}}
@media(max-height:500px) and (orientation:landscape){#overlay.result-paged .tuning-kicker{display:none}#overlay.result-paged .tuning-heading{margin-bottom:6px}#overlay.result-paged .tuning-option{min-height:60px;height:60px}#overlay.result-paged #result-tuning-spec{font-size:10px;line-height:1.5;margin-top:7px}}
#overlay.result-paged{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}#overlay.result-paged .modal{min-width:0;max-width:100%;justify-self:center;align-self:center}
#overlay.result-paged,#overlay.result-paged .modal,#overlay.result-paged .result-page-content,#overlay.result-paged .result-pane{overflow:clip!important}
#overlay.result-paged #result-memory{text-align:center;min-height:0;display:grid;align-content:center;justify-items:center;gap:12px}#overlay.result-paged #result-memory h3{font-size:19px;color:#b8ffe3;margin:0;line-height:1.4}#overlay.result-paged #result-memory p{font-size:12px;line-height:1.6;margin:0;color:#d3ebf0}#overlay.result-paged #result-memory canvas{width:100%;max-height:calc(100dvh - 380px);height:auto;aspect-ratio:16/9;object-fit:contain;border:1px solid #acd6da77;border-radius:12px}#overlay.result-paged #result-memory #online-photo-save{width:100%;min-height:44px;margin:0;padding:10px;font-size:12px;justify-content:center}
@media(max-height:500px) and (orientation:landscape){#overlay.result-paged #result-memory{gap:8px}#overlay.result-paged #result-memory h3{font-size:16px}#overlay.result-paged #result-memory canvas{max-height:120px}}
#overlay.result-paged #result-pane-setup:has(#result-memory:not([hidden])){grid-template-rows:minmax(0,1fr);align-content:stretch}#overlay.result-paged #result-memory{width:100%;height:100%;min-height:0;grid-template-rows:auto auto minmax(0,1fr) 44px;align-content:stretch;gap:8px}#overlay.result-paged #result-memory h3{grid-row:1}#overlay.result-paged #result-memory p{grid-row:2}#overlay.result-paged #result-memory canvas{grid-row:3;width:100%;height:100%;min-height:0;max-height:none;object-fit:contain}#overlay.result-paged #result-memory #online-photo-save{grid-row:4;height:44px;min-height:44px}
#overlay.result-paged .result-tabs{position:relative;z-index:2;pointer-events:auto}#overlay.result-paged .result-tabs button{touch-action:manipulation;user-select:none;-webkit-user-select:none}#overlay.result-paged .result-tabs button:active{transform:none}
#overlay.result-paged #next-race{touch-action:manipulation;user-select:none;-webkit-user-select:none}#overlay.result-paged #next-race:active{transform:none}#next-race[aria-busy=true]{cursor:progress}