/* video-player.css v034 — Dual Compare */
.compare-player, .compare-player * { box-sizing: border-box; }
.compare-player{
  --panel:#181818; --text:#eee; --muted:#aaa;
  --rail:#2a2a2a; --rail2:#3a3a3a; --accent:#ff0033;
  --track-h:6px; --thumb:12px; --icon:26px; --btn:40px;
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans",sans-serif;
}

/* stage */
.compare-player .cp-wrap{ max-width:1100px; margin:10px auto; }
.compare-player .cp-stage{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; user-select:none; }
.compare-player .cp-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }

/* wipe & handle — keep handle above badges so dragging always works */
.compare-player.mode-wipe .cp-B{
  clip-path: polygon(var(--clip,50%) 0, 100% 0, 100% 100%, var(--clip,50%) 100%);
}
.compare-player .cp-wipe{ position:absolute; inset:0; pointer-events:none; }
.compare-player .cp-handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; z-index:8;
  box-shadow: 0 0 0 1px #0008, 0 0 0 6px #ffffff30; border-radius:2px; pointer-events:auto; cursor:ew-resize;
}
.compare-player .cp-handle::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px #0008;
}
.compare-player .cp-handle:focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow: 0 0 0 1px #0008, 0 0 0 8px #ffffff55; }

/* corner A / B — letters only, pinned to the TOP */
.compare-player .cp-badges{
  position:absolute; top:10px; left:10px; right:10px; height:2rem;
  display:flex; align-items:flex-start; justify-content:space-between;
  pointer-events:none; z-index:6; /* below handle */
}
.compare-player .cp-badge{
  position:relative; pointer-events:auto; background:transparent; border:0; color:#fff;
  font-weight:800; font-size:13px; line-height:1; padding:0; border-radius:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
/* Invisible circular hit-area (keeps it tappable without showing a box) */
.compare-player .cp-badge::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:32px; height:32px; border-radius:999px;
}
.compare-player .cp-badge.is-active{
  color:var(--accent);
  text-shadow:0 0 .65rem rgba(255,0,51,.55);
}

/* controls */
.compare-player .cp-controls{ background:var(--panel); border-radius:12px; padding:10px; margin-top:8px; }
.compare-player .cp-row{ display:flex; align-items:center; gap:10px; }
.compare-player .left, .compare-player .right{ display:flex; align-items:center; gap:10px; }
.compare-player .right{ margin-left:auto; }
.compare-player .btn{ all:unset; display:inline-flex; align-items:center; justify-content:center; width:var(--btn); height:var(--btn); cursor:pointer; color:#fff; border-radius:6px; }
.compare-player .btn svg{ width:var(--icon); height:var(--icon); display:block; fill:currentColor; stroke:currentColor; stroke-width:1.2; }
.compare-player .cp-time{ font-variant-numeric:tabular-nums; color:#ddd; font-size:13px; white-space:nowrap; }

/* progress */
.compare-player .cp-progress{ position:relative; width:100%; height:var(--track-h); display:flex; align-items:center; }
.compare-player .cp-rail{ position:absolute; inset:0; background:var(--rail); border-radius:999px; }
.compare-player .cp-buffer{ position:absolute; inset:0; background:linear-gradient(90deg, #888 0 var(--buf,0%), transparent 0); border-radius:999px; opacity:.35; }
.compare-player .cp-fill{ position:absolute; inset:0; background:linear-gradient(90deg, var(--accent) 0 var(--pct,0%), transparent 0); border-radius:999px; pointer-events:none; }
.compare-player .cp-seek{ appearance:none; width:100%; height:var(--track-h); background:transparent; position:relative; z-index:2; }
.compare-player .cp-seek::-webkit-slider-runnable-track{ height:var(--track-h); background:transparent; }
.compare-player .cp-seek::-webkit-slider-thumb{
  appearance:none; width:var(--thumb); height:var(--thumb); border-radius:50%;
  background:#fff; box-shadow:0 1px 3px #0007;
  margin-top: calc((var(--thumb) - var(--track-h))/-2);
}
.compare-player .cp-seek::-moz-range-track{ height:var(--track-h); background:transparent; }
.compare-player .cp-seek::-moz-range-thumb{ width:var(--thumb); height:var(--thumb); border-radius:50%; background:#fff; border:none; }

/* buffering ribbon */
.compare-player.is-buffering .cp-rail{
  background: repeating-linear-gradient(90deg, #2a2a2a 0 14px, #3a3a3a 14px 28px);
  animation: cp-ribbon 1s linear infinite;
}
@keyframes cp-ribbon{ from{ background-position:0 0; } to{ background-position:28px 0; } }

/* volume popover */
.compare-player .vol{ position:relative; display:inline-flex; align-items:center; }
.compare-player .vol-pop{
  position:absolute; bottom: calc(var(--btn) + 8px); left:50%; transform:translateX(-50%);
  width:44px; height:160px; padding:8px 6px; background:#1e1e1e; border-radius:10px;
  display:none; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  pointer-events:none; transition:opacity .14s;
}
.compare-player .vol.open .vol-pop{ display:flex; opacity:1; visibility:visible; pointer-events:auto; }
.compare-player .vol .cp-vol{
  width:120px; height:var(--track-h); transform:rotate(-90deg);
  appearance:none; background:var(--rail2); border-radius:999px; padding:0; margin:0;
}
.compare-player .vol .cp-vol::-webkit-slider-runnable-track{ height:var(--track-h); background:transparent; }
.compare-player .vol .cp-vol::-webkit-slider-thumb{
  appearance:none; width:var(--thumb); height:var(--thumb); border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4);
  margin-top: calc((var(--thumb) - var(--track-h))/-2);
}
.compare-player .vol .cp-vol::-moz-range-track{ height:var(--track-h); background:transparent; }
.compare-player .vol .cp-vol::-moz-range-thumb{ width:var(--thumb); height:var(--thumb); border-radius:50%; background:#fff; border:none; }

/* repeat active = red (visible indicator) */
.compare-player .cp-repeat.is-on,
.compare-player .cp-repeat.is-on svg{
  color:var(--accent) !important;
  stroke:var(--accent) !important;
  fill:var(--accent) !important;
}

/* Desktop sizing — 20px base, larger icons/buttons */
@media (min-width: 992px){
  .compare-player{ font-size:20px; --icon:28px; --btn:44px; --track-h:6px; --thumb:12px; }
}

/* narrow screens */
@media (max-width:520px){
  .compare-player{ --icon:22px; --btn:36px; }
}