/* tiles_and_dices.css
 * Enthält ausgelagerte Styles für:
 * - Sections Slider / Panels
 * - Inline Detail Panel (Build/Tech)
 * - Cube Tiles (Würfel)
 * - Generic & Tile Progress Bars
 * - Mini Active Tiles (Panel + Main Bar)
 * - Tech Tiles Grid & Progress
 *
 * Hinweis: Alle Klassenbezeichnungen wurden unverändert übernommen,
 * damit vorhandenes JavaScript weiterhin funktioniert.
 */

/* === Generic Progress Bars for Builds & Hangar Upgrade === */
.ng-progress-container {
	display: flex;
	align-items: center;
	margin-bottom: 3px;
}

.ng-progress-label {
	width: 35px;
	font-size: 14px;
	color: #464543;
}

.ng-progress-bar-visual {
	width: 100px;
	height: 40px;
	border: 1px solid #464543;
	margin: 0 2px;
	position: relative;
	background-color: #000000;
}

.ng-progress-fill {
	height: 14px;
	background-color: #464543;
	margin: 1px;
}

.ng-progress-percent {
	font-size: 14px;
	min-width: 30px;
}

.ng-hu-progress {
	display: block;
	position: relative;
	width: 100%;
	height: 16px;
	background: #272a2e;
	border: 1px solid #42484f;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset 0 0 4px rgba(0, 0, 0, .7)
}

.ng-hu-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #6d8f3a, #9dc451);
	box-shadow: 0 0 4px #9dc451aa, 0 0 12px -2px #9dc451cc;
	transition: width .6s cubic-bezier(.4, .08, .2, 1)
}

.ng-hu-progress-bar .ng-hu-progress-label {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	font-weight: 600;
	color: #132009;
	font-family: monospace;
	letter-spacing: .5px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}

.ng-tile-progress-wrap {
	position: absolute;
	left: 3px;
	right: 3px;
	bottom: 3px;
	height: 48px;
	background: rgba(0, 0, 0, 1);
	border: 1px solid rgba(180, 170, 140, .55);
	border-radius: 4px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
	z-index: 4
}

.ng-tile-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #c89d3a, #f1d17b);
	box-shadow: 0 0 6px -1px #f1d17b, 0 0 14px -3px #c89d3a;
	transition: width .5s linear;
	z-index: 1
}

/* Restbauzeit Overlay immer mittig über kompletter Fläche */
.ng-tile-progress-label {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	font-weight: 600;
	color: #f5e9d4;
	font-family: monospace;
	letter-spacing: .5px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 4px rgba(0, 0, 0, .6);
	text-align: center;
	z-index: 2;
	pointer-events: none;
}

.ng-tile-building-active .ng-tile-progress-wrap {
	opacity: 1
}

/* Tech: sichtbare Progress-Bar sobald is-researching oder data-researching=1 */
.ng-tile-tech.is-researching .ng-tile-progress-wrap,
.ng-tile-tech[data-researching="1"] .ng-tile-progress-wrap {
	opacity: 1
}

/* Mini Active Tile darf nicht innerhalb eines Cube-Front-Face stören */
.ng-tile-cube .ng-mini-active-tile {
	display: none !important
}

/* Sicherstellen, dass Progress über dem Front-Face-Inhalt liegt */
.ng-tile-cube .ng-tile-progress-wrap {
	z-index: 10
}

/* Tech spezifische Farbvariante */
.ng-tile-tech .ng-tile-progress-bar {
	background: linear-gradient(90deg, #7cb3ff, #c6e2ff);
	box-shadow: 0 0 6px -1px #c6e2ff, 0 0 14px -3px #7cb3ff
}

/* === Migriert aus JS (ensureStyles / injectGenericProgressStyles) === */
/* Flash & Delay States */
.ng-tile-flash {
	outline: 2px solid #9ccf7d;
	animation: ngFlash .8s ease-in-out 2;
}

@keyframes ngFlash {

	0%,
	100% {
		outline-color: #9ccf7d;
	}

	50% {
		outline-color: #464543;
	}
}

.ng-tile-delayed {
	filter: saturate(.4) brightness(.85);
}

.ng-tile-delayed .ng-live-pending {
	animation: ngPulse 2s infinite;
}

@keyframes ngPulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .45;
	}
}

/* Generische Fortschrittsbalken (Tech / Hangar / Defense) */
.ng-tech-progress-wrap,
.ng-hangar-progress-wrap,
.ng-defense-progress-wrap {
	position: relative;
	margin: 6px 0 8px;
	width: 100%;
	height: 8px;
	background: rgba(0, 0, 0, .35);
	border: 1px solid #3a332b;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .55);
}

.ng-tech-progress-bar,
.ng-hangar-progress-bar,
.ng-defense-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #7cb3ff, #c6e2ff);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, .5);
	transition: width .25s linear;
}

