* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background-color: #000;
    font-family: 'Courier New', Courier, monospace; /* Retro terminal feel */
    color: #fff;
    user-select: none;
}

button:focus-visible,
input:focus-visible {
    outline: 2px solid #e1b763;
    outline-offset: 2px;
    border-radius: inherit;
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Let clicks pass through to the canvas */
    z-index: 10;
    transition: filter 0.2s ease-out;
}

#ui-layer.is-disrupted {
    filter: hue-rotate(90deg) blur(2px) contrast(150%);
}
#ui-layer.is-disrupted #crosshair {
    opacity: 0; /* Hide crosshair while disrupted */
}

.low-health-vignette {
    box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.4);
    animation: lowHealthPulse 1s infinite alternate;
}

@keyframes lowHealthPulse {
    from {
        box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.3);
    }
    to {
        box-shadow: inset 0 0 300px rgba(255, 0, 0, 0.6);
    }
}

.hit-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8L24 24M8 24L24 8'/%3E%3C/svg%3E");
    background-size: cover;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    z-index: 10;
}

.hit-marker.is-active {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
    transition: none;
}

.hit-marker.is-critical {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='red' stroke-width='4' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8L24 24M8 24L24 8'/%3E%3C/svg%3E");
    opacity: 1;
}

#score-popups {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 100;
}

.score-popup {
    position: absolute;
    color: #ffd700;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 3px #000;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: scorePopupAnim 0.8s ease-out forwards;
}

.score-popup.is-boss {
    color: #ff3300;
    font-size: 32px;
}

@keyframes scorePopupAnim {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
        transform: translate(-50%, -60%) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(1);
    }
}

#crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 245, 200, 0.85);
    border-radius: 50%;
    color: rgba(255, 245, 200, 0.95);
    background:
        linear-gradient(rgba(255, 245, 200, 0.9), rgba(255, 245, 200, 0.9)) center / 2px 26px no-repeat,
        linear-gradient(90deg, rgba(255, 245, 200, 0.9), rgba(255, 245, 200, 0.9)) center / 26px 2px no-repeat;
    font-size: 0;
    box-shadow: 0 0 14px rgba(255, 180, 60, 0.28);
    transition: transform 0.05s ease-out, border-color 0.05s, box-shadow 0.05s;
}

#crosshair.is-firing {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.6;
    transition: transform 0.03s ease-out, opacity 0.03s ease-out;
}

#crosshair.hit-marker {
    transform: translate(-50%, -50%) scale(1.3);
    border-color: rgba(255, 50, 50, 0.95);
    box-shadow: 0 0 20px rgba(255, 50, 50, 0.6);
}

#active-reload-container {
    position: absolute;
    top: calc(50% + 40px);
    left: 50%;
    transform: translate(-50%, 0);
    width: 140px;
    height: 12px;
    z-index: 100;
}

#active-reload-bar {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    overflow: hidden;
}

#active-reload-sweet-spot {
    position: absolute;
    top: 0;
    left: 60%; /* Fixed sweet spot start */
    width: 15%; /* Sweet spot width */
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

#active-reload-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #ff3333;
    box-shadow: 0 0 6px #ff0000;
}

#active-reload-cursor.animating {
    animation: activeReloadCursorAnim var(--reload-duration) linear forwards;
}

@keyframes activeReloadCursorAnim {
    0% { left: 0%; }
    100% { left: 100%; }
}

#active-reload-bar.perfect {
    border-color: #ffd700;
    box-shadow: 0 0 10px #ffd700;
}

#active-reload-bar.perfect #active-reload-sweet-spot {
    background-color: #ffd700;
}

#active-reload-bar.perfect #active-reload-cursor {
    background-color: transparent;
    box-shadow: none;
}

#active-reload-bar.jammed {
    border-color: #ff3333;
    box-shadow: 0 0 10px #ff3333;
}

#active-reload-bar.jammed #active-reload-sweet-spot {
    background-color: rgba(255, 50, 50, 0.4);
}

#active-reload-text {
    position: absolute;
    top: 14px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    opacity: 0;
    transition: opacity 0.2s;
}

#active-reload-text.perfect {
    color: #ffd700;
    opacity: 1;
}

#active-reload-text.jammed {
    color: #ff3333;
    opacity: 1;
}

#damage-numbers-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.damage-number {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: #fff;
    text-shadow: 0 0 4px #000, 0 0 8px rgba(255, 0, 0, 0.8);
    pointer-events: none;
    animation: float-up-fade 1s ease-out forwards;
}

.damage-number.crit {
    color: #ff3333;
    font-size: 32px;
    text-shadow: 0 0 6px #000, 0 0 12px rgba(255, 50, 50, 1);
}

@keyframes float-up-fade {
    0% {
        opacity: 1;
        margin-top: 0;
    }
    100% {
        opacity: 0;
        margin-top: -60px;
    }
}

#hitmarker, #headshot-hitmarker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 24px;
    height: 24px;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
}

#hitmarker::before, #hitmarker::after,
#headshot-hitmarker::before, #headshot-hitmarker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background-color: white;
    transform-origin: center;
}

#headshot-hitmarker::before, #headshot-hitmarker::after {
    background-color: #ff3333;
    box-shadow: 0 0 4px #ff0000;
}

#hitmarker::before, #headshot-hitmarker::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#hitmarker::after, #headshot-hitmarker::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.hitmarker-active {
    animation: hitmarkerAnim 0.2s ease-out;
}

@keyframes hitmarkerAnim {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

#hit-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 24px;
    height: 24px;
    background:
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, transparent 60%) center / 100% 100% no-repeat,
        linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 60%, transparent 60%) center / 100% 100% no-repeat;
    opacity: 0;
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

#hit-marker.hit-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: none;
}

#hit-marker.hit-kill {
    background:
        linear-gradient(45deg, transparent 40%, rgba(255, 50, 50, 0.9) 40%, rgba(255, 50, 50, 0.9) 60%, transparent 60%) center / 100% 100% no-repeat,
        linear-gradient(-45deg, transparent 40%, rgba(255, 50, 50, 0.9) 40%, rgba(255, 50, 50, 0.9) 60%, transparent 60%) center / 100% 100% no-repeat;
    transform: translate(-50%, -50%) scale(1.3);
}

