/* Metro Match — treatment C (D19): ink-dark card on near-black table;
   the operators' line colours do the lighting. V1 big-ledger rows (D20).
   Cool ink family on purpose: not the site's warm house dark.
   Legibility floor ~9px (D21/D22 passes). Gate 3: cards grew to 270x460 so
   the big-pill decks (Beijing 27, Seoul 23) and six core rows fit; the
   stat ledgers come in three themes (core/service/money) toggled by
   data-theme on the deck grid; battle cards always show core. */

:root {
  --table: #0f0f12;
  --chrome: #131318;
  --chrome2: #15151a;
  --edge: #26262c;
  --card: #1b1b21;
  --cedge: #32323a;
  --rowline: #232329;
  --text: #f2f2ee;
  --body: #e8e8e3;
  --soft: #c4c4bf;
  --grey: #9a9a93;
  --dim: #7a7a82;
  --faint: #62626a;
  --foot: #71717a;
  --blue: #0052a4;
  --lblue: #7fb0e8;
  --hotbg: rgba(0, 82, 164, .30);
  --hotline: #5b9bd5;
  --hotlab: #9cc4ea;
  --chipedge: #4a4a54;
  --chiptext: #b0b0a8;
  --chipdash: #46464f;
  --good: #3f9e5f;
  --goodtext: #7fd49a;
  --bad: #b85c5c;
  --mono: 'DM Mono', ui-monospace, monospace;
  --sans: -apple-system, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--table);
  color: var(--body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.table { min-height: 100dvh; display: flex; flex-direction: column; }

button { font-family: inherit; }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--lblue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- header */

/* the chrome shares main's column: header paints full-bleed, its content
   sits in an .hframe that mirrors main's box exactly (D35) */
header {
  padding: 15px 0 11px; border-bottom: 1px solid var(--edge);
  background: var(--chrome);
}
.hframe {
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 22px;
}
.wordmark { font-size: 15px; font-weight: 700; letter-spacing: .24em; color: var(--text); }
/* the wordmark links #deck (the in-app way back); no hover change, the
   cursor is the affordance (owner pick W4, masthead board) */
.wordmark a { color: inherit; text-decoration: none; }
.wordmark em { font-style: normal; color: var(--lblue); }

nav[role="tablist"] { display: flex; gap: 6px; }
nav[role="tablist"] button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em; color: var(--grey); padding: 6px 9px 7px;
  cursor: pointer;
}
nav[role="tablist"] button:hover { color: var(--body); }
nav[role="tablist"] button[aria-selected="true"] {
  color: var(--text); border-bottom-color: var(--lblue);
}


main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 22px 34px; }

/* ------------------------------------------------------------------ deck */

.intro {
  font-size: 13px; color: var(--soft); line-height: 1.65;
  padding: 20px 2px 4px; margin: 0 auto; text-align: left;
  max-width: 270px;  /* the grid's width at each tier; tiers below */
}
@media (min-width: 612px) { .intro { max-width: 566px; } }
@media (min-width: 906px) { .intro { max-width: 862px; } }
.intro b { color: var(--text); font-weight: 600; }

/* Column count is locked to 1 / 2 / 3 (never 4): 18 cards land in even
   rows at every width (18 = 1x18 = 2x9 = 3x6). The owner reversed the old
   1/2/4 lock at D27 ("3 per row was much better"). */
.deckgrid {
  display: grid; grid-template-columns: repeat(1, 270px);
  justify-content: center; gap: 30px 26px; padding: 22px 0 8px;
}
@media (min-width: 612px) {
  .deckgrid { grid-template-columns: repeat(2, 270px); }
}
@media (min-width: 906px) {
  .deckgrid { grid-template-columns: repeat(3, 270px); }
}

.cardunit { display: flex; flex-direction: column; gap: 9px; align-items: center; }
/* mega-pill cards (Seoul 24, Beijing 27) grow taller than the 486 floor, so
   rows size to their own card: don't stretch the short cards in a tall row. */
.deckgrid { align-items: start; }

