/* site.css — Snakeoff's Quest on the web.
   Every color here is lifted from the game's own src/data/palette.js and
   src/loot.js. If the game repaints, these values are the ones to re-copy;
   nothing is eyeballed. Layout sits on a 4px unit, the same pixel unit the
   game draws on. No framework, no build step — the game has zero
   dependencies and the site keeps that promise. */

:root {
  /* TITLE_SKY — the title screen's twilight bands, in order */
  --sky-0: #2e3a5c; --sky-1: #4a4470; --sky-2: #8a5e74; --sky-3: #c9705e;
  --sky-4: #e8875e; --sky-5: #f5b97a; --sky-6: #f5d9a0;

  /* UI (palette.js) */
  --ink: #0d0d12;          /* the game's own background */
  --panel: #101018;        /* the compendium's background */
  --panel-2: #161622;
  --text: #f2ead6;
  --dim: #8f8873;
  --gold: #ffd75e;
  --edge: rgba(232, 224, 200, 0.16);
  --edge-hot: rgba(232, 224, 200, 0.38);

  /* RARITIES (loot.js) */
  --crude: #9a9a9a; --common: #f2f2f2; --uncommon: #5dc25a;
  --rare: #5a8fd9; --epic: #b06ad9; --legendary: #f0a63c;

  /* the five depths — each tier's accent, from dungeon.js TIERS[].palette */
  --t1: #b9d97a; --t2: #e86a3a; --t3: #6ad9d1; --t4: #d9d0b8; --t5: #f0d94e;

  /* elements */
  --fire: #e8703a; --frost: #8fd0e8; --shock: #f0d94e; --phys: #d9d0c0;

  /* 4px unit */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px;

  /* The game runs 10px monospace. That is a UI face — superb on a stat row,
     punishing across a paragraph. So: mono for labels, numbers, item names,
     anything the game itself would render. A serif for actual reading. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --prose: Iowan Old Style, Palatino, Georgia, "Times New Roman", serif;

  --wide: 1080px;
  --read: 660px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--prose);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration-color: rgba(255, 215, 94, 0.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }

/* ---------- the twilight band, reused as furniture ---------- */
/* Seven bands, same order and same colors as the title screen's sky. */
.bands { display: flex; height: var(--s1); width: 100%; }
.bands > i { flex: 1; }
.bands > i:nth-child(1) { background: var(--sky-0); }
.bands > i:nth-child(2) { background: var(--sky-1); }
.bands > i:nth-child(3) { background: var(--sky-2); }
.bands > i:nth-child(4) { background: var(--sky-3); }
.bands > i:nth-child(5) { background: var(--sky-4); }
.bands > i:nth-child(6) { background: var(--sky-5); }
.bands > i:nth-child(7) { background: var(--sky-6); }

/* ---------- chrome ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 13, 18, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge);
}
.topbar-in {
  max-width: var(--wide); margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex; align-items: center; gap: var(--s5);
  font-family: var(--mono); font-size: 13px;
}
.brand { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: 0.02em; }
.brand:hover { color: var(--gold); }
.topbar nav { margin-left: auto; display: flex; gap: var(--s5); flex-wrap: wrap; }
.topbar nav a { color: var(--dim); text-decoration: none; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--gold); }

footer {
  border-top: 1px solid var(--edge);
  margin-top: var(--s24);
  padding: var(--s8) var(--s5) var(--s12);
  font-family: var(--mono); font-size: 12px; color: var(--dim);
}
footer .foot-in { max-width: var(--wide); margin: 0 auto; display: flex; gap: var(--s6); flex-wrap: wrap; align-items: baseline; }
footer nav { display: flex; gap: var(--s5); flex-wrap: wrap; margin-left: auto; }
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--gold); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--mono); line-height: 1.2; letter-spacing: 0.01em; }
h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 var(--s4); }
h2 { font-size: 22px; margin: var(--s16) 0 var(--s4); color: var(--gold); }
h3 { font-size: 15px; margin: var(--s8) 0 var(--s2); }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 var(--s3);
}
.lede { font-size: 20px; color: var(--text); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s5); }
.read { max-width: var(--read); margin: 0 auto; padding: 0 var(--s5); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  padding: var(--s3) var(--s6);
  border: 2px solid var(--edge-hot); background: transparent; color: var(--text);
  text-decoration: none; cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, transform 80ms;
}
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn-play { background: var(--gold); border-color: var(--gold); color: #1a1408; font-size: 16px; padding: var(--s4) var(--s8); }
.btn-play:hover { background: var(--sky-6); border-color: var(--sky-6); color: #1a1408; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:disabled:hover { border-color: var(--edge-hot); color: var(--text); }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--edge); padding: var(--s5); }

/* ---------- prose pages (privacy / support) ---------- */
.doc { padding: var(--s12) 0 0; }
.doc h1 { font-size: clamp(24px, 4vw, 34px); }
.doc h2 { font-size: 17px; color: var(--gold); margin-top: var(--s10); }
.doc p, .doc li { color: #ded6c2; }
.doc ul { padding-left: var(--s5); }
.doc li { margin-bottom: var(--s2); }
.doc .stamp { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.doc strong { color: var(--text); }
.callout {
  border-left: 3px solid var(--gold);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  margin: var(--s6) 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar-in { gap: var(--s4); font-size: 12px; }
  .topbar nav { gap: var(--s4); }
}

/* ================================================================== *
 * THE COMPENDIUM
 * ================================================================== */

.book { background: var(--panel); }

.section { padding-top: var(--s10); scroll-margin-top: 108px; }
.section-note { max-width: var(--read); color: #cfc6b2; }
.section-note.small { font-size: 14px; color: var(--dim); }

/* ---- hero: the gold plate as the book's cover ---- */
.book-hero {
  max-width: var(--wide); margin: 0 auto;
  padding: var(--s12) var(--s5) var(--s8);
  display: grid; grid-template-columns: 236px 1fr; gap: var(--s10); align-items: center;
}
.book-plate {
  width: 100%; border: 1px solid rgba(240, 166, 60, 0.45);
  box-shadow: 0 0 0 var(--s1) rgba(13, 13, 18, 0.9), 0 var(--s4) var(--s12) rgba(0, 0, 0, 0.6);
  image-rendering: auto;
}
.book-hero-text h1 { font-size: clamp(30px, 5vw, 48px); }

/* ---- sticky section nav ---- */
.subnav {
  position: sticky; top: 45px; z-index: 40;
  background: rgba(16, 16, 24, 0.95); backdrop-filter: blur(8px);
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
}
.subnav-in {
  max-width: var(--wide); margin: 0 auto; padding: var(--s2) var(--s5);
  display: flex; gap: var(--s6); font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.subnav a { color: var(--dim); text-decoration: none; padding: var(--s2) 0; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--text); }
.subnav a.on { color: var(--gold); border-bottom-color: var(--gold); }

/* ---- the five depths ---- */
.depth { margin-top: var(--s12); }
.depth-head {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s3); margin-bottom: var(--s6);
  border-bottom: 2px solid var(--tier);
}
.depth-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tier); }
.depth-name { font-family: var(--mono); font-size: 24px; margin: 0; color: var(--text); }
.depth-lvl { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-left: auto; }

.mon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); }

