/* ═══════════════════════════════════════════════════════════════
   VX PIXEL GAME UI — MYSTIC ARCANE EDITION
   Todas as classes originais preservadas · Visual totalmente novo
   Tema: Roxo Místico · Pixel Art Profissional · Dark RPG
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap');

/* ─── TOKENS ARCANOS ─────────────────────────────────────────── */
:root {
    /* Void palette */
    --vx-void:        #04010c;
    --vx-abyss:       #080215;
    --vx-deep:        #0f0523;
    --vx-shadow:      #180a36;
    --vx-mid:         #27104e;
    --vx-core:        #3d1878;
    --vx-bright:      #6230c4;
    --vx-glow:        #9b5fff;
    --vx-spark:       #c99aff;
    --vx-mist:        #e8d8ff;

    /* Accent runes */
    --vx-cyan:        #3de8ff;
    --vx-cyan-dim:    #1a6e7a;
    --vx-gold:        #ffd166;
    --vx-gold-dim:    #6b4800;
    --vx-ember:       #ff6b35;
    --vx-red:         #ff3355;
    --vx-green:       #3dffaa;
    --vx-pink:        #ff4dcc;

    /* UI surface tokens */
    --vx-panel:       rgba(15, 5, 35, 0.94);
    --vx-panel-edge:  rgba(98, 48, 196, 0.55);
    --vx-border-px:   rgba(155, 95, 255, 0.35);
    --vx-border-gold: rgba(255, 209, 102, 0.6);
    --vx-inset-dark:  rgba(4, 1, 12, 0.55);
    --vx-inset-light: rgba(155, 95, 255, 0.18);

    /* Glow effects */
    --vx-glow-sm:     0 0 8px rgba(155, 95, 255, 0.5);
    --vx-glow-md:     0 0 20px rgba(155, 95, 255, 0.4), 0 0 40px rgba(155, 95, 255, 0.2);
    --vx-glow-lg:     0 0 40px rgba(98, 48, 196, 0.6), 0 0 80px rgba(98, 48, 196, 0.25);
    --vx-glow-gold:   0 0 16px rgba(255, 209, 102, 0.5), 0 0 32px rgba(255, 209, 102, 0.2);
    --vx-glow-cyan:   0 0 16px rgba(61, 232, 255, 0.5), 0 0 32px rgba(61, 232, 255, 0.2);

    /* Pixel border frames */
    --vx-px-border-w: 4px;
    --vx-px-border-h: 4px;

    /* Typography */
    --vx-font-pixel:  'Press Start 2P', 'VT323', monospace;
    --vx-font-hud:    'VT323', 'Press Start 2P', monospace;

    /* Timing */
    --vx-ease:        0.15s steps(3);
    --vx-ease-slow:   0.4s steps(8);
}

/* ─── RESET PIXEL ────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    image-rendering: pixelated;
}

/* ─── CURSOR PERSONALIZADO ───────────────────────────────────── */
body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23c99aff'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%239b5fff'/%3E%3Crect x='8' y='8' width='4' height='4' fill='%236230c4'/%3E%3C/svg%3E") 0 0, crosshair;
}

/* ══════════════════════════════════════════════════════════════
   LOBBY WRAPPER
══════════════════════════════════════════════════════════════ */
.vx-game-lobby {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
    background:
        radial-gradient(ellipse at 20% 0%,   rgba(98, 48, 196, 0.22) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 100%, rgba(61, 232, 255, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%,  rgba(155, 95, 255, 0.06) 0%, transparent 60%),
        var(--vx-void);

    /* Scanlines sutis */
    background-image:
        radial-gradient(ellipse at 20% 0%,   rgba(98, 48, 196, 0.22) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 100%, rgba(61, 232, 255, 0.1) 0%, transparent 40%),
        repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.12) 3px,
            rgba(0,0,0,0.12) 4px
        );
}

/* ══════════════════════════════════════════════════════════════
   FRAME PRINCIPAL — borda estilo console retrô
══════════════════════════════════════════════════════════════ */
.vx-game-frame {
    width: min(100%, 1280px);
    margin: 0 auto;

    /* Pixel-border de 4 camadas */
    border: 4px solid var(--vx-glow);
    outline: 4px solid var(--vx-mid);
    outline-offset: 4px;

    background: var(--vx-abyss);
    box-shadow:
        0 0 0 8px var(--vx-abyss),
        0 0 0 12px var(--vx-core),
        var(--vx-glow-lg),
        0 32px 64px rgba(0,0,0,0.7);
    position: relative;
}

/* Cantos brilhantes do frame */
.vx-game-frame::before,
.vx-game-frame::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    background: var(--vx-gold);
    box-shadow: var(--vx-glow-gold);
    z-index: 10;
}
.vx-game-frame::before { top: -10px; left: -10px; }
.vx-game-frame::after  { top: -10px; right: -10px; }

/* ══════════════════════════════════════════════════════════════
   TOPBAR — barra superior arcana
══════════════════════════════════════════════════════════════ */
.vx-classic-topbar {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    min-height: 58px;
    padding: 0 14px;

    background:
        linear-gradient(90deg, rgba(155,95,255,0.12), transparent, rgba(61,232,255,0.08)),
        linear-gradient(180deg, var(--vx-shadow), var(--vx-deep));

    border-bottom: 4px solid var(--vx-core);
    box-shadow:
        0 4px 0 var(--vx-mid),
        inset 0 1px 0 rgba(155,95,255,0.25),
        0 0 40px rgba(98,48,196,0.3);

    position: relative;
    z-index: 5;
}

/* Linha de brilho no topo da topbar */
.vx-classic-topbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vx-glow), var(--vx-cyan), var(--vx-glow), transparent);
    animation: topbar-scan 4s linear infinite;
}

@keyframes topbar-scan {
    0%   { opacity: 0.4; }
    50%  { opacity: 1; }
    100% { opacity: 0.4; }
}

.vx-top-brand {
    justify-self: center;
    font-family: var(--vx-font-pixel);
    font-size: 0.75rem;
    color: var(--vx-spark);
    letter-spacing: 0.1em;
    text-shadow:
        0 0 12px rgba(201,154,255,0.8),
        0 0 24px rgba(155,95,255,0.5),
        2px 2px 0 var(--vx-deep);
    animation: brand-pulse 3s ease-in-out infinite;
}

@keyframes brand-pulse {
    0%, 100% { text-shadow: 0 0 12px rgba(201,154,255,0.8), 2px 2px 0 var(--vx-deep); }
    50%       { text-shadow: 0 0 24px rgba(201,154,255,1), 0 0 48px rgba(155,95,255,0.7), 2px 2px 0 var(--vx-deep); }
}

.vx-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vx-coin-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vx-gold);
    font-family: var(--vx-font-pixel);
    font-size: clamp(0.6rem, 2vw, 0.85rem);
    text-shadow: 0 0 10px rgba(255,209,102,0.7), 1px 1px 0 var(--vx-deep);

    padding: 6px 10px;
    background: rgba(107,72,0,0.35);
    border: 2px solid rgba(255,209,102,0.35);
    box-shadow: inset 0 0 12px rgba(255,209,102,0.1), var(--vx-glow-gold);
}

