/* Theme: Vice
 * Neon-soaked Miami night: violet dusk sky with a sunset glow on the
 * horizon, palm silhouettes in the corners, frosted-glass chrome, and
 * hot-pink/sunset-orange neon accents. Point badges carry the signature
 * pink→orange gradient; card titles are white wordmark type with an
 * ink outline (classic logo lettering);
 * dice are dark cubes with neon pink pips.
 *
 * Inspired by the neon Miami dusk aesthetic popularized by modern
 * crime-action game marketing — no logos, fonts, artwork, or trademarks
 * from any game are used; only the generic neon-dusk visual language
 * (sunset gradient, teal neon, palms, glass panels).
 *
 * Scenery pattern follows heros.css: the theme-provider keeps its flat
 * token background, the ::before layer paints the sky, and the app shell
 * is made transparent so the scenery shows through (theme CSS loads after
 * the scoped bundle and wins the specificity tie, GDD §12.1).
 */

[data-theme="vice"] {
	/* ── Brand — neon dusk ─────────────────────────────────── */
	--eg-color-primary: #ff2d92; /* neon hot pink */
	--eg-color-primary-light: #ff5eab;
	--eg-color-primary-rgb: 255, 45, 146;
	--eg-color-secondary: #ff9e42; /* sunset orange */
	--eg-color-secondary-light: #ffb96e;
	--eg-color-tertiary: #29e0c8; /* neon teal */
	--eg-color-success: #3ef08f; /* neon mint */
	--eg-color-error: #ff5470; /* neon coral */
	--eg-color-warning: #ffb648; /* dusk amber */
	--eg-color-info: #4dc9ff; /* pool cyan */

	/* ── Typography — heavy system sans (logo-lean via CSS) ── */
	--eg-font-heading:
		"Segoe UI Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--eg-font-body: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
	--eg-font-numbers:
		"Segoe UI Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;

	/* ── Radius — sleek modern ─────────────────────────────── */
	--eg-radius-sm: 6px;
	--eg-radius-md: 10px;
	--eg-radius-lg: 14px;
	--eg-radius-xl: 20px;

	/* ── Shadows — neon glow over deep night ───────────────── */
	--eg-shadow-card: 0 10px 24px rgba(4, 1, 16, 0.55);
	--eg-shadow-elevated: 0 14px 34px rgba(4, 1, 16, 0.65);
	--eg-shadow-glow-primary: 0 0 18px rgba(var(--eg-color-primary-rgb), 0.55);
	--eg-shadow-glow-success: 0 0 18px rgba(62, 240, 143, 0.45);

	/* ── Palette — violet dusk ─────────────────────────────── */
	--eg-palette-background: #150932; /* deep violet night */
	--eg-palette-surface: #1f0e46; /* night panel */
	--eg-palette-surface-accent: #0e0626; /* deepest night (inputs, snackbars) */
	--eg-palette-surface-variant: #2b1658; /* chips/badges on cards */
	--eg-palette-text-primary: #f5efff; /* lavender white */
	--eg-palette-text-secondary: #b3a3e6; /* muted lavender */
	--eg-palette-text-disabled: #6f5fa3;
	--eg-palette-divider: #332064;
	--eg-palette-divider-light: #45297f;
	--eg-palette-primary: #ff2d92;
	--eg-palette-secondary: #ff9e42;
	--eg-palette-tertiary: #29e0c8;
	--eg-palette-error: #ff5470;
	--eg-palette-success: #3ef08f;
	--eg-palette-warning: #ffb648;
	--eg-palette-info: #4dc9ff;

	/* Neon-sign convention: bright fills carry dark violet faces */
	--eg-palette-on-primary: #160735;
	--eg-palette-on-secondary: #160735;
	--eg-palette-on-tertiary: #160735;
	--eg-palette-on-error: #160735;
	--eg-palette-on-success: #160735;
	--eg-palette-on-warning: #160735;
	--eg-palette-on-info: #160735;

	/* Cards — dark night panel, lavender text */
	--eg-palette-card: #1d0d44;
	--eg-palette-text-on-card: #f5efff;
	--eg-palette-text-on-card-muted: #a795dd;

	/* ── Player colors — neon boardwalk set ────────────────── */
	--eg-player-1: #4dc9ff; /* cyan */
	--eg-player-2: #ff9e42; /* sunset */
	--eg-player-3: #b388ff; /* violet */
	--eg-player-4: #2de1c2; /* teal */
	--eg-player-5: #ff5e9d; /* pink */
	--eg-player-6: #a4f24c; /* lime neon */
	--eg-player-7: #7ef0ff; /* ice */
	--eg-player-8: #ffd166; /* amber */
}