/* the card object. min-height not height: the pills (flex: none below) wrap to
   full rows and the card grows to fit, so the line-count/scope tag is never
   occluded at any pill count (pill-density fix). */
.card {
  width: 270px; min-height: 469px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--cedge);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .55); color: var(--text);
  padding: 17px 15px 13px; display: flex; flex-direction: column;
  position: relative; overflow: hidden; text-align: left;
}

.chead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cname {
  font-size: 28px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.02;
}
/* the core line: count + scope, the card subtitle (moved up from the band
   tag). Data, not flavor, so it reads in soft grey not the blue accent. */
.csub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .02em;
  color: var(--soft); margin-top: 6px; white-space: nowrap;
}
.cno { font-family: var(--mono); font-size: 10px; color: var(--dim); padding-top: 6px; }

/* C2 adaptive band (owner-picked): over 16 lines the refs become one thin
   strip of the line colours, the deck-back motif; refs read on the lore back. */
.cband {
  display: flex; gap: 0; height: 16px; border-radius: 8px;
  overflow: hidden; margin-top: 13px;
}
.cband i { flex: 1; }

/* D34: no deck-level toggle. Each deck face carries exactly one ledger
   (scale or character), so ledgers simply display; battle stays scale. */
.cledger { margin-top: 13px; border-top: 1px solid var(--cedge); display: block; }
/* the set caption on the card (D32/D34): each stat face names its set.
   Deck only; battle cards are SCALE-bound and need no caption. */
.deckgrid .cledger::before {
  display: block; font-family: var(--mono); font-size: 9px;
  letter-spacing: .22em; color: var(--lblue); padding: 8px 1px 0;
  text-align: right;
}
.deckgrid .cledger[data-set="play"]::before { content: "SCALE"; }
.deckgrid .cledger[data-set="almanac"]::before { content: "CHARACTER"; }
.crow {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 1px; border-bottom: 1px solid var(--rowline);
}
/* The second set's rows are grown a little so the set (now five) fills the
   card the six PLAY rows would, no void below (D28/D29). */
.cl-almanac .crow { padding: 15px 1px; }
button.crow {
  background: none; border: 0; border-bottom: 1px solid var(--rowline);
  color: inherit; cursor: pointer; text-align: left;
}
button.crow:hover { background: rgba(127, 176, 232, .08); }
button.crow[aria-disabled="true"] { cursor: default; }
button.crow[aria-disabled="true"]:hover { background: none; }

.crk {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; text-align: center; border-radius: 999px;
  padding: 4px 0; width: 42px; border: 1px solid var(--chipedge);
  color: var(--chiptext); flex: none;
}
.crk1 { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 500; }

.clab {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  color: #e7e7e2; text-transform: uppercase;
}
.cval {
  margin-left: auto; font-family: var(--mono); font-size: 21px;
  font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
}
.cval small { font-size: 10px; color: var(--grey); letter-spacing: .04em; font-weight: 400; }

.crow.hot {
  background: var(--hotbg); box-shadow: inset 2px 0 0 var(--hotline);
  border-radius: 2px;
}
.crow.hot .clab { color: var(--hotlab); }

.cfoot {
  margin-top: auto; font-family: var(--mono); font-size: 9px;
  color: var(--foot); line-height: 1.55; padding-top: 11px;
}

