/* components.css – shared building blocks. Games can use all classes here.
   Naming: plain words, modifiers as is-* (state) or -variant suffix. */

/* ---------------------------------------------------------------------- */
/* Screens                                                                 */
/* ---------------------------------------------------------------------- */
.screen {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  /* explicit track: a nowrap title must not widen the screen past the viewport */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  min-height: 0;
  min-width: 0;
}
.screen-body {
  min-height: 0;
  padding: 4px 4px calc(var(--ledge) + 18px);
}
.screen-narrow { width: min(100%, 760px); margin-inline: auto; }

/* ---------------------------------------------------------------------- */
/* Top bar                                                                 */
/* ---------------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
}
.topbar-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-l);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* ---------------------------------------------------------------------- */
/* Buttons – chunky board-game pieces with an ink ledge that squishes      */
/* ---------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--card);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 1.05em;
  margin-bottom: var(--ledge);
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-m);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-m);
  line-height: 1;
  box-shadow: 0 var(--ledge) 0 var(--ledge-c);
  transition: transform var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out, background-color var(--dur-2);
  white-space: nowrap;
}
.btn svg.icon { width: 1.25em; height: 1.25em; flex: none; }
.btn:active:not(:disabled), .btn.is-pressed {
  transform: translateY(calc(var(--ledge) - 1px)) scale(.985, .96);
  box-shadow: 0 1px 0 var(--ledge-c);
}
.btn:disabled, .btn[aria-disabled="true"] {
  --btn-bg: var(--paper-2);
  --btn-fg: var(--ink-3);
  box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--ledge-c) 35%, transparent);
  border-color: color-mix(in srgb, var(--edge) 40%, transparent);
}
.btn-primary { --btn-bg: var(--coral); --btn-fg: var(--on-accent); }
.btn-sun   { --btn-bg: var(--sun);   --btn-fg: var(--on-color); }
.btn-sky   { --btn-bg: var(--sky);   --btn-fg: var(--on-color); }
.btn-coral { --btn-bg: var(--coral); --btn-fg: var(--on-color); }
.btn-mint  { --btn-bg: var(--mint);  --btn-fg: var(--on-color); }
.btn-lav   { --btn-bg: var(--lav);   --btn-fg: var(--on-color); }
.btn-paper { --btn-bg: var(--paper-2); }

.btn-big {
  min-height: var(--tap-l);
  padding: 0 1.3em;
  font-size: var(--fs-l);
  border-radius: var(--r-l);
}
.btn-huge {
  min-height: calc(var(--tap-l) + 14px);
  padding: 0 1.5em;
  font-size: var(--fs-xl);
  border-radius: var(--r-xl);
}
.btn-block { display: flex; width: 100%; }

/* round icon button (back, sound, menu) */
.btn-icon {
  padding: 0;
  width: var(--tap-min);
  border-radius: 50%;
}
.btn-icon svg.icon { width: 52%; height: 52%; }

/* text-only quiet button */
.btn-quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  margin-bottom: 0;
  color: var(--ink-2);
}
.btn-quiet:active:not(:disabled) { transform: scale(.96); box-shadow: none; }

/* ---------------------------------------------------------------------- */
/* Sticker cards                                                           */
/* ---------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--card);
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--ledge);
}
.card-pad { padding: var(--pad); }
.card-section + .card-section { margin-top: calc(var(--gap) * 1.6); }

.pressable {
  transition: transform var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out;
  cursor: pointer;
}
.pressable:active:not([aria-disabled="true"]) {
  transform: translateY(calc(var(--ledge) - 1px)) scale(.985, .97);
  box-shadow: 0 1px 0 var(--ledge-c);
}

/* stitched seam like on a suitcase */
.stitched::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2.5px dashed color-mix(in srgb, #fff 70%, transparent);
  border-radius: calc(var(--r-xl) - 9px);
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Hub tiles                                                               */
/* ---------------------------------------------------------------------- */
.hub {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: var(--gap);
  min-height: 0;
}
.hub-greeting {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
}
.hub-greeting .koffi { width: clamp(92px, 17vmin, 168px); flex: none; }
.bubble {
  position: relative;
  background: var(--card);
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-l);
  padding: .55em .9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-l);
  line-height: 1.15;
  box-shadow: var(--shadow-soft);
}
/* Tail pointing to Koffi: an ink triangle (::before) whose base ends inside the bubble's border, plus a card-coloured
   triangle (::after) inset by the stroke width that reaches into the bubble and covers its (round) border there –
   so the tail merges with the outline even at the semicircular end of a one-line bubble. Geometry for a 3 px stroke:
   outline tip −18 px, base −1 px, height 20 px; fill tip −12.1 px (stroke / sin of the half angle), right edge +4 px. */
.bubble::before, .bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  pointer-events: none;
}
.bubble::before { left: -18px; width: 17px; height: 20px; background: var(--edge); }
.bubble::after { left: -12.1px; width: 16.1px; height: 18.94px; background: var(--card); }
.bubble small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-s);
  color: var(--ink-2);
  margin-top: .2em;
}

.hub-tiles {
  display: grid;
  gap: calc(var(--gap) + 4px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  min-height: 0;
  padding: 6px 4px calc(var(--ledge) + 6px);
}
.tile {
  --tile-bg: var(--sky);
  --tile-rot: 0deg;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 18px 14px 20px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-xl);
  background: var(--tile-bg);
  color: var(--on-color);
  box-shadow: 0 calc(var(--ledge) + 2px) 0 var(--ledge-c), var(--shadow-soft);
  transform: rotate(var(--tile-rot));
  transition: transform var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out;
  text-align: center;
  margin-bottom: var(--ledge);
}
.tile:active {
  transform: rotate(var(--tile-rot)) translateY(var(--ledge)) scale(.98, .96);
  box-shadow: 0 1px 0 var(--ledge-c);
}
.tile-art { width: min(100%, 260px); height: 100%; min-height: 0; max-height: 210px; object-fit: contain; }
.tile-label {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-xl);
  line-height: 1;
  background: var(--card);
  color: var(--ink);
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-pill);
  padding: .22em .75em .26em;
  box-shadow: 0 3px 0 var(--ledge-c);
}
.tile-spiele    { --tile-bg: var(--sky);   --tile-rot: -1.4deg; }
.tile-mathe     { --tile-bg: var(--mint);  --tile-rot: .9deg; }
.tile-werkzeuge { --tile-bg: var(--sun);   --tile-rot: -.6deg; }

.hub-footer {
  display: flex;
  justify-content: center;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  min-height: 0;
}

