/* ==============================================================================
   PHASESHIFT FUN 3.3.5a — ULTRA PREMIUM GAMING PORTAL STYLES
   Cinematic Background (Lich King vs Illidan) + Sleek Modern Blizzard Theme
   ============================================================================== */

:root {
    /* Brand Theme Colors */
    --gold-primary: #ffcc00;
    --gold-glow: rgba(255, 204, 0, 0.35);
    --gold-dark: #b8860b;

    --frost-blue: #00e5ff;
    --frost-glow: rgba(0, 229, 255, 0.3);
    
    --fel-green: #00ff66;
    --fel-glow: rgba(0, 255, 102, 0.3);

    --dark-bg: #05070a;
    --dark-surface: #0a0e17;
    --dark-card: #080c14;
    --dark-card-hover: #0e1422;
    --dark-border: rgba(255, 255, 255, 0.08);
    --dark-border-hover: rgba(255, 204, 0, 0.4);

    --text-pure: #ffffff;
    --text-primary: #e6edf8;
    --text-secondary: #94a3b8;
    --text-muted: #5e708a;

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --tr-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --tr-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    color-scheme: dark;
}

/* ==============================================================================
   GLOBAL UTILITIES
   ============================================================================== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.sub-anchor {
    position: relative;
    top: -90px;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
}

/* ==============================================================================
   UNIFIED MASTER ONBOARDING: QUICK START (3 STEPS)
   ============================================================================== */
.quick-start-master {
    position: relative;
    padding: 60px 0 80px 0;
}

.quick-start-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 28px;
    align-items: stretch;
    margin-top: 36px;
}

@media (max-width: 1180px) {
    .quick-start-grid {
        grid-template-columns: 1fr;
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
    }
}

.qs-card {
    background: linear-gradient(145deg, rgba(13, 19, 31, 0.95), rgba(7, 10, 18, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.qs-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.7), transparent);
    opacity: 0.5;
}

.qs-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 229, 255, 0.35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 229, 255, 0.15);
}

.qs-card-hero {
    background: linear-gradient(145deg, rgba(18, 25, 42, 0.96), rgba(9, 13, 24, 0.99));
    border: 1.5px solid rgba(255, 204, 0, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 204, 0, 0.15);
    transform: scale(1.02);
    z-index: 2;
}

.qs-card-hero::before {
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.9), transparent);
    opacity: 0.9;
    height: 4px;
}

.qs-card-hero:hover {
    transform: scale(1.02) translateY(-6px);
    border-color: rgba(255, 204, 0, 0.6);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.8), 0 0 45px rgba(255, 204, 0, 0.25);
}

@media (max-width: 1180px) {
    .qs-card-hero {
        transform: none;
    }
    .qs-card-hero:hover {
        transform: translateY(-6px);
    }
}

.qs-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.qs-step-badge {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: #00e5ff;
    text-transform: uppercase;
}

.qs-step-badge.highlight-badge {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 140, 0, 0.15));
    border-color: rgba(255, 204, 0, 0.5);
    color: #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.2);
}

.qs-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qs-card-icon.icon-gold {
    background: rgba(255, 204, 0, 0.1);
    border-color: rgba(255, 204, 0, 0.3);
}

.qs-card h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.qs-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px;
}

.qs-perks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.qs-perk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-primary);
}

.qs-action-box {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.btn-qs-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #00e5ff, #0099ff);
    color: #030812;
    padding: 14px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.25);
}

.btn-qs-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 229, 255, 0.45);
    filter: brightness(1.1);
}

.qs-mac-note {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px 12px;
    border-left: 3px solid #00ff66;
}

.qs-mac-note code {
    color: #00ff66;
    font-family: var(--font-mono);
}

/* Bonus pills in step 2 */
.qs-bonus-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.bonus-pill {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 204, 0, 0.08);
    border: 1px solid rgba(255, 204, 0, 0.22);
    color: #ffdd44;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.field-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .field-row-split {
        grid-template-columns: 1fr;
    }
}

.qs-form-wrapper {
    background: rgba(4, 7, 12, 0.5);
    border-radius: 14px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Step 3: Realmlist and launchers - Cyber-Epic Redesign */
.code-copy-row-epic {
    background: linear-gradient(145deg, rgba(12, 18, 30, 0.95), rgba(7, 10, 18, 0.98));
    border: 1px solid rgba(255, 204, 0, 0.22);
    border-radius: 16px;
    padding: 14px 16px 12px;
    margin-bottom: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.code-copy-row-epic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.6), transparent);
}

.code-copy-row-epic:hover {
    border-color: rgba(255, 204, 0, 0.55);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 22px rgba(255, 204, 0, 0.18);
    transform: translateY(-1px);
}

.code-copy-row-epic:active {
    transform: scale(0.99);
}

.code-copy-row-epic.copied {
    border-color: #00ff88 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 255, 136, 0.35) !important;
}

.code-copy-row-epic.copied::before {
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
}

/* Header Row */
.cc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.cc-label-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-live-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff66;
    box-shadow: 0 0 8px #00ff66;
    animation: tickerDotPulse 2s ease-in-out infinite;
}

.cc-label {
    font-size: 10px;
    letter-spacing: 1.4px;
    color: #94a3b8;
    font-weight: 800;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.cc-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: 0.5px;
}

.cc-badge-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #38bdf8;
}

/* Terminal Console Box */
.cc-terminal-display {
    background: rgba(3, 7, 14, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 10px 14px 12px;
    margin-bottom: 12px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
    transition: all 0.25s ease;
}

.code-copy-row-epic:hover .cc-terminal-display {
    border-color: rgba(255, 204, 0, 0.35);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 204, 0, 0.1);
}

.code-copy-row-epic.copied .cc-terminal-display {
    border-color: rgba(0, 255, 136, 0.45);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 255, 136, 0.2);
}

.cc-terminal-topbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cc-terminal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.cc-terminal-file {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: #64748b;
    margin-left: 6px;
    letter-spacing: 0.5px;
}

.cc-code-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.cc-prompt {
    color: #00e5ff;
    font-weight: 800;
    font-size: 13px;
    font-family: var(--font-mono);
    line-height: 1;
}

.cc-code-line code {
    font-family: 'JetBrains Mono', 'Fira Code', var(--font-mono), monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    line-height: 1.4;
}

.cc-token-cmd {
    color: #94a3b8;
    font-weight: 600;
}

.cc-token-ip {
    color: #ffd700;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

/* Button */
.btn-copy-epic {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 12.5px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.22), rgba(255, 140, 0, 0.14));
    border: 1px solid rgba(255, 204, 0, 0.45);
    color: #ffe066;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.btn-copy-epic:hover {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #0b0f19;
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.55);
    transform: translateY(-1px);
}

.btn-copy-epic:active {
    transform: scale(0.97);
}

.btn-copy-epic.copied {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.28), rgba(0, 200, 100, 0.18)) !important;
    border-color: #00ff88 !important;
    color: #00ff88 !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5) !important;
    transform: scale(1.01);
}

.btn-copy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-copy-icon svg {
    display: block;
}

/* Micro hint */
.cc-card-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 10.5px;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.cc-hint-icon {
    color: #ffd700;
    font-size: 11px;
}

.qs-launchers-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.btn-batch-dl-epic {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.12), rgba(0, 200, 80, 0.05));
    border: 1px solid rgba(0, 255, 102, 0.35);
    color: #86efac;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.btn-batch-dl-epic:hover {
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.22), rgba(0, 200, 80, 0.12));
    border-color: #22c55e;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 255, 102, 0.25);
    transform: translateY(-2px);
}

.mac-launcher-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.mac-launcher-link:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.qs-server-status-pill {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.03) 100%);
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.live-dot.pulse-green {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    flex-shrink: 0;
    animation: livePulse 2s infinite ease-in-out;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px #10b981; }
    50% { opacity: 0.6; transform: scale(0.9); box-shadow: 0 0 5px #10b981; }
}

.status-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-meta strong {
    font-size: 12px;
    font-weight: 700;
    color: #34d399;
    letter-spacing: 0.3px;
}

.status-meta span {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Lightning & Atmospheric FX Canvas */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

/* ==============================================================================
   CINEMATIC BACKGROUND: LICH KING & ILLIDAN
   ============================================================================== */
/* ==============================================================================
/* ==============================================================================
   CINEMATIC BACKGROUND: ADAPTIVE DRAGON & HEROES RESPONSIVE ENGINE
   ============================================================================== */
.site-bg-wrapper {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #05070a;
}

.site-bg-image {
    position: absolute;
    inset: 0;
    background-image: url('images/hero_battle.jpg?v=7');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 12%;
    filter: brightness(0.96) contrast(1.12) saturate(1.15);
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden;
}

/* ==============================================================================
   CINEMATIC PHOTOREALISTIC LIGHTNING ENGINE (PIXEL-EXTRACTED ARTWORK BRANCHES)
   Directly flashes and illuminates the original painted lightning in hero_battle.jpg
   ============================================================================== */

/* Общая мягкая вспышка неба при раскате грома */
.site-bg-image.sky-thunder-flash {
    filter: brightness(1.32) contrast(1.2) saturate(1.22);
}

/* Озарение туч в глубине грозового фронта */
.native-cloud-illumination {
    position: absolute;
    inset: -15px;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    z-index: 1;
    transform-origin: center 20%;
    transform: scale(1.02);
    animation: bgSlowBreathe 28s ease-in-out infinite alternate;
    will-change: opacity;
}

.native-cloud-illumination.cloud-zone-right {
    background: radial-gradient(ellipse 520px 360px at 60% 16%, rgba(130, 210, 255, 0.45) 0%, rgba(70, 140, 255, 0.22) 42%, transparent 75%);
}

.native-cloud-illumination.cloud-zone-center {
    background: radial-gradient(ellipse 450px 300px at 44.5% 21%, rgba(130, 210, 255, 0.42) 0%, rgba(70, 140, 255, 0.2) 42%, transparent 75%);
}

.native-cloud-illumination.cloud-zone-left {
    background: radial-gradient(ellipse 400px 340px at 24% 42%, rgba(130, 210, 255, 0.38) 0%, rgba(70, 140, 255, 0.18) 42%, transparent 75%);
}

.native-cloud-illumination.cloud-flash {
    animation: naturalCloudFlash 0.44s ease-out forwards;
}

.native-sky-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 15%, rgba(160, 215, 255, 0.18) 0%, rgba(100, 160, 255, 0.08) 50%, transparent 80%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    z-index: 1;
}

.native-sky-flash.sky-flash-active {
    animation: naturalSkyFlash 0.36s ease-out forwards;
}

/* Нативные ветви молний, извлеченные пиксель-в-пиксель из hero_battle.jpg */
.native-lightning-branch {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 12%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    z-index: 2;
    will-change: opacity, filter;
}

/* Реалистичный удар молнии точно по контуру ветви на фоне */
.native-lightning-branch.strike-active {
    animation: naturalLightningStrike 0.65s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes naturalLightningStrike {
    0% {
        opacity: 0;
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
    6% {
        opacity: 1;
        filter: brightness(2.8) contrast(1.4) drop-shadow(0 0 12px #00f0ff) drop-shadow(0 0 28px rgba(0, 229, 255, 0.85));
    }
    16% {
        opacity: 0.26;
        filter: brightness(1.5) drop-shadow(0 0 6px #00f0ff);
    }
    24% {
        opacity: 0.95;
        filter: brightness(2.6) contrast(1.3) drop-shadow(0 0 14px #00f0ff) drop-shadow(0 0 30px rgba(0, 229, 255, 0.9));
    }
    42% {
        opacity: 0.48;
        filter: brightness(1.7) drop-shadow(0 0 8px rgba(0, 229, 255, 0.55));
    }
    68% {
        opacity: 0.16;
        filter: brightness(1.2);
    }
    100% {
        opacity: 0;
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
}

@keyframes naturalCloudFlash {
    0% { opacity: 0; }
    8% { opacity: 0.95; }
    22% { opacity: 0.35; }
    42% { opacity: 0.88; }
    65% { opacity: 0.45; }
    100% { opacity: 0; }
}

@keyframes naturalSkyFlash {
    0% { opacity: 0; }
    10% { opacity: 0.85; }
    26% { opacity: 0.25; }
    48% { opacity: 0.7; }
    100% { opacity: 0; }
}

@keyframes bgSlowBreathe {
    0% {
        transform: scale(1.02) translate3d(0, 0, 0);
    }
    50% {
        transform: scale(1.055) translate3d(0, -6px, 0);
    }
    100% {
        transform: scale(1.02) translate3d(0, 0, 0);
    }
}

/* Кристально чистый оверлей: детали молний, чешуи и пламени раскрыты на 100% */
.site-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(5, 7, 10, 0.35) 0%, 
        rgba(5, 7, 10, 0.05) 18%, 
        rgba(5, 7, 10, 0.12) 42%, 
        rgba(5, 7, 10, 0.58) 72%, 
        rgba(5, 7, 10, 0.96) 100%
    );
}

/* Боковая виньетка для ультрашироких мониторов (21:9, 4K) */
.site-bg-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        rgba(5, 7, 10, 0.65) 0%, 
        transparent 15%, 
        transparent 85%, 
        rgba(5, 7, 10, 0.65) 100%
    );
    pointer-events: none;
}

/* Динамические источники света: Скверна (Иллидан), Пламя/Пар Дракона и Лед (Лич Кинг) */
.site-bg-radial {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 14% 65%, rgba(0, 255, 102, 0.16) 0%, transparent 45%),
        radial-gradient(circle at 56% 25%, rgba(255, 100, 0, 0.28) 0%, rgba(255, 60, 0, 0.12) 35%, transparent 62%),
        radial-gradient(circle at 86% 65%, rgba(0, 150, 255, 0.16) 0%, transparent 45%);
    animation: dragonSteamGlow 5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes dragonSteamGlow {
    0% {
        opacity: 0.75;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
    100% {
        opacity: 0.82;
        transform: scale(1);
    }
}

/* ==============================================================================
   INTERACTIVE DUAL-ELEMENTAL ATMOSPHERE (ILLIDAN FEL VS ARTHAS FROST)
   ============================================================================== */
.elemental-aura-frost {
    position: absolute;
    inset: -30px;
    pointer-events: none;
    background: radial-gradient(circle at 84% 52%, rgba(0, 220, 255, 0.28) 0%, rgba(0, 140, 255, 0.12) 36%, transparent 68%);
    mix-blend-mode: screen;
    opacity: 0.55;
    z-index: 1;
}

.elemental-aura-fel {
    position: absolute;
    inset: -30px;
    pointer-events: none;
    background: radial-gradient(circle at 16% 52%, rgba(34, 197, 94, 0.28) 0%, rgba(16, 185, 129, 0.12) 36%, transparent 68%);
    mix-blend-mode: screen;
    opacity: 0.55;
    z-index: 1;
}

.cinematic-fog-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 38%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 7, 10, 0.65) 60%, #05070a 100%);
    z-index: 2;
}

/* ==============================================================================
   АДАПТИВНОСТЬ ПОД РАЗРЕШЕНИЯ ЭКРАНА И РЕСАЙЗ БРАУЗЕРА
   ============================================================================== */

/* Ультраширокие дисплеи и 4K (>= 1920px) */
@media (min-width: 1920px) {
    .site-bg-image,
    .native-lightning-branch {
        background-position: center 10%;
    }
    .site-bg-overlay::before {
        background: linear-gradient(90deg, 
            rgba(5, 7, 10, 0.85) 0%, 
            rgba(5, 7, 10, 0.3) 12%, 
            transparent 25%, 
            transparent 75%, 
            rgba(5, 7, 10, 0.3) 88%, 
            rgba(5, 7, 10, 0.85) 100%
        );
    }
}

/* Ноутбуки и мониторы стандартных пропорций (1280px — 1680px) */
@media (max-width: 1680px) {
    .site-bg-image,
    .native-lightning-branch {
        background-position: center 12%;
    }
    .site-bg-radial {
        background: 
            radial-gradient(circle at 12% 65%, rgba(0, 255, 102, 0.15) 0%, transparent 42%),
            radial-gradient(circle at 56% 24%, rgba(255, 100, 0, 0.26) 0%, rgba(255, 60, 0, 0.1) 32%, transparent 58%),
            radial-gradient(circle at 88% 65%, rgba(0, 150, 255, 0.15) 0%, transparent 42%);
    }
}

/* Планшеты в альбомной ориентации и сжатые окна браузера (992px — 1279px) */
@media (max-width: 1279px) {
    .site-bg-image,
    .native-lightning-branch {
        background-position: center 14%;
        transform-origin: center 25%;
    }
    .site-bg-overlay {
        background: linear-gradient(180deg, 
            rgba(5, 7, 10, 0.52) 0%, 
            rgba(5, 7, 10, 0.18) 22%, 
            rgba(5, 7, 10, 0.35) 50%, 
            rgba(5, 7, 10, 0.75) 80%, 
            rgba(5, 7, 10, 0.98) 100%
        );
    }
}

/* Планшеты и компактные экраны (768px — 991px) */
@media (max-width: 991px) {
    .site-bg-image,
    .native-lightning-branch {
        background-position: center 16%;
        filter: brightness(0.88) contrast(1.12) saturate(1.15);
    }
    .site-bg-radial {
        background: 
            radial-gradient(circle at 10% 70%, rgba(0, 255, 102, 0.12) 0%, transparent 35%),
            radial-gradient(circle at 54% 22%, rgba(255, 100, 0, 0.28) 0%, rgba(255, 60, 0, 0.12) 35%, transparent 60%),
            radial-gradient(circle at 90% 70%, rgba(0, 150, 255, 0.12) 0%, transparent 35%);
    }
}

/* Мобильные экраны и узкие окна браузера (<= 767px) */
@media (max-width: 767px) {
    .site-bg-image,
    .native-lightning-branch {
        background-position: 52% 16%;
        background-size: cover;
        transform-origin: 52% 25%;
        filter: brightness(0.82) contrast(1.12) saturate(1.2);
    }
    .site-bg-overlay {
        background: linear-gradient(180deg, 
            rgba(5, 7, 10, 0.65) 0%, 
            rgba(5, 7, 10, 0.25) 20%, 
            rgba(5, 7, 10, 0.5) 55%, 
            rgba(5, 7, 10, 0.88) 80%, 
            rgba(5, 7, 10, 0.98) 100%
        );
    }
    .site-bg-overlay::before {
        display: none;
    }
    .site-bg-radial {
        background: radial-gradient(circle at 52% 20%, rgba(255, 100, 0, 0.32) 0%, rgba(255, 50, 0, 0.12) 40%, transparent 65%);
    }
}

/* Смартфоны с небольшим разрешением (<= 480px) */
@media (max-width: 480px) {
    .site-bg-image,
    .native-lightning-branch {
        background-position: 53% 14%;
        filter: brightness(0.8) contrast(1.1) saturate(1.2);
    }
    .site-bg-overlay {
        background: linear-gradient(180deg, 
            rgba(5, 7, 10, 0.72) 0%, 
            rgba(5, 7, 10, 0.3) 20%, 
            rgba(5, 7, 10, 0.55) 50%, 
            rgba(5, 7, 10, 0.9) 78%, 
            rgba(5, 7, 10, 0.98) 100%
        );
    }
}

/* Вертикальная (портретная) ориентация */
@media (orientation: portrait) {
    .site-bg-image,
    .native-lightning-branch {
        background-position: 52% 14%;
    }
}


/* Containers */
.content-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* ==============================================================================
   NAVIGATION (OBSIDIAN SLIM BAR 54px OVERHAUL)
   ============================================================================== */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(7, 9, 14, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.nav-inner {
    max-width: 1400px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    height: 38px;
    line-height: 1;
}

.logo-emblem {
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.5));
}

.logo-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.logo-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #ffffff;
    display: block;
    line-height: 1;
    margin: 0;
}

.logo-tag {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gold-primary);
    display: block;
    line-height: 1;
    margin: 0;
}

/* ==============================================================================
   PREMIUM SEASON SHOWCASE CHIP & ROADMAP TRIGGER
   ============================================================================== */
.season-pill-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 10px 0 7px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(22, 28, 42, 0.85) 0%, rgba(12, 16, 26, 0.95) 100%);
    border: 1px solid rgba(245, 158, 11, 0.32);
    color: #f1f5f9;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    outline: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 12px rgba(245, 158, 11, 0.08);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    flex-shrink: 0;
}

.season-pill-chip:hover {
    background: linear-gradient(180deg, rgba(32, 40, 60, 0.95) 0%, rgba(18, 23, 36, 0.98) 100%);
    border-color: rgba(251, 191, 36, 0.65);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 20px rgba(245, 158, 11, 0.25);
    transform: translateY(-1px);
}

.season-pill-chip:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.spc-crest {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(180, 83, 9, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(245, 158, 11, 0.2);
    transition: all 0.2s ease;
}

.season-pill-chip:hover .spc-crest {
    border-color: #fbbf24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 12px rgba(245, 158, 11, 0.4);
    transform: scale(1.04);
}

.spc-crest-svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.spc-body {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.spc-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.spc-sep {
    color: rgba(245, 158, 11, 0.45);
    font-size: 10px;
}

.spc-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #f8fafc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spc-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.spc-status-chip.pause {
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fde68a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.season-pill-chip:hover .spc-status-chip.pause {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(251, 191, 36, 0.6);
    color: #ffffff;
}

.spc-status-chip.active {
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.spc-arrow {
    color: rgba(245, 158, 11, 0.55);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
    margin-left: 1px;
}

.season-pill-chip:hover .spc-arrow {
    transform: translateX(2px);
    color: #fbbf24;
}

/* Backward compatibility for dot if needed */
.season-pulse-dot {
    display: none;
}

@media (max-width: 1200px) {
    .spc-sep,
    .spc-title {
        display: none;
    }
}

.nav-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nav-item {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.18s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-item:hover,
.nav-item.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

/* Nav Dropdown for Extra Content */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Seamless bridge preventing hover drop when cursor moves toward menu */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -40px;
    right: -40px;
    height: 30px;
    pointer-events: auto;
}

.nav-dropdown-btn {
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.dropdown-chevron {
    transition: transform 0.2s ease;
    opacity: 0.75;
}

.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown.open .dropdown-chevron {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--gold-primary);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 680px;
    max-width: 94vw;
    background: rgba(8, 12, 18, 0.98);
    border: 1px solid rgba(255, 204, 0, 0.35);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.96), 0 0 35px rgba(255, 204, 0, 0.18);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
    transition-delay: 0.15s;
    z-index: 99999;
}

/* Dropdown arrow - perfectly centered */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 11px;
    height: 11px;
    background: rgba(8, 12, 18, 0.98);
    border-left: 1px solid rgba(255, 204, 0, 0.35);
    border-top: 1px solid rgba(255, 204, 0, 0.35);
    z-index: 1;
}

/* Robust hover and click toggle support with zero instant-flicker delay */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}

/* Group container inside dropdown */
.dropdown-group {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dropdown-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 2px;
}

.dropdown-group-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #64b5f6;
    background: rgba(100, 181, 246, 0.12);
    border: 1px solid rgba(100, 181, 246, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.dropdown-group-badge.highlight {
    color: #ffaa00;
    background: rgba(255, 170, 0, 0.12);
    border-color: rgba(255, 170, 0, 0.3);
}

.dropdown-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
}

.dropdown-group-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.18s ease;
}

.dropdown-item:hover {
    background: rgba(255, 204, 0, 0.08);
    border-color: rgba(255, 204, 0, 0.22);
    transform: translateX(2px);
}

.dropdown-item-icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dropdown-item:hover .dropdown-item-icon {
    background: rgba(255, 204, 0, 0.15);
    border-color: rgba(255, 204, 0, 0.35);
}

.dropdown-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dropdown-item-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-mini-tag {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff4400, #ff8800);
    color: #fff;
    letter-spacing: 0.4px;
}

.dropdown-item:hover .dropdown-item-title {
    color: var(--gold-primary);
}

.dropdown-item-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.25;
    white-space: normal;
}

@media (max-width: 1100px) {
    .nav-links {
        gap: 0.5rem;
    }
    .nav-item {
        font-size: 0.8rem;
        padding: 4px 6px;
    }
    .faction-mini-wrap {
        display: none;
    }
}

@media (max-width: 860px) {
    .nav-links {
        display: none;
    }
}

@media (max-width: 768px) {
    .top-nav {
        height: 56px;
    }
    .nav-inner {
        padding: 0 1rem;
        gap: 8px;
    }
    .nav-links {
        display: none;
    }
    .season-pill-chip {
        display: none;
    }
    .faction-mini-wrap {
        display: none;
    }
    .nav-dropdown-menu {
        width: 320px;
        grid-template-columns: 1fr;
    }
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ==============================================================================
   PREMIUM ESPORTS REALM STATUS BUTTON & HOVER LIVE SPECS
   ============================================================================== */
.realm-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 38px;
    padding: 0 14px 0 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18, 25, 40, 0.94) 0%, rgba(9, 14, 25, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.realm-pill:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(26, 36, 56, 0.96) 0%, rgba(13, 20, 34, 0.99) 100%);
}

/* Online state */
.realm-pill.online {
    border-color: rgba(16, 185, 129, 0.45);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.12) 0%, rgba(10, 18, 28, 0.97) 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 14px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.realm-pill.online:hover {
    border-color: rgba(16, 185, 129, 0.7);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.18) 0%, rgba(13, 24, 38, 0.98) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 22px rgba(16, 185, 129, 0.28);
}

/* Offline state */
.realm-pill.offline {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.12) 0%, rgba(20, 10, 16, 0.97) 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 12px rgba(239, 68, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.realm-pill.offline:hover {
    border-color: rgba(239, 68, 68, 0.65);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.18) 0%, rgba(26, 12, 20, 0.98) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 20px rgba(239, 68, 68, 0.25);
}

/* Main inner group */
.realm-pill-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Glowing LED Dot */
.status-indicator-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ef4444;
    box-shadow: 0 0 8px #ef4444, 0 0 12px rgba(239, 68, 68, 0.6);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.dot-pulse-ring {
    position: absolute;
    top: -3.5px;
    left: -3.5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, 0.5);
    animation: statusRingBreathe 2.5s infinite ease-out;
    pointer-events: none;
}

.realm-pill.online .status-indicator-dot {
    background-color: #10b981;
    box-shadow: 0 0 8px #10b981, 0 0 15px rgba(16, 185, 129, 0.75);
}

.realm-pill.online .dot-pulse-ring {
    border-color: rgba(16, 185, 129, 0.65);
    animation: statusRingRipple 1.8s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes statusRingRipple {
    0% { transform: scale(0.8); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes statusRingBreathe {
    0%, 100% { transform: scale(1); opacity: 0.25; }
    50% { transform: scale(1.2); opacity: 0.65; }
}

/* Status Label (ОНЛАЙН / СЕРВЕР ОФФЛАЙН) */
.realm-pill-label {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.realm-pill.online .realm-pill-label {
    color: #10b981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
}

.realm-pill.offline .realm-pill-label {
    color: #f87171;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

/* Online Counter Badge (309) */
.realm-pill-badge {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12.5px;
    font-weight: 800;
    color: #ffffff;
    background: rgba(16, 185, 129, 0.25);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 6px;
    padding: 2px 8px;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.realm-pill.online:hover .realm-pill-badge {
    background: rgba(16, 185, 129, 0.38);
    border-color: rgba(16, 185, 129, 0.7);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.realm-pill.offline .realm-pill-badge {
    display: none;
}

/* Expand / Info Hint Icon */
.realm-pill-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.45);
    transition: all 0.25s ease;
}

.realm-pill-chevron {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.realm-pill:hover .realm-pill-hint {
    color: #ffcc00;
}

.realm-pill:hover .realm-pill-chevron {
    transform: rotate(180deg);
}

/* ==============================================================================
   INTERACTIVE REALM POPOVER (ON HOVER)
   ============================================================================== */
.realm-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    padding: 20px 22px;
    background: linear-gradient(165deg, rgba(14, 21, 35, 0.98) 0%, rgba(8, 12, 22, 0.99) 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 28px rgba(16, 185, 129, 0.16);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.22s;
    pointer-events: none;
    z-index: 250;
    text-align: left;
}

/* Invisible Bridge to guarantee hover retention */
.realm-popover::after {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
}

/* Arrow pointer */
.realm-popover::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 24px;
    width: 13px;
    height: 13px;
    background: rgba(14, 21, 35, 0.98);
    border-left: 1px solid rgba(16, 185, 129, 0.4);
    border-top: 1px solid rgba(16, 185, 129, 0.4);
    transform: rotate(45deg);
}

.realm-pill:hover .realm-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.realm-pill.offline .realm-popover {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 28px rgba(239, 68, 68, 0.15);
}

.realm-pill.offline .realm-popover::before {
    border-left-color: rgba(239, 68, 68, 0.45);
    border-top-color: rgba(239, 68, 68, 0.45);
}

.realm-pill.offline .popover-status-live {
    color: #f87171;
}

.realm-pill.offline .popover-dot {
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}

.popover-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.popover-status-live {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    color: #10b981;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.popover-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.popover-ping {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 5px;
}

.popover-realm-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.popover-realm-badge {
    font-size: 11px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 14px;
    font-weight: 600;
}

.popover-online-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.22);
    margin-bottom: 14px;
}

.popover-online-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.popover-online-label {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 600;
}

.popover-online-val {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: #10b981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
}

.popover-online-icon {
    font-size: 20px;
    opacity: 0.85;
}

.popover-faction-meter {
    margin-bottom: 14px;
}

.faction-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    font-family: var(--font-mono);
    font-weight: 700;
    margin-bottom: 7px;
}

.ally-text {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #38bdf8;
}

.horde-text {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fb7185;
}

.faction-progress-track {
    width: 100%;
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    overflow: hidden;
}

.progress-ally {
    height: 100%;
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
    transition: width 0.4s ease;
}

.progress-horde {
    height: 100%;
    background: linear-gradient(90deg, #e11d48 0%, #fb7185 100%);
    box-shadow: 0 0 8px rgba(251, 113, 133, 0.5);
    transition: width 0.4s ease;
}

.popover-features-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 11px;
    color: #cbd5e1;
    font-weight: 600;
}

.popover-feat-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.feat-dot {
    font-size: 12px;
}

.popover-realmlist-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 9px;
    cursor: pointer;
    transition: var(--tr-fast);
}

.popover-realmlist-copy:hover {
    border-color: rgba(255, 204, 0, 0.6);
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.15);
}

.popover-realmlist-copy code {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #ffcc00;
}

.copy-badge {
    font-size: 10.5px;
    font-family: var(--font-heading);
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.popover-realmlist-copy:hover .copy-badge {
    background: rgba(255, 204, 0, 0.25);
    color: #ffcc00;
}

/* ==============================================================================
   PREMIUM PLAYER PROFILE / CABINET BUTTON & CURRENCY CAPSULE
   ============================================================================== */
.btn-nav-cabinet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 13px 0 10px;
    background: linear-gradient(180deg, rgba(22, 28, 42, 0.85) 0%, rgba(12, 16, 26, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #f1f5f9;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    position: relative;
    user-select: none;
}

.btn-nav-cabinet:hover {
    background: linear-gradient(180deg, rgba(30, 38, 56, 0.95) 0%, rgba(16, 22, 34, 0.98) 100%);
    border-color: rgba(251, 191, 36, 0.55);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 18px rgba(245, 158, 11, 0.22);
    transform: translateY(-1px);
}

.btn-nav-cabinet:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- LOGGED-IN LUXURY GOLDEN STATE --- */
.btn-nav-cabinet.logged-in {
    padding: 0 12px 0 8px;
    gap: 8px;
    background: linear-gradient(180deg, rgba(24, 29, 44, 0.9) 0%, rgba(13, 17, 27, 0.96) 100%);
    border: 1px solid rgba(245, 158, 11, 0.38);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 14px rgba(245, 158, 11, 0.12);
}

.btn-nav-cabinet.logged-in:hover {
    background: linear-gradient(180deg, rgba(32, 40, 60, 0.95) 0%, rgba(18, 23, 36, 0.98) 100%);
    border-color: rgba(251, 191, 36, 0.75);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 24px rgba(245, 158, 11, 0.32);
    transform: translateY(-1px);
}

/* User identity sub-block */
.nav-cab-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Royal Avatar / Crest */
.nav-cab-avatar {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(180, 83, 9, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(245, 158, 11, 0.2);
    transition: all 0.2s ease;
}

.btn-nav-cabinet:hover .nav-cab-avatar {
    border-color: #fbbf24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 12px rgba(245, 158, 11, 0.4);
    transform: scale(1.04);
}

.nav-cab-avatar.nav-cab-guest {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
    color: #94a3b8;
}

.btn-nav-cabinet:hover .nav-cab-avatar.nav-cab-guest {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(245, 158, 11, 0.15);
}

.cab-crown-svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Username typography */
.nav-cab-name {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #f8fafc;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Elegant hairline separator */
.nav-cab-divider {
    width: 1px;
    height: 18px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.35) 50%, rgba(245, 158, 11, 0.05) 100%);
    margin: 0 1px;
    flex-shrink: 0;
}

/* Currency Balance Capsule */
.nav-cab-balance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(180, 83, 9, 0.06) 100%);
    border: 1px solid rgba(245, 158, 11, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-nav-cabinet:hover .nav-cab-balance {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(180, 83, 9, 0.12) 100%);
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 12px rgba(245, 158, 11, 0.28);
}

.nav-coin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-coin-svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.nav-coin-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: -0.2px;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

/* Subtle chevron arrow */
.nav-cab-arrow {
    color: rgba(245, 158, 11, 0.6);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.btn-nav-cabinet:hover .nav-cab-arrow {
    transform: translateY(1.5px);
    color: #fbbf24;
}

/* Backward compatibility */
.nav-cab-coins {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* Sound Toggle Button (🔔/🔕) */
.btn-sound-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 13px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    outline: none;
}

.btn-sound-toggle:hover {
    background: rgba(24, 38, 66, 0.85);
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
    transform: translateY(-1px);
}

.btn-sound-toggle.muted {
    opacity: 0.6;
    border-color: rgba(255, 68, 68, 0.3);
}

/* Premium CTA button for Header (32px compact) */
.btn-nav-action,
#btn-nav-register {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    height: 32px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
}

.btn-nav-action:visited,
#btn-nav-register:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-nav-action:hover,
#btn-nav-register:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 25px rgba(0, 180, 216, 0.7), 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.btn-nav-action:active,
#btn-nav-register:active {
    transform: translateY(0) !important;
    box-shadow: 0 0 12px rgba(0, 180, 216, 0.5) !important;
}

