---
version: alpha
name: WebRadar Neon Esports
description: Vibrant gaming energy with bold pink-purple gradients, diagonal energy lines, and amplified animations — built for broadcast and stream overlays.

colors:
  # Backgrounds — Deep Purple Dark
  bg-base: "#0c0818"
  bg-panel: "#140f24"
  bg-card: "#1a1430"
  bg-card-hover: "#221c40"
  bg-border: "#2e2650"
  bg-border-dim: "#1e1830"

  # Team — Neon Vibrant
  t-color: "#ec4899"
  t-dim: rgba(236,72,153,0.15)
  t-border: rgba(236,72,153,0.4)
  ct-color: "#8b5cf6"
  ct-dim: rgba(139,92,246,0.15)
  ct-border: rgba(139,92,246,0.4)

  # Text
  primary: "#ffffff"
  on-surface: "#a8a0c0"
  muted: "#504068"

  # Status — Vibrant
  hp-high: "#34d399"
  hp-mid: "#fbbf24"
  hp-low: "#f87171"
  money: "#34d399"

  # Surfaces
  surface-tint: "#8b5cf6"
  surface-variant: "#1e1830"

typography:
  display-lg:
    fontFamily: TASAOrbiter
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: TASAOrbiter
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1
  headline-sm:
    fontFamily: TASAOrbiter
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: "0.02em"
  label-lg:
    fontFamily: TASAOrbiter
    fontSize: 13px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: "0.2em"
  label-md:
    fontFamily: TASAOrbiter
    fontSize: 11px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: "0.1em"
  label-sm:
    fontFamily: TASAOrbiter
    fontSize: 10px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: "0.2em"
  body-lg:
    fontFamily: TASAOrbiter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
  body-md:
    fontFamily: TASAOrbiter
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.2
  body-sm:
    fontFamily: TASAOrbiter
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.2
  caption:
    fontFamily: TASAOrbiter
    fontSize: 8px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.06em"
  mono-display:
    fontFamily: ui-monospace
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
  mono-dense:
    fontFamily: ui-monospace
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1

rounded:
  none: 0px
  sm: 4px
  DEFAULT: 6px
  md: 8px
  card: 10px
  panel: 12px
  radar: 16px

spacing:
  unit: 4px
  gap-xs: 2px
  gap-sm: 4px
  gap-md: 6px
  gap-lg: 8px
  gap-xl: 10px
  pad-xs: "2px 5px"
  pad-sm: "4px 6px"
  pad-md: "6px 10px"
  pad-lg: "8px 12px"
  pad-xl: "16px 14px"
  panel-min-width: 140px

components:
  player-card:
    backgroundColor: "{colors.bg-card}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "{spacing.pad-sm}"
    height: 72px
  player-card-hover:
    backgroundColor: "{colors.bg-card-hover}"
    textColor: "{colors.primary}"
  player-card-t-side:
    backgroundColor: "{colors.bg-card}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
  scoreboard:
    backgroundColor: "{colors.bg-panel}"
    rounded: "{rounded.panel}"
  settings-panel:
    backgroundColor: "{colors.bg-panel}"
    textColor: "{colors.primary}"
    rounded: 14px
  radar-container:
    backgroundColor: "{colors.bg-base}"
    rounded: "{rounded.radar}"
  bomb-timer:
    backgroundColor: "#1a0a20"
    rounded: "{rounded.md}"
  button-hover:
    backgroundColor: transparent
    textColor: "{colors.ct-color}"
  connecting-ring:
    backgroundColor: transparent
    size: 44px
  c4-badge:
    backgroundColor: rgba(248,113,113,0.2)
    rounded: "{rounded.sm}"
  separator:
    backgroundColor: "{colors.bg-border-dim}"
    height: 1px
  team-label-t:
    textColor: "{colors.t-color}"
    typography: "{typography.label-sm}"
  team-label-ct:
    textColor: "{colors.ct-color}"
    typography: "{typography.label-sm}"
  t-badge:
    backgroundColor: "{colors.t-dim}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
  ct-badge:
    backgroundColor: "{colors.ct-dim}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
  health-bar-high:
    backgroundColor: "{colors.hp-high}"
    rounded: "{rounded.sm}"
    height: 3px
  health-bar-mid:
    backgroundColor: "{colors.hp-mid}"
    rounded: "{rounded.sm}"
    height: 3px
  health-bar-low:
    backgroundColor: "{colors.hp-low}"
    rounded: "{rounded.sm}"
    height: 3px
  money-display:
    textColor: "{colors.money}"
    typography: "{typography.mono-dense}"
  team-border-t:
    backgroundColor: "{colors.t-border}"
    height: 1px
  team-border-ct:
    backgroundColor: "{colors.ct-border}"
    height: 1px
  muted-label:
    textColor: "{colors.muted}"
    typography: "{typography.caption}"
