/* =============================================================
   Checkers + Hex — layout and components (CCD round 2, layout 1b).
   Values come from tokens.css only; this file holds structure.
   ============================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-family); font-size: var(--fs-sm);
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: var(--bw) solid var(--c-capture); outline-offset: var(--sp-half); }
.hidden { display: none !important; }

.app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ── buttons ─────────────────────────────────────────────────── */
.btn {
  border: var(--bw-control) solid var(--c-line); background: var(--c-btn); color: var(--c-btn-on);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md); white-space: nowrap;
}
.btn.primary { background: var(--c-primary); color: var(--c-primary-on); }
.btn.big { font-size: var(--fs-play); font-weight: var(--fw-display); padding: var(--sp-3) var(--sp-7); border-radius: var(--r-lg); border-width: var(--bw); }
.btn.big.secondary { font-size: var(--fs-lg); font-weight: var(--fw-bold); padding: var(--sp-3) var(--sp-5); box-shadow: var(--shadow); }
.btn.icon { width: var(--sz-btn-icon); height: var(--sz-btn-icon); padding: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-display); }
.linkbtn { background: none; border: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: var(--sp-2); }
.tag {
  background: var(--c-tag-bg); color: var(--c-tag-on); font-size: var(--fs-aid); font-weight: var(--fw-display);
  letter-spacing: .08em; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
}
.label { font-size: var(--fs-aid); font-weight: var(--fw-display); letter-spacing: var(--ls-label); color: var(--c-muted); }

/* player shapes (never colour alone: circle = Ink, diamond = Chalk) */
.shape { display: inline-block; flex: none; }
.shape.ink { border-radius: 50%; background: var(--c-ink); border: var(--piece-border); }
.shape.chalk { background: var(--c-chalk); border: var(--piece-border); transform: rotate(45deg); }
.shape.s20.ink { width: var(--sz-shape-20); height: var(--sz-shape-20); }
.shape.s20.chalk { width: var(--sz-shape-20d); height: var(--sz-shape-20d); margin: 0 var(--sp-half); }
.shape.s24.ink { width: var(--sz-shape-24); height: var(--sz-shape-24); }
.shape.s24.chalk { width: var(--sz-shape-24d); height: var(--sz-shape-24d); margin: 0 var(--sp-3q); }
.shape.s26.ink { width: var(--sz-shape-26); height: var(--sz-shape-26); }
.shape.s26.chalk { width: var(--sz-shape-26d); height: var(--sz-shape-26d); margin: 0 var(--sp-1); }

/* ── S1 launch ───────────────────────────────────────────────── */
.s1 { overflow: hidden; }
.s1-hero { position: absolute; right: calc(-1 * var(--sp-8)); bottom: calc(-1 * var(--sp-8)); width: var(--hero-w); max-width: 62vw; }
.s1-hero svg { width: 100%; height: auto; }
.s1-top { position: absolute; left: var(--sp-8); top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5); }
.kicker { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; }
.display { margin: 0; font-size: var(--fs-display); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.s1-bottom { position: absolute; left: var(--sp-8); bottom: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); }
.pitch { margin: 0; font-size: var(--fs-pitch); font-weight: var(--fw-semi); line-height: 1.15; letter-spacing: -.01em; }
/* hosting: "Work in progress" note — in the left column, never over the board (site.js) */
.wip { display: flex; align-items: center; gap: var(--sp-2); max-width: var(--wip-max); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2); background: var(--c-wip-bg); color: var(--c-wip-text); border: var(--bw-thin) solid var(--c-wip-border); border-radius: var(--r-md); font-size: var(--fs-aid); line-height: 1.3; }
.wip-tag { flex: none; background: var(--c-wip-tag); color: var(--c-wip-tag-on); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.wip-text { flex: 1 1 auto; min-width: 0; }
.wip-text a { color: var(--c-wip-tag-on); font-weight: var(--fw-bold); }
.wip-close { flex: none; display: flex; align-items: center; justify-content: center; min-width: var(--wip-close); min-height: var(--wip-close); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-wip-text); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.wip-close:hover { background: var(--c-wip-tag); color: var(--c-wip-tag-on); }
.row { display: flex; gap: var(--sp-3); align-items: center; }

/* ── bars (turn bar, setup bar) ──────────────────────────────── */
.bar {
  height: var(--bar-h); flex: none; background: var(--c-neutral-bar); color: var(--c-text);
  border-bottom: var(--bar-border); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-6); gap: var(--sp-5); position: relative; overflow: hidden;
}
.bar.ink { background: var(--c-ink); color: var(--c-ink-on); }
.bar.chalk { background: var(--c-chalk); color: var(--c-chalk-on); }
.bar.win-ink { background: var(--c-ink); color: var(--c-ink-on); }
.bar.win-chalk { background: var(--c-chalk); color: var(--c-chalk-on); }
.bar-left { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.bar-icon { flex: none; box-sizing: border-box; border: var(--icon-bar-border) solid currentColor; }
.bar-icon.ink { width: var(--icon-bar); height: var(--icon-bar); border-radius: 50%; background: var(--c-ink); }
.bar-icon.chalk { width: var(--icon-bar-diamond); height: var(--icon-bar-diamond); margin: 0 var(--sp-1h); background: var(--c-chalk); transform: rotate(45deg); }
.bar-title { font-size: var(--fs-bar); font-weight: var(--fw-display); letter-spacing: var(--ls-bar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-title.long { font-size: var(--fs-bar-long); }
.sticker {
  flex: none; margin-left: var(--sp-1); border-radius: var(--r-md); padding: var(--sp-1h) var(--sp-3);
  font-size: var(--fs-sticker); font-weight: var(--fw-display); letter-spacing: .02em; transform: rotate(var(--sticker-tilt)); white-space: nowrap;
}
.sticker.must { background: var(--c-capture); color: var(--c-capture-on); border: var(--bw-heavy) solid var(--c-edge); box-shadow: var(--shadow-sticker); }
.sticker.win { background: var(--c-win); color: var(--c-win-on); border: var(--bw-heavy) solid var(--c-edge); box-shadow: var(--shadow-sticker); }
.sticker.done { background: transparent; color: currentColor; border: var(--bw-heavy) dashed currentColor; }
.bar-right { font-size: var(--fs-bar-instr-fl); font-weight: var(--fw-semi); line-height: var(--lh-tight); text-align: right; flex: none; }
.stripe { height: var(--stripe-h); flex: none; background: repeating-linear-gradient(-45deg, var(--c-capture) 0 var(--stripe-band), var(--c-edge) var(--stripe-band) calc(2 * var(--stripe-band))); }

/* ── stage (board area) ──────────────────────────────────────── */
.stage { flex: 1; position: relative; min-height: 0; }
.board-wrap { position: absolute; inset: var(--sp-4) calc(var(--side-col) + var(--sp-6)); display: flex; align-items: center; justify-content: center; }
.board-wrap svg { max-width: 100%; max-height: 100%; }
.board-wrap.dim svg { opacity: var(--dim) !important; transition: opacity var(--t-base); }
.board-wrap .hit { fill: transparent; stroke: none; cursor: pointer; }
.board-wrap.paused .hit { cursor: progress; }
.upnext { position: absolute; left: var(--sp-6); top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.upnext-name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.rt { position: absolute; right: var(--sp-6); top: var(--sp-5); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1h); max-width: var(--side-col); text-align: right; }
.rt-main { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.18; }
.rt-note { font-size: var(--fs-aid); font-weight: var(--fw-semi); color: var(--c-muted); line-height: var(--lh-body); }
.panel { background: var(--c-surface); border: var(--bw) solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
/* toast (M8 / M9 / M15) and NEW RULE chip share the bottom-left corner; never both (cards.js cornerSlot) */
.toast, .chip { position: absolute; left: var(--toast-x); bottom: var(--toast-y); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--toast-gap); padding: var(--toast-pad); border-radius: var(--toast-r); text-wrap: pretty; }
.toast { width: var(--toast-w); }
.chip { max-width: var(--chip-max-w); }
.toast-text { font-size: var(--toast-fs); font-weight: var(--toast-fw); line-height: var(--toast-lh); }
.toast .btn { font-size: var(--toast-btn-fs); font-weight: var(--toast-btn-fw); padding: var(--toast-btn-pad); border-width: var(--toast-btn-bw); border-radius: var(--toast-btn-r); white-space: normal; text-align: left; }
.chip-title { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.15; }
.chip .tag { font-size: var(--fs-tag-xs); letter-spacing: var(--ls-label); }
.chip .linkbtn { padding: 0; text-decoration: underline; font-size: var(--fs-xs); }

/* ── footer ──────────────────────────────────────────────────── */
.footer {
  height: var(--footer-h); flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: 0 var(--sp-5) 0 var(--sp-6); border-top: var(--bar-border); background: var(--c-surface);
}
.goal { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-goal-fl); font-weight: var(--fw-semi); min-width: 0; }
.legend { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-xs); font-weight: var(--fw-semi); min-width: 0; overflow: hidden; }
.legend-item { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.legend-item svg { flex: none; }
.end-note { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-muted); }
.footer-buttons { display: flex; gap: var(--sp-2); flex: none; }
.replay-bar { flex: 1; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.replay-btns { display: flex; gap: var(--sp-1); }
.replay-btns .btn { width: var(--sz-replay-btn); height: var(--sz-replay-btn-h); padding: 0; font-size: var(--fs-aid); font-weight: var(--fw-display); border-width: var(--bw-thin); }
.replay-btns .btn.primary { width: var(--sz-replay-play); }
.scrubber { flex: 1; position: relative; height: var(--scrubber-h); border-radius: var(--r-sm); background: var(--c-soft); cursor: pointer; }
.scrubber-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-sm); background: var(--c-text); }
.scrubber-knob { position: absolute; top: 50%; width: var(--scrubber-knob); height: var(--scrubber-knob); border-radius: 50%; transform: translate(-50%, -50%); background: var(--c-surface); border: var(--bw-heavy) solid var(--c-text); }
.branch-tag { font-size: var(--fs-aid); font-weight: var(--fw-display); letter-spacing: .06em; padding: var(--sp-1) var(--sp-2); border: var(--bw-thin) dashed var(--c-text); border-radius: var(--r-sm); white-space: nowrap; }

