/* ═══════════════════════════════════════════════════════════════
   App v2 — base + components (UI-12.3). Needs v2_tokens.css first.
   Naming: .block, .block__part, .block--variant, state classes .is-*.
   Dynamic colours come from classes (.player-1 … .player-4), never from inline styles.
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }   /* components set display, so [hidden] must win */
/* Readable by screen readers only (e.g. a screen's <h1> that the layout does not show). */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body {
  min-height: 100dvh;
  background: var(--bg-bottom);
  background-image: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:disabled, .is-empty, .is-locked { cursor: default; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; font-weight: var(--fw-number); }

/* ── ICONS (SVG as mask → takes currentColor) ── */
.icon {
  display: inline-block;
  width: var(--icon);
  height: var(--icon);
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-src) center / contain no-repeat;
          mask: var(--icon-src) center / contain no-repeat;
}
.icon--lg { --icon: 40px; }
.icon--sm { --icon: 18px; }
.icon--menu       { --icon-src: url('img/icons/menu.svg'); }
.icon--camera     { --icon-src: url('img/icons/camera.svg'); }
.icon--ticket     { --icon-src: url('img/icons/ticket.svg'); }
.icon--joker      { --icon-src: url('img/icons/joker.svg'); }
.icon--dice       { --icon-src: url('img/icons/dice.svg'); }
.icon--lock       { --icon-src: url('img/icons/lock.svg'); }
.icon--back       { --icon-src: url('img/icons/back.svg'); }
.icon--check      { --icon-src: url('img/icons/check.svg'); }
.icon--warning    { --icon-src: url('img/icons/warning.svg'); }
.icon--gondola    { --icon-src: url('img/icons/gondola.svg'); }
.icon--skier      { --icon-src: url('img/icons/skier.svg'); }
.icon--snowboard  { --icon-src: url('img/icons/snowboard.svg'); }
.icon--restaurant { --icon-src: url('img/icons/restaurant.svg'); }
.icon--bar        { --icon-src: url('img/icons/bar.svg'); }
.icon--plus       { --icon-src: url('img/icons/plus.svg'); }
.icon--minus      { --icon-src: url('img/icons/minus.svg'); }
.icon--trophy     { --icon-src: url('img/icons/trophy.svg'); }
.icon--grip       { --icon-src: url('img/icons/grip.svg'); }
.icon--home       { --icon-src: url('img/icons/home.svg'); }
.icon--book       { --icon-src: url('img/icons/book.svg'); }
.icon--sliders    { --icon-src: url('img/icons/sliders.svg'); }

/* ── APP SHELL ── */
.app {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 100dvh;
  max-width: var(--app-max);
  margin: 0 auto;
  padding:
    max(var(--space-3), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(var(--space-4), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  gap: var(--space-3);
}
/* Fixed rows, so hiding the top bar / score strip never moves the outlet into their row. */
.app > .topbar      { grid-row: 1; }
.app > .score-strip { grid-row: 2; }
.app > .outlet      { grid-row: 3; display: flex; flex-direction: column; min-width: 0; }
/* Screens without chrome: a single row, so no empty rows and no leftover row gaps above the outlet. */
.app--no-chrome          { grid-template-rows: 1fr; }
.app--no-chrome > .outlet { grid-row: 1; }
.screen             { flex: 1; animation: screen-in var(--dur) var(--ease-out); }
.screen--back       { animation-name: screen-in-back; }
.step { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

/* ── TOP BAR ── */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--tap-min); }
.topbar__clock { display: flex; align-items: baseline; gap: var(--space-2); }
.topbar__time { font-size: var(--fs-lg); font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }
.topbar__round { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }
.topbar__actions { display: flex; justify-content: flex-end; transition: opacity var(--dur) var(--ease-out); }
/* Inert between turns. The delay keeps the icons from flickering during the short turn-end moment;
   only a screen that stays (round event card) visibly dims them. */
.topbar__actions[inert] { opacity: 0.4; transition-delay: 1s; }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  color: var(--text-muted);
}
.icon-btn:active { transform: scale(0.9); }
.icon-btn.is-empty { color: var(--text-dim); }
.icon-btn__badge {
  position: absolute;
  top: 4px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-number);
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--secondary-shade);
}
.icon-btn__badge--joker { background: var(--joker); color: var(--text-on-light); }

/* ── PLAYER COLOURS ── */
/* --player-ink = text on the colour, --player-edge = inner ring (only the dark Alpine Night piece needs one). */
.player-1, .player-2, .player-3, .player-4 { --player-ink: #fff; --player-edge: transparent; }
.player-1 { --player: var(--player-1); }
.player-2 { --player: var(--player-2); }
.player-3 { --player: var(--player-3); --player-ink: var(--alpine-night); }
.player-4 { --player: var(--player-4); --player-edge: var(--player-4-edge); }

/* ── AVATAR (initial in a player-coloured circle) ── */
.avatar {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border-radius: 50%;
  background: var(--player);
  box-shadow: inset 0 0 0 2px var(--player-edge);
  color: var(--player-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-display);
  flex: none;
}
.avatar--md { width: var(--tap-min); height: var(--tap-min); font-size: var(--fs-lg); }
button.avatar:active { transform: scale(0.92); }
.avatar--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: var(--fs-display);
  box-shadow: inset 0 0 0 3px var(--player-edge), 0 0 0 14px color-mix(in srgb, var(--player) 18%, transparent);
}

