/* ============================================================
   TUBEBITE.CC — synthwave-arcade pixel-art theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Press+Start+2P&family=VT323&display=swap');

:root {
	--bg:          #0e0524;
	--bg-raised:   #1a0c3d;
	--bg-sunken:   #06021a;
	--bg-grid:     #1e0f4a;

	--pink:        #ff2a6d;
	--pink-dim:    #9c0b41;
	--cyan:        #00f0ff;
	--cyan-dim:    #007f8a;
	--yellow:      #ffd300;
	--green:       #7fff5c;
	--red:         #ff4444;

	--text:        #f1f1f1;
	--text-dim:    #a090c4;
	--text-locked: #6a5a8a;

	--pixel: 4px;

	--font-pixel: 'Press Start 2P', monospace;
	--font-body:  'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
	--font-mono:  'VT323', monospace;
}

/* ---------- reset ---------- */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, video, canvas, .pixel-art {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(180deg, rgba(14,5,36,0.0) 0%, rgba(14,5,36,0.85) 80%, var(--bg) 100%),
		radial-gradient(ellipse at top, rgba(255,42,109,0.18) 0%, transparent 55%),
		radial-gradient(ellipse at bottom, rgba(0,240,255,0.12) 0%, transparent 50%),
		repeating-linear-gradient(0deg, var(--bg-grid) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(90deg, var(--bg-grid) 0 1px, transparent 1px 40px),
		var(--bg);
	background-attachment: fixed;
	position: relative;
	overflow-x: hidden;
}

main {
	flex: 1 0 auto;
}

/* CRT scanline overlay */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0,0,0,0.0) 0,
		rgba(0,0,0,0.0) 2px,
		rgba(0,0,0,0.18) 3px,
		rgba(0,0,0,0.0) 4px
	);
	pointer-events: none;
	z-index: 9999;
	mix-blend-mode: multiply;
}

/* Subtle screen vignette */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.6) 100%);
	pointer-events: none;
	z-index: 9998;
}

/* ---------- typography ---------- */

h1, h2, h3, h4, h5, h6, .pixel-font {
	font-family: var(--font-pixel);
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 1.4;
	color: var(--text);
	text-transform: uppercase;
}

/* Keep Press Start 2P pixel-crisp; body font stays smoothed */
h1, h2, h3, h4, h5, h6, .pixel-font,
.btn-pixel, .site-logo, .site-nav a, .feature-icon,
.summary-card .card-title, .locked-badge, .lock-icon,
.locked-panel .big-lock, .admin-subnav a,
.stat-card .stat-value, .pixel-table th,
.channel-thumb .channel-initial, .channel-thumb-lg .channel-initial,
.yt-result-thumb .channel-initial, .yt-result-title,
.ctrl-btn, .time-display, .timestamp-btn, .keyword-tag {
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: auto;
}

