/* ==========================================================================
   Shared site theme - PollBaazi green & gold, used by ALL sections of
   beingsecretsanta.com (PollBaazi, Streax, Traitors, Collabs, Sinking Ship).
   Served from /site-theme.css and linked AFTER each page's own stylesheet
   and after /site-nav.css. Change colours/fonts/sizes here and every section
   updates. Each <body> carries data-section="..." for the few per-page rules.
   Semantic status colours (green = safe, red = out, etc.) are kept as-is.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

/* ---------- 1. Canonical tokens + aliases for each page's own variable names ---------- */
:root {
    --bg-color: hsl(145, 25%, 5%);
    --bg-gradient: radial-gradient(circle at 50% 0%, hsl(145, 30%, 12%) 0%, hsl(145, 25%, 4%) 80%);
    --panel-bg: rgba(18, 38, 28, 0.55);
    --panel-border: rgba(255, 255, 255, 0.08);
    --panel-glow: 0 8px 32px rgba(0, 0, 0, 0.37);
    --text-color: hsl(0, 0%, 96%);
    --text-muted: hsl(145, 12%, 70%);
    --text-dark: hsl(145, 25%, 15%);
    --accent-gold: hsl(45, 90%, 50%);
    --accent-gold-hover: hsl(45, 95%, 55%);
    --accent-gold-glow: rgba(255, 193, 7, 0.3);
    --accent-green: hsl(145, 60%, 42%);
    --accent-red: hsl(355, 80%, 48%);
    --font-primary: 'Outfit', sans-serif;
    --font-festive: 'Playfair Display', serif;
    --card-radius: 18px;

    /* Streax aliases */
    --bg-dark: var(--bg-color);
    --card-bg: var(--panel-bg);
    --border-glass: var(--panel-border);
    --text-primary: var(--text-color);
    --text-secondary: var(--text-muted);
    --fire-orange: var(--accent-gold);
    --fire-yellow: var(--accent-gold-hover);
    --card-shadow: var(--panel-glow);

    /* Traitors aliases */
    --gold: var(--accent-gold);
    --gold-dim: rgba(255, 193, 7, 0.28);

    /* Collabs alias (was blue) */
    --accent-blue: var(--accent-gold);
}

/* ---------- 2. Page background, font, text colour ---------- */
html { background-color: var(--bg-color); }
body[data-section] {
    font-family: var(--font-primary);
    background-color: var(--bg-color);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-color);
}
body[data-section] *:not(.fire-icon):not(code):not(pre):not(.cruise-title):not(.cruise-title *) {
    font-family: var(--font-primary);
}
/* Bangers on the Sinking Ship cruise bars matches the comic images, keep it */

/* ---------- 3. Titles: gold Outfit (as PollBaazi panel titles), same size everywhere ---------- */
body[data-section] .title,
body[data-section] .main-header h1,
body[data-section] .panel-header h1,
body[data-section] .header h1,
body[data-section] .container > h1 {
    font-family: var(--font-primary);
    color: var(--accent-gold);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 0 22px var(--accent-gold-glow);
    background: none;
    -webkit-text-fill-color: currentColor;
}
body[data-section] .subtitle,
body[data-section] .main-header p,
body[data-section] .trip-info {
    color: var(--text-muted);
    font-size: 1rem;
}
body[data-section] .panel-title,
body[data-section] .filter-title,
body[data-section] .rounds-title,
body[data-section] .tasks-title,
body[data-section] .winners-title {
    font-family: var(--font-primary);
    color: var(--accent-gold);
    letter-spacing: 0.3px;
}
body[data-section] .panel-title { font-size: 1.3rem; font-weight: 700; }

/* ---------- 4. Panels / cards ---------- */
body[data-section] .glass-panel,
body[data-section] .glass-card,
body[data-section] .game-panel,
body[data-section] .players-filter-bar,
body[data-section] .round-card,
body[data-section] .game-rules {
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border);
    border-radius: var(--card-radius);
    box-shadow: var(--panel-glow);
}
body[data-section] .player-card {
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border);
    border-radius: var(--card-radius);
    box-shadow: var(--panel-glow);
}
body[data-section] .player-card:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 18px var(--accent-gold-glow);
}
body[data-section] .player-card.winner-card {
    background: radial-gradient(circle at top, rgba(255, 193, 7, 0.14), rgba(18, 38, 28, 0.6));
    border: 1px solid var(--accent-gold);
    box-shadow: 0 0 22px var(--accent-gold-glow);
}
body[data-section] .character-icon { background: rgba(0, 0, 0, 0.35); border-color: var(--accent-gold); }
body[data-section] .game-panel { border-color: rgba(255, 193, 7, 0.45); }