/* ── SCORE STRIP ── */
/* A <button>: the whole strip opens the scores. */
.score-strip { display: flex; align-items: center; gap: var(--space-3); width: 100%; overflow-x: auto; scrollbar-width: none; text-align: left; }
.score-strip::-webkit-scrollbar { display: none; }
.score-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3) 0 5px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-weight: var(--fw-number);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.score-chip.is-current { background: var(--player); box-shadow: inset 0 0 0 2px var(--player-edge); color: var(--player-ink); }
.score-chip.is-current .avatar { background: var(--player-ink); color: var(--player); }
.score-chip.is-bumped { animation: pop var(--dur) var(--ease-spring); }

/* ── PLAYER HERO (turn start) ── */
.player-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-top: var(--space-5); }
.player-hero__name { font-size: var(--fs-xl); font-weight: var(--fw-display); margin-top: var(--space-4); }
.stars { color: var(--level-star); font-size: var(--fs-lg); letter-spacing: 2px; }

/* ── ACTION BUTTONS (turn start: Bergauf / Bergab / Pause) ── */
.action-list { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.btn-action {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 84px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--tile);
  box-shadow: 0 var(--press-depth) 0 var(--tile-shade);
  color: #fff;
  font-size: var(--fs-xl);
  font-weight: var(--fw-display);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-action:active { transform: translateY(var(--press-depth)); box-shadow: 0 0 0 var(--tile-shade); }
.btn-action__sub { display: block; font-size: var(--fs-sm); font-weight: var(--fw-label); opacity: 0.8; }
.btn-action__sub--wrap { margin-top: 2px; line-height: 1.3; }
.btn-action:has(.btn-action__sub--wrap) { padding-block: var(--space-3); }
.btn-action--bergauf { --tile: var(--secondary); --tile-shade: var(--secondary-shade); }
.btn-action--bergab  { --tile: var(--primary);   --tile-shade: var(--primary-shade); }
.btn-action--pause   { --tile: #9A6A48;          --tile-shade: #6b4630; }  /* wood of a mountain hut */
.btn-action.is-locked {
  --tile: var(--surface-sunken);
  --tile-shade: transparent;
  color: var(--text-muted);   /* the lock reason must stay readable */
  border: 2px solid var(--line);
}
.btn-action.is-locked .icon { opacity: 0.5; }
.btn-action.is-locked:active { transform: none; }
.btn-action.is-wiggling { animation: wiggle var(--dur-slow) var(--ease-out); }
.btn-action__lock { display: flex; align-items: center; gap: var(--space-1); }
.btn-action.is-locked .btn-action__lock .icon { opacity: 1; }

/* ── PRIMARY BUTTON (bottom of a step) ── */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 64px;
  border-radius: var(--radius-lg);
  background: var(--primary);
  box-shadow: 0 var(--press-depth) 0 var(--primary-shade);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: var(--fw-display);
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary:active { transform: translateY(var(--press-depth)); box-shadow: 0 0 0 var(--primary-shade); }
.btn-primary--secondary { background: var(--secondary); box-shadow: 0 var(--press-depth) 0 var(--secondary-shade); }
.btn-primary--negative  { background: var(--surface-raised); box-shadow: 0 var(--press-depth) 0 var(--line); color: var(--negative); }
.btn-primary:disabled   { background: var(--surface-sunken); box-shadow: none; color: var(--text-dim); transform: none; }

.btn-text {
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  color: var(--text-muted);
  font-weight: var(--fw-label);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-text:disabled { opacity: 0.4; }

/* ── DICE ── */
.dice-row { display: flex; justify-content: center; gap: var(--space-5); }
.dice-grid { display: grid; grid-template-columns: repeat(3, var(--die-md)); gap: var(--space-3); justify-content: center; }
.die {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--die-lg);
  height: var(--die-lg);
  border-radius: var(--radius-md);
  background: var(--die-light);
  color: var(--die-text);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.die--md { width: var(--die-md); height: var(--die-md); border-radius: 14px; }
.die--sm { width: var(--die-sm); height: var(--die-sm); border-radius: 12px; }
.die--event { background: var(--die-event); }
.die__value { font-size: var(--fs-xxl); font-weight: var(--fw-display); line-height: 1; }
.die__stars { color: var(--die-star); font-size: var(--fs-sm); line-height: 1; }
.die__face { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.die__img { width: 70%; height: 70%; object-fit: contain; mix-blend-mode: multiply; }   /* the PNGs' white square takes the die colour */
button.die { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
button.die:disabled { cursor: default; }
.die.is-rolling { animation: die-tumble var(--dur-slow) linear infinite; }
.die.is-landed  { animation: die-land var(--dur-slow) var(--ease-spring); }
.die.is-pickable { box-shadow: 0 0 0 3px var(--joker), 0 4px 0 rgba(0, 0, 0, 0.35); }
.die.is-held { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--secondary), 0 12px 0 rgba(0, 0, 0, 0.35); }
.die__corner {
  position: absolute;
  top: -10px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* Invisible hit area so the 32px badge still meets the 48px touch target. */
.die__corner::after { content: ''; position: absolute; inset: -8px; }
.die__corner--joker { background: var(--joker); color: var(--text-on-light); }
.die__corner--held  { background: var(--secondary); color: #fff; }

/* ── CROSSINGS HEADLINE ── */
.crossings { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.crossings__label { font-size: var(--fs-lg); font-weight: var(--fw-display); }
.crossings__dots { display: flex; gap: var(--space-2); }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text); }
.dot.is-used { background: var(--text); }
.crossings.is-full .dot { animation: pop var(--dur) var(--ease-spring); }

/* ── RESULT LINE (Bergauf combos, event effects) ── */
.result-lines { list-style: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-height: 40px; }
.result-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-weight: var(--fw-label);
}
.result-line--good { color: var(--positive); }
.result-line--bad  { color: var(--negative); }

/* ── JOKER BUTTON (use a Joker coin in context, e.g. turn a die) ── */
.btn-joker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--joker);
  color: var(--text-on-light);
  font-weight: var(--fw-label);
}
.btn-joker.is-active { background: var(--surface-raised); color: var(--joker); box-shadow: inset 0 0 0 2px var(--joker); }

/* ── FACE PICKER (Joker: turn a die to any face) ── */
.face-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); width: 100%; }
.face-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-size: var(--fs-xs);
  font-weight: var(--fw-label);
}
.face-option__img { width: 56px; height: 56px; padding: var(--space-1); border-radius: 12px; background: var(--die-light); object-fit: contain; }
.face-option.is-selected { box-shadow: inset 0 0 0 2px var(--text-muted); }