.ng-defense-progress-bar {
	background: linear-gradient(90deg, #c89d3a, #f1d17b);
}

.ng-hangar-progress-bar {
	background: linear-gradient(90deg, #9ecb6b, #c5e39b);
}

.ng-tech-progress-bar span,
.ng-hangar-progress-bar span,
.ng-defense-progress-bar span {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	font-weight: 600;
	color: #1b1405;
	font-family: monospace;
	letter-spacing: .5px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

/* Labels / Badges (vormals inline via Object.assign) */
.ng-live-eta {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, .55);
	padding: 6px 12px 7px;
	border: 1px solid #c8af76;
	border-radius: 10px;
	font-size: 20px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .5px;
	color: #f2e7d2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 6px -1px rgba(0, 0, 0, .6);
	backdrop-filter: blur(3px);
}

/* DEPRECATED (Queued Anzeige entfernt) */
.ng-live-pending {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(40, 40, 40, .75);
	padding: 2px 8px 3px;
	border: 1px solid #c8af76;
	border-radius: 6px;
	font-size: 11px;
	letter-spacing: .5px;
	color: #c8af76;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}

/* Hinweis: Progress-Bar-Höhe der Tiles wird ausschließlich hier gesteuert (keine JS-Injektion mehr). */

/* === Sections Slider (Dashboard) === */
.ng-main-sections-bar {
	display: flex;
	gap: .75rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding: .5rem 1rem; /* zusätzlicher Rand links/rechts */
	margin-bottom: .75rem;
}

.ng-main-sections-bar::-webkit-scrollbar {
	display: none;
}

.ng-main-sections-bar .ng-section-trigger {
	flex: 1 0 18%;
	position: relative;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease;
	outline: none;
	border: 0;
	background: #111;
	color: #eee;
}

.ng-main-sections-bar .ng-section-trigger.is-active {
	box-shadow: 0 0 0 2px #37a8ff inset, 0 0 12px #37a8ff55;
}

.ng-main-sections-bar .ng-section-trigger:active {
	transform: scale(.97);
}

.ng-sections-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	touch-action: pan-y pinch-zoom;
	/* Vertikalmodus (Dropdown) initial geschlossen */
	height: 0;
	transition: height .45s cubic-bezier(.32,.72,.24,1);
}

/* Horizontaler Track (alt) entfernt: .ng-sections-track war für horizontalen Slider zuständig */

.ng-section-panel {
	flex: 0 0 100%;
	padding: 0 .25rem 1rem;
	opacity: .35;
	transition: opacity .4s ease;
}

.ng-section-panel.is-active {
	opacity: 1;
}

.ng-section-panel-inner {
	min-height: 320px;
	animation: fadeIn .4s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ng-build-tiles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 50px;
	padding: 0 5%;
}

@media (min-width:1200px) {
	.ng-build-tiles-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

.ng-sections-pagination {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin: .5rem 0 1.25rem;
}

.ng-section-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #333;
	border: 0;
	cursor: pointer;
	padding: 0;
	position: relative;
}

.ng-section-dot.is-active {
	background: #37a8ff;
	box-shadow: 0 0 6px #37a8ffaa;
}

.ng-section-dot:not(.is-active):hover {
	background: #4a4a4a;
}

.ng-section-refresh {
	background: #1d3b4f;
	color: #fff;
	border: 0;
	padding: .5rem .9rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.ng-section-refresh:hover {
	background: #255066;
}

.ng-panel-error {
	background: #4d1f1f;
	color: #ffb4b4;
	padding: 1rem;
	border: 1px solid #752d2d;
	border-radius: 6px;
	font-size: .9rem;
}

.ng-sections-placeholder {
	text-align: center;
	color: #ffffff;
}

.ng-sections-slider.is-hidden-initial {
	display: none;
}

/* Vertikalmodus Overrides */
.ng-sections-slider.vertical-mode .ng-sections-track { display: block; transform: none !important; width: 100% !important; }
.ng-sections-slider.vertical-mode .ng-section-panel { width: 100% !important; display: none; flex: none; }
.ng-sections-slider.vertical-mode .ng-section-panel.is-active { display: block; }
.ng-sections-slider.vertical-mode.is-collapsing,
.ng-sections-slider.vertical-mode.is-expanding { overflow: hidden; }

/* === Inline Detail Panel (Build/Tech) === */
.ng-inline-detail {
	position: absolute;
	z-index: 3000;
	background: rgba(20, 24, 30, .97);
	color: #eee;
	border: 1px solid #3a4655;
	border-radius: 6px;
	padding: 10px 12px;
	box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .55);
	backdrop-filter: blur(4px);
	max-width: 360px;
	font-size: 13px;
	line-height: 1.35;
	display: block;
	pointer-events: auto;
	opacity: 1
}

.ng-inline-detail.is-hidden {
	display: none
}

.ng-inline-detail .ng-detail-head {
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px
}

.ng-inline-detail .lvl {
	opacity: .7;
	font-weight: 400;
	margin-left: 4px
}

.ng-inline-detail .ng-detail-costs {
	font-size: 12px;
	margin-bottom: 4px;
	color: #bcd
}

.ng-inline-detail .ng-detail-time {
	font-size: 12px;
	margin: 4px 0;
	color: #9cf
}

.ng-inline-detail form {
	margin-top: 6px
}

.ng-inline-detail button {
	background: #3478f6;
	color: #fff;
	border: 0;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px
}

.ng-inline-detail button:hover {
	background: #2c6bd9
}

.ng-inline-detail .ng-detail-state,
.ng-inline-detail .ng-detail-req {
	font-size: 12px;
	margin-top: 4px
}

.ng-inline-detail .ng-detail-error {
	color: #ff7b7b;
	font-size: 12px;
	margin-top: 6px
}

.ng-inline-detail .ng-mini-popup {
	background: rgba(8, 12, 16, 0.82);
	border: 1px solid #28323c;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 12px;
	line-height: 1.35;
	box-shadow: 0 4px 18px -4px rgba(0, 0, 0, .55);
}

.ng-inline-detail .ng-mini-title {
	font-weight: 600;
	color: #d6e9ff;
	margin-bottom: 4px;
	font-size: 12px;
}

.ng-inline-detail .ng-mini-costs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	margin-bottom: 6px;
	color: #98b4c4;
	font-size: 11px;
}

.ng-inline-detail .ng-mini-row {
	margin-top: 4px;
	font-size: 11px;
	color: #bfc9d3;
}

.ng-inline-detail .ng-mini-row.ng-warn {
	color: #ff9d7b;
}

.ng-inline-detail .ng-mini-btn {
	background: #2e5ea1;
	color: #fff;
	border: 0;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 11px;
	cursor: pointer;
	letter-spacing: .5px;
	text-transform: uppercase;
	font-weight: 600;
}

.ng-inline-detail .ng-mini-btn:hover {
	background: #3973c6
}

.ng-inline-detail.ng-debug-popup {
	border: 3px solid #ff4500 !important;
	background: rgba(255, 69, 0, .25) !important;
	box-shadow: 0 0 20px #ff4500 !important;
	z-index: 9999 !important;
}

.ng-inline-detail.ng-debug-popup:before {
	content: '🔧 DEBUG';
	position: absolute;
	top: -20px;
	left: 0;
	color: #ff4500;
	font-size: 10px;
	font-weight: bold;
	background: #000;
	padding: 2px 6px;
	border-radius: 3px;
}

.ng-inline-detail.ng-anchored {
	transform-origin: 50% 100%;
	transition: transform .28s cubic-bezier(.32, .72, .24, 1), opacity .18s ease;
	transform: translateY(6px) scale(.96);
	opacity: 0;
	pointer-events: none;
}

.ng-inline-detail.ng-anchored.is-enter {
	transform: translateY(6px) scale(.96);
	opacity: 0;
}

.ng-inline-detail.ng-anchored.is-active {
	transform: translateY(0) scale(1);
	opacity: 1;
	pointer-events: auto;
}

/* === Cube Tiles === */
.ng-tile-cube {
	position: relative;
	perspective: 900px;
	perspective-origin: 50% 50%;
}

.ng-tile-cube .ng-cube-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .55s cubic-bezier(.32, .72, .24, 1);
}

.ng-tile-cube[data-cube-step="0"] .ng-cube-inner {
	transform: translateZ(calc(var(--cube-half, 0px) * -1)) rotateY(0deg);
}

