/* ZRevive site styles.
   =====================================================================
   PALETTE AND TYPE ARE MEASURED FROM THE GAME, NOT CHOSEN
   =====================================================================
   Typefaces: pulled from the client's own compiled UI. as3gfxfontlib_newUI.gfx (the
   2017 redesign's font library, in ui_x64_*.pack2) embeds Montserrat Regular/Medium/
   SemiBold/Bold/ExtraBold, Oswald Light/Regular/Bold and Roboto. HudCompassWindow.gfx
   is MontserratRegular + MontserratSemiBold; MarketplaceOpenCratePageWidget.gfx - the
   crate-opening screen - is MontserratExtraBold. So: Oswald for condensed headings,
   Montserrat for UI and body. That is the game's own pairing, not a lookalike. The
   previous Barlow Condensed / Barlow pair was a substitute for exactly these two.
   Two families, down from three: --mono is now a system stack, because Roboto Mono
   earns its place in the game's UI but not a third webfont download on a bad link.

   Colour: sampled from 2,547 UI textures in the same packs (DXT endpoint colours,
   saturated pixels only). The result, by share of saturated UI pixel:
       red (hue 0-19 + 350-359) .... 64.5%      a pure ramp, #400000 -> #c00000
       orange / amber (hue 20-49) .. 26.7%      incl. worn leather #b08060, #c09070
       steel blue (hue 200-239) .....  2.2%
       everything else ............. negligible
   So KotK's UI is RED-dominant with a warm amber/tan second, and the logo agrees:
   sampling zrevive-640.png gives #050303, #f7f7f7 and a red ramp #b80001-#d70001,
   which lands on the client's own UI red (#c80505, recorded below in --kotk-red).
   Red therefore stays primary here. Amber is the HUD//structural accent - labels,
   kickers, live readouts, hazard stripes - which is where the game puts it too.
   =====================================================================  */
