/* xDREAM Gaming - Dream Coin Web Shop Styles */

:root {
    /* Primary Colors - Ember / signal red */
    --primary-color: #ff6b4a;
    --primary-dark: #db4d2e;
    --primary-light: #ff906f;
    --primary-glow: rgba(255, 107, 74, 0.20);

    /* Secondary Colors - warm gold accent (T7 fire/gold palette; retuned from sky blue) */
    --secondary-color: #ffd700;
    --secondary-dark: #b8860b;
    --secondary-light: #ffe680;
    --secondary-glow: rgba(255, 215, 0, 0.18);

    /* Premium Colors */
    --premium-gold: #ffcf66;
    --premium-gold-dark: #d9a73a;
    --premium-gold-light: #ffe29f;
    --premium-glow: rgba(255, 207, 102, 0.16);

    /* Accent Colors */
    --accent-purple: #8d79ff;
    --accent-purple-glow: rgba(141, 121, 255, 0.16);

    /* Grind Server Colors */
    --grind-warning: #ff6b35;
    --grind-warning-dark: #e55a2b;
    --grind-warning-light: #ff8555;

    /* Status Colors - Neon Gaming Style */
    --success-color: #00ff88;
    --success-glow: rgba(0, 255, 136, 0.30);
    --error-color: #ff0055;
    --error-glow: rgba(255, 0, 85, 0.30);
    --warning-color: #ffaa00;
    --warning-glow: rgba(255, 170, 0, 0.30);
    --info-color: #ff8c00;
    --info-glow: rgba(255, 140, 0, 0.30);

    /* Neutral Colors - deep ink / slate */
    --dark-bg: #08131d;
    --dark-bg-alt: #0d1c28;
    --dark-card: #122432;
    --dark-card-hover: #193142;
    --dark-border: rgba(146, 176, 203, 0.16);
    --dark-border-light: rgba(178, 203, 226, 0.24);
    --light-text: #f5f8fc;
    --muted-text: #a8bfcf;
    --disabled-text: #6b7d90;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    
    /* Shadows - Enhanced */
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.14);
    --shadow-md: 0 16px 34px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.28);
    --shadow-xl: 0 34px 72px rgba(0, 0, 0, 0.34);
    --shadow-glow-primary: 0 0 18px var(--primary-glow);
    --shadow-glow-secondary: 0 0 18px var(--secondary-glow);
    --shadow-glow-premium: 0 0 18px var(--premium-glow);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-spring: 0.4s cubic-bezier(0.68, -0.25, 0.265, 1.55);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background:
        radial-gradient(circle at top, rgba(255, 215, 0, 0.06), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255, 107, 74, 0.08), transparent 24%),
        linear-gradient(180deg, #0a0000 0%, #140505 48%, #1a0808 100%);
    background-attachment: fixed;
    color: var(--light-text) !important;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    overflow-x: hidden;
}

.btn,
button,
.site-bottom-nav-item,
.site-nav-backdrop,
.floating-cart,
.form-control,
.form-select,
input,
select,
textarea,
.command-btn,
.cart-trigger-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
    font-size: 16px;
}

.site-bg-stack {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
}

.site-bg-layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(6, 15, 24, 0.9);
    z-index: 1;
    opacity: 0;
    transition: opacity 2.6s ease-in-out;
    filter: saturate(92%) contrast(96%) brightness(0.42);
}

.site-bg-layer.is-active {
    opacity: 1;
}

.site-bg-overlay {
    background:
        linear-gradient(160deg, rgba(5, 15, 23, 0.82), rgba(8, 16, 27, 0.72) 42%, rgba(10, 17, 26, 0.84)),
        radial-gradient(circle at top left, rgba(255, 215, 0, 0.06), transparent 34%),
        radial-gradient(circle at bottom right, rgba(255, 107, 74, 0.07), transparent 32%);
    opacity: 0.72;
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.site-bg-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.08), transparent 35%);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0.35;
    z-index: 2;
}

/* Typography System - Gaming Style Headers */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.card-title {
    font-family: 'Rajdhani', 'Inter', sans-serif !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

h1, .h1 {
    font-size: 3.5rem; /* 56px */
    font-weight: 800;
}

h2, .h2 {
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
}

h3, .h3 {
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
}

h4, .h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
}

h5, .h5 {
    font-size: 1rem; /* 16px */
    font-weight: 600;
}

h6, .h6 {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
}

/* Uppercase text styling */
.text-uppercase,
.btn,
.nav-link-modern {
    letter-spacing: 0.05em;
}

/* Gradient text effect for special headers */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-premium {
    background: linear-gradient(135deg, var(--premium-gold) 0%, var(--premium-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive typography */
@media (max-width: 768px) {
    h1, .h1 { font-size: 2.5rem; }
    h2, .h2 { font-size: 2rem; }
    h3, .h3 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.25rem; }
}

/* Modern Card System with Depth */
.card {
    background:
        linear-gradient(160deg, rgba(18, 36, 50, 0.9) 0%, rgba(13, 28, 40, 0.9) 100%) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow:
        var(--shadow-md),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
    color: var(--light-text) !important;
    transition: all var(--transition-normal) !important;
    overflow: clip;
    position: relative;
}

/* Shine effect overlay — disabled for cleaner look */
.card::before {
    content: none;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow:
        var(--shadow-lg),
        0 16px 40px rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(255, 215, 0, 0.20) !important;
}

/* Card variants */
.card-premium {
    border-color: var(--premium-gold) !important;
    box-shadow:
        var(--shadow-md),
        0 0 14px var(--premium-glow) !important;
}

.card-premium:hover {
    box-shadow:
        var(--shadow-xl),
        0 0 24px var(--premium-glow) !important;
}

.card-featured {
    border-color: var(--primary-color) !important;
    box-shadow:
        var(--shadow-md),
        0 0 14px var(--primary-glow) !important;
}

.card-featured:hover {
    box-shadow:
        var(--shadow-xl),
        0 0 24px var(--primary-glow) !important;
}

/* Card body */
.card-body {
    color: var(--light-text) !important;
    padding: var(--spacing-xl) !important;
    position: relative;
    z-index: 1;
}

.card-title {
    color: var(--light-text) !important;
    margin-bottom: var(--spacing-md);
}

.card-text {
    color: var(--muted-text) !important;
}

/* ========================================
   ITEM CARD ENHANCEMENTS
   ======================================== */

/* Item card with rarity system */
.item-card {
    position: relative;
    transition: all var(--transition-normal);
}

.item-card img {
    transition: transform var(--transition-normal);
}

.item-card:hover img {
    transform: scale(1.1);
}

/* Rarity-based borders and glows */
.item-card.rarity-common {
    border-color: #9d9d9d !important;
}

.item-card.rarity-common:hover {
    box-shadow:
        var(--shadow-xl),
        0 0 20px rgba(157, 157, 157, 0.2) !important;
}

.item-card.rarity-uncommon {
    border-color: #1eff00 !important;
}

.item-card.rarity-uncommon:hover {
    box-shadow:
        var(--shadow-xl),
        0 0 20px rgba(30, 255, 0, 0.25) !important;
}

.item-card.rarity-rare {
    border-color: #0070dd !important;
}

.item-card.rarity-rare:hover {
    box-shadow:
        var(--shadow-xl),
        0 0 20px rgba(0, 112, 221, 0.3) !important;
}

.item-card.rarity-epic {
    border-color: #a335ee !important;
}

.item-card.rarity-epic:hover {
    box-shadow:
        var(--shadow-xl),
        0 0 22px rgba(163, 53, 238, 0.35) !important;
}

.item-card.rarity-legendary {
    border-color: #ff8000 !important;
}

.item-card.rarity-legendary:hover {
    box-shadow:
        var(--shadow-xl),
        0 0 26px rgba(255, 128, 0, 0.4) !important;
}

/* Item badges */
.item-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
    animation: pulse 3.5s ease-in-out infinite;
}

.item-badge.badge-new {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: 0 0 15px var(--primary-glow);
}

.item-badge.badge-popular {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    color: var(--dark-bg);
    box-shadow: 0 0 15px var(--secondary-glow);
}

.item-badge.badge-sale {
    background: linear-gradient(135deg, #ff0055, #cc0044);
    color: white;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.5);
}

/* Price display enhancement */
.item-price {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    text-shadow: 0 0 6px var(--secondary-glow);
}

.item-price-old {
    text-decoration: line-through;
    color: var(--muted-text);
    font-size: 1rem;
    margin-right: 8px;
}

.item-savings {
    display: inline-block;
    padding: 2px 8px;
    background: var(--success-color);
    color: var(--dark-bg);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 8px;
}

.text-muted {
    color: var(--muted-text) !important;
}

.lead {
    color: var(--muted-text) !important;
}

.display-4 {
    color: var(--light-text) !important;
}

/* Modern Two-Tier Navigation with Glassmorphism */
.navbar {
    background: rgba(8, 19, 29, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(158, 179, 199, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(20px)) {
    .navbar {
        background: rgba(10, 10, 20, 0.95) !important;
    }
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--dynamic-margin);
    width: 100%;
}

/* Top Tier: Brand + Server Status + User */
.nav-top-tier {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xs) 0;
    gap: var(--spacing-lg);
}

.nav-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.nav-brand-link:hover {
    transform: scale(1.05);
}

/* Logo as watermark background */
.nav-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 750px; /* 5x the original 150px */
    width: auto;
    opacity: 0.08; /* Subtle watermark effect */
    z-index: -1; /* Behind all content */
    pointer-events: none; /* Don't interfere with clicks */
    filter: grayscale(30%) brightness(0.7);
}

/* Bottom Tier: Main Navigation Links */
.nav-bottom-tier {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--spacing-xs) 0;
}

.nav-links-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* User Profile Dropdown */
.user-profile-dropdown {
    position: relative;
}

.user-profile-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: var(--light-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
    font-size: 0.9rem;
}

.user-profile-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.user-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
}

.user-info-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.user-name-compact {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.balance-inline-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.balance-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.balance-inline.dream-coins {
    background: rgba(255, 204, 0, 0.15);
    color: #ffdd33;
}

.balance-inline.dream-coins:hover {
    background: rgba(255, 204, 0, 0.25);
    border-color: rgba(255, 204, 0, 0.3);
    transform: translateY(-1px);
}

.balance-inline.premium-coins {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
}

.balance-inline.premium-coins:hover {
    background: rgba(255, 215, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-1px);
}

.balance-icon-small {
    font-size: 0.85rem;
    line-height: 1;
}

.balance-value {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.dropdown-arrow {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.user-profile-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    right: 0;
    min-width: 280px;
    background: rgba(20, 20, 30, 0.95) !important;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 1001;
    overflow: hidden;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(30px)) {
    .user-dropdown-menu {
        background: rgba(20, 20, 30, 0.98) !important;
    }
}

.user-profile-dropdown.active .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 51, 51, 0.1), rgba(255, 204, 0, 0.1));
    border-bottom: 1px solid var(--dark-border);
}

.user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
}

.user-dropdown-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.user-dropdown-name {
    font-weight: 600;
    color: var(--light-text);
    font-size: 1rem;
}

.user-dropdown-id {
    font-size: 0.8rem;
    color: var(--muted-text);
}

/* Player Level & XP Progress in User Dropdown */
.user-level-info {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.level-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.level-badge {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--dark-bg);
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.level-multiplier {
    font-size: 0.75rem;
    color: var(--secondary-color);
    font-weight: 600;
}

.user-dropdown-balance {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.balance-item-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.balance-item-compact.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.balance-item-compact.clickable:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.balance-item-compact.premium {
    border-color: var(--premium-gold);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
}

.balance-item-compact.premium.clickable:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border-color: var(--premium-gold);
}

.balance-item-compact .balance-icon {
    font-size: 1.5rem;
}

.balance-item-compact .balance-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.balance-item-compact .balance-amount {
    font-weight: 700;
    color: var(--light-text);
    font-size: 1.1rem;
}

.balance-item-compact .balance-label {
    font-size: 0.75rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.balance-link-icon {
    font-size: 0.85rem;
    color: var(--muted-text);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.balance-item-compact.clickable:hover .balance-link-icon {
    opacity: 1;
}

/* Boss Statistics Section in User Dropdown */
.boss-stats-section {
    padding: var(--spacing-md);
    border-top: 1px solid var(--dark-border);
    background: rgba(0, 0, 0, 0.15);
}

.boss-stats-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--muted-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.boss-stats-header i {
    color: var(--primary-color);
}

.boss-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.boss-stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.boss-stat-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
}

.boss-stat-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.boss-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.boss-stat-value {
    font-weight: 700;
    color: var(--light-text);
    font-size: 1rem;
}

.boss-stat-label {
    font-size: 0.7rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.boss-stats-cta {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(0, 255, 255, 0.05);
    border-radius: var(--radius-md);
    border: 1px dashed rgba(0, 255, 255, 0.2);
    text-align: center;
}

.boss-stats-cta p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted-text);
}

/* Boss Stats Total Display */
.boss-stats-total {
    margin-bottom: var(--spacing-sm);
}

.boss-stat-item-large {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 215, 0, 0.2);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.boss-stat-item-large:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.1));
    border-color: rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.boss-stat-item-large .boss-stat-icon {
    font-size: 2rem;
}

