/* Self-contained score theatre. Each scene plays once, then holds its final pose. */
.score-reaction {
  --sr-accent: #ffcf72;
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 40%) minmax(0, 1fr);
  align-items: center;
  isolation: isolate;
  min-height: 174px;
  margin: 17px 0 8px;
  overflow: hidden;
  border: 1px solid #655037;
  border-radius: 17px;
  background: radial-gradient(ellipse at 20% 50%, #67442835, transparent 65%), linear-gradient(120deg, #302034, #211728);
  box-shadow: inset 0 1px 0 #ffe6a111, 0 7px 19px #100b141a;
  text-align: left;
}
.score-reaction::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -26%;
  left: 15%;
  width: 31%;
  height: 140%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, #ffe5a100, #ffe5a106, #ffe5a100);
  pointer-events: none;
}
.score-reaction--bullseye { border-color: #c99843; background: radial-gradient(ellipse at 22% 52%, #a1783633, transparent 65%), linear-gradient(120deg, #362333, #251a2b); }
.score-reaction--sharp { --sr-accent: #9be4cb; border-color: #487161; background: radial-gradient(ellipse at 24% 50%, #4d918522, transparent 65%), linear-gradient(120deg, #292437, #211728); }
.score-reaction--close { --sr-accent: #ffd07a; }
.score-reaction--ballpark { --sr-accent: #e0b9f2; border-color: #6f537a; }
.score-reaction--wayoff { --sr-accent: #e4b3c7; border-color: #755165; background: radial-gradient(ellipse at 24% 50%, #ad688d1c, transparent 65%), linear-gradient(120deg, #302134, #211728); }
.score-reaction--timeout { --sr-accent: #d3c4dc; border-color: #5a4965; min-height: 144px; }
.score-reaction-scene { display: block; width: 100%; height: 174px; overflow: visible; }
.score-reaction--timeout .score-reaction-scene { height: 144px; }
.score-reaction-copy { position: relative; padding: 20px 24px 20px 5px; }
.score-reaction-eyebrow { display: block; margin-bottom: 8px; color: #c0a9c0; font: 600 9px/1.35 var(--body, 'Archivo', system-ui, sans-serif); letter-spacing: .13em; text-transform: uppercase; }
.score-reaction-title { margin: 0 0 9px; color: var(--sr-accent); font: 400 clamp(16px, 2.8vw, 21px)/1.25 var(--sign, 'Bungee', Impact, sans-serif); text-wrap: balance; }
.score-reaction-message { margin: 0; max-width: 31ch; color: #e3d5df; font: 400 13px/1.55 var(--body, 'Archivo', system-ui, sans-serif); text-wrap: pretty; }
.sr-ambient { fill: #b59cb7; stroke: #b59cb7; stroke-width: 1.5; opacity: .36; }
.sr-floor { fill: #ffdc7910; }
.sr-shadow { fill: #100b16; opacity: .5; transform-origin: 125px 157px; }
.sr-star-body { stroke: #985d2e; stroke-width: 2; stroke-linejoin: round; }
.sr-shine { fill: none; stroke: #fff2c6; stroke-width: 3; stroke-linecap: round; opacity: .8; }
.sr-arm { fill: #ffce6b; stroke: #ffce6b; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sr-arm path { fill: none; }
.sr-feet { fill: none; stroke: #efb75b; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sr-face { fill: #4d2737; stroke: #4d2737; stroke-width: 2.8; }
.sr-cheek { fill: #eb855e; opacity: .63; }
.sr-spark, .sr-static-spark, .sr-orbit-star { fill: #ffe0a0; }
.sr-spark { animation: sr-spark-arrive 700ms cubic-bezier(.2,.7,.3,1) var(--sr-delay, 0ms) both; transform-box: fill-box; transform-origin: center; }
.sr-crown { fill: #ffdb7c; stroke: #956033; stroke-width: 2; stroke-linejoin: round; animation: sr-crown-drop 2800ms cubic-bezier(.2,.8,.3,1) both; }
.sr-crown circle { fill: #e77a6d; stroke: none; }
.sr-crown-band { stroke: #fff0b8; stroke-width: 3; stroke-linecap: round; }
.sr-crown-rays { fill: none; stroke: #ffe0a0; stroke-width: 2; stroke-linecap: round; opacity: .8; animation: sr-rays 2800ms ease both; }
.sr-confetti { fill: #ffd172; opacity: .75; animation: sr-confetti 1450ms cubic-bezier(.14,.68,.32,1) var(--sr-delay, 0ms) both; transform-box: fill-box; transform-origin: center; }
.sr-confetti-1 { fill: #81dcb8; }
.sr-confetti-2 { fill: #e89cb4; }
.score-reaction--bullseye .sr-actor-motion { animation: sr-royal-jump 2800ms cubic-bezier(.2,.7,.3,1) both; }
.score-reaction--bullseye .sr-shadow { animation: sr-royal-shadow 2800ms ease both; }
.score-reaction--bullseye .sr-arm-left { transform: rotate(18deg); transform-origin: -28px 3px; }
.score-reaction--bullseye .sr-arm-right { transform: rotate(-18deg); transform-origin: 28px 3px; }
.sr-flight-path { stroke: #9be4cb; stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .32; animation: sr-flight-trail 2700ms ease both; }
.sr-rocket-flight { animation: sr-rocket-ride 2700ms cubic-bezier(.3,.05,.4,1) both; }
.sr-rocket-fin { fill: #e89988; stroke: #a15656; stroke-width: 2; }
.sr-rocket-hull { fill: #dae4d0; stroke: #779a90; stroke-width: 2; }
.sr-rocket-rim { fill: none; stroke: #faf2d8; stroke-width: 4; }
.sr-rocket-window { fill: #3c655d; stroke: #f9db9b; stroke-width: 3; }
.sr-window-glint { fill: none; stroke: #d0f2dd; stroke-width: 2; stroke-linecap: round; }
.sr-exhaust { opacity: 0; transform-origin: 0 43px; animation: sr-rocket-exhaust 2700ms ease both; }
.score-reaction--sharp .sr-feet { opacity: 0; }
.score-reaction--sharp .sr-arm-right { transform: rotate(-29deg); transform-origin: 28px 3px; }
.score-reaction--sharp .sr-shadow { animation: sr-rocket-shadow 2700ms ease both; }
.sr-target-stand { stroke: #8e718b; stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sr-target-outer { fill: #d8818a; stroke: #f4b8af; stroke-width: 2; }
.sr-target-mid { fill: #f6dba2; }
.sr-target-inner { fill: #9c4d64; }
.sr-dart { stroke: #fff3d5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: sr-dart-land 2400ms ease both; }
.sr-dart-feather { fill: #87d6b4; stroke: #325e58; stroke-width: 1.5; }
.sr-hit-ring { fill: none; stroke: #fff4ce; stroke-width: 2; opacity: 0; transform-origin: -9px 12px; animation: sr-target-ring 2400ms ease-out both; }
.sr-near-marks { fill: none; stroke: #f8d780; stroke-width: 2; stroke-linecap: round; opacity: .65; animation: sr-near-marks 2400ms ease both; }
.score-reaction--close .sr-actor-motion { animation: sr-happy-hops 2400ms cubic-bezier(.25,.6,.4,1) both; }
.score-reaction--close .sr-arm-left { transform: rotate(17deg); transform-origin: -28px 3px; }
.score-reaction--close .sr-shadow { transform: translateX(38px) scaleX(.8); }
.sr-balance-arc { fill: none; stroke: #947599; stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .45; }
.sr-balance-board { fill: #a58cbb; stroke: #ceb2df; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sr-balance-board path:first-child { fill: none; }
.sr-balance-board path:last-child { stroke-width: 2; }
.sr-wobble-marks { fill: none; stroke: #bf99c5; stroke-width: 2; stroke-linecap: round; opacity: .55; animation: sr-wobble-lines 2500ms ease both; }
.score-reaction--ballpark .sr-actor-motion { transform-origin: 0 49px; animation: sr-find-balance 2500ms cubic-bezier(.3,.1,.4,1) both; }
.score-reaction--ballpark .sr-arm-left { transform-origin: -28px 3px; animation: sr-balance-left 2500ms ease both; }
.score-reaction--ballpark .sr-arm-right { transform-origin: 28px 3px; animation: sr-balance-right 2500ms ease both; }
.sr-impact { fill: none; stroke: #d0a1b8; stroke-width: 2; stroke-linecap: round; opacity: 0; animation: sr-impact-puff 2800ms ease both; }
.sr-dizzy-orbit { opacity: 0; transform-origin: 125px 58px; animation: sr-dizzy-stars 2800ms ease both; }
.sr-dizzy-orbit ellipse { fill: none; stroke: #d6b2d4; stroke-width: 1.5; stroke-dasharray: 3 5; }
.sr-thumb { fill: #ffd174; stroke: #925c34; stroke-width: 2; stroke-linejoin: round; transform-origin: 40px 10px; animation: sr-thumbs-up 2800ms ease both; }
.score-reaction--wayoff .sr-actor-motion { transform-origin: 0 38px; animation: sr-comic-comeback 2800ms cubic-bezier(.3,.1,.3,1) both; }
.score-reaction--wayoff .sr-arm-right { opacity: 0; }
.score-reaction--wayoff .sr-face { animation: sr-oops-face 2800ms ease both; }
.sr-clock-ring { fill: #35253e; stroke: #786382; stroke-width: 3; }
.sr-clock-hand { fill: none; stroke: #ffcf72; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sr-clock-mark { fill: none; stroke: #b8a2c5; stroke-width: 2; stroke-linecap: round; }

@keyframes sr-royal-jump {
  0%, 9% { transform: translateY(0) scale(1); }
  18% { transform: translateY(6px) scale(1.08,.88); }
  34% { transform: translateY(-20px) scale(.95,1.05); }
  50% { transform: translateY(0) scale(1.06,.94); }
  62% { transform: translateY(-5px) scale(1); }
  76%, 100% { transform: translateY(0) scale(1); }
}
@keyframes sr-royal-shadow { 0%, 18%, 50%, 100% { transform: scaleX(1); opacity: .5; } 34% { transform: scaleX(.65); opacity: .23; } 62% { transform: scaleX(.9); opacity: .4; } }
@keyframes sr-crown-drop { 0%, 30% { opacity: 0; transform: translateY(-25px) rotate(-15deg); } 49% { opacity: 1; transform: translateY(3px) rotate(4deg); } 62% { transform: translateY(-3px) rotate(-3deg); } 76%, 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes sr-rays { 0%, 45% { opacity: 0; } 65%, 100% { opacity: .8; } }
@keyframes sr-confetti { 0% { opacity: 0; transform: translate(calc(var(--sr-x) * -1), 28px) rotate(0); } 20% { opacity: 1; } 55% { transform: translate(0,-9px) rotate(var(--sr-turn)); opacity: 1; } 100% { transform: translate(0,0) rotate(var(--sr-turn)); opacity: .75; } }
@keyframes sr-spark-arrive { 0% { opacity: 0; transform: scale(.15) rotate(-35deg); } 58% { opacity: 1; transform: scale(1.22) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes sr-rocket-ride { 0%, 8% { transform: translate(0,0) rotate(0); } 19% { transform: translate(-3px,6px) rotate(-5deg); } 43% { transform: translate(21px,-29px) rotate(11deg); } 55% { transform: translate(18px,-34px) rotate(4deg); } 75% { transform: translate(-2px,4px) rotate(-3deg); } 87% { transform: translate(0,-3px) rotate(1deg); } 100% { transform: translate(0,0) rotate(0); } }
@keyframes sr-rocket-exhaust { 0%, 12% { opacity: 0; transform: scaleY(.15); } 23% { opacity: 1; transform: scaleY(.8); } 42% { opacity: 1; transform: scaleY(1.1); } 61% { opacity: .7; transform: scaleY(.5); } 75%, 100% { opacity: 0; transform: scaleY(.1); } }
@keyframes sr-rocket-shadow { 0%, 15%, 80%, 100% { transform: scaleX(1); opacity: .5; } 45%, 55% { transform: scaleX(.65); opacity: .2; } }
@keyframes sr-flight-trail { 0%, 25% { opacity: 0; stroke-dashoffset: 55; } 65%, 100% { opacity: .32; stroke-dashoffset: 0; } }
@keyframes sr-dart-land { 0%, 12% { opacity: 0; transform: translate(54px,-42px); } 30% { opacity: 1; transform: translate(-2px,2px); } 38% { transform: translate(1px,-1px); } 46%, 100% { opacity: 1; transform: translate(0,0); } }
@keyframes sr-target-ring { 0%, 29% { opacity: 0; transform: scale(.5); } 31% { opacity: .85; transform: scale(.6); } 60%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes sr-happy-hops { 0%, 29% { transform: translateY(0); } 36% { transform: translateY(4px) scale(1.03,.95); } 49% { transform: translateY(-13px) rotate(-5deg); } 60% { transform: translateY(2px) rotate(2deg); } 72% { transform: translateY(-7px) rotate(4deg); } 86%, 100% { transform: translateY(0) rotate(0); } }
@keyframes sr-near-marks { 0%, 32% { opacity: 0; } 48%, 100% { opacity: .65; } }
@keyframes sr-find-balance { 0% { transform: rotate(0); } 17% { transform: rotate(-16deg); } 36% { transform: rotate(14deg); } 51% { transform: rotate(-9deg); } 65% { transform: rotate(5deg); } 78% { transform: rotate(-2deg); } 90%, 100% { transform: rotate(0); } }
@keyframes sr-balance-left { 0%, 100% { transform: rotate(0); } 17% { transform: rotate(-22deg); } 36% { transform: rotate(24deg); } 51% { transform: rotate(-15deg); } 65% { transform: rotate(10deg); } }
@keyframes sr-balance-right { 0%, 100% { transform: rotate(0); } 17% { transform: rotate(-24deg); } 36% { transform: rotate(22deg); } 51% { transform: rotate(-10deg); } 65% { transform: rotate(15deg); } }
@keyframes sr-wobble-lines { 0%, 7% { opacity: 0; } 20%, 53% { opacity: .65; } 82%, 100% { opacity: .25; } }
@keyframes sr-comic-comeback { 0%, 8% { transform: translate(0,0) rotate(0) scale(1); } 24% { transform: translate(-4px,10px) rotate(-74deg) scale(1,.9); } 32% { transform: translate(-5px,14px) rotate(-82deg) scale(1.08,.82); } 43% { transform: translate(-5px,12px) rotate(-78deg) scale(1); } 57% { transform: translate(-1px,0) rotate(12deg); } 69% { transform: translate(0,0) rotate(-5deg); } 81%, 100% { transform: translate(0,0) rotate(0) scale(1); } }
@keyframes sr-impact-puff { 0%, 24% { opacity: 0; } 31% { opacity: .7; } 48%, 100% { opacity: 0; } }
@keyframes sr-dizzy-stars { 0%, 32% { opacity: 0; transform: translateY(10px) rotate(-12deg); } 42% { opacity: .9; transform: translateY(0) rotate(-7deg); } 58% { opacity: .8; transform: translateY(-2px) rotate(12deg); } 74%, 100% { opacity: 0; transform: translateY(-8px) rotate(24deg); } }
@keyframes sr-thumbs-up { 0%, 60% { opacity: 0; transform: scale(.4) rotate(-24deg); } 78% { opacity: 1; transform: scale(1.13) rotate(8deg); } 90%, 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes sr-oops-face { 0%, 17%, 54%, 100% { opacity: 1; } 25%, 43% { opacity: .45; } }

/* The base artwork is deliberately the final pose, so still mode is complete. */
.calm .score-reaction *, .calm .score-reaction *::before, .calm .score-reaction *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.full-motion) .score-reaction *, html:not(.full-motion) .score-reaction *::before, html:not(.full-motion) .score-reaction *::after { animation: none !important; }
}
@media (max-width: 460px) {
  .score-reaction { grid-template-columns: minmax(112px, 36%) minmax(0, 1fr); min-height: 152px; border-radius: 13px; }
  .score-reaction-scene { height: 148px; }
  .score-reaction-copy { padding: 18px 14px 18px 0; }
  .score-reaction-eyebrow { font-size: 8px; letter-spacing: .08em; margin-bottom: 7px; }
  .score-reaction-title { font-size: 16px; margin-bottom: 7px; }
  .score-reaction-message { font-size: 12px; line-height: 1.5; }
}
@media (max-width: 340px) {
  .score-reaction { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .score-reaction-scene { width: 180px; height: 130px; margin: 0 auto -3px; }
  .score-reaction-copy { padding: 0 18px 18px; }
  .score-reaction-message { margin-inline: auto; }
  .score-reaction--timeout .score-reaction-scene { height: 115px; }
}