/* ==============================================================================
   HERO SECTION
   ============================================================================== */
/* ==============================================================================
   CINEMATIC REGAL HERO SECTION
   ============================================================================== */
.hero-block {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 140px 24px 80px;
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-container {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hero Cinematic Initial Reveal Keyframe */
@keyframes heroRevealFadeUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes heroTitleSheen {
    0%, 65% {
        background-position: 100% 50%;
    }
    85%, 100% {
        background-position: 0% 50%;
    }
}

.hero-crest-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 24px;
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.15) 0%, rgba(8, 12, 20, 0.92) 100%);
    border: 1px solid rgba(255, 204, 0, 0.35);
    border-radius: 40px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ffcc00;
    text-transform: uppercase;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    animation: heroRevealFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

.crest-svg {
    filter: drop-shadow(0 0 6px rgba(255, 204, 0, 0.5));
}

.hero-brand-title {
    font-family: var(--font-heading);
    font-size: clamp(44px, 7.5vw, 88px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 8px;
    text-transform: uppercase;
    margin-bottom: 8px;
    background: linear-gradient(
        112deg,
        #ffffff 0%,
        #e2e8f0 30%,
        #ffeaa7 45%,
        #ffffff 50%,
        #ffeaa7 55%,
        #cbd5e1 70%,
        #ffffff 100%
    );
    background-size: 260% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 50px rgba(255, 204, 0, 0.25));
    animation: heroRevealFadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards, heroTitleSheen 8s ease-in-out 1.4s infinite;
}

.hero-sub-title {
    font-family: var(--font-heading);
    font-size: clamp(14px, 2.2vw, 22px);
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff7d6 0%, #ffcc00 45%, #d49500 85%, #946300 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 20px rgba(255, 204, 0, 0.45));
    margin-bottom: 24px;
    display: block;
    animation: heroRevealFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.42s backwards;
}

.hero-tagline {
    font-size: clamp(15px, 1.6vw, 18px);
    color: #cbd5e1;
    max-width: 640px;
    margin: 0 auto 36px;
    font-weight: 400;
    line-height: 1.7;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
    animation: heroRevealFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.54s backwards;
}

/* Regal Action Group */
.hero-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 44px;
    animation: heroRevealFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.68s backwards;
}

.btn-regal-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(180deg, #ffe066 0%, #d4a017 40%, #a67500 100%);
    color: #0d0a02;
    border: 1px solid #fff2a6;
    border-radius: 14px;
    padding: 18px 52px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 35px rgba(255, 204, 0, 0.45), inset 0 1px 0 #ffffff, 0 10px 30px rgba(0, 0, 0, 0.8);
    transition: var(--tr-smooth);
    position: relative;
    overflow: hidden;
}

.btn-regal-play:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 0 55px rgba(255, 204, 0, 0.75), inset 0 1px 0 #ffffff, 0 15px 45px rgba(0, 0, 0, 0.9);
}

.btn-play-sheen {
    position: absolute;
    top: -50%;
    left: -60%;
    width: 220%;
    height: 200%;
    background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
    transform: rotate(25deg);
    animation: btnSheen 4.5s infinite;
    pointer-events: none;
}

@keyframes btnSheen {
    0%, 70% { transform: translateX(-100%) rotate(25deg); }
    100% { transform: translateX(100%) rotate(25deg); }
}

.btn-regal-guide {
    font-size: 13.5px;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: var(--tr-fast);
}

.btn-regal-guide:hover {
    color: #ffcc00;
    transform: translateX(4px);
}



/* Online Players Counter Widget */
.online-counter-widget {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(8, 12, 20, 0.85);
    border: 1px solid rgba(0, 255, 102, 0.25);
    border-radius: 40px;
    padding: 10px 24px;
    box-shadow: 0 4px 20px rgba(0, 255, 102, 0.08);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    transition: var(--tr-fast);
}

.online-counter-widget:hover {
    border-color: rgba(0, 255, 102, 0.5);
    box-shadow: 0 6px 30px rgba(0, 255, 102, 0.15);
}

.online-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00ff66;
    box-shadow: 0 0 8px #00ff66;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 6px #00ff66; opacity: 1; }
    50% { box-shadow: 0 0 18px #00ff66, 0 0 30px rgba(0, 255, 102, 0.3); opacity: 0.8; }
}

.online-count-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.online-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.online-number {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: #00ff66;
    line-height: 1;
    text-shadow: 0 0 12px rgba(0, 255, 102, 0.4);
}

.online-factions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
}

.faction-alliance, .faction-horde {
    display: flex;
    align-items: center;
    gap: 4px;
}

.faction-alliance span { color: #5599ff; }
.faction-horde span { color: #dd3333; }

.faction-divider {
    color: rgba(255, 255, 255, 0.15);
    font-size: 14px;
}

/* Minimalist Realm Ticker Bar */
.hero-realm-ticker {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: rgba(8, 12, 20, 0.94);
    border: 1px solid rgba(255, 204, 0, 0.3);
    border-radius: 30px;
    padding: 8px 22px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: var(--tr-fast);
    animation: heroRevealFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.82s backwards;
}

.hero-realm-ticker:hover {
    border-color: var(--gold-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 20px var(--gold-glow);
    transform: translateY(-2px);
}

.hero-realm-ticker:active {
    transform: scale(0.98);
}

.hero-realm-ticker.copied {
    border-color: #00ff88 !important;
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.5), 0 8px 25px rgba(0, 0, 0, 0.8) !important;
    background: rgba(10, 25, 20, 0.96) !important;
}

.hero-realm-ticker.copied .ticker-copy {
    color: #00ff88 !important;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
}

.ticker-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #00ff66;
    letter-spacing: 1px;
}

.ticker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff66;
    box-shadow: 0 0 8px #00ff66;
    animation: tickerDotPulse 2.4s ease-in-out infinite;
}

@keyframes tickerDotPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px #00ff66;
    }
    50% {
        transform: scale(1.35);
        box-shadow: 0 0 14px #00ff66, 0 0 22px rgba(0, 255, 102, 0.55);
    }
}

.ticker-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
}

.ticker-realmlist code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: #ffffff;
}

.ticker-copy {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 0.5px;
}

/* ==============================================================================
   PILLARS OF EXCELLENCE SECTION
   ============================================================================== */
.pillars-section {
    padding: 60px 0 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.pillar-card {
    background: #080c14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 28px 24px;
    transition: var(--tr-smooth);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.4), transparent);
    opacity: 0;
    transition: var(--tr-fast);
}

.pillar-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 204, 0, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 204, 0, 0.1);
}

.pillar-card:hover::before {
    opacity: 1;
}

.pillar-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 204, 0, 0.08);
    border: 1px solid rgba(255, 204, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.pillar-card h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.pillar-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ==============================================================================
   SECTION BLOCKS
   ============================================================================== */
.section-block {
    padding: 90px 0;
    position: relative;
    z-index: 2;
}

.section-title-wrap {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 54px;
}

.sub-heading {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--gold-primary);
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.block-title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.section-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
}

/* ==============================================================================
   REGISTRATION LAYOUT
   ============================================================================== */
.register-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 20px;
    padding: 48px 44px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.pitch-text {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.7;
}

.pitch-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.p-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.p-ico {
    font-size: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--dark-border);
    border-radius: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.p-item strong {
    display: block;
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 2px;
}

.p-item p {
    font-size: 13px;
    color: var(--text-secondary);
}

.register-form-box {
    background: rgba(6, 9, 15, 0.85);
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.form-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-wrap {
    margin-bottom: 18px;
}

.field-wrap label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.field-wrap input {
    width: 100%;
    background: rgba(13, 18, 28, 0.9);
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 14px;
    transition: var(--tr-fast);
}

.field-wrap input:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 15px var(--gold-glow);
    background: rgba(18, 25, 40, 0.95);
}

.alert-box {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.alert-box.hidden {
    display: none;
}

.alert-box.success {
    background: rgba(0, 255, 102, 0.12);
    border: 1px solid var(--fel-green);
    color: #77ffaa;
}

.alert-box.error {
    background: rgba(255, 51, 68, 0.12);
    border: 1px solid #ff3344;
    color: #ff7788;
}

.alert-box.info {
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    color: #67e8f9;
}

/* Verification Code Step */
.verify-step-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeIn 0.3s ease-in-out;
}

.verify-badge-header {
    text-align: center;
    padding: 8px 0;
}

.verify-badge-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

.verify-badge-header h4 {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
}

.verify-note {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    margin: 0;
}

.input-code-confirm {
    text-align: center;
    font-family: var(--font-mono, monospace) !important;
    font-size: 24px !important;
    letter-spacing: 10px !important;
    font-weight: 800 !important;
    color: #ffcc00 !important;
    background: rgba(8, 12, 20, 0.95) !important;
    border: 2px solid rgba(255, 204, 0, 0.4) !important;
    padding: 12px 14px !important;
}

.input-code-confirm:focus {
    border-color: #ffcc00 !important;
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.4) !important;
}

.verify-sub-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}

.btn-resend-link,
.btn-back-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}

.btn-resend-link:hover,
.btn-back-link:hover {
    color: #ffcc00;
    text-decoration: underline;
}

.verify-sub-actions .sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #d4a017 0%, var(--gold-primary) 100%);
    color: #120e02;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--tr-smooth);
    box-shadow: 0 0 20px var(--gold-glow);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 35px var(--gold-glow);
}

.form-footer-hint {
    margin-top: 18px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.form-footer-hint code {
    font-family: var(--font-mono);
    color: var(--gold-primary);
    background: rgba(255, 204, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ==============================================================================
   CARDS GRID (FEATURES)
   ============================================================================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.feature-tile {
    position: relative;
    background: linear-gradient(135deg, rgba(16, 24, 39, 0.85), rgba(9, 14, 25, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.feature-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.7), transparent);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.feature-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 204, 0, 0.45);
    background: linear-gradient(135deg, rgba(22, 32, 54, 0.92), rgba(12, 18, 32, 0.96));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 204, 0, 0.15);
}

.feature-tile:hover::before {
    opacity: 1;
    background: linear-gradient(90deg, #ffcc00, #ff8000, #ffcc00);
}

.tile-action-hint {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    transition: all 0.25s ease;
    letter-spacing: 0.2px;
}

.feature-tile:hover .tile-action-hint,
.starter-bento-card:hover .tile-action-hint,
.qs-step-card:hover .tile-action-hint,
.qs-role-card:hover .tile-action-hint {
    color: #ffcc00;
}

.tile-action-hint svg {
    transition: transform 0.25s ease, stroke 0.25s ease;
    stroke: #64748b;
}

.feature-tile:hover .tile-action-hint svg,
.starter-bento-card:hover .tile-action-hint svg,
.qs-step-card:hover .tile-action-hint svg,
.qs-role-card:hover .tile-action-hint svg {
    transform: translateX(4px);
    stroke: #ffcc00;
}

.tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 204, 0, 0.08);
    border: 1px solid rgba(255, 204, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.1);
}

.tile-icon svg {
    width: 22px;
    height: 22px;
}

.feature-tile h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.2px;
    margin: 0;
    line-height: 1.3;
}

.feature-tile p {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

/* ==============================================================================
   LADDER
   ============================================================================== */
.ladder-wrapper {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 18px;
    padding: 32px 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.ladder-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.ladder-title-text {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: var(--gold-primary);
    letter-spacing: 1px;
}

.btn-small-refresh {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--dark-border);
    color: var(--text-primary);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: var(--tr-fast);
}

.btn-small-refresh:hover {
    background: rgba(255, 255, 255, 0.12);
}

.table-box {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th {
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--dark-border);
}

.data-table td {
    padding: 14px 16px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.rank-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
}

.rank-pill.gold {
    background: linear-gradient(135deg, #ffe066, #d4a017);
    color: #1a1200;
    box-shadow: 0 0 12px var(--gold-glow);
}

.rank-pill.silver {
    background: linear-gradient(135deg, #e0e8f0, #9aa6b8);
    color: #0c1420;
}

.rank-pill.bronze {
    background: linear-gradient(135deg, #e6a066, #945020);
    color: #1a0a00;
}

.rating-txt {
    font-family: var(--font-mono);
    font-weight: 800;
    color: var(--gold-primary);
}

.win-pct-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.win-track {
    width: 80px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.win-bar {
    height: 100%;
    background: linear-gradient(90deg, #00ff66, #ffcc00);
}

/* ==============================================================================
   STEPS
   ============================================================================== */
.steps-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.step-box {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 16px;
    padding: 34px 28px;
    position: relative;
    transition: var(--tr-smooth);
}

.step-box:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.25);
}

.step-num {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    position: absolute;
    top: 20px;
    right: 24px;
}

.step-box h3 {
    font-family: var(--font-heading);
    font-size: 19px;
    color: #ffffff;
    margin-bottom: 10px;
}

.step-box p {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.step-link {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--dark-border);
    color: #ffffff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    transition: var(--tr-fast);
}

.step-link:hover {
    background: rgba(255, 255, 255, 0.14);
}

.code-copy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--dark-border);
}

.code-copy-row code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--gold-primary);
}

.copy-btn-action {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--dark-border);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: var(--tr-fast);
}

.copy-btn-action:hover {
    background: var(--gold-primary);
    color: #000000;
}

.step-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-primary);
    background: rgba(255, 204, 0, 0.1);
    padding: 6px 12px;
    border-radius: 6px;
}

/* ==============================================================================
   FOOTER
   ============================================================================== */
.site-footer {
    border-top: 1px solid var(--dark-border);
    background: rgba(5, 7, 10, 0.95);
    padding: 36px 0;
    position: relative;
    z-index: 2;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    display: block;
    margin-bottom: 4px;
}

.footer-left p {
    font-size: 13px;
    color: var(--text-muted);
}

.footer-right {
    display: flex;
    gap: 24px;
}

.footer-stat {
    font-size: 13px;
    color: var(--text-secondary);
}

.footer-stat strong {
    color: #ffffff;
}

/* ==============================================================================
   EVENT BANNER (GURUBASHI ARENA COUNTDOWN)
   ============================================================================== */
.event-banner-wrap {
    padding: 10px 0 50px;
    position: relative;
    z-index: 2;
}

.event-banner-box {
    background: linear-gradient(135deg, rgba(26, 14, 6, 0.94) 0%, #090d16 60%);
    border: 1px solid rgba(255, 170, 0, 0.4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    padding: 30px 36px;
    position: relative;
    overflow: hidden;
}

.event-banner-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #ff9900, #ff3344);
}

.event-badge-pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 68, 0, 0.15);
    border: 1px solid rgba(255, 102, 0, 0.4);
    padding: 4px 12px;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #ffaa44;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ff3344;
    box-shadow: 0 0 8px #ff3344;
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.event-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.event-info {
    max-width: 620px;
}

.event-arena-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-primary);
    display: block;
    margin-bottom: 4px;
}

.event-boss-name {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 8px;
}

.event-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.event-desc strong {
    color: #ffffff;
}

.event-timer-block {
    background: rgba(8, 12, 19, 0.8);
    border: 1px solid var(--dark-border);
    padding: 16px 24px;
    border-radius: 14px;
    text-align: center;
    min-width: 240px;
}

.timer-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.timer-digits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.t-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.t-segment strong {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 900;
    color: var(--gold-primary);
    line-height: 1;
}

.t-segment small {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.t-sep {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 900;
    color: var(--gold-primary);
    opacity: 0.7;
    margin-bottom: 10px;
}

.event-action-tip {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ==============================================================================
   GEAR & SPEC PREVIEW TABS
   ============================================================================== */
.gear-section {
    padding-top: 20px;
}

.gear-tabs-wrap {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
}

.gear-tabs-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.gear-tab-btn {
    background: rgba(8, 12, 19, 0.7);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    transition: var(--tr-smooth);
    display: flex;
    flex-direction: column;
}

.gear-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.gear-tab-btn.active {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.15) 0%, rgba(13, 18, 28, 0.95) 100%);
    border-color: var(--gold-primary);
    box-shadow: 0 0 20px var(--gold-glow);
}

.tab-ico {
    font-size: 20px;
    margin-bottom: 4px;
}

.tab-label {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
}

.tab-subs {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.gear-display-card {
    background: rgba(8, 12, 19, 0.85);
    border: 1px solid var(--dark-border);
    border-radius: 16px;
    padding: 26px;
}

.spec-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.gear-slot-box {
    background: rgba(13, 18, 28, 0.8);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    padding: 16px;
}

.slot-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.slot-item-title {
    font-size: 14px;
    font-weight: 700;
    color: #a335ee; /* Epic purple */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: underline dotted rgba(163, 53, 238, 0.4);
    text-underline-offset: 3px;
}

.slot-item-title:hover {
    text-shadow: 0 0 10px rgba(163, 53, 238, 0.6);
    text-decoration: underline solid #a335ee;
}

.slot-item-title.legendary {
    color: #ff8000; /* Legendary Orange */
    text-decoration: underline dotted rgba(255, 128, 0, 0.4);
}

.slot-item-title.legendary:hover {
    text-shadow: 0 0 12px rgba(255, 128, 0, 0.8);
    text-decoration: underline solid #ff8000;
}

.tooltip-hint-icon {
    font-size: 11px;
    opacity: 0.6;
    margin-left: 3px;
    color: var(--gold-primary);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.slot-item-title:hover .tooltip-hint-icon,
.gear-slot-box:hover .tooltip-hint-icon {
    opacity: 1;
    transform: scale(1.25) rotate(15deg);
    color: #ffd100;
    text-shadow: 0 0 8px #ffd100;
}

.slot-item-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.gear-slot-box {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.gear-slot-box:hover {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6), 0 0 18px rgba(212, 175, 55, 0.12);
    transform: translateY(-2px);
}

/* ==============================================================================
   WOW ITEM AUTHENTIC INTERACTIVE TOOLTIP
   ============================================================================== */
.wow-tooltip {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    width: 320px;
    max-width: 90vw;
    background: radial-gradient(circle at 10% 10%, #151b28 0%, #080b12 100%);
    border: 2px solid #3c4456;
    outline: 1px solid #141722;
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: 
        inset 0 0 12px rgba(0, 0, 0, 0.9),
        0 10px 30px rgba(0, 0, 0, 0.95),
        0 0 20px rgba(0, 0, 0, 0.8);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.15s ease;
    backdrop-filter: blur(10px);
}

.wow-tooltip.active {
    opacity: 1;
}

/* Quality colors */
.wow-tooltip .q-legendary { color: #ff8000; font-weight: 700; }
.wow-tooltip .q-epic { color: #a335ee; font-weight: 700; }
.wow-tooltip .q-rare { color: #0070dd; font-weight: 700; }
.wow-tooltip .q-uncommon { color: #1eff00; }
.wow-tooltip .q-common { color: #ffffff; }

.wt-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
    padding-bottom: 0;
}

.wt-icon {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    border: 1.5px solid #d4a017;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
    flex-shrink: 0;
    background-color: #000;
}

.wt-title {
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 2px;
}

.wt-ilvl {
    color: #ffd100;
    font-size: 12.5px;
    font-weight: 700;
}

.wt-bind {
    color: #ffffff;
    font-size: 12.5px;
}

.wt-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #ffffff;
}

.wt-stat {
    color: #ffffff;
    font-size: 12.5px;
}

.wt-socket-list {
    margin: 6px 0;
}

.wt-socket {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #c0c0c0;
    margin-bottom: 3px;
}

.wt-socket-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.4);
    display: inline-block;
}

.wt-socket-dot.red { background: #e63946; box-shadow: 0 0 5px rgba(230, 57, 70, 0.7); }
.wt-socket-dot.blue { background: #0077b6; box-shadow: 0 0 5px rgba(0, 119, 182, 0.7); }
.wt-socket-dot.yellow { background: #ffd166; box-shadow: 0 0 5px rgba(255, 209, 102, 0.7); }
.wt-socket-dot.meta { background: #c77dff; box-shadow: 0 0 5px rgba(199, 125, 255, 0.7); }

.wt-socket-bonus {
    color: #c0c0c0;
    font-size: 12px;
    margin-top: 2px;
}

.wt-equip {
    color: #00ff00;
    font-size: 12.5px;
    line-height: 1.35;
    margin-top: 5px;
}

.wt-use {
    color: #00ff00;
    font-size: 12.5px;
    line-height: 1.35;
    margin-top: 5px;
}

.wt-set {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 204, 0, 0.25);
}

.wt-set-name {
    color: #ffd100;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
}

.wt-set-pieces {
    margin-left: 6px;
    margin-bottom: 7px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wt-set-piece {
    color: #94a3b8;
    font-size: 11.5px;
    line-height: 1.25;
}

.wt-set-piece.wt-piece-current {
    color: #ffd700;
    font-weight: 800;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.wt-set-piece.wt-piece-owned {
    color: #e2e8f0;
    font-weight: 600;
}

.wt-set-piece.wt-piece-missing {
    color: #64748b;
    opacity: 0.85;
}

.wt-piece-slot {
    color: #64748b;
    font-size: 10.5px;
    margin-left: 3px;
}

.wt-set-bonuses {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wt-set-bonus {
    font-size: 12px;
    line-height: 1.35;
    padding: 5px 8px;
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    transition: all 0.2s ease;
}

.wt-set-bonus.active {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    border-left: 3px solid #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.15);
}

.wt-set-bonus.active .wt-bonus-label {
    color: #4ade80;
    font-weight: 800;
}

.wt-set-bonus.inactive {
    color: #718096;
    background: rgba(113, 128, 150, 0.08);
    border-left: 3px solid #4a5568;
    opacity: 0.85;
}

.wt-set-bonus.inactive .wt-bonus-label {
    color: #a0aec0;
    font-weight: 700;
}

.wt-bonus-status {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
}

.wt-bonus-status.active {
    background: rgba(34, 197, 94, 0.25);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.4);
    text-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.wt-bonus-status.inactive {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.wt-flavor {
    color: #ffd100;
    font-style: italic;
    font-size: 12px;
    margin-top: 8px;
}

.wt-req {
    color: #ffffff;
    font-size: 12px;
    margin-top: 5px;
}

/* ==============================================================================
   4 MYTHIC BOSSES QUAD GRID
   ============================================================================== */
.bosses-quad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.mythic-card {
    background: linear-gradient(180deg, rgba(16, 22, 34, 0.94) 0%, rgba(9, 13, 20, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    user-select: none;
    position: relative;
}

.mythic-card:hover {
    transform: translateY(-8px);
}

.frost-card-accent:hover {
    border-color: #38bdf8;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.3);
}

.fel-card-accent:hover {
    border-color: #22c55e;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(34, 197, 94, 0.3);
}

.fire-card-accent:hover {
    border-color: #f97316;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(249, 115, 22, 0.3);
}

.celestial-card-accent:hover {
    border-color: #a855f7;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.3);
}

/* Boss Banner Header in Card */
.boss-banner-box {
    position: relative;
    width: 100%;
    height: 125px;
    overflow: hidden;
    background: #040711;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.boss-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.boss-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 7, 17, 0.1) 0%, rgba(9, 13, 20, 0.4) 65%, rgba(16, 22, 34, 0.95) 100%);
    pointer-events: none;
    z-index: 1;
}

.mythic-card:hover .boss-banner-img {
    transform: scale(1.08);
}

.boss-overlay-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.boss-overlay-tag.frost {
    background: rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.6);
}

.boss-overlay-tag.fel {
    background: rgba(34, 197, 94, 0.25);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.6);
}

.boss-overlay-tag.fire {
    background: rgba(249, 115, 22, 0.25);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.6);
}

.boss-overlay-tag.celestial {
    background: rgba(168, 85, 247, 0.25);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.6);
}

.boss-card-body {
    padding: 14px 16px 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mythic-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.m-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.mythic-header h3 {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 14.5px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.m-location {
    font-size: 10.5px;
    color: var(--text-muted);
}

.m-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 10px;
    flex-grow: 1;
}

.m-loot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.loot-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 5px;
    display: inline-block;
}

.loot-tag.epic {
    background: rgba(163, 53, 238, 0.12);
    border: 1px solid rgba(163, 53, 238, 0.3);
    color: #d896ff;
}

.loot-tag.relic {
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.3);
    color: var(--gold-primary);
}

/* Boss Card Interactive CTA Button */
.boss-card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.22s ease;
}

.boss-card-cta svg {
    transition: transform 0.25s ease;
}

.mythic-card:hover .boss-card-cta svg {
    transform: translateX(4px);
}

.mythic-card:hover .frost-cta {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0.08) 100%);
    border-color: rgba(56, 189, 248, 0.5);
    color: #7dd3fc;
}

.mythic-card:hover .fel-cta {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.08) 100%);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
}

.mythic-card:hover .fire-cta {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.08) 100%);
    border-color: rgba(249, 115, 22, 0.5);
    color: #fdba74;
}

.mythic-card:hover .celestial-cta {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.08) 100%);
    border-color: rgba(168, 85, 247, 0.5);
    color: #d8b4fe;
}


/* ==============================================================================
   FORM VALIDATION & INPUT UX
   ============================================================================== */
.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.field-tip {
    font-size: 11px;
    color: var(--text-muted);
}

.input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.input-container input {
    width: 100%;
    padding-right: 40px;
}

.field-check-icon {
    position: absolute;
    right: 14px;
    font-size: 14px;
    pointer-events: none;
    transition: var(--tr-fast);
}

/* ==============================================================================
   BATCH DOWNLOAD & 1-CLICK ACTIONS
   ============================================================================== */
.btn-batch-dl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: #00e5ff;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr-fast);
}

.btn-batch-dl:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: #00e5ff;
    box-shadow: 0 0 15px var(--frost-glow);
    transform: translateY(-1px);
}

/* ==============================================================================
   FAQ ACCORDION
   ============================================================================== */
.faq-accordion-wrap {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: rgba(10, 14, 23, 0.85);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--tr-fast);
}

.faq-item:hover {
    border-color: rgba(255, 204, 0, 0.3);
}

.faq-item.active {
    border-color: var(--gold-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px var(--gold-glow);
}

.faq-question {
    width: 100%;
    padding: 18px 24px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-pure);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.faq-ico {
    font-size: 20px;
    color: var(--gold-primary);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-ico {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 24px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 0 24px 20px 24px;
}

/* ==============================================================================
   COMMUNITY HUB
   ============================================================================== */
.community-banner-box {
    background: linear-gradient(135deg, rgba(14, 20, 35, 0.95) 0%, rgba(8, 12, 20, 0.95) 100%);
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 20px;
    padding: 48px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.1);
}

.community-content {
    max-width: 680px;
    margin: 0 auto;
}

.community-desc {
    color: var(--text-secondary);
    font-size: 15px;
    margin: 16px 0 32px 0;
}

.community-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-comm {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--tr-smooth);
}

.btn-comm.discord {
    background: #5865F2;
    color: #fff;
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
}

.btn-comm.discord:hover {
    background: #4752c4;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(88, 101, 242, 0.6);
}

.btn-comm.telegram {
    background: #229ED9;
    color: #fff;
    box-shadow: 0 6px 20px rgba(34, 158, 217, 0.4);
}

.btn-comm.telegram:hover {
    background: #1b85b8;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(34, 158, 217, 0.6);
}

/* ==============================================================================
   VIP DONATE STORE SECTION
   ============================================================================== */
.donate-section {
    background: radial-gradient(ellipse at top, rgba(212, 160, 23, 0.05) 0%, transparent 70%);
}

.donate-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
}

.donate-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.donate-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 204, 0, 0.3);
    transform: translateY(-2px);
}

.donate-tab-btn.active {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.2) 0%, rgba(255, 204, 0, 0.1) 100%);
    border-color: var(--gold-primary);
    color: #ffcc00;
    box-shadow: 0 4px 20px rgba(212, 160, 23, 0.25);
}

.donate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.donate-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    border-radius: 14px;
    background: rgba(12, 16, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    overflow: hidden;
}

.donate-card:hover {
    transform: translateY(-3px);
    background: rgba(16, 22, 34, 0.95);
}

.donate-card.legendary {
    border-color: rgba(255, 128, 0, 0.35);
}
.donate-card.legendary:hover {
    border-color: #ff8000;
    box-shadow: 0 8px 30px rgba(255, 128, 0, 0.25);
}

.donate-card.epic {
    border-color: rgba(163, 53, 238, 0.35);
}
.donate-card.epic:hover {
    border-color: #a335ee;
    box-shadow: 0 8px 30px rgba(163, 53, 238, 0.25);
}

.donate-card.selected {
    border-color: #00ff88 !important;
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.35) !important;
    background: rgba(10, 26, 20, 0.9) !important;
}

.card-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.item-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.item-icon-box.legendary {
    border: 2px solid #ff8000;
}
.item-icon-box.epic {
    border: 2px solid #a335ee;
}

.item-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-info {
    flex: 1;
    min-width: 0;
}

.item-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
    white-space: normal;
}

.item-title.legendary {
    color: #ff8000;
    text-shadow: 0 0 8px rgba(255, 128, 0, 0.3);
}

.item-title.epic {
    color: #b258ff;
    text-shadow: 0 0 8px rgba(178, 88, 255, 0.3);
}

.item-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.3;
    margin-bottom: 6px;
}

.item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.badge-ilvl {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
}

.badge-t10 {
    font-family: var(--font-heading, inherit);
    font-size: 9.5px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    border: 1px solid rgba(0, 198, 255, 0.6);
    padding: 1px 7px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 198, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.item-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: #ffcc00;
}

.coin-icon {
    font-size: 16px;
}

.btn-item-select {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.donate-card:hover .btn-item-select {
    background: linear-gradient(135deg, #d4a017 0%, #ffcc00 100%);
    color: #120e02;
    border-color: #ffcc00;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.4);
}

/* Instant Delivery Action Box */
.donate-delivery-panel {
    background: linear-gradient(135deg, rgba(16, 24, 38, 0.95) 0%, rgba(10, 16, 26, 0.98) 100%);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
}

.delivery-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: #00ff88;
    margin-bottom: 4px;
}

.delivery-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.selected-item-tag {
    display: inline-block;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.25);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #ffffff;
    margin-bottom: 14px;
}

.selected-item-tag b {
    color: #00ff88;
}

.delivery-input-row {
    display: flex;
    gap: 12px;
    max-width: 520px;
}

.delivery-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 14px;
    font-family: var(--font-heading);
    outline: none;
    transition: var(--tr-fast);
}

.delivery-input:focus {
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.btn-delivery-submit {
    padding: 12px 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00cc66 0%, #00ff88 100%);
    color: #061c10;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.35);
    white-space: nowrap;
}

.btn-delivery-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.55);
}

.btn-delivery-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.delivery-msg {
    margin-top: 12px;
    font-size: 13.5px;
    font-weight: 600;
}

/* ==============================================================================
   CHRONICLES OF RECENT UPDATES SECTION
   ============================================================================== */
.updates-section {
    position: relative;
    padding: 70px 0 60px;
}

.updates-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
    margin-top: 24px;
    align-items: stretch;
}

.update-card.bento-hero {
    grid-column: span 7;
}

.update-card.bento-starter {
    grid-column: span 5;
}

.update-card.bento-third {
    grid-column: span 4;
}

@media (max-width: 1100px) {
    .update-card.bento-hero,
    .update-card.bento-starter {
        grid-column: span 12;
    }
    .update-card.bento-third {
        grid-column: span 6;
    }
    .update-card.bento-third:last-child {
        grid-column: span 12;
    }
}

@media (max-width: 720px) {
    .updates-grid {
        grid-template-columns: 1fr;
    }
    .update-card.bento-hero,
    .update-card.bento-starter,
    .update-card.bento-third {
        grid-column: span 1;
    }
}

.update-card {
    background: rgba(10, 15, 25, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    backdrop-filter: blur(12px);
    transition: var(--tr-smooth);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.update-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.4), transparent);
    opacity: 0;
    transition: var(--tr-smooth);
}

.update-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 204, 0, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 204, 0, 0.1);
}

.update-card:hover::before {
    opacity: 1;
}

.update-card.featured-update {
    border-color: rgba(255, 204, 0, 0.25);
    background: linear-gradient(135deg, rgba(20, 24, 38, 0.8), rgba(10, 15, 25, 0.9));
}

.update-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    width: 100%;
}

.update-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 5px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    margin-left: auto;
}

.update-badge.gold {
    background: rgba(255, 204, 0, 0.15);
    color: var(--gold-primary);
    border: 1px solid rgba(255, 204, 0, 0.4);
}

.update-badge.frost {
    background: rgba(0, 229, 255, 0.15);
    color: var(--frost-blue);
    border: 1px solid rgba(0, 229, 255, 0.4);
}

.update-badge.fel {
    background: rgba(0, 255, 102, 0.15);
    color: var(--fel-green);
    border: 1px solid rgba(0, 255, 102, 0.4);
}

.update-badge.purple {
    background: rgba(192, 132, 252, 0.15);
    color: #c084fc;
    border: 1px solid rgba(192, 132, 252, 0.4);
}

.update-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255, 204, 0, 0.1);
    border: 1px solid rgba(255, 204, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.update-icon-box.frost-ico {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.3);
}

.update-icon-box.fel-ico {
    background: rgba(0, 255, 102, 0.1);
    border-color: rgba(0, 255, 102, 0.3);
}

.update-icon-box.purple-ico {
    background: rgba(192, 132, 252, 0.1);
    border-color: rgba(192, 132, 252, 0.3);
}

.update-meta {
    margin-bottom: 14px;
}

.update-meta h3,
.update-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-pure);
    line-height: 1.35;
    margin: 0 0 6px 0;
    padding: 0;
}

.update-sub {
    display: block;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

.update-desc {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 22px;
    flex-grow: 1;
}

.update-rewards-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.reward-pill {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 204, 0, 0.2);
    color: var(--text-primary);
}

