@import url("./assets/fonts/fonts.css?v=0.2.1");
:root{--cyan:#32ecff;--pink:#ff42bf;--violet:#9e7bff;--ink:#080c1a;--panel:#0c142ae8;--line:#6be9ff35;--muted:#8dabc9;font-family:"Noto Sans KR",system-ui,sans-serif;color:#edf8ff;font-weight:700;background:var(--ink);font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:5px}button:disabled{cursor:wait}button:hover{filter:brightness(1.15)}[hidden]{display:none!important}
#game,#race-canvas{display:block;width:100%;height:100%;position:absolute;inset:0}#game{overflow:hidden;background:#070b1c}#race-canvas{outline:none}
#loading{position:absolute;inset:0;z-index:20;background:radial-gradient(ellipse at center,#16204a,#060914 65%);display:flex;gap:22px;align-items:center;justify-content:center;flex-direction:column}#loading strong{font-size:19px;letter-spacing:.12em}#loading>span:last-child{font-size:12px;color:var(--muted)}.loading-wheel{font-size:60px;color:var(--cyan);text-shadow:0 0 30px #00dfff;animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.top-nav{position:absolute;top:23px;right:25px;display:flex;gap:8px;z-index:7}.top-nav a,.top-nav button{display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;color:#cceafa;background:#080e21bd;border:1px solid #799bbf35;border-radius:7px;min-width:35px;height:35px;font-size:17px;backdrop-filter:blur(12px)}.top-nav a{padding:0 12px}.top-nav span{font-size:10px;letter-spacing:.05em}.top-nav a:hover,.top-nav button:hover{border-color:var(--cyan);color:var(--cyan)}
.intro{position:absolute;inset:0;background:linear-gradient(90deg,#050818ed 0%,#071024ad 29%,#0a103638 55%,transparent 80%),linear-gradient(0deg,#050816dd,transparent 28%)}
.intro:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(transparent 8%,var(--cyan) 30%,var(--pink) 75%,transparent);box-shadow:0 0 24px #17dafa60}
.intro-copy{position:absolute;left:7.15%;top:12.5%;}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--cyan);margin:0 0 23px;font-weight:800}.intro .eyebrow:before{content:"";display:inline-block;width:24px;height:2px;vertical-align:middle;background:var(--cyan);margin-right:11px;box-shadow:0 0 10px var(--cyan)}
.intro h1{font-family:"Black Han Sans","Noto Sans KR",sans-serif;margin:0;letter-spacing:-.04em;font-size:clamp(90px,11vw,158px);font-weight:400;line-height:.97;transform:skew(-9deg);transform-origin:left center}.intro h1 span{display:block;white-space:nowrap}.intro h1 span:first-child{color:#f0fbff;text-shadow:0 0 35px #32edff40}.intro h1 span:nth-child(2){color:var(--cyan);text-shadow:0 0 42px #19daf945,3px 3px 0 #24546f}.intro h1 b{font-size:.30em;display:inline-block;vertical-align:top;margin:13px 0 0 21px;color:var(--pink);text-shadow:0 0 30px #ff2ea77a;letter-spacing:0}.subtitle{font-size:clamp(14px,1.65vw,21px);letter-spacing:.36em;margin:23px 0 34px;color:#bdd1ed;font-weight:600}
.yellow-button{display:flex;align-items:center;justify-content:space-between;gap:40px;min-width:282px;background:linear-gradient(115deg,#30eaff,#9ef7ff);color:#041524;padding:19px 26px;border-radius:4px 15px 4px 15px;border:1px solid #b8faff9c;box-shadow:0 0 30px #21d9ff27,inset 0 -3px 0 #0c87a845;font-weight:900;font-size:14px;letter-spacing:.08em;transition:transform .15s,box-shadow .15s}.yellow-button:hover{transform:translateY(-2px);box-shadow:0 0 38px #21d9ff66}.yellow-button>span{font-size:26px;line-height:.85}
.keyboard-guide{display:flex;gap:18px;margin-top:26px;font-size:10px;color:#acc4de;letter-spacing:.03em}.keyboard-guide>span{display:flex;align-items:center;gap:4px}kbd{font:700 10px "Noto Sans KR",sans-serif;border:1px solid #78bed360;border-radius:3px;padding:3px 6px;background:#131f3770;color:#d3faff;box-shadow:0 2px 0 #183148}.intro-auto{font-size:10px;color:#829bb9;margin-top:10px}
.course-card{position:absolute;right:5.5%;bottom:8%;display:grid;grid-template-columns:101px 1fr;align-items:center;gap:20px;padding:20px 24px;width:358px;background:linear-gradient(125deg,#091327dd,#151033e8);backdrop-filter:blur(12px);border:1px solid #7cbde43d;border-left:2px solid var(--pink);border-radius:4px 17px 4px 17px;box-shadow:0 15px 50px #0008}.course-card canvas{width:101px;height:96px;filter:drop-shadow(0 0 7px #28d8ff50)}.course-card p{font-size:8px;letter-spacing:.12em;color:var(--cyan);margin:0 0 8px}.course-card h2{font-size:19px;margin:0 0 12px;white-space:nowrap;letter-spacing:-.04em}.course-dots{font-size:9px;color:var(--pink);padding:3px 6px;background:#ff42bf15;border:1px solid #ff42bf32}.course-card small{display:block;font-size:9px;margin-top:10px;color:#a9bfda;letter-spacing:.03em;white-space:nowrap}.tagline{position:absolute;left:7.15%;bottom:3.8%;font-size:9px;letter-spacing:.19em;color:#7191b4}
#hud{position:absolute;inset:0;pointer-events:none;text-shadow:0 2px 7px #0008}#hud button{pointer-events:auto}.position-panel{position:absolute;top:20px;left:31px;display:flex;align-items:baseline;gap:7px}.position-panel>strong{font-size:98px;line-height:1;letter-spacing:-.08em;color:#f3fbff;text-shadow:0 0 25px #00c6ff40}.position-panel>span{font-size:24px;color:var(--cyan)}.position-panel small{font-size:17px;margin-left:8px;color:#7996b7}
.item-panel{position:absolute;left:38px;top:132px;width:66px;color:#d9f2ff;padding:0;background:none;text-shadow:0 2px 6px #0008}.item-panel>span{display:flex;align-items:center;justify-content:center;border-radius:5px 15px 5px 15px;width:66px;height:65px;background:#101b34ce;border:1px solid #4de6ff6b;font-size:34px;color:var(--cyan);backdrop-filter:blur(8px);box-shadow:inset 0 0 20px #24d9ff10,0 0 18px #23d9ff13}.item-panel small{display:block;font-size:9px;margin:8px -35px 6px;letter-spacing:.02em}.item-panel kbd{font-size:9px;padding:2px 5px}
.timer-panel{position:absolute;left:50%;top:24px;transform:translateX(-50%);background:#080f24c9;border:1px solid #90b7dd33;border-top:2px solid #23dcee90;backdrop-filter:blur(10px);border-radius:3px 3px 11px 11px;padding:10px 22px 11px;min-width:154px;text-align:center}.timer-panel span{display:block;font-size:8px;letter-spacing:.16em;color:#85acd0;margin-bottom:5px}.timer-panel strong{font-size:19px;letter-spacing:.04em;font-variant-numeric:tabular-nums}.lap-panel{position:absolute;right:34px;top:28px;text-align:center}.lap-panel>span{display:block;font-size:9px;letter-spacing:.16em;color:#87a7c9}.lap-panel>strong{font-size:52px;line-height:1.25;color:#f2e8ff;text-shadow:0 0 20px #ba52ff50}.lap-panel small{font-size:23px;color:#8190b8}
.minimap-panel{position:absolute;left:23px;bottom:28px;width:172px;text-align:center;background:radial-gradient(ellipse,#0b143580,transparent 70%)}.minimap-panel canvas{display:block;width:172px;height:162px;filter:drop-shadow(0 0 5px #13d5ff48)}.minimap-panel>span{font-size:8px;letter-spacing:.12em;color:#a3bddc}
.speed-panel{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);width:258px}.speed-panel>div:first-child{text-align:center;line-height:1.07}.speed-panel strong{font-size:66px;letter-spacing:-.07em;font-variant-numeric:tabular-nums;color:#f2fbff;text-shadow:0 0 28px #18e7ff38}.speed-panel>div>span{font-size:10px;margin-left:9px;color:var(--cyan);letter-spacing:.10em}.drift-track{height:7px;border-radius:3px;background:#16233bdd;margin-top:9px;overflow:hidden;border:1px solid #6eaac937;box-shadow:0 0 12px #0008}.drift-track i{display:block;width:0;height:100%;background:var(--cyan);transition:width .08s linear;box-shadow:0 0 12px var(--cyan)}.speed-panel p{font-size:8px;letter-spacing:.08em;margin:6px 0 0;min-height:11px;color:#b2cde6}.speed-panel.boosting strong{color:#6af3ff;text-shadow:0 0 24px #00dfff98}.speed-panel.boosting p{color:var(--pink)}.fruit-panel{position:absolute;right:33px;bottom:29px;display:flex;align-items:baseline;gap:9px}.fruit-panel>span{font-size:31px;color:var(--cyan);text-shadow:0 0 20px #26deff99}.fruit-panel strong{font-size:39px;letter-spacing:-.05em}.fruit-panel small{font-size:14px;color:#829bbb}.position-panel>strong,.speed-panel strong,.fruit-panel strong,.lap-panel>strong{font-family:"Black Han Sans","Noto Sans KR",sans-serif;font-weight:400;display:inline-block;transform:skew(-8deg);font-style:normal}
body.in-race .top-nav{right:138px;top:24px}body.in-race .top-nav a{display:none}#pause-button{position:absolute;right:35px;top:108px;background:#101a36bc;color:#d0f5ff;border:1px solid #557d9e70;border-radius:5px;font-size:15px;padding:7px 12px}#countdown{position:absolute;top:36%;left:50%;transform:translateX(-50%) skew(-8deg);font-weight:900;font-size:128px;color:var(--cyan);text-shadow:0 0 45px #1cdfff77,4px 4px 0 #16396b;pointer-events:none}#notice{position:absolute;top:20%;left:50%;transform:translateX(-50%);background:#111d38e6;border:1px solid #36e0ff70;backdrop-filter:blur(10px);padding:10px 20px;border-radius:4px 12px 4px 12px;font-size:12px;white-space:nowrap;color:#d5fbff;pointer-events:none;box-shadow:0 0 28px #00a2ff21}
#boost-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s;background:radial-gradient(ellipse at 50% 52%,transparent 39%,#214bed10 61%,#28ebff44 100%);box-shadow:inset 0 0 90px #15caff30,inset 0 -25px 95px #ca26ff35}#boost-vignette.active{opacity:1}#boost-vignette:before{content:"";position:absolute;inset:-12%;background:repeating-conic-gradient(from 15deg at 50% 52%,transparent 0 13deg,#83f8ff55 13.05deg 13.24deg,transparent 13.28deg 29deg,#b245ff60 29.08deg 29.22deg);mask-image:radial-gradient(ellipse,transparent 35%,#000 89%);animation:boost-rush .32s ease-in infinite alternate}@keyframes boost-rush{from{transform:scale(.98);opacity:.45}to{transform:scale(1.05);opacity:.8}}
.overlay{position:absolute;inset:0;z-index:10;background:#06091ac2;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;outline:none;overflow:auto;padding:35px 20px}.pause-overlay h2{font-size:clamp(40px,6vw,82px);font-weight:900;color:var(--cyan);letter-spacing:-.07em;transform:skew(-6deg);margin:0;text-shadow:0 0 28px #19ddff44}.pause-overlay>.eyebrow{margin:0 0 12px}.pause-overlay>p:not(.eyebrow){font-size:13px;margin:14px 0 28px;color:#a6bcd8}.pause-overlay>.yellow-button{margin-bottom:24px}.secondary-actions{display:flex;gap:10px;margin-bottom:20px}.secondary-actions button{background:#121a34c9;color:#cee3f5;border:1px solid #6995bd40;padding:11px 14px;border-radius:5px;font-size:11px}.pause-overlay>small{font-size:10px;color:#7491b5}
.settings-card{width:min(480px,100%);background:linear-gradient(145deg,#0e1c34ed,#121127f5);border:1px solid var(--line);padding:30px;border-radius:5px 22px 5px 22px;box-shadow:0 25px 90px #0009;text-align:left;margin:auto}.settings-card .eyebrow{font-size:9px;margin:0 0 6px}.settings-card h2{font-size:28px;margin:0 0 20px;letter-spacing:-.04em}.settings-card label{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #8aadcc25;gap:20px}.settings-card label strong{display:block;font-size:14px}.settings-card label small{display:block;font-size:10px;font-weight:500;line-height:1.65;color:#91aac7;margin-top:4px}.settings-card input{width:22px;height:22px;accent-color:var(--cyan);flex-shrink:0;cursor:pointer}.settings-tip{font-size:10px;font-weight:600;line-height:1.9;color:#9eb7d6;margin:17px 0}.settings-card>.yellow-button{width:100%;min-width:0;padding:16px 20px;font-size:12px;border-radius:4px 12px 4px 12px}
.result-card{width:min(480px,100%);background:linear-gradient(145deg,#0e1c34ed,#17112ff2);border:1px solid #8c76fa60;padding:25px 32px;border-radius:5px 22px 5px 22px;text-align:center;margin:auto;box-shadow:0 0 80px #5019b02a}.result-card>.eyebrow{font-size:9px;margin:0 0 8px}.result-card h2{font-size:35px;letter-spacing:-.06em;color:#66eeff;margin:0}.result-summary{display:flex;align-items:center;justify-content:center;gap:19px;margin:5px 0 8px}.result-summary strong{font-size:35px;font-style:italic}.result-summary span{font-size:22px;letter-spacing:.02em}#record-note{font-size:11px;margin:5px 0 15px;color:#e8a2ff;min-height:16px}#leaderboard{list-style:none;margin:0;padding:0;text-align:left}#leaderboard li{display:flex;align-items:center;gap:11px;justify-content:space-between;font-size:11px;padding:6px 10px;border-bottom:1px solid #79a2ce20}#leaderboard li.you{background:#20d8ff18;border-radius:4px;color:#55eeff;border-left:2px solid var(--cyan)}#leaderboard li>span:first-child{width:21px}#leaderboard li>span:nth-child(2){flex:1}.result-stats{display:flex;justify-content:space-between;font-size:9px;color:#b0c5e1;margin:15px 0 19px}.result-stats b{display:block;font-size:12px;margin-top:4px}.result-card>.yellow-button{width:100%;min-width:0;font-size:12px;padding:17px 20px;border-radius:4px 12px 4px 12px}.text-button{background:none;color:#a2bad9;font-size:10px;padding:12px}
#input-status{position:absolute;left:50%;transform:translateX(-50%);bottom:7px;font-size:9px;color:#a5dbea;background:#0c1833bf;border:1px solid #42768f45;border-radius:3px;padding:3px 8px;white-space:nowrap}#input-status:empty{display:none}
@media(max-width:850px){.intro-copy{top:15%;left:6%}.intro h1{font-size:clamp(83px,13vw,116px)}.subtitle{font-size:15px;margin:18px 0 28px}.yellow-button{min-width:240px;padding:18px 23px}.course-card{right:4%;bottom:7%;width:294px;gap:12px;padding:14px 17px;grid-template-columns:78px 1fr}.course-card canvas{width:78px;height:74px}.course-card h2{font-size:17px}.course-card p{font-size:7px}.top-nav span{display:none}.keyboard-guide{gap:9px;font-size:9px}.keyboard-guide kbd{padding:2px 4px}.position-panel>strong{font-size:80px}.position-panel{left:20px}.item-panel{left:27px;top:109px}.lap-panel{right:24px}.timer-panel{top:22px;padding:8px 12px;min-width:130px}.timer-panel strong{font-size:16px}.minimap-panel,.minimap-panel canvas{width:140px}.minimap-panel canvas{height:132px}.speed-panel{width:205px}.speed-panel strong{font-size:57px}.fruit-panel{right:24px}.fruit-panel strong{font-size:33px}.fruit-panel>span{font-size:25px}body.in-race .top-nav{right:112px}.top-nav a,.top-nav button{min-width:30px;height:30px}.top-nav{right:16px}}
@media(max-width:600px){.intro-copy{top:14%;left:7%}.intro .eyebrow{font-size:8px;letter-spacing:.1em;max-width:300px}.intro h1{font-size:clamp(83px,24vw,120px)}.subtitle{font-size:13px;margin:17px 0 27px}.intro .yellow-button{min-width:235px;padding:18px 22px;font-size:12px}.keyboard-guide{flex-wrap:wrap;width:280px;margin-top:24px}.course-card{right:6%;bottom:6%;width:273px;padding:13px 16px;gap:14px;grid-template-columns:76px 1fr}.course-card canvas{width:76px;height:72px}.course-card h2{font-size:16px;margin-bottom:9px}.course-card small{font-size:8px;margin-top:9px}.course-card p{font-size:7px}.course-dots{font-size:8px}.tagline{display:none}.top-nav{top:14px}.position-panel{left:14px;top:17px}.position-panel>strong{font-size:65px}.position-panel>span{font-size:20px}.position-panel small{font-size:13px;margin-left:3px}.item-panel{left:20px;top:97px;width:52px}.item-panel>span{width:52px;height:52px;border-radius:4px 12px 4px 12px;font-size:28px}.item-panel small{font-size:8px}.timer-panel{top:18px;min-width:117px;padding:7px 10px}.timer-panel span{font-size:7px}.timer-panel strong{font-size:14px}.lap-panel{right:17px;top:18px}.lap-panel>strong{font-size:39px}.lap-panel small{font-size:20px}.lap-panel>span{font-size:8px}body.in-race .top-nav{right:76px;top:77px}.top-nav button{min-width:28px;height:28px}#pause-button{right:17px;top:77px;padding:5px 10px}.minimap-panel{left:10px;bottom:33px;width:106px}.minimap-panel canvas{width:106px;height:100px}.minimap-panel>span{font-size:7px}.speed-panel{bottom:31px;width:148px}.speed-panel strong{font-size:48px}.speed-panel>div>span{font-size:8px;margin-left:6px}.fruit-panel{right:12px;bottom:35px;gap:3px}.fruit-panel strong{font-size:27px}.fruit-panel>span{font-size:22px}.fruit-panel small{font-size:11px}.pause-overlay h2{font-size:47px}.secondary-actions{gap:6px}.secondary-actions button{font-size:10px;padding:10px}.settings-card{padding:23px}.settings-card h2{font-size:25px}.settings-card label{padding:11px 0}.result-card{padding:23px}.result-card h2{font-size:31px}#notice{font-size:11px;padding:9px 13px;top:28%}#countdown{font-size:105px}.overlay{padding:20px 14px}}
@media(max-height:560px) and (min-width:601px){.intro-copy{top:9%}.intro h1{font-size:85px}.subtitle{margin:12px 0 18px;font-size:14px}.intro .yellow-button{padding:15px 21px;min-width:230px}.keyboard-guide{margin-top:20px}.intro-auto{margin-top:6px}.course-card{bottom:9%;padding:14px 19px}.tagline{font-size:8px;bottom:2%}.minimap-panel{bottom:16px}.minimap-panel canvas{height:108px;width:114px}.minimap-panel{width:114px}.speed-panel{bottom:15px}.speed-panel strong{font-size:48px}.fruit-panel{bottom:17px}.settings-card{padding:21px}.settings-card label{padding:8px 0}.settings-card h2{font-size:23px;margin-bottom:9px}.settings-tip{margin:12px 0}.overlay{justify-content:flex-start}.pause-overlay{justify-content:center}.pause-overlay h2{font-size:53px}.pause-overlay>.yellow-button{margin-bottom:15px}.pause-overlay>p:not(.eyebrow){margin:9px 0 20px}}
@media(max-height:420px) and (min-width:601px){.intro-copy{top:7%}.intro .eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:13px}.intro h1{font-size:74px}.subtitle{font-size:12px;margin:10px 0 17px}.intro .yellow-button{min-width:217px;padding:14px 20px;font-size:11px}.keyboard-guide{margin:17px 0 0;line-height:1.3}.intro-auto{font-size:8px;margin:9px 0 0;line-height:1.4}.tagline{display:none}.course-card{bottom:8%;width:273px}.course-card small{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Reserve the pad radius around the floating capture zone, including safe areas. */
.touch-controls{position:absolute;inset:0;z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none}
.touch-actions{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:13px;pointer-events:none}
.touch-actions button{width:84px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;border-radius:50%;color:#e8fdff;background:radial-gradient(circle at 40% 30%,#193758dc,#070d20d9);border:1px solid #65e7ff9c;box-shadow:inset 0 0 20px #39b7ff13,0 0 15px #00cdff15;pointer-events:auto;touch-action:none;-webkit-touch-callout:none;font-size:13px}
.touch-actions button small{font-size:9px;line-height:1.3;color:#99eaf4}.touch-actions #mobile-item-icon{font-size:27px;line-height:1}.touch-actions button:disabled{opacity:.43}.touch-actions .drift-button{border-color:#ff53c39c;box-shadow:inset 0 0 20px #ff43af15,0 0 15px #fd299a14}.touch-actions .drift-button small{color:#f4a5d8}.touch-actions button.active{background:#742864c9;box-shadow:0 0 28px #ff42bf66,inset 0 0 14px #ff81d164;transform:scale(.96)}
#joystick-zone{position:absolute;right:calc(82px + env(safe-area-inset-right));bottom:calc(94px + env(safe-area-inset-bottom));width:190px;height:116px;pointer-events:auto;touch-action:none;-webkit-touch-callout:none;cursor:grab}
#joystick-zone.active{cursor:grabbing}#joystick-pad{position:absolute;left:50%;top:50%;width:128px;height:128px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #37e7ff80;background:radial-gradient(circle,#13364ac7,#081426aa 62%,#24caff19);box-shadow:0 0 0 8px #22dcff0c,inset 0 0 24px #28dbff15;pointer-events:none;opacity:.74}
#joystick-pad:before,#joystick-pad:after{content:"";position:absolute;background:#6cefff24;pointer-events:none}#joystick-pad:before{left:15%;right:15%;top:50%;height:1px}#joystick-pad:after{top:15%;bottom:15%;left:50%;width:1px}#joystick-zone.active #joystick-pad{opacity:1;border-color:#63f6ff;box-shadow:0 0 0 8px #22dcff16,0 0 25px #13cfff30}
#joystick-pad>span{position:absolute;color:#95e4ee;font-size:9px;line-height:1;pointer-events:none}.stick-up{top:10px;left:50%;transform:translateX(-50%)}.stick-down{bottom:10px;left:50%;transform:translateX(-50%)}.stick-left{left:10px;top:50%;transform:translateY(-50%)}.stick-right{right:10px;top:50%;transform:translateY(-50%)}
#joystick-knob{position:absolute;left:calc(50% - 23px);top:calc(50% - 23px);width:46px;height:46px;border-radius:50%;border:2px solid #a0faff;background:radial-gradient(circle at 35% 30%,#42c0d7aa,#102d4dbf);box-shadow:0 0 17px #25edff25;display:grid;place-items:center}#joystick-knob i{width:6px;height:6px;border-radius:50%;background:#eaffff;box-shadow:0 0 8px #71eaff}
.joystick-hint{position:absolute;left:50%;top:calc(50% + 79px);transform:translateX(-50%);margin:0;white-space:nowrap;font-size:10px;color:#a3e5ef;text-shadow:0 1px 6px #000;pointer-events:none}#joystick-zone.active .joystick-hint{opacity:0}
body.touch-driving #item-button{display:none}body.touch-driving .minimap-panel{left:auto;right:27px;top:159px;bottom:auto;width:126px}body.touch-driving .minimap-panel canvas{width:126px;height:119px}body.touch-driving .fruit-panel{left:28px;right:auto;top:132px;bottom:auto}
@media(max-width:600px){.touch-actions{left:max(18px,env(safe-area-inset-left));bottom:calc(29px + env(safe-area-inset-bottom));gap:12px}.touch-actions button{width:76px;height:76px;font-size:12px}.touch-actions button small{font-size:8px}#joystick-zone{right:calc(80px + env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));width:110px;height:92px}#joystick-pad{width:120px;height:120px}body.touch-driving .minimap-panel{right:14px;top:126px;width:96px}body.touch-driving .minimap-panel canvas{width:96px;height:91px}body.touch-driving .fruit-panel{left:19px;top:116px}body.touch-driving .speed-panel{top:123px;bottom:auto;width:143px}body.touch-driving .speed-panel strong{font-size:38px}body.touch-driving .speed-panel p{font-size:7px}body.touch-driving #input-status{bottom:197px;font-size:8px}}
@media(max-height:560px) and (min-width:601px){.touch-actions{left:calc(22px + env(safe-area-inset-left));bottom:calc(20px + env(safe-area-inset-bottom));gap:10px}.touch-actions button{width:70px;height:70px;font-size:11px}.touch-actions button small{font-size:8px}#joystick-zone{right:calc(79px + env(safe-area-inset-right));bottom:calc(79px + env(safe-area-inset-bottom));height:60px;width:135px}#joystick-pad{width:116px;height:116px}.joystick-hint{top:calc(50% + 69px);font-size:9px}body.touch-driving .minimap-panel{right:auto;left:143px;top:21px;width:78px}body.touch-driving .minimap-panel canvas{width:78px;height:74px}body.touch-driving .minimap-panel>span{font-size:6px}body.touch-driving .fruit-panel{left:24px;top:120px}body.touch-driving .fruit-panel strong{font-size:26px}body.touch-driving .fruit-panel>span{font-size:21px}}

/* Player-centred local radar: always visible, no expanded full-course view. */
.minimap-panel{pointer-events:none}.minimap-panel>span{display:block;margin-top:5px;color:#bceffc;font-size:10px;text-align:center}
@media(max-width:600px){.minimap-panel>span{font-size:8px}}
@media(max-height:560px) and (min-width:601px){body.touch-driving .minimap-panel>span{font-size:7px}}

/* Difficulty selection stays visible before every race. */
.difficulty-picker{margin:0 0 18px;padding:0;border:0;max-width:360px}.difficulty-picker legend{font-size:10px;color:#a4d6e5;margin-bottom:8px}.difficulty-picker>div{display:flex;gap:7px}.difficulty-picker button{padding:9px 19px;border:1px solid #66b3c64d;background:#0b1728d9;color:#a3c5d7;font:700 12px "Noto Sans KR",sans-serif;border-radius:4px;cursor:pointer}.difficulty-picker button[aria-pressed="true"]{color:#071326;background:#59eff3;border-color:#59eff3;box-shadow:0 0 15px #25dce52e}.difficulty-picker p{font-size:10px;color:#adc4da;line-height:1.5;margin:8px 0 0}.difficulty-picker button:focus-visible{outline:2px solid #ff60ce;outline-offset:3px}#result-difficulty{color:#75e9ef;font-size:12px}
@media(max-width:600px){.intro-copy{top:12%}.intro h1{font-size:clamp(65px,16vw,100px)}.difficulty-picker{margin-bottom:14px;max-width:290px}.difficulty-picker button{padding:8px 18px}.difficulty-picker p{font-size:9px}.keyboard-guide{margin-top:15px}}
@media(max-height:560px) and (min-width:601px){.intro-copy{top:8%}.intro h1{font-size:65px}.subtitle{margin:7px 0 10px}.difficulty-picker{margin-bottom:10px}.difficulty-picker legend{margin-bottom:4px}.difficulty-picker button{padding:6px 15px}.difficulty-picker p{margin-top:5px;font-size:9px}.keyboard-guide{margin-top:12px}}

@media(min-width:601px) and (min-height:561px) and (max-height:850px){.intro-copy{top:10%}.intro h1{font-size:clamp(90px,9vw,115px)}.subtitle{margin:16px 0 20px}.keyboard-guide{margin-top:17px}.intro-auto{margin-top:8px}}

@media(max-height:420px) and (min-width:601px){.intro h1{font-size:58px}.intro-auto{margin-top:5px}}

/* Keep navigation, rank and lap clear of the two corner controls. */
.minimap-panel,body.touch-driving .minimap-panel{left:23px;right:auto;top:20px;bottom:auto}
.position-panel{left:31px;top:220px}
.item-panel{left:auto;right:34px;top:20px;touch-action:none}
.lap-panel{right:34px;top:150px}
body.in-race .top-nav{right:140px;top:24px}
#pause-button{right:140px;top:76px}
body.touch-driving #item-button{display:block}
body.touch-driving #item-button kbd,#mobile-item-button{display:none}
body.touch-driving .position-panel{top:165px}
body.touch-driving .fruit-panel{left:28px;right:auto;top:285px;bottom:auto}
@media(max-width:850px) and (min-width:601px){.position-panel{top:185px}.item-panel{right:24px}.lap-panel{right:24px;top:145px}}
@media(max-width:600px){
 .minimap-panel,body.touch-driving .minimap-panel{left:14px;right:auto;top:16px;bottom:auto;width:106px}
 body.touch-driving .minimap-panel canvas{width:106px;height:100px}
 .position-panel,body.touch-driving .position-panel{left:14px;top:140px}
 .item-panel{left:auto;right:20px;top:16px;width:52px}
 .lap-panel{right:20px;top:166px}
 body.in-race .top-nav{right:17px;top:118px}
 #pause-button{right:101px;top:118px}
 body.touch-driving .fruit-panel{left:18px;right:auto;top:217px;bottom:auto}
 body.touch-driving .speed-panel{top:auto;bottom:190px}
}
@media(max-height:560px) and (min-width:601px){
 .minimap-panel,body.touch-driving .minimap-panel{left:20px;right:auto;top:16px;bottom:auto;width:114px}
 body.touch-driving .minimap-panel canvas{width:114px;height:108px}
 .position-panel,body.touch-driving .position-panel{left:20px;top:157px}
 .position-panel>strong{font-size:60px}
 .item-panel{left:auto;right:24px;top:16px}
 .lap-panel{right:24px;top:145px}
 body.touch-driving .fruit-panel{left:24px;right:auto;top:238px;bottom:auto}
}