/* lore back */
.cback { padding: 0; }
.lart { height: 178px; overflow: hidden; position: relative; background: #f4f4f0; }
.lart img {
  position: absolute; inset: -20%; width: 140%; height: 140%;
  object-fit: cover;
}
.lband {
  border-top: 1px solid var(--cedge); padding: 13px 15px 12px;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.lname { font-size: 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lsys {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  color: var(--lblue); text-transform: uppercase; margin-top: 5px;
}
.lflavor { font-size: 11px; color: #c2c2bd; line-height: 1.45; margin-top: 9px; }
.lfacts { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.lfact { font-size: 10px; color: var(--soft); line-height: 1.45; padding-left: 11px; position: relative; }
.lfact::before { content: '·'; position: absolute; left: 3px; color: var(--lblue); }
.lcredit {
  margin-top: auto; font-family: var(--mono); font-size: 9px;
  color: var(--foot); line-height: 1.5; padding-top: 9px;
}
.lcaveat { margin-top: 3px; }

/* flip (D34): one gesture cycles three faces, SCALE -> CHARACTER -> MAP.
   Two physical slots alternate (f-a at even half-turns, f-b at odd, f-b
   pre-rotated 180deg); app.js accumulates rotation and mounts the next
   card into whichever slot is hidden before each turn. The f-a slot is in
   normal flow at load and drives the box height; app.js then locks that
   height (.locked) so swapping the map card in never changes it. The
   stash (.facestash) parks the card that is two flips away. */
.flipbox { position: relative; width: 270px; perspective: 1200px; cursor: pointer; }
.flipinner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.f-a { position: relative; }
.face.f-b { position: absolute; inset: 0; transform: rotateY(180deg); }
.face.f-b .card { height: 100%; }
.flipbox.locked .face { position: absolute; inset: 0; }
.flipbox.locked .face .card { height: 100%; }
.facestash { display: none; }

.flipbtn {
  background: none; border: 1px solid var(--edge); border-radius: 999px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  color: var(--grey); padding: 6px 14px; cursor: pointer;
}
.flipbtn:hover { color: var(--body); border-color: var(--chipedge); }
/* deck back */
.cdeckback { padding: 0; }
.pinstripes {
  position: absolute; inset: 10px; border-radius: 8px;
  overflow: hidden; display: flex;
}
.pinstripes i { flex: 1; }
.backband {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); background: var(--card);
  border-top: 1px solid var(--cedge); border-bottom: 1px solid var(--cedge);
  padding: 15px 0; text-align: center;
}
.backmark { font-size: 15px; font-weight: 800; letter-spacing: .3em; color: var(--text); }
.backsub {
  font-family: var(--mono); font-size: 9.5px; color: var(--grey);
  margin-top: 6px; letter-spacing: .1em;
}

/* ---------------------------------------------------------------- battle */

.arena {
  display: flex; gap: 28px; justify-content: center; align-items: flex-start;
  padding: 26px 0 10px;
}
.bcol { display: flex; flex-direction: column; gap: 11px; align-items: center; }
.bcap { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--grey); }
/* Battle shows one card per side; keep both slots a fixed worst-case height
   (fits Seoul's 4 pill rows) so the two sides align and nothing clips. */
.bslot { width: 270px; height: 469px; position: relative; }
.bslot .card { height: 469px; }
.bcardwrap { position: absolute; inset: 0; }

.bmid { width: 234px; flex: none; text-align: center; padding-top: 120px; }
.bround { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--grey); }
.bprompt { font-size: 13px; color: var(--soft); margin-top: 9px; line-height: 1.5; }
.bcall { font-size: 16px; font-weight: 800; letter-spacing: .05em; color: var(--text); margin-top: 11px; }
.bnums { font-family: var(--mono); font-size: 12px; margin-top: 8px; color: #cfcfca; }
.bscore { font-family: var(--mono); font-size: 10px; color: var(--grey); margin-top: 13px; }
.bnext {
  margin-top: 16px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; background: var(--blue); color: #fff; border: 0;
  border-radius: 999px; padding: 10px 20px; cursor: pointer;
}
.bnext:hover { background: #1565b8; }
.bfine {
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  line-height: 1.7; margin-top: 18px; letter-spacing: .03em;
}

.bflip { perspective: 1200px; }
.bflipinner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.bflip.revealed .bflipinner { transform: rotateY(180deg); }
.bface {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.bface.bfaceup { transform: rotateY(180deg); }

/* ----------------------------------------------------------------- daily */

#panel-daily {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100dvh - 200px);
}
#panel-daily[hidden] { display: none; }  /* ID display would beat [hidden] otherwise */
.dailywrap { width: 100%; }
.dailybox {
  max-width: 600px; margin: 0 auto; text-align: center;
  background: var(--chrome2); border: 1px solid var(--edge);
  border-radius: 14px; padding: 34px 30px 26px;
}
.dhead { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--lblue); }
.dstat {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  color: var(--chiptext); margin-top: 16px; text-transform: uppercase;
}
.dq { font-size: 22px; font-weight: 800; letter-spacing: .02em; margin-top: 8px; color: var(--text); }
.dchoices { display: flex; gap: 18px; justify-content: center; align-items: center; margin-top: 26px; }
/* display:flex above would beat the [hidden] attribute (same trap as
   #panel-daily below): hide the inactive question form explicitly */
#d-duel[hidden], #d-mc[hidden] { display: none; }
.dchoice {
  width: 184px; background: var(--card); border: 1px solid var(--cedge);
  border-radius: 12px; padding: 22px 14px 18px; cursor: pointer;
  color: var(--text); display: flex; flex-direction: column; gap: 12px;
  align-items: center;
}
.dchoice:hover { border-color: var(--lblue); }
.dchoice[aria-disabled="true"] { cursor: default; }
.dchoice[aria-disabled="true"]:hover { border-color: var(--cedge); }
.dchoice.correct, .dchoice.correct[aria-disabled="true"]:hover { border-color: var(--good); }
.dchoice.correct .dmeta { color: var(--goodtext); }
.dchoice.wrongpick, .dchoice.wrongpick[aria-disabled="true"]:hover { border-color: var(--bad); }
.dname { font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dpills {
  display: flex; gap: 0; width: 152px; max-width: 100%; height: 10px;
  border-radius: 5px; overflow: hidden;
}
.dpills i { flex: 1; }
/* pick-the-number form (D30): one city, four candidate values */
.dmc { margin-top: 26px; }
.dmcband { margin: 0 auto 20px; }
.dopts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; max-width: 420px; margin: 0 auto;
}
.dopt {
  background: var(--card); border: 1px solid var(--cedge);
  border-radius: 12px; padding: 18px 10px; cursor: pointer;
  color: var(--text); font-family: var(--mono); font-size: 16px;
}
.dopt:hover { border-color: var(--lblue); }
.dopt[aria-disabled="true"] { cursor: default; }
.dopt[aria-disabled="true"]:hover { border-color: var(--cedge); }
.dopt.correct, .dopt.correct[aria-disabled="true"]:hover { border-color: var(--good); color: var(--goodtext); }
.dopt.wrongpick, .dopt.wrongpick[aria-disabled="true"]:hover { border-color: var(--bad); }
.dmeta { font-family: var(--mono); font-size: 16px; color: var(--chiptext); }
.dvs { font-family: var(--mono); font-size: 12px; color: var(--grey); }
.dverdict { margin-top: 22px; font-size: 14px; color: var(--soft); line-height: 1.6; }
.dverdict b { color: var(--body); }
.dstreak { font-family: var(--mono); font-size: 12px; color: var(--lblue); margin-top: 12px; letter-spacing: .1em; }
.dnote {
  font-family: var(--mono); font-size: 11px; color: var(--grey);
  line-height: 1.8; margin-top: 18px; letter-spacing: .02em;
  max-width: 460px; margin-left: auto; margin-right: auto;
}

/* ----------------------------------------------------------------- ranks */

.ranks { max-width: 680px; margin: 0 auto; padding: 8px 0 10px; }
.rkpick {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 16px 0 4px;
}
.rkbtn {
  background: none; border: 1px solid var(--edge); border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--grey); padding: 6px 12px; cursor: pointer;
  text-transform: uppercase;
}
.rkbtn:hover { color: var(--body); border-color: var(--chipedge); }
.rkbtn[aria-pressed="true"] {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.rkhead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 1px 8px; border-bottom: 1px solid var(--edge);
}
.rkstat {
  font-size: 15px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text);
}
.rkwin { font-family: var(--mono); font-size: 9.5px; color: var(--grey); letter-spacing: .08em; }
.rkrow {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 1px; border-bottom: 1px solid var(--rowline);
}
/* Podium emphasis flattened (owner, 2026-06-13): the top-3 bigger font read
   as weird; all rows are uniform now, the 1ST/2ND/3RD chip carries rank. The
   .podium class hook stays inert in the markup. */
.rkname {
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--body);
}
.rkband {
  display: flex; width: 64px; height: 8px; border-radius: 4px;
  overflow: hidden; margin-left: auto; flex: none;
}
.rkband i { flex: 1; }
.rkval {
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  white-space: nowrap; min-width: 86px; text-align: right;
}
.rkval small { font-size: 9px; color: var(--grey); letter-spacing: .04em; font-weight: 400; }
.rkrace {
  font-family: var(--mono); font-size: 10.5px; color: var(--grey);
  letter-spacing: .04em; padding: 12px 1px 2px; line-height: 1.6;
}
.rkrace a { color: var(--lblue); text-decoration: none; }
.rkrace a:hover { text-decoration: underline; }
.rknote {
  font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  line-height: 1.7; padding-top: 18px; letter-spacing: .03em;
}

