/* ===========================================================================
   RUSTYSCAPE — shared stylesheet
   The Social Scape design system in plain CSS: dark navy ground, ONE cyan
   accent spent only on controls and the single important fact on a surface,
   gold for prices/rank/warnings, status colours for status. Tokens are HSL
   triplets in :root consumed as hsl(var(--x)) / hsl(var(--x) / .5).
   Spec: docs/design/SOCIALSCAPE-DESIGN-SPEC.md, build sheet
   docs/design/reskin/RESKIN-SPEC.md.
   =========================================================================== */

/* --- global ---------------------------------------------------------------- */
* { box-sizing: border-box; }
/* Every `hidden` toggle on the site (cart FAB, cart panel, gift box, login
   states) must win over any class that sets display. The UA [hidden] rule is
   not !important, so an author display: on the same element cancels it. */
[hidden] { display: none !important; }

html { background: hsl(var(--background)); }               /* overscroll never shows white */

body {
  margin: 0; min-height: 100vh;
  background: var(--gradient-dark);                         /* a subtle vertical gradient, not a flat fill */
  color: hsl(var(--foreground));
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}

.sheet, .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 96px; }

/* --- shared type ----------------------------------------------------------- */
/* Orbitron carries display text ONLY: the wordmark, page h1s, plate h2s and
   figures. Card titles, buttons, badges and every sentence are the body face. */
h1, h2 { font-family: var(--f-display); font-weight: 700; color: hsl(var(--foreground)); margin: 0; text-wrap: balance; }
h3 { font: 600 18px/1.25 var(--f-body); letter-spacing: -.01em; color: hsl(var(--foreground)); margin: 0; }
p { margin: 0 0 1em; }
a { color: hsl(var(--primary)); text-underline-offset: 3px; }
a:hover { color: hsl(var(--primary) / .85); }
::selection { background: hsl(var(--primary) / .28); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--ring)); outline-offset: 2px;
}
/* On a filled cyan control the ring is 1:1 with the fill; the 2px offset gap
   of page colour IS the ring's edge. Never lower outline-offset on a fill. */
button:disabled, .btn[disabled], .buy:disabled { opacity: .5; pointer-events: none; cursor: not-allowed; }

/* Three pages put class="label" on a whole PARAGRAPH (index ranks footnote,
   rules closing note, thanks support line). Those are prose, not labels. */
p.label {
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none;
  line-height: 1.6; color: hsl(var(--foreground-2)); max-width: 70ch;
}

/* Per-surface re-point: a label that lands on a lifted surface reads in the
   tone that clears 4.5:1 there (--muted-foreground is 4.31:1 on popover). */
.cart, .modal, .kmodal, details[open] { --muted-foreground: var(--foreground-2); }

/* --- the card primitive ---------------------------------------------------- */
.card, .cur, .dial, .tablewrap, details, .connect, .specline, .funnel,
.idbox, .notice, .step, .failed, .svr, .prod, .kit, .mapcard {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* The grid tile. Grid cards SCALE; list rows LIFT. Never both on one surface. */
.svr, .prod, .kit, .mapcard {
  position: relative; overflow: hidden; height: 100%;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
}
.svr:hover, .svr:focus-within, .prod:hover, .prod:focus-within,
.kit:hover, .kit:focus-within, .mapcard:hover, .mapcard:focus-within {
  transform: scale(1.02); box-shadow: var(--shadow-xl); border-color: hsl(var(--primary) / .5);
}

/* Reduced motion: kill the HOVER transforms, not every transform (the .mark
   diamond is a rotate; a blanket transform:none un-rotates it). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hover-lift:hover, details:hover, .svr:hover, .svr:focus-within, .prod:hover, .prod:focus-within,
  .kit:hover, .kit:focus-within, .mapcard:hover, .mapcard:focus-within { transform: none !important; }
}

/* --- badges: ONE definition for every chip on the site ---------------------
   Variants are applied per component below, never as new HTML classes:
   default      background primary       / colour primary-foreground
   secondary    background secondary     / colour secondary-foreground
   outline      border-color border      / colour foreground
   tint-primary background primary/.15   / colour primary
   tint-gold    background gold/.15      / colour gold
   Badges are rounded-md, not pills. The one 999px on the site is .cartfab. -- */
.badge, .pill, .tag, .ktag, .chip, .funnel-eyebrow, .cartcount {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--r-sm); border: 1px solid transparent; padding: 2px 10px;
  font: 700 12px/1.33 var(--f-body); letter-spacing: 0; text-transform: none; white-space: nowrap;
}