#damage-numbers-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 12;
    overflow: hidden;
}

.damage-number {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: floatUp 0.8s ease-out forwards;
    z-index: 1000;
}

.damage-number.crit {
    color: #ff4444;
    font-size: 24px;
    text-shadow: 0 0 6px #000, 0 0 12px rgba(255, 50, 50, 1);
    animation: floatUpCrit 0.9s ease-out forwards;
    z-index: 1001;
}

.damage-number.is-kill {
    color: #ff1111;
    font-size: 26px;
    font-style: italic;
    text-shadow: 0 0 8px #000, 0 0 16px rgba(255, 10, 10, 1);
    animation: floatUpKill 1.0s ease-out forwards;
    z-index: 1002;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
        transform: translate(-50%, -70%) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(0.9);
    }
}

@keyframes floatUpCrit {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.0);
    }
    15% {
        transform: translate(-50%, -80%) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -180%) scale(1.0);
    }
}

@keyframes floatUpKill {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    15% {
        transform: translate(-50%, -90%) scale(1.5) rotate(-5deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -200%) scale(1.1) rotate(5deg);
    }
}

#stats-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
}

.stat-box {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 15px 20px;
    border: 2px solid #555;
    border-radius: 5px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#health-box { border-color: #aa0000; }
#vehicle-box { border-color: #3399aa; }
#weapon-box { border-color: #aaaa00; }
#score-box { border-color: #00aa00; }
#dash-box { border-color: #aa55aa; }

.stat-label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
}

#minimap {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 150px;
    height: 150px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid #555;
    border-radius: 50%;
    z-index: 15;
}

/* Boss UI */
#boss-container {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    text-align: center;
    z-index: 15;
}

#boss-name {
    font-size: 24px;
    color: #ff0000;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
    margin-bottom: 5px;
}

#boss-hp-bg {
    width: 100%;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid #ff0000;
    border-radius: 10px;
    overflow: hidden;
}

#boss-hp-fill {
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    transition: width 0.2s;
}

/* Enemy HP Bars */
#enemy-hp-bars {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 90;
}

.enemy-hp-bar {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}

.enemy-hp-bar.visible {
    opacity: 1;
    transition: opacity 0s;
}

.enemy-hp-bar__bg {
    width: 60px;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    overflow: hidden;
}

.enemy-hp-bar.is-miniboss .enemy-hp-bar__bg {
    width: 80px;
    height: 8px;
    border: 1px solid #ff8800;
    border-radius: 3px;
}

.enemy-hp-bar__fill {
    height: 100%;
    background-color: #44ff44;
    transition: width 0.1s linear;
}

.enemy-hp-bar__name {
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: #ff8800;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    margin-bottom: 2px;
    white-space: nowrap;
}

#health-value { color: #ff5555; }
#vehicle-value { color: #66e0ff; }
#ammo-value { color: #ffff55; transition: color 0.15s; }
#score-value { color: #55ff55; }

#ammo-value.is-low-ammo {
    color: #ffaa55;
    animation: pulseLowAmmo 1.2s infinite ease-in-out;
}

#ammo-value.is-empty-ammo {
    color: #ff3333;
    animation: pulseEmptyAmmo 0.4s infinite alternate;
}

@keyframes pulseLowAmmo {
    0% { color: #ffaa55; text-shadow: none; transform: scale(1); }
    50% { color: #ff4400; text-shadow: 0 0 8px rgba(255, 68, 0, 0.6); transform: scale(1.05); }
    100% { color: #ffaa55; text-shadow: none; transform: scale(1); }
}

@keyframes pulseEmptyAmmo {
    from { transform: scale(1); text-shadow: 0 0 6px rgba(255, 51, 51, 0.8); }
    to { transform: scale(1.1); text-shadow: 0 0 12px rgba(255, 51, 51, 1); }
}

#dash-bar-bg {
    width: 100px;
    height: 12px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #aa55aa;
    border-radius: 6px;
    margin-top: 4px;
    overflow: hidden;
}

#dash-bar-fill {
    width: 100%;
    height: 100%;
    background-color: #ff88ff;
    transition: width 0.1s linear;
}
.dash-ready {
    background-color: #ff55ff !important;
    box-shadow: 0 0 8px #ff55ff;
}

.dash-flash {
    animation: dashReadyFlash 0.4s ease-out forwards;
}

@keyframes dashReadyFlash {
    0% { background-color: #ffffff; box-shadow: 0 0 20px #ffffff, 0 0 40px #ff55ff; }
    100% { background-color: #ff55ff; box-shadow: 0 0 8px #ff55ff; }
}

/* Instructions & Menus */
#instructions, #game-over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* Catch clicks for these menus */
    z-index: 20;
}

#game-over {
    display: none; /* Hidden by default */
    background-color: rgba(50, 0, 0, 0.8); /* Red tint for game over */
}

.instruction-content {
    text-align: center;
    background: rgba(0, 0, 0, 0.9);
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 18px 20px 16px;
    border: 1px solid #333;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
}

h1 {
    font-size: 32px;
    margin-bottom: 8px;
    color: #ff3333;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#instructions p {
    font-size: 14px;
    margin: 4px 0;
    color: #ddd;
}

#stage-select {
    margin-bottom: 8px;
}

#character-select {
    margin-bottom: 8px;
}

#loadout-select {
    margin-bottom: 8px;
}

.menu-label {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9bb08f;
}

.stage-buttons {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 6px;
    width: max-content;
    min-width: 100%;
    padding: 4px 0;
    perspective: 1600px;
}

.stage-flow-shell {
    position: relative;
}

.stage-flow-viewport {
    overflow-x: auto;
    padding: 8px 18px 10px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.72) 12%, #000 20%, #000 80%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
}

.stage-flow-viewport::-webkit-scrollbar {
    display: none;
}