/* ── ACTION STACK (primary button + text button under it) ── */
.action-stack { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; }
.roll-dots { display: flex; gap: var(--space-2); }

/* ── SLOPE TILES (Bergab + Schlusswertung) ── */
.slope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; }
.slope-tile {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  justify-items: center;
  min-height: 136px;
  border-radius: var(--radius-lg);
  background: var(--slope);
  color: var(--slope-text, #fff);
  overflow: hidden;
  user-select: none;
}
.slope-tile--blue   { --slope: var(--piste-blue); }
.slope-tile--red    { --slope: var(--piste-red); }
.slope-tile--black  { --slope: var(--piste-black); box-shadow: inset 0 0 0 2px #5a6272; }
.slope-tile--yellow { --slope: var(--piste-yellow); --slope-text: var(--text-on-light); }
.slope-tile--yellow button:focus-visible { outline-color: var(--text-on-light); }
/* The top half adds, the bottom half removes: two full-width invisible buttons. */
.slope-tile__plus, .slope-tile__minus {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  display: flex;
  justify-content: center;
  color: inherit;
}
.slope-tile__plus  { top: 0;    align-items: flex-start; padding-top: var(--space-2); }
.slope-tile__minus { bottom: 0; align-items: flex-end;   padding-bottom: var(--space-2); }
.slope-tile__plus:active, .slope-tile__minus:active { background: rgba(255, 255, 255, 0.12); }
.slope-tile__name { grid-row: 2; font-size: var(--fs-lg); font-weight: var(--fw-display); pointer-events: none; }
.slope-tile__pts  { grid-row: 3; font-size: var(--fs-sm); font-weight: var(--fw-label); opacity: 0.85; pointer-events: none; }
.slope-tile__count {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--text-on-light);
  font-weight: var(--fw-display);
  pointer-events: none;
}
/* Top left, so it never collides with the count badge (top right). */
.slope-tile__flag { position: absolute; top: var(--space-2); left: var(--space-2); display: flex; pointer-events: none; }
/* Rolled smiley: the flag takes taps above the + half (take a Joker back, or use one on the sad smiley). */
.slope-tile__flag.is-tappable { z-index: 2; pointer-events: auto; }
.slope-tile__flag.is-tappable::after { content: ''; position: absolute; inset: -11px; }   /* 48px touch target around the 26px smiley */
.slope-tile__joker { top: -12px; right: -14px; width: 22px; height: 22px; }
.slope-tile__joker .icon { --icon: 14px; }
.slope-tile__smiley { width: 26px; height: 26px; border-radius: 6px; background: #fff; }
.slope-tile__minus:disabled { cursor: default; }
.slope-tile.is-selected { box-shadow: inset 0 0 0 3px #fff; }
.slope-tile.is-empty .slope-tile__minus { opacity: 0.3; }
.slope-tile.is-forbidden { opacity: 0.5; }
.slope-tile.is-forbidden.is-selected { opacity: 1; }
.slope-tile.is-bumped { animation: wiggle var(--dur-slow) var(--ease-out); }
@media (orientation: portrait) and (max-height: 760px) { .slope-tile { min-height: 104px; } }

/* ── STEP HEAD: back button left, title/progress centred (setup wizard, action steps) ── */
.step-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; min-height: var(--tap-min); }
.step-head > :last-child:not(:first-child) { justify-self: end; }
.step-head__title { font-size: var(--fs-lg); font-weight: var(--fw-display); }

/* ── STEP CTA: the step's main button(s), pinned to the bottom so they stay reachable
   when the step is taller than the phone screen (the content scrolls under them). ── */
.step-cta {
  position: sticky;
  bottom: 0;
  z-index: 1;
  width: 100%;
  margin-top: auto;
  padding: var(--space-4) 0 max(var(--space-2), env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg-bottom) var(--space-4));
}

/* ── PAUSE TILES (Restaurant / Bar) — wood of a mountain hut, like the Pause action button ── */
.pause-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; margin-top: var(--space-5); }
.pause-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: #9A6A48;
  box-shadow: 0 var(--press-depth) 0 #6b4630;
  color: #fff;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pause-tile__name { font-size: var(--fs-lg); font-weight: var(--fw-display); }