.boss-stat-item-large .boss-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
}

/* Boss Difficulty Breakdown */
.boss-difficulty-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.boss-difficulty-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.boss-difficulty-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.boss-difficulty-item.easy {
    border-color: rgba(0, 255, 0, 0.2);
}

.boss-difficulty-item.easy:hover {
    background: rgba(0, 255, 0, 0.08);
    border-color: rgba(0, 255, 0, 0.4);
    box-shadow: 0 4px 8px rgba(0, 255, 0, 0.2);
}

.boss-difficulty-item.medium {
    border-color: rgba(255, 255, 0, 0.2);
}

.boss-difficulty-item.medium:hover {
    background: rgba(255, 255, 0, 0.08);
    border-color: rgba(255, 255, 0, 0.4);
    box-shadow: 0 4px 8px rgba(255, 255, 0, 0.2);
}

.boss-difficulty-item.hard {
    border-color: rgba(255, 0, 0, 0.2);
}

.boss-difficulty-item.hard:hover {
    background: rgba(255, 0, 0, 0.08);
    border-color: rgba(255, 0, 0, 0.4);
    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.2);
}

.difficulty-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-text);
}

.boss-difficulty-item.easy .difficulty-badge {
    color: #00ff00;
}

.boss-difficulty-item.medium .difficulty-badge {
    color: #ffff00;
}

.boss-difficulty-item.hard .difficulty-badge {
    color: #ff0000;
}

.difficulty-count {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light-text);
}

/* Mobile Balance Display - Always Visible on Mobile */
.mobile-balance-display {
    display: none; /* Hidden by default on desktop */
    align-items: center;
    gap: var(--spacing-xs);
}

.mobile-balance-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.mobile-balance-item.dream-coins {
    background: rgba(255, 204, 0, 0.2);
    color: #ffdd33;
    border-color: rgba(255, 204, 0, 0.3);
}

.mobile-balance-item.dream-coins:hover {
    background: rgba(255, 204, 0, 0.3);
    border-color: rgba(255, 204, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 204, 0, 0.3);
}

.mobile-balance-item .balance-icon-small {
    font-size: 1rem;
    line-height: 1;
}

.mobile-balance-item .balance-value {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Login CTA Button */
.nav-login-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-lg);
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(255, 51, 51, 0.2);
}

.nav-login-cta:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    box-shadow: 0 4px 16px rgba(255, 51, 51, 0.4);
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

/* Modern Navigation Links - Redesigned */
.nav-link-modern {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--light-text);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(158, 179, 199, 0.08);
    position: relative;
    overflow: hidden;
}

.nav-link-modern i {
    font-size: 1rem;
}

.nav-link-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.4s ease;
}

.nav-link-modern:hover::before {
    left: 100%;
}

.nav-link-modern:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(158, 179, 199, 0.16);
    transform: translateY(-1px);
    color: white;
    text-decoration: none;
}

.nav-link-modern.active {
    background: linear-gradient(135deg, rgba(255, 107, 74, 0.9), rgba(219, 77, 46, 0.92));
    border-color: rgba(255, 144, 111, 0.42);
    color: white;
    box-shadow: 0 16px 30px rgba(255, 107, 74, 0.22);
}

/* Animated underline for active nav links */
.nav-link-modern.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
    animation: glowPulse 3s ease-in-out infinite;
}

/* Shop Button - Red Gradient */
.nav-link-modern.shop-btn {
    background: linear-gradient(135deg, var(--primary-color), #f27a2f);
    border-color: rgba(255, 144, 111, 0.42);
    color: white;
}

.nav-link-modern.shop-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    box-shadow: 0 4px 12px rgba(255, 51, 51, 0.3);
    transform: translateY(-2px);
}

/* Casino Button - Gold/Purple Gradient */
.nav-link-modern.casino-btn {
    background: linear-gradient(135deg, #ffcf66, #f59e0b);
    border-color: rgba(255, 207, 102, 0.42);
    color: #18212b;
    font-weight: 600;
}

.nav-link-modern.casino-btn:hover {
    background: linear-gradient(135deg, #FFA500, #FFD700);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
}

/* Who's That Pal Button - Yellow Gradient */
.nav-link-modern.wtp-btn {
    background: linear-gradient(135deg, #ffd700, #f0a500);
    border-color: rgba(255, 215, 0, 0.4);
    color: #08131d;
    font-weight: 600;
}

.nav-link-modern.wtp-btn:hover {
    background: linear-gradient(135deg, #f0a500, #ffd700);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
    color: #08131d;
}

/* Services Button - Yellow Gradient */
.nav-link-modern.services-btn {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(255, 215, 0, 0.08));
    border-color: rgba(255, 215, 0, 0.28);
    color: var(--light-text);
}

.nav-link-modern.services-btn:hover {
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
    transform: translateY(-2px);
}

/* Currency Button - Yellow Gradient */
.nav-link-modern.currency-btn {
    background: linear-gradient(135deg, rgba(255, 207, 102, 0.2), rgba(255, 207, 102, 0.08));
    border-color: rgba(255, 207, 102, 0.34);
    color: var(--light-text);
    cursor: pointer;
}

.nav-link-modern.currency-btn:hover {
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
    transform: translateY(-2px);
}

/* Auction Button - Purple Gradient for distinction */
.nav-link-modern.auction-btn {
    background: linear-gradient(135deg, rgba(141, 121, 255, 0.88), rgba(95, 81, 201, 0.94));
    border-color: rgba(141, 121, 255, 0.42);
    color: white;
    font-weight: 600;
}

.nav-link-modern.auction-btn:hover {
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
    transform: translateY(-2px);
}

/* Discord Button - Blue Gradient */
.nav-link-modern.discord-btn {
    background: linear-gradient(135deg, #5865F2, #4251cb);
    border-color: rgba(114, 137, 218, 0.4);
    color: white;
}

.nav-link-modern.discord-btn:hover {
    background: linear-gradient(135deg, #4752C4, #5865F2);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
    transform: translateY(-2px);
}

/* Logout Button - Red Theme */
.nav-link-modern.logout-btn {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    color: var(--error-color);
}

.nav-link-modern.logout-btn:hover {
    background: linear-gradient(135deg, var(--error-color), #c82333);
    border-color: #ff6b7a;
    color: white;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    transform: translateY(-2px);
}

.nav-link.shop-btn:hover::after {
    opacity: 1;
}

.nav-link.shop-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
    color: white;
}

/* Custom Services Button - Enhanced Yellow Gradient */
.nav-link.services-btn {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    color: var(--dark-bg);
    font-weight: 700;
    border: 2px solid transparent;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.nav-link.services-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary-light), var(--primary-color));
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.nav-link.services-btn:hover::after {
    opacity: 1;
}

.nav-link.services-btn:hover {
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    border-color: var(--secondary-light);
    color: var(--dark-bg);
}

/* Navigation Dropdown */
.nav-dropdown {
    position: relative;
}

.dropdown-arrow-small {
    font-size: 0.7rem;
    margin-left: var(--spacing-xs);
    transition: transform var(--transition-fast);
}

/* Prominent dropdown arrow for better visibility */
.dropdown-arrow-prominent {
    font-size: 0.85rem;
    margin-left: var(--spacing-xs);
    transition: transform var(--transition-fast);
    color: var(--secondary-color);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.nav-dropdown.active .dropdown-arrow-small,
.nav-dropdown.active .dropdown-arrow-prominent {
    transform: rotate(180deg);
}

/* Dropdown toggle button styling */
.nav-dropdown-toggle {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.nav-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.nav-dropdown.active .nav-dropdown-toggle {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.3);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    left: 0;
    min-width: 180px;
    background: rgba(26, 26, 46, 0.85) !important;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: var(--radius-md);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 1001;
    overflow: hidden;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(30px)) {
    .nav-dropdown-menu {
        background: rgba(26, 26, 46, 0.98) !important;
    }
}

.nav-dropdown.active .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--light-text);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 500;
    font-size: 0.9rem;
}

.nav-dropdown-item:last-child {
    border-bottom: none;
}

.nav-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    padding-left: calc(var(--spacing-md) + 4px);
}

.nav-dropdown-item.active {
    background: rgba(0, 255, 255, 0.1);
    color: var(--secondary-color);
    border-left: 3px solid var(--secondary-color);
}

.nav-dropdown-item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Dropdown divider for visual separation */
.nav-dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
    margin: var(--spacing-xs) 0;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    padding: 12px; /* Increased for better touch target */
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 1001; /* Ensure it's above other nav elements */
    min-width: 48px; /* Minimum touch target size */
    min-height: 48px; /* Minimum touch target size */
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking on small screens */
    -webkit-tap-highlight-color: rgba(0, 255, 255, 0.2); /* Visual feedback on tap */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:active,
.mobile-menu-toggle:focus {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.4);
    transform: scale(1.05);
    outline: none;
}

.mobile-menu-toggle.active {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.5);
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: var(--light-text);
    border-radius: 2px;
    transition: all var(--transition-fast);
    pointer-events: none; /* Prevent lines from blocking clicks */
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translateY(9px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translateY(-9px);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* In-Page Currency Purchase Buttons */
.currency-purchase-cta {
    display: inline-block;
    padding: var(--spacing-lg) var(--spacing-xxl);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.currency-purchase-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.currency-purchase-cta:hover::before {
    left: 100%;
}

.currency-purchase-cta.dream-coins {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    color: var(--dark-bg);
}

.currency-purchase-cta.dream-coins:hover {
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl), 0 0 20px rgba(255, 204, 0, 0.4);
    border-color: var(--secondary-light);
    color: var(--dark-bg);
}

.currency-purchase-cta.premium-coins {
    background: linear-gradient(135deg, var(--premium-gold), var(--premium-gold-light));
    color: var(--dark-bg);
}

.currency-purchase-cta.premium-coins:hover {
    background: linear-gradient(135deg, var(--premium-gold-light), var(--premium-gold));
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl), 0 0 20px rgba(255, 215, 0, 0.5);
    border-color: white;
    color: var(--dark-bg);
}

.currency-purchase-wrapper {
    text-align: center;
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    border: 1px solid var(--dark-border);
}

/* Ultra Compact Server Status Badge */
.server-status-badge {
    position: relative;
}

.server-status-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(42, 42, 62, 0.8);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    color: var(--light-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.server-status-toggle:hover {
    background: rgba(42, 42, 62, 1);
    border-color: var(--primary-color);
}

.server-status-toggle i.fa-server {
    color: var(--primary-color);
    font-size: 1rem;
}

.total-players {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    background: var(--success-color);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
}

.status-label {
    font-size: 0.8rem;
    color: var(--muted-text);
}

.dropdown-arrow-tiny {
    font-size: 0.65rem;
    transition: transform var(--transition-fast);
}

.server-status-badge.active .dropdown-arrow-tiny {
    transform: rotate(180deg);
}

/* Server Status Dropdown */
.server-status-dropdown {
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    left: 0;
    min-width: 280px;
    max-width: 350px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 1002;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.server-status-badge.active .server-status-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.server-status-loading {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--muted-text);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.server-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.server-item:last-child {
    border-bottom: none;
}

.server-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.server-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    width: 100%;
}

.server-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.server-name-full {
    font-size: 0.85rem;
    color: var(--light-text);
    font-weight: 600;
}

.server-status-text {
    font-size: 0.7rem;
    color: var(--muted-text);
}

.server-item-players {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.player-count {
    font-size: 0.9rem;
    color: var(--success-color);
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.server-offline .player-count {
    color: var(--error-color);
}

.player-icon {
    font-size: 0.8rem;
    color: var(--muted-text);
}

.server-expand-arrow {
    font-size: 0.7rem;
    color: var(--muted-text);
    transition: transform var(--transition-fast);
    margin-left: var(--spacing-xs);
}

.server-item.expanded .server-expand-arrow {
    transform: rotate(180deg);
}

/* Player List */
.server-players-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(0, 0, 0, 0.2);
}

.server-item.expanded .server-players-list {
    max-height: 500px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.player-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) calc(var(--spacing-md) + var(--spacing-lg));
    transition: background var(--transition-fast);
}

.player-list-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Server Restart Info */
.server-restart-info {
    padding: var(--spacing-xs) var(--spacing-md);
    margin: 0 var(--spacing-md) var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    animation: fadeIn 0.3s ease-in;
}

.server-restart-info i {
    flex-shrink: 0;
    font-size: 0.85rem;
}

.server-restart-info.critical {
    background: rgba(255, 59, 48, 0.15);
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: #ff3b30;
}

.server-restart-info.critical i {
    color: #ff3b30;
    animation: pulse 3s ease-in-out infinite;
}

.server-restart-info.warning {
    background: rgba(255, 149, 0, 0.15);
    border: 1px solid rgba(255, 149, 0, 0.3);
    color: #ff9500;
}

.server-restart-info.warning i {
    color: #ff9500;
}

.server-restart-info.info {
    background: rgba(0, 122, 255, 0.15);
    border: 1px solid rgba(0, 122, 255, 0.3);
    color: #007aff;
}

.server-restart-info.info i {
    color: #007aff;
}

/* ============================================================================
   RAID BOSS STATUS BADGE
   ============================================================================ */

.raid-boss-status-badge {
    position: relative;
}

.raid-boss-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(42, 42, 62, 0.8);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    color: var(--light-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.raid-boss-toggle:hover {
    background: rgba(42, 42, 62, 1);
    border-color: #ff6b6b;
}

.raid-boss-toggle i.fa-dragon {
    color: #ff6b6b;
    font-size: 1rem;
}

.raid-boss-label {
    font-size: 0.8rem;
    color: var(--muted-text);
}

.raid-boss-status-badge.active .dropdown-arrow-tiny {
    transform: rotate(180deg);
}

/* Raid Boss Dropdown */
.raid-boss-dropdown {
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    left: 0;
    min-width: 320px;
    max-width: 400px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 1002;
    overflow: hidden;
    max-height: 500px;
    overflow-y: auto;
}

.raid-boss-status-badge.active .raid-boss-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.raid-boss-loading {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--muted-text);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.raid-boss-empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--muted-text);
}

.raid-boss-empty i {
    font-size: 2rem;
    color: #ff6b6b;
    margin-bottom: var(--spacing-sm);
}

.raid-boss-empty p {
    margin: var(--spacing-xs) 0;
    font-size: 0.9rem;
}

.raid-boss-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-fast);
}