:root {
  /* Warm near-blacks: the measured UI darks are browns (#302010, #403020), not
     neutral greys, which is most of why this reads as grimy rather than as a dark
     admin theme. The whole ink ramp carries a little of that warmth. */
  --ink: #0a0908;
  --ink-2: #110f0e;
  --ink-3: #181512;
  --ink-4: #221d18;
  --line: #2b2621;
  --line-2: #3f372e;
  --bone: #ece7de;
  --ash: #a39b8d;
  --ash-2: #7a7266;

  /* The logo's red, which is also the client's UI red. */
  --red: #c20408;
  --red-hi: #e01219;
  --red-deep: #700000;            /* the darkest step of the measured UI red ramp */
  --red-glow: rgba(194, 4, 8, .20);

  /* Worn leather / HUD amber, straight off the measured swatches #b08060 + #c09070.
     Desaturated on purpose: a pure orange here would look like a warning toast, and
     the game's warm accent is surplus-canvas, not safety-cone. */
  --amber: #c08b52;
  --amber-hi: #e0a860;
  --amber-dim: rgba(192, 139, 82, .16);

  --steel: #6e8ca8;               /* the minor cool accent, ~2% of UI pixels */
  --ok: #7cc47f;
  --warn: #d9a441;
  --info: #6e8ca8;
  --steam: #171a21;

  --head: "Oswald", "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --body: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 32px);
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  color: var(--bone);
  /* 15px, not 16: Montserrat has a much larger x-height than the Barlow it replaces,
     so matching the old px size would have grown every line of body copy on the site. */
  font: 15px/1.65 var(--body);
  background: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Film grain plus a fine scanline. Both are generated, so the whole texture layer costs
   no requests and a few hundred bytes - which matters on the links some players are on.
   The scanline is deliberately almost invisible (4% over a 3px period): enough to kill
   the flatness of large dark areas, not enough to buzz or to hurt text contrast. */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 3px);
}
body > * { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bone); text-underline-offset: 3px; }
a:hover { color: #fff; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- top bar ---------- */
.top {
  border-bottom: 1px solid var(--line);
  /* The thin amber underline is the HUD edge: it is the one piece of chrome on every
     page, so it is where the accent does the most work for the least noise. */
  box-shadow: 0 1px 0 rgba(192, 139, 82, .30);
  background: rgba(10, 9, 8, .90);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.top .wrap { display: flex; align-items: center; gap: 32px; height: 72px; }
.top .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.top .brand img { width: 40px; height: 40px; }
.top .brand span { font: 700 24px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; }
/* 22px, not 28px: with Download now on every page the row has one more item than it
   used to, and at ~1180px the last link was sliding under the session button. */
.top nav { display: flex; gap: 22px; }
.top nav a {
  font: 600 15px/1 var(--head); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ash); text-decoration: none; padding: 27px 0 25px; border-bottom: 2px solid transparent;
}
.top nav a:hover { color: var(--bone); border-bottom-color: var(--amber); }
.top nav a.on { color: var(--bone); border-bottom-color: var(--red); }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.who { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.who img { width: 32px; height: 32px; border: 1px solid var(--line-2); }

/* ---------- buttons ---------- */
/* Angular, never rounded: the game's buttons are cut plates. The notched corner is a
   clip-path, so it costs nothing and degrades to a plain rectangle anywhere clip-path
   is unsupported - the button still works and still reads as a button. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 14px/1 var(--head); letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 26px; border: 1px solid var(--line-2); background: var(--ink-3);
  color: var(--bone); text-decoration: none; cursor: pointer; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--amber); color: #fff; background: var(--ink-4); }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.red:hover { background: var(--red-hi); border-color: var(--red-hi); color: #fff; }
/* The amber button is for HUD-ish secondary actions, never for destructive ones. */
.btn.amber { background: transparent; border-color: var(--amber); color: var(--amber-hi); }
.btn.amber:hover { background: var(--amber-dim); color: #fff; }
/* clip-path cuts off anything drawn outside the box, including the global focus
   outline, so a notched button needs its focus ring drawn INSIDE it. Without this the
   notch would have quietly cost keyboard users their focus indicator. */
.btn:focus-visible {
  outline: 2px solid var(--amber-hi); outline-offset: -4px;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.btn.steam { background: var(--steam); border-color: #2a475e; color: #c7d5e0; }
.btn.steam:hover { border-color: #66c0f4; color: #fff; }
/* A 9px chamfer is proportionally huge on a small button and starts to look like a
   rendering fault rather than a cut plate, so small buttons get a smaller cut. */
.btn.small {
  padding: 10px 14px; font-size: 12px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.btn.ghost { background: transparent; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--head); text-transform: uppercase; letter-spacing: .01em; margin: 0; line-height: .95; font-weight: 700; text-wrap: balance; }
.hero-wrap { padding-bottom: clamp(56px, 8vw, 88px); }
/* The section label is the site's most repeated piece of chrome, so it is where the HUD
   accent earns its keep: amber, wide-tracked condensed caps, with a short hazard-striped
   rule instead of a plain bar. This is the game's own idiom for a field label. */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 13px/1 var(--head); letter-spacing: .26em; text-transform: uppercase; color: var(--amber-hi);
}
.kicker::before {
  content: ""; width: 26px; height: 7px; flex-shrink: 0;
  background: repeating-linear-gradient(135deg, var(--amber) 0 4px, transparent 4px 8px);
}
/* Where a kicker sits on something already amber-heavy, the red variant keeps it legible. */
.kicker.red { color: var(--red-hi); }
.kicker.red::before { background: repeating-linear-gradient(135deg, var(--red) 0 4px, transparent 4px 8px); }
.muted { color: var(--ash); }
.mono { font-family: var(--mono); font-size: 14px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 44px; }
/* Oswald's caps are taller than Barlow Condensed's at the same px, so the old 56px cap
   rendered noticeably bigger than it used to; 50 restores the intended weight. */
.section-head h2 { font-size: clamp(34px, 4.4vw, 50px); margin-top: 14px; }
.section-head p { margin: 0; color: var(--ash); font-size: 16px; max-width: 34em; }

/* ---------- hero ----------
   Three layers of light, all generated: a red bloom behind the mark (where the logo
   actually sits), a warm amber floor wash, and a vignette that darkens the corners so
   the headline has something to sit against. No imagery beyond the logo itself. */
.hero-wrap {
  position: relative;
  background:
    radial-gradient(760px 460px at 76% 38%, var(--red-glow), transparent 68%),
    radial-gradient(900px 300px at 20% 100%, rgba(192, 139, 82, .07), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(180deg, rgba(194, 4, 8, .06), transparent 42%);
}
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; align-items: center; padding: clamp(44px, 6.5vw, 84px) 0 clamp(36px, 5vw, 60px); }
/* Oswald is a condensed face, so it can carry a much bigger display size in the same
   column than the Barlow Condensed it replaces, and it wants tighter tracking. */
.hero h1 { font-size: clamp(62px, 9.4vw, 124px); font-weight: 700; margin: 18px 0 22px; letter-spacing: .005em; line-height: .88; }
.hero h1 em { font-style: normal; color: var(--red-hi); }
/* The outlined word: stencil-plate lettering, the one piece of pure styling flourish
   in the hero. -webkit-text-stroke is not universal, so the fallback is simply a solid
   word in the same colour - it never leaves an invisible headline. */
.hero h1 .cut {
  font-style: normal; color: transparent;
  -webkit-text-stroke: 2px var(--bone);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 2px red) { .hero h1 .cut { color: var(--bone); } }
.hero .lede { font-size: clamp(16px, 1.5vw, 18px); color: var(--ash); max-width: 32em; margin: 0 0 30px; }
.hero .lede strong { color: var(--bone); font-weight: 600; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; color: var(--ash-2); font: 600 11px/1.4 var(--head); letter-spacing: .12em; text-transform: uppercase; }
.hero .trust span { display: inline-flex; align-items: center; }
.hero .trust span::before {
  content: ""; width: 7px; height: 7px; margin-right: 9px; flex-shrink: 0;
  background: var(--amber); transform: rotate(45deg);
}
.hero .logo { width: 100%; max-width: 470px; justify-self: center; filter: drop-shadow(0 20px 54px rgba(194, 4, 8, .42)); }

/* ---------- status bar: a HUD readout ----------
   Amber field labels over monospace figures, with a hairline amber rule along the top
   of the strip. This is the single most HUD-like element on the site and it is also the
   one carrying live numbers, so the treatment and the content agree. */
.status {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-top: 1px solid var(--amber);
  background: linear-gradient(180deg, var(--amber-dim), transparent 60%), var(--ink-2);
}
.status > div { padding: 18px 22px; border-right: 1px solid var(--line); min-width: 0; }
.status > div:last-child { border-right: 0; }
.status .k { font: 600 11px/1 var(--head); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.status .v { font: 700 26px/1.1 var(--head); letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px rgba(124, 196, 127, .14); }
.dot.wip { background: var(--warn); box-shadow: 0 0 0 4px rgba(217, 164, 65, .14); }

/* ---------- plan ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pillars > div { background: var(--ink); padding: 30px 28px 32px; position: relative; }
/* The stencilled index number, oversized and amber: a crate-stamp, not a bullet. */
.pillars .n { font: 700 13px/1 var(--head); color: var(--amber); letter-spacing: .24em; }
.pillars h3 { font-size: 26px; margin: 16px 0 12px; }
.pillars p { color: var(--ash); margin: 0; }

/* ---------- roadmap ---------- */
.roadmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lane { border: 1px solid var(--line); background: var(--ink-2); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.lane header { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--ink-3); font: 600 15px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; }
.lane ul { list-style: none; margin: 0; padding: 6px 18px 12px; }
.lane li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--bone); font-size: 15px; line-height: 1.45; }
.lane li:last-child { border-bottom: 0; }
.lane li small { display: block; color: var(--ash-2); font-size: 13px; margin-top: 2px; }

/* ---------- join ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; list-style: none; margin: 0; padding: 0; }
.steps li {
  counter-increment: s; border: 1px solid var(--line); background: var(--ink-2);
  padding: 24px 22px 26px; position: relative;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.steps li::before {
  content: counter(s, decimal-leading-zero); display: block;
  font: 700 44px/1 var(--head); color: var(--amber); margin-bottom: 14px; letter-spacing: .02em;
}
.steps b { display: block; font: 700 21px/1.1 var(--head); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.steps span { color: var(--ash); font-size: 15px; }

.req { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--line); }
.req > div { padding: 18px 22px; border-right: 1px solid var(--line); min-width: 0; }
.req > div:last-child { border-right: 0; }
.req .k { font: 600 11px/1 var(--head); letter-spacing: .22em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.req .v { color: var(--bone); font-size: 15px; }

/* ---------- faq + log ---------- */
.two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; }
.two h2 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 24px; }
details.faq { border-top: 1px solid var(--line); }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-weight: 600; font-size: 17px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 13px; font: 400 26px/1 var(--head); color: var(--red-hi);
}
details.faq[open] summary::after { content: "–"; }
details.faq p { margin: 0 0 20px; color: var(--ash); max-width: 40em; }

.log { border-left: 2px solid var(--amber); padding: 2px 0 2px 20px; margin-bottom: 26px; }
.log time { font: 600 12px/1 var(--head); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.log h3 { font-size: 22px; margin: 8px 0 6px; }
.log p { margin: 0; color: var(--ash); }

/* ---------- footer ---------- */
footer.foot { border-top: 1px solid var(--line); background: var(--ink-2); padding: 56px 0 28px; color: var(--ash); font-size: 15px; }
footer.foot .cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
footer.foot .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 14px; }
footer.foot .brand img { width: 44px; height: 44px; }
footer.foot .brand span { font: 700 24px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); }
footer.foot h4 { font: 600 13px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--ash-2); margin: 6px 0 16px; }
footer.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer.foot a { color: var(--ash); text-decoration: none; }
footer.foot a:hover { color: var(--bone); }
footer.foot .legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; color: var(--ash-2); }

