@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/bebas-neue-400-latin.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/barlow-sc-600-latin.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/barlow-sc-800-latin.woff2") format("woff2")}
html.mode-loading #title{visibility:hidden!important}#modeLoading[hidden]{display:none!important}
/* V996 — one loading screen per mode: the mode's art on a slow push-in, its colours and emblem, rotating tips, a bar that eases
   toward the finish and completes on the first drawn frame, then a fade into the game. */
#modeLoading{--ml-accent:#23d5c3;--ml-accent2:#ff2e88;--ml-bg:#0c0a14;--ml-tint:#0a0710;position:fixed;inset:0;z-index:1000;overflow:hidden;background:var(--ml-bg);color:#fbf4e8;display:grid;align-items:end;padding:max(28px,env(safe-area-inset-top)) max(clamp(22px,6vw,88px),env(safe-area-inset-right)) max(clamp(26px,7vh,80px),env(safe-area-inset-bottom)) max(clamp(22px,6vw,88px),env(safe-area-inset-left));box-sizing:border-box;font-family:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;transition:opacity .42s cubic-bezier(.2,.9,.25,1),transform .42s cubic-bezier(.2,.9,.25,1)}
#modeLoading[data-mode=story]{--ml-accent:#f05cff;--ml-accent2:#ffd24a;--ml-bg:#12061a;--ml-tint:#12061a}
#modeLoading[data-mode=zombies]{--ml-accent:#b8f35a;--ml-accent2:#3fe0b0;--ml-bg:#04130e;--ml-tint:#04130e}
#modeLoading[data-mode=battle]{--ml-accent:#ff8a2a;--ml-accent2:#ffcf4a;--ml-bg:#1c0c06;--ml-tint:#1c0c06}
#modeLoading[data-mode=tdm]{--ml-accent:#4fb4ff;--ml-accent2:#ff7a2a;--ml-bg:#060c1a;--ml-tint:#060c1a}
#modeLoading[data-mode=hardzone]{--ml-accent:#ffd24a;--ml-accent2:#7dff9b;--ml-bg:#130f04;--ml-tint:#130f04}
#modeLoading.ml-out{opacity:0;transform:scale(1.015);pointer-events:none}
.ml-art,.ml-haze,.ml-grain{position:absolute;inset:0;pointer-events:none}
#ml-scene,#ml-next{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;opacity:.9;transform-origin:62% 45%;animation:ml-push 18s cubic-bezier(.2,.6,.3,1) forwards}
.ml-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ml-tint) 0%,color-mix(in srgb,var(--ml-tint) 55%,transparent) 48%,transparent 80%),linear-gradient(0deg,var(--ml-tint) 4%,transparent 55%)}
@supports not (background:color-mix(in srgb,red,blue)){.ml-art:after{background:linear-gradient(90deg,var(--ml-tint) 0%,rgba(0,0,0,.45) 50%,transparent 80%),linear-gradient(0deg,var(--ml-tint) 4%,transparent 55%)}}
.ml-moon,.ml-mountain,.ml-city{display:none}
.ml-haze{background:radial-gradient(ellipse at 78% 38%,color-mix(in srgb,var(--ml-accent) 16%,transparent),transparent 55%)}
.ml-grain{opacity:.07;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.ml-ring{position:absolute;width:80vw;height:22vw;right:-24vw;bottom:8vh;border:3px solid var(--ml-accent);border-radius:50%;box-shadow:0 -18px 90px #e9711355,inset 0 4px 50px #ffac2f55;opacity:0}
[data-mode=battle] .ml-ring{opacity:.6;animation:ml-breathe 4s ease-in-out infinite}
.ml-corner{position:absolute;width:26px;height:26px;border:2px solid var(--ml-accent);opacity:.7;pointer-events:none}
.ml-corner.tl{left:max(16px,env(safe-area-inset-left));top:max(16px,env(safe-area-inset-top));border-right:0;border-bottom:0}
.ml-corner.tr{right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));border-left:0;border-bottom:0}
.ml-corner.bl{left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));border-right:0;border-top:0}
.ml-corner.br{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));border-left:0;border-top:0}
.ml-content{position:relative;z-index:1;max-width:820px;animation:ml-in .7s cubic-bezier(.2,.9,.25,1) both}
.ml-brand{display:block;font-size:10px;font-weight:800;letter-spacing:.3em;color:rgba(240,232,220,.7)}
.ml-kicker{display:flex;align-items:center;gap:12px;margin:clamp(22px,6vh,56px) 0 10px}
.ml-emblem{flex:none;width:34px;height:34px;fill:var(--ml-accent);filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ml-accent) 60%,transparent));animation:ml-emblem 3.2s ease-in-out infinite}
#ml-mode{margin:0;color:var(--ml-accent);letter-spacing:.32em;font-size:13px;font-weight:800}
#ml-title{margin:0;max-width:880px;font:400 clamp(52px,9.5vw,124px)/.9 "Bebas Neue",Impact,"Arial Narrow",sans-serif;letter-spacing:.03em;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.55),0 0 60px color-mix(in srgb,var(--ml-accent) 22%,transparent);animation:ml-title .9s cubic-bezier(.2,.9,.25,1) .08s both}
#ml-hint{margin:14px 0 22px;font-size:17px;font-weight:600;line-height:1.4;color:rgba(232,236,228,.84)}
.ml-tip{display:flex;align-items:flex-start;gap:12px;max-width:560px;min-height:44px;margin:0 0 20px;padding:10px 14px;border-left:3px solid var(--ml-accent);border-radius:0 10px 10px 0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.18))}
.ml-tip b{flex:none;margin-top:2px;padding:3px 7px 2px;border-radius:4px;background:var(--ml-accent);color:#0b0710;font-size:10px;font-weight:800;letter-spacing:.2em}
#ml-tip{font-size:14.5px;font-weight:600;line-height:1.4;color:#f1ece4;transition:opacity .26s,transform .26s}
#ml-tip.out{opacity:0;transform:translateY(-4px)}#ml-tip.in{opacity:1;transform:none}
.ml-progress{position:relative;height:6px;max-width:460px;overflow:hidden;border-radius:1px;background:rgba(255,255,255,.12);transform:skewX(-18deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ml-progress i{position:absolute;inset:0;display:block;background:linear-gradient(90deg,var(--ml-accent),var(--ml-accent2));transform-origin:0 50%;transform:scaleX(.04);animation:ml-fill 22s cubic-bezier(.12,.72,.2,1) forwards}
.ml-progress i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:ml-shine 1.6s ease-in-out infinite}
#modeLoading.ml-done .ml-progress i{animation:none;transform:scaleX(1);transition:transform .2s ease-out}
.ml-foot{display:flex;align-items:center;gap:10px;margin-top:10px}
#ml-status{margin:0;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,236,222,.86)}
#modeLoading.ml-done #ml-status{color:var(--ml-accent)}
.ml-dots{display:inline-flex;gap:4px}.ml-dots i{width:5px;height:5px;border-radius:50%;background:var(--ml-accent);animation:ml-dot 1.1s ease-in-out infinite}.ml-dots i:nth-child(2){animation-delay:.15s}.ml-dots i:nth-child(3){animation-delay:.3s}
#modeLoading.ml-done .ml-dots{display:none}
#ml-back{margin-top:14px;min-height:44px;padding:12px 20px;border:1px solid var(--ml-accent);border-radius:10px;background:rgba(0,0,0,.5);color:#f4f7ea;font:800 12px/1 "Barlow Semi Condensed",system-ui,sans-serif;letter-spacing:.2em;cursor:pointer}
@keyframes ml-push{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
@keyframes ml-fill{0%{transform:scaleX(.04)}30%{transform:scaleX(.46)}70%{transform:scaleX(.8)}100%{transform:scaleX(.93)}}
@keyframes ml-shine{to{transform:translateX(100%)}}
@keyframes ml-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ml-title{from{opacity:0;transform:translateY(24px);letter-spacing:.12em}to{opacity:1;transform:none;letter-spacing:.03em}}
@keyframes ml-emblem{50%{transform:scale(1.08) rotate(-4deg)}}
@keyframes ml-dot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes ml-breathe{50%{opacity:.3;transform:scale(.96)}}
@media(prefers-reduced-motion:reduce){#modeLoading *,#modeLoading{animation:none!important;transition:none!important}.ml-progress i{transform:scaleX(.65)}}
@media(max-height:560px){.ml-kicker{margin-top:14px}#ml-title{font-size:clamp(40px,8vw,72px)}#ml-hint{margin:8px 0 12px;font-size:14px}.ml-tip{margin-bottom:12px;padding:7px 12px}.ml-brand{font-size:9px}}
@media(max-width:480px){#ml-title{font-size:clamp(46px,14vw,64px)}.ml-tip{font-size:13px}#ml-hint{font-size:15px}.ml-corner{display:none}}

#ml-next{opacity:0;transition:opacity 1.1s ease}#modeLoading.ml-second #ml-next{opacity:.9}.ml-grain{display:none}

/* Keep the subject above phone copy while preserving the full cinematic frame on wide displays. */
#ml-scene,#ml-next{object-position:var(--ml-focus,52%) 45%}
#modeLoading[data-mode=battle]{--ml-focus:62%}
#modeLoading[data-mode=zombies]{--ml-focus:48%}
#modeLoading .ml-ring{display:none}
@media(max-aspect-ratio:3/4){#ml-scene,#ml-next{height:70%;inset:0;width:100%;object-position:var(--ml-focus,52%) 42%}.ml-art:after{background:linear-gradient(0deg,var(--ml-bg) 20%,transparent 85%)}}

#modeLoading[data-mode=rvb]{--ml-accent:#ff6073;--ml-accent2:#48baff;--ml-tint:#091c35}
