:root {
  /* Base RGB triplets — the whole palette's tints/lines/glows derive from these two,
     so the theme customizer only has to set a few colours to reskin everything. */
  --accent-rgb: 240, 130, 12;   /* accent (amber) */
  --fg-rgb:     228, 226, 214;  /* foreground/text — drives neutral lines + hovers */
  --bg:        #0d0e0a;
  --bg-2:      #0a0b08;
  --panel:     #15160f;
  --panel-2:   #1c1d14;
  --inset:     #0b0c08;
  --amber:     #f0820c;
  --amber-hi:  #ff9a2e;
  --on-amber:  #1a1206;   /* text on amber fills — same value as the admin panel */
  --online:    #6cbf3f;
  --alarm:     #e5443f;
  --standby:   #e0a92e;
  --gold:      #d9b24a;
  --silver:    #b8bcc2;
  --bronze:    #c2814a;
  --discord:    #5865f2;
  --discord-dn: #4752c4;
  --text:      #e4e2d6;
  --muted:     #8e8f82;
  --faint:     #63645a;
  --line:      rgba(var(--fg-rgb), 0.09);
  --line-2:    rgba(var(--fg-rgb), 0.05);
  --line-amber: rgba(var(--accent-rgb), 0.32);
  --hover-bg:  rgba(var(--fg-rgb), 0.05);
  --glow:      rgba(var(--accent-rgb), 0.12);
  --scanline:  rgba(var(--fg-rgb), 0.014);
  --motd-rgb:    var(--accent-rgb);   /* MOTD banner tint (defaults to accent) */
  --motd-accent: var(--amber);        /* MOTD banner border/text */
  --mono: 'Share Tech Mono', 'Consolas', monospace;
  --ui:   'Chakra Petch', 'Segoe UI', Tahoma, sans-serif;
  --radius: 4px;   /* aligned with the admin panel */
  --radius-md: 6px;
  --radius-lg: 8px;
  --pill: 999px;
  /* Live-map marker palette — shared with the admin map. */
  --c-player:  #35d07f;
  --c-base:    #ff9a2e;
  --c-vehicle: #5aa0ff;
  --c-chest:   #c9a24b;
  --c-storage: #bd7be6;
  --offline:   #7c8594;
}
* { box-sizing: border-box; }
/* Media never overflows its container (bleed images opt out — they crop edge-to-edge). */
img:not(.bunker-img):not(.outpost-img) { max-width: 100%; }
/* Keyboard focus stays visible on inputs that reset the native outline. */
.search:focus-within { border-color: var(--line-amber); }
.items-toolbar input:focus-visible,
.items-toolbar select:focus-visible,
.map-search-row input:focus-visible,
.sf-select:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
/* Base scale ≈ 20px (124% of 16px) — sized so the site reads comfortably at 100%
   browser zoom (matches what previously needed zooming to ~110%). Phones keep
   their own tuned scale; the mobile header/map layouts are tight already. */
html { scroll-behavior: smooth; font-size: 124%; background: var(--bg); }
@media (max-width: 900px) and (min-width: 641px) { html { font-size: 116%; } }
@media (max-width: 640px) { html { font-size: 106%; } }
body {
  margin: 0;
  background: transparent; /* the backdrop lives on body::before */
  color: var(--text); font-family: var(--ui); line-height: 1.5; letter-spacing: 0.01em;
  min-height: 100vh; display: flex; flex-direction: column;
}
/* Themed dark base (amber glow + scanlines) — always present, shown when a tab has
   no wallpaper / the server isn't premium. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 500px at 82% -12%, rgba(var(--accent-rgb),0.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(var(--fg-rgb),0.014) 0 1px, transparent 1px 3px);
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
  background-size: cover, auto;
  transition: opacity 0.25s ease;
}
/* Per-tab wallpaper (premium). A warm dark overlay tones the (differently-coloured)
   photo to the theme and FADES to near-solid toward the bottom, so it melts into the
   page. The image URL comes from --wallpaper, set per tab by the frontend. */
body.has-wallpaper::before {
  background-image:
    radial-gradient(1100px 500px at 82% -12%, rgba(var(--accent-rgb),0.12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(var(--fg-rgb),0.014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(14,11,7,0.55) 0%, rgba(12,10,6,0.80) 48%, rgba(11,10,6,0.99) 92%),
    var(--wallpaper, none);
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  background-position: center, top left, center, center;
  background-size: cover, auto, cover, cover;
}
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-hi); }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.svg-defs { position: absolute; }
.ico { width: 1.05em; height: 1.05em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Header + nav stick together as one unit, so the nav can't slide under the
   header from a mismatched offset. */
.topbar { position: sticky; top: 0; z-index: 30; transition: transform 0.25s ease; }
.topbar.nav-hidden { transform: translateY(-100%); }
.hud-top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--line-amber);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
}
.brand { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.brand img { height: 50px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; }
.brand-sub { font-family: var(--mono); font-size: 0.66rem; color: var(--amber); letter-spacing: 0.32em; }

.readout {
  margin-left: auto; display: flex; align-items: center; gap: 0.9rem;
  padding: 0.4rem 1rem 0.4rem 0.85rem; border: 1px solid var(--line); border-left: 2px solid var(--faint);
  background: var(--inset); border-radius: var(--radius);
}
.readout-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.readout.online { border-left-color: var(--online); }
.readout.online .readout-dot { background: var(--online); box-shadow: 0 0 10px var(--online); animation: pulse 2s infinite; }
.readout.offline { border-left-color: var(--alarm); }
.readout.offline .readout-dot { background: var(--alarm); box-shadow: 0 0 10px var(--alarm); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.45;} }
.readout-pop { display: flex; flex-direction: column; }
.readout-num { font-family: var(--mono); font-size: 1.4rem; color: var(--amber-hi); line-height: 1; }
.readout-cap { font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px; }
.readout-state-wrap { display: flex; flex-direction: column; padding-left: 0.9rem; border-left: 1px solid var(--line); line-height: 1.2; }
.readout-state { font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.06em; }
.readout-sub { font-size: 0.65rem; color: var(--muted); }

.header-right { display: flex; align-items: center; gap: 0.5rem; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
/* Hamburger toggle — hidden on desktop, shown on phones (see the 640px block). */
.ham-btn {
  display: none; align-items: center; justify-content: center; padding: 0.45rem 0.55rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted); cursor: pointer;
}
.ham-btn .ico { width: 1.25em; height: 1.25em; }
.ham-btn.open, .ham-btn:hover { color: var(--amber-hi); border-color: var(--line-amber); }
.lang-select-wrap { display: inline-flex; }
.lang-select { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--muted); font-size: 0.85rem; }
.lang-select .ico { width: 1em; height: 1em; }
/* Custom language dropdown with flags (native selects can't show images). The
   BUTTON carries the border/background itself and mirrors .discord-invite /
   .admin-link metrics exactly (same padding, font and inherited line-height),
   so all header controls share one height — the wrapper is just an anchor. */
.lang-dd { position: relative; border: 0; background: none; }
.lang-dd-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; width: 100%;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-family: var(--ui); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  /* Buttons default to line-height:normal (~1.2) while the neighbouring <a>
     controls inherit the body's 1.5 — that few-px difference was the height
     mismatch. Match the anchors explicitly. */
  line-height: 1.5;
}
.lang-dd-btn:hover { color: var(--amber-hi); border-color: var(--line-amber); }
.lang-flag { width: 1.35em; height: 1em; border-radius: 2px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.lang-dd-chev { margin-left: auto; color: var(--muted); font-size: 0.7rem; }
.lang-dd-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 185px;
  max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  padding: 0.35rem; background: var(--panel); border: 1px solid var(--line-amber);
  border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.lang-dd-list[hidden] { display: none; }
.lang-dd-item {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.6rem;
  background: none; border: 0; border-radius: var(--radius); color: var(--text);
  font-family: var(--ui); font-size: 0.88rem; cursor: pointer; text-align: left;
}
.lang-dd-item:hover { background: var(--hover-bg); }
.lang-dd-item.active { background: rgba(var(--accent-rgb), 0.12); color: var(--amber-hi); }
.player-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; max-width: 180px;
  padding: 0.45rem 0.8rem; border: 1px solid var(--line-amber); border-radius: var(--radius);
  background: var(--panel-2); color: var(--text); font-weight: 600; font-size: 0.85rem;
}
/* A class's `display` beats the plain [hidden] attribute (author vs UA styles), so
   these header controls would otherwise show as empty bordered boxes when JS sets
   `hidden` (player chip before login / when Discord OAuth is off; the Discord-invite
   pill when no invite URL is configured). Make `hidden` actually hide them. */
.player-chip[hidden], .discord-invite[hidden] { display: none; }
.player-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; margin: -2px 0 -2px -2px; }
.admin-link {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted);
  font-size: 0.85rem; font-weight: 600; background: var(--panel-2);
}
.admin-link:hover { color: var(--amber-hi); border-color: var(--line-amber); }

/* ── Main nav ───────────────────────────────────────────────────────────── */
.mainnav {
  display: flex; gap: 0.25rem; padding: 0 1.5rem; background: var(--bg-2);
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.nav-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; white-space: nowrap;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--ui); font-size: 0.9rem; font-weight: 600;
  padding: 0.85rem 0.9rem; letter-spacing: 0.02em;
}
.nav-btn:hover { color: var(--text); }
.nav-btn.active { color: var(--amber); border-bottom-color: var(--amber); }
.nav-btn[hidden] { display: none; }
.nav-btn .ico { font-size: 1.05rem; }

main { width: 100%; max-width: 1600px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }
.view[hidden] { display: none; }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.panel::before, .panel::after { content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none; border-color: var(--line-amber); border-style: solid; border-width: 0; }
.panel::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.panel::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; margin-bottom: 1rem; }
/* Let the heading shrink and wrap its meta internally so the refresh button always
   stays beside the title (top-aligned) instead of being pushed onto its own line. */
.panel-head > h2, .panel-head > h3 { flex: 1 1 auto; min-width: 0; }
.panel-head > .btn { flex: none; }
.panel h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.panel h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin: 1.8rem 0 0.7rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* On phones let the long "· total · delayed" meta drop onto its own line. */
/* Sub-count next to a heading: stays inline when it's short (e.g. "On sale · 5"),
   and only a long one wraps — shrinking to the width and wrapping its own text rather
   than being forced onto an indented line or overflowing. */
.panel h2 .small, .panel h3 .small { min-width: 0; overflow-wrap: anywhere; }
.panel h3:first-child, .panel-head + h3 { margin-top: 0.4rem; }
.panel h3 .ico { color: var(--amber); }
/* My Stats + player/squad modal section headings — match other tabs' section titles. */
#view-mystats h3, #modal-body h3 { font-size: 0.95rem; color: var(--amber); margin-top: 1.6rem; }
.stamp { margin: 0.8rem 0 0; font-family: var(--mono); font-size: 0.7rem; color: var(--faint); letter-spacing: 0.06em; }

