/**
 * CH-SPECIAL — 25 varianti Stage (stili DISTINTI, stesso concept)
 * Concept: ::before fill card pieno + ::after solo bordi neon · avatar overflow visible
 * Neon Prime = default in special-neon-stage.css · qui solo override per variante
 */

/* ═══════════════════════════════════════════════════════════════
   01 · NEON PRIME — baseline (nessun override, classe marker)
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-prime .ch-hub-identity__head::before {
	content: "STAGE PASS";
}

/* ═══════════════════════════════════════════════════════════════
   02 · ARCADE CABINET — bezel spesso + scanline CRT nel fill
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-arcade {
	--osk-ch-neon-a: #39ff14;
	--osk-ch-neon-b: #ff3366;
	--osk-stage-accent-c: #6600cc;
	--osk-ch-amb-bg: #08040c;
	--osk-stage-fill-deep: #0c0610;
}
.osk-ch-theme-stage-arcade .ch-hub-surface::before {
	animation: osk-stage-fill-drift 14s ease-in-out infinite;
	background:
		repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.35) 2px, rgba(0, 0, 0, 0.35) 4px),
		linear-gradient(180deg, rgba(57, 255, 20, 0.06) 0%, transparent 40%),
		radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 51, 102, 0.12), transparent 60%),
		conic-gradient(from 180deg at 50% 50%, #120818, #1a0c20, #0e0614, #1a0c20, #120818),
		var(--osk-stage-fill-deep);
	background-size: auto, auto, auto, auto, auto;
}
.osk-ch-theme-stage-arcade .ch-hub-surface::after {
	inset: -3px;
	background:
		linear-gradient(90deg, var(--osk-ch-neon-a), var(--osk-ch-neon-b)) 0 0 / 100% 5px no-repeat,
		linear-gradient(90deg, var(--osk-ch-neon-b), var(--osk-ch-neon-a)) 0 100% / 100% 5px no-repeat,
		linear-gradient(180deg, var(--osk-ch-neon-a), var(--osk-ch-neon-b)) 0 0 / 5px 100% no-repeat,
		linear-gradient(180deg, var(--osk-ch-neon-b), var(--osk-ch-neon-a)) 100% 0 / 5px 100% no-repeat,
		radial-gradient(circle at 0 0, #888 0%, #333 30%, transparent 36%),
		radial-gradient(circle at 100% 0, #888 0%, #333 30%, transparent 36%),
		radial-gradient(circle at 0 100%, #888 0%, #333 30%, transparent 36%),
		radial-gradient(circle at 100% 100%, #888 0%, #333 30%, transparent 36%);
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent));
	animation: osk-stage-arcade-pulse 2.5s ease-in-out infinite;
}
.osk-ch-theme-stage-arcade .ch-hub-identity__head::before {
	content: "INSERT COIN";
	letter-spacing: 0.18em;
	background: linear-gradient(180deg, #2a1040, #120818);
	box-shadow: 0 0 12px rgba(57, 255, 20, 0.35);
}
@keyframes osk-stage-arcade-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.88; }
}

/* ═══════════════════════════════════════════════════════════════
   03 · CYBER BRACKETS — solo angoli a L, fill griglia prospettiva
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-brackets {
	--osk-ch-neon-a: #00f0ff;
	--osk-ch-neon-b: #0088ff;
	--osk-stage-accent-c: #0044aa;
	--osk-ch-amb-bg: #020610;
}
.osk-ch-theme-stage-brackets .ch-hub-surface::before {
	background:
		repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(0, 240, 255, 0.04) 39px, rgba(0, 240, 255, 0.04) 40px),
		repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(0, 136, 255, 0.03) 39px, rgba(0, 136, 255, 0.03) 40px),
		linear-gradient(180deg, transparent 60%, rgba(0, 68, 170, 0.15) 100%),
		radial-gradient(ellipse 100% 40% at 50% 100%, rgba(0, 240, 255, 0.08), transparent 70%),
		#060c14;
}
.osk-ch-theme-stage-brackets .ch-hub-surface::after {
	background:
		var(--osk-stage-tube-a) 6px 6px / 36px 4px no-repeat,
		var(--osk-stage-tube-a-v) 6px 6px / 4px 36px no-repeat,
		var(--osk-stage-tube-b) calc(100% - 42px) 6px / 36px 4px no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 10px) 6px / 4px 36px no-repeat,
		var(--osk-stage-tube-b) 6px calc(100% - 10px) / 36px 4px no-repeat,
		var(--osk-stage-tube-a-v) 6px calc(100% - 42px) / 4px 36px no-repeat,
		var(--osk-stage-tube-a) calc(100% - 42px) calc(100% - 10px) / 36px 4px no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 10px) calc(100% - 42px) / 4px 36px no-repeat;
	animation: osk-ch-stage-sweep 4s ease-in-out infinite;
}
.osk-ch-theme-stage-brackets .ch-hub-identity__head::before { content: "BRACKET"; }

/* ═══════════════════════════════════════════════════════════════
   04 · CRT BROADCAST — cornice curva + fosfori scanline
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-crt {
	--osk-ch-neon-a: #7df9ff;
	--osk-ch-neon-b: #b8ffb8;
	--osk-stage-accent-c: #408860;
	--osk-ch-amb-bg: #040806;
}
.osk-ch-theme-stage-crt .ch-hub-surface {
	border-radius: 16px !important;
	box-shadow:
		0 14px 40px rgba(0, 0, 0, 0.52),
		inset 0 0 40px rgba(0, 0, 0, 0.4) !important;
}
.osk-ch-theme-stage-crt .ch-hub-surface::before {
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 3px),
		radial-gradient(ellipse 90% 80% at 50% 50%, rgba(125, 249, 255, 0.06), transparent 70%),
		radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.5) 100%),
		#0a100c;
	animation: osk-stage-crt-flicker 0.12s steps(2) infinite;
}
.osk-ch-theme-stage-crt .ch-hub-surface::after {
	inset: 4px;
	border-radius: 12px;
	box-shadow:
		inset 0 0 0 2px color-mix(in srgb, var(--osk-ch-neon-a) 40%, transparent),
		inset 0 0 20px color-mix(in srgb, var(--osk-ch-neon-a) 12%, transparent);
	background: none;
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--osk-ch-neon-a) 35%, transparent));
	animation: none;
}
.osk-ch-theme-stage-crt .ch-hub-identity__head::before { content: "ON AIR"; color: #b8ffb8; }
@keyframes osk-stage-crt-flicker {
	0% { opacity: 1; }
	50% { opacity: 0.97; }
}

/* ═══════════════════════════════════════════════════════════════
   05 · HEX TECH — esagoni angolo + mesh esagonale
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-hex {
	--osk-ch-neon-a: #00e5ff;
	--osk-ch-neon-b: #7c4dff;
	--osk-stage-accent-c: #311b92;
	--osk-ch-amb-bg: #060410;
}
.osk-ch-theme-stage-hex .ch-hub-surface::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M14 0l14 8.5v17L14 34 0 25.5v-17z' fill='none' stroke='rgba(0,229,255,0.06)' stroke-width='1'/%3E%3C/svg%3E"),
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124, 77, 255, 0.15), transparent 60%),
		#0a0814;
	background-size: 28px 49px, auto, auto;
}
.osk-ch-theme-stage-hex .ch-hub-surface::after {
	background:
		linear-gradient(135deg, var(--osk-ch-neon-a) 0%, transparent 50%) 0 0 / 24px 24px no-repeat,
		linear-gradient(225deg, var(--osk-ch-neon-b) 0%, transparent 50%) 100% 0 / 24px 24px no-repeat,
		linear-gradient(45deg, var(--osk-ch-neon-b) 0%, transparent 50%) 0 100% / 24px 24px no-repeat,
		linear-gradient(315deg, var(--osk-ch-neon-a) 0%, transparent 50%) 100% 100% / 24px 24px no-repeat,
		var(--osk-stage-tube-a) 12px 4px / calc(100% - 24px) 3px no-repeat,
		var(--osk-stage-tube-a) 12px calc(100% - 7px) / calc(100% - 24px) 3px no-repeat;
	filter: drop-shadow(0 0 5px color-mix(in srgb, var(--osk-ch-neon-a) 45%, transparent));
}
.osk-ch-theme-stage-hex .ch-hub-identity__head::before { content: "HEX-01"; }

/* ═══════════════════════════════════════════════════════════════
   06 · MINIMAL EDGE — fill scuro pulito, bordo sottile luminoso
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-minimal {
	--osk-ch-neon-a: #e8e8ec;
	--osk-ch-neon-b: #a0a0b0;
	--osk-stage-accent-c: #606070;
	--osk-ch-amb-bg: #060608;
}
.osk-ch-theme-stage-minimal .ch-hub-surface::before {
	animation: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.2) 100%),
		#0e0e12;
}
.osk-ch-theme-stage-minimal .ch-hub-surface::after {
	background: none;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--osk-ch-neon-a) 35%, transparent),
		inset 0 0 16px color-mix(in srgb, var(--osk-ch-neon-a) 6%, transparent);
	filter: none;
	animation: none;
}
.osk-ch-theme-stage-minimal .ch-hub-identity__avatar-wrap::before {
	animation-duration: 12s;
	filter: none;
}
.osk-ch-theme-stage-minimal .ch-hub-identity__head::before { content: "MINIMAL"; letter-spacing: 0.3em; }

/* ═══════════════════════════════════════════════════════════════
   07 · DOUBLE STACK — doppio tubo neon parallelo
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-double {
	--osk-ch-neon-a: #ff00ff;
	--osk-ch-neon-b: #00ffff;
	--osk-stage-accent-c: #8800cc;
}
.osk-ch-theme-stage-double .ch-hub-surface::before {
	background:
		radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255, 0, 255, 0.08), transparent 70%),
		radial-gradient(ellipse 60% 40% at 20% 80%, rgba(0, 255, 255, 0.06), transparent 60%),
		#0c0614;
}
.osk-ch-theme-stage-double .ch-hub-surface::after {
	inset: 0;
	box-shadow:
		inset 0 0 0 2px color-mix(in srgb, var(--osk-ch-neon-a) 70%, transparent),
		inset 0 0 0 5px transparent,
		inset 0 0 0 7px color-mix(in srgb, var(--osk-ch-neon-b) 70%, transparent),
		0 0 12px color-mix(in srgb, var(--osk-ch-neon-a) 30%, transparent),
		0 0 20px color-mix(in srgb, var(--osk-ch-neon-b) 20%, transparent);
	background: none;
	filter: none;
	animation: osk-stage-double-shift 6s ease-in-out infinite;
}
.osk-ch-theme-stage-double .ch-hub-identity__head::before { content: "DUAL"; }
@keyframes osk-stage-double-shift {
	0%, 100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--osk-ch-neon-a) 70%, transparent), inset 0 0 0 5px transparent, inset 0 0 0 7px color-mix(in srgb, var(--osk-ch-neon-b) 70%, transparent), 0 0 12px color-mix(in srgb, var(--osk-ch-neon-a) 30%, transparent); }
	50% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--osk-ch-neon-b) 70%, transparent), inset 0 0 0 5px transparent, inset 0 0 0 7px color-mix(in srgb, var(--osk-ch-neon-a) 70%, transparent), 0 0 12px color-mix(in srgb, var(--osk-ch-neon-b) 30%, transparent); }
}

/* ═══════════════════════════════════════════════════════════════
   08 · GLITCH FRAME — bordi segmentati con glitch
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-glitch {
	--osk-ch-neon-a: #ff0040;
	--osk-ch-neon-b: #00ffcc;
	--osk-stage-accent-c: #6600ff;
}
.osk-ch-theme-stage-glitch .ch-hub-surface::before {
	background:
		linear-gradient(90deg, rgba(255, 0, 64, 0.04) 0%, transparent 30%, rgba(0, 255, 204, 0.04) 70%, transparent 100%),
		repeating-linear-gradient(90deg, transparent 0, transparent 8px, rgba(255, 255, 255, 0.02) 8px, rgba(255, 255, 255, 0.02) 9px),
		#0a0810;
	animation: osk-stage-glitch-fill 4s steps(8) infinite;
}
.osk-ch-theme-stage-glitch .ch-hub-surface::after {
	background:
		linear-gradient(90deg, var(--osk-ch-neon-a) 0%, var(--osk-ch-neon-a) 18%, transparent 18%, transparent 22%, var(--osk-ch-neon-b) 22%, var(--osk-ch-neon-b) 45%, transparent 45%, transparent 55%, var(--osk-ch-neon-a) 55%, var(--osk-ch-neon-a) 78%, transparent 78%) 0 0 / 100% 3px no-repeat,
		linear-gradient(90deg, var(--osk-ch-neon-b) 0%, var(--osk-ch-neon-b) 30%, transparent 30%, transparent 40%, var(--osk-ch-neon-a) 40%, var(--osk-ch-neon-a) 70%, transparent 70%) 0 100% / 100% 3px no-repeat,
		linear-gradient(180deg, var(--osk-ch-neon-a) 0%, var(--osk-ch-neon-a) 25%, transparent 25%) 0 0 / 3px 100% no-repeat,
		linear-gradient(180deg, var(--osk-ch-neon-b) 0%, var(--osk-ch-neon-b) 35%, transparent 35%) 100% 0 / 3px 100% no-repeat;
	filter: drop-shadow(2px 0 0 color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent)) drop-shadow(-2px 0 0 color-mix(in srgb, var(--osk-ch-neon-b) 50%, transparent));
	animation: osk-stage-glitch-border 0.35s steps(3) infinite;
}
.osk-ch-theme-stage-glitch .ch-hub-identity__head::before { content: "GLITCH"; }
@keyframes osk-stage-glitch-fill {
	0%, 90%, 100% { transform: translate(0); }
	92% { transform: translate(-3px, 1px); }
	94% { transform: translate(3px, -1px); }
}
@keyframes osk-stage-glitch-border {
	0%, 85%, 100% { opacity: 1; transform: translate(0); }
	86% { opacity: 0.7; transform: translate(4px, 0); }
	88% { opacity: 1; transform: translate(-3px, 0); }
}

/* ═══════════════════════════════════════════════════════════════
   09 · SYNTHWAVE — griglia orizzonte + tramonto nel fill
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-synthwave {
	--osk-ch-neon-a: #ff6ec7;
	--osk-ch-neon-b: #00d4ff;
	--osk-stage-accent-c: #7928ca;
	--osk-ch-amb-bg: #0a0414;
}
.osk-ch-theme-stage-synthwave .ch-hub-surface::before {
	background:
		linear-gradient(180deg, transparent 55%, rgba(255, 110, 199, 0.12) 72%, rgba(121, 40, 202, 0.2) 85%, #1a0830 100%),
		repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(0, 212, 255, 0.12) 23px, rgba(0, 212, 255, 0.12) 24px),
		linear-gradient(180deg, #1a0830 0%, #2d1050 40%, #ff6ec7 100%);
	background-size: auto, auto, auto;
	animation: osk-stage-synth-drift 20s ease-in-out infinite;
}
.osk-ch-theme-stage-synthwave .ch-hub-surface::after {
	background:
		linear-gradient(90deg, transparent, var(--osk-ch-neon-a), var(--osk-ch-neon-b), transparent) 0 calc(72% - 8px) / 100% 2px no-repeat,
		var(--osk-stage-tube-a) 0 0 / 100% 4px no-repeat,
		var(--osk-stage-tube-b) 0 100% / 100% 4px no-repeat,
		var(--osk-stage-tube-a-v) 0 0 / 4px 100% no-repeat,
		var(--osk-stage-tube-b-v) 100% 0 / 4px 100% no-repeat;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent));
}
.osk-ch-theme-stage-synthwave .ch-hub-identity__head::before { content: "SYNTH"; background: linear-gradient(90deg, #7928ca, #ff6ec7); }
@keyframes osk-stage-synth-drift {
	0%, 100% { filter: hue-rotate(0deg); }
	50% { filter: hue-rotate(8deg); }
}

/* ═══════════════════════════════════════════════════════════════
   10 · CIRCUIT BOARD — tracce PCB nel fill + nodi angolo
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-circuit {
	--osk-ch-neon-a: #00ff88;
	--osk-ch-neon-b: #ffaa00;
	--osk-stage-accent-c: #004422;
	--osk-ch-amb-bg: #040a06;
}
.osk-ch-theme-stage-circuit .ch-hub-surface::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h15v5H0zm25 0h15v-5H25zm5-15v15h-5V5zM15 25v15h5V25z' fill='rgba(0,255,136,0.08)'/%3E%3C/svg%3E"),
		radial-gradient(circle at 80% 20%, rgba(255, 170, 0, 0.08), transparent 40%),
		#061008;
	background-size: 40px 40px, auto, auto;
}
.osk-ch-theme-stage-circuit .ch-hub-surface::after {
	background:
		radial-gradient(circle at 8px 8px, var(--osk-ch-neon-a) 0%, var(--osk-ch-neon-a) 35%, transparent 36%),
		radial-gradient(circle at calc(100% - 8px) 8px, var(--osk-ch-neon-b) 0%, var(--osk-ch-neon-b) 35%, transparent 36%),
		radial-gradient(circle at 8px calc(100% - 8px), var(--osk-ch-neon-b) 0%, var(--osk-ch-neon-b) 35%, transparent 36%),
		radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--osk-ch-neon-a) 0%, var(--osk-ch-neon-a) 35%, transparent 36%),
		linear-gradient(90deg, color-mix(in srgb, var(--osk-ch-neon-a) 60%, transparent) 0%, color-mix(in srgb, var(--osk-ch-neon-a) 60%, transparent) 100%) 8px 8px / calc(100% - 16px) 2px no-repeat,
		linear-gradient(90deg, color-mix(in srgb, var(--osk-ch-neon-b) 60%, transparent) 0%, color-mix(in srgb, var(--osk-ch-neon-b) 60%, transparent) 100%) 8px calc(100% - 10px) / calc(100% - 16px) 2px no-repeat,
		linear-gradient(180deg, color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent) 0%, color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent) 100%) 8px 8px / 2px calc(100% - 16px) no-repeat,
		linear-gradient(180deg, color-mix(in srgb, var(--osk-ch-neon-b) 50%, transparent) 0%, color-mix(in srgb, var(--osk-ch-neon-b) 50%, transparent) 100%) calc(100% - 10px) 8px / 2px calc(100% - 16px) no-repeat;
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--osk-ch-neon-a) 40%, transparent));
	animation: osk-stage-circuit-blink 3s ease-in-out infinite;
}
.osk-ch-theme-stage-circuit .ch-hub-identity__head::before { content: "PCB"; color: #00ff88; }
@keyframes osk-stage-circuit-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.85; }
}

/* ═══════════════════════════════════════════════════════════════
   11 · SCAN BEAM — raggio orizzontale che attraversa il fill
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-scan {
	--osk-ch-neon-a: #00fff7;
	--osk-ch-neon-b: #ffffff;
	--osk-stage-accent-c: #006666;
}
.osk-ch-theme-stage-scan .ch-hub-surface::before {
	background:
		linear-gradient(180deg, transparent 0%, transparent 100%),
		radial-gradient(ellipse 100% 8% at 50% var(--osk-scan-y, 50%), rgba(0, 255, 247, 0.25), transparent 70%),
		#080c10;
	animation: osk-stage-scan-sweep 4s linear infinite;
}
.osk-ch-theme-stage-scan .ch-hub-surface::after {
	background:
		var(--osk-stage-tube-a) 0 0 / 100% 2px no-repeat,
		var(--osk-stage-tube-a) 0 100% / 100% 2px no-repeat,
		var(--osk-stage-tube-b-v) 0 0 / 2px 100% no-repeat,
		var(--osk-stage-tube-b-v) 100% 0 / 2px 100% no-repeat;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--osk-ch-neon-a) 55%, transparent));
}
.osk-ch-theme-stage-scan .ch-hub-identity__head::before { content: "SCAN"; }
@property --osk-scan-y {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}
@keyframes osk-stage-scan-sweep {
	0% { --osk-scan-y: -5%; }
	100% { --osk-scan-y: 105%; }
}

/* ═══════════════════════════════════════════════════════════════
   12 · VIP TICKET — perforazioni laterali + stamp
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-ticket {
	--osk-ch-neon-a: #ffd700;
	--osk-ch-neon-b: #ff6b6b;
	--osk-stage-accent-c: #8b6914;
	--osk-ch-amb-bg: #0c0a06;
}
.osk-ch-theme-stage-ticket .ch-hub-surface::before {
	background:
		radial-gradient(circle at 0 50%, var(--osk-ch-amb-bg) 6px, transparent 6px),
		radial-gradient(circle at 100% 50%, var(--osk-ch-amb-bg) 6px, transparent 6px),
		repeating-radial-gradient(circle at 0 8px, transparent 0, transparent 5px, rgba(0, 0, 0, 0.3) 5px, rgba(0, 0, 0, 0.3) 6px),
		linear-gradient(90deg, rgba(255, 215, 0, 0.06) 0%, transparent 8%, transparent 92%, rgba(255, 107, 107, 0.06) 100%),
		linear-gradient(180deg, #1a1408, #120e06);
	background-size: 12px 100%, 12px 100%, 12px 16px, auto, auto;
	background-position: 0 0, 100% 0, 0 0, 0 0, 0 0;
	background-repeat: repeat-y, repeat-y, repeat-y, no-repeat, no-repeat;
}
.osk-ch-theme-stage-ticket .ch-hub-surface::after {
	background:
		linear-gradient(90deg, var(--osk-ch-neon-a), var(--osk-ch-neon-b)) 12px 0 / calc(100% - 24px) 3px no-repeat,
		linear-gradient(90deg, var(--osk-ch-neon-b), var(--osk-ch-neon-a)) 12px 100% / calc(100% - 24px) 3px no-repeat,
		repeating-linear-gradient(180deg, var(--osk-ch-neon-a) 0, var(--osk-ch-neon-a) 6px, transparent 6px, transparent 12px) 0 0 / 3px 100% no-repeat,
		repeating-linear-gradient(180deg, var(--osk-ch-neon-b) 0, var(--osk-ch-neon-b) 6px, transparent 6px, transparent 12px) 100% 0 / 3px 100% no-repeat;
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--osk-ch-neon-a) 40%, transparent));
}
.osk-ch-theme-stage-ticket .ch-hub-identity__head::before {
	content: "ADMIT ONE";
	letter-spacing: 0.2em;
	border: 2px dashed rgba(255, 215, 0, 0.4);
	background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   13 · VINYL GROOVE — anelli concentrici nel fill
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-vinyl {
	--osk-ch-neon-a: #ff4081;
	--osk-ch-neon-b: #7c4dff;
	--osk-stage-accent-c: #1a0a20;
}
.osk-ch-theme-stage-vinyl .ch-hub-surface::before {
	background:
		repeating-radial-gradient(circle at 85% 15%, transparent 0, transparent 8px, rgba(255, 255, 255, 0.03) 8px, rgba(255, 255, 255, 0.03) 9px),
		radial-gradient(circle at 85% 15%, #1a1020 0%, #1a1020 12%, transparent 13%),
		radial-gradient(circle at 85% 15%, transparent 20%, rgba(255, 64, 129, 0.04) 20%, rgba(255, 64, 129, 0.04) 21%, transparent 22%),
		radial-gradient(circle at 85% 15%, transparent 30%, rgba(124, 77, 255, 0.04) 30%, rgba(124, 77, 255, 0.04) 31%, transparent 32%),
		radial-gradient(circle at 85% 15%, transparent 40%, rgba(255, 64, 129, 0.03) 40%, rgba(255, 64, 129, 0.03) 41%, transparent 42%),
		#0e0814;
	animation: osk-stage-vinyl-spin 20s linear infinite;
}
.osk-ch-theme-stage-vinyl .ch-hub-surface::after {
	border-radius: 50% 50% 12px 12px / 30% 30% 12px 12px;
	background:
		var(--osk-stage-tube-a) 8px calc(100% - 8px) / calc(100% - 16px) 4px no-repeat,
		var(--osk-stage-tube-b-v) 8px 20% / 4px 60% no-repeat,
		var(--osk-stage-tube-b-v) calc(100% - 12px) 20% / 4px 60% no-repeat;
}
.osk-ch-theme-stage-vinyl .ch-hub-identity__head::before { content: "33⅓ RPM"; }
@keyframes osk-stage-vinyl-spin {
	to { filter: hue-rotate(15deg); }
}

/* ═══════════════════════════════════════════════════════════════
   14 · HOLO FOIL — shimmer iridescente sui bordi
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-holo {
	--osk-ch-neon-a: #ff00ff;
	--osk-ch-neon-b: #00ffff;
	--osk-stage-accent-c: #ffff00;
}
.osk-ch-theme-stage-holo .ch-hub-surface::before {
	background:
		conic-gradient(from var(--osk-ch-stage-spin) at 30% 40%, rgba(255, 0, 255, 0.06), rgba(0, 255, 255, 0.06), rgba(255, 255, 0, 0.05), rgba(255, 0, 255, 0.06)),
		#0c0c10;
	animation: osk-ch-stage-ring 8s linear infinite;
}
.osk-ch-theme-stage-holo .ch-hub-surface::after {
	padding: 2px;
	background: conic-gradient(from var(--osk-ch-stage-spin), #ff00ff, #00ffff, #ffff00, #ff00ff);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	filter: drop-shadow(0 0 8px rgba(255, 0, 255, 0.4));
	animation: osk-ch-stage-ring 4s linear infinite;
}
.osk-ch-theme-stage-holo .ch-hub-identity__head::before { content: "HOLO"; background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ffff00, #ff00ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ═══════════════════════════════════════════════════════════════
   15 · MATRIX RAIN — colonne codice nel fill
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-matrix {
	--osk-ch-neon-a: #00ff41;
	--osk-ch-neon-b: #008f11;
	--osk-stage-accent-c: #003b00;
	--osk-ch-amb-bg: #020804;
}
.osk-ch-theme-stage-matrix .ch-hub-surface::before {
	background:
		repeating-linear-gradient(180deg, transparent 0, transparent 14px, rgba(0, 255, 65, 0.04) 14px, rgba(0, 255, 65, 0.08) 15px, transparent 16px),
		repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(0, 255, 65, 0.03) 18px, rgba(0, 255, 65, 0.06) 19px),
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 255, 65, 0.1), transparent 60%),
		#040a06;
	animation: osk-stage-matrix-fall 6s linear infinite;
}
.osk-ch-theme-stage-matrix .ch-hub-surface::after {
	background:
		linear-gradient(180deg, var(--osk-ch-neon-a), transparent) 0 0 / 2px 30% no-repeat,
		linear-gradient(180deg, transparent, var(--osk-ch-neon-a)) 100% 70% / 2px 30% no-repeat,
		linear-gradient(90deg, var(--osk-ch-neon-a), var(--osk-ch-neon-b)) 0 0 / 100% 2px no-repeat,
		linear-gradient(90deg, var(--osk-ch-neon-b), var(--osk-ch-neon-a)) 0 100% / 100% 2px no-repeat;
	filter: drop-shadow(0 0 6px rgba(0, 255, 65, 0.5));
}
.osk-ch-theme-stage-matrix .ch-hub-identity__head::before { content: "MATRIX"; color: #00ff41; font-family: monospace; }
@keyframes osk-stage-matrix-fall {
	0% { background-position: 0 0, 0 0, 0 0, 0 0; }
	100% { background-position: 0 120px, 0 0, 0 0, 0 0; }
}

/* ═══════════════════════════════════════════════════════════════
   16 · STARFIELD — stelle nel fill + bordo punti luminosi
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-starfield {
	--osk-ch-neon-a: #a8d8ff;
	--osk-ch-neon-b: #ffffff;
	--osk-stage-accent-c: #4060a0;
	--osk-ch-amb-bg: #040610;
}
.osk-ch-theme-stage-starfield .ch-hub-surface::before {
	background:
		radial-gradient(circle at 12% 18%, #fff 0%, #fff 1px, transparent 1px),
		radial-gradient(circle at 45% 32%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
		radial-gradient(circle at 78% 12%, #fff 0%, #fff 1px, transparent 1px),
		radial-gradient(circle at 88% 55%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
		radial-gradient(circle at 22% 72%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
		radial-gradient(circle at 62% 85%, #fff 0%, #fff 1px, transparent 1px),
		radial-gradient(circle at 35% 48%, rgba(168, 216, 255, 0.5) 0%, rgba(168, 216, 255, 0.5) 1.5px, transparent 1.5px),
		linear-gradient(180deg, #060818, #0a0c18);
	animation: osk-stage-star-twinkle 5s ease-in-out infinite;
}
.osk-ch-theme-stage-starfield .ch-hub-surface::after {
	background:
		radial-gradient(circle, var(--osk-ch-neon-a) 0%, var(--osk-ch-neon-a) 30%, transparent 31%) 0 0 / 8px 8px repeat-x,
		radial-gradient(circle, var(--osk-ch-neon-b) 0%, var(--osk-ch-neon-b) 30%, transparent 31%) 0 100% / 8px 8px repeat-x,
		radial-gradient(circle, var(--osk-ch-neon-a) 0%, var(--osk-ch-neon-a) 30%, transparent 31%) 0 0 / 8px 8px repeat-y,
		radial-gradient(circle, var(--osk-ch-neon-b) 0%, var(--osk-ch-neon-b) 30%, transparent 31%) 100% 0 / 8px 8px repeat-y;
	background-size: 24px 4px, 24px 4px, 4px 24px, 4px 24px;
	background-position: 0 0, 0 100%, 0 0, 100% 0;
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--osk-ch-neon-a) 40%, transparent));
}
.osk-ch-theme-stage-starfield .ch-hub-identity__head::before { content: "COSMOS"; }
@keyframes osk-stage-star-twinkle {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.92; }
}

/* ═══════════════════════════════════════════════════════════════
   17 · SMOKE VEIL — fill nebbioso, glow diffuso (no tubi duri)
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-smoke {
	--osk-ch-neon-a: #c8b8ff;
	--osk-ch-neon-b: #88a0c8;
	--osk-stage-accent-c: #606888;
}
.osk-ch-theme-stage-smoke .ch-hub-surface::before {
	background:
		radial-gradient(ellipse 80% 60% at 20% 80%, rgba(200, 184, 255, 0.12), transparent 55%),
		radial-gradient(ellipse 70% 50% at 80% 30%, rgba(136, 160, 200, 0.1), transparent 50%),
		radial-gradient(ellipse 90% 70% at 50% 50%, rgba(96, 104, 136, 0.08), transparent 65%),
		#0c0c12;
	animation: osk-stage-smoke-drift 12s ease-in-out infinite;
}
.osk-ch-theme-stage-smoke .ch-hub-surface::after {
	background: none;
	box-shadow:
		inset 0 0 20px color-mix(in srgb, var(--osk-ch-neon-a) 15%, transparent),
		inset 0 0 40px color-mix(in srgb, var(--osk-ch-neon-b) 8%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--osk-ch-neon-a) 25%, transparent);
	filter: blur(0);
	animation: osk-stage-smoke-glow 6s ease-in-out infinite;
}
.osk-ch-theme-stage-smoke .ch-hub-identity__head::before { content: "MIST"; }
@keyframes osk-stage-smoke-drift {
	0%, 100% { filter: blur(0); }
	50% { filter: blur(0.5px); }
}
@keyframes osk-stage-smoke-glow {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   18 · ICE CRYSTAL — angoli taglienti diamante
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-crystal {
	--osk-ch-neon-a: #a8f0ff;
	--osk-ch-neon-b: #e0ffff;
	--osk-stage-accent-c: #4080a0;
}
.osk-ch-theme-stage-crystal .ch-hub-stack,
.osk-ch-theme-stage-crystal .ch-hub-identity {
	clip-path: none !important;
}
.osk-ch-theme-stage-crystal .ch-hub-surface {
	clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px) !important;
}
.osk-ch-theme-stage-crystal .ch-hub-surface::before {
	background:
		linear-gradient(135deg, rgba(168, 240, 255, 0.08) 0%, transparent 40%),
		linear-gradient(315deg, rgba(224, 255, 255, 0.06) 0%, transparent 40%),
		linear-gradient(180deg, #0c1418, #081018);
}
.osk-ch-theme-stage-crystal .ch-hub-surface::after {
	background:
		linear-gradient(135deg, var(--osk-ch-neon-a) 0%, transparent 50%) 0 0 / 16px 16px no-repeat,
		linear-gradient(225deg, var(--osk-ch-neon-b) 0%, transparent 50%) 100% 0 / 16px 16px no-repeat,
		linear-gradient(45deg, var(--osk-ch-neon-b) 0%, transparent 50%) 0 100% / 16px 16px no-repeat,
		linear-gradient(315deg, var(--osk-ch-neon-a) 0%, transparent 50%) 100% 100% / 16px 16px no-repeat,
		linear-gradient(90deg, color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent), color-mix(in srgb, var(--osk-ch-neon-b) 50%, transparent)) 16px 0 / calc(100% - 32px) 1px no-repeat,
		linear-gradient(90deg, color-mix(in srgb, var(--osk-ch-neon-b) 50%, transparent), color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent)) 16px 100% / calc(100% - 32px) 1px no-repeat;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--osk-ch-neon-a) 45%, transparent));
}
.osk-ch-theme-stage-crystal .ch-hub-identity__head::before { content: "CRYSTAL"; }

/* ═══════════════════════════════════════════════════════════════
   19 · PULSE RING — bordo che pulsa in spessore
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-pulse {
	--osk-ch-neon-a: #ff2d78;
	--osk-ch-neon-b: #7c5cff;
	--osk-stage-accent-c: #c41e6a;
}
.osk-ch-theme-stage-pulse .ch-hub-surface::before {
	background:
		radial-gradient(ellipse 100% 80% at 50% 50%, rgba(255, 45, 120, 0.06), transparent 70%),
		var(--osk-stage-card-fill);
}
.osk-ch-theme-stage-pulse .ch-hub-surface::after {
	background: none;
	box-shadow: inset 0 0 0 var(--osk-pulse-w, 2px) var(--osk-ch-neon-a);
	filter: drop-shadow(0 0 calc(var(--osk-pulse-w, 2px) * 4) color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent));
	animation: osk-stage-pulse-border 2s ease-in-out infinite;
}
.osk-ch-theme-stage-pulse .ch-hub-identity__avatar-wrap::after {
	animation: osk-stage-pulse-ring 2s ease-in-out infinite;
}
.osk-ch-theme-stage-pulse .ch-hub-identity__head::before { content: "PULSE"; }
@property --osk-pulse-w {
	syntax: '<length>';
	inherits: false;
	initial-value: 2px;
}
@keyframes osk-stage-pulse-border {
	0%, 100% { --osk-pulse-w: 2px; opacity: 1; }
	50% { --osk-pulse-w: 5px; opacity: 0.9; }
}
@keyframes osk-stage-pulse-ring {
	0%, 100% { transform: scale(1); opacity: 0.5; }
	50% { transform: scale(1.08); opacity: 0.9; }
}

/* ═══════════════════════════════════════════════════════════════
   20 · LED SEGMENT — segmenti LED stile pista
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-segment {
	--osk-ch-neon-a: #ffaa00;
	--osk-ch-neon-b: #ff4400;
	--osk-stage-accent-c: #884400;
}
.osk-ch-theme-stage-segment .ch-hub-surface::before {
	background:
		repeating-linear-gradient(90deg, rgba(255, 170, 0, 0.03) 0, rgba(255, 170, 0, 0.03) 12px, transparent 12px, transparent 16px),
		#100c08;
}
.osk-ch-theme-stage-segment .ch-hub-surface::after {
	background:
		repeating-linear-gradient(90deg, var(--osk-ch-neon-a) 0, var(--osk-ch-neon-a) 10px, transparent 10px, transparent 14px) 6px 6px / calc(100% - 12px) 4px no-repeat,
		repeating-linear-gradient(90deg, var(--osk-ch-neon-b) 0, var(--osk-ch-neon-b) 10px, transparent 10px, transparent 14px) 6px calc(100% - 10px) / calc(100% - 12px) 4px no-repeat,
		repeating-linear-gradient(180deg, var(--osk-ch-neon-a) 0, var(--osk-ch-neon-a) 10px, transparent 10px, transparent 14px) 6px 6px / 4px calc(100% - 12px) no-repeat,
		repeating-linear-gradient(180deg, var(--osk-ch-neon-b) 0, var(--osk-ch-neon-b) 10px, transparent 10px, transparent 14px) calc(100% - 10px) 6px / 4px calc(100% - 12px) no-repeat;
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent));
	animation: osk-stage-segment-chase 1.5s steps(4) infinite;
}
.osk-ch-theme-stage-segment .ch-hub-identity__head::before { content: "SEGMENT"; }
@keyframes osk-stage-segment-chase {
	0% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent)); }
	50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--osk-ch-neon-b) 60%, transparent)); }
}

/* ═══════════════════════════════════════════════════════════════
   21 · LIQUID WAVE — onda luminosa sul bordo inferiore
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-wave {
	--osk-ch-neon-a: #00d4ff;
	--osk-ch-neon-b: #7c5cff;
	--osk-stage-accent-c: #0044aa;
}
.osk-ch-theme-stage-wave .ch-hub-surface::before {
	background:
		radial-gradient(ellipse 120% 40% at 50% 100%, rgba(0, 212, 255, 0.12), transparent 60%),
		linear-gradient(180deg, #080c14, #0c1018);
}
.osk-ch-theme-stage-wave .ch-hub-surface::after {
	background:
		var(--osk-stage-tube-a-v) 0 0 / 3px 100% no-repeat,
		var(--osk-stage-tube-b-v) 100% 0 / 3px 100% no-repeat,
		var(--osk-stage-tube-a) 0 0 / 100% 3px no-repeat,
		radial-gradient(ellipse 30% 100% at var(--osk-wave-x, 50%) 100%, var(--osk-ch-neon-a), transparent 70%) 0 100% / 40% 6px no-repeat,
		linear-gradient(90deg, transparent, var(--osk-ch-neon-b), transparent) 0 100% / 100% 3px no-repeat;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--osk-ch-neon-a) 45%, transparent));
	animation: osk-stage-wave-move 5s ease-in-out infinite;
}
.osk-ch-theme-stage-wave .ch-hub-identity__head::before { content: "WAVE"; }
@property --osk-wave-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 50%;
}
@keyframes osk-stage-wave-move {
	0%, 100% { --osk-wave-x: 20%; }
	50% { --osk-wave-x: 80%; }
}

/* ═══════════════════════════════════════════════════════════════
   22 · RETRO TV — cornice TV arrotondata spessa
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-retrotv {
	--osk-ch-neon-a: #ffb347;
	--osk-ch-neon-b: #ff6b35;
	--osk-stage-accent-c: #8b4513;
	--osk-ch-amb-bg: #0c0804;
}
.osk-ch-theme-stage-retrotv .ch-hub-surface {
	border-radius: 20px !important;
}
.osk-ch-theme-stage-retrotv .ch-hub-surface::before {
	border-radius: 18px;
	background:
		radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255, 179, 71, 0.05), transparent 65%),
		linear-gradient(180deg, #1a1208, #120c06);
	box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
}
.osk-ch-theme-stage-retrotv .ch-hub-surface::after {
	inset: 0;
	border-radius: 20px;
	background: none;
	box-shadow:
		inset 0 0 0 6px #2a2018,
		inset 0 0 0 8px color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent),
		inset 0 0 0 10px #1a1410,
		0 0 12px color-mix(in srgb, var(--osk-ch-neon-b) 25%, transparent);
	filter: none;
}
.osk-ch-theme-stage-retrotv .ch-hub-identity__head::before { content: "RETRO TV"; border-radius: 20px; }

/* ═══════════════════════════════════════════════════════════════
   23 · NEON SIGN — glow irregolare stile insegna
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-neonsign {
	--osk-ch-neon-a: #ff69b4;
	--osk-ch-neon-b: #ff1493;
	--osk-stage-accent-c: #c71585;
}
.osk-ch-theme-stage-neonsign .ch-hub-surface::before {
	background:
		radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255, 105, 180, 0.1), transparent 60%),
		#140810;
}
.osk-ch-theme-stage-neonsign .ch-hub-surface::after {
	background: none;
	box-shadow:
		inset 0 -2px 0 var(--osk-ch-neon-a),
		inset 0 2px 0 color-mix(in srgb, var(--osk-ch-neon-b) 80%, transparent),
		inset 2px 0 0 color-mix(in srgb, var(--osk-ch-neon-a) 60%, transparent),
		inset -2px 0 0 color-mix(in srgb, var(--osk-ch-neon-b) 60%, transparent),
		0 0 10px color-mix(in srgb, var(--osk-ch-neon-a) 40%, transparent),
		0 0 20px color-mix(in srgb, var(--osk-ch-neon-b) 25%, transparent),
		2px 2px 0 color-mix(in srgb, var(--osk-ch-neon-a) 20%, transparent),
		-1px -1px 0 color-mix(in srgb, var(--osk-ch-neon-b) 15%, transparent);
	animation: osk-stage-neonsign-flicker 4s ease-in-out infinite;
}
.osk-ch-theme-stage-neonsign .ch-hub-identity__head::before {
	content: "OPEN";
	font-style: italic;
	text-shadow: 0 0 10px var(--osk-ch-neon-a), 0 0 20px var(--osk-ch-neon-b);
}
@keyframes osk-stage-neonsign-flicker {
	0%, 100% { opacity: 1; }
	41% { opacity: 1; }
	42% { opacity: 0.75; }
	43% { opacity: 1; }
	72% { opacity: 0.9; }
	73% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   24 · HORIZON GRID — pavimento prospettico cyber
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-horizon {
	--osk-ch-neon-a: #00ffff;
	--osk-ch-neon-b: #ff00aa;
	--osk-stage-accent-c: #4400aa;
}
.osk-ch-theme-stage-horizon .ch-hub-surface::before {
	background:
		linear-gradient(180deg, transparent 45%, rgba(0, 255, 255, 0.15) 48%, rgba(255, 0, 170, 0.1) 100%),
		repeating-linear-gradient(90deg, transparent 0, transparent 19px, rgba(0, 255, 255, 0.15) 19px, rgba(0, 255, 255, 0.15) 20px),
		repeating-linear-gradient(0deg, transparent 0, transparent 19px, rgba(255, 0, 170, 0.08) 19px, rgba(255, 0, 170, 0.08) 20px),
		linear-gradient(180deg, #0a0418 0%, #1a0830 100%);
	background-size: auto, 40px 40px, 40px 40px, auto;
	transform: perspective(200px) rotateX(2deg);
	transform-origin: center bottom;
}
.osk-ch-theme-stage-horizon .ch-hub-surface::after {
	background:
		linear-gradient(90deg, var(--osk-ch-neon-a), var(--osk-ch-neon-b), var(--osk-ch-neon-a)) 0 48% / 100% 2px no-repeat,
		var(--osk-stage-tube-a) 0 0 / 100% 3px no-repeat,
		var(--osk-stage-tube-b) 0 100% / 100% 3px no-repeat;
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent));
}
.osk-ch-theme-stage-horizon .ch-hub-identity__head::before { content: "HORIZON"; }

/* ═══════════════════════════════════════════════════════════════
   25 · EMBER CORE — particelle brace + bordo inferiore fuso
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-theme-stage-ember {
	--osk-ch-neon-a: #ff6600;
	--osk-ch-neon-b: #ffcc00;
	--osk-stage-accent-c: #cc2200;
	--osk-ch-amb-bg: #0c0602;
}
.osk-ch-theme-stage-ember .ch-hub-surface::before {
	background:
		radial-gradient(circle at 15% 90%, rgba(255, 102, 0, 0.15) 0%, transparent 25%),
		radial-gradient(circle at 45% 95%, rgba(255, 204, 0, 0.1) 0%, transparent 20%),
		radial-gradient(circle at 75% 88%, rgba(255, 80, 0, 0.12) 0%, transparent 22%),
		radial-gradient(circle at 90% 92%, rgba(255, 150, 0, 0.08) 0%, transparent 18%),
		linear-gradient(180deg, #140804, #0c0602);
	animation: osk-stage-ember-glow 3s ease-in-out infinite;
}
.osk-ch-theme-stage-ember .ch-hub-surface::after {
	background:
		var(--osk-stage-tube-a-v) 0 0 / 3px 100% no-repeat,
		var(--osk-stage-tube-b-v) 100% 0 / 3px 100% no-repeat,
		var(--osk-stage-tube-a) 0 0 / 100% 3px no-repeat,
		linear-gradient(90deg, transparent, var(--osk-ch-neon-a), var(--osk-ch-neon-b), var(--osk-ch-neon-a), transparent) 0 100% / 100% 8px no-repeat,
		radial-gradient(ellipse 50% 100% at 30% 100%, rgba(255, 102, 0, 0.6), transparent 70%) 0 100% / 60% 12px no-repeat,
		radial-gradient(ellipse 40% 100% at 70% 100%, rgba(255, 204, 0, 0.4), transparent 70%) 40% 100% / 50% 10px no-repeat;
	filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.5)) drop-shadow(0 4px 12px rgba(255, 80, 0, 0.3));
	animation: osk-stage-ember-flicker 2s ease-in-out infinite;
}
.osk-ch-theme-stage-ember .ch-hub-identity__head::before { content: "EMBER"; color: #ffcc00; }
@keyframes osk-stage-ember-glow {
	0%, 100% { filter: brightness(1); }
	50% { filter: brightness(1.08); }
}
@keyframes osk-stage-ember-flicker {
	0%, 100% { opacity: 1; }
	30% { opacity: 0.92; }
	60% { opacity: 0.96; }
}

/* ═══════════════════════════════════════════════════════════════
   Preview shop — override mini HUD per varianti visibili
   ═══════════════════════════════════════════════════════════════ */
