html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050708;color:#eef2f5;font-family:Inter,"Segoe UI","Yu Gothic UI",Meiryo,sans-serif}
canvas{display:block;width:100vw;height:100vh;background:#050708}
#start{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 58%,rgba(26,41,45,.42),rgba(3,5,6,.96) 70%);z-index:5;backdrop-filter:blur(2px)}
.panel{width:min(760px,88vw);padding:34px 38px 30px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(12,17,19,.93),rgba(5,8,9,.92));box-shadow:0 30px 90px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.06);border-radius:18px}
.eyebrow{font-size:12px;letter-spacing:.32em;color:#9daab0;margin-bottom:10px}.title{font-size:clamp(34px,5vw,64px);font-weight:900;letter-spacing:.04em;line-height:.95;margin:0}.sub{margin-top:9px;font-size:18px;letter-spacing:.18em;color:#c9d0d3}.line{height:1px;background:linear-gradient(90deg,#f2b632,transparent);margin:24px 0}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;font-size:14px;color:#b8c0c4}.controls b{color:#fff;font-size:16px}.kbd{display:inline-flex;min-width:27px;height:27px;padding:0 7px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);border-bottom-width:3px;border-radius:6px;background:#111719;color:#fff;font-weight:800;margin-right:4px;box-sizing:border-box}
button{margin-top:26px;width:100%;border:0;border-radius:9px;padding:16px 20px;background:#f4b82b;color:#0b0d0e;font-weight:900;font-size:16px;letter-spacing:.16em;cursor:pointer;box-shadow:0 8px 28px rgba(244,184,43,.22)}button:hover{filter:brightness(1.06)}
.note{margin-top:12px;color:#748087;font-size:11px;line-height:1.6}.accent{color:#f4b82b}
#error{position:fixed;left:12px;bottom:12px;color:#f88;font-size:12px;z-index:10;white-space:pre-wrap;pointer-events:none}
#start{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;
background-image:linear-gradient(180deg,rgba(0,0,0,.02) 50%,rgba(0,0,0,.68) 100%);
background-size:cover;background-position:center;background-repeat:no-repeat;z-index:5}
.titleHud{width:min(920px,92vw);padding:0 0 26px;text-align:center;filter:drop-shadow(0 4px 12px rgba(0,0,0,.9))}
.versionBadge{display:inline-block;margin-bottom:9px;padding:6px 11px;border:1px solid rgba(255,255,255,.25);
border-radius:7px;background:rgba(0,0,0,.58);font:800 11px ui-monospace,Consolas;letter-spacing:.12em;color:#f2f5f5}
.specStrip{margin:0 auto 12px;padding:8px 12px;max-width:820px;border-radius:8px;background:rgba(0,0,0,.56);
color:rgba(235,241,242,.88);font:700 10px/1.55 ui-monospace,Consolas;letter-spacing:.03em}
.courseButtons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.courseButtons button{width:min(320px,42vw);margin:0}#go{margin:0;border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:13px 22px;
background:linear-gradient(90deg,rgba(190,24,18,.92),rgba(255,56,30,.96),rgba(190,24,18,.92));color:#fff;
font-weight:1000;font-size:18px;letter-spacing:.18em;cursor:pointer;box-shadow:0 0 32px rgba(255,45,25,.42)}
#go:hover{filter:brightness(1.12)}
#practice{border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:13px 22px;
background:linear-gradient(90deg,rgba(30,82,112,.94),rgba(56,132,170,.96),rgba(30,82,112,.94));color:#fff;
font-weight:1000;font-size:18px;letter-spacing:.12em;cursor:pointer;box-shadow:0 0 28px rgba(70,160,210,.30)}
#practice:hover{filter:brightness(1.12)}
#playground{border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:13px 22px;
background:linear-gradient(90deg,rgba(112,34,124,.94),rgba(182,63,190,.96),rgba(112,34,124,.94));color:#fff;
font-weight:1000;font-size:18px;letter-spacing:.10em;cursor:pointer;box-shadow:0 0 28px rgba(205,80,220,.28)}
#playground:hover{filter:brightness(1.12)}
#driftPlayground{border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:13px 22px;background:linear-gradient(90deg,rgba(120,72,18,.94),rgba(214,145,34,.96),rgba(120,72,18,.94));color:#fff;font-weight:1000;font-size:18px;letter-spacing:.10em;cursor:pointer;box-shadow:0 0 28px rgba(235,155,45,.28)}#driftPlayground:hover{filter:brightness(1.12)}
.playerGate{margin:0 auto 10px;width:min(680px,92vw);display:grid;grid-template-columns:1fr auto;gap:8px}
#playerName{min-width:0;padding:12px 14px;border:1px solid rgba(255,255,255,.34);border-radius:8px;background:rgba(0,0,0,.72);
color:#fff;font:800 15px ui-monospace,Consolas;letter-spacing:.08em;outline:none;box-sizing:border-box}
#playerName:focus{border-color:#f4b82b;box-shadow:0 0 20px rgba(244,184,43,.22)}
#playerName.invalid{border-color:#ff4938;box-shadow:0 0 22px rgba(255,73,56,.30)}
#nameStatus{display:flex;align-items:center;padding:0 12px;border-radius:8px;background:rgba(0,0,0,.62);color:#d5dcde;
font:800 10px ui-monospace,Consolas;white-space:nowrap}
.titleActions{display:flex;gap:10px;justify-content:center;align-items:stretch;flex-wrap:wrap}
#rankingBtn{margin:0;width:auto;min-width:190px;border:1px solid rgba(255,255,255,.40);border-radius:8px;padding:13px 18px;
background:rgba(4,8,10,.86);color:#fff;font-weight:1000;font-size:15px;letter-spacing:.10em;cursor:pointer;box-shadow:0 0 24px rgba(255,255,255,.08)}
#rankingBtn:hover{filter:brightness(1.16)}
.trainingHint{width:100%;margin:-1px 0 0;text-align:center;color:rgba(220,230,232,.72);font:800 9px ui-monospace,Consolas;letter-spacing:.12em}
.rivalLevel{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:1px 0 0}
.rivalLevelLabel{color:rgba(225,235,238,.82);font:900 9px ui-monospace,Consolas;letter-spacing:.12em}
.rivalLevel button{width:auto;min-width:82px;margin:0;padding:7px 13px;border-radius:6px;background:rgba(12,18,22,.78);border:1px solid rgba(255,255,255,.18);color:rgba(220,228,231,.76);font:900 9px ui-monospace,Consolas;letter-spacing:.11em}
.rivalLevel button.active{color:#0a0d0f;background:#ffe327;border-color:#fff2a2;box-shadow:0 0 16px rgba(255,227,39,.30)}
@keyframes nameAlarm{0%,100%{box-shadow:0 0 8px rgba(255,35,18,.30),inset 0 0 0 rgba(255,35,18,0)}50%{box-shadow:0 0 34px rgba(255,35,18,.95),0 0 70px rgba(255,178,32,.34),inset 0 0 18px rgba(255,35,18,.16)}}
@keyframes statusAlarm{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.055);filter:brightness(1.45)}}
.playerGate.nameMissing #playerName{border-color:#ff3526;background:rgba(32,0,0,.82);animation:nameAlarm .62s steps(2,end) infinite}
.playerGate.nameMissing #nameStatus{color:#fff3d2!important;background:linear-gradient(90deg,rgba(150,8,0,.94),rgba(242,59,15,.96));animation:statusAlarm .62s steps(2,end) infinite;text-shadow:0 0 9px #ffdf7a}
#rankingConnection{margin:8px auto 0;color:rgba(225,234,236,.72);font:800 10px ui-monospace,Consolas;letter-spacing:.08em}
#rankingConnection.online{color:#7ff0b4} #rankingConnection.warn{color:#ffca58}
#rankingOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.78);z-index:20;backdrop-filter:blur(5px)}
#rankingOverlay.show{display:flex}
.rankingPanel{width:min(760px,92vw);max-height:82vh;overflow:auto;border:1px solid rgba(255,255,255,.18);border-radius:16px;
background:linear-gradient(180deg,rgba(8,13,15,.97),rgba(3,6,7,.98));box-shadow:0 30px 100px rgba(0,0,0,.82);padding:24px}
.rankingHead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}
.rankingTitle{font:1000 27px "Arial Black","Segoe UI",sans-serif;letter-spacing:.08em}
.rankingSub{color:#8f9ca1;font:700 11px ui-monospace,Consolas;margin-top:4px}
#rankingClose{width:auto;margin:0;padding:9px 13px;border-radius:7px;background:#20292c;color:#fff;box-shadow:none}
.rankRow{display:grid;grid-template-columns:50px minmax(120px,1fr) 90px 145px 110px;gap:8px;align-items:center;padding:10px 12px;
border-top:1px solid rgba(255,255,255,.08);font:800 13px ui-monospace,Consolas}
.rankRow.header{color:#8e9b9f;font-size:10px;border-top:0}.rankNo{color:#f4b82b;font-size:17px}
.worldRankTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}.worldRankTabs button{margin:0;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:#111a1d;color:#8fa0a5;font:900 11px ui-monospace,Consolas;letter-spacing:.05em;box-shadow:none}.worldRankTabs button.active{border-color:#f4b82b;color:#fff1bd;background:#2a220d}.worldRankTabs button:hover{border-color:#d4a62f;color:#fff}
.rankName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rankCar{text-align:center;color:#c7d6da;white-space:nowrap}.rankCar.tuned{color:#ffd45f}.rankTime{font-size:17px;text-align:right}.rankDate{text-align:right;color:#819095;font-size:11px}
#rankingState{padding:18px 8px;text-align:center;color:#a5b0b4;font:800 12px ui-monospace,Consolas}
.finishToast{position:fixed;left:50%;top:16%;transform:translate(-50%,-20px);z-index:15;pointer-events:none;opacity:0;transition:.25s ease;
padding:16px 24px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(3,6,7,.90);text-align:center;box-shadow:0 22px 70px rgba(0,0,0,.68)}
.finishToast.show{opacity:1;transform:translate(-50%,0)}.finishToast b{display:block;font:1000 22px "Arial Black","Segoe UI",sans-serif;color:#f4b82b}
.finishToast span{font:800 12px ui-monospace,Consolas;color:#e8eeee}
button:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.55)}
@media(max-width:720px){.playerGate{grid-template-columns:1fr}.rankRow{grid-template-columns:38px minmax(72px,1fr) 68px 104px;gap:5px;padding:9px 6px;font-size:10px}.rankNo{font-size:14px}.rankTime{font-size:13px}.rankDate{display:none}.courseButtons button{width:min(320px,84vw)}}
/* ============================================================
v0.7.7 SPEED / FPS
Keep the entire game in a centered 16:9 stage.
The browser/site header or taskbar may reduce the available
viewport, but the stage is always scaled DOWN to fit both axes.
Nothing is cropped; unused space becomes black letterbox bars.
============================================================ */
html,body{
background:#000;
}
body{
display:flex;
align-items:center;
justify-content:center;
}
canvas{
width:min(100vw,calc(100vh * 16 / 9));
height:min(100vh,calc(100vw * 9 / 16));
flex:0 0 auto;
background:#050708;
}
#start{
inset:auto;
left:50%;
top:50%;
width:min(100vw,calc(100vh * 16 / 9));
height:min(100vh,calc(100vw * 9 / 16));
transform:translate(-50%,-50%);
box-sizing:border-box;
background-color:#050708;
background-size:contain;
background-position:center center;
}
/* Keep the title controls inside the fitted stage even on a
short embedded browser viewport. */
.titleHud{
width:min(920px,92%);
padding-bottom:clamp(10px,2.8vh,26px);
box-sizing:border-box;
}
@media (max-height:760px){
.versionBadge{margin-bottom:5px;padding:4px 9px;font-size:9px}
.specStrip{margin-bottom:7px;padding:5px 9px;font-size:8px;line-height:1.35}
.playerGate{margin-bottom:7px}
#playerName{padding:9px 11px;font-size:12px}
#nameStatus{font-size:8px;padding:0 9px}
#go,#practice{padding:10px 16px;font-size:14px}
#rankingBtn{padding:10px 14px;font-size:12px}
.trainingHint{font-size:7px}
#rankingConnection{margin-top:5px;font-size:8px}
}
/* v0.7.9: FPS meter lives in the DOM so it remains visible on title/game screens. */
#perfOverlay{position:fixed;top:8px;right:8px;z-index:99999;pointer-events:none;
padding:6px 9px;border-radius:7px;background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.16);
color:#8ff0b0;font:800 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.03em;
text-shadow:0 1px 2px #000;white-space:nowrap}
/* ---------- v1.0.0 GLOBAL LOBBY / LIVE STATUS / RESULT / RANKING ---------- */
#onlineBtn{border:1px solid rgba(70,220,255,.62);background:linear-gradient(90deg,rgba(8,76,105,.96),rgba(23,181,224,.98),rgba(8,76,105,.96));color:#fff;box-shadow:0 0 28px rgba(32,196,238,.28)}
#onlineBtn:hover{filter:brightness(1.12)}
#onlineOverlay{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.82);backdrop-filter:blur(5px)}
#onlineOverlay.show{display:flex}
.onlinePanel{width:min(1040px,95vw);max-height:92vh;overflow:auto;border:1px solid rgba(81,222,255,.42);border-radius:16px;background:linear-gradient(180deg,rgba(8,18,24,.985),rgba(3,8,11,.985));box-shadow:0 26px 90px rgba(0,0,0,.78),0 0 45px rgba(30,190,235,.12);padding:20px}
.onlineTitle{font:1000 30px/1 "Arial Black","Yu Gothic UI",sans-serif;letter-spacing:.08em;color:#fff}.onlineTitle b{color:#50dcff}.onlineVersion{display:inline-block;margin-left:10px;padding:3px 7px;border:1px solid rgba(80,220,255,.36);border-radius:999px;color:#9cecff;background:rgba(22,127,160,.14);font:900 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.04em;vertical-align:middle}
.onlineSub{margin-top:7px;color:#92a9b2;font:700 10px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.06em}
.onlineLobbyLine{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:9px 11px;border:1px solid rgba(255,255,255,.11);border-radius:8px;background:rgba(0,0,0,.27);font:800 11px ui-monospace,Consolas;color:#aebdc3}.onlineLobbyLine b{color:#6beaff}
.onlineGrid{display:grid;grid-template-columns:minmax(360px,1.2fr) minmax(300px,.8fr);gap:12px;margin-top:12px}
.onlineBox{border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(0,0,0,.22);padding:11px;min-width:0}
.onlineBoxTitle{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#eaf8fb;font:900 11px ui-monospace,Consolas;letter-spacing:.08em;margin-bottom:8px}
.onlineMaps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.onlineMapCard{min-width:0}
.onlineLobbyCanvas{display:block;width:100%;height:220px;border:1px solid rgba(80,220,255,.16);border-radius:8px;background:#030709;box-sizing:border-box}
/* MAP HEADER BAR: course name + state in one framed header. */
.onlineMapTitle{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
min-height:0!important;
margin:0!important;
padding:7px 9px!important;
box-sizing:border-box!important;
border:1px solid rgba(61,226,222,.34)!important;
border-radius:8px 8px 0 0!important;
background:linear-gradient(90deg,rgba(35,198,205,.075),rgba(0,0,0,.16) 45%,rgba(0,0,0,.10))!important;
}
.onlineMapCard:nth-child(2) .onlineMapTitle{
border-color:rgba(83,151,255,.34)!important;
background:linear-gradient(90deg,rgba(62,119,255,.08),rgba(0,0,0,.16) 45%,rgba(0,0,0,.10))!important;
}
.onlineCourseHeading{
display:block;
min-width:0;
color:#eaf8fb;
font:900 11px/1 ui-monospace,Consolas,monospace;
letter-spacing:.08em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.onlineCourseHeading strong{
color:inherit;
font:inherit;
letter-spacing:inherit;
text-shadow:none;
white-space:inherit;
}
.onlineCourseState{
display:inline-flex;
align-items:center;
justify-content:flex-end;
flex:0 0 auto;
min-width:0;
min-height:0;
padding:0;
border:0;
border-radius:0;
background:none;
color:#8ff0b0;
font:900 10px/1 ui-monospace,Consolas,monospace;
letter-spacing:.06em;
box-shadow:none;
white-space:nowrap;
}
.onlineCourseState:before{
content:"";
width:6px;
height:6px;
margin-right:6px;
border-radius:50%;
background:#6cffaf;
box-shadow:0 0 7px rgba(108,255,175,.72);
}
@media(max-width:700px){
.onlineMapTitle{padding:6px 7px!important}
.onlineCourseHeading{font-size:9px}
.onlineCourseState{font-size:8px}
}
.onlineMapCard:first-child .onlineLobbyCanvas{margin-top:-1px;border-radius:0 0 8px 8px;border-color:rgba(61,226,222,.34);box-shadow:inset 0 0 18px rgba(40,220,215,.045),0 0 12px rgba(40,220,215,.035)}
.onlineMapCard:nth-child(2) .onlineLobbyCanvas{margin-top:-1px;border-radius:0 0 8px 8px;border-color:rgba(83,151,255,.34);box-shadow:inset 0 0 18px rgba(70,135,255,.045),0 0 12px rgba(70,135,255,.035)}
.onlineCourseSelect{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding:8px;border:1px solid rgba(80,220,255,.14);border-radius:8px;background:rgba(0,0,0,.24);color:#9fb6be;font:900 9px ui-monospace,Consolas}.onlineCourseSelect>div{display:flex;gap:6px}.onlineCourseSelect button{width:auto;margin:0;padding:8px 10px;background:#12242b;color:#b8d5de;box-shadow:none;border:1px solid rgba(80,220,255,.22);font-size:9px}.onlineCourseSelect button.active{background:#42dff5;color:#001116;border-color:#9af2ff}
.onlineCourseSelect>div{flex-wrap:wrap;justify-content:flex-end}.onlineCourseSelect button.training{border-color:rgba(244,184,43,.42);color:#f4d58a}.onlineCourseSelect button.training.active{background:#f4b82b;color:#120d00;border-color:#ffe39a}.onlineHomeTools{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 0}.onlineHomeTools button{margin:0;padding:8px 10px;background:#10191d;color:#b9ced5;border:1px solid rgba(80,220,255,.18);box-shadow:none;font-size:9px}.lapFlash{position:fixed;left:50%;top:25%;z-index:74;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.82);transition:opacity .16s ease,transform .16s ease;filter:drop-shadow(0 5px 10px rgba(0,0,0,.55));white-space:nowrap}.lapFlash.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.lapFlash>#lapFlashText{display:block;padding:12px 22px;border:2px solid rgba(255,220,85,.72);border-radius:10px;background:rgba(4,7,9,.52);color:#ffe052;font:1000 clamp(28px,5.2vw,72px)/1 ui-monospace,Consolas,monospace;letter-spacing:.02em;text-shadow:0 2px 0 #000,0 0 18px rgba(255,204,35,.48)}
#onlineMemberList{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;margin-top:8px}
.onlineMember{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:7px 8px;border:1px solid rgba(80,220,255,.14);border-radius:7px;background:rgba(8,36,47,.42)}
.onlineMember.me{border-color:rgba(116,247,174,.35)}.onlineMember .memberName{min-width:0;color:#fff;font:900 11px ui-monospace,Consolas;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.onlineMember .memberState{color:#8fa9b2;font:800 9px ui-monospace,Consolas}.onlineMember button{width:auto;margin:0;padding:7px 8px;font-size:9px;background:#ffbd2e;color:#071014;box-shadow:none}.onlineMember button:disabled{opacity:.38}
.onlineMainAction{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}.onlineMainAction button{margin:0;padding:12px 11px;font-size:11px}.onlineMainAction #onlineGameStart{background:#45f083;color:#03130a}.onlineMainAction #onlineClose{width:auto;background:#17242a;color:#dbe9ed;box-shadow:none;border:1px solid rgba(255,255,255,.12)}
#onlineStatus{margin-top:8px;min-height:36px;padding:8px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.34);color:#c7d2d7;font:800 10px/1.45 ui-monospace,Consolas,monospace;white-space:pre-wrap}.onlineGood{color:#74f7ae!important}.onlineWarn{color:#ffd56a!important}.onlineBad{color:#ff7165!important}#onlineP2PRetry{display:none;width:100%;margin-top:7px;padding:9px 10px;border:1px solid rgba(255,91,82,.72);border-radius:8px;background:linear-gradient(180deg,rgba(154,20,15,.95),rgba(87,8,7,.95));color:#fff;font:900 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;cursor:pointer}#onlineP2PRetry.show{display:block}#onlineP2PRetry:hover{filter:brightness(1.14)}
.chatLog{height:305px;overflow:auto;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(0,0,0,.36);padding:8px;box-sizing:border-box}.chatLine{margin:0 0 6px;color:#dce8eb;font:700 11px/1.4 ui-monospace,Consolas;word-break:break-word}.chatLine b{color:#65e6ff}.chatLine.me b{color:#8df6a9}.chatLine.gacha{padding:5px 7px;border:1px solid rgba(70,176,255,.46);border-radius:6px;background:linear-gradient(90deg,rgba(28,104,170,.15),rgba(12,42,72,.07));color:#eaf6ff;box-shadow:inset 0 0 16px rgba(58,162,255,.055),0 0 8px rgba(58,162,255,.035)}.chatLine.gacha b{color:#6fd7ff;text-shadow:0 0 8px rgba(72,195,255,.22)}.chatLine.system{color:#8a9ca2;font-size:10px}.chatRow{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:8px}.chatRow input{min-width:0;padding:10px 11px;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:#05090b;color:#fff;font:700 12px ui-monospace,Consolas;outline:none}.chatRow button{width:auto;margin:0;padding:9px 13px;background:#50dcff;color:#001014;box-shadow:none;font-size:11px}
#onlineBattleSetup{display:none;margin-top:9px;padding:10px;border:1px solid rgba(255,189,46,.34);border-radius:8px;background:rgba(60,39,4,.22)}#onlineBattleSetup.show{display:block}.setupVs{font:1000 18px "Arial Black","Yu Gothic UI",sans-serif;color:#fff;letter-spacing:.05em}.setupCards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.setupCard{padding:8px;border:1px solid rgba(255,255,255,.13);border-radius:7px;background:rgba(0,0,0,.32);font:800 9px/1.55 ui-monospace,Consolas;color:#8fa7af}.setupCard b{display:block;color:#fff;font-size:11px}.setupSelected{color:#ffd466}.setupActions{display:flex;gap:7px;margin-top:8px}.setupActions button{margin:0;padding:10px;font-size:10px}.setupActions #onlineBattleStart{background:#ffbd2e;color:#111}.setupActions #onlineSetupCancel{background:#17242a;color:#dbe9ed;box-shadow:none}
#challengeOverlay{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.76);backdrop-filter:blur(4px)}#challengeOverlay.show{display:flex}.challengePanel{width:min(520px,90vw);padding:24px;border:1px solid rgba(255,189,46,.7);border-radius:14px;background:linear-gradient(180deg,rgba(29,18,4,.98),rgba(5,8,9,.98));box-shadow:0 0 60px rgba(255,177,25,.22);text-align:center}.challengeWarn{font:1000 15px ui-monospace,Consolas;color:#ffbd2e;letter-spacing:.22em}.challengeName{margin-top:8px;font:1000 30px/1.1 "Arial Black","Yu Gothic UI",sans-serif;color:#fff}.challengeMeta{margin-top:8px;color:#9db1b8;font:800 10px/1.6 ui-monospace,Consolas}.challengeButtons{display:grid;grid-template-columns:1fr 1fr;gap:9px}.challengeButtons button{margin-top:16px;padding:13px;font-size:12px}.challengeButtons #challengeAccept{background:#45f083}.challengeButtons #challengeDecline{background:#30191a;color:#ff9289;border:1px solid rgba(255,90,80,.35);box-shadow:none}
#onlineRaceHud{position:fixed;top:104px;right:8px;z-index:99998;pointer-events:none;display:none;padding:7px 10px;border-radius:7px;background:rgba(0,0,0,.70);border:1px solid rgba(80,220,255,.32);color:#70e6ff;font:900 11px/1.25 ui-monospace,Consolas,monospace;text-shadow:0 1px 2px #000;white-space:nowrap}#onlineRaceHud.show{display:none!important}
.battleRankWrap{margin-top:12px;padding:11px 10px 9px;border:1px solid rgba(255,196,58,.58);border-radius:10px;background:linear-gradient(180deg,rgba(36,27,4,.78),rgba(8,8,6,.92));box-shadow:inset 0 0 24px rgba(255,185,34,.055),0 0 20px rgba(255,183,28,.08)}
.battleRankHead{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:-1px -1px 9px;padding:6px 8px 9px;border-bottom:1px solid rgba(255,199,71,.28)}
.battleRankHead strong{font:1000 19px/1 "Arial Black","Yu Gothic UI",sans-serif;letter-spacing:.12em;color:#ffd765;text-shadow:0 0 12px rgba(255,191,36,.28)}
.battleRankHead span{margin-top:4px;color:#b8a56b;font:800 8px ui-monospace,Consolas;letter-spacing:.08em}
.battleRankTabs{display:flex;gap:5px;margin-top:7px}.battleRankTabs button{width:auto!important;min-width:86px!important;margin:0!important;padding:5px 9px!important;border-radius:5px!important;border:1px solid rgba(255,211,76,.24)!important;background:rgba(255,255,255,.035)!important;color:#a99a6b!important;box-shadow:none!important;font:900 8px/1 ui-monospace,Consolas!important;letter-spacing:.06em!important}.battleRankTabs button.active{background:#ffd45f!important;color:#151003!important;border-color:#fff0a4!important}.recordCourseSection{margin-top:12px;padding:12px;border:1px solid #203a35;background:#071012}.recordCourseHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.recordCourseHead b{font:1000 17px/1 "Arial Black",sans-serif;color:#caff59;letter-spacing:.08em}.recordCourseHead span{font:800 9px ui-monospace,Consolas;color:#78948e}.recordCourseSection.tsukuba .recordCourseHead b{color:#72ddff}.recordCourseSection .recordHero{margin:8px 0}.recordCourseSection .recordGrid{margin-bottom:8px}
.battleRankColumns{display:grid;grid-template-columns:46px minmax(0,1fr) 48px 48px 50px;gap:5px;align-items:center;padding:0 7px 5px;color:#8e8054;font:900 7px ui-monospace,Consolas;letter-spacing:.08em;text-align:right}.battleRankColumns span:nth-child(1),.battleRankColumns span:nth-child(2){text-align:left}
.battleRankingList{display:flex;flex-direction:column;gap:4px}.battleRankRow{display:grid;grid-template-columns:46px minmax(0,1fr) 48px 48px 50px;gap:5px;align-items:center;padding:7px 7px;border:1px solid rgba(255,255,255,.055);border-radius:6px;background:rgba(255,255,255,.025);font:900 9px ui-monospace,Consolas;color:#c4c7c4;text-align:right;transition:.15s}.battleRankRow .rankPos{text-align:left;font-size:10px;color:#919997}.battleRankRow .rankName{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f4f7f6;font-size:10px}.battleRankRow .rankWins{color:#ffd45f;font-size:11px}.battleRankRow .rankLosses{color:#d2a4a0}.battleRankRow .rankRate{color:#a7cdd5}.battleRankRow.p1{border-color:rgba(255,211,76,.65);background:linear-gradient(90deg,rgba(123,87,5,.34),rgba(255,196,37,.08));box-shadow:inset 3px 0 0 #ffd64d}.battleRankRow.p2{border-color:rgba(205,215,224,.38);background:linear-gradient(90deg,rgba(125,135,145,.19),rgba(255,255,255,.025));box-shadow:inset 3px 0 0 #c9d1d8}.battleRankRow.p3{border-color:rgba(216,148,85,.38);background:linear-gradient(90deg,rgba(118,63,22,.22),rgba(255,255,255,.025));box-shadow:inset 3px 0 0 #d58b4b}.battleRankRow.you{outline:1px solid rgba(79,235,154,.48);background-color:rgba(49,185,113,.08)}.battleRankRow .onlineDot{color:#5ef09a}.battleRankRow .youTag{display:inline-block;margin-left:5px;padding:1px 4px;border-radius:3px;background:#42e788;color:#042412;font-size:6px;vertical-align:1px}.battleRankEmpty{padding:10px;color:#8f8a72;font:800 9px ui-monospace,Consolas;text-align:center}.battleRankState{color:#847b5f;font:800 7px ui-monospace,Consolas;margin-top:7px;text-align:right;letter-spacing:.05em}
.onlineControlDock{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.10)}
#globalOnlineStatus{position:fixed;top:36px;right:8px;z-index:99998;pointer-events:none;min-width:285px;max-width:min(430px,calc(100vw - 16px));box-sizing:border-box;padding:10px 12px 10px;border-radius:10px;border:1px solid rgba(91,241,163,.58);background:linear-gradient(180deg,rgba(2,22,18,.96),rgba(2,9,12,.95));box-shadow:0 0 30px rgba(70,240,160,.18),0 7px 24px rgba(0,0,0,.42);text-align:right;font-family:ui-monospace,Consolas,monospace;text-shadow:0 1px 2px #000}.globalOnlineMain{font:1000 17px/1.05 ui-monospace,Consolas,monospace;letter-spacing:.055em;color:#eafff5;white-space:nowrap}.globalOnlineMain .onlineLed{color:#58f39b;text-shadow:0 0 9px rgba(88,243,155,.95)}.globalOnlineMain b{font-size:23px;color:#77ffae}.globalOnlineSub{margin-top:5px;color:#91b5aa;font:800 8px/1.25 ui-monospace,Consolas,monospace;letter-spacing:.035em;white-space:normal}.globalOnlinePlayers{margin-top:7px;padding-top:7px;border-top:1px solid rgba(102,235,171,.18);display:grid;gap:3px;text-align:left}.globalOnlinePlayer{display:grid;grid-template-columns:minmax(72px,1fr) auto;align-items:center;gap:10px;min-height:16px;padding:2px 3px;border-radius:4px;font:900 9px/1.2 ui-monospace,Consolas,monospace;background:rgba(255,255,255,.018)}.globalOnlinePlayer.self{background:rgba(83,239,158,.08)}.globalOnlinePlayer .pname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8fff5}.globalOnlinePlayer.self .pname:after{content:' YOU';color:#65f3a3;font-size:7px;letter-spacing:.08em}.globalOnlinePlayer .pstate{white-space:nowrap;color:#8ec3b1;font-size:8px}.globalOnlinePlayer .pstate.lobby{color:#77ffae}.globalOnlinePlayer .pstate.run{color:#ffd875}.globalOnlinePlayer .pstate.train{color:#72ddff}.globalOnlinePlayer .pstate.battle{color:#ff9c78}.globalOnlineMore{padding:2px 3px;color:#789c90;font:800 8px/1.2 ui-monospace,Consolas,monospace;text-align:right}.globalOnlineStatus.offline{border-color:rgba(255,255,255,.18);box-shadow:0 7px 24px rgba(0,0,0,.35)}.globalOnlineStatus.offline .globalOnlineMain,.globalOnlineStatus.offline .globalOnlineMain b,.globalOnlineStatus.offline .globalOnlineMain .onlineLed{color:#829096;text-shadow:none}.globalOnlineStatus.offline .globalOnlineSub{color:#68777c}.globalOnlineStatus.offline .globalOnlinePlayers{display:none}
#globalNoticeStack{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:99997;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:7px;width:min(520px,calc(100vw - 24px))}.globalNotice{width:100%;box-sizing:border-box;padding:10px 13px;border-radius:9px;border:1px solid rgba(80,220,255,.38);background:rgba(3,11,15,.92);box-shadow:0 9px 28px rgba(0,0,0,.38);color:#e9f8fb;font:800 11px/1.4 ui-monospace,Consolas;animation:noticeIn .22s ease-out;text-align:center}.globalNotice b{display:block;color:#63e6ff;font-size:9px;letter-spacing:.11em;margin-bottom:2px}.globalNotice.lobby b{color:#8df6a9}.globalNotice.result b{color:#ffd36a}.globalNotice.login{padding:15px 18px;border-color:rgba(100,240,255,.82);background:linear-gradient(180deg,rgba(4,43,55,.97),rgba(2,13,18,.97));box-shadow:0 0 34px rgba(80,224,255,.28),0 12px 36px rgba(0,0,0,.52);font:1000 18px/1.25 "Arial Black","Yu Gothic UI",sans-serif;letter-spacing:.035em}.globalNotice.login b{font:1000 11px/1 ui-monospace,Consolas,monospace;color:#7df1ff;letter-spacing:.22em;margin-bottom:7px}.globalNotice.summary{border-color:rgba(116,247,174,.38);background:rgba(3,28,22,.92)}.globalNotice.summary b{color:#8df6a9}@keyframes noticeIn{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:800px){.lapFlash{top:18%}.lapFlash span{font-size:clamp(26px,8vw,48px);padding:10px 14px}.onlineCourseSelect{align-items:flex-start}.onlineCourseSelect>div{justify-content:flex-start}.onlineCourseSelect button{font-size:8px;padding:7px 8px}.onlineGrid{grid-template-columns:1fr}.onlinePanel{padding:13px}.chatLog{height:170px}#onlineLobbyMap{height:230px}.onlineTitle{font-size:23px}.setupCards{grid-template-columns:1fr}.onlineMember{grid-template-columns:minmax(0,1fr) auto}.onlineMember button{grid-column:1/-1;width:100%}#globalOnlineStatus{top:34px;right:6px;min-width:230px;max-width:calc(100vw - 12px);padding:8px 9px}.globalOnlineMain{font-size:14px}.globalOnlineMain b{font-size:18px}.globalOnlineSub{font-size:7px}.globalOnlinePlayer{font-size:8px;grid-template-columns:minmax(64px,1fr) auto}.globalOnlinePlayer .pstate{font-size:7px}#onlineRaceHud{top:91px;right:6px;max-width:calc(100vw - 12px);overflow:hidden;text-overflow:ellipsis}#globalNoticeStack{top:96px;width:min(460px,calc(100vw - 16px))}.globalNotice.login{font-size:15px;padding:13px 12px}}
/* ---------- v0.9.3 ACCOUNT / BATTLE RECORD ---------- */
.accountActions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.accountActions button{min-width:150px}
#accountOverlay,#recordOverlay{position:fixed;inset:0;z-index:82;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;padding:18px}
#accountOverlay.show,#recordOverlay.show{display:flex}
#accountOverlay.mandatory{background:radial-gradient(circle at 50% 38%,rgba(16,55,48,.34),rgba(0,0,0,.96) 58%);z-index:100050}#accountOverlay.mandatory .accountPanel{border-color:rgba(132,255,197,.82);box-shadow:0 0 70px rgba(50,255,170,.18),0 22px 70px rgba(0,0,0,.88)}#accountOverlay.mandatory .accountTitle:before{content:'LOGIN REQUIRED · ';color:#caff59}#accountOverlay.mandatory #accountClose{display:none!important}.accountLoginName{width:100%;box-sizing:border-box;background:#040909;border:1px solid #34564e;color:#fff;padding:12px;font-size:16px;outline:none;margin-bottom:8px;text-transform:none}.accountLoginName:focus{border-color:#8ff2cc}.loginRequiredNote{margin:0 0 12px;padding:9px 10px;border:1px solid rgba(202,255,89,.25);background:rgba(202,255,89,.05);color:#dfffa1;font:800 10px/1.45 ui-monospace,Consolas,monospace;letter-spacing:.035em}
.accountPanel,.recordPanel{width:min(620px,96vw);max-height:88vh;overflow:auto;background:linear-gradient(180deg,#10191b,#071012);border:1px solid rgba(121,240,192,.48);box-shadow:0 0 40px rgba(0,0,0,.75);padding:20px}
.accountTitle,.recordTitle{font:900 25px/1.1 "Arial Black","Yu Gothic UI",sans-serif;letter-spacing:1px;color:#eafff7}
.accountSub,.recordSub{font-size:12px;color:#8eb2aa;margin:5px 0 16px}
.accountName{padding:11px 12px;background:#081012;border:1px solid #27453f;color:#aef7d8;font-weight:800;margin-bottom:9px}
.accountPanel input{width:100%;box-sizing:border-box;background:#040909;border:1px solid #34564e;color:#fff;padding:12px;font-size:16px;outline:none}
.accountPanel input:focus{border-color:#8ff2cc}
.accountButtons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.accountButtons button{min-height:44px;font-weight:900}
#accountLogin{background:#caff59;color:#101600;border:0}#accountRegister{background:linear-gradient(180deg,#ffe26c,#f1b72d);color:#171000;border:1px solid #ffeaa7;box-shadow:0 0 24px rgba(255,196,64,.20)}
.accountNewUser{margin:0 0 16px;padding:14px;border:1px solid rgba(255,196,64,.50);border-radius:10px;background:linear-gradient(180deg,rgba(255,196,64,.12),rgba(255,170,40,.04));box-shadow:inset 0 0 28px rgba(255,196,64,.05),0 0 34px rgba(255,196,64,.07);text-align:center}.accountNewUserLead{display:block;color:#fff8e0;font:1000 18px/1.15 "Arial Black","Yu Gothic UI",sans-serif;letter-spacing:.02em}.accountNewUserSub{display:block;margin-top:5px;color:#e6c98d;font:800 10px/1.45 "Yu Gothic UI",Arial,sans-serif}.accountNewUser #accountRegister{width:100%;min-height:54px;margin-top:11px;border-radius:8px;font:1000 17px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em}.accountFeaturePreview{margin-top:9px;color:#ccb88f;font:800 9px/1.55 "Yu Gothic UI",Arial,sans-serif}.accountFeaturePreview b{color:#ffe085}.accountExistingDivider{display:flex;align-items:center;gap:10px;margin:15px 0 10px;color:#80938e;font:900 9px/1 ui-monospace,Consolas,monospace;letter-spacing:.12em}.accountExistingDivider:before,.accountExistingDivider:after{content:"";height:1px;flex:1;background:rgba(143,242,204,.16)}.accountLoginField{margin:0 0 12px}.accountLoginLabel{display:block;margin:0 0 7px;color:#dfffa1;font:1000 13px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em}.accountButtons.loginOnly{grid-template-columns:1fr}.accountButtons.loginOnly #accountLogin{min-height:48px;font-size:15px;letter-spacing:.08em}
#accountClose,#recordClose,#accountLogout{background:#111;color:#ccc;border:1px solid #444}
#accountState{white-space:pre-line;margin-top:10px;min-height:34px;font-size:12px;color:#a9beb8}.accountGood{color:#7ff0b4!important}.accountBad{color:#ff8e86!important}.accountWarn{color:#ffd76a!important}
#accountCreateOverlay{position:fixed;inset:0;z-index:100120;background:rgba(0,0,0,.90);display:none;align-items:center;justify-content:center;padding:18px}
#accountCreateOverlay.show{display:flex}
.accountCreatePanel{width:min(600px,96vw);max-height:90vh;overflow:auto;box-sizing:border-box;background:linear-gradient(180deg,#111b1d,#071012);border:1px solid rgba(132,255,197,.82);box-shadow:0 0 70px rgba(50,255,170,.18),0 22px 70px rgba(0,0,0,.88);padding:22px}
.accountCreateTitle{font:900 27px/1.1 "Arial Black","Yu Gothic UI",sans-serif;letter-spacing:1px;color:#eafff7}.accountCreateSub{margin:6px 0 18px;color:#8eb2aa;font:800 11px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.04em}
.accountCreateField{margin-top:14px}.accountCreateLabel{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;color:#caff59;font:1000 13px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em}.accountCreateLabel span{color:#6f8d85;font-size:9px;letter-spacing:.04em}
.accountCreatePanel input{width:100%;box-sizing:border-box;background:#040909;border:1px solid #34564e;color:#fff;padding:13px;font-size:17px;outline:none}.accountCreatePanel input:focus{border-color:#8ff2cc;box-shadow:0 0 0 1px rgba(143,242,204,.18)}
.accountCreateRule{margin:0 0 7px;padding:9px 10px;border-left:3px solid rgba(202,255,89,.55);background:rgba(202,255,89,.045);color:#dce9e5;font:800 10px/1.55 ui-monospace,Consolas,monospace}.accountCreateRule b{color:#caff59}.accountCreateRule .en{display:block;color:#87a7a0;margin-top:2px}
.accountCreateButtons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.accountCreateButtons button{min-height:48px;font:1000 14px/1 ui-monospace,Consolas,monospace;letter-spacing:.12em}.accountCreateOk{background:#caff59;color:#101600;border:0}.accountCreateCancel{background:#111;color:#d0d9d6;border:1px solid #485753}
#accountCreateState{white-space:pre-line;margin-top:11px;min-height:34px;color:#a9beb8;font:800 11px/1.45 ui-monospace,Consolas,monospace}.accountCreateStateGood{color:#7ff0b4!important}.accountCreateStateBad{color:#ff8e86!important}.accountCreateStateWarn{color:#ffd76a!important}
@media(max-width:620px){.accountCreatePanel{padding:16px}.accountCreateButtons{grid-template-columns:1fr}.accountCreateTitle{font-size:22px}}
/* v1.3.3 GARAGE / VEHICLE SELECT */
#garageOverlay{position:fixed;inset:0;z-index:100110;background:rgba(0,0,0,.91);display:none;align-items:center;justify-content:center;padding:18px}
#garageOverlay.show{display:flex}
.garagePanel{width:min(860px,96vw);max-height:92vh;overflow:auto;box-sizing:border-box;background:radial-gradient(circle at 50% 0%,rgba(23,92,112,.18),rgba(4,12,16,.98) 42%);border:1px solid rgba(83,222,250,.55);box-shadow:0 0 60px rgba(42,205,238,.10),0 24px 80px rgba(0,0,0,.88);padding:20px}
.garageHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid rgba(83,222,250,.20)}
.garageHead strong{color:#e9fbff;font:1000 29px/1 "Arial Black","Yu Gothic UI",sans-serif;letter-spacing:.07em}.garageHead span{color:#70dff5;font:900 10px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.08em}
.garageOwner{margin:13px 0;padding:10px 12px;background:rgba(65,215,246,.055);border-left:3px solid #55dff7;color:#d9f8ff;font:900 11px/1.45 ui-monospace,Consolas,monospace}
.garageGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.garageCar{position:relative;min-height:270px;padding:13px;border:1px solid rgba(117,177,190,.24);border-radius:12px;background:linear-gradient(180deg,rgba(7,23,28,.88),rgba(2,8,11,.92));color:#c8dadd;text-align:left;cursor:pointer;transition:.16s;overflow:hidden}
.garageCar:hover{border-color:rgba(91,225,250,.65);transform:translateY(-1px)}.garageCar.selected{border-color:#59e1fa;box-shadow:0 0 24px rgba(62,213,242,.18),inset 0 0 28px rgba(61,213,242,.05)}.garageCar.locked{opacity:.50;filter:saturate(.45);cursor:not-allowed}.garageCar.locked:hover{transform:none}
.garageCarVisual{height:170px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:radial-gradient(circle,rgba(88,222,248,.08),rgba(0,0,0,.18) 58%,rgba(0,0,0,.38));overflow:hidden}.garageCarVisual img{display:block;object-fit:fill;filter:drop-shadow(0 10px 8px rgba(0,0,0,.65))}
.garageCarName{margin-top:12px;color:#fff;font:1000 18px/1 "Arial Black","Yu Gothic UI",sans-serif}.garageCarMeta{margin-top:5px;color:#78dff4;font:900 10px/1.35 ui-monospace,Consolas,monospace}.garageCarSpec{margin-top:9px;color:#9db5ba;font:800 9px/1.55 ui-monospace,Consolas,monospace}.garageBadge{position:absolute;top:12px;right:12px;padding:5px 8px;border:1px solid rgba(92,230,255,.42);background:rgba(3,15,20,.88);color:#84edff;font:1000 8px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em}.garageCar.selected .garageBadge{background:#56def7;color:#021015;border-color:#a5f5ff}.garageCar.locked .garageBadge{color:#ffc46b;border-color:#8d6730}
.garageBottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}.garageState{color:#a9c7ce;font:900 10px/1.4 ui-monospace,Consolas,monospace;white-space:pre-line}.garageClose{min-width:140px;padding:12px 18px;background:#10232a;border:1px solid rgba(91,225,250,.50);color:#dcfaff;font:1000 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.10em}
@media(max-width:680px){.garageGrid{grid-template-columns:1fr}.garageCar{min-height:230px}.garageCarVisual{height:140px}.garageBottom{align-items:stretch;flex-direction:column}.garageClose{width:100%}}
.recordHero{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:8px;margin:14px 0}.recordStat{background:#081113;border:1px solid #203a35;padding:10px}.recordStat span{display:block;font-size:10px;color:#7e9c95}.recordStat b{display:block;font:900 21px/1.2 "Arial Black",sans-serif;color:#eafff7;margin-top:3px}.recordName b{font-size:25px;color:#caff59}
.recordGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.recordSmall{background:#091113;padding:9px;border:1px solid #1f3531}.recordSmall span{font-size:10px;color:#78948e}.recordSmall b{display:block;color:#dff8f0;margin-top:3px}
.historyTitle{font-weight:900;color:#9cc9bc;margin:10px 0 6px}.historyRow{display:grid;grid-template-columns:72px 1fr 95px;gap:8px;padding:8px 5px;border-top:1px solid #172826;font-size:12px;align-items:center}.historyResult{font-weight:900}.historyResult.win{color:#78f0ad}.historyResult.loss{color:#ff8b84}.historyMeta{color:#809b94;font-size:10px}.historyTime{text-align:right;color:#dfeeea;font-family:monospace}
.accountLocked #playerName{border-color:#76d8b2!important;color:#aef7d8!important}.accountLocked #nameStatus{color:#7ff0b4!important}
@media(max-width:620px){.recordHero{grid-template-columns:1fr 1fr}.recordGrid{grid-template-columns:1fr 1fr}.accountButtons{grid-template-columns:1fr}.historyRow{grid-template-columns:60px 1fr 75px}}
/* ============================================================
v1.0.15 MANGA IMPACT FX
- Player wall / rival impacts flash an orange 「ガコンッ!!」 manga burst
- Impact text is strength-scaled and cooldown-limited so scraping does not spam
- Drift manga bursts are capped at 2 on screen with a calmer cadence
- Driving physics unchanged
v1.0.14 REAR SLIP + AUDIO CONTINUITY
- Smoke / drift WAV / manga SFX now follow rear-tyre slip estimate
- 1st/2nd-gear low-speed donuts can produce effects without a 43-48 km/h gate
- Engine audio no longer gets double-ducked under tyre/brake effects
- Softer effect ducking + slower recovery prevents audible engine cut-outs after drifts
- Driving physics unchanged
v1.1.3 LIGHTWEIGHT
- Brake manga text is sprite-cached instead of re-rasterized every frame
- Brake-light trails use blur-free layered strokes and fewer samples
- Skid rendering is batched; smoke/skid FX are rate-limited and capped
- WebAudio parameter scheduling is throttled without changing physics
- AC course texture drawing is cropped to the visible camera region
- Online live-map static geometry is cached
v1.0.7 NO BRAKE ZOOM
- Optimized brake-light trails (2 strokes instead of per-segment glow strokes)
- Capped extreme brake camera punch to reduce render spikes
v1.0.5 RANKING LOBBY RENEWAL
Real controls sit directly over the painted left-side menu.
The title image is 1402x1122 and is contained vertically in a
16:9 stage; percentages below map to that artwork.
============================================================ */
#start{align-items:stretch;justify-content:stretch}
.arcadeTitleHud{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important;text-align:left!important;filter:none!important;pointer-events:none;overflow:hidden}
.menuInternalGate{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;margin:0!important;display:block!important}
.arcadeMenu{position:absolute!important;left:17.25%!important;top:31.55%!important;width:19.6%!important;height:40.6%!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;gap:0!important;flex-wrap:nowrap!important;pointer-events:auto}
.arcadeMenu .arcadeNav{position:relative;width:100%!important;height:14.4%!important;min-height:0!important;flex:0 0 14.4%!important;margin:0!important;padding:0 13% 0 8%!important;box-sizing:border-box!important;border:1px solid rgba(255,255,255,.18)!important;border-left:4px solid rgba(238,238,238,.78)!important;border-radius:0!important;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%)!important;background:linear-gradient(90deg,rgba(3,5,6,.96) 0%,rgba(8,10,11,.93) 67%,rgba(15,16,17,.72) 100%)!important;color:#f3f3f1!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),0 3px 14px rgba(0,0,0,.46)!important;text-align:left!important;letter-spacing:0!important;filter:none!important;overflow:hidden!important;transition:transform .11s ease,filter .11s ease,box-shadow .11s ease,border-color .11s ease}
.arcadeMenu .arcadeNav::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(255,44,24,.92),rgba(255,91,37,.34),transparent);transition:width .12s ease;z-index:-1}
.arcadeMenu .arcadeNav b{display:block;font:1000 clamp(12px,1.55vw,25px)/.95 Impact,"Arial Black","Yu Gothic UI",sans-serif;font-style:italic;letter-spacing:.035em;white-space:nowrap;text-shadow:0 2px 5px #000}
.arcadeMenu .arcadeNav span{display:block;margin-top:3px;color:rgba(230,234,235,.68);font:800 clamp(5px,.48vw,8px)/1 ui-monospace,Consolas,monospace;letter-spacing:.07em;white-space:nowrap;text-shadow:0 1px 2px #000}
.arcadeMenu .arcadeNav:hover,.arcadeMenu .arcadeNav:focus-visible{transform:translateX(2.5%);border-color:#ff6b54!important;border-left-color:#fff!important;box-shadow:0 0 25px rgba(255,45,22,.48),inset 0 0 18px rgba(255,45,22,.12)!important;outline:none!important}
.arcadeMenu .arcadeNav:hover::after,.arcadeMenu .arcadeNav:focus-visible::after{width:100%}
.arcadeMenu .arcadePrimary:not(:disabled){background:linear-gradient(90deg,rgba(124,12,5,.96),rgba(43,6,4,.93) 68%,rgba(12,8,8,.74))!important;border-left-color:#ffdfd8!important;box-shadow:0 0 20px rgba(255,41,20,.23),inset 0 0 0 1px rgba(0,0,0,.5)!important}
.arcadeMenu .arcadeOnline:not(:disabled){border-left-color:#66ecff!important}.arcadeMenu .arcadeOnline:not(:disabled) b{color:#a9f7ff!important}
.arcadeMenu .arcadeOnline:hover::after{background:linear-gradient(90deg,rgba(0,156,205,.88),rgba(20,205,255,.30),transparent)}
.arcadeMenu .arcadeNav:disabled{opacity:.42!important;filter:grayscale(.7)!important;cursor:not-allowed!important;transform:none!important}
.arcadePlayerCard{position:absolute;left:16.72%;top:75.18%;width:14.25%;height:15.9%;box-sizing:border-box;padding:.8% .8% .65%;pointer-events:auto;background:linear-gradient(180deg,rgba(4,7,8,.83),rgba(2,4,5,.76));border:1px solid rgba(230,174,70,.50);box-shadow:inset 0 0 0 2px rgba(0,0,0,.55),0 5px 18px rgba(0,0,0,.4);overflow:hidden}
.arcadePlayerLabel{color:#f3c75a;font:1000 clamp(5px,.60vw,10px)/1 ui-monospace,Consolas,monospace;font-style:italic;letter-spacing:.12em}
.arcadePlayerName{margin-top:4%;padding-bottom:4%;border-bottom:1px solid rgba(229,179,70,.28);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font:1000 clamp(8px,.9vw,15px)/1 "Arial Black","Yu Gothic UI",sans-serif;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,255,255,.17)}
.arcadePlayerActions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3%;margin-top:5%}
.arcadePlayerActions button{width:100%!important;margin:0!important;padding:5% 3%!important;min-width:0!important;border-radius:2px!important;border:1px solid rgba(255,255,255,.20)!important;background:rgba(10,14,15,.88)!important;color:#e9eeee!important;box-shadow:none!important;font:900 clamp(5px,.47vw,8px)/1 ui-monospace,Consolas,monospace!important;letter-spacing:.05em!important;white-space:nowrap}
.arcadePlayerActions button:hover{border-color:#f4c759!important;color:#fff!important;filter:brightness(1.15)}
.arcadePlayerCard .rivalLevel{width:100%!important;margin:5% 0 0!important;display:grid!important;grid-template-columns:auto repeat(3,1fr)!important;gap:2.5%!important;align-items:center!important;justify-content:stretch!important}
.arcadePlayerCard .rivalLevelLabel{font-size:clamp(5px,.44vw,8px)!important;color:#c7b77f!important}
.arcadePlayerCard .rivalLevel button{width:auto!important;min-width:0!important;margin:0!important;padding:9% 1%!important;border-radius:2px!important;font-size:clamp(4px,.39vw,7px)!important;letter-spacing:.03em!important}
.arcadePlayerCard #rankingConnection{margin:5% 0 0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(220,225,226,.52);font-size:clamp(4px,.38vw,7px)!important;letter-spacing:.02em!important}
.arcadeVersion{position:absolute;right:17.2%;bottom:3.2%;padding:4px 7px;border:1px solid rgba(255,255,255,.11);background:rgba(0,0,0,.48);color:rgba(235,238,239,.58);font:800 clamp(5px,.45vw,8px)/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;pointer-events:none}
/* Old bottom-centered title controls are no longer used. */
.arcadeTitleHud .versionBadge,.arcadeTitleHud .specStrip,.arcadeTitleHud .trainingHint{display:none!important}
@media(max-aspect-ratio:16/9){
/* Stage itself remains 16:9, so these only protect unusual embed sizing. */
.arcadeMenu .arcadeNav b{font-size:clamp(10px,1.45vw,22px)}
}
/* v3.3 NEWS STARTUP FLASH FIX:
Never paint the right-side guest guide / yellow recommendation text before HARUNA NEWS.
The guide is allowed only after guestEnterMode explicitly marks trial-entry-ready. */
#guestGuidePanel{display:none!important}
#guestGuidePanel[hidden]{display:none!important}
.trialAizBrand{display:none!important}
#start.guest-mode.trial-entry-ready #guestGuidePanel:not([hidden]){display:flex!important}
#start.guest-mode.trial-entry-ready .trialAizBrand{display:grid!important}
/* v1.8.53 GUEST FIRST-PLAY GUIDE: no title image, lightweight HTML/CSS/SVG only. */
/* TRIAL: BEGINNER is redundant in guest mode; keep the feature for logged-in play only. */
#start.guest-mode #beginnerBtn{display:none!important}
.arcadeExit{display:none!important}
#start.guest-mode{background-color:#030607!important;background-image:radial-gradient(circle at 72% 45%,rgba(35,157,190,.10),transparent 30%),radial-gradient(circle at 79% 78%,rgba(150,18,12,.10),transparent 33%),linear-gradient(135deg,#030506 0%,#05090b 54%,#020304 100%)!important}
#start.guest-mode .arcadeExit{display:block!important;border-left-color:#ff8d78!important}
#start.guest-mode .arcadeMenu .arcadeNav{height:12%!important;min-height:0!important;flex:0 0 12%!important}
.guestGuidePanel{display:none;position:absolute;left:42.5%;right:5.2%;top:11.5%;bottom:7.3%;box-sizing:border-box;padding:clamp(12px,1.35vw,22px);pointer-events:auto;border:1px solid rgba(78,220,247,.36);border-radius:12px;background:linear-gradient(180deg,rgba(5,17,22,.88),rgba(2,8,11,.92));box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);overflow:hidden;color:#dff8fd}
#start.guest-mode.trial-entry-ready .guestGuidePanel:not([hidden]){display:flex;flex-direction:column}
.guestGuideKicker{color:#65e2f7;font:900 clamp(6px,.62vw,10px)/1 ui-monospace,Consolas,monospace;letter-spacing:.12em}
.guestGuideTitle{margin-top:.55%;color:#fff;font:1000 clamp(19px,2.1vw,35px)/1 Impact,"Arial Black",sans-serif;font-style:italic;letter-spacing:.055em;text-shadow:0 0 18px rgba(83,222,248,.12)}
.guestGuideLead{margin-top:1.1%;padding:1.2% 1.5%;border-left:3px solid #55dbf4;background:rgba(60,194,222,.055);color:#b9d4da;font:800 clamp(7px,.62vw,10px)/1.55 "Yu Gothic UI",Arial,sans-serif}.guestGuideLead b{color:#fff}
.guestGuideControl{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;margin-top:1.4%;padding:1.2% 1.5%;border:1px solid rgba(78,220,247,.17);border-radius:8px;background:rgba(2,9,12,.44)}
.guestGuideControlHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.guestGuideControlHead strong{color:#fff;font:1000 clamp(10px,1vw,17px)/1 ui-monospace,Consolas,monospace;letter-spacing:.12em}.guestGuideControlHead span{color:#ffd05a;font:1000 clamp(6px,.55vw,9px)/1 ui-monospace,Consolas,monospace;letter-spacing:.09em}
.guestControllerMini{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.guestControllerMini svg{display:block;width:100%;height:100%;max-height:100%;color:#59dff7}.guestControllerMini .jarvisController .padBase{stroke:#5ddff8;stroke-width:2.1}.guestControllerMini .jarvisController .padInner,.guestControllerMini .jarvisController .touchPad,.guestControllerMini .jarvisController .stickBase,.guestControllerMini .jarvisController .dpadRing,.guestControllerMini .jarvisController .faceRing{opacity:.70}.guestControllerMini .jarvisController .stickInner,.guestControllerMini .jarvisController .faceBtn,.guestControllerMini .jarvisController .dpadShape,.guestControllerMini .jarvisController .smallBtn,.guestControllerMini .jarvisController .homeBtn{opacity:.90}.guestControllerMini .jarvisController .padLabel text{fill:#7fdff1;font:900 12px ui-monospace,Consolas,monospace;text-anchor:middle}.guestControllerMini .jarvisController .padCallout{fill:none;stroke:#56d8f1;stroke-width:1.35;opacity:.92}.guestControllerMini .jarvisController .padCalloutDot{fill:#56d8f1;stroke:none}.guestControllerMini .jarvisController .padCalloutText{fill:#ffc94a;font:900 13px ui-monospace,Consolas,monospace}.guestControllerMini .jarvisController .padCalloutSub{fill:#ffdb84;font:800 10px ui-monospace,Consolas,monospace}.guestControllerMini .controllerSvg .padTarget{fill:transparent;stroke:transparent}
.guestControllerMini.auto-mode .guestManualShiftHelp{display:none}
.guestPadQuick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.guestPadQuick span{min-width:0;padding:5px 6px;border:1px solid rgba(255,255,255,.08);border-radius:5px;background:rgba(255,255,255,.025);color:#8fb2bb;text-align:center;font:800 clamp(5px,.47vw,8px)/1.25 ui-monospace,Consolas,monospace}.guestPadQuick b{color:#fff}
.guestTransmission{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin-top:1.2%;padding:1% 1.3%;border:1px solid rgba(255,207,85,.18);border-radius:7px;background:rgba(255,199,60,.035)}.guestTransmission>strong{color:#ffd15b;font:1000 clamp(7px,.58vw,10px)/1 ui-monospace,Consolas,monospace;letter-spacing:.09em}.guestTransmission>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}.guestTransmission button{width:100%!important;min-height:32px!important;margin:0!important;padding:5px 8px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:5px!important;background:#08151a!important;color:#a7bec5!important;box-shadow:none!important;font:1000 clamp(7px,.62vw,10px)/1 ui-monospace,Consolas,monospace!important;letter-spacing:.06em!important}.guestTransmission button small{display:block;margin-top:2px;color:#83979e;font-size:.72em}.guestTransmission button.active{background:#54d9f1!important;color:#021318!important;border-color:#c2f7ff!important}.guestTransmission button.active small{color:#16424b}
.guestOtherControls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:1%;color:#8fb2bb;font:900 clamp(6px,.52vw,9px)/1 ui-monospace,Consolas,monospace;letter-spacing:.05em}.guestOtherControls b{color:#bfeef7}.guestOtherControls button{width:auto!important;min-height:30px!important;margin:0!important;padding:6px 11px!important;border:1px solid rgba(80,220,255,.34)!important;border-radius:5px!important;background:#0a2027!important;color:#c8f8ff!important;box-shadow:none!important;font:1000 clamp(6px,.52vw,9px)/1 ui-monospace,Consolas,monospace!important;letter-spacing:.06em!important}
.guestNoSave{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;margin-top:1%;padding:1% 1.2%;border:1px solid rgba(255,98,82,.20);border-radius:6px;background:rgba(255,66,48,.035)}.guestNoSave strong{color:#ff887c;font:1000 clamp(6px,.54vw,9px)/1 ui-monospace,Consolas,monospace;white-space:nowrap}.guestNoSave span{color:#9db2b8;font:800 clamp(5px,.48vw,8px)/1.35 "Yu Gothic UI",Arial,sans-serif}
@media(max-width:980px){.guestGuidePanel{left:40%;right:2.5%;top:9%;bottom:5%;padding:11px}.guestPadQuick{grid-template-columns:1fr}.guestPadQuick span:nth-child(3){display:none}.guestGuideLead{font-size:7px}.guestNoSave span{font-size:6px}}
@media (hover:none) and (pointer:coarse) and (orientation:portrait){#start.guest-mode .guestGuidePanel{display:none!important}#start.guest-mode .arcadeMenu .arcadeNav{height:auto!important;flex:0 0 auto!important}.arcadeExit{display:none!important}#start.guest-mode .arcadeExit{display:block!important}}
/* v1.3.21: locked showroom inspection, existing garage layout preserved. */
.garageCarName,.garageCarMeta,.garageCarSpec{display:block}
.garageCar.locked{opacity:1;filter:none;cursor:pointer}
.garageCar.locked:hover{transform:translateY(-1px);border-color:rgba(255,196,107,.65)}
.garageCar.locked .garageCarVisual img{filter:drop-shadow(0 10px 8px rgba(0,0,0,.65))}
.garageCar.inspected{border-color:#ffc46b;box-shadow:0 0 20px rgba(255,196,107,.12)}
.garageCar.locked .garageCarSpec{color:#d5b989}
.garageCar:focus-visible{outline:2px solid #ffc46b;outline-offset:2px}
/* v1.5.48 unified RESULT gate + Tsukuba lap split/delta */
#runResultOverlay{position:fixed;inset:0;z-index:100250;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.88);backdrop-filter:blur(4px)}
#runResultOverlay.show{display:flex}.runResultPanel{width:min(620px,94vw);box-sizing:border-box;padding:24px 22px 20px;border:1px solid rgba(255,213,94,.68);border-radius:14px;background:linear-gradient(180deg,rgba(11,18,20,.99),rgba(3,7,8,.99));box-shadow:0 28px 90px rgba(0,0,0,.88),0 0 42px rgba(255,202,50,.11);text-align:center}.runResultKicker{color:#f4b82b;font:1000 10px/1 ui-monospace,Consolas;letter-spacing:.18em}.runResultTitle{margin-top:7px;color:#fff;font:1000 clamp(24px,5vw,42px)/1.05 "Arial Black","Yu Gothic UI",sans-serif;letter-spacing:.05em}.runResultPrimaryLabel{margin-top:18px;color:#8ea2a7;font:900 10px/1 ui-monospace,Consolas;letter-spacing:.12em}.runResultPrimary{margin-top:5px;color:#ffe052;font:1000 clamp(36px,8vw,70px)/1 ui-monospace,Consolas;letter-spacing:.01em;text-shadow:0 0 18px rgba(255,214,70,.18)}.runResultLines{display:grid;gap:7px;margin:18px auto 0;max-width:500px}.runResultLine{display:flex;justify-content:space-between;gap:15px;padding:9px 11px;border-top:1px solid rgba(255,255,255,.08);font:900 11px/1.2 ui-monospace,Consolas;color:#9aa9ad}.runResultLine b{color:#eef7f9;text-align:right}.runResultLine.good b{color:#70d8ff}.runResultLine.bad b{color:#ff7770}.runResultOk{width:100%;margin:20px 0 0;padding:14px;border:1px solid #ffe08a;border-radius:8px;background:#f4b82b;color:#130d00;font:1000 15px/1 ui-monospace,Consolas;letter-spacing:.15em;cursor:pointer}.runResultOk:hover{filter:brightness(1.12)}
.lapFlash #lapFlashText{min-width:min(460px,84vw);box-sizing:border-box;text-align:center}.lapFlash .lapMain{display:block;font-size:clamp(27px,5.0vw,66px);line-height:1}.lapFlash .lapTime{display:block;margin-top:7px;color:#fff;font-size:clamp(19px,3.0vw,34px);line-height:1}.lapFlash .lapDelta{display:block;margin-top:7px;font-size:clamp(13px,2.1vw,22px);line-height:1;letter-spacing:.04em}.lapFlash .lapDelta.faster{color:#68cfff;text-shadow:0 0 14px rgba(70,175,255,.55)}.lapFlash .lapDelta.slower{color:#ff6f69;text-shadow:0 0 14px rgba(255,70,60,.48)}.lapFlash .lapDelta.base{color:#aab8bc;text-shadow:none}
/* V5.35 LOCALTEST: TSUKUBA lap flash — crisp 0.5s, linear fade over next 1.0s. */
#lapFlash.lapFlash { transition: transform .16s ease; }
#lapFlash.lapFlash.show { animation: tsukubaLapFlashV535 1500ms linear both; }
@keyframes tsukubaLapFlashV535 {
0%, 33.333333% { opacity: 1; }
100% { opacity: 0; }
}