.stage-flow-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 36px;
    height: 64px;
    border-radius: 999px;
    border: 1px solid rgba(171, 196, 222, 0.24);
    background:
        linear-gradient(180deg, rgba(16, 24, 34, 0.9), rgba(6, 10, 16, 0.95));
    color: #edf3fa;
    font-size: 26px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.stage-flow-nav:hover {
    transform: translateY(-50%) scale(1.03);
    border-color: rgba(217, 231, 248, 0.46);
    background:
        linear-gradient(180deg, rgba(28, 42, 58, 0.94), rgba(10, 16, 25, 0.98));
}

.stage-flow-nav:disabled {
    opacity: 0.38;
    cursor: default;
    transform: translateY(-50%);
}

.stage-flow-nav-prev {
    left: 8px;
}

.stage-flow-nav-next {
    right: 8px;
}

.stage-card.stage-btn {
    position: relative;
    display: grid;
    gap: 4px;
    flex: 0 0 min(280px, 52vw);
    min-width: 0;
    margin-top: 0;
    padding: 10px 12px 10px;
    text-align: left;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--stage-accent) 24%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--stage-panel) 88%, #0a1018), #081018);
    color: #f3f7fb;
    border: 1px solid color-mix(in srgb, var(--stage-accent) 45%, #2e3642);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform-origin: center center;
    transform:
        translateX(calc(var(--coverflow-offset, 0) * -18px))
        rotateY(calc(var(--coverflow-offset, 0) * -28deg))
        translateY(calc(var(--coverflow-distance, 0) * 12px))
        scale(calc(1 - (var(--coverflow-distance, 0) * 0.11)));
    opacity: calc(1 - (var(--coverflow-distance, 0) * 0.32));
    filter: brightness(calc(1.04 - (var(--coverflow-distance, 0) * 0.12))) saturate(calc(1.04 - (var(--coverflow-distance, 0) * 0.18)));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease, filter 0.22s ease;
}

.stage-card.stage-btn:hover {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--stage-accent) 28%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--stage-panel) 88%, #111924), #081018);
    border-color: color-mix(in srgb, var(--stage-accent) 78%, #ffffff);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.28),
        0 0 0 1px color-mix(in srgb, var(--stage-accent) 16%, transparent);
}

.stage-card.stage-btn.is-selected {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--stage-accent) 24%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--stage-panel) 88%, #121a25), #0a1018);
    color: #f3f7fb;
    border-color: color-mix(in srgb, var(--stage-accent) 88%, #ffffff);
    outline: 2px solid color-mix(in srgb, var(--stage-accent) 80%, #ffffff);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.07),
        0 22px 44px rgba(0, 0, 0, 0.3);
}

.stage-card.stage-btn.is-centered {
    z-index: 3;
    opacity: 1;
    filter: brightness(1.06) saturate(1.06);
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.stage-card.stage-btn.is-selected.is-centered {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 26px 58px rgba(0, 0, 0, 0.34);
}

.stage-card-tag,
.stage-card-summary {
    font-size: 12px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.stage-card-tag {
    color: color-mix(in srgb, var(--stage-accent) 74%, #ffffff);
}

.stage-card-name {
    font-size: 18px;
    letter-spacing: 1px;
}

.stage-card-summary {
    color: #d2dfec;
    line-height: 1.45;
}

.stage-card-preview {
    position: relative;
    display: block;
    width: 100%;
    height: 120px;
    margin: 2px 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.stage-preview-city {
    background:
        linear-gradient(180deg, rgba(236, 178, 96, 0.92), rgba(74, 41, 33, 0.92) 52%, rgba(11, 15, 23, 0.96));
}

.stage-preview-forest {
    background:
        radial-gradient(circle at 50% 18%, rgba(178, 225, 200, 0.2), transparent 34%),
        linear-gradient(180deg, rgba(31, 63, 44, 0.9), rgba(14, 28, 18, 0.96));
}

.stage-preview-seabed {
    background:
        radial-gradient(circle at 50% 16%, rgba(163, 222, 255, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(32, 73, 112, 0.92), rgba(7, 16, 28, 0.98));
}

.stage-preview-desert {
    background:
        linear-gradient(180deg, rgba(232, 201, 118, 0.95), rgba(181, 111, 55, 0.8) 56%, rgba(58, 36, 18, 0.96));
}

.stage-preview-volcano {
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 146, 84, 0.24), transparent 30%),
        linear-gradient(180deg, rgba(74, 18, 8, 0.96), rgba(28, 8, 6, 0.94) 50%, rgba(9, 6, 7, 0.99));
}

.stage-preview-tundra {
    background:
        radial-gradient(circle at 50% 14%, rgba(165, 226, 255, 0.2), transparent 34%),
        linear-gradient(180deg, rgba(57, 88, 122, 0.95), rgba(22, 40, 58, 0.94) 46%, rgba(8, 16, 26, 0.99));
}

.stage-preview-catacombs {
    background:
        radial-gradient(circle at 50% 18%, rgba(179, 122, 255, 0.18), transparent 30%),
        linear-gradient(180deg, rgba(52, 28, 58, 0.96), rgba(22, 11, 28, 0.95) 44%, rgba(8, 6, 12, 0.99));
}

.stage-preview-sun,
.stage-preview-moon,
.stage-preview-bubble,
.stage-preview-dome,
.stage-preview-coral,
.stage-preview-road,
.stage-preview-ground,
.stage-preview-pyramid,
.stage-preview-dune,
.stage-preview-skyline,
.stage-preview-tree,
.stage-preview-caldera,
.stage-preview-lava,
.stage-preview-spire,
.stage-preview-aurora,
.stage-preview-frozen-lake,
.stage-preview-ice-spire,
.stage-preview-snowdrift,
.stage-preview-catacombs-glow,
.stage-preview-arch,
.stage-preview-altar,
.stage-preview-crypt-floor {
    position: absolute;
    display: block;
}

.stage-preview-sun {
    width: 58px;
    height: 58px;
    top: 18px;
    right: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 250, 213, 0.96), rgba(241, 193, 96, 0.9) 58%, rgba(241, 193, 96, 0));
}

.stage-preview-cityline-1 {
    left: 16px;
    bottom: 28px;
    width: 112px;
    height: 70px;
    background: linear-gradient(180deg, rgba(41, 47, 60, 0.94), rgba(10, 13, 19, 0.98));
    clip-path: polygon(0 100%, 0 36%, 14% 36%, 14% 12%, 28% 12%, 28% 48%, 44% 48%, 44% 22%, 58% 22%, 58% 0, 72% 0, 72% 58%, 100% 58%, 100% 100%);
}

.stage-preview-cityline-2 {
    right: 18px;
    bottom: 22px;
    width: 138px;
    height: 82px;
    background: linear-gradient(180deg, rgba(54, 49, 58, 0.9), rgba(13, 14, 18, 0.98));
    clip-path: polygon(0 100%, 0 46%, 18% 46%, 18% 18%, 34% 18%, 34% 62%, 50% 62%, 50% 10%, 70% 10%, 70% 38%, 84% 38%, 84% 22%, 100% 22%, 100% 100%);
}

.stage-preview-road {
    left: 50%;
    bottom: -8px;
    width: 124px;
    height: 84px;
    background: linear-gradient(180deg, rgba(44, 45, 54, 0.26), rgba(8, 10, 14, 0.85));
    transform: translateX(-50%);
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
}

.stage-preview-moon {
    width: 34px;
    height: 34px;
    top: 18px;
    right: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 255, 245, 0.96), rgba(148, 214, 181, 0.48) 62%, rgba(148, 214, 181, 0));
}

