@charset "UTF-8";
/* =============================================================================
   Party-Brett (PARTY.md) · One UI · Brett, Kopfzeile, Ansagen, Stand und Aktionen
   Gemeinsam für Handy (#pbView), Cockpit (#pbPanel) und Bühne (#phaseParty).
   ========================================================================== */

.pb { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; min-width: 0; }
.pb-stage {
  position: relative;
  min-height: 440px;
  height: calc(100svh - 150px);
  overflow: hidden;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface-2);
  box-shadow: var(--ou-drop);
}
.pb-board { position: absolute; inset: 0; background: var(--ou-surface-2); }
.pb-board canvas, .pb-flat { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pb-board.is-flat { padding: 12px; }

/* ---------------------------------------------------------------- Kopfzeile */
.pb-hud {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.pb-round, .pb-timer {
  padding: 5px 10px;
  border-radius: var(--ou-radius-sm);
  background: color-mix(in srgb, var(--ou-surface) 88%, transparent);
  font-size: var(--ou-fs-sm);
  font-weight: 600;
}
.pb-timer:empty { display: none; }
.pb-timer { font-family: var(--ou-font-display); font-size: 1.2rem; letter-spacing: .04em; }
.pb-cam { margin-left: auto; pointer-events: auto; background: color-mix(in srgb, var(--ou-surface) 88%, transparent); }

/* ---------------------------------------------------------------- Ansagen */
.pb-banner {
  position: absolute;
  left: 50%;
  top: 54px;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  pointer-events: none;
}
.pb-banner.is-center { top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 24px)); pointer-events: auto; }
.pb-banner:empty { display: none; }
.pb-card {
  padding: 20px 22px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: color-mix(in srgb, var(--ou-surface) 94%, transparent);
  box-shadow: var(--ou-drop);
  text-align: center;
}
.pb-card h2 { margin: 6px 0 8px; font-family: var(--ou-font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 400; letter-spacing: .02em; }
.pb-card p { margin: 6px 0 0; }
.pb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ou-muted);
  font-size: var(--ou-fs-xs);
  font-weight: 700;
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.pb-muted { color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.pb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ou-surface) 92%, transparent);
  box-shadow: var(--ou-drop);
  font-weight: 600;
  white-space: nowrap;
}
.pb-chip.is-me { background: var(--ou-primary); color: var(--ou-on-primary); }
.pb-chip em { font-style: normal; padding: 2px 8px; border-radius: 999px; background: var(--ou-yellow); color: var(--ou-black); font-size: var(--ou-fs-xs); text-transform: uppercase; letter-spacing: var(--ou-label-tracking); }

.pb-order, .pb-podium, .pb-awards { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.pb-order li, .pb-podium li, .pb-awards li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
}
.pb-order li b, .pb-podium li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pb-die-face {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--ou-cream);
  color: var(--ou-black);
  font-family: var(--ou-font-display);
  font-size: 1.3rem;
}
.pb-podium .p1 { background: color-mix(in srgb, var(--ou-yellow) 28%, var(--ou-surface-2)); }
.pb-podium li span, .pb-awards li span.pb-muted { color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.pb-awards li { flex-wrap: wrap; }
.pb-awards li b { flex: 1; }

/* ---------------------------------------------------------------- Aktionen */
.pb-actions {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
}
.pb-actions:empty { display: none; }
.pb-ask {
  flex-basis: 100%;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--ou-radius-sm);
  background: color-mix(in srgb, var(--ou-surface) 92%, transparent);
  font-weight: 600;
  text-align: center;
}
.pb-actions .btn-ghost { background: var(--ou-surface); }
.pb-roll { min-width: 180px; min-height: 56px; font-size: 1.15rem; }