/* ── S2 setup ────────────────────────────────────────────────── */
.s2-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--setup-side); gap: var(--sp-7); padding: var(--sp-6) var(--sp-7) 0; min-height: 0; overflow: auto; }
.s2-main { display: flex; flex-direction: column; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.seg { display: flex; border: var(--bw-control) solid var(--c-line); border-radius: var(--r-md); overflow: hidden; align-self: flex-start; }
.seg button { border: 0; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); font-weight: var(--fw-bold); background: var(--c-btn); color: var(--c-btn-on); }
.seg button + button { border-left: var(--bw-control) solid var(--c-line); }
.seg button[aria-pressed="true"] { background: var(--c-primary); color: var(--c-primary-on); }
.name-note { font-size: var(--fs-aid); color: var(--c-muted); font-weight: var(--fw-semi); }
.sides-slot { display: flex; flex-direction: column; gap: var(--sp-1); border: var(--bw-thin) dashed var(--c-soft); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); color: var(--c-muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: var(--lh-body); }
.s2-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding-bottom: var(--sp-5); color: var(--c-muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); text-align: center; line-height: 1.35; }
.s2-side svg { width: 100%; height: auto; }

/* ── overlays ────────────────────────────────────────────────── */
.scrim { position: absolute; inset: 0; background: var(--c-scrim); }
.card {
  position: absolute; left: 50%; top: var(--sp-8); transform: translateX(-50%);
  width: min(var(--card-w), calc(100vw - 2 * var(--sp-6))); max-height: calc(100vh - 2 * var(--sp-6));
  overflow: auto; border-radius: var(--r-xl); padding: var(--sp-5) var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.card-head { display: flex; align-items: center; gap: var(--sp-3); }
.card-head .tag { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); }
.card-title { font-size: var(--fs-title); font-weight: var(--fw-display); letter-spacing: var(--ls-bar); line-height: 1; }
.prov { font-size: var(--fs-label); font-weight: var(--fw-display); letter-spacing: .08em; padding: var(--sp-1) var(--sp-2); border: var(--bw-thin) dashed var(--c-text); border-radius: var(--r-sm); }
.card-rule { margin: 0; font-size: var(--card-text); font-weight: var(--fw-semi); line-height: 1.25; }
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.frame { display: flex; flex-direction: column; gap: var(--sp-2); }
.frame-box { height: var(--card-frame-h); border: var(--bw-control) solid var(--c-line); border-radius: var(--r-lg); background: var(--c-bg); display: flex; align-items: center; justify-content: center; position: relative; padding: var(--sp-3); transition: box-shadow var(--t-base); }
.frame-box svg { max-width: 100%; max-height: 100%; }
.frame.is-active .frame-box { box-shadow: 0 0 0 var(--bw) var(--c-text); }
.frame-n { position: absolute; left: var(--sz-frame-n-inset); top: var(--sz-frame-n-inset); width: var(--sz-frame-n); height: var(--sz-frame-n); border-radius: 50%; background: var(--c-tag-bg); color: var(--c-tag-on); font-size: var(--fs-xs); font-weight: var(--fw-display); display: flex; align-items: center; justify-content: center; }
.frame-cap { font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh-body); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.card-foot-left { color: var(--c-muted); }
.dots { display: flex; gap: var(--sp-2); }
.dots span { width: var(--sz-dot); height: var(--sz-dot); border-radius: 50%; border: var(--bw-thin) solid var(--c-text); }
.dots span.on { background: var(--c-text); }

.drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(var(--drawer-w), 100vw); background: var(--c-surface);
  border-left: var(--bw) solid var(--c-line); padding: var(--drawer-pad); display: flex; flex-direction: column; gap: var(--drawer-gap); overflow: auto;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-title { font-size: var(--fs-drawer-title); font-weight: var(--fw-display); letter-spacing: -.02em; }
.aid { display: grid; grid-template-columns: var(--aid-key-w) minmax(0, 1fr); gap: var(--sp-1) var(--sp-2); background: var(--c-bg); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-aid); line-height: 1.28; }
.aid b { font-weight: var(--fw-display); }
.card-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); }
.card-list button { display: flex; align-items: center; gap: var(--sp-2); border: var(--bw-thin) solid var(--c-soft); background: transparent; border-radius: var(--r-md); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-aid); font-weight: var(--fw-bold); min-width: 0; text-align: left; }
.card-list .tag { font-size: var(--fs-tag-xs); padding: var(--sp-half) var(--sp-1h); }
.card-list span.t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tips { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-aid); line-height: 1.28; }