/* ── Overview tiles + jump cards ────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.7rem; }
.tile { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.tile > .ico { color: var(--amber); font-size: 1.5rem; }
.tile-t { display: flex; flex-direction: column; line-height: 1.1; }
.tile-v { font-family: var(--mono); font-size: 1.45rem; }
.tile-k { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.25rem; align-items: start; }
.ov-card h2 { font-size: 0.85rem; }
.ov-top { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1.75rem; align-items: stretch; }
@media (max-width: 720px) { .ov-top { grid-template-columns: 1fr; } }
.tiles { margin-bottom: 1.75rem; }
.srv-table { width: 100%; border-collapse: collapse; }
.srv-table th, .srv-table td { border-bottom: 1px solid var(--line); padding: 0.45rem 0; }
.srv-table th { text-align: left; font-weight: 400; color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding-right: 0.9rem; white-space: nowrap; vertical-align: top; width: 1%; }
.srv-table td { font-family: var(--mono); color: var(--text); word-break: break-word; }
.srv-table tr:last-child th, .srv-table tr:last-child td { border-bottom: 0; }
.ov-restart { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.4rem 0; }
.ov-big { font-family: var(--mono); font-size: 1.8rem; color: var(--amber-hi); line-height: 1; }
.srv-info { display: flex; flex-direction: column; gap: 0.4rem; }
.srv-name { font-size: 0.95rem; font-weight: 600; color: var(--text); line-height: 1.25; word-break: break-word; }
.srv-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.35rem; border-top: 1px solid var(--line); }
.srv-k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.srv-v { font-family: var(--mono); font-size: 0.9rem; color: var(--amber); }
.ov-squads { list-style: none; margin: 0; padding: 0; counter-reset: sq; }
.ov-squads li { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.ov-squads li::before { counter-increment: sq; content: counter(sq); font-family: var(--mono); color: var(--faint); min-width: 1.4rem; }
.ov-squads .sq-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-squads .sq-val { font-family: var(--mono); color: var(--amber); }

/* ── Leaderboards ───────────────────────────────────────────────────────── */
.lb-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.search { display: flex; align-items: center; gap: 0.4rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.35rem 0.6rem; }
.search .ico { color: var(--muted); }
.search input { background: transparent; border: 0; outline: none; color: var(--text); font-family: var(--ui); width: 140px; }
.search input::placeholder { color: var(--faint); }
/* The sub-category picker is the main control on this screen — it chooses which board you are
   looking at — but it was rendering smaller than the group chips above it. Sized to match its
   importance: readable text, a real hit target, and room for the longer category names. */
select#lb-category {
  background: var(--inset); color: var(--text);
  border: 1px solid var(--line-amber); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; font-family: var(--ui); font-size: 1rem; font-weight: 600;
  min-height: 2.75rem; width: 100%; max-width: 420px; cursor: pointer;
}
select#lb-category:hover, select#lb-category:focus { border-color: var(--amber); outline: none; }
/* Two-level category filter: group pills, then the category select for that group */
.lb-filter { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.2rem 0 1rem; }
.lb-groups { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lb-gpill { padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--inset); color: var(--muted); font-family: var(--ui); font-size: 0.78rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; transition: border-color 0.12s, color 0.12s; }
.lb-gpill:hover { border-color: var(--line-amber); color: var(--text); }
.lb-gpill.active { background: var(--amber); color: var(--on-amber); border-color: var(--amber); font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg-btn { background: var(--inset); color: var(--muted); border: 0; cursor: pointer; padding: 0.42rem 0.75rem; font-family: var(--ui); font-size: 0.82rem; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--amber); color: var(--on-amber); font-weight: 700; }
.lb-list { list-style: none; margin: 0; padding: 0; }
/* Rank · name · value must ALL stay visible: the name keeps a minimum width and
   ellipsizes, and a long value (translated units) ellipsizes too instead of
   squeezing the name to nothing or overflowing the card. */
.lb-row { display: grid; grid-template-columns: 2.6rem minmax(7ch, 1fr) minmax(0, auto); align-items: center; gap: 0.75rem; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); }
.lb-row:hover { background: rgba(var(--accent-rgb),0.05); }
.lb-rank { font-family: var(--mono); font-size: 0.95rem; color: var(--faint); text-align: center; }
.lb-name { font-family: var(--ui); font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-family: var(--mono); color: var(--amber); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.lb-row.top .lb-rank { font-weight: 700; }
.lb-row.r1 { background: linear-gradient(90deg, rgba(217,178,74,0.12), transparent 70%); }
.lb-row.r1 .lb-rank, .lb-row.r1 .lb-val { color: var(--gold); }
.lb-row.r2 .lb-rank, .lb-row.r2 .lb-val { color: var(--silver); }
.lb-row.r3 .lb-rank, .lb-row.r3 .lb-val { color: var(--bronze); }
.lb-name .lb-sub { color: var(--faint); font-family: var(--mono); font-size: 0.82em; font-style: normal; }
/* Squads list — same medal treatment as the leaderboard */
.squad-row.top .sq-rank { font-weight: 700; }
.squad-row.r1 { background: linear-gradient(90deg, rgba(217,178,74,0.12), transparent 70%); }
.squad-row.r1 .sq-rank, .squad-row.r1 .sq-list-score { color: var(--gold); }
.squad-row.r2 .sq-rank, .squad-row.r2 .sq-list-score { color: var(--silver); }
.squad-row.r3 .sq-rank, .squad-row.r3 .sq-list-score { color: var(--bronze); }
.ov-motd { margin-bottom: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--motd-accent); border-left: 3px solid var(--motd-accent); border-radius: var(--radius); background: rgba(var(--motd-rgb), 0.10); color: var(--text); font-size: 0.92rem; line-height: 1.45; }
.discord-invite { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border: 1px solid var(--discord); border-radius: var(--radius-md, 6px); color: #8b93f7; font-size: 0.85rem; text-decoration: none; }
.discord-invite:hover { background: rgba(88,101,242,0.14); color: #a8adf9; }
.discord-invite .ico { width: 1em; height: 1em; }
.ov-more { display: block; width: 100%; margin-top: 0.55rem; padding: 0.4rem; background: none; border: none; border-top: 1px solid var(--line); color: var(--amber); font: inherit; font-size: 0.85rem; text-align: center; cursor: pointer; }
.ov-more:hover { color: var(--amber-hi); background: rgba(var(--accent-rgb),0.05); }
/* Events ranking — styled rows (rank + clickable name + per-player mini-stats) */
.ev-table-wrap { overflow-x: auto; }
.ev-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ev-table thead th { text-align: right; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--line-amber); white-space: nowrap; }
.ev-table thead th.ev-th-rank { text-align: center; width: 2.4rem; }
.ev-table thead th.ev-th-name { text-align: left; }
.ev-table tbody td { padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--mono); color: var(--text); white-space: nowrap; }
.ev-table tbody td:nth-child(3) { color: var(--amber); }
.ev-table .ev-rank { text-align: center; color: var(--faint); font-weight: 700; }
.ev-table .ev-name { text-align: left; font-family: var(--ui); font-size: 1rem; font-weight: 600; cursor: pointer; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.ev-table .ev-name:hover { color: var(--amber); }
.ev-row:hover td { background: rgba(var(--accent-rgb),0.05); }
.ev-row.r1 td { background: linear-gradient(90deg, rgba(217,178,74,0.12), transparent 70%); }
.ev-row.r1 .ev-rank { color: var(--gold); }
.ev-row.r2 .ev-rank { color: var(--silver); }
.ev-row.r3 .ev-rank { color: var(--bronze); }
.ev-table .lb-empty { text-align: center; color: var(--muted); font-family: var(--ui); padding: 1.2rem; }
.lb-row.me { box-shadow: inset 3px 0 0 var(--amber); }
.lb-empty { padding: 1.6rem 0.5rem; color: var(--muted); text-align: center; list-style: none; }

/* ── Dossier / My Stats ─────────────────────────────────────────────────── */
.dossier { padding-top: 1.5rem; }
.dossier-tab { position: absolute; top: -1px; right: 1.1rem; background: var(--amber); color: var(--on-amber); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.28em; padding: 0.25rem 0.7rem 0.3rem; border-radius: 0 0 var(--radius) var(--radius); }
.dossier-body p { margin: 0 0 0.9rem; }
.record { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding-bottom: 0.8rem; border-bottom: 1px dashed var(--line-amber); }
.record-head { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.record-avatar { flex: none; display: inline-flex; }
.pl-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-amber); background: var(--bg-2); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08); }
.pl-avatar-fb { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem; color: var(--amber); }

/* ── Leaderboard podium (top 3) — sits above the existing table, same medal language,
   built entirely from theme tokens so the admin's colour customiser reskins it too. ── */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 0.7rem; margin: 0.1rem 0 1.1rem; }
.pod { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pod-empty { visibility: hidden; }
.podium-title { grid-column: 1 / -1; text-align: center; font-family: var(--ui); font-weight: 700;
  font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber);
  margin: 2rem 0; }
.pod-av { position: relative; margin-bottom: 0.6rem; }
.pod-face { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  font-family: var(--mono); font-size: 1.45rem; color: var(--text); background: var(--bg-2); border: 2px solid var(--line); }
img.pod-face { object-fit: cover; }
.pod-face.pod-shield { color: var(--amber); }
.pod-face.pod-shield svg { width: 28px; height: 28px; }
.pod.p1 .pod-face { width: 88px; height: 88px; font-size: 1.9rem; border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(217,178,74,0.12), 0 0 22px rgba(217,178,74,0.24); }
.pod.p1 .pod-face.pod-shield svg { width: 40px; height: 40px; }
.pod.p2 .pod-face { border-color: var(--silver); box-shadow: 0 0 0 3px rgba(184,188,194,0.10); }
.pod.p3 .pod-face { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(194,129,74,0.10); }
.pod-medal { position: absolute; bottom: -5px; right: -5px; width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 0.76rem;
  color: var(--on-amber); border: 2px solid var(--bg); }
