.immersive { background: #000; overflow: hidden; height: 100vh; height: 100dvh; }

.player { position: fixed; inset: 0; background: #000; color: #fff; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; container-type: size; }

@media (orientation: portrait) {
  .player.is-rotated { inset: 0 auto auto 100vw; width: 100vh; height: 100vw; width: 100dvh; height: 100dvw; transform-origin: top left; transform: rotate(90deg); }
}
.player.is-idle { cursor: none; }
.player__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

.player__clip, .player__mask {
  position: absolute; inset: 0; margin: auto;
  width: min(100vw, calc(100vh * var(--ratio, 1.7778))); height: min(100vh, calc(100vw / var(--ratio, 1.7778)));
  width: min(100dvw, calc(100dvh * var(--ratio, 1.7778))); height: min(100dvh, calc(100dvw / var(--ratio, 1.7778)));
  width: min(100cqw, calc(100cqh * var(--ratio, 1.7778))); height: min(100cqh, calc(100cqw / var(--ratio, 1.7778)));
}
.player__clip { overflow: hidden; background: #000; }
.player__frame { position: absolute; left: 0; top: -8rem; width: 100%; height: calc(100% + 16rem); border: 0; background: #000; color-scheme: light; }
.player__mask { pointer-events: none; opacity: 0; transition: opacity .15s; background: rgb(0 0 0 / .35); display: grid; place-items: center; }
.player__mask span { display: grid; place-items: center; width: 6.4rem; height: 6.4rem; border-radius: 50%; background: #111; box-shadow: 0 0 0 2px rgb(255 255 255 / .85); font-size: 2.6rem; padding-left: .3rem; }
.player.is-paused .player__mask, .player.is-loading .player__mask { opacity: 1; }
.player.is-loading .player__mask span { visibility: hidden; }
.player.is-loading .player__mask { background: #000; }
.player__surface { position: absolute; inset: 0; z-index: 1; }

.shaka-text-container, .player__captions { position: absolute; z-index: 1; left: 6%; right: 6%; bottom: 5%; pointer-events: none; text-align: center; font: 600 clamp(1.05rem, .7rem + 1.5vw, 2.1rem)/1.35 var(--body); color: #fff; transition: bottom .3s; }
.shaka-text-container { top: 0; left: 0; right: 0; }
.shaka-text-container span:not(:has(span)), .player__captions span { background: rgb(0 0 0 / .7); padding: .12em .5em; border-radius: 4px; white-space: pre-line; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.player:not(.is-idle) .shaka-text-container, .player:not(.is-idle) .player__captions { bottom: 9.5rem; }

.player__spinner { position: absolute; z-index: 2; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 4px solid rgb(255 255 255 / .18); border-top-color: #fff; animation: spin .9s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s; }
.player.is-loading .player__spinner, .player.is-buffering .player__spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.player__flash { position: absolute; z-index: 2; inset: 0; margin: auto; width: 6rem; height: 6rem; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .5); font-size: 2.6rem; opacity: 0; pointer-events: none; }
.player__flash .icon { grid-area: 1 / 1; display: none; }
.player__flash[data-kind="play"] .icon:first-child, .player__flash[data-kind="pause"] .icon:last-child { display: block; }
.player__flash.is-on { animation: flash .55s ease-out; }
@keyframes flash { from { opacity: .95; transform: scale(.8); } to { opacity: 0; transform: scale(1.35); } }

.player__error { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: .8rem; text-align: center; padding: 2rem; background: rgb(0 0 0 / .88); }

.player__paused { position: absolute; z-index: 2; inset: 0; display: grid; align-content: center; gap: .5rem; padding: 0 clamp(1.5rem, 9vw, 9rem); background: rgb(0 0 0 / .72); opacity: 0; pointer-events: none; transition: opacity .6s; }
.player.is-resting .player__paused { opacity: 1; }
.player.is-resting .player__chrome { opacity: 0; }
.player.is-resting .player__mask span { opacity: 0; }
.player.is-resting .player__captions, .player.is-resting .shaka-text-container { opacity: 0; }
.player__paused span { color: rgb(255 255 255 / .7); font-size: 1.05rem; }
.player__paused strong { font: 800 clamp(2rem, 1rem + 4vw, 4.2rem)/1.05 var(--display); letter-spacing: -.02em; }
.player__paused b { font-size: clamp(1.05rem, .9rem + .7vw, 1.6rem); font-weight: 600; margin-top: .3rem; }
.player__paused p { max-width: 38rem; color: rgb(255 255 255 / .75); font-size: 1.05rem; margin: .6rem 0 0; }

.player__chrome { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; transition: opacity .3s; background: linear-gradient(to bottom, rgb(0 0 0 / .7), transparent 18%, transparent 66%, rgb(0 0 0 / .85)); }
.player__chrome > * { pointer-events: auto; }
.player.is-idle .player__chrome { opacity: 0; }
.player.is-idle .player__chrome > * { pointer-events: none; }
.player.is-idle .player__chrome:has(:focus-visible) { opacity: 1; }
.player.is-loading .player__bottom { visibility: hidden; }

.iconbtn--xl { width: 3.6rem; height: 3.6rem; font-size: 1.9rem; }
.iconbtn--xl:hover { background: none; }
@media (hover: hover) { .iconbtn--xl:hover { scale: 1.22; } }
.iconbtn--ten { position: relative; font-size: 2.3rem; }
.iconbtn--ten i { position: absolute; inset: 0; display: grid; place-items: center; padding-top: .28rem; font: 700 .62rem/1 var(--body); font-style: normal; }
.iconbtn[aria-pressed="true"] { color: var(--accent-bright); }

.player__top { display: flex; align-items: center; gap: 1rem; padding: clamp(.8rem, 2vw, 1.6rem) clamp(.8rem, 3vw, 2.6rem); }
.player__spacer { flex: 1; }

@media (orientation: landscape) { .player.no-fullscreen .player__fullscreen { display: none; } }
.player__title { display: none; }
.player__studio { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 600; font-size: .92rem; }

.player__skip { position: absolute; right: clamp(.8rem, 3vw, 2.6rem); bottom: clamp(9rem, 20vh, 12rem); padding: .85em 1.7em; border: 1.5px solid rgb(255 255 255 / .75); border-radius: 4px; background: rgb(20 20 20 / .7); color: #fff; font: 700 1.05rem/1 var(--body); transition: background .15s, color .15s; animation: rise .3s var(--ease); }
.player__skip:hover, .player__skip:focus-visible { background: #fff; color: #111; }
.player__upnext { position: absolute; right: clamp(.8rem, 3vw, 2.6rem); bottom: clamp(9rem, 20vh, 12rem); width: min(24rem, 86vw); display: grid; gap: .5rem; padding: 1.1rem; border-radius: var(--radius-lg); background: rgb(23 24 29 / .94); animation: rise .3s var(--ease); }
.player__upnext-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }

.player__bottom { padding: 0 clamp(.8rem, 3vw, 2.6rem) clamp(.8rem, 2.4vw, 1.9rem); display: grid; gap: .5rem; }
.scrub { display: flex; align-items: center; gap: 1rem; }
.player__time { font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.scrub__bar { position: relative; flex: 1; height: var(--scrub, 1.6rem); display: flex; align-items: center; }
.scrub__bar::before, .scrub__buffer, .scrub__fill { content: ""; position: absolute; left: 0; height: 4px; pointer-events: none; transition: height .12s; }
.scrub__bar::before { right: 0; background: rgb(255 255 255 / .28); }
.scrub__buffer { background: rgb(255 255 255 / .45); width: 0; }
.scrub__fill { background: var(--accent); width: 0; }
.scrub__bar:hover::before, .scrub__bar:hover .scrub__buffer, .scrub__bar:hover .scrub__fill { height: 7px; }
.scrub__bar input { position: relative; width: 100%; margin: 0; height: var(--scrub, 1.6rem); appearance: none; background: none; cursor: pointer; }
.scrub__bar input::-webkit-slider-runnable-track { background: none; height: var(--scrub, 1.6rem); }
.scrub__bar input::-moz-range-track { background: none; }
.scrub__bar input::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: calc(var(--scrub, 1.6rem) / 2 - 9px); border-radius: 50%; background: var(--accent); transition: transform .12s; }
.scrub__bar input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--accent); }
.scrub__bar:hover input::-webkit-slider-thumb { transform: scale(1.25); }

.player__buttons { display: flex; align-items: center; gap: clamp(.1rem, 1vw, .9rem); }
.player__sound { display: flex; align-items: center; }
.player__volume { width: 0; opacity: 0; accent-color: #fff; transition: width .2s var(--ease), opacity .2s; }
.player__sound:hover .player__volume, .player__sound:focus-within .player__volume { width: 6rem; opacity: 1; margin-right: .6rem; }
.player__now { flex: 1; min-width: 0; text-align: center; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 1rem; }
.player__now strong { font-weight: 700; margin-right: .6rem; }
.player__now span { color: rgb(255 255 255 / .8); }

.popmenu { position: relative; }
.popmenu__panel { position: absolute; right: 0; bottom: calc(100% + .8rem); padding: 1rem; display: flex; gap: 1.6rem; border-radius: var(--radius); background: rgb(26 26 26 / .97); box-shadow: 0 20px 60px #000; }
.popmenu__panel > div { display: grid; gap: .2rem; align-content: start; min-width: 9rem; }
.popmenu__panel strong { font-size: 1.05rem; padding: 0 .6rem .5rem; }
.popmenu__panel > div > div { display: grid; }
.popmenu__option { text-align: left; padding: .6rem .8rem .6rem 2.2rem; border: 0; border-radius: 4px; background: none; font-weight: 500; position: relative; color: rgb(255 255 255 / .75); }
.popmenu__option:hover { background: rgb(255 255 255 / .1); color: #fff; }
.popmenu__option[aria-pressed="true"] { color: #fff; font-weight: 700; }
.popmenu__option[aria-pressed="true"]::before { content: "✓"; position: absolute; left: .8rem; }

@media (max-width: 720px), (pointer: coarse) {
  .player__top { gap: .4rem; padding: max(.5rem, env(safe-area-inset-top)) max(.6rem, env(safe-area-inset-right)) .5rem max(.6rem, env(safe-area-inset-left)); }
  .player__title { display: grid; flex: 1; min-width: 0; font-size: .9rem; line-height: 1.3; }
  .player__title strong, .player__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .player__title span { color: rgb(255 255 255 / .75); font-size: .8rem; }
  .player__spacer, .player__studio span, .player__follow, .player__now, .player__volume { display: none; }

  .player__bottom { gap: 0; padding: 0 max(.8rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left)); }
  .scrub { --scrub: 2.2rem; gap: .7rem; }
  .player__buttons { gap: .2rem; }
  .player__sound { margin-right: auto; }
  .iconbtn--xl { width: 2.9rem; height: 2.9rem; font-size: 1.5rem; }

  .player__play, .player__back, .player__ahead { position: absolute; top: 50%; left: 50%; translate: -50% -50%; border-radius: 50%; background: rgb(0 0 0 / .45); }
  .player__play { width: 4.4rem; height: 4.4rem; font-size: 2.2rem; }
  .player__back, .player__ahead { width: 3.6rem; height: 3.6rem; font-size: 2.2rem; }
  .player__back { left: calc(50% - min(29cqw, 8.5rem)); }
  .player__ahead { left: calc(50% + min(29cqw, 8.5rem)); }
  .player__play:hover, .player__back:hover, .player__ahead:hover { background: rgb(0 0 0 / .45); }

  .player__mask span { width: 6rem; height: 6rem; box-shadow: none; }
  .player__mask span .icon { visibility: hidden; }
  .player__flash { display: none; }

  .player:not(.is-idle) .shaka-text-container, .player:not(.is-idle) .player__captions { bottom: 6.8rem; }
  .player__skip, .player__upnext { bottom: 6.8rem; right: max(.8rem, env(safe-area-inset-right)); }
  .player__skip { padding: .75em 1.3em; font-size: .95rem; }

  .popmenu { position: static; }
  .popmenu__panel { position: fixed; left: .6rem; right: .6rem; bottom: max(.6rem, env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 1rem 1.2rem; max-height: calc(100cqh - 1.2rem); overflow-y: auto; }
  .popmenu__panel > div { flex: 1; min-width: 8rem; }
  .popmenu__option { padding-block: .7rem; }
}
@media (max-height: 480px) {
  .player__paused p { display: none; }
  .player__paused strong { font-size: 1.7rem; }
}