---

# Brand & Style

Neon Esports is the **broadcast-ready** theme — designed to pop on stream overlays, tournament HUDs, and high-energy competitive interfaces. The brand personality is **esports Arena**: vibrant, dynamic, unapologetically digital.

The emotional tone is electric and competitive. Where Cyberpunk is dystopian neon, Esports is **tournament neon** — pink and purple as the dual-energy signature, diagonal lines as "energy fields" radiating from the center, and animations that pulse with the rhythm of competition.

This theme is intentionally **louder** than the others. Border opacity is at 40% (highest of any theme). Card glows are team-specific. The connecting ring uses a dual-color border (CT purple top, T pink right). The background features **45° diagonal energy striations** — repeating 2px lines that create a kinetic, "data in motion" atmosphere.

# Colors

The palette trades Cyberpunk's single-hue neon for a **pink-purple complementary pair** — the two most iconic esports branding colors.

- **Surface Hierarchy**: `#0c0818` (deep void purple) → `#140f24` (panel indigo) → `#1a1430` (card violet). All surfaces carry a purple undertone — this is not a neutral dark, it's a purple dark.
- **Team Colors — Esports Signature**: Hot Pink `#ec4899` (T) and Electric Purple `#8b5cf6` (CT). These are the broadcast standard — instantly recognizable team identity. Border opacity at 40% for maximum pop.
- **Status Triad**: Tailwind-aligned colors — emerald `#34d399` (high), amber `#fbbf24` (mid), red `#f87171` (low). These are the same status tones used in professional esports broadcast HUDs.
- **Secondary Text**: `#a8a0c0` — a lavender-gray that's warmer than Cyberpunk's `#9090b0`, sitting between purple and neutral.
- **Background Treatment**: Diagonal repeating lines at `45deg` and `-45deg` (2px violet at 2% opacity, 20px gap) create a "data scan" pattern. A center-focus radial gradient (`rgba(139,92,246,0.05) → transparent → rgba(236,72,153,0.05)`) draws the eye to the center.

# Typography