.reward-pill .rp-val {
    color: var(--gold-primary);
    font-weight: 800;
}

.reward-pill.frost-pill {
    border-color: rgba(0, 229, 255, 0.25);
    color: #b0f4ff;
}

.reward-pill.fel-pill {
    border-color: rgba(0, 255, 102, 0.25);
    color: #a3ffc4;
}

.reward-pill.purple-pill {
    border-color: rgba(192, 132, 252, 0.25);
    color: #e9d5ff;
}

/* ==============================================================================
   NAVBAR CABINET BUTTON
   ============================================================================== */
.nav-badge-item {
    position: relative;
}

.nav-new-badge {
    font-size: 9px;
    font-weight: 900;
    background: #ff3344;
    color: #fff;
    padding: 1px 5px;
    border-radius: 6px;
    margin-left: 4px;
    letter-spacing: 0.5px;
    animation: pulseBadge 2s infinite ease-in-out;
}

@keyframes pulseBadge {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.08); }
}


.login-prompt-row {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-muted);
}

.btn-link-login {
    background: none;
    border: none;
    color: var(--gold-primary);
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr-fast);
    padding: 0;
}

.btn-link-login:hover {
    color: #fff;
    text-decoration: underline;
}

/* ==============================================================================
   PERSONAL CABINET & MODALS (Dark Glassmorphism Architecture)
   ============================================================================== */
.cabinet-modal-backdrop,
.auth-modal-backdrop,
.invoice-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 5, 10, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cabinet-modal-backdrop.hidden,
.auth-modal-backdrop.hidden,
.invoice-modal-backdrop.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Feature Detail Modal Window (Centered Luxury Dialog) */
.feature-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 15, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-modal-backdrop.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Feature Detail Centered Modal Card */
.feature-modal-card {
    background: linear-gradient(180deg, #0e172a 0%, #080d19 100%);
    border: 1px solid rgba(255, 204, 0, 0.35);
    box-shadow: 0 25px 85px rgba(0, 0, 0, 0.95), 0 0 45px rgba(255, 204, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    width: min(650px, 94vw);
    height: auto;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transform: scale(0.92) translateY(12px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    will-change: transform, opacity;
}

.feature-modal-backdrop:not(.hidden) .feature-modal-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.feature-modal-card .btn-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.feature-modal-header {
    background: rgba(14, 22, 38, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 68px 20px 28px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    position: relative;
}

.fm-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.15);
}

.fm-header-info {
    flex: 1;
    min-width: 0;
}

.fm-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.3);
    margin-bottom: 6px;
}

.fm-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 6px 0;
}

.fm-subtitle {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

.feature-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fm-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .fm-meta-grid {
        grid-template-columns: 1fr;
    }
}

.fm-meta-item {
    background: rgba(16, 24, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fm-meta-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fm-meta-val {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
}

.fm-section-heading {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    color: #ffcc00;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fm-mechanics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fm-mechanics-list li {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.55;
    position: relative;
    padding-left: 24px;
}

.fm-mechanics-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #ffcc00;
    font-weight: 900;
    font-size: 14px;
}

/* Feature Modal Combat Stats Summary Grid */
.fm-stats-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 680px) {
    .fm-stats-sheet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 440px) {
    .fm-stats-sheet-grid {
        grid-template-columns: 1fr;
    }
}

.fm-stat-sheet-item {
    background: rgba(14, 22, 38, 0.88);
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 11px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.fm-stat-sheet-item:hover {
    border-color: rgba(255, 204, 0, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 204, 0, 0.18);
}

.fm-stat-sheet-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.fm-stat-sheet-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fm-stat-sheet-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.fm-stat-sheet-val {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.3;
}

.fm-stat-sheet-val.color-gold { color: #ffd700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); }
.fm-stat-sheet-val.color-cyan { color: #38bdf8; text-shadow: 0 0 8px rgba(56, 189, 248, 0.3); }
.fm-stat-sheet-val.color-green { color: #4ade80; text-shadow: 0 0 8px rgba(74, 222, 128, 0.3); }
.fm-stat-sheet-val.color-amber { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.3); }
.fm-stat-sheet-val.color-purple { color: #c084fc; text-shadow: 0 0 8px rgba(192, 132, 252, 0.3); }
.fm-stat-sheet-val.color-red { color: #f87171; text-shadow: 0 0 8px rgba(248, 113, 113, 0.3); }

/* Feature Modal Loot Showcase Grid */
.fm-loot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.fm-loot-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.fm-loot-card:hover {
    transform: translateY(-2px);
    background: rgba(26, 36, 56, 0.95);
    border-color: rgba(255, 204, 0, 0.4);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 204, 0, 0.18);
}

.fm-loot-card.quality-legendary {
    border-color: rgba(255, 128, 0, 0.35);
}
.fm-loot-card.quality-legendary:hover {
    border-color: #ff8000;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7), 0 0 18px rgba(255, 128, 0, 0.3);
}

.fm-loot-card.quality-epic {
    border-color: rgba(163, 53, 238, 0.35);
}
.fm-loot-card.quality-epic:hover {
    border-color: #a335ee;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7), 0 0 18px rgba(163, 53, 238, 0.3);
}

.fm-loot-icon-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    flex-shrink: 0;
    background: #000;
    margin-top: 2px;
}

.fm-loot-card.quality-legendary .fm-loot-icon-wrap {
    border-color: #ff8000;
    box-shadow: 0 0 10px rgba(255, 128, 0, 0.45);
}

.fm-loot-card.quality-epic .fm-loot-icon-wrap {
    border-color: #a335ee;
    box-shadow: 0 0 10px rgba(163, 53, 238, 0.45);
}

.fm-loot-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fm-loot-ilvl-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: #ffcc00;
    font-size: 8.5px;
    font-weight: 900;
    text-align: center;
    line-height: 11px;
    font-family: var(--font-mono, monospace);
}

.fm-loot-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fm-loot-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.3;
}

.fm-loot-card.quality-legendary .fm-loot-name {
    color: #ff8000;
}

.fm-loot-card.quality-epic .fm-loot-name {
    color: #c084fc;
}

.fm-loot-sub {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.3;
}

.fm-loot-hover-hint {
    margin-top: 5px;
    font-size: 10.5px;
    color: #ffd700;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono, monospace);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fm-loot-card:hover .fm-loot-hover-hint {
    opacity: 1;
    transform: translateX(2px);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Item Card Visible Stat Badges */
.fm-loot-stats-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.fm-stat-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    line-height: 1.25;
    white-space: nowrap;
}

.fm-stat-badge.badge-primary {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.35);
    color: #ffd700;
}

.fm-stat-badge.badge-armor {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.35);
    color: #38bdf8;
}

.fm-stat-badge.badge-stamina {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.35);
    color: #4ade80;
}

.fm-stat-badge.badge-rating {
    background: rgba(192, 132, 252, 0.12);
    border-color: rgba(192, 132, 252, 0.35);
    color: #c084fc;
}

.fm-stat-badge.badge-damage {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.fm-stat-badge.badge-proc {
    background: rgba(244, 63, 94, 0.14);
    border-color: rgba(244, 63, 94, 0.4);
    color: #fb7185;
}

.fm-stat-badge.badge-sockets {
    background: rgba(232, 121, 249, 0.14);
    border-color: rgba(232, 121, 249, 0.4);
    color: #f0abfc;
}

.fm-tip-box {
    background: rgba(255, 204, 0, 0.06);
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-left: 4px solid #ffcc00;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.fm-tip-icon {
    font-size: 18px;
    line-height: 1;
}

.fm-tip-text {
    font-size: 13px;
    color: #e2e8f0;
    line-height: 1.5;
    margin: 0;
}

.feature-modal-footer {
    background: rgba(14, 22, 38, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 28px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.btn-fm-close-action {
    background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%);
    color: #000000;
    border: none;
    font-size: 14px;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3);
}

.btn-fm-close-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.45);
}

.cabinet-modal-card {
    background: radial-gradient(circle at 50% 0%, #111a2c 0%, #090e18 60%, #050810 100%);
    border: 1px solid rgba(255, 204, 0, 0.32);
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.9), 0 0 60px rgba(255, 204, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    width: 96vw;
    max-width: 1460px;
    height: 92vh;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

@keyframes modalSlideUp {
    from { transform: translateY(24px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.cabinet-header {
    background: rgba(12, 18, 30, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.cabinet-user-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex-shrink: 0;
}

.user-avatar-circle {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.18) 0%, rgba(255, 204, 0, 0.05) 100%);
    border: 1.5px solid rgba(255, 204, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.2);
    flex-shrink: 0;
}

.user-info-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.user-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.user-login {
    font-size: 21px;
    font-weight: 900;
    color: var(--text-pure, #ffffff);
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.vip-badge-premium {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.25), rgba(255, 140, 0, 0.2));
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.45);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
    line-height: 1;
}

.vip-badge-premium.gm-vip-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.45), rgba(180, 83, 9, 0.4));
    color: #fef08a;
    border: 1.2px solid #f59e0b;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.5), inset 0 0 8px rgba(254, 240, 138, 0.25);
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.user-acc-id {
    font-size: 11px;
    color: #64748b;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
}

.vip-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-reg-date {
    font-size: 12px;
    color: #8899ac;
}

.cabinet-balance-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(6, 10, 18, 0.75);
    border: 1px solid rgba(255, 204, 0, 0.3);
    padding: 9px 20px;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.balance-display {
    display: flex;
    flex-direction: column;
}

.bal-label {
    font-size: 10px;
    font-weight: 800;
    color: #88a0c0;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.bal-amount-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bal-amount-wrap .coin-ico {
    font-size: 20px;
    filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.6));
}

.bal-coins {
    font-size: 24px;
    font-weight: 900;
    color: #ffcc00;
    font-family: var(--font-mono, monospace);
    letter-spacing: -0.5px;
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.4);
}

.bal-curr {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.btn-topup-accent {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffcc00 0%, #ff9500 100%);
    border: none;
    color: #0b0f19;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(255, 204, 0, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-topup-accent:hover {
    box-shadow: 0 6px 25px rgba(255, 204, 0, 0.6);
    transform: translateY(-2px);
    background: linear-gradient(135deg, #ffe066 0%, #ffa726 100%);
}

.cabinet-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn-cab-logout {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cab-logout:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.45);
    color: #f87171;
    transform: translateY(-1px);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.25);
}

.btn-modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* Cabinet Nav Tabs - Perfectly Balanced Segmented Ribbon */
.cabinet-nav-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(8, 12, 20, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.cab-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
}

.cab-tab-btn svg {
    flex-shrink: 0;
    opacity: 0.85;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cab-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.cab-tab-btn:hover svg {
    opacity: 1;
    transform: translateY(-1px);
}

.cab-tab-btn.active {
    color: #ffcc00;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.18), rgba(255, 140, 0, 0.1));
    border-color: #ffcc00;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.22);
}

.cab-tab-btn.active svg {
    opacity: 1;
    color: #ffcc00;
    stroke: #ffcc00;
}

/* Refined Golden Battle Pass Tab Pill (Cleaned from star icon, balanced & centered) */
.cab-tab-btn[data-tab="battlepass"],
.cab-tab-btn.cab-tab-btn-bp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.08), rgba(255, 140, 0, 0.04));
    border: 1px solid rgba(255, 204, 0, 0.35);
    border-radius: 10px;
    color: #ffd166;
    box-shadow: 0 0 14px rgba(255, 204, 0, 0.12), inset 0 0 10px rgba(255, 204, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.cab-tab-btn[data-tab="battlepass"]:hover,
.cab-tab-btn.cab-tab-btn-bp:hover {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.16), rgba(255, 140, 0, 0.08));
    border-color: rgba(255, 204, 0, 0.65);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.28), inset 0 0 12px rgba(255, 204, 0, 0.08);
    transform: translateY(-1px);
}

.cab-tab-btn[data-tab="battlepass"].active,
.cab-tab-btn.cab-tab-btn-bp.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.26), rgba(255, 140, 0, 0.18));
    border-color: #ffcc00;
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.4), inset 0 0 16px rgba(255, 204, 0, 0.15);
}

.cab-tab-btn[data-tab="battlepass"] #cab-bp-badge,
.cab-tab-btn.cab-tab-btn-bp #cab-bp-badge {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Cabinet Panes - Spacious, Modernized Layout */
.cabinet-tab-pane {
    display: none;
    padding: 28px 36px 40px 36px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    min-height: 0;
}

.cabinet-tab-pane.active {
    display: block;
    animation: fadeInPane 0.25s ease;
}

@media (max-width: 900px) {
    .cabinet-modal-card {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
    .cabinet-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .cabinet-balance-box {
        order: 3;
        width: 100%;
        justify-content: space-between;
    }
    .cabinet-nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px 12px;
        gap: 6px;
    }
    .cabinet-nav-tabs::-webkit-scrollbar {
        display: none;
    }
    .cab-tab-btn {
        padding: 7px 11px;
        font-size: 12px;
    }
    .cabinet-tab-pane {
        padding: 16px 14px 28px 14px;
    }
}

@keyframes fadeInPane {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.pane-header {
    margin-bottom: 24px;
}

.pane-header h3 {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-pure, #ffffff);
    letter-spacing: -0.3px;
    margin: 0 0 6px 0;
}

.pane-sub {
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.5;
}

.pane-header-with-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pane-header-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-refresh-chars {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh-chars:hover {
    background: rgba(255, 204, 0, 0.12);
    border-color: rgba(255, 204, 0, 0.4);
    color: #ffcc00;
    transform: translateY(-1px);
}

/* ==========================================================================
   PREMIUM CHARACTER CARDS (WoW AAA CABINET DESIGN)
   ========================================================================== */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 24px;
    margin-bottom: 28px;
}

.character-card-premium {
    position: relative;
    background: radial-gradient(circle at 15% 15%, var(--card-class-glow, rgba(255, 204, 0, 0.12)) 0%, rgba(13, 19, 32, 0.85) 60%),
                rgba(11, 16, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.character-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-class-color, #ffcc00), transparent);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.character-card-premium:hover {
    transform: translateY(-4px);
    border-color: var(--card-class-color, #ffcc00);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px var(--card-class-glow, rgba(255, 204, 0, 0.25));
}

.character-card-premium:hover::before {
    opacity: 1;
}

/* Header: Avatar, Name, Level, Status */
.char-header-premium {
    display: flex;
    align-items: center;
    gap: 14px;
}

.char-crest-wrapper {
    position: relative;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

.char-class-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-class-color, #ffcc00);
    box-shadow: 0 0 14px var(--card-class-glow, rgba(255, 204, 0, 0.35));
    background: #0d1320;
}

.char-avatar-fallback {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid var(--card-class-color, #ffcc00);
    background: #141c2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
}

.char-level-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: linear-gradient(135deg, #ffcc00, #ff9900);
    color: #0b0f19;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    border: 1px solid #ffe57f;
    font-family: var(--font-mono, monospace);
}

.char-identity-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.char-name-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.char-meta-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.char-tag-race-class {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.char-tag-faction {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    line-height: 1.2;
}

.char-tag-faction.alliance {
    background: rgba(0, 112, 222, 0.15);
    border: 1px solid rgba(0, 112, 222, 0.4);
    color: #69ccf0;
}

.char-tag-faction.horde {
    background: rgba(196, 31, 59, 0.15);
    border: 1px solid rgba(196, 31, 59, 0.4);
    color: #ff6b6b;
}

/* Online/Offline Status */
.char-status-wrapper {
    flex-shrink: 0;
}

.char-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.4px;
}

.char-status-badge.online {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.pulse-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    animation: statusPulse 1.8s infinite ease-in-out;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.char-status-badge.offline {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
}

/* Stats 4-Grid */
.char-stats-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: rgba(6, 10, 18, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px;
}

.c-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 4px 2px;
}

.c-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.c-stat-val {
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
}

.c-stat-val.gold-val {
    color: #fbbf24;
}

.c-stat-val.ap-val {
    color: #a78bfa;
}

.c-stat-val.hk-val {
    color: #f87171;
}

.c-stat-val.time-val {
    color: #38bdf8;
}

/* Action Buttons Container */
.char-actions-container-premium {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.btn-char-act-full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.btn-char-act-full.unstuck {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(0, 112, 222, 0.15));
    border-color: rgba(0, 229, 255, 0.35);
    color: #67e8f9;
}

.btn-char-act-full.unstuck:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(0, 112, 222, 0.3));
    border-color: #22d3ee;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 229, 255, 0.3);
    transform: translateY(-1px);
}

.char-services-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.btn-char-act-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    padding: 9px 11px;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s ease;
}

.btn-char-act-tile:hover {
    background: rgba(255, 204, 0, 0.12);
    border-color: rgba(255, 204, 0, 0.45);
    color: #ffcc00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.b-act-left {
    display: flex;
    align-items: center;
    gap: 7px;
}

.b-act-icon {
    font-size: 14px;
    line-height: 1;
}

.b-act-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    line-height: 1.2;
    font-family: var(--font-mono, monospace);
}

.b-act-badge.free {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.b-act-badge.price {
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.3);
}

/* Donate Pane Split Layout - Balanced & Spacious */
.donate-split-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1024px) {
    .donate-split-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ==============================================================================
   DONATE / FINANCIAL PAYMENT INTERFACE (Ultra-Trust & Premium Aesthetics)
   ============================================================================== */
.donate-split-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    margin-top: 14px;
}

@media (max-width: 1024px) {
    .donate-split-layout {
        grid-template-columns: 1fr;
    }
}

.donate-split-left,
.donate-split-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Trust Guarantee Banner */
.donate-trust-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    background: linear-gradient(135deg, rgba(16, 26, 44, 0.7), rgba(8, 14, 24, 0.8));
    border: 1px solid rgba(0, 255, 170, 0.2);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 8px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
}

.trust-icon {
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(0, 255, 170, 0.3));
}

.trust-text {
    display: flex;
    flex-direction: column;
}

.trust-text strong {
    font-size: 13px;
    font-weight: 800;
    color: #e2f5ff;
    letter-spacing: 0.2px;
}

.trust-text span {
    font-size: 11px;
    color: #8da4c4;
}

/* Section Title */
.donate-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffcc00, #ff8800);
    color: #000;
    font-weight: 900;
    font-size: 12px;
}

.donate-section-title h4 {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

/* Donate Packages Grid */
.donate-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.donate-pkg-card {
    background: rgba(13, 20, 32, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.donate-pkg-card:hover {
    border-color: rgba(255, 204, 0, 0.5);
    background: rgba(22, 32, 50, 0.85);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.donate-pkg-card.selected {
    border-color: #ffcc00;
    background: linear-gradient(145deg, rgba(32, 45, 70, 0.95), rgba(16, 24, 40, 0.95));
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.25), inset 0 0 15px rgba(255, 204, 0, 0.1);
    transform: translateY(-2px);
}

.pkg-header-tag {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 3px 6px;
    font-size: 9.5px;
    font-weight: 800;
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    color: #9ab4d6;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pkg-header-tag.popular-tag {
    background: linear-gradient(90deg, #ff8800, #ffcc00);
    color: #000;
    font-weight: 900;
}

.pkg-header-tag.bonus-tier {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    border-bottom: 1px solid rgba(0, 255, 136, 0.3);
}

.pkg-header-tag.vip-tier {
    background: linear-gradient(90deg, #00d2ff, #0077ff);
    color: #fff;
    font-weight: 800;
}

.pkg-header-tag.max-tier {
    background: linear-gradient(90deg, #b827fc, #e056fd);
    color: #fff;
    font-weight: 900;
}

.pkg-coins-val {
    font-size: 22px;
    font-weight: 900;
    color: #ffcc00;
    font-family: var(--font-mono);
    margin-top: 6px;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pkg-coins-val span {
    font-size: 15px;
}

.pkg-rub-val {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 4px 0 6px;
}

.pkg-bonus-desc {
    font-size: 11px;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 8px;
}

.pkg-bonus-desc.standard {
    color: #8da4c4;
}

.pkg-vip-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #8da4c4;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pkg-vip-pill.vip-gold {
    background: rgba(255, 204, 0, 0.12);
    color: #ffcc00;
    border-color: rgba(255, 204, 0, 0.35);
}

.pkg-vip-pill.vip-plat {
    background: rgba(0, 210, 255, 0.12);
    color: #00d2ff;
    border-color: rgba(0, 210, 255, 0.35);
}

.pkg-vip-pill.vip-elite {
    background: rgba(224, 86, 253, 0.15);
    color: #e056fd;
    border-color: rgba(224, 86, 253, 0.4);
}

/* Custom Amount Card */
.custom-amount-card {
    background: rgba(12, 18, 28, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 18px 20px;
    backdrop-filter: blur(12px);
}

.custom-amount-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.custom-amount-header h5 {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.calc-hint {
    font-size: 11.5px;
    color: #8da4c4;
}

/* Quick Chips */
.quick-amount-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.chip-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #c0d4f0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-btn:hover {
    background: rgba(255, 204, 0, 0.1);
    border-color: rgba(255, 204, 0, 0.4);
    color: #ffcc00;
}

.chip-btn.active {
    background: rgba(255, 204, 0, 0.15);
    border-color: #ffcc00;
    color: #ffcc00;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.2);
}

.custom-amount-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(7, 11, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 12px 16px;
}

.amount-input-box {
    display: flex;
    align-items: center;
    background: rgba(14, 22, 34, 0.85);
    border: 1px solid rgba(255, 204, 0, 0.4);
    border-radius: 8px;
    padding: 0 12px;
    width: 190px;
}

.input-prefix {
    font-size: 12px;
    color: #8da4c4;
    margin-right: 6px;
}

.amount-input-box input {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    width: 100%;
    padding: 8px 0;
    font-family: var(--font-mono);
}

.curr-unit {
    font-size: 16px;
    font-weight: 800;
    color: #ffcc00;
}

.calc-arrow {
    font-size: 18px;
    color: #8da4c4;
}

.coins-calc-result {
    display: flex;
    flex-direction: column;
}

.cc-lbl {
    font-size: 11px;
    color: #8da4c4;
}

.cc-sum {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-sum strong {
    font-size: 22px;
    font-weight: 900;
    color: #ffcc00;
    font-family: var(--font-mono);
}

.cc-cur {
    font-size: 13px;
    color: #e0e8f5;
    font-weight: 700;
}

.bonus-green-text {
    font-size: 11.5px;
    font-weight: 800;
    color: #00ff88;
}

.vip-unlock-preview {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.08), rgba(255, 128, 0, 0.04));
    border: 1px dashed rgba(255, 204, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: #f0e6c8;
}

.vip-unlock-preview strong {
    color: #ffd100;
    font-weight: 800;
}

.vup-icon {
    font-size: 18px;
    line-height: 1;
}

/* Quick Amount Presets (Chips) */
.cac-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cac-header-row h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cac-hint-tag {
    font-size: 11px;
    font-weight: 700;
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.25);
    padding: 3px 8px;
    border-radius: 6px;
}

.donate-quick-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

@media (max-width: 600px) {
    .donate-quick-chips {
        grid-template-columns: repeat(2, 1fr);
    }
}

.chip-btn {
    background: rgba(16, 25, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    color: #e2e8f0;
}

.chip-btn span {
    font-size: 14px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.chip-btn small {
    font-size: 10.5px;
    font-weight: 700;
    color: #8da4c4;
}

.chip-btn small.hit-chip {
    color: #ff9500;
    font-weight: 800;
}

.chip-btn small.max-chip {
    color: #ffd100;
    font-weight: 800;
}

.chip-btn:hover {
    border-color: rgba(255, 204, 0, 0.4);
    background: rgba(26, 38, 60, 0.85);
    transform: translateY(-2px);
}

.chip-btn.active {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.18), rgba(255, 128, 0, 0.12));
    border-color: #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
    color: #ffd100;
}

.chip-btn.active small {
    color: #fff;
}

/* Payment Methods Block Header */
.pm-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.pm-header-row h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pm-free-badge {
    font-size: 11.5px;
    font-weight: 700;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.25);
    padding: 3px 10px;
    border-radius: 6px;
}

/* Master Payment Methods Grid - 2 COLUMNS, NO TRUNCATION */
.methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 720px) {
    .methods-grid {
        grid-template-columns: 1fr;
    }
}

.method-card {
    background: rgba(13, 20, 32, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.method-card:hover {
    border-color: rgba(255, 204, 0, 0.45);
    background: rgba(18, 28, 45, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.method-card:focus-visible {
    outline: 2px solid #00ff88;
    outline-offset: 2px;
}

/* Active Gateway Glows */
.method-card.active {
    background: linear-gradient(135deg, rgba(18, 32, 50, 0.95), rgba(10, 18, 30, 0.98));
}

.method-card.active.method-sbp {
    border-color: #00ff88;
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.25), inset 0 0 15px rgba(0, 255, 136, 0.06);
}

.method-card.active.method-card {
    border-color: #00bfff;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.25), inset 0 0 15px rgba(0, 191, 255, 0.06);
}

.method-card.active.method-yoomoney {
    border-color: #c044ff;
    box-shadow: 0 0 25px rgba(192, 68, 255, 0.25), inset 0 0 15px rgba(192, 68, 255, 0.06);
}

.method-card.active.method-crypto {
    border-color: #f7931a;
    box-shadow: 0 0 25px rgba(247, 147, 26, 0.25), inset 0 0 15px rgba(247, 147, 26, 0.06);
}

/* Icon Wrap */
.method-card-left {
    flex-shrink: 0;
}

.method-icon-wrap {
    font-size: 26px;
    line-height: 1;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.method-card:hover .method-icon-wrap {
    transform: scale(1.05);
}

.sbp-glow { 
    color: #00ffaa; 
    text-shadow: 0 0 14px rgba(0, 255, 170, 0.6); 
    border-color: rgba(0, 255, 170, 0.3) !important;
    background: rgba(0, 255, 170, 0.08) !important;
}
.card-glow { 
    color: #00bfff; 
    text-shadow: 0 0 14px rgba(0, 191, 255, 0.6); 
    border-color: rgba(0, 191, 255, 0.3) !important;
    background: rgba(0, 191, 255, 0.08) !important;
}
.crypto-glow { 
    color: #f7931a; 
    text-shadow: 0 0 14px rgba(247, 147, 26, 0.6); 
    border-color: rgba(247, 147, 26, 0.3) !important;
    background: rgba(247, 147, 26, 0.08) !important;
}
.yoo-glow { 
    color: #c044ff; 
    text-shadow: 0 0 14px rgba(192, 68, 255, 0.6); 
    border-color: rgba(192, 68, 255, 0.3) !important;
    background: rgba(192, 68, 255, 0.08) !important;
}

/* Method Info - Full unclipped text */
.method-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.method-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.method-name {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    white-space: normal;
    line-height: 1.25;
}

.method-badge {
    font-size: 10.5px;
    font-weight: 800;
    padding: 2.5px 8px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.badge-free {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.35);
}

.badge-instant {
    background: rgba(0, 191, 255, 0.15);
    color: #00bfff;
    border: 1px solid rgba(0, 191, 255, 0.35);
}

.badge-crypto {
    background: rgba(247, 147, 26, 0.15);
    color: #ffab40;
    border: 1px solid rgba(247, 147, 26, 0.35);
}

.badge-wallet {
    background: rgba(192, 68, 255, 0.15);
    color: #d880ff;
    border: 1px solid rgba(192, 68, 255, 0.35);
}

.method-desc {
    font-size: 11.5px;
    color: #8da4c4;
    white-space: normal;
    line-height: 1.35;
}

/* Bank and Network tags chips */
.method-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.method-tag-pill {
    font-size: 9.5px;
    font-weight: 600;
    padding: 1.5px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #8da4c4;
    border: 1px solid rgba(255, 255, 255, 0.06);
    letter-spacing: 0.2px;
}

/* Radio checkmark circle */
.method-select-radio {
    flex-shrink: 0;
}

.radio-check-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.radio-checkmark {
    font-size: 12px;
    font-weight: 900;
    color: #00ff88;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.method-card.active .radio-check-circle {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
}

.method-card.active .radio-checkmark {
    opacity: 1;
    transform: scale(1);
}

/* Dynamic Details Banner for Selected Method */
.method-details-banner {
    display: none;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(16, 26, 42, 0.95), rgba(9, 16, 28, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    animation: fadeInSlide 0.25s ease forwards;
}

.method-details-banner.active {
    display: flex;
}

.method-details-banner.banner-sbp {
    border-color: rgba(0, 255, 136, 0.35);
    background: linear-gradient(135deg, rgba(10, 32, 25, 0.85), rgba(8, 18, 25, 0.95));
}

.method-details-banner.banner-card {
    border-color: rgba(0, 191, 255, 0.35);
    background: linear-gradient(135deg, rgba(10, 26, 45, 0.85), rgba(8, 16, 28, 0.95));
}

.method-details-banner.banner-yoomoney {
    border-color: rgba(192, 68, 255, 0.35);
    background: linear-gradient(135deg, rgba(28, 12, 42, 0.85), rgba(12, 8, 24, 0.95));
}

.method-details-banner.banner-crypto {
    border-color: rgba(247, 147, 26, 0.35);
    background: linear-gradient(135deg, rgba(35, 20, 8, 0.85), rgba(18, 12, 6, 0.95));
}

.mdb-icon-col {
    flex-shrink: 0;
}

.mdb-icon {
    font-size: 28px;
    line-height: 1;
}

.mdb-text-col {
    flex: 1;
    min-width: 0;
}

.mdb-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.mdb-title-row strong {
    font-size: 13.5px;
    color: #fff;
    font-weight: 800;
}

.mdb-speed-tag {
    font-size: 11px;
    font-weight: 800;
    color: #00ff88;
}

.mdb-instruction {
    margin: 0;
    font-size: 11.5px;
    color: #a0aec0;
    line-height: 1.4;
}

.mdb-secure-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #00ffaa;
    background: rgba(0, 255, 170, 0.1);
    border: 1px solid rgba(0, 255, 170, 0.25);
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .method-details-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .mdb-secure-badge {
        align-self: flex-start;
    }
}

/* Live Order Summary Checklist */
.donate-order-summary {
    background: linear-gradient(180deg, rgba(14, 22, 36, 0.9) 0%, rgba(9, 15, 25, 0.98) 100%);
    border: 1px solid rgba(255, 204, 0, 0.2);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
}

.summary-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-icon {
    font-size: 16px;
}

.summary-header h5 {
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-instant-tag {
    font-size: 11.5px;
    font-weight: 800;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.12);
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
}

.summary-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.sum-row span {
    color: #8da4c4;
}

.sum-row strong {
    color: #fff;
    font-weight: 700;
    font-family: var(--font-sans);
}

.sum-row .gold-text { 
    color: #ffd100; 
    font-weight: 800; 
    font-size: 15px; 
    font-family: var(--font-mono); 
}
.sum-row .green-text { 
    color: #00ff88; 
    font-weight: 800; 
}
.sum-row .free-text { 
    color: #00ffaa; 
    font-weight: 700; 
}
.sum-row .muted-text { 
    color: #718096; 
}

/* Master Gamemaster Action Button */
.donate-action-footer {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.btn-create-invoice {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffcc00 0%, #ff9500 50%, #ff6a00 100%);
    border: 1px solid rgba(255, 235, 150, 0.5);
    color: #000;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 35px rgba(255, 150, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-invoice-icon {
    font-size: 20px;
    line-height: 1;
}

.btn-create-invoice:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 45px rgba(255, 160, 0, 0.65), 0 0 25px rgba(255, 204, 0, 0.5);
    filter: brightness(1.06);
}

.btn-create-invoice:active {
    transform: translateY(0);
    box-shadow: 0 6px 20px rgba(255, 150, 0, 0.4);
}

/* Shimmer Sweep Animation */
.btn-shimmer-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: btnShimmerSweep 3.5s infinite;
    pointer-events: none;
}

@keyframes btnShimmerSweep {
    0% { transform: translateX(-150%) skewX(-25deg); }
    30% { transform: translateX(450%) skewX(-25deg); }
    100% { transform: translateX(450%) skewX(-25deg); }
}

/* Trust & Security Guarantee Box */
.trust-guarantee-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 6px 2px;
}

@media (max-width: 680px) {
    .trust-guarantee-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tgb-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #8da4c4;
    font-weight: 500;
}

.tgb-icon {
    font-size: 13px;
}

/* Invoice Modal Enhancements */
.inv-timer-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #a0aec0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 10px;
    border-radius: 6px;
    margin-top: 6px;
}

.inv-timer-pill strong {
    color: #00ff88;
    font-family: var(--font-mono);
}

.inv-copy-btn {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.inv-copy-btn:hover {
    background: rgba(255, 204, 0, 0.25);
    color: #fff;
}

/* Shop in Cabinet */
.shop-pane-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.target-char-select-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.target-char-select-wrap label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.shop-select {
    background: #070b12;
    border: 1px solid rgba(255, 204, 0, 0.3);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    outline: none;
}

.cabinet-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.cab-shop-item {
    background: rgba(15, 22, 34, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--tr-smooth);
}

.cab-shop-item:hover {
    border-color: rgba(255, 204, 0, 0.35);
    background: rgba(20, 28, 44, 0.8);
}

.csi-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.csi-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(255, 204, 0, 0.4);
    object-fit: cover;
}

.csi-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.csi-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #ff8000;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.csi-sub {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

.csi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.csi-price {
    font-size: 15px;
    font-weight: 800;
    color: #ffcc00;
}

.btn-buy-cab-item {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 160, 0, 0.1));
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffcc00;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr-fast);
}

.btn-buy-cab-item:hover {
    background: #ffcc00;
    color: #000;
}

/* Invoices Table */
.invoices-table-wrap {
    background: rgba(10, 14, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.invoices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.invoices-table th {
    background: rgba(5, 8, 14, 0.8);
    padding: 12px 16px;
    text-align: left;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.invoices-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.status-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 8px;
}

.status-pill.completed {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.status-pill.pending {
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.3);
}

/* Password / Security Form - Obsidian Center Card */
.cab-pwd-form {
    max-width: 540px;
    background: radial-gradient(circle at 50% 0%, rgba(20, 30, 48, 0.7), rgba(9, 14, 25, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cab-pwd-form .field-wrap {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cab-pwd-form .field-wrap label {
    font-size: 12.5px;
    font-weight: 700;
    color: #cbd5e1;
}

.cab-pwd-form .field-wrap input {
    width: 100%;
    background: rgba(5, 8, 14, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 11px 16px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.cab-pwd-form .field-wrap input:focus {
    border-color: #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.2);
}

.cab-pwd-form .btn-submit {
    margin-top: 8px;
    padding: 13px 24px;
    background: linear-gradient(135deg, #ffcc00 0%, #ff9500 100%);
    border: none;
    border-radius: 10px;
    color: #0b0f19;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(255, 204, 0, 0.3);
    transition: all 0.2s ease;
}

.cab-pwd-form .btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(255, 204, 0, 0.45);
}

/* Auth Modal Card */
.auth-modal-card {
    background: #0a0f1c;
    border: 1px solid rgba(255, 204, 0, 0.3);
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    padding: 32px 30px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.1);
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-close {
    position: absolute;
    top: 18px;
    right: 18px;
}

.auth-modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-logo-emblem {
    font-size: 32px;
    margin-bottom: 8px;
}

.auth-modal-header h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

.auth-modal-header p {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Quick 1-Click Admin & Demo Entrance */
.auth-quick-actions {
    margin-bottom: 20px;
}

.btn-quick-admin-login {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.15) 0%, rgba(255, 140, 0, 0.12) 100%);
    border: 1px solid rgba(255, 204, 0, 0.45);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(255, 204, 0, 0.1);
}

.btn-quick-admin-login:hover {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.25) 0%, rgba(255, 140, 0, 0.2) 100%);
    border-color: rgba(255, 215, 0, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 204, 0, 0.25);
}

.btn-glow-crown {
    font-size: 24px;
    filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.6));
    flex-shrink: 0;
}

.btn-quick-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.btn-quick-text strong {
    color: #ffcc00;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.btn-quick-text small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

.quick-login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 18px 0 14px 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quick-login-divider::before,
.quick-login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-login-divider span {
    padding: 0 10px;
}

.auth-credentials-hint {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 204, 0, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 10px 0 14px 0;
    cursor: pointer;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    transition: background 0.2s ease;
}

.auth-credentials-hint:hover {
    background: rgba(255, 204, 0, 0.08);
}

.auth-credentials-hint code {
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

.auth-switch-row {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.auth-switch-row a {
    color: var(--gold-primary);
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
}

.auth-switch-row a:hover {
    text-decoration: underline;
}


/* Invoice Modal */
.invoice-modal-card {
    background: #090e18;
    border: 1px solid rgba(255, 204, 0, 0.35);
    border-radius: 18px;
    width: 100%;
    max-width: 480px;
    padding: 30px;
    position: relative;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85);
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.invoice-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.inv-security-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 800;
    color: #00ffaa;
    letter-spacing: 0.5px;
    background: rgba(0, 255, 170, 0.1);
    border: 1px solid rgba(0, 255, 170, 0.25);
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.sec-dot {
    color: #00ffaa;
    font-size: 10px;
}

.inv-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--gold-primary);
    text-transform: uppercase;
}

.invoice-header h3 {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-mono);
}

.inv-date {
    font-size: 11.5px;
    color: var(--text-muted);
}

.inv-amount-highlight {
    background: rgba(255, 204, 0, 0.1);
    border: 1px solid rgba(255, 204, 0, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.iah-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-primary);
}

.iah-val {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    font-family: var(--font-mono);
}

.inv-details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 13.5px;
}

.idl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
}

.idl-row strong {
    color: #fff;
}

.green-text {
    color: #00ff88 !important;
}

.inv-qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(5, 8, 14, 0.6);
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
}

.qr-frame {
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

.qr-frame img {
    width: 180px;
    height: 180px;
    display: block;
}

.qr-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
}

.qr-supported-banks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 700;
    color: #9cb5d6;
}

.qr-supported-banks span {
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.invoice-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-confirm-payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00ff88, #00cc66);
    border: none;
    color: #000;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.4);
    transition: var(--tr-smooth);
}

.btn-confirm-payment:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.6);
}

