/* The turn awards' own scenes (js/art/awards.js). Everything here that moves is an HTML layer over a still
   SVG: transform and opacity only, no filters, so a phone composites it instead of repainting the board. */

/* The stage is the drawing's 2:1 box, cut to cover the screen (preserveAspectRatio slice, by hand), so the
   darts' percentages land on the drawing at every size. */
#award .bd-stage{position:absolute; left:50%; top:50%; width:max(100vw, 200vh); height:max(50vw, 100vh); transform:translate(-50%, -50%)}
#award .bd-stage > svg, #award .bd-lit, #award .bd-lit svg{position:absolute; inset:0; width:100%; height:100%; display:block}

/* Each dart: its point is the bottom-left corner of a square 9% of the stage wide (margin-top in % is a share
   of the width, so -9% lifts it by its own height). It comes down from in front of the glass, big and faint,
   hard onto the board, and shivers once. */
#award .bd-dart{position:absolute; width:9%; aspect-ratio:1; margin-top:-9%; transform-origin:0 100%; opacity:0;
  animation:bdIn .2s cubic-bezier(.5,0,.9,.4) forwards, bdShiver .3s ease-out forwards}
#award .bd-dart svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
@keyframes bdIn{0%{opacity:0; transform:translate(26%, -34%) scale(2.6)} 35%{opacity:.6} 100%{opacity:1; transform:none}}
@keyframes bdShiver{0%{opacity:1; transform:rotate(0)} 30%{opacity:1; transform:rotate(-2.5deg)} 65%{opacity:1; transform:rotate(1.2deg)} 100%{opacity:1; transform:rotate(0)}}

/* Where it went in: a ring off the point, in the award's colour (--ring, set per dart). */
#award .bd-hit{position:absolute; width:7%; aspect-ratio:1; border-radius:50%; opacity:0; transform:translate(-50%, -50%) scale(.2);
  border:5px solid var(--ring, #9dffd0); box-shadow:0 0 26px var(--ring, #3cf0a0), inset 0 0 20px var(--ring, #3cf0a0);
  animation:bdHit .5s ease-out forwards}
@keyframes bdHit{0%{opacity:0; transform:translate(-50%, -50%) scale(.2)} 15%{opacity:1} 100%{opacity:0; transform:translate(-50%, -50%) scale(1.8)}}

/* After the third: the bed lights up under them and stays lit. */
#award .bd-lit{opacity:0; animation:bdLit .9s ease-out forwards}
@keyframes bdLit{0%{opacity:0} 18%{opacity:1} 55%{opacity:.7} 100%{opacity:.85}}

/* And it leaves with the word. The scene layer (#aScene, on its own dark backing) is still up when the takeover
   closes, 4.45 s + the lead after it starts (fx.js playAward), and went in one frame - after the word had
   already faded, so the last moment was a dim empty board and then a cut. With a lead it fades over the last
   half second instead. A held takeover keeps it until NEXT. */
#award.leading.play .ascene{animation:aScene 5.2s cubic-bezier(.16,.8,.3,1) forwards, bdOut .45s calc(var(--slamDelay, 0s) + 3.95s) ease-in forwards}
#award.leading.held .ascene{animation:aScene 5.2s cubic-bezier(.16,.8,.3,1) forwards; animation-play-state:paused}
@keyframes bdOut{to{opacity:0}}

@media (prefers-reduced-motion:reduce){ #award .bd-dart, #award .bd-lit{animation-duration:.01s} #award .bd-hit{animation:none} }

/* THE SUBTITLE HOLDS ITS SHAPE ON A PHONE (Cory, 28 Oct 2026: the phone version "was flashing in and out").
   On the TV the pill's letters spread from 1em to .3em as it lands; on a 390 px screen that spread pushed
   SAME TRIPLE ×3 over the width and back, so the pill jumped between one line and two all the way through.
   A phone keeps one spacing from start to finish, so the line breaks are settled once. */
@media (max-width:600px){
  #award .t-sub, #award.held .t-sub{letter-spacing:.16em}
  #award.play .t-sub{animation-name:subInPh}
}
@keyframes subInPh{0%,11%{opacity:0; transform:translateY(22px)} 26%{opacity:1; transform:none} 86%{opacity:1} 100%{opacity:0; transform:translateY(-10px)}}

/* HIGH TON / LOW TON: the meter (js/art/awards.js tonScene). The dial sits under the word, centred on the floor;
   it is sized by the screen's height on a TV and its width on a phone, so it always clears the subtitle. The
   needle swings from 0 to the score, kicks past it and settles - the same quick bounce as everything else. */
#award .tn-stage{position:absolute; inset:0}
#award .tn-floor{position:absolute; inset:0; background:radial-gradient(ellipse 70% 45% at 50% 100%, color-mix(in srgb, var(--col) 22%, transparent), transparent 70%)}
#award .tn-dial{position:absolute; left:50%; bottom:3vh; height:min(34vh, 50vw); aspect-ratio:400/216; transform:translateX(-50%)}
#award .tn-dial > svg, #award .tn-lit, #award .tn-lit svg{position:absolute; inset:0; width:100%; height:100%; display:block}
#award .tn-lit{opacity:0; animation:bdLit .9s ease-out forwards}
#award .tn-needle{position:absolute; left:50%; bottom:7.4%; width:1.6%; height:70%; margin-left:-.8%; border-radius:999px 999px 4px 4px;
  background:linear-gradient(180deg, #fff, var(--col) 30%, color-mix(in srgb, var(--col) 60%, #000));
  box-shadow:0 0 18px var(--col); transform-origin:50% 100%; transform:rotate(-90deg);
  animation:tnSweep .7s linear forwards}
@keyframes tnSweep{0%{transform:rotate(-90deg); animation-timing-function:cubic-bezier(.25,.6,.35,1)} 72%{transform:rotate(calc(var(--to) + 5deg)); animation-timing-function:ease-in-out} 86%{transform:rotate(calc(var(--to) - 2deg))} 100%{transform:rotate(var(--to))}}
#award .tn-hub{position:absolute; left:50%; bottom:7.4%; width:9%; aspect-ratio:1; border-radius:50%; transform:translate(-50%, 50%);
  background:radial-gradient(circle at 40% 35%, #fff, #9aa3b5 35%, #2a2f42 75%); box-shadow:0 0 0 3px #0b0e1a, 0 0 20px var(--col)}
#award .tn-num{position:absolute; left:50%; bottom:24%; transform:translateX(-50%); font-family:var(--num); font-size:min(8vh, 11vw); line-height:1; color:#fff;
  text-shadow:0 0 18px var(--col), 0 3px 0 rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){ #award .tn-needle, #award .tn-lit{animation-duration:.01s} }