.ng-tile-cube[data-cube-step="1"] .ng-cube-inner {
	transform: translateZ(calc(var(--cube-half, 0px) * -1)) rotateY(-90deg);
}

.ng-tile-cube[data-cube-step="2"] .ng-cube-inner {
	transform: translateZ(calc(var(--cube-half, 0px) * -1)) rotateY(-180deg);
}

.ng-tile-cube[data-cube-step="3"] .ng-cube-inner {
	transform: translateZ(calc(var(--cube-half, 0px) * -1)) rotateY(-270deg);
}

.ng-cube-face {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 6px;
	box-sizing: border-box;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	background: rgba(18, 22, 28, .92);
	border: 0;
	border-radius: 6px;
}

.ng-cube-face.ng-face-front {
	border: 1px solid #2c3742;
	align-items: stretch;
	justify-content: flex-start;
	padding-top: 6px;
}

.ng-cube-face.ng-face-front .ng-tile-title {
	margin-top: 0;
	align-self: flex-start;
}

/* === Level Badge Konsolidiert === */
/* Front-Face (Cube) nie Badge anzeigen */
.ng-tile-cube .ng-face-front .ng-tile-level-badge {
	display: none !important;
}

.ng-tile-cube[data-cube-step="1"] .ng-tile-progress-wrap,
.ng-tile-cube[data-cube-step="2"] .ng-tile-progress-wrap,
.ng-tile-cube[data-cube-step="3"] .ng-tile-progress-wrap,
.ng-tile-cube[data-cube-step="1"] .ng-live-eta,
.ng-tile-cube[data-cube-step="2"] .ng-live-eta,
.ng-tile-cube[data-cube-step="3"] .ng-live-eta {
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.ng-tile-cube[data-cube-step="0"] .ng-tile-progress-wrap,
.ng-tile-cube[data-cube-step="0"] .ng-live-eta {
	opacity: 1;
	transition: opacity .25s ease;
}

.ng-cube-face .ng-face-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5px;
	margin-bottom: 4px;
	color: #d6e9ff;
	text-align: center;
}

.ng-cube-face .ng-face-row {
	font-size: 10px;
	margin: 2px 0;
	color: #b8c6d2;
	text-align: center;
	line-height: 1.3;
}

.ng-cube-face .ng-face-btn {
	margin-top: 6px;
	background: #2e5ea1;
	border: 0;
	color: #fff;
	font-size: 10px;
	padding: 5px 10px;
	border-radius: 4px;
	cursor: pointer;
	letter-spacing: .5px;
	text-transform: uppercase;
	font-weight: 600;
}

.ng-cube-face .ng-face-btn:hover {
	background: #3872c4;
}

.ng-cube-face .ng-cost {
	display: inline-block;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .4px;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .35);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 1px 2px rgba(0, 0, 0, .6);
}

.ng-cube-face .ng-cost.ng-ir {
	color: #ffd071;
}

.ng-cube-face .ng-cost.ng-hz {
	color: #d6e9ff;
}

.ng-cube-face .ng-cost.ng-o2 {
	color: #9fd6ff;
}

.ng-cube-face .ng-face-time {
	color: #f5e9d4;
}

.ng-face-skeleton {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 4px 0;
}

.ng-face-skeleton .ng-skel-line {
	width: 80%;
	height: 10px;
	border-radius: 4px;
	background: linear-gradient(90deg, #2a3036, #3a444c, #2a3036);
	background-size: 200% 100%;
	animation: ngSkel 1.2s ease-in-out infinite;
}

.ng-face-skeleton .ng-skel-line.short {
	width: 55%;
}

@keyframes ngSkel {
	0% {
		background-position: 0 0;
	}

	50% {
		background-position: 100% 0;
	}

	100% {
		background-position: 0 0;
	}
}

.ng-cube-face.ng-face-front {
	transform: rotateY(0deg) translateZ(var(--cube-half, 0px));
}

.ng-cube-face.ng-face-actions {
	transform: rotateY(90deg) translateZ(var(--cube-half, 0px));
}

.ng-cube-face.ng-face-info {
	transform: rotateY(180deg) translateZ(var(--cube-half, 0px));
}

.ng-cube-face.ng-face-extra {
	transform: rotateY(270deg) translateZ(var(--cube-half, 0px));
}

.ng-tile-cube.is-flipping .ng-cube-inner {
	transition: transform .55s cubic-bezier(.5, 1, .32, 1);
}

.ng-cube-face-front-placeholder {
	display: none;
	font-size: 11px;
	color: #ccc;
}

/* Cube Indicators entfernt */
.ng-tile-cube .ng-cube-inner .ng-cube-face form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ng-tile-cube .ng-cube-inner .ng-cube-face form button {
	width: auto;
}

/* === Mini Active Tiles (Build / Tech) === */
.ng-mini-active-tile {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 90px;
	height: 90px;
	background: rgba(20, 16, 10, .85);
	border: 1px solid #705b33;
	border-radius: 10px;
	box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
	padding: 4px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	backdrop-filter: blur(3px);
	z-index: 30;
	overflow: hidden;
}

.ng-mini-active-tile .ng-mini-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .35;
	filter: grayscale(.2) brightness(.9);
}

.ng-mini-active-tile .ng-mini-title {
	position: relative;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .5px;
	color: #f0e4ce;
	text-shadow: 0 1px 2px #000;
	margin-bottom: 4px;
	z-index: 2;
	line-height: 1.15;
}

.ng-mini-active-tile .ng-mini-bar {
	position: relative;
	width: 100%;
	height: 16px;
	background: rgba(0, 0, 0, .45);
	border: 1px solid #3a332b;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .55);
	margin-top: auto;
	z-index: 2;
}

.ng-mini-active-tile .ng-mini-bar-inner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #c8af76, #e3d2a8);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, .5);
	transition: width .25s linear;
}