.pod.p1 .pod-medal { background: var(--gold); } .pod.p2 .pod-medal { background: var(--silver); } .pod.p3 .pod-medal { background: var(--bronze); }
.pod-name { font-family: var(--ui); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem;
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.pod-name:hover { color: var(--amber-hi); }
.pod-block { width: 100%; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(var(--panel-2), var(--panel)); border: 1px solid var(--line); border-bottom: 0;
  padding: 0.8rem 0.4rem 0.9rem; position: relative; }
.pod-block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.pod.p1 .pod-block { min-height: 148px; padding-top: 1.5rem; } .pod.p2 .pod-block { min-height: 108px; } .pod.p3 .pod-block { min-height: 82px; }
.pod.p1 .pod-block::before { background: var(--gold); box-shadow: 0 0 12px rgba(217,178,74,0.45); }
.pod.p2 .pod-block::before { background: var(--silver); } .pod.p3 .pod-block::before { background: var(--bronze); }
.pod-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); font-size: 1.5rem; line-height: 1; display: block; }
.pod.p1 .pod-val { font-size: 2rem; color: var(--amber-hi); }
.pod-unit { display: block; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; }
.pod-sub { display: block; font-family: var(--ui); font-size: 0.72rem; color: var(--faint); margin-top: 0.35rem; }
/* compact variant inside the Overview cards */
.podium.mini { gap: 0.45rem; margin-bottom: 0.7rem; }
.podium.mini .pod-face { width: 44px; height: 44px; font-size: 1rem; }
.podium.mini .pod.p1 .pod-face { width: 54px; height: 54px; font-size: 1.2rem; }
.podium.mini .pod-block { min-height: 0 !important; padding: 0.55rem 0.3rem 0.6rem; }
.podium.mini .pod-val { font-size: 1.1rem; } .podium.mini .pod.p1 .pod-val { font-size: 1.3rem; }
.podium.mini .pod-name { font-size: 0.8rem; margin-bottom: 0.35rem; }
@media (max-width: 560px) {
  .podium { gap: 0.3rem; }
  .pod-face { width: 44px; height: 44px; font-size: 1.05rem; }
  .pod.p1 .pod-face { width: 56px; height: 56px; font-size: 1.3rem; }
  .pod-face.pod-shield svg { width: 20px; height: 20px; }
  .pod.p1 .pod-face.pod-shield svg { width: 28px; height: 28px; }
  .pod-medal { width: 18px; height: 18px; font-size: 0.64rem; bottom: -4px; right: -4px; }
  .pod-av { margin-bottom: 0.4rem; }
  .pod-name { font-size: 0.74rem; max-width: 9ch; margin-bottom: 0.35rem; }
  .pod-block { padding: 0.55rem 0.2rem 0.6rem; }
  .pod.p1 .pod-block { min-height: 96px; padding-top: 0.95rem; }
  .pod.p2 .pod-block { min-height: 72px; }
  .pod.p3 .pod-block { min-height: 56px; }
  .pod-val { font-size: 1.1rem; }
  .pod.p1 .pod-val { font-size: 1.35rem; }
  .pod-unit { font-size: 0.72rem; letter-spacing: 0.04em; margin-top: 0.3rem; }
  .pod-sub { font-size: 0.66rem; }
  .podium-title { font-size: 1rem; margin: 1.4rem 0; }
}
.record-id { display: flex; flex-direction: column; min-width: 0; }
.record-label { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--faint); }
.record-name { font-size: 1.55rem; font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.record-meta { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 0.4rem; }
@media (max-width: 760px) { .dossier-grid { grid-template-columns: 1fr; } }
.dstats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.ds { display: flex; align-items: center; gap: 0.65rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.65rem 0.8rem; }
.ds .ico { color: var(--amber); font-size: 1.35rem; }
.ds-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ds-v { font-family: var(--mono); font-size: 1.15rem; }
.ds-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
/* Category group headers inside grouped ranking / category-leader lists */
.grp-h { list-style: none; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--amber); font-weight: 700; padding: 0.45rem 0 0.1rem; margin-top: 0.35rem; border-top: 1px solid var(--line); }
.grp-h:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.cl-grp-h { grid-column: 1 / -1; }
.rank-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); }
.rank-pos { font-family: var(--mono); color: var(--amber-hi); font-size: 0.95rem; min-width: 2.4rem; }
.rank-pos.g { color: var(--gold); } .rank-pos.s { color: var(--silver); } .rank-pos.b { color: var(--bronze); }
.rank-overall { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; margin-bottom: 0.5rem; border: 1px solid var(--amber); border-radius: var(--radius); background: rgba(var(--accent-rgb),0.08); }
.rank-overall .rank-label { flex: 1; font-weight: 600; }
.rank-overall .rank-val { font-family: var(--mono); color: var(--amber-hi); }
.rank-overall .rank-pos { font-weight: 700; min-width: auto; }
.record-overall { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; padding: 0.15rem 0.55rem; border: 1px solid var(--amber); border-radius: var(--pill); background: rgba(var(--accent-rgb),0.08); color: var(--muted); font-size: 0.8rem; width: fit-content; }
.record-overall svg { width: 0.9em; height: 0.9em; fill: currentColor; }
.record-overall .ro-rank { font-family: var(--mono); font-weight: 700; color: var(--amber-hi); }
.record-overall .ro-rank.g { color: var(--gold); } .record-overall .ro-rank.s { color: var(--silver); } .record-overall .ro-rank.b { color: var(--bronze); }
.rank-label { font-size: 0.84rem; flex: 1 1 auto; min-width: 6ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { font-family: var(--mono); color: var(--muted); font-size: 0.8rem; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Switches / form ────────────────────────────────────────────────────── */
.notif { display: flex; flex-direction: column; gap: 0.55rem; }
/* Raid sub-switches: indented under their master switch, with a rule that makes the nesting
   read as "part of the above" rather than as three more independent options. */
.notif-sub {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin: -0.1rem 0 0.15rem 0.6rem; padding-left: 0.9rem;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
}
.notif-sub.is-off { opacity: 0.45; }
.notif-sub.is-off .switch { cursor: default; }
.switch { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: relative; width: 38px; height: 20px; flex: none; background: var(--inset); border: 1px solid var(--line); border-radius: var(--pill); transition: background .15s, border-color .15s; }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--faint); transition: transform .15s, background .15s; }
.switch input:checked + .track { background: rgba(var(--accent-rgb),0.25); border-color: var(--line-amber); }
.switch input:checked + .track::after { transform: translateX(18px); background: var(--amber); }
.switch input:focus-visible + .track { outline: 2px solid var(--amber); outline-offset: 2px; }
.switch .lbl { font-size: 0.9rem; }
.scope { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; }
/* The option text was set well below the switch labels around it and read as an afterthought;
   it is a real choice, so it gets the same weight as the rest of the form. */
.scope select {
  background: var(--inset); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.55rem 0.6rem; font-family: var(--ui); font-size: 0.95rem; line-height: 1.3;
}
.scope select option { font-size: 0.95rem; }
.notif-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.3rem; }
.save-msg { font-size: 0.82rem; color: var(--online); }

/* ── Bunkers ────────────────────────────────────────────────────────────── */
/* Four bunker cards per row on desktop (2 on tablets, 1 on phones); the photo
   shows WHOLE at its natural aspect ratio instead of a fixed cropped strip. */
.bunker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
@media (max-width: 1100px) { .bunker-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bunker-grid { grid-template-columns: 1fr; } }
.bunker { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.25rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); border-left: 3px solid var(--faint); overflow: hidden; }
/* Uniform image height via aspect-ratio (not a fixed px strip): every card
   matches its neighbours and the crop scales with the column width. */
.bunker-img { display: block; width: calc(100% + 2.5rem); margin: -1.15rem -1.25rem 0.5rem; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line); }
.bunker.active { border-left-color: var(--online); }
.bunker.locked { border-left-color: var(--standby); }
.bunker-top { display: flex; align-items: center; justify-content: space-between; }
.bunker-sector { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; }
.badge { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.15rem 0.45rem; border-radius: var(--pill); border: 1px solid var(--line); }
.badge.active { color: var(--online); border-color: var(--online); }
.badge.locked { color: var(--standby); border-color: var(--standby); }
.bunker-eta { font-size: 0.9rem; color: var(--muted); }
.bunker-eta b { color: var(--text); font-family: var(--mono); }
.bunker-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line-amber); border-radius: var(--radius); background: var(--panel-2); color: var(--amber); font-size: 0.82rem; font-weight: 600; align-self: flex-start; }
.bunker-link:hover { color: var(--amber-hi); border-color: var(--amber); }
.bunker-link .ico { font-size: 0.95rem; }
.bunker-link .ico:last-child { font-size: 0.8rem; color: var(--muted); }

/* ── Economy ────────────────────────────────────────────────────────────── */

/* ── Kill feed ──────────────────────────────────────────────────────────── */
.killfeed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kf { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.55rem; border-bottom: 1px solid var(--line); }
.kf:hover { background: rgba(var(--accent-rgb),0.04); }
.kf-wimg, .kf-wrap { width: 42px; height: 42px; flex: none; box-sizing: border-box; object-fit: contain; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; display: flex; align-items: center; justify-content: center; }
.kf-wclick { cursor: pointer; transition: border-color 0.12s; }
.kf-wclick:hover { border-color: var(--line-amber); }
.kf-wrap .ico { color: var(--amber); font-size: 1.25rem; }
.kf-suicide .kf-wrap .ico { color: var(--muted); }
.kf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.kf-line { line-height: 1.25; }
.kf-killer { color: var(--text); font-weight: 600; }
.kf-arrow { color: var(--faint); margin: 0 0.15rem; }
.kf-victim { color: var(--alarm); font-weight: 600; }
.kf-sub { font-size: 0.74rem; color: var(--muted); font-family: var(--mono); }
.kf-weapon { color: var(--amber); cursor: pointer; }
.kf-weapon:hover { text-decoration: underline; }
.kf-time { font-size: 0.72rem; color: var(--faint); font-family: var(--mono); white-space: nowrap; align-self: center; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Filled buttons are often <a> elements — every hover must re-assert `color`,
   or the global `a:hover { color: amber-hi }` wins on the color property and the
   label melts into the amber fill. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; font-family: var(--ui); font-weight: 600; font-size: 0.9rem; padding: 0.55rem 0.95rem; border-radius: var(--radius); border: 1px solid var(--line-amber); background: var(--amber); color: var(--on-amber); }
