diff --git a/css/player-base.js b/css/player-base.js
index 432b4999..9288cf1b 100644
--- a/css/player-base.js
+++ b/css/player-base.js
@@ -733,191 +733,158 @@ function validatePlayerObject(player) {
 const extractedData = extractPlayerData(base_player);
 const initializedPlayer = initializePlayer(extractedData);
 
+const saa = document.createElement('style');
+saa.innerHTML = `
+.vjs-play-progress {
+  background-image: linear-gradient(to right, 
+    #ff0045,    
+    #ff0e55,   
+    #ff1d79  
+  );
+}
 
-// --- Custom VJS skin + loading overlay ---
-(function () {
-  const css = `
-  .video-js.poke-skin { --bg:#000000b3; --fg:#fff; --muted:#b8c0cc; --accent:#ff1d79; --accent2:#ff0e55; --accent3:#ff0045; --ring:#ffffff22; --blur:8px; --br:16px; }
+/* control bar container */
+.vjs-control-bar {
+  border-radius: 16px;
+  background-color: #0007 !important;
+  backdrop-filter: blur(10px);
+  display: flex;
+  gap: 10px;
+  padding: 8px 12px;
+}
 
-  .video-js.poke-skin .vjs-control-bar {
-    background: var(--bg) !important;
-    border-radius: var(--br);
-    backdrop-filter: blur(var(--blur));
-    -webkit-backdrop-filter: blur(var(--blur));
-    box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px var(--ring);
-    padding: .4rem .5rem;
-    gap: .35rem;
-  }
+/* keep these transparent like you had */
+.vjs-remaining-time, 
+.vjs-fullscreen-control {
+  background-color: transparent !important;   
+}
 
-  .video-js.poke-skin .vjs-control.vjs-button,
-  .video-js.poke-skin .vjs-volume-panel,
-  .video-js.poke-skin .vjs-fullscreen-control,
-  .video-js.poke-skin .vjs-play-control {
-    background: rgba(255,255,255,.06);
-    border-radius: 9999px;
-    backdrop-filter: blur(var(--blur));
-    -webkit-backdrop-filter: blur(var(--blur));
-    box-shadow: inset 0 0 0 1px var(--ring), 0 4px 14px rgba(0,0,0,.25);
-    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
-  }
-  .video-js.poke-skin .vjs-volume-panel { padding: 0 .25rem; }
+/* circular frosted-glass buttons (play/pause, mute, fs, pip, etc.) */
+.vjs-control-bar .vjs-button,
+.vjs-play-control,
+.vjs-mute-control,
+.vjs-fullscreen-control,
+.vjs-picture-in-picture-control,
+.vjs-remaining-time .vjs-control-text { /* harmless noop for consistency */ }
 
-  .video-js.poke-skin .vjs-control.vjs-button:hover,
-  .video-js.poke-skin .vjs-volume-panel:hover,
-  .video-js.poke-skin .vjs-fullscreen-control:hover,
-  .video-js.poke-skin .vjs-play-control:hover {
-    background: rgba(255,255,255,.12);
-    transform: translateY(-1px);
-    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 6px 18px rgba(0,0,0,.35);
-  }
+.vjs-control-bar .vjs-button {
+  width: 38px;
+  height: 38px;
+  min-width: 38px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.08);
+  backdrop-filter: blur(6px);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.12);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 4px;
+  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
+}
 
-  .video-js.poke-skin .vjs-play-control,
-  .video-js.poke-skin .vjs-fullscreen-control,
-  .video-js.poke-skin .vjs-mute-control {
-    width: 42px; height: 42px; display: grid; place-items: center; margin: 0 .15rem;
-  }
-  .video-js.poke-skin .vjs-play-control .vjs-icon-placeholder:before,
-  .video-js.poke-skin .vjs-fullscreen-control .vjs-icon-placeholder:before,
-  .video-js.poke-skin .vjs-mute-control .vjs-icon-placeholder:before {
-    color: var(--fg);
-    font-size: 1.1rem;
-    line-height: 1;
-  }
+.vjs-control-bar .vjs-button:hover {
+  background: rgba(255,255,255,0.14);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.18);
+  transform: translateY(-1px);
+}
 