.ng-mini-active-tile[data-kind="tech"] .ng-mini-bar-inner {
	background: linear-gradient(90deg, #7cb3ff, #c6e2ff);
}

.ng-mini-active-tile .ng-mini-eta {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	font-weight: 600;
	font-family: monospace;
	color: #1b1405;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

.ng-section-panel[data-section="build"],
.ng-section-panel[data-section="tech"],
.ng-section-panel[data-section="defense"],
.ng-section-panel[data-section="hangar"],
.ng-section-panel[data-section="airport"] {
	position: relative;
}

.ng-section-panel[data-section="build"] .ng-section-panel-inner,
.ng-section-panel[data-section="tech"] .ng-section-panel-inner,
.ng-section-panel[data-section="defense"] .ng-section-panel-inner,
.ng-section-panel[data-section="hangar"] .ng-section-panel-inner,
.ng-section-panel[data-section="airport"] .ng-section-panel-inner {
	position: relative;
	min-height: 140px;
}

/* Panel Footer: sichtbarer Abschluss unter jeder Sektion */
.ng-section-panel-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .5rem;
	padding: .5rem .25rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.ng-section-panel-footer .ng-defense-summary,
.ng-section-panel-footer .ng-hangar-summary {
	flex: 1 1 auto;
	color: #ddd;
	text-align: left;
}

.ng-main-sections-bar .ng-tile {
	position: relative;
}

.ng-main-mini-tile {
	position: absolute;
	bottom: 6px;
	right: 6px;
	width: 84px;
	height: 84px;
	background: #111;
	border: 1px solid #4C4742;
	border-radius: 8px;
	box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .5);
	padding: 0;
	display: flex;
	flex-direction: column;
	z-index: 80;
	overflow: hidden;
	font-family: 'Glass_TTY_VT220', monospace;
}

.ng-main-mini-tile .ng-main-mini-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .38;
	filter: saturate(.85) brightness(.9);
}

.ng-main-mini-tile .ng-tile-title {
	position: relative;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .45px;
	color: #464543;
	text-shadow: 0 1px 2px #000;
	background: rgba(0, 0, 0, .55);
	padding: 3px 4px 4px;
	z-index: 2;
	line-height: 1.1;
}

/* Basis Badge (große Tiles) */
.ng-tile-level-badge {
	position: absolute;
	display: inline-block;
	right: 4px;
	bottom: 4px;
	z-index: 3;
	background: rgba(0, 0, 0, .68);
	padding: 3px 6px 4px;
	font-size: 11px;
	letter-spacing: .5px;
	color: #464543;
	border: 1px solid rgba(255, 185, 2, .25);
	border-radius: 4px;
	font-weight: 600;
	backdrop-filter: blur(2px);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 4px rgba(0, 0, 0, .45);
	pointer-events: none;
	line-height: 1;
	white-space: nowrap;
	width: auto !important;
	height: auto !important;
	min-width: 0;
	max-width: none;
	max-height: none;
}

/* Mini Tile Override */
.ng-main-mini-tile .ng-tile-level-badge {
	top: 3px;
	bottom: auto;
	background: rgba(0, 0, 0, .55);
	font-size: 9px;
	padding: 2px 5px 3px;
	border: 1px solid rgba(0, 0, 0, .55);
	color: #ffdca3;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}

@keyframes ngTileLevelPulse {

	0%,
	100% {
		filter: brightness(1);
		box-shadow: 0 0 4px rgba(255, 138, 51, .25);
	}

	50% {
		filter: brightness(1.25);
		box-shadow: 0 0 8px rgba(255, 138, 51, .5);
	}
}

.ng-main-mini-tile .ng-tile-progress-wrap {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 4px;
	height: 18px;
	background: rgba(0, 0, 0, .85);
	border: 1px solid rgba(180, 170, 140, .4);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}

.ng-main-mini-tile .ng-tile-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #c8af76, #e3d2a8);
	box-shadow: 0 0 4px -1px #e3d2a8, 0 0 10px -2px #c8af76;
	transition: width .25s linear;
}

.ng-main-mini-tile[data-kind="tech"] .ng-tile-progress-bar {
	background: linear-gradient(90deg, #7cb3ff, #c6e2ff);
}

.ng-main-mini-tile .ng-tile-progress-label {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	font-weight: 600;
	color: #f5e9d4;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
	text-align: center;
	letter-spacing: .5px;
}

.ng-main-mini-tile.ng-tile-building-active {
	outline: 1px solid #c8af76;
}

/* Overlay-Anker für Mini Active Tile (Build/Tech) */
.ng-main-mini-slot {
	position: absolute;
	bottom: 0;
	right: 0;
	left: auto;
	top: auto;
	pointer-events: none;
	z-index: 40;
	display: block;
	min-width: 0;
	min-height: 0;
}

.ng-main-mini-slot .ng-main-mini-tile {
	position: absolute !important;
	bottom: 6px !important;
	right: 6px !important;
	left: auto !important;
	top: auto !important;
}

@media (prefers-reduced-motion:reduce) {
	.ng-tile-cube .ng-cube-inner {
		transition: none;
	}
}

.ng-tile-building.ng-tile-active-debug,
.ng-tile-tech.ng-tile-active-debug,
.ng-tile-bg.ng-tile-active-debug,
.ng-tile-bg-img.ng-tile-active-debug {
	outline: 2px solid #ff4500 !important;
	position: relative;
}

/* === Tech Tile Grid === */
.ng-tile-grid-tech {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: .65rem;
	margin-top: .5rem;
}

@media (min-width:1200px) {
	.ng-tile-grid-tech {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}

.ng-tile-tech {
	position: relative;
	background: #101214;
	border: 1px solid #303840;
	height: 155px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
}

.ng-tile-tech .ng-tile-title {
	background: rgba(0, 0, 0, .6);
	font-size: 11px;
	padding: 4px 6px 5px;
	color: #464543;
	letter-spacing: .5px;
	text-align: center;
	z-index: 2
}

.ng-tile-tech .ng-tile-level {
	color: inherit;
	font-weight: inherit;
	margin-left: 4px;
}

.ng-tile-tech .ng-tile-body {
	flex: 1;
	padding: 4px 6px 6px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 2
}

.ng-tile-tech .ng-costs {
	font-size: 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: #b9c9d4;
	margin-bottom: 4px
}

.ng-tile-tech .ng-costs .ir {
	color: #ffd071
}

.ng-tile-tech .ng-costs .ox {
	color: #9fd6ff
}

.ng-tile-tech .ng-req {
	font-size: 10px;
	color: #ff7b5e;
	margin-top: auto
}

.ng-tile-tech.is-researching {
	border-color: #ff8a33;
	box-shadow: 0 0 6px #ff8a3355
}

.ng-tile-tech.is-expensive {
	opacity: .65;
}

.ng-tile-tech.is-locked {
	filter: grayscale(.75) brightness(.6);
	position: relative;
}

.ng-tile-tech.is-locked:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .75));
	z-index: 1
}

.ng-tile-tech:focus {
	outline: 2px solid #37a8ff;
	outline-offset: 0
}

.ng-tile-tech:hover .ng-tile-bg {
	filter: saturate(1) brightness(1)
}

.ng-tile-tech .ng-tile-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: saturate(.85) brightness(.85);
	transition: filter .35s ease;
	z-index: 0
}

