/**
 * Fezo Avatar Editor — "Vyrob si parťáka!" kid-friendly FEZO City redesign.
 *
 * Neon character-creator: glowing pedestal preview, emoji tabs, big tap targets,
 * colour-coded actions. Full-window kiosk shell. JS contract preserved — every
 * .fezo-editor__* class + data-fezo-editor-* hook is styled, never renamed.
 *
 * Depends on fezo-tokens (font vars) but pins FEZO City brand colours directly.
 */

.fezo-fezatar-kiosk {
	/* brand palette */
	--fz-cyan: #00FFCC;
	--fz-purple: #8A2BE2;
	--fz-magenta: #FF2BD6;
	--fz-gold: #ffaa00;
	--fz-panel: #0a0a14;
	--fz-panel-2: #15151f;
	--fz-ink: #f3f4f6;
	--fz-muted: #a0a0b8;
	--fz-glow-cyan: 0 0 16px rgba(0, 255, 204, .6);
	--fz-glow-magenta: 0 0 18px rgba(255, 43, 214, .7);
	--fz-glow-purple: 0 0 18px rgba(138, 43, 226, .6);
	--fz-glow-gold: 0 0 14px rgba(255, 170, 0, .55);
	--fz-bounce: cubic-bezier(.34, 1.56, .64, 1);

	min-height: 100svh;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 3vh, 26px);
	padding-bottom: 36px;
	background: radial-gradient(120% 80% at 50% 0%, #12122a 0%, #0a0a14 45%, #050508 100%);
	color: var(--fz-ink);
	-webkit-font-smoothing: antialiased;
}

/* ─── Header bar (logo + kid title). Back button comes from the kiosk mu-plugin. ── */
.fezo-fezatar-kiosk__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: clamp(16px, 3vh, 26px) clamp(16px, 4vw, 40px) clamp(10px, 2vh, 16px);
	border-bottom: 1px solid rgba(0, 255, 204, .2);
	box-shadow: 0 2px 16px rgba(0, 255, 204, .07);
	background: linear-gradient(180deg, #0a0a14, rgba(5, 5, 8, 0));
	text-align: center;
}
.fezo-fezatar-kiosk__logo {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	flex: 0 0 auto;
	box-shadow: 0 0 16px rgba(138, 43, 226, .55);
}
.fezo-fezatar-kiosk__title {
	margin: 0;
	font-family: var(--fezo-font-display, 'Audiowide', 'Major Mono Display', monospace);
	font-size: clamp(22px, 4vw, 34px);
	letter-spacing: 2px;
	color: var(--fz-cyan);
	text-shadow: 0 0 14px rgba(0, 255, 204, .55);
	line-height: 1.1;
}
.fezo-fezatar-kiosk__subtitle {
	margin: 4px 0 0;
	font-family: var(--fezo-font-mono, 'JetBrains Mono', monospace);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--fz-muted);
}

/* ─── Editor card ───────────────────────────────────────────────────────── */
.fezo-editor {
	display: grid;
	grid-template-columns: minmax(300px, 400px) 1fr;
	gap: clamp(20px, 3vw, 40px);
	width: min(1100px, 94vw);
	margin-inline: auto;
	background: var(--fz-panel);
	border: 1px solid rgba(138, 43, 226, .28);
	border-radius: 24px;
	padding: clamp(18px, 3vw, 32px);
	color: var(--fz-ink);
	font-family: var(--fezo-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	box-shadow: 0 0 40px rgba(138, 43, 226, .12);
}

/* ─── Preview column / pedestal ─────────────────────────────────────────── */
.fezo-editor__preview-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}
.fezo-editor__preview {
	position: relative;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24px;
	background: radial-gradient(circle at 50% 42%, rgba(0, 255, 204, .10) 0%, rgba(0, 255, 204, .03) 55%, #0d0d18 100%);
	border: 2px solid var(--fz-cyan);
	box-shadow: 0 0 28px rgba(0, 255, 204, .30), inset 0 0 24px rgba(0, 255, 204, .06);
	overflow: visible;
}
.fezo-editor__preview::before { /* hologram tag */
	content: 'TVOJ FEZATAR';
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	font: 700 .6rem var(--fezo-font-mono, 'JetBrains Mono', monospace);
	letter-spacing: .18em;
	color: var(--fz-magenta);
	opacity: .75;
	z-index: 2;
}
.fezo-editor__preview::after { /* glowing floor disc */
	content: '';
	position: absolute;
	left: 50%;
	bottom: 11%;
	width: 55%;
	height: 14px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(0, 255, 204, .45), transparent 70%);
	filter: blur(2px);
	z-index: 0;
}
.fezo-editor__preview svg {
	position: relative;
	z-index: 1;
	width: 86%;
	height: 86%;
	filter: drop-shadow(0 0 12px rgba(0, 255, 204, .45));
	animation: fz-pedestal-float 4s ease-in-out infinite;
}
.fezo-editor__preview-loading {
	color: var(--fz-muted);
	font-style: italic;
}
.fezo-editor__error {
	color: #FF0055;
	text-align: center;
	margin: 0;
	text-shadow: 0 0 8px rgba(255, 0, 85, .4);
}