.vx-coin-box img,
.vx-icon-button img,
.vx-menu-button img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(155,95,255,0.6));
}

.vx-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 2px solid var(--vx-border-px);
    background: var(--vx-inset-dark);
    cursor: pointer;
    transition: background var(--vx-ease), border-color var(--vx-ease), box-shadow var(--vx-ease);
    box-shadow: inset -2px -2px 0 rgba(0,0,0,0.5), inset 2px 2px 0 rgba(155,95,255,0.2);
}

.vx-icon-button:hover {
    background: var(--vx-mid);
    border-color: var(--vx-glow);
    box-shadow: var(--vx-glow-sm), inset -2px -2px 0 rgba(0,0,0,0.5);
}

.vx-icon-button.is-back {
    justify-self: start;
}

/* ══════════════════════════════════════════════════════════════
   BOARD — tabuleiro principal
══════════════════════════════════════════════════════════════ */
.vx-classic-board {
    position: relative;
    height: clamp(520px, calc(100vh - 112px), 820px);
    overflow: hidden;

    background: var(--vx-abyss);
}

.vx-board-pattern {
    position: absolute;
    inset: 0;
    background:
        /* Grid pixel */
        linear-gradient(90deg, rgba(155,95,255,0.06) 1px, transparent 1px),
        linear-gradient(0deg,  rgba(155,95,255,0.06) 1px, transparent 1px),
        /* Gradiente base */
        radial-gradient(ellipse at 30% 20%, rgba(98,48,196,0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(61,232,255,0.12) 0%, transparent 40%),
        linear-gradient(180deg, var(--vx-deep) 0%, var(--vx-abyss) 60%, var(--vx-void) 100%);
    background-size:
        32px 32px,
        32px 32px,
        100% 100%,
        100% 100%,
        100% 100%;
    opacity: 1;

    /* Vinheta mística */
    mask-image: none;
}

/* Partículas de background via CSS */
.vx-board-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 15% 25%, rgba(155,95,255,0.6) 0%, transparent 100%),
        radial-gradient(2px 2px at 35% 70%, rgba(61,232,255,0.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 55% 15%, rgba(255,209,102,0.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 75% 55%, rgba(201,154,255,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 90% 35%, rgba(61,232,255,0.3) 0%, transparent 100%),
        radial-gradient(3px 3px at 25% 85%, rgba(155,95,255,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 65% 90%, rgba(255,209,102,0.3) 0%, transparent 100%),
        radial-gradient(2px 2px at 10% 60%, rgba(201,154,255,0.4) 0%, transparent 100%);
    animation: stars-twinkle 6s ease-in-out infinite alternate;
}

@keyframes stars-twinkle {
    0%   { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   SCREENS
══════════════════════════════════════════════════════════════ */
.vx-hub-screen,
.vx-hunt-screen {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.vx-hub-screen[hidden],
.vx-hunt-screen[hidden] {
    display: none !important;
}

.vx-hub-screen {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 26px;
    padding: 42px 26px 118px;
}

/* ══════════════════════════════════════════════════════════════
   MODE GRID & CARDS — cards de seleção de modo
══════════════════════════════════════════════════════════════ */
.vx-mode-grid {
    width: 100%;
    max-width: 1040px;
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 280px));
    justify-content: center;
    gap: 44px;
}

.vx-mode-card {
    position: relative;
    display: grid;
    gap: 0;
    padding: 0;

    /* Borda pixel de 4 camadas */
    border: 4px solid var(--vx-glow);
    outline: 4px solid var(--vx-core);
    outline-offset: -4px;

    background: var(--vx-deep);
    box-shadow:
        0 0 0 8px var(--vx-abyss),
        0 8px 0 var(--vx-mid),
        0 12px 0 var(--vx-abyss),
        var(--vx-glow-md),
        0 24px 48px rgba(0,0,0,0.6);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--vx-ease), box-shadow var(--vx-ease);
}

.vx-mode-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--vx-glow), var(--vx-cyan), var(--vx-glow), transparent);
    z-index: 3;
    animation: card-shimmer 3s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.vx-mode-card:hover::before { opacity: 1; }

.vx-mode-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 8px var(--vx-abyss),
        0 14px 0 var(--vx-mid),
        0 18px 0 var(--vx-abyss),
        0 0 60px rgba(155,95,255,0.5),
        0 0 120px rgba(155,95,255,0.2),
        0 32px 64px rgba(0,0,0,0.7);
}

@keyframes card-shimmer {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1; }
}

.vx-mode-card.is-locked {
    cursor: default;
    filter: saturate(0.3) brightness(0.6);
}

.vx-mode-card strong {
    display: grid;
    place-items: center;
    min-height: 64px;
    background:
        linear-gradient(180deg, var(--vx-shadow), var(--vx-deep));
    border-bottom: 4px solid var(--vx-core);
    color: var(--vx-spark);
    font-family: var(--vx-font-pixel);
    font-size: clamp(0.65rem, 2vw, 0.85rem);
    letter-spacing: 0.08em;
    text-shadow:
        0 0 16px rgba(201,154,255,0.8),
        2px 2px 0 var(--vx-void);
    padding: 0 8px;
    text-align: center;
}

/* ─── ARTS DAS CARDS ─── */
.vx-mode-art {
    position: relative;
    min-height: 360px;
    overflow: hidden;
}

.vx-mode-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08), transparent 30%),
        linear-gradient(180deg, transparent 50%, rgba(4,1,12,0.7) 100%);
}

/* Grid pixel no interior das arts */
.vx-mode-art::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(155,95,255,0.04) 1px, transparent 1px),
        linear-gradient(0deg,  rgba(155,95,255,0.04) 1px, transparent 1px);
    background-size: 16px 16px;
}

.vx-mode-art.is-adventure {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(61,232,255,0.2) 0%, transparent 60%),
        linear-gradient(180deg, #0a2540 0%, #061428 50%, #020b16 100%);
}

.vx-mode-art.is-hunt {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(155,95,255,0.3) 0%, transparent 55%),
        linear-gradient(180deg, #1a0a40 0%, #0d052a 50%, #060318 100%);
}

.vx-mode-art.is-battle {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,51,85,0.25) 0%, transparent 55%),
        linear-gradient(180deg, #2a0a14 0%, #180610 50%, #0a0206 100%);
}

.vx-mode-art img:first-child {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 210px;
    transform: translateX(-50%);
    z-index: 2;
    filter:
        drop-shadow(0 0 16px rgba(155,95,255,0.6))
        drop-shadow(0 0 40px rgba(155,95,255,0.3));
}

.vx-mode-art .is-overlay {
    position: absolute;
    right: 16px;
    bottom: 18px;
    width: 76px;
    z-index: 3;
    filter: drop-shadow(0 0 8px rgba(255,209,102,0.5));
}