.ng-tile-tech .ng-progress {
	position: relative;
	height: 8px;
	background: #1a242a;
	border: 1px solid #263139;
	border-radius: 2px;
	overflow: hidden;
	margin-top: auto
}

.ng-tile-tech .ng-progress:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #ff8a33, #ffb45e);
	animation: ngTechProg 6s linear infinite
}

@keyframes ngTechProg {
	0% {
		transform: translateX(-80%)
	}

	100% {
		transform: translateX(80%)
	}
}

.ng-tile-tech.has-no-image {
	background: linear-gradient(145deg, #14181c, #101214);
}

.ng-tile-tech.has-no-image .ng-tile-bg {
	display: none
}

.ng-tile-tech.has-no-image:before {
	content: "?";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	color: #223843;
	font-weight: 600;
	opacity: .35;
}

/* Missing Image Badge (Tech) */
.ng-tile-img-missing{position:absolute;top:4px;left:4px;z-index:6;background:rgba(0,0,0,.55);color:#ff9d7b;font-size:10px;font-weight:600;padding:3px 5px 4px;border:1px solid rgba(255,157,123,.4);border-radius:4px;letter-spacing:.5px;backdrop-filter:blur(2px);box-shadow:0 0 0 1px rgba(0,0,0,.4);}
/* Generische Variante für Tiles ohne Bild (alle Typen) */
.ng-tile.has-no-image .ng-tile-bg{display:none;}
.ng-tile.has-no-image{background:linear-gradient(145deg,#14181c,#101214);}
.ng-tile.has-no-image::before{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;color:#223843;font-weight:600;opacity:.35;}

/* === Base Tiles, Sections, States & Effects (migriert aus ng_style.css) === */
/* Dashboard container wrapper */
.ng-tile-dashboard {
	display: block;
	margin: 10px 0 30px;
}

/* Dock spezifische Varianten */
.dock-container {
	position: relative;
}

.dock-container .ng-tile {
	position: relative;
	padding-top: 26px;
	align-items: flex-start;
}

.dock-container .ng-tile .ng-tile-title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	margin: 0;
}

.dock-container .ng-tile.ng-tile-small {
	padding-top: 22px;
}

.dock-container .ng-tile.ng-tile-small .ng-tile-title {
	font-size: 12px;
}

/* Tile Grundform */
.ng-tile {
	position: relative;
	width: 165px;
	height: 165px;
	background: #111;
	border: 1px solid #4C4742;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	outline: none;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	isolation: isolate;
	font-family: 'Glass_TTY_VT220', monospace;
	transition: border-color .25s, filter .25s;
}

/* Größenmodifikatoren */
.ng-tile-small {
	width: 150px;
	height: 125px;
}

.ng-tile-small .ng-tile-title {
	font-size: 12px;
	padding: 3px 4px 5px;
}

.ng-tile-large {
	width: 248px;
	height: 248px;
}

.ng-tile-large .ng-tile-title {
	font-size: 14px;
	letter-spacing: 1px;
	padding: 6px 8px 8px;
}

@media (max-width:1100px) {
	.ng-tile-large {
		width: 220px;
		height: 220px;
	}
}

@media (max-width:900px) {
	.ng-tile-section[data-section="system"] {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	.ng-tile-large {
		width: 100%;
		height: 220px;
	}
}

@media (max-width:600px) {
	.ng-tile-large {
		height: 190px;
	}
}

/* Forschungsstatus / Blink */
@keyframes ngTechBlink {

	0%,
	100% {
		box-shadow: 0 0 8px 2px rgba(255, 140, 0, .55), 0 0 16px 4px rgba(255, 80, 0, .25);
		border-color: #ff8a33;
	}

	50% {
		box-shadow: 0 0 4px 1px rgba(255, 140, 0, .3), 0 0 10px 2px rgba(255, 80, 0, .15);
		border-color: #4C4742;
	}
}

.ng-tile-tech.is-researching {
	animation: ngTechBlink 1.4s linear infinite;
	position: relative;
}

.ng-tile-tech.is-researching .ng-tile-bg {
	filter: brightness(1.05) saturate(1.05);
}

/* Forschung abgeschlossen Overlay */
.ng-tech-complete-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 14, 18, .78);
	color: #ffd9a3;
	font-size: 12px;
	letter-spacing: .5px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
	z-index: 6;
	text-align: center;
	padding: 4px;
}

.ng-tech-complete-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Lock andere Tech-Würfel während eine Forschung läuft */
.ng-tile-tech.is-locked {
	filter: grayscale(0.5) brightness(0.7);
	opacity: 0.65;
	pointer-events: none;
}

.ng-face-form .ng-face-btn {
	cursor: pointer;
}

.ng-tech-complete-inner {
	background: rgba(40, 50, 60, .55);
	padding: 6px 8px;
	border: 1px solid #ffb366;
	border-radius: 4px;
	box-shadow: 0 0 4px #ff9f3a88;
}

.ng-tech-timer {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: .5px;
	font-family: monospace;
	line-height: 1.1;
}

.ng-tile-tech .ng-tile-title {
	position: relative;
}

.ng-tile-tech .ng-tile-title .ng-tech-timer {
	display: block;
}

/* Hangar & Defense Aktivität */
@keyframes ngUnitPulse {

	0%,
	100% {
		box-shadow: 0 0 6px rgba(30, 58, 63, .35);
	}

	50% {
		box-shadow: 0 0 14px rgba(30, 58, 63, .65);
	}
}

.ng-tile-system.is-active-hangar {
	animation: ngUnitPulse 1.6s ease-in-out infinite;
}

.ng-tile-system.is-active-defense {
	animation: ngUnitPulse 1.1s ease-in-out infinite;
}

.ng-unit-timer {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .5px;
	font-family: monospace;
	color: #c8e4ff;
	text-shadow: 0 0 4px rgba(0, 160, 255, 0.35);
}

.ng-tile-system.is-active-defense .ng-unit-timer {
	color: #ffd3b0;
	text-shadow: 0 0 4px rgba(255, 120, 0, 0.35);
}

/* Laufender Auftrag Border-Blink */
@keyframes ng-tile-blink-border {
	0% {
		border-color: #4C4742;
		box-shadow: 0 0 0 0 rgba(255, 102, 0, 0);
	}

	50% {
		border-color: #ff8a33;
		box-shadow: 0 0 6px 0 rgba(255, 140, 50, 0.35);
	}

	100% {
		border-color: #4C4742;
		box-shadow: 0 0 0 0 rgba(255, 102, 0, 0);
	}
}

.ng-tile-active-progress {
	animation: ng-tile-blink-border 1.4s linear infinite;
}

/* Sektionen */
.ng-tile-section {
	margin-bottom: 28px;
}

.ng-tile-section-header {
	font-size: 13px;
	letter-spacing: 1px;
	color: #4C4742;
	margin: 4px 2px 8px;
	font-family: 'Glass_TTY_VT220', monospace;
}

.ng-tile-section[data-section="modal"],
.ng-tile-section[data-section="build"],
.ng-tile-section[data-section="system"] {
	display: grid;
	gap: 18px;
}

.ng-tile-section[data-section="modal"] {
	grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
}

.ng-tile-section[data-section="build"] {
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}

.ng-tile-section[data-section="system"] {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 22px 20px;
	margin-bottom: 34px;
}

.ng-tile-section-header {
	grid-column: 1/-1;
}

/* Hintergrund / Bild */
.ng-tile-bg {
	position: absolute;
	inset: 0;
	background-image: var(--ng-tile-bg);
	background-size: cover;
	background-position: center;
	filter: saturate(.8) brightness(.85);
	transition: filter .3s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
	z-index: 0;
	transform: translateY(0);
}

.ng-tile-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: inherit;
}

/* CRT / Scanline / Flicker Effekte */
@keyframes crtScanDrift {
	0% {
		background-position-y: 0
	}

	100% {
		background-position-y: 180px
	}
}

@keyframes crtFlicker {

	0%,
	2%,
	100% {
		opacity: .96
	}

	1% {
		opacity: .82
	}

	47% {
		opacity: .95
	}

	48% {
		opacity: .9
	}

	70% {
		opacity: .94
	}

	71% {
		opacity: .86
	}
}

@keyframes crtJitter {

	0%,
	92%,
	100% {
		transform: translate3d(0, 0, 0)
	}

	93% {
		transform: translate3d(0, -1px, 0)
	}

	94% {
		transform: translate3d(0, 1px, 0)
	}

	95% {
		transform: translate3d(0, 0, 0)
	}
}

@keyframes ngFlicker {

	0%,
	2%,
	100% {
		opacity: .96
	}

	1% {
		opacity: .82
	}

	55% {
		opacity: .94
	}

	56% {
		opacity: .7
	}

	57% {
		opacity: .94
	}
}

@keyframes ngGlitchShift {

	0%,
	92%,
	100% {
		transform: translate3d(0, 0, 0) scale(1.25)
	}

	93% {
		transform: translate3d(-2px, 0, 0) scale(1.248)
	}

	94% {
		transform: translate3d(3px, 0, 0) scale(1.255)
	}

	95% {
		transform: translate3d(-1px, 0, 0) scale(1.252)
	}

	96% {
		transform: translate3d(0, 0, 0) scale(1.25)
	}
}

@keyframes ngPowerDip {

	0%,
	97%,
	100% {
		filter: saturate(.8) brightness(.85)
	}

	97.2% {
		filter: saturate(.5) brightness(.45)
	}

	97.6% {
		filter: saturate(.7) brightness(.7)
	}

	98% {
		filter: saturate(.8) brightness(.9)
	}
}

@keyframes ngChroma {

	0%,
	92%,
	100% {
		filter: none
	}

	93% {
		filter: drop-shadow(1px 0 0 #ff0040) drop-shadow(-1px 0 0 #00ffd5)
	}

	94% {
		filter: drop-shadow(-1px 0 0 #ff0040) drop-shadow(1px 0 0 #00ffd5)
	}

	95% {
		filter: none
	}
}

.ng-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 2;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.1) 2px);
	opacity: 1;
	mix-blend-mode: normal;
	image-rendering: pixelated;
	animation: crtFlicker 4s steps(32, end) infinite, crtScanDrift 28s linear infinite;
}

.ng-tile.crt-test-layer {
	border: 2px solid #39ff14 !important;
	background: repeating-linear-gradient(45deg, #222 0px, #222 4px, #444 4px, #444 8px) !important;
}

.ng-tile .ng-tile-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 1;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, .55), inset 0 0 90px rgba(0, 0, 0, .4);
	animation: crtFlicker 4s steps(30, end) infinite, crtJitter 13s linear infinite, ngPowerDip 22s linear infinite
}

