/* Video player. Phones and tablets use native controls; pointer devices get these. */
.player { background: #000; padding-top: var(--safe-top); }
.player-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78svh; overflow: hidden; background: #000; color: #fff; user-select: none; -webkit-user-select: none; }
.player-stage[data-orientation="portrait"] { aspect-ratio: 9 / 16; max-height: 78svh; margin-inline: auto; width: auto; max-width: 100%; }
.player-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-stage.is-custom .player-video { cursor: pointer; }
.player-stage.is-idle.is-playing { cursor: none; }

.player-loading { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-base); display: grid; place-items: center; }
.player-loading::after { content: ""; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .25); border-top-color: #fff; animation: spin .8s linear infinite; }
.player-stage.is-waiting .player-loading { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.player-big { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgb(30 30 34 / .55); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 0 0 .5px rgb(255 255 255 / .18); color: #fff; transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out); }
.player-big .icon { width: 28px; height: 28px; margin-left: 3px; }
.player-big:active { transform: scale(.94); }
.player-stage.is-playing .player-big { opacity: 0; transform: scale(1.15); pointer-events: none; }
.player-stage:not(.is-custom) .player-big { display: none; }

.player-hud { position: absolute; top: var(--s4); left: 50%; padding: 7px 14px; border-radius: var(--r-full); background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 600; opacity: 0; transform: translate(-50%, -6px); pointer-events: none; transition: opacity var(--t-base), transform var(--t-base) var(--ease-out); }
.player-hud.is-on { opacity: 1; transform: translate(-50%, 0); }

.player-bar { position: absolute; inset: auto 0 0 0; padding: 40px var(--s4) var(--s3); background: linear-gradient(to top, rgb(0 0 0 / .7), transparent); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out); }
.player-stage.is-idle.is-playing .player-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.bar-row { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.bar-row .grow { flex: 1; }
.ctl { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; opacity: .92; transition: background var(--t-fast), transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.ctl:hover { background: rgb(255 255 255 / .16); opacity: 1; }
.ctl:active { transform: scale(.9); }
.ctl .icon { width: 22px; height: 22px; }
.ctl .is-pause, .is-playing [data-act="play"] .is-play { display: none; }
.is-playing .ctl .is-pause { display: block; }
[data-act="mute"] .v-low, [data-act="mute"] .v-off { display: none; }
.is-vlow [data-act="mute"] .v-high, .is-vmuted [data-act="mute"] .v-high { display: none; }
.is-vlow [data-act="mute"] .v-low { display: block; }
.is-vmuted [data-act="mute"] .v-off { display: block; }
.ctl .is-exit { display: none; }
.is-fs .ctl .is-exit { display: block; }
.is-fs .ctl .is-enter { display: none; }
.time { margin-left: var(--s2); font-size: 13px; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .85); }
.time i { margin: 0 4px; font-style: normal; opacity: .55; }

.seek { position: relative; padding: 8px 0; }
.seek-tip { position: absolute; bottom: 26px; left: var(--tip, 0px); padding: 3px 8px; border-radius: 6px; background: rgb(0 0 0 / .7); font-size: 12px; font-variant-numeric: tabular-nums; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
.seek:hover .seek-tip { opacity: 1; }
.player input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; --pct: 0%; --buf: 0%; }
.player input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--pct), rgb(255 255 255 / .38) var(--pct) var(--buf), rgb(255 255 255 / .2) var(--buf)); transition: height var(--t-fast); }
.player input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .2); }
.player input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.player input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; margin-top: 2px; border-radius: 50%; background: #fff; transition: width var(--t-fast), height var(--t-fast), margin var(--t-fast); }
.player input[type="range"]::-moz-range-thumb { width: 0; height: 0; border: 0; background: #fff; }
.seek:hover input::-webkit-slider-runnable-track, .seek input:focus-visible::-webkit-slider-runnable-track { height: 6px; }
.seek:hover input::-webkit-slider-thumb, .seek input:focus-visible::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -4px; }
.player input.vol { width: 0; opacity: 0; transition: width var(--t-base) var(--ease-out), opacity var(--t-base); }
.bar-row:hover input.vol, .player input.vol:focus-visible { width: 76px; opacity: 1; margin-left: 4px; }
.player input.vol::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }

.ctl-wrap { position: relative; }
.player-menu { position: absolute; right: 0; bottom: 48px; min-width: 150px; padding: 6px; border-radius: var(--r-md); background: rgb(30 30 34 / .86); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-pop); }
.player-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 14px; text-align: left; }
.player-menu button:hover { background: rgb(255 255 255 / .14); }
.player-menu button .icon { width: 16px; height: 16px; visibility: hidden; }
.player-menu button[aria-checked="true"] .icon { visibility: visible; }

@media (min-width: 820px) {
  .player { border-radius: var(--r-md); overflow: hidden; padding-top: 0; box-shadow: 0 20px 60px rgb(0 0 0 / .4); }
  .player-stage { max-height: 76vh; }
}
.player-stage:fullscreen { max-height: none; aspect-ratio: auto; width: 100vw; height: 100vh; }
.player-stage:fullscreen .player-bar { padding-inline: var(--s8); padding-bottom: var(--s6); }

.ctl[aria-pressed="true"] { color: var(--accent-text); }
@media (min-width: 1180px) {
  .watch.is-theater { grid-template-columns: minmax(0, 1fr); }
  .watch.is-theater .player-stage { max-height: 82vh; }
  .watch.is-theater .up-next { position: static; max-height: none; }
}
@media (min-width: 820px) { .watch.is-theater .player { border-radius: var(--r-md); } }

.player-video::cue { background: rgb(0 0 0 / .72); color: #fff; font: 500 1.05em var(--font); }

.seek-tick { position: absolute; top: 50%; width: 3px; height: 10px; margin: -5px 0 0 -1px; border-radius: 1px; background: rgb(255 255 255 / .85); pointer-events: none; box-shadow: 0 0 0 1px rgb(0 0 0 / .35); }
body.lights-out::after { content: ""; position: fixed; z-index: 40; inset: 0; background: rgb(0 0 0 / .9); pointer-events: none; animation: dim var(--t-slow) var(--ease) both; }
@keyframes dim { from { opacity: 0; } }
body.lights-out .player { position: relative; z-index: 45; }
body.lights-out .topbar, body.lights-out .nav-side, body.lights-out .tabbar { z-index: 30; opacity: .35; }