/* -----------------------------------------------------------------------------
 *  Copyright (c) NoMercy Entertainment
 *
 *  Licensed under the Apache License, Version 2.0. See LICENSE for details.
 *
 *  SPDX-License-Identifier: Apache-2.0
 * ----------------------------------------------------------------------------- */

.nomercyplayer {
	container-type: inline-size;
	position: relative;
	display: block;
	overflow: hidden;
	background-color: #000;

	video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		z-index: 0;
		outline: 0;
	}

	.overlay {
		position: absolute;
		inset: 0;
		z-index: 20;
		font-family: system-ui, sans-serif;
		color: #fff;
		pointer-events: none;
	}

	/* Disabling the plugin hides its whole overlay (a peer owns the screen). The
	* scoped .overlay selector outranks the UA `[hidden]` rule, so pin it here. */
	.overlay[hidden] {
		display: none;
	}

	/* ── Top bar ──────────────────────────────────────────────────────── */
	.top-bar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 16px 16px 48px 16px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
		pointer-events: none;
		transition:
			opacity 0.25s ease,
			transform 0.25s ease;
	}

	/* The user-agent `[hidden] { display: none }` rule loses to the
     * .top-bar-right specificity below, so setting `right.hidden = true`
     * from the plugin (hideTitle option) silently fails. Explicit override
     * at matching specificity. Applies to both columns so future hide-side
     * toggles work without surprises. */
	.top-bar-left[hidden],
	.top-bar-right[hidden] {
		display: none;
	}

	.top-bar-left {
		display: flex;
		align-items: center;
		pointer-events: auto;
	}

	.top-bar-right {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		align-items: flex-end;
		text-align: right;
		max-width: 60%;
	}

	.show-info {
		font-size: 0.88rem;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.75);
		margin-bottom: 2px;
	}

	.title {
		font-size: 1.05rem;
		font-weight: 700;
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
	}

	.back-btn,
	.cast-btn,
	.close-btn {
		pointer-events: auto;
		background: rgba(0, 0, 0, 0.35);
		border: none;
		color: #fff;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.18s ease;
		margin-right: 8px;
	}

	.back-btn:hover,
	.cast-btn:hover,
	.close-btn:hover {
		background: color-mix(in srgb, #fff 10%, rgba(0, 0, 0, 0.35));
	}

	.back-btn[hidden],
	.cast-btn[hidden],
	.close-btn[hidden] {
		display: none !important;
	}

	/* ── Center play button ──────────────────────────────────────────── */
	.center {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	.center-btn {
		pointer-events: auto;
		background: rgba(0, 0, 0, 0.45);
		border: none;
		color: #fff;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(2px);
		transition:
			background 0.18s ease,
			transform 0.18s ease,
			opacity 0.18s ease;
	}

	.center-btn:hover {
		background: color-mix(in srgb, #fff 10%, rgba(0, 0, 0, 0.45));
		transform: scale(1.08);
	}

	/* Center button is a one-shot affordance — visible until the user clicks
     * it (or any touch zone triggers play). Once dismissed it stays hidden
     * and the touch zones own play/pause. */
	.center.dismissed .center-btn {
		opacity: 0;
		pointer-events: none;
	}

	/* Buffering ring — sits inside the 80px center-btn with a small inset,
     * centered on the same point so it reads as a halo around the play icon.
     * Centering uses calc() offsets (not a translate) so the SVG's rotation
     * animation doesn't fight the spinner box's own transform. */
	.spinner {
		position: absolute;
		top: calc(50% - 36px);
		left: calc(50% - 36px);
		width: 72px;
		height: 72px;
		display: none;
		pointer-events: none;
	}

	.spinner svg {
		display: block;
		width: 100%;
		height: 100%;
		transform-origin: center;
		animation: nm-spin 0.9s linear infinite;
	}

	&.buffering .spinner {
		display: block;
	}

	/* ── Center status / toast line ──────────────────────────────────── */
	.player-message {
		position: absolute;
		top: 48px;
		left: 50%;
		transform: translateX(-50%);
		max-width: 80%;
		padding: 8px 16px;
		background: rgba(20, 22, 30, 0.85);
		color: #fff;
		font-size: 0.875rem;
		border-radius: 8px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
		z-index: 95;
	}

	.player-message.visible {
		opacity: 1;
	}

	/* ── Bottom bar (v1: bottom-bar > bottom-bar-shadow + top-row + bottom-row) ── */
	.bottom-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: center;
		margin-top: auto;
		width: 100%;
		z-index: 10;
		padding-bottom: 8px;
		pointer-events: none;
		transition:
			opacity 0.25s ease,
			transform 0.25s ease;
	}

	.bottom-bar > * {
		pointer-events: auto;
	}

	.bottom-bar-shadow {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100% + 24px);
		pointer-events: none;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
		z-index: 0;
	}

	.top-row {
		position: relative;
		display: flex;
		gap: 8px;
		align-items: center;
		height: 8px;
		padding: 0 24px;
		width: 100%;
		margin-top: 16px;
		z-index: 1;
	}

	.bottom-row {
		position: relative;
		display: flex;
		align-items: center;
		gap: 2px;
		height: 40px;
		padding: 4px 16px;
		width: 100%;
		z-index: 1;
	}

	/* ── slider-bar tree (v1) ────────────────────────────────────────── */
	.slider-bar {
		position: relative;
		display: flex;
		height: 8px;
		width: 100%;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 9999px;
		pointer-events: auto;
		cursor: pointer;
		transition: height 140ms ease-out;
	}

	/* Pointer devices grow when hovering anywhere in the top-row strip
     * (broader hit area than the bar itself) or while actively scrubbing. */
	@media (hover: hover) {
		.top-row:hover .slider-bar,
		.slider-bar.slider-scrubbing {
			height: 12px;
		}
	}

	.slider-bar.has-chapters {
		background: transparent;
	}

	.slider-buffer {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 9999px;
		overflow: hidden;
		pointer-events: none;
		z-index: 1;
	}

	.slider-hover {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 9999px;
		overflow: hidden;
		pointer-events: none;
		z-index: 0;
	}

	.slider-progress {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0;
		background: #fff;
		border-radius: 9999px;
		overflow: hidden;
		pointer-events: none;
		z-index: 10;
	}

	.slider-bar.has-chapters .slider-progress {
		display: none;
	}

	.slider-bar.has-chapters .slider-hover {
		display: none;
	}

	.slider-bar.has-chapters .slider-buffer {
		display: none;
	}

	.chapter-bar {
		position: absolute;
		inset: 0;
		height: 100%;
		display: flex;
		border-radius: 9999px;
		overflow: visible;
		pointer-events: none;
		z-index: 5;
	}

	.chapter-marker {
		position: absolute;
		top: 0;
		height: 100%;
		min-width: 2px;
		overflow: hidden;
		border-radius: 2px;
	}

	.chapter-marker-bg {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 2px;
		z-index: 0;
	}

	.chapter-marker-buffer {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.4);
		transform-origin: left;
		transform: scaleX(0);
		border-radius: 2px;
		z-index: 5;
		pointer-events: none;
	}

	.chapter-marker-hover {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(229, 231, 235, 1);
		transform-origin: left;
		transform: scaleX(0);
		border-radius: 2px;
		z-index: 10;
		pointer-events: none;
	}

	.chapter-marker-progress {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		transform-origin: left;
		transform: scaleX(0);
		border-radius: 2px;
		z-index: 20;
		pointer-events: none;
	}

	.slider-nipple {
		position: absolute;
		top: 0;
		left: 0;
		width: 16px;
		height: 16px;
		background: #fff;
		border-radius: 9999px;
		transform: translate(-50%, -25%);
		display: none;
		z-index: 30;
		pointer-events: none;
	}

	.slider-bar:hover .slider-nipple,
	.slider-bar.slider-scrubbing .slider-nipple {
		display: block;
		width: 24px;
		height: 24px;
		transform: translate(-50%, -25%);
	}

	.slider-pop {
		position: absolute;
		bottom: 24px;
		left: 0;
		transform: translateX(-50%);
		background: rgba(20, 20, 25, 0.95);
		border-radius: 6px;
		overflow: hidden;
		padding-bottom: 4px;
		display: flex;
		flex-direction: column;
		gap: 4px;
		text-align: center;
		pointer-events: none;
		z-index: 30;
		opacity: var(--visibility, 0);
		transition: opacity 0.12s ease;
		font-weight: 600;
		min-width: 60px;
	}

	.slider-pop-image {
		width: 0;
		height: 0;
		background-repeat: no-repeat;
		background-size: auto auto;
		margin: 0 auto;
	}

	.slider-pop-image[style*='background-image'] {
		margin: 6px 6px 0;
		border-radius: 3px;
		box-sizing: content-box;
	}

	.slider-pop-text {
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		font-size: 0.78rem;
		padding: 0 8px;
		color: #fff;
	}

	.chapter-text {
		font-size: 0.72rem;
		color: rgba(255, 255, 255, 0.75);
		padding: 0 8px;
	}

	.chapter-text:empty {
		display: none;
	}

	/* ── Round 40x40 createUiButton equivalent ───────────────────────── */
	.btn {
		cursor: pointer;
		fill: #fff;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		width: 40px;
		min-width: 40px;
		padding: 8px;
		border-radius: 9999px;
		background: transparent;
		border: 2px solid transparent;
		pointer-events: auto;
		position: relative;
		transition: transform 0.15s ease;
	}

	.btn:hover svg {
		transform: scale(1.1);
	}

	.btn:focus-visible {
		outline: 2px solid rgba(255, 255, 255, 0.5);
		outline-offset: -2px;
	}

	.btn[hidden] {
		display: none !important;
	}

	.btn[disabled] {
		/* Stay laid out so the bottom-row arrangement doesn't shift, but
     * make it clear the action isn't available right now. */
		opacity: 0.3;
		cursor: not-allowed;
		pointer-events: none;
	}

	.btn[disabled]:hover svg {
		transform: none;
	}

	.btn svg {
		transition: transform 0.18s ease;
		pointer-events: none;
	}

	/* Icon holder — keeps SVG swaps from wiping the sibling .tooltip span. */
	.btn-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	/* Filled / outlined path swap — every bottom-bar icon inverts on hover.
 * Hide the hover-variant path globally so menu/non-button icons stay clean;
 * .btn:hover opts in to the swap for the bottom-bar buttons. */
	.icon-hover {
		display: none;
	}

	.btn:hover .icon-normal,
	.btn.is-active .icon-normal {
		display: none;
	}

	.btn:hover .icon-hover,
	.btn.is-active .icon-hover {
		display: inline;
	}

	/* ── Volume container ────────────────────────────────────────────── */
	.volume-container {
		display: flex;
		align-items: center;
		overflow: visible;
		pointer-events: auto;
	}

	.volume-slider {
		appearance: none;
		width: 0;
		opacity: 0;
		height: 8px;
		background: linear-gradient(
			to right,
			#fff 0%,
			#fff var(--vol-pct, 100%),
			rgba(255, 255, 255, 0.3) var(--vol-pct, 100%)
		);
		border-radius: 9999px;
		cursor: pointer;
		align-self: center;
		transition:
			width 0.3s ease,
			opacity 0.3s ease,
			margin 0.3s ease,
			height 80ms ease-out;
	}

	.volume-container:hover .volume-slider,
	.volume-container:focus-within .volume-slider {
		width: 80px;
		opacity: 1;
		margin: 0 8px;
	}

	.volume-slider::-webkit-slider-thumb {
		appearance: none;
		width: 12px;
		height: 12px;
		/* Chromium: appearance:none thumbs center on track; nudge down slightly */
		margin-top: 2px;
		background: #fff;
		border-radius: 50%;
	}

	/* ── Vertical volume slider (popup above mute button) ───────────── */
	.volume-container {
		position: relative;
	}

	/* Hide the horizontal slider when vertical mode is active. */
	.volume-container-vertical .volume-slider {
		display: none;
	}

	.volume-slider-vertical {
		display: none;
		position: absolute;
		bottom: calc(100% + 8px);
		left: 50%;
		transform: translateX(-50%);
		background: rgba(20, 22, 30, 0.92);
		border-radius: 8px;
		padding: 12px 10px;
		z-index: 90;
		backdrop-filter: blur(4px);
		align-items: center;
		justify-content: center;
	}

	.volume-slider-vertical.volume-slider-vertical-open {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	.vol-popup-mute {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		background: transparent;
		border: none;
		color: rgba(255, 255, 255, 0.8);
		border-radius: 6px;
		cursor: pointer;
	}

	.vol-popup-mute:hover {
		color: #fff;
		background: rgba(255, 255, 255, 0.1);
	}

	.volume-slider-vertical-input {
		appearance: none;
		writing-mode: vertical-lr;
		direction: rtl;
		width: 4px;
		height: 80px;
		background: linear-gradient(
			to top,
			#fff 0%,
			#fff var(--vol-pct, 100%),
			rgba(255, 255, 255, 0.3) var(--vol-pct, 100%)
		);
		border-radius: 9999px;
		cursor: pointer;
	}

	.volume-slider-vertical-input::-webkit-slider-thumb {
		appearance: none;
		width: 12px;
		height: 12px;
		/* Chromium centers appearance:none thumbs — see horizontal slider. */
		background: #fff;
		border-radius: 50%;
	}

	/* ── Time labels ─────────────────────────────────────────────────── */
	.time {
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		user-select: none;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		font-size: 0.82rem;
		color: #ddd;
	}

	.current-time {
		margin-left: 8px;
	}

	.remaining-time {
		margin-right: 8px;
		pointer-events: auto;
		cursor: pointer;
		border-radius: 4px;
		padding: 0 4px;
		transition: background 0.15s ease;
	}

	.remaining-time:hover {
		background: rgba(255, 255, 255, 0.1);
	}

	.divider {
		display: flex;
		flex: 1;
		min-width: 16px;
	}

	/* ── Menu frame (v1) ─────────────────────────────────────────────── */
	.menu-frame-dialog {
		position: absolute;
		inset: 0;
		background: transparent;
		border: none;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		color: inherit;
		pointer-events: none;
		z-index: 50;
	}

	.menu-frame-dialog[open] {
		pointer-events: auto;
	}

	.menu-wrapper {
		position: absolute;
		inset: 0;
		pointer-events: none;
		color: #fff;
	}

	.menu-frame {
		position: absolute;
		top: 16px;
		right: 16px;
		bottom: 52px;
		display: none;
		flex-direction: column;
		height: auto;
		max-height: calc(100% - 2rem);
		max-width: min(52rem, calc(100% - 2rem));
		width: min-content;
		overflow: hidden;
		border-radius: 8px;
		z-index: 50;
	}

	.menu-frame.open {
		display: flex;
	}

	.menu-content {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		height: 100%;
		width: 100%;
		margin-top: auto;
		overflow: hidden;
	}

	.main-menu {
		background: rgba(20, 20, 25, 0.95);
		display: flex;
		flex-direction: column;
		gap: 4px;
		height: auto;
		max-height: 60vh;
		max-height: 60dvh;
		min-width: 16rem;
		margin-top: auto;
		overflow: hidden;
		border-radius: 8px;
		pointer-events: auto;
	}

	.menu-content.sub-menu-open .main-menu {
		display: none;
	}

	.sub-menu {
		background: rgba(20, 20, 25, 0.95);
		display: none;
		flex-direction: column;
		gap: 4px;
		height: auto;
		max-height: 100%;
		min-width: 16rem;
		margin-top: auto;
		overflow: hidden;
		border-radius: 8px;
		pointer-events: auto;
		width: 100%;
	}

	.menu-content.sub-menu-open .sub-menu {
		display: flex;
	}

	.menu-header {
		display: flex;
		align-items: center;
		min-height: 2.5rem;
		color: #fff;
		border-bottom: 1px solid rgba(209, 213, 219, 0.2);
		width: 100%;
		padding: 6px 6px 6px 6px;
		box-sizing: border-box;
		gap: 4px;
	}

	.menu-header .menu-button-text {
		font-weight: 600;
		flex: 1;
	}

	.menu-header-close,
	.menu-header-back {
		background: transparent;
		border: none;
		color: #fff;
		cursor: pointer;
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
	}

	.menu-header-close {
		margin-left: auto;
	}

	.menu-header-back:hover,
	.menu-header-close:hover {
		background: rgba(255, 255, 255, 0.08);
	}

	.menu-header > .menu-button-text:first-child {
		padding-left: 16px;
	}

	.language-button {
		width: 100%;
		height: 32px;
		padding: 4px 8px;
		display: flex;
		align-items: center;
		border-radius: 4px;
		background: transparent;
		border: 1px solid transparent;
		color: #fff;
		cursor: pointer;
		transition:
			background 0.18s ease,
			outline-color 0.18s ease;
		text-align: left;
		white-space: nowrap;
	}

	.language-button:hover {
		background: rgba(115, 115, 115, 0.5);
	}

	.language-button:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -2px;
	}

	.language-button.is-active {
		background: rgba(255, 255, 255, 0.2);
	}

	.language-button .menu-button-text {
		color: #fff;
		cursor: pointer;
		font-weight: 600;
		padding-left: 8px;
		display: flex;
		gap: 8px;
		line-height: normal;
	}

	.language-button .menu-button-icon-left {
		width: 20px;
		height: 20px;
		flex: 0 0 20px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.language-button .menu-button-chevron {
		width: 20px;
		height: 20px;
		flex: 0 0 20px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.language-button:not(:has(.menu-button-subtext)) .menu-button-chevron {
		margin-left: auto;
	}

	.language-button .menu-button-check {
		margin-left: auto;
		width: 20px;
		height: 20px;
		flex: 0 0 20px;
		display: none;
		color: #fff;
		align-items: center;
		justify-content: center;
	}

	.language-button.is-active .menu-button-check {
		display: inline-flex;
	}

	.language-button .menu-button-subtext {
		margin-left: 8px;
		color: rgba(255, 255, 255, 0.6);
		font-size: 10px;
		font-weight: 600;
		padding-right: 8px;
		white-space: nowrap;
		line-height: 100%;
		margin-left: auto;
	}

	/* Consumer-supplied action rows (e.g. "Search subtitles online…") append
	after a pane's own choices — a top divider sets them apart visually. */
	.language-button.menu-action-row {
		margin-top: 4px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.sub-menu-content {
		display: none;
		flex-direction: column;
		max-height: 60vh;
		max-height: 60dvh;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.sub-menu-content.is-open {
		display: flex;
	}

	.scroll-container {
		display: flex;
		flex-direction: column;
		gap: 4px;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 8px 0 8px 8px;
		transition: all 0.3s ease;
		width: 100%;
		max-height: 50vh;
		max-height: 50dvh;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
		scrollbar-gutter: stable;
	}

	/* ── Playlist sub-menu (two-pane, mirrors v1's createEpisodeMenu) ──────
 *   playlist-menu  (flex-row, gap:0)
 *     ├─ sub-menu-content.seasons-pane  (1/3 width, border-right)
 *     │   ├─ menu-header  (back / "Seasons" / close placeholder)
 *     │   └─ scroll-container  (season buttons; empty for movies)
 *     └─ episode-menu  (much wider — 63rem cap)
 *         ├─ menu-header-main  (close × only)
 *         └─ scroll-container  (rich-card episodes)
 *
 *   playlist-menu-button (each card)
 *     ├─ episode-menu-button-left
 *     │   ├─ episode-menu-button-image
 *     │   ├─ episode-menu-button-shadow
 *     │   └─ episode-menu-progress-container
 *     │       ├─ episode-menu-progress-box  (episode label + duration)
 *     │       └─ slider-container > progress-bar
 *     └─ playlist-card-right (title + overview)
 * ──────────────────────────────────────────────────────────────────── */
	#playlist-menu.playlist-menu {
		display: none;
		flex-direction: column;
		gap: 0;
		width: 100%;
		max-height: 60vh;
		max-height: 60dvh;
	}

	#playlist-menu.playlist-menu.is-open {
		display: flex;
	}

	.playlist-cols {
		display: flex;
		flex-direction: row;
		flex: 1;
		min-height: 0;
		overflow: hidden;
	}

	.seasons-pane {
		flex: 1;
		width: 100%;
		min-width: 16rem;
		border-right: 2px solid rgba(107, 114, 128, 0.2);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-height: 0;
	}

	.playlist-flat .seasons-pane {
		display: none;
	}

	.episode-menu {
		flex: 1;
		width: 100%;
		min-width: 36rem;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-height: 0;
	}

	.episode-menu .scroll-container {
		max-height: none;
		flex: 1;
	}

	/* ── Portrait playlist: full-viewport overlay ──────────────────────
     * In portrait the menu-frame expands to fill the available viewport
     * (inset 0 with bottom clearance for the control bar). The playlist
     * menu fills that frame vertically. Seasons and episodes stack into a
     * single scroll column. Touch targets on each card stay ≥ 44px. */
	&[data-orientation='portrait'] {
		/* Portrait full-viewport ONLY applies when the PLAYLIST sub-menu is
         * the active one (.is-open). Subtitle / audio / quality / speed / aspect
         * sub-menus keep their default popover sizing — they were fine.
         * Menu overlays the bottom bar too (no 56px reserve) for full real estate. */
		.menu-frame:has(.playlist-menu.is-open) {
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			max-width: 100%;
			width: 100%;
			max-height: 100%;
			height: 100%;
			border-radius: 0;
		}

		.playlist-menu.is-open {
			width: 100%;
			max-height: 100%;
			border-radius: 0;
		}

		#playlist-menu.playlist-menu {
			max-height: 100%;
			height: 100%;
		}

		.playlist-cols {
			flex-direction: column;
			overflow-y: auto;
			flex: 1;
			min-height: 0;
		}

		.seasons-pane {
			min-width: 0;
			border-right: none;
			border-bottom: 2px solid rgba(107, 114, 128, 0.2);
			min-height: 0;
			height: auto;
			overflow: visible;
			width: 100%;
		}

		.episode-menu {
			min-width: 0;
			min-height: 0;
			flex: 1;
			overflow-y: auto;
			width: 100%;
		}

		.episode-menu .scroll-container {
			max-height: none;
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 6px;
			padding: 8px 6px;
		}

		.playlist-menu-button {
			padding: 8px;
			gap: 10px;
			align-items: flex-start;
		}

		.episode-menu-button-left {
			width: 38%;
			flex-basis: 38%;
			min-width: 0;
			max-width: 180px;
			align-self: flex-start;
			aspect-ratio: 16 / 9;
		}

		.playlist-menu-button-overview {
			-webkit-line-clamp: 3;
			line-clamp: 3;
		}

		.playlist-menu-button-title {
			font-size: 0.95rem;
			margin-bottom: 4px;
		}
	}

	.playlist-menu-button {
		display: flex;
		gap: 8px;
		padding: 8px;
		border-radius: 8px;
		background: transparent;
		border: 1px solid transparent;
		color: #fff;
		cursor: pointer;
		transition: background 0.18s ease;
		text-align: left;
		width: 100%;
	}

	.playlist-menu-button:hover {
		background: rgba(115, 115, 115, 0.2);
	}

	.playlist-menu-button:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -2px;
	}

	.playlist-menu-button.is-active {
		background: rgba(255, 255, 255, 0.1);
	}

	.playlist-menu-button.is-active::before {
		content: '';
		position: absolute;
	}

	.episode-menu-button-left {
		position: relative;
		height: auto;
		overflow: hidden;
		border-radius: 6px;
		align-self: center;
		width: 37.5%;
		flex: 0 0 37.5%;
		aspect-ratio: 16 / 9;
		background: rgba(255, 255, 255, 0.05);
	}

	.episode-menu-button-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		aspect-ratio: 16 / 9;
	}

	.episode-menu-button-shadow {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.7) 25%,
			rgba(0, 0, 0, 0) 50%,
			rgba(0, 0, 0, 0) 100%
		);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.24),
			inset 0 -1px 0 rgba(0, 0, 0, 0.24),
			inset 0 -2px 0 rgba(0, 0, 0, 0.24);
		pointer-events: none;
	}

	.episode-menu-progress-container {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		padding: 0 12px;
	}

	.episode-menu-progress-box {
		display: flex;
		justify-content: space-between;
		height: auto;
		margin-bottom: 4px;
		padding: 0 4px;
	}

	.progress-item-text,
	.progress-duration {
		font-size: 0.7rem;
		color: rgba(255, 255, 255, 0.85);
	}

	.slider-container {
		background: rgba(107, 114, 128, 0.8);
		height: 4px;
		margin: 0 4px 8px;
		overflow: hidden;
		border-radius: 4px;
		display: none;
	}

	.slider-container.has-progress {
		display: flex;
	}

	.slider-container .progress-bar {
		background: #fff;
		height: 100%;
		width: 0;
		border-radius: 4px;
	}

	.playlist-card-right {
		display: flex;
		flex-direction: column;
		gap: 4px;
		pointer-events: none;
		text-align: left;
		width: 75%;
		flex: 1;
		min-width: 0;
	}

	.playlist-menu-button-title {
		font-weight: 700;
		color: #fff;
		line-height: 1.25;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.playlist-menu-button-overview {
		font-size: 0.7rem;
		line-height: 1rem;
		color: rgba(255, 255, 255, 0.8);
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.playlist-menu-button-watched {
		font-size: 0.65rem;
		color: rgba(255, 255, 255, 0.55);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* ── Active / inactive overlay states ─────────────────────────────── */
	&.active .top-bar,
	&.active .bottom-bar {
		opacity: 1;
		transform: translateY(0);
	}

	&.inactive .top-bar {
		opacity: 0;
		transform: translateY(-100%);
		pointer-events: none;
	}

	&.inactive .bottom-bar {
		opacity: 0;
		transform: translateY(100%);
		pointer-events: none;
	}

	/* ── Button tooltips ──────────────────────────────────────────────── */
	.tooltip {
		position: absolute;
		bottom: calc(100% + 8px);
		left: 50%;
		transform: translateX(-50%);
		background: rgba(20, 22, 30, 0.92);
		color: #fff;
		font-size: 0.75rem;
		line-height: 2;
		padding: 8px 16px;
		border-radius: 8px;
		white-space: nowrap;
		pointer-events: none;
		z-index: 100;
		opacity: 0;
		transition: opacity 0.15s ease;
		backdrop-filter: blur(4px);
	}

	.tooltip.tooltip-visible {
		opacity: 1;
	}

	.tooltip::after {
		content: '';
		position: absolute;
		top: 100%;
		left: var(--arrow-x, 50%);
		transform: translateX(-50%);
		border: 5px solid transparent;
		border-top-color: rgba(20, 22, 30, 0.92);
	}

	/* ── Keyboard shortcuts overlay ───────────────────────────────────── */
	#nmplayer-keybinds-dialog {
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
		overflow-y: auto;
	}

	/* ── Portrait orientation ─────────────────────────────────────────
     * Which buttons portrait hides is `DesktopUiOptions.portraitHidden`,
     * applied in JS by `applyAllVisibilityRules`. This used to be duplicated
     * here as `display: none !important` per id — "additive redundancy" for
     * the non-JS-resize path — but an !important rule the option can't reach
     * silently wins over it, so a consumer overriding the set got nothing.
     * One source of truth; JS owns it.                                */

	/* ── No-hover touch devices — suppress volume slider ──────────────
     * On (hover: none) devices the slider never expands and must be
     * hidden entirely. The volume button remains as a mute-toggle only. */
	&[data-no-hover] {
		.volume-slider {
			display: none !important;
		}

		.volume-container:hover .volume-slider,
		.volume-container:focus-within .volume-slider {
			display: none !important;
		}
	}
}

/* ── Container-query responsive layout (belt-and-suspenders alongside JS) ── */

/* xl / lg: full layout — no overrides needed. */

/* md (≤ 720 px): tighten padding, smaller time labels. */
@container (max-width: 720px) {
	.nomercyplayer {
		.bottom-row {
			padding: 4px 8px;
			gap: 0;
		}

		.top-row {
			padding: 0 12px;
		}

		.time {
			font-size: 0.75rem;
		}

		.volume-container:hover .volume-slider,
		.volume-container:focus-within .volume-slider {
			width: 60px;
		}
	}
}

/* sm (≤ 480 px): drop the remaining-time label, compress volume.
 * `current-time` survives: "where am I" is the one readout a viewer still needs
 * at this width, and the scrubber alone can't answer it. `remaining-time` goes
 * because the pair together costs ~100px the row doesn't have. */
@container (max-width: 480px) {
	.nomercyplayer {
		.remaining-time {
			display: none;
		}

		.volume-container:hover .volume-slider,
		.volume-container:focus-within .volume-slider {
			width: 48px;
		}

		.top-row {
			padding: 0 8px;
		}

		.bottom-row {
			padding: 4px 4px;
		}

		.title {
			font-size: 0.9rem;
		}
	}
}

/* xs (≤ 360 px): minimal layout — hide top bar text, minimal slider. */
@container (max-width: 360px) {
	.nomercyplayer {
		.show-info {
			display: none;
		}

		.title {
			font-size: 0.8rem;
		}

		.top-row {
			padding: 0 4px;
		}

		.bottom-row {
			gap: 0;
			padding: 2px 2px;
		}

		.volume-container:hover .volume-slider,
		.volume-container:focus-within .volume-slider {
			width: 32px;
		}
	}
}

@keyframes nm-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ── Touch-device hover suppression ──────────────────────────────────────
 * On (hover: none) devices the :hover state sticks AFTER a tap until the
 * user touches elsewhere. Override every hover-affecting selector so taps
 * don't leave buttons looking "permanently hovered". Active menu-open
 * markers (.is-open / .is-active) are explicitly preserved. */
@media (hover: none) {
	.nomercyplayer .back-btn:hover,
	.nomercyplayer .cast-btn:hover,
	.nomercyplayer .close-btn:hover,
	.nomercyplayer .center-btn:hover,
	.nomercyplayer .menu-header-back:hover,
	.nomercyplayer .menu-header-close:hover,
	.nomercyplayer .btn:hover,
	.nomercyplayer .remaining-time:hover {
		background: transparent !important;
	}

	.nomercyplayer .language-button:hover:not(.is-active) {
		background: transparent !important;
	}

	.nomercyplayer .playlist-menu-button:hover:not(.is-active) {
		background: transparent !important;
	}

	/* Bottom-bar icon swap (.icon-normal / .icon-hover) — keep the normal
     * variant visible on touch even after tap. The hover variant is the
     * "active feedback" only meant for real hover. */
	.nomercyplayer .btn:hover .icon-normal {
		display: inline-flex !important;
	}
	.nomercyplayer .btn:hover .icon-hover {
		display: none !important;
	}
}

/* ── Keyboard shortcuts overlay ──────────────────────────────────────────── */
.nomercyplayer {
	.keybinds-dialog {
		display: none;
		position: absolute;
		inset: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.85);
		align-items: center;
		justify-content: center;
		pointer-events: auto;

		&.keybinds-dialog-visible {
			display: flex;
		}

		.keybinds-card {
			background: rgba(20, 20, 25, 0.8);
			border-radius: 14px;
			padding: 24px 28px;
			position: relative;
			overflow: hidden;
		}

		.keybinds-heading {
			margin: 0 0 14px 0;
			font-size: 19px;
			font-weight: 600;
			text-align: center;
		}

		.keybinds-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 28px 60px;
		}

		.keybinds-column {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.keybinds-group-title {
			margin: 0 0 3px 0;
			font-size: 14px;
			font-weight: 600;
			color: rgba(255, 255, 255, 0.5);
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}

		.keybinds-row {
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			justify-content: space-between;
			padding: 3px 0;
			gap: 14px;
		}

		.keybinds-keys {
			display: flex;
			align-items: center;
			gap: 4px;
			white-space: nowrap;
		}

		.keybinds-plus {
			font-size: 12px;
			color: rgba(255, 255, 255, 0.4);
		}

		kbd.keybinds-key {
			background: rgba(255, 255, 255, 0.12);
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 5px;
			padding: 2px 7px;
			font-size: 13px;
			font-family: monospace;
			white-space: nowrap;
		}

		.keybinds-label {
			font-size: 14px;
			color: rgba(255, 255, 255, 0.85);
			text-align: left;
		}

		.keybinds-decoration {
			position: absolute;
			bottom: 48px;
			right: -114px;
			pointer-events: none;
			transform: rotate(-8deg);
			opacity: 0.04;
		}

		.keybinds-hint {
			margin: 12px 0 0 0;
			font-size: 13px;
			color: rgba(255, 255, 255, 0.35);
			text-align: center;
		}
	}
}