/* Vanilla Rust store: dark, warm-grey "rusted steel" base with the store's red accent. */
:root {
  --bg: #121212;
  --surface: #1b1a19;
  --surface-2: #24221f;
  --line: #34302b;
  --text: #ece7e1;
  --muted: #a59d93;
  --accent: #ff424d;
  --ok: #52c47a;
  --warn: #f0a33a;
  --bad: #ff5e5e;
  --discord: #5865f2;
  --font-display: "Saira Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --radius: 6px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font-body);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; letter-spacing: 0.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; text-transform: uppercase; }
h2 { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
main.wrap { padding-block: 24px 64px; display: flex; flex-direction: column; gap: 28px; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.ok { color: var(--ok); font-weight: 600; }
.warn { color: var(--warn); font-weight: 600; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; }
.wrap-text { overflow-wrap: anywhere; }

/* Top bar */
.topbar { background: #0c0c0c; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; }
.brand img { border-radius: 4px; }
.nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 500; }
.nav a:hover { color: var(--text); }
.nav form { margin: 0; }
.me { display: inline-flex; align-items: center; gap: 8px; color: var(--text) !important; }
.me img { border-radius: 50%; }
.testbar { background: #3a2a10; color: #ffd28a; text-align: center; font-size: 0.875rem; padding: 6px 16px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem var(--font-body);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 18px; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--muted); }
.btn-discord { background: var(--discord); border-color: var(--discord); color: #fff !important; }
.btn-buy { background: var(--accent); border-color: var(--accent); color: #fff; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 28px; width: 100%; }
.btn-buy:hover { filter: brightness(1.08); }
button.link { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; }
button.link:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hero */
.hero {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 260px; display: flex; align-items: flex-end;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface) 40%, rgba(27,26,25,0.35) 70%, rgba(27,26,25,0) 100%), var(--cover, none) right center / auto 100% no-repeat, var(--surface);
  border: 1px solid var(--line);
}
.hero-text { padding: 32px; max-width: 34rem; display: flex; flex-direction: column; gap: 10px; }
.hero-text p:last-child { color: var(--muted); }

.section-title { border-left: 4px solid var(--accent); padding-left: 12px; }

/* Category cards */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.cat-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); text-decoration: none; aspect-ratio: 21 / 10; max-width: 100%; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.cat-card:hover img { transform: scale(1.03); }
.cat-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface-2), #3a1618); }
.cat-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; background: linear-gradient(transparent, rgba(0,0,0,0.85)); }

.cat-banner { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.cat-banner img { width: 100%; max-height: 260px; object-fit: cover; opacity: 0.55; }
.cat-banner h1 { position: absolute; left: 24px; bottom: 18px; right: 24px; }
.cat-banner:not(:has(img)) h1 { position: static; padding: 24px; }

.crumbs { font-size: 0.9rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.group { display: flex; flex-direction: column; gap: 16px; }

/* Product cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card-img { aspect-ratio: 1 / 1; background: #0e0e0e; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.card-body .muted { font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.price { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.price-row.big { justify-content: flex-start; gap: 14px; margin-top: 0; }
.price-row.big .price { font-size: 2.2rem; }
.tag { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.tag-sub { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* Product page */
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.product-img { background: #0e0e0e; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.product-img img { width: 100%; }
.product-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.buy { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.buy form { margin: 0; }
.prose { color: var(--text); border-top: 1px solid var(--line); padding-top: 16px; overflow-wrap: anywhere; }
.prose * { max-width: 100%; }
.prose span, .prose b, .prose p { font-size: inherit !important; }
.prose p + p, .prose ul, .prose ol { margin-top: 0.6em; }

/* Panels and tables */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.flash { background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: 12px 16px; }
.flash-error { border-left-color: var(--bad); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions form { margin: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 0.925rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.s-paid, .s-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.s-simulated, .s-pending { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.s-failed, .s-refunded, .s-disputed { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }

/* Home page server picker: one coloured half per server, "OR" between them.
   The hovered half grows; fx.js paints embers (red), sparks (blue) and lightning on a canvas in each card. */
.pick { display: flex; flex-direction: column; gap: 26px; }
.pick-head { display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center; }
.pick-head .muted { max-width: 34rem; }
.pick-grid { position: relative; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.pick-two { display: flex; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 90px -40px rgba(0,0,0,.95); }
.pick-card {
  --pick: var(--accent); --mx: 0; --my: 0;
  position: relative; display: flex; align-items: flex-end; flex: 1 1 0; min-width: 0;
  min-height: clamp(320px, 58vh, 520px);
  text-decoration: none; color: #fff; overflow: hidden; isolation: isolate;
  background: #0b0b0b; border-top: 4px solid var(--pick);
  transition: flex-grow .6s cubic-bezier(.2,.8,.2,1), filter .45s ease;
  animation: pick-in .9s cubic-bezier(.2,.8,.2,1) both;
}
.pick-card:nth-of-type(2) { animation-name: pick-in-right; animation-delay: .08s; }
.pick-card::before {
  content: ""; position: absolute; inset: -5%; z-index: -2;
  /* Zoomed onto the top of the banner (the wolf/boar head) so the banner's own title text is cropped off. */
  background: var(--img, none) center top / auto 170% no-repeat;
  translate: calc(var(--mx) * -22px) calc(var(--my) * -14px);
  filter: saturate(1.05) brightness(.78);
  transition: translate .3s ease-out, filter .5s ease;
  animation: art-breathe 12s ease-in-out infinite alternate;
}
.pick-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Plain shading first for older phones that don't support color-mix(); newer browsers use the tinted version. */
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.75) 62%, rgba(0,0,0,.94) 100%);
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,.75) 62%, rgba(0,0,0,.94) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--pick) 38%, transparent), color-mix(in srgb, var(--pick) 12%, transparent));
  transition: background-color .08s;
}
.pick-card:hover::before, .pick-card:focus-visible::before { filter: saturate(1.25) brightness(.95); }
.pick-two:hover .pick-card { flex-grow: .72; filter: saturate(.5) brightness(.65); }
.pick-two .pick-card:hover, .pick-two .pick-card:focus-visible { flex-grow: 1.4; filter: none; }
.pick-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 28px; width: 100%; }
.pick-name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height: .92; letter-spacing: .01em; white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 14px var(--pick), 0 0 40px color-mix(in srgb, var(--pick) 55%, transparent);
}
.pick-tag { color: #ece7e1; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.pick-cta {
  align-self: flex-start; margin-top: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em;
  background: var(--pick); color: #0b0b0b; padding: 10px 20px; border-radius: var(--radius);
  transition: transform .2s ease;
  animation: cta-pulse 2.4s ease-out infinite;
}
.pick-card:hover .pick-cta { transform: translateX(6px); }
.pick-badge { align-self: flex-start; margin-bottom: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.6); border: 1px solid var(--pick); color: #fff; padding: 4px 10px; border-radius: 999px; }
/* "OR": a zero-width item between the halves, so it follows the edge as they grow and shrink. */
.pick-or { flex: 0 0 0; width: 0; position: relative; z-index: 3; }
.pick-or b {
  position: absolute; top: 50%; left: 0; translate: -50% -50%; isolation: isolate;
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: .04em; color: #fff;
  animation: or-pop .7s .55s cubic-bezier(.3,1.6,.5,1) both;
}
.pick-or b::before { content: ""; position: absolute; inset: -4px; z-index: -2; border-radius: 50%; background: conic-gradient(#ff3b47, #ff8a3d, #33b5ff, #7fd8ff, #ff3b47); filter: blur(.5px); animation: spin 3.5s linear infinite; }
.pick-or b::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1d1b19, #070707); box-shadow: 0 0 30px rgba(0,0,0,.9); }

@keyframes pick-in { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }
@keyframes pick-in-right { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@keyframes art-breathe { from { scale: 1.02; } to { scale: 1.1; } }
@keyframes or-pop { from { scale: 0; rotate: -140deg; } to { scale: 1; rotate: 0deg; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes cta-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pick) 60%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes neon-flicker {
  0%, 9%, 11%, 13.5%, 61%, 63%, 100% {
    opacity: 1;
    text-shadow: 0 0 2px #fff, 0 0 12px var(--pick), 0 0 32px var(--pick), 0 0 70px color-mix(in srgb, var(--pick) 55%, transparent);
  }
  10%, 12.5%, 62% { opacity: .78; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
}

/* The artwork: the server name drifting in huge outlined letters, a spotlight that follows the cursor,
   and the title leaning toward it. All CSS; fx.js only supplies --mx / --my (cursor position, -0.5 to 0.5). */
@property --mx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --my { syntax: '<number>'; inherits: true; initial-value: 0; }
.pick-card.is-themed, .cat-hero {
  background: #070707;
  background: radial-gradient(120% 90% at 50% 105%, color-mix(in srgb, var(--pick) 40%, #000) 0%, #060606 72%);
}
.pick-card.is-themed { transition: flex-grow .6s cubic-bezier(.2,.8,.2,1), filter .45s ease, --mx .4s ease-out, --my .4s ease-out; }
.pick-card.is-themed::before {
  inset: 0; translate: none; filter: none; animation: none; transition: none;
  background:
    radial-gradient(55% 60% at calc(50% + var(--mx, 0) * 70%) calc(45% + var(--my, 0) * 70%), color-mix(in srgb, var(--pick) 28%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--pick) 40%, #000) 0%, #060606 72%);
}
.pick-card.is-themed::after {
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.82) 100%);
}
.marquee {
  position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: .05em; rotate: -8deg;
  translate: calc(var(--mx, 0) * -36px) calc(var(--my, 0) * -20px);
}
.marquee-row {
  display: flex; white-space: nowrap; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(5rem, 15vw, 14rem); line-height: .9; letter-spacing: .02em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.14);
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pick) 55%, transparent);
}
.marquee-row span { padding-right: .3em; animation: drift 42s linear infinite; }
.marquee-row.reverse span { animation-direction: reverse; animation-duration: 54s; }
.marquee-row:nth-child(3) span { animation-duration: 66s; }
.marquee-row.fill { -webkit-text-stroke: 0; color: rgba(255,255,255,.05); color: color-mix(in srgb, var(--pick) 11%, transparent); }
.pick-card:hover .marquee-row { -webkit-text-stroke-color: color-mix(in srgb, var(--pick) 80%, transparent); }
.pick-card:hover .marquee-row.fill { color: color-mix(in srgb, var(--pick) 16%, transparent); }
@keyframes drift { to { translate: -100% 0; } }

/* Server badge */
.emblem {
  width: clamp(76px, 8vw, 112px); height: auto; overflow: visible; margin-bottom: 10px;
  filter: drop-shadow(0 0 8px var(--pick)) drop-shadow(0 0 26px var(--pick));
}
.emblem .hex-outer, .emblem .hex-inner { fill: none; stroke: var(--pick); stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s .45s cubic-bezier(.65,0,.25,1) forwards; }
.emblem .hex-outer { stroke-width: 2.6; fill: rgba(0,0,0,.35); }
.emblem .hex-inner { stroke-width: 1.2; opacity: .55; animation-delay: .7s; }
.emblem .streak { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .06 .94; opacity: 0; animation: orbit 3s linear 1.8s infinite; }
.emblem .mark { fill: var(--pick); opacity: 0; transform-origin: 50% 50%; transform-box: view-box; animation: mark-in .65s 1.25s cubic-bezier(.3,1.7,.5,1) forwards, mark-glow 2.4s 2s ease-in-out infinite; }
.emblem .mark-core { fill: #fff; opacity: 0; animation: mark-in .65s 1.4s cubic-bezier(.3,1.7,.5,1) forwards; transform-origin: 50% 50%; transform-box: view-box; }
.emblem .mark-plus { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: 0; animation: mark-in .65s 1.4s cubic-bezier(.3,1.7,.5,1) forwards; transform-origin: 50% 50%; transform-box: view-box; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes orbit { from { stroke-dashoffset: 0; opacity: 1; } to { stroke-dashoffset: -1; opacity: 1; } }
@keyframes mark-in { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes mark-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6) saturate(1.2); } }

/* Picker text arrives in order: badge, title wipe, tagline, button. */
/* Themed title: wipes in, then a metallic sheen sweeps across every few seconds; it leans toward the cursor. */
.pick-card.is-themed .pick-name {
  color: #fff; text-shadow: none;
  background: linear-gradient(100deg, #fff 0 38%, color-mix(in srgb, var(--pick) 55%, #fff) 50%, #fff 62% 100%);
  background-size: 260% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pick) 70%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--pick) 40%, transparent));
  translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 10px);
  animation: title-wipe .8s 1.05s cubic-bezier(.65,0,.25,1) both, sheen 7s 2.2s ease-in-out infinite;
}
.pick-card.is-themed:nth-of-type(2) .pick-name { animation-delay: 1.15s, 4s; }
@keyframes sheen { 0%, 72% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.pick-card.is-themed .pick-tag { animation: rise .6s 1.5s ease-out both; }
.pick-card.is-themed .pick-cta { animation: rise .6s 1.65s ease-out both, cta-pulse 2.4s 2.4s ease-out infinite; }
/* Generous negative insets so the neon glow is never cut off once the wipe has finished. */
@keyframes title-wipe { from { clip-path: inset(-100% 100% -100% -100%); } to { clip-path: inset(-100% -100% -100% -100%); } }
/* Full-screen picker: the halves fill the whole window edge to edge, the menu bar floats over the top,
   the headline sits over both halves and a glowing seam runs down the middle. */
main.full { padding: 0; display: block; }
.pick-full { position: relative; height: 100vh; height: 100svh; min-height: 600px; gap: 0; }
.pick-full .pick-head {
  position: absolute; z-index: 4; top: calc(84px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0;
  width: min(calc(100% - 32px), 820px); pointer-events: none;
}
.pick-full .pick-head h1 { font-size: clamp(2.1rem, 4.8vw, 4rem); text-shadow: 0 4px 30px rgba(0,0,0,.85); }
.pick-full .pick-head .muted { color: #d9d3cc; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.pick-full .pick-grid { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.pick-full .pick-card { min-height: 0; border-top: 0; }
.pick-full .pick-card::after { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.82) 100%); }
.pick-full .pick-body {
  padding-inline: max(clamp(24px, 5vw, 80px), env(safe-area-inset-left, 0px));
  padding-block: 24px clamp(48px, 9vh, 110px);
}
.pick-full .pick-name { font-size: clamp(3rem, 7.5vw, 7.5rem); }
.pick-full .emblem { width: clamp(84px, 8vw, 140px); }
.pick-full .pick-card:last-of-type .pick-body { align-items: flex-end; text-align: right; }
.pick-full .pick-card:last-of-type .pick-cta, .pick-full .pick-card:last-of-type .pick-badge { align-self: flex-end; }
.pick-full .pick-or::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; translate: -50% 0;
  background: linear-gradient(transparent, rgba(255,255,255,.9) 25%, rgba(255,255,255,.9) 75%, transparent);
  box-shadow: 0 0 14px #fff, 0 0 40px rgba(255,255,255,.55); opacity: .45;
  animation: seam 3s ease-in-out infinite alternate;
}
.pick-full .pick-or b { width: 88px; height: 88px; font-size: 1.6rem; }
@keyframes seam { from { opacity: .25; } to { opacity: .65; } }
body.page-home .topbar { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,0)); border-bottom: 0; }
body.page-home .testbar {
  position: fixed; z-index: 20; left: 50%; translate: -50% 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100% - 32px); border-radius: 999px; padding: 6px 14px; border: 1px solid rgba(255,210,138,.35);
}
body.page-home .footer { margin-top: 0; }

