/* Siegerehrung für alle Show-Spiele (LUECKEN.md, Etappe 8; shared/ceremony.js, shared/ceremony-3d.js).
   Über der Seite: oben die Bühne in 3D, unten eine Karte mit der Liste. Ohne 3D steht die Karte mittig. */
.cer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--ou-black);
  opacity: 0;
  transition: opacity .35s ease;
}
.cer.is-on { opacity: 1; }
html[data-motion="reduce"] .cer { transition: none; }
.cer-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cer-card {
  position: relative;
  grid-row: 2;
  display: grid;
  gap: 10px;
  width: min(560px, calc(100% - 32px));
  margin: 0 auto max(16px, env(safe-area-inset-bottom));
  padding: 16px 18px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius);
  background: color-mix(in srgb, var(--ou-surface) 94%, transparent);
  box-shadow: var(--ou-drop);
}
.cer-title { display: none; margin: 0; font: 400 clamp(2rem, 6vw, 3rem)/1 var(--ou-font-display); }
.cer.is-flat .cer-title { display: block; }
.cer-kicker {
  color: var(--ou-primary-ink);
  font: 700 var(--ou-fs-xs)/1.2 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.cer-list { display: grid; gap: 2px; max-height: 28vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.cer-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--ou-radius-sm);
}
.cer-row.is-me { background: color-mix(in srgb, var(--ou-primary) 12%, transparent); }
.cer-place { color: var(--ou-muted); font: 400 1.6rem/1 var(--ou-font-display); text-align: center; }
.cer-row.is-p1 .cer-place { color: var(--ou-yellow); }
.cer-row.is-p2 .cer-place { color: var(--ou-cream); }
.cer-row.is-p3 .cer-place { color: var(--ou-red); }
.cer-name { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cer-score { color: var(--ou-muted); font-size: var(--ou-fs-sm); font-variant-numeric: tabular-nums; }
.cer-close { justify-self: end; }
/* Ohne 3D: Karte mittig, Platz 1 größer */
.cer.is-flat { grid-template-rows: minmax(0, 1fr); align-items: center; }
.cer.is-flat .cer-card { grid-row: 1; margin: auto; }
.cer.is-flat .cer-canvas { display: none; }
.cer.is-flat .cer-row.is-p1 .cer-name { font-size: var(--ou-fs-lg); }
/* Bühne (Stream): größer, ohne Knopf */
.cer.is-stage .cer-card { width: min(760px, calc(100% - 64px)); margin-bottom: 40px; font-size: 1.25rem; }
.cer.is-stage .cer-list { max-height: 34vh; }
html.has-ceremony { overflow: hidden; }
/* Hinweise (Prämie, Mitspielen) während der Ehrung oben, sonst lägen sie über der Liste */
html.has-ceremony #toast-stack { top: max(16px, env(safe-area-inset-top)); bottom: auto; }

/* Cockpit: Hinweis „Siegerehrung läuft" mit Überspringen */
.cer-host {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
  box-shadow: var(--ou-drop);
  transform: translateX(-50%);
  font-weight: 600;
}
.cer-host.hidden { display: none; }