/* portrait (phone and iPad): tiles stacked as wide stickers */
.portrait .hub-tiles {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
}
.portrait .tile {
  grid-template-rows: none;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: start;
  padding: 10px 22px 10px 18px;
}
.portrait .tile-art { order: 2; width: auto; height: 100%; max-height: 220px; max-width: 46vw; }
.is-phone.portrait .tile-art { max-height: 120px; max-width: 40vw; }
.is-phone.portrait .tile-label { font-size: var(--fs-l); }
.portrait .tile-label { order: 1; }
.is-tablet.portrait .tile-label { font-size: var(--fs-xxl); padding: .2em .8em .25em; }
.is-tablet.portrait .hub-greeting .koffi { width: 180px; }
.landscape .hub-tiles { align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.landscape .tile { height: 100%; }
.landscape .tile-art { height: 100%; max-height: 260px; }
.is-phone.landscape .hub-greeting .koffi { width: 64px; }
.is-phone.landscape .bubble { font-size: var(--fs-m); padding: .35em .8em; }
.is-phone.landscape .tile { padding: 8px 10px 10px; }
.is-phone.landscape .tile-label { font-size: var(--fs-l); }

/* ---------------------------------------------------------------------- */
/* Chips, badges, ribbons                                                  */
/* ---------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: var(--tap-min);
  padding: 4px 14px 4px 5px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-m);
  box-shadow: 0 3px 0 var(--ledge-c);
  margin-bottom: 3px;
  max-width: 100%;
  transition: transform var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out, background-color var(--dur-2);
}
.chip:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge-c); }
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.no-avatar { padding-left: 14px; }
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--sun);
  color: var(--on-color);
}
.chip svg.icon { width: 1.2em; height: 1.2em; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .18em .55em;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.badge svg.icon { width: 1.15em; height: 1.15em; }
.badge-ai { background: var(--lav-t); }
.badge-ok { background: var(--mint-t); }

.ribbon {
  position: absolute;
  bottom: 8px;
  right: -6px;
  padding: .2em .6em;
  background: var(--sun);
  color: var(--on-color);
  border: var(--stroke-w) solid var(--edge);
  border-radius: 10px 10px 2px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  transform: rotate(-4deg);
  box-shadow: 0 3px 0 var(--ledge-c);
  z-index: 1;
}

/* ---------------------------------------------------------------------- */
/* Avatars                                                                  */
/* ---------------------------------------------------------------------- */
.avatar {
  --size: 44px;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 50%;
  border: var(--stroke-w) solid var(--edge);
  background: var(--card);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; }
.avatar-s { --size: 36px; }
.avatar-l { --size: 72px; }
.avatar-xl { --size: 112px; }
.chip .avatar { --size: calc(var(--tap-min) - 14px); border-width: 2.5px; }

/* ---------------------------------------------------------------------- */
/* Game & tool cards (overview grid)                                      */
/* ---------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: calc(var(--gap) + 4px) var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}
.is-phone .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }

.game-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  text-align: left;
  padding: 0;
  color: var(--ink);
  min-width: 0;
}
.game-card-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--cat-strategie);
  border-bottom: var(--stroke-w) solid var(--edge);
}
.game-card-art img { width: 56%; height: 80%; object-fit: contain; }
.game-card .play-dot {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: var(--on-color);
  border: var(--stroke-w) solid var(--edge);
  box-shadow: 0 3px 0 var(--ledge-c);
}
.game-card .play-dot svg.icon { width: 20px; height: 20px; margin-left: 3px; }
.game-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; align-content: start; }
.game-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-m);
  line-height: 1.1;
}
.game-card-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.game-card[data-cat="glueck"] .game-card-art { background: var(--cat-glueck); }
.game-card[data-cat="merk"] .game-card-art { background: var(--cat-merk); }
.game-card[data-cat="logik"] .game-card-art { background: var(--cat-logik); }
.game-card[data-cat="mathe"] .game-card-art { background: var(--cat-mathe); }
.game-card.is-soon { box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--ledge-c) 45%, transparent); cursor: default; }
.game-card.is-soon .game-card-art img { opacity: .5; filter: grayscale(.35); }
.game-card.is-soon .game-card-title, .game-card.is-soon .game-card-meta { opacity: .62; }
.game-card.is-fit::before {
  content: "";
  position: absolute; left: 10px; top: 10px; z-index: 1;
  width: 30px; height: 30px;
  background: var(--sun);
  border: 2.5px solid var(--edge);
  border-radius: 50%;
  -webkit-mask: none;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-l);
  margin: 6px 4px 12px;
}

/* ---------------------------------------------------------------------- */
/* Filter bar                                                               */
/* ---------------------------------------------------------------------- */
.filters {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 14px;
}
.filter-group { display: flex; gap: 6px; align-items: center; }
.filter-group-label { display: inline-flex; color: var(--ink-2); margin-right: 2px; }
.filter-group-label svg.icon { width: 30px; height: 30px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 12px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-s);
  box-shadow: 0 3px 0 var(--ledge-c);
  margin-bottom: 3px;
}
.filter-chip svg.icon { width: 1.35em; height: 1.35em; }
.filter-chip[aria-pressed="true"] { background: var(--sun); color: var(--on-color); }
.filter-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ledge-c); }

/* ---------------------------------------------------------------------- */
/* Segmented choice + switch                                                */
/* ---------------------------------------------------------------------- */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.seg-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: calc(var(--tap-min) + 20px);
  min-height: var(--tap-l);
  padding: 8px 12px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-m);
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-s);
  line-height: 1.05;
  box-shadow: 0 4px 0 var(--ledge-c);
  margin-bottom: 4px;
  transition: transform var(--dur-1) ease-out, box-shadow var(--dur-1), background-color var(--dur-2);
}
.seg-btn img { width: calc(var(--tap-min) - 6px); height: calc(var(--tap-min) - 6px); border-radius: 50%; }
.seg-btn svg.icon { width: 30px; height: 30px; }
.seg-btn[aria-pressed="true"] { background: var(--sun); color: var(--on-color); transform: translateY(-2px) rotate(-1.5deg); }
.seg-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ledge-c); }
.seg-btn .stars { font-size: var(--fs-xs); color: var(--sun-2); letter-spacing: -1px; min-height: 1em; }
.seg-btn[aria-pressed="true"] .stars { color: var(--ink); }

.switch {
  position: relative;
  width: 74px;
  height: 44px;
  flex: none;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--paper-2);
  padding: 0;
  transition: background-color var(--dur-2);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--card);
  border: var(--stroke-w) solid var(--edge);
  transition: transform var(--dur-2) var(--spring);
}
.switch[aria-checked="true"] { background: var(--mint); }
.switch[aria-checked="true"]::after { transform: translateX(30px); }

/* settings rows */
.rows { display: grid; gap: 4px; }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: calc(var(--tap-min) + 8px);
  padding: 8px 2px;
}
.row + .row { border-top: 2px dashed color-mix(in srgb, var(--ink) 14%, transparent); }
.row-text { flex: 1; min-width: 0; }
.row-title { font-weight: 700; }
.row-sub { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; }
.row-wrap { flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* Form fields                                                              */
/* ---------------------------------------------------------------------- */
.field {
  width: 100%;
  min-height: var(--tap-min);
  padding: 8px 16px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-m);
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: max(16px, var(--fs-l));
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.field:focus { outline: 4px solid var(--sky); outline-offset: 1px; }
textarea.field { font-family: var(--font-body); font-size: 16px; min-height: 120px; resize: vertical; }
.label { display: block; font-weight: 700; margin: 0 0 8px 4px; }

/* ---------------------------------------------------------------------- */
/* Overlays: dialog, sheet, toast, banner                                   */
/* ---------------------------------------------------------------------- */
.layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
}
.backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
:root[data-theme="night"] .backdrop { background: rgba(0, 0, 0, .55); }