h1 { font-size: 36px; color: var(--pink); text-shadow: 0 0 10px rgba(255,42,109,0.6), 4px 4px 0 #000; }
h2 { font-size: 24px; color: var(--cyan); text-shadow: 3px 3px 0 #000; }
h3 { font-size: 16px; color: var(--yellow); text-shadow: 2px 2px 0 #000; }
h4 { font-size: 14px; color: var(--text); }

p, li { font-size: 17px; line-height: 1.65; color: var(--text); }
.dim { color: var(--text-dim); }

a { color: var(--cyan); text-decoration: none; border-bottom: 2px dashed var(--cyan-dim); transition: color 120ms, border-color 120ms; }
a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

code, pre { font-family: var(--font-mono); font-size: 17px; background: var(--bg-sunken); color: var(--green); padding: 2px 6px; }

/* ---------- layout ---------- */

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

.section {
	padding-top: 64px;
	padding-bottom: 64px;
}

@media (max-width: 720px) {
	.container { padding: 0 16px; }
	.section { padding-top: 40px; padding-bottom: 40px; }
}

/* ---------- pixel card ---------- */

.pixel-card {
	background: var(--bg-raised);
	border: var(--pixel) solid var(--cyan);
	padding: 24px;
	position: relative;
	box-shadow:
		var(--pixel) var(--pixel) 0 0 var(--pink),
		calc(var(--pixel) * 2) calc(var(--pixel) * 2) 0 0 rgba(0,0,0,0.7);
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.pixel-card:hover {
	transform: translate(-2px, -2px);
	box-shadow:
		calc(var(--pixel) + 2px) calc(var(--pixel) + 2px) 0 0 var(--pink),
		calc((var(--pixel) * 2) + 2px) calc((var(--pixel) * 2) + 2px) 0 0 rgba(0,0,0,0.7);
}

.pixel-card.accent-pink { border-color: var(--pink); box-shadow: var(--pixel) var(--pixel) 0 0 var(--cyan), calc(var(--pixel) * 2) calc(var(--pixel) * 2) 0 0 rgba(0,0,0,0.7); }
.pixel-card.accent-pink:hover { box-shadow: calc(var(--pixel) + 2px) calc(var(--pixel) + 2px) 0 0 var(--cyan), calc((var(--pixel) * 2) + 2px) calc((var(--pixel) * 2) + 2px) 0 0 rgba(0,0,0,0.7); }

.pixel-card.accent-yellow { border-color: var(--yellow); box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink), calc(var(--pixel) * 2) calc(var(--pixel) * 2) 0 0 rgba(0,0,0,0.7); }

/* ---------- pixel button ---------- */

.btn-pixel {
	display: inline-block;
	font-family: var(--font-pixel);
	font-size: 14px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 18px 28px;
	background: var(--pink);
	color: #000;
	border: 0;
	border-bottom: var(--pixel) solid var(--pink-dim);
	border-right: var(--pixel) solid var(--pink-dim);
	cursor: pointer;
	transition: transform 80ms, box-shadow 80ms;
	text-decoration: none;
	user-select: none;
}
.btn-pixel:hover {
	background: var(--yellow);
	color: #000;
	border-bottom-color: #000;
	border-right-color: #000;
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 0 #000;
}
.btn-pixel:active {
	transform: translate(2px, 2px);
	box-shadow: none;
	border-bottom-width: 0;
	border-right-width: 0;
	border-top: var(--pixel) solid #000;
	border-left: var(--pixel) solid #000;
	padding-top: calc(18px + var(--pixel));
	padding-left: calc(28px + var(--pixel));
	padding-bottom: 18px;
	padding-right: 28px;
}

.btn-pixel.btn-cyan   { background: var(--cyan);   border-bottom-color: var(--cyan-dim); border-right-color: var(--cyan-dim); }
.btn-pixel.btn-yellow { background: var(--yellow); border-bottom-color: #7a6400;         border-right-color: #7a6400; color: #000; }
.btn-pixel.btn-ghost  { background: transparent; color: var(--cyan); border: var(--pixel) solid var(--cyan); }
.btn-pixel.btn-ghost:hover { background: var(--cyan); color: #000; }

/* Nav links are styled globally (.site-nav a { color: var(--text) }); buttons inside
   the nav must retain their button foreground for readable contrast in every state. */
.site-nav a.btn-pixel,
.site-nav a.btn-pixel:hover { color: #000; }
.site-nav a.btn-pixel.btn-ghost { color: var(--cyan); }
.site-nav a.btn-pixel.btn-ghost:hover { color: #000; }

/* ---------- sign-in flash banner ---------- */

.signin-flash {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 10px 16px;
	background: var(--bg-sunken);
	border-bottom: var(--pixel) solid var(--yellow);
	color: var(--text);
	font-size: 13px;
	text-align: center;
}
.signin-flash__x {
	background: transparent;
	color: var(--cyan);
	border: var(--pixel) solid var(--cyan);
	font-family: var(--font-pixel);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 6px 12px;
	cursor: pointer;
}
.signin-flash__x:hover { background: var(--cyan); color: #000; }

/* ---------- sign-in chooser modal ---------- */

body.signin-modal-open { overflow: hidden; }

.signin-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.signin-modal[hidden] { display: none; }

.signin-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 2, 26, 0.82);
}

.signin-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: var(--bg-raised);
	border: var(--pixel) solid var(--cyan);
	box-shadow: 10px 10px 0 0 #000;
	padding: 28px 24px 24px;
	text-align: center;
}

.signin-modal__x {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: 0;
	color: var(--text-dim);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.signin-modal__x:hover { color: var(--pink); }

.signin-modal__title {
	font-family: var(--font-pixel);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--cyan);
	margin: 0 0 6px;
}
.signin-modal__sub {
	color: var(--text-dim);
	font-size: 13px;
	margin: 0 0 22px;
}
.signin-modal__options {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.signin-modal__btn {
	display: block;
	text-align: center;
	padding: 14px 16px;
	font-size: 12px;
}
/* .btn-pixel:active hardcodes the base button's 18px/28px padding for its
   pressed-shift effect. These buttons are block-width in a fixed-size dialog,
   so that padding jump shrinks the content box mid-click and wraps the longer
   label ("Continue with Ultidem") onto two lines. Re-state the pressed shift
   using THIS button's padding; equal specificity, later in the file, so it
   wins while the base rule's border swap still provides the pressed look. */
.signin-modal__btn:active {
	padding: calc(14px + var(--pixel)) 16px 14px calc(16px + var(--pixel));
}

/* ---------- header / nav ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg-sunken);
	border-bottom: var(--pixel) solid var(--pink);
	box-shadow: 0 var(--pixel) 0 0 rgba(255,42,109,0.4);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 16px;
	gap: 24px;
}

.site-logo {
	font-family: var(--font-pixel);
	font-size: 20px;
	color: var(--yellow);
	text-decoration: none;
	border: none;
	text-shadow: 2px 2px 0 var(--pink), 4px 4px 0 #000;
	letter-spacing: 2px;
	white-space: nowrap;
	display: inline-block;
	transform-origin: left center;
	transition: filter 220ms ease, color 220ms ease;
}
.site-logo:hover {
	color: var(--cyan);
	filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.6));
}
.site-header.logo-intro .site-logo {
	animation: logoPop 650ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes logoPop {
	0%   { opacity: 0; transform: scale(0.55) translateY(-6px); }
	55%  { opacity: 1; transform: scale(1.12) translateY(0); }
	80%  { transform: scale(0.96); }
	100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.site-header.logo-intro .site-logo { animation: none; }
}

.site-nav {
	display: flex;
	gap: 24px;
	align-items: center;
}

.site-nav a {
	font-family: var(--font-pixel);
	font-size: 11px;
	color: var(--text);
	border: none;
	letter-spacing: 1px;
	padding: 8px 0;
}
.site-nav a:hover { color: var(--cyan); }
.site-nav a.active { color: var(--yellow); border-bottom: 2px solid var(--yellow); }

/* ---------- mobile nav toggle (hamburger) ---------- */

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--yellow);
	border: 2px solid #000;
	box-shadow: 3px 3px 0 var(--pink);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	transition: transform 80ms, box-shadow 80ms, background 80ms;
}
.nav-toggle:hover {
	background: var(--cyan);
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--pink);
}
.nav-toggle:active {
	transform: translate(1px, 1px);
	box-shadow: none;
}
.nav-toggle span {
	display: block;
	width: 22px;
	height: 3px;
	background: #000;
	transition: transform 120ms, opacity 120ms;
}
.nav-toggle.is-open { background: var(--pink); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
	.site-header .container {
		flex-wrap: wrap;
		gap: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.site-logo { font-size: 16px; }
	.nav-toggle { display: flex; }
	.site-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0 4px;
		margin-top: 4px;
		border-top: 2px dashed var(--cyan-dim);
	}
	.site-nav.is-open { display: flex; }
	.site-nav a {
		padding: 14px 4px;
		font-size: 12px;
		border-bottom: 1px dashed rgba(160, 144, 196, 0.2);
	}
	.site-nav a.active {
		color: var(--yellow);
		border-bottom: 1px dashed rgba(160, 144, 196, 0.2);
		background: rgba(255, 211, 0, 0.08);
		padding-left: 12px;
	}
	.site-nav .btn-pixel {
		margin-top: 8px;
		text-align: center;
		width: 100%;
		box-sizing: border-box;
	}
}

/* ---------- admin: tier impersonation switcher ---------- */

.impersonate-form {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-pixel);
}
.impersonate-form label {
	font-size: 10px;
	color: var(--text-dim);
	letter-spacing: 1px;
}
.impersonate-form select {
	font-family: var(--font-pixel);
	font-size: 11px;
	background: #000;
	color: var(--cyan);
	border: 2px solid var(--cyan-dim);
	padding: 6px 10px;
	letter-spacing: 1px;
	cursor: pointer;
}

/* ---------- hero ---------- */

.hero {
	padding: 96px 0 64px;
	text-align: center;
	position: relative;
}

.hero h1 {
	font-size: clamp(28px, 6vw, 56px);
	line-height: 1.2;
	margin-bottom: 32px;
	color: var(--pink);
	text-shadow:
		0 0 20px rgba(255,42,109,0.5),
		4px 4px 0 var(--cyan),
		8px 8px 0 #000;
	animation: flicker 6s infinite;
}
.hero h1 .highlight { color: var(--yellow); text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 #000; }

.hero p.lead {
	font-size: 22px;
	font-weight: 500;
	max-width: 640px;
	margin: 0 auto 48px;
	color: var(--text-dim);
	letter-spacing: 0.3px;
}

.hero-actions { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }

@keyframes flicker {
	0%, 97%, 100% { opacity: 1; }
	97.5% { opacity: 0.85; }
	98% { opacity: 1; }
	98.5% { opacity: 0.9; }
	99% { opacity: 1; }
}

/* ---------- feature grid ---------- */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
}

.feature-icon {
	font-family: var(--font-pixel);
	font-size: 32px;
	color: var(--yellow);
	margin-bottom: 16px;
	display: inline-block;
	text-shadow: 3px 3px 0 #000;
}

/* ---------- summary grid ---------- */

.summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px;
}

.summary-card {
	background: var(--bg-raised);
	border: var(--pixel) solid var(--cyan);
	padding: 0;
	box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink), calc(var(--pixel) * 2) calc(var(--pixel) * 2) 0 0 rgba(0,0,0,0.7);
	transition: transform 120ms, box-shadow 120ms;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}
