/* Migrated: static/css/viewer.css */
/* Embed Avenir font via webpack-managed assets (fonts moved to src/fonts) */
@font-face {
	font-family: 'Avenir';
	src: url(/static/dist/assets/Avenir-Roman.7c94a37f.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Avenir';
	src: url(/static/dist/assets/Avenir-Medium.efe1fd0d.woff2) format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Avenir';
	src: url(/static/dist/assets/Avenir-Heavy.af43c184.woff2) format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
:root {
	--bg-start: #000000; /* black */
	--bg-end: #4a4a4a;   /* grey */
	--accent-start: #4CAF50;
	--accent-mid: #45a049;
	--accent-end: #2E7D32;
	--chip-start: #667eea;
	--chip-end: #764ba2;
	--text-dark: #222;
	--text-muted: #666;
    /* Set at runtime to a hashed poster URL via manifest (see viewer.html). */
    --hero-poster-bg: none;
}

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

body.viewer-page {
	font-family: 'Avenir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start; /* top alignment */
	padding: 0; /* remove outer padding to avoid extra scroll below hero */
	color: white;
	position: relative; /* enable layered fantasy overlay */
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: auto;
	touch-action: auto;
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
	-webkit-touch-callout: default;
}

body.viewer-page * {
	touch-action: auto;
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
	-webkit-touch-callout: default;
}

body.viewer-page img,
body.viewer-page video,
body.viewer-page canvas {
	-webkit-user-drag: auto;
	-webkit-touch-callout: default;
}

.container {
	width: 100%;
	max-width: 800px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
	min-height: 0; /* no extra height when empty */
	padding: 20px; /* inner padding when used (e.g., no-hero fallback) */
	position: relative;
	z-index: 1; /* above background overlays */
}

/* Hide the container entirely when empty so scrolling doesn't reveal blank space */
.container:empty { display: none; }

/* Subtle fantasy glows and star speckles layered over the gradient */
body.viewer-page::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(900px 700px at 12% 15%, rgba(120, 100, 160, 0.25), transparent 60%),
		radial-gradient(800px 800px at 88% 78%, rgba(90, 130, 180, 0.18), transparent 60%);
	filter: saturate(110%);
	animation: bgFloat 28s ease-in-out infinite alternate;
	z-index: 0;
}

body.viewer-page::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(2px 2px at 25px 35px, rgba(255,255,255,0.08), rgba(255,255,255,0) 40%),
		radial-gradient(1.5px 1.5px at 120px 80px, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%),
		radial-gradient(1.5px 1.5px at 240px 140px, rgba(255,255,255,0.05), rgba(255,255,255,0) 40%);
	background-size: 220px 220px, 280px 280px, 340px 340px;
	background-repeat: repeat;
	opacity: 0.5;
	z-index: 0;
}

@keyframes bgFloat {
	0% { transform: translateY(0) translateX(0); }
	100% { transform: translateY(-2%) translateX(1%); }
}

h1 {
	font-size: 3rem;
	font-weight: 300;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	margin-bottom: 10px;
}

.subtitle {
	font-size: 1.2rem;
	opacity: 0.9;
	margin-bottom: 20px;
}

.qr-main-container {
	background: rgba(255,255,255,0.95);
	backdrop-filter: blur(15px);
	border-radius: 25px;
	padding: 40px;
	box-shadow: 0 15px 50px rgba(0,0,0,0.3);
	border: 2px solid rgba(255,255,255,0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	max-width: 450px;
	width: 100%;
}

.qr-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: #333;
	margin: 0;
}

.qr-image-wrapper {
	background: white;
	border-radius: 15px;
	padding: 15px;
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	border: 3px solid var(--bg-start);
}

.qr-image-wrapper img {
	max-width: 280px;
	width: 100%;
	height: auto;
	display: block;
}

.room-info {
	background: rgba(102, 126, 234, 0.1);
	padding: 15px 25px;
	border-radius: 15px;
	border: 2px solid rgba(102, 126, 234, 0.2);
	width: 100%;
}

