/* ── Page head ────────────────────────────────────────────── */
.page-head{padding:28px 0 0;}
.page-head + .band{margin-top:28px;}
h1{margin:0 0 12px;font-size:clamp(34px,6vw,52px);line-height:1.05;letter-spacing:-.025em;font-weight:650;}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 28px;}

/* ── Progress line (landing page only) ────────────────────── */
.rail-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 10px;font-family:var(--mono);font-size:13px;
}
.rail-title{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);}
.rail-count{color:var(--ink);font-variant-numeric:tabular-nums;}
.footnote{margin:26px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2);}

/* ── Bands and rows ───────────────────────────────────────── */
.band{margin:0 0 30px;}
.band-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid var(--rule);
}
.band-name{
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
}
.band-meta{font-family:var(--mono);font-size:13px;color:var(--ink-2);}
/* The level rail: one thin line for every deck on the page, earlier levels
   included, sitting where the band's hairline was so the heading keeps its
   rule and the rule is the progress. The share is of the cards on the page,
   not of the decks opened, and level.js writes the width. */
.band.has-progress .band-head{border-bottom:0;}
.level-progress{
  display:flex;align-items:center;gap:10px;
  margin:0 0 14px;
}
.lp-line{
  flex:1 1 auto;height:2px;border-radius:1px;
  background:rgba(255,255,255,.28);overflow:hidden;
}
.lp-fill{
  display:block;height:100%;width:0;border-radius:1px;background:#FFFFFF;
  transition:width .3s var(--ease);
}
.lp-pct{
  flex:0 0 auto;min-width:3ch;text-align:right;
  font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce){
  .lp-fill{transition:none;}
}
@media (max-width:560px){
  .level-progress{gap:8px;margin-bottom:12px;}
  .lp-pct{font-size:11px;}
}
.rows{display:flex;flex-direction:column;}
.row{
  display:grid;grid-template-columns:44px 84px minmax(0,1fr) auto 20px;
  align-items:center;gap:12px;
  min-height:52px;padding:6px 10px;border-radius:10px;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.row:last-child{border-bottom:0;}
.row:hover{background:var(--surface);}
.row:hover .row-go{color:var(--accent);transform:translateX(2px);}
.row-num{font-family:var(--mono);font-size:14px;color:var(--ink-2);}
.row-range{font-family:var(--mono);font-size:14px;color:var(--ink-2);}
.row-pair{display:flex;align-items:center;gap:10px;font-size:22px;line-height:1.2;min-width:0;}
.row-pair .zh{white-space:nowrap;}
.row-sep{flex:0 0 auto;width:1px;height:16px;background:var(--rule-strong);}
.row-state{
  font-family:var(--mono);font-size:13px;color:var(--growth);
  display:inline-flex;align-items:center;gap:5px;
}
.row-go{color:var(--ink-2);transition:transform .15s ease,color .15s ease;text-align:right;}
/* The ladder carries three fields, not the deck row's five. */
.ladder-row{grid-template-columns:84px minmax(0,1fr) auto;cursor:default;}
.ladder-row:hover{background:none;}
.ladder-row .row-state{color:var(--ink-2);}
.ladder-row .row-pair{font-size:17px;font-family:var(--font);}

/* ── Deck grid: two panes to a row, graded within the band ─ */
/* The landing page's level panes, one size down. The pigment fills the pane,
   the 2px gap lets the page ground draw the lines, and white is the only text
   colour. Decks run light at the head of a band to dark at its end, so a level
   page deepens as the list goes on. Both tones are generated hex values on
   each deck's own selector, since the site ships no inline styles. */
.deck-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  border-radius:16px;overflow:hidden;background:var(--canvas);
}
/* The card carries its own progress: number and range on top, the two words
   it runs between in the middle, and the opened mark at the foot. Every line
   is centred, so the pane reads as one stacked block. */
