/* public/css/arena-home.css
 *
 * Home page Arena skin. Surfaces/text come from theme.css's site-wide dark
 * palette; this page only swaps the accent to the cyan brand color.
 */
:root {
    --accent-primary: #00D9FF;
    --accent-secondary: #3b82f6;
}

/* Arena visual reskin for the home page. Home already has the right
 * *structure* (map-photo server cards, admin rental cards with a
 * password-regen action, a sparkline + leaderboard bento) — this file
 * only pushes the look toward the Arena system (glass cards, cyan brand
 * accent, rounded-18px) using the shared tokens from arena.css.
 * Loaded after home.css, so it wins on the selectors it touches.
 */

/* ── PLAY NOW row — Server Status / Activity / Admin Rental side by side ─
   Each piece keeps rendering as its own real <div class="home-section">
   (same IDs, same JS targets) — this just turns them into grid cells
   instead of three stacked full-width sections. */
.arena-row3 {
    display: grid;
    /* Server Status | Recent Matches | Top K/D — different widths on
       purpose (Recent Matches needs the most room for two-line rows), but
       all three now share one bottom edge (align-items: stretch) instead
       of ending at three different heights — with real content, Server
       Status routinely ran 150-200px taller than the other two, which
       read as broken/unfinished rather than an intentional bento. */
    grid-template-columns: 0.85fr 1.5fr 0.9fr;
    gap: 1.25rem;
    align-items: stretch;
    max-width: 1400px;
    margin: 0 auto;
    /* Bottom padding matches .home-section's own 3rem top padding, so the
       gap down to the next section (rent banner) is the same ~96px rhythm
       every other section-to-section gap on this page uses — it was 48px
       here (half the rest) because this row had no bottom padding at all. */
    padding: 2rem 1.5rem 3rem;
}
/* Rental Servers (admin col 3) carries a longer meta line + labeled
   .pwbtn ("Change", not icon-only) — give it more room than Top K/D got. */
.arena-row3.has-admin { grid-template-columns: 0.8fr 1.35fr 1.15fr; }

/* Every grid item defaults to min-width:auto, which means it refuses to
   shrink below its content's intrinsic width — that's what was blowing
   the Rental Servers column out past the page edge (its 3-up inner grid
   wanted ~700px+ and the outer track just let it overflow instead of
   shrinking). min-width:0 makes each column actually obey the track. */
.arena-row3 > * { min-width: 0; }

.arena-row3 .home-section,
.arena-row3 > .home-bento {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
}
.arena-row3 .home-section .container {
    max-width: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.arena-row3 .home-section:empty { display: none; }

/* Each column's real card — whether it's a bare .arena-card (Recent
   Matches / Top K-D) or nested under .home-section > .container (Server
   Status / admin Rental Servers) — fills the stretched grid-row height so
   all three cards' bottom borders land on the same line. */
.arena-row3 > .arena-card,
.arena-row3 .home-section .arena-card {
    height: 100%;
    box-sizing: border-box;
}

/* Server Status / Rental Servers both render their cards through the same
   .servers-grid (3-up by default, for full page width). Inside a ~350px
   column that 3-up grid is what was cramming 3 tiny cards into one row —
   force a single column here instead. */
.arena-row3 .servers-grid {
    grid-template-columns: 1fr !important;
}

@media (max-width: 900px) {
    .arena-row3, .arena-row3.has-admin { grid-template-columns: 1fr; }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
/* .hero-section-home stays a transparent full-bleed band (it carries the
   ambient radial-glow ::before / fade-to-bg ::after from home.css) — the
   actual hero content sits in its own glass card inside it, same as every
   other section on this page, matching the artifact's .c.glow.h2-hero. */
.hero-section-home { background: transparent; }
.hero-inner-card {
    /* Match .arena-row3 / .arena-card-wide below it — every section on this
       page shares the same 1400px content width in the artifact; the hero
       was accidentally narrower (900px), which is why it looked like a
       different-sized box than everything under it. */
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.2rem clamp(1.2rem, 4vw, 3rem);
}
.hero-section-home h1 .hero-accent { color: var(--arena-cyan-text, var(--arena-cyan)); }

.hero-pulse-dot { background: var(--arena-cyan) !important; }
.hero-stat-value { color: var(--arena-cyan) !important; }
.hero-platform-badge {
    border: 1px solid var(--arena-cyan-edge);
    color: var(--arena-cyan);
    background: var(--arena-cyan-soft);
}

/* "Join or Start a Room" merged into the hero card, side by side with the
   intro column (title/stats) instead of stacked below it — keeps the card
   from getting too tall. Logged-out hero (no .hero-has-play) stays the
   original single centered column. */
.hero-inner-card.hero-has-play {
    display: grid;
    grid-template-columns: minmax(280px, 350px) 1px 1fr;
    align-items: center;
    gap: 30px;
}
.hero-has-play .hero-intro-col { text-align: left; }
.hero-has-play .hero-intro-col h1 {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
}
.hero-has-play .hero-platform-badge { margin: 0 0 14px; }
.hero-has-play .hero-intro-col p { margin: 0; max-width: 100%; }
.hero-has-play .hero-intro-col .hero-pulse,
.hero-has-play .hero-intro-col .hero-cta-row { justify-content: flex-start; margin-left: 0; }
.hero-has-play .hero-stats-strip {
    justify-content: flex-start;
    margin: 22px 0 0;
    max-width: 100%;
}
.hero-has-play .hero-stat { flex: none; padding: 12px 18px 12px 0; }
.hero-play-divider { background: var(--border-color); align-self: stretch; }
.hero-play-col { min-width: 0; }
.hero-rejoin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
}

/* .arena-play-head / .arena-play-grid normally sit left-aligned already,
   but they inherit .hero-section-home .container's text-align:center —
   reset that, and drop the grid's own top divider now that the outer
   .hero-play-divider already separates the two halves. */
.hero-inner-card .arena-play-head,
.hero-inner-card .arena-play-grid { text-align: left; }
.hero-inner-card .hero-play-head { margin-bottom: 6px; }

@media (max-width: 1080px) {
    .hero-inner-card.hero-has-play { grid-template-columns: 1fr; }
    .hero-play-divider { display: none; }
    .hero-play-col { margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--border-color); }
    .hero-has-play .hero-intro-col,
    .hero-has-play .hero-intro-col p,
    .hero-has-play .hero-intro-col .hero-pulse,
    .hero-has-play .hero-intro-col .hero-cta-row,
    .hero-has-play .hero-stats-strip { text-align: center; justify-content: center; }
    .hero-has-play .hero-intro-col p { margin: 0 auto; max-width: 480px; }
}

