/**
 * Cyberpunk 2077 – Breach-Protocol Design-System
 * Extrahierte Palette aus dem Referenzbild (1024×576):
 *   Primary neon header:  #DCFE5E (Peak #E0FF5B)   Hue ~73°
 *   Secondary teal/cyan:  #08DCAC                  Hue ~166°
 *   Tertiary (dunkel):    #383F1C / Ink #8F9D58   Hue ~72° (dunkles Gelb)
 *   Panel-Hintergrund:   #0A0C10 / rgba(10,12,16,0.88)
 *   Muted (Sekundärtext): #D4E1A5 – wie Planet-Koordinaten-Labels
 *
 * Harmonie: Primary↔Secondary ≈ 94° (Analog/nahe Square), nicht Komplementär.
 * Tertiary bleibt in der Primary-Gelb-Familie – fuer de-emphasis, nicht Neon.
 * Danger #FF003C ≈ Komplement zu Secondary – Alarm-Akzent.
 */

:root {
	/* Kernfarben */
	--cyberpunk-primary: #DCFE5E;
	--cyberpunk-primary-bright: #E0FF5B;
	--cyberpunk-primary-dim: #C9E778;
	--cyberpunk-secondary: #08DCAC;
	--cyberpunk-secondary-dim: #4AA795;
	/* Dunkles Gelb (gleiche Hue-Familie wie Primary) – unwichtige UI-Elemente */
	--cyberpunk-tertiary: #383F1C;
	--cyberpunk-tertiary-mid: #4C5625;
	/* Lesbare Text-/Linienvariante derselben Hue (reines Tertiary ist zu dunkel auf HUD-BG) */
	--cyberpunk-tertiary-ink: #8F9D58;
	--cyberpunk-bg: #0A0C10;
	--cyberpunk-bg-panel: rgba(10, 12, 16, 0.88);
	--cyberpunk-bg-panel-solid: #10141C;
	--cyberpunk-text: #9CAC84;
	--cyberpunk-text-bright: #E8F5C8;
	--cyberpunk-text-on-primary: #0A0C10;
	--cyberpunk-text-on-secondary: #F4FFFC;
	--cyberpunk-danger: #FF003C;
	/* Wie Stadt-Punkt-Koordinaten auf dem Planeten */
	--cyberpunk-muted: #D4E1A5;

	/* Sequenzwaffen-Gattungen (Rahmenfarben) */
	--cyberpunk-neon-blue: #4D9FFF;
	--cyberpunk-neon-pink: #ff2ec8;
	--cyberpunk-neon-yellow: var(--cyberpunk-primary);
	--cyberpunk-weapon-electron: var(--cyberpunk-neon-blue);
	--cyberpunk-weapon-proton: var(--cyberpunk-neon-pink);
	--cyberpunk-weapon-neutron: var(--cyberpunk-neon-yellow);
	--cyberpunk-weapon-electron-glow: rgba(77, 159, 255, 0.45);
	--cyberpunk-weapon-proton-glow: rgba(255, 46, 200, 0.45);
	--cyberpunk-weapon-neutron-glow: var(--cyberpunk-primary-glow);

	/* Ableitungen / Glow */
	--cyberpunk-primary-glow: rgba(220, 254, 94, 0.45);
	--cyberpunk-primary-glow-soft: rgba(220, 254, 94, 0.18);
	--cyberpunk-secondary-glow: rgba(8, 220, 172, 0.4);
	--cyberpunk-border: rgba(220, 254, 94, 0.75);
	--cyberpunk-border-dim: rgba(220, 254, 94, 0.35);
	--cyberpunk-scanline: rgba(220, 254, 94, 0.045);
	/* Matrix-Flaeche (Scanlines + Grid) – HUD-Chrome, nicht Canopy/Mitte */
	--cyberpunk-matrix-bg-color: var(--cyberpunk-bg-panel);
	--cyberpunk-matrix-bg-image:
		repeating-linear-gradient(
			180deg,
			transparent 0,
			transparent 2px,
			var(--cyberpunk-scanline) 2px,
			var(--cyberpunk-scanline) 3px
		),
		linear-gradient(rgba(220, 254, 94, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(220, 254, 94, 0.035) 1px, transparent 1px);
	--cyberpunk-matrix-bg-size: auto, 18px 18px, 18px 18px;

	/* Geometrie: Cut-out-Ecken (45°) + simulierter Rahmen */
	--cyberpunk-cut: 10px;
	--cyberpunk-cut-sm: 6px;
	--cyberpunk-cut-notch: 18px;
	/* Dicke des Neon-Rahmens (sichtbarer Ring = inset des Fuell-Pseudos) */
	--cyberpunk-stroke: 2px;
	--cyberpunk-header-h: 28px;
	--cyberpunk-font: "Rajdhani", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--cyberpunk-font-mono: "Share Tech Mono", "Consolas", "Courier New", monospace;

	/* Wiederverwendbare Clip-Polygone.
	   WICHTIG: Nicht als voraufgeloeste :root-Tokens fuer lokale --cyberpunk-cut
	   wiederverwenden – sonst bleibt der :root-Cut (10px) „eingefroren“. */
	--cyberpunk-clip-cut: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);
	--cyberpunk-clip-notch: polygon(
		0 var(--cyberpunk-cut-notch),
		var(--cyberpunk-cut-notch) 0,
		100% 0,
		100% 100%,
		0 100%
	);
}

/* ============================================================
   Clip-Path-Stroke-Pattern (kein border – Rahmen via Pseudo)
   Parent: Neon-Hintergrund + Aussen-Clip
   ::before: Fuellung mit inset = Stroke UND kleinerem Cut
             (gleicher Cut auf inset-::before laesst 45°-Schraegen offen)
   ============================================================ */

.cp-panel {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: var(--cyberpunk-bg-panel);
	--cp-inner-cut: calc(var(--cyberpunk-cut) - var(--cyberpunk-stroke));

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--cyberpunk-text);
	border: none;
	/* Neon liegt unter dem eingefüllten ::before und bildet den Rand */
	background: var(--cp-stroke-color);
	clip-path: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);
	box-shadow: 0 0 12px var(--cyberpunk-primary-glow-soft);
}

.cp-panel--sm-cut {
	--cyberpunk-cut: var(--cyberpunk-cut-sm);
}

/* Dunkle Innenflaeche + Scanlines/Gitter; inset steuert Rahmendicke */
.cp-panel::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background-color: var(--cp-fill);
	background-image:
		repeating-linear-gradient(
			180deg,
			transparent 0,
			transparent 2px,
			var(--cyberpunk-scanline) 2px,
			var(--cyberpunk-scanline) 3px
		),
		linear-gradient(rgba(220, 254, 94, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(220, 254, 94, 0.035) 1px, transparent 1px);
	background-size: auto, 18px 18px, 18px 18px;
	clip-path: polygon(
		0 var(--cp-inner-cut),
		var(--cp-inner-cut) 0,
		100% 0,
		100% calc(100% - var(--cp-inner-cut)),
		calc(100% - var(--cp-inner-cut)) 100%,
		0 100%
	);
	box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.cp-panel > * {
	position: relative;
	z-index: 1;
}

/* Variante: Cyan/Teal (BREACH PROTOCOL) – Notch oben links */
.cp-panel--accent {
	--cp-stroke-color: var(--cyberpunk-secondary);
	--cp-clip: var(--cyberpunk-clip-notch);
	box-shadow: 0 0 14px var(--cyberpunk-secondary-glow);
}

.cp-panel--accent::before {
	background-image:
		repeating-linear-gradient(
			180deg,
			transparent 0,
			transparent 2px,
			rgba(8, 220, 172, 0.05) 2px,
			rgba(8, 220, 172, 0.05) 3px
		),
		linear-gradient(rgba(8, 220, 172, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(8, 220, 172, 0.04) 1px, transparent 1px);
	background-size: auto, 18px 18px, 18px 18px;
}

/* ============================================================
   Leuchtende Header-Streifen (CODE MATRIX / BUFFER / …)
   ============================================================ */

.cp-panel__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: var(--cyberpunk-header-h);
	padding: 0 12px;
	background: var(--cyberpunk-primary);
	color: var(--cyberpunk-text-on-primary);
	box-shadow: 0 0 10px var(--cyberpunk-primary-glow);
}

.cp-panel--accent .cp-panel__head,
.cp-panel__head--accent {
	background: var(--cyberpunk-secondary);
	color: var(--cyberpunk-text-on-secondary);
	box-shadow: 0 0 10px var(--cyberpunk-secondary-glow);
}

.cp-panel__title {
	margin: 0;
	font-family: var(--cyberpunk-font);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.2;
	color: inherit;
}

.cp-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
}

/* ============================================================
   Rahmen-Extras: L-Klammern an den Ecken
   ============================================================ */

.cp-frame {
	position: relative;
}

.cp-frame::before,
.cp-frame::after {
	content: "";
	pointer-events: none;
	position: absolute;
	width: 14px;
	height: 14px;
	border: 1px solid var(--cyberpunk-primary);
	box-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
	z-index: 2;
}

.cp-frame::before {
	top: -3px;
	left: -3px;
	border-right: 0;
	border-bottom: 0;
}

.cp-frame::after {
	right: -3px;
	bottom: -3px;
	border-left: 0;
	border-top: 0;
}

/* ============================================================
   Buffer-Slots (gestrichelte Neon-Felder)
   ============================================================ */

.cp-slot {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 2.75rem;
	padding: 8px 10px;
	border: 1px dashed var(--cyberpunk-border-dim);
	background: rgba(0, 0, 0, 0.28);
	color: var(--cyberpunk-text);
	box-shadow: inset 0 0 10px rgba(220, 254, 94, 0.06);
}

.cp-slot__label {
	font-family: var(--cyberpunk-font);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cyberpunk-muted);
}

.cp-slot__value {
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

/* ============================================================
   Aeusserer Tile-Modal-Rahmen
   Ziel: #ng-tile-backdrop.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal
   (Backdrop selbst bleibt Fullscreen-Scrim; der Fensterrahmen ist .ng-modal)
   ============================================================ */

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) {
	--cp-stroke-color: var(--cyberpunk-primary);
	/* Warmes Olive-Schwarz statt kaltblauem #10141C */
	--cp-fill: #0E120C;
	--cp-clip: var(--cyberpunk-clip-cut);
	--cyberpunk-stroke: 3px;

	position: relative;
	isolation: isolate;
	border: none;
	border-radius: 0;
	background: var(--cp-stroke-color);
	clip-path: var(--cp-clip);
	box-shadow: 0 0 22px var(--cyberpunk-primary-glow);
	/* reloaded setzt overflow:hidden – ok mit clip-path */
	overflow: hidden;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Neon-Rand: dunkle Fuellung inset um --cyberpunk-stroke */
:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
)::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background-color: var(--cp-fill);
	background-image: repeating-linear-gradient(
		180deg,
		transparent 0,
		transparent 2px,
		var(--cyberpunk-scanline) 2px,
		var(--cyberpunk-scanline) 3px
	);
	clip-path: var(--cp-clip);
	box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) > *:not(.cp-breach-side-border) {
	position: relative;
	z-index: 1;
}

/*
 * Zweiter rechter Border: Geschwister von .ng-modal im Backdrop,
 * per JS (fixed) rechts AUSSERHALB des gesamten Modal-Fensters.
 * Nicht mit der linken Alien-Rail (.ng-modal-alien-rail) verwechseln.
 */
:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .ng-modal__inner{
	margin-right: 0;
	padding-right: 0;
}

.ng-modal-backdrop.ng-tile-backdrop .cp-breach-side-border,
.cp-breach-side-border[data-cp-side-border] {
	position: fixed;
	margin: 0;
	padding: 0;
	border: none;
	width: 1px;
	background: var(--cyberpunk-primary-bright);
	opacity: 0.5;
	box-shadow: 0 0 4px var(--cyberpunk-primary-glow-soft);
	z-index: 15001;
	pointer-events: none;
}

/* Header im Breach-Tile-Modal an Neon anpassen */
:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .ng-modal__header{
	position: relative;
	border-bottom: 1px solid var(--cyberpunk-border-dim);
	border-left: none;
	background: rgba(220, 254, 94, 0.06);
	box-shadow: none;
	padding-left: 12px;
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .ng-modal__title{
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .ng-modal__subtitle{
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cyberpunk-muted);
	text-shadow: none;
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .ng-modal__close{
	border: none;
	border-radius: 0;
	color: var(--cyberpunk-primary);
	/* Transparent: Header-Linien darunter bleiben sichtbar */
	background: transparent;
	box-shadow: none;
	/* Doppelt so gross wie der Standard-Close (padding 4/10, ~1rem) */
	font-size: 1.75rem;
	line-height: 1;
	padding: 8px 20px;
	min-width: 2.75rem;
	min-height: 2.75rem;
	clip-path: none;
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .ng-modal__close:hover{
	background: transparent;
	border: none;
	color: var(--cyberpunk-primary-bright);
	box-shadow: none;
}

/* ============================================================
   Breach-Grid + innere Panels (Clip-Path-Stroke)
   ============================================================ */

/* Grid-Innenraum: kein zweiter Aussenrahmen (der sitzt am .ng-modal) */
.ng-modal__body .cp-breach {
	position: relative;
	font-family: var(--cyberpunk-font);
	color: var(--cyberpunk-text);
	border: none;
	background: transparent;
	clip-path: none;
	box-shadow: none;
}

.ng-modal__body .cp-breach::before {
	content: none;
}

/* Innere Panels: CODE MATRIX / BUFFER / SEQUENCE */
.ng-modal__body .cp-breach__matrix,
.ng-modal__body .cp-breach__buffer,
.ng-modal__body .cp-breach__sequence,
.ng-modal__body .cp-breach__protocol {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: var(--cyberpunk-bg-panel);
	--cp-clip: var(--cyberpunk-clip-cut);

	position: relative;
	isolation: isolate;
	border: none;
	background: var(--cp-stroke-color);
	clip-path: var(--cp-clip);
	box-shadow: 0 0 12px var(--cyberpunk-primary-glow-soft);
}

.ng-modal__body .cp-breach__matrix::before,
.ng-modal__body .cp-breach__buffer::before,
.ng-modal__body .cp-breach__sequence::before,
.ng-modal__body .cp-breach__protocol::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background-color: var(--cp-fill);
	background-image:
		repeating-linear-gradient(
			180deg,
			transparent 0,
			transparent 2px,
			var(--cyberpunk-scanline) 2px,
			var(--cyberpunk-scanline) 3px
		),
		linear-gradient(rgba(220, 254, 94, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(220, 254, 94, 0.03) 1px, transparent 1px);
	background-size: auto, 18px 18px, 18px 18px;
	clip-path: var(--cp-clip);
	box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.ng-modal__body .cp-breach__matrix > *,
.ng-modal__body .cp-breach__buffer > *,
.ng-modal__body .cp-breach__sequence > *,
.ng-modal__body .cp-breach__protocol > * {
	position: relative;
	z-index: 1;
}

/* \DATEN: Grauton, duenne Umrandung, gleiche Cut-Ecken wie Ausbau-Sequenz */
.ng-modal__body .cp-breach__protocol {
	--cp-stroke-color: var(--cyberpunk-muted);
	--cp-clip: var(--cyberpunk-clip-cut);
	/* Duenn statt Standard-2px-Neon-Stroke */
	--cyberpunk-stroke: 1px;
	box-shadow: none;
}

.ng-modal__body .cp-breach__protocol::before {
	background-image:
		repeating-linear-gradient(
			180deg,
			transparent 0,
			transparent 2px,
			color-mix(in srgb, var(--cyberpunk-muted) 8%, transparent) 2px,
			color-mix(in srgb, var(--cyberpunk-muted) 8%, transparent) 3px
		),
		linear-gradient(color-mix(in srgb, var(--cyberpunk-muted) 7%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--cyberpunk-muted) 7%, transparent) 1px, transparent 1px);
	background-size: auto, 18px 18px, 18px 18px;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35);
}

.ng-modal__body .cp-breach__panel-head {
	border-bottom: none;
	background: var(--cyberpunk-primary);
	box-shadow: 0 0 10px var(--cyberpunk-primary-glow);
	padding: 6px 12px;
	min-height: var(--cyberpunk-header-h);
}

/* Accent-Header: kein Secondary/Cyan – Farbe wie Slot-Labels (NEXT) */
.ng-modal__body .cp-breach__panel-head--accent {
	background: var(--cyberpunk-muted);
	box-shadow: none;
}

.ng-modal__body .cp-breach__panel-title {
	font-family: var(--cyberpunk-font);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--cyberpunk-text-on-primary);
	text-shadow: none;
}

.ng-modal__body .cp-breach__panel-head--accent .cp-breach__panel-title {
	color: var(--cyberpunk-text-bright);
}

.ng-modal__body .cp-breach__meta-key,
.ng-modal__body .cp-breach__slot-label {
	color: var(--cyberpunk-muted);
}

.ng-modal__body .cp-breach__meta-val,
.ng-modal__body .cp-breach__slot-value {
	font-family: var(--cyberpunk-font-mono);
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

.ng-modal__body .cp-breach__slot {
	border-color: var(--cyberpunk-border-dim);
	background: rgba(0, 0, 0, 0.28);
	box-shadow: inset 0 0 10px rgba(220, 254, 94, 0.06);
}

/* \DATEN-Zeile: Lore fuellt die Zelle; Alien absolut rechts (kein Layout-Wachstum) */
.ng-modal__body .cp-breach__protocol-row {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ng-modal__body .cp-breach__protocol-body.ng-city-popup-console__lore-panel {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	/* rechts Platz fuer die absolute Alien-Spalte */
	padding: 12px 18px 12px 14px;
	overflow: auto;
}

/* Gleicher Glyph-Stil wie Footer-Alien, grau/kleiner – out-of-flow, oben→unten */
.ng-modal__body .cp-breach__protocol-alien {
	position: absolute;
	top: 8px;
	right: 4px;
	bottom: 8px;
	width: 12px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	text-overflow: clip;
	font-size: 6px;
	line-height: 1.15;
	letter-spacing: 0.14em;
	word-spacing: 0.25em;
	color: rgba(140, 146, 132, 0.42);
	text-shadow: none;
	animation: none;
	user-select: none;
	pointer-events: none;
	z-index: 2;
}

.ng-modal__body .cp-breach__lore-text,
.ng-modal__body .cp-breach .ng-city-popup-console__lore-text,
.ng-modal__body .cp-breach .ng-plane-gallery__description {
	color: var(--cyberpunk-text-bright);
	font-family: var(--cyberpunk-font);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* Popup-Embed: kein Widget-Spacing mehr noetig (Wrapper entfernt in ng_build.php) */
.ng-modal__body .ng-building-list--popup-embed {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
}

/* Footer: QR + Alien links buendig, ESC rechts */
:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 0;
	padding: 6px 14px 8px 8px;
	border-top: 1px solid var(--cyberpunk-border-dim);
	background: transparent;
	min-height: 52px;
}

/* QR-Seal im Footer: im Flex-Flow ganz links (nicht absolut) */
:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-modal-qr-seal--footer{
	position: static;
	top: auto;
	right: auto;
	transform: none;
	z-index: auto;
	flex: 0 0 auto;
	margin: 0;
	order: 0;
	/* 25% Transparenz */
	opacity: 0.75;
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-modal-qr-seal--footer .cp-modal-qr-seal__frame{
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	clip-path: none;
	box-shadow: none;
	overflow: hidden;
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-modal-qr-seal--footer .cp-modal-qr-seal__canvas{
	width: 26px;
	height: 26px;
	max-width: 26px;
	max-height: 26px;
}

/* Kein Neon-Rahmen / Fill um den Footer-QR */
:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-modal-qr-seal--footer .cp-modal-qr-seal__frame::before{
	content: none;
	display: none;
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-modal-qr-seal--footer .cp-modal-qr-seal__label{
	font-size: 6px;
}

/* Alien-Schrift direkt rechts neben dem Seal – max. ca. 1/3 der Footer-Breite */
:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer__alien{
	flex: 0 1 33%;
	max-width: 33%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
	font-size: 9px;
	line-height: 1.25;
	letter-spacing: 0.16em;
	word-spacing: 0.3em;
	color: rgba(220, 254, 94, 0.58);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
	animation: none;
	user-select: none;
	pointer-events: none;
	order: 1;
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-keyhint{
	order: 2;
	flex: 0 0 auto;
	/* Restbreite schiebt Hint-Gruppe nach rechts */
	margin-left: auto;
	gap: 12px;
}

/* Icon + Label (LMT / TAP / ESC) als Paar */
:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-keyhint__pair{
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-keyhint__gi{
	--gi-size: 1.15rem;
	opacity: 0.9;
}

:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-keyhint__label{
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

/* ESC ohne Border / Keycap-Look im Footer */
:is(
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has(.cp-breach),
	.ng-modal-backdrop.ng-tile-backdrop.is-open > .ng-modal:has([data-cp-breach]),
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan,
	.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal
) .cp-breach-footer .cp-keyhint__key{
	min-width: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	clip-path: none;
}

/* ============================================================
   Cyberpunk Hex-Dock – Pointy-Topped Honeycomb (exakte Geometrie)
   Breite : Hoehe = 1 : (2/√3) ≈ 1 : 1.1547
   Rechtsbuendig: Tip unten rechts, Aufbau nach oben/links.
   Gerade Reihen −50% Breite (Brick nach links).
   ============================================================ */
.ng-cyber-hex-grid {
	/* Skalierung: nur --hex-width aendern */
	--hex-width: 60px;
	--hex-height: calc(var(--hex-width) * 1.1547);
	--hex-gap: 4px;
	--hex-stroke: 1px;
	--hex-clip: polygon(
		50% 0%,
		100% 25%,
		100% 75%,
		50% 100%,
		0% 75%,
		0% 25%
	);
	display: flex;
	flex-direction: column;
	/* Tip und Reihen an der rechten Kante ausrichten */
	align-items: flex-end;
	width: max-content;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 0;
	/* Leere Gitterflaeche blockiert keine Klicks; Zellen wieder aktiv */
	pointer-events: none;
	user-select: none;
	transform: none;
	z-index: 10;
}

.ng-cyber-hex-grid .ng-hex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: flex-start;
	gap: var(--hex-gap);
	width: 100%;
	margin: 0;
}

/* Vertikaler Einrast: 25% der Hoehe (+ halber Gap) */
.ng-cyber-hex-grid .ng-hex-row + .ng-hex-row {
	margin-top: calc((var(--hex-height) * -0.25) + (var(--hex-gap) * 0.5));
}

/*
 * Rechtsbuendig: gerade Reihen (inkl. Tip) eine halbe Wabenbreite nach LINKS,
 * damit die Tip-Wabe in die Luecke der Reihe darueber einrastet
 * und nicht an der rechten Kante klebt.
 */
.ng-cyber-hex-grid .ng-hex-row:nth-child(even) {
	transform: translateX(calc((var(--hex-width) * -0.5) - (var(--hex-gap) * 0.5)));
}

/*
 * Clip-path nur auf die visuellen Pseudos – nicht auf die Zelle.
 * Sonst schneidet die Wabenform ueberstehende Badges (z. B. SP) ab.
 */
.ng-cyber-hex-grid .ng-hex-cell {
	position: relative;
	box-sizing: border-box;
	width: var(--hex-width);
	height: var(--hex-height);
	flex: 0 0 var(--hex-width);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	clip-path: none;
	-webkit-clip-path: none;
	overflow: visible;
	filter: none;
	pointer-events: auto;
}

/* Neon-Rand (volle Wabe) + Glow */
.ng-cyber-hex-grid .ng-hex-cell::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--cyberpunk-primary);
	clip-path: var(--hex-clip);
	-webkit-clip-path: var(--hex-clip);
	filter: drop-shadow(0 0 4px var(--cyberpunk-primary-glow-soft));
}

/* Dunkler Kern → ::before wirkt als Neon-Rand */
.ng-cyber-hex-grid .ng-hex-cell::after {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--hex-stroke);
	z-index: 1;
	background: #0a0a0a;
	clip-path: var(--hex-clip);
	-webkit-clip-path: var(--hex-clip);
}

/* Dock-Variante */
.ng-cyber-hex-grid--dock {
	/* ~33 % kleiner als 60px; Icons separat (siehe .ng-dock-link i) */
	--hex-width: 40px;
	--hex-stroke: 1px;
}

/* Hex-Raender: dunkles Gelb; Symbole bleiben Primary (siehe .ng-dock-link) */
.ng-cyber-hex-grid--dock .ng-hex-cell::before {
	background: var(--cyberpunk-tertiary-ink);
	filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cyberpunk-tertiary) 55%, transparent));
}

/* Gegen reloaded.css .ng-dock-nav-list { flex-direction: row !important } */
.ng-hud-column--right .ng-dock-nav-list.ng-cyber-hex-grid--dock,
.ng-hud-column--right .ng-cyber-hex-grid.ng-cyber-hex-grid--dock {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-end !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: max-content !important;
	max-width: none !important;
	min-width: 0 !important;
	overflow: visible !important;
	margin: 0 !important;
	transform: none !important;
	position: relative;
	z-index: 10;
	pointer-events: none;
}

/*
 * Hex-Dock am unteren Ende der Right-Column (BR-Ecke, 8px Innenabstand).
 */
.ng-hud-column--right .ng-hud-dock-container.ng-hud-dock-container--hex {
	/* Gleiche Wabenmasse wie .ng-cyber-hex-grid--dock (fuer Padding-Calc) */
	--hex-width: 40px;
	--hex-gap: 3px;
	position: relative !important;
	right: auto !important;
	bottom: auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: flex-end !important;
	align-self: flex-end !important;
	margin-top: auto !important;
	margin-right: 8px !important;
	margin-bottom: 8px !important;
	/* Kein Grid-/Scanline-Hintergrund, kein Glow */
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	overflow: visible !important;
	width: max-content !important;
	min-width: 0 !important;
	max-width: none !important;
	/*
	 * Gerade Hex-Reihen sind um ~0.5 Wabenbreite nach links verschoben (transform).
	 * Transform fließt nicht in die Layout-Breite ein – ohne linken Innenabstand
	 * ragen die Waben aus dem Container heraus; Padding haelt sie im Hit-Area.
	 */
	padding:
		8px
		8px
		8px
		calc((var(--hex-width) * 0.5) + (var(--hex-gap) * 0.5) + 8px) !important;
	z-index: 40;
	isolation: isolate;
	transform: none !important;
}

.ng-hud-column--right .ng-hud-dock-container.ng-hud-dock-container--hex::before {
	content: none;
	display: none;
}

.ng-hud-column--right .ng-hud-dock-container--hex .ng-sf-panel__inner,
.ng-hud-column--right .ng-hud-dock-container--hex .ng-dock-panel,
.ng-hud-column--right .ng-hud-dock-container--hex .ng-dock-content,
.ng-hud-column--right .ng-hud-dock-container--hex .ng-dock-section,
.ng-hud-column--right .ng-hud-dock-container--hex .ui-frame__body,
.ng-hud-column--right .ng-hud-dock-container--hex .ng-dock-nav {
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	width: max-content !important;
	max-width: none !important;
}

/* Dock-Links = Hex-Inhalt (ueber dem Kern) */
.ng-cyber-hex-grid--dock .ng-hex-cell > .ng-dock-link,
.ng-cyber-hex-grid--dock .ng-hex-cell > a.ng-dock-link,
.ng-cyber-hex-grid--dock .ng-hex-cell > button.ng-dock-link {
	position: relative;
	z-index: 2;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cyberpunk-primary) !important;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
	transform: none;
}

.ng-cyber-hex-grid--dock .ng-hex-cell > .ng-dock-link i {
	/* Icons nur ~25 % kleiner als zuvor (22.8px → ~17px), Hex ~33 % */
	font-size: 17px !important;
	line-height: 1;
	color: inherit;
	filter: drop-shadow(0 0 4px var(--cyberpunk-primary-glow-soft));
}

.ng-cyber-hex-grid--dock .ng-hex-cell > .ng-dock-link:hover,
.ng-cyber-hex-grid--dock .ng-hex-cell > .ng-dock-link:focus-visible {
	color: var(--cyberpunk-primary-bright) !important;
	background: transparent !important;
}

.ng-cyber-hex-grid--dock .ng-hex-cell:has(> .ng-dock-link.is-active)::before,
.ng-cyber-hex-grid--dock .ng-hex-cell:has(> .ng-dock-link:hover)::before {
	background: var(--cyberpunk-tertiary-ink);
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyberpunk-tertiary) 70%, transparent));
}