.btn:hover { background: var(--amber-hi); color: var(--on-amber); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-ghost:hover { color: var(--text); background: var(--panel-2); }
.btn-icon { padding: 0.45rem; }
.btn-discord { background: var(--discord); color: #fff; border-color: var(--discord); align-self: flex-start; }
.btn-discord:hover { background: var(--discord-dn); border-color: var(--discord-dn); color: #fff; }

/* ── Trader funds ───────────────────────────────────────────────────────── */
.econ-traders { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.8rem; margin-bottom: 0.4rem; }
.trader-card { padding: 1rem 1.15rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); }
.trader-card.has-img { overflow: hidden; }
.outpost-img { display: block; width: calc(100% + 2.3rem); margin: -1rem -1.15rem 0.8rem; height: auto; border-bottom: 1px solid var(--line-amber); }
.trader-loc { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--amber); margin-bottom: 0.7rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line-amber); }
.tc-sub { display: block; font-size: 0.85rem; font-weight: 600; color: var(--amber-hi); font-family: var(--mono); text-transform: none; letter-spacing: 0; margin-top: 0.3rem; }
.trader-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-size: 1rem; padding: 0.32rem 0; }
.trader-row + .trader-row { border-top: 1px solid var(--line); }
.trader-row .v { font-family: var(--mono); font-size: 1.1rem; color: var(--amber-hi); }
.trader-sub { margin-top: 0.7rem; padding-top: 0.5rem; border-top: 1px solid var(--line-amber); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); }
.trader-sub + .trader-row { border-top: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line-amber); margin-top: 2rem; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.foot-cols { width: 100%; padding: 1.5rem 2.5rem 1rem; display: grid; grid-template-columns: 2fr 1.5fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 720px) { .foot-cols { grid-template-columns: 1fr; gap: 1.1rem; } }
.foot-col { display: flex; flex-direction: column; gap: 0.4rem; }
.foot-h { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.2rem; }
.foot-logo { height: 40px; }
.foot-col a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.88rem; }
.foot-col a:hover { color: var(--amber-hi); }
.foot-nav { display: grid; grid-template-columns: repeat(3, max-content); gap: 0.35rem 1.4rem; }
.foot-nav a[hidden] { display: none; }
@media (max-width: 460px) { .foot-nav { grid-template-columns: repeat(2, max-content); } }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem 2.5rem; border-top: 1px solid var(--line); }
.foot-social { display: flex; gap: 1.2rem; }
.foot-social a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; }
.foot-social a:hover { color: var(--amber-hi); }
.foot-link { background: none; border: 0; padding: 0; color: var(--amber); cursor: pointer; font: inherit; }
.foot-link:hover { color: var(--amber-hi); text-decoration: underline; }
/* App status modal */
.appstat { display: flex; flex-direction: column; margin-top: 0.6rem; }
.appstat-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.2rem; border-bottom: 1px solid var(--line); }
.appstat-row:last-child { border-bottom: 0; }
.appstat-row .ico { color: var(--amber); flex: none; }
.appstat-k { color: var(--muted); font-size: 0.85rem; }
.appstat-v { color: var(--text); font-family: var(--mono); margin-left: auto; text-align: right; }
/* Members-only gate (player profiles / squad details for logged-out visitors) */
.gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; padding: 1.6rem 1rem 0.8rem; }
.gate-ico { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--inset); border: 1px solid var(--line-amber); }
.gate-ico .ico { width: 1.6rem; height: 1.6rem; color: var(--amber); }
.gate-h { margin: 0; font-size: 1.1rem; color: var(--text); text-transform: none; letter-spacing: 0.02em; }
.gate-p { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 360px; line-height: 1.5; }
.gate-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0.65rem 1.2rem; border: 1px solid var(--line-amber); border-radius: var(--radius); background: var(--panel-2); color: var(--amber); font-weight: 600; cursor: pointer; font-family: var(--ui); font-size: 0.92rem; }
.gate-btn:hover { color: var(--amber-hi); border-color: var(--amber); }
.gate-btn .ico { flex: none; }
.gate-discord { background: var(--discord); border-color: var(--discord); color: #fff; }
.gate-discord:hover { background: var(--discord-dn); border-color: var(--discord-dn); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Phone: raise small controls to a comfortable ~40px touch target. */
@media (max-width: 640px) {
  .seg-btn, .lb-gpill, .etr-pg, .tab-btn { min-height: 40px; display: inline-flex; align-items: center; }
  .map-zoom-b { width: 40px; height: 40px; }
  .mp-close { width: 34px; height: 34px; }
  .modal-close, .drawer-close { min-width: 40px; min-height: 40px; }
}
/* The drawer's header row (title + ×) exists only on phones. */
.drawer-head { display: none; }
.ham-backdrop[hidden] { display: none; }
body.ham-open { overflow: hidden; } /* scroll lock while the drawer is open */

/* Phone header: smaller brand on the left so the player chip (Discord login) +
   hamburger fit on one row; the language / Discord / Admin actions live in an
   off-canvas drawer sliding in from the RIGHT edge. The status readout drops to
   its own full-width row below so the server status stays visible. */
@media (max-width: 640px) {
  .mainnav { padding: 0 0.75rem; }
  .nav-btn { padding: 0.75rem 0.7rem; font-size: 0.85rem; }
  .hud-top { gap: 0.55rem 0.6rem; padding: 0.6rem 0.75rem; }
  .brand { min-width: 0; flex-shrink: 1; gap: 0.5rem; }
  .brand img { height: 32px; }
  .brand-name { font-size: 0.92rem; }
  .brand-sub { font-size: 0.55rem; letter-spacing: 0.2em; }
  .header-right { margin-left: auto; }
  .ham-btn { display: inline-flex; }
  /* Off-canvas drawer: full-height panel from the right, over a dimmed backdrop.
     Hidden via clip-path (a wipe from the right), NOT translateX: the drawer sits
     inside the sticky .topbar, and when the topbar auto-hides its transform makes
     it the drawer's containing block — a translated-off-screen drawer then counted
     as horizontal overflow and let the whole page pan to the right. A clipped
     drawer never leaves the viewport bounds, so no overflow. The open state's
     negative left inset leaves a window for the box-shadow. */
  .ham-backdrop { position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.55); }
  .header-actions {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
    flex-direction: column; align-items: stretch; gap: 0.55rem;
    width: min(78vw, 320px); padding: 0.8rem 0.9rem;
    background: var(--panel); border-left: 1px solid var(--line-amber);
    box-shadow: -14px 0 36px rgba(0, 0, 0, 0.6);
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path 0.22s ease, visibility 0.22s;
  }
  .header-actions.open { clip-path: inset(0 0 0 -56px); visibility: visible; }
  /* The off-canvas drawer is position:fixed and must be sized to the VIEWPORT.
     Any transform on an ancestor (the topbar's scroll auto-hide, or the header's
     one-time `topIn` intro animation on .hud-top > *) would instead become the
     drawer's containing block and trap it at the header's height — collapsing it
     to just the "MENU ×" title bar and clip-path-cutting everything below. While
     the drawer is open, neutralise those ancestor transforms so it fills the
     screen and every action (language, Discord, Admin, profile) is visible. */
  body.ham-open .topbar,
  body.ham-open .hud-top > * { transform: none !important; animation: none !important; }
  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 0.55rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--line);
    color: var(--amber); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .drawer-close {
    background: none; border: 0; color: var(--muted); font-size: 1.5rem; line-height: 1;
    padding: 0 0.2rem; cursor: pointer;
  }
  .drawer-close:hover { color: var(--amber-hi); }
  /* The player chip (Discord login / profile) lives in the drawer on phones —
     the header row keeps only brand + hamburger so it always fits. */
  .header-actions .player-chip { max-width: none; }
  .header-actions .lang-select-wrap { display: flex; }
  .header-actions .lang-select { flex: 1; }
  /* Inside the drawer the language widget stacks VERTICALLY (the base .lang-select
     is a flex ROW — without this the expanded list rendered beside the button,
     squeezed to the right). The list opens in flow, full width, and pushes the
     Discord / Admin rows down instead of overflowing. */
  .header-actions .lang-dd { width: 100%; flex-direction: column; align-items: stretch; }
  .header-actions .lang-dd-list { position: static; min-width: 0; width: 100%; max-height: 45vh; margin-top: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .header-actions .discord-invite, .header-actions .admin-link { justify-content: flex-start; }
  .readout { order: 3; flex: 1 0 100%; margin-left: 0; justify-content: flex-start; min-width: 0; padding: 0.4rem 0.8rem; }
  .readout-pop { min-width: 0; }
}
/* Narrowest phones: drop the brand subtitle to guarantee the login chip fits. */
@media (max-width: 400px) {
  .brand-sub { display: none; }
}
/* On the narrowest screens drop the small captions but keep the count + server state. */
@media (max-width: 640px) {
  .readout-cap, .readout-sub { display: none; }
  .readout-num { font-size: 1.15rem; }
  .readout-state-wrap { padding-left: 0.75rem; }
  .readout-state { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto; } }

/* ── Economy (Discord-aligned) ────────────────────────────────────────────── */
.econ-rotation { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.econ-rotation li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text); }
.econ-rotation li .ico { color: var(--amber); flex: none; }
.econ-rotation b { color: var(--amber); font-family: var(--mono); }


/* ── My Stats: combat|survival grid, squad, notifications ─────────────────── */
.record-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 0.5rem; }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 0.4rem; }
@media (max-width: 760px) { .ms-grid { grid-template-columns: 1fr; } }
/* Grouped stat sheet (Combat / Survival / Hunting / Crafting / Exploration / Body) */
.ms-statgroup { margin-top: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); overflow: hidden; }
.ms-statgroup:first-child { margin-top: 0.4rem; }
.statgroup-sum { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; cursor: pointer; list-style: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--amber); user-select: none; }
.statgroup-sum::-webkit-details-marker { display: none; }
.statgroup-sum:hover { background: var(--hover-bg); }
.statgroup-sum .ico { color: var(--amber); width: 1.05em; height: 1.05em; }
.statgroup-title { flex: 1; }
.statgroup-chev { color: var(--muted); font-size: 0.9rem; transition: transform 0.15s; }
.ms-statgroup[open] .statgroup-chev { transform: rotate(180deg); }
.ms-statgroup .dstats { padding: 0 0.85rem 0.85rem; }
.ms-statgroup[open] .statgroup-sum { border-bottom: 1px solid var(--line); }
.ms-statgroup[open] .dstats { padding-top: 0.7rem; }
/* auto-fill (not auto-fit) keeps every card the same width — empty trailing tracks
   instead of stretching the last row, so all groups line up identically. */
.ms-statgroups .dstats { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0.7rem; align-items: stretch; }
/* Survival stat cards mirror the Overview category-leader cards (icon | label/value),
   plus the weekly delta on the value line. */
.ds-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); }
.ds-card > .ico { color: var(--amber); font-size: 1.7rem; }
.ds-card .cl-cat { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-card .cl-line { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.ds-card .cl-name { font-family: var(--ui); font-size: 1.15rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-card .ds-delta { flex: none; margin-left: auto; }
.ds-card.ds-link { cursor: pointer; transition: border-color 0.12s, transform 0.12s; }
.ds-card.ds-link:hover { border-color: var(--line-amber); transform: translateY(-1px); }
.ds-card.ds-link .cl-cat::after { content: ' ›'; color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .ds-card.ds-link:hover { transform: none; } }

/* Tabbed sections (My Stats + player modal) */
.tabbed-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; margin: 1rem 0 1.3rem; border-bottom: 1px solid var(--line-amber); }
.tab-btn { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--ui); font-weight: 600; font-size: 0.85rem; padding: 0.6rem 0.85rem; margin-bottom: -1px; white-space: nowrap; }
.tab-btn .ico { font-size: 1.05rem; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--amber); border-bottom-color: var(--amber); }
/* Account actions (Unlink · Logout) sit to the RIGHT of the profile record —
   ghost buttons, out of the tab row entirely so tabs never wrap around them. */
.ms-acts { display: flex; gap: 0.45rem; flex: none; align-self: center; }
.ms-act { font-size: 0.82rem; padding: 0.45rem 0.8rem; }
.ms-act .ico { font-size: 1rem; }
#unlink-btn:hover { color: var(--alarm); border-color: var(--alarm); background: transparent; }
/* Phones: the actions drop BELOW the profile as their own full-width row —
   sitting beside it squeezed the avatar + name. Labels stay visible. */
@media (max-width: 640px) {
  .record { flex-wrap: wrap; }
  .ms-acts { flex-basis: 100%; margin-top: 0.6rem; }
  .ms-act { flex: 1; justify-content: center; }
}
.tab-pane[hidden] { display: none; }
@media (max-width: 640px) { .tabbed-nav { flex-wrap: nowrap; overflow-x: auto; } }

#me-squad { margin-top: 0.2rem; }
.squad-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--line-amber); }
.squad-name { font-size: 1.1rem; font-weight: 700; }
.squad-meta { display: inline-flex; align-items: center; gap: 0.9rem; }
.squad-note { margin: 0 0 0.6rem; padding: 0.65rem 0.85rem; background: var(--inset); border: 1px solid var(--line); border-left: 2px solid var(--line-amber); border-radius: var(--radius); }
.squad-note-h { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); font-weight: 700; }
.squad-note-h .ico { color: var(--amber); }
.squad-private { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.62rem; font-style: normal; text-transform: none; letter-spacing: 0; color: var(--faint); }
.squad-note-txt { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.raid-status { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; padding: 0.6rem 0.85rem; background: var(--inset); border: 1px solid var(--line); border-left: 3px solid var(--faint); border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; }
.raid-status .ico { flex: none; }
.raid-status.rs-on { border-left-color: var(--online); color: var(--online); }
.raid-status.rs-pending { border-left-color: var(--standby); color: var(--standby); }
.raid-status.rs-off { border-left-color: var(--alarm); color: var(--alarm); }

/* ── My Vehicles: full live map (ported from the admin Live Map) ──────────── */
.mv-locked { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.3rem; background: rgba(var(--accent-rgb),0.08); border: 1px solid var(--line-amber); border-radius: var(--radius); color: var(--text); line-height: 1.5; }
.mv-locked .ico { width: 1.8rem; height: 1.8rem; color: var(--amber); flex: none; }

.map-wrap {
  position: relative; display: flex; margin: 0.2rem 0 0.6rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}

/* Side panel — layer toggles, options + searchable entity lists. */
.map-side {
  width: 280px; flex: 0 0 280px; display: flex; flex-direction: column;
  height: 72vh; min-height: 380px; background: var(--panel); border-right: 1px solid var(--line);
  overflow-y: auto;   /* whole panel (filters + lists) scrolls as one, like the admin map */
}
.map-search-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
.map-search-row .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.map-search-row input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--text);
  font-family: var(--ui); font-size: 0.85rem; padding: 0.15rem 0;
}
.map-search-row input:focus { outline: none; }

/* One player filter for the whole map — same control and shape as the admin map's, so the two
   panels read as one product. Type-to-search, because a squad can be large. */
