/* =====================================================================
   tv+ — an Apple TV–inspired streaming site (demo)
   Dark UI, glass nav, rounded carousel rows, pill buttons.
===================================================================== */

:root {
	--bg: #000000;
	--bg-elevated: #161617;
	--text: #f5f5f7;
	--text-secondary: rgba(255, 255, 255, 0.62);
	--text-tertiary: rgba(255, 255, 255, 0.4);
	--glass: rgba(255, 255, 255, 0.14);
	--glass-strong: rgba(28, 28, 30, 0.72);
	--hairline: rgba(255, 255, 255, 0.12);
	--accent-gradient: linear-gradient(92deg, #5ac8fa 0%, #7d7aff 38%, #bf5af2 68%, #ff6482 100%);
	--radius-card: 18px;
	--nav-height: 52px;
	--page-pad: clamp(20px, 4.5vw, 56px);
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
		"Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.01em;
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	border: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid #7d7aff;
	outline-offset: 3px;
	border-radius: 4px;
}

.page {
	padding-inline: var(--page-pad);
}

/* =====================================================================
   Nav — Apple's glass bar: dark blur, hairline, 12px links
===================================================================== */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--nav-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-inline: clamp(20px, 4.5vw, 56px);
	background: rgba(10, 10, 12, 0.35);
	backdrop-filter: saturate(180%) blur(22px);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	border-bottom: 1px solid transparent;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.nav.is-scrolled {
	background: var(--glass-strong);
	border-bottom-color: var(--hairline);
}

.brand {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
}

.brand .plus {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 600;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
	display: none;
}

.nav-links a {
	flex-shrink: 0;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.78);
	padding: 7px 13px;
	border-radius: var(--radius-pill);
	transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.nav-links a.is-active {
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
}

.nav-tools {
	display: flex;
	align-items: center;
	gap: 14px;
}

.icon-btn {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	transition: background 0.15s ease;
}

.icon-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.icon-btn svg {
	width: 17px;
	height: 17px;
}

.avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, #7d7aff, #ff6482);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.02em;
}

/* =====================================================================
   Hero billboard — ambient gradient art, eyebrow, big title, pills
===================================================================== */
.hero {
	position: relative;
	min-height: min(88vh, 860px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.hero-backdrop {
	position: absolute;
	inset: 0;
	background:
		/* stars */
		radial-gradient(2.2px 2.2px at 12% 22%, rgba(255,255,255,0.9), transparent 100%),
		radial-gradient(1.8px 1.8px at 28% 12%, rgba(255,255,255,0.7), transparent 100%),
		radial-gradient(2px 2px at 41% 30%, rgba(255,255,255,0.65), transparent 100%),
		radial-gradient(1.6px 1.6px at 57% 9%,  rgba(255,255,255,0.8), transparent 100%),
		radial-gradient(2.4px 2.4px at 66% 24%, rgba(255,255,255,0.75), transparent 100%),
		radial-gradient(1.7px 1.7px at 78% 14%, rgba(255,255,255,0.6), transparent 100%),
		radial-gradient(2.1px 2.1px at 88% 32%, rgba(255,255,255,0.85), transparent 100%),
		radial-gradient(1.5px 1.5px at 20% 44%, rgba(255,255,255,0.5), transparent 100%),
		radial-gradient(1.8px 1.8px at 72% 44%, rgba(255,255,255,0.55), transparent 100%),
		/* ambient glows */
		radial-gradient(1100px 620px at 78% 8%, rgba(124, 92, 255, 0.42), transparent 62%),
		radial-gradient(900px 520px at 12% 2%, rgba(80, 140, 255, 0.25), transparent 60%),
		radial-gradient(800px 500px at 88% 74%, rgba(255, 100, 130, 0.16), transparent 65%),
		radial-gradient(1300px 700px at 50% 118%, rgba(64, 60, 140, 0.4), transparent 70%),
		linear-gradient(180deg, #070812 0%, #0b0d1f 42%, #050510 100%);
}

/* planet horizon */
.hero-planet {
	position: absolute;
	left: 50%;
	bottom: -62%;
	width: 130%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background:
		radial-gradient(closest-side, rgba(148, 128, 255, 0.5), rgba(148, 128, 255, 0.12) 55%, transparent 72%),
		radial-gradient(closest-side, #14162e 62%, #1b1e42 78%, #232764 92%, #3d2f6e 100%);
	box-shadow: 0 -18px 120px -20px rgba(130, 110, 255, 0.55);
}

/* live TMDB backdrop fades in over the gradient scene */
.hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.7s ease;
}

.hero-image.is-loaded {
	opacity: 1;
}

.hero-backdrop.is-live .hero-planet {
	display: none;
}

.hero-backdrop.is-live {
	background: #05060c;
}

.hero-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, transparent 26%, transparent 52%, rgba(0, 0, 0, 0.72) 88%, #000 100%);
}

.hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 var(--page-pad) clamp(48px, 7vh, 76px);
	max-width: 860px;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 14px;
}

.eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-gradient);
}

.hero-title {
	font-size: clamp(44px, 8.5vw, 92px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.02;
	background: linear-gradient(180deg, #ffffff 30%, #c9c9ff 75%, #a99df5 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 12px;
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	margin-bottom: 14px;
}

.hero-meta .chip {
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}

.hero-meta .sep {
	color: var(--text-tertiary);
}

.hero-desc {
	max-width: 58ch;
	font-size: 16.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 26px;
	text-wrap: pretty;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 46px;
	padding: 0 28px;
	border-radius: var(--radius-pill);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.btn:active {
	transform: scale(0.97);
}

.btn-primary {
	background: #f5f5f7;
	color: #0a0a0c;
}

.btn-primary:hover {
	background: #ffffff;
}

.btn-glass {
	background: var(--glass);
	color: #fff;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.btn-glass:hover {
	background: rgba(255, 255, 255, 0.22);
}

.btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* =====================================================================
   Rows — horizontal snap scrollers with rounded tiles
===================================================================== */
.rows {
	padding-top: 44px;
	padding-bottom: 28px;
}

.row {
	margin-bottom: 46px;
}

.row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
}

.row-title {
	font-size: clamp(20px, 2.4vw, 25px);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #fff;
}

.row-title .count {
	font-weight: 500;
	color: var(--text-tertiary);
	font-size: 0.72em;
	margin-left: 8px;
}

.see-all {
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
}

.see-all:hover {
	color: #fff;
}

.row-scroller {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	/* headroom so the -6px hover lift never clips (layout-neutral) */
	padding-top: 12px;
	margin-top: -12px;
	padding-bottom: 14px;
	margin-inline: calc(var(--page-pad) * -1);
	padding-inline: var(--page-pad);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.row-scroller::-webkit-scrollbar {
	display: none;
}

.tile {
	position: relative;
	flex-shrink: 0;
	scroll-snap-align: start;
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.3s ease;
}

.tile:hover {
	transform: scale(1.035);
	box-shadow: 0 18px 46px -14px rgba(0, 0, 0, 0.85);
	z-index: 2;
}

/* landscape still tiles */
.tile-landscape {
	width: clamp(300px, 34vw, 430px);
	aspect-ratio: 16 / 9;
	background: #14141a;
}

/* live TMDB still fills the tile; .tile-art supplies the scrim + text */
.tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tile-art {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 18px 20px;
}

.tile-art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.62) 100%);
}

.tile-art > * {
	position: relative;
	z-index: 1;
}

.tile-title {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}

.tile-sub {
	font-size: 12.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.72);
	margin-top: 2px;
}

.tile-logo {
	position: absolute;
	top: 14px;
	left: 16px;
	z-index: 1;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(0, 0, 0, 0.34);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	padding: 4px 9px;
	border-radius: var(--radius-pill);
}

.tile-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 9px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.tile-badge .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-gradient);
}

.progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(255, 255, 255, 0.22);
	z-index: 2;
}

.progress i {
	display: block;
	height: 100%;
	background: #fff;
	border-radius: 0 3px 3px 0;
}

/* poster tiles */
.tile-poster {
	width: clamp(150px, 15.5vw, 196px);
	aspect-ratio: 2 / 3;
	background: #1a1a1e;
}

.tile-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tile-poster .tile-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 34px 14px 12px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.9));
}

.tile-poster .tile-title {
	font-size: 15.5px;
}

.tile-poster .tile-sub {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.65);
}

/* title and year/genre line on their own lines (they're inline spans) */
.tile-caption .tile-title,
.tile-caption .tile-sub {
	display: block;
}

.tile-caption .tile-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.25;
}

.tile-caption .tile-sub {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =====================================================================
   Spotlight strip — "tv+ Originals" full-bleed feature
===================================================================== */
.spotlight {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--radius-card) + 6px);
	margin-block: 10px 54px;
	min-height: 380px;
	display: flex;
	align-items: flex-end;
}

.spotlight-backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(2px 2px at 18% 30%, rgba(255,255,255,0.8), transparent 100%),
		radial-gradient(1.7px 1.7px at 34% 16%, rgba(255,255,255,0.6), transparent 100%),
		radial-gradient(2.3px 2.3px at 55% 26%, rgba(255,255,255,0.75), transparent 100%),
		radial-gradient(1.6px 1.6px at 74% 12%, rgba(255,255,255,0.6), transparent 100%),
		radial-gradient(2px 2px at 86% 34%, rgba(255,255,255,0.8), transparent 100%),
		radial-gradient(1000px 560px at 85% 0%, rgba(255, 140, 90, 0.4), transparent 60%),
		radial-gradient(900px 560px at 8% 100%, rgba(70, 60, 200, 0.5), transparent 62%),
		linear-gradient(160deg, #1c1030 0%, #0d0a1c 55%, #05040c 100%);
}

.spotlight-content {
	position: relative;
	z-index: 1;
	padding: clamp(28px, 5vw, 52px);
	max-width: 620px;
}

.spotlight-content .eyebrow {
	color: #ffb98a;
}

.spotlight-title {
	font-size: clamp(30px, 4.6vw, 52px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin-bottom: 10px;
}

.spotlight-desc {
	color: rgba(255, 255, 255, 0.8);
	font-size: 15.5px;
	margin-bottom: 22px;
	max-width: 46ch;
}

/* =====================================================================
   Footer — Apple's quiet small-link columns, dark
===================================================================== */
.footer {
	background: var(--bg-elevated);
	border-top: 1px solid var(--hairline);
	margin-top: 30px;
}

.footer-inner {
	padding-block: 42px 26px;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	max-width: 860px;
}

.footer-heading {
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 12px;
}

.footer-grid ul {
	list-style: none;
	display: grid;
	gap: 9px;
}

.footer-grid a {
	font-size: 12.5px;
	color: var(--text-secondary);
}

.footer-grid a:hover {
	color: #fff;
	text-decoration: underline;
}

.footer-legal {
	margin-top: 34px;
	padding-top: 18px;
	border-top: 1px solid var(--hairline);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	font-size: 11.5px;
	color: var(--text-tertiary);
}

.footer-legal .brand {
	font-size: 14px;
}

/* =====================================================================
   Tile art gradients (each show gets its own ambient scene)
===================================================================== */
.g-nebula      { background: radial-gradient(420px 260px at 72% 18%, rgba(150,110,255,0.55), transparent 62%), radial-gradient(500px 300px at 12% 90%, rgba(255,100,140,0.28), transparent 60%), linear-gradient(150deg, #191636, #0a0918 70%); }
.g-lighthouse  { background: radial-gradient(380px 240px at 50% 8%, rgba(140,220,255,0.5), transparent 60%), linear-gradient(180deg, #0e2233, #050b13 75%); }
.g-velocity    { background: radial-gradient(460px 260px at 82% 70%, rgba(255,90,60,0.5), transparent 62%), linear-gradient(140deg, #2a0f14, #0d0508 70%); }
.g-static      { background: radial-gradient(420px 240px at 20% 20%, rgba(120,255,220,0.32), transparent 60%), linear-gradient(160deg, #101c1c, #05090a 72%); }
.g-golden      { background: radial-gradient(480px 280px at 50% 0%, rgba(255,190,90,0.5), transparent 62%), linear-gradient(180deg, #2b1c0d, #0f0904 72%); }
.g-motorist    { background: radial-gradient(420px 260px at 78% 24%, rgba(255,60,90,0.4), transparent 60%), radial-gradient(380px 220px at 10% 80%, rgba(80,60,220,0.35), transparent 62%), linear-gradient(150deg, #160c22, #070510 70%); }
.g-cartographer{ background: radial-gradient(440px 260px at 30% 16%, rgba(110,200,255,0.42), transparent 62%), linear-gradient(155deg, #0e1c30, #060a12 72%); }
.g-neon        { background: radial-gradient(400px 240px at 70% 76%, rgba(255,70,160,0.5), transparent 60%), radial-gradient(360px 220px at 20% 12%, rgba(70,230,255,0.3), transparent 62%), linear-gradient(145deg, #1c0b1e, #0a040d 70%); }
.g-letters     { background: radial-gradient(460px 280px at 50% 6%, rgba(255,205,140,0.42), transparent 62%), linear-gradient(180deg, #22303e, #0a0f16 74%); }
.g-comet       { background: radial-gradient(420px 240px at 24% 70%, rgba(150,220,120,0.34), transparent 60%), radial-gradient(400px 240px at 82% 14%, rgba(90,160,255,0.3), transparent 62%), linear-gradient(150deg, #0e1a18, #05090c 72%); }
.g-understudy  { background: radial-gradient(420px 250px at 50% 12%, rgba(220,120,255,0.4), transparent 62%), linear-gradient(175deg, #1d1226, #080610 74%); }
.g-wolf        { background: radial-gradient(460px 260px at 76% 20%, rgba(190,210,255,0.3), transparent 62%), radial-gradient(420px 260px at 14% 84%, rgba(40,220,180,0.22), transparent 62%), linear-gradient(155deg, #101a24, #05080d 72%); }

/* =====================================================================
   Categories — pill strip + browse row
===================================================================== */
.cat-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.cat-pill {
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 10px 20px;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.cat-pill:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.cat-pill.is-active {
	background: #f5f5f7;
	border-color: #f5f5f7;
	color: #0a0a0c;
}

.browse-title {
	font-size: 19px;
	margin-top: 14px;
}

.browse-loading {
	color: var(--text-secondary);
	font-size: 14px;
	padding: 26px 4px;
}

/* =====================================================================
   Navbar search — inline field + live dropdown (search-as-you-type)
===================================================================== */
.nav-search {
	display: none;
	align-items: center;
	gap: 12px;
	flex: 1;
	max-width: 720px;
	min-width: 0;
}

.nav.is-searching .nav-search {
	display: flex;
}

.nav.is-searching .brand,
.nav.is-searching .nav-links,
.nav.is-searching #search-open {
	display: none;
}

.nav-search-field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}

.nav-search-field > svg {
	position: absolute;
	left: 13px;
	width: 15px;
	height: 15px;
	color: var(--text-tertiary);
	pointer-events: none;
}

.nav-search-field input {
	width: 100%;
	height: 38px;
	padding: 0 42px 0 37px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	outline: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.nav-search-field input:focus {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.12);
}

.nav-search-field input::placeholder {
	color: var(--text-tertiary);
}

.nav-search-clear {
	position: absolute;
	right: 6px;
	width: 28px;
	height: 28px;
	color: var(--text-tertiary);
}

.nav-search-clear:hover {
	color: #fff;
}

.nav-search-clear svg {
	width: 15px;
	height: 15px;
}

.nav-search-cancel {
	background: none;
	border: 0;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	padding: 6px 2px;
	white-space: nowrap;
}

.nav-search-cancel:hover {
	color: #fff;
}

/* dropdown panel under the navbar */
#search-dropdown {
	position: fixed;
	top: var(--nav-height);
	left: 0;
	right: 0;
	z-index: 150;
	pointer-events: none;
}

#search-dropdown.is-open {
	pointer-events: auto;
}

#search-dropdown[hidden] {
	display: none;
}

.search-dropdown-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 10px var(--page-pad) 0;
}

.search-dropdown-panel {
	background: rgba(22, 22, 24, 0.94);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
	overflow: hidden;
}

#search-list {
	list-style: none;
	margin: 0;
	padding: 6px;
	max-height: min(62vh, 520px);
	overflow-y: auto;
}

.search-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.search-opt:hover,
.search-opt.is-active {
	background: rgba(255, 255, 255, 0.08);
}

.opt-thumb {
	width: 40px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	background: #26262b;
	flex-shrink: 0;
}

.opt-thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
}

.opt-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.opt-title {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.opt-title .hl {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 700;
	font-style: normal;
}

.opt-meta {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
}

.opt-type {
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 0 5px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.8);
	flex-shrink: 0;
}

.search-opt .opt-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: var(--text-tertiary);
}

.search-recent-row .opt-text {
	flex-direction: row;
	align-items: center;
}

.search-seeall {
	border-top: 1px solid var(--hairline);
	margin-top: 4px;
	padding: 13px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
}

.search-seeall:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.search-seeall .hl {
	color: #fff;
	font-weight: 700;
}

.search-hint,
.search-noresults {
	padding: 18px 14px;
	text-align: center;
	font-size: 13.5px;
	color: var(--text-tertiary);
}

.search-noresults strong {
	color: var(--text-secondary);
	font-weight: 600;
}

.search-recent-clear {
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-tertiary);
	cursor: pointer;
	padding: 4px;
}

.search-recent-clear:hover {
	color: #fff;
}

/* loading skeleton */
.search-skeleton {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
}

.sk-thumb,
.sk-line {
	background: linear-gradient(100deg, #202024 40%, #2d2d33 50%, #202024 60%);
	background-size: 200% 100%;
	animation: sk-shimmer 1.2s linear infinite;
}

.sk-thumb {
	width: 40px;
	height: 56px;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

.sk-lines {
	flex: 1;
	display: grid;
	gap: 8px;
}

.sk-line {
	height: 10px;
	border-radius: var(--radius-pill);
}

.sk-line:first-child {
	width: 55%;
}

.sk-line:last-child {
	width: 35%;
}

@keyframes sk-shimmer {
	to {
		background-position: -200% 0;
	}
}

/* =====================================================================
   Full search results page
===================================================================== */
.search-page {
	display: none;
	padding-block: calc(var(--nav-height) + 44px) 40px;
	min-height: 72vh;
}

body.search-mode .search-page {
	display: block;
}

body.search-mode .hero,
body.search-mode .rows {
	display: none;
}

.search-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}

.search-page-head .btn {
	height: 38px;
	padding: 0 18px;
	font-size: 13.5px;
}

/* =====================================================================
   Ambient hover backdrop — cinematic glow + trailer behind the UI.
   Fixed layer sits above the black page background, below all content.
   Visual values (opacity, blur, timing) are driven from ambient.js CONFIG.
===================================================================== */
#ambient-root {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.ambient-layer {
	position: absolute;
	inset: -12%;
	background-size: cover;
	background-position: center 20%;
	transform: scale(1.2);
	filter: blur(80px) saturate(1.4) brightness(0.6);
	opacity: 0;
	will-change: opacity;
	transition-property: opacity;
	transition-timing-function: ease-out;
	transition-duration: 550ms;
}

.ambient-layer.is-visible {
	/* glowOpacity in ambient.js CONFIG */
	opacity: 0.55;
}

.ambient-tint {
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 55% at 50% 42%, rgba(124, 92, 255, 0.4), transparent 72%);
	opacity: 0;
	transition: opacity 550ms ease-out;
	will-change: opacity;
}

.ambient-video {
	position: absolute;
	inset: -40px; /* bleed so the blur has no dark fringe */
	filter: blur(3px);
	opacity: 0;
	transition: opacity 600ms ease-out;
	will-change: opacity;
}

.ambient-video.is-visible {
	/* videoOpacity in ambient.js CONFIG */
	opacity: 0.42;
}

.ambient-video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100vh;
	border: 0;
	pointer-events: none;
}

.ambient-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.22) 0%,
		rgba(0, 0, 0, 0.5) 55%,
		rgba(0, 0, 0, 0.94) 100%
	);
}

/* content stays above the ambience */
main,
.footer {
	position: relative;
	z-index: 1;
}

/* hovered card lifts + glows in its poster color; the rest dim slightly */
.tile.is-ambient-hot {
	transform: translateY(-6px) scale(1.04);
	box-shadow:
		0 22px 54px -12px var(--ambient-glow, rgba(0, 0, 0, 0.8)),
		0 0 0 1px rgba(255, 255, 255, 0.08);
	z-index: 5;
}

body.ambient-active .row-scroller .tile:not(.is-ambient-hot) {
	opacity: 0.6;
}

/* mute/unmute toggle — only visible while a trailer plays */
#ambient-mute {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 300;
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(28, 28, 30, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--hairline);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

#ambient-mute.is-visible {
	display: inline-flex;
}

#ambient-mute:hover {
	background: rgba(60, 60, 64, 0.85);
	transform: scale(1.06);
}

#ambient-mute svg {
	width: 18px;
	height: 18px;
}

#ambient-mute .icon-sound {
	display: none;
}

#ambient-mute.is-muted .icon-muted {
	display: block;
}

#ambient-mute.is-muted .icon-sound {
	display: none;
}

#ambient-mute:not(.is-muted) .icon-muted {
	display: none;
}

#ambient-mute:not(.is-muted) .icon-sound {
	display: block;
}

/* =====================================================================
   Full search results page — poster grid
===================================================================== */
#search-page-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 3vw, 36px);
	row-gap: 40px;
}

#search-page-grid .tile-poster .tile-caption {
	padding: 34px 14px 12px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.9));
}

.search-page .empty-state {
	text-align: center;
	padding-block: 40px 20px;
}

.search-page .empty-state h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 8px;
}

.search-page .empty-state p {
	color: var(--text-secondary);
}

/* =====================================================================
   Detail page — ambient banner, poster + info, cast, seasons, episodes
===================================================================== */
.detail-page,
.watch-page {
	display: none;
	min-height: 100vh;
}

body.detail-mode .detail-page {
	display: block;
}

body.watch-mode .watch-page {
	display: block;
}

body.detail-mode .hero,
body.detail-mode .rows,
body.detail-mode .search-page,
body.watch-mode .hero,
body.watch-mode .rows,
body.watch-mode .search-page,
body.watch-mode .detail-page,
body.detail-mode .watch-page {
	display: none !important;
}

.page-fade {
	animation: page-fade 260ms ease;
}

@keyframes page-fade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

.detail-hero {
	position: relative;
	height: clamp(280px, 44vh, 460px);
	overflow: hidden;
}

.detail-hero-bg {
	position: absolute;
	inset: -8%;
	background-size: cover;
	background-position: center 20%;
	transform: scale(1.15);
	filter: blur(46px) saturate(1.3) brightness(0.55);
}

.detail-hero-bg.g-wolf,
.detail-hero-bg.g-golden,
.detail-hero-bg.g-static,
.detail-hero-bg.g-nebula,
.detail-hero-bg.g-neon,
.detail-hero-bg.g-cartographer {
	filter: none;
	transform: none;
}

