/* =========================================================
   1. GLOBAL & RESET
========================================================= */
:root {
  --app-bg: #0e1217;
  --header-h: 70px;
  --card-bg: #0f1619;
  --card-header-bg: rgba(255, 255, 255, 0.08);
  --table-header-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --text: rgba(255, 255, 255, 0.9);
  --text-dim: #6a7785;
  --accent: #3dd1dc;
  --flag-w: 20px;
  --flag-h: 14px;
  --leg-count: 1;
  --accent-cyan: #00f2fe;
  --accent-gold: #f59e0b;

    /* 🟢 1. Centralized Ad & Layout Variables */
  --ad-h-base: 60px; /* Base height for mobile */
  --ad-h: calc(var(--ad-h-base) + env(safe-area-inset-bottom));
  --content-gap: calc(var(--ad-h) + 55px); /* Padding for scrollable content */


}

/* 🟢 2. Override variables for desktop automatically */
@media (min-width: 768px) {
  :root {
    --ad-h-base: 100px;
    --content-gap: calc(var(--ad-h) + 20px);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; background: var(--app-bg); min-height: 100vh;
  color: var(--text); font-family: system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

body { padding-top: env(safe-area-inset-top); }
body::-webkit-scrollbar { display: none; }
body.pan-active { overflow: hidden; touch-action: none; }

/* =========================================================
   2. APP SHELL
========================================================= */
#app { position: relative; min-height: 100vh; padding-top: var(--header-h); }



/* =========================================================
   3. HEADER & ACTIONS
========================================================= */
#app-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 20001; pointer-events: none; }

#action-bar {
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: var(--header-h); padding: 0 20px;
  background: rgba(14, 18, 23, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08);
  /* 🟢 FIX: Ensure header is visually above the timeline */
  position: relative; z-index: 100;
}

#app-subheader {
    /* 🟢 FIX: Ensure timeline sits below header for slide-out effect */
    position: relative; z-index: 1;
    pointer-events: auto;
}

.nav-section { flex: 1; display: flex;  z-index: 21000;}
#controls-section { flex: 0 0 auto; display: flex; justify-content: center; }
#interactive-section { flex: 1; display: flex; justify-content: flex-end; }

.run-tournament-button {
  height: 42px; padding: 0 24px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.92);
  color: #000; font-weight: 800; text-transform: uppercase; cursor: pointer;
}

@media (max-width: 600px) {
    #run-tournament-button { font-size: 0; padding: 0 16px !important; min-width: auto; }
    #run-tournament-button::after { content: "RUN"; font-size: 14px; }
}

/* =========================================================
   4. CONTENT FREEZE & VISUAL DYNAMICS
========================================================= */
.user-count #count, #tournaments-count {
  display: inline-block; transition: all 0.3s ease-in-out; opacity: 1; transform: scale(1);
}
.user-count { transition: opacity 0.3s ease-in-out; opacity: 1; display: flex; align-items: center; justify-content: center; }
.user-count.fade-out { opacity: 0 !important; }
.updating-count { opacity: 0 !important; transform: scale(0.5) !important; }
.fade-transition { opacity: 0 !important; transition: opacity 0.2s ease-in-out; }

.status-indicator {
    color: #2ecc71; font-size: 10px; margin-right: 4px; vertical-align: middle;
}
.status-indicator.pulse { animation: status-pulse 2s infinite; }
@keyframes status-pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

#spinner {
  visibility: hidden; width: 80px; height: 80px;
  border: 2px solid #f3f3f3; border-top: 3px solid #f25a41; border-radius: 100%;
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
  animation: spin 1s infinite linear; z-index: 99999;
}
#spinner.show { visibility: visible; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Freeze Content */
body.modal-open #app-content, body.menu-is-open #app-content {
    pointer-events: none !important; touch-action: none !important;
}
body.modal-open #app-header, body.menu-is-open #app-header {
    z-index: 30050 !important; pointer-events: auto !important;
}

#app-content {
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: opacity;
    padding-bottom: var(--content-gap); /* 🟢 FIX: Global Ad Clearance */
}
@media (min-width: 769px) {
    #app-content { transform-origin: center top; will-change: transform, opacity; transform: scale(1) translate3d(0, 0, 0); }
    body.menu-is-open #app-content, body.modal-open #app-content { transform: scale(0.96) translate3d(0, 10px, 0); opacity: 0.6; border-radius: 16px; }
}
@media (max-width: 768px) {
    body.menu-is-open #app-content, body.modal-open #app-content { opacity: 0.3; transform: none !important; }
}

/* =========================================================
   5. UTILITIES & CONTROLS
========================================================= */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden { display: none; }
.no-transition { transition: none !important; }



/* =========================================
   6. HEADER COCKPIT (Absolute Anchoring)
   ========================================= */

/* The Anchor Container (Holds the RUN Button) */
.header-action-stack .button-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The width is determined SOLELY by the RUN button */
}