.raid-boss-item:last-child {
    border-bottom: none;
}

.raid-boss-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.raid-boss-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.raid-boss-server {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--light-text);
}

.raid-boss-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.raid-boss-status-badge.active {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.raid-boss-status-badge.defeated {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

.raid-boss-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.boss-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--light-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.boss-level {
    font-size: 0.8rem;
    color: var(--muted-text);
    font-weight: 400;
}

.boss-info-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--muted-text);
}

.boss-info-row i {
    color: var(--primary-color);
}

.boss-rewards {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--muted-text);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.reward-amount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--success-color);
    font-weight: 600;
}

.raid-boss-footer {
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.next-spawn-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--light-text);
}

.next-spawn-timer i {
    color: var(--primary-color);
}

.countdown {
    font-weight: 600;
    color: var(--primary-color);
}

/* Boss Restart Warning Boxes */
.boss-restart-warning {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    animation: fadeIn 0.3s ease-in;
}

.boss-restart-warning i {
    flex-shrink: 0;
}

.boss-restart-warning.critical {
    background: rgba(255, 59, 48, 0.15);
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: #ff3b30;
}

.boss-restart-warning.critical i {
    color: #ff3b30;
    animation: pulse 3s ease-in-out infinite;
}

.boss-restart-warning.warning {
    background: rgba(255, 149, 0, 0.15);
    border: 1px solid rgba(255, 149, 0, 0.3);
    color: #ff9500;
}

.boss-restart-warning.warning i {
    color: #ff9500;
}

.boss-restart-warning.info {
    background: rgba(0, 122, 255, 0.15);
    border: 1px solid rgba(0, 122, 255, 0.3);
    color: #007aff;
}

.boss-restart-warning.info i {
    color: #007aff;
}

/* Time to Kill Display */
.boss-info-row.time-to-kill {
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: rgba(0, 122, 255, 0.1);
    border: 1px solid rgba(0, 122, 255, 0.2);
}

.boss-info-row.time-to-kill.warning {
    background: rgba(255, 149, 0, 0.1);
    border-color: rgba(255, 149, 0, 0.2);
    color: #ff9500;
}

.boss-info-row.time-to-kill.critical {
    background: rgba(255, 59, 48, 0.1);
    border-color: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}

.boss-info-row.time-to-kill.critical i {
    animation: pulse 3s ease-in-out infinite;
}

/* Next Spawn Section */
.next-spawn-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.next-spawn-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--light-text);
}

.next-spawn-timer strong {
    font-weight: 600;
}

/* Spawn Timing Info and Warnings */
.spawn-timing-info,
.spawn-timing-warning {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    text-align: center;
}

.spawn-timing-info {
    background: rgba(0, 122, 255, 0.1);
    border: 1px solid rgba(0, 122, 255, 0.2);
    color: #007aff;
}

.spawn-timing-warning.warning {
    background: rgba(255, 149, 0, 0.15);
    border: 1px solid rgba(255, 149, 0, 0.3);
    color: #ff9500;
}

.spawn-timing-warning.critical {
    background: rgba(255, 59, 48, 0.15);
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: #ff3b30;
}

.spawn-timing-warning.critical i {
    animation: pulse 3s ease-in-out infinite;
}

/* Boss Spawn Warning Boxes (for no active bosses section) */
.boss-spawn-warning {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    animation: fadeIn 0.3s ease-in;
}

.boss-spawn-warning i {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.boss-spawn-warning.critical {
    background: rgba(255, 59, 48, 0.2);
    border: 2px solid rgba(255, 59, 48, 0.4);
    color: #ff3b30;
}

.boss-spawn-warning.critical i {
    color: #ff3b30;
    animation: pulse 3s ease-in-out infinite;
}

.boss-spawn-warning.warning {
    background: rgba(255, 149, 0, 0.2);
    border: 2px solid rgba(255, 149, 0, 0.4);
    color: #ff9500;
}

.boss-spawn-warning.warning i {
    color: #ff9500;
}

.boss-spawn-warning.info {
    background: rgba(0, 122, 255, 0.2);
    border: 2px solid rgba(0, 122, 255, 0.4);
    color: #007aff;
}

.boss-spawn-warning.info i {
    color: #007aff;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.88;
        transform: scale(1.03);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   PROGRESSIVE BOSS SYSTEM STYLES
   ============================================================================ */

.boss-progression-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.progression-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    border: 2px solid;
    background: rgba(0, 0, 0, 0.3);
    color: var(--light-text);
    width: fit-content;
}

.progression-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 0.75rem;
    color: var(--muted-text);
}

.progression-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.next-spawn-countdown {
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: rgba(0, 122, 255, 0.1);
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: #007aff;
    text-align: center;
}

/* Idle server status badge */
.raid-boss-status-badge.idle {
    background: rgba(158, 158, 158, 0.2);
    color: #9e9e9e;
}

.raid-boss-item.idle {
    opacity: 0.85;
}

.raid-boss-item.idle:hover {
    opacity: 1;
}

/* ============================================================================
   VISITOR COUNTER BADGE
   ============================================================================ */

.visitor-counter-badge {
    display: flex;
    align-items: center;
    gap: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(42, 42, 62, 0.8);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    color: var(--light-text);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.visitor-counter-badge:hover {
    background: rgba(42, 42, 62, 1);
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.visitor-counter-icon {
    color: rgba(0, 255, 255, 0.9);
    font-size: 1rem;
    margin-right: 0.25rem;
}

.visitor-counter-label {
    color: var(--muted-text);
    font-size: 0.8rem;
    margin-right: 0.25rem;
}

.visitor-counter-value {
    color: rgba(0, 255, 255, 0.9);
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 40px;
    text-align: right;
}

/* Desktop: Show full label */
.visitor-counter-label.mobile-label {
    display: none;
}

.visitor-counter-label.desktop-label {
    display: inline;
}

.player-list-icon {
    font-size: 0.7rem;
    color: var(--primary-color);
    width: 16px;
    text-align: center;
}

.player-list-name {
    flex: 1;
    font-size: 0.8rem;
    color: var(--light-text);
    font-weight: 500;
}

.player-list-level {
    font-size: 0.75rem;
    color: var(--muted-text);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* Server Status Tooltip */
.server-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-width: 250px;
    max-width: 350px;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.server-item:hover .server-tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-header {
    font-weight: bold;
    color: var(--light-text);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--dark-border);
}

.tooltip-players {
    max-height: 200px;
    overflow-y: auto;
}

.player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.player-item:last-child {
    border-bottom: none;
}

.player-name {
    color: var(--light-text);
    font-size: 0.9rem;
}

.player-level {
    color: var(--secondary-color);
    font-size: 0.8rem;
    font-weight: bold;
}

.no-players {
    color: var(--muted-text);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-sm);
}

/* Server Status Banner - Compact Modern Design */
.server-banner {
    background: linear-gradient(135deg, var(--info-color) 0%, #c0490f 100%);
    padding: 3px 0;
    text-align: center;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.server-banner.grind-server {
    background: linear-gradient(135deg, var(--grind-warning) 0%, #e55a2b 100%);
    animation: subtle-pulse 3s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.92; }
}

.server-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--dynamic-margin);
}

.server-icon {
    font-size: 1rem;
    opacity: 0.9;
}

.server-text {
    font-weight: 500;
    font-size: 0.85rem;
}

.server-text strong {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.grind-warning {
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
    margin-left: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: warning-glow 3s ease-in-out infinite;
}

@keyframes warning-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    }
}

/* Flash Messages */
.flash-messages {
    position: fixed;
    top: 80px;
    right: var(--spacing-md);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none; /* Allow clicks to pass through container */
}

.flash-messages .flash-message {
    pointer-events: auto; /* Re-enable clicks on individual messages */
}

.flash-message {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    animation: slideIn 0.3s ease;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-user-select: none; /* Safari support */
    user-select: none;
    /* CRITICAL FIX: Default background and text color for untyped messages */
    background: var(--dark-card);
    color: var(--light-text);
}

.flash-message:hover {
    transform: translateX(-5px);
    box-shadow: var(--shadow-xl);
    opacity: 0.95;
}