/* ---- a monster ---- */
.mon {
  background: var(--ink); border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  padding: var(--s4) var(--s5) var(--s5);
}
.mon-boss { margin-top: var(--s4); border-left-width: var(--s1); background: linear-gradient(180deg, rgba(255,215,94,0.05), transparent 40%); }
.mon-head { display: flex; gap: var(--s4); align-items: flex-start; }
.mon-head .sprite { flex: none; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--edge); }
.mon-id { min-width: 0; }
.mon-name { font-size: 17px; margin: 0 0 var(--s2); color: var(--text); }
.mon-boss .mon-name { color: var(--gold); font-size: 21px; }
.mon-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.mon-lvl { font-family: var(--mono); font-size: 12px; color: var(--dim); margin: var(--s2) 0 0; }
.gimmick { font-family: var(--mono); font-size: 13px; color: var(--gold); margin: var(--s3) 0 0; }

.tag {
  font-family: var(--mono); font-size: 10.5px; font-style: normal;
  letter-spacing: 0.04em; padding: 1px var(--s2);
  border: 1px solid currentColor; color: var(--dim); white-space: nowrap;
}
.el-fire { color: var(--fire); } .el-frost { color: var(--frost); }
.el-shock { color: var(--shock); } .el-physical { color: var(--phys); }
.tag.weak { color: #ff9a8f; } .tag.resist { color: #8fb4d9; }
.tag.status { color: #c9a0ea; } .tag.dmg { color: var(--dim); }
.tag.tell-tag { color: var(--gold); }
.tag.epicplus { color: var(--epic); } .tag.rareplus { color: var(--rare); } .tag.wand { color: var(--frost); }

/* ---- stat bars: the archetype at a glance ---- */
.bars { margin: var(--s4) 0 0; display: grid; gap: 3px; }
.bar-row { display: grid; grid-template-columns: 34px 1fr 44px; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 11px; }
.bar-label { color: var(--dim); }
.bar-track { height: var(--s2); background: rgba(255, 255, 255, 0.07); display: block; }
.bar-fill { display: block; height: 100%; background: var(--accent); }
.bar-val { color: var(--dim); text-align: right; }

/* ---- moves ---- */
.mini-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim); margin: var(--s5) 0 var(--s2);
}
.moves { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.move { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 12.5px; }
.move-name { color: var(--text); }
.move-tags { display: inline-flex; flex-wrap: wrap; gap: var(--s1); margin-left: auto; }
.move.tell { font-family: var(--prose); font-style: italic; font-size: 14px; color: var(--gold); opacity: 0.85; padding: var(--s1) 0 var(--s1) var(--s3); border-left: 1px solid rgba(255, 215, 94, 0.35); }
.special { font-size: 14px; color: #cfc6b2; margin: var(--s4) 0 0; }
.special strong { color: var(--text); font-family: var(--mono); font-size: 12.5px; }

/* ================================================================== *
 * THE WAGER
 * ================================================================== */

.stage {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s6);
  align-items: center;
  background: var(--ink); border: 1px solid var(--edge);
  border-top: 3px solid var(--legendary);
  padding: var(--s6); margin: var(--s6) 0 var(--s8);
}
.stage-frame {
  width: 144px; height: 144px; flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(240, 166, 60, 0.10), transparent 68%), #08080c;
  border: 1px solid var(--edge);
  position: relative; overflow: hidden;
}
.stage-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 var(--s8) rgba(0, 0, 0, 0.85);
}
.reel { display: grid; place-items: center; }
.stage.is-spinning .stage-frame { border-color: rgba(240, 166, 60, 0.55); }
.stage.is-spinning .reel { filter: blur(0.4px) brightness(1.15); }
.stage.is-won .stage-frame { border-color: var(--legendary); animation: won-flash 1.4s ease-out; }
.stage.is-won .reel { animation: won-pop 420ms cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes won-flash {
  0% { box-shadow: 0 0 0 0 rgba(240, 166, 60, 0.9); background-color: rgba(240, 166, 60, 0.22); }
  100% { box-shadow: 0 0 0 var(--s6) rgba(240, 166, 60, 0); background-color: transparent; }
}
@keyframes won-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.stage-read { min-width: 0; }
.stage-name { font-family: var(--mono); font-size: 20px; color: var(--legendary); margin: 0; min-height: 28px; }
.stage-effect { font-size: 16px; color: var(--text); margin: var(--s2) 0 0; min-height: 24px; }
.stage.is-won .stage-effect { animation: fade-up 500ms ease-out; }
@keyframes fade-up { from { opacity: 0; transform: translateY(var(--s2)); } to { opacity: 1; transform: none; } }

.stage-controls { text-align: right; }
.stage-count { font-family: var(--mono); font-size: 12px; color: var(--dim); margin: var(--s3) 0 0; }
.stage-minor { display: flex; gap: var(--s4); justify-content: flex-end; margin-top: var(--s1); }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--gold); }
.reel-seal {
  width: 96px; height: 96px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 40px; color: rgba(143, 136, 115, 0.7);
  border: 1px dashed rgba(143, 136, 115, 0.4);
}

