/**
 * BracketSpot — Vectorheart Theme Shared Stylesheet
 *
 * Vectorheart / Neo-Vectorheart design language, gated to [data-theme="vector"].
 * Defines color tokens, utility classes (hazard / telemetry-corner /
 * chevron-pill / livery-bar / cut-tr / cut-br / grid-bg / ticker /
 * crest-frame / step-progress) and keyframes.
 *
 * Spec source-of-truth: docs/VECTORHEART_THEME_PROMPT.md
 * Rollout plan: docs/plans/2026-05-25-vectorheart-rollout-design.md
 *
 * Consumers: admin-dashboard, tournament-signup, platform-admin, *-display.
 * Each app imports this via shared/display-themes.css @import.
 *
 * Accessibility:
 *   - All motion is gated behind @media (prefers-reduced-motion: no-preference).
 *   - Reduced-motion users keep Vectorheart identity (hazard tape, hard offset
 *     shadows, telemetry corners, faction crests, square corners) — only
 *     animation is stripped.
 *
 * Pi GPU performance:
 *   Vectorheart has NO glow stacks, NO multi-layer shadows, NO scanline
 *   overlay, NO chromatic-aberration filters. Every visual is a flat fill or
 *   a 1-2px solid stroke. Pi GPU cost is effectively zero. No escape hatch
 *   needed (unlike cyberpunk's [data-theme="neon"][data-display-mode="tv"]
 *   glow-disable hatch).
 *
 * Brand-contamination safeguard at the very bottom: sponsor + flyer media always
 * keep their natural appearance (no glow, no filter), regardless of theme.
 */

/* ==========================================================================
   1. Color tokens — [data-theme="vector"]
   ========================================================================== */