.room-info p {
	margin: 0;
	font-size: 1rem;
	color: var(--text-muted);
	font-family: 'Courier New', monospace;
	letter-spacing: 1px;
	font-weight: 600;
}

.session-link {
	width: 100%;
	text-align: center;
}

.main-action-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.action-subtitle {
	font-size: 0.9rem;
	color: var(--text-muted);
	font-style: italic;
	margin: 0;
}

.join-button {
	display: inline-block;
	background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
	color: white;
	padding: 15px 30px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.join-button.main-action {
	font-size: 1.8rem;
	font-weight: 600;
	padding: 20px 40px;
	box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
	background: linear-gradient(135deg, var(--accent-start) 0%, var(--accent-mid) 50%, var(--accent-end) 100%);
	border: 3px solid rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
	animation: pulse 2s infinite;
}

.join-button.main-action::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	transition: left 0.5s;
}

.join-button.main-action:hover::before {
	left: 100%;
}

@keyframes pulse {
	0% { box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5); }
	50% { box-shadow: 0 12px 40px rgba(76, 175, 80, 0.7); }
	100% { box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5); }
}

.join-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
	border-color: rgba(255, 255, 255, 0.5);
}

.join-button.main-action:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 15px 50px rgba(76, 175, 80, 0.8);
	border-color: rgba(255, 255, 255, 0.6);
}

.join-button:active {
	transform: translateY(0);
}

.instructions {
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 25px;
	border: 2px solid rgba(255,255,255,0.2);
	max-width: 600px;
	width: 100%;
}

.instructions h3 {
	font-size: 1.3rem;
	margin-bottom: 15px;
	color: #fff;
}

/* Catalog styles */
.catalog {
	margin-top: 30px;
	width: 100%;
	max-width: 1000px;
	background: rgba(255,255,255,0.9);
	border-radius: 20px;
	border: 2px solid rgba(255,255,255,0.6);
	box-shadow: 0 12px 35px rgba(0,0,0,0.25);
	color: var(--text-dark);
	padding: 20px 22px;
}
.catalog h3 { margin-bottom: 10px; font-weight: 800; letter-spacing: 0.3px; }
.catalog-toolbar { display:flex; gap: 8px; align-items: center; justify-content: flex-end; margin: 8px 2px 14px; }
.toolbar-label { font-size: 0.9rem; color: var(--text-dark); opacity: 0.75; }
.sort-btn { appearance: none; -webkit-appearance: none; border: 1px solid #d0d0d0; background: linear-gradient(135deg,#f4f4f4,#e8e8e8); color:#222; padding: 6px 10px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 0.85rem; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.sort-btn:hover { transform: translateY(-1px); filter: brightness(0.98); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.sort-btn.active { background: linear-gradient(135deg,#E6E6E6,#BDBDBD); border-color:#9e9e9e; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.hero-card .sort-btn {
	position: relative;
	color: #fff;
	border-color: rgba(255,255,255,0.35);
	background: rgba(0,0,0,0.35);
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.hero-card .sort-btn:hover {
	filter: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.hero-card .sort-btn.active {
	background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10));
	border-color: rgba(255,255,255,0.85);
	box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.35) inset;
}
.hero-card .sort-btn.active::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -4px;
	height: 3px;
	background: #fff;
	border-radius: 999px;
	opacity: 0.95;
}

