@guardvideo/player-sdk 1.2.0 → 2.0.0

package/dist/vanilla/guardvideo-player.js

@@ -37281,14 +37281,14 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       }
   };
 
-  function formatTime(seconds) {
-      if (!isFinite(seconds) || isNaN(seconds))
+  function formatTime(s) {
+      if (!isFinite(s) || isNaN(s))
           return '0:00';
-      const h = Math.floor(seconds / 3600);
-      const m = Math.floor((seconds % 3600) / 60);
-      const s = Math.floor(seconds % 60);
+      const h = Math.floor(s / 3600);
+      const m = Math.floor((s % 3600) / 60);
+      const sc = Math.floor(s % 60);
       const mm = String(m).padStart(h > 0 ? 2 : 1, '0');
-      const ss = String(s).padStart(2, '0');
+      const ss = String(sc).padStart(2, '0');
       return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
   }
   function el(tag, cls, attrs) {
@@ -37296,15 +37296,17 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       if (cls)
           e.className = cls;
       if (attrs)
-          Object.entries(attrs).forEach(([k, v]) => e.setAttribute(k, v));
+          for (const [k, v] of Object.entries(attrs))
+              e.setAttribute(k, v);
       return e;
   }
-  function svg(path, w = 20, h = 20) {
+  function svgEl(path, w = 20, h = 20) {
       const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
       s.setAttribute('width', String(w));
       s.setAttribute('height', String(h));
       s.setAttribute('viewBox', '0 0 24 24');
       s.setAttribute('fill', 'currentColor');
+      s.setAttribute('aria-hidden', 'true');
       s.innerHTML = path;
       return s;
   }
@@ -37313,114 +37315,668 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       pause: '<rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>',
       replay: '<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>',
       volHigh: '<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>',
+      volMid: '<path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>',
+      volLow: '<path d="M7 9v6h4l5 5V4l-5 5H7z"/>',
       volMute: '<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>',
       fsEnter: '<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>',
       fsExit: '<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>',
       settings: '<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94zM12,15.6c-1.98,0-3.6-1.62-3.6-3.6s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>',
-      shield: '<path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
-  };
+      shield: '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'};
+  const SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
   let _stylesInjected = false;