/* ---------------------------------------------------------------- Stand als Leiste auf dem Brett (Handy) */
.pb-chips {
  position: absolute;
  top: 46px;
  left: 10px;
  right: 10px;
  display: none;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  pointer-events: none;
}
.pb-chips::-webkit-scrollbar { display: none; }
.pb-chips span {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ou-surface) 90%, transparent);
  font-size: var(--ou-fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pb-chips span.is-turn { border-color: var(--ou-primary); }
.pb-chips span.is-me { background: color-mix(in srgb, var(--ou-primary) 22%, var(--ou-surface)); }
.pb-chips b { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
.pb-chips i { display: inline-flex; align-items: center; gap: 2px; font-style: normal; color: var(--ou-muted); }
.pb-chips i.s { color: var(--ou-yellow-ink, var(--ou-text)); }

/* ---------------------------------------------------------------- Stand */
.pb-side { display: grid; align-content: start; gap: 12px; min-width: 0; }
.pb-controls:empty { display: none; }
.pb-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-standing { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pb-standing li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface);
}
.pb-standing li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-standing li.is-turn { border-color: var(--ou-primary); }
.pb-standing li.is-me { background: color-mix(in srgb, var(--ou-primary) 10%, var(--ou-surface)); }
.pb-rank { color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.pb-stars, .pb-coins { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-stars { color: var(--ou-yellow-ink, var(--ou-text)); }
.pb-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.pb-log li:first-child { color: var(--ou-text); }

/* ---------------------------------------------------------------- Handy */
@media (max-width: 860px) {
  .pb { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* Handy: das Brett füllt den Bildschirm, der Stand liegt als Leiste darauf */
  .pb-stage { height: calc(100svh - 84px); min-height: 360px; border-radius: var(--ou-radius-sm); }
  .pb-standing { display: none; }
  .pb-chips { display: flex; }
  .pb-banner { top: 92px; }
}
@media (max-width: 520px) {
  .pb-round { font-size: var(--ou-fs-xs); }
  .pb-cam span { display: none; }
  .pb-card { padding: 14px 14px; }
}

/* ---------------------------------------------------------------- Bühne: das Brett groß */
/* Die Bühne ist ein festes 16:9-Format (--u); solange das Brett läuft, fast ohne Rand */
.stage:has(#phaseParty.active) { padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
.stage:has(#phaseParty.active) .stage-head { margin-bottom: calc(16 * var(--u)); }
#phaseParty { max-width: none; }
.pb-stage-page .pb { grid-template-columns: minmax(0, 1fr) calc(380 * var(--u)); gap: calc(20 * var(--u)); }
.pb-stage-page .pb-stage { height: calc(940 * var(--u)); min-height: 0; }
.pb-stage-page .pb-cam { display: none; }

/* ---------------------------------------------------------------- Cockpit: Einrichtung */
.pb-setup { display: grid; gap: 14px; }
.pb-setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pb-setup-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.pb-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pb-board-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface);
  color: var(--ou-text);
  text-align: left;
  cursor: pointer;
}
.pb-board-card.is-on { border-color: var(--ou-primary); background: color-mix(in srgb, var(--ou-primary) 10%, var(--ou-surface)); }
.pb-board-card span { color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.pb-setup-label { margin: 0 0 6px; color: var(--ou-muted); font-size: var(--ou-fs-xs); font-weight: 700; letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.pb-setup-actions { display: flex; align-items: center; gap: 12px; }

/* ---------------------------------------------------------------- Minispiele (Etappe 2) */
.pb-mg { position: absolute; inset: 0; z-index: 3; background: var(--ou-surface-2); }
.pb-mg[hidden] { display: none; }
.pb.is-mg .pb-chips, .pb.is-mg .pb-banner, .pb.is-mg .pb-actions, .pb.is-mg .pb-cam { display: none; }
.pb.is-mg .pb-hud { z-index: 4; }
.pb-mg-scene { position: absolute; inset: 0; }
.pb-mg-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pb-mg[data-sub="intro"] .pb-mg-scene, .pb-mg[data-sub="result"] .pb-mg-scene { filter: saturate(.7) brightness(.72); }

.pb-mg-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(520px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  padding: 22px 24px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: color-mix(in srgb, var(--ou-surface) 95%, transparent);
  box-shadow: var(--ou-drop);
  text-align: center;
}
.pb-mg-card[hidden] { display: none; }
.pb-mg-card h2 { margin: 6px 0 10px; font-family: var(--ou-font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; letter-spacing: .02em; }
.pb-mg-card p { margin: 0 0 10px; }
.pb-mg-how { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--ou-fs-sm); }
.pb-mg-how b { color: var(--ou-primary-ink); }
.pb-mg-bar { height: 4px; margin-top: 16px; overflow: hidden; border-radius: 99px; background: var(--ou-line); }
.pb-mg-bar span { display: block; height: 100%; background: var(--ou-primary); transform-origin: left; transition: transform .1s linear; }
.pb-mg-mine { font-weight: 700; color: var(--ou-primary-ink); }
.pb-mg-result { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.pb-mg-result li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); }
.pb-mg-result li.is-me { background: color-mix(in srgb, var(--ou-primary) 16%, var(--ou-surface-2)); }
.pb-mg-result li span { color: var(--ou-muted); }
.pb-mg-result li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-mg-result li em { font-style: normal; font-weight: 700; color: var(--ou-yellow-ink, var(--ou-text)); }

.pb-mg-count {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  font-family: var(--ou-font-display);
  font-size: clamp(6rem, 22vw, 14rem);
  line-height: 1;
  color: var(--ou-cream);
  text-shadow: 0 6px 0 var(--ou-black), 0 0 40px color-mix(in srgb, var(--ou-black) 60%, transparent);
  pointer-events: none;
}
.pb-mg-count[hidden] { display: none; }

/* Steuerung: Joystick links, Knopf rechts (am Handy groß) */
.pb-mg-controls {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.pb-mg-controls[hidden] { display: none; }
.pb-mg-controls > * { pointer-events: auto; }
.pb-mg-btn {
  display: grid;
  place-items: center;
  align-content: center;
  width: clamp(110px, 26vw, 150px);
  height: clamp(110px, 26vw, 150px);
  margin-left: auto;
  border: 4px solid var(--ou-cream);
  border-radius: 50%;
  background: var(--ou-primary);
  color: var(--ou-on-primary);
  font-family: var(--ou-font-display);
  font-size: 1.6rem;
  letter-spacing: .04em;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--ou-black) 70%, transparent), var(--ou-drop);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.pb-mg-btn small { font-family: var(--ou-font-body); font-size: var(--ou-fs-xs); opacity: .8; }
.pb-mg-btn:active, .pb-mg-btn.is-hit { transform: translateY(5px); box-shadow: 0 3px 0 color-mix(in srgb, var(--ou-black) 70%, transparent); }
.pb-mg[data-sub="countdown"] .pb-mg-btn { opacity: .5; }
.pb-mg-stick {
  position: relative;
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  border: 2px solid var(--ou-line-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ou-surface) 70%, transparent);
  touch-action: none;
}
.pb-mg-stick span { width: 56px; height: 56px; border-radius: 50%; background: var(--ou-cream); box-shadow: var(--ou-drop); transition: transform .05s linear; }

/* Grünes Licht */
.mg-green-hud { position: absolute; inset: 0; pointer-events: none; }
.mg-green-top { position: absolute; top: 56px; left: 40%; display: grid; justify-items: center; gap: 4px; transform: translateX(-50%); text-align: center; }
.mg-green-top b { font-family: var(--ou-font-display); font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 400; line-height: 1; color: var(--ou-cream); text-shadow: 0 4px 0 var(--ou-black); }
.mg-green-top b.is-go { color: var(--ou-green); }
.mg-green-top b.is-wait { color: var(--ou-red); }
.mg-green-me { padding: 3px 12px; border-radius: 999px; background: var(--ou-surface); font-weight: 700; }
.mg-green-totals { position: absolute; top: 56px; left: 12px; list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 3px; border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--ou-surface) 88%, transparent); font-size: var(--ou-fs-xs); }
.mg-green-totals li { display: flex; justify-content: space-between; gap: 12px; }
.mg-green-totals li.is-me b { color: var(--ou-primary-ink); }
.mg-green-totals span { font-variant-numeric: tabular-nums; }

/* Tipp-Sprint */
.mg-sprint-hud { position: absolute; top: 56px; left: 50%; display: flex; gap: 10px; transform: translateX(-50%); pointer-events: none; }
.mg-sprint-hud span { padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ou-surface) 90%, transparent); font-family: var(--ou-font-display); font-size: 1.6rem; letter-spacing: .03em; }
.mg-sprint-me { color: var(--ou-primary-ink); }