/* ==============================================================================
   CABINET PURCHASE CONFIRMATION & DELIVERY RECEIPT MODALS
   ============================================================================== */
.cab-confirm-card,
.cab-receipt-card {
    background: #0a0f1d;
    border: 1px solid rgba(255, 204, 0, 0.4);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    padding: 28px;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 204, 0, 0.12);
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: #e2e8f0;
}

.cab-receipt-card {
    max-width: 560px;
    border-color: rgba(0, 255, 170, 0.45);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 45px rgba(0, 255, 170, 0.15);
}

.cab-confirm-header,
.cab-receipt-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
    margin-bottom: 18px;
}

.cab-confirm-header h3,
.cab-receipt-header h3 {
    font-size: 21px;
    font-weight: 900;
    color: #fff;
    margin: 4px 0 2px 0;
    font-family: var(--font-mono);
}

/* Item Preview Card */
.cab-item-preview-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.cip-icon-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.cip-icon-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid #a335ee;
    box-shadow: 0 0 15px rgba(163, 53, 238, 0.4);
    object-fit: cover;
    background: #000;
}

.cip-ilvl-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #0f172a;
    border: 1px solid #ffd700;
    color: #ffd700;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

.cip-info {
    flex: 1;
    min-width: 0;
}

.cip-info h4 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cip-info p {
    font-size: 12.5px;
    color: #94a3b8;
    margin: 0 0 6px 0;
}

.cip-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cip-tag-badge {
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 204, 0, 0.1);
    color: #ffd700;
    border: 1px solid rgba(255, 204, 0, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Recipient Box */
.cab-confirm-recipient-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.ccr-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 8px;
}

.ccr-tip {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.cab-select {
    width: 100%;
    padding: 10px 14px;
    background: #060a12;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: var(--tr-smooth);
}

.cab-select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.ccr-char-meta {
    margin-top: 8px;
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Summary list */
.cab-confirm-summary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 13.5px;
}

.ccsl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #94a3b8;
}

.ccsl-row.highlight-row {
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-weight: 700;
    color: #fff;
}

/* Delivery notice */
.cab-confirm-delivery-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.cdn-icon {
    font-size: 24px;
    line-height: 1;
}

.cdn-text strong {
    display: block;
    font-size: 13px;
    color: #38bdf8;
    margin-bottom: 3px;
}

.cdn-text p {
    font-size: 11.5px;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.45;
}

/* Confirm Action Buttons */
.cab-confirm-actions {
    display: flex;
    gap: 12px;
}

.btn-cab-confirm-buy {
    flex: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 204, 0, 0.35);
    transition: var(--tr-smooth);
}

.btn-cab-confirm-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(255, 204, 0, 0.55);
}

.btn-cab-confirm-buy:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-cab-confirm-cancel {
    flex: 1;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr-smooth);
}

.btn-cab-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Delivery Receipt Card Elements */
.cab-receipt-status-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(0, 255, 170, 0.1);
    border: 1px solid rgba(0, 255, 170, 0.35);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.crsb-icon {
    font-size: 28px;
}

.crsb-content strong {
    display: block;
    font-size: 15px;
    color: #00ffaa;
    margin-bottom: 2px;
}

.crsb-content p {
    font-size: 12px;
    color: #cbd5e1;
    margin: 0;
}

.cab-receipt-item-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.cris-icon-wrap img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid #a335ee;
    object-fit: cover;
}

.cris-info h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 800;
}

.cris-meta {
    font-size: 12.5px;
    color: #94a3b8;
    display: flex;
    gap: 8px;
    align-items: center;
}

.cab-receipt-instructions-wrap {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.cri-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cri-steps {
    list-style: none;
    counter-reset: receipt-step;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cri-steps li {
    counter-increment: receipt-step;
    position: relative;
    padding-left: 32px;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.45;
}

.cri-steps li::before {
    content: counter(receipt-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffd700;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
}

.cab-receipt-faq-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.45;
}

.crf-icon {
    font-size: 18px;
}

.crf-text strong {
    color: #ffd700;
    margin-right: 4px;
}

.crf-text code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    color: #38bdf8;
    font-family: var(--font-mono);
}

.cab-receipt-actions {
    display: flex;
    gap: 12px;
}

.btn-cab-receipt-done {
    flex: 2;
    padding: 13px 18px;
    background: linear-gradient(135deg, #00ffaa, #00bb77);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 255, 170, 0.3);
    transition: var(--tr-smooth);
}

.btn-cab-receipt-done:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 26px rgba(0, 255, 170, 0.5);
}

.btn-cab-receipt-history {
    flex: 1;
    padding: 13px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr-smooth);
}

.btn-cab-receipt-history:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ==============================================================================
   RESPONSIVE
   ============================================================================== */
@media (max-width: 1200px) {
    .nav-inner {
        padding: 0 16px;
        gap: 10px;
    }
    .nav-links {
        gap: 4px;
    }
    .nav-item {
        padding: 6px 9px;
        font-size: 13px;
    }
    .nav-right {
        gap: 8px;
    }
    .pill-version {
        display: none;
    }
}

@media (max-width: 1050px) {
    .logo-tag {
        display: none;
    }
    .btn-nav-cabinet {
        padding: 0 8px;
    }
    .btn-nav-cabinet #nav-cabinet-label,
    .btn-nav-cabinet .nav-cab-arrow {
        display: none;
    }
    .btn-nav-action {
        padding: 7px 13px;
        font-size: 12.5px;
    }
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }
    .register-layout {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }
    .event-content-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .event-timer-block {
        width: 100%;
    }
    .updates-grid {
        grid-template-columns: 1fr;
    }
    .cabinet-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .cabinet-balance-box {
        width: 100%;
        justify-content: space-between;
    }
}

/* ==============================================================================
   SCROLL TO TOP BUTTON
   ============================================================================== */
.btn-scroll-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(13, 19, 32, 0.9);
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffcc00;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 204, 0, 0.2);
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 998;
}

.btn-scroll-top:hover {
    background: #ffcc00;
    color: #0b0f19;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 204, 0, 0.4);
}

.btn-scroll-top.hidden {
    display: none !important;
}

/* ==============================================================================
   MOBILE NAVIGATION DRAWER & TOGGLE
   ============================================================================== */
.btn-mobile-toggle {
    display: none;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    transition: all 0.2s ease;
}

.btn-mobile-toggle .m-line {
    width: 18px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.25s ease;
}

.btn-mobile-toggle.active .m-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    background: #ffcc00;
}

.btn-mobile-toggle.active .m-line:nth-child(2) {
    opacity: 0;
}

.btn-mobile-toggle.active .m-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    background: #ffcc00;
}

.mobile-nav-drawer {
    display: none !important;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-nav-item {
    padding: 11px 14px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-nav-item:hover,
.mobile-nav-item:active {
    background: rgba(255, 204, 0, 0.12);
    border-color: rgba(255, 204, 0, 0.4);
    color: #ffcc00;
}

@media (max-width: 900px) {
    .btn-mobile-toggle {
        display: flex;
    }
    .mobile-nav-drawer {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(8, 12, 20, 0.98);
        border-bottom: 1px solid rgba(255, 204, 0, 0.25);
        backdrop-filter: blur(20px);
        padding: 16px 20px 24px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
        animation: drawerSlide 0.25s ease-out;
    }
    .mobile-nav-drawer.hidden {
        display: none !important;
    }
}

/* ==============================================================================
   AAA PREMIUM PERSONAL CABINET ENHANCEMENTS
   ============================================================================== */

/* VIP Badge & Progression */
.vip-badge-premium {
    font-size: 11px;
    font-weight: 900;
    padding: 3px 9px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.25), rgba(255, 128, 0, 0.3));
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.6);
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vip-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.vip-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 10px;
    border-radius: 12px;
}

.vip-progress-bar {
    width: 65px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.vip-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffcc00, #ff8000);
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
    transition: width 0.4s ease;
}

.vip-progress-text {
    font-size: 11px;
    color: #ffd24d;
    font-weight: 600;
}

/* Quick Promo Header Button */
.btn-quick-promo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(176, 64, 255, 0.15);
    border: 1px solid rgba(176, 64, 255, 0.4);
    color: #d896ff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-quick-promo:hover {
    background: rgba(176, 64, 255, 0.3);
    border-color: #b040ff;
    color: #fff;
    box-shadow: 0 0 15px rgba(176, 64, 255, 0.4);
    transform: translateY(-1px);
}

/* Tab Badges & Highlights */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    margin-left: 2px;
    vertical-align: middle;
}

.tab-badge.hot {
    background: rgba(255, 51, 102, 0.2);
    color: #ff4d79;
    border: 1px solid rgba(255, 51, 102, 0.45);
    text-shadow: 0 0 8px rgba(255, 51, 102, 0.4);
}

.tab-highlight-tag.spin-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #00ff88, #00cc66);
    color: #031409;
    padding: 3px 8px;
    border-radius: 12px;
    animation: spinPulse 2s infinite ease-in-out;
}

@keyframes spinPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0, 255, 136, 0.4); }
    50% { box-shadow: 0 0 14px rgba(0, 255, 136, 0.85); }
}

/* Pane Header With Actions */
.pane-header-with-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-refresh-chars {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refresh-chars:hover {
    background: rgba(255, 204, 0, 0.15);
    border-color: rgba(255, 204, 0, 0.4);
    color: #ffcc00;
}

/* Character RPG Progress Badges */
.char-rpg-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 12px;
    border-radius: 10px;
}

.rpg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
}

.rpg-pill strong {
    color: #fff;
    font-weight: 800;
}

.rpg-pill.tower strong {
    color: #c084fc;
}

.rpg-pill.bp strong {
    color: #38bdf8;
}

.rpg-pill.streak strong {
    color: #4ade80;
}

/* Character Fast Teleport Box */
.char-teleport-box {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.char-teleport-select {
    flex-grow: 1;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
}

.char-teleport-select:focus {
    border-color: #00e5ff;
}

.btn-teleport-submit {
    padding: 7px 14px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(0, 150, 255, 0.3));
    border: 1px solid rgba(0, 229, 255, 0.5);
    color: #38bdf8;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-teleport-submit:hover {
    background: #00e5ff;
    color: #000;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
}

/* Pulse Online Indicator */
.pulse-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff66;
    margin-right: 6px;
    box-shadow: 0 0 8px #00ff66;
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* ==============================================================================
   TAB 2: WHEEL OF FORTUNE & DAILY STREAK
   ============================================================================== */
.wheel-pane-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.wheel-streak-status-box {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 204, 0, 0.25);
    padding: 10px 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.streak-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #ffcc00;
    letter-spacing: 0.8px;
}

.streak-days-row {
    display: flex;
    gap: 6px;
}

.streak-day-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    transition: all 0.2s ease;
}

.streak-day-dot.active {
    background: linear-gradient(135deg, #00ff88, #00aa55);
    border-color: #00ff88;
    color: #000;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.streak-day-dot.mega {
    border-radius: 8px;
    width: 38px;
    color: #ffd700;
    border-color: #ffd700;
}

.streak-day-dot.mega.active {
    background: linear-gradient(135deg, #ffd700, #ff8800);
    color: #000;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.7);
}

.wheel-interactive-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 15px;
}

@media (max-width: 960px) {
    .wheel-interactive-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

.wheel-stage-wrapper {
    position: relative;
    width: 380px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    color: #ff3366;
    z-index: 20;
    text-shadow: 0 0 14px rgba(255, 51, 102, 0.8);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

.wheel-canvas-container {
    position: relative;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.2);
    border: 4px solid rgba(255, 204, 0, 0.4);
    background: #0b101c;
}

#wheel-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    transition: transform 4s cubic-bezier(0.15, 0.95, 0.2, 1);
}

.wheel-center-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffcc00 20%, #ff8000 80%);
    border: 3px solid #fff;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-weight: 900;
    font-size: 13px;
    color: #000;
    letter-spacing: 1px;
    transition: transform 0.2s ease;
}

.wheel-center-orb:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.wheel-info-card {
    background: rgba(14, 20, 32, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wheel-char-picker label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 6px;
}

.wheel-status-banner {
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.25);
    padding: 14px 18px;
    border-radius: 12px;
}

.spin-ready-badge {
    font-weight: 800;
    color: #00ff88;
    font-size: 14px;
    margin-bottom: 4px;
}

.wheel-status-banner p {
    font-size: 12.5px;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.5;
}

.btn-spin-wheel-huge {
    padding: 16px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffcc00, #ff8000);
    border: none;
    color: #000;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 24px rgba(255, 170, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-spin-wheel-huge:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 170, 0, 0.55);
}

.btn-spin-wheel-huge:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #334155;
    color: #94a3b8;
    box-shadow: none;
}

.wheel-prizes-preview h4 {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
}

.prizes-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.prize-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    color: #cbd5e1;
    text-align: center;
}

.prize-pill.jackpot {
    background: rgba(255, 51, 102, 0.15);
    border-color: rgba(255, 51, 102, 0.4);
    color: #ff4d79;
    font-weight: 800;
}

/* ==============================================================================
   TAB 3: SHOP FILTER & SEARCH BAR
   ============================================================================== */
.shop-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: rgba(14, 20, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 16px;
    border-radius: 14px;
}