.osk-ch-special-preview--stage.osk-ch-theme-stage-arcade .osk-ch-special-preview__hud::after {
	background: linear-gradient(90deg, var(--osk-ch-neon-a), var(--osk-ch-neon-b)) 0 0 / 100% 3px no-repeat, linear-gradient(90deg, var(--osk-ch-neon-b), var(--osk-ch-neon-a)) 0 100% / 100% 3px no-repeat;
	filter: drop-shadow(0 0 3px color-mix(in srgb, var(--osk-ch-neon-a) 50%, transparent));
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-brackets .osk-ch-special-preview__hud::after {
	background: var(--osk-stage-tube-a) 4px 4px / 12px 3px no-repeat, var(--osk-stage-tube-a-v) 4px 4px / 3px 12px no-repeat, var(--osk-stage-tube-b) calc(100% - 16px) calc(100% - 7px) / 12px 3px no-repeat;
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-minimal .osk-ch-special-preview__hud::after {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--osk-ch-neon-a) 40%, transparent);
	background: none;
	filter: none;
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-holo .osk-ch-special-preview__hud::after {
	background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
	padding: 1px;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-matrix .osk-ch-special-preview__hud::after {
	background: linear-gradient(90deg, #00ff41, #008f11) 0 0 / 100% 2px no-repeat, linear-gradient(90deg, #008f11, #00ff41) 0 100% / 100% 2px no-repeat;
	filter: drop-shadow(0 0 4px rgba(0, 255, 65, 0.5));
}
.osk-ch-special-preview--stage.osk-ch-theme-stage-synthwave .osk-ch-special-preview__hud::after {
	background: linear-gradient(90deg, transparent, #ff6ec7, #00d4ff, transparent) 0 60% / 100% 2px no-repeat, linear-gradient(90deg, #ff6ec7, #00d4ff) 0 0 / 100% 3px no-repeat;
}