@media (max-width: 860px) {
  .mg-green-totals { top: auto; bottom: 150px; }
}

/* Farbfelder (Muster merken): Reihenfolge rot, gelb, grün, blau */
.pb-mg-pads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(250px, 100%); margin-left: auto; }
@media (max-width: 860px) { .pb-mg-pads { width: min(320px, 100%); margin-inline: auto; } }
.pb-mg-pad {
  position: relative;
  aspect-ratio: 1.5;
  border: 3px solid var(--ou-cream);
  border-radius: var(--ou-radius);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--ou-black) 70%, transparent);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.pb-mg-pad[data-i="0"] { background: var(--ou-red); }
.pb-mg-pad[data-i="1"] { background: var(--ou-yellow); }
.pb-mg-pad[data-i="2"] { background: var(--ou-green); }
.pb-mg-pad[data-i="3"] { background: var(--ou-blue); }
.pb-mg-pad small { position: absolute; left: 8px; top: 6px; color: var(--ou-black); font-weight: 700; opacity: .7; }
.pb-mg-pad:active, .pb-mg-pad.is-hit { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--ou-black) 70%, transparent); filter: brightness(1.25); }

/* Kopfzeile der Bewegungsspiele (Zeit, eigener Stand) */
.mg-hud { position: absolute; top: 56px; left: 50%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: calc(100% - 24px); transform: translateX(-50%); pointer-events: none; }
.mg-hud span { padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ou-surface) 90%, transparent); font-family: var(--ou-font-display); font-size: 1.5rem; letter-spacing: .03em; white-space: nowrap; }
.mg-hud .is-me { color: var(--ou-primary-ink); }
.mg-hud .is-out { color: var(--ou-red); }
.mg-board { position: absolute; top: 56px; left: 12px; list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 3px; border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--ou-surface) 88%, transparent); font-size: var(--ou-fs-xs); pointer-events: none; }
.mg-board li { display: flex; justify-content: space-between; gap: 12px; }
.mg-board li.is-me b { color: var(--ou-primary-ink); }
.mg-board li.is-out { opacity: .5; text-decoration: line-through; }
@media (max-width: 860px) { .mg-board { top: auto; bottom: 170px; } .mg-hud { top: 50px; } }