.detail-hero-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 55%, #000 100%);
}

.detail-body {
	position: relative;
	z-index: 1;
}

.detail-layout {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: clamp(28px, 4vw, 52px);
	align-items: start;
	padding-top: 30px;
}

.detail-poster {
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-soft, 0 12px 32px -16px rgba(0, 0, 0, 0.7));
}

.detail-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.detail-poster.poster-art {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
	text-align: center;
}

.detail-poster.poster-art span {
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.3;
}

.detail-title {
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	margin-bottom: 4px;
}

.detail-alt {
	font-size: 13.5px;
	color: var(--text-secondary);
	margin-bottom: 14px;
}

.detail-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--text-secondary);
	margin-bottom: 14px;
}

.genre-chip {
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

.genre-chip:hover {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.detail-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	font-size: 14px;
	color: var(--text-secondary);
	margin-bottom: 20px;
}

.detail-rating .rating-badge {
	background: var(--accent-gradient);
	color: #fff;
	font-weight: 700;
	border-radius: var(--radius-pill);
	padding: 6px 12px;
}

.detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 22px;
}

.detail-actions .btn svg {
	width: 14px;
	height: 14px;
}

.my-list-btn.is-in-list {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.detail-synopsis {
	max-width: 68ch;
}

.synopsis-text {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.detail-synopsis.is-open .synopsis-text {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	display: block;
}

.read-more {
	background: none;
	border: 0;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0;
}

.read-more:hover {
	color: #fff;
}

.detail-heading {
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 700;
	margin: 44px 0 16px;
}

/* resume banner */
.resume-banner {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 18px;
	margin-bottom: 34px;
	border-radius: var(--radius-md);
	background: linear-gradient(90deg, rgba(125, 122, 255, 0.16), rgba(255, 100, 130, 0.08) 60%, rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(125, 122, 255, 0.35);
	transition: transform 0.18s ease, border-color 0.18s ease;
}

.resume-banner:hover {
	transform: translateY(-2px);
	border-color: rgba(125, 122, 255, 0.6);
}

.resume-thumb {
	position: relative;
	width: 128px;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}

.resume-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.resume-epnum {
	position: absolute;
	left: 8px;
	bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.resume-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1;
}

.resume-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #a99df5;
}

.resume-text strong {
	font-size: 16.5px;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.resume-text .ep-progress {
	max-width: 380px;
}

.resume-left {
	font-size: 12.5px;
	color: var(--text-secondary);
}

.resume-btn {
	flex-shrink: 0;
}

/* thin progress line — under episode thumbnails + resume banner */
.ep-progress {
	display: block;
	height: 4px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.16);
	overflow: hidden;
	margin-top: 6px;
}

.ep-progress i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--accent-gradient);
}

/* cast */
.cast-row {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	padding-bottom: 14px;
	margin-inline: calc(var(--page-pad) * -1);
	padding-inline: var(--page-pad);
	scrollbar-width: none;
}

.cast-row::-webkit-scrollbar {
	display: none;
}

.cast-card {
	flex-shrink: 0;
	width: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.cast-photo {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	background: #26262b;
	border: 2px solid var(--hairline);
}

.cast-photo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.55);
}

.cast-name {
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
	line-height: 1.3;
}

.cast-character {
	font-size: 11.5px;
	color: var(--text-tertiary);
	line-height: 1.3;
}

/* season tabs + episode list */
.season-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.season-tab {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 8px 18px;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.season-tab:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.season-tab.is-active {
	background: #f5f5f7;
	border-color: #f5f5f7;
	color: #0a0a0c;
}

.episode-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.episode-row .ep-link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.episode-row .ep-link:hover {
	background: rgba(255, 255, 255, 0.06);
}

.episode-row.is-resume .ep-link {
	background: rgba(125, 122, 255, 0.12);
	border-color: rgba(125, 122, 255, 0.35);
}

.ep-media {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 168px;
}

.ep-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ep-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ep-num {
	position: relative;
	z-index: 1;
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.ep-check {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 1;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ep-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ep-line1 {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.ep-line1 strong {
	font-size: 14.5px;
	color: #fff;
}

.ep-duration {
	font-size: 12px;
	color: var(--text-tertiary);
	white-space: nowrap;
}

.ep-desc {
	font-size: 12.5px;
	color: var(--text-secondary);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.episode-list.is-compact .ep-link {
	padding: 8px 10px;
}

.episode-list.is-compact .ep-media {
	width: 128px;
}

.episode-list.is-compact .ep-desc {
	display: none;
}

/* more-like-this poster grid */
.poster-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(16px, 2.5vw, 28px);
	row-gap: 30px;
	margin-bottom: 20px;
}

.detail-notfound {
	padding-block: calc(var(--nav-height) + 120px);
}

/* =====================================================================
   Watch page — player placeholder + episode context
===================================================================== */
.watch-page {
	background: #000;
}

.watch-body {
	padding-top: calc(var(--nav-height) + 28px);
	padding-bottom: 60px;
}

.watch-topbar {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px;
}

.watch-titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.watch-titles strong {
	font-size: 18px;
	color: #fff;
}

.watch-titles span {
	font-size: 13px;
	color: var(--text-secondary);
}

.player-slot {
	max-width: 980px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border: 2px dashed rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-card);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	font-size: 15px;
	background: rgba(255, 255, 255, 0.03);
}

/* Embed player (config.js PLAYER_MODE: "embed") */
.player-slot.has-embed {
	border: 0;
	background: #000;
	overflow: hidden;
	position: relative;
}

.embed-layer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.embed-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.embed-msg {
	margin: 0;
	padding: 0 24px;
	text-align: center;
	color: var(--text-secondary);
	font-size: 15px;
}

.sk-slot {
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.06);
}

.watch-note {
	text-align: center;
	color: var(--text-secondary);
	font-size: 13.5px;
	margin-top: 14px;
}

.watch-controls {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 22px;
}

.watch-controls .btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.watch-controls .btn:disabled:hover {
	background: var(--glass);
	border-color: var(--hairline);
	color: #fff;
}

.watch-body .episode-list {
	max-width: 760px;
	margin: 0 auto;
}

/* detail/watch skeletons */
.sk-poster {
	width: 100%;
	aspect-ratio: 2 / 3;
	height: auto;
	border-radius: var(--radius-card);
}

.sk-detail {
	flex: 1;
}

.sk-hero {
	height: clamp(280px, 44vh, 460px);
	border-radius: 0;
}

.detail-skeleton .sk-thumb,
.detail-skeleton .sk-line {
	background: linear-gradient(100deg, #18181b 40%, #232328 50%, #18181b 60%);
	background-size: 200% 100%;
	animation: sk-shimmer 1.2s linear infinite;
}

/* =====================================================================
   Theme system hooks — every color flows from :root variables so themes
   and per-title palettes work everywhere. (Overrides earlier hardcodes.)
===================================================================== */
:root {
	--bg: #000000;
	--bg-elevated: #161617;
	--surface: #1c1c1f;
	--accent: #7d7aff;
	--accent2: #ff6482;
	--accent-gradient: linear-gradient(92deg, #5ac8fa, #7d7aff, #bf5af2, #ff6482);
	--text: #f5f5f7;
	--text-secondary: rgba(255, 255, 255, 0.62);
	--hairline: rgba(255, 255, 255, 0.12);
	--dock-tint: rgba(28, 28, 30, 0.72);
	--text-on-accent: #0a0a0c;

	/* radius tokens — single source for softness across the site */
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-pill: 999px;
	--radius-card: 20px; /* cards land in the spec's 20–24px band */
}

body {
	background: var(--bg);
	color: var(--text);
	transition: background-color 500ms ease, color 500ms ease;
}

body:not(.watch-mode) {
	padding-bottom: 118px; /* keep the dock clear of content */
}

body.watch-mode {
	padding-bottom: 0;
}

.btn-primary {
	background: var(--text);
	color: var(--bg);
	border-color: var(--text);
}

.btn-primary:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--text-on-accent);
}

.site-footer {
	background: var(--bg-elevated);
}

.rating-badge {
	background: var(--accent-gradient);
}

.cat-pill.is-active,
.season-tab.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--text-on-accent);
}

.progress i,
.ep-progress i {
	background: var(--accent-gradient);
}

.search-dropdown-panel {
	background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
}

/* light-mode surface overrides */
body.light-mode .nav {
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	border-bottom-color: var(--hairline);
}

body.light-mode .btn-glass,
body.light-mode .dock-item:hover {
	background: rgba(0, 0, 0, 0.07);
}

body.light-mode .nav-search-field input {
	background: rgba(0, 0, 0, 0.06);
}

body.light-mode .icon-btn,
body.light-mode .nav-search-cancel,
body.light-mode .see-all,
body.light-mode .read-more {
	color: var(--text-secondary);
}

body.light-mode .avatar {
	color: var(--bg);
}

/* =====================================================================
   Floating dock (macOS-style)
===================================================================== */
.dock-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 250;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transition: transform 0.32s ease, opacity 0.32s ease;
}

.dock-wrap.is-hidden {
	transform: translateY(150%);
	opacity: 0;
}

.dock-inner {
	display: flex;
	align-items: flex-end; /* magnified icons grow upward */
	gap: 6px;
}

.dock {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 13px;
	border-radius: var(--radius-lg);
	background: var(--dock-tint);
	backdrop-filter: blur(24px) saturate(1.6);
	-webkit-backdrop-filter: blur(24px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.65);
	position: relative;
}

/* glossy top highlight */
.dock::before {
	content: "";
	position: absolute;
	inset: 1px 1px 52% 1px;
	border-radius: var(--radius-sm) var(--radius-sm) 50% 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.dock-item {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	background: transparent;
	border: 0;
	cursor: pointer;
	will-change: transform;
}

.dock-item svg {
	width: 22px;
	height: 22px;
}

.dock-item:hover {
	background: rgba(255, 255, 255, 0.09);
}

.dock-item:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.dock-dot {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.dock-item.is-active .dock-dot {
	opacity: 1;
}

.dock-tip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.85);
	border: 1px solid var(--hairline);
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease 0.1s;
}

.dock-item:hover .dock-tip,
.dock-item:focus-visible .dock-tip {
	opacity: 1;
}

.dock-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	border-radius: var(--radius-sm);
	background: var(--accent-gradient);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

.dock-badge[hidden] {
	display: none;
}

.dock-item.is-on {
	color: var(--accent);
}

.dock-item.is-on::after {
	content: "ON";
	position: absolute;
	top: -5px;
	right: -7px;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	background: var(--accent);
	color: var(--text-on-accent);
	border-radius: var(--radius-pill);
	padding: 1px 4px;
}

.dock-reflection {
	transform: scaleY(-1);
	opacity: 0.05;
	filter: blur(1.5px);
	pointer-events: none;
	height: 44px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(0deg, transparent 30%, rgba(0, 0, 0, 0.7));
	mask-image: linear-gradient(0deg, transparent 30%, rgba(0, 0, 0, 0.7));
	display: flex;
	justify-content: center;
}

.dock-reflection .dock-inner {
	display: flex;
	gap: 6px;
	padding: 9px 13px;
	border-radius: var(--radius-lg);
	flex-shrink: 0;
}

.dock-sheet {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	gap: 4px;
	padding: 8px;
	border-radius: var(--radius-md);
	background: var(--dock-tint);
	backdrop-filter: blur(24px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

/* =====================================================================
   Theme decorations (floating original shapes, behind content)
===================================================================== */
#theme-decorations {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.decor {
	position: absolute;
	display: block;
	animation: decor-float ease-in-out infinite alternate;
}

.decor-circle {
	border-radius: 50%;
	background: linear-gradient(180deg, var(--accent) 50%, var(--accent2) 50%);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.decor-leaf {
	border-radius: 0 60% 0 60%;
	background: var(--accent);
}

.decor-petal {
	border-radius: 60% 0 60% 0;
	background: var(--accent2);
}

.decor-spark {
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	background: var(--accent);
	border-radius: 0;
}

.decor-wave {
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: var(--accent2);
}

@keyframes decor-float {
	from {
		transform: translateY(24px) rotate(-8deg);
	}
	to {
		transform: translateY(-70px) rotate(24deg);
	}
}

/* =====================================================================
   Language block + toasts + modals
===================================================================== */
.lang-block {
	margin: 2px 0 18px;
}

.lang-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	position: relative;
}

.lang-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}

.lang-globe {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--hairline);
	color: var(--text-secondary);
	cursor: pointer;
}

.lang-globe:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.lang-popover {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	min-width: 240px;
	padding: 10px;
	border-radius: var(--radius-sm);
	background: var(--bg-elevated);
	border: 1px solid var(--hairline);
	box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
}

.lang-pop-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
	margin: 6px 6px;
}

.lang-pop-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 7px 8px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
	text-align: left;
}

.lang-pop-item:hover {
	background: rgba(255, 255, 255, 0.07);
}

.lang-pop-item.is-preferred {
	color: var(--accent);
	font-weight: 600;
}

.lang-pop-item.is-muted {
	color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
	cursor: default;
}

.lang-tag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 1px 6px;
	color: var(--text-secondary);
}

.lang-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lang-chip {
	font-size: 12.5px;
	color: var(--text-secondary);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	padding: 4px 10px;
}

.lang-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 3px 7px;
	backdrop-filter: blur(6px);
}

#toast-stack {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 96px;
	z-index: 400;
	display: grid;
	gap: 8px;
	justify-items: center;
}

.toast {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	background: var(--dock-tint);
	backdrop-filter: blur(20px) saturate(1.5);
	border: 1px solid var(--hairline);
	box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.7);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.is-in {
	opacity: 1;
	transform: translateY(0);
}

.toast-msg {
	font-size: 13.5px;
	color: var(--text);
}

.toast-action {
	background: none;
	border: 0;
	color: var(--accent);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
}

.toast-close {
	background: none;
	border: 0;
	color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
	font-size: 11px;
	cursor: pointer;
	padding: 2px;
}

/* PIN + theme modals */
.pin-overlay,
.theme-overlay {
	position: fixed;
	inset: 0;
	z-index: 500;
	background: rgba(0, 0, 0, 0.66);
	backdrop-filter: blur(18px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.pin-modal,
.theme-modal {
	width: 100%;
	max-width: 460px;
	background: var(--bg-elevated);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	padding: 26px;
	box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.8);
}

.pin-modal h3,
.theme-modal-head h3 {
	font-size: 19px;
	margin-bottom: 8px;
	color: var(--text);
}

.pin-modal p {
	color: var(--text-secondary);
	font-size: 13.5px;
	margin-bottom: 14px;
}

.pin-input {
	width: 100%;
	height: 46px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	font-family: inherit;
	font-size: 20px;
	letter-spacing: 0.5em;
	text-align: center;
	outline: none;
}

.pin-input:focus {
	border-color: var(--accent);
}

.pin-error {
	color: #ff6b6b;
	font-size: 12.5px;
	min-height: 18px;
	margin-top: 6px;
}

.pin-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 12px;
}

.theme-modal {
	max-width: 720px;
	max-height: 84vh;
	overflow-y: auto;
}

.theme-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.theme-sub {
	color: var(--text-secondary);
	font-size: 13.5px;
	margin-bottom: 14px;
}

.theme-note {
	color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}

.light-toggle {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--text-secondary);
	margin-bottom: 18px;
	cursor: pointer;
}

.light-toggle input {
	accent-color: var(--accent);
	width: 16px;
	height: 16px;
}

.theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: 14px;
}

.theme-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border-radius: var(--radius-md);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.theme-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.theme-card.is-current {
	border-color: var(--accent);
}

.tp-preview {
	display: flex;
	gap: 5px;
}

.tp-swatch {
	height: 34px;
	flex: 1;
	border-radius: var(--radius-sm);
}

.tp-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.tp-current {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--accent);
	text-transform: uppercase;
}

.tp-mood {
	font-size: 11.5px;
	color: var(--text-secondary);
}

/* season dropdown (>4 seasons) */
.detail-heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 44px 0 16px;
}

.detail-heading-row .detail-heading {
	margin: 0;
}

.season-dropdown {
	position: relative;
}

.season-dropdown-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	padding: 9px 16px;
	cursor: pointer;
}

.season-dropdown-btn:hover {
	border-color: rgba(255, 255, 255, 0.35);
}

.season-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 40;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 6px;
	border-radius: var(--radius-sm);
	background: var(--bg-elevated);
	border: 1px solid var(--hairline);
	box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
}

.season-menu li {
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	color: var(--text);
	cursor: pointer;
}

.season-menu li:hover {
	background: rgba(255, 255, 255, 0.08);
}

.season-menu li[aria-selected="true"] {
	color: var(--accent);
	font-weight: 600;
}

.season-count {
	font-size: 12.5px;
	color: var(--text-secondary);
	margin: -8px 0 16px;
}

/* my list page */
.mylist-page,
.family-blocked {
	display: none;
}

/* fallback art for tiles without posters (mock titles) */
.poster-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
}

.poster-fallback span {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.9);
}

body.mylist-mode .mylist-page {
	display: block;
	padding-top: calc(var(--nav-height, 52px) + 40px);
	min-height: 72vh;
}

body.mylist-mode .hero,
body.mylist-mode .rows,
body.mylist-mode .search-page,
body.mylist-mode .detail-page,
body.mylist-mode .watch-page {
	display: none !important;
}

body.detail-mode .mylist-page,
body.watch-mode .mylist-page,
body.search-mode .mylist-page {
	display: none !important;
}

.mylist-sort {
	display: flex;
	gap: 8px;
}

.mylist-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--hairline);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.mylist-tile:hover .mylist-remove,
.mylist-remove:focus-visible {
	opacity: 1;
}

/* per-title palette scope on the detail page */
.detail-page {
	position: relative;
	transition: background-color 500ms ease;
}

.detail-page::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 72vh;
	background: radial-gradient(62% 52% at 50% 0%, var(--bg-tint, transparent), transparent 72%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 500ms ease;
	z-index: 0;
}

.detail-page.has-palette::before {
	opacity: 1;
}

.detail-page .btn-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--text-on-accent);
}

.detail-page .btn-primary:hover {
	background: var(--accent);
	filter: brightness(1.1);
}

.detail-page :focus-visible {
	outline-color: var(--accent);
}

.detail-page .genre-chip:hover,
.detail-page .read-more:hover {
	color: var(--accent);
}

.detail-page .ep-progress i,
.detail-page .resume-text .ep-progress i {
	background: linear-gradient(90deg, var(--accent), var(--accent-soft, var(--accent2)));
}

.detail-page .resume-banner {
	border-color: var(--accent-soft, rgba(125, 122, 255, 0.35));
	background: linear-gradient(90deg, var(--accent-soft, rgba(125, 122, 255, 0.16)), rgba(255, 255, 255, 0.03));
}

.detail-page .resume-kicker {
	color: var(--accent);
}

/* detail banner trailer */
.detail-hero-trailer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 700ms ease;
	overflow: hidden;
}

.detail-hero-trailer.is-live {
	opacity: 1;
}

.detail-hero-trailer iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100vw, 177.78vh);
	height: max(56.25vw, 100vh);
	border: 0;
	pointer-events: none;
}

.detail-mute-btn {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid var(--hairline);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(8px);
}

.detail-mute-btn.is-visible {
	display: inline-flex;
}

.detail-mute-btn .ic-muted {
	display: block;
}

.detail-mute-btn .ic-sound {
	display: none;
}

.detail-mute-btn.is-unmuted .ic-muted {
	display: none;
}

.detail-mute-btn.is-unmuted .ic-sound {
	display: block;
}

.detail-mute-btn svg {
	width: 17px;
	height: 17px;
}

body.watch-mode .dock-wrap {
	display: none;
}

/* =====================================================================
   Responsive
===================================================================== */
@media (max-width: 640px) {
	.hero {
		min-height: 78vh;
	}

	.hero-desc {
		font-size: 15px;
	}

	/* mobile dock: full-width bottom tab bar */
	.dock-wrap {
		left: 0;
		right: 0;
		bottom: 0;
	}

	.dock {
		width: 100%;
		border-radius: 0;
		justify-content: space-around;
		padding: 7px 2px;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}

	.dock::before {
		border-radius: 0;
	}

	.dock-item {
		width: 52px;
		height: 44px;
	}

	.dock-reflection {
		display: none;
	}

	.dock-tip {
		display: none;
	}

	/* search: full-width dropdown under the input */
	.search-dropdown-inner {
		padding-inline: 12px;
	}

	#search-list {
		max-height: 70vh;
	}

	.nav-search {
		max-width: none;
	}

	/* detail/watch: stacked layouts */
	.detail-layout {
		grid-template-columns: 1fr;
	}

	.detail-poster {
		max-width: 210px;
	}

	.resume-banner {
		flex-wrap: wrap;
	}

	.episode-row .ep-link {
		flex-direction: column;
		align-items: stretch;
	}

	.episode-row .ep-media {
		width: 100%;
	}

	.poster-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.btn {
		height: 44px;
		padding: 0 22px;
		font-size: 15px;
	}

	.tile-landscape {
		width: 82vw;
	}

	.tile-poster {
		width: 128px;
	}

	#search-page-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
		row-gap: 26px;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.nav-tools .icon-btn.hide-sm {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
		scroll-behavior: auto;
	}

	/* Ambient feature: keep only the simple poster glow — no video, no lift. */
	.tile.is-ambient-hot {
		transform: none;
	}

	#ambient-root .ambient-video,
	#ambient-mute {
		display: none !important;
	}
}

/* =====================================================================
   Community / chat / feed / DMs / parties / eye comfort
   (new-page styles use the radius tokens from :root)
===================================================================== */
.container {
	padding-inline: var(--page-pad);
	max-width: 1400px;
	margin-inline: auto;
}

.community-page,
.hashtag-page,
.trending-page,
.messages-page,
.party-page {
	display: none;
	min-height: 100vh;
}

body.community-mode .community-page { display: block; }
body.hashtag-mode .hashtag-page { display: block; }
body.trending-mode .trending-page { display: block; }
body.messages-mode .messages-page { display: block; }
body.party-mode .party-page { display: block; }

body.community-mode .hero,
body.community-mode .rows,
body.community-mode .search-page,
body.community-mode .detail-page,
body.community-mode .watch-page,
body.community-mode .mylist-page,
body.hashtag-mode .hero,
body.hashtag-mode .rows,
body.hashtag-mode .search-page,
body.hashtag-mode .detail-page,
body.trending-mode .hero,
body.trending-mode .rows,
body.trending-mode .search-page,
body.trending-mode .detail-page,
body.messages-mode .hero,
body.messages-mode .rows,
body.messages-mode .search-page,
body.messages-mode .detail-page,
body.party-mode .hero,
body.party-mode .rows,
body.party-mode .search-page,
body.party-mode .detail-page,
body.party-mode .watch-page,
body.party-mode .mylist-page {
	display: none !important;
}

