/* Theme: Heros
 * Comic-book superhero energy: bold primary red/blue/gold on a deep
 * night-sky panel gutter, white comic-panel cards with thick black ink
 * borders, halftone-dot overlays, hard offset drop shadows, and loud
 * condensed uppercase type. Points render as rotated "POW!"-style
 * starbursts. Card layout handled by HerosCardLayout.razor (colored
 * difficulty banner across the card top, halftone overlay, burst badge).
 *
 * Inspired by classic superhero comic art — no character likenesses,
 * logos, or trademarks are used; only the generic comic-book visual
 * language (halftone, ink frames, primary palette, action bursts).
 */

[data-theme="heros"] {
	/* ── Brand — hero primaries ─────────────────────────────── */
	--eg-color-primary: #e62429; /* Hero Red */
	--eg-color-primary-light: #ff3b40;
	--eg-color-primary-rgb: 230, 36, 41;
	--eg-color-secondary: #ffc107; /* Hero Gold */
	--eg-color-secondary-light: #ffd454;
	--eg-color-tertiary: #1d6fe0; /* Hero Blue */
	--eg-color-success: #2ecc71;
	--eg-color-error: #e62429;
	--eg-color-warning: #ffc107;
	--eg-color-info: #1d6fe0;

	/* ── Typography — loud condensed display ────────────────── */
	--eg-font-heading: "Impact", "Haettenschweiler", "Arial Narrow Bold",
		"Oswald", "Franklin Gothic Bold", "Segoe UI", sans-serif;
	--eg-font-body: "Arial Narrow", "Helvetica Neue", Arial, "Segoe UI",
		sans-serif;
	--eg-font-numbers: "Impact", "Arial Black", "Arial Narrow Bold", Arial,
		sans-serif;

	/* ── Radius — squarer comic panels ─────────────────────── */
	--eg-radius-sm: 2px;
	--eg-radius-md: 4px;
	--eg-radius-lg: 6px;
	--eg-radius-xl: 8px;

	/* ── Palette — night-sky panel gutter ───────────────────── */
	--eg-palette-background: #0a1633; /* Deep hero navy */
	--eg-palette-surface: #122152; /* Mid navy panel */
	--eg-palette-surface-accent: #060d24; /* Deepest gutter */
	--eg-palette-surface-variant: #1d2f6b;
	--eg-palette-text-primary: #f5f7ff;
	--eg-palette-text-secondary: #9fb0e0;
	--eg-palette-text-disabled: #5a6fa3;
	--eg-palette-divider: #1d2f6b;
	--eg-palette-divider-light: #2a4180;
	--eg-palette-primary: #e62429;
	--eg-palette-secondary: #ffc107;
	--eg-palette-tertiary: #1d6fe0;
	--eg-palette-error: #e62429;
	--eg-palette-success: #2ecc71;
	--eg-palette-warning: #ffc107;
	--eg-palette-info: #1d6fe0;

	--eg-palette-on-primary: #ffffff;
	--eg-palette-on-secondary: #0a1633;
	--eg-palette-on-tertiary: #ffffff;
	--eg-palette-on-error: #ffffff;
	--eg-palette-on-success: #0a1633;
	--eg-palette-on-warning: #0a1633;
	--eg-palette-on-info: #ffffff;

	/* Cards — white comic panel with black ink text */
	--eg-palette-card: #ffffff;
	--eg-palette-text-on-card: #0a0a0a;
	--eg-palette-text-on-card-muted: #5a5a66;

	/* ── Shadows — hard comic-book offset ───────────────────── */
	--eg-shadow-card: 4px 4px 0 rgba(0, 0, 0, 0.85);
	--eg-shadow-elevated: 8px 8px 0 rgba(0, 0, 0, 0.9);
	--eg-shadow-glow-primary: 0 0 0 3px rgba(var(--eg-color-primary-rgb), 0.9);
	--eg-shadow-glow-success: 0 0 0 3px rgba(46, 204, 113, 0.9);
}

/* ── Comic ink frame ───────────────────────────────────────────
 * Thick black border, squarer corners. Resting state; interaction
 * states re-declared below because this border-color wins otherwise. */
[data-theme="heros"] .schniffel-card {
	border: 3px solid #0a0a0a;
	border-radius: var(--eg-radius-md);
}

[data-theme="heros"] .schniffel-card--matches {
	border-color: var(--eg-palette-success);
	box-shadow: 0 0 10px rgba(46, 204, 113, 0.55);
}

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

[data-theme="heros"] .schniffel-card--selected {
	box-shadow: var(--eg-shadow-glow-primary);
}

/* Loud uppercase condensed name inside the colored banner */
[data-theme="heros"] .schniffel-card-name {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
}

/* Difficulty label — small-caps comic tag */
[data-theme="heros"] .schniffel-card-difficulty-label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}

/* ── Background speed lines ───────────────────────────────────
 * Classic comic-book action lines radiating from a focal point just
 * above center-top, fading out near the focal point and toward the
 * far edges so they frame the game board without fighting content.
 * Painted on the theme-provider ::before, behind .schniffel-app. */
[data-theme="heros"] {
	position: relative;
}

[data-theme="heros"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: repeating-conic-gradient(
		from 0deg at 50% 14%,
		transparent 0deg,
		transparent 1.7deg,
		rgba(245, 247, 255, 0.11) 1.7deg,
		rgba(245, 247, 255, 0.11) 2.3deg
	);
	/* Fade near the focal point (impact core) and at the far edges so the
	   lines read as radiating speed lines, not a flat texture. */
	-webkit-mask: radial-gradient(
		circle at 50% 14%,
		transparent 3%,
		#000 13%,
		#000 60%,
		transparent 92%
	);
	mask: radial-gradient(
		circle at 50% 14%,
		transparent 3%,
		#000 13%,
		#000 60%,
		transparent 92%
	);
	opacity: 0.85;
}

/* Lift the app content above the speed-line layer (scoped to this theme).
   The scoped MainLayout.razor.css gives .schniffel-app an opaque
   --eg-palette-background, which would paint over the speed lines — so
   make the shell transparent here and let the theme-provider background
   + speed-line ::before show through. Theme CSS loads after the scoped
   bundle and wins this specificity tie (GDD §12.1). */
[data-theme="heros"] .schniffel-app {
	position: relative;
	z-index: 1;
	background: transparent;
}

/* Age pill — contrast is handled by shared tokens now:
   - normal state: --eg-palette-on-surface-variant (cream) on the deep
     hero-navy chip ≈ 12:1, so no per-theme override is needed;
   - stale state: --eg-palette-on-warning (navy) on warning-gold ≈ 11:1.
   The previous hardcoded overrides here forced white text in BOTH states,
   and white on warning-gold was only ≈ 1.6:1 — they were removed with the
   card-age contrast fix. */

/* ── Comic dice: white cubes, ink frame, black pips ─────────── */
[data-theme="heros"] .schniffel-die-face {
	border: 3px solid #0a0a0a;
	border-radius: var(--eg-radius-lg);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}

[data-theme="heros"] .schniffel-pip {
	background: #0a0a0a;
}