:root {
	--bg: #000;
	--fg: #ccc;
	--fg-dim: #666;
	--fg-strong: #fff;
	--surface: #1a1a1a;
	--pill-bg: #333; /* tag/pill: piu' chiaro di --surface, stacca su nero */
	--max-width: 1280px;
	--font: 'Nunito', system-ui, sans-serif;
}

* {
	box-sizing: border-box;
}

/* Back-to-top animato come il legacy (jQuery animate 800ms) */
html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	-webkit-tap-highlight-color: transparent;
	overflow-x: clip; /* la griglia full-bleed usa 100vw, che include la scrollbar */
}

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

.wrapper {
	max-width: var(--max-width);
	margin-inline: auto;
	padding: 0 clamp(0.5rem, 2vw, 1rem); /* legacy: solo orizzontale (0.5em) */
}

.logo {
	text-align: center;
	margin-block: clamp(0.6rem, 2vw, 1rem);
}

.logo img {
	width: 85%;
	height: auto;
}

/* Masonry a colonne flexbox (distribuzione per altezza fatta server-side +
   client-side, NON CSS multi-column). Il multi-column con column-fill:balance
   ribilancia TUTTE le celle a ogni append dell'infinite scroll -> il contenuto
   gia' visto salta durante lo scroll, e con 150+ celle il reflow e' pesante.
   Qui ogni .mcol e' un flusso verticale indipendente: le celle nuove vanno in
   fondo alla colonna piu' corta, le esistenti non si muovono mai.
   SEMPRE 3 colonne (anche su telefono), mosaico contiguo senza gap, full-bleed. */
.masonry {
	display: flex;
	align-items: flex-start;
	gap: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-block: clamp(0.75rem, 1.5vw, 1.25rem);
}

.mcol {
	flex: 1 1 0;
	min-width: 0;
}

.brick {
	margin: 0;
}

.brick img {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
}

.feed-status {
	text-align: center;
	color: var(--fg-dim);
	margin-block: clamp(2rem, 4vw, 3rem) 1.5rem;
}

/* ---- Pill (tag, categorie, azioni) ---- */
.pills {
	text-align: center;
	margin-block: clamp(1.875rem, 3vw, 2.5rem); /* legacy: tags-popular 30px, tags fino a 40px */
}

/* Bottoniera pagina immagine: legacy tvg_challenge_btn_container 30px sopra, 10px sotto */
.action-bar {
	margin-block: 1.875rem 0.625rem;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--pill-bg);
	color: var(--fg-strong);
	border: 0;
	border-radius: 999px;
	padding: 0.45em 1em;
	margin: 0.3em;
	font: inherit;
	font-size: clamp(0.875rem, 1.6vw, 1.25rem); /* legacy desktop: pill 18px, bottoni azione 20px */
	cursor: pointer;
}

/* Hover (solo dispositivi con puntatore: sul touch resterebbe "appiccicato") */
@media (hover: hover) {

	.pill,
	.toolbar-btn {
		transition: background-color 0.2s, transform 0.2s;
	}

	.pill:hover,
	.toolbar-btn:hover {
		background: #454545;
		transform: translateY(-2px);
	}

	.modal-row {
		transition: background-color 0.15s;
	}

	.modal-row:hover {
		background: #e8e8e8;
	}
}

/* Pill che iniziano col cerchietto (icona o avatar): padding sinistro pari a
   quello verticale, cosi' il cerchio e' equidistante da alto, basso e sinistra. */
.pill:has(> .pill-icon:first-child),
.pill:has(> .pill-avatar:first-child) {
	padding-left: 0.45em;
}

.pill-icon {
	width: 1.8em;
	height: 1.8em;
	opacity: 0.85;
}

.pill-avatar {
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	object-fit: cover;
}

/* ---- Pagina tag / persona ---- */
.user-cover {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--surface) center / cover no-repeat;
	margin-block: 0.75rem;
}

.tag-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-size: clamp(1.5rem, 3.5vw, 3rem); /* legacy desktop: vg_section_title 48px */
	font-weight: 600;
	color: var(--fg-strong);
	text-align: center;
	margin-block: 1.875rem 2.5rem; /* legacy: vg_section_title 30px sopra, 40px sotto */
}

.tag-title .avatar {
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	object-fit: cover;
}

.user-toolbar {
	text-align: center;
	margin-block: 0.9375rem; /* legacy: userbar padding 15px */
}

.toolbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--pill-bg);
	color: var(--fg-strong);
	border: 0;
	border-radius: 999px;
	padding: 0.5em 1.4em;
	margin: 0.3em;
	font: inherit;
	font-size: clamp(0.95rem, 1.5vw, 1.2rem); /* legacy desktop: userbar 19px */
	cursor: pointer;
}

.toolbar-btn img {
	width: 1.6em;
	height: 1.6em;
	opacity: 0.6;
}

.user-bio {
	max-width: 720px;
	margin: 1.25rem auto; /* legacy: tvg_user_description padding 20px */
	text-align: center;
	color: var(--fg-strong);
	font-size: clamp(0.8rem, 1.4vw, 1rem);
}