body.ng-effect-b .ng-tile.ng-glitch-rotate .ng-tile-bg,
body.ng-effect-b .ng-tile.ng-glitch-mirror .ng-tile-bg,
body.ng-effect-b .ng-tile.ng-no-tr .ng-tile-bg {
	transition: none !important;
}

.ng-tile:hover .ng-tile-bg { filter: saturate(1) brightness(1); }

/* Reaktiviere subtilen Glitch auf Tiles standardmäßig */
.ng-tile .ng-tile-bg{
	animation: crtJitter 11s linear infinite, crtFlicker 8s steps(28, end) infinite, ngPowerDip 26s linear infinite;
}

/* Zusätzlicher Chroma-/Shift-Glitch in unregelmäßigen Intervallen */
.ng-tile:nth-child(3n) .ng-tile-bg{ animation: crtJitter 12s linear infinite, crtFlicker 9s steps(28,end) infinite, ngPowerDip 24s linear infinite, ngChroma 19s linear infinite; }
.ng-tile:nth-child(4n) .ng-tile-bg{ animation: crtJitter 10s linear infinite, crtFlicker 7s steps(28,end) infinite, ngPowerDip 28s linear infinite, ngGlitchShift 23s linear infinite; }

/* Würfel-Frontfaces ebenfalls mit minimalem CRT-Glitch versehen */
.ng-cube-face.ng-face-front .ng-tile-bg{ animation: crtJitter 12s linear infinite, crtFlicker 8s steps(28,end) infinite, ngPowerDip 26s linear infinite; }

.ng-tile:nth-child(3n) .ng-tile-bg::before {
	animation-delay: -2s, .3s;
}

.ng-tile:nth-child(4n) .ng-tile-bg::before {
	animation-delay: -4s, .6s;
}

.ng-tile:nth-child(5n) .ng-tile-bg::before {
	animation-delay: -6s, .9s;
}

.ng-tile:nth-child(3n+2) .ng-tile-bg::after {
	animation-delay: .4s, -3s, 0s;
}

.ng-tile:nth-child(4n+1) .ng-tile-bg::after {
	animation-delay: .8s, -5s, 2s;
}

.ng-tile:nth-child(5n+3) .ng-tile-bg::after {
	animation-delay: 1.2s, -7s, 1s;
}

.ng-tile:focus {
	border-color: #464543;
}

/* Zustände */
.ng-tile-disabled .ng-tile-bg {
	filter: grayscale(1) brightness(.5) !important;
}