/* ---------- account / panels (also used by account.html) ---------- */
.page { padding-block: 56px 80px; } /* block only: keeps .wrap's side gutter on phones */
.page > h1 { font-size: clamp(40px, 6vw, 56px); margin-bottom: 30px; }
.panel {
  position: relative; border: 1px solid var(--line); background: var(--ink-2);
  padding: 26px; margin-bottom: 20px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.profile { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile img { width: 72px; height: 72px; border: 1px solid var(--line-2); background: var(--ink-3); }
.profile h2 { font-size: 34px; }
.tag {
  display: inline-block; font: 700 12px/1 var(--head); letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 8px; border: 1px solid currentColor; vertical-align: middle;
}
.lvl0 { color: var(--ash); } .lvl1 { color: var(--info); } .lvl2 { color: var(--warn); } .lvl3 { color: var(--red-hi); }
.keybox {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ink); border: 1px dashed var(--line-2); padding: 14px 16px; margin: 14px 0;
}
.keybox code { font: 600 19px/1.2 var(--mono); letter-spacing: .04em; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.alert { border: 1px solid var(--red); background: rgba(196, 22, 28, .08); padding: 16px 18px; margin-bottom: 20px; }
.alert.ok { border-color: var(--ok); background: rgba(124, 196, 127, .07); }
.bigcode { font: 700 44px/1 var(--mono); letter-spacing: .1em; margin: 10px 0 18px; color: #fff; }

/* ---------- notice page ---------- */
.center-page { display: grid; place-items: center; padding: 24px; }
.notice { max-width: 520px; text-align: center; }
.notice-logo img { width: 160px; height: 160px; margin: 0 auto; }
.notice h1 { font-size: 42px; margin: 8px 0 12px; }
.notice p { color: var(--ash); margin: 0 0 24px; }
.notice.bad h1 { color: var(--red-hi); }

.toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 50; background: var(--ink-3);
  border: 1px solid var(--line-2); padding: 12px 16px; font-weight: 600;
}

/* =====================================================================
   ECONOMY: Crowns, inventory, crates, battle pass (account.html, admin.html)
   ===================================================================== */
/* Rarity colours ARE the game's ItemRarity table (items_kotk.json rarities[].color): Standard #FFFFFF,
   Common #049F4C, Uncommon #20A3FF, Rare #9E20FF, Ultra Rare #FFAE20, Legendary #C13D19. */
:root {
  --gold: #d9a441;
  --r-standard: #c9c3b8;
  --r-common: #049f4c;
  --r-uncommon: #20a3ff;
  --r-rare: #9e20ff;
  --r-ultra-rare: #ffae20;
  --r-legendary: #c13d19;
}
.r-standard { --rc: var(--r-standard); }
.r-common { --rc: var(--r-common); }
.r-uncommon { --rc: var(--r-uncommon); }
.r-rare { --rc: var(--r-rare); }
.r-ultra-rare { --rc: var(--r-ultra-rare); }
.r-legendary { --rc: var(--r-legendary); }
.rc { color: var(--rc, var(--ash)); }

/* crowns amount: icon + number */
.cr { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.cr svg { width: 1em; height: 1em; fill: var(--gold); flex-shrink: 0; }

/* balance block in the account header */
.crown-balance {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border: 1px solid var(--line-2); background: var(--ink);
  box-shadow: inset 0 2px 0 var(--gold);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.crown-balance svg { width: 30px; height: 30px; fill: var(--gold); flex-shrink: 0; }
.crown-balance .v { font: 700 34px/1 var(--head); letter-spacing: .01em; }
.crown-balance .k { font: 600 11px/1 var(--head); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }

/* account sub-navigation */
.subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 24px; overflow-x: auto; scrollbar-width: none; }
.subtabs a {
  font: 600 15px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--ash);
  padding: 14px 16px 12px; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.subtabs a:hover { color: var(--bone); }
.subtabs a.on { color: var(--bone); border-bottom-color: var(--red); }
.subtabs a .n { font-family: var(--mono); font-size: 12px; color: var(--ash-2); margin-left: 6px; letter-spacing: 0; }

.eco-note { border-left: 2px solid var(--gold); padding: 2px 0 2px 16px; color: var(--ash); margin: 0 0 22px; max-width: 46em; }
.eco-note b { color: var(--bone); font-weight: 600; }
.eco-earn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); margin-top: 16px; }
.eco-earn > div { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.eco-earn > div:last-child { border-right: 0; }
.eco-earn .k { font: 600 11px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.eco-earn .v { font: 700 20px/1.1 var(--head); }

/* filter chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  font: 600 13px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--ash);
  background: transparent; border: 1px solid var(--line-2); padding: 8px 12px; border-radius: 2px; cursor: pointer;
}
.chip:hover { color: var(--bone); border-color: var(--ash-2); }
.chip.on { color: var(--bone); border-color: var(--red); background: rgba(196, 22, 28, .12); }

/* item cards */
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.item-card {
  position: relative; min-width: 0; padding: 12px 12px 14px;
  border: 1px solid var(--line); border-bottom: 3px solid var(--rc, var(--line-2)); /* the client's tiles: thin border, rarity strip below */
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc, transparent) 9%, transparent), transparent 55%), var(--ink-2);
}
.item-card .ico {
  aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: 12px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc, #000) 14%, transparent), transparent), var(--ink);
  border: 1px solid var(--line);
}
.item-card .ico svg { width: 44%; height: auto; fill: none; stroke: var(--rc, var(--ash)); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.item-card .rar { font: 600 11px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--rc, var(--ash)); }
.item-card .nm { font: 700 19px/1.05 var(--head); text-transform: uppercase; margin: 6px 0 4px; overflow-wrap: anywhere; }
.item-card .sl { color: var(--ash-2); font-size: 13px; }
.item-card .qty { position: absolute; top: 18px; right: 18px; font: 600 12px/1 var(--mono); background: var(--ink-3); border: 1px solid var(--line-2); padding: 4px 6px; }
.empty { border: 1px dashed var(--line-2); padding: 28px; text-align: center; color: var(--ash); }