/* ── Section headers ──────────────────────────────────────────────── */
.home-section-head h2,
.podium-hd span:first-child,
.sparkline-title {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 800 !important;
}

/* ── Bento (activity sparkline + leaderboard podium) ─────────────── */
.u-card, .sparkline-card, .podium-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--arena-radius) !important;
    box-shadow: 0 20px 44px -32px rgba(0, 0, 0, .5);
}
.podium-hd a { color: var(--arena-cyan); }
.podium-kd.is-hi { color: var(--arena-cyan) !important; }
.admin-podium-swap { display: flex; flex-direction: column; justify-content: center; }

/* ── Public server cards ──────────────────────────────────────────── */
.server-horizontal-card {
    border-radius: 16px !important;
    border: 1px solid var(--border-color) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.server-horizontal-card:hover {
    border-color: var(--arena-cyan-edge) !important;
    box-shadow: var(--arena-glow) !important;
    transform: translateY(-3px);
}
.server-bg-overlay {
    background: linear-gradient(
        100deg,
        color-mix(in srgb, var(--bg-primary) 90%, transparent) 30%,
        color-mix(in srgb, var(--bg-primary) 55%, transparent) 68%,
        color-mix(in srgb, var(--bg-primary) 22%, transparent) 100%
    ) !important;
}
.server-title {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
}
.server-players-badge {
    font-family: var(--font-mono) !important;
    background: var(--arena-cyan-soft) !important;
    color: var(--arena-cyan) !important;
    border: 1px solid var(--arena-cyan-edge);
    border-radius: 999px !important;
}
.server-copy-btn {
    background: color-mix(in srgb, var(--bg-primary) 60%, transparent) !important;
    border: 1px solid var(--arena-cyan-edge) !important;
    color: #fff !important;
    border-radius: 8px !important;
}
.server-copy-btn:hover { background: var(--arena-cyan-soft) !important; color: var(--arena-cyan) !important; }
.live-badge { background: var(--arena-cyan); color: #04121a; }

/* ── Admin rental cards (password-change panel) ───────────────────── */
.ahs-card {
    border-radius: var(--arena-radius) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-secondary) !important;
    box-shadow: 0 20px 44px -32px rgba(0, 0, 0, .5);
}
.ahs-name {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.ahs-badge {
    font-family: var(--font-mono) !important;
    border-radius: 999px !important;
}
.ahs-badge-players {
    background: var(--arena-cyan-soft) !important;
    color: var(--arena-cyan) !important;
    border: 1px solid var(--arena-cyan-edge);
}
.ahs-badge-available {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}
.ahs-badge-rented { color: var(--warning) !important; background: rgba(245, 158, 11, .12) !important; border: 1px solid rgba(245, 158, 11, .35) !important; }
.ahs-badge-free { color: var(--success) !important; background: rgba(34, 197, 94, .12) !important; border: 1px solid rgba(34, 197, 94, .35) !important; }
.ahs-val {
    border-radius: 8px !important;
}
.ahs-copy, .ahs-pw-copy, .ahs-pw-reveal {
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--bg-primary) 60%, transparent) !important;
    border: 1px solid var(--arena-cyan-edge) !important;
    color: #fff !important;
    padding: 3px 9px;
    cursor: pointer;
}
.ahs-copy:hover, .ahs-pw-copy:hover, .ahs-pw-reveal:hover { background: var(--arena-cyan-soft) !important; color: var(--arena-cyan) !important; }
.ahs-val-pw { letter-spacing: .08em; }
.ahs-foot { border-top: 1px solid var(--border-color) !important; }
.ahs-act {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 999px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}
.ahs-act-primary {
    background: rgba(168, 85, 247, .16) !important;
    border-color: rgba(168, 85, 247, .45) !important;
    color: #c993fb !important;
}
.ahs-act-primary:hover { background: rgba(168, 85, 247, .28) !important; }
.admin-section-title {
    color: var(--arena-cyan);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 800;
}

