Fullscreen highlights drawer: keep scoreboard visible, don't hide feed; scrollable gear menu; remove slowmo picker + scrim tint

- Scoreboard scale observes #videoContainer (the .ytp inner box) instead of
  #ytpWrap so the overlay tracks the squeezed container when the fullscreen
  highlights drawer opens. Score bar + live-scoring feed shift left with the
  video and stay fully visible next to the drawer.

- msb-small (auto-hide identity + feed under 700 px) now skipped while
  document.fullscreenElement is set — the drawer squeeze on smaller viewports
  was dropping the container under 700 and hiding the live feed.

- Player settings panel (#ytpSettingsPanel) is now vertical-scroll capable:
  max-height: calc(100vh - 120px) + overflow-y: auto + slim on-brand
  scrollbar + overscroll-behavior: contain. Top items (Mini player, Playback
  speed) stay reachable when the injected Scoreboard toggles push the
  list past the visible area.

- Removed the slow-mo (.slowmo-picker) 1/4x/1/2x/3/4x selector from the
  match highlights tab bar.

- Disabled the scoreboard scrim (.msb-scrim { display: none }). The two
  linear-gradients were tinting the top and bottom of the video for text
  legibility, but every scoreboard text element already carries its own
  text-shadow — the tint was showing as permanent shadows over portrait
  and landscape videos alike.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

resources/views/components/video-player.blade.php

@@ -534,10 +534,23 @@
     background: rgba(28,28,28,.95);
     border-radius: 12px;
     min-width: 200px;
-    overflow: hidden;
+    /* Cap height so the panel stays inside the player and scrolls when the
+       item list (mini/speed/autoplay/shuffle + injected Scoreboard toggles)
+       grows taller than the available space above the control bar. */
+    max-height: calc(100vh - 120px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    overscroll-behavior: contain;
     box-shadow: 0 4px 24px rgba(0,0,0,.6);
     z-index: 100;
 }
+/* Slim, on-brand scrollbar so it doesn't clash with the dark panel. */
+.ytp-settings-panel::-webkit-scrollbar { width: 6px; }
+.ytp-settings-panel::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,.22); border-radius: 3px;
+}
+.ytp-settings-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }
+.ytp-settings-panel::-webkit-scrollbar-track { background: transparent; }
 .ytp-settings-panel.open { display: block; }
 .ytp-settings-item {
     display: flex;

resources/views/videos/partials/match/scoreboard/script.blade.php

@@ -268,7 +268,13 @@
         // Keeps the score bar, ticker, and identity at their pixel-perfect
         // proportions no matter how wide the actual player is.
         function initScale() {
-            const wrap  = document.getElementById('ytpWrap');
+            // Scale against #videoContainer (the .ytp inner box) — that's the
+            // element that gets squeezed when the fullscreen highlights drawer
+            // opens (CSS: `.ytp-wrap.ytp-fullscreen.hl-drawer-open .ytp { width:
+            // calc(100% - var(--hl-drawer-w)) }`). Using #ytpWrap here would
+            // keep the overlay at full-screen width and clip its right edge
+            // behind the drawer.
+            const wrap  = document.getElementById('videoContainer') || document.getElementById('ytpWrap');
             const layer = document.getElementById('msbScale');
             if (!wrap || !layer) return;
             const DESIGN_W = 1150;
@@ -278,10 +284,17 @@
                 const s = w / DESIGN_W;
                 layer.style.transform = 'scale(' + s + ')';
                 layer.style.height    = (h / s) + 'px';
-                // Toggle the "small player" state once we're below the design
-                // brief's ~700 px breakpoint (in real pixels).
-                document.body.classList.toggle('msb-small', w < 700);
+                // "small player" auto-hides identity + feed. Skip it in
+                // fullscreen — the highlights drawer squeezes the container
+                // width but the user still wants to see the live feed next
+                // to the drawer.
+                const inFs = !!(document.fullscreenElement || document.webkitFullscreenElement);
+                document.body.classList.toggle('msb-small', !inFs && w < 700);
             };
+            // Re-run when entering/exiting fullscreen so the msb-small flag
+            // updates immediately.
+            document.addEventListener('fullscreenchange',       update);
+            document.addEventListener('webkitfullscreenchange', update);
             update();
             if (typeof ResizeObserver === 'function') {
                 new ResizeObserver(update).observe(wrap);

resources/views/videos/partials/match/scoreboard/styles.blade.php

@@ -40,20 +40,9 @@
     /* transform + height set by JS */
 }
 
-/* Scrims for legibility */
-.msb-scrim {
-    position: absolute; inset: 0; pointer-events: none;
-    background:
-        linear-gradient(to top,    rgba(6,6,8,.9)  0%, rgba(6,6,8,.45) 15%, rgba(6,6,8,0) 30%),
-        linear-gradient(to bottom, rgba(6,6,8,.85) 0%, rgba(6,6,8,.4)  14%, rgba(6,6,8,0) 30%);
-    opacity: 0;
-    transition: opacity .3s ease;
-}
-/* Only show the scrims when there is at least one overlay part visible */
-.msb-has-scorebar .msb-scrim,
-.msb-has-feed     .msb-scrim,
-.msb-has-info     .msb-scrim,
-.msb-has-timeline .msb-scrim { opacity: 1; }
+/* Scrim disabled — every scoreboard text element has its own text-shadow
+   for legibility, so we don't tint the video at all. */
+.msb-scrim { display: none; }
 
 /* ────────────────────────────── match info (top-left) ────────────────── */
 .msb-info { position: absolute; top: 22px; left: 26px; display: flex; align-items: stretch; gap: 12px; }

resources/views/videos/types/match.blade.php

@@ -2636,13 +2636,6 @@
                 <div class="tab-header">
                     <button class="tab-button active" data-tab="official">Points</button>
                     <button class="tab-button" data-tab="review">Coach review</button>
-                    {{-- Slow-mo speed selector — affects both point replays and coach note replays --}}
-                    <div class="slowmo-picker" role="group" aria-label="Slow-mo replay speed" title="Slow-mo speed">
-                        <span class="slowmo-picker-lbl"><i class="bi bi-hourglass-split"></i></span>
-                        <button type="button" class="slowmo-opt"           data-slowmo="0.25">¼×</button>
-                        <button type="button" class="slowmo-opt is-active" data-slowmo="0.5">½×</button>
-                        <button type="button" class="slowmo-opt"           data-slowmo="0.75">¾×</button>
-                    </div>
                 </div>
                 <div class="tab-panels">
                     <!-- Points Tab -->