.map-owner-row { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
.map-owner-row[hidden] { display: none; }
.map-owner-row .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.map-owner-row input {
  flex: 1; min-width: 0; padding: 0.3rem 0.4rem; font-family: var(--ui); font-size: 0.8rem;
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
}
.map-owner-row input:focus { outline: none; border-color: var(--amber); }
.map-owner-clear[hidden] { display: none; }
.map-owner-sug {
  position: absolute; z-index: 20; left: 0.75rem; right: 0.75rem; top: 100%;
  max-height: 260px; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-amber, var(--line)); border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.map-owner-sug[hidden] { display: none; }
/* Beats the global button skin, which would paint every suggestion solid amber. */
.map-owner-sug .mos-item, .map-owner-sug .mos-item:active {
  display: block; width: 100%; text-align: left; padding: 0.35rem 0.6rem; border: 0; border-radius: 0;
  background: none; color: var(--text); font: inherit; font-size: 0.8rem; letter-spacing: 0; transform: none;
}
.map-owner-sug .mos-item:hover, .map-owner-sug .mos-item.hi { background: var(--amber); color: var(--on-amber); }

.map-filters { border-bottom: 1px solid var(--line); }
.map-filters-head {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.6rem 0.75rem; background: none; border: none; cursor: pointer;
  color: var(--muted); font-family: var(--ui); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.map-filters-head:hover { color: var(--text); background: var(--hover-bg); border-color: transparent; }
.map-filters-head .ico { width: 15px; height: 15px; flex: none; color: var(--amber); }
.mf-chev { margin-left: auto; font-size: 0.85rem; transition: transform 0.15s; }
.map-filters.collapsed .mf-chev { transform: rotate(-90deg); }
.map-filters.collapsed .map-layers { display: none; }

.map-layers { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; }
.mlyr { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel-2); }
.map-layer {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.5rem 0.6rem;
  background: none; border: none; color: var(--text);
  font-family: var(--ui); font-weight: 600; font-size: 0.88rem; cursor: pointer; text-align: left;
}
.ml-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: var(--radius-md); flex: none; border: 1px solid rgba(0, 0, 0, 0.35);
}
.ml-badge .ico { width: 14px; height: 14px; color: var(--bg); }
.ml-badge.mk-player { background: var(--c-player); }
.ml-badge.mk-base { background: var(--c-base); }
.ml-badge.mk-vehicle { background: var(--c-vehicle); }
.ml-badge.mk-chest { background: var(--c-chest); }
.ml-badge.mk-storage { background: var(--c-storage); }
.map-layer .ml-name { flex: 1; }
.map-layer:hover { background: var(--hover-bg); color: var(--text); }
.map-count {
  min-width: 1.6em; padding: 0.05rem 0.45em; text-align: center; border-radius: var(--pill);
  background: rgba(0, 0, 0, 0.3); color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.map-layer.active .map-count { color: var(--text); }
.mlyr:has(.map-layer:not(.active)) { opacity: 0.55; }
.map-layer:not(.active) .ml-badge { filter: grayscale(1); }
.map-layer:not(.active) .ml-name { text-decoration: line-through; text-decoration-color: var(--muted); }

/* Three toggles plus the reset button did not fit on one line and ran into each other. Wrap,
   with the reset button pushed to its own end, so nothing is ever clipped at narrow widths. */
.map-opts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem;
  padding: 0.45rem 0.75rem 0.6rem; border-bottom: 1px solid var(--line);
}
.map-opts .map-reset { margin-left: auto; }
.map-toggle { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.map-toggle input { accent-color: var(--amber); }
.map-zoom-btn {
  display: inline-flex; margin-left: auto; padding: 0.3rem; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); border-radius: var(--radius-md); cursor: pointer;
}
.map-zoom-btn:hover { color: var(--amber-hi); border-color: var(--line-amber); background: var(--panel-2); }
.map-zoom-btn .ico { width: 15px; height: 15px; }

.map-lists { flex: 0 0 auto; padding: 0 0 0.6rem; }
.ml-sec { margin-bottom: 0.3rem; }
/* A <button> now (it collapses its section), so every state has to be stated explicitly or the
   global button skin paints it solid amber. Same affordance and look as the admin map. */
.ml-sec-h, .ml-sec-h:hover, .ml-sec-h:active {
  display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.5rem 0.6rem;
  position: sticky; top: 0; z-index: 2; cursor: pointer; user-select: none; text-align: left;
  background: var(--panel); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; transform: none;
  color: var(--text); font-family: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.ml-sec-h::after {
  content: '▾'; display: inline-block; flex: none; margin-left: 0.5rem;
  color: var(--muted); font-size: 0.7rem; transition: transform .15s ease, color .12s ease;
}
.ml-sec-h:hover { color: var(--amber-hi); }
.ml-sec-h:hover::after, .ml-sec-h:hover .ico { color: var(--amber-hi); }
.ml-sec.collapsed .ml-sec-h::after { transform: rotate(-90deg); }
.ml-sec.collapsed .ml-row { display: none; }
.ml-sec-h .ico { width: 13px; height: 13px; color: var(--amber-hi); }
.ml-sec-n {
  margin-left: auto; min-width: 1.6em; padding: 0.05rem 0.45em; text-align: center;
  border-radius: var(--pill); background: rgba(0, 0, 0, 0.3); color: var(--muted);
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.ml-row {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.6rem;
  background: none; border: none; cursor: pointer; text-align: left; color: var(--text);
}
.ml-row:hover { background: var(--hover-bg); color: var(--text); }
.ml-row .ml-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, 0.5); }
.mlr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mlr-name { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlr-meta { font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlr-sec { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; padding: 0 0.35em; border: 1px solid var(--line); border-radius: var(--radius); align-self: center; }
.ml-empty { padding: 1rem; text-align: center; color: var(--muted); font-size: 0.85rem; }
.ml-dot.mk-player  { background: var(--c-player); }
.ml-dot.mk-base    { background: var(--c-base); }
.ml-dot.mk-vehicle { background: var(--c-vehicle); }
.ml-dot.mk-chest   { background: var(--c-chest); }
.ml-dot.mk-storage { background: var(--c-storage); }

.map-subf { padding: 0.4rem 0.5rem 0.5rem; border-top: 1px solid var(--line); }
.sf-select {
  width: 100%; padding: 0.4rem 1.6rem 0.4rem 0.55rem; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); font-family: var(--ui); font-weight: 600; font-size: 0.78rem; border-radius: var(--radius-md); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff9a2e' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0.8rem center;
}
/* Consistent dropdown chevron across the Field Console switchers — sit it a touch inward
   (not jammed against the right edge). Themed via the accent stroke in the SVG. */
select#lb-category, .scope select {
  appearance: none; -webkit-appearance: none; padding-right: 2.3rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff9a2e' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0.8rem center;
}
.sf-select:hover, .sf-select:focus { border-color: var(--line-amber); outline: none; }
.sf-select option { background: var(--panel); color: var(--text); }
.map-mk.mk-player .mk-dot { box-shadow: 0 0 0 2px rgba(53, 208, 127, 0.4), 0 1px 3px rgba(0, 0, 0, 0.6); }