.menu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--menu-w); border-radius: var(--r-xl); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.menu-title { font-size: var(--fs-menu-title); font-weight: var(--fw-display); letter-spacing: -.02em; }
.menu .item { text-align: left; border: var(--bw-control) solid var(--c-line); background: transparent; font-size: var(--fs-md); font-weight: var(--fw-bold); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
.menu .item.primary { background: var(--c-primary); color: var(--c-primary-on); font-weight: var(--fw-display); }
.menu .item.dev { border-style: dashed; color: var(--c-muted); font-size: var(--fs-xs); }
.menu hr { height: var(--bw-thin); background: var(--c-soft); border: 0; margin: var(--sp-1) 0; width: 100%; }
.setting { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-body); font-weight: var(--fw-bold); gap: var(--sp-2); }
.switch { width: var(--sz-switch-w); height: var(--sz-switch-h); border-radius: var(--r-pill); border: var(--bw-control) solid var(--c-line); position: relative; background: var(--c-bg); padding: 0; }
.switch::after { content: ''; position: absolute; left: var(--sp-3q); top: var(--sp-3q); width: var(--sz-switch-knob); height: var(--sz-switch-knob); border-radius: 50%; background: var(--c-text); transition: left var(--t-fast); }
.switch[aria-checked="true"]::after { left: var(--sz-switch-on); }
.switch[aria-checked="true"] { background: var(--c-capture); }
.seg.small button { font-size: var(--fs-aid); padding: var(--sp-1) var(--sp-2); }

/* ── motion: CCD round 3 (A1–A5) + round 4 ────────────────────────
   Durations, delays and easings are tokens (tokens.css ← motion-tokens.json).
   --fx-<effect> = time already elapsed in that effect (app.js), so a re-render
   continues an animation instead of restarting it, and a finished effect
   renders at its end. Reduced motion (bottom): nothing moves or scales —
   each change is instant or a --dur-fade fade. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes place-scale { from { transform: scale(var(--m-place-start-scale)); } to { transform: scale(1); } }
@keyframes removed-scale { from { transform: scale(1); } to { transform: scale(var(--m-ghost-end-scale)); } }
@keyframes ghost-scale { from { transform: scale(var(--m-ghost-in-scale)); } to { transform: scale(1); } }
@keyframes node-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes drawline { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes label-in { from { opacity: 0; transform: translateY(var(--m-label-rise)); } to { opacity: 1; transform: none; } }
@keyframes sticker-in { from { opacity: 0; transform: rotate(var(--sticker-tilt)) scale(var(--m-sticker-start-scale)); } to { opacity: 1; transform: rotate(var(--sticker-tilt)) scale(1); } }
@keyframes dim { from { opacity: 1; } to { opacity: var(--op-unfocused); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pop { from { transform: rotate(var(--sticker-tilt)) scale(.9); } to { transform: rotate(var(--sticker-tilt)) scale(1); } }
@keyframes rise { from { transform: translateY(var(--sp-4)); opacity: 0; } to { transform: none; opacity: 1; } }

/* A1 piece placed: appears at 1.15×, settles to 1×; the last-move dot fades in */
.hexboard .drop, .hexboard .jumped, .hexboard .ghost-in, .hexboard .win-dot { transform-box: fill-box; transform-origin: center; }
.hexboard .drop { animation: place-scale var(--dur-place) var(--ease-out) both, fade-in var(--dur-appear) var(--ease-linear) both; animation-delay: calc(-1 * var(--fx-drop)); }
.hexboard .drop-dot { animation: fade-in var(--dur-appear) var(--ease-linear) both; animation-delay: calc(var(--delay-dot-in) - var(--fx-drop)); }
/* A2 capture: hints fade, the piece flies (motion.js), the trail fades in on landing */
.hexboard .hint-out { animation: fade-out var(--dur-hint-out) var(--ease-out) both; animation-delay: calc(-1 * var(--fx-jump)); }
.hexboard .trail-in { animation: fade-in var(--dur-trail) var(--ease-out) both; animation-delay: calc(var(--delay-trail) - var(--fx-jump)); }
/* A3 piece removed: from the top of the arc it shrinks and fades; the dashed ghost and × fade in */
.hexboard .jumped { animation: removed-scale var(--dur-ghost) var(--ease-in) both, fade-out var(--dur-ghost) var(--ease-in) both; animation-delay: calc(var(--delay-apex) - var(--fx-jump)); }
.hexboard .ghost-in { animation: ghost-scale var(--dur-ghost-in) var(--ease-out) both, fade-in var(--dur-ghost-in) var(--ease-out) both; animation-delay: calc(var(--delay-apex) + var(--delay-ghost-outline) - var(--fx-jump)); }
.hexboard .cross-in { animation: fade-in var(--dur-appear) var(--ease-linear) both; animation-delay: calc(var(--delay-apex) + var(--delay-cross) - var(--fx-jump)); }
/* A4 turn handoff: the new colour wipes left → right over the old bar; labels swap */
.bar-wrap { position: relative; flex: none; isolation: isolate; }
.bar.under { position: absolute; inset: 0; z-index: 0; }
.bar-wrap > #bar { z-index: 1; }
.bar.wipe { animation: wipe var(--dur-handoff) var(--ease-in-out) both; animation-delay: calc(-1 * var(--fx-bar)); }
.bar.wipe:not(.win) .bar-left, .bar.wipe:not(.win) .bar-right { animation: label-in var(--dur-text-swap) var(--ease-out) both; animation-delay: calc(var(--delay-text-in) - var(--fx-bar)); }
.bar.under .bar-left, .bar.under .bar-right { animation: fade-out var(--dur-text-swap) var(--ease-in) both; animation-delay: calc(-1 * var(--fx-bar)); }
/* A5 win: the path draws, nodes pop as it reaches them, sides light, the bar flips to WINS */
.hexboard .win-line { animation: drawline var(--dur-path) var(--ease-in-out) both; animation-delay: calc(-1 * var(--fx-win)); }
.hexboard .win-dot { animation: node-pop var(--dur-node) var(--ease-out) both; animation-delay: calc(var(--dur-path) * var(--k, 0) - var(--fx-win)); }
.hexboard .rail-lit { animation: fade-in var(--dur-rail) var(--ease-out) both; animation-delay: calc(var(--delay-rails) - var(--fx-win)); }
.title-stack { display: grid; min-width: 0; }
.title-stack > .bar-title { grid-area: 1 / 1; }
.bar .title-old { animation: fade-out var(--dur-text-swap) var(--ease-in) both; animation-delay: calc(var(--delay-win-bar) - var(--fx-win)); }
.bar .title-new, .bar .right-new { animation: label-in var(--dur-text-swap) var(--ease-out) both; animation-delay: calc(var(--delay-win-label-in) - var(--fx-win)); }
.bar.win .sticker.win { animation: sticker-in var(--dur-sticker-pop) var(--ease-out) both; animation-delay: calc(var(--delay-win-label-in) - var(--fx-win)); }
/* round 4c: the jump a win stopped crossfades in, grey */
.hexboard .chain-stop { animation: fade-in var(--dur-chain-stop) var(--ease-out) both; animation-delay: calc(-1 * var(--fx-win)); }
/* round 4a: jumps not in focus fade to opacity.unfocused (mouse / keyboard only) */
.hexboard .unfocused { animation: dim var(--dur-focus-dim) var(--ease-out) both; animation-delay: calc(-1 * var(--fx-focus)); }
/* round 4e: where the computer looks — fades in, vanishes at once when it places */
.hexboard .scan { animation: fade-in var(--dur-fade) var(--ease-linear) both; animation-delay: calc(-1 * var(--fx-scan)); }
/* round 4b: the SAME POSITION note fades in after the handoff */
.rt.warn { animation: fade-in var(--dur-warn-in) var(--ease-out) both; animation-delay: calc(var(--dur-handoff) - var(--fx-warn)); }
/* round 2 motion kept: ring pulse, computer's piece flash, sticker pop, toast rise */
.hexboard .pulse { animation: pulse var(--t-pulse) ease-in-out 2; }
.hexboard .flash { animation: flash calc(var(--t-ai-min) / 2) steps(2, jump-none) 4; opacity: 0; }
.sticker.pop { animation: pop var(--t-fast) var(--ease-out); }
.toast { animation: rise var(--t-base) var(--ease-out); }
/* round 3 card loops: a frame plays its motion when it becomes the active frame */
.frame:not(.is-active) .hexboard * { animation: none !important; }
/* round 4f: one crossfade of the whole screen when the theme changes */
html.theme-fade, html.theme-fade * { transition: background-color var(--dur-fade) var(--ease-linear), color var(--dur-fade) var(--ease-linear), border-color var(--dur-fade) var(--ease-linear), fill var(--dur-fade) var(--ease-linear), stroke var(--dur-fade) var(--ease-linear) !important; }

