.stage-summary[hidden], .stage-clock[hidden] { display: none !important; }
.stage-summary, .stage-summary * { box-sizing: border-box; letter-spacing: 0; }
.stage-summary { color: #214943; background: #a1d7cf; font-family: 'Noto Sans TC', sans-serif; --stage-elapsed: 0s; }
.stage-host { position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--stage-scale, 1)); z-index: 2100; padding: 42px 68px 36px; display: grid; grid-template-rows: 166px minmax(0, 1fr) 90px; gap: 24px; border-top: 8px solid #eac76e; border-bottom: 8px solid #eac76e; background-image: radial-gradient(#77b8ae 0.7px, transparent 0.7px); background-size: 16px 16px; overflow: hidden; }
.stage-heading { text-align: center; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.stage-summary .stage-kicker { font: 700 21px 'Outfit', sans-serif; color: #3a6860; margin: 0; }
.stage-summary h2 { margin: 0; font-size: 70px; font-weight: 900; line-height: 1.2; color: #214943; min-height: 84px; position: relative; z-index: 1; }
.stage-heading::after { content: ''; width: 920px; height: 25px; background: #f5d678; position: absolute; bottom: 21px; transform: rotate(-1deg); opacity: .85; }
.stage-team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; width: 100%; min-height: 0; }
.stage-team { min-width: 0; text-align: center; display: grid; grid-template-rows: 68px minmax(150px, 1fr) 86px 110px 68px 42px; position: relative; padding: 12px 8px 0; border-top: 5px solid var(--team-color); }
.stage-team + .stage-team { border-left: 1px solid #5b968b55; }
.stage-team h3 { font-size: 34px; line-height: 1.3; margin: 0; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; padding: 0 3px; }
.stage-reward-track { position: relative; min-height: 0; width: 100%; }
.stage-reward-track::after { content: ''; position: absolute; bottom: 3px; left: 12%; right: 12%; border-bottom: 3px solid #f2faf3; box-shadow: 0 3px 0 #4f8d7c44; }
.stage-runner { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; animation: stage-reward-run 1.25s calc(4.8s - var(--stage-elapsed)) cubic-bezier(.22, 1, .36, 1) both; }
.stage-runner img { width: 270px; max-width: calc(100% - 42px); height: 100%; object-fit: contain; filter: drop-shadow(0 6px 0 #3f70571c); animation: stage-horse-bounce 1s calc(2.65s - var(--stage-elapsed)) 3 both; }
.stage-perfect .stage-runner img { animation-name: stage-perfect-jump; }
.stage-stars { display: flex; justify-content: center; gap: 8px; align-items: center; }
.stage-stars span { font-size: 78px; line-height: 1; display: inline-block; animation: stage-star-pop .55s both; }
.star-hit { color: #ffdf73; text-shadow: 0 3px 0 #9c742a; -webkit-text-stroke: 1.5px #a88032; }
.star-miss { color: #578d80; }
.stage-score { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 0; line-height: 1; animation: stage-score-pop .55s calc(2.65s - var(--stage-elapsed)) both; }
.stage-score b { font: 900 110px/1 'Outfit', sans-serif; }
.stage-score span { font-size: 30px; font-weight: 700; color: #407466; }
.stage-perfect .stage-score b { color: #a03048; }
.stage-reward { font-size: 36px; line-height: 1.3; font-weight: 900; margin: 0; display: flex; justify-content: center; align-items: center; animation: stage-score-pop .5s calc(4.8s - var(--stage-elapsed)) both; border-top: 1px solid #548d8044; }
.stage-perfect .stage-reward { color: #8c263d; background: #f4d478; border-top-color: transparent; border-radius: 4px; }
.stage-cheer { font-size: 22px; margin: 0; display: flex; justify-content: center; align-items: center; font-weight: 600; animation: stage-score-pop .4s calc(2.65s - var(--stage-elapsed)) both; }
.stage-perfect-seal { position: absolute; right: 2px; top: 0; z-index: 2; width: 82px; height: 82px; display: grid; place-items: center; background: #f4d478; color: #834327; font-size: 26px; font-weight: 900; clip-path: polygon(50% 0%, 62% 9%, 78% 6%, 84% 22%, 98% 30%, 93% 47%, 100% 62%, 85% 72%, 80% 89%, 63% 89%, 50% 100%, 37% 91%, 20% 94%, 15% 77%, 1% 69%, 7% 52%, 0% 37%, 15% 28%, 20% 10%, 38% 10%); animation: stage-seal-stamp .5s calc(2.65s - var(--stage-elapsed)) both; }
.stage-confetti { position: absolute; inset: -10px 0 0; pointer-events: none; overflow: hidden; }
.stage-confetti i { position: absolute; left: var(--piece-x); top: 10px; width: 7px; height: 16px; background: #b18731; opacity: 0; animation: stage-paper-fall 2.6s calc(var(--piece-delay) - var(--stage-elapsed)) both; }
.stage-confetti i:nth-child(3n) { background: #fff8de; width: 6px; height: 11px; }
.stage-confetti i:nth-child(3n + 1) { background: #a03048; height: 9px; }
.stage-next { display: flex; justify-content: space-between; align-items: center; gap: 28px; font-size: 28px; font-weight: 700; border-top: 2px solid #5c978955; padding: 18px 16px 0; }
.stage-progress { display: flex; gap: 9px; flex-shrink: 0; }
.stage-progress span { width: 42px; height: 36px; display: grid; place-items: center; color: #558b7e; border-bottom: 3px solid #76ad9f; font: 700 20px 'Outfit', sans-serif; }
.stage-progress .is-complete { color: #214943; border-color: #315d50; }
.stage-progress .is-current { background: #f5d678; border-color: #ac8433; }
.stage-next-label { flex: 1; text-align: center; }
.stage-next-countdown { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; min-width: 250px; font-size: 22px; }
.stage-next-seconds { font: 800 50px/1 'Outfit', sans-serif; font-variant-numeric: tabular-nums; }
.stage-clock { pointer-events: none; font-family: 'Noto Sans TC', sans-serif; background: #275851; color: #fff6d4; font-weight: 700; text-align: center; }
.stage-clock-host { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2200; font-size: 26px; padding: 10px 28px; border-bottom: 3px solid #f4ce6d; }
.stage-clock.is-urgent { background: #9e3047; }
.stage-guest { position: fixed; inset: 64px 0 0; z-index: 1100; padding: 18px 22px; display: grid; grid-template-rows: 88px minmax(0, 1fr) 64px; gap: 12px; overflow: hidden; }
.stage-guest .stage-heading { gap: 8px; }
.stage-guest .stage-kicker { font-size: 11px; }
.stage-guest h2 { font-size: 28px; min-height: 34px; }
.stage-guest .stage-heading::after { width: 240px; height: 12px; bottom: 16px; }
.stage-guest .stage-team-grid { grid-template-columns: minmax(0, 1fr); max-width: 390px; margin: 0 auto; }
.stage-guest .stage-team { padding: 0; grid-template-rows: 42px minmax(80px, 1fr) 62px 84px 48px 30px; }
.stage-guest .stage-team h3 { font-size: 25px; }
.stage-guest .stage-runner img { width: 255px; }
.stage-guest .stage-stars span { font-size: 59px; }
.stage-guest .stage-score b { font-size: 82px; }
.stage-guest .stage-score span { font-size: 23px; }
.stage-guest .stage-reward { font-size: 28px; }
.stage-guest .stage-cheer { font-size: 17px; }
.stage-guest .stage-perfect-seal { width: 66px; height: 66px; font-size: 21px; right: 8px; }
.stage-guest .stage-next { padding: 4px 0 0; gap: 4px; display: grid; grid-template-rows: 20px 24px; justify-content: center; line-height: 1; }
.stage-guest .stage-progress { display: none; }
.stage-guest .stage-next-label { flex-basis: 100%; font-size: 16px; }
.stage-guest .stage-next-countdown { font-size: 14px; min-width: 0; gap: 6px; justify-content: center; }
.stage-guest .stage-next-seconds { font-size: 23px; }
.stage-clock-guest { position: fixed; top: 64px; left: 0; right: 0; z-index: 1150; height: 30px; font-size: 14px; line-height: 30px; }
.stage-summary.is-paused * { animation-play-state: paused !important; }
.stage-summary-active .sound-unlock { left: auto; right: 20px; bottom: auto; top: 20px; transform: none; }
.stage-summary-active #app-container::after { content: ''; position: absolute; inset: 0; z-index: 2090; background: #a1d7cf; pointer-events: none; }
@keyframes stage-star-pop { 0% { opacity: 0; transform: scale(.3) rotate(-18deg); } 65% { opacity: 1; transform: scale(1.18) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes stage-score-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes stage-seal-stamp { from { opacity: 0; transform: scale(1.7) rotate(14deg); } to { opacity: 1; transform: rotate(9deg); } }
@keyframes stage-reward-run { from { transform: translateX(-20px); } to { transform: translateX(calc(var(--reward-travel) - 20px)); } }
@keyframes stage-horse-bounce { 0%, 100% { transform: none; } 45% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes stage-perfect-jump { 0%, 100% { transform: none; } 40% { transform: translateY(-20px) rotate(-4deg); } 60% { transform: translateY(-14px) rotate(1deg); } }
@keyframes stage-paper-fall { 0% { opacity: 0; transform: translate(0, -18px) rotate(0deg); } 12% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--piece-drift), 200px) rotate(var(--piece-rotation)); } }
@media (max-height: 680px) {
  .stage-guest { padding: 10px 20px; grid-template-rows: 64px minmax(0, 1fr) 52px; gap: 6px; }
  .stage-guest h2 { font-size: 24px; min-height: 30px; }
  .stage-guest .stage-kicker { font-size: 9px; }
  .stage-guest .stage-heading::after { bottom: 4px; }
  .stage-guest .stage-team { grid-template-rows: 34px minmax(60px, 1fr) 44px 60px 38px 24px; }
  .stage-guest .stage-team h3 { font-size: 21px; }
  .stage-guest .stage-runner img { width: 215px; }
  .stage-guest .stage-stars span { font-size: 44px; }
  .stage-guest .stage-score b { font-size: 60px; }
  .stage-guest .stage-score span { font-size: 19px; }
  .stage-guest .stage-reward { font-size: 23px; }
  .stage-guest .stage-cheer { font-size: 15px; }
  .stage-guest .stage-perfect-seal { width: 50px; height: 50px; font-size: 16px; }
  .stage-guest .stage-next-label { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .stage-summary * { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } .stage-confetti { display: none; } }