/* ═══════════════════════════════════════════════════════════════
   THEME.CSS – Tokens, Fonts, Reset, Inputs, Buttons, Utilities
   Eine :root-Quelle. Tactical-Werte sind die Token-Werte.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
	font-family: 'Orbitron';
	src: url('/fonts/Orbitron-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Glass TTY VT220';
	src: url('/fonts/Glass_TTY_VT220.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Clacon2';
	src: url('/fonts/clacon2.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--rgb-white: 255 255 255;
	--rgb-black: 0 0 0;
	--rgb-neon: 255 0 51;
	--rgb-azure: 138 138 138;
	--rgb-ice: 200 200 200;
	--rgb-blue: 138 138 138;
	--rgb-amber: 217 119 6;
	--rgb-pink: 255 0 51;
	--rgb-red: 220 38 38;

	--ui-bg-space: #0a0a0a;
	--ui-bg-vignette: #0d0d0d;
	--ui-white: #c8c8c8;
	--ng-opaque-white: #c8c8c8;
	--ng-opaque-black: #000000;
	--ui-grey: #8a8a8a;
	--ui-accent-blue: #8a8a8a;
	--ui-alert-orange: #ff8c00;
	--ng-success-bright: #22c55e;
	--ng-error-soft: #ff6b6b;
	--ng-preference-action-color: #c8c8c8;
	--ng-combat-outcome-ink: #041510;
	--ng-terminal-muted: #8a8a8a;
	--ng-terminal-muted-glow: rgba(138, 138, 138, 0.35);
	--ng-terminal-muted-strong-glow: rgba(138, 138, 138, 0.9);
	--ng-terminal-muted-panel: rgba(138, 138, 138, 0.14);
	--ng-terminal-muted-frame-glow: rgba(138, 138, 138, 0.45);
	--color-warn: #f87171;
	--color-warn-strong: #ef4444;
	--ng-tech-active-border: #ff0033;
	--ng-tech-idle-border: #3a3a3a;
	--ng-plane-signal-loss-color: #a83246;
	--ng-opaque-gold: #c8c8c8;
	--ui-data-soft: #8a8a8a;
	--ui-glow-deep: #1a1a1a;
	--ui-radar-green: rgba(138, 138, 138, 0.55);
	--ui-glass-fill: #131313;
	--ui-glass-border: 1px solid #3a3a3a;
	--ui-panel-topbar-grad: none;
	--color-primary: #2d3748;
	--color-amber: rgb(var(--rgb-amber));
	--color-danger: #dc2626;
	--color-success: #16a34a;
	--color-warning: #f59e0b;
	--color-base: #E8E9EC;
	--color-accent: #ff0033;
	--color-accent-hover: #ff3355;
	--badge-accent-bg: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 78%, #ffffff 22%) 0%, var(--color-accent) 100%);
	--badge-accent-color: #1f2937;
	--badge-accent-inset: inset 0 1px 0 rgba(255, 255, 255, 0.35);
	--badge-accent-shadow: 0 4px 12px rgba(0, 0, 0, 0.34), var(--badge-accent-inset);
	--badge-accent-border: rgba(15, 23, 42, 0.8);
	--badge-accent-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
	--header-bg: #131313;
	--card-bg: #131313;
	--card-radius: 8px;
	--panel-left-width: 70px;
	--scanline-color: transparent;
	--space-2: 2px;
	--space-3: 3px;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-20: 20px;
	--space-28: 28px;
	--pad-panel-x: var(--space-12);
	--pad-panel-y: var(--space-12);
	--pad-head-x: var(--space-12);
	--pad-head-y: 0;
	--pad-body-x: var(--space-12);
	--pad-body-y: var(--space-12);
	--pad-compact-x: var(--space-8);
	--pad-compact-y: var(--space-8);
	--gap-stack: var(--space-10);
	--gap-inline: var(--space-8);
	--gap-tight: var(--space-4);

	--cyberpunk-primary: #ff0033;
	--cyberpunk-primary-bright: #ff4d6d;
	--cyberpunk-primary-dim: #b30024;
	--cyberpunk-neon-pink: #ff0033;
	--cyberpunk-neon-yellow: var(--cyberpunk-primary);
	--cyberpunk-primary-glow: rgb(var(--rgb-neon) / 45%);
	--cyberpunk-primary-glow-soft: rgb(var(--rgb-neon) / 18%);
	--cyberpunk-border: rgb(var(--rgb-neon) / 75%);
	--cyberpunk-border-dim: rgb(var(--rgb-neon) / 35%);
	--cyberpunk-scanline: rgb(var(--rgb-neon) / 4.5%);
	--cyberpunk-secondary: #8a8a8a;
	--cyberpunk-secondary-dim: #5a5a5a;
	--cyberpunk-secondary-glow: rgba(138, 138, 138, 0.4);
	--cyberpunk-tertiary: #2a2a2a;
	--cyberpunk-tertiary-mid: #3a3a3a;
	--cyberpunk-tertiary-ink: #8a8a8a;
	--cyberpunk-bg: #131313;
	--cyberpunk-bg-panel: #131313;
	--cyberpunk-bg-panel-solid: #131313;
	--cyberpunk-text: #8a8a8a;
	--cyberpunk-text-bright: #c8c8c8;
	--cyberpunk-text-on-primary: #131313;
	--cyberpunk-text-on-secondary: #c8c8c8;
	--cyberpunk-danger: #FF003C;
	--cyberpunk-muted: #8a8a8a;
	--cyberpunk-neon-blue: #8a8a8a;
	--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(138, 138, 138, 0.45);
	--cyberpunk-weapon-proton-glow: rgb(var(--rgb-pink) / 45%);
	--cyberpunk-weapon-neutron-glow: var(--cyberpunk-primary-glow);
	--cyberpunk-matrix-bg-color: var(--cyberpunk-bg-panel);
	--cyberpunk-matrix-bg-image: none;
	--cyberpunk-matrix-bg-size: auto;
	--cyberpunk-cut: 10px;
	--cyberpunk-cut-sm: 6px;
	--cyberpunk-cut-notch: 18px;
	--cyberpunk-stroke: 1px;
	--cyberpunk-header-h: 28px;
	--cyberpunk-font: "Orbitron", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--cyberpunk-font-mono: "Share Tech Mono", "Consolas", "Courier New", monospace;
	--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%
	);

	--hud-tac-bg: #131313;
	--hud-tac-accent: #ff0033;
	--hud-tac-accent-dim: rgba(255, 0, 51, 0.22);
	--hud-tac-accent-glow: rgba(255, 0, 51, 0.45);
	--hud-tac-ink: #8a8a8a;
	--hud-tac-steel: #3a3a3a;
	--hud-tac-line: rgba(200, 200, 200, 0.16);
	--hud-tac-font: "Orbitron", "Segoe UI", sans-serif;

	--ng-city3d-label-color: #8a8a8a;
	--ng-player-avatar-radius: 10px;
	--ng-player-avatar-border: 1px solid #3a3a3a;
	--ng-player-avatar-bg: rgba(0, 0, 0, 0.35);
	--font-body: 'Orbitron';
	--font-display: var(--font-body);
	--font-heading: var(--font-body);
	--font-mono: var(--font-body);
	--font-terminal: 'Clacon2', 'Glass TTY VT220', 'Courier New', monospace;
	--fs-terminal-hud: 12px;
	--crt-phosphor-bright: #c8c8c8;
	--crt-phosphor: #8a8a8a;
	--crt-phosphor-dim: #5a5a5a;
	--crt-phosphor-faint: #3a3a3a;
	--crt-tube-bg: #0a0a0a;
	--crt-tube-mid: #101010;
	--crt-tube-glow: #1a1a1a;
	--ng-tile-cube-width: 175px;
	--ng-tile-cube-aspect: 8 / 6;
	--ng-panel-modal-inset-x: 10px;
	--ng-fleet-cube-width: 200px;
	--ng-fleet-cube-aspect: 4 / 3;
	--ng-defense-columns-gap: 25px;
	--fs-h1: 30px;
	--fs-h2: 20px;
	--fs-h3: 14px;
	--fs-body: 12px;
	--fs-8: 8px;
	--fs-10: 10px;
	--fs-11: 11px;
	--fs-13: 13px;
	--fs-12: var(--fs-body);
	--fs-14: var(--fs-h3);
	--fs-16: var(--fs-h3);
	--fs-18: var(--fs-h2);
	--fs-20: var(--fs-h2);
	--bevel-sm: 0px;
	--bevel-lg: 0px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--t-fast: 120ms;
	--t-mid: 200ms;
	--hud-surface: #131313;
	--hud-stroke: #3a3a3a;
	--hud-stroke-soft: rgba(58, 58, 58, 0.6);
	--hud-glow: rgba(255, 0, 51, 0.16);
	--hud-sf-bg: #131313;
	--hud-sf-cyan: #8a8a8a;
	--hud-sf-cyan-glow: rgba(138, 138, 138, 0.45);
	--hud-sf-amber: #ff0033;
	--hud-sf-amber-strong: #ff4d6d;
	--hud-sf-amber-deep: #b30024;
	--hud-sf-amber-glow: rgba(255, 0, 51, 0.5);
	--hud-sf-red: #ff0033;
	--hud-sf-red-glow: rgba(255, 0, 51, 0.5);
	--hud-sf-green: #8a8a8a;
	--hud-sf-bevel: 12px;
	--landing-login-corner-border: rgba(200, 200, 200, 0.35);
	--landing-footer-padding-y: var(--space-20);
	--ng-content-max-width: min(960px, 100%);
	--ng-modal-width-compact: min(26rem, calc(100vw - 32px));
	--ng-modal-width-default: min(38rem, calc(100vw - 32px));
	--ng-modal-width-wide: min(52rem, calc(100vw - 32px));
	--ng-modal-width-full: min(68rem, calc(100vw - 32px));
	--ng-modal-width-airport: min(76rem, calc(100vw - 32px));
	--ng-modal-width-avatar: min(56rem, calc(100vw - 32px));
	--ng-modal-height-avatar: min(90vh, 52rem);
	--ng-modal-width-panel: min(60rem, calc(100vw - 32px));
	--ng-modal-width-panel-max: min(60rem, calc(100vw - 32px));
	--ng-modal-height-panel: 95vh;
	--ng-modal-width-trade: min(72rem, calc(100vw - 32px));
	--ng-modal-width-trade-content: min(68rem, 100%);
	--ng-modal-width-alliance: min(68rem, calc(100vw - 32px));
	--ng-modal-width-toplist: min(58rem, calc(100vw - 32px));
	--ng-modal-field-max: 20rem;
	--ng-modal-textarea-max: 28rem;
	--ng-pref-field-max: 22rem;
	--ng-pref-input-font: 0.875rem;
	--ng-pref-btn-clip: none;
	--ng-pref-btn-bg: #131313;
	--ng-pref-btn-bg-hover: #1a1a1a;
	--ng-pref-btn-border: #3a3a3a;
	--ng-pref-btn-border-hover: #ff0033;
	--ng-coord-col-coord: 3.25rem;
	--ng-coord-col-name: 8.5rem;
	--ng-coord-col-owner: 28rem;
	--ng-coord-col-points: 5.75rem;
	--ng-coord-col-actions: 8.25rem;
	--ng-coord-table-min: calc(
		var(--ng-coord-col-coord) + var(--ng-coord-col-name) + var(--ng-coord-col-owner) +
		var(--ng-coord-col-points) + var(--ng-coord-col-actions)
	);
	--ng-coord-embed-min: var(--ng-coord-table-min);
	--ng-modal-surface-top: #131313;
	--ng-modal-surface-bottom: #131313;
	--ng-modal-surface: #131313;
	--ng-modal-backdrop-scrim: rgba(10, 10, 10, 0.62);
	--ng-modal-backdrop-scrim-edge: rgba(10, 10, 10, 0.72);
	--ng-modal-backdrop-blur: 3px;
	--ng-modal-card-blur: 0px;
	--ng-modal-card-saturate: 1;
	--ng-modal-border: 1px solid #3a3a3a;
	--ng-modal-shadow: 0 0 0 1px rgba(255, 0, 51, 0.22);
	--ng-modal-header-bg: #131313;
	--ng-modal-header-border: #3a3a3a;
	--ng-modal-widget-bg: #131313;
	--ng-modal-widget-border: #3a3a3a;
	--ng-modal-panel-bg: #131313;
	--ng-modal-input-bg: #1a1a1a;
	--ng-modal-input-border: #3a3a3a;
	--ng-modal-close-color: #ff0033;
	--ng-modal-close-border: #3a3a3a;
	--ng-modal-close-bg: #1a1a1a;
	--ng-modal-label-muted: #8a8a8a;
	--ng-mu-backdrop-padding: 1%;
	--ng-mu-backdrop-padding-y: var(--ng-mu-backdrop-padding);
	--ng-mu-backdrop-padding-x: var(--ng-mu-backdrop-padding);
	--ng-mu-z-index: 10000;
	--ng-mu-card-radius: var(--space-16);
	--ng-mu-card-radius-portrait: 0px;
	--ng-mu-header-padding-y: var(--space-14);
	--ng-mu-header-padding-x: var(--space-20);
	--ng-mu-body-padding: var(--space-20);
	--ng-mu-body-padding-portrait: var(--space-16);
	--ng-mu-max-width: 42rem;
	--ng-mu-transition: 0.2s ease;
	--ng-mu-title-padding-x: 52px;
	--ng-mu-close-radius: 10px;
	--ng-mu-close-padding: var(--space-4) var(--space-10);
	--ng-mu-input-radius: var(--space-6);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
	padding: 0;
	height: 100%;
}

h1 { font-family: var(--font-body); font-size: var(--fs-h1); font-weight: 400; color: var(--cyberpunk-text-bright); margin: 0 0 var(--space-16); letter-spacing: 1px; line-height: 1.2; }
h2 { font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 400; color: var(--cyberpunk-text-bright); margin: 0 0 var(--space-12); letter-spacing: 0.8px; line-height: 1.3; }
h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 400; color: var(--cyberpunk-text-bright); margin: 0 0 var(--space-8); letter-spacing: 0.5px; line-height: 1.4; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--cyberpunk-text-bright); }

body.ui-reboot {
	display: block;
}

body.ui-reboot.ng-shell {
	background-repeat: no-repeat;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(138, 138, 138, 0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 0, 51, 0.45); }

input[type="checkbox"] {
	-webkit-appearance: none; appearance: none;
	width: 16px; height: 16px; margin: 0;
	border: 1px solid var(--hud-tac-steel); border-radius: 3px;
	background-color: transparent !important;
	display: inline-grid; place-content: center; cursor: pointer;
}
input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform 120ms ease-in-out; background-color: var(--hud-tac-accent); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="radio"]:not(:checked) { background-color: transparent !important; }
input[type="radio"] {
	-webkit-appearance: none; appearance: none;
	width: 16px; height: 16px; margin: 0;
	border: 1px solid var(--hud-tac-steel); border-radius: 50%;
	background-color: transparent !important;
	display: inline-grid; place-content: center; cursor: pointer;
}
input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; transform: scale(0); transition: transform 120ms ease-in-out; background-color: var(--hud-tac-accent); }
input[type="radio"]:checked::before { transform: scale(1); }

.ui-stack { display: grid; gap: var(--space-12); }
.ui-gap-8 { gap: var(--space-8); }
.ui-gap-12 { gap: var(--space-12); }
.ui-log strong { color: var(--cyberpunk-text-bright); }
.ui-log__line { display: block; margin-bottom: var(--space-4); }
.ui-ticker { display: none; }

.ng-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-16);
	border: 1px solid var(--hud-tac-steel);
	border-radius: 8px;
	background: #131313;
	color: var(--hud-tac-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	cursor: pointer;
	transition: border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}

.ng-button:hover {
	border-color: var(--hud-tac-accent);
	color: var(--hud-tac-accent);
}

.ng-button-primary {
	background: #131313;
	border-color: var(--hud-tac-accent);
	color: var(--hud-tac-accent);
}

/* ═══════════════════════════════════════════════════════════════
   ZUSAETZLICHE UTILITY-KLASSEN & KOMPATIBILITAET
   ═══════════════════════════════════════════════════════════════ */