-  .video-js.poke-skin .vjs-time-control { color: var(--muted); text-shadow: 0 1px 1px #000a; }
+.vjs-control-bar .vjs-button:active {
+  transform: translateY(0);
+}
 
-  .video-js.poke-skin .vjs-progress-control {
-    flex: 1 1 auto; margin: 0 .35rem; min-width: 120px;
-  }
-  .video-js.poke-skin .vjs-progress-holder {
-    height: 10px; border-radius: 9999px; background: rgba(255,255,255,.08);
-    box-shadow: inset 0 0 0 1px var(--ring);
-  }
-  .video-js.poke-skin .vjs-load-progress {
-    background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.1));
-    border-radius: inherit;
-  }
-  .video-js.poke-skin .vjs-play-progress {
-    background-image: linear-gradient(90deg, var(--accent3), var(--accent2), var(--accent));
-    border-radius: inherit;
-    position: relative;
-  }
-  .video-js.poke-skin .vjs-play-progress::after {
-    content: "";
-    position: absolute;
-    right: -6px; top: 50%; transform: translateY(-50%);
-    width: 18px; height: 18px; border-radius: 9999px;
-    background: #fff;
-    box-shadow: 0 0 0 6px rgba(255,29,121,.18), 0 2px 10px rgba(0,0,0,.35);
-  }
+.vjs-control-bar .vjs-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(255,0,90,0.35), inset 0 0 0 1px rgba(255,255,255,0.2);
+}
 
-  .video-js.poke-skin .vjs-slider { background: transparent; }
-  .video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-bar,
-  .video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-level {
-    border-radius: 9999px; height: 8px;
-  }
-  .video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-bar {
-    background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px var(--ring);
-  }
-  .video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-level {
-    background-image: linear-gradient(90deg, var(--accent3), var(--accent2), var(--accent));
-  }
-  .video-js.poke-skin .vjs-volume-panel .vjs-volume-control .vjs-volume-level:after {
-    content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
-    width:14px; height:14px; border-radius:9999px; background:#fff; box-shadow:0 0 0 4px rgba(255,29,121,.16);
-  }
+/* icon sizing inside circular buttons */
+.vjs-control-bar .vjs-icon-placeholder:before {
+  font-size: 18px;
+  line-height: 38px;
+}
 
-  .video-js.poke-skin .vjs-remaining-time,
-  .video-js.poke-skin .vjs-fullscreen-control { background: transparent !important; }
+/* progress (seek) bar: frosted track + rounded ends */
+.vjs-progress-control {
+  flex: 1 1 auto;
+  display: flex !important;
+  align-items: center;
+  margin: 0 4px;
+}
 
