/* public/css/arena.css
 *
 * Shared "Arena" design system: floating glass nav, cyan brand accent,
 * glass cards, tabs, and map-background tiles. Loaded LAST (after
 * theme.css) so it wins the cascade for the selectors it touches.
 *
 * Cyan (#00D9FF) is a fixed brand accent independent of the light/dark
 * theme toggle — it's already used this way elsewhere on the site
 * (style.css hero/ticker elements). Surfaces, text and borders keep
 * using the existing --bg-, --text- and --border-color theme variables
 * so both themes keep working through the toggle.
 */

:root {
    --arena-cyan: #00D9FF;
    --arena-cyan-soft: rgba(0, 217, 255, 0.14);
    --arena-cyan-edge: rgba(0, 217, 255, 0.32);
    --arena-glow: 0 10px 40px -14px rgba(0, 217, 255, 0.35);
    --arena-grad: linear-gradient(135deg, #00D9FF, #3b82f6);
    --arena-radius: 18px;
    --arena-cyan-text: var(--arena-cyan);
}

/* ============================================================
   SIDEBAR ACCOUNT CONTROLS
   ============================================================ */

/* Guest login — gradient pill matching the hero's "Sign in with Steam"
   button. The Valve non-affiliation disclaimer lives in the footer + this
   link's title tooltip. */
.nav-steam-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 1.1rem;
    border-radius: 999px;
    background: var(--arena-grad);
    color: #04121a;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s;
}
.nav-steam-btn:hover { filter: brightness(1.08); }

/* .user-btn was ~48px tall (32px avatar + 16px padding) against the rest
   of the nav's 44px min-height (.nav-link/.nav-join) — it stuck out and
   its avatar/name/ADMIN-badge/chevron row read as unevenly centered next
   to the plain-text nav items. Match the shared 44px height and trim the
   avatar to fit it with balanced padding instead of overflowing it. */
.user-btn {
    border-radius: 999px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 .9rem 0 .35rem;
}
.user-btn img { width: 28px; height: 28px; }
/* The ADMIN badge is a bordered/padded inline box next to plain text —
   at the default vertical-align:baseline it sat visibly higher than the
   username's baseline. inline-flex centers both against the same line
   box regardless of the badge's own border/padding. */
.user-btn-name {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.user-dropdown { border-radius: 14px; box-shadow: var(--arena-glow); }

/* ============================================================
   GLASS CARD PRIMITIVE  — reusable across every page
   ============================================================ */
.arena-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--arena-radius);
    padding: 1.3rem 1.4rem;
    box-shadow: 0 20px 44px -32px rgba(0, 0, 0, .5);
}
.arena-card.glow { border-color: var(--arena-cyan-edge); box-shadow: 0 20px 44px -28px rgba(0, 217, 255, .28); }
.arena-kicker {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--arena-cyan);
}
.arena-h {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.4rem;
    line-height: 1.05;
    color: var(--text-primary);
}

/* Segmented control — .arena-seg b for JS-driven client-side toggles
   (no navigation), .arena-seg a for real links (filters that reload with
   new query params) — same look either way. */
.arena-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.arena-seg b, .arena-seg a {
    flex: 1; text-align: center; font-family: var(--font-mono); font-size: .74rem;
    font-weight: 500; padding: .5rem; border-radius: 8px; background: var(--bg-tertiary);
    color: var(--text-secondary); cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.arena-seg b.on, .arena-seg b.active,
.arena-seg a.on, .arena-seg a.active { background: var(--arena-cyan-soft); color: var(--arena-cyan-text, var(--arena-cyan)); border: 1px solid var(--arena-cyan-edge); }

/* Tabs */
.arena-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); }
.arena-tab {
    font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
    padding: .5rem .3rem; margin-right: 1rem; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0;
}
.arena-tab.on, .arena-tab.active { color: var(--arena-cyan); border-bottom-color: var(--arena-cyan); }
.arena-tab-panel { padding-top: .6rem; }
.arena-tab-panel p { color: var(--text-secondary); font-size: .88rem; margin: 0 0 .4rem; }
.arena-tab-panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.arena-tab-panel li {
    font-family: var(--font-mono); font-size: .74rem; color: var(--text-muted);
    padding-left: 1rem; position: relative;
}
.arena-tab-panel li::before {
    content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px;
    border-radius: 50%; background: var(--arena-cyan);
}