.flash-message {
    position: relative;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.flash-success {
    background: var(--success-color);
    color: white !important; /* CRITICAL FIX: Force white text */
    font-weight: 500;
}

.flash-error {
    background: var(--error-color);
    color: white !important; /* CRITICAL FIX: Force white text */
    font-weight: 500;
}

.flash-warning {
    background: var(--warning-color);
    color: #000000 !important; /* CRITICAL FIX: Force black text for yellow background */
    font-weight: 600; /* Increased font weight for better visibility */
}

.flash-info {
    background: var(--info-color);
    color: white !important; /* CRITICAL FIX: Force white text */
    font-weight: 500;
}

.flash-icon {
    font-size: 1.2rem;
    /* CRITICAL FIX: Ensure icon inherits text color */
    color: inherit;
}

.flash-text {
    flex: 1;
    font-weight: 500;
    /* CRITICAL FIX: Ensure text inherits color from parent */
    color: inherit;
}

.flash-close {
    background: none;
    border: none;
    color: inherit !important; /* CRITICAL FIX: Force inherit color from parent */
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.flash-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* CRITICAL FIX: Ensure warning flash close button is visible on yellow background */
.flash-warning .flash-close {
    color: #000000 !important;
}

.flash-warning .flash-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Alert Styles for Error Messages */
.alert {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.alert-danger {
    background-color: var(--error-color);
    color: white;
    border-color: #b52d3a;
}

.alert .btn-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.alert .btn-close:hover {
    opacity: 1;
}

.flash-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.flash-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Main Content */
.main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: calc(var(--dynamic-padding) + 0.35rem) var(--dynamic-margin);
    min-height: calc(100vh - 200px);
}

/* Casino game pages: strip .main-content padding so game viewport calc is accurate */
.main-content:has(.casino-layout),
.main-content:has(.fb-layout) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION ALIGNMENT FIX
   Ensures hero sections align perfectly with main content
   ═══════════════════════════════════════════════════════════════════ */

/* Enhanced Hero Section with Animated Background */
.hero-section {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(7, 18, 28, 0.78), rgba(13, 28, 40, 0.7) 52%, rgba(11, 23, 34, 0.82)),
        radial-gradient(circle at top left, rgba(255, 215, 0, 0.10), transparent 30%),
        radial-gradient(circle at bottom right, rgba(255, 107, 74, 0.12), transparent 28%);
}

/* Animated gradient background */
.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at center,
        rgba(255, 107, 74, 0.08) 0%,
        transparent 50%
    ),
    radial-gradient(
        circle at 80% 20%,
        rgba(255, 215, 0, 0.07) 0%,
        transparent 50%
    );
    animation: float 20s ease-in-out infinite;
    pointer-events: none;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem var(--dynamic-margin);
    position: relative;
    z-index: 2;
}

/* Hero logo with glow animation */
.hero-logo {
    animation: fadeInUp 0.8s ease-out, glow 3s ease-in-out infinite;
}

/* Hero title styling */
.hero-title {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Hero subtitle styling */
.hero-subtitle {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Modern Gaming Button System */
.btn {
    font-family: 'Rajdhani', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-weight: 700;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 14px 32px;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
}

/* Primary button - Magenta gradient */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #f27a2f 100%);
    border-color: var(--primary-color);
    color: white;
    box-shadow:
        var(--shadow-md),
        0 0 12px var(--primary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--shadow-lg),
        0 0 18px var(--primary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: var(--primary-light);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    color: white;
    text-decoration: none;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow:
        var(--shadow-sm),
        0 0 10px var(--primary-glow);
}

/* Secondary button - Cyan gradient */
.btn-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    border-color: var(--secondary-color);
    color: var(--dark-bg);
    box-shadow:
        var(--shadow-md),
        0 0 12px var(--secondary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--shadow-lg),
        0 0 18px var(--secondary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: var(--secondary-light);
    color: var(--dark-bg);
    text-decoration: none;
}

/* Success button - Neon green */
.btn-success {
    background: linear-gradient(135deg, var(--success-color) 0%, #00cc66 100%);
    border-color: var(--success-color);
    color: var(--dark-bg);
    box-shadow:
        var(--shadow-md),
        0 0 12px var(--success-glow);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--shadow-lg),
        0 0 18px var(--success-glow);
    color: var(--dark-bg);
    text-decoration: none;
}

/* Warning button */
.btn-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, #ff8800 100%);
    border-color: var(--warning-color);
    color: var(--dark-bg);
    box-shadow:
        var(--shadow-md),
        0 0 12px var(--warning-glow);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--shadow-lg),
        0 0 18px var(--warning-glow);
    color: var(--dark-bg);
    text-decoration: none;
}

/* Danger button */
.btn-danger {
    background: linear-gradient(135deg, var(--error-color) 0%, #cc0044 100%);
    border-color: var(--error-color);
    color: white;
    box-shadow:
        var(--shadow-md),
        0 0 12px var(--error-glow);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--shadow-lg),
        0 0 18px var(--error-glow);
    color: white;
    text-decoration: none;
}

/* Outline buttons */
.btn-outline-primary {
    background: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 0 20px var(--primary-glow);
}

/* Disabled state */
.btn:disabled,
.btn-disabled {
    background: var(--dark-border) !important;
    border-color: var(--dark-border) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.btn:disabled:hover,
.btn-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Button sizes */
.btn-sm {
    padding: 10px 24px;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 18px 40px;
    font-size: 1.125rem;
}

/* Ripple effect on click */
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::after {
    width: 300px;
    height: 300px;
}

/* Form Controls */
.form-control, .form-select {
    background: var(--dark-card) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--light-text) !important;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    background: var(--dark-card) !important;
    border-color: var(--primary-color) !important;
    color: var(--light-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 51, 51, 0.25) !important;
}

.form-control::placeholder {
    color: var(--muted-text) !important;
}

.form-select option {
    background: var(--dark-card) !important;
    color: var(--light-text) !important;
}

.input-group-text {
    background: var(--dark-card) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--light-text) !important;
}

/* Footer */
.footer {
    background: var(--dark-bg);
    border-top: 2px solid var(--primary-color);
    margin-top: var(--spacing-xxl);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--dynamic-padding) var(--dynamic-margin);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--dynamic-gap);
}

.footer-section h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-section a {
    color: var(--muted-text);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-section a:hover {
    color: var(--primary-color);
}

.footer-support-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-support-section h3 {
    text-align: center;
    width: 100%;
}

.footer-support-section ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0;
    list-style: none;
}

.footer-support-section ul li {
    margin-bottom: 0;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.footer-support-section ul li a {
    display: inline-block;
    text-align: center;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-md);
    text-align: center;
    color: var(--muted-text);
}

.security-notice {
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--success-color);
}