/* crate odds bar + recent drops */
.odds { display: flex; height: 6px; background: var(--ink); border: 1px solid var(--line); }
.odds span { background: var(--rc); min-width: 2px; }
.odds-list { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ash); }
.odds-list b { font-weight: 600; }
.recent { display: flex; gap: 8px; flex-wrap: wrap; }
.recent .tag { border-color: var(--rc); color: var(--rc); }

/* crates held as items: their cards use the store's gold */
.r-crate { --rc: var(--gold); }
.item-card .open-btn { margin-top: 10px; width: 100%; }
.item-card.just-got { animation: zr-got 1.4s ease-out; box-shadow: inset 0 0 0 1px var(--rc); }
@keyframes zr-got { 0% { filter: brightness(2); } 100% { filter: none; } }

/* crate opening reveal, in the client's own idiom (UIRoot.gfx: flat near-black translucent slabs with a
   thin light border, the red header bar, condensed caps, square tiles with a rarity strip). The red is the
   client's UI red (#c80505 in UIRoot's own markup); the rarity colours are its ItemRarity table. */
:root { --kotk-red: #c80505; --kotk-line: rgba(236, 231, 222, .22); --kotk-slab: rgba(10, 9, 8, .92); }
dialog.reveal {
  background: transparent; border: 0; padding: 0; color: var(--bone); max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; overflow: hidden;
}
dialog.reveal::backdrop { background: rgba(6, 5, 5, .86); }
.reveal-stage { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.kotk-panel {
  width: min(640px, 100%); background: var(--kotk-slab); border: 1px solid var(--kotk-line);
  display: grid; grid-template-rows: auto 1fr auto auto auto; text-align: center; position: relative;
}
.kotk-panel::before { /* grime */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.kotk-head {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 16px; height: 46px; background: var(--kotk-red);
  font: 800 22px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-align: left;
}
.kotk-head .sub { margin-left: auto; font-weight: 600; font-size: 16px; letter-spacing: .1em; color: rgba(255, 255, 255, .85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.reveal-mute { flex-shrink: 0; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .35); color: #fff; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; }
.reveal-mute:hover { background: rgba(0, 0, 0, .45); }
.reveal-mute svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.kotk-stage { position: relative; min-height: 360px; display: grid; place-items: center; padding: 28px 24px 18px; overflow: hidden; }
.kotk-crate {
  width: 200px; height: 200px; display: grid; grid-template-rows: 1fr auto; padding: 14px 14px 0; background: rgba(0, 0, 0, .55);
  border: 1px solid var(--kotk-line); border-bottom: 3px solid var(--gold); transition: opacity .3s;
}
.kotk-crate .art-box svg { width: 44%; height: auto; fill: none; stroke: var(--ash-2); stroke-width: 1.1; stroke-linejoin: round; }
.kotk-crate .lbl { font: 700 13px/1.1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); padding: 8px 0 10px; }
.kotk-crate.shake { animation: kotk-shake .34s linear; }
.kotk-crate.off { opacity: .35; }
@keyframes kotk-shake {
  0% { transform: translate(0, 0); filter: brightness(1); }
  10% { transform: translate(-3px, 1px); filter: brightness(1.6); }
  30% { transform: translate(3px, -2px); }
  50% { transform: translate(-2px, 2px); filter: brightness(1.15); }
  70% { transform: translate(2px, 1px); }
  100% { transform: translate(0, 0); filter: brightness(1); }
}
.kotk-hint { font: 600 12px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--ash-2); padding-bottom: 10px; }
/* the slam: the item's own icon, large, dropped in flat with a rarity flash */
.kotk-hit { position: relative; display: grid; gap: 6px; justify-items: center; padding: 0 12px; animation: kotk-slam .32s cubic-bezier(.2, 1.2, .3, 1); }
.kotk-hit .burst {
  position: absolute; left: 50%; top: 40%; width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 55%, transparent), color-mix(in srgb, var(--rc) 10%, transparent) 55%, transparent 72%);
  animation: kotk-burst .9s ease-out forwards;
}
.kotk-hit .burst::after { /* the flash frame: a square outline that expands and fades */
  content: ""; position: absolute; inset: 120px; border: 2px solid var(--rc); animation: kotk-frame .7s ease-out forwards;
}
.kotk-hit .ico { position: relative; z-index: 1; width: 240px; height: 240px; display: grid; place-items: center; background: rgba(0, 0, 0, .5); border: 1px solid var(--kotk-line); border-bottom: 4px solid var(--rc); }
.kotk-hit .ico .art-box img { max-width: 86%; max-height: 86%; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--rc) 55%, transparent)); }
.kotk-hit .ico .art-box svg { width: 40%; height: auto; fill: none; stroke: var(--rc); stroke-width: 1.3; stroke-linejoin: round; }
.kotk-hit .nm { position: relative; z-index: 1; font: 800 32px/1 var(--head); letter-spacing: .03em; text-transform: uppercase; color: #fff; margin-top: 10px; overflow-wrap: anywhere; }
.kotk-hit .rar { position: relative; z-index: 1; font: 700 14px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; }
.kotk-hit p { position: relative; z-index: 1; color: var(--ash); font-size: 14px; margin: 4px 0 0; max-width: 42em; }
.kotk-stage.hit-in { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35)); }
@keyframes kotk-slam { 0% { transform: scale(1.7); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; } }
@keyframes kotk-burst { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: .55; transform: scale(1); } }
@keyframes kotk-frame { 0% { inset: 120px; opacity: 1; } 100% { inset: -40px; opacity: 0; } }
.kotk-status { padding: 6px 18px 0; color: var(--ash); font-size: 15px; min-height: 1.4em; }
.reveal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 48px; padding: 14px 18px 18px; }
.reveal-actions .btn { border-radius: 0; }
@media (max-width: 560px) {
  .kotk-stage { min-height: 300px; padding: 20px 12px 12px; }
  .kotk-crate { width: 160px; height: 160px; }
  .kotk-hit .ico { width: 190px; height: 190px; }
  .kotk-hit .nm { font-size: 26px; }
  .kotk-head { font-size: 18px; }
}