.community-hero {
	position: relative;
	height: clamp(220px, 32vh, 340px);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}

.community-hero-inner {
	position: relative;
	z-index: 1;
	padding-bottom: 26px;
	width: 100%;
}

.community-hero h1 {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	margin: 14px 0 10px;
}

.community-word {
	color: var(--text-secondary);
	font-weight: 500;
}

.community-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: var(--text-secondary);
	margin-bottom: 16px;
}

.community-members {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.member-tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius-pill);
	padding: 2px 10px;
}

.community-rules {
	font-size: 12.5px;
	color: var(--text-secondary);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	margin-bottom: 22px;
}

.community-tabs {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid var(--hairline);
	margin-bottom: 24px;
	overflow-x: auto;
	scrollbar-width: none;
}

.community-tabs::-webkit-scrollbar { display: none; }

.community-tab {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	padding: 10px 16px;
	cursor: pointer;
	text-transform: capitalize;
	flex: 0 0 auto; /* never shrink — swipe horizontally instead */
	white-space: nowrap;
}

.community-tab:hover { color: var(--text); }

.community-tab.is-active {
	color: var(--text);
	border-bottom-color: var(--accent);
}

.chatrooms-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 22px;
	align-items: start;
}

.room-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.room-list-head h3 { font-size: 15px; margin: 0; }

.room-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.room-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
	text-align: left;
}

.room-item:hover { border-color: rgba(255, 255, 255, 0.3); }
.room-item.is-active { border-color: var(--accent); background: var(--accent-soft, rgba(125,122,255,0.12)); }

.room-lock { font-size: 11px; }

.room-tag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text-secondary);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 1px 7px;
}

.room-tag.is-selected {
	color: var(--text-on-accent, #fff);
	background: var(--accent);
	border-color: var(--accent);
}

.room-unread {
	margin-left: auto;
	min-width: 18px;
	height: 18px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--text-on-accent, #fff);
	font-size: 10.5px;
	font-weight: 700;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

.room-unread.is-visible { display: inline-flex; }

.room-private {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--text-secondary);
	margin-top: 12px;
}

.room-private input { accent-color: var(--accent); }

.room-tags-input { display: flex; gap: 8px; margin-top: 12px; cursor: pointer; }

.chat-box {
	position: relative; /* anchors the emoji picker + jump-to-latest inside the box */
	display: flex;
	flex-direction: column;
	height: 520px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.03);
	overflow: hidden;
}

.chat-box.is-compact { height: 380px; }

.chat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--hairline);
	flex-wrap: wrap;
}

.chat-head strong { font-size: 14.5px; }

.chat-room-desc {
	font-size: 12.5px;
	color: var(--text-secondary);
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-online { font-size: 11.5px; color: var(--text-tertiary, rgba(255,255,255,0.4)); }

.chat-messages {
	list-style: none;
	margin: 0;
	padding: 14px;
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.chat-msg { display: flex; gap: 10px; max-width: 88%; }

.chat-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }

.chat-avatar, .chat-msg .cast-photo-sm {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.chat-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.chat-bubble-wrap { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.chat-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; }

.chat-meta strong { color: var(--text); font-size: 12.5px; }

.chat-time { color: rgba(255,255,255,0.35); font-size: 11px; }

.role-badge {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	border-radius: var(--radius-pill);
	padding: 1px 7px;
}

.role-owner { background: var(--accent-gradient); color: #fff; }
.role-mod { background: rgba(255,255,255,0.12); color: var(--text-secondary); }

.chat-reply {
	display: block;
	font-size: 11.5px;
	color: var(--text-secondary);
	border-left: 2px solid var(--hairline);
	padding-left: 8px;
	margin-bottom: 2px;
}

.chat-bubble {
	background: rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-md);
	padding: 9px 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text);
	word-break: break-word;
}

.chat-msg.is-mine .chat-bubble {
	background: var(--accent-soft, rgba(125,122,255,0.16));
	border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-md);
}

.spoiler {
	background: rgba(255, 255, 255, 0.25);
	color: transparent;
	border-radius: 4px;
	padding: 0 4px;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.spoiler.is-revealed {
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	user-select: auto;
}

.chat-msg-actions { display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s ease; }

.chat-msg:hover .chat-msg-actions,
.chat-msg:focus-within .chat-msg-actions { opacity: 1; }

.chat-act {
	background: none;
	border: 0;
	font-size: 12px;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 6px;
}

.chat-act:hover { background: rgba(255,255,255,0.1); color: var(--text); }

.chat-reactions-row { display: flex; gap: 6px; flex-wrap: wrap; }

.chat-reaction {
	font-size: 11.5px;
	background: rgba(255,255,255,0.08);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 2px 8px;
	cursor: pointer;
	color: var(--text);
	font-family: inherit;
}

.chat-reaction.is-mine { border-color: var(--accent); background: var(--accent-soft, rgba(125,122,255,0.2)); }

.chat-typing {
	min-height: 18px;
	padding: 0 16px 6px;
	font-size: 11.5px;
	color: rgba(255,255,255,0.4);
	font-style: italic;
}

.chat-inputbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--hairline);
}

.chat-emoji {
	background: none;
	border: 0;
	font-size: 18px;
	cursor: pointer;
	padding: 4px;
}

.chat-input {
	flex: 1;
	min-width: 0;
	height: 38px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	font-family: inherit;
	font-size: 13.5px;
	padding: 0 16px;
	outline: none;
}

.chat-input:focus { border-color: var(--accent); }

.chat-send {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 0;
	background: var(--accent);
	color: var(--text-on-accent, #fff);
	font-size: 15px;
	cursor: pointer;
	flex-shrink: 0;
}

.member-search {
	width: 100%;
	max-width: 380px;
	height: 40px;
	margin-bottom: 18px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--hairline);
	background: rgba(255,255,255,0.06);
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	padding: 0 18px;
	outline: none;
}

.member-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 20px;
}

.member-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background: rgba(255,255,255,0.03);
	text-align: center;
}

.member-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

.member-actions .btn { height: 30px; padding: 0 12px; font-size: 11.5px; }

.member-report {
	background: none;
	border: 0;
	color: rgba(255,255,255,0.4);
	font-size: 12px;
	cursor: pointer;
}

.member-report:hover { color: #ff6b6b; }

.feed-compose {
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background: rgba(255,255,255,0.03);
	padding: 14px;
	margin-bottom: 26px;
}

.compose-text {
	width: 100%;
	background: transparent;
	border: 0;
	outline: none;
	resize: none;
	color: var(--text);
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.5;
}

.compose-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.compose-count { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.4); }

.compose-img {
	background: none;
	border: 0;
	font-size: 16px;
	cursor: pointer;
	padding: 4px;
}

.compose-img-preview {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--text-secondary);
	border: 1px dashed var(--hairline);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
}

.feed-list { display: grid; gap: 16px; max-width: 680px; }

.post-card {
	display: flex;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background: rgba(255,255,255,0.03);
}

.cast-photo-sm { width: 40px; height: 40px; }

.post-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }

.post-head { display: flex; align-items: baseline; gap: 10px; }

.post-head strong { font-size: 14px; color: var(--text); }

.post-text { font-size: 14.5px; line-height: 1.55; color: var(--text); }

.hashtag { color: var(--accent); font-weight: 600; }
.hashtag:hover { text-decoration: underline; }

.mention { color: var(--accent2); font-weight: 600; }

.post-actions { display: flex; gap: 18px; margin-top: 4px; }

.post-act {
	background: none;
	border: 0;
	font-size: 12.5px;
	color: var(--text-secondary);
	cursor: pointer;
	font-family: inherit;
	padding: 2px 4px;
	border-radius: 6px;
}

.post-act:hover { color: var(--text); background: rgba(255,255,255,0.06); }

.post-act.is-on { color: var(--accent); }

.post-report { margin-left: auto; opacity: 0.5; }

.post-replies { display: grid; gap: 6px; border-top: 1px solid var(--hairline); padding-top: 8px; }

.post-reply { font-size: 12.5px; color: var(--text-secondary); }

.post-reply strong { color: var(--text); }

.trend-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	border: 1px solid var(--hairline);
	background: rgba(255,255,255,0.03);
	margin-bottom: 10px;
	transition: border-color 0.15s ease;
}

.trend-row:hover { border-color: var(--accent); }

.trend-rank {
	font-family: Georgia, serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--accent);
	width: 24px;
	text-align: center;
	flex-shrink: 0;
}

.trend-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }

.trend-score { font-size: 12.5px; color: var(--text-secondary); }

.trend-delta.up { color: #6ee7a0; }
.trend-delta.down { color: #ff8f8f; }

.trending-filters { display: flex; gap: 8px; margin-bottom: 22px; }

.community-side {
	margin-top: 34px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	padding: 16px;
	background: rgba(255,255,255,0.03);
}

.community-side .trend-row { background: transparent; }

.dm-page-wrap {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 22px;
	padding-top: calc(var(--nav-height, 52px) + 40px);
	min-height: 80vh;
}

.dm-inbox {
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	padding: 16px;
	background: rgba(255,255,255,0.03);
	height: fit-content;
}

.dm-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	margin-bottom: 6px;
	transition: background 0.15s ease;
}

.dm-row:hover, .dm-row.has-unread { background: rgba(255,255,255,0.05); }

.dm-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.dm-meta strong { font-size: 13.5px; color: var(--text); }

.dm-last {
	font-size: 12px;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dm-unread {
	min-width: 19px;
	height: 19px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--text-on-accent, #fff);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dm-chat {
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background: rgba(255,255,255,0.03);
	display: flex;
	flex-direction: column;
	height: 560px;
}

.dm-drawer {
	position: fixed;
	right: 20px;
	top: 64px;
	z-index: 450;
	width: 320px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 14px;
	border-radius: var(--radius-md);
	background: var(--dock-tint);
	backdrop-filter: blur(24px) saturate(1.6);
	border: 1px solid var(--hairline);
	box-shadow: 0 30px 70px -18px rgba(0,0,0,0.75);
}

.dm-drawer h3 { font-size: 15px; margin: 0 0 10px; color: var(--text); }

#dm-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	border-radius: var(--radius-pill);
	background: var(--accent-gradient);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

#dm-badge[hidden] { display: none; }

#dm-open { position: relative; }

.party-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 22px;
	align-items: start;
}

.party-slot { position: relative; overflow: hidden; }

.party-reactions {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.party-float {
	position: absolute;
	bottom: 12px;
	font-size: 30px;
	animation: party-float-up 2.5s ease-out forwards;
}

@keyframes party-float-up {
	to {
		transform: translateY(-190px) scale(1.4) rotate(12deg);
		opacity: 0;
	}
}

.party-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.party-emoji { display: flex; gap: 4px; }

.party-emoji button {
	background: rgba(255,255,255,0.07);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	font-size: 16px;
	padding: 4px 9px;
	cursor: pointer;
}

.party-emoji button:hover { transform: scale(1.15); }

.party-code { color: var(--accent); letter-spacing: 0.12em; }

.party-side { display: flex; flex-direction: column; gap: 4px; }

.party-people { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }

.party-person {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: var(--radius-md);
	background: rgba(255,255,255,0.04);
}

.party-person span { font-size: 13px; color: var(--text); }

.live-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--accent);
	border-radius: var(--radius-pill);
	padding: 4px 12px;
	animation: live-pulse 2s ease infinite;
}

@keyframes live-pulse {
	50% { opacity: 0.7; }
}

.ready-box {
	max-width: 640px;
	margin: 18px auto 0;
	text-align: center;
	padding: 12px;
	border-radius: var(--radius-md);
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--hairline);
	color: var(--text);
	font-size: 14px;
}

.eye-comfort-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.eye-comfort-btn {
	position: relative;
}

.eye-comfort-btn.has-filter::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

.eye-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 300;
	width: 320px;
	padding: 16px;
	border-radius: var(--radius-md);
	background: var(--dock-tint);
	backdrop-filter: blur(24px) saturate(1.6);
	border: 1px solid var(--hairline);
	box-shadow: 0 30px 70px -18px rgba(0,0,0,0.75);
}

.eye-presets { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

.eye-preset {
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
	background: rgba(255,255,255,0.08);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 5px 13px;
	cursor: pointer;
}

.eye-preset:hover { border-color: var(--accent); color: var(--accent); }

.eye-row {
	display: grid;
	grid-template-columns: 90px 1fr 46px;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.eye-row label { font-size: 12.5px; color: var(--text-secondary); }

.eye-row input[type="range"] { width: 100%; accent-color: var(--accent); }

.eye-val { font-size: 12px; color: var(--text); text-align: right; }

.eye-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--hairline);
}

.eye-reset {
	background: none;
	border: 0;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12.5px;
	cursor: pointer;
	text-decoration: underline;
}

.eye-auto {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--text-secondary);
	cursor: pointer;
}

.eye-auto input { accent-color: var(--accent); }

body.watch-mode .dock-wrap { display: none; }

@media (max-width: 720px) {
	.chatrooms-layout,
	.party-layout,
	.dm-page-wrap {
		grid-template-columns: 1fr;
	}

	.chat-box { height: 440px; }
	.dm-chat { height: 440px; }
	.member-grid { grid-template-columns: repeat(2, 1fr); }
	.detail-heading-row { flex-wrap: wrap; }
}

/* home trending widget + comfort wrap + community badge */
.home-trending {
	margin: 26px 0 10px;
	max-width: 560px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	padding: 18px;
	background: rgba(255, 255, 255, 0.03);
}

body:not(.home-visible) .home-trending { display: none; }

.player-comfort-wrap {
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.player-comfort-wrap .player-slot {
	max-width: none;
	border-radius: 0;
	border: 0;
}

.watch-page-controls {
	max-width: 980px;
	margin: 14px auto 0;
	display: flex;
	justify-content: flex-end;
	position: relative; /* anchors the Eye Comfort popover to the controls bar */
}

.eye-comfort-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto; /* override .icon-btn's fixed 34px circle */
	height: 36px;
	white-space: nowrap;
	padding: 0 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.eye-comfort-btn:hover {
	color: var(--text);
	border-color: rgba(255, 255, 255, 0.35);
}

.community-count-badge {
	background: var(--accent);
	color: var(--text-on-accent, #fff);
	border-radius: var(--radius-pill);
	font-size: 11px;
	padding: 1px 8px;
	margin-left: 4px;
}

/* ---------- Hashtag / trending archive headers (were missing) ---------- */
.hashtag-page,
.trending-page {
	padding-block: calc(var(--nav-height, 52px) + 44px) 40px;
}

.archive-head {
	margin-bottom: 20px;
}

.archive-title {
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	color: var(--text);
}

.archive-desc {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0 0 10px;
}

.trend-tags,
.trend-shows {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px;
	align-content: start;
}

.trend-tags .trend-row,
.trend-shows .trend-row { margin-bottom: 0; }

.trending-filters + .detail-heading { margin-top: 26px; }

/* ---------- Chat: emoji picker, image attach, jump-to-latest, mod tools ---- */
.chat-emoji-pop {
	position: absolute;
	bottom: 64px; /* sits just above the input bar, inside the rounded box */
	left: 8px;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
	padding: 10px;
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md); /* inner element of the chat box */
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
	z-index: 30;
}

.chat-emoji-pop button {
	background: none;
	border: 0;
	font-size: 19px;
	line-height: 1.4;
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 3px 5px;
}

.chat-emoji-pop button:hover { background: rgba(255, 255, 255, 0.1); }

.chat-attach-btn { font-size: 15px; }

.chat-attach-note {
	font-size: 12px;
	color: var(--text-secondary);
	border: 1px dashed var(--hairline);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
	margin-bottom: 8px;
}

.chat-attach-thumb {
	display: block;
	width: 100%;
	max-width: 260px;
	height: 110px;
	border-radius: var(--radius-sm);
	background: var(--accent-gradient);
	opacity: 0.85;
	margin-bottom: 4px;
}

.chat-jump {
	position: absolute;
	right: 18px;
	bottom: 74px;
	height: 32px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	color: var(--text);
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
	z-index: 5;
}

.chat-jump[hidden] { display: none; }

.chat-invite {
	margin-left: auto;
	background: none;
	border: 1px solid var(--hairline);
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.chat-invite:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }

/* ---------- Member mini profile card ---------- */
.profile-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.profile-card {
	width: min(360px, 92vw);
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(26px);
	backdrop-filter: blur(26px);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	padding: 22px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.profile-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.profile-card-head .cast-photo { width: 54px; height: 54px; font-size: 22px; }

.profile-card h3 { margin: 0; font-size: 17px; color: var(--text); }

.profile-bio { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 12px; }

.profile-favs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.profile-fav-chip {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--text);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 3px 10px;
}

.profile-shared { font-size: 12px; color: var(--text-tertiary); margin: 0 0 14px; }

.profile-actions { display: flex; gap: 8px; }

/* ---------- Mentions autocomplete ---------- */
.mention-pop {
	position: absolute;
	left: 14px;
	bottom: calc(100% + 6px);
	width: min(280px, 80%);
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	z-index: 30;
}

.mention-pop button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 12px;
	background: none;
	border: 0;
	color: var(--text);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	text-align: left;
}

.mention-pop button:hover,
.mention-pop button.is-hl { background: rgba(255, 255, 255, 0.09); }

/* ---------- Watch party extras ---------- */
.party-schedule {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 10px 0 2px;
	font-size: 12.5px;
	color: var(--text-secondary);
}

.party-schedule input[type="datetime-local"] {
	height: 38px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	font-family: inherit;
	padding: 0 10px;
	color-scheme: dark;
}

.party-when {
	font-size: 12px;
	color: var(--text-secondary);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 3px 10px;
}

.party-ctrl-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--text-secondary);
	cursor: pointer;
	user-select: none;
}

/* keyword mute row (settings block inside DM inbox) */
.mute-row {
	display: flex;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--hairline);
}

.mute-row input {
	flex: 1;
	height: 34px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	font-family: inherit;
	font-size: 12.5px;
	padding: 0 10px;
}

.mute-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.mute-chip {
	font-size: 11.5px;
	color: var(--text);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 3px 10px;
	cursor: pointer;
}

.mute-chip::after { content: " ✕"; opacity: 0.6; }

/* =====================================================================
   THEME ENGINE v2 — packs transform the whole site.
   Everything below is gated behind data attributes / .theme-active so the
   default ani+ look stays untouched. Radius tokens scale via --radius-scale.
===================================================================== */

/* ---------- fonts ---------- */
body.theme-active {
	font-family: var(--font-body, var(--font));
}

body.theme-active .hero-title,
body.theme-active .row-title,
body.theme-active .detail-title,
body.theme-active .spotlight-title,
body.theme-active .archive-title,
body.theme-active h1,
body.theme-active h2,
body.theme-active h3 {
	font-family: var(--font-display, var(--font));
	letter-spacing: var(--heading-spacing, 0);
}

body[data-heading-style="uppercase"] .hero-title,
body[data-heading-style="uppercase"] .row-title,
body[data-heading-style="uppercase"] .detail-title,
body[data-heading-style="uppercase"] .archive-title { text-transform: uppercase; }

body[data-heading-style="brush"] .hero-title,
body[data-heading-style="brush"] .detail-title,
body[data-heading-style="brush"] .archive-title { font-style: italic; }

body[data-heading-style="heavy"] .hero-title,
body[data-heading-style="heavy"] .row-title,
body[data-heading-style="heavy"] .detail-title { font-weight: 900; }

body[data-heading-style="gothic"] .hero-title,
body[data-heading-style="gothic"] .detail-title { font-weight: 600; }

body[data-heading-style="mono"] .row-title { font-weight: 600; }

/* ---------- section decor: heading icon + underlines ---------- */
body.theme-active .row-title::before,
body.theme-active .detail-heading::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 9px;
	vertical-align: -2px;
	background: var(--theme-heading-icon, none) center / contain no-repeat;
}

body[data-underline] .row-title,
body[data-underline] .detail-heading {
	position: relative;
	padding-bottom: 6px;
}

body[data-underline] .row-title::after,
body[data-underline] .detail-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 56px;
	border-radius: var(--radius-pill);
	background: var(--accent-gradient);
	opacity: 0.85;
}

body[data-underline="brush"] .row-title::after,
body[data-underline="brush"] .detail-heading::after {
	height: 5px;
	border-radius: 60% 40% 55% 45% / 100% 100% 100% 100%;
	transform: rotate(-0.6deg);
}

body[data-underline="dashed"] .row-title::after,
body[data-underline="dashed"] .detail-heading::after {
	background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px);
	height: 3px;
}

body[data-underline="double"] .row-title::after,
body[data-underline="double"] .detail-heading::after {
	height: 6px;
	background: linear-gradient(0deg, var(--accent) 0 2px, transparent 2px 4px, var(--accent) 4px 6px);
}

body[data-underline="glow"] .row-title::after,
body[data-underline="glow"] .detail-heading::after {
	box-shadow: 0 0 12px var(--glow), 0 0 22px var(--glow);
	height: 2px;
}

body[data-underline="wave"] .row-title::after,
body[data-underline="wave"] .detail-heading::after {
	height: 4px;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: var(--accent);
}

/* ---------- scene layers ---------- */
#theme-scene svg { width: 100%; height: 100%; display: block; }

#theme-scene .ts-twinkle { animation: tsTwinkle 4s ease-in-out infinite; }
#theme-scene .ts-wave { animation: tsWaveBob 7s ease-in-out infinite; }

@keyframes tsTwinkle {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 0.9; }
}

@keyframes tsWaveBob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

body.light-mode #theme-scene { filter: brightness(1.28) saturate(0.92); }

/* calm player pages: no scenery, sprites, particles (engine also unmounts) */
body.watch-mode #theme-scene,
body.party-mode #theme-scene,
body.watch-mode #theme-sprites,
body.party-mode #theme-sprites,
body.watch-mode #theme-particles,
body.party-mode #theme-particles { display: none; }

/* ---------- sprites & particles ---------- */
.ts-sprite {
	position: absolute;
	display: block;
	will-change: transform, opacity;
}

.ts-drift { animation: tsDrift var(--d, 14s) ease-in-out infinite; }
.ts-float { animation: tsFloat var(--d, 9s) ease-in-out infinite; }
.ts-fall  { animation: tsFall var(--d, 11s) linear infinite; }
.ts-rise  { animation: tsRise var(--d, 13s) linear infinite; }
.ts-walk  { animation: tsWalk var(--d, 26s) linear infinite; }
.ts-fly   { animation: tsFly var(--d, 12s) linear infinite; }
.ts-peek  { animation: tsPeek var(--d, 15s) ease-in-out infinite; }
.ts-roll  { animation: tsRoll var(--d, 9s) linear infinite; }
.ts-sway  { animation: tsSway var(--d, 7s) ease-in-out infinite; transform-origin: top center; }

