/* Metanoz OTT player — original cinematic skin.
   Theme with CSS custom properties on the player or any ancestor:
   --otp-accent  --otp-on-accent  --otp-bg  --otp-ink  --otp-radius  --otp-font  --otp-glass  (defaults below; --a of the shop theme feeds the accent) */
.otp {
  --_ac: var(--otp-accent, var(--a, #e8b15d));
  --_on: var(--otp-on-accent, #17110a);
  --_bg: var(--otp-bg, #07080c);
  --_ink: var(--otp-ink, #f5f2ea);
  --_mut: color-mix(in srgb, var(--_ink) 66%, transparent);
  --_r: var(--otp-radius, 20px);
  --_glass: var(--otp-glass, rgba(13, 14, 19, .64));
  --_line: color-mix(in srgb, var(--_ink) 15%, transparent);
  --_ease: cubic-bezier(.22, .8, .24, 1);
  position: relative; display: block; width: 100%; box-sizing: border-box; background: var(--_bg); color: var(--_ink);
  font-family: var(--otp-font, inherit); font-size: 15px; line-height: 1.35; border-radius: var(--_r); overflow: hidden; isolation: isolate;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; text-align: left;
}
.otp *, .otp *::before, .otp *::after { box-sizing: border-box; }
.otp [hidden] { display: none !important; }
[data-ott-player]:not(.otp-yt) { aspect-ratio: 16 / 9; background: var(--otp-bg, #07080c); border-radius: var(--otp-radius, 20px); }
.otp:focus { outline: none; }
.otp:focus-visible { outline: 2px solid var(--_ac); outline-offset: 3px; }
.otp-stage { position: absolute; inset: 0; overflow: hidden; }
.otp-yt .otp-stage { top: var(--otp-bar, 56px); }
.otp-bleed { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); border-radius: 0; max-height: calc(100vh - 72px); max-height: calc(100svh - 72px); min-height: 220px; }
html.otp-has-bleed { overflow-x: clip; }
html.otp-lock { overflow: hidden; }
.otp-cine, .otp:fullscreen, .otp:-webkit-full-screen {
  position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; max-height: none; max-width: none; margin: 0; border-radius: 0; aspect-ratio: auto; background: #000;
}
.otp:fullscreen, .otp:-webkit-full-screen { position: relative; }

/* media layers */
.otp-v, .otp-adv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.otp-adv { z-index: 1; opacity: 0; pointer-events: none; }
.otp-ad .otp-adv { opacity: 1; }
.otp-v::cue { background: rgba(0, 0, 0, .62); color: #fff; font-family: var(--otp-font, system-ui, sans-serif); }
.otp-poster { position: absolute; inset: 0; z-index: 2; background: radial-gradient(120% 90% at 30% 10%, color-mix(in srgb, var(--_ac) 18%, #10131c), #07080c 70%) center / cover no-repeat; transition: opacity .5s var(--_ease), transform 1.2s var(--_ease); }
.otp-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 45%); }
.otp-load .otp-poster { animation: otp-shim 1.6s ease-in-out infinite; }
@keyframes otp-shim { 50% { filter: brightness(1.25); } }
.otp:not(.otp-idle):not(.otp-slate):not(.otp-gate):not(.otp-err) .otp-poster { opacity: 0; pointer-events: none; }
.otp-surface { position: absolute; inset: 0; z-index: 3; cursor: pointer; touch-action: manipulation; }
.otp-nocursor .otp-surface { cursor: none; }
.otp-shade { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .35s var(--_ease); }
.otp-shade-t { top: 0; height: 34%; background: linear-gradient(180deg, rgba(0, 0, 0, .78), transparent); }
.otp-shade-b { bottom: 0; height: 52%; background: linear-gradient(0deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .35) 55%, transparent); }
.otp-ui .otp-shade, .otp-idle .otp-shade, .otp-yt .otp-shade { opacity: 1; }

/* buttons */
.otp-b { appearance: none; border: 0; background: transparent; color: var(--_ink); width: 44px; height: 44px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; text-decoration: none; position: relative; transition: background .2s, transform .2s var(--_ease), color .2s; }
.otp-b svg { width: 24px; height: 24px; display: block; }
.otp-b:hover { background: color-mix(in srgb, var(--_ink) 14%, transparent); }
.otp-b:active { transform: scale(.92); }
.otp-b.on { color: var(--_ac); }
.otp-b.on::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--_ac); }
.otp .otp-b:focus-visible, .otp .otp-pill:focus-visible, .otp .otp-btn:focus-visible, .otp .otp-mi:focus-visible, .otp-bar:focus-visible, .otp-yt-go:focus-visible { outline: 2px solid var(--_ac); outline-offset: 2px; }
.otp-bar:focus-visible { outline-offset: -2px; border-radius: 8px; }

/* top bar */
.otp-top { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 6px; padding: 14px 18px 0 12px; pointer-events: none; transition: opacity .35s var(--_ease), transform .35s var(--_ease); }
.otp-top > * { pointer-events: auto; }
.otp-top .otp-back { background: var(--_glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--_line); }
.otp-ttl { display: flex; flex-direction: column; min-width: 0; padding-left: 8px; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.otp-name { font-size: clamp(15px, 2.1vw, 22px); font-weight: 650; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--_ac); }
.otp:not(.otp-ui):not(.otp-idle) .otp-top { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.otp:not(.otp-ui):not(.otp-idle) .otp-top > * { pointer-events: none; }
.otp-top-static { position: absolute; height: var(--otp-bar, 56px); padding: 6px 14px 0 8px; align-items: center; background: transparent; }
.otp-yt:not(.otp-ui):not(.otp-idle) .otp-top { opacity: 1; transform: none; }
.otp-yt:not(.otp-ui):not(.otp-idle) .otp-top > * { pointer-events: auto; }
.otp-yt { padding-top: 0; aspect-ratio: auto; height: auto; }
.otp-yt::before { content: ""; display: block; padding-top: calc(56.25% + var(--otp-bar, 56px)); }
.otp-yt .otp-top .otp-back { background: transparent; box-shadow: none; }
.otp-yt .otp-top .otp-back:hover { background: color-mix(in srgb, var(--_ink) 12%, transparent); }

/* centre cluster */
.otp-mid { position: absolute; z-index: 6; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 6vw, 64px); pointer-events: none; }
.otp-mid > * { pointer-events: auto; }
.otp-side { width: 58px; height: 58px; background: var(--_glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--_line); transition: opacity .3s var(--_ease), transform .3s var(--_ease), background .2s; }
.otp-side svg { width: 30px; height: 30px; }
.otp-big { --p: 0; width: 92px; height: 92px; background: var(--_glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--_line), 0 14px 50px rgba(0, 0, 0, .55), 0 0 0 0 var(--_ac); transition: transform .3s var(--_ease), opacity .3s var(--_ease), box-shadow .4s; }
.otp-big:hover { background: var(--_glass); transform: scale(1.05); box-shadow: inset 0 0 0 1px var(--_line), 0 14px 60px rgba(0, 0, 0, .55), 0 0 44px color-mix(in srgb, var(--_ac) 40%, transparent); }
.otp-big .otp-bigi { position: relative; display: flex; color: var(--_ink); }
.otp-big .otp-bigi svg { width: 40px; height: 40px; }
.otp-big .otp-ring { position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(var(--_ac) calc(var(--p) * 1%), color-mix(in srgb, var(--_ink) 16%, transparent) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.otp-big.on::after { display: none; }
.otp:not(.otp-ui) .otp-mid, .otp-ad .otp-mid, .otp-ended .otp-mid, .otp-gate .otp-mid, .otp-err .otp-mid, .otp-slate .otp-mid { opacity: 0; pointer-events: none; }
.otp:not(.otp-ui) .otp-mid > *, .otp-ad .otp-mid > *, .otp-ended .otp-mid > *, .otp-gate .otp-mid > *, .otp-err .otp-mid > *, .otp-slate .otp-mid > * { pointer-events: none; }
.otp-idle .otp-side { opacity: 0; transform: scale(.7); pointer-events: none; }
.otp-idle .otp-big { width: 104px; height: 104px; }
.otp-idle .otp-big .otp-ring { background: color-mix(in srgb, var(--_ink) 22%, transparent); }
.otp-idle .otp-big { animation: otp-pulse 2.8s var(--_ease) infinite; }
@keyframes otp-pulse { 0%, 100% { box-shadow: inset 0 0 0 1px var(--_line), 0 14px 50px rgba(0, 0, 0, .55), 0 0 0 0 color-mix(in srgb, var(--_ac) 40%, transparent); } 60% { box-shadow: inset 0 0 0 1px var(--_line), 0 14px 50px rgba(0, 0, 0, .55), 0 0 0 22px transparent; } }
.otp-buf.otp-play .otp-big, .otp-buf:not(.otp-idle) .otp-big { opacity: .0; }
.otp-spin { position: absolute; z-index: 7; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--_ink) 18%, transparent); border-top-color: var(--_ac); animation: otp-rot .9s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s; }
.otp-buf:not(.otp-idle):not(.otp-ended):not(.otp-gate):not(.otp-err) .otp-spin { opacity: 1; }
@keyframes otp-rot { to { transform: rotate(360deg); } }

/* double tap */
.otp-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.otp-bub { position: absolute; top: 50%; width: 30%; height: 70%; margin-top: -35%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; letter-spacing: .1em; opacity: 0; transition: opacity .15s; background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent); }
.otp-bub b { font-size: 16px; letter-spacing: .02em; }
.otp-bub-l { left: 0; border-radius: 0 100% 100% 0 / 0 50% 50% 0; } .otp-bub-r { right: 0; border-radius: 100% 0 0 100% / 50% 0 0 50%; }
.otp-bub.on { opacity: 1; }
.otp-rip { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: rgba(255, 255, 255, .35); animation: otp-rip .6s var(--_ease) forwards; }
@keyframes otp-rip { to { transform: scale(12); opacity: 0; } }

/* dock */
.otp-dock { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 0 clamp(10px, 2vw, 22px) clamp(8px, 1.6vw, 16px); transition: opacity .35s var(--_ease), transform .35s var(--_ease); }
.otp:not(.otp-ui) .otp-dock, .otp-ad .otp-dock, .otp-idle .otp-dock, .otp-ended .otp-dock, .otp-gate .otp-dock, .otp-err .otp-dock, .otp-slate .otp-dock { opacity: 0; transform: translateY(10px); pointer-events: none; }
.otp:not(.otp-ui) .otp-dock *, .otp-ad .otp-dock *, .otp-idle .otp-dock *, .otp-ended .otp-dock * { pointer-events: none !important; }
.otp-srow { display: flex; align-items: center; gap: 12px; }
.otp-tc, .otp-td { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; min-width: 40px; color: var(--_ink); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.otp-td { text-align: right; color: var(--_mut); }
.otp-bar { position: relative; flex: 1; height: 36px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.otp-line { position: relative; width: 100%; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--_ink) 22%, transparent); transition: height .18s var(--_ease); overflow: hidden; }
.otp-bar:hover .otp-line, .otp-scrub .otp-line, .otp-bar:focus-visible .otp-line { height: 7px; }
.otp-bufbar, .otp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; transform: scaleX(0); }
i.otp-bufbar { background: color-mix(in srgb, var(--_ink) 30%, transparent); display: block; }
.otp-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--_ac) 78%, #fff), var(--_ac)); }
.otp-chs i { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--_bg); }
.otp-knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--_ac) 35%, transparent), 0 2px 8px rgba(0, 0, 0, .5); transform: scale(0); transition: transform .18s var(--_ease); pointer-events: none; }
.otp-bar:hover .otp-knob, .otp-scrub .otp-knob, .otp-bar:focus-visible .otp-knob, .otp-touch .otp-knob { transform: scale(1); }
.otp-pv { position: absolute; bottom: 30px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 5px; border-radius: 12px; background: var(--_glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--_line), 0 10px 30px rgba(0, 0, 0, .5); pointer-events: none; min-width: 64px; }
.otp-pv-img { border-radius: 8px; background-repeat: no-repeat; background-color: #000; max-width: 100%; }
.otp-pv-cap { display: flex; flex-direction: column; align-items: center; padding: 0 6px 2px; max-width: 220px; text-align: center; }
.otp-pv-cap b { font-size: 13px; font-variant-numeric: tabular-nums; }
.otp-pv-cap span { font-size: 11px; color: var(--_mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.otp-pv-cap span:empty { display: none; }
.otp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.otp-l, .otp-r { display: flex; align-items: center; gap: 2px; min-width: 0; }
.otp-l { flex: 1; } .otp-r { flex: none; }
.otp-chap { margin-left: 10px; font-size: 13px; color: var(--_mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otp-vw { display: flex; align-items: center; }
.otp-vs { -webkit-appearance: none; appearance: none; width: 0; opacity: 0; height: 24px; margin: 0; background: transparent; transition: width .25s var(--_ease), opacity .2s, margin .25s; cursor: pointer; }
.otp-vw:hover .otp-vs, .otp-vs:focus-visible, .otp-vw:focus-within .otp-vs { width: 84px; opacity: 1; margin: 0 8px 0 2px; }
.otp-vs::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--_ac) var(--v, 100%), color-mix(in srgb, var(--_ink) 25%, transparent) 0); }
.otp-vs::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--_ac) var(--v, 100%), color-mix(in srgb, var(--_ink) 25%, transparent) 0); }
.otp-vs::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 0; }
.otp-vs::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; }
.otp-vs:focus-visible { outline: 2px solid var(--_ac); outline-offset: 4px; border-radius: 4px; }