-  .video-js.poke-skin .vjs-big-play-button {
-    border: none; border-radius: 9999px;
-    width: 74px; height: 74px;
-    background: rgba(0,0,0,.45);
-    backdrop-filter: blur(var(--blur));
-    -webkit-backdrop-filter: blur(var(--blur));
-    box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px var(--ring);
-  }
-  .video-js.poke-skin .vjs-big-play-button .vjs-icon-placeholder:before { color: #fff; font-size: 1.6rem; }
+.vjs-progress-control .vjs-progress-holder {
+  height: 8px !important;
+  border-radius: 999px !important;
+  background: rgba(255,255,255,0.08) !important;
+  backdrop-filter: blur(6px);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 4px 12px rgba(0,0,0,0.25);
+}
 
-  .video-js.poke-skin .poke-wait {
-    position: absolute; inset: 0; display: none; place-items: center; z-index: 12;
-    background: radial-gradient(800px 400px at 50% 60%, rgba(0,0,0,.55), rgba(0,0,0,.8));
-    backdrop-filter: blur(2px);
-  }
-  .video-js.poke-skin.vjs-waiting .poke-wait,
-  .video-js.poke-skin.poke-show-wait .poke-wait { display: grid; }
+.vjs-progress-control .vjs-load-progress,
+.vjs-progress-control .vjs-play-progress {
+  border-radius: inherit !important;
+}
 
-  .video-js.poke-skin .poke-wait-box {
-    display: grid; gap: .6rem; padding: 1rem 1.2rem; border-radius: 16px;
-    background: rgba(20,20,28,.55);
-    box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 0 0 1px var(--ring);
-    color: var(--fg); text-align: center; min-width: 260px;
-  }
-  .video-js.poke-skin .poke-wait-text { font: 600 14px/1.2 ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu; letter-spacing:.2px; }
-  .video-js.poke-skin .poke-wait-sub  { font: 12px/1.2 ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu; color: var(--muted); }
+.vjs-progress-control .vjs-play-progress {
+  background-image: linear-gradient(to right, #ff0045, #ff0e55, #ff1d79) !important;
+}
 
-  .video-js.poke-skin .poke-dots { display:inline-grid; grid-auto-flow:column; gap:6px; justify-content:center; }
-  .video-js.poke-skin .poke-dot { width:6px; height:6px; border-radius:9999px; background:#fff; opacity:.9; animation: poke-bounce 900ms infinite ease-in-out; }
-  .video-js.poke-skin .poke-dot:nth-child(2){ animation-delay:.15s }
-  .video-js.poke-skin .poke-dot:nth-child(3){ animation-delay:.3s }
-  @keyframes poke-bounce { 0%,80%,100%{ transform:translateY(0); opacity:.6 } 40%{ transform:translateY(-6px); opacity:1 } }
-  `;
-  const style = document.createElement('style');
-  style.textContent = css;
-  document.head.appendChild(style);
+.vjs-progress-control .vjs-slider-handle {
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50% !important;
+  background: #fff !important;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,0,90,0.20);
+  top: -4px !important; /* center on 8px track */
+}
 
-  function mountPokeSkin(player) {
-    const root = player.el();
-    player.addClass('poke-skin');
+/* volume panel spacing and circular handle too */
+.vjs-volume-panel {
+  gap: 8px;
+  align-items: center;
+}
 
-    if (!root.querySelector('.poke-wait')) {
-      const wait = document.createElement('div');
-      wait.className = 'poke-wait';
-      wait.innerHTML = `
-        <div class="poke-wait-box">
-          <div class="poke-wait-text">Loading… please wait</div>
-          <div class="poke-wait-sub" data-rot></div>
-          <div class="poke-dots"><div class="poke-dot"></div><div class="poke-dot"></div><div class="poke-dot"></div></div>
-        </div>`;
-      root.appendChild(wait);
+.vjs-volume-bar {
+  height: 6px !important;
+  border-radius: 999px !important;
+  background: rgba(255,255,255,0.10) !important;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
+}
 
-      const hints = [
-        'Stabilizing stream…',
-        'Syncing audio & video…',
-        'Warming buffers…',
-        'Checking connection…',
-        'Re-requesting segments…'
-      ];
-      let i = 0; const rot = wait.querySelector('[data-rot]');
-      const tick = () => { rot.textContent = hints[i % hints.length]; i++; };
-      tick(); wait._rot = setInterval(tick, 1200);
-      player.on('dispose', () => clearInterval(wait._rot));
-    }
+.vjs-volume-level {
+  border-radius: inherit !important;
+  background-image: linear-gradient(to right, #ff0045, #ff1d79) !important;
+}
 
-    const show = () => player.addClass('poke-show-wait');
-    const hide = () => player.removeClass('poke-show-wait');
+.vjs-volume-bar .vjs-slider-handle {
+  width: 14px !important;
+  height: 14px !important;
+  border-radius: 50% !important;
+  background: #fff !important;
+  top: -4px !important;
+  box-shadow: 0 3px 12px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,0,90,0.18);
+}
 
-    player.on('waiting', show);
-    player.on('stalled', show);
-    player.on('seeking', show);
+/* give text timers a small chip look (optional), but keep transparent base */
+.vjs-current-time,
+.vjs-time-divider,
+.vjs-duration {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.06);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
+}
 
-    player.on('canplay', hide);
-    player.on('playing', hide);
-    player.on('pause', hide);
-    player.on('error', () => {
-      // keep overlay if really broken; otherwise hide on next canplay/playing
-    });
-  }
+/* tighter layout on small screens */
+@media (max-width: 640px) {
+  .vjs-control-bar { gap: 8px; padding: 6px 8px; }
+  .vjs-control-bar .vjs-button { width: 34px; height: 34px; min-width: 34px; }
+  .vjs-control-bar .vjs-icon-placeholder:before { font-size: 16px; line-height: 34px; }
+  .vjs-progress-control .vjs-progress-holder { height: 6px !important; }
+  .vjs-progress-control .vjs-slider-handle { width: 14px !important; height: 14px !important; top: -4px !important; }
+}
+`;
+document.head.appendChild(saa);
 
-  if (window.videojs && window.video) {
-    try { mountPokeSkin(window.video); } catch {}
-  } else {
-    document.addEventListener('readystatechange', () => {
-      if (window.videojs && window.video) { try { mountPokeSkin(window.video); } catch {} }
-    });
-  }
-})();
 
 
 window.pokePlayer = {