.stage-preview-tree {
    bottom: 26px;
    width: 76px;
    height: 118px;
    background: linear-gradient(180deg, rgba(22, 42, 28, 0.1), rgba(7, 12, 8, 0));
}

.stage-preview-tree::before,
.stage-preview-tree::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}

.stage-preview-tree::before {
    bottom: 0;
    width: 10px;
    height: 54px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(82, 59, 34, 0.96), rgba(33, 22, 12, 0.98));
}

.stage-preview-tree::after {
    bottom: 34px;
    width: 76px;
    height: 76px;
    background: linear-gradient(180deg, rgba(58, 110, 72, 0.94), rgba(15, 36, 22, 0.98));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.stage-preview-tree-left {
    left: 20px;
}

.stage-preview-tree-mid {
    left: 112px;
    transform: scale(1.14);
}

.stage-preview-tree-right {
    right: 22px;
    width: 82px;
}

.stage-preview-ground {
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: linear-gradient(180deg, rgba(35, 62, 46, 0.92), rgba(8, 14, 10, 0.98));
}

.stage-preview-seabed .stage-preview-ground {
    background: linear-gradient(180deg, rgba(24, 81, 123, 0.92), rgba(5, 14, 26, 0.98));
}

.stage-preview-bubble {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(190, 236, 255, 0.65);
    background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.72), rgba(140, 214, 255, 0.12));
}

.stage-preview-bubble-1 {
    top: 22px;
    left: 44px;
}

.stage-preview-bubble-2 {
    top: 54px;
    left: 66px;
    width: 12px;
    height: 12px;
}

.stage-preview-dome {
    left: 50%;
    bottom: 24px;
    width: 160px;
    height: 92px;
    transform: translateX(-50%);
    border-radius: 160px 160px 0 0;
    border: 2px solid rgba(152, 221, 255, 0.72);
    background: linear-gradient(180deg, rgba(123, 210, 255, 0.12), rgba(23, 52, 78, 0.4));
    box-shadow: 0 0 36px rgba(74, 158, 219, 0.22);
}

.stage-preview-coral {
    right: 26px;
    bottom: 24px;
    width: 44px;
    height: 74px;
    background: linear-gradient(180deg, rgba(255, 151, 118, 0.86), rgba(128, 65, 56, 0.98));
    clip-path: polygon(44% 100%, 56% 100%, 58% 62%, 82% 46%, 88% 18%, 100% 10%, 92% 42%, 70% 56%, 72% 0, 58% 14%, 50% 58%, 36% 18%, 20% 2%, 28% 54%, 6% 38%, 0 14%, 12% 20%, 18% 44%, 40% 60%);
}

.stage-preview-desert-sun {
    width: 62px;
    height: 62px;
    top: 18px;
    right: 26px;
}

.stage-preview-dune {
    left: 0;
    right: 0;
    border-radius: 50%;
}

.stage-preview-dune-back {
    bottom: 36px;
    height: 74px;
    background: linear-gradient(180deg, rgba(225, 190, 112, 0.86), rgba(171, 123, 60, 0.92));
    clip-path: ellipse(64% 58% at 48% 54%);
}

.stage-preview-dune-front {
    bottom: -4px;
    height: 88px;
    background: linear-gradient(180deg, rgba(212, 158, 81, 0.96), rgba(120, 74, 33, 0.98));
    clip-path: ellipse(74% 62% at 50% 54%);
}

.stage-preview-pyramid {
    left: 50%;
    bottom: 34px;
    width: 124px;
    height: 96px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(229, 204, 142, 0.96), rgba(157, 112, 58, 0.96));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.stage-preview-volcano-glow {
    width: 68px;
    height: 68px;
    top: 12px;
    right: 18px;
    background: radial-gradient(circle, rgba(255, 234, 190, 0.94), rgba(255, 116, 52, 0.88) 48%, rgba(255, 88, 42, 0));
}

.stage-preview-caldera {
    left: 50%;
    bottom: 36px;
    width: 188px;
    height: 86px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(34, 19, 18, 0.96), rgba(12, 8, 10, 0.98));
    clip-path: polygon(0 100%, 10% 82%, 22% 50%, 36% 30%, 45% 34%, 50% 20%, 56% 36%, 66% 28%, 80% 54%, 90% 74%, 100% 100%);
}

.stage-preview-lava {
    left: 0;
    right: 0;
    border-radius: 50%;
}

.stage-preview-lava-back {
    bottom: 22px;
    height: 52px;
    background: linear-gradient(180deg, rgba(255, 154, 66, 0.86), rgba(190, 57, 18, 0.94));
    clip-path: ellipse(58% 40% at 52% 50%);
}

