/* ============================================================================
   TAO Training — design system
   Near-black, gold, white. Modern editorial: hairlines, negative space,
   tight display type, wide-tracked micro labels.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* surfaces ------------------------------------------------------------- */
  --bg:          #08090B;
  --bg-raised:   #0D0F13;
  --bg-elev:     #12151A;
  --bg-hover:    #171B21;

  /* hairlines ------------------------------------------------------------ */
  --line:        rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);
  --line-gold:   rgba(201, 162, 77, .28);

  /* gold ----------------------------------------------------------------- */
  --gold:        #C9A24D;
  --gold-bright: #EBCE86;
  --gold-dim:    #7E663A;
  --gold-glow:   rgba(201, 162, 77, .14);

  /* text ----------------------------------------------------------------- */
  --text:        #F4F4F6;
  --text-dim:    #8B909A;
  --text-faint:  #565B65;

  /* accents for data ----------------------------------------------------- */
  --move:        #4A9EFF;
  --attack:      #FF8C42;
  --danger:      #FF4D4D;
  --ok:          #3FCF8E;

  --radius:      3px;
  --radius-lg:   6px;

  --ease:        cubic-bezier(.22, .61, .36, 1);
  --nav-h:       64px;
  --maxw:        1240px;
}

/* reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /*
   * Sticky footer. mountChrome() lays the body out as nav / main / footer, so
   * a flex column plus `margin-top:auto` on the footer parks it at the bottom
   * of the VIEWPORT whenever the page is shorter than one, instead of riding
   * up under short content. Without this the footer jumps every time a panel
   * changes height -- switching the Play page's sidebar between its settings
   * and thinking faces, for instance.
   *
   * dvh rather than vh so a mobile browser's collapsing URL bar does not leave
   * a strip of background under the footer.
   */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: #0A0A0A; }

/* ambient glow — one soft gold wash at the top of every page ------------ */
body::before {
  content: '';
  position: fixed; inset: 0 0 auto 0; height: 620px;
  background:
    radial-gradient(ellipse 1100px 520px at 50% -150px, rgba(201,162,77,.20), transparent 68%),
    radial-gradient(ellipse 600px 300px at 15% -60px, rgba(201,162,77,.09), transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ============================================================ typography */
.display {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  letter-spacing: -.045em;
  font-weight: 600;
  line-height: 1.02;
}
.h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.035em; }
.h3 { font-size: 1.0625rem; letter-spacing: -.02em; font-weight: 600; }

.label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.lede  { font-size: 1.0625rem; color: var(--text-dim); max-width: 62ch; line-height: 1.65; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.gold  { color: var(--gold); }
.mono  { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; font-size: .8125rem; }

/* section heading with a gold tick ------------------------------------- */
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.eyebrow::before {
  content: ''; width: 18px; height: 1px; background: var(--gold); flex: none;
}

/* ================================================================ layout */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.section { padding: 84px 0; }
.section + .section { border-top: 1px solid var(--line); }
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* =================================================================== nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(8, 9, 11, .72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 40px; }

.brand { display: flex; align-items: baseline; gap: 8px; letter-spacing: -.03em; }
.brand b     { font-weight: 700; font-size: 1rem; }
.brand .mark { color: var(--gold); }
.brand span  {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600;
}

.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  position: relative;
  padding: 8px 14px;
  font-size: .8125rem; font-weight: 500;
  color: var(--text-dim);
  border-radius: var(--radius);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-links a[aria-current] { color: var(--gold); }
.nav-links a[aria-current]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 1px;
  height: 1px; background: var(--gold);
}

/* Hamburger: hidden on wide screens, where the links sit inline. Under
   720px it takes the links' place at the right edge and the links drop
   down under the bar (see the media block below). The three bars fold
   into a cross while the menu is open. */
.nav-toggle {
  display: none; margin-left: auto;
  width: 40px; height: 40px; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: none; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; border-radius: 1px;
  background: var(--text);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================ button */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px;
  font-size: .8438rem; font-weight: 550;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  transition: all .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--line-gold); background: rgba(201,162,77,.06); }
