:root{
  --mp-accent:#ff4d4d;
  --mp-accent-soft:rgba(255,77,77,.35);
  --mp-bg:#08080b;
  --mp-text:#f2f2f4;
  --mp-dim:rgba(242,242,244,.62);
  --mp-track:rgba(255,255,255,.22);
  --mp-radius:14px;
  --mp-font:"Sora",system-ui,sans-serif;
  --mp-mono:"Space Mono",ui-monospace,monospace;
  --mp-khmer:"Google Sans","Kantumruy Pro","Noto Sans Khmer","Sora",sans-serif;
}

.mp-player *{box-sizing:border-box;margin:0;padding:0}
.mp-player{
  position:relative;width:100%;max-width:960px;margin:0 auto;
  aspect-ratio:var(--mp-ratio,16/9);background:var(--mp-bg);overflow:hidden;
  border-radius:var(--mp-radius);font-family:var(--mp-font);
  color:var(--mp-text);user-select:none;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05);
}
.mp-player.is-fs{border-radius:0;max-width:none;height:100%}
.mp-video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain;display:block}
.mp-video::cue{background:transparent;color:transparent} /* hide native cue paint; we render our own */

/* control visibility */
.mp-controls,.mp-topbar,.mp-cc{transition:opacity .28s ease, transform .28s ease, bottom .28s ease}
.mp-player.hide-ui{cursor:none}
.mp-player.hide-ui .mp-controls{opacity:0;transform:translateY(8px);pointer-events:none}
.mp-player.hide-ui .mp-topbar{opacity:0}

/* top title scrim */
.mp-topbar{
  position:absolute;top:0;left:0;right:0;z-index:3;padding:18px 20px;
  font-size:14px;font-weight:600;letter-spacing:.2px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);
}
.mp-title{opacity:.92;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.mp-title:empty{display:none}

/* captions */
.mp-cc{
  position:absolute;left:0;right:0;bottom:66px;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:0 8%;text-align:center;pointer-events:none;
}
.mp-player.hide-ui .mp-cc{bottom:26px}
.mp-cc-line{
  background:rgba(0,0,0,.74);color:#fff;border-radius:6px;
  font-size:clamp(14px,2.4vw,21px);line-height:1.45;padding:.16em .55em;
  text-shadow:0 1px 2px rgba(0,0,0,.6);max-width:100%;
}
.mp-cc[data-lang="km"] .mp-cc-line{font-family:var(--mp-khmer);line-height:1.7}

/* big center play */
.mp-bigplay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);
  z-index:5;width:84px;height:84px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(8,8,11,.55);backdrop-filter:blur(8px);display:grid;place-items:center;
  transition:transform .25s, opacity .25s, background .2s;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 40px -12px rgba(0,0,0,.7);
}
.mp-bigplay svg{width:38px;height:38px;fill:var(--mp-text);margin-left:4px}
.mp-bigplay:hover{background:var(--mp-accent);transform:translate(-50%,-50%) scale(1.06)}
.mp-player.playing .mp-bigplay{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.7)}

/* spinner */
.mp-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;display:none}
.mp-player.buffering .mp-spinner{display:block}
.mp-spinner span{
  display:block;width:52px;height:52px;border-radius:50%;
  border:3px solid rgba(255,255,255,.15);border-top-color:var(--mp-accent);
  animation:mp-spin .8s linear infinite;
}
@keyframes mp-spin{to{transform:rotate(360deg)}}

/* controls */
.mp-controls{
  position:absolute;left:0;right:0;bottom:0;z-index:6;padding:0 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.4) 55%,transparent 100%);
}

/* seek bar */
.mp-seek{position:relative;height:26px;display:flex;align-items:center;cursor:pointer}
.mp-seek-track{position:relative;width:100%;height:4px;border-radius:99px;background:var(--mp-track);transition:height .15s}
.mp-seek:hover .mp-seek-track{height:6px}
.mp-seek-buffer{position:absolute;inset:0;width:0;border-radius:99px;background:rgba(255,255,255,.32)}
.mp-seek-played{position:absolute;inset:0;width:0;border-radius:99px;background:var(--mp-accent)}
.mp-seek-knob{
  position:absolute;right:-7px;top:50%;transform:translateY(-50%) scale(0);
  width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;
  box-shadow:0 0 0 4px var(--mp-accent-soft);
}
.mp-seek:hover .mp-seek-knob{transform:translateY(-50%) scale(1)}
.mp-tooltip{
  position:absolute;bottom:24px;left:0;transform:translateX(-50%);
  background:#000;color:#fff;font-family:var(--mp-mono);font-size:11px;
  padding:3px 7px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s;white-space:nowrap;
}
.mp-seek:hover .mp-tooltip{opacity:1}

/* control row */
.mp-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.mp-left,.mp-right{display:flex;align-items:center;gap:4px}

.mp-btn{
  background:none;border:none;color:var(--mp-text);cursor:pointer;
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  transition:background .15s,color .15s,transform .1s;
}
.mp-btn:hover{background:rgba(255,255,255,.12)}
.mp-btn:active{transform:scale(.92)}
.mp-btn svg{width:22px;height:22px;fill:currentColor}
.mp-btn.mp-text{width:auto;min-width:40px;padding:0 10px;font-family:var(--mp-mono);font-size:13px;font-weight:500}

/* icon state swaps */
.i-pause,.i-muted,.i-fs-exit{display:none}
.mp-player.playing .i-play{display:none}
.mp-player.playing .i-pause{display:block}
.mp-player.muted .i-vol{display:none}
.mp-player.muted .i-muted{display:block}
.mp-player.is-fs .i-fs{display:none}
.mp-player.is-fs .i-fs-exit{display:block}
.mp-player.cc-on .mp-cc-btn{color:var(--mp-accent)}

/* volume */
.mp-vol{display:flex;align-items:center}
.mp-volbar{width:0;overflow:hidden;transition:width .22s ease;cursor:pointer;height:40px;display:flex;align-items:center}
.mp-vol:hover .mp-volbar,.mp-volbar:focus-within{width:78px}
.mp-volbar-fill{position:relative;width:66px;height:4px;border-radius:99px;background:var(--mp-track);margin:0 6px}
.mp-volbar-fill span{position:absolute;left:0;top:0;height:100%;border-radius:99px;background:#fff;width:100%}

.mp-time{font-family:var(--mp-mono);font-size:12.5px;color:var(--mp-dim);margin-left:6px;white-space:nowrap}
.mp-time .mp-cur{color:var(--mp-text)}

/* popover menus */
.mp-menu{position:relative}
.mp-popover{
  position:absolute;bottom:52px;right:0;min-width:132px;
  background:rgba(18,18,22,.96);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:6px;
  display:none;flex-direction:column;gap:2px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.7);max-height:240px;overflow:auto;
}
.mp-menu.open .mp-popover{display:flex;animation:mp-pop .16s ease}
@keyframes mp-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mp-opt{
  background:none;border:none;color:var(--mp-dim);text-align:left;cursor:pointer;
  font-family:var(--mp-font);font-size:13px;padding:8px 10px;border-radius:8px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;transition:background .12s,color .12s;
}
.mp-opt:hover{background:rgba(255,255,255,.08);color:var(--mp-text)}
.mp-opt.active{color:var(--mp-accent);font-weight:600}
.mp-opt.active::after{content:"●";font-size:8px}

@media (max-width:560px){
  .mp-time{display:none}
  .mp-btn{width:38px;height:38px}
  .mp-pip{display:none}
}