/* ---- the eleven cards ---- */
.leg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); gap: var(--s3); }
.leg { position: relative; min-height: 108px; perspective: 900px; }
.leg-face, .leg-back {
  position: absolute; inset: 0;
  display: flex; gap: var(--s4); align-items: center;
  padding: var(--s4);
  border: 1px solid var(--edge); background: var(--ink);
  backface-visibility: hidden;
  transition: transform 620ms cubic-bezier(0.3, 0.9, 0.3, 1);
}
.leg-back { transform: rotateY(0deg); }
.leg-face { transform: rotateY(180deg); border-color: rgba(240, 166, 60, 0.5); background: linear-gradient(135deg, rgba(240, 166, 60, 0.09), transparent 55%), var(--ink); }
.leg.is-revealed .leg-back { transform: rotateY(-180deg); }
.leg.is-revealed .leg-face { transform: rotateY(0deg); }

.leg-seal {
  width: 64px; height: 64px; flex: none; display: grid; place-items: center;
  font-family: var(--mono); font-size: 28px; color: var(--dim);
  border: 1px dashed rgba(143, 136, 115, 0.5); background: rgba(0, 0, 0, 0.3);
}
.leg-art { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(240, 166, 60, 0.3); }
.leg-body { min-width: 0; }
.leg-name { font-family: var(--mono); font-size: 15px; margin: 0; color: var(--legendary); }
.leg-name.dim { color: var(--dim); letter-spacing: -0.05em; }
.leg-slot { font-family: var(--mono); font-size: 11px; color: var(--dim); margin: 2px 0 var(--s2); text-transform: capitalize; }
.leg-effect { font-size: 14px; margin: 0; color: var(--text); }
.leg-effect.dim { color: var(--dim); font-style: italic; }
.leg.just-won .leg-face { animation: card-glow 2.2s ease-out; }
@keyframes card-glow {
  0% { box-shadow: 0 0 0 0 rgba(240, 166, 60, 0.85); border-color: var(--legendary); }
  100% { box-shadow: 0 0 0 var(--s5) rgba(240, 166, 60, 0); }
}