.shop-categories-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.shop-cat-btn {
    padding: 7px 13px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shop-cat-btn:hover {
    color: #fff;
    border-color: rgba(255, 204, 0, 0.3);
}

.shop-cat-btn.active {
    background: rgba(255, 204, 0, 0.15);
    border-color: #ffcc00;
    color: #ffcc00;
    font-weight: 800;
}

.shop-search-box {
    position: relative;
    min-width: 220px;
}

.shop-search-box input {
    width: 100%;
    background: rgba(9, 14, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 32px 7px 12px;
    color: #fff;
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.2s ease;
}

.shop-search-box input:focus {
    border-color: #ffcc00;
}

.shop-filter-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.shop-sort-select {
    background: rgba(9, 14, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 7px 12px;
    color: #cbd5e1;
    font-size: 12.5px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.shop-sort-select:focus {
    border-color: #ffcc00;
}

.shop-vip-discount-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 136, 0.25);
}

.item-stack-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: rgba(0, 0, 0, 0.85);
    color: #ffd700;
    font-size: 11px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* ==============================================================================
   TAB 5: PROMO CODES & GIFTS
   ============================================================================== */
.promo-activation-box {
    background: linear-gradient(135deg, rgba(20, 26, 42, 0.9), rgba(12, 17, 30, 0.95));
    border: 1px solid rgba(176, 64, 255, 0.35);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.promo-input-row {
    display: flex;
    gap: 12px;
    max-width: 580px;
}

.promo-input-wrap {
    position: relative;
    flex-grow: 1;
}

.promo-input-wrap input {
    width: 100%;
    background: rgba(9, 14, 25, 0.9);
    border: 1px solid rgba(176, 64, 255, 0.4);
    border-radius: 10px;
    padding: 12px 42px 12px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none;
    transition: all 0.2s ease;
}

.promo-input-wrap input:focus {
    border-color: #d896ff;
    box-shadow: 0 0 15px rgba(176, 64, 255, 0.4);
}

.promo-icon-tag {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    pointer-events: none;
}

.btn-activate-promo {
    padding: 12px 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, #b040ff, #8000ff);
    border: none;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-activate-promo:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(176, 64, 255, 0.5);
}

.active-promo-showcase h4 {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    margin: 0 0 14px 0;
}

.promo-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.promo-hint-card {
    background: rgba(14, 20, 32, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.promo-hint-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 204, 0, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.promo-badge-tag {
    font-size: 10px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 6px;
    align-self: flex-start;
    text-transform: uppercase;
}

.promo-badge-tag.gold { background: rgba(255, 204, 0, 0.2); color: #ffcc00; }
.promo-badge-tag.vip { background: rgba(0, 229, 255, 0.2); color: #00e5ff; }
.promo-badge-tag.discord { background: rgba(148, 130, 201, 0.25); color: #bca6f2; }

.promo-code-text {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 8px;
    border-radius: 6px;
    font-family: var(--font-mono);
    display: inline-block;
}

.promo-hint-card p {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

.click-to-use {
    font-size: 11px;
    color: #38bdf8;
    font-weight: 700;
    margin-top: 4px;
}

/* ==============================================================================
   FLOATING TOAST NOTIFICATION SYSTEM
   ============================================================================== */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-card {
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 420px;
    animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-card.success {
    border-color: rgba(0, 255, 136, 0.5);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 255, 136, 0.2);
}

.toast-card.error {
    border-color: rgba(255, 51, 102, 0.5);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 51, 102, 0.2);
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast-content {
    flex-grow: 1;
}

.toast-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
}

.toast-msg {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.4;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ==============================================================================
   PREMIUM CABINET SHOP CARDS & STATS HIGHLIGHTS
   ============================================================================== */
.cabinet-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.cab-shop-item {
    background: radial-gradient(circle at top left, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.cab-shop-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 204, 0, 0.15);
}

.cab-shop-item.legendary {
    border-color: rgba(255, 128, 0, 0.35);
}
.cab-shop-item.legendary:hover {
    border-color: #ff8000;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 128, 0, 0.3);
}

.cab-shop-item.epic {
    border-color: rgba(163, 53, 238, 0.35);
}
.cab-shop-item.epic:hover {
    border-color: #a335ee;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(163, 53, 238, 0.3);
}

.csi-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.csi-icon-wrap {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.csi-icon-wrap.legendary {
    border-color: #ff8000;
    box-shadow: 0 0 12px rgba(255, 128, 0, 0.4);
}

.csi-icon-wrap.epic {
    border-color: #a335ee;
    box-shadow: 0 0 12px rgba(163, 53, 238, 0.4);
}

.csi-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csi-ilvl-tag {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    color: #ffcc00;
    font-size: 9px;
    font-weight: 900;
    text-align: center;
    line-height: 12px;
    font-family: var(--font-mono, monospace);
}

.csi-meta {
    flex: 1;
    min-width: 0;
}

.csi-name {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 4px 0;
    line-height: 1.25;
}

.csi-name.q-legendary {
    color: #ff8000;
    text-shadow: 0 0 8px rgba(255, 128, 0, 0.3);
}

.csi-name.q-epic {
    color: #a335ee;
    text-shadow: 0 0 8px rgba(163, 53, 238, 0.3);
}

.csi-sub {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stats Badges inside Shop Card */
.csi-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.c-stat-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    white-space: nowrap;
    line-height: 1.3;
}

.c-stat-pill.vip-boost {
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffcc00;
    font-weight: 800;
}

.c-stat-pill.dmg {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-weight: 700;
}

.c-stat-pill.stat {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
}

.c-stat-pill.equip {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-stat-pill.sub {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
}

/* Footer with Price and Buy Button */
.csi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.csi-price-box {
    display: flex;
    flex-direction: column;
}

.csi-price-val {
    font-size: 16px;
    font-weight: 900;
    color: #ffcc00;
    font-family: var(--font-mono, monospace);
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
}

.csi-hint-tt {
    font-size: 10px;
    color: #64748b;
    margin-top: 1px;
}

.btn-buy-cab-item {
    background: linear-gradient(135deg, #d4a017 0%, #ffcc00 100%);
    color: #120e02;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 204, 0, 0.25);
    transition: all 0.2s ease;
}

.btn-buy-cab-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.45);
    filter: brightness(1.1);
}

.btn-buy-cab-item:active {
    transform: translateY(0);
}

/* ==========================================================================
   CABINET SHOP: STATS BAR, ROLE PILLS & SCREENSHOT-PERFECT CARDS
   ========================================================================== */
.cab-shop-stats-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    background: rgba(10, 16, 26, 0.88);
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1100px) {
    .cab-shop-stats-bar {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .cab-shop-stats-bar {
        grid-template-columns: 1fr;
    }
}

.shop-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.shop-stat-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 6px rgba(255, 204, 0, 0.3));
}

.shop-stat-info {
    display: flex;
    flex-direction: column;
}

.shop-stat-label {
    font-size: 11px;
    color: #88a0c0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.shop-stat-val {
    font-size: 14px;
    font-weight: 800;
    color: #ffcc00;
    font-family: var(--font-mono, monospace);
}

.shop-stat-val.highlight {
    color: #00ff88;
}

.shop-stat-val.success {
    color: #38bdf8;
    font-size: 12px;
}

.shop-char-picker-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 204, 0, 0.06);
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 8px;
    grid-column: span 1;
}

.shop-char-label {
    font-size: 11px;
    font-weight: 700;
    color: #ffcc00;
    white-space: nowrap;
}

.shop-char-picker-card .shop-select {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 600;
    background: #0f172a;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

/* Quick Role / Stat Filter Pills */
.shop-role-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding: 4px 0;
}

.role-pill {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-pill:hover {
    background: rgba(30, 41, 59, 0.9);
    color: #f1f5f9;
    border-color: rgba(255, 204, 0, 0.3);
}

.role-pill.active {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.25) 0%, rgba(255, 204, 0, 0.15) 100%);
    border-color: #ffcc00;
    color: #ffcc00;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
}

/* Authentic WoW Class Filters */
.shop-class-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: rgba(10, 15, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.class-filter-label {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.class-pill {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    padding: 4px 11px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.class-pill:hover {
    transform: translateY(-1px);
    background: rgba(30, 41, 59, 0.9);
}

.class-pill.active {
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}

/* Individual Class Glows */
.class-pill.pill-warrior.active { background: rgba(199, 156, 110, 0.3) !important; border-color: #C79C6E !important; color: #f1dfcf !important; box-shadow: 0 0 12px rgba(199, 156, 110, 0.4) !important; }
.class-pill.pill-paladin.active { background: rgba(245, 140, 186, 0.3) !important; border-color: #F58CBA !important; color: #ffe0ef !important; box-shadow: 0 0 12px rgba(245, 140, 186, 0.4) !important; }
.class-pill.pill-dk.active      { background: rgba(196, 31, 59, 0.3) !important; border-color: #C41F3B !important; color: #ffb8c5 !important; box-shadow: 0 0 12px rgba(196, 31, 59, 0.4) !important; }
.class-pill.pill-hunter.active  { background: rgba(171, 212, 115, 0.3) !important; border-color: #ABD473 !important; color: #e6f7cf !important; box-shadow: 0 0 12px rgba(171, 212, 115, 0.4) !important; }
.class-pill.pill-rogue.active   { background: rgba(255, 245, 105, 0.3) !important; border-color: #FFF569 !important; color: #fffde0 !important; box-shadow: 0 0 12px rgba(255, 245, 105, 0.4) !important; }
.class-pill.pill-druid.active   { background: rgba(255, 125, 10, 0.3) !important; border-color: #FF7D0A !important; color: #ffe2cf !important; box-shadow: 0 0 12px rgba(255, 125, 10, 0.4) !important; }
.class-pill.pill-shaman.active  { background: rgba(0, 112, 222, 0.3) !important; border-color: #0070DE !important; color: #cfe6ff !important; box-shadow: 0 0 12px rgba(0, 112, 222, 0.4) !important; }
.class-pill.pill-mage.active    { background: rgba(105, 204, 240, 0.3) !important; border-color: #69CCF0 !important; color: #e0f6ff !important; box-shadow: 0 0 12px rgba(105, 204, 240, 0.4) !important; }
.class-pill.pill-warlock.active { background: rgba(148, 130, 201, 0.3) !important; border-color: #9482C9 !important; color: #eee8ff !important; box-shadow: 0 0 12px rgba(148, 130, 201, 0.4) !important; }
.class-pill.pill-priest.active  { background: rgba(255, 255, 255, 0.25) !important; border-color: #FFFFFF !important; color: #ffffff !important; box-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important; }

/* Item Class Badges on Cards */
.badge-class {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.badge-class.warrior { color: #C79C6E; border-color: rgba(199, 156, 110, 0.4); background: rgba(199, 156, 110, 0.12); }
.badge-class.paladin { color: #F58CBA; border-color: rgba(245, 140, 186, 0.4); background: rgba(245, 140, 186, 0.12); }
.badge-class.dk      { color: #C41F3B; border-color: rgba(196, 31, 59, 0.4); background: rgba(196, 31, 59, 0.12); }
.badge-class.hunter  { color: #ABD473; border-color: rgba(171, 212, 115, 0.4); background: rgba(171, 212, 115, 0.12); }
.badge-class.rogue   { color: #FFF569; border-color: rgba(255, 245, 105, 0.4); background: rgba(255, 245, 105, 0.12); }
.badge-class.druid   { color: #FF7D0A; border-color: rgba(255, 125, 10, 0.4); background: rgba(255, 125, 10, 0.12); }
.badge-class.shaman  { color: #0070DE; border-color: rgba(0, 112, 222, 0.4); background: rgba(0, 112, 222, 0.12); }
.badge-class.mage    { color: #69CCF0; border-color: rgba(105, 204, 240, 0.4); background: rgba(105, 204, 240, 0.12); }
.badge-class.warlock { color: #9482C9; border-color: rgba(148, 130, 201, 0.4); background: rgba(148, 130, 201, 0.12); }
.badge-class.priest  { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); }
.badge-class.universal { color: #FFD700; border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.12); }
.badge-class.multi   { color: #38bdf8; border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.12); }

/* Cabinet Cards Grid (Matching the Screenshot) */
.cab-shop-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.cab-shop-grid-cards .donate-card {
    background: #090e18;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.cab-shop-grid-cards .donate-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

.cab-shop-grid-cards .donate-card.legendary {
    border-color: #ff8000;
    box-shadow: 0 0 14px rgba(255, 128, 0, 0.22);
}
.cab-shop-grid-cards .donate-card.legendary:hover {
    border-color: #ffa500;
    box-shadow: 0 10px 30px rgba(255, 128, 0, 0.38);
}

.cab-shop-grid-cards .donate-card.epic {
    border-color: #a335ee;
    box-shadow: 0 0 14px rgba(163, 53, 238, 0.22);
}
.cab-shop-grid-cards .donate-card.epic:hover {
    border-color: #b258ff;
    box-shadow: 0 10px 30px rgba(163, 53, 238, 0.38);
}

.cab-shop-grid-cards .item-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #000;
}

.cab-shop-grid-cards .item-icon-box.legendary {
    border: 2px solid #ff8000;
    box-shadow: 0 0 10px rgba(255, 128, 0, 0.4);
}

.cab-shop-grid-cards .item-icon-box.epic {
    border: 2px solid #a335ee;
    box-shadow: 0 0 10px rgba(163, 53, 238, 0.4);
}

.cab-shop-grid-cards .item-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 3px;
}

.cab-shop-grid-cards .item-title.legendary {
    color: #ff8000;
    text-shadow: 0 0 8px rgba(255, 128, 0, 0.3);
}

.cab-shop-grid-cards .item-title.epic {
    color: #b258ff;
    text-shadow: 0 0 8px rgba(178, 88, 255, 0.3);
}

.cab-shop-grid-cards .item-sub {
    font-size: 11.5px;
    color: #9aaec8;
    line-height: 1.3;
    margin-bottom: 6px;
}

.cab-shop-grid-cards .badge-ilvl {
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffd100;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    display: inline-block;
}

.badge-set-bundle,
.cab-shop-grid-cards .badge-set-bundle {
    background: linear-gradient(135deg, #ffd700, #ff8800) !important;
    color: #050811 !important;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    white-space: nowrap !important;
    line-height: 1.2;
    flex-shrink: 0;
}

.cab-shop-grid-cards .badge-t10 {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 198, 255, 0.45);
    display: inline-block;
}

.cab-shop-grid-cards .card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cab-shop-grid-cards .item-price {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffd100;
    font-weight: 800;
    font-size: 14px;
}

.cab-shop-grid-cards .btn-buy-cab-item {
    background: linear-gradient(135deg, #d4a017 0%, #ffcc00 100%);
    color: #120e02;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(255, 204, 0, 0.25);
    transition: all 0.2s ease;
}

.cab-shop-grid-cards .btn-buy-cab-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.45);
    filter: brightness(1.1);
}

/* Shop Section Dividers across Sets / Gods / Weapons */
.shop-section-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    margin: 16px 0 6px 0;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}
.shop-section-divider .divider-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.shop-section-divider .divider-icon {
    font-size: 24px;
    line-height: 1;
}
.shop-section-divider .divider-title {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}
.shop-section-divider .divider-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}
.shop-section-divider .divider-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.shop-section-divider.gods-divider {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.18), rgba(168, 85, 247, 0.18), rgba(15, 23, 42, 0.95));
    border-color: rgba(250, 204, 21, 0.5);
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.2);
}
.shop-section-divider.gods-divider .divider-title {
    color: #facc15;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
}
.shop-section-divider.gods-divider .divider-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}
.shop-section-divider.pve-divider {
    background: linear-gradient(90deg, rgba(0, 198, 255, 0.18), rgba(0, 114, 255, 0.18), rgba(15, 23, 42, 0.95));
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}
.shop-section-divider.pve-divider .divider-title {
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.shop-section-divider.pve-divider .divider-badge {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
}
.shop-section-divider.pvp-divider {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.18), rgba(185, 28, 28, 0.18), rgba(15, 23, 42, 0.95));
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}
.shop-section-divider.pvp-divider .divider-title {
    color: #f87171;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}
.shop-section-divider.pvp-divider .divider-badge {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.shop-section-divider.apex-divider {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.18), rgba(236, 72, 153, 0.18), rgba(15, 23, 42, 0.95));
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}
.shop-section-divider.apex-divider .divider-title {
    color: #c084fc;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}
.shop-section-divider.apex-divider .divider-badge {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* History tab wrap inside cabinet shop */
.cab-shop-history-wrap {
    background: rgba(11, 16, 26, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 14px;
}

.history-table-header h4 {
    color: #fff;
    margin: 0 0 4px 0;
    font-size: 15px;
}

.history-table-header .sub {
    color: #88a0c0;
    font-size: 12px;
    display: block;
    margin-bottom: 14px;
}

/* ==============================================================================
   SEASON 1 & BOSSES PRIORITY NAVIGATION & CTA STYLES
   ============================================================================== */
.nav-season-btn {
    background: rgba(255, 204, 0, 0.12) !important;
    border: 1px solid rgba(255, 204, 0, 0.4) !important;
    color: #ffcc00 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}

.nav-season-btn:hover {
    background: rgba(255, 204, 0, 0.25) !important;
    border-color: #ffcc00 !important;
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.4) !important;
    color: #ffffff !important;
}

.season-star {
    color: #ffcc00;
    text-shadow: 0 0 8px #ffcc00;
    font-size: 13px;
    animation: starPulse 2s infinite ease-in-out;
}

@keyframes starPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.25); opacity: 1; text-shadow: 0 0 14px #ffea70; }
}

.btn-season-bosses {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.18), rgba(255, 120, 0, 0.18));
    border: 1px solid rgba(255, 204, 0, 0.5);
    border-radius: 24px;
    color: #ffcc00;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255, 204, 0, 0.15);
}

.btn-season-bosses:hover {
    background: linear-gradient(135deg, #d4a017, #ffcc00);
    color: #120e02;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 204, 0, 0.45);
}


/* ==============================================================================
   2. REAL-TIME LIVE EVENT TICKER
   ============================================================================== */
.world-event-ticker {
    position: relative;
    z-index: 90;
    margin-top: 62px; /* Clears fixed top-nav so it never overlaps underneath */
    background: linear-gradient(90deg, rgba(8, 12, 20, 0.95), rgba(15, 23, 42, 0.98), rgba(8, 12, 20, 0.95));
    border-bottom: 1px solid rgba(255, 204, 0, 0.25);
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    padding: 7px 0;
}

.ticker-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ticker-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 68, 68, 0.15);
    border: 1px solid rgba(255, 68, 68, 0.4);
    border-radius: 12px;
    padding: 3px 10px;
    flex-shrink: 0;
}

.ticker-pulse {
    width: 7px;
    height: 7px;
    background: #ff4444;
    border-radius: 50%;
    box-shadow: 0 0 8px #ff4444;
    animation: pulseRed 1.4s infinite ease-in-out;
}

@keyframes pulseRed {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.ticker-badge-text {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    color: #ff6666;
    letter-spacing: 0.5px;
}

.ticker-viewport {
    flex-grow: 1;
    overflow: hidden;
    height: 22px;
    position: relative;
}

.ticker-track {
    position: relative;
    height: 100%;
}

.ticker-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #e2e8f0;
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticker-item.active {
    opacity: 1;
    transform: translateY(0);
}

.ticker-stats-peek {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.ticker-stat {
    font-size: 12px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ticker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.ticker-dot.green { background: #00ff66; box-shadow: 0 0 6px #00ff66; }
.ticker-dot.gold { background: #ffcc00; box-shadow: 0 0 6px #ffcc00; }

/* ==============================================================================
   3. INTERACTIVE DALARAN MALL (KRASUS LANDING) TACTICAL RADAR
   ============================================================================== */
.mall-radar-section {
    position: relative;
    padding: 70px 0;
    background: radial-gradient(circle at 50% 30%, rgba(0, 229, 255, 0.08), transparent 70%);
}

.radar-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.radar-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 8px 18px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
}

.radar-filter-btn:hover, .radar-filter-btn.active {
    background: rgba(255, 204, 0, 0.16);
    border-color: #ffcc00;
    color: #ffcc00;
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.25);
    transform: translateY(-2px);
}

.r-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.r-dot.gold { background: #ffcc00; box-shadow: 0 0 8px #ffcc00; }
.r-dot.purple { background: #c084fc; box-shadow: 0 0 8px #c084fc; }
.r-dot.blue { background: #60a5fa; box-shadow: 0 0 8px #60a5fa; }
.r-dot.green { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.r-dot.cyan { background: #22d3ee; box-shadow: 0 0 8px #22d3ee; }

.radar-interactive-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .radar-interactive-layout {
        grid-template-columns: 1fr;
    }
}

.radar-stage-box {
    background: linear-gradient(135deg, rgba(10, 15, 26, 0.95), rgba(6, 9, 16, 0.98));
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 24px;
    padding: 24px;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), inset 0 0 30px rgba(0, 229, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.radar-header-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono, monospace);
    font-size: 11.5px;
    color: #94a3b8;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hud-scanner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00e5ff;
    font-weight: 700;
}

.scanner-sweep {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e5ff;
    animation: scannerBlink 1s infinite alternate;
}

@keyframes scannerBlink {
    0% { opacity: 0.3; } 100% { opacity: 1; box-shadow: 0 0 10px #00e5ff; }
}

.radar-arena-canvas-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 580px;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, rgba(6, 9, 16, 0.95) 75%);
    border: 1px solid rgba(0, 229, 255, 0.2);
    box-shadow: inset 0 0 40px rgba(0, 229, 255, 0.15);
    overflow: hidden;
}

.radar-grid-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.radar-ring {
    fill: none;
    stroke: rgba(0, 229, 255, 0.15);
    stroke-width: 1.2;
}

.radar-ring.outer { stroke-dasharray: 4 4; stroke: rgba(0, 229, 255, 0.3); }
.radar-ring.core { stroke: rgba(255, 204, 0, 0.4); }

.radar-axis {
    stroke: rgba(0, 229, 255, 0.12);
    stroke-dasharray: 3 3;
}

.radar-center-hub {
    fill: #ffcc00;
    filter: drop-shadow(0 0 6px #ffcc00);
}

.radar-hub-label {
    fill: rgba(255, 204, 0, 0.7);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
}

/* NPC Pulsing Markers */
.npc-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.npc-marker:hover, .npc-marker.selected, .npc-marker.active {
    transform: translate(-50%, -50%) scale(1.45);
    z-index: 45;
}

.marker-icon {
    font-size: 13px;
    background: rgba(15, 23, 42, 0.94);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85);
    position: relative;
    z-index: 2;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.npc-marker.selected .marker-icon, .npc-marker.active .marker-icon {
    border-color: #ffcc00;
    box-shadow: 0 0 22px #ffcc00, 0 0 10px rgba(255, 204, 0, 0.9);
    background: rgba(255, 204, 0, 0.25);
    width: 32px;
    height: 32px;
    font-size: 16px;
}

.marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    pointer-events: none;
    animation: markerRingPulse 2s infinite ease-out;
}

.marker-pulse.cyan { border: 2px solid rgba(0, 229, 255, 0.7); }
.marker-pulse.gold { border: 2px solid rgba(255, 204, 0, 0.7); }
.marker-pulse.purple { border: 2px solid rgba(192, 132, 252, 0.7); }
.marker-pulse.blue { border: 2px solid rgba(96, 165, 250, 0.7); }
.marker-pulse.green { border: 2px solid rgba(74, 222, 128, 0.7); }
.marker-pulse.orange { border: 2px solid rgba(251, 146, 60, 0.7); }
.marker-pulse.red { border: 2px solid rgba(248, 113, 113, 0.7); }

/* Epicenter Grand Master - Medivh */
.npc-marker.epicenter-marker {
    z-index: 35 !important;
}

.npc-marker.epicenter-marker .marker-icon {
    width: 44px;
    height: 44px;
    font-size: 24px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.45) 0%, rgba(7, 9, 14, 0.96) 80%);
    border: 2px solid #00f0ff;
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.9), 0 0 50px rgba(168, 85, 247, 0.5);
    animation: epicenterGlow 2.5s infinite alternate ease-in-out;
}

.npc-marker.epicenter-marker .marker-label {
    top: 48px;
    opacity: 0.95;
    transform: translateY(0);
    background: rgba(7, 9, 14, 0.96);
    border: 1px solid #00f0ff;
    color: #38bdf8;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.6);
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

.marker-pulse.epicenter-pulse {
    width: 52px;
    height: 52px;
    border: 2.5px solid rgba(0, 240, 255, 0.9);
    animation: markerRingPulse 1.8s infinite ease-out;
}

@keyframes epicenterGlow {
    0% {
        box-shadow: 0 0 20px rgba(0, 240, 255, 0.7), 0 0 35px rgba(168, 85, 247, 0.35);
        border-color: #00f0ff;
    }
    100% {
        box-shadow: 0 0 38px rgba(0, 240, 255, 1), 0 0 70px rgba(168, 85, 247, 0.7);
        border-color: #c084fc;
    }
}

@keyframes markerRingPulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.marker-label {
    position: absolute;
    top: 36px;
    white-space: nowrap;
    background: rgba(10, 14, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.2s ease;
}

.npc-marker:hover .marker-label, .npc-marker.selected .marker-label {
    opacity: 1;
    transform: translateY(0);
}

.npc-marker.label-top .marker-label {
    top: auto;
    bottom: 38px;
    transform: translateY(-4px);
}

.npc-marker.label-top:hover .marker-label, .npc-marker.label-top.selected .marker-label {
    opacity: 1;
    transform: translateY(0);
}

.radar-footer-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    font-size: 12px;
    color: #94a3b8;
}

.leg-item { display: inline-flex; align-items: center; gap: 6px; }
.leg-dot { width: 8px; height: 8px; border-radius: 50%; }
.leg-dot.cyan { background: #00e5ff; }
.leg-dot.gold { background: #ffcc00; }
.leg-dot.blue { background: #60a5fa; }
.leg-dot.orange { background: #fb923c; }
.leg-dot.green { background: #4ade80; }

/* Radar Sidebar Card */
.radar-npc-card {
    background: linear-gradient(135deg, rgba(16, 24, 39, 0.94), rgba(9, 14, 25, 0.98));
    border: 1px solid rgba(255, 204, 0, 0.35);
    border-radius: 24px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 204, 0, 0.15);
    backdrop-filter: blur(16px);
}

.npc-card-badge {
    align-self: flex-start;
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.4);
    border-radius: 12px;
    padding: 4px 12px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    color: #ffcc00;
    letter-spacing: 0.5px;
}

.npc-profile-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.npc-avatar-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.2), rgba(15, 23, 42, 0.9));
    border: 2px solid #ffcc00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
}

.npc-profile-meta h3 {
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}

.npc-subname {
    font-size: 13.5px;
    color: #ffcc00;
    font-weight: 700;
    display: block;
}

.npc-zone-tag {
    font-size: 12px;
    color: #94a3b8;
    font-family: var(--font-mono, monospace);
    margin-top: 3px;
    display: block;
}

.npc-card-desc {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.6;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.inv-head {
    font-size: 11.5px;
    font-family: var(--font-mono, monospace);
    color: #94a3b8;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.inv-tags-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inv-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.inv-tag:hover {
    background: rgba(255, 204, 0, 0.1);
    border-color: rgba(255, 204, 0, 0.4);
    color: #ffcc00;
}



/* ==============================================================================
   4. INTERACTIVE RUNEFORGE SIMULATOR
   ============================================================================== */
.runeforge-sim-section {
    position: relative;
    padding: 70px 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 120, 0, 0.08), transparent 75%);
}

.runeforge-cabinet-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 992px) {
    .runeforge-cabinet-grid {
        grid-template-columns: 1fr;
    }
}

.forge-item-selector {
    background: linear-gradient(135deg, rgba(16, 24, 39, 0.9), rgba(9, 14, 25, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.selector-title {
    font-family: var(--font-mono, monospace);
    font-size: 11.5px;
    color: #ffcc00;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.forge-item-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.forge-item-btn:hover, .forge-item-btn.active {
    background: rgba(255, 204, 0, 0.12);
    border-color: #ffcc00;
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(255, 204, 0, 0.2);
}

.f-ico-frame {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #ff8000;
}

.f-ico-frame.legendary { border-color: #ff8000; box-shadow: 0 0 10px rgba(255, 128, 0, 0.4); }
.f-ico-frame.mythic { border-color: #ff3344; box-shadow: 0 0 10px rgba(255, 51, 68, 0.4); }
.f-ico-frame.epic { border-color: #a335ee; box-shadow: 0 0 10px rgba(163, 53, 238, 0.4); }

.f-ico-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.f-item-info {
    flex-grow: 1;
}

.f-item-info h4 {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 2px 0;
}

.f-item-info span {
    font-size: 11.5px;
    color: #94a3b8;
}

.f-item-quality {
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
}

.f-item-quality.leg { background: rgba(255, 128, 0, 0.2); color: #ff8000; }
.f-item-quality.myth { background: rgba(255, 51, 68, 0.2); color: #ff4444; }
.f-item-quality.epic { background: rgba(163, 53, 238, 0.2); color: #c084fc; }

/* Lore & Rule Guide Box */
.forge-lore-box {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 204, 0, 0.2);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fl-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #cbd5e1;
}

.fl-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.fl-desc strong {
    color: #ffcc00;
}

/* Central Anvil Stage */
.forge-central-anvil {
    background: linear-gradient(135deg, rgba(16, 24, 39, 0.94), rgba(9, 14, 25, 0.98));
    border: 1px solid rgba(255, 140, 0, 0.35);
    border-radius: 24px;
    padding: 24px 28px;
    position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 140, 0, 0.15);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

/* Player Resources Inventory Bar */
.forge-inventory-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 204, 0, 0.25);
    border-radius: 16px;
    padding: 10px 16px;
    margin-bottom: 20px;
    position: relative;
    z-index: 6;
}

.inv-chip {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip-ico {
    font-size: 20px;
    line-height: 1;
}

.chip-text {
    display: flex;
    flex-direction: column;
}

.chip-text small {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chip-text strong {
    font-family: var(--font-mono, monospace);
    font-size: 13.5px;
    color: #ffcc00;
    font-weight: 800;
}

.btn-refill-res {
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid #ffcc00;
    color: #ffcc00;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-refill-res:hover {
    background: #ffcc00;
    color: #0b0f19;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.6);
}

.forge-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.anvil-pedestal {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0;
    transition: transform 0.1s ease;
}

.anvil-pedestal.forge-shake {
    animation: shakeForge 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shakeForge {
    10%, 90% { transform: translate3d(-3px, -2px, 0) scale(0.98); }
    20%, 80% { transform: translate3d(3px, 2px, 0) scale(1.02); }
    30%, 50%, 70% { transform: translate3d(-5px, -1px, 0); }
    40%, 60% { transform: translate3d(5px, 2px, 0); }
}

.forge-glow-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 120, 0, 0.25) 0%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    transition: all 0.5s ease;
}

.forge-weapon-display {
    position: relative;
    z-index: 3;
    margin-bottom: 20px;
}

.forge-display-icon-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 14px auto;
    border-radius: 20px;
    border: 3px solid #ff8000;
    box-shadow: 0 0 25px rgba(255, 128, 0, 0.6);
    overflow: visible;
}

.forge-display-icon-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 17px;
    display: block;
    object-fit: cover;
}

.forge-rank-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #ffcc00, #ff8000);
    color: #0b0f19;
    font-size: 15px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.8);
    border: 2px solid #ffffff;
}

.forge-item-name {
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.forge-ilvl-tag {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: #ff8000;
    font-weight: 700;
}

/* Stat barometers */
.forge-stats-gain {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    position: relative;
    z-index: 3;
}

.stat-pill {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.stat-pill .s-label { color: #94a3b8; }
.stat-pill .s-val { color: #00ff66; font-weight: 800; font-family: var(--font-mono, monospace); }

.stat-pill.socket-pill .s-val { color: #00e5ff; }

/* Ranks Bar Meter */
.forge-ranks-meter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.rank-node {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 900;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.rank-node.active {
    background: linear-gradient(135deg, #ff8000, #ffcc00);
    border-color: #ffffff;
    color: #0b0f19;
    box-shadow: 0 0 20px rgba(255, 128, 0, 0.8);
    transform: scale(1.15);
}

.rank-line {
    flex-grow: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.rank-line.active {
    background: linear-gradient(90deg, #ff8000, #ffcc00);
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}

/* Actions bar */
.forge-actions-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    position: relative;
    z-index: 3;
}

.btn-forge-hammer {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #e65100, #ff8000);
    border: 1px solid #ffcc00;
    border-radius: 16px;
    padding: 12px 28px;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 128, 0, 0.4), 0 0 15px rgba(255, 204, 0, 0.3);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-forge-hammer:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(255, 128, 0, 0.6), 0 0 25px rgba(255, 204, 0, 0.5);
}

.btn-forge-hammer:active {
    transform: translateY(1px) scale(0.98);
}

.hammer-ico { font-size: 26px; }

.hammer-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.hammer-text b { font-size: 16px; font-weight: 900; }
.hammer-text small { font-size: 11.5px; opacity: 0.9; }

.btn-forge-socket {
    background: rgba(0, 229, 255, 0.15);
    border: 1px solid rgba(0, 229, 255, 0.5);
    border-radius: 16px;
    padding: 14px 20px;
    color: #00e5ff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-forge-socket:hover {
    background: #00e5ff;
    color: #05070a;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.6);
}

.btn-forge-reset {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-forge-reset:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Console Log */
.forge-log-box {
    margin-top: 24px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    font-family: var(--font-mono, monospace);
    font-size: 12.5px;
    color: #cbd5e1;
    text-align: left;
    max-height: 80px;
    overflow-y: auto;
}

.f-log-line.success { color: #00ff66; font-weight: 700; }
.f-log-line.fail, .f-log-line.error { color: #ff4444; font-weight: 700; }
.f-log-line.socket { color: #00e5ff; font-weight: 700; }
.f-log-line.warn { color: #f59e0b; font-weight: 700; }
.f-log-line.info { color: #94a3b8; }

/* Dynamic Result Splash Popup */
.forge-result-splash {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.forge-result-splash.hidden {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.7);
    visibility: hidden;
}

.splash-badge-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 999px;
    background: rgba(10, 15, 25, 0.95);
    border: 2px solid #00ff66;
    box-shadow: 0 10px 30px rgba(0, 255, 102, 0.5), 0 0 20px rgba(0, 0, 0, 0.9);
    animation: popBounce 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.splash-badge-box.fail {
    border-color: #ff4444;
    box-shadow: 0 10px 30px rgba(255, 68, 68, 0.5), 0 0 20px rgba(0, 0, 0, 0.9);
}

.splash-badge-box.socket {
    border-color: #00e5ff;
    box-shadow: 0 10px 30px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.9);
}

.splash-icon {
    font-size: 22px;
}

.splash-text {
    font-family: var(--font-heading, sans-serif);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

@keyframes popBounce {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Authentic WoW 3.3.5a In-game Item Tooltip */
.forge-wow-tooltip {
    margin-top: 20px;
    background: rgba(12, 17, 28, 0.96);
    border: 1px solid #7f551c;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(127, 85, 28, 0.2);
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    z-index: 3;
}

.tt-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 4px 0;
}

.tt-title.leg { color: #ff8000; text-shadow: 0 0 10px rgba(255, 128, 0, 0.4); }
.tt-title.myth { color: #ff3344; text-shadow: 0 0 10px rgba(255, 51, 68, 0.4); }
.tt-title.epic { color: #a335ee; text-shadow: 0 0 10px rgba(163, 53, 238, 0.4); }

.tt-ilvl {
    color: #ffd100;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.tt-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #ffffff;
    margin-bottom: 2px;
}

.tt-dmg-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #ffffff;
    margin-bottom: 4px;
}

.tt-dps {
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 8px;
}

.tt-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
}

.tt-stat-line {
    font-size: 12.5px;
    color: #ffffff;
}

.tt-stat-line.boost {
    color: #00ff66;
    font-weight: 700;
}

.tt-sockets-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tt-socket-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #cbd5e1;
}

.tt-socket-row.prismatic {
    color: #00e5ff;
    font-weight: 700;
}

.tt-equip-effect {
    font-size: 12px;
    color: #00ff66;
    line-height: 1.4;
    margin-bottom: 8px;
}

.tt-req {
    font-size: 11.5px;
    color: #94a3b8;
}



/* ==============================================================================
   LEGENDARY TITAN SHOWCASE: SEASON 2 (AAA BLIZZARD QUALITY)
   ============================================================================== */
.season2-master-showcase,
.expansion-announcement-card {
    position: relative;
    max-width: 1240px;
    margin: 35px auto 25px auto;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid rgba(245, 158, 11, 0.45);
    background: radial-gradient(circle at 15% 50%, rgba(255, 100, 0, 0.18) 0%, transparent 55%),
                radial-gradient(circle at 85% 30%, rgba(212, 160, 23, 0.14) 0%, transparent 50%),
                linear-gradient(135deg, rgba(14, 20, 32, 0.96) 0%, rgba(9, 13, 22, 0.98) 60%, rgba(18, 14, 26, 0.96) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.95),
                inset 0 1px 0 rgba(255, 235, 160, 0.4),
                inset 0 -1px 0 rgba(0, 0, 0, 0.8),
                0 0 35px rgba(245, 158, 11, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.season2-master-showcase:hover,
.expansion-announcement-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 64, 0.8);
    box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.98),
                inset 0 1px 0 rgba(255, 245, 190, 0.6),
                0 0 45px rgba(255, 180, 0, 0.35);
}

.s2-ambient-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% -20%, rgba(255, 180, 50, 0.25) 0%, transparent 65%);
    z-index: 0;
}

.s2-magma-stream {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff4500, #ffaa00, #ff4500, transparent);
    opacity: 0.8;
    z-index: 1;
}

.s2-runic-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image: radial-gradient(#fff 1px, transparent 1px);
    background-size: 24px 24px;
    z-index: 0;
}

.s2-top-light-sweep {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 220, 100, 0.9), transparent);
    z-index: 2;
    animation: s2Sweep 5s infinite;
}

@keyframes s2Sweep {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

.s2-rune-corner {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 6px rgba(255, 204, 0, 0.8));
}
.s2-rune-corner.s2-tl { top: 6px; left: 6px; }
.s2-rune-corner.s2-tr { top: 6px; right: 6px; }
.s2-rune-corner.s2-bl { bottom: 6px; left: 6px; }
.s2-rune-corner.s2-br { bottom: 6px; right: 6px; }

.s2-showcase-inner {
    position: relative;
    z-index: 2;
    padding: 30px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Left Relic Column */
.s2-relic-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.25s ease;
}
.s2-relic-column:hover {
    transform: scale(1.05);
}

.s2-relic-halo {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.45) 0%, rgba(245, 158, 11, 0.15) 50%, transparent 70%);
    filter: blur(14px);
    pointer-events: none;
    animation: s2Halo 3.5s ease-in-out infinite alternate;
}
@keyframes s2Halo {
    0% { transform: scale(0.95); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 1; }
}

.s2-relic-medallion {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 18px;
    background: #0c0f17;
    border: 2px solid #ffd700;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 180, 0, 0.45), inset 0 0 15px rgba(0, 0, 0, 0.95);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s2-relic-border-sheen {
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

.s2-relic-icon {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    filter: contrast(1.15) brightness(1.08);
}

.s2-relic-tier-ribbon {
    position: absolute;
    bottom: -10px;
    background: linear-gradient(135deg, #e53e3e 0%, #dd6b20 50%, #d69e2e 100%);
    color: #ffffff;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1.5px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.9), 0 0 12px rgba(229,62,62,0.6);
    letter-spacing: 0.6px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.s2-relic-tag {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 800;
    color: #ffd700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    margin-top: 6px;
}

/* Center Content */
.s2-main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s2-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffd700;
    text-transform: uppercase;
}
.s2-fire-pulsar {
    font-size: 12px;
    animation: s2Spark 1.5s infinite alternate;
}
@keyframes s2Spark {
    0% { opacity: 0.6; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}

.s2-headline {
    font-family: var(--font-heading, Montserrat, sans-serif);
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.8px;
    margin: 0;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.s2-gold-gradient {
    background: linear-gradient(180deg, #ffffff 0%, #ffea85 30%, #f59e0b 70%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.3));
}

.s2-lore-text {
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}
.s2-lore-text strong {
    color: #ffd700;
    font-weight: 700;
}

/* 3 Feature Tiles */
.s2-feature-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 6px;
}

.s2-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
}
.s2-tile:hover {
    background: rgba(255, 204, 0, 0.08);
    border-color: rgba(255, 204, 0, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 204, 0, 0.18);
}

.s2-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.s2-tile-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
}
.s2-tile-icon-box img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.s2-glow-amber {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}
.s2-glow-cyan {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}
.s2-glow-purple {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.s2-tile-pill {
    font-family: var(--font-mono, monospace);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.s2-pill-amber { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.s2-pill-cyan { background: rgba(6, 182, 212, 0.18); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.4); }
.s2-pill-purple { background: rgba(168, 85, 247, 0.18); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }

.s2-tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.s2-tile-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.3;
    transition: color 0.2s ease;
}
.s2-tile:hover .s2-tile-title { color: #ffcc00; }
.s2-tile-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.s2-tile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
}
.s2-tile-perk { color: #fbbf24; font-weight: 700; }
.s2-tile-arrow { color: #94a3b8; font-weight: 800; transition: transform 0.2s ease, color 0.2s ease; }
.s2-tile:hover .s2-tile-arrow { color: #ffffff; transform: translateX(3px); }

/* Right Action Column */
.s2-action-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 200px;
}

.s2-btn-masterwork {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffe066 0%, #f59e0b 45%, #b45309 85%, #d97706 100%);
    border: 1.5px solid #ffea85;
    color: #1a0f02;
    font-family: var(--font-heading, Montserrat, sans-serif);
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.s2-btn-masterwork:hover {
    background: linear-gradient(180deg, #ffffff 0%, #ffea85 45%, #f59e0b 85%, #ffcc00 100%);
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.75), inset 0 1px 0 #ffffff;
}
.s2-btn-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-25deg);
    animation: s2BtnShimmer 3.5s infinite;
}
@keyframes s2BtnShimmer {
    0% { left: -100%; }
    25%, 100% { left: 160%; }
}
.s2-btn-arrow-icon { transition: transform 0.25s ease; }
.s2-btn-masterwork:hover .s2-btn-arrow-icon { transform: translateX(4px); }

.s2-action-subinfo {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
}
.s2-subinfo-icon { font-size: 18px; color: #ffcc00; }
.s2-subinfo-text { display: flex; flex-direction: column; gap: 1px; }
.s2-subinfo-text strong { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 800; color: #ffd700; letter-spacing: 0.5px; }
.s2-subinfo-text span { font-size: 11px; color: #94a3b8; }

.s2-action-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
}
.s2-chip {
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.s2-chip:hover {
    background: rgba(255, 204, 0, 0.15);
    border-color: rgba(255, 204, 0, 0.4);
    color: #ffcc00;
    transform: translateY(-1px);
}

/* Responsive Breakpoints */
@media (max-width: 1180px) {
    .s2-showcase-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 24px;
    }
    .s2-action-column {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .s2-feature-tiles {
        grid-template-columns: 1fr;
    }
    .s2-showcase-inner {
        padding: 18px 14px;
    }
    .s2-headline {
        font-size: 1.25rem;
    }
}

/* Season 2 Forge Teaser Section */
.season2-forge-teaser-section {
    padding: 20px 0 40px 0;
}
.s2-teaser-card {
    background: radial-gradient(circle at 10% 50%, rgba(255, 120, 0, 0.15) 0%, transparent 60%),
                linear-gradient(135deg, rgba(16, 22, 36, 0.95), rgba(9, 13, 22, 0.98));
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    border-radius: 18px;
    padding: 30px 34px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(245, 158, 11, 0.12);
    position: relative;
    overflow: hidden;
}
.s2-teaser-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.s2-teaser-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffd700;
    text-transform: uppercase;
}
.s2-teaser-title {
    font-family: var(--font-heading, Montserrat, sans-serif);
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}
.s2-teaser-desc {
    font-size: 0.94rem;
    color: #cbd5e1;
    line-height: 1.6;
    max-width: 880px;
    margin: 0;
}
.s2-teaser-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.s2-season1-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #94a3b8;
}
.s2-season1-hint strong {
    color: #38bdf8;
}
.btn-teaser-modal {
    padding: 10px 22px;
    border-radius: 8px;
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffd700;
    font-family: var(--font-heading, Montserrat, sans-serif);
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-teaser-modal:hover {
    background: #ffd700;
    color: #0b0f19;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}


.card-corner.tl {
    top: -1px;
    left: -1px;
    border-width: 3px 0 0 3px;
    border-top-left-radius: 13px;
}

.card-corner.tr {
    top: -1px;
    right: -1px;
    border-width: 3px 3px 0 0;
    border-top-right-radius: 13px;
}

.card-corner.bl {
    bottom: -1px;
    left: -1px;
    border-width: 0 0 3px 3px;
    border-bottom-left-radius: 13px;
}

.card-corner.br {
    bottom: -1px;
    right: -1px;
    border-width: 0 3px 3px 0;
    border-bottom-right-radius: 13px;
}

/* Dynamic Light Beam Sweep across the top border */
.card-light-beam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 204, 0, 0.3) 20%, 
        #ffe066 50%, 
        rgba(255, 140, 0, 0.8) 80%, 
        transparent 100%
    );
    z-index: 2;
    animation: beamSweep 6s ease-in-out infinite;
}

@keyframes beamSweep {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* Left: Titan Artifact Medallion */
.card-crest-wrapper {
    position: relative;
    flex-shrink: 0;
}

.crest-halo {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.35) 0%, rgba(212, 160, 23, 0.1) 50%, transparent 70%);
    filter: blur(10px);
    animation: haloBreathe 4s ease-in-out infinite alternate;
}

@keyframes haloBreathe {
    0% { transform: scale(0.95); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 1; }
}

.crest-medallion {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    background: #000000;
    border: 2px solid #ffd700;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8),
                0 0 25px rgba(255, 180, 0, 0.45),
                inset 0 0 15px rgba(0, 0, 0, 0.95);
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crest-medallion::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

.crest-icon {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    object-fit: cover;
    display: block;
    filter: contrast(1.15) brightness(1.08);
}

.crest-tier-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: linear-gradient(135deg, #e53e3e 0%, #dd6b20 50%, #d69e2e 100%);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1.5px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 12px rgba(229, 62, 62, 0.6);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Center: Typography & Pillars */
.card-body {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.card-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #ffd700;
    text-transform: uppercase;
}

.eyebrow-spark {
    color: #ff9900;
    font-size: 10px;
    animation: sparkFlicker 1.5s ease-in-out infinite alternate;
}

@keyframes sparkFlicker {
    0% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 4px #ffcc00); }
}

.card-headline {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.8px;
    margin: 0;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.card-headline .gold-gradient-title {
    background: linear-gradient(180deg, #ffffff 0%, #ffea85 30%, #f59e0b 70%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.3));
}

.card-lead {
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

/* Feature Grid with Interactive Cards - Full Text Wrap (No Truncation) */
.card-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 1050px) {
    .card-feature-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 0;
}

.feature-item:hover {
    background: rgba(255, 204, 0, 0.12);
    border-color: rgba(255, 204, 0, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.feature-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.feature-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.feature-name {
    font-size: 0.86rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.2px;
    white-space: normal;
    line-height: 1.25;
}

.feature-item:hover .feature-name {
    color: #ffcc00;
}

.feature-hint {
    font-size: 0.74rem;
    color: #94a3b8;
    line-height: 1.3;
    white-space: normal;
}

/* Right: Masterwork CTA Button */
.card-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.btn-expansion-gold {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 32px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffe066 0%, #f59e0b 45%, #b45309 85%, #d97706 100%);
    border: 1px solid #ffea85;
    color: #1a0f02;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                0 0 30px rgba(245, 158, 11, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.8),
                inset 0 -2px 0 rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

/* Animated Shimmer Gleam on button */
.btn-expansion-gold::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-25deg);
    animation: btnShimmerSweep 3.5s infinite;
}

@keyframes btnShimmerSweep {
    0% { left: -100%; }
    25%, 100% { left: 160%; }
}

.btn-expansion-gold:hover {
    background: linear-gradient(180deg, #ffffff 0%, #ffea85 45%, #f59e0b 85%, #ffcc00 100%);
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.75),
                inset 0 1px 0 #ffffff,
                inset 0 -2px 0 rgba(0, 0, 0, 0.6);
}

.btn-arrow {
    transition: transform 0.25s ease;
}

.btn-expansion-gold:hover .btn-arrow {
    transform: translateX(5px);
}

.action-subtext {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #a1a1aa;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ==============================================================================
   LIVE BANNER STYLE SELECTOR TOOLBAR
   ============================================================================== */
.banner-style-selector-bar {
    margin-top: 30px;
    background: rgba(12, 16, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.selector-tag {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.selector-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.style-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.style-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

.style-pill.active {
    background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%);
    color: #111827;
    border-color: #ffd700;
    font-weight: 800;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}

.pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.pill-dot.titan { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.pill-dot.frost { background: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
.pill-dot.fel { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.pill-dot.arcane { background: #c084fc; box-shadow: 0 0 6px #c084fc; }
.pill-dot.royal { background: #f43f5e; box-shadow: 0 0 6px #f43f5e; }
.pill-dot.obsidian { background: #e2e8f0; box-shadow: 0 0 6px #ffffff; }

/* ==============================================================================
   THEME 1: TITAN FORGE (DEFAULT - GOLD / MAGMA / BLIZZARD ORIGINAL)
   ============================================================================== */
.expansion-announcement-card.theme-titan {
    background: 
        radial-gradient(circle at 12% 50%, rgba(255, 120, 0, 0.22) 0%, transparent 60%),
        radial-gradient(circle at 90% 50%, rgba(212, 160, 23, 0.14) 0%, transparent 55%),
        linear-gradient(135deg, rgba(16, 22, 36, 0.96) 0%, rgba(9, 13, 22, 0.98) 50%, rgba(20, 16, 28, 0.96) 100%);
    border-color: rgba(212, 160, 23, 0.5);
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 140, 0, 0.18);
}
.theme-titan .card-corner { border-color: #ffd700; filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7)); }
.theme-titan .card-light-beam {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 204, 0, 0.3) 20%, #ffe066 50%, rgba(255, 140, 0, 0.8) 80%, transparent 100%);
}
.theme-titan .gold-gradient-title {
    background: linear-gradient(180deg, #ffffff 0%, #ffea85 30%, #f59e0b 70%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.theme-titan .btn-expansion-gold {
    background: linear-gradient(180deg, #ffe066 0%, #f59e0b 45%, #b45309 85%, #d97706 100%);
    border-color: #ffea85;
    color: #1a0f02;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.45);
}

/* ==============================================================================
   THEME 2: FROST CITADEL (ICECROWN CITADEL / LICH KING / SAPPHIRE NEON)
   ============================================================================== */
.expansion-announcement-card.theme-frost {
    background: 
        radial-gradient(circle at 10% 50%, rgba(56, 189, 248, 0.28) 0%, transparent 58%),
        radial-gradient(circle at 90% 50%, rgba(14, 165, 233, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, rgba(8, 22, 38, 0.97) 0%, rgba(4, 11, 22, 0.98) 50%, rgba(6, 26, 42, 0.96) 100%);
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.95), 0 0 45px rgba(56, 189, 248, 0.25);
}
.theme-frost .card-corner { border-color: #38bdf8; filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.85)); }
.theme-frost .card-light-beam {
    background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.3) 20%, #bae6fd 50%, rgba(14, 165, 233, 0.9) 80%, transparent 100%);
}
.theme-frost .crest-medallion { border-color: #38bdf8; box-shadow: 0 0 25px rgba(56, 189, 248, 0.5); }
.theme-frost .crest-halo { background: radial-gradient(circle, rgba(56, 189, 248, 0.45) 0%, transparent 70%); }
.theme-frost .card-eyebrow { color: #7dd3fc; }
.theme-frost .eyebrow-spark { color: #38bdf8; }
.theme-frost .gold-gradient-title {
    background: linear-gradient(180deg, #ffffff 0%, #bae6fd 30%, #38bdf8 70%, #0284c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(56, 189, 248, 0.4));
}
.theme-frost .btn-expansion-gold {
    background: linear-gradient(180deg, #e0f2fe 0%, #38bdf8 45%, #0284c7 85%, #0369a1 100%);
    border-color: #bae6fd;
    color: #032b44;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.55);
}
.theme-frost .btn-expansion-gold:hover {
    background: linear-gradient(180deg, #ffffff 0%, #7dd3fc 45%, #0ea5e9 85%, #0284c7 100%);
    color: #000000;
    box-shadow: 0 8px 30px rgba(56, 189, 248, 0.85);
}
.theme-frost .feature-item:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.45);
}
.theme-frost .feature-item:hover .feature-name { color: #7dd3fc; }

/* ==============================================================================
   THEME 3: FEL FLAME (BLACK TEMPLE / ILLIDAN / TOXIC EMERALD)
   ============================================================================== */
.expansion-announcement-card.theme-fel {
    background: 
        radial-gradient(circle at 10% 50%, rgba(34, 197, 94, 0.28) 0%, transparent 58%),
        radial-gradient(circle at 90% 50%, rgba(16, 185, 129, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, rgba(6, 26, 16, 0.97) 0%, rgba(3, 15, 8, 0.98) 50%, rgba(10, 30, 18, 0.96) 100%);
    border-color: rgba(74, 222, 128, 0.55);
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.95), 0 0 45px rgba(34, 197, 94, 0.25);
}
.theme-fel .card-corner { border-color: #4ade80; filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.85)); }
.theme-fel .card-light-beam {
    background: linear-gradient(90deg, transparent 0%, rgba(74, 222, 128, 0.3) 20%, #bbf7d0 50%, rgba(34, 197, 94, 0.9) 80%, transparent 100%);
}
.theme-fel .crest-medallion { border-color: #4ade80; box-shadow: 0 0 25px rgba(74, 222, 128, 0.5); }
.theme-fel .crest-halo { background: radial-gradient(circle, rgba(34, 197, 94, 0.45) 0%, transparent 70%); }
.theme-fel .card-eyebrow { color: #86efac; }
.theme-fel .eyebrow-spark { color: #22c55e; }
.theme-fel .gold-gradient-title {
    background: linear-gradient(180deg, #ffffff 0%, #bbf7d0 30%, #4ade80 70%, #15803d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(34, 197, 94, 0.4));
}
.theme-fel .btn-expansion-gold {
    background: linear-gradient(180deg, #dcfce7 0%, #4ade80 45%, #16a34a 85%, #14532d 100%);
    border-color: #bbf7d0;
    color: #052e16;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(34, 197, 94, 0.55);
}
.theme-fel .btn-expansion-gold:hover {
    background: linear-gradient(180deg, #ffffff 0%, #86efac 45%, #22c55e 85%, #16a34a 100%);
    color: #000000;
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.85);
}
.theme-fel .feature-item:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.45);
}
.theme-fel .feature-item:hover .feature-name { color: #86efac; }

/* ==============================================================================
   THEME 4: ASTRAL PANTHEON (ALGALON / CELESTIAL / ARCANE VOID)
   ============================================================================== */
.expansion-announcement-card.theme-arcane {
    background: 
        radial-gradient(circle at 10% 50%, rgba(192, 132, 252, 0.28) 0%, transparent 58%),
        radial-gradient(circle at 90% 50%, rgba(147, 51, 234, 0.2) 0%, transparent 55%),
        linear-gradient(135deg, rgba(20, 12, 38, 0.97) 0%, rgba(10, 6, 22, 0.98) 50%, rgba(26, 12, 45, 0.96) 100%);
    border-color: rgba(192, 132, 252, 0.55);
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.95), 0 0 45px rgba(168, 85, 247, 0.25);
}
.theme-arcane .card-corner { border-color: #c084fc; filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.85)); }
.theme-arcane .card-light-beam {
    background: linear-gradient(90deg, transparent 0%, rgba(192, 132, 252, 0.3) 20%, #f3e8ff 50%, rgba(168, 85, 247, 0.9) 80%, transparent 100%);
}
.theme-arcane .crest-medallion { border-color: #c084fc; box-shadow: 0 0 25px rgba(192, 132, 252, 0.5); }
.theme-arcane .crest-halo { background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, transparent 70%); }
.theme-arcane .card-eyebrow { color: #e9d5ff; }
.theme-arcane .eyebrow-spark { color: #c084fc; }
.theme-arcane .gold-gradient-title {
    background: linear-gradient(180deg, #ffffff 0%, #f3e8ff 30%, #c084fc 70%, #7e22ce 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(168, 85, 247, 0.4));
}
.theme-arcane .btn-expansion-gold {
    background: linear-gradient(180deg, #fae8ff 0%, #c084fc 45%, #9333ea 85%, #581c87 100%);
    border-color: #f3e8ff;
    color: #2e1065;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.55);
}
.theme-arcane .btn-expansion-gold:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e9d5ff 45%, #a855f7 85%, #7e22ce 100%);
    color: #ffffff;
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.85);
}
.theme-arcane .feature-item:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(192, 132, 252, 0.45);
}
.theme-arcane .feature-item:hover .feature-name { color: #d8b4fe; }

/* ==============================================================================
   THEME 5: ROYAL TRIUMPH (IMPERIAL RUBY / POLISHED 24K GOLD)
   ============================================================================== */
.expansion-announcement-card.theme-royal {
    background: 
        radial-gradient(circle at 10% 50%, rgba(225, 29, 72, 0.28) 0%, transparent 58%),
        radial-gradient(circle at 90% 50%, rgba(245, 158, 11, 0.2) 0%, transparent 55%),
        linear-gradient(135deg, rgba(32, 10, 18, 0.97) 0%, rgba(16, 6, 12, 0.98) 50%, rgba(28, 12, 18, 0.96) 100%);
    border-color: rgba(251, 191, 36, 0.65);
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.95), 0 0 45px rgba(225, 29, 72, 0.25);
}
.theme-royal .card-corner { border-color: #fbbf24; filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.85)); }
.theme-royal .card-light-beam {
    background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.3) 20%, #fef08a 50%, rgba(225, 29, 72, 0.9) 80%, transparent 100%);
}
.theme-royal .crest-medallion { border-color: #fbbf24; box-shadow: 0 0 25px rgba(225, 29, 72, 0.5); }
.theme-royal .crest-halo { background: radial-gradient(circle, rgba(225, 29, 72, 0.45) 0%, transparent 70%); }
.theme-royal .card-eyebrow { color: #fde047; }
.theme-royal .eyebrow-spark { color: #f43f5e; }
.theme-royal .gold-gradient-title {
    background: linear-gradient(180deg, #ffffff 0%, #fef08a 30%, #f43f5e 70%, #9f1239 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(225, 29, 72, 0.4));
}
.theme-royal .btn-expansion-gold {
    background: linear-gradient(180deg, #fef08a 0%, #e11d48 45%, #9f1239 85%, #4c0519 100%);
    border-color: #fde047;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(225, 29, 72, 0.55);
}
.theme-royal .btn-expansion-gold:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f43f5e 45%, #be123c 85%, #881337 100%);
    color: #ffffff;
    box-shadow: 0 8px 30px rgba(225, 29, 72, 0.85);
}
.theme-royal .feature-item:hover {
    background: rgba(225, 29, 72, 0.12);
    border-color: rgba(251, 191, 36, 0.45);
}
.theme-royal .feature-item:hover .feature-name { color: #fde047; }

/* ==============================================================================
   THEME 6: MYTHIC OBSIDIAN (ULTRA-DARK GLASSMORPHISM / PLATINUM / MINIMAL)
   ============================================================================== */
.expansion-announcement-card.theme-obsidian {
    background: 
        radial-gradient(circle at 10% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 58%),
        radial-gradient(circle at 90% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 55%),
        linear-gradient(135deg, rgba(14, 16, 20, 0.98) 0%, rgba(7, 8, 11, 0.99) 50%, rgba(12, 14, 18, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.98), 0 0 35px rgba(255, 255, 255, 0.08);
}
.theme-obsidian .card-corner { border-color: #f8fafc; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); }
.theme-obsidian .card-light-beam {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 20%, #ffffff 50%, rgba(203, 213, 225, 0.8) 80%, transparent 100%);
}
.theme-obsidian .crest-medallion { border-color: #f8fafc; box-shadow: 0 0 25px rgba(255, 255, 255, 0.35); }
.theme-obsidian .crest-halo { background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%); }
.theme-obsidian .card-eyebrow { color: #f1f5f9; }
.theme-obsidian .eyebrow-spark { color: #ffffff; }
.theme-obsidian .gold-gradient-title {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 35%, #94a3b8 75%, #64748b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.25));
}
.theme-obsidian .btn-expansion-gold {
    background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 45%, #64748b 85%, #334155 100%);
    border-color: #ffffff;
    color: #0f172a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 255, 255, 0.35);
}
.theme-obsidian .btn-expansion-gold:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 45%, #94a3b8 85%, #475569 100%);
    color: #000000;
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.6);
}
.theme-obsidian .feature-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}
.theme-obsidian .feature-item:hover .feature-name { color: #ffffff; }

/* ==============================================================================
   SEASON 1 INTERACTIVE FEATURE PILLARS WITH ARTWORK BANNERS
   ============================================================================== */
.season1-quad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 24px;
}

@media (max-width: 1200px) {
    .season1-quad-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .season1-quad-grid {
        grid-template-columns: 1fr;
    }
}

.s1-pillar-interactive {
    background: linear-gradient(180deg, rgba(16, 22, 34, 0.94) 0%, rgba(9, 13, 20, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    position: relative;
    user-select: none;
}

/* Individual card hover themes */
.s1-pillar-interactive.s1-pillar-gold:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 204, 0, 0.55);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.25);
}

.s1-pillar-interactive.s1-pillar-cyan:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 204, 255, 0.55);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 204, 255, 0.25);
}

.s1-pillar-interactive.s1-pillar-purple:hover {
    transform: translateY(-8px);
    border-color: rgba(199, 112, 255, 0.55);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(199, 112, 255, 0.25);
}

.s1-pillar-interactive.s1-pillar-emerald:hover {
    transform: translateY(-8px);
    border-color: rgba(46, 204, 113, 0.55);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(46, 204, 113, 0.25);
}

/* Banner Artwork Container */
.s1-banner-wrapper {
    position: relative;
    width: 100%;
    height: 165px;
    overflow: hidden;
    background: #06090e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.s1-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.s1-pillar-interactive:hover .s1-banner-img {
    transform: scale(1.08);
}

/* Overlay Badges */
.s1-overlay-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.s1-overlay-badge.s1-badge-gold {
    background: rgba(255, 204, 0, 0.2);
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.6);
}

.s1-overlay-badge.s1-badge-cyan {
    background: rgba(0, 204, 255, 0.2);
    color: #00ccff;
    border: 1px solid rgba(0, 204, 255, 0.6);
}

.s1-overlay-badge.s1-badge-purple {
    background: rgba(199, 112, 255, 0.2);
    color: #c770ff;
    border: 1px solid rgba(199, 112, 255, 0.6);
}

.s1-overlay-badge.s1-badge-emerald {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.6);
}

/* Pillar Content Body */
.s1-pillar-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.s1-pillar-title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.s1-pillar-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0 0 16px 0;
    flex-grow: 1;
}

/* In-game Location Box */
.s1-loc-box {
    background: rgba(6, 10, 18, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 14px;
    transition: all 0.2s ease;
}

.s1-pillar-interactive:hover .s1-loc-box {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(6, 10, 18, 0.95);
}

.s1-loc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.s1-loc-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.s1-loc-cmd {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.s1-cmd-gold {
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.4);
}

.s1-cmd-cyan {
    color: #00ccff;
    background: rgba(0, 204, 255, 0.15);
    border: 1px solid rgba(0, 204, 255, 0.4);
}

.s1-cmd-purple {
    color: #c770ff;
    background: rgba(199, 112, 255, 0.15);
    border: 1px solid rgba(199, 112, 255, 0.4);
}

.s1-cmd-emerald {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
}

.s1-loc-details {
    font-size: 11.5px;
    color: #cbd5e1;
    line-height: 1.45;
}

.s1-loc-details strong {
    color: #ffffff;
}

/* Call-to-action button inside card */
.s1-pillar-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #f1f5f9;
    transition: all 0.25s ease;
}

.s1-pillar-cta svg {
    transition: transform 0.25s ease;
}

.s1-pillar-interactive:hover .s1-pillar-cta svg {
    transform: translateX(4px);
}

.s1-pillar-interactive:hover .s1-cta-gold {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.2) 0%, rgba(255, 204, 0, 0.08) 100%);
    border-color: rgba(255, 204, 0, 0.5);
    color: #ffcc00;
}

.s1-pillar-interactive:hover .s1-cta-cyan {
    background: linear-gradient(135deg, rgba(0, 204, 255, 0.2) 0%, rgba(0, 204, 255, 0.08) 100%);
    border-color: rgba(0, 204, 255, 0.5);
    color: #00ccff;
}

.s1-pillar-interactive:hover .s1-cta-purple {
    background: linear-gradient(135deg, rgba(199, 112, 255, 0.2) 0%, rgba(199, 112, 255, 0.08) 100%);
    border-color: rgba(199, 112, 255, 0.5);
    color: #c770ff;
}

.s1-pillar-interactive:hover .s1-cta-emerald {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2) 0%, rgba(46, 204, 113, 0.08) 100%);
    border-color: rgba(46, 204, 113, 0.5);
    color: #2ecc71;
}

/* ==============================================================================
   AWWWARDS & ACETERNITY GRADE EXTENSIONS (2025–2026)
   ============================================================================== */

/* 1. Hardware Accelerated Scroll Progress */
@supports (animation-timeline: scroll()) {
  .scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ffcc00, #00e5ff, #ec4899);
    transform-origin: 0% 50%;
    animation: growProgress auto linear;
    animation-timeline: scroll(root);
    z-index: 10001;
  }
  @keyframes growProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* 2. Border Beam (Magic UI Laser Outline) */
.beam-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 1.5px;
  background: rgba(255, 255, 255, 0.05);
}

.beam-border {
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 280deg,
    var(--gold-primary, #ffcc00) 320deg,
    var(--frost-blue, #00e5ff) 350deg,
    transparent 360deg
  );
  animation: rotateBeam 4s linear infinite;
}

.beam-content {
  position: relative;
  background: linear-gradient(145deg, rgba(14, 21, 35, 0.96), rgba(7, 11, 20, 0.99));
  border-radius: 19px;
  padding: 30px 24px;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@keyframes rotateBeam {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 3. Holographic Iridescent Foil for Legendaries */
.holo-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.holo-card:hover {
  box-shadow: 0 20px 50px rgba(255, 204, 0, 0.35), 0 0 30px rgba(0, 229, 255, 0.25);
}

.holo-foil {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 180deg at var(--mouse-x-pct, 50%) var(--mouse-y-pct, 50%),
    rgba(255, 204, 0, 0.15) 0deg,
    rgba(255, 230, 130, 0.22) 90deg,
    rgba(0, 229, 255, 0.15) 180deg,
    rgba(255, 204, 0, 0.15) 360deg
  );
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.holo-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x-pct, 50%) var(--mouse-y-pct, 50%),
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.05) 35%,
    transparent 65%
  );
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}

.holo-card:hover .holo-foil { opacity: 0.22; }
.holo-card:hover .holo-glare { opacity: 0.45; }

/* 4. Elastic Sliding Tabs */
.sliding-tabs-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(14, 21, 35, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px;
  border-radius: 9999px;
  backdrop-filter: blur(16px);
  gap: 4px;
}

.tabs-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 0;
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.35), rgba(0, 229, 255, 0.35));
  border: 1px solid rgba(255, 204, 0, 0.5);
  border-radius: 9999px;
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

.tab-btn {
  position: relative;
  z-index: 2;
  background: none;
  border: none;
  padding: 8px 20px;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 9999px;
  transition: color 0.25s ease;
}

.tab-btn.active { color: #ffffff; }

/* 6. Accessibility & 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;
  }
  .holo-card, .tilt-card { transform: none !important; transition: none !important; }
  .beam-border { animation: none !important; background: rgba(255, 204, 0, 0.5) !important; }
}

/* ==============================================================================
   7. PVP GEAR & A8 SETS ULTRA STYLING (AWWWARDS / ACETERNITY SUITE)
   ============================================================================== */
.shop-cat-btn.highlight-pvp {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.22), rgba(159, 18, 57, 0.38)) !important;
  border: 1px solid rgba(244, 63, 94, 0.55) !important;
  color: #ffe4e6 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.2) !important;
}

.shop-cat-btn.highlight-pvp:hover,
.shop-cat-btn.highlight-pvp.active {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.5), rgba(159, 18, 57, 0.75)) !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.45) !important;
  transform: translateY(-2px);
}

.donate-card.pvp-card {
  position: relative;
  background: linear-gradient(145deg, rgba(32, 10, 16, 0.94), rgba(15, 6, 10, 0.98)) !important;
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(225, 29, 72, 0.14), inset 0 1px 0 rgba(255, 100, 130, 0.22) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.donate-card.pvp-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(244, 63, 94, 0.85) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85), 0 0 32px rgba(225, 29, 72, 0.38) !important;
}

.donate-card.pvp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f43f5e, #fb7185, transparent);
  opacity: 0.8;
}

.item-icon-box.pvp-icon-box {
  border-color: rgba(244, 63, 94, 0.75) !important;
  box-shadow: 0 0 14px rgba(225, 29, 72, 0.35) !important;
}

.item-title.pvp-title {
  color: #ffe4e6 !important;
  text-shadow: 0 0 10px rgba(244, 63, 94, 0.35);
}

.badge-ilvl.pvp-ilvl {
  background: rgba(244, 63, 94, 0.15) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
  color: #fca5a5 !important;
}

.badge-pvp-season {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #e11d48, #9f1239);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(225, 29, 72, 0.5);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.badge-resilience {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(251, 113, 133, 0.12));
  border: 1px solid rgba(244, 63, 94, 0.5);
  color: #fda4af;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.2);
}

.card-set-bonuses {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  border-left: 2px solid #f43f5e;
  font-size: 11.5px;
  line-height: 1.45;
  color: #e2e8f0;
}

.card-set-bonuses .bonus-line {
  margin-bottom: 3px;
}

.card-set-bonuses .bonus-line:last-child {
  margin-bottom: 0;
}

.card-set-bonuses .bonus-tag {
  color: #f43f5e;
  font-weight: 800;
  margin-right: 5px;
}

.btn-buy-cab-item.btn-buy-pvp {
  background: linear-gradient(135deg, #e11d48, #be123c) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 15px rgba(225, 29, 72, 0.35) !important;
}

.btn-buy-cab-item.btn-buy-pvp:hover {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  box-shadow: 0 6px 22px rgba(244, 63, 94, 0.6) !important;
  transform: translateY(-1px);
}

/* ==============================================================================
   CABINET BATTLE PASS (30 LEVELS TRACK & PREVIEW)
   ============================================================================== */
.bp-master-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bp-top-cards-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
}

@media (max-width: 960px) {
  .bp-top-cards-grid {
    grid-template-columns: 1fr;
  }
}

.bp-hero-card {
  position: relative;
  background: linear-gradient(135deg, #0e1424, #080c16);
  border: 1px solid rgba(255, 204, 0, 0.3);
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 204, 0, 0.1);
  overflow: hidden;
}

.bp-hero-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 204, 0, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.bp-season-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fef08a;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.bp-level-highlight {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.bp-current-lvl-num {
  font-family: var(--font-mono);
  font-size: 42px;
  font-weight: 900;
  color: #ffcc00;
  text-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
  line-height: 1;
}

.bp-level-caption {
  font-size: 16px;
  font-weight: 800;
  color: #f1f5f9;
}

.bp-xp-bar-track {
  width: 100%;
  height: 14px;
  background: #1e293b;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  margin-bottom: 8px;
}

.bp-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #eab308, #facc15);
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.7);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-xp-stats-text {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.bp-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.bp-next-preview-card {
  position: relative;
  background: #0a0f1d;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(168, 85, 247, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.preview-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
  padding: 4px 10px;
  border-radius: 6px;
  align-self: flex-start;
  margin-bottom: 12px;
}

.preview-reward-showcase {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.preview-reward-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #110d24;
  border: 2px solid #a855f7;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.preview-reward-desc h4 {
  font-size: 15px;
  font-weight: 800;
  color: #e2e8f0;
}

.preview-reward-desc p {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 3px;
}

/* Horizontal 30-Level Track */
.bp-track-section {
  background: #070b14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 22px;
}

.bp-track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.bp-track-title {
  font-size: 16px;
  font-weight: 800;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bp-track-scroll-container {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 10px 4px 20px 4px;
  scroll-behavior: smooth;
}

.bp-track-scroll-container::-webkit-scrollbar {
  height: 8px;
}

.bp-track-scroll-container::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 4px;
}

.bp-track-scroll-container::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

.bp-track-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

.bpc-card {
  min-width: 140px;
  flex-shrink: 0;
  background: #0b1120;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.25s ease;
  position: relative;
}

.bpc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 204, 0, 0.4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.bpc-card.unlocked {
  border-color: rgba(34, 197, 94, 0.4);
  background: radial-gradient(circle, rgba(34, 197, 94, 0.06) 0%, #0b1120 100%);
}

.bpc-card.claimed {
  opacity: 0.6;
}

.bpc-level-badge {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  margin-bottom: 8px;
  font-family: var(--font-mono);
}

.bpc-reward-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 8px;
}

.bpc-card.unlocked .bpc-reward-icon {
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.bpc-reward-name {
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 10px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bpc-btn-claim {
  width: 100%;
  padding: 5px 0;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bpc-btn-claim.ready {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.bpc-btn-claim.ready:hover {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  transform: scale(1.03);
}

.bpc-btn-claim.claimed {
  background: rgba(255, 255, 255, 0.05);
  color: #64748b;
  cursor: default;
}

.bpc-btn-claim.locked {
  background: rgba(255, 255, 255, 0.04);
  color: #475569;
  cursor: not-allowed;
}

/* ==============================================================================
   SHOP SUB-FILTERS & CATEGORY NAVIGATION
   ============================================================================== */
.shop-subfilter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px 0;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  backdrop-filter: blur(12px);
}

.subfilter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-right: 4px;
}

.subfilter-btn {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.subfilter-btn:hover {
  background: rgba(51, 65, 85, 0.8);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.subfilter-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.3));
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}

.subfilter-btn.highlight-pvp.active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.35));
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}

.subfilter-btn.highlight-pve.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
  border-color: #f59e0b;
  color: #fde68a;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
}

/* ==============================================================================
   ITEM SET REQUIREMENT BOX & SYNERGY
   ============================================================================== */
.item-set-requirement-box {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  font-size: 11px;
}

.set-req-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.set-req-title {
  color: #38bdf8;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.set-req-counter {
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.set-req-warning {
  color: #f59e0b;
  font-size: 10px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.set-req-bonuses {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.set-req-bonus-item {
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.25;
}

.set-req-bonus-item .tag {
  color: #38bdf8;
  font-weight: 700;
  margin-right: 4px;
}

.card-set-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  width: 100%;
}

.btn-buy-single {
  flex: 1;
  padding: 8px 10px;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-buy-single:hover {
  background: rgba(51, 65, 85, 0.95);
  border-color: #38bdf8;
  color: #fff;
}

.btn-buy-full-set {
  flex: 1.2;
  padding: 8px 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #fbbf24;
  color: #0b1120;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
  transition: all 0.2s ease;
}

.btn-buy-full-set:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}

/* ==============================================================================
   CABINET HISTORY TABS & ACCORDIONS
   ============================================================================== */
.history-subtabs-bar {
  display: flex;
  gap: 10px;
  margin: 16px 0 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.history-subtab-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.history-subtab-btn:hover {
  background: rgba(30, 41, 59, 0.8);
  color: #fff;
}

.history-subtab-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.3));
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

/* ==============================================================================
   PORTAL LANGUAGE SWITCHER (OBSIDIAN DARK THEME & HARDWARE SLIDER [ RU | EN ])
   ============================================================================== */
.lang-switch,
.lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 38px;
    background: rgba(18, 25, 40, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 3px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    vertical-align: middle;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    flex-shrink: 0;
}

.lang-switch:hover,
.lang-switcher:hover {
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.lang-slider,
.lang-glider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: linear-gradient(135deg, #00f0ff 0%, #7928ca 100%);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
    transform: translateX(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.lang-switch.active-en .lang-slider,
.lang-switch[data-lang="en"] .lang-slider,
.lang-switcher.active-en .lang-glider,
.lang-switcher[data-lang="en"] .lang-glider {
    transform: translateX(100%);
}

.lang-opt,
.lang-btn {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-family: 'JetBrains Mono', 'Montserrat', monospace, sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 0 10px;
    height: 100%;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-opt:hover,
.lang-btn:hover {
    color: #ffffff;
}

.lang-opt.active,
.lang-btn.active {
    color: #ffffff;
    font-weight: 800;
}

.lang-switch.active-en,
.lang-switcher.active-en {
    border-color: rgba(0, 240, 255, 0.45);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

/* ==============================================================================
   3D ARMORY & RADAR OBSIDIAN GLASS MODALS & COMPONENTS
   ============================================================================== */
.armory-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(3, 7, 18, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.armory-modal-backdrop.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.armory-modal-window {
    width: 100%;
    max-width: 1180px;
    max-height: 90vh;
    background: #07090e;
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 255, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.armory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.armory-header-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.armory-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.armory-subtitle {
    font-size: 12px;
    color: #94a3b8;
}

.armory-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.armory-search-wrap input {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 12px;
    color: #ffffff;
    font-size: 13px;
    outline: none;
}

.armory-search-wrap input:focus {
    border-color: #00f0ff;
}

.armory-search-submit {
    background: linear-gradient(135deg, #00f0ff, #0077b6);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    padding: 7px 14px;
    cursor: pointer;
}

.armory-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s;
}

.armory-close-btn:hover {
    color: #ffffff;
}

.armory-body {
    display: grid;
    grid-template-columns: 200px 1fr 200px 300px;
    gap: 16px;
    padding: 20px;
    overflow-y: auto;
}

.armory-slots-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.armory-slot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: all 0.2s;
}

.armory-slot-item:hover {
    border-color: rgba(0, 240, 255, 0.4);
    background: rgba(15, 23, 42, 0.8);
}

.armory-slot-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: #94a3b8;
}

.armory-slot-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.armory-slot-name {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
}

.armory-item-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.armory-slot-item.q-4 .armory-item-name { color: #a335ee; }
.armory-slot-item.q-5 .armory-item-name { color: #ff8000; }

.armory-viewport-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 420px;
}

.armory-char-summary {
    text-align: center;
    margin-bottom: 8px;
}

.armory-char-summary h2 {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.armory-char-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.armory-canvas-container {
    width: 100%;
    height: 340px;
    position: relative;
}

.armory-canvas-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.armory-rotate-hint {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: #64748b;
    pointer-events: none;
}

.armory-panel {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.armory-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.armory-tab-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.armory-tab-btn.active {
    background: rgba(0, 240, 255, 0.15);
    border-color: #00f0ff;
    color: #ffffff;
}

.armory-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.armory-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.armory-stat-row .stat-label {
    color: #94a3b8;
}

.armory-stat-row .stat-value {
    color: #00f0ff;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.armory-arena-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.arena-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}

.arena-bracket { font-size: 11px; color: #94a3b8; }
.arena-rating { font-size: 18px; font-weight: 800; color: #ffcc00; }
.arena-sub { font-size: 10px; color: #64748b; }

.armory-tower-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    text-align: center;
}

.tower-floor-badge {
    font-size: 24px;
    font-weight: 900;
    color: #00f0ff;
}

.tower-status { font-size: 12px; font-weight: 700; color: #22c55e; }
.tower-time, .tower-rewards { font-size: 12px; color: #94a3b8; }

/* ==============================================================================
   QUICK START ON PHASESHIFT FUN — OBSIDIAN ULTRA-GLASS BENTO GRID
   ============================================================================== */
.starter-kit-section {
    position: relative;
    padding: 60px 0 80px;
    background: radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.05) 0%, transparent 60%),
                radial-gradient(circle at 80% 30%, rgba(255, 204, 0, 0.04) 0%, transparent 50%),
                #07090e;
    overflow: hidden;
}

.starter-kit-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3), rgba(255, 204, 0, 0.3), transparent);
}

.starter-kit-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* Bento Header Area */
.starter-header-wrap {
    text-align: center;
    margin-bottom: 36px;
    position: relative;
}

.starter-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 30px;
    color: #00e5ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}

.starter-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 14px;
}

.neon-gold-gradient {
    background: linear-gradient(135deg, #fff2a3 0%, #ffcc00 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(255, 204, 0, 0.35));
}

.neon-cyan-gradient {
    background: linear-gradient(135deg, #a5f3fc 0%, #00e5ff 50%, #0284c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.35));
}

.starter-subtitle {
    font-size: 16px;
    color: #94a3b8;
    max-width: 820px;
    margin: 0 auto 26px;
    line-height: 1.6;
}

/* Filter Navigation Tabs */
.starter-filter-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 6px;
    background: rgba(10, 14, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 34px;
}

.starter-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.starter-filter-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.starter-filter-btn.active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(0, 119, 255, 0.22));
    border-color: rgba(0, 229, 255, 0.4);
    color: #00e5ff;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.25);
}

/* Master Bento Grid (12 Columns) */
.starter-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
    margin-bottom: 30px;
}

/* ==============================================================================
   QUICK START PROGRESSION: 3 STEPS & INTERACTIVE ROLE SHOWCASE
   ============================================================================== */
.qs-steps-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .qs-steps-bento-grid {
        grid-template-columns: 1fr;
    }
}

.qs-step-card {
    background: linear-gradient(145deg, rgba(14, 20, 32, 0.95), rgba(8, 12, 20, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    cursor: pointer;
}

.qs-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    opacity: 0.85;
}

.card-step-1::before {
    background: linear-gradient(90deg, transparent, #00b4d8, transparent);
}
.card-step-2::before {
    background: linear-gradient(90deg, transparent, #ff3344, transparent);
}
.card-step-3::before {
    background: linear-gradient(90deg, transparent, #ffcc00, transparent);
}

.qs-step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65);
}

.card-step-1:hover {
    border-color: rgba(0, 180, 216, 0.5);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 180, 216, 0.15);
}
.card-step-2:hover {
    border-color: rgba(255, 51, 68, 0.5);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 51, 68, 0.15);
}
.card-step-3:hover {
    border-color: rgba(255, 204, 0, 0.5);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 204, 0, 0.15);
}

.qs-sc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.qs-sc-step-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.qs-sc-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-free {
    background: rgba(0, 180, 216, 0.15);
    border: 1px solid rgba(0, 180, 216, 0.4);
    color: #00e5ff;
}

.badge-tempo-pve {
    background: rgba(255, 51, 68, 0.15);
    border: 1px solid rgba(255, 51, 68, 0.4);
    color: #ff5566;
}

.badge-tempo-pvp {
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffcc00;
}

.qs-sc-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.qs-sc-icon {
    font-size: 22px;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
}

.qs-sc-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
}

.qs-sc-desc {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 12px;
}

.qs-sc-desc b {
    color: #f1f5f9;
}

.qs-sc-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.qs-sc-pill {
    font-size: 11px;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Interactive Role Showcase Container */
.qs-roles-showcase-box {
    background: linear-gradient(145deg, rgba(12, 17, 28, 0.96), rgba(7, 10, 18, 0.99));
    border: 1px solid rgba(255, 204, 0, 0.22);
    border-radius: 16px;
    padding: 20px 20px 18px;
    margin-bottom: 24px;
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 204, 0, 0.06);
}

.qs-roles-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.qs-roles-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 800;
    color: #ffcc00;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.qs-roles-main-title {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.qs-role-tabs-wrap {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 3px;
    gap: 3px;
    flex-wrap: wrap;
}

.qs-role-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 16px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    white-space: nowrap;
}

.qs-role-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.qs-role-tab.active {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(0, 180, 216, 0.45);
}

.qs-role-classes-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    flex-wrap: wrap;
}

.classes-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #ffcc00;
    font-weight: 700;
    text-transform: uppercase;
}

.classes-pills {
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 600;
}

.qs-kit-title-wrap {
    margin-bottom: 14px;
}

.qs-kit-title {
    font-size: 15px;
    font-weight: 800;
    color: #00e5ff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.qs-role-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (max-width: 1024px) {
    .qs-role-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .qs-role-cards-grid {
        grid-template-columns: 1fr;
    }
}

.qs-role-card {
    background: rgba(16, 23, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.qs-role-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
}

.qs-role-card.card-accent-cyan::before {
    background: linear-gradient(90deg, transparent, #00e5ff, transparent);
}
.qs-role-card.card-accent-gold::before {
    background: linear-gradient(90deg, transparent, #ffcc00, transparent);
}
.qs-role-card.card-accent-purple::before {
    background: linear-gradient(90deg, transparent, #c084fc, transparent);
}
.qs-role-card.card-accent-green::before {
    background: linear-gradient(90deg, transparent, #4ade80, transparent);
}

.qs-role-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.qs-rc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}

.qs-rc-tag {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.qs-rc-ilvl {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
}

.qs-rc-icon {
    font-size: 22px;
    margin-bottom: 6px;
}

.qs-rc-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.qs-rc-desc {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0;
    flex-grow: 1;
}

.qs-notice-badge {
    display: block;
    margin-top: 6px;
    font-size: 10.5px;
    line-height: 1.4;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
}

/* Iconic Role Cards (Stat text replaced with canonical WoW icons & rich tooltips) */
.qs-rc-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 10px 0;
}

.qs-rc-icon-frame {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 2px solid #a335ee;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
    background: #000;
}

.qs-rc-icon-frame.quality-legendary {
    border-color: #ff8000;
    box-shadow: 0 0 14px rgba(255, 128, 0, 0.45);
}

.qs-rc-icon-frame.quality-epic {
    border-color: #a335ee;
    box-shadow: 0 0 14px rgba(163, 53, 238, 0.45);
}

.qs-rc-icon-frame:hover,
.qs-role-card:hover .qs-rc-icon-frame {
    transform: scale(1.06);
}

.qs-rc-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qs-rc-item-meta {
    flex: 1;
    min-width: 0;
}

.qs-rc-item-meta .qs-rc-name {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 4px 0;
    line-height: 1.25;
}

.qs-rc-name.quality-legendary {
    color: #ff8000;
    text-shadow: 0 0 10px rgba(255, 128, 0, 0.35);
}

.qs-rc-name.quality-epic {
    color: #c084fc;
    text-shadow: 0 0 10px rgba(192, 132, 252, 0.35);
}

.qs-rc-slot-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    letter-spacing: 0.3px;
}

.qs-rc-hover-prompt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
    border: 1px dashed rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: auto;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.qs-role-card:hover .qs-rc-hover-prompt {
    background: rgba(255, 215, 0, 0.16);
    border-color: rgba(255, 215, 0, 0.65);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.prompt-sparkle {
    font-size: 12px;
    color: #ffd700;
    animation: promptPulse 2s infinite ease-in-out;
}

@keyframes promptPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.25) rotate(15deg); }
}

/* Interactive loot tags & pedestal stats with tooltips */
.loot-tag[data-tooltip-id],
.paperdoll-stat-item[data-tooltip-id] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.loot-tag[data-tooltip-id]:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(163, 53, 238, 0.5);
    border-color: rgba(163, 53, 238, 0.8);
}

.loot-tag.relic[data-tooltip-id]:hover {
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
    border-color: rgba(255, 204, 0, 0.8);
}

.paperdoll-stat-item[data-tooltip-id]:hover {
    border-color: rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
    transform: translateY(-1px);
}

/* Bento Card Base (Obsidian Ultra-Glass) */
.starter-bento-card {
    background: rgba(10, 14, 22, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 20px 18px;
    position: relative;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.starter-bento-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 24px var(--card-hover-glow, rgba(0, 229, 255, 0.15));
}

/* Column Spans */
.bento-col-4 {
    grid-column: span 4;
}

.bento-col-6 {
    grid-column: span 6;
}

.bento-col-12 {
    grid-column: span 12;
}

/* Accent Card Themes */
.card-accent-cyan {
    --card-hover-glow: rgba(0, 229, 255, 0.25);
    border-top: 2px solid rgba(0, 229, 255, 0.6);
}

.card-accent-gold {
    --card-hover-glow: rgba(255, 204, 0, 0.25);
    border-top: 2px solid rgba(255, 204, 0, 0.6);
}

.card-accent-purple {
    --card-hover-glow: rgba(168, 85, 247, 0.25);
    border-top: 2px solid rgba(168, 85, 247, 0.6);
}

.card-accent-green {
    --card-hover-glow: rgba(34, 197, 94, 0.25);
    border-top: 2px solid rgba(34, 197, 94, 0.6);
}

.card-accent-amber {
    --card-hover-glow: rgba(245, 158, 11, 0.25);
    border-top: 2px solid rgba(245, 158, 11, 0.6);
}

/* Card Header & Badges */
.bento-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bento-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.card-accent-cyan .bento-badge {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.3);
    color: #00e5ff;
}

.card-accent-gold .bento-badge {
    background: rgba(255, 204, 0, 0.12);
    border-color: rgba(255, 204, 0, 0.3);
    color: #ffcc00;
}

.card-accent-purple .bento-badge {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

.card-accent-green .bento-badge {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.card-accent-amber .bento-badge {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.bento-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.bento-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.25;
}

.bento-card-desc {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.45;
    margin-bottom: 12px;
    flex-grow: 1;
}

/* Bento Feature Pills */
.bento-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.bento-pill {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Feature Checklist Inside Cards */
.bento-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bento-checklist li {
    font-size: 12px;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
}

.bento-checklist li b {
    color: #fff;
}

/* ==============================================================================
   CARD 6: FAIR ECONOMY & ENDGAME PROGRESSION (HERO BENTO SPAN 12)
   ============================================================================== */
.bento-economy-card {
    background: radial-gradient(circle at 10% 20%, rgba(255, 204, 0, 0.06) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(239, 68, 68, 0.06) 0%, transparent 40%),
                rgba(10, 14, 22, 0.9);
    border: 1px solid rgba(255, 204, 0, 0.22);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 204, 0, 0.08);
}

.economy-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 10px;
}

.economy-pane {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.economy-pane.left-protect {
    border-left: 3px solid #22c55e;
}

.economy-pane.right-hardcore {
    border-left: 3px solid #f59e0b;
}

.pane-badge-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pane-badge-title h4 {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 800;
    margin: 0;
}

.economy-pane p {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

.economy-pane p strong {
    color: #f1f5f9;
}

.economy-highlight-box {
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px dashed rgba(239, 68, 68, 0.35);
    border-radius: 6px;
    font-size: 11.5px;
    color: #fca5a5;
    line-height: 1.45;
}

/* ==============================================================================
   CARD 7: STARTER ZONE HUB INFRASTRUCTURE (BENTO GUIDE SPAN 12)
   ============================================================================== */
.bento-hub-card {
    background: radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.06) 0%, transparent 60%),
                rgba(10, 14, 22, 0.9);
    border: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 229, 255, 0.08);
}

.hub-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 12px;
}

.hub-step-item {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    transition: all 0.22s ease;
    cursor: pointer;
}

.hub-step-item:hover {
    background: rgba(22, 34, 58, 0.7);
    border-color: rgba(0, 229, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 229, 255, 0.15);
}

.hub-item-action-hint {
    margin-top: auto;
    padding-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #00e5ff;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.hub-step-item:hover .hub-item-action-hint {
    color: #ffcc00;
    transform: translateX(2px);
}

.hub-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.hub-step-num {
    font-size: 10px;
    font-weight: 900;
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
}

.hub-step-icon {
    font-size: 20px;
}

.hub-step-item h5 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 8px 0;
}

.hub-step-item p {
    color: #94a3b8;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0;
}

/* ==============================================================================
   RESPONSIVENESS FOR QUICK START BENTO GRID & 4K
   ============================================================================== */
@media (max-width: 1200px) {
    .bento-col-4 {
        grid-column: span 6;
    }
    .bento-col-4:last-of-type {
        grid-column: span 12;
    }
    .hub-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .economy-dual-grid {
        grid-template-columns: 1fr;
    }
    .bento-col-6 {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .starter-kit-section {
        padding: 40px 0 60px;
    }
    .starter-bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .bento-col-4,
    .bento-col-6,
    .bento-col-12 {
        grid-column: span 1;
    }
    .hub-steps-grid {
        grid-template-columns: 1fr;
    }
    .starter-bento-card {
        padding: 20px;
    }
    .starter-filter-tabs {
        width: 100%;
        border-radius: 16px;
    }
    .starter-filter-btn {
        flex: 1 1 45%;
        justify-content: center;
        padding: 6px 10px;
        font-size: 11.5px;
    }
}

/* 4K Ultra HD Monitors */
@media (min-width: 2560px) {
    .starter-kit-container {
        max-width: 1800px;
    }
    .starter-title {
        font-size: 52px;
    }
    .starter-subtitle {
        font-size: 20px;
        max-width: 1100px;
    }
    .bento-card-title {
        font-size: 24px;
    }
    .bento-card-desc {
        font-size: 16px;
    }
    .bento-checklist li {
        font-size: 15px;
    }
}

/* ==========================================================================
   GLOBAL SEASONS ROADMAP & MODAL TIMELINE (SEASONS 1 - 5)
   ========================================================================== */

.season-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 9999px;
    background: rgba(14, 21, 37, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.season-nav-btn:hover {
    background: rgba(24, 38, 66, 0.9);
    border-color: rgba(56, 189, 248, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(56, 189, 248, 0.25);
}

.season-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
    animation: seasonPulse 2s infinite ease-in-out;
}

@keyframes seasonPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.season-badge-txt {
    color: #f8fafc;
    letter-spacing: 0.02em;
}

.season-badge-days {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
}

/* Modal Overlay */
.seasons-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 9, 14, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.seasons-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.seasons-modal-container {
    width: 100%;
    max-width: 1420px;
    max-height: 92vh;
    background: #0b0f19;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(56, 189, 248, 0.15);
    display: block;
    overflow-y: auto;
    padding: 34px 38px;
    position: relative;
    transform: scale(0.96) translateY(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.seasons-modal-overlay.active .seasons-modal-container {
    transform: scale(1) translateY(0);
}

.seasons-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 20px;
}

.seasons-modal-kicker {
    font-size: 11px;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 6px;
}

.seasons-modal-title {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.seasons-modal-sub {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
}

.seasons-modal-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.seasons-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: scale(1.05);
}

/* Active Season Hero Card (With Native Site Artwork Background) */
.seasons-hero-banner {
    position: relative;
    background: linear-gradient(135deg, rgba(11, 17, 30, 0.90) 0%, rgba(15, 23, 42, 0.82) 100%), url('images/hero_battle.jpg?v=3') center/cover no-repeat;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 20px;
    padding: 28px 34px;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.4);
    min-height: 190px;
    box-sizing: border-box;
    overflow: visible;
}

.shb-left {
    flex: 1;
    min-width: 0;
}

.shb-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.shb-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}

.shb-desc {
    font-size: 13.5px;
    color: #cbd5e1;
    line-height: 1.55;
    margin: 0 0 14px 0;
    max-width: 680px;
}

.shb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shb-tag {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
}

.shb-right {
    min-width: 240px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.shb-timer-val {
    font-size: 42px;
    font-weight: 900;
    color: #f59e0b;
    line-height: 1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.shb-timer-lbl {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.shb-prog-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.shb-prog-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}

.shb-prog-meta {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

/* Timeline Balanced 3x2 Grid (3 Top, 3 Bottom) */
.seasons-timeline-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* Premium Ribbons on Season Cards */
.scn-premium-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
    width: fit-content;
}

.scn-premium-ribbon.red-ribbon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(185, 28, 28, 0.55) 100%);
    border: 1px solid rgba(239, 68, 68, 0.65);
    color: #fca5a5;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}

.scn-premium-ribbon.gold-ribbon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(180, 83, 9, 0.55) 100%);
    border: 1px solid rgba(245, 158, 11, 0.65);
    color: #fde68a;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
}

.scn-premium-ribbon.upcoming-ribbon {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.season-card-node {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
}

.season-card-node:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

/* Season 1 (Closed) Red Styling */
.season-card-node.closed {
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.09) 0%, rgba(15, 23, 42, 0.85) 60%);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15);
}

.season-card-node.closed:hover {
    border-color: rgba(239, 68, 68, 0.75);
    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.35);
}

/* Season 2 (Active) Gold Styling */
.season-card-node.active {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.14) 0%, rgba(15, 23, 42, 0.9) 60%);
    border-color: rgba(245, 158, 11, 0.65);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.25);
}

.season-card-node.active:hover {
    border-color: rgba(245, 158, 11, 0.9);
    box-shadow: 0 0 45px rgba(245, 158, 11, 0.4);
}

.season-card-node.completed {
    opacity: 0.85;
}

.scn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.scn-id-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--node-accent, #38bdf8);
    letter-spacing: 0.05em;
}

.scn-status-pill {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    border: 1px solid;
    text-transform: uppercase;
}

.scn-days {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 10px;
}

.scn-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.scn-subtitle {
    font-size: 11.5px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.scn-ilvl-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.scn-ilvl-lbl {
    font-size: 11px;
    color: #94a3b8;
}

.scn-ilvl-val {
    font-size: 13px;
    font-weight: 800;
    color: #f59e0b;
}

.scn-details {
    margin-top: auto;
    font-size: 11px;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
}

.scn-row strong {
    color: #94a3b8;
}

/* ==============================================================================
   DEDICATED VOLUME 1 ARCHIVE BLOCK (ТОМ 1 ЗАКРЫТ)
   ============================================================================== */
.volume-dedicated-card {
    position: relative;
    border-radius: 22px;
    padding: 32px 36px;
    margin-bottom: 28px;
    background: radial-gradient(circle at 10% 50%, rgba(220, 38, 38, 0.22), transparent 60%),
                linear-gradient(135deg, rgba(12, 18, 32, 0.94) 0%, rgba(28, 10, 14, 0.96) 100%),
                url('images/hero_battle.jpg?v=3') center/cover no-repeat;
    background-blend-mode: screen, normal, overlay;
    border: 2px solid rgba(239, 68, 68, 0.55);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(239, 68, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    min-height: 290px;
}

.volume-dedicated-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4444 0%, #f87171 40%, #b91c1c 80%, transparent 100%);
}

.volume-dedicated-card:hover {
    border-color: rgba(239, 68, 68, 0.85);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

/* Grand Full-Width Red Premium Banner with Deathwing Dragon & Live Canvas Fire */
.vdc-top-bar {
    width: 100%;
    margin-bottom: 24px;
}

.vdc-grand-premium-banner {
    width: 100%;
    min-height: 140px;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 18px;
    padding: 24px 30px;
    background-color: #0b0f19;
    border: 2px solid rgba(239, 68, 68, 0.65);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 45px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    overflow: hidden;
}

/* Living Breathing Dragon Layer */
.vdc-dragon-bg-layer {
    position: absolute;
    inset: -15px;
    background-image: url('images/hero_battle.jpg?v=3');
    background-size: 155%;
    background-position: 62% 18%;
    background-repeat: no-repeat;
    animation: dragonBreathing 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes dragonBreathing {
    0%, 100% {
        transform: scale(1) translate(0, 0);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.035) translate(-3px, 1px);
        filter: brightness(1.16) contrast(1.08);
    }
}

.vdc-dragon-vignette-layer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        rgba(8, 2, 4, 0.96) 0%, 
        rgba(20, 5, 8, 0.90) 36%, 
        rgba(185, 28, 28, 0.28) 55%, 
        rgba(10, 4, 6, 0.12) 75%, 
        rgba(15, 4, 8, 0.6) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.vdc-grand-premium-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    animation: bannerSheen 4.5s infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes bannerSheen {
    0% { left: -100%; }
    40%, 100% { left: 100%; }
}

.vdc-fire-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}

.vdc-gpb-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 62%;
}

.vdc-gpb-header-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vdc-gpb-title {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 16px rgba(239, 68, 68, 0.6);
}

.vdc-gpb-star {
    color: #fef08a;
    font-size: 16px;
    filter: drop-shadow(0 0 6px #eab308);
}

.vdc-gpb-flame {
    font-size: 20px;
    filter: drop-shadow(0 0 8px #f97316);
    animation: flameBounce 1.5s ease-in-out infinite alternate;
}

@keyframes flameBounce {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-2px) scale(1.18); }
}

.vdc-gpb-badges-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.vdc-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.92);
    border: 1.5px solid rgba(254, 202, 202, 0.5);
    color: #fecaca;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.vdc-dragon-flame-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35) 0%, rgba(245, 158, 11, 0.3) 100%);
    border: 1.5px solid rgba(251, 191, 36, 0.55);
    color: #fef08a;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
}

.flame-sparkle {
    color: #fbbf24;
    font-size: 12px;
    animation: flameSparklePulse 1s infinite alternate;
}

@keyframes flameSparklePulse {
    from { transform: scale(0.9); opacity: 0.8; }
    to { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 6px #f59e0b); }
}

.vdc-pulse-red {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: vdcPulse 1.8s infinite;
}

@keyframes vdcPulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #ef4444; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

.vdc-body-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 34px;
    align-items: center;
}

.vdc-chapter-tag {
    font-size: 11px;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vdc-chapter-tag::before {
    content: '';
    width: 14px;
    height: 2px;
    background: #ef4444;
}

.vdc-main-title {
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.vdc-red-glow {
    color: #fca5a5;
    text-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
}

.vdc-description {
    font-size: 14.5px;
    color: #cbd5e1;
    line-height: 1.65;
    margin: 0 0 22px 0;
    max-width: 980px;
}

.vdc-stats-chips-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.vdc-stat-chip {
    background: rgba(10, 16, 28, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s ease;
}

.vdc-stat-chip:hover {
    background: rgba(22, 32, 54, 0.95);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-2px);
}

.vdc-sc-icon,
.vdc-chip-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

.vdc-chip-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vdc-chip-meta strong,
.vdc-sc-label {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.vdc-chip-meta span,
.vdc-sc-val {
    font-size: 13px;
    font-weight: 800;
    color: #e2e8f0;
}

/* Ruby Wax Seal Medallion */
.vdc-seal-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.vdc-ruby-seal {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ef4444 0%, #b91c1c 45%, #7f1d1d 85%, #450a0a 100%);
    border: 3.5px double rgba(254, 202, 202, 0.65);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 30px rgba(220, 38, 38, 0.55), inset 0 3px 6px rgba(255, 255, 255, 0.45), inset 0 -4px 8px rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vdc-ruby-seal:hover {
    transform: scale(1.08) rotate(-2deg);
}

.seal-glow-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px dashed rgba(239, 68, 68, 0.45);
    pointer-events: none;
    animation: rotateSlow 20s linear infinite;
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.vdc-seal-inner,
.seal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

.vdc-seal-icon,
.seal-emblem {
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.vdc-seal-text,
.seal-vol-title {
    font-size: 15px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    margin-top: 3px;
}

.vdc-seal-sub,
.seal-stamp-tag {
    font-size: 11px;
    font-weight: 900;
    color: #fecaca;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.vdc-seal-caption {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 1000px) {
    .vdc-body-grid {
        grid-template-columns: 1fr;
    }
    .vdc-seal-box {
        flex-direction: row;
        justify-content: flex-start;
    }
    .vdc-stats-chips-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .vdc-stats-chips-row {
        grid-template-columns: 1fr;
    }
}

.seasons-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 18px;
}

.smf-info {
    font-size: 12px;
    color: #64748b;
    max-width: 800px;
}

.seasons-modal-close-btn {
    background: #38bdf8;
    color: #0b0f19;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.seasons-modal-close-btn:hover {
    background: #7dd3fc;
    transform: translateY(-1px);
}

@media (max-width: 1100px) {
    .seasons-timeline-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .seasons-hero-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .shb-right {
        min-width: 100%;
    }
}

@media (max-width: 680px) {
    .seasons-timeline-track {
        grid-template-columns: 1fr;
    }
}

/* ==============================================================================
   SEASON LORE CHRONICLES & MODAL STYLES (ЛЕТОПИСЬ СЕЗОНОВ)
   ============================================================================== */

/* Buttons on Cards and Banners */
.scn-lore-action-btn {
    margin-top: 12px;
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.scn-lore-action-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.12) 100%);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}

.shb-lore-action-btn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(220, 38, 38, 0.2) 100%);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fef08a;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    margin-top: 14px;
}

.shb-lore-action-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.45) 0%, rgba(220, 38, 38, 0.35) 100%);
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.vdc-lore-action-btn {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    border: 1px solid rgba(254, 202, 202, 0.4);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.35);
}

.vdc-lore-action-btn:hover {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 0 24px rgba(239, 68, 68, 0.6);
    transform: translateY(-2px);
}

/* Season Lore Modal Overlay */
.season-lore-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(3, 7, 18, 0.94) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important;
}

.season-lore-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Locked Card Action Button */
.scn-lore-action-btn.scn-lore-locked {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: #64748b;
    cursor: pointer;
}

.scn-lore-action-btn.scn-lore-locked:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
    transform: none;
}

/* Locked Lore Chamber in Modal */
.lore-locked-chamber {
    text-align: center;
    padding: 44px 24px;
    background: radial-gradient(circle at 50% 30%, rgba(220, 38, 38, 0.12), transparent 70%),
                linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(10, 15, 28, 0.9) 100%);
    border: 1px dashed rgba(239, 68, 68, 0.35);
    border-radius: 20px;
    margin: 20px 0 28px 0;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6);
}

.lore-locked-seal-ring {
    font-size: 44px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.6));
    animation: lockedChainsPulse 3s ease-in-out infinite;
}

@keyframes lockedChainsPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.4)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 28px rgba(239, 68, 68, 0.8)); }
}

.lore-locked-kicker {
    font-size: 11px;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}

.lore-locked-title {
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 12px 0;
    letter-spacing: 0.02em;
}

.lore-locked-badge {
    display: inline-block;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: 0.05em;
}

.lore-locked-p {
    font-size: 14px;
    color: #cbd5e1;
    max-width: 640px;
    margin: 0 auto 24px auto;
    line-height: 1.6;
}

.lore-locked-meta-box {
    max-width: 540px;
    margin: 0 auto 28px auto;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
}

.llm-row strong {
    color: #f1f5f9;
}

.lore-return-s1-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    color: #0b0f19;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35);
}

.lore-return-s1-btn:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 26px rgba(245, 158, 11, 0.55);
}

.season-lore-overlay.active {
    opacity: 1;
    visibility: visible;
}

.season-lore-container {
    width: 100%;
    max-width: 1160px;
    max-height: 90vh;
    background: #090e18;
    background-image: 
        radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.08), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(56, 189, 248, 0.06), transparent 45%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 60px rgba(245, 158, 11, 0.15);
    overflow-y: auto;
    padding: 32px 36px;
    position: relative;
    transform: scale(0.96) translateY(12px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.season-lore-overlay.active .season-lore-container {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.lore-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 18px;
}

.lore-modal-kicker {
    font-size: 11px;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 6px;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.lore-modal-headline {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.lore-modal-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lore-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: scale(1.06);
}

/* Tabs Bar */
.lore-tabs-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    scrollbar-width: thin;
}

.lore-tab-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lore-tab-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.lore-tab-btn.active {
    background: var(--tab-color, #f59e0b)22;
    border-color: var(--tab-color, #f59e0b);
    color: #ffffff;
    box-shadow: 0 0 16px var(--tab-color, #f59e0b)33;
}

/* Lore Content Hero */
.lore-hero-header {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(20, 15, 30, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.lore-hero-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: var(--season-accent, #f59e0b);
    box-shadow: 0 0 12px var(--season-accent, #f59e0b);
}

.lore-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.lore-chapter-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--season-accent, #f59e0b);
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--season-accent, #f59e0b)44;
}

.lore-status-pill {
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 8px;
    letter-spacing: 0.03em;
}

.lore-hero-title {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.lore-hero-subtitle {
    font-size: 14px;
    color: #cbd5e1;
    margin-bottom: 14px;
    font-weight: 500;
}

.lore-quote-box {
    margin: 12px 0 0 0;
    padding: 12px 18px;
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid var(--season-accent, #f59e0b);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    font-size: 13.5px;
    color: #e2e8f0;
    line-height: 1.5;
}

/* Narrative Story Section */
.lore-story-section {
    margin-bottom: 28px;
}

.lore-section-heading {
    font-size: 15px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: 0.03em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

.lore-section-heading span.icon {
    font-size: 18px;
}

.lore-story-p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #cbd5e1;
    margin-bottom: 14px;
}

.lore-story-p:first-of-type::first-letter {
    font-size: 32px;
    font-weight: 900;
    color: var(--season-accent, #f59e0b);
    float: left;
    line-height: 1;
    margin-right: 8px;
    padding-top: 2px;
}

/* Bosses Grid */
.lore-bosses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.lore-boss-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.lore-boss-card:hover {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(20, 24, 40, 0.85);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.lore-boss-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.lore-boss-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #fca5a5;
}

.lore-boss-loc {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 7px;
    border-radius: 4px;
}

.lore-boss-role {
    font-size: 11.5px;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.lore-boss-desc {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0;
}

/* Artifacts Grid */
.lore-artifacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.lore-artifact-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s ease;
}

.lore-artifact-card:hover {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(24, 26, 42, 0.85);
    transform: translateY(-2px);
}

.lore-artifact-name {
    font-size: 14px;
    font-weight: 800;
    color: #fbbf24;
    margin-bottom: 4px;
}

.lore-artifact-type {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lore-artifact-desc {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.4;
    margin: 0;
}

/* Military Brief Callout */
.lore-military-brief {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(239, 68, 68, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 28px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.lore-brief-icon {
    font-size: 26px;
    flex-shrink: 0;
    padding-top: 2px;
}

.lore-brief-content h5 {
    font-size: 13.5px;
    font-weight: 800;
    color: #fef08a;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lore-brief-content p {
    font-size: 13px;
    color: #e2e8f0;
    line-height: 1.5;
    margin: 0;
}

/* Nav Controls */
.lore-nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}

.lore-nav-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lore-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.lore-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.lore-back-to-roadmap-btn {
    background: #f59e0b;
    border: none;
    color: #0b0f19;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lore-back-to-roadmap-btn:hover {
    background: #fbbf24;
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}

/* ==============================================================================
   PROCEDURAL ASSEMBLY & KINETIC FORGE ANIMATION MATRIX (СБОРКА БЛОКОВ)
   ============================================================================== */

.seasons-modal-container {
    perspective: 1600px;
    transform-style: preserve-3d;
}

.seasons-timeline-track {
    perspective: 1400px;
    transform-style: preserve-3d;
}

/* Assembly Indicator Status Pill in Header */
.assembly-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fef08a;
    transition: all 0.3s ease;
}

.assembly-status-indicator.complete {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #a7f3d0;
}

/* Base Assembly States */
.assemble-anim-header {
    opacity: 0;
    transform: translateY(-24px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.assemble-anim-header.assembled {
    opacity: 1;
    transform: translateY(0);
}

.assemble-anim-hero {
    opacity: 0;
    transform: translateY(-40px) scale(0.92);
    filter: blur(6px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 1.25, 0.4, 1), filter 0.4s ease;
}
.assemble-anim-hero.assembled {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(245, 158, 11, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.4);
}

/* Theatrical 3D Scattered Starting States for Cards 1..6 */
.season-card-node.assemble-card {
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1.35, 0.36, 1), filter 0.45s ease;
    will-change: transform, opacity, filter;
    position: relative;
    pointer-events: none;
}

/* Scattered positions in 3D space */
.season-card-node.scatter-pos-1 {
    transform: translate3d(-160px, -100px, 260px) rotate(-16deg) rotateY(-22deg) scale(0.72);
}
.season-card-node.scatter-pos-2 {
    transform: translate3d(0px, -150px, 300px) rotate(8deg) rotateX(25deg) scale(0.7);
}
.season-card-node.scatter-pos-3 {
    transform: translate3d(160px, -100px, 260px) rotate(18deg) rotateY(22deg) scale(0.72);
}
.season-card-node.scatter-pos-4 {
    transform: translate3d(-160px, 100px, 260px) rotate(-14deg) rotateY(-20deg) scale(0.72);
}
.season-card-node.scatter-pos-5 {
    transform: translate3d(0px, 150px, 300px) rotate(-8deg) rotateX(-25deg) scale(0.7);
}
.season-card-node.scatter-pos-6 {
    transform: translate3d(160px, 100px, 260px) rotate(16deg) rotateY(20deg) scale(0.72);
}

/* Snapped state: locked firmly into the grid slot */
.season-card-node.assemble-card.assembled {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1) !important;
    filter: blur(0) !important;
    pointer-events: auto !important;
}

/* Corner Rune Locks ╔ ╗ ╚ ╝ that snap into place during assembly */
.season-card-node::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(135deg, var(--node-accent, #38bdf8), transparent 40%, var(--node-accent, #38bdf8) 80%, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.season-card-node.assembled::before {
    opacity: 0.7;
    transform: scale(1);
}

/* Kinetic Impact Flash on landing */
@keyframes assembleSlamImpact {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.9);
        border-color: rgba(255, 255, 255, 0.9);
    }
    35% {
        box-shadow: 0 0 45px 12px var(--node-accent, rgba(245, 158, 11, 0.8));
        border-color: var(--node-accent, #f59e0b);
    }
    100% {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    }
}

.season-card-node.snap-flash {
    animation: assembleSlamImpact 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Volume 1 Grand Card Landing */
.volume-dedicated-card.assemble-volume {
    opacity: 0;
    transform: translateY(65px) scale(0.92);
    filter: blur(6px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 1.25, 0.4, 1), filter 0.45s ease;
}

.volume-dedicated-card.assemble-volume.assembled {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.volume-dedicated-card.snap-flash-red {
    animation: assembleRedShockwave 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes assembleRedShockwave {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.9);
    }
    40% {
        box-shadow: 0 0 55px 16px rgba(239, 68, 68, 0.85), 0 18px 50px rgba(0, 0, 0, 0.75);
    }
    100% {
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(239, 68, 68, 0.25);
    }
}

/* ==============================================================================
   PROCEDURAL LIGHTNING BACKGROUND LAYER (Vanilla JS / Canvas Overlay)
   ============================================================================== */
/* Процедурный слой молнии */
.lightning-overlay,
#lightning-canvas,
.lightning-canvas,
.lightning-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1; /* Поверх фонового градиента, но строго под UI-контентом */
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* Весь контент сайта гарантированно выше молнии */
.navbar,
.main-container,
.bento-grid,
.footer {
  position: relative;
  z-index: 2;
}

/* ==============================================================================
   PREMIUM FEATURES CATEGORIES & INLINE INSPECTOR SUITE
   ============================================================================== */
.features-categories-bar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px;
    background: rgba(10, 15, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    backdrop-filter: blur(16px);
    margin: 20px auto 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.features-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 30px;
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.features-cat-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.features-cat-btn.active {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.22), rgba(245, 158, 11, 0.26));
    border-color: rgba(255, 204, 0, 0.5);
    color: #ffd700;
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.3);
}

.feature-tile.selected-feature-tile {
    border-color: #ffcc00 !important;
    background: linear-gradient(135deg, rgba(28, 40, 68, 0.95), rgba(16, 24, 42, 0.98)) !important;
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.8) !important;
    transform: translateY(-4px) scale(1.01) !important;
}

.feature-tile.selected-feature-tile::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, #ffcc00, #ff8000, #ffcc00) !important;
    height: 4px !important;
}

/* Feature Inline Inspector Panel */
.feature-inline-panel {
    background: linear-gradient(145deg, rgba(14, 22, 38, 0.96) 0%, rgba(8, 12, 22, 0.98) 100%);
    border: 1.5px solid rgba(255, 204, 0, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 204, 0, 0.15);
    border-radius: 20px;
    padding: 28px;
    backdrop-filter: blur(20px);
    position: relative;
    animation: fadeInSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.fi-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.fi-header-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.fi-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.2);
}

.fi-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.3);
    margin-bottom: 4px;
}

.fi-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px;
}

.fi-subtitle {
    font-size: 13.5px;
    color: #94a3b8;
    margin: 0;
}

.fi-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fi-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.fi-panel-body {
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fi-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .fi-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 550px) {
    .fi-stats-grid {
        grid-template-columns: 1fr;
    }
}

.fi-stat-card {
    background: rgba(10, 16, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fi-stat-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fi-stat-val {
    font-size: 13.5px;
    color: #e2e8f0;
    font-weight: 700;
    line-height: 1.35;
}

.fi-stat-val.text-amber {
    color: #fbbf24;
}

.fi-stat-val.text-cyan {
    color: #38bdf8;
}

.fi-block-heading {
    font-size: 14px;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fi-mechanics-list {
    margin: 0;
    padding-left: 20px;
    color: #cbd5e1;
    font-size: 13.5px;
    line-height: 1.65;
}

.fi-mechanics-list li {
    margin-bottom: 6px;
}

.fi-tip-box {
    background: rgba(255, 204, 0, 0.08);
    border: 1px dashed rgba(255, 204, 0, 0.35);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fi-tip-icon {
    font-size: 20px;
}

.fi-tip-content {
    font-size: 13px;
    color: #fef08a;
    line-height: 1.5;
}

.fi-tip-content strong {
    color: #ffd700;
    margin-right: 4px;
}

/* ==============================================================================
   PREMIUM ULTRA MASTER-DETAIL SPLIT-VIEW (Apple/Blizzard Style Hub)
   ============================================================================== */
.features-master-hub {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 22px;
    background: linear-gradient(145deg, rgba(12, 18, 30, 0.95) 0%, rgba(7, 10, 18, 0.98) 100%);
    border: 1.5px solid rgba(255, 204, 0, 0.32);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(255, 204, 0, 0.1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow: hidden;
    position: relative;
    min-height: 520px;
}

@media (max-width: 960px) {
    .features-master-hub {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

/* Left Sidebar: Interactive Scrollable Master List */
.fmh-sidebar {
    background: rgba(8, 12, 22, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    gap: 12px;
}

@media (max-width: 960px) {
    .fmh-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        max-height: 380px;
    }
}

.fmh-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fmh-sidebar-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    color: #ffcc00;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fmh-sidebar-count {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
}

.fmh-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 540px;
    padding-right: 4px;
}

.fmh-list::-webkit-scrollbar {
    width: 5px;
}
.fmh-list::-webkit-scrollbar-thumb {
    background: rgba(255, 204, 0, 0.25);
    border-radius: 4px;
}

/* Master Item Button */
.fmh-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(16, 24, 38, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    position: relative;
    user-select: none;
}

.fmh-item:hover {
    background: rgba(25, 36, 58, 0.8);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateX(3px);
}

.fmh-item.active {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.18) 0%, rgba(30, 44, 72, 0.95) 100%);
    border-color: #ffcc00;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 3px 0 0 #ffcc00;
}

.fmh-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.fmh-item.active .fmh-item-icon {
    background: rgba(255, 204, 0, 0.2);
    border-color: rgba(255, 204, 0, 0.5);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}

.fmh-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fmh-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.fmh-item-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f1f5f9;
}

.fmh-item.active .fmh-item-name {
    color: #ffcc00;
}

.fmh-tag {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.fmh-tag.pvp {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}
.fmh-tag.pve {
    background: rgba(56, 189, 248, 0.2);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.35);
}
.fmh-tag.fun {
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.35);
}
.fmh-tag.core {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.fmh-tag.s2 {
    background: rgba(245, 158, 11, 0.2);
    color: #fde047;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.fmh-item-sub {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fmh-item-arrow {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, color 0.2s ease;
}

.fmh-item.active .fmh-item-arrow,
.fmh-item:hover .fmh-item-arrow {
    color: #ffcc00;
    transform: translateX(2px);
}

/* Right Display Pane: Live Dynamic Details View */
.fmh-detail-pane {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    background: transparent;
}

.fmh-detail-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
}

.fmh-detail-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.fmh-detail-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 204, 0, 0.12);
    border: 1.5px solid rgba(255, 204, 0, 0.4);
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.fmh-detail-icon-wrap svg {
    width: 26px;
    height: 26px;
}

.fmh-detail-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.35);
    margin-bottom: 4px;
}

.fmh-detail-title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px;
    line-height: 1.25;
}

.fmh-detail-subtitle {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.45;
}

/* 4 Quick Specs Grid */
.fmh-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 720px) {
    .fmh-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fmh-spec-card {
    background: rgba(14, 20, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fmh-spec-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fmh-spec-value {
    font-size: 12.5px;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.3;
}

.fmh-spec-value.val-gold {
    color: #fbbf24;
}

.fmh-spec-value.val-cyan {
    color: #38bdf8;
}

/* Content & Mechanics */
.fmh-content-card {
    background: rgba(14, 20, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 14px 16px;
}

.fmh-content-heading {
    font-size: 13px;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 8px;
}

.fmh-mechanics-list {
    margin: 0;
    padding-left: 18px;
    color: #cbd5e1;
    font-size: 12.5px;
    line-height: 1.6;
}

.fmh-mechanics-list li {
    margin-bottom: 4px;
}

/* Tip Card */
.fmh-tip-card {
    background: rgba(255, 204, 0, 0.08);
    border: 1px dashed rgba(255, 204, 0, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fmh-tip-icon {
    font-size: 18px;
    line-height: 1;
}

.fmh-tip-body {
    font-size: 12px;
    color: #fef08a;
    line-height: 1.45;
}

.fmh-tip-body strong {
    color: #ffcc00;
    margin-right: 4px;
}

.fmh-tip-body p {
    margin: 0;
    display: inline;
}




/* ==============================================================================
   FLAGSHIP SHOWCASE CARDS (THE BIG 3) & HUB ENHANCEMENTS
   ============================================================================== */
.features-flagships-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

@media (max-width: 960px) {
    .features-flagships-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.flagship-card {
    position: relative;
    padding: 24px 22px;
    border-radius: 18px;
    background: rgba(14, 20, 34, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.flagship-card:hover {
    transform: translateY(-6px);
}

.flagship-start {
    border-color: rgba(255, 204, 0, 0.35);
    background: linear-gradient(145deg, rgba(30, 24, 10, 0.9) 0%, rgba(12, 16, 26, 0.95) 100%);
}
.flagship-start:hover {
    border-color: #ffcc00;
    box-shadow: 0 20px 50px rgba(255, 204, 0, 0.25);
}

.flagship-tower {
    border-color: rgba(168, 85, 247, 0.35);
    background: linear-gradient(145deg, rgba(28, 12, 40, 0.9) 0%, rgba(12, 16, 26, 0.95) 100%);
}
.flagship-tower:hover {
    border-color: #c084fc;
    box-shadow: 0 20px 50px rgba(168, 85, 247, 0.25);
}

.flagship-pvp {
    border-color: rgba(6, 182, 212, 0.35);
    background: linear-gradient(145deg, rgba(8, 28, 42, 0.9) 0%, rgba(12, 16, 26, 0.95) 100%);
}
.flagship-pvp:hover {
    border-color: #22d3ee;
    box-shadow: 0 20px 50px rgba(6, 182, 212, 0.25);
}

.flagship-badge {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.flagship-badge.gold {
    background: rgba(255, 204, 0, 0.18);
    color: #ffdd44;
    border: 1px solid rgba(255, 204, 0, 0.45);
}
.flagship-badge.purple {
    background: rgba(168, 85, 247, 0.18);
    color: #e9d5ff;
    border: 1px solid rgba(168, 85, 247, 0.45);
}
.flagship-badge.cyan {
    background: rgba(6, 182, 212, 0.18);
    color: #a5f3fc;
    border: 1px solid rgba(6, 182, 212, 0.45);
}

.flagship-icon-glow {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.25));
}

.flagship-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.flagship-desc {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.55;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.flagship-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.flagship-stat {
    display: flex;
    flex-direction: column;
}
.flagship-stat-val {
    font-size: 15px;
    font-weight: 800;
    color: #ffcc00;
}
.flagship-stat-lbl {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flagship-action-btn {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
}
.flagship-card:hover .flagship-action-btn {
    background: #ffcc00;
    color: #0b0f19;
    border-color: #ffcc00;
}

/* Divider before Hub */
.features-hub-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 10px 0 24px;
}
.features-hub-divider-line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.3), transparent);
}
.features-hub-divider-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffd700;
    white-space: nowrap;
}

/* Detail Pane Dynamic Atmosphere Background & CTA */
.fmh-detail-pane {
    position: relative;
    background: radial-gradient(circle at top right, rgba(255, 204, 0, 0.05) 0%, transparent 60%);
    transition: background 0.5s ease;
}

/* ==============================================================================
   SECRET SEASON [CLASSIFIED] MYSTERY STYLES
   ============================================================================== */
.fmh-item-secret {
    border: 1px dashed rgba(168, 85, 247, 0.45) !important;
    background: linear-gradient(135deg, rgba(28, 12, 45, 0.6) 0%, rgba(14, 10, 25, 0.7) 100%) !important;
    position: relative;
    overflow: hidden;
}

.fmh-item-secret::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.15), transparent);
    animation: secretShimmer 4s infinite;
}

@keyframes secretShimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.fmh-item-secret:hover,
.fmh-item-secret.active {
    border-color: #c084fc !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.35), inset 0 0 12px rgba(168, 85, 247, 0.15) !important;
}

.fmh-secret-icon {
    filter: drop-shadow(0 0 8px #a855f7);
    animation: secretLockGlow 2.5s infinite ease-in-out;
}

@keyframes secretLockGlow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px #a855f7); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 14px #e9d5ff); }
}

.fmh-secret-name {
    color: #e9d5ff !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
}

.fmh-tag-secret {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(217, 70, 239, 0.3) 100%) !important;
    color: #f5d0fe !important;
    border: 1px solid rgba(217, 70, 239, 0.6) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    text-shadow: 0 0 8px rgba(217, 70, 239, 0.8);
    animation: secretBadgePulse 2s infinite;
}

@keyframes secretBadgePulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
}

/* ==============================================================================
   RACIAL HERITAGE GEAR & RACE FILTERS STYLING (10 WoW Races)
   ============================================================================== */
.shop-race-filters {
    transition: all 0.3s ease;
}

.race-pill {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 215, 0, 0.2);
    color: #cbd5e1;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.race-pill:hover {
    transform: translateY(-1px);
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 215, 0, 0.4);
    color: #fff;
}

.race-pill.active {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(245, 158, 11, 0.35)) !important;
    border-color: #ffd700 !important;
    color: #fef08a !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35) !important;
}

.subfilter-btn.highlight-racial {
    border-color: rgba(234, 179, 8, 0.4);
    color: #fde047;
}

.subfilter-btn.highlight-racial:hover {
    background: rgba(234, 179, 8, 0.15);
    border-color: #eab308;
    color: #fff;
}

.subfilter-btn.highlight-racial.active {
    background: linear-gradient(135deg, #eab308, #ca8a04) !important;
    border-color: #fef08a !important;
    color: #0b1120 !important;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.4) !important;
}

.donate-card.racial-card {
    border-color: rgba(234, 179, 8, 0.45) !important;
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.15);
}

.donate-card.racial-card:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3) !important;
}

.item-icon-box.racial-icon-box {
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important;
}

.item-set-requirement-box.racial-synergy-box {
    border-color: rgba(234, 179, 8, 0.35) !important;
    background: rgba(15, 23, 42, 0.85);
}

.item-set-requirement-box.racial-synergy-box .set-req-title {
    color: #ffd700 !important;
}

.item-set-requirement-box.racial-synergy-box .set-req-counter {
    background: rgba(234, 179, 8, 0.15);
    color: #fef08a;
}

.item-set-requirement-box.racial-synergy-box .set-req-bonus-item .tag {
    color: #f59e0b !important;
}

.btn-buy-cab-item.btn-buy-racial {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #0f172a;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.3);
}

.btn-buy-cab-item.btn-buy-racial:hover {
    background: linear-gradient(135deg, #facc15, #eab308);
    box-shadow: 0 0 16px rgba(250, 204, 21, 0.5);
}




/* ==============================================================================
   HIGH-VISIBILITY AAA CARD ANIMATIONS & AMBIENT SHIMMER
   ============================================================================== */

/* 1. Luminous Ambient Border Glow & Hover Transformation on all major cards */
.qs-card,
.flagship-card,
.boss-card,
.starter-bento-card,
.donate-pkg-card,
.features-master-hub {
    position: relative !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.35s ease !important;
    will-change: transform, box-shadow !important;
}

/* Hover: Distinct 3D Lift & Rich Neon Shadow */
.qs-card:hover,
.flagship-card:hover,
.boss-card:hover,
.starter-bento-card:hover,
.donate-pkg-card:hover {
    transform: translateY(-8px) scale(1.015) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 
                0 0 35px rgba(255, 204, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Special Neon Color Tints on Hover per Card Type */
.flagship-card.flagship-start:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4) !important;
}

.flagship-card.flagship-tower:hover {
    border-color: #c084fc !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 40px rgba(192, 132, 252, 0.4) !important;
}

.flagship-card.flagship-pvp:hover {
    border-color: #38bdf8 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 40px rgba(56, 189, 248, 0.4) !important;
}

.qs-card:hover {
    border-color: rgba(0, 229, 255, 0.65) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 229, 255, 0.3) !important;
}

.boss-card:hover {
    border-color: rgba(239, 68, 68, 0.65) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(239, 68, 68, 0.3) !important;
}

/* 2. Traveling Holographic Light Glare on Hover */
.qs-card::after,
.flagship-card::after,
.boss-card::after,
.starter-bento-card::after,
.donate-pkg-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.04) 30%, 
        rgba(255, 255, 255, 0.22) 50%, 
        rgba(255, 204, 0, 0.15) 70%, 
        transparent 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    transition: none;
    z-index: 5;
}

.qs-card:hover::after,
.flagship-card:hover::after,
.boss-card:hover::after,
.starter-bento-card:hover::after,
.donate-pkg-card:hover::after {
    left: 200%;
    transition: left 0.85s ease-in-out;
}

/* 3. Perpetual Subtle Ambient Breathing for Feature Hub & Top Cards */
@keyframes ambientGlowPulse {
    0%, 100% {
        border-color: rgba(255, 204, 0, 0.32);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 204, 0, 0.08);
    }
    50% {
        border-color: rgba(255, 204, 0, 0.65);
        box-shadow: 0 22px 65px rgba(0, 0, 0, 0.85), 0 0 40px rgba(255, 204, 0, 0.22);
    }
}

.features-master-hub {
    animation: ambientGlowPulse 5s ease-in-out infinite alternate !important;
}

/* 4. Active Interactive List Items Hover Wave */
.fmh-item {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fmh-item:hover {
    transform: translateX(6px) !important;
    background: rgba(255, 204, 0, 0.12) !important;
    border-color: rgba(255, 204, 0, 0.45) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 204, 0, 0.15) !important;
}

.fmh-item.active {
    box-shadow: 0 4px 20px rgba(255, 204, 0, 0.25), inset 3px 0 0 #ffcc00 !important;
}

/* 5. Floating Icons Micro-Motion */
@keyframes iconFloatAnim {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-4px) scale(1.04);
    }
}

.flagship-icon-glow,
.qs-card-icon,
.fmh-detail-icon-wrap {
    animation: iconFloatAnim 3.8s ease-in-out infinite !important;
    display: inline-flex !important;
}



/* ==============================================================================
   EPIC AAA ANIMATIONS FOR 'ЧТО ВЫ ПОЛУЧАЕТЕ СРАЗУ ПРИ ВХОДЕ' (STARTER KIT)
   ============================================================================== */

/* 1. Main Role Showcase Card Dynamic Energy Breathing */
@keyframes starterBoxPulse {
    0%, 100% {
        border-color: rgba(255, 204, 0, 0.28);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 204, 0, 0.08);
    }
    50% {
        border-color: rgba(255, 204, 0, 0.65);
        box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 204, 0, 0.22);
    }
}

.qs-roles-showcase-box {
    animation: starterBoxPulse 5s ease-in-out infinite alternate !important;
}

/* 2. Interactive Mythic Breathing & Aurora Glow on Role Cards */
@keyframes mythicBreatheCyan {
    0%, 100% {
        border-color: rgba(0, 229, 255, 0.22);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 229, 255, 0.12);
    }
    50% {
        border-color: rgba(0, 229, 255, 0.45);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 229, 255, 0.24);
    }
}

@keyframes mythicBreatheGold {
    0%, 100% {
        border-color: rgba(255, 204, 0, 0.22);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 204, 0, 0.12);
    }
    50% {
        border-color: rgba(255, 204, 0, 0.45);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 204, 0, 0.24);
    }
}

