/* ── Ladder ──────────────────────────────────────────────────────────────────
   A bookbinder's ladder, laid out for a phone held upright. The screen is one
   column and six bands: the rung you are on, the other benches, the table, the
   two piles, your hand, and the one bar that says what you may do next.

   Two rules run through all of it. Colour is never load-bearing — a thread is a
   hue AND a shape, and every state here (armed, lit, ready) is carried by an
   outline or a weight rather than by a second colour that would compete with
   the cards. And nothing is styled that the screen does not render: the shared
   card stock, the fanned hand and the seat chips all come from tabletop.css,
   because they belong to all three table games and not to this one.           */

/* ── the card faces ─────────────────────────────────────────────────────────
   The faces themselves are generated in src/games/ladder/cards.js; what they
   need from here is ink. The numeral stays card-ink in both themes rather than
   taking the thread's hue — a coloured numeral at 44px reads as a smudge, and
   the thread is already said twice, by the edge stripe and by the shape.      */

.ld-num { font-size: 46px; font-weight: 500; dominant-baseline: middle; }

/* The corner pip. Mono, small, and set in far enough that a two-digit value
   clears the thread stripe down the card's edge. */
.ld-pip { font-size: 18px; font-weight: 500; dominant-baseline: middle; }

/* A splice: two thread ends whipped together, in the colourless ink. */
.ld-splice-l {
  fill: none; stroke: var(--tt-ink-wild); stroke-width: 3.4; stroke-linecap: round;
}

/* A clamp: the press screwed shut over a stack of leaves. */
.ld-clamp-l { fill: none; stroke: var(--tt-ink-wild); stroke-width: 3.4; stroke-linecap: round; }
.ld-clamp-j { fill: var(--tt-ink-wild); stroke: none; }
.ld-clamp-p { fill: none; stroke: var(--tt-card-line); stroke-width: 2; }

/* The one back, seen twenty at a time: a rung between two rails. */
.ld-back-m { fill: none; stroke: var(--tt-card-line); stroke-width: 3; stroke-linecap: round; }

.ld-screen {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  padding-bottom: var(--sab);
}

/* ── the rung you are standing on ───────────────────────────────────────── */

