/* Island Cup v21: a quiet race HUD and colourful glass menu panels. */
#frame{--safe-left:max(16px,env(safe-area-inset-left));--safe-right:max(16px,env(safe-area-inset-right));--safe-bottom:max(12px,env(safe-area-inset-bottom));--map-width:172px}
.garage-stage .garage-panel.arcade-ready{border:3px solid #67f4de;background:linear-gradient(145deg,#196d85d9,#343d7ae6);box-shadow:0 5px 0 #17324dbb,0 0 0 5px #64f7e51c,0 18px 40px #061e4c55;backdrop-filter:blur(8px)}
.garage-stage .build-stats{border:2px solid #ffd96b;background:linear-gradient(135deg,#27698bcb,#4b4384d9);box-shadow:0 5px 0 #14345077}
.build-stats>small,.arcade-ready h2{color:#fff1ac}.build-stats span,.build-stats p,.arcade-ready #settingsNote{color:#edf8ff}
.garage-tabs button{border:2px solid #8bbaed;background:#223f7877;color:#f5fcff;font-size:13px}
.garage-tabs button:nth-child(2){border-color:#8eeeca}.garage-tabs button:nth-child(3){border-color:#ffa2ce}
.garage-tabs button[aria-pressed=true]{background:#ffe77a;color:#203b57;border-color:#fff6c8;box-shadow:0 3px 0 #d39545}
.arcade-ready .driver-choices button{--driver-color:#ff9185;border:2px solid var(--driver-color);background:#203f6566;color:white;box-shadow:0 4px 0 #15305788}
#driver-kuro{--driver-color:#d6a1ff}#driver-penpen{--driver-color:#65e4ff}#driver-piyo{--driver-color:#ffe978}
.arcade-ready .driver-choices button[aria-pressed=true]{color:#153553;background:var(--driver-color);border-color:#fff;box-shadow:0 0 0 3px var(--driver-color),0 5px 0 #233753}
.driver-portrait{background-size:cover;background-position:50% 18%;border-radius:10px;background-color:#fff}
.portrait-mono{background-image:url('assets/portrait-mono-v21.jpeg');background-size:130%;background-position:50% 27%}
.portrait-kuro{background-image:url('assets/portrait-kuro-v21.jpeg');background-position:50% 13%}
.portrait-penpen{background-image:url('assets/portrait-penpen-v21.jpeg');background-size:120%;background-position:50% 30%}
.portrait-piyo{background-image:url('assets/portrait-piyo-v21.jpeg');background-position:50% 20%}
.arcade-ready .kit-card{border:2px solid #80dff0;background:linear-gradient(145deg,#458ab48c,#4967a080);color:white}
.arcade-ready .kit-card[aria-pressed=true]{background:#ffe77b;color:#173c57;border-color:#fff2b7}
.arcade-ready .kit-label{color:#e4faff;font-size:14px}.garage-confirm .primary,.track-confirm .primary{background:linear-gradient(130deg,#ff9467,#ff668b);border:2px solid #ffd0a5;color:#fff;box-shadow:0 5px 0 #9a4162;font-weight:900}
.garage-stage #menuFullscreen,.track-stage #backToGarage{border:2px solid #82e7ef;background:#24597fba;color:#fff;min-height:44px}
.track-card{--course-color:#72f4cb;border:3px solid var(--course-color);background:linear-gradient(150deg,#158e9ccb,#244f88df);box-shadow:0 6px 0 #14385899,0 16px 32px #00325233}
#chooseCoast{--course-color:#72f4cb;background:linear-gradient(150deg,#148f8dcc,#216289db);border-color:var(--course-color)}
#chooseRidge{--course-color:#d4a0ff;background:linear-gradient(150deg,#7460aecf,#3b528fde)}
#chooseCity{--course-color:#ff9eb6;background:linear-gradient(150deg,#b14d8bd1,#534689df)}
.track-card>span,.track-card small{color:#edfaff}.track-card[aria-pressed=true],#chooseCoast[aria-pressed=true]{border-color:#fff3a1;background:linear-gradient(150deg,#188d9de8,#365996e8);box-shadow:0 0 0 4px #ffe37360,0 6px 0 #153751;transform:translateY(-3px)}
.track-confirm label{padding:9px 13px;border:1px solid #92e7ed;border-radius:12px;background:#234f77cc}

/* Every overlay owns its input plane. Driving controls are absent behind dialogs. */
#frame[data-stage="menu"] #minimap,#frame[data-stage="celebrate"] #minimap,#frame[data-stage="tracks"] #minimap{display:none}
#frame[data-stage="paused"] :is(.controls,.item-slot,.speed,.driftbar,.utilities),#frame[data-stage="finish"] :is(.controls,.item-slot,.speed,.driftbar,.utilities,.hud,.race-hud,.distance,#minimap){display:none}
.utilities{left:50%;top:16px;bottom:auto;transform:translateX(-50%);max-width:none}
.utilities button:not(#pause){display:none}
.utilities #pause{width:44px;height:44px;border:2px solid #b2f9f0;border-radius:14px;background:#1a486a99}
.race-hud{top:20px;left:var(--safe-left);gap:10px}.race-hud #raceOrder{display:none}
.race-hud #racePortrait{display:block;width:48px;height:48px;aspect-ratio:1;border:3px solid #fff5b9;box-shadow:0 3px 0 #2142637a;padding:0;max-width:none;border-radius:16px}
.race-hud>strong{font-size:40px;text-shadow:0 3px 0 #163a5a,0 0 12px #15385966}
.hud,.game-expanded .hud,#frame:fullscreen .hud{top:max(16px,env(safe-area-inset-top));left:var(--safe-left);right:var(--safe-right)}
.hud .track{display:none}.hud{justify-content:flex-end}
.clock{display:flex;align-items:center;gap:12px;min-width:0;border:1px solid #d6f6ff99;background:#21446199;padding:8px 12px;border-radius:14px}
.clock #lapLabel{font-size:14px;margin:0;letter-spacing:.02em;color:#fff0a0}.clock #timer{font-size:20px}
.controls{left:var(--safe-left);right:calc(var(--safe-right) + var(--map-width) + 18px);bottom:var(--safe-bottom)}
.controls button{width:64px;height:64px;backdrop-filter:none;background:#183d6488;border:2px solid #d0f7ffc9}
.controls .drift{background:#5ae4cdbb;color:#173651}.controls [data-key="brake"]{background:#ee82a79e}.controls .gas{width:70px;height:80px;background:#ffd36dde;color:#213950;border-color:#fff0b3}
.speed{left:var(--safe-left);right:auto;bottom:calc(var(--safe-bottom) + 78px);gap:6px}.speed strong{font-size:30px;font-weight:900}.speed small{font-size:11px}
.driftbar{width:150px;left:50%;bottom:calc(var(--safe-bottom) + 90px)}.driftbar small{display:none}.driftbar>div{height:6px;margin:0}
#draftHud{bottom:calc(var(--safe-bottom) + 107px)}#draftHud span{font-size:11px}
.item-slot{top:78px;right:var(--safe-right)}.item-slot>span,.item-slot button>small{display:none}
.item-slot button{width:66px;height:70px;border:2px solid #ffed9b;background:#235071aa;border-radius:18px;box-shadow:0 3px 0 #122f5355}
.item-slot button:disabled{opacity:.65}.item-slot button:not(:disabled){background:#ffb871de;color:#173f5b}.item-slot #itemName{font-size:11px}
#minimap{position:absolute;z-index:3;right:var(--safe-right);bottom:var(--safe-bottom);width:var(--map-width);pointer-events:none;border:1px solid #b9fff16b;border-radius:18px;background:linear-gradient(140deg,#1d53745c,#193b638c);padding:3px 7px 6px;box-shadow:0 4px 12px #17345b20}
#minimapCourse svg{display:block;width:100%;height:auto}.map-legend{display:flex;justify-content:center;gap:12px;margin-top:-4px;font-size:10px;line-height:12px;font-weight:900}
.map-legend span{display:block;width:20px;height:20px;font-size:0;line-height:0;border-radius:7px;border:2px solid var(--racer);background-repeat:no-repeat;background-color:white;background-size:cover}.map-legend .portrait-mono{background-size:140%}.map-legend .portrait-penpen{background-size:125%}

#result,.pause-panel{z-index:20;background:linear-gradient(135deg,#164c7470,#442f6959);padding:20px max(20px,env(safe-area-inset-right)) 20px max(20px,env(safe-area-inset-left));pointer-events:auto;backdrop-filter:blur(6px)}
#result .result-card{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto auto;align-items:center;gap:20px 28px;width:min(740px,100%);max-height:100%;padding:28px;border:3px solid #ffe482;background:linear-gradient(135deg,#277195e6,#56427de8);border-radius:26px;box-shadow:0 8px 0 #1c365a99,0 0 0 6px #ffe48220;overflow:auto;touch-action:pan-y;overscroll-behavior:contain}
.result-summary>small,.pause-card>small{font-size:12px;color:#a7fff0;font-weight:900;letter-spacing:.12em}
#result h2{font-family:inherit;font-size:clamp(27px,4vw,44px);line-height:1.08;font-weight:900;letter-spacing:-.04em;margin:12px 0;color:#fff9d9}
#result #finishTime{font-size:38px;font-weight:900;color:#ffec99;font-variant-numeric:tabular-nums}
#result #finishStats{font-size:13px;line-height:1.6;color:#e4f5ff;margin:8px 0}
#classification{white-space:normal;width:100%;max-width:none;align-self:center;margin:0;font-family:inherit}
.finish-row{display:grid;grid-template-columns:22px 40px 1fr auto;gap:9px;align-items:center;padding:7px 10px;margin:5px 0;border:1px solid #aecbee6b;border-radius:12px;background:#1c3c5f57;font-size:13px}
.finish-row[data-player]{background:#3ea7b58c;border-color:#7cfff0}.finish-row>b{font-size:20px;color:#fff0a5}
.finish-row .driver-portrait{width:40px;height:40px;aspect-ratio:1;margin:0;border:2px solid #fff3bb}
.finish-row strong{font-size:12px;font-variant-numeric:tabular-nums}.finish-row small{display:block;font-size:10px;color:#a4fff0}
.result-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px;position:sticky;bottom:0;padding-top:4px}
#result .result-actions button{max-width:none;width:100%;min-height:54px;margin:0;font-size:16px;border:2px solid #ffebb6;border-radius:16px;background:linear-gradient(135deg,#ffae70,#ff7796);color:#173c56;box-shadow:0 4px 0 #233859;font-weight:900}
#result .result-actions #resultGarage{background:linear-gradient(135deg,#68ebd8,#71c7fa);border-color:#adfff2}
.pause-panel{place-items:center}.pause-panel .pause-card{width:min(530px,100%);min-width:0;max-height:100%;overflow:auto;padding:24px;background:linear-gradient(135deg,#246f92e6,#564080ed);border:3px solid #88ffdf;border-radius:26px;box-shadow:0 0 0 6px #63f4d720,0 8px 0 #14375166;touch-action:pan-y;overscroll-behavior:contain}
.pause-panel h2{font-size:38px;margin:8px 0 16px}.pause-panel #resume{max-width:none;min-height:52px;border:2px solid #fff1b9;background:#ffda72;color:#173c56;box-shadow:0 4px 0 #ba8846}
.pause-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.pause-actions button{display:flex;flex-direction:column;min-height:76px;gap:7px;padding:10px 5px;font-size:13px;color:white;border:2px solid #b9a7fa;background:#5265a18c;border-radius:15px}
.pause-actions button:nth-child(3n+1){border-color:#ffaea0;background:#a5668b6b}.pause-actions button:nth-child(3n+2){border-color:#87e6ef;background:#317f9480}.pause-actions .icon{width:24px;height:24px}
#screenHint{display:none!important}
#rotateGate{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:radial-gradient(ellipse at 35% 30%,#238e9c,#1e426b 65%,#3f346b);color:#ddfff4;gap:12px}
#rotateGate svg{width:130px;height:130px;margin-bottom:15px}#rotateGate strong{font-size:24px}#rotateGate p{font-size:15px;color:#e4edff;margin:0}
@media(pointer:coarse){#frame,body.game-expanded #frame{width:100dvw!important;height:100dvh!important;min-height:0!important}#frame{--safe-left:max(16px,env(safe-area-inset-left));--safe-right:max(16px,env(safe-area-inset-right))}.garage-stage .garage-panel.arcade-ready{right:var(--safe-right)}.flow-heading,.garage-stage #menuFullscreen,.garage-stage .build-stats{left:var(--safe-left)}.track-stage #backToGarage{right:var(--safe-right)}}
@media(max-height:550px){
 #frame{--map-width:132px}.garage-stage .garage-panel.arcade-ready{top:4%;bottom:4%;padding:10px}
 .garage-tabs{margin:7px 0}.garage-tabs button{font-size:12px;min-height:38px}.arcade-ready .driver-choices button{font-size:12px}.driver-portrait{aspect-ratio:1.75}
 .garage-stage .build-stats{width:20%;padding:10px}.build-stats p{display:none}.garage-stage .flow-heading h1{font-size:30px}
 .race-hud{top:max(12px,env(safe-area-inset-top));gap:8px}.race-hud #racePortrait{width:38px;height:38px;border-radius:12px}.race-hud>strong{font-size:32px}
 .utilities{top:12px}.utilities #pause{width:40px;height:40px;min-height:40px;padding:8px}
 .hud,.game-expanded .hud,#frame:fullscreen .hud{top:max(12px,env(safe-area-inset-top))}.clock{padding:7px 9px;gap:10px}.clock #lapLabel{font-size:13px}.clock #timer{font-size:17px}
 .controls{right:calc(var(--safe-right) + var(--map-width) + 14px);gap:8px}.controls>div{gap:7px}.controls button{width:54px;height:54px;border-radius:18px}.controls .gas{width:60px;height:68px}.controls .icon{width:25px;height:25px}.controls .gas .icon{width:32px;height:32px}
 .speed{bottom:calc(var(--safe-bottom) + 64px)}.speed strong{font-size:26px}.speed small{font-size:10px}.driftbar{bottom:calc(var(--safe-bottom) + 77px);width:115px}#draftHud{bottom:calc(var(--safe-bottom) + 93px);width:115px}
 .item-slot{top:66px}.item-slot button{width:58px;height:60px;border-radius:15px}.item-slot #itemGlyph .icon{width:27px;height:27px}.item-slot #itemName{font-size:10px}
 #result,.pause-panel{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:var(--safe-bottom)}
 #result .result-card{gap:12px 24px;padding:16px 22px;border-radius:22px}.result-summary>small{font-size:11px}#result h2{font-size:30px;margin:8px 0}#result #finishTime{font-size:32px}#result #finishStats{font-size:12px}
 .finish-row{grid-template-columns:20px 32px 1fr auto;gap:7px;padding:5px 9px;margin:4px 0}.finish-row .driver-portrait{width:32px;height:32px}.finish-row>b{font-size:17px}
 #result .result-actions button{min-height:46px;font-size:15px;padding:10px}.result-actions{gap:12px}
 .pause-panel .pause-card{padding:16px 20px;width:min(550px,100%)}.pause-panel h2{font-size:28px;margin:5px 0 12px}.pause-panel #resume{min-height:44px;padding:9px}.pause-actions{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.pause-actions button{min-height:57px;padding:7px 5px;gap:5px;flex-direction:row;font-size:12px}.pause-actions .icon{width:21px;height:21px}
}
@media(max-height:340px){.garage-stage .build-stats{top:30%;padding:7px}.build-stats>div{margin-top:6px}.arcade-ready h2{display:none}.garage-tabs{margin-top:0}.arcade-ready .driver-choices{margin-bottom:0}.driver-portrait{aspect-ratio:2}.garage-confirm>span{display:none}.track-card small{display:none}#result .result-card{padding:10px 16px;gap:8px 18px}.finish-row{margin:3px 0;padding:3px 7px}.result-summary>small{letter-spacing:.05em}#result #finishStats{margin:5px 0}.pause-panel .pause-card{padding:12px 18px}.pause-card>small{display:none}}
@media(pointer:coarse) and (orientation:portrait){#rotateGate{display:flex}}

/* Thumb zones: the outer corners belong to controls, not the map. */
#frame{--steer-size:80px;--primary-size:88px;--secondary-size:64px;--control-gap:12px;--control-bottom:max(24px,calc(env(safe-area-inset-bottom) + 10px));--action-height:calc(var(--primary-size) + var(--secondary-size) + var(--control-gap));--map-width:128px}
#frame[data-auto="true"]{--action-height:calc(2 * var(--secondary-size) + var(--control-gap))}
#frame .controls{left:var(--safe-left);right:var(--safe-right);bottom:var(--control-bottom);height:var(--action-height);align-items:flex-end;gap:0}
.controls .steering-controls{display:flex;align-items:center;gap:8px;padding:5px;border:1px solid #c2efff55;border-radius:32px;background:#17395a40}
#frame .steering-controls button{width:var(--steer-size);height:var(--steer-size);border-radius:26px;background:#244c7680;border:2px solid #d5f5ffb3;box-shadow:0 4px 0 #14345155;padding:0}
#frame .steering-controls .icon{width:34px;height:34px}
.controls .pedal-controls{position:relative;display:block;width:calc(var(--primary-size) + var(--secondary-size) + var(--control-gap));height:var(--action-height)}
#frame .pedal-controls button{position:absolute;margin:0;padding:0;min-height:0;border-radius:50%;border-width:2px}
#frame .pedal-controls .gas{right:0;bottom:0;width:var(--primary-size);height:var(--primary-size);background:#ffda79e0;border:3px solid #fff2b9;box-shadow:0 5px 0 #75553680;color:#253b55}
#frame .pedal-controls .drift{right:0;bottom:calc(var(--primary-size) + var(--control-gap));width:var(--primary-size);height:var(--secondary-size);border-radius:24px;background:#6ff0d6d9;border-color:#c2ffed;color:#193f54;box-shadow:0 4px 0 #1e716980}
#frame .pedal-controls [data-key="brake"]{left:0;bottom:0;width:var(--secondary-size);height:var(--secondary-size);background:#fa91afbd;border-color:#ffd6e5;box-shadow:0 4px 0 #703b6380}
#frame[data-auto="true"] .pedal-controls .gas{display:none}
#frame[data-auto="true"] .pedal-controls .drift{bottom:0;height:var(--primary-size);border-radius:50%;border-width:3px}
#frame[data-auto="true"] .pedal-controls:before{content:"AUTO";position:absolute;right:0;bottom:calc(var(--primary-size) + 9px);width:var(--primary-size);text-align:center;font-size:12px;line-height:16px;font-weight:900;letter-spacing:.12em;color:#c8fff0;text-shadow:0 2px 4px #143652;pointer-events:none}
#frame .pedal-controls .gas .icon{width:40px;height:40px}
#frame .pedal-controls .drift .icon{width:30px;height:30px;margin-bottom:10px}
#frame[data-auto="true"] .pedal-controls .drift .icon{width:36px;height:36px}
#frame .pedal-controls [data-key="brake"] .icon{width:25px;height:25px;margin-bottom:10px}
#frame .control-caption{font-size:10px;bottom:9px;font-weight:900;letter-spacing:.04em}
#frame[data-auto="true"] .drift .control-caption{bottom:15px;font-size:12px}
#frame .item-slot{top:auto;bottom:calc(var(--control-bottom) + var(--secondary-size) + var(--control-gap));right:calc(var(--safe-right) + var(--primary-size) + var(--control-gap));max-width:none}
#frame .item-slot button{width:var(--secondary-size);height:var(--secondary-size);border-radius:50%;padding:4px;gap:1px;border:2px solid #ffe993;background:#264e728c;color:#fff1b6;box-shadow:0 4px 0 #14345366;opacity:1}
#frame .item-slot button:not(:disabled){background:#ffb769eb;border:3px solid #fff0aa;color:#213954;box-shadow:0 4px 0 #88523880}
#frame .item-slot button:disabled{opacity:.52}#frame .item-slot #itemName{font-size:10px;letter-spacing:0}#frame .item-slot #itemGlyph .icon{width:28px;height:28px}
#frame #minimap{right:var(--safe-right);bottom:calc(var(--control-bottom) + var(--action-height) + 14px);width:var(--map-width);padding:3px 6px;border-color:#c4fff24d;background:#173e5c66;box-shadow:none}
#frame .map-legend{gap:10px;margin-top:-3px;margin-bottom:2px}#frame .map-legend span{width:18px;height:18px}
#frame .speed{left:calc(var(--safe-left) + 10px);bottom:calc(var(--control-bottom) + var(--steer-size) + 20px)}
#frame .driftbar{left:auto;right:var(--safe-right);transform:none;width:var(--primary-size);bottom:calc(var(--control-bottom) - 12px)}
#frame #draftHud{bottom:var(--control-bottom);width:110px}
#frame .utilities #pause{min-width:44px;min-height:44px}
@media(max-height:550px){#frame{--steer-size:72px;--primary-size:84px;--secondary-size:60px;--control-gap:12px;--map-width:112px}#frame .controls .steering-controls{gap:6px;padding:4px}#frame .steering-controls button{border-radius:24px}}
@media(max-height:350px){#frame{--steer-size:64px;--primary-size:72px;--secondary-size:56px;--control-gap:10px;--map-width:90px;--control-bottom:max(18px,calc(env(safe-area-inset-bottom) + 6px))}#frame #minimap{bottom:calc(var(--control-bottom) + var(--action-height) + 8px);padding:2px 4px}#frame .map-legend{display:none}#frame .speed{bottom:calc(var(--control-bottom) + var(--steer-size) + 16px)}#frame .speed strong{font-size:24px}#frame .pedal-controls .drift .icon{width:26px;height:26px}#frame[data-auto="true"] .pedal-controls .drift .icon{width:31px;height:31px}#frame[data-auto="true"] .drift .control-caption{bottom:11px;font-size:11px}#frame .hud{top:8px}#frame .clock{padding:6px 9px}#frame .clock #timer{font-size:16px}}

/* Supplied item artwork: contain the complete PNG and keep taps on the button. */
.item-art{object-fit:contain;user-select:none;-webkit-user-drag:none}
#frame .item-slot #itemGlyph .item-art{width:36px;height:36px;display:block;border-radius:7px}