/* End-of-match awards ceremony (js/screens/room-podium.js). The overlay steps through classes:
   open → show-3 → roll-2 (drumroll) → show-2 → dim → roll-1 (big drumroll) → show-1 + boom → step-done. */
body.cer-open { overflow: hidden; }
.cer { position: fixed; inset: 0; z-index: 300; overflow: hidden; display: grid; color: #f6f9ff; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(120% 80% at 50% 108%, #3a2a6b 0%, #1a1238 45%, #08070f 100%); }
.cer.open, .cer.still { opacity: 1; }
.cer::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 58%, transparent 0 140px, #000d 420px); opacity: 0; transition: opacity .6s ease; }
.cer.dim::after { opacity: 1; }
.cer-fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.cer-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #fff; opacity: 0; }
.cer.flash-2 .cer-flash { animation: cer-flash .5s ease-out; --flash: .45; }
.cer.boom .cer-flash { animation: cer-flash .9s ease-out; --flash: 1; }
@keyframes cer-flash { 0% { opacity: var(--flash); } 100% { opacity: 0; } }

/* Sweeping spotlights. During the big drumroll they swing to the centre and turn gold. */
.cer-lights { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cer-lights i { position: absolute; top: -12vh; left: 50%; width: 34vmin; height: 135vh; margin-left: -17vmin; transform-origin: 50% 0;
  background: linear-gradient(#ffffff38, #ffffff10 60%, transparent); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); filter: blur(6px); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1), background .8s; }
.cer-lights i:nth-child(1) { left: 12%; animation: cer-sweep-a 3.6s ease-in-out infinite alternate; }
.cer-lights i:nth-child(2) { animation: cer-sweep-b 4.4s ease-in-out infinite alternate; }
.cer-lights i:nth-child(3) { left: 88%; animation: cer-sweep-c 3.9s ease-in-out infinite alternate; }
@keyframes cer-sweep-a { from { transform: rotate(-28deg); } to { transform: rotate(10deg); } }
@keyframes cer-sweep-b { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes cer-sweep-c { from { transform: rotate(28deg); } to { transform: rotate(-10deg); } }
.cer.dim .cer-lights i, .cer.show-1 .cer-lights i { animation: none; background: linear-gradient(#ffe27a66, #ffd23f22 60%, transparent); }
.cer.dim .cer-lights i:nth-child(1), .cer.show-1 .cer-lights i:nth-child(1) { transform: rotate(-19deg); }
.cer.dim .cer-lights i:nth-child(2), .cer.show-1 .cer-lights i:nth-child(2) { transform: none; }
.cer.dim .cer-lights i:nth-child(3), .cer.show-1 .cer-lights i:nth-child(3) { transform: rotate(19deg); }
.cer.show-1 .cer-lights i { animation: cer-pulse 1.4s ease-in-out infinite alternate; }
@keyframes cer-pulse { to { opacity: .55; } }

/* Gold rays spinning behind the champion. */
.cer-rays { position: absolute; left: 50%; top: 52%; z-index: 0; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; pointer-events: none; opacity: 0; transform: scale(.2);
  background: repeating-conic-gradient(from 0deg, #ffd23f2e 0 7deg, transparent 7deg 18deg); mask-image: radial-gradient(circle, #000 0, #0000 46%); transition: opacity .6s ease, transform 1s cubic-bezier(.2, 1.4, .4, 1); }
.cer.show-1 .cer-rays { opacity: 1; transform: none; animation: cer-spin 26s linear infinite; }
@keyframes cer-spin { to { rotate: 360deg; } }

.cer-skip { position: absolute; z-index: 7; top: max(14px, env(safe-area-inset-top)); right: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid #ffffff40; background: #0008; color: #fff; font: 800 .85rem system-ui, sans-serif; cursor: pointer; }
.cer-skip:hover { background: #fff2; }
.cer.step-done .cer-skip { display: none; }

.cer-stage { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; height: 100dvh; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); }
.cer.boom .cer-stage { animation: cer-shake .7s cubic-bezier(.36, .07, .19, .97); }
@keyframes cer-shake { 10%, 90% { translate: -2px 1px; } 20%, 80% { translate: 5px -3px; } 30%, 50%, 70% { translate: -9px 4px; } 40%, 60% { translate: 9px -4px; } }
.cer-head { text-align: center; padding-top: 18px; }
.cer-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #ffffff14; color: #c9d4ff; font: 800 .74rem system-ui, sans-serif; letter-spacing: .14em; }
.cer-eyebrow img, .cer-eyebrow svg { width: 18px; height: 18px; }
.cer-title { position: relative; display: grid; place-items: center; height: clamp(64px, 11vw, 112px); margin: 10px 0 0; font: clamp(1.7rem, 5vw, 3.2rem) var(--font-display, sans-serif); }
.cer-t { grid-area: 1 / 1; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .35s, transform .35s; text-shadow: 0 4px 0 #0006; }
.cer.step-intro .cer-t-intro, .cer.step-roll2 .cer-t-roll2, .cer.step-roll1 .cer-t-roll1 { opacity: 1; transform: none; }
.cer.roll-2 .cer-t-roll2, .cer.roll-1 .cer-t-roll1 { animation: cer-jitter .11s linear infinite; }
.cer.roll-1 .cer-t-roll1 { color: #ffe27a; }
.cer-t-champ { font-size: clamp(2.6rem, 9vw, 5.6rem); letter-spacing: .02em; background: linear-gradient(#fff6c9, #ffd23f 45%, #e08a12); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 5px 0 #7a3d00) drop-shadow(0 0 24px #ffb70399); }
.cer.step-champ .cer-t-champ { animation: cer-slam .7s cubic-bezier(.2, 1.6, .4, 1) forwards, cer-glow 1.6s .7s ease-in-out infinite alternate; }
@keyframes cer-slam { 0% { opacity: 0; transform: scale(3.2) rotate(-6deg); } 60% { opacity: 1; transform: scale(.92) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes cer-glow { from { filter: drop-shadow(0 5px 0 #7a3d00) drop-shadow(0 0 14px #ffb70366); } to { filter: drop-shadow(0 5px 0 #7a3d00) drop-shadow(0 0 40px #ffd23fcc); } }
@keyframes cer-jitter { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: -2px 1px; rotate: -1.5deg; } 75% { translate: 2px -1px; rotate: 1.5deg; } }

/* The podium: 2nd · 1st · 3rd. */
.cer-podium { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 2vw, 22px); align-self: end; width: min(100%, 860px); margin: 0 auto; padding-bottom: 6px; }
.cer-floor { position: absolute; left: -10%; right: -10%; bottom: -26px; z-index: -1; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, #8f7cff55, transparent); }
.cer-spot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1 1 0; min-width: 0; max-width: 250px; }
.cer-who { position: relative; display: grid; justify-items: center; min-width: 0; max-width: 100%; margin-bottom: 8px; opacity: 0; transform: translateY(60px) scale(.3); }
.cer-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: clamp(1rem, 2.4vw, 1.45rem) var(--font-display, sans-serif); text-shadow: 0 3px 0 #0007; }
.cer-name em { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 8px; background: #caee93; color: #17260a; font: 900 .62em system-ui, sans-serif; font-style: normal; vertical-align: .25em; }
.cer-score { margin-top: 2px; padding: 3px 12px; border-radius: 999px; background: #0007; color: #caee93; font: 900 clamp(.8rem, 1.8vw, 1rem) system-ui, sans-serif; }
.cer-spot.place-1 .cer-score { background: #ffd23f; color: #3b2400; }
.cer.show-3 .place-3 .cer-who, .cer.show-2 .place-2 .cer-who { animation: cer-pop .75s cubic-bezier(.34, 1.7, .64, 1) forwards; }
.cer.show-1 .place-1 .cer-who { animation: cer-champ-pop 1.1s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes cer-pop { 0% { opacity: 0; transform: translateY(60px) scale(.3) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
@keyframes cer-champ-pop { 0% { opacity: 0; transform: translateY(80px) scale(.2) rotate(-360deg); } 55% { opacity: 1; transform: translateY(-36px) scale(1.25) rotate(8deg); } 100% { opacity: 1; transform: none; } }
.cer.show-1 .place-1 .room-sprite-frame { animation: cer-bob 1.2s 1.1s ease-in-out infinite alternate; }
@keyframes cer-bob { to { translate: 0 -8px; } }

/* Monster sizes for the podium. */
.room-monster-avatar.monster-podium { width: 118px; height: 120px; }
.room-monster-avatar.monster-podium > .room-sprite-frame { left: 4px; top: 8px; transform: scale(1.8); }
.room-monster-avatar.monster-champ { width: 158px; height: 158px; }
.room-monster-avatar.monster-champ > .room-sprite-frame { left: 6px; top: 8px; transform: scale(2.45); filter: drop-shadow(0 0 22px #ffd23f99); }
.cer-crown { position: absolute; z-index: 2; top: -40px; left: 50%; font-size: 3.2rem; translate: -50% 0; opacity: 0; filter: drop-shadow(0 4px 6px #0008); }
.cer.show-1 .cer-crown { animation: cer-crown 1s .65s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes cer-crown { 0% { opacity: 0; transform: translateY(-220px) rotate(-30deg) scale(1.6); } 100% { opacity: 1; transform: rotate(-8deg); } }

/* The "?" that shakes over an empty spot during a drumroll. */
.cer-mystery { position: absolute; bottom: calc(var(--block-h) + 30px); font: clamp(3.4rem, 9vw, 6rem) var(--font-display, sans-serif); color: #fff; opacity: 0; text-shadow: 0 0 30px #b9a8ff, 0 6px 0 #0008; pointer-events: none; }
.place-2 .cer-mystery { color: #e6edf5; }
.place-1 .cer-mystery { color: #ffe27a; text-shadow: 0 0 40px #ffb703, 0 6px 0 #0008; }
.cer.roll-2 .place-2 .cer-mystery { opacity: 1; animation: cer-jitter .09s linear infinite, cer-grow 2.2s ease-in forwards; }
.cer.roll-1 .place-1 .cer-mystery { opacity: 1; animation: cer-jitter .07s linear infinite, cer-grow 3.4s ease-in forwards; }
@keyframes cer-grow { from { scale: .7; } to { scale: 1.5; } }

/* Blocks rise from the floor: 3rd first, 2nd during its drumroll, 1st during the big one. */
.cer-spot { --block-h: clamp(70px, 14vh, 110px); }
.cer-spot.place-2 { --block-h: clamp(96px, 19vh, 150px); }
.cer-spot.place-1 { --block-h: clamp(128px, 25vh, 200px); }
.cer-block { position: relative; display: grid; place-items: start center; width: 100%; height: var(--block-h); padding-top: 18px; border-radius: 6px 6px 0 0; transform: scaleY(0); transform-origin: bottom;
  transition: transform .8s cubic-bezier(.34, 1.4, .64, 1); box-shadow: inset 0 -10px 0 #0003, inset 8px 0 0 #ffffff26, inset -8px 0 0 #0002, 0 20px 40px #0007; }
.cer-top { position: absolute; left: -6px; right: -6px; top: -12px; height: 14px; border-radius: 8px 8px 2px 2px; background: inherit; filter: brightness(1.25); }
.cer-block b { font: clamp(1.4rem, 4vw, 2.6rem) var(--font-display, sans-serif); color: #fff; text-shadow: 0 3px 0 #0005; }
.place-1 .cer-block { background: linear-gradient(100deg, #ffe680, #ffc928 40%, #e39b12 75%, #ffd34d); }
.place-2 .cer-block { background: linear-gradient(100deg, #f3f6fa, #cdd7e3 40%, #9aaabe 75%, #dfe7f0); }
.place-3 .cer-block { background: linear-gradient(100deg, #f6c08f, #df8d4f 40%, #a85d2a 75%, #e6a06a); }
.place-1 .cer-block b { color: #fff8d6; text-shadow: 0 3px 0 #9b5a00; }
.cer-spot.metal-1 .cer-block { background: linear-gradient(100deg, #ffe680, #ffc928 40%, #e39b12 75%, #ffd34d); }
.cer-spot.metal-1 .cer-block b { color: #fff8d6; text-shadow: 0 3px 0 #9b5a00; }
.cer-spot.metal-2 .cer-block { background: linear-gradient(100deg, #f3f6fa, #cdd7e3 40%, #9aaabe 75%, #dfe7f0); }
.cer-spot.metal-2 .cer-block b { text-shadow: 0 3px 0 #5f6f84; }
.place-2 .cer-block b { text-shadow: 0 3px 0 #5f6f84; }
.place-3 .cer-block b { text-shadow: 0 3px 0 #6d3510; }
.cer.open .place-3 .cer-block, .cer.show-3 .place-3 .cer-block, .cer.roll-2 .place-2 .cer-block, .cer.show-2 .place-2 .cer-block, .cer.roll-1 .place-1 .cer-block, .cer.show-1 .place-1 .cer-block { transform: none; }
.cer.open .place-3 .cer-block { transition-delay: .2s; }
.cer.show-1 .place-1 .cer-block { box-shadow: inset 0 -10px 0 #0003, inset 8px 0 0 #ffffff40, 0 0 60px #ffd23f88, 0 20px 40px #0007; }

/* Shockwave rings from the champion. */
.cer-shock { position: absolute; left: 50%; top: 56%; z-index: 3; pointer-events: none; }
.cer-shock i { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 6px solid #ffe27a; opacity: 0; }
.cer.boom .cer-shock i { animation: cer-ring 1.2s cubic-bezier(.1, .7, .3, 1) forwards; }
.cer.boom .cer-shock i:nth-child(2) { animation-delay: .12s; border-color: #fff; }
.cer.boom .cer-shock i:nth-child(3) { animation-delay: .26s; border-color: #ff9f1c; }
@keyframes cer-ring { 0% { opacity: 1; transform: scale(.2); border-width: 14px; } 100% { opacity: 0; transform: scale(14); border-width: 1px; } }

.cer-foot { display: grid; justify-items: center; gap: 10px; min-height: 96px; padding-top: 34px; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; pointer-events: none; }
.cer.step-done .cer-foot { opacity: 1; transform: none; pointer-events: auto; }
.cer-you { margin: 0; font: 800 clamp(.95rem, 2.4vw, 1.2rem) system-ui, sans-serif; text-align: center; color: #e9ecff; }
.cer-continue { padding: 13px 26px; border: 0; border-radius: 16px; background: linear-gradient(#d9f7a8, #a6d465); color: #17260a; font: 1.15rem var(--font-display, sans-serif); box-shadow: 0 6px 0 #5e8a2b, 0 12px 26px #0007; cursor: pointer; }
.cer-continue:hover { filter: brightness(1.06); }
.cer-continue:active { translate: 0 4px; box-shadow: 0 2px 0 #5e8a2b; }

@media (min-width: 900px) and (min-height: 700px) {
  .cer-spot { max-width: 290px; }
  .room-monster-avatar.monster-podium { width: 150px; height: 150px; }
  .room-monster-avatar.monster-podium > .room-sprite-frame { left: 6px; top: 8px; transform: scale(2.3); }
  .room-monster-avatar.monster-champ { width: 210px; height: 200px; }
  .room-monster-avatar.monster-champ > .room-sprite-frame { left: 6px; top: 6px; transform: scale(3.2); }
  .cer-crown { top: -54px; font-size: 4.2rem; }
}
@media (max-width: 560px) {
  .cer-podium { gap: 6px; }
  .room-monster-avatar.monster-podium { width: 74px; height: 78px; }
  .room-monster-avatar.monster-podium > .room-sprite-frame { left: 3px; top: 6px; transform: scale(1.1); }
  .room-monster-avatar.monster-champ { width: 104px; height: 104px; }
  .room-monster-avatar.monster-champ > .room-sprite-frame { left: 4px; top: 6px; transform: scale(1.6); }
  .cer-crown { top: -30px; font-size: 2.3rem; }
  .cer-score { padding: 2px 8px; }
}
@media (max-height: 640px) and (min-width: 561px) { .cer-head { padding-top: 0; } .cer-foot { padding-top: 18px; min-height: 80px; } }

/* Reduced motion: the finished podium, no shaking, flashing or fireworks. */
.cer.still *, .cer.still *::before, .cer.still *::after { animation: none !important; transition: none !important; }
.cer.still .cer-who { opacity: 1; transform: none; }
.cer.still .cer-crown, .cer.still .cer-rays { opacity: 1; transform: none; }
.cer.still .cer-t-champ { opacity: 1; transform: none; }
.cer.still .cer-block { transform: none; }

/* Live place changes during a match (js/screens/room-toasts.js). */
.place-toast { position: fixed; left: 50%; top: 86px; z-index: 330; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 18px 10px 12px; border-radius: 999px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(#ffffff1f, #ffffff00), #17324a; border: 2px solid #4d9bff; color: #fff; box-shadow: 0 10px 28px #0009; animation: toast-in .45s cubic-bezier(.34, 1.6, .64, 1), toast-out .35s ease-in 2.25s forwards; }
.place-toast span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffffff1f; font-size: 1.25rem; }
.place-toast strong { font: 1.05rem/1.2 var(--font-display, sans-serif); }
.place-toast.tone-good { background: linear-gradient(#ffffff26, #ffffff00), #1f5b3a; border-color: #5ee08f; }
.place-toast.tone-gold { background: linear-gradient(#fff6, #fff0), #b8860b; border-color: #ffe27a; color: #fffbea; box-shadow: 0 0 30px #ffd23f88, 0 10px 28px #0009; }
.place-toast.tone-gold span { animation: toast-crown .8s ease-in-out infinite alternate; }
.place-toast.tone-bad { background: linear-gradient(#ffffff1f, #ffffff00), #6b1f2c; border-color: #ff5d6c; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) scale(.7); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes toast-crown { to { rotate: 14deg; scale: 1.15; } }
@media (prefers-reduced-motion: reduce) { .place-toast { animation: none; } }