.ng-cyber-hex-grid--dock .ng-hex-cell > .ng-dock-link.is-active {
	color: var(--cyberpunk-primary-bright) !important;
}

/*
 * Badge an der Wabenecke; Zelle ohne clip-path + erhoehter z-index,
 * damit Nachbar-Waben den Ueberstand nicht ueberdecken.
 */
.ng-cyber-hex-grid--dock .ng-hex-cell:has(> .ng-dock-sp-badge),
.ng-cyber-hex-grid--dock .ng-hex-cell:has(.ng-dock-sp-badge) {
	z-index: 6;
}

.ng-cyber-hex-grid--dock .ng-dock-sp-badge {
    position: absolute;
    z-index: 5;
    top: 3px;
    right: 3px;
}

.cp-keyhint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--cyberpunk-font);
	color: var(--cyberpunk-text);
	user-select: none;
	pointer-events: none;
}

.cp-keyhint__icon {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--cyberpunk-primary);
	opacity: 0.85;
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

.cp-keyhint__key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	padding: 3px 8px 2px;
	border: 1px solid var(--cyberpunk-border);
	background: rgba(0, 0, 0, 0.45);
	box-shadow:
		0 0 8px var(--cyberpunk-primary-glow-soft),
		inset 0 -2px 0 rgba(0, 0, 0, 0.45);
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
	clip-path: polygon(
		0 3px,
		3px 0,
		100% 0,
		100% calc(100% - 3px),
		calc(100% - 3px) 100%,
		0 100%
	);
}

/* ============================================================
   Schritt 3: Legacy-Effekte → Cyberpunk-Neon
   Alien-Script, Warn-Banderole, Modal-Rail, Glitch, Lore-Decode
   ============================================================ */

/* Alien-Schrift (Login, HUD, Modal-Rail) */
.landing-login-terminal__alien-script {
	color: rgba(220, 254, 94, 0.32);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

.ng-header-top-left .ng-header-avatar-tools > .ng-header-alien-script {
	color: var(--cyberpunk-tertiary-ink);
	text-shadow: none;
}

.ng-hud-alien-ticker {
	color: rgba(220, 254, 94, 0.28);
}

.ng-hud-column .landing-login-terminal__alien-script {
	color: rgba(220, 254, 94, 0.3);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

/* Alienschrift: oben rechts im Galaxy-Canvas, vertikal nach unten */
.ng-galaxy-background .ng-galaxy-canvas__alien {
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: auto;
	left: auto;
	z-index: 2;
	margin: 0;
	padding: 0;
	max-height: calc(100% - 20px);
	overflow: hidden;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	text-overflow: clip;
	font-size: 7px;
	line-height: 1.3;
	letter-spacing: 0.16em;
	word-spacing: 0.28em;
	color: rgba(220, 254, 94, 0.28);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
	user-select: none;
	pointer-events: none;
}

/* Modal Alien-Rail (ng_modal_alien_rail.js) */
.ng-modal-alien-rail {
	background: linear-gradient(
		180deg,
		rgba(220, 254, 94, 0.1),
		rgba(2, 4, 8, 0.22)
	);
	border-right: 1px solid var(--cyberpunk-border-dim);
}

.ng-modal-alien-rail__stream {
	color: rgba(220, 254, 94, 0.48);
	text-shadow:
		0 0 6px var(--cyberpunk-primary-glow),
		0 0 14px var(--cyberpunk-primary-glow-soft);
}

/*
 * Warn-Banderolen: nur am Avatar sichtbar.
 * Alle anderen Instanzen (Modal-Header, Breach-Warn, Landing, HUD-Atmos) aus.
 */
.ng-hud-warn-banderole,
.landing-login-terminal__warn-banderole,
.warn-banderole,
.ng-hud-atmos-hazard {
	display: none;
}

.header-avatar > .ng-hud-warn-banderole {
	display: block;
	background: repeating-linear-gradient(
		-45deg,
		var(--cyberpunk-primary),
		var(--cyberpunk-primary) 6px,
		#111111 6px,
		#111111 12px
	);
	box-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

.ng-modal__body .ng-city-popup-console__warn,
.ng-modal__body .cp-breach__warn {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: rgba(12, 14, 8, 0.72);
	--cp-clip: polygon(
		0 4px,
		4px 0,
		100% 0,
		100% calc(100% - 4px),
		calc(100% - 4px) 100%,
		0 100%
	);
	--cyberpunk-stroke: 2px;

	position: relative;
	isolation: isolate;
	border: none;
	background: var(--cp-stroke-color);
	clip-path: var(--cp-clip);
}

.ng-modal__body .ng-city-popup-console__warn::before,
.ng-modal__body .cp-breach__warn::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background: var(--cp-fill);
	clip-path: var(--cp-clip);
}

.ng-modal__body .ng-city-popup-console__warn > *,
.ng-modal__body .cp-breach__warn > * {
	position: relative;
	z-index: 1;
}

.ng-modal__body .ng-city-popup-console__warn-label {
	font-family: var(--cyberpunk-font);
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow);
}

/* Gallery-Stage: Padding-Stroke (Pseudos sind fuer Glitch belegt) */
.ng-modal__body .cp-breach .ng-city-popup-gallery .ng-plane-gallery__stage {
	--cyberpunk-stroke: 2px;
	border: none;
	padding: var(--cyberpunk-stroke);
	background-color: var(--cyberpunk-primary);
	clip-path: var(--cyberpunk-clip-cut);
	box-shadow: 0 0 12px var(--cyberpunk-primary-glow-soft);
	overflow: hidden;
}

/* Glitch-Layer innerhalb der Content-Box halten, Neon-Padding bleibt sichtbar */
.ng-modal__body .cp-breach .ng-city-popup-console__glitch-stage::before,
.ng-modal__body .cp-breach .ng-city-popup-console__glitch-stage::after {
	inset: var(--cyberpunk-stroke);
}

/* Lore-Decode: Neon-RGB-Split */
.ng-modal__body .cp-breach .ng-city-popup-console__lore-text.is-decoding,
.ng-modal__body .ng-city-popup-console__lore-text.is-decoding {
	text-shadow:
		-0.6px 0 rgba(255, 0, 60, 0.35),
		0.6px 0 rgba(8, 220, 172, 0.4),
		0 0 8px var(--cyberpunk-primary-glow-soft);
}

/* Glitch-Overlays: nur feine Neon-Scanlines (kein Rot/Cyan-Verlauf) */
.ng-modal__body .cp-breach .ng-city-popup-console__glitch-stage::before,
.ng-modal__body .ng-city-popup-console__glitch-stage::before {
	background: repeating-linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0,
		rgba(220, 254, 94, 0.1) 1px,
		rgba(0, 0, 0, 0) 3px
	);
}

.ng-modal__body .cp-breach .ng-city-popup-console__glitch-stage::after,
.ng-modal__body .ng-city-popup-console__glitch-stage::after {
	background: repeating-linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0,
		rgba(220, 254, 94, 0.16) 2px,
		rgba(0, 0, 0, 0) 4px
	);
	/* Signalverlust-Drops (ngRadarGlitchDrop) ueber dem Bild */
	animation:
		ngGlitchBars 1.6s linear infinite,
		ngRadarGlitchDrop 8.8s steps(1, end) infinite;
}

.ng-modal__body .cp-breach .ng-city-popup-console__image--glitch,
.ng-modal__body .ng-city-popup-console__image--glitch {
	transform-origin: top left;
	animation: cpCityPopupImageDistortion 9s steps(1, end) infinite;
}

/*
 * Vignette verstaerkt: Raender satt schwarz, Bildmitte bleibt hell.
 * Engere klare Mitte, steilerer Falloff zu den Kanten/Ecken.
 */
.ng-modal__body .cp-breach .ng-city-popup-console__glitch-stage > .ng-plane-gallery__vignette,
.ng-modal__body .ng-city-popup-console__glitch-stage > .ng-plane-gallery__vignette {
	background:
		radial-gradient(
			ellipse 62% 54% at 50% 50%,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0) 38%,
			rgba(0, 0, 0, 0.45) 58%,
			rgba(0, 0, 0, 0.88) 74%,
			rgba(0, 0, 0, 1) 88%,
			rgba(0, 0, 0, 1) 100%
		),
		radial-gradient(
			ellipse 100% 100% at 50% 50%,
			rgba(0, 0, 0, 0) 28%,
			rgba(0, 0, 0, 0.55) 62%,
			rgba(0, 0, 0, 0.95) 82%,
			rgba(0, 0, 0, 1) 100%
		),
		/* Extra-Ecken-Druck: saturiertes Schwarz in den Corners */
		radial-gradient(
			ellipse 120% 120% at 50% 50%,
			rgba(0, 0, 0, 0) 42%,
			rgba(0, 0, 0, 1) 100%
		);
}

/*
 * Schmale Scan-Linie oben→unten bis ans Bildende.
 * top% bezieht sich auf die Stage (nicht auf die Linienhoehe) –
 * anders als ngLandingScanSweep (translateY% = eigene Hoehe).
 */
.ng-modal__body .cp-breach .ng-city-popup-console__scan-beam,
.ng-modal__body .ng-city-popup-console__scan-beam {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	z-index: 4;
	pointer-events: none;
	background: rgba(220, 254, 94, 0.55);
	box-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
	mix-blend-mode: screen;
	opacity: 0.4;
	animation: cpCityPopupScanBeam 8s linear infinite;
}

@keyframes cpCityPopupScanBeam {
	0% {
		top: 0;
		transform: translateY(0);
	}
	100% {
		/* Linie wandert bis unter den unteren Rand */
		top: 100%;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ng-modal__body .cp-breach .ng-city-popup-console__scan-beam,
	.ng-modal__body .ng-city-popup-console__scan-beam {
		animation: none;
		opacity: 0;
	}
}

/*
 * Breach-Variante: Idle + Pixelate
 * (ngRadarGlitchDrop liegt auf ::after ueber dem Bild)
 */
@keyframes cpCityPopupImageDistortion {
	0%, 100% {
		width: 100%;
		height: 100%;
		transform: translate(0, 0) scale(1);
		transform-origin: center center;
		image-rendering: auto;
		filter: none;
	}

	48% {
		width: 100%;
		height: 100%;
		transform: translate(-3px, 1px) scale(1);
		transform-origin: center center;
		image-rendering: auto;
		filter: saturate(1.35);
	}
	50% {
		transform: translate(3px, -1px) scale(1);
		filter: contrast(1.15);
	}
	52% {
		transform: translate(-1px, 0) scale(1);
		filter: none;
	}
	54% {
		transform: translate(0, 0) scale(1);
		filter: none;
	}

	72% {
		width: 20%;
		height: 20%;
		transform: scale(5);
		transform-origin: top left;
		image-rendering: pixelated;
		filter: contrast(1.2);
	}
	78% {
		width: 20%;
		height: 20%;
		transform: scale(5);
		transform-origin: top left;
		image-rendering: pixelated;
		filter: contrast(1.25) saturate(1.15);
	}
	80% {
		width: 100%;
		height: 100%;
		transform: translate(0, 0) scale(1);
		transform-origin: center center;
		image-rendering: auto;
		filter: none;
	}
}

/* Build-CTA: Clip-Stroke (2px Neon-Ring) */
.ng-modal__body .cp-breach .ng-city-popup-build-btn.ng-plane-gallery__btn--build {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: rgba(10, 12, 16, 0.92);
	--cp-clip: polygon(
		0 6px,
		6px 0,
		100% 0,
		100% calc(100% - 6px),
		calc(100% - 6px) 100%,
		0 100%
	);
	--cyberpunk-stroke: 2px;

	position: relative;
	isolation: isolate;
	border: none;
	background: var(--cp-stroke-color);
	clip-path: var(--cp-clip);
	color: var(--cyberpunk-primary);
	box-shadow: 0 0 12px var(--cyberpunk-primary-glow-soft);
}

.ng-modal__body .cp-breach .ng-city-popup-build-btn.ng-plane-gallery__btn--build::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background: var(--cp-fill);
	clip-path: var(--cp-clip);
}

.ng-modal__body .cp-breach .ng-city-popup-build-btn.ng-plane-gallery__btn--build > * {
	position: relative;
	z-index: 1;
}

.ng-modal__body .cp-breach .ng-city-popup-build-btn.ng-plane-gallery__btn--build:hover:not(:disabled) {
	--cp-stroke-color: var(--cyberpunk-primary-bright);
	color: var(--cyberpunk-primary-bright);
	box-shadow: 0 0 16px var(--cyberpunk-primary-glow);
}

.ng-modal__body .cp-breach .ng-city-popup-build-btn.ng-plane-gallery__btn--build:disabled {
	--cp-stroke-color: var(--cyberpunk-muted);
	color: var(--cyberpunk-muted);
	box-shadow: none;
	opacity: 0.55;
}

/* Ressourcen-/Aktions-Icons im Build-Button: Neon-Gelb statt Grau */
.ng-modal__body .cp-breach .ng-city-popup-build-btn .ng-plane-gallery__btn-main i,
.ng-modal__body .cp-breach .ng-city-popup-build-btn .ng-plane-gallery__cost i {
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

@media (prefers-reduced-motion: reduce) {
	.ng-modal__body .cp-breach .ng-city-popup-console__image--glitch,
	.ng-modal__body .ng-city-popup-console__image--glitch,
	.ng-modal__body .cp-breach .ng-city-popup-console__glitch-stage::after,
	.ng-modal__body .ng-city-popup-console__glitch-stage::after {
		animation: none;
	}
}

/* ============================================================
   Data-Authentification-Seal (QR) in Unified-Modal-Headern
   Position: absolut links neben dem Close-Button (der ebenfalls absolut ist).
   Breach-Stadt-Popup: Seal sitzt im Footer (.cp-modal-qr-seal--footer).
   ============================================================ */

.ng-modal-unified-header:has(.cp-modal-qr-seal),
.ng-modal-header-row:has(.cp-modal-qr-seal) {
	position: relative;
}

/* Titel braucht rechts mehr Platz: Close (~40px) + Seal (~52px) + Gaps */
.ng-modal-unified-header:has(.cp-modal-qr-seal) .ng-modal-title,
.ng-modal-header-row:has(.cp-modal-qr-seal) .ng-modal-title {
	padding-right: 110px;
}

.cp-modal-qr-seal {
	position: absolute;
	top: 50%;
	/* Links neben dem absolut positionierten Close-Button */
	right: 56px;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0;
	user-select: none;
	pointer-events: none;
}

.cp-modal-qr-seal__frame {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: #0A0C10;
	--cp-clip: var(--cyberpunk-clip-cut);
	--cyberpunk-stroke: 1px;
	--cyberpunk-cut: 4px;

	position: relative;
	isolation: isolate;
	width: 48px;
	height: 48px;
	padding: 3px;
	box-sizing: border-box;
	border: none;
	background: var(--cp-stroke-color);
	clip-path: var(--cp-clip);
	box-shadow: 0 0 10px var(--cyberpunk-primary-glow);
}

.cp-modal-qr-seal__frame::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background: var(--cp-fill);
	clip-path: var(--cp-clip);
}

.cp-modal-qr-seal__canvas {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	/* Farben kommen bereits aus QRCode.toCanvas (Neon auf Dunkel) */
	filter: none;
	image-rendering: pixelated;
}

.cp-modal-qr-seal__label {
	font-family: var(--cyberpunk-font-mono);
	font-size: 7px;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--cyberpunk-primary);
	opacity: 0.9;
	text-shadow: 0 0 4px var(--cyberpunk-primary-glow-soft);
}

/* ============================================================
   Planet-Scan Overlay (Koordinaten-Globus)
   Compact Breach-Modal: gleiche Chrome/Panels/Effekte wie
   Stadt-Gebaeude-Modal, kleinere Flaeche (kein ng-mu-full).
   Host: .ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan
   ============================================================ */

.ng-galaxy-tooltip--overlay {
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan {
	width: min(38rem, calc(100vw - 24px));
	max-width: min(38rem, calc(100vw - 24px));
	max-height: min(92vh, 640px);
	display: flex;
	flex-direction: column;
	margin: 0;
	/* Chrome (Clip/Neon) kommt ueber :is(...cp-planet-scan) oben */
	/* Klicks duerfen nicht durch Clip/::before auf den Planeten durchschlagen. */
	pointer-events: auto;
	isolation: isolate;
}

.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan::before {
	pointer-events: auto;
}

.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan .ng-modal__inner,
.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan .ng-modal__header,
.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan .ng-modal__body,
.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan .ng-modal__footer,
.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan .cp-breach {
	pointer-events: auto;
}

.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan .ng-modal__inner {
	max-height: min(92vh, 640px);
	border-radius: 0;
	overflow: hidden;
}

.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan .ng-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 0;
}

.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan .cp-breach-footer {
	min-height: 44px;
	padding: 4px 10px 6px 6px;
}

/* Compact-Grid: Matrix | Puffer oben, Sequenz volle Breite darunter
   Spezifitaet >= .ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach */
.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact,
.ng-modal__body .cp-breach.cp-breach--compact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas:
		"matrix buffer"
		"sequence sequence";
	gap: 8px;
	align-items: stretch;
	width: 100%;
	min-height: 0;
	padding: 8px;
	box-sizing: border-box;
}

.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__matrix,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__matrix { grid-area: matrix; }
.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__buffer,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__buffer { grid-area: buffer; }
.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__sequence,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__sequence { grid-area: sequence; }

.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__matrix-body,
.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__buffer-body,
.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__sequence-body,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__matrix-body,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__buffer-body,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__sequence-body {
	padding: 8px;
	gap: 8px;
}

.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__panel-head,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__panel-head {
	padding: 4px 10px;
	min-height: 1.6rem;
}

.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__panel-title,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__panel-title {
	font-size: 0.68rem;
	letter-spacing: 0.14em;
}

.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .ng-city-popup-gallery .ng-plane-gallery__stage,
.ng-modal__body .cp-breach.cp-breach--compact .ng-city-popup-gallery .ng-plane-gallery__stage {
	max-height: 140px;
	aspect-ratio: 16 / 10;
	border: none;
}

.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__slots,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__slots {
	grid-template-columns: 1fr;
	gap: 6px;
}