@keyframes mythicBreathePurple {
    0%, 100% {
        border-color: rgba(192, 132, 252, 0.22);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(192, 132, 252, 0.12);
    }
    50% {
        border-color: rgba(192, 132, 252, 0.45);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 24px rgba(192, 132, 252, 0.24);
    }
}

@keyframes mythicBreatheGreen {
    0%, 100% {
        border-color: rgba(74, 222, 128, 0.22);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(74, 222, 128, 0.12);
    }
    50% {
        border-color: rgba(74, 222, 128, 0.45);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 24px rgba(74, 222, 128, 0.24);
    }
}

/* Periodic Idle Holographic Glint */
@keyframes periodicSheenSweep {
    0%, 75% {
        left: -160%;
        opacity: 0;
    }
    80% {
        opacity: 0.65;
    }
    95% {
        left: 200%;
        opacity: 0.65;
    }
    100% {
        left: 200%;
        opacity: 0;
    }
}

.qs-role-card {
    background: linear-gradient(165deg, rgba(20, 28, 44, 0.92) 0%, rgba(9, 14, 24, 0.96) 100%) !important;
    border-radius: 14px !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.qs-role-card.card-accent-cyan {
    animation: mythicBreatheCyan 4.6s ease-in-out infinite alternate !important;
}
.qs-role-card.card-accent-gold {
    animation: mythicBreatheGold 5.2s ease-in-out infinite alternate 0.8s !important;
}
.qs-role-card.card-accent-purple {
    animation: mythicBreathePurple 4.8s ease-in-out infinite alternate 1.6s !important;
}
.qs-role-card.card-accent-green {
    animation: mythicBreatheGreen 5.4s ease-in-out infinite alternate 2.4s !important;
}

.qs-role-card:hover {
    transform: translateY(-7px) scale(1.02) !important;
    z-index: 5 !important;
    animation-play-state: paused !important;
}

.qs-role-card.card-accent-cyan:hover {
    border-color: #00e5ff !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.82), 0 0 35px rgba(0, 229, 255, 0.45) !important;
}

.qs-role-card.card-accent-gold:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.82), 0 0 35px rgba(255, 215, 0, 0.45) !important;
}