.btn-primary {
  background: var(--gold); border-color: var(--gold); color: #0A0A0A; font-weight: 600;
}
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
/* A primary button that is disabled is one that is working (the Play page's
   Start while the game loads): grey, no hover lift, a waiting cursor. */
.btn-primary:disabled, .btn-primary:disabled:hover {
  background: var(--line-strong); border-color: var(--line-strong); color: var(--text-dim);
  cursor: progress; font-weight: 550;
}
.btn-ghost { border-color: transparent; color: var(--text-dim); padding-inline: 12px; }
.btn-ghost:hover { color: var(--gold); background: none; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ================================================================= cards */
.card {
  position: relative;
  display: block;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.card:hover { border-color: var(--line-gold); background: var(--bg-elev); transform: translateY(-2px); }
.card .h3 { margin-bottom: 6px; }
.card p   { font-size: .875rem; color: var(--text-dim); }

/* index card — the big homepage section links */
.card-index { padding: 28px; display: flex; flex-direction: column; min-height: 190px; }
.card-index .idx {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  color: var(--gold-dim); margin-bottom: auto;
}
.card-index:hover .idx { color: var(--gold); }
.card-index .h3 { font-size: 1.25rem; margin-top: 20px; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); }
.span-2 { grid-column: span 2; }

/* two-pane content page: scrolling list + sticky detail ----------------- */
.pane {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .95fr);
  gap: 40px;
  align-items: start;
}
.pane-side {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  max-height: calc(100vh - var(--nav-h) - 56px);
  overflow-y: auto;
}
@media (max-width: 1040px) {
  .pane { grid-template-columns: 1fr; }
  .pane-side { position: static; max-height: none; overflow: visible; }
  .span-2 { grid-column: span 1; }
}

/* ================================================================= chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 5px 11px;
  font-size: .75rem; font-weight: 500;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: all .18s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip[aria-pressed='true'] {
  color: var(--gold); border-color: var(--line-gold); background: rgba(201,162,77,.07);
}
.tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: .6875rem; font-weight: 500; letter-spacing: .04em;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 100px;
}
.tag-gold { color: var(--gold); border-color: var(--line-gold); }

/* ============================================================ unit cards */
.unit-card { padding: 0; overflow: hidden; }
.unit-portrait {
  position: relative;
  height: 132px;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 105%, rgba(201,162,77,.10), transparent 70%),
    var(--bg-elev);
  border-bottom: 1px solid var(--line);
}
.unit-card:hover .unit-portrait { background:
    radial-gradient(ellipse 70% 60% at 50% 105%, rgba(201,162,77,.18), transparent 70%),
    var(--bg-elev); }
/* Sprite portraits.
 *
 * The engine sizes and positions its avatar <img> from the frame's own local
 * bounds — it writes negative top/left offsets measured from the unit's origin
 * (the point where its feet meet the tile) and a matching transform-origin.
 * So the slot is a zero-size anchor marking where the unit STANDS, not a box
 * the image fills, and transform:scale() around it scales about the feet.
 */
.portrait-slot {
  position: absolute; left: 50%; top: 78%;
  width: 0; height: 0;
  transform: scale(.78);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), filter .35s ease;
}
/* max-width:none matters: the global `img { max-width:100% }` resolves against
 * the containing block, which for an absolutely positioned child is this
 * zero-width slot — so the sprite renders 0px wide and vanishes. */
.portrait-slot img { position: absolute; max-width: none; }
.unit-card:hover .portrait-slot { transform: scale(.84); }

/* The selected card keeps the hover treatment permanently, so it stays
 * findable at a glance once the pointer has moved on. */
.unit-card[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--bg-elev);
  transform: translateY(-2px);
}
.unit-card[aria-pressed="true"] .portrait-slot { transform: scale(.84); }
.unit-card[aria-pressed="true"] .portrait-slot,
.unit-card[aria-pressed="true"] .portrait-anim canvas {
  filter: drop-shadow(0 0 14px rgba(201,162,77,.35));
}
.unit-card[aria-pressed="true"] .unit-portrait { background:
    radial-gradient(ellipse 70% 60% at 50% 105%, rgba(201,162,77,.18), transparent 70%),
    var(--bg-elev); }

