---
version: alpha
name: WebRadar Midnight Cyberpunk
description: Neon cyberpunk aesthetic with glowing accents, grid-patterned backgrounds, and saturated chromatic energy — for operators who live in the neon.

colors:
  # Backgrounds
  bg-base: "#0a0a12"
  bg-panel: "#12121f"
  bg-card: "#181828"
  bg-card-hover: "#1f1f35"
  bg-border: "#2a2a4a"
  bg-border-dim: "#1a1a2e"

  # Team — Neon Enhanced
  t-color: "#ff2d75"
  t-dim: rgba(255,45,117,0.12)
  t-border: rgba(255,45,117,0.35)
  ct-color: "#00f0ff"
  ct-dim: rgba(0,240,255,0.12)
  ct-border: rgba(0,240,255,0.35)

  # Text
  primary: "#ffffff"
  on-surface: "#9090b0"
  muted: "#404060"

  # Status
  hp-high: "#00ff88"
  hp-mid: "#ffcc00"
  hp-low: "#ff3366"
  money: "#00ff88"

  # Surfaces
  surface-tint: "#00f0ff"
  surface-variant: "#1a1a2e"

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: 800
    lineHeight: 1
    letterSpacing: "0.18em"
  label-md:
    fontFamily: TASAOrbiter
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.1em"
  label-sm:
    fontFamily: TASAOrbiter
    fontSize: 9px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: "0.18em"
  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: 14px

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}"
  scoreboard:
    backgroundColor: "{colors.bg-panel}"
    rounded: "{rounded.panel}"
  settings-panel:
    backgroundColor: "{colors.bg-panel}"
    textColor: "{colors.primary}"
    rounded: "{rounded.panel}"
  radar-container:
    backgroundColor: "{colors.bg-base}"
    rounded: "{rounded.panel}"
  bomb-timer:
    backgroundColor: rgba(20,0,20,0.9)
    rounded: "{rounded.md}"
  button-hover:
    backgroundColor: transparent
    textColor: "{colors.ct-color}"
  connecting-ring:
    backgroundColor: transparent
    size: 44px
  c4-badge:
    backgroundColor: rgba(239,68,68,0.18)
    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

Midnight Cyberpunk is the neon-soaked alter-ego of WebRadar — for operators who prefer their tactical data filtered through a rain-slicked, neon-lit dystopia. The brand personality is **Neon Operative**: saturated, chromatic, electric.

The emotional tone is high-voltage and immersive. Where the Default theme is clinical, Cyberpunk is visceral — every element hums with energy. Team labels glow, player dots cast chromatic halos, and the radar container breathes with a dual-tone aura (cyan outer, magenta inner). The background is not flat — it's a **40px grid** of faint cyan lines, evoking digital architecture.

This theme doesn't just display data — it *performs* it. Pulse animations are faster, glow effects are pervasive, and the scrollbar itself becomes a gradient accent strip.

# Colors

The palette swaps the Default's restrained warmth for **full-neon saturation**. Surfaces shift from neutral grays into deep indigo-blues (`#0a0a12` → `#12121f` → `#181828`), creating a cooler, more electric foundation.