/* Under the picker: "Shop by category" tiles, each in its server's colour. */
html { scroll-behavior: smooth; }
.pick-more {
  position: absolute; z-index: 4; left: 50%; bottom: 22px; translate: -50% 0;
  color: #fff; text-decoration: none; font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 9px 16px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: bob 2.4s ease-in-out infinite;
}
.pick-more:hover { border-color: #fff; }
@keyframes bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 5px; } }
body.page-home .testbar { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
.tiles-section { padding-block: 56px 28px; display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 20px; }
.tiles-head { display: flex; flex-direction: column; gap: 6px; }
.tiles-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.tile {
  --pick: var(--accent); position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 22px 22px 20px;
  color: var(--text); text-decoration: none; overflow: hidden; border-radius: var(--radius);
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--pick) 24%, transparent), transparent 60%), var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--pick);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-4px); border-color: var(--pick); box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--pick) 70%, transparent); }
.tile-ico { position: absolute; z-index: -1; right: -10px; top: -10px; width: 130px; height: 130px; color: var(--pick); opacity: .14; transform: rotate(-10deg); transition: transform .4s ease, opacity .4s ease; }
.tile:hover .tile-ico { transform: rotate(-4deg) scale(1.08); opacity: .24; }
.tile-ico .ico { width: 100%; height: 100%; stroke-width: 1.2; }
.tile-server { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pick); }
.tile-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: .95; text-wrap: balance; }
.tile-text { color: var(--muted); max-width: 32ch; }
.tile-meta { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: .9rem; display: flex; gap: 8px; align-items: center; }
.tile-meta .arrow { color: var(--pick); transition: translate .2s ease; }
.tile:hover .tile-meta .arrow { translate: 4px 0; }
.tile.is-empty { opacity: .62; }
.tile-soon { margin-top: auto; align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 10px; }

/* Server pages: that server's live art flows behind the whole page, dimmed so content stays readable. */
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; isolation: isolate;
  background: #060606;
  background: radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--pick) 26%, #000) 0%, #060606 70%);
  transition: --mx .6s ease-out, --my .6s ease-out;
}
.ambient::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(45% 50% at calc(50% + var(--mx, 0) * 80%) calc(40% + var(--my, 0) * 80%), color-mix(in srgb, var(--pick) 14%, transparent), transparent 70%);
}
.ambient .marquee { inset: -10%; rotate: -12deg; gap: .15em; z-index: 0; translate: calc(var(--mx, 0) * -24px) calc(var(--my, 0) * -14px); }
.ambient .marquee-row { font-size: clamp(6rem, 17vw, 16rem); -webkit-text-stroke-color: rgba(255,255,255,.06); -webkit-text-stroke-color: color-mix(in srgb, var(--pick) 24%, transparent); }
.ambient .marquee-row span { animation-duration: 96s; }
.ambient .marquee-row.reverse span { animation-duration: 120s; }
.ambient .marquee-row:nth-child(3) span { animation-duration: 140s; }
.ambient .marquee-row.fill { color: rgba(255,255,255,.025); color: color-mix(in srgb, var(--pick) 5%, transparent); }
.ambient::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, rgba(6,6,6,.35), rgba(6,6,6,.85) 80%), linear-gradient(rgba(6,6,6,.3), rgba(6,6,6,.65));
}
body.has-ambient { background: #060606; }
body.has-ambient .topbar { background: rgba(8,8,8,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.has-ambient .cat-hero { background: rgba(6,6,6,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.has-ambient .cat-hero::after { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 70%, transparent 100%); }
body.has-ambient .footer { border-top-color: rgba(255,255,255,.08); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Category page header with the same live art */
.cat-hero {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); border-top: 3px solid var(--pick);
  min-height: clamp(190px, 26vh, 260px); display: flex; align-items: center; gap: 24px;
  padding-block: 28px; padding-inline: clamp(20px, 4vw, 40px);
}
.cat-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%); }
.cat-hero .emblem { position: relative; z-index: 1; margin: 0; flex: none; width: clamp(70px, 9vw, 104px); }
.cat-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cat-hero-text h1 { text-shadow: 0 0 2px #fff, 0 0 18px var(--pick), 0 0 44px var(--pick); animation: title-wipe .8s .9s cubic-bezier(.65,0,.25,1) both; }
.cat-hero-text .eyebrow { color: var(--pick); }
.cat-hero-tag { color: #ece7e1; text-shadow: 0 1px 8px rgba(0,0,0,.8); }

/* Code-drawn product art: tier colour, type icon, big title, Monthly/Lifetime/Free. */
.ico { width: 20px; height: 20px; flex: none; }
.art {
  --tier: var(--accent);
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate; max-width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; color: #fff;
  background:
    radial-gradient(120% 80% at 85% 0%, color-mix(in srgb, var(--tier) 55%, transparent), transparent 60%),
    radial-gradient(90% 70% at 5% 100%, color-mix(in srgb, var(--tier) 28%, transparent), transparent 60%),
    linear-gradient(160deg, #1d1b18, #0a0a0a);
}
.art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); }
.art::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 45%, transparent), inset 0 -60px 60px -40px rgba(0,0,0,.8); }
.art-bg { position: absolute; right: -10%; top: -6%; width: 70%; opacity: .14; color: var(--tier); transform: rotate(-12deg); transition: transform .5s ease, opacity .5s ease; }
.art-bg .ico { width: 100%; height: auto; stroke-width: 1.2; }
.card:hover .art-bg { transform: rotate(-6deg) scale(1.08); opacity: .22; }
.art-period { position: absolute; top: 12px; left: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.55); border: 1px solid color-mix(in srgb, var(--tier) 60%, transparent); color: var(--tier); }
.art-badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #0b0b0b; margin-bottom: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tier) 85%, #fff), color-mix(in srgb, var(--tier) 60%, #000)); box-shadow: 0 8px 24px -8px var(--tier); }
.art-badge .ico { width: 26px; height: 26px; stroke-width: 2.2; }
.art-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: .95; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0,0,0,.7); text-wrap: balance; }
.art-kind { font-size: .76rem; color: #d8d2cb; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }
/* The product's own picture framed in the card: tight crop, slow zoom on hover, dark edges for the title. */
.art.has-photo { justify-content: space-between; }
.art.has-photo::before { display: none; }
.art-photo {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transform: scale(1.14); transform-origin: 50% 45%; filter: saturate(1.08) contrast(1.05);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.card:hover .art-photo { transform: scale(1.22); }
.art.has-photo::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 60%, transparent), inset 0 -120px 90px -60px rgba(0,0,0,.96), inset 0 70px 60px -50px rgba(0,0,0,.75); }
.art.has-photo .art-period { position: static; }
.art.has-photo .art-kind { display: none; }
.art.has-photo .art-title { text-shadow: 0 2px 16px #000, 0 0 3px #000; }
.art-big.has-photo .art-photo { transform: scale(1.04); object-position: 50% 40%; }
.card-price .per { color: var(--tier, var(--muted)); }

/* Product page: the art tilts in 3D toward the cursor with a glare, like a holographic card (fx.js). */
.holo { perspective: 1000px; }
.holo .art { transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .25s ease-out; will-change: transform; border-radius: var(--radius); }
.holo:hover .art { box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 60px -20px var(--tier); }
.glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity .3s ease;
  background: radial-gradient(60% 55% at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.28), rgba(255,255,255,.06) 40%, transparent 65%); }