/* Sparkline now sits alone above the full Recent Matches table (its old
   .home-bento partner, Top K/D, moved into the Arena proof row) — just
   needs breathing room before the filter bar below it. */
.sparkline-standalone { margin-bottom: 1.25rem; }

/* ── "Welcome back" card — was still the old pre-Arena green/red look
   (solid-fill W/L pills, plain heading, green accent borders). Retint to
   the same cyan-for-win convention already used on the profile page's
   form squares (.pf-form), so the two don't visually contradict. */
.welcome-hi {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 800;
}
.welcome-rank {
    color: var(--arena-cyan-text, var(--arena-cyan));
    background: var(--arena-cyan-soft);
    border: 1px solid var(--arena-cyan-edge);
    border-radius: 999px;
    padding: .2rem .6rem;
}
.welcome-all:hover { color: var(--arena-cyan-text, var(--arena-cyan)); }
.welcome-last { background: var(--bg-tertiary); }
.welcome-last.is-good { border-left-color: var(--arena-cyan); }
.welcome-last.is-bad  { border-left-color: var(--danger, #dc2626); }
/* Win/loss pills need their own visible text color — the site's global
   `a { color: var(--accent-primary) !important }` rule otherwise forces
   every pill's K/D text to cyan, which is unreadable against the cyan
   "win" background (see the .is-good case). */
.welcome-pill.is-good { background: var(--success, #16a34a); color: #fff !important; }
.welcome-pill.is-bad  { background: var(--danger, #dc2626); color: #fff !important; }
.welcome-career-val { color: var(--arena-cyan-text, var(--arena-cyan)); }

/* ── Proof-row card header (kicker + trailing tag/link) ─────────────── */
.h2-col-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.h2-col-h .more {
    font-family: var(--font-mono);
    font-size: .6rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
a.h2-col-h .more:hover, .h2-col-h a.more:hover { color: var(--arena-cyan-text, var(--arena-cyan)); }
.h2-col-h .arena-kicker .kicker-tag { color: var(--text-muted); text-transform: none; letter-spacing: normal; margin-left: .3em; }

/* .home-section-head h2 (a compound selector, higher specificity than the
   bare .arena-kicker class) sets its own big/bold Barlow Condensed look —
   needed for the sections that keep a real heading, but it silently wins
   over .arena-kicker's small mono style on any <h2> using both. Every
   section header on Home is being moved to the "// label" kicker
   convention, so re-assert it here for any h2 carrying that class. */
.home-section-head h2.arena-kicker {
    font-family: var(--font-mono) !important;
    font-size: .68rem !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--arena-cyan-text, var(--arena-cyan)) !important;
}
/* .home-section-head defaults to a bigger flex row (used by big <h2>
   sections elsewhere); the small-kicker variant just needs its own
   vertical rhythm — align-items/margin already set on .h2-col-h below. */
.home-section-head.h2-col-h { margin-bottom: 10px; }

/* ── Recent Matches mini-rows (col 2) ────────────────────────────────── */
.h2-mr {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
}
.h2-mr:last-child { border-bottom: 0; }
.h2-mr .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.h2-mr .t1 { font-weight: 600; font-size: .84rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-mr .t1.won { color: var(--arena-cyan-text, var(--arena-cyan)); }
.h2-mr .res { font-family: var(--font-mono); font-weight: 700; color: var(--text-secondary); font-size: .82rem; flex: none; }
.h2-mr .meta { font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); margin-top: 3px; display: flex; justify-content: space-between; gap: 6px; }
.h2-mr .meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-mr .meta span:last-child { flex: none; }

/* ── Top K/D mini-rows (col 3, non-admin) ────────────────────────────── */
.hm-pp { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-color); }
.hm-pp:last-child { border-bottom: 0; }
.hm-pp .r { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text-muted); width: 16px; flex: none; }
.hm-pp:first-of-type .r { color: var(--arena-cyan-text, var(--arena-cyan)); }
.hm-pp .n { font-weight: 600; font-size: .84rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-pp .n a { color: inherit; text-decoration: none; }
.hm-pp .kd { font-family: var(--font-mono); font-size: .78rem; color: var(--text-secondary); flex: none; }

/* ── Small static layout helpers, replacing one-off inline styles ───── */
.home-empty-text.compact { padding: 1.5rem 0; }
.arena-card-wide { max-width: 1400px; margin: 0 auto; }
.arena-play-head .arena-h { font-size: 1.6rem; margin-top: .2rem; }
.arena-team-mode-label { margin-top: .6rem; }