/* ─── LOCK BADGE ─── */
.vx-lock-badge {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    padding: 10px 18px;

    background: rgba(4,1,12,0.92);
    color: var(--vx-gold);
    border: 4px solid var(--vx-gold);
    box-shadow:
        inset -2px -2px 0 rgba(0,0,0,0.6),
        inset 2px 2px 0 rgba(255,209,102,0.2),
        var(--vx-glow-gold);

    font-family: var(--vx-font-pixel);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-shadow: 0 0 10px rgba(255,209,102,0.8);
    z-index: 4;
}

.vx-lock-badge.small {
    position: static;
    transform: none;
    justify-self: start;
    padding: 4px 8px;
    font-size: 0.5rem;
    border-width: 2px;
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   BOTTOM MENU — menu de ícones inferior
══════════════════════════════════════════════════════════════ */
.vx-bottom-menu {
    position: absolute;
    right: 38px;
    bottom: 18px;
    display: flex;
    gap: 22px;
    align-items: flex-end;
    z-index: 2;
}

.vx-menu-button {
    display: grid;
    gap: 6px;
    justify-items: center;
    border: 2px solid var(--vx-border-px);
    padding: 10px 8px 8px;
    background:
        linear-gradient(180deg, var(--vx-shadow), var(--vx-deep));
    color: var(--vx-spark);
    font-family: var(--vx-font-pixel);
    font-size: 0.48rem;
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(201,154,255,0.7), 1px 1px 0 var(--vx-void);
    cursor: pointer;
    box-shadow:
        inset -3px -3px 0 rgba(0,0,0,0.5),
        inset 3px 3px 0 rgba(155,95,255,0.2),
        0 6px 0 var(--vx-mid),
        0 8px 0 var(--vx-abyss),
        var(--vx-glow-sm);
    transition: transform var(--vx-ease), box-shadow var(--vx-ease), color var(--vx-ease);
}

.vx-menu-button:hover {
    color: var(--vx-gold);
    background:
        linear-gradient(180deg, var(--vx-mid), var(--vx-shadow));
    box-shadow:
        inset -3px -3px 0 rgba(0,0,0,0.5),
        inset 3px 3px 0 rgba(155,95,255,0.3),
        0 6px 0 var(--vx-core),
        0 8px 0 var(--vx-abyss),
        var(--vx-glow-gold);
    transform: translateY(-2px);
}

.vx-menu-button:active {
    transform: translateY(3px);
    box-shadow:
        inset -1px -1px 0 rgba(0,0,0,0.5),
        inset 1px 1px 0 rgba(155,95,255,0.2),
        0 3px 0 var(--vx-mid),
        0 4px 0 var(--vx-abyss);
}

.vx-menu-button img {
    width: 54px;
    height: 54px;
    filter: drop-shadow(0 0 8px rgba(155,95,255,0.5));
    transition: filter var(--vx-ease);
}
.vx-menu-button:hover img {
    filter: drop-shadow(0 0 12px rgba(255,209,102,0.6));
}

/* ══════════════════════════════════════════════════════════════
   HUNT SCREEN
══════════════════════════════════════════════════════════════ */
.vx-hunt-screen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
}

.vx-hunt-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.vx-hunt-mapname {
    padding: 8px 14px;
    background:
        linear-gradient(135deg, var(--vx-deep), var(--vx-shadow));
    border: 3px solid var(--vx-border-px);
    box-shadow:
        inset -2px -2px 0 rgba(0,0,0,0.5),
        inset 2px 2px 0 rgba(155,95,255,0.15),
        var(--vx-glow-sm);
    color: var(--vx-spark);
    font-family: var(--vx-font-pixel);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-shadow: 0 0 10px rgba(201,154,255,0.6);
}

.vx-hunt-toolbar-actions {
    display: flex;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════════
   GAME CANVAS SHELL
══════════════════════════════════════════════════════════════ */
.game-canvas-shell {
    min-height: 0;
    height: 100%;
    display: grid;
    place-items: center;
    border: 4px solid var(--vx-core);
    outline: 4px solid var(--vx-mid);
    outline-offset: 4px;

    background:
        linear-gradient(90deg, rgba(155,95,255,0.04) 1px, transparent 1px),
        linear-gradient(0deg,  rgba(155,95,255,0.04) 1px, transparent 1px),
        linear-gradient(180deg, #0d1e30 0%, #080f18 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
    overflow: hidden;
    box-shadow:
        inset 0 0 60px rgba(4,1,12,0.8),
        var(--vx-glow-sm);
}

.game-canvas-shell.is-classic {
    min-height: 0;
}

.game-canvas-shell canvas {
    max-width: 100%;
    max-height: 100%;
    box-shadow:
        0 0 0 4px rgba(0,0,0,0.5),
        var(--vx-glow-sm);
}

/* ══════════════════════════════════════════════════════════════
   MODAL — janela de diálogo arcana
══════════════════════════════════════════════════════════════ */
.vx-game-modal[hidden] {
    display: none;
}

.vx-game-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 16px;
}

.vx-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(98,48,196,0.2) 0%, transparent 60%),
        rgba(4,1,12,0.86);
    backdrop-filter: blur(3px);
}

.vx-modal-window {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);

    /* Frame pixel de 4 camadas */
    border: 4px solid var(--vx-glow);
    outline: 4px solid var(--vx-core);
    outline-offset: -4px;

    background: var(--vx-deep);
    box-shadow:
        0 0 0 8px var(--vx-abyss),
        0 0 0 12px var(--vx-mid),
        var(--vx-glow-lg),
        0 40px 80px rgba(0,0,0,0.8);
    animation: modal-appear 0.2s steps(4) forwards;
}

/* Cantos dourados do modal */
.vx-modal-window::before,
.vx-modal-window::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    background: var(--vx-gold);
    box-shadow: var(--vx-glow-gold);
    z-index: 5;
}
.vx-modal-window::before { top: -8px;  left: -8px; }
.vx-modal-window::after  { top: -8px;  right: -8px; }

@keyframes modal-appear {
    0%   { transform: scale(0.85); opacity: 0; }
    33%  { transform: scale(1.02); opacity: 0.5; }
    66%  { transform: scale(0.99); opacity: 0.9; }
    100% { transform: scale(1);    opacity: 1; }
}

.vx-modal-window.is-wide {
    width: min(100%, 980px);
}

/* ─── MODAL HEADER ─── */
.vx-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;

    background:
        linear-gradient(90deg, rgba(155,95,255,0.15), transparent 60%),
        linear-gradient(180deg, var(--vx-shadow), var(--vx-deep));
    border-bottom: 4px solid var(--vx-core);
    box-shadow:
        inset 0 1px 0 rgba(155,95,255,0.3),
        0 4px 0 var(--vx-mid);

    position: relative;
    overflow: hidden;
}

