/* Wizard Battles - Sprint 1 Visual Foundation
 * Non-invasive layer: only visual normalization, no DOM/ID assumptions.
 */

:root {
    --wb-ui-panel-bg:
        linear-gradient(170deg, color-mix(in srgb, var(--wb-ui-surface-1) 88%, #fff 12%), color-mix(in srgb, var(--wb-ui-surface-0) 92%, #000 8%));
    --wb-ui-panel-bg-soft:
        linear-gradient(180deg, color-mix(in srgb, var(--wb-ui-surface-1) 74%, #fff 26%), color-mix(in srgb, var(--wb-ui-surface-0) 80%, #000 20%));
}

html,
body {
    scrollbar-gutter: stable;
}

body[data-theme="wizardbattles"] {
    --wb-game-shell-bg:
        linear-gradient(180deg, rgba(5, 10, 25, 0.98) 0%, rgba(7, 14, 31, 0.98) 18%, rgba(6, 13, 30, 0.96) 62%, rgba(7, 12, 24, 0.99) 100%);
    --wb-game-shell-panel:
        linear-gradient(160deg, rgba(12, 21, 49, 0.94) 0%, rgba(7, 14, 32, 0.96) 100%);
    --wb-game-shell-panel-alt:
        linear-gradient(160deg, rgba(12, 25, 58, 0.94) 0%, rgba(7, 15, 36, 0.97) 100%);
    --wb-game-shell-border: rgba(155, 198, 255, 0.18);
    --wb-game-shell-border-strong: rgba(181, 217, 255, 0.34);
    --wb-game-shell-highlight: rgba(255, 255, 255, 0.09);
    --wb-game-shell-shadow: 0 16px 34px rgba(2, 8, 22, 0.42);
    --wb-game-shell-shadow-soft: 0 10px 24px rgba(2, 8, 22, 0.28);
    --wb-game-cool-rgb: 126, 189, 255;
    --wb-game-warm-rgb: 223, 178, 102;
    --wb-game-plum-rgb: 188, 116, 171;
    --wb-game-teal-rgb: 109, 214, 193;
    --wb-game-player-rgb: 112, 232, 173;
    --wb-game-cpu-rgb: 244, 133, 133;
    --wb-game-layer-board: 8;
    --wb-game-layer-shell: calc(var(--z-hud) + 1);
    --wb-game-layer-dock: calc(var(--z-hud) + 4);
    --wb-game-layer-hand-top: 2147483000;
    --wb-game-layer-menu: calc(var(--z-hud) + 6);
    --wb-game-layer-overlay: calc(var(--z-overlay) + 2);
    --wb-game-layer-modal: calc(var(--z-modal) + 8);
    color: var(--wb-ui-text);
    background:
        radial-gradient(1100px 700px at 8% -16%, color-mix(in srgb, var(--wb-ui-accent) 20%, transparent), transparent 62%),
        radial-gradient(1000px 620px at 102% 8%, color-mix(in srgb, #7ab7ff 14%, transparent), transparent 64%),
        linear-gradient(180deg, var(--wb-ui-bg-0), var(--wb-ui-bg-1));
}

body[data-theme="wizardbattles"] .wb-shell-panel {
    position: relative;
    isolation: isolate;
}

body[data-theme="wizardbattles"] .wb-shell-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--wb-game-cool-rgb), 0.12) 0%, rgba(var(--wb-game-cool-rgb), 0) 42%),
        radial-gradient(circle at 82% 20%, rgba(var(--wb-game-warm-rgb), 0.08) 0%, rgba(var(--wb-game-warm-rgb), 0) 36%);
    opacity: 0.85;
}

body[data-theme="wizardbattles"] .wb-shell-panel > * {
    position: relative;
    z-index: 1;
}

body[data-theme="wizardbattles"] :where(input, select, textarea, button) {
    font-family: var(--font-primary-ui);
}

body[data-theme="wizardbattles"] :where(.btn, .btn-premium, .btn-secondary, .btn-primary) {
    border-radius: var(--wb-ui-radius-md);
    border-color: var(--wb-ui-border-soft);
    transition: background var(--wb-transition-base), border-color var(--wb-transition-base), transform var(--wb-transition-base), box-shadow var(--wb-transition-base), color var(--wb-transition-base);
}

body[data-theme="wizardbattles"] :where(.btn):not(.btn-xs):not(.btn-sm) {
    min-height: var(--wb-ui-control-h);
    padding-inline: var(--wb-ui-control-pad-x);
}

body[data-theme="wizardbattles"] :where(.btn.btn-sm, .btn.btn-xs) {
    min-height: var(--wb-ui-control-h-sm);
}

body[data-theme="wizardbattles"] :where(.input-premium, .select, input[type="text"], input[type="number"], textarea, select) {
    min-height: var(--wb-ui-control-h);
    border-radius: var(--wb-ui-radius-sm);
    border: 1px solid var(--wb-ui-border-soft);
    background: color-mix(in srgb, var(--wb-ui-bg-0) 84%, #081022 16%);
    color: var(--wb-ui-text);
}

body[data-theme="wizardbattles"] :where(.input-premium, .select, input[type="text"], input[type="number"], textarea, select)::placeholder {
    color: var(--wb-ui-text-subtle);
}

body[data-theme="wizardbattles"] :where(.btn, .input-premium, .select, input, textarea, select):focus-visible {
    outline: none;
    box-shadow: var(--wb-ui-focus-ring);
}

/* HOME / HUB */
body[data-theme="wizardbattles"] .hub-carousel-shell {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-card {
    position: relative;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 999px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 999px;
    clip-path: circle(49.5% at 50% 50%);
    border: 2px solid rgba(212, 175, 55, 0.92);
    background: transparent;
    box-shadow:
        0 8px 18px rgba(41, 26, 7, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-card.is-selected img {
    box-shadow:
        0 0 0 2px rgba(212, 175, 55, 0.95),
        0 0 0 7px rgba(212, 175, 55, 0.2),
        0 12px 24px rgba(88, 59, 20, 0.32);
}

body[data-theme="wizardbattles"] #hub-screen .hub-carousel-dots {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-theme="wizardbattles"] .hub-set-pill,
body[data-theme="wizardbattles"] .hub-subtitle,
body[data-theme="wizardbattles"] .hub-mode-pill {
    border-color: var(--wb-ui-border-soft);
}

body[data-theme="wizardbattles"] #hub-play-btn {
    --wb-hub-cta-accent: rgba(244, 194, 97, 0.92);
    --wb-hub-cta-cool: rgba(132, 198, 255, 0.82);
    --wb-hub-cta-shadow: 0 18px 30px rgba(6, 10, 24, 0.42);
    border-radius: 20px;
    border-color: transparent;
    box-shadow: none;
}

body[data-theme="wizardbattles"] #hub-play-btn:hover {
    box-shadow: none;
}

/* GAME HUD + dock — styles handled by #wb-game-header rules below */

body[data-theme="wizardbattles"] .wb-phase-indicator,
body[data-theme="wizardbattles"] #phase-indicator {
    border-color: color-mix(in srgb, var(--wb-ui-accent) 36%, rgba(255, 255, 255, 0.25));
    box-shadow: var(--wb-ui-shadow-sm);
}

body[data-theme="wizardbattles"] .hand-dock {
    border-top-color: color-mix(in srgb, var(--wb-ui-accent) 24%, rgba(42, 35, 40, 0.3));
}

/* HOME + GAME (Sprint UI v2) */
body[data-theme="wizardbattles"] #hub-screen .hub-content {
    height: auto;
    min-height: 100%;
    width: min(1120px, 100%);
    margin-inline: auto;
    gap: clamp(10px, 1.6vw, 16px);
    padding-inline: clamp(14px, 2vw, 22px);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-carousel-shell {
    width: min(92vw, 980px);
    border: 1px solid transparent;
    border-radius: clamp(20px, 2.8vw, 30px);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card {
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 999px;
    border: 2px solid rgba(212, 175, 55, 0.92);
    background: transparent;
    box-shadow:
        0 8px 18px rgba(41, 26, 7, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-label {
    background: rgba(9, 26, 58, 0.86);
    border-color: rgba(140, 170, 230, 0.48);
    color: rgba(221, 236, 255, 0.96);
    box-shadow: 0 4px 12px rgba(2, 8, 20, 0.44);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title-halo {
    width: min(72vw, 500px);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title img {
    width: min(82vw, 620px);
    max-width: 620px;
    filter:
        drop-shadow(0 14px 24px rgba(6, 10, 28, 0.55))
        drop-shadow(0 0 22px rgba(116, 159, 230, 0.28));
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-subtitle {
    background: rgba(8, 25, 54, 0.7);
    border-color: rgba(140, 172, 235, 0.38);
    color: rgba(214, 232, 255, 0.95);
    box-shadow: 0 8px 22px rgba(2, 9, 24, 0.45);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card.is-selected {
    box-shadow: none;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card.is-selected img {
    box-shadow:
        0 0 0 2px rgba(212, 175, 55, 0.95),
        0 0 0 7px rgba(212, 175, 55, 0.2),
        0 12px 24px rgba(88, 59, 20, 0.32);
}

@media (max-width: 767px) {
    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title-halo {
        width: min(88vw, 420px);
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title img {
        width: min(95vw, 500px);
    }
}

body[data-theme="wizardbattles"] #hub-play-btn {
    height: auto;
    min-height: clamp(60px, 7.4vw, 82px);
    max-width: min(82vw, 348px);
    padding: 0;
    border-radius: 20px;
    background: transparent;
    color: #fff8eb;
    border: 0;
    text-shadow: none;
    letter-spacing: normal;
}

body[data-theme="wizardbattles"] #hub-play-btn:hover {
    transform: translateY(-1px);
    box-shadow: none;
}

body[data-theme="wizardbattles"] #hub-play-btn::before,
body[data-theme="wizardbattles"] #hub-play-btn::after {
    content: none;
}

body[data-theme="wizardbattles"] #hub-play-btn[data-mode="classic"] {
    --wb-hub-cta-accent: rgba(120, 189, 255, 0.94);
    --wb-hub-cta-cool: rgba(206, 234, 255, 0.92);
}

body[data-theme="wizardbattles"] #hub-play-btn[data-mode="master"] {
    --wb-hub-cta-accent: rgba(244, 194, 97, 0.92);
    --wb-hub-cta-cool: rgba(144, 205, 255, 0.82);
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__backdrop {
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--wb-hub-cta-accent) 46%, rgba(236, 244, 255, 0.24));
    background:
        url('../../assets/ui/mobile/cta_glow.svg') center / cover no-repeat,
        linear-gradient(132deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 36%, rgba(255, 255, 255, 0.04) 100%),
        linear-gradient(160deg, rgba(14, 24, 48, 0.99) 0%, rgba(12, 18, 36, 0.98) 54%, rgba(7, 12, 26, 0.99) 100%);
    box-shadow:
        var(--wb-hub-cta-shadow),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 22px color-mix(in srgb, var(--wb-hub-cta-accent) 15%, transparent),
        inset 0 1px 0 rgba(245, 248, 255, 0.2),
        inset 0 -22px 36px rgba(4, 10, 24, 0.36);
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__spark {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--wb-hub-cta-accent) 68%, rgba(255, 242, 210, 0.9)) 0%, color-mix(in srgb, var(--wb-hub-cta-cool) 24%, transparent) 56%, transparent 76%);
    transition: transform 220ms ease, opacity 220ms ease;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__content {
    padding: clamp(12px, 1.6vw, 16px) clamp(16px, 2vw, 20px) clamp(14px, 1.8vw, 17px);
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__kicker {
    color: color-mix(in srgb, var(--wb-hub-cta-cool) 76%, rgba(244, 248, 255, 0.94));
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--wb-hub-cta-accent) 72%, white);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--wb-hub-cta-accent) 14%, transparent),
        0 0 18px color-mix(in srgb, var(--wb-hub-cta-accent) 48%, transparent);
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__sigil {
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--wb-hub-cta-accent) 44%, rgba(255, 236, 193, 0.84)) 0%, rgba(109, 69, 24, 0.92) 100%);
    box-shadow:
        0 8px 18px rgba(4, 8, 18, 0.28),
        inset 0 1px 0 rgba(255, 249, 231, 0.4),
        0 0 0 1px rgba(255, 236, 193, 0.18);
    color: rgba(14, 18, 32, 0.88);
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__label {
    color: #fff8eb;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 22px rgba(3, 8, 20, 0.36);
}

body[data-theme="wizardbattles"] #hub-play-btn:hover .hub-play-btn__backdrop {
    border-color: color-mix(in srgb, var(--wb-hub-cta-accent) 56%, rgba(240, 247, 255, 0.32));
    box-shadow:
        0 20px 34px rgba(4, 8, 20, 0.46),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 24px color-mix(in srgb, var(--wb-hub-cta-accent) 18%, transparent),
        inset 0 1px 0 rgba(248, 251, 255, 0.24),
        inset 0 -26px 40px rgba(4, 10, 24, 0.38);
}