.summary-card:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--pixel) + 2px) calc(var(--pixel) + 2px) 0 0 var(--pink), calc((var(--pixel) * 2) + 2px) calc((var(--pixel) * 2) + 2px) 0 0 rgba(0,0,0,0.7); }

.summary-card .thumb {
	aspect-ratio: 16 / 9;
	background: var(--bg-sunken);
	background-size: cover;
	background-position: center;
	border-bottom: var(--pixel) solid var(--cyan);
	position: relative;
	filter: saturate(1.2) contrast(1.05);
}

.summary-card .body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.summary-card .card-title { font-family: var(--font-pixel); font-size: 12px; line-height: 1.4; color: var(--cyan); text-shadow: 2px 2px 0 #000; }
.summary-card .card-channel { color: var(--text-dim); font-size: 14px; line-height: 1.4; }
.summary-card .card-date { color: var(--yellow); font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: auto; padding-top: 8px; }
.summary-card a.card-link { color: inherit; text-decoration: none; border: none; display: flex; flex-direction: column; flex: 1; }

/* locked overlay */
.summary-card.locked .thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(45deg, rgba(0,0,0,0.55) 0 8px, rgba(0,0,0,0.75) 8px 16px),
		rgba(14,5,36,0.35);
}

.locked-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	font-family: var(--font-pixel);
	font-size: 10px;
	background: var(--yellow);
	color: #000;
	padding: 8px 10px;
	border: 2px solid #000;
	box-shadow: 3px 3px 0 var(--pink);
	letter-spacing: 1px;
}