/* ---------------------------------------------------------------- Etappe 4: Tasche, Laden, Duell, Einblendungen */
.pb-bag { display: inline-flex; align-items: center; gap: 3px; color: var(--ou-muted); font-size: var(--ou-fs-xs); font-weight: 700; }
.pb-standing li { grid-template-columns: 26px minmax(0, 1fr) auto auto auto; }
.pb-actions .pb-item { background: var(--ou-surface); }
.pb-actions small { color: var(--ou-muted); font-weight: 400; }
.pb-actions .btn-ghost.is-on { border-color: var(--ou-primary); color: var(--ou-primary-ink); }
.pb-shop { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; flex-basis: 100%; }
.pb-shop-card {
  display: grid;
  gap: 4px;
  width: 170px;
  padding: 10px 12px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  background: color-mix(in srgb, var(--ou-surface) 96%, transparent);
  box-shadow: var(--ou-drop);
  text-align: left;
}
.pb-shop-card b { font-family: var(--ou-font-display); font-size: 1.2rem; font-weight: 400; letter-spacing: .02em; }
.pb-shop-card span { color: var(--ou-muted); font-size: var(--ou-fs-xs); line-height: 1.35; }
.pb-shop-card.is-rare { border-color: var(--ou-yellow); }
.pb-shop-card button { justify-self: start; margin-top: 4px; }
.pb-stakes { display: flex; gap: 6px; flex-basis: 100%; justify-content: center; }
@media (max-width: 520px) { .pb-shop-card { width: calc(50% - 4px); } }

