:root {
    color-scheme: dark;
    --violet: #8d42ff;
    --blue: #42d9ff;
    --ink: #05030b;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button { font: inherit; }
button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
[hidden] { display: none !important; }

#game, .preloader, .title-screen { width: 100%; height: 100dvh; }

.preloader {
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 20;
    padding: 2rem;
    background:
        radial-gradient(circle at 50% 35%, rgba(90, 37, 158, .23), transparent 32rem),
        linear-gradient(145deg, #090512, #020105);
    transition: opacity .65s ease, visibility .65s;
}

.preloader.is-leaving { opacity: 0; visibility: hidden; }
.preloader__content { width: min(28rem, 90vw); text-align: center; }
.eyebrow, .version {
    color: #a89eb8;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.loader {
    height: 3px;
    margin: 1.1rem 0;
    overflow: hidden;
    background: rgba(255,255,255,.1);
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(141,66,255,.2);
}

.loader span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--violet), var(--blue), #fff);
    box-shadow: 0 0 15px var(--blue);
    transition: width .25s ease;
}

.loader-status { min-height: 1.4em; color: #ddd6e9; font-size: .83rem; }
.loader-error { color: #ff779c; font-size: .82rem; }

.enter-button, .primary-button {
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 99px;
    color: #fff;
    background: linear-gradient(110deg, rgba(107,36,204,.95), rgba(25,135,188,.95));
    padding: .9rem 2rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 35px rgba(103,58,183,.35), inset 0 0 15px rgba(255,255,255,.1);
    transition: transform .2s, filter .2s, box-shadow .2s;
}

.enter-button:hover, .primary-button:hover { transform: translateY(-2px) scale(1.025); filter: brightness(1.18); }

.title-screen {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(50,18,82,.65), transparent 45%),
        radial-gradient(ellipse at 50% 110%, rgba(8,103,135,.28), transparent 50%),
        linear-gradient(#08040f, #020106);
}

.storm, .vignette, .grain { position: absolute; inset: 0; pointer-events: none; }
.storm { overflow: hidden; z-index: -1; }
.retro-grid, .lightning-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.retro-grid {
    z-index: 0;
    opacity: .88;
    overflow: hidden;
    perspective: max(1040px, 112vh);
    perspective-origin: 50% 34%;
}
.retro-grid__surface {
    position: absolute;
    top: 34%;
    left: -40%;
    width: 180%;
    height: 340%;
    transform-origin: 50% 0;
    transform: rotateX(80deg) translateZ(0);
    background-image:
        linear-gradient(rgba(207,53,255,.6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(183,45,246,.6) 1px, transparent 1px);
    background-size: clamp(58px, 4.2vw, 110px) clamp(46px, 4.4vw, 112px);
    border-radius: 50% 50% 0 0 / 2.8% 2.8% 0 0;
    box-shadow: inset 0 2px rgba(255,122,255,.9), 0 -2px 24px rgba(210,43,255,.72);
    will-change: background-position;
    animation: grid-travel 1.15s linear infinite;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.3), #000 10%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.3), #000 10%, #000 84%, transparent 100%);
}
.lightning-canvas { z-index: 3; mix-blend-mode: screen; }
.logo-electricity {
    position: absolute;
    z-index: 6;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}
.horizon-glow {
    position: absolute;
    z-index: 1;
    top: 28%;
    left: -20%;
    width: 140%;
    height: 13%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 52%, rgba(211,73,255,.32), rgba(133,36,225,.15) 37%, transparent 72%);
    box-shadow: 0 0 42px rgba(180,49,255,.17), inset 0 0 36px rgba(138,44,232,.12);
    transform: scaleY(.72);
    transform-origin: center;
}
.horizon-glow::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 49%;
    height: 2px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(187,72,255,.32) 15%, rgba(246,141,255,.92) 50%, rgba(92,212,255,.38) 78%, transparent);
    box-shadow: 0 0 8px rgba(228,99,255,.9), 0 0 24px rgba(154,47,255,.55);
}
.horizon-glow::after {
    content: "";
    position: absolute;
    inset: 47% 7% auto;
    height: 14%;
    border-top: 1px solid rgba(245,179,255,.9);
    border-radius: 50%;
    box-shadow: 0 -2px 10px rgba(214,73,255,.62), 0 2px 15px rgba(72,198,255,.24);
}
.horizon-flare {
    position: absolute;
    z-index: 2;
    top: 34%;
    left: 50%;
    width: min(58rem, 76vw);
    height: min(11rem, 19vh);
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(255,255,255,.62) 0 1%, rgba(111,224,255,.42) 3%, rgba(221,66,255,.25) 14%, rgba(138,37,231,.1) 34%, transparent 69%),
        linear-gradient(90deg, transparent 2%, rgba(204,64,255,.08) 26%, rgba(133,231,255,.35) 49.7%, rgba(255,255,255,.62) 50%, rgba(219,80,255,.12) 72%, transparent 98%);
    filter: blur(5px);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) scaleX(1.08);
    animation: horizon-flare-flicker 3.4s steps(1, end) infinite;
}
.vignette { box-shadow: inset 0 0 18vmax 5vmax #000; }
.grain { opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.volumetric-beam {
    position: absolute;
    z-index: 2;
    top: -12%;
    left: 50%;
    width: min(42rem, 60vw);
    height: 72%;
    opacity: 0;
    transform: translateX(-50%);
    transform-origin: 50% 0;
    clip-path: polygon(47% 0, 53% 0, 90% 100%, 10% 100%);
    background: radial-gradient(ellipse at 50% 8%, rgba(255,255,255,.9), rgba(138,221,255,.32) 18%, rgba(132,70,255,.08) 58%, transparent 72%);
    filter: blur(10px);
    mix-blend-mode: screen;
}
.is-entering .volumetric-beam { animation: beam-strike 2.15s .1s ease-out; }

.impact-light { position: fixed; z-index: 30; inset: 0; overflow: hidden; pointer-events: none; }
.impact-flash, .impact-bloom, .impact-ring { position: absolute; opacity: 0; pointer-events: none; }
.impact-flash { inset: 0; background: #f4fdff; mix-blend-mode: screen; }
.impact-bloom {
    left: 50%;
    top: 21%;
    width: 12vmin;
    aspect-ratio: 1;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 5vmin 2vmin #fff, 0 0 16vmin 7vmin #72dfff, 0 0 34vmin 16vmin rgba(164,61,255,.8);
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
}
.impact-ring { left: 50%; top: 21%; width: 16vmin; aspect-ratio: 1; border: 3px solid rgba(215,248,255,.9); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 18px #67dfff, inset 0 0 18px #b55cff; }
.impact-ring--two { width: 9vmin; border-width: 1px; }
.is-entering .impact-flash { animation: impact-screen-flash .72s .1s linear; }
.is-entering .impact-bloom { animation: impact-bloom .9s .1s cubic-bezier(.1,.7,.1,1); }
.is-entering .impact-ring--one { animation: impact-ring .95s .12s ease-out; }
.is-entering .impact-ring--two { animation: impact-ring 1.15s .17s ease-out; }
.lens-flare { position: absolute; left: 50%; top: 21%; border-radius: 50%; opacity: 0; mix-blend-mode: screen; }
.lens-flare--one { width: 30vmin; height: 30vmin; margin: -15vmin; border: 2px solid rgba(127,223,255,.44); box-shadow: inset 0 0 25px rgba(87,202,255,.18), 0 0 20px rgba(185,85,255,.22); }
.lens-flare--two { width: 7vmin; height: 7vmin; margin: 13vmin 0 0 22vmin; background: rgba(113,232,255,.35); filter: blur(5px); }
.lens-flare--three { width: 3vmin; height: 3vmin; margin: -19vmin 0 0 -27vmin; background: white; box-shadow: 0 0 30px 12px #71d7ff; }
.is-entering .lens-flare--one { animation: flare-ring 1.8s .2s ease-out; }
.is-entering .lens-flare--two { animation: flare-orb 1.8s .24s ease-out; }
.is-entering .lens-flare--three { animation: flare-orb 1.5s .3s ease-out reverse; }

.logo-stage {
    position: absolute;
    z-index: 4;
    top: 34%;
    left: 50%;
    width: min(32rem, 44vw);
    height: min(27vh, 17rem);
    display: grid;
    place-items: center;
    transform: translate(-50%, -100%);
}

.title-logo {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px #000) drop-shadow(0 0 18px rgba(87,194,255,.28));
    opacity: 0;
    transform: translateY(-110vh) scale(.84);
}

.title-mic {
    position: absolute;
    z-index: 1;
    top: -14%;
    width: 53%;
    max-height: 120%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.72)) drop-shadow(0 0 18px rgba(80,207,255,.24));
}
.title-mic--left { left: -22%; transform: translateX(58%) scale(.48) rotate(-13deg); }
.title-mic--right { right: -22%; transform: translateX(-58%) scaleX(-1) scale(.48) rotate(-13deg); }
.is-entering .title-mic--left { animation: mic-reveal-left .9s 1.55s cubic-bezier(.17,.86,.28,1.12) forwards; }
.is-entering .title-mic--right { animation: mic-reveal-right .9s 1.55s cubic-bezier(.17,.86,.28,1.12) forwards; }
.is-ready .title-mic--left { opacity: .94; animation: mic-float-left 5.4s ease-in-out infinite; }
.is-ready .title-mic--right { opacity: .94; animation: mic-float-right 5.4s ease-in-out infinite; }

.is-entering .title-logo { animation: logo-impact 1.35s .25s cubic-bezier(.16,.88,.29,1.12) forwards; }
.is-ready .title-logo { opacity: 1; transform: none; animation: logo-float 5s ease-in-out infinite; }
.is-ready .title-logo { filter: drop-shadow(0 12px 24px #000) drop-shadow(0 0 20px rgba(110,210,255,.48)) drop-shadow(0 0 48px rgba(157,46,255,.25)); animation: logo-float 5s ease-in-out infinite, energized-logo 2.4s ease-in-out infinite; }

.logo-glow {
    position: absolute;
    width: 60%;
    aspect-ratio: 2;
    opacity: .65;
    border-radius: 50%;
    background: rgba(69,167,255,.22);
    filter: blur(55px);
}

.title-actions {
    position: absolute;
    bottom: max(9vh, 4.5rem);
    display: flex;
    align-items: center;
    gap: .8rem;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .7s ease, transform .7s ease;
}

.is-ready .title-actions { opacity: 1; transform: none; }
.primary-button { font-size: clamp(.7rem, 1.6vw, .9rem); }
.icon-button {
    width: 3.15rem;
    height: 3.15rem;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: rgba(7,4,14,.65);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.icon-button[aria-pressed="false"] { color: #766e82; }
.version { position: absolute; bottom: 1rem; margin: 0; opacity: .65; }
.version .is-online { color: #65f2bc; }
.version .is-offline { color: #ff779c; }

@keyframes logo-impact {
    0% { opacity: 0; transform: translateY(-110vh) scale(.84); }
    60% { opacity: 1; transform: translateY(2.5vh) scale(1.04); }
    78% { transform: translateY(-1.5vh) scale(.985); }
    100% { opacity: 1; transform: none; }
}
@keyframes logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes mic-reveal-left { 0% { opacity: 0; transform: translateX(58%) scale(.48) rotate(-13deg); } 72% { opacity: .94; transform: translateX(-3%) scale(1.02) rotate(-13deg); } 100% { opacity: .94; transform: translateX(0) scale(1) rotate(-13deg); } }
@keyframes mic-reveal-right { 0% { opacity: 0; transform: translateX(-58%) scaleX(-1) scale(.48) rotate(-13deg); } 72% { opacity: .94; transform: translateX(3%) scaleX(-1) scale(1.02) rotate(-13deg); } 100% { opacity: .94; transform: translateX(0) scaleX(-1) scale(1) rotate(-13deg); } }
@keyframes mic-float-left { 0%,100% { transform: translateY(0) rotate(-13deg); } 50% { transform: translateY(-7px) rotate(-10deg); } }
@keyframes mic-float-right { 0%,100% { transform: translateY(0) scaleX(-1) rotate(-13deg); } 50% { transform: translateY(-7px) scaleX(-1) rotate(-10deg); } }
@keyframes lightning { 0%,15%,25%,100% { opacity: 0; } 8%,20% { opacity: 1; } }
@keyframes beam-strike { 0%,10%,18%,100% { opacity: 0; transform: translateX(-50%) scaleX(.7); } 6% { opacity: .9; } 14% { opacity: .46; } 25% { opacity: .12; transform: translateX(-50%) scaleX(1.12); } }
@keyframes flare-ring { 0% { opacity: .9; transform: scale(.18); } 45% { opacity: .42; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes flare-orb { 0% { opacity: .9; transform: scale(.25); } 100% { opacity: 0; transform: scale(2.8) translate(25vw, 10vh); } }
@keyframes impact-screen-flash { 0%,100% { opacity: 0; } 5% { opacity: 1; } 16% { opacity: .94; } 28% { opacity: .18; } 38% { opacity: .72; } 48% { opacity: .08; } }
@keyframes impact-bloom { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.08); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(6); } }
@keyframes impact-ring { 0% { opacity: .95; transform: translate(-50%,-50%) scale(.08); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(8); } }
@keyframes energized-logo { 0%,100% { filter: drop-shadow(0 12px 24px #000) drop-shadow(0 0 17px rgba(100,211,255,.42)) drop-shadow(0 0 42px rgba(157,46,255,.2)); } 50% { filter: drop-shadow(0 12px 24px #000) drop-shadow(0 0 27px rgba(190,242,255,.7)) drop-shadow(0 0 62px rgba(184,60,255,.4)); } }
@keyframes grid-travel { from { background-position: 0 0, 0 0; } to { background-position: 0 clamp(46px, 4.4vw, 112px), 0 clamp(46px, 4.4vw, 112px); } }
@keyframes horizon-flare-flicker {
    0%, 18%, 22%, 61%, 66%, 100% { opacity: .58; filter: blur(5px) brightness(1); }
    19%, 63% { opacity: .88; filter: blur(4px) brightness(1.55); }
    20%, 64% { opacity: .42; filter: blur(7px) brightness(.9); }
    47% { opacity: .7; filter: blur(5px) brightness(1.22); }
}

@media (max-height: 620px) {
    .logo-stage { height: 29vh; }
    .title-actions { bottom: 3.2rem; }
}
@media (max-width: 720px) {
    .logo-stage { width: min(32rem, 72vw); height: 27vh; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}