.lock-icon {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-pixel);
	font-size: 42px;
	color: var(--yellow);
	text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 #000;
	z-index: 2;
	letter-spacing: 4px;
}

/* ---------- summary detail ---------- */

.summary-hero {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) 2fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 720px) { .summary-hero { grid-template-columns: 1fr; } }

.summary-hero .thumb-large {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	border: var(--pixel) solid var(--cyan);
	box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink), calc(var(--pixel) * 2) calc(var(--pixel) * 2) 0 0 rgba(0,0,0,0.7);
}

.summary-meta { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.summary-meta h1 { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.summary-meta .channel { color: var(--yellow); font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; overflow-wrap: anywhere; }
.summary-meta .date { color: var(--text-dim); font-size: 15px; }
@media (max-width: 720px) {
	.summary-meta h1 { font-size: 22px !important; }
}

.summary-body {
	margin-top: 48px;
	background: var(--bg-raised);
	border-left: var(--pixel) solid var(--cyan);
	padding: 32px;
}
.summary-body p { font-size: 17px; line-height: 1.7; margin-bottom: 18px; color: var(--text); }
.summary-body p:last-child { margin-bottom: 0; }
.summary-body h2, .summary-body h3 { margin-top: 32px; margin-bottom: 16px; }
.summary-body h2:first-child, .summary-body h3:first-child { margin-top: 0; }

@media (max-width: 720px) {
	.summary-body { padding: 20px 18px; margin-top: 32px; }
	.pixel-card { padding: 18px; }
	.locked-panel { padding: 32px 18px; }
}

/* Teaser+lock combo: shown on the summary page when the AI body is gated.
   The teaser is the first ~320 chars of the summary, fading into a dashed
   locked-panel CTA below. The video, title, channel and date above still
   render normally — only the AI write-up is hidden. */
.summary-locked {
	margin-top: 48px;
	background: var(--bg-raised);
	border-left: var(--pixel) solid var(--cyan);
	padding: 32px;
}
.summary-locked > h3:first-child { margin-top: 0; margin-bottom: 16px; }
.summary-locked .summary-teaser {
	position: relative;
	max-height: 30em;
	overflow: hidden;
}
.summary-locked .summary-teaser p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text);
	margin: 0;
}
.summary-locked .summary-teaser::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4em;
	background: linear-gradient(to bottom, rgba(26,12,61,0) 0%, var(--bg-raised) 90%);
	pointer-events: none;
}
.summary-locked .locked-panel { margin-top: 0; }
@media (max-width: 720px) {
	.summary-locked { padding: 20px 18px; }
}