/* ================================================================== *
 * AFFIXES
 * ================================================================== */

.rarity-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); margin: var(--s6) 0 var(--s8); }
.rar { border: 1px solid var(--edge); border-top: 3px solid var(--rar); background: var(--ink); padding: var(--s3) var(--s4); display: grid; gap: 2px; }
.rar-name { font-family: var(--mono); font-size: 14px; color: var(--rar); }
.rar-aff, .rar-weight, .rar-worth { font-family: var(--mono); font-size: 11px; color: var(--dim); }

.ilvl-control { background: var(--ink); border: 1px solid var(--edge); padding: var(--s5); margin-bottom: var(--s6); }
.ilvl-control label { font-family: var(--mono); font-size: 13px; color: var(--dim); display: block; margin-bottom: var(--s2); }
.ilvl-out { color: var(--gold); font-size: 20px; }
.ilvl-control input[type="range"] { width: 100%; accent-color: var(--gold); }
.ilvl-note { font-size: 13px; color: var(--dim); margin: var(--s2) 0 0; }

.table-scroll { overflow-x: auto; }
.affix-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.affix-table th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim); font-weight: 400;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--edge-hot);
}
.affix-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid rgba(232, 224, 200, 0.08); vertical-align: middle; }
.affix-table tr:hover td { background: rgba(255, 215, 94, 0.04); }
.af-name { font-family: var(--mono); color: var(--text); }
.af-name .tag { margin-left: var(--s2); }
.af-suffix { font-style: italic; color: var(--gold); white-space: nowrap; }
.slots { display: inline-flex; gap: 3px; }
.slot {
  width: 19px; height: 19px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-style: normal;
  background: var(--uncommon); color: #0d0d12;
}
.slot.off { background: none; border: 1px solid rgba(143, 136, 115, 0.35); color: rgba(143, 136, 115, 0.5); }

@media (max-width: 860px) {
  .book-hero { grid-template-columns: 1fr; gap: var(--s6); }
  .book-plate { max-width: 220px; }
  .stage { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .stage-controls { text-align: center; }
  .stage-minor { justify-content: center; }
}
@media (max-width: 640px) {
  .subnav-in { gap: var(--s4); }
  .mon-grid, .leg-grid { grid-template-columns: 1fr; }
  .move-tags { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .leg-face, .leg-back { transition: none; }
  * { animation-duration: 0.01ms !important; }
}

/* the section already carries the space; the heading should not double it */
.section > h2:first-child { margin-top: 0; }

/* the boss card is wide; its bars should not stretch to the far edge */
.mon-boss .bars { max-width: 520px; }
.mon-boss .moves, .mon-boss .mini-head { max-width: 520px; }

/* ================================================================== *
 * HOME
 * ================================================================== */

.hero { max-width: 860px; margin: 0 auto; padding: var(--s10) var(--s5) var(--s8); text-align: center; }
.hero-art {
  width: 100%; border: 1px solid var(--edge);
  box-shadow: 0 var(--s4) var(--s16) rgba(0, 0, 0, 0.65);
}
.hero-line {
  font-size: clamp(19px, 2.6vw, 25px); line-height: 1.45; color: var(--text);
  max-width: 620px; margin: var(--s8) auto 0;
}
.hero-cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s6); }
.hero-fine { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: var(--s4); }