/* battle pass */
.bp-head { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.bp-head h2 { font-size: clamp(30px, 5vw, 40px); margin-top: 10px; }
.bp-head .dates { color: var(--ash); font-size: 15px; margin-top: 6px; }
.xpbar { margin: 4px 0 6px; height: 12px; background: var(--ink); border: 1px solid var(--line-2); position: relative; }
.xpbar > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--red), var(--red-hi)); }
.xpmeta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ash); }
.xpmeta b { color: var(--bone); font-weight: 600; }
.bp-wrap { display: grid; grid-template-columns: 92px minmax(0, 1fr); border: 1px solid var(--line); background: var(--ink-2); margin-top: 18px; }
.bp-labels { display: grid; grid-template-rows: 40px 132px 132px; border-right: 1px solid var(--line); }
.bp-labels > div { display: flex; align-items: center; padding: 0 12px; font: 700 13px/1.1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); border-bottom: 1px solid var(--line); }
.bp-labels > div:last-child { border-bottom: 0; color: var(--gold); }
.bp-track { display: grid; grid-auto-flow: column; grid-auto-columns: 138px; overflow-x: auto; scroll-behavior: smooth; }
.bp-tier { display: grid; grid-template-rows: 40px 132px 132px; border-right: 1px solid var(--line); }
.bp-tier .num { display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 15px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--ash-2); border-bottom: 1px solid var(--line); }
.bp-tier.reached .num { color: var(--bone); }
.bp-tier.current .num { color: #fff; background: rgba(196, 22, 28, .16); box-shadow: inset 0 -2px 0 var(--red); }
.bp-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); min-width: 0; }
.bp-cell:last-child { border-bottom: 0; }
.bp-cell .rw { font: 700 16px/1.1 var(--head); text-transform: uppercase; overflow-wrap: anywhere; }
.bp-cell .rw small { display: block; font: 600 11px/1.2 var(--head); letter-spacing: .16em; margin-bottom: 4px; }
.bp-cell .rw .cr { font-size: 20px; }
.bp-cell .st { font: 600 12px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--ash-2); }
.bp-cell.claimed .st { color: var(--ok); }
.bp-cell.locked .rw { opacity: .45; }
.bp-cell.claimable { background: rgba(196, 22, 28, .07); }
.bp-cell .btn { padding: 8px 10px; font-size: 12px; }
.bp-cell.premium { background: linear-gradient(180deg, rgba(217, 164, 65, .05), transparent); }
.bp-cell.premium.claimable { background: rgba(217, 164, 65, .12); }

