/**
 * CH-SPECIAL — realismo bordi + header cover per 6 varianti Stage
 * Caricare DOPO stage-variant-styles.css
 */

/* ── Token rivetti / staffa (sezione tubo neon realistica) ── */
:root {
	--osk-r-tube-h: 7px;
	--osk-r-tube-v: 6px;
	--osk-r-inset: 8px;
	--osk-r-rivet:
		radial-gradient(circle at 12px 12px, #eef0f4 0%, #d0d4dc 8%, #98a0a8 18%, #585f68 30%, #2a3038 40%, transparent 44%),
		radial-gradient(circle at 12px 12px, transparent 48%, rgba(0, 0, 0, 0.65) 50%, transparent 54%),
		radial-gradient(circle at 12px 12px, transparent 58%, rgba(255, 255, 255, 0.12) 59%, transparent 62%);
	--osk-r-rivet-br:
		radial-gradient(circle at calc(100% - 12px) 12px, #eef0f4 0%, #d0d4dc 8%, #98a0a8 18%, #585f68 30%, #2a3038 40%, transparent 44%),
		radial-gradient(circle at calc(100% - 12px) 12px, transparent 48%, rgba(0, 0, 0, 0.65) 50%, transparent 54%);
	--osk-r-rivet-bl:
		radial-gradient(circle at 12px calc(100% - 12px), #c8ccd4 0%, #8890a0 18%, #484f58 32%, #22262c 40%, transparent 44%),
		radial-gradient(circle at 12px calc(100% - 12px), transparent 48%, rgba(0, 0, 0, 0.6) 50%, transparent 54%);
	--osk-r-rivet-tr:
		radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #c8ccd4 0%, #8890a0 18%, #484f58 32%, #22262c 40%, transparent 44%),
		radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), transparent 48%, rgba(0, 0, 0, 0.6) 50%, transparent 54%);
	--osk-r-glow-a: drop-shadow(0 0 2px color-mix(in srgb, var(--osk-ch-neon-a) 70%, transparent))
		drop-shadow(0 0 7px color-mix(in srgb, var(--osk-ch-neon-a) 35%, transparent))
		drop-shadow(0 0 2px color-mix(in srgb, var(--osk-ch-neon-b) 55%, transparent))
		drop-shadow(0 0 9px color-mix(in srgb, var(--osk-ch-neon-b) 22%, transparent));
}

/* ── Header cover: overlay tematico (sopra immagine, sotto fade) ── */
.osk-ch-theme-stage .ch-hub-header__cover {
	position: relative;
	overflow: hidden;
}
.osk-ch-theme-stage .ch-hub-header__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.35s ease;
}