/* --- buttons: shadcn variants mapped onto the classes the pages carry ------
   default      filled cyan, near-black text     .btn .nav a.store-btn .steambtn .fbtn-primary .cartfab .cartfoot .buy
   outline      transparent, --input border      .btn.ghost .fbtn-ghost .steam-btn .nav a.discord-btn .dl a .giftbtn .cqty button
   group-hover  outline at rest, fills on the CARD's hover   .prod .buy, .kit .view
   ghost        transparent, no border           .kitprev .cartclose .x .asignout .signout
   status       --online fill                    .btn[data-copied="1"]
   No :active press-down anywhere: motion here is colour and the lift. ------- */
.btn, .fbtn, .steam-btn, .nav a.steam-btn, .steambtn, .nav a.store-btn, .nav a.discord-btn,
.buy, .kit .view, .kitprev, .cartfab, .dl a, .giftbtn, .cqty button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-sm);
  font: 500 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn.sm, .steam-btn, .nav a.steam-btn, .nav a.store-btn, .nav a.discord-btn, .kitprev, .dl a, .svr-conn .btn {
  height: 36px; padding: 0 12px; font-size: 13px;
}
.fbtn, .steambtn { height: 44px; padding: 0 24px; }
.btn svg, .fbtn svg, .steam-btn svg, .steambtn svg, .nav a.discord-btn svg { flex: none; fill: currentColor; }
.steam-btn svg { width: 15px; height: 15px; }
.nav a.discord-btn svg { width: 17px; height: 17px; }
.fbtn svg, .steambtn svg { width: 18px; height: 18px; }

.btn, .nav a.store-btn, .steambtn, .fbtn-primary, .cartfab, .cartfoot .buy {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn:hover, .btn:focus-visible, .nav a.store-btn:hover, .nav a.store-btn:focus-visible,
.steambtn:hover, .steambtn:focus-visible, .fbtn-primary:hover, .fbtn-primary:focus-visible,
.cartfab:hover, .cartfab:focus-visible, .cartfoot .buy:hover, .cartfoot .buy:focus-visible {
  background: hsl(var(--primary) / .9); }

.btn.ghost, .fbtn-ghost, .steam-btn, .nav a.steam-btn, .nav a.discord-btn, .dl a, .giftbtn, .cqty button {
  background: transparent; border-color: hsl(var(--input)); color: hsl(var(--foreground)); }
.btn.ghost:hover, .btn.ghost:focus-visible, .fbtn-ghost:hover, .fbtn-ghost:focus-visible,
.steam-btn:hover, .steam-btn:focus-visible, .nav a.steam-btn:hover, .nav a.steam-btn:focus-visible,
.nav a.discord-btn:hover, .nav a.discord-btn:focus-visible,
.dl a:hover, .dl a:focus-visible, .giftbtn:hover, .giftbtn:focus-visible, .cqty button:hover {
  background: hsl(var(--accent)); border-color: hsl(var(--primary) / .5); }

/* group-hover: the card is the hover target; its action button fills cyan */
.prod .buy, .kit .view {
  background: transparent; border-color: hsl(var(--primary) / .5); color: hsl(var(--foreground)); }
.prod:hover .buy, .prod:focus-within .buy, .kit:hover .view, .kit:focus-within .view {
  background: hsl(var(--primary)); border-color: transparent; color: hsl(var(--primary-foreground)); }

.kitprev { background: transparent; color: hsl(var(--foreground-2)); }
.kitprev:hover, .kitprev:focus-visible { background: hsl(var(--accent)); color: hsl(var(--foreground)); }

.btn.copy { min-width: 84px; }                       /* "Copy" -> "Copied" must not resize the row */
.btn[data-copied="1"] { background: hsl(var(--online)); border-color: transparent; color: hsl(var(--primary-foreground)); }

/* --- inputs: scoped to the two fields the site has -------------------------- */
.idbox input, .giftbox input {
  height: 40px; width: 100%; border-radius: var(--r-sm);
  border: 1px solid hsl(var(--input)); background: hsl(var(--background));
  padding: 0 12px; font: 500 14px/1 var(--f-mono); letter-spacing: .02em; color: hsl(var(--foreground));
}
.idbox input::placeholder, .giftbox input::placeholder { color: hsl(var(--muted-foreground)); }
.idbox input:focus-visible, .giftbox input:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 0; border-color: hsl(var(--ring)); }