-  function injectStyles(accent) {
+  function injectStyles() {
       if (_stylesInjected)
           return;
       _stylesInjected = true;
       const css = `
-/* ── GuardVideo Custom Player ─────────────── */
-.gvp-root{position:relative;background:#000;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;border-radius:10px;overflow:hidden;-webkit-user-select:none;user-select:none;outline:none;}
-.gvp-root:focus-visible{box-shadow:0 0 0 3px ${accent}66;}
-.gvp-video{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px;}
+/* ── GuardVideo Player UI v2 ──────────────────────────────── */
+
+/* Google Font import — Outfit for labels, DM Mono for time */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
+
+/* ── Root ─────────────────────────────────────────────────── */
+.gvp-root {
+  --gvp-accent:      #00e5a0;
+  --gvp-accent-dim:  rgba(0, 229, 160, 0.18);
+  --gvp-accent-glow: rgba(0, 229, 160, 0.35);
+  --gvp-glass-bg:    rgba(8, 8, 14, 0.72);
+  --gvp-glass-bdr:   rgba(255,255,255,0.07);
+  --gvp-text:        rgba(255,255,255,0.92);
+  --gvp-text-dim:    rgba(255,255,255,0.45);
+  --gvp-radius:      12px;
+  --gvp-font:        'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --gvp-mono:        'DM Mono', 'SF Mono', 'Fira Mono', monospace;
+
+  position: relative;
+  background: #050508;
+  font-family: var(--gvp-font);
+  border-radius: var(--gvp-radius);
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  outline: none;
+
+  /* Subtle inner vignette for cinema depth */
+  box-shadow:
+    inset 0 0 80px rgba(0,0,0,0.55),
+    0 24px 80px rgba(0,0,0,0.6);
+}
+
+.gvp-root:focus-visible {
+  outline: 2px solid var(--gvp-accent);
+  outline-offset: 2px;
+}
+
+/* ── Video ────────────────────────────────────────────────── */
+.gvp-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+/* ── Utility ──────────────────────────────────────────────── */
+.gvp-hidden           { display: none !important; }
+.gvp-controls-hidden  { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); pointer-events: none; }
+
+/* ── Gradient overlay (top + bottom) ─────────────────────── */
+.gvp-root::before,
+.gvp-root::after {
+  content: '';
+  position: absolute;
+  left: 0; right: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+.gvp-root::before {
+  top: 0;
+  height: 90px;
+  background: -webkit-linear-gradient(bottom, transparent, rgba(0,0,0,0.55));
+  background:         linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
+  border-radius: var(--gvp-radius) var(--gvp-radius) 0 0;
+}
+.gvp-root::after {
+  bottom: 0;
+  height: 160px;
+  background: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.88));
+  background:         linear-gradient(to bottom, transparent, rgba(0,0,0,0.88));
+  border-radius: 0 0 var(--gvp-radius) var(--gvp-radius);
+}
+
+/* ── Spinner ──────────────────────────────────────────────── */
+.gvp-spinner {
+  position: absolute; inset: 0;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
+  pointer-events: none;
+  z-index: 8;
+}
+.gvp-spinner-ring {
+  width: 44px; height: 44px;
+  border: 2.5px solid rgba(255,255,255,0.08);
+  border-top-color: var(--gvp-accent);
+  border-radius: 50%;
+  -webkit-animation: gvp-spin 0.75s linear infinite;
+          animation: gvp-spin 0.75s linear infinite;
+  box-shadow: 0 0 16px var(--gvp-accent-glow);
+}
+@-webkit-keyframes gvp-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes        gvp-spin  { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+
+/* ── Centre play overlay ──────────────────────────────────── */
+.gvp-center-play {
+  position: absolute; inset: 0; z-index: 6;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  -webkit-transition: background 0.25s; transition: background 0.25s;
+  border-radius: var(--gvp-radius);
+}
+.gvp-center-play:hover { background: rgba(0,0,0,0.22); }
+
+.gvp-center-play-btn {
+  position: relative;
+  width: 76px; height: 76px;
+  border-radius: 50%;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
+  color: #fff;
+  /* Glass morphism */
+  background: rgba(255,255,255,0.10);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
+  border: 1px solid rgba(255,255,255,0.18);
+  -webkit-transition: background 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
+  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 0 0 0 var(--gvp-accent-glow);
+}
+/* Ripple ring on hover */
+.gvp-center-play-btn::after {
+  content: '';
+  position: absolute; inset: -4px;
+  border-radius: 50%;
+  border: 1.5px solid rgba(255,255,255,0.12);
+  -webkit-transition: border-color 0.2s, opacity 0.2s; transition: border-color 0.2s, opacity 0.2s;
+  opacity: 0;
+}
+.gvp-center-play:hover .gvp-center-play-btn::after {
+  opacity: 1;
+  border-color: var(--gvp-accent);
+}
+.gvp-center-play:hover .gvp-center-play-btn {
+  background: var(--gvp-accent-dim);
+  -webkit-transform: scale(1.07);
+          transform: scale(1.07);
+  box-shadow: 0 4px 40px rgba(0,0,0,0.55), 0 0 28px var(--gvp-accent-glow);
+}
+
+/* ── Click-to-toggle overlay ─────────────────────────────── */
+.gvp-click-area {
+  position: absolute; inset: 0;
+  cursor: pointer; z-index: 4;
+}
+
+/* ── Ripple animation ─────────────────────────────────────── */
+.gvp-ripple {
+  position: absolute; border-radius: 50%;
+  -webkit-transform: scale(0); transform: scale(0);
+  background: rgba(255,255,255,0.18);
+  -webkit-animation: gvp-ripple-anim 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
+          animation: gvp-ripple-anim 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
+  pointer-events: none; z-index: 5;
+}
+@-webkit-keyframes gvp-ripple-anim { to { -webkit-transform: scale(5); transform: scale(5); opacity: 0; } }
+@keyframes        gvp-ripple-anim  { to { -webkit-transform: scale(5); transform: scale(5); opacity: 0; } }
+
+/* ── Controls bar ─────────────────────────────────────────── */
+.gvp-controls {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  z-index: 10;
+  padding: 0 14px 14px;
+  -webkit-transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
+                      -webkit-transform 0.35s cubic-bezier(0.4,0,0.2,1);
+  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
+              transform 0.35s cubic-bezier(0.4,0,0.2,1);
+  border-radius: 0 0 var(--gvp-radius) var(--gvp-radius);
+}
+
+/* Inner glass pill that wraps all controls */
+.gvp-controls-inner {
+  background: var(--gvp-glass-bg);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+          backdrop-filter: blur(24px) saturate(160%);
+  border: 1px solid var(--gvp-glass-bdr);
+  border-radius: 10px;
+  padding: 10px 12px 10px;
+  -webkit-box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
+          box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+/* ── Seek row ─────────────────────────────────────────────── */
+.gvp-seek-row {
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.gvp-seek-wrap {
+  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
+  position: relative;
+  height: 4px;
+  cursor: pointer;
+  padding: 8px 0;
+  margin: -8px 0;
+  -webkit-box-sizing: content-box; box-sizing: content-box;
+  touch-action: none;
+}
+
+.gvp-seek-track {
+  height: 3px;
+  background: rgba(255,255,255,0.12);
+  border-radius: 99px;
+  position: relative;
+  overflow: visible;
+  -webkit-transition: height 0.15s; transition: height 0.15s;
+  pointer-events: none;
+}
+.gvp-seek-wrap:hover .gvp-seek-track,
+.gvp-seek-wrap.gvp-dragging .gvp-seek-track { height: 5px; }
+
+.gvp-seek-buffered {
+  position: absolute; left: 0; top: 0; height: 100%;
+  background: rgba(255,255,255,0.22);
+  border-radius: 99px;
+  pointer-events: none;
+  -webkit-transition: width 0.3s; transition: width 0.3s;
+}
+
+.gvp-seek-progress {
+  position: absolute; left: 0; top: 0; height: 100%;
+  background: -webkit-linear-gradient(left, var(--gvp-accent), color-mix(in srgb, var(--gvp-accent) 80%, #fff 20%));
+  background:         linear-gradient(to right, var(--gvp-accent), color-mix(in srgb, var(--gvp-accent) 80%, #fff 20%));
+  border-radius: 99px;
+  pointer-events: none;
+  /* Glow on the progress fill */
+  -webkit-box-shadow: 0 0 8px var(--gvp-accent-glow);
+          box-shadow: 0 0 8px var(--gvp-accent-glow);
+}
 
-/* Spinner */
-.gvp-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(0,0,0,.55);border-radius:10px;}
-.gvp-spinner-ring{width:48px;height:48px;border:3px solid rgba(255,255,255,.15);border-top-color:${accent};border-radius:50%;animation:gvp-spin .8s linear infinite;}
-@keyframes gvp-spin{to{transform:rotate(360deg);}}
-.gvp-spinner-hidden{display:none;}
+/* Thumb — visible on hover/drag */
+.gvp-seek-thumb {
+  position: absolute; top: 50%;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+          transform: translate(-50%, -50%) scale(0);
+  width: 14px; height: 14px;
+  background: #fff;
+  border-radius: 50%;
+  pointer-events: none;
+  -webkit-box-shadow: 0 0 0 3px var(--gvp-accent-dim), 0 2px 6px rgba(0,0,0,0.5);
+          box-shadow: 0 0 0 3px var(--gvp-accent-dim), 0 2px 6px rgba(0,0,0,0.5);
+  -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
+          transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
+}
+.gvp-seek-wrap:hover .gvp-seek-thumb,
+.gvp-seek-wrap.gvp-dragging .gvp-seek-thumb {
+  -webkit-transform: translate(-50%,-50%) scale(1);
+          transform: translate(-50%,-50%) scale(1);
+}
 
-/* Centre play */
-.gvp-center-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,.3);transition:background .2s;border-radius:10px;z-index:3;}
-.gvp-center-play:hover{background:rgba(0,0,0,.45);}
-.gvp-center-play-btn{width:72px;height:72px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.25);transition:background .2s,transform .15s;color:#fff;}
-.gvp-center-play:hover .gvp-center-play-btn{background:${accent}cc;transform:scale(1.08);}
-.gvp-center-play-hidden{display:none;}
+/* Seek tooltip */
+.gvp-seek-tooltip {
+  position: absolute;
+  bottom: 26px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  background: rgba(10,10,14,0.92);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+  border: 1px solid var(--gvp-glass-bdr);
+  color: var(--gvp-text);
+  font-family: var(--gvp-mono);
+  font-size: 11px;
+  font-weight: 500;
+  padding: 3px 8px;
+  border-radius: 5px;
+  pointer-events: none;
+  white-space: nowrap;
+  opacity: 0;
+  -webkit-transition: opacity 0.12s; transition: opacity 0.12s;
+  -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.45); box-shadow: 0 4px 12px rgba(0,0,0,0.45);
+}
+.gvp-seek-wrap:hover .gvp-seek-tooltip { opacity: 1; }
 
-/* Click overlay */
-.gvp-click-area{position:absolute;inset:0;cursor:pointer;z-index:1;}
-.gvp-click-area-hidden{display:none;}
+/* Caret below tooltip */
+.gvp-seek-tooltip::after {
+  content: '';
+  position: absolute; bottom: -5px; left: 50%;
+  -webkit-transform: translateX(-50%); transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(10,10,14,0.92);
+  border-bottom-width: 0;
+}
 
-/* Ripple */
-.gvp-ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.25);animation:gvp-ripple-anim .5s ease-out forwards;pointer-events:none;z-index:2;}
-@keyframes gvp-ripple-anim{to{transform:scale(4);opacity:0;}}
+/* ── Button row ─────────────────────────────────────────────  */
+.gvp-btn-row {
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 2px;
+}
 
-/* Controls bar */
-.gvp-controls{position:absolute;bottom:0;left:0;right:0;z-index:10;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%);padding:36px 14px 10px;transition:opacity .3s,transform .3s;border-radius:0 0 10px 10px;}
-.gvp-controls-hidden{opacity:0;transform:translateY(6px);pointer-events:none;}
+.gvp-btn {
+  background: none; border: none;
+  color: rgba(255,255,255,0.75);
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 7px;
+  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
+  -webkit-transition: background 0.14s, color 0.14s, -webkit-transform 0.12s;
+          transition: background 0.14s, color 0.14s, transform 0.12s;
+  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
+  line-height: 0;
+}
+.gvp-btn:hover {
+  background: rgba(255,255,255,0.09);
+  color: #fff;
+  -webkit-transform: scale(1.08); transform: scale(1.08);
+}
+.gvp-btn:active {
+  background: rgba(255,255,255,0.14);
+  -webkit-transform: scale(0.96); transform: scale(0.96);
+}
+/* Accent highlight on play button */
+.gvp-btn-play:hover { background: var(--gvp-accent-dim); color: var(--gvp-accent); }
 
-/* Seek bar */
-.gvp-seek-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
-.gvp-seek-wrap{flex:1;position:relative;height:4px;cursor:pointer;padding:8px 0;margin:-8px 0;box-sizing:content-box;}
-.gvp-seek-track{height:4px;background:rgba(255,255,255,.2);border-radius:4px;position:relative;overflow:hidden;transition:height .15s;}
-.gvp-seek-wrap:hover .gvp-seek-track{height:6px;}
-.gvp-seek-buffered{position:absolute;left:0;top:0;height:100%;background:rgba(255,255,255,.35);border-radius:4px;pointer-events:none;}
-.gvp-seek-progress{position:absolute;left:0;top:0;height:100%;background:${accent};border-radius:4px;pointer-events:none;transition:width .1s linear;}
-.gvp-seek-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .15s;}
-.gvp-seek-wrap:hover .gvp-seek-thumb{opacity:1;}
-.gvp-seek-tooltip{position:absolute;bottom:24px;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;font-size:11px;font-weight:500;padding:3px 7px;border-radius:4px;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .1s;}
-.gvp-seek-wrap:hover .gvp-seek-tooltip{opacity:1;}
+/* ── Volume group ─────────────────────────────────────────── */
+.gvp-volume-wrap {
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 2px;
+}
+.gvp-volume-slider {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 0;
+  max-width: 72px;
+  height: 3px;
+  background: rgba(255,255,255,0.18);
+  border-radius: 99px;
+  outline: none;
+  cursor: pointer;
+  overflow: visible;
+  -webkit-transition: width 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.22s;
+          transition: width 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.22s;
+  opacity: 0;
+  /* accent-color is supported in modern browsers */
+  accent-color: var(--gvp-accent);
+}
+/* Show slider when volume-wrap is hovered */
+.gvp-volume-wrap:hover .gvp-volume-slider,
+.gvp-volume-wrap:focus-within .gvp-volume-slider {
+  width: 72px;
+  opacity: 1;
+}
+/* WebKit thumb */
+.gvp-volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px; height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+          box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+}
+/* Firefox thumb */
+.gvp-volume-slider::-moz-range-thumb {
+  width: 12px; height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+}
+/* Firefox track */
+.gvp-volume-slider::-moz-range-track {
+  background: rgba(255,255,255,0.18);
+  border-radius: 99px;
+  height: 3px;
+}
+/* Edge/IE thumb */
+.gvp-volume-slider::-ms-thumb {
+  width: 12px; height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  border: none;
+}
+.gvp-volume-slider::-ms-track {
+  background: rgba(255,255,255,0.18);
+  border-color: transparent;
+  color: transparent;
+  height: 3px;
+}
+.gvp-volume-slider::-ms-fill-lower { background: var(--gvp-accent); border-radius: 99px; }
 
-/* Button row */
-.gvp-btn-row{display:flex;align-items:center;gap:4px;}
-.gvp-btn{background:none;border:none;color:#fff;cursor:pointer;padding:5px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0;}
-.gvp-btn:hover{background:rgba(255,255,255,.12);color:${accent};}
-.gvp-btn:active{background:rgba(255,255,255,.2);}
+/* ── Time display ──────────────────────────────────────────── */
+.gvp-time {
+  font-family: var(--gvp-mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--gvp-text);
+  white-space: nowrap;
+  letter-spacing: 0.04em;
+  padding: 0 4px;
+  /* Tabular numerals so digits don't shift width */
+  font-variant-numeric: tabular-nums;
+  -moz-font-feature-settings: "tnum";
+  -webkit-font-feature-settings: "tnum";
+  font-feature-settings: "tnum";
+}
+.gvp-time-sep { color: var(--gvp-text-dim); margin: 0 2px; }
+
+.gvp-spacer { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
+
+/* ── Speed button ─────────────────────────────────────────── */
+.gvp-rate-label {
+  font-family: var(--gvp-font);
+  font-size: 11px; font-weight: 700;
+  color: var(--gvp-text-dim);
+  min-width: 30px; text-align: center;
+  cursor: pointer;
+  padding: 5px 4px;
+  border-radius: 6px;
+  -webkit-transition: background 0.14s, color 0.14s; transition: background 0.14s, color 0.14s;
+  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
+  letter-spacing: 0.01em;
+  line-height: 1;
+}
+.gvp-rate-label:hover { background: rgba(255,255,255,0.09); color: #fff; }
+.gvp-rate-label-active { color: var(--gvp-accent); }
+
+/* ── Popup menus ──────────────────────────────────────────── */
+.gvp-menu-wrap { position: relative; }
+
+.gvp-menu {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  right: 0;
+  background: rgba(12,12,18,0.96);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+          backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid var(--gvp-glass-bdr);
+  border-radius: 10px;
+  min-width: 148px;
+  overflow: hidden;
+  -webkit-box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 0 0.5px rgba(255,255,255,0.04);
+          box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 0 0.5px rgba(255,255,255,0.04);
+  -webkit-animation: gvp-menu-in 0.14s cubic-bezier(0.22,1,0.36,1);
+          animation: gvp-menu-in 0.14s cubic-bezier(0.22,1,0.36,1);
+  z-index: 20;
+}
+@-webkit-keyframes gvp-menu-in {
+  from { opacity: 0; -webkit-transform: scale(0.92) translateY(6px); transform: scale(0.92) translateY(6px); }
+  to   { opacity: 1; -webkit-transform: none; transform: none; }
+}
+@keyframes gvp-menu-in {
+  from { opacity: 0; -webkit-transform: scale(0.92) translateY(6px); transform: scale(0.92) translateY(6px); }
+  to   { opacity: 1; -webkit-transform: none; transform: none; }
+}
+
+.gvp-menu-title {
+  font-family: var(--gvp-font);
+  font-size: 10px; font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--gvp-text-dim);
+  padding: 10px 13px 5px;
+}
+
+.gvp-menu-item {
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
+  padding: 7px 13px;
+  font-family: var(--gvp-font);
+  font-size: 13px; font-weight: 500;
+  color: var(--gvp-text);
+  cursor: pointer;
+  -webkit-transition: background 0.1s; transition: background 0.1s;
+  gap: 12px;
+}
+.gvp-menu-item:hover { background: rgba(255,255,255,0.06); }
+.gvp-menu-item-active { color: var(--gvp-accent); }
+
+.gvp-menu-check {
+  font-size: 13px;
+  color: var(--gvp-accent);
+  line-height: 1;
+  /* Unicode checkmark — crisp on all platforms */
+}
+
+.gvp-menu-sep {
+  height: 1px;
+  background: rgba(255,255,255,0.06);
+  margin: 3px 0;
+}
+
+/* ── Error overlay ────────────────────────────────────────── */
+.gvp-error {
+  position: absolute; inset: 0; z-index: 15;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-orient: vertical; -webkit-box-direction: normal;
+  -ms-flex-direction: column; flex-direction: column;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
+  background: rgba(6,6,10,0.88);
+  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
+  color: #fff;
+  gap: 10px;
+  padding: 28px;
+  border-radius: var(--gvp-radius);
+  text-align: center;
+}
+.gvp-error-icon { font-size: 40px; line-height: 1; }
+.gvp-error-code {
+  font-family: var(--gvp-mono);
+  font-size: 10px; font-weight: 500;
+  letter-spacing: 0.14em;
+  color: #f87171;
+  text-transform: uppercase;
+  background: rgba(248,113,113,0.1);
+  border: 1px solid rgba(248,113,113,0.25);
+  padding: 3px 10px; border-radius: 4px;
+}
+.gvp-error-msg {
+  font-family: var(--gvp-font);
+  font-size: 14px; font-weight: 400;
+  color: rgba(255,255,255,0.6);
+  max-width: 320px; line-height: 1.6;
+}
 
-/* Volume */
-.gvp-volume-wrap{display:flex;align-items:center;gap:5px;}
-.gvp-volume-slider{-webkit-appearance:none;width:70px;height:4px;background:rgba(255,255,255,.25);border-radius:4px;outline:none;cursor:pointer;accent-color:${accent};}
-.gvp-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4);}
-.gvp-volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none;}
+/* ── Secure badge ─────────────────────────────────────────── */
+.gvp-badge {
+  position: absolute; top: 12px; right: 14px; z-index: 5;
+  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 5px;
+  background: rgba(8,8,14,0.60);
+  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 99px;
+  padding: 4px 10px 4px 7px;
+  font-family: var(--gvp-font);
+  font-size: 10px; font-weight: 700;
+  color: var(--gvp-accent);
+  pointer-events: none;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  -webkit-transition: opacity 0.3s; transition: opacity 0.3s;
+  -webkit-box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.05);
+          box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.05);
+}
+.gvp-badge-hidden { opacity: 0; }
 
-/* Time */
-.gvp-time{font-size:12px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em;}
-.gvp-spacer{flex:1;}
+/* ── Forensic watermark ───────────────────────────────────── */
+.gvp-watermark {
+  position: absolute; inset: 0;
+  pointer-events: none; overflow: hidden; z-index: 6;
+}
+.gvp-watermark-text {
+  position: absolute;
+  white-space: nowrap;
+  font-family: var(--gvp-mono);
+  font-size: 12px;
+  color: rgba(255,255,255,0.055);
+  -webkit-transform: rotate(-28deg); transform: rotate(-28deg);
+  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
+  pointer-events: none;
+  letter-spacing: 0.06em;
+}
 
-/* Menus */
-.gvp-menu-wrap{position:relative;}
-.gvp-menu{position:absolute;bottom:calc(100% + 8px);right:0;background:rgba(18,18,22,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:8px;min-width:140px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:gvp-menu-in .1s ease-out;z-index:20;}
-.gvp-menu-hidden{display:none;}
-@keyframes gvp-menu-in{from{opacity:0;transform:scale(.95) translateY(4px);}to{opacity:1;transform:scale(1) translateY(0);}}
-.gvp-menu-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);padding:8px 12px 4px;}
-.gvp-menu-item{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;font-size:13px;color:rgba(255,255,255,.85);cursor:pointer;transition:background .12s;gap:10px;}
-.gvp-menu-item:hover{background:rgba(255,255,255,.07);}
-.gvp-menu-item-active{color:${accent};font-weight:600;}
-.gvp-menu-check{font-size:14px;color:${accent};}
-.gvp-menu-sep{height:1px;background:rgba(255,255,255,.07);margin:3px 0;}
+/* ── Live dot (for live streams) ─────────────────────────── */
+.gvp-live-badge {
+  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 5px;
+  font-family: var(--gvp-font);
+  font-size: 11px; font-weight: 700;
+  color: #f87171;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.gvp-live-dot {
+  width: 7px; height: 7px;
+  background: #f87171;
+  border-radius: 50%;
+  -webkit-animation: gvp-live-pulse 1.5s ease-in-out infinite;
+          animation: gvp-live-pulse 1.5s ease-in-out infinite;
+}
+@-webkit-keyframes gvp-live-pulse {
+  0%, 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
+  50%       { opacity: 0.5; -webkit-transform: scale(0.7); transform: scale(0.7); }
+}
+@keyframes gvp-live-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.5; transform: scale(0.7); }
+}
 
-/* Error */
-.gvp-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.8);color:#fff;gap:10px;padding:24px;border-radius:10px;text-align:center;}
-.gvp-error-hidden{display:none;}
-.gvp-error-icon{font-size:36px;}
-.gvp-error-code{font-size:11px;font-weight:700;letter-spacing:.1em;color:#f87171;text-transform:uppercase;}
-.gvp-error-msg{font-size:14px;color:rgba(255,255,255,.7);max-width:320px;line-height:1.5;}
+/* ── Divider between button groups ───────────────────────── */
+.gvp-divider {
+  width: 1px; height: 18px;
+  background: rgba(255,255,255,0.1);
+  margin: 0 4px;
+  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
+}
 
-/* Secure badge */
-.gvp-badge{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border-radius:20px;padding:3px 9px 3px 7px;font-size:10px;font-weight:600;color:${accent};pointer-events:none;z-index:5;letter-spacing:.04em;transition:opacity .3s;}
-.gvp-badge-hidden{opacity:0;}
+/* ── Tooltip on buttons ───────────────────────────────────── */
+.gvp-btn[title]:hover::after {
+  content: attr(title);
+  position: absolute;
+  bottom: calc(100% + 7px);
+  left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
+  background: rgba(10,10,14,0.95);
+  border: 1px solid var(--gvp-glass-bdr);
+  color: var(--gvp-text);
+  font-family: var(--gvp-font);
+  font-size: 11px; font-weight: 500;
+  padding: 3px 8px; border-radius: 5px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 30;
+}
 
-/* Watermark */
-.gvp-watermark{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6;}
-.gvp-watermark-text{position:absolute;white-space:nowrap;font-size:13px;font-family:monospace;color:rgba(255,255,255,.065);transform:rotate(-28deg);user-select:none;pointer-events:none;letter-spacing:.05em;}
+/* ── Focus ring (keyboard nav) ────────────────────────────── */
+.gvp-btn:focus-visible,
+.gvp-rate-label:focus-visible,
+.gvp-seek-wrap:focus-visible {
+  outline: 2px solid var(--gvp-accent);
+  outline-offset: 2px;
+}
 
-/* Speed */
-.gvp-rate-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.7);min-width:28px;text-align:center;cursor:pointer;padding:5px 4px;border-radius:4px;transition:background .12s;flex-shrink:0;}
-.gvp-rate-label:hover{background:rgba(255,255,255,.1);}
+/* ── Responsive: hide volume slider text on tiny players ─── */
+@media (max-width: 380px) {
+  .gvp-volume-slider { display: none; }
+  .gvp-time { font-size: 11px; }
+  .gvp-controls-inner { padding: 8px 10px; }
+}
 `;
       const tag = document.createElement('style');
-      tag.setAttribute('data-guardvideo', 'player-ui-styles');
+      tag.setAttribute('data-guardvideo', 'player-ui-styles-v2');
       tag.textContent = css;
       document.head.appendChild(tag);
   }
-  const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
-  class VanillaPlayerUI {
+  class PlayerUI {
       constructor(container, videoId, config) {
           this.playerState = exports.PlayerState.IDLE;
           this.duration = 0;
@@ -37430,198 +37986,285 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.playbackRate = 1;
           this.openMenu = null;
           this.hideTimer = null;
-          this.watermarkText = null;
           this.seekDragging = false;
-          this.accent = config.branding?.accentColor ?? '#44c09b';
-          this.brandName = config.branding?.name ?? 'GuardVideo';
-          const forensic = config.forensicWatermark !== false;
-          injectStyles(this.accent);
-          this.buildDOM(container, config.width ?? '100%', config.height ?? 'auto');
-          this.wireEvents(videoId, config, forensic);
-          if (forensic) {
-              const wtxt = config.viewerEmail || config.viewerName || '';
-              if (wtxt) {
-                  setTimeout(() => {
-                      this.watermarkText = wtxt;
-                      this.renderWatermark();
-                  }, 1500);
-              }
-          }
-      }
-      buildDOM(container, width, height) {
+          const accent = config.branding?.accentColor ?? '#00e5a0';
+          const brandName = config.branding?.name ?? 'GuardVideo';
+          injectStyles();
           container.innerHTML = '';
           this.root = el('div', 'gvp-root');
-          this.root.style.width = width;
-          this.root.style.height = height;
+          this.root.style.width = config.width ?? '100%';
+          this.root.style.height = config.height ?? 'auto';
+          this.root.style.setProperty('--gvp-accent', accent);
+          this.root.style.setProperty('--gvp-accent-dim', this._hexToRgba(accent, 0.18));
+          this.root.style.setProperty('--gvp-accent-glow', this._hexToRgba(accent, 0.35));
           this.root.setAttribute('tabindex', '0');
+          this.root.setAttribute('role', 'region');
+          this.root.setAttribute('aria-label', `${brandName} video player`);
           this.videoEl = el('video', 'gvp-video', { playsinline: '', preload: 'metadata' });
           this.badge = el('div', 'gvp-badge');
-          const shieldSvg = svg(ICON.shield, 14, 14);
-          shieldSvg.style.color = this.accent;
-          this.badge.appendChild(shieldSvg);
-          this.badge.appendChild(document.createTextNode(this.brandName));
+          this.badge.setAttribute('aria-hidden', 'true');
+          this.badge.appendChild(svgEl(ICON.shield, 13, 13));
+          this.badge.appendChild(document.createTextNode(brandName));
           this.watermarkDiv = el('div', 'gvp-watermark');
-          this.spinner = el('div', 'gvp-spinner gvp-spinner-hidden');
+          this.watermarkDiv.setAttribute('aria-hidden', 'true');
+          this.spinner = el('div', 'gvp-spinner gvp-hidden');
+          this.spinner.setAttribute('aria-label', 'Loading');
+          this.spinner.setAttribute('role', 'status');
           this.spinner.appendChild(el('div', 'gvp-spinner-ring'));
-          this.errorOverlay = el('div', 'gvp-error gvp-error-hidden');
+          this.errorOverlay = el('div', 'gvp-error gvp-hidden');
+          this.errorOverlay.setAttribute('role', 'alert');
           const errIcon = el('div', 'gvp-error-icon');
           errIcon.textContent = '⚠️';
+          errIcon.setAttribute('aria-hidden', 'true');
           const errCode = el('div', 'gvp-error-code');
-          errCode.id = 'gvp-err-code';
           const errMsg = el('div', 'gvp-error-msg');
-          errMsg.id = 'gvp-err-msg';
           this.errorOverlay.append(errIcon, errCode, errMsg);
           this.centerPlay = el('div', 'gvp-center-play');
+          this.centerPlay.setAttribute('role', 'button');
+          this.centerPlay.setAttribute('aria-label', 'Play');
           this.centerPlayBtn = el('div', 'gvp-center-play-btn');
-          this.centerPlayBtn.appendChild(svg(ICON.play, 32, 32));
+          this.centerPlayBtn.appendChild(svgEl(ICON.play, 30, 30));
           this.centerPlay.appendChild(this.centerPlayBtn);
-          this.clickArea = el('div', 'gvp-click-area gvp-click-area-hidden');
+          this.clickArea = el('div', 'gvp-click-area gvp-hidden');
+          this.clickArea.setAttribute('aria-hidden', 'true');
           this.controls = el('div', 'gvp-controls');
+          const inner = el('div', 'gvp-controls-inner');
           const seekRow = el('div', 'gvp-seek-row');
           this.seekWrap = el('div', 'gvp-seek-wrap');
+          this.seekWrap.setAttribute('role', 'slider');
+          this.seekWrap.setAttribute('aria-label', 'Seek');
+          this.seekWrap.setAttribute('aria-valuemin', '0');
+          this.seekWrap.setAttribute('aria-valuemax', '100');
+          this.seekWrap.setAttribute('aria-valuenow', '0');
+          this.seekWrap.setAttribute('aria-valuetext', '0:00 of 0:00');
+          this.seekWrap.setAttribute('tabindex', '0');
           const seekTrack = el('div', 'gvp-seek-track');
           this.seekBuffered = el('div', 'gvp-seek-buffered');
           this.seekProgress = el('div', 'gvp-seek-progress');
           this.seekThumb = el('div', 'gvp-seek-thumb');
           this.seekTooltip = el('div', 'gvp-seek-tooltip');
+          this.seekTooltip.setAttribute('aria-hidden', 'true');
           seekTrack.append(this.seekBuffered, this.seekProgress);
           this.seekWrap.append(seekTrack, this.seekThumb, this.seekTooltip);
           seekRow.appendChild(this.seekWrap);
-          this.controls.appendChild(seekRow);
+          inner.appendChild(seekRow);
           const btnRow = el('div', 'gvp-btn-row');
-          this.playBtn = el('button', 'gvp-btn');
+          this.playBtn = el('button', 'gvp-btn gvp-btn-play');
+          this.playBtn.type = 'button';
+          this.playBtn.setAttribute('aria-label', 'Play');
           this.playBtn.title = 'Play (k)';
-          this.playBtn.appendChild(svg(ICON.play));
+          this.playBtn.appendChild(svgEl(ICON.play));
           const volWrap = el('div', 'gvp-volume-wrap');
           this.volBtn = el('button', 'gvp-btn');
+          this.volBtn.type = 'button';
+          this.volBtn.setAttribute('aria-label', 'Mute');
           this.volBtn.title = 'Mute (m)';
-          this.volBtn.appendChild(svg(ICON.volHigh, 18, 18));
+          this.volBtn.appendChild(svgEl(ICON.volHigh, 18, 18));
           this.volSlider = el('input', 'gvp-volume-slider');
-          this.volSlider.type = 'range';
-          this.volSlider.min = '0';
-          this.volSlider.max = '1';
-          this.volSlider.step = '0.02';
-          this.volSlider.value = '1';
-          this.volSlider.title = 'Volume';
+          Object.assign(this.volSlider, { type: 'range', min: '0', max: '1', step: '0.02', value: '1' });
+          this.volSlider.setAttribute('aria-label', 'Volume');
           volWrap.append(this.volBtn, this.volSlider);
           this.timeEl = el('span', 'gvp-time');
+          this.timeEl.setAttribute('aria-live', 'off');
           this.timeEl.textContent = '0:00 / 0:00';
           const spacer = el('div', 'gvp-spacer');
+          const divider = el('div', 'gvp-divider');
+          divider.setAttribute('aria-hidden', 'true');
           const speedWrap = el('div', 'gvp-menu-wrap');
           this.speedLabel = el('span', 'gvp-rate-label');
           this.speedLabel.textContent = '1×';
-          this.speedLabel.title = 'Playback speed';
-          this.speedMenu = el('div', 'gvp-menu gvp-menu-hidden');
+          this.speedLabel.setAttribute('role', 'button');
+          this.speedLabel.setAttribute('aria-label', 'Playback speed');
+          this.speedLabel.setAttribute('aria-haspopup', 'menu');
+          this.speedLabel.setAttribute('tabindex', '0');
+          this.speedMenu = el('div', 'gvp-menu gvp-hidden');
+          this.speedMenu.setAttribute('role', 'menu');
+          this.speedMenu.setAttribute('aria-label', 'Playback speed');
           const speedTitle = el('div', 'gvp-menu-title');
+          speedTitle.setAttribute('aria-hidden', 'true');
           speedTitle.textContent = 'Speed';
           this.speedMenu.appendChild(speedTitle);
           SPEEDS.forEach(r => {
-              const item = el('div', `gvp-menu-item${r === 1 ? ' gvp-menu-item-active' : ''}`);
-              item.textContent = r === 1 ? 'Normal' : `${r}×`;
+              const active = r === 1;
+              const item = el('div', active ? 'gvp-menu-item gvp-menu-item-active' : 'gvp-menu-item');
+              item.setAttribute('role', 'menuitemradio');
+              item.setAttribute('aria-checked', active ? 'true' : 'false');
               item.dataset['speed'] = String(r);
+              item.textContent = r === 1 ? 'Normal' : `${r}×`;
+              if (active) {
+                  const check = el('span', 'gvp-menu-check');
+                  check.setAttribute('aria-hidden', 'true');
+                  check.textContent = '✓';
+                  item.appendChild(check);
+              }
               this.speedMenu.appendChild(item);
           });
           speedWrap.append(this.speedLabel, this.speedMenu);
           const qualWrap = el('div', 'gvp-menu-wrap');
           this.settingsBtn = el('button', 'gvp-btn');
-          this.settingsBtn.title = 'Quality settings';
-          this.settingsBtn.appendChild(svg(ICON.settings, 18, 18));
-          this.settingsBtn.style.display = 'none';
-          this.qualityMenu = el('div', 'gvp-menu gvp-menu-hidden');
+          this.settingsBtn.type = 'button';
+          this.settingsBtn.setAttribute('aria-label', 'Quality settings');
+          this.settingsBtn.setAttribute('aria-haspopup', 'menu');
+          this.settingsBtn.title = 'Quality';
+          this.settingsBtn.appendChild(svgEl(ICON.settings, 18, 18));
+          this.settingsBtn.classList.add('gvp-hidden');
+          this.qualityMenu = el('div', 'gvp-menu gvp-hidden');
+          this.qualityMenu.setAttribute('role', 'menu');
+          this.qualityMenu.setAttribute('aria-label', 'Video quality');
           qualWrap.append(this.settingsBtn, this.qualityMenu);
           this.fsBtn = el('button', 'gvp-btn');
+          this.fsBtn.type = 'button';
+          this.fsBtn.setAttribute('aria-label', 'Enter fullscreen');
           this.fsBtn.title = 'Fullscreen (f)';
-          this.fsBtn.appendChild(svg(ICON.fsEnter, 18, 18));
-          btnRow.append(this.playBtn, volWrap, this.timeEl, spacer, speedWrap, qualWrap, this.fsBtn);
-          this.controls.appendChild(btnRow);
+          this.fsBtn.appendChild(svgEl(ICON.fsEnter, 18, 18));
+          btnRow.append(this.playBtn, volWrap, this.timeEl, spacer, speedWrap, divider, qualWrap, this.fsBtn);
+          inner.appendChild(btnRow);
+          this.controls.appendChild(inner);
           this.root.append(this.videoEl, this.badge, this.watermarkDiv, this.spinner, this.errorOverlay, this.centerPlay, this.clickArea, this.controls);
           container.appendChild(this.root);
-      }
-      wireEvents(videoId, config, forensicWatermark) {
+          this._onFsChangeBound = () => this._onFsChange();
+          this._seekMouseMoveBound = (e) => { if (this.seekDragging)
+              this._seekTo(e.clientX); };
+          this._seekMouseUpBound = () => this._endSeekDrag();
+          this._seekTouchMoveBound = (e) => {
+              if (!this.seekDragging)
+                  return;
+              e.preventDefault();
+              this._seekTo(e.touches[0].clientX);
+          };
+          this._seekTouchEndBound = () => this._endSeekDrag();
+          this._wireEvents(videoId, config);
+          if (config.forensicWatermark !== false) {
+              const wmText = config.viewerEmail || config.viewerName || '';
+              if (wmText)
+                  this._renderWatermark(wmText);
+          }
+      }
+      _hexToRgba(hex, alpha) {
+          const clean = hex.replace('#', '');
+          const full = clean.length === 3
+              ? clean.split('').map(c => c + c).join('')
+              : clean;
+          const r = parseInt(full.substring(0, 2), 16);
+          const g = parseInt(full.substring(2, 4), 16);
+          const b = parseInt(full.substring(4, 6), 16);
+          if (isNaN(r) || isNaN(g) || isNaN(b))
+              return `rgba(0,229,160,${alpha})`;
+          return `rgba(${r},${g},${b},${alpha})`;
+      }
+      _wireEvents(videoId, config) {
           const video = this.videoEl;
           this.corePlayer = new GuardVideoPlayer$1(video, videoId, {
               ...config,
               controls: false,
-              forensicWatermark,
+              forensicWatermark: config.forensicWatermark !== false,
               onReady: () => {
                   config.onReady?.();
-                  setTimeout(() => {
-                      this.qualityLevels = this.corePlayer.getQualityLevels();
-                      this.buildQualityMenu();
-                  }, 100);
+                  const levels = this.corePlayer.getQualityLevels();
+                  if (levels.length) {
+                      this.qualityLevels = levels;
+                      this._buildQualityMenu();
+                  }
+                  else {
+                      setTimeout(() => {
+                          this.qualityLevels = this.corePlayer.getQualityLevels();
+                          if (this.qualityLevels.length)
+                              this._buildQualityMenu();
+                      }, 100);
+                  }
               },
               onError: (err) => {
-                  this.showError(err);
+                  this._showError(err);
                   config.onError?.(err);
               },
               onQualityChange: (quality) => {
                   const idx = this.qualityLevels.findIndex(l => l.name === quality);
                   this.currentQualityIdx = idx;
-                  this.refreshQualityMenu();
+                  this._refreshQualityMenu();
                   config.onQualityChange?.(quality);
               },
               onStateChange: (state) => {
-                  this.onStateChange(state);
+                  this._onStateChange(state);
                   config.onStateChange?.(state);
               },
           });
-          video.addEventListener('timeupdate', () => this.onTimeUpdate());
-          video.addEventListener('loadedmetadata', () => { this.duration = video.duration || 0; this.onTimeUpdate(); });
-          video.addEventListener('durationchange', () => { this.duration = video.duration || 0; });
+          video.addEventListener('timeupdate', () => {
+              config.onTimeUpdate?.(video.currentTime);
+              this._onTimeUpdate();
+          });
+          video.addEventListener('loadedmetadata', () => {
+              this.duration = video.duration || 0;
+              this._onTimeUpdate();
+          });
+          video.addEventListener('durationchange', () => {
+              this.duration = video.duration || 0;
+          });
           video.addEventListener('progress', () => {
               if (video.buffered.length > 0) {
                   this.bufferedEnd = video.buffered.end(video.buffered.length - 1);
-                  this.updateSeekBar();
+                  this._updateSeekBar();
               }
           });
-          video.addEventListener('volumechange', () => this.onVolumeChange());
+          video.addEventListener('volumechange', () => this._onVolumeChange());
           video.addEventListener('ended', () => {
-              this.showControls(true);
-              this.renderPlayBtn();
+              config.onEnded?.();
+              this._showControls(true);
+              this._renderPlayBtn();
           });
           video.addEventListener('ratechange', () => {
               this.playbackRate = video.playbackRate;
-              this.speedLabel.textContent = this.playbackRate === 1 ? '1×' : `${this.playbackRate}×`;
+              const isNormal = this.playbackRate === 1;
+              this.speedLabel.textContent = isNormal ? '1×' : `${this.playbackRate}×`;
+              this.speedLabel.classList.toggle('gvp-rate-label-active', !isNormal);
           });
-          this.playBtn.addEventListener('click', (e) => { e.stopPropagation(); this.togglePlay(); });
-          this.volBtn.addEventListener('click', (e) => { e.stopPropagation(); this.toggleMute(); });
+          this.playBtn.addEventListener('click', (e) => { e.stopPropagation(); this._togglePlay(); });
+          this.volBtn.addEventListener('click', (e) => { e.stopPropagation(); this._toggleMute(); });
           this.volSlider.addEventListener('input', () => {
               video.volume = parseFloat(this.volSlider.value);
               video.muted = video.volume === 0;
           });
-          this.seekWrap.addEventListener('click', (e) => {
-              e.stopPropagation();
-              this.seekTo(e);
-              this.resetHideTimer();
-          });
-          this.seekWrap.addEventListener('mousemove', (e) => this.onSeekHover(e));
-          this.seekWrap.addEventListener('mouseleave', () => { this.seekTooltip.style.opacity = '0'; });
           this.seekWrap.addEventListener('mousedown', (e) => {
-              this.seekDragging = true;
-              this.seekTo(e);
-              const onMove = (ev) => { if (this.seekDragging)
-                  this.seekTo(ev); };
-              const onUp = () => { this.seekDragging = false; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
-              window.addEventListener('mousemove', onMove);
-              window.addEventListener('mouseup', onUp);
+              e.preventDefault();
+              this._startSeekDrag();
+              this._seekTo(e.clientX);
+              window.addEventListener('mousemove', this._seekMouseMoveBound);
+              window.addEventListener('mouseup', this._seekMouseUpBound);
           });
-          this.speedLabel.addEventListener('click', (e) => {
-              e.stopPropagation();
-              this.toggleMenu('speed');
+          this.seekWrap.addEventListener('mousemove', (e) => this._onSeekHover(e.clientX));
+          this.seekWrap.addEventListener('mouseleave', () => {
+              this.seekTooltip.style.opacity = '0';
+          });
+          this.seekWrap.addEventListener('touchstart', (e) => {
+              e.preventDefault();
+              this._startSeekDrag();
+              this._seekTo(e.touches[0].clientX);
+              window.addEventListener('touchmove', this._seekTouchMoveBound, { passive: false });
+              window.addEventListener('touchend', this._seekTouchEndBound);
+          }, { passive: false });
+          this.seekWrap.addEventListener('keydown', (e) => {
+              if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+                  return;
+              e.preventDefault();
+              const delta = e.key === 'ArrowLeft' ? -5 : 5;
+              this.corePlayer.seek(Math.max(0, Math.min(this.duration, video.currentTime + delta)));
+              this._resetHideTimer();
+          });
+          this.speedLabel.addEventListener('click', (e) => { e.stopPropagation(); this._toggleMenu('speed'); });
+          this.speedLabel.addEventListener('keydown', (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  this._toggleMenu('speed');
+              }
           });
           this.speedMenu.addEventListener('click', (e) => {
               e.stopPropagation();
               const item = e.target.closest('[data-speed]');
               if (!item)
                   return;
-              const r = parseFloat(item.dataset['speed']);
-              video.playbackRate = r;
-              this.closeMenus();
-          });
-          this.settingsBtn.addEventListener('click', (e) => {
-              e.stopPropagation();
-              this.toggleMenu('quality');
+              video.playbackRate = parseFloat(item.dataset['speed']);
+              this._closeMenus();
           });
+          this.settingsBtn.addEventListener('click', (e) => { e.stopPropagation(); this._toggleMenu('quality'); });
           this.qualityMenu.addEventListener('click', (e) => {
               e.stopPropagation();
               const item = e.target.closest('[data-quality]');
@@ -37630,132 +38273,122 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               const idx = parseInt(item.dataset['quality']);
               this.corePlayer.setQuality(idx);
               this.currentQualityIdx = idx;
-              this.refreshQualityMenu();
-              this.closeMenus();
-          });
-          this.clickArea.addEventListener('click', (e) => {
-              this.addRipple(e);
-              this.togglePlay();
+              this._refreshQualityMenu();
+              this._closeMenus();
           });
-          this.centerPlay.addEventListener('click', (e) => { e.stopPropagation(); this.togglePlay(); });
-          this.fsBtn.addEventListener('click', (e) => { e.stopPropagation(); this.toggleFullscreen(); });
-          document.addEventListener('fullscreenchange', () => this.onFsChange());
-          this.root.addEventListener('mousemove', () => this.resetHideTimer());
+          this.clickArea.addEventListener('click', (e) => { this._addRipple(e); this._togglePlay(); });
+          this.centerPlay.addEventListener('click', (e) => { e.stopPropagation(); this._togglePlay(); });
+          this.fsBtn.addEventListener('click', (e) => { e.stopPropagation(); this._toggleFullscreen(); });
+          document.addEventListener('fullscreenchange', this._onFsChangeBound);
+          document.addEventListener('webkitfullscreenchange', this._onFsChangeBound);
+          document.addEventListener('mozfullscreenchange', this._onFsChangeBound);
+          document.addEventListener('MSFullscreenChange', this._onFsChangeBound);
+          this.root.addEventListener('mousemove', () => this._resetHideTimer());
+          this.root.addEventListener('touchstart', () => this._resetHideTimer(), { passive: true });
           this.root.addEventListener('mouseleave', () => {
               if (this.playerState === exports.PlayerState.PLAYING)
-                  this.showControls(false);
-          });
-          this.root.addEventListener('click', () => this.closeMenus());
-          this.root.addEventListener('keydown', (e) => {
-              switch (e.code) {
-                  case 'Space':
-                  case 'KeyK':
-                      e.preventDefault();
-                      this.togglePlay();
-                      break;
-                  case 'ArrowLeft':
-                      e.preventDefault();
-                      this.corePlayer.seek(Math.max(0, video.currentTime - 5));
-                      break;
-                  case 'ArrowRight':
-                      e.preventDefault();
-                      this.corePlayer.seek(Math.min(this.duration, video.currentTime + 5));
-                      break;
-                  case 'ArrowUp':
-                      e.preventDefault();
-                      video.volume = Math.min(1, video.volume + 0.1);
-                      break;
-                  case 'ArrowDown':
-                      e.preventDefault();
-                      video.volume = Math.max(0, video.volume - 0.1);
-                      break;
-                  case 'KeyM':
-                      e.preventDefault();
-                      this.toggleMute();
-                      break;
-                  case 'KeyF':
-                      e.preventDefault();
-                      this.toggleFullscreen();
-                      break;
-              }
+                  this._showControls(false);
           });
+          this.root.addEventListener('click', () => this._closeMenus());
+          this.root.addEventListener('keydown', (e) => this._onKeyDown(e));
       }
-      onStateChange(state) {
+      _onStateChange(state) {
           this.playerState = state;
           const loading = state === exports.PlayerState.LOADING || state === exports.PlayerState.BUFFERING;
           const idle = state === exports.PlayerState.IDLE;
           const ended = this.videoEl.ended;
-          this.spinner.classList.toggle('gvp-spinner-hidden', !loading);
+          this.spinner.classList.toggle('gvp-hidden', !loading);
           const showCenter = (idle || ended) && !loading;
-          this.centerPlay.classList.toggle('gvp-center-play-hidden', !showCenter);
+          this.centerPlay.classList.toggle('gvp-hidden', !showCenter);
           if (showCenter) {
               this.centerPlayBtn.innerHTML = '';
-              this.centerPlayBtn.appendChild(svg(ended ? ICON.replay : ICON.play, 32, 32));
+              this.centerPlayBtn.appendChild(svgEl(ended ? ICON.replay : ICON.play, 30, 30));
+              this.centerPlay.setAttribute('aria-label', ended ? 'Replay' : 'Play');
           }
-          this.clickArea.classList.toggle('gvp-click-area-hidden', idle);
+          this.clickArea.classList.toggle('gvp-hidden', idle);
           if (state !== exports.PlayerState.PLAYING) {
-              this.showControls(true);
+              this._showControls(true);
               if (this.hideTimer) {
                   clearTimeout(this.hideTimer);
                   this.hideTimer = null;
               }
           }
           else {
-              this.resetHideTimer();
+              this._resetHideTimer();
           }
-          this.renderPlayBtn();
+          this._renderPlayBtn();
       }
-      togglePlay() {
-          const video = this.videoEl;
-          if (video.paused || video.ended) {
+      _togglePlay() {
+          const v = this.videoEl;
+          if (v.paused || v.ended) {
               this.corePlayer.play().catch(() => { });
           }
           else {
               this.corePlayer.pause();
           }
-          this.resetHideTimer();
+          this._resetHideTimer();
       }
-      renderPlayBtn() {
-          const video = this.videoEl;
-          const ended = video.ended;
+      _renderPlayBtn() {
+          const ended = this.videoEl.ended;
           const playing = this.playerState === exports.PlayerState.PLAYING;
+          const icon = ended ? ICON.replay : playing ? ICON.pause : ICON.play;
+          const label = playing ? 'Pause' : 'Play';
           this.playBtn.innerHTML = '';
-          this.playBtn.appendChild(svg(ended ? ICON.replay : playing ? ICON.pause : ICON.play));
-          this.playBtn.title = playing ? 'Pause (k)' : 'Play (k)';
-      }
-      toggleMute() {
-          this.videoEl.muted = !this.videoEl.muted;
-      }
-      onVolumeChange() {
-          const video = this.videoEl;
-          const muted = video.muted || video.volume === 0;
+          this.playBtn.appendChild(svgEl(icon));
+          this.playBtn.setAttribute('aria-label', label);
+          this.playBtn.title = `${label} (k)`;
+      }
+      _toggleMute() { this.videoEl.muted = !this.videoEl.muted; }
+      _onVolumeChange() {
+          const v = this.videoEl;
+          const vol = v.muted ? 0 : v.volume;
+          const muted = vol === 0;
+          const icon = muted ? ICON.volMute : vol < 0.4 ? ICON.volLow : vol < 0.75 ? ICON.volMid : ICON.volHigh;
           this.volBtn.innerHTML = '';
-          this.volBtn.appendChild(svg(muted ? ICON.volMute : ICON.volHigh, 18, 18));
-          this.volSlider.value = String(muted ? 0 : video.volume);
+          this.volBtn.appendChild(svgEl(icon, 18, 18));
+          this.volBtn.setAttribute('aria-label', muted ? 'Unmute' : 'Mute');
+          this.volBtn.title = muted ? 'Unmute (m)' : 'Mute (m)';
+          this.volSlider.value = String(vol);
+      }
+      _startSeekDrag() {
+          this.seekDragging = true;
+          this.seekWrap.classList.add('gvp-dragging');
       }
-      seekTo(e) {
+      _endSeekDrag() {
+          this.seekDragging = false;
+          this.seekWrap.classList.remove('gvp-dragging');
+          window.removeEventListener('mousemove', this._seekMouseMoveBound);
+          window.removeEventListener('mouseup', this._seekMouseUpBound);
+          window.removeEventListener('touchmove', this._seekTouchMoveBound);
+          window.removeEventListener('touchend', this._seekTouchEndBound);
+          this._resetHideTimer();
+      }
+      _seekTo(clientX) {
           if (!this.duration)
               return;
           const rect = this.seekWrap.getBoundingClientRect();
-          const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+          const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
           this.corePlayer.seek(pct * this.duration);
       }
-      onSeekHover(e) {
+      _onSeekHover(clientX) {
           if (!this.duration)
               return;
           const rect = this.seekWrap.getBoundingClientRect();
-          const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+          const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
           this.seekTooltip.textContent = formatTime(pct * this.duration);
           this.seekTooltip.style.left = `${pct * 100}%`;
           this.seekTooltip.style.opacity = '1';
       }
-      onTimeUpdate() {
-          const video = this.videoEl;
-          const ct = video.currentTime;
-          this.timeEl.textContent = `${formatTime(ct)} / ${formatTime(this.duration)}`;
-          this.updateSeekBar();
+      _onTimeUpdate() {
+          const ct = this.videoEl.currentTime;
+          const dur = this.duration;
+          this.timeEl.textContent = `${formatTime(ct)} / ${formatTime(dur)}`;
+          this._updateSeekBar();
+          const pct = dur > 0 ? Math.round((ct / dur) * 100) : 0;
+          this.seekWrap.setAttribute('aria-valuenow', String(pct));
+          this.seekWrap.setAttribute('aria-valuetext', `${formatTime(ct)} of ${formatTime(dur)}`);
       }
-      updateSeekBar() {
+      _updateSeekBar() {
           const ct = this.videoEl.currentTime;
           const dur = this.duration;
           if (!dur)
@@ -37766,128 +38399,196 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.seekBuffered.style.width = `${bPct}%`;
           this.seekThumb.style.left = `${pPct}%`;
       }
-      buildQualityMenu() {
+      _buildQualityMenu() {
           if (!this.qualityLevels.length)
               return;
-          this.settingsBtn.style.display = '';
+          this.settingsBtn.classList.remove('gvp-hidden');
           this.qualityMenu.innerHTML = '';
           const title = el('div', 'gvp-menu-title');
+          title.setAttribute('aria-hidden', 'true');
           title.textContent = 'Quality';
           const autoItem = el('div', 'gvp-menu-item gvp-menu-item-active');
+          autoItem.setAttribute('role', 'menuitemradio');
+          autoItem.setAttribute('aria-checked', 'true');
           autoItem.dataset['quality'] = '-1';
           autoItem.textContent = 'Auto';
-          const check = el('span', 'gvp-menu-check');
-          check.textContent = '✓';
-          autoItem.appendChild(check);
-          const sep = el('div', 'gvp-menu-sep');
-          this.qualityMenu.append(title, autoItem, sep);
+          const checkEl = el('span', 'gvp-menu-check');
+          checkEl.setAttribute('aria-hidden', 'true');
+          checkEl.textContent = '✓';
+          autoItem.appendChild(checkEl);
+          this.qualityMenu.append(title, autoItem, el('div', 'gvp-menu-sep'));
           [...this.qualityLevels].reverse().forEach(q => {
               const item = el('div', 'gvp-menu-item');
+              item.setAttribute('role', 'menuitemradio');
+              item.setAttribute('aria-checked', 'false');
               item.dataset['quality'] = String(q.index);
               item.textContent = q.name;
               this.qualityMenu.appendChild(item);
           });
           this.currentQualityIdx = -1;
       }
-      refreshQualityMenu() {
+      _refreshQualityMenu() {
           this.qualityMenu.querySelectorAll('[data-quality]').forEach(item => {
-              const idx = parseInt(item.dataset['quality']);
-              const active = idx === this.currentQualityIdx;
-              item.className = `gvp-menu-item${active ? ' gvp-menu-item-active' : ''}`;
+              const active = parseInt(item.dataset['quality']) === this.currentQualityIdx;
+              item.className = active ? 'gvp-menu-item gvp-menu-item-active' : 'gvp-menu-item';
+              item.setAttribute('aria-checked', String(active));
               const existing = item.querySelector('.gvp-menu-check');
               if (active && !existing) {
-                  const check = el('span', 'gvp-menu-check');
-                  check.textContent = '✓';
-                  item.appendChild(check);
+                  const c = el('span', 'gvp-menu-check');
+                  c.setAttribute('aria-hidden', 'true');
+                  c.textContent = '✓';
+                  item.appendChild(c);
               }
               else if (!active && existing) {
                   existing.remove();
               }
           });
       }
-      refreshSpeedMenu() {
+      _refreshSpeedMenu() {
           this.speedMenu.querySelectorAll('[data-speed]').forEach(item => {
-              const r = parseFloat(item.dataset['speed']);
-              item.className = `gvp-menu-item${r === this.playbackRate ? ' gvp-menu-item-active' : ''}`;
+              const active = parseFloat(item.dataset['speed']) === this.playbackRate;
+              item.className = active ? 'gvp-menu-item gvp-menu-item-active' : 'gvp-menu-item';
+              item.setAttribute('aria-checked', String(active));
+              const existing = item.querySelector('.gvp-menu-check');
+              if (active && !existing) {
+                  const c = el('span', 'gvp-menu-check');
+                  c.setAttribute('aria-hidden', 'true');
+                  c.textContent = '✓';
+                  item.appendChild(c);
+              }
+              else if (!active && existing) {
+                  existing.remove();
+              }
           });
       }
-      toggleMenu(which) {
+      _toggleMenu(which) {
           const same = this.openMenu === which;
-          this.closeMenus();
+          this._closeMenus();
           if (!same) {
               this.openMenu = which;
               if (which === 'speed') {
-                  this.refreshSpeedMenu();
-                  this.speedMenu.classList.remove('gvp-menu-hidden');
+                  this._refreshSpeedMenu();
+                  this.speedMenu.classList.remove('gvp-hidden');
               }
               else {
-                  this.refreshQualityMenu();
-                  this.qualityMenu.classList.remove('gvp-menu-hidden');
+                  this._refreshQualityMenu();
+                  this.qualityMenu.classList.remove('gvp-hidden');
               }
           }
       }
-      closeMenus() {
+      _closeMenus() {
           this.openMenu = null;
-          this.speedMenu.classList.add('gvp-menu-hidden');
-          this.qualityMenu.classList.add('gvp-menu-hidden');
+          this.speedMenu.classList.add('gvp-hidden');
+          this.qualityMenu.classList.add('gvp-hidden');
       }
-      showControls(visible) {
+      _showControls(visible) {
           this.controls.classList.toggle('gvp-controls-hidden', !visible);
           this.badge.classList.toggle('gvp-badge-hidden', !visible);
       }
-      resetHideTimer() {
-          this.showControls(true);
+      _resetHideTimer() {
+          this._showControls(true);
           if (this.hideTimer)
               clearTimeout(this.hideTimer);
           this.hideTimer = setTimeout(() => {
-              if (this.playerState === exports.PlayerState.PLAYING)
-                  this.showControls(false);
+              if (this.playerState === exports.PlayerState.PLAYING && !this.openMenu) {
+                  this._showControls(false);
+              }
           }, 2800);
       }
-      toggleFullscreen() {
-          if (document.fullscreenElement) {
-              document.exitFullscreen().catch(() => { });
+      _toggleFullscreen() {
+          const doc = document;
+          const root = this.root;
+          const isFs = !!(document.fullscreenElement ||
+              doc.webkitFullscreenElement ||
+              doc.mozFullScreenElement ||
+              doc.msFullscreenElement);
+          if (isFs) {
+              (document.exitFullscreen?.() ||
+                  doc.webkitExitFullscreen?.() ||
+                  doc.mozCancelFullScreen?.() ||
+                  (doc.msExitFullscreen?.(), Promise.resolve()))
+                  ?.catch?.(() => { });
           }
           else {
-              this.root.requestFullscreen().catch(() => { });
-          }
-      }
-      onFsChange() {
-          const fs = !!document.fullscreenElement;
+              (root.requestFullscreen?.() ||
+                  root.webkitRequestFullscreen?.() ||
+                  root.mozRequestFullScreen?.() ||
+                  (root.msRequestFullscreen?.(), Promise.resolve()))
+                  ?.catch?.(() => { });
+          }
+      }
+      _onFsChange() {
+          const doc = document;
+          const fs = !!(document.fullscreenElement ||
+              doc.webkitFullscreenElement ||
+              doc.mozFullScreenElement ||
+              doc.msFullscreenElement);
           this.fsBtn.innerHTML = '';
-          this.fsBtn.appendChild(svg(fs ? ICON.fsExit : ICON.fsEnter, 18, 18));
-          this.fsBtn.title = fs ? 'Exit fullscreen (f)' : 'Fullscreen (f)';
-      }
-      showError(err) {
-          const codeEl = this.root.querySelector('#gvp-err-code');
-          const msgEl = this.root.querySelector('#gvp-err-msg');
-          if (codeEl)
-              codeEl.textContent = err.code;
-          if (msgEl)
-              msgEl.textContent = err.message;
-          this.errorOverlay.classList.remove('gvp-error-hidden');
-          this.controls.style.display = 'none';
-      }
-      renderWatermark() {
-          if (!this.watermarkText)
-              return;
+          this.fsBtn.appendChild(svgEl(fs ? ICON.fsExit : ICON.fsEnter, 18, 18));
+          this.fsBtn.setAttribute('aria-label', fs ? 'Exit fullscreen' : 'Enter fullscreen');
+          this.fsBtn.title = fs ? 'Exit fullscreen (f)' : 'Enter fullscreen (f)';
+      }
+      _showError(err) {
+          this.errorOverlay.children[1].textContent = err.code;
+          this.errorOverlay.children[2].textContent = err.message;
+          this.errorOverlay.classList.remove('gvp-hidden');
+          this.controls.classList.add('gvp-hidden');
+      }
+      _renderWatermark(text) {
           this.watermarkDiv.innerHTML = '';
           for (let i = 0; i < 20; i++) {
               const span = el('span', 'gvp-watermark-text');
-              span.textContent = this.watermarkText;
+              span.textContent = text;
               span.style.left = `${(i % 4) * 26 + (Math.floor(i / 4) % 2) * 13}%`;
               span.style.top = `${Math.floor(i / 4) * 22}%`;
               this.watermarkDiv.appendChild(span);
           }
       }
-      addRipple(e) {
+      _addRipple(e) {
           const rect = this.root.getBoundingClientRect();
           const d = document.createElement('div');
           d.className = 'gvp-ripple';
-          const size = 60;
-          d.style.cssText = `width:${size}px;height:${size}px;left:${e.clientX - rect.left - size / 2}px;top:${e.clientY - rect.top - size / 2}px`;
+          const sz = 60;
+          d.style.cssText = `width:${sz}px;height:${sz}px;left:${e.clientX - rect.left - sz / 2}px;top:${e.clientY - rect.top - sz / 2}px`;
           this.root.appendChild(d);
-          setTimeout(() => d.remove(), 600);
+          setTimeout(() => d.remove(), 650);
+      }
+      _onKeyDown(e) {
+          switch (e.code) {
+              case 'Space':
+              case 'KeyK':
+                  e.preventDefault();
+                  this._togglePlay();
+                  break;
+              case 'ArrowLeft':
+                  if (document.activeElement !== this.seekWrap) {
+                      e.preventDefault();
+                      this.corePlayer.seek(Math.max(0, this.videoEl.currentTime - 5));
+                  }
+                  break;
+              case 'ArrowRight':
+                  if (document.activeElement !== this.seekWrap) {
+                      e.preventDefault();
+                      this.corePlayer.seek(Math.min(this.duration, this.videoEl.currentTime + 5));
+                  }
+                  break;
+              case 'ArrowUp':
+                  e.preventDefault();
+                  this.videoEl.volume = Math.min(1, this.videoEl.volume + 0.1);
+                  break;
+              case 'ArrowDown':
+                  e.preventDefault();
+                  this.videoEl.volume = Math.max(0, this.videoEl.volume - 0.1);
+                  break;
+              case 'KeyM':
+                  e.preventDefault();
+                  this._toggleMute();
+                  break;
+              case 'KeyF':
+                  e.preventDefault();
+                  this._toggleFullscreen();
+                  break;
+          }
       }
       play() { return this.corePlayer.play(); }
       pause() { return this.corePlayer.pause(); }
@@ -37904,22 +38605,32 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       destroy() {
           if (this.hideTimer)
               clearTimeout(this.hideTimer);
+          document.removeEventListener('fullscreenchange', this._onFsChangeBound);
+          document.removeEventListener('webkitfullscreenchange', this._onFsChangeBound);
+          document.removeEventListener('mozfullscreenchange', this._onFsChangeBound);
+          document.removeEventListener('MSFullscreenChange', this._onFsChangeBound);
+          window.removeEventListener('mousemove', this._seekMouseMoveBound);
+          window.removeEventListener('mouseup', this._seekMouseUpBound);
+          window.removeEventListener('touchmove', this._seekTouchMoveBound);
+          window.removeEventListener('touchend', this._seekTouchEndBound);
           this.corePlayer.destroy();
           this.root.remove();
       }
   }
+
   class GuardVideoPlayer {
       constructor(ui) {
           this.ui = ui;
       }
       static create(containerId, videoId, config) {
           const container = document.getElementById(containerId);
-          if (!container)
-              throw new Error(`Container "#${containerId}" not found`);
-          return new GuardVideoPlayer(new VanillaPlayerUI(container, videoId, config));
+          if (!container) {
+              throw new Error(`GuardVideoPlayer: element '#${containerId}' not found`);
+          }
+          return new GuardVideoPlayer(new PlayerUI(container, videoId, config));
       }
       static createInElement(container, videoId, config) {
-          return new GuardVideoPlayer(new VanillaPlayerUI(container, videoId, config));
+          return new GuardVideoPlayer(new PlayerUI(container, videoId, config));
       }
       play() { return this.ui.play(); }
       pause() { return this.ui.pause(); }
@@ -37941,6 +38652,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
   }
 
   exports.GuardVideoPlayer = GuardVideoPlayer;
+  exports.PlayerUI = PlayerUI;
 
   return exports;