/* ─── Action buttons (colour-coded so kids learn them by hue) ────────────── */
.fezo-editor__actions {
	display: grid;
	gap: 12px;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
}
.fezo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 12px 18px;
	background: #0d0d18;
	color: var(--fz-ink);
	border: 2px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	font-family: var(--fezo-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: .03em;
	cursor: pointer;
	transition: transform .12s, box-shadow .14s, background .14s, border-color .14s;
}
.fezo-btn:active:not(:disabled) { transform: scale(.97); }
.fezo-btn:focus-visible { outline: 2px solid var(--fz-cyan); outline-offset: 2px; }
.fezo-btn:disabled { opacity: .7; cursor: default; }

/* emoji prefixes on the BUTTON (never on the JS-rewritten save-label span) */
[data-fezo-editor-save]::before      { content: "💾"; font-size: 1.1em; }
[data-fezo-editor-reset]::before     { content: "↩️"; font-size: 1.1em; }
[data-fezo-editor-randomize]::before { content: "🎲"; font-size: 1.1em; }

/* Save — cyan frame when clean, magenta glow when dirty */
.fezo-btn--primary {
	background: #0d0d18;
	color: var(--fz-muted);
	border-color: rgba(0, 255, 204, .4);
}
.fezo-btn--primary.is-dirty {
	background: linear-gradient(135deg, var(--fz-magenta), #FF1493);
	color: #fff;
	border-color: var(--fz-magenta);
	box-shadow: var(--fz-glow-magenta), 0 4px 14px rgba(255, 43, 214, .35);
}
.fezo-btn--primary.is-dirty:hover:not(:disabled) {
	box-shadow: 0 0 26px rgba(255, 43, 214, .9);
	transform: translateY(-2px);
}

/* Reset — gold */
[data-fezo-editor-reset] {
	color: var(--fz-gold);
	border-color: rgba(255, 170, 0, .55);
}
[data-fezo-editor-reset]:hover:not(:disabled) {
	background: rgba(255, 170, 0, .12);
	border-color: var(--fz-gold);
	box-shadow: var(--fz-glow-gold);
	transform: translateY(-2px);
}
/* Randomize — purple (brand) */
[data-fezo-editor-randomize] {
	color: #c9a6ff;
	border-color: rgba(138, 43, 226, .6);
}
[data-fezo-editor-randomize]:hover:not(:disabled) {
	background: rgba(138, 43, 226, .18);
	border-color: var(--fz-purple);
	box-shadow: var(--fz-glow-purple);
	transform: translateY(-2px);
}

/* dirty dot — pulsing inside primary button when is-dirty */
.fezo-editor__dirty-dot {
	display: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 0 6px rgba(255, 255, 255, .9);
	animation: fezo-dirty-pulse 1.4s ease-in-out infinite;
}
.fezo-btn--primary.is-dirty .fezo-editor__dirty-dot { display: inline-block; }
@keyframes fezo-dirty-pulse {
	0%, 100% { transform: scale(1);   opacity: .85; }
	50%      { transform: scale(1.4); opacity: 1; }
}

/* ─── Picker column ─────────────────────────────────────────────────────── */
.fezo-editor__picker-col { min-width: 0; }

.fezo-editor__tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(0, 255, 204, .18);
	padding-bottom: 2px;
}
.fezo-editor__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 52px;
	padding: 10px 16px;
	background: transparent;
	color: var(--fz-muted);
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: 12px 12px 0 0;
	font-family: var(--fezo-font-display, 'Audiowide', monospace);
	font-size: .95rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.fezo-editor__tab::before { font-size: 1.4rem; line-height: 1; }
.fezo-editor__tab[data-layer="body"]::before { content: "👕"; }
.fezo-editor__tab[data-layer="head"]::before { content: "🧑"; }
.fezo-editor__tab[data-layer="eyes"]::before { content: "👀"; }
.fezo-editor__tab[data-layer="hair"]::before { content: "💇"; }
.fezo-editor__tab:hover,
.fezo-editor__tab:focus-visible {
	color: #fff;
	background: rgba(0, 255, 204, .06);
	transform: translateY(-1px);
}
.fezo-editor__tab.is-active {
	color: var(--fz-cyan);
	border-bottom-color: var(--fz-cyan);
	background: rgba(0, 255, 204, .10);
	text-shadow: 0 0 10px rgba(0, 255, 204, .55);
	box-shadow: 0 2px 12px rgba(0, 255, 204, .25);
}
.fezo-editor__tab:focus-visible { outline: 2px solid var(--fz-cyan); outline-offset: 2px; }