/* Sector grid — inside the canvas so it pans/zooms with the map. */
.map-sectors { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.map-sectors.hidden { display: none; }
.sec-line { position: absolute; background: rgba(255, 200, 120, 0.14); }
.sec-v { top: 0; bottom: 0; width: 1px; }
.sec-h { left: 0; right: 0; height: 1px; }
/* Smaller than the admin map's 22px: the frontend map viewport is much narrower, so
   fixed screen-size labels would otherwise sprawl across the whole island. */
.sec-lab {
  position: absolute; transform: scale(var(--mz, 1)); transform-origin: top left;
  padding: 2px 4px; color: rgba(255, 255, 255, 0.82); font-family: var(--ui); font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; white-space: nowrap;
  text-shadow: 0 0 3px #000, 1px 1px 2px #000, -1px 1px 2px #000;
}

.map-viewport {
  position: relative; flex: 1; min-width: 0; height: 72vh; min-height: 380px; overflow: hidden; cursor: grab;
  background: #070a10; touch-action: none; user-select: none;
}
@media (max-width: 760px) {
  .map-wrap { flex-direction: column; margin: 0.4rem 0; }
  /* No height cap on the side panel: with max-height it couldn't scroll, so an
     expanded "Layers & filters" overflowed it and the map canvas below (its
     transform creates a stacking context) painted OVER the filters. The panel
     now grows to fit; only the entity lists scroll. */
  .map-side { width: auto; flex: none; height: auto; min-height: 0; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
  .map-lists { max-height: 32vh; }
  /* Square viewport so the (square) island map fills it, instead of floating in a
     too-tall 58vh box that left an empty band and pushed against the filters above. */
  .map-viewport { flex: none; height: auto; min-height: 0; aspect-ratio: 1 / 1; }
  /* Let the info popover scroll inside the map rather than being clipped by the
     viewport's overflow when a container's contents list is long. */
  .map-popover { max-height: calc(100% - 16px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
  .mp-contents { max-height: none; }
}
.map-viewport.dragging { cursor: grabbing; }
/* On-screen zoom buttons (touch has no wheel). */
.map-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 15; display: flex; flex-direction: column; gap: 5px; }
.map-zoom-b {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1; background: var(--panel); border: 1px solid var(--line-amber);
  color: var(--amber-hi); border-radius: var(--radius-md); cursor: pointer; user-select: none; padding: 0;
}
.map-zoom-b:hover { background: var(--panel-2); }
.map-zoom-b:active { background: var(--amber); color: var(--on-amber); }
.map-canvas { position: absolute; top: 0; left: 0; width: 100%; transform-origin: 0 0; }
.map-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.map-canvas.map-img-missing .map-img {
  min-height: 640px;
  background:
    repeating-linear-gradient(0deg, rgba(var(--accent-rgb),0.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb),0.05) 0 1px, transparent 1px 64px), #0a1018;
}
.map-markers { position: absolute; inset: 0; }

/* Claimed base area rectangle (own base). */
.map-area { position: absolute; border: 1px solid; border-radius: 3px; }
.map-area.area-player { border-color: rgba(255, 154, 46, 0.55); background: rgba(var(--accent-rgb), 0.10); }

.map-mk {
  position: absolute; width: 0; height: 0; padding: 0; background: none; border: none; cursor: pointer; z-index: 2;
}
.map-mk .mk-dot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(var(--mz, 1));
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.55); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.map-mk .mk-dot::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.map-mk .mk-dot .ico { width: 12px; height: 12px; color: var(--bg); }
.map-mk .mk-label {
  display: none; position: absolute; left: 0; top: 0;
  transform: translate(-50%, calc(13px * var(--mz, 1))) scale(var(--mz, 1)); transform-origin: top center;
  max-width: 130px; padding: 1px 5px; border-radius: var(--radius);
  background: rgba(8, 10, 14, 0.85); color: var(--text); font-size: 11px; font-weight: 600;
  line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.map-markers.labels-on .mk-label, .map-mk:hover .mk-label { display: block; }
.map-mk:hover { z-index: 5; }
.map-mk:hover .mk-dot { outline: 2px solid var(--amber-hi); }

.mk-player .mk-dot { background: var(--c-player); }
.mk-base   .mk-dot { background: var(--c-base); }
.mk-vehicle .mk-dot { background: var(--c-vehicle); }
.mk-chest  .mk-dot { background: var(--c-chest); }
.mk-storage .mk-dot { background: var(--c-storage); }
/* Squad layers (My Stuff map) — one distinct colour so squad stuff/positions read apart from your own. */
:root { --c-squad: #e05aa8; }
.mk-squad-base .mk-dot, .mk-squad-vehicle .mk-dot, .mk-squad-chest .mk-dot, .mk-squad-player .mk-dot,
.mk-squad-trap .mk-dot { background: var(--c-squad); }
.ml-badge.mk-squad-base, .ml-badge.mk-squad-vehicle, .ml-badge.mk-squad-chest, .ml-badge.mk-squad-player,
.ml-badge.mk-squad-trap,
.ml-dot.mk-squad-base, .ml-dot.mk-squad-vehicle, .ml-dot.mk-squad-chest, .ml-dot.mk-squad-player,
.ml-dot.mk-squad-trap { background: var(--c-squad); }
/* Your own mines — red, because that is what the marker means. */
:root { --c-trap: #e5443f; }
.mk-trap .mk-dot { background: var(--c-trap); }
.ml-badge.mk-trap, .ml-dot.mk-trap { background: var(--c-trap); }
/* Both dropdowns under a layer sit on one line and share the width. */
/* Layer groups: "mine" and "squad" are different questions, so they get their own headings
   instead of one long undifferentiated list. */
.mlyr-group { border-top: 1px solid var(--line); margin-top: 0.35rem; padding-top: 0.35rem; }
.mlyr-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.mlyr-group-h {
  padding: 0.2rem 0.75rem 0.3rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
/* Styled dropdown, ported from the admin panel so both maps read as one product. The native
   <select> underneath stays as the source of truth (and the accessible control); only its
   presentation is replaced. */
.cdd { position: relative; display: inline-flex; flex: 1; min-width: 0; }
.cdd-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; pointer-events: none; }
.cdd-btn, .cdd-btn:hover, .cdd-btn:active {
  display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.32rem 0.5rem;
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-family: var(--ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0;
  text-align: left; cursor: pointer; transform: none;
}
.cdd-btn:hover { border-color: var(--line-amber, var(--amber)); color: var(--amber-hi); }
.cdd-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdd-btn .dd-caret { margin-left: auto; color: var(--muted); font-size: 0.7rem; }
.cdd-btn:hover .dd-caret { color: var(--amber-hi); }
.cdd-menu {
  position: absolute; z-index: 3000; min-width: 8rem; max-width: calc(100vw - 16px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-amber, var(--line)); border-radius: var(--radius);
  padding: 0.3rem; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.cdd-menu[hidden] { display: none; }
.cdd-item, .cdd-item:active {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; width: 100%;
  white-space: nowrap; padding: 0.4rem 0.55rem; background: none; border: none; border-radius: var(--radius);
  color: var(--text); cursor: pointer; font: inherit; font-size: 0.85rem; text-align: left; transform: none;
}
.cdd-item:hover { background: var(--amber); color: var(--on-amber); }
.cdd-item.on { background: rgba(240, 130, 12, 0.18); color: var(--amber-hi); }
.cdd-item.on:hover { background: var(--amber); color: var(--on-amber); }
/* Checkable items: a multi-select that still looks like every other dropdown. */
.cdd-item.cdd-check { gap: 0.55rem; }
.cdd-item.cdd-check .cdd-box {
  flex: none; width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--line-amber, var(--line)); background: var(--inset);
}
.cdd-item.cdd-check.on { background: none; color: var(--text); }
.cdd-item.cdd-check.on .cdd-box {
  background: var(--amber); border-color: var(--amber);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0e0a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  background-size: 11px 11px; background-repeat: no-repeat; background-position: center;
}
.cdd-item.cdd-check .cdd-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.map-subf { display: flex; flex-direction: column; gap: 0.35rem; }
.map-area.mk-squad-base { border-color: rgba(224, 90, 168, 0.55); background: rgba(224, 90, 168, 0.08); }

/* Info card — anchored next to the clicked marker (position set in JS). */
.map-popover {
  position: absolute; z-index: 20; width: 330px; max-width: calc(100% - 24px); padding: 0.85rem 1rem;
  background: var(--panel); border: 1px solid var(--line-amber); border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.map-popover.hidden { display: none; }
.mp-close {
  position: absolute; top: 5px; right: 7px; width: 22px; height: 22px; padding: 0; line-height: 1;
  background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer;
}
.mp-close:hover { color: var(--amber-hi); background: none; border: none; }
.mp-head { display: flex; align-items: center; gap: 0.55rem; margin: 0 1.2rem 0.6rem 0; }
.mp-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-md); flex: none; border: 1px solid rgba(0, 0, 0, 0.4); }
.mp-ico .ico { width: 15px; height: 15px; color: var(--bg); }
.mp-ico.mk-player { background: var(--c-player); }
.mp-ico.mk-base { background: var(--c-base); }
.mp-ico.mk-vehicle { background: var(--c-vehicle); }
.mp-ico.mk-chest { background: var(--c-chest); }
.mp-ico.mk-storage { background: var(--c-storage); }
.mp-headtxt { min-width: 0; }
.mp-title { color: var(--text); font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sub { font-size: 0.75rem; color: var(--muted); }
.map-popover .mp-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.82rem; padding: 0.2rem 0; border-top: 1px solid var(--line-2); }
.map-popover .mp-rows .mp-row:first-child { border-top: none; }
.map-popover .mp-row span { color: var(--muted); }
.map-popover .mp-row b { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.map-popover .dim { color: var(--muted); }
.mp-contents-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: 0.5rem;
  padding: 0.4rem; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  font-family: var(--ui); font-weight: 600; font-size: 0.8rem; border-radius: var(--radius-md); cursor: pointer;
}
.mp-contents-btn:hover { border-color: var(--line-amber); color: var(--amber-hi); background: var(--panel-2); }
.mp-contents-btn.open { color: var(--amber-hi); border-color: var(--line-amber); }
.mp-contents-btn .ico { width: 14px; height: 14px; }
.mp-contents { margin-top: 0.5rem; border-top: 1px solid var(--line); max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.mp-contents[hidden] { display: none; }
.mp-c-head {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.4rem; position: sticky; top: 0; z-index: 1;
  background: var(--panel); border-bottom: 1px solid var(--line);
  color: var(--text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.mp-c-head .ico { width: 13px; height: 13px; color: var(--amber-hi); }
.mp-c-count { margin-left: auto; color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.mp-c-msg { padding: 0.7rem; text-align: center; color: var(--muted); font-size: 0.82rem; }
.mp-c-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.18rem 0.1rem; }
.mp-c-img { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); border-radius: var(--radius); overflow: hidden; }
.mp-c-img img { width: 100%; height: 100%; object-fit: contain; }
.mp-c-name { flex: 1; min-width: 0; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-c-n { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.map-side, .mp-contents { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent; }
.map-side::-webkit-scrollbar, .mp-contents::-webkit-scrollbar { width: 9px; }
.map-side::-webkit-scrollbar-track, .mp-contents::-webkit-scrollbar-track { background: transparent; }
.map-side::-webkit-scrollbar-thumb, .mp-contents::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.35); border-radius: var(--radius-md); border: 2px solid transparent; background-clip: content-box;
}
.map-side::-webkit-scrollbar-thumb:hover, .mp-contents::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.6); background-clip: content-box;
}
.mp-ico.mp-img { position: relative; overflow: hidden; background: var(--panel-2); }
.mp-ico.mp-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mp-ico.mp-img .mp-ico-fb { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; }
.mp-ico.mp-img .mp-ico-fb .ico { width: 15px; height: 15px; color: var(--amber-hi); }
.mp-ico.mp-img.mp-imgfail img { display: none; }
.mp-ico.mp-img.mp-imgfail .mp-ico-fb { display: flex; }
.ml-thumb { width: 22px; height: 22px; flex: none; border-radius: var(--radius); overflow: hidden; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; }
.ml-thumb img { width: 100%; height: 100%; object-fit: contain; }

.map-empty {
  position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
  padding: 0.4rem 0.9rem; background: rgba(8, 10, 14, 0.85); border: 1px solid var(--line);
  border-radius: var(--pill); color: var(--muted); font-size: 0.85rem;
}
.map-empty.hidden { display: none; }
.squad-members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.4rem; }
.sm-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.1rem 0.55rem; padding: 0.5rem 0.65rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); }
.sm-dot { grid-column: 1; grid-row: 1 / span 2; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.sm-dot.on { background: var(--online); box-shadow: 0 0 7px var(--online); }
.sm-name { grid-column: 2; grid-row: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-rank { grid-column: 3; grid-row: 1; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--amber); white-space: nowrap; }
.sm-seen { grid-column: 2 / -1; grid-row: 2; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }

#notif-panel { margin-top: 1.25rem; }
.notif-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.nh-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); }
.nh-ico { color: var(--amber); flex: none; display: inline-flex; }
.nh-ico .ico { font-size: 1.2rem; }
.nh-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nh-title { font-weight: 600; font-size: 0.9rem; }
.nh-body { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-time { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); white-space: nowrap; }
.nh-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 0.6rem; }
.nh-head h3 { margin: 0; }
.nh-head .etr-pager { margin: 0; }
/* "alerts only inside your flag area" note, mirrors the Discord /notify panel */
.notif-flagnote { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 1rem; padding: 0.6rem 0.75rem; background: var(--inset); border: 1px solid var(--line-amber); border-radius: var(--radius); color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
.notif-flagnote .ico { color: var(--amber); flex: none; margin-top: 0.1rem; }
.notif-flagnote strong { color: var(--text); }

/* ── Modal (player profile / squad detail) ────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.72); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow: auto; }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: 100%; max-width: 1320px; background: var(--panel); border: 1px solid var(--line-amber); border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.modal-close { position: absolute; top: 0.5rem; right: 0.8rem; background: transparent; border: 0; color: var(--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--amber-hi); }
#modal-body h3 { display: flex; align-items: center; gap: 0.45rem; margin: 1.2rem 0 0.55rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#modal-body h3 .ico { color: var(--amber); }

/* ── Squads list ──────────────────────────────────────────────────────────── */
.lb-click { cursor: pointer; }
.squad-list { list-style: none; margin: 0; padding: 0; }
/* Same guarantee as .lb-row: the squad name keeps a floor width; meta + score
   ellipsize instead of pushing the name out of the card. */
.squad-row { display: grid; grid-template-columns: 2.4rem minmax(7ch, 1fr) minmax(0, auto) minmax(0, auto); align-items: center; gap: 0.9rem; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.squad-row:hover { background: rgba(var(--accent-rgb),0.05); }
.squad-row .sq-rank { font-family: var(--mono); color: var(--faint); text-align: center; }
.sq-list-name { font-family: var(--ui); font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-list-meta { font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-list-score { font-family: var(--mono); color: var(--amber); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squad-head .record-overall { margin-top: 0; }

/* ── Login gate (non-public tabs when logged out) ─────────────────────────── */
.gate-view[hidden] { display: none; }
.gate-card { max-width: 540px; margin: 6vh auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2.6rem 2rem; }
.gate-ico { color: var(--discord); width: 3rem; height: 3rem; }
.gate-card h2 { margin: 0; color: var(--amber); letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.1rem; }
.gate-card p { margin: 0; }
.gate-card .btn-discord { align-self: center; }

/* Clickable player name (squad members → profile) */
.pl-click { cursor: pointer; }
.pl-click:hover { color: var(--amber-hi); }

/* Account-linking code (My Stats unlinked state) */
.link-code { font-family: var(--mono); font-size: 1.25rem; color: var(--amber-hi); background: var(--inset); border: 1px solid var(--line-amber); border-radius: var(--radius); padding: 0.5rem 0.85rem; letter-spacing: 0.06em; user-select: all; }

/* Account-linking stepper (My Stats, signed-in-but-unlinked state) */
.link-intro { margin: 0 0 1.2rem; color: var(--muted); line-height: 1.55; }
.link-steps { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.link-step { display: flex; gap: 0.85rem; align-items: flex-start; }
.link-step-no { flex: none; width: 27px; height: 27px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--inset); border: 1px solid var(--line-amber); color: var(--amber); font-family: var(--mono); font-size: 0.85rem; font-weight: 700; }
.link-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.15rem; }
.link-step-t { font-weight: 600; color: var(--text); font-size: 0.95rem; }
.link-step-d { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.link-step-btn { align-self: flex-start; }
.link-code-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin: 0; }
.link-copy { font-size: 0.78rem; padding: 0.4rem 0.75rem; }
.link-waiting { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--amber); font-size: 0.85rem; }
.link-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: linkpulse 1.3s ease-in-out infinite; }
@keyframes linkpulse { 0%, 100% { opacity: 0.25; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .link-dot { animation: none; } }

/* ── Overview: category leaders (#1 per category) ─────────────────────────── */
.cat-leaders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* Collapsible category-leader groups (Combat, Survival…) on the overview. */
.cl-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); overflow: hidden; }
.cl-grp-h { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; cursor: pointer; list-style: none; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--amber); font-weight: 700; user-select: none; }
.cl-grp-h::-webkit-details-marker { display: none; }
.cl-grp-h .ico { color: var(--amber); width: 1.1em; height: 1.1em; flex: none; }
.cl-grp-h:hover { background: var(--hover-bg); }
.cl-grp-h .statgroup-chev { margin-left: auto; color: var(--muted); font-size: 0.9rem; transition: transform 0.15s; }
.cl-group[open] .cl-grp-h { border-bottom: 1px solid var(--line); }
.cl-group[open] .cl-grp-h .statgroup-chev { transform: rotate(180deg); }
.cl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.6rem; padding: 0.7rem 0.8rem; }
.cl-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); }
.cl-row > .ico { color: var(--amber); font-size: 1.6rem; }
.cl-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cl-cat { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cl-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; min-width: 0; }
/* Name keeps a floor width; a long translated value ellipsizes inside the card
   instead of overflowing it or crushing the name. */