/* ---- Pagina immagine ---- */
.single-image {
	margin: 0.75rem 0 0;
	text-align: center;
}

.single-image img {
	max-width: 100%;
	height: auto;
}

.video-frame {
	aspect-ratio: 16 / 9;
	max-width: 960px;
	margin-inline: auto;
}

.video-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.img-title {
	color: var(--fg-strong);
	font-size: clamp(1rem, 2.6vw, 2.125rem); /* legacy desktop: vg_img_title 34px */
	margin: 1.25rem 0 0.625rem; /* legacy: 20px sopra, 10px sotto */
}

.img-desc {
	color: var(--fg-strong);
	font-size: clamp(0.8rem, 1.7vw, 1.375rem); /* legacy desktop: vg_img_desc 22px */
	margin: 0.625rem 0 0.3125rem; /* legacy: 10px sopra, 5px sotto */
}

.notfound {
	text-align: center;
	margin-block: 4rem;
}

/* ---- Modal (dialog nativo) ---- */
#tvg-modal {
	border: 0;
	border-radius: 12px;
	padding: 1rem;
	max-width: min(420px, 92vw);
	width: 100%;
	background: rgba(255, 255, 255, 0.75); /* stessa trasparenza del .modal legacy */
	color: #000;
	text-align: center;
	font-family: var(--font);
}

#tvg-modal::backdrop {
	background: rgba(0, 0, 0, 0.75);
}

.modal-close {
	position: absolute;
	top: 0.4rem;
	right: 0.6rem;
	border: 0;
	background: none;
	font-size: 1.5rem;
	cursor: pointer;
	line-height: 1;
	outline: none; /* il dialog la auto-focussa all'apertura: niente ring blu */
}

.modal-img {
	max-width: 150px;
	max-height: 150px;
	border-radius: 10px;
	margin-bottom: 0.5rem;
}

.modal-title {
	font-size: 0.875rem;
	margin-bottom: 0.25rem;
}

.modal-desc {
	font-size: 0.7rem;
	color: #333;
	margin-bottom: 0.5rem;
}

.modal-row {
	display: flex;
	align-items: center;
	border: 1px solid #000;
	border-radius: 6px;
	margin-top: 0.75rem;
	padding: 5px; /* legacy: tvg_io_btn_popup */
	background: #fff;
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

/* Icone in slot da 48px come il legacy (tvg_io_btn_left/right):
   28px di icona + 10px di aria per lato */
.modal-row img.row-icon,
.modal-row img.row-avatar {
	width: 28px;
	height: 28px;
	margin-inline: 10px;
}

.modal-row img.row-avatar {
	border-radius: 50%;
	object-fit: cover;
}

.modal-row .row-label {
	flex: 1;
	text-align: center;
}

.modal-row .row-info {
	width: 28px;
	height: 28px;
	margin-inline: 10px;
	cursor: pointer;
}

/* ---- Lightbox ---- */
#tvg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.95);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
}

#tvg-lightbox img,
#tvg-lightbox iframe {
	max-width: 96vw;
	max-height: 82vh;
	border: 0;
}

#tvg-lightbox iframe {
	width: 96vw;
	aspect-ratio: 16 / 9;
}

.lb-caption {
	color: var(--fg-strong);
	text-align: center;
	margin-top: 0.75rem;
	font-size: 0.95rem;
}

.lb-caption a {
	color: var(--fg-strong);
	text-decoration: underline;
}

.lb-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(26, 26, 26, 0.8);
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 1.4rem;
	cursor: pointer;
}

.lb-prev { left: 0.5rem; }
.lb-next { right: 0.5rem; }

.lb-close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
}

/* ---- Hint (tooltip vicino al bottone, stile tippy) ---- */
.tvg-hint {
	position: fixed;
	z-index: 2147483647;
	background: #333;
	color: #fff;
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	line-height: 1.35;
	max-width: min(280px, 86vw);
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.tvg-hint--show {
	opacity: 1;
}

/* ---- Toast ---- */
#tvg-toast {
	position: fixed;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	background: var(--surface);
	color: var(--fg-strong);
	border-radius: 8px;
	padding: 0.6rem 1.2rem;
	z-index: 1000;
	max-width: 88vw;
	text-align: center;
}

/* ---- Welcome / register / logout ---- */
.welcome {
	text-align: center;
	color: var(--fg);
	padding-block: 1.25rem 1rem; /* legacy: msgRegOk padding-top 20px */
	font-size: clamp(1rem, 2vw, 1.7rem); /* legacy desktop: msgRegOk 27px */
	transition: opacity 0.6s;
}

.register {
	text-align: center;
	color: var(--fg);
	padding-top: 0.75rem;
	margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
	font-size: clamp(1rem, 2vw, 1.7rem); /* legacy desktop: register_txt 27px */
}

.blink {
	animation: blinker 2s linear infinite;
}

@keyframes blinker {
	50% { opacity: 0; }
}

