@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Rajdhani:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap";:root{color:#ecfaff;font-synthesis:none;background:#071426;font-family:Rajdhani,Noto Sans JP,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;margin:0;overflow:hidden}body{touch-action:none;position:fixed;inset:0}button{font:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}.app{width:100%;height:100%;background:#061326;height:100dvh;position:relative;overflow:hidden}#race{touch-action:none;width:100%;height:100%;display:block}.vignette{pointer-events:none;background:linear-gradient(#010916d4,#0000 22% 60%,#000511b8),linear-gradient(90deg,#00091661,#0000 28% 75%,#00091661);position:absolute;inset:0}.hud{pointer-events:none;padding:calc(env(safe-area-inset-top,0px) + 16px) max(22px,env(safe-area-inset-right,0px)) 0 max(22px,env(safe-area-inset-left,0px));z-index:2;justify-content:space-between;gap:12px;display:flex;position:absolute;top:0;left:0;right:0}.brand{letter-spacing:.11em;text-shadow:0 2px 14px #000;align-items:center;gap:8px;font:800 19px Barlow Condensed,sans-serif;display:flex}.brand b{color:#53dcff}.brand-mark{color:#aaf3ff;letter-spacing:-.1em;border:1px solid #53deff;border-radius:5px;place-items:center;width:30px;height:30px;font-size:21px;display:grid;position:relative;box-shadow:inset 0 0 16px #00bfff54,0 0 17px #00bfff5c}.brand-mark span{color:#fd639a;font-size:15px;position:absolute;top:-4px;right:-3px}.pos-line{align-items:center;gap:9px;margin-top:12px;display:flex}.position{letter-spacing:-.045em;text-shadow:0 5px 25px #001225;font:900 clamp(68px,9.5vw,112px)/.9 Barlow Condensed,sans-serif}.ordinal{letter-spacing:0;vertical-align:top;margin-top:7px;margin-left:1px;font-size:.28em;display:inline-block}.field-label{color:#9eaec3;letter-spacing:.14em;font:700 12px/1.2 Rajdhani,sans-serif}.lap-line{letter-spacing:.07em;align-items:center;gap:10px;font:700 18px Rajdhani,sans-serif;display:flex}.lap-line span{color:#8daac1;font-size:11px}.lap-line i{opacity:.5;background:#4ecffa;width:2px;height:15px;display:block}.hud-right{width:174px;min-width:125px;margin-right:46px;padding-top:6px}.standings-label{letter-spacing:.25em;color:#8fa5ba;text-align:right;margin-bottom:5px;font:800 11px Rajdhani,sans-serif}.standings{flex-direction:column;gap:3px;display:flex}.standing{letter-spacing:.08em;background:#0311266b;border-right:2px solid #0000;align-items:center;gap:7px;padding:2px 8px 2px 5px;font:700 12px Rajdhani,sans-serif;display:flex}.standing.you{color:#fff;background:#2eb2e42e;border-right-color:#42d8f8}.standing .s-rank{color:#b3d6ee;min-width:13px;font-size:13px}.standing .s-name{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.standing .s-swatch{width:11px;height:4px;box-shadow:0 0 8px}.standing .s-gap{color:#86a2b6;font-size:11px}.race-center-top{z-index:3;pointer-events:none;white-space:nowrap;text-align:center;letter-spacing:.07em;color:#e4faff;text-shadow:0 5px 30px #061528,0 0 22px #01b9ff;font:900 clamp(27px,5vw,62px) Barlow Condensed,sans-serif;position:absolute;top:24%;left:50%;transform:translate(-50%,-50%)}.race-center-top #race-announcement:empty{display:none}.speed-zone{left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:2;text-shadow:0 2px 12px #000;pointer-events:none;align-items:end;gap:22px;display:flex;position:absolute;transform:translate(-50%)}.speed{white-space:nowrap;align-items:baseline;gap:6px;display:flex}.speed strong{letter-spacing:-.035em;font:900 clamp(55px,8vw,88px)/.82 Barlow Condensed,sans-serif}.speed span{color:#a4c0d4;letter-spacing:.12em;font:700 12px Rajdhani,sans-serif}.magnet-readout{border-left:1px solid #6dd8ff8c;flex-direction:column;gap:1px;min-width:120px;padding-left:15px;display:flex}.magnet-readout strong{letter-spacing:.05em;white-space:nowrap;font:800 23px Barlow Condensed,sans-serif}.mini-label,.next-gate{letter-spacing:.1em;color:#a0bfce;font:700 11px Rajdhani,sans-serif}.next-gate{color:#89deed;white-space:nowrap}.heat{align-self:center;width:116px}.meter-head{color:#accadd;letter-spacing:.04em;justify-content:space-between;gap:6px;font:700 11px Rajdhani,sans-serif;display:flex}.heat-track{background:#23354e;height:5px;margin-top:6px;overflow:hidden;transform:skew(-12deg)}.heat-track>div{background:linear-gradient(90deg,#36d9ff,#ffbe5b,#ff5c89);width:0;height:100%;transition:width .1s linear;box-shadow:0 0 7px #fd4c82}.controls{inset:auto max(22px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));z-index:4;pointer-events:none;justify-content:space-between;align-items:end;gap:20px;display:flex;position:absolute}.steer-group,.action-group{pointer-events:auto;align-items:end;gap:10px;display:flex}.control{color:#e2f8ff;background:linear-gradient(170deg,#1d3852e0,#051429e3);border:1px solid #78b8dc94;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:70px;height:70px;transition:transform 80ms,border-color 80ms,background 80ms;display:flex;box-shadow:inset 0 1px #ffffff26,0 6px 25px #00000052}.control:active,.control.held{background:linear-gradient(170deg,#2785b1f2,#063152eb);border-color:#7ae7ff;transform:scale(.94)}.steer{width:76px;font:700 32px Rajdhani,sans-serif}.pole{min-width:88px}.pole b{color:#42dfff;font:900 32px/.96 Barlow Condensed,sans-serif}.pole.s b{color:#ff6399}.field{background:linear-gradient(135deg,#216791eb,#092a47eb);border-color:#77e6f3;min-width:120px}.field b{letter-spacing:.08em;font:900 25px/1 Barlow Condensed,sans-serif}.field.held{box-shadow:0 0 23px #2ecbfc7a,inset 0 0 15px #2ac9fe63}.small{letter-spacing:.12em;color:#9ac4dd;font:700 9px Rajdhani,sans-serif}.keyboard-tip{left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));letter-spacing:.17em;color:#7597ad;z-index:3;pointer-events:none;white-space:nowrap;font:700 10px Rajdhani,sans-serif;position:absolute;transform:translate(-50%)}.pause{right:max(20px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 19px);color:#bddbef;z-index:5;background:#0b234094;border:1px solid #4b759a;border-radius:5px;width:30px;height:30px;font:700 16px Rajdhani,sans-serif;position:absolute}.overlay{-webkit-backdrop-filter:blur(10px);z-index:20;padding:calc(env(safe-area-inset-top,0px) + 18px) 15px calc(env(safe-area-inset-bottom,0px) + 18px);background:#010a17c7;place-items:center;display:grid;position:absolute;inset:0;overflow:auto}.overlay.hidden{display:none}.panel{background:linear-gradient(155deg,#112844fa,#051226fa);border:1px solid #60afd773;border-top:3px solid #5ddfff;width:min(520px,100%);max-height:100%;padding:clamp(21px,4.5vh,34px) clamp(20px,4vw,38px);overflow:auto;box-shadow:0 20px 100px #000a,0 0 60px #054d8944}.kicker{letter-spacing:.24em;color:#65dfff;font:800 12px Rajdhani,sans-serif}.live-dot{background:#ff527c;border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block;box-shadow:0 0 8px #fa4d7c}.intro-panel h1{letter-spacing:-.035em;white-space:nowrap;color:#fff;margin:16px 0 9px;font:900 clamp(55px,11vw,91px)/.89 Barlow Condensed,sans-serif}.intro-panel h1 em{color:#5edfff;font-style:normal}.tagline{letter-spacing:.09em;color:#c9deec;margin:0 0 25px;font:600 15px Noto Sans JP,sans-serif}.intro-icons{justify-content:space-between;gap:10px;margin-bottom:18px;display:flex}.intro-icons>div{border-top:1px solid #2b5778;flex-direction:column;flex:1;align-items:center;gap:4px;min-width:0;padding-top:14px;display:flex}.icon-circle{color:#8deaff;background:#0d344d;border:1px solid #7cdcf9;border-radius:50%;place-items:center;width:48px;height:48px;font:800 21px Rajdhani,sans-serif;display:grid}.icon-circle.n{color:#d0c3ff;border-color:#c697e5;font-size:16px}.icon-circle.hot{color:#ffdca6;border-color:#f6b05f;font-size:30px}.intro-icons b{letter-spacing:.12em;font:800 13px Rajdhani,sans-serif}.intro-icons small{color:#9fb4c8;text-align:center;font:500 10px Noto Sans JP,sans-serif}.rules{border-left:3px solid #f85e94;flex-direction:column;gap:5px;margin:17px 0 25px;padding:3px 12px;display:flex}.rules b{letter-spacing:.14em;font:800 16px Rajdhani,sans-serif}.rules span{color:#a8bfd1;font:500 12px/1.6 Noto Sans JP,sans-serif}.primary{color:#072037;letter-spacing:.14em;clip-path:polygon(0 0,100% 0,100% 75%,97% 100%,0 100%);background:#63e1ff;border:0;justify-content:space-between;align-items:center;width:100%;height:58px;padding:0 20px;font:900 22px Barlow Condensed,sans-serif;transition:filter .12s,transform .12s;display:flex}.primary:active{filter:brightness(.86);transform:scale(.98)}.primary span{font-size:29px}.subline{text-align:center;color:#8ba6bc;margin-top:14px;font:500 11px Noto Sans JP,sans-serif}.result-heading{align-items:center;gap:22px;margin:14px 0;display:flex}.result-heading>strong{color:#fff;font:900 94px/.9 Barlow Condensed,sans-serif}.result-heading>strong span{vertical-align:top;margin-top:8px;font-size:30px;display:inline-block}.result-heading>div{flex-direction:column;gap:7px;display:flex}.result-heading small{color:#78cde5;letter-spacing:.14em;font:800 11px Rajdhani,sans-serif}.result-heading b{letter-spacing:.07em;font:800 29px Barlow Condensed,sans-serif}.result-times{border-block:1px solid #295274;gap:20px;padding:13px 0;display:flex}.result-times>div{flex-direction:column;flex:1;gap:5px;display:flex}.result-times span{letter-spacing:.1em;color:#8baec2;font:700 11px Rajdhani,sans-serif}.result-times b{font:800 29px Barlow Condensed,sans-serif}.result-list{flex-direction:column;gap:4px;margin:14px 0;display:flex}.result-row{letter-spacing:.07em;background:#0d2944;align-items:center;gap:9px;padding:4px 8px;font:700 14px Rajdhani,sans-serif;display:flex}.result-row.you{background:#164a65}.result-row .rank{width:18px}.result-row .name{flex:1}.result-row .swatch{width:12px;height:5px}.result-row .tm{color:#a5c9dd}.small-panel{max-width:360px}.small-panel h2{font:900 38px Barlow Condensed,sans-serif}.secondary{color:#c4e8fa;background:0 0;border:1px solid #52748f;width:100%;height:44px;margin-top:10px;font:700 16px Rajdhani,sans-serif}@media (max-width:760px){.hud{padding-inline:14px}.brand{font-size:15px}.pos-line{margin-top:3px}.position{font-size:67px}.hud-right{width:125px;margin-right:31px}.standing{padding:1px 3px;font-size:10px}.standings-label{font-size:10px}.lap-line{font-size:15px}.speed-zone{bottom:calc(105px + env(safe-area-inset-bottom,0px));gap:11px}.speed strong{font-size:58px}.speed span{font-size:10px}.magnet-readout{min-width:95px;padding-left:9px}.magnet-readout strong{font-size:19px}.heat{width:86px}.controls{inset-inline:12px;bottom:calc(24px + env(safe-area-inset-bottom,0px))}.steer-group,.action-group{gap:7px}.control{min-width:62px;height:64px}.steer{width:64px}.pole{min-width:69px}.field{min-width:84px}.field b{font-size:21px}.small{font-size:8px}.keyboard-tip{display:none}}@media (max-width:460px){.hud-right{width:112px;margin-right:25px}.brand{letter-spacing:.05em}.speed-zone{left:50%;bottom:calc(114px + env(safe-area-inset-bottom,0px));gap:9px}.speed strong{font-size:48px}.magnet-readout strong{font-size:16px}.heat{width:68px}.heat .meter-head{font-size:9px}.control{min-width:55px;height:60px}.steer{width:56px}.pole{min-width:61px}.field{min-width:77px}.field b{font-size:18px}.intro-panel h1{font-size:clamp(54px,14vw,68px)}.intro-icons{gap:4px}}@media (max-height:500px){.hud{padding-top:8px}.brand{font-size:15px}.pos-line{margin-top:2px}.position{font-size:64px}.standings{gap:1px}.standing{padding:0 4px}.speed-zone{bottom:calc(74px + env(safe-area-inset-bottom,0px));gap:14px}.speed strong{font-size:52px}.controls{bottom:calc(9px + env(safe-area-inset-bottom,0px))}.control{min-width:58px;height:53px}.steer{width:60px}.pause{top:8px}.overlay{padding:10px}.panel{padding:12px 25px}.intro-panel h1{margin:5px 0;font-size:53px}.tagline{margin-bottom:10px}.intro-icons{margin-bottom:6px}.intro-icons>div{padding-top:5px}.icon-circle{width:36px;height:36px}.rules{margin:8px 0}.primary{height:44px}.subline{margin-top:5px}.result-heading>strong{font-size:64px}}.speed-zone{left:max(22px,env(safe-area-inset-left,0px));bottom:calc(109px + env(safe-area-inset-bottom,0px));transform:none}@media (max-width:760px){.speed-zone{left:max(14px,env(safe-area-inset-left,0px));bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:none}}@media (max-width:460px){.speed-zone{left:max(12px,env(safe-area-inset-left,0px));bottom:calc(117px + env(safe-area-inset-bottom,0px));transform:none}}@media (max-height:500px){.speed-zone{left:max(20px,env(safe-area-inset-left,0px));bottom:calc(74px + env(safe-area-inset-bottom,0px));transform:none}.race-center-top{font-size:clamp(24px,3.4vw,34px);top:21%}}.position{letter-spacing:-.025em;font-size:clamp(56px,8vw,86px)}.ordinal{margin-top:10px;font-size:.25em}.speed-zone{bottom:calc(119px + env(safe-area-inset-bottom,0px));align-items:center;gap:16px}.speed strong{font-size:clamp(44px,6.6vw,68px)}.speed{min-width:118px}.energy-meters{flex-direction:column;gap:8px;width:150px;min-width:132px;display:flex}.charge .meter-head{color:#bdeaff}.charge .meter-head strong{color:#fff5a6;white-space:nowrap;font-size:12px}.charge-track{background:#132d47;border:1px solid #32648a;border-radius:3px;height:8px;margin-top:5px;overflow:hidden}.charge-track>div{background:linear-gradient(90deg,#52dfff,#f9ffaf);width:0;height:100%;transition:width 90ms linear;box-shadow:0 0 9px #68edff}.heat{width:100%}.charged .charge-track{border-color:#f1f8c4;box-shadow:0 0 17px #78e9ff}.charged .field{color:#072139;background:linear-gradient(145deg,#ebffb1,#49dfff);border-color:#fcffb1;box-shadow:0 0 24px #8df6ff}.charged .field .small{color:#254a66}.race-tip{z-index:3;color:#e7faff;text-align:center;pointer-events:none;opacity:0;background:#06192ec2;border:1px solid #3a8fac;border-radius:5px;max-width:92vw;padding:8px 16px;font:700 12px/1.6 Noto Sans JP,sans-serif;transition:opacity .25s;position:absolute;top:31%;left:50%;transform:translate(-50%);box-shadow:0 0 18px #045f8b52}.race-tip.visible{opacity:1}.burst .vignette:after{content:"";mix-blend-mode:screen;background:radial-gradient(at 50% 53%,#0000 40%,#4cdcff3d 82%,#c3ffff66);animation:.24s ease-out burst-pulse;position:absolute;inset:0}@keyframes burst-pulse{0%{opacity:1}to{opacity:0}}@media (max-width:760px){.speed-zone{bottom:calc(111px + env(safe-area-inset-bottom,0px));gap:9px}.speed{min-width:90px}.speed strong{font-size:51px}.energy-meters{gap:5px;width:102px;min-width:96px}.magnet-readout{min-width:90px}.position{font-size:59px}.race-tip{padding:6px 10px;font-size:11px;top:26%}}@media (max-width:460px){.speed-zone{bottom:calc(112px + env(safe-area-inset-bottom,0px));left:12px}.speed{min-width:87px}.speed strong{font-size:45px}.energy-meters{width:88px;min-width:86px}.meter-head{font-size:9px!important}.charge .meter-head strong{font-size:10px}.position{font-size:56px}}@media (max-height:500px){.speed-zone{bottom:calc(69px + env(safe-area-inset-bottom,0px))}.energy-meters{width:112px}.race-tip{top:23%}}.race-center-top{white-space:normal;max-width:92%;font-size:clamp(18px,3.15vw,35px);line-height:1.15;top:20%}.race-tip{top:28%}@media (max-width:760px){.race-center-top{font-size:clamp(19px,3.6vw,27px);top:23%}.race-tip{top:29%}}@media (max-height:500px){.race-center-top{font-size:clamp(19px,3.3vw,29px);top:24%}.race-tip{top:32%}}.magnet-only-controls{bottom:calc(22px + env(safe-area-inset-bottom,0px));align-items:end}.magnet-button{border-radius:13px;gap:1px;min-width:142px;height:90px}.magnet-button b{font:900 37px/.98 Barlow Condensed,sans-serif}.magnet-button .small{letter-spacing:.13em;font-size:10px}.magnet-button.north{background:linear-gradient(150deg,#16617f,#082640);border:2px solid #52dcff;box-shadow:inset 0 1px #c5faff48,0 4px 23px #05142b}.magnet-button.south{background:linear-gradient(150deg,#6d214e,#25102b);border:2px solid #ff71a6;box-shadow:inset 0 1px #ffc5df48,0 4px 23px #05142b}.magnet-button.north b{color:#a4f1ff}.magnet-button.south b{color:#ffaad1}.magnet-button.held{filter:brightness(1.3);transform:scale(.96)}.magnet-button.charged-control{border-color:#fff4b0;box-shadow:0 0 32px #d2f8ffb8,inset 0 0 25px #f8ffd447}.magnet-button:disabled{filter:saturate(.2);opacity:.5}.keyboard-tip{bottom:calc(13px + env(safe-area-inset-bottom,0px))}@media (max-width:760px){.magnet-button{min-width:118px;height:77px}.magnet-button b{font-size:35px}.magnet-button .small{font-size:9px}.magnet-only-controls{bottom:calc(18px + env(safe-area-inset-bottom,0px))}}@media (max-width:460px){.magnet-button{min-width:111px;height:75px}.magnet-button b{font-size:34px}.magnet-button .small{font-size:8px}.magnet-only-controls{inset-inline:15px;bottom:calc(19px + env(safe-area-inset-bottom,0px))}}@media (max-height:500px){.magnet-button{min-width:108px;height:59px}.magnet-button b{font-size:27px}.magnet-button .small{font-size:8px}.magnet-only-controls{bottom:calc(8px + env(safe-area-inset-bottom,0px))}}.intro-icons .icon-circle.n{color:#b5f3ff;background:#10364b;border-color:#51ddff;font-size:24px}.intro-icons .icon-circle.hot{color:#ffb3d4;background:#40132d;border-color:#ff70a5;font-size:24px}