body[data-theme="wizardbattles"] #hub-play-btn:hover .hub-play-btn__spark {
    opacity: 0.54;
    transform: translateY(-1px) scale(1.02);
}

body[data-theme="wizardbattles"] #hub-play-btn:hover .hub-play-btn__sigil {
    transform: translateY(-1px) scale(1.04);
}

body[data-theme="wizardbattles"] #hub-play-btn:focus-visible {
    outline: none;
}

body[data-theme="wizardbattles"] #hub-play-btn:focus-visible .hub-play-btn__backdrop {
    box-shadow:
        0 0 0 2px rgba(250, 229, 176, 0.96),
        0 0 0 7px rgba(250, 229, 176, 0.18),
        var(--wb-hub-cta-shadow),
        inset 0 1px 0 rgba(245, 248, 255, 0.2),
        inset 0 -26px 42px rgba(4, 10, 24, 0.36);
}

@media (max-width: 767px) {
    body[data-theme="wizardbattles"] #hub-screen {
        overflow-y: auto;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-content {
        gap: 10px;
        padding-bottom: calc(var(--bottom-nav-height) + max(env(safe-area-inset-bottom), 20px));
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-carousel-shell {
        background: linear-gradient(180deg, rgba(9, 12, 24, 0.34) 0%, rgba(9, 12, 24, 0.16) 100%);
        border-color: color-mix(in srgb, var(--wb-ui-accent) 18%, rgba(255, 255, 255, 0.16));
        box-shadow: 0 18px 30px rgba(7, 10, 18, 0.26);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-card img {
        box-shadow:
            0 10px 24px rgba(10, 8, 14, 0.3),
            0 0 0 1px rgba(255, 247, 229, 0.08);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-primary-action {
        padding-inline: 0;
    }

    body[data-theme="wizardbattles"] #hub-play-btn {
        max-width: min(82vw, 330px);
    }
}

@media (max-width: 767px) and (max-height: 760px) {
    body[data-theme="wizardbattles"] #hub-screen .hub-content {
        gap: 8px;
        padding-top: max(env(safe-area-inset-top), 12px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title-halo {
        width: min(72vw, 280px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title img {
        width: min(68vw, 272px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-subtitle {
        padding: 8px 14px;
        font-size: clamp(0.88rem, 3.9vw, 1rem);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-carousel-shell {
        width: min(100%, 420px);
        padding: 4px 4px 2px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-pill {
        font-size: 0.58rem;
        letter-spacing: 0.16em;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-primary-action {
        position: sticky;
        bottom: max(env(safe-area-inset-bottom), 12px);
        padding-top: 12px;
        padding-bottom: 0;
        background: linear-gradient(180deg, rgba(16, 12, 18, 0) 0%, rgba(16, 12, 18, 0.58) 42%, rgba(16, 12, 18, 0.82) 100%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body[data-theme="wizardbattles"] #hub-play-btn {
        width: min(100%, 300px);
        max-width: min(100%, 300px);
        min-height: 56px;
    }

    body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__content {
        padding: 10px 14px 12px;
    }

    body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__kicker {
        font-size: 0.5rem;
    }
}

@media (min-width: 900px) {
    body[data-theme="wizardbattles"] #hub-screen {
        overflow-y: auto;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-content {
        min-height: 100%;
        gap: clamp(8px, 1.2vh, 12px);
        padding-top: clamp(12px, 2.2vh, 18px);
        padding-bottom: clamp(18px, 3vh, 30px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title-halo {
        width: min(38vw, 420px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title img {
        width: min(34vw, 360px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-carousel-shell {
        width: min(82vw, 860px);
        padding: 8px 8px 6px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-card-wrapper {
        --hub-mode-width: min(22vw, 220px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-primary-action {
        margin-top: auto;
        padding-top: clamp(8px, 1.6vh, 14px);
    }

    body[data-theme="wizardbattles"] #hub-play-btn {
        width: min(48vw, 332px);
    }
}

body[data-theme="wizardbattles"] #game-board {
    position: relative;
    isolation: isolate;
    background-image:
        url('../../assets/ui/mobile/hud_top_strip.svg'),
        url('../../assets/ui/mobile/hand_dock_frame.svg'),
        radial-gradient(circle at 50% 16%, rgba(var(--wb-game-cool-rgb), 0.12) 0%, rgba(var(--wb-game-cool-rgb), 0) 34%),
        var(--wb-game-shell-bg);
    background-size:
        100% auto,
        100% auto,
        auto,
        auto;
    background-position:
        top center,
        bottom center,
        center top,
        center;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;
    border-radius: clamp(14px, 2.4vw, 20px);
    border: 1px solid var(--wb-ui-border-soft);
    box-shadow: var(--wb-ui-shadow-lg);
    margin: clamp(8px, 1.2vw, 14px);
    overflow: hidden;
}

body[data-theme="wizardbattles"] #wb-game-header {
    z-index: var(--wb-game-layer-shell);
    /* Layout: score | round | score — leave 58px on right for fixed menu button */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(6px, 1.4vw, 12px);
    padding: clamp(8px, 1.4vw, 12px) 68px clamp(8px, 1.4vw, 12px) clamp(12px, 1.8vw, 18px);
    border-bottom: 1px solid rgba(100, 140, 230, 0.18);
    background:
        url('../../assets/ui/mobile/hud_top_strip.svg') center top / cover no-repeat,
        linear-gradient(180deg, rgba(8, 12, 32, 0.97) 0%, rgba(12, 18, 44, 0.95) 100%);
    box-shadow: 0 10px 26px rgba(4, 8, 24, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Score chips: vertical stack label/value */
body[data-theme="wizardbattles"] #wb-game-header .wb-score-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 6px 15px 7px;
    min-width: 64px;
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(21, 38, 84, 0.82) 0%, rgba(10, 21, 49, 0.88) 100%);
    border: 1px solid rgba(192, 224, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 22px rgba(0,0,0,0.26);
}

body[data-theme="wizardbattles"] #wb-game-header .wb-score-chip--cpu {
    border-color: rgba(255, 150, 175, 0.22);
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 128, 160, 0.16), rgba(255, 128, 160, 0) 48%),
        linear-gradient(145deg, rgba(76, 24, 46, 0.86) 0%, rgba(34, 12, 24, 0.92) 100%);
}

body[data-theme="wizardbattles"] #wb-game-header .wb-score-chip--player {
    border-color: rgba(255, 218, 142, 0.22);
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 218, 142, 0.16), rgba(255, 218, 142, 0) 48%),
        linear-gradient(145deg, rgba(66, 46, 18, 0.86) 0%, rgba(28, 20, 10, 0.92) 100%);
}

/* Round chip: inline icon + label + number */
body[data-theme="wizardbattles"] #wb-game-header .wb-round-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 16px 7px;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(130,170,255,0.2) 0%, transparent 70%),
        linear-gradient(145deg, rgba(28,38,80,0.96), rgba(16,22,58,0.99));
    border: 1px solid rgba(132, 182, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(180,210,255,0.14),
        0 0 0 1px rgba(60,100,200,0.14),
        0 8px 20px rgba(4,8,24,0.38),
        0 0 24px rgba(80,120,220,0.1);
    min-width: 102px;
}

/* Labels */
body[data-theme="wizardbattles"] #wb-game-header .wb-score-label,
body[data-theme="wizardbattles"] #wb-game-header .wb-round-label {
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(160, 190, 255, 0.5);
    line-height: 1;
    margin-bottom: 2px;
}

/* Round icon */
body[data-theme="wizardbattles"] #wb-game-header .wb-round-icon {
    font-size: 0.65rem;
    color: rgba(180,210,255,0.55);
}

/* Score values — large, glowing */
body[data-theme="wizardbattles"] #wb-game-header .wb-score-value {
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    color: rgba(220,235,255,0.92);
    text-shadow:
        0 0 18px rgba(120,170,255,0.45),
        0 2px 4px rgba(0,0,0,0.5);
}

/* CPU — blue tint */
body[data-theme="wizardbattles"] #wb-game-header .wb-score-chip--cpu .wb-score-value {
    color: rgba(140,200,255,0.9);
    text-shadow:
        0 0 18px rgba(80,160,255,0.5),
        0 2px 4px rgba(0,0,0,0.5);
}

/* Player — gold */
body[data-theme="wizardbattles"] #wb-game-header .wb-score-chip--player .wb-score-value {
    color: rgba(255,215,100,0.95);
    text-shadow:
        0 0 18px rgba(220,170,40,0.55),
        0 2px 4px rgba(0,0,0,0.5);
}

/* Round value */
body[data-theme="wizardbattles"] #wb-game-header .wb-round-value {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(210,230,255,0.95);
    text-shadow:
        0 0 14px rgba(120,170,255,0.6),
        0 2px 4px rgba(0,0,0,0.5);
}

/* Mobile: tighter padding, still leave room for fixed menu btn */
@media (max-width: 520px) {
    body[data-theme="wizardbattles"] #wb-game-header {
        padding: 8px 62px 8px 10px;
        gap: 6px;
    }
    body[data-theme="wizardbattles"] #wb-game-header .wb-score-chip {
        padding: 5px 12px;
        min-width: 52px;
    }
    body[data-theme="wizardbattles"] #wb-game-header .wb-score-value {
        font-size: 1.35rem;
    }
    body[data-theme="wizardbattles"] #wb-game-header .wb-round-chip {
        min-width: 82px;
        padding: 5px 12px;
    }
    body[data-theme="wizardbattles"] #wb-game-header .wb-round-value {
        font-size: 1rem;
    }
}

body[data-theme="wizardbattles"] #wb-phase-indicator {
    margin: clamp(6px, 1vw, 10px) clamp(10px, 1.8vw, 16px);
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--wb-ui-border-soft);
    background: rgba(12, 22, 40, 0.72);
    color: var(--wb-ui-text);
    box-shadow: 0 8px 16px rgba(3, 8, 16, 0.2);
}

body[data-theme="wizardbattles"] #wb-phase-indicator .wb-phase-indicator-icon {
    color: #ffcb5e;
}

body[data-theme="wizardbattles"] #wb-next-effect-indicator {
    z-index: var(--wb-game-layer-shell);
    margin: clamp(4px, 0.8vw, 8px) clamp(10px, 1.8vw, 16px) clamp(2px, 0.6vw, 6px);
    border: 1px solid rgba(145, 182, 244, 0.24);
    background:
        radial-gradient(circle at 12% 22%, rgba(136, 188, 255, 0.18), rgba(136, 188, 255, 0) 48%),
        radial-gradient(circle at 88% 32%, rgba(223, 178, 102, 0.1), rgba(223, 178, 102, 0) 34%),
        linear-gradient(145deg, rgba(10, 18, 42, 0.9), rgba(6, 11, 28, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        var(--wb-game-shell-shadow-soft);
}

body[data-theme="wizardbattles"] #wb-next-effect-indicator .wb-next-effect-label {
    color: rgba(178, 208, 252, 0.78);
}

body[data-theme="wizardbattles"] #wb-next-effect-indicator .wb-next-effect-text {
    color: #e9f3ff;
}

body[data-theme="wizardbattles"] #wb-duel-context-indicator {
    z-index: var(--wb-game-layer-board);
    margin: clamp(1px, 0.45vw, 6px) clamp(10px, 1.8vw, 16px) clamp(3px, 0.7vw, 8px);
    border: 1px solid rgba(116, 180, 255, 0.32);
    background:
        url('../../assets/ui/mobile/duel_focus_overlay.svg') center / cover no-repeat,
        radial-gradient(circle at 12% 22%, rgba(125, 206, 255, 0.18), rgba(125, 206, 255, 0) 50%),
        radial-gradient(circle at 82% 24%, rgba(var(--wb-game-plum-rgb), 0.12), rgba(var(--wb-game-plum-rgb), 0) 34%),
        linear-gradient(145deg, rgba(7, 20, 45, 0.93), rgba(4, 10, 26, 0.97));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        var(--wb-game-shell-shadow);
}

body[data-theme="wizardbattles"] #wb-duel-context-indicator .wb-duel-ctx-main {
    background:
        radial-gradient(circle at 12% 30%, rgba(var(--wb-game-cool-rgb), 0.12), rgba(var(--wb-game-cool-rgb), 0) 48%),
        linear-gradient(160deg, rgba(15, 31, 69, 0.9), rgba(7, 17, 40, 0.94));
    border-color: rgba(170, 214, 255, 0.2);
}

