.hero-scene { position: relative; }
.sideline[hidden] { display: none; }
.sideline { position: absolute; right: 14px; bottom: 0; z-index: 4; width: 244px; height: 395px; pointer-events: none; }
.sideline-parent { position: absolute; bottom: -25px; right: 0; width: 164px; height: 273px; background: url('/assets/sideline-parents-v1.webp') 0 0 / 500% 100% no-repeat; transform-origin: bottom center; transform: translate(var(--camera-x, 0px), var(--camera-y, 0px)) rotate(var(--camera-tilt, 0deg)) scaleX(-1); }
.sideline[data-tracking='true'] .sideline-parent { transition: transform 220ms ease-out; }
.sideline-dialogue { position: relative; z-index: 1; pointer-events: auto; }
.sideline-bubble { position: relative; background: #e6ffbe; color: #183c27; border: 2px solid #183c27; border-radius: 8px; padding: 14px 16px; min-height: 116px; box-shadow: 4px 4px 0 #14231c; }
.sideline-bubble::after { content: ''; position: absolute; right: 32px; bottom: -12px; width: 18px; height: 18px; transform: skewY(-35deg); background: inherit; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.sideline-bubble[data-tone='bad'] { background: #ffded6; color: #792316; border-radius: 0; border-left-width: 6px; }
.sideline-verdict { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.sideline-bubble p { font: 800 22px/1.2 Barlow, Impact, sans-serif; margin: 0; }
.hero-scene:has(.sideline:not([hidden])) .scene-note { display: none; }
.hero-scene:has(.sideline:not([hidden])) .playfield { right: 205px; }
@media (min-width: 1001px) and (max-width: 1250px) {
  .sideline { width: 212px; }
  .sideline-bubble p { font-size: 20px; }
  .hero-scene:has(.sideline:not([hidden])) .playfield { left: 45%; right: 185px; }
}
@media (max-width: 1000px) {
  .sideline { position: relative; right: auto; width: 100%; height: auto; min-height: 236px; padding-bottom: 24px; background: var(--mint); border-top: 1px solid #759984; overflow: hidden; }
  .sideline-parent { width: 124px; height: 207px; right: 2px; bottom: -10px; }
  .sideline-dialogue { width: calc(100% - 132px); max-width: 390px; margin: 18px 0 0 16px; }
  .sideline-bubble { padding: 12px; min-height: 122px; }
  .sideline-bubble p { font-size: 21px; }
  .hero-scene:has(.sideline:not([hidden])) .playfield { right: 0; }
}
@media (min-width: 560px) and (max-width: 1000px) {
  .sideline { min-height: 194px; }
  .sideline-parent { width: 134px; height: 224px; right: 6%; bottom: -25px; }
  .sideline-dialogue { margin-left: 5%; }
  .sideline-bubble { min-height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .sideline .sideline-parent { transform: scaleX(-1) !important; transition: none; }
  .sideline-bubble { transform: none !important; }
}