.stage-preview-lava-front {
    bottom: -10px;
    height: 62px;
    background: linear-gradient(180deg, rgba(255, 132, 51, 0.98), rgba(110, 24, 10, 0.98));
    clip-path: ellipse(78% 46% at 50% 50%);
}

.stage-preview-spire {
    left: 56%;
    bottom: 40px;
    width: 70px;
    height: 88px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(74, 28, 20, 0.96), rgba(22, 12, 12, 0.99));
    clip-path: polygon(38% 100%, 44% 58%, 30% 36%, 44% 0, 60% 42%, 52% 62%, 66% 100%);
    box-shadow: 0 0 20px rgba(255, 99, 45, 0.12);
}

.stage-preview-aurora {
    top: 10px;
    left: -6px;
    width: 240px;
    height: 58px;
    background: linear-gradient(90deg, rgba(102, 204, 255, 0), rgba(102, 204, 255, 0.24), rgba(184, 255, 240, 0.32), rgba(102, 204, 255, 0));
    transform: rotate(-8deg);
    filter: blur(3px);
}

.stage-preview-frozen-lake {
    left: 50%;
    bottom: 20px;
    width: 182px;
    height: 58px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        linear-gradient(180deg, rgba(185, 230, 255, 0.82), rgba(76, 133, 175, 0.78)),
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    box-shadow: inset 0 0 0 1px rgba(227, 246, 255, 0.28);
}

.stage-preview-ice-spire {
    bottom: 34px;
    width: 58px;
    height: 86px;
    background: linear-gradient(180deg, rgba(212, 243, 255, 0.92), rgba(73, 130, 178, 0.92));
    clip-path: polygon(50% 0, 82% 36%, 62% 100%, 18% 100%, 0 44%);
    box-shadow: 0 0 18px rgba(102, 204, 255, 0.18);
}

.stage-preview-ice-spire-left {
    left: 24px;
}

.stage-preview-ice-spire-right {
    right: 28px;
    width: 46px;
    height: 74px;
}

.stage-preview-snowdrift {
    left: 0;
    right: 0;
    bottom: -8px;
    height: 48px;
    background: linear-gradient(180deg, rgba(235, 247, 255, 0.95), rgba(111, 152, 188, 0.9));
    clip-path: ellipse(82% 70% at 50% 58%);
}

.stage-preview-catacombs-glow {
    width: 72px;
    height: 72px;
    top: 14px;
    right: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 216, 170, 0.92), rgba(173, 115, 255, 0.52) 48%, rgba(173, 115, 255, 0));
}

.stage-preview-arch {
    bottom: 28px;
    width: 76px;
    height: 82px;
    background: linear-gradient(180deg, rgba(96, 75, 90, 0.92), rgba(30, 20, 34, 0.98));
    clip-path: polygon(0 100%, 0 36%, 18% 36%, 18% 0, 82% 0, 82% 36%, 100% 36%, 100% 100%, 72% 100%, 72% 50%, 28% 50%, 28% 100%);
}

.stage-preview-arch-left {
    left: 18px;
}

.stage-preview-arch-right {
    right: 18px;
}

.stage-preview-altar {
    left: 50%;
    bottom: 30px;
    width: 96px;
    height: 58px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(128, 101, 125, 0.96), rgba(54, 34, 61, 0.98));
    clip-path: polygon(10% 100%, 18% 54%, 28% 46%, 28% 18%, 72% 18%, 72% 46%, 82% 54%, 90% 100%);
    box-shadow: 0 0 24px rgba(153, 102, 204, 0.22);
}

.stage-preview-crypt-floor {
    left: 0;
    right: 0;
    bottom: -6px;
    height: 54px;
    background: linear-gradient(180deg, rgba(74, 58, 58, 0.94), rgba(20, 12, 18, 0.99));
    clip-path: ellipse(78% 56% at 50% 46%);
}

.character-options {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 6px;
    width: max-content;
    min-width: 100%;
    padding: 4px 0;
    perspective: 1600px;
}

.character-flow-shell {
    position: relative;
}

.character-flow-viewport {
    overflow-x: auto;
    padding: 8px 18px 12px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.72) 12%, #000 20%, #000 80%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
}

.character-flow-viewport::-webkit-scrollbar {
    display: none;
}

.character-flow-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 36px;
    height: 64px;
    border-radius: 999px;
    border: 1px solid rgba(171, 196, 222, 0.24);
    background:
        linear-gradient(180deg, rgba(16, 24, 34, 0.9), rgba(6, 10, 16, 0.95));
    color: #edf3fa;
    font-size: 26px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.character-flow-nav:hover {
    transform: translateY(-50%) scale(1.03);
    border-color: rgba(217, 231, 248, 0.46);
    background:
        linear-gradient(180deg, rgba(28, 42, 58, 0.94), rgba(10, 16, 25, 0.98));
}

.character-flow-nav:disabled {
    opacity: 0.38;
    cursor: default;
    transform: translateY(-50%);
}

.character-flow-nav-prev {
    left: 8px;
}

.character-flow-nav-next {
    right: 8px;
}

.character-card {
    position: relative;
    display: grid;
    gap: 4px;
    flex: 0 0 min(270px, 54vw);
    min-height: 0;
    padding: 10px 12px 10px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--character-accent) 45%, #2e3642);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--character-accent) 28%, transparent), transparent 44%),
        linear-gradient(180deg, color-mix(in srgb, var(--character-panel) 88%, #0a1018), #081018);
    color: #f2f6fb;
    cursor: pointer;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform-origin: center center;
    transform:
        translateX(calc(var(--coverflow-offset, 0) * -20px))
        rotateY(calc(var(--coverflow-offset, 0) * -30deg))
        translateY(calc(var(--coverflow-distance, 0) * 14px))
        scale(calc(1 - (var(--coverflow-distance, 0) * 0.12)));
    opacity: calc(1 - (var(--coverflow-distance, 0) * 0.34));
    filter: brightness(calc(1.04 - (var(--coverflow-distance, 0) * 0.12))) saturate(calc(1.04 - (var(--coverflow-distance, 0) * 0.18)));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease, filter 0.22s ease;
}

.character-card:hover {
    border-color: var(--character-accent);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.28),
        0 0 0 1px color-mix(in srgb, var(--character-accent) 16%, transparent);
}