/* locked full-page CTA */
.locked-panel {
	margin-top: 48px;
	padding: 48px 32px;
	text-align: center;
	background: var(--bg-raised);
	border: var(--pixel) dashed var(--yellow);
	box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink);
}
.locked-panel .big-lock {
	font-family: var(--font-pixel);
	font-size: 56px;
	color: var(--yellow);
	text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 #000;
	margin-bottom: 24px;
	display: inline-block;
	animation: bounce 1.2s infinite ease-in-out;
}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.locked-panel p { margin-bottom: 32px; color: var(--text-dim); font-size: 17px; line-height: 1.6; }

/* ---------- footer ---------- */

.site-footer {
	margin-top: 96px;
	padding: 32px 0;
	border-top: var(--pixel) solid var(--pink);
	background: var(--bg-sunken);
	text-align: center;
	color: var(--text-dim);
	font-size: 14px;
}
.site-footer .pixel-font { color: var(--yellow); font-size: 12px; }

/* ---------- admin ---------- */

.admin-subnav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 16px 0;
	border-bottom: 2px dashed var(--cyan-dim);
	margin-bottom: 32px;
}
.admin-subnav a {
	font-family: var(--font-pixel);
	font-size: 10px;
	padding: 10px 14px;
	color: var(--text);
	background: var(--bg-sunken);
	border: 2px solid var(--cyan-dim);
	text-decoration: none;
	letter-spacing: 1px;
}
.admin-subnav a:hover { background: var(--cyan); color: #000; border-color: var(--cyan); }
.admin-subnav a.active { background: var(--yellow); color: #000; border-color: var(--yellow); }

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	margin-bottom: 48px;
}

.stat-card {
	background: var(--bg-raised);
	border: var(--pixel) solid var(--cyan);
	padding: 20px;
	box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink);
	text-align: center;
}
.stat-card .stat-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	color: var(--text-dim);
	letter-spacing: 2px;
	margin-bottom: 12px;
	text-transform: uppercase;
}
.stat-card .stat-value {
	font-family: var(--font-pixel);
	font-size: 28px;
	color: var(--yellow);
	text-shadow: 2px 2px 0 #000;
	line-height: 1.2;
}
.stat-card.accent-pink { border-color: var(--pink); box-shadow: var(--pixel) var(--pixel) 0 0 var(--cyan); }
.stat-card.accent-pink .stat-value { color: var(--pink); }
.stat-card.accent-green { border-color: var(--green); box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink); }
.stat-card.accent-green .stat-value { color: var(--green); }
.stat-card.accent-red { border-color: var(--red); box-shadow: var(--pixel) var(--pixel) 0 0 var(--yellow); }
.stat-card.accent-red .stat-value { color: var(--red); }

.pixel-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-raised);
	border: var(--pixel) solid var(--cyan);
	box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink);
	font-family: var(--font-body);
	font-size: 15px;
}
.pixel-table th {
	background: var(--bg-sunken);
	color: var(--yellow);
	font-family: var(--font-pixel);
	font-size: 10px;
	letter-spacing: 1px;
	padding: 14px 12px;
	text-align: left;
	border-bottom: 3px solid var(--cyan);
}
.pixel-table td {
	padding: 12px;
	border-bottom: 1px solid rgba(0, 240, 255, 0.15);
	vertical-align: top;
}
.pixel-table tr:hover td { background: rgba(0, 240, 255, 0.06); }
.pixel-table td a { border-bottom: none; }

.tag {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	padding: 4px 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border: 2px solid;
}
.tag-admin   { color: var(--yellow); border-color: var(--yellow); }
.tag-user    { color: var(--text-dim); border-color: var(--text-dim); }
.tag-active  { color: var(--green); border-color: var(--green); }
.tag-none    { color: var(--text-dim); border-color: var(--text-dim); }
.tag-pastdue { color: var(--red); border-color: var(--red); }
.tag-canceled { color: var(--pink); border-color: var(--pink); }

.mini-thumb {
	width: 96px;
	height: 54px;
	background-size: cover;
	background-position: center;
	border: 2px solid var(--cyan-dim);
	display: inline-block;
	vertical-align: middle;
}