.deck-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;min-height:104px;padding:14px 17px;
  background:var(--tone-light);color:#FFFFFF;text-align:center;text-decoration:none;
  transition:filter .15s var(--ease);
}
.deck-card:hover{filter:brightness(1.05);}
.deck-card:focus-visible{outline:3px solid #FFFFFF;outline-offset:-4px;}
.dc-top{
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.dc-num{font-weight:600;}
.dc-words{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;
  font-size:clamp(19px,2.4vw,23px);line-height:1.25;letter-spacing:.02em;
}
.dc-words .zh{font-family:var(--han);white-space:nowrap;}
.dc-sep{flex:0 0 auto;width:1px;height:15px;background:#FFFFFF;opacity:.4;}
.dc-foot{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;line-height:1;
}
.dc-state{display:inline-flex;align-items:center;gap:6px;min-height:16px;}
.dc-state .i{width:14px;height:14px;}
.dc-go{
  display:inline-flex;opacity:.8;
  transition:opacity .15s var(--ease),transform .15s var(--ease);
}
.dc-go .i{width:16px;height:16px;}
.deck-card:hover .dc-go{opacity:1;transform:translateX(2px);}
/* The completion line, last in the stack: an unfilled hairline with the share
   of this deck already seen filled in white, and the figure beside it. The
   width is written by level.js, because progress lives in the browser. */
.dc-bar{
  display:flex;align-items:center;gap:8px;width:100%;max-width:200px;margin-top:2px;
}
.dc-bar-line{
  flex:1 1 auto;height:2px;border-radius:1px;
  background:rgba(255,255,255,.28);overflow:hidden;
}
.dc-bar-fill{
  display:block;height:100%;width:0;border-radius:1px;background:#FFFFFF;
  transition:width .3s var(--ease);
}
.dc-pct{
  flex:0 0 auto;min-width:3ch;text-align:right;
  font-family:var(--mono);font-size:11.5px;line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
@media (prefers-color-scheme:dark){
  .deck-card{background:var(--tone-dark);}
}
@media (max-width:560px){
  .deck-card{min-height:96px;padding:12px 13px;gap:7px;}
  .dc-top{font-size:11.5px;}
  .dc-words{gap:7px;font-size:clamp(17px,4.6vw,21px);}
  .dc-foot{font-size:12.5px;}
  .dc-bar{max-width:170px;}
  .dc-pct{font-size:11px;}
}
@media (max-width:380px){
  .deck-card{padding:11px 11px 9px;}
  .dc-sep{height:13px;}
}

/* ── Review group on HSK 4 ────────────────────────────────── */
.review{margin:0 0 30px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);}
.review > summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:16px 18px;cursor:pointer;list-style:none;min-height:56px;
}
.review > summary::-webkit-details-marker{display:none;}
.review > summary::after{
  content:"Show";font-family:var(--mono);font-size:13px;color:var(--accent);
  margin-left:auto;
}
.review[open] > summary::after{content:"Hide";}
.review[open] > summary{border-bottom:1px solid var(--rule);}
.review .band{padding:0 18px;margin:22px 0;}
.review .band:last-child{margin-bottom:22px;}
.review .row{border-bottom:1px solid var(--rule);}
.review .row:hover{background:var(--surface-2);}

/* ── Landing ──────────────────────────────────────────────── */
.landing-head{padding:36px 0 0;}
.landing-head h1{max-width:22ch;}
/* The level panes and their pigment colours are drawn in theme-seal.css. */
/* One bar here, not a deck strip: 40 tiny marks would be too small to read. */
.meter{display:block;height:4px;border-radius:999px;
  background:var(--surface-2);overflow:hidden;}
.meter-fill{display:block;height:100%;width:0;border-radius:999px;
  background:var(--growth);transition:width .45s var(--ease-soft);}

/* ── Game dialog ──────────────────────────────────────────── */
dialog.game{
  width:min(100% - 32px,720px);max-height:min(88vh,880px);padding:0;
  border:1px solid var(--rule-strong);border-radius:22px;background:var(--canvas);
  color:var(--ink);box-shadow:0 24px 64px rgba(0,0,0,.28);
}
dialog.game::backdrop{background:rgba(11,20,22,.55);}
.game-shell{display:flex;flex-direction:column;max-height:min(88vh,880px);}
.game-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--rule);
}
.game-title{margin:0;font-size:18px;font-weight:650;}
.game-close{
  min-height:44px;min-width:44px;border:1px solid var(--rule-strong);border-radius:999px;
  background:var(--surface);color:var(--ink);font-family:var(--font);font-size:15px;
  font-weight:600;cursor:pointer;padding:0 16px;
}
.game-close:hover{background:var(--surface-2);}
.game-body{padding:20px;overflow:auto;}
.game-view[hidden]{display:none;}