/* Shimmer animation for skeleton placeholders */
@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.selected-watch-banner {
	background: #eef7ff;
	border: 1px solid #cfe3ff;
	color: #245;
	padding: 10px 12px;
	border-radius: 10px;
	margin-bottom: 10px;
	font-size: 0.95rem;
}
.category-group { margin-top: 18px; }
.category-title { font-weight: 800; color: #2b2b2b; margin: 6px 4px 12px; font-size: 1.05rem; }
.catalog-grid,
.skeleton-grid {
	/* Force exactly 3 columns while remaining responsive in width */
	--gap: 16px;
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.skeleton-grid {
	/* Placeholder grid mirrors real grid to prevent layout shift */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.catalog-item {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0,0,0,0.08);
	display: flex; flex-direction: column; align-items: stretch;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.skeleton-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0,0,0,0.08);
	display: flex; flex-direction: column; align-items: stretch;
}
.catalog-item:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.catalog-thumb-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.catalog-thumb { width: 100%; height: 100%; object-fit: cover; display:block; transform: scale(1); transition: transform 400ms ease; }
.skeleton-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
	background-size: 400% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
}
.catalog-item:hover .catalog-thumb { transform: scale(1.05); }
.catalog-chip { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #fff; background: linear-gradient(135deg,var(--chip-start),var(--chip-end)); box-shadow: 0 2px 8px rgba(0,0,0,0.15); opacity: 0.95; }
.catalog-body { padding: 10px 12px 12px; display:flex; flex-direction: column; gap: 10px; }
.catalog-name { font-size: 0.98rem; color: var(--text-dark); font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-actions { display:flex; gap: 8px; }
.skeleton-line {
	height: 14px;
	width: 70%;
	border-radius: 8px;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
	background-size: 400% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
}
.skeleton-line.short { width: 40%; height: 12px; }
.btn { flex:1; text-align:center; border-radius: 10px; padding: 9px 12px; border: 1px solid #ddd; cursor:pointer; font-weight: 700; font-size: 0.9rem; text-decoration:none; transition: all 160ms ease; }
.btn:hover { filter: brightness(0.98); transform: translateY(-1px); }
.btn-select {
	background: linear-gradient(135deg,#E6E6E6,#BDBDBD); /* silver gradient */
	color: #222; /* better contrast on silver */
	border-color: #9e9e9e;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.btn-select:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.catalog-empty { color: var(--text-muted); font-size: 0.95rem; padding: 8px; }

.instructions ol {
	text-align: left;
	padding-left: 20px;
	color: rgba(255,255,255,0.9);
}

.instructions li {
	margin-bottom: 8px;
	font-size: 1rem;
	line-height: 1.5;
}

/* Push this block to bottom of page */
.bottom-block { margin-top: auto; }

/* Mobile responsive */
@media (max-width: 768px) {
	.container { padding: 15px; gap: 30px; }
	h1 { font-size: 2.2rem; }
	.subtitle { font-size: 1.1rem; }
	.qr-main-container { padding: 25px; max-width: 350px; gap: 20px; }
	.qr-title { font-size: 1.3rem; }
	.qr-image-wrapper { padding: 12px; }
	.qr-image-wrapper img { max-width: 220px; }
	.instructions { padding: 20px; }
	.instructions h3 { font-size: 1.2rem; }
	.instructions li { font-size: 0.95rem; }
	.join-button.main-action { font-size: 1.4rem; padding: 16px 30px; }
	.action-subtitle { font-size: 0.8rem; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.join-button.main-action { animation: none !important; }
	body.viewer-page::before { animation: none !important; }
}

/* Hero video section (optional) */
.hero-card { position: relative; min-height: 100svh; overflow: visible; z-index: 1; }
/* Background image is provided via CSS variable to ensure it's the same hashed asset as the video poster */
.hero-media { position: absolute; inset: 0; background: var(--hero-poster-bg, linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6))) center/cover no-repeat; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video { opacity: 0; transition: opacity .6s ease; }
.hero-video.is-ready { opacity: 1; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.18) 40%, rgba(0,0,0,.45));
}
.hero-content { position: relative; z-index: 1; display: grid; gap: .75rem;
	padding: clamp(16px, 6vw, 80px); color: #fff; max-width: 64rem;
	padding-bottom: 16px; /* avoid extra scroll due to large bottom padding */
}
.kicker { text-transform: uppercase; letter-spacing: .12em; opacity: .9; font-weight: 700; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
	.hero-video { display: none; }
	/* Use the same runtime-provided poster for reduced motion */
	.hero-media { background: var(--hero-poster-bg, linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6))) center/cover no-repeat; }
}

/* When catalog is inside hero, remove white panel look */
.hero-card .catalog {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #fff;
}
.hero-card .catalog h3 { color: #fff; }
.hero-card .toolbar-label {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.7);
	font-weight: 800;
	letter-spacing: 0.03em;
	font-size: 1rem;
}