.pb-fx { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: min(420px, calc(100% - 24px)); pointer-events: none; text-align: center; }
.pb-fx[hidden] { display: none; }
.pb-fx-card { padding: 16px 20px; border: 1px solid var(--ou-line-strong); border-radius: var(--ou-radius); background: color-mix(in srgb, var(--ou-surface) 95%, transparent); box-shadow: var(--ou-drop); animation: gh-rise var(--ou-dur) var(--ou-ease) both; }
.pb-fx-card h3 { margin: 6px 0 4px; font-family: var(--ou-font-display); font-size: 1.8rem; font-weight: 400; letter-spacing: .02em; }
.pb-fx-card p { margin: 0; color: var(--ou-muted); }
.pb-fx-card.is-bad { border-color: var(--ou-red); }
.pb-fx-card.is-bad .pb-kicker { color: var(--ou-red); }
.pb-wheel { position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 0 auto; }
.pb-wheel-disc {
  position: absolute;
  inset: 0;
  border: 5px solid var(--ou-cream);
  border-radius: 50%;
  box-shadow: var(--ou-drop);
  transition: transform 3s cubic-bezier(.15, .8, .2, 1);
}
.pb-wheel-disc span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  margin-left: -23%;
  color: var(--ou-black);
  font-family: var(--ou-font-display);
  font-size: 1rem;
  line-height: 1.05;
  text-align: center;
  transform-origin: 50% 0;
}
.pb-wheel-pin { position: absolute; left: 50%; top: -8px; width: 0; height: 0; margin-left: -12px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid var(--ou-red); filter: drop-shadow(0 2px 0 var(--ou-black)); }
.pb-fx-text { margin: 10px auto 0; padding: 8px 14px; width: fit-content; max-width: 100%; border-radius: var(--ou-radius-sm); background: color-mix(in srgb, var(--ou-surface) 95%, transparent); font-weight: 700; }
.pb-mg-duel { font-weight: 600; }