.dialog {
  position: relative;
  width: min(100%, 520px);
  max-height: 100%;
  overflow: auto;
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: 22px 22px 18px;
}
.dialog .koffi { width: 112px; margin-top: -6px; }
.dialog-title { font-size: var(--fs-xl); }
.dialog-body { color: var(--ink-2); font-size: var(--fs-m); }
.dialog-actions {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.dialog-actions .btn { flex: 1 1 170px; font-size: var(--fs-m); white-space: normal; line-height: 1.1; padding: 8px 14px; }

.sheet-list { display: grid; gap: 10px; width: 100%; }
.sheet-list .btn { justify-content: flex-start; width: 100%; white-space: normal; text-align: left; line-height: 1.12; padding-block: 8px; }
.sheet-item-text { display: grid; gap: 3px; min-width: 0; }
.sheet-item-text small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.2; }
/* utility: a button whose label may wrap (long German words) */
.btn-wrap { white-space: normal; line-height: 1.1; padding-block: 6px; text-align: center; }
/* "‹ Pause" (ctx.ui.setBackLabel) */
.btn-icon.has-label { width: auto; padding: 0 16px 0 10px; border-radius: var(--r-pill); gap: 6px; }
.btn-icon.has-label svg.icon { width: 1.3em; height: 1.3em; }

/* Toast hosts (core/ui.js toast): bottom (default) · is-top (under the header) · is-flip (top seat, turned) ·
   is-left / is-right (rundum sides). In games the container sets --toast-* so toasts stay off chips and bar. */
.toast-host {
  position: fixed;
  left: var(--toast-left, 0px); right: var(--toast-right, 0px);
  bottom: var(--toast-bottom, max(22px, calc(var(--safe-bottom) + 12px)));
  z-index: 70;
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 16px;
}
.toast-host:not([data-place="bottom"]) { left: 0; right: 0; bottom: auto; }
.toast-host.is-top { top: calc(max(10px, var(--safe-top)) + var(--tap-min) + 14px); }
.toast-host.is-flip { top: var(--toast-top, max(22px, calc(var(--safe-top) + 12px))); transform: rotate(180deg); }
.toast-host:is(.is-left, .is-right) { top: 50%; width: 70vh; padding: 0; }
.toast-host.is-left { left: calc(150px - 35vh); right: auto; transform: translateY(-50%) rotate(90deg); }
.toast-host.is-right { right: calc(150px - 35vh); left: auto; transform: translateY(-50%) rotate(-90deg); }
:root[data-toast-zone="column"] .toast-host[data-place="bottom"] { padding: 0; }
:root[data-toast-zone="column"] .toast-host[data-place="bottom"] .toast {
  font-size: var(--fs-small); padding: 8px 12px 8px 8px; border-radius: var(--r-l); line-height: 1.15;
}
:root[data-toast-zone="column"] .toast-host[data-place="bottom"] .toast :is(img, svg.icon) { width: 28px; height: 28px; }
.toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(100%, 560px);
  padding: 10px 18px 10px 12px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-m);
  box-shadow: var(--shadow-card);
  pointer-events: none;            /* ordinary toasts never swallow taps on the board */
}
.toast > span { min-width: 0; }
.toast img, .toast svg.icon { width: 34px; height: 34px; flex: none; }
.toast.is-action { background: var(--sun); color: var(--on-color); cursor: pointer; min-height: var(--tap-min); pointer-events: auto; }

.turn-banner {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 26px 10px 10px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  box-shadow: var(--shadow-card);
  pointer-events: none;
  white-space: nowrap;
}
.turn-banner .avatar { --size: 64px; }
/* anchored banner (ctx.ui.turnBanner(p, { edge }) at the chip, rundum { side }): the wrapper carries position + turn */
.turn-banner-anchor { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.turn-banner-anchor > .turn-banner { position: absolute; left: 0; top: 0; }
.is-phone .turn-banner { font-size: var(--fs-l); gap: 10px; padding: 8px 20px 8px 8px; }
.is-phone .turn-banner .avatar { --size: 48px; }

/* ---------------------------------------------------------------------- */
/* Koffi                                                                    */
/* ---------------------------------------------------------------------- */
.koffi { width: 140px; height: auto; aspect-ratio: 1; }

.empty-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
  min-height: 100%;
  padding: 20px;
}
.empty-state .koffi { width: clamp(140px, 30vmin, 220px); }
.empty-state h2 { font-size: var(--fs-xl); }
.empty-state p { color: var(--ink-2); max-width: 30ch; }

/* ---------------------------------------------------------------------- */
/* Players: identity pieces (colour + shape)                               */
/* ---------------------------------------------------------------------- */
.piece {
  --pc: var(--p1);
  --pc-2: var(--p1-2);
  display: inline-block;
  width: 1em;
  height: 1em;
  color: var(--pc);
}
.piece svg { width: 100%; height: 100%; overflow: visible; }
.piece .piece-fill { fill: var(--pc); stroke: var(--edge); stroke-width: 7; stroke-linejoin: round; }
.piece .piece-shine { fill: #fff; opacity: .55; }
.p1 { --pc: var(--p1); --pc-2: var(--p1-2); --pc-t: var(--p1-t); }
.p2 { --pc: var(--p2); --pc-2: var(--p2-2); --pc-t: var(--p2-t); }
.p3 { --pc: var(--p3); --pc-2: var(--p3-2); --pc-t: var(--p3-t); }
.p4 { --pc: var(--p4); --pc-2: var(--p4-2); --pc-t: var(--p4-t); }

/* player plate shown in games: avatar + name + piece; .is-active when it's their turn */
.player-plate {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 14px 6px 6px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: 0 4px 0 var(--ledge-c);
  transition: transform var(--dur-2) var(--spring), background-color var(--dur-2), opacity var(--dur-2);
  opacity: .62;
}
.player-plate .avatar { --size: calc(var(--tap-min) - 6px); }
.player-plate-name {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-m);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-plate-sub { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.player-plate .piece { font-size: 28px; flex: none; margin-left: auto; }
.player-plate.is-active {
  opacity: 1;
  background: var(--pc-t, var(--p1-t));
  transform: scale(1.04);
  box-shadow: 0 4px 0 var(--ledge-c), 0 0 0 5px color-mix(in srgb, var(--pc, var(--p1)) 45%, transparent);
}
.player-plate.is-thinking .avatar { animation: think-bob 900ms ease-in-out infinite; }

/* ---------------------------------------------------------------------- */
/* Boards: shared cell styles                                               */
/* ---------------------------------------------------------------------- */
.board-frame {
  background: var(--paper-2);
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: 10px;
}
.cell {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  background: var(--card);
  border: var(--stroke-w) solid color-mix(in srgb, var(--edge) 30%, transparent);
  box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  padding: 0;
  transition: background-color var(--dur-2);
}
.cell:active:not(:disabled) { background: var(--paper-2); }
.cell.is-hint { animation: hint-glow 1.1s ease-in-out infinite; }
.cell.is-last::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--r-m) - 4px);
  border: 3px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  pointer-events: none;
}
.cell.is-win { background: var(--sun-t); }
.cell.is-move-target::before {            /* "you may move here" dot */
  content: "";
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

/* ---------------------------------------------------------------------- */
/* Game container                                                           */
/* ---------------------------------------------------------------------- */
.game-screen { gap: 8px; }
.stage {
  position: relative;
  min-height: 0;
  min-width: 0;
  display: grid;
}
.game-root {
  position: relative;
  min-height: 0;
  min-width: 0;
  display: grid;
}
.stage-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  min-height: 0;
  background: var(--paper);
  background-image: inherit;
}