/* Status row (server list, rental list — name + pill, optional map photo bg) */
.arena-row {
    position: relative; display: flex; align-items: center; gap: .75rem;
    padding: .7rem .8rem; border-radius: 12px; background: var(--bg-tertiary);
    border: 1px solid var(--border-color); margin-bottom: .5rem; overflow: hidden;
    background-size: cover; background-position: center 42%;
}
.arena-row:last-child { margin-bottom: 0; }
.arena-row.has-map {
    border-color: var(--arena-cyan-edge);
    box-shadow: 0 0 0 0 rgba(0, 217, 255, .45);
    animation: arena-row-pulse 2.4s ease-out infinite;
}
@keyframes arena-row-pulse {
    70% { box-shadow: 0 0 0 6px rgba(0, 217, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 217, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .arena-row.has-map { animation: none; } }
.arena-row .body { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.arena-row .nmrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.arena-row .nm { font-weight: 600; font-size: .88rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-row .meta { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-pill {
    font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
    padding: .18rem .55rem; border-radius: 999px; flex: none;
}
.arena-pill.on { color: var(--success); background: rgba(34, 197, 94, .14); }
.arena-pill.off { color: var(--text-muted); background: rgba(122, 155, 191, .12); }
.arena-pill.warn { color: var(--warning); background: rgba(245, 158, 11, .14); }
.arena-pill.yours {
    color: var(--arena-cyan-text, var(--arena-cyan, var(--accent-primary)));
    background: var(--arena-cyan-soft, rgba(0,217,255,.14));
    border: 1px solid var(--arena-cyan-edge, rgba(0,217,255,.3));
}
/* Live match score, shown in place of .meta when a real in-progress match
   is detected on a server row (see fetchLiveScore() in home.js). Reuses
   the existing bare .live-badge/.live-team-name/.live-score-digits rules
   (style.css) — this just lays out this flatter, single-row container. */
.arena-row-live-score {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 6px;
}
.arena-row-live-score[hidden] { display: none; }
.arena-row .iconbtn {
    position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 8px;
    background: var(--bg-card); border: 1px solid var(--border-color); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.arena-row .iconbtn svg { width: 15px; height: 15px; }
.arena-row .pwbtn {
    position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: .35rem;
    height: 32px; padding: 0 .7rem; border-radius: 8px; background: rgba(168, 85, 247, .14);
    border: 1px solid rgba(168, 85, 247, .4); color: var(--purple, #a855f7);
    font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase;
}
.arena-row .pwbtn svg { width: 13px; height: 13px; }

.admin-badge {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em;
    color: var(--purple, #a855f7); border: 1px solid rgba(168, 85, 247, .4);
    background: rgba(168, 85, 247, .12); border-radius: 5px; padding: .05rem .4rem;
    /* Spacing from the username now comes from .user-btn-name's flex
       `gap` — this used to be its own margin-left, which double-spaced
       once that gap was added. */
    display: inline-block;
}

/* ============================================================
   "JOIN OR START A ROOM" card — code input + format/tabs
   ============================================================ */
.arena-play-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 6px;
}
.arena-quick-pill {
    flex: none; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; font-size: .74rem; color: var(--arena-cyan);
    border: 1px solid var(--arena-cyan-edge); border-radius: 999px; padding: 7px 13px; white-space: nowrap;
    text-decoration: none; display: inline-block;
}
.arena-quick-pill:hover { background: var(--arena-cyan-soft); }
.arena-play-grid { display: grid; grid-template-columns: 1fr 1px 1.3fr; gap: 28px; align-items: start; }
.arena-play-div { background: var(--border-color); align-self: stretch; }
.arena-play-col { display: flex; flex-direction: column; gap: 10px; }
.arena-opt-label {
    font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.arena-join-row { display: flex; gap: 8px; }
.arena-code-input {
    flex: 1; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em;
    color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--border-color);
    border-radius: 9px; padding: 9px 12px; text-transform: uppercase;
}
.arena-code-input::placeholder { color: var(--text-muted); letter-spacing: .1em; }
.arena-join-help { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }
.arena-meta-line {
    font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary);
    margin-top: .4rem; padding-top: .6rem; border-top: 1px dashed var(--border-color);
}
@media (max-width: 760px) {
    .arena-play-grid { grid-template-columns: 1fr; }
    .arena-play-div { display: none; }
}

/* ============================================================
   Slim rental banner
   ============================================================ */
.arena-rentbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1.1rem 1.5rem; border-radius: var(--arena-radius);
    background: linear-gradient(120deg, var(--arena-cyan-soft), rgba(59, 130, 246, .08));
    border: 1px solid var(--arena-cyan-edge);
}
.arena-rentbar-text {
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    text-transform: uppercase; color: var(--text-primary);
}
.arena-rentbar-text b {
    /* Amount in the body font (same as the pricing cards below). */
    font-family: var(--font-body);
    color: var(--arena-cyan); font-weight: 900; font-size: 1.4rem; margin-right: .3rem;
}
.arena-rentbar-text span { font-family: var(--font-body); font-weight: 400; text-transform: none; font-size: .85rem; color: var(--text-secondary); margin-left: .25rem; }

/* ============================================================
   MAP PHOTO BACKGROUNDS — one copy of each image, reused by class
   ============================================================ */
.mapbg-mirage, .mapbg-inferno, .mapbg-nuke, .mapbg-dust2,
.mapbg-ancient, .mapbg-anubis, .mapbg-cache, .mapbg-overpass, .mapbg-vertigo,
.mapbg-train, .mapbg-office {
    background-size: cover; background-position: center;
}
.mapbg-mirage   { --tile-img: url('/matches/public/images/maps/mirage.png'); }
.mapbg-inferno  { --tile-img: url('/matches/public/images/maps/inferno.png'); }
.mapbg-nuke     { --tile-img: url('/matches/public/images/maps/nuke.png'); }
.mapbg-dust2    { --tile-img: url('/matches/public/images/maps/dust2.png'); }
.mapbg-ancient  { --tile-img: url('/matches/public/images/maps/ancient.png'); }
.mapbg-anubis   { --tile-img: url('/matches/public/images/maps/anubis.png'); }
.mapbg-cache    { --tile-img: url('/matches/public/images/maps/cache.png'); }
.mapbg-overpass { --tile-img: url('/matches/public/images/maps/overpass.png'); }
.mapbg-vertigo  { --tile-img: url('/matches/public/images/maps/vertigo.png'); }
.mapbg-train    { --tile-img: url('/matches/public/images/maps/train.png'); }
.mapbg-office   { --tile-img: url('/matches/public/images/maps/office.png'); }

.arena-row.has-map {
    background-image: linear-gradient(100deg, color-mix(in srgb, var(--bg-primary) 92%, transparent) 30%, color-mix(in srgb, var(--bg-primary) 60%, transparent) 68%, color-mix(in srgb, var(--bg-primary) 25%, transparent) 100%), var(--tile-img);
}

/* ============================================================
   FOOTER — restyled as a glass panel, same content
   ============================================================ */
.footer {
    background: transparent;
    padding: 2.5rem 0 2rem;
}
.footer .container { max-width: 1180px; }
.footer-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--arena-radius);
    padding: 1.6rem 1.8rem;
}
/* style.css gives each individual .footer-card its own hardcoded dark
   gradient (rgba(25,30,45,...)) — noticeably blacker than the navy
   --bg-secondary/--bg-tertiary used by every other card on the site.
   Nest them one shade lighter than the .footer-content wrapper instead,
   so they read as cells in a consistent panel, not a mismatched color. */
.footer-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
.footer-card h4 {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
    color: var(--arena-cyan);
}
.footer-card a:hover { color: var(--arena-cyan); }
.footer-bottom {
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: .78rem;
}