/* Responsive Design */
@media (max-width: 992px) {
    .nav-logo {
        height: 100px;
    }

    .nav-halloween-logo {
        height: 100px;
    }

    .server-status-compact {
        max-width: 400px;
    }

    .user-name-compact {
        max-width: 80px;
    }

    .balance-inline-group {
        display: none; /* Hide inline balances on tablets */
    }

    /* Show mobile balance display on tablets and smaller */
    .mobile-balance-display {
        display: flex;
    }

    .nav-links-group {
        gap: var(--spacing-xs);
    }

    .nav-link-modern {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.85rem;
    }

    .nav-link-modern span {
        display: none;
    }

    .nav-link-modern i {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    /* Reduce logo size significantly on mobile */
    .nav-logo {
        height: 60px;
    }

    .nav-halloween-logo {
        height: 60px;
    }

    /* Optimize nav-top-tier for mobile */
    .nav-top-tier {
        padding: 8px 0;
        position: relative;
        z-index: 1002;
        gap: 8px; /* Reduce gap between elements */
        flex-wrap: nowrap; /* Prevent wrapping */
    }

    /* Ensure nav-brand doesn't take too much space */
    .nav-brand {
        flex-shrink: 1;
        min-width: 0;
    }

    /* Show mobile menu toggle with high priority */
    .mobile-menu-toggle {
        display: flex !important;
        order: 999;
        flex-shrink: 0; /* Never shrink hamburger */
        margin-left: auto; /* Push to right side */
    }

    /* Hide server status on mobile */
    .server-status-badge {
        display: none;
    }

    /* Hide raid boss status on mobile */
    .raid-boss-status-badge {
        display: none;
    }

    /* Visitor counter - show abbreviated version on mobile */
    .visitor-counter-badge {
        padding: 6px 10px;
        font-size: 0.75rem;
        gap: 0;
    }

    .visitor-counter-icon {
        font-size: 0.9rem;
        margin-right: 0.25rem;
    }

    .visitor-counter-label.desktop-label {
        display: none;
    }

    .visitor-counter-label.mobile-label {
        display: inline;
        font-size: 0.75rem;
        margin-right: 0.25rem;
    }

    .visitor-counter-value {
        font-size: 0.8rem;
        min-width: 30px;
    }

    /* Hide user name on mobile */
    .user-name-compact {
        display: none;
    }

    /* Show mobile balance display */
    .mobile-balance-display {
        display: flex;
        flex-shrink: 0; /* Don't shrink balance */
    }

    /* User profile dropdown - reduce size on mobile */
    .user-profile-dropdown {
        flex-shrink: 0;
    }

    .user-avatar-small {
        width: 32px;
        height: 32px;
    }

    /* Gift box - reduce size */
    .gift-box-container {
        flex-shrink: 0;
    }

    .gift-box-button {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    .gift-box-icon {
        font-size: 1.2rem;
    }

    .gift-box-badge {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    /* Mobile navigation menu */
    .nav-bottom-tier {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(15, 15, 15, 0.98);
        border-top: 1px solid var(--dark-border);
        box-shadow: var(--shadow-xl);
        z-index: 1000; /* Below nav-top-tier */
        max-height: calc(100vh - 120px); /* Prevent overflow */
        overflow-y: auto; /* Allow scrolling if needed */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .nav-bottom-tier.active {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    .nav-links-group {
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .nav-link-modern {
        width: 100%;
        justify-content: flex-start;
        padding: var(--spacing-md);
        min-height: 48px; /* Ensure touch-friendly size */
        display: flex;
        align-items: center;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }

    .nav-link-modern span {
        display: inline;
    }

    .nav-dropdown-menu {
        position: static;
        margin-top: var(--spacing-xs);
        box-shadow: none;
        border: none;
        background: rgba(255, 255, 255, 0.03);
    }

    .nav-dropdown.active .nav-dropdown-menu {
        transform: none;
    }

    .user-dropdown-menu {
        position: fixed;
        top: auto;
        right: var(--spacing-md);
        left: var(--spacing-md);
        width: auto;
        z-index: 1003; /* Above everything else */
    }

    /* Ensure user profile dropdown button is clickable */
    .user-profile-toggle {
        position: relative;
        z-index: 1001;
        min-height: 48px; /* Touch-friendly */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }

    /* Prevent body scroll when mobile menu is open */
    body.mobile-menu-open {
        overflow: hidden;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------------------------
   APPEARANCE PRESERVATION — read this before deleting.

   Everything from `.currency-dropdown.mobile-open` down to `.footer-content`
   below used to sit OUTSIDE the `@media (max-width: 768px)` block: the media
   block above was closed early (an extra `}` right before `@keyframes
   slideDown`), leaving 11 mobile-authored rules emitted at TOP LEVEL, where
   they applied at EVERY width including desktop. CSS has no parse error for
   this, so nothing ever reported it. The media block is re-opened below and
   those 11 rules are now correctly nested.

   Of the 11, five were demonstrably LOAD-BEARING at desktop — the desktop
   layout has looked the way it does only because these mobile declarations
   were leaking. Re-nesting them alone would have silently changed desktop, so
   they are restated here at top level, at the SAME cascade position the leaked
   copies occupied, making the structural fix a pixel-for-pixel no-op.

   The other six were inert at desktop and are NOT restated:
     .currency-dropdown.mobile-open .currency-dropdown-menu, .currency-dropdown-item,
     .server-status-nav, .server-item  -> zero markup/JS usage anywhere in repo
     .server-info                      -> single child in base.html, so
                                          flex-direction/gap change nothing
     .main-content (padding)           -> masked at every width by the later
                                          .main-content padding rules in the
                                          <=480 / 481-768 / 769-1024 / 1025+
                                          media blocks further down this file

   These five are PRESERVED CURRENT BEHAVIOUR, not endorsed design. Adopting
   the originally-intended desktop look (multi-column left-aligned footer,
   right-anchored corner toasts) means deleting this block — do that as its own
   reviewed visual change, not as a side effect of a brace fix.
   --------------------------------------------------------------------------- */

/* Was leaking to desktop: full-bleed toast rail at top: 60px instead of the
   base right-anchored `top: 80px` corner stack. */
.flash-messages {
    right: var(--spacing-sm);
    left: var(--spacing-sm);
    top: 60px;
}

/* Was leaking to desktop: overrides base `min-width: 300px` / `--spacing-md`
   padding. 0.9rem = 14.4px, clears the 13px type floor. */
.flash-message {
    min-width: auto;
    padding: var(--spacing-sm);
    font-size: 0.9rem;
}

/* Was leaking to desktop: base hover nudge is translateX(-5px). */
.flash-message:hover {
    transform: translateX(-2px);
}

/* Was leaking to desktop: min-* beats the base 24px width/height, so the close
   button has always rendered as a 32px touch target at desktop too. */
.flash-close {
    min-width: 2rem;
    min-height: 2rem;
}

/* Was leaking to desktop: the site footer has rendered as ONE centred column at
   every width since the repo baseline, overriding the base
   `repeat(auto-fit, minmax(250px, 1fr))`. t7-theme.css's footer restyle was
   authored against this single-column appearance. */
.footer-content {
    grid-template-columns: 1fr;
    text-align: center;
}

@media (max-width: 768px) {
    .currency-dropdown.mobile-open .currency-dropdown-menu {
        display: block;
    }

    .currency-dropdown-item {
        text-align: center;
    }

    .server-status-nav {
        flex-direction: column;
        gap: var(--spacing-xs);
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }

    .server-item {
        justify-content: space-between;
        width: 100%;
    }

    .server-info {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .flash-messages {
        right: var(--spacing-sm);
        left: var(--spacing-sm);
        top: 60px; /* Adjust for mobile header */
    }

    .flash-message {
        min-width: auto;
        padding: var(--spacing-sm);
        font-size: 0.9rem;
    }

    .flash-message:hover {
        transform: translateX(-2px); /* Reduced movement on mobile */
    }

    .flash-close {
        min-width: 2rem;
        min-height: 2rem; /* Larger touch target on mobile */
    }
    
    .main-content {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Advanced Responsive Design System */

/* Container Query Support for Modern Browsers */
@supports (container-type: inline-size) {
    .responsive-container {
        container-type: inline-size;
    }

    @container (max-width: 600px) {
        .responsive-grid {
            grid-template-columns: 1fr !important;
        }
    }

    @container (min-width: 601px) and (max-width: 900px) {
        .responsive-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    @container (min-width: 901px) {
        .responsive-grid {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        }
    }
}

/* Dynamic Viewport-Based Spacing */
:root {
    /* Base spacing that scales with viewport */
    --dynamic-margin: clamp(0.5rem, 2vw, 2rem);
    --dynamic-padding: clamp(0.75rem, 3vw, 3rem);
    --dynamic-gap: clamp(0.5rem, 1.5vw, 1.5rem);

    /* Container widths that adapt to screen size */
    --container-sm: min(95vw, 600px);
    --container-md: min(90vw, 900px);
    --container-lg: min(90vw, 1600px);
    --container-xl: min(92vw, 1800px);
}

/* Smart Container System */
.smart-container {
    width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--dynamic-margin);
    transition: all 0.3s ease;
    max-width: 100%;
}

.smart-container.sm {
    width: var(--container-sm);
}

.smart-container.md {
    width: var(--container-md);
}

.smart-container.xl {
    width: var(--container-xl);
}

/* Auto-fit Grid System */
.auto-fit-grid {
    display: grid;
    gap: var(--dynamic-gap);
    grid-template-columns: repeat(4, 1fr);
    padding: var(--dynamic-padding);
}

/* Ensure balanced 2x2 layout when wrapping - never 3+1 layout */
@media (max-width: 1000px) and (min-width: 481px) {
    .auto-fit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens - 4 columns in single row */
@media (min-width: 1001px) {
    .auto-fit-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.auto-fit-grid.dense {
    grid-auto-flow: dense;
}

/* Responsive Text Scaling */
.responsive-text {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.6;
}

.responsive-heading {
    font-size: clamp(1.5rem, 4vw, 3rem);
    line-height: 1.2;
}

.responsive-subheading {
    font-size: clamp(1.125rem, 3vw, 2rem);
    line-height: 1.3;
}

/* Breakpoint-Based Responsive Design */
@media (max-width: 480px) {
    :root {
        --dynamic-margin: 0.5rem;
        --dynamic-padding: 1rem;
        --dynamic-gap: 0.5rem;
    }

    .smart-container {
        width: 95vw;
        padding: 0 0.5rem;
    }

    .auto-fit-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem 0.5rem;
        gap: 0.5rem;
    }

    .nav-container {
        padding: 0 0.5rem;
    }

    .main-content {
        padding: 1rem 0.5rem;
    }

    /* Hero section alignment for mobile */
    .hero-content {
        padding: 1rem 0.5rem;
    }

    /* Ensure mobile menu toggle is always visible and clickable */
    .mobile-menu-toggle {
        margin-left: auto; /* Push to the right */
        flex-shrink: 0;
    }

    /* Smaller logo on very small screens */
    .nav-logo {
        height: 70px;
    }

    .nav-halloween-logo {
        height: 70px;
    }

    /* Adjust mobile balance display for small screens */
    .mobile-balance-display {
        font-size: 0.85rem;
    }

    /* Ensure nav links are touch-friendly */
    .nav-link-modern {
        min-height: 52px;
        font-size: 1rem;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --dynamic-margin: 1rem;
        --dynamic-padding: 1.5rem;
        --dynamic-gap: 1rem;
    }

    .smart-container {
        width: 90vw;
        padding: 0 1rem;
    }

    .auto-fit-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 1.5rem 1rem;
    }

    .nav-container {
        padding: 0 1rem;
    }

    .main-content {
        padding: 1.5rem 1rem;
    }

    /* Hero section alignment for tablets */
    .hero-content {
        padding: 1rem 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --dynamic-margin: 1.5rem;
        --dynamic-padding: 2rem;
        --dynamic-gap: 1.25rem;
    }

    .smart-container {
        width: 85vw;
        padding: 0 1.5rem;
    }

    .nav-container {
        padding: 0 1.5rem;
    }

    .main-content {
        padding: 2rem 1.5rem;
    }

    /* Hero section alignment for small desktops */
    .hero-content {
        padding: 1rem 1.5rem;
    }
}

@media (min-width: 1025px) {
    :root {
        --dynamic-margin: 2rem;
        --dynamic-padding: 3rem;
        --dynamic-gap: 1.5rem;
    }

    .smart-container {
        width: 90vw;
        max-width: 1600px;
        padding: 0 2rem;
    }

    .nav-container {
        padding: 0 2rem;
        max-width: 1600px;
    }

    .main-content {
        padding: 3rem 2rem;
        max-width: 1600px;
    }

    /* Hero section alignment for large desktops */
    .hero-content {
        padding: 1rem 2rem;
        max-width: 1200px; /* Match main-content */
    }
}

/* Extra small screens - single column for feature cards */
@media (max-width: 320px) {
    .auto-fit-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
}

/* Floating Cart Icon */
.floating-cart {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 51, 51, 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0.9;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.floating-cart:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 51, 51, 0.6);
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.3);
}

.floating-cart i {
    color: white;
    font-size: 24px;
    transition: transform 0.2s ease;
}

.floating-cart:hover i {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .floating-cart {
        width: 56px;
        height: 56px;
        right: 12px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        z-index: 1100;
    }

    .floating-cart i {
        font-size: 22px;
    }

    .cart-badge {
        width: 21px;
        height: 21px;
        top: -4px;
        right: -4px;
        font-size: 11px;
    }
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--secondary-color);
    color: var(--dark-bg);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: pulse-badge 3.5s infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Enhanced Modal Styles with Glassmorphism */
.modal-content {
    background: rgba(26, 26, 46, 0.85) !important;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(0, 255, 255, 0.08) !important;
}

/* Keep modals above the mobile bottom navigation system */
.modal {
    z-index: 1300 !important;
}

.modal-backdrop {
    z-index: 1290 !important;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(30px)) {
    .modal-content {
        background: rgba(26, 26, 46, 0.98) !important;
    }
}

.modal-header {
    border-bottom: 1px solid rgba(0, 255, 255, 0.2) !important;
    background: linear-gradient(135deg, rgba(255, 0, 128, 0.1), rgba(0, 255, 255, 0.1));
}

.modal-footer {
    border-top: 1px solid rgba(0, 255, 255, 0.2) !important;
}

/* Cart Modal Styles */
.cart-modal-content {
    background: rgba(26, 26, 46, 0.85) !important;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid rgba(0, 255, 255, 0.2) !important;
}

.cart-summary-hidden {
    display: none;
}

.cart-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.cart-btn-hidden {
    display: none;
}

/* Mobile responsive adjustments for floating cart */
@media (max-width: 768px) {
    .floating-cart {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }

    .floating-cart i {
        font-size: 20px;
    }

    .cart-badge {
        width: 20px;
        height: 20px;
        font-size: 10px;
        top: -3px;
        right: -3px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   COMMAND BUTTONS STYLES
   ═══════════════════════════════════════════════════════════════════ */

.user-dropdown-commands {
    padding: var(--spacing-md);
    border-top: 1px solid var(--dark-border);
    background: rgba(0, 0, 0, 0.2);
}

.commands-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--muted-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.commands-header i {
    color: var(--secondary-color);
}

.command-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.command-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 51, 51, 0.1), rgba(255, 204, 0, 0.1));
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    color: var(--light-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    min-height: 56px;
}

.command-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 51, 51, 0.2), rgba(255, 204, 0, 0.2));
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 51, 51, 0.3);
}

.command-btn:active:not(:disabled) {
    transform: translateY(0);
}

.command-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.command-btn.on-cooldown {
    background: linear-gradient(135deg, rgba(128, 128, 128, 0.1), rgba(64, 64, 64, 0.1));
    border-color: var(--dark-border);
}

.command-btn.loading {
    pointer-events: none;
}

.command-btn.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.command-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.command-btn-icon i {
    font-size: 1rem;
    color: var(--secondary-color);
}

.command-btn:hover:not(:disabled) .command-btn-icon {
    background: rgba(255, 255, 255, 0.15);
}

.command-btn.on-cooldown .command-btn-icon i {
    color: var(--disabled-text);
}

.command-btn-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.command-btn-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--light-text);
    white-space: nowrap;
}

.command-btn-desc {
    font-size: 0.72rem;
    color: var(--muted-text);
    font-weight: 400;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}

.command-btn-cooldown {
    font-size: 0.75rem;
    color: var(--muted-text);
    font-weight: 500;
}

.command-btn.on-cooldown .command-btn-cooldown {
    color: var(--warning-color);
}

/* Command execution animations */
.command-btn.executing {
    animation: command-pulse 0.6s ease-out;
}

@keyframes command-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Specific command animations */
.command-btn[data-command="daily"].executing .command-btn-icon {
    animation: daily-flip 0.6s ease-out;
}

@keyframes daily-flip {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
}

.command-btn[data-command="work"].executing .command-btn-icon {
    animation: work-hammer 0.6s ease-out;
}

@keyframes work-hammer {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    75% { transform: rotate(20deg); }
}

.command-btn[data-command="catch"].executing .command-btn-icon {
    animation: catch-throw 0.6s ease-out;
}

@keyframes catch-throw {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-10px) scale(1.1); }
    60% { transform: translateY(5px) scale(0.9); }
    100% { transform: translateY(0) scale(1); }
}

.command-btn[data-command="battle"].executing .command-btn-icon {
    animation: battle-clash 0.6s ease-out;
}

@keyframes battle-clash {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.command-btn[data-command="adventure"].executing .command-btn-icon {
    animation: adventure-unfold 0.6s ease-out;
}

@keyframes adventure-unfold {
    0% { transform: scale(0.8) rotate(-10deg); }
    50% { transform: scale(1.1) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Command Notifications */
.command-notifications {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 400px;
    pointer-events: none;
}

.command-notifications.compact-mode {
    top: 64px;
    right: auto;
    left: 50%;
    bottom: auto;
    width: min(320px, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    transform: translateX(-50%);
    align-items: center;
}

.command-notifications.drawer-mode {
    top: auto;
    right: 18px;
    left: auto;
    bottom: 138px;
    max-width: 340px;
    align-items: flex-end;
    transform: none;
}

.command-notification {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transform: translateX(100%);
    transition: all var(--transition-normal);
    pointer-events: auto;
    width: min(100%, 380px);
}

.command-notification.compact {
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    width: 100%;
    max-width: 320px;
    transform: translateY(10px) scale(0.98);
}

.command-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.command-notification.compact.show {
    transform: translateY(0) scale(1);
}

.command-notification.success {
    border-left: 4px solid var(--success-color);
}

.command-notification.error {
    border-left: 4px solid var(--error-color);
}

.notification-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.command-notification.compact .notification-title {
    font-size: 0.78rem;
    margin-bottom: 2px;
}

.command-notification.compact .notification-message {
    font-size: 0.76rem;
    line-height: 1.3;
}

.command-notification.compact .notification-reward,
.command-notification.compact .notification-xp,
.command-notification.compact .notification-level-info,
.command-notification.compact .notification-levelup,
.command-notification.compact .notification-gift-reminder {
    font-size: 0.72rem;
    margin-top: 4px;
}

.command-notification.compact .notification-levelup {
    padding: 5px 7px;
    border-width: 1px;
}

.command-notification.compact .notification-gift-reminder,
.command-notification.compact .notification-xp {
    padding: 3px 6px;
}

.command-notification.compact .notification-icon {
    font-size: 1.15rem;
    align-self: flex-start;
    margin-top: 1px;
}

.command-notifications.drawer-mode .command-notification.compact {
    max-width: 340px;
}

.notification-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 4px;
}

.notification-message {
    font-size: 0.8125rem;
    color: var(--muted-text);
    line-height: 1.4;
}

.notification-reward {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-top: 4px;
}

/* XP Reward Notification - Blue styling with glow effect */
.notification-xp {
    font-size: 0.9rem;
    font-weight: 700;
    color: #4da6ff;
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(77, 166, 255, 0.15);
    border-radius: 6px;
    border-left: 3px solid #4da6ff;
    display: inline-block;
    animation: xp-glow 2.5s ease-in-out;
    text-shadow: 0 0 8px rgba(77, 166, 255, 0.5);
}

@keyframes xp-glow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(77, 166, 255, 0);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(77, 166, 255, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(77, 166, 255, 0.3);
    }
}

/* Level Info Display - Small level indicator */
.notification-level-info {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4da6ff;
    margin-top: 2px;
    opacity: 0.8;
}

/* Level-Up Notification - Celebration styling */
.notification-levelup {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffd700;
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 140, 0, 0.2) 100%);
    border-radius: 8px;
    border: 2px solid #ffd700;
    display: inline-block;
    animation: levelup-celebration 1s ease-in-out;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

@keyframes levelup-celebration {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-2deg);
    }
    50% {
        transform: scale(1.15) rotate(2deg);
    }
    75% {
        transform: scale(1.1) rotate(-2deg);
    }
}