/* ---------------------------------------------------------------------- */
/* Player setup                                                              */
/* ---------------------------------------------------------------------- */
.setup {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
}
.setup-scroll { min-height: 0; padding: 4px 4px 10px; }
.setup-inner { display: grid; gap: 18px; width: min(100%, 860px); margin: 0 auto; align-items: start; }
@media (min-width: 1000px) {
  .setup-inner { width: min(100%, 1240px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .setup-inner .setup-block.is-wide { grid-column: 1 / -1; }
}
.setup-block { display: grid; gap: 10px; padding: 14px 16px 16px; }
.setup-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-l);
}
.setup-block-title svg.icon { width: 1.1em; height: 1.1em; }
.setup-people { display: flex; flex-wrap: wrap; gap: 10px; }
.setup-person {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: calc(var(--tap-min) + 38px);
  max-width: 132px;
  padding: 8px 6px 6px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-m);
  background: var(--card);
  box-shadow: 0 4px 0 var(--ledge-c);
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-s);
  line-height: 1.05;
  transition: transform var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-2);
}
.setup-person > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.setup-person .avatar { --size: calc(var(--tap-min) + 6px); }
.setup-person:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ledge-c); }
.setup-person[aria-pressed="true"] { background: var(--pc-t, var(--sun-t)); transform: translateY(-2px); }
.setup-person .seat {
  position: absolute;
  top: -10px;
  right: -8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 50%;
}
.setup-person .seat .piece { font-size: 20px; }
.setup-person.is-add { border-style: dashed; box-shadow: none; background: transparent; }
.setup-person.is-add .plus {
  width: calc(var(--tap-min) + 6px);
  height: calc(var(--tap-min) + 6px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: var(--stroke-w) dashed var(--edge);
}
.setup-person.is-add .plus svg { width: 50%; height: 50%; }
.setup-go {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
}
.setup-go .btn { min-width: min(80vw, 340px); }
.setup-hint { color: var(--ink-2); font-size: var(--fs-s); }

/* ---------------------------------------------------------------------- */
/* Result overlay                                                            */
/* ---------------------------------------------------------------------- */
/* the result card sits above the confetti canvas (z 80); confetti shows through the translucent backdrop */
.layer.celebrate-layer { z-index: 85; }
.celebrate {
  position: relative;
  width: min(100%, 560px);
  max-height: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 22px 20px;
  text-align: center;
}
.celebrate-hero { position: relative; display: grid; place-items: center; margin-top: -70px; }
.celebrate-hero .koffi { width: clamp(130px, 24vmin, 190px); }
.celebrate-hero .avatar {
  position: absolute;
  right: -34px;
  bottom: 6px;
  --size: clamp(64px, 11vmin, 88px);
  transform: rotate(8deg);
  box-shadow: 0 4px 0 var(--ledge-c);
}
.celebrate-title { font-size: var(--fs-xxl); line-height: 1.05; }
.celebrate-sub { color: var(--ink-2); font-size: var(--fs-m); }
.celebrate-stars { display: flex; gap: 6px; justify-content: center; min-height: 0; }
.celebrate-stars svg { width: 46px; height: 46px; }
.celebrate-actions { display: grid; gap: 12px; width: 100%; justify-items: center; margin-top: 4px; }
.celebrate-actions .btn-huge { width: min(100%, 380px); }
.celebrate-more { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.celebrate-mirror {
  position: absolute;
  top: max(18px, var(--safe-top));
  left: 0; right: 0;
  display: grid;
  justify-items: center;
  transform: rotate(180deg);
  z-index: 1;
}
.celebrate-mirror .bubble::before, .celebrate-mirror .bubble::after { display: none; }

/* ---------------------------------------------------------------------- */
/* Hand-over screen (hidden information games)                             */
/* ---------------------------------------------------------------------- */
.handover { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 26px; width: min(100%, 520px); }
.handover .avatar { --size: 120px; }
.hold-btn { position: relative; overflow: hidden; }
.hold-btn .hold-fill {
  position: absolute; inset: 0;
  background: var(--mint);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 0;
}
.hold-btn > span { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------- */
/* Keypad (parent gate)                                                      */
/* ---------------------------------------------------------------------- */
.gate { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 8px 0 20px; }
.landscape .gate { grid-template-columns: auto auto; column-gap: clamp(24px, 6vw, 80px); justify-content: center; align-content: center; min-height: 100%; }
.landscape .gate > * { grid-column: 1; }
.landscape .gate > .keypad { grid-column: 2; grid-row: 1 / span 8; align-self: center; }
.landscape .dialog .gate { grid-template-columns: none; }
.landscape .dialog .gate > * { grid-column: auto; }
.landscape .dialog .gate > .keypad { grid-column: auto; grid-row: auto; }
.gate .koffi { width: 120px; }
.gate-question { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xxl); }
.gate-display {
  min-width: 200px;
  min-height: calc(var(--tap-min) + 10px);
  display: grid;
  place-items: center;
  padding: 0 16px;
  border: var(--stroke-w) solid var(--edge);
  border-radius: var(--r-m);
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: .08em;
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, var(--tap-l));
  gap: 12px;
}
.keypad .btn { font-size: var(--fs-xl); padding: 0; min-height: var(--tap-l); margin-bottom: var(--ledge); }

/* ---------------------------------------------------------------------- */
/* Profiles                                                                  */
/* ---------------------------------------------------------------------- */
.profile-grid {
  display: grid;
  gap: 18px 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.is-phone .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-tablet .profile-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px 20px; }
.is-tablet .profile-card .avatar, .is-tablet .profile-card.is-add .plus { --size: 128px; width: 128px; height: 128px; }
.profile-card {
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 8px;
  padding: 18px 10px 14px;
  text-align: center;
}
.profile-card .avatar { --size: 96px; }
.profile-card-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-l); line-height: 1.05; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card.is-active { background: var(--sun-t); }
.profile-card.is-active::after {
  content: "";
  position: absolute; top: -12px; left: 50%;
  width: 34px; height: 34px; margin-left: -17px;
  background: var(--sun);
  border: 2.5px solid var(--edge);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.profile-card .edit-btn { position: absolute; top: 6px; right: 6px; }
.profile-card.is-add { border-style: dashed; background: transparent; box-shadow: none; }
.profile-card.is-add .plus {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border: var(--stroke-w) dashed var(--edge);
  border-radius: 50%;
}
.profile-card.is-add .plus svg { width: 46px; height: 46px; }

.avatar-picker {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--tap-min) + 16px), 1fr));
}
.avatar-option {
  padding: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--stroke-w) solid var(--edge);
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 4px 0 var(--ledge-c);
  margin-bottom: 4px;
  transition: transform var(--dur-2) var(--spring), box-shadow var(--dur-1);
}
.avatar-option img { width: 100%; height: 100%; }
.avatar-option[aria-pressed="true"] {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 4px 0 var(--ledge-c), 0 0 0 5px var(--sun);
}