/* reduced motion: instant or a fade, never movement or scale; fades never block input */
.reduced-motion .hexboard .drop, .reduced-motion .hexboard .drop-dot, .reduced-motion .hexboard .ghost-in, .reduced-motion .hexboard .cross-in,
.reduced-motion .hexboard .trail-in, .reduced-motion .hexboard .rail-lit, .reduced-motion .hexboard .chain-stop, .reduced-motion .hexboard .scan,
.reduced-motion .bar .title-new, .reduced-motion .bar .right-new, .reduced-motion .bar.win .sticker.win, .reduced-motion .rt.warn, .reduced-motion .toast,
.reduced-motion .bar.wipe { animation: fade-in var(--dur-fade) var(--ease-linear) both; animation-delay: var(--dur-instant); }
.reduced-motion .hexboard .jumped, .reduced-motion .bar .title-old,
.reduced-motion .bar.under .bar-left, .reduced-motion .bar.under .bar-right { animation: fade-out var(--dur-fade) var(--ease-linear) both; animation-delay: var(--dur-instant); }
.reduced-motion .hexboard .hint-out, .reduced-motion .hexboard .win-line, .reduced-motion .hexboard .win-dot, .reduced-motion .hexboard .pulse,
.reduced-motion .sticker.pop, .reduced-motion .bar.wipe:not(.win) .bar-left, .reduced-motion .bar.wipe:not(.win) .bar-right { animation: none; }
.reduced-motion .hexboard .hint-out { opacity: 0 !important; }
.reduced-motion .hexboard .unfocused { animation: none; opacity: var(--op-unfocused) !important; }
.reduced-motion .hexboard .flash { animation: flash var(--t-ai-min) steps(2, jump-none) 1; }
.reduced-motion .frame .hexboard * { animation: none !important; }
html.reduced-motion.theme-fade, html.reduced-motion.theme-fade * { transition: none !important; }

/* ── round 4 components ──────────────────────────────────────── */
/* 4f theme: S1 "Light | Dark" switch (selected side filled), S4 icon button */
.theme-switch { position: absolute; right: var(--sp-6); top: var(--sp-6); z-index: 2; display: flex; border: var(--bw-control) solid var(--c-line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sticker); background: var(--c-btn); }
.theme-switch button { display: flex; align-items: center; gap: var(--sp-1h); border: 0; background: var(--c-btn); color: var(--c-btn-on); font-size: var(--fs-body); font-weight: var(--fw-bold); padding: var(--sp-2) var(--sp-4); }
.theme-switch button + button { border-left: var(--bw-control) solid var(--c-line); }
.theme-switch button[aria-pressed="true"] { background: var(--c-primary); color: var(--c-primary-on); }
.btn.theme-btn { width: var(--sz-theme-btn-w); height: var(--sz-theme-btn-h); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
/* 4b repeat counter (M18, S7, C10): filled vs outlined, never colour alone */
.count-dots { display: inline-flex; gap: var(--sp-1); align-items: center; }
.count-dots span { width: var(--sz-count-dot); height: var(--sz-count-dot); border-radius: 50%; border: var(--bw-thin) solid var(--c-count-on); }
.count-dots span.on { background: var(--c-count-on); }
.frame-badge { position: absolute; left: 50%; bottom: var(--sz-frame-n-inset); transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap;
  background: var(--c-surface); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-sm); padding: var(--sp-half) var(--sp-2); font-size: var(--fs-tag-xs); font-weight: var(--fw-display); letter-spacing: .06em; }
/* 4d seat cards + 4e computer panel (S2 vs the computer) */
.seats { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.seat-card { width: var(--seat-card-w); max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1h); text-align: left;
  border: var(--bw) solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); color: var(--c-text); }
.seat-card.you { box-shadow: var(--shadow); }
.seat-card.cpu { border-style: dashed; border-color: var(--c-soft); background: transparent; }
.seat-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.seat-top .tag { font-size: var(--fs-tag-xs); }
.seat-title { font-size: var(--fs-lg); font-weight: var(--fw-display); }
.seat-note { font-size: var(--fs-aid); font-weight: var(--fw-semi); color: var(--c-muted); line-height: var(--lh-body); }
.seg button .shape.s20 { margin: 0 var(--sp-2) 0 0; vertical-align: middle; }
.seg button .shape.s20.chalk { margin: 0 var(--sp-2) 0 var(--sp-half); }
.s2-body.with-cpu { grid-template-columns: minmax(0, 1fr) var(--cpu-panel-w); }
.cpu-panel { align-self: start; display: flex; flex-direction: column; gap: var(--sp-2); border: var(--bw) solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4); background: var(--c-surface); }
.cpu-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-display); }
.dev-note { font-size: var(--fs-aid); color: var(--c-muted); border: var(--bw-thin) dashed var(--c-soft); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); }
.level-line { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-muted); }
.styles { display: flex; flex-direction: column; gap: var(--sp-2); }
.style-card { display: flex; align-items: center; gap: var(--sp-3); text-align: left; border: var(--bw-control) solid var(--c-soft); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: transparent; font-size: var(--fs-aid); line-height: var(--lh-body); }
.style-card b { font-size: var(--fs-body); }
.style-card[aria-checked="true"] { border-color: var(--c-line); border-width: var(--bw); }
.style-card .radio { flex: none; width: var(--sz-shape-20); height: var(--sz-shape-20); border-radius: 50%; border: var(--bw-thin) solid var(--c-text); }
.style-card[aria-checked="true"] .radio { box-shadow: inset 0 0 0 var(--sp-1) var(--c-surface); background: var(--c-text); }
.footer .summary { flex: 1; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt .count-dots { margin: var(--sp-half) 0; }

@media (max-width: 600px) {    /* phone: the S1 theme switch sits above the kicker */
  .theme-switch { top: var(--sp-3); right: var(--sp-3); }
  .theme-switch button { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
}
/* (the 1100 px step for .bar-right / .footer .goal is now fluid: --fs-bar-instr-fl, --fs-goal-fl) */

/* =============================================================
   Round 5 — mobile + readability (docs/design/visual-v2/round5/).
   app.js sets data-lay (xs · sm · land · md · lg) and data-chrome on
   <html> from the live viewport (layout.js). lg = desktop, unchanged.
   ============================================================= */
/* readability cues (desktop hover; touch uses press-and-hold for the cue) */
.hexboard .edge-hit { fill: none; stroke: transparent; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: help; outline: none; }
.hexboard .nbr { animation: fade-in var(--dur-fade) var(--ease-linear) both; animation-delay: calc(-1 * var(--fx-nbr)); }
.hexboard .cue { animation: fade-in var(--dur-fade) var(--ease-linear) both; animation-delay: calc(-1 * var(--fx-cue)); }
.hexboard .rail-hot { animation: fade-in var(--dur-place) var(--ease-out) both; animation-delay: calc(-1 * var(--fx-edge)); }
.hexboard.turn-in { animation: fade-in var(--dur-fade) var(--ease-linear) both; }
.line-key { flex: none; display: block; }
.goal .line-key { margin-right: var(--sp-1); }
.key-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-aid); font-weight: var(--fw-semi); }
.setting.col { flex-direction: column; align-items: flex-start; }
.setting-note { font-size: var(--fs-aid); font-weight: var(--fw-semi); color: var(--c-muted); }

