/*
 * Server card — UNIVERSEsigna theme.
 *
 * Loaded AFTER theme-default.css and overrides only what carries WarmupServer's identity. The
 * default theme is a vendored file (see backend/beginner-servers/readme.txt) and stays untouched
 * so it can be re-vendored from upstream without a merge; everything this site changes lives here.
 *
 * WHAT IS OVERRIDDEN — brand, not meaning:
 *   surfaces      black plate      -> cosmic-dark, so the card sits on the particle field
 *                                    instead of punching a hole in it
 *   actions       WarmupServer red -> cosmic-purple, the site's own call-to-action colour
 *   brand accent  #e8443a          -> cosmic-purple (a literal in cards.css, not a variable —
 *                                    the one place structure and theme are not cleanly split)
 *   chart line    amber            -> cosmic-blue
 *
 * WHAT IS NOT — the rank palette (legend gold, pro red, vip violet, f2p blue), the status tags
 * and the freshness dots. Those are the same tier hierarchy the game servers and Discord use, and
 * a player who learns "gold = LEGEND" on one page must not have to relearn it on another. Colour
 * is carrying meaning there, not identity.
 */

.wsc-cards,
.wsc-card {
  /* ── surfaces ──
     Still translucent: the page's particle background shows through, which is the same
     relationship the default theme has with the CS2 screenshot behind warmupserver.net's grid.
     Tinted toward cosmic-dark (#0F172A) rather than neutral black. */
  --wsc-bg:          rgba(15, 23, 42, .82);
  --wsc-bg-solid:    rgb(15, 23, 42);
  --wsc-plate-bg:    rgba(2, 6, 23, .78);
  --wsc-border:      rgba(139, 92, 246, .22);

  /* Band labels: the same slate ramp, so a label reads as part of the card and not as a
     sticker on top of it. */
  --wsc-label-from:  #0b1220;
  --wsc-label-to:    #1e293b;
  --wsc-label-edge:  rgba(139, 92, 246, .26);

  /* ── actions ──
     cosmic-purple, matching the site's primary buttons. The edge is a lighter step of the same
     hue rather than a second colour, so the button reads as one object at card scale. */
  --wsc-action-bg:     #7c3aed;
  --wsc-action-edge:   #a78bfa;
  --wsc-action-hover:  #8b5cf6;
  --wsc-action-text:   #ffffff;

  /* ── chart ──
     cosmic-blue on a slate plate. The gap colour stays red: a hole in the curve means "no data
     here", and that is a warning, not branding. */
  --wsc-chart-bg:     rgba(2, 6, 23, .75);
  --wsc-chart-frame:  rgba(139, 92, 246, .30);
  --wsc-chart-line:   #3B82F6;
  --wsc-chart-grid:   rgba(255, 255, 255, .08);

  --wsc-hover-tip-bg:   #0b1220;
  --wsc-hover-tip-edge: rgba(139, 92, 246, .40);
}

/*
 * The wordmark's accent half.
 *
 * cards.css sets this as a literal (#e8443a) rather than a variable — the README names it as one
 * of two known exceptions to "no colour in cards.css". Overriding the rule is therefore the only
 * way to reach it without editing the vendored file.
 */
.wsc-card .wsc-brand__accent { color: #8B5CF6; }

/*
 * Narrow-screen overflow — a STRUCTURAL fix, not a theme one, and it lives here only because
 * cards.css is vendored.
 *
 * Upstream declares the grid as `minmax(var(--wsc-card-min), 1fr)`. A minmax floor is a hard
 * floor: once the container is narrower than the floor, the column stops shrinking and the whole
 * page scrolls sideways. At 260px that starts at a ~320px viewport — iPhone SE and every older
 * small Android — where the grid measures 260px inside a 256px container and the body scrolls
 * horizontally. Measured, not assumed.
 *
 * `min(var(--wsc-card-min), 100%)` keeps the floor while the container can afford it and lets the
 * column collapse to the container below that. Nothing changes above ~320px.
 *
 * BELONGS UPSTREAM: warmupserver.net has the same bug, worse — at its 300px default the overflow
 * starts on a 360px phone rather than a 320px one. Fixed there in ZEDce/warmupserver-web PR #3.
 * DELETE THIS BLOCK on the first re-vendor that includes that PR; leaving it costs nothing but it
 * is one more thing claiming to be a local decision when it is not.
 */
.wsc-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--wsc-card-min, 300px), 100%), 1fr));
}