/* ---------- channel thumbnail (account page) ---------- */

.channel-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--bg-raised);
	border-bottom: 2px solid var(--cyan-dim);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.channel-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.channel-thumb .channel-initial {
	font-family: var(--font-pixel);
	font-size: 42px;
	color: var(--cyan);
	text-shadow: 3px 3px 0 var(--pink);
	user-select: none;
}

/* ---------- channel card action buttons (account page) ---------- */

.channel-card-actions {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.channel-card-actions-row {
	display: flex;
	gap: 8px;
}
.channel-card-btn-form {
	flex: 1;
	min-width: 0;
}
.channel-card-btn {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.2px;
	padding: 10px 8px;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}
.channel-card-btn.primary {
	font-size: 13px;
}
.channel-card-actions-row .channel-card-btn {
	flex: 1;
}
.channel-card-btn.danger {
	background: var(--red);
	border-bottom-color: #8a0000;
	border-right-color: #8a0000;
	color: #fff;
}

/* ---------- frequency picker (account page) ---------- */

.freq-picker {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--cyan-dim);
}

.freq-picker form { flex: 1; min-width: 0; }

.freq-picker button {
	width: 100%;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	padding: 8px 4px;
	letter-spacing: 1.2px;
	background: var(--bg-sunken);
	color: var(--text-dim);
	border: 2px solid var(--cyan-dim);
	cursor: pointer;
	text-transform: uppercase;
}

.freq-picker button:hover:not(.active) {
	color: var(--cyan);
	border-color: var(--cyan);
}

.freq-picker button.active {
	background: var(--yellow);
	color: #000;
	border-color: var(--yellow);
	cursor: default;
}

.freq-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	color: var(--text-dim);
	letter-spacing: 1.5px;
	margin-top: 12px;
	text-transform: uppercase;
}

/* ---------- video embed + custom arcade controls ---------- */

.player-wrap {
	margin-bottom: 32px;
	box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink), calc(var(--pixel) * 2) calc(var(--pixel) * 2) 0 0 rgba(0,0,0,0.7);
}

.video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border: var(--pixel) solid var(--cyan);
	border-bottom: 0;
}
.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.custom-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bg-sunken);
	border: var(--pixel) solid var(--cyan);
	padding: 12px;
	flex-wrap: wrap;
}

.ctrl-btn {
	font-family: var(--font-pixel);
	font-size: 11px;
	color: #000;
	background: var(--cyan);
	border: 2px solid #000;
	padding: 10px 12px;
	cursor: pointer;
	box-shadow: 2px 2px 0 var(--pink);
	transition: transform 80ms, box-shadow 80ms, background 80ms;
	min-width: 40px;
	letter-spacing: 1px;
	line-height: 1;
}
.ctrl-btn:hover {
	background: var(--yellow);
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--pink);
}
.ctrl-btn:active {
	transform: translate(1px, 1px);
	box-shadow: none;
}
.ctrl-play { min-width: 56px; }

.ctrl-btn .ctrl-icon {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
	margin: 0 auto;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}
.ctrl-play .ctrl-icon { width: 22px; height: 22px; }

.volume-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100px;
	height: 18px;
	background: var(--bg-raised);
	border: 2px solid var(--cyan);
	cursor: pointer;
	padding: 0;
	margin: 0;
}
.volume-slider:hover { border-color: var(--yellow); }
.volume-slider::-webkit-slider-runnable-track {
	height: 14px;
	background: transparent;
}
.volume-slider::-moz-range-track {
	height: 14px;
	background: transparent;
	border: 0;
}
.volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 18px;
	background: var(--yellow);
	border: 2px solid #000;
	box-shadow: 2px 2px 0 var(--pink);
	cursor: pointer;
	margin-top: -2px;
}
.volume-slider::-moz-range-thumb {
	width: 10px;
	height: 18px;
	background: var(--yellow);
	border: 2px solid #000;
	box-shadow: 2px 2px 0 var(--pink);
	cursor: pointer;
	border-radius: 0;
}

.progress-wrap {
	flex: 1;
	min-width: 200px;
	padding: 0 4px;
}
.progress-bar {
	position: relative;
	height: 18px;
	background: var(--bg-raised);
	border: 2px solid var(--cyan);
	cursor: pointer;
	overflow: visible;
}
.progress-bar:hover { border-color: var(--yellow); }
.progress-fill {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 0%;
	background: var(--pink);
	box-shadow: inset 0 0 0 2px rgba(255, 42, 109, 0.5);
	pointer-events: none;
}
.chapter-tick {
	position: absolute;
	top: -3px; bottom: -3px;
	width: 3px;
	background: var(--yellow);
	transform: translateX(-1.5px);
	pointer-events: none;
	box-shadow: 0 0 0 1px #000;
	z-index: 1;
}