/* --- header ---------------------------------------------------------------- */
.topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0 0; }
.mark {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font: 700 17px/1 var(--f-display); letter-spacing: .10em; text-transform: uppercase;
  color: hsl(var(--foreground));
}
/* The wordmark's medallion. It was a 10px rotated square outline; the real
   icon is a rusted R medallion, and at 10px that is a brown dot - so it is
   sized to the cap height of the wordmark beside it and the rotation is gone.
   64px source for a 22px box: it still resolves on a 2x display. */
.mark i { width: 22px; height: 22px; display: block; font-style: normal; flex: none;
          background: url(/img/favicon-64.png?v=a4b7789b) center / contain no-repeat; }
.mark:hover i, .mark:focus-visible i { filter: brightness(1.12); }
.nav { display: flex; gap: 8px 20px; margin-left: auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.nav a { display: inline-flex; align-items: center; min-height: 36px;     /* a 36px hit area, uniform with the three header buttons */
         font: 500 14px/1 var(--f-body); text-decoration: none; color: hsl(var(--muted-foreground));
         transition: color var(--dur-fast) var(--ease); }
@media (max-width: 560px) {                                     /* phones: the three controls lead, links follow */
  .nav { justify-content: flex-start; }
  .nav a.discord-btn, .nav a.store-btn, .nav a.steam-btn { order: -1; }
}
.nav a:hover, .nav a:focus-visible { color: hsl(var(--foreground)); }
/* The three header controls: Discord = outline + brand GLYPH (recognition,
   not text); Store = the ONE filled cyan in the header (the commercial
   action); Steam = outline. Colour variants are in the buttons section. */
.nav a.discord-btn svg { fill: hsl(var(--discord)); }
.nav a.discord-btn:hover svg, .nav a.discord-btn:focus-visible svg { fill: hsl(var(--discord)); }
/* signed-in state of the Steam chip, shared by every page */
.steam-btn.account { gap: 8px; }
.steam-btn.account img { width: 22px; height: 22px; border-radius: var(--r-xs); display: block; }
.steam-btn .aname { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asignout, .nav a.asignout { margin-left: 8px; font: 500 13px/1 var(--f-body); color: hsl(var(--foreground-2));
            text-decoration: none; align-self: center; }
.asignout:hover, .asignout:focus-visible, .nav a.asignout:hover, .nav a.asignout:focus-visible { color: hsl(var(--foreground)); }

/* --- hero ------------------------------------------------------------------ */
/* The header art carries the wordmark and the three headline claims, so it
   stands in for the h1 on index. The heading stays in the DOM, hidden, because
   an image is not a document outline. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero { padding: 48px 0 8px; position: relative; }
.hero-frame {                                   /* the card system at hero scale */
  position: relative; overflow: hidden; margin: 0 0 18px;
  border: 1px solid hsl(var(--border)); border-radius: var(--r-xl);
  background: hsl(var(--card)); box-shadow: var(--shadow-sm);
}
.heroart { display: block; width: 100%; height: auto; max-width: none; margin: 0; border: 0; box-shadow: none; }
@media (min-width: 900px) {
  /* OWNER CHECK BEFORE DEPLOY: crops the top of the art so the connect string
     sits above the 1080p fold. object-position 78% keeps the wordmark band
     (lower-centre of the art) whole. Revert = delete this one rule; the art
     then shows whole at 3:2 with the connect string below the fold. */
  .heroart { aspect-ratio: 2.35 / 1; object-fit: cover; object-position: 50% 78%; }
}
.hero h1 { font: 900 clamp(34px, 6vw, 60px)/1.05 var(--f-display); letter-spacing: .02em;
           text-transform: uppercase; margin: 6px 0 10px; }
.hero h1 span { color: inherit; }                /* no second cyan inside a gradient heading */
.tagline, .lede { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.6; color: hsl(var(--foreground-2));
                  max-width: 60ch; margin: 14px 0 0; }
.tagline b, .lede b { color: hsl(var(--foreground)); font-weight: 600; }

/* --- connect callout -------------------------------------------------------
   Card primitive, no left bar. The string is the ONE important cyan text on
   the page; user-select:all makes a click select it whole for the manual-copy
   fallback the script keeps. Copy = .btn default; "All servers" = .btn.ghost. */
.connect { margin-top: 24px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.connect .cs { flex: 1 1 320px; min-width: 0; }
.connect .label { margin-bottom: 4px; }
.connect code {
  display: block; font: 500 clamp(15px, 2vw, 18px)/1.4 var(--f-mono);
  color: hsl(var(--primary)); word-break: normal; overflow-wrap: anywhere; user-select: all;
}

/* --- spec strip: headline numbers under the hero. Not interactive, no hover. */
.specline { display: flex; flex-wrap: wrap; gap: 0; margin-top: 24px; padding: 0; overflow: hidden; }
.specline div { flex: 1 1 auto; padding: 14px 16px; border-right: 1px solid hsl(var(--border)); }   /* auto basis: the long figure takes what it needs, so nothing wraps at 1024+ */
.specline div:last-child { border-right: 0; }
.specline b { display: block; margin-top: 4px; font: 700 22px/1.1 var(--f-display); letter-spacing: .02em;
              color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {                                     /* one label/value row per stat; no doubled borders */
  .specline { flex-direction: column; }
  .specline div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                  padding: 10px 16px; border-right: 0; border-bottom: 1px solid hsl(var(--border)); }
  .specline div:last-child { border-bottom: 0; }
  .specline b { margin-top: 0; font-size: 18px; }
}

/* --- plates: each section. Orbitron carries the hierarchy; no underline bar. */
.plate { margin-top: 72px; }
.plate-head { margin-bottom: 24px; }
.plate-head h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: .02em; }
.plate-head h2::after { content: none; }

/* --- generic cards: nothing in them is clickable, so no hover --------------- */
.grid { display: grid; gap: 16px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }   /* 6 cards -> 3+3 at 1140 */
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }   /* 4 cards -> 2+2 */
.card { padding: 24px; position: relative; }
.card h3 { margin-bottom: 8px; }
.card p { color: hsl(var(--foreground-2)); font-size: 14px; line-height: 1.6; margin: 0; }
.card p + p { margin-top: 12px; }
.card ul { color: hsl(var(--foreground-2)); font-size: 14.5px; line-height: 1.7; margin: 10px 0 0 18px; padding: 0; }
.card ul li + li { margin-top: 6px; }
.card b { color: hsl(var(--foreground)); }

