/* File: /public/css/components/shared-header.css */
/* Wryon's Games - Shared Header Component Styles */
/* v1.1.0 - Fixed button border-radius (use fixed 25px for pill shape, not 50%) */
/*
 * CHANGES IN v1.1.0:
 * - FIXED: Button border-radius changed from var(--radius-full) to 25px
 * - 50% radius creates elliptical corners that look wrong on rectangular buttons
 * - 25px creates consistent pill shape matching the original design
 * - Avatar/circular elements still use 50% correctly
 *
 * KEY NOTES:
 * - Universal header component used across all pages
 * - Fixed position at top with BETA banner below
 * - Games dropdown menu
 * - Stats display (Spins, Jackpot)
 * - Wallet connection button
 * - Immersive mode support (hide header for full-screen gameplay)
 * - Mobile navigation footer (legacy, mostly disabled)
 *
 * DEPENDENCIES:
 * - Requires css/core/variables.css loaded BEFORE this file
 * - Works with css/themes/[client].css for branding
 *
 * USAGE:
 * <link rel="stylesheet" href="css/core/variables.css">
 * <link rel="stylesheet" href="css/components/shared-header.css">
 * <script src="js/shared-header.js"></script>
 */

/* ============================================================
   SHARED HEADER STYLES (self-contained)
   v5.2.0 - Added BETA banner styles
   ============================================================ */

.shared-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, rgba(5, 15, 5, 0.98) 0%, rgba(var(--bg-page-rgb), 0.95) 100%);
    border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    z-index: var(--z-max);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    font-family: var(--font-display);
}

/* ============================================================
   BETA BANNER - Prominent demo version notice
   ============================================================ */
.beta-banner {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, 
        rgba(var(--brand-secondary-rgb), 0.15) 0%, 
        rgba(255, 140, 0, 0.2) 50%, 
        rgba(var(--brand-secondary-rgb), 0.15) 100%);
    border-bottom: 1px solid rgba(255, 140, 0, 0.4);
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-fixed);
    font-family: var(--font-display);
    backdrop-filter: blur(8px);
    animation: betaBannerPulse 3s ease-in-out infinite;
}

@keyframes betaBannerPulse {
    0%, 100% { 
        background: linear-gradient(90deg, 
            rgba(var(--brand-secondary-rgb), 0.15) 0%, 
            rgba(255, 140, 0, 0.2) 50%, 
            rgba(var(--brand-secondary-rgb), 0.15) 100%);
    }
    50% { 
        background: linear-gradient(90deg, 
            rgba(var(--brand-secondary-rgb), 0.2) 0%, 
            rgba(255, 140, 0, 0.25) 50%, 
            rgba(var(--brand-secondary-rgb), 0.2) 100%);
    }
}

.beta-banner-badge {
    position: absolute;
    left: 15px;
    background: linear-gradient(135deg, #ff8c00, var(--brand-secondary));
    color: var(--text-on-primary);
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    animation: betaBadgeGlow 2s ease-in-out infinite;
}

@keyframes betaBadgeGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 140, 0, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 140, 0, 0.8); }
}

.beta-banner-text {
    color: #ffd700;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.3;
}

.beta-banner-text strong {
    color: #ff8c00;
}

.beta-banner-close {
    position: absolute;
    right: 15px;
    background: transparent;
    border: none;
    color: rgba(255, 200, 100, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: all var(--transition-normal);
}

.beta-banner-close:hover {
    color: #ffd700;
    transform: scale(1.2);
}

/* Mobile beta banner adjustments */
@media (max-width: 600px) {
    .beta-banner {
        padding: 6px 10px;
        justify-content: flex-start;
        gap: 8px;
    }
    
    .beta-banner-badge {
        position: static;
        font-size: 0.6rem;
        padding: 2px 8px;
    }
    
    .beta-banner-text {
        font-size: 0.65rem;
        text-align: left;
        flex: 1;
    }
    
    .beta-banner-close {
        position: static;
        font-size: 1rem;
    }
}

/* Body padding adjustments for beta banner */
body.has-shared-header.has-beta-banner {
    padding-top: 100px !important;
}

body.has-shared-header:not(.has-beta-banner) {
    padding-top: 60px !important;
}

/* Hide beta banner in immersive mode */
body.immersive-mode .beta-banner {
    display: none !important;
}

/* Push decorations below header + banner */
body.has-shared-header.has-beta-banner .decoration-top-left,
body.has-shared-header.has-beta-banner .decoration-top-right {
    top: 110px !important;
}

body.has-shared-header:not(.has-beta-banner) .decoration-top-left,
body.has-shared-header:not(.has-beta-banner) .decoration-top-right {
    top: 70px !important;
}

/* Logo - Just avatar + text, no redundant icons */
.shared-header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
}

.shared-header-logo img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 2px solid rgba(var(--brand-primary-rgb), 0.5);
    box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.3);
}

.shared-header-logo-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-primary);
    text-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.5);
    display: none;
}

@media (min-width: 768px) {
    .shared-header-logo-text {
        display: block;
    }
}

/* ============================================================
   PREMIUM BUTTON BASE STYLE (matching .wallet-btn)
   ============================================================ */
.shared-header-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    padding: 8px 16px;
    border-radius: 25px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Shimmer animation for all premium buttons */
.shared-header-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--brand-primary-rgb), 0.2), transparent);
    animation: headerBtnShimmer 2.5s ease-in-out infinite;
}

@keyframes headerBtnShimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.shared-header-btn:hover {
    background: var(--brand-primary);
    color: var(--text-on-primary);
    box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.5);
    transform: translateY(-1px);
}

/* ============================================================
   GAMES DROPDOWN - Premium Style with SOLID border
   ============================================================ */
.shared-header-dropdown {
    position: relative;
}

.shared-header-dropdown-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--brand-primary);
    border-radius: 25px;
    padding: 8px 14px;
    color: var(--brand-primary);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

.shared-header-dropdown-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--brand-primary-rgb), 0.2), transparent);
    animation: headerBtnShimmer 2.5s ease-in-out infinite;
}

.shared-header-dropdown-btn:hover {
    background: var(--brand-primary);
    color: var(--text-on-primary);
    box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.5);
}

.shared-header-dropdown-btn .arrow {
    font-size: 0.6rem;
    transition: transform var(--transition-normal);
}

.shared-header-dropdown.open .arrow {
    transform: rotate(180deg);
}

.shared-header-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: rgba(5, 20, 5, 0.98);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.4);
    border-radius: var(--radius-lg);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: calc(var(--z-max) + 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.shared-header-dropdown.open .shared-header-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.shared-header-dropdown-section {
    padding: 4px 0;
}

.shared-header-dropdown-section + .shared-header-dropdown-section {
    border-top: 1px solid rgba(var(--brand-primary-rgb), 0.2);
    margin-top: 4px;
    padding-top: 8px;
}

.shared-header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: all var(--transition-normal);
}

.shared-header-dropdown-item:hover:not(.disabled) {
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary);
}

.shared-header-dropdown-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.shared-header-dropdown-item .icon {
    font-size: 1.1rem;
}

/* PNG icon images for dropdown */
.shared-header-dropdown-item .menu-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.shared-header-dropdown-item .soon {
    margin-left: auto;
    font-size: 0.65rem;
    background: rgba(var(--brand-secondary-rgb), 0.2);
    color: var(--brand-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-md);
}

/* ============================================================
   STATS DISPLAY - Premium Style (Horizontal Layout)
   ============================================================ */
.shared-header-stats {
    display: flex;
    gap: 12px;
}

.shared-header-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.3);
    border-radius: var(--radius-2xl);
    padding: 8px 14px;
}

.shared-header-stat.jackpot {
    border-color: rgba(var(--brand-secondary-rgb), 0.4);
}

.shared-header-stat-icon {
    font-size: 1rem;
}

.shared-header-stat-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.shared-header-stat-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.shared-header-stat.jackpot .shared-header-stat-value {
    color: var(--brand-secondary);
}

.shared-header-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shared-header-stat-sublabel {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Hide stats on very small screens */
@media (max-width: 480px) {
    .shared-header-stats {
        display: none;
    }
}

/* ============================================================
   USE SPINS BUTTON - Gold accent, links to wheel.html
   ============================================================ */
.shared-header-use-spins {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--brand-secondary);
    color: var(--brand-secondary);
    padding: 8px 16px;
    border-radius: 25px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.shared-header-use-spins::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--brand-secondary-rgb), 0.2), transparent);
    animation: headerBtnShimmer 2.5s ease-in-out infinite;
}

.shared-header-use-spins:hover {
    background: var(--brand-secondary);
    color: var(--text-on-primary);
    box-shadow: 0 0 20px rgba(var(--brand-secondary-rgb), 0.5);
    transform: translateY(-1px);
}

.shared-header-use-spins .icon {
    font-size: 0.9rem;
}

/* Hide on mobile - use footer nav instead */
@media (max-width: 767px) {
    .shared-header-use-spins {
        display: none;
    }
}

/* ============================================================
   WALLET BUTTON - Premium Style with SOLID border
   ============================================================ */
.shared-header-wallet {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    padding: 8px 16px;
    border-radius: 25px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
}

.shared-header-wallet::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--brand-primary-rgb), 0.2), transparent);
    animation: headerBtnShimmer 2.5s ease-in-out infinite;
}

.shared-header-wallet:hover {
    background: var(--brand-primary);
    color: var(--text-on-primary);
    box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.5);
}

.shared-header-wallet.connected {
    border-color: var(--brand-secondary);
    color: var(--brand-secondary);
}