/* Gift Box Reminder - Appears after level-up */
.notification-gift-reminder {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ff69b4;
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(255, 105, 180, 0.15);
    border-radius: 6px;
    border-left: 3px solid #ff69b4;
    display: inline-block;
    animation: gift-pulse 2.5s ease-in-out infinite;
}

@keyframes gift-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Balance update animation */
.balance-update {
    animation: balance-pulse 0.6s ease-out;
}

@keyframes balance-pulse {
    0%, 100% {
        transform: scale(1);
        color: inherit;
    }
    50% {
        transform: scale(1.15);
        color: var(--success-color);
    }
}

/* Mobile responsive adjustments for command buttons */
@media (max-width: 768px) {
    .command-buttons-grid {
        grid-template-columns: 1fr;
    }

    .command-notifications {
        top: 60px;
        right: auto;
        left: 50%;
        bottom: auto;
        width: min(320px, calc(100vw - 1rem));
        max-width: calc(100vw - 1rem);
        transform: translateX(-50%);
        align-items: center;
    }

    .command-notification {
        padding: var(--spacing-sm);
        border-radius: 14px;
        width: 100%;
        max-width: 320px;
    }

    .command-notification .notification-title {
        font-size: 0.8rem;
    }

    .command-notification .notification-message {
        font-size: 0.76rem;
        line-height: 1.3;
    }

    .notification-icon {
        font-size: 1.2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   GIFT BOX REWARD SYSTEM STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* Gift Box Button in Navigation */
.gift-box-container {
    display: flex;
    align-items: center;
    margin-right: var(--spacing-md);
}

.gift-box-button {
    position: relative;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    border: 2px solid #ffaa00;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: gift-pulse 3s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.gift-box-button:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
}

.gift-box-icon {
    font-size: 1.5rem;
    color: white;
    animation: gift-shake 1s ease-in-out infinite;
}

.gift-box-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(135deg, #ff0000, #ff4444);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    border: 2px solid white;
    animation: badge-bounce 1s ease-in-out infinite;
}

/* Gift Box Animations */
@keyframes gift-pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(255, 170, 0, 0.6);
    }
}

@keyframes gift-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

@keyframes badge-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Gift Box Modal */
.gift-box-modal-content {
    background: linear-gradient(135deg, #1a0d0d 0%, #241010 100%);
    border: 2px solid var(--premium-gold);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.gift-box-modal-header {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    border-bottom: 2px solid var(--premium-gold);
    padding: var(--spacing-lg);
}

.gift-box-modal-header .modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.gift-box-modal-body {
    padding: var(--spacing-xl);
    max-height: 60vh;
    overflow-y: auto;
}

.gift-box-message {
    font-size: 1.1rem;
    color: var(--premium-gold);
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.gift-box-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

/* Individual Gift Card */
.gift-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.gift-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: gift-shimmer 3s ease-in-out infinite;
    pointer-events: none; /* Allow clicks to pass through shimmer overlay */
}

.gift-card:hover {
    transform: translateY(-5px);
    border-color: var(--premium-gold);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.gift-card.milestone {
    border-color: var(--premium-gold);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
}

.gift-card.milestone::after {
    content: '⭐ MILESTONE ⭐';
    position: absolute;
    top: 10px;
    right: -30px;
    background: var(--premium-gold);
    color: #000;
    padding: 4px 40px;
    font-size: 0.7rem;
    font-weight: bold;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

@keyframes gift-shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.gift-icon-large {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    animation: gift-float 3s ease-in-out infinite;
}

@keyframes gift-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.gift-level {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--premium-gold);
    margin-bottom: var(--spacing-sm);
}

.gift-rewards {
    margin: var(--spacing-md) 0;
}

.gift-reward-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.gift-reward-item.dream-coins {
    color: #ffdd33;
}

.gift-reward-item.premium-coins {
    color: var(--premium-gold);
}

.gift-claim-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: var(--spacing-md);
}

.gift-claim-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.gift-claim-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.gift-claimed {
    opacity: 0.5;
    pointer-events: none;
}

.gift-claimed-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--success-color);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 10;
}

.gift-box-modal-footer {
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg);
}

/* Celebration Animation */
@keyframes celebrate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(-5deg);
    }
    50% {
        transform: scale(1.3) rotate(5deg);
    }
    75% {
        transform: scale(1.2) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.celebrating {
    animation: celebrate 0.6s ease-in-out;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .gift-box-button {
        width: 40px;
        height: 40px;
    }

    .gift-box-icon {
        font-size: 1.2rem;
    }

    .gift-box-badge {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }

    .gift-box-list {
        grid-template-columns: 1fr;
    }

    .gift-card {
        padding: var(--spacing-md);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   REAL-TIME BALANCE AND XP UPDATE ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */

/* Balance update animation */
@keyframes balance-pulse {
    0% {
        transform: scale(1);
        color: inherit;
    }
    50% {
        transform: scale(1.15);
        color: var(--secondary-color);
        text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
    }
    100% {
        transform: scale(1);
        color: inherit;
    }
}

.balance-update {
    animation: balance-pulse 0.6s ease-in-out;
}

/* Level badge update animation */
@keyframes level-glow {
    0% {
        transform: scale(1);
        box-shadow: none;
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(255, 51, 51, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

.level-update {
    animation: level-glow 0.8s ease-in-out;
}

/* XP progress bar update animation */
@keyframes xp-fill {
    0% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
    }
    100% {
        opacity: 0.9;
    }
}

.xp-update {
    animation: xp-fill 0.8s ease-in-out;
}

/* XP progress bar styling (if not already present) */
.xp-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin: var(--spacing-sm) 0;
}

.xp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 10px;
    transition: width 0.5s ease-out;
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

.xp-text {
    font-size: 0.85rem;
    color: var(--muted-text);
    text-align: center;
}

/* Success notification enhancement for coin/XP rewards */
.notification-reward,
.notification-xp {
    font-weight: 600;
    padding: var(--spacing-xs) 0;
}

.notification-reward {
    color: var(--secondary-color);
}

.notification-xp {
    color: #4da6ff;
    font-size: 1.05rem;
}

/* ═══════════════════════════════════════════════════════════════════
   CONSISTENT PAGE HEADER STYLING
   ═══════════════════════════════════════════════════════════════════ */

/* Page header container - consistent across all pages */
.page-header {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 25%, var(--primary-dark) 75%, var(--secondary-color) 100%);
    padding: 3rem 0 2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--primary-color);
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 51, 51, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 204, 0, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.page-header-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Page header logo */
.page-header-logo {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Page header title */
.page-header-title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #ffffff 0%, var(--primary-color) 50%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 10px rgba(255, 51, 51, 0.3);
}

/* Page header subtitle */
.page-header-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

/* Page header balance display */
.page-header-balance {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.page-header-balance-item {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all var(--transition-normal);
}

.page-header-balance-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 51, 51, 0.3);
}

.page-header-balance-icon {
    font-size: 2rem;
}

.page-header-balance-info {
    text-align: left;
}

.page-header-balance-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.25rem;
}

.page-header-balance-amount {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-header {
        padding: 2rem 0 1.5rem;
    }

    .page-header-logo {
        max-width: 250px;
    }

    .page-header-title {
        font-size: 2rem;
    }

    .page-header-subtitle {
        font-size: 1rem;
    }

    .page-header-balance {
        flex-direction: column;
        gap: 1rem;
    }

    .page-header-balance-item {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* Ensure consistent page backgrounds */
.main-content {
    background: transparent;
    min-height: calc(100vh - 200px);
    position: relative;
}

body.modal-open #siteNavBackdrop {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Container styling for consistent spacing */
.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* Section headers within pages */
.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--light-text);
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--muted-text);
}

/* ========================================
   MICRO-ANIMATIONS & KEYFRAMES
   ======================================== */

/* Entrance Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse Animations */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.92;
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 14px var(--primary-glow);
    }
    50% {
        box-shadow: 0 0 24px var(--primary-glow);
    }
}

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Glow Animation */
@keyframes glow {
    0%, 100% {
        filter: drop-shadow(0 0 4px var(--primary-color));
    }
    50% {
        filter: drop-shadow(0 0 12px var(--primary-color));
    }
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Rotate Animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Animation Classes */
.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease-out;
}

.animate-scaleIn {
    animation: scaleIn 0.4s ease-out;
}

.animate-pulse {
    animation: pulse 3.5s ease-in-out infinite;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2.5s infinite;
}

.animate-glow {
    animation: glow 3s ease-in-out infinite;
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Staggered Animation Delays */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

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

/* ========================================
   ENHANCED MOBILE RESPONSIVE OPTIMIZATIONS
   ======================================== */

/* ===== MOBILE TYPOGRAPHY ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Ensure minimum readable font sizes */
    body {
        font-size: 16px; /* Never go below 16px for body text */
    }

    /* Scale headings appropriately for mobile */
    h1, .h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        line-height: 1.2;
    }

    h2, .h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        line-height: 1.3;
    }

    h3, .h3 {
        font-size: clamp(1.25rem, 3vw, 1.75rem);
        line-height: 1.3;
    }

    h4, .h4 {
        font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    }

    h5, .h5, h6, .h6 {
        font-size: clamp(1rem, 2vw, 1.25rem);
    }

    /* Improve paragraph readability */
    p {
        line-height: 1.6;
        margin-bottom: 1rem;
    }
}

/* ===== MOBILE BUTTON ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Ensure all buttons meet minimum touch target size */
    .btn,
    button,
    .nav-link-modern,
    .command-btn {
        min-height: 44px; /* Apple HIG minimum */
        min-width: 44px;
        padding: 12px 20px;
        font-size: 16px; /* Prevent iOS zoom on focus */
    }

    /* Larger buttons for primary actions */
    .btn-primary,
    .btn-success,
    .btn-danger {
        min-height: 48px;
        padding: 14px 24px;
        font-size: 1rem;
    }

    /* Full-width buttons on mobile for better UX */
    .btn-block-mobile {
        width: 100%;
        display: block;
    }

    /* Increase spacing between buttons */
    .btn + .btn {
        margin-top: 12px;
    }

    /* Button groups need better spacing */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

/* ===== MOBILE FORM ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Larger form inputs for better touch interaction */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px !important; /* Prevent iOS zoom */
        border-radius: var(--radius-md);
    }

    /* Larger labels for better readability */
    label,
    .form-label {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
    }

    /* Better spacing for form groups */
    .form-group,
    .mb-3 {
        margin-bottom: 1.5rem;
    }

    /* Full-width selects on mobile */
    select,
    .form-select {
        width: 100%;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 40px;
    }

    /* Checkbox and radio buttons need larger touch targets */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
        margin-right: 12px;
    }
}