.character-card.is-selected {
    outline: 2px solid var(--character-accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 22px rgba(0, 0, 0, 0.28);
}

.character-card.is-centered {
    z-index: 3;
    opacity: 1;
    filter: brightness(1.06) saturate(1.06);
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.character-card.is-selected.is-centered {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 26px 56px rgba(0, 0, 0, 0.34);
}

.character-card:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.character-role,
.character-summary,
.character-rating-label,
.room-roster-character,
.team-member-character {
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.character-role {
    color: color-mix(in srgb, var(--character-accent) 70%, #ffffff);
}

.character-name {
    font-size: 17px;
    letter-spacing: 1px;
}

.character-preview {
    display: block;
    width: 100%;
    height: 130px;
    margin: 2px 0 2px;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(10, 18, 26, 0.22), rgba(8, 12, 18, 0.82));
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.character-preview-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.character-summary {
    color: #d6e2ef;
}

.character-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--character-accent) 60%, #ffffff);
    color: color-mix(in srgb, var(--character-accent) 80%, #ffffff);
    font-size: 10px;
    letter-spacing: 1px;
}

.character-ratings {
    display: grid;
    gap: 4px;
    margin-top: 4px;
    color: #c8d7e6;
}

.loadout-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.loadout-slot {
    display: grid;
    gap: 3px;
    padding: 8px 10px 8px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid rgba(117, 145, 171, 0.35);
    background: linear-gradient(180deg, rgba(12, 18, 25, 0.92), rgba(8, 12, 18, 0.98));
    color: #edf3fa;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.loadout-slot:hover {
    transform: translateY(-1px);
    border-color: #93b4d2;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

.loadout-slot:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.loadout-slot.is-empty {
    border-style: dashed;
    color: #92a9bd;
}

.loadout-slot.is-active {
    border-color: #d6c26b;
    box-shadow:
        0 0 0 1px rgba(214, 194, 107, 0.18),
        0 14px 24px rgba(0, 0, 0, 0.22);
}

.loadout-slot.is-locked {
    opacity: 0.6;
}

.loadout-slot-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9eb5ca;
}

.loadout-slot-state {
    font-size: 11px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #d7c889;
}

.loadout-slot.is-empty .loadout-slot-state {
    color: #a9bccd;
}

.loadout-slot.is-locked .loadout-slot-state {
    color: #788c9d;
}

.loadout-slot-name {
    font-size: 15px;
}

.loadout-slot-meta {
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #c4d3e1;
}

.loadout-slot-preview {
    display: block;
    width: 100%;
    height: 88px;
    margin: 2px 0 2px;
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(84, 118, 156, 0.26), rgba(18, 30, 44, 0.78));
    border: 1px solid rgba(190, 220, 255, 0.12);
    box-shadow: inset 0 0 24px rgba(126, 176, 223, 0.08);
}

.loadout-status {
    margin: 6px 0 0;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #89d69a;
}

.loadout-status.is-warning {
    color: #d6be7a;
}

.weapon-pool-shell {
    position: relative;
    margin-top: 6px;
}

.weapon-pool-viewport {
    overflow-x: auto;
    padding: 8px 78px 12px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.72) 12%, #000 20%, #000 80%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
}

.weapon-pool-viewport::-webkit-scrollbar {
    display: none;
}

.weapon-pool {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: max-content;
    min-width: 100%;
    padding: 4px 0;
    perspective: 1600px;
}

.weapon-pool-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 38px;
    height: 68px;
    border-radius: 999px;
    border: 1px solid rgba(171, 196, 222, 0.24);
    background:
        linear-gradient(180deg, rgba(16, 24, 34, 0.9), rgba(6, 10, 16, 0.95));
    color: #edf3fa;
    font-size: 28px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.weapon-pool-nav:hover {
    transform: translateY(-50%) scale(1.03);
    border-color: rgba(217, 231, 248, 0.46);
    background:
        linear-gradient(180deg, rgba(28, 42, 58, 0.94), rgba(10, 16, 25, 0.98));
}

.weapon-pool-nav:disabled {
    opacity: 0.38;
    cursor: default;
    transform: translateY(-50%);
}

.weapon-pool-nav-prev {
    left: 10px;
}

.weapon-pool-nav-next {
    right: 10px;
}

.weapon-pool-card {
    display: grid;
    gap: 4px;
    flex: 0 0 min(310px, 58vw);
    min-height: 100%;
    padding: 10px 12px 12px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid rgba(103, 126, 149, 0.34);
    background: linear-gradient(180deg, rgba(11, 16, 22, 0.94), rgba(7, 10, 14, 0.98));
    color: #edf2f8;
    cursor: pointer;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform-origin: center center;
    transform:
        translateX(calc(var(--coverflow-offset, 0) * -22px))
        rotateY(calc(var(--coverflow-offset, 0) * -34deg))
        translateY(calc(var(--coverflow-distance, 0) * 18px))
        scale(calc(1 - (var(--coverflow-distance, 0) * 0.16)));
    opacity: calc(1 - (var(--coverflow-distance, 0) * 0.4));
    filter: brightness(calc(1.04 - (var(--coverflow-distance, 0) * 0.14))) saturate(calc(1.04 - (var(--coverflow-distance, 0) * 0.2)));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
}

.weapon-pool-card:hover {
    border-color: #8caecb;
    box-shadow:
        0 22px 40px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(187, 213, 236, 0.08);
}

.weapon-pool-card.is-selected {
    border-color: #d6c26b;
    background:
        radial-gradient(circle at top right, rgba(214, 194, 107, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(15, 20, 26, 0.96), rgba(8, 11, 15, 0.99));
    box-shadow: 0 0 0 1px rgba(214, 194, 107, 0.16);
}

.weapon-pool-card.is-centered {
    z-index: 3;
    opacity: 1;
    filter: brightness(1.06) saturate(1.06);
    box-shadow:
        0 26px 56px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(223, 235, 248, 0.08);
}

.weapon-pool-card.is-selected.is-centered {
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(214, 194, 107, 0.26);
}

.weapon-pool-card.is-active-slot {
    box-shadow:
        0 0 0 1px rgba(214, 194, 107, 0.22),
        0 22px 42px rgba(0, 0, 0, 0.3);
}

.weapon-pool-card:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.weapon-pool-role,
.weapon-pool-summary,
.weapon-pool-rating-label {
    font-size: 12px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.weapon-pool-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.weapon-pool-role {
    color: #d6c26b;
}

.weapon-pool-slot-indicator {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(166, 188, 208, 0.24);
    background: rgba(255, 255, 255, 0.05);
    color: #b7cadb;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.weapon-pool-slot-indicator.is-active {
    border-color: rgba(214, 194, 107, 0.4);
    background: rgba(214, 194, 107, 0.12);
    color: #ebd994;
}

.weapon-pool-name {
    font-size: 15px;
}

.weapon-pool-preview {
    display: block;
    width: 100%;
    height: 148px;
    margin: 4px 0 2px;
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.22), transparent 38%),
        linear-gradient(180deg, rgba(92, 126, 166, 0.24), rgba(20, 32, 46, 0.78));
    border: 1px solid rgba(196, 224, 255, 0.12);
    box-shadow: inset 0 0 28px rgba(120, 164, 214, 0.1);
}

.weapon-pool-summary {
    color: #d5e3ef;
}

.weapon-pool-ratings {
    display: grid;
    gap: 4px;
}

.weapon-pool-rating-row {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 8px;
    align-items: center;
}

.weapon-pool-rating-label {
    color: #9eb3c6;
}

.weapon-pool-rating-meter {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

.weapon-pool-segment {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.weapon-pool-segment.is-filled {
    background: linear-gradient(90deg, #d4c47a, #e8d9a2);
}

.weapon-preview-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.weapon-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.16) saturate(1.12);
}

.character-rating-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 10px;
}

.character-rating-label {
    color: #b7cadf;
}

.character-rating-meter {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.character-rating-segment {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.character-rating-segment.is-filled {
    background: linear-gradient(90deg, color-mix(in srgb, var(--character-accent) 68%, #ffffff), var(--character-accent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--character-accent) 35%, transparent);
}

.room-roster-main {
    display: grid;
    gap: 3px;
}

.weapon-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.weapon-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(214, 194, 107, 0.12);
    border: 1px solid rgba(214, 194, 107, 0.28);
    color: #ebd994;
    font-size: 10px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.room-roster-character {
    color: #9fc0dd;
}

.team-member-character {
    margin-top: 6px;
    color: #9ec2de;
}

.stage-btn,
#create-room-btn,
#join-room-btn,
#ready-btn,
#start-match-btn,
.mode-btn,
#play-btn,
#restart-btn {
    margin-top: 12px;
    padding: 10px 18px;
    font-size: 15px;
    font-family: inherit;
    background-color: #aa0000;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.stage-btn {
    margin-top: 0;
    min-width: 112px;
    background-color: rgba(30, 60, 30, 0.9);
    border: 1px solid #4d6a43;
    font-size: 14px;
}

.mode-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.mode-btn,
.secondary-btn {
    margin-top: 0;
    background-color: rgba(28, 38, 52, 0.95);
    border: 1px solid #56677f;
    font-size: 14px;
    min-width: 112px;
}

.mode-btn.is-selected {
    background: #d9c46f;
    color: #111;
    border-color: #f2e6a7;
}

#play-btn {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient(180deg, #cc1111, #991111);
    border: 2px solid #ff4444;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(200, 0, 0, 0.3);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

#play-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #ee2222, #bb1111);
    box-shadow: 0 6px 24px rgba(255, 40, 40, 0.4);
    transform: translateY(-1px);
}

#play-btn:disabled {
    background: rgba(28, 38, 52, 0.95);
    border-color: #56677f;
    box-shadow: none;
}

.leave-btn {
    margin-top: 0;
    padding: 10px 16px;
    font-size: 13px;
    font-family: inherit;
    background: transparent;
    color: #8a9eb5;
    border: 1px solid rgba(138, 158, 181, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.leave-btn:hover {
    color: #ff8888;
    border-color: rgba(255, 136, 136, 0.5);
    background: rgba(255, 80, 80, 0.08);
}

.controls-hint {
    margin: 10px 0 2px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.controls-hint p {
    font-size: 12px;
    margin: 2px 0;
    color: #b0bcc8;
}

.stage-host-hint {
    margin: 10px 0 0;
    font-size: 12px;
    letter-spacing: 0.8px;
    color: #c5af69;
    text-align: center;
}

.online-panel {
    margin: 8px auto 0;
    max-width: 540px;
    padding: 12px;
    border: 1px solid rgba(123, 145, 170, 0.45);
    border-radius: 12px;
    background: rgba(10, 16, 24, 0.9);
}

.menu-input {
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #5b6d82;
    background: rgba(6, 12, 18, 0.92);
    color: #f5f7fa;
    font-size: 14px;
    font-family: inherit;
}

.online-actions,
.room-actions,
.join-room-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.online-actions {
    margin-top: 12px;
    flex-wrap: wrap;
}

.join-room-row {
    flex: 1;
}

.join-room-row .menu-input {
    margin-top: 0;
    min-width: 180px;
}

.room-panel {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(123, 145, 170, 0.3);
}

.room-meta {
    display: grid;
    gap: 12px;
}

.room-code-block,
.room-status-block {
    border-radius: 12px;
    border: 1px solid rgba(123, 145, 170, 0.28);
    background: rgba(255, 255, 255, 0.04);
}

.room-code-block {
    padding: 14px 16px 16px;
    text-align: center;
    background: linear-gradient(180deg, rgba(33, 56, 82, 0.9), rgba(12, 21, 31, 0.96));
    border-color: rgba(145, 192, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.room-code-label,
.room-status-label {
    display: block;
    color: #9bb1c8;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.room-code-value {
    display: block;
    margin-top: 8px;
    color: #f7fbff;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1;
    letter-spacing: 0.22em;
    font-family: "Courier New", Courier, monospace;
    text-shadow: 0 0 14px rgba(123, 188, 255, 0.2);
}

.room-status-block {
    padding: 10px 12px;
    color: #c7d0db;
}

.network-status-value {
    display: block;
    margin-top: 6px;
    color: #eef5fb;
    font-size: 14px;
}

.room-roster {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}

.room-roster-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
}

.room-roster-item strong {
    color: #f2f6fb;
}

.room-roster-state {
    color: #7fd18d;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
}

.room-roster-state.is-waiting {
    color: #c5af69;
}

.stage-btn:hover,
#create-room-btn:hover,
#join-room-btn:hover,
#ready-btn:hover,
#start-match-btn:hover,
.mode-btn:hover,
#restart-btn:hover {
    background-color: #ff3333;
}

.stage-btn:hover {
    background-color: rgba(66, 104, 55, 0.95);
}

.secondary-btn:hover,
.mode-btn:hover {
    background-color: rgba(74, 91, 118, 0.96);
}

.stage-btn.is-selected {
    background-color: #d6c24f;
    color: #111;
    border-color: #f3e18a;
}

.stage-btn:disabled,
.secondary-btn:disabled,
.mode-btn:disabled,
#play-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Damage feedback */
#damage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 0, 0, 0);
    pointer-events: none;
    transition: background-color 0.1s ease-out;
    z-index: 5;
}

.taking-damage {
    background-color: rgba(255, 0, 0, 0.3) !important;
}

#dash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

#dash-overlay.dash-active {
    opacity: 1;
    background: radial-gradient(circle at center, transparent 40%, rgba(255, 255, 255, 0.15) 70%, rgba(200, 230, 255, 0.4) 100%);
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.2);
}

#team-panel {
    position: absolute;
    top: 22px;
    left: 20px;
    min-width: 220px;
    display: grid;
    gap: 8px;
    z-index: 16;
}

.team-member {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(6, 10, 15, 0.72);
    border: 1px solid rgba(120, 170, 210, 0.22);
    backdrop-filter: blur(6px);
}

.team-member-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    text-transform: uppercase;
    color: #dce4ec;
}