/* The shared hover canvas is parked in whichever card is hovered.
 *
 * Its stage already renders at the slot's .78, so the CSS here only applies
 * the *extra* growth on hover — .84/.78 — about the same anchor point the
 * slot scales about. Scaling about the box centre instead would slide the
 * unit; stacking the slot's absolute .84 on top of the stage's .78 would
 * shrink it to .65. Both are ways to make the still and the animation stop
 * lining up, which reads as the unit teleporting the moment you hover it. */
.portrait-anim {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  transform-origin: 50% 78%;
}
.unit-card:hover .portrait-anim,
.unit-card[aria-pressed="true"] .portrait-anim { transform: scale(1.0769); }
.portrait-anim canvas { display: block; }
.portrait-slot.is-hidden { opacity: 0; }

/* ================================================================== modal */
.modal-veil {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(4, 5, 7, .72);
  backdrop-filter: blur(6px);
  animation: veil-in .18s var(--ease);
}
@keyframes veil-in { from { opacity: 0; } }
.modal-card {
  width: 100%; max-width: 520px;
  background: var(--bg-raised);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  padding: 30px;
  animation: card-in .22s var(--ease);
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
.modal-card p { font-size: .9375rem; color: var(--text-dim); line-height: 1.72; }
.modal-close {
  margin-left: auto; padding: 4px 8px;
  color: var(--text-faint); font-size: 1.125rem; line-height: 1;
}
.modal-close:hover { color: var(--gold); }

/* a tag that opens something */
.tag-pip { cursor: pointer; transition: color .18s var(--ease), border-color .18s var(--ease); }
.tag-pip:hover { color: var(--gold); border-color: var(--line-gold); }

.unit-body { padding: 14px 16px 16px; }
.unit-body .h3 { margin-bottom: 2px; }
.unit-ability { font-size: .75rem; color: var(--gold); margin-bottom: 12px; }

/* prose blurb in the unit detail panel */
.unit-desc-wrap { margin-bottom: 20px; }
.unit-desc {
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--text-dim);
}
/* -webkit-box is still the only cross-browser way to clamp by line count */
.unit-desc.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  overflow: hidden;
}
.unit-more {
  margin-top: 6px;
  padding: 0;
  font-size: .75rem;
  color: var(--gold-dim);
  transition: color .18s var(--ease);
}
.unit-more:hover { color: var(--gold); }

/* compact inline stat readout */
.statline { display: flex; gap: 14px; font-size: .75rem; }
.statline div { display: flex; gap: 5px; align-items: baseline; }
.statline .k { color: var(--text-faint); font-size: .6875rem; }
.statline .v { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; }

/* full stat table (detail panels) */
.stats { display: grid; grid-template-columns: 1fr auto; gap: 0; }
.stats dt, .stats dd {
  margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .8125rem;
}
.stats dt { color: var(--text-dim); }
.stats dd { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* bar meter for comparing stats */
.meter { height: 3px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }

/* ================================================== board / stage panels */
.board-frame {
  position: relative;
  aspect-ratio: 836 / 552;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(201,162,77,.07), transparent 70%),
    var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid; place-items: center;
  overflow: hidden;
}
.board-frame::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 44px 28px;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 30%, transparent 75%);
}
.board-note {
  position: relative; z-index: 1;
  font-size: .8125rem; color: var(--text-faint); text-align: center;
}

/* thumbnail version for setup galleries */
.board-thumb {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(201,162,77,.06), transparent 70%),
    var(--bg-elev);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.board-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 26px 17px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 25%, transparent 78%);
}