/* --- raid window diagram: cyan = open (the important fact), gold = penalty -- */
.dial { padding: 24px 20px 16px; }
.bar { position: relative; height: 44px; border: 1px solid hsl(var(--border)); border-radius: var(--r-sm);
       background: hsl(var(--muted)); overflow: hidden; }
.seg { position: absolute; top: 0; bottom: 0; }
.seg.open  { background: hsl(var(--primary) / .26); border-left: 2px solid hsl(var(--primary)); border-right: 2px solid hsl(var(--primary)); }
.seg.taper { background: repeating-linear-gradient(45deg, hsl(var(--gold) / .34) 0 6px, transparent 6px 12px);
             border-right: 2px solid hsl(var(--gold)); }
.ticks { position: relative; height: 26px; margin-top: 6px; }
.ticks span { position: absolute; transform: translateX(-50%); font: 500 10.5px/1 var(--f-mono);
              color: hsl(var(--muted-foreground)); white-space: nowrap; }
.ticks span::before { content: ""; position: absolute; top: -8px; left: 50%; width: 1px; height: 5px; background: hsl(var(--border)); }
/* kits.html's <p class="legend"> overrides this to display:block in its own block */
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.legend div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: hsl(var(--foreground-2)); }
.sw { width: 14px; height: 14px; border-radius: var(--r-xs); flex: none; border: 1px solid hsl(var(--border)); }
.sw.open  { background: hsl(var(--primary) / .26); border-color: hsl(var(--primary)); }
.sw.block { background: hsl(var(--muted)); }
.sw.taper { background: repeating-linear-gradient(45deg, hsl(var(--gold) / .34) 0 5px, transparent 5px 10px); border-color: hsl(var(--gold)); }