.team-member-status {
    color: #88d18c;
    font-size: 11px;
}

.team-member-status.is-downed {
    color: #ff9d57;
}

.team-member-status.is-spectating,
.team-member-status.is-disconnected {
    color: #c46d6d;
}

.team-health-bar {
    margin-top: 8px;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.team-health-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef5555, #f4ca63);
}

#revive-container {
    position: absolute;
    left: 50%;
    bottom: 110px;
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 40px));
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(10, 14, 18, 0.88);
    border: 1px solid rgba(126, 176, 213, 0.3);
    text-align: center;
    z-index: 18;
}

#revive-label {
    display: block;
    margin-bottom: 10px;
    color: #dfeaf3;
    font-size: 14px;
    letter-spacing: 1px;
}

#revive-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

#revive-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #6fcb8c, #d6d97e);
}

@media (max-height: 900px) {
    .instruction-content {
        padding: 14px 16px 12px;
    }

    h1 {
        font-size: 28px;
        margin-bottom: 6px;
    }

    #instructions p {
        font-size: 13px;
        margin: 3px 0;
    }

    .stage-btn,
    .mode-btn,
    .secondary-btn,
    #restart-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    #play-btn {
        padding: 10px 24px;
        font-size: 14px;
    }

    .controls-hint {
        margin: 6px 0 2px;
        padding: 6px 10px;
    }

    .controls-hint p {
        font-size: 11px;
        margin: 1px 0;
    }

    .stage-card-preview {
        height: 90px;
    }

    .character-preview {
        height: 100px;
    }

    .loadout-slot-preview {
        height: 68px;
    }

    .weapon-pool-preview {
        height: 110px;
    }

    .online-panel {
        padding: 10px;
    }
}