.time-display {
	font-family: var(--font-pixel);
	font-size: 10px;
	color: var(--cyan);
	min-width: 130px;
	text-align: center;
	text-shadow: 1px 1px 0 #000;
}

@media (max-width: 560px) {
	.custom-controls { gap: 6px; padding: 8px; }
	.ctrl-btn { padding: 8px 10px; font-size: 10px; min-width: 34px; }
	.ctrl-btn .ctrl-icon { width: 14px; height: 14px; }
	.ctrl-play .ctrl-icon { width: 18px; height: 18px; }
	.time-display { min-width: 100%; order: 5; font-size: 9px; }
	.progress-wrap { order: 4; flex-basis: 100%; padding: 6px 0; }
	.volume-slider { width: 80px; }
}

/* fullscreen: JS toggles .is-fullscreen on the wrap so the rule applies in
   every browser. On iOS (and any browser where requestFullscreen on a <div>
   fails) the JS also adds `tb-fs-locked` to <body> and falls back to a CSS
   pseudo-fullscreen — the fixed/inset/z-index here are what make that work. */
.player-wrap.is-fullscreen {
	background: #000;
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	box-shadow: none;
	margin: 0;
	padding: 0;
	max-width: none;
}
body.tb-fs-locked { overflow: hidden; touch-action: none; }
.player-wrap.is-fullscreen .video-embed {
	flex: 1 1 auto;
	aspect-ratio: auto;
	min-height: 0;
	width: 100%;
	border: 0;
}
.player-wrap.is-fullscreen .video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.player-wrap.is-fullscreen .custom-controls {
	flex: 0 0 auto;
	border: 0;
	width: 100%;
}
.player-wrap::backdrop { background: #000; }

/* ---------- main points + timestamps ---------- */

.main-points {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.main-points li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	line-height: 1.5;
}
.main-points .main-point-text { flex: 1; min-width: 0; word-wrap: break-word; }
.main-points .timestamp-btn { order: -1; }

@media (max-width: 720px) {
	.main-points { gap: 0; }
	.main-points li {
		align-items: flex-start;
		line-height: 1.55;
		padding: 12px 0;
		border-bottom: 1px dashed var(--cyan-dim);
	}
	.main-points li:first-child { padding-top: 4px; }
	.main-points li:last-child { border-bottom: 0; padding-bottom: 4px; }
	.main-points .timestamp-btn {
		order: 0;
		margin-left: auto;
		font-size: 9px;
		padding: 5px 7px;
	}
}

.timestamp-btn {
	font-family: var(--font-pixel);
	font-size: 10px;
	color: #000;
	background: var(--yellow);
	border: 2px solid #000;
	padding: 6px 8px;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 2px 2px 0 var(--pink);
	transition: transform 80ms, box-shadow 80ms;
	letter-spacing: 1px;
}
.timestamp-btn:hover {
	background: var(--cyan);
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--pink);
}
.timestamp-btn:active {
	transform: translate(1px, 1px);
	box-shadow: none;
}

.link-list {
	list-style: square;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.link-list a {
	color: var(--cyan);
	text-decoration: none;
	border-bottom: 1px dashed var(--cyan-dim);
}
.link-list a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

.keyword-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.keyword-tag {
	font-family: var(--font-pixel);
	font-size: 9px;
	color: var(--text);
	background: var(--bg-sunken);
	border: 2px solid var(--cyan-dim);
	padding: 6px 10px;
	letter-spacing: 1px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 80ms, box-shadow 80ms, background 80ms, color 80ms;
	display: inline-block;
}
a.keyword-tag:hover {
	background: var(--yellow);
	color: #000;
	border-color: #000;
	transform: translate(-1px, -1px);
	box-shadow: 2px 2px 0 var(--pink);
}

/* ---------- card channel-link (strip under each bite card) ---------- */

.summary-card a.card-channel-link {
	display: block;
	padding: 10px 16px;
	border-top: 2px solid var(--cyan-dim);
	background: var(--bg-sunken);
	color: var(--text-dim);
	font-size: 13px;
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: background 80ms, color 80ms;
}
.summary-card a.card-channel-link:hover {
	background: var(--bg-raised);
	color: var(--yellow);
}

.card-title-link {
	color: var(--cyan);
	text-decoration: none;
	display: block;
}
.card-title-link:hover { color: var(--yellow); }

.channel-link {
	color: var(--yellow);
	text-decoration: none;
	border-bottom: 2px dashed var(--yellow);
	padding-bottom: 2px;
}
.channel-link:hover { color: var(--pink); border-bottom-color: var(--pink); }

.summary-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- channel page ---------- */

.channel-banner {
	width: 100%;
	height: 240px;
	background-size: cover;
	background-position: center;
	background-color: var(--bg-sunken);
	border-bottom: var(--pixel) solid var(--cyan);
	position: relative;
}
.channel-banner.no-banner {
	background-image:
		repeating-linear-gradient(45deg, var(--bg-sunken) 0 20px, var(--bg-raised) 20px 40px);
}
.channel-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14,5,36,0) 50%, rgba(14,5,36,0.9) 100%);
	pointer-events: none;
}