.ld-rail {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: calc(var(--sat) + var(--space-4)) var(--space-5) var(--space-4);
  border-bottom: var(--hairline) solid var(--line);
}
.ld-rung { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ld-rung-n { color: var(--dim); }
.ld-rung-t { font-size: var(--text-xl); line-height: var(--leading-tight); }

/* Ten steps. The one you are on is the only filled shape on the screen that is
   not a card, which is exactly how much emphasis it deserves. */
.ld-steps { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.ld-step {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  font-size: var(--text-2xs); color: var(--mute);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius-sm);
}
.ld-step.is-done { color: var(--dim); border-color: var(--line); background: var(--surface-2); }
.ld-step.is-here { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* ── the other benches ──────────────────────────────────────────────────── */

.ld-seats {
  display: flex; gap: var(--space-3); overflow-x: auto;
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
}
.ld-seats > * { flex: none; }
.ld-seat-r, .ld-seat-c { font-size: var(--text-2xs); color: var(--dim); }
.ld-seat-c::after { content: '♠'; visibility: hidden; }   /* keeps the chip width steady */
.ld-seat-f { font-size: var(--text-2xs); color: var(--accent); }
.ld-seat-k {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--red); border: var(--hairline) solid var(--danger-line);
  border-radius: var(--radius-sm); padding: 0 var(--space-2);
}

/* ── the table ──────────────────────────────────────────────────────────── */

.ld-table {
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.ld-empty { display: grid; place-items: center; text-align: center; color: var(--mute); }
.ld-own { display: flex; flex-direction: column; gap: var(--space-2); }
.ld-own-n { color: var(--dim); }
.ld-parts { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* A laid part is a target, so it is a button — and while a card is in hand the
   ones it fits are outlined and the rest step back. That contrast is the whole
   affordance for adding on. */
.ld-part {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  transition: opacity var(--t), border-color var(--t);
}
.ld-part.is-lit { border-color: var(--accent); background: var(--accent-dim); }
.ld-part.is-dim { opacity: 0.35; }
.ld-part-h { display: flex; align-items: baseline; gap: var(--space-3); }
.ld-part-t { font-size: var(--text-md); color: var(--text); }
.ld-part-k { color: var(--mute); }
.ld-part-c { display: flex; }
.ld-part-c > * { margin-left: -10px; }
.ld-part-c > *:first-child { margin-left: 0; }

/* A card on the table, and the number a splice was laid as. */
.ld-mini { position: relative; display: inline-block; }
.ld-decl {
  position: absolute; inset: auto 0 2px 0;
  text-align: center; font-size: var(--text-2xs); font-style: normal;
  color: var(--tt-card-ink);
}

/* ── the two piles ──────────────────────────────────────────────────────── */

.ld-piles { justify-content: center; padding: var(--space-4) var(--space-5); }
.ld-pile {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-2);
  background: transparent; border: var(--hairline) solid transparent; border-radius: var(--radius);
  color: var(--dim);
}
.ld-pile:disabled { opacity: 0.7; }
.ld-pile.is-live { border-color: var(--accent-line); background: var(--accent-dim); color: var(--text); }
.ld-nopile {
  display: grid; place-items: center;
  width: 72px; height: 101px;
  border: var(--hairline) dashed var(--line-2); border-radius: var(--radius);
  color: var(--mute);
}

/* ── the lay-down tray ──────────────────────────────────────────────────── */

.ld-tray {
  margin: 0 var(--space-5) var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.ld-tray-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ld-tray-t { font-size: var(--text-lg); }
.ld-tray-a { display: flex; gap: var(--space-3); }
.ld-mini-btn {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--dim); background: transparent;
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.ld-slots { display: flex; flex-direction: column; gap: var(--space-3); }

/* One slot per part of the rung. The armed slot is where the next card goes,
   and it is the only outlined thing on screen, so it can be found without
   reading. A slot that already validates says so and stops asking. */
.ld-slot {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  text-align: left;
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
}
.ld-slot.is-armed { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.ld-slot.is-ok { border-color: var(--success-line); }
.ld-slot-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.ld-slot-h .label { color: var(--text); }
.ld-slot-s { color: var(--dim); text-align: right; }
.ld-slot.is-ok .ld-slot-s { color: var(--success-text); }
.ld-slot-c { display: flex; min-height: 39px; align-items: center; }
.ld-slot-c > * { margin-left: -8px; }
.ld-slot-c > *:first-child { margin-left: 0; }
.ld-hole {
  width: 28px; height: 39px; display: block;
  border: var(--hairline) dashed var(--line-2); border-radius: var(--radius-sm);
}

.ld-go {
  width: 100%; padding: var(--space-5);
  font-size: var(--text-lg);
  border-radius: var(--radius);
  border: var(--hairline) solid var(--line-2);
  background: var(--surface-2); color: var(--dim);
}
.ld-go.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── your hand ──────────────────────────────────────────────────────────── */

.ld-hand { padding-bottom: var(--space-2); }
.ld-card { background: transparent; border: 0; padding: 0; }

/* ── the bar ────────────────────────────────────────────────────────────── */

.ld-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: var(--hairline) solid var(--line);
  background: var(--surface);
}
.ld-say { flex: 1; font-size: var(--text-base); color: var(--dim); }
.ld-btn {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  border-radius: var(--radius);
  border: var(--hairline) solid var(--line-2);
  background: var(--raised); color: var(--text);
}
.ld-btn.is-ready { border-color: var(--accent-line); color: var(--accent); }
.ld-btn.is-go { flex: 1; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ld-btn:disabled { background: var(--surface-2); border-color: var(--line); color: var(--mute); }
.ld-chip {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: var(--hairline) solid var(--line-2);
  background: transparent; color: var(--dim);
}

/* ── the two questions, and the scoreboard ──────────────────────────────── */

.ld-sheet {
  position: fixed; inset: 0; z-index: var(--z-veil);
  display: flex; align-items: flex-end;
  background: var(--veil);
}
.ld-sheet-in {
  width: 100%;
  max-height: 80%;
  overflow-y: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-6) var(--space-5) calc(var(--sab) + var(--space-6));
  display: flex; flex-direction: column; gap: var(--space-5);
}
.ld-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.ld-ask-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  width: 100%; padding: var(--space-5);
  text-align: left;
  background: var(--surface-2); border: var(--hairline) solid var(--line);
  border-radius: var(--radius); color: var(--text);
}
.ld-ranks { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.ld-rank {
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  background: var(--raised); color: var(--text);
  border: var(--hairline) solid var(--line-2); border-radius: var(--radius);
}
.ld-rank.is-off { background: var(--surface-2); color: var(--mute); border-color: var(--line); }

.ld-scores { display: flex; flex-direction: column; gap: var(--space-3); }
.ld-score {
  display: grid; grid-template-columns: minmax(72px, 1fr) auto 44px 48px;
  align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: var(--hairline) solid var(--line);
}
.ld-score.is-you { background: var(--accent-dim); border-radius: var(--radius); }
.ld-score-n { font-size: var(--text-base); }
.ld-up { color: var(--accent); font-style: normal; }
.ld-score-h { display: flex; overflow: hidden; }
.ld-score-h > * { margin-left: -14px; }
.ld-score-h > *:first-child { margin-left: 0; }
.ld-score-p { color: var(--red); text-align: right; font-size: var(--text-md); }
.ld-score-t { text-align: right; font-size: var(--text-md); color: var(--dim); }

/* the thread legend, for a rules card or a lobby row */
.ld-legend { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-4); }
.ld-legend-m { display: inline-flex; }

/* ── landscape / bigger screens ─────────────────────────────────────────────
   The column is capped and centred rather than stretched: a hand of ten cards
   fanned across a 1200px window is unreadable, and the table has nothing to
   gain from the extra width either. */
@media (min-width: 720px) {
  .ld-screen { max-width: var(--wrap); margin: 0 auto; border-inline: var(--hairline) solid var(--line); }
  .ld-sheet-in { max-width: var(--wrap); margin: 0 auto; border-radius: var(--radius-lg); }
  .ld-sheet { align-items: center; padding: var(--space-6); }
}