/* Base Absolute Wing Style (Shared by Gear & Sat) */
.t-ctrl-btn.mode-btn.ghost-wing {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer; transition: all 0.2s ease;
    z-index: 21001;

    /* Default Visuals */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
}

/* 📡 POSITION 1: SATELLITE (Near Left) */
/* Anchored 12px to the left of the RUN button */
#btn-mode-toggle.ghost-wing {
    right: 100%;
    margin-right: 12px;

    /* "Reserved Space" Logic: Hidden but layout-ready */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.9);
}

/* ⚙️ POSITION 2: GEAR (Far Left) */
/* Anchored left of Satellite */
/* Math: 12px (Sat Gap) + 32px (Sat Width) + 8px (Gear Gap) = 52px */
#btn-adv-toggle.ghost-wing {
    right: 100%;
    margin-right: 52px;

    /* Logic: Always visible, dim by default */
    opacity: 0.5;
}

/* --- ACTIVE STATES --- */

/* Gear Active (Advanced Mode ON) */
body.advanced-active #btn-adv-toggle.ghost-wing {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* Satellite Active (Advanced Mode ON -> Visible) */
body.advanced-active #btn-mode-toggle.ghost-wing {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

/* Satellite Live Mode Color */
body.advanced-active #btn-mode-toggle.ghost-wing.mode-live {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Hover Effects */
@media (hover: hover) {
    .t-ctrl-btn.mode-btn.ghost-wing:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        border-color: #fff;
        transform: translateY(-50%) scale(1.1) !important;
        opacity: 1 !important;
    }
    /* Prevent hovering on hidden satellite */
    body:not(.advanced-active) #btn-mode-toggle.ghost-wing:hover {
        background: transparent; border-color: transparent; cursor: default;
    }
}

/* =========================================
   7. STATUS PILL (Stable Dashboard System)
   ========================================= */