@keyframes tsDrift {
	0%, 100% { transform: translate(0, 0); }
	25% { transform: translate(14px, -18px); }
	50% { transform: translate(-10px, -30px); }
	75% { transform: translate(-18px, -8px); }
}

@keyframes tsFloat {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-26px) rotate(4deg); }
}

@keyframes tsFall {
	0% { transform: translateY(-8vh) translateX(0) rotate(0deg); }
	25% { transform: translateY(24vh) translateX(34px) rotate(80deg); }
	50% { transform: translateY(52vh) translateX(-20px) rotate(160deg); }
	75% { transform: translateY(78vh) translateX(28px) rotate(240deg); }
	100% { transform: translateY(108vh) translateX(-8px) rotate(330deg); }
}

@keyframes tsRise {
	0% { transform: translateY(0) scale(0.85); opacity: 0; }
	12% { opacity: 0.9; }
	100% { transform: translateY(-108vh) scale(1.05); opacity: 0; }
}

@keyframes tsWalk {
	0% { transform: translateX(0) scaleX(1) translateY(0); }
	12% { transform: translateX(14vw) scaleX(1) translateY(-6px); }
	24% { transform: translateX(28vw) scaleX(1) translateY(0); }
	36% { transform: translateX(42vw) scaleX(1) translateY(-6px); }
	48% { transform: translateX(56vw) scaleX(1) translateY(0); }
	50% { transform: translateX(58vw) scaleX(-1) translateY(0); }
	62% { transform: translateX(44vw) scaleX(-1) translateY(-6px); }
	74% { transform: translateX(30vw) scaleX(-1) translateY(0); }
	86% { transform: translateX(16vw) scaleX(-1) translateY(-6px); }
	100% { transform: translateX(0) scaleX(-1) translateY(0); }
}

@keyframes tsFly {
	0% { transform: translate(-10vw, 0); }
	50% { transform: translate(50vw, -40px); }
	100% { transform: translate(112vw, 10px); }
}

@keyframes tsPeek {
	0%, 22% { transform: translateX(0); }
	38%, 62% { transform: translateX(52px); }
	80%, 100% { transform: translateX(0); }
}

@keyframes tsRoll {
	0% { transform: translateX(0) rotate(0deg); }
	100% { transform: translateX(112vw) rotate(720deg); }
}

@keyframes tsSway {
	0%, 100% { transform: rotate(-10deg); }
	50% { transform: rotate(10deg); }
}

/* right-side peeks come from the right */
.ts-peek[style*="right"] { animation-name: tsPeekR; }
@keyframes tsPeekR {
	0%, 22% { transform: translateX(0); }
	38%, 62% { transform: translateX(-52px); }
	80%, 100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ts-sprite,
	#theme-scene .ts-twinkle,
	#theme-scene .ts-wave,
	.theme-transition,
	.tt-petal { animation: none !important; }
	.ts-sprite { display: none; }
}

/* ---------- card frames (body[data-card-frame]) ---------- */
[data-card-frame] .tile,
[data-card-frame] .post-card,
[data-card-frame] .theme-card-v2,
[data-card-frame] .member-card,
[data-card-frame] .episode-item,
[data-card-frame] .pin-modal { position: relative; }

/* trading card: holo shimmer on hover */
[data-card-frame="trading"] .tile,
[data-card-frame="trading"] .theme-card-v2 {
	border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
	box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-card-frame="trading"] .tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: conic-gradient(115deg, transparent 0 40%, var(--glow) 47%, transparent 54%, var(--glow) 60%, transparent 70%);
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
	mix-blend-mode: screen;
}
[data-card-frame="trading"] .tile:hover::after { opacity: 0.5; }

/* scroll: curled ends */
[data-card-frame="scroll"] .tile,
[data-card-frame="scroll"] .post-card,
[data-card-frame="scroll"] .pin-modal {
	border-radius: var(--radius-sm);
	border-color: color-mix(in srgb, var(--accent3, var(--accent)) 45%, transparent);
	background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent) 0 7px, transparent 7px), linear-gradient(0deg, color-mix(in srgb, var(--accent) 12%, transparent) 0 7px, transparent 7px);
}

/* comic panel: thick ink border + offset shadow */
[data-card-frame="comic-panel"] .tile,
[data-card-frame="comic-panel"] .post-card {
	border: 3px solid var(--text);
	border-radius: var(--radius-sm);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}

/* glass */
[data-card-frame="glass"] .tile,
[data-card-frame="glass"] .theme-card-v2 {
	background: color-mix(in srgb, var(--surface) 55%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
}

/* pixel: sharp corners + stepped shadow */
[data-card-frame="pixel"] .tile,
[data-card-frame="pixel"] .episode-item {
	border-radius: 0;
	box-shadow: 4px 4px 0 0 var(--accent), 8px 8px 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
}

/* torn paper: jittered clip-path */
[data-card-frame="torn-paper"] .tile,
[data-card-frame="torn-paper"] .post-card {
	border-radius: 2px;
	clip-path: polygon(2% 0%, 98% 3%, 100% 22%, 97% 48%, 99% 75%, 97% 97%, 60% 100%, 22% 98%, 0% 96%, 3% 60%, 0% 30%);
	border: 0;
	background: color-mix(in srgb, var(--surface) 88%, var(--text) 4%);
}

/* ticket stub: side notches + dashed divider */
[data-card-frame="ticket"] .tile,
[data-card-frame="ticket"] .post-card {
	border-radius: var(--radius-sm);
	background-image: radial-gradient(circle at 0 50%, transparent 9px, var(--surface) 9.5px), radial-gradient(circle at 100% 50%, transparent 9px, var(--surface) 9.5px);
	background-size: 51% 100%, 50% 100%;
	background-position: left, right;
	background-repeat: no-repeat;
	border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent);
}

/* banner flag: notched bottom */
[data-card-frame="banner"] .tile {
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));
}

/* wooden plank + rope */
[data-card-frame="wood"] .tile,
[data-card-frame="wood"] .post-card {
	border-radius: var(--radius-sm);
	border: 3px solid #6b4a2f;
	background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 14px);
	box-shadow: inset 0 0 0 2px rgba(255, 226, 180, 0.15);
}

/* case file: top tab */
[data-card-frame="case-file"] .tile::before,
[data-card-frame="case-file"] .post-card::before {
	content: "CASE FILE";
	position: absolute;
	top: -12px;
	left: 12px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 1.6px;
	background: var(--accent2, var(--accent));
	color: var(--text-on-accent, #fff);
	border-radius: 4px 4px 0 0;
	padding: 3px 10px 2px;
}

/* HUD corner brackets */
[data-card-frame="hud"] .tile::before,
[data-card-frame="hud"] .post-card::before,
[data-card-frame="hud"] .theme-card-v2::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(var(--accent), var(--accent)) left top / 16px 2px,
		linear-gradient(var(--accent), var(--accent)) left top / 2px 16px,
		linear-gradient(var(--accent), var(--accent)) right top / 16px 2px,
		linear-gradient(var(--accent), var(--accent)) right top / 2px 16px,
		linear-gradient(var(--accent), var(--accent)) left bottom / 16px 2px,
		linear-gradient(var(--accent), var(--accent)) left bottom / 2px 16px,
		linear-gradient(var(--accent), var(--accent)) right bottom / 16px 2px,
		linear-gradient(var(--accent), var(--accent)) right bottom / 2px 16px;
	background-repeat: no-repeat;
}

/* retro print: cream border + hard offset */
[data-card-frame="retro"] .tile,
[data-card-frame="retro"] .theme-card-v2 {
	border: 3px solid var(--accent3, #fefae0);
	border-radius: var(--radius-sm);
	box-shadow: 7px 7px 0 color-mix(in srgb, var(--accent2) 70%, transparent);
}

/* ---------- card hover FX ---------- */
[data-hover-card="glow"] .tile:hover,
[data-hover-card="glow"] .post-card:hover {
	box-shadow: 0 14px 40px -8px var(--glow), 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
}

[data-hover-card="sparkle"] .tile:hover { filter: brightness(1.06); }
[data-hover-card="sparkle"] .tile:hover .tile-caption::before {
	content: "✦";
	position: absolute;
	top: 8px;
	right: 12px;
	color: var(--accent3, var(--accent));
	animation: tsTwinkle 1.2s ease-in-out infinite;
}

[data-hover-card="slash"] .tile { overflow: hidden; }
[data-hover-card="slash"] .tile::after {
	content: "";
	position: absolute;
	top: -20%;
	left: -30%;
	width: 8%;
	height: 140%;
	background: linear-gradient(90deg, transparent, var(--text), transparent);
	opacity: 0;
	transform: rotate(24deg);
	pointer-events: none;
}
[data-hover-card="slash"] .tile:hover::after { animation: tsSlash 500ms ease-out; }

@keyframes tsSlash {
	0% { left: -30%; opacity: 0; }
	30% { opacity: 0.9; }
	100% { left: 130%; opacity: 0; }
}

[data-hover-card="shake"] .tile:hover { animation: tsShake 380ms ease-in-out; }
@keyframes tsShake {
	0%, 100% { transform: translateX(0) rotate(0); }
	25% { transform: translateX(-3px) rotate(-0.6deg); }
	60% { transform: translateX(3px) rotate(0.6deg); }
}

[data-hover-card="ripple"] .tile:hover { animation: tsRipple 600ms ease-out; }
@keyframes tsRipple {
	0% { box-shadow: 0 0 0 0 var(--glow); }
	100% { box-shadow: 0 0 0 22px transparent; }
}

[data-hover-card="glitch"] .tile:hover { animation: tsGlitch 320ms steps(2, end); }
@keyframes tsGlitch {
	0% { transform: translate(0); filter: none; }
	30% { transform: translate(-3px, 1px); filter: hue-rotate(30deg); }
	60% { transform: translate(3px, -1px); filter: hue-rotate(-20deg); }
	100% { transform: translate(0); filter: none; }
}

/* ---------- buttons / chips / inputs ---------- */
[data-btn-style="chunky"] .btn {
	height: 46px;
	padding: 0 22px;
	font-weight: 800;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
[data-btn-style="chunky"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }

[data-btn-style="brush"] .btn { border-radius: 46% 54% 48% 52% / 58% 52% 48% 42%; font-style: italic; }

[data-btn-style="pixel"] .btn { border-radius: 0; box-shadow: 3px 3px 0 var(--accent); font-family: var(--font-display); }

[data-btn-style="tech"] .btn {
	border-radius: 4px;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	letter-spacing: 1px;
}

[data-btn-style="stamp"] .btn {
	border-radius: var(--radius-sm);
	border: 2px dashed color-mix(in srgb, var(--text) 45%, transparent);
	transform: rotate(-0.5deg);
}
[data-btn-style="stamp"] .btn:hover { transform: rotate(0deg) scale(1.02); }

[data-hover-btn="squash"] .btn:hover { transform: scale(0.96, 1.06); }
[data-hover-btn="pop"] .btn:hover { animation: tsPop 300ms ease; }
@keyframes tsPop {
	40% { transform: scale(1.1); }
	70% { transform: scale(0.96); }
	100% { transform: scale(1); }
}
[data-hover-btn="glow"] .btn:hover { box-shadow: 0 0 18px var(--glow); }

[data-chip-style="tag"] .chip,
[data-chip-style="tag"] .cat-pill,
[data-chip-style="tag"] .room-tag,
[data-chip-style="tag"] .profile-fav-chip {
	border-radius: 3px 10px 3px 10px;
}

[data-chip-style="stamp"] .chip,
[data-chip-style="stamp"] .cat-pill {
	border: 1.6px dashed color-mix(in srgb, var(--text) 40%, transparent);
	transform: rotate(-1deg);
}

[data-chip-style="bubble"] .chip,
[data-chip-style="bubble"] .cat-pill {
	border-radius: 16px 16px 16px 4px;
}

/* ---------- dividers ---------- */
[data-divider-style="rope"] hr,
[data-divider-style="rope"] .community-tabs,
[data-divider-style="rope"] .chat-head { border-bottom-style: dashed; border-bottom-width: 2px; }

[data-divider-style="scan"] .chat-head::after,
[data-divider-style="scan"] .row-head::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 4px;
	background: linear-gradient(90deg, var(--accent), transparent);
}

[data-divider-style="stitch"] .post-replies,
[data-divider-style="stitch"] .mute-row { border-top-style: dashed; }

[data-divider-style="ink"] .post-replies { border-top: 2px solid var(--accent); border-radius: 60% 40% 0 0 / 8px; }

[data-divider-style="brush"] .community-tabs { border-bottom: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---------- dock theming ---------- */
[data-dock-border="rope"] .dock { border: 2px dashed color-mix(in srgb, var(--accent3, var(--accent)) 50%, transparent); }
[data-dock-border="tech"] .dock {
	border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
	box-shadow: 0 0 22px var(--glow), inset 0 0 12px color-mix(in srgb, var(--accent) 12%, transparent);
	border-radius: 10px;
}
[data-dock-border="wood"] .dock { border: 3px solid #6b4a2f; box-shadow: inset 0 0 0 2px rgba(255, 226, 180, 0.18); }
[data-dock-border="stamp"] .dock { border: 2px dashed color-mix(in srgb, var(--text) 40%, transparent); border-radius: var(--radius-lg); }
[data-dock-border="neon"] .dock {
	border: 1.6px solid var(--accent);
	border-radius: var(--radius-lg);
	box-shadow: 0 0 16px var(--glow), 0 0 40px var(--glow), inset 0 0 14px var(--glow);
}

[data-dock-hover="bounce"] .dock-item:hover { animation: tsDockBounce 420ms ease; }
@keyframes tsDockBounce {
	35% { transform: translateY(-14px) scale(1.2); }
	70% { transform: translateY(-4px) scale(1.08); }
}
[data-dock-hover="shake"] .dock-item:hover { animation: tsShake 380ms ease-in-out; }
[data-dock-hover="glow"] .dock-item:hover { filter: drop-shadow(0 0 8px var(--glow)); }

/* ---------- progress / scrollbar / toasts ---------- */
body.theme-active ::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--accent) 55%, transparent);
	border-radius: var(--radius-pill);
}
body.theme-active ::-webkit-scrollbar-track { background: transparent; }

body.theme-active .toast {
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
	box-shadow: 0 14px 40px -10px var(--glow);
}

/* ---------- themed loaders on .browse-loading ---------- */
body[data-loader] .browse-loading { position: relative; padding-left: 40px; }
body[data-loader] .browse-loading::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
	border-top-color: var(--accent);
	animation: tsLoader 900ms linear infinite;
}
body[data-loader="shuriken"] .browse-loading::before {
	border: 0;
	border-radius: 0;
	background: var(--accent);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	animation-duration: 700ms;
}
body[data-loader="wave"] .browse-loading::before { border-radius: 50% 50% 0 0 / 100% 100% 0 0; animation-name: tsLoaderWave; }
body[data-loader="notebook"] .browse-loading::before { border-radius: 2px; animation-name: tsLoaderFlip; }
body[data-loader="pinwheel"] .browse-loading::before {
	border: 0;
	background: conic-gradient(var(--accent) 0 25%, var(--accent2) 0 50%, var(--accent3, var(--accent)) 0 75%, transparent 0);
	animation-duration: 800ms;
}

@keyframes tsLoader { to { transform: rotate(360deg); } }
@keyframes tsLoaderWave {
	0%, 100% { transform: rotate(-14deg); }
	50% { transform: rotate(14deg); }
}
@keyframes tsLoaderFlip {
	0% { transform: rotateY(0); }
	100% { transform: rotateY(360deg); }
}

/* ---------- page transitions ---------- */
.theme-transition {
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	--tt-color: var(--accent, #7d7aff);
}

.tt-fade { background: var(--tt-color); animation: ttFade var(--tt-d, 500ms) ease forwards; opacity: 0; }
@keyframes ttFade { 0% { opacity: 0; } 40% { opacity: 0.55; } 100% { opacity: 0; } }

.tt-flash { background: var(--tt-color); animation: ttFlash var(--tt-d, 600ms) ease-out forwards; opacity: 0; }
@keyframes ttFlash { 0% { opacity: 0; } 18% { opacity: 0.95; } 100% { opacity: 0; } }

.tt-wipe::before {
	content: "";
	position: absolute;
	inset: -20%;
	background: linear-gradient(115deg, transparent 30%, var(--tt-color) 46%, var(--tt-color) 54%, transparent 70%);
	animation: ttWipe var(--tt-d, 600ms) ease-in-out forwards;
}
@keyframes ttWipe { 0% { transform: translateX(-70%); opacity: 0; } 35% { opacity: 0.9; } 100% { transform: translateX(70%); opacity: 0; } }

.tt-swirl {
	background: conic-gradient(from 0deg, transparent 0 20%, var(--tt-color) 30% 50%, transparent 60%);
	animation: ttSwirl var(--tt-d, 650ms) ease-in-out forwards;
	border-radius: 50%;
	inset: -30%;
	opacity: 0;
}
@keyframes ttSwirl { 0% { transform: rotate(0) scale(0.4); opacity: 0; } 40% { opacity: 0.85; } 100% { transform: rotate(200deg) scale(1.6); opacity: 0; } }

.tt-ink {
	background: radial-gradient(circle at 50% 50%, var(--tt-color) 0 30%, transparent 62%);
	animation: ttInk var(--tt-d, 700ms) ease-in forwards;
	opacity: 0.9;
}
@keyframes ttInk { 0% { clip-path: circle(0% at 50% 50%); opacity: 0.9; } 45% { clip-path: circle(75% at 50% 50%); opacity: 0.9; } 100% { clip-path: circle(75% at 50% 50%); opacity: 0; } }

.tt-pixel { background-image: conic-gradient(var(--tt-color) 25%, transparent 0 50%, var(--tt-color) 0 75%, transparent 0); background-size: 46px 46px; animation: ttPixel var(--tt-d, 550ms) steps(6) forwards; opacity: 0; }
@keyframes ttPixel { 0% { opacity: 0; background-size: 220px 220px; } 45% { opacity: 0.9; } 100% { opacity: 0; background-size: 30px 30px; } }

.tt-smoke { animation: ttSmoke var(--tt-d, 650ms) ease-in-out forwards; }
.tt-smoke::before, .tt-smoke::after {
	content: "";
	position: absolute;
	width: 44vw;
	height: 44vw;
	border-radius: 50%;
	background: radial-gradient(circle, var(--tt-color) 0 40%, transparent 70%);
	filter: blur(38px);
	opacity: 0;
	top: 30%;
}
.tt-smoke::before { left: 8%; animation: ttSmokePuff var(--tt-d, 650ms) ease-out forwards; }
.tt-smoke::after { right: 8%; animation: ttSmokePuff var(--tt-d, 650ms) ease-out 90ms forwards; }
@keyframes ttSmokePuff { 0% { transform: scale(0.3); opacity: 0; } 40% { opacity: 0.8; } 100% { transform: scale(1.7) translateY(-12vh); opacity: 0; } }

.tt-shatter { background: linear-gradient(135deg, var(--tt-color) 0 38%, transparent 38% 62%, var(--tt-color) 62%); animation: ttShatter var(--tt-d, 650ms) ease-in forwards; opacity: 0; }
@keyframes ttShatter {
	0% { opacity: 0; transform: scale(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
	30% { opacity: 0.9; }
	100% { opacity: 0; transform: scale(1.35); clip-path: polygon(0 0, 34% 12%, 66% 0, 100% 30%, 88% 70%, 100% 100%, 55% 88%, 12% 100%, 0 55%); }
}

.tt-spotlight { background: radial-gradient(circle at 50% 42%, transparent 0 12%, var(--tt-color) 30%); animation: ttSpot var(--tt-d, 700ms) ease-in-out forwards; opacity: 0; }
@keyframes ttSpot { 0% { opacity: 0; transform: scale(1.6); } 40% { opacity: 0.95; transform: scale(1); } 100% { opacity: 0; transform: scale(0.7); } }

.tt-scan::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 90px;
	top: -90px;
	background: linear-gradient(180deg, transparent, var(--tt-color), transparent);
	opacity: 0.8;
	animation: ttScan var(--tt-d, 550ms) linear forwards;
}
@keyframes ttScan { 0% { top: -90px; opacity: 0.9; } 100% { top: 110%; opacity: 0; } }

.tt-speed { background: repeating-linear-gradient(105deg, transparent 0 34px, var(--tt-color) 34px 40px); animation: ttSpeed var(--tt-d, 500ms) linear forwards; opacity: 0; }
@keyframes ttSpeed { 0% { transform: translateX(-140px); opacity: 0; } 30% { opacity: 0.75; } 100% { transform: translateX(140px); opacity: 0; } }

.tt-wave::before {
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -30%;
	height: 80%;
	border-radius: 50% 50% 0 0 / 22% 22% 0 0;
	background: var(--tt-color);
	animation: ttWave var(--tt-d, 700ms) ease-in-out forwards;
	opacity: 0;
}
@keyframes ttWave { 0% { transform: translateY(60%); opacity: 0; } 40% { opacity: 0.85; } 100% { transform: translateY(-130%); opacity: 0; } }

.tt-paper { background: var(--tt-color); transform-origin: top; animation: ttPaper var(--tt-d, 600ms) ease-in-out forwards; opacity: 0; }
@keyframes ttPaper { 0% { transform: scaleY(0); opacity: 0.9; } 45% { transform: scaleY(1); opacity: 0.9; } 100% { transform: scaleY(1) rotateX(80deg); opacity: 0; } }

.tt-gate {
	background: #0a0a10;
	border-radius: 50% 50% 0 0 / 32% 32% 0 0;
	inset: 30% 34% 0 34%;
	animation: ttGate var(--tt-d, 650ms) ease-in-out forwards;
	opacity: 0;
	box-shadow: 0 0 60px var(--tt-color);
}
@keyframes ttGate { 0% { transform: scaleY(0.05); opacity: 0; } 35% { transform: scaleY(1); opacity: 0.95; } 100% { transform: scaleY(0.05); opacity: 0; } }

.tt-petal {
	position: absolute;
	top: -6vh;
	width: 16px;
	height: 16px;
	background: var(--tt-color);
	border-radius: 60% 40% 55% 45% / 60% 60% 40% 40%;
	animation: ttPetalFall var(--tt-d, 700ms) linear forwards;
	opacity: 0;
}
@keyframes ttPetalFall {
	0% { transform: translateY(0) rotate(0); opacity: 0; }
	15% { opacity: 0.95; }
	100% { transform: translateY(112vh) rotate(300deg); opacity: 0; }
}

/* ---------- theme suggest chip on detail pages ---------- */
.theme-suggest { font-size: 13px; }

/* ---------- gallery (Theme Panel v2) ---------- */
.theme-gallery-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
	animation: ttFade 300ms ease;
}

.theme-gallery {
	width: min(1180px, 96vw);
	max-height: 92vh;
	overflow: hidden auto;
	overscroll-behavior: contain;
	/* solid-ish panel: a second backdrop blur on top of the overlay's blur
	   re-blurred the whole screen every frame */
	background: color-mix(in srgb, var(--bg-elevated, #161617) 94%, transparent);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-xl);
	padding: 22px 24px;
	box-shadow: 0 40px 110px rgba(0, 0, 0, 0.65);
}

.tg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tg-head h2 { margin: 0; font-size: 22px; }
.tg-search {
	flex: 1;
	max-width: 320px;
	height: 38px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	padding: 0 16px;
	font-family: inherit;
}
.tg-create { margin-left: auto; }

.tg-trending { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tg-trending-label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-right: 4px; }
.tg-trend-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	border-radius: var(--radius-pill);
	padding: 6px 12px;
	font-size: 12.5px;
	font-family: inherit;
	cursor: pointer;
}
.tg-trend-chip:hover { border-color: var(--accent); }
.tg-pop { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent); }

.tg-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

.tg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
}