/* ---------- 5. Traitors header block: the shared header replaces its black banner ---------- */
body[data-section="traitors"] .main-header {
    background: transparent;
    border-bottom: 1px solid var(--panel-border);
}

/* ---------- 6. Tables ---------- */
body[data-section] .streax-table th,
body[data-section] #players-table th,
body[data-section] table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border-bottom: 1px solid var(--panel-border);
}
body[data-section] .streax-table td,
body[data-section] #players-table td,
body[data-section] table td {
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
body[data-section] .streax-table tbody tr:hover,
body[data-section] #players-table tbody tr:hover,
body[data-section] table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
body[data-section] #players-table th.sortable:hover { color: var(--accent-gold); }
body[data-section] #players-table th .sort-ind { color: var(--accent-gold); }
body[data-section] .streak-badge { color: var(--accent-gold); border-color: rgba(255, 193, 7, 0.4); background: rgba(255, 193, 7, 0.12); }

/* ---------- 7. Inputs, selects, chips, buttons ---------- */
body[data-section] .search-box input,
body[data-section] .select-wrapper select,
body[data-section] .filter-select,
body[data-section] select {
    background: var(--panel-bg);
    color: var(--text-color);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
}
body[data-section] .search-box input:focus,
body[data-section] .select-wrapper select:hover,
body[data-section] .select-wrapper select:focus,
body[data-section] .filter-select:focus,
body[data-section] select:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--accent-gold-glow);
}
body[data-section] .select-wrapper::after { color: var(--accent-gold); }
body[data-section] select option { background: hsl(145, 25%, 8%); color: var(--text-color); }

body[data-section] .filter-chip {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    border-radius: 10px;
    font-weight: 600;
}
body[data-section] .filter-chip.active {
    background: rgba(46, 184, 114, 0.22);
    border-color: var(--accent-green);
    color: #fff;
    box-shadow: none;
}
body[data-section] .filter-chip:hover:not(.active) { border-color: var(--accent-gold); color: var(--accent-gold); }

body[data-section] .toggle-eliminated-btn {
    background: rgba(255, 193, 7, 0.12);
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold);
    font-family: var(--font-primary);
}
body[data-section] .toggle-eliminated-btn:hover {
    background: var(--accent-gold);
    color: var(--text-dark);
    box-shadow: 0 0 12px var(--accent-gold-glow);
}

/* Collabs: primary buttons / active tabs become gold & green like PollBaazi */
body[data-section="collabs"] .btn-primary {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-hover));
    color: var(--text-dark);
    font-weight: 700;
    border: none;
}
body[data-section="collabs"] .btn-primary:hover { box-shadow: 0 6px 18px var(--accent-gold-glow); filter: brightness(1.05); }
body[data-section="collabs"] .tab-btn.active {
    background: rgba(46, 184, 114, 0.22);
    border-color: var(--accent-green);
    color: #fff;
    box-shadow: none;
}
body[data-section="collabs"] .notice-alert { border-left-color: var(--accent-gold); }

/* ---------- 8. Links ---------- */
body[data-section] a:not(.site-nav-btn):not(.site-logo):not(.nav-btn):not(.btn):not(.btn-primary) { color: var(--accent-gold); }
body[data-section] a:not(.site-nav-btn):not(.site-logo):not(.nav-btn):not(.btn):not(.btn-primary):hover { color: var(--accent-gold-hover); }

/* ---------- 9. Sync banner (Streax) ---------- */
body[data-section] .sync-banner {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
}

/* ---------- 10. Footer ---------- */
body[data-section] .footer,
body[data-section] footer {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 1px solid var(--panel-border);
    background: transparent;
}
body[data-section] .footer a,
body[data-section] footer a { color: var(--accent-gold); }

/* ---------- 11. Scrollbars ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-green); }