/*
 * Video player — block hopetv/episode-player, enhanced by assets/js/player.js.
 * Loaded where a player can be (inc/screens/player.php) and in the editor.
 *
 * Everything here hangs on .hc-player--js, the class the script adds once its
 * controls are built. Without the script the block is a native <video controls>
 * in the 16:9 frame of style.css (.hc-player).
 *
 * The player is dark in both themes: fixed colours, not the --hc-ink family.
 *
 *   .hc-player.hc-player--js   [is-controls is-playing is-started is-ended is-loading
 *                               is-error is-menu is-dragging is-muted is-quiet is-fullscreen]
 *     video
 *     .hc-player__ui
 *       .hc-player__surface    veil + .hc-player__big (yellow round play / replay)
 *       .hc-player__spinner
 *       .hc-player__toast
 *       .hc-player__bar        play · mute · volume · time · seek · duration · speed · quality · pip · fullscreen
 *       .hc-player__menu       --speed, --quality
 *       .hc-player__error
 *
 * No focus rings (build standard §4): keyboard focus is shown by a background.
 */

.hc-player--js {
	color: #fff;
	font-family: var(--hc-font-body);
	font-size: 13px;
	line-height: 1.2;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.hc-player--js video { object-fit: contain; background: #000; }
.hc-player--js [hidden] { display: none !important; }

.hc-player__ui { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.hc-player--js:not(.is-controls) .hc-player__ui { cursor: none; }

/* Buttons: bare. */
.hc-player__ui button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.hc-player__icon { display: block; width: 24px; height: 24px; flex: none; }

/* ---------- Picture: veil and the big button ---------- */
.hc-player__surface {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(10, 18, 32, .35);
	cursor: pointer;
	transition: background .2s;
}
.hc-player--js.is-playing .hc-player__surface { background: rgba(10, 18, 32, 0); }
.hc-player--js.is-playing:not(.is-controls) .hc-player__surface { cursor: none; }

/*
 * The disc is a fixed square in whole pixels: no font metrics, padding or
 * stretching can deform it, and it is never scaled. The triangle is an SVG
 * drawn around its centroid, centred by the grid.
 */
.hc-player__ui .hc-player__big {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	place-content: center;
	flex: none;
	width: 88px;
	height: 88px;
	min-width: 0;
	min-height: 0;
	max-width: none;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hc-yellow, #ffd133);
	color: var(--hc-navy, #0a1220);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	line-height: 0;
	font-size: 0;
	overflow: hidden;
	transition: opacity .2s, background .15s;
}
.hc-player__ui .hc-player__big:hover,
.hc-player__ui .hc-player__big:focus-visible { background: var(--hc-yellow-hover, #ffdc5c); }
.hc-player__big-icon { display: block; grid-area: 1 / 1; width: 48px; height: 48px; flex: none; }
.hc-player__big-icon--replay,
.hc-player--js.is-ended .hc-player__big-icon--play { display: none; }
.hc-player--js.is-ended .hc-player__big-icon--replay { display: block; }
.hc-player--js.is-playing .hc-player__big,
.hc-player--js.is-loading .hc-player__big,
.hc-player--js.is-error .hc-player__big {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity .2s, visibility 0s .2s;
}

/* ---------- Loading ---------- */
.hc-player__spinner {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, .25);
	border-top-color: var(--hc-yellow, #ffd133);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}
.hc-player--js.is-loading .hc-player__spinner { opacity: 1; animation: hc-player-spin .8s linear infinite; }
@keyframes hc-player-spin { to { transform: rotate(360deg); } }

/* ---------- Short message ---------- */
.hc-player__toast {
	position: absolute;
	left: 16px;
	bottom: 78px;
	max-width: calc(100% - 32px);
	padding: 9px 14px;
	border-radius: 10px;
	background: rgba(10, 18, 32, .92);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.hc-player__toast.is-on { opacity: 1; transform: none; }
.hc-player--js.is-error .hc-player__toast { display: none; }

/* ---------- Control bar ---------- */
.hc-player__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 44px 16px 12px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75));
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	visibility: hidden;
	transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.hc-player--js.is-controls .hc-player__bar {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
	transition: opacity .2s, transform .2s;
}
.hc-player--js.is-error .hc-player__bar { display: none; }

.hc-player__ui .hc-player__btn {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	flex: none;
	min-width: 40px;
	height: 40px;
	min-height: 0;
	line-height: 0;
	border-radius: 10px;
	transition: background .15s, color .15s;
}
.hc-player__ui .hc-player__btn:hover,
.hc-player__ui .hc-player__btn:focus-visible,
.hc-player__ui .hc-player__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.hc-player__ui .hc-player__btn[aria-expanded="true"] { color: var(--hc-yellow, #ffd133); }
.hc-player__ui .hc-player__btn--text { padding: 0 10px; line-height: 1; font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }

/* Icons that swap with the state. */
.hc-player__play .hc-player__icon--pause,
.hc-player__play .hc-player__icon--replay,
.hc-player--js.is-playing .hc-player__play .hc-player__icon--play,
.hc-player--js.is-ended .hc-player__play .hc-player__icon--play { display: none; }
.hc-player--js.is-playing .hc-player__play .hc-player__icon--pause,
.hc-player--js.is-ended .hc-player__play .hc-player__icon--replay { display: block; }

.hc-player__mute .hc-player__icon--low,
.hc-player__mute .hc-player__icon--off,
.hc-player--js.is-quiet .hc-player__mute .hc-player__icon--high,
.hc-player--js.is-muted .hc-player__mute .hc-player__icon--high { display: none; }
.hc-player--js.is-quiet .hc-player__mute .hc-player__icon--low,
.hc-player--js.is-muted .hc-player__mute .hc-player__icon--off { display: block; }

.hc-player__fs .hc-player__icon--exit,
.hc-player--js.is-fullscreen .hc-player__fs .hc-player__icon--enter { display: none; }
.hc-player--js.is-fullscreen .hc-player__fs .hc-player__icon--exit { display: block; }
.hc-player--js.is-pip .hc-player__pip { color: var(--hc-yellow, #ffd133); }

.hc-player__time { flex: none; min-width: 38px; padding: 0 4px; text-align: center; white-space: nowrap; }
.hc-player__time--dur { color: rgba(255, 255, 255, .75); }

/* Seek bar: a thin line, yellow for what is played. */
.hc-player__seek {
	position: relative;
	flex: 1 1 0;
	min-width: 60px;
	height: 24px;
	margin: 0 8px;
	cursor: pointer;
	touch-action: none;
	--p: 0%;
	--b: 0%;
	--h: 0%;
}
.hc-player__track {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .25);
	overflow: hidden;
	transition: height .15s, margin .15s;
}
.hc-player__seek:hover .hc-player__track,
.hc-player__seek:focus-visible .hc-player__track,
.hc-player--js.is-dragging .hc-player__track { height: 6px; margin-top: -3px; border-radius: 3px; }
.hc-player__buf,
.hc-player__fill { position: absolute; left: 0; top: 0; bottom: 0; }
.hc-player__buf { width: var(--b); background: rgba(255, 255, 255, .35); }
.hc-player__fill { width: var(--p); background: var(--hc-yellow, #ffd133); }
.hc-player__thumb {
	position: absolute;
	left: var(--p);
	top: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--hc-yellow, #ffd133);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
	transform: scale(0);
	transition: transform .15s;
}
.hc-player__seek:hover .hc-player__thumb,
.hc-player__seek:focus-visible .hc-player__thumb,
.hc-player--js.is-dragging .hc-player__thumb { transform: scale(1); }
.hc-player__bubble {
	position: absolute;
	left: clamp(22px, var(--h), calc(100% - 22px));
	bottom: 100%;
	margin-bottom: 4px;
	padding: 4px 8px;
	border-radius: 6px;
	background: rgba(10, 18, 32, .92);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transform: translateX(-50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
}
.hc-player__seek:hover .hc-player__bubble,
.hc-player--js.is-dragging .hc-player__bubble { opacity: 1; }

/* Volume. */
.hc-player__vol {
	position: relative;
	flex: none;
	width: 64px;
	height: 24px;
	margin: 0 6px 0 2px;
	cursor: pointer;
	touch-action: none;
	--v: 100%;
}
.hc-player__vol-track {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .25);
	overflow: hidden;
}
.hc-player__vol-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: #fff; }
.hc-player__vol-thumb {
	position: absolute;
	left: clamp(6px, var(--v), calc(100% - 6px));
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.hc-player__vol:focus-visible .hc-player__vol-thumb { background: var(--hc-yellow, #ffd133); }
/* Touch devices set the volume with their own keys. */
@media (hover: none), (pointer: coarse) {
	.hc-player__vol { display: none; }
}

/* ---------- Menus ---------- */
.hc-player__menu {
	position: absolute;
	right: 16px;
	bottom: 60px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 190px;
	max-width: calc(100% - 32px);
	max-height: calc(100% - 72px);
	padding: 6px;
	box-sizing: border-box;
	border-radius: 14px;
	background: rgba(10, 18, 32, .96);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .1);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.hc-player__menu-title {
	padding: 8px 12px 6px;
	color: rgba(255, 255, 255, .6);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hc-player__ui .hc-player__menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: none;
	width: 100%;
	min-height: 38px;
	padding: 0 8px 0 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: background .12s;
}
.hc-player__ui .hc-player__menu-item:hover,
.hc-player__ui .hc-player__menu-item:focus-visible { background: rgba(255, 255, 255, .12); }
.hc-player__menu-note { margin-left: 6px; color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.hc-player__menu-item .hc-player__icon--check { width: 20px; height: 20px; color: var(--hc-yellow, #ffd133); visibility: hidden; }
.hc-player__ui .hc-player__menu-item[aria-checked="true"] { color: var(--hc-yellow, #ffd133); font-weight: 700; }
.hc-player__menu-item[aria-checked="true"] .hc-player__icon--check { visibility: visible; }

/* ---------- Error ---------- */
.hc-player__error {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	background: rgba(10, 18, 32, .88);
	text-align: center;
	-webkit-user-select: text;
	user-select: text;
}
.hc-player__error-text { margin: 0; max-width: 420px; font-size: clamp(15px, 1.6vw, 18px); font-weight: 600; line-height: 1.4; }
.hc-player__ui .hc-player__retry {
	height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--hc-yellow, #ffd133);
	color: var(--hc-navy, #0a1220);
	font-size: 14px;
	font-weight: 800;
	transition: background .15s;
}
.hc-player__ui .hc-player__retry:hover,
.hc-player__ui .hc-player__retry:focus-visible { background: var(--hc-yellow-hover, #ffdc5c); }

/* ---------- Fullscreen: the wrapper fills the screen ---------- */
.hc-player--js:fullscreen {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	border-radius: 0;
}
.hc-player--js:-webkit-full-screen {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	border-radius: 0;
}

/* ---------- Narrow: the seek bar gets its own row above the buttons ---------- */
@media (max-width: 859px) {
	.hc-player__bar { flex-wrap: wrap; gap: 0 2px; padding: 36px 10px 6px; }
	.hc-player__seek { order: -1; flex: 0 0 calc(100% - 12px); margin: 0 6px; height: 22px; }
	.hc-player__vol { display: none; }
	.hc-player__time { min-width: 0; padding: 0; }
	.hc-player__time--cur { padding-left: 6px; }
	.hc-player__time--dur { margin-right: auto; }
	.hc-player__time--dur::before { content: "/"; padding: 0 4px; }
	.hc-player__ui .hc-player__btn { min-width: 38px; height: 38px; }
	.hc-player__ui .hc-player__btn--text { padding: 0 8px; }
	.hc-player__toast { left: 10px; bottom: 74px; max-width: calc(100% - 20px); font-size: 12px; }
	/* Menus may cover the bar: a small player has no room above it. */
	.hc-player__menu { right: 8px; bottom: 8px; max-height: calc(100% - 16px); min-width: 176px; gap: 1px; padding: 5px; }
	.hc-player__menu-title { padding: 5px 11px 3px; font-size: 10px; }
	.hc-player__ui .hc-player__menu-item { min-height: 32px; padding: 0 6px 0 11px; font-size: 13px; }
	.hc-player__spinner { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
	.hc-player__ui .hc-player__big { width: 64px; height: 64px; }
	.hc-player__big-icon { width: 36px; height: 36px; }
}