/* ---------------------------------------------------------------------- */
/* Misc                                                                     */
/* ---------------------------------------------------------------------- */
.stack { display: grid; gap: var(--gap); }
.cluster { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-xs); }
.center { text-align: center; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 14px; word-break: break-all; -webkit-user-select: text; user-select: text; }
.licence-text {
  white-space: pre-wrap;
  font-size: 13px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  background: var(--paper-2);
  border-radius: var(--r-s);
  -webkit-user-select: text;
  user-select: text;
}
details > summary { cursor: pointer; font-weight: 700; padding: 8px 0; min-height: var(--tap-min); display: flex; align-items: center; }
.status-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); vertical-align: -1px; margin-right: 6px; }
.status-dot.ok { background: var(--mint); }
.status-dot.warn { background: var(--sun); }
.status-dot.bad { background: var(--coral); }
.install-hint {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.install-hint svg.icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------- */
/* Short screens (iPhone landscape): side-by-side overlays                 */
/* ---------------------------------------------------------------------- */
@media (max-height: 520px) {
  .layer { padding-top: max(8px, var(--safe-top)); padding-bottom: max(8px, var(--safe-bottom)); }
  .celebrate {
    width: min(100%, 720px);
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 18px;
    row-gap: 6px;
    padding: 14px 18px;
    text-align: left;
    justify-items: start;
    overflow: auto;
  }
  .celebrate-hero { grid-row: 1 / span 4; margin-top: 0; align-self: center; }
  .celebrate-hero .koffi { width: 120px; }
  .celebrate-hero .avatar { --size: 56px; right: -18px; }
  .celebrate-title { font-size: var(--fs-xl); }
  .celebrate-stars { justify-content: flex-start; }
  .celebrate-stars svg { width: 34px; height: 34px; }
  .celebrate-actions { justify-items: start; grid-template-columns: auto auto; align-items: start; }
  .celebrate-actions .btn-huge { width: auto; min-height: var(--tap-l); font-size: var(--fs-l); }
  .dialog { padding: 14px 18px; gap: 10px; }
  .sheet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialog .koffi { width: 72px; }
  .dialog-title { font-size: var(--fs-l); }
}

/* ====================================================================== */
/* Shell game UI (A3): stage areas, player chips, action bar               */
/* ====================================================================== */
.stage {
  display: grid;
  grid-template-areas: "players" "root" "bar";
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.stage > .stage-players { grid-area: players; }
.stage > .game-root { grid-area: root; align-self: stretch; justify-self: stretch; }
.game-root > * { min-height: 0; }
.stage > .stage-bar { grid-area: bar; }
.stage > .stage-side { display: none; }
.stage:not(.has-players) > .stage-players, .stage:not(.has-bar) > .stage-bar { display: none; }
.stage > .stage-layer { grid-area: 1 / 1 / -1 / -1; }
/* Landscape frame (screens/container.js sets .stage[data-frame] / [data-side] and mirrors them on the screen):
   'side'  = [chips] [board] [bar] in three columns; columns have a fixed width, so chips never reach into the
             board; a side without content gives its column back (tablet). iPhone: the header buttons move into
             the corners above the side columns and the board gets the full height.
   'stack' = rows like in portrait (wide boards on the iPad: ctx.ui.layout({ side: 'stack' })).
   [data-side="compact"] = narrow columns (mini chips) for wide boards. */
.game-screen { --side-w: clamp(196px, 19vw, 250px); --side-bar: clamp(150px, 15vw, 210px); }
.game-screen[data-side="compact"] { --side-w: clamp(150px, 14vw, 190px); --side-bar: clamp(120px, 11vw, 160px); }
.is-phone .game-screen { --side-w: 156px; --side-bar: calc(var(--tap-min) + 16px); }
.is-phone .game-screen[data-side="compact"] { --side-w: 84px; }
.is-phone .game-screen:has(> .stage[data-bar-count="5"], > .stage[data-bar-count="6"], > .stage[data-bar-count="7"], > .stage[data-bar-count="8"]) { --side-bar: calc(2 * var(--tap-min) + 24px); }
.stage[data-frame="side"] {
  grid-template-areas: "players root bar";
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-bar);
  align-items: center;
}
.is-tablet .stage[data-frame="side"]:not(.has-bar) { grid-template-areas: "players root"; grid-template-columns: var(--side-w) minmax(0, 1fr); }
.is-tablet .stage[data-frame="side"]:not(.has-players) { grid-template-areas: "root bar"; grid-template-columns: minmax(0, 1fr) var(--side-bar); }
/* phone: both corner columns stay (back button left, menu right) */
.is-phone .stage[data-frame="side"]:not(.has-players) { grid-template-columns: calc(var(--tap-min) + 16px) minmax(0, 1fr) var(--side-bar); }
.stage[data-frame="side"] > .stage-players {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center;
  align-self: stretch; padding: 0; min-width: 0; min-height: 0; gap: 10px;
}
.stage[data-frame="side"] > .stage-bar { flex-direction: column; align-items: stretch; justify-content: center; align-self: stretch; min-width: 0; min-height: 0; }
.stage[data-frame="side"] .stage-bar .game-bar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.stage[data-frame="side"] .game-bar-btn { min-width: 0; white-space: normal; line-height: 1.1; padding: 6px 10px; }
.stage[data-frame="side"] .stage-players .player-chip { flex: none; width: 100%; max-width: 100%; }
.stage[data-frame="side"] .player-chip .chip-sub { white-space: normal; flex-wrap: wrap; column-gap: 6px; row-gap: 0; line-height: 1.15; max-height: 2.3em; }
.stage[data-frame="side"] .player-chip .chip-name { font-size: var(--fs-body); }
.stage[data-frame="side"] .player-chip .chip-piece { position: absolute; left: 34px; bottom: 0; font-size: 20px; }
.stage[data-frame="side"] .player-chip.is-active { transform: none; }

/* iPhone landscape: header in the corners, board gets the full height */
.is-phone .game-screen[data-frame="side"] { position: relative; grid-template-rows: minmax(0, 1fr); }
.is-phone .game-screen[data-frame="side"] > .stage { grid-row: 1; }
.is-phone .game-screen[data-frame="side"] > .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 30; pointer-events: none; }
.is-phone .game-screen[data-frame="side"] > .topbar .btn { pointer-events: auto; }
.is-phone .game-screen[data-frame="side"] > .topbar .topbar-title {
  flex: 0 1 auto; max-width: calc(var(--side-w) - var(--tap-min) - 10px);
  font-size: var(--fs-small); line-height: 1.05; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.is-phone .game-screen[data-frame="side"][data-side="compact"] > .topbar .topbar-title { display: none; }
.is-phone .game-screen[data-frame="side"] > .topbar .topbar-actions { margin-left: auto; }
/* "?" and sound stay reachable through "⋯" (So geht's · Ton an/aus) */
.is-phone .game-screen[data-frame="side"] > .topbar :is([data-testid="rules"], [data-testid="sound-toggle"]) { display: none; }
.is-phone .stage[data-frame="side"] > :is(.stage-players, .stage-bar) { padding-top: calc(var(--tap-min) + 12px); }
.is-phone .stage[data-frame="side"] .player-chip { gap: 6px; padding: 4px 8px 4px 4px; }
.is-phone .stage[data-frame="side"] .player-chip.is-active { padding: 3px 7px 3px 3px; }
.is-phone .stage[data-frame="side"] .player-chip .avatar { --size: 34px; }
.is-phone .stage[data-frame="side"] .player-chip .chip-name { font-size: var(--fs-small); }
.is-phone .stage[data-frame="side"] .player-chip .chip-sub { font-size: 13px; }
.is-phone .stage[data-frame="side"] .player-chip .chip-piece { left: 25px; bottom: -2px; font-size: 17px; }
.is-phone .stage[data-frame="side"] .player-chip .chip-score { font-size: var(--fs-tile); min-width: 1em; }
.is-phone .stage[data-frame="side"] .game-bar { display: grid; grid-template-columns: repeat(var(--bar-cols, 1), var(--tap-min)); justify-content: center; gap: 10px; }
.is-phone .stage[data-frame="side"]:is([data-bar-count="5"], [data-bar-count="6"], [data-bar-count="7"], [data-bar-count="8"]) .game-bar { --bar-cols: 2; }
.is-phone .stage[data-frame="side"] .game-bar-btn { width: var(--tap-min); min-height: var(--tap-min); padding: 0; margin-bottom: var(--ledge); }
/* compact mini chips (phone): avatar, name, piece + score */
.is-phone .stage[data-frame="side"][data-side="compact"] .player-chip { flex-direction: column; gap: 2px; padding: 6px 4px 4px; border-radius: var(--r-l); text-align: center; }
.is-phone .stage[data-frame="side"][data-side="compact"] .player-chip.is-active { padding: 5px 3px 3px; }
.is-phone .stage[data-frame="side"][data-side="compact"] .player-chip .chip-text { width: 100%; }
.is-phone .stage[data-frame="side"][data-side="compact"] .player-chip .chip-name { font-size: 13px; }
.is-phone .stage[data-frame="side"][data-side="compact"] .player-chip .chip-sub { display: none; }
.is-phone .stage[data-frame="side"][data-side="compact"] .player-chip .chip-piece { left: calc(50% + 8px); top: 26px; bottom: auto; }
.is-phone .stage[data-frame="side"][data-side="compact"] .player-chip .chip-score { font-size: var(--fs-body); line-height: 1; }
/* tablet compact: smaller chip text */
.is-tablet .stage[data-frame="side"][data-side="compact"] .player-chip .chip-name { font-size: var(--fs-small); }
.is-tablet .stage[data-frame="side"][data-side="compact"] .player-chip .avatar { --size: 38px; }
.is-tablet .stage[data-frame="side"][data-side="compact"] .player-chip .chip-piece { left: 30px; }
.is-tablet .stage[data-frame="side"][data-side="compact"] .game-bar-btn { font-size: var(--fs-small); }

/* "Dreh mich hochkant!" (games with orientation: 'portrait' on an iPhone held sideways) */
.stage-rotate { place-items: center; z-index: 25; padding: 12px; }
.rotate-card { display: flex; align-items: center; gap: 18px; max-width: 560px; }
.rotate-card .koffi { width: 112px; flex: none; animation: rotate-hint 2.4s ease-in-out infinite; }
.rotate-text { display: grid; gap: 8px; justify-items: start; }
@keyframes rotate-hint { 0%, 55%, 100% { transform: rotate(0); } 70%, 85% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-card .koffi { animation: none; } }
.stage[data-layout="ff"] {
  grid-template-areas: "top" "root" "bottom";
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
}
.stage[data-layout="ff"] > .stage-players, .stage[data-layout="ff"] > .stage-bar { display: none; }
.stage[data-layout="ff"] > .stage-side { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.stage[data-layout="ff"] > .stage-side.is-top { grid-area: top; }
.stage[data-layout="ff"] > .stage-side.is-bottom { grid-area: bottom; }
.mirrored { transform: rotate(180deg); }

.stage-players { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; }
.stage-bar { display: flex; justify-content: center; }

.player-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 280px;
  min-width: 0;
  padding: 6px 12px 6px 6px;
  border: var(--stroke-s);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--shadow-sticker);
  opacity: .7;
  transition: transform var(--t-base) var(--ease-spring), opacity var(--t-base), border-color var(--t-base);
}
.player-chip .avatar { --size: 44px; border: 3px solid var(--pc, var(--edge)); }
.player-chip .chip-text { min-width: 0; flex: 1; }
.player-chip .chip-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-tile); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-chip .chip-sub { font-size: var(--fs-small); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; max-width: 100%; }
.player-chip .chip-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.player-chip .chip-piece { font-size: 26px; flex: none; }
.player-chip .chip-score { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h2); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: center; }
.player-chip.is-active {
  opacity: 1;
  border: 4px solid var(--pc, var(--edge));
  padding: 5px 11px 5px 5px;
  transform: translateY(-4px);
  background: var(--pc-soft, var(--card));
}
.player-chip.is-active .chip-status { color: var(--ink); font-weight: 700; }
.player-chip.is-thinking .avatar { animation: think-bob 900ms ease-in-out infinite; }
.p1 { --pc-soft: var(--p1-soft); }
.p2 { --pc-soft: var(--p2-soft); }
.p3 { --pc-soft: var(--p3-soft); }
.p4 { --pc-soft: var(--p4-soft); }