/* artwork box: real item/crate art, or a neutral silhouette when there is none */
.art-box { width: 100%; height: 100%; display: grid; place-items: center; }
.art-box img { max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.item-card .ico .art-box svg { width: 44%; height: auto; }

/* top bar Crowns pill */
.crown-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 6px; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--ink-3); border-radius: 999px;
  font: 700 16px/1 var(--head); letter-spacing: .02em; color: var(--bone);
}
.crown-pill:hover { border-color: var(--gold); color: #fff; }
.crown-pill svg { width: 16px; height: 16px; fill: var(--gold); }

/* store */
:root { --spark: #d9b15c; }
.store-head { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.store-head h1 { font-size: clamp(40px, 6vw, 56px); margin-top: 12px; }
.store-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.store-card {
  display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--bone); cursor: pointer;
  border: 1px solid var(--line); border-top: 1px solid var(--line-2); background: var(--ink-2);
  transition: border-color .15s, background .15s, transform .15s;
}
.store-card:hover, .store-card:focus-visible { border-color: var(--ash-2); background: var(--ink-3); color: #fff; }
.store-card .art { aspect-ratio: 1 / 1; padding: 10px; background: radial-gradient(60% 55% at 50% 52%, rgba(236, 231, 222, .05), transparent 70%); }
.store-card .art .art-box svg, .crate-hero .art-box svg { width: 46%; height: auto; fill: none; stroke: var(--ash-2); stroke-width: 1.1; stroke-linejoin: round; }
.store-card .nm { padding: 0 14px; font: 700 15px/1.2 var(--body); color: #fff; min-height: 2.4em; overflow-wrap: anywhere; }
.store-card .spark { display: block; width: 100%; height: 30px; margin: 10px 0 0; }
.spark-line { fill: none; stroke: var(--spark); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark-fill { fill: rgba(217, 177, 92, .08); stroke: none; }
.store-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.store-card .foot .cr { font: 700 22px/1 var(--head); letter-spacing: .01em; }
/* store tiers (catalog crate.tier): Gold = the client's Gold/Platinum crates and Ultra Rare-only
   drops, Silver, Bronze, Normal */
:root { --t-gold: #e8b64a; --t-silver: #c4ccd6; --t-bronze: #cd8a55; --t-normal: #8f897f; }
.t-gold { --tc: var(--t-gold); }
.t-silver { --tc: var(--t-silver); }
.t-bronze { --tc: var(--t-bronze); }
.t-normal { --tc: var(--t-normal); }
.tier-badge {
  display: inline-block; font: 700 11px/1 var(--head); letter-spacing: .18em; text-transform: uppercase;
  color: var(--tc, var(--ash)); border: 1px solid var(--tc, var(--line-2)); background: var(--ink); padding: 4px 6px; white-space: nowrap;
}
.tier-badge.mini { font-size: 10px; padding: 2px 4px; margin-left: 6px; letter-spacing: .14em; }
.tier-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); margin-right: 7px; vertical-align: 1px; }
.store-card { position: relative; }
.store-card .tier-badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.store-card:not(.t-normal) { box-shadow: inset 0 2px 0 var(--tc); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 7%, transparent), transparent 45%), var(--ink-2); }
.store-card:not(.t-normal):hover, .store-card:not(.t-normal):focus-visible { background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 10%, transparent), transparent 45%), var(--ink-3); }
.store-card.t-gold .art { background: radial-gradient(60% 55% at 50% 52%, color-mix(in srgb, var(--t-gold) 14%, transparent), transparent 70%); }
.tier-head { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 12px; }
.chips + section .tier-head { margin-top: 0; }
.tier-head h2 { font-size: 26px; color: var(--tc); }
.tier-head .muted { font-size: 14px; }
.chip:disabled { opacity: .45; cursor: default; }
.chg { font: 600 13px/1 var(--mono); color: var(--ash-2); }
.chg.up { color: var(--ok); }
.chg.down { color: var(--red-hi); }

/* "Up 12% today": the price move in words, so a market that moved reads as news and not as a
   decoration. .trend is the sentence, .market-strip the panel on a crate page. */
.trend { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--body); color: var(--ash-2); }
.trend .arrow { font-size: 11px; line-height: 1; }
.trend.up { color: var(--ok); }
.trend.down { color: var(--red-hi); }
.trend.flat { color: var(--ash-2); }
.market-strip { display: grid; gap: 8px; padding: 12px 0 0; }
.market-strip .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.market-strip .why { font-size: 13px; }
.band { position: relative; height: 6px; background: var(--ink-4); border: 1px solid var(--line); }
.band-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--line-2), var(--spark)); }
.band-pin { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: var(--bone); }
.band-ends { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); color: var(--ash-2); }

.crate-detail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.crate-hero { border: 1px solid var(--line); background: var(--ink-2); }
.crate-hero .art { aspect-ratio: 1 / 1; padding: 18px; background: radial-gradient(60% 55% at 50% 52%, rgba(236, 231, 222, .06), transparent 70%); }
.crate-hero .body { padding: 18px 20px 20px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.crate-hero h2 { font-size: clamp(30px, 4vw, 40px); }
.crate-hero .pricebox { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crate-hero .pricebox .cr { font: 800 38px/1 var(--head); }
.chart-panel { border: 1px solid var(--line); background: var(--ink-2); padding: 16px 18px 12px; margin-bottom: 16px; }
.chart-panel .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-panel h3 { font-size: 20px; }
.price-chart { display: block; width: 100%; height: auto; }
.price-chart .grid { stroke: var(--line); stroke-width: 1; }
.price-chart text { fill: var(--ash-2); font: 500 11px var(--mono); }
.price-chart .line { fill: none; stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; }
.price-chart .area { fill: rgba(217, 177, 92, .08); }
.price-chart .dot { fill: var(--spark); }
.contents-list { border: 1px solid var(--line); background: var(--ink-2); }
.contents-list .row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); border-left: 2px solid var(--rc, var(--line-2)); }
.contents-list .row:last-child { border-bottom: 0; }
.contents-list .thumb { width: 44px; height: 44px; background: var(--ink); border: 1px solid var(--line); }
.contents-list .thumb svg { width: 60%; height: auto; fill: none; stroke: var(--rc, var(--ash)); stroke-width: 1.5; stroke-linejoin: round; }
.contents-list .nm { font-weight: 600; overflow-wrap: anywhere; }
.contents-list .meta { font-size: 13px; color: var(--ash-2); }
.contents-list .ch { font: 600 13px/1 var(--mono); color: var(--ash); }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--ash); text-decoration: none; font: 600 14px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; background: none; border: 0; padding: 0; }
.back-link:hover { color: var(--bone); }