.holo:hover .glare { opacity: 1; }

/* Cart: top bar link with a count, Buy now + Add to cart pairs, the cart page summary */
.cart-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text) !important; font-weight: 500; }
.cart-link .ico { width: 20px; height: 20px; }
.cart-count { background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; line-height: 1.4; }
.buy-group { display: flex; gap: 8px; align-items: stretch; }
.buy-group form { margin: 0; display: flex; }
.btn-add { padding: 9px 10px; display: inline-flex; gap: 6px; align-items: center; background: var(--surface-2); border-color: var(--line); color: var(--text); white-space: nowrap; }
.btn-add .ico { width: 18px; height: 18px; }
.btn-add:hover { border-color: var(--accent); color: var(--accent); }
.btn-add.is-in { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.card-foot .btn-add span { display: none; }
.buy .buy-group { flex-wrap: wrap; }
.buy .buy-group > form:first-child, .buy .buy-group > a.btn-buy { flex: 1 1 200px; }
.buy .buy-group > form:first-child .btn-buy { height: 100%; }
.buy .btn-add { padding: 12px 18px; font-size: 1rem; font-weight: 600; }
.buy .btn-add span { display: inline; }
.cart-item a { text-decoration: none; font-weight: 600; }
.cart-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.cart-total { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1.1; }
.cart-actions { flex: 1 1 260px; max-width: 360px; }
.cart-actions form { margin: 0; }
.bundle ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* Kit picture: the game's inventory (Wear / Main / Belt) over the server banner */
.art.has-inv { justify-content: space-between; padding: 10px 9px; aspect-ratio: 1 / 1.3; }
.art.has-inv .art-period { position: static; }
.inv-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15); }
.inv-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,7,12,.6), rgba(4,7,12,.35) 45%, rgba(4,7,12,.88)); }
.inv-wm { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); text-align: center; z-index: 0; pointer-events: none; opacity: .55; }
.inv-wm b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--tier) 85%, #fff); text-shadow: 0 0 16px color-mix(in srgb, var(--tier) 60%, transparent); }
.inv-wm small { display: block; margin-top: 2px; font-size: .5rem; letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--tier) 85%, #fff); text-shadow: 0 0 8px color-mix(in srgb, var(--tier) 70%, transparent); }
.inv-board { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin: 2px 0; }
.art .inv-row { display: flex; flex-direction: column; gap: 2px; }
.art .inv-label { font-style: normal; font-size: .5rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; text-align: center; color: color-mix(in srgb, var(--tier) 80%, #fff); text-shadow: 0 0 8px color-mix(in srgb, var(--tier) 70%, transparent); }
.inv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.inv-slot { position: relative; aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; background: rgba(12,16,24,.66); border: 1px solid color-mix(in srgb, var(--tier) 55%, rgba(255,255,255,.12)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); }
.inv-slot.is-filled { background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.4)), rgba(12,16,24,.9); border-color: color-mix(in srgb, var(--tier) 90%, #fff); box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 0 10px color-mix(in srgb, var(--tier) 30%, transparent); }
.inv-slot img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.85)); }
.inv-slot .ico { width: 58%; height: 58%; color: var(--cat, var(--tier)); }
.inv-slot b { position: absolute; right: 2px; bottom: 1px; font-size: .55rem; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.inv-more { font-size: .64rem; font-weight: 800; color: var(--tier); }
.art.has-inv .art-title { font-size: clamp(1.1rem, 1.6vw, 1.45rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 2; }
.art.has-inv .art-kind { display: none; }
.art-big.has-inv { aspect-ratio: 1 / 1.22; padding: 18px; }
.art-big.has-inv .inv-board { gap: 8px; margin: 6px 0 4px; }
.art-big.has-inv .inv-row { gap: 4px; }
.art .inv-label { padding: 0; }
.art-big.has-inv .inv-grid { gap: 5px; }
.art-big.has-inv .inv-slot { border-radius: 7px; }
.art-big.has-inv .inv-slot b { font-size: .8rem; right: 5px; bottom: 3px; }
.art-big.has-inv .inv-label { font-size: .7rem; }
.art-big.has-inv .inv-more { font-size: 1.1rem; }
.art-big.has-inv .inv-wm b { font-size: 3.4rem; } .art-big.has-inv .inv-wm small { font-size: .8rem; }
.art-big.has-inv .art-title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.figure-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0,0,0,.55); color: var(--text); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); }
.figure-toggle .ico { width: 16px; height: 16px; color: var(--accent); }
.figure-toggle:hover { border-color: var(--accent); }
.figure-stage:not(.is-live) { cursor: default; touch-action: auto; }
.figure-stage:not(.is-live) .figure-badge, .figure-stage:not(.is-live) .figure-hint { display: none; }
.figure-stage.is-live .figure-badge, .figure-stage.is-live .figure-hint { display: inline-flex; }

/* Live 3D kit figure (product page): the canvas sits over the flat art, which stays as the fallback */
.figure-stage.is-live, .product-img.figure-stage.is-live { position: relative; aspect-ratio: 1 / 1.12; min-height: 360px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; outline: none;
  background: radial-gradient(ellipse 70% 55% at 50% 78%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,255,255,.06), transparent 70%), linear-gradient(180deg, #0c0f15, #05060a); }
.figure-stage:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.figure-stage.is-dragging { cursor: grabbing; }
.figure-stage.is-live > .art { position: absolute; inset: 0; }
.figure-stage.is-live > .art { opacity: 0; pointer-events: none; }
.figure-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity .8s ease; }
.figure-stage.is-live .figure-canvas { opacity: 1; }
.figure-stage .ribbon { z-index: 3; }
.figure-badge { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text); background: rgba(0,0,0,.5); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; backdrop-filter: blur(6px); }
.figure-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: figure-pulse 1.6s ease-in-out infinite; }
@keyframes figure-pulse { 50% { opacity: .35; transform: scale(.7); } }
.figure-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; white-space: nowrap; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; pointer-events: none; transition: opacity .6s; }
.figure-stage.is-touched .figure-hint, .figure-stage:not(.is-live) .figure-hint, .figure-stage:not(.is-live) .figure-badge { opacity: 0; }
@media (max-width: 760px) { .figure-stage { aspect-ratio: 1 / 1.05; min-height: 320px; } }
html.no-fx .figure-badge i { animation: none; }