.ng-tile-disabled {
	cursor: not-allowed;
}

.ng-tile-inactive {
	position: relative;
}

.ng-tile-inactive .ng-tile-bg {
	filter: grayscale(.65) brightness(.7);
	opacity: .85;
}

.ng-tile-inactive:after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(200, 175, 118, .25);
	border-radius: 8px;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .35) inset;
}

.ng-tile-locked {
	position: relative;
}

.ng-tile-locked::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 1;
}

.ng-tile-locked-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #B84C2F;
	z-index: 2;
	text-shadow: 0 0 4px rgba(0, 0, 0, .8);
}

.ng-tile-locked .ng-tile-title {
	opacity: .25;
}

/* Kopf / Badges */
.ng-tile-title {
	position: relative;
	z-index: 3;
	background: rgba(0, 0, 0, .75);
	width: 100%;
	text-align: center;
	font-size: 10px;
	padding: 4px 6px 6px;
	color: #464543;
	letter-spacing: .5px;
}

.ng-tile-corner {
	position: absolute;
	font-size: 13px;
	padding: 3px 5px;
	background: rgba(0, 0, 0, .45);
	color: #1e3a3f;
	z-index: 2;
	pointer-events: none;
	backdrop-filter: blur(2px);
}

.ng-tile-corner-tl {
	top: 3px;
	left: 3px;
}

.ng-tile-corner-tr {
	top: 3px;
	right: 3px;
}

.ng-tile-corner-bl {
	bottom: 30px;
	left: 3px;
}

.ng-tile-corner-br {
	bottom: 30px;
	right: 3px;
}

/* (Pulse Animation bleibt verfügbar – ggf. Klasse hinzufügen, nicht aktiv per Default) */

/* Hangar Upgrade Bar */
.ng-hangar-upgrade-bar {
	display: grid;
	grid-template-columns: 140px 1fr 160px;
	gap: 18px;
	align-items: center;
	background: #111;
	border: 1px solid #2a2724;
	padding: 10px 16px;
	height: 100px;
	margin: 0 0 18px;
	position: relative;
	border-radius: 8px;
}

@media (max-width:650px) {
	.ng-hangar-upgrade-bar {
		grid-template-columns: 1fr 1fr;
		height: auto;
		row-gap: 12px;
	}

	.ng-hu-action {
		grid-column: 1/-1;
		justify-self: start;
	}
}

/* Laufende Gebäudeaktivität (Pulse) */
@keyframes ngTilePulse {

	0%,
	100% {
		filter: brightness(1);
	}

	50% {
		filter: brightness(1.15);
	}
}

.ng-tile-building-active {
	position: relative;
	animation: ngTilePulse 1.2s ease-in-out infinite;
}

.ng-tile-building .ng-live-badge {
	font-family: inherit;
	backdrop-filter: blur(2px);
}

.ng-tile-building .ng-live-eta {
	font-family: monospace;
	letter-spacing: .5px;
	backdrop-filter: blur(2px);
	text-align: center;
}

/* Fehlende Voraussetzung Hinweis */
.ng-tile-missing-hint {
	position: absolute;
	left: 50%;
	top: -8px;
	transform: translate(-50%, -100%);
	background: #2b2116;
	color: #e7ddcc;
	border: 1px solid #c8af76;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
	z-index: 200;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}

.ng-tile-missing-hint.show {
	opacity: 1;
	transform: translate(-50%, -110%);
}

/* Overlay / Popups / Modal Frames */
.ng-tile-overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, .8);
	backdrop-filter: blur(4px);
	z-index: 15000;
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ng-tile-overlay.active {
	opacity: 1;
	visibility: visible;
	display: flex !important;
}

.ng-tile-popups-root {
	position: fixed;
	inset: 0;
	z-index: 15010;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 24px 40px;
	gap: 0;
}

.ng-tile-popups-root.active {
	pointer-events: none;
}

.ng-tile-popups-root .ng-tile-modal {
	pointer-events: auto;
	margin: 0;
	transform: scale(.94);
	opacity: 0;
	transition: transform .28s ease, opacity .28s ease;
	max-width: min(1200px, 90vw);
	max-height: 85vh;
}

.ng-tile-popups-root.active .ng-tile-modal {
	transform: scale(1);
	opacity: 1;
}

.ng-tile-modal {
	background: #1e1e1e;
	border: 2px solid #c8af76;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	backdrop-filter: blur(10px);
	position: relative;
	z-index: 10002;
}

.ng-tile-modal>* {
	position: relative;
	z-index: 2;
}

.ng-tile-modal .ng-terminal-static {
	text-align: left !important;
}

.ng-tile-modal .ng-terminal-content {
	scrollbar-width: thin;
}

.ng-tile-modal .ng-terminal-content::-webkit-scrollbar {
	width: 10px;
}

.ng-tile-modal .ng-terminal-content::-webkit-scrollbar-track {
	background: #0a0a0a;
}

.ng-tile-modal .ng-terminal-content::-webkit-scrollbar-thumb {
	background: #2d2a27;
	border-radius: 6px;
}

.ng-tile-modal .ng-terminal-content::-webkit-scrollbar-thumb:hover {
	background: #3a342e;
}

.ng-tile-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(.94);
	opacity: 0;
	transition: all .25s ease;
	z-index: 16000;
	display: flex;
	flex-direction: column;
	width: min(640px, 90vw);
	height: min(470px, 80vh);
	background: #101010;
	border: 1px solid #4C4742;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .65);
}

.ng-tile-popup.active {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.ng-tile-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-bottom: 1px solid #4C4742;
}

.ng-tile-popup-title {
	font-size: 16px;
	color: #464543;
}

.ng-tile-popup-close {
	background: none;
	border: 1px solid #4C4742;
	color: #464543;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	padding: 4px 8px;
}

.ng-tile-popup-close:hover {
	background: #111;
}

.ng-tile-popup-body {
	flex: 1;
	overflow: auto;
	padding: 10px;
}

.ng-tile-popup-body::-webkit-scrollbar {
	width: 8px;
}

.ng-tile-popup-body::-webkit-scrollbar-track {
	background: #000;
}

.ng-tile-popup-body::-webkit-scrollbar-thumb {
	background: #4C4742;
}

.ng-tile-popup-body::-webkit-scrollbar-thumb:hover {
	background: #212121;
}

/* Unified Modal Fallback / Frame Styles */
.ng-modal {
	display: none;
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	z-index: 15000;
	padding: 20px;
}

.ng-modal.active {
	display: flex;
}