.qs-role-card.card-accent-purple:hover {
    border-color: #c084fc !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.82), 0 0 35px rgba(192, 132, 252, 0.45) !important;
}

.qs-role-card.card-accent-green:hover {
    border-color: #4ade80 !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.82), 0 0 35px rgba(74, 222, 128, 0.45) !important;
}

.qs-rc-icon {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.qs-role-card:hover .qs-rc-icon {
    transform: scale(1.15) translateY(-2px);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.55));
}

/* 3. Holographic Sheen on Role Cards & Step Cards */
.qs-role-card::after,
.qs-step-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -160%;
    width: 90%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 20%, 
        rgba(255, 255, 255, 0.35) 50%, 
        rgba(255, 204, 0, 0.25) 75%, 
        transparent 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 4;
    animation: periodicSheenSweep 9s ease-in-out infinite;
}

.qs-role-card:nth-child(1)::after { animation-delay: 0s; }
.qs-role-card:nth-child(2)::after { animation-delay: 2.2s; }
.qs-role-card:nth-child(3)::after { animation-delay: 4.4s; }
.qs-role-card:nth-child(4)::after { animation-delay: 6.6s; }

.qs-role-card:hover::after,
.qs-step-card:hover::after {
    animation: none !important;
    left: 200% !important;
    transition: left 0.75s ease-in-out !important;
}