/* VIP queue skip pass: foil frame, floating crown, metallic VIP, perforated stub with the server name. */
.vip-pass { justify-content: space-between; gap: 8px; padding: 14px 16px 12px;
  background: radial-gradient(110% 80% at 85% 0%, color-mix(in srgb, var(--tier) 42%, transparent), transparent 55%), linear-gradient(160deg, #17140f, #070707); }
.vip-pass::before {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px),
    linear-gradient(115deg, transparent 42%, rgba(255,255,255,.1) 50%, transparent 58%);
  background-size: auto, 300% 100%; background-position: 0 0, 130% 0;
  animation: holo-sweep 7s ease-in-out infinite;
}
.vip-pass::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 75%, transparent), inset 0 0 0 5px rgba(0,0,0,.65), inset 0 0 0 6px color-mix(in srgb, var(--tier) 35%, transparent), inset 0 -40px 60px -40px rgba(0,0,0,.8); }
.vip-pass .art-period { position: static; }
.vip-pass .art-count { color: var(--tier); }
.vip-core { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin-block: auto; }
.vip-crown { width: 46px; height: 46px; color: var(--tier); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tier) 80%, transparent)); animation: crown-float 4s ease-in-out infinite; }
.vip-crown .ico { width: 100%; height: 100%; stroke-width: 1.6; }
.vip-word {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 5vw, 4.4rem); line-height: .9; letter-spacing: .04em; padding-inline: .1em;
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--tier) 75%, #fff) 42%, var(--tier) 56%, color-mix(in srgb, var(--tier) 55%, #000) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.85));
}
.vip-sub { font-size: .76rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: #ece7e1; padding-left: .34em; }
.vip-stub { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding-top: 10px; border-top: 2px dashed color-mix(in srgb, var(--tier) 45%, transparent); }
.vip-stub::before, .vip-stub::after { content: ""; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: #0a0a0a; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 55%, transparent); }
.vip-stub::before { left: -27px; }
.vip-stub::after { right: -27px; }
.vip-server { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; color: var(--tier); letter-spacing: .04em; text-shadow: 0 0 14px color-mix(in srgb, var(--tier) 60%, transparent); }
.vip-code { height: 22px; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 2px, transparent 2px 4px, rgba(255,255,255,.6) 4px 5px, transparent 5px 9px, rgba(255,255,255,.6) 9px 12px, transparent 12px 14px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.vip-note { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.art-big.vip-pass { padding: 24px 26px 18px; }
.art-big.vip-pass .vip-crown { width: 74px; height: 74px; }
.art-big.vip-pass .vip-word { font-size: clamp(4rem, 8vw, 7rem); }
.art-big.vip-pass .vip-sub { font-size: 1rem; }
.art-big.vip-pass .vip-server { font-size: clamp(2rem, 3.4vw, 3rem); }
.art-big.vip-pass .vip-code { height: 34px; }
@keyframes holo-sweep { 0%, 62% { background-position: 0 0, 130% 0; } 100% { background-position: 0 0, -60% 0; } }
@keyframes crown-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Real item icons (public/items/<shortname>.png) inside the slots */
.item-img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.85)); }
.slot-lg .slot-ico .item-img { width: 32px; height: 32px; }

/* Kit contents on the art: Rust-style slots, each tinted by item type, quantity in the corner. */
.art.has-slots { justify-content: space-between; gap: 10px; }
.art-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.art.has-slots .art-period { position: static; }
.art-count { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #cfc8c0; text-shadow: 0 1px 4px #000; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.slot {
  --cat: #ccc; position: relative; aspect-ratio: 1; display: grid; place-items: center; color: var(--cat);
  background: rgba(0,0,0,.52); border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), inset 0 -10px 14px -12px var(--cat);
}
.slot .ico { width: 52%; height: 52%; stroke-width: 1.7; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cat) 55%, transparent)); }
.slot b { position: absolute; right: 4px; bottom: 1px; font-family: var(--font-display); font-weight: 700; font-size: .78rem; color: #fff; text-shadow: 0 1px 3px #000; }
.slot-more { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text); }
.art-foot { display: flex; flex-direction: column; }
.art.has-slots .art-title { font-size: clamp(1.2rem, 1.7vw, 1.55rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art.has-slots .art-kind { display: none; }
.art-big.has-slots .slots { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.art-big.has-slots .art-title { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.art-big .art-count { font-size: .74rem; }

/* Product page: the whole kit, Wear / Main / Belt like the game */
.kit { display: flex; flex-direction: column; gap: 14px; }
.inv { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: rgba(27,26,25,.86); border: 1px solid var(--line); border-radius: var(--radius); }
.inv-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.inv-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding-top: 8px; }
.inv-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slot-lg { aspect-ratio: auto; padding: 12px 6px 9px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.slot-lg .slot-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: rgba(0,0,0,.35); }
.slot-lg .ico { width: 26px; height: 26px; }
.slot-lg b { position: absolute; top: 5px; right: 7px; bottom: auto; }
.slot-name { font-size: .72rem; color: var(--text); text-align: center; line-height: 1.2; overflow-wrap: anywhere; }

.art-big { aspect-ratio: 4 / 3; padding: 26px; }
.art-big .art-title { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.art-big .art-badge { width: 64px; height: 64px; border-radius: 16px; }
.art-big .art-badge .ico { width: 36px; height: 36px; }

/* Cards: art, text, then price and a buy button on the card itself. */
.card-link { display: block; color: inherit; text-decoration: none; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 14px; margin-top: auto; }
.card-foot form { margin: 0; }
.card-price { display: flex; flex-direction: column; line-height: 1.1; }
.card-price .per { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.btn-quick { padding: 9px 14px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; background: var(--accent); border-color: var(--accent); color: #fff; white-space: nowrap; }
.btn-quick:hover { filter: brightness(1.1); border-color: var(--accent); }
.card.is-popular { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.ribbon { position: absolute; z-index: 2; top: 12px; right: -1px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px 5px 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px; }
.ribbon-hot { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 18px -4px var(--accent); animation: cta-pulse 2.4s ease-out infinite; }
.ribbon-inline { position: static; border-radius: 999px; border-right: 1px solid var(--line); align-self: flex-start; padding: 5px 12px; }
.ribbon-inline.ribbon-hot { border-right-color: var(--accent); }

/* Trust strip, wipe countdown, monthly goal */
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.trust li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(27,26,25,.78); border: 1px solid var(--line); border-radius: var(--radius); font-size: .9rem; color: var(--muted); min-width: 0; }
.trust li strong { color: var(--text); }
.trust .ico { color: var(--accent); width: 22px; height: 22px; }
.wipe { position: relative; z-index: 1; margin-left: auto; flex: none; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; justify-items: start; padding: 12px 16px; background: rgba(0,0,0,.6); border: 1px solid color-mix(in srgb, var(--pick) 50%, transparent); border-radius: var(--radius); color: #fff; }
.wipe .ico { grid-row: 1 / span 3; color: var(--pick); width: 26px; height: 26px; }
.wipe-when { font-size: .74rem; color: #d8d2cb; }
.wipe-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wipe-time { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .03em; text-shadow: 0 0 14px var(--pick); }
.wipe-now .wipe-time { color: var(--pick); animation: cta-pulse 1.2s ease-out infinite; }

/* Spotlight on the featured or best-selling item */
.spot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 1px solid color-mix(in srgb, var(--tier) 45%, var(--line)); border-radius: var(--radius); overflow: hidden; background: rgba(14,13,12,.82); box-shadow: 0 30px 70px -40px var(--tier); }
.spot-art { display: block; min-width: 0; }
.spot-art .art { height: 100%; aspect-ratio: auto; min-height: 300px; }
.spot-info { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 3vw, 36px); justify-content: center; min-width: 0; }
.spot-info h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.spot-info h2 a { text-decoration: none; }
.spot-desc { color: var(--muted); max-width: 42ch; }
.spot-buy { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.spot-buy form, .spot-buy > a.btn-buy { margin: 0; flex: 1 1 220px; }

/* "Just bought" strip */
.ticker { position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: min(400px, calc(100% - 32px)); display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(12,12,12,.94); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); box-shadow: 0 16px 40px -16px rgba(0,0,0,.9); font-size: .9rem; color: var(--muted); cursor: pointer; opacity: 0; translate: 0 16px; transition: opacity .4s ease, translate .4s ease; }
.ticker.show { opacity: 1; translate: 0 0; }
.ticker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); flex: none; }
.ticker b { color: var(--text); font-weight: 600; }

/* Product page extras */
.product-img { position: relative; background: none; border: 0; }
.steps { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 10px; background: rgba(27,26,25,.78); border: 1px solid var(--line); border-radius: var(--radius); }
.steps li { display: flex; gap: 12px; align-items: center; font-size: .93rem; color: var(--muted); }
.steps li strong { color: var(--text); }
.steps .ico { color: var(--accent); }
.steps code { font-size: .95rem; background: rgba(255,255,255,.08); padding: 1px 7px; border-radius: 4px; color: var(--text); }
.contents summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.contents img { margin-top: 10px; border-radius: var(--radius); border: 1px solid var(--line); }
.also { display: flex; flex-direction: column; gap: 14px; }
body.has-ambient .panel, body.has-ambient .card { background: rgba(27,26,25,.86); }

/* Glitching headline: red and blue copies jump out of place every few seconds. */
.glitch { position: relative; animation: glitch-in .9s cubic-bezier(.2,.8,.2,1) both; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.glitch::before { color: #ff3b47; animation: glitch-a 5.5s steps(1) 2 1.2s; }
.glitch::after { color: #33b5ff; animation: glitch-b 5.5s steps(1) 2 1.2s; }
@keyframes glitch-in { from { opacity: 0; letter-spacing: .35em; filter: blur(8px); } to { opacity: 1; letter-spacing: .01em; filter: none; } }
@keyframes glitch-a { 0%, 85%, 100% { opacity: 0; } 86% { opacity: .9; translate: -5px -1px; clip-path: inset(8% 0 62% 0); } 88% { opacity: .9; translate: 4px 1px; clip-path: inset(42% 0 28% 0); } 90% { opacity: 0; } }
@keyframes glitch-b { 0%, 86%, 100% { opacity: 0; } 87% { opacity: .9; translate: 5px 1px; clip-path: inset(58% 0 4% 0); } 89% { opacity: .9; translate: -4px 0; clip-path: inset(18% 0 52% 0); } 91% { opacity: 0; } }

/* Atmosphere: red and blue glow behind the picker, and a fine film grain over every page. */
body.page-home {
  background:
    radial-gradient(900px 520px at 10% 35%, rgba(255,59,71,.14), transparent 65%),
    radial-gradient(900px 520px at 90% 35%, rgba(51,181,255,.14), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
body::after {
  content: ""; position: fixed; inset: -10%; z-index: 60; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain { 0% { translate: 0 0; } 25% { translate: -3% 2%; } 50% { translate: 2% -3%; } 75% { translate: -2% -1%; } 100% { translate: 0 0; } }

/* Product cards tilt toward the cursor (fx.js) with a light sheen. */
.card { position: relative; transition: border-color .2s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.card:hover { box-shadow: 0 22px 50px -20px color-mix(in srgb, var(--accent) 60%, transparent); }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 0%), rgba(255,255,255,.16), transparent 45%); }
.card:hover::after { opacity: 1; }
.btn-buy { position: relative; overflow: hidden; box-shadow: 0 0 28px -8px var(--accent); }
.btn-buy::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: shine 3.4s ease-in-out infinite; }
@keyframes shine { 0%, 62% { left: -60%; } 100% { left: 135%; } }
.cat-banner img { animation: kenburns 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, 1%); } }
.section-title { box-shadow: -4px 0 18px -6px var(--accent); }

/* Order delivered: a stamp slams down while fx.js throws sparks. */
.delivered-stamp {
  align-self: flex-start; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.6rem); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ok); border: 4px solid var(--ok); padding: 2px 20px; border-radius: 8px; rotate: -6deg;
  text-shadow: 0 0 18px color-mix(in srgb, var(--ok) 60%, transparent);
  box-shadow: 0 0 34px -8px var(--ok), inset 0 0 18px -8px var(--ok);
  animation: stamp .55s cubic-bezier(.2,1.6,.4,1) .15s both;
}
@keyframes stamp { from { opacity: 0; scale: 2.6; filter: blur(5px); } to { opacity: 1; scale: 1; filter: none; } }
.fx-burst { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.server-pill { display: inline-flex; align-items: center; gap: 8px; color: var(--text) !important; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.server-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.fieldset legend { padding: 0 6px; font-weight: 600; }

/* Effects switched off by the visitor (footer toggle): still pages, no canvases, finished badges. */
html.no-fx *, html.no-fx *::before, html.no-fx *::after { animation: none !important; transition: none !important; }
html.no-fx body::after { display: none !important; }
html.no-fx .emblem .hex-outer, html.no-fx .emblem .hex-inner { stroke-dashoffset: 0; }
html.no-fx .emblem .mark, html.no-fx .emblem .mark-core, html.no-fx .emblem .mark-plus { opacity: 1; }

/* Footer, policy pages, order claim box */
.foot-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); }
.legal { gap: 10px; }
.legal h2 { font-size: 1.2rem; margin-top: 12px; }
.legal p { max-width: 70ch; color: #d8d2cb; }
.claim-box { display: flex; flex-direction: column; gap: 8px; }
.claim-box blockquote { margin: 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: rgba(27,26,25,.78); border-radius: 0 var(--radius) var(--radius) 0; overflow-wrap: anywhere; }

/* Admin */
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-nav a { text-decoration: none; padding: 8px 14px; border-radius: var(--radius); color: var(--muted); border: 1px solid transparent; font-weight: 600; }
.admin-nav a[aria-current="page"] { color: var(--text); border-color: var(--line); background: var(--surface); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.flash-ok { border-left-color: var(--ok); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.group-row th { background: #161514; color: var(--text); font-size: 0.85rem; letter-spacing: 0.04em; }
.group-row th a { color: inherit; }
.actions-cell { white-space: nowrap; }
.admin-form { display: flex; flex-direction: column; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-weight: 600; font-size: 0.9rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.help { font-size: 0.8rem; color: var(--muted); }
.help code, .panel code { font-size: 0.78rem; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }
input:not([type="checkbox"]):not([type="file"]), select, textarea {
  width: 100%; font: inherit; color: var(--text); background: #121110;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px;
}
textarea { resize: vertical; line-height: 1.45; }
textarea.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.82rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.checks { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.checks label, label.checks { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.pic-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.pic-fields { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 220px; }
.thumb-lg { width: 160px; height: 160px; object-fit: contain; background: #0e0e0e; border: 1px solid var(--line); border-radius: var(--radius); max-width: 100%; }
.thumb-lg.wide { width: 320px; height: 152px; object-fit: cover; }
.thumb-lg.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.85rem; }
.advanced { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.advanced summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.advanced[open] { gap: 14px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.footer { border-top: 1px solid var(--line); padding-block: 20px 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 0.85rem; }

@media (max-width: 760px) {
  /* Phones: headline on top, then the servers stacked, each about half a screen tall. */
  .pick-two { flex-direction: column; }
  .pick-two:hover .pick-card, .pick-two .pick-card:hover { flex-grow: 1; filter: none; }
  .pick-card { flex: none; min-height: 310px; }
  .pick-card .emblem { width: 62px; margin-bottom: 4px; }
  .pick-card:nth-of-type(2) { animation-name: pick-in; }
  .pick-or { width: auto; height: 0; }
  .pick-or b { left: 50%; top: 0; width: 60px; height: 60px; font-size: 1.15rem; }
  .pick-name { font-size: clamp(2.3rem, 12vw, 3.2rem); }
  .pick-full { height: auto; min-height: 0; }
  .pick-full .pick-head { position: relative; top: auto; left: auto; translate: none; width: auto; padding: calc(84px + env(safe-area-inset-top, 0px)) 16px 22px; }
  .pick-full .pick-card { min-height: 46svh; }
  .pick-full .pick-body { padding: 72px 20px 28px; }
  .pick-full .pick-name { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .pick-full .pick-card:last-of-type .pick-body { align-items: flex-start; text-align: left; }
  .pick-full .pick-card:last-of-type .pick-cta, .pick-full .pick-card:last-of-type .pick-badge { align-self: flex-start; }
  .pick-full .pick-or::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 2px; translate: 0 -50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 25%, rgba(255,255,255,.9) 75%, transparent); }
  .pick-full .pick-or b { width: 64px; height: 64px; font-size: 1.2rem; }
  body.page-home .testbar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); font-size: .78rem; }
  .trust { grid-template-columns: 1fr 1fr; }
  .inv-row { grid-template-columns: 1fr; gap: 6px; }
  .inv-slots { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .spot { grid-template-columns: 1fr; }
  .spot-art .art { min-height: 220px; }
  .cat-hero { flex-wrap: wrap; }
  .wipe { margin-left: 0; width: 100%; }
  .ticker { left: 12px; right: 12px; max-width: none; }
  .product { grid-template-columns: 1fr; }
  .hero { min-height: 220px; background: linear-gradient(rgba(27,26,25,0.78), rgba(27,26,25,0.94)), var(--cover, none) center / cover no-repeat, var(--surface); }
  .hero-text { padding: 22px; }
  .buy { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* Show the finished badge instead of its draw-in animation. */
  .emblem .hex-outer, .emblem .hex-inner { stroke-dashoffset: 0; }
  .emblem .mark, .emblem .mark-core, .emblem .mark-plus { opacity: 1; }
}

/* Dev poster page */
.poster-page { display: grid; gap: 16px; }
.poster-stage { width: 560px; height: 520px; aspect-ratio: auto; min-height: 0; }
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.poster-grid figure { margin: 0; background: linear-gradient(180deg, #16263a, #0a0e14); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.poster-grid img { width: 100%; display: block; }
.poster-grid figcaption { padding: 8px 10px; font-size: .85rem; background: var(--surface-2); }

/* Tiered kits: the level a buyer holds is greyed out, the next one up is marked as an upgrade */
.card.is-held .art { filter: grayscale(.9) brightness(.55); }
.card.is-held .card-body h3, .card.is-held .card-price { opacity: .7; }
.ribbon-held { background: #3a3f47; color: #d9dde3; }
.ribbon-up { background: var(--ok); color: #06210f; }
.tier-wall { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--muted); font-weight: 700; font-size: .8rem; line-height: 1.2; max-width: 100%; }
.tier-wall .ico { width: 18px; height: 18px; flex: none; color: var(--ok); }
.tier-wall.tier-max .ico { color: #f2c14e; }
.tier-wall.tier-max { border-color: color-mix(in srgb, #f2c14e 45%, transparent); color: var(--text); }
.card-foot .tier-wall { font-size: .72rem; padding: 7px 10px; }
.tier-block { display: flex; padding: 14px 16px; font-size: .95rem; }
.tier-fields { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 4px; margin: 0; }
.tier-fields legend { padding: 0 6px; font-weight: 700; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .row-3 { grid-template-columns: 1fr; } }

/* Welcome strip on the home page (logged in) */
.welcome { pointer-events: auto; margin: 18px auto 0; display: flex; align-items: center; gap: 14px; width: min(640px, 100%); padding: 8px 12px; text-align: left; border-radius: 14px; background: rgba(14,14,14,.82); border: 1px solid var(--line); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.welcome img { border-radius: 50%; }
.welcome > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.welcome b { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .02em; }
.welcome span { font-size: .85rem; color: var(--muted); }
.welcome .btn .ico { width: 16px; height: 16px; margin-right: 6px; }
@media (max-width: 760px) { .welcome { margin-top: 12px; flex-wrap: wrap; } .welcome > div { flex-basis: calc(100% - 54px); } .welcome .btn { width: 100%; justify-content: center; } }

/* Player page */
.hello { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #141414), #0e0e0e 60%); border: 1px solid var(--line); }
.hello-avatar { border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.hello-text { flex: 1; min-width: 0; }
.hello-text h1 { margin: 2px 0 4px; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.hello-text .muted { margin: 0; }
.eyebrow { margin: 0; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.hello-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hello-actions form { margin: 0; }
.hello-actions .btn .ico { width: 16px; height: 16px; margin-right: 6px; }
.dash { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: 20px; align-items: start; }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.kit-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.03); }
.kit-art .art { aspect-ratio: 1 / 1; border-radius: 10px; }
.kit-art .art .art-top, .kit-art .art .art-foot { display: none; }
.kit-art .art.has-inv { padding: 6px; aspect-ratio: 1 / 1; } .kit-art .inv-board { gap: 3px; margin: 0; justify-content: center; height: 100%; } .kit-art .inv-label, .kit-art .inv-wm { display: none; } .kit-art .inv-slot:not(.is-filled):not(.inv-more) { display: none; } .kit-art .inv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kit-info h3 { margin: 0 0 2px; font-size: 1.05rem; } .kit-info h3 a { text-decoration: none; }
.kit-info p { margin: 2px 0; }
.claim-how { display: flex; align-items: center; gap: 8px; font-size: .9rem; margin: 8px 0 !important; }
.claim-how .ico { width: 18px; height: 18px; color: var(--accent); flex: none; }
.claim-how code { background: rgba(255,255,255,.08); padding: 1px 7px; border-radius: 4px; font-size: .95rem; }
.kit-timer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--line); margin: 6px 0; }
.kit-timer b { font-family: var(--font-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.kit-timer .small { flex: 1 1 auto; }
.kit-timer form { flex-basis: 100%; margin: 0; display: flex; align-items: center; gap: 10px; }
.kit-timer.is-ready b { color: var(--ok); }
.btn-mini { padding: 7px 10px; font-size: .74rem; }
.timers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.timer-row:last-child { border-bottom: 0; }
.timer-what { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.timer-what .ico { width: 16px; height: 16px; color: var(--tier, var(--accent)); flex: none; }
.timer-what a { text-decoration: none; }
.timer-clock { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--tier, var(--accent)); }
.timer-row.is-ready .timer-clock { color: var(--ok); }
.timer-row .small { grid-column: 1; }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .hello { flex-wrap: wrap; } .hello-actions { justify-content: flex-start; width: 100%; } }
@media (max-width: 520px) { .kit-card { grid-template-columns: 96px minmax(0, 1fr); } .kit-grid { grid-template-columns: 1fr; } }

/* Server landing: the category tiles */
.cat-choose .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cat-choose .tiles-2 .tile, .cat-choose .tiles-3 .tile { min-height: 220px; }
.cat-choose .tile .tile-name { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* Admin · Setup */
.setup td { vertical-align: top; }
.setup-mark { width: 28px; font-weight: 800; text-align: center; }
.setup-ok .setup-mark { color: var(--ok); } .setup-warn .setup-mark { color: #f2c14e; } .setup-bad .setup-mark { color: #ff5c5c; }

/* Cart drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); z-index: 60; background: #121110; border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(0,0,0,.55); transform: translateX(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s; }
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.2rem; }
.drawer-close { background: none; border: 1px solid var(--line); color: var(--text); width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }
.drawer-close:hover { border-color: var(--accent); color: var(--accent); }
.drawer-body { flex: 1; overflow: auto; padding: 10px 18px; }
.drawer-item { display: grid; grid-template-columns: 8px 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.drawer-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--tier); box-shadow: 0 0 10px var(--tier); grid-row: 1 / span 2; }
.drawer-item a { text-decoration: none; display: flex; flex-direction: column; min-width: 0; }
.drawer-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-price { font-weight: 700; }
.drawer-item .link { grid-column: 3; justify-self: end; }
.drawer-foot { padding: 14px 18px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; }
.drawer-total b { font-family: var(--font-display); font-size: 1.7rem; }
.drawer-foot form { margin: 0; } .drawer-foot .btn-buy { width: 100%; }
.drawer-full { text-align: center; }
#drawer-checkout:disabled { opacity: .5; cursor: not-allowed; }
/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 70; padding: 10px 16px; border-radius: 999px; background: #1b1a19; border: 1px solid var(--line); color: var(--text); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 92vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.toast.bad { border-color: #ff5c5c; }
/* Filters */
.filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.sort select { background: #151413; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.card[hidden] { display: none; }
/* Compare levels */
.compare { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(27,26,25,.86); }
.compare summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; }
.compare summary::-webkit-details-marker { display: none; }
.compare summary .ico { width: 18px; height: 18px; color: var(--accent); }
.compare summary em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: auto; }
.compare summary::after { content: '+'; font-size: 1.3rem; color: var(--muted); margin-left: 10px; }
.compare[open] summary::after { content: '–'; }
.compare .table-wrap { padding: 0 8px 10px; }
.compare-table th a { text-decoration: none; font-family: var(--font-display); font-size: 1.2rem; }
.compare-table th.is-mine a, .compare-table th.is-mine { color: var(--ok); }
.compare-table .is-below { opacity: .45; }
.mine-tag, .up-tag { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.mine-tag { color: var(--ok); } .up-tag { color: var(--accent); }
.cmp-item { display: inline-flex; align-items: center; gap: 8px; }
.cmp-item img, .cmp-item .ico { width: 26px; height: 26px; object-fit: contain; }
.cmp-item .ico { color: var(--muted); }
.cmp-price td { font-weight: 700; border-top: 1px solid var(--line); }
/* Item tooltip */
.tip { position: absolute; z-index: 80; transform: translate(-50%, -100%); background: #0f0f0f; color: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: .78rem; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.tip.show { opacity: 1; }
.inv-slot[data-tip] { pointer-events: auto; cursor: help; outline: none; }
.inv-slot[data-tip]:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 760px) { .compare summary em { display: none; } }

/* Tier ladder: V1 → V2 → V3 */
.ladder { display: flex; flex-direction: column; gap: 14px; }
.ladder-head { display: flex; flex-direction: column; gap: 8px; }
.ladder-rule { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.ladder-rule .ico { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 1px; }
.ladder-rule b { color: var(--text); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px 34px; counter-reset: step; }
.step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius); background: rgba(27,26,25,.86); border: 1px solid var(--line); transition: transform .3s ease, border-color .3s ease; }
.step:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tier) 60%, transparent); }
.step + .step::before { content: '→'; position: absolute; left: -30px; top: 42%; width: 26px; text-align: center; font-size: 1.5rem; color: var(--muted); }
.step-no { position: absolute; top: -12px; left: 14px; z-index: 2; font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; background: var(--tier); color: #0b0b0b; box-shadow: 0 0 16px color-mix(in srgb, var(--tier) 60%, transparent); }
.step-art .art { aspect-ratio: 1 / 1.08; }
.step-art .art .art-foot { display: none; }
.step-body h3 { margin: 0; font-size: 1.15rem; } .step-body h3 a { text-decoration: none; }
.step-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.step-items li { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.step-items li b { color: var(--text); }
.step-items img, .step-items .ico { width: 22px; height: 22px; object-fit: contain; flex: none; }
.step-status { min-height: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.step-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.step-pill .ico { width: 14px; height: 14px; }
.pill-mine { background: var(--ok); color: #06210f; }
.pill-next { background: var(--accent); color: #fff; }
.pill-below { background: rgba(255,255,255,.08); color: var(--muted); }
.pill-start { background: rgba(255,255,255,.08); color: var(--text); }
.step-buy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.step-buy form { margin: 0; display: flex; }
.step-buy .btn { width: 100%; justify-content: center; flex-direction: column; gap: 0; line-height: 1.1; padding: 10px 8px; }
.step-buy .btn small { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.btn-ghost { background: rgba(255,255,255,.06); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }
.step-mine { border-color: color-mix(in srgb, var(--ok) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent), 0 0 30px -10px var(--ok); }
.step-next { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.step-below { opacity: .55; }
.step-below .step-art .art { filter: grayscale(.8); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 30px; } .step + .step::before { content: '↓'; left: 50%; top: -30px; transform: translateX(-50%); width: auto; } }
/* Levels strip on a tiered product page */
.tier-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.tier-dot { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; line-height: 1.1; min-width: 64px; }
.tier-dot b { font-family: var(--font-display); font-size: 1rem; } .tier-dot span { font-size: .72rem; color: var(--muted); }
.tier-dot.is-this { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tier-dot.is-held { border-color: var(--ok); } .tier-dot.is-held b { color: var(--ok); }
.tier-arrow { font-style: normal; color: var(--muted); }
.tier-rule { flex-basis: 100%; }

/* A lifetime + monthly pair in one card */
.card.card-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.card.card-box:hover { transform: translateY(-3px); }
.card-box .step-art .art-period { visibility: hidden; }
.card-box .step-art .art { aspect-ratio: 1 / 1; }
.card-box .step-body { display: flex; flex-direction: column; gap: 8px; }
.card-box .step-body p { margin: 0; }
.btn.is-off { opacity: .45; cursor: not-allowed; }

.step-cool { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .82rem; color: var(--muted); }
.step-cool .ico { width: 15px; height: 15px; color: var(--tier, var(--accent)); }
.step-cool b { color: var(--text); }

/* ladder steps get the same cursor sheen as cards */
.step::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 0%), rgba(255,255,255,.16), transparent 45%); }
.step::after { border-radius: inherit; z-index: 0; }
.step > * { position: relative; z-index: 1; }
.step .step-no { z-index: 2; }

.step { transition: transform .25s ease, border-color .3s ease; transform-style: preserve-3d; }
.step:hover { transform: none; }

.step:hover::after { opacity: 1; }
.step:hover { box-shadow: 0 22px 50px -20px color-mix(in srgb, var(--tier, var(--accent)) 60%, transparent); }

.step[hidden], .ladder[hidden] { display: none; }

/* Rich category tiles */
.tile.tile-rich { position: relative; overflow: hidden; min-height: 300px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; border: 1px solid color-mix(in srgb, var(--pick) 45%, transparent); border-radius: var(--radius); background: #0a0c10; color: var(--text); text-decoration: none; isolation: isolate; transition: border-color .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.tile.tile-rich:hover { border-color: var(--pick); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--pick) 70%, transparent); }
.tile-rich .tile-bg { position: absolute; inset: 0; z-index: -2; background-image: var(--img); background-size: cover; background-position: center; filter: saturate(1.1) brightness(.75); transform: scale(1.04); transition: transform .8s ease, filter .5s ease; }
.tile-rich:hover .tile-bg { transform: scale(1.1); filter: saturate(1.25) brightness(.9); }
.tile-rich::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--pick) 20%, transparent), rgba(5,6,10,.35) 40%, rgba(5,6,10,.92) 100%), radial-gradient(60% 50% at 80% 20%, color-mix(in srgb, var(--pick) 35%, transparent), transparent 70%); }
.tile-rich::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s ease; background: radial-gradient(circle at var(--sx, 50%) var(--sy, 0%), rgba(255,255,255,.14), transparent 45%); }
.tile-rich:hover::after { opacity: 1; }
.tile-float { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tile-float .fl { position: absolute; width: 17%; max-width: 110px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.75)) drop-shadow(0 0 14px color-mix(in srgb, var(--pick) 45%, transparent)); animation: fl-drift 6s ease-in-out infinite; transition: transform .5s ease; }
.tile-float .fl-0 { right: 8%; top: 10%; width: 24%; max-width: 150px; animation-delay: 0s; }
.tile-float .fl-1 { right: 30%; top: 28%; animation-delay: -1.5s; }
.tile-float .fl-2 { right: 4%; top: 46%; animation-delay: -3s; }
.tile-float .fl-3 { right: 26%; top: 58%; width: 13%; animation-delay: -2.2s; opacity: .9; }
.tile-float .fl-4 { right: 44%; top: 12%; width: 12%; animation-delay: -4s; opacity: .8; }
.tile-float .fl-5 { right: 48%; top: 48%; width: 11%; animation-delay: -5s; opacity: .7; }
@keyframes fl-drift { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
.tile-rich:hover .fl-0 { transform: translateY(-8px) scale(1.1) rotate(-6deg); }
.tile-rich:hover .fl-1, .tile-rich:hover .fl-2 { transform: translateY(-5px) scale(1.06); }
.tile-top { position: absolute; top: 18px; left: 22px; display: flex; align-items: center; gap: 10px; }
.tile-rich .tile-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,0,0,.45); border: 1px solid color-mix(in srgb, var(--pick) 60%, transparent); color: var(--pick); box-shadow: 0 0 20px color-mix(in srgb, var(--pick) 40%, transparent); }
.tile-rich .tile-ico .ico { width: 26px; height: 26px; }
.tile-rich .tile-server { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pick); font-weight: 700; }
.tile-rich .tile-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; text-transform: uppercase; text-shadow: 0 4px 24px rgba(0,0,0,.8); }
.tile-rich .tile-text { color: #d8d3cc; font-size: .95rem; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.tile-rich .tile-meta { font-size: .85rem; color: var(--muted); }
.tile-cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 6px; padding: 10px 16px; border-radius: 999px; background: var(--pick); color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 24px -8px var(--pick); transition: transform .25s ease, box-shadow .25s ease; }
.tile-cta .arrow { transition: transform .25s ease; }
.tile-rich:hover .tile-cta { transform: translateX(4px); box-shadow: 0 14px 30px -8px var(--pick); }
.tile-rich:hover .tile-cta .arrow { transform: translateX(4px); }
.tile-rich.is-empty { opacity: .6; }
html.no-fx .tile-float .fl { animation: none; }
@media (max-width: 760px) { .tile.tile-rich { min-height: 240px; padding: 18px; } .tile-float .fl { width: 20%; } }

.ribbon-badge { background: #f2c14e; color: #2a1d00; border-color: #f2c14e; box-shadow: 0 0 18px -4px #f2c14e; }

/* ---- Artwork pass: server crests (the boar for Vanilla+, the wolf for True Rust) ---- */
/* Server banner: title left, crest in the middle, wipe clock right; a blurred copy of the crest fills the strip. */
.cat-hero.has-crest { min-height: clamp(210px, 28vh, 270px); gap: clamp(12px, 2vw, 28px); }
.cat-hero .crest-bg { position: absolute; inset: -30px; z-index: -2; background: var(--crest) center 40% / cover no-repeat; filter: blur(24px) saturate(1.35) brightness(.55); transform: scale(1.1); }
.cat-hero.has-crest::after { background: linear-gradient(90deg, rgba(5,6,10,.92) 0%, rgba(5,6,10,.55) 30%, rgba(5,6,10,.08) 50%, rgba(5,6,10,.55) 70%, rgba(5,6,10,.92) 100%); }
.cat-hero .crest {
  position: relative; z-index: 1; flex: 0 1 auto; min-width: 0; margin-inline: auto;
  height: clamp(140px, 19vw, 230px); width: auto; max-width: 46%; object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.85)) drop-shadow(0 0 30px color-mix(in srgb, var(--pick) 60%, transparent));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  animation: crest-in 1s .15s cubic-bezier(.2,.8,.2,1) both;
}
.cat-hero.has-crest .wipe { position: relative; z-index: 1; }
@keyframes crest-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .cat-hero.has-crest { flex-direction: column; align-items: stretch; padding-top: 16px; }
  .cat-hero .crest { order: -1; height: 150px; max-width: 100%; margin: 0 auto 4px; }
  .cat-hero.has-crest::after { background: linear-gradient(180deg, rgba(5,6,10,.15) 0%, rgba(5,6,10,.7) 45%, rgba(5,6,10,.92) 100%); }
}

/* Home halves: the crest floats behind the server name and leans with the cursor like the title does. */
.pick-crest {
  position: absolute; left: 50%; top: 50%; z-index: 0; width: min(68%, 560px); pointer-events: none;
  translate: calc(-50% + var(--mx, 0) * 14px) calc(-54% + var(--my, 0) * 10px);
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--pick) 55%, transparent));
  transition: translate .4s ease-out, filter .5s ease, scale .8s cubic-bezier(.2,.8,.2,1);
  animation: crest-rise 1.2s .35s cubic-bezier(.2,.8,.2,1) both;
}
.pick-crest img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 44%, #000 36%, transparent 100%); mask-image: radial-gradient(ellipse 62% 56% at 50% 44%, #000 36%, transparent 100%);
}
.pick-card:hover .pick-crest, .pick-card:focus-visible .pick-crest { scale: 1.05; filter: drop-shadow(0 0 70px color-mix(in srgb, var(--pick) 85%, transparent)); }
@keyframes crest-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .pick-crest { width: min(80%, 420px); top: 42%; } }
html.no-fx .pick-crest, html.no-fx .cat-hero .crest { animation: none; }

/* Player page: the crest of the player's last server behind the welcome strip; crest thumbnails on the wipe timers. */
.hello.has-crest { position: relative; overflow: hidden; isolation: isolate; border-color: color-mix(in srgb, var(--pick) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--pick) 24%, #121214), #0e0e0e 62%); }
.hello.has-crest .hello-avatar { border-color: color-mix(in srgb, var(--pick) 70%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--pick) 40%, transparent); }
.hello.has-crest .eyebrow { color: var(--pick); }
.hello-crest { position: absolute; right: 18%; top: 50%; translate: 0 -50%; width: min(42%, 480px); z-index: -1; pointer-events: none; opacity: .95; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--pick) 50%, transparent)); }
.hello-crest img { display: block; width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 44%, #000 34%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 44%, #000 34%, transparent 100%); }
@media (max-width: 760px) { .hello-crest { right: -12%; width: 72%; opacity: .45; } }
.timer-crest { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 36%; flex: none; background: #000; border: 1px solid color-mix(in srgb, var(--tier, var(--accent)) 80%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--tier, var(--accent)) 45%, transparent); }

/* Empty states: a picture, a line, and a button per server. */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 10px 6px; }
.empty-art { width: min(100%, 440px); height: auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,.6)); animation: float-soft 6s ease-in-out infinite; }
.empty h2, .empty h3 { margin: 8px 0 0; }
.empty p { margin: 0; max-width: 46ch; }
.empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html.no-fx .empty-art { animation: none; }

/* Message page with a picture (the 404 raid). */
.panel.msg { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 24px; align-items: center; padding: 0; overflow: hidden; }
.msg-art { position: relative; align-self: stretch; min-height: 300px; }
.msg-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.msg-text { display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 28px 0; }
.msg-text h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; }
.msg-text .empty-actions { justify-content: flex-start; }
@media (max-width: 760px) {
  .panel.msg { grid-template-columns: 1fr; }
  .msg-art { min-height: 210px; }
  .msg-art img { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .msg-text { padding: 0 20px 20px; }
}

/* VIP ticket with the included kit as a strip of icons. */
.vip-kit { display: flex; flex-direction: column; gap: 5px; padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.38); border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent); }
.vip-kit-label { display: flex; align-items: center; gap: 6px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tier); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vip-kit-label .ico { width: 13px; height: 13px; flex: none; }
.vip-kit-row { display: flex; gap: 4px; flex-wrap: wrap; }
.vip-kit-slot { position: relative; width: 26px; height: 26px; border-radius: 5px; background: #0f1218; border: 1px solid color-mix(in srgb, var(--cat, #666) 55%, transparent); display: grid; place-items: center; overflow: hidden; }
.vip-kit-slot img, .vip-kit-slot .ico { width: 20px; height: 20px; object-fit: contain; }
.vip-kit-more { font-size: .7rem; font-weight: 700; color: var(--muted); }
.vip-pass.has-kit .vip-core { gap: 0; margin-block: 4px auto; }
.art-big .vip-kit-slot { width: 42px; height: 42px; border-radius: 7px; } .art-big .vip-kit-slot img, .art-big .vip-kit-slot .ico { width: 34px; height: 34px; }
.art-big .vip-kit-label { font-size: .8rem; }
.kit-art .vip-kit { display: none; } /* too small on the player's page thumbnails */

/* VIP ticket with a kit: tighter so the stub stays inside the square. */
.vip-pass.has-kit { gap: 6px; padding-block: 10px 8px; }
.vip-pass.has-kit .vip-crown .ico { width: 34px; height: 34px; }
.vip-pass.has-kit .vip-word { font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: .9; }
.art-big.vip-pass.has-kit .vip-crown .ico { width: 56px; height: 56px; }
.art-big.vip-pass.has-kit .vip-word { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.art-big.vip-pass.has-kit .vip-kit-slot { width: 36px; height: 36px; } .art-big.vip-pass.has-kit .vip-kit-slot img, .art-big.vip-pass.has-kit .vip-kit-slot .ico { width: 29px; height: 29px; }

/* ---- Tier ladders start as a stacked deck of cards and fan out on click (desktop) ---- */
.deck { position: relative; }
.deck-open, .deck-close { display: none; }
.ladder-rule { align-items: center; }
.ladder.is-open .deck-close { display: inline-flex; margin-left: auto; flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted); font: 600 .74rem/1 var(--font-body, inherit); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ladder.is-open .deck-close:hover { color: var(--text); border-color: var(--accent); }
@media (min-width: 901px) {
  .step { transition: translate .65s cubic-bezier(.2,.8,.2,1), rotate .65s cubic-bezier(.2,.8,.2,1), scale .65s cubic-bezier(.2,.8,.2,1), filter .5s ease, box-shadow .4s ease, border-color .3s ease; }
  .step + .step::before { transition: opacity .3s ease; }
  .deck.is-stacked .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deck.is-stacked .steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck.is-stacked .step { box-shadow: 0 34px 70px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); }
  .deck.is-stacked .step + .step::before { opacity: 0; }
  /* three levels: V1 in front, V2 peeking up-right, V3 peeking up-left */
  .deck.is-stacked .steps-3 .step:nth-child(1) { translate: calc(100% + 34px) 0; z-index: 3; }
  .deck.is-stacked .steps-3 .step:nth-child(2) { translate: 26px -18px; rotate: 3deg; scale: .965; z-index: 2; filter: brightness(.72); }
  .deck.is-stacked .steps-3 .step:nth-child(3) { translate: calc(-100% - 34px - 26px) -36px; rotate: -3deg; scale: .93; z-index: 1; filter: brightness(.55); }
  .deck.is-stacked:hover .steps-3 .step:nth-child(2) { translate: 48px -26px; rotate: 5deg; }
  .deck.is-stacked:hover .steps-3 .step:nth-child(3) { translate: calc(-100% - 34px - 48px) -52px; rotate: -5deg; }
  /* two levels */
  .deck.is-stacked .steps-2 .step:nth-child(1) { translate: calc(50% + 17px) 0; z-index: 2; }
  .deck.is-stacked .steps-2 .step:nth-child(2) { translate: calc(-50% - 17px + 26px) -18px; rotate: 3deg; scale: .965; z-index: 1; filter: brightness(.72); }
  .deck.is-stacked:hover .steps-2 .step:nth-child(2) { translate: calc(-50% - 17px + 48px) -26px; rotate: 5deg; }
  /* the invisible button over the whole deck, with a label and a glowing pill */
  .deck.is-stacked .deck-open { display: flex; position: absolute; inset: -40px 0 0; z-index: 10; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 0 22px; margin: 0; background: transparent; border: 0; cursor: pointer; color: inherit; font: inherit; }
  .deck-count { position: absolute; top: 0; left: 50%; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.7); border: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .deck-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 16px 40px -10px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); transition: transform .25s ease, box-shadow .25s ease; animation: cta-pulse 2.4s ease-out infinite; }
  .deck-pill .ico { width: 16px; height: 16px; }
  .deck-open:hover .deck-pill, .deck-open:focus-visible .deck-pill { transform: translateY(-3px) scale(1.04); box-shadow: 0 20px 50px -10px var(--accent), 0 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent); }
  .deck.is-stacked .ladder-rule { opacity: .8; }
  html.no-fx .deck-pill { animation: none; }
}

