/* public/css/arena-pages.css
 *
 * Arena visual reskin, shared by leaderboard / match_detail / profile /
 * veto / tournaments / rent_server. Same approach as arena-home.css:
 * these pages already have the right structure (map-photo match header,
 * real tabs on the profile, a real empty state on tournaments) — this
 * file pushes the surface look toward the shared Arena tokens
 * (public/css/arena.css) without touching any page's PHP logic.
 * Loaded after each page's own stylesheet. Surfaces/text come from
 * theme.css's site-wide dark palette; these pages only swap the accent
 * to the cyan brand color.
 */
:root {
    --accent-primary: #00D9FF;
    --accent-secondary: #3b82f6;
}

/* ── Leaderboard ──────────────────────────────────────────────────── */
.lb-season-pill {
    border-radius: 999px;
    border: 1px solid var(--border-color);
}
.lb-season-pill.active {
    background: var(--arena-cyan-soft);
    border-color: var(--arena-cyan-edge);
    color: var(--arena-cyan);
}
.lb-table-wrap {
    border-radius: var(--arena-radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.lb-row:hover { background: var(--arena-cyan-soft); }
.lb-th-sortable:hover { color: var(--arena-cyan); }
.lb-rank-gold, .lb-rank-silver, .lb-rank-bronze { filter: drop-shadow(0 0 6px rgba(0, 217, 255, .25)); }

/* ── Match detail ─────────────────────────────────────────────────── */
.match-header-overlay {
    background:
        linear-gradient(to top, color-mix(in srgb, var(--bg-primary) 96%, transparent) 0%, color-mix(in srgb, var(--bg-primary) 78%, transparent) 50%, color-mix(in srgb, var(--bg-primary) 40%, transparent) 100%),
        linear-gradient(to right, color-mix(in srgb, var(--bg-primary) 55%, transparent) 0%, transparent 60%) !important;
}
.score-win { color: var(--arena-cyan) !important; }
.back-link:hover { color: var(--arena-cyan) !important; }

/* ── Profile ──────────────────────────────────────────────────────── */
.profile-header { border-radius: var(--arena-radius); }
.tab-btn { border-radius: 999px; }
.tab-btn.active {
    background: var(--arena-cyan-soft);
    color: var(--arena-cyan);
    border-color: var(--arena-cyan-edge);
}
.stats-hero {
    border-radius: var(--arena-radius);
    border: 1px solid var(--border-color);
}
.hs-value { color: var(--arena-cyan); }

/* ── Map veto ─────────────────────────────────────────────────────── */
.veto-server-pill, .veto-code-pill {
    border-radius: 999px;
    border: 1px solid var(--border-color);
}
.veto-team-card {
    border-radius: var(--arena-radius);
    border: 1px solid var(--border-color);
}
.turn-bar {
    border-radius: 12px;
    border: 1px solid var(--arena-cyan-edge);
    background: var(--arena-cyan-soft);
}
.veto-vs-badge { color: var(--arena-cyan); }
.map-grid .map-card,
.map-grid [class*="map-tile"] {
    border-radius: 14px !important;
    border: 1px solid var(--border-color) !important;
}
.map-grid .selected, .map-grid .picked, .map-grid .is-picked {
    border-color: var(--arena-cyan-edge) !important;
    box-shadow: var(--arena-glow) !important;
}
.btn-start-match {
    background: var(--arena-grad) !important;
    color: #04121a !important;
    border: none !important;
    border-radius: 12px;
}

/* ── Tournaments list ─────────────────────────────────────────────── */
/* .tl-hero used to be a full-bleed banner with its own hardcoded
   background/border (tournaments.css) — now carries .arena-card.glow
   (which supplies background/border/radius/shadow), so this just
   contains its width to match .tl-wrap below it and fixes the heading
   typography to the site's Barlow Condensed uppercase convention. */
.tl-hero {
    max-width: 1100px;
    margin: 24px auto 0;
}
.tl-hero .arena-kicker { display: block; margin-bottom: 10px; }
.tl-hero-title {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.tl-hero-title i { color: var(--arena-cyan); font-size: .85em; }
.tl-card {
    border-radius: var(--arena-radius) !important;
    border: 1px solid var(--border-color) !important;
}
.tl-card:hover { border-color: var(--arena-cyan-edge) !important; box-shadow: var(--arena-glow); }

/* ── Rent a server: booking form ─────────────────────────────────────
   .rental-form-card / .info-card / .form-group inputs all used a legacy
   --glass-bg/--section-label/--input-bg/--btn-primary token set (defined
   in theme.css, never mapped to the arena tokens) — near-invisible on the
   dark-locked background, which is why this form read as flat/unstyled
   next to the .arena-card sections right above it on the same page. */
.rental-form-card, .info-card {
    background: var(--bg-secondary) !important;
    border-radius: var(--arena-radius) !important;
    border: 1px solid var(--border-color) !important;
}
.rental-form-card > h2,
.form-section-title,
.info-card h3 {
    font-family: var(--font-mono) !important;
    color: var(--text-muted) !important;
}
.rental-form-card > h2 i,
.form-section-title i,
.info-card h3 i,
.form-group label i {
    color: var(--arena-cyan) !important;
}
.form-group label,
.form-group small {
    color: var(--text-muted) !important;
}
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 9px;
    color: var(--text-primary) !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--arena-cyan-edge) !important;
    box-shadow: 0 0 0 3px var(--arena-cyan-soft) !important;
}
.form-group select option { background: var(--bg-secondary); color: var(--text-primary); }
.info-card ul li, .info-card ol li { border-bottom-color: var(--border-color) !important; }
.btn-submit {
    background: var(--arena-grad) !important;
    color: #04121a !important;
    border-radius: 12px !important;
}
.price-summary { border-radius: 12px; border: 1px solid var(--arena-cyan-edge); background: var(--arena-cyan-soft); }
.btn-submit {
    background: var(--arena-grad) !important;
    color: #04121a !important;
    border: none !important;
    border-radius: 12px;
}