body[data-theme="wizardbattles"] #wb-duel-context-indicator .wb-duel-ctx-stage-chip--duel {
    border-color: rgba(248, 226, 169, 0.42);
    background:
        linear-gradient(160deg, rgba(78, 56, 20, 0.84), rgba(40, 26, 9, 0.88));
}

body[data-theme="wizardbattles"] #wb-duel-context-indicator .wb-duel-ctx-panel {
    border-color: rgba(170, 214, 255, 0.22);
    background:
        linear-gradient(160deg, rgba(11, 24, 56, 0.84), rgba(6, 16, 38, 0.88));
}

body[data-theme="wizardbattles"] #wb-duel-context-indicator .wb-duel-ctx-panel--turn {
    border-color: rgba(120, 214, 182, 0.22);
}

body[data-theme="wizardbattles"] #wb-duel-context-indicator .wb-duel-ctx-panel--stat {
    border-color: rgba(255, 217, 142, 0.2);
}

body[data-theme="wizardbattles"] #wb-duel-context-indicator .wb-duel-ctx-rail-label {
    color: rgba(184, 218, 255, 0.72);
}

body[data-theme="wizardbattles"] #wb-duel-context-indicator .wb-duel-ctx-stat-name {
    color: rgba(255, 236, 188, 0.96);
}

body[data-theme="wizardbattles"] #wb-stat-announce {
    background:
        radial-gradient(circle at 50% 30%, rgba(125, 206, 255, 0.2), rgba(125, 206, 255, 0) 60%),
        linear-gradient(160deg, rgba(7, 20, 45, 0.94), rgba(3, 11, 29, 0.97));
}

body[data-theme="wizardbattles"] #game-board .battle-arena {
    --wb-slot-w: clamp(94px, 11.6vw, 136px);
    width: min(1200px, 100%);
    max-width: min(1200px, 100%);
    padding: clamp(6px, 1.1vw, 12px) clamp(8px, 1.1vw, 12px) clamp(6px, 0.9vw, 10px);
    gap: clamp(6px, 0.9vw, 10px);
    border-radius: clamp(26px, 3.8vw, 38px);
    background:
        linear-gradient(180deg, rgba(4, 9, 22, 0.28), rgba(4, 9, 22, 0.08));
    box-shadow:
        inset 0 1px 0 rgba(244, 249, 255, 0.08),
        inset 0 0 0 1px rgba(123, 168, 229, 0.08);
}

body[data-theme="wizardbattles"] #game-board .arena-rows {
    width: 100%;
    gap: clamp(6px, 0.8vw, 10px);
    padding: clamp(6px, 0.8vw, 10px);
    border-radius: clamp(24px, 3.4vw, 34px);
    background:
        radial-gradient(circle at 50% 0%, rgba(126, 190, 255, 0.08), rgba(126, 190, 255, 0) 36%),
        radial-gradient(circle at 50% 100%, rgba(255, 223, 157, 0.08), rgba(255, 223, 157, 0) 32%),
        linear-gradient(180deg, rgba(6, 12, 30, 0.54), rgba(4, 9, 22, 0.22));
    border: 1px solid rgba(128, 172, 236, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(244, 249, 255, 0.06),
        0 20px 44px rgba(2, 8, 18, 0.22);
}

body[data-theme="wizardbattles"] #game-board .lineup-row {
    width: min(940px, 100%);
    margin-inline: auto;
    justify-content: space-between;
    gap: clamp(4px, 1vw, 10px);
    padding: clamp(20px, 2.4vw, 26px) clamp(8px, 1.3vw, 12px) clamp(10px, 1.2vw, 14px);
    border-radius: clamp(18px, 2.4vw, 24px);
    background:
        linear-gradient(160deg, rgba(12, 21, 49, 0.9) 0%, rgba(8, 14, 32, 0.94) 100%);
    border: 1px solid rgba(132, 177, 242, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        var(--wb-game-shell-shadow);
}

body[data-theme="wizardbattles"] #game-board .lineup-row::after {
    content: attr(data-row-owner);
    position: absolute;
    top: 10px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(182, 218, 255, 0.2);
    background: rgba(7, 16, 38, 0.72);
    color: rgba(237, 245, 255, 0.9);
    font-family: var(--font-primary-ui);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow:
        0 10px 20px rgba(3, 8, 24, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

body[data-theme="wizardbattles"] #game-board .rival-zone {
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--wb-game-cpu-rgb), 0.12) 0%, rgba(var(--wb-game-cpu-rgb), 0) 34%),
        radial-gradient(circle at 82% 84%, rgba(var(--wb-game-plum-rgb), 0.12) 0%, rgba(var(--wb-game-plum-rgb), 0) 34%),
        linear-gradient(160deg, rgba(28, 20, 56, 0.94) 0%, rgba(10, 14, 34, 0.97) 100%);
}

body[data-theme="wizardbattles"] #game-board .player-zone {
    background:
        radial-gradient(circle at 82% 78%, rgba(var(--wb-game-player-rgb), 0.14) 0%, rgba(var(--wb-game-player-rgb), 0) 36%),
        radial-gradient(circle at 18% 24%, rgba(var(--wb-game-teal-rgb), 0.12) 0%, rgba(var(--wb-game-teal-rgb), 0) 34%),
        linear-gradient(160deg, rgba(10, 26, 50, 0.94) 0%, rgba(8, 14, 32, 0.97) 100%);
}

body[data-theme="wizardbattles"] #game-board .rival-zone::after {
    border-color: rgba(255, 175, 190, 0.22);
    background: rgba(64, 18, 35, 0.46);
    color: #ffd2dc;
}

body[data-theme="wizardbattles"] #game-board .player-zone::after {
    border-color: rgba(148, 236, 219, 0.22);
    background: rgba(13, 55, 60, 0.42);
    color: #bff7e7;
}

body[data-theme="wizardbattles"] #game-board .lineup-row.has-active-duel {
    border-color: rgba(238, 208, 142, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(238, 208, 142, 0.16),
        0 20px 44px rgba(2, 8, 18, 0.28);
}

body[data-theme="wizardbattles"] #game-board .lineup-row.has-pending-duel {
    border-color: rgba(140, 198, 255, 0.26);
}

body[data-theme="wizardbattles"] #game-board .slot-wrapper {
    gap: 6px;
    padding: clamp(6px, 0.8vw, 8px) clamp(5px, 0.8vw, 8px) 8px;
    border-radius: 20px;
    border: 1px solid rgba(133, 176, 236, 0.08);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 227, 163, 0.08), rgba(255, 227, 163, 0) 44%),
        linear-gradient(180deg, rgba(10, 18, 42, 0.46), rgba(7, 14, 30, 0.18));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 24px rgba(2, 8, 18, 0.12);
    transition: transform 200ms var(--ease-spring), border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

body[data-theme="wizardbattles"] #game-board .slot-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 228, 154, 0.12), rgba(255, 228, 154, 0) 42%),
        linear-gradient(180deg, rgba(122, 185, 255, 0.06), rgba(122, 185, 255, 0));
    opacity: 0;
    transition: opacity 220ms ease;
}

body[data-theme="wizardbattles"] #game-board .slot-wrapper.is-filled::before {
    opacity: 0.72;
}

body[data-theme="wizardbattles"] #game-board .slot-wrapper.is-active-duel {
    transform: translateY(-2px);
    border-color: rgba(245, 232, 171, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 34px rgba(2, 8, 18, 0.24),
        0 0 0 1px rgba(245, 232, 171, 0.12);
}

body[data-theme="wizardbattles"] #game-board .slot-wrapper.is-active-duel::before {
    opacity: 1;
}

body[data-theme="wizardbattles"] #game-board .slot-wrapper.is-pending-duel {
    border-color: rgba(126, 190, 255, 0.18);
}

body[data-theme="wizardbattles"] #game-board .slot-wrapper.is-win {
    border-color: rgba(135, 222, 172, 0.2);
}

body[data-theme="wizardbattles"] #game-board .slot-wrapper.is-loss {
    border-color: rgba(255, 150, 164, 0.18);
}

body[data-theme="wizardbattles"] #game-board .card-slot {
    width: var(--wb-slot-w);
    height: calc(var(--wb-slot-w) * 1.4);
    border-radius: 15px;
    border: 1px solid rgba(170, 210, 255, 0.22);
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 226, 164, 0.12), rgba(255, 226, 164, 0) 34%),
        radial-gradient(circle at 50% 38%, rgba(152, 205, 255, 0.08), rgba(152, 205, 255, 0) 56%),
        linear-gradient(160deg, rgba(11, 20, 48, 0.92), rgba(7, 14, 30, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 18px 30px rgba(1, 7, 18, 0.26),
        0 10px 20px rgba(2, 8, 18, 0.18);
}

body[data-theme="wizardbattles"] #game-board .card-slot.active-duel {
    border-color: rgba(245, 232, 171, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 18px 30px rgba(1, 7, 18, 0.2),
        0 0 0 1px rgba(245, 232, 171, 0.2),
        0 0 24px rgba(245, 232, 171, 0.16),
        0 16px 28px rgba(2, 8, 18, 0.3);
}

body[data-theme="wizardbattles"] #game-board .card-slot.pending-duel {
    border-color: rgba(126, 190, 255, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 18px 30px rgba(1, 7, 18, 0.22),
        0 0 0 1px rgba(126, 190, 255, 0.14);
    animation: wb-slot-pending-beacon 1.8s ease-in-out infinite;
}

body[data-theme="wizardbattles"] #game-board .card-slot.win {
    border-color: rgba(141, 232, 181, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 18px 30px rgba(1, 7, 18, 0.22),
        0 0 0 1px rgba(141, 232, 181, 0.16),
        0 0 22px rgba(116, 214, 167, 0.18);
}

body[data-theme="wizardbattles"] #game-board .card-slot.loss {
    border-color: rgba(255, 163, 179, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 18px 30px rgba(1, 7, 18, 0.22),
        0 0 0 1px rgba(255, 163, 179, 0.14),
        0 0 18px rgba(255, 120, 144, 0.14);
}

body[data-theme="wizardbattles"] #game-board .card-slot.win .card-mini,
body[data-theme="wizardbattles"] #game-board .card-slot.active-duel .card-mini {
    filter: saturate(1.04) brightness(1.04);
}

body[data-theme="wizardbattles"] #game-board .card-slot.loss .card-mini {
    filter: saturate(0.9) brightness(0.95);
}

body[data-theme="wizardbattles"] #game-board .rival-zone .card-slot {
    width: calc(var(--wb-slot-w) * 0.96);
    height: calc(var(--wb-slot-w) * 1.34);
}

body[data-theme="wizardbattles"] #game-board .pos-label-vertical {
    position: relative;
    z-index: 1;
}

body[data-theme="wizardbattles"] #game-board[data-arena-tone='plan'] .arena-rows {
    border-color: rgba(126, 190, 255, 0.16);
}

body[data-theme="wizardbattles"] #game-board[data-arena-tone='card'] .arena-rows {
    border-color: rgba(255, 215, 142, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(244, 249, 255, 0.06),
        0 24px 48px rgba(2, 8, 18, 0.24),
        0 0 0 1px rgba(255, 215, 142, 0.08);
}

body[data-theme="wizardbattles"] #game-board[data-arena-tone='resolve'] .arena-rows {
    border-color: rgba(255, 215, 142, 0.2);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 221, 145, 0.12), rgba(255, 221, 145, 0) 30%),
        radial-gradient(circle at 50% 100%, rgba(126, 190, 255, 0.08), rgba(126, 190, 255, 0) 34%),
        linear-gradient(180deg, rgba(5, 12, 28, 0.52), rgba(4, 9, 22, 0.22));
}

body[data-theme="wizardbattles"] #game-result-overlay .result-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

body[data-theme="wizardbattles"] #game-result-overlay .result-summary-item {
    display: grid;
    gap: 6px;
    padding: 10px 12px 12px;
    border-radius: 18px;
    border: 1px solid rgba(182, 218, 255, 0.18);
    background:
        linear-gradient(160deg, rgba(12, 22, 50, 0.76), rgba(7, 16, 38, 0.84));
    box-shadow:
        0 12px 24px rgba(3, 8, 24, 0.2),
        inset 0 1px 0 rgba(236, 246, 255, 0.14);
}