/* ---- Product brief: the written "what's in this kit" panel ---- */
.brief { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 18px 20px 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, rgba(20,20,24,.92)), rgba(12,12,15,.94)); box-shadow: 0 20px 50px -30px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.04); }
.brief .eyebrow { margin: 0; }
.brief h3 { margin: 0; font-family: var(--font-display); font-size: 1.45rem; text-transform: uppercase; letter-spacing: .02em; }
.brief-facts, .brief-fine, .brief-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.brief-facts li { font-size: .95rem; color: #e6e1da; }
.brief-facts b { color: var(--text); }
.brief-facts a, .brief-fine a { color: var(--accent); }
.brief-head { margin: 8px 0 0; font-weight: 700; color: var(--text); }
.brief-text { margin: 0; color: #d8d3cc; }
.brief-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.brief-group { padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.06); }
.brief-group h4 { margin: 0 0 6px; font-size: .9rem; font-weight: 700; color: var(--text); }
.brief-group li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #d2cdc6; }
.brief-group li img, .brief-group li .ico { width: 22px; height: 22px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.brief-group li b { color: var(--text); }
.brief-fine li { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.brief-foot { margin: 4px 0 0; font-weight: 700; color: var(--ok, #7ee0a0); }
/* Deck: the label and pill sit under the stacked cards instead of over the price buttons. */
@media (min-width: 901px) {
  .deck.is-stacked { padding-bottom: 74px; }
  .deck.is-stacked .deck-open { inset: 0; padding-bottom: 0; gap: 8px; }
  .deck-count { position: static; translate: none; }
}

/* Upgrade pricing */
.step-credit { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ok, #7ee0a0) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok, #7ee0a0) 35%, transparent); font-size: .8rem; color: #d8d3cc; line-height: 1.35; }
.step-credit .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--ok, #7ee0a0); }
.step-credit b { color: var(--text); }
.step-credit.is-warn { background: rgba(255,170,60,.1); border-color: rgba(255,170,60,.35); } .step-credit.is-warn .ico { color: #ffb347; }
.btn.is-upgrade small { opacity: .9; }

/* ---- My stuff ---- */
.me span { font-weight: 600; }
.me-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; }
.hello-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.hello-stats li { display: flex; flex-direction: column; min-width: 92px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.4); border: 1px solid var(--line); }
.hello-stats b { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; color: var(--text); }
.hello-stats span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.hello-stats li.is-ready { border-color: color-mix(in srgb, var(--ok, #7ee0a0) 60%, transparent); } .hello-stats li.is-ready b { color: var(--ok, #7ee0a0); }
.kit-grid { grid-template-columns: 1fr; }
.kit-card { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px; border-color: color-mix(in srgb, var(--tier, var(--line)) 45%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--tier, #888) 10%, rgba(255,255,255,.03)), rgba(255,255,255,.02) 60%); }
.kit-card.is-ready { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok, #7ee0a0) 45%, transparent), 0 0 30px -14px var(--ok, #7ee0a0); }
.kit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kit-head h3 { margin: 0; font-size: 1.2rem; } .kit-head h3 a { text-decoration: none; }
.kit-when { font-size: .82rem; color: var(--muted); }
.claim-box2 { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.claim-box2 > span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.claim-code { display: inline-block; align-self: flex-start; padding: 8px 14px; border-radius: 10px; background: rgba(0,0,0,.5); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); font-size: 1.15rem; font-weight: 700; color: var(--text); cursor: copy; transition: border-color .2s, transform .15s; }
.claim-code:hover { border-color: var(--accent); transform: translateY(-1px); }
.claim-code.is-copied { border-color: var(--ok, #7ee0a0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #7ee0a0) 30%, transparent); }
.kit-timer { flex-direction: column; align-items: stretch; gap: 8px; }
.kit-timer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kit-timer-row b { font-family: var(--font-display); font-size: 1.1rem; }
.kit-timer-row form { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kit-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.kit-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--tier, var(--accent)) 70%, #fff 0%), var(--tier, var(--accent))); transition: width .6s ease; }
.kit-timer.is-ready .kit-bar i { background: var(--ok, #7ee0a0); }
.kit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; }
.kit-actions .btn-mini { display: inline-flex; align-items: center; gap: 6px; } .kit-actions .btn-mini .ico { width: 14px; height: 14px; } .kit-actions .btn-mini small { opacity: .8; margin-left: 4px; font-weight: 600; }
.dash-side { display: flex; flex-direction: column; gap: 20px; }
.quick-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quick-links a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); text-decoration: none; color: var(--text); transition: border-color .2s, transform .15s; }
.quick-links a:hover { border-color: var(--accent); transform: translateX(3px); }
.quick-links .ico { width: 20px; height: 20px; color: var(--accent); flex: none; }
.quick-links span { display: flex; flex-direction: column; } .quick-links small { color: var(--muted); font-size: .78rem; }
.made { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; } .made .muted { margin: 0 0 8px; }
@media (max-width: 700px) { .kit-card { grid-template-columns: 1fr; } .kit-art .art { max-width: 220px; } }

/* Box-card decks (Gladiator / Champion / Commander) share the ladder geometry. */
.deck .grid.deck-grid { gap: 26px 34px; }
@media (min-width: 901px) {
  .deck.is-stacked .grid.deck-grid.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deck.is-stacked .grid.deck-grid.steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck.is-stacked .deck-grid .card.card-box:hover { transform: none; }
}

/* ================= Phones ================= */
.nav-login-short { display: none; }
.swipe-hint { display: none; }
.quick-links form { margin: 0; } .quick-links form button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .15s; }
.quick-links form button:hover { border-color: var(--accent); transform: translateX(3px); }
.quick-links form button .ico { width: 20px; height: 20px; color: var(--accent); flex: none; }
.quick-links form button span { display: flex; flex-direction: column; } .quick-links form button small { color: var(--muted); font-size: .78rem; }

@media (max-width: 760px) {
  /* one-row header: brand left, cart + account right */
  .topbar-inner { flex-wrap: nowrap; min-height: 56px; padding-block: 6px; gap: 10px; }
  .brand { font-size: 1.05rem; gap: 8px; min-width: 0; }
  .brand img { width: 28px; height: 28px; }
  .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav { gap: 6px; flex-wrap: nowrap; flex: none; }
  .nav .nav-text, .nav .nav-logout { display: none; }
  .nav a, .nav button { min-height: 44px; display: inline-flex; align-items: center; }
  .cart-link { padding: 0 8px; } .cart-link span { display: none; } .cart-link .ico { width: 24px; height: 24px; }
  .cart-count { margin-left: 2px; }
  .me { padding: 0 4px; gap: 6px; } .me span { display: none; } .me img { width: 32px; height: 32px; }
  .nav-login { padding: 0 14px; min-height: 40px; font-size: .9rem; }
  .nav-login-long { display: none; } .nav-login-short { display: inline; }
  .testbar { font-size: .78rem; padding: 5px 12px; }

  /* home: the headline sits below the header; the OR badge and the category pill get their own room */
  body.page-home .topbar { background: linear-gradient(rgba(0,0,0,.92), rgba(0,0,0,.6)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .pick-full .pick-head { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
  .pick-full .pick-head h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .pick-full .pick-card:first-of-type .pick-body { padding-bottom: 64px; }
  .pick-full .pick-card:last-of-type .pick-body { padding-top: 64px; }
  .pick-full .pick-body { padding-left: 18px; padding-right: 18px; }
  .pick-full .pick-name { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .pick-full .pick-card { min-height: 44svh; }
  .pick-more { position: static; translate: none; margin: 14px auto 6px; width: max-content; }
  body.page-home .testbar { position: static; margin: 10px auto 0; width: max-content; max-width: calc(100% - 32px); }

  /* tap targets and label sizes */
  .crumbs { font-size: .95rem; } .crumbs a { display: inline-block; padding: 8px 2px; }
  .chip { min-height: 40px; padding-inline: 14px; }
  .filters { gap: 10px; } .sort select { min-height: 40px; }
  footer a, .footer a, .foot a { display: inline-block; padding: 10px 4px; }
  .eyebrow { font-size: .78rem; }
  .step-cool, .kit-when, .tile-meta { font-size: .85rem; }
  .btn-mini { min-height: 40px; }

  /* product page: the 3D button sits under the belt row instead of on it */
  .figure-stage .art-big.has-inv { padding-bottom: 62px; }
  .figure-toggle { bottom: 10px; right: 10px; padding: 9px 12px; font-size: .74rem; }

  /* cart drawer fills the phone */
  .drawer { width: 100%; max-width: 100%; }
}

/* Ladders and the 24-hour deck: swipe sideways on phones and small tablets instead of a long column */
@media (max-width: 900px) {
  .deck-close { display: none !important; }
  .swipe-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .swipe-hint span { display: inline-block; animation: swipe-nudge 1.6s ease-in-out infinite; }
  @keyframes swipe-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
  html.no-fx .swipe-hint span { animation: none; }
  .ladder .steps, .deck .grid.deck-grid {
    display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 14px 4px 10px; margin-inline: -4px; scroll-padding-inline: 4px;
  }
  .ladder .steps::-webkit-scrollbar, .deck .grid.deck-grid::-webkit-scrollbar { display: none; }
  .ladder .step, .deck .grid.deck-grid .card { flex: 0 0 min(84vw, 360px); scroll-snap-align: center; }
  .step + .step::before { display: none; }
  .steps-2 .step, .deck .grid.deck-grid.steps-2 .card { flex-basis: min(84vw, 360px); }
  /* the compare table scrolls sideways too */
  .compare .table-wrap, .compare table { overflow-x: auto; max-width: 100%; }
}
@media (max-width: 760px) {
  /* the live "someone bought" ticker: a small pill in the corner, not a bar over the cards */
  .ticker { left: 10px; right: auto; bottom: 10px; max-width: 72vw; padding: 6px 10px; font-size: .74rem; border-radius: 999px; opacity: .92; }
}
@media (max-width: 760px) {
  /* product page: the 3D button becomes a small pill centred at the top of the picture, off the slot rows */
  .figure-stage .art-big.has-inv { padding-bottom: 18px; }
  .figure-toggle { top: 10px; bottom: auto; right: auto; left: 50%; translate: -50% 0; padding: 7px 11px; font-size: .7rem; }
}

@media (max-width: 760px) {
  /* server hero on phones: no emblem, title and tagline tight, wipe clock on one line */
  .cat-hero { min-height: 0; padding: 16px 16px 14px; gap: 10px; flex-direction: column; align-items: stretch; }
  .cat-hero .emblem { display: none; }
  .cat-hero-text { gap: 2px; }
  .cat-hero-text h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); line-height: 1; }
  .cat-hero-tag { font-size: .9rem; }
  .cat-hero .wipe { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 8px 12px; width: 100%; margin: 4px 0 0; }
  .cat-hero .wipe .ico { width: 18px; height: 18px; }
  .cat-hero .wipe-label { font-size: .66rem; }
  .cat-hero .wipe-time { font-size: 1.25rem; }
  .cat-hero .wipe-when { margin-left: auto; font-size: .72rem; }
  /* the film-grain overlay repaints the whole screen on scroll; phones do without it */
  body::after { display: none; }
}

/* Thank-you message on the order page */
.thanks { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 16px 18px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.thanks p { margin: 0; }
.thanks-head { font-size: 1.1rem; }
.thanks h3 { margin: 8px 0 0; font-size: 1rem; }
.claim-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.claim-steps .claim-code { font-size: 1.05rem; padding: 4px 10px; }

/* Gamertag link (My stuff + order page) */
.hello-link { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .92rem; }
.hello-link .ico { width: 16px; height: 16px; flex: none; }
.hello-link a { margin-left: 2px; }
.hello-link.is-missing span { color: var(--warn, #ffb15c); }
.link-panel { margin-bottom: 16px; }
.link-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.link-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.link-form input { flex: 1 1 220px; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: inherit; font: inherit; font-size: 1rem; }
.link-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.link-change { margin-top: 6px; }
.link-change summary { cursor: pointer; color: var(--accent); }
.link-inline { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.04); }
.link-inline h3 { margin: 0 0 6px; }
.flash-warn { border-color: var(--warn, #ffb15c); }