.pause-tile__pts  { font-size: var(--fs-xl); font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }
.pause-tile.is-selected { box-shadow: inset 0 0 0 3px #fff, 0 var(--press-depth) 0 #6b4630; }
.pause-tile.is-dimmed { opacity: 0.4; }
/* Short screens: flatter tiles, so the confirm button stays in view. */
@media (orientation: portrait) and (max-height: 760px) { .pause-tile { aspect-ratio: auto; min-height: 136px; } }

/* ── MENU ROWS ── */
.menu-list { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.menu-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--fs-lg);
  font-weight: var(--fw-display);
  text-align: left;
}
.menu-row:active { background: var(--surface-raised); }
.menu-row .icon { color: var(--text-muted); }

/* ── RANKING ROWS ── */
.rank-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.rank-row { display: grid; grid-template-columns: 2ch auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--surface); }
.rank-row__rank { color: var(--text-muted); font-weight: var(--fw-number); }
.rank-row__name { display: flex; flex-direction: column; font-weight: var(--fw-label); min-width: 0; }
.rank-row__meta { color: var(--level-star); font-size: var(--fs-sm); letter-spacing: 1px; }
.rank-row__stats { display: flex; gap: var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }
.rank-stat { display: inline-flex; align-items: center; gap: 3px; }
.rank-stat--joker .icon { color: var(--joker); }
.rank-stat--gratis .icon { color: var(--gratis); }
.rank-row__points { font-size: var(--fs-lg); font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }

/* ── SCORE TABLE (Punkteverlauf) — scrolls sideways inside itself, never the page ── */
.score-table-wrap { width: 100%; overflow-x: auto; }
.score-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.score-table th, .score-table td { padding: var(--space-1); text-align: center; }
.score-table thead th { position: sticky; top: 0; background: var(--bg-bottom); }
.score-table__time { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-label); text-align: left; white-space: nowrap; }
.score-table tr.is-live .score-table__time { color: var(--text); }
.score-cell {
  min-width: var(--tap-min);   /* stays tappable with 6 player columns */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: var(--tap-min);
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.score-cell--empty { color: var(--text-dim); }
.score-cell__points { font-weight: var(--fw-number); }
.score-cell__delta { font-size: var(--fs-xs); color: var(--text-muted); }
.score-cell__delta.is-up { color: var(--positive); }
.score-cell__delta.is-down { color: var(--negative); }
.round-entries { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.round-entries__item { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-raised); }

/* ── RULE CARDS (Würfel & Regeln) ── */
.rule-cards { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.rule-card { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); }
.rule-card__title { margin-bottom: var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-display); }
.rule-card__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.rule-item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: center; }
.rule-item__img { grid-row: span 2; width: 40px; height: 40px; padding: 3px; border-radius: 8px; background: var(--die-light); object-fit: contain; }
.rule-item__label { font-weight: var(--fw-label); }
.rule-item__text { grid-column: 2; color: var(--text-muted); font-size: var(--fs-sm); }
.rule-item__text:empty { display: none; }
.rule-item__img[hidden] + .rule-item__label, .rule-item__img[hidden] ~ .rule-item__text { grid-column: 1 / -1; }

/* ── ADJUST CARDS (Anpassungen) ── */
.adjust-list { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.adjust-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); }
.adjust-card__head { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-display); }
.adjust-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.adjust-card__label { color: var(--text-muted); font-weight: var(--fw-label); }
.stepper__input {
  width: 5ch;
  min-height: var(--tap-min);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-lg);   /* ≥16px, so iOS does not zoom in on focus */
  font-weight: var(--fw-number);
  text-align: center;
}
.stepper__input:focus { outline: none; border-color: var(--focus); }