body[data-theme="wizardbattles"] #game-result-overlay .result-summary-label {
    color: rgba(193, 216, 244, 0.72);
    font-family: var(--font-primary-ui);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body[data-theme="wizardbattles"] #game-result-overlay .result-summary-value {
    color: rgba(241, 248, 255, 0.96);
    font-family: var(--font-primary-ui);
    font-size: clamp(0.94rem, 2vw, 1.08rem);
    font-weight: 800;
    letter-spacing: 0.03em;
}

body[data-theme="wizardbattles"] #game-result-overlay .result-score-item.is-winner {
    border-color: rgba(245, 232, 171, 0.38);
    box-shadow:
        0 18px 32px rgba(3, 8, 24, 0.3),
        inset 0 1px 0 rgba(255, 248, 228, 0.2),
        0 0 0 1px rgba(245, 232, 171, 0.12);
}

body[data-theme="wizardbattles"] #game-result-overlay .result-score-item.is-loser {
    opacity: 0.84;
}

body[data-theme="wizardbattles"] #game-result-overlay .result-score-item.is-tie {
    border-color: rgba(171, 214, 255, 0.28);
}

body[data-theme="wizardbattles"] #game-result-overlay[data-result='win'] .result-hero-frame,
body[data-theme="wizardbattles"] #game-result-overlay .result-overlay-container[data-result='win'] .result-hero-frame {
    box-shadow:
        0 22px 38px rgba(3, 8, 24, 0.34),
        0 0 0 1px rgba(245, 232, 171, 0.16),
        0 0 34px rgba(245, 232, 171, 0.16),
        inset 0 1px 0 rgba(236, 246, 255, 0.18);
}

body[data-theme="wizardbattles"] #game-result-overlay[data-result='loss'] .result-hero-frame,
body[data-theme="wizardbattles"] #game-result-overlay .result-overlay-container[data-result='loss'] .result-hero-frame {
    box-shadow:
        0 22px 38px rgba(3, 8, 24, 0.34),
        0 0 0 1px rgba(255, 163, 179, 0.14),
        0 0 30px rgba(255, 120, 144, 0.14),
        inset 0 1px 0 rgba(236, 246, 255, 0.18);
}

@keyframes wb-slot-pending-beacon {
    0%, 100% {
        transform: translateY(0);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 18px 30px rgba(1, 7, 18, 0.22),
            0 0 0 1px rgba(126, 190, 255, 0.14);
    }

    50% {
        transform: translateY(-1px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            inset 0 18px 30px rgba(1, 7, 18, 0.18),
            0 0 0 1px rgba(126, 190, 255, 0.2),
            0 0 22px rgba(126, 190, 255, 0.16);
    }
}

body[data-theme="wizardbattles"] #combat-bottom-bar {
    z-index: var(--wb-game-layer-dock);
    border-top: 1px solid color-mix(in srgb, var(--wb-ui-accent) 28%, var(--wb-ui-border-soft));
    background:
        url('../../assets/ui/mobile/hand_dock_frame.svg') center top / cover no-repeat,
        linear-gradient(180deg, rgba(13, 22, 40, 0.94), rgba(10, 17, 33, 0.98));
    box-shadow: 0 -18px 30px rgba(2, 8, 18, 0.34);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}

body[data-theme="wizardbattles"] #combat-bottom-bar > .w-full {
    padding-inline: clamp(8px, 1.2vw, 14px);
}

body[data-theme="wizardbattles"] .hand-dock {
    --wb-hand-card-w: clamp(82px, 10vw, 118px);
    --wb-hand-overlap: clamp(14px, 2.2vw, 36px);
    padding: 6px 0 2px;
    border-top: 1px solid rgba(163, 188, 226, 0.12);
    background: transparent;
    box-shadow: none;
}

body[data-theme="wizardbattles"] .hand-dock-body {
    min-height: clamp(104px, 22vw, 160px);
}

body[data-theme="wizardbattles"] #player-hand.hand-dock-content {
    min-height: clamp(104px, 22vw, 160px);
    padding-inline: clamp(8px, 1.6vw, 14px);
}

body[data-theme="wizardbattles"] #player-hand.hand-dock-content .card-mini {
    width: var(--wb-hand-card-w);
    height: calc(var(--wb-hand-card-w) * 1.4);
    margin-left: calc(var(--wb-hand-overlap) * -1);
    border: 1px solid rgba(193, 212, 242, 0.5);
    box-shadow: 0 6px 18px rgba(2, 8, 18, 0.34);
}

body[data-theme="wizardbattles"] #combat-bottom-bar .combat-bottom-actions .btn,
body[data-theme="wizardbattles"] #btn-exit-combat {
    min-height: 40px;
    border-radius: 12px;
    border-color: var(--wb-ui-border-soft);
    background: rgba(12, 22, 40, 0.78);
    color: var(--wb-ui-text);
}

body[data-theme="wizardbattles"] #combat-bottom-bar .combat-bottom-actions .btn.btn-primary {
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--wb-ui-accent) 30%, #ffaf53), #b5793d);
    border-color: rgba(255, 222, 164, 0.54);
    color: #fff8eb;
}

body[data-theme="wizardbattles"] #combat-bottom-bar .combat-bottom-actions .btn:hover,
body[data-theme="wizardbattles"] #btn-exit-combat:hover {
    transform: translateY(-1px);
}

body[data-theme="wizardbattles"] #combat-bottom-bar .combat-bottom-actions {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 900px) {
    body[data-theme="wizardbattles"] #hub-screen .hub-content {
        gap: 10px;
    }

    body[data-theme="wizardbattles"] #game-board {
        margin: 0;
        border-radius: 0;
        border-inline: 0;
    }

    body[data-theme="wizardbattles"] #wb-game-header {
        /* Preserve right padding for fixed menu button */
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: 62px;
    }

    body[data-theme="wizardbattles"] #game-board .battle-arena {
        --wb-slot-w: clamp(84px, 26vw, 114px);
        padding-inline: 6px;
    }

    body[data-theme="wizardbattles"] #game-board .arena-rows {
        padding: 6px;
        border-radius: 22px;
    }

    body[data-theme="wizardbattles"] #game-board .lineup-row {
        width: 100%;
        padding: 18px 6px 8px;
        gap: 4px;
    }

    body[data-theme="wizardbattles"] #game-board .lineup-row::after {
        top: 8px;
        left: 10px;
        min-height: 22px;
        padding: 0 8px;
        font-size: 0.54rem;
    }

    body[data-theme="wizardbattles"] #game-board .slot-wrapper {
        padding: 6px 4px 6px;
        border-radius: 16px;
    }

    body[data-theme="wizardbattles"] .hand-dock {
        --wb-hand-card-w: clamp(76px, 22vw, 104px);
        --wb-hand-overlap: clamp(18px, 5.5vw, 28px);
    }

    body[data-theme="wizardbattles"] #combat-bottom-bar .flex.items-center.justify-between {
        padding-inline: 10px;
    }

    body[data-theme="wizardbattles"] #combat-bottom-bar .combat-bottom-actions {
        justify-content: flex-end;
        gap: 8px;
    }

    body[data-theme="wizardbattles"] #game-result-overlay .result-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    body[data-theme="wizardbattles"] #game-result-overlay .result-summary-item {
        padding: 10px;
        border-radius: 16px;
    }
}

/* EDITOR */
body[data-page="editor"] .editor-page-topbar,
body[data-page="editor"] .editor-tabs,
body[data-page="editor"] #tab-cards.cards-editor-view .card-browser-panel,
body[data-page="editor"] #tab-cards.cards-editor-view .card-preview-panel,
body[data-page="editor"] #tab-cards.cards-editor-view .card-editor-panel {
    background: var(--wb-ui-panel-bg);
    border: 1px solid var(--wb-ui-border-soft);
    box-shadow: var(--wb-ui-shadow-sm);
}

body[data-page="editor"] #tab-cards.cards-editor-view .editor-section > summary,
body[data-page="editor"] #tab-cards.cards-editor-view .wb-acc > summary,
body[data-page="editor"] #tab-cards.cards-editor-view .preview-options > summary {
    min-height: var(--wb-ui-control-h-sm);
}

body[data-page="editor"] #tab-cards.cards-editor-view .editor-section .editor-section-body,
body[data-page="editor"] #tab-cards.cards-editor-view .wb-acc .editor-section-body {
    background: var(--wb-ui-panel-bg-soft);
}

body[data-page="editor"] #tab-cards.cards-editor-view .editor-status {
    border-color: var(--wb-ui-border-soft);
}

/* Shared utility for panel consistency */
.wb-surface-panel {
    background: var(--wb-ui-panel-bg);
    border: 1px solid var(--wb-ui-border-soft);
    border-radius: var(--wb-ui-radius-lg);
    box-shadow: var(--wb-ui-shadow-sm);
}

.wb-text-muted {
    color: var(--wb-ui-text-muted);
}

.wb-text-subtle {
    color: var(--wb-ui-text-subtle);
}

/* ==========================================
   HUB Refresh (2026-03-08)
   ========================================== */
body[data-theme="wizardbattles"] #hub-screen {
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
}

body[data-theme="wizardbattles"] #hub-screen::before {
    background:
        linear-gradient(180deg, rgba(5, 9, 18, 0.14) 0%, rgba(5, 9, 18, 0.34) 42%, rgba(3, 5, 12, 0.82) 100%),
        radial-gradient(circle at 50% 16%, rgba(244, 201, 81, 0.18), transparent 24%),
        radial-gradient(circle at 18% 12%, rgba(126, 189, 255, 0.14), transparent 26%),
        radial-gradient(circle at 82% 10%, rgba(126, 189, 255, 0.1), transparent 24%);
}

body[data-theme="wizardbattles"] #hub-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        url('../../assets/ui/mobile/hub_backplate.svg') center 32% / min(92vw, 760px) auto no-repeat;
    opacity: 0.28;
    mix-blend-mode: screen;
}

body[data-theme="wizardbattles"] #hub-screen .hub-content {
    width: min(1180px, 100%);
    min-height: 100%;
    display: flex;
    align-items: stretch;
    padding:
        max(env(safe-area-inset-top), 18px)
        clamp(14px, 2.4vw, 28px)
        calc(max(env(safe-area-inset-bottom), 18px) + 18px);
}

body[data-theme="wizardbattles"] #hub-screen .hub-layout {
    width: 100%;
    min-height: 100%;
    display: grid;
    gap: 18px;
    align-content: start;
}

body[data-theme="wizardbattles"] #hub-screen .hub-hero-panel,
body[data-theme="wizardbattles"] #hub-screen .hub-command-panel {
    position: relative;
    z-index: 1;
}

body[data-theme="wizardbattles"] #hub-screen .hub-hero-panel {
    display: grid;
    gap: 16px;
}

body[data-theme="wizardbattles"] #hub-screen .hub-hero-copy {
    display: grid;
    justify-items: center;
    gap: 14px;
}

body[data-theme="wizardbattles"] #hub-screen .hub-topbar {
    width: 100%;
    padding-inline: 2px;
}

body[data-theme="wizardbattles"] #hub-screen .hub-set-pill {
    gap: 10px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(236, 228, 206, 0.8);
    border: 1px solid rgba(64, 54, 44, 0.18);
    box-shadow: 0 10px 20px rgba(7, 10, 18, 0.16);
    color: rgba(68, 56, 42, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body[data-theme="wizardbattles"] #hub-screen .hub-set-value {
    color: rgba(125, 93, 25, 0.92);
}