/* ===== MOBILE SHOP ITEMS GRID ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Shop items container */
    .shop-items-grid,
    .items-grid,
    .auto-fit-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 1rem;
    }

    /* Item cards optimized for mobile */
    .item-card {
        padding: 12px;
        border-radius: var(--radius-md);
    }

    /* Item images scale properly */
    .item-card img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Item titles readable on mobile */
    .item-card .item-title,
    .item-card h3,
    .item-card h4 {
        font-size: 0.9rem;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    /* Item prices prominent */
    .item-card .item-price,
    .item-card .price {
        font-size: 1rem;
        font-weight: 700;
    }

    /* Item buttons full-width on mobile */
    .item-card .btn,
    .item-card button {
        width: 100%;
        padding: 10px;
        font-size: 0.9rem;
    }
}

/* Single column for very small screens */
@media (max-width: 374px) {
    .shop-items-grid,
    .items-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .item-card {
        padding: 16px;
    }

    .item-card .item-title,
    .item-card h3,
    .item-card h4 {
        font-size: 1rem;
    }
}

/* ===== MOBILE MODAL & POPUP ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Modals should fit mobile screens */
    .modal-dialog {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }

    .modal-content {
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    /* Modal headers */
    .modal-header {
        padding: 1rem;
        flex-wrap: wrap;
    }

    .modal-title {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    /* Modal body with better spacing */
    .modal-body {
        padding: 1rem;
    }

    /* Modal footer buttons stack on mobile */
    .modal-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 12px;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }

    /* Close button larger for touch */
    .modal-header .btn-close,
    .modal-header .close {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
        font-size: 1.5rem;
    }
}

/* ===== MOBILE IMAGE & MEDIA ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Ensure all images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Hero images scale properly */
    .hero-logo,
    .page-header-image {
        max-width: 90%;
        height: auto;
    }

    /* Banner background adjustments */
    body {
        background-size: cover;
        background-position: center;
        background-attachment: scroll; /* Better performance on mobile */
    }

    /* Item images in cards */
    .item-image,
    .product-image,
    .shop-item-image {
        width: 100%;
        height: auto;
        object-fit: contain;
        max-height: 200px;
    }

    /* Avatar images */
    .avatar,
    .user-avatar {
        width: 40px;
        height: 40px;
    }
}

/* ===== MOBILE TABLE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Make tables scrollable horizontally */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    /* Stack table cells on very small screens */
    table.mobile-stack {
        display: block;
    }

    table.mobile-stack thead {
        display: none;
    }

    table.mobile-stack tbody,
    table.mobile-stack tr,
    table.mobile-stack td {
        display: block;
        width: 100%;
    }

    table.mobile-stack tr {
        margin-bottom: 1rem;
        border: 1px solid var(--dark-border);
        border-radius: var(--radius-md);
        padding: 1rem;
    }

    table.mobile-stack td {
        text-align: left;
        padding: 8px 0;
        border: none;
    }

    table.mobile-stack td:before {
        content: attr(data-label);
        font-weight: 700;
        display: block;
        margin-bottom: 4px;
        color: var(--muted-text);
    }
}

/* ===== MOBILE CARD & CONTAINER ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Cards have better mobile spacing */
    .card,
    .shop-container,
    .services-container,
    .casino-container {
        padding: 1rem;
        margin: 0.5rem;
        border-radius: var(--radius-lg);
    }

    /* Card headers */
    .card-header {
        padding: 1rem;
        font-size: 1.1rem;
    }

    /* Card body */
    .card-body {
        padding: 1rem;
    }

    /* Card footer */
    .card-footer {
        padding: 1rem;
    }

    /* Grid layouts in cards */
    .card .row,
    .card-body .row {
        margin: 0 -0.5rem;
    }

    .card .col,
    .card-body .col {
        padding: 0 0.5rem;
    }
}

/* ===== MOBILE NAVIGATION ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Ensure hamburger menu is always accessible and highly visible */
    .mobile-menu-toggle {
        display: flex !important;
        min-width: 50px;
        min-height: 50px;
        padding: 12px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        background: rgba(0, 255, 255, 0.1);
        border-radius: var(--radius-md);
        border: 2px solid rgba(0, 255, 255, 0.3);
        cursor: pointer;
        transition: all var(--transition-fast);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        flex-shrink: 0;
        margin-left: 8px;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:active {
        background: rgba(0, 255, 255, 0.2);
        border-color: rgba(0, 255, 255, 0.5);
        transform: scale(1.05);
    }

    .mobile-menu-toggle.active {
        background: rgba(0, 255, 255, 0.25);
        border-color: rgba(0, 255, 255, 0.6);
    }

    /* Hamburger lines - make them more visible */
    .hamburger-line {
        width: 26px;
        height: 3px;
        background: rgba(0, 255, 255, 1);
        border-radius: 2px;
        transition: all var(--transition-fast);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .mobile-menu-toggle i {
        font-size: 1.5rem;
        color: var(--light-text);
    }

    /* Mobile navigation links */
    .nav-bottom-tier .nav-link-modern {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding: 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 4px;
    }

    /* Dropdowns in mobile menu */
    .nav-dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 8px;
        border-radius: var(--radius-md);
    }

    .nav-dropdown-item {
        padding: 12px 16px;
        min-height: 44px;
    }
}

/* ===== MOBILE SPACING & LAYOUT UTILITIES ===== */
@media (max-width: 768px) {
    /* Reduce excessive spacing on mobile */
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Section spacing */
    section {
        padding: 2rem 0;
    }

    /* Margin utilities for mobile */
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .mb-mobile-1 { margin-bottom: 0.5rem !important; }
    .mb-mobile-2 { margin-bottom: 1rem !important; }
    .mb-mobile-3 { margin-bottom: 1.5rem !important; }
    .mb-mobile-4 { margin-bottom: 2rem !important; }

    .mt-mobile-0 { margin-top: 0 !important; }
    .mt-mobile-1 { margin-top: 0.5rem !important; }
    .mt-mobile-2 { margin-top: 1rem !important; }
    .mt-mobile-3 { margin-top: 1.5rem !important; }
    .mt-mobile-4 { margin-top: 2rem !important; }

    /* Padding utilities for mobile */
    .p-mobile-0 { padding: 0 !important; }
    .p-mobile-1 { padding: 0.5rem !important; }
    .p-mobile-2 { padding: 1rem !important; }
    .p-mobile-3 { padding: 1.5rem !important; }
    .p-mobile-4 { padding: 2rem !important; }

    /* Display utilities */
    .d-mobile-none { display: none !important; }
    .d-mobile-block { display: block !important; }
    .d-mobile-flex { display: flex !important; }
    .d-mobile-grid { display: grid !important; }

    /* Text alignment */
    .text-mobile-center { text-align: center !important; }
    .text-mobile-left { text-align: left !important; }
    .text-mobile-right { text-align: right !important; }

    /* Flex utilities */
    .flex-mobile-column { flex-direction: column !important; }
    .flex-mobile-row { flex-direction: row !important; }
    .flex-mobile-wrap { flex-wrap: wrap !important; }
}

/* ===== MOBILE ALERT & NOTIFICATION ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Flash messages positioned better on mobile */
    .flash-messages {
        top: 70px;
        right: 1rem;
        left: 1rem;
        max-width: calc(100vw - 2rem);
    }

    .flash-message {
        padding: 1rem;
        font-size: 0.95rem;
        border-radius: var(--radius-md);
    }

    .flash-close {
        min-width: 32px;
        min-height: 32px;
        padding: 8px;
    }

    /* Alerts */
    .alert {
        padding: 1rem;
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    /* Toast notifications */
    .toast,
    .notification {
        max-width: calc(100vw - 2rem);
        margin: 0.5rem;
    }
}

/* ===== MOBILE BADGE & LABEL ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Badges readable on mobile */
    .badge {
        font-size: 0.85rem;
        padding: 6px 12px;
        border-radius: var(--radius-sm);
    }

    /* Labels */
    .label,
    .tag {
        font-size: 0.85rem;
        padding: 4px 10px;
    }

    /* Status indicators */
    .status-badge,
    .server-status-badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}

/* ============================================================================
   COMPREHENSIVE MOBILE LAYOUT FIXES
   Ensure all containers, buttons, frames auto-fit to mobile screens
   ============================================================================ */

@media (max-width: 768px) {
    /* Prevent horizontal scrolling */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* All containers should fit within viewport */
    .container,
    .container-fluid,
    .row,
    .col,
    [class*="col-"] {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Ensure all cards and panels fit */
    .card,
    .panel,
    .box,
    .frame,
    .modal-content,
    .modal-dialog {
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Buttons should be touch-friendly */
    .btn,
    button,
    [type="button"],
    [type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 14px;
    }

    /* Forms should fit properly */
    input,
    select,
    textarea,
    .form-control,
    .form-select {
        max-width: 100%;
        width: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 44px;
    }

    /* Tables should be scrollable */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Images should not overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Modals should fit screen */
    .modal {
        padding: 10px;
    }

    .modal-dialog {
        margin: 10px;
        max-width: calc(100vw - 20px);
    }

    .modal-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    /* Navigation dropdowns mobile optimization */
    .nav-dropdown-menu,
    .dropdown-menu {
        max-width: calc(100vw - 20px);
        left: 10px !important;
        right: 10px !important;
    }

    /* Ensure text doesn't overflow */
    h1, h2, h3, h4, h5, h6,
    p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Grid layouts should stack on mobile */
    .grid,
    .grid-container,
    [class*="grid-"] {
        grid-template-columns: 1fr !important;
    }

    /* Flex containers should wrap */
    .flex,
    .d-flex,
    [class*="flex-"] {
        flex-wrap: wrap;
    }

    /* Spacing adjustments for mobile */
    .container,
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Reduce excessive padding on mobile */
    .p-5 {
        padding: 1.5rem !important;
    }

    .p-4 {
        padding: 1rem !important;
    }

    .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Ensure footer doesn't cause horizontal scroll */
    footer,
    .footer {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Fix any absolute positioned elements */
    .position-absolute {
        max-width: 100%;
    }
}

/* Extra small devices (320px - 414px) */
@media (max-width: 414px) {
    /* Further reduce padding */
    .container,
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Smaller font sizes for very small screens */
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Buttons can be slightly smaller on very small screens */
    .btn,
    button {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Further reduce logo size on very small screens */
    .nav-logo {
        height: 50px;
    }

    .nav-halloween-logo {
        height: 50px;
    }

    /* Reduce nav container padding */
    .nav-container {
        padding: 0 5px;
    }

    /* Optimize mobile balance display */
    .mobile-balance-display {
        font-size: 0.85rem;
    }

    .balance-icon-small {
        font-size: 1rem;
    }

    /* Ensure hamburger is still visible */
    .mobile-menu-toggle {
        min-width: 48px;
        min-height: 48px;
    }

    /* Visitor counter - extra compact for small screens */
    .visitor-counter-badge {
        padding: 4px 8px;
        font-size: 0.7rem;
        gap: 0;
    }

    .visitor-counter-icon {
        font-size: 0.85rem;
        margin-right: 0.2rem;
    }

    .visitor-counter-label {
        margin-right: 0.2rem;
    }

    .visitor-counter-value {
        font-size: 0.75rem;
        min-width: 25px;
    }
}

/* Very small devices (320px and below) */
@media (max-width: 375px) {
    /* Even smaller logo for tiny screens */
    .nav-logo {
        height: 45px;
    }

    .nav-halloween-logo {
        height: 45px;
        margin-left: 4px;
    }

    /* Reduce gaps further */
    .nav-top-tier {
        gap: 4px;
    }

    /* Smaller user avatar */
    .user-avatar-small {
        width: 28px;
        height: 28px;
    }

    /* Smaller gift box */
    .gift-box-button {
        width: 36px;
        height: 36px;
    }

    .gift-box-icon {
        font-size: 1rem;
    }

    /* Visitor counter - very compact for tiny screens */
    .visitor-counter-badge {
        padding: 4px 6px;
        font-size: 0.65rem;
        gap: 0;
    }

    .visitor-counter-icon {
        font-size: 0.8rem;
        margin-right: 0.2rem;
    }

    .visitor-counter-label {
        font-size: 0.65rem;
        margin-right: 0.2rem;
    }

    .visitor-counter-value {
        font-size: 0.7rem;
        min-width: 20px;
    }
}

/* Landscape orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Modals should use more horizontal space */
    .modal-dialog {
        max-width: 90vw;
    }
}

/* ============================================================================
   PREVIEW MODE BANNER
   ============================================================================ */
.preview-mode-banner {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8555 100%);
    border-bottom: 3px solid #e55a2b;
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    animation: preview-banner-pulse 3s ease-in-out infinite;
}

@keyframes preview-banner-pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 107, 53, 0.6);
    }
}