.cl-name { font-family: var(--ui); font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 7ch; }
.cl-val { font-family: var(--mono); color: var(--amber); white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ov-squad-row.sq-click { cursor: pointer; }
.ov-squad-row.sq-click:hover .sq-name { color: var(--amber-hi); }
#view-overview > .panel + .panel { margin-top: 1.75rem; }

/* Clickable category (overview leaders / my-stats rankings) → leaderboard category */
.cat-click { cursor: pointer; }
.cl-row.cat-click:hover, .rank-chip.cat-click:hover { border-color: var(--line-amber); }
.rank-chip > .ico { color: var(--amber); flex: none; }

/* ── My Stats: prisoner skills ────────────────────────────────────────────── */
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; }
.skill-group { display: flex; flex-direction: column; gap: 0.55rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 0.9rem; }
.sg-head { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; border-bottom: 1px solid var(--line-amber); padding-bottom: 0.55rem; margin-bottom: 0.35rem; }
.sg-titlewrap { display: flex; align-items: center; gap: 0.45rem; }
.sg-titlewrap > .ico { color: var(--amber); font-size: 1.15rem; }
.sg-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--amber); font-weight: 700; }
.attr-ring { width: 84px; height: 84px; }
.ar-bg { fill: none; stroke: var(--line); stroke-width: 4.5; }
.ar-fg { fill: none; stroke: var(--amber); stroke-width: 4.5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.5s ease; }
.ar-num { fill: var(--text); font-family: var(--mono); font-size: 21px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.skill-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.2rem 0.6rem; }
.sk-name { font-weight: 600; }
.sk-tier { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.sk-bar { grid-column: 1 / -1; height: 5px; background: var(--inset); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.sk-fill { display: block; height: 100%; background: var(--amber); }
.sk-l0 .sk-fill { background: var(--faint); }
.sk-l1 .sk-fill { background: var(--standby); }
.sk-l2 .sk-fill { background: var(--silver); }
.sk-l3 .sk-fill { background: var(--amber); }
.sk-l4 .sk-fill { background: var(--gold); }
.sk-l3 .sk-tier { color: var(--amber); }
.sk-l4 .sk-tier { color: var(--gold); }

/* ── Economy: market activity (recent trades) ─────────────────────────────── */
.econ-market-stats { margin-bottom: 0.9rem; }
/* Section sub-labels (Activity by outpost / Most bought / Recent trades …) */
.econ-hot-h { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 1.4rem 0 0.6rem; }
.econ-hot-h.buy { color: var(--alarm); }
.econ-hot-h.sell { color: var(--online); }
/* Hot items, split into bought / sold columns */
.hot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.econ-hot { display: flex; flex-direction: column; gap: 0.5rem; }
.hot-item { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; text-align: left; padding: 0.6rem 0.7rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-family: var(--ui); }
.hot-item.nolink { cursor: default; }
.hot-item:not(.nolink):hover { border-color: var(--line-amber); }
.hot-img { width: 46px; height: 46px; object-fit: contain; flex: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; }
.hot-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hot-name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-val { font-family: var(--mono); font-size: 0.85rem; color: var(--amber-hi); }
.hot-val em { color: var(--muted); font-style: normal; }
.hot-cols > * { min-width: 0; } /* let grid columns shrink instead of overflowing the page */
@media (max-width: 560px) { .hot-cols { grid-template-columns: 1fr; } }
.econ-trades { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.etr { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 0.1rem 0.6rem; padding: 0.6rem 0.7rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); }
.etr-img { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 40px; height: 40px; object-fit: contain; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; }
.etr-img-x { display: flex; align-items: center; justify-content: center; color: var(--faint); }
.etr-act { grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.etr.etr-sell .etr-act { color: var(--online); }
.etr.etr-buy .etr-act { color: var(--alarm); }
.etr-item { grid-column: 3; grid-row: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etr-price { grid-column: 4; grid-row: 1; font-family: var(--mono); color: var(--amber-hi); white-space: nowrap; }
.etr-sub { grid-column: 2 / -1; grid-row: 2; font-size: 0.74rem; color: var(--muted); font-family: var(--mono); }
.etr-pager { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0.7rem 0 0.2rem; flex-wrap: wrap; }
.etr-pager:empty { display: none; }
.etr-pg { cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-family: var(--ui); font-weight: 600; font-size: 0.82rem; padding: 0.4rem 0.8rem; }
.etr-pg:hover:not(:disabled) { border-color: var(--line-amber); color: var(--amber); }
.etr-pg:disabled { opacity: 0.4; cursor: default; }
.etr-pg-info { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.etr-qty { color: var(--amber); font-style: normal; font-size: 0.82rem; }
.etr-ea { color: var(--muted); font-style: normal; font-size: 0.7rem; }
.item-history .ith-act em { color: var(--amber); font-style: normal; font-size: 0.82rem; }

/* ── Overview: online players ─────────────────────────────────────────────── */
.online-players { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.op-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem 0.35rem 0.6rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--pill); font-size: 0.86rem; font-weight: 600; color: var(--text); }
.op-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--online); box-shadow: 0 0 6px var(--online); }
.op-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.op-chip.pl-click { cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.op-chip.pl-click:hover { border-color: var(--line-amber); color: var(--amber-hi); background: var(--panel-2); }
.op-empty { padding: 0.3rem 0; }

/* ── My Stats: bank cards ─────────────────────────────────────────────────── */
.bank-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.7rem; margin-top: 0.9rem; }
.bank-card { display: flex; gap: 0.85rem; padding: 0.75rem 0.85rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); }
.bank-card-img { width: 88px; height: 56px; flex: none; object-fit: contain; align-self: center; }
.bank-card-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.bank-card-type { font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; }
.bank-card-rows { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--muted); }
.bank-card-rows b { color: var(--text); font-family: var(--mono); }
.pin-btn { cursor: pointer; background: var(--panel-2); border: 1px solid var(--line-amber); border-radius: var(--radius); color: var(--text); font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.08em; padding: 0.08rem 0.5rem; }
.pin-btn em { font-style: normal; color: var(--muted); font-size: 0.68rem; letter-spacing: 0; margin-left: 0.2rem; }
.pin-btn.revealed { color: var(--amber-hi); border-color: var(--amber); }

.fin-acc { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem; padding: 0.6rem 0.8rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); }
.fin-acc > .ico { color: var(--amber); font-size: 1.35rem; flex: none; }
.fin-acc-t { display: flex; flex-direction: column; min-width: 0; }
.fin-acc-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.fin-acc-v { font-family: var(--mono); font-size: 1.05rem; overflow-wrap: anywhere; }