.game-bar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.game-bar-btn { min-height: var(--tap); min-width: calc(var(--tap) + 48px); font-size: var(--fs-button); }
.is-phone.portrait .game-bar { flex-wrap: nowrap; width: 100%; }
.is-phone.portrait .game-bar-btn { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; font-size: var(--fs-small); padding: 6px 4px; min-height: 64px; }
.is-phone.landscape .game-bar-label { display: none; }
.is-phone.landscape .game-bar-btn { min-width: var(--tap-min); }

/* discs: round stone in the seat colour with a white shape emblem (40 %) */
.disc { --pc: var(--p1); display: inline-block; width: 1em; height: 1em; }
.disc svg { width: 100%; height: 100%; }
.disc .disc-fill { fill: var(--pc); stroke: var(--edge); stroke-width: 6; }
.disc .disc-emblem { fill: #fff; }
:root[data-theme="night"] .disc .disc-emblem { fill: var(--on-accent); }

/* generic hint / danger states for game elements */
.is-hint-1 { animation: hint-glow 1.2s ease-in-out infinite; }
.is-hint-2 { animation: hint-strong .9s ease-in-out infinite; }
/* ctx.ui.hint(…, { style: 'ring' }): ring only – never covers what lies under a transparent hit area */
.is-hint.is-hint-ring { animation: hint-ring 1.2s ease-in-out infinite; }
.is-hint.is-hint-ring-2 { animation: hint-ring-strong .9s ease-in-out infinite; }
@keyframes hint-ring { 0%, 100% { box-shadow: 0 0 0 0 var(--sun); } 50% { box-shadow: 0 0 0 6px var(--sun); } }
@keyframes hint-ring-strong { 0%, 100% { box-shadow: 0 0 0 3px var(--sun); } 50% { box-shadow: 0 0 0 9px var(--sun), 0 0 0 12px color-mix(in srgb, var(--sun) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .is-hint.is-hint-ring, .is-hint.is-hint-ring-2 { animation: none; box-shadow: 0 0 0 6px var(--sun); } }
.is-danger { box-shadow: 0 0 0 4px var(--warn); }

/* ====================================================================== */
/* Hub additions                                                            */
/* ====================================================================== */
.hub-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--gap); min-height: 0; }
.resume-card {
  display: flex; align-items: center; gap: 14px;
  width: min(100%, 520px); justify-self: center;
  padding: 10px 18px 10px 10px; text-align: left; color: var(--ink);
}
.resume-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--coral); color: var(--on-accent); border: var(--stroke-s); flex: none; }
.resume-play svg.icon { width: 24px; height: 24px; margin-left: 3px; }
.resume-text { display: grid; }
.resume-text b { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-tile); }
.resume-text small { color: var(--ink-soft); font-size: var(--fs-small); }
.install-card { width: min(100%, 620px); justify-self: center; align-self: start; display: grid; gap: 10px; }
.install-steps { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.install-steps li { display: flex; gap: 10px; align-items: center; }
.install-steps svg.icon { width: 28px; height: 28px; flex: none; color: var(--sky-deep); }

/* ====================================================================== */
/* Result overlay additions                                                 */
/* ====================================================================== */
.badge-card {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px;
  border: var(--stroke-s); border-radius: var(--r-pill);
  background: var(--lavender-soft);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-tile);
  animation: badge-reveal 500ms var(--ease-spring) both 300ms;
}
.badge-sticker {
  display: grid; place-items: center;
  width: 60px; height: 60px; flex: none;
  border-radius: 50%; background: var(--card);
  border: var(--stroke); box-shadow: 0 0 0 4px #fff inset, var(--shadow-piece);
  overflow: hidden; font-family: var(--font-display); font-weight: 600; color: var(--ink-faint);
}
.badge-sticker img { width: 100%; height: 100%; }
.badge-sticker.is-open { border-style: dashed; box-shadow: none; background: transparent; }
.badge-sticker.is-special { color: var(--lavender-deep); }
.badge-sticker svg.icon { width: 60%; height: 60%; }
.celebrate-mini {
  position: absolute; left: 0; right: 0; bottom: max(16px, var(--safe-bottom));
  display: none; justify-content: center; gap: 12px; z-index: 2;
}
.layer.is-folded .celebrate, .layer.is-folded .backdrop, .layer.is-folded .celebrate-mirror { display: none; }
.layer.is-folded { pointer-events: none; }
.layer.is-folded .celebrate-mini { display: flex; pointer-events: auto; }
.dialog.is-flipped { transform: rotate(180deg); }