.picker-band{margin:0 0 22px;}
.picker-band h3{
  margin:0 0 10px;font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
.picker-deck{
  min-height:64px;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;
  background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;
  font-family:var(--font);display:flex;flex-direction:column;gap:2px;
}
.picker-deck:hover{border-color:var(--accent);}
.picker-deck .pr{font-family:var(--mono);font-size:14px;font-weight:600;}
.picker-deck .pp{font-family:var(--han);font-size:18px;color:var(--ink-2);}
.picker-deck .pc{display:none;}
.picker-deck.is-open .pc{display:inline-flex;}

.game-status{margin:0 0 16px;font-family:var(--mono);font-size:13px;color:var(--ink-2);
  display:flex;justify-content:space-between;gap:12px;}
.game-prompt{margin:0 0 22px;font-size:clamp(22px,4vw,28px);line-height:1.35;font-weight:500;}
.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px;}
.opt{
  min-height:76px;padding:12px;border:1px solid var(--rule-strong);border-radius:14px;
  background:var(--surface);color:var(--ink);cursor:pointer;
  font-family:var(--han);font-size:30px;line-height:1.2;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:border-color .15s ease,background .15s ease;
}
.opt:hover:not(:disabled){border-color:var(--accent);}
.opt:disabled{cursor:default;}
.opt.is-correct{border-color:var(--growth);background:var(--growth);color:#FFFFFF;}
.opt.is-wrong{border-color:var(--rule);background:transparent;color:var(--ink-2);}
.feedback{min-height:26px;margin:0 0 14px;font-size:15px;color:var(--ink-2);}
.game-actions{display:flex;gap:10px;flex-wrap:wrap;}
.game-loading,.game-error{margin:24px 0;font-size:16px;color:var(--ink-2);}
.game-result{text-align:center;padding:16px 0 8px;}
.game-result .score{margin:0 0 6px;font-size:clamp(40px,9vw,64px);font-weight:650;letter-spacing:-.03em;}
.game-result p{margin:0 0 24px;color:var(--ink-2);}

/* ── Narrow ───────────────────────────────────────────────── */
@media (max-width:560px){
  .wrap{padding:0 16px;}
  .masthead{padding:18px 16px 4px;}
  .row{grid-template-columns:34px minmax(0,1fr) 20px;gap:4px 10px;padding:10px 6px;min-height:60px;}
  .row-range{grid-column:2;grid-row:2;font-size:13px;}
  .row-pair{grid-column:2;grid-row:1;font-size:20px;}
  .row-num{grid-row:1 / span 2;align-self:center;}
  .row-state{grid-column:2;grid-row:3;font-size:12px;}
  .row-go{grid-column:3;grid-row:1 / span 3;align-self:center;}
  .band-head{flex-direction:column;align-items:flex-start;gap:2px;}
  .options{grid-template-columns:1fr 1fr;}
  .opt{min-height:68px;font-size:26px;}
  .game-body{padding:16px;}
}

/* ── Level test invitation ────────────────────────────────── */
/* Sits after the last deck, where a completed list ends. */
.level-test{
  margin:48px 0 0;padding:28px 24px;border-radius:var(--r-lg);
  border:1px solid var(--rule);
}
.level-test h2{margin:0 0 8px;font-size:clamp(22px,3.4vw,28px);line-height:1.2;letter-spacing:-.01em;}
.level-test .lede{margin:0 auto 20px;font-size:16px;}

/* ── Deck tones, one per deck ────────────────────────────── */
.deck-card[data-deck="h3-01"]{--tone-light:#AB342B;--tone-dark:#B23A30;}
.deck-card[data-deck="h3-02"]{--tone-light:#1F5C46;--tone-dark:#24654F;}
.deck-card[data-deck="h3-03"]{--tone-light:#24356E;--tone-dark:#2E4488;}
.deck-card[data-deck="h3-04"]{--tone-light:#8A4B1E;--tone-dark:#9A5524;}
.deck-card[data-deck="h3-05"]{--tone-light:#8C2B23;--tone-dark:#993229;}
.deck-card[data-deck="h3-06"]{--tone-light:#184837;--tone-dark:#1E5341;}
.deck-card[data-deck="h3-07"]{--tone-light:#1F5C46;--tone-dark:#24654F;}
.deck-card[data-deck="h3-08"]{--tone-light:#24356E;--tone-dark:#2E4488;}
.deck-card[data-deck="h3-09"]{--tone-light:#8A4B1E;--tone-dark:#9A5524;}
.deck-card[data-deck="h3-10"]{--tone-light:#AB342B;--tone-dark:#B23A30;}
.deck-card[data-deck="h3-11"]{--tone-light:#24356E;--tone-dark:#2E4488;}
.deck-card[data-deck="h3-12"]{--tone-light:#8A4B1E;--tone-dark:#9A5524;}
.deck-card[data-deck="h3-13"]{--tone-light:#AB342B;--tone-dark:#B23A30;}
.deck-card[data-deck="h3-14"]{--tone-light:#1F5C46;--tone-dark:#24654F;}
.deck-card[data-deck="h3-15"]{--tone-light:#202F61;--tone-dark:#283B76;}
.deck-card[data-deck="h3-16"]{--tone-light:#7E451B;--tone-dark:#925022;}
.deck-card[data-deck="h3-17"]{--tone-light:#9C2F27;--tone-dark:#A6362D;}
.deck-card[data-deck="h3-18"]{--tone-light:#1C523E;--tone-dark:#215C48;}
.deck-card[data-deck="h3-19"]{--tone-light:#1B2854;--tone-dark:#223265;}
.deck-card[data-deck="h3-20"]{--tone-light:#733E19;--tone-dark:#894C20;}
.deck-card[data-deck="h4-21"]{--tone-light:#8A4B1E;--tone-dark:#9A5524;}
.deck-card[data-deck="h4-22"]{--tone-light:#AB342B;--tone-dark:#B23A30;}
.deck-card[data-deck="h4-23"]{--tone-light:#1F5C46;--tone-dark:#24654F;}
.deck-card[data-deck="h4-24"]{--tone-light:#24356E;--tone-dark:#2E4488;}
.deck-card[data-deck="h4-25"]{--tone-light:#84481D;--tone-dark:#965323;}
.deck-card[data-deck="h4-26"]{--tone-light:#A33229;--tone-dark:#AC382E;}
.deck-card[data-deck="h4-27"]{--tone-light:#1D5742;--tone-dark:#22604B;}
.deck-card[data-deck="h4-28"]{--tone-light:#223267;--tone-dark:#2B407F;}
.deck-card[data-deck="h4-29"]{--tone-light:#7E451B;--tone-dark:#925022;}
.deck-card[data-deck="h4-30"]{--tone-light:#9C2F27;--tone-dark:#A6362D;}
.deck-card[data-deck="h4-31"]{--tone-light:#1C523E;--tone-dark:#215C48;}
.deck-card[data-deck="h4-32"]{--tone-light:#202F61;--tone-dark:#283B76;}
.deck-card[data-deck="h4-33"]{--tone-light:#78411A;--tone-dark:#8D4E21;}
.deck-card[data-deck="h4-34"]{--tone-light:#942D25;--tone-dark:#9F342B;}
.deck-card[data-deck="h4-35"]{--tone-light:#1A4D3A;--tone-dark:#1F5744;}
.deck-card[data-deck="h4-36"]{--tone-light:#1E2B5A;--tone-dark:#25376D;}
.deck-card[data-deck="h4-37"]{--tone-light:#733E19;--tone-dark:#894C20;}
.deck-card[data-deck="h4-38"]{--tone-light:#8C2B23;--tone-dark:#993229;}
.deck-card[data-deck="h4-39"]{--tone-light:#184837;--tone-dark:#1E5341;}
.deck-card[data-deck="h4-40"]{--tone-light:#1B2854;--tone-dark:#223265;}