/* ---------------------------------------------------------------- Etappe 5: Minispiele mit eigener Oberfläche (.mgx) */
.mgx {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 96px 16px 20px;
  overflow: auto;
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--ou-yellow) 10%, transparent) 0 18%, transparent 19%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--ou-blue) 12%, transparent) 0 22%, transparent 23%),
    var(--ou-surface-2);
}
.mgx-panel { display: grid; justify-items: center; gap: 14px; width: min(760px, 100%); }
.mgx-big { font-family: var(--ou-font-display); font-size: clamp(3rem, 12vw, 7rem); line-height: 1; letter-spacing: .02em; color: var(--ou-text); }
.mgx-sub { color: var(--ou-muted); font-weight: 600; text-align: center; }
.mgx-grid { display: grid; gap: 10px; width: 100%; }
.mgx-btn {
  display: grid;
  place-items: center;
  min-height: 64px;
  padding: 8px;
  border: 2px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
  color: var(--ou-text);
  font-family: var(--ou-font-display);
  font-size: 1.8rem;
  letter-spacing: .02em;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--ou-black) 55%, transparent);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s, background .15s, border-color .15s;
}
.mgx-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--ou-black) 55%, transparent); }
.mgx-btn:disabled { cursor: default; opacity: .45; }
.mgx-btn.is-on { border-color: var(--ou-primary); background: color-mix(in srgb, var(--ou-primary) 16%, var(--ou-surface)); }
.mgx-btn.is-good { border-color: var(--ou-green); background: color-mix(in srgb, var(--ou-green) 30%, var(--ou-surface)); opacity: 1; }
.mgx-btn.is-bad { border-color: var(--ou-red); background: color-mix(in srgb, var(--ou-red) 35%, var(--ou-surface)); opacity: 1; }
.mgx-btn .icon, .mgx-btn svg { width: 1.3em; height: 1.3em; }
.mgx-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mgx-tag { padding: 4px 10px; border-radius: 999px; background: var(--ou-surface); font-size: var(--ou-fs-sm); font-weight: 700; }
.mgx-tag.is-me { background: color-mix(in srgb, var(--ou-primary) 20%, var(--ou-surface)); }
.mgx-tag.is-out { opacity: .45; text-decoration: line-through; }
.mgx-tag.is-turn { outline: 2px solid var(--ou-primary); }
.mgx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: min(420px, 100%); }
.mgx-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; border-radius: var(--ou-radius-sm); background: var(--ou-surface); }
.mgx-list li.is-me { background: color-mix(in srgb, var(--ou-primary) 16%, var(--ou-surface)); }
.mgx-list li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgx-list li span { font-variant-numeric: tabular-nums; font-weight: 700; }
.mgx-pop { position: absolute; z-index: 2; transform: translate(-50%, -50%); font-family: var(--ou-font-display); font-size: 1.6rem; color: var(--ou-cream); text-shadow: 0 3px 0 var(--ou-black); pointer-events: none; animation: mgx-rise .8s ease-out forwards; }
@keyframes mgx-rise { to { transform: translate(-50%, -140%); opacity: 0; } }
@media (max-width: 860px) { .mgx { padding-top: 90px; padding-bottom: 150px; } }
.mgx-big.mgx-mid { font-size: clamp(2rem, 6vw, 2.8rem); }
.mgr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(420px, 100%); }
.mgr-btn { aspect-ratio: 1; border-radius: 50%; font-size: 2.2rem; }
.mgs-clock { font-variant-numeric: tabular-nums; min-width: 5ch; text-align: center; }
.mgs-clock.is-hidden { color: var(--ou-muted); }
.mgp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(460px, 100%); }
.mgp-card { aspect-ratio: .8; font-size: 2.4rem; background: color-mix(in srgb, var(--ou-primary) 55%, var(--ou-surface)); }
.mgp-card.is-open { background: var(--ou-cream); }
.mgd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(520px, 100%); }
.mgd-cell { aspect-ratio: 1; min-height: 0; font-size: 2rem; background: var(--ou-cream); }
.mgd-cell:disabled { opacity: 1; }
.mgm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(460px, 100%); }
.mgc { display: block; padding: 0; }
.mgc-field { position: absolute; inset: 88px 12px 12px; }
.mgc-t {
  position: absolute;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 3px solid var(--ou-cream);
  border-radius: 50%;
  background: var(--ou-yellow);
  color: var(--ou-black);
  font-size: 1.8rem;
  box-shadow: var(--ou-drop);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: mgc-in .15s ease-out both, mgc-out var(--life, 1.7s) linear forwards;
}
.mgc-t.is-g { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--ou-yellow); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ou-yellow) 35%, transparent), var(--ou-drop); }
.mgc-t.is-b { background: var(--ou-black); color: var(--ou-red); border-color: var(--ou-red); font-family: var(--ou-font-display); font-size: 2.2rem; }
.mgc-t.is-hit { transform: scale(.8); opacity: .5; }
@keyframes mgc-in { from { transform: scale(0); } }
@keyframes mgc-out { 70% { opacity: 1; } to { opacity: .25; } }
.mgk-ui { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 6; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mgk-ui .mgx-btn { min-width: 56px; min-height: 56px; font-size: 1.6rem; }
.mgt-meter { position: absolute; left: 18px; top: 50%; z-index: 5; width: 26px; height: 46%; overflow: hidden; transform: translateY(-50%); border: 3px solid var(--ou-cream); border-radius: 999px; background: var(--ou-surface); }
.mgt-meter[hidden] { display: none; }
.mgt-meter i { position: absolute; inset: 0; background: linear-gradient(to top, var(--ou-green), var(--ou-yellow), var(--ou-red)); transform-origin: bottom; }
.mgn-panel { position: absolute; left: 50%; bottom: 16px; z-index: 5; display: grid; justify-items: center; gap: 10px; width: min(460px, calc(100% - 24px)); padding: 14px; transform: translateX(-50%); border-radius: var(--ou-radius); background: color-mix(in srgb, var(--ou-surface) 92%, transparent); box-shadow: var(--ou-drop); }
.mgn-panel:empty { display: none; }
.mgn-row { display: grid; grid-template-columns: 72px minmax(90px, auto) 72px; align-items: center; gap: 12px; }
.mgn-row .mgx-big { font-size: 3.6rem; text-align: center; }
.mgn-quick { display: flex; gap: 8px; }
.mgn-call { font-family: var(--ou-font-display); font-size: 2rem; letter-spacing: .02em; text-align: center; }
.mgn-call .is-red { color: var(--ou-red); }
.mgn-call .is-yellow { color: var(--ou-yellow-ink, var(--ou-yellow)); }
.mgn-call .is-blue { color: var(--ou-blue); }
.mgn-call .is-green { color: var(--ou-green); }

/* ---------------------------------------------------------------- Etappe 5, Teil 2: Teams */
.pb-mg-teams { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-weight: 600; }
.pb-mg-teams em { font-style: normal; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.pb-mg-teams .is-team0 { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ou-red) 22%, transparent); }
.pb-mg-teams .is-team1 { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ou-blue) 25%, transparent); }
.mg-hud .is-team0 { color: var(--ou-red); }
.mg-hud .is-team1 { color: var(--ou-blue); }