/* menu */
.otp-menu { position: absolute; z-index: 9; bottom: 84px; min-width: 188px; max-width: calc(100% - 16px); max-height: 60%; overflow: auto; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--_bg) 88%, transparent); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--_line), 0 24px 60px rgba(0, 0, 0, .6); animation: otp-pop .22s var(--_ease); }
@keyframes otp-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.otp-mh { padding: 8px 12px 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--_mut); font-weight: 700; }
.otp-mi { appearance: none; border: 0; background: transparent; color: var(--_ink); width: 100%; min-height: 44px; padding: 0 12px; border-radius: 11px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font: inherit; cursor: pointer; text-align: left; }
.otp-mi:hover { background: color-mix(in srgb, var(--_ink) 10%, transparent); }
.otp-mi[aria-checked="true"] { color: var(--_ac); font-weight: 650; }
.otp-mi i { display: flex; width: 20px; } .otp-mi svg { width: 20px; height: 20px; }

/* pills, buttons, messages */
.otp-pill { appearance: none; border: 0; font: inherit; font-weight: 650; font-size: 14px; min-height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; color: var(--_ink); background: var(--_glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--_line); transition: background .2s, transform .2s var(--_ease); }
.otp-pill:hover { background: color-mix(in srgb, var(--_ink) 18%, var(--_bg)); }
.otp-pill svg { width: 18px; height: 18px; }
.otp-btn { appearance: none; border: 0; font: inherit; font-weight: 700; font-size: 15px; min-height: 46px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; background: var(--_ac); color: var(--_on); transition: transform .2s var(--_ease), filter .2s; }
.otp-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.otp-btn svg { width: 20px; height: 20px; }
.otp-btn.sec { background: color-mix(in srgb, var(--_ink) 14%, transparent); color: var(--_ink); box-shadow: inset 0 0 0 1px var(--_line); }
.otp-btn.ghost { background: transparent; color: var(--_mut); box-shadow: none; }
.otp-msg { position: absolute; inset: 0; z-index: 8; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: radial-gradient(90% 90% at 50% 40%, rgba(7, 8, 12, .72), rgba(7, 8, 12, .94)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.otp-slate .otp-msg, .otp-gate .otp-msg, .otp-err .otp-msg { display: flex; }
.otp-msg h3 { margin: 0; font-size: clamp(17px, 2.6vw, 26px); font-weight: 650; max-width: 32ch; }
.otp-msg p { margin: 0; color: var(--_mut); max-width: 44ch; }
.otp-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.otp-form input { min-height: 46px; padding: 0 16px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--_ink) 12%, transparent); color: var(--_ink); font: inherit; box-shadow: inset 0 0 0 1px var(--_line); user-select: text; -webkit-user-select: text; }
.otp-bad { color: #ff9b9b !important; }
.otp-toast { position: absolute; z-index: 7; left: clamp(10px, 2vw, 22px); bottom: 96px; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--_glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--_line), 0 14px 40px rgba(0, 0, 0, .5); animation: otp-pop .3s var(--_ease); transition: bottom .35s var(--_ease); font-weight: 600; }
.otp-toast .otp-pill { min-height: 40px; background: var(--_ac); color: var(--_on); box-shadow: none; }
.otp:not(.otp-ui) .otp-toast { bottom: 22px; }
.otp-skip { position: absolute; z-index: 7; right: clamp(10px, 2vw, 22px); bottom: 100px; transition: bottom .35s var(--_ease); animation: otp-pop .3s var(--_ease); }
.otp:not(.otp-ui) .otp-skip { bottom: 24px; }
.otp-next { --cd: 0; position: absolute; z-index: 7; right: clamp(10px, 2vw, 22px); bottom: 100px; width: min(360px, calc(100% - 24px)); display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: var(--_glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px var(--_line), 0 20px 50px rgba(0, 0, 0, .55); animation: otp-pop .35s var(--_ease); transition: bottom .35s var(--_ease); }
.otp:not(.otp-ui) .otp-next { bottom: 24px; }
.otp-skip:not([hidden]) ~ .otp-next { bottom: 160px; }
.otp-nx-ring { flex: none; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--_ac) calc(var(--cd) * 1%), color-mix(in srgb, var(--_ink) 18%, transparent) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
.otp-next.nocd .otp-nx-ring { background: color-mix(in srgb, var(--_ac) 60%, transparent); }
.otp-nx-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.otp-nx-t b { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otp-nx-t small { color: var(--_mut); min-height: 1.2em; }
.otp-nx-a { display: flex; flex-direction: column; gap: 6px; }
.otp-nx-a .otp-btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
.otp-end { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: radial-gradient(100% 100% at 50% 40%, rgba(7, 8, 12, .6), rgba(7, 8, 12, .93)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: otp-fade .5s var(--_ease); }
@keyframes otp-fade { from { opacity: 0; } }
.otp-end-t { font-size: clamp(20px, 3.6vw, 36px); font-weight: 650; max-width: 24ch; }
.otp-end-r { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.otp-adui { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 12px clamp(10px, 2vw, 22px); background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent); }
.otp-ad .otp-adui { display: flex; }
.otp-adui .ad-t { font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--_ac); color: var(--_on); font-size: 13px; }
.otp-adui .ad-act { display: flex; gap: 8px; }
.otp-adui button:disabled { opacity: .7; }
.otp-banner { position: absolute; z-index: 6; left: 12px; bottom: 100px; display: none; max-width: 300px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.otp-banner.on { display: block; } .otp-banner img { display: block; max-width: 100%; max-height: 80px; }
.otp-banner button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 4px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; } .otp-banner svg { width: 100%; height: 100%; }
.otp:not(.otp-paused):not(.otp-idle) .otp-banner { display: none; }
.otp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* YouTube facade */
.otp-yt { background: var(--_bg); }
.otp-yt-go { position: absolute; inset: 0; border: 0; padding: 0; background: #000; cursor: pointer; color: var(--_ink); overflow: hidden; border-radius: 0 0 var(--_r) var(--_r); }
.otp-yt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--_ease), filter .4s; }
.otp-yt-go:hover .otp-yt-img { transform: scale(1.04); filter: brightness(1.08); }
.otp-yt-go .otp-big { position: absolute; left: 50%; top: 50%; margin: -52px 0 0 -52px; pointer-events: none; opacity: 1; display: flex; align-items: center; justify-content: center; animation: otp-pulse 2.8s var(--_ease) infinite; width: 104px; height: 104px; border-radius: 50%; background: var(--_glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--_line); }
.otp-yt-go .otp-ring { background: color-mix(in srgb, var(--_ink) 22%, transparent); }
.otp-yt-go .otp-shade { opacity: 1; z-index: 1; }
.otp-yt-go .otp-big { z-index: 2; }
.otp-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; border-radius: 0 0 var(--_r) var(--_r); }