/* Barra de scan animada no header */
.vx-modal-head::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(155,95,255,0.12), transparent);
    animation: head-scan 4s linear infinite;
}

@keyframes head-scan {
    0%   { left: -40%; }
    100% { left: 140%; }
}

.vx-modal-head h3 {
    margin: 0;
    font-family: var(--vx-font-pixel);
    font-size: clamp(0.6rem, 2.2vw, 0.85rem);
    color: var(--vx-spark);
    letter-spacing: 0.1em;
    text-shadow:
        0 0 16px rgba(201,154,255,0.8),
        2px 2px 0 var(--vx-void);
}

/* ─── CLOSE BUTTON ─── */
.vx-close-button {
    width: 44px;
    height: 44px;
    border: 3px solid var(--vx-red);
    background:
        linear-gradient(180deg, rgba(255,51,85,0.25), rgba(255,51,85,0.1));
    color: var(--vx-red);
    font-family: var(--vx-font-pixel);
    font-size: 1rem;
    cursor: pointer;
    box-shadow:
        inset -2px -2px 0 rgba(0,0,0,0.6),
        inset 2px 2px 0 rgba(255,51,85,0.3),
        0 0 12px rgba(255,51,85,0.3);
    transition: background var(--vx-ease), box-shadow var(--vx-ease);
    text-shadow: 0 0 8px rgba(255,51,85,0.8);
}

.vx-close-button:hover {
    background:
        linear-gradient(180deg, rgba(255,51,85,0.6), rgba(255,51,85,0.35));
    color: #fff;
    box-shadow:
        inset -2px -2px 0 rgba(0,0,0,0.6),
        inset 2px 2px 0 rgba(255,120,140,0.4),
        0 0 24px rgba(255,51,85,0.6);
}

/* ══════════════════════════════════════════════════════════════
   MODAL GRID & CARDS DE CONTEÚDO
══════════════════════════════════════════════════════════════ */
.vx-modal-grid {
    display: grid;
    gap: 18px;
    padding: 22px;
    background: var(--vx-abyss);
}

.vx-modal-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ─── REWARD / SHOP / HOUSE / HERO CARDS ─── */
.vx-reward-card,
.vx-shop-card,
.vx-house-hud-card,
.vx-hero-detail-panel {
    display: grid;
    gap: 10px;
    padding: 18px;

    background:
        linear-gradient(180deg, var(--vx-shadow), var(--vx-deep));
    border: 3px solid var(--vx-border-px);
    box-shadow:
        inset -3px -3px 0 rgba(0,0,0,0.5),
        inset 3px 3px 0 rgba(155,95,255,0.15),
        var(--vx-glow-sm);
    color: var(--vx-mist);
    position: relative;
    overflow: hidden;
}

/* Reflexo de brilho nos cards */
.vx-reward-card::before,
.vx-shop-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vx-glow), transparent);
    opacity: 0.5;
}

.vx-reward-card img,
.vx-shop-card img {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    object-fit: contain;
    filter:
        drop-shadow(0 0 12px rgba(155,95,255,0.6))
        drop-shadow(0 0 24px rgba(155,95,255,0.3));
}

.vx-reward-card h4,
.vx-shop-card h4,
.vx-house-hud-card h4 {
    margin: 0;
    text-align: center;
    font-family: var(--vx-font-pixel);
    font-size: 0.65rem;
    color: var(--vx-spark);
    text-shadow: 0 0 12px rgba(201,154,255,0.7), 1px 1px 0 var(--vx-void);
    letter-spacing: 0.08em;
}

.vx-reward-card strong,
.vx-shop-card strong {
    text-align: center;
    font-family: var(--vx-font-pixel);
    font-size: 0.65rem;
    color: var(--vx-gold);
    text-shadow: 0 0 10px rgba(255,209,102,0.6);
}

.vx-reward-card small,
.vx-shop-card small,
.vx-house-hud-card small {
    text-align: center;
    color: var(--vx-spark);
    font-family: var(--vx-font-hud);
    font-size: 0.9rem;
    opacity: 0.75;
}

.vx-shop-actions {
    display: flex;
    justify-content: center;
}

/* ─── HOUSE MODAL ─── */
.vx-house-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 22px;
    background: var(--vx-abyss);
}

.vx-house-hud-card img {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    filter: drop-shadow(0 0 10px rgba(155,95,255,0.5));
}

.vx-house-hud-card.is-locked {
    opacity: 0.5;
    filter: saturate(0.2);
}

.vx-house-assign {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════
   HEROES MODAL — roster de heróis
══════════════════════════════════════════════════════════════ */
.vx-heroes-modal-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) 320px;
    gap: 0;
    background: var(--vx-abyss);
    padding: 22px;
    gap: 16px;
}

.vx-hero-roster-list {
    display: grid;
    gap: 8px;
    max-height: 540px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--vx-core) var(--vx-void);
}

.vx-hero-roster-list::-webkit-scrollbar       { width: 6px; }
.vx-hero-roster-list::-webkit-scrollbar-track  { background: var(--vx-void); }
.vx-hero-roster-list::-webkit-scrollbar-thumb  {
    background: var(--vx-core);
    box-shadow: 0 0 8px rgba(155,95,255,0.4);
}

.vx-hero-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;

    border: 3px solid var(--vx-border-px);
    background: linear-gradient(135deg, var(--vx-deep), var(--vx-shadow));
    color: var(--vx-mist);
    cursor: pointer;
    box-shadow:
        inset -2px -2px 0 rgba(0,0,0,0.5),
        inset 2px 2px 0 rgba(155,95,255,0.12);
    transition: border-color var(--vx-ease), background var(--vx-ease), box-shadow var(--vx-ease);
}

.vx-hero-row:hover {
    border-color: var(--vx-glow);
    background: linear-gradient(135deg, var(--vx-mid), var(--vx-shadow));
    box-shadow:
        inset -2px -2px 0 rgba(0,0,0,0.5),
        inset 2px 2px 0 rgba(155,95,255,0.2),
        var(--vx-glow-sm);
}

.vx-hero-row.is-active {
    border-color: var(--vx-cyan);
    background: linear-gradient(135deg, rgba(61,232,255,0.08), var(--vx-deep));
    box-shadow:
        inset -2px -2px 0 rgba(0,0,0,0.5),
        inset 2px 2px 0 rgba(61,232,255,0.2),
        var(--vx-glow-cyan);
}

.vx-hero-row img {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 8px rgba(155,95,255,0.5));
}

.vx-hero-row-copy {
    display: grid;
    gap: 6px;
    text-align: left;
}

.vx-hero-row-copy strong {
    font-family: var(--vx-font-pixel);
    font-size: 0.55rem;
    color: var(--vx-spark);
    text-shadow: 1px 1px 0 var(--vx-void);
    letter-spacing: 0.08em;
}