.ng-flex { display: flex; }
.ng-flex-col { flex-direction: column; }
.ng-gap-6 { gap: var(--space-6); }
.ng-gap-10 { gap: var(--space-10); }
.ng-justify-right { justify-content: flex-end; }
.ng-mt-5 { margin-top: 5px; }
.ng-font-12 { font-size: var(--fs-12); }
.ng-text-muted { color: rgb(var(--rgb-ice) / 55%); }
.ng-input {
	width: 100%;
	padding: var(--space-8) var(--space-12);
	background: rgba(8, 16, 26, 0.72);
	border: 1px solid rgb(var(--rgb-azure) / 24%);
	color: var(--ui-white);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	border-radius: 6px;
}
.ng-input:focus { border-color: var(--ui-white); box-shadow: 0 0 0 2px rgb(var(--rgb-ice) / 12%); outline: none; }

/* Body-Scroll-Lock fuer Burger-Menu */
.ng-body-no-scroll { overflow: hidden !important; }

/* Admin-Tuning: je ein Toggle-Button + Panel fuer Stadtplattform und Planet
   (Aufbau/Klassen analog .ng-plane-effects-tuning / .ng-text-effects-tuning,
   nur mit blauem Akzent statt Gruen zur Unterscheidung). Nur fuer echte
   Admins sichtbar, siehe NG_BOOTSTRAP.isAdmin in ng_city3d_tuning_panel.js. */