/* ---------------------------------------------------------------- method */

.method { max-width: 680px; margin: 0 auto; padding: 8px 0 10px; }
.method h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--lblue); font-weight: 500; text-transform: uppercase;
  margin: 28px 0 10px;
}
.method p { font-size: 13px; line-height: 1.7; color: var(--soft); margin: 8px 0; }
.method b { color: var(--body); font-weight: 600; }
.method table { width: 100%; border-collapse: collapse; margin: 12px 0 6px; }
.method th {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  color: var(--grey); text-transform: uppercase; text-align: left;
  padding: 6px 12px 6px 0; border-bottom: 1px solid var(--edge);
}
.method td {
  padding: 9px 12px 9px 0; border-bottom: 1px solid #1d1d23;
  vertical-align: top; color: var(--soft); font-size: 12px; line-height: 1.55;
}
.method td:first-child {
  font-weight: 700; color: var(--body); text-transform: uppercase;
  font-size: 11px; letter-spacing: .05em; white-space: nowrap;
}
.method .credit { font-family: var(--mono); font-size: 10px; color: var(--grey); line-height: 1.7; margin: 4px 0; }
.method .asof { font-family: var(--mono); font-size: 9px; color: var(--dim); }
.method .almtable td { font-size: 11px; }
.method .almtable a { color: var(--lblue); text-decoration: none; }
.method .almtable a:hover { text-decoration: underline; }
.method details { margin: 10px 0; }
.method summary {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--grey); cursor: pointer; text-transform: uppercase;
  padding: 4px 0;
}
.method summary:hover { color: var(--body); }