.pitch { padding-top: var(--s8); }
.pitch p { color: #ded6c2; }
.pitch em { color: var(--gold); font-style: italic; }

/* the five depths, as chips in tier colour */
.depth-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: var(--s2); margin: var(--s5) 0; }
.depth-chip {
  display: block; text-decoration: none; padding: var(--s3) var(--s4);
  background: var(--panel); border: 1px solid var(--edge); border-top: 3px solid var(--chip);
  font-family: var(--mono); font-size: 15px; color: var(--text);
  transition: background 120ms, border-color 120ms;
}
.depth-chip span { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chip); margin-bottom: 2px; }
.depth-chip:hover { background: #14141f; border-color: var(--chip); }
.depth-chip.t1 { --chip: var(--t1); } .depth-chip.t2 { --chip: var(--t2); }
.depth-chip.t3 { --chip: var(--t3); } .depth-chip.t4 { --chip: var(--t4); }
.depth-chip.t5 { --chip: var(--t5); }

/* screenshots */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s5); margin-top: var(--s5); }
.shots figure { margin: 0; }
.shots img { width: 100%; border: 1px solid var(--edge); background: #000; }
.shots figcaption { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-top: var(--s2); line-height: 1.5; }

/* where to play */
.where { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.where-card { background: var(--panel); border: 1px solid var(--edge); padding: var(--s5); }
.where-card.is-live { border-color: rgba(255, 215, 94, 0.45); }
.where-card.is-soon { opacity: 0.72; }
.where-card h3 { margin-top: 0; color: var(--gold); font-size: 16px; }
.where-card p { font-size: 15px; color: #cfc6b2; }
.where-note { font-family: var(--mono); font-size: 12px; color: var(--dim); }

@media (max-width: 640px) {
  .shots { grid-template-columns: 1fr; }
  .hero { padding-top: var(--s6); }
}

/* ================================================================== *
 * THE FITTING ROOM
 * ================================================================== */

.fitting {
  display: grid; grid-template-columns: 336px 1fr; gap: var(--s8);
  align-items: start; margin: var(--s6) 0 var(--s5);
}

.doll-frame {
  width: 336px; height: 336px; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 215, 94, 0.07), transparent 70%),
    #08080c;
  border: 1px solid var(--edge);
}
.doll-canvas { display: block; }
.doll-worn {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  margin: var(--s3) 0 0; line-height: 1.6; min-height: 38px;
}
.doll-controls { display: flex; gap: var(--s4); align-items: center; margin-top: var(--s2); }

.rack { display: grid; gap: var(--s5); }
.rack-row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: var(--s4);
  align-items: center;
  padding-bottom: var(--s4); border-bottom: 1px solid rgba(232, 224, 200, 0.08);
}
.rack-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim); margin: 0;
}
.picks { display: flex; gap: var(--s2); flex-wrap: wrap; }
.pick {
  width: 48px; height: 48px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--edge);
  transition: border-color 120ms, background 120ms;
}
.pick:hover { border-color: var(--edge-hot); background: #14141f; }
.pick.on { border-color: var(--gold); background: rgba(255, 215, 94, 0.10); }
.pick-leg { border-color: rgba(240, 166, 60, 0.4); }
.pick-leg.on { border-color: var(--legendary); background: rgba(240, 166, 60, 0.14); }
.pick-none { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.pick-none.on { color: var(--gold); }

.rarity-dots { display: flex; gap: var(--s1); }
.rdot {
  width: 14px; height: 14px; padding: 0; cursor: pointer;
  background: var(--rar); border: 1px solid transparent; opacity: 0.34;
  transition: opacity 120ms, transform 100ms;
}
.rdot:hover { opacity: 0.8; }
.rdot.on { opacity: 1; border-color: var(--text); transform: scale(1.15); }

/* the rarity ladder */
.ladder-head-line { font-size: 15px; color: var(--gold); margin-top: var(--s10); }
.ladder { display: grid; gap: var(--s1); margin-top: var(--s4); max-width: 560px; }
.ladder-row { display: grid; grid-template-columns: 92px repeat(4, 1fr); align-items: center; gap: var(--s2); }
.ladder-name { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.ladder-tier {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rar); text-align: center; padding-bottom: var(--s1);
  border-bottom: 2px solid var(--rar);
}
.ladder-cell {
  display: grid; place-items: center; padding: var(--s2) 0;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(232, 224, 200, 0.08);
}

@media (max-width: 860px) {
  .fitting { grid-template-columns: 1fr; justify-items: center; }
  .rack { width: 100%; }
}
@media (max-width: 640px) {
  .doll-frame { width: 100%; max-width: 300px; height: 300px; }
  .doll-canvas { width: 240px !important; height: 240px !important; }
  .rack-row { grid-template-columns: 1fr; gap: var(--s2); }
  .ladder-row { grid-template-columns: 72px repeat(4, 1fr); }
}
.rarity-dots { align-items: center; }
.rarity-dots-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); margin-right: var(--s2);
}
.doll-canvas { image-rendering: pixelated; }