@media (max-width: 1100px) { .store-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crate-detail { grid-template-columns: 1fr; }
  .crate-hero .art { max-height: 340px; aspect-ratio: auto; height: 300px; }
}
@media (max-width: 560px) {
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .store-card .nm { padding: 0 10px; font-size: 14px; }
  .store-card .foot { padding: 8px 10px 10px; }
  .store-card .foot .cr { font-size: 19px; }
  .crown-pill { padding: 6px 10px 5px; font-size: 15px; }
}
@media (max-width: 340px) { .store-grid { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  .crown-balance { flex: 1 1 100%; }
  .eco-earn { grid-template-columns: 1fr; }
  .eco-earn > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .eco-earn > div:last-child { border-bottom: 0; }
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .item-card .nm { font-size: 16px; }
  .bp-wrap { grid-template-columns: 64px minmax(0, 1fr); }
  .bp-labels > div { padding: 0 8px; font-size: 11px; letter-spacing: .08em; }
  .bp-track { grid-auto-columns: 124px; }
}
@media (prefers-reduced-motion: reduce) {
  .kotk-crate.shake, .kotk-hit, .kotk-hit .burst, .kotk-hit .burst::after, .item-card.just-got { animation: none; transition: none; }
  .bp-track { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .roadmap, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .req, .status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .req > div:nth-child(2), .status > div:nth-child(2) { border-right: 0; }
  .req > div:nth-child(-n+2), .status > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.top nav { min-width: 0; }
.top nav a { white-space: nowrap; }
.who { min-width: 0; }
.who span.name { overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
@media (max-width: 860px) {
  /* nav moves to its own scrollable row instead of disappearing */
  .top .wrap { height: auto; gap: 8px 16px; flex-wrap: wrap; padding-block: 12px 0; }
  .top nav { order: 3; flex: 1 1 100%; gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .top nav a { padding: 6px 0 10px; }
  .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .hero .logo { max-width: 280px; order: -1; }
  .section-head, .two { grid-template-columns: 1fr; gap: 16px; }
  .two { gap: 56px; }
  .pillars { grid-template-columns: 1fr; }
  footer.foot .cols { grid-template-columns: 1fr 1fr; }
  footer.foot .cols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .roadmap, .steps { grid-template-columns: 1fr; }
  .status > div, .req > div { padding: 16px; }
  .status .v { font-size: 20px; }
  .hero .ctas .btn { flex: 1 1 100%; }
  .top .brand span { display: none; }
  .who span.name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}

/* promo code redeem (store) */
.redeem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 22px; padding: 14px 16px; background: var(--ink-2); border: 1px solid var(--line); }
.redeem b { font: 700 15px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.redeem input { flex: 1 1 180px; max-width: 260px; min-width: 0; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line-2); color: var(--bone); font: 600 14px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; }
.redeem input:focus { border-color: var(--red-hi); outline: none; }
.redeem .ok { color: var(--ok); }
.redeem .bad { color: var(--red-hi); }

/* compact item rows (staff items dialog, trade page) */
.inv-list { display: grid; gap: 4px; }
.inv-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: var(--ink-3); border-left: 3px solid var(--rc, var(--line-2)); }
.inv-row .thumb { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; background: var(--ink); }
.inv-row .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.inv-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* inventory card: copies held in an open trade */
.item-card { position: relative; }
.item-card .intrade { position: absolute; left: 8px; top: 8px; padding: 3px 7px; background: var(--ink); border: 1px solid var(--warn); color: var(--warn); font: 600 11px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }

/* =====================================================================
   SHARED PRIMITIVES
   Added after the page styles above, on purpose. Everything here is either a
   new opt-in class or a strict superset of an old one: the only selector
   restated from earlier in this file is `.empty`, which keeps its dashed box
   and gains room plus optional inner parts. A page that opts into nothing
   looks the way it did.
   ===================================================================== */

/* Screen-reader-only text. leaderboard.html inlined this on its <caption>;
   it belongs in one place. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* Figures line up in a column when they share a width. */
.tnum, .num, .lb .num, .status .v, .crown-balance .v { font-variant-numeric: tabular-nums; }

/* ---------- industrial trim ----------
   Two cheap, pure-CSS motifs that read as 2017 KotK rather than dark-mode SaaS:
   a hazard stripe as a divider, and a clipped corner on a slab. Both are
   opt-in classes; neither costs a byte of imagery. */
.stripe {
  height: 8px; border: 0; margin: 0;
  background: repeating-linear-gradient(135deg, var(--amber) 0 9px, transparent 9px 18px);
  opacity: .42;
}
.stripe.red { background: repeating-linear-gradient(135deg, var(--red) 0 9px, transparent 9px 18px); }

/* ---------- rarity spectrum rule ----------
   The KotK rarity colours are genuine game data (the ItemRarity table, see the economy
   section below) and until now they only ever appeared inside item tiles. As a 2px rule
   they become part of the site's identity - a thin band of the game's own spectrum -
   without being decoration someone has to decode. Marked aria-hidden where it is used. */
.rarity-rule {
  height: 2px; border: 0; margin: 0; display: block; width: 100%;
  background: linear-gradient(90deg,
    var(--r-standard) 0 16.6%, var(--r-common) 16.6% 33.3%, var(--r-uncommon) 33.3% 50%,
    var(--r-rare) 50% 66.6%, var(--r-ultra-rare) 66.6% 83.3%, var(--r-legendary) 83.3% 100%);
  opacity: .8;
}

/* ---------- plate: the angular panel treatment ----------
   H1Z1's UI panels are cut metal plates - sharp corners, one of them chamfered, a thin
   bright edge on top and a rivet in the corner. `.plate` applies that to any slab. It is
   purely additive: an element keeps whatever border and background it already had. */
.plate { position: relative; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.plate::after {                       /* rivet */
  content: ""; position: absolute; right: 9px; bottom: 9px; width: 4px; height: 4px;
  background: var(--line-2); box-shadow: 0 1px 0 rgba(0, 0, 0, .6); pointer-events: none;
}
.plate-top { box-shadow: inset 0 2px 0 var(--amber); }
.plate-top.red { box-shadow: inset 0 2px 0 var(--red); }
.notch { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
/* Corner tick: a short red rule in the top-left of a slab, like a stencil mark. */
.ticked { position: relative; }
.ticked::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 26px; height: 2px;
  background: var(--red); pointer-events: none;
}

/* A live dot that actually looks live. Opt-in so the static dots stay static. */
.dot.live { animation: zr-pulse 2.4s ease-in-out infinite; }
@keyframes zr-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(124, 196, 127, .14); }
  50% { box-shadow: 0 0 0 9px rgba(124, 196, 127, 0); }
}

/* ---------- loading states ----------
   Every data page shipped "Loading…" as grey body text, which reads as a page
   that failed rather than a page that is working. These skeletons hold the
   shape of what is coming, so the layout does not jump when it lands. */
.sk { display: block; position: relative; overflow: hidden; background: var(--ink-3); border-radius: 2px; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(236, 231, 222, .07), transparent);
  animation: zr-shimmer 1.3s linear infinite;
}
@keyframes zr-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.sk-line { height: 13px; margin-bottom: 10px; }
.sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; }
.sk-title { height: 42px; width: min(340px, 70%); margin: 10px 0 26px; }
.sk-rows { border: 1px solid var(--line); background: var(--ink-2); }
.sk-rows > div { padding: 15px 16px; border-bottom: 1px solid var(--line); }
.sk-rows > div:last-child { border-bottom: 0; }
.sk-rows .sk-line:last-child, .sk-tile .sk-line:last-child { margin-bottom: 0; }
.sk-rows .row { display: flex; align-items: center; gap: 16px; }
.sk-rows .row .sk-line { margin: 0; }
.sk-rows .row .sk-line.rank { width: 28px; flex: 0 0 28px; }
.sk-rows .row .sk-line.grow { flex: 1 1 auto; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.sk-tile { border: 1px solid var(--line); background: var(--ink-2); padding: 12px; }
.sk-tile .box { aspect-ratio: 1 / 1; margin-bottom: 12px; }
/* The loading block announces itself once, for anyone not watching pixels. */
.loading { color: var(--ash-2); font: 600 12px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- empty states ----------
   An empty board, an empty inventory and an empty drop feed are the normal
   state of a server in closed testing. They get a deliberate shape so none of
   them reads as a bug. The existing one-argument `.empty` still works. */
.empty { border: 1px dashed var(--line-2); padding: 32px 28px; text-align: center; color: var(--ash); background: rgba(236, 231, 222, .012); }
.empty h3 { font-size: 22px; color: var(--bone); margin-bottom: 8px; }
.empty > p { margin: 0 auto; max-width: 42em; }
.empty > p + p { margin-top: 10px; }
.empty .btn { margin-top: 18px; }
.empty .mark {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 16px;
  border: 1px solid var(--line-2); color: var(--amber); background: var(--ink-2);
  font: 700 22px/1 var(--head);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.empty.bad { border-color: color-mix(in srgb, var(--red) 55%, var(--line-2)); }
.empty.bad .mark { border-color: var(--red); color: var(--red-hi); }

/* ---------- trust band (landing page) ----------
   The site has to answer "is this safe?" before it answers anything else: the
   project is a fan server that asks people to run an unsigned .exe, and that
   question gets asked in bad faith by people who would rather it were not
   answered at all. So it gets its own band, above the FAQ, in plain language. */
/* The safety band wears the identity like everything else, but deliberately WEARS IT
   LIGHTEST. This band exists to answer people who were told the launcher is malware, so
   legibility and plainness beat flourish here: no clipped corners, no stencil, no
   stripes, generous line length, ordinary sentence-case sub-heads at a readable size.
   The only accent is the amber index rule, which ties it to the rest of the page.
   Looking cool must not make this section look like a pitch. */
.trust-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.trust-band > div { background: var(--ink-2); padding: 26px 24px 28px; }
.trust-band h3 { font-size: 21px; margin-bottom: 10px; letter-spacing: .02em; }
.trust-band p { color: var(--ash); margin: 0; font-size: 14.5px; line-height: 1.7; }
.trust-band p + p { margin-top: 10px; }
.trust-band .ix { display: block; width: 26px; height: 2px; background: var(--amber); margin-bottom: 18px; }
.trust-band a { color: var(--amber-hi); }
.trust-band code { font: 600 13px/1.5 var(--mono); color: var(--bone); overflow-wrap: anywhere; }

/* ---------- drop feed (landing page) ----------
   Moved here from an inline <style> in index.html, and restyled into the site's own
   idiom on the way: square corners, a hairline in --line and the --ink-2 slab, instead
   of the rounded translucent-white rows it used to have. The rarity bar keeps the
   client's own palette, so a drop reads at a glance the way it does in game. */
.droplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.droplist li {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border: 1px solid var(--line); background: var(--ink-2);
}
.droplist .rarity { width: 3px; align-self: stretch; background: var(--ash-2); flex-shrink: 0; }
.droplist .what { flex: 1; min-width: 0; }
.droplist .what b { font-weight: 600; overflow-wrap: anywhere; }
.droplist .what small { display: block; color: var(--ash-2); font-size: 13px; margin-top: 2px; }
.droplist .when { color: var(--ash-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The game's own rarity colours. */
.droplist .r1 { background: #b0c3d9; } .droplist .r2 { background: #5e98d9; }
.droplist .r3 { background: #4b69ff; } .droplist .r4 { background: #8847ff; }
.droplist .r5 { background: #d32ce6; } .droplist .r6 { background: #eb4b4b; }
.droplist .r7 { background: #ffd700; }

/* ---------- closing download band ---------- */
.cta-band {
  position: relative; border: 1px solid var(--line); background:
    radial-gradient(620px 300px at 20% 0%, var(--red-glow), transparent 70%), var(--ink-2);
  padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  box-shadow: inset 0 2px 0 var(--red);
}
.cta-band h2 { font-size: clamp(30px, 4.4vw, 46px); }
.cta-band p { color: var(--ash); margin: 12px 0 0; max-width: 40em; }
.cta-band .acts { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .trust-band { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cta-band .acts .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sk::after, .dot.live { animation: none; }
}

/* Drop bell in the top nav. The count sits BESIDE the icon, not floating on its corner: an
   absolutely positioned badge was clipped, because .top nav scrolls horizontally on narrow
   screens and anything hanging outside a nav item is cut off. */
.top nav a.bell { display: inline-flex; align-items: center; gap: 6px; }
.top nav a.bell svg { width: 17px; height: 17px; display: block; }
.bell-count {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--red, #e4322b); color: #fff;
  font: 600 10px/17px Barlow, system-ui, sans-serif; text-align: center;
}