/* ---------------------------------------------------------------- footer */

footer {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap; padding: 11px 22px;
  border-top: 1px solid var(--edge); background: var(--chrome);
  font-family: var(--mono); font-size: 10px; color: var(--grey);
}
footer .made { color: var(--grey); text-decoration: none; white-space: nowrap; }
footer .made:hover { color: var(--body); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 960px) {
  .arena { flex-direction: column; align-items: center; gap: 18px; }
  .bmid { padding-top: 0; width: 270px; }
  .bfine { margin-top: 14px; }
}

@media (max-width: 640px) {
  header { padding: 13px 0 9px; }
  .hframe { gap: 12px; padding: 0 16px; }
  nav[role="tablist"] { order: 3; width: 100%; gap: 0; justify-content: space-between; }
  nav[role="tablist"] button { padding: 6px 4px 7px; font-size: 11.5px; letter-spacing: .04em; }
  main { padding: 0 16px 28px; }
  .deckgrid { gap: 24px 18px; }
  #panel-daily { justify-content: flex-start; min-height: auto; padding-top: 26px; }
  .dailybox { padding: 28px 18px 22px; }
  .dchoices { gap: 12px; }
  .dchoice { width: 134px; padding: 18px 8px 15px; }
  .dq { font-size: 19px; }
  footer { padding: 10px 16px; font-size: 9px; }
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .flipinner, .bflipinner { transition: none; }
}