/* ====================================================================== */
/* Hand-off, rules, gate                                                    */
/* ====================================================================== */
.handoff { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 26px; width: min(100%, 520px); }
.handoff .koffi { width: 120px; }
.handoff-layer .backdrop { background: var(--paper); opacity: 1; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rules { display: grid; gap: 14px; text-align: left; width: 100%; }
.rules-list { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: var(--fs-body); }
.rules-list li::marker { font-family: var(--font-display); font-weight: 600; color: var(--coral-deep); }
.rules-example { max-width: 100%; border-radius: var(--r-m); }
.rules-pictures { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rules-pictures figure { margin: 0; display: grid; justify-items: center; gap: 4px; width: 120px; font-size: var(--fs-small); }
.rules-pictures img { width: 100px; height: 100px; object-fit: contain; }
.gate-step { display: grid; justify-items: center; gap: 12px; }
.gate-lock {
  position: relative; width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  border: var(--stroke); background: var(--card); box-shadow: var(--shadow-sticker); color: var(--ink);
}
.gate-lock svg.icon { width: 52px; height: 52px; position: relative; z-index: 1; }
.gate-ring { position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(var(--mint) 0deg, transparent 0deg); }
.gate-ring.is-holding { animation: gate-fill 2s linear forwards; }
@property --gate-p { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes gate-fill { from { --gate-p: 0deg; } to { --gate-p: 360deg; } }
.gate-ring.is-holding { background: conic-gradient(var(--mint) var(--gate-p), transparent 0deg); }

/* ====================================================================== */
/* Setup additions                                                          */
/* ====================================================================== */
.setup-foot { display: grid; gap: 4px; }
.seg-btn .seg-sub { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--ink-soft); min-height: 1em; }
.seg-btn[aria-pressed="true"] .seg-sub { color: var(--on-accent); }
.seg-num { font-size: var(--fs-h1); line-height: 1; }
.team-tag {
  position: absolute; top: -10px; left: -6px;
  padding: 1px 8px; border-radius: var(--r-pill); border: 2px solid var(--edge);
  background: var(--lavender); color: var(--on-accent); font-size: 13px;
}
.avatar-icon { display: grid; place-items: center; background: var(--lavender-soft); }
.avatar-icon svg.icon { width: 60%; height: 60%; }
.house-rules summary { list-style: none; cursor: pointer; }
.house-rules summary::-webkit-details-marker { display: none; }
.house-rules summary::after { content: "▾"; margin-left: auto; color: var(--ink-soft); }
.house-rules[open] summary::after { content: "▴"; }
.option { display: grid; gap: 8px; }
.option + .option { margin-top: 10px; }
.option-label { font-weight: 700; }
.setup-person.is-guest .avatar { background: var(--card); }

/* ====================================================================== */
/* Games overview, profiles, parents                                        */
/* ====================================================================== */
.filter-group-label { font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); }
.badge-ai img { width: 1.25em; height: 1.25em; border-radius: 50%; }
.badge-new { background: var(--coral-soft); }
.section-mathe { border-top: 3px solid var(--mint); padding-top: 14px; margin-top: 22px; }
.game-sections { display: grid; gap: 4px; }
.is-tablet.landscape .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.is-tablet.portrait .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.profile-cell { position: relative; display: grid; }
.profile-card-meta { display: flex; gap: 6px; align-items: center; }
.profile-color { font-size: 20px; }
.profile-head { display: flex; gap: 18px; align-items: center; }
.badge-wall { display: grid; gap: 12px; }
.badge-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.badge-game { width: 44px; height: 44px; grid-row: span 2; }
.badge-row-title { font-weight: 700; }
.badge-row-items { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-row-items .badge-sticker { width: 48px; height: 48px; }
.color-btn .color-piece { font-size: 34px; }

.parents-layout { display: grid; gap: 20px; width: min(100%, 980px); margin: 0 auto; align-items: start; }
.parents-layout.is-wide { grid-template-columns: 300px minmax(0, 1fr); }
.parents-hello { justify-content: center; }
.parents-hello .koffi { width: 96px; }
.parents-hello p { max-width: 30ch; }
.parents-nav { display: grid; padding: 6px; gap: 2px; }
.parents-tab {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap-min); padding: 6px 12px;
  border: 0; border-radius: var(--r-m); background: transparent; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-tile);
}
.parents-tab svg.icon { width: 26px; height: 26px; flex: none; }
.parents-tab span { flex: 1; }
.parents-tab .tab-chevron { transform: rotate(-90deg); color: var(--ink-faint); }
.parents-tab.is-current { background: var(--sun-soft); }
.parents-content { min-width: 0; }
.parents-body .row-sub, .parents-body .row-title { font-size: var(--fs-parent); }
.parents-body .row-title { font-size: calc(var(--fs-parent) + 1px); }
.seg-small { gap: 6px; }
.seg-small .seg-btn { min-height: var(--tap-min); min-width: 0; padding: 6px 12px; font-size: var(--fs-parent); box-shadow: var(--shadow-press); }
.daybars { display: flex; align-items: flex-end; gap: 4px; height: 70px; padding: 6px 0; border-bottom: 2px solid var(--line); }
.daybar { flex: 1; min-height: 2px; background: var(--sky); border-radius: 4px 4px 0 0; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.stats-table { border-collapse: collapse; font-size: var(--fs-parent); width: 100%; }
.stats-table th, .stats-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.stats-table th { color: var(--ink-soft); font-weight: 700; }

/* phones: filter groups wrap, the two player chips share one row */
.filter-group { flex-wrap: wrap; }
.is-phone.portrait .stage-players { flex-wrap: nowrap; }
.is-phone.portrait .stage-players .player-chip { flex: 1 1 0; min-width: 0; padding-right: 8px; gap: 6px; }
.is-phone.portrait .stage-players .player-chip.is-active { padding-right: 7px; }
.is-phone .player-chip .avatar { --size: 38px; }
.is-phone .player-chip .chip-piece { font-size: 20px; }
/* phone portrait: the piece sits as a badge on the avatar and the status may take 2 lines – the name keeps its room */
.is-phone.portrait .stage-players .player-chip .chip-piece { position: absolute; left: 30px; bottom: 0; font-size: 18px; }
.is-phone.portrait .stage-players .player-chip .chip-name { font-size: var(--fs-body); }
.is-phone.portrait .stage-players .player-chip .chip-sub { white-space: normal; flex-wrap: wrap; column-gap: 4px; row-gap: 0; line-height: 1.1; max-height: 2.2em; }

/* short landscape phones: no greeting row, compact resume card, tiles keep their height */
.is-phone.landscape .hub-greeting { display: none; }
.is-phone.landscape .hub { overflow-y: auto; }
.is-phone.landscape .hub-main { grid-template-rows: auto auto minmax(120px, 1fr); }
.is-phone.landscape .resume-card { padding: 4px 14px 4px 4px; }
.is-phone.landscape .resume-play { width: 40px; height: 40px; }
.is-phone.landscape .hub-quick { min-height: var(--tap-min); font-size: var(--fs-body); }
.is-phone.landscape .hub { grid-template-rows: minmax(0, 1fr) auto; }
.hub-main > .hub-tiles { grid-row: 3; }

/* ====================================================================== */
/* Rundum (ctx.ui.rundum, core/rundum.js): 3–4 players around the iPad      */
/* ====================================================================== */
.rundum {
  --plate-h: 108px;
  display: grid;
  grid-template-areas: ". top ." "left center right" ". bottom .";
  grid-template-columns: var(--plate-h) minmax(0, 1fr) var(--plate-h);
  grid-template-rows: var(--plate-h) minmax(0, 1fr) var(--plate-h);
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 6px;
}
.rundum-center { grid-area: center; position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; }
.rundum-side { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 0; }
.rundum-side:empty { display: none; }
.rundum-top { grid-area: top; }
.rundum-bottom { grid-area: bottom; }
.rundum-left { grid-area: left; }
.rundum-right { grid-area: right; }
.rundum-plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  width: max-content;
  max-width: 480px;
  padding: 6px 10px 6px 6px;
  border: var(--stroke-s);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-sticker);
  opacity: .72;
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-spring), border-color var(--t-base), background-color var(--t-base);
}
.rundum-top .rundum-plate { transform: rotate(180deg); }
.rundum-left .rundum-plate { transform: rotate(90deg); }
.rundum-right .rundum-plate { transform: rotate(-90deg); }
.rundum-plate.is-active { opacity: 1; border: 4px solid var(--pc, var(--edge)); background: var(--pc-soft, var(--card)); }
.rundum-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rundum-who .avatar { --size: 46px; border: 3px solid var(--pc, var(--edge)); flex: none; }
.rundum-text { min-width: 0; flex: none; }
.rundum-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-tile); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.rundum-sub { display: flex; gap: 8px; font-size: var(--fs-small); color: var(--ink-soft); white-space: nowrap; }
.rundum-status { color: var(--ink); font-weight: 700; }
.rundum-status:empty { display: none; }
.rundum-piece { font-size: 26px; flex: none; }
.rundum-actions { display: flex; gap: 8px; align-items: center; }
.rundum-actions:empty { display: none; }
.rundum-roll { --btn-bg: var(--pc); --btn-fg: var(--on-accent); min-height: var(--tap); padding: 0 .9em; }
.rundum-roll:disabled { --btn-bg: var(--paper-deep); --btn-fg: var(--ink-faint); }
.rundum-plate:not(.is-active) .rundum-roll { visibility: hidden; }
.rundum-extra { width: var(--tap-min); padding: 0; border-radius: 50%; }
.rundum-plate.is-thinking .avatar { animation: think-bob 900ms ease-in-out infinite; }
/* iPad landscape: the board gets the full height; left/right plates turned in the side columns, top/bottom plates
   as compact cards in the corners (top player: top right, bottom player: bottom left) */