/* size classes (set from the stage width, not the viewport) */
.otp-sm .otp-big { width: 76px; height: 76px; } .otp-sm .otp-big .otp-bigi svg { width: 34px; height: 34px; }
.otp-sm .otp-side { width: 50px; height: 50px; } .otp-sm .otp-side svg { width: 26px; height: 26px; }
.otp-sm .otp-b-pip, .otp-sm .otp-b-cine, .otp-sm .otp-chap { display: none; }
.otp-sm .otp-menu { bottom: 78px; }
.otp-xs .otp-top { padding: 10px 12px 0 8px; }
.otp-xs .otp-name { font-size: 15px; }
.otp-xs .otp-dock { padding-bottom: 4px; }
.otp-xs .otp-srow { gap: 8px; }
.otp-xs .otp-big { width: 68px; height: 68px; }
.otp-xs .otp-idle .otp-big { width: 80px; height: 80px; }
.otp-xs .otp-side { width: 46px; height: 46px; }
.otp-xs .otp-toast { bottom: 88px; right: 10px; font-size: 14px; } .otp-xs .otp-skip { bottom: 92px; }
.otp-xs .otp-next { bottom: 92px; padding: 10px; } .otp-xs .otp-nx-a .otp-btn { padding: 0 12px; }
.otp-xs .otp-skip:not([hidden]) ~ .otp-next { bottom: 150px; }
.otp-touch .otp-vs, .otp-touch .otp-b-cine { display: none; }
.otp-touch .otp-bar { height: 44px; }
.otp-touch .otp-b-mute { display: inline-flex; }
@media (pointer: coarse) { .otp-vs, .otp-b-cine { display: none; } }
.otp-cine .otp-bar, .otp-fs .otp-bar { height: 40px; }
.otp-fs .otp-top, .otp-cine .otp-top { padding-top: max(14px, env(safe-area-inset-top)); }
.otp-fs .otp-dock, .otp-cine .otp-dock { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .otp *, .otp *::before, .otp *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .otp-spin { animation: none !important; border-top-color: var(--_ac); border-right-color: var(--_ac); }
  .otp-idle .otp-big { animation: none; }
}
@media (forced-colors: active) { .otp-b, .otp-pill, .otp-btn, .otp-mi { border: 1px solid ButtonText; } .otp-fill { background: Highlight; } }