.vx-hero-status-pill {
    padding: 6px 10px;
    background: var(--vx-shadow);
    border: 2px solid var(--vx-border-px);
    color: var(--vx-spark);
    font-family: var(--vx-font-pixel);
    font-size: 0.45rem;
    letter-spacing: 0.06em;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.5);
}

/* ─── HERO DETAIL PANEL ─── */
.vx-hero-detail-panel {
    align-content: start;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(155,95,255,0.12) 0%, transparent 50%),
        linear-gradient(180deg, var(--vx-shadow), var(--vx-deep));
    color: var(--vx-mist);
}

.vx-hero-detail-panel img {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    filter:
        drop-shadow(0 0 20px rgba(155,95,255,0.7))
        drop-shadow(0 0 40px rgba(155,95,255,0.3));
}

.vx-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    font-family: var(--vx-font-pixel);
    font-size: 0.6rem;
    color: var(--vx-spark);
    text-shadow: 0 0 10px rgba(201,154,255,0.6);
}

.vx-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    font-family: var(--vx-font-pixel);
    font-size: 0.45rem;
}

.vx-detail-stats span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;

    background: rgba(4,1,12,0.5);
    border: 2px solid var(--vx-border-px);
    box-shadow:
        inset -2px -2px 0 rgba(0,0,0,0.4),
        inset 2px 2px 0 rgba(155,95,255,0.1);
    color: var(--vx-spark);
    letter-spacing: 0.06em;
}

.vx-detail-actions {
    display: flex;
    gap: 10px;
}

/* ══════════════════════════════════════════════════════════════
   TOAST — notificação de feedback
══════════════════════════════════════════════════════════════ */
.vx-game-toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 80;
    min-width: 260px;
    padding: 14px 20px;

    border: 3px solid var(--vx-glow);
    outline: 3px solid var(--vx-core);
    outline-offset: -3px;

    background:
        linear-gradient(180deg, var(--vx-shadow), var(--vx-deep));
    color: var(--vx-spark);
    font-family: var(--vx-font-pixel);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-align: center;
    box-shadow:
        0 0 0 6px var(--vx-abyss),
        var(--vx-glow-md),
        0 20px 40px rgba(0,0,0,0.6);
    text-shadow: 0 0 10px rgba(201,154,255,0.7);
    animation: toast-in 0.2s steps(4);
}

.vx-game-toast::before {
    content: '▶ ';
    color: var(--vx-cyan);
    animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@keyframes toast-in {
    0%   { transform: translateX(-50%) translateY(20px); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

.vx-game-toast[data-kind="error"] {
    border-color: var(--vx-red);
    color: #ffaab8;
    box-shadow:
        0 0 0 6px var(--vx-abyss),
        0 0 20px rgba(255,51,85,0.4),
        0 0 40px rgba(255,51,85,0.2),
        0 20px 40px rgba(0,0,0,0.6);
    text-shadow: 0 0 10px rgba(255,51,85,0.7);
}

.vx-game-toast[data-kind="error"]::before {
    content: '✕ ';
    color: var(--vx-red);
    animation: none;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .vx-mode-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 20px;
    }

    .vx-bottom-menu {
        position: static;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        padding-top: 8px;
    }

    .vx-heroes-modal-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .vx-game-lobby {
        padding: 0;
    }

    .vx-game-frame {
        border-width: 0;
        outline-width: 0;
        min-height: 100vh;
        width: 100%;
        box-shadow: none;
    }

    .vx-classic-topbar {
        grid-template-columns: 48px 1fr auto;
        padding: 0 8px;
    }

    .vx-top-brand {
        font-size: 0.55rem;
    }

    .vx-hub-screen {
        padding: 24px 14px 98px;
    }

    .vx-classic-board {
        height: calc(100vh - 58px);
    }

    .vx-hunt-screen {
        padding: 10px;
    }

    .vx-mode-art {
        min-height: 250px;
    }

    .vx-mode-art img:first-child {
        width: 148px;
    }

    .vx-mode-card strong {
        min-height: 54px;
        font-size: 0.6rem;
    }

    .vx-modal-grid.two-col {
        grid-template-columns: 1fr;
    }

    .vx-modal-window,
    .vx-modal-window.is-wide {
        width: 100%;
    }

    .vx-house-modal-grid {
        grid-template-columns: 1fr;
    }

    .vx-menu-button img {
        width: 44px;
        height: 44px;
    }

    .vx-coin-box {
        font-size: 0.55rem;
        padding: 4px 8px;
    }
}

/* ══════════════════════════════════════════════════════════════
   UTILITÁRIOS GLOBAIS DE PIXEL-ART
   (podem ser aplicados via classe em qualquer elemento)
══════════════════════════════════════════════════════════════ */

/* Botão padrão arcano — aplique onde precisar */
.vx-btn-primary {
    font-family: var(--vx-font-pixel);
    font-size: 0.6rem;
    padding: 12px 18px;
    color: var(--vx-spark);
    background: linear-gradient(180deg, var(--vx-core), var(--vx-mid));
    border: 3px solid var(--vx-glow);
    box-shadow:
        inset -3px -3px 0 rgba(0,0,0,0.5),
        inset 3px 3px 0 rgba(155,95,255,0.3),
        0 6px 0 var(--vx-mid),
        0 8px 0 var(--vx-abyss),
        var(--vx-glow-sm);
    cursor: pointer;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(201,154,255,0.8), 1px 1px 0 var(--vx-void);
    transition: transform var(--vx-ease), box-shadow var(--vx-ease);
}

.vx-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow:
        inset -3px -3px 0 rgba(0,0,0,0.5),
        inset 3px 3px 0 rgba(155,95,255,0.4),
        0 9px 0 var(--vx-mid),
        0 11px 0 var(--vx-abyss),
        var(--vx-glow-md);
}

.vx-btn-primary:active {
    transform: translateY(4px);
    box-shadow:
        inset -1px -1px 0 rgba(0,0,0,0.5),
        inset 1px 1px 0 rgba(155,95,255,0.2),
        0 2px 0 var(--vx-mid),
        0 3px 0 var(--vx-abyss);
}

/* ─── Barra de progresso pixel ─── */
.vx-progress-wrap {
    width: 100%;
    height: 12px;
    background: var(--vx-void);
    border: 3px solid var(--vx-core);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.vx-progress-fill {
    height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            var(--vx-glow) 0px,
            var(--vx-glow) 6px,
            var(--vx-bright) 6px,
            var(--vx-bright) 8px
        );
    box-shadow: 0 0 10px rgba(155,95,255,0.6);
    transition: width 0.5s steps(10);
}

.vx-progress-fill.is-hp {
    background:
        repeating-linear-gradient(
            90deg,
            #ff3355 0px,
            #ff3355 6px,
            #cc2244 6px,
            #cc2244 8px
        );
    box-shadow: 0 0 10px rgba(255,51,85,0.6);
}

.vx-progress-fill.is-gold {
    background:
        repeating-linear-gradient(
            90deg,
            var(--vx-gold) 0px,
            var(--vx-gold) 6px,
            #cc9900 6px,
            #cc9900 8px
        );
    box-shadow: 0 0 10px rgba(255,209,102,0.6);
}

/* ─── Divider rúnico ─── */
.vx-rune-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--vx-font-pixel);
    font-size: 0.5rem;
    color: rgba(155,95,255,0.5);
    letter-spacing: 0.2em;
}