.landscape .rundum {
  grid-template-areas: "left center right";
  grid-template-columns: 236px minmax(0, 1fr) 236px;
  grid-template-rows: minmax(0, 1fr);
}
.landscape .rundum-top { grid-area: right; align-self: start; }
.landscape .rundum-bottom { grid-area: left; align-self: end; }
.landscape .rundum-left { grid-area: left; align-self: center; }
.landscape .rundum-right { grid-area: right; align-self: center; }
.landscape :is(.rundum-top, .rundum-bottom) .rundum-plate { flex-direction: column; align-items: stretch; gap: 6px; width: 228px; padding: 8px; }
.landscape :is(.rundum-top, .rundum-bottom) .rundum-text { flex: 1 1 auto; min-width: 0; }
.landscape :is(.rundum-top, .rundum-bottom) .rundum-sub { flex-wrap: wrap; row-gap: 0; }
.landscape :is(.rundum-top, .rundum-bottom) .rundum-actions { justify-content: center; }
.landscape :is(.rundum-top, .rundum-bottom) .rundum-roll { flex: 1 1 auto; min-width: 0; padding: 0 .5em; font-size: var(--fs-body); gap: .3em; }
.landscape :is(.rundum-left, .rundum-right) .rundum-plate { max-width: 380px; }
/* iPhone: nobody sits around a phone – upright plates in one row above the board */
.is-phone .rundum { --n: 4; grid-template-areas: none; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); }
.is-phone .rundum[data-n="1"] { --n: 1; }
.is-phone .rundum[data-n="2"] { --n: 2; }
.is-phone .rundum[data-n="3"] { --n: 3; }
.is-phone .rundum .rundum-side { display: contents; }
.is-phone .rundum .rundum-center { grid-area: auto; grid-row: 2; grid-column: 1 / -1; }
.is-phone .rundum .rundum-plate, .is-phone .rundum :is(.rundum-top, .rundum-left, .rundum-right) .rundum-plate { transform: none; }
.is-phone .rundum .rundum-plate { grid-row: 1; width: auto; max-width: none; min-width: 0; flex-direction: column; gap: 4px; padding: 4px; border-radius: var(--r-l); }
.is-phone .rundum .rundum-who { flex-direction: column; gap: 2px; max-width: 100%; }
.is-phone .rundum .rundum-text { max-width: 100%; text-align: center; }
.is-phone .rundum .rundum-who .avatar { --size: 34px; }
.is-phone .rundum .rundum-name { font-size: 14px; max-width: 100%; }
.is-phone .rundum .rundum-sub { font-size: 12px; flex-wrap: wrap; justify-content: center; white-space: normal; }
.is-phone .rundum .rundum-piece { position: absolute; top: 26px; left: calc(50% + 6px); font-size: 16px; }
.is-phone .rundum .rundum-actions { flex-wrap: wrap; justify-content: center; width: 100%; gap: 4px; }
.is-phone .rundum .rundum-roll { width: 100%; min-width: 0; min-height: var(--tap-min); padding: 0; margin-bottom: var(--ledge); }
.is-phone .rundum .rundum-roll > span { display: none; }   /* icon only – the plate is narrow */
.is-phone .rundum .rundum-plate:not(.is-active) .rundum-roll { display: none; }
.is-phone .rundum .rundum-plate[data-seat="1"] { order: 1; }
.is-phone .rundum .rundum-plate[data-seat="2"] { order: 2; }
.is-phone .rundum .rundum-plate[data-seat="3"] { order: 3; }
.is-phone .rundum .rundum-center { order: 9; }
@media (prefers-reduced-motion: reduce) { .rundum-plate { transition: none; } }

/* celebrate: speech bubbles for the other sides (mirrorSides) */
.celebrate-mirror[data-side="left"], .celebrate-mirror[data-side="right"] { top: 50%; left: auto; right: auto; width: 60vh; }
.celebrate-mirror[data-side="left"] { left: calc(max(16px, var(--safe-left)) - 30vh + 40px); transform: translateY(-50%) rotate(90deg); }
.celebrate-mirror[data-side="right"] { right: calc(max(16px, var(--safe-right)) - 30vh + 40px); transform: translateY(-50%) rotate(-90deg); }