/* --- table ------------------------------------------------------------------ */
.tablewrap { overflow-x: auto; padding: 0; }
table { border-collapse: collapse; width: 100%; min-width: 660px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid hsl(var(--border) / .5); font-size: 14px; color: hsl(var(--foreground)); }
thead th { font: 800 11px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase;
           color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: hsl(var(--accent)); }             /* --accent = hover rows. A reading aid. */
td.num, th.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
td .tier { font: 700 15px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: hsl(var(--foreground)); }
td .tier.free { color: hsl(var(--foreground-2)); }
td .price { font-family: var(--f-mono); font-weight: 700; color: hsl(var(--gold)); }
td.mono { font-size: 13.5px; color: hsl(var(--foreground)); }      /* commands column: you TYPE these */

/* --- currency plate --------------------------------------------------------- */
.cur { padding: 24px; }
.cur .big { font: 700 24px/1.1 var(--f-display); letter-spacing: .02em; color: hsl(var(--foreground)); margin-top: 4px; }
.cur .rate { font: 500 13px/1.4 var(--f-mono); color: hsl(var(--foreground-2)); margin-top: 4px; }
.cur.gem .rate { color: hsl(var(--gold)); }                        /* "10 gems = $1" is a price */
.cur ul { margin: 14px 0 0; padding-left: 18px; color: hsl(var(--foreground-2)); font-size: 14.5px; }
.cur li { margin-bottom: 6px; }

/* --- faq: an interactive list row, so it LIFTS (never the scale) ------------ */
details { padding: 0 16px; margin-bottom: 8px;
          transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
                      background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
details:hover { transform: translateY(-3px); border-color: hsl(var(--primary) / .5);
                background-color: hsl(var(--popover)); box-shadow: 0 0 24px hsl(var(--primary) / .12); }
details[open] { border-color: hsl(var(--primary) / .5); background-color: hsl(var(--popover)); }
summary { cursor: pointer; padding: 14px 0; list-style: none; display: flex; align-items: center; gap: 10px;
          font: 600 16px/1.3 var(--f-body); color: hsl(var(--foreground)); }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; width: 18px; text-align: center; font: 600 16px/1 var(--f-mono); color: hsl(var(--muted-foreground)); flex: none; }
details[open] summary::before { content: "\2212"; color: hsl(var(--primary)); }
details p { color: hsl(var(--foreground-2)); font-size: 14px; line-height: 1.6; padding-bottom: 8px; margin: -2px 0 0; }

/* --- footer ----------------------------------------------------------------- */
footer { margin-top: 80px; border-top: 1px solid hsl(var(--border)); padding-top: 20px;
         display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
         font: 400 13px/1.5 var(--f-body); letter-spacing: 0; color: hsl(var(--foreground-2)); }
footer .right { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: hsl(var(--foreground-2)); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: hsl(var(--foreground)); }

/* --- server fleet ------------------------------------------------------------
   Generated by tools/build-server-catalogue.py. The card answers, in order:
   what rate, how big a team, when it wipes, what to paste into F1. Cyan on a
   card is the rate badge (the fact a player scans for) and the Copy button
   (the control). Nothing else. The flagship is marked by SHAPE: its cell is
   double width, so the grid never leaves an orphan cell at any width. ------- */
.fleet { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .svr.flag { grid-column: 1 / -1; } }         /* 1 + 2 + 2 */
@media (min-width: 1000px) { .fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .svr.flag { grid-column: span 2; } }         /* [2 + 1] + 3 */

.svr { display: flex; flex-direction: column; padding: 0; }            /* card primitive + the tile rule */

/* media: art bleeds to the card edge; badges ride the TOP corners because the
   wordmark occupies the lower band of every card's art */
.svr-media { position: relative; overflow: hidden; aspect-ratio: 2 / 1;
             background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border)); }   /* skeleton until the lazy image lands */
.svr-art { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; max-width: none; border: 0; }
.svr-rate { position: absolute; top: 12px; left: 12px; z-index: 1;
            font: 700 20px/1 var(--f-display); letter-spacing: .02em; padding: 6px 10px 5px;
            background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: var(--r-sm); }
.svr-badges { position: absolute; top: 12px; right: 12px; z-index: 1;
              display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 70%; }
.pill { background: hsl(var(--background) / .85); border-color: hsl(var(--border)); color: hsl(var(--foreground));
        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }   /* glass-dark so it survives the bright sky */