/* ── Dusk sky scenery ─────────────────────────────────────────
 * Painted on the provider's ::before (heros pattern): stars in the
 * upper night zone, a magenta sunset glow rising from the horizon. */
[data-theme="vice"] {
	position: relative;
}

[data-theme="vice"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: /* faint stars, upper night sky only */
			radial-gradient(
				1.5px 1.5px at 12% 14%,
				rgba(245, 239, 255, 0.55),
				transparent 100%
			),
			radial-gradient(
				1px 1px at 28% 26%,
				rgba(245, 239, 255, 0.4),
				transparent 100%
			),
			radial-gradient(
				1.5px 1.5px at 46% 10%,
				rgba(245, 239, 255, 0.45),
				transparent 100%
			),
			radial-gradient(
				1px 1px at 64% 22%,
				rgba(245, 239, 255, 0.4),
				transparent 100%
			),
			radial-gradient(
				1.5px 1.5px at 82% 15%,
				rgba(245, 239, 255, 0.5),
				transparent 100%
			),
			radial-gradient(
				1px 1px at 91% 32%,
				rgba(245, 239, 255, 0.35),
				transparent 100%
			),
			/* horizon glow — sunset light rising from the bottom edge */
			radial-gradient(
				90% 42% at 50% 102%,
				rgba(255, 158, 66, 0.5) 0%,
				rgba(255, 45, 146, 0.32) 45%,
				transparent 72%
			),
			/* dusk sky */
			linear-gradient(
				180deg,
				#0d0524 0%,
				#200d4d 42%,
				#43186b 66%,
				#7c2483 84%,
				#b83378 96%,
				#e05a5f 100%
			);
}

/* ── Palm silhouettes on the horizon ──────────────────────────
 * Two dark palm silhouettes rising from the bottom corners (partly
 * behind the frosted-glass footer, crowns reaching into the glow). */
[data-theme="vice"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cg fill='%230c0420'%3E%3Cpath d='M55 160 C57 132 59 106 64 80 L70 81 C65 107 63 133 62 160 Z'/%3E%3Cpath d='M67 78 C53 62 35 55 17 58 C37 57 55 66 69 82 Z'/%3E%3Cpath d='M67 77 C59 58 47 44 31 38 C47 48 59 62 71 80 Z'/%3E%3Cpath d='M67 76 C69 56 77 40 93 32 C81 44 71 58 71 78 Z'/%3E%3Cpath d='M67 78 C79 64 97 58 115 62 C97 62 79 70 71 84 Z'/%3E%3Cpath d='M67 81 C83 77 101 81 113 93 C99 85 81 85 69 87 Z'/%3E%3Cpath d='M67 81 C51 79 33 83 21 95 C37 87 55 87 69 87 Z'/%3E%3C/g%3E%3C/svg%3E")
		no-repeat left bottom / 190px 253px,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cg fill='%230c0420'%3E%3Cpath d='M55 160 C57 132 59 106 64 80 L70 81 C65 107 63 133 62 160 Z'/%3E%3Cpath d='M67 78 C53 62 35 55 17 58 C37 57 55 66 69 82 Z'/%3E%3Cpath d='M67 77 C59 58 47 44 31 38 C47 48 59 62 71 80 Z'/%3E%3Cpath d='M67 76 C69 56 77 40 93 32 C81 44 71 58 71 78 Z'/%3E%3Cpath d='M67 78 C79 64 97 58 115 62 C97 62 79 70 71 84 Z'/%3E%3Cpath d='M67 81 C83 77 101 81 113 93 C99 85 81 85 69 87 Z'/%3E%3Cpath d='M67 81 C51 79 33 83 21 95 C37 87 55 87 69 87 Z'/%3E%3C/g%3E%3C/svg%3E")
		no-repeat right bottom / 125px 167px;
	opacity: 0.9;
}

/* Lift the app content above the scenery layers (scoped to this theme).
   The scoped MainLayout.razor.css paints an opaque background — make the
   shell transparent so sky + palms show through (heros pattern). */
[data-theme="vice"] .schniffel-app {
	position: relative;
	z-index: 1;
	background: transparent;
}

/* ── Frosted glass chrome ─────────────────────────────────────
 * Topbar and footer turn translucent so the dusk sky, horizon glow and
 * palm trunks shine through softly — the Miami storefront look. */