/* ── SUMMARY LINES (Schlusswertung) ── */
.summary-lines { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.summary-line { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--surface); }
.summary-line__amount { font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }
.summary-line__amount.is-up { color: var(--positive); }
.summary-line__amount.is-down { color: var(--negative); }
.summary-total { display: flex; justify-content: space-between; width: 100%; padding: var(--space-3) var(--space-4); border-top: 2px solid var(--line); font-size: var(--fs-lg); font-weight: var(--fw-display); font-variant-numeric: tabular-nums; }

/* ── PODIUM (ranking): 2nd – 1st – 3rd, the block height shows the place ── */
.podium { list-style: none; display: flex; justify-content: center; align-items: flex-end; gap: var(--space-3); width: 100%; }
.podium__place { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); flex: 1; max-width: 120px; min-width: 0; }
.podium__place--pos-1 { order: 2; }
.podium__place--pos-2 { order: 1; }
.podium__place--pos-3 { order: 3; }
.podium__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-label); }
.podium__points { font-size: var(--fs-lg); font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }
.podium__block {
  display: grid;
  place-items: start center;
  width: 100%;
  padding-top: var(--space-2);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--player);
  box-shadow: inset 0 0 0 2px var(--player-edge);
  color: var(--player-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-display);
}
.podium__place--1 .podium__block { height: 120px; }
.podium__place--2 .podium__block { height: 88px; }
.podium__place--3 .podium__block { height: 64px; }
.podium__place--1 .avatar { width: 56px; height: 56px; font-size: var(--fs-xl); }

/* ── PUNKTEBLOCK TABLE — a copy of the printed pad. The wrapper scrolls in both directions,
   so the player header, the totals row and the time column can stay pinned (sticky). ── */
.pad-wrap { width: 100%; max-height: calc(100dvh - 120px); overflow: auto; border-radius: var(--radius-md); background: var(--surface); }
.pad { border-collapse: separate; border-spacing: 0; min-width: 100%; font-variant-numeric: tabular-nums; }
.pad th, .pad td { padding: 2px; text-align: center; border-bottom: 1px solid var(--line); }
.pad thead th, .pad thead td { position: sticky; background: var(--surface); z-index: 2; }
.pad thead tr:first-child > * { top: 0; }
/* Sticky head rows need fixed heights, so each knows its offset: names 62 · total 32 · stars 26 · sights 26. */
.pad thead tr.pad__total > * { top: 62px; height: 32px; }
.pad thead tr.pad__meta--stars > * { top: 94px; height: 26px; }
.pad thead tr.pad__meta--sights > * { top: 120px; height: 26px; border-bottom: 2px solid var(--line); }
.pad th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.pad thead th[scope="row"], .pad__corner { left: 0; z-index: 3; }
.pad__label { padding: 0 var(--space-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-label); text-align: left; white-space: nowrap; }
.pad__player { min-width: 64px; height: 62px; vertical-align: middle; }
.pad__player .avatar { margin: 0 auto 2px; }
.pad__name { display: block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-weight: var(--fw-label); }
.pad__talstation { display: block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: 10px; }
.pad__total > * { font-size: var(--fs-md); font-weight: var(--fw-number); color: var(--text); }
.pad__stars { color: var(--level-star); font-size: var(--fs-xs); letter-spacing: 1px; }
.pad__cell { width: 100%; min-width: var(--tap-min); min-height: var(--tap-min); border-radius: 8px; font-weight: var(--fw-number); }
.pad__cell:active { background: var(--surface-raised); }
/* The cell to fill in next (turn order): orange frame + a grey hint. */
.pad__cell.is-next { box-shadow: inset 0 0 0 2px var(--alpengluehen); background: color-mix(in srgb, var(--alpengluehen) 14%, transparent); }
.pad__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pad__next { color: var(--text-muted); font-size: 10px; font-weight: var(--fw-label); }
/* Jumping to the next cell must clear the sticky head (62 + 32 + 26 + 26). */
.pad__cell { scroll-margin-top: 150px; scroll-margin-bottom: var(--space-2); }
.pad tr.is-lunch  > * { background: color-mix(in srgb, var(--glacier-teal) 24%, var(--surface)); }
.pad tr.is-valley > * { background: color-mix(in srgb, var(--alpengluehen) 22%, var(--surface)); }
.pad__final > * { border-top: 2px solid var(--line); }