.shared-header-wallet.connected::before {
    background: linear-gradient(90deg, transparent, rgba(var(--brand-secondary-rgb), 0.2), transparent);
}

.shared-header-wallet.connected:hover {
    background: var(--brand-secondary);
    color: var(--text-on-primary);
    box-shadow: 0 0 20px rgba(var(--brand-secondary-rgb), 0.5);
}

.shared-header-wallet .icon {
    font-size: 0.9rem;
}

.shared-header-wallet-address {
    font-family: monospace;
    font-size: 0.7rem;
}

/* Connecting state */
.shared-header-wallet.connecting {
    pointer-events: none;
    opacity: 0.7;
}

.shared-header-wallet.connecting::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--brand-primary);
    border-top-color: transparent;
    border-radius: var(--radius-full);
    animation: walletSpin 0.8s linear infinite;
    margin-left: 6px;
}

@keyframes walletSpin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   MOBILE NAVIGATION FOOTER
   - Auto-injected on mobile devices
   - Provides Spin, Trivia, Chat quick access
   - v4.9.0: Wallet browser support (MetaMask, Trust, etc.)
   ============================================================ */

/* CSS custom property for extra bottom padding (wallet browsers) */
:root {
    --wallet-browser-extra-padding: 0px;
}

.mobile-nav-footer {
    display: none;
    position: fixed;
    /* Account for safe-area (notched phones) + wallet browser toolbars */
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--wallet-browser-extra-padding, 0px));
    left: 0;
    right: 0;
    height: 85px;
    background: linear-gradient(180deg, rgba(5,15,5,0.95), rgba(0,5,0,0.98));
    border-top: 1px solid rgba(57,255,20,0.3);
    z-index: var(--z-toast);
    padding: 10px 30px 15px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .mobile-nav-footer {
        display: flex;
    }
    
    /* Add body padding for footer + safe area + wallet browser extra */
    body.has-mobile-footer {
        padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px) + var(--wallet-browser-extra-padding, 0px)) !important;
    }
    
    /* Wallet browser class adds extra padding */
    body.wallet-browser.has-mobile-footer {
        --wallet-browser-extra-padding: 60px;
    }
}

.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    flex: 1;
    max-width: 80px;
}

.mobile-nav-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(var(--brand-primary-rgb), 0.4);
    border-radius: var(--radius-xl);
    font-size: 1.3rem;
    transition: all var(--transition-normal);
    overflow: hidden;
}

.mobile-nav-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.mobile-nav-btn:hover .mobile-nav-icon,
.mobile-nav-btn:active .mobile-nav-icon {
    border-color: var(--brand-primary);
    box-shadow: 0 0 15px rgba(var(--brand-primary-rgb), 0.4);
    transform: scale(1.05);
}

.mobile-nav-label {
    font-size: 0.65rem;
    color: var(--brand-primary);
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Special styling for chat button */
.mobile-nav-btn.chat-btn .mobile-nav-icon img {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
}

/* ============================================================
   IMMERSIVE MODE STYLES
   - Hides header/footer for full-screen game experience
   - X button to exit, expand button to re-enter
   ============================================================ */

/* Exit button (X) - visible only in immersive mode */
.immersive-exit-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    color: var(--text-on-dark);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: calc(var(--z-max) + 2);
    display: none;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    -webkit-tap-highlight-color: transparent;
}

.immersive-exit-btn:hover {
    background: rgba(255, 0, 0, 0.3);
    border-color: #ff4444;
    color: #ff4444;
}

/* Expand button - visible only when NOT in immersive mode AND page has immersive content */
.immersive-expand-btn {
    position: fixed;
    top: 70px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(var(--brand-primary-rgb), 0.4);
    border-radius: var(--radius-full);
    color: var(--brand-primary);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: calc(var(--z-fixed) - 1);
    display: none;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    -webkit-tap-highlight-color: transparent;
}

/* Adjust expand button position when beta banner is visible */
body.has-beta-banner .immersive-expand-btn {
    top: 110px;
}

.immersive-expand-btn:hover {
    background: rgba(var(--brand-primary-rgb), 0.2);
    border-color: var(--brand-primary);
    box-shadow: 0 0 15px rgba(var(--brand-primary-rgb), 0.4);
}

/* Show expand button only when page has immersive content AND not in immersive mode */
body.has-immersive-content:not(.immersive-mode) .immersive-expand-btn {
    display: flex;
}

/* IMMERSIVE MODE ACTIVE */
body.immersive-mode .shared-header {
    display: none !important;
}

body.immersive-mode .mobile-nav-footer {
    display: none !important;
}

body.immersive-mode .immersive-exit-btn {
    display: flex;
}

body.immersive-mode .immersive-expand-btn {
    display: none !important;
}

/* Remove body padding in immersive mode */
body.immersive-mode {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Prize popups should still show above immersive UI */
body.immersive-mode .prize-popup,
body.immersive-mode .game-prize-popup {
    z-index: 10002 !important;
}