- **Team Colors — Hyper-Chromatic**: Amber and Blue are replaced by **Hot Magenta `#ff2d75`** (T) and **Neon Cyan `#00f0ff`** (CT) — these are weaponized colors, designed to sear through the dark. Border opacity is increased to 35% (vs Default's 22%) because the glow needs more fuel.
- **Status Neon**: Green health → Pure neon `#00ff88`, amber mid → Electric yellow `#ffcc00`, red low → Hot pink `#ff3366`. Every status color is at maximum saturation.
- **Surface Tint**: The CT color (`#00f0ff`) becomes the ambient surface tint, providing a subtle blue-cyan cast to elevated surfaces.
- **Text**: Secondary text is shifted to `#9090b0` — a cooler lavender-gray that harmonizes with the indigo base. Muted text at `#404060` stays purple-adjacent rather than warm.

# Typography

Typography inherits the Default scale exactly but gains **neon text-shadow** treatment:

- **Team Headers**: Both `.team-label-t` and `.team-label-ct` get `text-shadow: 0 0 10px currentColor, 0 0 20px currentColor` — labels don't just say "TERRORISTS", they *burn* it.
- **Phase Pulse**: The `phasePulseCyber` animation (0.65s, faster than Default) cycles between `text-shadow: 0 0 5px currentColor` and `text-shadow: 0 0 15px currentColor, 0 0 30px currentColor`.
- **Monospace displays** inherit the same scale but the surrounding glow context makes them visually "louder."

# Layout & Spacing

Layout is identical to the Default theme — the structural grid is theme-invariant. The Cyberpunk identity is expressed entirely through **surface treatment and glow effects**, not spatial rearrangement.

- **Grid Background**: `body::after` renders a 40×40px cyan grid at 3% opacity (`rgba(0,240,255,0.03)` lines), layered beneath the diagonal gradient overlay. This grid must remain subtle — it's atmosphere, not information.
- **Glow Padding**: Glow effects can visually "bleed" beyond element boundaries. Ensure adjacent interactive targets have ≥8px gap to prevent glow overlap.

# Elevation & Depth

Elevation is expressed through **neon glow luminescence** rather than luminosity stepping.

- **Level 0 (Base)**: `#0a0a12` — the void, absorbing all light.
- **Level 1 (Panel)**: `#12121f` — structural containers, settings.
- **Level 2 (Card)**: `#181828` — player cards, list items.
- **Glow Hierarchy**: Standard: `inset 0 1px 0 rgba(255,255,255,0.05)` + `0 0 0 1px border-dim`. Hover: `0 0 20px rgba(0,240,255,0.15), 0 0 40px rgba(255,45,117,0.08)`. Scoreboard: `0 0 30px / 0 0 60px` double-glow with inset darkening.
- **Radar Aura**: The radar container projects the largest glow halo: `0 0 40px` cyan + `0 0 80px` magenta, creating a "chromatic force field".
- **Player Dot Halo**: `drop-shadow(0 0 3px team-color) drop-shadow(0 0 6px team-color)` — each dot casts a soft team-colored halo on the map.

# Shapes

Identical to Default's "Rebirth" rounded language. The Cyberpunk aesthetic is expressed through light and chroma, not through geometric modification.

- **No sharp corners**: Every radius remains soft. The grid background provides all the "tech" angularity needed.
- **Scrollbar as Accent**: The scrollbar thumb becomes a `linear-gradient(180deg, #00f0ff, #ff2d75)` — a visible chromatic strip that the Default theme doesn't have.

# Components

## Player Card

Identical structure to Default, but the hover state adds a **dual-tone outer glow** (cyan 20px + magenta 40px) instead of a simple shadow. The card itself gains `inset 0 1px 0 rgba(255,255,255,0.05)` for a glass-edge highlight.

## Team Labels

Team labels receive persistent `text-shadow` glow (10px + 20px spread). This is the primary "neon sign" identifier — labels should glow at rest, not just on hover.

## Scoreboard

The scoreboard adds a large inset shadow (`0 0 30px rgba(0,0,0,0.3)`) creating a "sunken screen" effect, as if data is being projected into a recessed display.

## Bomb Timer

Bomb timer gets a dedicated magenta-glow treatment: `background: rgba(20,0,20,0.9)` with `0 0 20px rgba(255,51,102,0.3)` outer glow and `inset 0 0 20px rgba(255,51,102,0.1)` inner glow. The C4 pulse animation is faster (1.1s) with a more pronounced expanding ring.

## Connecting Ring

The ring projects a large cyan halo: `0 0 20px` + `0 0 40px` glow around the spinning border. Border-top uses the CT gradient color.

## Settings Panel

The panel gains an ambient cyan glow: `0 0 30px rgba(0,240,255,0.1)` wrapping the standard deep shadow. Buttons on hover project `0 0 15px rgba(0,240,255,0.3)`.

# Do's and Don'ts

**Do**:
- Apply `text-shadow` glow to team labels and urgent state text
- Use `drop-shadow` filter for player dot halos — it respects the dot's shape
- Layer multiple glow passes (cyan outer, magenta inner) for chromatic depth
- Keep the grid background at ≤3% opacity — it must not compete with content
- Use faster animation intervals (0.65–1.1s vs Default's 1.0–1.8s)

**Don't**:
- Never apply glow effects to body text — only labels, displays, and status indicators
- Don't exceed 40px glow spread on standard cards — past that, glows overlap adjacent cards
- Avoid mixing cyan and magenta glow on the same small element (≤48px) — it creates muddy color
- Never use the grid background pattern as a standalone feature — it must always be layered under the gradient overlay
- Don't increase border opacity beyond 35% — the glow handles chromatic emphasis, not the borders