/* ── ENTRY SHEET (Punkteblock cell): number field, ±, quick chips ── */
.pad-entry { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.pad-entry__display { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.pad-entry__input {
  width: 6ch;
  min-height: 56px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-xl);
  font-weight: var(--fw-number);
  text-align: center;
}
.pad-entry__input:focus { outline: none; border-color: var(--focus); }
.chip-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.chip {
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-weight: var(--fw-label);
  font-variant-numeric: tabular-nums;
}
.chip:active { transform: scale(0.95); }
.chip:disabled { opacity: 0.35; transform: none; cursor: default; }
.pad-entry__hint { color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
/* Punkteblock quick chips in the colours of what they stand for (pistes; Extraaktivität = orange on the map). */
.chip--blue   { background: var(--piste-blue);   color: #fff; }
.chip--red    { background: var(--piste-red);    color: #fff; }
.chip--black  { background: var(--piste-black);  color: #fff; box-shadow: inset 0 0 0 1px var(--text-dim); }
.chip--yellow { background: var(--piste-yellow); color: var(--text-on-light); }
.chip--extra  { background: var(--extra-activity); color: var(--text-on-light); }
.pad-event__icon { display: block; margin: 0 auto; color: var(--level-star); }

/* ── NUMBER TILES (setup: how many players) ── */
/* Flex, not grid: an incomplete last row (5 tiles for 2–6 players) stays centred. */
.number-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); width: 100%; }
.number-tile {
  width: calc((100% - 2 * var(--space-3)) / 3);
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: 0 var(--press-depth) 0 var(--line);
  font-size: var(--fs-xxl);
  font-weight: var(--fw-display);
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.number-tile:active { transform: translateY(var(--press-depth)); box-shadow: 0 0 0 var(--line); }
.number-tile.is-selected { background: var(--secondary); box-shadow: 0 var(--press-depth) 0 var(--secondary-shade); }

/* ── TEXT FIELD + PLAYER ROW (setup names / Talstation) ── */
.text-field {
  width: 100%;
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-lg);   /* ≥16px, so iOS does not zoom in on focus */
  font-weight: var(--fw-label);
}
.text-field::placeholder { color: var(--text-dim); }
.text-field:focus { outline: none; border-color: var(--player, var(--focus)); }
.player-4 .text-field:focus { border-color: var(--player-4-edge); }
.field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.field__label { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-label); }

.player-rows { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.player-row { display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-md); }
.player-row.is-dragging { background: var(--surface-raised); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.player-row__handle {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: calc(-1 * var(--space-2));   /* full touch target, visually closer to the avatar */
  flex: none;
  color: var(--text-dim);
  cursor: grab;
  touch-action: none;   /* a drag on the handle must not scroll the page */
}
.player-row.is-dragging .player-row__handle { cursor: grabbing; color: var(--text); }

/* ── COLOUR SWATCHES (colour sheet) ── */
.swatches { display: grid; grid-template-columns: repeat(4, 64px); gap: var(--space-3); justify-content: center; }
.swatch-option { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-label); text-align: center; }
.swatch {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--player);
  box-shadow: inset 0 0 0 2px var(--player-edge);
  color: var(--player-ink);
  font-weight: var(--fw-display);
}
.swatch.is-selected { box-shadow: inset 0 0 0 2px var(--player-edge), 0 0 0 3px var(--surface), 0 0 0 6px #fff; }

/* ── CHOICE TILES + STEPPER (setup: game length) ── */
.choice-list { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.choice-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 84px;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: left;
}
.choice-tile.is-selected { border-color: var(--secondary); background: color-mix(in srgb, var(--secondary) 22%, var(--surface)); }
.choice-tile__select { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.choice-tile__title { display: block; font-size: var(--fs-lg); font-weight: var(--fw-display); }
.choice-tile__sub { display: block; color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-label); font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.stepper__btn {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: var(--surface-raised);
}
.stepper__btn:disabled { color: var(--text-dim); background: var(--surface-sunken); }
.stepper__value { min-width: 2ch; text-align: center; font-size: var(--fs-lg); font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }

/* ── SMALL ROUND OPTION (e.g. 🎲 Extraaktivität) ── */
.round-option {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px dashed var(--text-muted);
  color: var(--text-muted);
}
.round-option.is-done-good { border-style: solid; border-color: var(--positive); color: var(--positive); }
.round-option.is-done-bad  { border-style: solid; border-color: var(--negative); color: var(--negative); }
.round-option__label { font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }

/* Extraaktivität on the Bergab screen: a labelled pill, locked below ★★ (rule: from Fortgeschritten). */
.btn-extra {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 2px var(--extra-activity);
  color: var(--text);
  font-weight: var(--fw-label);
}
.btn-extra .icon { color: var(--extra-activity); }
.btn-extra__result { font-weight: var(--fw-number); font-variant-numeric: tabular-nums; }
.btn-extra__lock { display: inline-flex; align-items: center; gap: 2px; color: var(--text-muted); font-size: var(--fs-sm); }
.btn-extra.is-locked { box-shadow: inset 0 0 0 2px var(--line); color: var(--text-muted); }
.btn-extra.is-locked .icon { color: var(--text-muted); }
.btn-extra.is-done-good { box-shadow: inset 0 0 0 2px var(--positive); }
.btn-extra.is-done-good .btn-extra__result { color: var(--positive); }
.btn-extra.is-done-bad  { box-shadow: inset 0 0 0 2px var(--negative); }
.btn-extra.is-done-bad .btn-extra__result { color: var(--negative); }
.btn-extra:disabled { cursor: default; }

/* ── BLOCKED STEP (e.g. Unfall: no descent this turn) ── */
.blocked { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) 0; color: var(--negative); text-align: center; }
.blocked__text { font-size: var(--fs-lg); font-weight: var(--fw-display); color: var(--text); }

/* ── ENTSCHEIDUNGSWÜRFEL result (sheet body) ── */
.decision-die { width: 96px; height: 96px; padding: var(--space-2); border-radius: var(--radius-md); background: var(--die-light); animation: burst var(--dur-slow) var(--ease-spring); }

/* ── BOTTOM SHEET ── */
.sheet-layer { position: fixed; inset: 0; z-index: 10; }
.scrim { position: fixed; inset: 0; background: var(--scrim); animation: fade-in var(--dur) var(--ease-out); }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--app-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5) max(var(--space-5), env(safe-area-inset-bottom));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  animation: sheet-up var(--dur) var(--ease-out);
}
.sheet::before { content: ''; width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--line); }
.sheet__title { font-size: var(--fs-lg); font-weight: var(--fw-display); text-align: center; }
.sheet__text  { color: var(--text-muted); text-align: center; }
.sheet__body:empty { display: none; }
.sheet__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; }