/* rule cards: one looping stage (5d) */
.card-stage { position: relative; height: var(--card-stage-h); flex: none; border: var(--bw-control) solid var(--c-line); border-radius: var(--r-lg); background: var(--c-bg); overflow: hidden; }
.stage-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.stage-layer svg { display: block; }
.stage-layer.fading { animation: fade-in var(--dur-fade) var(--ease-linear) both; }
.caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.caps li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--card-text); font-weight: var(--fw-semi); line-height: var(--lh-body); color: var(--c-muted); }
.caps li.on { color: var(--c-text); font-weight: var(--fw-bold); }
.cap-n { flex: none; width: var(--sz-cap-n); height: var(--sz-cap-n); border-radius: 50%; border: var(--bw-thin) solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-tag-xs); font-weight: var(--fw-display); }
.caps li.on .cap-n { background: var(--c-text); color: var(--c-surface); border-color: var(--c-text); }
.cap-one { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: var(--card-cap-min); font-size: var(--card-text); font-weight: var(--fw-semi); line-height: var(--lh-body); }
.step-dots { flex: none; display: flex; gap: var(--sp-1); padding-top: var(--sp-1h); }
.step-dots span { width: var(--sz-step-dot); height: var(--sz-step-dot); border-radius: 50%; border: var(--bw-thin) solid var(--c-text); }
.step-dots span.on { background: var(--c-text); }
.sheet-handle { align-self: center; width: var(--ph-handle-w); height: var(--ph-handle-h); border-radius: var(--r-pill); background: var(--c-soft); flex: none; }

.reduced-motion .hexboard .nbr, .reduced-motion .hexboard .cue, .reduced-motion .hexboard .rail-hot, .reduced-motion .hexboard.turn-in,
.reduced-motion .stage-layer.fading { animation: fade-in var(--dur-fade) var(--ease-linear) both; animation-delay: var(--dur-instant); }
.reduced-motion .stage-layer .hexboard * { animation: none !important; }

/* ── phones, landscape rail, tablet: turn bar · board · dock ─────── */
:root:not([data-lay="lg"]) #upnext, :root:not([data-lay="lg"]) #rt,
:root:not([data-lay="lg"]) #toast, :root:not([data-lay="lg"]) #chip { display: none !important; }
:root:not([data-lay="lg"]) .board-wrap { inset: 0; }
:root:not([data-lay="lg"]) .board-wrap svg { max-width: none; max-height: none; flex: none; }
.bar.pbar { height: calc(var(--ph-bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--ph-pad) 0; gap: var(--ph-gap); justify-content: flex-start; }
.pbar .bar-left { flex: 1; min-width: 0; gap: var(--ph-gap); }
.pbar .bar-icon { border-width: var(--bw-heavy); }
.pbar .bar-icon.ink { width: var(--ph-glyph); height: var(--ph-glyph); }
.pbar .bar-icon.chalk { width: calc(var(--ph-glyph) * .74); height: calc(var(--ph-glyph) * .74); margin: 0 calc(var(--ph-glyph) * .13); }
.pbar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-half); }
.pbar-l1 { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pbar .bar-title, .pbar .bar-title.long { font-size: var(--ph-title); line-height: 1; letter-spacing: -.025em; min-width: 0; }
.pbar .sticker { font-size: var(--ph-sticker); padding: var(--sp-half) var(--sp-2); border-width: var(--bw-control); border-radius: var(--r-sm); margin-left: 0; }
.pbar-l2 { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--ph-line2); font-weight: var(--fw-semi); line-height: 1.15; }
.pbar-l2 .l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pbar .count-dots span { border-color: currentColor; }
.pbar .count-dots span.on { background: currentColor; }
.pbar .bar-right.up { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); text-align: right; font-size: var(--ph-up); }
:root:not([data-lay="lg"]) #stripe { height: var(--ph-stripe); margin-top: calc(-1 * var(--ph-stripe)); position: relative; z-index: 2; }
:root:not([data-lay="lg"]) #game .footer {
  height: calc(var(--ph-dock) + env(safe-area-inset-bottom)); flex-direction: column; justify-content: center; align-items: stretch; gap: var(--sp-2);
  padding: var(--ph-dock-pad) var(--ph-pad) calc(var(--ph-dock-pad) + env(safe-area-inset-bottom));
}
:root:not([data-lay="lg"]) #game.replay .footer { height: calc(var(--ph-dock) + var(--ph-replay-extra) + env(safe-area-inset-bottom)); }
.dock-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.dock-row .grow { flex: 1; }
.dock-row .btn { height: var(--ph-btn); font-size: var(--ph-btn-fs); padding: 0 var(--sp-3); flex: none; }
.dock-row .btn.sq { width: var(--ph-btn); padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: var(--fw-display); }
.dock-row .btn.sq.wide { width: var(--ph-btn-wide); }
.dock-row .btn.grow { flex: 1; }
.dock-row .btn.act { height: var(--ph-action); min-width: var(--ph-action); padding: 0 var(--sp-2); font-size: var(--ph-label2); font-weight: var(--fw-display); border-width: var(--bw-thin); }
.dock-row .scrubber { flex: 1; }
.dock-ctx { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
.dock-ctx-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-half); }
.dock-ctx .label { font-size: var(--ph-label); }
.dock-text { font-size: var(--ph-text); font-weight: var(--fw-bold); line-height: 1.2; text-wrap: pretty; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dock-strong { font-size: var(--ph-text2); font-weight: var(--fw-display); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-sub { font-size: var(--ph-label2); font-weight: var(--fw-semi); color: var(--c-muted); line-height: 1.2; }
.dock-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ph-toast-min); padding: var(--sp-1h) var(--sp-1h) var(--sp-1h) var(--sp-3); background: var(--c-bg); border: var(--bw) solid var(--c-line); border-radius: var(--ph-box-r); box-shadow: var(--shadow-sticker); }
.dock-box svg { flex: none; }
.dock-box .dock-text { flex: 1; min-width: 0; }
.dock-box .tag { align-self: flex-start; font-size: var(--fs-tag-xs); letter-spacing: var(--ls-label); padding: var(--sp-half) var(--sp-1h); }