.pill.warn { color: hsl(var(--gold)); border-color: hsl(var(--gold) / .5); }

.svr-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; flex: 1; }
.svr-name { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.svr-sub  { margin: 0; font-size: 14px; line-height: 1.55; color: hsl(var(--foreground-2)); }

.svr-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px;
            background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--r-sm); padding: 8px 12px; }
.svr-spec div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                padding: 7px 0; border-bottom: 1px solid hsl(var(--border) / .5); font-size: 13px; }
/* the last row of each column, and the full-width (inline-styled) raid row, have nothing under them */
.svr-spec div:nth-last-child(-n+2), .svr-spec div[style] { border-bottom: 0; }
.svr-spec span { color: hsl(var(--foreground-2)); min-width: 0; }          /* the label wraps; the value never escapes the column */
.svr-spec b   { flex: none; font-weight: 600; color: hsl(var(--foreground)); text-align: right; font-variant-numeric: tabular-nums; }
.svr-spec .warn b { color: hsl(var(--gold)); }
@media (max-width: 380px) { .svr-spec { grid-template-columns: 1fr; }
                            .svr-spec div:nth-last-child(-n+2) { border-bottom: 1px solid hsl(var(--border) / .5); }
                            .svr-spec div:last-child { border-bottom: 0; } }

.svr-conn { display: flex; gap: 8px; align-items: stretch; margin-top: auto; }
.svr-conn code { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 36px; padding: 6px 12px;
                 white-space: normal; overflow-wrap: anywhere;   /* breaks after "client.connect" on narrow cards; the PORT is what differs per card, so it must never be hidden */
                 background: hsl(var(--background)); border: 1px solid hsl(var(--input)); border-radius: var(--r-sm);
                 font: 500 13px/1.35 var(--f-mono); color: hsl(var(--foreground)); user-select: all; }
.svr-conn .btn { flex: none; }

/* --- Discord funnel and refer-a-friend funnel --------------------------------
   The highest-value conversion on the page sits directly under the hero. Same
   card primitive as everything else - no wash, no left bar, no brand surface;
   the Discord glyph is the only third-party colour and it lives on the button.
   The button classes here are .fbtn, NOT .discord-btn: the header rules are
   scoped `.nav a.discord-btn` and do not apply outside the nav. ------------- */
.funnel { position: relative; margin-top: 40px; border-radius: var(--r-lg);
          padding: 24px clamp(20px, 3vw, 32px) 24px; }
.funnel-refer { }                                                   /* identical shell */
.funnel .plate-head { margin-bottom: 16px; }
.funnel-eyebrow { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); margin-bottom: 12px; }  /* badge secondary */
.funnel-lead { max-width: 62ch; font-size: 16px; line-height: 1.6; color: hsl(var(--foreground)); }

/* the perks as figures: the numbers are the pitch */
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0 16px; }
.perk { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--r-md); padding: 16px; }
.perk b { display: block; font: 700 24px/1.1 var(--f-display); letter-spacing: .02em; color: hsl(var(--foreground)); }
.funnel-refer .perk b { color: hsl(var(--gold)); }                 /* 250 SP, 500 SP, MVP: currency/rank amounts */
.perk span { display: block; margin-top: 5px; font: 600 14px/1.4 var(--f-body); color: hsl(var(--foreground)); }
.perk small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: hsl(var(--foreground-2)); }

/* how to link: numbered, neutral circles. Commands you type are foreground -
   they are not interactive on the page. ol.steps is scoped so the store's
   div.steps card grid is untouched. */
.steps-head { margin: 20px 0 10px; font: 800 11px/1.3 var(--f-body); letter-spacing: .14em;
              text-transform: uppercase; color: hsl(var(--muted-foreground)); }
ol.steps { counter-reset: step; list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; max-width: 68ch; }
ol.steps li { position: relative; padding-left: 38px; min-height: 26px; font-size: 14.5px; line-height: 1.55; color: hsl(var(--foreground-2)); }
ol.steps li b { color: hsl(var(--foreground)); font-weight: 600; }
ol.steps li::before {
  counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground));
  font: 700 12px/1 var(--f-mono);
}
.steps-alt, .funnel-fine { margin: 0 0 14px; max-width: 68ch; font-size: 13px; line-height: 1.6; color: hsl(var(--foreground-2)); }
.funnel-fine { margin: 0; }
.funnel-fine + .funnel-fine { margin-top: 7px; }
ol.steps li code, .steps-alt code, .howto code {
  font: 500 12.5px/1 var(--f-mono); color: hsl(var(--foreground));
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--r-sm); padding: 2px 6px;
}

