/* ==========================================================================
   site.css - public pages (Voodoo ZA). Loaded after theme.css on the migrated
   public pages. Section 1 = shared public components, section 2 = per-page
   rules carried over from the old pages (scoped with [data-page], re-coloured
   to the Rust palette), section 3 = hand-made overrides.
   ========================================================================== */
/* ---- 1. shared public components (from the approved stats page) ---- */
.stats-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); justify-content: space-between; }
.stats-head .live { display: flex; align-items: center; gap: var(--s3); }
.count-chip { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.count-chip span { color: var(--text-muted); font-weight: 600; margin: 0 0.1em; }
.toolbar { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.toolbar .row { gap: var(--s3); }
.toolbar .tb-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); min-width: 5.5rem; }
#statGroups { flex-wrap: wrap; }
@media (max-width: 640px) { #statGroups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; } #statGroups > button { padding-left: 0.2rem; padding-right: 0.2rem; font-size: var(--fs-xs); } .toolbar .tb-label { min-width: 0; width: 100%; } }
.page-row .more { color: var(--accent-text); }
.se-sub { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin: var(--s2) 0; }
.se-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.se-cards.n3, .se-cards.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.se-cards.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.se-card { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: calc(var(--s3) * var(--d)) var(--s3); overflow: hidden; }
.se-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--se, var(--accent)); }
.se-card.heli { --se: var(--rust-red); } .se-card.bradley { --se: var(--rust-orange); } .se-card.supply { --se: var(--rust-blue); }
.se-card.satellite { --se: var(--rust-grey); } .se-card.oilrig { --se: var(--rust-green); } .se-card.cargo { --se: var(--rust-cream); }
.se-card .se-val { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.se-card .se-val.se-name { font-size: var(--fs-lg); line-height: 1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-card .se-extra { font-size: var(--fs-xs); color: var(--text-muted); }
.se-card .se-lbl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-top: 0.2rem; }
@media (max-width: 760px) { .se-cards, .se-cards.n3, .se-cards.n5, .se-cards.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wipe-note { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--s2) 0 0; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.bd-grid h3 { font-size: var(--fs-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--s2); }
.bd-grid table.roster td.stat, .bd-grid table.roster th.stat { text-align: right; }
.bd-grid .table-scroll { max-height: 22rem; }
.cta-strip { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; }
.cta-strip .links { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* hero: back link + lead for the content pages */
.hero .eyebrow-link { color: var(--accent-text); text-decoration: none; }
.hero .eyebrow-link:hover { color: var(--text-strong); text-decoration: underline; }
.hero .hero-lead { margin: var(--s2) 0 0; color: var(--text); font-size: var(--fs-md); max-width: 46rem; }
.hero .hero-lead span { color: var(--accent-text); margin: 0 0.35em; }
.stats-head .header-meta { display: flex; align-items: center; gap: var(--s3); }

/* old page building blocks, restyled */
[data-page] .page-main { display: block; }
[data-page] .roster-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: calc(var(--s5) * var(--d)) var(--s5); margin: 0 0 var(--s5); box-shadow: var(--shadow); }
[data-page] .roster-title, [data-page] .section-title { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--s4); font: 800 var(--fs-xl)/1.2 var(--font);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-strong); }
[data-page] .roster-title::before, [data-page] .section-title::before { content: ''; width: 0.55rem; height: 0.55rem; background: var(--accent); flex: 0 0 auto; }
[data-page] .stat-groups { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
[data-page] .stat-groups.page-row { margin-bottom: var(--s4); }
[data-page] .panel { margin-bottom: var(--s5); }
[data-page] .panel-title { margin-bottom: var(--s3); }
[data-page] td.wrap { max-width: none; width: auto; margin: 0; padding: calc(0.55rem * var(--d)) 0.75rem; white-space: normal; }

/* the old bottom button strip = a tidy call-to-action card */
[data-page] .actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s4); margin: var(--s5) 0 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
[data-page] .actions .btn { min-height: 2.4rem; padding: 0.4rem 0.9rem; font-size: var(--fs-xs); }
[data-page] .btn.btn-copy { background: var(--surface-3); color: var(--text-strong); border-color: var(--line-strong); }
[data-page] .btn.btn-copy:hover { background: var(--surface-2); border-color: var(--accent-line); }
[data-page] .btn.btn-primary { background: var(--accent-bg); color: var(--on-accent); border-color: var(--accent-bg); }
[data-page] .btn.btn-discord { background: #5865f2; color: #fff; border-color: #5865f2; }
[data-page] .actions .btn.btn-primary { margin-left: auto; }
[data-page] .btn.btn-copy.copied { background: var(--ok); color: var(--ink); border-color: var(--ok); }

/* equal-height card rows: cards stretch, the last button sits on one line */
[data-page] .card-row, [data-page] .se-cards { align-items: stretch; }
[data-page] .card-row > * { display: flex; flex-direction: column; height: 100%; }
[data-page] .card-row > * > .btn:last-child, [data-page] .card-row > * > .card-foot { margin-top: auto; }

@media (max-width: 640px) {
  [data-page] .roster-card { padding: var(--s4) var(--s3); }
  [data-page] .actions .btn.btn-primary { margin-left: 0; }
  [data-page] .actions .btn { flex: 1 1 auto; }
}

/* ===== page rules carried over from the old pages: re-coloured to the Rust palette, scoped per page ===== */
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) table.roster td.steamid { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.02em; white-space: nowrap; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) table.roster td.ping { font-family: var(--font); font-size: 0.68rem; color: var(--text); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) table.roster td.health { font-family: var(--font); font-size: 0.68rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"]) table.roster td.health-ok { color: var(--ok-text); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"]) table.roster td.health-mid { color: var(--text-strong); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"]) table.roster td.health-low { color: var(--bad-text); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-action table.roster th.group-combat,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-action table.roster td.group-combat,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-action table.roster th.group-farm,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-action table.roster td.group-farm,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-action table.roster th.group-craft,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-action table.roster td.group-craft,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-action table.roster th.group-boom,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-action table.roster td.group-boom,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-combat table.roster th.group-action,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-combat table.roster td.group-action,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-combat table.roster th.group-farm,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-combat table.roster td.group-farm,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-combat table.roster th.group-craft,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-combat table.roster td.group-craft,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-combat table.roster th.group-boom,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-combat table.roster td.group-boom,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-farm table.roster th.group-action,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-farm table.roster td.group-action,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-farm table.roster th.group-combat,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-farm table.roster td.group-combat,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-farm table.roster th.group-craft,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-farm table.roster td.group-craft,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-farm table.roster th.group-boom,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-farm table.roster td.group-boom,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-craft table.roster th.group-action,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-craft table.roster td.group-action,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-craft table.roster th.group-combat,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-craft table.roster td.group-combat,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-craft table.roster th.group-farm,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-craft table.roster td.group-farm,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-craft table.roster th.group-boom,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-craft table.roster td.group-boom,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-boom table.roster th.group-action,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-boom table.roster td.group-action,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-boom table.roster th.group-combat,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-boom table.roster td.group-combat,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-boom table.roster th.group-farm,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-boom table.roster td.group-farm,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-boom table.roster th.group-craft,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"], [data-page="stats"]) body.view-boom table.roster td.group-craft { display: none; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .wipe-note { max-width: 1100px; width: 100%; margin: -0.2rem auto 0.7rem; font-size: 0.75rem; color: var(--text-muted); text-align: left; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .honest-note { max-width: 1100px; width: 100%; margin: 0 auto 0.9rem; padding: 0.55rem 0.7rem; background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; font-size: 0.78rem; color: var(--text); text-align: left; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"], [data-page="bans"]) .honest-note strong { color: var(--text-strong); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) table.roster.se-table td.se-dt { white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) table.roster.se-table td.se-grid { font-family: var(--font); font-weight: 700; color: var(--text-strong); font-size: 0.72rem; white-space: nowrap; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) table.roster.se-table td.se-player { font-weight: 700; color: var(--text-strong); white-space: nowrap; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) table.roster.se-table td.se-desc { color: var(--text); min-width: 12rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .se-badge { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 999px; white-space: nowrap; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .se-badge.heli { color: var(--bad-text); background: color-mix(in srgb, var(--bad) 28%, transparent); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .se-badge.bradley { color: var(--text-strong); background: color-mix(in srgb, var(--rust-orange) 25%, transparent); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .se-badge.supply { color: var(--info-text); background: color-mix(in srgb, var(--info) 22%, transparent); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .se-badge.satellite { color: #c9b6ff; background: rgba(120,90,200,0.25); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .se-badge.oilrig { color: #7ff0d4; background: rgba(30,140,120,0.26); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .se-badge.cargo { color: #b6f58a; background: rgba(80,150,40,0.26); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .se-badge.deepsea { color: #8fd8ff; background: rgba(20,70,140,0.38); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .jump-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.9rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) .jump-links .jump-btn { text-decoration: none; display: inline-block; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) #serverEventsCard { scroll-margin-top: 1rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0.5rem; margin: 0.2rem 0 0.7rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-card { background: rgba(0,0,0,0.45); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 10px; padding: 0.55rem 0.6rem; text-align: center; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-card .gr-val { font-family: var(--font); font-size: 1.5rem; font-weight: 900; color: var(--text-strong); line-height: 1.1; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-card .gr-lbl { font-family: var(--font); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-top: 0.2rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table th.gr-gun,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table td.gr-gun { text-align: left; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table th.sortable:hover { color: var(--text-strong); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table th.sorted { color: var(--text-strong); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table th .arrow { font-size: 0.7em; margin-left: 0.2em; opacity: 0.85; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table tr.gr-row { cursor: pointer; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table td.gr-gun { font-weight: 700; color: var(--text-strong); white-space: nowrap; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table td.gr-gun .gr-cat { display: block; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-left: 1em; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-m { font-family: var(--font); font-weight: 700; color: var(--text-strong); font-size: 0.74rem; white-space: nowrap; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-who { display: block; font-size: 0.72rem; color: var(--text); white-space: nowrap; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-none { color: var(--text-faint); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) tr.gr-detail > td { padding: 0.2rem 0.4rem 0.7rem 1.6rem !important; background: rgba(0,0,0,0.35); text-align: left !important; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.gr-sub { width: 100%; border-collapse: collapse; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.gr-sub th { font-family: var(--font); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); padding: 0.3rem 0.35rem; border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); text-align: center; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.gr-sub td { font-size: 0.8rem; padding: 0.28rem 0.35rem; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: center; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.gr-sub th.l,
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.gr-sub td.l { text-align: left; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.gr-sub td.l { font-weight: 700; color: var(--text-strong); }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-more { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.3rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .sec { margin-top: 1.1rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .sec-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 0.9rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .gr-extra { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .filters { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 0.6rem 0; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .pager { display: flex; gap: 0.6rem; align-items: center; justify-content: center; margin: 0.7rem 0 0.2rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .pager button[disabled] { opacity: 0.35; cursor: default; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="blog"]) .pg-info { color: var(--text-muted); font-size: 0.85rem; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .hs { color: var(--accent-text); font-weight: 700; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .kind-pvp { color: var(--bad-text); font-weight: 700; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .kind-npc { color: #7dd3fc; font-weight: 700; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .kind-animal { color: #a3e635; font-weight: 700; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) table.roster td.name.wrap { white-space: normal; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .raid-list td { vertical-align: top; }
:is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"]) .muted { color: var(--text-muted); }
[data-page="bans"] table.roster td.steamid { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86rem; color: var(--text-muted); letter-spacing: 0.02em; white-space: nowrap; }
[data-page="bans"] table.roster td.ping { font-family: var(--font); font-size: 0.86rem; color: var(--text); }
[data-page="bans"] table.roster td.health { font-family: var(--font); font-size: 0.86rem; }
[data-page="bans"] .wipe-note { max-width: 1100px; width: 100%; margin: -0.6rem auto 1.4rem; font-size: 0.9rem; color: var(--text-muted); text-align: left; }
[data-page="bans"] .honest-note { max-width: 1100px; width: 100%; margin: 0 auto 1.8rem; padding: 0.85rem 1rem; background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; font-size: 0.95rem; color: var(--text); text-align: left; }
[data-page="bans"] table.roster td.reason { text-align: left; max-width: 28rem; white-space: normal; color: var(--text); font-size: 0.95rem; }
[data-page="bans"] a.steam-link { color: var(--accent-text); text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--accent) 45%, transparent); }
[data-page="bans"] a.steam-link:hover { color: var(--text-strong); border-bottom-color: var(--rust-orange); }
[data-page="bans"] table.roster td.expiry { font-family: var(--font); font-size: 0.8rem; color: var(--text); white-space: nowrap; }
[data-page="items"] .controls { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 0.65rem; align-items: stretch; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .controls button { min-height: 2.7rem; padding: 0.55rem 1rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--text-strong); font-family: var(--font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .controls button:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .meta-bar { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin-top: 0.75rem; font-size: 0.88rem; color: rgba(255,255,255,0.65); }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .meta-bar strong { color: var(--text-strong); font-weight: 700; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .credit { margin-top: 0.55rem; font-size: 0.78rem; color: rgba(255,255,255,0.45); }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .credit a { color: var(--accent-text); text-decoration: none; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .credit a:hover { color: var(--text-strong); }
:is([data-page="items"], [data-page="monuments"]) .grid { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.85rem; }
[data-page="items"] .item-card { display: flex; flex-direction: column; gap: 0.55rem; text-align: left; background: rgba(0,0,0,0.42); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 12px; padding: 0.85rem; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
[data-page="items"] .item-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent); transform: translateY(-1px); }
[data-page="items"] .item-top { display: flex; gap: 0.75rem; align-items: flex-start; }
[data-page="items"] .item-icon { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); object-fit: contain; image-rendering: auto; }
[data-page="items"] .item-title { font-family: var(--font); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-strong); margin: 0 0 0.25rem; line-height: 1.25; }
[data-page="items"] .item-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; padding: 0.12rem 0.45rem; }
[data-page="items"] .item-desc { font-size: 0.9rem; line-height: 1.35; color: rgba(255,255,255,0.72); min-height: 2.4em; }
[data-page="items"] .item-craft { margin-top: auto; padding-top: 0.45rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.84rem; line-height: 1.4; color: rgba(255,255,255,0.78); }
[data-page="items"] .item-craft .label { display: block; font-family: var(--font); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-strong); margin-bottom: 0.25rem; }
[data-page="items"] .item-short { font-size: 0.72rem; color: rgba(255,255,255,0.4); word-break: break-all; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .status { width: 100%; max-width: 1100px; padding: 1.5rem; text-align: center; color: rgba(255,255,255,0.65); font-size: 1.05rem; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .status.error { color: #ff8a7a; }
[data-page="items"] .item-icon,
[data-page="items"] .modal-icon { cursor: zoom-in; }
[data-page="items"] .lightbox { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,0.82); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"], [data-page="bases"]) .lightbox.open { opacity: 1; visibility: visible; }
[data-page="items"] .lightbox img { max-width: min(92vw, 640px); max-height: 86vh; width: auto; height: auto; border-radius: 14px; background: rgba(20,20,22,0.95); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 20%, transparent); image-rendering: auto; }
[data-page="items"] .lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.55); color: var(--text-strong); font-size: 1.3rem; cursor: pointer; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"], [data-page="bases"]) .lightbox-close:hover { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
[data-page="items"] .lightbox-caption { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); max-width: 90vw; padding: 0.35rem 0.7rem; border-radius: 8px; background: rgba(0,0,0,0.65); color: rgba(255,255,255,0.9); font-size: 0.9rem; text-align: center; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,0.72); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .modal-overlay.open { opacity: 1; visibility: visible; }
[data-page="items"] .modal { width: min(100%, 560px); max-height: min(90vh, 820px); overflow: auto; text-align: left; background: rgba(12, 12, 14, 0.96); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 16px; box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent); padding: 1.15rem 1.15rem 1.25rem; transform: translateY(8px); transition: transform 0.2s; }
:is([data-page="items"], [data-page="monuments"]) .modal-overlay.open .modal { transform: translateY(0); }
:is([data-page="items"], [data-page="monuments"]) .modal-close { float: right; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--text-strong); font-size: 1.2rem; line-height: 1; cursor: pointer; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .modal-close:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-text); }
[data-page="items"] .modal-hero { display: flex; gap: 1rem; align-items: center; clear: both; margin: 0.35rem 0 0.9rem; }
[data-page="items"] .modal-icon { width: 128px; height: 128px; flex: 0 0 auto; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); object-fit: contain; }
[data-page="items"] .modal h2 { font-family: var(--font); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--text-strong); margin: 0 0 0.4rem; line-height: 1.25; }
[data-page="items"] .modal-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; padding: 0.15rem 0.5rem; margin-bottom: 0.35rem; }
[data-page="items"] .modal-short { font-size: 0.78rem; color: rgba(255,255,255,0.45); word-break: break-all; }
[data-page="items"] .modal-desc { font-size: 1rem; line-height: 1.45; color: rgba(255,255,255,0.82); margin: 0 0 1rem; }
[data-page="items"] .modal-section-title { font-family: var(--font); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-strong); margin: 0 0 0.45rem; }
[data-page="items"] .modal-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.75rem; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .modal-chip { font-size: 0.82rem; font-weight: 700; color: var(--text-strong); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 8px; padding: 0.3rem 0.55rem; }
[data-page="items"] .modal-ings { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; }
[data-page="items"] .modal-ings li { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); font-size: 0.95rem; }
[data-page="items"] .modal-ings img { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; background: rgba(0,0,0,0.25); }
[data-page="items"] .modal-ings .amt { color: var(--text-strong); font-weight: 700; min-width: 2.2rem; }
[data-page="monuments"] { --tier-safe: #4ade80; --tier-green: #22c55e; --tier-blue: #3b82f6; --tier-red: #ef4444; --tier-event: #a855f7; --tier-none: var(--rust-orange); }
[data-page="monuments"] .controls { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 0.65rem; align-items: stretch; }
[data-page="monuments"] .tier-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
[data-page="monuments"] .tier-btn { min-height: 2.1rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.85); font-family: var(--font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
[data-page="monuments"] .tier-btn:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text-strong); }
[data-page="monuments"] .tier-btn.active { color: var(--text-strong); border-color: color-mix(in srgb, var(--accent) 75%, transparent); background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent); }
[data-page="monuments"] .mon-card { display: flex; flex-direction: column; gap: 0.55rem; text-align: left; background: rgba(0,0,0,0.42); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 12px; padding: 0.85rem; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
[data-page="monuments"] .mon-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent); transform: translateY(-1px); }
[data-page="monuments"] .mon-icon { width: 100%; height: 160px; display: block; border-radius: 10px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); object-fit: cover; object-position: center; cursor: zoom-in; }
[data-page="monuments"] .mon-icon { cursor: zoom-in; }
[data-page="monuments"] .modal-icon { cursor: zoom-in; }
:is([data-page="monuments"], [data-page="dlc"]) .lightbox { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,0.88); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
[data-page="monuments"] .lightbox img { max-width: min(96vw, 1100px); max-height: 90vh; width: auto; height: auto; border-radius: 14px; background: rgba(20,20,22,0.95); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 20%, transparent); object-fit: contain; }
:is([data-page="monuments"], [data-page="dlc"]) .lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.55); color: var(--text-strong); font-size: 1.3rem; cursor: pointer; z-index: 2; }
:is([data-page="monuments"], [data-page="dlc"]) .lightbox-caption { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); max-width: 90vw; padding: 0.35rem 0.7rem; border-radius: 8px; background: rgba(0,0,0,0.65); color: rgba(255,255,255,0.9); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; }
[data-page="monuments"] .mon-title { font-family: var(--font); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-strong); margin: 0 0 0.35rem; line-height: 1.25; }
:is([data-page="monuments"], [data-page="dlc"]) .chip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
:is([data-page="monuments"], [data-page="dlc"]) .chip { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 999px; padding: 0.12rem 0.45rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-text); }
[data-page="monuments"] .chip.tier-safe { color: var(--tier-safe); border-color: rgba(74,222,128,0.45); }
[data-page="monuments"] .chip.tier-green { color: var(--tier-green); border-color: rgba(34,197,94,0.45); }
[data-page="monuments"] .chip.tier-blue { color: var(--tier-blue); border-color: rgba(59,130,246,0.45); }
[data-page="monuments"] .chip.tier-red { color: var(--tier-red); border-color: rgba(239,68,68,0.45); }
[data-page="monuments"] .chip.tier-event { color: var(--tier-event); border-color: rgba(168,85,247,0.45); }
[data-page="monuments"] .chip.tier-none { color: var(--tier-none); border-color: color-mix(in srgb, var(--rust-orange) 40%, transparent); }
[data-page="monuments"] .mon-loot { font-size: 0.88rem; line-height: 1.35; color: rgba(255,255,255,0.72); min-height: 2.4em; }
[data-page="monuments"] .mon-tags { margin-top: auto; padding-top: 0.45rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; gap: 0.35rem; }
[data-page="monuments"] .mini-tag { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 0.18rem 0.4rem; }
[data-page="monuments"] .mini-tag strong { color: var(--text-strong); font-weight: 700; }
[data-page="monuments"] .modal { width: min(100%, 600px); max-height: min(90vh, 860px); overflow: auto; text-align: left; background: rgba(12, 12, 14, 0.96); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 16px; box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent); padding: 1.15rem 1.15rem 1.25rem; transform: translateY(8px); transition: transform 0.2s; }
:is([data-page="monuments"], [data-page="dlc"]) .modal-hero { display: block; clear: both; margin: 0.35rem 0 0.9rem; }
[data-page="monuments"] .modal-icon { cursor: zoom-in; width: 100%; height: 180px; display: block; border-radius: 14px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1); object-fit: cover; object-position: center; margin-bottom: 0.75rem; }
:is([data-page="monuments"], [data-page="dlc"]) .modal h2 { font-family: var(--font); font-size: 1rem; letter-spacing: 0.04em; color: var(--text-strong); margin: 0 0 0.45rem; line-height: 1.25; }
:is([data-page="monuments"], [data-page="dlc"]) .modal-section { margin-bottom: 0.95rem; }
:is([data-page="monuments"], [data-page="dlc"]) .modal-section-title { font-family: var(--font); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-strong); margin: 0 0 0.4rem; }
[data-page="monuments"] .modal-section p { font-size: 0.98rem; line-height: 1.45; color: rgba(255,255,255,0.82); }
:is([data-page="monuments"], [data-page="dlc"]) .modal-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.85rem; }
[data-page="monuments"] .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-bottom: 0.85rem; }
[data-page="monuments"] .field { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 0.45rem 0.55rem; }
[data-page="monuments"] .field .lbl { display: block; font-family: var(--font); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.2rem; }
[data-page="monuments"] .field .val { font-size: 0.9rem; color: rgba(255,255,255,0.85); line-height: 1.3; }
[data-page="dlc"] .controls { display: grid; grid-template-columns: 1fr auto; gap: 0.65rem; align-items: stretch; }
[data-page="dlc"] .filter-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
[data-page="dlc"] .filter-chip { min-height: 2.1rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.85); font-family: var(--font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
[data-page="dlc"] .filter-chip:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text-strong); }
[data-page="dlc"] .filter-chip.active { color: var(--text-strong); border-color: color-mix(in srgb, var(--accent) 75%, transparent); background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent); }
[data-page="dlc"] .grid { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; }
[data-page="dlc"] .dlc-card { display: flex; flex-direction: column; gap: 0.55rem; text-align: left; background: rgba(0,0,0,0.42); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 12px; padding: 0.85rem; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
[data-page="dlc"] .dlc-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent); transform: translateY(-1px); }
[data-page="dlc"] .dlc-icon { width: 100%; height: 140px; display: block; border-radius: 10px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); object-fit: cover; object-position: center; cursor: zoom-in; }
[data-page="dlc"] .dlc-title { font-family: var(--font); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-strong); margin: 0; line-height: 1.25; }
[data-page="dlc"] .chip.price { color: var(--text-strong); border-color: color-mix(in srgb, var(--rust-orange) 45%, transparent); }
[data-page="dlc"] .chip.kind-steam-dlc { color: #60a5fa; border-color: rgba(96,165,250,0.45); }
[data-page="dlc"] .chip.kind-store-pack { color: #a78bfa; border-color: rgba(167,139,250,0.45); }
[data-page="dlc"] .chip.kind-store-item { color: #f0abfc; border-color: rgba(240,171,252,0.45); }
[data-page="dlc"] .chip.cat-building { color: #fbbf24; border-color: rgba(251,191,36,0.45); }
[data-page="dlc"] .chip.cat-weapon { color: #f87171; border-color: rgba(248,113,113,0.45); }
[data-page="dlc"] .chip.cat-hazmat { color: #34d399; border-color: rgba(52,211,153,0.45); }
[data-page="dlc"] .chip.cat-decor { color: #e879f9; border-color: rgba(232,121,249,0.45); }
[data-page="dlc"] .chip.cat-misc { color: #94a3b8; border-color: rgba(148,163,184,0.45); }
[data-page="dlc"] .chip.cat-pack { color: #a78bfa; border-color: rgba(167,139,250,0.45); }
[data-page="dlc"] .chip.cat-steam,
[data-page="dlc"] .chip.cat-dlc { color: #60a5fa; border-color: rgba(96,165,250,0.45); }
[data-page="dlc"] .chip.type-music { color: #c4b5fd; border-color: rgba(196,181,253,0.45); }
[data-page="dlc"] .dlc-desc { font-size: 0.88rem; line-height: 1.35; color: rgba(255,255,255,0.72); min-height: 2.4em; }
[data-page="dlc"] .dlc-meta { margin-top: auto; padding-top: 0.45rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; font-size: 0.78rem; color: rgba(255,255,255,0.65); }
[data-page="dlc"] .dlc-meta strong { color: var(--text-strong); }
[data-page="dlc"] .modal { width: min(100%, 640px); max-height: min(90vh, 900px); overflow: auto; text-align: left; background: rgba(12, 12, 14, 0.96); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 16px; box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent); padding: 1.15rem 1.15rem 1.25rem; }
[data-page="dlc"] .modal-close { float: right; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--text-strong); font-size: 1.2rem; cursor: pointer; }
[data-page="dlc"] .modal-icon { cursor: zoom-in; width: 100%; height: 200px; display: block; border-radius: 14px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1); object-fit: cover; margin-bottom: 0.75rem; }
[data-page="dlc"] .modal-section p { font-size: 0.98rem; line-height: 1.45; color: rgba(255,255,255,0.82); white-space: pre-wrap; }
[data-page="dlc"] .contents-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
[data-page="dlc"] .contents-list li { font-size: 0.95rem; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 0.4rem 0.55rem; }
[data-page="dlc"] .contents-list li::before { content: "•"; color: var(--accent-text); margin-right: 0.45rem; font-weight: 700; }
[data-page="dlc"] .contents-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.55rem; }
[data-page="dlc"] .contents-grid li { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 0.45rem 0.35rem 0.5rem; text-align: center; cursor: zoom-in; transition: border-color 0.15s, background 0.15s; }
[data-page="dlc"] .contents-grid li:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
[data-page="dlc"] .contents-grid li::before { content: none; margin: 0; }
[data-page="dlc"] .ci-item { cursor: zoom-in; }
[data-page="dlc"] .contents-grid .ci-img { cursor: zoom-in; width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); }
[data-page="dlc"] .contents-grid .ci-name { font-size: 0.72rem; line-height: 1.25; color: rgba(255,255,255,0.88); font-weight: 600; max-width: 100%; word-break: break-word; }
[data-page="dlc"] .contents-note { font-size: 0.92rem; color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 0.55rem 0.7rem; margin: 0 0 0.5rem; }
[data-page="dlc"] .card-ci-strip { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.45rem; }
[data-page="dlc"] .card-ci-strip img { cursor: zoom-in; width: 28px; height: 28px; object-fit: cover; border-radius: 5px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3); }
[data-page="dlc"] .card-ci-more { font-size: 0.7rem; font-weight: 700; color: color-mix(in srgb, var(--rust-orange) 90%, transparent); align-self: center; margin-left: 0.15rem; }
[data-page="dlc"] .steam-btn,
[data-page="dlc"] .fp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0.55rem 1rem; border-radius: 10px; color: var(--text-strong); font-family: var(--font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; }
[data-page="dlc"] .steam-btn[hidden],
[data-page="dlc"] .fp-btn[hidden] { display: none !important; }
[data-page="dlc"] .steam-btn { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 20%, transparent); }
[data-page="dlc"] .steam-btn:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent); }
[data-page="dlc"] .fp-btn { border: 1px solid rgba(167, 139, 250, 0.55); background: rgba(167, 139, 250, 0.18); margin-left: 0.45rem; }
[data-page="dlc"] .fp-btn:hover { background: rgba(167, 139, 250, 0.32); box-shadow: 0 0 16px rgba(167, 139, 250, 0.25); }
[data-page="dlc"] .lightbox img { max-width: min(98vw, 1400px); max-height: 92vh; border-radius: 14px; background: rgba(20,20,22,0.95); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 20%, transparent); object-fit: contain; }
:is([data-page="dlc"], [data-page="bases"]) .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: rgba(0,0,0,0.6); color: var(--text-strong); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; user-select: none; }
:is([data-page="dlc"], [data-page="bases"]) .lightbox-nav:hover { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 75%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent); }
:is([data-page="dlc"], [data-page="bases"]) .lightbox-nav.prev { left: 0.75rem; }
:is([data-page="dlc"], [data-page="bases"]) .lightbox-nav.next { right: 0.75rem; }
:is([data-page="dlc"], [data-page="bases"]) .lightbox-nav[hidden] { display: none !important; }
[data-page="dlc"] .lightbox-counter { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 0.65rem; border-radius: 8px; background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.85); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; z-index: 2; }
[data-page="dlc"] .lightbox-counter[hidden] { display: none !important; }
[data-page="bases"] .panel-sub { color: rgba(255,255,255,0.7); font-size: 0.95rem; font-weight: 500; line-height: 1.45; margin-bottom: 0.85rem; }
[data-page="bases"] .status-bar { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
[data-page="bases"] .pill.closed { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: #ffc089; }
[data-page="bases"] .countdown { font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.85); }
[data-page="bases"] .countdown strong { color: var(--text-strong); }
[data-page="bases"] .auth-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
[data-page="bases"] .steam-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.7rem; padding: 0.55rem 1.1rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text-strong); font-family: var(--font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
[data-page="bases"] .steam-btn:hover { background: color-mix(in srgb, var(--accent) 32%, transparent); }
[data-page="bases"] .steam-btn.ghost { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.2); }
[data-page="bases"] .user-chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.65rem 0.35rem 0.35rem; border-radius: 999px; background: rgba(0,0,0,0.45); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
[data-page="bases"] .user-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
[data-page="bases"] .user-chip span { font-weight: 700; font-size: 0.95rem; color: var(--text-strong); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-page="bases"] .upload-form { display: grid; gap: 0.75rem; }
[data-page="bases"] .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
[data-page="bases"] label.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
[data-page="bases"] label.field span.req { color: var(--accent-text); }
[data-page="bases"] .form-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
[data-page="bases"] .form-actions button { min-height: 2.7rem; padding: 0.55rem 1.15rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text-strong); font-family: var(--font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
[data-page="bases"] .form-actions button:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
[data-page="bases"] .form-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
[data-page="bases"] .form-msg { font-size: 0.95rem; font-weight: 600; min-height: 1.2em; }
[data-page="bases"] .form-msg.err { color: var(--bad-text); }
[data-page="bases"] .form-msg.ok { color: #8dffb0; }
[data-page="bases"] .hint { font-size: 0.88rem; color: rgba(255,255,255,0.55); font-weight: 500; }
[data-page="bases"] .gallery-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.85rem; font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.7); }
[data-page="bases"] .gallery-meta strong { color: var(--text-strong); }
[data-page="bases"] .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; width: 100%; max-width: 1100px; }
[data-page="bases"] .card-img-wrap { aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
[data-page="bases"] .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-page="bases"] .card-body { padding: 0.75rem 0.8rem 0.9rem; }
[data-page="bases"] .card-title { font-family: var(--font); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-strong); margin-bottom: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-page="bases"] .card-meta { font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.78); line-height: 1.4; }
[data-page="bases"] .card-meta .k { color: var(--accent-text); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
[data-page="bases"] .card-foot { margin-top: 0.5rem; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
[data-page="bases"] .card-writeup { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); font-size: 0.92rem; font-weight: 500; line-height: 1.45; color: rgba(255,255,255,0.82); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
[data-page="bases"] .card-writeup-label { display: block; color: var(--accent-text); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.25rem; }
[data-page="bases"] .lightbox-stack { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(92vw, 720px); text-align: center; pointer-events: none; }
[data-page="bases"] .lightbox-writeup { margin-top: 0.55rem; padding: 0.75rem 0.9rem; background: rgba(0,0,0,0.72); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 10px; text-align: left; font-size: 0.98rem; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,0.9); white-space: pre-wrap; max-height: 28vh; overflow-y: auto; pointer-events: auto; }
[data-page="bases"] .lightbox-writeup[hidden] { display: none !important; }
[data-page="bases"] .lightbox-writeup .k { color: var(--accent-text); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; display: block; margin-bottom: 0.35rem; }
[data-page="bases"] .wipe-groups { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 1.35rem; }
[data-page="bases"] .wipe-group { text-align: left; }
[data-page="bases"] .wipe-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.65rem; padding-bottom: 0.45rem; border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
[data-page="bases"] .wipe-group-title { font-family: var(--font); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; }
[data-page="bases"] .wipe-group-count { font-size: 0.8rem; color: rgba(255,255,255,0.5); font-weight: 600; }
[data-page="bases"] .wipe-group .grid { display: grid; }
[data-page="bases"] .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; padding: 1rem; }
[data-page="bases"] .lightbox img { max-width: min(96vw, 1200px); max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 0 40px rgba(0,0,0,0.8); }
[data-page="bases"] .lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.55); color: var(--text-strong); font-size: 1.3rem; cursor: pointer; z-index: 2; }
[data-page="bases"] .lightbox-caption { max-width: 100%; padding: 0.35rem 0.7rem; border-radius: 8px; background: rgba(0,0,0,0.65); color: rgba(255,255,255,0.9); font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
[data-page="bases"] .mod-badge { display: inline-flex; align-items: center; margin-left: 0.35rem; padding: 0.12rem 0.45rem; border-radius: 999px; font-family: var(--font); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg, var(--rust-orange) 0%, var(--accent) 100%); border: 1px solid color-mix(in srgb, var(--rust-orange) 60%, transparent); }
[data-page="bases"] .card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
[data-page="bases"] .card-actions button { min-height: 1.9rem; padding: 0.25rem 0.65rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: rgba(0,0,0,0.4); color: var(--text-strong); font-family: var(--font); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
[data-page="bases"] .card-actions button:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text-strong); }
[data-page="bases"] .card-actions button.danger { color: var(--bad-text); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
[data-page="bases"] .card-actions button.danger:hover { background: color-mix(in srgb, var(--bad) 28%, transparent); color: var(--text-strong); }
[data-page="bases"] .card-actions button.btn-claim { color: #9dffb0; border-color: rgba(80, 200, 120, 0.5); }
[data-page="bases"] .card-actions button.btn-claim:hover { background: rgba(80, 200, 120, 0.22); color: var(--text-strong); }
[data-page="bases"] .mod-note { font-size: 0.88rem; font-weight: 600; color: var(--text-strong); margin-bottom: 0.35rem; }
[data-page="bases"] .edit-modal { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; padding: 1rem; }
[data-page="bases"] .edit-modal.open { opacity: 1; visibility: visible; }
[data-page="bases"] .edit-modal-panel { width: min(440px, 96vw); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px; padding: 1rem 1rem 1.1rem; box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 20%, transparent); text-align: left; }
[data-page="bases"] .edit-modal-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.75rem; }
[data-page="bases"] .edit-modal-actions button { min-height: 2.4rem; padding: 0.45rem 1rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text-strong); font-family: var(--font); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
[data-page="bases"] .edit-modal-actions button.ghost { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.2); }
:is([data-page="blog"], [data-page="blog-post"]) .group-btn .n { opacity: 0.75; margin-left: 0.3rem; font-weight: 600; }
:is([data-page="blog"], [data-page="blog-post"]) .cat-pill { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.16rem 0.55rem; border-radius: 999px; white-space: nowrap; text-decoration: none; color: var(--text-strong); background: color-mix(in srgb, var(--rust-orange) 25%, transparent); border: 1px solid rgba(220,170,60,0.4); }
:is([data-page="blog"], [data-page="blog-post"]) a.cat-pill:hover { color: var(--text-strong); border-color: var(--accent); }
:is([data-page="blog"], [data-page="blog-post"]) .pin-pill { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.16rem 0.55rem; border-radius: 999px; color: var(--ink); background: var(--rust-orange); }
:is([data-page="blog"], [data-page="blog-post"]) .page-title { font-family: var(--font); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); margin: -0.2rem 0 0.9rem; }
:is([data-page="blog"], [data-page="blog-post"]) .page-title span { color: var(--accent-text); }
[data-page="blog"] .cat-row { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin: 0.1rem 0 0.8rem; }
[data-page="blog"] .cat-desc { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin: -0.35rem 0 0.8rem; }
[data-page="blog"] .posts { display: flex; flex-direction: column; gap: 0.7rem; }
[data-page="blog"] .post-card { display: grid; grid-template-columns: 1fr; gap: 0.9rem; align-items: start; background: rgba(0,0,0,0.45); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 10px; padding: 0.8rem 0.9rem; transition: border-color 0.2s, box-shadow 0.2s; }
[data-page="blog"] .post-card.has-cover { grid-template-columns: 180px 1fr; }
[data-page="blog"] .post-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent); }
[data-page="blog"] .post-card.pinned { border-color: color-mix(in srgb, var(--rust-orange) 45%, transparent); }
[data-page="blog"] .post-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: var(--surface); border: 1px solid rgba(255,255,255,0.08); }
[data-page="blog"] .post-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
:is([data-page="blog"], [data-page="blog-post"]) .post-meta .dt { font-variant-numeric: tabular-nums; }
[data-page="blog"] .post-meta .by strong { color: var(--text); font-weight: 700; }
[data-page="blog"] .post-title { font-family: var(--font); font-size: clamp(0.95rem, 2.6vw, 1.2rem); font-weight: 700; line-height: 1.25; margin-bottom: 0.3rem; letter-spacing: 0.02em; }
[data-page="blog"] .post-title a { color: var(--text-strong); text-decoration: none; }
[data-page="blog"] .post-title a:hover { color: var(--text-strong); }
[data-page="blog"] .post-excerpt { color: var(--text); font-size: 0.98rem; font-weight: 500; overflow-wrap: anywhere; }
[data-page="blog"] .read-more { display: inline-block; margin-top: 0.35rem; color: var(--text-strong); text-decoration: none; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
[data-page="blog"] .read-more:hover { color: var(--accent-text); }
[data-page="blog"] .pager { display: flex; gap: 0.6rem; align-items: center; justify-content: center; margin: 0.9rem 0 0.2rem; }
[data-page="blog"] .blog-note { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 0.6rem; }
[data-page="blog-post"] .article { padding: 1.1rem 1.25rem 1.2rem; }
[data-page="blog-post"] .post-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: center; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.55rem; }
[data-page="blog-post"] .post-meta .by strong { color: var(--text); }
[data-page="blog-post"] h1.post-h1 { font-family: var(--font); font-weight: 900; font-size: clamp(1.25rem, 4.4vw, 2rem); line-height: 1.2; letter-spacing: 0.02em; color: var(--text-strong); margin-bottom: 0.6rem; overflow-wrap: anywhere; }
[data-page="blog-post"] .post-summary { color: #cfcfcf; font-size: 1.08rem; font-weight: 600; margin-bottom: 0.9rem; border-left: 3px solid var(--accent); padding-left: 0.7rem; }
[data-page="blog-post"] .post-cover { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: 10px; margin: 0.2rem 0 1rem; border: 1px solid rgba(255,255,255,0.08); background: var(--surface); }
[data-page="blog-post"] .post-body { font-size: 1.08rem; font-weight: 500; color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
[data-page="blog-post"] .post-body > * + * { margin-top: 0.8rem; }
[data-page="blog-post"] .post-body h2,
[data-page="blog-post"] .post-body h3,
[data-page="blog-post"] .post-body h4 { font-family: var(--font); color: var(--accent-text); letter-spacing: 0.04em; line-height: 1.3; margin-top: 1.3rem; }
[data-page="blog-post"] .post-body h2 { font-size: 1.15rem; }
[data-page="blog-post"] .post-body h3 { font-size: 0.98rem; color: var(--text-strong); }
[data-page="blog-post"] .post-body h4 { font-size: 0.85rem; color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.1em; }
[data-page="blog-post"] .post-body a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }
[data-page="blog-post"] .post-body a:hover { color: var(--accent-text); }
[data-page="blog-post"] .post-body strong { color: var(--text-strong); }
[data-page="blog-post"] .post-body ul,
[data-page="blog-post"] .post-body ol { padding-left: 1.5rem; }
[data-page="blog-post"] .post-body li + li { margin-top: 0.25rem; }
[data-page="blog-post"] .post-body li > ul,
[data-page="blog-post"] .post-body li > ol { margin-top: 0.25rem; }
[data-page="blog-post"] .post-body blockquote { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 0.5rem 0.9rem; border-radius: 0 8px 8px 0; color: #d8d8d8; }
[data-page="blog-post"] .post-body blockquote > * + * { margin-top: 0.5rem; }
[data-page="blog-post"] .post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; padding: 0.05rem 0.3rem; }
[data-page="blog-post"] .post-body pre { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 0.7rem 0.85rem; overflow-x: auto; }
[data-page="blog-post"] .post-body pre code { background: none; border: 0; padding: 0; font-size: 0.85rem; white-space: pre; }
[data-page="blog-post"] .post-body hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent); margin: 1.3rem 0; }
[data-page="blog-post"] .post-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0.4rem auto; cursor: zoom-in; border: 1px solid rgba(255,255,255,0.08); background: var(--surface); }
[data-page="blog-post"] .post-cover { cursor: zoom-in; }
[data-page="blog-post"] .post-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; margin-top: 1.3rem; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.85rem; color: var(--text-muted); }
[data-page="blog-post"] .post-foot a { color: var(--text-strong); text-decoration: none; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
[data-page="blog-post"] .post-foot a:hover { color: var(--accent-text); }
[data-page="blog-post"] .notfound h1 { font-family: var(--font); color: var(--accent-text); font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
[data-page="faq"] .faq-list { display: flex; flex-direction: column; gap: 0.65rem; }
[data-page="faq"] details.faq-item { background: rgba(0,0,0,0.35); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 10px; padding: 0.75rem 0.85rem; transition: border-color 0.2s, box-shadow 0.2s; }
[data-page="faq"] details.faq-item[open],
[data-page="faq"] details.faq-item:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 15%, transparent); }
[data-page="faq"] details.faq-item summary { cursor: pointer; list-style: none; font-family: var(--font); font-size: clamp(0.78rem, 2.2vw, 0.92rem); font-weight: 700; letter-spacing: 0.04em; color: var(--accent-text); outline: none; }
[data-page="faq"] details.faq-item summary::-webkit-details-marker { display: none; }
[data-page="faq"] details.faq-item summary::after { content: "+"; float: right; color: var(--accent-text); font-weight: 700; }
[data-page="faq"] details.faq-item[open] summary::after { content: "–"; }
[data-page="faq"] details.faq-item summary:hover { color: var(--text-strong); }
[data-page="faq"] .faq-body { margin-top: 0.55rem; font-size: 0.98rem; line-height: 1.5; color: var(--text); }
[data-page="faq"] .faq-body a { color: var(--accent-text); text-decoration: none; }
[data-page="faq"] .faq-body a:hover { color: var(--text-strong); }
[data-page="faq"] .faq-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; color: var(--text-strong); background: rgba(255,255,255,0.06); padding: 0.1rem 0.35rem; border-radius: 4px; }
[data-page="index"] .hero-tagline { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
[data-page="index"] .hero-status { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-top: var(--s3); color: var(--text-muted); font-size: var(--fs-sm); }
[data-page="index"] .wipe-card .wipe-next-date { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-strong); line-height: 1.1; text-transform: uppercase; }
[data-page="index"] .wipe-card .wipe-next-time { color: var(--accent-text); font-weight: 700; margin-bottom: var(--s3); }
[data-page="index"] #playerCount span { color: var(--text-muted); font-weight: 600; margin: 0 0.1em; }
[data-page="index"] #serverStatus.online { color: var(--ok-text); }
[data-page="index"] #serverStatus.offline { color: var(--bad-text); }
[data-page="index"] #serverStatus::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; margin-right: 0.4rem; }
[data-page="index"] .extra-stats span { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
[data-page="index"] a.wipe-seed-link { color: var(--accent-text); text-decoration: none; font-size: var(--fs-lg); white-space: normal; }
[data-page="index"] a.wipe-seed-link:hover { text-decoration: underline; }
[data-page="index"] .explore a.card { display: flex; flex-direction: column; gap: 0.2rem; }
[data-page="index"] .explore .x-title { font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-strong); font-size: var(--fs-lg); }
[data-page="index"] .explore .x-sub { color: var(--text-muted); font-size: var(--fs-sm); }
[data-page="index"] .twitch-badge { position: absolute; z-index: 2; top: var(--s2); left: var(--s2); padding: 0.15rem 0.5rem; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-strong); background: rgba(0,0,0,0.7); pointer-events: none; }
[data-page="index"] .twitch-badge.live { background: #b81d13; }
[data-page="index"] .twitch-badge.clip { background: #6d32c9; }
[data-page="index"] .discord-icon { background: #5865F2; }
[data-page="index"] .fb-icon { background: #1877F2; }
[data-page="index"] .fb-icon svg { width: 1.7rem; height: 1.7rem; fill: var(--text-strong); }
[data-page="index"] .yt-btn { background: #c4302b; color: var(--text-strong); }
[data-page="index"] .tw-btn { background: #6d32c9; color: var(--text-strong); }
[data-page="index"] .fb-btn { background: #1877F2; color: var(--text-strong); }
[data-page="index"] .yt-btn:hover,
[data-page="index"] .tw-btn:hover,
[data-page="index"] .fb-btn:hover { color: var(--text-strong); }
[data-page="index"] .host-credit img { width: 200px; height: auto; background: var(--bg); border-radius: var(--radius); display: block; }
[data-page="index"] .about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s4); align-items: stretch; }
[data-page="index"] .about-grid > .card { height: 100%; margin: 0; }
[data-page="index"] .host-credit { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s2); }
[data-page="index"] .community-row { align-items: stretch; }
[data-page="index"] .community-row > .card { display: flex; flex-direction: column; height: 100%; margin: 0; }
[data-page="index"] .community-row .discord-card,
[data-page="index"] .community-row .facebook-card { display: flex; flex-direction: column; flex: 1 1 auto; }
[data-page="index"] .community-row > .card > .btn:last-child,
[data-page="index"] .community-row .discord-card-join,
[data-page="index"] .community-row .facebook-card-join { margin-top: auto; }
[data-page="index"] #serverStatus { font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; }
[data-page="stats"] .stats-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); justify-content: space-between; }
[data-page="stats"] .stats-head .live { display: flex; align-items: center; gap: var(--s3); }
[data-page="stats"] .count-chip { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
[data-page="stats"] .count-chip span { color: var(--text-muted); font-weight: 600; margin: 0 0.1em; }
[data-page="stats"] .toolbar { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
[data-page="stats"] .toolbar .row { gap: var(--s3); }
[data-page="stats"] .toolbar .tb-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); min-width: 5.5rem; }
[data-page="stats"] #statGroups { flex-wrap: wrap; }
[data-page="stats"] .page-row .more { color: var(--accent-text); }
[data-page="stats"] .se-sub { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin: var(--s2) 0; }
[data-page="stats"] .se-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
[data-page="stats"] .se-cards.n3,
[data-page="stats"] .se-cards.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-page="stats"] .se-cards.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
[data-page="stats"] .se-card { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: calc(var(--s3) * var(--d)) var(--s3); overflow: hidden; }
[data-page="stats"] .se-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--se, var(--accent)); }
[data-page="stats"] .se-card.heli { --se: var(--rust-red); }
[data-page="stats"] .se-card.bradley { --se: var(--rust-orange); }
[data-page="stats"] .se-card.supply { --se: var(--rust-blue); }
[data-page="stats"] .se-card.satellite { --se: var(--rust-grey); }
[data-page="stats"] .se-card.oilrig { --se: var(--rust-green); }
[data-page="stats"] .se-card.cargo { --se: var(--rust-cream); }
[data-page="stats"] .se-card .se-val { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
[data-page="stats"] .se-card .se-val.se-name { font-size: var(--fs-lg); line-height: 1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-page="stats"] .se-card .se-extra { font-size: var(--fs-xs); color: var(--text-muted); }
[data-page="stats"] .se-card .se-lbl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-top: 0.2rem; }
[data-page="stats"] .wipe-note { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--s2) 0 0; }
[data-page="stats"] .bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
[data-page="stats"] .bd-grid h3 { font-size: var(--fs-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--s2); }
[data-page="stats"] .bd-grid table.roster td.stat,
[data-page="stats"] .bd-grid table.roster th.stat { text-align: right; }
[data-page="stats"] .bd-grid .table-scroll { max-height: 22rem; }
[data-page="stats"] .cta-strip { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; }
[data-page="stats"] .cta-strip .links { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 480px) {
  :is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) table.roster td.steamid { font-size: 0.58rem; }
  :is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"], [data-page="events"]) table.roster.se-table td.se-desc { min-width: 9rem; }
  [data-page="bans"] table.roster td.steamid { font-size: 0.78rem; }
}
@media (max-width:700px) {
  :is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px) {
  :is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) .gr-card .gr-val { font-size: 1.2rem; }
  :is([data-page="kills"], [data-page="raids"], [data-page="combat"], [data-page="activity"], [data-page="wipes"], [data-page="guns"]) table.roster.gr-table td.gr-gun { white-space: normal; }
}
@media (max-width: 720px) {
  :is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .controls { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  [data-page="monuments"] .field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  [data-page="bases"] .form-grid { grid-template-columns: 1fr; }
  [data-page="blog"] .post-card.has-cover { grid-template-columns: 1fr; }
  [data-page="stats"] #statGroups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  [data-page="stats"] #statGroups > button { padding-left: 0.2rem; padding-right: 0.2rem; font-size: var(--fs-xs); }
  [data-page="stats"] .toolbar .tb-label { min-width: 0; width: 100%; }
}
@media (max-width: 760px) {
  [data-page="index"] .about-grid { grid-template-columns: 1fr; }
  [data-page="stats"] .se-cards,
  [data-page="stats"] .se-cards.n3,
  [data-page="stats"] .se-cards.n5,
  [data-page="stats"] .se-cards.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---- 3. hand-made overrides (after the carried-over rules, so they win) ---- */
/* stat tiles on the kills / raids / combat / guns pages = the same tiles as the stats page */
[data-page] .gr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); align-items: stretch; }
[data-page] .gr-card { position: relative; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: calc(var(--s3) * var(--d)) var(--s3); overflow: hidden; box-shadow: none; }
[data-page] .gr-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
[data-page] .gr-card:nth-child(4n+2)::before { background: var(--rust-orange); }
[data-page] .gr-card:nth-child(4n+3)::before { background: var(--rust-blue); }
[data-page] .gr-card:nth-child(4n+4)::before { background: var(--rust-green); }
[data-page] .gr-card .gr-val { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
[data-page] .gr-card .gr-lbl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-top: 0.2rem; }
[data-page] .gr-card .gr-who, [data-page] .gr-card .gr-extra { color: var(--text-muted); font-size: var(--fs-xs); }
@media (max-width: 760px) { [data-page] .gr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* cards-gallery: items / monuments / dlc cards = the gallery (bases.html) card. Theme card panel (gradient, 1px line border,
   6px radius, density padding), 4:3 image on top (photos: cover; item icons: centred at their real size, never upscaled;
   Steam capsule art: fitted over a blurred copy so the logo is not cut off), small uppercase title with the accent square,
   meta text below, foot row pinned to the bottom so every card in a row ends on the same line.
   Grid = the gallery's column logic (auto-fill, 240px minimum, 1fr) without its 1100px cap: the grid spans exactly the page
   header / filter panel and the last column ends flush with them; min(240px, 100%) keeps one full-width column on phones. */
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) :is(.grid, .status) { max-width: none; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0.85rem; align-items: stretch; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) :is(.item-card, .mon-card, .dlc-card) { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: var(--s4); text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(38, 41, 40, 0.92), rgba(30, 32, 32, 0.92)); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: none; transform: none; transition: border-color .15s, transform .15s; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) :is(.item-card, .mon-card, .dlc-card):hover { border-color: var(--accent-line); box-shadow: none; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { :is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) :is(.item-card, .mon-card, .dlc-card):hover { transform: none; } }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .card-img-wrap { position: relative; flex: 0 0 auto; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .card-img-wrap img { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; object-fit: cover; object-position: center; }
[data-page="items"] .card-img-wrap { background: radial-gradient(circle at 50% 50%, rgba(228, 218, 209, 0.07), transparent 62%), var(--surface); }
[data-page="items"] .card-img-wrap img.item-icon { object-fit: scale-down; }
[data-page="dlc"] .card-img-wrap.fit::before { content: ''; position: absolute; inset: -16px; background-image: var(--art); background-size: cover;
  background-position: center; filter: blur(14px) brightness(0.45); }
[data-page="dlc"] .card-img-wrap.fit img { object-fit: contain; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; padding: 0.75rem 0.8rem 0.9rem; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .card-body .card-title { margin: 0; min-width: 0; flex-wrap: nowrap; font-family: var(--font); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; color: var(--text-strong); }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .card-body .card-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-page="items"] .chip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) :is(.item-desc, .mon-loot, .dlc-desc) { margin: 0; min-height: 0; font-size: 0.88rem; font-weight: 500; line-height: 1.4;
  color: rgba(255, 255, 255, 0.78); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[data-page="dlc"] .card-ci-strip { margin-top: 0.1rem; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .card-body .card-foot { margin-top: auto; padding-top: 0.55rem; border-top: 1px solid var(--line); display: flex; flex-direction: column;
  flex-wrap: nowrap; gap: 0.2rem; min-width: 0; font-size: 0.8rem; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .card-body .card-foot:empty { display: none; }
:is([data-page="items"], [data-page="monuments"], [data-page="dlc"]) .card-foot :is(.label, strong) { color: var(--accent-text); font-family: inherit; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; }
[data-page="items"] .card-foot .item-craft { margin: 0; padding: 0; border: 0; font-size: 0.84rem; color: rgba(255, 255, 255, 0.78); }
[data-page="items"] .card-foot .item-craft .label { display: inline; margin: 0 0.35rem 0 0; }
[data-page="items"] .card-foot .item-short { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.45); overflow-wrap: anywhere; word-break: normal; }
[data-page="monuments"] .card-foot .mini-tag { display: block; min-width: 0; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: none; font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-page="dlc"] .card-foot.dlc-meta { margin-top: auto; flex-direction: row; flex-wrap: wrap; gap: 0.2rem 0.75rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); }
/* ban-fix: public ban list = equal-height cards (no SteamIDs), Appeal button pinned to the bottom of every card */
[data-page="bans"] .stats-head .header-meta { flex-wrap: wrap; justify-content: flex-end; }
[data-page="bans"] .ban-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
[data-page="bans"] .ban-tools input { width: 100%; min-width: 0; }
[data-page="bans"] .ban-shown { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
[data-page="bans"] .ban-shown strong { color: var(--text-strong); }
[data-page="bans"] .ban-help { margin: var(--s3) 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }
[data-page="bans"] .ban-help a { color: var(--accent-text); }
[data-page="bans"] .ban-status { padding: var(--s5) var(--s4); text-align: center; color: var(--text-muted); }
[data-page="bans"] .ban-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s3); margin-top: var(--s4); align-items: stretch; }
[data-page="bans"] .ban-card { position: relative; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s4) var(--s4) var(--s3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
[data-page="bans"] .ban-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
[data-page="bans"] .ban-no { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
[data-page="bans"] .ban-name { margin: 0; font-size: var(--fs-md); line-height: 1.25; color: var(--text-strong); overflow-wrap: anywhere; }
[data-page="bans"] .ban-name a { color: inherit; text-decoration: none; }
[data-page="bans"] .ban-name a:hover { color: var(--accent-text); text-decoration: underline; }
[data-page="bans"] .ban-reason { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
[data-page="bans"] .ban-foot { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
[data-page="bans"] .ban-foot .btn { min-height: 2.25rem; }
[data-page="bans"] .ban-done { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--text-muted); font-size: var(--fs-xs); }
[data-page="bans"] .wipe-note { max-width: none; margin: var(--s3) 0 0; text-align: left; } /* was pulled up under the old table */
@media (max-width: 560px) {
  [data-page="bans"] .ban-tools { grid-template-columns: 1fr; }
  [data-page="bans"] .stats-head .header-meta { justify-content: flex-start; }
}
/* steamid-fix: Steam avatar on the ban cards (round, next to the name; neutral placeholder when unknown) */
[data-page="bans"] .ban-who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
[data-page="bans"] .ban-id { min-width: 0; }
[data-page="bans"] .ban-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-3);
  border: 1px solid var(--line-strong); }
[data-page="bans"] .ban-avatar.ph { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
/* legal-pages: terms / privacy / ban-guidelines. Readable prose inside the theme panels (78ch measure, 1.6 line height),
   2-column table of contents, [placeholder] highlight, table cells that wrap as label-over-text cards on phones. */
.legal-doc { display: grid; gap: var(--s4); }
.legal-doc > .panel { margin: 0; }
.legal-doc .legal-sec { scroll-margin-top: 5rem; }
.legal-doc p, .legal-doc li { line-height: 1.6; max-width: 78ch; }
.legal-doc p { margin: 0 0 var(--s3); }
.legal-doc p:last-child, .legal-doc ul:last-child, .legal-doc ol:last-child { margin-bottom: 0; }
.legal-doc h3 { margin: var(--s4) 0 var(--s2); font-size: var(--fs-md); color: var(--text-strong); }
.legal-doc .panel-title + h3 { margin-top: 0; }
.legal-doc ul, .legal-doc ol { margin: 0 0 var(--s3); padding-left: 1.3rem; }
.legal-doc li + li { margin-top: var(--s1); }
.legal-doc a:not(.btn) { color: var(--accent-text); overflow-wrap: anywhere; }
.legal-doc code { overflow-wrap: anywhere; }
.legal-doc code.nw { white-space: nowrap; }
.legal-doc .legal-meta { color: var(--text-muted); font-size: var(--fs-sm); }
.legal-doc .toc ol { columns: 2 16rem; column-gap: var(--s6); margin: 0; }
.legal-doc .toc li { break-inside: avoid; }
.legal-doc .ph { color: var(--warn-text); background: rgba(194, 109, 51, 0.15); border: 1px dashed rgba(194, 109, 51, 0.6); border-radius: 3px; padding: 0 0.3em; white-space: nowrap; }
.legal-doc .tbl-wrap { margin: 0 0 var(--s3); }
.legal-doc .t td { vertical-align: top; line-height: 1.5; }
.legal-doc .t td:first-child { min-width: 9rem; }
.legal-doc .ban-tbl td:first-child { min-width: 14rem; }
@media (max-width: 720px) {
  .legal-doc .stack-sm td { display: block; text-align: left; }
  .legal-doc .stack-sm td[data-l]::before { display: block; margin-bottom: 0.15rem; }
  .legal-doc .t td:first-child { min-width: 0; }
}
.legal-note a, .ban-help a { color: var(--accent-text); }
/* legal-fixes: cookie consent bar (ga-track.js). Fixed to the bottom, theme panel look with the accent edge;
   stacks text over full-width buttons on phones. Never wider than the viewport. */
.cookie-bar { position: fixed; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 1000; max-width: 62rem; margin: 0 auto;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); padding: var(--s3) var(--s4); }
.cookie-bar-inner { display: flex; gap: var(--s4); align-items: center; }
.cookie-bar-text { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.cookie-bar-text strong { color: var(--text-strong); }
.cookie-bar-text a { color: var(--accent-text); }
.cookie-bar-now { color: var(--text-muted); }
.cookie-bar-actions { display: flex; gap: var(--s2); flex: 0 0 auto; }
@media (max-width: 640px) {
  .cookie-bar { left: var(--s2); right: var(--s2); bottom: var(--s2); padding: var(--s3); }
  .cookie-bar-inner { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .cookie-bar-actions .btn { flex: 1 1 0; }
}
@media print { .cookie-bar { display: none; } }