/* phone landscape: a 120 px side rail — turn on top, message slot in the middle, buttons at the bottom */
:root[data-lay="land"] #game.game { display: grid; grid-template-columns: var(--ph-rail-w) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
:root[data-lay="land"] #game .bar-wrap { grid-column: 1; grid-row: 1; }
:root[data-lay="land"] #game #stripe { grid-column: 1; grid-row: 2; margin-top: 0; }
:root[data-lay="land"] #game .stage { grid-column: 2; grid-row: 1 / -1; }
:root[data-lay="land"] #game .footer, :root[data-lay="land"] #game.replay .footer { grid-column: 1; grid-row: 3; height: auto; justify-content: space-between; border-top: 0; border-right: var(--bar-border); padding: var(--ph-pad); }
:root[data-lay="land"] .bar.pbar { height: auto; padding: calc(var(--ph-pad) + env(safe-area-inset-top)) var(--ph-pad) var(--ph-pad); align-items: flex-start; border-right: var(--bar-border); }
:root[data-lay="land"] .pbar .bar-left { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
:root[data-lay="land"] .pbar-text { gap: var(--sp-1); }
:root[data-lay="land"] .pbar-l1, :root[data-lay="land"] .pbar-l2 { flex-wrap: wrap; }
:root[data-lay="land"] .pbar .bar-title, :root[data-lay="land"] .pbar-l2 .l2 { white-space: normal; }
:root[data-lay="land"] .dock-row { flex-wrap: wrap; align-content: flex-end; height: 100%; }
:root[data-lay="land"] .dock-row .dock-ctx, :root[data-lay="land"] .dock-row .dock-box, :root[data-lay="land"] .dock-row .scrubber { flex: 1 1 100%; align-self: center; }
:root[data-lay="land"] .dock-row .btn:not(.act) { flex: 1 1 0; min-width: 0; padding: 0; }
:root[data-lay="land"] .dock-row .btn.primary.grow { flex: 1 1 100%; }
:root[data-lay="land"] .dock-box { flex-direction: column; align-items: flex-start; padding: var(--sp-2); }
:root[data-lay="land"] .dock-text { -webkit-line-clamp: 6; }
:root[data-lay="land"] .dock-ctx { flex-direction: column; align-items: flex-start; }
:root[data-lay="land"] .dock-row .grow:not(.btn) { display: none; }

/* sheets: bottom sheets on phone portrait; centred dialogs in landscape and on tablets */
:root[data-lay="xs"] .card, :root[data-lay="sm"] .card, :root[data-lay="xs"] .menu, :root[data-lay="sm"] .menu {
  left: 0; right: 0; bottom: 0; top: auto; transform: none; width: 100%; max-height: calc(100% - var(--ph-sheet-gap) - env(safe-area-inset-top));
  border-radius: var(--ph-sheet-r) var(--ph-sheet-r) 0 0; border-bottom: 0; overflow: auto; padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
}
:root[data-lay="xs"] .drawer, :root[data-lay="sm"] .drawer { top: calc(var(--ph-sheet-gap) + env(safe-area-inset-top)); width: 100%; border-left: 0; border-top: var(--bw) solid var(--c-line); border-radius: var(--ph-sheet-r) var(--ph-sheet-r) 0 0; padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); }
:root[data-lay="xs"] .card-stage, :root[data-lay="sm"] .card-stage, :root[data-lay="md"] .card-stage { height: var(--card-stage-crop); }
:root[data-lay="xs"] .card-stage.full, :root[data-lay="sm"] .card-stage.full, :root[data-lay="md"] .card-stage.full { height: var(--card-stage-full); }
:root:not([data-lay="lg"]) .card-title { font-size: var(--card-title); }
:root:not([data-lay="lg"]) .card-head { flex-wrap: wrap; }
:root[data-lay="md"] .card { width: min(var(--ph-sheet-md), calc(100vw - 2 * var(--sp-3))); top: 50%; transform: translate(-50%, -50%); max-height: calc(100vh - 2 * var(--sp-3)); }
:root[data-lay="land"] .card {
  width: min(var(--ph-sheet-land), calc(100vw - 2 * var(--sp-3))); top: 50%; transform: translate(-50%, -50%); max-height: calc(100vh - 2 * var(--sp-3));
  display: grid; grid-template-columns: var(--land-stage-w) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: var(--sp-4); row-gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}
:root[data-lay="land"] .card > * { grid-column: 2; }
:root[data-lay="land"] .card .card-stage { grid-column: 1; grid-row: 1 / -1; height: auto; min-height: 0; }
:root[data-lay="land"] .card-foot { flex-wrap: wrap; }
:root[data-lay="land"] .menu, :root[data-lay="md"] .menu { max-height: calc(100vh - 2 * var(--sp-3)); overflow: auto; }
:root:not([data-lay="lg"]) .menu .item, :root:not([data-lay="lg"]) .card .btn, :root:not([data-lay="lg"]) .drawer .btn.icon { min-height: var(--ph-btn); }
:root:not([data-lay="lg"]) .seg.small button { min-height: var(--ph-btn); }
:root:not([data-lay="lg"]) .menu .seg.small { align-self: stretch; }
:root:not([data-lay="lg"]) .menu .seg.small button { flex: 1; }
:root:not([data-lay="lg"]) .switch { min-width: var(--ph-btn); }

/* S1 launch on phones and tablets: one column (landscape: text left, art right) */
:root:not([data-lay="lg"]) .s1 { display: flex; flex-direction: column; gap: var(--sp-3); padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)); }
:root:not([data-lay="lg"]) .s1-top { position: static; order: 1; flex-direction: column-reverse; gap: var(--sp-3); margin-top: calc(var(--ph-btn) + var(--sp-2)); }
:root:not([data-lay="lg"]) .display { font-size: var(--ph-s1-title); }
:root:not([data-lay="lg"]) .kicker { font-size: var(--ph-kicker); }
:root:not([data-lay="lg"]) .s1-hero { position: static; order: 2; flex: 1 1 0; min-height: 0; width: 100%; max-width: none; display: flex; align-items: center; justify-content: center; }
:root:not([data-lay="lg"]) .s1-hero svg { width: 100%; height: 100%; }
/* mouse: the launch art never outgrows its desktop size, and shrinks with the window (notes/fluid-check/) */
@media (pointer: fine) { :root:not([data-lay="lg"]) .s1-hero svg { max-width: min(var(--hero-w), 62vw); } }
:root:not([data-lay="lg"]) .s1-bottom { position: static; order: 3; gap: var(--sp-3); }
:root:not([data-lay="lg"]) .pitch { font-size: var(--ph-s1-pitch); }
:root:not([data-lay="lg"]) .wip { max-width: none; }
:root:not([data-lay="lg"]) .wip-close { min-width: var(--ph-btn); min-height: var(--ph-btn); }
:root:not([data-lay="lg"]) .s1-bottom .row { flex-direction: column; align-items: stretch; }
:root:not([data-lay="lg"]) .s1-bottom .btn.big { height: var(--ph-btn-launch); padding: 0; }
:root:not([data-lay="lg"]) .s1-bottom .btn.big.secondary { height: var(--ph-btn-primary); }
:root:not([data-lay="lg"]) .theme-switch { top: calc(var(--sp-3) + env(safe-area-inset-top)); right: var(--sp-3); }
:root:not([data-lay="lg"]) .theme-switch button { min-height: var(--ph-btn); min-width: var(--ph-theme-half); justify-content: center; }
:root[data-lay="land"] .s1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--sp-6); }
:root[data-lay="land"] .s1-top { grid-column: 1; grid-row: 1; margin-top: 0; }
:root[data-lay="land"] .s1-bottom { grid-column: 1; grid-row: 3; }
:root[data-lay="land"] .s1-hero { grid-column: 2; grid-row: 2 / -1; }
:root[data-lay="land"] .s1-bottom .row { flex-direction: row; }
:root[data-lay="land"] .s1-bottom .btn.big { flex: 1; }
:root[data-lay="land"] .pitch { font-size: var(--fs-md); }