[data-theme="vector"] {
	/* Canvas */
	--vec-canvas-void:      #000000;
	--vec-canvas-base:      #0A0A0A;
	--vec-canvas-elevated:  #141414;
	--vec-canvas-recess:    #050505;
	--vec-canvas-inverse:   #F5F2EA;

	/* Structural neutrals */
	--vec-ink-bright:       #FAFAFA;
	--vec-ink-regular:      #D4D4D4;
	--vec-ink-muted:        #8C8C8C;
	--vec-ink-dim:          #5A5A5A;
	--vec-ink-faint:        #2A2A2A;
	--vec-steel:            #8A8E91;
	--vec-gunmetal:         #3C4147;
	--vec-silver:           #C8CDD0;

	/* Borders & rules */
	--vec-rule-hairline:    #1F1F1F;
	--vec-rule-heavy:       #2A2A2A;
	--vec-rule-bright:      #404040;

	/* Hi-vis signal quartet — one signal per surface, never combined */
	--vec-signal-magenta:        #FF0066;
	--vec-signal-magenta-dim:    rgba(255, 0, 102, 0.30);
	--vec-signal-magenta-text:   #FF3380;
	--vec-signal-yellow:         #EED202;
	--vec-signal-yellow-text:    #FFE600;
	--vec-signal-cyan:           #00E5FF;
	--vec-signal-cyan-dim:       rgba(0, 229, 255, 0.30);
	--vec-signal-red:            #D40000;
	--vec-signal-red-text:       #FF3333;

	/* Hazard tape pattern tokens */
	--vec-hazard-tape:           repeating-linear-gradient(45deg, #EED202 0 12px, #000000 12px 24px);
	--vec-hazard-tape-crit:      repeating-linear-gradient(45deg, #D40000 0 12px, #000000 12px 24px);

	/* Special-purpose colors (tournament-intrinsic semantics) */
	--vec-medal-gold:       #FFD700;
	--vec-medal-silver:     #C0C0C0;
	--vec-medal-bronze:     #CD7F32;
	--vec-elo-gain:         #22C55E;
	--vec-elo-loss:         #FF3333;
	--vec-state-next:       #FF7700;
	--vec-state-timer:      #EED202;

	/* Cascade palette (group_cascade flow viz, 8 hues, hand-curated to dodge brand quartet) */
	--vec-cascade-0:        #9D4EDD;
	--vec-cascade-1:        #3A86FF;
	--vec-cascade-2:        #FF6D00;
	--vec-cascade-3:        #84CC16;
	--vec-cascade-4:        #06B6D4;
	--vec-cascade-5:        #22C55E;
	--vec-cascade-6:        #FBBF24;
	--vec-cascade-7:        #A855F7;

	/* Fonts — open-source via Google Fonts (SIL OFL). See docs/VECTORHEART_THEME_PROMPT.md §Typography */
	--vec-font-display:        'Oswald', sans-serif;   /* Vectorheart display face (DESIGN.md); Oxanium was never loaded (theme teardown 2026-07-03) */
	--vec-font-sub-display:    'Michroma', sans-serif;
	--vec-font-condensed:      'Big Shoulders Display', sans-serif;
	--vec-font-body:           'Inter', sans-serif;
	--vec-font-mono-aesthetic: 'Space Mono', monospace;
	--vec-font-mono-data:      'JetBrains Mono', monospace;
	--vec-font-accent:         'Noto Sans JP', sans-serif;

	/* NOTE: NO --vec-glow-* tokens. Vectorheart is flat by design.
	   See spec anti-pattern #2 and Pi GPU performance note in the header. */

	/* The --cp-* cyberpunk-token compatibility shims (T166 hotfix, 2026-05-25)
	   were RETIRED 2026-07-04 (SSOT §15 token-namespace unification). By then the
	   cyberpunk-era stylesheets that referenced them (landing.css, login.css,
	   404.css) had all been redesigned/deleted, leaving only timer-display.css,
	   which was migrated onto semantic --vec-* tokens. New code uses --vec-* /
	   semantic tokens only — do NOT reintroduce a --cp-* shim. */
}

/* ==========================================================================
   2. Keyframes — gated behind motion preference
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	/* Telemetry ticker — bottom-of-display marquee at constant 40px/s linear */
	@keyframes vec-ticker {
		0%   { transform: translateX(100%); }
		100% { transform: translateX(-100%); }
	}

	/* 45° sweep transition for major view changes */
	@keyframes vec-sweep {
		0%   { clip-path: polygon(-100% 0, -50% 0, 0 100%, -50% 100%); }
		100% { clip-path: polygon(150% 0, 200% 0, 250% 100%, 200% 100%); }
	}

	/* Crosshair / reticle spinner — discrete steps, NOT smooth 60fps */
	@keyframes vec-tick {
		0%   { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	/* Hi-vis flash on click feedback — 50ms inversion */
	@keyframes vec-flash {
		0%, 100% { background: var(--vec-signal-magenta); color: var(--vec-ink-bright); }
		50%      { background: var(--vec-ink-bright); color: var(--vec-signal-magenta); }
	}
}

/* ==========================================================================
   3. Utility classes — all gated to [data-theme="vector"]
   Under other themes these become no-ops (the parent selector fails).
   ========================================================================== */

/* 3.1 Hazard tape — 8px diagonal black/yellow stripe for destructive context */
[data-theme="vector"] .vec-hazard {
	background: var(--vec-hazard-tape);
	height: 8px;
}

[data-theme="vector"] .vec-hazard-crit {
	background: var(--vec-hazard-tape-crit);
	height: 8px;
}

/* 3.2 Telemetry corner — absolute-positioned corner metadata strip */
[data-theme="vector"] .vec-telemetry-corner {
	position: absolute;
	font-family: var(--vec-font-mono-aesthetic);
	font-size: 11px;
	color: var(--vec-ink-muted);
	letter-spacing: 0.02em;
	pointer-events: none;
	z-index: 50;
}

[data-theme="vector"] .vec-telemetry-corner.tl { top: 24px; left: 24px; }
[data-theme="vector"] .vec-telemetry-corner.tr { top: 24px; right: 24px; text-align: right; }
[data-theme="vector"] .vec-telemetry-corner.bl { bottom: 24px; left: 24px; }
[data-theme="vector"] .vec-telemetry-corner.br { bottom: 24px; right: 24px; text-align: right; }

/* 3.3 Chevron pill — square pill with bracketed text ([LIVE], [REG], [LOCKED], etc.) */
[data-theme="vector"] .vec-chevron-pill {
	display: inline-block;
	padding: 2px 8px;
	font-family: var(--vec-font-mono-aesthetic);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.05em;
	border-radius: 0;
	border: 1px solid currentColor;
	line-height: 1.4;
	white-space: nowrap;
}

[data-theme="vector"] .vec-chevron-pill.live    { background: var(--vec-signal-cyan); color: var(--vec-canvas-void); border-color: var(--vec-signal-cyan); }
[data-theme="vector"] .vec-chevron-pill.reg     { background: var(--vec-canvas-elevated); color: var(--vec-ink-regular); border-color: var(--vec-rule-heavy); }
[data-theme="vector"] .vec-chevron-pill.locked  { background: var(--vec-signal-yellow); color: var(--vec-canvas-void); border-color: var(--vec-signal-yellow); }
[data-theme="vector"] .vec-chevron-pill.final   { background: var(--vec-signal-magenta); color: var(--vec-ink-bright); border-color: var(--vec-signal-magenta); }
[data-theme="vector"] .vec-chevron-pill.dispute { background: var(--vec-signal-red); color: var(--vec-ink-bright); border-color: var(--vec-signal-red); }
[data-theme="vector"] .vec-chevron-pill.bye     { background: transparent; color: var(--vec-ink-muted); border-color: var(--vec-ink-muted); }

/* 3.4 Livery bar — 2px top-edge bar in the tournament's livery color */
[data-theme="vector"] .vec-livery-bar {
	height: 2px;
	width: 100%;
	background: currentColor;
}

[data-theme="vector"] .vec-livery-bar.magenta { color: var(--vec-signal-magenta); }
[data-theme="vector"] .vec-livery-bar.yellow  { color: var(--vec-signal-yellow); }
[data-theme="vector"] .vec-livery-bar.cyan    { color: var(--vec-signal-cyan); }
[data-theme="vector"] .vec-livery-bar.red     { color: var(--vec-signal-red); }

/* 3.5 Corner cuts — single 45° corner clip per spec radius.cut convention */
[data-theme="vector"] .vec-cut-tr {
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

[data-theme="vector"] .vec-cut-br {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

[data-theme="vector"] .vec-cut-bl {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

[data-theme="vector"] .vec-cut-tl {
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

/* 3.6 Blueprint grid background — 1px grid pattern at 4% opacity, repeating every 16px */
[data-theme="vector"] .vec-grid-bg {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 16px 16px;
}

/* 3.7 Telemetry ticker — bottom-strip marquee at 40px/s linear */
[data-theme="vector"] .vec-ticker {
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--vec-font-mono-aesthetic);
	font-size: 11px;
	color: var(--vec-ink-muted);
	height: 24px;
	line-height: 24px;
	border-top: 1px solid var(--vec-rule-hairline);
	background: var(--vec-canvas-base);
}

[data-theme="vector"] .vec-ticker > .vec-ticker-content {
	display: inline-block;
	padding-left: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	[data-theme="vector"] .vec-ticker > .vec-ticker-content {
		animation: vec-ticker 30s linear infinite;
	}
}

/* 3.8 Crest frame — 1px hairline frame around the faction crest SVG */
[data-theme="vector"] .vec-crest-frame {
	border: 1px solid currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

[data-theme="vector"] .vec-crest-frame.magenta { color: var(--vec-signal-magenta); }
[data-theme="vector"] .vec-crest-frame.yellow  { color: var(--vec-signal-yellow); }
[data-theme="vector"] .vec-crest-frame.cyan    { color: var(--vec-signal-cyan); }
[data-theme="vector"] .vec-crest-frame.red     { color: var(--vec-signal-red); }

/* 3.9 Step progress — discrete 12-cell flex grid (NOT a continuous gradient fill) */
[data-theme="vector"] .vec-step-progress {
	display: flex;
	gap: 2px;
	height: 8px;
}

[data-theme="vector"] .vec-step-progress > .vec-step-cell {
	flex: 1;
	background: var(--vec-rule-hairline);
	border: 1px solid var(--vec-rule-heavy);
}

[data-theme="vector"] .vec-step-progress > .vec-step-cell.filled {
	background: var(--vec-signal-cyan);
	border-color: var(--vec-signal-cyan);
}

[data-theme="vector"] .vec-step-progress > .vec-step-cell.filled.magenta { background: var(--vec-signal-magenta); border-color: var(--vec-signal-magenta); }
[data-theme="vector"] .vec-step-progress > .vec-step-cell.filled.yellow  { background: var(--vec-signal-yellow); border-color: var(--vec-signal-yellow); }
[data-theme="vector"] .vec-step-progress > .vec-step-cell.filled.red     { background: var(--vec-signal-red); border-color: var(--vec-signal-red); }

/* 3.10 Crosshair spinner — discrete 8-12 FPS tick rate (NOT smooth) */
[data-theme="vector"] .vec-spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	color: var(--vec-signal-magenta);
}

@media (prefers-reduced-motion: no-preference) {
	[data-theme="vector"] .vec-spinner {
		animation: vec-tick 1s steps(12) infinite;
	}
}

/* 3.11 Glitch override — explicit no-op to override cyberpunk's .cyber-glitch on shared elements */
[data-theme="vector"] .vec-glitch-none,
[data-theme="vector"] .cyber-glitch.vec-glitch-none {
	animation: none !important;
	text-shadow: none !important;
}

[data-theme="vector"] .vec-glitch-none::before,
[data-theme="vector"] .vec-glitch-none::after {
	display: none !important;
}

/* 3.12 Outlined hollow caps — decorative banner type behind headings */
[data-theme="vector"] .vec-outline-caps {
	-webkit-text-stroke: 1px currentColor;
	color: transparent;
	font-family: var(--vec-font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.04em;
}

/* 3.13 Hard offset shadow utility — the ONLY shadow vocabulary allowed */
[data-theme="vector"] .vec-offset-shadow {
	box-shadow: 4px 4px 0 var(--vec-canvas-void);
}

[data-theme="vector"] .vec-offset-shadow-magenta {
	box-shadow: 4px 4px 0 rgba(255, 0, 102, 0.40);
}

[data-theme="vector"] .vec-offset-shadow-crit {
	box-shadow: 4px 4px 0 var(--vec-signal-red);
}

/* ==========================================================================
   4. Sponsor + flyer brand-contamination safeguard.
   These elements must always render with their natural appearance —
   no Vectorheart filters, no box shadows, no chamfer cuts — regardless of theme.
   This applies unconditionally (not gated to [data-theme="vector"]) so any future
   theme that introduces filters can't accidentally contaminate uploaded brand assets.
   !important is necessary to outrun more-specific selectors elsewhere in
   the cascade (sponsor-overlay.js inline styles, per-app stylesheets).

   NOTE: This block is intentionally duplicated from shared/cyberpunk.css to keep
   each theme file self-sufficient. Both blocks target the same selectors with
   identical rules — no cascade conflict.
   ========================================================================== */

.sponsor-logo,
.flyer-container img,
.flyer-container video {
	filter: none !important;
	box-shadow: none !important;
	clip-path: none !important;
}