.loading-screen{--load-accent:var(--course-accent);--load-sky:#385ca0;--load-floor:#8ee9ff;display:grid;grid-template-rows:auto 1fr auto;align-items:stretch;gap:20px;padding:26px 34px;overflow-y:auto;background:linear-gradient(90deg,#101e39 0%,#132843f5 34%,#17324e75 63%,#17324e18 100%);transition:opacity .25s ease;container-type:inline-size}
.loading-screen:focus{outline:none}
.loading-screen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 25%,color-mix(in srgb,var(--load-sky) 50%,transparent),transparent 68%);opacity:.6}
.loading-screen[data-phase="boot"],.loading-screen[data-phase="error"]{justify-content:stretch;background:radial-gradient(ellipse at 90% 10%,#374d7a,transparent 65%),#11233e}
.loading-screen[data-phase="course"]{background:linear-gradient(115deg,#11223c 5%,#193452 55%,var(--load-sky))}
.loading-head{display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative;z-index:1}
.loading-brand{font-family:'Barlow Condensed',Impact,sans-serif;font-size:25px;font-style:italic;font-weight:900;letter-spacing:-.3px;line-height:1}.loading-brand span{color:var(--load-floor)}
.loading-round{font-size:12px;font-weight:800;letter-spacing:1.3px;border:1px solid #ffffff35;border-radius:7px;padding:9px 12px;background:#10203b66;white-space:nowrap}
.loading-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:30px;min-width:0}
.loading-panel{width:100%;max-width:465px;position:relative;z-index:1;animation:loading-enter .45s both}
.loading-panel .overline{display:inline-flex;align-items:center;gap:9px;max-width:100%;font-size:12px;line-height:1.4;color:var(--load-accent);letter-spacing:1.4px}
.loading-panel .overline::before{content:"";width:18px;height:3px;flex-shrink:0;background:currentColor}
.loading-screen .loading-panel h2{font-size:clamp(44px,5.7vw,74px);line-height:.94;letter-spacing:-.7px;margin:14px 0 12px;max-width:460px;text-transform:uppercase;text-wrap:balance;text-shadow:0 4px 0 #0c1c35}
.loading-screen .loading-panel>p{font-size:15px;line-height:1.5;margin:0;max-width:390px;color:#d5e4f5}
.loading-screen .loading-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0;padding:14px 0;border-block:1px solid #ffffff26}
.loading-screen .loading-facts span{font-size:12px;letter-spacing:.75px;line-height:1.3;color:#c5d7ed}
.loading-screen .loading-facts b{font-size:32px;line-height:1;color:#fff;margin-bottom:6px}.loading-screen .loading-facts span:nth-child(2) b{color:var(--load-accent)}
.loading-screen .loading-tip{margin-top:16px;padding:0 0 0 12px;background:none;border-left:3px solid var(--load-accent);border-radius:0}
.loading-tip small{font-size:12px;letter-spacing:1.25px}.loading-screen .loading-tip p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#e6f0fc}
.loading-visual{align-self:stretch;position:relative;display:flex;align-items:center;justify-content:center;min-height:220px;min-width:0}
.loading-preview-frame{position:relative;width:100%;aspect-ratio:360/220;border:1px solid #ffffff66;border-radius:16px;box-shadow:0 14px 45px #07152a45;overflow:hidden;transform:rotate(-3deg);background:var(--load-sky);transition:opacity .55s ease,transform .7s ease}
.loading-preview-frame canvas{display:block;width:100%;height:100%;object-fit:cover;animation:preview-drift 6s ease-in-out infinite alternate}
.loading-preview-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0c1b391c,transparent 55%,#0c1b397d);pointer-events:none}
.loading-preview-label{position:absolute;top:15px;left:15px;font-size:12px;font-weight:800;letter-spacing:1.3px;border-radius:5px;padding:8px 10px;background:#0c1f3ccf;z-index:1}
.loading-screen .loading-course-tag{position:absolute;inset:auto 0 3px auto;max-width:100%;text-align:right;background:#122843e0;border-color:#ffffff5c;border-left:3px solid var(--load-accent);border-radius:8px;padding:12px 16px;transition:transform .5s ease;backdrop-filter:blur(8px)}
.loading-course-tag span{font-size:12px;letter-spacing:1.2px;color:#bcd3ec}.loading-course-tag b{font-size:25px;line-height:1.1;display:block;color:#fff}
.loading-screen[data-phase="ready"] .loading-preview-frame{opacity:0;transform:translateY(12px) rotate(0) scale(.97);pointer-events:none}
.loading-screen[data-phase="ready"] .loading-course-tag{transform:translateY(-12px)}
.loading-journey{display:flex;align-items:center;gap:10px;margin-top:25px;max-width:420px}
.loading-journey span{font-family:'Barlow Condensed',Impact,sans-serif;font-size:36px;font-weight:800;line-height:1.2;color:#7f9bc0;padding:8px 12px;border-bottom:3px solid #6884a138;transition:color .25s,border-color .25s}
.loading-journey span[data-current="true"]{color:var(--load-accent);border-color:var(--load-accent)}.loading-journey span[data-passed="true"]{color:#c2e8dd;border-color:#7fc7ac}
.loading-journey i{font-style:normal;color:#8aa2bd;font-size:14px}
.loading-screen[data-phase="boot"] .loading-journey span{animation:journey-light 2.4s ease infinite;animation-delay:calc(var(--stop)*.2s)}
.loading-footer{position:relative;z-index:1;padding:16px 20px;background:#0d1c35e8;border:1px solid #a8caff35;border-radius:13px;box-shadow:0 8px 25px #0d1a2a30;backdrop-filter:blur(12px)}
.loading-footer-top{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:10px}
.loading-steps{display:flex;align-items:center;gap:22px;padding:0;margin:0;list-style:none}
.loading-steps li{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#9eb3ce;white-space:nowrap;letter-spacing:.15px}
.loading-steps i{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid #819cbb80;border-radius:50%;font-size:11px;font-style:normal;font-variant-numeric:tabular-nums}
.loading-steps li[data-state="active"]{color:#fff}.loading-steps li[data-state="active"] i{border-color:var(--load-accent);box-shadow:0 0 0 3px #ffffff10;color:var(--load-accent)}
.loading-steps li[data-state="done"]{color:#c8eed7}.loading-steps li[data-state="done"] i{background:#d0f8d7;border-color:#d0f8d7;color:#163627}
.loading-footer #loadingPercent{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:26px;line-height:1;min-width:55px;text-align:right;font-variant-numeric:tabular-nums;color:var(--load-accent)}
.loading-progress{height:8px;background:#59749445;border-radius:8px;overflow:hidden}.loading-progress i{background:var(--load-accent);position:relative;transition:width .4s cubic-bezier(.16,1,.3,1)}
.loading-progress i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 14px,#ffffff3b 14px 28px);background-size:65px 100%;animation:load-stripes 1s linear infinite}
.loading-screen[data-phase="ready"] .loading-progress i::after{animation:none;opacity:.25}
.loading-footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;min-height:46px}
.loading-status{display:block;margin:0;font-size:14px;line-height:1.45;color:#f0f5ff}.loading-status small{display:block;color:#a8bfdc;font-size:12px;margin-top:3px}
.loading-screen .loading-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0;flex-shrink:0}.loading-screen .loading-actions .play{min-width:154px;min-height:44px;padding:11px 16px;font-size:14px;background:var(--load-accent);color:#11243b;box-shadow:0 4px 0 #07142780}.loading-actions .play span{font-size:16px}.loading-screen .loading-actions .secondary{min-height:44px;padding:10px 0;font-size:13px;color:#c6d9ef}
.loading-screen[data-phase="boot"] .loading-layout,.loading-screen[data-phase="error"] .loading-layout{grid-template-columns:1fr}.loading-screen[data-phase="boot"] .loading-panel{max-width:660px}.loading-screen[data-phase="boot"] .loading-panel h2{max-width:600px;font-size:clamp(56px,7.2vw,94px)}
.loading-screen[data-phase="error"] .loading-panel{max-width:620px}.loading-screen[data-phase="error"] .loading-panel h2{font-size:clamp(42px,5vw,64px)}.loading-screen[data-phase="error"] .loading-steps{opacity:.4}.loading-screen[data-phase="error"] .loading-progress i::after{animation:none}
.loading-screen[data-phase="boot"] .loading-visual,.loading-screen[data-phase="error"] .loading-visual{display:none}.loading-screen[data-phase="course"] .loading-journey,.loading-screen[data-phase="ready"] .loading-journey{display:none}
.arena[data-race-intro="true"] #game{animation:race-camera-reveal .55s ease-out both}
.center-message{font-size:116px;font-style:normal;text-shadow:0 5px 0 #183255;isolation:isolate;animation:count-pop-a .45s cubic-bezier(.2,.8,.2,1) both}
.center-message::before{content:"";position:absolute;left:50%;top:50%;width:142px;height:142px;border:3px solid #edfcffa6;outline:10px solid #142e4b26;border-radius:50%;background:#183557b3;transform:translate(-50%,-50%);z-index:-1;box-shadow:0 10px 38px #102c5340}
.center-message::after{content:"GET READY";position:absolute;top:calc(50% + 88px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:800;letter-spacing:3px;color:#fff;text-shadow:0 2px 8px #102747}
.center-message[data-beat="2"]{animation-name:count-pop-b}.center-message[data-beat="1"]{animation-name:count-pop-c}.round-intro{top:17%;font-size:14px;max-width:90%}
@keyframes loading-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes preview-drift{from{transform:scale(1.01) translateY(0)}to{transform:scale(1.08) translateY(-3px)}}
@keyframes load-stripes{to{background-position:65px 0}}
@keyframes journey-light{0%,75%,100%{color:#7f9bc0;border-color:#6884a138}25%{color:var(--load-accent);border-color:var(--load-accent)}}
@keyframes race-camera-reveal{from{filter:brightness(.65);transform:scale(1.015)}to{filter:brightness(1);transform:scale(1)}}
@keyframes count-pop-a{from{opacity:.2;scale:.8}to{opacity:1;scale:1}}
@keyframes count-pop-b{from{opacity:.2;scale:.8}to{opacity:1;scale:1}}
@keyframes count-pop-c{from{opacity:.2;scale:.8}to{opacity:1;scale:1}}
@media(max-width:1000px){.loading-screen{padding:24px;gap:18px}.loading-layout{gap:20px}.loading-screen .loading-panel h2{font-size:57px}.loading-screen .loading-facts{margin-top:15px;padding:12px 0}.loading-screen .loading-tip{margin-top:14px}.loading-steps{gap:14px}.loading-footer{padding:14px 16px}.loading-screen .loading-actions{gap:12px}}
@media(max-width:700px){.loading-screen{padding:20px;gap:17px}.loading-head{gap:10px}.loading-brand{font-size:24px}.loading-round{font-size:12px;letter-spacing:.7px;padding:8px 10px}.loading-layout{display:block;position:relative;min-height:0}.loading-panel{max-width:100%}.loading-screen .loading-panel h2{font-size:clamp(44px,10.8vw,66px);max-width:88%;margin:12px 0}.loading-screen .loading-panel>p{max-width:100%;font-size:14px;line-height:1.5}.loading-screen .loading-facts{margin:16px 0 0;padding:12px 0;gap:9px}.loading-screen .loading-facts b{font-size:31px}.loading-screen .loading-facts span{font-size:12px;letter-spacing:.4px}.loading-screen .loading-tip{margin-top:14px}.loading-screen .loading-tip p{font-size:14px;line-height:1.45}.loading-visual{position:absolute;inset:0 0 auto auto;width:55%;height:150px;min-height:0;z-index:0;opacity:.18;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000);border-radius:10px}.loading-preview-frame{transform:rotate(-6deg);height:100%;box-shadow:none;aspect-ratio:auto}.loading-preview-label,.loading-screen .loading-course-tag{display:none}.loading-panel{z-index:1}.loading-footer{padding:13px 14px}.loading-steps{gap:10px}.loading-steps li{gap:5px;font-size:12px}.loading-steps i{width:18px;height:18px;font-size:10px}.loading-footer-top{gap:10px}.loading-footer #loadingPercent{font-size:23px;min-width:40px}.loading-footer-bottom{align-items:stretch;flex-direction:column;gap:11px}.loading-status{font-size:13px}.loading-status small{font-size:12px;line-height:1.4}.loading-screen .loading-actions{justify-content:space-between;gap:10px}.loading-screen .loading-actions .play{min-width:148px;flex:1;max-width:210px}.loading-screen .loading-actions .secondary{font-size:12px}.loading-screen[data-phase="boot"] .loading-panel h2{font-size:clamp(54px,13vw,78px);max-width:95%}.loading-journey{gap:5px;margin-top:25px}.loading-journey span{padding:8px 10px;font-size:33px}.loading-journey i{font-size:12px}.loading-screen[data-phase="ready"]{background:linear-gradient(90deg,#10223def,#122944cd 64%,#17355365)}.loading-screen[data-phase="course"]{background:linear-gradient(120deg,#11223c 20%,#173251 70%,var(--load-sky))}}
@media(max-width:365px){.loading-screen{padding:16px;gap:14px}.loading-brand{font-size:22px}.loading-screen .loading-panel h2{font-size:42px}.loading-steps{gap:8px}.loading-steps li{gap:4px}.loading-steps i{display:none}.loading-journey span{padding:7px 8px}}
@media(max-width:1100px){.loading-screen[data-phase="course"] .loading-panel>p,.loading-screen[data-phase="ready"] .loading-panel>p{display:none}}
@media(max-width:700px){.loading-layout{min-height:min-content}}
@media(min-width:701px) and (max-width:1100px){.loading-screen{padding:20px;gap:14px}.loading-screen .loading-panel h2{font-size:52px}.loading-screen .loading-facts{margin-top:12px;padding:10px 0}.loading-screen .loading-tip{margin-top:12px}.loading-footer{padding:10px 15px}.loading-footer-bottom{margin-top:9px}}
@media(max-height:600px) and (min-width:700px){.arena:fullscreen .loading-screen{gap:12px;padding:17px 24px}.arena:fullscreen .loading-panel h2{font-size:48px;margin:9px 0}.arena:fullscreen .loading-facts{margin-top:12px;padding:10px 0}.arena:fullscreen .loading-tip{margin-top:10px}.arena:fullscreen .loading-footer{padding:10px 15px}.arena:fullscreen .loading-footer-bottom{margin-top:7px}.arena:fullscreen .loading-actions{margin-top:0}}
@media(prefers-reduced-motion:reduce){.loading-screen *,.loading-screen *::after,.center-message,.arena[data-race-intro="true"] #game{animation:none!important;transition:none!important}.loading-screen .loading-preview-frame{transform:none}}