[data-theme="vice"] .schniffel-topbar {
	background: rgba(23, 10, 52, 0.72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

[data-theme="vice"] .schniffel-footer {
	background: rgba(23, 10, 52, 0.72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-top-color: rgba(255, 45, 146, 0.25);
}

/* ── Cards — night panels with a neon sunset edge ─────────────
 * Resting border-color is overridden here, so all interaction states
 * are re-declared below (border-color would win otherwise). */
[data-theme="vice"] .schniffel-card {
	border-color: rgba(255, 45, 146, 0.28);
	box-shadow:
		var(--eg-shadow-card),
		0 0 24px rgba(255, 45, 146, 0.07);
}

/* Signature sunset strip along the card top (pink → orange) */
[data-theme="vice"] .schniffel-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: calc(var(--eg-radius-lg) - 3px) calc(var(--eg-radius-lg) - 3px)
		0 0;
	background: linear-gradient(90deg, #ff2d92, #ff9e42);
	opacity: 0.9;
	pointer-events: none;
}

/* Interaction states — neon glow variants (re-declared on purpose) */
[data-theme="vice"] .schniffel-card--matches {
	border-color: var(--eg-palette-tertiary);
	box-shadow:
		0 0 14px rgba(41, 224, 200, 0.35),
		var(--eg-shadow-card);
}

[data-theme="vice"] .schniffel-card--selected,
[data-theme="vice"] .schniffel-card--selectable:hover {
	border-color: var(--eg-color-primary);
	box-shadow: var(--eg-shadow-glow-primary), var(--eg-shadow-card);
}

[data-theme="vice"] .schniffel-card--matches.schniffel-card--selectable:hover {
	border-color: var(--eg-color-primary);
	box-shadow: var(--eg-shadow-glow-primary), var(--eg-shadow-card);
}

/* ── Card title — logo wordmark treatment: white letters, ink outline ──
 * Classic crime-game wordmark style: heavy italic type, solid white
 * face, black outline via an 8-direction text-shadow stack (broad
 * support, no glyph-eating like centered -webkit-text-stroke), plus
 * a soft ambient shadow for lift off the dark panel. */
[data-theme="vice"] .schniffel-card-name,
[data-theme="vice"] .schniffel-card-value-number {
	font-family: var(--eg-font-heading);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #ffffff;
	text-shadow:
		2px 2px 0 #0c0420,
		-2px 2px 0 #0c0420,
		2px -2px 0 #0c0420,
		-2px -2px 0 #0c0420,
		0 2px 0 #0c0420,
		0 -2px 0 #0c0420,
		2px 0 0 #0c0420,
		-2px 0 0 #0c0420,
		0 5px 10px rgba(4, 1, 16, 0.55);
}

/* ── Point badges — neon gradients ────────────────────────────
 * Plain/flat: the signature pink→orange sunset gradient ("VI" look).
 * Exact (matches dice): teal→mint neon. Range: cyan→teal ocean. */
[data-theme="vice"] .schniffel-card-points-badge {
	background: linear-gradient(120deg, #ff2d92, #ff9e42);
	color: #160735;
	box-shadow:
		0 2px 6px rgba(4, 1, 16, 0.45),
		0 0 14px rgba(255, 45, 146, 0.4);
	transform: skewX(-6deg);
}

[data-theme="vice"] .schniffel-card-points-badge--exact {
	background: linear-gradient(120deg, #2de1c2, #3ef08f);
	color: #160735;
	box-shadow:
		0 2px 6px rgba(4, 1, 16, 0.45),
		0 0 14px rgba(62, 240, 143, 0.4);
}

[data-theme="vice"] .schniffel-card-points-badge--range {
	background: linear-gradient(120deg, #4dc9ff, #2de1c2);
	color: #160735;
	box-shadow:
		0 2px 6px rgba(4, 1, 16, 0.45),
		0 0 14px rgba(77, 201, 255, 0.4);
}

[data-theme="vice"] .schniffel-card-stale-bonus {
	transform: skewX(-6deg);
}

/* ── Dice — dark neon cubes ─────────────────────────────────── */
[data-theme="vice"] .schniffel-die-face {
	background: linear-gradient(160deg, #26125a 0%, #170a3e 100%);
	border: 2px solid rgba(41, 224, 200, 0.35);
	border-radius: 12px;
	box-shadow:
		0 6px 16px rgba(4, 1, 16, 0.55),
		0 0 12px rgba(41, 224, 200, 0.12);
}

[data-theme="vice"] .schniffel-pip {
	background: #ff2d92;
	box-shadow: 0 0 6px rgba(255, 45, 146, 0.8);
}

[data-theme="vice"] .schniffel-die--saved .schniffel-die-face {
	border-color: #2de1c2;
	box-shadow:
		0 0 14px rgba(45, 225, 194, 0.5),
		0 6px 16px rgba(4, 1, 16, 0.55);
}

[data-theme="vice"] .schniffel-die-placeholder {
	color: #6f5fa3;
}