/* ── FULL-SCREEN CARD (round events, game end) ── */
.event-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 60dvh;
  text-align: center;
}
.event-card__title { font-size: var(--fs-xl); font-weight: var(--fw-display); }
.event-card__text  { color: var(--text-muted); }

/* ── POINTS BURST (turn end) ── */
.points-burst { font-size: var(--fs-display); font-weight: var(--fw-display); color: var(--positive); animation: burst var(--dur-slow) var(--ease-spring); }
.points-burst--negative { color: var(--negative); }

/* ── CELEBRATION CARD (openSheet variant 'celebrate' — level-up) ── */
.sheet-layer--celebrate { display: grid; place-items: center; padding: var(--space-4); }
.sheet-layer--celebrate .sheet {
  position: relative;
  inset: auto;
  width: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  transform: none;
  animation: celebrate-in var(--dur-slow) var(--ease-spring);
}
.sheet-layer--celebrate .sheet::before { display: none; }
.sheet-layer--celebrate .sheet__title { font-size: var(--fs-xl); }
.level-up { display: flex; gap: var(--space-2); color: var(--level-star); font-size: 56px; line-height: 1; }
.level-up__star.is-new { animation: star-in calc(var(--dur-slow) * 2) var(--ease-spring) var(--dur-slow) backwards; }

/* ── CONFETTI (v2_fx.js) — 24 pieces; nth-child rules vary place, colour, size and timing ── */
.fx-host { position: fixed; inset: 0; z-index: 11; pointer-events: none; }
.fx-host:empty { display: none; }
.confetti { position: absolute; inset: 0; overflow: hidden; }
.confetti > span {
  --x: 50; --c: var(--level-star); --t: 2.4s; --d: 0s; --drift: 30px;
  position: absolute;
  top: -20px;
  left: calc(var(--x) * 1%);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--c);
  animation: confetti-fall var(--t) cubic-bezier(0.35, 0, 0.65, 1) var(--d) both;
}
.confetti > span:nth-child(1)  { --x: 3; }   .confetti > span:nth-child(2)  { --x: 91; }
.confetti > span:nth-child(3)  { --x: 17; }  .confetti > span:nth-child(4)  { --x: 62; }
.confetti > span:nth-child(5)  { --x: 34; }  .confetti > span:nth-child(6)  { --x: 79; }
.confetti > span:nth-child(7)  { --x: 8; }   .confetti > span:nth-child(8)  { --x: 49; }
.confetti > span:nth-child(9)  { --x: 71; }  .confetti > span:nth-child(10) { --x: 25; }
.confetti > span:nth-child(11) { --x: 96; }  .confetti > span:nth-child(12) { --x: 41; }
.confetti > span:nth-child(13) { --x: 13; }  .confetti > span:nth-child(14) { --x: 57; }
.confetti > span:nth-child(15) { --x: 86; }  .confetti > span:nth-child(16) { --x: 30; }
.confetti > span:nth-child(17) { --x: 67; }  .confetti > span:nth-child(18) { --x: 21; }
.confetti > span:nth-child(19) { --x: 75; }  .confetti > span:nth-child(20) { --x: 45; }
.confetti > span:nth-child(21) { --x: 0; }   .confetti > span:nth-child(22) { --x: 83; }
.confetti > span:nth-child(23) { --x: 53; }  .confetti > span:nth-child(24) { --x: 37; }
.confetti > span:nth-child(6n+1) { --c: var(--player-1); }
.confetti > span:nth-child(6n+2) { --c: var(--player-2); }
.confetti > span:nth-child(6n+3) { --c: var(--level-star); }
.confetti > span:nth-child(6n+4) { --c: var(--player-3); }
.confetti > span:nth-child(6n+5) { --c: var(--summit-white); }
.confetti > span:nth-child(6n+6) { --c: var(--positive); }
.confetti > span:nth-child(3n+1) { --t: 2.1s; width: 6px; height: 10px; }
.confetti > span:nth-child(3n+2) { --t: 2.7s; }
.confetti > span:nth-child(3n)   { --t: 3.2s; width: 10px; height: 10px; border-radius: 50%; }
.confetti > span:nth-child(4n+1) { --d: 0s; }
.confetti > span:nth-child(4n+2) { --d: 0.15s; }
.confetti > span:nth-child(4n+3) { --d: 0.35s; }
.confetti > span:nth-child(4n)   { --d: 0.55s; }
.confetti > span:nth-child(even) { --drift: -30px; }

