/* ══════════════════════════════════════════════════════════════
   Killer Roulette — near-black canvas, red used only as a highlight.
   ══════════════════════════════════════════════════════════════ */

:root {
  --void: #07070a;
  --pit: #0c0c11;
  --panel: #121218;
  --panel-2: #17171f;
  --edge: #23232d;
  --edge-lit: #33333f;

  --bone: #e8e4dd;
  --ash: #9a97a2;
  --dim: #63616c;

  --blood: #b3121a;
  --blood-lit: #e11d26;
  --blood-glow: rgba(225, 29, 38, 0.35);

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --gothic: 'Nosifer', 'Barlow Condensed', sans-serif;
  --body: 'Inter', system-ui, sans-serif;

  --radius: 10px;
  --spin-ms: 3600ms;
}

*, *::before, *::after { box-sizing: border-box; }

/* Several components below set their own `display`, which would otherwise
   beat the UA's `[hidden] { display: none }` and leave them stuck on screen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Atmosphere ─────────────────────────────────────────────── */

/* Fine static, laid over everything but never intercepting clicks. */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 100; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift 700ms steps(3) infinite;
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* Vignette + a single faint red bloom behind the machine. */
.fog {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 45% at 50% 22%, rgba(140, 20, 26, 0.13), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
}

/* ── Top bar ────────────────────────────────────────────────── */

.topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(14px, 4vw, 32px);
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(var(--pit), rgba(12, 12, 17, 0.6));
}

.wordmark {
  margin: 0;
  font-family: var(--gothic);
  font-size: clamp(15px, 2.6vw, 22px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--bone);
}
.wordmark span { color: var(--blood-lit); }

.topbar-actions { display: flex; align-items: center; gap: 8px; }

.mode-switch {
  display: flex; padding: 3px; gap: 3px;
  background: var(--pit);
  border: 1px solid var(--edge);
  border-radius: 999px;
}
.mode-tab {
  padding: 6px 14px;
  font: 600 12px/1 var(--body);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ash); background: none; border: 0;
  border-radius: 999px; cursor: pointer;
  transition: color 150ms, background 150ms;
}
.mode-tab:hover { color: var(--bone); }
.mode-tab.is-active { color: var(--bone); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--edge-lit); }

.icon-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  font-size: 15px; color: var(--ash);
  background: var(--pit); border: 1px solid var(--edge);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color 150ms, color 150ms;
}
.icon-btn:hover { color: var(--bone); border-color: var(--blood); }

/* The mute button swaps glyphs off aria-pressed. */
#btn-mute .icon-off { display: none; }
#btn-mute[aria-pressed="true"] .icon-on { display: none; }
#btn-mute[aria-pressed="true"] .icon-off { display: inline; }
#btn-mute[aria-pressed="true"] { color: var(--dim); }

/* ── Layout ─────────────────────────────────────────────────── */

main {
  position: relative; z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 36px) clamp(14px, 4vw, 24px) 60px;
}

.daily-banner {
  margin: 0 0 20px;
  padding: 10px 16px;
  font-size: 13px; color: var(--ash); text-align: center;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--blood);
  border-radius: var(--radius);
}
.daily-banner strong { color: var(--bone); letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; }
#daily-date { color: var(--dim); }

/* ── Wheel ──────────────────────────────────────────────────── */

.wheel-stage { position: relative; display: grid; justify-items: center; }

.wheel-glow {
  position: absolute; top: -6%; left: 50%;
  width: min(560px, 96vw); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--blood-glow), transparent 62%);
  filter: blur(30px); opacity: 0.5;
  animation: breathe 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: 0.32; transform: translateX(-50%) scale(0.97); }
  50%      { opacity: 0.6;  transform: translateX(-50%) scale(1.03); }
}
/* Overrides `breathe` for its duration, then hands back to it on removal. */
.wheel-glow.is-bloom { animation: bloom 760ms ease-out; }
@keyframes bloom {
  0%   { opacity: 1;    transform: translateX(-50%) scale(1.22); }
  100% { opacity: 0.42; transform: translateX(-50%) scale(1); }
}

.wheel-wrap {
  position: relative;
  width: min(430px, 88vw); aspect-ratio: 1;
}

.wheel { width: 100%; height: 100%; display: block; overflow: visible; }

/* The spin is driven from JS in phases (wind-up, spin, settle), so the
   transition is set inline per phase rather than declared here. */
.wheel-spin {
  transform-origin: 0 0;
  transform: rotate(0deg);
}
.wheel-spin.is-spinning { will-change: transform, filter; }

.wheel-rim { fill: none; stroke: var(--edge-lit); stroke-width: 2; }

.seg { stroke: var(--void); stroke-width: 0.6; transition: fill 200ms; }
/* Alternating fills are both near-black, but separated enough that one name
   reads as distinct from its neighbour rather than as one ring of noise. */
.seg-a { fill: #191921; }
.seg-b { fill: #0b0b0f; }
.seg.is-winner { fill: #2a0d10; }

/* Labels run radially: their length lies along the radius (plenty spare) and
   their height is what eats the narrow tangential gap between segments. A
   condensed face would save the dimension we don't need and cost legibility,
   so these use the readable body sans. Size is set on the group by renderWheel,
   scaled to the segment count. */
.seg-label {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0.01em;
  fill: #d2cec6;
  pointer-events: none;
}
.seg-label.is-winner { fill: #fff; font-weight: 700; }

/* Labels wash out as the wheel picks up speed — the JS spin loop sets
   --label-fade from the real frame-to-frame angular velocity. */
.seg-label { opacity: var(--label-fade, 1); }

/* The landed segment glows hot for a moment, then cools to its resting red. */
.seg.is-flash { animation: seg-flash 720ms ease-out; }
@keyframes seg-flash {
  0%   { fill: #8d2027; }
  40%  { fill: #4d1319; }
  100% { fill: #2a0d10; }
}

/* A ring thrown off the rim when the wheel stops. Sits outside the spinning
   group so it doesn't inherit the rotation. */
.wheel-shock {
  fill: none; stroke: var(--blood-lit); stroke-width: 2;
  opacity: 0; transform-origin: 0 0; pointer-events: none;
}
.wheel-shock.is-burst { animation: shock 640ms cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes shock {
  0%   { opacity: 0.9; transform: scale(0.93); stroke-width: 3.5; }
  100% { opacity: 0;   transform: scale(1.26); stroke-width: 0.4; }
}

/* The one fixed thing on screen: the pointer bites down from the top. */
.wheel-pointer {
  position: absolute; top: -6px; left: 50%;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 22px solid var(--blood-lit);
  filter: drop-shadow(0 0 6px var(--blood-glow));
  z-index: 2;
  transform-origin: 50% 20%;
}
/* Kicked aside by each segment passing under it, like a real wheel's flapper. */
.wheel-pointer.is-struck { animation: pointer-strike 150ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes pointer-strike {
  0%   { transform: translateX(-50%) rotate(0deg); }
  30%  { transform: translateX(-50%) rotate(13deg) translateY(2px); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

.wheel-hub {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 27%; aspect-ratio: 1;
  display: grid; place-items: center;
  color: var(--bone);
  background: radial-gradient(circle at 50% 35%, var(--panel-2), var(--void));
  border: 1px solid var(--edge-lit);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 180ms, box-shadow 180ms;
}
.wheel-hub:hover:not(:disabled) {
  border-color: var(--blood);
  box-shadow: 0 0 22px rgba(225, 29, 38, 0.25);
  animation: flicker 1.4s steps(2) infinite;
}
.wheel-hub:disabled { cursor: wait; opacity: 0.65; }
.hub-label {
  font-family: var(--display);
  font-size: clamp(13px, 3.4vw, 17px);
  font-weight: 700; letter-spacing: 0.14em;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.82; }
  70%      { opacity: 1; }
}

/* ── Result readout ─────────────────────────────────────────── */

.result { width: min(100%, 460px); margin-top: 22px; text-align: center; }

.result-killer {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}

.result-killer-icon {
  width: 46px; height: 46px; flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

.result-killer-text { flex: 1; min-width: 0; text-align: left; }

.result-label {
  margin: 0;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim);
}

.result-name {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--bone);
}

.result-map {
  margin: 10px 0 0; font-size: 13px; color: var(--ash);
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
}
.result-map .result-label { display: inline; }

.lock-btn {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 13px;
  background: var(--pit); color: var(--dim);
  border: 1px solid var(--edge); border-radius: 8px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.lock-btn:hover { color: var(--bone); border-color: var(--edge-lit); }
.lock-btn .lock-shut { display: none; }
.lock-btn[aria-pressed="true"] { color: var(--blood-lit); border-color: var(--blood); }
.lock-btn[aria-pressed="true"] .lock-open { display: none; }
.lock-btn[aria-pressed="true"] .lock-shut { display: inline; }

/* ── Controls ───────────────────────────────────────────────── */

.controls { display: grid; justify-items: center; gap: 16px; margin: 30px 0 26px; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.chip {
  padding: 7px 14px;
  font: 500 12px/1 var(--body);
  letter-spacing: 0.04em;
  color: var(--ash);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms, background 150ms;
}
.chip:hover { color: var(--bone); border-color: var(--edge-lit); }
.chip.is-active { color: var(--bone); border-color: var(--blood); background: rgba(179, 18, 26, 0.12); }

.roll-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 42px;
  font-family: var(--display);
  font-size: 21px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(180deg, var(--blood-lit), var(--blood));
  border: 0; border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset, 0 8px 26px rgba(179, 18, 26, 0.28);
  transition: filter 150ms, transform 100ms, box-shadow 150ms;
}
.roll-btn:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 10px 34px rgba(179, 18, 26, 0.42); }
.roll-btn:active:not(:disabled) { transform: translateY(1px); }
.roll-btn:disabled { filter: grayscale(0.7) brightness(0.6); cursor: wait; }
.roll-btn.small { padding: 10px 20px; font-size: 15px; letter-spacing: 0.1em; }

/* Daily mode: today's build is fixed, so the controls that would change it are
   switched off rather than silently ignored. */
.chip:disabled, .reel-tools button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.chip:disabled:hover { color: var(--ash); border-color: var(--edge); }
.reel-tools button:disabled:hover { color: var(--dim); border-color: transparent; }
body.is-daily .wheel-hub:hover:not(:disabled) { animation: none; }
body.is-daily .roll-btn:disabled {
  background: var(--panel);
  color: var(--ash);
  box-shadow: inset 0 0 0 1px var(--edge-lit);
  filter: none;
  cursor: default;
}

.roll-btn-key {
  padding: 3px 7px;
  font: 500 10px/1 var(--body); letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 5px;
}

.pool-note { margin: 0; font-size: 12px; color: var(--dim); text-align: center; min-height: 1.2em; }

/* ── Perk reels ─────────────────────────────────────────────── */

.reel-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.reel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 220ms, box-shadow 220ms;
}
.reel.is-landed { border-color: rgba(179, 18, 26, 0.55); box-shadow: 0 0 20px rgba(179, 18, 26, 0.16); }

/* ── The landing beat ────────────────────────────────────────
   The reel punches out a step, throws a ring of light, and drops back. Lifted
   above its neighbours for the moment it's scaled so it can't be clipped.  */
.reel.is-struck { z-index: 3; animation: reel-pulse 620ms cubic-bezier(0.22, 0.8, 0.3, 1); }
@keyframes reel-pulse {
  0% {
    transform: scale(1);
    border-color: var(--blood-lit);
    box-shadow: 0 0 0 0 rgba(225, 29, 38, 0.5), 0 0 38px rgba(225, 29, 38, 0.55);
  }
  38% { transform: scale(1.05); }
  100% {
    transform: scale(1);
    border-color: rgba(179, 18, 26, 0.55);
    box-shadow: 0 0 0 16px rgba(225, 29, 38, 0), 0 0 20px rgba(179, 18, 26, 0.16);
  }
}

/* The icon snaps in from slightly small, with a flare that cools off. */
.reel.is-struck .perk-icon { animation: icon-punch 620ms cubic-bezier(0.22, 0.9, 0.3, 1); }
@keyframes icon-punch {
  0%   { transform: scale(0.8);  filter: drop-shadow(0 0 16px rgba(225, 29, 38, 0.95)); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1);    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.9)); }
}

.reel.is-struck .perk-name { animation: name-flare 620ms ease-out; }
@keyframes name-flare {
  0%   { color: #fff; text-shadow: 0 0 14px rgba(225, 29, 38, 0.85); }
  100% { color: var(--bone); text-shadow: none; }
}

/* A band of light running down the reel while it's cycling. */
.reel-window::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(225, 29, 38, 0.13), transparent);
}
.reel.is-rolling .reel-window::before { opacity: 1; animation: reel-sweep 480ms linear infinite; }
@keyframes reel-sweep {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.reel.is-rolling { border-color: rgba(179, 18, 26, 0.32); }

/* The strip scrolls inside a fixed-height window to fake a slot reel. */
.reel-window { height: 190px; overflow: hidden; position: relative; }
.reel-window::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--void), transparent 18%, transparent 82%, var(--void));
  opacity: 0.85;
}

/* Blur is set inline and eased to zero alongside the travel, so it thins out as
   the reel slows instead of strobing at a fixed rate. */
.reel-strip { display: flex; flex-direction: column; will-change: transform, filter; }

.reel-cell {
  height: 190px; flex: none;
  display: grid; align-content: center; justify-items: center; gap: 8px;
  padding: 14px 12px; text-align: center;
}

.perk-icon {
  width: 62px; height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.9));
}

.perk-name {
  margin: 0;
  font-family: var(--display);
  font-size: 15px; font-weight: 700; line-height: 1.1;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--bone);
}

.perk-desc {
  margin: 0;
  font-size: 11px; line-height: 1.35;
  color: var(--ash);
}

.perk-source { margin: 0; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }

.reel-tools {
  display: flex; gap: 6px; justify-content: center;
  padding: 8px; border-top: 1px solid var(--edge);
  background: var(--pit);
}
.reel-tools button {
  width: 30px; height: 28px;
  display: grid; place-items: center;
  font-size: 12px; color: var(--dim);
  background: none; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.reel-tools button:hover { color: var(--bone); border-color: var(--edge-lit); }
.reel-tools .lock-btn { width: 30px; height: 28px; background: none; border-color: transparent; }
.reel-tools .lock-btn[aria-pressed="true"] { border-color: var(--blood); }

/* ── Post-roll row, history ─────────────────────────────────── */

.postroll { display: flex; justify-content: center; gap: 10px; margin: 22px 0 0; }

.ghost-btn {
  padding: 9px 18px;
  font: 500 12px/1 var(--body);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ash); text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--edge); border-radius: var(--radius);
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.ghost-btn:hover:not(:disabled) { color: var(--bone); border-color: var(--edge-lit); }
.ghost-btn:disabled { opacity: 0.4; cursor: default; }
.ghost-btn.wide { width: 100%; text-align: center; }

.history {
  margin-top: 18px; padding: 16px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius);
}
.history-list { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 8px; }
.history-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding-bottom: 8px; font-size: 12px;
  border-bottom: 1px solid var(--edge);
}
.history-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.history-killer { font-family: var(--display); font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--bone); }
.history-perks { color: var(--ash); }
.history-time { margin-left: auto; color: var(--dim); font-size: 11px; }

.drawer-title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone);
}

.muted { color: var(--dim); font-size: 12px; margin: 0; }

/* ── Settings drawer ────────────────────────────────────────── */

.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.65); }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 50;
  width: min(400px, 92vw); height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--pit);
  border-left: 1px solid var(--edge);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7);
  animation: slide-in 220ms ease-out;
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--edge);
}
.drawer-head .drawer-title { margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 18px; align-content: start; }

.field { margin: 0; padding: 0; border: 0; }
.field > legend, .field > summary {
  padding: 0 0 10px;
  font: 600 11px/1 var(--body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim);
}
.field > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.field > summary::-webkit-details-marker { display: none; }
.field > summary::before { content: '▸'; color: var(--blood); transition: transform 150ms; }
.filter-group[open] > summary::before { transform: rotate(90deg); }
.count { margin-left: auto; color: var(--dim); letter-spacing: 0.04em; }

.radio, .switch {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 8px;
  cursor: pointer; font-size: 13px;
}
.radio:hover, .switch:hover { border-color: var(--edge-lit); }
.radio input, .switch input { margin-top: 2px; accent-color: var(--blood-lit); }
.radio strong, .switch strong { display: block; color: var(--bone); font-weight: 600; }
.radio em, .switch em { display: block; font-style: normal; font-size: 11px; color: var(--dim); }

.filter-actions { display: flex; gap: 6px; margin-bottom: 8px; }
.mini-btn {
  padding: 5px 10px; font: 500 11px/1 var(--body);
  color: var(--ash); background: var(--panel);
  border: 1px solid var(--edge); border-radius: 6px; cursor: pointer;
}
.mini-btn:hover { color: var(--bone); border-color: var(--edge-lit); }

.search {
  width: 100%; padding: 8px 10px; margin-bottom: 8px;
  font: 400 13px/1.3 var(--body); color: var(--bone);
  background: var(--panel); border: 1px solid var(--edge); border-radius: 6px;
}
.search:focus { outline: none; border-color: var(--blood); }

.checklist { max-height: 260px; overflow-y: auto; display: grid; gap: 2px; padding-right: 4px; }
.check {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; font-size: 13px; color: var(--ash);
  border-radius: 6px; cursor: pointer;
}
.check:hover { background: var(--panel); color: var(--bone); }
.check input { accent-color: var(--blood-lit); }
.check.is-off { color: var(--dim); text-decoration: line-through; }

/* ── Build showcase ─────────────────────────────────────────── */

.section-title {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: clamp(22px, 4vw, 30px); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bone);
}
.section-title.small { font-size: 17px; letter-spacing: 0.1em; }
.section-sub { margin: 0 0 22px; font-size: 13px; color: var(--dim); }

.builder-card {
  display: grid; gap: 12px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}

.builder-killer {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 12px 14px; text-align: left;
  background: var(--pit);
  border: 1px solid var(--edge); border-radius: 8px;
  cursor: pointer;
  transition: border-color 150ms;
}
.builder-killer:hover { border-color: var(--blood); }
.builder-killer-text { flex: 1; min-width: 0; }
.builder-killer-text .result-label,
.builder-killer-text .result-name { display: block; }
.builder-killer-text .result-name { font-size: clamp(19px, 4vw, 26px); }
.builder-edit {
  flex: none; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim);
}

.builder-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.builder-slot {
  display: grid; align-content: start; justify-items: center; gap: 7px;
  min-height: 150px; padding: 14px 10px; text-align: center;
  background: var(--pit);
  border: 1px dashed var(--edge); border-radius: 8px;
  cursor: pointer;
  transition: border-color 150ms;
}
.builder-slot:hover { border-color: var(--blood); }
.builder-slot.is-filled { border-style: solid; }
.builder-slot .perk-icon { width: 52px; height: 52px; }
.builder-slot .perk-name { font-size: 13px; }
.builder-slot .slot-empty { font-size: 12px; color: var(--dim); align-self: center; }

.builder-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.builder-status { min-height: 1.3em; margin-top: 10px; }

.saved-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.saved-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 8px;
}
.saved-name { font-family: var(--display); font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--bone); }
.saved-meta { flex: 1; min-width: 0; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-actions { display: flex; gap: 6px; flex: none; }

/* ── Picker ─────────────────────────────────────────────────── */

.picker {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, 0.82);
}
.picker-inner {
  display: flex; flex-direction: column;
  width: min(520px, 100%); max-height: min(640px, 86dvh);
  padding: 18px;
  background: var(--panel); border: 1px solid var(--edge-lit); border-radius: var(--radius);
}
.picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.picker-head .section-title { margin: 0; }
.picker-list { flex: 1; overflow-y: auto; display: grid; gap: 4px; }
.picker-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 8px 10px; text-align: left;
  background: none; color: var(--ash);
  border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; font: inherit;
}
.picker-option:hover { background: var(--pit); color: var(--bone); border-color: var(--edge); }
.picker-option img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.picker-option strong { display: block; font-weight: 600; color: var(--bone); font-size: 14px; }
.picker-option em { display: block; font-style: normal; font-size: 11px; color: var(--dim); }
.picker-empty { padding: 20px; text-align: center; color: var(--dim); font-size: 13px; }

/* ── Browsing the database ──────────────────────────────────── */

/* Sits under the topbar controls, so the content pages are reachable without
   hunting through the footer. */
.browse-nav {
  width: 100%;
  display: flex; justify-content: center; gap: 20px;
  padding-top: 12px; margin-top: 12px;
  border-top: 1px solid var(--edge);
}
.browse-nav a {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  transition: color 150ms;
}
.browse-nav a:hover { color: var(--blood-lit); }

.browse-band {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 44px;
}
.browse-band a {
  padding: 16px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--edge);
  border-radius: var(--radius);
  transition: border-color 150ms, background 150ms;
}
.browse-band a:hover { border-color: var(--blood); background: var(--panel-2); }
.browse-band strong {
  display: block; margin-bottom: 4px;
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone);
}
.browse-band em { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--ash); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 32px; }
.pager a { text-decoration: none; }

/* ── Generated content pages ────────────────────────────────── */

.doc {
  position: relative; z-index: 2;
  max-width: 860px; margin: 0 auto;
  padding: 32px clamp(16px, 5vw, 24px) 70px;
}
.doc p { color: var(--ash); }
.doc h2 { margin: 34px 0 12px; }
.doc a { color: var(--bone); }

.wordmark-link { text-decoration: none; }

.crumbs { font-size: 12px; color: var(--dim); margin: 0 0 18px; }
.crumbs a { color: var(--ash); text-decoration: none; }
.crumbs a:hover { color: var(--blood-lit); }

.entry-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 20px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--edge);
  border-left: 2px solid var(--blood); border-radius: var(--radius);
}
.entry-hero img { width: 96px; height: 96px; flex: none; object-fit: contain; }
.entry-hero .section-title { margin: 2px 0 6px; }
.lede { margin: 0; font-size: 16px; color: var(--bone) !important; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag {
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ash); background: var(--pit); border: 1px solid var(--edge);
}
.tag-meta { color: var(--bone); border-color: var(--blood); }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0; }
.cta-row .roll-btn, .cta-row .ghost-btn { text-decoration: none; }

.entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.entry {
  display: flex; align-items: center; gap: 13px;
  padding: 12px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 8px;
  transition: border-color 150ms, background 150ms;
}
.entry:hover { border-color: var(--blood); background: var(--panel-2); }
.entry img { width: 48px; height: 48px; flex: none; object-fit: contain; }
.entry-text { min-width: 0; }
.entry-text strong {
  display: block;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--bone);
}
.entry-text em { display: block; font-style: normal; font-size: 12px; line-height: 1.35; color: var(--ash); }
.entry-meta { display: block; margin-top: 3px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }

/* ── Ads ────────────────────────────────────────────────────── */

.ad-slot { display: block; margin: 44px auto 0; text-align: center; }
.ad-tag { display: block; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #3a3a44; margin-bottom: 6px; }
.ad-box {
  min-height: 90px; max-width: 728px; margin: 0 auto;
  background: var(--pit); border: 1px dashed var(--edge); border-radius: 8px;
}
.ad-rail { margin: 24px 0 0; padding: 16px; border-top: 1px solid var(--edge); }
.ad-rail .ad-box { min-height: 250px; }

/* ── Side rails ──────────────────────────────────────────────
   Hidden by default at every width. They only appear once the viewport can
   hold them outside the 980px content column, so they can never crowd the
   wheel, the reels or the roll button — accidental clicks next to ads get
   accounts penalised. Width needed = 980 + 2 x (rail + 24px gutter).      */
.ad-rail-side {
  --rail-w: 160px;
  display: none;
  /* Absolute, not fixed: anchored to the page so they scroll away with the
     content instead of following the viewport down the page. */
  position: absolute;
  top: 128px; /* clears the full-width topbar */
  z-index: 1; /* below the drawer (50) and consent (60) */
  width: var(--rail-w);
  margin: 0;
}
.ad-rail-side .ad-box { width: var(--rail-w); min-height: 600px; }
.ad-rail-left { left: calc(50% - 490px - 24px - var(--rail-w)); }
.ad-rail-right { right: calc(50% - 490px - 24px - var(--rail-w)); }

/* 980 + 2 x (160 + 24) = 1348 */
@media (min-width: 1360px) {
  .ad-rail-side { display: block; }
}
/* Wide desktops get a half-page unit: 980 + 2 x (300 + 24) = 1628 */
@media (min-width: 1660px) {
  .ad-rail-side { --rail-w: 300px; }
}
/* No height gate needed now that they sit in the page rather than the
   viewport — a tall unit simply scrolls, it can't be clipped. */

/* ── Footer, consent, share ─────────────────────────────────── */

.footer {
  position: relative; z-index: 2;
  padding: 26px 20px 34px;
  text-align: center; font-size: 11px; color: var(--dim);
  border-top: 1px solid var(--edge);
}
.footer p { margin: 4px 0; }
.footer a, .linkish {
  color: var(--ash); text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.footer a:hover, .linkish:hover { color: var(--blood-lit); }

.consent {
  position: fixed; left: 50%; bottom: 16px; z-index: 60;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--edge-lit); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
.consent p { margin: 0 0 14px; font-size: 13px; color: var(--ash); }
.consent-title { margin: 0 0 6px; font-family: var(--display); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.share-preview {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, 0.82);
}
.share-inner {
  width: min(520px, 100%);
  padding: 20px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius);
}
.share-inner img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--edge); }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ── Focus + motion ─────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--blood-lit); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .grain, .wheel-glow, .wheel-hub, .reel-strip { animation: none !important; }
  .wheel-spin.is-spinning { transition-duration: 320ms; }
  html { scroll-behavior: auto; }
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 640px) {
  .reel-row, .builder-perks { grid-template-columns: repeat(2, 1fr); }
  .browse-band { grid-template-columns: 1fr; }
  .browse-nav { gap: 14px; flex-wrap: wrap; }
  .pager { flex-wrap: wrap; justify-content: center; }
  .builder-actions > * { flex: 1 1 100%; text-align: center; }
  .saved-list li { flex-wrap: wrap; }
  .reel-window, .reel-cell { height: 170px; }
  .topbar { justify-content: center; }
  .wordmark { width: 100%; text-align: center; }
  .topbar-actions { width: 100%; justify-content: center; }
  .roll-btn { width: 100%; justify-content: center; padding-inline: 20px; }
  .postroll { flex-direction: column; }
  .consent { bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
}