/* pages/landing/board.css — leaderboard grid and the JLPT explainer cards.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
.lb-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:20px;
  align-items:stretch;
}
/* ---- the league (wireframe 8a) ---------------------------------------- *
 * The six skeleton rows and their "opens with the beta" pill are gone: the
 * section explains the league with a graphic instead of miming a board, so
 * there is nothing here that needs a row of data to render.
 *
 * Measured off the board: tier blocks 3px ink outline with no bottom edge,
 * 56 / 104 / 150px tall, the middle one on the accent; the column widths are
 * 104 / 112 / 104 and the gap is 14.
 */
/* The band spans the wrap, like every other section — a narrower block here
   reads as a mistake next to the study path above it. What must NOT stretch
   is the copy column: as flex:1 it took whatever the wrap gave it (702px at
   1600, for a 164px button) and the CTA and the divider ended up 538px
   apart.
   So the copy is capped at the frame's own width and the rule sits at its
   edge, while the podium — a graphic, which centres happily — absorbs
   whatever is left. An even 1fr 1fr would put the void back at any width
   past the frame's own.
   366, not 430: the frame's 860 card includes a 64px rail, so its content
   row is 796 and the split is 366 copy / 430 podium. */
.lg8{
  display:grid;grid-template-columns:366fr 430fr;align-items:stretch;
}
.lg8-say{
  min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:14px;padding:26px 20px 22px 0;
}
.lg8-title{margin:0;font-size:36px;line-height:1.05;max-width:12ch}
/* The page sets its ledes at 17px; this was 14 and read as a smaller
   section than its neighbours. */
.lg8-rule{margin:0;font-size:17px;color:var(--play-mute)}
.lg8-cta{align-self:flex-start}

/* The podium. align-items:flex-end is what makes the tiers rise: each block
   has its own height and they share a baseline. */
/* Fills its half rather than sitting at a fixed 430, so the divider is the
   seam and no second gap opens between the rule and the tiers. No height:
   the plinths bleed to the band's bottom edge by design, so the band has to
   size to them. */
.lg8-podium{
  padding:20px 22px 0;border-left:2px solid var(--play-track);
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(8px,2.4cqw,22px);
  position:relative;overflow:hidden;container-type:inline-size;
}
/* The tiers divide the podium in the frame's own ratio (104 : 112 : 104)
   rather than holding fixed pixel widths, so the graphic fills its column at
   every width instead of floating in the middle of it — 194px of the band's
   right side was empty at 1180. The blocks take their height from an
   aspect-ratio off the same frame numbers, so the podium keeps its drawn
   proportions as it scales and can never clip. */
.lg8-tier{flex:104 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.lg8-tier.is-mid{flex:112 1 0}
.lg8-ic{font-size:clamp(22px,5cqw,38px);line-height:1.2}
.lg8-tier.is-mid .lg8-ic{font-size:clamp(26px,6.2cqw,46px)}
.lg8-block{
  width:100%;aspect-ratio:104/56;
  border:3px solid var(--play-ink);border-bottom:0;
  background:var(--play-card);color:var(--play-ink);
  display:flex;align-items:center;justify-content:center;
}
.lg8-block b{font:700 clamp(13px,2.6cqw,20px)/1 var(--play-display)}
.lg8-tier.is-mid .lg8-block{aspect-ratio:112/104;background:var(--play-accent)}
/* The frame writes #fff here; white on this ember is 2.80:1 (#158). */
.lg8-tier.is-mid .lg8-block b{color:var(--play-accent-ink);font-size:clamp(15px,3cqw,23px)}
.lg8-tier:last-of-type .lg8-block{aspect-ratio:104/150}

/* The climb: an arrow between each pair of tiers, lit on the leg already
   taken. Anchored to the tiers rather than to the frame's pixel offsets, so
   the reading survives every width. */
/* Zero-width, so the glyph sits in the gap between two tiers and costs the
   row nothing. The frame positions these absolutely for the same reason: at
   their natural width they add ~60px the podium does not have, and the last
   plinth gets clipped. */
.lg8-arrow{
  align-self:flex-end;margin-bottom:44px;font-size:16px;line-height:1;
  color:var(--play-soft);width:0;display:flex;justify-content:center;
  overflow:visible;
}
.lg8-arrow.is-lit{color:var(--play-accent);margin-bottom:26px}
.lg8-start{
  position:absolute;left:8px;bottom:96px;font-size:10px;padding:0 7px;
}
.lg8-tanu{
  position:absolute;left:calc(50% - 62px);bottom:56px;
  width:34px;height:34px;color:var(--play-ink);
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--play-ink);border-radius:50%;background:var(--play-lock);
}

@media (max-width:760px){
  /* The border-left is a column divider; stacked there is no column to
     divide, and the podium takes the full width. */
  .lg8{grid-template-columns:1fr}
  .lg8-say{padding:26px 0 18px}
  .lg8-podium{border-left:0;border-top:2px solid var(--play-track);padding:18px 0 0}
}
@media (max-width:480px){
  .lg8-title{font-size:28px}
  .lg8-start{display:none}
}