.vx-rune-divider::before,
.vx-rune-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--vx-core) 0px, var(--vx-core) 6px,
        transparent 6px, transparent 12px
    );
}

/* ─── Badge de raridade ─── */
.vx-badge {
    display: inline-flex;
    padding: 3px 8px;
    font-family: var(--vx-font-pixel);
    font-size: 0.45rem;
    letter-spacing: 0.08em;
    border: 2px solid;
}

.vx-badge-legendary {
    color: var(--vx-gold);
    border-color: rgba(255,209,102,0.5);
    background: rgba(107,72,0,0.3);
    text-shadow: 0 0 8px rgba(255,209,102,0.7);
    box-shadow: 0 0 8px rgba(255,209,102,0.2);
}

.vx-badge-epic {
    color: #d466ff;
    border-color: rgba(212,102,255,0.5);
    background: rgba(80,0,120,0.3);
    text-shadow: 0 0 8px rgba(212,102,255,0.7);
}

.vx-badge-rare {
    color: var(--vx-cyan);
    border-color: rgba(61,232,255,0.5);
    background: rgba(0,80,100,0.3);
    text-shadow: 0 0 8px rgba(61,232,255,0.7);
}

.vx-badge-common {
    color: var(--vx-spark);
    border-color: rgba(201,154,255,0.3);
    background: rgba(39,16,78,0.3);
}

/* ==========================================================================
   HUD IMAGE ADAPTATION
========================================================================== */

.vx-game-lobby {
    padding: 18px;
    background:
        radial-gradient(circle at top, rgba(110, 50, 187, 0.28), transparent 34%),
        radial-gradient(circle at bottom, rgba(92, 38, 160, 0.2), transparent 40%),
        #07040d;
}

.vx-game-frame {
    width: min(100%, 1240px);
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.vx-game-frame::before,
.vx-game-frame::after,
.vx-classic-topbar,
.vx-board-pattern {
    display: none;
}

.vx-classic-board {
    height: auto;
    min-height: 0;
    background: transparent;
}

.vx-hub-screen,
.vx-hunt-screen {
    position: relative;
    padding: 0;
    display: grid;
    place-items: center;
}

.vx-menu-stage,
.vx-hunt-stage {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 0 2px rgba(180, 120, 255, 0.22),
        0 20px 48px rgba(0, 0, 0, 0.54),
        0 0 40px rgba(118, 52, 186, 0.25);
}

.vx-menu-stage::after,
.vx-hunt-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(132, 70, 186, 0.08), rgba(30, 13, 49, 0.14));
    pointer-events: none;
}

.vx-menu-stage {
    width: min(100%, 1050px);
    aspect-ratio: 515 / 352;
    background: url('/assets/menu/background.jpg') center / 100% 100% no-repeat;
}

.vx-menu-viewport {
    position: absolute;
    left: 6.4%;
    top: 7.1%;
    width: 81%;
    height: 67%;
    display: grid;
    align-items: center;
    padding: 0 6%;
    z-index: 1;
}

.vx-mode-grid {
    width: 100%;
    height: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2.6vw, 34px);
    align-items: center;
}

.vx-mode-card {
    position: relative;
    height: min(100%, 88%);
    min-height: 0;
    padding: 0;
    border: 2px solid rgba(96, 74, 55, 0.9);
    background: linear-gradient(180deg, rgba(12, 9, 14, 0.45), rgba(14, 9, 17, 0.8));
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.42);
    overflow: hidden;
    transform: translateZ(0);
}

.vx-mode-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.56),
        0 0 0 1px rgba(182, 144, 255, 0.14);
}

.vx-mode-card strong {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 0;
    padding: 12px 10px;
    display: block;
    text-align: center;
    background: rgba(151, 103, 85, 0.88);
    color: #fff5e4;
    border: 0;
    font-family: var(--vx-font-pixel);
    font-size: clamp(0.52rem, 1vw, 0.72rem);
    letter-spacing: 0.03em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
}

.vx-mode-art {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vx-mode-art.is-adventure-poster {
    background-image:
        linear-gradient(180deg, rgba(42, 20, 66, 0.24), rgba(9, 8, 16, 0.18)),
        url('/assets/menu/login.jpg');
}

.vx-mode-art.is-hunt-poster {
    background-image:
        radial-gradient(circle at top, rgba(155, 108, 255, 0.18), transparent 42%),
        url('/assets/menu/main.jpg');
}

.vx-mode-art.is-battle-poster {
    background-image:
        linear-gradient(180deg, rgba(66, 20, 30, 0.28), rgba(18, 9, 13, 0.35)),
        url('/assets/menu/character.jpg');
}

.vx-mode-sprite {
    position: absolute;
    left: 50%;
    bottom: 52px;
    width: clamp(54px, 26%, 96px);
    transform: translateX(-50%);
    filter:
        drop-shadow(0 0 12px rgba(189, 135, 255, 0.38))
        drop-shadow(0 6px 10px rgba(0, 0, 0, 0.65));
}

.vx-mode-art .is-overlay {
    position: absolute;
    right: 12px;
    bottom: 50px;
    width: clamp(28px, 18%, 52px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.62));
}

.vx-lock-badge {
    top: 54%;
    padding: 8px 14px;
    border-width: 2px;
    font-size: 0.52rem;
    background: rgba(10, 10, 12, 0.88);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}

.vx-stage-wallet {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
    padding: 4px 8px;
    font-family: var(--vx-font-pixel);
    font-size: clamp(0.52rem, 1vw, 0.72rem);
    color: #fff4dc;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
}

.vx-stage-wallet img {
    width: 18px;
    height: 18px;
}

.vx-stage-wallet-menu {
    top: 1.8%;
    right: 6.6%;
}

.vx-bottom-menu-main {
    position: absolute;
    left: 12.8%;
    width: 69.2%;
    bottom: 7.7%;
    display: grid;
    grid-template-columns: repeat(4, 89px);
    justify-content: space-between;
    gap: 10px;
    z-index: 2;
}

.vx-menu-button {
    position: relative;
    display: block;
    width: 69px;
    height: 29px;
    border: 0;
    padding: 0;
    background-color: transparent;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
}

.vx-bottom-menu-main .vx-menu-button {
    width: 89px;
}

.vx-menu-button span {
    display: none;
}