.channel-head { padding-top: 32px; padding-bottom: 16px; }

.channel-identity {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.channel-thumb-lg {
	width: 120px;
	height: 120px;
	flex-shrink: 0;
	background: var(--bg-raised);
	border: var(--pixel) solid var(--cyan);
	box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink);
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.channel-thumb-lg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.channel-thumb-lg .channel-initial {
	font-family: var(--font-pixel);
	font-size: 48px;
	color: var(--cyan);
	text-shadow: 3px 3px 0 var(--pink);
}

.channel-details { flex: 1 1 260px; min-width: 0; max-width: 100%; }
.channel-details h1,
.channel-details p {
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}
.channel-details h1 {
	font-size: 24px;
	color: var(--cyan);
	text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 #000;
	line-height: 1.2;
	margin-bottom: 12px;
}
.channel-actions { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }

.subscribe-panel .freq-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.subscribe-panel .freq-picker button {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	padding: 10px 14px;
	background: var(--bg-sunken);
	color: var(--text);
	border: 2px solid var(--cyan-dim);
	cursor: pointer;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	transition: background 80ms, color 80ms, border-color 80ms;
}
.subscribe-panel .freq-picker button:hover {
	border-color: var(--yellow);
	color: var(--yellow);
}
.subscribe-panel .freq-picker button.active {
	background: var(--yellow);
	color: #000;
	border-color: #000;
	box-shadow: 2px 2px 0 var(--pink);
}

/* ---------- youtube channel search results (account page) ---------- */

.yt-search-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.yt-result-card {
	display: flex;
	flex-direction: column;
	background: var(--bg-sunken);
	border: 2px solid var(--cyan-dim);
	padding: 0;
	margin: 0;
	overflow: hidden;
	transition: transform 100ms, box-shadow 100ms, border-color 100ms;
}
.yt-result-card:hover {
	border-color: var(--yellow);
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--pink);
}

.yt-result-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--bg-raised);
	border-bottom: 2px solid var(--cyan-dim);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.yt-result-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.yt-result-thumb .channel-initial {
	font-family: var(--font-pixel);
	font-size: 42px;
	color: var(--cyan);
	text-shadow: 3px 3px 0 var(--pink);
}

.yt-result-body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.yt-result-title {
	font-family: var(--font-pixel);
	font-size: 11px;
	color: var(--cyan);
	line-height: 1.3;
	text-shadow: 1px 1px 0 #000;
}

.yt-result-desc {
	color: var(--text-dim);
	font-size: 14px;
	line-height: 1.5;
	flex: 1;
}

.yt-result-track {
	align-self: flex-start;
	font-size: 10px;
	padding: 10px 14px;
	margin-top: 4px;
}

/* ---------- bites page search ---------- */

.bites-search {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: stretch;
	margin-bottom: 32px;
}
.bites-search .bites-search-input {
	flex: 1;
	min-width: 240px;
	padding: 14px 16px;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--text);
	background: var(--bg-sunken);
	border: var(--pixel) solid var(--cyan);
	box-shadow: var(--pixel) var(--pixel) 0 0 var(--pink);
	outline: none;
}
.bites-search .bites-search-input:focus {
	border-color: var(--yellow);
	box-shadow: var(--pixel) var(--pixel) 0 0 var(--yellow);
}
.bites-search .bites-search-input::placeholder {
	color: var(--text-dim);
}

/* ---------- utilities ---------- */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 32px; }
.mt-sm { margin-top: 16px; } .mt-md { margin-top: 32px; } .mt-lg { margin-top: 64px; }
.mb-sm { margin-bottom: 16px; } .mb-md { margin-bottom: 32px; }
.muted { color: var(--text-dim); font-size: 14px; line-height: 1.5; }