/* ═══ 03 · CYBER BRACKETS ═══ */
.osk-ch-theme-stage-brackets {
	--osk-stage-fill-deep: #040a14;
}
.osk-ch-theme-stage-brackets .ch-hub-header__cover::before {
	background:
		linear-gradient(135deg, rgba(0, 240, 255, 0.14) 0%, transparent 42%),
		linear-gradient(225deg, rgba(0, 136, 255, 0.1) 0%, transparent 38%),
		repeating-linear-gradient(90deg, transparent 0, transparent 47px, rgba(0, 240, 255, 0.07) 47px, rgba(0, 240, 255, 0.07) 48px),
		repeating-linear-gradient(0deg, transparent 0, transparent 47px, rgba(0, 136, 255, 0.05) 47px, rgba(0, 136, 255, 0.05) 48px),
		radial-gradient(ellipse 90% 70% at 50% 110%, rgba(0, 68, 170, 0.35), transparent 65%),
		linear-gradient(180deg, rgba(2, 8, 20, 0.55) 0%, rgba(4, 12, 28, 0.75) 100%);
	mix-blend-mode: screen;
}
.osk-ch-theme-stage-brackets .ch-hub-header__cover::after {
	background: linear-gradient(180deg, transparent 0%, rgba(0, 12, 28, 0.35) 55%, rgba(2, 8, 18, 0.92) 88%, rgba(4, 10, 22, 0.98) 100%) !important;
}
.osk-ch-theme-stage-brackets .ch-hub-surface::before {
	background:
		var(--osk-stage-noise),
		repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(0, 240, 255, 0.05) 39px, rgba(0, 240, 255, 0.05) 40px),
		repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(0, 136, 255, 0.04) 39px, rgba(0, 136, 255, 0.04) 40px),
		linear-gradient(180deg, transparent 55%, rgba(0, 68, 170, 0.18) 100%),
		radial-gradient(ellipse 100% 45% at 50% 100%, rgba(0, 240, 255, 0.1), transparent 68%),
		linear-gradient(145deg, #081018 0%, #060c14 50%, #040a12 100%);
	background-size: 200px 200px, auto, auto, auto, auto, auto;
	background-blend-mode: overlay, normal, normal, normal, normal, normal;
	box-shadow:
		inset 0 0 0 1px rgba(0, 240, 255, 0.06),
		inset 0 2px 0 rgba(255, 255, 255, 0.04),
		inset 0 -3px 14px rgba(0, 0, 0, 0.45);
}
.osk-ch-theme-stage-brackets .ch-hub-surface::after {
	inset: 0;
	background:
		/* staffa metallica angolo TL */
		linear-gradient(145deg, #78808a 0%, #3a424a 35%, #1a1e24 70%, transparent 72%) 0 0 / 22px 22px no-repeat,
		linear-gradient(180deg, #2a323a 0%, #1a1e24 100%) 0 0 / 4px 22px no-repeat,
		linear-gradient(90deg, #2a323a 0%, #1a1e24 100%) 0 0 / 22px 4px no-repeat,
		/* tubo neon incassato TL */
		var(--osk-stage-tube-a) 4px 4px / 52px var(--osk-r-tube-h) no-repeat,
		var(--osk-stage-tube-a-v) 4px 4px / var(--osk-r-tube-v) 52px no-repeat,
		/* TR */
		linear-gradient(225deg, #78808a 0%, #3a424a 35%, #1a1e24 70%, transparent 72%) 100% 0 / 22px 22px no-repeat,
		linear-gradient(180deg, #2a323a 0%, #1a1e24 100%) 100% 0 / 4px 22px no-repeat,
		linear-gradient(270deg, #2a323a 0%, #1a1e24 100%) 100% 0 / 22px 4px no-repeat,
		var(--osk-stage-tube-b) calc(100% - 56px) 4px / 52px var(--osk-r-tube-h) no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 10px) 4px / var(--osk-r-tube-v) 52px no-repeat,
		/* BL */
		linear-gradient(45deg, #687078 0%, #3a424a 35%, #1a1e24 70%, transparent 72%) 0 100% / 22px 22px no-repeat,
		var(--osk-stage-tube-b) 4px calc(100% - 11px) / 52px var(--osk-r-tube-h) no-repeat,
		var(--osk-stage-tube-a-v) 4px calc(100% - 56px) / var(--osk-r-tube-v) 52px no-repeat,
		/* BR */
		linear-gradient(315deg, #687078 0%, #3a424a 35%, #1a1e24 70%, transparent 72%) 100% 100% / 22px 22px no-repeat,
		var(--osk-stage-tube-a) calc(100% - 56px) calc(100% - 11px) / 52px var(--osk-r-tube-h) no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 10px) calc(100% - 56px) / var(--osk-r-tube-v) 52px no-repeat,
		/* LED capolinea bracket */
		radial-gradient(circle at 56px 10px, var(--osk-ch-neon-a) 0%, var(--osk-ch-neon-a) 35%, transparent 36%),
		radial-gradient(circle at calc(100% - 56px) 10px, var(--osk-ch-neon-b) 0%, var(--osk-ch-neon-b) 35%, transparent 36%),
		radial-gradient(circle at 10px calc(100% - 56px), var(--osk-ch-neon-b) 0%, var(--osk-ch-neon-b) 35%, transparent 36%),
		radial-gradient(circle at calc(100% - 10px) calc(100% - 56px), var(--osk-ch-neon-a) 0%, var(--osk-ch-neon-a) 35%, transparent 36%);
	filter: var(--osk-r-glow-a);
	animation: osk-ch-stage-sweep 4.5s ease-in-out infinite, osk-stage-bracket-pulse 5s ease-in-out infinite;
}
.osk-ch-theme-stage-brackets .ch-hub-identity.ch-hub-surface::after {
	background:
		linear-gradient(45deg, #687078 0%, #3a424a 40%, transparent 72%) 0 100% / 20px 20px no-repeat,
		linear-gradient(315deg, #687078 0%, #3a424a 40%, transparent 72%) 100% 100% / 20px 20px no-repeat,
		var(--osk-stage-tube-a-v) 6px 52px / var(--osk-r-tube-v) calc(100% - 60px) no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 12px) 52px / var(--osk-r-tube-v) calc(100% - 60px) no-repeat,
		var(--osk-stage-tube-a) 6px calc(100% - 11px) / calc(100% - 12px) var(--osk-r-tube-h) no-repeat;
}
@keyframes osk-stage-bracket-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.94; }
}

/* ═══ 13 · VINYL GROOVE ═══ */
.osk-ch-theme-stage-vinyl {
	--osk-ch-neon-a: #ff4081;
	--osk-ch-neon-b: #ce93d8;
	--osk-stage-accent-c: #4a148c;
}
.osk-ch-theme-stage-vinyl .ch-hub-header__cover::before {
	background:
		radial-gradient(circle at 78% 35%, rgba(20, 12, 28, 0.85) 0%, rgba(20, 12, 28, 0.85) 18%, transparent 19%),
		repeating-radial-gradient(circle at 78% 35%, transparent 0, transparent 6px, rgba(255, 255, 255, 0.04) 6px, rgba(255, 255, 255, 0.04) 7px),
		radial-gradient(ellipse 55% 45% at 78% 35%, rgba(255, 64, 129, 0.2), transparent 55%),
		linear-gradient(135deg, rgba(74, 20, 140, 0.25) 0%, transparent 50%),
		linear-gradient(180deg, rgba(18, 8, 24, 0.5) 0%, rgba(12, 6, 18, 0.8) 100%);
}
.osk-ch-theme-stage-vinyl .ch-hub-header__cover::after {
	background: linear-gradient(180deg, transparent 0%, rgba(18, 8, 24, 0.4) 50%, rgba(14, 6, 20, 0.95) 90%, #0e0614 100%) !important;
}
.osk-ch-theme-stage-vinyl .ch-hub-surface::before {
	background:
		var(--osk-stage-noise),
		repeating-radial-gradient(circle at 88% 18%, transparent 0, transparent 5px, rgba(255, 255, 255, 0.035) 5px, rgba(255, 255, 255, 0.035) 6px),
		radial-gradient(circle at 88% 18%, #1a1024 0%, #1a1024 10%, #14101c 11%, transparent 12%),
		radial-gradient(circle at 88% 18%, transparent 14%, rgba(255, 64, 129, 0.05) 14%, rgba(255, 64, 129, 0.05) 14.5%, transparent 15%),
		radial-gradient(circle at 88% 18%, transparent 19%, rgba(206, 147, 216, 0.04) 19%, rgba(206, 147, 216, 0.04) 19.5%, transparent 20%),
		radial-gradient(circle at 88% 18%, transparent 24%, rgba(255, 64, 129, 0.035) 24%, rgba(255, 64, 129, 0.035) 24.5%, transparent 25%),
		radial-gradient(circle at 88% 18%, transparent 29%, rgba(206, 147, 216, 0.03) 29%, rgba(206, 147, 216, 0.03) 29.5%, transparent 30%),
		radial-gradient(circle at 88% 18%, transparent 34%, rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0.02) 34.5%, transparent 35%),
		linear-gradient(160deg, #120a18 0%, #0e0814 45%, #0a0610 100%);
	background-size: 200px 200px, auto, auto, auto, auto, auto, auto, auto, auto;
	animation: osk-stage-vinyl-groove 24s linear infinite;
}
.osk-ch-theme-stage-vinyl .ch-hub-surface::after {
	border-radius: inherit;
	background:
		var(--osk-r-rivet-bl),
		var(--osk-r-rivet-br),
		/* arco turntable inferiore — tubo curvo simulato con segmenti */
		var(--osk-stage-tube-a) 14px calc(100% - 10px) / calc(50% - 20px) var(--osk-r-tube-h) no-repeat,
		var(--osk-stage-tube-b) calc(50% + 6px) calc(100% - 10px) / calc(50% - 20px) var(--osk-r-tube-h) no-repeat,
		/* montanti laterali stile pannello Hi-Fi */
		linear-gradient(180deg, #4a4048 0%, #2a242c 50%, #1a141c 100%) 6px 14px / 5px calc(100% - 24px) no-repeat,
		linear-gradient(180deg, #4a4048 0%, #2a242c 50%, #1a141c 100%) calc(100% - 11px) 14px / 5px calc(100% - 24px) no-repeat,
		var(--osk-stage-tube-b-v) 8px 18px / var(--osk-r-tube-v) calc(100% - 32px) no-repeat,
		var(--osk-stage-tube-a-v) calc(100% - 13px) 18px / var(--osk-r-tube-v) calc(100% - 32px) no-repeat,
		/* top rail sottile */
		var(--osk-stage-tube-b) 14px 6px / calc(100% - 28px) 4px no-repeat,
		/* etichetta centro-bordo */
		linear-gradient(90deg, transparent, rgba(255, 200, 220, 0.35), transparent) 30% calc(100% - 7px) / 40% 1px no-repeat;
	filter: var(--osk-r-glow-a);
	animation: osk-ch-stage-sweep 7s ease-in-out infinite;
}
.osk-ch-theme-stage-vinyl .ch-hub-identity.ch-hub-surface::after {
	border-radius: 0 0 12px 12px;
	background:
		var(--osk-stage-tube-b-v) 8px 58px / var(--osk-r-tube-v) calc(100% - 66px) no-repeat,
		var(--osk-stage-tube-a-v) calc(100% - 13px) 58px / var(--osk-r-tube-v) calc(100% - 66px) no-repeat,
		var(--osk-stage-tube-a) 8px calc(100% - 11px) / calc(100% - 16px) var(--osk-r-tube-h) no-repeat,
		linear-gradient(180deg, #3a3038 0%, #221c24 100%) 6px 58px / 5px calc(100% - 70px) no-repeat,
		linear-gradient(180deg, #3a3038 0%, #221c24 100%) calc(100% - 11px) 58px / 5px calc(100% - 70px) no-repeat;
}
@keyframes osk-stage-vinyl-groove {
	0% { filter: brightness(1); }
	50% { filter: brightness(1.03); }
	100% { filter: brightness(1); }
}

/* ═══ 15 · MATRIX RAIN ═══ */
.osk-ch-theme-stage-matrix .ch-hub-header__cover::before {
	background:
		repeating-linear-gradient(180deg, transparent 0, transparent 10px, rgba(0, 255, 65, 0.12) 10px, rgba(0, 255, 65, 0.22) 11px, transparent 14px),
		repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(0, 255, 65, 0.06) 22px, rgba(0, 255, 65, 0.1) 23px),
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 255, 65, 0.15), transparent 60%),
		linear-gradient(180deg, rgba(0, 20, 8, 0.65) 0%, rgba(0, 12, 4, 0.85) 100%);
	mix-blend-mode: screen;
	animation: osk-stage-matrix-header-fall 8s linear infinite;
}
.osk-ch-theme-stage-matrix .ch-hub-header__cover::after {
	background: linear-gradient(180deg, rgba(0, 30, 10, 0.2) 0%, rgba(0, 12, 4, 0.7) 60%, rgba(2, 8, 4, 0.98) 100%) !important;
}
.osk-ch-theme-stage-matrix .ch-hub-surface::before {
	background:
		var(--osk-stage-noise),
		repeating-linear-gradient(180deg, transparent 0, transparent 12px, rgba(0, 255, 65, 0.05) 12px, rgba(0, 255, 65, 0.12) 13px, transparent 16px),
		repeating-linear-gradient(90deg, transparent 0, transparent 16px, rgba(0, 200, 50, 0.04) 16px, rgba(0, 200, 50, 0.08) 17px),
		radial-gradient(ellipse 70% 40% at 50% 0%, rgba(0, 255, 65, 0.12), transparent 58%),
		linear-gradient(180deg, #030a06 0%, #020804 100%);
	background-size: 200px 200px, auto, auto, auto, auto;
	animation: osk-stage-matrix-fall 5s linear infinite;
}
.osk-ch-theme-stage-matrix .ch-hub-surface::after {
	background:
		var(--osk-r-rivet),
		var(--osk-r-rivet-br),
		var(--osk-r-rivet-bl),
		var(--osk-r-rivet-tr),
		/* cornice terminale — doppia linea fosforo */
		linear-gradient(180deg, #0a1a0e 0%, #1a2a1e 15%, rgba(0, 255, 65, 0.5) 45%, #c8ffd0 50%, rgba(0, 255, 65, 0.5) 55%, #1a2a1e 85%, #0a1a0e 100%) 7px 7px / calc(100% - 14px) 5px no-repeat,
		linear-gradient(0deg, #0a1a0e 0%, #1a2a1e 15%, rgba(0, 255, 65, 0.5) 45%, #c8ffd0 50%, rgba(0, 255, 65, 0.5) 55%, #1a2a1e 85%, #0a1a0e 100%) 7px 7px / 5px calc(100% - 14px) no-repeat,
		linear-gradient(180deg, #0a1a0e 0%, rgba(0, 255, 65, 0.4) 50%, #0a1a0e 100%) calc(100% - 12px) 7px / 5px calc(100% - 14px) no-repeat,
		linear-gradient(180deg, #0a1a0e 0%, #1a2a1e 15%, rgba(0, 255, 65, 0.5) 45%, #c8ffd0 50%, rgba(0, 255, 65, 0.5) 55%, #1a2a1e 85%, #0a1a0e 100%) 7px calc(100% - 12px) / calc(100% - 14px) 5px no-repeat,
		/* scan sweep */
		linear-gradient(90deg, transparent, rgba(200, 255, 210, 0.6), transparent) var(--osk-ch-stage-sweep) 7px / 20% 3px no-repeat;
	filter:
		drop-shadow(0 0 3px rgba(0, 255, 65, 0.7))
		drop-shadow(0 0 10px rgba(0, 255, 65, 0.35))
		drop-shadow(0 0 2px rgba(0, 180, 50, 0.5));
	animation: osk-ch-stage-sweep 4s ease-in-out infinite, osk-stage-matrix-phosphor 6s ease-in-out infinite;
}
@keyframes osk-stage-matrix-header-fall {
	0% { background-position: 0 0, 0 0, 0 0, 0 0; }
	100% { background-position: 0 160px, 0 0, 0 0, 0 0; }
}
@keyframes osk-stage-matrix-phosphor {
	0%, 100% { opacity: 1; }
	48% { opacity: 0.92; }
	49% { opacity: 1; }
}

/* ═══ 16 · STARFIELD ═══ */
.osk-ch-theme-stage-starfield .ch-hub-header__cover::before {
	background:
		radial-gradient(circle at 15% 25%, #fff 0%, #fff 1.5px, transparent 2px),
		radial-gradient(circle at 42% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 1px, transparent 1.5px),
		radial-gradient(circle at 68% 30%, #fff 0%, #fff 1px, transparent 1.5px),
		radial-gradient(circle at 85% 15%, rgba(200, 220, 255, 0.8) 0%, rgba(200, 220, 255, 0.8) 1.2px, transparent 1.5px),
		radial-gradient(circle at 28% 45%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 1px, transparent 1.5px),
		radial-gradient(circle at 55% 38%, #fff 0%, #fff 0.8px, transparent 1px),
		radial-gradient(circle at 78% 48%, rgba(168, 216, 255, 0.9) 0%, rgba(168, 216, 255, 0.9) 1.5px, transparent 2px),
		radial-gradient(ellipse 80% 60% at 50% 20%, rgba(64, 96, 160, 0.35), transparent 65%),
		radial-gradient(ellipse 50% 40% at 80% 60%, rgba(100, 60, 180, 0.2), transparent 60%),
		linear-gradient(180deg, #040818 0%, #080c1c 50%, #0a0e20 100%);
	animation: osk-stage-star-header-twinkle 6s ease-in-out infinite;
}
.osk-ch-theme-stage-starfield .ch-hub-header__cover::after {
	background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 20, 0.45) 55%, rgba(6, 10, 24, 0.96) 92%, #060a18 100%) !important;
}
.osk-ch-theme-stage-starfield .ch-hub-surface::before {
	background:
		var(--osk-stage-noise),
		radial-gradient(circle at 12% 18%, #fff 0%, #fff 1px, transparent 1.5px),
		radial-gradient(circle at 45% 32%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 1px, transparent 1.5px),
		radial-gradient(circle at 78% 12%, #fff 0%, #fff 1px, transparent 1.5px),
		radial-gradient(circle at 88% 55%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 1px, transparent 1.5px),
		radial-gradient(circle at 22% 72%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 1px, transparent 1.5px),
		radial-gradient(circle at 62% 85%, #fff 0%, #fff 1px, transparent 1.5px),
		radial-gradient(circle at 35% 48%, rgba(168, 216, 255, 0.55) 0%, rgba(168, 216, 255, 0.55) 1.5px, transparent 2px),
		radial-gradient(ellipse 90% 50% at 50% 100%, rgba(64, 96, 160, 0.12), transparent 60%),
		linear-gradient(180deg, #060818, #0a0c1a);
	background-size: 200px 200px, auto, auto, auto, auto, auto, auto, auto, auto, auto;
	animation: osk-stage-star-twinkle 5s ease-in-out infinite;
}
.osk-ch-theme-stage-starfield .ch-hub-surface::after {
	background:
		var(--osk-r-rivet),
		var(--osk-r-rivet-br),
		var(--osk-r-rivet-bl),
		var(--osk-r-rivet-tr),
		/* tubo superiore con alloggiamento */
		linear-gradient(180deg, #3a4250 0%, #1a1e28 100%) 7px 5px / calc(100% - 14px) 3px no-repeat,
		var(--osk-stage-tube-a) 8px 8px / calc(100% - 16px) var(--osk-r-tube-h) no-repeat,
		linear-gradient(0deg, #3a4250 0%, #1a1e28 100%) 5px 7px / 3px calc(100% - 14px) no-repeat,
		var(--osk-stage-tube-a-v) 8px 8px / var(--osk-r-tube-v) calc(100% - 16px) no-repeat,
		linear-gradient(0deg, #3a4250 0%, #1a1e28 100%) calc(100% - 8px) 7px / 3px calc(100% - 14px) no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 14px) 8px / var(--osk-r-tube-v) calc(100% - 16px) no-repeat,
		linear-gradient(180deg, #3a4250 0%, #1a1e28 100%) 7px calc(100% - 8px) / calc(100% - 14px) 3px no-repeat,
		var(--osk-stage-tube-b) 8px calc(100% - 15px) / calc(100% - 16px) var(--osk-r-tube-h) no-repeat,
		/* nodi fibra ottica agli angoli */
		radial-gradient(circle at 24px 10px, #e8f4ff 0%, var(--osk-ch-neon-a) 25%, #4060a0 50%, transparent 55%),
		radial-gradient(circle at calc(100% - 24px) 10px, #e8f4ff 0%, var(--osk-ch-neon-b) 25%, #4060a0 50%, transparent 55%),
		radial-gradient(circle at 24px calc(100% - 10px), #e8f4ff 0%, var(--osk-ch-neon-b) 25%, #4060a0 50%, transparent 55%),
		radial-gradient(circle at calc(100% - 24px) calc(100% - 10px), #e8f4ff 0%, var(--osk-ch-neon-a) 25%, #4060a0 50%, transparent 55%);
	filter: var(--osk-r-glow-a);
	animation: osk-ch-stage-sweep 6s ease-in-out infinite, osk-stage-star-node-pulse 4s ease-in-out infinite;
}
@keyframes osk-stage-star-header-twinkle {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.88; }
}
@keyframes osk-stage-star-node-pulse {
	0%, 100% { filter: var(--osk-r-glow-a); }
	50% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--osk-ch-neon-a) 60%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--osk-ch-neon-b) 40%, transparent)); }
}

/* ═══ 18 · ICE CRYSTAL ═══ */
.osk-ch-theme-stage-crystal {
	--osk-ch-neon-a: #b8ecff;
	--osk-ch-neon-b: #ffffff;
	--osk-stage-accent-c: #5090b8;
}
.osk-ch-theme-stage-crystal .ch-hub-header__cover::before {
	background:
		linear-gradient(125deg, rgba(255, 255, 255, 0.18) 0%, transparent 28%),
		linear-gradient(235deg, rgba(184, 236, 255, 0.14) 0%, transparent 32%),
		linear-gradient(315deg, rgba(255, 255, 255, 0.08) 0%, transparent 25%),
		radial-gradient(ellipse 60% 40% at 30% 20%, rgba(184, 236, 255, 0.2), transparent 55%),
		radial-gradient(ellipse 50% 35% at 75% 40%, rgba(255, 255, 255, 0.1), transparent 50%),
		linear-gradient(180deg, rgba(8, 20, 28, 0.5) 0%, rgba(6, 16, 24, 0.75) 100%);
}
.osk-ch-theme-stage-crystal .ch-hub-header__cover::after {
	background: linear-gradient(180deg, transparent 0%, rgba(8, 20, 28, 0.35) 55%, rgba(6, 16, 24, 0.94) 90%, #061018 100%) !important;
}
.osk-ch-theme-stage-crystal .ch-hub-surface {
	clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px) !important;
}
.osk-ch-theme-stage-crystal .ch-hub-surface::before {
	background:
		var(--osk-stage-noise),
		linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 35%),
		linear-gradient(315deg, rgba(184, 236, 255, 0.08) 0%, transparent 35%),
		linear-gradient(225deg, rgba(255, 255, 255, 0.05) 0%, transparent 30%),
		linear-gradient(45deg, rgba(80, 144, 184, 0.06) 0%, transparent 28%),
		linear-gradient(180deg, #0c1820 0%, #08141c 50%, #061018 100%);
	background-size: 200px 200px, auto, auto, auto, auto, auto;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.1),
		inset 2px 2px 12px rgba(255, 255, 255, 0.04),
		inset -2px -2px 16px rgba(0, 0, 0, 0.35);
}
.osk-ch-theme-stage-crystal .ch-hub-surface::after {
	background:
		/* faccette cristallo angoli */
		linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(184, 236, 255, 0.7) 20%, rgba(80, 144, 184, 0.4) 45%, transparent 50%) 0 0 / 20px 20px no-repeat,
		linear-gradient(225deg, rgba(255, 255, 255, 0.85) 0%, rgba(184, 236, 255, 0.65) 20%, transparent 50%) 100% 0 / 20px 20px no-repeat,
		linear-gradient(45deg, rgba(200, 240, 255, 0.7) 0%, rgba(80, 144, 184, 0.35) 40%, transparent 50%) 0 100% / 20px 20px no-repeat,
		linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, rgba(184, 236, 255, 0.5) 25%, transparent 50%) 100% 100% / 20px 20px no-repeat,
		/* bordo vetro — doppio filo con rifrazione */
		linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 15%, rgba(184, 236, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 85%, transparent 100%) 18px 0 / calc(100% - 36px) 2px no-repeat,
		linear-gradient(90deg, transparent 0%, rgba(184, 236, 255, 0.4) 20%, rgba(255, 255, 255, 0.6) 50%, rgba(184, 236, 255, 0.4) 80%, transparent 100%) 18px 2px / calc(100% - 36px) 1px no-repeat,
		linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 15%, rgba(184, 236, 255, 0.7) 50%, rgba(255, 255, 255, 0.45) 85%, transparent 100%) 18px calc(100% - 2px) / calc(100% - 36px) 2px no-repeat,
		linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.45) 20%, rgba(184, 236, 255, 0.65) 50%, rgba(255, 255, 255, 0.45) 80%, transparent 100%) 0 18px / 2px calc(100% - 36px) no-repeat,
		linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.45) 20%, rgba(184, 236, 255, 0.65) 50%, rgba(255, 255, 255, 0.45) 80%, transparent 100%) calc(100% - 2px) 18px / 2px calc(100% - 36px) no-repeat,
		/* spine cristalline ai vertici */
		linear-gradient(135deg, var(--osk-ch-neon-b), transparent) 0 0 / 3px 14px no-repeat,
		linear-gradient(135deg, var(--osk-ch-neon-b), transparent) 0 0 / 14px 3px no-repeat,
		linear-gradient(225deg, var(--osk-ch-neon-a), transparent) 100% 0 / 3px 14px no-repeat,
		linear-gradient(225deg, var(--osk-ch-neon-a), transparent) 100% 0 / 14px 3px no-repeat;
	filter:
		drop-shadow(0 0 4px rgba(184, 236, 255, 0.5))
		drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
	animation: osk-stage-crystal-shimmer 8s ease-in-out infinite;
}
.osk-ch-theme-stage-crystal .ch-hub-identity.ch-hub-surface::after {
	clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
}
@keyframes osk-stage-crystal-shimmer {
	0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(184, 236, 255, 0.5)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.2)); }
	50% { opacity: 0.95; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 16px rgba(184, 236, 255, 0.35)); }
}

/* ═══ 20 · LED SEGMENT ═══ */
.osk-ch-theme-stage-segment .ch-hub-header__cover::before {
	background:
		repeating-linear-gradient(90deg, rgba(255, 170, 0, 0.15) 0, rgba(255, 170, 0, 0.15) 16px, transparent 16px, transparent 20px),
		linear-gradient(180deg, rgba(255, 68, 0, 0.12) 0%, transparent 40%),
		radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 170, 0, 0.2), transparent 60%),
		linear-gradient(180deg, rgba(16, 10, 4, 0.6) 0%, rgba(12, 8, 4, 0.85) 100%);
}
.osk-ch-theme-stage-segment .ch-hub-header__cover::after {
	background: linear-gradient(180deg, transparent 0%, rgba(16, 10, 4, 0.4) 55%, rgba(12, 8, 4, 0.96) 92%, #0c0804 100%) !important;
}
.osk-ch-theme-stage-segment .ch-hub-surface::before {
	background:
		var(--osk-stage-noise),
		repeating-linear-gradient(90deg, rgba(255, 170, 0, 0.04) 0, rgba(255, 170, 0, 0.04) 14px, transparent 14px, transparent 18px),
		linear-gradient(180deg, #140e08 0%, #100c06 100%);
	background-size: 200px 200px, auto, auto;
}
.osk-ch-theme-stage-segment .ch-hub-surface::after {
	--osk-led-w: 11px;
	--osk-led-gap: 5px;
	background:
		var(--osk-r-rivet),
		var(--osk-r-rivet-br),
		var(--osk-r-rivet-bl),
		var(--osk-r-rivet-tr),
		/* top — alloggiamento nero + LED con lente */
		linear-gradient(180deg, #1a1410 0%, #0a0806 100%) 7px 5px / calc(100% - 14px) 8px no-repeat,
		repeating-linear-gradient(90deg,
			#2a2018 0, #2a2018 2px,
			var(--osk-ch-neon-a) 2px, color-mix(in srgb, var(--osk-ch-neon-a) 80%, #fff) 4px, var(--osk-ch-neon-a) 6px,
			#1a1410 6px, #1a1410 calc(6px + var(--osk-led-gap))
		) 10px 7px / calc(100% - 20px) 6px no-repeat,
		/* bottom */
		linear-gradient(0deg, #1a1410 0%, #0a0806 100%) 7px calc(100% - 13px) / calc(100% - 14px) 8px no-repeat,
		repeating-linear-gradient(90deg,
			#2a2018 0, #2a2018 2px,
			var(--osk-ch-neon-b) 2px, color-mix(in srgb, var(--osk-ch-neon-b) 80%, #fff) 4px, var(--osk-ch-neon-b) 6px,
			#1a1410 6px, #1a1410 calc(6px + var(--osk-led-gap))
		) 10px calc(100% - 11px) / calc(100% - 20px) 6px no-repeat,
		/* left */
		linear-gradient(90deg, #1a1410 0%, #0a0806 100%) 5px 7px / 8px calc(100% - 14px) no-repeat,
		repeating-linear-gradient(180deg,
			#2a2018 0, #2a2018 2px,
			var(--osk-ch-neon-a) 2px, color-mix(in srgb, var(--osk-ch-neon-a) 80%, #fff) 4px, var(--osk-ch-neon-a) 6px,
			#1a1410 6px, #1a1410 calc(6px + var(--osk-led-gap))
		) 7px 10px / 6px calc(100% - 20px) no-repeat,
		/* right */
		linear-gradient(270deg, #1a1410 0%, #0a0806 100%) calc(100% - 13px) 7px / 8px calc(100% - 14px) no-repeat,
		repeating-linear-gradient(180deg,
			#2a2018 0, #2a2018 2px,
			var(--osk-ch-neon-b) 2px, color-mix(in srgb, var(--osk-ch-neon-b) 80%, #fff) 4px, var(--osk-ch-neon-b) 6px,
			#1a1410 6px, #1a1410 calc(6px + var(--osk-led-gap))
		) calc(100% - 11px) 10px / 6px calc(100% - 20px) no-repeat;
	filter:
		drop-shadow(0 0 3px color-mix(in srgb, var(--osk-ch-neon-a) 55%, transparent))
		drop-shadow(0 0 8px color-mix(in srgb, var(--osk-ch-neon-b) 30%, transparent));
	animation: osk-stage-segment-chase 2s steps(6) infinite;
}
@keyframes osk-stage-segment-chase {
	0% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--osk-ch-neon-a) 55%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--osk-ch-neon-b) 30%, transparent)); opacity: 1; }
	33% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--osk-ch-neon-b) 65%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--osk-ch-neon-a) 35%, transparent)); opacity: 0.95; }
	66% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--osk-ch-neon-a) 70%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--osk-ch-neon-b) 45%, transparent)); opacity: 1; }
}

/* ── Preview shop aggiornate ── */
.osk-ch-special-preview--stage.osk-ch-theme-stage-brackets .osk-ch-special-preview__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: repeating-linear-gradient(90deg, transparent 0, transparent 11px, rgba(0, 240, 255, 0.12) 11px, rgba(0, 240, 255, 0.12) 12px), linear-gradient(180deg, rgba(0, 20, 40, 0.5), rgba(4, 12, 24, 0.8));
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-brackets .osk-ch-special-preview__hud::after {
	background:
		linear-gradient(145deg, #6a7078, #2a3038) 0 0 / 8px 8px no-repeat,
		var(--osk-stage-tube-a) 3px 3px / 14px 3px no-repeat,
		var(--osk-stage-tube-a-v) 3px 3px / 3px 14px no-repeat,
		var(--osk-stage-tube-b) calc(100% - 17px) calc(100% - 6px) / 14px 3px no-repeat;
	filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.5));
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-vinyl .osk-ch-special-preview__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(circle at 80% 40%, rgba(255, 64, 129, 0.2), transparent 40%), linear-gradient(180deg, rgba(18, 8, 24, 0.4), rgba(12, 6, 18, 0.85));
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-matrix .osk-ch-special-preview__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: repeating-linear-gradient(180deg, transparent 0, transparent 6px, rgba(0, 255, 65, 0.15) 6px, rgba(0, 255, 65, 0.25) 7px), rgba(0, 12, 4, 0.6);
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-starfield .osk-ch-special-preview__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(circle at 20% 30%, #fff 0%, #fff 1px, transparent 1px), radial-gradient(circle at 70% 20%, #fff 0%, #fff 0.8px, transparent 1px), linear-gradient(180deg, #040818, #080c1c);
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-crystal .osk-ch-special-preview__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 50%), linear-gradient(180deg, rgba(8, 20, 28, 0.4), rgba(6, 16, 24, 0.8));
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-segment .osk-ch-special-preview__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: repeating-linear-gradient(90deg, rgba(255, 170, 0, 0.12) 0, rgba(255, 170, 0, 0.12) 8px, transparent 8px, transparent 10px), linear-gradient(180deg, rgba(16, 10, 4, 0.5), rgba(12, 8, 4, 0.85));
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-matrix .osk-ch-special-preview__hud::after {
	background:
		linear-gradient(180deg, #0a1a0e, #c8ffd0, #0a1a0e) 3px 3px / calc(100% - 6px) 3px no-repeat,
		linear-gradient(90deg, #0a1a0e, #c8ffd0, #0a1a0e) 3px 3px / 3px calc(100% - 6px) no-repeat;
	filter: drop-shadow(0 0 4px rgba(0, 255, 65, 0.6));
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-segment .osk-ch-special-preview__hud::after {
	background:
		repeating-linear-gradient(90deg, #1a1410 0, #1a1410 2px, #ffaa00 2px, #ffd080 4px, #ffaa00 6px, #1a1410 6px, #1a1410 9px) 3px 3px / calc(100% - 6px) 3px no-repeat,
		repeating-linear-gradient(90deg, #1a1410 0, #1a1410 2px, #ff4400 2px, #ff8040 4px, #ff4400 6px, #1a1410 6px, #1a1410 9px) 3px calc(100% - 6px) / calc(100% - 6px) 3px no-repeat;
	filter: drop-shadow(0 0 3px rgba(255, 170, 0, 0.5));
}