.vx-menu-button.is-login { background-image: url('/assets/menu/buttons/login_norm.jpg'); }
.vx-menu-button.is-register { background-image: url('/assets/menu/buttons/register_norm.jpg'); }
.vx-menu-button.is-credits { background-image: url('/assets/menu/buttons/credits_norm.jpg'); }
.vx-menu-button.is-exit { background-image: url('/assets/menu/buttons/exit_norm.jpg'); }
.vx-menu-button.is-login:hover { background-image: url('/assets/menu/buttons/login_hover.jpg'); }
.vx-menu-button.is-register:hover { background-image: url('/assets/menu/buttons/register_hover.jpg'); }
.vx-menu-button.is-credits:hover { background-image: url('/assets/menu/buttons/credits_hover.jpg'); }
.vx-menu-button.is-exit:hover { background-image: url('/assets/menu/buttons/exit_hover.jpg'); }
.vx-menu-button.is-login:active { background-image: url('/assets/menu/buttons/login_click.jpg'); }
.vx-menu-button.is-register:active { background-image: url('/assets/menu/buttons/register_click.jpg'); }
.vx-menu-button.is-credits:active { background-image: url('/assets/menu/buttons/credits_click.jpg'); }
.vx-menu-button.is-exit:active { background-image: url('/assets/menu/buttons/exit_click.jpg'); }

.vx-hunt-stage {
    width: min(100%, 1180px);
    aspect-ratio: 785 / 594;
    background: url('/assets/main/main.jpg') center / 100% 100% no-repeat;
}

.vx-hunt-mapname {
    position: absolute;
    left: 2.1%;
    top: 1.8%;
    z-index: 2;
    padding: 3px 7px;
    font-size: clamp(0.42rem, 0.72vw, 0.62rem);
    background: rgba(14, 9, 17, 0.78);
    border: 1px solid rgba(170, 129, 235, 0.4);
    color: #eadbff;
}

.vx-stage-wallet-hunt {
    right: 2%;
    top: 1.4%;
}

.vx-hunt-viewport {
    position: absolute;
    left: 1.15%;
    top: 1.68%;
    width: 70.06%;
    height: 64.98%;
    z-index: 1;
}

.game-canvas-shell,
.game-canvas-shell.is-classic {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.game-canvas-shell canvas {
    width: 100% !important;
    height: 100% !important;
    box-shadow: none;
}

.vx-hunt-sidebar {
    position: absolute;
    left: 71.6%;
    top: 1.68%;
    width: 27.13%;
    height: 91.58%;
    display: block;
    z-index: 2;
}

.vx-hunt-status-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 23.4%;
}

.vx-hunt-bar {
    position: absolute;
    left: 5.6%;
    width: 87.2%;
    height: 11.5%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    color: #f5efe8;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.88);
    font-family: 'VT323', monospace;
    font-size: clamp(0.72rem, 1vw, 0.92rem);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.vx-hunt-bar span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.vx-hunt-bar.is-health {
    top: 3%;
    background-image: url('/assets/main/bars/health.jpg');
}

.vx-hunt-bar.is-spirit {
    top: 17.5%;
    background-image: url('/assets/main/bars/spirit.jpg');
}

.vx-hunt-bar.is-experience {
    top: 32%;
    background-image: url('/assets/main/bars/experience.jpg');
}

.vx-hunt-menu-grid {
    position: absolute;
    left: 6.6%;
    top: 28%;
    width: 76%;
    display: grid;
    grid-template-columns: repeat(3, 69px);
    grid-auto-rows: 29px;
    justify-content: space-between;
    gap: 10px 6px;
}

.vx-menu-button.is-inv { background-image: url('/assets/main/buttons/inv_norm.jpg'); }
.vx-menu-button.is-skills { background-image: url('/assets/main/buttons/skills_norm.jpg'); }
.vx-menu-button.is-char { background-image: url('/assets/main/buttons/char_norm.jpg'); }
.vx-menu-button.is-opt { background-image: url('/assets/main/buttons/opt_norm.jpg'); }
.vx-menu-button.is-trade { background-image: url('/assets/main/buttons/trade_norm.jpg'); }
.vx-menu-button.is-party { background-image: url('/assets/main/buttons/party_norm.jpg'); }
.vx-menu-button.is-inv:hover { background-image: url('/assets/main/buttons/inv_hover.jpg'); }
.vx-menu-button.is-skills:hover { background-image: url('/assets/main/buttons/skills_hover.jpg'); }
.vx-menu-button.is-char:hover { background-image: url('/assets/main/buttons/char_hover.jpg'); }
.vx-menu-button.is-opt:hover { background-image: url('/assets/main/buttons/opt_hover.jpg'); }
.vx-menu-button.is-trade:hover { background-image: url('/assets/main/buttons/trade_hover.jpg'); }
.vx-menu-button.is-party:hover { background-image: url('/assets/main/buttons/party_hover.jpg'); }
.vx-menu-button.is-inv:active { background-image: url('/assets/main/buttons/inv_click.jpg'); }
.vx-menu-button.is-skills:active { background-image: url('/assets/main/buttons/skills_click.jpg'); }
.vx-menu-button.is-char:active { background-image: url('/assets/main/buttons/char_click.jpg'); }
.vx-menu-button.is-opt:active { background-image: url('/assets/main/buttons/opt_click.jpg'); }
.vx-menu-button.is-trade:active { background-image: url('/assets/main/buttons/trade_click.jpg'); }
.vx-menu-button.is-party:active { background-image: url('/assets/main/buttons/party_click.jpg'); }

.vx-hunt-party-panel {
    position: absolute;
    left: 5%;
    top: 47.6%;
    width: 84%;
    height: 43.4%;
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px 16px;
}

.vx-hunt-party-row {
    display: grid;
    grid-template-rows: auto auto;
    gap: 4px;
    padding: 2px 0;
    color: #f5eee6;
    font-family: 'VT323', monospace;
    font-size: clamp(0.68rem, 0.84vw, 0.9rem);
}

.vx-party-row-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.vx-party-row-head span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.88);
}

.vx-party-row-head strong {
    color: #e5c26a;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.88);
}

.vx-party-row-bars {
    display: grid;
    gap: 3px;
}

.vx-party-row-bars span {
    position: relative;
    display: block;
    width: 100%;
    height: 9px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

.vx-party-row-bars span.is-health {
    background-image: url('/assets/main/bars/party_health.jpg');
}

.vx-party-row-bars span.is-spirit {
    background-image: url('/assets/main/bars/party_spirit.jpg');
}

.vx-party-row-bars i {
    position: absolute;
    inset: 1px auto 1px 1px;
    display: block;
    background: linear-gradient(90deg, rgba(192, 79, 59, 0.88), rgba(219, 162, 64, 0.9));
}

.vx-main-hotbar {
    position: absolute;
    left: 1.4%;
    top: 67.34%;
    width: 60.64%;
    height: 6.06%;
    background: url('/assets/main/hotbar.jpg') center / 100% 100% no-repeat;
    z-index: 2;
}

.vx-main-hotbar-slot {
    display: none;
}

.vx-main-chatbox {
    position: absolute;
    left: 1.4%;
    top: 73.74%;
    width: 60.64%;
    height: 24.58%;
    padding: 78px 14px 12px;
    display: flex;
    align-items: flex-end;
    color: #d7cec4;
    font-family: 'VT323', monospace;
    font-size: clamp(0.78rem, 0.92vw, 0.96rem);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.86);
    z-index: 2;
}