/* ─── Item grid ─────────────────────────────────────────────────────────── */
.fezo-editor__panels { margin-bottom: 20px; }
.fezo-editor__item-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 12px;
}
.fezo-editor__item-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px;
	min-height: 132px;
	background: linear-gradient(160deg, #15151f, #0d0d18);
	border: 2.5px solid #2a2a3a;
	border-radius: 18px;
	color: var(--fz-ink);
	cursor: pointer;
	transition: transform .15s var(--fz-bounce), border-color .15s, box-shadow .15s, background .15s;
}
.fezo-editor__item-btn:hover,
.fezo-editor__item-btn:focus-visible {
	transform: translateY(-3px) scale(1.05);
	border-color: rgba(0, 255, 204, .55);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 12px rgba(0, 255, 204, .3);
	background: linear-gradient(160deg, #1a1a28, #12121f);
	outline: none;
}
.fezo-editor__item-btn:active { transform: scale(.97); }
.fezo-editor__item-btn.is-active {
	border-color: var(--fz-cyan);
	box-shadow: 0 0 0 1px var(--fz-cyan), 0 0 20px rgba(0, 255, 204, .5);
	background: linear-gradient(160deg, rgba(0, 255, 204, .10), rgba(0, 255, 204, .03));
}
.fezo-editor__item-btn svg {
	width: 84px;
	height: 84px;
	background: #0d0d18;
	border-radius: 12px;
	padding: 4px;
	box-sizing: border-box;
}
.fezo-editor__item-btn.is-active svg { filter: drop-shadow(0 0 6px rgba(0, 255, 204, .45)); }
.fezo-editor__item-label {
	font-family: var(--fezo-font-mono, 'JetBrains Mono', monospace);
	font-size: .72rem;
	line-height: 1.25;
	color: var(--fz-muted);
	text-align: center;
}

/* ─── Colour swatches ───────────────────────────────────────────────────── */
.fezo-editor__colors {
	border-top: 1px solid rgba(138, 43, 226, .25);
	padding-top: 18px;
}
.fezo-editor__color-group { margin-bottom: 18px; }
.fezo-editor__color-group:last-child { margin-bottom: 0; }
.fezo-editor__colors-label {
	font: 700 .72rem var(--fezo-font-mono, 'JetBrains Mono', monospace);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fz-cyan);
	opacity: .85;
	margin-bottom: 10px;
}
.fezo-editor__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.fezo-editor__swatch {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--swatch, #888);
	border: 3px solid #2a2a3a;
	cursor: pointer;
	padding: 0;
	transition: transform .14s var(--fz-bounce), border-color .14s, box-shadow .14s;
}
.fezo-editor__swatch:hover,
.fezo-editor__swatch:focus-visible {
	transform: scale(1.15);
	border-color: var(--fz-cyan);
	box-shadow: 0 0 12px rgba(0, 255, 204, .45);
}
.fezo-editor__swatch.is-active {
	border-color: var(--fz-cyan);
	transform: scale(1.18);
	box-shadow: 0 0 16px rgba(0, 255, 204, .7);
}
.fezo-editor__swatch.is-active::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(0, 255, 204, .5);
	animation: fz-swatch-ring .8s ease forwards;
	pointer-events: none;
}
.fezo-editor__swatch:focus-visible { outline: 2px solid var(--fz-cyan); outline-offset: 3px; }

/* ─── Login required (guests) — inside the kiosk shell ──────────────────── */
.fezo-editor-login-required {
	width: min(560px, 92vw);
	margin: clamp(24px, 8vh, 80px) auto;
	background: var(--fz-panel);
	border: 1px solid rgba(138, 43, 226, .4);
	border-radius: 20px;
	color: var(--fz-ink);
	padding: clamp(24px, 5vw, 44px);
	text-align: center;
	font-family: var(--fezo-font-body, -apple-system, sans-serif);
	font-size: 1.05rem;
	box-shadow: 0 0 30px rgba(138, 43, 226, .2);
}

/* ─── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes fz-pedestal-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-5px) scale(1.02); }
}
@keyframes fz-swatch-ring {
	0%   { transform: scale(.8);  opacity: .8; }
	100% { transform: scale(1.25); opacity: 0; }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
	.fezo-editor { grid-template-columns: 1fr; }
	.fezo-editor__preview-col { order: 1; }
	.fezo-editor__picker-col  { order: 2; }
	.fezo-editor__preview { max-width: min(78vw, 360px); }

	.fezo-editor__tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		border-bottom: none;
		padding-bottom: 0;
	}
	.fezo-editor__tab {
		min-height: 64px;
		flex-direction: column;
		gap: 2px;
		border: 2px solid #2a2a3a;
		border-radius: 16px;
	}
	.fezo-editor__tab::before { font-size: 1.7rem; }
	.fezo-editor__tab.is-active { border-color: var(--fz-cyan); }

	.fezo-editor__item-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
	.fezo-editor__item-btn { min-height: 118px; }
	.fezo-editor__item-btn svg { width: 76px; height: 76px; }
	.fezo-editor__swatch { width: 48px; height: 48px; }
}

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.fezo-editor__preview svg,
	.fezo-editor__dirty-dot,
	.fezo-editor__swatch.is-active::after { animation: none !important; }
}