.ng-citystage-tuning,
.ng-planetstage-tuning {
	position: fixed;
	top: 76px;
	z-index: 210000;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--ui-white);
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.04em;
	pointer-events: auto;
	touch-action: none;
	user-select: none;
}
.ng-citystage-tuning { right: 96px; }
.ng-planetstage-tuning { right: 136px; }

.ng-citystage-tuning__toggle,
.ng-citystage-tuning__copy,
.ng-planetstage-tuning__toggle,
.ng-planetstage-tuning__copy {
	box-sizing: border-box;
	border: 1px solid rgb(var(--rgb-azure) / 62%);
	background: rgb(var(--rgb-azure) / 16%);
	color: var(--ui-white);
	font: inherit;
	font-size: 10px;
	letter-spacing: 0.08em;
	cursor: pointer;
}
.ng-citystage-tuning__toggle,
.ng-planetstage-tuning__toggle {
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 16px;
}
.ng-planetstage-tuning__body {
	position: absolute;
	top: 40px;
	right: 0;
	width: 224px;
	padding: var(--space-12);
	background: rgba(5, 10, 16, 0.96);
	border: 1px solid rgb(var(--rgb-azure) / 62%);
	box-shadow: 0 0 18px rgb(var(--rgb-azure) / 18%);
}
.ng-citystage-tuning__body {
	position: absolute;
	top: 40px;
	right: 0;
	width: min(440px, calc(100vw - 24px));
	max-height: calc(100dvh - 128px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	padding: var(--space-14) var(--space-16);
	overflow: hidden;
	background: rgba(5, 10, 16, 0.96);
	border: 1px solid rgb(var(--rgb-azure) / 62%);
	box-shadow: 0 0 18px rgb(var(--rgb-azure) / 18%);
}
.ng-citystage-tuning__body[hidden],
.ng-planetstage-tuning__body[hidden] { display: none; }
.ng-citystage-tuning__copy,
.ng-planetstage-tuning__copy { width: 100%; padding: 7px var(--space-8); }
.ng-citystage-tuning__head,
.ng-planetstage-tuning__head {
	display: flex;
	justify-content: space-between;
	margin: 0 0 var(--space-10);
	color: var(--ng-opaque-gold);
}
.ng-citystage-tuning__mode,
.ng-planetstage-tuning__mode { color: rgb(var(--rgb-ice) / 72%); font-size: 10px; }
.ng-citystage-tuning label:not(.ng-citystage-tuning__toggle-row):not(.ng-citystage-tuning__color-row),
.ng-planetstage-tuning label { display: block; margin: var(--space-8) 0; color: rgb(var(--rgb-ice) / 80%); }
.ng-citystage-tuning output,
.ng-planetstage-tuning output { float: right; color: var(--ui-white); }
.ng-citystage-tuning input[type="range"],
.ng-planetstage-tuning input[type="range"] {
	display: block;
	width: 100%;
	margin: var(--space-4) 0;
	accent-color: rgb(var(--rgb-azure));
	cursor: pointer;
}
.ng-planetstage-tuning__output {
	display: block;
	width: 100%;
	min-height: 76px;
	box-sizing: border-box;
	margin: var(--space-10) 0;
	padding: 7px;
	resize: none;
	background: rgba(10, 22, 34, 0.9);
	border: 1px solid rgb(var(--rgb-azure) / 30%);
	color: rgb(var(--rgb-ice));
	font: 10px/1.45 monospace;
}
.ng-citystage-tuning__body header { margin: 0; }
.ng-citystage-tuning__controls {
	flex: 1 1 auto;
	min-height: 0;
	padding-right: var(--space-6);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ng-citystage-tuning__section { padding: var(--space-8) 0; border-top: 1px solid rgb(var(--rgb-azure) / 18%); }
.ng-citystage-tuning__section:first-child { padding-top: 0; border-top: 0; }
.ng-citystage-tuning__section h2 { margin: 0 0 var(--space-8); color: var(--ng-opaque-gold); font-size: 11px; letter-spacing: 0.08em; }
.ng-citystage-tuning__toggle-row,
.ng-citystage-tuning__color-row {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	margin: var(--space-8) 0;
}
.ng-citystage-tuning__toggle-row input[type="checkbox"] {
	margin-left: auto;
	width: 18px;
	height: 18px;
	margin-top: 0;
	margin-bottom: 0;
	accent-color: rgb(var(--rgb-azure));
	cursor: pointer;
}
.ng-citystage-tuning__color-row input[type="color"] {
	margin-left: auto;
	width: 32px;
	height: 24px;
	padding: 1px;
	border: 1px solid rgb(var(--rgb-azure) / 42%);
	background: transparent;
	cursor: pointer;
}
.ng-citystage-tuning__output {
	display: block;
	flex: 0 0 108px;
	width: 100%;
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 7px;
	resize: none;
	background: rgba(10, 22, 34, 0.9);
	border: 1px solid rgb(var(--rgb-azure) / 30%);
	color: rgb(var(--rgb-ice));
	font: 10px/1.45 monospace;
}
.ng-citystage-tuning__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.ng-citystage-tuning__actions button {
	min-height: 32px;
	padding: var(--space-6) var(--space-8);
	border: 1px solid rgb(var(--rgb-azure) / 62%);
	background: rgb(var(--rgb-azure) / 16%);
	color: var(--ui-white);
	font: inherit;
	font-size: 10px;
	letter-spacing: 0.08em;
	cursor: pointer;
}
.ng-citystage-tuning__actions button:hover { background: rgb(var(--rgb-azure) / 38%); }
.ng-citystage-tuning__copy:hover,
.ng-citystage-tuning.is-copied .ng-citystage-tuning__copy,
.ng-planetstage-tuning__copy:hover,
.ng-planetstage-tuning.is-copied .ng-planetstage-tuning__copy { background: rgb(var(--rgb-azure) / 38%); }

/* Scramble-Text Effekt (ng_scramble_text.js) */
.ng-scramble-char { display: inline-block; }

/* Galaxy-Tooltip (Basis; Karten-Layout siehe .ng-galaxy-tooltip--overlay oben) */
.ng-galaxy-tooltip {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--ui-white);
	pointer-events: none;
}