/* ── LANDSCAPE (phones on their side: ~320–430 px high) — flow_spec §9, UI-12.15 ──
   Height is the scarce resource: the top bar and the score strip share one row, steps split
   into two columns, tiles get flatter. Screen-specific splits live in v2_screens.css. */
@media (orientation: landscape) and (max-height: 540px) {
  /* Too little height for four pinned rows: only names + total stay; level and Sehenswürdigkeiten scroll. */
  .pad thead tr.pad__meta > * { position: static; }
  .pad thead tr.pad__meta > th[scope="row"] { position: sticky; top: auto; }
  .pad thead tr.pad__meta--sights > * { border-bottom: 1px solid var(--line); }
  .pad thead tr.pad__total > * { border-bottom: 2px solid var(--line); }
  .pad__cell { scroll-margin-top: 98px; }

  .app {
    max-width: 900px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-4);
  }
  .app > .topbar      { grid-row: 1; grid-column: 1; grid-template-columns: auto auto auto; column-gap: var(--space-3); }
  .app > .score-strip { grid-row: 1; grid-column: 2; }
  .app > .outlet      { grid-row: 2; grid-column: 1 / -1; }
  .app--no-chrome          { grid-template-rows: 1fr; }
  .app--no-chrome > .outlet { grid-row: 1; }

  .step--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "aside main" "aside cta";
    align-items: center;
    column-gap: var(--space-6);
  }
  .step--split:has(> .step-head) { grid-template-areas: "head head" "aside main" "aside cta"; }
  .step--split > .step-head   { grid-area: head; }
  .step--split > .step__aside { grid-area: aside; }
  .step--split > .step__main  { grid-area: main; }
  .step--split > .step__cta   { grid-area: cta; }

  /* The main button sits in its own grid cell here — sticky would only cover the content above it. */
  .step--split > .step-cta { position: static; padding-top: 0; background: none; }
  .step-cta { padding-top: var(--space-2); }
  .btn-primary { min-height: 56px; }

  /* Flatter slope tiles: a smaller +/− and name, so they never collide. */
  .slope-tile { min-height: 92px; }
  .slope-tile__plus  { padding-top: var(--space-1); }
  .slope-tile__minus { padding-bottom: var(--space-1); }
  .slope-tile__plus .icon, .slope-tile__minus .icon { --icon: 18px; }
  .slope-tile__name { font-size: var(--fs-md); }
  .btn-action { min-height: 64px; }
  .avatar--lg { --avatar-lg: 72px; }
  .pause-tiles { margin-top: 0; }
  .pause-tile { aspect-ratio: auto; min-height: 112px; }
  .sheet {
    max-width: 480px;
    max-height: calc(100dvh - var(--space-5));
    overflow-y: auto;
    bottom: 50%;
    transform: translateY(50%);
    border-radius: var(--radius-lg);
    animation-name: fade-in;
  }
  .sheet::before { display: none; }   /* a centred card has no drag handle */
}

/* ── MOTION ──
   Note for the JS: a CSS animation only replays when its class is newly added.
   To replay .is-bumped / .is-full, remove the class, force a reflow (el.offsetWidth), then add it again. */
@keyframes die-tumble {
  0%, 100% { transform: none; }
  25% { transform: translateY(-14px) rotate(-14deg) scale(1.06); }
  50% { transform: translateY(-4px) rotate(10deg); }
  75% { transform: translateY(-10px) rotate(-6deg) scale(1.03); }
}
@keyframes die-land { 0% { transform: translateY(-6px) scale(1.12); } 60% { transform: translateY(0) scale(0.96); } 100% { transform: none; } }
@keyframes wiggle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes pop    { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes burst  { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes screen-in      { from { opacity: 0; transform: translateX(24px); }  to { opacity: 1; transform: none; } }
@keyframes screen-in-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes celebrate-in  { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes star-in       { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes confetti-fall { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--drift), 110vh) rotate(720deg); } }
@keyframes rise-in       { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes swing         { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } }