.hidden-session-state { display: none; }
.training-layout { padding-top: 28px; }

.round-result {
  min-height: 360px;
  padding: 42px 20px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  background: linear-gradient(180deg, #fffefa, #f3f7f3);
}

.round-result[hidden] { display: none; }
.round-result > p:first-child { margin: 0 0 14px; color: var(--jade); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.score-ring { width: 132px; height: 132px; border: 8px solid var(--jade-light); border-top-color: var(--jade); border-radius: 50%; display: grid; place-content: center; line-height: 1; box-shadow: 0 15px 35px rgba(45,110,97,.12); }
.score-ring strong { font: 700 48px Georgia, serif; }
.score-ring span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.round-result h2 { margin: 20px 0 7px; font: 700 25px Georgia,"Songti SC",serif; }
.round-result > p:not(:first-child) { max-width: 430px; margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.round-result .next-button { min-width: 138px; }

.celebration { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; background: rgba(18,38,32,.48); backdrop-filter: blur(4px); color: white; text-align: center; animation: reward-fade 2.1s both; pointer-events: none; }
.celebration[hidden] { display: none; }
.celebration-symbol { font-size: 82px; line-height: 1; filter: drop-shadow(0 14px 24px rgba(0,0,0,.22)); animation: reward-pop .65s cubic-bezier(.2,.9,.3,1.35) both; }
.celebration strong { margin-top: 17px; font: 700 29px Georgia,"Songti SC",serif; }
.celebration span { margin-top: 7px; color: #e7f5ef; font-size: 12px; }
.celebration.fireworks { background: radial-gradient(circle at 50% 45%,rgba(223,106,72,.38),transparent 28%),rgba(10,22,18,.7); }
.celebration.fireworks .celebration-symbol { font-size: 100px; animation: fireworks-pop 1.2s ease-out both; }
@keyframes reward-pop { from { opacity: 0; transform: scale(.25) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes fireworks-pop { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.18); } 65% { transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } }
@keyframes reward-fade { 0%,72% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .celebration,.celebration-symbol,.celebration.fireworks .celebration-symbol { animation: none; } }