.theme-card-v2 {
	position: relative;
	contain: layout paint; /* a card's animation never repaints its neighbours */
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
	min-height: 210px;
	display: flex;
	flex-direction: column;
	outline-offset: 3px;
}
.theme-card-v2:hover, .theme-card-v2:focus-visible {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--accent) 60%, transparent);
	box-shadow: 0 18px 44px -14px var(--glow);
}
.theme-card-v2.is-current { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }

.tp-mini { position: absolute; inset: 0; overflow: hidden; }
.tp-info {
	position: relative;
	margin-top: auto;
	padding: 14px 14px 12px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.1));
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.tp-info strong { font-size: 15px; }
.tp-mood { font-size: 12px; color: var(--text-secondary); }
.tp-inspire { font-size: 11px; color: var(--text-tertiary, var(--text-secondary)); }
.tp-applied {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.5px;
	background: var(--accent);
	color: var(--text-on-accent, #fff);
	border-radius: var(--radius-pill);
	padding: 3px 10px;
}
.tp-actions { margin-top: 8px; display: flex; }
.tp-actions .btn { height: 32px; font-size: 12.5px; padding: 0 16px; }
.tp-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.25); margin-left: -6px; }
.tp-info .tp-swatch:first-of-type { margin-left: 0; }
.tp-swatch { align-self: flex-start; }
.tp-info .tp-swatch { display: inline-block; margin: 6px 0 0; }
.tp-info .tp-swatch + .tp-swatch { margin-left: -6px; }

.tg-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	align-items: center;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--hairline);
}
.tg-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.tg-ctl select {
	height: 32px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	font-family: inherit;
	padding: 0 8px;
}
.tg-ctl input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.tg-note { font-size: 11px; opacity: 0.6; }

/* ---------- Theme Creator ---------- */
.theme-creator-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index: 210;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.theme-creator {
	width: min(980px, 96vw);
	max-height: 92vh;
	overflow: hidden auto;
	background: var(--glass-strong, rgba(28, 28, 30, 0.72));
	-webkit-backdrop-filter: blur(26px);
	backdrop-filter: blur(26px);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-xl);
	padding: 20px 22px;
}
.tc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tc-head h2 { margin: 0; font-size: 20px; }
.tc-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; }
.tc-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-secondary); margin: 14px 0 8px; }
.tc-search {
	width: 100%;
	height: 38px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	padding: 0 14px;
	font-family: inherit;
}
.tc-results { max-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.tc-result {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 1px solid transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 13.5px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-align: left;
}
.tc-result:hover { background: rgba(255, 255, 255, 0.07); }
.tc-result.is-picked { border-color: var(--accent); }
.tc-scenes, .tc-mascots { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-preview {
	position: relative;
	height: 240px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--hairline);
	background: #0b0b12;
}
.tc-name {
	width: 100%;
	height: 40px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	padding: 0 12px;
	font-family: inherit;
	margin-bottom: 10px;
}
.tc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tc-json {
	width: 100%;
	margin-top: 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	font-family: ui-monospace, Menlo, monospace;
	font-size: 11.5px;
	padding: 10px;
	resize: vertical;
}

@media (max-width: 760px) {
	.tc-body { grid-template-columns: 1fr; }
	.tg-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
	.tg-create { margin-left: 0; }
	.tg-head { flex-wrap: wrap; }
}

/* light-mode: flip page-background text to dark (text ON poster art stays white) */
body.light-mode .row-title,
body.light-mode .browse-title,
body.light-mode .detail-title,
body.light-mode .detail-heading,
body.light-mode .archive-title,
body.light-mode .archive-desc,
body.light-mode .eyebrow,
body.light-mode .spotlight-title,
body.light-mode .community-rules,
body.light-mode .community-tabs,
body.light-mode .tg-ctl,
body.light-mode .tg-head h2,
body.light-mode .tc-head h2 {
	color: var(--text);
}

body.light-mode .see-all,
body.light-mode .count { color: var(--text-secondary); }

body.light-mode .row-title::after,
body.light-mode .detail-heading::after { opacity: 0.9; }

/* =====================================================================
   FUNCTIONALITY PASS — browse pages, inbox, wizard, home strips.
===================================================================== */

/* decorative layers never eat clicks (defense in depth) */
#theme-scene, #theme-particles, #theme-sprites,
.ambient-layer, .ambient-tint, .ambient-shade, .ambient-video,
.tt-petal, .party-reactions { pointer-events: none !important; }

/* ---------- browse + categories pages ---------- */
.browse-page,
.categories-page {
	display: none;
}

body.browse-mode .browse-page,
body.categories-mode .categories-page {
	display: block;
	padding-block: calc(var(--nav-height, 52px) + 44px) 40px;
	min-height: 100vh;
}

body.browse-mode .hero,
body.browse-mode .rows,
body.categories-mode .hero,
body.categories-mode .rows,
body.browse-mode .search-page,
body.categories-mode .search-page { display: none; }

.tg-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.tg-chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tg-chip-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-tertiary, var(--text-secondary)); width: 68px; flex-shrink: 0; }

.tg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
.tg-card { position: relative; }
/* in the browse grid a card fills its column (row tiles have a fixed width) */
.tg-grid .tile-poster { width: 100%; }
.tg-rating {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 11px;
	font-weight: 800;
	background: rgba(0, 0, 0, 0.65);
	color: #ffd166;
	border-radius: var(--radius-pill);
	padding: 2px 8px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.tg-badge-trending {
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent-gradient, linear-gradient(135deg, #7d7aff, #ff6fb1));
	border-radius: var(--radius-pill);
	padding: 2px 8px;
}
.tg-more-row { display: flex; justify-content: center; margin-top: 24px; }
#tg-more[hidden] { display: none; }

.cat-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
}
.cat-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--surface) 55%, transparent);
	color: var(--text);
	text-decoration: none;
	transition: transform 160ms ease, border-color 160ms ease;
}
.cat-tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.cat-tile strong { font-size: 15.5px; }
.cat-tile span { font-size: 12px; color: var(--text-secondary); }

/* ---------- talk strip + party pill (home) ---------- */
.talk-strip-row { margin-top: 8px; }
.talk-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	max-height: 130px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--surface) 42%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	padding: 10px 14px;
	overflow: hidden;
}
.talk-tabs { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.talk-tab {
	background: none;
	border: 1px solid transparent;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	white-space: nowrap;
}
.talk-tab.is-active { background: var(--accent); color: var(--text-on-accent, #fff); border-color: var(--accent); }
.talk-content {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	flex: 1;
	min-width: 0;
	padding: 4px 2px;
}
.talk-content::-webkit-scrollbar { display: none; }
.talk-empty { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.talk-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 7px 13px;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.04);
	transition: border-color 150ms ease, transform 150ms ease;
}
.talk-chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.talk-chip strong { font-size: 13px; color: var(--accent); }
.talk-chip span { font-size: 11px; color: var(--text-secondary); }
.talk-up { color: #6ee7a0 !important; font-weight: 700; }
.talk-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	padding: 5px 12px 5px 5px;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.05);
	transition: border-color 150ms ease, transform 150ms ease;
}
.talk-pill:hover { border-color: var(--accent); transform: translateY(-2px); }
.talk-name { font-size: 12.5px; font-weight: 600; }
.talk-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--accent-gradient);
	border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.party-pill-row { margin-top: 14px; }
.party-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--surface) 42%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	padding: 10px 14px;
	font-size: 13px;
	color: var(--text-secondary);
}
.party-pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--accent-gradient);
	color: var(--text-on-accent, #fff);
	flex-shrink: 0;
}
.party-pill .btn { height: 34px; padding: 0 14px; font-size: 12.5px; }
.party-join { display: inline-flex; align-items: center; gap: 6px; }
.party-join input {
	width: 86px;
	height: 34px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	font-family: var(--font-display, inherit);
	font-weight: 700;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
}
.party-join input::placeholder { letter-spacing: 1px; font-weight: 500; }

/* ---------- inbox slide-over ---------- */
.inbox-wrap { position: fixed; inset: 0; z-index: 160; }
.inbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.inbox-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 100vw);
	background: var(--glass-strong, rgba(28, 28, 30, 0.85));
	-webkit-backdrop-filter: blur(26px);
	backdrop-filter: blur(26px);
	border-left: 1px solid var(--hairline);
	border-radius: var(--radius-xl) 0 0 var(--radius-xl);
	padding: 18px 16px;
	overflow-y: auto;
	animation: ibSlide 260ms cubic-bezier(0.32, 0.72, 0.32, 1);
}
@keyframes ibSlide { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .inbox-panel { animation: none; } }

.ib-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ib-head h3 { margin: 0; font-size: 18px; flex: 1; }
.ib-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.ib-tabs .community-tab { flex: 0 0 auto; }
.ib-search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.ib-search-row input {
	flex: 1;
	height: 36px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	padding: 0 14px;
	font-family: inherit;
}
.ib-search-row .btn { height: 36px; padding: 0 14px; }
.ib-list { display: flex; flex-direction: column; gap: 4px; }
.ib-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	padding: 8px 10px;
	color: var(--text);
	font-family: inherit;
	cursor: pointer;
	text-align: left;
}
.ib-row:hover { background: rgba(255, 255, 255, 0.06); }
.ib-row.has-unread { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ib-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ib-meta strong { font-size: 13.5px; }
.ib-last { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--text-tertiary, var(--text-secondary)); }
.ib-section { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-tertiary, var(--text-secondary)); margin: 14px 0 6px; }
.ib-count { background: var(--accent); color: var(--text-on-accent, #fff); border-radius: var(--radius-pill); padding: 1px 7px; font-size: 10.5px; }
.ib-empty { font-size: 13px; color: var(--text-secondary); padding: 14px 4px; line-height: 1.5; }
.ib-community { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 10px; margin-bottom: 10px; }
.ib-com-head { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; margin-bottom: 8px; }
.ib-com-head strong { font-size: 14px; }
.ib-com-members { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
.ib-rooms { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-room {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--hairline);
	color: var(--text);
	font-family: inherit;
	font-size: 12.5px;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	cursor: pointer;
}
.ib-room:hover { border-color: var(--accent); }
.ib-party .ib-join { pointer-events: none; }
.nm-results { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }

/* ---------- watch party wizard ---------- */
.wpw { width: min(480px, 94vw); max-height: 88vh; overflow-y: auto; }
.wpw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wpw-step { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); }
.wpw-search { width: 100%; }
.wpw-results { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow: auto; margin-top: 10px; }
.wpw-result {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 1px solid transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 13.5px;
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-align: left;
}
.wpw-result:hover { background: rgba(255, 255, 255, 0.07); }
.wpw-sub { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-tertiary, var(--text-secondary)); }
.wpw-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.wpw-tag { font-size: 10px; opacity: 0.65; }
.wpw-title { margin: 4px 0 12px; font-size: 17px; }
.wpw-season-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.wpw-season-row select {
	height: 34px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	font-family: inherit;
	padding: 0 8px;
}
.wpw-resume-note { font-size: 12px; color: var(--accent); font-weight: 600; }
.wpw-episodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; }
.wpw-ep {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--hairline);
	color: var(--text);
	font-family: inherit;
	border-radius: var(--radius-sm);
	padding: 10px 4px;
	cursor: pointer;
}
.wpw-ep:hover { border-color: var(--accent); }
.wpw-ep.is-default { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wpw-ep span { font-size: 10px; color: var(--accent); font-weight: 700; }
.wpw-code-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wpw-code {
	font-family: var(--font-display, monospace);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 5px;
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.wpw-link { font-size: 11.5px; color: var(--text-secondary); word-break: break-all; margin: 0 0 12px; }
.wpw-share { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wpw-share .btn { height: 34px; font-size: 12.5px; padding: 0 14px; text-decoration: none; }
.wpw-enter { width: 100%; height: 46px; font-size: 15px; }
.wpw-settings { margin-top: 14px; border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 10px 12px; }
.wpw-settings summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.wpw-settings .room-private { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text); }
.wpw-settings [data-wpw-apply] { margin-top: 10px; }

/* ---------- profile menu (avatar) ---------- */
.profile-menu {
	position: fixed;
	top: calc(var(--nav-height, 52px) + 6px);
	right: 14px;
	z-index: 220;
	min-width: 210px;
	background: var(--glass-strong, rgba(28, 28, 30, 0.85));
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
	padding: 6px;
	animation: ibSlide 180ms ease;
}
.profile-menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: none;
	border: 0;
	color: var(--text);
	font-family: inherit;
	font-size: 13.5px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-align: left;
}
.profile-menu button:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- per-episode party button ---------- */
.episode-row { position: relative; }
.ep-party {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	font-size: 15px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 150ms ease, transform 150ms ease;
}
.episode-row:hover .ep-party, .ep-party:focus-visible { opacity: 1; }
.ep-party:hover { transform: translateY(-50%) scale(1.1); }

@media (max-width: 760px) {
	.talk-strip { flex-direction: column; align-items: stretch; gap: 8px; }
	.talk-tabs { flex-direction: row; }
	.ep-party { opacity: 1; }
}

/* =====================================================================
   PLAYER v2 — Apple TV–style streaming player (avp-*)
   Video layer is Eye-Comfort-filterable; every control lives ABOVE the
   filter so capsule/menus/subtitles stay crisp. Accent comes from the
   active theme pack via --accent.
===================================================================== */

.avp-slot {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius-card, 18px);
	overflow: hidden;
	isolation: isolate;
	/* cinematic letterbox feel; no layout shift while the stream loads */
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

.avp-comfort {
	position: absolute;
	inset: 0;
	display: block;
}

.avp-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

/* ---------- control layer + idle fade ---------- */
.avp-ui {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: opacity 280ms ease;
}
.avp-gestures {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.avp-idle .avp-ui {
	opacity: 0;
	pointer-events: none;
}
.avp-idle {
	cursor: none;
}
.avp-idle .avp-gestures {
	cursor: none;
}
.avp-shade {
	position: absolute;
	left: 0;
	right: 0;
	height: 96px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 280ms ease;
}
.avp-shade-top {
	top: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent);
}
.avp-shade-bottom {
	bottom: 0;
	height: 132px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.66), transparent);
}
.avp-ui .avp-shade { opacity: 1; }
.avp-idle .avp-shade { opacity: 0; }

/* ---------- buttons ---------- */
.avp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 0;
	cursor: pointer;
	color: var(--text, #f5f5f7);
	background: transparent;
	-webkit-tap-highlight-color: transparent;
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease, opacity 200ms ease;
}
.avp-btn svg { width: 22px; height: 22px; }
.avp-btn:hover { transform: scale(1.08); }
.avp-btn:active { transform: scale(0.94); }
.avp-btn:focus-visible,
.avp-scrubber:focus-visible {
	outline: 2px solid var(--accent, #7d7aff);
	outline-offset: 2px;
	border-radius: 10px;
}
.avp-btn-round {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--glass, rgba(255, 255, 255, 0.14));
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.avp-btn-sm {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	opacity: 0.92;
}
.avp-btn-sm:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }

/* ---------- top bar ---------- */
.avp-top {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	z-index: 2;
}
.avp-titles {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.avp-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avp-subtitle {
	font-size: 12.5px;
	color: var(--text-secondary, rgba(255, 255, 255, 0.62));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avp-top-actions { display: flex; gap: 10px; }

/* ---------- center transport ---------- */
.avp-center {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 6vw, 54px);
	z-index: 2;
	margin-top: -12px;
}
.avp-transport {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--glass, rgba(255, 255, 255, 0.14));
	backdrop-filter: blur(22px) saturate(1.5);
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.avp-transport svg { width: 27px; height: 27px; }
.avp-playpause {
	width: 82px;
	height: 82px;
	background: rgba(255, 255, 255, 0.18);
}
.avp-playpause svg { width: 36px; height: 36px; }
/* play ⇄ pause morph */
.avp-playpause .ic-play,
.avp-playpause .ic-pause {
	transform-origin: center;
	transition: opacity 220ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avp-playpause .ic-pause { opacity: 0; transform: scale(0.4); }
.avp-playpause.is-playing .ic-play { opacity: 0; transform: scale(0.4); }
.avp-playpause.is-playing .ic-pause { opacity: 1; transform: scale(1); }

.avp-spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.avp-spinner i {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.18);
	border-top-color: #fff;
	animation: avp-spin 0.9s linear infinite;
}
@keyframes avp-spin { to { transform: rotate(360deg); } }

/* ---------- bottom glass capsule ---------- */
.avp-bottom {
	position: relative;
	z-index: 2;
	padding: 0 14px 14px;
}
.avp-capsule {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 22px;
	background: var(--glass-strong, rgba(28, 28, 30, 0.72));
	backdrop-filter: blur(26px) saturate(1.6);
	-webkit-backdrop-filter: blur(26px) saturate(1.6);
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}
.avp-time {
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary, rgba(255, 255, 255, 0.62));
	min-width: 44px;
	text-align: center;
	flex-shrink: 0;
}
.avp-scrub-host { flex: 1; display: flex; align-items: center; min-width: 60px; }

/* volume: hover-expand slider */
.avp-vol { display: flex; align-items: center; }
.avp-vol-slider {
	width: 0;
	opacity: 0;
	transition: width 240ms ease, opacity 200ms ease;
	accent-color: var(--accent, #7d7aff);
	cursor: pointer;
}
.avp-vol:hover .avp-vol-slider,
.avp-vol:focus-within .avp-vol-slider {
	width: 74px;
	opacity: 1;
	margin-right: 6px;
}

/* ---------- scrubber ---------- */
.avp-scrubber {
	position: relative;
	width: 100%;
	padding: 12px 0 10px; /* generous hit area */
	cursor: pointer;
	touch-action: none;
}
.avp-scrub-track {
	position: relative;
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.22);
	transition: height 180ms ease;
}
.avp-scrubber:hover .avp-scrub-track,
.avp-scrubber.is-dragging .avp-scrub-track { height: 7px; }
.avp-scrub-buffered,
.avp-scrub-played,
.avp-scrub-intro {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 4px;
}
.avp-scrub-buffered { background: rgba(255, 255, 255, 0.28); }
.avp-scrub-intro {
	background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.28) 0 3px, transparent 3px 7px );
}
.avp-scrub-played {
	background: var(--accent, #7d7aff);
	min-width: 0;
}
.avp-scrub-knob {
	position: absolute;
	right: -7px;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	transform: translateY(-50%) scale(0);
	transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avp-scrubber:hover .avp-scrub-knob,
.avp-scrubber.is-dragging .avp-scrub-knob { transform: translateY(-50%) scale(1); }
.avp-scrub-ticks { position: absolute; inset: 0; pointer-events: none; }
.avp-scrub-tick {
	position: absolute;
	top: -2px;
	bottom: -2px;
	width: 2px;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 1px;
	transform: translateX(-1px);
}
/* thumbnail + time bubble */
.avp-scrub-bubble {
	position: absolute;
	bottom: 26px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	pointer-events: none;
	z-index: 5;
}
.avp-scrub-thumb {
	width: 128px;
	height: 72px;
	border-radius: 10px;
	background-color: #111;
	background-repeat: no-repeat;
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.avp-scrub-time {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	background: var(--glass-strong, rgba(28, 28, 30, 0.85));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
	padding: 3px 9px;
	border-radius: 8px;
}

/* ---------- skip intro / recap pills ---------- */
.avp-pills {
	position: absolute;
	right: 18px;
	bottom: 96px;
	z-index: 4;
	display: flex;
	gap: 10px;
	animation: avp-rise 260ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.avp-pill {
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.18));
	background: rgba(20, 20, 22, 0.72);
	backdrop-filter: blur(20px) saturate(1.5);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	color: var(--text, #f5f5f7);
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease;
}
.avp-pill:hover { transform: translateY(-2px); background: rgba(50, 50, 54, 0.8); }

/* ---------- error card ---------- */
.avp-error {
	position: absolute;
	inset: 0;
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
/* author display beats the hidden attribute — keep the card truly hidden
   until an error actually fires (same gotcha as .dock-badge[hidden]) */
.avp-error[hidden] { display: none; }
.avp-error-card {
	text-align: center;
	padding: 30px 34px;
	border-radius: var(--radius-card, 18px);
	background: var(--glass-strong, rgba(28, 28, 30, 0.9));
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
	max-width: 340px;
}
.avp-error-icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 100, 130, 0.16);
	color: #ff6482;
	font-size: 22px;
	font-weight: 800;
}
.avp-error-card h3 { margin: 0 0 6px; font-size: 17px; }
.avp-error-msg { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary, rgba(255, 255, 255, 0.62)); }
.avp-error-actions { display: flex; gap: 10px; justify-content: center; }

.avp-btn-primary {
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(92deg, var(--accent, #7d7aff), #bf5af2);
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 200ms ease;
}
.avp-btn-primary:hover { transform: scale(1.04); filter: brightness(1.1); }
.avp-btn-glassbtn {
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.18));
	cursor: pointer;
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text, #f5f5f7);
	background: rgba(255, 255, 255, 0.08);
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease;
}
.avp-btn-glassbtn:hover { transform: scale(1.04); background: rgba(255, 255, 255, 0.14); }

/* ---------- unmute pill ---------- */
.avp-unmute {
	position: absolute;
	left: 50%;
	bottom: 108px;
	transform: translateX(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.2));
	background: rgba(20, 20, 22, 0.8);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	color: #fff;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	animation: avp-rise 260ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.avp-unmute svg { width: 18px; height: 18px; }
.avp-unmute:hover { background: rgba(60, 60, 66, 0.85); }

/* ---------- gestures ---------- */
.avp-ripple-host {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	overflow: hidden;
}
.avp-ripple {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	width: 96px;
	height: 96px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	animation: avp-ripple 600ms ease-out forwards;
}
.avp-ripple svg { width: 30px; height: 30px; }
@keyframes avp-ripple {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
	25% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}
.avp-gesture-indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 20px;
	border-radius: 16px;
	background: rgba(20, 20, 22, 0.75);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	pointer-events: none;
}
.avp-gauge {
	position: relative;
	width: 8px;
	height: 54px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
	display: block;
}
.avp-gauge i {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	border-radius: 5px;
}
.avp-rate-badge { font-size: 17px; font-weight: 800; }