.register-form {
	margin-top: 0.5rem;
}

/* JOIN CTA (demo worldcapp): stile del legacy tvg_slogan/tvg_slogan_btn */
.join-cta {
	text-align: center;
	color: var(--fg-strong);
	margin-block: 1rem;
	font-size: clamp(0.95rem, 1.8vw, 1.3rem);
}

.join-cta a {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.5em 1.1em;
	border: 2px solid #fff;
	border-radius: 10px;
	background: #000;
	color: var(--fg-strong);
	font-weight: bold;
}

.register-form input[type=email],
.register-form button {
	margin-block: 0.6rem;
}

.register-form input[type=email],
.search-section input[type=text] {
	padding: 0.6rem;
	font: inherit;
	font-size: clamp(1rem, 1.6vw, 1.25rem); /* legacy desktop: input 20px */
	border: 0;
	border-radius: 0;
	-webkit-appearance: none;
}

.register-form input[type=email] {
	width: 70%; /* come input.reg legacy, senza cap */
}

.register-form button {
	padding: 0.6rem 1rem;
	font: inherit;
	font-size: clamp(1rem, 1.6vw, 1.25rem); /* legacy desktop: submit 20px */
	border: 0;
	color: var(--fg-strong);
	background: #333;
	cursor: pointer;
}

.logout {
	text-align: center;
	margin-top: 1.25rem;
}

.logout a,
.menu-top a {
	color: var(--fg-strong);
}

/* ---- Menu ---- */
.menu-top {
	text-align: center;
	color: var(--fg-dim);
	margin-block: 0.5rem;
	font-size: clamp(0.875rem, 1.8vw, 1.3rem);
}

.linklike {
	background: none;
	border: 0;
	color: var(--fg-dim);
	font: inherit;
	cursor: pointer;
}

.menu-section {
	margin-block: clamp(0.625rem, 1.5vw, 1.375rem); /* legacy: vga_menu 10-22px a scala */
	text-align: center;
}

.menu-row {
	display: flex;
	justify-content: space-around;
	max-width: 720px;
	margin: 0 auto 1.25rem; /* legacy: un <br> tra riga menu e link download */
}

.menu-section a {
	color: var(--fg-strong);
	font-size: clamp(0.75rem, 1.5vw, 1rem);
}

.menu-app {
	display: inline-block;
}

/* ---- History strip ---- */
.history {
	margin-block: clamp(0.625rem, 1.5vw, 1rem) 0; /* legacy: tagHistory 10-16px sopra, 0 sotto */
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: 0.75rem;
	background: var(--bg);
}

.history img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 10px;
	scroll-snap-align: start;
	cursor: pointer;
	flex: 0 0 auto;
}

/* ---- Search ---- */
.search-section {
	padding: clamp(1.5rem, 3vw, 2rem) 10%;
}

.search-section input[type=text] {
	width: 100%;
}

#tvg-search-results {
	margin-top: 0.5rem;
}

#tvg-search-results a {
	display: block;
	color: var(--fg-strong);
	padding: 0.3rem 0.75rem;
	font-size: clamp(1rem, 1.6vw, 1.25rem); /* legacy desktop: search-result 20px */
}

/* ---- Bro / legal ---- */
.bro-more {
	text-align: center;
	margin-block: 1.5rem;
}

.bro-more a {
	color: var(--fg-dim);
}

.legal {
	display: flex;
	justify-content: space-around;
	max-width: 720px;
	margin: 2.5rem auto 0; /* legacy: <br><br> prima del blocco legal */
}

.legal a {
	color: var(--fg-strong);
	font-size: clamp(0.75rem, 1.5vw, 1rem);
}

/* ---- Cookie banner ---- */
#tvg-cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #000;
	color: #fff;
	padding: 8px 16px;
	box-sizing: border-box;
	display: none;
	justify-content: space-between;
	align-items: center;
	z-index: 99999;
	font-size: 14px;
	line-height: 1.4;
}

#tvg-cookie-banner p {
	margin: 0;
}

#tvg-cookie-banner a {
	color: #fff;
	text-decoration: underline;
}

#tvg-cookie-banner button {
	background: var(--surface);
	color: #fff;
	border: 0;
	padding: 6px;
	cursor: pointer;
	margin-left: 8px;
	font-size: 14px;
}

#tvg-cookie-banner button:hover {
	background: #333;
}

/* Anti-copia (parita' col legacy, admin escluso non gestito) */
.masonry img,
.single-image img {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.back-to-top {
	text-align: center;
	margin-block: 1.25rem; /* legacy: un <br> prima della freccia */
	line-height: 1.8;
}

.back-to-top a {
	color: var(--fg-strong);
}

.back-to-top img {
	width: 50px;
	height: 50px;
}

footer {
	text-align: center;
	color: var(--fg-dim);
	font-size: 0.875rem;
	line-height: 2;
	margin: 3.5rem 1.25rem 1.25rem; /* legacy: <br><br> + margin 20px sopra il footer */
}

footer a {
	color: var(--fg);
}