/* S2 setup on phones: one column, scrolls; the board preview stays on tablets only */
:root[data-lay="xs"] .s2-body, :root[data-lay="sm"] .s2-body, :root[data-lay="land"] .s2-body { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4) var(--ph-pad); gap: var(--sp-4); }
:root[data-lay="xs"] .s2-side, :root[data-lay="sm"] .s2-side, :root[data-lay="land"] .s2-side { display: none; }
:root:not([data-lay="lg"]) .s2 > .bar { height: calc(var(--ph-bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--ph-pad) 0; }
:root:not([data-lay="lg"]) .s2 > .bar .bar-title { font-size: var(--ph-title); }
:root:not([data-lay="lg"]) .s2 > .bar .bar-right { font-size: var(--ph-line2); }
:root:not([data-lay="lg"]) .s2 .seg button { min-height: var(--ph-seg-setup); }
:root:not([data-lay="lg"]) .s2 > .footer { padding: 0 var(--ph-pad) env(safe-area-inset-bottom); height: calc(var(--ph-setup-dock) + env(safe-area-inset-bottom)); }
:root:not([data-lay="lg"]) .s2 > .footer .btn { min-height: var(--ph-btn-primary); }
:root[data-lay="xs"] .s2 .summary, :root[data-lay="sm"] .s2 .summary, :root[data-lay="land"] .s2 .summary { display: none; }
:root[data-lay="xs"] .s2 > .bar .bar-right { display: none; }
:root[data-lay="xs"] .card-foot, :root[data-lay="sm"] .card-foot { flex-wrap: wrap; }
:root[data-lay="xs"] .card-foot-left, :root[data-lay="sm"] .card-foot-left { flex: 1 1 100%; }
:root[data-lay="xs"] .card-foot .row, :root[data-lay="sm"] .card-foot .row { margin-left: auto; }
:root[data-lay="land"] .dock-box > * { max-width: 100%; }
:root[data-lay="land"] .dock-strong { white-space: normal; }
:root:not([data-lay="lg"]) #game { isolation: isolate; }   /* the stripe never shows through a sheet */
.pbar .bar-title, .pbar .bar-title.long { line-height: 1.15; }
.pbar .bar-right.up .label { color: inherit; opacity: .8; }

/* =============================================================
   Round 6 — phones play sideways; the board always leans
   (docs/design/visual-v2/round6/). app.js sets data-phone, data-rails
   and data-tc on <html>.
   ============================================================= */
.safe-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.dr-col, .menu-col { display: contents; }

/* 6c: sideways rails. The rail colours run under the insets; cells never do. */
:root[data-lay="land"] #game.game { grid-template-columns: calc(var(--ph-rail-w) + env(safe-area-inset-left)) minmax(0, 1fr); }
:root[data-lay="land"] .bar.pbar, :root[data-lay="land"] #game .footer { padding-left: calc(var(--ph-pad) + env(safe-area-inset-left)); }
:root[data-lay="land"] #game .board-wrap { inset: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) 0; }
:root[data-lay="land"] #game .footer { padding-bottom: calc(var(--ph-pad) + env(safe-area-inset-bottom)); }
:root[data-lay="land"][data-rails="2"] #game.game { grid-template-columns: calc(var(--ph-rail-w) + env(safe-area-inset-left)) minmax(0, 1fr) calc(var(--ph-rail-w) + env(safe-area-inset-right)); grid-template-rows: minmax(0, 1fr); }
:root[data-lay="land"][data-rails="2"] #game .bar-wrap { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
:root[data-lay="land"][data-rails="2"] #game .bar-wrap > #bar { flex: 1; }
:root[data-lay="land"][data-rails="2"] .bar.pbar { flex-direction: column; align-items: stretch; justify-content: space-between; padding-bottom: calc(var(--ph-pad) + env(safe-area-inset-bottom)); }
:root[data-lay="land"][data-rails="2"] .pbar .bar-left { flex: none; }
:root[data-lay="land"][data-rails="2"] .pbar .bar-right.up { align-items: flex-start; text-align: left; font-size: var(--ph-label2); }
:root[data-lay="land"][data-rails="2"] #game #stripe { grid-column: 1; grid-row: 1; justify-self: end; align-self: stretch; width: var(--ph-stripe); height: auto; margin: 0; z-index: 3; }
:root[data-lay="land"][data-rails="2"] #game .stage { grid-column: 2; grid-row: 1; }
:root[data-lay="land"][data-rails="2"] #game .board-wrap { inset: 0 0 env(safe-area-inset-bottom) 0; }
:root[data-lay="land"][data-rails="2"] #game .footer, :root[data-lay="land"][data-rails="2"] #game.replay .footer {
  grid-column: 3; grid-row: 1; border-right: 0; border-left: var(--bar-border);
  padding: calc(var(--ph-pad) + env(safe-area-inset-top)) calc(var(--ph-pad) + env(safe-area-inset-right)) calc(var(--ph-pad) + env(safe-area-inset-bottom)) var(--ph-pad);
}
:root[data-lay="land"][data-rails="2"] .dock-row { align-content: space-between; }

/* 6a: the turn card replaces the game screen on an upright phone */
:root[data-tc] #card, :root[data-tc] #drawer { display: none !important; }
.turncard { background: var(--c-bg); color: var(--c-text); }
.tc-head { flex: none; height: calc(var(--ph-bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--ph-pad) 0; display: flex; align-items: center; gap: var(--ph-gap); }
.tc-head .bar-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--ph-gap); }
.tc-head .bar-title { font-size: var(--ph-title); }
.tc-pill { flex: none; font-size: var(--tc-pill); font-weight: var(--fw-display); border: var(--bw-control) solid currentColor; border-radius: var(--r-pill); padding: var(--sp-half) var(--sp-2); }
.tc-stripe { height: var(--ph-stripe); }
.tc-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tc-gap); padding: var(--sp-4) var(--sp-5); text-align: center; }
.tc-title { margin: 0; font-size: var(--tc-title); font-weight: var(--fw-display); letter-spacing: -.025em; line-height: 1.05; max-width: var(--tc-text-max); }
.tc-text { margin: 0; font-size: var(--tc-body); font-weight: var(--fw-semi); line-height: 1.3; max-width: var(--tc-text-max); }
.tc-hint { margin: 0; font-size: var(--tc-hint); font-weight: var(--fw-semi); color: var(--c-muted); max-width: var(--tc-text-max); }
.tc-summary { width: 100%; max-width: var(--tc-summary-max); min-height: var(--tc-summary-min); box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-3);
  border: var(--bw-control) solid var(--c-line); border-radius: var(--ph-box-r); background: var(--c-surface); text-align: left; }