/* /link's "what it gets you" list */
.linked-perks { margin: 0 0 16px; padding-left: 20px; max-width: 68ch; }
.linked-perks li { margin: 0 0 9px; font-size: 14.5px; line-height: 1.6; color: hsl(var(--foreground-2)); }
.linked-perks li b { color: hsl(var(--foreground)); font-weight: 600; }

/* refer-a-friend inline how-to */
.howto { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: step; }
.howto li { counter-increment: step; display: flex; align-items: baseline; gap: 9px; font-size: 14px; color: hsl(var(--foreground)); }
.howto li::before {
  content: counter(step); flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground));
  font: 700 11px/1 var(--f-mono); display: inline-flex; align-items: center; justify-content: center; transform: translateY(3px);
}

.funnel-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 16px; }
.fbtn-primary svg { fill: currentColor; }                          /* on a cyan fill the glyph is dark, never blurple */
#discord-msg { font: 600 14px/1.5 var(--f-body); }
@media (max-width: 560px) { .funnel-cta .fbtn { flex: 1 1 100%; justify-content: center; } }

/* --- modal family: kits (.mask .modal) and the store kit preview (.kmask .kmodal)
   One block, both name sets. .rows .row is scoped so the store's product-grid
   .row is untouched. ------------------------------------------------------- */
.mask, .kmask { position: fixed; inset: 0; background: hsl(var(--background) / .8); display: none;
                align-items: flex-start; justify-content: center; padding: 24px 16px; z-index: 80; overflow-y: auto; }
.mask.open, .kmask.open { display: flex; }
.kmask { z-index: 90; }
.modal, .kmodal { width: min(760px, 100%); position: relative; padding: 24px;
                  background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); border-radius: var(--r-lg);
                  box-shadow: var(--glass-shadow); }
.modal h2, .kmodal h2 { margin: 0 40px 4px 0; font: 600 20px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: hsl(var(--foreground)); }
.modal .cmd, .kmodal .cmd { font: 500 13px/1.4 var(--f-mono); color: hsl(var(--foreground)); }
.modal .blurb, .kmodal .blurb { margin: 8px 0 0; color: hsl(var(--foreground-2)); font-size: 14px; line-height: 1.55; }
.modal .x, .kmodal .x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center;
                        background: transparent; border: 0; border-radius: var(--r-sm); color: hsl(var(--foreground-2));
                        font-size: 26px; line-height: 1; cursor: pointer; }
.modal .x:hover, .kmodal .x:hover, .modal .x:focus-visible, .kmodal .x:focus-visible { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.kmeta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.tag, .ktag { border-color: hsl(var(--border)); color: hsl(var(--foreground-2)); }            /* badge outline */
.tag.free { background: hsl(var(--primary) / .15); border-color: transparent; color: hsl(var(--primary)); }   /* tint-primary */
.tag.rank, .ktag.rank { background: hsl(var(--gold) / .15); border-color: transparent; color: hsl(var(--gold)); }  /* tint-gold */
.sect, .ksect { margin-top: 16px; }
.sect > b, .ksect > b { display: block; margin-bottom: 8px; font: 800 11px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.rows, .krows { display: grid; gap: 6px; }
.rows .row, .krow { display: grid; grid-template-columns: 44px 1fr auto; gap: 11px; align-items: center;
                    background: hsl(var(--muted)); border: 1px solid hsl(var(--border) / .5); border-radius: var(--r-sm); padding: 7px 10px; }
.rows .row img, .krow img { width: 34px; height: 34px; object-fit: contain; }
.nm { font-size: 14px; color: hsl(var(--foreground)); }
.ds { display: block; font-size: 13px; color: hsl(var(--foreground-2)); line-height: 1.4; margin-top: 2px; }
.amt { font: 600 14px/1 var(--f-mono); color: hsl(var(--foreground)); white-space: nowrap; }
.inside { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 8px 46px; }
.chip { font-size: 11px; padding: 1px 8px; background: hsl(var(--secondary)); color: hsl(var(--foreground-2)); }   /* badge secondary */