/* 4. Progression Step Cards (3 Cards) - Hover Surge */
.qs-step-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease !important;
}

.qs-step-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(255, 204, 0, 0.65) !important;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 204, 0, 0.35) !important;
}

/* 5. Floating Badge & Role Tab Active Glow */
.qs-role-tab {
    transition: all 0.25s ease !important;
}

.qs-role-tab:hover {
    background: rgba(255, 204, 0, 0.15) !important;
    border-color: rgba(255, 204, 0, 0.45) !important;
    color: #ffd700 !important;
    transform: translateY(-2px);
}

.qs-role-tab.active {
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.4) !important;
}

/* 6. Levitating Micro-motion for Role Card & Step Card Icons */
.qs-rc-icon,
.qs-sc-icon {
    display: inline-flex !important;
    animation: iconFloatAnim 3.6s ease-in-out infinite !important;
}

/* ==============================================================================
   SERVER VOTING & REWARDS STYLES
   ============================================================================== */
.vote-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.vote-stat-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(12px);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.vote-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 204, 0, 0.3);
}

.vote-stat-card .stat-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.vote-stat-card .stat-info {
    display: flex;
    flex-direction: column;
}

.vote-stat-card .stat-num {
    font-size: 22px;
    font-weight: 900;
    font-family: var(--font-heading, inherit);
    color: #fff;
    line-height: 1.2;
}

.vote-stat-card.highlight-gold .stat-num {
    color: #ffcc00;
    text-shadow: 0 0 12px rgba(255, 204, 0, 0.4);
}

.vote-stat-card.highlight-purple .stat-num {
    color: #c084fc;
    text-shadow: 0 0 12px rgba(192, 132, 252, 0.4);
}

.vote-stat-card .stat-label {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.vote-guide-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px dashed rgba(255, 204, 0, 0.25);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 24px;
    gap: 12px;
}

.guide-step {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.guide-step .step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffcc00;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guide-step .step-desc {
    display: flex;
    flex-direction: column;
}

.guide-step .step-desc strong {
    font-size: 13px;
    color: #f8fafc;
}

.guide-step .step-desc span {
    font-size: 11px;
    color: #94a3b8;
}

.guide-arrow {
    color: rgba(255, 204, 0, 0.4);
    font-size: 16px;
    flex-shrink: 0;
}

.vote-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
}

.vote-site-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vote-site-card.can-vote {
    border-color: rgba(0, 255, 136, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 136, 0.08);
}

.vote-site-card.can-vote:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 255, 136, 0.6);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 255, 136, 0.2);
}

.vote-site-card.on-cooldown {
    border-color: rgba(255, 255, 255, 0.06);
    opacity: 0.85;
}

.vote-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.vote-site-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vote-site-icon-box .site-icon-emoji {
    font-size: 24px;
}

.vote-site-title-box {
    flex: 1;
    min-width: 0;
}

.vote-site-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.vote-site-name {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.vote-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.vote-status-badge.ready {
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid rgba(0, 255, 136, 0.4);
    color: #00ff88;
}

.vote-status-badge.cooldown {
    background: rgba(255, 170, 0, 0.12);
    border: 1px solid rgba(255, 170, 0, 0.3);
    color: #ffaa00;
}

.vote-site-desc {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

.vote-rewards-pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vote-reward-pill {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.vote-reward-pill.coins {
    background: rgba(255, 204, 0, 0.15);
    border: 1px solid rgba(255, 204, 0, 0.35);
    color: #ffcc00;
}

.vote-reward-pill.bonus {
    background: rgba(192, 132, 252, 0.15);
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #d8b4fe;
}

.vote-reward-pill.cd {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
}

.vote-card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    flex-wrap: wrap;
}

.btn-vote-link {
    flex: 1;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #38bdf8;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-vote-link:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.5);
    color: #7dd3fc;
    transform: translateY(-2px);
}

.btn-vote-claim {
    flex: 1.2;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.btn-vote-claim.ready {
    background: linear-gradient(135deg, #00ff88 0%, #00b460 100%);
    color: #042413;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
}

.btn-vote-claim.ready:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.45);
}

.btn-vote-claim.cooldown {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #64748b;
    cursor: not-allowed;
}

.pulse-highlight {
    animation: votePulseAnim 1.5s infinite;
}

@keyframes votePulseAnim {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}

@media (max-width: 768px) {
    .vote-guide-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .guide-arrow {
        display: none;
    }
    .vote-sites-grid {
        grid-template-columns: 1fr;
    }
}

/* Anti-Cheat Step 1 / Step 2 State Styling */
.btn-vote-link.primary-action {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(2, 132, 199, 0.45) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
    color: #38bdf8 !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2);
}

.btn-vote-link.primary-action:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.45) 0%, rgba(2, 132, 199, 0.65) 100%) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

.btn-vote-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.05);
    color: #64748b;
    pointer-events: none;
}

.btn-vote-claim.locked {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px dashed rgba(255, 255, 255, 0.15) !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-vote-claim.waiting {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2) 0%, rgba(202, 138, 4, 0.3) 100%) !important;
    border: 1px solid rgba(234, 179, 8, 0.5) !important;
    color: #facc15 !important;
    cursor: wait !important;
    animation: waitPulse 1.8s infinite;
}

@keyframes waitPulse {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 0.65; }
}

.vote-status-badge.step1 {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
}

.vote-status-badge.verifying {
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: #facc15;
}

.vote-status-badge.ready-claim {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #4ade80;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.vote-reward-pill.anticheat {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
}

.vote-site-card.ready-glow {
    border-color: rgba(34, 197, 94, 0.65) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(34, 197, 94, 0.3) !important;
}

.pulse-action {
    animation: claimReadyPulse 1.6s infinite !important;
}

@keyframes claimReadyPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.vote-anti-cheat-alert {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 12px;
    padding: 12px 18px;
    color: #fca5a5;
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ==============================================================================
   PREMIUM SECURITY CENTER STYLES
   ============================================================================== */
.sec-overview-banner {
    background: radial-gradient(circle at 10% 20%, rgba(30, 41, 59, 0.75), rgba(11, 15, 25, 0.95));
    border: 1px solid rgba(240, 178, 50, 0.3);
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.sec-overview-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f0b232, #ffd875, transparent);
}

.sec-overview-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 280px;
}

.sec-shield-avatar {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(240, 178, 50, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(240, 178, 50, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 0 20px rgba(240, 178, 50, 0.2);
    flex-shrink: 0;
}

.sec-overview-meta h4 {
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.sec-overview-meta p {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #94a3b8;
}

.sec-health-bar-wrap {
    width: 240px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.sec-health-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s ease, background 0.4s ease;
}

.sec-badges-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
}

.sec-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #cbd5e1;
}

.sec-badge-item.active {
    color: #4ade80;
}

.sec-badge-item.warning {
    color: #f87171;
}

/* Security Grid: 2 Columns */
.sec-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
    margin-bottom: 24px;
}

.sec-card {
    background: radial-gradient(circle at 50% 0%, rgba(20, 30, 48, 0.75), rgba(9, 14, 25, 0.95));
    border: 1px solid rgba(240, 178, 50, 0.2);
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    position: relative;
}

.sec-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 178, 50, 0.6), transparent);
}

.sec-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.sec-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sec-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(240, 178, 50, 0.1);
    border: 1px solid rgba(240, 178, 50, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.sec-card-title h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
}

.sec-card-title span {
    font-size: 12px;
    color: #8892b0;
}

/* Digits input container */
.sec-digits-box {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0;
}

.sec-digit-input {
    width: 44px;
    height: 52px;
    background: rgba(5, 8, 14, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    font-family: monospace;
    color: #ffd875;
    transition: all 0.2s ease;
    outline: none;
}

.sec-digit-input:focus {
    border-color: #f0b232;
    box-shadow: 0 0 12px rgba(240, 178, 50, 0.4);
    background: rgba(15, 22, 38, 0.95);
}

/* Password strength bar */
.sec-pwd-strength {
    display: flex;
    gap: 5px;
    margin-top: 6px;
    margin-bottom: 12px;
}

.sec-strength-segment {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    transition: background 0.3s ease;
}

/* Security Audit Mini Cards */
.sec-audit-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.sec-audit-mini {
    background: rgba(11, 15, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sec-audit-mini .mini-ico {
    font-size: 22px;
    line-height: 1;
}

.sec-audit-mini h5 {
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
}

.sec-audit-mini p {
    margin: 0;
    font-size: 11.5px;
    color: #8892b0;
    line-height: 1.4;
}

/* ==============================================================================
   MOBILE & SMARTPHONE ADAPTATION (iOS & Android Ergonomics)
   ============================================================================== */

/* 1. Mobile Menu Hamburger Button */
.btn-mobile-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(18, 25, 40, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    z-index: 1001;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.btn-mobile-menu:hover,
.btn-mobile-menu:active {
    background: rgba(30, 41, 60, 0.95);
    border-color: rgba(255, 204, 0, 0.5);
}

.burger-bar {
    width: 18px;
    height: 2px;
    background: #f1f5f9;
    border-radius: 2px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
}

.btn-mobile-menu.active .burger-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
    background: #fbbf24;
}
.btn-mobile-menu.active .burger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.btn-mobile-menu.active .burger-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
    background: #fbbf24;
}

/* 2. Mobile Drawer Navigation Panel */
.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 5, 10, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 340px);
    background: linear-gradient(180deg, #0e1526 0%, #080c16 100%);
    border-left: 1px solid rgba(255, 204, 0, 0.25);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.9);
    z-index: 10002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-drawer.active {
    transform: translateX(0);
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-drawer-lang-switch {
    height: 32px;
    padding: 2px;
}

.mobile-drawer-lang-switch .lang-opt {
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
}

.mobile-drawer-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mobile-drawer-close:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

.mobile-drawer-actions {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-mobile-cabinet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fbbf24;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
}

.btn-mobile-play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, #ffe066 0%, #d4a017 100%);
    border: 1px solid #fff2a6;
    color: #0b0f19;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.mobile-drawer-nav {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.mobile-nav-group-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    padding: 12px 10px 4px 10px;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
    background: rgba(255, 255, 255, 0.06);
    color: #38bdf8;
    transform: translateX(3px);
}

.mobile-nav-link .mnl-icon {
    font-size: 16px;
    line-height: 1;
    width: 20px;
    text-align: center;
}

.mobile-drawer-footer {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.25);
}

.mobile-realmlist-box {
    background: rgba(15, 23, 42, 0.7);
    border: 1px dashed rgba(255, 204, 0, 0.35);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    cursor: pointer;
}

.mobile-realmlist-box code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #38bdf8;
    font-weight: 700;
}

/* 3. Media Queries for Small Screens & Mobile Phones */
@media (max-width: 900px) {
    .btn-mobile-menu {
        display: flex;
    }
}

@media (max-width: 768px) {
    /* Header layout */
    .top-nav {
        height: 56px;
    }
    .nav-inner {
        padding: 0 12px;
        gap: 8px;
    }
    .nav-right {
        gap: 6px;
    }
    
    /* Realm pill on mobile: compact badge */
    .realm-pill {
        height: 34px;
        padding: 0 10px;
        gap: 6px;
    }
    .realm-pill-chevron,
    .realm-pill-hint {
        display: none;
    }
    .realm-popover {
        width: min(92vw, 300px);
        right: -40px;
    }

    /* Cabinet button on mobile */
    .btn-nav-cabinet {
        height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }

    /* Hero block adjustments */
    .hero-block {
        padding-top: 76px;
        padding-bottom: 36px;
        min-height: auto;
    }
    .hero-crest-badge {
        font-size: 11px;
        padding: 4px 12px;
    }
    .hero-brand-title {
        font-size: clamp(34px, 11vw, 54px);
        letter-spacing: 4px;
    }
    .hero-sub-title {
        font-size: 14px;
        letter-spacing: 3px;
        margin-bottom: 12px;
    }
    .hero-tagline {
        font-size: 13.5px;
        padding: 0 10px;
        margin-bottom: 24px;
    }
    .btn-regal-play {
        padding: 14px 32px;
        font-size: 14px;
        width: 100%;
        max-width: 290px;
    }
    .btn-regal-guide {
        font-size: 12.5px;
    }
    .hero-realm-ticker {
        padding: 6px 14px;
        gap: 10px;
        max-width: 92vw;
        box-sizing: border-box;
    }
    .ticker-status {
        font-size: 10px;
    }
    .ticker-realmlist code {
        font-size: 11px;
    }
    .ticker-copy {
        font-size: 10.5px;
    }

    /* Section padding */
    .section-block {
        padding: 48px 12px;
    }
    .content-container {
        padding: 0 8px;
    }
    .block-title {
        font-size: clamp(22px, 6vw, 32px);
    }
    .section-subtitle {
        font-size: 13px;
        margin-bottom: 24px;
    }

    /* Grid responsiveness */
    .cards-grid,
    .quick-start-grid,
    .features-grid,
    .ladder-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Modals & Dialogs full screen on phone */
    .auth-modal-card {
        padding: 24px 18px;
        margin: 12px;
        max-width: calc(100vw - 24px);
    }
    .cabinet-modal-card {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }
}

@media (max-width: 480px) {
    /* Super compact smartphones (iPhone SE, Galaxy A series, etc.) */
    .top-nav {
        height: 56px;
    }
    .nav-inner {
        padding: 0 10px;
        gap: 6px;
    }
    .brand-logo {
        height: 34px;
        gap: 6px;
    }
    .logo-emblem {
        font-size: 19px;
    }
    .logo-name {
        font-size: 0.95rem;
    }
    .logo-tag {
        font-size: 7.5px;
    }
    .realm-pill {
        height: 34px;
        padding: 0 8px;
    }
    #pill-status-label {
        display: none;
    }
    .lang-opt {
        padding: 0 6px;
        font-size: 10px;
    }
    .lang-switch {
        height: 34px;
        border-radius: 9px;
    }
    .lang-slider,
    .lang-glider {
        border-radius: 7px;
    }
    .btn-nav-cabinet #nav-cabinet-label {
        display: none;
    }
    .btn-nav-cabinet {
        height: 34px;
        padding: 0 8px;
    }
    .btn-mobile-menu {
        width: 34px;
        height: 34px;
    }
    .hero-realm-ticker {
        flex-direction: column;
        gap: 6px;
        border-radius: 16px;
        padding: 8px 14px;
    }
    .ticker-divider {
        display: none;
    }
    .data-table th,
    .data-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* ==============================================================================
   PANTHEON OF THE GODS (БОГИ) RACIAL GEAR & ARTIFACTS ULTRA STYLING
   ============================================================================== */
.shop-cat-btn.highlight-gods {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(168, 85, 247, 0.35)) !important;
    border: 1.5px solid rgba(250, 204, 21, 0.75) !important;
    color: #fef08a !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px;
    box-shadow: 0 0 18px rgba(234, 179, 8, 0.35), inset 0 0 10px rgba(250, 204, 21, 0.2) !important;
    position: relative;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}

.shop-cat-btn.highlight-gods:hover,
.shop-cat-btn.highlight-gods.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.7), rgba(168, 85, 247, 0.75)) !important;
    border-color: #facc15 !important;
    color: #ffffff !important;
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-2px);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

.shop-race-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(250, 204, 21, 0.2);
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.race-filter-label {
    font-size: 12px;
    font-weight: 800;
    color: #facc15;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.race-pill {
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.race-pill:hover {
    background: rgba(250, 204, 21, 0.15);
    border-color: rgba(250, 204, 21, 0.5);
    color: #fff;
    transform: translateY(-1px);
}

.race-pill.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #facc15;
    color: #000;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.donate-card.gods-card {
    position: relative;
    background: linear-gradient(145deg, rgba(28, 22, 10, 0.95), rgba(13, 10, 5, 0.98)) !important;
    border: 1px solid rgba(250, 204, 21, 0.45) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(234, 179, 8, 0.2), inset 0 1px 0 rgba(253, 224, 71, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.donate-card.gods-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(250, 204, 21, 0.9) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85), 0 0 35px rgba(234, 179, 8, 0.45) !important;
}

.donate-card.gods-card .gods-halo {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(250, 204, 21, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.gods-title {
    background: linear-gradient(135deg, #ffffff 0%, #fef08a 40%, #facc15 80%, #f59e0b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}

.item-icon-box.gods-icon-box {
    border: 2px solid #facc15 !important;
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.5) !important;
}

.badge-ilvl.gods-ilvl {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.3), rgba(168, 85, 247, 0.3)) !important;
    border: 1px solid rgba(250, 204, 21, 0.6) !important;
    color: #fef08a !important;
    font-weight: 800 !important;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.3) !important;
}