@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-de-wdth-wght.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  
  --surface-canvas: #111013;
  --surface-sunken: #0b0a0d;
  --surface-shell: #19171c;
  --surface-raised: #221f26;
  --surface-interactive: #2c2931;
  --surface-hover: #37333d;
  --text-primary: #f5f1e8;
  --text-secondary: #ddd6c9;
  --text-tertiary: #c7bfb1;
  --border-subtle: rgba(245, 238, 226, 0.15);
  --border-strong: rgba(245, 238, 226, 0.34);
  --font-text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  
  --stretch-display: 72%;
  --stretch-wide: 118%;
  --font-number: var(--font-text);
  --font-code: var(--font-text);
  --track-display: 0;
  
  --lead-display: 0.98;
  --brand-primary: #c9f24a;
  --brand-deep: #8fae1d;
  
  --paper-accent: #b02e14;
  --brand-text: #d3f763;
  --brand-soft: rgba(201, 242, 74, 0.14);
  --progress: #c9f24a;
  --progress-soft: rgba(201, 242, 74, 0.13);
  --danger: #ff7a5e;
  --at-stake: #ff5a3d;
  --prize: #ffc53d;
  --focus: #8cc8ff;
  --paper-material: #f4efe5;
  --field-dark-surface: var(--surface-raised);
  --field-dark-text: var(--text-primary);
  --field-dark-placeholder: var(--text-tertiary);
  --field-dark-caret: var(--brand-text);
  --field-dark-border: var(--border-subtle);
  --field-dark-focus: var(--focus);
  --field-dark-disabled-surface: var(--surface-shell);
  --field-dark-disabled-text: var(--text-tertiary);
  --field-dark-error: var(--danger);
  --field-dark-selection: #55661c;
  --field-dark-selection-text: #f5f1e8;
  --field-paper-text: #171310;
  --field-paper-placeholder: #625950;
  --field-paper-caret: #171310;
  --field-paper-border: #756b63;
  --field-paper-focus: #2d5fb8;
  --field-paper-disabled-surface: #e3ddd2;
  --field-paper-disabled-text: #675f58;
  --field-paper-error: #9e2f27;
  --field-paper-selection: #2d5fb8;
  --field-paper-selection-text: #f5f1e8;
  --field-surface: var(--field-dark-surface);
  --field-text: var(--field-dark-text);
  --field-placeholder: var(--field-dark-placeholder);
  --field-caret: var(--field-dark-caret);
  --field-border: var(--field-dark-border);
  --field-focus: var(--field-dark-focus);
  --field-focus-ring: rgba(140, 200, 255, 0.2);
  --field-disabled-surface: var(--field-dark-disabled-surface);
  --field-disabled-text: var(--field-dark-disabled-text);
  --field-disabled-border: var(--field-dark-border);
  --field-error: var(--field-dark-error);
  --field-error-ring: rgba(255, 123, 110, 0.18);
  --field-selection: var(--field-dark-selection);
  --field-selection-text: var(--field-dark-selection-text);
  --field-color-scheme: dark;
  --radius-control: 0.4rem;
  --radius-panel: 0.6rem;
  --radius-scene: 1rem;
  --target-compact: 2.75rem;
  --target-default: 3rem;
  --sticky-header-clearance: 4.75rem;
  --space-shell: clamp(1rem, 3vw, 2rem);
  --shadow-board: 0 18px 48px rgba(0, 0, 0, 0.26);
  --shadow-float: 0 30px 90px rgba(0, 0, 0, 0.38);
  --type-micro: 0.72rem;
  --type-caption: 0.78rem;
  --type-small: 0.86rem;
  --type-body: 1rem;
  --type-lead: clamp(1.1rem, 2.3vw, 1.55rem);
  --motion-feedback: 150ms;
  --motion-reveal: 260ms;
  --motion-transition: 340ms;
  --motion-celebration: 380ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --stage-max: 76rem;
  --stage-gutter: clamp(0.75rem, 3vw, 2rem);
  --stage-display: clamp(2.4rem, 5.6vw, 4.6rem);
  --figure-size: clamp(4.4rem, 8vw, 6.6rem);
  --figure-ring: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.36rem rgba(245, 241, 232, 0.22), 0 1rem 1.6rem rgba(0, 0, 0, 0.42);
  --cta-depth: 0 0.3rem 0 var(--brand-deep), 0 0.9rem 2rem rgba(201, 242, 74, 0.16);
  --family-talk: #ff7a59;
  --family-read: #ff8fc8;
  --family-skill: #3fd0b6;
  --family-luck: #ffc53d;
  --family-brain: #a98bff;
  
  --glow-talk: rgba(255, 122, 89, 0.24);
  --glow-read: rgba(255, 143, 200, 0.22);
  --glow-skill: rgba(63, 208, 182, 0.2);
  --glow-luck: rgba(255, 197, 61, 0.2);
  --glow-brain: rgba(169, 139, 255, 0.26);
  --accent-talk: #ffb39e;
  --accent-read: #ffc4e2;
  --accent-skill: #8de6d5;
  --accent-luck: #ffd57a;
  --accent-brain: #cbb9ff;
  
  --danger-lit: #ffad9b;
  --felt-light: #2f7a5c;
  --felt-mid: #1d5440;
  --felt-dark: #143b2e;
  --felt-rail: #4a3226;
  --chip-gold: #ffc53d;
  --paper-ink-soft: #5d544b;
  --paper-rule: #b9ae9f;
  --ink: #151316;
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --focus-ring: var(--focus);
  --boomerang-accent: #ff9564;
  --minefield-flap: #c99a5c;
  --chain-ring: #f6c85f;
  --minefield-board: #28231f;
  --minefield-beer: #f6c85f;
  --minefield-double: #c9f24a;
  --minefield-bomb: #ff6534;
  --bus-driver-card: #f4efe5;
  --bus-driver-red: #b9342c;
  --bus-driver-track: rgba(255, 250, 240, 0.18);
  --duel-ink: #fff9ef;
  --duel-steal: #f5bd48;
  --duel-kill: #ff7148;
  --duel-nothing: #c9f24a;
  --hot-potato-board: #3a241d;
  --hot-potato-flame: #ff7148;
  --hot-potato-spark: #f6c85f;
  --who-would-rather-selected: #ff9564;
  font-family: var(--font-text);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-padding-block: var(--sticky-header-clearance) 2rem; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-size: var(--type-body);
  color: var(--text-primary);
  background: var(--surface-canvas);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background: radial-gradient(80% 45% at 50% -10%, rgba(255, 228, 190, 0.07), transparent 70%);
  pointer-events: none;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  pointer-events: none;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
  scroll-margin-block: var(--sticky-header-clearance) 1.5rem;
}
a,
button,
summary,
.game-picker label { touch-action: manipulation; }
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--field-focus); outline-offset: 3px; }

.app-shell { min-height: 100vh; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--focus-ring);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  background: var(--surface-interactive);
  font-weight: 850;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  transition: transform var(--motion-feedback) var(--motion-ease-standard);
}
.skip-link:focus { transform: translateY(0); }
#main-content { scroll-margin-top: var(--sticky-header-clearance); }
#main-content:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

footer {
  padding: 2.5rem 1rem;
  color: var(--text-tertiary);
  font-size: 0.78rem;
  text-align: center;
}

h1, h2, h3, p { margin-top: 0; }

:where(
  .entry-hero h1, .lobby-floor-head h1, .stage-title h1, .scene-prompt h2,
  .potato-caption h2, .bus-turn h2, .decree-sheet h2, .easel-tag h2, .faker-brief h2, .whoami-identity h2,
  .never-side strong, .never-camp h3, .tod-card strong, .tod-result strong, .chain-break strong,
  .wwr-candidate-verdict .crew-figure-name, .round-close-next-copy :is(h1, h2), .session-finale-facts dd,
  .table-start-copy h2, .poker-close-verdict h2, .poker-next-hand-copy h3, .table-pot strong,
  .evening-titles-heading h3, .evening-title-copy strong, .reveal-tension p, .stage-entrance strong, .estimate-target strong,
  .sober-stamp strong, .level-count strong, .tod-votes dd, .quiz-letter, .duel-handcard strong, .duel-fx text, .fivesec-stamp strong, .mia-stamp strong, .race-place, .hl-stamp strong, .hl-call span,
  .board-head h1 span, .board-dock-head h2, .board-podium h2, .board-card strong, .board-float,
  .tisch-head h1 span, .tisch-dock-head h2, .tisch-result h2, .tisch-banner, .fx-stamp, .fx-burst svg
) { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 900; letter-spacing: var(--track-display); text-transform: uppercase; }

:where(
  .entry-hero h1, .lobby-floor-head h1, .scene-prompt h2, .potato-caption h2, .bus-turn h2, .decree-sheet h2,
  .easel-tag h2, .faker-brief h2, .whoami-identity h2, .never-side strong, .tod-card strong, .chain-break strong,
  .round-close-next-copy :is(h1, h2), .session-finale-facts dd
) { line-height: var(--lead-display); }
.button, h1, h2, h3 { overflow-wrap: anywhere; }

.connection-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.connection-note span,
.status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #d5a232;
  box-shadow: 0 0 0 4px rgba(213, 162, 50, 0.13);
}

.connection-note.connected span,
.status-dot.connected { background: var(--progress); box-shadow: 0 0 0 4px rgba(201, 242, 74, 0.13); }
.status-dot.disconnected { background: var(--danger); }

.form-stack { display: grid; min-width: 0; gap: 1rem; }
.form-stack label,
.game-form label { display: grid; gap: 0.42rem; color: var(--text-secondary); font-size: 0.76rem; font-weight: 800; }
.form-stack label > span { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem; }
.form-stack label > span small { color: var(--text-tertiary); font-size: var(--type-micro); font-weight: 650; }

input, select, textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--target-default);
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  outline: none;
  color: var(--field-text);
  background: var(--field-surface);
  caret-color: var(--field-caret);
  color-scheme: var(--field-color-scheme);
  transition: border-color var(--motion-feedback) var(--motion-ease-standard), box-shadow var(--motion-feedback) var(--motion-ease-standard);
}
input::placeholder,
textarea::placeholder { color: var(--field-placeholder); opacity: 1; }
input::selection,
select::selection,
textarea::selection { color: var(--field-selection-text); background: var(--field-selection); }

input:focus,
select:focus,
textarea:focus { border-color: var(--field-focus); box-shadow: 0 0 0 4px var(--field-focus-ring); }
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] { border-color: var(--field-disabled-border); color: var(--field-disabled-text); background: var(--field-disabled-surface); opacity: 1; }
input:disabled,
select:disabled,
textarea:disabled { cursor: not-allowed; }
input[readonly],
textarea[readonly] { cursor: default; }
input:disabled::placeholder,
textarea:disabled::placeholder,
input[readonly]::placeholder,
textarea[readonly]::placeholder { color: var(--field-disabled-text); }
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
input:user-invalid,
select:user-invalid,
textarea:user-invalid { border-color: var(--field-error); box-shadow: 0 0 0 4px var(--field-error-ring); }

.field-material-dark {
  --field-surface: var(--field-dark-surface);
  --field-text: var(--field-dark-text);
  --field-placeholder: var(--field-dark-placeholder);
  --field-caret: var(--field-dark-caret);
  --field-border: var(--field-dark-border);
  --field-focus: var(--field-dark-focus);
  --field-focus-ring: rgba(140, 200, 255, 0.18);
  --field-disabled-surface: var(--field-dark-disabled-surface);
  --field-disabled-text: var(--field-dark-disabled-text);
  --field-disabled-border: var(--field-dark-border);
  --field-error: var(--field-dark-error);
  --field-error-ring: rgba(255, 123, 110, 0.18);
  --field-selection: var(--field-dark-selection);
  --field-selection-text: var(--field-dark-selection-text);
  --field-color-scheme: dark;
}

.field-material-paper {
  --field-surface: var(--paper-material);
  --field-text: var(--field-paper-text);
  --field-placeholder: var(--field-paper-placeholder);
  --field-caret: var(--field-paper-caret);
  --field-border: var(--field-paper-border);
  --field-focus: var(--field-paper-focus);
  --field-focus-ring: rgba(45, 95, 184, 0.18);
  --field-disabled-surface: var(--field-paper-disabled-surface);
  --field-disabled-text: var(--field-paper-disabled-text);
  --field-disabled-border: var(--field-paper-border);
  --field-error: var(--field-paper-error);
  --field-error-ring: rgba(158, 47, 39, 0.16);
  --field-selection: var(--field-paper-selection);
  --field-selection-text: var(--field-paper-selection-text);
  --field-color-scheme: light;
}
.split-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 0.7rem; color: var(--text-secondary); font-size: 0.76rem; font-weight: 800; }
legend span { color: var(--muted); font-weight: 600; }

.game-choice-fieldset { min-width: 0; }
.game-choice-fieldset > legend { max-width: 100%; overflow-wrap: anywhere; }

.form-disclosure { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); }
.form-disclosure > summary {
  display: grid;
  min-height: var(--target-default);
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  list-style: none;
}
.form-disclosure > summary::-webkit-details-marker { display: none; }
.form-disclosure > summary span { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); font-weight: 850; }
.form-disclosure > summary strong { color: var(--text-secondary); font-size: var(--type-caption); text-align: right; }
.form-disclosure > fieldset { padding: 0.75rem; border-top: 1px solid var(--line); }
.entry-settings-body { display: grid; min-width: 0; gap: 1rem; padding: 0.85rem 0.75rem 0.9rem; border-top: 1px solid var(--line); }

.button {
  display: inline-flex;
  min-width: 0;
  min-height: var(--target-default);
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.72rem 1.05rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  background: var(--surface-raised);
  font-weight: 850;
  cursor: pointer;
  transition: transform var(--motion-feedback) var(--motion-ease-standard), box-shadow var(--motion-feedback) var(--motion-ease-standard), background var(--motion-feedback) var(--motion-ease-standard);
}
.button:hover:not(:disabled) { background: var(--surface-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled {
  border-color: var(--border-subtle);
  color: var(--text-secondary);
  background: var(--surface-shell);
  opacity: 1;
  cursor: not-allowed;
}
.button-primary { border-color: var(--brand-primary); color: var(--ink); background: var(--brand-primary); }
.button-primary:hover:not(:disabled) { background: #d8fa6a; }
.button-danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.button-ghost { border-color: var(--line); }
.button-small { min-height: var(--target-compact); padding: 0.42rem 0.7rem; border-radius: 0.65rem; font-size: 0.75rem; }

.icon-button {
  display: grid;
  width: var(--target-compact);
  height: var(--target-compact);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-primary);
  background: var(--surface-raised);
  font-size: 1.15rem;
  cursor: pointer;
}

.room-code { max-width: 100%; overflow-wrap: anywhere; font-family: var(--font-code); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.empty-state { margin: 1rem 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.5; }

.wordmark { display: inline-flex; min-width: 0; min-height: var(--target-compact); align-items: center; gap: 0.35rem; text-decoration: none; }

.wordmark-mark { display: block; width: 2.4rem; height: auto; transform: rotate(-8deg); }

.brand-wordmark { display: inline-flex; align-items: baseline; padding: 0.14em 0.36em 0.18em; color: var(--ink); background: var(--brand-primary); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.brand-wordmark-sauf { font-stretch: 62%; font-weight: 900; font-size: 1.18em; }
.brand-wordmark-affe { font-stretch: var(--stretch-wide); font-weight: 400; }
.wordmark-type { font-size: 0.98rem; }

.connection-label { color: var(--text-secondary); font-weight: 750; }

.room-layout {
  display: grid;
  width: min(var(--stage-max), calc(100% - 2 * var(--stage-gutter)));
  margin: 0 auto;
  padding: var(--space-shell) 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.play-column { display: grid; min-width: 0; gap: 0.75rem; }

.settings-note { margin: 1rem 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.settings-note.host-note { margin: 0 0 0.85rem; color: var(--brand-text); }

.form-disclosure > summary::after,
.lobby-plan > summary::after,
.session-sheet > summary::after {
  box-sizing: border-box;
  width: 0.68rem;
  height: 0.68rem;
  margin: 0.12rem 0.22rem 0 0.3rem;
  border-right: 2px solid var(--brand-text);
  border-bottom: 2px solid var(--brand-text);
  content: "";
  transform: rotate(45deg);
  transform-origin: 68% 68%;
  transition: transform var(--motion-feedback) var(--motion-ease-standard);
}
.form-disclosure[open] > summary::after,
.lobby-plan[open] > summary::after,
.session-sheet[open] > summary::after { transform: rotate(225deg); }

.game-lead { max-width: 800px; margin-bottom: 2rem; font-size: var(--type-lead); line-height: 1.45; }
.timer { flex: 0 0 auto; min-width: 5.4rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-primary); background: var(--surface-interactive); font-family: var(--font-number); font-weight: 900; text-align: center; }

.game-controls { display: grid; gap: 1rem; margin-top: 1.7rem; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.game-form { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; align-items: end; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-raised); }
.game-form:has(label + label) { grid-template-columns: minmax(0, 2fr) minmax(90px, 0.5fr) auto; }
.game-form label { min-width: 0; }
.game-form label > span, .game-form-hint { max-width: 100%; overflow-wrap: anywhere; }
.game-form-hint { color: currentColor; font-size: var(--type-caption); font-weight: 650; line-height: 1.4; opacity: 0.82; }

.minefield-distribution { display: grid; gap: 0.6rem; margin: 0; padding: 0; border: 0; }
.minefield-distribution legend { width: 100%; margin-bottom: 0.1rem; color: var(--minefield-double); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.minefield-distribution > p { margin: 0; color: rgba(249, 244, 233, 0.7); font-size: 0.72rem; }

.waiting-pill { max-width: 100%; justify-self: center; padding: 0.65rem 0.9rem; overflow-wrap: anywhere; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-raised); color: var(--text-secondary); font-size: 0.78rem; font-weight: 750; line-height: 1.4; }
.next-game { justify-self: start; }

.avatar { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; color: var(--ink); background: var(--progress); font-size: 0.7rem; font-weight: 900; }

.saufaffe-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.14em;
}
.icon-button .saufaffe-icon { width: 1.15rem; height: 1.15rem; }
.saufaffe-icon-fill { fill: currentColor; stroke: none; }

.game-illustration { display: inline-block; width: 1.5rem; height: 1.5rem; overflow: visible; vertical-align: middle; }

.player-avatar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--caricature-disc, #3b2a5a);
}
.caricature-art { display: block; width: 100%; height: 100%; overflow: visible; }
.caricature-disc-0 { --caricature-disc: #3b2a5a; }
.caricature-disc-1 { --caricature-disc: #2a3f66; }
.caricature-disc-2 { --caricature-disc: #5a2a45; }
.caricature-disc-3 { --caricature-disc: #1f4a42; }
.caricature-disc-4 { --caricature-disc: #54401f; }
.caricature-disc-5 { --caricature-disc: #462a66; }
.caricature-disc-6 { --caricature-disc: #2f3b4a; }
.caricature-disc-7 { --caricature-disc: #5a3326; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.rule-row { display: grid; grid-template-columns: 1fr auto; gap: 0.55rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.rule-row:last-child { border-bottom: 0; }
.rule-row div { grid-column: 1 / -1; }
.rule-row strong, .rule-row small { display: block; }
.rule-row strong { font-size: 0.82rem; line-height: 1.4; }
.rule-row small { margin-top: 0.25rem; color: var(--muted); font-size: 0.68rem; }
.rule-row select { min-height: var(--target-compact); padding: 0.35rem 0.55rem; font-size: 1rem; }

:where(.entry-layout, .room-bar, .room-layout, .poker-layout)
  :where(h1, h2, h3, p, li, dt, dd, label, legend, strong, small) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.notice { position: fixed; top: 1rem; left: 50%; z-index: 100; width: min(560px, calc(100% - 2rem)); padding: 0.85rem 1rem; border: 1px solid var(--border-strong); border-radius: 0.9rem; color: var(--text-primary); background: var(--surface-interactive); box-shadow: 0 14px 45px rgba(0,0,0,0.32); font-size: 0.84rem; font-weight: 750; transform: translateX(-50%); }
.notice.error { color: var(--ink); background: var(--danger); }
.notice.success { color: var(--ink); background: var(--progress); }

.form-stack label,
.game-form label,
legend,
.rule-row small { font-size: var(--type-caption); }

[data-feedback-role="game-start"][data-motion="game-transition"] [data-game-start-accent],
[data-feedback-role="game-start"][data-motion="game-transition"] .game-controls > :first-child {
  animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) both;
}

[data-feedback-role="hand-start"][data-motion="poker-hand-start"] [data-poker-motion-target="hand"] {
  animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) both;
}

[data-feedback-role="hand-start"][data-motion="poker-hand-start"] [data-poker-motion-target="position"] {
  animation: saufaffe-stamp var(--motion-feedback) var(--motion-ease-emphasized) both;
}

[data-feedback-role="turn-pass"][data-motion="poker-turn-change"] [data-poker-motion-target="turn"] .poker-seat-avatar {
  animation: saufaffe-pass var(--motion-transition) var(--motion-ease-emphasized) both;
}
[data-feedback-role="turn-pass"][data-motion="poker-turn-change"] [data-poker-motion-target="turn-indicator"] {
  animation: saufaffe-success var(--motion-feedback) var(--motion-ease-emphasized) both;
}

[data-feedback-role="board-reveal"][data-motion="poker-board-reveal"] [data-poker-motion-target="street"] {
  animation: saufaffe-success var(--motion-feedback) var(--motion-ease-emphasized) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="outcome"] {
  animation: saufaffe-enter var(--motion-reveal) var(--motion-ease-standard) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="showdown"] {
  animation: saufaffe-enter var(--motion-reveal) var(--motion-ease-standard) calc(var(--winner-at) + 90ms) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="hand"] {
  animation: saufaffe-card-reveal var(--motion-reveal) var(--motion-ease-emphasized) calc(var(--winner-at) + 150ms) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="hand"]:nth-child(2) { animation-delay: calc(var(--winner-at) + 205ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="hand"]:nth-child(3) { animation-delay: calc(var(--winner-at) + 260ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="hand-winner"] {
  animation: saufaffe-success var(--motion-feedback) var(--motion-ease-emphasized) calc(var(--winner-at) + 315ms) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="payout"] {
  animation: saufaffe-enter var(--motion-reveal) var(--motion-ease-standard) calc(var(--winner-at) + 330ms) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="pot"] {
  animation: saufaffe-poker-pot var(--motion-transition) var(--motion-ease-emphasized) calc(var(--winner-at) + 400ms) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] li:nth-child(2) > [data-poker-motion-target="pot"] { animation-delay: calc(var(--winner-at) + 455ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] li:nth-child(3) > [data-poker-motion-target="pot"] { animation-delay: calc(var(--winner-at) + 510ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="winner"] {
  animation: saufaffe-poker-payout var(--motion-feedback) var(--motion-ease-emphasized) calc(var(--winner-at) + 520ms) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="refund"] {
  animation: saufaffe-pass var(--motion-transition) var(--motion-ease-emphasized) calc(var(--winner-at) + 575ms) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="winner-seat"] .poker-seat-avatar {
  animation: saufaffe-winner-ring 1ms linear var(--winner-at) both, saufaffe-success var(--motion-feedback) var(--motion-ease-emphasized) calc(var(--winner-at) + 520ms) both;
}
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="next-hand"] {
  animation: saufaffe-enter var(--motion-reveal) var(--motion-ease-standard) calc(var(--winner-at) + 680ms) both;
}

@keyframes saufaffe-enter {
  from { opacity: 0; transform: translateY(0.55rem) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes saufaffe-poker-deal {
  0% { opacity: 0; transform: perspective(20rem) rotateY(90deg) scale(1); }
  60% { opacity: 1; transform: perspective(20rem) rotateY(0deg) scale(1.3) translateY(-0.3rem); }
  100% { opacity: 1; transform: none; }
}
@keyframes saufaffe-poker-pot {
  from { opacity: 0.48; transform: translateX(-0.75rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes saufaffe-poker-payout {
  0% { opacity: 0.45; transform: translateX(-0.65rem) scale(0.94); }
  70% { opacity: 1; transform: translateX(0.12rem) scale(1.025); }
  100% { opacity: 1; transform: none; }
}
@keyframes saufaffe-lock-in {
  0% { opacity: 0.72; transform: scale(0.985); }
  62% { opacity: 1; transform: scale(1.012); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes saufaffe-progress-step {
  0% { opacity: 0.72; transform: translateY(0.18rem); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes saufaffe-card-reveal {
  from { opacity: 0.5; transform: translateX(0.8rem) rotate(4deg) scale(0.94); }
  to { opacity: 1; transform: rotate(-1.5deg) scale(1); }
}
@keyframes saufaffe-success {
  0% { filter: brightness(1); transform: scale(1); }
  55% { filter: brightness(1.18); transform: scale(1.035); }
  100% { filter: brightness(1); transform: scale(1); }
}
@keyframes saufaffe-nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-0.3rem); }
  70% { transform: translateX(0.2rem); }
}
@keyframes saufaffe-flip {
  from { opacity: 0.35; transform: perspective(40rem) rotateY(-72deg) scale(0.96); }
  to { opacity: 1; transform: perspective(40rem) rotateY(0) scale(1); }
}
@keyframes saufaffe-pass {
  0% { transform: translateX(-0.65rem) rotate(-5deg); }
  55% { transform: translateX(0.5rem) rotate(4deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes saufaffe-boomerang {
  0% { opacity: 0.2; transform: translateX(-1.6rem) rotate(-75deg) scale(0.78); }
  58% { opacity: 1; transform: translateX(0.8rem) rotate(205deg) scale(1.08); }
  100% { opacity: 1; transform: translateX(0) rotate(348deg) scale(1); }
}
@keyframes saufaffe-impact {
  0% { opacity: 0.45; transform: scale(0.82); }
  58% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes saufaffe-tile-reveal {
  from { opacity: 0.55; transform: perspective(24rem) rotateX(-35deg) scale(0.92); }
  to { opacity: 1; transform: perspective(24rem) rotateX(0) scale(1); }
}
@keyframes saufaffe-note-reveal {
  from { opacity: 0; transform: translateY(-0.45rem) rotate(-1.5deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes saufaffe-stamp {
  0% { opacity: 0; transform: rotate(-10deg) scale(1.35); }
  70% { opacity: 1; transform: rotate(-3deg) scale(0.96); }
  100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}

@media (max-width: 680px) {

  .split-fields { grid-template-columns: 1fr; }
  .form-disclosure > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .form-disclosure > summary::after { grid-column: 2; grid-row: 1; }
  .form-disclosure > summary strong { grid-column: 1 / -1; text-align: left; }

  .wordmark-type { display: none; }

  .timer { display: inline-block; margin-bottom: 1rem; }
  .game-form, .game-form:has(label + label) { grid-template-columns: 1fr; }
}

.room-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  min-height: 3.5rem;
  
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem var(--stage-gutter);
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(17, 16, 19, 0.9);
  backdrop-filter: blur(14px);
}
.room-bar-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 0.9rem; }
.room-bar .copy-code,
.sheet-code {
  display: inline-flex;
  min-width: 0;
  min-height: var(--target-compact);
  max-width: 100%;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  color: var(--text-primary);
  background: transparent;
  font-size: 0.82rem;
  cursor: copy;
}
.room-bar .copy-code span { min-width: 0; overflow-wrap: anywhere; }
.room-bar .copy-code .saufaffe-icon { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--brand-text); }
.room-bar-connection { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.room-bar > .button { justify-self: end; }

.crew-figure {
  --figure: var(--figure-size);
  position: relative;
  display: grid;
  width: calc(var(--figure) + 2rem);
  min-width: 0;
  align-content: start;
  justify-items: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  text-align: center;
}
.crew-figure-avatar { display: grid; width: var(--figure); height: var(--figure); border-radius: 50%; box-shadow: var(--figure-ring); }

.crew-figure-name { max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; font-stretch: 82%; font-size: 0.9rem; line-height: 1.15; }
.crew-figure-tag { max-width: 100%; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 750; line-height: 1.25; }

.crew-streak { display: inline-flex; align-items: center; gap: 0.1rem; padding: 0.12rem 0.36rem 0.12rem 0.28rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-raised); color: var(--text-primary); font-family: var(--font-number); font-size: var(--type-caption); font-weight: 900; line-height: 1; }
.crew-streak-icon { width: 0.95rem; height: 0.95rem; }
.crew-streak-dry .crew-streak-icon { color: var(--accent-luck); }
.crew-streak-wet .crew-streak-icon { color: var(--focus); }
.crew-figure > .crew-streak { position: absolute; z-index: 1; top: 0; left: 0.35rem; }

.crew-figure.is-row { --figure: 2.5rem; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 0.1rem 0.65rem; text-align: left; }
.crew-figure.is-row > .crew-figure-avatar { grid-column: 1; grid-row: 1 / span 2; }
.crew-figure.is-row > :not(.crew-figure-avatar, .crew-badge, .crew-streak) { grid-column: 2; }
.crew-figure.is-row > .crew-badge { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
.crew-figure.is-row > .crew-streak { top: -0.2rem; left: -0.2rem; }
.crew-figure.is-viewer .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.4rem var(--progress), 0 1rem 1.6rem rgba(0, 0, 0, 0.42); }
.crew-figure.is-offline .crew-figure-avatar { opacity: 0.5; filter: grayscale(1); }

.stage-tokens { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.stage-tokens i { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; border: 2px solid rgba(245, 241, 232, 0.42); border-radius: 50%; }
.stage-tokens i.is-filled { border-color: var(--progress); background: var(--progress); box-shadow: 0 0 0.6rem rgba(201, 242, 74, 0.45); }
.stage-tokens i.is-own { border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: 0 0 0 3px rgba(201, 242, 74, 0.3); }

.stage-cta,
.round-close-next .button-primary,
.entry-go {
  min-height: 3.8rem;
  padding-inline: 1.4rem;
  border-radius: var(--radius-control);
  box-shadow: var(--cta-depth);
  overflow-wrap: normal;
  font-stretch: 78%;
  font-weight: 900;
  
  font-size: clamp(1.05rem, 5.6vw, 1.35rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.stage-cta:hover:not(:disabled),
.round-close-next .button-primary:hover:not(:disabled) { box-shadow: 0 0.55rem 0 var(--brand-deep), 0 1.3rem 2.4rem rgba(201, 242, 74, 0.3); }
.stage-cta:active:not(:disabled),
.round-close-next .button-primary:active:not(:disabled) { box-shadow: 0 0.12rem 0 var(--brand-deep); transform: translateY(0.28rem); }
.stage-cta:disabled,
.round-close-next .button-primary:disabled { box-shadow: none; }

:where(.button, .potato-action-primary, button.crew-pick, button.never-side, button.sober-stamp, button.quiz-tile, .duel-handcard, .bus-answer, .choice-tile, .mine-cell, button.tod-card, .tod-verdict, .fivesec-verdict) { position: relative; }
:where(.button, .potato-action-primary, button.crew-pick, button.never-side, button.sober-stamp, button.quiz-tile, .duel-handcard, .bus-answer, .choice-tile, .mine-cell, button.tod-card, .tod-verdict, .fivesec-verdict):hover:not(:disabled)::after { position: absolute; top: 100%; right: 0; left: 0; height: 0.45rem; content: ""; }

.seat-ring { --ring-rx: 40%; --ring-ry: 38%; --seat-step: 0deg; position: relative; }
[data-seat-count="1"] { --seat-step: 360deg; }
[data-seat-count="2"] { --seat-step: 180deg; }
[data-seat-count="3"] { --seat-step: 120deg; }
[data-seat-count="4"] { --seat-step: 90deg; }
[data-seat-count="5"] { --seat-step: 72deg; }
[data-seat-count="6"] { --seat-step: 60deg; }
[data-seat-count="7"] { --seat-step: 51.4286deg; }
[data-seat-count="8"] { --seat-step: 45deg; }
[data-seat-count="9"] { --seat-step: 40deg; }
[data-seat-count="10"] { --seat-step: 36deg; }
[data-seat-count="11"] { --seat-step: 32.7273deg; }
[data-seat-count="12"] { --seat-step: 30deg; }
[data-seat="0"] { --seat-index: 0; }
[data-seat="1"] { --seat-index: 1; }
[data-seat="2"] { --seat-index: 2; }
[data-seat="3"] { --seat-index: 3; }
[data-seat="4"] { --seat-index: 4; }
[data-seat="5"] { --seat-index: 5; }
[data-seat="6"] { --seat-index: 6; }
[data-seat="7"] { --seat-index: 7; }
[data-seat="8"] { --seat-index: 8; }
[data-seat="9"] { --seat-index: 9; }
[data-seat="10"] { --seat-index: 10; }
[data-seat="11"] { --seat-index: 11; }
.seat-ring[data-focus-seat="0"] { --focus-index: 0; }
.seat-ring[data-focus-seat="1"] { --focus-index: 1; }
.seat-ring[data-focus-seat="2"] { --focus-index: 2; }
.seat-ring[data-focus-seat="3"] { --focus-index: 3; }
.seat-ring[data-focus-seat="4"] { --focus-index: 4; }
.seat-ring[data-focus-seat="5"] { --focus-index: 5; }
.seat-ring[data-focus-seat="6"] { --focus-index: 6; }
.seat-ring[data-focus-seat="7"] { --focus-index: 7; }
.seat-ring[data-focus-seat="8"] { --focus-index: 8; }
.seat-ring[data-focus-seat="9"] { --focus-index: 9; }
.seat-ring[data-focus-seat="10"] { --focus-index: 10; }
.seat-ring[data-focus-seat="11"] { --focus-index: 11; }
.seat-ring[data-origin-seat="0"] { --origin-index: 0; }
.seat-ring[data-origin-seat="1"] { --origin-index: 1; }
.seat-ring[data-origin-seat="2"] { --origin-index: 2; }
.seat-ring[data-origin-seat="3"] { --origin-index: 3; }
.seat-ring[data-origin-seat="4"] { --origin-index: 4; }
.seat-ring[data-origin-seat="5"] { --origin-index: 5; }
.seat-ring[data-origin-seat="6"] { --origin-index: 6; }
.seat-ring[data-origin-seat="7"] { --origin-index: 7; }
.seat-ring[data-origin-seat="8"] { --origin-index: 8; }
.seat-ring[data-origin-seat="9"] { --origin-index: 9; }
.seat-ring[data-origin-seat="10"] { --origin-index: 10; }
.seat-ring[data-origin-seat="11"] { --origin-index: 11; }
@supports (top: calc(1px * sin(1deg))) {
  .seat-ring:not([data-seat-count="many"]) [data-seat] {
    --seat-angle: calc(90deg + var(--ring-turn, 0deg) + var(--seat-step) * var(--ring-dir, 1) * var(--seat-index, 0));
    position: absolute;
    top: calc(50% + var(--ring-ry) * sin(var(--seat-angle)));
    left: calc(50% + var(--ring-rx) * cos(var(--seat-angle)));
    transform: translate(-50%, -50%);
  }
}

.entry-layout {
  position: relative;
  display: grid;
  width: min(var(--stage-max), calc(100% - 2 * var(--stage-gutter)));
  min-height: calc(100vh - 6.5rem);
  margin: 0 auto;
  padding: clamp(1rem, 4vh, 3rem) 0 1rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 0.85fr);
  align-items: center;
  container: entry / inline-size;
  gap: clamp(1.5rem, 5vw, 5rem);
}
.entry-hero {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand status" "poster poster" "count count" "guests guests" "copy copy";
  align-content: center;
  gap: 1rem;
  container-type: inline-size;
}

.entry-hero > .connection-note { grid-area: status; max-width: 12rem; justify-self: end; padding: 0; border: 0; background: none; }
.entry-brand { display: flex; grid-area: brand; align-items: center; gap: 0.45rem; margin: 0; }
.entry-brand-mark { display: block; width: 2.6rem; height: auto; transform: rotate(-8deg); }
.entry-lockup { font-size: 1.15rem; }

.entry-poster { display: grid; grid-area: poster; margin: 0; overflow-x: clip; line-height: 0.86; container-type: inline-size; }
.poster-line { display: block; font-stretch: 90%; font-weight: 900; font-size: 26.6cqi; white-space: nowrap; }
.poster-line.is-wide { font-stretch: var(--stretch-wide); font-weight: 800; font-size: 21.4cqi; }
.poster-line.is-accent { color: var(--brand-primary); font-stretch: 62%; font-size: 22.9cqi; }
.entry-count { grid-area: count; align-self: start; justify-self: start; margin: 0; padding: 0.3rem 0.55rem 0.32rem; color: var(--ink); background: var(--at-stake); font-stretch: 75%; font-weight: 900; font-size: 0.95rem; line-height: 1; text-transform: uppercase; transform: rotate(-3deg); }

.entry-guests { display: grid; grid-area: guests; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0.3rem 0 0; padding: 0; list-style: none; }
.entry-guests li { display: grid; justify-items: center; gap: 0.3rem; }
.entry-guests li:nth-child(1) { transform: rotate(-5deg); }
.entry-guests li:nth-child(2) { transform: rotate(3deg) translateY(-0.4rem); }
.entry-guests li:nth-child(3) { transform: rotate(4deg); }
.entry-guest-face { display: grid; width: clamp(4.2rem, 9cqi, 6.4rem); height: clamp(4.2rem, 9cqi, 6.4rem); }
.speech-tag { position: relative; display: inline-block; max-width: 100%; padding: 0.32rem 0.6rem; border-radius: 0.9rem; color: var(--ink); background: var(--paper-material); font-size: var(--type-caption); font-weight: 800; line-height: 1.15; text-align: center; box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35); }
.entry-hero-copy { grid-area: copy; max-width: 32rem; margin: 0; color: var(--text-primary); font-size: var(--type-lead); line-height: 1.45; }

.entry-console {
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-shell);
}
.entry-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; padding: 0.3rem; border-radius: var(--radius-control); background: var(--surface-sunken); }
.entry-tab {
  display: grid;
  min-width: 0;
  min-height: 3.6rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: calc(var(--radius-control) - 0.1rem);
  color: var(--text-secondary);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-feedback) var(--motion-ease-standard), color var(--motion-feedback) var(--motion-ease-standard);
}
.entry-tab .saufaffe-icon { width: 1.3rem; height: 1.3rem; }
.entry-tab span { display: grid; min-width: 0; }
.entry-tab strong { overflow-wrap: anywhere; font-stretch: 85%; font-weight: 800; font-size: 1.02rem; line-height: 1.15; }
.entry-tab small { overflow-wrap: anywhere; color: var(--text-tertiary); font-size: var(--type-micro); font-weight: 700; }
.entry-tab:hover:not([aria-selected="true"]) { color: var(--text-primary); background: var(--surface-interactive); }
.entry-tab[aria-selected="true"] { color: var(--ink); background: var(--brand-primary); }
.entry-tab[aria-selected="true"] small { color: var(--ink); }
.entry-panel { display: grid; min-width: 0; gap: 1.1rem; padding: clamp(1rem, 2.5vw, 1.6rem); }
.entry-panel[hidden] { display: none; }
.entry-panel-note { margin: 0; color: var(--text-secondary); font-size: var(--type-small); line-height: 1.5; }
.entry-code-field input {
  min-height: 3.8rem;
  font-family: var(--font-code);
  font-stretch: 75%;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}
.entry-go { width: 100%; }

.name-field { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem; }
.name-field > label { min-width: 0; }

.entry-password { display: grid; min-width: 0; gap: 0.5rem; }
.entry-password > summary { display: inline-flex; min-height: var(--target-compact); width: fit-content; align-items: center; gap: 0.4rem; color: var(--brand-text); font-size: var(--type-small); font-weight: 800; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 0.2em; }
.entry-password > summary::-webkit-details-marker { display: none; }
.entry-password[open] > summary { text-decoration: none; color: var(--text-secondary); }

.name-dice { color: var(--brand-text); }
.name-dice .saufaffe-icon { width: 1.2rem; height: 1.2rem; }
.open-rooms { display: grid; min-width: 0; gap: 0.5rem; padding-top: 1rem; border-top: 1px dashed var(--border-subtle); }
.open-rooms-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.open-rooms-heading h3 { margin: 0; color: var(--text-secondary); font-size: var(--type-caption); letter-spacing: 0.08em; text-transform: uppercase; }
.open-rooms-empty { margin: 0; color: var(--text-secondary); font-size: var(--type-small); line-height: 1.5; }
.open-room-list { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.open-room { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border-subtle); }
.open-room .room-code { font-size: var(--type-small); }
.open-room-copy { display: grid; min-width: 0; }
.open-room-copy strong { overflow-wrap: anywhere; font-size: var(--type-small); }
.open-room-copy small { color: var(--text-secondary); font-size: var(--type-caption); }

.lobby-floor {
  position: relative;
  display: grid;
  width: min(var(--stage-max), 100%);
  margin-inline: auto;
  padding-top: clamp(0.5rem, 3vh, 2rem);
  
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
  
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "head start"
    "crew start"
    "invite start"
    "look start"
    "room start";
  align-items: start;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 0.75rem;
  isolation: isolate;
}
.lobby-floor-head { display: grid; min-width: 0; grid-area: head; justify-items: start; gap: 0.5rem; }

.lobby-invite { display: grid; min-width: 0; grid-area: invite; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem 1rem; padding: 0.8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-panel); background: var(--surface-raised); }
.lobby-invite-qr { width: 8.5rem; height: 8.5rem; padding: 0.3rem; border: 3px solid var(--ink); border-radius: 0.5rem; background: #fff; }
.lobby-invite-qr:empty { display: none; }
.lobby-invite-qr svg { display: block; width: 100%; height: 100%; }
.lobby-invite-copy { display: grid; min-width: 0; gap: 0.4rem; }
.lobby-invite-copy h2 { margin: 0; font-size: var(--type-body); }
.lobby-invite-copy p { margin: 0; color: var(--text-secondary); font-size: var(--type-small); line-height: 1.4; }
.lobby-invite-code { color: var(--text-primary); font-family: var(--font-number); letter-spacing: 0.08em; white-space: nowrap; }
.lobby-invite-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lobby-invite-actions .saufaffe-icon { width: 1rem; height: 1rem; }

.host-say { display: flex; min-width: 0; align-items: center; gap: 0.7rem; margin: 0; }
.lobby-host { display: block; width: 3.8rem; height: auto; flex: 0 0 auto; }
.host-say .speech-tag { font-size: var(--type-small); }
.lobby-count span { color: var(--brand-primary); }
.lobby-copy { max-width: 32rem; margin: 0; color: var(--text-secondary); line-height: 1.5; }

.lobby-one-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0; color: var(--text-primary); font-size: var(--type-small); font-weight: 750; }
.lobby-one-phone .button .saufaffe-icon { width: 1rem; height: 1rem; }

.crew-role { padding: 0.08rem 0.3rem 0.1rem; color: var(--ink); background: var(--prize); font-stretch: 75%; font-weight: 900; text-transform: uppercase; }

.lobby-room { display: grid; min-width: 0; grid-area: room; align-self: start; }
.lobby-me, .lobby-cards, .lobby-row { min-width: 0; border-top: 1px solid var(--border-subtle); }
.lobby-room > :last-child { border-bottom: 1px solid var(--border-subtle); }

.lobby-row { display: grid; min-height: var(--target-compact); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 0.65rem; padding: 0.45rem 0.1rem; }
.lobby-row > p { display: flex; min-width: 0; align-items: center; gap: 0.5rem; margin: 0; color: var(--text-primary); font-size: var(--type-small); font-weight: 750; line-height: 1.3; }
.lobby-row > p small { display: block; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 650; }
.lobby-row .saufaffe-icon, .play-style-label .saufaffe-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; color: var(--brand-text); }
.lobby-row.screen-link:has(.screen-link-url) { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.lobby-me > summary, .lobby-cards > summary { display: grid; min-height: var(--target-compact); grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.3rem 0.65rem; padding: 0.4rem 0.1rem; cursor: pointer; list-style: none; }
.lobby-me > summary::-webkit-details-marker, .lobby-cards > summary::-webkit-details-marker { display: none; }
.lobby-me > summary > span, .lobby-poker-title { display: inline-flex; min-width: 0; align-items: center; gap: 0.5rem; font-size: var(--type-small); }
.lobby-me > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-me > summary small, .lobby-cards > summary small { color: var(--brand-text); font-size: var(--type-caption); font-weight: 850; }
.lobby-me-avatar { display: grid; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; }
.lobby-poker-title .saufaffe-icon { width: 1.1rem; height: 1.1rem; color: var(--brand-text); }
.lobby-me-form, .lobby-poker, .lobby-poker-body, .lobby-poker-form { display: grid; min-width: 0; gap: 0.65rem; }
.lobby-me-form { padding: 0.5rem 0 0.9rem; }
.lobby-me-form > .button { justify-self: start; }
.lobby-me-reroll { margin-bottom: 0.7rem; }
.lobby-me-hand-off { margin-bottom: 0.7rem; }
.lobby-me-hand-off-ready { display: grid; justify-items: start; gap: 0.5rem; margin-bottom: 0.9rem; }
.lobby-me-hand-off-ready p { margin: 0; color: var(--text-secondary); font-size: var(--type-small); line-height: 1.45; }
.lobby-poker-body { padding: 0.5rem 0 1rem; }
:is(.lobby-poker, .lobby-poker-body) > p { margin: 0; color: var(--text-secondary); font-size: var(--type-small); line-height: 1.45; }
.lobby-poker-body > .button, .lobby-poker-form > .button:not(.stage-cta) { justify-self: start; }
.lobby-poker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.lobby-poker-standing { display: grid; margin: 0; padding: 0; gap: 0.35rem; list-style: none; }
.lobby-poker-standing li { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-size: var(--type-small); }
.lobby-poker-standing span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-poker-standing small { color: var(--text-tertiary); }
.lobby-poker-standing strong { font-family: var(--font-number); }
.lobby-poker-avatar { display: grid; width: 1.9rem; height: 1.9rem; }
.lobby-blind-field { display: grid; gap: 0.45rem; }
.lobby-blind-custom { display: flex; align-items: center; gap: 0.5rem; font-size: var(--type-small); font-weight: 750; }
.lobby-blind-custom[hidden] { display: none; }
.lobby-blind-custom input { width: 5.5rem; flex: 0 0 auto; }
.lobby-poker-check { display: flex; align-items: center; gap: 0.55rem; align-self: end; min-height: var(--target-default); font-size: var(--type-small); font-weight: 750; cursor: pointer; }
.lobby-poker-check input { width: 1.3rem; min-width: 0; height: 1.3rem; min-height: 0; padding: 0; flex-shrink: 0; accent-color: var(--brand-primary); }
.lobby-poker-standing .lobby-poker-winner { color: var(--progress); font-weight: 900; }
.lobby-me > summary::after,
.lobby-cards > summary::after {
  box-sizing: border-box;
  width: 0.68rem;
  height: 0.68rem;
  margin: 0.12rem 0.22rem 0 0.3rem;
  border-right: 2px solid var(--brand-text);
  border-bottom: 2px solid var(--brand-text);
  content: "";
  transform: rotate(45deg);
  transform-origin: 68% 68%;
  transition: transform var(--motion-feedback) var(--motion-ease-standard);
}
.lobby-me[open] > summary::after, .lobby-cards[open] > summary::after { transform: rotate(225deg); }

.activity-switch { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.activity-switch legend { margin-bottom: 0.45rem; padding: 0; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 850; }
.activity-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.activity-option input { min-width: 0; min-height: 0; margin: -1px; }
.activity-option > span { display: grid; min-width: 0; min-height: 4rem; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.05rem 0.6rem; padding: 0.6rem 0.75rem; border: 2px solid var(--border-strong); border-radius: 1rem; color: var(--text-secondary); background: var(--surface-interactive); }
.activity-option .activity-art { width: 2.1rem; height: 2.1rem; grid-row: span 2; }
.activity-option.is-wide { grid-column: 1 / -1; }
.activity-group-label { grid-column: 1 / -1; margin: 0.35rem 0 -0.1rem; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }

@media (max-width: 719px) {
  
  .activity-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .activity-option.is-wide > span { min-height: 3.4rem; padding-block: 0.45rem; }
  .activity-option:not(.is-wide) > span { min-height: 3.9rem; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 0.2rem; padding: 0.4rem 0.2rem; text-align: center; }
  .activity-option:not(.is-wide) .activity-art { width: 1.55rem; height: 1.55rem; grid-row: auto; }
  .activity-option:not(.is-wide) b { font-size: var(--type-micro); line-height: 1.1; -webkit-hyphens: manual; hyphens: manual; }
  .activity-option:not(.is-wide) small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (min-width: 720px) {
  .activity-option:not(.is-wide) > span { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0.15rem; }
  .activity-option:not(.is-wide) .activity-art { grid-row: auto; }
  .activity-option:not(.is-wide) :is(b, small) { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
}
.activity-option b { color: var(--text-primary); font-stretch: 85%; font-size: var(--type-body); line-height: 1.15; }
.activity-option small { overflow-wrap: anywhere; font-size: var(--type-caption); font-weight: 750; }
.activity-option input:checked + span { border-color: var(--brand-primary); background: var(--surface-raised); box-shadow: 0 0 0 3px var(--field-focus-ring); }
.activity-option input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.play-style { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0.4rem; }
.play-style-label { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 0.3rem; color: var(--text-primary); font-size: var(--type-small); font-weight: 750; }
.play-style-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.play-style-option input { min-width: 0; min-height: 0; margin: -1px; }
.play-style-option > span { display: grid; min-height: 2.5rem; place-items: center; padding: 0.3rem 0.5rem; border: 2px solid var(--border-strong); border-radius: 999px; color: var(--text-secondary); background: var(--surface-interactive); font-size: var(--type-caption); font-weight: 850; line-height: 1.1; text-align: center; }
.play-style-option input:checked + span { border-color: var(--brand-primary); color: var(--text-primary); background: var(--surface-raised); box-shadow: 0 0 0 3px var(--field-focus-ring); }
.play-style-option input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.play-style-option input:disabled + span { cursor: not-allowed; opacity: 0.55; }

@media (max-width: 430px) {
  .play-style-label { margin-right: 0.1rem; }
  .play-style-label > span { display: none; }
}
.activity-panel { display: grid; min-width: 0; gap: 0.75rem; }
.activity-panel > :is(.lobby-plan, .lobby-cards) { margin: 0; }

.lobby-cards label { display: grid; gap: 0.35rem; font-size: var(--type-small); }
.lobby-cards li span { white-space: normal; }
.look-reveal { display: grid; min-width: 0; grid-area: look; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem 0.9rem; padding: 0.7rem 0.9rem; border: 2px solid var(--brand-primary); border-radius: 1.2rem; background: var(--surface-raised); box-shadow: var(--shadow-board); }
.look-reveal-avatar { display: grid; width: 3.6rem; height: 3.6rem; }
.look-reveal-copy { display: grid; min-width: 0; gap: 0.15rem; }
.look-reveal-copy h2 { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: var(--lead-display); }
.look-reveal-copy p { margin: 0; color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.35; }
.look-reveal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 860px) {
  .look-reveal { grid-template-columns: auto minmax(0, 1fr); }
  .look-reveal-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .look-reveal-actions .button { width: 100%; }
}
.lobby-floor-head h1 { margin: 0; font-size: var(--stage-display); }
.lobby-start { display: grid; min-width: 0; grid-area: start; gap: 0.7rem; }
.lobby-ready { min-width: 0; }
.lobby-ready progress { width: min(100%, 14rem); height: 0.5rem; overflow: hidden; border: 0; border-radius: 999px; appearance: none; background: rgba(245, 241, 232, 0.15); }
.lobby-ready progress::-webkit-progress-bar { border-radius: 999px; background: rgba(245, 241, 232, 0.15); }
.lobby-ready progress::-webkit-progress-value { border-radius: 999px; background: var(--progress); }
.lobby-ready progress::-moz-progress-bar { border-radius: 999px; background: var(--progress); }
.lobby-start .stage-cta,
.lobby-start .waiting-pill { width: 100%; }
.lobby-start .waiting-pill { display: grid; min-height: 3.6rem; place-items: center; border-style: dashed; border-radius: 1rem; text-align: center; }
.lobby-plan { min-width: 0; border-top: 1px solid var(--border-subtle); }
.lobby-plan > summary { display: grid; min-height: var(--target-compact); grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.3rem 0.65rem; padding: 0.4rem 0.1rem; cursor: pointer; list-style: none; }
.lobby-plan > summary::-webkit-details-marker { display: none; }
.lobby-plan-title { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--type-small); }
.lobby-plan-title .saufaffe-icon { width: 1.1rem; height: 1.1rem; color: var(--brand-text); }
.lobby-plan-facts { display: flex; flex-wrap: wrap; gap: 0.2rem 0.65rem; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 750; }
.lobby-plan-action { margin-left: auto; color: var(--brand-text); font-size: var(--type-caption); font-weight: 850; text-decoration: underline; text-underline-offset: 0.22em; }
.lobby-plan-body { padding: 0.75rem 0 1rem; }

.game-picker,
.game-pool-list { --family: var(--family-talk); display: flex; min-width: 0; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.game-picker label { position: relative; display: block; min-width: 0; cursor: pointer; }
.game-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.game-picker label > span,
.game-pool-list li {
  display: inline-flex;
  min-width: 0;
  min-height: var(--target-compact);
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem 0.3rem 0.65rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  font-size: var(--type-caption);
  font-weight: 800;
  justify-content: flex-start;
  transition: border-color var(--motion-feedback) var(--motion-ease-standard), background var(--motion-feedback) var(--motion-ease-standard);
}
[data-game-family="read"] > span,
li[data-game-family="read"] { --family: var(--family-read); }
[data-game-family="skill"] > span,
li[data-game-family="skill"] { --family: var(--family-skill); }
[data-game-family="luck"] > span,
li[data-game-family="luck"] { --family: var(--family-luck); }
[data-game-family="brain"] > span,
li[data-game-family="brain"] { --family: var(--family-brain); }
.game-picker span i { display: grid; place-items: center; color: var(--family); }
.game-picker span .saufaffe-icon,
.game-pool-list .saufaffe-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: var(--family); }
.game-picker span b,
.game-pool-list span { min-width: 0; overflow-wrap: anywhere; font-weight: inherit; line-height: 1.2; }

.game-picker input:not(:checked) + span i { opacity: 0.55; }
.game-picker input:not(:checked) + span b { text-decoration: line-through; }
.game-picker label:hover > span { border-color: var(--text-primary); }
.game-picker label > input:checked + span,
.game-pool-list li { border-style: solid; border-color: var(--family); color: var(--text-primary); background: color-mix(in srgb, var(--family) 13%, transparent); }
.game-picker input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.game-pool-groups, .game-pool-overview { display: grid; min-width: 0; gap: 0.9rem; }
.game-pool-group { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.45rem 0.6rem; margin: 0; padding: 0; border: 0; }
.game-pool-group > :is(.game-picker, .game-pool-list) { grid-column: 1 / -1; }
.game-pool-group > legend, .game-pool-group-title { float: left; margin: 0; padding: 0; font-stretch: 75%; font-weight: 900; font-size: var(--type-small); letter-spacing: 0.04em; text-transform: uppercase; }
.game-pool-group[data-pool-family="talk"] { --family: var(--family-talk); }
.game-pool-group[data-pool-family="read"] { --family: var(--family-read); }
.game-pool-group[data-pool-family="skill"] { --family: var(--family-skill); }
.game-pool-group[data-pool-family="luck"] { --family: var(--family-luck); }
.game-pool-group[data-pool-family="brain"] { --family: var(--family-brain); }
.game-pool-group > legend::before, .game-pool-group-title::before { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.45rem; background: var(--family); content: ""; }
.game-pool-group-actions { display: flex; gap: 0.2rem; justify-self: end; }
.pool-select { min-height: var(--target-compact); padding: 0 0.55rem; border: 0; color: var(--brand-text); background: transparent; font: inherit; font-size: var(--type-caption); font-weight: 850; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.pool-select:hover { color: var(--text-primary); }
.game-pool-group .pool-tag { padding: 0.06rem 0.28rem 0.08rem; color: var(--ink); background: var(--text-tertiary); font-stretch: 75%; font-size: var(--type-micro); font-weight: 900; line-height: 1.1; text-transform: uppercase; }

.game-picker label.is-waiting { cursor: not-allowed; }
.game-picker label.is-waiting > span,
.game-pool-list li.is-waiting { flex-wrap: wrap; row-gap: 0.1rem; border-style: dotted; border-color: var(--border-strong); color: var(--text-secondary); background: transparent; }
.game-picker label.is-waiting > span i,
.game-pool-list li.is-waiting .saufaffe-icon { opacity: 0.45; }
.game-picker label.is-waiting:hover > span { border-color: var(--border-strong); }
.pool-need { flex-basis: 100%; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 800; line-height: 1.2; }
.settings-hint { min-height: 1.2em; margin: 0; color: var(--brand-text); font-size: var(--type-caption); font-weight: 800; }
.settings-hint:empty { display: none; }
.lobby-lineup {
  position: relative;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  grid-area: crew;
  align-items: flex-start;
  justify-content: center;
  --figure-size: clamp(4.4rem, 8.4vw, 7.2rem);
  --arc-depth: clamp(1rem, 2.6vw, 2.4rem);
  
  min-height: clamp(13rem, 34vh, 22rem);
  align-self: start;
  align-content: center;
  gap: clamp(1rem, 2.4vw, 2rem) clamp(0.4rem, 1.2vw, 1.1rem);
  margin: clamp(0.25rem, 1vh, 1rem) 0 0;
  padding: clamp(1.5rem, 5vh, 3rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  list-style: none;
}

.lobby-lineup::before {
  position: absolute;
  z-index: -2;
  inset: 0 0 30% 0;
  background:
    conic-gradient(from 148deg at 24% -6%, transparent 0deg, rgba(246, 200, 95, 0.2) 20deg, transparent 46deg),
    conic-gradient(from 166deg at 76% -6%, transparent 0deg, rgba(201, 242, 74, 0.14) 22deg, transparent 46deg),
    repeating-linear-gradient(90deg, rgba(201, 242, 74, 0.07), rgba(201, 242, 74, 0.012) 1.7rem, rgba(201, 242, 74, 0.07) 3.4rem);
  content: "";
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 35%, transparent 100%);
}

.lobby-lineup::after {
  position: absolute;
  z-index: -2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64%;
  border-top: 2px solid rgba(245, 241, 232, 0.22);
  border-radius: 50%;
  background: radial-gradient(ellipse 62% 78% at 50% 6%, rgba(255, 214, 150, 0.2), rgba(245, 241, 232, 0.05) 58%, transparent 80%);
  content: "";
  mask-image: linear-gradient(to bottom, #000 38%, transparent 94%);
}

.lobby-lineup .crew-figure-tag { color: var(--text-primary); }

.lobby-lineup > .crew-figure::before {
  position: absolute;
  z-index: -1;
  top: calc(var(--figure) - var(--figure) * 0.07);
  left: 50%;
  width: calc(var(--figure) * 0.86);
  height: calc(var(--figure) * 0.22);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%);
  content: "";
  transform: translateX(-50%);
}
@supports (top: calc(1px * sin(1deg))) {
  @media (min-width: 921px) {
    
    .lobby-lineup:not([data-seat-count="many"]) > [data-seat] {
      --arc: sin(calc((var(--seat-index, 0) + 0.5) * var(--seat-step, 0deg) / 2));
      transform: translateY(calc(var(--arc) * var(--arc-depth) * -1)) scale(calc(1 - 0.08 * var(--arc)));
      transform-origin: 50% 100%;
    }
  }
}
.lobby-lineup[data-crew-density="roomy"] { --figure-size: clamp(5.2rem, 11vw, 9rem); }
.lobby-lineup[data-crew-density="dense"] { --figure-size: clamp(4rem, 6.2vw, 5.4rem); }

.lobby-lineup-invite.is-split { display: grid; align-content: start; gap: 0.2rem; }
.lobby-lineup-invite.is-split .crew-invite { gap: 0.15rem; }
.lobby-lineup-invite.is-split .crew-invite-mark { width: calc(var(--figure) * 0.56); height: calc(var(--figure) * 0.56); }
.lobby-lineup-invite.is-split .crew-invite-mark .saufaffe-icon { width: 1.15rem; height: 1.15rem; }
.lobby-lineup .crew-here { white-space: nowrap; font-size: var(--type-micro); }
.lobby-lineup-member .kick-player { position: absolute; top: -0.7rem; right: 0; border: 0; background: transparent; }
.lobby-lineup-member .kick-player .saufaffe-icon { width: 1.75rem; height: 1.75rem; padding: 0.38rem; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-interactive); }
.crew-invite { display: grid; width: 100%; min-width: 0; justify-items: center; gap: 0.28rem; padding: 0; border: 0; color: var(--text-secondary); background: transparent; font: inherit; cursor: copy; }
.crew-invite-mark { display: grid; width: var(--figure); height: var(--figure); place-items: center; border: 2px dashed var(--border-strong); border-radius: 50%; color: var(--brand-text); transition: border-color var(--motion-feedback) var(--motion-ease-standard), background var(--motion-feedback) var(--motion-ease-standard); }
.crew-invite-mark .saufaffe-icon { width: 1.6rem; height: 1.6rem; }
.crew-invite:hover .crew-invite-mark { border-color: var(--brand-text); background: var(--brand-soft); }

.crew-seat { display: grid; width: 100%; min-width: 0; justify-items: center; gap: inherit; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.crew-seat:focus-visible { border-radius: 1rem; outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.crew-seat-add { cursor: pointer; }

.stage-shell { --stage-glow: var(--glow-talk); --stage-accent: var(--accent-talk); --stage-family: var(--family-talk); --brand-text: var(--accent-talk); --danger: var(--danger-lit); position: relative; display: grid; width: 100%; min-width: 0; max-width: var(--stage-max); margin-inline: auto; gap: clamp(0.6rem, 2vh, 1.25rem); }
.stage-shell::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  
  background:
    conic-gradient(from 160deg at 50% -8%, transparent 0deg, color-mix(in srgb, var(--stage-glow) 80%, transparent) 20deg, transparent 40deg),
    radial-gradient(ellipse 60% 34% at 50% 30%, color-mix(in srgb, var(--stage-glow) 70%, transparent), transparent 72%),
    radial-gradient(ellipse 70% 22% at 50% 100%, color-mix(in srgb, var(--stage-glow) 40%, transparent), transparent 75%);
  content: "";
  pointer-events: none;
}
.stage-shell[data-game-family="read"] { --stage-glow: var(--glow-read); --stage-accent: var(--accent-read); --stage-family: var(--family-read); }
.stage-shell[data-game-family="skill"] { --stage-glow: var(--glow-skill); --stage-accent: var(--accent-skill); --stage-family: var(--family-skill); }
.stage-shell[data-game-family="luck"] { --stage-glow: var(--glow-luck); --stage-accent: var(--accent-luck); --stage-family: var(--family-luck); }
.stage-shell[data-game-family="brain"] { --stage-glow: var(--glow-brain); --stage-accent: var(--accent-brain); --stage-family: var(--family-brain); }
.stage-shell[data-game-id="hot-potato"] { --stage-glow: rgba(255, 90, 61, 0.32); }
.stage-hud { position: relative; z-index: 5; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem 0.75rem; }
.stage-title { min-width: 0; }

.stage-title h1 { display: inline-block; max-width: 100%; margin: 0; padding: 0.24em 0.42em 0.26em; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; color: var(--ink); background: var(--stage-family); font-stretch: 75%; font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1; transform: rotate(-2deg); }
.stage-hud > .timer { min-width: 4.6rem; margin: 0; padding: 0.5rem 0.75rem; }
.stage-hud-tools { display: flex; min-width: 0; align-items: center; gap: 0.5rem; }

.stage-moments { position: relative; z-index: 4; display: flex; min-width: 0; align-items: center; gap: 0.5rem 0.75rem; }
.stage-moments .room-moments { flex: 1 1 auto; text-align: left; }
.stage-moments:has(.room-moments:empty) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reaction-picker > summary { display: inline-flex; min-height: var(--target-compact); align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-raised); font-size: var(--type-small); font-weight: 800; cursor: pointer; list-style: none; }
.reaction-picker > summary::-webkit-details-marker { display: none; }
.reaction-picker > summary svg { width: 1.1rem; height: 1.1rem; }
.reaction-picker[open] > summary { border-color: var(--brand-primary); }
.reaction-picker-body { position: absolute; z-index: 6; top: calc(100% + 0.4rem); right: 0; display: flex; width: min(100%, 24rem); flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0.7rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-shell); box-shadow: var(--shadow-float); }
.reaction-option { min-height: var(--target-compact); border: 0; font-family: var(--font-text); font-size: var(--type-small); cursor: pointer; }
.reaction-option:active { transform: translateY(2px); }
.room-moments { min-height: 1.2em; margin: 0; text-align: center; color: var(--text-secondary); font-size: var(--type-small); font-weight: 750; overflow-wrap: anywhere; }

.stage-title { display: flex; align-items: center; gap: 0.45rem; }
.stage-rule-toggle { position: relative; display: inline-grid; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; place-items: center; padding: 0; border: 2px solid var(--stage-family); border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-canvas); color: var(--text-primary); background: var(--surface-canvas); font-size: 1.05rem; font-weight: 900; line-height: 1; cursor: pointer; transition: background-color var(--motion-feedback) var(--motion-ease-standard), color var(--motion-feedback) var(--motion-ease-standard), transform var(--motion-feedback) var(--motion-ease-standard); }
.stage-rule-toggle[aria-expanded="true"] { color: var(--ink); background: var(--stage-family); }
.stage-rule-toggle:active { transform: scale(0.92); }
.stage-rule { position: relative; display: grid; width: min(100%, 38rem); grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-self: start; gap: 0.2rem 1rem; margin: 0.35rem 0 0; padding: 0.75rem 0.95rem 0.8rem; border-radius: var(--radius-control); color: var(--ink); background: var(--paper-material); box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.38); rotate: -0.5deg; transform-origin: 1.6rem 0; }
.stage-rule::before { position: absolute; top: -0.5rem; left: 1rem; width: 3.4rem; height: 1rem; background: var(--stage-family); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); content: ""; rotate: -5deg; }
.stage-rule h2 { margin: 0; color: var(--paper-accent); font-size: var(--type-caption); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.stage-rule p { grid-column: 1 / -1; margin: 0; overflow-wrap: break-word; font-size: var(--type-small); font-weight: 650; line-height: 1.4; text-wrap: pretty; }
.stage-rule-close { grid-row: 1; grid-column: 2; min-height: 2rem; margin: -0.3rem -0.4rem 0 0; padding: 0.2rem 0.75rem; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); background: transparent; font-size: var(--type-small); font-weight: 850; cursor: pointer; }
.stage-rule-close:hover { color: var(--paper-material); background: var(--ink); }
.stage-rule-more { grid-column: 1 / -1; font-size: var(--type-small); }
.stage-rule-more > summary { display: inline-flex; min-height: 2rem; align-items: center; color: var(--paper-accent); font-weight: 850; cursor: pointer; }
.stage-rule-more > p { margin-top: 0.25rem; }
.stage-rule[data-rule-entering] { animation: saufaffe-rule-unfold var(--motion-transition) var(--motion-ease-emphasized) both; }

.stage-shell:has(> .stage-entrance:not([data-resumed])) > .stage-rule[data-rule-entering] { animation-delay: 900ms; }

[data-turn-arrival] .stage-moment-active .stage-moment-copy h3 { animation: saufaffe-turn-call 620ms var(--motion-ease-emphasized) both; }
[data-turn-arrival] .crew-figure.is-viewer .crew-figure-avatar { animation: saufaffe-turn-bob 620ms var(--motion-ease-emphasized) both; }
@keyframes saufaffe-turn-call {
  0% { transform: scale(0.92); text-shadow: 0 0 0 transparent; }
  35% { transform: scale(1.07); text-shadow: 0 0 1.2rem rgba(201, 242, 74, 0.75); }
  100% { transform: none; text-shadow: 0 0 0 transparent; }
}
@keyframes saufaffe-turn-bob {
  0%, 100% { translate: 0 0; }
  30% { translate: 0 -0.55rem; }
  60% { translate: 0 0.1rem; }
}

@media (max-width: 640px) {
  .stage-rule { display: block; padding: 0.55rem 0.75rem 0.6rem; }
  .stage-rule h2 { display: inline; margin-right: 0.35rem; }
  .stage-rule-close { float: right; min-height: 2rem; margin: -0.15rem -0.3rem 0.15rem 0.6rem; }
  .stage-rule p { display: inline; line-height: 1.38; }
}
@keyframes saufaffe-rule-unfold {
  from { opacity: 0; transform: translateY(-0.75rem) scaleY(0.55) rotate(-2deg); }
  70% { opacity: 1; transform: translateY(0.1rem) scaleY(1.02); }
  to { opacity: 1; transform: none; }
}
.stage-shell .game-controls { margin-top: 0; }
.stage-shell > .game-lead { margin: 0; font-size: var(--type-body); }

.stage-notice { display: flex; width: 100%; max-width: var(--stage-max); min-width: 0; align-items: center; gap: 0.55rem; margin: 0 auto; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--chip-gold); color: var(--chip-gold); font-size: var(--type-small); font-weight: 750; }
.stage-notice .saufaffe-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.stage-notice span { min-width: 0; overflow-wrap: anywhere; }

.seat-pass-notice { color: var(--text-primary); border-bottom-color: var(--border-strong); }
.seat-pass-notice b { color: var(--brand-text); }
.seat-pass-notice .button { flex: 0 0 auto; margin-left: auto; }

.seat-pass { position: fixed; inset: 0; z-index: 90; display: grid; overflow-y: auto; padding: max(1.5rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom)); place-items: center; background: var(--surface-canvas); }
.seat-pass-card { display: grid; width: min(26rem, 100%); justify-items: center; gap: 0.85rem; text-align: center; }
.seat-pass-avatar { width: clamp(6rem, 30vw, 8rem); height: clamp(6rem, 30vw, 8rem); }
.seat-pass-title { margin: 0; font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.1; overflow-wrap: anywhere; }
.seat-pass-copy { margin: 0; color: var(--text-secondary); font-weight: 750; }
.seat-pass-copy .timer { color: var(--text-primary); }
.seat-pass-card .stage-cta { width: 100%; }
.seat-pass-next { margin: 0; color: var(--text-secondary); font-size: var(--type-caption); }

.session-sheet { min-width: 0; }

.session-sheet:not([open]) > .session-sheet-body { display: none; }
.session-sheet > summary { display: inline-flex; min-height: var(--target-compact); max-width: 100%; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--surface-raised); cursor: pointer; list-style: none; }
.session-sheet > summary::-webkit-details-marker { display: none; }
.session-sheet > summary::after { width: 0.5rem; height: 0.5rem; margin: 0 0.1rem 0.15rem 0.1rem; }
.session-sheet[open] > summary { border-color: var(--border-strong); background: var(--surface-interactive); }
.session-sheet-title { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--type-caption); }
.session-sheet-title .saufaffe-icon { width: 1.05rem; height: 1.05rem; color: var(--brand-text); }
.session-sheet-facts { color: var(--text-secondary); font-size: var(--type-micro); font-weight: 800; white-space: nowrap; }
.session-sheet-body { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 1.1rem clamp(1rem, 3vw, 2.25rem); padding: clamp(0.9rem, 2vw, 1.25rem); border: 1px solid var(--border-strong); border-radius: var(--radius-panel); background: var(--surface-shell); box-shadow: var(--shadow-float); }
.stage-hud .session-sheet-body { position: absolute; top: calc(100% + 0.5rem); right: 0; width: min(100%, 52rem); }
.session-sheet-heading { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border-strong); }

.session-sheet-heading h2, .sheet-host h2, .session-sheet-guide h2 { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.session-sheet-heading p { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); }
.session-sheet-heading p strong { color: var(--text-primary); }
.session-crew { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.session-crew-member { display: grid; min-width: 0; min-height: 2.5rem; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem; padding: 0.15rem 0; border-bottom: 1px solid var(--border-subtle); }
.session-crew-member:last-child { border-bottom: 0; }
.session-crew-avatar { display: grid; width: 1.85rem; height: 1.85rem; border-radius: 50%; }
.session-crew-copy { display: grid; min-width: 0; }
.session-crew-copy strong { overflow-wrap: anywhere; font-size: var(--type-small); line-height: 1.2; }
.session-crew-copy small { overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 700; }
.session-crew-amount { color: var(--text-secondary); font-size: var(--type-caption); white-space: nowrap; }
.session-crew-amount strong { color: var(--text-primary); font-family: var(--font-number); font-size: 1.05rem; }
.session-crew-member.is-viewer .session-crew-copy strong { color: var(--progress); }
.session-crew-member.is-offline .session-crew-avatar { opacity: 0.5; filter: grayscale(1); }

.session-crew:has(.kick-player) .session-crew-member { grid-template-columns: auto minmax(0, 1fr) auto 2.25rem; }
.session-crew-member .kick-player { grid-column: 4; width: 2.25rem; min-width: 0; height: 2.25rem; min-height: 0; border: 0; background: transparent; }
.session-sheet-empty { margin: 0.45rem 0 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.45; }

.session-sheet-facts-list { display: grid; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5rem), 1fr)); gap: 0.55rem 0.75rem; margin: 0; padding-top: 0.15rem; }
.session-sheet-facts-list > div { display: grid; min-width: 0; align-content: start; gap: 0.05rem; font-size: var(--type-small); }
.session-sheet-facts-list > .is-wide { grid-column: 1 / -1; }
.session-sheet-facts-list dt { color: var(--text-secondary); font-size: var(--type-caption); }
.session-sheet-facts-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 850; }

.stage-moment { --moment-host: 3.4rem; display: grid; min-width: 0; justify-items: center; gap: 0.55rem; text-align: center; }

.stage-moment:not(.stage-moment-reveal, .is-roster):has(> .stage-moment-progress) { grid-template-rows: minmax(var(--moment-host), auto) minmax(var(--target-compact), auto); align-items: center; }

.stage-moment:not(.stage-moment-reveal, .has-host, .is-roster):has(> .stage-moment-progress) > .stage-moment-copy { align-self: end; }
.stage-moment:not(.stage-moment-reveal, .has-host, .is-roster):has(> .stage-moment-progress) > .stage-moment-progress { align-self: start; }

.stage-moment.has-host { display: flex; width: min(100%, 32rem); flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem 0.7rem; }
.stage-moment.has-host > .stage-moment-progress { flex: 1 0 100%; min-height: var(--target-compact); }

.stage-moment.has-host.is-roster > .stage-moment-progress { min-height: 0; }
.stage-moment-host { display: block; width: var(--moment-host); height: auto; flex: none; }
.stage-moment.has-host .stage-moment-copy { position: relative; max-width: calc(100% - var(--moment-host) - 0.7rem); padding: 0.5rem 0.8rem 0.55rem; border-radius: 0.9rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35); text-align: left; }
.stage-moment.has-host .stage-moment-copy::before { content: ""; position: absolute; left: -0.4rem; top: 50%; margin-top: -0.4rem; border: 0.4rem solid transparent; border-right-color: var(--paper-material); border-left: 0; }
.stage-moment-copy { min-width: 0; }

.stage-moment-copy h3 { margin: 0; overflow-wrap: anywhere; font-weight: 800; font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.2; }
.stage-moment.has-host .stage-moment-copy h3 { font-stretch: 85%; font-weight: 850; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.15; }

.stage-moment-remark { margin: 0.35rem 0 0; padding-top: 0.35rem; border-top: 1px dashed var(--paper-rule); overflow-wrap: anywhere; font-size: var(--type-small); font-weight: 750; line-height: 1.25; }
.stage-moment-progress { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.7rem; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 800; }
.stage-moment-progress strong { color: var(--text-primary); }
.stage-moment-count { flex: none; white-space: nowrap; }

.stage-moment-progress:has(> .stage-moment-pending) { flex-wrap: nowrap; gap: 0.6rem; }
.stage-moment-pending { display: flex; min-width: 0; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.4rem; }
.stage-moment-pending-label { flex: none; color: var(--text-secondary); white-space: nowrap; }
.stage-moment-pending-list { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.stage-moment-pending-list li { position: relative; display: grid; width: var(--target-compact); height: var(--target-compact); flex: none; place-items: center; color: var(--text-primary); }
.stage-moment-pending-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage-moment-pending-list .stage-moment-pending-rest { width: auto; min-width: 2rem; padding: 0 0.45rem; border-radius: 999px; background: var(--surface-interactive); font-weight: 900; }
.stage-moment-pending-avatar { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; }

.stage-moment-nudge { position: relative; display: grid; width: var(--target-compact); height: var(--target-compact); place-items: center; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.stage-moment-nudge:not(:disabled) .stage-moment-pending-avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--brand-primary); }
.stage-moment-nudge small { position: absolute; bottom: -0.3rem; left: 50%; padding: 0.04rem 0.26rem; white-space: nowrap; border-radius: 999px; color: var(--ink); background: var(--brand-primary); font-size: 0.68rem; font-weight: 900; line-height: 1.2; transform: translateX(-50%); }
.stage-moment-nudge:disabled small { color: var(--text-secondary); background: var(--surface-raised); }
.stage-moment-progress progress:not(.visually-hidden) { width: min(100%, 14rem); height: 0.5rem; overflow: hidden; border: 0; border-radius: 999px; appearance: none; background: rgba(245, 241, 232, 0.15); }
.stage-moment-progress progress::-webkit-progress-bar { border-radius: 999px; background: rgba(245, 241, 232, 0.15); }
.stage-moment-progress progress::-webkit-progress-value { border-radius: 999px; background: var(--progress); }
.stage-moment-progress progress::-moz-progress-bar { border-radius: 999px; background: var(--progress); }

.wwr-lineup-fieldset { width: 100%; }
.wwr-lineup-fieldset > legend { margin: 0 auto 0.9rem; color: var(--text-secondary); font-size: var(--type-small); text-align: center; }
.wwr-lineup { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: clamp(0.75rem, 2.4vw, 1.75rem) clamp(0.2rem, 1.8vw, 1.5rem); }
.wwr-candidate { --figure: clamp(4.6rem, 9vw, 7.5rem); padding: 0.45rem 0.2rem 0.5rem; border-radius: 1.4rem; }
.wwr-voted .wwr-candidate .crew-figure-avatar,
.wwr-spectating .wwr-candidate .crew-figure-avatar { filter: saturate(0.55) brightness(0.72); }
.wwr-empty { margin: 0; color: var(--text-secondary); }
.wwr-verdict { position: relative; display: grid; justify-items: center; isolation: isolate; }
.wwr-verdict::before { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(34rem, 92vw); aspect-ratio: 1.5; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 149, 100, 0.26), transparent 68%); content: ""; transform: translate(-50%, -58%); }
.wwr-candidate-verdict { --figure: clamp(7rem, 16vw, 11rem); width: min(100%, 24rem); gap: 0.5rem; }
.wwr-candidate-verdict .crew-figure-avatar,
.wwr-candidate-verdict.is-viewer .crew-figure-avatar { box-shadow: 0 0 0 0.3rem var(--surface-canvas), 0 0 0 0.62rem var(--who-would-rather-selected), 0 1.6rem 3rem rgba(255, 149, 100, 0.4); }
.wwr-candidate-verdict .crew-figure-name { font-size: clamp(1.4rem, 3vw, 2rem); }
.wwr-votes { display: grid; justify-items: center; gap: 0.25rem; color: var(--text-secondary); font-size: var(--type-caption); }
.wwr-vote-total { white-space: nowrap; }
.wwr-vote-total strong { color: var(--text-primary); font-size: 1.1rem; }
.wwr-candidate-verdict .wwr-vote-total strong { font-size: 1.5rem; }
.wwr-tally { display: flex; width: min(100%, 60rem); min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1rem clamp(0.4rem, 2vw, 1.5rem); margin: 0; padding: 1.1rem 0 0; border-top: 1px dashed var(--border-subtle); list-style: none; }
.wwr-candidate-tally { --figure: clamp(3.2rem, 6vw, 4.4rem); width: calc(var(--figure) + 3.4rem); }

.wwr-resolved .scene-prompt > h2 { font-size: clamp(1.4rem, 3.4vw, 3rem); }
.wwr-tally { gap: 0.7rem 0.2rem; padding-top: 0.8rem; }
.wwr-candidate-tally { --figure: 2.4rem; width: calc(var(--figure) + 1.8rem); gap: 0.35rem; padding: 0; }
.wwr-candidate-tally .crew-figure-name { font-size: var(--type-caption); }
.wwr-candidate-tally .wwr-votes .stage-tokens { display: none; }
.wwr-candidate-tally .wwr-vote-total strong { font-size: 1rem; }

.potato-scene {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 0.7fr);
  grid-template-areas:
    "ring caption"
    "ring moment"
    "ring action";
  align-content: center;
  align-items: center;
  column-gap: clamp(1rem, 4vw, 4rem);
  row-gap: 0.9rem;
  padding-top: clamp(0.25rem, 2vh, 1.5rem);
}
.potato-caption { min-width: 0; grid-area: caption; align-self: end; }
.potato-caption h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(2.4rem, 6vw, 5rem); }
.potato-scene > .stage-moment { grid-area: moment; justify-content: start; justify-items: start; text-align: left; }
.potato-action-area { min-width: 0; grid-area: action; align-self: start; }
.potato-actions { display: grid; gap: 0.75rem; }
.potato-action {
  display: grid;
  min-width: 0;
  min-height: 4.6rem;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "symbol label"
    "symbol hint";
  align-items: center;
  column-gap: 0.8rem;
  padding: 0.75rem 1.1rem;
  border: 0;
  border-radius: 1.2rem;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--motion-feedback) var(--motion-ease-standard), box-shadow var(--motion-feedback) var(--motion-ease-standard);
}
.potato-action-symbol { display: grid; grid-area: symbol; place-items: center; }
.potato-action-symbol .saufaffe-icon { width: 1.7rem; height: 1.7rem; }
.potato-action strong { grid-area: label; overflow-wrap: anywhere; font-size: 1.15rem; line-height: 1.15; }
.potato-action small { grid-area: hint; overflow-wrap: anywhere; font-size: var(--type-caption); font-weight: 700; }
.potato-action-primary { background: var(--progress); box-shadow: 0 0.4rem 0 #8fae1d, 0 1.1rem 2.2rem rgba(201, 242, 74, 0.2); }
.potato-action-primary:hover:not(:disabled) { transform: translateY(-0.15rem); box-shadow: 0 0.55rem 0 #8fae1d, 0 1.3rem 2.4rem rgba(201, 242, 74, 0.26); }
.potato-action-primary:active:not(:disabled) { transform: translateY(0.28rem); box-shadow: 0 0.12rem 0 #8fae1d; }
.potato-action-danger { min-height: 3.4rem; border: 1px solid var(--danger); color: var(--danger); background: transparent; }
.potato-action-danger strong { font-size: 1rem; }
.potato-action-danger:hover:not(:disabled) { background: rgba(255, 123, 110, 0.12); }
.potato-action:disabled { cursor: progress; opacity: 0.7; }
.potato-ring {
  --figure: clamp(3.4rem, 6.4vw, 5.4rem);
  --ring-rx-n: 40;
  --ring-ry-n: 36;
  --ring-rx: calc(var(--ring-rx-n) * 1%);
  --ring-ry: calc(var(--ring-ry-n) * 1%);
  width: 100%;
  max-width: 46rem;
  min-width: 0;
  aspect-ratio: 1.22;
  margin-bottom: 2rem;
  grid-area: ring;
  justify-self: center;
  isolation: isolate;
}

@media (max-width: 440px) {
  .potato-ring:is([data-seat-count="7"], [data-seat-count="8"], [data-seat-count="9"], [data-seat-count="10"], [data-seat-count="11"], [data-seat-count="12"]) { --figure: clamp(2.8rem, 12vw, 3.1rem); --ring-ry-n: 41; aspect-ratio: 0.92; }
  .potato-ring:is([data-seat-count="7"], [data-seat-count="8"], [data-seat-count="9"], [data-seat-count="10"], [data-seat-count="11"], [data-seat-count="12"]) .crew-figure-name { font-size: var(--type-micro); }
}

.potato-ring .potato-seat { z-index: 1; }
.potato-ring .crew-figure-name { position: relative; padding: 0.05rem 0.45rem; border-radius: 0.7rem; background: rgba(11, 10, 13, 0.8); }
.potato-ring::before {
  position: absolute;
  z-index: -1;
  inset: 15% 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #62392b, var(--hot-potato-board) 62%, #2b1a14);
  box-shadow: inset 0 0 0 0.35rem rgba(0, 0, 0, 0.22), inset 0 0 0 0.45rem rgba(255, 248, 235, 0.07), 0 1.6rem 3rem rgba(0, 0, 0, 0.42);
  content: "";
}
.potato-beam,
.potato-trail { display: none; }
.potato-relation { margin: 0.5rem 0 0; overflow-wrap: anywhere; color: var(--text-primary); font-size: var(--type-lead); font-weight: 750; line-height: 1.2; }
.potato-crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.potato-seat.is-holder .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.48rem var(--hot-potato-spark), 0 0 2.2rem rgba(246, 200, 95, 0.55); }
.potato-seat.is-holder .crew-figure-tag { padding: 0.2rem 0.4rem 0.22rem; color: var(--ink); background: var(--hot-potato-spark); font-stretch: 75%; font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.potato-exploded .potato-seat.is-holder .crew-figure-avatar,
.potato-gave-up .potato-seat.is-holder .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.48rem var(--hot-potato-flame), 0 0 2.2rem rgba(255, 113, 72, 0.6); }
.potato-exploded .potato-seat.is-holder .crew-figure-tag,
.potato-gave-up .potato-seat.is-holder .crew-figure-tag { background: var(--hot-potato-flame); }
.potato-core { position: relative; display: grid; width: clamp(5.5rem, 23%, 10rem); justify-items: center; margin: 1rem auto 0; }
.potato-burst {
  position: absolute;
  z-index: -1;
  top: 42%;
  left: 50%;
  width: 135%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.4;
  background: repeating-conic-gradient(from 0deg, rgba(246, 200, 95, 0.75) 0deg 7deg, transparent 7deg 20deg);
  mask-image: radial-gradient(circle, transparent 36%, #000 40%, #000 56%, transparent 70%);
  transform: translate(-50%, -50%);
}
.potato-exploded .potato-burst { opacity: 0.95; background: repeating-conic-gradient(from 0deg, var(--hot-potato-flame) 0deg 9deg, transparent 9deg 20deg); }
.potato-gave-up .potato-burst,
.potato-ended .potato-burst { opacity: 0.15; }
.potato-object { width: 100%; }
.potato-illustration {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, 0.45));
}
.potato-gave-up .potato-illustration .gi-flame,
.potato-ended .potato-illustration .gi-flame { opacity: 0; }
.potato-ended .potato-object { opacity: 0.6; filter: grayscale(0.75); }
.potato-passes { display: inline-flex; align-items: baseline; gap: 0.45rem; margin: 0.7rem 0 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.potato-passes strong { color: var(--hot-potato-spark); font-size: 1.05rem; letter-spacing: 0; }
@supports (top: calc(1px * sin(1deg))) {
  .potato-ring:not([data-seat-count="many"]) .potato-crew { display: block; }
  .potato-ring:not([data-seat-count="many"]) .potato-seat { transform: translate(-50%, calc(var(--figure) / -2)); }
  .potato-ring:not([data-seat-count="many"]) .potato-core {
    --focus-angle: calc(90deg + var(--ring-turn, 0deg) + var(--seat-step) * var(--ring-dir, 1) * var(--focus-index, 0));
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .potato-ring[data-focus-seat]:not([data-seat-count="many"]) .potato-core {
    top: calc(50% + var(--ring-ry) * var(--core-lean, 0.22) * sin(var(--focus-angle)));
    left: calc(50% + var(--ring-rx) * var(--core-lean, 0.22) * cos(var(--focus-angle)));
  }
}

@supports (width: hypot(1px, 1px)) and (width: 1cqw) and (rotate: atan2(1px, 1px)) {
  .potato-ring:not([data-seat-count="many"]) { container-type: size; }
  .potato-ring[data-focus-seat]:not([data-seat-count="many"]) .potato-beam {
    --focus-angle: calc(90deg + var(--ring-turn, 0deg) + var(--seat-step) * var(--ring-dir, 1) * var(--focus-index, 0));
    --focus-x: calc(var(--ring-rx-n) * 1cqw * cos(var(--focus-angle)));
    --focus-y: calc(var(--ring-ry-n) * 1cqh * sin(var(--focus-angle)));
    --beam-height: clamp(2rem, 11cqw, 4.6rem);
    position: absolute;
    z-index: -1;
    top: calc(50% - var(--beam-height) / 2);
    left: 50%;
    display: block;
    width: hypot(var(--focus-x), var(--focus-y));
    height: var(--beam-height);
    background: linear-gradient(to right, transparent 12%, rgba(246, 200, 95, 0.42));
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    rotate: atan2(var(--focus-y), var(--focus-x));
    transform-origin: 0 50%;
  }
  .potato-exploded .potato-ring[data-focus-seat]:not([data-seat-count="many"]) .potato-beam,
  .potato-gave-up .potato-ring[data-focus-seat]:not([data-seat-count="many"]) .potato-beam { background: linear-gradient(to right, transparent 12%, rgba(255, 113, 72, 0.55)); }
  .potato-ring[data-focus-seat][data-origin-seat]:not([data-seat-count="many"]) .potato-trail {
    --focus-angle: calc(90deg + var(--ring-turn, 0deg) + var(--seat-step) * var(--ring-dir, 1) * var(--focus-index, 0));
    --origin-angle: calc(90deg + var(--ring-turn, 0deg) + var(--seat-step) * var(--ring-dir, 1) * var(--origin-index, 0));
    --origin-x: calc(var(--ring-rx-n) * 1cqw * cos(var(--origin-angle)));
    --origin-y: calc(var(--ring-ry-n) * 1cqh * sin(var(--origin-angle)));
    --pass-x: calc(var(--ring-rx-n) * 1cqw * cos(var(--focus-angle)) - var(--origin-x));
    --pass-y: calc(var(--ring-ry-n) * 1cqh * sin(var(--focus-angle)) - var(--origin-y));
    position: absolute;
    z-index: -1;
    top: calc(50% + var(--origin-y) - 1px);
    left: calc(50% + var(--origin-x));
    display: block;
    width: hypot(var(--pass-x), var(--pass-y));
    border-top: 2px dashed rgba(255, 248, 235, 0.5);
    rotate: atan2(var(--pass-y), var(--pass-x));
    transform-origin: 0 50%;
  }
  
  .potato-ring[data-focus-seat][data-origin-seat]:not([data-seat-count="many"]) .potato-trail::after {
    position: absolute;
    top: calc(-0.4rem - 1px);
    right: calc(var(--figure) / 2 + 0.55rem);
    border-block: 0.4rem solid transparent;
    border-left: 0.7rem solid rgba(255, 248, 235, 0.8);
    content: "";
  }
}

.round-close { display: grid; min-width: 0; gap: clamp(0.9rem, 2.5vh, 1.6rem); }
.round-close-reveal { display: grid; min-width: 0; gap: 0.6rem; }
.round-close-tab { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1rem clamp(1.25rem, 4vw, 3.5rem); padding-top: clamp(0.9rem, 2.5vh, 1.5rem); border-top: 2px dashed var(--border-strong); }
.round-close-settlement { min-width: 0; filter: drop-shadow(0 0.9rem 1.4rem rgba(0, 0, 0, 0.32)); }

.round-bill,
.session-round-matrix-scroll,
.poker-bill {
  --bill-tooth: 0.4rem;
  padding: 0.95rem 1.1rem calc(1rem + var(--bill-tooth));
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--ink);
  background: var(--paper-material);
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--bill-tooth)) 100%;
}
.round-bill { position: relative; display: grid; min-width: 0; max-width: 30rem; flex: 1 1 100%; gap: 0.45rem; padding-top: 0.75rem; }

.round-bill-head { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 0.8rem; padding-bottom: 0.4rem; border-bottom: 1px dashed var(--paper-rule); }
.round-bill-label { margin: 0; color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.round-bill-sum { font-size: var(--type-caption); font-weight: 900; }
.round-bill ul { display: grid; min-width: 0; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.round-bill li { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; }
.round-bill li span { min-width: 0; overflow-wrap: anywhere; font-weight: 750; }
.round-bill li strong { font-family: var(--font-number); font-size: 1.1rem; white-space: nowrap; }
.round-bill li .round-bill-unit { font-weight: inherit; }
.round-bill-avatar { display: grid; width: 2rem; height: 2rem; border-radius: 50%; }

.round-bill.is-long { max-width: 40rem; }
.round-bill.is-long ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.9rem; }
.round-bill.is-long li { gap: 0.4rem; }
.round-bill.is-long li span { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; font-stretch: 82%; font-size: var(--type-small); line-height: 1.2; }
.round-bill.is-long .round-bill-avatar { width: 1.8rem; height: 1.8rem; }
.round-bill.is-long .round-bill-mugs { display: none; }
.round-bill.is-long .round-bill-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.round-bill-clear { display: flex; min-width: 0; min-height: var(--target-compact); flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem; padding: 0.3rem 0.85rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-control); }
.round-bill-clear .round-bill-label { color: var(--text-secondary); }
.round-bill-clear-icon { width: 1.1rem; height: 1.1rem; flex: none; }
.round-bill-clear strong { overflow-wrap: anywhere; font-size: var(--type-body); }

.round-close-settlement:has(.round-bill-foot, .round-bill-clear) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.round-bill-foot { display: flex; min-width: 0; max-width: 30rem; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.round-bill ~ .round-bill-foot { flex-basis: 100%; }

.bill-clink { display: inline-flex; min-height: var(--target-compact); flex: 1 1 9rem; align-items: center; justify-content: center; gap: 0.5rem; padding-block: 0.4rem; }
.bill-clink svg { width: 1.2rem; height: 1.2rem; }
.bill-clink:disabled { opacity: 1; color: var(--text-secondary); border-style: dashed; }

.round-tip { display: grid; width: min(100%, 30rem); gap: 0.6rem; margin: 1rem auto 0; padding: 0.9rem 1rem 1rem; border: 3px solid var(--ink); border-radius: 1rem; color: var(--ink); background: var(--paper-material); text-align: left; box-shadow: 0 0.35rem 0 var(--ink); transform: rotate(-0.6deg); }
.round-tip h2 { margin: 0; font-stretch: 82%; font-size: clamp(1.25rem, 5vw, 1.6rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.round-tip-kicker { margin: 0; color: var(--paper-ink-soft); font-size: var(--type-caption); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.round-tip-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.round-tip-option { display: inline-flex; min-height: var(--target-compact); flex: 1 1 8rem; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.35rem 0.75rem; border: 3px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--paper-material); font-family: var(--font-text); font-size: var(--type-small); font-weight: 900; text-transform: uppercase; cursor: pointer; box-shadow: 0 0.2rem 0 var(--ink); }
.round-tip-option:active { transform: translateY(2px); box-shadow: 0 0.05rem 0 var(--ink); }
.round-tip-option[aria-pressed="true"] { background: var(--brand-primary); box-shadow: 0 0.05rem 0 var(--ink); transform: translateY(2px); }
.round-tip-option span { overflow-wrap: anywhere; }
.round-tip-mark { padding: 0.08rem 0.4rem; border-radius: 999px; color: var(--paper-material); background: var(--ink); font-size: var(--type-micro); letter-spacing: 0.04em; }
.round-tip-avatar { display: grid; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; }
.round-tip-note { margin: 0; color: var(--paper-ink-soft); font-size: var(--type-small); font-weight: 700; }
.round-tip-note strong { color: var(--ink); }
.round-tip-watch { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.8rem auto 0; color: var(--text-secondary); font-size: var(--type-small); font-weight: 800; }
.round-tip-watch svg { width: 1.1rem; height: 1.1rem; }
.round-tip-result { display: grid; width: min(100%, 30rem); gap: 0.5rem; margin: 0.9rem auto 0; justify-items: start; }
.round-tip-result .round-tip-kicker { color: var(--text-secondary); }
.round-tip-result .round-tip-kicker strong { color: var(--text-primary); }
.round-tip-void { margin: 0.8rem auto 0; color: var(--text-secondary); font-size: var(--type-small); font-weight: 750; }
[data-reveal-step="tension"] :is(.round-tip-result, .round-tip-void) { visibility: hidden; }
p.bill-clink { margin-bottom: 0; color: var(--brand-primary); font-weight: 900; }
.round-close-next { display: grid; min-width: 0; gap: 0.8rem; }
.round-close-next-copy { min-width: 0; }
.round-close-next-copy h2 { margin: 0 0 0.25rem; overflow-wrap: anywhere; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.round-close-next-copy p { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-small); line-height: 1.45; }
.round-close-next > .button-primary { justify-self: start; }

.round-next-title { display: grid; gap: 0.15rem; --next-accent: var(--text-primary); }
.round-next-title[data-game-family="talk"], .round-wish-card[data-game-family="talk"] { --next-accent: var(--accent-talk); }
.round-next-title[data-game-family="read"], .round-wish-card[data-game-family="read"] { --next-accent: var(--accent-read); }
.round-next-title[data-game-family="skill"], .round-wish-card[data-game-family="skill"] { --next-accent: var(--accent-skill); }
.round-next-title[data-game-family="brain"], .round-wish-card[data-game-family="brain"] { --next-accent: var(--accent-brain); }
.round-next-title[data-game-family="luck"], .round-wish-card[data-game-family="luck"] { --next-accent: var(--accent-luck); }
.round-next-kicker { color: var(--text-secondary); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.round-next-game { display: inline-flex; min-width: 0; align-items: center; gap: 0.45rem; overflow-wrap: anywhere; color: var(--next-accent); font-stretch: 78%; font-weight: 900; font-size: clamp(1.4rem, 5.8vw, 2.1rem); line-height: 1.02; text-transform: uppercase; }
.round-next-game i { display: inline-grid; flex: 0 0 auto; width: 1.15em; height: 1.15em; }
.round-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.7rem; margin-top: 0.45rem; }
.round-ready .stage-tokens { justify-content: start; }
.round-ready-count { color: var(--text-secondary); font-size: var(--type-small); font-weight: 750; }
.round-ready-count strong { color: var(--text-primary); font-family: var(--font-number); }
.round-ready-missing { flex-basis: 100%; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); }
.ready-toggle-check { width: 1.1em; height: 1.1em; margin-right: 0.35rem; vertical-align: -0.15em; }

.last-pool-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem; margin: 0 0 0.8rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border-subtle); border-radius: 0.8rem; background: var(--surface-raised); color: var(--text-secondary); font-size: var(--type-small); }
.last-pool-offer strong { color: var(--text-primary); }
.round-streak-say, .round-closing-say { margin-top: 0.7rem; }

.round-wish { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: 0.4rem; margin-top: 0.6rem; }

.round-wish-card { --next-accent: var(--text-primary); display: grid; position: relative; min-height: var(--target-default); align-content: start; justify-items: start; gap: 0.15rem; padding: 0.55rem 0.6rem; border: 3px solid var(--border-subtle); border-radius: 0.9rem; color: var(--text-primary); background: var(--surface-raised, rgba(255, 255, 255, 0.04)); text-align: left; cursor: pointer; }
.round-wish-card i { display: inline-grid; width: 1.35rem; height: 1.35rem; color: var(--next-accent); }
.round-wish-card strong { color: var(--next-accent); font-stretch: 78%; font-weight: 900; font-size: 1rem; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.round-wish-card small { color: var(--text-secondary); font-size: var(--type-micro); font-weight: 700; line-height: 1.3; }
.round-wish-card[aria-pressed="true"] { border-color: var(--next-accent); box-shadow: 0 0 0 2px var(--next-accent) inset; }
.round-wish-card.is-leading { border-color: var(--next-accent); }
.round-wish-card:disabled { cursor: default; opacity: 0.7; }
.round-wish-mine, .round-wish-leading { font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.round-wish-mine { color: var(--next-accent); }
.round-wish-leading { color: var(--text-secondary); }
.round-wish-note { margin: 0.4rem 0 0; color: var(--text-secondary); font-size: var(--type-caption); }

.sheet-away { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 0.9rem; }
.sheet-away p { margin: 0; color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.4; }
.sheet-away .button { white-space: nowrap; }
.away-notice .button { flex: 0 0 auto; white-space: nowrap; }
.away-notice.is-asking { border-color: var(--brand-primary); }

.round-streak-say .round-streak-host, .round-closing-say .round-streak-host { display: block; width: 3.2rem; height: auto; flex: 0 0 auto; }
.round-close-next .ready-toggle[aria-pressed="true"],
.round-close-next .ready-toggle[aria-pressed="true"]:hover:not(:disabled) { border-color: var(--brand-primary); background: linear-gradient(var(--brand-soft), var(--brand-soft)), var(--surface-raised); color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.round-close-next > .waiting-pill { justify-self: start; }

.round-close-dock { position: fixed; z-index: 6; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; padding: 1.6rem var(--stage-gutter) calc(0.85rem + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--surface-canvas) 42%); pointer-events: none; }
.round-close-dock > .button { width: min(100%, 30rem); pointer-events: auto; }

.round-close-dock > .round-close-actions { display: grid; width: min(100%, 30rem); grid-template-columns: minmax(0, 1fr) auto; pointer-events: auto; }
.round-close-dock > .round-close-actions > .button:not(.button-primary) { padding-inline: 0.85rem; font-size: var(--type-small); }
.round-close-next .round-close-dock > .round-close-actions > .button-primary { padding-inline: 1rem; font-size: clamp(0.95rem, 4.6vw, 1.35rem); }
.round-close:has(.round-close-dock) { padding-bottom: 6.5rem; }

.round-dock-card { display: grid; width: min(100%, 30rem); gap: 0.45rem; padding: 0.65rem 0.75rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 1.1rem; background: var(--surface-shell); box-shadow: 0 -0.4rem 1.6rem rgba(0, 0, 0, 0.45); pointer-events: auto; }
.round-dock-card > .button, .round-dock-card > .round-close-actions { width: 100%; }
.round-dock-card > .round-close-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.round-dock-next { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.1rem 0.6rem; }
.round-dock-next .round-next-title { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin: 0; }
.round-dock-next .round-next-game { overflow-wrap: break-word; font-size: clamp(1.05rem, 4.6vw, 1.35rem); }
.round-dock-next .round-ready { margin: 0; justify-content: end; }
.round-dock-next .round-ready .stage-tokens { display: none; }
.round-dock-next .round-ready-count { font-size: var(--type-caption); white-space: nowrap; }
.round-dock-next .round-ready-missing { grid-column: 1 / -1; flex-basis: auto; }
.round-dock-next :is(.round-ready-missing, .round-dock-copy) { grid-column: 1 / -1; margin: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--type-micro); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.round-dock-next .round-ready { display: contents; }

.round-dock-verdict { grid-column: 1 / -1; margin: 0; color: var(--text-primary); font-size: var(--type-small); line-height: 1.3; }
.round-dock-verdict strong { font-family: var(--font-number); font-weight: 900; }
.round-dock-verdict[data-viewer-verdict="drink"] strong { color: var(--danger-lit); }
.round-dock-verdict[data-viewer-verdict="safe"] strong { color: var(--progress); }
.round-dock-card > .round-dock-verdict { padding-bottom: 0.1rem; }
.round-close-next-copy:not(:has(*)) { display: none; }
.round-close:has(.round-dock-card) { padding-bottom: 10.5rem; }
html:has(.round-dock-card) { scroll-padding-bottom: 10.5rem; }

html:has(.round-close-dock) { scroll-padding-bottom: 6.5rem; }

[data-round-closure-finale] .round-close-next-copy :is(h1, h2) { margin-bottom: 0.5rem; font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
.session-finale-stage > .round-close > .round-close-tab { padding-top: 0; border-top: 0; }

.session-finale-host { display: block; width: 6.5rem; height: auto; margin: 0 auto -0.4rem; }
.round-close-finale { min-width: 0; padding-top: clamp(1.1rem, 3vh, 2rem); border-top: 2px dashed var(--border-strong); }
.session-finale { display: grid; min-width: 0; gap: clamp(1.4rem, 4vh, 2.5rem); }

.session-finale-pair { display: grid; min-width: 0; align-items: start; gap: clamp(1.4rem, 4vh, 2.5rem) clamp(1.5rem, 4vw, 3.5rem); }
.session-finale-main { display: grid; min-width: 0; align-content: start; gap: clamp(1.2rem, 3vh, 2rem); }
.session-finale-pair > .kurier { margin-top: 0; }
@media (min-width: 1000px) {
  .session-finale-pair:has(> .kurier) { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
}

[data-round-closure-finale] .round-bill ul { display: flex; flex-wrap: wrap; gap: 0.4rem; }
[data-round-closure-finale] .round-bill li { display: inline-flex; gap: 0.35rem; padding: 0.15rem 0.6rem 0.15rem 0.15rem; border: 1px solid var(--paper-rule); border-radius: 999px; }
[data-round-closure-finale] .round-bill li span { font-size: var(--type-small); }
[data-round-closure-finale] .round-bill li strong { font-size: var(--type-small); }
[data-round-closure-finale] .round-bill .round-bill-avatar { width: 1.7rem; height: 1.7rem; }
[data-round-closure-finale] .round-bill .round-bill-mugs { display: none; }
.session-finale-facts { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.7rem clamp(1.25rem, 5vw, 3.75rem); margin: 0; text-align: center; }
.session-finale-facts > div { display: grid; min-width: 0; gap: 0.15rem; }
.session-finale-facts dt { color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.session-finale-facts dd { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 900; }

.evening-titles { display: grid; width: min(100%, 44rem); min-width: 0; justify-self: center; gap: 0.7rem; }
.evening-titles-heading h3 { margin: 0; color: var(--brand-text); font-size: clamp(1.4rem, 3.2vw, 2rem); text-align: center; }
.evening-titles-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.evening-title { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.8rem; padding: 0.75rem 0.9rem; border: 1px solid var(--border-subtle); border-radius: 1.2rem; background: var(--surface-raised); }
.evening-title-avatars { display: flex; }
.evening-title-avatar { display: grid; width: 3.2rem; height: 3.2rem; border-radius: 50%; box-shadow: var(--figure-ring); }
.evening-title-avatar + .evening-title-avatar { margin-left: -1.1rem; }
.evening-title-copy { display: grid; min-width: 0; gap: 0.1rem; }
.evening-title-copy strong { font-size: 1.3rem; line-height: var(--lead-display); }
.evening-title-names { overflow-wrap: anywhere; color: var(--progress); font-size: var(--type-small); font-weight: 850; }
.evening-title-names small { color: var(--text-secondary); font-size: var(--type-caption); font-weight: 750; }
.evening-title-copy p { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.4; }
.evening-image-action { display: grid; justify-items: center; gap: 0.35rem; text-align: center; }
.evening-image-action p { margin: 0; color: var(--text-tertiary); font-size: var(--type-caption); }
.round-close-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.session-finale-standing { display: grid; min-width: 0; gap: 1rem; }
.session-finale-standing > h3,
.session-round-recap-heading h3 { margin: 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.16em; text-align: center; text-transform: uppercase; }
.session-finale-lineup { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1.5rem clamp(1rem, 3.5vw, 3rem); }
.session-finale-group { --band: var(--text-secondary); display: grid; min-width: 0; justify-items: center; gap: 0.8rem; padding-top: 0.55rem; border-top: 2px solid var(--band); }
.session-finale-group[data-score-band="lowest"],
.session-finale-group[data-score-band="equal"] { --band: var(--progress); }
.session-finale-group[data-score-band="highest"] { --band: var(--brand-text); }
.session-finale-group h4 { margin: 0; color: var(--band); font-size: var(--type-caption); letter-spacing: 0.06em; text-transform: uppercase; }
.session-finale-group ul { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0.9rem 0.3rem; margin: 0; padding: 0; list-style: none; }
.session-finale-member { --figure: clamp(3.9rem, 7vw, 5.6rem); width: max-content; min-width: calc(var(--figure) + 2rem); max-width: 8.5rem; }
.session-finale-sips { color: var(--band); font-family: var(--font-number); font-size: 0.95rem; font-weight: 900; white-space: nowrap; }
.session-round-recap { display: grid; min-width: 0; justify-items: center; gap: 0.7rem; }
.session-round-recap-heading { min-width: 0; text-align: center; }
.session-round-recap-heading p { margin: 0.25rem 0 0; color: var(--text-secondary); font-size: var(--type-caption); }
.session-round-recap-notice { max-width: 42rem; margin: 0; overflow-wrap: anywhere; color: var(--chip-gold); font-size: var(--type-caption); line-height: 1.5; text-align: center; }

.session-round-matrix-scroll { width: fit-content; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.session-round-matrix-scroll:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.session-round-matrix { border-collapse: collapse; color: var(--ink); font-size: var(--type-caption); }
.session-round-matrix :is(th, td) { padding: 0.28rem 0.4rem; border-bottom: 1px dashed var(--paper-rule); }
.session-round-matrix tbody tr:last-child :is(th, td) { border-bottom: 0; }
.session-round-matrix th[scope="row"] { position: sticky; left: 0; min-width: 5.5rem; max-width: 9.5rem; padding-left: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; background: var(--paper-material); font-weight: 750; text-align: left; }
.session-round-matrix thead th { color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.08em; border-bottom: 1px solid var(--ink); }
.session-round-matrix td { min-width: 1.9rem; font-family: var(--font-number); font-weight: 850; text-align: center; white-space: nowrap; }
.session-round-matrix td[data-actual-sips="0"] { color: var(--paper-ink-soft); font-weight: 700; }
.session-round-matrix tfoot :is(th, td) { padding-top: 0.4rem; border-top: 1px solid var(--ink); border-bottom: 0; }
.session-round-matrix tfoot th { color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.session-round-matrix-legend { display: flex; max-width: 40rem; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.9rem; margin: 0; padding: 0; color: var(--text-secondary); font-size: var(--type-caption); list-style: none; }
.session-round-matrix-legend b { color: var(--text-primary); font-family: var(--font-number); }

[data-feedback-role="game-start"][data-motion="game-transition"] .stage-moment,
[data-motion="results-reveal"] .stage-moment,
[data-motion="results-reveal"] .wwr-candidate {
  animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) both;
}
[data-motion="results-reveal"] .wwr-candidate-verdict .crew-figure-avatar {
  animation: saufaffe-impact var(--motion-celebration) var(--motion-ease-emphasized) both;
}
[data-motion="moment-lock-in"] .stage-moment {
  animation: saufaffe-lock-in var(--motion-feedback) var(--motion-ease-emphasized) both;
}
[data-motion="moment-progress"] .stage-moment-progress {
  animation: saufaffe-progress-step var(--motion-feedback) var(--motion-ease-emphasized) both;
}
[data-feedback-role="turn-pass"][data-motion="hot-potato-pass"] .potato-ring[data-origin-seat] .potato-core {
  animation: saufaffe-potato-toss var(--motion-transition) var(--motion-ease-emphasized) both;
}
[data-feedback-role="turn-pass"][data-motion="hot-potato-pass"] .potato-seat.is-holder .crew-figure-avatar {
  animation: saufaffe-success var(--motion-feedback) var(--motion-ease-emphasized) both;
}
[data-motion="hot-potato-explosion"] .potato-object,
[data-motion="hot-potato-explosion"] .potato-burst,
[data-motion="hot-potato-explosion"] .stage-moment {
  animation: saufaffe-impact var(--motion-celebration) var(--motion-ease-emphasized) both;
}
[data-round-closure-motion] .round-close-settlement,
[data-round-closure-motion] .round-close-next {
  animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) both;
}
[data-round-closure-motion] .round-close-settlement { animation-delay: var(--motion-feedback); }
[data-round-closure-motion] .round-close-next { animation-delay: var(--motion-transition); }

.round-close-reveal { position: relative; }
.reveal-tension { position: absolute; z-index: 1; inset: 0 0 auto; display: grid; min-height: min(100%, 22rem); place-content: center; justify-items: center; gap: 0.6rem; padding-top: 3.5rem; pointer-events: none; text-align: center; }
.reveal-tension p { margin: 0; font-size: var(--stage-display); line-height: var(--lead-display); }
.reveal-tension-host { width: clamp(6rem, 24vw, 8.5rem); height: auto; }

.reveal-skip { position: fixed; z-index: 7; right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); min-height: var(--target-compact); padding: 0.4rem 1.1rem; box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.45); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-primary); background: var(--surface-interactive); font: inherit; font-size: var(--type-caption); font-weight: 850; cursor: pointer; }

:is([data-reveal-step="bill"], [data-reveal-step="done"]) .reveal-skip,
[data-reveal-step="done"] .reveal-tension,
[data-reveal-step]:not([data-reveal-step="tension"]) .reveal-tension { display: none; }
[data-reveal-step="tension"] [data-stage-scene] > :not(.scene-prompt),
[data-reveal-step="result"] [data-stage-scene] :is(.stage-moment, .crew-badge, .crew-badges, .level-result, .crew-streak),
:is([data-reveal-step="tension"], [data-reveal-step="result"], [data-reveal-step="consequence"]) :is(.round-close-tab, .round-close-finale) { visibility: hidden; }
.crew-figure-avatar.is-before,
:is([data-reveal-step="tension"], [data-reveal-step="result"]) .crew-figure-avatar.is-reacting { display: none; }
:is([data-reveal-step="tension"], [data-reveal-step="result"]) .crew-figure-avatar.is-before { display: grid; }
[data-reveal-step="tension"]:not([data-reveal-resumed]) .reveal-tension { animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) both; }
[data-reveal-step="tension"] .reveal-tension-host { animation: saufaffe-drumroll 0.25s var(--motion-ease-standard) 4 alternate; }
[data-reveal-step="result"]:not([data-reveal-resumed]) [data-stage-scene] > :not(.scene-prompt) { animation: saufaffe-enter var(--motion-transition) var(--motion-ease-emphasized) both; }
[data-reveal-step="consequence"]:not([data-reveal-resumed]) [data-stage-scene] :is(.crew-badge, .level-result) { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) both; }
[data-reveal-step="consequence"]:not([data-reveal-resumed]) [data-stage-scene] .stage-moment { animation: saufaffe-enter var(--motion-reveal) var(--motion-ease-standard) both; }

[data-reveal-step="consequence"]:not([data-reveal-resumed]) .crew-figure-avatar.is-reacting { transform-origin: 50% 100%; animation: saufaffe-cheer 0.76s var(--motion-ease-emphasized) backwards; }
[data-reveal-step="consequence"]:not([data-reveal-resumed]) .crew-figure-avatar.is-reacting.is-erwischt { animation-name: saufaffe-caught; animation-duration: 0.62s; }

.is-erwischt .caricature-disguise { transform-box: fill-box; transform-origin: 4% 30%; transform: translate(2px, 20px) rotate(24deg); }
[data-reveal-step="consequence"]:not([data-reveal-resumed]) .crew-figure-avatar.is-erwischt .caricature-disguise { animation: saufaffe-disguise-slip 0.5s var(--motion-ease-emphasized) 0.22s backwards; }
@keyframes saufaffe-disguise-slip { from { transform: none; } }
@keyframes saufaffe-cheer {
  0% { opacity: 0.45; transform: scale(0.84); }
  28% { opacity: 1; transform: translateY(-14%) rotate(-6deg) scale(1.08); }
  52% { transform: translateY(0) rotate(4deg) scale(1.02, 0.96); }
  74% { transform: translateY(-5%) rotate(-2deg); }
  100% { transform: none; }
}
@keyframes saufaffe-caught {
  0% { opacity: 0.45; transform: scale(1.1); }
  18% { opacity: 1; transform: translateX(-6%) rotate(-5deg); }
  36% { transform: translateX(5%) rotate(4deg); }
  54% { transform: translateX(-3%) rotate(-2deg); }
  76% { transform: translateY(5%) scale(1.03, 0.92); }
  100% { transform: none; }
}
[data-reveal-step="bill"]:not([data-reveal-resumed]) :is(.round-close-settlement, .round-close-next, .round-close-finale) { animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) both; }

@keyframes saufaffe-fade { from { opacity: 0; } }
:is([data-round-closure-motion], [data-reveal-step="bill"]:not([data-reveal-resumed])) .round-close-next:has(.round-close-dock) { animation-name: saufaffe-fade; }
[data-reveal-step="bill"]:not([data-reveal-resumed]) .round-close-next { animation-delay: var(--motion-feedback); }
@keyframes saufaffe-drumroll {
  from { transform: rotate(-4deg) translateY(0); }
  to { transform: rotate(4deg) translateY(-0.25rem); }
}

.stage-entrance { position: fixed; z-index: 55; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.35rem; padding: 1rem; background: radial-gradient(circle at 50% 46%, var(--stage-glow), transparent 62%), rgba(14, 13, 16, 0.84); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); text-align: center; pointer-events: none; }
.stage-entrance .saufaffe-icon { width: 3rem; height: 3rem; color: var(--stage-accent); }
.stage-entrance-kicker { color: var(--text-secondary); font-size: var(--type-small); font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.stage-entrance strong { font-size: clamp(2.4rem, 11vw, 4.5rem); line-height: var(--lead-display); }
.stage-entrance:not([data-resumed]) { animation: saufaffe-entrance var(--motion-celebration) var(--motion-ease-emphasized) both; }
.stage-entrance:not([data-resumed]) strong { animation: saufaffe-stamp var(--motion-celebration) var(--motion-ease-emphasized) 120ms both; }
@keyframes saufaffe-entrance {
  from { opacity: 0; }
  to { opacity: 1; }
}

.timer[data-urgent] { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 0 0.18rem rgba(255, 123, 110, 0.22); animation: saufaffe-urgent 1s var(--motion-ease-standard) 5; }
@keyframes saufaffe-urgent {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08); }
}

.potato-ring[data-heat="2"] .potato-object { animation: saufaffe-potato-wobble 0.5s var(--motion-ease-standard) 6 alternate; }
.potato-ring[data-heat="3"] .potato-object { animation: saufaffe-potato-shake 0.16s linear 48 alternate; }
.potato-ring[data-heat="2"] .potato-burst { opacity: 0.55; }
.potato-ring[data-heat="3"] .potato-burst { opacity: 0.95; }
@keyframes saufaffe-potato-wobble {
  from { transform: rotate(-5deg); }
  to { transform: rotate(5deg); }
}
@keyframes saufaffe-potato-shake {
  from { transform: translateX(-0.18rem) rotate(-7deg); }
  to { transform: translateX(0.18rem) rotate(7deg); }
}
@keyframes saufaffe-potato-toss {
  from {
    top: calc(50% + var(--ring-ry) * var(--core-lean, 0.22) * sin(calc(90deg + var(--ring-turn, 0deg) + var(--seat-step) * var(--ring-dir, 1) * var(--origin-index, 0))));
    left: calc(50% + var(--ring-rx) * var(--core-lean, 0.22) * cos(calc(90deg + var(--ring-turn, 0deg) + var(--seat-step) * var(--ring-dir, 1) * var(--origin-index, 0))));
  }
}

@media (max-width: 860px) {
  .entry-layout { min-height: 0; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.1rem; padding-top: 0.75rem; }
  
  .entry-hero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: "brand status" "poster guests" "count guests" "copy copy"; gap: 0.6rem 0.7rem; }
  .entry-hero-copy { font-size: var(--type-body); }
  .entry-count { align-self: end; }
  .entry-guests { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0.5rem; margin: 0; }
  .entry-guests li { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 0.3rem; }
  .entry-guests li:nth-child(1) { transform: rotate(-3deg); }
  .entry-guests li:nth-child(2) { transform: rotate(2deg) translateX(0.35rem); }
  .entry-guests li:nth-child(3) { transform: rotate(3deg); }
  .entry-guest-face { width: 2.7rem; height: 2.7rem; }
  .entry-guests .speech-tag { padding: 0.28rem 0.45rem; font-size: var(--type-micro); text-align: left; }

  .lobby-floor {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head"
      "crew"
      "invite"
      "start"
      "look"
      "room";
  }
  
  .lobby-floor { padding-top: 0.25rem; }
  .lobby-floor-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.2rem 0.7rem; }
  .lobby-floor-head .host-say { display: contents; }
  .lobby-floor-head .lobby-host { grid-row: 1 / span 2; width: 3.4rem; }
  .lobby-floor-head .speech-tag { justify-self: start; }
  .lobby-floor-head :is(.lobby-copy, .lobby-one-phone, .lobby-ready) { grid-column: 1 / -1; }
  .lobby-copy { font-size: var(--type-small); line-height: 1.4; }
  
  .lobby-lineup { min-height: 0; margin-top: 0; padding: 0.7rem 0 0.6rem; gap: 0.7rem 0.15rem; --figure-size: clamp(3rem, 13vw, 3.6rem); }
  .lobby-lineup[data-crew-density="roomy"] { --figure-size: clamp(4.2rem, 19vw, 5.2rem); }
  .lobby-lineup[data-crew-density="dense"] { --figure-size: clamp(2.9rem, 12.5vw, 3.4rem); }
  .lobby-lineup .crew-figure-name { font-size: var(--type-caption); }
  .lobby-lineup > .crew-figure { width: calc(var(--figure) + 1.2rem); }

  .potato-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "caption"
      "moment"
      "action"
      "ring";
    row-gap: 0.7rem;
  }
  .potato-caption { text-align: center; }
  .potato-scene > .stage-moment { justify-content: center; justify-items: center; text-align: center; }
  .potato-ring { --figure: clamp(3rem, 14vw, 4.2rem); --ring-rx-n: 38; --ring-ry-n: 38; max-width: 30rem; aspect-ratio: 1.02; margin-bottom: 3rem; }
  
  .potato-ring[data-viewer-seat="0"] { --ring-turn: 180deg; --ring-dir: -1; --core-lean: 0.08; }
  .potato-relation { margin-top: 0.3rem; font-size: var(--type-body); }
  .potato-ring .crew-figure { width: calc(var(--figure) + 1.4rem); }
  .potato-ring .crew-figure-name { font-size: var(--type-caption); }
  .potato-ring .crew-figure-tag { font-size: var(--type-micro); }

  .round-close-tab { grid-template-columns: minmax(0, 1fr); }
  .round-bill { max-width: none; }
  .round-close-next > .button-primary,
  .round-close-next > .waiting-pill { width: 100%; justify-self: stretch; text-align: center; }
  .session-sheet-body { grid-template-columns: minmax(0, 1fr); }
  :is(.stage-hud, .board-head, .tisch-head) .session-sheet-body { width: 100%; }
  .session-finale-lineup { gap: 1.25rem 1rem; }
  .session-finale-group { width: 100%; }

}

@media (max-width: 430px) {
  .room-bar { gap: 0.4rem; padding-inline: 0.5rem; }
  .room-bar .copy-code { padding-inline: 0.6rem; font-size: 0.75rem; }
  .room-bar .status-dot.connected + .connection-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .entry-tab { min-height: var(--target-default); justify-content: center; gap: 0.4rem; padding-inline: 0.3rem; text-align: center; }
  .entry-tab small { display: none; }
  
  .lobby-poker-grid { gap: 0.4rem; }
  .lobby-poker-grid label > span { font-size: var(--type-small); }
  .open-room { grid-template-columns: minmax(0, 1fr) auto; }
  .open-room .room-code { grid-column: 1 / -1; }
  
  .stage-hud { gap: 0.4rem 0.35rem; }
  :is(.stage-hud, .board-head, .tisch-head) .session-sheet-facts > [aria-hidden="true"] { display: none; }
  
  .stage-hud > .timer { min-width: 0; padding-inline: 0.45rem; }
  
  .stage-title h1 { padding-inline: 0.3em; font-stretch: 62%; font-size: 0.92rem; }
  
  .stage-moment-progress:has(> .stage-moment-pending) .stage-moment-progress-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stage-hud .session-sheet > summary { gap: 0.3rem; padding-inline: 0.55rem; }
  
  .round-dock-next:has(> .round-dock-verdict) > .round-dock-copy { display: none; }
  
  .stage-hud .session-sheet-label-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  
  .stage-hud .reaction-picker-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stage-hud .reaction-picker > summary { width: var(--target-compact); justify-content: center; padding: 0; }
  .stage-hud-tools { gap: 0.4rem; }
  .session-crew-member { gap: 0.5rem; }
  .session-finale-member { --figure: 3.6rem; width: calc(var(--figure) + 1.6rem); }
  .session-finale-facts { gap: 0.6rem 1.25rem; }
  .wwr-candidate { --figure: clamp(4.2rem, 21vw, 5.2rem); width: calc(var(--figure) + 1.2rem); }
  .wwr-candidate-verdict { --figure: 7.5rem; width: 100%; }
  .wwr-candidate-tally { --figure: 2.4rem; width: calc(var(--figure) + 1.8rem); }
}

@media (max-width: 359px) {
  
  .room-bar-meta { flex-wrap: nowrap; gap: 0.3rem; }
  .room-bar .copy-code { gap: 0.3rem; padding-inline: 0.45rem; letter-spacing: 0.03em; }
  .room-bar .copy-code span { white-space: nowrap; }
  
  .stage-title h1 { padding-inline: 0.22em; font-size: 0.78rem; }
  
  .stage-moment-pending-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  
  :is(.stage-hud, .head-tools) .session-sheet-title strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  
  .potato-ring:is([data-seat-count="7"], [data-seat-count="8"], [data-seat-count="many"]) { --figure-size: 3.2rem; --figure: 3.2rem; }
  
  .entry-tab .saufaffe-icon { display: none; }
  
  .entry-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .entry-guest-face { width: 2.2rem; height: 2.2rem; }
  .entry-guests .speech-tag { padding-inline: 0.4rem; overflow-wrap: normal; }
}

.scene { display: grid; min-width: 0; justify-items: center; gap: clamp(0.9rem, 2.6vh, 1.75rem); padding: clamp(0.5rem, 3vh, 2.5rem) 0 1rem; text-align: center; }
.scene-prompt { min-width: 0; max-width: min(58rem, 100%); }
.scene-prompt h2 { margin: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; font-size: clamp(1.9rem, 5.2vw, 4.2rem); text-wrap: balance; }
.scene-prompt.is-compact h2 { font-size: clamp(1.5rem, 3.4vw, 2.6rem); }
.scene .game-choice-fieldset { width: 100%; }
.scene .game-choice-fieldset > legend { margin: 0 auto 0.7rem; color: var(--text-secondary); font-size: var(--type-small); text-align: center; }

.scene-steps { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.1rem; margin: 0; padding: 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.1em; list-style: none; text-transform: uppercase; }
.scene-steps li { display: inline-flex; align-items: center; gap: 0.4rem; }
.scene-steps li span { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: 0.62rem; letter-spacing: 0; }
.scene-steps li.is-done { color: var(--progress); }
.scene-steps li.is-done span { color: var(--ink); background: var(--progress); border-color: var(--progress); }
.scene-steps li.is-current { color: var(--text-primary); }
.scene-steps li.is-current span { border-color: var(--brand-primary); color: var(--ink); background: var(--brand-primary); }

.crew-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }

.reveal-steps { display: grid; width: min(100%, 40rem); min-width: 0; justify-self: center; gap: 0.9rem; }
.reveal-step-list { display: grid; min-width: 0; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.reveal-step[hidden] { display: none; }
.reveal-steps-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

[data-reveal-step="tension"] .reveal-steps-nav { display: none; }
.reveal-card { display: grid; min-width: 0; justify-items: center; gap: 0.55rem; text-align: center; }
.reveal-card.is-compact, .reveal-card.is-score { gap: 0.45rem; }

.reveal-group { display: grid; min-width: 0; gap: 0.55rem; }
.reveal-card.is-row { width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 0.35rem 0.8rem; text-align: left; }
.reveal-card.is-row > .reveal-slip { grid-row: 1 / span 2; min-width: 0; padding: 0.5rem 0.85rem 0.55rem 0.55rem; }
.reveal-card.is-row > .reveal-slip strong { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; font-size: var(--type-body); }
.reveal-card.is-row > .reveal-by { grid-column: 2; justify-self: end; max-width: 9rem; font-size: var(--type-caption); text-align: right; }
.reveal-card.is-row > .crew-badge { grid-column: 2; justify-self: end; }
.reveal-card.is-row > .reveal-by:last-child { grid-row: 1 / span 2; }
.reveal-card.is-row > .lower-third { grid-column: 1 / -1; width: 100%; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.4rem 0.7rem; padding: 0.4rem 0.7rem; }
.reveal-card.is-row > .lower-third ul { gap: 0.3rem 0.7rem; }
.reveal-card.is-row > .lower-third li strong { font-size: var(--type-small); }
.reveal-card.is-row > .lower-third .lower-third-avatar { width: 1.6rem; height: 1.6rem; }
.reveal-card.is-row > .lower-third + .reveal-by,
.reveal-card.is-row > .reveal-by + .reveal-by { grid-column: 1 / -1; justify-self: start; max-width: none; text-align: left; }

@media (max-width: 400px) {
  .reveal-card.is-row { grid-template-columns: minmax(min-content, 1fr) minmax(0, auto); }
  .reveal-card.is-row > .reveal-by { max-width: 7rem; }
  .reveal-card.is-row > .crew-badge { max-width: 7.5rem; text-align: right; }
  .reveal-card.is-row > .lower-third { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}

@media (min-width: 68.75rem) {
  :is(.answer-battle-scene, .bluff-scene) .reveal-steps { width: min(100%, 64rem); }
  :is(.answer-battle-scene, .bluff-scene) .reveal-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem 1.6rem; }
  :is(.answer-battle-scene, .bluff-scene) .reveal-step:has(> .is-score) { grid-column: 1 / -1; }
}

.reveal-slip { position: relative; display: inline-grid; max-width: 100%; min-width: min(100%, 14rem); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem; padding: 0.75rem 1.1rem 0.8rem 0.8rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.35); text-align: left; transform: rotate(-1.5deg); }
.reveal-slip strong { overflow-wrap: anywhere; font-stretch: 85%; font-weight: 850; font-size: clamp(1.15rem, 3vw, 1.5rem); line-height: 1.15; }
.reveal-slip-letter { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-weight: 900; font-size: var(--type-small); }
.reveal-stamp { position: absolute; top: -0.7rem; right: -0.5rem; padding: 0.15rem 0.45rem 0.18rem; border: 2px solid currentColor; color: var(--paper-accent); background: var(--paper-material); font-stretch: 75%; font-weight: 900; font-size: var(--type-caption); text-transform: uppercase; transform: rotate(8deg); }
.reveal-slip.is-truth { background: color-mix(in srgb, var(--brand-primary) 30%, var(--paper-material)); }
.reveal-slip.is-truth .reveal-stamp { color: #2f5b06; }
.reveal-by { margin: 0; color: var(--text-secondary); font-size: var(--type-small); }
.reveal-by b { color: var(--text-primary); }
.reveal-kicker { margin: 0; color: var(--text-secondary); font-stretch: 75%; font-weight: 900; font-size: var(--type-caption); letter-spacing: 0.06em; text-transform: uppercase; }
.reveal-slip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.7rem 0.8rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.reveal-slip-row li { display: grid; justify-items: center; gap: 0.3rem; }
.reveal-slip-row small { color: var(--text-secondary); font-size: var(--type-caption); }
.reveal-slip-row .reveal-slip { min-width: 0; padding: 0.5rem 0.8rem 0.55rem 0.55rem; transform: rotate(1deg); }
.reveal-slip-row .reveal-slip strong { font-size: var(--type-body); }

.reveal-slip-row.is-grid { display: grid; width: min(100%, 36rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 0.6rem; margin-inline: auto; }
.reveal-slip-row.is-grid li { align-content: start; min-width: 0; }
.reveal-slip-row.is-grid .reveal-slip { width: 100%; min-height: 2.9rem; grid-template-columns: minmax(0, 1fr); text-align: center; transform: none; }
.reveal-slip-row.is-grid li:nth-child(odd) .reveal-slip { transform: rotate(-0.8deg); }
.reveal-slip-row.is-grid li:nth-child(even) .reveal-slip { transform: rotate(0.8deg); }
.reveal-slip-row.is-grid small { text-align: center; }
.reveal-slip-row.is-grid:has(> li:only-child) { width: min(100%, 18rem); grid-template-columns: minmax(0, 1fr); }
.reveal-score { max-width: 32rem; margin: 0; font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-weight: 750; line-height: 1.35; }
.reveal-score strong { color: var(--prize); }
.reveal-gifts { margin: 0; padding: 0; color: var(--text-primary); font-weight: 750; list-style: none; }
.reveal-give { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.reveal-give .button { gap: 0.45rem; padding-left: 0.35rem; }
.reveal-give-avatar { display: grid; width: 1.9rem; height: 1.9rem; }

.lower-third { display: grid; width: min(100%, 30rem); gap: 0.5rem; padding: 0.7rem 0.9rem 0.8rem; border-left: 5px solid var(--at-stake); background: rgba(30, 28, 34, 0.94); text-align: left; }
.lower-third.is-safe { border-left-color: var(--brand-primary); }
.lower-third.is-neutral { border-left-color: var(--paper-rule); }
.lower-third.is-tip { border-left-color: var(--chip-gold); }
.lower-third-label { color: var(--text-secondary); font-stretch: 75%; font-weight: 900; font-size: var(--type-caption); letter-spacing: 0.08em; text-transform: uppercase; }
.lower-third ul { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin: 0; padding: 0; list-style: none; }
.lower-third li { display: inline-flex; min-width: 0; align-items: center; gap: 0.45rem; }
.lower-third li strong { overflow-wrap: anywhere; font-stretch: 82%; font-weight: 900; font-size: 1.05rem; text-transform: uppercase; }
.lower-third li.is-viewer strong { color: var(--brand-text); }
.lower-third-avatar { display: grid; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; }

.round-close:has(.reveal-steps[data-steps-pending]) .round-close-settlement { visibility: hidden; }
.reveal-step:not([hidden]) .reveal-slip { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) both; }
.reveal-step:not([hidden]) .lower-third { animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) 180ms both; }

.think-stage { position: relative; display: flex; min-width: 0; justify-content: center; gap: 1rem clamp(0.4rem, 3vw, 2.5rem); padding: 1.4rem 0 1.6rem; --figure-size: clamp(5rem, 22vw, 7.5rem); isolation: isolate; }
.think-stage::before { position: absolute; z-index: -1; inset: auto 8% 0; height: 55%; border-top: 2px solid rgba(245, 241, 232, 0.2); border-radius: 50%; background: radial-gradient(ellipse 60% 80% at 50% 0%, color-mix(in srgb, var(--stage-glow) 90%, transparent), transparent 75%); content: ""; }
.think-stage .think-writer { width: auto; min-width: 0; max-width: 13rem; flex: 1 1 0; }
.think-audience { display: grid; justify-items: center; gap: 0.5rem; }
.think-audience-row { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.4rem; --figure-size: clamp(2.8rem, 11vw, 3.6rem); }
.think-audience-row .crew-figure { width: calc(var(--figure) + 1.4rem); }
.think-audience-row .crew-figure-name { font-size: var(--type-caption); }

.rank-places { display: flex; width: min(100%, 40rem); min-width: 0; flex-wrap: wrap; justify-self: center; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }

.rank-place { display: grid; min-width: min-content; max-width: 100%; flex: 1 1 0; min-height: 4.4rem; align-content: start; justify-items: center; gap: 0.2rem; padding: 0.45rem 0.35rem 0.55rem; border: 2px dashed var(--border-strong); color: var(--text-secondary); text-align: center; }
.rank-place.is-filled { border-style: solid; border-color: var(--brand-primary); color: var(--ink); background: var(--paper-material); }
.rank-places.is-answer .rank-place.is-filled { border-color: var(--prize); }

@media (max-width: 560px) {
  .rank-places.is-answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .rank-places.is-answer .rank-place { min-height: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 0.6rem; padding: 0.3rem 0.7rem; text-align: left; }
  .rank-places.is-answer .rank-place-number { font-size: 1.2rem; }
  .rank-places.is-answer .rank-place-text { font-size: var(--type-small); }
}
.rank-place-number { font-stretch: var(--stretch-display); font-weight: 900; font-size: 1.5rem; line-height: 1; }
.rank-place.is-filled .rank-place-number { color: var(--paper-accent); }
.rank-place-text { max-width: 100%; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; font-size: var(--type-caption); font-weight: 850; line-height: 1.2; }
.rank-place:not(.is-filled) .rank-place-text { font-weight: 700; }

.card-rating { display: flex; min-width: 0; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem 0.4rem; margin-left: auto; }
.card-rating-label { color: var(--text-secondary); font-size: var(--type-caption); font-weight: 750; line-height: 1.15; text-align: right; }
.card-rating-button { display: inline-grid; min-width: var(--target-compact); min-height: var(--target-compact); place-items: center; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-control); color: var(--text-primary); background: var(--surface-raised); font: inherit; font-size: var(--type-caption); font-weight: 850; cursor: pointer; }
.card-rating-button:hover:not(:disabled) { border-color: var(--text-primary); }
.card-rating-button[aria-pressed="true"] { border-color: var(--brand-primary); color: var(--ink); background: var(--brand-primary); }
.card-rating-button:disabled:not([aria-pressed="true"]) { opacity: 0.6; cursor: default; }
.card-rating-thumb { width: 1.15rem; height: 1.15rem; }
.card-rating-thumb.is-down { transform: scale(-1, -1); }

.crew-badge { max-width: 100%; padding: 0.26rem 0.45rem 0.28rem; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; color: var(--ink); background: var(--progress); font-stretch: 75%; font-size: var(--type-caption); font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.crew-badge.is-drink { background: var(--at-stake); }
.crew-badge.is-tied { background: var(--prize); }
.crew-badge.is-neutral { color: var(--text-primary); background: var(--surface-interactive); }

.crew-badge.is-echo { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

button.crew-pick { cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease-standard); }
button.crew-pick::before {
  position: absolute;
  top: -0.1rem;
  left: 50%;
  width: calc(var(--figure) + 1.1rem);
  height: calc(var(--figure) + 1.1rem);
  border: 2px dashed rgba(245, 241, 232, 0.34);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
  transition: border-color var(--motion-feedback) var(--motion-ease-standard), transform var(--motion-feedback) var(--motion-ease-standard);
}
button.crew-pick:focus-visible::before { border-style: solid; border-color: var(--brand-primary); transform: translateX(-50%) scale(1.05); }
button.crew-pick:disabled::before { border-color: transparent; }
button.crew-pick:disabled .crew-figure-avatar { filter: saturate(0.55) brightness(0.72); }

button.crew-pick .crew-figure-avatar { margin-bottom: 0.45rem; transition: box-shadow var(--motion-feedback) var(--motion-ease-standard), transform var(--motion-feedback) var(--motion-ease-standard); }
button.crew-pick:focus-visible .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.45rem var(--brand-primary), 0 1.2rem 2rem rgba(201, 242, 74, 0.35); }

@media (hover: hover) {
  button.crew-pick:hover:not(:disabled)::before { border-style: solid; border-color: var(--brand-primary); transform: translateX(-50%) scale(1.05); }
  button.crew-pick:hover:not(:disabled) { transform: translateY(-0.35rem); }
  button.crew-pick:hover:not(:disabled) .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.45rem var(--brand-primary), 0 1.2rem 2rem rgba(201, 242, 74, 0.35); }
}
button.crew-pick:active:not(:disabled) { transform: scale(0.96); }
button.crew-pick:active:not(:disabled) .crew-figure-avatar { transform: scale(0.94); }

button.crew-pick:disabled { cursor: progress; }
.crew-pick-cue {
  position: absolute;
  
  top: -0.55rem;
  left: 50%;
  padding: 0.16rem 0.6rem;
  white-space: nowrap;
  transform: translateX(-50%);
  border-radius: 999px;
  opacity: 0;
  color: var(--ink);
  background: var(--brand-primary);
  font-size: var(--type-caption);
  font-weight: 850;
  transition: opacity var(--motion-feedback) var(--motion-ease-standard);
}
button.crew-pick:hover:not(:disabled) .crew-pick-cue,
button.crew-pick:focus-visible .crew-pick-cue { opacity: 1; }
@media (hover: none) {
  .crew-pick-cue { display: none; }
}

:is([data-turn-arrival], [data-motion="game-transition"]) button.crew-pick:not(:disabled)::before { animation: saufaffe-pick-invite 900ms var(--motion-ease-standard) calc(var(--pick-delay, 0ms) + var(--invite-after, 0ms)) both; }
[data-motion="game-transition"] { --invite-after: 1100ms; }
button.crew-pick:nth-child(2) { --pick-delay: 110ms; }
button.crew-pick:nth-child(3) { --pick-delay: 220ms; }
button.crew-pick:nth-child(4) { --pick-delay: 330ms; }
button.crew-pick:nth-child(5) { --pick-delay: 440ms; }
button.crew-pick:nth-child(n + 6) { --pick-delay: 550ms; }
@keyframes saufaffe-pick-invite {
  0%, 100% { transform: translateX(-50%) scale(1); }
  35% { border-style: solid; border-color: var(--brand-primary); transform: translateX(-50%) scale(1.1); }
}

.scene .game-form { width: min(100%, 34rem); padding: 0; border: 0; background: transparent; text-align: left; }
.scene .game-form input { min-height: 3.4rem; font-size: 1.1rem; }
.scene .game-form .button { min-height: 3.4rem; }

.never-side,
.sober-stamp,
.quiz-tile {
  position: relative;
  min-width: 0;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: var(--paper-material);
  box-shadow: 0 0.35rem 0 var(--ink), 0 1.1rem 2rem rgba(0, 0, 0, 0.32);
  font: inherit;
  transition: transform var(--motion-feedback) var(--motion-ease-standard), box-shadow var(--motion-feedback) var(--motion-ease-standard);
}
button:is(.never-side, .sober-stamp, .quiz-tile) { cursor: pointer; }
button:is(.never-side, .sober-stamp, .quiz-tile):hover:not(:disabled) { transform: translateY(-0.2rem); }
button:is(.never-side, .quiz-tile):hover:not(:disabled) { box-shadow: 0 0.55rem 0 var(--ink), 0 1.4rem 2.3rem rgba(0, 0, 0, 0.36); }
button:is(.never-side, .sober-stamp, .quiz-tile):active:not(:disabled) { transform: translateY(0.3rem); }
button:is(.never-side, .quiz-tile):active:not(:disabled) { box-shadow: 0 0.05rem 0 var(--ink); }
button:is(.never-side, .sober-stamp, .quiz-tile):disabled { cursor: progress; opacity: 0.7; }

.quiz-tile-fieldset { width: 100%; }
.quiz-tiles { display: grid; width: min(100%, 62rem); min-width: 0; margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }

.quiz-resolved .quiz-tiles { align-items: start; }
.quiz-resolved .quiz-tile { min-height: 0; }
.quiz-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: start; gap: 0.3rem 0.9rem; min-height: clamp(5.2rem, 13vh, 7.5rem); padding: 0.9rem 1.1rem; border-radius: 1.2rem; text-align: left; }
.quiz-letter { display: grid; width: 2.9rem; height: 2.9rem; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--buzzer, var(--paper-material)); box-shadow: 0 0.18rem 0 var(--ink); font-size: 1.45rem; }
.quiz-tile:nth-child(4n + 1) { --buzzer: #ff9a6b; }
.quiz-tile:nth-child(4n + 2) { --buzzer: #ffcf4a; }
.quiz-tile:nth-child(4n + 3) { --buzzer: #5ad1a0; }
.quiz-tile:nth-child(4n + 4) { --buzzer: #8fc1ff; }
.quiz-tile-copy { display: grid; min-width: 0; gap: 0.1rem; }

.quiz-tile-copy strong { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; font-size: clamp(1.02rem, 2vw, 1.35rem); line-height: 1.15; }
.quiz-tile-copy small { overflow-wrap: anywhere; color: var(--paper-ink-soft); font-size: var(--type-caption); font-weight: 750; }

.who-wrote-it-scene.quiz-resolved .quiz-tiles { width: min(100%, 40rem); grid-template-columns: minmax(0, 1fr); }
.who-wrote-others { display: grid; width: min(100%, 40rem); margin: 1.1rem auto 0; gap: 0.5rem; text-align: left; }
.who-wrote-others h3 { margin: 0; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.who-wrote-others ul { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.45rem 0.9rem; list-style: none; }
.who-wrote-others li { display: grid; min-width: 0; gap: 0.1rem; padding: 0.55rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 0.9rem; }
.who-wrote-others strong { overflow-wrap: anywhere; color: var(--text-primary); font-size: var(--type-body); line-height: 1.2; }
.who-wrote-others small { color: var(--text-secondary); font-size: var(--type-caption); font-weight: 750; }
.quiz-tile-check { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; color: var(--ink); background: var(--progress); }
.quiz-tile-check .saufaffe-icon { width: 1.2rem; height: 1.2rem; }
.quiz-tile.is-correct { background: #eaf6c8; box-shadow: 0 0.35rem 0 var(--ink), 0 1.1rem 2rem rgba(201, 242, 74, 0.25); }
.quiz-tile.is-correct .quiz-letter { --buzzer: var(--progress); }
.quiz-tile.is-wrong { box-shadow: 0 0.12rem 0 var(--ink); }
.quiz-tile.is-wrong .quiz-letter { --buzzer: var(--paper-material); box-shadow: none; }
.quiz-tile.is-wrong .quiz-letter,
.quiz-tile.is-wrong .quiz-tile-copy strong { color: var(--paper-ink-soft); border-color: var(--paper-ink-soft); }
.quiz-tile.is-wrong.is-viewer-answer { background: #ffe1d4; }
.quiz-answered .quiz-tile,
.quiz-spectating .quiz-tile { opacity: 0.72; box-shadow: 0 0.12rem 0 var(--ink); }
.quiz-backers { display: flex; min-width: 0; flex-wrap: wrap; grid-column: 1 / -1; align-items: flex-start; gap: 0.6rem 0.2rem; margin: 0.45rem 0 0; padding: 0.7rem 0 0; border-top: 1px dashed var(--paper-rule); list-style: none; }
.quiz-backer { --figure: 2.7rem; width: calc(var(--figure) + 2.9rem); color: var(--ink); }
.quiz-backer .crew-figure-name { font-size: var(--type-caption); }
.quiz-backer .crew-badge { font-size: var(--type-micro); }

.quiz-backers.is-faces { gap: 0.45rem 0.1rem; margin-top: 0.25rem; padding-top: 0.5rem; }
.quiz-backers.is-faces .quiz-backer { --figure: 2.1rem; width: 5.4rem; gap: 0.4rem; }
.quiz-backers.is-faces .crew-figure-name { line-height: 1.1; }
.quiz-backers.is-faces .crew-figure > .crew-streak { top: -0.35rem; left: -0.15rem; padding: 0.08rem 0.25rem 0.08rem 0.18rem; font-size: var(--type-micro); }
.quiz-backers.is-faces .crew-streak-icon { width: 0.75rem; height: 0.75rem; }

.quiz-unchosen { width: min(100%, 62rem); margin: 0 auto; color: var(--text-secondary); font-size: var(--type-small); font-weight: 750; text-align: center; }
.quiz-unchosen-label { font-weight: 850; }
.quiz-unchosen-item b { margin-right: 0.25rem; font-family: var(--font-number); }
.quiz-absent { display: grid; width: min(100%, 62rem); justify-items: center; gap: 0.25rem; margin-inline: auto; }
.quiz-absent-label { margin: 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.quiz-absent .quiz-backers { justify-content: center; border-top-color: var(--border-subtle); }
.quiz-absent .quiz-backer { color: var(--text-primary); }

.estimate-desk { display: flex; width: min(100%, 34rem); min-width: 0; align-items: center; justify-content: center; gap: 0.9rem; }
.estimate-envelope { width: clamp(6rem, 18vw, 8rem); height: auto; flex: 0 0 auto; transform: rotate(-6deg); }
.estimate-form.game-form { flex: 1 1 auto; }
.estimate-form input { font-variant-numeric: tabular-nums; }
.estimate-target { position: relative; display: grid; margin-top: 1.8rem; min-width: min(100%, 15rem); justify-items: center; gap: 0.15rem; padding: 2.6rem 1.6rem 0.9rem; border: 3px solid var(--ink); border-radius: 0.6rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 0.45rem 0 rgba(0, 0, 0, 0.35); }
.estimate-target .estimate-envelope { position: absolute; top: -2rem; width: 4.4rem; }
.estimate-target-label { color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.estimate-target strong { font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1; }
.estimate-target small { overflow-wrap: anywhere; color: var(--paper-ink-soft); font-size: var(--type-caption); }
.estimate-reveal { display: grid; width: min(100%, 64rem); min-width: 0; gap: 0.5rem; }
.estimate-track-ends { display: flex; justify-content: space-between; gap: 1rem; margin: 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.estimate-track { position: relative; display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.1rem 0.4rem; margin: 0; padding: 1.4rem 0 0; list-style: none; }
.estimate-track::before { position: absolute; top: 0.2rem; right: 0; left: 0; height: 0.35rem; border-radius: 999px; background: linear-gradient(90deg, var(--progress), var(--chip-gold) 55%, var(--brand-primary)); content: ""; }
.estimate-runner { --figure: clamp(3.6rem, 7vw, 5.2rem); flex: 1 1 8rem; width: auto; max-width: 13rem; }
.estimate-facts { display: grid; min-width: 0; justify-items: center; gap: 0.1rem; }
.estimate-value { overflow-wrap: anywhere; font-family: var(--font-number); font-size: 1.1rem; font-weight: 900; }

.never-sides-fieldset { width: 100%; }
.never-sides,
.never-camps { display: grid; width: min(100%, 60rem); min-width: 0; margin-inline: auto; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(0.6rem, 2vw, 1.4rem); }

.never-side { display: grid; width: min(100%, 15rem); aspect-ratio: 1; justify-self: center; justify-items: center; align-content: center; gap: 0.3rem; margin-bottom: 2.4rem; padding: 1rem; border-width: 4px; border-radius: 50%; text-align: center; }
.never-side::before { position: absolute; z-index: -1; top: 100%; left: 50%; width: 1.15rem; height: 2.5rem; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 0.55rem 0.55rem; background: #c99a5c; content: ""; transform: translateX(-50%); }
.never-side-art { width: clamp(2.8rem, 7vw, 4.4rem); height: auto; }
.never-side strong { overflow-wrap: anywhere; font-size: clamp(1.15rem, 2.6vw, 1.8rem); line-height: 1.1; }
.never-side small { overflow-wrap: anywhere; color: var(--paper-ink-soft); font-size: var(--type-small); }
.never-side-have { transform: rotate(-1.2deg); }
.never-side-never { transform: rotate(1.2deg); }
button.never-side-have:hover:not(:disabled) { transform: rotate(-1.2deg) translateY(-0.2rem); }
button.never-side-never:hover:not(:disabled) { transform: rotate(1.2deg) translateY(-0.2rem); }
.never-sides.is-sealed .never-side { opacity: 0.6; box-shadow: 0 0.12rem 0 var(--ink); }

.sober-stamps.is-sealed .sober-stamp { opacity: 0.6; filter: none; }
.never-divide { align-self: center; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.never-camp { display: grid; min-width: 0; align-content: start; justify-items: center; gap: 0.8rem; padding-top: 0.6rem; border-top: 3px solid var(--progress); }
.never-camp.is-drinking { border-top-color: var(--brand-primary); }
.never-camp h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3rem 0.6rem; margin: 0; overflow-wrap: anywhere; font-size: clamp(1.2rem, 2.6vw, 1.8rem); }
.never-camp h3 b,
.sober-row h3 b { color: var(--text-secondary); font-family: var(--font-number); font-size: 1rem; letter-spacing: 0; }

.camp-verdict { align-self: center; font-family: var(--font-text); letter-spacing: 0; text-transform: uppercase; }
.never-camp-crew,
.sober-row-crew { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0.9rem 0.3rem; margin: 0; padding: 0; list-style: none; }
.never-member { --figure: clamp(3.6rem, 7vw, 5.4rem); }
.never-camp-empty,
.sober-row-empty { margin: 0; color: var(--text-secondary); font-size: var(--type-small); }
.never-camp-none { grid-column: 1 / -1; border-top-style: dashed; border-top-color: var(--border-strong); }

.sober-stamps { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 1rem clamp(1rem, 4vw, 2.5rem); }
.sober-stamp { display: grid; isolation: isolate; width: clamp(9rem, 28vw, 13rem); aspect-ratio: 1; justify-items: center; align-content: center; gap: 0.25rem; padding: 2.4rem 1.3rem 0.8rem; border-radius: 50%; text-align: center; }
.sober-stamp:is(.sober-stamp-applies, .sober-stamp-clear) { border: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 0.35rem 0 #8a6a3c) drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, 0.35)); }
.sober-coaster { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.sober-stamp strong { overflow-wrap: anywhere; font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.1; }
.sober-stamp small { overflow-wrap: anywhere; color: var(--paper-ink-soft); font-size: var(--type-micro); line-height: 1.25; }
.sober-lineup { display: grid; width: min(100%, 60rem); min-width: 0; justify-items: center; gap: 1.1rem; }
.sober-row { display: grid; width: 100%; min-width: 0; justify-items: center; gap: 0.6rem; }
.sober-row h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3rem 0.6rem; margin: 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.sober-row-front { padding-bottom: 1.1rem; border-bottom: 2px dashed var(--border-strong); }
.sober-row-front h3 { color: var(--brand-text); }
.sober-row-front .sober-member { --figure: clamp(5rem, 11vw, 8rem); }
.sober-row-front .sober-member .crew-figure-avatar { box-shadow: 0 0 0 0.26rem var(--surface-canvas), 0 0 0 0.5rem var(--brand-primary), 0 1.2rem 2.2rem rgba(201, 242, 74, 0.35); }
.sober-row-front .sober-member .crew-figure-name { font-size: 1.1rem; }
.sober-row-back .sober-member,
.sober-row-aside .sober-member { --figure: clamp(3.2rem, 6vw, 4.4rem); }

@media (max-width: 860px) {
  .quiz-tiles { gap: 0.7rem; }
  
  .quiz-resolved .quiz-tiles { grid-template-columns: minmax(0, 1fr); }
  .estimate-track { justify-content: center; }
}

@media (max-width: 640px) {
  
  .estimate-reveal { display: flex; flex-direction: column; gap: 0.55rem; }
  .estimate-track-ends { display: contents; }
  .estimate-track-ends span:last-child { order: 2; }
  .estimate-track { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.75rem; padding: 0 0 0 1.5rem; }
  .estimate-track::before { top: 0; right: auto; bottom: 0; left: 0.2rem; width: 0.35rem; height: auto; background: linear-gradient(180deg, var(--progress), var(--chip-gold) 55%, var(--brand-primary)); }
  
  .estimate-track { gap: 0.5rem; }
  .estimate-runner { --figure: 2.6rem; flex: none; width: 100%; max-width: none; grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; column-gap: 0.65rem; row-gap: 0.05rem; text-align: left; }
  .estimate-runner > .crew-figure-avatar { grid-row: 1 / span 2; }
  .estimate-runner > :not(.crew-figure-avatar, .crew-badge, .crew-streak) { grid-column: 2; }
  .estimate-runner > .crew-badge { grid-column: 3; grid-row: 1 / span 2; justify-self: end; max-width: 8.5rem; text-align: center; }
  .estimate-facts { display: flex; flex-wrap: wrap; align-items: baseline; justify-items: start; gap: 0 0.5rem; }
  .estimate-value { font-size: 1rem; }
}

@media (max-width: 430px) {
  .scene { gap: 0.8rem; padding-top: 0.25rem; }
  .scene-prompt h2 { font-size: clamp(1.6rem, 8.4vw, 2.2rem); }
  
  .quiz-tile { padding: 0.65rem 0.7rem 0.75rem; gap: 0.45rem 0.6rem; }
  .quiz-letter { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
  .quiz-tile-copy strong { font-size: 1.02rem; }
  .quiz-tile-check { width: 1.9rem; height: 1.9rem; }
  .quiz-scene:not(.quiz-resolved) .quiz-tile { grid-template-columns: minmax(0, 1fr); min-height: 6.6rem; }
  .qduel-options .quiz-tile { grid-template-columns: minmax(0, 1fr); }
  .never-camps { grid-template-columns: minmax(0, 1fr); }
  .never-camps > .never-divide { justify-self: center; }
  .sober-stamp { width: min(42vw, 10.5rem); padding: 2.1rem 0.8rem 0.6rem; }
  
  .sober-stamp small { display: none; }
  
  .card-rating-label { max-width: 5.6rem; }
}

.boom-field { display: grid; width: min(100%, 66rem); min-width: 0; grid-template-columns: auto minmax(9rem, 1fr) minmax(0, 1.7fr); align-items: center; gap: clamp(0.6rem, 2vw, 1.6rem); }
.boom-thrower { --figure: clamp(5.4rem, 11vw, 8.4rem); }

@media (min-width: 1100px) {
  .boom-field { width: min(100%, 74rem); gap: 2.5rem; padding-block: 1.5rem 1rem; }
  .boom-thrower { --figure: 10.5rem; }
  .boom-target { --figure: 7.4rem; }
  .boom-flight { padding-top: 8.2rem; }
  .boom-arc { top: 2rem; height: 7rem; }
  .boom-object { width: 5.4rem; }
  .boom-resolved .boom-object { top: 6rem; }
  .boom-flight strong { font-size: 1.7rem; }
}
.boom-thrower .crew-figure-avatar,
.boom-target.is-selected .crew-figure-avatar { box-shadow: 0 0 0 0.26rem var(--surface-canvas), 0 0 0 0.5rem var(--boomerang-accent), 0 1.2rem 2.2rem rgba(255, 149, 100, 0.35); }
.boom-nobody,
.duel-nobody { place-items: center; color: var(--text-secondary); background: var(--surface-raised); }
.boom-nobody .saufaffe-icon,
.duel-nobody .saufaffe-icon { width: 45%; height: 45%; }
.boom-flight { position: relative; display: grid; min-width: 0; justify-items: center; gap: 0.2rem; padding-top: clamp(3.2rem, 8vw, 5.4rem); }
.boom-arc { position: absolute; top: 1.3rem; right: 0; left: 0; height: clamp(2.6rem, 7vw, 4.6rem); border: 3px dashed var(--boomerang-accent); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: 0.75; }
.boom-object { position: absolute; top: 0; left: 50%; width: clamp(2.6rem, 6vw, 4rem); height: auto; filter: drop-shadow(0 0.5rem 0.8rem rgba(0, 0, 0, 0.45)); transform: translateX(-50%) rotate(-18deg); }
.boom-resolved .boom-object { top: clamp(2.2rem, 6vw, 4.2rem); left: 97%; transform: translateX(-50%) rotate(48deg); }
.boom-flight strong { overflow-wrap: anywhere; font-size: clamp(1.05rem, 2.2vw, 1.4rem); }
.boom-flight small { overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); }
.boom-landing { min-width: 0; }
.boom-landing > legend { margin: 0 auto 0.9rem; color: var(--text-secondary); font-size: var(--type-small); text-align: center; }
.boom-targets { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1rem 0.4rem; }
.boom-target { --figure: clamp(4rem, 7.5vw, 6rem); padding: 0.45rem 0.2rem 0.5rem; }
.boom-waiting .boom-target .crew-figure-avatar,
.boom-spectating .boom-target .crew-figure-avatar,
.boom-resolved .boom-target:not(.is-selected) .crew-figure-avatar { filter: saturate(0.55) brightness(0.72); }
.boom-empty { margin: 0; color: var(--text-secondary); }
.boom-note,
.mine-note { display: flex; min-width: 0; max-width: 40rem; align-items: center; gap: 0.55rem; margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-small); line-height: 1.45; text-align: left; }
.boom-note .saufaffe-icon { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.mine-note strong { color: var(--text-primary); }

.duel-ring { --duel-figure: clamp(4.4rem, 10vw, 7rem); position: relative; display: grid; width: min(100%, 50rem); min-width: 0; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(0.4rem, 2vw, 1.5rem); }
.duel-ring.has-play { padding-top: 1.1rem; }

.duel-fighter { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: clamp(0.5rem, 1.6vw, 1rem); }
.duel-person { --figure: var(--duel-figure); }
.duel-fighter.is-viewer .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.4rem var(--progress), 0 1rem 1.6rem rgba(0, 0, 0, 0.42); }
.duel-facecard { display: grid; width: clamp(4.6rem, 11vw, 8.5rem); aspect-ratio: 0.72; flex: 0 0 auto; place-items: center; align-content: center; gap: 0.4rem; border: 3px solid rgba(245, 241, 232, 0.3); border-radius: 1rem; color: var(--duel-ink); background: repeating-linear-gradient(135deg, #3b3142 0 0.6rem, #46394f 0.6rem 1.2rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.42); font-size: var(--type-caption); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.duel-fighter-first .duel-facecard { transform: rotate(4deg); }
.duel-fighter-second .duel-facecard { transform: rotate(-4deg); }
.duel-facecard-icon { width: clamp(1.6rem, 4vw, 2.6rem); height: clamp(1.6rem, 4vw, 2.6rem); }
.duel-facecard-illustration { display: block; width: 72%; height: auto; }
.duel-facecard.is-locked { border-color: var(--progress); }
.duel-facecard.is-revealed { border-color: var(--ink); color: var(--ink); }
.duel-facecard-steal,
.duel-handcard-steal { --duel-tone: var(--duel-steal); }
.duel-facecard-kill,
.duel-handcard-kill { --duel-tone: var(--duel-kill); }
.duel-facecard-nothing,
.duel-handcard-nothing { --duel-tone: var(--duel-nothing); }
.duel-facecard.is-revealed { background: var(--duel-tone); }
.duel-fighter.is-winner .duel-facecard { box-shadow: 0 0 0 0.3rem var(--progress), 0 1.4rem 2.6rem rgba(201, 242, 74, 0.3); }
.duel-fighter.is-loser .duel-facecard,
.duel-fighter.is-loser .crew-figure-avatar { filter: saturate(0.55) brightness(0.9); }
.duel-clash { width: clamp(2.6rem, 7vw, 5rem); margin-top: calc(var(--duel-figure) / 2 - clamp(1.3rem, 3.5vw, 2.5rem)); }
.duel-clash-art { display: block; width: 100%; height: auto; }

.duel-hand { width: min(100%, 44rem); min-width: 0; }
.duel-hand > legend { margin: 0 auto 0.7rem; color: var(--text-secondary); font-size: var(--type-small); text-align: center; }
.duel-hand-cards { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; padding-top: 0.4rem; }
.duel-handcard { display: grid; min-width: 0; min-height: 10rem; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; align-content: stretch; gap: 0.15rem; padding: 0 0 0.75rem; border: 3px solid var(--ink); border-radius: 1rem; color: var(--ink); background: linear-gradient(var(--duel-tone) 0 58%, var(--ink) 58% calc(58% + 3px), var(--paper-material) calc(58% + 3px)); box-shadow: 0 0.35rem 0 var(--ink), 0 1.1rem 2rem rgba(0, 0, 0, 0.32); font: inherit; cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease-standard), box-shadow var(--motion-feedback) var(--motion-ease-standard); }
.duel-handcard:nth-child(1) { rotate: -4deg; translate: 0 0.3rem; }
.duel-handcard:nth-child(3) { rotate: 4deg; translate: 0 0.3rem; }
.duel-handcard:hover:not(:disabled) { transform: translateY(-0.25rem); box-shadow: 0 0.55rem 0 var(--ink), 0 1.4rem 2.3rem rgba(0, 0, 0, 0.36); }
.duel-handcard:active:not(:disabled) { box-shadow: 0 0.05rem 0 var(--ink); transform: translateY(0.3rem); }
.duel-handcard:disabled { cursor: progress; opacity: 0.6; }
.duel-handcard-art { display: grid; width: 100%; place-items: center; padding: 0.55rem 0.4rem 0.35rem; }
.duel-handcard-illustration { display: block; width: min(5.4rem, 78%); height: auto; filter: drop-shadow(0 0.25rem 0 rgba(21, 19, 22, 0.25)); }
.duel-handcard strong { overflow-wrap: anywhere; font-size: clamp(1.15rem, 4.6vw, 1.5rem); line-height: var(--lead-display); }
.duel-handcard small { overflow-wrap: anywhere; color: var(--paper-ink-soft); font-size: var(--type-caption); font-weight: 750; }

.duel-props { position: absolute; inset: 0 0 auto; height: var(--figure); pointer-events: none; }
.duel-prop { position: absolute; bottom: -8%; width: 62%; height: auto; filter: drop-shadow(0 0.4rem 0.5rem rgba(0, 0, 0, 0.45)); }
.duel-fighter-first .duel-prop { right: -26%; }
.duel-fighter-second .duel-prop { left: -26%; transform: scaleX(-1); }
.fate-backfired .duel-prop { rotate: 160deg; bottom: 10%; }
.duel-fighter-second.fate-backfired .duel-prop { rotate: -160deg; }
.duel-head { position: absolute; left: 50%; width: 78%; height: auto; translate: -50% 0; }
.duel-head-halo { top: -34%; width: 64%; }
.duel-head-stars { top: -40%; width: 70%; }
.duel-head-huh { top: -24%; left: auto; right: -30%; width: 44%; translate: none; }
.duel-fighter-second .duel-head-huh { right: auto; left: -30%; }
.duel-head-soot { top: -30%; width: 58%; }
.duel-fighter:is(.fate-knocked, .fate-gunfight) .crew-figure-avatar { rotate: -74deg; }
.duel-fighter-second:is(.fate-knocked, .fate-gunfight) .crew-figure-avatar { rotate: 74deg; }
.duel-fighter.fate-backfired .crew-figure-avatar { filter: brightness(0.62) saturate(0.4); }
.duel-fx { position: absolute; z-index: 2; top: calc(1.1rem + var(--duel-figure) / 2); left: 50%; width: clamp(9rem, 34vw, 21rem); height: auto; translate: -50% -50%; filter: drop-shadow(0 0.5rem 0.8rem rgba(0, 0, 0, 0.5)); pointer-events: none; overflow: visible; }

.bus-route { display: grid; width: min(100%, 58rem); min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 1.1rem; }
.bus-route label { color: var(--text-secondary); font-size: var(--type-caption); font-weight: 800; white-space: nowrap; }
.bus-route label strong { color: var(--text-primary); font-family: var(--font-number); }
.bus-stops { position: relative; display: flex; min-width: 0; align-items: center; justify-content: space-between; }
.bus-stops::before { position: absolute; top: 50%; right: 0; left: 0; height: 3px; background: var(--bus-driver-track); content: ""; transform: translateY(-50%); }
.bus-stops i { position: relative; width: 0.95rem; height: 0.95rem; border: 3px solid rgba(245, 241, 232, 0.4); border-radius: 50%; background: var(--surface-canvas); }
.bus-stops i.is-reached { border-color: var(--progress); background: var(--progress); }
.bus-stops i.is-bus { width: 1.6rem; height: 1.6rem; box-shadow: 0 0 0 0.3rem rgba(201, 242, 74, 0.25); }
.bus-table { display: grid; width: min(100%, 58rem); min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 3.5rem); text-align: left; }
.bus-cards { display: grid; min-width: 0; justify-items: center; gap: 0.6rem; }
.bus-card-stack { display: flex; align-items: flex-start; gap: 0.7rem; }
.bus-playcard { position: relative; display: grid; width: clamp(6.2rem, 14vw, 9.5rem); aspect-ratio: 0.7; place-items: center; border-radius: 0.9rem; color: var(--ink); background: var(--bus-driver-card); box-shadow: 0 0.35rem 0 #cfc5b3, 0 1.3rem 2.2rem rgba(0, 0, 0, 0.42); transform: rotate(-1.5deg); }
.bus-playcard > strong { font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; }
.bus-playcard-red { color: var(--bus-driver-red); }
.bus-playcard-corner { position: absolute; top: 0.45rem; left: 0.55rem; display: grid; justify-items: center; font-size: 1rem; font-weight: 900; line-height: 1; }
.bus-playcard-corner i { font-size: 0.8rem; font-style: normal; }
.bus-playcard-corner.is-mirrored { top: auto; right: 0.55rem; bottom: 0.45rem; left: auto; transform: rotate(180deg); }
.bus-playcard-back { align-content: center; gap: 0.35rem; color: #f5f1e8; background: repeating-linear-gradient(135deg, #a93a2e 0 0.5rem, #b9342c 0.5rem 1rem); box-shadow: 0 0.35rem 0 #6f211b, 0 1.3rem 2.2rem rgba(0, 0, 0, 0.42); }
.bus-playcard-mark { display: block; width: 52%; height: auto; }
.bus-playcard-back small { font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.bus-playcard.is-hit { outline: 3px solid var(--progress); outline-offset: 3px; }
.bus-missed { display: grid; justify-items: center; gap: 0.4rem; }
.bus-missed .bus-playcard { outline: 3px solid var(--danger); outline-offset: 3px; transform: rotate(5deg); }
.bus-missed > span { color: var(--danger); font-size: var(--type-caption); font-weight: 850; }
.bus-last { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); text-align: center; }
.bus-last > span { margin-right: 0.4rem; padding: 0.12rem 0.5rem; border-radius: 999px; color: var(--ink); background: var(--surface-hover); font-weight: 850; }
.bus-last.is-correct > span { background: var(--progress); }
.bus-last.is-wrong > span { background: var(--danger); }
.bus-last.is-neutral > span { color: var(--text-primary); }
.bus-turn { display: grid; min-width: 0; justify-items: start; gap: 0.6rem; }
.bus-driver { --figure: 3.4rem; display: grid; width: auto; grid-template-columns: auto minmax(0, 1fr); justify-items: start; column-gap: 0.65rem; text-align: left; }
.bus-driver .crew-figure-avatar { grid-row: 1 / span 2; }
.bus-driver .crew-figure-name { align-self: end; }
.bus-driver .crew-figure-tag { align-self: start; color: var(--brand-text); }
.bus-turn h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(2rem, 5.4vw, 4rem); }
.bus-status { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); line-height: 1.45; }
.bus-answer-fieldset { width: 100%; min-width: 0; }
.bus-answer-fieldset > legend { margin-bottom: 0.45rem; color: var(--text-secondary); font-size: var(--type-small); }
.bus-answers { min-width: 0; }

.choice-pair { display: grid; width: min(100%, 30rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.choice-tile,
.bus-answer { min-width: 8rem; min-height: 3.6rem; padding: 0.6rem 1.4rem; border: 0; border-radius: 1rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 0.35rem 0 #cfc5b3, 0 1rem 1.8rem rgba(0, 0, 0, 0.3); font: inherit; font-size: 1.1rem; font-weight: 900; cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease-standard), box-shadow var(--motion-feedback) var(--motion-ease-standard); }
.bus-answer-red { color: var(--bus-driver-red); }
.choice-tile.is-accent { color: var(--paper-accent); }
.choice-pair .choice-tile { min-width: 0; padding-inline: 0.6rem; }
.choice-tile:hover:not(:disabled),
.bus-answer:hover:not(:disabled) { transform: translateY(-0.2rem); }
.choice-tile:active:not(:disabled),
.bus-answer:active:not(:disabled) { box-shadow: 0 0.1rem 0 #cfc5b3; transform: translateY(0.3rem); }
.choice-tile:disabled,
.bus-answer:disabled { cursor: progress; opacity: 0.65; }
.bus-wait { display: flex; gap: 0.4rem; }
.bus-answer-area { width: min(100%, 30rem); }
.bus-answers.choice-pair { width: 100%; }
.bus-answers[data-choice-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .bus-answers[data-choice-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bus-wait span { width: 0.6rem; height: 0.6rem; border: 2px solid var(--text-secondary); border-radius: 50%; }
.bus-wait span:nth-child(2) { border-color: var(--progress); background: var(--progress); }
.bus-crew { display: flex; width: min(100%, 58rem); min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0.8rem 0.4rem; margin: 0; padding: 1rem 0 0; border-top: 1px dashed var(--border-subtle); list-style: none; }
.bus-rider { --figure: 3rem; width: calc(var(--figure) + 3.2rem); }

@media (max-width: 560px) {
  .bus-crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 0.7rem 0.25rem; }
  .bus-rider { --figure: 2.7rem; width: 100%; }
}
.bus-rider.is-current .crew-figure-avatar { box-shadow: 0 0 0 0.2rem var(--surface-canvas), 0 0 0 0.4rem var(--brand-primary); }
.bus-mistakes i.is-filled { border-color: var(--danger); background: var(--danger); box-shadow: none; }

.mine-table { display: grid; width: min(100%, 62rem); min-width: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brief grid" "aside grid"; align-items: start; gap: 1rem clamp(1rem, 4vw, 3rem); }
.mine-brief { display: grid; min-width: 0; grid-area: brief; justify-items: center; gap: 0.9rem; }
.mine-aside { display: grid; min-width: 0; grid-area: aside; justify-items: center; gap: 0.8rem; }
.mine-picks { display: flex; gap: 0.5rem; }
.mine-picks span { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 2px dashed var(--border-strong); border-radius: 0.65rem; color: var(--text-secondary); font-family: var(--font-number); font-weight: 900; }
.mine-picks span.is-filled { border-style: solid; border-color: var(--progress); color: var(--ink); background: var(--progress); }
.mine-grid { display: grid; width: clamp(17rem, 36vw, 30rem); min-width: 0; grid-area: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; padding: 0.75rem; border-radius: 1.5rem; background: var(--minefield-board); box-shadow: inset 0 0 0 2px rgba(245, 241, 232, 0.08), 0 1.6rem 3rem rgba(0, 0, 0, 0.42); }
.mine-cell { display: grid; min-width: 0; aspect-ratio: 1; place-items: center; align-content: center; gap: 0.12rem; padding: 0.2rem; border: 3px solid var(--ink); border-radius: 0.9rem; color: var(--ink); background: var(--minefield-flap); box-shadow: 0 0.3rem 0 rgba(0, 0, 0, 0.42); font: inherit; cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease-standard), background var(--motion-feedback) var(--motion-ease-standard); }
.mine-cell:hover:not(:disabled) { background: #d8ab6c; transform: translateY(-0.2rem); }
.mine-cell:active:not(:disabled) { box-shadow: 0 0.05rem 0 rgba(0, 0, 0, 0.42); transform: translateY(0.2rem); }
.mine-cell:disabled { cursor: default; }

.mine-cell-hidden { box-shadow: inset 0 0 0 0.3rem rgba(255, 247, 232, 0.22), 0 0.3rem 0 rgba(0, 0, 0, 0.42); }
.mine-cell-hidden:nth-child(3n + 1) { rotate: -1.5deg; }
.mine-cell-hidden:nth-child(4n + 2) { rotate: 1.2deg; }
.mine-cell-hidden:disabled { opacity: 0.5; box-shadow: none; }
.mine-cell-art { width: 62%; height: auto; }
.mine-cell-label { max-width: 100%; overflow-wrap: anywhere; font-size: var(--type-micro); font-weight: 850; line-height: 1.1; }
.mine-cell-beer { color: var(--ink); background: var(--minefield-beer); }
.mine-cell-double-beer { color: var(--ink); background: var(--minefield-double); }
.mine-cell-bomb { color: var(--ink); background: var(--minefield-bomb); }
.mine-legend { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; color: var(--text-secondary); font-size: var(--type-caption); }
.mine-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.mine-legend svg,
.mine-tally svg { width: 1.35rem; height: auto; flex: 0 0 auto; }
.mine-handout { min-width: 0; }
.mine-handout > legend { margin: 0 auto 0.2rem; font-weight: 850; text-align: center; }
.mine-handout > p { margin: 0 0 0.9rem; color: var(--text-secondary); font-size: var(--type-caption); }
.mine-targets { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0.9rem 0.3rem; }
.mine-target { --figure: clamp(3.4rem, 6vw, 4.6rem); padding: 0.45rem 0.2rem 0.5rem; }
.mine-note svg { width: 2rem; height: auto; flex: 0 0 auto; }
.mine-trail { display: grid; width: 100%; min-width: 0; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.mine-trail li { display: grid; min-width: 0; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; gap: 0.4rem; text-align: left; }
.mine-trail-avatar { display: grid; width: 1.9rem; height: 1.9rem; border-radius: 50%; }
.mine-trail-beer svg { display: block; width: 1.5rem; height: auto; }
.mine-trail-copy { display: grid; min-width: 0; }
.mine-trail-copy strong { overflow-wrap: anywhere; font-size: var(--type-small); }
.mine-trail-copy small { overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-micro); }
.mine-private { display: flex; max-width: 24rem; grid-area: grid; align-items: center; gap: 0.9rem; padding: 1.2rem; border: 2px dashed var(--border-strong); border-radius: 1.2rem; text-align: left; }
.mine-private svg { width: 3rem; height: auto; flex: 0 0 auto; }
.mine-private p { margin: 0.2rem 0 0; color: var(--text-secondary); font-size: var(--type-small); }
.mine-ledger { display: grid; width: min(100%, 62rem); min-width: 0; gap: 0.9rem; padding-top: 1rem; border-top: 1px dashed var(--border-subtle); }
.mine-ledger h3 { margin: 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.mine-ledger ul { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1.1rem 0.6rem; margin: 0; padding: 0; list-style: none; }
.mine-settled { --figure: clamp(3.4rem, 6vw, 4.6rem); width: calc(var(--figure) + 6.5rem); }

.mine-ledger ul:has(> .is-row) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.55rem 1.4rem; }
.mine-settled.is-row { --figure: 2.6rem; width: 100%; }
.mine-settled.is-row .mine-tallies { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.7rem; }
.mine-settled.is-row .mine-tally { grid-template-columns: auto auto; }
.mine-tallies { display: grid; min-width: 0; justify-items: start; gap: 0.2rem; text-align: left; }
.mine-tally { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.35rem; font-size: var(--type-caption); }
.mine-trail.is-inline { display: flex; width: auto; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
.mine-trail.is-inline li { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-secondary); font-size: var(--type-micro); }
.mine-trail.is-inline .mine-trail-avatar { width: 1.3rem; height: 1.3rem; }

.mine-grid.is-picks { width: auto; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 4.6rem; padding: 0.5rem; }
.mine-grid.is-picks .mine-cell-label { overflow-wrap: normal; font-size: 0.62rem; }
.mine-tally svg { grid-row: 1 / span 2; }
.mine-tally small { color: var(--text-secondary); font-size: var(--type-micro); }

.mine-tally.is-zero,
.mine-tally.is-zero strong { color: var(--text-secondary); font-weight: 700; }
.mine-tally.is-zero svg { opacity: 0.55; }

.level-gauge { --level-angle: 90deg; display: flex; width: min(100%, 44rem); min-width: 0; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.level-column { --level: 0; display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "avatar name count" "avatar bar count" "avatar result count"; align-items: center; justify-items: start; gap: 0.3rem 0.75rem; text-align: left; }
.level-column[data-level="1"] { --level: 1; }
.level-column[data-level="2"] { --level: 2; }
.level-column[data-level="3"] { --level: 3; }
.level-column[data-level="4"] { --level: 4; }
.level-column[data-level="5"] { --level: 5; }
.level-column[data-level="6"] { --level: 6; }
.level-column[data-level="7"] { --level: 7; }
.level-column[data-level="8"] { --level: 8; }
.level-column[data-level="9"] { --level: 9; }
.level-column[data-level="10"] { --level: 10; }
.level-person { --figure: 3rem; display: contents; }
.level-person .crew-figure-avatar { grid-area: avatar; }
.level-person .crew-figure-name { grid-area: name; }
.level-result { display: inline-flex; grid-area: result; align-items: center; gap: 0.25rem; }
.level-result .saufaffe-icon { width: 0.9rem; height: 0.9rem; }
.level-count { display: grid; grid-area: count; justify-items: end; margin: 0; text-align: right; }
.level-count strong { font-size: 1.6rem; line-height: 1; }
.level-count span { max-width: 5.2rem; color: var(--text-secondary); font-size: var(--type-micro); }
.level-pillar { width: calc(4% + var(--level) * 9.6%); height: 1.2rem; grid-area: bar; border-radius: 0 0.6rem 0.6rem 0; background: linear-gradient(var(--level-angle), #3b6f88, #79c2e0); box-shadow: -0.2rem 0 0 rgba(255, 255, 255, 0.25) inset; transform-origin: 0 50%; }
.level-column.is-penalized .level-pillar { background: linear-gradient(var(--level-angle), #a8401f, var(--brand-primary)); }
.level-column.is-penalized .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.45rem var(--brand-primary), 0 1rem 1.8rem rgba(201, 242, 74, 0.35); }
@media (min-width: 641px) {
  .level-gauge:not(.is-dense) { --level-angle: 0deg; width: min(100%, 60rem); min-height: 17rem; flex-direction: row; align-items: flex-end; justify-content: center; gap: clamp(0.4rem, 2vw, 1.5rem); }
  .level-gauge:not(.is-dense) .level-column { flex: 0 1 8.5rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; justify-items: center; gap: 0.35rem; text-align: center; }
  .level-gauge:not(.is-dense) .level-person { --figure: clamp(3.4rem, 7vw, 5.2rem); display: grid; width: 100%; }
  .level-gauge:not(.is-dense) :is(.crew-figure-avatar, .crew-figure-name, .level-result, .level-count, .level-pillar) { grid-area: auto; }
  .level-gauge:not(.is-dense) .level-count { order: 2; justify-items: center; text-align: center; }
  .level-gauge:not(.is-dense) .level-count span { max-width: none; }
  .level-gauge:not(.is-dense) .level-pillar { width: min(100%, 5rem); height: calc(0.6rem + var(--level) * 0.85rem); order: 3; border-radius: 0.6rem 0.6rem 0 0; box-shadow: 0 -0.2rem 0 rgba(255, 255, 255, 0.25) inset; transform-origin: 50% 100%; }
}
.level-action { display: grid; justify-items: center; gap: 0.5rem; }
.level-action small { color: var(--text-secondary); font-size: var(--type-caption); }

.decree-sheet { position: relative; display: grid; width: min(100%, 44rem); min-width: 0; justify-items: center; gap: 0.6rem; padding: clamp(1.5rem, 4vw, 2.4rem) clamp(1.1rem, 4vw, 2.4rem) 1.2rem; border-radius: 0.6rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 1.4rem 2.6rem rgba(0, 0, 0, 0.42); transform: rotate(-0.8deg); }
.decree-sheet::before { position: absolute; top: -0.6rem; left: 50%; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0.2rem 0.35rem rgba(0, 0, 0, 0.45); content: ""; transform: translateX(-50%); }
.decree-seal-art { display: block; width: 3rem; height: auto; }
.decree-kind { margin: 0; color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.decree-sheet h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.5rem, 3.8vw, 2.7rem); text-wrap: balance; }
.decree-meta { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.5rem; margin: 0.5rem 0 0; padding-top: 0.7rem; border-top: 1px dashed var(--paper-rule); }
.decree-meta > div { display: flex; min-width: 0; gap: 0.4rem; font-size: var(--type-caption); }
.decree-meta dt { color: var(--paper-ink-soft); }
.decree-meta dd { margin: 0; overflow-wrap: anywhere; font-weight: 850; }
.decree-stamp { position: absolute; top: 1rem; right: 0.9rem; padding: 0.2rem 0.7rem; border: 3px solid #b3261e; border-radius: 0.4rem; color: #b3261e; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-3deg); }
.decree-action { display: grid; width: min(100%, 44rem); min-width: 0; justify-items: center; gap: 0.5rem; }
.decree-action small { color: var(--text-secondary); font-size: var(--type-caption); }
.decree-form.game-form { width: 100%; grid-template-columns: minmax(0, 2fr) minmax(6rem, 0.6fr) auto; }

.tod-spotlight { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.5rem; }
.tod-spotlight .scene-prompt { text-align: left; }
.tod-target { --figure: clamp(4.4rem, 9vw, 6.6rem); }
.tod-target .crew-figure-avatar { box-shadow: 0 0 0 0.26rem var(--surface-canvas), 0 0 0 0.5rem var(--chip-gold), 0 0 2.4rem rgba(246, 200, 95, 0.45); }
.tod-target .crew-figure-name { display: none; }
.tod-stage { display: grid; width: min(100%, 54rem); min-width: 0; justify-items: center; gap: 1.1rem; }
.tod-cards { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(0.7rem, 3vw, 2rem); }
.tod-card { position: relative; display: grid; min-width: 0; min-height: clamp(11rem, 30vh, 16rem); justify-items: center; align-content: start; gap: 0.35rem; padding: 1.2rem 1rem; border: 0; border-radius: 1.3rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 0.45rem 0 #cfc5b3, 0 1.4rem 2.4rem rgba(0, 0, 0, 0.38); font: inherit; text-align: center; transition: transform var(--motion-feedback) var(--motion-ease-standard), box-shadow var(--motion-feedback) var(--motion-ease-standard); }
.tod-card-truth { transform: rotate(-2deg); }
.tod-card-dare { transform: rotate(2deg); }
.tod-card-art svg { display: block; width: clamp(3rem, 8vw, 4.6rem); height: auto; }
.tod-card small { color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.tod-card strong { overflow-wrap: anywhere; font-size: clamp(1.4rem, 3.4vw, 2.2rem); }
.tod-card-prompt { overflow-wrap: anywhere; line-height: 1.35; }
.tod-card b { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: auto; color: var(--paper-accent); font-size: var(--type-small); }
.tod-card b .saufaffe-icon { width: 1rem; height: 1rem; }
button.tod-card { cursor: pointer; }
button.tod-card-truth:hover:not(:disabled) { transform: translateY(-0.4rem) rotate(-2deg); }
button.tod-card-dare:hover:not(:disabled) { transform: translateY(-0.4rem) rotate(2deg); }
button.tod-card:active:not(:disabled) { box-shadow: 0 0.1rem 0 #cfc5b3; }
button.tod-card:disabled { cursor: progress; opacity: 0.7; }

.tod-card.is-hidden { color: #f5f1e8; background: repeating-linear-gradient(135deg, #a93a2e 0 0.7rem, #b9342c 0.7rem 1.4rem); box-shadow: 0 0.45rem 0 #6e1f18, 0 1.4rem 2.4rem rgba(0, 0, 0, 0.38); }
.tod-card-dare.is-hidden { background: repeating-linear-gradient(135deg, #96401f 0 0.7rem, #a34923 0.7rem 1.4rem); box-shadow: 0 0.45rem 0 #6d2f17, 0 1.4rem 2.4rem rgba(0, 0, 0, 0.38); }
.tod-card.is-hidden small,
.tod-card.is-hidden b { color: #f5f1e8; }
.tod-card.is-chosen { outline: 4px solid var(--progress); outline-offset: 4px; transform: none; }
.tod-card.is-closed { min-height: 0; align-self: center; opacity: 0.62; box-shadow: none; transform: scale(0.9) rotate(3deg); }
.tod-card.is-closed :is(small, .tod-card-prompt) { color: var(--ink); }

.tod-cards:has(> .tod-card.is-closed) { display: flex; align-items: stretch; }

.tod-cards:has(> .tod-card.is-chosen) { padding-inline: 0.5rem; }
.tod-cards:has(> .tod-card.is-closed) > .tod-card:not(.is-closed) { flex: 1 1 auto; }
.tod-cards > .tod-card.is-closed { display: flex; width: 2.9rem; flex: none; align-self: stretch; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 0.3rem; transform: none; writing-mode: vertical-rl; }
.tod-cards > .tod-card.is-closed .tod-card-art { display: none; }
.tod-cards > .tod-card.is-closed strong { font-size: var(--type-body); }
.tod-action { display: grid; width: 100%; min-width: 0; justify-items: center; }
.tod-verdicts { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.tod-verdict { display: grid; min-width: min(100%, 14rem); min-height: 4rem; grid-template-columns: auto minmax(0, max-content); align-items: center; justify-content: center; column-gap: 0.6rem; padding: 0.6rem 1.2rem; border: 0; border-radius: 999px; color: var(--ink); background: var(--paper-material); box-shadow: 0 0.35rem 0 #cfc5b3, 0 1rem 1.8rem rgba(0, 0, 0, 0.3); font: inherit; text-align: left; cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease-standard), box-shadow var(--motion-feedback) var(--motion-ease-standard); }
.tod-verdict > span { grid-row: 1; }
.tod-verdict > span :is(svg, .saufaffe-icon) { display: block; width: 1.7rem; height: auto; }
.tod-verdict strong { overflow-wrap: anywhere; }
.tod-verdict small { overflow-wrap: anywhere; color: var(--paper-ink-soft); font-size: var(--type-caption); }
.tod-verdict-fulfilled { background: #e3f3b4; }
.tod-verdict-not-fulfilled,
.tod-verdict-self-drink { background: #ffd9c9; }
.tod-verdict:hover:not(:disabled) { transform: translateY(-0.2rem); }
.tod-verdict:active:not(:disabled) { box-shadow: 0 0.1rem 0 #cfc5b3; transform: translateY(0.3rem); }
.tod-verdict:disabled { cursor: progress; opacity: 0.65; }
.tod-threshold { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.6rem; margin: 0; color: var(--text-secondary); font-size: var(--type-caption); }
.tod-threshold strong { color: var(--text-primary); }
.tod-resolution { display: grid; justify-items: center; gap: 0.8rem; }
.tod-result { display: grid; justify-items: center; gap: 0.1rem; margin: 0; }
.tod-result .saufaffe-icon { width: 1.7rem; height: 1.7rem; color: var(--progress); }
.tod-result small { color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.tod-result strong { color: var(--progress); font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1; }
.tod-resolution.is-drinking .tod-result strong,
.tod-resolution.is-drinking .tod-result .saufaffe-icon { color: var(--brand-text); }
.tod-votes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.2rem; margin: 0; }
.tod-votes > div { display: grid; justify-items: center; gap: 0.2rem; }
.tod-votes dt { color: var(--text-secondary); font-size: var(--type-caption); }
.tod-votes dd { margin: 0; font-size: 1.4rem; font-weight: 900; }
.tod-votes-not .stage-tokens i.is-filled { border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: none; }
.tod-resolution-copy { margin: 0; color: var(--text-secondary); font-size: var(--type-small); }

.easel-scene { justify-items: stretch; padding-top: 0.25rem; text-align: left; }
.easel-layout { display: grid; min-width: 0; grid-template-columns: minmax(0, 2.2fr) minmax(15rem, 1fr); align-items: start; gap: clamp(0.8rem, 2.5vw, 2rem); }
.easel-board { position: relative; display: grid; min-width: 0; gap: 0.6rem; padding-top: 1.7rem; }
.easel-tag { position: absolute; z-index: 2; top: 0; left: 1rem; max-width: calc(100% - 2rem); padding: 0.45rem 0.9rem 0.5rem; border-radius: 0.4rem; color: var(--ink); background: #fff3c4; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.36); transform: rotate(-2deg); }
.easel-tag p { margin: 0; color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.easel-tag h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.2rem, 2.6vw, 1.9rem); }
.easel-tag.is-secret h2 { color: var(--paper-ink-soft); font-size: 1rem; letter-spacing: 0; }

.easel-tag.is-held .easel-word { display: none; }
.easel-tag.is-held.is-revealed .easel-word { display: inline; }
.easel-tag.is-held.is-revealed .easel-word-hidden { display: none; }
.easel-word-hold { margin-top: 0.3rem; color: var(--ink); border-color: var(--paper-ink-soft); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.easel-canvas { display: grid; min-width: 0; overflow: hidden; border-radius: 1rem; background: var(--paper-material); box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, 0.42); }

.easel-surface { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: #fffdf8; touch-action: auto; }
.easel-drawing .easel-surface { cursor: crosshair; touch-action: none; user-select: none; }

.easel-tools { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.55rem 0.7rem; background: #f1eadb; }
.easel-palette,
.easel-brushes { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; border: 0; }
.easel-paint,
.easel-brush { position: relative; display: grid; width: var(--target-default); height: var(--target-default); place-items: center; border-radius: 50%; cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease-standard); }
.easel-paint input,
.easel-brush input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.easel-paint::before { width: 72%; height: 72%; border: 3px solid var(--ink); border-radius: 46% 54% 50% 48%; background: var(--paint); content: ""; }
.easel-brush::before { width: var(--brush); height: var(--brush); border-radius: 50%; background: var(--ink); content: ""; }
.easel-paint:has(:checked),
.easel-brush:has(:checked) { box-shadow: inset 0 0 0 3px var(--ink); transform: scale(1.08); }
.easel-paint:has(:focus-visible),
.easel-brush:has(:focus-visible) { outline: 3px solid var(--field-paper-focus); outline-offset: 2px; }
.easel-color-0 { --paint: #1d1611; }
.easel-color-1 { --paint: #ff6b35; }
.easel-color-2 { --paint: #e0a800; }
.easel-color-3 { --paint: #2f9e5b; }
.easel-color-4 { --paint: #2b6cd4; }
.easel-color-5 { --paint: #e0428f; }
.easel-width-0 { --brush: 0.35rem; }
.easel-width-1 { --brush: 0.7rem; }
.easel-width-2 { --brush: 1.25rem; }
.easel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (min-width: 861px) {
  .easel-canvas { width: min(100%, calc((100svh - 27rem) * 4 / 3)); min-width: min(100%, 26rem); }
}
.easel-credits { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.easel-credits p { flex-basis: 100%; margin: 0; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 850; }
.easel-credits .button { display: inline-flex; align-items: center; gap: 0.4rem; }
.easel-side { display: grid; min-width: 0; align-content: start; gap: 0.9rem; }
.easel-artist { display: flex; min-width: 0; align-items: center; gap: 0.5rem; margin: 0; overflow-wrap: anywhere; font-size: var(--type-small); font-weight: 850; }
.easel-artist-avatar,
.easel-miss-avatar,
.whoami-said-avatar { display: grid; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; border-radius: 50%; }
.easel-interaction { display: grid; min-width: 0; gap: 0.7rem; }
.easel-interaction .stage-moment,
.whoami-desk .stage-moment { justify-content: start; justify-items: start; text-align: left; }
.easel-interaction .stage-moment-progress,
.whoami-desk .stage-moment-progress { justify-content: flex-start; }
.easel-form.game-form,
.whoami-form.game-form,
.faker-form.game-form { width: 100%; grid-template-columns: minmax(0, 1fr) auto; }

.stage-entry.game-form { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; column-gap: 0.8rem; }
.stage-entry-speaker { display: grid; align-self: end; }
.stage-entry-avatar { display: grid; width: 3rem; height: 3rem; border-radius: 50%; }
.stage-entry label { position: relative; padding: 0.5rem 0.65rem 0.65rem; border: 3px solid var(--ink); border-radius: 1.2rem 1.2rem 1.2rem 0.35rem; color: var(--paper-ink-soft); background: var(--paper-material); }
.scene .stage-entry input { min-height: 2.6rem; padding: 0.3rem 0.15rem; border-width: 0 0 2px; border-style: dashed; border-radius: 0; text-overflow: ellipsis; }
.stage-entry label::before,
.stage-entry label::after { position: absolute; bottom: 0.4rem; width: 0; height: 0; border-style: solid; content: ""; }
.stage-entry label::before { right: 100%; border-width: 0.55rem 0.9rem 0.55rem 0; border-color: transparent var(--ink) transparent transparent; }
.stage-entry label::after { right: calc(100% - 0.25rem); bottom: 0.55rem; border-width: 0.4rem 0.65rem 0.4rem 0; border-color: transparent var(--paper-material) transparent transparent; }
.game-form-help { color: var(--paper-ink-soft); font-size: var(--type-caption); font-weight: 650; line-height: 1.3; }
.stage-entry-secondary { display: inline-flex; min-height: var(--target-compact); align-items: center; justify-content: center; gap: 0.35rem; padding: 0.25rem 0.75rem; border: 0; border-radius: 999px; color: var(--danger); background: transparent; font: inherit; font-size: var(--type-small); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
.stage-entry-secondary:hover:not(:disabled) { background: rgba(255, 123, 110, 0.12); }
.easel-feed { display: grid; min-width: 0; gap: 0.5rem; }
.easel-feed-title { display: flex; justify-content: space-between; gap: 0.6rem; margin: 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.easel-feed-title b { color: var(--text-primary); }
.easel-feed-title.is-hits { color: var(--progress); }
.easel-hits { display: grid; min-width: 0; gap: 0.4rem; margin: 0 0 0.3rem; padding: 0; list-style: none; }

.easel-misses { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.easel-misses li { display: inline-flex; max-width: 100%; min-width: 0; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem 0.2rem 0.2rem; border-radius: 999px; background: var(--surface-raised); }
.easel-misses .easel-miss-avatar { width: 1.6rem; height: 1.6rem; }
.easel-misses li > span { color: var(--text-secondary); font-size: var(--type-micro); font-weight: 800; white-space: nowrap; }
.easel-misses strong { min-width: 0; overflow-wrap: anywhere; font-size: var(--type-small); }
.easel-hits li { display: flex; min-width: 0; align-items: center; gap: 0.4rem; overflow-wrap: anywhere; color: var(--progress); font-size: var(--type-small); font-weight: 850; }
.easel-hits .saufaffe-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.easel-results { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1rem 0.4rem; margin: 0; padding: 1rem 0 0; border-top: 1px dashed var(--border-subtle); list-style: none; text-align: center; }
.easel-result { --figure: clamp(3.2rem, 6vw, 4.4rem); }
.easel-result .crew-badge { padding-inline: 0.35rem; }

.chain-stage { display: grid; width: min(100%, 60rem); min-width: 0; justify-items: center; gap: 1rem; }
.chain-action-area { display: grid; width: 100%; min-width: 0; justify-items: center; }
.chain-actions { display: grid; width: min(100%, 34rem); min-width: 0; justify-items: center; gap: 0.35rem; }

.hot-seat-scene[data-hot-seat-form="ranking"]:not(.quiz-resolved) .quiz-tiles { width: min(100%, 36rem); grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.hot-seat-scene[data-hot-seat-form="ranking"]:not(.quiz-resolved) .quiz-tile { grid-template-columns: auto minmax(0, 1fr); min-height: 3.4rem; padding: 0.45rem 0.9rem 0.45rem 0.55rem; gap: 0.7rem; }
.hot-seat-scene[data-hot-seat-form="ranking"]:not(.quiz-resolved) .quiz-letter { width: 2.3rem; height: 2.3rem; font-size: 1.15rem; }

.hot-seat-submit { position: sticky; z-index: 3; bottom: 0.75rem; padding: 0.4rem; border-radius: 1.2rem; background: color-mix(in srgb, var(--surface-canvas) 88%, transparent); }

.hot-seat-scale { display: grid; width: min(100%, 24rem); grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.hot-seat-scale .button { min-width: 0; padding-inline: 0.2rem; }

.hot-seat-scene.quiz-resolved .quiz-backers { gap: 0.4rem 0.15rem; margin-top: 0.3rem; padding-top: 0.45rem; }
.hot-seat-scene.quiz-resolved .quiz-backer { --figure: 2.2rem; width: calc(var(--figure) + 2.2rem); }
.hot-seat-scene.quiz-resolved .quiz-tile { padding: 0.6rem 0.75rem 0.65rem; }
.hot-seat-scene[data-hot-seat-form="choice"].quiz-resolved .quiz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hot-seat-scene[data-hot-seat-form="choice"].quiz-resolved .quiz-tile { grid-template-columns: auto minmax(0, 1fr); }
.hot-seat-scene[data-hot-seat-form="choice"].quiz-resolved .quiz-tile-copy { grid-column: 1 / -1; grid-row: 2; }
.hot-seat-scene[data-hot-seat-form="choice"].quiz-resolved .quiz-tile-copy :is(strong, small) { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.hot-seat-scene[data-hot-seat-form="choice"].quiz-resolved .quiz-tile-check { grid-column: 2; grid-row: 1; justify-self: end; }
.hot-seat-ruler { width: min(100%, 30rem); }

.hot-seat-scene[data-hot-seat-form="scale"].quiz-resolved .quiz-tiles { width: min(100%, 40rem); grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.hot-seat-scene[data-hot-seat-form="scale"].quiz-resolved .quiz-tile { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 0.4rem 0.6rem 0.4rem 0.45rem; gap: 0.2rem 0.6rem; }
.hot-seat-scene[data-hot-seat-form="scale"].quiz-resolved .quiz-backers { grid-column: 3; grid-row: 1; justify-content: flex-end; margin: 0; padding: 0; border: 0; }
.hot-seat-scene[data-hot-seat-form="scale"].quiz-resolved .quiz-tile-check { grid-column: 4; grid-row: 1; }
.hot-seat-scale-ends { display: flex; width: min(100%, 22rem); justify-content: space-between; gap: 1rem; font-size: var(--type-small); font-weight: 750; }

.chain-give-up { min-height: var(--target-compact); }
.chain-give-up-art { width: 1.25rem; height: 1.25rem; }
.chain-give-up small { font-size: var(--type-caption); font-weight: 650; }
.chain-links { display: grid; width: 100%; min-width: 0; gap: 0.7rem; }
.chain-links h3 { margin: 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.chain-links h3 span { margin-left: 0.5rem; color: var(--text-primary); }
.chain-list { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.6rem; margin: 0; padding: 0; list-style: none; }

.chain-link { position: relative; display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: 0.55rem; padding: 0.4rem 0.9rem 0.4rem 0.45rem; border: 4px solid var(--chain-ring); border-radius: 999px; color: var(--ink); background: var(--paper-material); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink); text-align: left; }
.chain-link + .chain-link::before { position: absolute; top: 50%; right: calc(100% + 2px); width: 1.6rem; height: 0.7rem; border: 3px solid var(--ink); border-radius: 999px; background: var(--chain-ring); content: ""; transform: translateY(-50%); }
.chain-number { display: grid; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--paper-material); background: var(--ink); font-family: var(--font-number); font-size: var(--type-micro); font-weight: 900; }
.chain-word { display: grid; min-width: 0; }
.chain-word strong { overflow-wrap: anywhere; font-size: 1.05rem; line-height: 1.15; }
.chain-word small { overflow-wrap: anywhere; color: var(--paper-ink-soft); font-size: var(--type-micro); }
.chain-link b { padding: 0.1rem 0.45rem; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--progress); font-size: var(--type-micro); white-space: nowrap; }
.chain-link.is-latest { border-color: var(--progress); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink), 0 0 1.2rem rgba(201, 242, 74, 0.35); }
.chain-link.is-duplicate-match { border-color: var(--brand-primary); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink), 0 0 1.2rem rgba(201, 242, 74, 0.4); }
.chain-link.is-duplicate-match b { background: var(--brand-primary); }
.chain-empty { display: flex; align-items: center; justify-content: center; gap: 0.8rem; color: var(--text-secondary); text-align: left; }
.chain-empty svg { width: 3rem; height: auto; flex: 0 0 auto; }
.chain-order { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0.8rem 0.3rem; margin: 0; padding: 1rem 0 0; border-top: 1px dashed var(--border-subtle); list-style: none; }
.chain-player { --figure: clamp(3rem, 6vw, 4.2rem); }
.chain-player.is-current { --figure: clamp(3.8rem, 7.5vw, 5.2rem); }
.chain-player.is-current .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.45rem var(--brand-primary), 0 1rem 1.8rem rgba(201, 242, 74, 0.35); }
.chain-player.is-current .crew-figure-tag { color: var(--brand-text); }
.chain-player.is-loser .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.45rem var(--danger); }
.chain-break { display: flex; min-width: 0; align-items: center; gap: 0.8rem; text-align: left; }
.chain-break > span { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--ink); background: var(--progress); }
.chain-break.has-loser > span { background: var(--brand-primary); }
.chain-break .saufaffe-icon { width: 1.4rem; height: 1.4rem; }
.chain-break p { margin: 0; color: var(--text-secondary); font-size: var(--type-caption); }
.chain-break strong { display: block; overflow-wrap: anywhere; font-size: clamp(1.3rem, 3vw, 2rem); }
.chain-break small { color: var(--text-secondary); font-size: var(--type-caption); }

.faker-briefs { display: grid; width: min(100%, 48rem); min-width: 0; gap: 0.9rem; }
.faker-briefs.is-pair { width: min(100%, 60rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faker-brief { position: relative; display: grid; min-width: 0; justify-items: center; align-content: start; gap: 0.3rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 0.6rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 1.2rem 2.2rem rgba(0, 0, 0, 0.38); }
.faker-brief-mark .game-illustration { display: block; width: 2.8rem; height: auto; }
.faker-brief-mark .saufaffe-icon { width: 2rem; height: 2rem; }
.faker-brief p { margin: 0; color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.faker-brief h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.25rem, 3vw, 2.1rem); text-wrap: balance; }
.faker-brief-private,
.faker-brief-real { transform: rotate(-0.8deg); }
.faker-brief-fake { background: #ffe1d4; transform: rotate(1deg); }
.faker-brief-sealed { color: var(--text-primary); background: repeating-linear-gradient(135deg, var(--surface-raised) 0 0.7rem, var(--surface-interactive) 0.7rem 1.4rem); transform: rotate(1deg); }
.faker-brief-sealed p { color: var(--text-secondary); }

.faker-briefs.is-pair:has(.faker-brief-sealed) { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.6rem; }
.faker-briefs.is-pair:has(.faker-brief-sealed) .faker-brief-real { justify-self: stretch; }
.faker-brief.faker-brief-sealed { display: inline-flex; max-width: 100%; align-items: center; gap: 0.45rem; padding: 0.35rem 0.9rem; border-radius: 999px; box-shadow: none; transform: none; }
.faker-brief-sealed .faker-brief-mark .saufaffe-icon { width: 1.1rem; height: 1.1rem; }
.faker-brief-sealed p { letter-spacing: 0.08em; }
.faker-brief-sealed h2 { font-family: var(--font-text); font-size: var(--type-small); font-stretch: 100%; font-weight: 850; letter-spacing: 0; text-transform: none; }
.faker-votes { flex-basis: 100%; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 750; }
.faker-votes.is-accused { color: var(--text-primary); font-weight: 850; }
.faker-action { display: grid; width: min(100%, 38rem); min-width: 0; justify-items: center; }
.faker-witnesses { width: 100%; min-width: 0; }
.faker-lineup-fieldset > legend { margin: 0 auto 0.9rem; color: var(--text-secondary); font-size: var(--type-small); text-align: center; }
.faker-lineup { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 1.2rem clamp(0.4rem, 2vw, 1.4rem); }
.faker-suspect { --figure: clamp(4rem, 8vw, 6rem); width: clamp(9rem, 18vw, 13rem); padding: 0.45rem 0.2rem 0.5rem; }
.faker-bubble { position: relative; display: block; max-width: 100%; margin-top: 0.4rem; padding: 0.5rem 0.8rem; overflow-wrap: anywhere; border-radius: 1rem; color: var(--ink); background: var(--paper-material); font-size: var(--type-small); font-weight: 750; line-height: 1.3; quotes: none; }
q.faker-bubble::after { position: absolute; bottom: 100%; left: 50%; border: 0.45rem solid transparent; border-bottom-color: var(--paper-material); content: ""; transform: translateX(-50%); }
.faker-bubble.is-pending { padding-inline: 0.5rem; overflow-wrap: normal; white-space: nowrap; border: 1px dashed var(--border-strong); color: var(--text-secondary); background: transparent; font-size: var(--type-caption); }
.faker-suspect.has-answered .faker-bubble.is-pending { border-color: var(--progress); color: var(--progress); }

.faker-bubble.roster-nudge { display: inline-flex; min-height: var(--target-compact); max-width: 100%; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15rem 0.35rem; margin-inline: auto; padding: 0.25rem 0.4rem 0.25rem 0.6rem; border: 1px dashed var(--brand-primary); color: var(--text-secondary); background: transparent; font: inherit; font-size: var(--type-caption); font-weight: 750; white-space: nowrap; cursor: pointer; }
.roster-nudge small { padding: 0.08rem 0.4rem; border-radius: 999px; color: var(--ink); background: var(--brand-primary); font-size: var(--type-micro); font-weight: 900; text-transform: uppercase; }
.roster-nudge:disabled { border-color: var(--border-strong); cursor: default; }
.roster-nudge:disabled small { color: var(--text-secondary); background: var(--surface-raised); }
.faker-suspect.is-faker .crew-figure-avatar { box-shadow: 0 0 0 0.22rem var(--surface-canvas), 0 0 0 0.45rem var(--brand-primary), 0 1rem 1.8rem rgba(201, 242, 74, 0.35); }
.faker-is-answer-waiting .faker-suspect .crew-figure-avatar,
.faker-is-vote-waiting .faker-suspect .crew-figure-avatar,
.faker-is-spectating .faker-suspect .crew-figure-avatar { filter: saturate(0.6) brightness(0.8); }

.whoami-scene { justify-items: stretch; }
.whoami-board { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; gap: clamp(1rem, 3vw, 2.5rem); text-align: left; }
.whoami-case { display: grid; min-width: 0; gap: 1rem; }
.whoami-identity { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; }
.whoami-portrait { display: grid; width: clamp(4.5rem, 10vw, 7rem); aspect-ratio: 1; grid-row: 1 / span 2; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255, 207, 74, 0.32), transparent 68%); }
.whoami-portrait svg { width: 88%; height: 88%; }
.whoami-identity p { align-self: end; margin: 0; color: var(--progress); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.whoami-identity h2 { align-self: start; margin: 0; overflow-wrap: anywhere; font-size: clamp(1.9rem, 5vw, 3.6rem); }
.whoami-hints { display: grid; min-width: 0; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.whoami-hint { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.8rem; padding: 0.6rem 0.9rem; border: 3px solid var(--ink); border-radius: 0.5rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 0.35rem 0 rgba(0, 0, 0, 0.35); }
.whoami-hint:nth-child(odd) { transform: rotate(-0.5deg); }
.whoami-hint:nth-child(even) { transform: rotate(0.4deg); }
.whoami-hint > span { display: grid; width: 2rem; height: 2rem; grid-row: 1 / span 2; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-family: var(--font-number); font-weight: 900; }
.whoami-hint small { color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.whoami-hint strong { overflow-wrap: anywhere; line-height: 1.3; }

.whoami-hint.is-upcoming,
.whoami-hint.is-unused { color: var(--paper-material); background: repeating-linear-gradient(45deg, #a93a2e 0 0.45rem, #b9342c 0.45rem 0.9rem); }
.whoami-hint.is-unused { opacity: 0.55; }
.whoami-hint:is(.is-upcoming, .is-unused) > span { color: var(--ink); background: var(--paper-material); }
.whoami-hint.is-upcoming small,
.whoami-hint.is-unused small { color: var(--text-secondary); }
.whoami-desk { display: grid; min-width: 0; align-content: start; gap: 1rem; }
.whoami-feed { min-width: 0; }
.whoami-feed h3 { margin: 0 0 0.55rem; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.whoami-feed h3 span { margin-left: 0.4rem; color: var(--text-primary); }
.whoami-feed ol { display: grid; min-width: 0; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.whoami-said { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; }
.whoami-said p { justify-self: start; max-width: 100%; margin: 0; padding: 0.4rem 0.8rem; overflow-wrap: anywhere; border-radius: 0 1rem 1rem; background: var(--surface-raised); font-size: var(--type-small); }
.whoami-said p strong { display: block; color: var(--text-secondary); font-size: var(--type-micro); }
.whoami-said > span .saufaffe-icon { display: block; width: 1.1rem; height: 1.1rem; }
.whoami-said.is-correct p { background: var(--progress-soft); }
.whoami-said.is-correct > span { color: var(--progress); }
.whoami-said.is-incorrect > span { color: var(--danger); }

.whoami-hits { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; margin: 0 0 0.5rem; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 850; }
.whoami-hit { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-primary); }
.whoami-hit-avatar { display: grid; width: 1.8rem; height: 1.8rem; border-radius: 50%; }
.whoami-feed-fold > summary { display: flex; min-height: var(--target-compact); align-items: center; gap: 0.5rem; padding: 0 0.9rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); color: var(--text-primary); font-size: var(--type-small); font-weight: 850; cursor: pointer; list-style: none; }
.whoami-feed-fold > summary::-webkit-details-marker { display: none; }
.whoami-feed-fold > summary::after { margin-left: auto; content: "▸"; transition: transform var(--motion-feedback) var(--motion-ease-standard); }
.whoami-feed-fold[open] > summary { margin-bottom: 0.6rem; }
.whoami-feed-fold[open] > summary::after { transform: rotate(90deg); }
.whoami-resolved .whoami-hints { gap: 0.35rem; }
.whoami-resolved .whoami-hint { column-gap: 0.6rem; padding: 0.35rem 0.7rem; border-width: 2px; transform: none; }
.whoami-resolved .whoami-hint > span { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
.whoami-resolved .whoami-hint strong { font-size: var(--type-small); line-height: 1.25; }

.qduel-arena { display: grid; width: min(100%, 44rem); min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto) minmax(0, 1fr); align-items: start; gap: clamp(0.4rem, 2vw, 1.2rem); }
.qduel-person { --figure: clamp(4.2rem, 11vw, 6.5rem); justify-self: center; }
.qduel-person.is-open .crew-figure-avatar { place-items: center; background: var(--surface-raised); }
.qduel-nobody .game-illustration { width: 82%; height: auto; }
.qduel-middle { display: grid; justify-items: center; gap: 0.3rem; padding-top: calc(clamp(4.2rem, 11vw, 6.5rem) * 0.18); }
.qduel-gauntlet { display: block; width: clamp(2.8rem, 8vw, 4rem); height: auto; rotate: -14deg; }
.qduel-gauntlet.is-thrown { rotate: 74deg; translate: 0.6rem 0.2rem; }
.qduel-glasses { display: flex; justify-content: center; gap: 0.1rem; }
.qduel-glass { display: block; width: clamp(1.5rem, 4.4vw, 2.1rem); height: auto; }
.qduel-glasses.slide-to-challenger { translate: calc(-1 * clamp(1.6rem, 6vw, 4rem)) 0; }
.qduel-glasses.slide-to-target { translate: clamp(1.6rem, 6vw, 4rem) 0; }
.qduel-stake { color: var(--prize); font-size: var(--type-caption); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.qduel-stakes, .qduel-targets { width: min(100%, 44rem); min-width: 0; }
.qduel-stakes > legend, .qduel-targets > legend { margin: 0 auto 0.55rem; color: var(--text-secondary); font-size: var(--type-small); font-weight: 800; text-align: center; }
.qduel-stake-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.qduel-stake-choice { position: relative; display: grid; min-width: 0; cursor: pointer; }
.qduel-stake-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.qduel-stake-choice span { display: flex; min-height: var(--target-default); flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1rem 0.15rem; padding: 0.45rem 0.4rem; border: 2px dashed var(--border-strong); border-radius: 1rem; background: var(--surface-raised); }
.qduel-stake-choice b { flex: 1 0 100%; font-size: var(--type-caption); text-align: center; }
.qduel-stake-choice .qduel-glass { width: 1.35rem; }
.qduel-stake-choice input:checked + span { border: 3px solid var(--prize); background: color-mix(in srgb, var(--prize) 18%, var(--surface-raised)); }
.qduel-stake-choice input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.qduel-target-row { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.qduel-options.is-preview { width: min(100%, 36rem); gap: 0.4rem; }
.qduel-options.is-preview .quiz-tile { min-height: 2.75rem; grid-template-columns: auto minmax(0, 1fr); padding: 0.35rem 0.6rem 0.35rem 0.4rem; gap: 0.5rem; border: 2px dashed var(--border-strong); color: var(--text-primary); background: transparent; box-shadow: none; cursor: default; }
.qduel-options.is-preview .quiz-letter { width: 1.7rem; height: 1.7rem; border-width: 2px; color: var(--text-primary); background: var(--surface-raised); box-shadow: none; font-size: 0.95rem; }
.qduel-options.is-preview .quiz-tile-copy strong { font-size: var(--type-small); }
.qduel-person.is-loser .crew-figure-avatar { filter: saturate(0.55) brightness(0.9); }
[data-motion="results-reveal"] .qduel-glasses { animation: saufaffe-qduel-slide var(--motion-transition) var(--motion-ease-emphasized) 0.2s both; }
@keyframes saufaffe-qduel-slide { from { translate: 0 0; } }

.buddy-person { --figure: clamp(4.6rem, 13vw, 7rem); }
.buddy-chooser .crew-figure-avatar { box-shadow: 0 0 0 0.26rem var(--surface-canvas), 0 0 0 0.5rem var(--prize), 0 1.2rem 2.2rem rgba(255, 207, 74, 0.3); }
.buddy-candidates { display: flex; width: min(100%, 44rem); min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.buddy-pair { display: grid; width: min(100%, 36rem); min-width: 0; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; justify-items: center; gap: 0.4rem; }
.buddy-band { position: relative; display: grid; justify-items: center; gap: 0.2rem; padding-top: clamp(0.6rem, 2vw, 1.4rem); }
.buddy-person.is-open .crew-figure-avatar { place-items: center; background: var(--surface-raised); }
.buddy-pair.is-open .buddy-band::before { border-top-style: dotted; opacity: 0.6; }
.buddy-band::before { position: absolute; z-index: -1; top: calc(clamp(4.6rem, 13vw, 7rem) / 2); right: -3.2rem; left: -3.2rem; height: 0; border-top: 4px dashed var(--prize); content: ""; }
.buddy-clink { display: block; width: clamp(3.4rem, 10vw, 5rem); height: auto; }
.buddy-band b { color: var(--prize); font-size: var(--type-caption); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.buddy-links { display: grid; gap: 0.45rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.buddy-links li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; }
.buddy-link-avatar { display: grid; width: 2.2rem; height: 2.2rem; border-radius: 50%; }
.buddy-links span { display: grid; min-width: 0; }
.buddy-links strong { overflow-wrap: anywhere; font-size: var(--type-small); }
.buddy-links small { color: var(--text-secondary); font-size: var(--type-caption); }
.round-bill-note { display: block; color: var(--paper-ink-soft); font-size: var(--type-caption); font-weight: 700; }
[data-motion="results-reveal"] .buddy-clink { animation: saufaffe-impact var(--motion-celebration) var(--motion-ease-emphasized) 0.15s both; }

.fivesec-stage-row { display: flex; width: min(100%, 36rem); min-width: 0; align-items: center; justify-content: center; gap: clamp(1rem, 5vw, 2.4rem); }
.fivesec-speaker { --figure: clamp(4.6rem, 14vw, 7rem); }
.fivesec-dial { display: grid; width: clamp(7rem, 30vw, 10rem); aspect-ratio: 1; flex: 0 0 auto; place-items: center; border: 4px solid var(--ink); border-radius: 50%; background: conic-gradient(var(--surface-raised) 0 100%); box-shadow: 0 0.4rem 0 var(--ink), 0 1rem 2rem rgba(0, 0, 0, 0.4); }
.fivesec-dial[data-left="5"] { background: conic-gradient(var(--prize) 0 100%); }
.fivesec-dial[data-left="4"] { background: conic-gradient(var(--prize) 0 80%, var(--surface-raised) 80% 100%); }
.fivesec-dial[data-left="3"] { background: conic-gradient(var(--prize) 0 60%, var(--surface-raised) 60% 100%); }
.fivesec-dial[data-left="2"] { background: conic-gradient(var(--at-stake) 0 40%, var(--surface-raised) 40% 100%); }
.fivesec-dial[data-left="1"] { background: conic-gradient(var(--at-stake) 0 20%, var(--surface-raised) 20% 100%); }
.fivesec-count { display: grid; width: 64%; aspect-ratio: 1; place-items: center; border: 3px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--paper-material); font-family: var(--font-number); font-size: clamp(2.4rem, 11vw, 3.6rem); font-weight: 900; line-height: 1; }
.fivesec-card { display: grid; width: clamp(6rem, 26vw, 8rem); aspect-ratio: 0.72; place-items: center; rotate: -4deg; border: 3px solid var(--ink); border-radius: 1rem; color: var(--duel-ink); background: repeating-linear-gradient(135deg, #3b3142 0 0.6rem, #46394f 0.6rem 1.2rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.42); font-size: 2.4rem; font-weight: 900; }
.fivesec-stamp { display: grid; justify-items: center; gap: 0.2rem; margin: 0; rotate: -3deg; }
.fivesec-stamp strong { padding: 0.25rem 1rem; border: 4px solid currentColor; border-radius: 0.6rem; font-size: clamp(1.6rem, 7vw, 2.4rem); }
.fivesec-stamp.is-made { color: var(--progress); }
.fivesec-stamp.is-missed { color: var(--danger-lit); }
.fivesec-stamp span { color: var(--text-secondary); font-size: var(--type-caption); font-weight: 800; }
.fivesec-actions { display: grid; width: min(100%, 30rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.fivesec-actions.is-start { grid-template-columns: minmax(0, 1fr); }
.fivesec-verdict { position: relative; display: grid; min-height: 6rem; justify-items: center; align-content: center; gap: 0.3rem; border: 3px solid var(--ink); border-radius: 1.2rem; color: var(--ink); box-shadow: 0 0.35rem 0 var(--ink), 0 1.1rem 2rem rgba(0, 0, 0, 0.32); font: inherit; font-weight: 900; cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease-standard); }
.fivesec-verdict.is-made { background: var(--brand-primary); }
.fivesec-verdict.is-missed { background: var(--at-stake); }
.fivesec-verdict:hover:not(:disabled) { transform: translateY(-0.2rem); }
.fivesec-verdict:active:not(:disabled) { transform: translateY(0.3rem); }
.fivesec-verdict-icon { width: 2.2rem; height: 2.2rem; }
[data-motion="results-reveal"] .fivesec-stamp strong { animation: saufaffe-stamp var(--motion-celebration) var(--motion-ease-emphasized) both; }

.siptime-watch { position: relative; width: clamp(11rem, 52vw, 15rem); aspect-ratio: 1; }
.siptime-body { display: block; width: 100%; height: auto; filter: drop-shadow(0 1rem 1.6rem rgba(0, 0, 0, 0.5)); }
.siptime-hand, .siptime-target-mark { position: absolute; top: 56.25%; left: 50%; width: 0.3rem; height: 27%; margin-left: -0.15rem; border-radius: 0.2rem; transform-origin: 50% 100%; translate: 0 -100%; }
.siptime-hand { background: var(--ink); }
.siptime-target-mark { width: 0.55rem; height: 30%; margin-left: -0.275rem; background: linear-gradient(var(--at-stake) 0 26%, transparent 26%); }
.siptime-watch[data-target="8"] .siptime-target-mark { rotate: 144deg; }
.siptime-watch[data-target="9"] .siptime-target-mark { rotate: 162deg; }
.siptime-watch[data-target="10"] .siptime-target-mark { rotate: 180deg; }
.siptime-watch[data-target="11"] .siptime-target-mark { rotate: 198deg; }
.siptime-watch[data-target="12"] .siptime-target-mark { rotate: 216deg; }
.siptime-watch[data-target="13"] .siptime-target-mark { rotate: 234deg; }
.siptime-watch[data-target="14"] .siptime-target-mark { rotate: 252deg; }
.siptime-watch[data-target="15"] .siptime-target-mark { rotate: 270deg; }
.siptime-watch[data-target="16"] .siptime-target-mark { rotate: 288deg; }
.siptime-watch[data-target="17"] .siptime-target-mark { rotate: 306deg; }
.siptime-watch[data-target="18"] .siptime-target-mark { rotate: 324deg; }
.siptime-watch[data-target="19"] .siptime-target-mark { rotate: 342deg; }
.siptime-watch[data-target="20"] .siptime-target-mark { rotate: 360deg; }
.siptime-readout { position: absolute; top: 66%; left: 50%; translate: -50% 0; padding: 0.1rem 0.6rem; border: 2px solid var(--ink); border-radius: 0.5rem; color: var(--ink); background: var(--paper-material); font-family: var(--font-number); font-size: clamp(1rem, 4.6vw, 1.3rem); font-weight: 900; white-space: nowrap; }
.siptime-fog { position: absolute; inset: 14% 4% 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity var(--motion-transition) var(--motion-ease-standard); }
.siptime-fog-art { width: 112%; height: auto; }
.siptime-watch[data-clock="hidden"] .siptime-fog { opacity: 1; }
.siptime-watch[data-clock="hidden"] .siptime-hand { visibility: hidden; }
.siptime-watch[data-clock="counting"] .siptime-readout { font-size: clamp(1.6rem, 8vw, 2.2rem); }

.siptime-resolved .siptime-watch { width: clamp(5.5rem, 22vw, 7.5rem); }
.siptime-resolved .siptime-readout { display: none; }
.siptime-stop { position: relative; display: flex; width: min(100%, 22rem); min-height: 5.2rem; align-items: center; justify-content: center; gap: 0.6rem; border: 4px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--at-stake); box-shadow: 0 0.45rem 0 var(--ink), 0 1.2rem 2.2rem rgba(0, 0, 0, 0.4); font: inherit; font-size: 1.6rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.siptime-stop .saufaffe-icon { width: 2rem; height: 2rem; }
.siptime-stop:active:not(:disabled) { box-shadow: 0 0.1rem 0 var(--ink); translate: 0 0.3rem; }
.siptime-stop:disabled { color: var(--text-secondary); background: var(--surface-raised); cursor: progress; }

.siptime-lanes { display: grid; width: min(100%, 46rem); grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem 0.6rem; margin: 0; padding: 0; list-style: none; }
.siptime-lane { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "face name time" "face track track"; align-items: center; row-gap: 0.3rem; }
.siptime-lane-avatar { display: grid; grid-area: face; width: 2.8rem; height: 2.8rem; border-radius: 50%; }
.siptime-lane-name { display: flex; grid-area: name; min-width: 0; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; overflow-wrap: anywhere; font-weight: 800; }
.siptime-lane-time { display: grid; grid-area: time; justify-items: end; font-family: var(--font-number); }
.siptime-lane-time small { color: var(--text-secondary); font-size: var(--type-caption); }
.siptime-track { position: relative; grid-area: track; height: 1.1rem; border-radius: 999px; background: var(--surface-raised); }
.siptime-track-target { position: absolute; top: -0.2rem; bottom: -0.2rem; left: 50%; width: 0.2rem; margin-left: -0.1rem; background: var(--prize); }
.siptime-marker { position: absolute; top: 50%; width: 0.9rem; height: 0.9rem; translate: -50% -50%; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-material); }
.siptime-lane.is-closest .siptime-marker { background: var(--brand-primary); }
.siptime-marker[data-offset="-16"] { left: calc(50% + -16 * 2.9%); }
.siptime-marker[data-offset="-15"] { left: calc(50% + -15 * 2.9%); }
.siptime-marker[data-offset="-14"] { left: calc(50% + -14 * 2.9%); }
.siptime-marker[data-offset="-13"] { left: calc(50% + -13 * 2.9%); }
.siptime-marker[data-offset="-12"] { left: calc(50% + -12 * 2.9%); }
.siptime-marker[data-offset="-11"] { left: calc(50% + -11 * 2.9%); }
.siptime-marker[data-offset="-10"] { left: calc(50% + -10 * 2.9%); }
.siptime-marker[data-offset="-9"] { left: calc(50% + -9 * 2.9%); }
.siptime-marker[data-offset="-8"] { left: calc(50% + -8 * 2.9%); }
.siptime-marker[data-offset="-7"] { left: calc(50% + -7 * 2.9%); }
.siptime-marker[data-offset="-6"] { left: calc(50% + -6 * 2.9%); }
.siptime-marker[data-offset="-5"] { left: calc(50% + -5 * 2.9%); }
.siptime-marker[data-offset="-4"] { left: calc(50% + -4 * 2.9%); }
.siptime-marker[data-offset="-3"] { left: calc(50% + -3 * 2.9%); }
.siptime-marker[data-offset="-2"] { left: calc(50% + -2 * 2.9%); }
.siptime-marker[data-offset="-1"] { left: calc(50% + -1 * 2.9%); }
.siptime-marker[data-offset="0"] { left: calc(50% + 0 * 2.9%); }
.siptime-marker[data-offset="1"] { left: calc(50% + 1 * 2.9%); }
.siptime-marker[data-offset="2"] { left: calc(50% + 2 * 2.9%); }
.siptime-marker[data-offset="3"] { left: calc(50% + 3 * 2.9%); }
.siptime-marker[data-offset="4"] { left: calc(50% + 4 * 2.9%); }
.siptime-marker[data-offset="5"] { left: calc(50% + 5 * 2.9%); }
.siptime-marker[data-offset="6"] { left: calc(50% + 6 * 2.9%); }
.siptime-marker[data-offset="7"] { left: calc(50% + 7 * 2.9%); }
.siptime-marker[data-offset="8"] { left: calc(50% + 8 * 2.9%); }
.siptime-marker[data-offset="9"] { left: calc(50% + 9 * 2.9%); }
.siptime-marker[data-offset="10"] { left: calc(50% + 10 * 2.9%); }
.siptime-marker[data-offset="11"] { left: calc(50% + 11 * 2.9%); }
.siptime-marker[data-offset="12"] { left: calc(50% + 12 * 2.9%); }
.siptime-marker[data-offset="13"] { left: calc(50% + 13 * 2.9%); }
.siptime-marker[data-offset="14"] { left: calc(50% + 14 * 2.9%); }
.siptime-marker[data-offset="15"] { left: calc(50% + 15 * 2.9%); }
.siptime-marker[data-offset="16"] { left: calc(50% + 16 * 2.9%); }
[data-motion="results-reveal"] .siptime-marker { animation: saufaffe-siptime-slide var(--motion-transition) var(--motion-ease-emphasized) both; }
@keyframes saufaffe-siptime-slide { from { left: 50%; opacity: 0; } }

.mia-ring { display: grid; width: min(100%, 40rem); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(0.4rem, 2vw, 1.2rem); }
.mia-person { --figure: clamp(4.2rem, 12vw, 6.5rem); justify-self: center; }
.mia-person.is-turn .crew-figure-avatar { box-shadow: 0 0 0 0.26rem var(--surface-canvas), 0 0 0 0.5rem var(--prize), 0 1.2rem 2.2rem rgba(255, 207, 74, 0.3); }
.mia-table { position: relative; display: grid; width: clamp(6.5rem, 26vw, 9rem); justify-items: center; padding-top: 0.4rem; }
.mia-cup { display: block; width: 78%; height: auto; transform-origin: 20% 90%; filter: drop-shadow(0 0.8rem 1.2rem rgba(0, 0, 0, 0.5)); }
.mia-table.is-lifted .mia-cup { rotate: -30deg; translate: -34% 2%; }
.mia-dice { position: absolute; bottom: -0.2rem; left: 50%; translate: -50% 0; }
.mia-value { display: inline-flex; align-items: center; gap: 0.2rem; }
.mia-value .die { display: block; width: 1.9rem; height: 1.9rem; }
.mia-value b { margin-left: 0.3rem; font-size: var(--type-small); font-weight: 900; white-space: nowrap; }
.mia-value.is-dice b { display: none; }
.mia-value.is-dice .die { width: clamp(2rem, 7vw, 2.6rem); height: clamp(2rem, 7vw, 2.6rem); }
.mia-value.is-small .die { width: 1.2rem; height: 1.2rem; }
.mia-claim { display: flex; max-width: 100%; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.6rem; margin: 0; padding: 0.55rem 1rem; border: 3px solid var(--ink); border-radius: 1.2rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 0.35rem 0 var(--ink); }
.mia-claim-who { font-size: var(--type-small); font-weight: 800; }
.mia-stamp { margin: 0; rotate: -4deg; }
.mia-stamp strong { display: block; padding: 0.2rem 1rem; border: 4px solid currentColor; border-radius: 0.6rem; font-size: clamp(1.6rem, 7vw, 2.4rem); }
.mia-stamp.is-lie { color: var(--danger-lit); }
.mia-stamp.is-true { color: var(--progress); }
.mia-stamp.is-conceded { color: var(--prize); }
.mia-actions { display: grid; width: min(100%, 30rem); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.mia-actions.choice-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mia-announce { width: min(100%, 40rem); min-width: 0; }
.mia-announce > legend { margin: 0 auto 0.55rem; color: var(--text-secondary); font-size: var(--type-small); font-weight: 800; text-align: center; }

.mia-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.mia-value-choice { position: relative; display: grid; min-width: 0; min-height: var(--target-default); justify-items: center; align-content: center; padding: 0.35rem 0.25rem; border: 2px solid var(--border-strong); border-radius: 0.9rem; color: var(--text-primary); background: var(--surface-raised); font: inherit; cursor: pointer; }
.mia-value-choice .mia-value { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; gap: 0.1rem 0.2rem; }
.mia-value-choice .mia-value .die { width: 1.35rem; height: 1.35rem; }
.mia-value-choice .mia-value b { grid-column: 1 / -1; margin-left: 0; font-size: var(--type-caption); line-height: 1.1; }
.mia-value-choice.is-truth { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.mia-value-choice small { position: absolute; top: -0.55rem; left: 50%; translate: -50% 0; padding: 0 0.3rem; border-radius: 0.3rem; color: var(--ink); background: var(--brand-primary); font-size: 0.62rem; font-weight: 900; line-height: 1.1rem; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 560px) {
  .mia-values { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.55rem; }
  .mia-value-choice .mia-value { display: inline-flex; gap: 0.2rem; }
  .mia-value-choice .mia-value .die { width: 1.6rem; height: 1.6rem; }
  .mia-value-choice .mia-value b { margin-left: 0.3rem; font-size: var(--type-small); }
}
.mia-ladder { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.7rem; margin: 0; padding: 0; color: var(--text-secondary); list-style: none; font-size: var(--type-caption); }
.mia-ladder li { display: inline-flex; align-items: center; gap: 0.3rem; }
.mia-ladder .mia-value b { font-size: var(--type-caption); }
[data-feedback-role="turn-pass"][data-motion="mia-roll"] .mia-cup { animation: saufaffe-mia-shake 0.5s var(--motion-ease-standard) both; }
@keyframes saufaffe-mia-shake { 0%, 100% { rotate: 0deg; } 20% { rotate: -12deg; } 40% { rotate: 10deg; } 60% { rotate: -8deg; } 80% { rotate: 6deg; } }
[data-motion="results-reveal"] .mia-table.is-lifted .mia-cup { animation: saufaffe-mia-lift var(--motion-transition) var(--motion-ease-emphasized) 0.15s both; }
@keyframes saufaffe-mia-lift { from { rotate: 0deg; translate: 0 0; } }

.handicap-sheet { background: linear-gradient(135deg, transparent 0 1.6rem, var(--paper-material) 1.6rem); }
.handicap-sheet::before { background: var(--chip-gold); }
.handicap-seal { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border: 3px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--chip-gold); box-shadow: 0 0.25rem 0 var(--ink); rotate: -8deg; }
.handicap-seal .saufaffe-icon { width: 1.7rem; height: 1.7rem; }
.decree-confirming .handicap-seal { animation: saufaffe-handicap-rattle 2.4s var(--motion-ease-standard) 0.6s 3; }
.handicap-target { display: grid; max-width: 34rem; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem; margin: 0; text-align: left; overflow-wrap: anywhere; line-height: 1.4; }
.handicap-avatar { display: grid; width: 3.2rem; height: 3.2rem; border-radius: 50%; }
.handicap-list { display: grid; gap: 0.45rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.handicap-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; }
.handicap-list-avatar { display: grid; width: 2.2rem; height: 2.2rem; border-radius: 50%; }
.handicap-list span { display: grid; min-width: 0; }
.handicap-list strong { display: flex; align-items: center; gap: 0.3rem; overflow-wrap: anywhere; font-size: var(--type-small); }
.handicap-list strong .saufaffe-icon { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; color: var(--chip-gold); }
.handicap-list small { color: var(--text-secondary); font-size: var(--type-caption); }
.handicap-badge { display: inline-flex; align-items: center; justify-self: center; gap: 0.2rem; padding: 0.15rem 0.45rem 0.17rem; border-radius: 999px; color: var(--ink); background: var(--chip-gold); font-size: var(--type-micro); font-weight: 900; line-height: 1.1; }
.handicap-badge .saufaffe-icon { width: 0.8rem; height: 0.8rem; flex: 0 0 auto; }
.handicap-chain { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; color: var(--ink); background: repeating-linear-gradient(-35deg, transparent 0 0.9rem, rgba(21, 19, 22, 0.16) 0.9rem 1.15rem); pointer-events: none; }
.handicap-chain .saufaffe-icon { width: 2.3rem; height: 2.3rem; padding: 0.4rem; border: 3px solid var(--ink); border-radius: 50%; background: var(--chip-gold); box-shadow: 0 0.2rem 0 var(--ink); }
.duel-handcard[data-blocked] { position: relative; opacity: 1; filter: grayscale(0.85); cursor: not-allowed; }
.duel-handcard[data-blocked] .handicap-chain .saufaffe-icon,
.tod-card.is-locked .handicap-chain .saufaffe-icon { filter: none; animation: saufaffe-handicap-rattle 2.4s var(--motion-ease-standard) 0.4s 3; }
.tod-card.is-locked { filter: grayscale(0.8); }
.tod-card .handicap-chain { place-items: start end; padding: 0.55rem; }
.tod-card .handicap-chain .saufaffe-icon { width: 2rem; height: 2rem; padding: 0.32rem; }
.tod-card.is-locked > small { color: var(--paper-ink-soft); }
.potato-action.is-held { position: relative; overflow: hidden; cursor: not-allowed; opacity: 1; }
.potato-action.is-held .potato-action-symbol { animation: saufaffe-handicap-rattle 0.6s var(--motion-ease-standard) 5; }
.potato-action.is-held small { font-weight: 900; }
.estimate-lead { display: grid; width: min(100%, 26rem); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.7rem; }
.estimate-lead-avatar { display: grid; width: 3rem; height: 3rem; border-radius: 50%; }
.estimate-lead-slip { position: relative; display: grid; min-width: 0; gap: 0.15rem; padding: 0.7rem 0.9rem 0.75rem; border-radius: 0.3rem; color: var(--ink); background: var(--paper-material); box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.35); rotate: 1.5deg; }
.estimate-lead-slip::before { position: absolute; top: -0.45rem; left: 1.2rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--chip-gold); box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.4); content: ""; }
.estimate-lead-kind { display: flex; align-items: center; gap: 0.25rem; color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.estimate-lead-kind .saufaffe-icon { width: 0.8rem; height: 0.8rem; }
.estimate-lead-value { overflow-wrap: anywhere; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 950; line-height: 1.05; }
.estimate-lead-value.is-pending { display: flex; align-items: center; gap: 0.3rem; color: var(--paper-ink-soft); animation: saufaffe-handicap-rattle 1.8s var(--motion-ease-standard) 8; }
.estimate-lead-value.is-pending .saufaffe-icon { width: 1.4rem; height: 1.4rem; }
.estimate-lead-value.is-missing { color: var(--paper-ink-soft); font-size: var(--type-body); text-decoration: line-through; }
.estimate-lead-slip small { color: var(--paper-ink-soft); font-size: var(--type-caption); }
.estimate-lead.is-pinned .estimate-lead-slip { animation: saufaffe-handicap-pin var(--motion-celebration) var(--motion-ease-emphasized); }
@keyframes saufaffe-handicap-rattle { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -9deg; } 82% { rotate: 8deg; } 88% { rotate: -5deg; } 94% { rotate: 3deg; } }
@keyframes saufaffe-handicap-pin { from { opacity: 0; translate: 0 -1.2rem; rotate: -6deg; scale: 1.15; } }

.estimate-ruler { width: min(100%, 26rem); margin: 0 auto 0.4rem; color: var(--text-secondary); }
.estimate-ruler svg { display: block; width: 100%; height: auto; overflow: visible; }
.estimate-pin-head { width: 28px; height: 28px; }
.estimate-pin-avatar { display: grid; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--ink); }
.estimate-pin-safe .estimate-pin-avatar { box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 5px var(--brand-primary); }
:is([data-round-closure-motion], [data-reveal-step="result"]:not([data-reveal-resumed])) .estimate-pin { animation: saufaffe-pin-drop 520ms var(--motion-ease-emphasized) both; }
:is([data-round-closure-motion], [data-reveal-step="result"]:not([data-reveal-resumed])) .estimate-ruler-flag { animation: saufaffe-flag-plant 420ms var(--motion-ease-emphasized) both; animation-delay: 1.15s; }
.estimate-pin[data-pin="1"] { animation-delay: 140ms; }
.estimate-pin[data-pin="2"] { animation-delay: 280ms; }
.estimate-pin[data-pin="3"] { animation-delay: 420ms; }
.estimate-pin[data-pin="4"] { animation-delay: 560ms; }
.estimate-pin[data-pin="5"] { animation-delay: 700ms; }
.estimate-pin[data-pin="6"] { animation-delay: 840ms; }
.estimate-pin[data-pin="7"] { animation-delay: 980ms; }
.round-bill-mugs { display: inline-flex; align-items: center; gap: 0.1rem; margin-left: 0.4rem; vertical-align: middle; }
.round-bill-mugs b { font-size: var(--type-caption); }
.round-bill-mug { width: 1.4rem; height: 1.4rem; color: #7a4f0e; }
:is([data-round-closure-motion], [data-reveal-step="bill"]:not([data-reveal-resumed])) .round-bill-mug { animation: saufaffe-mug-pop 420ms var(--motion-ease-emphasized) both; animation-delay: 0.45s; }
.round-bill-mug:nth-child(2) { animation-delay: 0.55s; }
.round-bill-mug:nth-child(3) { animation-delay: 0.65s; }
.round-bill-mug:nth-child(4) { animation-delay: 0.75s; }
.round-bill-mug:nth-child(5) { animation-delay: 0.85s; }
.never-mug { width: 1.6rem; height: 1.6rem; color: #ffc53d; filter: drop-shadow(0 2px 0 var(--ink)); }
:is([data-round-closure-motion], [data-reveal-step="consequence"]:not([data-reveal-resumed])) .never-camp.is-drinking .never-mug { animation: saufaffe-mug-raise 900ms var(--motion-ease-emphasized) both; }
.never-member:nth-child(2) .never-mug { animation-delay: 90ms; }
.never-member:nth-child(3) .never-mug { animation-delay: 180ms; }
.never-member:nth-child(4) .never-mug { animation-delay: 270ms; }
.never-member:nth-child(5) .never-mug { animation-delay: 360ms; }
[data-stage-scene="quiz"].quiz-resolved .quiz-tile { position: relative; }
[data-stage-scene="quiz"].quiz-resolved .quiz-tile.is-correct::after { position: absolute; top: -0.7rem; right: 0.6rem; padding: 0.15rem 0.55rem; border: 3px solid #2e7d32; border-radius: 0.35rem; color: #2e7d32; background: var(--paper-material); content: "Richtig!"; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-6deg); }
:is([data-round-closure-motion], [data-reveal-step="result"]:not([data-reveal-resumed])) [data-stage-scene="quiz"].quiz-resolved .quiz-tile.is-correct::after { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) both; animation-delay: 0.35s; }
:is([data-round-closure-motion], [data-reveal-step="consequence"]:not([data-reveal-resumed])) [data-stage-scene="quiz"].quiz-resolved .quiz-tile.is-wrong:has(.quiz-backer) { animation: saufaffe-nudge 420ms var(--motion-ease-standard) both; }
:is([data-motion="results-reveal"], [data-round-closure-motion]) .wwr-candidate-verdict .stage-tokens i { animation: saufaffe-ballot-in 420ms var(--motion-ease-emphasized) both; }
.wwr-candidate-verdict .stage-tokens i:nth-child(2) { animation-delay: 120ms; }
.wwr-candidate-verdict .stage-tokens i:nth-child(3) { animation-delay: 240ms; }
.wwr-candidate-verdict .stage-tokens i:nth-child(4) { animation-delay: 360ms; }
.wwr-candidate-verdict .stage-tokens i:nth-child(5) { animation-delay: 480ms; }
.wwr-candidate-verdict .stage-tokens i:nth-child(6) { animation-delay: 600ms; }
@keyframes saufaffe-mug-raise { 0% { opacity: 0; transform: translateY(10px) rotate(0deg); } 45% { opacity: 1; transform: translateY(-6px) rotate(-18deg); } 70% { transform: translateY(-4px) rotate(14deg); } 100% { opacity: 1; transform: translateY(0) rotate(0deg); } }
@keyframes saufaffe-ballot-in { 0% { opacity: 0; transform: translateY(-1.4rem) rotate(-30deg) scale(0.6); } 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } }
@keyframes saufaffe-pin-drop { 0% { opacity: 0; transform: translateY(-60px); } 70% { opacity: 1; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes saufaffe-flag-plant { 0% { opacity: 0; transform: translateY(-40px) rotate(-8deg); } 70% { opacity: 1; transform: translateY(3px) rotate(3deg); } 100% { opacity: 1; transform: translateY(0) rotate(0deg); } }
@keyframes saufaffe-mug-pop { 0% { opacity: 0; transform: scale(0.2) rotate(-30deg); } 60% { opacity: 1; transform: scale(1.25) rotate(12deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }

.room-layout-board .play-column { gap: 0.6rem; }
.board-sheet { display: flex; justify-content: flex-end; }
.board-stage { position: relative; display: grid; width: min(100%, 72rem); min-width: 0; gap: 0.6rem; margin-inline: auto; }

:is(.board-head, .tisch-head) { position: relative; z-index: 5; display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
:is(.board-head, .tisch-head) > h1 { flex: 1 1 0; min-width: min-content; }
.head-tools { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.head-tools > .timer { min-width: 0; margin: 0; padding: 0.35rem 0.6rem; }
:is(.board-head, .tisch-head) .session-sheet-body { position: absolute; top: calc(100% + 0.5rem); right: 0; width: min(100%, 52rem); }
.board-head h1 { display: flex; flex-wrap: wrap; overflow-wrap: break-word; align-items: baseline; gap: 0 0.6rem; margin: 0; }
.board-head h1 span { font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1; }
.board-head h1 small { color: var(--text-secondary); font-size: var(--type-small); font-weight: 800; }
.board-crew { display: flex; min-width: 0; gap: 0.4rem; margin: 0; padding: 0 0 0.2rem; overflow-x: auto; list-style: none; scrollbar-width: none; }
.board-crew-member { position: relative; display: grid; min-width: 4.6rem; flex: 0 0 auto; grid-template-columns: auto auto; align-items: center; justify-items: start; gap: 0 0.35rem; padding: 0.35rem 0.55rem 0.35rem 0.35rem; border: 2px solid var(--border-subtle); border-radius: 999px; background: var(--surface-raised); }
.board-crew-member.is-current { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(201, 242, 74, 0.25); }
.board-crew-member.is-viewer .board-crew-name { color: var(--brand-text); }
.board-crew-member.is-gone { opacity: 0.45; }
.board-crew-avatar { display: grid; width: 2.1rem; height: 2.1rem; grid-row: span 2; border-radius: 50%; }
.board-crew-name { max-width: 6.5rem; overflow: hidden; font-size: var(--type-caption); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.board-crew-bananas { display: inline-flex; align-items: center; gap: 0.15rem; font-family: var(--font-number); font-size: var(--type-body); font-weight: 900; }
.board-crew-score { display: inline-flex; align-items: center; gap: 0.35rem; }
.board-crew-gold, .board-podium-gold { display: inline-flex; align-items: center; gap: 0.15rem; font-family: var(--font-number); font-weight: 900; }
.board-crew-bananas svg, .board-award strong svg, .board-podium-bananas svg, .board-crew-gold svg, .board-podium-gold svg { width: 1.1rem; height: 1.1rem; }
.board-crew-items { display: inline-flex; grid-column: 1 / -1; justify-self: end; gap: 0.1rem; }
.board-item { display: inline-grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: var(--paper-material); }
.board-item svg { width: 1.1rem; height: 1.1rem; }
.board-crown { position: absolute; top: -0.55rem; left: 0.2rem; width: 1.3rem; height: 1.3rem; rotate: -16deg; }
.board-crown svg { width: 100%; height: 100%; }
.board-map { position: relative; height: min(62vh, 30rem); min-height: 18rem; overflow: auto; border: 3px solid var(--ink); border-radius: var(--radius-scene); background: #145059; box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.4); overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-x pan-y; }

@supports (height: 1svh) { .board-map { height: min(62svh, 30rem, calc(100svh - 15rem)); } }
.board-map-frame { position: relative; min-width: 0; }

.board-map-frame > .board-overview-toggle { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 3; box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.45); }
.board-map:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
.board-island { display: block; width: 50rem; max-width: none; height: auto; }
.board-map.is-overview { height: auto; min-height: 0; overflow: hidden; }
.board-map.is-overview .board-island { width: 100%; }
@media (min-width: 861px) {
  .board-map { height: auto; min-height: 0; overflow: hidden; }
  .board-island { width: 100%; }
  .board-overview-toggle { display: none; }
}

@media (min-width: 1100px) {
  .board-stage { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-rows: auto auto auto auto 1fr auto; grid-template-areas: "head head" "map weather" "map crew" "map ticker" "map dock" "legend dock"; align-items: start; column-gap: 1rem; }
  .board-weather { grid-area: weather; }
  .board-legend { grid-area: legend; }
  .board-head { grid-area: head; }
  .board-crew { grid-area: crew; flex-direction: column; overflow: visible; }
  .board-crew-member { grid-template-columns: auto minmax(0, 1fr) auto; border-radius: var(--radius-panel); }
  .board-crew-avatar { grid-row: span 1; }
  .board-crew-name { max-width: none; font-size: var(--type-small); }
  .board-crew-items { grid-column: 2 / -1; justify-self: start; }
  .board-map-frame { grid-area: map; }
  .board-ticker { grid-area: ticker; }
  .board-dock, .board-podium { grid-area: dock; }
  .board-stage.is-finished .board-podium { grid-area: crew / crew / dock / dock; }
  .board-stage.is-finished .board-crew { display: none; }
}
.board-field-ring { stroke: transparent; stroke-width: 5; }
.board-field.is-focus .board-field-ring { stroke: var(--brand-primary); stroke-dasharray: 6 5; }
.board-field.is-option .board-field-ring { stroke: var(--chip-gold); stroke-width: 7; }
.board-field.is-harvested .board-field-symbol { opacity: 0.25; }
.board-figure-head { width: 52px; height: 52px; }
.board-figure-avatar { display: grid; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 3px var(--ink); }
.board-figure.is-current .board-figure-avatar { box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--brand-primary); }
.board-float { font-size: 26px; paint-order: stroke; stroke: var(--ink); stroke-width: 5px; stroke-linejoin: round; }
.board-float-plus { fill: var(--chip-gold); }
.board-float-minus { fill: var(--danger); }
.board-float-sip { fill: #ff9ad5; }
.board-float-note { fill: var(--paper-material); font-size: 22px; }
.board-die { position: absolute; top: 0.8rem; left: 50%; width: 5rem; height: 5rem; translate: -50% 0; pointer-events: none; }
.board-die-face { position: absolute; inset: 0; opacity: 0; filter: drop-shadow(0 0.5rem 0.6rem rgba(0, 0, 0, 0.45)); }
.board-die-face svg { display: block; width: 100%; height: 100%; }
.board-die-face { display: flex; gap: 0.4rem; }
.board-die-face:has(.board-die-cube + .board-die-cube) { inset: 0 -2.7rem; }
.board-die-face svg { flex: 1 1 0; min-width: 0; }
.board-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }

.board-die-cube { position: relative; display: block; flex: 1 1 0; min-width: 0; }
.board-die-cube > svg { position: absolute; inset: 0; opacity: 0; }
.board-map-fx { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; }
.board-stage-fx { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.board-fx-group { position: absolute; inset: 0; pointer-events: none; }
:is(.board-step, .board-fly-banana, .board-fly-gold, .board-gold-rays) { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.board-step { width: 0.6rem; height: 0.4rem; margin: -0.2rem 0 0 -0.3rem; border-radius: 50%; background: rgba(21, 19, 22, 0.45); }
.board-fly-banana { z-index: 4; width: 1.9rem; height: 1.9rem; margin: -0.95rem 0 0 -0.95rem; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.4)); }
.board-fly-gold { z-index: 4; width: 2.5rem; height: 2.5rem; translate: -50% -50%; filter: drop-shadow(0 0 6px rgba(255, 197, 61, 0.9)); }
:is(.board-fly-banana, .board-fly-gold) svg { display: block; width: 100%; height: 100%; }
.board-gold-rays { z-index: 3; width: 12rem; height: 12rem; margin: -6rem 0 0 -6rem; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 214, 90, 0.6) 0 10deg, rgba(255, 214, 90, 0) 10deg 24deg); mask: radial-gradient(circle, #000 25%, transparent 70%); }
:is(.board-weather-fx, .board-flash) { position: absolute; inset: 0; border-radius: var(--radius-scene); opacity: 0; pointer-events: none; }
.board-weather-fx-storm { background: repeating-linear-gradient(105deg, rgba(200, 225, 255, 0) 0 9px, rgba(200, 225, 255, 0.5) 9px 10px, rgba(200, 225, 255, 0) 10px 23px), rgba(20, 28, 48, 0.5); }
.board-weather-fx-fog { background: radial-gradient(ellipse at 30% 40%, rgba(240, 240, 240, 0.7), transparent 60%), radial-gradient(ellipse at 70% 65%, rgba(240, 240, 240, 0.6), transparent 55%), rgba(220, 225, 230, 0.35); }
.board-weather-fx-eruption { background: radial-gradient(circle at 83% 14%, rgba(255, 113, 72, 0.65), transparent 55%), rgba(80, 20, 10, 0.3); }
.board-flash { background: #fffbe6; }
.board-palm-fronds { transform-box: fill-box; transform-origin: 50% 50%; }
.board-loading { margin: 2rem auto; color: var(--text-secondary); text-align: center; }
.board-wheel, .board-card { grid-area: 1 / 1; opacity: 0; }
.board-wheel { display: grid; justify-items: center; gap: 0.4rem; }
.board-wheel-frame { position: relative; width: min(52vw, 15rem); aspect-ratio: 1; }
.board-wheel-frame svg { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 5px var(--ink), 0 1rem 2rem rgba(0, 0, 0, 0.5); }
.board-wheel-pointer { position: absolute; top: -0.9rem; left: 50%; width: 0; height: 0; border-top: 1.4rem solid var(--brand-primary); border-right: 0.8rem solid transparent; border-left: 0.8rem solid transparent; translate: -50% 0; transform-origin: 50% 0; filter: drop-shadow(0 2px 0 var(--ink)); }
.board-wheel p { margin: 0; padding: 0.35rem 0.8rem; border: 3px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--paper-material); font-size: var(--type-body); }
.board-card { display: grid; width: min(70vw, 16rem); justify-items: center; gap: 0.3rem; padding: 1.1rem 1rem 1.2rem; border: 4px solid var(--ink); border-radius: 1rem; color: var(--ink); background: #7cc9ff; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5); text-align: center; }
.board-card small { font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.board-card strong { font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1; }
.board-card p { margin: 0; font-weight: 750; }
.board-ticker { display: grid; min-width: 0; gap: 0.15rem; margin: 0; padding: 0; color: var(--text-secondary); font-size: var(--type-caption); list-style: none; }
.board-ticker li { overflow-wrap: anywhere; }
.board-ticker li.is-latest { color: var(--text-primary); font-size: var(--type-small); font-weight: 800; }
.board-dock { display: grid; min-width: 0; gap: 0.6rem; padding: 0.85rem; border: 2px solid var(--border-subtle); border-radius: var(--radius-scene); background: var(--surface-raised); }
.board-dock.is-mine { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(201, 242, 74, 0.18); }
.board-dock-head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.board-dock-head h2 { margin: 0; font-size: clamp(1.25rem, 5vw, 1.8rem); line-height: 1; }
.board-dock-head p { margin: 0.25rem 0 0; color: var(--text-secondary); font-size: var(--type-small); }
.board-dock-actions, .board-dock-targets { display: flex; min-width: 0; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; }
.board-dock-targets p { width: 100%; margin: 0; color: var(--text-secondary); font-size: var(--type-caption); }
.board-choice { display: grid; min-width: 0; min-height: 3.1rem; flex: 1 1 9rem; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.5rem; padding: 0.5rem 0.8rem; border: 3px solid var(--ink); border-radius: var(--radius-panel); color: var(--ink); background: var(--paper-material); box-shadow: 0 0.25rem 0 var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform var(--motion-feedback) var(--motion-ease-standard); }
.board-choice > :only-child, .board-choice > strong:first-child { grid-column: 1 / -1; }
.board-choice.is-primary { background: var(--brand-primary); }
.board-choice strong { font-weight: 900; }
.board-choice small { grid-column: 2; color: var(--paper-ink-soft); font-size: var(--type-caption); }
.board-choice > strong:first-child + small { grid-column: 1 / -1; }
.board-choice:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0.1rem 0 var(--ink); }
.board-choice:disabled { cursor: not-allowed; opacity: 0.5; }
.board-choice-avatar { display: grid; width: 2rem; height: 2rem; grid-row: span 2; border-radius: 50%; }
.board-choice .board-item { grid-row: span 2; width: 2rem; height: 2rem; }
.board-choice .board-item svg { width: 1.6rem; height: 1.6rem; }
.board-dock-actions .board-choice.is-primary:only-child { min-height: 4rem; font-size: 1.2rem; }

.board-dock .board-dock-actions.board-shop > .board-choice { flex-basis: 100%; }

@media (max-width: 860px) {
  .board-dock.is-mine { gap: 0.4rem; padding: 0.5rem 0.65rem; }
  .board-dock.is-mine .board-dock-head h2 { font-size: 1.1rem; }
  .board-dock.is-mine .board-dock-head p { margin-top: 0.15rem; font-size: var(--type-caption); line-height: 1.25; }
  .board-dock.is-mine .board-choice { min-height: 2.75rem; flex-basis: 7rem; padding: 0.3rem 0.7rem; }
  .board-dock.is-mine .board-dock-actions .board-choice.is-primary:only-child { min-height: 2.75rem; font-size: 1rem; }
  
  .board-dock.is-mine .board-choice:not(:has(small)) > :first-child:not(strong) { grid-row: auto; width: 1.8rem; height: 1.8rem; }
  
  .board-stage:has(.board-dock.is-mine :is(.board-dock-actions, .board-dock-targets)) .board-map:not(.is-overview) { height: min(38vh, 30rem); height: min(38svh, 30rem); min-height: 14rem; }
  
  .board-stage:has(.board-dock.is-mine .board-shop) .board-map:not(.is-overview) { height: min(30vh, 30rem); height: min(30svh, 30rem); }
}
@media (min-width: 360px) and (max-width: 860px) {
  
  .board-dock.is-mine:has(.board-dock-actions > :only-child):not(:has(.board-dock-targets)) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.6rem; }
  .board-dock.is-mine .board-dock-actions > .board-choice:only-child { flex: 0 0 auto; min-width: 7.5rem; }
}
.board-podium { display: grid; justify-items: center; gap: 0.9rem; padding: 1rem; border: 2px solid var(--border-subtle); border-radius: var(--radius-scene); background: var(--surface-raised); text-align: center; }
.board-podium h2 { margin: 0; font-size: clamp(1.5rem, 6vw, 2.4rem); line-height: 1; }
.board-podium-steps { display: flex; width: 100%; align-items: flex-end; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.board-podium-step { display: grid; min-width: 0; flex: 0 1 6.5rem; justify-items: center; gap: 0.25rem; padding: 0.6rem 0.4rem; border: 3px solid var(--ink); border-radius: var(--radius-panel) var(--radius-panel) 0 0; color: var(--ink); background: var(--paper-material); }
.board-podium-step-1 { order: 2; min-height: 11rem; background: var(--chip-gold); }
.board-podium-step-2 { order: 1; min-height: 9rem; }
.board-podium-step-3 { order: 3; min-height: 7.5rem; }
.board-podium-bananas { display: inline-flex; align-items: center; gap: 0.2rem; font-family: var(--font-number); font-weight: 900; }
.board-podium-avatar { display: grid; width: 3.4rem; height: 3.4rem; border-radius: 50%; }
.board-podium-step.is-winner .board-podium-avatar { animation: saufaffe-board-cheer 0.9s var(--motion-ease-emphasized) 0.2s 4; }
.board-podium-rest { margin: 0; padding-left: 1.2rem; color: var(--text-secondary); text-align: left; }
.board-awards { display: grid; gap: 0.35rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.board-award { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.board-award strong { display: inline-flex; align-items: center; gap: 0.15rem; font-family: var(--font-number); }
.board-award.is-first strong { color: var(--chip-gold); }
.board-award-avatar { display: grid; width: 2rem; height: 2rem; border-radius: 50%; }
.board-awards-empty { margin: 0.4rem 0 0; color: var(--text-secondary); }

.board-family-brain { --family: var(--family-brain); }
.board-family-skill { --family: var(--family-skill); }
.board-family-read { --family: var(--family-read); }
.board-family-talk { --family: var(--family-talk); }
.board-family-luck { --family: var(--family-luck); }
.board-award.is-loss strong { color: var(--danger); }
.board-dock-minigame, .board-dock-intro { border-color: var(--family, var(--border-subtle)); }
.board-pot { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.board-lot { display: inline-flex; min-width: 0; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem 0.2rem 0.2rem; border: 2px solid var(--family); border-radius: 999px; font-size: var(--type-caption); font-weight: 800; }
.board-lot svg { width: 1.2rem; height: 1.2rem; flex: none; }
.board-lot-avatar { display: grid; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; }
.board-lot.is-drawn { color: var(--ink); background: var(--family); }
.board-pot-empty { margin: 0; color: var(--text-secondary); font-size: var(--type-small); }
.board-intro-draw { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; padding-top: 0.6rem; }
.board-category-wheel { width: min(64vw, 16rem); }
.board-category-disc { width: 100%; height: 100%; }

.board-category-dim { opacity: 1; fill-opacity: 0.62; }
.board-category-spot { position: absolute; top: 0; left: 50%; width: 46%; height: 52%; border-radius: 50% 50% 0 0; translate: -50% 0; background: radial-gradient(ellipse at 50% 30%, rgba(255, 244, 200, 0.55), transparent 70%); mix-blend-mode: screen; pointer-events: none; }
.board-intro-card { display: grid; width: min(100%, 14rem); justify-items: center; gap: 0.3rem; padding: 0.9rem 1rem 1rem; border: 4px solid var(--ink); border-radius: 1rem; color: var(--ink); background: var(--family); box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.45); text-align: center; }
.board-intro-card small { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.board-intro-card small svg { width: 1.3rem; height: 1.3rem; }
.board-intro-card strong { font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1; }
.board-intro-card p { margin: 0; font-size: var(--type-small); font-weight: 750; }
.board-legend { min-width: 0; color: var(--text-secondary); font-size: var(--type-caption); }
.board-legend summary { min-height: 2.75rem; padding: 0.6rem 0; font-weight: 800; cursor: pointer; }
.board-legend ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.35rem 0.8rem; margin: 0; padding: 0; list-style: none; }
.board-legend li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: 0.5rem; }
.board-legend svg { width: 2rem; height: 2rem; }
.board-legend strong { color: var(--text-primary); }
.lobby-board .board-rounds { display: grid; gap: 0.25rem; }
.board-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.4rem; margin: 0; padding: 0; border: 0; }
.board-layers legend { margin-bottom: 0.3rem; font-weight: 800; }
.board-layer span { display: grid; }
.board-layer small { color: var(--text-secondary); font-size: var(--type-caption); }
.board-smoke { animation: saufaffe-board-smoke 6s ease-in-out 4 alternate; }
.board-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: saufaffe-board-flicker 0.8s ease-in-out 12 alternate; }
.board-gold-glow { transform-box: fill-box; transform-origin: 50% 50%; animation: saufaffe-board-gold 1.4s ease-in-out 12 alternate; }
.board-gold, .board-gold-next, .board-closed { pointer-events: none; }
.board-weather { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; margin: 0; padding: 0.4rem 0.7rem; border: 2px solid var(--border-subtle); border-radius: var(--radius-panel); background: var(--surface-raised); font-size: var(--type-small); }
.board-weather:not(.board-weather-clear) { border-color: var(--chip-gold); }
.board-weather > svg { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }
.board-weather span { color: var(--text-secondary); }
.board-weather em { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; padding: 0.1rem 0.55rem 0.1rem 0.3rem; border-radius: 999px; color: var(--ink); background: var(--chip-gold); font-size: var(--type-caption); font-style: normal; font-weight: 800; }
.board-weather em svg { width: 1.1rem; height: 1.1rem; }
.board-prizes { display: grid; width: 100%; justify-items: center; gap: 0.5rem; }
.board-prizes h3 { margin: 0; font-size: var(--type-body); }
.board-prizes ol { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.board-prize { display: grid; min-width: 0; align-content: start; justify-items: center; gap: 0.2rem; padding: 0.5rem 0.3rem; border: 3px solid var(--ink); border-radius: var(--radius-panel); color: var(--ink); background: var(--chip-gold); text-align: center; animation: saufaffe-board-prize 0.6s var(--motion-ease-emphasized) both; }
.board-prize:nth-child(2) { animation-delay: 0.7s; }
.board-prize:nth-child(3) { animation-delay: 1.4s; }
.board-prize.is-tie { background: var(--paper-material); }
.board-prize small { font-size: var(--type-caption); font-weight: 900; }
.board-prize strong { max-width: 100%; font-size: var(--type-small); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.board-prize span { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15rem; font-size: var(--type-caption); }
.board-prize span svg { width: 1rem; height: 1rem; }
.board-prize-avatar { display: grid; width: 2.6rem; height: 2.6rem; border-radius: 50%; }
@keyframes saufaffe-board-prize { from { opacity: 0; transform: perspective(600px) rotateY(90deg) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes saufaffe-board-gold { from { scale: 0.85; } to { scale: 1.25; } }
@keyframes saufaffe-board-cheer { 0%, 100% { translate: 0 0; } 40% { translate: 0 -0.6rem; } }
@keyframes saufaffe-board-smoke { from { translate: 0 0; } to { translate: 6px -10px; } }
@keyframes saufaffe-board-flicker { from { scale: 1 1; } to { scale: 0.9 1.12; } }

.room-layout-table .play-column { gap: 0.6rem; }
.tisch-sheet { display: flex; justify-content: flex-end; }
.tisch-loading { margin: 2rem auto; color: var(--text-secondary); text-align: center; }
.lazy-module-problem { display: grid; justify-items: center; gap: 0.75rem; margin: 2rem auto; max-width: 28rem; padding: 0 1rem; color: var(--text-secondary); text-align: center; }
.lobby-table .lobby-poker-check span { display: grid; }
.lobby-table .lobby-poker-check small { color: var(--text-secondary); font-size: var(--type-caption); font-weight: 700; }
.table-duration { margin: -0.2rem 0 0; color: var(--text-secondary); font-size: var(--type-small); font-weight: 700; }
.lobby-table .tisch-rules { padding: 0.5rem 0.7rem; border: 2px solid var(--border-subtle); border-radius: var(--radius-panel); }
.tisch-rules summary { font-weight: 900; cursor: pointer; }
.tisch-rules ul { display: grid; gap: 0.25rem; margin: 0.5rem 0 0.1rem; padding-left: 1.1rem; color: var(--text-secondary); font-size: var(--type-small); }

.haus-crew:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.haus-crew { display: flex; min-width: 0; gap: 0.35rem; margin: 0; padding: 0 0 0.2rem; overflow-x: auto; list-style: none; scrollbar-width: none; }
.haus-crew-member { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem 0.25rem 0.3rem; border: 2px solid var(--border-subtle); border-radius: 999px; background: var(--surface-raised); font-size: var(--type-caption); font-weight: 800; }
.haus-crew-member.is-turn { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(201, 242, 74, 0.25); }
.haus-crew-member.is-viewer span { color: var(--brand-text); }
.haus-crew-member.is-out { opacity: 0.45; }
.haus-crew-member b { font-family: var(--font-number); font-size: var(--type-small); }
.haus-crew-dot { width: 1.7rem; height: 1.6rem; }
.haus-mud { padding: 0 0.35rem; border-radius: 999px; color: #f5f1e8; background: #6b4a32; font-size: var(--type-micro); }
.haus-close { padding: 0 0.35rem; border-radius: 999px; color: var(--ink); background: var(--chip-gold); font-size: var(--type-micro); }
.haus-board-frame { position: relative; min-width: 0; }
.haus-board { display: block; width: 100%; height: auto; max-height: min(78vh, 46rem); border: 4px solid var(--ink); border-radius: var(--radius-scene); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4); }
.haus-hut.is-turn circle { stroke: #c9f24a; stroke-width: 6px; }
.haus-piece.is-movable { cursor: pointer; }
.haus-piece.is-movable circle:first-child { animation: saufaffe-haus-glow 0.7s ease-in-out 6 alternate; }
.haus-target { pointer-events: none; }
.haus-die { position: absolute; top: 42%; left: 50%; width: 4.4rem; height: 4.4rem; translate: -50% -50%; pointer-events: none; }
.haus-die-face { position: absolute; inset: 0; opacity: 0; filter: drop-shadow(0 0.5rem 0.6rem rgba(0, 0, 0, 0.45)); }
.haus-die-face svg { display: block; width: 100%; height: 100%; }

.scene-roll { position: absolute; right: 0.55rem; bottom: 0.55rem; z-index: 3; display: grid; justify-items: center; gap: 0.1rem; min-width: 4.4rem; padding: 0.35rem 0.4rem 0.25rem; border: 3px solid var(--ink); border-radius: var(--radius-panel); color: var(--ink); background: var(--brand-primary); box-shadow: 0 0.25rem 0 var(--ink), 0 0.6rem 1.2rem rgba(0, 0, 0, 0.45); font: inherit; font-size: var(--type-small); font-weight: 900; line-height: 1.1; cursor: pointer; touch-action: manipulation; }
.scene-roll svg { display: block; width: 2.5rem; height: 2.5rem; }
.scene-roll:not(:disabled) svg { animation: saufaffe-roll-nudge 0.5s ease-in-out 3; }
.scene-roll:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0.1rem 0 var(--ink); }
.scene-roll:disabled { cursor: not-allowed; opacity: 0.6; }
.scene-roll:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 3px; }

.board-map-frame .scene-roll { min-width: 3.9rem; padding: 0.3rem 0.35rem 0.2rem; }
.board-map-frame .scene-roll svg { width: 2.1rem; height: 2.1rem; }
@keyframes saufaffe-roll-nudge { 0%, 100% { rotate: 0deg; } 50% { rotate: -9deg; } }
@media (min-width: 900px) {
  .haus-stage { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-rows: auto auto auto 1fr; grid-template-areas: "head head" "board crew" "board dock" "board ticker"; align-items: start; column-gap: 1rem; }
  .haus-stage .tisch-head { grid-area: head; }
  .haus-stage .haus-crew { grid-area: crew; flex-direction: column; overflow: visible; }
  .haus-stage .haus-board-frame { grid-area: board; }
  .haus-stage .tisch-dock, .haus-stage .tisch-result { grid-area: dock; }
  .haus-stage .tisch-ticker { grid-area: ticker; }
}
@keyframes saufaffe-haus-glow { from { opacity: 0.35; } to { opacity: 0.85; } }

.race-scene { --race-runner: clamp(2.6rem, 6vw, 4.2rem); }
.race-flag { display: block; width: 2rem; height: 2rem; }
.race-track { display: grid; width: min(100%, 62rem); gap: 0.55rem; margin: 0; padding: 0.6rem; border: 3px solid var(--ink); border-radius: var(--radius-scene); background: #2d4a26; box-shadow: var(--shadow-board); list-style: none; }

.race-lane { --race-jersey: #ffcf4a; display: grid; min-width: 0; grid-template-columns: minmax(0, 11.2rem) minmax(0, 1fr); align-items: center; gap: 0.4rem; }
.race-lane.is-lane-2 { --race-jersey: #7fb6ff; }
.race-lane.is-lane-3 { --race-jersey: #5ad1a0; }
.race-lane.is-lane-4 { --race-jersey: #ff8fc0; }
.race-lane-head, .race-pick { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.2rem 0.45rem; padding: 0.3rem 0.4rem; border-radius: var(--radius-panel); color: var(--text-primary); text-align: left; }

.race-lane-head > :nth-child(n + 3), .race-pick > :nth-child(n + 3) { grid-column: 2 / -1; justify-self: start; }
.race-name small { line-height: 1.25; }

@media (max-width: 719px) {
  .race-pick-cue { display: none; }
}
.race-pick { width: 100%; min-height: var(--target-default); border: 2px solid var(--border-strong); background: var(--surface-raised); font: inherit; text-align: left; cursor: pointer; }
.race-pick:focus-visible { border-color: var(--brand-primary); background: var(--surface-hover); }

@media (hover: hover) {
  .race-pick:hover:not(:disabled) { border-color: var(--brand-primary); background: var(--surface-hover); }
}
.race-pick:disabled { cursor: default; opacity: 0.6; }
.race-bib { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--race-jersey); font-weight: 900; }
.race-name { display: grid; min-width: 0; }
.race-name strong { font-weight: 900; line-height: 1.15; }
.race-name small { color: var(--text-secondary); font-size: var(--type-caption); overflow-wrap: anywhere; }
.race-tag { padding: 0.12rem 0.5rem; border-radius: 999px; color: var(--ink); background: var(--brand-primary); font-size: var(--type-caption); font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.race-pick-cue { color: var(--brand-text); font-size: var(--type-caption); font-weight: 900; text-transform: uppercase; }
.race-run { position: relative; height: calc(var(--race-runner) + 0.5rem); overflow-x: clip; overflow-y: visible; border-radius: 0.5rem; background: repeating-linear-gradient(90deg, transparent 0 1.6rem, rgba(0, 0, 0, 0.06) 1.6rem 3.2rem), #b9844f; box-shadow: inset 0 -0.3rem 0 rgba(0, 0, 0, 0.18); }
.race-run::before, .race-run::after { position: absolute; top: 0; bottom: 0; content: ""; }
.race-run::before { left: calc(var(--race-runner) * 0.5); width: 0.2rem; background: rgba(255, 247, 232, 0.85); }
.race-run::after { right: calc(var(--race-runner) * 0.5 - 0.3rem); width: 0.6rem; background: repeating-conic-gradient(var(--ink) 0 25%, #fff7e8 0 50%) 0 0 / 0.3rem 0.3rem; }
.race-lane.is-own .race-run { box-shadow: inset 0 0 0 3px var(--brand-primary), inset 0 -0.3rem 0 rgba(0, 0, 0, 0.18); }
.race-mark { position: absolute; z-index: 1; top: 55%; left: calc((100% - var(--race-runner)) * var(--race-at, 0) + var(--race-runner) * 0.5); width: calc(var(--race-runner) * 0.62); translate: -50% -50%; }
.race-mark .game-illustration, .race-fx .game-illustration { display: block; width: 100%; height: auto; }
.race-lane.is-finished .race-mark.is-turbo { opacity: 0; }
.race-slot { position: absolute; z-index: 2; top: 0.25rem; bottom: 0.25rem; left: 0; width: calc(100% - var(--race-runner)); pointer-events: none; }
.race-lane.is-finished .race-slot { transform: translateX(100%); }
.race-runner { position: absolute; top: 0; left: 0; width: var(--race-runner); height: var(--race-runner); transform-origin: 50% 90%; }
.race-face { display: grid; width: 100%; height: 100%; box-shadow: 0 0 0 2px var(--ink), 0 0 0 0.3rem var(--race-jersey); }
.race-lane.is-winner .race-face { box-shadow: 0 0 0 2px var(--ink), 0 0 0 0.3rem var(--prize), 0 0 1.2rem rgba(255, 197, 61, 0.7); }
.race-runner-bib { position: absolute; right: -0.3rem; bottom: -0.25rem; min-width: 1.15rem; padding: 0 0.2rem; border: 2px solid var(--ink); border-radius: 0.35rem; color: var(--ink); background: var(--race-jersey); font-size: var(--type-caption); font-weight: 900; line-height: 1.05rem; text-align: center; }
.race-fx { position: absolute; opacity: 0; pointer-events: none; }
.race-fx.is-stumble { top: -55%; left: 5%; width: 90%; }
.race-fx.is-turbo { top: 15%; right: 78%; width: 75%; }
.race-place { position: absolute; z-index: 3; top: 50%; right: calc(var(--race-runner) + 0.45rem); display: grid; min-width: 2rem; height: 2rem; place-items: center; padding: 0 0.3rem; translate: 0 -50%; border: 2px solid var(--ink); border-radius: 0.5rem; color: var(--ink); background: #e9e3d6; font-size: var(--type-small); }
.race-place.is-place-1 { background: var(--prize); }
.race-place.is-place-2 { background: #d6dbe6; }
.race-place.is-place-3 { background: #e0a46a; }
.race-place.is-place-4 { color: var(--text-primary); background: var(--surface-interactive); }
.race-results { display: flex; width: min(100%, 62rem); flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.race-bettor { --figure: clamp(3.2rem, 10vw, 4.4rem); }
.race-results:has(> .is-row) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.5rem 1.4rem; }
.race-bettor.is-row { --figure: 2.5rem; }
@media (min-width: 720px) {
  .race-lane { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
  .race-lane-head > :nth-child(n + 3), .race-pick > :nth-child(n + 3) { grid-column: auto; justify-self: end; }
}
[data-motion="results-reveal"] .race-results { animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) both; }

.hl-steps { display: flex; justify-content: center; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.hl-steps li { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 2px solid var(--border-strong); border-radius: 50%; color: var(--text-secondary); font-size: var(--type-small); font-weight: 900; }
.hl-steps li.is-current { border-color: var(--brand-primary); color: var(--ink); background: var(--brand-primary); }
.hl-steps li.is-done { border-color: var(--brand-deep); color: var(--brand-text); background: var(--brand-soft); }
.hl-board { display: grid; width: min(100%, 26rem); grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(0.8rem, 5vw, 2rem); padding: 1rem 1.2rem 0.8rem; border: 3px solid var(--ink); border-radius: var(--radius-scene); color: var(--ink); background: var(--paper-material); box-shadow: 0 0.4rem 0 var(--ink); }
.hl-column { display: grid; min-width: 0; grid-template-rows: clamp(7rem, 22vh, 10rem) auto auto; justify-items: center; align-items: end; text-align: center; }
.hl-column small { margin-top: 0.4rem; color: #5b5149; font-size: var(--type-caption); font-weight: 900; text-transform: uppercase; }
.hl-column strong { font-size: clamp(1.05rem, 4.6vw, 1.45rem); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.hl-bar { position: relative; display: grid; width: min(100%, 6rem); place-items: start center; border: 3px solid var(--ink); border-radius: 0.6rem 0.6rem 0.2rem 0.2rem; background: #d9cfbf; transform-origin: 50% 100%; }
.hl-column.is-reference .hl-bar { background: repeating-linear-gradient(135deg, #d9cfbf 0 0.5rem, #cbbfac 0.5rem 1rem); }
.hl-column.is-hidden .hl-bar { border-style: dashed; background: transparent; }
.hl-column.is-hidden .hl-bar b { margin-top: 0.4rem; font-size: 2.4rem; line-height: 1; }
.hl-board.is-higher .hl-column.is-truth .hl-bar { background: var(--brand-primary); }
.hl-board.is-lower .hl-column.is-truth .hl-bar { background: var(--focus); }
.hl-column.is-truth .hl-arrow { width: 2rem; height: 2rem; margin-top: 0.3rem; }
.hl-bar[data-level="1"] { height: 5%; }
.hl-bar[data-level="2"] { height: 10%; }
.hl-bar[data-level="3"] { height: 15%; }
.hl-bar[data-level="4"] { height: 20%; }
.hl-bar[data-level="5"] { height: 25%; }
.hl-bar[data-level="6"] { height: 30%; }
.hl-bar[data-level="7"] { height: 35%; }
.hl-bar[data-level="8"] { height: 40%; }
.hl-bar[data-level="9"] { height: 45%; }
.hl-bar[data-level="10"] { height: 50%; }
.hl-bar[data-level="11"] { height: 55%; }
.hl-bar[data-level="12"] { height: 60%; }
.hl-bar[data-level="13"] { height: 65%; }
.hl-bar[data-level="14"] { height: 70%; }
.hl-bar[data-level="15"] { height: 75%; }
.hl-bar[data-level="16"] { height: 80%; }
.hl-bar[data-level="17"] { height: 85%; }
.hl-bar[data-level="18"] { height: 90%; }
.hl-bar[data-level="19"] { height: 95%; }
.hl-bar[data-level="20"] { height: 100%; }
.hl-arrow { display: block; fill: currentColor; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.hl-arrow.is-lower { rotate: 180deg; }
.hl-stamp { margin: 0; rotate: -4deg; }
.hl-stamp strong { display: block; padding: 0.2rem 1rem; border: 4px solid currentColor; border-radius: 0.6rem; font-size: clamp(1.6rem, 7vw, 2.4rem); }
.hl-stamp.is-higher { color: var(--progress); }
.hl-stamp.is-lower { color: var(--focus); }
.hl-actions { display: grid; width: min(100%, 26rem); grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.hl-call { display: grid; min-height: 4.6rem; justify-items: center; align-content: center; gap: 0.2rem; padding: 0.5rem; border: 3px solid var(--ink); border-radius: 1rem; color: var(--ink); font: inherit; font-weight: 900; text-transform: uppercase; cursor: pointer; box-shadow: 0 0.3rem 0 var(--ink); }
.hl-call.is-higher { background: var(--brand-primary); }
.hl-call.is-lower { background: var(--focus); }
.hl-call .hl-arrow { width: 1.8rem; height: 1.8rem; }
.hl-call:disabled { cursor: default; opacity: 0.55; }
.hl-own { margin: 0; color: var(--text-secondary); }
.hl-own strong { color: var(--text-primary); }
.hl-crew { display: flex; width: min(100%, 46rem); flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.hl-person { --figure: clamp(3rem, 9vw, 4rem); }

@media (max-width: 560px) {
  .hl-board { padding: 0.7rem 1rem 0.6rem; }
  .hl-column { grid-template-rows: clamp(4.2rem, 11vh, 5.6rem) auto auto; }
  .hl-column.is-hidden .hl-bar b { margin-top: 0.2rem; font-size: 1.8rem; }
  .hl-call { min-height: 3.8rem; }
  .hl-crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 0.7rem 0.25rem; }
  .hl-person { --figure: 2.7rem; width: 100%; }
}

@media (min-width: 861px) {
  .hl-board { width: min(100%, 32rem); }
  .hl-column strong { overflow-wrap: normal; white-space: nowrap; }
}
.hl-person.is-out:not(:has(.crew-badge)) { opacity: 0.55; }
[data-motion^="higher-lower"] .hl-column.is-truth .hl-bar,
[data-motion="results-reveal"] .hl-column.is-truth .hl-bar { animation: saufaffe-hl-rise 0.7s var(--motion-ease-emphasized) both; }
[data-motion^="higher-lower"] .hl-stamp,
[data-motion="results-reveal"] .hl-stamp { animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) 0.5s both; }
@keyframes saufaffe-hl-rise { from { scale: 1 0; } }

[data-motion="results-reveal"] :is(.quiz-backers, .estimate-runner, .faker-suspect, .never-camp, .sober-row, .easel-result, .tod-resolution, .chain-break, .mine-settled) {
  animation: saufaffe-enter var(--motion-transition) var(--motion-ease-standard) both;
}
[data-feedback-role="hit"][data-motion="bus-driver-correct"] [data-card-reveal="hit"] .bus-playcard,
[data-feedback-role="miss"][data-motion="bus-driver-wrong"] [data-card-reveal="miss"] .bus-playcard {
  animation: saufaffe-card-reveal var(--motion-reveal) var(--motion-ease-emphasized) both;
}
[data-feedback-role="hit"][data-motion="bus-driver-correct"] .bus-last,
[data-feedback-role="hit"][data-motion="who-am-i-correct"] .whoami-said.is-correct,
[data-feedback-role="turn-pass"][data-motion="boomerang-pass"] .boom-target.is-selected,
[data-feedback-role="turn-pass"][data-motion="minefield-distribution"] .mine-trail .is-motion-target,
[data-feedback-role="hit"][data-motion="montagsmaler-correct"] .easel-hits .is-motion-target {
  animation: saufaffe-success var(--motion-feedback) var(--motion-ease-emphasized) both;
}
[data-feedback-role="miss"][data-motion="bus-driver-wrong"] .bus-last {
  animation: saufaffe-nudge var(--motion-feedback) var(--motion-ease-standard) both;
}
[data-motion="duel-reveal"] .duel-facecard.is-revealed {
  animation: saufaffe-flip var(--motion-reveal) var(--motion-ease-emphasized) both;
  backface-visibility: hidden;
}
[data-motion="duel-reveal"] .duel-fighter.is-winner .duel-person {
  animation: saufaffe-success var(--motion-celebration) var(--motion-ease-emphasized) both;
}
[data-motion="duel-reveal"] .duel-clash {
  animation: saufaffe-impact var(--motion-feedback) var(--motion-ease-emphasized) both;
}

[data-motion="duel-reveal"] .duel-prop { animation: saufaffe-duel-draw var(--motion-reveal) var(--motion-ease-emphasized) 0.1s both; }
[data-motion="duel-reveal"] .duel-fx:is(.duel-fx-shot, .duel-fx-double-shot) { animation: saufaffe-duel-bang 0.3s var(--motion-ease-emphasized) 0.3s both; }
[data-motion="duel-reveal"] .duel-fx-shot.is-from-first { transform-origin: 0 50%; }
[data-motion="duel-reveal"] .duel-fx-shot.is-from-second { transform-origin: 100% 50%; }
[data-motion="duel-reveal"] .duel-fx-backfire { animation: saufaffe-duel-puff 0.4s var(--motion-ease-emphasized) 0.3s both; }
[data-motion="duel-reveal"] .duel-fx-heist .duel-fx-mug,
[data-motion="duel-reveal"] .duel-fx-double-heist .duel-fx-mug { animation: saufaffe-duel-swipe 0.6s var(--motion-ease-standard) 0.3s both; }
[data-motion="duel-reveal"] .duel-fx.is-from-second .duel-fx-mug { animation-name: saufaffe-duel-swipe-back; }
[data-motion="duel-reveal"] .duel-fx-double-heist .duel-fx-mug.is-return { animation-name: saufaffe-duel-swipe-back; }
[data-motion="duel-reveal"] .duel-fx-standoff .duel-fx-weed { animation: saufaffe-duel-roll 1.1s var(--motion-ease-standard) 0.3s both; }

[data-motion="duel-reveal"] .duel-fighter:is(.fate-knocked, .fate-gunfight) .crew-figure-avatar:not(.is-reacting) { animation: saufaffe-duel-fall 0.32s var(--motion-ease-emphasized) 0.5s both; }
[data-motion="duel-reveal"] .duel-fighter-second:is(.fate-knocked, .fate-gunfight) .crew-figure-avatar:not(.is-reacting) { animation-name: saufaffe-duel-fall-right; }
[data-motion="duel-reveal"] .duel-head { animation: saufaffe-duel-head var(--motion-celebration) var(--motion-ease-emphasized) 0.7s both; }
[data-motion="duel-reveal"] .duel-head-halo { animation-delay: 0.3s; }
@keyframes saufaffe-duel-draw { from { opacity: 0; scale: 0.3; } }
@keyframes saufaffe-duel-bang {
  0% { opacity: 0; transform: scaleX(0.05); }
  60% { opacity: 1; transform: scaleX(1.12); }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes saufaffe-duel-puff {
  0% { opacity: 0; transform: scale(0.3); }
  55% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes saufaffe-duel-swipe { from { opacity: 0; transform: translateX(62px) translateY(18px) rotate(30deg); } 20% { opacity: 1; } }
@keyframes saufaffe-duel-swipe-back { from { opacity: 0; transform: translateX(-62px) translateY(18px) rotate(-30deg); } 20% { opacity: 1; } }
@keyframes saufaffe-duel-roll { from { opacity: 0; transform: translateX(-70px) rotate(-360deg); } 15% { opacity: 1; } }
@keyframes saufaffe-duel-fall { 0% { rotate: 0deg; } 70% { rotate: -88deg; } 100% { rotate: -74deg; } }
@keyframes saufaffe-duel-fall-right { 0% { rotate: 0deg; } 70% { rotate: 88deg; } 100% { rotate: 74deg; } }
@keyframes saufaffe-duel-head { from { opacity: 0; scale: 0.4; } }
[data-feedback-role="turn-pass"][data-motion="boomerang-pass"] .boom-flight.is-motion-target .boom-object {
  animation: saufaffe-boomerang var(--motion-celebration) var(--motion-ease-emphasized) both;
}
[data-motion="minefield-reveal"] .mine-cell.is-motion-target {
  animation: saufaffe-tile-reveal var(--motion-reveal) var(--motion-ease-emphasized) both;
}
[data-motion="who-am-i-hint"] .whoami-hint.is-motion-target {
  animation: saufaffe-note-reveal var(--motion-reveal) var(--motion-ease-emphasized) both;
}
[data-motion="schoner-reveal"] .level-pillar {
  animation: saufaffe-level-grow var(--motion-transition) var(--motion-ease-standard) both;
}
@media (min-width: 641px) {
  [data-motion="schoner-reveal"] .level-gauge:not(.is-dense) .level-pillar { animation-name: saufaffe-level-rise; }
}
[data-motion="rule-activated"] .decree-stamp {
  animation: saufaffe-stamp var(--motion-celebration) var(--motion-ease-emphasized) both;
}
[data-feedback-role="turn-pass"][data-motion="montagsmaler-drawer-change"] .easel-tag {
  animation: saufaffe-pass var(--motion-transition) var(--motion-ease-emphasized) both;
}
[data-feedback-role="turn-pass"][data-motion="words-chain"] .chain-link.is-latest {
  animation: saufaffe-enter var(--motion-reveal) var(--motion-ease-standard) both;
}
@keyframes saufaffe-level-rise {
  from { opacity: 0.6; transform: scaleY(0.3); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes saufaffe-level-grow {
  from { opacity: 0.6; transform: scaleX(0.3); }
  to { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 860px) {
  .boom-field { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .boom-flight { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 0.7rem; padding-top: 0; text-align: left; }
  .boom-arc { display: none; }
  .boom-object,
  .boom-resolved .boom-object { position: static; grid-row: 1 / span 2; transform: rotate(-18deg); }
  .bus-table { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .bus-turn { justify-items: center; }
  .bus-answers { justify-content: center; }
  .bus-playcard { width: clamp(5.4rem, 24vw, 7rem); }
  .mine-table { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brief" "grid" "aside"; justify-items: center; }
  .mine-grid { width: min(100%, 26rem); }
  .decree-form.game-form { grid-template-columns: minmax(0, 1fr); }
  .easel-layout { grid-template-columns: minmax(0, 1fr); }
  .whoami-board { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
  .duel-handcard:nth-child(1) { rotate: -2deg; translate: 0 0.15rem; }
  .duel-handcard:nth-child(3) { rotate: 2deg; translate: 0 0.15rem; }
  .duel-handcard strong { font-size: 1.05rem; }
}

@media (max-width: 430px) {
  .duel-hand-cards { gap: 0.45rem; }
  .duel-handcard { min-height: 8.4rem; padding-bottom: 0.55rem; }
  .duel-handcard-art { padding: 0.4rem 0.3rem 0.25rem; }
  .bus-route { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bus-stops { grid-column: 1 / -1; grid-row: 2; }
  .bus-route-deck { justify-self: end; }
  .bus-turn h2 { font-size: clamp(1.7rem, 9vw, 2.4rem); }
  .bus-answer { min-width: 0; padding-inline: 0.5rem; }
  .mine-grid { gap: 0.4rem; padding: 0.55rem; }
  
  .mine-tally.is-zero { display: none; }
  .tod-cards { gap: 0.6rem; }
  .tod-card { min-height: 9rem; padding: 0.8rem 0.6rem; }
  .tod-card-prompt { font-size: var(--type-small); }
  .tod-spotlight .scene-prompt { text-align: center; }
  .easel-form.game-form,
  .whoami-form.game-form,
  .faker-form.game-form { grid-template-columns: minmax(0, 1fr); }
  .stage-entry.game-form { grid-template-columns: auto minmax(0, 1fr); }
  .stage-entry .button { grid-column: 2; }
  
  .faker-briefs.is-pair { gap: 0.55rem; }
  .faker-briefs.is-pair .faker-brief:not(.faker-brief-sealed) { padding: 0.7rem 0.55rem 0.8rem; }
  .faker-briefs.is-pair .faker-brief:not(.faker-brief-sealed) h2 { font-size: clamp(0.95rem, 4.4vw, 1.15rem); }
  .faker-briefs.is-pair .faker-brief-mark .game-illustration { width: 2rem; }
  .faker-suspect { width: calc(50% - 0.4rem); }
  .chain-list { gap: 0.6rem 1.1rem; }
  .chain-link + .chain-link::before { width: 1.1rem; }
  .whoami-identity h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  
  .whoami-hints { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
  .whoami-hint.is-revealed { grid-column: 1 / -1; }
  .whoami-hint:is(.is-upcoming, .is-unused) { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 0.2rem; padding: 0.4rem 0.3rem; text-align: center; transform: none; }
  .whoami-hint:is(.is-upcoming, .is-unused) > span { width: 1.6rem; height: 1.6rem; grid-row: auto; font-size: 0.8rem; }
  .whoami-hint:is(.is-upcoming, .is-unused) { position: relative; }
  .whoami-hint:is(.is-upcoming, .is-unused) small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .whoami-hint:is(.is-upcoming, .is-unused) strong { font-size: var(--type-micro); line-height: 1.2; }
}

.poker-layout { width: min(var(--stage-max), calc(100% - 2 * var(--stage-gutter))); min-width: 0; margin: 0 auto; padding: var(--space-shell) 0; }
.poker-table-stage { position: relative; display: grid; min-width: 0; gap: clamp(0.6rem, 2vh, 1.1rem); }

.poker-table-stage::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 70% 52% at 50% 42%, rgba(47, 122, 92, 0.22), transparent 72%);
  content: "";
  pointer-events: none;
}

.poker-hud .poker-table-heading h1 { display: block; padding: 0; color: var(--text-primary); background: none; font-stretch: var(--stretch-display); font-size: clamp(1.45rem, 3vw, 2.3rem); line-height: var(--lead-display); transform: none; }
.poker-hand { display: grid; min-width: 0; gap: 0.9rem; }

.poker-card {
  position: relative;
  display: grid;
  width: clamp(3.4rem, 7vw, 5rem);
  aspect-ratio: 0.72;
  align-content: center;
  justify-items: center;
  gap: 0.02em;
  border-radius: clamp(0.3rem, 12%, 0.65rem);
  color: #18120e;
  background: var(--paper-material);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 16, 0.16), 0 0.18em 0 rgba(0, 0, 0, 0.28), 0 0.5em 1em rgba(0, 0, 0, 0.26);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 0.95;
}
.poker-card > span:last-child { font-size: 1.1em; }
.poker-card.red { color: #c7322b; }
.poker-card-empty { border: 1px dashed rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.table-card-back {
  display: block;
  width: 1.2rem;
  aspect-ratio: 0.72;
  border: 2px solid var(--paper-material);
  border-radius: 0.22rem;
  background: repeating-linear-gradient(135deg, #a93a2e 0 0.22rem, #c4493a 0.22rem 0.44rem);
  box-shadow: 0 0.12rem 0.3rem rgba(0, 0, 0, 0.45);
}

.table-arena { --ring-rx: 44%; --ring-ry: 40%; position: relative; width: 100%; min-width: 0; aspect-ratio: 2.1; min-height: 21rem; max-height: min(34rem, max(21rem, calc(100vh - 30rem))); margin-block: 1.75rem 2.25rem; }
.table-felt {
  position: absolute;
  inset: 21% 14%;
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: clamp(0.25rem, 0.8vh, 0.5rem);
  padding: 0.75rem 1rem;
  border: clamp(0.4rem, 1vw, 0.75rem) solid var(--felt-rail);
  border-radius: 999px;
  color: var(--text-primary);
  background: radial-gradient(ellipse at 50% 32%, var(--felt-light), var(--felt-mid) 58%, var(--felt-dark));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), inset 0 1.5rem 3rem rgba(0, 0, 0, 0.3), 0 0 0 0.18rem #2c1d16, 0 2rem 4rem rgba(0, 0, 0, 0.45);
}
.table-pot { display: flex; align-items: center; gap: 0.5rem; }
.table-pot > span { font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.table-pot strong { color: var(--progress); font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1; }

.table-chips { display: inline-grid; width: 1.5rem; }
.table-chips i { display: block; height: 0.42rem; margin-top: -0.16rem; border: 2px dashed var(--ink); border-radius: 50%; background: var(--chip-gold); box-shadow: 0 0.12rem 0 #8f6f22; }
.table-chips i:first-child { margin-top: 0; }
.table-chips i:nth-child(2) { background: var(--brand-primary); box-shadow: 0 0.12rem 0 var(--brand-deep); }
.table-streets { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.75rem; margin: 0; padding: 0; color: var(--text-primary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.08em; list-style: none; text-transform: uppercase; }
.table-streets li { display: inline-flex; align-items: center; gap: 0.3rem; }
.table-streets li span { width: 0.5rem; height: 0.5rem; border: 2px solid currentColor; border-radius: 50%; }
.table-streets li.is-complete span { background: currentColor; }
.table-streets li.is-current span { border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: 0 0 0 3px rgba(201, 242, 74, 0.3); }
.table-board { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(0.25rem, 0.8vw, 0.6rem); }
.table-board .poker-card { width: clamp(2.2rem, 5vw, 3.9rem); font-size: clamp(0.85rem, 1.8vw, 1.4rem); }
.table-status { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.1rem 1rem; }
.table-turn,
.table-bet { font-size: var(--type-caption); font-weight: 750; }
.table-turn span { margin-right: 0.4rem; font-size: var(--type-micro); letter-spacing: 0.1em; text-transform: uppercase; }
.table-turn strong,
.table-bet strong { overflow-wrap: anywhere; font-size: var(--type-small); }
.table-verdict { margin: 0; font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.poker-settlement-empty { margin: 0; color: var(--text-primary); font-size: var(--type-caption); }

.table-deck { position: relative; display: flex; height: 3.2rem; align-items: center; justify-content: center; margin-top: 0.3rem; }
.table-deck .table-card-back { width: 2.1rem; margin-left: -1.75rem; border-radius: 0.3rem; }
.table-deck .table-card-back:first-child { margin-left: 0; transform: rotate(-5deg); }
.table-deck .table-card-back:nth-child(2) { transform: translateY(-0.12rem); }
.table-deck .table-card-back:nth-child(3) { transform: translateY(-0.24rem) rotate(4deg); }

.table-ring { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.table-seat { --seat-avatar: clamp(2.8rem, 4.6vw, 3.9rem); position: relative; display: grid; width: clamp(6rem, 11vw, 8.5rem); min-width: 0; justify-items: center; gap: 0.2rem; text-align: center; }
.table-seat .poker-seat-avatar { display: grid; width: var(--seat-avatar); height: var(--seat-avatar); border-radius: 50%; box-shadow: var(--figure-ring); }
.table-seat-copy { display: grid; min-width: 0; max-width: 100%; justify-items: center; padding: 0.3rem 0.55rem; border: 1px solid var(--border-subtle); border-radius: 0.8rem; background: rgba(11, 10, 13, 0.88); }
.table-seat-copy strong { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; font-size: 0.8rem; line-height: 1.15; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.table-seat-stack { color: var(--progress); font-size: var(--type-caption); font-weight: 850; white-space: nowrap; }
.table-seat-state { overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-micro); line-height: 1.25; }
.table-seat.is-viewer .table-seat-copy { border-color: rgba(201, 242, 74, 0.5); }
.table-seat.is-current .poker-seat-avatar { box-shadow: 0 0 0 0.2rem var(--surface-canvas), 0 0 0 0.42rem var(--brand-primary), 0 0 1.6rem rgba(201, 242, 74, 0.6); }
.table-seat.is-current .table-seat-copy { border-color: var(--brand-primary); }
.table-seat.is-offline .poker-seat-avatar { opacity: 0.5; filter: grayscale(1); }
.table-seat.is-offline .table-seat-copy { border-style: dashed; }
.table-seat.is-out .poker-seat-avatar { opacity: 0.45; }
.table-seat.is-out .table-seat-stack { color: var(--text-secondary); }
.table-seat-markers { position: absolute; top: -0.35rem; right: 6%; display: flex; gap: 0.15rem; }

.table-seat.is-left .table-seat-markers { right: auto; left: 6%; }
.table-seat.is-far .table-seat-copy { order: -1; }
.table-seat.is-far .table-seat-markers { top: auto; bottom: calc(var(--seat-avatar) - 1.3rem); }
.table-seat-markers > span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--paper-material); font-size: 0.62rem; font-weight: 950; }
.table-seat-markers > [data-poker-position="sb"] { background: #9cc0f2; }
.table-seat-markers > [data-poker-position="bb"] { background: var(--chip-gold); }
.table-seat-bet { min-width: 2.2rem; padding: 0.14rem 0.5rem; border: 2px dashed var(--chip-gold); border-radius: 999px; color: var(--chip-gold); background: var(--ink); font-family: var(--font-number); font-size: var(--type-caption); font-weight: 900; }

.table-seat-hand { display: flex; justify-content: center; }
.table-seat-hand.is-backs { position: absolute; top: calc(var(--seat-avatar) - 1rem); left: calc(50% - var(--seat-avatar) / 2 - 0.85rem); }
.table-seat-hand.is-backs .table-card-back:first-child { transform: rotate(-9deg); }
.table-seat-hand.is-backs .table-card-back:nth-child(2) { margin-left: -0.6rem; transform: rotate(7deg); }
.table-seat.is-left .table-seat-hand.is-backs { right: calc(50% - var(--seat-avatar) / 2 - 0.85rem); left: auto; }
.table-seat.is-far .table-seat-hand.is-backs { top: auto; bottom: -0.45rem; }
.table-seat-hand.is-revealed { gap: 0.2rem; }
.table-seat-hand.is-revealed .poker-card { width: clamp(1.9rem, 3vw, 2.6rem); font-size: clamp(0.75rem, 1.25vw, 1rem); }
.table-seat-hand.is-revealed .poker-card:first-child { transform: rotate(-4deg); }
.table-seat-hand.is-revealed .poker-card:nth-child(2) { transform: rotate(3deg) translateY(0.08rem); }

.table-seat.is-winner .poker-seat-avatar { box-shadow: 0 0 0 0.2rem var(--surface-canvas), 0 0 0 0.42rem var(--progress), 0 0 1.8rem rgba(201, 242, 74, 0.55); }
.table-seat.is-winner .table-seat-copy { border-color: var(--progress); }
.table-seat.is-winner .table-seat-hand .poker-card { box-shadow: inset 0 0 0 1px rgba(23, 19, 16, 0.16), 0 0 0 2px var(--progress), 0 0.5em 1em rgba(0, 0, 0, 0.3); }
.table-seat-wins { display: flex; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 0.2rem; margin-top: 0.15rem; }
.table-seat-win { flex: 0 0 auto; padding: 0.08rem 0.45rem; border: 2px dashed var(--ink); color: var(--ink); background: var(--progress); font-family: var(--font-number); font-size: var(--type-caption); font-weight: 900; min-width: 0; max-width: 100%; overflow-wrap: anywhere; border-radius: 0.8rem; }
.table-seat-win.is-refund { background: var(--chip-gold); font-size: var(--type-micro); }

@supports (top: calc(1px * sin(1deg))) {
  .table-ring:not([data-seat-count="many"]) { position: absolute; inset: 0; display: block; }
  
  .table-ring:not([data-seat-count="many"]) .table-seat-hand.is-revealed {
    position: absolute;
    top: calc(var(--seat-avatar) / 2 - var(--reach-y) * sin(var(--seat-angle)));
    left: calc(50% - var(--reach-x) * cos(var(--seat-angle)));
    transform: translate(-50%, -50%);
  }
  
  .table-ring:not([data-seat-count="many"]) .table-seat.is-far .table-seat-hand.is-revealed {
    top: auto;
    bottom: calc(var(--seat-avatar) / 2 + var(--reach-y) * sin(var(--seat-angle)));
    transform: translate(-50%, 50%);
  }
  .table-seat-hand.is-revealed { --reach-x: var(--hand-reach-x, 7.6rem); --reach-y: var(--hand-reach-y, 3.9rem); }
  
  .table-ring:not([data-seat-count="many"]) .table-seat-bet { position: absolute; top: calc(100% - 0.3rem); left: 50%; transform: translateX(-50%); }
  .table-ring:not([data-seat-count="many"]) .table-seat.is-far .table-seat-bet { top: auto; bottom: calc(100% - 0.3rem); }
}

@supports (top: calc(1px * sin(1deg))) and (container-type: size) {
  .table-arena { container: poker-table / size; }
  @container poker-table (min-width: 60rem) and (min-height: 31rem) {
    .table-ring:not([data-seat-count="many"]) .table-seat-bet {
      top: calc(var(--seat-avatar) / 2 - 3.6rem * sin(var(--seat-angle)));
      left: calc(50% - 5.6rem * cos(var(--seat-angle)));
      transform: translate(-50%, -50%);
    }
    .table-ring:not([data-seat-count="many"]) .table-seat.is-far .table-seat-bet {
      top: auto;
      bottom: calc(var(--seat-avatar) / 2 + 3.6rem * sin(var(--seat-angle)));
      transform: translate(-50%, 50%);
    }
  }
}

@media (min-width: 861px) {
  @supports (top: calc(1px * sin(1deg))) and (width: 1cqw) {
    .table-arena.is-settled { --ring-rx: 44%; --ring-ry: 40%; }
    .table-arena.is-settled .table-seat-hand.is-revealed { --reach-x: calc(8cqw + 3.4rem); --reach-y: calc(11cqh + 0.3rem); }
  }
}
@supports not (top: calc(1px * sin(1deg))) {
  .table-arena { aspect-ratio: auto; max-height: none; display: grid; gap: 0.75rem; }
  .table-felt { position: relative; inset: auto; }
}

.table-dock {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 0.9rem clamp(1rem, 2.5vw, 2rem);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 1.4rem;
  background: linear-gradient(180deg, var(--surface-raised), var(--surface-shell));
  box-shadow: var(--shadow-board);
}
.table-dock[data-poker-decision="acting"] { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary), var(--shadow-board); }
.table-dock-hand { display: flex; min-width: 0; align-items: center; gap: 0.9rem; }
.table-dock-hand h2 { max-width: 7rem; margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
.table-dock-cards { display: flex; gap: 0.35rem; }
.table-dock-cards .poker-card { width: clamp(3.3rem, 5vw, 4.5rem); font-size: clamp(1.2rem, 2vw, 1.55rem); }
.table-dock-cards .poker-card:first-child { transform: rotate(-4deg); }
.table-dock-cards .poker-card:nth-child(2) { transform: rotate(4deg) translateY(0.15rem); }

.table-dock-facts { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin: 0; font-size: var(--type-caption); }
.table-dock-facts > div { display: flex; min-width: 0; align-items: baseline; gap: 0.3rem; white-space: nowrap; }
.table-dock-facts dt { color: var(--text-secondary); }
.table-dock-facts dd { margin: 0; font-weight: 850; }
.table-dock-controls { min-width: 0; }
.table-dock-fieldset { display: grid; min-width: 0; gap: 0.6rem; }
.table-dock-fieldset > legend { margin-bottom: 0.4rem; }
.table-dock .action-buttons .button { min-height: 3.3rem; flex: 1 1 auto; font-size: 1rem; }
.table-raise { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.6rem; }
.table-raise-field { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.3rem 0.6rem; }
.table-raise-field label { color: var(--text-secondary); font-size: var(--type-caption); font-weight: 800; }
.table-raise-field small { grid-column: 1 / -1; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-micro); line-height: 1.4; }
.table-allin-note { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.45; }

.table-dock-start { width: 100%; max-width: 54rem; grid-template-columns: minmax(0, 1fr) auto; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.table-start-copy { min-width: 0; }
.table-start-copy h2 { margin: 0 0 0.25rem; overflow-wrap: anywhere; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.table-start-copy p { max-width: 38rem; margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-small); line-height: 1.45; }

.poker-settlement { display: grid; min-width: 0; gap: clamp(0.9rem, 2.5vh, 1.5rem); }
.poker-close-outcome { display: grid; min-width: 0; gap: 0.4rem; }
.table-arena.is-settled { aspect-ratio: 1.95; max-height: min(36rem, max(27rem, calc(100vh - 26rem))); margin-block: 3.4rem 2.8rem; }
.table-arena.is-settled .table-felt { gap: 0.2rem; }
.table-arena.is-settled .table-board .poker-card { width: clamp(2.2rem, 4.2vw, 3.3rem); font-size: clamp(0.85rem, 1.5vw, 1.2rem); }
.table-arena.is-settled .table-pot strong { font-size: clamp(1.3rem, 2.6vw, 2rem); }
.poker-close-verdict { display: grid; min-width: 0; justify-items: center; gap: 0.25rem; text-align: center; }
.poker-close-verdict h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.15rem, 2.4vw, 1.6rem); }
.poker-close-verdict p { max-width: 40rem; margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-small); line-height: 1.45; }
.poker-private-showdown strong { color: var(--text-primary); }
.poker-close-tab { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 1rem clamp(1.25rem, 4vw, 3.5rem); padding-top: clamp(0.9rem, 2.5vh, 1.5rem); border-top: 2px dashed var(--border-strong); }
.poker-pot-breakdown { width: min(100%, 32rem); min-width: 0; justify-self: center; filter: drop-shadow(0 0.9rem 1.4rem rgba(0, 0, 0, 0.32)); }
.poker-bill { display: grid; min-width: 0; max-width: 32rem; gap: 0.6rem; }
.poker-bill-label { margin: 0; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--paper-rule); color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.poker-settlement-payouts { display: grid; min-width: 0; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.poker-settlement-payouts li { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; }
.poker-settlement-payouts span { min-width: 0; overflow-wrap: anywhere; font-weight: 750; }
.poker-settlement-payouts strong { font-family: var(--font-number); font-size: 1.1rem; white-space: nowrap; }
.poker-bill-avatar { display: grid; width: 2.3rem; height: 2.3rem; border-radius: 50%; }
.poker-bill-pots { display: grid; min-width: 0; gap: 0.5rem; margin: 0; padding: 0.55rem 0 0; border-top: 1px dashed var(--paper-rule); list-style: none; }

.poker-bill-more { min-width: 0; border-top: 1px dashed var(--paper-rule); }
.poker-bill-more > summary { display: flex; min-width: 0; min-height: var(--target-compact); align-items: center; justify-content: space-between; gap: 0.7rem; cursor: pointer; font-size: var(--type-small); font-weight: 850; list-style: none; }
.poker-bill-more > summary::-webkit-details-marker { display: none; }
.poker-bill-more > summary > span { display: inline-flex; min-width: 0; align-items: center; gap: 0.5rem; }
.poker-bill-more > summary > span::after { content: "" / ""; width: 0.45rem; height: 0.45rem; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); }
.poker-bill-more[open] > summary > span::after { transform: translateY(0.1rem) rotate(-135deg); }
.poker-bill-more > summary > b { flex: 0 0 auto; font-family: var(--font-number); }
.poker-bill-more > .poker-bill-pots { padding-bottom: 0.2rem; }
.poker-pot-result { display: grid; min-width: 0; gap: 0.12rem; }
.poker-pot-result-heading { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 0.7rem; }
.poker-pot-result-heading strong { min-width: 0; overflow-wrap: anywhere; font-size: var(--type-small); }
.poker-pot-result-heading b { flex: 0 0 auto; font-family: var(--font-number); font-size: var(--type-small); }
.poker-pot-result p { margin: 0; overflow-wrap: anywhere; font-size: var(--type-caption); }
.poker-pot-result > ul { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.1rem 0.9rem; margin: 0; padding: 0; font-size: var(--type-caption); list-style: none; }
.poker-pot-result > ul strong { font-family: var(--font-number); }
.poker-pot-result small { overflow-wrap: anywhere; color: var(--paper-ink-soft); font-size: var(--type-micro); line-height: 1.35; }
.poker-refunds { display: grid; min-width: 0; gap: 0.2rem; padding-top: 0.55rem; border-top: 1px dashed var(--paper-rule); font-size: var(--type-caption); }
.poker-refunds > strong { color: var(--paper-ink-soft); font-size: var(--type-micro); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.poker-refunds ul { display: grid; min-width: 0; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.poker-refunds li { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.poker-refunds li strong { flex: 0 0 auto; font-family: var(--font-number); }

.poker-next-hand { display: grid; min-width: 0; gap: 0.5rem; }
.poker-next-hand-copy { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.55rem; }
.poker-next-hand-copy h3 { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.05rem, 4.6vw, 1.35rem); }
.poker-next-hand-copy p { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.35; }
.poker-next-hand-copy p:empty { display: none; }
.poker-next-hand > .button,
.poker-next-hand > .waiting-pill { width: 100%; justify-self: stretch; text-align: center; }
.poker-settlement:has(.round-close-dock) { padding-bottom: 9.5rem; }

.poker-showdown { display: grid; min-width: 0; gap: 0.7rem; }
.poker-showdown-heading { min-width: 0; }
.poker-showdown-heading h3 { margin: 0; color: var(--text-secondary); font-size: var(--type-micro); font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.poker-showdown-heading p { margin: 0.2rem 0 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); }
.poker-showdown-grid { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0.2rem clamp(1rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.poker-showdown-hand { display: grid; min-width: 0; min-height: 3.6rem; grid-template-columns: auto minmax(0, 1fr) auto minmax(3.4rem, auto); align-items: center; gap: 0.65rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border-subtle); }
.poker-showdown-avatar { display: grid; width: 2.4rem; height: 2.4rem; border-radius: 50%; }
.poker-showdown-player { display: grid; min-width: 0; }
.poker-showdown-player strong { overflow-wrap: anywhere; font-size: var(--type-small); line-height: 1.2; }
.poker-showdown-player span { overflow-wrap: anywhere; color: var(--text-secondary); font-size: var(--type-caption); }
.poker-showdown-hand.winner .poker-showdown-player strong { color: var(--progress); }
.poker-showdown-hand > b { color: var(--progress); font-family: var(--font-number); text-align: right; white-space: nowrap; }
.poker-best-five { display: flex; min-width: 0; align-items: flex-end; gap: 0.22rem; padding-top: 0.3rem; }
.poker-best-five .poker-card { width: 1.9rem; font-size: 0.78rem; }
.poker-best-five .poker-card[data-poker-from-hand] { box-shadow: inset 0 0 0 1px rgba(23, 19, 16, 0.16), 0 0 0 2px var(--chip-gold), 0 0.5em 1em rgba(0, 0, 0, 0.26); transform: translateY(-0.3rem); }

@media (min-width: 861px) and (max-height: 920px) {
  .poker-hand { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); align-items: center; }
  .table-arena { --ring-rx: 41%; max-height: 34rem; margin-block: 1.5rem 2.5rem; }
  .table-seat { width: clamp(6rem, 9vw, 7rem); }
  .table-dock { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .table-dock-hand { justify-content: space-between; }
  .table-dock-hand h2 { max-width: none; }
  .table-raise { grid-template-columns: minmax(0, 1fr); }
  .table-raise .button { width: 100%; }
  .table-dock-start .button,
  .table-dock-start .waiting-pill { justify-self: start; }
  
  .table-arena.is-settled .table-verdict { display: none; }
}

@media (max-width: 860px) {
  
  .table-arena { --ring-rx: 38%; --ring-ry: 42%; aspect-ratio: 0.95; min-height: 0; max-height: none; margin-block: 1.5rem 2.3rem; }
  .table-felt { inset: 19% 22%; padding: 0.5rem 0.3rem; border-radius: 6rem; }
  .table-turn { display: none; }
  .table-streets { gap: 0.2rem 0.4rem; }
  .table-streets li:not(.is-current) { font-size: 0; }
  .table-board .poker-card { width: clamp(1.85rem, 8.6vw, 2.6rem); font-size: 0.82rem; }
  .table-chips { width: 1.2rem; }
  .table-seat { --seat-avatar: 2.6rem; width: 5.4rem; }
  .table-seat-copy { padding: 0.2rem 0.35rem; }
  .table-seat-copy strong { font-size: var(--type-caption); }
  .table-seat-stack { font-size: var(--type-micro); }
  .table-seat-markers > span { width: 1.45rem; height: 1.45rem; font-size: 0.55rem; }
  .table-card-back { width: 0.95rem; }
  .table-dock { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; padding: 0.6rem 0.7rem; }
  .table-dock-hand { justify-content: space-between; }
  .table-dock-hand h2 { max-width: none; }
  .table-dock-cards .poker-card { width: 3.6rem; font-size: 1.35rem; }
  .table-dock-fieldset > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-dock-facts { order: 3; }
  .table-dock .action-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(6.2rem, 100%), 1fr)); gap: 0.45rem; }
  .table-dock .action-buttons .button { min-height: 3.1rem; padding-inline: 0.3rem; font-size: 0.86rem; }
  .table-dock-start { padding: 0; }
  .table-dock-start .button,
  .table-dock-start .waiting-pill { width: 100%; justify-self: stretch; text-align: center; }

  
  .table-arena.is-settled { --ring-ry: 41%; aspect-ratio: 0.8; max-height: none; margin-block: 2.8rem 3rem; }
  .table-arena.is-settled .table-felt { inset: 24% 20%; }
  
  .table-arena.is-settled:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) { aspect-ratio: 0.68; }
  .table-arena.is-settled .table-pot { display: grid; justify-items: center; gap: 0.1rem; }
  .table-arena.is-settled .table-pot .table-chips { display: none; }
  .table-arena.is-settled .table-board .poker-card { width: clamp(1.45rem, 6.6vw, 2.2rem); font-size: 0.72rem; }
  .table-ring:not([data-seat-count="many"]) .table-seat-hand.is-revealed,
  .table-ring:not([data-seat-count="many"]) .table-seat.is-far .table-seat-hand.is-revealed { position: static; order: -1; transform: none; }
  .table-ring:not([data-seat-count="many"]) .table-seat.is-far .table-seat-hand.is-revealed { order: 3; }
  .table-arena.is-settled { --hand-card: 1.7rem; }
  .table-seat-hand.is-revealed .poker-card { width: var(--hand-card); font-size: 0.7rem; }
  
  .table-arena.is-settled .table-seat:has(.table-seat-hand.is-revealed) .table-seat-markers { top: calc(var(--hand-card) / 0.72 + 0.05rem); }
  .table-arena.is-settled .table-seat.is-far:has(.table-seat-hand.is-revealed) .table-seat-markers { top: auto; bottom: calc(var(--seat-avatar) - 1.3rem + var(--hand-card) / 0.72 + 0.2rem); }
  
  .poker-lobby .table-pot { display: grid; justify-items: center; gap: 0.1rem; }
  .poker-bill { max-width: none; }
  
  .poker-showdown-hand { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.55rem; row-gap: 0; }
  .poker-showdown-hand > .poker-showdown-avatar { grid-row: 1 / -1; }
  .poker-showdown-hand > .poker-showdown-player { grid-column: 2; grid-row: 1; align-self: end; }
  .poker-showdown-hand > .poker-best-five { grid-column: 3; grid-row: 1 / -1; }
  .poker-showdown-hand > b { grid-column: 2; grid-row: 2; align-self: start; text-align: left; font-size: var(--type-small); }
  .poker-showdown-hand:not(:has(> b)) > .poker-showdown-player { grid-row: 1 / -1; align-self: center; }
}

@media (max-width: 430px) {
  
  .room-bar-sound { padding-inline: 0.55rem; }
  .room-bar-sound span, .room-bar-sound small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 359px) {
  .table-seat { width: 5rem; }
  
  .table-board .poker-card { width: 1.6rem; font-size: 0.74rem; }
  
  .poker-lobby .table-felt { padding-top: 1.5rem; }
  .table-arena.is-settled .table-felt { inset: 24% 19%; }
  .table-arena.is-settled:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) { aspect-ratio: 0.62; }
  .table-arena.is-settled .table-board { gap: 0.18rem; }
  .table-arena.is-settled { --hand-card: 1.45rem; }
  .table-seat-hand.is-revealed .poker-card { font-size: 0.62rem; }
  
  .poker-showdown-avatar { width: 2rem; height: 2rem; }
  .poker-best-five { gap: 0.15rem; }
  .poker-best-five .poker-card { width: 1.6rem; font-size: 0.7rem; }
  .poker-showdown-player strong { -webkit-hyphens: auto; hyphens: auto; }
  .table-dock .action-buttons { grid-template-columns: repeat(auto-fit, minmax(min(5.2rem, 100%), 1fr)); gap: 0.35rem; }
  .table-dock .action-buttons .button { padding-inline: 0.3rem; font-size: 0.82rem; }
}

@media (max-width: 860px) {

  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat { --seat-avatar: 2.3rem; width: 4.9rem; gap: 0.12rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-copy { padding: 0.12rem 0.32rem; border-radius: 0.6rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-copy strong { display: block; max-width: 4.3rem; overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-stack { font-size: 0.66rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-state { font-size: 0.62rem; line-height: 1.15; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-markers > span { width: 1.2rem; height: 1.2rem; border-width: 1.5px; font-size: 0.55rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-markers { top: -0.3rem; right: 2%; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat.is-left .table-seat-markers { right: auto; left: 2%; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat.is-far .table-seat-markers { top: auto; bottom: calc(var(--seat-avatar) - 1.1rem); }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-bet { padding: 0.06rem 0.38rem; border-width: 1.5px; font-size: 0.66rem; min-width: 1.8rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-card-back { width: 0.8rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-hand.is-backs { top: calc(var(--seat-avatar) - 0.9rem); left: calc(50% - var(--seat-avatar) / 2 - 0.6rem); }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat.is-left .table-seat-hand.is-backs { right: calc(50% - var(--seat-avatar) / 2 - 0.6rem); left: auto; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat.is-far .table-seat-hand.is-backs { top: auto; bottom: -0.35rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-win { padding: 0 0.3rem; font-size: 0.62rem; border-width: 1.5px; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-win.is-refund { font-size: 0.58rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-wins { margin-top: 0.05rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]).is-settled .table-seat:has(.table-seat-hand.is-revealed) .table-seat-markers { top: -0.3rem; bottom: auto; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]).is-settled .table-seat.is-far:has(.table-seat-hand.is-revealed) .table-seat-markers { top: auto; bottom: calc(var(--seat-avatar) - 1.1rem); }

  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) { aspect-ratio: 0.74; margin-block: 0.6rem 1.6rem; }
  .table-arena.is-settled:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]), .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]):has(.table-seat-hand.is-revealed) { aspect-ratio: 0.7; margin-block: 2.2rem 1.6rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-felt, .table-arena.is-settled:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-felt { inset: 13% 9% 15%; padding: 0.4rem; border-radius: 46% / 40%; }
  
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-felt { align-content: center; gap: 0.3rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-board .poker-card { width: clamp(2rem, 11vw, 2.9rem); font-size: 0.95rem; }
  .table-arena.is-settled:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-board .poker-card { width: clamp(1.9rem, 10vw, 2.6rem); font-size: 0.85rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-ring:is([data-seat-count="7"], [data-seat-count="8"]) .table-seat-hand.is-revealed {
    position: absolute; top: calc(var(--seat-avatar) / 2 + var(--hy, 0rem)); bottom: auto; left: calc(50% + var(--hx, 0rem)); z-index: 2; order: 0; transform: translate(-50%, -50%);
  }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-ring:is([data-seat-count="7"], [data-seat-count="8"]) .table-seat.is-far .table-seat-hand.is-revealed { top: auto; bottom: calc(var(--seat-avatar) / 2 - var(--hy, 0rem)); transform: translate(-50%, 50%); }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-hand.is-revealed { gap: 0.12rem; }
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-seat-hand.is-revealed .poker-card { width: 1.5rem; font-size: 0.62rem; }
  .table-ring[data-seat-count="8"] > [data-seat="0"] { top: 90%; left: 50%; --hx: 0rem; --hy: -2.2rem; }
  .table-ring[data-seat-count="8"] > [data-seat="1"] { top: 76%; left: 15%; --hx: 1.35rem; --hy: 0.35rem; }
  .table-ring[data-seat-count="8"] > [data-seat="2"] { top: 37%; left: 13%; --hx: 1.35rem; --hy: 0.35rem; }
  .table-ring[data-seat-count="8"] > [data-seat="3"] { top: 9%; left: 25%; --hx: 1rem; --hy: 1.7rem; }
  .table-ring[data-seat-count="8"] > [data-seat="4"] { top: 6%; left: 50%; --hx: 0rem; --hy: 1.9rem; }
  .table-ring[data-seat-count="8"] > [data-seat="5"] { top: 9%; left: 75%; --hx: -1rem; --hy: 1.7rem; }
  .table-ring[data-seat-count="8"] > [data-seat="6"] { top: 37%; left: 87%; --hx: -1.35rem; --hy: 0.35rem; }
  .table-ring[data-seat-count="8"] > [data-seat="7"] { top: 76%; left: 85%; --hx: -1.35rem; --hy: 0.35rem; }
  .table-ring[data-seat-count="7"] > [data-seat="0"] { top: 90%; left: 50%; --hx: 0rem; --hy: -2.2rem; }
  .table-ring[data-seat-count="7"] > [data-seat="1"] { top: 76%; left: 15%; --hx: 1.35rem; --hy: 0.35rem; }
  .table-ring[data-seat-count="7"] > [data-seat="2"] { top: 37%; left: 13%; --hx: 1.35rem; --hy: 0.35rem; }
  .table-ring[data-seat-count="7"] > [data-seat="3"] { top: 8%; left: 32%; --hx: 0.6rem; --hy: 1.8rem; }
  .table-ring[data-seat-count="7"] > [data-seat="4"] { top: 8%; left: 68%; --hx: -0.6rem; --hy: 1.8rem; }
  .table-ring[data-seat-count="7"] > [data-seat="5"] { top: 37%; left: 87%; --hx: -1.35rem; --hy: 0.35rem; }
  .table-ring[data-seat-count="7"] > [data-seat="6"] { top: 76%; left: 85%; --hx: -1.35rem; --hy: 0.35rem; }
  
  .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-ring > .table-seat.is-far { transform: translate(-50%, calc(-100% + var(--seat-avatar) / 2)); }
  .table-ring[data-seat-count="8"] > [data-seat="3"],
  .table-ring[data-seat-count="8"] > [data-seat="5"] { top: 13%; }
  .table-ring[data-seat-count="8"] > [data-seat="4"] { top: 10%; }
  .table-ring[data-seat-count="7"] > [data-seat="3"],
  .table-ring[data-seat-count="7"] > [data-seat="4"] { top: 12%; }
  .table-ring[data-seat-count="7"] > [data-seat="2"],
  .table-ring[data-seat-count="7"] > [data-seat="5"] { top: 41%; }
  
  .poker-lobby .table-arena:is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) .table-status { flex-direction: column; align-items: center; gap: 0; }
}

@media (max-width: 860px) {
  
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > .table-seat { --hx: -1.35rem; --hy: 0.35rem; transform: translate(-50%, calc(var(--seat-avatar) / -2 - 1rem)); }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > .table-seat.is-far { transform: translate(-50%, calc(-100% + var(--seat-avatar) / 2 + 1rem)); }
  .table-arena.is-settled:is([data-poker-seat-count="4"], [data-poker-seat-count="5"], [data-poker-seat-count="6"]) { margin-top: 3.6rem; }
  
  .table-ring[data-seat-count="4"] > [data-seat="2"],
  .table-ring[data-seat-count="6"] > [data-seat="3"] { width: 8.5rem; }
  .table-ring[data-seat-count="5"] > :is([data-seat="2"], [data-seat="3"]) { width: 6.8rem; }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > .table-seat.is-left { --hx: 1.35rem; }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > [data-seat="0"] { --hx: 0rem; --hy: -2.2rem; }
  .table-ring[data-seat-count="4"] > [data-seat="2"],
  .table-ring[data-seat-count="6"] > [data-seat="3"] { --hx: 0rem; --hy: 1.9rem; }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) .table-seat-hand.is-revealed,
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) .table-seat.is-far .table-seat-hand.is-revealed {
    position: absolute; top: calc(var(--seat-avatar) / 2 + var(--hy)); bottom: auto; left: calc(50% + var(--hx)); z-index: 2; order: 0; gap: 0.12rem; transform: translate(-50%, -50%);
  }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) .table-seat.is-far .table-seat-hand.is-revealed { top: auto; bottom: calc(var(--seat-avatar) / 2 - var(--hy)); transform: translate(-50%, 50%); }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) .table-seat-hand.is-revealed .poker-card { width: 1.6rem; font-size: 0.66rem; }
  
  .table-arena.is-settled .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) .table-seat:has(.table-seat-hand.is-revealed) .table-seat-markers { top: -0.35rem; bottom: auto; }
  .table-arena.is-settled .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) .table-seat.is-far:has(.table-seat-hand.is-revealed) .table-seat-markers { top: auto; bottom: calc(var(--seat-avatar) - 1.3rem); }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > .table-seat:not(.is-left):not([data-seat="0"]) .table-seat-hand.is-backs { right: calc(50% - var(--seat-avatar) / 2 - 0.85rem); left: auto; }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > .table-seat.is-left .table-seat-hand.is-backs { right: auto; left: calc(50% - var(--seat-avatar) / 2 - 0.85rem); }
  
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > .table-seat.is-far .table-seat-hand.is-backs { bottom: calc(var(--seat-avatar) / 2 - 0.75rem); }
}
@media (max-width: 359px) {
  
  .table-arena.is-settled:is([data-poker-seat-count="4"], [data-poker-seat-count="5"], [data-poker-seat-count="6"]) { aspect-ratio: 0.66; }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > .table-seat { --hx: -1.05rem; }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > .table-seat.is-left { --hx: 1.05rem; }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) > [data-seat="0"] { --hx: 0rem; --hy: -1.9rem; }
  .table-ring[data-seat-count="4"] > [data-seat="2"],
  .table-ring[data-seat-count="6"] > [data-seat="3"] { --hx: 0rem; --hy: 1.7rem; }
  .table-ring:is([data-seat-count="4"], [data-seat-count="5"], [data-seat-count="6"]) .table-seat-hand.is-revealed .poker-card { width: 1.45rem; font-size: 0.62rem; }
  
  .table-ring[data-seat-count="6"] > :is([data-seat="1"], [data-seat="5"]) { --hy: 1rem; }
}

@media (max-width: 359px) {
  .table-ring[data-seat-count="8"] > :is([data-seat="3"], [data-seat="4"], [data-seat="5"]) { width: 4.4rem; }
  .table-ring[data-seat-count="8"] > :is([data-seat="3"], [data-seat="4"], [data-seat="5"]) .table-seat-copy strong { max-width: 3.8rem; }
  .table-ring[data-seat-count="8"] > [data-seat="3"] { left: 22%; }
  .table-ring[data-seat-count="8"] > [data-seat="5"] { left: 78%; }
}

[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-poker-motion-target="seat-hand"] .poker-card {
  animation: saufaffe-poker-deal var(--motion-transition) var(--motion-ease-emphasized) calc(var(--poker-runout, 0ms) + 150ms) both;
}

.poker-table-stage { --winner-at: calc(var(--poker-runout, 0ms) + 300ms); }
.poker-table-stage[data-revealed-count="2"] { --winner-at: calc(var(--poker-runout, 0ms) + 1000ms); }
.poker-table-stage[data-revealed-count="3"] { --winner-at: calc(var(--poker-runout, 0ms) + 1350ms); }
.poker-table-stage[data-revealed-count="4"] { --winner-at: calc(var(--poker-runout, 0ms) + 1700ms); }
.poker-table-stage[data-revealed-count="5"] { --winner-at: calc(var(--poker-runout, 0ms) + 2050ms); }
.poker-table-stage[data-revealed-count="6"] { --winner-at: calc(var(--poker-runout, 0ms) + 2400ms); }
.poker-table-stage[data-revealed-count="7"] { --winner-at: calc(var(--poker-runout, 0ms) + 2750ms); }
.poker-table-stage[data-revealed-count="8"] { --winner-at: calc(var(--poker-runout, 0ms) + 3100ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="0"] [data-poker-motion-target="seat-hand"] .poker-card { animation-delay: calc(var(--poker-runout, 0ms) + 300ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="0"] [data-poker-motion-target="seat-hand"] .poker-card:nth-child(2) { animation-delay: calc(var(--poker-runout, 0ms) + 380ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="0"] .table-seat-state { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) calc(var(--poker-runout, 0ms) + 520ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="1"] [data-poker-motion-target="seat-hand"] .poker-card { animation-delay: calc(var(--poker-runout, 0ms) + 650ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="1"] [data-poker-motion-target="seat-hand"] .poker-card:nth-child(2) { animation-delay: calc(var(--poker-runout, 0ms) + 730ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="1"] .table-seat-state { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) calc(var(--poker-runout, 0ms) + 870ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="2"] [data-poker-motion-target="seat-hand"] .poker-card { animation-delay: calc(var(--poker-runout, 0ms) + 1000ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="2"] [data-poker-motion-target="seat-hand"] .poker-card:nth-child(2) { animation-delay: calc(var(--poker-runout, 0ms) + 1080ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="2"] .table-seat-state { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) calc(var(--poker-runout, 0ms) + 1220ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="3"] [data-poker-motion-target="seat-hand"] .poker-card { animation-delay: calc(var(--poker-runout, 0ms) + 1350ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="3"] [data-poker-motion-target="seat-hand"] .poker-card:nth-child(2) { animation-delay: calc(var(--poker-runout, 0ms) + 1430ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="3"] .table-seat-state { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) calc(var(--poker-runout, 0ms) + 1570ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="4"] [data-poker-motion-target="seat-hand"] .poker-card { animation-delay: calc(var(--poker-runout, 0ms) + 1700ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="4"] [data-poker-motion-target="seat-hand"] .poker-card:nth-child(2) { animation-delay: calc(var(--poker-runout, 0ms) + 1780ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="4"] .table-seat-state { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) calc(var(--poker-runout, 0ms) + 1920ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="5"] [data-poker-motion-target="seat-hand"] .poker-card { animation-delay: calc(var(--poker-runout, 0ms) + 2050ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="5"] [data-poker-motion-target="seat-hand"] .poker-card:nth-child(2) { animation-delay: calc(var(--poker-runout, 0ms) + 2130ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="5"] .table-seat-state { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) calc(var(--poker-runout, 0ms) + 2270ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="6"] [data-poker-motion-target="seat-hand"] .poker-card { animation-delay: calc(var(--poker-runout, 0ms) + 2400ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="6"] [data-poker-motion-target="seat-hand"] .poker-card:nth-child(2) { animation-delay: calc(var(--poker-runout, 0ms) + 2480ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="6"] .table-seat-state { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) calc(var(--poker-runout, 0ms) + 2620ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="7"] [data-poker-motion-target="seat-hand"] .poker-card { animation-delay: calc(var(--poker-runout, 0ms) + 2750ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="7"] [data-poker-motion-target="seat-hand"] .poker-card:nth-child(2) { animation-delay: calc(var(--poker-runout, 0ms) + 2830ms); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] [data-reveal-order="7"] .table-seat-state { animation: saufaffe-stamp var(--motion-reveal) var(--motion-ease-emphasized) calc(var(--poker-runout, 0ms) + 2970ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .table-seat.is-winner .table-seat-copy { animation: saufaffe-winner-plate 1ms linear var(--winner-at) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .table-seat-wins { animation: saufaffe-arrive 1ms linear calc(var(--winner-at) + 520ms) both, saufaffe-poker-payout var(--motion-feedback) var(--motion-ease-emphasized) calc(var(--winner-at) + 520ms) both; }

.table-seat-stack { position: relative; }
.stack-before { position: absolute; inset: 0; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .stack-final { animation: saufaffe-arrive 1ms linear calc(var(--winner-at) + 520ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .stack-before { animation: saufaffe-leave 1ms linear calc(var(--winner-at) + 520ms) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .poker-heading-final { animation: saufaffe-enter var(--motion-reveal) var(--motion-ease-standard) var(--winner-at) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .poker-heading-pending { animation: saufaffe-leave 1ms linear var(--winner-at) both; }
.poker-table-heading h1 { position: relative; }
.poker-heading-pending { position: absolute; inset: 0; }

.poker-seat-avatar > .caricature-art { grid-area: 1 / 1; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .poker-seat-avatar > .caricature-before { animation: saufaffe-leave 1ms linear var(--winner-at) both; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .poker-seat-avatar > .caricature-before + .caricature-art { animation: saufaffe-arrive 1ms linear var(--winner-at) both; }

.poker-heading-pending,
.stack-before,
.caricature-before { display: none; }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion-mode="reduced"]) [data-motion="poker-settlement"] :is(.poker-heading-pending, .stack-before, .caricature-before) { display: block; }
}
:root[data-motion-mode="full"] [data-motion="poker-settlement"] :is(.poker-heading-pending, .stack-before, .caricature-before) { display: block; }
@keyframes saufaffe-winner-ring {
  from { box-shadow: var(--figure-ring); }
  to { box-shadow: 0 0 0 0.2rem var(--surface-canvas), 0 0 0 0.42rem var(--progress), 0 0 1.8rem rgba(201, 242, 74, 0.55); }
}
@keyframes saufaffe-winner-plate {
  from { border-color: var(--border-subtle); }
  to { border-color: var(--progress); }
}
@keyframes saufaffe-leave {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}
@keyframes saufaffe-arrive {
  from { visibility: hidden; }
  to { visibility: visible; }
}

.table-flight { position: fixed; z-index: 40; top: 0; left: 0; display: inline-grid; pointer-events: none; }
.table-flight-chips { width: 1.4rem; }
.table-flight-chips i { display: block; height: 0.4rem; margin-top: -0.15rem; border: 2px dashed var(--ink); border-radius: 50%; background: var(--chip-gold); box-shadow: 0 0.12rem 0 #8f6f22; }
.table-flight-chips i:first-child { margin-top: 0; }
.table-flight-cards { grid-auto-flow: column; }
.table-flight-cards .table-card-back { width: 0.95rem; }
.table-flight-cards .table-card-back:nth-child(2) { margin-left: -0.55rem; transform: rotate(8deg); }

.table-flight-card .table-card-back { width: 1.2rem; }
.table-flight-call { padding: 0.12rem 0.55rem; border: 2px solid var(--ink); border-radius: 0.8rem 0.8rem 0.8rem 0.15rem; color: var(--ink); background: var(--paper-material); font-size: var(--type-caption); font-weight: 900; white-space: nowrap; }
.table-flight-call.is-hot { color: var(--paper-material); background: #ff7a5e; }
.table-flight-dark { z-index: 39; width: 100vw; height: 100vh; }
.table-flight-dark.is-skippable { pointer-events: auto; cursor: pointer; }
.table-flight-stamp { z-index: 41; padding: 0.2rem 0.9rem; border: 4px solid var(--ink); border-radius: 1rem; color: var(--paper-material); background: #ff7a5e; box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.5); font-size: clamp(2.1rem, 8.5vw, 3rem); font-stretch: var(--stretch-display); font-weight: 900; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.table-flight-stamp.is-broke { padding: 0.1rem 0.5rem; border-color: #e0442a; border-radius: 0.4rem; color: #e0442a; background: rgba(244, 239, 229, 0.94); box-shadow: none; font-size: 1.2rem; letter-spacing: 0.04em; }
.table-flight-ring { width: 4rem; height: 4rem; border: 3px solid var(--brand-primary); border-radius: 50%; }
.table-flight-rays { z-index: 39; width: 14rem; height: 14rem; border-radius: 50%; background: repeating-conic-gradient(rgba(201, 242, 74, 0.5) 0 10deg, rgba(201, 242, 74, 0) 10deg 24deg); mask: radial-gradient(circle, transparent 22%, #000 32%, transparent 70%); }
.table-flight-confetti { width: 0.5rem; height: 0.75rem; border: 1.5px solid var(--ink); border-radius: 2px; }
.table-flight-confetti.is-lime { background: var(--brand-primary); }
.table-flight-confetti.is-gold { background: var(--chip-gold); }
.table-flight-confetti.is-tomato { background: #ff7a5e; }
.table-flight-confetti.is-pink { background: #ff9ad5; }
.table-flight-confetti.is-blue { background: #7cc9ff; }
.table-flight-confetti.is-paper { background: var(--paper-material); }

.table-felt { isolation: isolate; }
.table-felt-light { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.table-spot { position: absolute; top: 0; left: 0; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(201, 242, 74, 0.42), rgba(201, 242, 74, 0) 65%); }
.table-spot.is-on { opacity: 1; }

.table-arena.has-best :not(.table-seat-hand) > .poker-card[data-poker-best] { box-shadow: 0 0 0 2px var(--brand-primary), 0 0 0.9rem rgba(201, 242, 74, 0.75), 0 0.3em 0.6em rgba(0, 0, 0, 0.3); translate: 0 -0.2rem; }
.table-arena.has-best :not(.table-seat-hand) > .poker-card:not([data-poker-best]) { filter: brightness(0.58); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .table-arena.has-best :not(.table-seat-hand) > .poker-card[data-poker-best] { animation: saufaffe-best-lift var(--motion-transition) cubic-bezier(0.34, 1.56, 0.64, 1) var(--winner-at) backwards; }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .table-arena.has-best :not(.table-seat-hand) > .poker-card:not([data-poker-best]) { animation: saufaffe-best-dim var(--motion-reveal) var(--motion-ease-standard) var(--winner-at) backwards; }

.table-arena.has-best .table-seat-hand > .poker-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(12, 10, 8, 0.42); pointer-events: none; }
.table-arena.has-best .table-seat-hand > .poker-card[data-poker-best]::after { background: none; box-shadow: 0 0 0 2px var(--brand-primary), 0 0 0.9rem rgba(201, 242, 74, 0.75); }
[data-feedback-role="settlement"][data-motion="poker-settlement"] .table-arena.has-best .table-seat-hand > .poker-card::after { animation: saufaffe-best-layer var(--motion-reveal) var(--motion-ease-standard) var(--winner-at) backwards; }
@keyframes saufaffe-best-layer { from { opacity: 0; } }
@keyframes saufaffe-best-lift {
  from { box-shadow: inset 0 0 0 1px rgba(23, 19, 16, 0.16), 0 0.18em 0 rgba(0, 0, 0, 0.28); translate: 0 0; }
  60% { translate: 0 -0.45rem; }
}
@keyframes saufaffe-best-dim { from { filter: none; } }

.poker-seat-avatar { position: relative; }
.poker-crown { position: absolute; z-index: 1; top: -0.7rem; left: 50%; width: 1.5rem; translate: -50% 0; rotate: -8deg; filter: drop-shadow(0 0.15rem 0.15rem rgba(0, 0, 0, 0.45)); }
.poker-crown svg { display: block; width: 100%; height: auto; }

.entry-notice { margin: 0; padding: 0.7rem 0.85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow-wrap: anywhere; color: var(--text-primary); font-size: var(--type-small); font-weight: 750; line-height: 1.35; }
.entry-notice.error { border-color: var(--danger); background: rgba(255, 123, 110, 0.16); }
.entry-notice.success { border-color: var(--progress); background: var(--progress-soft); }
.entry-notice.info { background: var(--surface-interactive); }
.entry-console > .entry-notice { margin: 0.6rem 0.75rem 0; }
.entry-fields :is(input, select)[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--field-error-ring); }

.notice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: 0.35rem 0.35rem 0.35rem 1rem; }
.notice p { margin: 0; }
.notice-close {
  display: grid;
  place-items: center;
  width: var(--target-compact);
  height: var(--target-compact);
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.notice-close .saufaffe-icon { width: 1.1rem; height: 1.1rem; }
.notice-close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

@media (max-width: 860px) {
  [data-chrome="stage"] > .room-bar { display: none; }
  [data-chrome="stage"] .room-layout,
  [data-chrome="stage"] .poker-layout { padding-top: 0.75rem; }
}
.sheet-room { display: flex; min-width: 0; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--border-subtle); }
.sheet-room .sheet-leave { margin-left: auto; }

.sheet-tools { display: flex; min-width: 0; grid-column: 1 / -1; flex-wrap: wrap; gap: 0.5rem; }
.sheet-tile, .sound-toggle.sheet-tile, .sheet-haptics.sheet-tile { display: grid; min-width: 0; flex: 1 1 5.6rem; min-height: 3.7rem; align-content: center; justify-items: center; gap: 0.1rem; padding: 0.4rem 0.3rem; border: 1px solid var(--border-strong); border-radius: 0.9rem; color: var(--text-primary); background: var(--surface-interactive); font: inherit; font-size: var(--type-caption); font-weight: 850; line-height: 1.15; text-align: center; cursor: pointer; }
.sheet-tile:hover { background: var(--surface-hover); }
.sheet-tile:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sheet-tile > .saufaffe-icon { width: 1.25rem; height: 1.25rem; color: var(--brand-text); }
.sheet-tile > small { color: var(--text-secondary); font-size: var(--type-micro); font-weight: 800; }
.sheet-tile[aria-pressed="false"] { border-style: dashed; color: var(--text-secondary); }
.sheet-tile[aria-pressed="false"] > .saufaffe-icon { color: var(--text-secondary); }
.sheet-tile.motion-preference { display: grid; color: var(--text-primary); cursor: default; }
.sheet-tile.motion-preference select { width: auto; max-width: 100%; min-width: 0; min-height: 1.5rem; padding: 0 1.3rem 0 0.35rem; border-color: transparent; color: var(--text-secondary); background-color: transparent; font-size: var(--type-micro); }

@media (min-width: 861px) {
  .session-sheet-crew { grid-row: span 4; }
  .session-sheet-body > :is(.sheet-host, .sheet-away, .sheet-tools) { grid-column: 2; }
  .session-sheet-body > .sheet-away { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
.sheet-screen-url { grid-column: 1 / -1; margin: -0.4rem 0 0; color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.45; }
.sheet-screen-url code { overflow-wrap: anywhere; color: var(--text-primary); }

.sound-toggle, .sheet-haptics { display: inline-flex; align-items: center; gap: 0.35rem; }
.sound-toggle .saufaffe-icon, .sheet-haptics .saufaffe-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.sound-toggle small, .sheet-haptics small { color: var(--text-secondary); font-size: var(--type-caption); font-weight: 800; }
:is(.sound-toggle, .sheet-haptics)[aria-pressed="false"] { border-style: dashed; color: var(--text-secondary); }

.motion-preference { display: inline-flex; min-width: 0; align-items: center; gap: 0.45rem; color: var(--text-secondary); font-size: var(--type-caption); font-weight: 800; }
.motion-preference select { width: auto; min-height: var(--target-compact); padding: 0.35rem 0.6rem; font-weight: 800; }
.lobby-me .motion-preference { display: flex; margin-bottom: 0.9rem; }
.room-bar-sound { flex: 0 0 auto; }

.sheet-host { display: grid; min-width: 0; grid-column: 1 / -1; gap: 0.4rem; }
.sheet-host h2 { padding-bottom: 0.4rem; border-bottom: 1px solid var(--border-strong); }
.sheet-host p { margin: 0; color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.4; }
.sheet-host-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; }
.sheet-host-actions .button { width: 100%; padding-inline: 0.6rem; font-size: var(--type-caption); line-height: 1.2; }
.sheet-code .saufaffe-icon { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--brand-text); }
.session-sheet-guide { min-width: 0; grid-column: 1 / -1; }
.session-sheet-guide h2 { margin-bottom: 0.3rem; }
.session-sheet-guide p { margin: 0; overflow-wrap: anywhere; color: var(--text-primary); font-size: var(--type-small); line-height: 1.45; }
.session-sheet-note { grid-column: 1 / -1; margin: 0; color: var(--text-tertiary); font-size: var(--type-caption); text-align: center; }

.offline-banner { position: sticky; top: 0; z-index: 30; display: flex; min-width: 0; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.6rem var(--stage-gutter); color: var(--ink); background: var(--chip-gold); font-size: var(--type-small); line-height: 1.3; text-align: center; }
.offline-banner .saufaffe-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.offline-banner span { min-width: 0; overflow-wrap: anywhere; }
[data-connection="offline"] main { opacity: 0.6; }

@media (min-width: 861px) and (max-height: 920px) {
  .poker-settlement { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); align-items: start; column-gap: 0.9rem; }
  .poker-close-tab { grid-template-columns: minmax(0, 1fr); align-content: start; padding-top: 0; border-top: 0; }
  .poker-settlement > .poker-showdown { grid-column: 1 / -1; }
}

:is(.fx-ring, .fx-puff, .fx-spark, .fx-stamp, .fx-fleck, .fx-burst, .fx-confetti, .fx-dark, .fx-glass, .fx-pop) { position: absolute; top: 0; left: 0; z-index: 3; opacity: 0; pointer-events: none; }
.fx-ring { width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border: 4px solid var(--paper-material); border-radius: 50%; }
.fx-ring-gold { border-color: var(--chip-gold); }
.fx-ring-tomato { border-color: #ff7a5e; }
.fx-ring-lime { border-color: var(--brand-primary); }
.fx-ring-pink { border-color: #ff9ad5; }
.fx-ring-mud { border-color: #6b4a32; }
.fx-puff { width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem; border-radius: 50%; background: rgba(240, 225, 200, 0.85); }
.fx-puff-mud { width: 0.55rem; height: 0.55rem; margin: -0.275rem 0 0 -0.275rem; border: 1.5px solid var(--ink); background: #6b4a32; }
.fx-spark { width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; }
.fx-spark.is-big { width: 4.4rem; height: 4.4rem; margin: -2.2rem 0 0 -2.2rem; }
:is(.fx-spark, .fx-burst) svg { display: block; width: 100%; height: 100%; }
.fx-stamp { z-index: 4; max-width: 17rem; padding: 0.1rem 0.6rem; border: 4px solid #e0442a; border-radius: 0.45rem; color: #e0442a; background: rgba(244, 239, 229, 0.94); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); font-size: clamp(1.4rem, 7vw, 2.1rem); font-stretch: var(--stretch-display); font-weight: 900; letter-spacing: 0.03em; line-height: 1.05; text-align: center; text-transform: uppercase; text-wrap: balance; }
.fx-stamp-gold { border-color: var(--ink); color: var(--ink); background: var(--chip-gold); }
.fx-stamp-lime { border-color: var(--ink); color: var(--ink); background: var(--brand-primary); }
.fx-fleck { width: 0.45rem; height: 0.45rem; margin: -0.225rem 0 0 -0.225rem; border-radius: 50%; background: #e0442a; }
.fx-fleck-gold, .fx-fleck-lime { background: var(--ink); }
.fx-burst { z-index: 5; width: min(80vw, 17rem); aspect-ratio: 280 / 190; translate: -50% -50%; filter: drop-shadow(0 0.5rem 0.6rem rgba(0, 0, 0, 0.45)); }
.fx-confetti { z-index: 4; width: 0.55rem; height: 0.8rem; margin: -0.4rem 0 0 -0.275rem; border: 1.5px solid var(--ink); border-radius: 2px; }
.fx-confetti-lime { background: var(--brand-primary); }
.fx-confetti-gold { background: var(--chip-gold); }
.fx-confetti-tomato { background: #ff7a5e; }
.fx-confetti-blue { background: #7cc9ff; }
.fx-confetti-pink { background: #ff9ad5; }
.fx-confetti-paper { background: var(--paper-material); }
.fx-dark { inset: 0; z-index: 2; background: radial-gradient(circle at var(--fx-x) var(--fx-y), rgba(5, 4, 8, 0) var(--fx-r), rgba(5, 4, 8, 0.82) calc(var(--fx-r) + 4.5rem)); }
.fx-glass { z-index: 4; display: grid; width: 2.9rem; height: 4.3rem; margin: -2.15rem 0 0 -1.45rem; justify-items: center; }
.fx-glass-cup { position: relative; display: block; width: 2.3rem; height: 3.1rem; overflow: hidden; border: 3px solid var(--ink); border-top-width: 0; border-radius: 0 0 0.55rem 0.55rem; background: rgba(255, 255, 255, 0.6); }
.fx-glass-beer { position: absolute; inset: 0.4rem 0 0; background: linear-gradient(#fffbe6 0 0.5rem, #ffd23f 0.5rem, #f0a92b); transform-origin: 50% 100%; }
.fx-glass small { margin-top: -0.3rem; padding: 0 0.4rem; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); background: #ff7a5e; font-size: var(--type-micro); font-weight: 900; white-space: nowrap; }
.fx-pop { z-index: 4; color: var(--paper-material); font-size: 1.3rem; font-weight: 900; line-height: 1; text-shadow: 0 2px 0 var(--ink), 0 0 2px var(--ink); white-space: nowrap; }
.fx-pop-gold { color: var(--chip-gold); }

:root[data-motion-mode="reduced"] *,
:root[data-motion-mode="reduced"] *::before,
:root[data-motion-mode="reduced"] *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion-mode="full"]) *,
  :root:not([data-motion-mode="full"]) *::before,
  :root:not([data-motion-mode="full"]) *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 860px) and (max-height: 760px) {
  .table-arena:not(.is-settled) { aspect-ratio: 1.35; margin-block: 1.2rem 1.6rem; }
  .table-arena:not(.is-settled):is([data-poker-seat-count="7"], [data-poker-seat-count="8"]) { aspect-ratio: 1.3; margin-block: 2.2rem 1.4rem; }
}

@media (max-width: 359px) and (max-height: 760px) {
  .table-arena:not(.is-settled):is([data-poker-seat-count="2"], [data-poker-seat-count="3"], [data-poker-seat-count="4"], [data-poker-seat-count="5"], [data-poker-seat-count="6"]) { aspect-ratio: 1.05; margin-block: 1.2rem 1.4rem; }
  .table-arena:not(.is-settled):is([data-poker-seat-count="2"], [data-poker-seat-count="3"], [data-poker-seat-count="4"], [data-poker-seat-count="5"], [data-poker-seat-count="6"]) .table-felt { inset: 20% 21%; }
  .table-dock-cards .poker-card { width: 3.2rem; font-size: 1.2rem; }
}

.screen-link { display: grid; min-width: 0; justify-items: start; gap: 0.4rem; }
.screen-link p { margin: 0; color: var(--text-secondary); font-size: var(--type-small); }
.screen-link-url code { overflow-wrap: anywhere; color: var(--text-primary); }

.app-confirm {
  width: min(24rem, calc(100% - 2rem));
  max-width: none;
  padding: 1.25rem 1.1rem 1.1rem;
  border: 2px solid var(--border-strong);
  border-radius: 1rem;
  color: var(--text-primary);
  background: var(--surface-raised);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.5);
}
.app-confirm::backdrop { background: rgba(11, 10, 13, 0.72); }
.app-confirm-question { margin: 0 0 1.1rem; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.app-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
.app-confirm-actions .button { flex: 1 1 8rem; }