/* ── Mobile polish: reclaim width + collapse wide grids so nothing overflows ─ */
@media (max-width: 640px) {
  main { padding: 1rem 0.8rem; }
  .panel { padding: 0.95rem 0.85rem; }
  .bank-card-img { width: 70px; height: 46px; }
  .modal { padding: 3vh 0.55rem; }
  .modal-card { padding: 1.15rem 1rem; }
  .record-name { font-size: 1.3rem; }
  .foot-cols { padding: 1.2rem 0.9rem 1rem; gap: 1.1rem; }
  .foot-bottom { padding-left: 0.9rem; padding-right: 0.9rem; }
  /* Every panel header (Leaderboards, Squads, Economy, Events, Kill Feed, Items…):
     stack the toolbar under the title on its own full-width row and let the search
     grow, instead of cramming title + search + toggles + refresh into one line. */
  .panel-head { flex-wrap: wrap; row-gap: 0.6rem; }
  .lb-tools { width: 100%; gap: 0.5rem; }
  .lb-tools .search { flex: 1 1 auto; }
  .lb-tools .search input { width: 100%; }
  .lb-filter select#lb-category { max-width: none; width: 100%; }
}
@media (max-width: 480px) {
  .econ-deals, .cl-items, .squad-members, .bank-cards, .skills { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .dstats { grid-template-columns: 1fr; }
}

/* ── Item database tab ────────────────────────────────────────────────────── */
.items-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.1rem; }
.items-toolbar input, .items-toolbar select {
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-family: var(--ui); font-size: 0.95rem; padding: 0.55rem 0.75rem;
}
.items-toolbar input { flex: 1; min-width: 200px; }
.items-toolbar input:focus, .items-toolbar select:focus { outline: none; border-color: var(--line-amber); }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.item-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; cursor: pointer;
  padding: 0.75rem 0.5rem; background: var(--inset); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text); font-family: var(--ui); text-align: center;
}
.item-card:hover { border-color: var(--line-amber); }
.item-img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.item-img-x { display: flex; align-items: center; justify-content: center; color: var(--faint); }
.item-img-x .ico { width: 2rem; height: 2rem; }
.item-name { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
.item-rar { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.item-rar.r-uncommon { color: var(--online); }
.item-rar.r-rare { color: #5aa9e6; }
.item-rar.r-veryrare { color: #b07cff; }
.item-rar.r-extremelyrare { color: var(--amber-hi); }
.items-foot { margin-top: 1.1rem; text-align: center; }
.item-detail { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-top: 0.5rem; }
.item-detail-img { width: 150px; height: 150px; object-fit: contain; flex: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.item-detail-body { flex: 1; min-width: 240px; }
.item-desc { color: var(--text); margin: 0 0 1.1rem; line-height: 1.5; white-space: pre-line; }
@media (max-width: 480px) { .items-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }

/* ── Item detail extras ───────────────────────────────────────────────────── */
.item-detail-side { flex: none; }
.repair-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.repair-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  padding: 0.4rem 0.7rem 0.4rem 0.45rem; background: var(--inset);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
  font-family: var(--ui); font-size: 0.85rem;
}
.repair-chip:hover { border-color: var(--line-amber); color: var(--amber-hi); }
.repair-chip img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.price-buy .ds-v { color: var(--alarm); }
.price-sell .ds-v { color: var(--online); }
.item-detail-body .item-rar { font-size: 0.7rem; vertical-align: middle; margin-left: 0.4rem; }
.record-name .item-rar { font-size: 0.7rem; margin-left: 0.5rem; }
/* Clickable economy rows → item detail */
.etr-click { cursor: pointer; }
.etr-click:hover .etr-item { color: var(--amber-hi); }

/* ── Item price history + back button ─────────────────────────────────────── */
.item-back {
  display: inline-flex; align-items: center; cursor: pointer; margin-right: 1.1rem;
  background: var(--inset); border: 1px solid var(--line-amber); border-radius: var(--radius);
  color: var(--amber); font-family: var(--ui); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.55rem;
}
.item-back:hover { color: var(--amber-hi); background: var(--panel-2); }
.item-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; max-height: 280px; overflow-y: auto; }
.ith { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; padding: 0.4rem 0.6rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.85rem; }
.ith-act { font-family: var(--mono); font-size: 0.72rem; min-width: 4.5rem; }
.ith-sell .ith-act { color: var(--online); }
.ith-buy .ith-act { color: var(--alarm); }
.ith-price { font-family: var(--mono); color: var(--amber-hi); }
.ith-sub { color: var(--muted); font-size: 0.76rem; margin-left: auto; }

.repair-chip .chip-def { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bg); background: var(--amber); border-radius: 2px; padding: 0.05rem 0.3rem; margin-left: 0.3rem; }

/* Compatibility matrix chips */
.chip-tag { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; padding: 0.05rem 0.3rem; margin-left: 0.3rem; }
.repair-chip .chip-tag:first-of-type { margin-left: 0.4rem; }
/* clickable code chip (compatibility / variants / recipes) → opens that item */
button.chip-link { font-family: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; margin: 0.15rem 0.15rem 0 0; }
button.chip-link:hover { color: var(--text); border-color: var(--accent, var(--amber)); }
/* related-item chips with thumbnail + name (compatibility / variants / recipes / fits vehicles) */
.rel-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.rel-chip { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-family: inherit;
  color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.25rem 0.5rem 0.25rem 0.3rem; font-size: 0.72rem; }
.rel-chip:hover { border-color: var(--accent, var(--amber)); }
.rel-chip img, .rel-chip .rel-chip-x { width: 26px; height: 26px; object-fit: contain; flex: none; }
.rel-chip .rel-chip-x { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); opacity: 0.6; }
.rel-chip-n { white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
/* attachments grouped by type */
.att-sub { margin: 0.35rem 0 0.5rem; }
.att-sub-h { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.25rem; }
/* crafting ingredients (amount × alternative options) */
.craft-list { margin-top: 0.4rem; }
.ing-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.ing-amt { font-family: var(--mono); color: var(--accent, var(--amber)); font-size: 0.8rem; flex: none; min-width: 2rem; }
.ing-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.ing-or { color: var(--muted); font-size: 0.7rem; margin: 0 0.1rem; }
.craft-meta { margin: 0.2rem 0 0.7rem; }
/* loot / where-to-find chips with rarity colour */
.loot-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.loot-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-left-width: 3px; border-radius: 5px; padding: 0.2rem 0.5rem; }
.loot-w { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.loot-fixed { border-left-color: #7dd3fc; } .loot-abundant { border-left-color: #86efac; }
.loot-common { border-left-color: #a3e635; } .loot-uncommon { border-left-color: #fbbf24; }
.loot-rare { border-left-color: #fb923c; } .loot-veryrare { border-left-color: #f87171; }
.loot-extremelyrare { border-left-color: #c084fc; }
.att-grp { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); margin: 0.7rem 0 0.4rem; }

/* Trader funds — show when each balance was last updated */
.trader-rv { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.trader-upd { font-size: 0.62rem; color: var(--faint); white-space: nowrap; }

/* Weekly delta badge on My Stats values + small period toggles */
.ds-delta { font-size: 0.7rem; color: var(--online); font-family: var(--mono); margin-left: 0.3rem; white-space: nowrap; }
.seg-sm .seg-btn { padding: 0.2rem 0.5rem; font-size: 0.72rem; }
.ms-h3row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.ms-h3row h3 { margin-top: 1.6rem; }

/* Gold capacity — inside the Trader funds section, slightly bigger */

/* Premium-locked item detail (non-subscribers) */
.item-locked{text-align:center;padding:2rem 1rem 2.4rem;max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.item-locked-ic{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-amber,rgba(var(--accent-rgb),.35));color:var(--amber,var(--amber));margin-bottom:.7rem}
.item-locked-ic svg{width:26px;height:26px}
/* Beat the generic #modal-body h3 (flex, left-aligned, uppercase) so the heading centers. */
#modal-body .item-locked h3{display:block;margin:.2rem 0 .5rem;font-size:1.05rem;text-transform:none;letter-spacing:normal;color:var(--amber-hi)}
.item-locked p{max-width:38ch;margin:0}

/* ── Premium upsell tab (Field Console) ───────────────────────────────────── */
.nav-btn.nav-premium.active,.nav-btn.nav-premium{color:var(--amber-hi)}
.prem-fc{max-width:920px;margin:0 auto;text-align:center}
.prem-fc-hero{padding:.8rem 0 1.4rem;border-bottom:1px solid var(--line);margin-bottom:1.4rem}
.prem-fc-ic{width:48px;height:48px;color:var(--amber);margin-bottom:.5rem}
.prem-fc-hero h2{display:block;margin:.3rem 0 .55rem;font-size:1.6rem;color:var(--amber-hi);text-transform:none;letter-spacing:normal}
.prem-fc-lead{margin:0 auto;max-width:60ch;color:var(--text);line-height:1.55}
.prem-fc-price{display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;margin-top:1.1rem;padding:.5rem 1.1rem;border:1px solid var(--line-amber);border-radius:var(--radius)}
.prem-fc-price-row{display:flex;align-items:baseline;gap:.3rem}
.prem-fc-amt{font-family:var(--mono);font-size:2rem;font-weight:800;color:var(--amber-hi)}
.prem-fc-per{color:var(--muted);font-size:.85rem}
.prem-fc-extra{font-size:.72rem;color:var(--muted);white-space:nowrap}
.prem-fc-list{list-style:none;margin:0;padding:0;display:inline-flex;flex-direction:column;gap:.6rem;text-align:left}
.prem-fc-list li{position:relative;padding-left:1.7rem;line-height:1.45}
.prem-fc-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--online);font-weight:700}
.prem-fc-note{margin:1.4rem auto 0;max-width:60ch;line-height:1.5}

/* Floating "back to top" button (bottom-right) — fades in once the page scrolls. */
.back-top {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line-amber); color: var(--amber-hi);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s, border-color 0.14s, color 0.14s;
}
.back-top.show { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { background: var(--panel); border-color: var(--amber); color: var(--amber); }
.back-top svg { width: 20px; height: 20px; }

/* Global chat feed — reuses the kill-feed row layout; message flows after the name. */
.chatfeed .ch-msg { color: var(--text); word-break: break-word; }
/* A line the server sent (an admin broadcast through the bridge), not a player. It carries the
   accent rather than a name colour, and it is deliberately not clickable — there is no profile
   behind it. Same distinction the Discord relay has always made by writing "Server:". */
.chatfeed .ch-system { color: var(--amber-hi); font-weight: 700; cursor: default; }
.chatfeed .ch-sys-row { background: rgba(var(--accent-rgb), 0.06); }
.chatfeed .kf-line { flex-wrap: wrap; }
/* Chat avatar — same footprint as the kill-feed icon box, but round and covering. */
.chatfeed .ch-avatar { border-radius: 50%; object-fit: cover; padding: 0; }

/* ══ Motion design ═══════════════════════════════════════════════════════════
   Page transitions, reveal animations and microinteractions. Everything here is
   CSS-only, restarts naturally when an element is re-shown (display toggles) and
   is fully disabled by the prefers-reduced-motion rule above. */

/* Screen transition: each tab fades in and rises slightly when it becomes
   visible (display:none → block restarts the animation on every switch). */
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.view { animation: viewIn 0.28s ease both; }

/* Intro: the header content settles in once on page load. */
@keyframes topIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.hud-top > * { animation: topIn 0.35s ease both; }
.mainnav .nav-btn { animation: topIn 0.35s ease both; }

/* Modal reveal: the card scales up from 98% with a fade. */
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-card { animation: modalIn 0.22s ease; }

/* Dropdown reveal (language picker). */
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lang-dd-list { animation: ddIn 0.16s ease; }

/* Microinteractions: smooth state changes on every interactive control… */
.nav-btn, .tab-btn, .btn, .seg-btn, .lb-gpill, .etr-pg, .hot-item, .item-card,
.discord-invite, .admin-link, .player-chip, .lang-dd-btn, .lang-dd-item, .ham-btn,
.bunker-link, .ed, .drawer-close {
  transition: color 0.15s, border-color 0.15s, background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
/* …a light press feedback on real buttons… */
.btn:active, .nav-btn:active, .tab-btn:active, .seg-btn:active, .etr-pg:active,
.item-card:active, .hot-item:active, .bunker-link:active { transform: translateY(1px); }

/* …and cards that lift towards the cursor. */
.bunker, .deal-card, .trader-card, .ds-card, .skill-group {
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.bunker:hover, .deal-card:hover, .trader-card:hover {
  border-color: var(--line-amber);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.item-card:hover, .hot-item:hover { border-color: var(--line-amber); transform: translateY(-2px); }

/* Bunker/outpost photos zoom gently inside their card on hover. */
.bunker-img, .outpost-img { transition: transform 0.4s ease; }
.bunker:hover .bunker-img, .trader-card:hover .outpost-img { transform: scale(1.045); }

/* Themed scrollbars for the whole site (the map panel already had them). */
html { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.5); }

/* Footer "new version available" indicator (informational). */
.foot-update { margin-left: .5rem; color: var(--amber); text-decoration: none; }
.foot-update:hover { color: var(--amber-hi); text-decoration: underline; }
.foot-update.hidden { display: none; }

/* Numbered pages — Prev/Next alone meant twenty clicks to reach page twenty. */
.etr-pg-nums { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; justify-content: center; }
.etr-pg-n { padding: 0.4rem 0.6rem; min-width: 2.1rem; font-family: var(--mono); }
.etr-pg-n.cur { border-color: var(--line-amber); color: var(--amber); background: var(--panel); cursor: default; }
.etr-pg-gap { color: var(--muted); font-family: var(--mono); padding: 0 0.15rem; user-select: none; }

/* Pagination on a phone: keep Prev/Next and the pages nearest the current one, drop the outer
   neighbours (first and last always stay, so you can still jump to either end). Marked in the
   markup rather than computed here, so rotating the device reflows without a re-render. */
@media (max-width: 560px) {
  .etr-pager { gap: 0.45rem; }
  .etr-pg { padding: 0.4rem 0.6rem; font-size: 0.78rem; }
  .etr-pg-far { display: none; }
  .etr-pg-n { min-width: 1.9rem; padding: 0.4rem 0.45rem; }
}
@media (max-width: 380px) {
  .etr-pg-nums { gap: 0.15rem; }
  .etr-pg-n { min-width: 1.7rem; padding: 0.35rem 0.35rem; font-size: 0.75rem; }
}

/* Fullscreen: the whole widget, side panel included. `position: fixed` covers the browser
   window when the Fullscreen API is unavailable; under the real API the element already fills
   the screen and these values are harmless.

   The panel and the viewport are sized `height: 72vh` for the normal in-page layout — which in
   fullscreen left the bottom ~28% of the screen empty black. Both have to be released to 100%
   of the (now full-screen) wrapper, and `height`, not `max-height`, is what actually pins them. */
.map-wrap.map-fs {
  position: fixed; inset: 0; z-index: 4000; width: 100vw; height: 100vh; max-height: none;
  border-radius: 0; margin: 0;
}
.map-wrap:fullscreen { width: 100vw; height: 100vh; max-height: none; border-radius: 0; margin: 0; }
.map-wrap.map-fs .map-side, .map-wrap:fullscreen .map-side,
.map-wrap.map-fs .map-viewport, .map-wrap:fullscreen .map-viewport {
  height: 100%; max-height: none; min-height: 0;
}
.map-fs-b .ico { width: 14px; height: 14px; }