/* ============================================================ step panel */
.step {
  display: flex; gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step .n {
  flex: none; width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 100px;
  font-size: .6875rem; font-weight: 600; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.step[data-state='active'] .n { border-color: var(--gold); color: var(--gold); background: rgba(201,162,77,.08); }
.step[data-state='done']   .n { border-color: var(--ok); color: var(--ok); }
.step[data-state='active'] .step-title { color: var(--text); }
.step-title { display: block; font-size: .875rem; font-weight: 500; color: var(--text-dim); }
.step-body  { display: block; font-size: .8125rem; color: var(--text-faint); margin-top: 3px; }

/* ============================================================== progress */
.progress { height: 2px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); }

/* =============================================================== listing */
.list-row {
  display: grid; align-items: center; gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.list-row:hover { border-color: var(--line-gold); background: var(--bg-elev); }
.list-row + .list-row { margin-top: 8px; }

/* ================================================================ footer */
.footer {
  margin-top: auto;          /* see the sticky-footer note on `body` */
  border-top: 1px solid var(--line);
  padding: 40px 0;
  font-size: .8125rem;
  color: var(--text-faint);
}
.footer a:hover { color: var(--gold); }

/* =============================================================== utility */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* entrance ------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .6s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================== setup boards */
/*
 * A setup card draws the game's own isometric half-field: the five rows a set
 * can occupy, in the same projection Board.js uses, with real unit sprites
 * standing on the tiles. Geometry lives in setups.html next to the constants
 * it is lifted from; everything here is paint.
 */
.setup-grid { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 18px; }
.setup-card { padding: 0; overflow: hidden; }
/* Boards are diagrams, not buttons — the .card hover lift makes them twitch as
   the pointer crosses the grid. */
.setup-card:hover { transform: none; border-color: var(--line-gold); }

.iso-board {
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse 64% 58% at 50% 64%, rgba(201,162,77,.09), transparent 72%),
    var(--bg-elev);
  border-bottom: 1px solid var(--line);
  /* Sprites stand well above their tile and lean past the board's edges, the
     same way the set builder masks them. */
  overflow: hidden;
}
.iso-grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iso-tile {
  fill: rgba(255,255,255,.020);
  stroke: rgba(255,255,255,.060);
  stroke-width: 1.25;
}
.iso-tile.filled { fill: rgba(201,162,77,.11); stroke: rgba(201,162,77,.32); }

/*
 * A standing unit is a zero-size anchor placed at its tile's centre — the same
 * contract .portrait-slot uses on the units page. The engine writes the <img>'s
 * own offsets relative to that point, so the anchor marks where the unit STANDS
 * rather than a box the sprite fills, and scale() works about its feet.
 * max-width:none keeps the global `img { max-width:100% }` from resolving
 * against a 0px box and collapsing the sprite.
 */
.iso-unit { position: absolute; width: 0; height: 0; }
.iso-slot {
  position: absolute; left: 0; top: 0;
  width: 0; height: 0; display: block;
  transform: scale(var(--sprite-scale, .8));
}
.iso-slot img { position: absolute; max-width: none; }

/* The two-letter unit code is the board until the avatar bundle lands, and
   stays the board if it never does. */
.iso-code {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  color: var(--gold); white-space: nowrap;
}
.iso-unit.has-portrait .iso-code { display: none; }

.setup-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 10px; }
.setup-rank { color: var(--gold); font-size: .8125rem; margin-right: 2px; }
.setup-meta { color: var(--text-faint); font-size: .75rem; margin-top: -6px; }

/* Full-width dividers between the played pool and the mined pro candidates;
 * candidate cards are dashed — in the corpus, not yet in the pool. */
.setup-section { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.setup-card.proposed { border-style: dashed; }
/* A pool card opens its detail modal (record slices + the bot games it
   appears in). */
.setup-card[data-set] { cursor: pointer; }
.setup-card[data-set]:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.set-modal { max-width: 640px; max-height: calc(100vh - 48px); overflow-y: auto; }
.set-modal .iso-board { border: 1px solid var(--line); border-radius: var(--radius); }
.set-stats { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.set-stats .faint { display: inline-block; min-width: 7.5em; }
.set-games { font-size: .75rem; display: flex; flex-direction: column; gap: 2px; }
.set-game {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: var(--radius); color: var(--text);
}
.set-game:hover { background: var(--bg-elev); color: var(--gold); }

@media (max-width: 620px) {
  .setup-grid { grid-template-columns: 1fr; }
}

/* ============================================================ responsive */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .section { padding: 56px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* The links become a full-width dropdown under the bar, opened by the
     hamburger. The bar is sticky, so absolute children hang off it. */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; gap: 2px; margin: 0; padding: 8px 20px 12px;
    background: rgba(8, 9, 11, .96); border-bottom: 1px solid var(--line);
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 12px 10px; font-size: .9375rem; }
  .nav-links a[aria-current]::after { left: 10px; right: 10px; }
}