.preview-banner-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.preview-banner-content i {
    font-size: 24px;
    color: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.preview-banner-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.preview-banner-text strong {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.preview-banner-user {
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .preview-mode-banner {
        padding: 10px 15px;
    }

    .preview-banner-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .preview-banner-content i {
        font-size: 20px;
    }

    .preview-banner-text {
        font-size: 12px;
    }

    .preview-banner-text strong {
        font-size: 13px;
    }

    .preview-banner-user {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Account Linking Banner & Modal Styles
   ═══════════════════════════════════════════════════════════════════ */

.account-link-banner {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    animation: account-link-pulse 3s ease-in-out infinite;
    position: relative;
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.account-link-banner:hover {
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);
    transform: translateY(-2px);
}

@keyframes account-link-pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 107, 53, 0.6);
    }
}

.account-link-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.account-link-icon {
    font-size: 24px;
    color: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.account-link-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.account-link-text strong {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.account-link-close {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.account-link-close:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.1);
}

/* Account Linking Modal Styles */
#accountLinkModal .modal-content {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#accountLinkModal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    border-bottom: 1px solid var(--dark-border);
    border-radius: 12px 12px 0 0;
}

#accountLinkModal .modal-title {
    font-weight: 700;
    font-size: 1.25rem;
}

#accountLinkModal .modal-body {
    padding: 25px;
    color: var(--light-text);
}

#accountLinkModal .form-label {
    color: var(--light-text);
    font-weight: 600;
    margin-bottom: 8px;
}

#accountLinkModal .form-select {
    background: var(--dark-bg-alt);
    border: 1px solid var(--dark-border);
    color: var(--light-text);
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#accountLinkModal .form-select:focus {
    background: var(--dark-card);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 128, 0.25);
    color: var(--light-text);
}

#accountLinkModal .form-select option {
    background: var(--dark-card);
    color: var(--light-text);
}

#accountLinkModal .form-text {
    color: var(--muted-text);
    font-size: 0.875rem;
}

#accountLinkModal .alert {
    border-radius: 8px;
    border: none;
    padding: 12px 15px;
}

#accountLinkModal .alert-info {
    background: rgba(255, 140, 0, 0.1);
    color: var(--info-color);
    border-left: 4px solid var(--info-color);
}

#accountLinkModal .alert-danger {
    background: rgba(255, 0, 85, 0.1);
    color: var(--error-color);
    border-left: 4px solid var(--error-color);
}

#accountLinkModal .alert-success {
    background: rgba(0, 255, 136, 0.1);
    color: var(--success-color);
    border-left: 4px solid var(--success-color);
}

#accountLinkModal .modal-footer {
    background: var(--dark-bg-alt);
    border-top: 1px solid var(--dark-border);
    border-radius: 0 0 12px 12px;
    padding: 15px 25px;
}

#accountLinkModal .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

#accountLinkModal .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--primary-glow);
}

#accountLinkModal .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#accountLinkModal .btn-secondary {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    color: var(--light-text);
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

#accountLinkModal .btn-secondary:hover {
    background: var(--dark-card-hover);
    border-color: var(--dark-border-light);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .account-link-banner {
        padding: 10px 15px;
    }

    .account-link-content {
        flex-direction: row;
        gap: 10px;
    }

    .account-link-icon {
        font-size: 20px;
    }

    .account-link-text {
        font-size: 12px;
    }

    .account-link-text strong {
        font-size: 13px;
    }

    .account-link-close {
        font-size: 14px;
        padding: 5px 8px;
    }
}

.engagement-card {
    background: linear-gradient(160deg, rgba(18, 36, 50, 0.92), rgba(13, 28, 40, 0.86));
    border: 1px solid rgba(158, 179, 199, 0.16);
    border-radius: 22px;
    padding: 1rem;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
    transition: all 0.3s ease;
}

.engagement-card:hover {
    border-color: rgba(255, 215, 0, 0.32);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.28);
}

.engagement-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(158, 179, 199, 0.14);
}

.engagement-header i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.engagement-header h5 {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--light-text);
}

.engagement-count {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(255, 107, 74, 0.18));
    color: var(--light-text);
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(158, 179, 199, 0.16);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.loading-state,
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted-text);
}

.loading-state i,
.empty-state i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
    color: var(--primary-color);
}

.loading-state p,
.empty-state p {
    margin: 0;
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .engagement-card {
        padding: 1rem;
    }

    .engagement-header {
        gap: 0.5rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .engagement-header h5 {
        font-size: 1.1rem;
    }

}

@media (max-width: 480px) {
    .engagement-header {
        flex-wrap: wrap;
    }

    .engagement-count {
        order: 3;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }

}

/* ========================================
   SKELETON & STATE PATTERNS
   ======================================== */

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--dark-card) 25%,
        var(--dark-card-hover) 50%,
        var(--dark-card) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    border-radius: var(--radius-md);
    min-height: 1rem;
}

.skeleton-text {
    height: 0.875rem;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-sm);
    width: 100%;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

.skeleton-heading {
    height: 1.5rem;
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-sm);
    width: 40%;
}

.skeleton-card {
    height: 200px;
    border-radius: var(--radius-xl);
}

.skeleton-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-button {
    height: 44px;
    width: 120px;
    border-radius: 999px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty State */
.state-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-xl);
    min-height: 200px;
}

.state-empty-icon {
    font-size: 2.5rem;
    color: var(--disabled-text);
    margin-bottom: var(--spacing-lg);
    opacity: 0.6;
}

.state-empty-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--muted-text);
    margin-bottom: var(--spacing-sm);
}

.state-empty-message {
    font-size: 0.875rem;
    color: var(--disabled-text);
    margin-bottom: var(--spacing-lg);
    max-width: 320px;
    line-height: 1.5;
}

.state-empty-action {
    margin-top: var(--spacing-sm);
}

/* Error State */
.state-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-xl);
    min-height: 200px;
}

.state-error-icon {
    font-size: 2.5rem;
    color: var(--error-color);
    margin-bottom: var(--spacing-lg);
    opacity: 0.7;
}

.state-error-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--light-text);
    margin-bottom: var(--spacing-sm);
}

.state-error-message {
    font-size: 0.875rem;
    color: var(--muted-text);
    margin-bottom: var(--spacing-lg);
    max-width: 320px;
    line-height: 1.5;
}

.state-error-action .btn {
    font-size: 0.875rem;
    padding: 10px 24px;
}

/* Loading State (spinner) */
.state-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-xl);
    min-height: 200px;
}

.state-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--dark-border);
    border-top-color: var(--secondary-color);
    border-radius: 50%;
    animation: rotate 0.8s linear infinite;
    margin-bottom: var(--spacing-lg);
}

.state-loading-message {
    font-size: 0.875rem;
    color: var(--muted-text);
}

/* Heading icon vertical-alignment fix.
 * FA6 sets line-height:1 on .fa* icons (≈16px box at 1rem); h1–h6 default to
 * ~1.2 (≈19.2px box). In a flex row with align-items:center the icon's
 * smaller box centers against the heading's taller box, leaving the icon
 * glyph visually below the text optical center. Collapsing the heading's
 * box to match the icon's restores visual centering. Selector is narrow
 * (icon-then-heading) so non-icon, multi-line headings keep normal leading.
 * Specificity (0,1,2) — qualified with `i` so per-page rules like
 * `.fu-card h3 { line-height: 1.2 }` (0,1,1) loaded after style.css don't
 * win source-order against this fix. */
i.fa + h1, i.fa + h2, i.fa + h3, i.fa + h4, i.fa + h5, i.fa + h6,
i.fas + h1, i.fas + h2, i.fas + h3, i.fas + h4, i.fas + h5, i.fas + h6,
i.far + h1, i.far + h2, i.far + h3, i.far + h4, i.far + h5, i.far + h6,
i.fab + h1, i.fab + h2, i.fab + h3, i.fab + h4, i.fab + h5, i.fab + h6 {
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
 * RECOVERED 2026-07-23 — public-surface wave restore (source: stash 8e828aee,
 * blob d46a268d). These blocks were reverted by the 2026-07-22 23:53 checkout -f
 * but are still referenced by live markup/JS:
 *   - .powered-by-* : white-label attribution footer (base.html footer +
 *     compact fixed credit used on the live map where the full footer is hidden)
 *   - .gift-delivery-warning* / .gift-claim-btn.retry : store-claim delivery
 *     failure banner + retry button emitted by giftbox.js (createStoreClaimCard)
 * ═══════════════════════════════════════════════════════════════════════ */

.powered-by-notice {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.10);
    border: 1px solid rgba(255, 215, 0, 0.22);
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffe4b0;
}

.powered-by-notice a {
    color: var(--secondary-color, #ffd700);
    text-decoration: none;
    font-weight: 700;
}

.powered-by-notice a:hover {
    text-decoration: underline;
}

/* Compact attribution shown on pages that hide the full footer (e.g. live map). */
.powered-by-credit {
    position: fixed;
    bottom: calc(var(--site-shell-bottom, 0px) + 6px);
    right: 10px;
    z-index: 700;
    font-size: 0.72rem;
    color: rgba(255, 231, 191, 0.78);
    background: rgba(20, 5, 5, 0.72);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    pointer-events: auto;
    backdrop-filter: blur(6px);
}

.powered-by-credit a {
    color: #ffd700;
    text-decoration: none;
}

.powered-by-credit a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .powered-by-credit { display: none; }
}

/* Store-claim delivery failure banner (e.g. inventory full) + retry button */
.gift-delivery-warning {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.55);
    border-left: 4px solid #dc3545;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.gift-delivery-warning-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #ff6b6b;
    font-weight: 700;
    font-size: 0.95rem;
}

.gift-delivery-warning-heading i {
    flex: 0 0 auto;
}

.gift-delivery-warning-reason {
    min-width: 0;
    color: #ffd7d7;
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.gift-delivery-warning-help {
    min-width: 0;
    color: #ffe9a8;
    font-size: 0.82rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.gift-claim-btn.retry {
    background: linear-gradient(135deg, #fd7e14, #dc3545);
}

.gift-claim-btn.retry:hover {
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

/* ==========================================================================
   Subscription social proof — all-time subscriptions purchased per tier.

   One component, shared by every subscription upsell surface (purchase page
   tier cards, tier comparison table, subscriber perks, checkout upsell), so
   the counter reads identically wherever it appears. Defined in the global
   public stylesheet because base.html already loads it on every public page —
   no extra request, no per-surface copy to drift.

   Containment: these sit inside grid/flex cards, so min-width:0 + overflow
   hidden + nowrap clamping are mandatory (a long locale-formatted number must
   never widen its grid track).
   ========================================================================== */
.tier-subscriber-count {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 2px 0 14px;
    min-width: 0;
    overflow: hidden;
}

.tier-subscriber-number {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(2.4rem, 7vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--premium-gold, #ffcf66);
    text-shadow: 0 0 22px rgba(255, 215, 0, 0.28);
}

.tier-subscriber-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b9c4d0;
}

/* Inline variant for dense surfaces (comparison table cells, perks header,
   upsell banner) — same number, laid out on one line. */
.tier-subscriber-count.is-inline {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0;
    flex-wrap: nowrap;
}

.tier-subscriber-count.is-inline .tier-subscriber-number {
    font-size: clamp(1.1rem, 3.2vw, 1.45rem);
    text-shadow: none;
}

.tier-subscriber-count.is-inline .tier-subscriber-label {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
}

@media (max-width: 480px) {
    .tier-subscriber-count {
        margin: 2px 0 12px;
    }

    .tier-subscriber-label {
        font-size: 0.62rem;
        letter-spacing: 0.09em;
    }
}