.otp-chip { position: absolute; z-index: 6; left: 0; right: 0; top: calc(50% + 70px); text-align: center; pointer-events: none; font-weight: 650; letter-spacing: .02em; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.otp-chip:not([hidden]) { display: block; }
.otp:not(.otp-idle) .otp-chip { display: none; }
.otp-xs .otp-chip { top: calc(50% + 52px); font-size: 14px; }
.otp-spin { box-shadow: 0 0 0 6px rgba(0,0,0,.25), inset 0 0 0 6px rgba(0,0,0,.25); background: rgba(0,0,0,.28); }
.otp-xs .otp-b-play { display: none; }
.otp-xs .otp-mid { padding-bottom: 38px; gap: 18px; }
.otp-xs .otp-spin { margin-top: -50px; }

/* older browsers without color-mix(): plain fallbacks for the key surfaces */
@supports not (color: color-mix(in srgb, red, blue)) {
  .otp { --_mut: rgba(245, 242, 234, .66); --_line: rgba(255, 255, 255, .15); }
  .otp-line { background: rgba(255, 255, 255, .22); } i.otp-bufbar { background: rgba(255, 255, 255, .3); } .otp-fill { background: var(--_ac); }
  .otp-b:hover, .otp-mi:hover { background: rgba(255, 255, 255, .14); } .otp-btn.sec { background: rgba(255, 255, 255, .14); }
  .otp-menu { background: rgba(7, 8, 12, .94); } .otp-big .otp-ring { background: conic-gradient(var(--_ac) calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0); }
  .otp-nx-ring { background: conic-gradient(var(--_ac) calc(var(--cd) * 1%), rgba(255, 255, 255, .18) 0); }
}