/* ---------- settings popover ---------- */
.avp-pop {
	position: fixed;
	z-index: 60;
	min-width: 240px;
	max-width: min(320px, calc(100vw - 24px));
	max-height: min(430px, calc(100vh - 32px));
	overflow: hidden;
	display: flex;
	border-radius: 16px;
	background: var(--glass-strong, rgba(28, 28, 30, 0.86));
	backdrop-filter: blur(30px) saturate(1.7);
	-webkit-backdrop-filter: blur(30px) saturate(1.7);
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.14));
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
	animation: avp-pop-in 220ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes avp-pop-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
}
.avp-pages { display: flex; flex-direction: column; width: 100%; overflow-y: auto; }
/* layered pages: only the top of the stack is visible (back pops it) */
.avp-pages .avp-menu { display: none; }
.avp-pages .avp-menu:last-child {
	display: block;
	animation: avp-page-in 220ms cubic-bezier(0.32, 0.9, 0.35, 1);
}
@keyframes avp-page-in {
	from { opacity: 0; transform: translateX(16px); }
}
.avp-menu { padding: 6px; min-width: 100%; }
.avp-menu-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px 6px;
	border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.09));
	margin-bottom: 4px;
}
.avp-menu-back {
	border: 0;
	background: transparent;
	color: var(--text, #f5f5f7);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 8px;
	border-radius: 8px;
}
.avp-menu-back:hover { background: rgba(255, 255, 255, 0.1); }
.avp-menu-title { font-size: 13px; font-weight: 700; }
.avp-menu-label {
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
	padding: 8px 12px 4px;
}
.avp-menu-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--text, #f5f5f7);
	font-size: 13.5px;
	text-align: left;
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 160ms ease;
}
.avp-menu-row:hover { background: rgba(255, 255, 255, 0.09); }
.avp-menu-row.is-active { color: var(--accent, #7d7aff); font-weight: 700; }
.avp-menu-row.is-disabled { opacity: 0.45; cursor: not-allowed; }
.avp-menu-row-label { flex: 1; }
.avp-menu-row-value { font-size: 12px; color: var(--text-secondary, rgba(255, 255, 255, 0.55)); }
.avp-badge {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.5px;
	padding: 2px 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.14);
	color: var(--text, #f5f5f7);
}
.avp-menu-note { font-size: 12px; color: var(--text-secondary, rgba(255, 255, 255, 0.55)); padding: 6px 12px; margin: 0; white-space: pre-wrap; }
.avp-switch {
	position: relative;
	width: 36px;
	height: 21px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.24);
	transition: background 200ms ease;
	flex-shrink: 0;
}
.avp-switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fff;
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avp-switch.is-on { background: var(--accent, #7d7aff); }
.avp-switch.is-on::after { transform: translateX(15px); }
.avp-chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 8px; }
.avp-chip {
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
	background: rgba(255, 255, 255, 0.06);
	color: var(--text, #f5f5f7);
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease;
}
.avp-chip:hover { background: rgba(255, 255, 255, 0.12); }
.avp-chip.is-active {
	background: var(--accent, #7d7aff);
	border-color: transparent;
	color: #fff;
}
.avp-sub-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 6px 12px 10px;
	padding: 16px 10px;
	border-radius: 12px;
	background:
		linear-gradient(45deg, #1a1c22 25%, transparent 25%, transparent 75%, #1a1c22 75%),
		linear-gradient(45deg, #1a1c22 25%, #12141a 25%, #12141a 75%, #1a1c22 75%);
	background-size: 18px 18px;
	background-position: 0 0, 9px 9px;
}
.avp-report-text {
	width: calc(100% - 24px);
	margin: 4px 12px 8px;
	border-radius: 10px;
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
	background: rgba(0, 0, 0, 0.3);
	color: var(--text, #f5f5f7);
	font-family: var(--font, sans-serif);
	font-size: 13px;
	padding: 8px 10px;
	resize: vertical;
}
.avp-report-diag {
	margin: 4px 12px;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.35);
	font-size: 10.5px;
	line-height: 1.6;
	color: var(--text-secondary, rgba(255, 255, 255, 0.55));
	white-space: pre-wrap;
}
.avp-report-send { margin: 4px 12px 10px; }

/* ---------- Up Next card ---------- */
.avp-nextup {
	position: absolute;
	right: 18px;
	bottom: 96px;
	z-index: 5;
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border-radius: var(--radius-card, 18px);
	background: var(--glass-strong, rgba(28, 28, 30, 0.9));
	backdrop-filter: blur(28px) saturate(1.6);
	-webkit-backdrop-filter: blur(28px) saturate(1.6);
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.14));
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
	animation: avp-rise 300ms cubic-bezier(0.34, 1.3, 0.64, 1);
	max-width: min(380px, calc(100% - 36px));
}
@keyframes avp-rise {
	from { opacity: 0; transform: translateY(12px); }
}
.avp-nu-thumb {
	width: 108px;
	height: 62px;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0;
	background: #1a1a1e;
}
.avp-nu-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.avp-nu-kicker {
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--accent, #7d7aff);
}
.avp-nu-title {
	font-size: 13.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avp-nu-play {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 5px;
	align-self: flex-start;
	border: 0;
	cursor: pointer;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	background: linear-gradient(92deg, var(--accent, #7d7aff), #bf5af2);
	border-radius: 999px;
	padding: 7px 14px 7px 9px;
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avp-nu-play:hover { transform: scale(1.05); }
.avp-nu-ring { position: relative; width: 26px; height: 26px; display: inline-flex; }
.avp-nu-ring svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.avp-nu-ring circle { fill: none; stroke-width: 3; }
.avp-nu-ring-bg { stroke: rgba(255, 255, 255, 0.25); }
.avp-nu-ring-fg { stroke: #fff; }
.avp-nu-ring b {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}
.avp-nu-cancel {
	position: absolute;
	top: -9px;
	left: -9px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: rgba(80, 80, 88, 0.9);
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.avp-nu-cancel:hover { background: rgba(110, 110, 120, 0.95); }

/* ---------- episodes drawer ---------- */
.avp-drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(360px, 86%);
	z-index: 6;
	display: flex;
	flex-direction: column;
	background: var(--glass-strong, rgba(22, 22, 26, 0.92));
	backdrop-filter: blur(32px) saturate(1.6);
	-webkit-backdrop-filter: blur(32px) saturate(1.6);
	border-left: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
	box-shadow: -18px 0 60px rgba(0, 0, 0, 0.5);
	transform: translateX(100%);
	transition: transform 280ms cubic-bezier(0.32, 0.9, 0.35, 1);
}
.avp-drawer.is-in { transform: translateX(0); }
.avp-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
}
.avp-drawer-head strong { font-size: 15px; }
.avp-drawer-tools { display: flex; align-items: center; gap: 8px; }
.avp-select {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.14));
	color: var(--text, #f5f5f7);
	border-radius: 9px;
	font-size: 12.5px;
	padding: 5px 8px;
}
.avp-select option { background: #1c1c1e; color: #f5f5f7; }
.avp-drawer-close {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.1);
	color: var(--text, #f5f5f7);
	font-size: 12px;
}
.avp-drawer-list { flex: 1; overflow-y: auto; padding: 8px; }
.avp-drawer-loading {
	padding: 26px;
	text-align: center;
	color: var(--text-secondary, rgba(255, 255, 255, 0.55));
	font-size: 13px;
}
.avp-ep-card {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--text, #f5f5f7);
	text-align: left;
	padding: 8px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 160ms ease;
}
.avp-ep-card:hover { background: rgba(255, 255, 255, 0.08); }
.avp-ep-card.is-current { background: rgba(125, 122, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(125, 122, 255, 0.35); }
.avp-ep-num { font-size: 12px; font-weight: 700; color: var(--text-secondary, rgba(255, 255, 255, 0.55)); width: 22px; text-align: center; flex-shrink: 0; }
.avp-ep-still {
	width: 96px;
	height: 54px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: #1a1a1e;
}
.avp-ep-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.avp-ep-title {
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.avp-ep-progress {
	position: relative;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.16);
	overflow: hidden;
}
.avp-ep-progress i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--accent, #7d7aff);
	border-radius: 3px;
}

/* ---------- stats for nerds ---------- */
.avp-stats {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.66);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
	color: var(--text-secondary, rgba(255, 255, 255, 0.72));
	font-size: 11px;
	line-height: 1.7;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.avp-stats b {
	display: block;
	color: var(--text, #f5f5f7);
	font-size: 11.5px;
	margin-bottom: 2px;
}

/* ---------- shortcuts hint ---------- */
.avp-shortcuts {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	margin: 0;
}
.avp-shortcuts h3 { margin: 0 0 14px; font-size: 16px; }
.avp-shortcuts dl {
	display: grid;
	grid-template-columns: auto auto;
	gap: 7px 18px;
	margin: 0;
	padding: 20px 26px;
	border-radius: var(--radius-card, 18px);
	background: var(--glass-strong, rgba(28, 28, 30, 0.9));
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
	font-size: 12.5px;
}
.avp-shortcuts dt { font-weight: 700; color: var(--accent, #7d7aff); text-align: right; }
.avp-shortcuts dd { margin: 0; color: var(--text-secondary, rgba(255, 255, 255, 0.75)); }
.avp-shortcuts-close { margin-top: 12px; font-size: 11.5px; color: var(--text-tertiary, rgba(255, 255, 255, 0.4)); }

/* ---------- watch page full-bleed hero ---------- */
.player-slot.watch-hero {
	width: 100%;
	border-radius: var(--radius-card, 18px);
}
@media (max-width: 640px) {
	.player-slot.watch-hero { border-radius: 0; }
}

/* ---------- compact mobile layout ---------- */
@media (max-width: 640px) {
	.avp-top { padding: 10px 10px; gap: 8px; }
	.avp-title { font-size: 14px; }
	.avp-subtitle { font-size: 11px; }
	.avp-btn-round { width: 34px; height: 34px; }
	.avp-btn-round svg { width: 18px; height: 18px; }
	.avp-transport { width: 48px; height: 48px; }
	.avp-transport svg { width: 21px; height: 21px; }
	.avp-playpause { width: 62px; height: 62px; }
	.avp-playpause svg { width: 28px; height: 28px; }
	.avp-time-left { display: none; }
	.avp-capsule { gap: 2px; padding: 6px 8px; border-radius: 16px; }
	.avp-btn-sm { width: 32px; height: 32px; }
	.avp-vol { display: none; } /* swipe the right half instead */
	.avp-nextup { right: 10px; left: 10px; bottom: 78px; }
	.avp-nu-thumb { width: 84px; height: 50px; }
	.avp-pills { right: 10px; bottom: 78px; }
	.avp-scrub-thumb { width: 96px; height: 54px; }
	.avp-shortcuts dl { font-size: 11.5px; padding: 14px 16px; gap: 5px 12px; }
}

/* fullscreen: fill every edge, keep the capsule above the home indicator */
.avp-comfort:fullscreen { width: 100%; height: 100%; }
.avp-comfort:fullscreen .avp-bottom { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.avp-comfort:fullscreen .avp-top { padding-top: max(16px, env(safe-area-inset-top)); }

/* subtitles sit above the shade, below menus; ::cue styles come from
   SubtitleStyle.js */
.avp-video::cue { color: #fff; }

/* eye-comfort overlay must never eat control clicks */
.avp-comfort .eye-comfort-overlay { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
	.avp-ui, .avp-shade, .avp-btn, .avp-scrub-knob, .avp-drawer,
	.avp-nextup, .avp-pop, .avp-ripple, .avp-pill, .avp-unmute,
	.avp-vol-slider, .avp-switch::after, .avp-menu-row { transition: none !important; animation: none !important; }
}

/* screen-reader only (player live region, drawer labels) */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =====================================================================
   Hero slideshow (heroSlideshow.js) — cross-fading backdrops, slow zoom,
   progress dots. Timing: --hero-interval is set per dot from JS.
===================================================================== */
.hero-slideshow .hero-slide-img {
	opacity: 0;
	transition: opacity 0.9s ease;
	transform-origin: 60% 40%;
	will-change: opacity, transform;
}

.hero-slideshow .hero-slide-img.is-loaded {
	opacity: 0;
}

.hero-slideshow .hero-slide-img.is-front {
	opacity: 1;
}

.hero-slideshow .hero-slide-img.kb {
	animation: hero-kenburns 12s ease-out forwards;
}

@keyframes hero-kenburns {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}

.hero-slideshow .hero-content > * {
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.hero-slideshow .hero-content.is-swapping > :not(.hero-actions) {
	opacity: 0;
	transform: translateY(8px);
}

.hero-slideshow .hero-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.6em * 3);
}

.hero-controls {
	position: absolute;
	z-index: 3;
	right: var(--page-pad);
	bottom: clamp(48px, 7vh, 76px);
	display: flex;
	align-items: center;
	gap: 14px;
}

.hero-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hero-dot {
	position: relative;
	width: 22px;
	height: 18px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width 0.3s ease;
}

.hero-dot::before,
.hero-dot-fill {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 999px;
}

.hero-dot::before {
	right: 0;
	background: rgba(255, 255, 255, 0.28);
	transition: background 0.2s ease;
}

.hero-dot:hover::before {
	background: rgba(255, 255, 255, 0.5);
}

.hero-dot-fill {
	width: 0;
	background: #fff;
}

.hero-dot.is-active {
	width: 44px;
}

.hero-dot.is-active .hero-dot-fill {
	animation: hero-dot-progress var(--hero-interval, 10000ms) linear forwards;
}

.hero.is-paused .hero-dot.is-active .hero-dot-fill {
	animation-play-state: paused;
}

@keyframes hero-dot-progress {
	from { width: 0; }
	to { width: 100%; }
}

.hero-dot:focus-visible,
.hero-pause:focus-visible {
	outline: 2px solid var(--accent, #7d7aff);
	outline-offset: 3px;
	border-radius: 6px;
}

.hero-pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background 0.2s ease;
}

.hero-pause:hover {
	background: rgba(255, 255, 255, 0.16);
}

.hero-pause svg {
	width: 13px;
	height: 13px;
}

.hero-pause .i-play,
.hero-pause[aria-pressed="true"] .i-pause {
	display: none;
}

.hero-pause[aria-pressed="true"] .i-play {
	display: block;
}

@media (max-width: 640px) {
	.hero-controls {
		right: auto;
		left: var(--page-pad);
		bottom: 18px;
	}

	.hero-slideshow .hero-content {
		padding-bottom: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-slideshow .hero-slide-img { transition: opacity 0.3s linear; }
	.hero-slideshow .hero-slide-img.kb { animation: none; }
	.hero-slideshow .hero-content > * { transition: none; }
}

/* =====================================================================
   Embed loading screen (player.js → showSplash) — ani+ logo over the
   embed for EMBED_SPLASH_MS while the provider's player boots.
===================================================================== */
.embed-splash {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #05060c;
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.6s ease;
}

.embed-splash.is-leaving {
	opacity: 0;
	pointer-events: none;
}

.embed-splash-glow {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(40% 45% at 30% 40%, rgba(125, 122, 255, 0.28), transparent 70%),
		radial-gradient(35% 40% at 72% 62%, rgba(191, 90, 242, 0.22), transparent 70%),
		radial-gradient(30% 35% at 55% 25%, rgba(90, 200, 250, 0.16), transparent 70%);
	animation: splash-drift 9s ease-in-out infinite alternate;
}

@keyframes splash-drift {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.embed-splash-logo {
	position: relative;
	font-size: clamp(56px, 11vw, 112px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #fff;
	animation: splash-pulse 2.4s ease-in-out infinite;
}

.embed-splash-logo .plus {
	/* first colour repeated at the end so the moving shine loops seamlessly */
	background: linear-gradient(90deg, #5ac8fa, #7d7aff, #bf5af2, #ff6482, #5ac8fa);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: splash-shine 2.4s linear infinite;
}

@keyframes splash-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.04); opacity: 0.88; }
}

@keyframes splash-shine {
	from { background-position: 0% 50%; }
	to { background-position: 200% 50%; }
}

.embed-splash-sub {
	position: relative;
	max-width: 80%;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.62);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.embed-splash-sub:empty {
	display: none;
}

.embed-splash-bar {
	position: relative;
	width: min(220px, 50%);
	height: 3px;
	margin-top: 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.embed-splash-bar span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: inherit;
	background: var(--accent-gradient, linear-gradient(92deg, #5ac8fa, #7d7aff, #bf5af2, #ff6482));
}

/* load time is unknown → ease towards 92% over the max wait, then
   snap to 100% the moment the player is revealed */
.embed-splash.is-running .embed-splash-bar span {
	width: 92%;
	transition: width var(--splash-max, 30000ms) cubic-bezier(0.1, 0.7, 0.2, 1);
}

.embed-splash.is-done .embed-splash-bar span {
	width: 100%;
	transition: width 0.25s ease-out;
}

/* the provider's player stays invisible (but running) behind the splash */
.embed-frame {
	transition: opacity 0.6s ease;
}

.embed-frame.is-hidden {
	opacity: 0;
	pointer-events: none;
	transition: none; /* hide instantly — only fade on the way back in */
}

.embed-splash-skip {
	position: relative;
	margin-top: 18px;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.82);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	animation: splash-fade-in 0.4s ease both;
}

.embed-splash-skip:hover {
	background: rgba(255, 255, 255, 0.14);
}

.embed-splash-skip[hidden] {
	display: none;
}

@keyframes splash-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
	.embed-splash-sub { font-size: 12.5px; }
	.embed-splash-bar { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.embed-splash-glow,
	.embed-splash-logo,
	.embed-splash-logo .plus { animation: none; }
}

/* =====================================================================
   Wrong-video banner (player.js → checkDuration)
===================================================================== */
.embed-wrong {
	position: absolute;
	z-index: 3;
	top: 12px;
	left: 12px;
	right: 12px;
	margin: 0 auto; /* centred without transform (the fade-in animates transform) */
	max-width: 640px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px 10px 16px;
	border-radius: 14px;
	background: rgba(20, 14, 6, 0.88);
	border: 1px solid rgba(255, 196, 0, 0.45);
	color: #fff;
	font-size: 13px;
	line-height: 1.45;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.8);
	animation: splash-fade-in 0.3s ease both;
}

.embed-wrong-text {
	flex: 1;
	min-width: 0;
}

.embed-wrong-text strong {
	color: #ffd166;
}

.embed-wrong-text span {
	color: rgba(255, 255, 255, 0.82);
}

.embed-wrong-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.embed-wrong-reload,
.embed-wrong-close {
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	padding: 6px 12px;
	cursor: pointer;
}

.embed-wrong-close {
	padding: 6px 9px;
}

.embed-wrong-reload:hover,
.embed-wrong-close:hover {
	background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 640px) {
	.embed-wrong {
		top: 8px;
		flex-direction: column;
		align-items: stretch;
		font-size: 12px;
	}
	.embed-wrong-actions {
		justify-content: flex-end;
	}
}

/* =====================================================================
   Server switcher under the embed player (player.js → paintServerBar)
===================================================================== */
.embed-servers {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 980px;
	margin: 14px auto 0;
}

.embed-servers-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
	margin-right: 4px;
}

.embed-server {
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
	background: rgba(255, 255, 255, 0.05);
	color: var(--text, #f5f5f7);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
	padding: 6px 16px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.embed-server:hover {
	background: rgba(255, 255, 255, 0.12);
}

.embed-server.is-active {
	background: var(--accent, #7d7aff);
	border-color: transparent;
	color: #fff;
}

/* =====================================================================
   Embed subtitles (embedSubtitles.js) — overlay on the player + bar under it
===================================================================== */
.player-slot.has-embed {
	container-type: inline-size; /* subtitle size follows the player width */
}

.esub-overlay {
	position: absolute;
	z-index: 1;            /* above the player, below the ani+ loading screen */
	left: 6%;
	right: 6%;
	bottom: 13%;           /* clear of the player's own control bar */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	pointer-events: none;  /* clicks go through to the player */
	text-align: center;
}

.esub-cue {
	font-size: clamp(14px, 2.7cqw, 40px);
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.85);
}

.esub-cue span {
	background: rgba(0, 0, 0, 0.45);
	padding: 0.05em 0.35em;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.esub-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 980px;
	margin: 14px auto 0;
	font-size: 13px;
}

.esub-bar[hidden] {
	display: none;
}

.esub-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
}

.esub-select,
.esub-btn {
	border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
	background: rgba(255, 255, 255, 0.05);
	color: var(--text, #f5f5f7);
	font: inherit;
	font-weight: 600;
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
}

.esub-select option {
	color: #111;
}

.esub-btn:hover,
.esub-select:hover {
	background: rgba(255, 255, 255, 0.12);
}

.esub-sync {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.esub-sync[hidden],
.esub-version[hidden] {
	display: none;
}

.esub-offset {
	min-width: 44px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

.esub-status {
	flex-basis: 100%;
	text-align: center;
	font-size: 12.5px;
	color: var(--text-secondary, rgba(255, 255, 255, 0.65));
}

.esub-status:empty {
	display: none;
}

/* ani+ fullscreen (keeps the subtitle layer on screen) */
.player-slot.has-embed:fullscreen {
	max-width: none;
	width: 100vw;
	height: 100vh;
	aspect-ratio: auto;
	border-radius: 0;
	background: #000;
}

/* separate rule: an unknown selector would void the whole list */
.player-slot.has-embed:-webkit-full-screen {
	max-width: none;
	width: 100vw;
	height: 100vh;
	aspect-ratio: auto;
	border-radius: 0;
	background: #000;
}


/* =====================================================================
   Theme system performance + layout fixes
===================================================================== */
/* gallery grid: scoped so the See All browse grid (also .tg-grid) can't
   squeeze theme cards into 150px columns */
.theme-gallery .tg-grid {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
@media (max-width: 760px) {
	.theme-gallery .tg-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 420px) {
	.theme-gallery .tg-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.theme-card-v2 { min-height: 180px; }
}

/* scene drift runs on the compositor (ThemeScene.js sets --ts-dx / --ts-dy).
   It animates the `translate` property, which combines with the parallax
   `transform` that JavaScript sets on the same layer. */
@keyframes tsl-drift {
	from { translate: calc(var(--ts-dx, 6px) * -1) calc(var(--ts-dy, 3px) * -1); }
	to { translate: var(--ts-dx, 6px) var(--ts-dy, 3px); }
}
/* split-out twinkling stars / bobbing waves (see ThemeScene.splitAnimated) */
@keyframes tsl-twinkle {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 1; }
}
@keyframes tsl-wave {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

/* while the gallery is open the site behind it holds still — the cards'
   own previews keep moving */
body.theme-panel-open #theme-scene .ts-layer,
body.theme-panel-open #theme-scene .tsl-anim,
body.theme-panel-open #theme-particles .ts-sprite,
body.theme-panel-open #theme-sprites .ts-sprite {
	animation-play-state: paused;
}

/* cards scrolled out of view stop animating */
.theme-card-v2.is-offscreen .ts-sprite {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	#theme-scene .ts-layer,
	#theme-scene .tsl-anim { animation: none !important; }
}

/* gallery sits above the dock (dock z 250) so the bottom row stays clickable */
.theme-gallery-overlay { z-index: 300; }

/* colour swatches: a row of overlapping dots next to Apply (an older
   .tp-swatch rule from the v1 panel squashed them to 2px dashes) */
.theme-card-v2 .tp-actions { align-items: center; gap: 12px; }
.theme-card-v2 .tp-swatches { display: inline-flex; align-items: center; }
.theme-card-v2 .tp-swatches .tp-swatch {
	display: block;
	width: 18px;
	height: 18px;
	margin: 0 0 0 -6px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.theme-card-v2 .tp-swatches .tp-swatch:first-child { margin-left: 0; }
/* the creator opens from the gallery → must sit above it */
.theme-creator-overlay { z-index: 320; }

/* ===== Watch party room (server-backed) ===== */
.party-main { min-width: 0; }
.party-slot .party-reactions { z-index: 6; }
.party-countdown {
	position: absolute; inset: 0; z-index: 7;
	display: flex; align-items: center; justify-content: center;
	font-size: clamp(64px, 14vw, 140px); font-weight: 800; color: #fff;
	background: rgba(0,0,0,0.45); text-shadow: 0 6px 30px rgba(0,0,0,0.6);
	pointer-events: none;
}
.party-countdown[hidden] { display: none; }
.party-countdown.is-go { font-size: clamp(24px, 4vw, 40px); }
.party-sync {
	margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-md);
	font-size: 13.5px; line-height: 1.45; color: var(--text);
	background: rgba(255,255,255,0.05); border: 1px solid var(--hairline);
}
.party-sync.is-ok { border-color: rgba(70, 200, 120, 0.55); background: rgba(70, 200, 120, 0.10); }
.party-sync.is-off { border-color: rgba(255, 180, 60, 0.55); background: rgba(255, 180, 60, 0.10); }
.party-sync.is-host { border-color: var(--accent); }
.party-controls .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.party-link-btn {
	background: none; border: 0; padding: 0; color: var(--accent);
	font: inherit; cursor: pointer; text-decoration: underline;
}
.party-me { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 14px; }
.party-me label { flex: 1; display: grid; gap: 4px; font-size: 12px; color: var(--text-muted, #aaa); }
.party-me input, .pchat-form input {
	width: 100%; height: 38px; padding: 0 12px; border-radius: var(--radius-md);
	border: 1px solid var(--hairline); background: rgba(255,255,255,0.06); color: var(--text); font: inherit; font-size: 14px;
}
.party-person .party-you { color: var(--text-muted, #aaa); font-size: 12px; }
.party-person .member-report { margin-left: auto; }
.party-count { font-weight: 400; opacity: 0.7; }
.pchat { display: flex; flex-direction: column; gap: 8px; }
.pchat-list {
	height: 300px; overflow-y: auto; padding: 10px; border-radius: var(--radius-md);
	background: rgba(255,255,255,0.04); border: 1px solid var(--hairline);
	display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain;
}
.pchat-msg { font-size: 13.5px; line-height: 1.4; color: var(--text); word-wrap: break-word; }
.pchat-name { font-weight: 700; }
.pchat-msg.is-me .pchat-text { opacity: 0.92; }
.pchat-empty { margin: auto; color: var(--text-muted, #aaa); font-size: 13px; }
.pchat-form { display: flex; gap: 8px; }
.party-join-again, .wpw-join, .ib-party-join { display: flex; gap: 8px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.party-join-again .pin-input, .wpw-join .pin-input, .ib-party-join .pin-input { max-width: 180px; height: 42px; text-transform: uppercase; }
.wpw-wait, .wpw-error { margin: 18px 0; color: var(--text); }
.wpw-error { color: #ff9b9b; }
@media (max-width: 720px) {
	.party-emoji { flex-wrap: wrap; justify-content: center; }
	.pchat-list { height: 240px; }
}

.party-room { padding-bottom: 120px; }

/* ===== Watch party: sync row ===== */
.party-syncrow { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; flex-wrap: wrap; }
.party-syncrow .party-sync { margin-top: 0; flex: 1 1 320px; }
.party-syncbtns { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.party-syncbtns .btn { white-space: nowrap; }
.party-sync.is-flash { animation: party-flash 1.2s ease 2; }
@keyframes party-flash { 50% { box-shadow: 0 0 0 3px rgba(255, 180, 60, 0.7); } }
.party-incall { margin-left: auto; font-size: 13px; }
.party-person .party-incall + .member-report { margin-left: 6px; }

/* ===== Watch party: video call ===== */
.pcall {
	margin-bottom: 16px; padding: 12px; border-radius: var(--radius-md);
	background: rgba(255,255,255,0.04); border: 1px solid var(--hairline);
}
.pcall-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pcall-head .footer-heading { margin: 0 0 8px; }
.pcall-count { font-weight: 400; opacity: 0.7; }
.pcall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pcall-grid.is-empty { display: none; }
.pcall-tile {
	position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
	background: #16161a; isolation: isolate;
}
.pcall-tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.pcall-tile.is-local video { transform: scaleX(-1); }
.pcall-avatar {
	position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%;
	display: none; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: #fff;
}
.pcall-tile.cam-off video { visibility: hidden; }
.pcall-tile.cam-off .pcall-avatar { display: flex; }
.pcall-name {
	position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 40px);
	font-size: 11.5px; font-weight: 600; color: #fff; padding: 2px 7px; border-radius: 999px;
	background: rgba(0,0,0,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcall-mute {
	position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%;
	background: rgba(220, 50, 60, 0.9); color: #fff; display: flex; align-items: center; justify-content: center;
}
.pcall-mute[hidden] { display: none; }
.pcall-mute svg { width: 13px; height: 13px; }
.pcall-state {
	position: absolute; left: 0; right: 0; top: 6px; text-align: center; font-size: 11px; color: #fff;
	text-shadow: 0 1px 3px #000; padding: 0 6px;
}
.pcall-state:empty { display: none; }
.pcall-bar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.pcall-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.pcall-bar .btn svg { width: 17px; height: 17px; }
.pcall-btn {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline);
	background: rgba(255,255,255,0.1); color: var(--text); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.pcall-btn svg { width: 20px; height: 20px; }
.pcall-btn:hover:not([disabled]) { background: rgba(255,255,255,0.18); }
.pcall-btn.is-off { background: #fff; color: #111; }
.pcall-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.pcall-leave { background: #e5484d; border-color: #e5484d; color: #fff; }
.pcall-leave:hover:not([disabled]) { background: #f2555a; }
.pcall-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted, #aaa); text-align: center; }
.pcall-hint:empty { display: none; }
@media (max-width: 720px) {
	.party-syncbtns { flex-direction: row; width: 100%; }
	.pcall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =====================================================================
   Watch party full screen: player + floating call + chat drawer
===================================================================== */
.party-stage { position: relative; }
.party-stage .sui { display: none; }
.party-stage.is-fs {
	position: fixed; inset: 0; z-index: 2147483000;
	width: 100vw; height: 100vh; height: 100dvh; margin: 0; background: #000;
}
.party-stage:fullscreen { width: 100%; height: 100%; }
.party-stage.is-fs > .party-slot {
	position: absolute; inset: 0; width: 100%; height: 100%;
	max-width: none; aspect-ratio: auto; border-radius: 0; margin: 0;
}
.party-stage.is-fs > .esub-bar { display: none; }
.party-stage.is-fs.show-subs > .esub-bar {
	display: flex; position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
	transform: translateX(-50%); z-index: 25; margin: 0; padding: 10px 14px;
	width: max-content; max-width: min(94vw, 780px); border-radius: 14px;
	background: rgba(12, 12, 16, 0.9); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
body.party-pseudo-fs { overflow: hidden; }

.party-stage.is-fs .sui { display: block; position: absolute; inset: 0; z-index: 20; pointer-events: none; color: #fff; }
.sui > * { pointer-events: auto; }
.sui [hidden] { display: none !important; }
.sui-shield { position: absolute; inset: 0; z-index: 60; background: transparent; touch-action: none; }

/* toolbar */
.sui-bar {
	position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
	z-index: 45; display: flex; align-items: center; gap: 4px; padding: 5px;
	border-radius: 999px; background: rgba(10, 10, 14, 0.74); border: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0 8px 24px rgba(0,0,0,0.4); transition: opacity 0.35s ease;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sui.is-idle .sui-bar { opacity: 0.3; }
.sui-bar:hover, .sui-bar:focus-within { opacity: 1 !important; }
.sui-tb, .sui-ib, .sui-cb {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; padding: 0;
}
.sui-tb { width: 40px; height: 40px; }
.sui-tb svg { width: 20px; height: 20px; }
.sui-tb:hover, .sui-ib:hover { background: rgba(255,255,255,0.14); }
.sui-tb.is-on { background: rgba(255,255,255,0.22); }
.sui-tb:focus-visible, .sui-ib:focus-visible, .sui-cb:focus-visible, .sui-chip:focus-visible, .sui-tile:focus-visible { outline: 2px solid var(--accent, #7d7aff); outline-offset: 2px; }
.sui-tb-txt { font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; }
.sui-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.2); margin: 0 3px; }
.sui-badge, .sui-count {
	position: absolute; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
	font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.sui-badge { top: 1px; right: 0; background: #e5484d; }
.sui-count { bottom: 1px; right: 0; background: #2f9e62; }
.sui-chip {
	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px;
	border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08);
	color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sui-chip svg { width: 16px; height: 16px; flex: none; }
.sui-chip span { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.sui-chip.tone-ok { border-color: rgba(70, 200, 120, 0.7); background: rgba(70, 200, 120, 0.18); }
.sui-chip.tone-off { border-color: rgba(255, 180, 60, 0.75); background: rgba(255, 180, 60, 0.18); }
.sui-chip.tone-host { border-color: var(--accent, #7d7aff); }

/* floating call window */
.sui-float {
	position: absolute; z-index: 30; display: flex; flex-direction: column;
	background: rgba(14, 14, 18, 0.93); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
	box-shadow: 0 14px 40px rgba(0,0,0,0.55); overflow: hidden;
}
.sui-fhead {
	display: flex; align-items: center; justify-content: space-between; gap: 6px;
	padding: 4px 4px 4px 10px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
	font-size: 12.5px; font-weight: 700;
}
.sui-fhead:active { cursor: grabbing; }
.sui-ftitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sui-fbtns { display: flex; gap: 2px; flex: none; }
.sui-ib { width: 28px; height: 28px; }
.sui-ib svg { width: 16px; height: 16px; }
.sui-fbody { padding: 0 6px; }
.sui-main { display: grid; gap: 4px; }
.sui-float.is-grid .sui-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sui-float.is-grid .sui-main .sui-tile:only-child { grid-column: 1 / -1; }
.sui-strip { display: flex; gap: 4px; margin-top: 4px; overflow-x: auto; scrollbar-width: none; }
.sui-strip .sui-tile { flex: 0 0 calc((100% - 12px) / 4); min-width: 56px; aspect-ratio: 4 / 3; }
.sui-tile {
	position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden;
	background: #1c1c22; cursor: pointer; isolation: isolate;
}
.sui-float.is-grid .sui-tile { aspect-ratio: 4 / 3; }
.sui-tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.sui-tile.is-local video { transform: scaleX(-1); }
.sui-tile.cam-off video { visibility: hidden; }
.sui-av {
	position: absolute; inset: 0; margin: auto; width: 34%; max-width: 64px; aspect-ratio: 1; border-radius: 50%;
	display: none; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(12px, 2.4vw, 24px);
}
.sui-tile.cam-off .sui-av { display: flex; }
.sui-name {
	position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 30px); padding: 1px 6px; border-radius: 999px;
	background: rgba(0,0,0,0.6); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sui-strip .sui-name { font-size: 9.5px; padding: 0 4px; }
.sui-mute {
	position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%;
	background: rgba(220, 50, 60, 0.92); display: flex; align-items: center; justify-content: center;
}
.sui-mute svg { width: 11px; height: 11px; }
.sui-pin {
	position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--accent, #7d7aff); display: flex; align-items: center; justify-content: center;
}
.sui-pin svg { width: 12px; height: 12px; }
.sui-state { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font-size: 10.5px; text-shadow: 0 1px 3px #000; padding: 0 22px; }
.sui-state:empty { display: none; }
.sui-tile.is-pinned { box-shadow: inset 0 0 0 2px var(--accent, #7d7aff); }
.sui-ffoot { display: flex; justify-content: center; gap: 8px; padding: 6px 6px 8px; }
.sui-ffoot:empty { display: none; }
.sui-cb { width: 36px; height: 36px; background: rgba(255,255,255,0.12); }
.sui-cb svg { width: 18px; height: 18px; }
.sui-cb:hover:not([disabled]) { background: rgba(255,255,255,0.22); }
.sui-cb.is-off { background: #fff; color: #111; }
.sui-cb[disabled] { opacity: 0.4; cursor: not-allowed; }
.sui-cb.sui-leave { background: #e5484d; }
.sui-join { padding: 4px 4px 10px; text-align: center; }
.sui-join p { margin: 4px 0 8px; font-size: 12.5px; color: rgba(255,255,255,0.75); }
.sui-joinbtns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.sui-jb {
	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.1); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.sui-jb.is-primary { background: #fff; color: #111; border-color: #fff; }
.sui-jb svg { width: 16px; height: 16px; }
.sui-jb[disabled] { opacity: 0.5; cursor: not-allowed; }
.sui-grip {
	position: absolute; left: 0; bottom: 0; width: 18px; height: 18px; cursor: nesw-resize; touch-action: none;
	background: linear-gradient(45deg, transparent 0 40%, rgba(255,255,255,0.45) 40% 48%, transparent 48% 60%, rgba(255,255,255,0.45) 60% 68%, transparent 68%);
}
/* focus: the main video fills the screen over the show */
.sui-float.is-expanded {
	left: 16px !important; top: 66px !important; right: 16px; bottom: 16px; width: auto !important;
}
.sui-float.is-expanded .sui-fhead { cursor: default; }
.sui-float.is-expanded .sui-fbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sui-float.is-expanded .sui-main { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.sui-float.is-expanded .sui-main .sui-tile { aspect-ratio: auto; height: 100%; }
.sui-float.is-expanded .sui-main .sui-tile video { object-fit: contain; }
.sui-float.is-expanded .sui-strip .sui-tile { flex-basis: 140px; }
.sui-float.is-expanded .sui-grip { display: none; }

/* minimised pill */
.sui-pill {
	position: absolute; z-index: 30; display: inline-flex; align-items: center; gap: 6px;
	height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16);
	background: rgba(14, 14, 18, 0.92); color: #fff; font: inherit; font-size: 13px; font-weight: 700;
	cursor: grab; touch-action: none; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.sui-pill svg { width: 18px; height: 18px; }

/* chat drawer */
.sui-chat {
	position: absolute; top: 0; right: 0; bottom: 0; z-index: 50; width: min(360px, 92vw);
	display: flex; flex-direction: column; gap: 8px; padding: 12px 12px max(12px, env(safe-area-inset-bottom));
	background: rgba(12, 12, 16, 0.985); border-left: 1px solid rgba(255,255,255,0.1);
	transform: translateX(105%); visibility: hidden; transition: transform 0.25s ease, visibility 0s 0.25s;
}
.sui-chat.is-open { transform: none; visibility: visible; transition: transform 0.25s ease; }
.sui-chat-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.sui-emoji { display: flex; flex-wrap: wrap; gap: 4px; }
.sui-emoji button {
	background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
	font-size: 16px; padding: 3px 8px; cursor: pointer;
}
.sui-chat-slot { flex: 1; min-height: 0; display: flex; }
.sui-chat-slot .pchat { flex: 1; min-height: 0; }
.sui-chat-slot .pchat-list { flex: 1; height: auto; min-height: 0; }
.party-stage.is-fs .sui-bar { transition: opacity 0.35s ease, right 0.25s ease; }
.party-stage.is-fs .sui-chat.is-open ~ .sui-peek { display: none; }
@media (min-width: 561px) {
	.sui.chat-open .sui-bar { right: calc(min(360px, 92vw) + 12px); }
}

/* new-message previews while the chat is closed */
.sui-peek {
	position: absolute; right: 16px; top: 72px; z-index: 35; display: flex; flex-direction: column; align-items: flex-end;
	gap: 6px; max-width: min(340px, 80vw); pointer-events: none;
}
.sui-peek-msg {
	pointer-events: auto; text-align: left; border: 0; cursor: pointer; color: #fff; font: inherit; font-size: 13px;
	padding: 8px 12px; border-radius: 12px; background: rgba(14, 14, 18, 0.9); box-shadow: 0 6px 18px rgba(0,0,0,0.4);
	animation: sui-peek-in 0.25s ease; transition: opacity 0.4s ease;
}
.sui-peek-msg.is-out { opacity: 0; }
@keyframes sui-peek-in { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 560px) {
	.sui-chat { top: auto; left: 0; width: 100%; height: 62%; border-left: 0; border-top: 1px solid rgba(255,255,255,0.1); border-radius: 16px 16px 0 0; transform: translateY(105%); }
	.sui-tb { width: 36px; height: 36px; }
	.sui-chip span { max-width: 90px; }
	.sui-float.is-expanded { left: 8px !important; right: 8px; top: 60px !important; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.sui-chat, .sui-bar, .sui-peek-msg { transition: none; animation: none; }
}

/* window-filling party view: nothing of the page may show around / over it */
body.party-pseudo-fs .nav,
body.party-pseudo-fs .footer,
body.party-pseudo-fs .dock-wrap,
body.party-pseudo-fs #theme-cursor { visibility: hidden; }

/* ===== Watch party on phones (full view) ===== */
.sui.is-compact .sui-bar { gap: 2px; padding: 4px; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
.sui.is-compact .sui-tb { width: 34px; height: 34px; }
.sui.is-compact .sui-tb svg { width: 18px; height: 18px; }
.sui.is-compact .sui-sep { margin: 0 1px; }
.sui.is-compact .sui-chip { height: 30px; padding: 0 9px 0 8px; font-size: 11.5px; gap: 4px; }
.sui.is-compact .sui-chip span { max-width: 92px; }
.sui.is-compact .sui-float { border-radius: 12px; }
.sui.is-compact .sui-fhead { padding: 2px 2px 2px 9px; font-size: 11.5px; }
.sui.is-compact .sui-ib { width: 32px; height: 32px; }
.sui.is-compact .sui-fbody { padding: 0 4px; }
.sui.is-compact .sui-strip { gap: 3px; margin-top: 3px; }
.sui.is-compact .sui-strip .sui-tile { flex-basis: calc((100% - 9px) / 4); min-width: 44px; }
.sui.is-compact .sui-name { font-size: 10px; }
.sui.is-compact .sui-strip .sui-name { display: none; }
.sui.is-compact .sui-ffoot { gap: 6px; padding: 4px 4px 6px; }
.sui.is-compact .sui-cb { width: 34px; height: 34px; }
.sui.is-compact .sui-cb svg { width: 17px; height: 17px; }
.sui.is-compact .sui-grip { width: 26px; height: 26px; }
.sui.is-compact .sui-pill { height: 34px; padding: 0 11px; font-size: 12px; }
.sui.is-compact .sui-peek { top: 50px; right: 8px; max-width: 72vw; }
.sui.is-compact .sui-peek-msg { font-size: 12px; padding: 6px 10px; }
.sui.is-compact .sui-join p { font-size: 11.5px; margin: 2px 0 6px; }
.sui.is-compact .sui-jb { height: 32px; padding: 0 10px; font-size: 12px; }
/* phone held sideways: little height — keep the window short */
.sui.is-landscape .sui-ftitle { display: none; }
.sui.is-landscape .sui-fhead { justify-content: flex-end; padding: 1px; }
.sui.is-landscape .sui-chat { width: min(320px, 46vw); }
.sui.is-landscape .sui-float.is-expanded { left: 8px !important; top: 50px !important; right: 8px; bottom: 8px; }
.sui.is-compact .sui-float.is-expanded { left: 6px !important; right: 6px; bottom: 6px; }

/* player details (sync troubleshooting) */
.party-diag { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary, rgba(255,255,255,0.7)); }
.party-diag summary { cursor: pointer; width: max-content; max-width: 100%; }
.party-diag p { margin: 8px 0; }
.party-diag pre {
	max-height: 260px; overflow: auto; padding: 10px; border-radius: 10px; margin: 0 0 8px;
	background: rgba(255,255,255,0.05); border: 1px solid var(--hairline); white-space: pre-wrap; word-break: break-all; font-size: 11.5px;
}

/* party room (not full screen) on phones */
@media (max-width: 640px) {
	.party-room .watch-topbar { flex-wrap: wrap; gap: 10px; }
	.party-room .watch-titles { min-width: 0; flex: 1 1 60%; }
	.party-room .live-badge { display: none; }
	.party-controls { gap: 8px; }
	.party-controls .btn { padding-inline: 14px; font-size: 14px; }
	.party-syncbtns .btn { flex: 1; }
	.party-sync { font-size: 13px; }
	.pcall-bar .btn { flex: 1; justify-content: center; }
}
.sui.is-landscape.chat-open .sui-bar { right: calc(min(320px, 46vw) + 8px); }
@media (max-width: 560px) { .sui.chat-open .sui-bar { right: max(8px, env(safe-area-inset-right)); } }

/* =====================================================================
   Browse filters: one dropdown button per filter
===================================================================== */
.tg-filters.is-drops { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; margin: 18px 0 26px; }
.tg-drop.is-open { z-index: 80; }
.tg-drop { position: relative; }
.tg-drop-btn {
	display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 18px;
	border-radius: 999px; border: 1px solid var(--hairline, rgba(255,255,255,0.14));
	background: rgba(255,255,255,0.06); color: var(--text, #fff); font: inherit; font-size: 15px; cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.tg-drop-btn:hover { background: rgba(255,255,255,0.11); }
.tg-drop-btn:focus-visible { outline: 2px solid var(--accent, #7d7aff); outline-offset: 2px; }
.tg-drop-k { color: var(--text-secondary, rgba(255,255,255,0.6)); }
.tg-drop-v { font-weight: 700; }
.tg-drop-btn svg { width: 16px; height: 16px; opacity: 0.8; transition: transform 0.2s ease; }
.tg-drop.is-open .tg-drop-btn svg { transform: rotate(180deg); }
.tg-drop-btn.has-value { background: var(--accent, #7d7aff); border-color: var(--accent, #7d7aff); color: #fff; }
.tg-drop-btn.has-value .tg-drop-k { color: rgba(255,255,255,0.8); }
.tg-drop-panel {
	position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: max-content; min-width: 220px; max-width: min(420px, 92vw);
	max-height: min(58vh, 520px); overflow: auto; padding: 12px 14px 14px; border-radius: 18px;
	background: #141418; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 50px rgba(0,0,0,0.6);
	animation: tg-drop-in 0.16s ease;
}
.tg-drop-panel.is-wide { width: min(640px, 92vw); max-width: min(640px, 92vw); }
@keyframes tg-drop-in { from { opacity: 0; transform: translateY(-4px); } }
.tg-drop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.tg-drop-x { border: 0; background: transparent; color: inherit; font-size: 16px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; }
.tg-drop-x:hover { background: rgba(255,255,255,0.1); }
.tg-drop-group { margin: 12px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary, rgba(255,255,255,0.5)); }
.tg-drop-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-drop-opts .cat-pill { margin: 0; }
.tg-clear {
	height: 44px; padding: 0 16px; border-radius: 999px; border: 1px dashed rgba(255,255,255,0.3);
	background: transparent; color: var(--text, #fff); font: inherit; font-size: 14px; cursor: pointer;
}
.tg-clear:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 640px) {
	.tg-filters.is-drops { gap: 8px; }
	.tg-drop-btn { height: 40px; padding: 0 12px 0 14px; font-size: 14px; }
	.tg-clear { height: 40px; font-size: 13px; }
}
/* options open as a bottom sheet on phones */
.tg-drop-panel.is-sheet {
	position: fixed; left: 0 !important; right: 0 !important; top: auto; bottom: 0; width: 100%; max-width: none;
	max-height: 75vh; border-radius: 20px 20px 0 0; padding: 14px 16px max(20px, env(safe-area-inset-bottom)); z-index: 1001;
	animation: tg-sheet-in 0.2s ease;
}
@keyframes tg-sheet-in { from { transform: translateY(30px); opacity: 0; } }
.tg-drop-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.55); animation: tg-fade-in 0.2s ease; }
@keyframes tg-fade-in { from { opacity: 0; } }

/* =====================================================================
   Subtitles button + panel inside the player (embedSubtitles.js)
===================================================================== */
.esub-cc { position: absolute; top: 12px; left: 12px; z-index: 6; }
.esub-cc[hidden] { display: none; }
.esub-cc-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 10px;
	border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(0,0,0,0.6);
	color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.15s ease, transform 0.15s ease;
}
.esub-cc-btn:hover { background: rgba(0,0,0,0.78); }
.esub-cc-btn:focus-visible { outline: 2px solid var(--accent, #7d7aff); outline-offset: 2px; }
.esub-cc-btn svg { width: 20px; height: 20px; flex: none; }
.esub-cc.is-on .esub-cc-btn { background: var(--accent, #7d7aff); border-color: var(--accent, #7d7aff); }
.esub-cc.is-hint .esub-cc-btn { animation: esub-pulse 1.5s ease-in-out 5; }
@keyframes esub-pulse { 50% { box-shadow: 0 0 0 7px rgba(125, 122, 255, 0.5); transform: scale(1.05); } }
.esub-panel {
	position: absolute; top: 46px; left: 0; width: 320px; max-width: calc(100cqw - 24px); overflow: auto;
	padding: 12px 14px 14px; border-radius: 16px; background: rgba(16, 16, 20, 0.97);
	border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 14px 40px rgba(0,0,0,0.55); color: #fff;
	animation: tg-drop-in 0.15s ease;
}
.esub-panel[hidden] { display: none; }
.esub-p-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.esub-p-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 15px; cursor: pointer; }
.esub-p-x:hover { background: rgba(255,255,255,0.1); }
.esub-p-sec { margin-top: 10px; }
.esub-p-sec[hidden] { display: none; }
.esub-p-lab { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.esub-p-opts, .esub-p-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.esub-p-opt, .esub-p-btn {
	height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16);
	background: rgba(255,255,255,0.07); color: #fff; font: inherit; font-size: 13px; cursor: pointer;
}
.esub-p-opt:hover:not([disabled]), .esub-p-btn:hover { background: rgba(255,255,255,0.15); }
.esub-p-opt.is-active { background: var(--accent, #7d7aff); border-color: var(--accent, #7d7aff); font-weight: 700; }
.esub-p-opt[disabled] { opacity: 0.32; cursor: not-allowed; text-decoration: line-through; }
.esub-p-off { min-width: 48px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.esub-p-status { margin: 10px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.7); }
.esub-p-status:empty { display: none; }
.esub-overlay[data-size="s"] .esub-cue { font-size: clamp(12px, 2.1cqw, 30px); }
.esub-overlay[data-size="l"] .esub-cue { font-size: clamp(17px, 3.6cqw, 54px); }
/* the bar under the player keeps only the full-screen button — the rest lives in the player now */
.esub-bar .esub-label, .esub-bar .esub-select, .esub-bar .esub-sync { display: none !important; }
/* small players (phones): bigger tap targets, panel across the player */
@container (max-width: 520px) {
	.esub-cc { top: 8px; left: 8px; }
	.esub-cc-btn { height: 34px; padding: 0 10px 0 8px; font-size: 12px; }
	.esub-panel { top: 42px; left: 0; width: calc(100cqw - 16px); max-width: none; padding: 10px 12px 12px; }
	.esub-p-opt, .esub-p-btn { height: 34px; }
}
.esub-panel.is-sheet {
	position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 75vh;
	border-radius: 20px 20px 0 0; padding: 14px 16px max(20px, env(safe-area-inset-bottom)); z-index: 1001;
	animation: tg-sheet-in 0.2s ease;
}
.esub-panel.is-sheet .esub-p-opt, .esub-panel.is-sheet .esub-p-btn { height: 38px; padding: 0 14px; font-size: 14px; }

/* =====================================================================
   PHONE OPTIMISATION (≤ 640px) — bigger tap targets, labelled tab bar,
   edge-to-edge player, compact episode rows, no iOS input zoom
===================================================================== */
@media (max-width: 640px) {
	html { -webkit-text-size-adjust: 100%; }
	body { -webkit-tap-highlight-color: rgba(125, 122, 255, 0.18); }
	/* iOS zooms the page into any field under 16px — never let it */
	input, select, textarea { font-size: 16px !important; }

	/* top bar: comfortable thumbs */
	.nav { padding-inline: 14px; gap: 8px; }
	.nav .icon-btn { width: 40px; height: 40px; }
	.nav .avatar { width: 36px; height: 36px; font-size: 14px; }

	/* bottom tab bar with labels */
	.dock { padding: 5px 2px calc(5px + env(safe-area-inset-bottom)); }
	.dock-inner { width: 100%; justify-content: space-around; gap: 0; align-items: stretch; }
	.dock-item {
		flex: 1 1 0; min-width: 0; width: auto; height: 52px; padding: 0 2px;
		flex-direction: column; gap: 3px; border-radius: 12px; transform: none !important;
	}
	.dock-item svg { width: 22px; height: 22px; flex: none; }
	.dock-item .dock-tip {
		display: block !important; position: static; transform: none; opacity: 1; pointer-events: none;
		padding: 0; border: 0; background: none; font-size: 10.5px; font-weight: 600; line-height: 1.1;
		color: var(--text-secondary, rgba(255,255,255,0.65)); max-width: 100%; overflow: hidden; text-overflow: ellipsis;
	}
	.dock-item.is-active { color: var(--accent, #7d7aff); }
	.dock-item.is-active .dock-tip { color: var(--text, #fff); }
	.dock-item:hover { background: transparent; }
	.dock-item:active { background: rgba(255,255,255,0.08); }
	.dock-dot { display: none; }
	.dock-badge { top: 2px; right: calc(50% - 22px); }
	/* "More" menu: labelled list above the tab bar */
	.dock-sheet {
		left: auto; right: 8px; transform: none; bottom: calc(100% + 8px); min-width: 210px; padding: 6px;
		background: rgba(18, 18, 22, 0.97); box-shadow: 0 14px 40px rgba(0,0,0,0.55);
	}
	.dock-sheet .dock-item {
		flex: none; width: 100%; height: 48px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px;
	}
	.dock-sheet .dock-item .dock-tip { font-size: 15px; font-weight: 600; color: var(--text, #fff); }
	body:not(.watch-mode) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

	/* messages pop above the tab bar, full width */
	#toast-stack { left: 12px; right: 12px; transform: none; bottom: calc(76px + env(safe-area-inset-bottom)); }
	#toast-stack .toast { width: 100%; max-width: none; }

	/* small links / dots get a bigger invisible hit area */
	.see-all { padding: 10px 2px 10px 12px; margin: -10px 0; display: inline-block; }
	.hero-dot::after { content: ""; position: absolute; inset: -13px -4px; }

	/* footer: just the brand line on phones */
	.footer-grid { display: none; }

	/* episodes: compact rows (thumbnail left, text right) */
	.episode-row .ep-link { flex-direction: row; align-items: flex-start; gap: 12px; padding: 8px; }
	.episode-row .ep-media { width: 136px; }
	.ep-text { padding-right: 38px; }
	.ep-line1 { flex-direction: column; align-items: flex-start; gap: 2px; }
	.ep-line1 strong { font-size: 14px; line-height: 1.3; }
	.ep-desc { font-size: 12px; -webkit-line-clamp: 2; line-clamp: 2; }
	.ep-party { top: 8px; right: 4px; transform: none; width: 36px; height: 36px; }
	.ep-party:hover { transform: scale(1.05); }
	.episode-list { gap: 6px; }

	/* watch page: icon back button, bigger edge-to-edge player */
	.watch-body { padding-top: calc(var(--nav-height) + 12px); }
	.watch-topbar { gap: 12px; margin-bottom: 12px; align-items: center; }
	.watch-topbar > a.btn:first-child {
		flex: none; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%;
		font-size: 0; justify-content: center;
	}
	.watch-topbar > a.btn:first-child::before { content: "←"; font-size: 20px; line-height: 1; }
	.watch-titles strong { font-size: 16px; line-height: 1.25; }
	.watch-titles span { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.watch-body .player-slot.has-embed:not(:fullscreen) {
		width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; border-radius: 0;
	}
	.party-room .watch-topbar > a.btn:first-child { width: 44px; }

	/* detail page */
	.detail-poster { max-width: 170px; }
	.season-tab { min-height: 40px; }

	/* chips / pills: thumb-sized */
	.cat-pill { min-height: 38px; }
	.community-tab { padding-block: 10px; }
	.post-actions .post-act { min-height: 38px; min-width: 40px; padding-inline: 8px; }
}

/* very narrow phones (≤ 360px) */
@media (max-width: 360px) {
	.dock-item .dock-tip { font-size: 9.5px; }
	.nav .icon-btn { width: 36px; height: 36px; }
	.episode-row .ep-media { width: 112px; }
}
@media (max-width: 640px) {
	.toast-close { min-width: 36px; min-height: 36px; font-size: 15px; }
	.toast { padding-block: 6px; }
}
@media (max-width: 640px) {
	.post-card { min-width: 0; max-width: 100%; }
	.post-card * { overflow-wrap: anywhere; }
	.post-actions { gap: 2px; justify-content: space-between; flex-wrap: nowrap; }
	.post-actions .post-act { min-width: 36px; padding-inline: 4px; }
}

/* =====================================================================
   LIGHTER LAYOUT — less on screen, more breathing room
===================================================================== */
/* the watch-party strip on home: one slim line instead of a big card */
.party-pill-row .party-pill { padding-block: 10px; }

@media (max-width: 640px) {
	/* home: keep what people actually use — hero, continue watching,
	   trending, categories, series, movies. Social extras live in "More". */
	.talk-strip-row,
	.party-pill-row,
	.home-trending { display: none !important; }
	.hero { min-height: 64vh; }
	.hero-desc { -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
	.rows .row { margin-bottom: 30px; }
	.row-head { margin-bottom: 12px; }
	/* categories: one swipeable line instead of a wall of chips */
	.cat-strip {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
		margin-inline: calc(-1 * var(--page-pad)); padding: 0 var(--page-pad) 4px; gap: 8px; margin-bottom: 16px;
	}
	.cat-strip::-webkit-scrollbar { display: none; }
	.cat-strip .cat-pill { flex: none; }
	/* cards: rating only — the "TRENDING" sticker on every card was noise */
	.tg-badge-trending { display: none; }

	/* detail page: one big Play button, three small ones under it */
	#theme-suggest { display: none; }
	.detail-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.detail-actions > .btn-primary { grid-column: 1 / -1; justify-content: center; height: 50px; font-size: 16px; }
	.detail-actions > .btn-glass { padding: 0 6px; font-size: 13.5px; justify-content: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.detail-actions > .btn-glass svg { display: none; }
	.detail-actions .community-count-badge { display: none; }
	.lang-chips { display: none; }      /* details stay one tap away (🌐 button) */
	.lang-block { margin-bottom: 12px; }
	.synopsis-text { -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (max-width: 640px) {
	.cast-row { gap: 12px; }
	.cast-card { width: 76px; min-width: 76px; }
	.cast-card .cast-photo { width: 64px; height: 64px; font-size: 22px; }
	.cast-name { font-size: 12px; }
	.cast-character { font-size: 11px; }
	.detail-heading { margin-top: 28px; }
}

/* =====================================================================
   "Get app" button + install sheet (appShell.js)
===================================================================== */
.get-app-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 10px;
	border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #fff;
	background: var(--accent-gradient, linear-gradient(135deg, #7d7aff, #ff6482));
	box-shadow: 0 4px 14px rgba(125, 122, 255, 0.35); white-space: nowrap;
}
.get-app-btn[hidden] { display: none; }
.get-app-btn svg { width: 17px; height: 17px; flex: none; }
.get-app-btn:hover { filter: brightness(1.08); }
.get-app-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.in-app .get-app-btn, html.is-standalone .get-app-btn { display: none !important; }
@media (max-width: 640px) {
	.get-app-btn { height: 34px; padding: 0 11px 0 9px; font-size: 12.5px; }
}
@media (max-width: 380px) {
	.get-app-btn span { display: none; }
	.get-app-btn { width: 36px; padding: 0; justify-content: center; }
}

.ga-overlay {
	position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(0, 0, 0, 0); transition: background 0.2s ease;
}
.ga-overlay.is-in { background: rgba(0, 0, 0, 0.6); }
.ga-sheet {
	position: relative; width: min(420px, 100%); max-height: 88vh; overflow: auto; padding: 26px 24px 22px;
	border-radius: 22px; background: #141418; border: 1px solid rgba(255,255,255,0.1); color: #fff; text-align: center;
	box-shadow: 0 24px 70px rgba(0,0,0,0.6); transform: translateY(14px); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease;
}
.ga-overlay.is-in .ga-sheet { transform: none; opacity: 1; }
.ga-x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.08); color: #fff; font-size: 15px; cursor: pointer; }
.ga-icon img { width: 64px; height: 64px; border-radius: 16px; display: block; margin: 0 auto 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.ga-sheet h2 { margin: 0 0 8px; font-size: 21px; }
.ga-lead { margin: 0 0 16px; color: rgba(255,255,255,0.75); line-height: 1.5; font-size: 14.5px; }
.ga-dl { width: 100%; justify-content: center; gap: 8px; height: 50px; font-size: 16px; }
.ga-dl svg { width: 19px; height: 19px; }
.ga-meta { margin: 8px 0 14px; font-size: 12.5px; color: rgba(255,255,255,0.55); }
.ga-steps, .ga-plat { text-align: left; margin: 6px 0 4px; padding-left: 22px; color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.55; }
.ga-steps li, .ga-plat li { margin-bottom: 6px; }
.ga-inline { width: 17px; height: 17px; vertical-align: -3px; }
.ga-alt { display: inline-block; margin-top: 12px; border: 0; background: none; color: var(--accent, #9c9aff); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; padding: 6px; }
@media (max-width: 640px) {
	.ga-overlay { align-items: flex-end; padding: 0; }
	.ga-sheet { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: max(22px, env(safe-area-inset-bottom)); max-height: 90vh; }
}


/* =====================================================================
   CALMER TYPE + LAYOUT — smaller titles, shorter text, fewer chips
===================================================================== */
/* hero: big but not shouting */
.hero-title { font-size: clamp(30px, 5.2vw, 60px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; margin-bottom: 10px; }
.hero-meta { font-size: 13px; gap: 8px; margin-bottom: 12px; }
.hero-desc {
	font-size: 15px; line-height: 1.55; max-width: 52ch; margin-bottom: 20px; color: rgba(255,255,255,0.72);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.eyebrow { font-size: 11.5px; }

/* rows */
.row-title { font-size: clamp(17px, 1.7vw, 21px); font-weight: 650; letter-spacing: -0.01em; }
.row-title .count { font-size: 0.8em; }
.detail-heading { font-size: clamp(16px, 1.5vw, 19px); font-weight: 650; margin: 34px 0 12px; }

/* home categories: one calm, swipeable line on every screen */
.cat-strip {
	flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 4px;
	-webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip .cat-pill { flex: none; }

/* detail page */
.detail-title { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.detail-alt { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-tertiary, rgba(255,255,255,0.5)); }
.detail-meta { font-size: 13.5px; gap: 7px; margin-bottom: 6px; color: rgba(255,255,255,0.75); }
.detail-meta .dm-rating { color: #fff; font-weight: 700; }
.detail-meta .dm-age { border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; padding: 0 5px; font-size: 11.5px; }
.detail-genres { margin: 0 0 18px; font-size: 13px; color: var(--text-secondary, rgba(255,255,255,0.6)); display: flex; flex-wrap: wrap; gap: 6px; }
.detail-genres .sep, .detail-meta .sep { color: rgba(255,255,255,0.3); }
.synopsis-text { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.lang-block { margin-top: 0; }

/* watch page: player, then one swipeable strip of episodes */
.watch-eps { max-width: 980px; margin: 14px auto 0; }
.watch-eps-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.watch-eps-title { margin: 0; font-size: 16px; font-weight: 650; }
.watch-eps-title span { font-weight: 500; color: var(--text-secondary, rgba(255,255,255,0.55)); font-size: 13.5px; margin-left: 6px; }
.watch-nav { display: flex; gap: 6px; }
.wnav-btn {
	height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.06); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.wnav-btn:hover:not([disabled]) { background: rgba(255,255,255,0.12); }
.wnav-btn[disabled] { opacity: 0.35; cursor: default; }
.watch-ep-strip {
	display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
	padding-bottom: 6px; -webkit-overflow-scrolling: touch;
}
.watch-ep-strip::-webkit-scrollbar { display: none; }
.wep { flex: 0 0 168px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.wep-thumb {
	position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center;
	border: 2px solid transparent;
}
.wep-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wep-num { position: relative; z-index: 1; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,0.55); }
.wep-check { position: absolute; top: 5px; right: 5px; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.6); font-size: 10px; display: flex; align-items: center; justify-content: center; }
.wep-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.2); z-index: 1; }
.wep-bar i { display: block; height: 100%; background: var(--accent-gradient, #7d7aff); }
.wep-title { font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,0.78); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wep.is-current .wep-thumb { border-color: var(--accent, #7d7aff); }
.wep.is-current .wep-num { background: var(--accent, #7d7aff); }
.wep.is-current .wep-title { color: #fff; font-weight: 600; }
.wep:hover .wep-thumb { border-color: rgba(255,255,255,0.35); }
.wep:focus-visible { outline: none; }
.wep:focus-visible .wep-thumb { outline: 2px solid var(--accent, #7d7aff); outline-offset: 2px; }

/* episode list on the show page: lighter rows */
.ep-desc { font-size: 12.5px; color: rgba(255,255,255,0.55); -webkit-line-clamp: 2; line-clamp: 2; }
.ep-line1 strong { font-weight: 600; }

@media (max-width: 640px) {
	.hero-title { font-size: clamp(28px, 8vw, 38px); }
	.hero-desc { font-size: 14px; }
	.row-title { font-size: 17px; }
	.detail-title { font-size: 24px; }
	.synopsis-text { font-size: 14px; }
	.watch-eps { margin-top: 12px; }
	.wep { flex-basis: 136px; }
	.wep-title { font-size: 12px; }
	.ep-desc { display: none; }     /* titles are enough on a phone */
	.episode-row .ep-media { width: 120px; }
	.watch-body { padding-bottom: 24px; }
}
.archive-title { font-size: clamp(22px, 2.8vw, 32px); font-weight: 700; }
.archive-desc { font-size: 13px; }
.ep-more-row { list-style: none; display: flex; justify-content: center; padding: 8px 0 4px; }
.ep-more { height: 40px; font-size: 14px; }
/* show-page episode rows: smaller thumbnails, one-line description on big screens */
.ep-media { width: 150px; }
.episode-row .ep-link { padding: 10px 12px; gap: 14px; }
.ep-desc { -webkit-line-clamp: 1; line-clamp: 1; }
.episode-list { gap: 6px; }

/* =====================================================================
   Sideways lists: ‹ › buttons for mouse users (scrollArrows.js)
===================================================================== */
.hs-wrap { position: relative; }
.hs-arrow {
	position: absolute; z-index: 5; top: 50%; width: 42px; height: 42px; margin-top: -21px; padding: 0;
	display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(255,255,255,0.18); background: rgba(16, 16, 20, 0.88); color: #fff;
	box-shadow: 0 6px 18px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s ease;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hs-arrow svg { width: 20px; height: 20px; }
.hs-l { left: -6px; }
.hs-r { right: -6px; }
.hs-wrap.hs-overflow:hover .hs-arrow:not(.is-off),
.hs-wrap.hs-overflow:focus-within .hs-arrow:not(.is-off) { opacity: 1; pointer-events: auto; }
.hs-arrow:hover { background: rgba(40, 40, 48, 0.95); transform: scale(1.06); }
.hs-arrow:active { transform: scale(0.96); }
/* line the arrows up with the pictures, not the captions under them */
.hs-eps .hs-arrow { top: 48px; }
.hs-row .hs-arrow { top: calc(50% - 6px); }
.hs-chips .hs-arrow { width: 34px; height: 34px; margin-top: -19px; }
.hs-cast .hs-arrow { top: 42px; }
/* episode strip under the player: a slim, always-visible scrollbar for mouse users */
@media (hover: hover) and (pointer: fine) {
	.watch-ep-strip { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; padding-bottom: 10px; }
	.watch-ep-strip::-webkit-scrollbar { display: block; height: 6px; }
	.watch-ep-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 3px; }
	.watch-ep-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
	.watch-ep-strip::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }
}
@media (hover: none), (pointer: coarse) {
	.hs-arrow { display: none; }
}