/*
 * Server card — default theme.
 *
 * THIS FILE IS THE WHOLE THEME. Every colour, radius and gap the card uses is declared here
 * and nowhere else; cards.css contains structure only and never a literal colour. A different
 * look is a copy of this file with different values — no markup change, no JavaScript, no
 * rebuild, and no hunting through a stylesheet for the fifth place a red was hardcoded.
 *
 * The values are sampled from the live warmupserver.net cards rather than invented, so the
 * HTML card lands next to the PNG it replaces without a visible seam.
 *
 * Two rules that keep that true:
 *
 *   1. A rank colour is defined ONCE. The same variable paints the bar segment for a rank and
 *      any tag naming that rank, so "make legend yellow a bit warmer" is one edit.
 *   2. The chart is inline SVG and strokes with var(--wsc-chart-line). An <img> could not
 *      inherit these, which is one of the reasons the card stopped being a PNG.
 */

/* Declared on the wrapper AND on the card. The wrapper so page furniture outside a card (the
   API-unreachable banner) can use the same palette; the card so one can be dropped somewhere
   else on its own and still be themed. */
.wsc-cards,
.wsc-card {
  /* ── surfaces ──
   * The card is TRANSLUCENT. warmupserver.net puts a CS2 screenshot behind the grid and lets
   * it through; an opaque card would sit on that background like a sticker. Everything here
   * is rgba over whatever the page provides.
   */
  --wsc-bg:          rgba(6, 7, 9, .82);
  /* The same colour, opaque. For the one element that has to HIDE what passes behind it — the
     address line — where the card's own translucency would let a drifting tag bleed through the
     digits a player is about to copy. */
  --wsc-bg-solid:    rgb(6, 7, 9);
  --wsc-plate-bg:    rgba(0, 0, 0, .78);
  --wsc-border:      rgba(255, 255, 255, .13);

  /* The label bar is a horizontal gradient on the live site — dark teal into slate. It is the
     one piece of chrome that makes the card read as a spec sheet rather than a list. */
  --wsc-label-from:  #060c0d;
  --wsc-label-to:    #23313a;
  --wsc-label-edge:  rgba(255, 255, 255, .16);
  --wsc-label-text:  #d6d9db;

  --wsc-text:        #e4e7ea;
  --wsc-title-text:  #ffffff;
  --wsc-muted:       #8b9198;
  /* Our own faults, not the game server's: "history unavailable". Deliberately not one of the
     status-tag reds — a permissions problem on our side must not read as seventy dead servers. */
  --wsc-danger:      #c0392b;

  /* Sampled off the live buttons: a deep red fill inside a brighter red hairline. The border
     is what stops them reading as flat blocks, and it is why ours looked harder than his. */
  --wsc-action-bg:     #b50201;
  --wsc-action-edge:   #dc3545;
  --wsc-action-hover:  #d0100e;
  --wsc-action-text:   #ffffff;

  --wsc-radius: 4px;

  /*
   * There is no spacing token here any more.
   *
   * Padding and gaps are now a proportion of the card's own width (`--wsc-pad` in cards.css),
   * because the card scales the way the PNG it replaces did — a fixed 6px gap that looked right
   * beside 11px labels reads as buttons stuck together once the type is half again as large.
   * That makes spacing structural rather than thematic, so it lives with the structure.
   */

  /* ── state ── */
  --wsc-dot-fresh: #4caf3f;
  --wsc-dot-stale: #d92b2b;
  --wsc-dot-none:  #4a505c;

  /* ── rank colours — these drive BOTH the players bar and the rank tags ── */
  --wsc-rank-legend: #e8c020;
  --wsc-rank-pro:    #d92b2b;
  --wsc-rank-other:  #a855d6;
  --wsc-rank-vip:    #6b3fa0;
  --wsc-rank-f2p:    #3b9bd9;
  --wsc-rank-empty:  rgba(255, 255, 255, .07); /* unfilled track */
  /* Bots, drawn after the humans. Muted on purpose and NOT a rank hue: every rank colour on this
     card means "a human of this tier", and lending one to bots would break that. Sampled from
     the site's own PNG cards, which draw the same distinction in beige against orange. */
  --wsc-rank-bot:    rgba(148, 163, 184, .45);
  /* Humans on a card the A2S probe describes (start data): people, tier unknown. Neutral and
     solid — clearly occupied, clearly not a tier colour. */
  --wsc-rank-player: #c9ced6;

  /* ── status tag: at most one per card, and only when there is a warning to give ── */
  --wsc-tag-kickrisk-bg:   #e8c020;
  --wsc-tag-kickrisk-fg:   #0c0c0e;
  --wsc-tag-fullvip-bg:    #f08000;
  --wsc-tag-fullvip-fg:    #0c0c0e;
  --wsc-tag-fulllegend-bg: #d92b2b;
  --wsc-tag-fulllegend-fg: #ffffff;
  /* "Full right now" — the verdict on a card the probe describes, which knows the server is full
     and nothing about who filled it. Same weight as full-for-VIP: full is full. */
  --wsc-tag-full-bg:       #f08000;
  --wsc-tag-full-fg:       #0c0c0e;
  /* Shown instead of a verdict when the server is silent or the telemetry stale — deliberately quiet, because it
     is the absence of information rather than a state worth drawing the eye to. */
  --wsc-tag-stale-bg:      rgba(255, 255, 255, .1);
  --wsc-tag-stale-fg:      #9aa1ad;

  /* ── presence tags: the drifting ones. Background is the rank colour, set in cards.css
   *    from --wsc-rank-*, so these only control the text and the edge. ── */
  --wsc-tag-presence-fg:     #0c0c0e;
  --wsc-tag-presence-fg-pro: #ffffff;
  --wsc-tag-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  /* Edge on the drifting tags, so one crossing a same-coloured button stays readable. */
  --wsc-tag-ring:   rgba(0, 0, 0, .6);

  /* ── chart ──
   * A framed plot with a grey rule around it, as on the live site. No fill under the line
   * there — the shape reads more clearly against the dark plate without one. */
  --wsc-chart-bg:     rgba(8, 12, 14, .75);
  --wsc-chart-frame:  rgba(255, 255, 255, .28);
  --wsc-chart-line:   #e58810;
  --wsc-chart-grid:   rgba(255, 255, 255, .1);
  --wsc-chart-gap:    #d92b2b;

  /* ── chart readout (hover) ──
   * The guide is deliberately dimmer than the line it crosses: it is a pointer, not data, and at
   * full strength it competes with the curve for the eye at the exact moment the curve is being
   * read. The bubble borrows the plate background so it reads as part of the card rather than as
   * a browser tooltip. */
  --wsc-hover-guide:   rgba(255, 255, 255, .45);
  /* Opaque, not translucent: the plot background is already a near-black, so anything see-through
     here has no visible edge and the label reads as floating loose on the curve. */
  --wsc-hover-tip-bg:  #0b0f12;
  --wsc-hover-tip-edge: rgba(255, 255, 255, .34);
  --wsc-hover-tip-fg:  #f2f4f6;
  --wsc-hover-dot-size: 7px;

  /* ── layering ──
   * A named scale, not the 3 / 4 / 9 that accumulate when each element picks its own number.
   * Order is the contract: a drifting tag passes over the card, a bar tooltip passes over the
   * tag, and nothing needs to go above that.
   */
  --wsc-z-drift: 10;
  --wsc-z-tip:   20;

  /* ── interaction ── */
  --wsc-hover-border: rgba(229, 136, 16, .55);
  --wsc-hover-glow:   0 0 0 1px rgba(229, 136, 16, .35), 0 8px 28px rgba(0, 0, 0, .55);
  --wsc-tip-bg:      rgba(12, 14, 17, .96);
  --wsc-tip-text:    #e4e7ea;

  /* ── motion ──
   * Drift SPEED is not here. It is `tag_drift_seconds` in config.php, because the periods
   * have to stay coprime — the path only repeats after x*y seconds, so 29 and 19 wander for
   * nine minutes while 30 and 20 loop every one — and cards.js derives the vertical period and
   * the per-card variation from the single configured number to keep that true. Two duration
   * tokens sitting here were silently overwritten by the JS on every card.
   *
   * What the tags do is theme; how fast they do it is a setting Berno owns.
   */

  /* Where the drifting tags may roam, measured from the top of the card. 0% is the whole card,
     which is what was asked for and what the mockup against the live page confirmed reads best —
     confined to the lower two thirds they looked like a shuttle in a box rather than something
     roaming. Raise it to 34% to clear the title, the buttons and the wordmark again. */
  --wsc-tag-area-top: 0%;
}