Typography scale matches the Default system but with **increased weight** on labels — labels at `w900` (vs Default's `w800`) for the "impact font" treatment common in esports branding.

- **Team Labels**: `font-size: 10px, font-weight: 900, letter-spacing: 0.2em, text-transform: uppercase` — these are stenciled at maximum impact.
- **Phase Pulse**: `phasePulseEsports` adds a `scale(1.02)` bounce on top of opacity cycling — the expansion makes the animation visually "bigger" than other themes.
- **Pulse Animation**: `pulseEsports` cycles `scale(1) → scale(1.05)` — the most physically dramatic pulse in the theme system.

# Layout & Spacing

Structural layout is identical to Default. The Esports identity is expressed through **surface color, glow intensity, and animation amplitude** — never through spatial rearrangement.

- **Diagonal Background**: The `45deg / -45deg` repeating stripes create visual motion even in static states. This is the "energy field" that distinguishes Esports from Cyberpunk's grid.
- **Overflow**: The scoreboard and radar containers use `overflow: hidden` to clip glowing box-shadows cleanly at the boundary.

# Elevation & Depth

Elevation combines **team-colored shadow glow** with the Default luminosity stepping — the only theme that assigns team-specific shadow colors.

- **Level 0 (Base)**: `#0c0818` — deepest purple void.
- **Level 1 (Panel)**: `#140f24` — structural containers.
- **Level 2 (Card)**: `#1a1430` — player cards and list items.
- **Team-Tinted Shadows**: T-side cards cast `rgba(236,72,153,0.15)` pink shadows. CT-side cards cast `rgba(139,92,246,0.15)` purple shadows. Hover intensifies both to 25% and adds a 40px outer glow.
- **Scoreboard**: Double-glow `0 8px 32px rgba(ct,0.2), 0 0 60px rgba(t,0.1)` — the scoreboard projects both team colors simultaneously.
- **Radar**: The largest glow halo — `0 8px 40px rgba(ct,0.2), 0 0 80px rgba(t,0.1)`. The radar becomes the visual anchor of the page.
- **Player Dot Halo**: `drop-shadow(0 0 5px team-color)` — softer than Cyberpunk's dual-pass, appropriate for the more diffuse glow aesthetic.

# Shapes

Rounded values are slightly **larger than Default** — the Esports aesthetic rewards softness because it reads as "premium broadcast."

- **Cards**: `10px` — same as Default.
- **Panels**: `12px` (vs Default's 14px) — slightly tighter for broadcast density.
- **Radar**: `16px` — the most generous radius, giving the radar a pill-like, "screen-in-screen" broadcast feel.
- **Scoreboard**: `12px` — matching panels.
- **Settings Panel**: `14px` — slightly rounder for the modal treatment.
- **Scrollbar Thumb**: `10px` radius for a pill-shaped thumb with gradient fill.

# Components

## Player Card

Cards are **team-tinted** — the shadow color matches the team affiliation. T-side cards project pink shadows, CT-side cards project purple shadows. On hover: `translateY(-2px) scale(1.01)` — more dramatic than Default's `-3px` because it includes the scale factor.

## Scoreboard

A wide-glow `12px` rounded container with 32px/60px dual-shadow. The `overflow: hidden` constraint ensures glows are clipped cleanly at the scoreboard boundary, preventing visual bleed into adjacent elements.

## Bomb Timer

Uses a **gradient fill** instead of a flat color: `linear-gradient(180deg, #1a0a20, #0f0518)`. The 30px/30px outer+inner red glow creates a "warning zone" effect. This is the most dramatically lit bomb timer of any theme.

## C4 Badge

Uses `border-image: linear-gradient(135deg, amber → red) 1` — a gradient border instead of a solid color. The background fill is also a gradient. This creates a "holographic badge" effect unique to this theme.

## Connecting Ring

The ONLY ring with **dual-color borders** — `border-top-color: ct-color, border-right-color: t-color`. Combined with the `connectPulse` animation (alternating `box-shadow` between CT and T color), the ring becomes a spinning bi-color beacon.

## Settings Panel

`14px` rounded with a `40px rgba(ct,0.15)` ambient glow — the widest glow spread of any panel component.

## Fullscreen Bar

Uses a **gradient fill** (not flat): `linear-gradient(180deg, rgba(20,15,36,0.95), rgba(12,8,24,0.92))` — giving the bar depth rather than opacity alone.

# Do's and Don'ts

**Do**:
- Use team-colored shadows to reinforce team identity on cards
- Apply gradient fills (not flat colors) for bomb timer and fullscreen bars
- Use `border-image` with gradients for the C4 badge holographic effect
- Use `scale(1.01–1.05)` in hover/pulse animations for broadcast dynamism
- Clip glow shadows with `overflow: hidden` on containers
- Use `w900` for all labels — the esports context demands maximum impact

**Don't**:
- Never use flat shadow colors — always use `rgba(team-color, alpha)` for team-tinted shadows
- Don't apply the diagonal energy lines above 3% opacity — they must remain atmospheric
- Avoid monochrome shadow on team-specific elements — it breaks the team-color narrative
- Don't use `inset` shadow on player cards — the esports glow direction is outward, not inward
- Never mix pink and purple glow at equal intensity on a single element — one must dominate