@media (max-width: 760px) {
    .loadout-slots {
        grid-template-columns: 1fr;
    }

    .stage-flow-viewport {
        padding: 10px 44px 14px;
        mask-image: none;
    }

    .stage-card.stage-btn {
        flex-basis: min(72vw, 260px);
    }

    .stage-card-preview {
        height: 100px;
    }

    .stage-flow-nav {
        width: 34px;
        height: 64px;
        font-size: 22px;
    }

    .stage-flow-nav-prev {
        left: 2px;
    }

    .stage-flow-nav-next {
        right: 2px;
    }

    .character-flow-viewport {
        padding: 10px 12px 18px;
        mask-image: none;
    }

    .character-card {
        flex-basis: min(76vw, 260px);
    }

    .character-flow-nav {
        width: 36px;
        height: 68px;
        font-size: 22px;
    }

    .character-flow-nav-prev {
        left: 2px;
    }

    .character-flow-nav-next {
        right: 2px;
    }

    .weapon-pool-viewport {
        padding: 12px 46px 18px;
        mask-image: none;
    }

    .weapon-pool-card {
        flex-basis: min(68vw, 270px);
    }

    .weapon-pool-preview {
        height: 128px;
    }

    .weapon-pool-nav {
        width: 38px;
        height: 72px;
        font-size: 24px;
    }

    .weapon-pool-nav-prev {
        left: 4px;
    }

    .weapon-pool-nav-next {
        right: 4px;
    }
}

/* Hit Marker */
#hit-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out, transform 0.1s ease-out;
}

#hit-marker::before,
#hit-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    transform-origin: center;
}

#hit-marker::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#hit-marker::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#hit-marker.hit-active {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2);
    transition: none; /* Snap to active */
}

#hit-marker.crit-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
    transition: none; /* Snap to active */
}

#hit-marker.crit-active::before,
#hit-marker.crit-active::after {
    background-color: #ff3333;
    box-shadow: 0 0 8px rgba(255, 50, 50, 0.8);
}

#hit-marker.hit-kill {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.6);
    transition: none; /* Snap to active */
}

#hit-marker.hit-kill::before,
#hit-marker.hit-kill::after {
    background-color: #ff1111;
    box-shadow: 0 0 12px rgba(255, 10, 10, 1.0);
    width: 30px;
}