.pixel-auth-shell,
.vx-landing {
    position: relative;
    min-height: 100vh;
    display: grid;
    gap: 28px;
    padding: 28px;
}

.pixel-auth-shell {
    grid-template-columns: 1.12fr minmax(360px, 500px);
    align-items: center;
}

.pixel-auth-stage,
.vx-landing-scene,
.vx-landing-copy,
.pixel-auth-window {
    position: relative;
    z-index: 1;
}

.pixel-auth-stage {
    min-height: 720px;
    border: 18px solid transparent;
    border-image: var(--vx-frame) 32 fill / 18px stretch;
    background: radial-gradient(circle at 40% 28%, rgba(143, 83, 255, 0.22), transparent 25%), linear-gradient(180deg, rgba(26, 13, 39, 0.95), rgba(10, 6, 17, 0.98));
    box-shadow: var(--vx-shadow);
    overflow: hidden;
}

.pixel-auth-stage::before,
.vx-landing-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 95%, rgba(255, 255, 255, 0.05) 95%), linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.05) 95%);
    background-size: 40px 40px;
    opacity: 0.18;
    image-rendering: pixelated;
}

.pixel-auth-stage::after,
.vx-landing-scene::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 140px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
}

.pixel-auth-map {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255, 207, 115, 0.12), transparent 18%), radial-gradient(circle at 78% 24%, rgba(107, 232, 255, 0.14), transparent 14%), linear-gradient(180deg, rgba(24, 14, 38, 0.9), rgba(9, 5, 15, 0.98)), var(--vx-floor-tile);
    background-size: auto, auto, auto, 32px 32px;
    image-rendering: pixelated;
}

.pixel-auth-sprites {
    position: absolute;
    inset: 0;
}

.auth-stage-char,
.auth-stage-chest,
.vx-scene-char,
.vx-scene-chest,
.vx-scene-bomb {
    position: absolute;
    image-rendering: pixelated;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
}

.auth-stage-char {
    width: 136px;
    animation: vxFloat 2.8s steps(6) infinite;
}

.auth-stage-char.one {
    left: 13%;
    bottom: 17%;
}

.auth-stage-char.two {
    left: 51%;
    bottom: 30%;
    animation-delay: 220ms;
}

.auth-stage-chest {
    width: 128px;
    right: 10%;
    bottom: 19%;
    transform: scale(1.2);
}

.pixel-auth-stage.is-register .auth-stage-char.one {
    left: 12%;
}

.pixel-auth-stage.is-register .auth-stage-char.two {
    left: 57%;
}

.pixel-auth-window {
    max-width: 500px;
}

.pixel-auth-window h2,
.vx-landing-copy h1 {
    margin: 0 0 12px;
    font-family: 'VXPixelTitleBold', sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
}

.vx-landing-copy h1 {
    font-size: clamp(2.4rem, 8vw, 5.6rem);
}

.vx-lead {
    max-width: 660px;
    color: var(--vx-muted);
    font-size: 1.05rem;
}

.vx-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 22px 0;
}

.vx-landing {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
}

.vx-landing-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.vx-landing-tile,
.vx-grid-floor {
    position: absolute;
    inset: 0;
    background-image: var(--vx-floor-tile);
    background-size: 32px 32px;
    opacity: 0.1;
    image-rendering: pixelated;
}

.vx-landing-aurora {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 20%, rgba(143, 83, 255, 0.25), transparent 18%), radial-gradient(circle at 76% 28%, rgba(107, 232, 255, 0.16), transparent 18%), radial-gradient(circle at 58% 78%, rgba(255, 207, 115, 0.1), transparent 22%);
}

.vx-landing-copy {
    max-width: 720px;
}

.vx-landing-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.vx-landing-stats .pixel-panel {
    display: grid;
    gap: 6px;
}

.vx-landing-stats strong {
    font-family: 'VXPixelTitleBold', sans-serif;
}

.vx-landing-stats span {
    color: var(--vx-muted);
}

.vx-landing-scene {
    min-height: 620px;
}

.vx-scene-topline,
.vx-scene-rack {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vx-scene-topline {
    margin-bottom: 16px;
    color: var(--vx-gold);
    font-family: 'VXPixelHud', monospace;
}

.vx-scene-preview {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(18, 9, 28, 0.86), rgba(8, 4, 12, 0.98));
}

.vx-scene-char {
    width: 126px;
    animation: vxFloat 3.2s steps(6) infinite;
}

.vx-scene-char.pos-one {
    left: 14%;
    bottom: 17%;
}

.vx-scene-char.pos-two {
    left: 58%;
    bottom: 27%;
    animation-delay: 180ms;
}

.vx-scene-chest {
    width: 128px;
    right: 18%;
    bottom: 16%;
}

.vx-scene-bomb {
    width: 86px;
    left: 46%;
    bottom: 17%;
    animation: vxFuse 1.2s steps(2) infinite;
}

.vx-scene-rack {
    margin-top: 16px;
}

@keyframes vxFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes vxFuse {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-2px) scale(1.06);
    }
}

@media (max-width: 1180px) {
    .pixel-auth-shell,
    .vx-landing {
        grid-template-columns: 1fr;
    }

    .pixel-auth-stage {
        min-height: 360px;
    }
}

@media (max-width: 640px) {
    .pixel-auth-shell,
    .vx-landing {
        padding: 14px;
    }

    .pixel-auth-window {
        max-width: none;
    }
}