/* ═══════════════════════════════════════════════════════════════
   MYDOG WEB – Siegerehrung (Weltbuch E8): Fallblatt-Tafel, Namensschilder
   am Podest, Ausrufe, kompakte Ergebniskarte. Palette „Kinoabend“:
   Kino-Glas #120F0C, Bernstein #F59E0B, Popcorn-Creme #FFF3D6,
   Samtrot #8E2F3A, Banner-Navy #23365C, Nussbaum #6E4630,
   Medaillen Gold #E9B949 · Silber #C9CED6 · Bronze #C07A44.
   ═══════════════════════════════════════════════════════════════ */

/* Während der Zeremonie tritt der Renn-Titel zurück */
.race-ui.cer .race-title { opacity: 0; transition: opacity 0.4s; }

/* Medaille als Zeichen (Tafel, Ausruf, Karte) – überall gleich, unabhängig vom Handy */
.cer-md { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; font: 800 0.78em/1 var(--f-title); font-style: normal; color: #3B2A1E; vertical-align: -0.2em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 1px 0 rgba(0, 0, 0, 0.25); }
.cer-md.m1, .cer-board li.m1 em { background: radial-gradient(circle at 35% 30%, #FFF0B8 0 18%, #E9B949 45%, #B98A22 100%); }
.cer-md.m2, .cer-board li.m2 em { background: radial-gradient(circle at 35% 30%, #FFFFFF 0 18%, #C9CED6 48%, #8D96A3 100%); }
.cer-md.m3, .cer-board li.m3 em { background: radial-gradient(circle at 35% 30%, #F6C9A0 0 18%, #C07A44 48%, #8A4F27 100%); }

/* ── 1) Fallblatt-Tafel: Nussbaum-Rahmen, Banner-Navy, Schrift in Creme ── */
.cer-board { position: absolute; left: 50%; top: calc(104px + var(--safe-t)); translate: -50% 0; width: min(318px, calc(100% - 28px)); padding: 8px 8px 7px; border-radius: 16px; background: #23365C; border: 3px solid #6E4630; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4); color: #FFF3D6; pointer-events: none; perspective: 520px; animation: cerin 0.35s ease-out both; z-index: 2; }
.cer-board header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px 6px; }
.cer-board header b { font: 700 16px var(--f-title); color: #FFE8A3; }
.cer-board header small { font: 700 10px var(--f-label); opacity: 0.8; white-space: nowrap; }
.cer-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* Fallblatt: obere und untere Hälfte leicht verschieden, die Teilungsfuge liegt hinter der Schrift */
.cer-board li { --a: #2E4677; --b: #263C69; position: relative; display: flex; align-items: center; gap: 7px; height: 22px; padding: 0 7px 0 3px; border-radius: 5px; background: linear-gradient(var(--a) 0 calc(50% - 0.5px), rgba(10, 16, 30, 0.6) 0 calc(50% + 0.5px), var(--b) 0); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35); transform-origin: 50% 0; animation: cerflap 0.42s cubic-bezier(0.3, 1.45, 0.5, 1) var(--d, 0s) both; }
.cer-board li em { flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--f-title); font-style: normal; color: #FFF3D6; background: rgba(255, 243, 214, 0.12); }
.cer-board li.m1 em, .cer-board li.m2 em, .cer-board li.m3 em { color: #3B2A1E; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); }
.cer-board li span { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; font: 800 12px/1 var(--f-text); white-space: nowrap; overflow: hidden; }
.cer-board li small { font: 600 9.5px var(--f-label); opacity: 0.68; overflow: hidden; text-overflow: ellipsis; }
.cer-board li i { font: 800 11px/1 var(--f-text); font-style: normal; color: #FFE8A3; white-space: nowrap; }
.cer-board li.m1 { --a: #56461E; --b: #4A3C19; }
.cer-board li.me { --a: #B9771A; --b: #A6690F; color: #FFF8EC; box-shadow: 0 0 0 2px #F59E0B, 0 0 14px rgba(245, 158, 11, 0.6); z-index: 1; }
.cer-board li.me span { animation: cerglow 1.4s ease-in-out calc(var(--d, 0s) + 0.5s) infinite; }
.cer-board li.far { margin-top: 6px; }
.cer-board li.far::before { content: '···'; position: absolute; left: 50%; top: -9px; translate: -50% 0; font: 800 10px/1 var(--f-text); color: #FFE8A3; opacity: 0.7; }
.cer-board.out { animation: cerout 0.4s ease-in both; }
@keyframes cerflap { 0% { transform: rotateX(-96deg); opacity: 0; filter: brightness(1.6); } 55% { opacity: 1; } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes cerin { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes cerout { to { opacity: 0; transform: translateY(-18px) scale(0.94) rotateX(25deg); } }
@keyframes cerglow { 50% { text-shadow: 0 0 8px rgba(255, 232, 163, 0.95); } }

/* Antippen überspringt – unsichtbare Fläche mit kleinem Hinweis */
.cer-skip { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 1; }
.cer-skip span { position: absolute; left: 50%; bottom: calc(22px + var(--safe-b)); translate: -50% 0; padding: 4px 12px; border-radius: 99px; background: rgba(18, 15, 12, 0.55); font: 700 11px var(--f-label); color: #FFF3D6; white-space: nowrap; animation: cerhint 2.4s ease-in-out infinite; }
@keyframes cerhint { 50% { opacity: 0.45; } }

/* ── 2) Namensschilder vor den Stufen ── */
.cer-name { position: absolute; left: 0; top: 0; translate: -50% 6px; display: flex; align-items: center; gap: 4px; padding: 2px 9px 2px 2px; border-radius: 99px; background: #FFF3D6; border: 2px solid #23365C; font: 800 11px/1.2 var(--f-text); color: #23365C; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); opacity: 0; scale: 0.4; transition: opacity 0.2s, scale 0.35s cubic-bezier(0.3, 1.7, 0.5, 1); pointer-events: none; z-index: 2; }
.cer-name.on { opacity: 1; scale: 1; }
.cer-name em { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 800 10px/1 var(--f-title); font-style: normal; color: #3B2A1E; background: #E9B949; }
.cer-name.m1 em { background: radial-gradient(circle at 35% 30%, #FFF0B8 0 18%, #E9B949 50%, #B98A22 100%); }
.cer-name.m2 em { background: radial-gradient(circle at 35% 30%, #FFFFFF 0 18%, #C9CED6 50%, #8D96A3 100%); }
.cer-name.m3 em { background: radial-gradient(circle at 35% 30%, #F6C9A0 0 18%, #C07A44 50%, #8A4F27 100%); }
.cer-name.m1 { font-size: 12px; border-color: #B98A22; }
.cer-name.me { border-color: #F59E0B; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45), 0 2px 0 rgba(0, 0, 0, 0.3); }
.cer-name.fanp { translate: -50% 26px; padding-left: 7px; }
.cer-name.clumsy { background: #FFE8A3; }

/* ── 3) Ausrufe über der Bühne ── */
.cer-shout { position: absolute; left: 50%; top: 27%; translate: -50% -50%; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); font: 700 28px/1.1 var(--f-title); color: #FFF3D6; text-align: center; white-space: nowrap; text-shadow: 0 3px 0 #8E2F3A, 0 0 22px rgba(245, 158, 11, 0.75); pointer-events: none; animation: cershout 2s cubic-bezier(0.3, 1.5, 0.5, 1) both; z-index: 3; }
.cer-shout .cer-md { font-size: 30px; text-shadow: none; }
.cer-shout.clumsy { top: 22%; font-size: 23px; color: #FFE8A3; animation-name: cerwobble; animation-duration: 2.6s; }
@keyframes cershout { 0% { opacity: 0; scale: 0.3; } 18% { opacity: 1; scale: 1.12; } 30% { scale: 1; } 80% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 0.92; translate: -50% -80%; } }
@keyframes cerwobble { 0% { opacity: 0; scale: 0.3; rotate: -14deg; } 15% { opacity: 1; scale: 1.1; rotate: 8deg; } 30% { rotate: -6deg; scale: 1; } 45% { rotate: 4deg; } 60% { rotate: -2deg; } 85% { opacity: 1; rotate: 0deg; } 100% { opacity: 0; scale: 0.92; } }

/* ── 4) Ergebniskarte im unteren Drittel – das Podest bleibt sichtbar ── */
.cer-card { position: absolute; left: 12px; right: 12px; bottom: calc(14px + var(--safe-b)); max-width: 380px; margin: 0 auto; padding: 11px 14px 12px; border-radius: 22px; background: rgba(18, 15, 12, 0.9); border: 2px solid rgba(245, 158, 11, 0.6); color: #FFF3D6; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); pointer-events: auto; animation: cercard 0.5s cubic-bezier(0.3, 1.35, 0.5, 1) both; z-index: 4; }
.cer-card .hd { display: flex; align-items: center; gap: 7px; font: 700 20px/1.15 var(--f-title); color: #FFE8A3; }
.cer-card .hd .cer-md { font-size: 24px; }
.cer-card p { margin: 5px 0 0; font: 700 13px/1.35 var(--f-text); }
.cer-card p b { color: #FFE8A3; }
.cer-card p.dim { font-weight: 600; font-size: 12px; opacity: 0.75; }
.cer-card .prize b { font-size: 15px; font-variant-numeric: tabular-nums; }
.cer-card .row { display: flex; gap: 8px; margin-top: 10px; }
.cer-card button { flex: 1; min-height: 42px; border-radius: 14px; font: 800 14px var(--f-text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s; }
.cer-card button:active { transform: scale(0.96); }
.cer-card .again { background: transparent; border: 2px solid rgba(255, 243, 214, 0.55); color: #FFF3D6; }
.cer-card .go { background: #F59E0B; border: 2px solid #FFE8A3; color: #2B1D0E; box-shadow: 0 3px 0 #A86A07; }
.cer-card.m1 { border-color: #E9B949; box-shadow: 0 0 0 3px rgba(233, 185, 73, 0.35), 0 10px 28px rgba(0, 0, 0, 0.4); }
.cer-card.clumsy { border-color: #8E2F3A; }
.cer-card.clumsy .hd { animation: cerwob 1.8s ease-in-out infinite; transform-origin: 20% 60%; }
@keyframes cercard { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes cerwob { 25% { rotate: -2.5deg; } 75% { rotate: 2.5deg; } }

@media (prefers-reduced-motion: reduce) {
    .cer-board, .cer-board li, .cer-shout, .cer-card, .cer-card.clumsy .hd, .cer-skip span { animation-duration: 0.01s; animation-iteration-count: 1; }
}