body[data-theme="wizardbattles"] #hub-screen .hub-brand-mark {
    width: 104px;
    height: 16px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(244, 201, 81, 0), rgba(244, 201, 81, 0.58) 34%, rgba(214, 228, 255, 0.86) 56%, rgba(244, 201, 81, 0) 100%);
    box-shadow:
        0 0 24px rgba(244, 201, 81, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    opacity: 0.78;
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-title {
    width: 100%;
    margin: 0;
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-title-halo {
    width: min(78vw, 400px);
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-title-halo img {
    width: 100%;
    opacity: 0.66;
    filter:
        drop-shadow(0 0 26px rgba(244, 201, 81, 0.14))
        drop-shadow(0 0 42px rgba(126, 189, 255, 0.16));
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-title img {
    width: min(82vw, 430px);
    max-width: 430px;
    opacity: 1;
    filter:
        drop-shadow(0 18px 28px rgba(6, 10, 20, 0.46))
        drop-shadow(0 0 24px rgba(244, 201, 81, 0.14));
}

body[data-theme="wizardbattles"] #hub-screen .hub-subtitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(100%, 420px);
    min-height: 36px;
    padding: 8px 16px;
    margin: 0;
    border-radius: 999px;
    background: rgba(236, 228, 206, 0.9);
    border: 1px solid rgba(70, 58, 44, 0.16);
    color: rgba(66, 54, 44, 0.92);
    box-shadow: 0 10px 22px rgba(7, 10, 18, 0.18);
}

body[data-theme="wizardbattles"] #hub-mode-summary-card {
    width: min(100%, 620px);
    padding: 18px 18px 20px;
    border-radius: 26px;
    border: 1px solid rgba(232, 214, 168, 0.16);
    background:
        linear-gradient(160deg, rgba(11, 18, 39, 0.9) 0%, rgba(8, 13, 30, 0.94) 100%);
    box-shadow:
        0 18px 36px rgba(4, 8, 18, 0.36),
        inset 0 1px 0 rgba(255, 247, 229, 0.08);
    gap: 12px;
    justify-items: start;
    align-items: start;
    text-align: left;
    overflow: hidden;
}

body[data-theme="wizardbattles"] .hub-summary-card__eyebrow {
    width: 100%;
    justify-content: flex-start;
}

body[data-theme="wizardbattles"] #hub-mode-summary-card[data-mode='classic'] {
    border-color: rgba(126, 189, 255, 0.22);
    background:
        radial-gradient(circle at 86% 18%, rgba(126, 189, 255, 0.12), rgba(126, 189, 255, 0) 28%),
        linear-gradient(160deg, rgba(10, 20, 44, 0.92) 0%, rgba(6, 12, 28, 0.96) 100%);
}

body[data-theme="wizardbattles"] #hub-mode-summary-card[data-mode='master'] {
    border-color: rgba(244, 201, 81, 0.22);
    background:
        radial-gradient(circle at 86% 18%, rgba(244, 201, 81, 0.12), rgba(244, 201, 81, 0) 28%),
        linear-gradient(160deg, rgba(18, 20, 42, 0.92) 0%, rgba(8, 13, 30, 0.96) 100%);
}

body[data-theme="wizardbattles"] .hub-mode-pill {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(239, 245, 255, 0.08);
    border: 1px solid rgba(239, 245, 255, 0.1);
    color: #f1e1b2;
    box-shadow: none;
}

body[data-theme="wizardbattles"] .hub-mode-headline {
    display: block;
    color: #fff6e0;
    text-shadow: 0 8px 20px rgba(4, 8, 18, 0.42);
}

body[data-theme="wizardbattles"] .hub-mode-desc {
    display: block;
    max-width: 52ch;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: rgba(226, 219, 201, 0.86);
    font-size: 0.98rem;
    line-height: 1.45;
}

body[data-theme="wizardbattles"] .hub-mode-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body[data-theme="wizardbattles"] .hub-mode-chip {
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(236, 228, 206, 0.88);
    border: 1px solid rgba(68, 56, 42, 0.12);
    color: rgba(68, 56, 42, 0.88);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
}

body[data-theme="wizardbattles"] #hub-screen .hub-command-panel {
    margin-top: auto;
    display: grid;
    gap: 14px;
    padding: 18px 16px 18px;
    border-radius: 30px;
    border: 1px solid rgba(224, 205, 162, 0.18);
    background:
        linear-gradient(180deg, rgba(8, 14, 30, 0.72) 0%, rgba(4, 8, 20, 0.9) 100%);
    box-shadow:
        0 24px 46px rgba(3, 7, 16, 0.38),
        inset 0 1px 0 rgba(255, 247, 229, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body[data-theme="wizardbattles"] #hub-screen .hub-command-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 14% 0%, rgba(244, 201, 81, 0.12), rgba(244, 201, 81, 0) 22%),
        radial-gradient(circle at 86% 8%, rgba(126, 189, 255, 0.12), rgba(126, 189, 255, 0) 24%);
}

body[data-theme="wizardbattles"] #hub-screen .hub-command-panel__header {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

body[data-theme="wizardbattles"] #hub-screen .hub-command-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(244, 201, 81, 0.18);
    background: rgba(244, 201, 81, 0.08);
    color: #f0c951;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body[data-theme="wizardbattles"] #hub-screen .hub-command-copy {
    color: rgba(224, 217, 202, 0.72);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    line-height: 1.35;
}

body[data-theme="wizardbattles"] #hub-screen .hub-carousel {
    gap: 12px;
}

body[data-theme="wizardbattles"] #hub-screen .hub-carousel-shell {
    width: 100%;
    padding: 10px 12px 12px;
    border-radius: 24px;
    border: 1px solid rgba(239, 245, 255, 0.08);
    background: rgba(5, 10, 24, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body[data-theme="wizardbattles"] #hub-carousel-track {
    gap: 14px;
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-card-wrapper {
    position: relative;
    gap: 10px;
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: clamp(10px, 1.4vw, 14px);
    z-index: 4;
    width: max-content;
    max-width: calc(100% - 24px);
    min-height: 28px;
    padding: 0 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(9, 16, 38, 0.8);
    border: 1px solid rgba(240, 201, 81, 0.16);
    color: rgba(243, 236, 224, 0.94);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: uppercase;
    transform: translateX(-50%);
    pointer-events: none;
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-card img {
    box-shadow:
        0 14px 30px rgba(3, 7, 16, 0.34),
        inset 0 1px 0 rgba(255, 247, 229, 0.2);
}

body[data-theme="wizardbattles"] #hub-screen .hub-primary-action {
    width: 100%;
    margin-top: 0;
    padding-inline: 0;
}

body[data-theme="wizardbattles"] #hub-play-btn {
    width: min(100%, 420px);
    max-width: none;
    min-height: 82px;
    margin-inline: auto;
    overflow: visible;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__backdrop {
    inset: 0;
    border-radius: 24px;
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
    border: 1px solid color-mix(in srgb, var(--wb-hub-cta-accent) 46%, rgba(239, 245, 255, 0.24));
    background:
        linear-gradient(180deg, rgba(252, 246, 230, 0.14), rgba(252, 246, 230, 0) 22%),
        linear-gradient(140deg, rgba(19, 31, 62, 0.98) 0%, rgba(14, 20, 38, 0.98) 46%, rgba(8, 13, 28, 0.99) 100%);
    box-shadow:
        0 22px 38px rgba(4, 8, 18, 0.42),
        0 0 28px color-mix(in srgb, var(--wb-hub-cta-accent) 12%, transparent),
        inset 0 1px 0 rgba(255, 247, 229, 0.18),
        inset 0 -22px 34px rgba(3, 7, 16, 0.34);
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__spark {
    left: 14%;
    right: 14%;
    bottom: -14%;
    height: 56%;
    opacity: 0.48;
    filter: blur(18px);
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__content {
    justify-items: stretch;
    gap: 7px;
    padding: 14px 18px 16px;
    text-align: left;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__kicker {
    justify-content: flex-start;
    font-size: 0.56rem;
    letter-spacing: 0.18em;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__main {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__sigil,
body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__arrow {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__label {
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    letter-spacing: 0.1em;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: auto;
    color: color-mix(in srgb, var(--wb-hub-cta-accent) 70%, rgba(255, 246, 222, 0.92));
    font-size: 1.6rem;
    line-height: 1;
}

body[data-theme="wizardbattles"] #hub-play-btn:hover .hub-play-btn__backdrop {
    box-shadow:
        0 26px 44px rgba(4, 8, 18, 0.46),
        0 0 34px color-mix(in srgb, var(--wb-hub-cta-accent) 16%, transparent),
        inset 0 1px 0 rgba(255, 247, 229, 0.24),
        inset 0 -24px 38px rgba(3, 7, 16, 0.38);
}

body[data-theme="wizardbattles"] #hub-play-btn:hover .hub-play-btn__arrow {
    transform: translateX(2px);
}

@media (min-width: 980px) {
    body[data-theme="wizardbattles"] #hub-screen .hub-layout {
        grid-template-columns: minmax(320px, 0.9fr) minmax(480px, 1.1fr);
        align-items: end;
        gap: 26px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-hero-panel {
        align-self: stretch;
        padding-top: 6px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-hero-copy {
        justify-items: start;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title {
        justify-content: flex-start;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title-halo {
        left: 40%;
        width: min(30vw, 390px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title img {
        width: min(34vw, 420px);
        margin: 0;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-subtitle {
        justify-self: start;
    }

    body[data-theme="wizardbattles"] #hub-mode-summary-card {
        width: min(100%, 500px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-command-panel {
        padding: 22px 24px 24px;
        border-radius: 34px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-command-panel__header {
        justify-items: start;
        text-align: left;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-carousel-shell {
        padding: 16px 18px 18px;
    }

    body[data-theme="wizardbattles"] #hub-carousel-track {
        justify-content: center;
        gap: 22px;
        padding: 12px 16px;
        overflow: visible;
        scroll-snap-type: none;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-card-wrapper {
        --hub-mode-width: min(17vw, 214px);
        flex: 0 0 var(--hub-mode-width);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-primary-action {
        justify-content: flex-start;
        margin-top: 4px;
    }

    body[data-theme="wizardbattles"] #hub-play-btn {
        margin-inline: 0;
    }
}

/* Hub cleanup pass (2026-03-08) */
body[data-theme="wizardbattles"] #hub-mode-summary-card {
    display: none;
}

body[data-theme="wizardbattles"] #hub-screen::before {
    background:
        linear-gradient(180deg, rgba(5, 9, 18, 0.05) 0%, rgba(5, 9, 18, 0.16) 38%, rgba(3, 5, 12, 0.72) 100%),
        radial-gradient(circle at 50% 16%, rgba(244, 201, 81, 0.12), transparent 22%),
        radial-gradient(circle at 18% 12%, rgba(126, 189, 255, 0.08), transparent 24%),
        radial-gradient(circle at 82% 10%, rgba(126, 189, 255, 0.07), transparent 22%);
}

body[data-theme="wizardbattles"] #hub-screen::after {
    background:
        url('../../assets/ui/mobile/hub_backplate.svg') center 28% / min(90vw, 720px) auto no-repeat;
    opacity: 0.18;
}

body[data-theme="wizardbattles"] #hub-screen .hub-content {
    width: min(1100px, 100%);
}

body[data-theme="wizardbattles"] #hub-screen .hub-layout {
    gap: clamp(16px, 2.4vw, 26px);
    align-content: space-between;
}

body[data-theme="wizardbattles"] #hub-screen .hub-hero-copy {
    gap: 10px;
}

body[data-theme="wizardbattles"] #hub-screen .hub-brand-mark {
    width: 88px;
    opacity: 0.62;
}

body[data-theme="wizardbattles"] #hub-screen .hub-mode-title img {
    filter:
        drop-shadow(0 16px 24px rgba(6, 10, 20, 0.42))
        drop-shadow(0 0 18px rgba(244, 201, 81, 0.12));
}

body[data-theme="wizardbattles"] #hub-screen .hub-subtitle {
    max-width: min(100%, 360px);
    min-height: 32px;
    padding: 7px 14px;
    background: rgba(236, 228, 206, 0.82);
    box-shadow: 0 8px 18px rgba(7, 10, 18, 0.14);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

body[data-theme="wizardbattles"] #hub-screen .hub-command-panel {
    max-width: min(100%, 440px);
    gap: 14px;
    padding: 18px 18px 18px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(7, 12, 26, 0.72) 0%, rgba(4, 8, 20, 0.88) 100%);
    box-shadow:
        0 18px 36px rgba(3, 7, 16, 0.34),
        inset 0 1px 0 rgba(255, 247, 229, 0.05);
}

body[data-theme="wizardbattles"] #hub-screen .hub-command-panel__header {
    gap: 3px;
}

body[data-theme="wizardbattles"] #hub-screen .hub-command-kicker {
    min-height: 22px;
    padding: 0 9px;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
}

body[data-theme="wizardbattles"] #hub-screen .hub-command-copy {
    max-width: 22ch;
    color: rgba(224, 217, 202, 0.58);
    font-size: 0.72rem;
}

body[data-theme="wizardbattles"] #hub-screen .hub-carousel-shell {
    padding: 10px 12px 10px;
    border-radius: 22px;
    background: rgba(5, 10, 24, 0.22);
}

body[data-theme="wizardbattles"] #hub-carousel-track {
    gap: 12px;
}

body[data-theme="wizardbattles"] #hub-play-btn {
    position: relative;
    display: block;
    width: min(100%, 356px);
    max-width: min(100%, 356px);
    min-height: 72px;
    margin-inline: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #f7edd5;
    text-align: left;
    isolation: isolate;
    overflow: visible;
}

body[data-theme="wizardbattles"] #hub-play-btn::before,
body[data-theme="wizardbattles"] #hub-play-btn::after {
    display: none;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__spark,