/*
 * The plot, back to the proportion the reference card actually uses.
 *
 * NOT a bug fix and NOT for porting back — a deliberate difference of judgement, which is why it
 * lives here rather than in a PR against upstream.
 *
 * Measured off the live warmupserver.net card (350x569 PNG, plot from y=377 to y=560): the plot is
 * 183px tall, 52.3% of the card's WIDTH. cards.css sets 38cqw instead, and says why — our card
 * carries a title plate and two button rows the PNG does not, so upstream shortened the plot to
 * keep the whole thing from growing.
 *
 * That trade is wrong for this page. The chart is the only thing here that a player cannot get
 * from the in-game server browser, and at 38cqw it was 22% of the card against the reference's
 * 32% — the one element with something to say, squeezed so the furniture could fit. Four cards
 * still land in one row; the page scrolls a little, which is the cheaper cost.
 *
 * `flex: 1 1 auto` in cards.css means this is a FLOOR, not a height: the plot still absorbs
 * whatever slack the tallest card in the row creates, so cards stay level without dead space.
 */
.wsc-chart {
  min-height: clamp(110px, 52cqw, 260px);
}

/*
 * The card breathes, at the reference's own rate.
 *
 * cards.css derives every padding and gap from `--wsc-pad`, a proportion of the card's width, so
 * this one value sets how much air the whole card has. At 3cqw ours was measurably tighter than
 * the card it was modelled on: the wordmark band 13.3cqw against the reference's 16.3, the band
 * values 15.6 / 9.4 against 18.3 / 12.0. Label bars and the plot already matched, so the card was
 * not smaller — it was CRAMPED, which is why it read as a different design rather than a smaller
 * one.
 *
 * 5.4cqw lands within 0.4cqw of the reference on all three (15.9, 18.1, 11.9). Measured off the
 * live 350x569 PNG, not chosen: band boundaries read out of the image by row-brightness, converted
 * to a fraction of its width.
 *
 * One value and not five separate overrides, because that is how cards.css is built — everything
 * inside the card is a proportion of the card's own width. Changing the rate keeps the relationships
 * intact at every density; hand-tuning each element would have frozen them at one width.
 *
 * The clamp ceiling goes up with it (14 -> 22px), or a wide card would hit the old ceiling and
 * silently fall back to being cramped again at exactly the size where there is most room.
 */
.wsc-card {
  --wsc-pad: clamp(7px, 5.4cqw, 22px);
}

/*
 * ── Who is in the bar, and what a probe-fed card may claim ──────────────────────────────
 *
 * TOKENS, not element rules. cards.css draws every one of these from a custom property since the
 * probe landed upstream, and a second element rule here would be a duplicate that only one of the
 * two files knows about — the drift this whole arrangement exists to prevent.
 */
:root {
  /* Bots. Muted on purpose, and it is the whole point of drawing them: a bot must never be
     mistaken for a person at a glance. A desaturated slate rather than 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 warmupserver.net's own cards, which draw the same distinction in beige against
     orange; ours reads the same way against the cosmic palette. */
  --wsc-rank-bot: rgba(148, 163, 184, .45);

  /* Humans on a card the A2S probe describes (start data), where no tier is known. Light slate
     against the cosmic plate: clearly occupied, clearly not one of the rank hues. */
  --wsc-rank-player: #cbd5e1;

  /* "Full right now" — the verdict on such a card, which knows the server is full and nothing
     about who filled it. The same violet weight the other full verdicts carry here. */
  --wsc-tag-full-bg: #8b5cf6;
  --wsc-tag-full-fg: #0c0c0e;
}

/*
 * The bot COUNT, at the same size as the player count beside it.
 *
 * It shipped at 0.86em in the muted colour, which made "[7 bots]" read as a footnote — and on a
 * beginner server it is not one. "2/20" alone says the server is empty; "2/20 [7 bots]" says it
 * is warm and you will have someone to shoot at. That is the sentence a player is actually
 * reading the card for.
 *
 * Still dimmer than the count itself, because bots are context and humans are the answer.
 */
.wsc-players__bots {
  font-size: var(--wsc-fs);
  color: rgba(203, 213, 225, .78);
}

/*
 * The flag, as an image.
 *
 * Sized to the wordmark's cap height rather than to a fixed pixel value, so it tracks the card's
 * density the way the emoji it replaces did.
 *
 * NO OUTLINE. It carried a 1px hairline to stop a mostly-white flag (Japan, Poland) from
 * dissolving into the plate — but on a rectangular flag that ring reads as a box drawn around it,
 * which is a frame the card does not otherwise use anywhere. Fixing a problem no listed country
 * has yet, at a cost every one of them pays.
 *
 * If a white flag ever lands here, the answer is a soft drop shadow on that image rather than a
 * ring on all of them: it separates the shape from the background without drawing a border.
 */
.wsc-brand__flag-img {
  width: 1.5em;
  height: auto;
  margin-right: .3em;
  border-radius: 2px;
  vertical-align: -.12em;
}

/* The map row's STRUCTURE (flex, gap, thumbnail size) now lives in cards.css upstream — this
   file carries colour and this install's proportions only. */