html,body{background:#1a1a1a;height:100%;margin:0;padding:0;font-family:Segoe UI,system-ui,sans-serif;overflow:hidden}#app canvas{display:block}#intro{z-index:60;-webkit-user-select:none;user-select:none;background:#05040a;grid-template-rows:auto 1fr auto;justify-items:center;transition:opacity .85s,visibility .85s;display:grid;position:fixed;inset:0;overflow:hidden}#intro.intro-out{opacity:0;visibility:hidden;pointer-events:none}.intro-bg{object-fit:cover;object-position:50% 78%;opacity:.3;filter:blur(1.5px)brightness(.75);width:100%;height:100%;position:absolute;inset:0}.intro-grain{pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,#0000 1px 3px);position:absolute;inset:0}#intro:after{content:"";pointer-events:none;background:radial-gradient(120% 60% at 50% 112%,#7c5cff29,#0000 55%),radial-gradient(closest-side at 50% 46%,#0000 58%,#0009);position:absolute;inset:0}.intro-side{z-index:1;writing-mode:vertical-rl;color:#b9a7ff66;letter-spacing:10px;text-shadow:0 0 14px #8c6eff80;pointer-events:none;font-size:15px;font-weight:700;position:absolute;top:50%;transform:translateY(-50%)}.intro-side-l{left:clamp(8px,2vw,30px)}.intro-side-r{right:clamp(8px,2vw,30px)}.intro-head{z-index:2;text-align:center;padding-top:clamp(12px,3vh,34px);animation:.6s ease-out backwards introIn;position:relative}.intro-logo{filter:drop-shadow(0 0 26px #8c6eff59);width:min(58vw,600px);animation:.8s cubic-bezier(.2,.8,.3,1) backwards logoIn}.intro-logo img{width:100%;display:block}@keyframes logoIn{0%{opacity:0;transform:scale(1.06)}}@keyframes introIn{0%{opacity:0;transform:translateY(18px)}}.intro-center{z-index:2;align-self:center;place-items:center;width:100%;padding:0 clamp(12px,3vw,40px);display:grid;position:relative}.intro-stage{flex-direction:column;grid-area:1/1;align-items:center;gap:clamp(10px,2.2vh,24px);width:100%;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.3,1),visibility;display:flex}.intro-stage.off-left,.intro-stage.off-right{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.3,1),visibility 0s .4s}.intro-stage.off-left{transform:translate(-70px)skew(-5deg)}.intro-stage.off-right{transform:translate(70px)skew(5deg)}.stage-head{align-items:baseline;gap:clamp(8px,1.4vw,18px);animation:.6s ease-out 50ms backwards introIn;display:flex}.stage-num{color:#0000;-webkit-text-stroke:1.5px #fff6;font-family:Arial Black,Segoe UI,system-ui,sans-serif;font-size:clamp(22px,3vw,40px);font-style:italic;font-weight:900}.stage-head h2{letter-spacing:3px;color:#fff;text-shadow:.07em .07em #4a2bb8b3;margin:0;font-family:Arial Black,Segoe UI,system-ui,sans-serif;font-size:clamp(19px,2.6vw,32px);font-style:italic;font-weight:900}.stage-jp{color:#b9a7ff;letter-spacing:7px;text-shadow:0 0 12px #8c6eff8c;font-size:clamp(10px,1.2vw,14px);font-weight:700}.card-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.8vw,26px);width:min(96vw,1240px);display:grid}.card-row>:nth-child(2){animation-delay:.1s}.card-row>:nth-child(3){animation-delay:.2s}.car-card,.track-card{--accent:#fff;color:#fff;text-align:left;cursor:pointer;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));background:linear-gradient(165deg,#1a1324f0 0%,#09060ef7 70%);border:1px solid #ffffff21;flex-direction:column;min-width:0;padding:0;font-family:inherit;transition:transform .25s,border-color .25s,filter .3s;animation:.65s cubic-bezier(.2,.8,.3,1) backwards cardIn;display:flex;position:relative}@keyframes cardIn{0%{opacity:0;transform:translateY(30px)scale(.95)}}.car-card:before,.track-card:before{content:"";background:linear-gradient(135deg, transparent calc(50% - 1px), var(--accent) 50%);opacity:.55;pointer-events:none;z-index:2;width:34px;height:34px;transition:opacity .25s;position:absolute;top:0;right:0}.car-card:hover,.track-card:hover{border-color:var(--accent);filter:drop-shadow(0 16px 30px #0000008c) drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 35%, transparent));transform:translateY(-8px)}.car-card:hover:before,.track-card:hover:before{opacity:1}.car-card.selected,.track-card.selected{border-color:var(--accent);filter:drop-shadow(0 18px 34px #0009) drop-shadow(0 0 26px color-mix(in srgb, var(--accent) 55%, transparent));transform:translateY(-8px)scale(1.03)}.car-card.selected:after,.track-card.selected:after{content:"SELECTED";z-index:2;background:var(--accent);color:#0a0608;letter-spacing:2px;padding:3px 12px 3px 14px;font-size:11px;font-style:italic;font-weight:900;position:absolute;top:12px;left:-6px;transform:skew(-12deg);box-shadow:0 4px 14px #00000080}.card-num{z-index:1;color:#0000;-webkit-text-stroke:1px #ffffff47;pointer-events:none;font-family:Arial Black,Segoe UI,system-ui,sans-serif;font-size:30px;font-style:italic;font-weight:900;position:absolute;top:5px;left:10px}.car-view{background:radial-gradient(90% 95% at 50% 100%,#ffffff14,#0000 68%);border-bottom:1px solid #ffffff14;height:clamp(110px,23vh,240px);position:relative;overflow:hidden}.car-view canvas{width:100%;height:100%;transition:transform .3s;display:block}.car-card:hover .car-view canvas{transform:scale(1.06)}.car-view.loading:after{content:"LOADING";color:#ffffff59;letter-spacing:4px;place-items:center;font-size:11px;animation:1s ease-in-out infinite alternate loadBlink;display:grid;position:absolute;inset:0}@keyframes loadBlink{to{color:#ffffffa6}}.car-card.no-preview .car-view:after{content:"🏎";place-items:center;font-size:54px;display:grid;position:absolute;inset:0}.car-body{padding:12px 16px 16px}.car-name{letter-spacing:1px;font-size:clamp(15px,1.6vw,21px);font-style:italic;font-weight:900}.car-jp{color:var(--accent);letter-spacing:4px;margin-top:2px;font-size:clamp(10px,1vw,12.5px);font-weight:700}.car-tag{color:#ffffff80;letter-spacing:2px;text-transform:uppercase;margin-top:6px;font-size:clamp(9px,.95vw,12px)}.car-stats{flex-direction:column;gap:6px;margin-top:10px;display:flex}.stat-row{align-items:center;gap:10px;display:flex}.stat-label{color:#ffffff73;letter-spacing:1.5px;flex:0 0 74px;font-size:9.5px;font-weight:700}.stat-bar{background:#ffffff1f;flex:1;height:5px;overflow:hidden;transform:skew(-20deg)}.stat-bar i{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));width:0;height:100%;animation:.9s cubic-bezier(.2,.8,.3,1) forwards statFill;display:block}@keyframes statFill{to{width:var(--w)}}.track-map{background:radial-gradient(85% 90% at 50% 55%,#ffffff0d,#0000 70%);border-bottom:1px solid #ffffff14;height:clamp(84px,16vh,150px);position:relative;overflow:hidden}.track-map canvas{width:100%;height:100%;display:block}.track-body{padding:10px 16px 14px}.track-name{letter-spacing:1px;align-items:baseline;gap:10px;font-size:clamp(15px,1.6vw,20px);font-style:italic;font-weight:900;display:flex}.track-jp{color:var(--accent);letter-spacing:4px;font-size:clamp(10px,1vw,12.5px);font-weight:700}.track-meta{color:#ffffff80;letter-spacing:1.5px;margin-top:5px;font-size:clamp(9px,.95vw,11.5px)}.track-card.disabled{cursor:default;filter:grayscale(.7)brightness(.5)}.track-card.disabled:hover{filter:grayscale(.7)brightness(.5);border-color:#ffffff21;transform:none}.track-soon{z-index:3;color:#ffd9a8;letter-spacing:3px;text-shadow:0 0 10px #ffb45ecc;pointer-events:none;background:#0a0810bf;border:1.5px solid #ffb45e;padding:6px 18px;font-size:clamp(10px,1vw,13px);font-style:italic;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)skew(-8deg);box-shadow:0 0 14px #ffb45e59,inset 0 0 10px #ffb45e1f}.intro-foot{z-index:2;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px clamp(16px,3vw,40px);width:100%;padding:clamp(10px,2vh,18px) clamp(16px,4vw,52px) clamp(12px,2.5vh,22px);display:flex;position:relative}.intro-steps{align-items:center;gap:12px;display:flex}.intro-step{color:#ffffff61;letter-spacing:2.5px;font-size:12px;font-style:italic;font-weight:800;transition:color .3s,text-shadow .3s}.intro-step b{margin-right:6px;font-family:Arial Black,Segoe UI,system-ui,sans-serif;font-size:16px}.intro-step.is-active{color:#fff;text-shadow:0 0 14px #8c6eff8c}.intro-step.is-active b{color:#b9a7ff}.intro-step-line{background:linear-gradient(90deg,#8c6effcc,#ffffff26);width:46px;height:2px;transform:skew(-30deg)}.intro-actions{gap:14px;display:flex}.intro-btn{letter-spacing:2.5px;color:#c9f6ff;cursor:pointer;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);text-shadow:0 0 8px #41e0ffe6,0 0 22px #41e0ff73;background:#080c1499;border:1.5px solid #41e0ff;padding:clamp(10px,1.6vh,15px) clamp(26px,3vw,46px);font-family:Arial Black,Segoe UI,system-ui,sans-serif;font-size:clamp(15px,1.7vw,21px);font-style:italic;font-weight:900;transition:transform .2s,box-shadow .2s,filter .2s;animation:.6s ease-out .3s backwards introIn;transform:skew(-8deg);box-shadow:0 0 14px #41e0ff59,inset 0 0 12px #41e0ff24}.intro-btn:hover{filter:brightness(1.2);color:#fff;transform:skew(-8deg)translateY(-3px)scale(1.04);box-shadow:0 0 26px #41e0ffa6,inset 0 0 18px #41e0ff40}.intro-btn.ghost{color:#ffffffa6;text-shadow:none;box-shadow:none;border-color:#ffffff4d}.intro-btn.start{color:#ffd7e8;text-shadow:0 0 8px #ff2d78e6,0 0 22px #ff2d7880;border-color:#ff2d78;animation:.6s ease-out .3s backwards introIn,1.5s ease-in-out 1s infinite startPulse;box-shadow:0 0 16px #ff2d7866,inset 0 0 12px #ff2d7829}.intro-btn.start:hover{box-shadow:0 0 30px #ff2d78b3,inset 0 0 18px #ff2d7847}@keyframes startPulse{50%{filter:brightness(1.15);box-shadow:0 0 34px #ff2d78bf,inset 0 0 20px #ff2d784d}}.intro-btn.armed{filter:brightness(1.5)}.intro-hint{text-align:center;color:#ffffff57;letter-spacing:3px;flex-basis:100%;margin:0;font-size:11px}#introSoundHint{z-index:3;color:#cfc3ff;letter-spacing:2px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);opacity:0;pointer-events:none;background:#0f081ecc;border:1px solid #8c6eff8c;padding:8px 16px;font-size:12px;font-weight:700;transition:opacity .3s;position:absolute;top:clamp(10px,2vh,20px);right:clamp(12px,2vw,24px)}#introSoundHint.show{opacity:1;animation:1.4s ease-in-out infinite soundHintPulse}#disclaimer{z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#04030ab8;place-items:center;transition:opacity .45s,visibility .45s;display:grid;position:absolute;inset:0}#disclaimer.gone{opacity:0;visibility:hidden;pointer-events:none}.disclaimer-box{text-align:center;color:#d8d2f0;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));background:linear-gradient(165deg,#140e22f5,#08050ef7);border:1px solid #41e0ff59;max-width:min(88vw,560px);padding:clamp(22px,4vh,40px) clamp(28px,4vw,52px);animation:.5s ease-out backwards introIn;box-shadow:0 0 34px #41e0ff2e,0 24px 60px #0009}.disclaimer-jp{color:#b9a7ff;letter-spacing:10px;text-shadow:0 0 14px #8c6eff99;margin-bottom:14px;font-size:13px;font-weight:700}.disclaimer-box p{letter-spacing:.5px;margin:10px 0;font-size:clamp(12px,1.4vw,15px);line-height:1.75}.disclaimer-box .intro-btn{margin-top:20px}@keyframes soundHintPulse{50%{color:#fff;box-shadow:0 0 18px #8c6eff8c}}#loading{z-index:55;background:#0b0716;flex-direction:column;justify-content:center;align-items:center;gap:clamp(18px,4vh,34px);transition:opacity .5s,visibility .5s;display:flex;position:fixed;inset:0}#loading.loading-out{opacity:0;visibility:hidden;pointer-events:none}.loading-bg{object-fit:cover;object-position:50% 78%;opacity:.3;filter:blur(1.5px)brightness(.75);width:100%;height:100%;position:absolute;inset:0}.loading-logo{filter:drop-shadow(0 0 26px #8c6eff66);width:min(64vw,560px);animation:.7s cubic-bezier(.2,.8,.3,1) backwards logoIn;position:relative}.loading-logo img{width:100%;display:block}.loading-bar{background:#b9a7ff2e;width:min(46vw,380px);height:4px;position:relative;overflow:hidden;transform:skew(-20deg)}.loading-bar i{background:linear-gradient(90deg,#0000,#cfc3ff,#0000);width:40%;height:100%;animation:1.1s ease-in-out infinite loadSweep;position:absolute;top:0;left:-45%}@keyframes loadSweep{to{left:105%}}.loading-text{color:#cfc3ffbf;letter-spacing:6px;font-size:12px;font-style:italic;font-weight:800;animation:1s ease-in-out infinite alternate loadBlink}@media (width<=980px){.intro-side{display:none}}@media (height<=560px){.intro-hint,.stage-jp,.card-num{display:none}.intro-head{padding-top:6px}.intro-logo{width:min(40vw,340px)}.car-stats{display:none}.car-view{height:clamp(60px,16vh,130px)}.car-body,.track-body{padding:6px 10px 8px}}#hud{color:#fff;-webkit-user-select:none;user-select:none;pointer-events:none;text-shadow:0 2px 6px #000c;gap:34px;display:flex;position:fixed;top:16px;left:20px}.hud-caption{letter-spacing:3px;color:#ffffff8c;font-size:13px;font-weight:700}.hud-value{font-size:34px;font-style:italic;font-weight:900;line-height:1.1}.hud-value.pop{color:#ffe14d;animation:.45s ease-out scorePop}#score{text-align:right;color:#fff;-webkit-user-select:none;user-select:none;pointer-events:none;text-shadow:0 2px 6px #000c;position:fixed;top:16px;right:20px}#scoreCaption{letter-spacing:3px;color:#ffffff8c;font-size:13px;font-weight:700}#scoreValue{font-size:34px;font-style:italic;font-weight:900;line-height:1.1}#score.pop #scoreValue{color:#ffe14d;animation:.45s ease-out scorePop}@keyframes scorePop{0%{transform:scale(1.5)}to{transform:scale(1)}}#driftHud{text-align:center;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out;position:fixed;bottom:40px;left:50%;transform:translate(-50%)translateY(24px)scale(.9)}#driftHud.show{opacity:1;transform:translate(-50%)translateY(0)scale(1)}#driftLabel{letter-spacing:3px;text-shadow:0 3px #000,0 6px 20px #000000a6;font-size:46px;font-style:italic;font-weight:900}#driftLabel.pop{animation:.3s ease-out driftLabelPop}@keyframes driftLabelPop{0%{filter:brightness(2);transform:scale(1.6)}to{filter:brightness();transform:scale(1)}}#driftPending{color:#fff;text-shadow:0 2px #000,0 4px 14px #0009;font-size:30px;font-style:italic;font-weight:800}#driftMeta{justify-content:center;align-items:center;gap:10px;margin-top:4px;display:flex}#driftMult{text-shadow:0 2px #000;font-size:24px;font-style:italic;font-weight:900}#driftBarWrap{background:#ffffff2e;border-radius:4px;width:210px;height:7px;overflow:hidden}#driftBar{background:linear-gradient(90deg,#ffe14d,#ff5d7e);border-radius:4px;width:0%;height:100%}#driftBar.full{animation:.5s ease-in-out infinite alternate barPulse}@keyframes barPulse{0%{filter:brightness()}to{filter:brightness(1.8)}}#driftPopup{--dp-color:#fff;text-align:center;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none;position:fixed;bottom:170px;left:50%;transform:translate(-50%)}#driftPopup.pop{animation:1.15s cubic-bezier(.2,.8,.3,1) forwards driftPopupPop}@keyframes driftPopupPop{0%{opacity:0;transform:translate(-50%)translateY(30px)scale(.3)rotate(-5deg)}14%{opacity:1;transform:translate(-50%)translateY(-6px)scale(1.18)rotate(2deg)}26%{transform:translate(-50%)translateY(0)scale(1)rotate(0)}65%{opacity:1}to{opacity:0;transform:translate(-50%)translateY(-50px)scale(1.06)}}#driftPopup .dp-label{letter-spacing:3px;color:var(--dp-color);text-shadow:0 4px #000,0 8px 28px #000000b3;font-size:44px;font-style:italic;font-weight:900;display:block}#driftPopup .dp-pts{color:#fff;text-shadow:0 3px #000,0 6px 20px #000000b3;font-size:34px;font-style:italic;font-weight:800;display:block}#driftPopup.rainbow .dp-label{animation:.8s linear infinite hueShift}@keyframes hueShift{0%{filter:hue-rotate()saturate(2.5)}to{filter:hue-rotate(360deg)saturate(2.5)}}#center{color:#ffe14d;text-shadow:0 4px #000,0 8px 24px #0009;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:96px;font-weight:900;position:fixed;top:32%;left:50%;transform:translate(-50%,-50%)}#center.go{color:#5dff6e}#center.pop{animation:.35s ease-out pop}@keyframes pop{0%{opacity:.2;transform:translate(-50%,-50%)scale(1.8)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}#results{color:#fff;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0806d9;border:1px solid #ffffff26;border-radius:16px;padding:28px 56px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#results h1{color:#ffe14d;margin:0 0 16px;font-size:42px}#results ol{margin:0 0 16px;padding:0;font-size:24px;line-height:1.8;list-style:none}#results p{color:#bbb;margin:0;font-size:16px}#results p.drift-total{color:#ffe14d;margin-bottom:12px;font-size:18px;font-weight:700}#results .intro-btn{margin-top:6px;font-size:17px}#credits{color:#ffffff59;font-size:11px;text-decoration:none;position:fixed;bottom:8px;right:10px}#credits:hover{color:#ffffffb3}