.vx-modal-window {
    border: 0;
    outline: 0;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.72),
        0 0 0 2px rgba(178, 124, 242, 0.18);
    background-color: rgba(9, 7, 12, 0.95);
}

.vx-modal-window::before,
.vx-modal-window::after,
.vx-modal-head::after {
    display: none;
}

.vx-modal-head {
    min-height: 40px;
    padding: 6px 10px;
    background: linear-gradient(180deg, rgba(44, 28, 50, 0.85), rgba(17, 11, 22, 0.95));
    border-bottom: 0;
    box-shadow: none;
}

.vx-modal-head h3 {
    font-size: 0.7rem;
}

.vx-close-button {
    width: 89px;
    height: 29px;
    border: 0;
    background: url('/assets/menu/buttons/exit_norm.jpg') center / 100% 100% no-repeat;
    color: transparent;
    font-size: 0;
}

.vx-close-button:hover { background-image: url('/assets/menu/buttons/exit_hover.jpg'); }
.vx-close-button:active { background-image: url('/assets/menu/buttons/exit_click.jpg'); }

.vx-modal-window.is-inventory-hud {
    width: min(94vw, 980px);
}

.vx-modal-window.is-inventory-hud .vx-modal-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 18px;
    padding: 18px;
}

.vx-reward-card {
    min-height: 370px;
    align-content: start;
    padding: 24px 20px;
    background: url('/assets/main/trade.jpg') center / 100% 100% no-repeat;
    border: 0;
    color: #efe8dc;
}

.vx-reward-card h4,
.vx-reward-card strong,
.vx-reward-card small {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.82);
}

.vx-reward-card img {
    width: 96px;
    height: 96px;
    margin-top: 12px;
}

.vx-modal-window.is-shop-hud {
    width: min(94vw, 780px);
}

.vx-shop-card {
    min-height: 360px;
    align-content: start;
    padding: 30px 22px 18px;
    background: url('/assets/main/shop.jpg') center / 100% 100% no-repeat;
    border: 0;
    color: #efe8dc;
}

.vx-shop-card img {
    width: 120px;
    height: 120px;
    margin-top: 8px;
}

.vx-modal-window.is-bank-hud {
    width: min(94vw, 1060px);
}

.vx-house-modal-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    padding: 18px;
}

.vx-house-hud-card {
    min-height: 390px;
    align-content: start;
    padding: 24px 20px 18px;
    background: url('/assets/main/bank.jpg') center / 100% 100% no-repeat;
    border: 0;
    color: #efe8dc;
}

.vx-house-hud-card img {
    width: 132px;
    max-width: 100%;
}

.vx-house-hud-card h4,
.vx-house-hud-card p,
.vx-house-hud-card small {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85);
}

.vx-house-assign select {
    width: 100%;
    border: 1px solid rgba(126, 97, 74, 0.8);
    background: rgba(12, 11, 14, 0.84);
    color: #f0ece7;
    padding: 8px 10px;
}

.vx-modal-window.is-heroes-hud {
    width: min(94vw, 980px);
}

.vx-heroes-modal-layout {
    grid-template-columns: 194px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 18px;
}

.vx-hero-roster-list {
    max-height: none;
    min-height: 540px;
    padding: 42px 10px 14px;
    background: url('/assets/main/party.jpg') center / 100% 100% no-repeat;
    overflow: auto;
}

.vx-hero-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(126, 97, 74, 0.74);
    background: rgba(11, 10, 12, 0.7);
    color: #efe8dc;
}

.vx-hero-row img {
    width: 36px;
    height: 36px;
}

.vx-hero-status-pill {
    display: none;
}

.vx-hero-row-copy strong,
.vx-hero-row-copy small {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85);
}

.vx-hero-detail-panel {
    min-height: 540px;
    padding: 68px 20px 18px;
    background: url('/assets/main/character.jpg') center / 100% 100% no-repeat;
    color: #efe8dc;
    border: 0;
}

.vx-hero-detail-panel img {
    width: 94px;
    height: 94px;
}

.vx-detail-head,
.vx-detail-stats span,
.vx-detail-actions,
#vx-detail-skill,
#vx-detail-rarity {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85);
}

.vx-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vx-detail-stats span {
    background: rgba(11, 10, 12, 0.68);
    border: 1px solid rgba(126, 97, 74, 0.74);
}

@media (max-width: 980px) {
    .vx-menu-stage,
    .vx-hunt-stage {
        width: 100%;
    }

    .vx-bottom-menu-main {
        left: 9%;
        width: 82%;
    }

    .vx-hunt-menu-grid {
        width: 83%;
        gap: 10px 2px;
    }

    .vx-party-row-head span {
        max-width: 90px;
    }
}

@media (max-width: 760px) {
    .vx-game-lobby {
        padding: 10px;
    }

    .vx-menu-stage {
        width: 100%;
    }

    .vx-menu-viewport {
        padding: 0 4%;
    }

    .vx-mode-grid {
        gap: 10px;
    }

    .vx-mode-card strong {
        padding: 8px 4px;
        font-size: 0.34rem;
    }

    .vx-mode-sprite {
        bottom: 34px;
        width: 38%;
    }

    .vx-bottom-menu-main {
        left: 8%;
        width: 84%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .vx-bottom-menu-main .vx-menu-button {
        width: 100%;
        aspect-ratio: 89 / 29;
        height: auto;
    }

    .vx-stage-wallet {
        font-size: 0.34rem;
        gap: 4px;
        padding: 2px 4px;
    }

    .vx-stage-wallet img {
        width: 12px;
        height: 12px;
    }

    .vx-hunt-stage {
        width: 100%;
    }

    .vx-hunt-mapname {
        font-size: 0.28rem;
        padding: 2px 4px;
    }

    .vx-hunt-bar {
        padding-right: 6px;
        font-size: 0.38rem;
    }

    .vx-hunt-menu-grid {
        width: 82%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px 2px;
    }

    .vx-hunt-menu-grid .vx-menu-button {
        width: 100%;
        aspect-ratio: 69 / 29;
        height: auto;
    }

    .vx-hunt-party-panel {
        gap: 4px;
        padding: 6px 8px 10px;
    }

    .vx-hunt-party-row {
        gap: 2px;
        font-size: 0.38rem;
    }

    .vx-party-row-bars span {
        height: 6px;
    }

    .vx-main-chatbox {
        padding: 52px 8px 8px;
        font-size: 0.42rem;
    }

    .vx-modal-window.is-inventory-hud .vx-modal-grid,
    .vx-house-modal-grid,
    .vx-heroes-modal-layout {
        grid-template-columns: 1fr;
    }

    .vx-hero-roster-list,
    .vx-hero-detail-panel {
        min-height: 0;
    }
}