.tc-sum-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-half); }
.tc-sum-l1 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); font-size: var(--ph-text2); }
.tc-sum-l1 .vs { font-size: var(--ph-label2); color: var(--c-muted); font-weight: var(--fw-semi); margin: 0 var(--sp-1); }
.tc-sum-l2 { font-size: var(--ph-label2); font-weight: var(--fw-semi); color: var(--c-muted); }
.tc-change { flex: none; min-height: var(--touch-target); text-decoration: underline; color: var(--c-text); }
.tc-foot { flex: none; height: calc(var(--ph-dock) + env(safe-area-inset-bottom)); padding: 0 var(--ph-pad) env(safe-area-inset-bottom); display: flex; flex-direction: column; justify-content: center; border-top: var(--bar-border); background: var(--c-surface); }
.tc-foot { align-items: stretch; }
.tc-foot .dock-row .btn { height: var(--tc-btn); }
.tc-pic { flex: none; display: flex; align-items: center; justify-content: center; gap: var(--tc-gap); color: var(--c-text); }
.tc-phone { flex: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: var(--tc-bezel); border: var(--tc-border) solid var(--c-line); border-radius: 14px; background: var(--c-surface); }
.tc-screen { flex: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-sm); background: var(--c-bg); }
.tc-screen svg { display: block; flex: none; }
.tc-phone.turning { animation: tc-turn var(--dur-turn-loop) linear infinite; }
.tc-phone.turning .tc-screen svg { animation: tc-board var(--dur-turn-loop) linear infinite; }
/* 3.4 s loop: fade in, 0.5 s upright, 800 ms turn, hold, 300 ms fade (motion-tokens round6.turnPicture) */
@keyframes tc-turn {
  0% { transform: rotate(90deg); opacity: 0; }
  8.8% { opacity: 1; }
  14.7% { transform: rotate(90deg); animation-timing-function: var(--ease-turn); }
  38.2% { transform: rotate(0deg); }
  88.2% { opacity: 1; }
  97.1% { transform: rotate(0deg); opacity: 0; }
  97.2%, 100% { transform: rotate(90deg); opacity: 0; }
}
@keyframes tc-board {
  0%, 14.7% { transform: rotate(-90deg) scale(var(--tc-k0)); animation-timing-function: var(--ease-turn); }
  38.2%, 97.1% { transform: rotate(0deg) scale(1); }
  97.2%, 100% { transform: rotate(-90deg) scale(var(--tc-k0)); }
}
.tc-slot { flex: none; display: flex; align-items: center; justify-content: center; }
.tc-phone.upright { transform: rotate(90deg); }
.tc-phone.upright .tc-screen svg { transform: rotate(-90deg) scale(.56); }
.reduced-motion .tc-phone.turning, .reduced-motion .tc-phone.turning .tc-screen svg { animation: none !important; }

/* 6e: rule cards, How to play and the menu, sideways (checked at 568 × 276) */
:root[data-lay="land"] .card { --card-title: var(--land-card-title); --card-text: var(--land-card-text); max-height: calc(100% - 2 * var(--land-margin)); overflow: auto; }
:root[data-lay="land"] .card .card-rule { font-size: var(--land-card-text); margin: 0; }
:root[data-lay="land"] .drawer {
  isolation: isolate; inset: 0; width: auto; border: 0; border-radius: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; column-gap: var(--sp-5); row-gap: 0;
  padding: 0 calc(var(--sp-5) + env(safe-area-inset-right)) calc(var(--sp-5) + env(safe-area-inset-bottom)) calc(var(--sp-5) + env(safe-area-inset-left));
}
:root[data-lay="land"] .drawer-head { grid-column: 1 / -1; position: sticky; top: 0; z-index: 1; height: var(--land-howto-head); background: var(--c-surface); }
:root[data-lay="land"] .drawer .drawer-title { font-size: var(--fs-lg); }
:root[data-lay="land"] .dr-col { display: flex; flex-direction: column; gap: var(--drawer-gap); min-width: 0; }
:root[data-lay="land"] .menu { width: min(var(--ph-sheet-land), calc(100% - 2 * var(--land-margin))); max-height: calc(100% - 2 * var(--land-margin)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
:root[data-lay="land"] .menu-head { grid-column: 1 / -1; margin: 0; }
:root[data-lay="land"] .menu-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
:root[data-lay="land"] .menu-col.a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
:root[data-lay="land"] .menu-col.a .item { padding: var(--sp-1); text-align: center; font-size: var(--ph-label2); line-height: 1.15; }
:root[data-lay="land"] .menu-title { font-size: var(--fs-lg); }
:root[data-lay="land"] .menu .btn.icon { width: var(--ph-btn); height: var(--ph-btn); }
:root[data-lay="land"] .menu .setting > span, :root[data-lay="land"] .menu .setting.col > span:first-child { font-size: var(--fs-sm); }
:root[data-lay="land"] .card .card-foot-left { display: none; }
:root[data-lay="land"] .menu-col.a .item.primary, :root[data-lay="land"] .menu-col.a .setting, :root[data-lay="land"] .menu-col.a .item.dev { grid-column: 1 / -1; }
:root[data-lay="land"] .menu-col.a hr { display: none; }
:root[data-lay="land"] .menu .setting { gap: var(--sp-1); }
:root[data-lay="land"] .menu-col.b .setting { flex-direction: column; align-items: stretch; }

/* R6-Q3: one-time Home Screen tip (iPhone, in the browser) */
.home-tip { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: var(--bw-thin) solid var(--c-soft); border-radius: var(--r-md); font-size: var(--fs-aid); }
.home-tip > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-half); }
.home-tip .btn { flex: none; min-height: var(--touch-target); }
:root[data-lay="land"] .menu .setting-note { font-size: var(--ph-label2); line-height: 1.2; }
:root[data-lay="land"] .menu-col.b { gap: var(--sp-1); }
:root[data-lay="land"] .menu-col.a .item.primary { font-size: var(--fs-sm); }
/* one rail: the chip's words take the full width, Show me sits beside ☰ (fits 568 × 276) */
:root[data-lay="land"]:not([data-rails="2"]) .dock-row .chip-box { display: contents; }
:root[data-lay="land"]:not([data-rails="2"]) .dock-row .chip-box .dock-ctx-text { flex: 1 1 100%; }
:root[data-lay="land"]:not([data-rails="2"]) .dock-row .chip-box .btn.act { flex: 1 1 0; height: var(--ph-btn); }

/* Optional names on S2 (CCD names answer): glyph · seat word · field; nothing looks typed until it is */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.name-label { font-size: var(--name-label-fs); letter-spacing: var(--name-label-ls); }
.names { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--name-gap); }
:root[data-lay="md"] .names:not(.one), :root[data-lay="lg"] .names:not(.one) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--name-desk-gap); }
.name-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; scroll-margin-top: var(--sp-3); }
.name-seat { flex: none; width: var(--name-seat-w); font-size: var(--name-seat-fs); font-weight: var(--fw-display); color: var(--c-muted); }
.name-field { flex: 1; min-width: 0; height: var(--name-field-h); display: flex; align-items: center; gap: var(--sp-1); cursor: text;
  padding: 0 0 0 var(--name-field-px); border: var(--name-bw) solid var(--c-line); border-radius: var(--name-field-r); background: var(--name-fill); }
.name-field:focus-within { border: var(--name-bw-focus) solid var(--name-border-focus); box-shadow: var(--name-ring); }
.name-field input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; outline: none; font: inherit;
  font-size: var(--name-value-fs); font-weight: var(--fw-display); color: var(--c-text); }
.name-field input:focus-visible { outline: none; }
.name-field input::placeholder { font-size: var(--name-ph-fs); font-weight: var(--fw-semi); color: var(--c-muted); opacity: 1; }
:root[data-lay="md"] .name-field input, :root[data-lay="lg"] .name-field input { font-size: var(--name-value-fs-desk); }
.name-count { flex: none; font-size: var(--name-helper-fs); font-weight: var(--fw-semi); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.name-count:empty { display: none; }
.name-pencil, .name-clear { flex: none; display: grid; place-items: center; width: var(--name-clear-hit); height: var(--name-clear-hit); color: var(--c-muted); }
.name-pencil svg, .name-clear svg { width: var(--name-icon); height: var(--name-icon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.name-clear { border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: var(--name-field-r); }
.name-field .name-clear { display: none; }
.name-field.filled .name-clear { display: grid; }
.name-field.filled .name-pencil { display: none; }
.name-helper { font-size: var(--name-helper-fs); font-weight: var(--fw-semi); color: var(--c-muted); }
:root[data-lay="land"] .pbar .bar-title[data-short] { white-space: nowrap; }

/* Rules lab (EXPERIMENT): the menu switch row has a long label — keep the switch full size */
.setting.lab .switch { flex: none; }