.tournament-status-pill {
    display: inline-flex !important;
    display: none !important;
    align-items: center; width: auto; min-width: 0;
    background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px; white-space: nowrap; opacity: 0; visibility: hidden;
    pointer-events: none; -webkit-pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
body.advanced-active .tournament-status-pill {
    opacity: 1; visibility: visible; display: none; pointer-events: none; -webkit-pointer-events: auto;
}

.pill-grid {
    display: grid; grid-template-columns: auto auto;
    grid-template-rows: auto auto; row-gap: 0px; column-gap: 16px;
    line-height: 1; text-align: center; position: relative;
    transition: grid-template-rows 0.4s ease, row-gap 0.4s ease;
}
body.advanced-active .pill-grid { grid-template-rows: auto auto; row-gap: 3px; }

.pill-grid::after {
    content: ""; position: absolute; top: 2px; bottom: 2px; left: 50%;
    width: 1px; background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%); pointer-events: none;
}
.grid-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #555; transition: color 0.3s ease; }
.grid-label.active { color: #fff; }
.grid-sub { font-size: 8px; color: #777; font-family: monospace; opacity: 0; overflow: hidden; transition: opacity 0.4s ease; width:31px; }
body.advanced-active .grid-sub { opacity: 1; }
.grid-sub.active { color: #aaa; }

@media (max-width: 600px) {
    .group-header-inner { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; }
    .grid-label { font-size: 8px; }
    .grid-sub { font-size: 7px; }
    .pill-grid { column-gap: 12px; }
}

/* =========================================
   8. HELP UI & MODAL (Missing Styles)
   ========================================= */

/* A. The Toggle Container (Switch + Help Icon) */
.mode-toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 350px;
    width: 90%;
    margin: 20px auto 10px auto; /* Spacing from header */
    gap: 10px;
}

/* B. The Switch (Segmented Control) */
.segmented-control {
    position: relative;
    display: flex;
    flex: 1;
    background: rgba(255, 255, 255, 0.05); /* Dark glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    padding: 4px;
    user-select: none;
}

.segmented-control input { display: none; }

.segmented-control label {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    z-index: 2;
    cursor: pointer;
    transition: color 0.3s ease;
}

.segmented-control input:checked + label { color: #fff; }

.selection-indicator {
    position: absolute;
    top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px);
    background: #333;
    border-radius: 99px;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

#mode-scratch:checked ~ .selection-indicator {
    transform: translateX(100%);
}

/* C. The Help Icon (Ghost Button) */
.mode-help-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; cursor: help;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .mode-help-icon:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border-color: #fff;
    }
}

/* D. The Modal Overlay (Hidden by Default) */
.help-modal-container {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6); /* Dim backdrop */
    backdrop-filter: blur(4px);

    display: none; /* 🟢 CRITICAL: Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 20px;

    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Visible State (Toggled by JS) */
.help-modal-container.is-visible {
    display: flex; /* Flex to center the card */
    opacity: 1;
}

/* E. The Modal Card (Inside the container) */
.help-modal-container .modal-card {
    background: #1a1e23;
    width: 100%;
    max-width: 320px;
    max-height: none; /* Let content dictate height */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);

    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.help-modal-container.is-visible .modal-card {
    transform: scale(1);
}

/* =========================================================
   FORECAST LINKS (Desktop Pill vs Mobile Footer)
========================================================= */

/* 1. Hide the Header Pill on Mobile */
.header-forecast-link {
    display: none;
}

/* 2. Mobile Footer: Standard document flow at the bottom */
.appshell-footer {
    display: block;
    width: 100%;
    background: transparent;
    margin-top: 0;
    text-align: center;
    font-size: 0.75rem;
    color: #484f58;
    border-top: none;

    /* 🟢 FIX: Removed the massive ad clearance since #app-content handles it globally now */
    padding: 20px 20px 0px 20px;
}

.appshell-footer a {
    color: #586069;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Subtle brighten on mobile tap/hover (using the about-footer hover color) */
@media (min-width: 768px) {
    .appshell-footer a:hover,
    .appshell-footer a:active {
        color: #8b949e;
    }
}

/* ---------------------------------------------------------
   DESKTOP OVERRIDES
--------------------------------------------------------- */
@media (min-width: 768px) {
    /* Hide the text footer completely so it doesn't create a void */
    .appshell-footer {
        display: none !important;
    }

    /* Show the sleek Pill next to the Live status */
    .header-forecast-link {
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: 15px; /* Space between link and the Live pill */
        padding: 6px 12px;
        border-radius: 99px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
    }

    /* Ultra-Subtle Hover */
    .header-forecast-link:hover {
        color: rgba(255, 255, 255, 0.8); /* Gently brightens from 0.6, but not full white */
        border-color: rgba(255, 255, 255, 0.15); /* Barely visible shift from 0.1 */
        background: rgba(255, 255, 255, 0.05); /* Just a tiny bump from 0.03 */
    }
}

/* 🟢 POSITION 3: SHARE (Right Wing) */
.right-wing.share-btn {
    left: 100%;
    margin-left: 12px;
    opacity: 0.7;
}

@media (max-width: 767px) {
    .right-wing.share-btn {
        display: none !important;
    }
}

/* 🟢 TIMELINE GHOST WING */
.timeline-nav-group {
    position: relative; /* Anchor for absolute children */
}


.timeline-nav-group .share-btn {
    opacity: 0.7;
}


@media (min-width: 768px) {
    .timeline-nav-group .share-btn {
        display: none !important;
    }
}

.share-btn.ghost-wing-right {
    position: absolute !important;
    left: 100%;       /* Start at the right edge of the nav group */
    margin-left: 12px; /* Maintain the consistent gap */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    transition: all 0.2s ease;
}

/* 🟢 MOBILE RESPONSIVENESS */
@media (max-width: 767px) {
    /* If the screen is too narrow, we might need to nudge it closer */
    .share-btn.ghost-wing-right {
        margin-left: 28px;
        transform: translateY(-50%) scale(0.8) !important;
        transform-origin: center;
    }

    /* Ensure the timeline-controls container has enough side padding
       so the button doesn't hit the screen edge */
    #timeline-controls {
        padding: 0 40px;
    }
}

.appshell-footer {
    display: flex;
    flex-direction: column; /* Stacked on mobile */
    align-items: center;
    gap: 16px; /* 🟢 Healthy vertical gap */
    padding: 30px 20px;
    text-align: center;
}

.footer-primary-links {
    display: flex;
    gap: 20px; /* Space between the two stats links */
    font-size: 11px;
}

.footer-actions {
    width: 100%;
    display: flex;
    justify-content: center;
}

#footer-share-link {
    user-select: none;
    ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 99px;

    /* 🟢 The "Sleek" Look: Dimmed, but distinct */
    background: rgba(61, 209, 220, 0.05);
    border: 1px solid rgba(61, 209, 220, 0.2);
    color: var(--accent); /* Now the accent feels part of a "button" */

    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

#footer-share-link:active {
    background: rgba(61, 209, 220, 0.15);
    transform: scale(0.98);
}

/* 🟢 DESKTOP RE-ALIGNMENT */
@media (min-width: 768px) {
    .appshell-footer {
        flex-direction: row; /* Side-by-side on desktop */
        justify-content: center;
        gap: 30px;
    }

    /* On desktop, we can put the pipe back if you like,
       but with Flex gap, you probably don't need it. */
}


.archive-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05); /* Subtle dark glass */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 20px;

    /* 🟢 FIX: Sizing and Spacing */
    width: 90%;
    max-width: 600px;
    margin: 20px auto 0 auto; /* Centered, no bottom margin */

    font-size: 13px;
    color: #eee;
    z-index: 100;

    /* 🟢 FIX: Animation properties */
    max-height: 150px; /* arbitrary height taller than the banner will ever be */
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.banner-text strong { color: var(--accent); }

.banner-actions { display: flex; align-items: center; gap: 15px; }

.banner-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.banner-link:hover { text-decoration: underline; }

.banner-close {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    line-height: 1;
}

.banner-close:hover { color: white; }

/* 🟢 NEW: The Slide-up Animation State */
.archive-banner.dismissed {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-width: 0;
}