.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact .cp-breach__slot,
.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__slot {
	min-height: 0;
	padding: 6px 8px;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-breach__slot-value .ng-alliance-tag {
	color: var(--cyberpunk-muted);
	font-weight: 600;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__owner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__avatar {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	max-width: 22px;
	max-height: 22px;
	border-radius: 3px;
	border: 1px solid var(--cyberpunk-border-dim, rgba(220, 254, 94, 0.35));
	object-fit: cover;
	background: rgba(0, 0, 0, 0.35);
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__avatar--empty {
	display: inline-block;
	box-sizing: border-box;
	background:
		linear-gradient(135deg, rgba(220, 254, 94, 0.12), rgba(0, 0, 0, 0.45));
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__owner-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__protect {
	font-weight: 600;
	letter-spacing: 0.04em;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__protect--on {
	color: #ff8f6b;
	text-shadow: 0 0 6px rgba(255, 111, 80, 0.35);
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__protect--soft {
	color: #f0c36a;
	text-shadow: 0 0 6px rgba(240, 195, 106, 0.28);
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__protect--off {
	color: var(--cyberpunk-primary, #DCFE5E);
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__img-empty {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100px;
	background:
		repeating-linear-gradient(
			180deg,
			transparent 0,
			transparent 2px,
			var(--cyberpunk-scanline) 2px,
			var(--cyberpunk-scanline) 3px
		),
		linear-gradient(135deg, rgba(220, 254, 94, 0.06), rgba(0, 0, 0, 0.55));
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.4rem;
	padding: 8px 12px;
	font-family: var(--cyberpunk-font);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
	border: 1px dashed var(--cyberpunk-border-dim);
	background: rgba(0, 0, 0, 0.28);
	box-sizing: border-box;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__attack {
	width: 100%;
	min-width: 0;
	margin: 0;
	text-decoration: none;
	box-sizing: border-box;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__actions .cp-planet-scan__attack {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__spy {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	min-width: 2.5rem;
	max-width: 2.5rem;
	padding: 0;
	margin: 0;
	border: 1px solid var(--cyberpunk-border-dim, rgba(220, 254, 94, 0.35));
	background: rgba(14, 18, 12, 0.92);
	color: var(--cyberpunk-primary, #DCFE5E);
	cursor: pointer;
	box-sizing: border-box;
	clip-path: var(--cyberpunk-clip-cut, none);
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__spy:hover,
.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__spy:focus-visible {
	border-color: var(--cyberpunk-primary, #DCFE5E);
	color: var(--cyberpunk-primary-bright, #e8ff8a);
	outline: none;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__spy:disabled,
.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__spy.is-disabled,
.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__spy.is-busy {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__spy .gi {
	--gi-size: 1.15rem;
	--gi-color: currentColor;
}

.ng-modal__body .cp-breach.cp-breach--compact .cp-planet-scan__attack.is-disabled,
.ng-modal__body .cp-breach.cp-breach--compact span.cp-planet-scan__attack {
	opacity: 0.45;
	pointer-events: none;
	cursor: default;
}

@media (max-width: 520px) {
	.ng-galaxy-tooltip--overlay > .ng-modal.cp-planet-scan {
		width: min(100vw - 16px, 38rem);
		max-width: min(100vw - 16px, 38rem);
	}

	/* Schmale Viewports: wieder untereinander */
	.ng-modal__body .ng-building-item.ng-city-popup-console.cp-breach.cp-breach--compact,
	.ng-modal__body .cp-breach.cp-breach--compact {
		grid-template-columns: 1fr;
		grid-template-areas:
			"matrix"
			"buffer"
			"sequence";
	}
}

/* ============================================================
   Header-Dock-Modals (.cp-dock-modal)
   Unified-Card nutzt andere Klassen als Tile (.ng-modal__*).
   Chrome-Rahmen kommt ueber :is(...cp-dock-modal) oben;
   hier: Header/Titel/Close/Footer + Inhalts-Akzente.
   ============================================================ */

/* Breitere Seitenraender auf Desktop/Landscape (5 % L/R).
   Portrait bleibt randlos (reloaded Override padding: 0). */
.ng-modal-unified-backdrop.is-open:has(> .ng-modal-unified-card.cp-dock-modal) {
	--ng-mu-backdrop-padding-x: 5%;
}

body.ui-reboot .ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal {
	/* Radius 0 in reloaded.css (.cp-dock-modal) – damit Clip-Schraegen
	   (oben links / unten rechts) wie beim Stadt-Gebaeude-Modal bleiben. */
	border-radius: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	overflow: hidden;
	--cp-fill: #0E120C;
	--ng-pref-btn-bg: rgba(14, 18, 12, 0.94);
	--ng-pref-btn-bg-hover: rgba(56, 63, 28, 0.85);
	--ng-pref-btn-border: var(--cyberpunk-border-dim);
	--ng-pref-btn-border-hover: var(--cyberpunk-border);
	--ng-modal-widget-bg: rgba(56, 63, 28, 0.22);
	--ng-modal-widget-border: var(--cyberpunk-border-dim);
	--ng-modal-panel-bg: rgba(14, 18, 12, 0.55);
	--ng-modal-input-bg: rgba(14, 18, 12, 0.72);
	--ng-modal-input-border: var(--cyberpunk-border-dim);
	--ng-modal-label-muted: var(--cyberpunk-tertiary-ink);
	--color-accent: var(--cyberpunk-primary);
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-unified-header,
.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-header-row {
	position: relative;
	border-bottom: 1px solid var(--cyberpunk-border-dim);
	border-left: none;
	background: rgba(220, 254, 94, 0.06);
	box-shadow: none;
	padding-left: 12px;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-title,
.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-unified-title {
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-close-btn,
.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-unified-close-btn {
	border: none;
	border-radius: 0;
	color: var(--cyberpunk-primary);
	background: transparent;
	box-shadow: none;
	font-size: 1.75rem;
	line-height: 1;
	padding: 8px 20px;
	min-width: 2.75rem;
	min-height: 2.75rem;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-close-btn:hover,
.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-unified-close-btn:hover {
	background: transparent;
	border: none;
	color: var(--cyberpunk-primary-bright);
	box-shadow: none;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-unified-body,
.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-body {
	background: transparent;
	color: var(--cyberpunk-text);
	font-family: var(--cyberpunk-font);
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .ng-modal-unified-footer.cp-breach-footer {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 0;
	padding: 6px 14px 8px 8px;
	border-top: 1px solid var(--cyberpunk-border-dim);
	background: transparent;
	min-height: 52px;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer .cp-modal-qr-seal--footer {
	position: static;
	flex: 0 0 auto;
	margin: 0;
	order: 0;
	opacity: 0.75;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer .cp-modal-qr-seal--footer .cp-modal-qr-seal__frame,
.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer .cp-modal-qr-seal--footer .cp-modal-qr-seal__canvas {
	width: 26px;
	height: 26px;
	max-width: 26px;
	max-height: 26px;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer .cp-modal-qr-seal--footer .cp-modal-qr-seal__frame::before {
	content: none;
	display: none;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer__alien {
	flex: 0 1 33%;
	max-width: 33%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
	font-size: 9px;
	line-height: 1.25;
	letter-spacing: 0.16em;
	word-spacing: 0.3em;
	color: rgba(220, 254, 94, 0.58);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
	user-select: none;
	pointer-events: none;
	order: 1;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer .cp-keyhint {
	order: 2;
	flex: 0 0 auto;
	margin-left: auto;
	gap: 12px;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer .cp-keyhint__pair {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer .cp-keyhint__gi {
	--gi-size: 1.15rem;
	opacity: 0.9;
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer .cp-keyhint__label {
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

.ng-modal-unified-backdrop.is-open > .ng-modal-unified-card.cp-dock-modal .cp-breach-footer .cp-keyhint__key {
	min-width: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	clip-path: none;
}

/* ---- Inhalts-Akzente: Missionen ---- */
.cp-dock-modal .ng-missions-tab.is-active,
.cp-dock-modal .ng-missions-xp-fill {
	background: var(--cyberpunk-primary);
	color: var(--cyberpunk-text-on-primary);
	border-color: var(--cyberpunk-primary);
}

.cp-dock-modal .ng-missions-section-title,
.cp-dock-modal .ng-missions-entry-xp,
.cp-dock-modal .ng-missions-reward-level {
	color: var(--cyberpunk-primary);
}

/* Missions-Eintraege: Neon-Rand + Schraegen (wie Breach-Panels) */
.ng-modal-unified-card.cp-dock-modal .ng-missions-entry {
	--cp-stroke-color: var(--cyberpunk-border-dim);
	--cp-fill: rgba(0, 0, 0, 0.28);
	--cyberpunk-stroke: 2px;
	--cyberpunk-cut: 6px;
	--cp-inner-cut: calc(var(--cyberpunk-cut) - var(--cyberpunk-stroke));

	position: relative;
	isolation: isolate;
	border: none;
	border-radius: 0;
	background: var(--cp-stroke-color);
	clip-path: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-missions-entry::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background: var(--cp-fill);
	clip-path: polygon(
		0 var(--cp-inner-cut),
		var(--cp-inner-cut) 0,
		100% 0,
		100% calc(100% - var(--cp-inner-cut)),
		calc(100% - var(--cp-inner-cut)) 100%,
		0 100%
	);
	box-shadow: inset 0 0 12px rgba(220, 254, 94, 0.04);
}

.ng-modal-unified-card.cp-dock-modal .ng-missions-entry > * {
	position: relative;
	z-index: 1;
}

.ng-modal-unified-card.cp-dock-modal .ng-missions-entry:hover,
.ng-modal-unified-card.cp-dock-modal .ng-missions-entry.is-clickable:hover {
	--cp-stroke-color: var(--cyberpunk-primary);
	background: var(--cyberpunk-primary);
	box-shadow: 0 0 10px var(--cyberpunk-primary-glow-soft);
}

.ng-modal-unified-card.cp-dock-modal .ng-missions-entry:hover::before,
.ng-modal-unified-card.cp-dock-modal .ng-missions-entry.is-clickable:hover::before {
	background: rgba(220, 254, 94, 0.08);
}

.ng-modal-unified-card.cp-dock-modal .ng-missions-entry-icon {
	border-radius: 0;
	background: rgba(220, 254, 94, 0.08);
	clip-path: var(--cyberpunk-clip-cut);
	--cyberpunk-cut: 4px;
}

.ng-modal-unified-card.cp-dock-modal .ng-missions-entry-icon i {
	color: var(--cyberpunk-primary);
}

.cp-dock-modal .ng-missions-info-banner {
	border-color: var(--cyberpunk-border-dim);
	background: rgba(220, 254, 94, 0.06);
	color: var(--cyberpunk-text);
}

.cp-dock-modal .ng-missions-info-banner i {
	color: var(--cyberpunk-primary);
}

/* ---- Inhalts-Akzente: Artefakt-Labor ---- */
.cp-dock-modal .ng-modal-body:has(.ng-artifacts-lab),
.cp-dock-modal .ng-modal-unified-body:has(.ng-artifacts-lab) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cp-dock-modal .ng-artifacts-lab {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 48rem;
	margin: 0 auto;
}

.cp-dock-modal .ng-artifacts-lab__intro {
	color: var(--cyberpunk-muted);
	text-align: center;
}

.cp-dock-modal .ng-artifacts-lab__hint {
	border-color: var(--cyberpunk-border-dim);
	background: rgba(220, 254, 94, 0.06);
	color: var(--cyberpunk-text);
	width: 100%;
	box-sizing: border-box;
}

.cp-dock-modal .ng-artifacts-lab__hint i {
	color: var(--cyberpunk-primary);
}

/* Flex statt auto-fill-Grid: unvollstaendige Zeilen bleiben zentriert */
.cp-dock-modal .ng-artifacts-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 14px;
	width: 100%;
}

.cp-dock-modal .ng-artifacts-grid > .ng-artifact-card {
	flex: 0 1 220px;
	width: 220px;
	max-width: 100%;
	box-sizing: border-box;
}

.cp-dock-modal .ng-artifact-card {
	position: relative;
	isolation: isolate;
	border: none;
	border-radius: 0;
	background: transparent;
	clip-path: none;
	box-shadow: none;
}

.cp-dock-modal .ng-artifact-card::before {
	content: none;
}

.cp-dock-modal .ng-artifact-card:hover,
.cp-dock-modal .ng-artifact-card.is-crafted {
	border: none;
	background: transparent;
	box-shadow: none;
}

/* Artefakt-Bilder: Scanlines + Scan-Beam (ohne Vignette/Abdunkelung) */
.cp-dock-modal .ng-artifact-card__img {
	position: relative;
	width: 150px;
	height: 150px;
	margin: 0 auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cp-dock-modal .ng-artifact-card__glitch-stage {
	position: relative;
	isolation: isolate;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--cyberpunk-primary);
	border-radius: 0;
	padding: 0;
	box-sizing: border-box;
	background: transparent;
	clip-path: none;
	box-shadow: none;
}

.cp-dock-modal .ng-artifact-card__glitch-stage::before,
.cp-dock-modal .ng-artifact-card__glitch-stage::after {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 2;
}

.cp-dock-modal .ng-artifact-card__glitch-stage::before {
	background: repeating-linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0,
		rgba(220, 254, 94, 0.1) 1px,
		rgba(0, 0, 0, 0) 3px
	);
	mix-blend-mode: screen;
	opacity: 0.55;
	animation: ngCityPopupScanPulse 2.8s steps(2, end) infinite;
}

.cp-dock-modal .ng-artifact-card__glitch-stage::after {
	z-index: 3;
	inset: -2px;
	background: repeating-linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0,
		rgba(220, 254, 94, 0.16) 2px,
		rgba(0, 0, 0, 0) 4px
	);
	mix-blend-mode: screen;
	opacity: 0.32;
	animation:
		ngGlitchBars 1.6s linear infinite,
		ngRadarGlitchDrop 8.8s steps(1, end) infinite;
}

.cp-dock-modal .ng-artifact-card__glitch-stage > .ng-city-popup-console__image--glitch {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
	background: transparent;
	/* Kein Distortion/Idle-Zucken – Scanlines/Beam bleiben, keine Abdunkelung */
	animation: none;
	transform: none;
	filter: none;
	opacity: 1;
}

/* Legacy-Filter aus reloaded.css (grayscale/opacity) fuer Dock-Karten aufheben */
.cp-dock-modal .ng-artifact-card:not(.is-crafted) .ng-artifact-card__img img,
.cp-dock-modal .ng-artifact-card.is-crafted .ng-artifact-card__img img {
	filter: none;
	opacity: 1;
}

.cp-dock-modal .ng-artifact-card__glitch-stage > .ng-city-popup-console__scan-beam {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	z-index: 4;
	pointer-events: none;
	background: rgba(220, 254, 94, 0.55);
	box-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
	mix-blend-mode: screen;
	opacity: 0.4;
	animation: cpCityPopupScanBeam 8s linear infinite;
}

.cp-dock-modal .ng-artifact-card__active-badge {
	background: var(--cyberpunk-primary);
	color: var(--cyberpunk-text-on-primary);
	border-radius: 0;
	z-index: 5;
}

@media (max-width: 480px) {
	.cp-dock-modal .ng-artifact-card__img {
		width: 90px;
		height: 90px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-dock-modal .ng-artifact-card__glitch-stage::before,
	.cp-dock-modal .ng-artifact-card__glitch-stage::after,
	.cp-dock-modal .ng-artifact-card__glitch-stage > .ng-city-popup-console__image--glitch,
	.cp-dock-modal .ng-artifact-card__glitch-stage > .ng-city-popup-console__scan-beam {
		animation: none;
	}

	.cp-dock-modal .ng-artifact-card__glitch-stage > .ng-city-popup-console__scan-beam {
		opacity: 0;
	}
}

.cp-dock-modal .ng-artifact-card__name {
	color: var(--cyberpunk-primary);
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cp-dock-modal .ng-artifact-card__progress-fill {
	background: var(--cyberpunk-primary);
}

.cp-dock-modal .ng-artifact-craft-btn {
	--cyberpunk-cut: 8px;
	--cyberpunk-stroke: 3px;
	--cp-inner-cut: calc(var(--cyberpunk-cut) - (2 - 1.41421356237) * var(--cyberpunk-stroke));
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: var(--cyberpunk-bg-panel-solid);

	position: relative;
	isolation: isolate;
	border: none;
	border-radius: 0;
	background: var(--cp-stroke-color);
	color: var(--cyberpunk-text);
	clip-path: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);
	box-shadow: none;
	animation: none;
}

.cp-dock-modal .ng-artifact-craft-btn::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background: var(--cp-fill);
	clip-path: polygon(
		0 var(--cp-inner-cut),
		var(--cp-inner-cut) 0,
		100% 0,
		100% calc(100% - var(--cp-inner-cut)),
		calc(100% - var(--cp-inner-cut)) 100%,
		0 100%
	);
}

.cp-dock-modal .ng-artifact-craft-btn > *,
.cp-dock-modal .ng-artifact-craft-btn__label {
	position: relative;
	z-index: 1;
	color: inherit;
}

.cp-dock-modal .ng-artifact-craft-btn:not(.is-ready) {
	color: var(--cyberpunk-text);
}

.cp-dock-modal .ng-artifact-craft-btn.is-ready {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: color-mix(in srgb, var(--cyberpunk-bg-panel-solid) 78%, var(--cyberpunk-primary) 22%);
	color: var(--cyberpunk-primary-bright);
	background: var(--cyberpunk-primary);
	cursor: pointer;
}

.cp-dock-modal .ng-artifact-craft-btn.is-ready:hover {
	--cp-stroke-color: var(--cyberpunk-primary-bright);
	--cp-fill: color-mix(in srgb, var(--cyberpunk-bg-panel-solid) 65%, var(--cyberpunk-primary) 35%);
	background: var(--cyberpunk-primary-bright);
	filter: drop-shadow(0 0 10px var(--cyberpunk-primary-glow-soft));
}

.cp-dock-modal .ng-artifact-card__status.is-active {
	color: var(--cyberpunk-primary);
}

/* ---- Inhalts-Basis: kein Weiss, kein Widget-Glas ----
   Spezifitaet >= body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-widget */
body.ui-reboot .ng-modal-unified-backdrop .ng-modal-unified-card.cp-dock-modal .ng-modal-body,
body.ui-reboot .ng-modal-unified-backdrop .ng-modal-unified-card.cp-dock-modal .ng-modal-unified-body,
body.ui-reboot .ng-modal-unified-backdrop .ng-modal-unified-card.cp-dock-modal .ng-center-panel,
body.ui-reboot .ng-modal-unified-backdrop .ng-modal-unified-card.cp-dock-modal .ng-center-panel > div,
body.ui-reboot .ng-modal-unified-backdrop .ng-modal-unified-card.cp-dock-modal .ng-comm-fullview-content,
body.ui-reboot .ng-modal-unified-backdrop .ng-modal-unified-card.cp-dock-modal .ng-modal-page {
	color: var(--cyberpunk-text);
	background: transparent;
	border: none;
	box-shadow: none;
}

/* Widget-Flaeche im Dock-Modal: Hintergrund/Border/Blur entfernen */
body.ui-reboot .ng-modal-unified-backdrop .ng-modal-unified-card.cp-dock-modal .ng-widget,
body.ui-reboot .ng-modal-unified-backdrop .ng-modal-unified-card.cp-dock-modal .ng-pref-block.ng-widget,
body.ui-reboot .ng-modal-unified-backdrop .ng-modal-unified-card.cp-dock-modal .ng-center-panel .ng-widget {
	background: transparent;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--cyberpunk-text);
	margin: 0;
}

.ng-modal-unified-card.cp-dock-modal .ng-widget-title,
.ng-modal-unified-card.cp-dock-modal .ng-widget-body,
.ng-modal-unified-card.cp-dock-modal label,
.ng-modal-unified-card.cp-dock-modal strong,
.ng-modal-unified-card.cp-dock-modal p,
.ng-modal-unified-card.cp-dock-modal span,
.ng-modal-unified-card.cp-dock-modal li,
.ng-modal-unified-card.cp-dock-modal td,
.ng-modal-unified-card.cp-dock-modal th,
.ng-modal-unified-card.cp-dock-modal .ng-table,
.ng-modal-unified-card.cp-dock-modal .ng-data-table,
.ng-modal-unified-card.cp-dock-modal .ng-toplist-table,
.ng-modal-unified-card.cp-dock-modal .ng-info-box,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-content,
.ng-modal-unified-card.cp-dock-modal .ng-form-section,
.ng-modal-unified-card.cp-dock-modal .ng-missions-entry-title,
.ng-modal-unified-card.cp-dock-modal .ng-missions-entry-desc,
.ng-modal-unified-card.cp-dock-modal .ng-missions-hint,
.ng-modal-unified-card.cp-dock-modal .ng-missions-locked-notice,
.ng-modal-unified-card.cp-dock-modal .ng-missions-xp-info,
.ng-modal-unified-card.cp-dock-modal .ng-missions-reward-res,
.ng-modal-unified-card.cp-dock-modal .ng-msg-empty,
.ng-modal-unified-card.cp-dock-modal .ng-artifact-card__desc,
.ng-modal-unified-card.cp-dock-modal .ng-artifact-card__progress-text {
	color: var(--cyberpunk-text);
}

/* Hangar-Voraussetzungen: Neon-Pink statt Modal-Span-Default */
.ng-modal-unified-card.cp-dock-modal .ng-tile-hangar .ng-tile-locked-overlay__reqs,
.ng-modal-unified-card.cp-dock-modal .ng-tile-hangar .ng-tile-locked-overlay__reqs span {
	color: #ff2ec8;
	text-shadow:
		0 0 1px #000,
		1px 0 0 #000,
		-1px 0 0 #000,
		0 1px 0 #000,
		0 -1px 0 #000,
		1px 1px 0 #000,
		-1px -1px 0 #000;
}

.ng-modal-unified-card.cp-dock-modal th,
.ng-modal-unified-card.cp-dock-modal .ng-widget-title,
.ng-modal-unified-card.cp-dock-modal h3,
.ng-modal-unified-card.cp-dock-modal .ng-missions-entry-title {
	color: var(--cyberpunk-text-bright);
}

.ng-modal-unified-card.cp-dock-modal .ng-widget-title__link {
	color: var(--cyberpunk-muted);
}

.ng-modal-unified-card.cp-dock-modal .ng-widget-title__link.is-active,
.ng-modal-unified-card.cp-dock-modal .ng-widget-title__link:hover {
	color: var(--cyberpunk-primary);
}

.ng-modal-unified-card.cp-dock-modal .ng-toplist-alliance-tag {
	color: var(--cyberpunk-primary);
}

.ng-modal-unified-card.cp-dock-modal i[class^="ri-"],
.ng-modal-unified-card.cp-dock-modal i[class*=" ri-"] {
	color: inherit;
}

.ng-modal-unified-card.cp-dock-modal .ui-btn:not(.ng-missions-claim-btn),
.ng-modal-unified-card.cp-dock-modal .ng-button:not(.ng-button-primary),
.ng-modal-unified-card.cp-dock-modal .ng-missions-tab:not(.is-active) {
	color: var(--cyberpunk-text);
	border-color: var(--cyberpunk-border-dim);
	background: rgba(0, 0, 0, 0.28);
}

.ng-modal-unified-card.cp-dock-modal .ui-btn:not(.ng-missions-claim-btn):hover,
.ng-modal-unified-card.cp-dock-modal .ng-button:not(.ng-button-primary):hover,
.ng-modal-unified-card.cp-dock-modal .ng-missions-tab:not(.is-active):hover {
	color: var(--cyberpunk-primary-bright);
	border-color: var(--cyberpunk-primary);
}

.ng-modal-unified-card.cp-dock-modal .ng-button-primary,
.ng-modal-unified-card.cp-dock-modal .ng-button-small.ng-button-primary,
.ng-modal-unified-card.cp-dock-modal .ng-missions-tab.is-active {
	color: var(--cyberpunk-text-on-primary);
	background: var(--cyberpunk-primary);
	border-color: var(--cyberpunk-primary);
}

/* Claim-Button: vollstaendiger Button-Chrome (ui-btn hat keinen globalen Base-Style;
   ui-btn-ghost wuerde sonst nur Farbe setzen und Abholen unsichtbar/flach lassen). */
.ng-modal-unified-card.cp-dock-modal .ui-btn.ui-btn-ghost.ng-missions-claim-btn,
.ng-modal-unified-card.cp-dock-modal .ng-missions-claim-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	margin: 0;
	padding: 6px 14px;
	min-height: 2rem;
	border: 1px solid var(--cyberpunk-primary);
	border-radius: 0;
	background: var(--cyberpunk-primary);
	color: var(--cyberpunk-text-on-primary);
	font-family: var(--cyberpunk-font, "Rajdhani", sans-serif);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
}

.ng-modal-unified-card.cp-dock-modal .ui-btn.ui-btn-ghost.ng-missions-claim-btn:hover,
.ng-modal-unified-card.cp-dock-modal .ui-btn.ui-btn-ghost.ng-missions-claim-btn:focus-visible,
.ng-modal-unified-card.cp-dock-modal .ng-missions-claim-btn:hover,
.ng-modal-unified-card.cp-dock-modal .ng-missions-claim-btn:focus-visible {
	outline: none;
	background: var(--cyberpunk-primary-bright);
	border-color: var(--cyberpunk-primary-bright);
	color: var(--cyberpunk-text-on-primary);
}

.ng-modal-unified-card.cp-dock-modal input,
.ng-modal-unified-card.cp-dock-modal textarea,
.ng-modal-unified-card.cp-dock-modal .ng-input,
.ng-modal-unified-card.cp-dock-modal .ng-textarea {
	color: var(--cyberpunk-text-bright);
	border-color: var(--cyberpunk-border-dim);
	background: rgba(0, 0, 0, 0.35);
}

.ng-modal-unified-card.cp-dock-modal .ng-info-box {
	position: relative;
	overflow: hidden;
	border-radius: 0;
	border-color: var(--cyberpunk-border-dim);
	background: rgba(220, 254, 94, 0.06);
	isolation: isolate;
}

/* Horizontale Scan-Linie (oben→unten), analog Breach scan-beam */
.ng-modal-unified-card.cp-dock-modal .ng-info-box::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--cyberpunk-primary) 18%,
		var(--cyberpunk-primary-bright) 50%,
		var(--cyberpunk-primary) 82%,
		transparent 100%
	);
	box-shadow: 0 0 10px var(--cyberpunk-primary-glow),
		0 0 4px var(--cyberpunk-primary);
	opacity: 0.85;
	animation: cpDockInfoBoxScanLine 5.5s linear infinite;
}

@keyframes cpDockInfoBoxScanLine {
	0% {
		top: 0;
	}
	100% {
		top: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ng-modal-unified-card.cp-dock-modal .ng-info-box::after {
		animation: none;
		opacity: 0;
	}
}

.ng-modal-unified-card.cp-dock-modal .ng-alliance-tier-badge,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-tier-badge[data-tier] {
	border: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-form-section {
	background: transparent;
	border: none;
	box-shadow: none;
}

/*
 * Allianz-Gruenden: Label+Input lagen inline in text-align:center.
 * Unterschiedliche Labelbreiten (TAG vs NAME) verschieben die Inputs
 * horizontal – deshalb Spaltenlayout mit zentriertem, fester Inputbreite.
 */
.ng-modal-unified-card.cp-dock-modal .ng-alliance-content .ng-form-section .ng-form-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.ng-modal-unified-card.cp-dock-modal .ng-alliance-content .ng-form-section .ng-form-group > label {
	display: block;
	width: 100%;
	max-width: 20rem;
	text-align: center;
}

.ng-modal-unified-card.cp-dock-modal .ng-alliance-content .ng-form-section .ng-form-group > .ng-input {
	display: block;
	width: 20rem;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
}

.ng-modal-unified-card.cp-dock-modal .ng-table-container,
.ng-modal-unified-card.cp-dock-modal .ng-data-table,
.ng-modal-unified-card.cp-dock-modal .ng-data-table th,
.ng-modal-unified-card.cp-dock-modal .ng-data-table td,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-content .ng-data-table,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-content .ng-data-table th,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-content .ng-data-table td,
.ng-modal-unified-card.cp-dock-modal .ng-coord-table,
.ng-modal-unified-card.cp-dock-modal .ng-coord-table th,
.ng-modal-unified-card.cp-dock-modal .ng-coord-table td,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table th,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table td,
.ng-modal-unified-card.cp-dock-modal .ng-goal-table,
.ng-modal-unified-card.cp-dock-modal .ng-goal-table th,
.ng-modal-unified-card.cp-dock-modal .ng-goal-table td {
	background: transparent;
	border: none;
	border-bottom: none;
	box-shadow: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-alliance-content .ng-data-table tbody tr:hover,
.ng-modal-unified-card.cp-dock-modal .ng-data-table tbody tr:hover,
.ng-modal-unified-card.cp-dock-modal .ng-coord-table tbody tr:hover,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table tbody tr:hover,
.ng-modal-unified-card.cp-dock-modal .ng-goal-table tbody tr:hover,
.ng-modal-unified-card.cp-dock-modal tr.ng-highlight-row,
.ng-modal-unified-card.cp-dock-modal .ng-data-table tr.ng-highlight-row,
.ng-modal-unified-card.cp-dock-modal .ng-coord-table tr.ng-highlight-row,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table tr.ng-highlight-row {
	background: transparent;
}

/*
 * Rechter Fremd-Streifen: Scrollbar-Gutter neben dem Neon-Rahmen.
 * Ausblenden – Scrollen bleibt per Rad/Touch erhalten.
 */
.ng-modal-unified-card.cp-dock-modal .ng-modal-body,
.ng-modal-unified-card.cp-dock-modal .ng-modal-unified-body {
	scrollbar-width: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-modal-body::-webkit-scrollbar,
.ng-modal-unified-card.cp-dock-modal .ng-modal-unified-body::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* ---- Allianz: Woechentliches Megaprojekt (Goal-Widget) ---- */
.ng-modal-unified-card.cp-dock-modal .ng-goal-widget {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 18px 16px;
	margin-bottom: 12px;
	border-radius: 0;
	border: 1px solid var(--cyberpunk-primary);
	background: rgba(220, 254, 94, 0.06);
	box-shadow: none;
	font-family: var(--cyberpunk-font);
	color: var(--cyberpunk-text);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-widget:hover {
	border-color: var(--cyberpunk-primary-bright);
	box-shadow: 0 0 12px var(--cyberpunk-primary-glow-soft);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-widget::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--cyberpunk-primary) 18%,
		var(--cyberpunk-primary-bright) 50%,
		var(--cyberpunk-primary) 82%,
		transparent 100%
	);
	box-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
	opacity: 0.7;
	animation: cpDockInfoBoxScanLine 5.5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.ng-modal-unified-card.cp-dock-modal .ng-goal-widget::after {
		animation: none;
		opacity: 0;
	}
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-title {
	color: var(--cyberpunk-primary);
	font-family: var(--cyberpunk-font);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-title i,
.ng-modal-unified-card.cp-dock-modal .ng-goal-info-btn,
.ng-modal-unified-card.cp-dock-modal .ng-goal-info-btn:hover {
	color: var(--cyberpunk-primary);
	background: transparent;
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-timer,
.ng-modal-unified-card.cp-dock-modal .ng-goal-progress-label,
.ng-modal-unified-card.cp-dock-modal .ng-goal-my-contrib,
.ng-modal-unified-card.cp-dock-modal .ng-goal-lb-title,
.ng-modal-unified-card.cp-dock-modal .ng-goal-loading {
	color: var(--cyberpunk-muted);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-my-contrib strong {
	color: var(--cyberpunk-text-bright);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-progress-bar {
	height: 14px;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--cyberpunk-border-dim);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-progress-fill {
	border-radius: 0;
	background: var(--cyberpunk-primary);
	box-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-progress-fill.is-complete {
	background: var(--cyberpunk-secondary);
	box-shadow: 0 0 8px var(--cyberpunk-secondary-glow);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-donate-form .ng-button,
.ng-modal-unified-card.cp-dock-modal .ng-goal-donate-form .ng-button-primary {
	border-radius: 0;
	border-color: var(--cyberpunk-primary);
	background: rgba(220, 254, 94, 0.12);
	color: var(--cyberpunk-primary-bright);
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-donate-form .ng-button:hover,
.ng-modal-unified-card.cp-dock-modal .ng-goal-donate-form .ng-button-primary:hover {
	border-color: var(--cyberpunk-primary-bright);
	background: rgba(220, 254, 94, 0.22);
	color: var(--cyberpunk-primary-bright);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-complete-msg {
	border-radius: 0;
	border: 1px solid var(--cyberpunk-secondary-dim);
	background: rgba(8, 220, 172, 0.08);
	color: var(--cyberpunk-secondary);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-top3 td {
	color: var(--cyberpunk-primary);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-leaderboard {
	border-top: 1px solid var(--cyberpunk-border-dim);
}

.ng-modal-unified-card.cp-dock-modal .ng-goal-header {
	border-bottom: 1px solid var(--cyberpunk-border-dim);
}

.ng-modal-unified-card.cp-dock-modal .ng-stat-item,
.ng-modal-unified-card.cp-dock-modal .ng-stat-item-members,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table thead,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table tbody,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table tr,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table th,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-members-table td,
.ng-modal-unified-card.cp-dock-modal .ng-alliance-member-cell {
	background: transparent;
	background-image: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.ng-modal-unified-card.cp-dock-modal .ng-coord-table-header,
.ng-modal-unified-card.cp-dock-modal .ng-coord-header-row th {
	border-bottom: 1px solid var(--cyberpunk-border-dim);
	color: var(--cyberpunk-primary);
	background: transparent;
}

/* Avatare: kein Legacy-Blau-Rand */
.ng-modal-unified-card.cp-dock-modal .ng-player-avatar,
.ng-modal-unified-card.cp-dock-modal .ng-player-avatar--lg,
.ng-modal-unified-card.cp-dock-modal .ng-player-avatar--md {
	border: 1px solid var(--cyberpunk-border-dim);
	box-shadow: none;
}

/* ---- Nachrichten-Header: Titel schmal, Tabs direkt daneben ---- */
.ng-modal-unified-card.cp-dock-modal:has(.ng-msg-tabs) .ng-modal-title {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	text-align: left;
	padding: 0 16px 0 8px;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-tabs {
	flex: 1 1 auto;
	justify-content: flex-start;
	align-items: center;
	gap: 6px;
	min-width: 0;
	/* Platz fuer absolut positionierten Close-Button */
	margin: 0 56px 0 0;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-tab {
	border-radius: 0;
	color: var(--cyberpunk-muted);
	border: 1px solid transparent;
	background: transparent;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-tab:hover {
	color: var(--cyberpunk-primary-bright);
	border-color: var(--cyberpunk-border-dim);
	background: rgba(220, 254, 94, 0.06);
}

/* ---- Inhalts-Akzente: Nachrichten / Einstellungen / Allianz / Ränge ---- */
.ng-modal-unified-card.cp-dock-modal .ng-msg-tab.is-active,
.ng-modal-unified-card.cp-dock-modal .ng-msg-tabs .is-active {
	color: var(--cyberpunk-primary);
	border-color: var(--cyberpunk-primary);
	background: rgba(220, 254, 94, 0.1);
	box-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

/* Pref-Tabs: Legacy-Blau (reloaded Sci-Fi-Segment) → Neon-Gelb */
.ng-modal-unified-card.cp-dock-modal .ng-modal-header-row .ng-pref-tabs,
.ng-modal-unified-card.cp-dock-modal .ng-modal-unified-header .ng-pref-tabs,
.ng-modal-unified-card.cp-dock-modal .ng-pref-tabs {
	flex: 1 1 auto;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	min-width: 0;
	margin: 0 56px 0 0;
	border: 1px solid var(--cyberpunk-border-dim);
	border-radius: 0;
	background: rgba(10, 12, 16, 0.72);
	box-shadow: none;
	overflow: hidden;
}

.ng-modal-unified-card.cp-dock-modal .ng-modal-header-row .ng-pref-tab,
.ng-modal-unified-card.cp-dock-modal .ng-modal-unified-header .ng-pref-tab,
.ng-modal-unified-card.cp-dock-modal .ng-pref-tab {
	border-radius: 0;
	color: var(--cyberpunk-muted);
	border: none;
	border-left: 1px solid transparent;
	background: transparent;
	text-shadow: none;
	box-shadow: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-modal-header-row .ng-pref-tab + .ng-pref-tab,
.ng-modal-unified-card.cp-dock-modal .ng-modal-unified-header .ng-pref-tab + .ng-pref-tab,
.ng-modal-unified-card.cp-dock-modal .ng-pref-tab + .ng-pref-tab {
	border-left: 1px solid var(--cyberpunk-border-dim);
}

.ng-modal-unified-card.cp-dock-modal .ng-modal-header-row .ng-pref-tab:hover,
.ng-modal-unified-card.cp-dock-modal .ng-modal-unified-header .ng-pref-tab:hover,
.ng-modal-unified-card.cp-dock-modal .ng-pref-tab:hover {
	color: var(--cyberpunk-primary-bright);
	background: rgba(220, 254, 94, 0.06);
	text-shadow: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-modal-header-row .ng-pref-tab.is-active,
.ng-modal-unified-card.cp-dock-modal .ng-modal-unified-header .ng-pref-tab.is-active,
.ng-modal-unified-card.cp-dock-modal .ng-pref-tab.is-active,
.ng-modal-unified-card.cp-dock-modal .ng-pref-tabs .is-active {
	color: var(--cyberpunk-primary);
	background: rgba(220, 254, 94, 0.12);
	border-color: transparent;
	box-shadow: none;
	text-shadow: none;
}

.ng-modal-unified-card.cp-dock-modal:has(.ng-pref-tabs) .ng-modal-title {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	text-align: left;
	padding: 0 16px 0 8px;
}

/* Game-Info / Einstellungen-Body: kein Kaltblau, Cyberpunk-Gelb-Familie */
.ng-modal-unified-card.cp-dock-modal .ng-modal-body,
.ng-modal-unified-card.cp-dock-modal .ng-modal-unified-body {
	color: var(--cyberpunk-tertiary-ink);
	background: transparent;
}

.ng-modal-unified-card.cp-dock-modal .ng-game-info-modal,
.ng-modal-unified-card.cp-dock-modal .ng-info-panel,
.ng-modal-unified-card.cp-dock-modal .ng-info-section,
.ng-modal-unified-card.cp-dock-modal .ng-preference-sections {
	color: var(--cyberpunk-tertiary-ink);
	background: transparent;
}

.ng-modal-unified-card.cp-dock-modal .ng-info-tabs {
	border-right-color: var(--cyberpunk-border-dim);
	background: transparent;
}

.ng-modal-unified-card.cp-dock-modal .ng-info-tab {
	color: var(--cyberpunk-tertiary-ink);
	border-left-color: transparent;
	background: transparent;
	border-radius: 0;
}

.ng-modal-unified-card.cp-dock-modal .ng-info-tab:hover {
	color: var(--cyberpunk-primary-bright);
	background: rgba(220, 254, 94, 0.06);
}

.ng-modal-unified-card.cp-dock-modal .ng-info-tab.is-active {
	color: var(--cyberpunk-primary);
	border-left-color: var(--cyberpunk-primary);
	background: rgba(220, 254, 94, 0.1);
}

.ng-modal-unified-card.cp-dock-modal .ng-info-h3 {
	color: var(--cyberpunk-primary);
	border-bottom-color: var(--cyberpunk-border-dim);
	text-shadow: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-info-note,
.ng-modal-unified-card.cp-dock-modal .ng-info-list li,
.ng-modal-unified-card.cp-dock-modal .ng-info-tbl td,
.ng-modal-unified-card.cp-dock-modal .ng-info-tbl th,
.ng-modal-unified-card.cp-dock-modal .ng-info-panel p,
.ng-modal-unified-card.cp-dock-modal .ng-info-section p {
	color: var(--cyberpunk-tertiary-ink);
}

.ng-modal-unified-card.cp-dock-modal .ng-info-tbl th {
	color: var(--cyberpunk-muted);
	border-bottom-color: var(--cyberpunk-border-dim);
}

.ng-modal-unified-card.cp-dock-modal .ng-info-tbl td {
	border-bottom-color: color-mix(in srgb, var(--cyberpunk-tertiary) 35%, transparent);
}

.ng-modal-unified-card.cp-dock-modal .ng-info-tbl td:first-child {
	color: var(--cyberpunk-muted);
}

.ng-modal-unified-card.cp-dock-modal .ng-info-tbl tbody tr:hover td {
	background: rgba(220, 254, 94, 0.04);
}

.ng-modal-unified-card.cp-dock-modal .ng-info-formula {
	color: var(--cyberpunk-text-bright);
	background: rgba(56, 63, 28, 0.35);
	border: 1px solid var(--cyberpunk-border-dim);
	border-radius: 0;
}

.ng-modal-unified-card.cp-dock-modal .ng-info-list li::before {
	color: var(--cyberpunk-primary);
}

.ng-modal-unified-card.cp-dock-modal .ng-modal-alien-rail {
	background: linear-gradient(
		180deg,
		rgba(220, 254, 94, 0.08),
		rgba(14, 18, 12, 0.55)
	);
	border-right-color: var(--cyberpunk-border-dim);
}

.ng-modal-unified-card.cp-dock-modal .ng-modal-alien-rail__stream,
.ng-modal-unified-card.cp-dock-modal .ng-modal-alien-rail .landing-login-terminal__alien-script {
	color: var(--cyberpunk-tertiary-ink);
	text-shadow: none;
}

/* Pref-Formulare / Buttons im Dock-Modal */
.ng-modal-unified-card.cp-dock-modal .ng-pref-block.ng-widget,
.ng-modal-unified-card.cp-dock-modal .ng-pref-inline,
.ng-modal-unified-card.cp-dock-modal .ng-inline-muted {
	background: rgba(56, 63, 28, 0.22);
	border-color: var(--cyberpunk-border-dim);
	border-radius: 0;
	color: var(--cyberpunk-tertiary-ink);
}

.ng-modal-unified-card.cp-dock-modal .ng-pref-form label,
.ng-modal-unified-card.cp-dock-modal .ng-pref-form .ng-inline-muted {
	color: var(--cyberpunk-tertiary-ink);
}

.ng-modal-unified-card.cp-dock-modal .ng-pref-form .ng-input,
.ng-modal-unified-card.cp-dock-modal .ng-pref-form .ng-textarea,
.ng-modal-unified-card.cp-dock-modal .ng-input,
.ng-modal-unified-card.cp-dock-modal .ng-textarea,
.ng-modal-unified-card.cp-dock-modal select {
	color: var(--cyberpunk-muted);
	background: rgba(14, 18, 12, 0.72);
	border-color: var(--cyberpunk-border-dim);
	border-radius: 0;
}

.ng-modal-unified-card.cp-dock-modal .ui-btn,
.ng-modal-unified-card.cp-dock-modal .ng-button,
.ng-modal-unified-card.cp-dock-modal .ui-btn.ui-btn-ghost {
	color: var(--cyberpunk-primary);
	border-color: var(--cyberpunk-border-dim);
	background: rgba(56, 63, 28, 0.4);
	box-shadow: none;
	text-shadow: none;
}

.ng-modal-unified-card.cp-dock-modal .ui-btn:hover,
.ng-modal-unified-card.cp-dock-modal .ng-button:hover,
.ng-modal-unified-card.cp-dock-modal .ui-btn.ui-btn-ghost:hover {
	color: var(--cyberpunk-primary-bright);
	border-color: var(--cyberpunk-primary);
	background: rgba(220, 254, 94, 0.1);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-tab-compose.is-active,
.ng-modal-unified-card.cp-dock-modal .ng-msg-tab-combat.is-active {
	color: var(--cyberpunk-primary);
	border-color: var(--cyberpunk-primary);
	background: rgba(220, 254, 94, 0.1);
}

/* Legacy .ng-modal-large .ng-modal-body setzt width:max-content –
   Dock-Bodies muessen die volle Card-Breite nutzen. */
.ng-modal-unified-card.cp-dock-modal .ng-modal-body,
.ng-modal-unified-card.cp-dock-modal .ng-modal-unified-body {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ---- Nachrichten: Verfassen (zentriert + Neon-Felder) ---- */
.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-form {
	width: 100%;
	max-width: 40rem;
	margin: 0 auto;
	align-items: stretch;
	justify-content: flex-start;
	gap: 16px;
	box-sizing: border-box;
	padding: 4px 0 8px;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-field {
	width: 100%;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-label {
	color: var(--cyberpunk-primary);
	font-family: var(--cyberpunk-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
}

.ng-modal-unified-card.cp-dock-modal .ng-recipient-wrap {
	width: 100%;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-input,
.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-textarea {
	width: 100%;
	border-radius: 0;
	/* Kein clip-path: input/textarea unterstuetzen keine ::before-Stroke-
	   Pseudos; Clip wuerde den sichtbaren Border an den Schraegen abschneiden. */
	border: 1px solid var(--cyberpunk-border);
	background: rgba(0, 0, 0, 0.45);
	color: var(--cyberpunk-text-bright);
	font-family: var(--cyberpunk-font);
	font-size: 0.95rem;
	box-shadow: inset 0 0 20px rgba(220, 254, 94, 0.05);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-input::placeholder,
.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-textarea::placeholder {
	color: var(--cyberpunk-muted);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-input:focus,
.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-textarea:focus {
	border-color: var(--cyberpunk-primary);
	box-shadow: 0 0 12px var(--cyberpunk-primary-glow-soft),
		inset 0 0 18px rgba(220, 254, 94, 0.06);
	outline: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-textarea {
	min-height: 10rem;
	resize: vertical;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin-top: 4px;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-actions .ui-btn {
	--cyberpunk-cut: 8px;
	--cyberpunk-stroke: 3px;
	/* Innenschräge so, dass die Stroke-Dicke auf der Diagonale ≈ Stroke auf Achsen ist */
	--cp-inner-cut: calc(var(--cyberpunk-cut) - (2 - 1.41421356237) * var(--cyberpunk-stroke));
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: var(--cyberpunk-bg-panel-solid);

	position: relative;
	isolation: isolate;
	min-width: 9.5rem;
	min-height: 2.5rem;
	padding: 0.55rem 1.25rem;
	border: none;
	border-radius: 0;
	background: var(--cp-stroke-color);
	color: var(--cyberpunk-text);
	font-family: var(--cyberpunk-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	clip-path: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);
	box-shadow: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-actions .ui-btn::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background: var(--cp-fill);
	clip-path: polygon(
		0 var(--cp-inner-cut),
		var(--cp-inner-cut) 0,
		100% 0,
		100% calc(100% - var(--cp-inner-cut)),
		calc(100% - var(--cp-inner-cut)) 100%,
		0 100%
	);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-actions .ui-btn > * {
	position: relative;
	z-index: 1;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-actions .ui-btn:hover {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: color-mix(in srgb, var(--cyberpunk-bg-panel-solid) 88%, var(--cyberpunk-primary) 12%);
	color: var(--cyberpunk-primary-bright);
	background: var(--cyberpunk-primary);
}

/* Primary-CTA: Neon-Stroke + opakes getoentes Fill (Alpha wuerde den Stroke durchscheinen lassen) */
.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-actions #ng-msg-send-btn {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: color-mix(in srgb, var(--cyberpunk-bg-panel-solid) 78%, var(--cyberpunk-primary) 22%);
	color: var(--cyberpunk-primary-bright);
	background: var(--cyberpunk-primary);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-actions #ng-msg-send-btn:hover {
	--cp-stroke-color: var(--cyberpunk-primary-bright);
	--cp-fill: color-mix(in srgb, var(--cyberpunk-bg-panel-solid) 65%, var(--cyberpunk-primary) 35%);
	color: var(--cyberpunk-primary-bright);
	background: var(--cyberpunk-primary-bright);
	filter: drop-shadow(0 0 10px var(--cyberpunk-primary-glow-soft));
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-compose-status {
	border-radius: 0;
	border: 1px solid var(--cyberpunk-border-dim);
	background: rgba(220, 254, 94, 0.06);
	color: var(--cyberpunk-text);
	text-align: center;
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-selected-player {
	border-radius: 0;
	border: 1px solid var(--cyberpunk-border);
	background: rgba(220, 254, 94, 0.08);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-selected-name {
	color: var(--cyberpunk-text-bright);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-remove-recipient {
	color: var(--cyberpunk-muted);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-remove-recipient:hover {
	color: var(--cyberpunk-danger);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-recipient-dropdown {
	border-radius: 0;
	border: 1px solid var(--cyberpunk-border);
	background: var(--cyberpunk-bg-panel-solid);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-dropdown-item {
	border-radius: 0;
	color: var(--cyberpunk-text);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-dropdown-item:hover {
	background: rgba(220, 254, 94, 0.1);
	color: var(--cyberpunk-primary-bright);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-dropdown-group {
	color: var(--cyberpunk-muted);
	border-top-color: var(--cyberpunk-border-dim);
}

.ng-modal-unified-card.cp-dock-modal .ng-msg-tag {
	color: var(--cyberpunk-muted);
}

.ng-modal-unified-card.cp-dock-modal a {
	color: var(--cyberpunk-primary);
}

.ng-modal-unified-card.cp-dock-modal a:hover {
	color: var(--cyberpunk-primary-bright);
}

/* ---- Beförderung / Artefakt-Labor / Stadt-Switcher: Viewport H+V zentriert ----
   Dock-Default ist flex-start; Ausnahme fuer diese Modals
   (Portrait-Stretch wird in reloaded.css am Quell-Selektor ausgeschlossen). */
.ng-modal-unified-backdrop.is-open.ng-modal-backdrop--dock:has(.ng-levelup-modal),
.ng-modal-unified-backdrop.is-open.ng-modal-backdrop--dock:has(.ng-artifacts-lab),
.ng-modal-unified-backdrop.is-open.ng-modal-backdrop--dock:has(.ng-city-modal),
.ng-modal-backdrop.ng-modal-backdrop--dock:has(.ng-levelup-modal),
.ng-modal-backdrop.ng-modal-backdrop--dock:has(.ng-artifacts-lab),
.ng-modal-backdrop.ng-modal-backdrop--dock:has(.ng-city-modal) {
	align-items: center;
	justify-content: center;
}

.ng-modal-unified-backdrop.is-open.ng-modal-backdrop--dock > .ng-modal-unified-card.cp-dock-modal:has(.ng-levelup-modal),
.ng-modal-unified-backdrop.is-open.ng-modal-backdrop--dock > .ng-modal-unified-card.cp-dock-modal:has(.ng-artifacts-lab),
.ng-modal-unified-backdrop.is-open.ng-modal-backdrop--dock > .ng-modal-unified-card.cp-dock-modal.ng-city-modal,
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-unified-card.cp-dock-modal:has(.ng-levelup-modal),
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-unified-card.cp-dock-modal:has(.ng-artifacts-lab),
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-unified-card.cp-dock-modal.ng-city-modal,
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock:has(.ng-levelup-modal),
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock:has(.ng-artifacts-lab),
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock.ng-city-modal {
	align-self: center;
	margin: auto;
	height: auto;
	min-height: 0;
}

.ng-modal-unified-card.cp-dock-modal:has(.ng-levelup-modal) .ng-modal-body,
.ng-modal-unified-card.cp-dock-modal:has(.ng-levelup-modal) .ng-modal-unified-body {
	display: flex;
	justify-content: stretch;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/* Kein Body-Padding: Glow/Sterne sollen bis an den Body-Rand reichen.
	   Innenabstand liegt auf .ng-levelup-modal. */
	padding: 0;
	overflow: hidden;
	position: relative;
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	min-height: 100%;
	height: 100%;
	margin: 0;
	padding: 32px 28px 28px;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--cyberpunk-font);
	color: var(--cyberpunk-text);
	overflow: hidden;
}

/*
 * Puls-Glow fuellt die komplette Levelup-Flaeche (= Body).
 * Frueher: max-width 28rem + Body-Padding → sichtbare Luecken oben/unten;
 * inset:-40px wurde von overflow:hidden am Modal abgeschnitten.
 */
.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__glow {
	inset: 0;
	background: radial-gradient(
		ellipse 90% 80% at 50% 45%,
		rgba(220, 254, 94, 0.3) 0%,
		rgba(220, 254, 94, 0.14) 42%,
		rgba(220, 254, 94, 0.04) 72%,
		rgba(220, 254, 94, 0) 100%
	);
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__stars {
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 15% 20%, rgba(220, 254, 94, 0.75), transparent),
		radial-gradient(1px 1px at 75% 30%, rgba(224, 255, 91, 0.55), transparent),
		radial-gradient(1.5px 1.5px at 45% 80%, rgba(220, 254, 94, 0.65), transparent),
		radial-gradient(1px 1px at 85% 70%, rgba(156, 172, 132, 0.55), transparent),
		radial-gradient(1px 1px at 25% 60%, rgba(220, 254, 94, 0.5), transparent);
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__rank {
	--cyberpunk-cut: 12px;
	width: 6.5rem;
	height: 6.5rem;
	border-radius: 0;
	border: none;
	background: var(--cyberpunk-primary);
	clip-path: var(--cyberpunk-clip-cut);
	box-shadow: 0 0 28px var(--cyberpunk-primary-glow),
		0 0 56px var(--cyberpunk-primary-glow-soft);
	isolation: isolate;
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__rank::before {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: 0;
	background: linear-gradient(145deg, rgba(16, 20, 28, 0.96), rgba(10, 12, 16, 0.98));
	clip-path: var(--cyberpunk-clip-cut);
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__level-num {
	position: relative;
	z-index: 1;
	color: var(--cyberpunk-primary-bright);
	text-shadow: 0 0 18px var(--cyberpunk-primary-glow);
	font-family: var(--cyberpunk-font);
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__title {
	color: var(--cyberpunk-primary);
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__subtitle {
	color: var(--cyberpunk-text-bright);
}

/* Skill-Punkt-Badge: Neon-Schraegen via SVG-Stroke (folgt 45°-Kanten). */
.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__sp {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--cyberpunk-text-bright);
	box-shadow: none;
	clip-path: none;
	overflow: visible;
	padding: 10px 20px;
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__sp-frame {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
	pointer-events: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__sp-frame-poly {
	fill: rgba(10, 12, 16, 0.92);
	stroke: var(--cyberpunk-primary);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: miter;
	stroke-linecap: square;
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__sp > *:not(.ng-levelup-modal__sp-frame) {
	position: relative;
	z-index: 1;
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__sp-icon {
	--gi-size: 3.25rem;
	--gi-color: var(--cyberpunk-primary);
	filter: drop-shadow(0 0 10px var(--cyberpunk-primary-glow));
}

.ng-modal-unified-card.cp-dock-modal .ng-levelup-modal__next {
	color: var(--cyberpunk-muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- Willkommen-zurück-Assistent (Welcome Digest) ---- */
.ng-modal-unified-card.cp-dock-modal:has(.ng-welcome-digest) .ng-modal-body,
.ng-modal-unified-card.cp-dock-modal:has(.ng-welcome-digest) .ng-modal-unified-body {
	padding: 0;
}

.ng-welcome-digest {
	display: flex;
	flex-direction: column;
	max-height: min(70vh, 560px);
	padding: 18px 20px 16px;
	color: var(--cyberpunk-text, #c8d48a);
	font-family: var(--cyberpunk-font, "Rajdhani", "Segoe UI", sans-serif);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.ng-welcome-digest *,
.ng-welcome-digest *::before,
.ng-welcome-digest *::after {
	font-family: inherit;
}

.ng-welcome-digest__hero {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 10px;
	flex: 0 0 auto;
}

.ng-welcome-digest__toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	flex: 0 0 auto;
}

.ng-welcome-digest__older {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	color: var(--cyberpunk-primary, #DCFE5E);
	font: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ng-welcome-digest__older:hover {
	color: var(--cyberpunk-text-bright, #e8f0b0);
}

.ng-welcome-digest__older:disabled {
	opacity: 0.55;
	cursor: wait;
}

.ng-welcome-digest__older-status {
	font-size: 0.72rem;
	color: var(--cyberpunk-muted, #6a7540);
}

.ng-welcome-digest__scroll {
	flex: 1 1 auto;
	min-height: 0;
	max-height: min(42vh, 360px);
	overflow-y: auto;
	padding-right: 4px;
	margin-bottom: 8px;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 45%, transparent) transparent;
}

.ng-welcome-digest__avatar {
	position: relative;
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
}

.ng-welcome-digest__avatar-ring {
	position: absolute;
	inset: 0;
	border: 0;
	clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
	box-shadow: 0 0 16px color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 25%, transparent);
	pointer-events: none;
}

.ng-welcome-digest__avatar-face {
	position: absolute;
	inset: 8px;
	background:
		radial-gradient(circle at 50% 38%, #4C5625 0%, #2a3014 55%, #14180a 100%);
	clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
}

.ng-welcome-digest__avatar-eye {
	position: absolute;
	top: 38%;
	width: 8px;
	height: 8px;
	background: var(--cyberpunk-primary, #DCFE5E);
	box-shadow: 0 0 8px var(--cyberpunk-primary, #DCFE5E);
}

.ng-welcome-digest__avatar-eye--l { left: 28%; }
.ng-welcome-digest__avatar-eye--r { right: 28%; }

.ng-welcome-digest__avatar-mouth {
	position: absolute;
	left: 32%;
	right: 32%;
	bottom: 28%;
	height: 2px;
	background: color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 70%, transparent);
}

.ng-welcome-digest__greeting {
	margin: 0 0 6px;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--cyberpunk-text-bright, #e8f0b0);
}

.ng-welcome-digest__player {
	font: inherit;
	font-size: inherit;
	font-weight: 600;
	color: var(--cyberpunk-primary, #DCFE5E);
}

.ng-welcome-digest__lede {
	margin: 0;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--cyberpunk-text, #c8d48a);
}

.ng-welcome-digest__section {
	margin: 0 0 12px;
	padding: 8px 10px;
	border: 1px solid color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 22%, transparent);
	background: rgba(20, 24, 12, 0.45);
}

.ng-welcome-digest__section-title {
	margin: 0 0 6px;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cyberpunk-primary, #DCFE5E);
}

.ng-welcome-digest__list {
	margin: 0;
	padding: 0 0 0 1.1em;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
	list-style: disc;
	color: var(--cyberpunk-text-bright, #e8f0b0);
}

.ng-welcome-digest__list > li {
	font: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	margin: 0 0 0.2em;
}

.ng-welcome-digest__item-name {
	font: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.ng-welcome-digest__meta {
	font: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.ng-welcome-digest__time {
	display: inline;
	margin-left: 0.45em;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: inherit;
	font-style: normal;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
	white-space: nowrap;
}

.ng-welcome-digest__list strong {
	font: inherit;
	font-size: inherit;
	font-weight: 600;
	color: inherit;
}

.ng-welcome-digest__subhead {
	list-style: none;
	margin: 0.55em 0 0.15em -1.1em;
	font: inherit;
	font-size: inherit;
	font-weight: 600;
	color: var(--cyberpunk-primary, #DCFE5E);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ng-welcome-digest__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
	flex: 0 0 auto;
}

.ng-welcome-digest__btn {
	--wd-btn-cut: 8px;
	--wd-btn-stroke: 1px;
	appearance: none;
	position: relative;
	isolation: isolate;
	border: 0;
	background: color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 55%, transparent);
	color: var(--cyberpunk-primary, #DCFE5E);
	font: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 14px;
	cursor: pointer;
	clip-path: polygon(
		0 var(--wd-btn-cut),
		var(--wd-btn-cut) 0,
		100% 0,
		100% calc(100% - var(--wd-btn-cut)),
		calc(100% - var(--wd-btn-cut)) 100%,
		0 100%
	);
}

/* Clip-Path-Stroke: Neon-Schraegen sichtbar (border + clip würde sie abschneiden) */
.ng-welcome-digest__btn::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--wd-btn-stroke);
	z-index: -1;
	background: rgba(56, 63, 28, 0.92);
	clip-path: polygon(
		0 calc(var(--wd-btn-cut) - var(--wd-btn-stroke)),
		calc(var(--wd-btn-cut) - var(--wd-btn-stroke)) 0,
		100% 0,
		100% calc(100% - (var(--wd-btn-cut) - var(--wd-btn-stroke))),
		calc(100% - (var(--wd-btn-cut) - var(--wd-btn-stroke))) 100%,
		0 100%
	);
}

.ng-welcome-digest__btn:hover {
	background: color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 75%, transparent);
}

.ng-welcome-digest__btn:hover::before {
	background: rgba(76, 86, 37, 0.95);
}

@media (max-width: 520px) {
	.ng-welcome-digest__hero {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* ---- Stadt-Switcher: inhaltsgross + Cyberpunk-Akzente ---- */
.ng-modal-unified-card.cp-dock-modal.ng-city-modal {
	--cyberpunk-cut: var(--cyberpunk-cut-sm);
	width: max-content;
	max-width: min(20rem, calc(100vw - 32px));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--cyberpunk-primary) 35%, transparent),
		0 0 24px var(--cyberpunk-primary-glow-soft),
		0 12px 40px rgba(0, 0, 0, 0.55);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-modal-unified-title,
.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-modal-title {
	font-size: 0.95rem;
	letter-spacing: 0.16em;
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-modal-unified-title i,
.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-modal-title i {
	color: var(--cyberpunk-primary);
	filter: drop-shadow(0 0 6px var(--cyberpunk-primary-glow-soft));
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-shortcuts {
	border-bottom-color: color-mix(in srgb, var(--cyberpunk-primary) 40%, transparent);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item {
	position: relative;
	clip-path: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 18%, transparent);
	background: rgba(220, 254, 94, 0.03);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item:hover {
	background: rgba(220, 254, 94, 0.1);
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 45%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyberpunk-primary) 25%, transparent);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item.is-active {
	background: rgba(220, 254, 94, 0.14);
	border-color: var(--cyberpunk-primary);
	box-shadow:
		0 0 12px var(--cyberpunk-primary-glow-soft),
		inset 0 0 0 1px color-mix(in srgb, var(--cyberpunk-primary) 40%, transparent);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item-icon {
	clip-path: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);
	background: rgba(220, 254, 94, 0.08);
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 40%, transparent);
	color: var(--cyberpunk-primary);
	box-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item.is-active .ng-city-modal-item-icon {
	background: rgba(220, 254, 94, 0.2);
	border-color: var(--cyberpunk-primary);
	color: var(--cyberpunk-primary-bright);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item-coords {
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.08em;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item-name {
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.7rem;
	color: var(--cyberpunk-text);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item-rename {
	clip-path: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 45%, transparent);
	color: var(--cyberpunk-primary);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item-rename:hover,
.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item-rename:focus-visible {
	background: rgba(220, 254, 94, 0.14);
	border-color: var(--cyberpunk-primary);
	color: var(--cyberpunk-primary-bright);
	box-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

.ng-modal-unified-card.cp-dock-modal.ng-city-modal .ng-city-modal-item-badge {
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.12em;
	color: #111111;
	background: var(--cyberpunk-primary);
	border: 1px solid var(--cyberpunk-primary-bright);
	box-shadow: 0 0 10px var(--cyberpunk-primary-glow-soft);
	clip-path: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);
}

/* ============================================================
   HUD-Panels (.ng-sf-panel / .ng-sf-panel__inner)
   Chrome analog zu .ng-modal / .ng-modal__inner:
   Neon-Stroke am Outer, Scanlines via ::before, Content in __inner.
   ============================================================ */

.ng-sf-panel {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: var(--cyberpunk-bg-panel-solid);
	/* Wie Tile-/Dock-Modal: 3px Neon-Stroke */
	--cyberpunk-stroke: 3px;
	--cyberpunk-cut: var(--cyberpunk-cut-sm);
	/* Clip lokal (nicht --cyberpunk-clip-cut), damit --cyberpunk-cut greift */
	--cp-clip: polygon(
		0 var(--cyberpunk-cut),
		var(--cyberpunk-cut) 0,
		100% 0,
		100% calc(100% - var(--cyberpunk-cut)),
		calc(100% - var(--cyberpunk-cut)) 100%,
		0 100%
	);

	border: none;
	border-radius: 0;
	background: var(--cp-stroke-color);
	clip-path: var(--cp-clip);
	box-shadow: 0 0 18px var(--cyberpunk-primary-glow-soft);
	filter: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	overflow: hidden;
	color: var(--cyberpunk-text);
}

/* Topbar-Compact: etwas schmalerer Stroke */
.ng-hud-topbar .ng-sf-panel,
body.ui-reboot .hud-header > .ui-hud-floating-widget.ng-sf-panel,
.ng-hud-topbar .hud-header > .ui-hud-floating-widget.ng-sf-panel {
	--cyberpunk-stroke: 2px;
	--cyberpunk-cut: 5px;
	background: var(--cp-stroke-color);
	box-shadow: 0 0 12px var(--cyberpunk-primary-glow-soft);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget.ng-sf-panel::before,
.ng-hud-topbar .hud-header > .ui-hud-floating-widget.ng-sf-panel::before {
	content: "";
	display: block;
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	opacity: 1;
	mix-blend-mode: normal;
	background-color: var(--cp-fill);
	background-image: repeating-linear-gradient(
		180deg,
		transparent 0,
		transparent 2px,
		var(--cyberpunk-scanline) 2px,
		var(--cyberpunk-scanline) 3px
	);
	clip-path: var(--cp-clip);
	box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.45);
}

/* Amber-Variante (Sauerstoff / Schnellzugriff): gleiche Geometrie, Primary-Neon */
.ng-sf-panel.ng-sf-panel--amber {
	--cp-stroke-color: var(--cyberpunk-primary);
	box-shadow: 0 0 18px var(--cyberpunk-primary-glow-soft);
}

/* Gefahr: eingehende Angriffe */
.ng-grid-flotten-incoming.ng-sf-panel:has(.ng-flight-list--has-incoming) {
	--cp-stroke-color: var(--cyberpunk-danger);
	box-shadow: 0 0 20px rgba(255, 0, 60, 0.45);
}

/* Dock: kein Clip (Badges bleiben sichtbar), rechteckiger Neon-Rahmen */
.ng-sf-panel.ng-sf-panel--dock,
.ng-hud-bottombar .ng-hud-dock-container.ng-sf-panel {
	--cp-clip: none;
	clip-path: none;
	overflow: visible;
	border-radius: 0;
	background: var(--cp-stroke-color);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--cyberpunk-primary) 55%, transparent),
		0 0 22px var(--cyberpunk-primary-glow-soft);
}

.ng-sf-panel::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: var(--cyberpunk-stroke);
	z-index: 0;
	background-color: var(--cp-fill);
	background-image: repeating-linear-gradient(
		180deg,
		transparent 0,
		transparent 2px,
		var(--cyberpunk-scanline) 2px,
		var(--cyberpunk-scanline) 3px
	);
	clip-path: var(--cp-clip);
	box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.45);
}

.ng-sf-panel.ng-sf-panel--dock::before,
.ng-hud-bottombar .ng-hud-dock-container.ng-sf-panel::before {
	clip-path: none;
}

.ng-sf-panel > *:not(.cp-breach-side-border) {
	position: relative;
	z-index: 1;
}

/* Content-Slot – analog .ng-modal__inner */
.ng-sf-panel__inner {
	margin: 0;
	padding-right: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	font-family: var(--cyberpunk-font);
	color: var(--cyberpunk-text);
}

/* Linke Konsole: Header ohne Hazard-Stripe (Banderole nur noch am Avatar) */
.ng-sf-panel .landing-login-terminal__header,
.ng-sf-panel .ng-left-tabs__header,
.ng-hud-column--left .landing-login-panel.ng-hud-terminal-feed .landing-login-terminal__header {
	position: relative;
	border-bottom: 1px solid var(--cyberpunk-border-dim);
	border-left: none;
	background: rgba(220, 254, 94, 0.06);
	box-shadow: none;
	padding-left: 12px;
}

/* Im Cockpit-Ring: keine schmale Header-Linie / kein Querbalken */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .landing-login-terminal__header,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-left-tabs__header,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-left-tabs .ng-left-tabs__header,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-header-primary {
	border: 0;
	border-bottom: 0;
	box-shadow: none;
	background: transparent;
	animation: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .landing-login-terminal__header::after,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-left-tabs__header::after {
	content: none;
	display: none;
	background: none;
	height: 0;
}

/* CRT-Monitor im Ring: kein Kartenrahmen / keine Radius-Box */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .landing-login-terminal__monitor {
	border: 0;
	border-radius: 0;
	outline: none;
}

.ng-sf-panel .landing-login-terminal__header::before,
.ng-sf-panel .ng-left-tabs__header::before,
.ng-hud-column--left .landing-login-panel.ng-hud-terminal-feed .landing-login-terminal__header::before {
	content: none;
	display: none;
}

/* Widget-Titel (rechte Spalte / Cards) */
.ng-sf-panel .ng-cityview-card-title,
.ng-sf-panel .ng-cityview-card-title > div {
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

.ng-grid-flotten-incoming.ng-sf-panel:has(.ng-flight-list--has-incoming) .ng-cityview-card-title,
.ng-grid-flotten-incoming.ng-sf-panel:has(.ng-flight-list--has-incoming) .ng-cityview-card-title > div {
	color: var(--cyberpunk-danger);
	text-shadow: 0 0 8px rgba(255, 0, 60, 0.45);
}

.ng-sf-panel--right > .ng-sf-panel__inner > .ng-cityview-card-title > div::before,
.ng-sf-panel--right > .ng-sf-panel__inner > .ng-cityview-card-title > div::after {
	color: color-mix(in srgb, var(--cyberpunk-primary) 42%, transparent);
	text-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

/* Alien-Script-Footer der linken Konsole */
.ng-sf-panel .landing-login-terminal__alien-script,
.ng-sf-panel .landing-login-terminal__footer-meta {
	font-family: var(--cyberpunk-font-mono);
	color: var(--cyberpunk-muted);
	letter-spacing: 0.06em;
}

.ng-sf-panel .landing-login-terminal__footer {
	border-top: 1px solid var(--cyberpunk-border-dim);
	background: rgba(220, 254, 94, 0.03);
}

/* Legacy-Cyan-Linie am Header entfernen */
.ng-sf-panel .landing-login-terminal__header::after,
.ng-hud-column--left .landing-login-panel.ng-hud-terminal-feed .landing-login-terminal__header::after {
	content: none;
	display: none;
	background: none;
	animation: none;
}

/* Left-Column-Einheit: Trennlinie unter dem Spielerblock */
.ng-left-column-unit .ng-header-primary {
	border-bottom-color: var(--cyberpunk-border-dim);
}

/* Ressourcen-Labels in Topbar-Panels */
.ng-sf-panel .ui-hud-micro-item .k {
	font-family: var(--cyberpunk-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cyberpunk-muted);
}

.ng-sf-panel .ui-hud-micro-item .v {
	font-family: var(--cyberpunk-font-mono);
	color: var(--cyberpunk-text-bright);
}

.ng-sf-panel .ui-hud-res-meter {
	background: rgba(10, 12, 16, 0.85);
	border: 1px solid var(--cyberpunk-border-dim);
	border-radius: 0;
}

.ng-sf-panel .ui-hud-res-meter-fill {
	/* Flat – keine Farbuebergaenge */
	background: var(--cyberpunk-primary);
	box-shadow: 0 0 8px var(--cyberpunk-primary-glow-soft);
}

/* ============================================================
   Viewport-HUD-Hintergrund (gesamtes Game-Layout)
   body.ui-reboot.ng-shell.ng-game-layout – edge-to-edge,
   ohne aeusseren Neon-Rahmen / ohne Cut-Corners.
   ============================================================ */

body.ui-reboot.ng-shell.ng-game-layout {
	--cp-stroke-color: var(--cyberpunk-primary);
	--cp-fill: #000000;
	/* Tokens bleiben fuer gedockte HUD-Elemente (Atmos-Rail, Side-Border). */
	--cp-frame-gap: 0px;
	--cyberpunk-stroke: 0px;
	--cyberpunk-cut: 0px;
	--cp-inner-cut: 0px;
	--cp-clip: none;
	--cp-clip-inner: none;

	box-sizing: border-box;
	padding: 0;
	background: #000000;
	background-image: none;
	clip-path: none;
	isolation: isolate;
}

/* Kein aeusserer Neon-Stroke mehr. */
body.ui-reboot.ng-shell.ng-game-layout::before {
	content: none;
	display: none;
}

/* Vollflaechige dunkle Fuellung inkl. Scanlines. */
body.ui-reboot.ng-shell.ng-game-layout::after {
	content: "";
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	box-sizing: border-box;
	border: none;
	background-color: var(--cp-fill);
	background-image: repeating-linear-gradient(
		180deg,
		transparent 0,
		transparent 3px,
		var(--cyberpunk-scanline) 3px,
		var(--cyberpunk-scanline) 4px
	);
	clip-path: none;
	box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.45);
}

/* Shell ueber dem Frame-Fill, rechteckig bis zum Viewport-Rand. */
body.ui-reboot.ng-shell.ng-game-layout .ui-shell.ui-shell--modules {
	position: relative;
	z-index: 1;
	height: 100%;
	max-height: 100%;
	width: 100%;
	box-sizing: border-box;
	clip-path: none;
}

/* ============================================================
   Cockpit-Canopy-HUD (Variante B)
   Module im Bedienring ohne eigenen Neon-Chrome.
   ============================================================ */

/* Panel-Chrome im Ring demoten – Inhalt bleibt, kein dritter Rahmen */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-sf-panel,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-sf-panel.ng-sf-panel--left,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-sf-panel.ng-sf-panel--right,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-sf-panel.ng-sf-panel--dock,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-sf-panel.ng-sf-panel--amber {
	--cp-stroke-color: transparent;
	background: transparent;
	clip-path: none;
	box-shadow: none;
	filter: none;
	border: none;
	border-radius: 0;
	overflow: visible;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-sf-panel::before,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-sf-panel::after {
	content: none;
	display: none;
}

/* Gefahr: eingehende Flotten – nur Hairline, kein Panel-Stroke */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-grid-flotten-incoming.ng-sf-panel:has(.ng-flight-list--has-incoming) {
	box-shadow: none;
	border-left: 2px solid var(--cyberpunk-danger);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-sf-panel__inner {
	background: transparent;
	padding-left: 8px;
	padding-right: 8px;
	border: 0;
	box-shadow: none;
}

/* Rechte Widget-Karten: Scroll trotz Ring-Override overflow:visible auf .ng-sf-panel */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-column--right > .ng-hud-widget-card.ng-sf-panel.ng-cityview-card {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-column--right > .ng-hud-widget-card.ng-sf-panel.ng-cityview-card > .ng-sf-panel__inner {
	overflow-x: hidden;
	overflow-y: auto;
	min-height: 0;
}

/* Footer der Konsole: keine Querbalken-Linie im Ring */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .landing-login-terminal__footer {
	border-top: 0;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-left-column-unit > .ng-sf-panel__inner {
	padding: 0;
}

/* Innerer Canopy-Rahmen (Sichtfenster)
   SVG-Stroke-Kontur mit TL/BR-Schraegen (1px, non-scaling-stroke).
   Evenodd mit ic=c-s war unsichtbar: Innen-/Aussendiagonale lagen kollinear. */
.ng-hud-canopy {
	--cp-canopy-inset: 4px;
	--cp-canopy-stroke: 1px;
	--cp-canopy-cut: 48px;
	--cp-canopy-clip: polygon(
		0 var(--cp-canopy-cut),
		var(--cp-canopy-cut) 0,
		100% 0,
		100% calc(100% - var(--cp-canopy-cut)),
		calc(100% - var(--cp-canopy-cut)) 100%,
		0 100%
	);
	visibility: visible;
	pointer-events: none;
}

.ng-hud-canopy > * {
	visibility: visible;
}

svg.ng-hud-canopy__chrome {
	pointer-events: none;
	position: absolute;
	top: var(--cp-canopy-inset);
	left: var(--cp-canopy-inset);
	z-index: 6;
	width: calc(100% - (2 * var(--cp-canopy-inset)));
	height: calc(100% - (2 * var(--cp-canopy-inset)));
	overflow: visible;
	color: var(--cyberpunk-primary);
	fill: none;
	stroke: currentColor;
	background: transparent;
	border: none;
	clip-path: none;
	-webkit-mask: none;
	mask: none;
	filter: none;
}

svg.ng-hud-canopy__chrome .ng-hud-canopy__chrome-path {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--cp-canopy-stroke);
	vector-effect: non-scaling-stroke;
	shape-rendering: geometricPrecision;
}

svg.ng-hud-canopy__chrome::before,
svg.ng-hud-canopy__chrome::after {
	content: none;
	display: none;
}

/* Center-Stage: gleicher Cut, Content bleibt hinter dem Neon-Rahmen */
.ng-hud-canopy .ng-hud-center-stage {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: calc(var(--cp-canopy-inset) + var(--cp-canopy-stroke));
	clip-path: var(--cp-canopy-clip);
	visibility: visible;
	pointer-events: none;
	z-index: 2;
}

.ng-hud-canopy .ng-hud-center-stage > * {
	visibility: visible;
}

/* Galaxy-Canvas: kein Canopy-Border, keine schraege TL-Ecke */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-canopy .ng-hud-center-stage {
	clip-path: none;
	padding: 0;
	border: 0;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-canopy svg.ng-hud-canopy__chrome {
	display: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-galaxy-canvas,
body.ui-reboot.ng-shell.ng-game-layout .ng-galaxy-background {
	border: 0;
	outline: none;
	box-shadow: none;
	clip-path: none;
	border-radius: 0;
}

/* ============================================================
   Cockpit-Atmosphaere (Rails, Ticker, Edge, Ship-Seal)
   ============================================================ */

.ng-hud-overlay {
	position: relative;
	/* drop-shadow auf dem Overlay zeichnet Rechteck-Halos um Content
	   und ueberdeckt die Canopy-/Viewport-Schraegen optisch. */
	filter: none;
}

/* Atmos-Elemente haengen direkt am Overlay (kein inset:0-Wrapper). */
/*
 * HUD-Alien-Rail: gleiche Optik wie Modal (.ng-modal-alien-rail).
 * Position bleibt fixed am Viewport-Rand (Frame-Tokens).
 */
.ng-hud-atmos-rail {
	pointer-events: none;
	position: absolute;
	top: 96px;
	bottom: 64px;
	z-index: 4;
	width: 22px;
	overflow: hidden;
	opacity: 1;
	background: linear-gradient(
		180deg,
		rgba(220, 254, 94, 0.1),
		rgba(2, 4, 8, 0.22)
	);
	border-right: 1px solid var(--cyberpunk-border-dim);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 14%,
		black 86%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 14%,
		black 86%,
		transparent 100%
	);
}

.ng-hud-atmos-rail--left {
	position: absolute;
	left: 0;
}

/* Am Viewport-Rand gedockt (2px Luft). Liegt als body-Kind
   (JS dockHudChromeToFrame), damit Shell-clip-path nicht abschneidet. */
body.ui-reboot.ng-shell.ng-game-layout > .ng-hud-atmos-rail.ng-hud-atmos-rail--left {
	position: fixed;
	left: calc(var(--cp-frame-gap) + var(--cyberpunk-stroke) + 2px);
	top: calc(var(--cp-frame-gap) + var(--cyberpunk-cut) + 56px);
	bottom: calc(var(--cp-frame-gap) + var(--cyberpunk-stroke) + 64px);
	z-index: 6;
}

/*
 * HUD Side-Border (Startseite): gleicher Look wie Modal .cp-breach-side-border,
 * rechts innen am Viewport-Rand.
 */
body.ui-reboot.ng-shell.ng-game-layout > .cp-breach-side-border.cp-breach-side-border--hud {
	position: fixed;
	top: calc(var(--cp-frame-gap) + var(--cyberpunk-cut) + 12px);
	bottom: calc(var(--cp-frame-gap) + var(--cyberpunk-stroke) + 24px);
	right: calc(var(--cp-frame-gap) + var(--cyberpunk-stroke) + 8px);
	left: auto;
	width: 1px;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	background: var(--cyberpunk-primary-bright);
	opacity: 0.5;
	box-shadow: 0 0 4px var(--cyberpunk-primary-glow-soft);
	z-index: 6;
	pointer-events: none;
}

.ng-hud-atmos-rail--right {
	right: 4px;
	border-right: 0;
	border-left: 1px solid var(--cyberpunk-border-dim);
}

/* Stream-Typografie 1:1 wie .ng-modal-alien-rail__stream */
.ng-hud-atmos-rail__stream {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: pre;
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.5em;
	line-height: normal;
	color: rgba(220, 254, 94, 0.48);
	text-shadow:
		0 0 6px var(--cyberpunk-primary-glow),
		0 0 14px var(--cyberpunk-primary-glow-soft);
	animation: ng-modal-alien-scroll 24s linear infinite;
	will-change: transform;
}

.ng-hud-atmos-rail--right .ng-hud-atmos-rail__stream {
	animation-direction: reverse;
}

.ng-hud-atmos-ticker {
	position: absolute;
	left: 28px;
	right: 28px;
	height: 18px;
	margin: 0;
	padding: 0 8px;
	overflow: hidden;
	opacity: 0.5;
	z-index: 1;
}

.ng-hud-atmos-ticker--top {
	top: 4px;
	border: 0;
}

.ng-hud-atmos-ticker--bottom {
	/* Ueber der Bottombar, damit Dock/Badges nicht ueberdeckt werden */
	bottom: 70px;
	border: 0;
}

.ng-hud-atmos-ticker p {
	margin: 0;
	font-family: var(--cyberpunk-font-mono, var(--font-mono, monospace));
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cyberpunk-primary) 75%, #9cac84);
	white-space: nowrap;
	animation: hud-alien-scroll 26s linear infinite;
}

.ng-hud-atmos-ticker--bottom p {
	animation-duration: 32s;
	animation-direction: reverse;
}

/* Rechte Aussenlinie im Ring */
.ng-hud-atmos-edge--right {
	position: absolute;
	top: 88px;
	right: 0;
	bottom: 64px;
	width: 2px;
	background: linear-gradient(
		180deg,
		transparent 0%,
		color-mix(in srgb, var(--cyberpunk-primary) 55%, transparent) 12%,
		color-mix(in srgb, var(--cyberpunk-primary) 85%, transparent) 50%,
		color-mix(in srgb, var(--cyberpunk-primary) 55%, transparent) 88%,
		transparent 100%
	);
	box-shadow: 0 0 10px var(--cyberpunk-primary-glow-soft);
}

/*
 * HUD-Bottombar = gleicher Look wie .ng-modal-unified-footer.cp-breach-footer
 * (QR/Barcode links, Live-Chat-Ticker, Keyhints rechts). Eigene Regeln, weil Modal-Selektoren
 * auf Descendant .cp-breach-footer innerhalb der Card zielen.
 */
.ng-hud-ring .ng-hud-bottombar.cp-breach-footer,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-bottombar.cp-breach-footer,
.ng-hud-bottombar.cp-breach-footer {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 0;
	padding: 6px 14px 8px 8px;
	min-height: 52px;
	width: 100%;
	max-height: none;
	align-self: stretch;
	box-sizing: border-box;
	border: 0;
	border-top: 1px solid var(--cyberpunk-border-dim);
	/* Matrix kommt von .ng-hud-ring::before – hier nur transparent */
	background-color: transparent;
	background-image: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}

.ng-hud-bottombar.cp-breach-footer > .cp-modal-qr-seal--footer {
	position: static;
	top: auto;
	right: auto;
	transform: none;
	z-index: auto;
	flex: 0 0 auto;
	margin: 0;
	order: 0;
	opacity: 0.75;
}

.ng-hud-bottombar.cp-breach-footer > .cp-modal-qr-seal--footer .cp-modal-qr-seal__frame,
.ng-hud-bottombar.cp-breach-footer > .cp-modal-qr-seal--footer .cp-modal-qr-seal__canvas {
	width: 26px;
	height: 26px;
	max-width: 26px;
	max-height: 26px;
}

.ng-hud-bottombar.cp-breach-footer > .cp-modal-qr-seal--footer .cp-modal-qr-seal__frame {
	padding: 0;
	background: transparent;
	clip-path: none;
	box-shadow: none;
	overflow: hidden;
}

.ng-hud-bottombar.cp-breach-footer > .cp-modal-qr-seal--footer .cp-modal-qr-seal__frame::before {
	content: none;
	display: none;
}

.ng-hud-bottombar.cp-breach-footer > .cp-modal-qr-seal--footer .cp-modal-qr-seal__label {
	font-size: 6px;
}

.ng-hud-bottombar.cp-breach-footer > .cp-breach-footer__alien {
	flex: 0 1 33%;
	max-width: 33%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
	font-size: 9px;
	line-height: 1.25;
	letter-spacing: 0.16em;
	word-spacing: 0.3em;
	color: var(--cyberpunk-muted);
	text-shadow: none;
	animation: none;
	user-select: none;
	pointer-events: none;
	order: 2;
}

/* Live-Chat-Ticker belegt den ehemaligen Alien-Mittelbereich der Bottombar */
.ng-hud-bottombar.cp-breach-footer > .ng-live-chat-ticker {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	width: auto;
	align-self: stretch;
	height: 36px;
	min-height: 36px;
	max-height: 36px;
	margin: 0;
	padding: 0 10px;
	order: 2;
	border: 0;
	border-top: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.ng-hud-bottombar.cp-breach-footer > .ng-live-chat-ticker:hover,
.ng-hud-bottombar.cp-breach-footer > .ng-live-chat-ticker:focus-visible {
	border-top: 0;
	background: color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 8%, transparent);
	box-shadow: inset 0 0 18px color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 12%, transparent);
}

.ng-hud-bottombar.cp-breach-footer > .cp-keyhint {
	order: 3;
	flex: 0 0 auto;
	margin-left: auto;
	gap: 12px;
}

/* ============================================================
   Cyberpunk-Barcode (Deko): SVG + Label, wiederverwendbar
   ============================================================ */

.ng-cyber-barcode {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 0 0 auto;
	pointer-events: none;
	user-select: none;
	opacity: 0.85;
	filter: drop-shadow(0 0 2px var(--cyberpunk-primary));
}

.ng-cyber-barcode__svg,
.ng-cyber-barcode > svg {
	display: block;
	width: 72px;
	height: 18px;
	overflow: visible;
}

.ng-cyber-barcode svg rect,
.ng-cyber-barcode__svg rect {
	fill: var(--cyberpunk-primary);
}

.ng-barcode-label {
	margin: 0;
	padding: 0;
	font-family: var(--cyberpunk-font-mono);
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
	color: var(--cyberpunk-primary);
	white-space: nowrap;
}

/* Footer: nach QR (order 0), vor Chat-Ticker */
.ng-hud-bottombar.cp-breach-footer > .ng-cyber-barcode {
	order: 1;
	margin: 0 4px 0 2px;
}

.ng-hud-bottombar.cp-breach-footer > .ng-cyber-barcode .ng-cyber-barcode__svg,
.ng-hud-bottombar.cp-breach-footer > .ng-cyber-barcode > svg {
	width: 64px;
	height: 16px;
}

.ng-hud-bottombar.cp-breach-footer > .ng-cyber-barcode .ng-barcode-label {
	font-size: 7px;
	letter-spacing: 0.18em;
}

.ng-hud-bottombar.cp-breach-footer > .cp-keyhint .cp-keyhint__pair {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ng-hud-bottombar.cp-breach-footer > .cp-keyhint .cp-keyhint__gi {
	--gi-size: 1.15rem;
	opacity: 0.9;
}

.ng-hud-bottombar.cp-breach-footer > .cp-keyhint .cp-keyhint__label {
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

.ng-hud-bottombar.cp-breach-footer > .cp-keyhint .cp-keyhint__key {
	min-width: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	clip-path: none;
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

/* ============================================================
   Game-Layout: Minimal Neon – kein Blau, keine Verlaeufe
   Weiss/Blau/Gruen → Primary; Flat-Hintergruende
   ============================================================ */

body.ui-reboot.ng-shell.ng-game-layout,
body.ui-reboot.ng-shell.ng-landing-page {
	/* Teal/Cyan abschalten – alles auf Neon-Primary */
	--cyberpunk-secondary: var(--cyberpunk-primary);
	--cyberpunk-secondary-dim: var(--cyberpunk-primary-dim);
	--cyberpunk-secondary-glow: var(--cyberpunk-primary-glow-soft);
	--cyberpunk-text-on-secondary: var(--cyberpunk-text-on-primary);
	/* Legacy-UI-Tokens auf Neon umbiegen (kein Blau mehr im Game-HUD / Landing) */
	--ui-accent-cyan: var(--cyberpunk-primary);
	--ui-accent-blue: var(--cyberpunk-primary);
	--ui-accent: var(--cyberpunk-primary);
	--ui-white: var(--cyberpunk-primary);
	--color-accent: var(--cyberpunk-primary);
	--hud-glow: var(--cyberpunk-primary-glow-soft);
	--hud-stroke: var(--cyberpunk-border-dim);
	--hud-stroke-soft: color-mix(in srgb, var(--cyberpunk-primary) 12%, transparent);
	--hud-sf-cyan: var(--cyberpunk-primary);
	--hud-sf-cyan-glow: var(--cyberpunk-primary-glow);
	--hud-sf-green: var(--cyberpunk-primary);
	--hud-sf-amber: var(--cyberpunk-primary);
	--hud-sf-amber-strong: var(--cyberpunk-primary-bright);
	--hud-sf-amber-deep: var(--cyberpunk-primary-dim);
	--hud-sf-amber-glow: var(--cyberpunk-primary-glow-soft);
	--crt-phosphor: var(--cyberpunk-primary);
	--crt-phosphor-bright: var(--cyberpunk-primary-bright);
	--crt-phosphor-glow: 0 0 6px var(--cyberpunk-primary-glow-soft);
	--landing-login-corner-border: var(--cyberpunk-border-dim);
	--badge-accent-bg: var(--cyberpunk-primary);
	--badge-accent-border: var(--cyberpunk-border);
	--font-body: var(--cyberpunk-font);
	--font-mono: var(--cyberpunk-font-mono);
	color: var(--cyberpunk-primary);
}

/*
 * Linke Konsole: Tab-Header sitzt als Stage-Header direkt auf der Buehne.
 * Via display:contents + flex-order liegt er zwischen Status und Galerie,
 * mit exakt derselben Content-Breite wie .ng-plane-gallery__stage
 * (gleiche horizontale Margins/Paddings wie die Galerie).
 */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--left .landing-login-panel.ng-hud-terminal-feed.ng-left-tabs.is-collapsible .landing-login-terminal__monitor,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--left .landing-login-panel.ng-hud-terminal-feed.ng-left-tabs.is-collapsible.is-collapsed .landing-login-terminal__monitor {
	display: flex;
	flex-direction: column;
	gap: 0;
	grid-template-rows: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--left .ng-left-tabs .landing-login-terminal__body.ng-left-tabs__body {
	display: contents;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--left .ng-left-tabs .ng-left-tab-panel.is-active:not([hidden]) {
	display: contents;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--left .ng-left-tabs .ng-left-tab-panel.is-active > .landing-login-terminal__status {
	order: 1;
	flex: 0 0 auto;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--left .ng-left-tabs .ng-left-tab-panel.is-active > script {
	display: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--left .ng-left-tabs .ng-left-tab-panel.is-active > .ng-plane-gallery {
	order: 3;
	flex: 1 1 auto;
	min-height: 0;
	/* Kein Abstand zwischen Tab-Header und Stage */
	padding-top: 0;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-left-tabs .ng-left-tabs__header,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-terminal-feed.ng-left-tabs .landing-login-terminal__header {
	order: 2;
	flex: 0 0 auto;
	align-self: stretch;
	box-sizing: border-box;
	/* Border-Box = Stage-Breite: Galerie-Margin + horizontales Galerie-Padding */
	margin-left: calc(14px + var(--space-12));
	margin-right: calc(16px + var(--space-12));
	margin-bottom: 0;
	padding: 0;
	width: auto;
	max-width: none;
	background: transparent;
	animation: none;
	filter: none;
	gap: 0;
}

/* Tab-Leiste als ein durchgehender Primary-Block (kein Gap zwischen Buttons) */
body.ui-reboot.ng-shell.ng-game-layout .ng-left-tabs .ng-left-tabs__bar {
	gap: 0;
	width: 100%;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-terminal-feed.ng-left-tabs .landing-login-terminal__monitor {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-terminal-feed.ng-left-tabs .landing-login-terminal__monitor::before,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-terminal-feed.ng-left-tabs .landing-login-terminal__monitor::after,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-terminal-feed .landing-login-terminal__monitor::before,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-terminal-feed .landing-login-terminal__monitor::after {
	content: none;
	display: none;
	background: none;
	animation: none;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-terminal-feed .landing-login-terminal__monitor {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-left-tab {
	background: var(--cyberpunk-primary);
	border: none;
	border-radius: 0;
	color: #000;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-left-tab i {
	color: #000;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-left-tab:hover,
body.ui-reboot.ng-shell.ng-game-layout .ng-left-tab.is-active {
	background: var(--cyberpunk-primary);
	border: none;
	color: #000;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-left-tab:hover i,
body.ui-reboot.ng-shell.ng-game-layout .ng-left-tab.is-active i {
	color: #000;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-left-tab:focus-visible {
	outline-color: var(--cyberpunk-text-on-primary);
	outline-offset: -2px;
}

/*
 * HUD-Ring Chrome: ein durchgehendes Matrix-Gitter hinter dem Ring.
 * Top/Left/Right/Bottom sind transparent (kein lokales Grid → keine Nahtkanten).
 * Mitte/Canopy/Galaxy bleiben darueber und decken das Gitter ab.
 */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-grid.ng-hud-ring {
	/* Positioning-Kontext + Isolation: siehe auch Block weiter unten (Top-Gap). */
	position: relative;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-grid.ng-hud-ring::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	box-sizing: border-box;
	background-color: var(--cyberpunk-matrix-bg-color);
	background-image: var(--cyberpunk-matrix-bg-image);
	background-size: var(--cyberpunk-matrix-bg-size);
	background-repeat: repeat;
	box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-topbar,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-column--left,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-column--right,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-bottombar {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Sternenhimmel / Planet / Stadt-Plattform: kein Matrix-Grid */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-canopy,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-center-stage {
	background: transparent;
	background-image: none;
	box-shadow: none;
}

/*
 * HUD-Schrift: Standard = Muted (#D4E1A5). Primary nur als Akzent.
 */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay a,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-cityview-card-title,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-cityview-card-title > div,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__title,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__title-text,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-player-alli,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-player-alli-text,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-micro-item,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-empty-text,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-active-job-item,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-dock-label,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-dock-item,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-avatar-icons a,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-avatar-icons button {
	color: var(--cyberpunk-muted);
	text-shadow: none;
	border: none;
	box-shadow: none;
}

/* Primary-Akzente */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .v,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-player-name {
	color: var(--cyberpunk-primary);
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-avatar-icons a:hover,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-avatar-icons a:focus-visible,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-avatar-icons button:hover,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-avatar-icons button:focus-visible {
	border: none;
	box-shadow: none;
	color: var(--cyberpunk-primary);
}

/* Icons erben Muted; gezielt Primary wo noetig (z. B. Hex-Dock) */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay i,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ri,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay [class^="ri-"],
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay [class*=" ri-"],
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .gi {
	color: inherit;
	fill: currentColor;
}

/* Galerie-/Aktionsbuttons: Neon-Text + Flat-Fill */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__btn,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__btn--build {
	color: var(--cyberpunk-primary);
	background: color-mix(in srgb, var(--cyberpunk-primary) 12%, transparent);
	border-color: var(--cyberpunk-border);
	box-shadow: none;
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__btn i,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__btn--build i,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__cost i {
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__btn--build:hover:not(:disabled),
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__btn--build:focus-visible:not(:disabled) {
	background: color-mix(in srgb, var(--cyberpunk-primary) 22%, transparent);
	box-shadow: 0 0 10px var(--cyberpunk-primary-glow-soft);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__status.ng-hud-terminal-status {
	color: var(--cyberpunk-muted);
	background: transparent;
	background-image: none;
	text-shadow: none;
}

/* Plane-Gallery: kein eigenes Matrix-Grid – nutzt durchgehendes Ring-Gitter */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-terminal-body.ng-hud-terminal-body.ng-plane-gallery,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-hud-terminal-body.ng-plane-gallery {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--cyberpunk-muted);
	text-shadow: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__stage {
	border: 1px solid var(--cyberpunk-border);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-terminal-body.ng-hud-terminal-body.ng-plane-gallery::after {
	content: none;
	display: none;
	animation: none;
}

/* Summary-Zeile gedämpft; Objektname (status-plane) in Primary */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__status-text.landing-login-terminal__status-row {
	color: var(--cyberpunk-muted);
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__status-row.landing-login-terminal__status-plane,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__status-plane,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__status-plane [data-role="item-name"],
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay #ng-plane-gallery-status-plane,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay #ng-plane-gallery-status-plane [data-role="plane-name"],
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay #ng-plane-gallery-status-plane [data-role="item-name"] {
	color: var(--cyberpunk-primary);
	text-shadow: none;
	opacity: 1;
}

/* Lore-/Beschreibungstexte der Galerie: dunkles Gelb */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__description,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__lore .ng-plane-gallery__description {
	color: var(--cyberpunk-tertiary-ink);
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-xp-bar {
	background: color-mix(in srgb, var(--cyberpunk-primary) 15%, transparent);
	border-radius: 0;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-xp-fill {
	background: var(--cyberpunk-primary);
	border-radius: 0;
	box-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-header-xp-bar-label {
	color: var(--cyberpunk-primary);
	mix-blend-mode: difference;
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-res-meter,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-res-meter-fill {
	background-image: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-res-meter {
	background: #04070b;
	border-color: var(--cyberpunk-border-dim);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-res-meter-fill {
	background: var(--cyberpunk-primary);
	box-shadow: 0 0 6px var(--cyberpunk-primary-glow-soft);
}

/* Label invertiert gegen Fill/Track (schwarz↔neon), siehe .ui-hud-res-meter-label */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-res-meter-label {
	color: var(--cyberpunk-primary);
	mix-blend-mode: difference;
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-micro-item .v {
	color: var(--cyberpunk-primary);
}

/* Ressourcen-Icons: dunkles Gelb, kompakter, rechts neben der Menge */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-res-icon,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-topbar .ui-hud-micro-item .ui-hud-res-icon {
	color: var(--cyberpunk-tertiary-ink);
	text-shadow: none;
	font-size: 14px;
	line-height: 1;
}

/* Labels + Stundenproduktion: Tertiary-Familie (4 Ressourcen) */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-micro-item .k,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .k,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-prod,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-topbar .ui-hud-prod {
	color: var(--cyberpunk-tertiary-ink);
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-prod.is-negative,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-topbar .ui-hud-prod.is-negative {
	color: var(--cyberpunk-danger);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__alien-script,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__footer-meta {
	color: var(--cyberpunk-muted);
}

/* Avatar-Tools: Alien-Schrift in dunklem Gelb */
body.ui-reboot.ng-shell.ng-game-layout .ng-header-avatar-tools .ng-header-alien-script,
body.ui-reboot.ng-shell.ng-game-layout .ng-header-avatar-tools .landing-login-terminal__alien-script {
	color: var(--cyberpunk-tertiary-ink);
	text-shadow: none;
}

/* HUD-Bottombar: gesamter Breach-Footer in dunklem Gelb */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer {
	color: var(--cyberpunk-tertiary-ink);
	border-top-color: var(--cyberpunk-tertiary);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .cp-breach-footer__alien,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .landing-login-terminal__alien-script,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .cp-keyhint__label,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .cp-keyhint__key,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .ng-barcode-label,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .cp-modal-qr-seal__label {
	color: var(--cyberpunk-tertiary-ink);
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .gi,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .gi--neon {
	--gi-color: var(--cyberpunk-tertiary-ink);
	color: var(--cyberpunk-tertiary-ink);
	filter: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .ng-cyber-barcode {
	filter: none;
	opacity: 0.9;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .ng-cyber-barcode svg rect,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .ng-cyber-barcode__svg rect {
	fill: var(--cyberpunk-tertiary-ink);
}

/* Footer/Header der Konsole flat */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__footer {
	background: rgba(10, 12, 16, 0.55);
	border-top-color: var(--cyberpunk-border-dim);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__header::before,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .landing-login-terminal__header::after {
	content: none;
	display: none;
	background: none;
	animation: none;
}

/* Keine Legacy-Cyan/Weiss-Glow-Hintergruende in der Left-Column */
body.ui-reboot.ng-shell.ng-game-layout .ng-left-column-unit,
body.ui-reboot.ng-shell.ng-game-layout .ng-left-column-unit .ng-header-primary,
body.ui-reboot.ng-shell.ng-game-layout .ng-left-column-unit #ng-left-tabs {
	background-image: none;
}

/* Left-Column: Avatar-Block eng an die obere linke Kante */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--left {
	margin-top: calc(-1 * var(--ng-hud-top-gap, 8px));
	padding-top: 0;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-left-column-unit .ng-header-primary {
	padding: 2px 6px 4px 2px;
	/* Avatar-TL-Stroke darf nicht am Primary-Overflow enden */
	overflow: visible;
}

/* Avatar: ohne Border, ohne TL-Schraege / Neon-Rahmen */
body.ui-reboot.ng-shell.ng-game-layout .ng-left-column-unit .header-avatar.ng-header-avatar-right {
	--cyberpunk-cut: 0px;
	--cp-clip: none;

	width: 88px;
	height: 88px;
	min-width: 88px;
	min-height: 88px;
	margin: 14px 2px 2px 16px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: none;
	border-radius: 0;
	background: transparent;
	clip-path: none;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-left-column-unit .header-avatar.ng-header-avatar-right img.ng-player-avatar {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	border: none;
	border-radius: 0;
	background: #0a0a0a;
	clip-path: none;
	z-index: 1;
	object-fit: cover;
}

body.ui-reboot.ng-shell.ng-game-layout .header-avatar.ng-header-avatar-right > .ng-header-avatar-frame,
body.ui-reboot.ng-shell.ng-game-layout .header-avatar.ng-header-avatar-right > .ng-header-avatar-diag {
	display: none;
}

/* Left-Tabs ohne eingebetteten Footer (Footer sitzt in Bottombar-links) */
body.ui-reboot.ng-shell.ng-game-layout .ng-left-column-unit #ng-left-tabs,
body.ui-reboot.ng-shell.ng-game-layout .ng-left-column-unit .landing-login-panel.ng-hud-terminal-feed {
	padding: 0;
}

/* Breach-Footer-Alien: Modal gedämpft; HUD-Bottombar → dunkles Gelb (siehe oben) */
body.ui-reboot.ng-shell .cp-breach-footer__alien,
body.ui-reboot.ng-shell .ng-modal-unified-card .cp-breach-footer__alien,
body.ui-reboot.ng-shell .ng-modal-unified-card .landing-login-terminal__alien-script {
	color: var(--cyberpunk-muted);
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar.cp-breach-footer .cp-breach-footer__alien {
	color: var(--cyberpunk-tertiary-ink);
	text-shadow: none;
}

/* Lager/Tank: Shimmer-Animation im Leerbereich entfernen */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ui-hud-res-meter-fill::after {
	content: none;
	display: none;
	animation: none;
}

/* Galaxy nur im Canopy-Mittelbereich (nicht Vollflaeche hinter dem HUD) */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-grid > .ng-galaxy-background,
body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene .ng-hud-grid > .ng-galaxy-background {
	position: relative;
	inset: auto;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	grid-column: 2;
	grid-row: 2;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: auto;
}

/* Topbar dichter an den oberen Rand; Ring ist Positioning-Kontext fuer Matrix-Schicht */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-grid.ng-hud-ring {
	--ng-hud-top-gap: 0px;
	padding-top: 0;
	position: relative;
	isolation: isolate;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-topbar {
	padding-top: 0;
	margin-top: 0;
	align-self: start;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-topbar .hud-header {
	padding-top: 0;
	margin-top: 0;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-topbar .ui-hud-micro {
	padding-top: 0;
	padding-bottom: 0;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-topbar .ui-hud-micro-group {
	padding-top: 0;
	padding-bottom: 2px;
}

/* Mehr Luft zwischen Ressourcen-Leiste und Galaxy-/Stadt-Canvas */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-canopy {
	padding-top: 12px;
	box-sizing: border-box;
}

/* Dock-Buttons: ohne Border */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link.tab,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link.tab-group__item {
	border: 0;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link:hover,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link.is-active {
	border: 0;
	box-shadow: 0 0 10px var(--cyberpunk-primary-glow-soft);
}

/* Badges: minimaler Rand, immer rund (nicht oval) – keine Text-Labels */
body.ui-reboot.ng-shell.ng-game-layout .ng-badge:not(.ng-avatar-level-badge),
body.ui-reboot.ng-shell.ng-game-layout .ng-dock-sp-badge,
body.ui-reboot.ng-shell.ng-game-layout .ng-combat-report-badge,
body.ui-reboot.ng-shell.ng-game-layout .ng-mobile-nav-badge {
	--ng-badge-padding: 1px 2px;
	--ng-badge-radius: 50%;
	padding: 1px 2px;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	min-width: 1.35em;
	min-height: 1.35em;
	width: auto;
	height: auto;
	line-height: 1;
}

/* Avatar-Level-Badge im Auswahl-Modal: kompaktes Label, kein Kreis */
body.ui-reboot.ng-shell.ng-game-layout .ng-badge.ng-avatar-level-badge,
.ng-modal-unified-card.cp-dock-modal .ng-badge.ng-avatar-level-badge {
	--ng-badge-font-size: 0.65rem;
	--ng-badge-padding: 2px 5px;
	--ng-badge-radius: 0;
	--ng-badge-min-width: 0;
	--ng-badge-height: auto;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	padding: 2px 5px;
	border-radius: 0;
	aspect-ratio: auto;
	font-size: 0.65rem;
	line-height: 1.2;
	white-space: nowrap;
}

/* Avatar-Icon-Badges: nur gelbe Ziffer, kein Kreis/Fill/Border */
body.ui-reboot.ng-shell.ng-game-layout .ng-header-avatar-icons .ng-badge.ng-missions-badge-count {
	--ng-badge-bg: transparent;
	--ng-badge-border: transparent;
	--ng-badge-color: var(--cyberpunk-primary);
	--ng-badge-shadow: none;
	--ng-badge-text-shadow: none;
	--ng-badge-min-width: 0;
	--ng-badge-height: auto;
	--ng-badge-padding: 0;
	--ng-badge-radius: 0;
	--ng-badge-font-size: var(--fs-11, 11px);
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	aspect-ratio: auto;
	background: transparent;
	box-shadow: none;
	color: var(--cyberpunk-primary);
	text-shadow: none;
	font-weight: 700;
	line-height: 1;
}

/* Kein Pseudo-Rahmen / Scanline-Overlay am Avatar */
body.ui-reboot.ng-shell.ng-game-layout .header-avatar.ng-header-avatar-right::before,
body.ui-reboot.ng-shell.ng-game-layout .header-avatar.ng-header-avatar-right::after {
	content: none;
	display: none;
	border: none;
	animation: none;
	background: none;
}

body.ui-reboot.ng-shell.ng-game-layout .header-avatar.ng-header-avatar-right > .ng-hud-warn-banderole {
	top: 0;
	border-radius: 0;
	clip-path: none;
}

body.ui-reboot.ng-shell.ng-game-layout {
	--ng-player-avatar-border: none;
}

/* Radar: komplett durchsichtig – äusserster Ring in Tertiary */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--right .ng-hud-radar-container .ng-header-radar-mini,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap {
	border-color: var(--cyberpunk-tertiary);
	background: transparent;
	box-shadow: none;
	filter: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap .ng-radar-canvas,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap canvas {
	background: transparent;
	filter: none;
}

/* Scanline-/Vignette-Overlays entfernen (abdunkelnd) */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap::before,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap::after {
	content: none;
	display: none;
	background: none;
	opacity: 0;
}

/* Radar LIVE-Label: gedämpft; Uhr in Primary */
body.ui-reboot.ng-shell.ng-game-layout .ng-header-radar-mini .ng-radar-live,
body.ui-reboot.ng-shell.ng-game-layout .ng-header-radar-mini .ng-radar-live::after {
	color: var(--cyberpunk-muted);
	text-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-header-radar-mini .ng-radar-live #ng-radar-clock {
	color: var(--cyberpunk-primary);
	text-shadow: none;
}

/* City-Switcher in Right-Column: Cyberpunk-Akzent */
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--right .ng-hud-right-tools > .ng-city-switcher .ng-city-switcher-btn {
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--right .ng-hud-right-tools > .ng-city-switcher .ng-city-switcher-btn:hover,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-column--right .ng-hud-right-tools > .ng-city-switcher .ng-city-switcher-btn:focus-visible {
	color: var(--cyberpunk-primary-bright);
}

/* Skills-Modal: SP-Badge voll sichtbar (nicht von overflow/clip abschneiden) */
.ng-modal-unified-card:has(.ng-modal-page--skills) .ng-modal-unified-body,
.ng-modal-unified-card:has(.ng-skills-sp-badge) .ng-modal-unified-body {
	overflow-x: visible;
	padding-top: 8px;
}

.ng-modal-unified-card .ng-modal-page--skills .ng-widget-title,
.ng-modal-page--skills .ng-widget-title {
	overflow: visible;
	position: relative;
	z-index: 2;
	min-height: 64px;
	align-items: flex-start;
}

.ng-modal-unified-card .ng-skills-sp-badge,
.ng-modal-page--skills .ng-skills-sp-badge {
	z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
	.ng-hud-atmos-rail__stream,
	.ng-hud-atmos-ticker p,
	.ng-hud-alien-ticker p {
		animation: none !important;
	}
}

/* Mobile: Canopy vereinfachen, Atmosphaere reduzieren */
@media (max-width: 900px) {
	.ng-hud-atmos-rail,
	.ng-hud-atmos-edge--right,
	.ng-hud-atmos-ticker,
	.cp-breach-side-border--hud {
		display: none;
	}

	.ng-hud-canopy {
		--cp-canopy-inset: 2px;
		--cp-canopy-stroke: 1px;
		--cp-canopy-cut: 14px;
	}

	svg.ng-hud-canopy__chrome {
		filter: none;
	}

	body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-topbar,
	body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-column--left,
	body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-column--right,
	body.ui-reboot.ng-shell.ng-game-layout .ng-hud-ring .ng-hud-bottombar {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background-color: transparent;
		background-image: none;
	}
}

/* ---- Live-Chat Footer-Ticker ---- */
.ng-live-chat-ticker {
	--ng-chat-ticker-row-h: 20px;
	appearance: none;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 12px;
	height: 34px;
	min-height: 34px;
	max-height: 34px;
	box-sizing: border-box;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 35%, transparent);
	background:
		linear-gradient(90deg, rgba(20, 28, 10, 0.92), rgba(12, 16, 8, 0.88) 40%, rgba(20, 28, 10, 0.92)),
		var(--cyberpunk-matrix-bg-color, #0a0c08);
	color: var(--cyberpunk-text-bright, #e8f0b0);
	font-family: var(--cyberpunk-font, "Rajdhani", sans-serif);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: var(--ng-chat-ticker-row-h);
	text-align: left;
	cursor: pointer;
	box-shadow:
		inset 0 0 18px color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 12%, transparent),
		0 0 12px color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 10%, transparent);
}

.ng-live-chat-ticker:hover,
.ng-live-chat-ticker:focus-visible {
	outline: none;
	border-top-color: color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 65%, transparent);
	box-shadow:
		inset 0 0 22px color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 18%, transparent),
		0 0 16px color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 18%, transparent);
}

.ng-live-chat-ticker__label,
.ng-live-chat-ticker__hint {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: var(--ng-chat-ticker-row-h);
	line-height: 1;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cyberpunk-primary, #DCFE5E);
	opacity: 0.85;
}

.ng-live-chat-ticker__body {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	gap: 0.4em;
	min-width: 0;
	height: var(--ng-chat-ticker-row-h);
	line-height: var(--ng-chat-ticker-row-h);
	overflow: hidden;
}

.ng-live-chat-ticker__idle {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	height: var(--ng-chat-ticker-row-h);
	line-height: var(--ng-chat-ticker-row-h);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--cyberpunk-muted, #6a7540);
	font-style: normal;
}

.ng-live-chat-ticker__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	height: var(--ng-chat-ticker-row-h);
	margin: 0;
	padding: 0 0.35em;
	border: 1px solid color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 40%, transparent);
	color: var(--cyberpunk-primary, #DCFE5E);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
}

.ng-live-chat-ticker__avatar {
	display: block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 35%, transparent);
	object-fit: cover;
	background: rgba(0, 0, 0, 0.35);
}

.ng-live-chat-ticker__name {
	display: block;
	flex: 0 1 auto;
	max-width: 30%;
	height: var(--ng-chat-ticker-row-h);
	line-height: var(--ng-chat-ticker-row-h);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--cyberpunk-primary, #DCFE5E);
	font-weight: 600;
}

.ng-live-chat-ticker__msg {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	height: var(--ng-chat-ticker-row-h);
	line-height: var(--ng-chat-ticker-row-h);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--cyberpunk-text-bright, #e8f0b0);
}

.ng-live-chat-ticker__msg.is-decoding {
	color: var(--cyberpunk-primary, #DCFE5E);
	font-family: var(--cyberpunk-font-mono, "Share Tech Mono", monospace);
	letter-spacing: 0.04em;
}

.ng-live-chat-ticker.is-glitch {
	animation: ng-live-chat-ticker-glitch 420ms steps(2, end);
}

@keyframes ng-live-chat-ticker-glitch {
	0% {
		filter: none;
		transform: translateX(0);
		opacity: 1;
	}
	20% {
		filter: hue-rotate(40deg) contrast(1.3);
		transform: translateX(-2px);
		opacity: 0.85;
	}
	40% {
		filter: hue-rotate(-25deg) brightness(1.25);
		transform: translateX(2px);
		opacity: 1;
	}
	60% {
		filter: contrast(1.4);
		transform: translateX(-1px);
		opacity: 0.9;
	}
	100% {
		filter: none;
		transform: translateX(0);
		opacity: 1;
	}
}

/* Schritt-2-Shell / Schritt-3 Modal-Chat */
.ng-modal-unified-card.cp-dock-modal.ng-live-chat-card .ng-modal-body,
.ng-modal-unified-card.cp-dock-modal.ng-live-chat-card .ng-modal-unified-body {
	padding: 0;
}

.ng-live-chat {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: min(52vh, 460px);
	max-height: min(70vh, 560px);
	font-family: var(--cyberpunk-font, "Rajdhani", sans-serif);
	color: var(--cyberpunk-text-bright, #e8f0b0);
}

.ng-live-chat__messages {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	padding: 12px 14px;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 45%, transparent) transparent;
	background: rgba(10, 14, 8, 0.55);
	border-bottom: 1px solid color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 22%, transparent);
}

.ng-live-chat__line {
	display: block;
	margin: 0 0 0.45em;
	line-height: 1.45;
	font-size: 0.9rem;
	font-weight: 500;
	word-break: break-word;
}

.ng-live-chat__report {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.45em;
	padding: 0 0.2em;
	border: 0;
	background: transparent;
	color: var(--cyberpunk-muted, #6a7540);
	font-size: 0.85em;
	line-height: 1;
	vertical-align: baseline;
	cursor: pointer;
	opacity: 0.55;
}

.ng-live-chat__report:hover,
.ng-live-chat__report:focus-visible {
	outline: none;
	opacity: 1;
	color: var(--cyberpunk-primary, #DCFE5E);
}

.ng-live-chat__report:disabled,
.ng-live-chat__report.is-reported {
	opacity: 0.35;
	cursor: default;
	color: var(--cyberpunk-muted, #6a7540);
}

.ng-live-chat__report-icon {
	display: inline-block;
	transform: translateY(-1px);
}

.ng-live-chat__time,
.ng-live-chat__tag,
.ng-live-chat__name,
.ng-live-chat__sep,
.ng-live-chat__text {
	font: inherit;
	font-size: inherit;
	color: inherit;
}

.ng-live-chat__time {
	color: var(--cyberpunk-muted, #6a7540);
	font-variant-numeric: tabular-nums;
	margin-right: 0.25em;
}

.ng-live-chat__tag {
	color: var(--cyberpunk-primary, #DCFE5E);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-right: 0.2em;
}

.ng-live-chat__avatar {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 0.3em -4px 0;
	border: 1px solid color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 35%, transparent);
	object-fit: cover;
	vertical-align: middle;
	background: rgba(0, 0, 0, 0.35);
}

.ng-live-chat__name {
	color: var(--cyberpunk-primary, #DCFE5E);
	font-weight: 600;
}

.ng-live-chat__sep {
	margin-right: 0.15em;
}

.ng-live-chat__placeholder {
	margin: 0;
	color: var(--cyberpunk-muted, #6a7540);
}

.ng-live-chat__composer {
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding: 10px 12px 6px;
	background: rgba(14, 18, 10, 0.75);
}

.ng-live-chat__input {
	flex: 1 1 auto;
	min-width: 0;
	appearance: none;
	border: 1px solid color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 35%, transparent);
	background: rgba(8, 12, 6, 0.9);
	color: var(--cyberpunk-text-bright, #e8f0b0);
	font: inherit;
	font-size: 0.92rem;
	padding: 10px 12px;
	outline: none;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	box-shadow: inset 0 0 12px color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 8%, transparent);
}

.ng-live-chat__input:focus {
	border-color: color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 65%, transparent);
	box-shadow:
		inset 0 0 14px color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 14%, transparent),
		0 0 10px color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 12%, transparent);
}

.ng-live-chat__input::placeholder {
	color: var(--cyberpunk-muted, #6a7540);
}

.ng-live-chat__send {
	appearance: none;
	flex: 0 0 auto;
	border: 1px solid color-mix(in srgb, var(--cyberpunk-primary, #DCFE5E) 50%, transparent);
	background: rgba(56, 63, 28, 0.65);
	color: var(--cyberpunk-primary, #DCFE5E);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0 16px;
	cursor: pointer;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.ng-live-chat__send:hover,
.ng-live-chat__send:focus-visible {
	outline: none;
	background: rgba(76, 86, 37, 0.85);
}

.ng-live-chat__send:disabled,
.ng-live-chat__input:disabled {
	opacity: 0.55;
	cursor: wait;
}

.ng-live-chat__status {
	margin: 0;
	min-height: 1.2em;
	padding: 0 12px 8px;
	font-size: 0.78rem;
	color: var(--cyberpunk-muted, #6a7540);
}

.ng-live-chat__status.is-error {
	color: #e07070;
}

.ng-live-chat__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ng-live-chat__meta {
	color: var(--cyberpunk-primary, #DCFE5E);
	font-weight: 600;
}

/* ============================================================
   Landing / Login / Guest: Hardcoded Blau → Neon-Primary
   (reloaded.css Landing-Selektoren nutzen noch rgba(79,172,254…))
   ============================================================ */

body.ui-reboot.ng-shell.ng-landing-page {
	background-image: radial-gradient(
		ellipse 120% 80% at 50% 100%,
		color-mix(in srgb, var(--cyberpunk-bg) 88%, #000) 0%,
		var(--cyberpunk-bg) 72%
	);
}

body.ui-reboot.ng-shell.ng-landing-page .ng-landing-bg__glow {
	background:
		radial-gradient(ellipse 70% 55% at 50% 38%, color-mix(in srgb, var(--cyberpunk-primary) 16%, transparent) 0%, transparent 62%),
		radial-gradient(ellipse 55% 40% at 18% 72%, color-mix(in srgb, var(--cyberpunk-muted) 10%, transparent) 0%, transparent 58%),
		radial-gradient(ellipse 45% 35% at 82% 28%, color-mix(in srgb, var(--cyberpunk-primary) 10%, transparent) 0%, transparent 55%);
}

body.ui-reboot.ng-shell.ng-landing-page .ng-landing-bg__fog::before {
	background:
		radial-gradient(ellipse 90% 55% at 30% 85%, color-mix(in srgb, var(--cyberpunk-primary) 12%, transparent) 0%, transparent 68%),
		radial-gradient(ellipse 75% 50% at 78% 18%, color-mix(in srgb, var(--cyberpunk-muted) 10%, transparent) 0%, transparent 65%);
}

body.ui-reboot.ng-shell.ng-landing-page .ng-landing-bg__grid {
	background-image:
		linear-gradient(color-mix(in srgb, var(--cyberpunk-primary) 6%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--cyberpunk-primary) 6%, transparent) 1px, transparent 1px);
}

body.ui-reboot.ng-shell.ng-landing-page .ng-landing-bg__scan::before {
	background: linear-gradient(
		180deg,
		transparent 0%,
		color-mix(in srgb, var(--cyberpunk-muted) 4%, transparent) 38%,
		color-mix(in srgb, var(--cyberpunk-primary) 10%, transparent) 50%,
		color-mix(in srgb, var(--cyberpunk-muted) 4%, transparent) 62%,
		transparent 100%
	);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel {
	--landing-login-corner-border: var(--cyberpunk-border-dim);
	box-shadow:
		0 0 28px var(--cyberpunk-primary-glow-soft),
		0 18px 48px rgba(0, 0, 0, 0.42);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel::before {
	background:
		repeating-linear-gradient(
			0deg,
			color-mix(in srgb, var(--cyberpunk-primary) 3%, transparent) 0,
			color-mix(in srgb, var(--cyberpunk-primary) 3%, transparent) 1px,
			transparent 1px,
			transparent 3px
		),
		linear-gradient(165deg, rgba(12, 16, 8, 0.94) 0%, rgba(6, 8, 4, 0.88) 48%, rgba(10, 14, 6, 0.92) 100%);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__header {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--cyberpunk-primary) 16%, transparent) 0%, transparent 42%),
		linear-gradient(180deg, color-mix(in srgb, var(--cyberpunk-muted) 8%, transparent) 0%, transparent 100%);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__header::before {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--cyberpunk-primary) 22%, transparent) 0%, transparent 42%),
		linear-gradient(180deg, color-mix(in srgb, var(--cyberpunk-muted) 12%, transparent) 0%, transparent 100%);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__header::after {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyberpunk-primary) 55%, transparent), transparent);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__channel {
	border-color: var(--cyberpunk-border-dim);
	color: var(--cyberpunk-muted);
	background: rgba(8, 10, 4, 0.7);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__title {
	text-shadow: 0 0 16px var(--cyberpunk-primary-glow-soft);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__subtitle,
body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__status {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__footer {
	border-top-color: var(--cyberpunk-border-dim);
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, transparent 100%),
		rgba(8, 10, 4, 0.55);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-terminal__cursor {
	background: color-mix(in srgb, var(--cyberpunk-primary) 80%, transparent);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input-group label {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input {
	background: rgba(8, 10, 4, 0.92);
	border-color: var(--cyberpunk-border-dim);
	color: var(--cyberpunk-text-bright);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input::placeholder {
	color: color-mix(in srgb, var(--cyberpunk-muted) 70%, transparent);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input:focus {
	border-color: var(--cyberpunk-primary);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.45),
		0 0 0 1px color-mix(in srgb, var(--cyberpunk-primary) 40%, transparent),
		0 0 14px var(--cyberpunk-primary-glow-soft);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input:-webkit-autofill,
body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input:-webkit-autofill:hover,
body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--cyberpunk-text-bright);
	caret-color: var(--cyberpunk-primary);
	border-color: color-mix(in srgb, var(--cyberpunk-primary) 50%, transparent);
	-webkit-box-shadow:
		0 0 0 1000px rgba(8, 10, 4, 0.98) inset,
		inset 0 0 0 1px rgba(0, 0, 0, 0.45);
	box-shadow:
		0 0 0 1000px rgba(8, 10, 4, 0.98) inset,
		inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-submit {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--cyberpunk-primary) 14%, transparent) 0%,
		rgba(0, 0, 0, 0.2) 100%
	);
	border-color: var(--cyberpunk-border);
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-submit:hover {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--cyberpunk-primary) 26%, transparent) 0%,
		rgba(0, 0, 0, 0.15) 100%
	);
	box-shadow: 0 0 16px var(--cyberpunk-primary-glow-soft);
	border-color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-divider::before,
body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel .landing-divider::after {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyberpunk-primary) 40%, transparent), transparent);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-divider {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-alt-btn {
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-alt-btn i {
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-alt-btn:hover {
	color: var(--cyberpunk-primary-bright);
	text-shadow: 0 0 10px var(--cyberpunk-primary-glow-soft);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-footer,
body.ui-reboot.ng-shell.ng-landing-page .landing-footer a {
	color: var(--cyberpunk-muted);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-footer a:hover {
	color: var(--cyberpunk-primary);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-tagline {
	color: var(--cyberpunk-muted);
}


/* ============================================================
   Sequenzwaffen-Gattungsrahmen
   electron = Neon-Blau, proton = Neon-Pink, neutron = Neon-Gelb
   ============================================================ */

/* Linke Galerie: Stage-Rahmen */
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="electron"] .ng-plane-gallery__stage,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__stage[data-weapon-class="electron"] {
	border-color: var(--cyberpunk-weapon-electron);
	box-shadow: 0 0 10px var(--cyberpunk-weapon-electron-glow);
}
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="proton"] .ng-plane-gallery__stage,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__stage[data-weapon-class="proton"] {
	border-color: var(--cyberpunk-weapon-proton);
	box-shadow: 0 0 10px var(--cyberpunk-weapon-proton-glow);
}
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="neutron"] .ng-plane-gallery__stage,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__stage[data-weapon-class="neutron"] {
	border-color: var(--cyberpunk-weapon-neutron);
	box-shadow: 0 0 10px var(--cyberpunk-weapon-neutron-glow);
}

/* Linke Galerie: Tab-Header / Tab-Buttons */
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="electron"] .ng-left-tab,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="electron"] .ng-left-tab:hover,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="electron"] .ng-left-tab.is-active {
	background: var(--cyberpunk-weapon-electron);
}
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="proton"] .ng-left-tab,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="proton"] .ng-left-tab:hover,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="proton"] .ng-left-tab.is-active {
	background: var(--cyberpunk-weapon-proton);
}
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="neutron"] .ng-left-tab,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="neutron"] .ng-left-tab:hover,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs[data-weapon-class="neutron"] .ng-left-tab.is-active {
	background: var(--cyberpunk-weapon-neutron);
}

/* Dock-Modal-Würfel: Tech / Defense / Hangar */
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class="electron"],
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class="electron"].is-locked,
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class="electron"] .ng-cube-face:not(.ng-face-front) {
	border-color: var(--cyberpunk-weapon-electron);
	box-shadow: 0 0 12px var(--cyberpunk-weapon-electron-glow);
}
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class="proton"],
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class="proton"].is-locked,
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class="proton"] .ng-cube-face:not(.ng-face-front) {
	border-color: var(--cyberpunk-weapon-proton);
	box-shadow: 0 0 12px var(--cyberpunk-weapon-proton-glow);
}
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class="neutron"],
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class="neutron"].is-locked,
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class="neutron"] .ng-cube-face:not(.ng-face-front) {
	border-color: var(--cyberpunk-weapon-neutron);
	box-shadow: 0 0 12px var(--cyberpunk-weapon-neutron-glow);
}

/* ------------------------------------------------------------
   Ohne Gattung: ruhiger 3px-Rahmen (#121615), kein animierter Conic-Spin
   ------------------------------------------------------------ */

@property --ng-weapon-spin {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes ng-weapon-conic-spin {
	to { --ng-weapon-spin: 360deg; }
}

/* Conic-Spin-Rahmen: standardmaessig aus.
   z-index ueber Vignette/Glitch (1–3), unter Info-Modal/Buttons (5–6),
   sonst deckt die undurchsichtige Vignette den Rahmen komplett ab. */
.ng-weapon-conic-frame {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(
		from var(--ng-weapon-spin, 0deg),
		var(--cyberpunk-weapon-electron),
		var(--cyberpunk-weapon-proton),
		var(--cyberpunk-weapon-neutron),
		var(--cyberpunk-weapon-electron)
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: ng-weapon-conic-spin 4s linear infinite;
	box-shadow: 0 0 14px rgba(77, 159, 255, 0.22);
}

/* Header ohne Gattung: ruhiger Hintergrund, kein animierter Rahmen */
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tabs__header,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .landing-login-terminal__header.ng-left-tabs__header {
	position: relative;
	isolation: isolate;
	background: #070a0f;
	border: none;
	border-bottom: 1px solid color-mix(in srgb, var(--cyberpunk-weapon-electron) 28%, transparent);
	box-shadow: none;
	animation: none;
}

body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tabs__bar,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tab {
	position: relative;
	z-index: 1;
}

body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tab,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tab:hover,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tab.is-active,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tab:focus-visible {
	background: transparent;
	box-shadow: none;
	border: none;
	color: var(--cyberpunk-text-bright);
}

body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tab i,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tab:hover i,
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-left-tab.is-active i {
	color: var(--cyberpunk-text-bright);
}

/* Stage ohne Gattung: ruhiger 3px-Rahmen statt Conic-Spin-Animation */
body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-plane-gallery__stage,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__stage:not([data-weapon-class]) {
	border: 3px solid #121615;
	box-shadow: none;
}

body.ui-reboot.ng-shell.ng-game-layout #ng-left-tabs:not([data-weapon-class]) .ng-weapon-conic-frame,
body.ui-reboot.ng-shell.ng-game-layout .ng-hud-overlay .ng-plane-gallery__stage:not([data-weapon-class]) .ng-weapon-conic-frame {
	display: none;
}

/* Dock-Modal-Würfel ohne Gattung: gleicher ruhiger Rahmen, kein Conic-Spin */
.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class=""] {
	border: 3px solid #121615;
	box-shadow: none;
}

.ng-modal-unified-card.cp-dock-modal .ng-tile[data-weapon-class=""]::after {
	content: none;
	display: none;
	animation: none;
}

/* ============================================================
   Flight-Cards – Rotes Cyberpunk-HUD (Trauma-Team-Look)
   ============================================================ */

.ng-flight-card {
	--fc-red: #FF2A2A;
	--fc-red-bright: #FF4D4D;
	--fc-red-deep: #B3001A;
	--fc-red-fill: rgba(255, 20, 40, 0.78);
	--fc-red-fill-soft: rgba(255, 30, 50, 0.42);
	--fc-red-line: rgba(255, 70, 70, 0.85);
	--fc-red-glow: rgba(255, 20, 40, 0.55);
	--fc-cut: 12px;
	--fc-rail: 10px;

	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: var(--fc-rail) minmax(0, 1fr);
	gap: 0;
	margin: 0;
	padding: 0 0 2px 0;
	border: none;
	background: transparent;
	color: var(--fc-red-bright);
	font-family: var(--cyberpunk-font);
	box-sizing: border-box;
}

/* Linker mechanischer Tab / Rail */
.ng-flight-card__rail {
	position: relative;
	width: var(--fc-rail);
	min-height: 100%;
	background: var(--fc-red);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 38%,
		70% 42%,
		70% 58%,
		100% 62%,
		100% 100%,
		0 100%
	);
	box-shadow: 0 0 10px var(--fc-red-glow);
}

.ng-flight-card__rail::before,
.ng-flight-card__rail::after {
	content: "";
	position: absolute;
	left: 2px;
	width: 3px;
	height: 8px;
	background: color-mix(in srgb, var(--fc-red-deep) 70%, #000);
}

.ng-flight-card__rail::before { top: 18%; }
.ng-flight-card__rail::after { bottom: 18%; }

.ng-flight-card__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--fc-red-line);
	background:
		linear-gradient(180deg, rgba(40, 0, 8, 0.55), rgba(12, 0, 4, 0.72)),
		rgba(20, 0, 4, 0.35);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	box-shadow:
		0 0 0 1px rgba(255, 40, 40, 0.15) inset,
		0 0 18px rgba(255, 0, 40, 0.22);
}

.ng-flight-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 8px 3px;
	border-bottom: 1px solid var(--fc-red-line);
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fc-red-bright);
	text-shadow: 0 0 6px var(--fc-red-glow);
}

.ng-flight-card__attention {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
}

.ng-flight-card__attention i {
	font-size: 0.95em;
	line-height: 1;
	color: var(--fc-red-bright);
}

.ng-flight-card__mark {
	opacity: 0.85;
	font-weight: 600;
}

/* Haupt-Datenblock mit abgeschraegter Ecke unten rechts */
.ng-flight-card__body {
	position: relative;
	margin: 6px 6px 4px;
	padding: 8px 10px 10px;
	background: var(--fc-red-fill);
	color: #fff5f5;
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--fc-cut)),
		calc(100% - var(--fc-cut)) 100%,
		0 100%
	);
	box-shadow:
		inset 0 0 0 1px rgba(255, 180, 180, 0.18),
		0 0 14px rgba(255, 0, 40, 0.28);
	text-shadow: 0 0 4px rgba(80, 0, 0, 0.45);
}

.ng-flight-card__body::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--fc-cut);
	height: var(--fc-cut);
	background: linear-gradient(135deg, transparent 48%, rgba(255, 220, 220, 0.55) 50%, transparent 52%);
	pointer-events: none;
}

.ng-flight-card .ng-flight-title,
.ng-flight-card .ng-flight-incoming-alert {
	font-family: var(--cyberpunk-font);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 4px;
}

.ng-flight-card .ng-flight-countdown,
.ng-flight-card .ng-flight-incoming-detail {
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	line-height: 1.35;
	color: rgba(255, 236, 236, 0.92);
	margin: 0;
}

.ng-flight-card .ng-flight-actions {
	margin-top: 8px;
}

.ng-flight-card__btn {
	appearance: none;
	border: 1px solid rgba(255, 230, 230, 0.55);
	background: rgba(0, 0, 0, 0.28);
	color: #fff;
	font-family: var(--cyberpunk-font);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 10px;
	cursor: pointer;
	clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.ng-flight-card__btn:hover,
.ng-flight-card__btn:focus-visible {
	background: rgba(0, 0, 0, 0.45);
	border-color: #fff;
	outline: none;
}

.ng-flight-card__btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.ng-flight-card__btn--info {
	border-color: rgba(220, 254, 94, 0.55);
	color: #dcfe5e;
}

.ng-flight-card__btn--info:hover,
.ng-flight-card__btn--info:focus-visible {
	border-color: #dcfe5e;
	background: rgba(220, 254, 94, 0.12);
	color: #fff;
}

.ng-flight-card__status {
	padding: 2px 8px 6px;
	font-family: var(--cyberpunk-font);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--fc-red-bright);
	text-shadow: 0 0 8px var(--fc-red-glow);
}

/* Incoming: staerkerer Alert-Puls am Attention-Label */
.ng-flight-list--has-incoming .ng-flight-card--incoming .ng-flight-card__attention,
.ng-flight-list--has-incoming .ng-flight-card.incoming .ng-flight-incoming-alert {
	animation: ngHostileBlink 1s ease-in-out infinite;
}

.ng-flight-card--outgoing .ng-flight-card__body {
	background: color-mix(in srgb, var(--fc-red-fill) 82%, rgba(40, 0, 0, 0.9));
}

/* ============================================================
   Kampfbericht-Modal (Cyberpunk)
   Oeffnet sich ueber Nachrichten / Info-Button; muss ueber Dock-
   Modals (z-index 15000) liegen → Quelle: reloaded 16000.
   ============================================================ */

body.ui-reboot .ng-combat-modal-backdrop {
	/* Ueber gestapelte Dock-Modals (_modalBaseZ=100000 in ng_header_logic.js). */
	z-index: 200000;
	background:
		radial-gradient(circle at 50% 28%, rgba(220, 254, 94, 0.08), transparent 55%),
		rgba(4, 6, 4, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 1.5rem;
	box-sizing: border-box;
}

body.ui-reboot .ng-combat-modal-card {
	width: min(72rem, calc(100vw - 2rem));
	max-width: min(72rem, calc(100vw - 2rem));
	max-height: min(90vh, 90dvh);
	background: #0E120C;
	/* Bewusst ohne Border/Outline – nur Clip-Silhouette + leichte Tiefenwirkung. */
	border: none;
	border-radius: 0;
	outline: none;
	clip-path: polygon(
		0 0,
		calc(100% - 14px) 0,
		100% 14px,
		100% 100%,
		14px 100%,
		0 calc(100% - 14px)
	);
	box-shadow: none;
	filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55));
	color: var(--cyberpunk-text);
	font-family: var(--cyberpunk-font);
	overflow: hidden;
}

body.ui-reboot .ng-combat-modal-header {
	padding: 12px 48px 12px 16px;
	border-bottom: 1px solid var(--cyberpunk-border-dim);
	background: rgba(220, 254, 94, 0.06);
	justify-content: flex-start;
	text-align: left;
}

body.ui-reboot .ng-combat-modal-title,
body.ui-reboot h2.ng-combat-modal-title {
	margin: 0;
	font-family: var(--cyberpunk-font);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cyberpunk-primary);
	text-shadow: 0 0 10px var(--cyberpunk-primary-glow-soft);
}

body.ui-reboot .ng-combat-modal-close {
	/* Abstand zur abgeschnittenen Ecke (clip-path 14px), damit Klickziel greifbar bleibt. */
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--cyberpunk-primary);
	font-size: 1.6rem;
	line-height: 1;
	padding: 6px 10px;
	min-width: 2.5rem;
	min-height: 2.5rem;
	z-index: 2;
	pointer-events: auto;
}

body.ui-reboot .ng-combat-modal-close:hover,
body.ui-reboot .ng-combat-modal-close:focus-visible {
	color: var(--cyberpunk-primary-bright);
	transform: translateY(-50%);
	outline: none;
}

body.ui-reboot .ng-combat-modal-body {
	padding: 14px 16px 18px;
	background:
		linear-gradient(180deg, rgba(220, 254, 94, 0.03), transparent 40%),
		#0E120C;
	scrollbar-color: var(--cyberpunk-primary) rgba(0, 0, 0, 0.35);
}

body.ui-reboot .ng-combat-modal-body::-webkit-scrollbar-thumb {
	background: var(--cyberpunk-primary);
	opacity: 1;
}

/* --- Berichtsinhalt --- */

body.ui-reboot .ng-combat-report {
	color: var(--cyberpunk-text);
	font-family: var(--cyberpunk-font);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.ui-reboot .ng-report-top {
	border: 1px solid var(--cyberpunk-border-dim);
	background: rgba(56, 63, 28, 0.28);
	padding: 10px 12px;
}

body.ui-reboot .ng-report-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	align-items: center;
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
}

body.ui-reboot .ng-header-label {
	color: var(--cyberpunk-tertiary-ink);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-right: 6px;
}

body.ui-reboot .ng-header-value {
	color: var(--cyberpunk-text-bright);
}

body.ui-reboot .ng-mission-attack {
	color: var(--cyberpunk-danger);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.ui-reboot .ng-mission-scan {
	color: var(--cyberpunk-secondary);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 0 8px var(--cyberpunk-secondary-glow);
}

body.ui-reboot .ng-report-error {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid rgba(255, 0, 60, 0.55);
	background: rgba(255, 0, 60, 0.1);
	padding: 10px 12px;
	color: #ffb3c4;
}

body.ui-reboot .ng-combat-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

body.ui-reboot .ng-col {
	border: 1px solid var(--cyberpunk-border-dim);
	background: rgba(14, 18, 12, 0.72);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

body.ui-reboot .ng-col--winner {
	border-color: rgba(8, 220, 172, 0.55);
	box-shadow: inset 0 0 0 1px rgba(8, 220, 172, 0.12);
}

body.ui-reboot .ng-col--loser {
	border-color: rgba(255, 0, 60, 0.4);
	opacity: 0.92;
}

body.ui-reboot .ng-col-role {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--cyberpunk-font);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cyberpunk-primary);
	border-bottom: 1px solid var(--cyberpunk-border-dim);
	padding-bottom: 8px;
}

body.ui-reboot .ng-col-kw {
	color: var(--cyberpunk-tertiary-ink);
	font-family: var(--cyberpunk-font-mono);
	font-weight: 500;
	letter-spacing: 0.04em;
}

body.ui-reboot .ng-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	border: 1px solid transparent;
}

/* Kampfbericht-Outcome: kompakte Labels, keine HUD-Kreise */
body.ui-reboot.ng-shell.ng-game-layout .ng-combat-report .ng-badge.ng-badge--winner,
body.ui-reboot.ng-shell.ng-game-layout .ng-combat-report .ng-badge.ng-badge--loser,
body.ui-reboot.ng-shell.ng-game-layout .ng-combat-report .ng-badge.ng-badge--scan-ok,
body.ui-reboot.ng-shell.ng-game-layout .ng-combat-report .ng-badge.ng-badge--scan-lost,
body.ui-reboot .ng-combat-report .ng-badge.ng-badge--winner,
body.ui-reboot .ng-combat-report .ng-badge.ng-badge--loser,
body.ui-reboot .ng-combat-report .ng-badge.ng-badge--scan-ok,
body.ui-reboot .ng-combat-report .ng-badge.ng-badge--scan-lost {
	--ng-badge-radius: 0;
	--ng-badge-padding: 3px 10px;
	--ng-badge-min-width: 0;
	--ng-badge-height: auto;
	--ng-badge-font-size: 0.68rem;
	aspect-ratio: auto;
	border-radius: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	padding: 3px 10px;
	line-height: 1.2;
	box-shadow: none;
	text-shadow: none;
	clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

body.ui-reboot .ng-badge--winner,
body.ui-reboot .ng-combat-report .ng-badge--winner {
	color: #041510;
	background: var(--cyberpunk-secondary);
	border-color: var(--cyberpunk-secondary);
}

body.ui-reboot .ng-badge--loser,
body.ui-reboot .ng-combat-report .ng-badge--loser {
	color: #fff;
	background: rgba(255, 0, 60, 0.75);
	border-color: var(--cyberpunk-danger);
}

body.ui-reboot .ng-combat-report .ng-badge--scan-ok {
	color: #041510;
	background: var(--cyberpunk-secondary);
	border-color: var(--cyberpunk-secondary);
}

body.ui-reboot .ng-combat-report .ng-badge--scan-lost {
	color: #fff;
	background: rgba(255, 0, 60, 0.75);
	border-color: var(--cyberpunk-danger);
}

body.ui-reboot .ng-col-header {
	display: flex;
	gap: 12px;
	align-items: center;
}

body.ui-reboot .ng-player-avatar,
body.ui-reboot .ng-player-avatar--compose {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border: 1px solid var(--cyberpunk-border-dim);
	background: rgba(0, 0, 0, 0.35);
	flex-shrink: 0;
}

body.ui-reboot .ng-player-avatar--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--cyberpunk-border-dim);
	color: var(--cyberpunk-secondary);
	font-size: 1.4rem;
	background: rgba(8, 220, 172, 0.08);
}

body.ui-reboot .ng-player-name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--cyberpunk-text-bright);
	letter-spacing: 0.04em;
}

body.ui-reboot .ng-player-city {
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.8rem;
	color: var(--cyberpunk-secondary);
}

body.ui-reboot .ng-player-alliance {
	font-size: 0.78rem;
	color: var(--cyberpunk-tertiary-ink);
}

body.ui-reboot .ng-chip-alliance {
	color: var(--cyberpunk-text-bright);
}

body.ui-reboot .ng-report-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

body.ui-reboot .ng-flag {
	padding: 3px 8px;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--cyberpunk-border-dim);
	background: rgba(220, 254, 94, 0.06);
	color: var(--cyberpunk-muted);
}

body.ui-reboot .ng-flag-protect {
	border-color: rgba(77, 159, 255, 0.45);
	color: var(--cyberpunk-neon-blue);
}

body.ui-reboot .ng-flag-shield {
	border-color: rgba(8, 220, 172, 0.45);
	color: var(--cyberpunk-secondary);
}

body.ui-reboot .ng-flag-colonize {
	border-color: rgba(220, 254, 94, 0.55);
	color: var(--cyberpunk-primary);
}

body.ui-reboot .ng-losses-title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cyberpunk-tertiary-ink);
	margin-bottom: 6px;
}

body.ui-reboot .ng-losses-empty {
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.8rem;
	color: var(--cyberpunk-tertiary-ink);
	padding: 8px 0;
}

body.ui-reboot .ng-losses-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

body.ui-reboot .ng-losses-item {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 6px 8px;
	border: 1px solid rgba(220, 254, 94, 0.12);
	background: rgba(0, 0, 0, 0.28);
}

body.ui-reboot .ng-losses-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

body.ui-reboot .ng-losses-name {
	font-size: 0.86rem;
	color: var(--cyberpunk-text-bright);
	min-width: 0;
}

body.ui-reboot .ng-losses-kw {
	color: var(--cyberpunk-tertiary-ink);
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.75rem;
}

body.ui-reboot .ng-loss-red {
	color: var(--cyberpunk-danger);
	font-weight: 700;
	letter-spacing: 0.04em;
}

body.ui-reboot .ng-loss-none {
	color: var(--cyberpunk-tertiary-ink);
	font-size: 0.78rem;
}

body.ui-reboot .ng-battle-analysis {
	border: 1px solid var(--cyberpunk-border-dim);
	background: rgba(56, 63, 28, 0.22);
	padding: 12px;
}

body.ui-reboot .ng-analysis-title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cyberpunk-primary);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

body.ui-reboot .ng-analysis-labels {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--cyberpunk-font-mono);
	font-size: 0.78rem;
	margin-bottom: 6px;
	color: var(--cyberpunk-text);
}

body.ui-reboot .ng-analysis-bar {
	display: flex;
	height: 10px;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid var(--cyberpunk-border-dim);
	overflow: hidden;
}

body.ui-reboot .ng-analysis-bar-att {
	background: linear-gradient(90deg, #ff003c, #ff6b8a);
	height: 100%;
}

body.ui-reboot .ng-analysis-bar-def {
	background: linear-gradient(90deg, #08dcac, #4aa795);
	height: 100%;
}

body.ui-reboot .ng-analysis-prob {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	margin-top: 10px;
	font-size: 0.86rem;
}

body.ui-reboot .ng-analysis-prob-label {
	color: var(--cyberpunk-tertiary-ink);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.72rem;
}

body.ui-reboot .ng-analysis-prob-value {
	font-family: var(--cyberpunk-font-mono);
	font-weight: 700;
	font-size: 1.05rem;
}

body.ui-reboot .ng-prob-high {
	color: var(--cyberpunk-secondary);
}

body.ui-reboot .ng-prob-low {
	color: var(--cyberpunk-danger);
}

body.ui-reboot .ng-analysis-summary {
	margin-top: 10px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--cyberpunk-text);
}

body.ui-reboot .ng-report-resources {
	border: 1px solid rgba(8, 220, 172, 0.4);
	background: rgba(8, 220, 172, 0.06);
	padding: 12px;
}

body.ui-reboot .ng-resources-title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cyberpunk-secondary);
	margin-bottom: 10px;
}

body.ui-reboot .ng-resources-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

body.ui-reboot .ng-resource-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	border: 1px solid var(--cyberpunk-border-dim);
	background: rgba(0, 0, 0, 0.28);
}

body.ui-reboot .ng-resource-name {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cyberpunk-tertiary-ink);
}

body.ui-reboot .ng-resource-value {
	font-family: var(--cyberpunk-font-mono);
	font-size: 1rem;
	font-weight: 700;
	color: var(--cyberpunk-text-bright);
}

body.ui-reboot .ng-mt-8 {
	margin-top: 0;
}

@media (max-width: 820px) {
	body.ui-reboot .ng-combat-2col {
		grid-template-columns: 1fr;
	}

	body.ui-reboot .ng-resources-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.ui-reboot .ng-combat-modal-card {
		width: min(100vw - 1rem, 72rem);
		max-height: min(94vh, 94dvh);
	}
}