body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__kicker,
body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__sigil {
    display: none;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__backdrop {
    inset: 0;
    border-radius: 18px;
    clip-path: none;
    border: 1px solid color-mix(in srgb, var(--wb-hub-cta-accent) 38%, rgba(239, 245, 255, 0.18));
    background:
        linear-gradient(90deg, rgba(244, 201, 81, 0.16) 0%, rgba(244, 201, 81, 0) 18%, rgba(126, 189, 255, 0) 82%, rgba(126, 189, 255, 0.12) 100%),
        linear-gradient(180deg, rgba(252, 246, 230, 0.12), rgba(252, 246, 230, 0) 24%),
        linear-gradient(180deg, rgba(18, 27, 52, 0.96) 0%, rgba(9, 15, 30, 0.98) 100%);
    box-shadow:
        0 18px 34px rgba(4, 8, 18, 0.34),
        0 0 22px color-mix(in srgb, var(--wb-hub-cta-accent) 12%, transparent),
        inset 0 1px 0 rgba(255, 247, 229, 0.14),
        inset 0 -1px 0 rgba(244, 201, 81, 0.18);
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__content {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    justify-items: stretch;
    min-height: inherit;
    padding: 14px 16px;
    text-align: left;
    gap: 0;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    width: 100%;
    gap: 12px;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__label {
    display: block;
    margin: 0;
    color: #f7edd5;
    font-family: 'Cinzel', serif;
    font-size: clamp(1rem, 2.8vw, 1.24rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(244, 201, 81, 0.22);
    background: rgba(244, 201, 81, 0.08);
    color: color-mix(in srgb, var(--wb-hub-cta-accent) 72%, #fff1cf);
    font-size: 1rem;
    line-height: 1;
}

body[data-theme="wizardbattles"] #hub-play-btn:hover .hub-play-btn__backdrop {
    box-shadow:
        0 22px 38px rgba(4, 8, 18, 0.4),
        0 0 24px color-mix(in srgb, var(--wb-hub-cta-accent) 14%, transparent),
        inset 0 1px 0 rgba(255, 247, 229, 0.18),
        inset 0 -1px 0 rgba(244, 201, 81, 0.24);
}

body[data-theme="wizardbattles"] #hub-play-btn:hover .hub-play-btn__arrow {
    transform: translateX(2px);
}

@media (min-width: 980px) {
    body[data-theme="wizardbattles"] #hub-screen .hub-layout {
        grid-template-columns: minmax(320px, 1fr) minmax(340px, 430px);
        align-items: center;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-hero-panel {
        padding-bottom: 36px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-command-panel {
        margin-left: auto;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-command-copy {
        max-width: 24ch;
    }
}

/* Hub desktop polish pass (2026-03-08) */
@media (min-width: 980px) {
    body[data-theme="wizardbattles"] #hub-screen {
        min-height: 100dvh;
        overflow: hidden;
    }

    body[data-theme="wizardbattles"] #hub-screen::before {
        background:
            linear-gradient(180deg, rgba(5, 9, 18, 0.1) 0%, rgba(5, 9, 18, 0.18) 28%, rgba(3, 5, 12, 0.78) 100%),
            radial-gradient(circle at 28% 48%, rgba(244, 201, 81, 0.14), rgba(244, 201, 81, 0) 22%),
            radial-gradient(circle at 72% 40%, rgba(126, 189, 255, 0.12), rgba(126, 189, 255, 0) 24%),
            radial-gradient(circle at 50% 14%, rgba(244, 201, 81, 0.08), rgba(244, 201, 81, 0) 16%);
    }

    body[data-theme="wizardbattles"] #hub-screen::after {
        background:
            url('../../assets/ui/mobile/hub_backplate.svg') 30% 48% / min(46vw, 660px) auto no-repeat;
        opacity: 0.2;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-content {
        width: min(1240px, calc(100% - 72px));
        min-height: 100%;
        align-items: center;
        padding:
            max(env(safe-area-inset-top), 26px)
            clamp(28px, 3vw, 44px)
            max(env(safe-area-inset-bottom), 28px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-layout {
        min-height: 100%;
        align-self: center;
        width: 100%;
        grid-template-columns: minmax(520px, 1.12fr) minmax(380px, 430px);
        align-items: center;
        align-content: center;
        gap: clamp(42px, 5vw, 88px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-hero-panel {
        min-height: min(68vh, 620px);
        align-content: center;
        gap: 24px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-topbar {
        max-width: 420px;
        padding-inline: 0;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-hero-copy {
        max-width: 640px;
        justify-items: start;
        align-content: center;
        gap: 18px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: min(46vh, 420px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title-halo {
        left: 34%;
        width: min(36vw, 500px);
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-title img {
        width: min(35vw, 460px);
        max-width: 460px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-subtitle {
        justify-self: start;
        max-width: 360px;
        min-height: 34px;
        padding: 7px 16px;
        font-size: 0.7rem;
        letter-spacing: 0.14em;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-command-panel {
        width: min(100%, 430px);
        max-width: 430px;
        margin-top: 0;
        margin-left: auto;
        align-self: center;
        gap: 16px;
        padding: 22px 22px 20px;
        border-radius: 30px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-command-panel__header {
        justify-items: start;
        text-align: left;
        gap: 4px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-command-copy {
        display: block;
        max-width: 24ch;
        font-size: 0.76rem;
        line-height: 1.35;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-carousel-shell {
        padding: 14px 14px 12px;
        border-radius: 24px;
    }

    body[data-theme="wizardbattles"] #hub-carousel-track {
        justify-content: center;
        gap: 18px;
        padding: 10px 8px 6px;
        overflow: visible;
        scroll-snap-type: none;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-card-wrapper {
        --hub-mode-width: min(16vw, 196px);
        flex: 0 0 var(--hub-mode-width);
        gap: 8px;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-mode-label {
        min-height: 26px;
        padding: 0 11px;
        font-size: 0.58rem;
    }

    body[data-theme="wizardbattles"] #hub-screen .hub-primary-action {
        width: 100%;
        margin-top: 2px;
        justify-content: flex-start;
    }

    body[data-theme="wizardbattles"] #hub-play-btn {
        width: 100%;
        max-width: none;
        min-height: 74px;
        margin-inline: 0;
    }

    body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__content {
        padding: 15px 18px;
    }

    body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__main {
        grid-template-columns: minmax(0, 1fr) 30px;
        gap: 14px;
    }

    body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__label {
        font-size: clamp(1.06rem, 1.55vw, 1.3rem);
        letter-spacing: 0.11em;
    }

    body[data-theme="wizardbattles"] #hub-play-btn .hub-play-btn__arrow {
        width: 30px;
        height: 30px;
    }
}

/* HP hub art direction refresh (2026-03-09) */
body[data-theme="wizardbattles"][data-set="hp"] #hub-screen {
    background:
        linear-gradient(180deg, rgba(3, 8, 12, 0.22) 0%, rgba(2, 5, 9, 0.56) 54%, rgba(1, 3, 5, 0.82) 100%),
        url('../../assets/sets/hp/ui/bg_hub_hp_new.jpg') center center / cover no-repeat;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen::before {
    background:
        linear-gradient(180deg, rgba(2, 8, 12, 0.08) 0%, rgba(2, 8, 12, 0.18) 26%, rgba(1, 4, 8, 0.74) 100%),
        radial-gradient(circle at 23% 16%, rgba(244, 236, 191, 0.26), rgba(244, 236, 191, 0) 17%),
        radial-gradient(circle at 62% 24%, rgba(107, 179, 162, 0.22), rgba(107, 179, 162, 0) 20%),
        radial-gradient(circle at 84% 18%, rgba(133, 199, 177, 0.12), rgba(133, 199, 177, 0) 22%);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen::after {
    background:
        radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 12%),
        radial-gradient(circle at 72% 34%, rgba(146, 217, 196, 0.1), rgba(146, 217, 196, 0) 18%),
        repeating-linear-gradient(
            96deg,
            rgba(188, 234, 220, 0.05) 0,
            rgba(188, 234, 220, 0.05) 1px,
            transparent 1px,
            transparent 26px
        );
    opacity: 0.22;
    mix-blend-mode: screen;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-content {
    width: min(1220px, 100%);
    padding:
        max(env(safe-area-inset-top), 20px)
        clamp(16px, 2.5vw, 30px)
        calc(max(env(safe-area-inset-bottom), 20px) + 18px);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-layout {
    gap: clamp(18px, 3vw, 34px);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-hero-panel {
    align-self: center;
    gap: 18px;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-hero-copy {
    align-content: start;
    justify-items: center;
    gap: 14px;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-set-pill {
    background: rgba(10, 22, 24, 0.62);
    border: 1px solid rgba(166, 210, 192, 0.26);
    box-shadow:
        0 16px 30px rgba(2, 8, 10, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: rgba(219, 234, 227, 0.74);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-set-value {
    color: rgba(243, 229, 178, 0.96);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-brand-mark {
    width: 132px;
    background:
        linear-gradient(
            90deg,
            rgba(127, 207, 190, 0) 0%,
            rgba(127, 207, 190, 0.7) 32%,
            rgba(244, 229, 174, 0.92) 52%,
            rgba(127, 207, 190, 0.1) 100%
        );
    box-shadow:
        0 0 26px rgba(114, 189, 168, 0.2),
        0 0 46px rgba(244, 229, 174, 0.12);
    opacity: 0.92;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 124px;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title-halo {
    top: 46%;
    left: 50%;
    width: min(52vw, 420px);
    opacity: 0.42;
    filter:
        hue-rotate(102deg)
        saturate(0.62)
        brightness(0.82)
        drop-shadow(0 0 24px rgba(118, 196, 174, 0.2));
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title img {
    display: none;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title::before,
body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title::after {
    display: block;
    width: 100%;
    text-align: center;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title::before {
    content: 'Wizard Battles';
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: clamp(2rem, 5.8vw, 4.15rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 0.95;
    text-transform: uppercase;
    color: rgba(249, 241, 214, 0.98);
    text-shadow:
        0 18px 28px rgba(1, 6, 10, 0.54),
        0 0 24px rgba(158, 212, 196, 0.18),
        0 0 8px rgba(244, 229, 174, 0.24);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title::after {
    content: 'Hogwarts';
    justify-self: center;
    width: fit-content;
    max-width: 100%;
    padding: 0 14px;
    border-top: 1px solid rgba(191, 226, 212, 0.18);
    color: rgba(212, 233, 225, 0.78);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.36em;
    line-height: 1.8;
    text-transform: uppercase;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-subtitle {
    max-width: min(100%, 430px);
    min-height: 40px;
    padding: 9px 16px;
    background: rgba(9, 18, 21, 0.66);
    border: 1px solid rgba(172, 214, 198, 0.24);
    color: rgba(230, 240, 236, 0.94);
    box-shadow:
        0 18px 34px rgba(1, 5, 7, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-command-panel {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    gap: 18px;
    padding: clamp(18px, 2.4vw, 26px);
    border-radius: 34px;
    border: 1px solid rgba(163, 206, 190, 0.18);
    background:
        linear-gradient(180deg, rgba(7, 18, 22, 0.76) 0%, rgba(4, 10, 12, 0.9) 100%);
    box-shadow:
        0 28px 50px rgba(1, 6, 8, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-command-panel::before {
    background:
        radial-gradient(circle at 16% 0%, rgba(174, 220, 203, 0.16), rgba(174, 220, 203, 0) 24%),
        radial-gradient(circle at 92% 100%, rgba(244, 228, 173, 0.12), rgba(244, 228, 173, 0) 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 18%);
    border-radius: inherit;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-command-panel__header {
    gap: 8px;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-command-kicker {
    border-color: rgba(244, 229, 174, 0.24);
    background: rgba(244, 229, 174, 0.08);
    color: rgba(247, 233, 188, 0.92);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-command-copy {
    max-width: 46ch;
    color: rgba(215, 230, 224, 0.8);
    font-size: 0.88rem;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-carousel-shell {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-carousel-track {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: clamp(14px, 2vw, 22px);
    padding: 4px 2px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-carousel-track::-webkit-scrollbar {
    display: none;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card-wrapper {
    --hub-mode-width: min(44vw, 280px);
    flex: 0 0 var(--hub-mode-width);
    width: var(--hub-mode-width);
    min-width: var(--hub-mode-width);
    gap: 12px;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-label {
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(188, 225, 212, 0.18);
    background: rgba(4, 13, 17, 0.84);
    color: rgba(236, 243, 239, 0.92);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    box-shadow:
        0 12px 24px rgba(1, 6, 8, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-label--classic {
    border-color: rgba(171, 227, 194, 0.24);
    color: rgba(224, 245, 231, 0.94);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-label--master {
    border-color: rgba(244, 228, 173, 0.24);
    color: rgba(247, 236, 197, 0.94);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(170, 210, 193, 0.22);
    background:
        linear-gradient(180deg, rgba(3, 9, 11, 0.1), rgba(3, 9, 11, 0.92)),
        url('../../assets/sets/hp/ui/bg_hub_hp_new.jpg') center center / cover no-repeat;
    box-shadow:
        0 24px 36px rgba(1, 5, 7, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    isolation: isolate;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card::before,
body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card::before {
    inset: auto 10% 14px;
    height: 34%;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(151, 214, 194, 0.24), rgba(151, 214, 194, 0) 72%);
    filter: blur(18px);
    opacity: 0.82;
    z-index: 0;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card::after {
    inset: 1px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 18%),
        radial-gradient(circle at 50% 54%, rgba(244, 229, 174, 0.11), rgba(244, 229, 174, 0) 28%),
        linear-gradient(180deg, rgba(6, 14, 18, 0) 0%, rgba(6, 14, 18, 0.26) 48%, rgba(3, 8, 10, 0.84) 100%);
    z-index: 1;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card img {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    opacity: 1;
    object-fit: contain;
    object-position: center center;
    aspect-ratio: auto;
    border: 0;
    border-radius: 24px;
    clip-path: inset(0 round 24px);
    background: rgba(4, 10, 14, 0.5);
    box-shadow:
        0 16px 26px rgba(1, 5, 7, 0.24),
        inset 0 0 0 1px rgba(255, 248, 224, 0.08);
    z-index: 0;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card[data-mode='master'] {
    border-color: rgba(244, 229, 174, 0.26);
    background:
        radial-gradient(circle at 58% 18%, rgba(166, 230, 234, 0.24), rgba(166, 230, 234, 0) 18%),
        linear-gradient(180deg, rgba(9, 18, 26, 0.1), rgba(4, 8, 14, 0.72));
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card[data-mode='master'] img {
    transform: scale(1.16);
    transform-origin: center center;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card[data-mode='classic'] {
    border-color: rgba(161, 226, 193, 0.28);
    background:
        linear-gradient(135deg, rgba(7, 18, 14, 0.08), rgba(5, 12, 10, 0.68)),
        radial-gradient(circle at 50% 38%, rgba(123, 238, 144, 0.12), rgba(123, 238, 144, 0) 20%);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card[data-mode='classic']::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 20%),
        radial-gradient(circle at 50% 36%, rgba(162, 255, 189, 0.11), rgba(162, 255, 189, 0) 24%),
        linear-gradient(180deg, rgba(6, 14, 12, 0) 0%, rgba(6, 14, 12, 0.22) 52%, rgba(3, 8, 8, 0.72) 100%);
    opacity: 0.9;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card[data-mode='master']::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 18%),
        radial-gradient(circle at 52% 34%, rgba(244, 229, 174, 0.11), rgba(244, 229, 174, 0) 24%),
        linear-gradient(180deg, rgba(6, 14, 12, 0) 0%, rgba(6, 14, 12, 0.2) 54%, rgba(3, 8, 8, 0.68) 100%);
    opacity: 0.9;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card.is-selected {
    border-color: rgba(252, 241, 205, 0.82);
    box-shadow:
        0 36px 46px rgba(1, 6, 8, 0.56),
        0 0 0 1px rgba(252, 241, 205, 0.3),
        0 0 0 3px rgba(252, 241, 205, 0.12),
        0 0 34px rgba(144, 228, 199, 0.3),
        0 0 76px rgba(247, 233, 183, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card.is-selected::before {
    opacity: 1;
    filter: blur(24px);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card.is-selected[data-mode='master'] {
    background:
        radial-gradient(circle at 58% 18%, rgba(194, 240, 242, 0.34), rgba(194, 240, 242, 0) 22%),
        linear-gradient(180deg, rgba(12, 24, 32, 0.08), rgba(4, 8, 14, 0.46));
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card.is-selected[data-mode='classic'] {
    background:
        linear-gradient(135deg, rgba(7, 18, 14, 0.05), rgba(5, 12, 10, 0.44)),
        radial-gradient(circle at 50% 38%, rgba(156, 255, 177, 0.18), rgba(156, 255, 177, 0) 22%);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card.is-selected::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 18%),
        radial-gradient(circle at 52% 34%, rgba(251, 239, 194, 0.26), rgba(251, 239, 194, 0) 28%),
        linear-gradient(180deg, rgba(6, 14, 12, 0) 0%, rgba(6, 14, 12, 0.08) 56%, rgba(3, 8, 8, 0.36) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 220, 0.2),
        inset 0 0 24px rgba(166, 230, 209, 0.16);
    opacity: 0.92;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card.is-selected .hub-mode-label {
    border-color: rgba(252, 241, 205, 0.42);
    background: rgba(8, 18, 20, 0.96);
    color: rgba(255, 246, 218, 0.98);
    box-shadow:
        0 0 0 1px rgba(252, 241, 205, 0.14),
        0 10px 22px rgba(1, 6, 8, 0.34),
        0 0 20px rgba(247, 233, 183, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-carousel-dots {
    gap: 8px;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-dot {
    width: 7px;
    height: 7px;
    background: rgba(191, 220, 210, 0.24);
    box-shadow: none;
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-dot.is-active {
    background: rgba(245, 232, 182, 0.96);
    box-shadow:
        0 0 0 4px rgba(245, 232, 182, 0.12),
        0 0 18px rgba(154, 214, 194, 0.32);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-play-btn {
    width: 100%;
    max-width: none;
    --wb-hub-cta-accent: rgba(245, 232, 182, 0.96);
    --wb-hub-cta-cool: rgba(158, 220, 199, 0.78);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-play-btn .hub-play-btn__backdrop {
    border: 1px solid rgba(179, 216, 201, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 22%),
        linear-gradient(140deg, rgba(13, 27, 30, 0.98) 0%, rgba(8, 16, 18, 0.98) 58%, rgba(5, 10, 12, 0.99) 100%);
    box-shadow:
        0 28px 40px rgba(1, 6, 8, 0.38),
        0 0 32px rgba(139, 213, 190, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -20px 34px rgba(2, 7, 8, 0.46);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-play-btn .hub-play-btn__spark {
    background:
        radial-gradient(circle at center, rgba(168, 230, 210, 0.42), rgba(168, 230, 210, 0) 68%);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-play-btn .hub-play-btn__kicker {
    color: rgba(218, 231, 225, 0.84);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-play-btn .hub-play-btn__label {
    color: rgba(255, 247, 224, 0.98);
}

body[data-theme="wizardbattles"][data-set="hp"] #hub-play-btn:hover .hub-play-btn__backdrop {
    box-shadow:
        0 32px 44px rgba(1, 6, 8, 0.42),
        0 0 36px rgba(139, 213, 190, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -20px 34px rgba(2, 7, 8, 0.48);
}

@media (min-width: 980px) {
    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-layout {
        grid-template-columns: minmax(320px, 0.84fr) minmax(540px, 1.16fr);
        align-items: end;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-hero-copy {
        justify-items: start;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title {
        justify-items: start;
        min-height: 136px;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title::before,
    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title::after {
        text-align: left;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title::after {
        justify-self: start;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-subtitle {
        justify-self: start;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-command-panel__header {
        justify-items: start;
        text-align: left;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-carousel-track {
        justify-content: center;
        gap: 18px;
        padding: 6px 0 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card-wrapper {
        --hub-mode-width: clamp(172px, 16vw, 198px);
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-primary-action {
        justify-content: flex-start;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-play-btn {
        margin-inline: 0;
    }
}

@media (max-width: 767px) {
    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-content {
        padding-inline: 14px;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-hero-panel {
        gap: 10px;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-hero-copy {
        gap: 8px;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title {
        min-height: 78px;
        gap: 2px;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title-halo {
        width: min(74vw, 320px);
        opacity: 0.34;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title::before {
        font-size: clamp(1.3rem, 9vw, 2rem);
        letter-spacing: 0.12em;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-title::after {
        padding: 0 10px;
        font-size: 0.64rem;
        letter-spacing: 0.24em;
        line-height: 1.7;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-subtitle {
        max-width: 100%;
        min-height: 32px;
        padding: 7px 12px;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-command-panel {
        gap: 14px;
        padding: 16px 14px 18px;
        border-radius: 28px;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card-wrapper {
        --hub-mode-width: min(44vw, 162px);
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card {
        aspect-ratio: 3 / 4;
        border-radius: 26px;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card img {
        inset: 7px;
        width: calc(100% - 14px);
        height: calc(100% - 14px);
        border-radius: 20px;
        clip-path: inset(0 round 20px);
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card[data-mode='master'] {
        background:
            radial-gradient(circle at 58% 18%, rgba(166, 230, 234, 0.24), rgba(166, 230, 234, 0) 18%),
            linear-gradient(180deg, rgba(9, 18, 26, 0.1), rgba(4, 8, 14, 0.72));
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card[data-mode='master'] img {
        transform: scale(1.18);
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card[data-mode='classic'] {
        background:
            linear-gradient(135deg, rgba(7, 18, 14, 0.08), rgba(5, 12, 10, 0.68)),
            radial-gradient(circle at 50% 38%, rgba(123, 238, 144, 0.12), rgba(123, 238, 144, 0) 20%);
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-carousel-track {
        gap: 10px;
        padding: 2px 0;
    }

    body[data-theme="wizardbattles"][data-set="hp"] #hub-screen .hub-mode-card::after {
        border-radius: 24px;
    }
}

/* HK hub refresh (2026-03-09) */
body[data-theme="wizardbattles"][data-set="hk"] #hub-screen {
    overflow: hidden;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen::before {
    background:
        linear-gradient(180deg, rgba(2, 7, 16, 0.18) 0%, rgba(2, 7, 16, 0.64) 48%, rgba(1, 3, 9, 0.9) 100%),
        radial-gradient(circle at 48% 18%, rgba(185, 226, 255, 0.2), rgba(185, 226, 255, 0) 24%),
        radial-gradient(circle at 50% 60%, rgba(73, 121, 184, 0.14), rgba(73, 121, 184, 0) 38%),
        url('../../assets/sets/hk/ui/bg_hub_hk_city_of_tears_wiki.avif') center center / cover no-repeat;
    opacity: 1;
    filter: saturate(1.08) brightness(0.92);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen::after {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 18%),
        radial-gradient(circle at 78% 16%, rgba(198, 234, 255, 0.12), rgba(198, 234, 255, 0) 16%),
        repeating-linear-gradient(
            100deg,
            rgba(198, 234, 255, 0.08) 0,
            rgba(198, 234, 255, 0.08) 1px,
            transparent 1px,
            transparent 22px
        );
    opacity: 0.2;
    mix-blend-mode: screen;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-content {
    width: min(1220px, 100%);
    padding:
        max(env(safe-area-inset-top), 20px)
        clamp(16px, 2.5vw, 30px)
        calc(max(env(safe-area-inset-bottom), 20px) + 18px);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-layout {
    gap: clamp(18px, 3vw, 34px);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-hero-panel {
    align-self: center;
    gap: 18px;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-hero-copy {
    align-content: start;
    justify-items: center;
    gap: 14px;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-set-pill {
    background: rgba(9, 23, 48, 0.7);
    border: 1px solid rgba(156, 189, 234, 0.26);
    box-shadow:
        0 16px 30px rgba(2, 8, 20, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: rgba(204, 223, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-set-value {
    color: rgba(246, 234, 194, 0.96);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-brand-mark {
    width: 124px;
    background:
        linear-gradient(
            90deg,
            rgba(180, 215, 255, 0) 0%,
            rgba(180, 215, 255, 0.68) 36%,
            rgba(255, 239, 193, 0.92) 52%,
            rgba(180, 215, 255, 0.12) 100%
        );
    box-shadow:
        0 0 24px rgba(128, 188, 255, 0.18),
        0 0 42px rgba(255, 230, 164, 0.12);
    opacity: 0.92;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 118px;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title-halo {
    display: none;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title img {
    display: none;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title::before,
body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title::after {
    content: '';
    display: block;
    width: 100%;
    text-align: center;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title::before {
    content: 'Hollow Knight';
    color: rgba(251, 237, 197, 0.98);
    font-family: Baskerville, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 0.92;
    text-transform: uppercase;
    text-shadow:
        0 18px 28px rgba(1, 4, 12, 0.5),
        0 0 24px rgba(190, 216, 255, 0.14);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title::after {
    content: 'Ciudad de Lagrimas';
    justify-self: center;
    width: fit-content;
    max-width: 100%;
    padding: 0 14px;
    border-top: 1px solid rgba(187, 212, 243, 0.22);
    color: rgba(211, 229, 250, 0.76);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    line-height: 1.9;
    text-transform: uppercase;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-subtitle {
    max-width: min(100%, 430px);
    min-height: 38px;
    padding: 9px 16px;
    background: rgba(6, 18, 40, 0.72);
    border: 1px solid rgba(163, 197, 240, 0.28);
    color: rgba(226, 239, 255, 0.94);
    box-shadow:
        0 18px 34px rgba(1, 5, 12, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-command-panel {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    gap: 18px;
    padding: clamp(18px, 2.4vw, 26px);
    border-radius: 34px;
    border: 1px solid rgba(160, 195, 238, 0.2);
    background:
        linear-gradient(180deg, rgba(5, 14, 30, 0.76) 0%, rgba(4, 10, 24, 0.9) 100%);
    box-shadow:
        0 28px 50px rgba(1, 6, 16, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-command-panel::before {
    background:
        radial-gradient(circle at 18% 0%, rgba(182, 218, 255, 0.16), rgba(182, 218, 255, 0) 26%),
        radial-gradient(circle at 92% 100%, rgba(255, 225, 162, 0.12), rgba(255, 225, 162, 0) 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 18%);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-command-panel__header {
    gap: 8px;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-command-kicker {
    border-color: rgba(255, 223, 160, 0.24);
    background: rgba(255, 223, 160, 0.08);
    color: rgba(255, 226, 165, 0.92);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-command-copy {
    max-width: 52ch;
    color: rgba(214, 228, 248, 0.8);
    font-size: 0.88rem;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-carousel-shell {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-carousel-track {
    gap: clamp(14px, 2.1vw, 22px);
    padding: 4px 2px;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card-wrapper {
    --hub-mode-width: min(44vw, 280px);
    flex: 0 0 var(--hub-mode-width);
    gap: 12px;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-label {
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(191, 214, 248, 0.18);
    background: rgba(5, 17, 38, 0.84);
    color: rgba(236, 243, 255, 0.92);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    box-shadow:
        0 12px 24px rgba(2, 8, 18, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-label--classic {
    border-color: rgba(235, 172, 193, 0.28);
    color: rgba(255, 230, 240, 0.94);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-label--master {
    border-color: rgba(255, 226, 168, 0.26);
    color: rgba(255, 240, 194, 0.94);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card {
    position: relative;
    width: 100%;
    aspect-ratio: 0.8 / 1;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(173, 201, 240, 0.22);
    background:
        linear-gradient(180deg, rgba(4, 10, 24, 0.18), rgba(4, 10, 24, 0.9)),
        url('../../assets/sets/hk/ui/bg_hub_hk_city_of_tears_wiki.avif') center center / cover no-repeat;
    box-shadow:
        0 24px 36px rgba(1, 5, 14, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    isolation: isolate;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card::before,
body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card::before {
    inset: auto 8% 12px;
    height: 30%;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(174, 208, 255, 0.28), rgba(174, 208, 255, 0) 70%);
    filter: blur(18px);
    opacity: 0.8;
    z-index: 0;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card::after {
    inset: 1px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 22%),
        linear-gradient(180deg, rgba(8, 16, 32, 0) 0%, rgba(8, 16, 32, 0.22) 50%, rgba(3, 7, 17, 0.82) 100%);
    z-index: 1;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card img {
    opacity: 0;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card[data-mode='master'] {
    border-color: rgba(255, 223, 156, 0.24);
    background:
        radial-gradient(circle at 50% 26%, rgba(236, 244, 255, 0.18), rgba(236, 244, 255, 0) 22%),
        linear-gradient(180deg, rgba(8, 18, 36, 0.04), rgba(3, 8, 18, 0.88)),
        url('../../assets/sets/hk/ui/mode_card_hk_ai_user_crop.jpg') 50% 50% / cover no-repeat;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card[data-mode='classic'] {
    border-color: rgba(223, 162, 184, 0.28);
    background:
        linear-gradient(120deg, rgba(11, 19, 38, 0.06), rgba(11, 19, 38, 0.78)),
        radial-gradient(circle at 44% 56%, rgba(167, 220, 255, 0.12), rgba(167, 220, 255, 0) 24%),
        radial-gradient(circle at 76% 24%, rgba(238, 155, 184, 0.14), rgba(238, 155, 184, 0) 18%),
        url('../../assets/sets/hk/ui/mode_card_hk_online_user_crop.jpg') 50% 50% / cover no-repeat,
        url('../../assets/sets/hk/ui/bg_hub_hk_city_of_tears_wiki.avif') center center / cover no-repeat;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card[data-mode='classic']::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 20%),
        linear-gradient(124deg, rgba(255, 110, 150, 0) 37%, rgba(255, 214, 229, 0.76) 50%, rgba(111, 191, 255, 0) 61%),
        linear-gradient(180deg, rgba(8, 16, 32, 0) 0%, rgba(8, 16, 32, 0.28) 50%, rgba(3, 7, 17, 0.84) 100%);
    background-size: auto, 160% 100%, auto;
    background-position: center, 54% 54%, center;
    background-repeat: no-repeat;
    opacity: 0.92;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card.is-selected {
    border-color: rgba(249, 239, 205, 0.82);
    box-shadow:
        0 36px 46px rgba(1, 6, 16, 0.56),
        0 0 0 1px rgba(249, 239, 205, 0.3),
        0 0 0 3px rgba(249, 239, 205, 0.12),
        0 0 34px rgba(164, 214, 255, 0.28),
        0 0 78px rgba(255, 228, 166, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card.is-selected::before {
    opacity: 1;
    filter: blur(24px);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card.is-selected[data-mode='master'] {
    background:
        radial-gradient(circle at 50% 26%, rgba(242, 248, 255, 0.28), rgba(242, 248, 255, 0) 24%),
        linear-gradient(180deg, rgba(8, 18, 36, 0.02), rgba(3, 8, 18, 0.5)),
        url('../../assets/sets/hk/ui/mode_card_hk_ai_user_crop.jpg') 50% 50% / cover no-repeat;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card.is-selected[data-mode='classic'] {
    background:
        linear-gradient(120deg, rgba(11, 19, 38, 0.03), rgba(11, 19, 38, 0.38)),
        radial-gradient(circle at 44% 56%, rgba(182, 228, 255, 0.16), rgba(182, 228, 255, 0) 26%),
        radial-gradient(circle at 76% 24%, rgba(248, 182, 206, 0.18), rgba(248, 182, 206, 0) 20%),
        url('../../assets/sets/hk/ui/mode_card_hk_online_user_crop.jpg') 50% 50% / cover no-repeat,
        url('../../assets/sets/hk/ui/bg_hub_hk_city_of_tears_wiki.avif') center center / cover no-repeat;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card.is-selected::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 20%),
        linear-gradient(124deg, rgba(255, 110, 150, 0) 34%, rgba(255, 239, 202, 0.68) 50%, rgba(135, 208, 255, 0) 66%),
        linear-gradient(180deg, rgba(8, 16, 32, 0) 0%, rgba(8, 16, 32, 0.12) 52%, rgba(3, 7, 17, 0.46) 100%);
    background-size: auto, 160% 100%, auto;
    background-position: center, 54% 54%, center;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(247, 240, 216, 0.22),
        inset 0 0 28px rgba(161, 208, 255, 0.12);
    opacity: 0.92;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card.is-selected .hub-mode-label {
    border-color: rgba(250, 239, 205, 0.42);
    background: rgba(8, 18, 38, 0.96);
    color: rgba(255, 246, 224, 0.98);
    box-shadow:
        0 0 0 1px rgba(250, 239, 205, 0.14),
        0 10px 22px rgba(1, 6, 16, 0.34),
        0 0 22px rgba(170, 216, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-carousel-dots {
    gap: 8px;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-dot {
    width: 7px;
    height: 7px;
    background: rgba(191, 216, 244, 0.28);
    box-shadow: none;
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-dot.is-active {
    background: rgba(255, 227, 169, 0.96);
    box-shadow:
        0 0 0 4px rgba(255, 227, 169, 0.12),
        0 0 18px rgba(255, 227, 169, 0.32);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-play-btn {
    width: 100%;
    max-width: none;
    --wb-hub-cta-accent: rgba(255, 226, 166, 0.96);
    --wb-hub-cta-cool: rgba(180, 220, 255, 0.84);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-play-btn .hub-play-btn__backdrop {
    border: 1px solid rgba(182, 209, 244, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 22%),
        linear-gradient(140deg, rgba(11, 25, 50, 0.98) 0%, rgba(8, 16, 31, 0.98) 58%, rgba(6, 11, 24, 0.99) 100%);
    box-shadow:
        0 28px 40px rgba(1, 6, 16, 0.38),
        0 0 32px rgba(140, 199, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -20px 34px rgba(2, 7, 18, 0.46);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-play-btn .hub-play-btn__spark {
    background:
        radial-gradient(circle at center, rgba(176, 220, 255, 0.42), rgba(176, 220, 255, 0) 68%);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-play-btn .hub-play-btn__kicker {
    color: rgba(215, 231, 255, 0.84);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-play-btn .hub-play-btn__label {
    color: rgba(255, 246, 226, 0.98);
}

body[data-theme="wizardbattles"][data-set="hk"] #hub-play-btn:hover .hub-play-btn__backdrop {
    box-shadow:
        0 32px 44px rgba(1, 6, 16, 0.42),
        0 0 36px rgba(140, 199, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -20px 34px rgba(2, 7, 18, 0.48);
}

@media (min-width: 980px) {
    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-layout {
        grid-template-columns: minmax(320px, 0.84fr) minmax(530px, 1.16fr);
        align-items: end;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-hero-copy {
        justify-items: start;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title {
        justify-items: start;
        min-height: 132px;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title::before,
    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title::after {
        text-align: left;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title::after {
        justify-self: start;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-subtitle {
        justify-self: start;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-command-panel__header {
        justify-items: start;
        text-align: left;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-carousel-track {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 18px;
        padding: 6px 0 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-carousel-track::before,
    body[data-theme="wizardbattles"][data-set="hk"] #hub-carousel-track::after {
        content: none;
        display: none;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card-wrapper {
        --hub-mode-width: min(17vw, 206px);
        width: var(--hub-mode-width);
        min-width: var(--hub-mode-width);
        flex: 0 0 var(--hub-mode-width);
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-primary-action {
        justify-content: flex-start;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-play-btn {
        margin-inline: 0;
    }
}

@media (max-width: 767px) {
    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-content {
        padding-inline: 14px;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-hero-panel {
        gap: 10px;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-hero-copy {
        gap: 8px;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title {
        min-height: 74px;
        gap: 2px;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title::before {
        font-size: clamp(1.3rem, 9vw, 2rem);
        letter-spacing: 0.12em;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-title::after {
        padding: 0 10px;
        font-size: 0.54rem;
        letter-spacing: 0.2em;
        line-height: 1.7;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-subtitle {
        max-width: 100%;
        min-height: 32px;
        padding: 7px 12px;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-command-panel {
        gap: 14px;
        padding: 16px 14px 18px;
        border-radius: 28px;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card-wrapper {
        --hub-mode-width: min(44vw, 162px);
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card {
        aspect-ratio: 0.7 / 1;
        border-radius: 26px;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-carousel-track {
        gap: 10px;
        padding: 2px 0;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card[data-mode='master'] {
        background:
            radial-gradient(circle at 50% 26%, rgba(236, 244, 255, 0.18), rgba(236, 244, 255, 0) 22%),
            linear-gradient(180deg, rgba(8, 18, 36, 0.04), rgba(3, 8, 18, 0.88)),
            url('../../assets/sets/hk/ui/mode_card_hk_ai_user_crop.jpg') 50% 50% / cover no-repeat;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card[data-mode='classic'] {
        background:
            linear-gradient(120deg, rgba(11, 19, 38, 0.06), rgba(11, 19, 38, 0.8)),
            radial-gradient(circle at 44% 56%, rgba(167, 220, 255, 0.12), rgba(167, 220, 255, 0) 24%),
            radial-gradient(circle at 76% 24%, rgba(238, 155, 184, 0.14), rgba(238, 155, 184, 0) 18%),
            url('../../assets/sets/hk/ui/mode_card_hk_online_user_crop.jpg') 50% 50% / cover no-repeat,
            url('../../assets/sets/hk/ui/bg_hub_hk_city_of_tears_wiki.avif') center center / cover no-repeat;
    }

    body[data-theme="wizardbattles"][data-set="hk"] #hub-screen .hub-mode-card::after {
        border-radius: 24px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}