.ng-modal-content {
	background: #111;
	border: 1px solid #4C4742;
	padding: 0;
	display: flex;
	flex-direction: column;
	width: min(640px, 90vw);
	height: min(480px, 85vh);
}

.ng-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid #4C4742;
	background: #111;
}

.ng-modal-title {
	font-size: 14px;
	letter-spacing: 2px;
	color: #464543;
}

.ng-modal-body {
	flex: 1;
	overflow: auto;
	padding: 14px;
}

.ng-tile-popups-root .ng-modal {
	pointer-events: auto;
	margin: 0;
	transform: scale(.94);
	opacity: 0;
	transition: transform .28s ease, opacity .28s ease;
	max-width: min(1200px, 90vw);
	max-height: 85vh;
}

.ng-tile-popups-root.active .ng-modal {
	transform: scale(1);
	opacity: 1;
	display: flex;
}

.ng-tile-popups-root .ng-modal::after {
	content: none !important;
}

.ng-tile-popups-root .ng-modal {
	border: 2px solid #c8af76;
}

.ng-modal-frame {
	position: relative;
	border: 14px solid transparent;
	border-image: url('../pics/border.png') 16 / 14px / 0 stretch;
	border-radius: 12px;
	background: #000;
	display: flex;
	flex-direction: column;
}

@supports not (border-image: url('../pics/border.png') 16 / 14px / 0 stretch) {
	.ng-modal-frame {
		border: 2px solid #c8af76;
	}
}

.ng-modal-close-btn {
	--ng-close-size: 30px;
	position: absolute;
	top: 6px;
	right: 6px;
	width: var(--ng-close-size);
	height: var(--ng-close-size);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .55);
	border: 1px solid rgba(200, 175, 118, .35);
	color: #c8af76;
	cursor: pointer;
	border-radius: 6px;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	transition: background .18s ease, transform .18s ease, border-color .18s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.ng-modal-close-btn:hover {
	background: rgba(30, 30, 30, .75);
	border-color: #c8af76;
}

.ng-modal-close-btn:active {
	transform: scale(.88);
}

.ng-modal-close-btn:focus-visible {
	outline: 2px solid #1e3a3f;
	outline-offset: 2px;
}

.ng-modal-close-btn i {
	pointer-events: none;
}

.ng-modal-close-btn.is-danger {
	background: rgba(60, 15, 10, .55);
	border-color: rgba(255, 102, 0, .4);
	color: #ff8a33;
}

.ng-modal-close-btn.is-danger:hover {
	background: rgba(80, 25, 15, .75);
	border-color: #ff8a33;
}

.ng-modal__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	z-index: 2;
}

.ng-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 26px;
	background: #1d1d1d;
	border-bottom: 1px solid rgba(200, 175, 118, .25);
	position: relative;
}

.ng-modal__title {
	margin: 0;
	font-size: 18px;
	letter-spacing: 2px;
	font-weight: 600;
	color: #c8af76;
	text-shadow: 0 0 6px rgba(200, 175, 118, .4);
}

.ng-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 24px 26px 30px;
	color: #e2e2e8;
	font-size: 14px;
	line-height: 1.55;
	position: relative;
	z-index: 2;
}

.ng-modal__footer {
	padding: 14px 20px;
	background: #1b1b1b;
	border-top: 1px solid rgba(200, 175, 118, .25);
}

.ng-modal__close {
	background: rgba(255, 71, 87, .1);
	border: 1px solid rgba(255, 71, 87, .35);
	border-radius: 6px;
	color: #ff4757;
	cursor: pointer;
	padding: 10px 14px;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .28s ease;
}

.ng-modal__close:hover {
	background: rgba(255, 71, 87, .2);
	border-color: #ff4757;
	transform: scale(1.06);
}

.ng-modal__close:active {
	transform: scale(.94);
}

.ng-modal__body::-webkit-scrollbar {
	width: 10px;
}

.ng-modal__body::-webkit-scrollbar-track {
	background: #0a0a0a;
}

.ng-modal__body::-webkit-scrollbar-thumb {
	background: #2d2a27;
	border-radius: 6px;
}

.ng-modal__body::-webkit-scrollbar-thumb:hover {
	background: #3a342e;
}

.ng-modal__body {
	scrollbar-width: thin;
	scrollbar-color: #2d2a27 #0a0a0a;
}

.ng-modal .ng-loading {
	padding: 40px 20px;
}

.ng-modal .ng-error {
	padding: 20px;
	background: rgba(60, 20, 10, .25);
	border: 1px solid rgba(255, 102, 0, .3);
	border-radius: 10px;
}

.ng-modal .ng-error h3 {
	margin: 0 0 12px;
	font-size: 16px;
	letter-spacing: 1px;
	color: #ff8a33;
}

.ng-modal .ng-error p {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
}

.ng-modal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	padding: 10px 16px;
	border: 1px solid #c8af76;
	background: #c8af76;
	color: #1a1a1a;
	border-radius: 6px;
	cursor: pointer;
}

.ng-modal__btn--primary {
	border-color: #1e3a3f;
	background: #1e3a3f;
	color: #c8af76;
}

.ng-modal__btn:hover {
	filter: brightness(1.06);
}

.ng-modal__close:focus-visible,
.ng-modal__btn:focus-visible {
	outline: 2px solid #1e3a3f;
	outline-offset: 2px;
}

/* Vereinheitlichte ältere Modal Karte (backdrop/card) */
.ng-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 15000;
	display: none;
	align-items: center;
	justify-content: center;
}

.ng-modal-backdrop.open {
	display: flex;
}

.ng-modal-card {
	background: #161616;
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
	padding: 22px 24px;
	max-width: min(460px, 94vw);
	width: 100%;
	color: #ddd;
	font-size: 14px;
	line-height: 1.5;
	position: relative;
}

.ng-modal-card.ng-modal-wide {
	width: min(520px, 96vw);
	color: #eee;
}

.ng-modal-title {
	margin: 0 0 14px;
	font-size: 16px;
	letter-spacing: .5px;
	color: #ff8a33;
}

.ng-modal-status {
	min-height: 18px;
	font-size: 11px;
	letter-spacing: .4px;
	color: #888;
}

.ng-modal-note {
	margin-top: 6px;
	font-size: 10px;
	color: #555;
	letter-spacing: .4px;
}

/* Debug Kachelmarkierung */
.ng-tile-building.ng-tile-active-debug,
.ng-tile-tech.ng-tile-active-debug,
.ng-tile-bg.ng-tile-active-debug,
.ng-tile-bg-img.ng-tile-active-debug {
	outline: 2px solid #ff4500 !important;
	position: relative;
}