/* ==========================================================================
 * NoPixels Sectorum – Frontend CSS
 *
 * Stilistisch 1:1 am Tisch-Reservierungs-Plugin orientiert:
 *  - CSS-Variablen auf .np-sec-app, Dark-Mode via @media + .np-sec-dark
 *  - Pill-Tab-Switcher (.np-sec-view-toggle / .np-sec-view-pill)
 *  - Filter-Chips (.np-sec-filter-chips / .np-sec-chip)
 *  - Search-Box (.np-sec-search-box / .np-sec-search-input)
 *  - Stage-Card mit Background-Image-Layer
 *  - Legend-Footer im Pill-Stil
 *
 * Mobile-First, Desktop-Enhancements via min-width.
 * ==========================================================================
 */

.np-sec-app,
.np-sec-app-empty {
	--np-sec-primary: #1f6feb;
	--np-sec-accent:  #6a5acd;
	--np-sec-success: #39d353;
	--np-sec-warning: #eab308;
	--np-sec-danger:  #f85149;

	/* V1.73.1: Defaults sind jetzt DARK — Sectorum-Brand-Identity ist dunkel.
	 * Egal was Browser-Setting (`prefers-color-scheme: light`) sagt: User sieht
	 * konsistent das gleiche dunkle Design. Light-Mode bleibt als explizites
	 * Owner-Opt-In über `.np-sec-light`-Klasse erhalten (selten genutzt).
	 */
	--np-sec-bg:     #0d1117;
	--np-sec-fg:     #e6edf3;
	--np-sec-muted:  #8b949e;
	--np-sec-card:   #161b22;
	--np-sec-border: #30363d;
	--np-sec-shadow: 0 4px 14px rgba( 0, 0, 0, .4 );

	--np-sec-radius:    12px;
	--np-sec-radius-sm: 8px;

	--np-sec-stage-height: 560px;

	font-family: inherit;
	color: var( --np-sec-fg );
}

/* -- Light Mode (explizit via Klasse) ------------------------------------- */
.np-sec-app.np-sec-light,
.np-sec-app-empty.np-sec-light {
	--np-sec-bg:     #ffffff;
	--np-sec-fg:     #111827;
	--np-sec-muted:  #6b7280;
	--np-sec-card:   #ffffff;
	--np-sec-border: #e5e7eb;
	--np-sec-shadow: 0 4px 14px rgba( 0, 0, 0, .06 );
}

/* Haupt-Container */
.np-sec-app {
	background: var( --np-sec-bg );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	padding: 20px 22px;
	max-width: 1200px;
	margin: 24px auto;
	box-shadow: var( --np-sec-shadow );
}

/* Theme-Erbe sicherstellen (manche Themes setzen aggressive Resets). */
.np-sec-app h1, .np-sec-app h2, .np-sec-app h3, .np-sec-app h4,
.np-sec-app p, .np-sec-app span, .np-sec-app strong, .np-sec-app em,
.np-sec-app label, .np-sec-app li, .np-sec-app small {
	color: inherit;
}

/* V1.73.1: `.np-sec-dark` Klasse ist NO-OP (Dark ist jetzt Base). Selektor bleibt
 * für Backwards-Compat erhalten — überschreibt mit identischen Werten, falls
 * irgendwo explizit `np-sec-dark` als Klasse erwartet wird.
 * Das frühere `@media (prefers-color-scheme: dark)` ist entfernt: Sectorum
 * folgt dem Browser-Setting nicht mehr — Brand-Identity ist konsistent dunkel.
 */
.np-sec-app.np-sec-dark {
	--np-sec-bg:     #0d1117;
	--np-sec-fg:     #e6edf3;
	--np-sec-muted:  #8b949e;
	--np-sec-card:   #161b22;
	--np-sec-border: #30363d;
	--np-sec-shadow: 0 4px 14px rgba( 0, 0, 0, .4 );
}

/* -- Farb-Paletten (überschreiben primary/accent + Stage-Background) ------- */

.np-sec-app.np-sec-palette-scifi {
	--np-sec-primary: #06b6d4;  /* Cyan-500 */
	--np-sec-accent:  #2563eb;  /* Industrial-Blau */
	--np-sec-success: #22c55e;
	--np-sec-warning: #f59e0b;
}
.np-sec-app.np-sec-palette-scifi.np-sec-dark { --np-sec-bg: #07111b; --np-sec-card: #0f1e2b; --np-sec-border: #1e3a52; }
.np-sec-app.np-sec-palette-scifi .np-sec-stage {
	background:
		radial-gradient( circle at 18% 22%, rgba( 6, 182, 212, .28 ), transparent 60% ),
		radial-gradient( circle at 82% 70%, rgba( 37, 99, 235, .22 ), transparent 60% ),
		#06121d;
}

.np-sec-app.np-sec-palette-fantasy {
	--np-sec-primary: #c2410c;  /* Burgund-Orange */
	--np-sec-accent:  #d4af37;  /* Gold */
	--np-sec-success: #84cc16;
	--np-sec-warning: #eab308;
}
.np-sec-app.np-sec-palette-fantasy.np-sec-dark { --np-sec-bg: #1a0e07; --np-sec-card: #2a1810; --np-sec-border: #4a2e1a; }
.np-sec-app.np-sec-palette-fantasy .np-sec-stage {
	background:
		radial-gradient( circle at 18% 22%, rgba( 212, 175, 55, .22 ), transparent 60% ),
		radial-gradient( circle at 82% 70%, rgba( 194, 65, 12, .25 ), transparent 60% ),
		#1f0e05;
}
.np-sec-app.np-sec-palette-fantasy .np-sec-app-title {
	background: linear-gradient( 135deg, #d4af37, #c2410c );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.np-sec-app.np-sec-palette-apocalyptic {
	--np-sec-primary: #ea580c;  /* Rost-Orange */
	--np-sec-accent:  #b91c1c;  /* Tiefes Rot */
	--np-sec-success: #65a30d;
	--np-sec-warning: #facc15;
}
.np-sec-app.np-sec-palette-apocalyptic.np-sec-dark { --np-sec-bg: #1a0a05; --np-sec-card: #2a1108; --np-sec-border: #4a1f12; }
.np-sec-app.np-sec-palette-apocalyptic .np-sec-stage {
	background:
		radial-gradient( circle at 18% 22%, rgba( 234, 88, 12, .25 ), transparent 60% ),
		radial-gradient( circle at 82% 70%, rgba( 185, 28, 28, .22 ), transparent 60% ),
		#100704;
}

.np-sec-app.np-sec-palette-cyber {
	--np-sec-primary: #ec4899;  /* Hot Pink */
	--np-sec-accent:  #06ffff;  /* Neon Cyan */
	--np-sec-success: #4ade80;
	--np-sec-warning: #fde047;
}
.np-sec-app.np-sec-palette-cyber.np-sec-dark { --np-sec-bg: #0a0418; --np-sec-card: #160a2a; --np-sec-border: #2a1855; }
.np-sec-app.np-sec-palette-cyber .np-sec-stage {
	background:
		radial-gradient( circle at 18% 22%, rgba( 236, 72, 153, .28 ), transparent 60% ),
		radial-gradient( circle at 82% 70%, rgba( 6, 255, 255, .18 ), transparent 60% ),
		#080214;
}
.np-sec-app.np-sec-palette-cyber .np-sec-app-title {
	text-shadow: 0 0 12px rgba( 236, 72, 153, .55 );
}

.np-sec-app-empty {
	padding: 28px;
	border: 2px dashed var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	background: var( --np-sec-card );
	color: var( --np-sec-muted );
	text-align: center;
	max-width: 600px;
	margin: 24px auto;
}

/* =================================================================
 * Top-Bar (Logo + Titel + View-Pills)
 * ================================================================= */

.np-sec-app-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

/* V1.35: Drei-Streifen-Header (Title+Actions / Status / Tabs+Tools) */
.np-sec-app-bar-v2 {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 0;
}
.np-sec-app-bar-v2 .np-sec-app-bar-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.np-sec-app-bar-row-primary {
	justify-content: space-between;
}
.np-sec-app-actions-primary {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.np-sec-app-bar-row-tabs {
	justify-content: space-between;
	gap: 10px;
}
.np-sec-app-actions-secondary {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-left: auto;
}

/* V1.35: Status-Zeile „Du spielst als …" — kompakt, Faction-Color als Border */
.np-sec-app-status-row {
	text-decoration: none;
	background: linear-gradient(
		90deg,
		color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 18%, transparent ) 0%,
		color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 4%, transparent ) 100%
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 30%, var( --np-sec-border ) );
	border-left: 4px solid var( --np-sec-faction, #1f6feb );
	border-radius: 12px;
	padding: 10px 14px;
	color: var( --np-sec-fg );
	gap: 12px;
	transition: background .2s, transform .15s;
}
.np-sec-app-status-row:hover {
	background: linear-gradient(
		90deg,
		color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 28%, transparent ) 0%,
		color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 8%, transparent ) 100%
	);
	transform: translateX( 2px );
}
.np-sec-app-status-row.is-empty {
	--np-sec-faction: var( --np-sec-warning, #f59e0b );
}
.np-sec-app-status-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 25%, #1a2535 );
	font-size: 18px;
	flex-shrink: 0;
}
.np-sec-app-status-label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var( --np-sec-muted );
	font-weight: 600;
}
.np-sec-app-status-name {
	font-size: 1.05rem;
	color: var( --np-sec-fg );
	font-weight: 700;
}
.np-sec-app-status-meta {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-left: auto;
}
.np-sec-app-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	color: var( --np-sec-fg );
}
.np-sec-app-status-pill.is-honor {
	background: rgba( 251, 191, 36, .15 );
	border-color: rgba( 251, 191, 36, .35 );
	color: #fbbf24;
}
.np-sec-app-status-pill.is-streak {
	background: rgba( 249, 115, 22, .15 );
	border-color: rgba( 249, 115, 22, .35 );
	color: #f97316;
}

/* V1.35: Lore-Banner mit Toggle */
.np-sec-lore-banner.is-collapsible[data-lore-expanded="true"] [data-np-sec-lore-short] { display: none; }
.np-sec-lore-banner.is-collapsible[data-lore-expanded="true"] [data-np-sec-lore-full]  { display: block !important; }
.np-sec-lore-banner.is-collapsible [data-np-sec-lore-toggle-more] { display: inline; }
.np-sec-lore-banner.is-collapsible [data-np-sec-lore-toggle-less] { display: none; }
.np-sec-lore-banner.is-collapsible[data-lore-expanded="true"] [data-np-sec-lore-toggle-more] { display: none; }
.np-sec-lore-banner.is-collapsible[data-lore-expanded="true"] [data-np-sec-lore-toggle-less] { display: inline; }
.np-sec-lore-toggle {
	background: none;
	border: none;
	color: var( --np-sec-accent, #1f6feb );
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0 0;
	margin: 4px 0 0;
}
.np-sec-lore-toggle:hover { text-decoration: underline; }

/* V1.35: Typ-Filter-Dropdown */
.np-sec-chip-typedrop {
	position: relative;
	display: inline-block;
}
.np-sec-chip-typedrop > summary {
	list-style: none;
	cursor: pointer;
}
.np-sec-chip-typedrop > summary::-webkit-details-marker { display: none; }
.np-sec-chip-typedrop-caret {
	font-size: .65rem;
	margin-left: 2px;
	opacity: .7;
	transition: transform .2s;
}
.np-sec-chip-typedrop[open] .np-sec-chip-typedrop-caret { transform: rotate( 180deg ); }
.np-sec-chip-typedrop-menu {
	position: absolute;
	top: calc( 100% + 6px );
	right: 0;
	min-width: 200px;
	background: linear-gradient( 135deg, #131d2e, #1f2a3f );
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-radius: 12px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, .5 );
	z-index: 10;
}
.np-sec-chip-typedrop-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: none;
	border: none;
	color: #fff;
	font-size: .9rem;
	text-align: left;
	cursor: pointer;
	border-radius: 8px;
	transition: background .15s;
	width: 100%;
}
.np-sec-chip-typedrop-item:hover {
	background: rgba( 255, 255, 255, .08 );
}
.np-sec-chip-typedrop-item small {
	margin-left: auto;
	color: rgba( 255, 255, 255, .55 );
	font-size: .75rem;
	font-weight: 600;
}
.np-sec-chip-faction.is-empty {
	opacity: .55;
}
.np-sec-chip-faction.is-empty .np-sec-chip-count {
	background: rgba( 255, 255, 255, .04 );
}

@media ( max-width: 720px ) {
	.np-sec-app-status-row {
		flex-wrap: wrap;
	}
	.np-sec-app-status-meta {
		margin-left: 0;
		width: 100%;
		margin-top: 4px;
	}
	.np-sec-app-actions-primary .np-sec-booking-link span,
	.np-sec-app-actions-primary .np-sec-replay-btn span {
		display: none;
	}
}
.np-sec-app-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 220px;
	min-width: 0;
}
.np-sec-app-logo {
	max-height: 52px;
	width: auto;
	display: block;
	border-radius: 10px;
	background: linear-gradient( 135deg, var( --np-sec-primary ), var( --np-sec-accent ) );
	padding: 2px;
}
.np-sec-app-logo-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: linear-gradient( 135deg, var( --np-sec-primary ), var( --np-sec-accent ) );
	color: #fff;
	font-size: 26px;
	box-shadow: 0 4px 12px rgba( 31, 111, 235, .35 );
}
.np-sec-app-brand-text { min-width: 0; }
.np-sec-app-title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.np-sec-demo-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	background: #f59e0b;
	color: #422006;
	border-radius: 6px;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .12em;
	vertical-align: middle;
	box-shadow: 0 0 0 2px rgba( 245, 158, 11, .25 );
}
.np-sec-app.np-sec-is-demo .np-sec-app-bar {
	border-bottom: 2px solid rgba( 245, 158, 11, .35 );
}
.np-sec-app-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 0;
	font-size: .82rem;
	color: var( --np-sec-muted );
}
.np-sec-pulse {
	width: 8px; height: 8px;
	background: var( --np-sec-success );
	border-radius: 50%;
	box-shadow: 0 0 0 0 currentColor;
	animation: np-sec-pulse 2.2s ease-out infinite;
}
@keyframes np-sec-pulse {
	0%   { box-shadow: 0 0 0 0   color-mix( in srgb, var( --np-sec-success ) 65%, transparent ); }
	70%  { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0   transparent; }
}

/* View-Toggle (Pills für Karte / Fraktionen / Battle-Log / Hall of Fame) */
.np-sec-view-toggle {
	margin-left: auto;
	display: inline-flex;
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}
.np-sec-view-pill {
	background: transparent;
	border: none;
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var( --np-sec-muted );
	cursor: pointer;
	transition: background .14s ease, color .14s ease;
}
.np-sec-view-pill:hover:not( .is-active ):not( .is-disabled ) {
	color: var( --np-sec-fg );
}
.np-sec-view-pill.is-active {
	background: var( --np-sec-primary );
	color: #fff;
}
.np-sec-view-pill.is-disabled {
	cursor: not-allowed;
	opacity: .45;
}

/* =================================================================
 * Event-Banner (Lore-Intro / News)
 * ================================================================= */

.np-sec-event-banner {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	margin: 0 0 14px;
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-accent )  18%, var( --np-sec-card ) ),
		color-mix( in srgb, var( --np-sec-primary ) 12%, var( --np-sec-card ) )
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-accent ) 28%, transparent );
	border-radius: var( --np-sec-radius );
}
.np-sec-event-icon {
	font-size: 22px;
	line-height: 1;
}
.np-sec-event-text { flex: 1; min-width: 0; }
.np-sec-event-eyebrow {
	display: block;
	font-size: .68rem;
	letter-spacing: .12em;
	font-weight: 700;
	color: var( --np-sec-accent );
	margin-bottom: 2px;
}
.np-sec-event-body {
	margin: 0;
	font-size: .92rem;
	color: var( --np-sec-fg );
	line-height: 1.45;
}

/* =================================================================
 * Filter-Chips (Pill-Style mit Icon)
 * ================================================================= */

.np-sec-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
	align-items: center;
}
.np-sec-chip-sep {
	width: 1px;
	height: 18px;
	background: color-mix( in srgb, var( --np-sec-fg ) 15%, transparent );
	margin: 0 4px;
}
.np-sec-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var( --np-sec-card );
	border: 1px solid color-mix( in srgb, var( --np-sec-fg ) 12%, transparent );
	color: var( --np-sec-fg );
	font: inherit;
	font-size: .85rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .14s ease, transform .14s ease, background .14s ease;
}
.np-sec-chip:hover {
	border-color: var( --np-sec-primary );
	transform: translateY( -1px );
}
.np-sec-chip.is-active {
	background: var( --np-sec-primary );
	color: #fff;
	border-color: var( --np-sec-primary );
}
.np-sec-chip-icon { font-size: 1.05em; }
.np-sec-chip-count {
	background: color-mix( in srgb, var( --np-sec-fg ) 10%, transparent );
	color: inherit;
	padding: 0 7px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
}
.np-sec-chip.is-active .np-sec-chip-count {
	background: rgba( 255, 255, 255, .25 );
	color: #fff;
}
.np-sec-chip-clear {
	background: transparent;
	border-style: dashed;
	color: var( --np-sec-muted );
}

/* Fraktions-Chip: Farbpunkt + harmonisierter Active-State (mit Fraktionsfarbe) */
.np-sec-chip-faction {
	border-color: color-mix( in srgb, var( --np-sec-faction ) 30%, transparent );
}
.np-sec-chip-faction:hover {
	border-color: var( --np-sec-faction );
}
.np-sec-chip-faction.is-active {
	background: var( --np-sec-faction );
	border-color: var( --np-sec-faction );
	color: #fff;
}
.np-sec-chip-faction-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --np-sec-faction, var( --np-sec-muted ) );
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, .12 );
}
.np-sec-chip-faction.is-active .np-sec-chip-faction-dot {
	background: rgba( 255, 255, 255, .9 );
	box-shadow: none;
}

/* =================================================================
 * Search-Box
 * ================================================================= */

.np-sec-search-box {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 14px;
}
.np-sec-search-icon {
	position: absolute;
	left: 10px;
	pointer-events: none;
	opacity: .55;
}
.np-sec-search-input {
	width: 100%;
	padding: 9px 12px 9px 34px;
	border-radius: 10px;
	border: 1px solid color-mix( in srgb, var( --np-sec-fg ) 15%, transparent );
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	font: inherit;
	font-size: .92rem;
}
.np-sec-search-input:focus {
	outline: none;
	border-color: var( --np-sec-primary );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --np-sec-primary ) 25%, transparent );
}

/* =================================================================
 * View-Panels
 * ================================================================= */

.np-sec-view-panel { display: none; }
.np-sec-view-panel.is-active { display: block; }

.np-sec-coming-soon {
	border: 2px dashed var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	padding: 36px 24px;
	text-align: center;
	background: var( --np-sec-card );
	color: var( --np-sec-muted );
}
.np-sec-coming-soon h3 { margin: 0 0 6px; color: var( --np-sec-fg ); }

/* =================================================================
 * Stage (Karten-Card mit Background-Image)
 * ================================================================= */

.np-sec-stage {
	position: relative;
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	overflow: hidden;
	box-shadow: var( --np-sec-shadow );
	min-height: var( --np-sec-stage-height );
}
.np-sec-app.np-sec-dark .np-sec-stage,
.np-sec-app:not( .np-sec-light ) .np-sec-stage {
	background:
		radial-gradient( circle at 18% 22%, rgba( 106, 90, 205, .25 ), transparent 60% ),
		radial-gradient( circle at 82% 70%, rgba( 31, 111, 235, .2  ), transparent 60% ),
		#0a0e15;
}
.np-sec-stage-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}
/* V1.13/V1.17: Wenn Bild im Editor justiert wurde, gilt das gespeicherte Transform.
   Default ist object-fit: cover, damit die Karte das ganze Feld ausfüllt. */
.np-sec-stage-bg.is-transformed {
	inset: auto;
	object-fit: cover;
	/* Spezifische top/left/width/height/transform werden inline gesetzt. */
}
.np-sec-stage[data-bg-transform="1"] {
	/* Parallax explizit aus: Bild und Hexes müssen 1:1 zusammen bleiben. */
}
.np-sec-map-viewport {
	position: relative;
	z-index: 1;
	width: 100%;
	height: var( --np-sec-stage-height );
	overflow: hidden;
	cursor: grab;
	touch-action: none;
}
/* V1.20: Wenn Stage Aspect-Ratio vom Bild übernimmt, Viewport füllt komplett aus */
.np-sec-stage[data-bg-full="1"] .np-sec-map-viewport {
	height: 100%;
}
.np-sec-map-viewport.is-grabbing { cursor: grabbing; }
.np-sec-map-viewport[data-pan="0"] { cursor: default; }

.np-sec-map-svg {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform .15s ease;
}

.np-sec-stage-hint {
	margin: 8px 4px 0;
	font-size: .78rem;
	color: var( --np-sec-muted );
	text-align: center;
}

/* Hex-Interaktion */
.np-sec-fmap-hex {
	cursor: pointer;
	transition: filter .15s ease, opacity .2s ease;
}
.np-sec-fmap-hex.is-empty polygon { stroke-dasharray: 4 4; }
.np-sec-fmap-hex:hover polygon { filter: brightness( 1.2 ) drop-shadow( 0 0 8px currentColor ); }
.np-sec-fmap-hex:focus { outline: none; }
.np-sec-fmap-hex:focus-visible polygon { stroke: #fde047; stroke-width: 3; }

/* Dim wenn Filter aktiv und Hex nicht matched */
.np-sec-fmap-hex.is-dimmed { opacity: .12; pointer-events: none; }
.np-sec-fmap-hex.is-highlighted polygon {
	stroke: #fde047;
	stroke-width: 3;
	filter: drop-shadow( 0 0 8px rgba( 253, 224, 71, .6 ) );
}

/* Zoom-Controls */
.np-sec-map-controls {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-sec-map-controls button {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var( --np-sec-border );
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, .25 );
	transition: background .12s ease, transform .12s ease;
}
.np-sec-map-controls button:hover {
	background: var( --np-sec-primary );
	color: #fff;
	border-color: var( --np-sec-primary );
	transform: translateY( -1px );
}

/* Tooltip (im Stage-Layer absolut positioniert) */
.np-sec-map-tooltip {
	position: absolute;
	left: 0; top: 0;
	transform: translate( 0, 0 );
	pointer-events: none;
	background: rgba( 13, 17, 23, .96 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: var( --np-sec-radius-sm );
	padding: 10px 12px;
	min-width: 220px;
	max-width: 280px;
	z-index: 5;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .55 );
	opacity: 0;
	transition: opacity .15s ease;
}
.np-sec-map-tooltip.is-visible { opacity: 1; }
.np-sec-tt-head {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 4px;
}
.np-sec-tt-owner-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, .1 );
}
.np-sec-tt-name { font-size: 14px; color: #fff; }
.np-sec-tt-owner small {
	display: block;
	color: rgba( 255, 255, 255, .82 );
	font-size: 11px;
	margin: 0 0 4px;
}
.np-sec-tt-lore {
	margin: 4px 0 0;
	font-size: 12px;
	color: rgba( 255, 255, 255, .75 );
	line-height: 1.45;
}
.np-sec-tt-lore:empty { display: none; }

/* =================================================================
 * Fraktions-Panel (Tab „Fraktionen")
 * ================================================================= */

.np-sec-app-faction-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 12px;
}
.np-sec-app-faction {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-left: 4px solid var( --np-sec-faction, var( --np-sec-primary ) );
	border-radius: var( --np-sec-radius );
	padding: 14px 16px;
	box-shadow: var( --np-sec-shadow );
}
.np-sec-app-faction header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.np-sec-app-faction h3 {
	margin: 0;
	font-size: 1rem;
	flex: 1;
}
.np-sec-app-faction-icon { font-size: 1.2em; }
.np-sec-app-faction-count {
	background: color-mix( in srgb, var( --np-sec-fg ) 10%, transparent );
	padding: 2px 9px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	color: var( --np-sec-muted );
}
.np-sec-app-faction-lore {
	margin: 0;
	font-size: .85rem;
	color: var( --np-sec-muted );
	line-height: 1.45;
}

/* =================================================================
 * Legend-Footer
 * ================================================================= */

.np-sec-app-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 12px 4px 0;
	margin-top: 14px;
	border-top: 1px solid color-mix( in srgb, var( --np-sec-fg ) 8%, transparent );
	color: var( --np-sec-muted );
}
.np-sec-legend-label {
	font-size: .68rem;
	letter-spacing: .12em;
	font-weight: 700;
	color: var( --np-sec-muted );
	margin-right: 4px;
}
.np-sec-legend-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --np-sec-card ) 80%, transparent );
	border: 1px solid color-mix( in srgb, var( --np-sec-fg ) 10%, transparent );
	font-size: .78rem;
	color: var( --np-sec-fg );
}
.np-sec-legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var( --np-sec-faction, var( --np-sec-muted ) );
}
.np-sec-legend-count {
	background: color-mix( in srgb, var( --np-sec-fg ) 10%, transparent );
	padding: 0 7px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
}

/* =================================================================
 * Help-Button + Modal
 * ================================================================= */

.np-sec-help-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var( --np-sec-border );
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background .14s ease, transform .14s ease, color .14s ease;
	margin-left: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.np-sec-help-btn:hover {
	background: var( --np-sec-primary );
	color: #fff;
	border-color: var( --np-sec-primary );
	transform: translateY( -1px );
}

/* V1.41: Sound-FX-Toggle — gleiche Geometrie wie Help-Btn, eigene Aria-State-Optik */
.np-sec-soundfx-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var( --np-sec-border );
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	font-size: 15px;
	cursor: pointer;
	transition: background .14s ease, transform .14s ease, color .14s ease, border-color .14s ease;
	margin-left: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.np-sec-soundfx-btn:hover {
	background: var( --np-sec-primary );
	color: #fff;
	border-color: var( --np-sec-primary );
	transform: translateY( -1px );
}
.np-sec-soundfx-btn[aria-pressed="true"] {
	background: linear-gradient( 135deg, var( --np-sec-primary ), var( --np-sec-accent ) );
	color: #fff;
	border-color: transparent;
	box-shadow: 0 0 0 3px rgba( 251, 113, 36, .18 );
}

/* V1.41: Battle-Submit-Cooldown-Hint — gelbes Banner über Submit, kein Blocker */
.np-sec-cooldown-hint {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba( 251, 191, 36, .35 );
	background: linear-gradient(
		135deg,
		rgba( 251, 191, 36, .12 ),
		rgba( 220, 130, 30, .08 )
	);
	color: var( --np-sec-fg );
	font-size: .9rem;
	line-height: 1.5;
}
.np-sec-cooldown-hint__icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow( 0 0 6px rgba( 251, 191, 36, .5 ) );
}
.np-sec-cooldown-hint__text strong {
	color: #fbd76b;
	font-weight: 700;
}

/* Heatmap-Toggle (im Header) + Heat-Layer im SVG */
.np-sec-heatmap-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid var( --np-sec-border );
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.np-sec-heatmap-btn:hover {
	background: color-mix( in srgb, #ff3838 18%, transparent );
	border-color: #ff3838;
}
.np-sec-heatmap-btn.is-active {
	background: #ff3838;
	color: #fff;
	border-color: #ff3838;
}
.np-sec-fmap-heat {
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.np-sec-app.is-heatmap-active .np-sec-fmap-heat {
	opacity: calc( var( --heat, 0 ) * 0.65 );
}
@media ( max-width: 720px ) {
	.np-sec-heatmap-btn span { display: none; }
	.np-sec-heatmap-btn { padding: 7px 11px; }
}

/* Booking-Rück-Link — symmetrisch zum „⚔ Cluster"-Tab im Booking-Plugin */
.np-sec-booking-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var( --np-sec-border );
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.np-sec-booking-link:hover {
	background: var( --np-sec-primary );
	color: #fff;
	border-color: var( --np-sec-primary );
	transform: translateY( -1px );
}
.np-sec-booking-link:visited { color: inherit; }
@media ( max-width: 720px ) {
	.np-sec-booking-link span { display: none; } /* nur 📅 auf Mobile */
	.np-sec-booking-link { padding: 7px 11px; }
}

body.np-sec-modal-locked { overflow: hidden; }

/* WICHTIG: `[hidden]` muss explizit `display: none` erzwingen, sonst überschreibt
 * unser `display: flex` weiter unten das HTML-Attribut und das Modal liegt
 * unsichtbar (opacity:0) fullscreen über allem → blockiert sämtliche Klicks. */
.np-sec-modal[hidden],
.np-sec-lightbox[hidden] {
	display: none !important;
}

.np-sec-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .18s ease;
}
.np-sec-modal.is-open { opacity: 1; }
.np-sec-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 5, 8, 14, .75 );
	backdrop-filter: blur( 4px );
	cursor: pointer;
}
.np-sec-modal-content {
	position: relative;
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	max-width: 720px;
	width: 100%;
	max-height: calc( 100vh - 40px );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, .5 );
	transform: translateY( 10px );
	transition: transform .2s ease;
}
.np-sec-modal.is-open .np-sec-modal-content { transform: translateY( 0 ); }

.np-sec-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: linear-gradient( 135deg, var( --np-sec-primary ), var( --np-sec-accent ) );
	color: #fff;
}
.np-sec-modal-head h2 {
	margin: 0;
	color: #fff;
	font-size: 1.2rem;
}
.np-sec-modal-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	background: rgba( 255, 255, 255, .18 );
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	font-weight: 400;
	transition: background .14s ease;
}
.np-sec-modal-close:hover { background: rgba( 255, 255, 255, .32 ); }

.np-sec-modal-body {
	overflow-y: auto;
	padding: 18px 22px 8px;
}
.np-sec-modal-section {
	padding: 10px 0 14px;
	border-bottom: 1px solid color-mix( in srgb, var( --np-sec-fg ) 8%, transparent );
}
.np-sec-modal-section:last-child { border-bottom: 0; }
.np-sec-modal-section h3 {
	margin: 0 0 6px;
	font-size: 1rem;
	letter-spacing: -0.01em;
}
.np-sec-modal-section p,
.np-sec-modal-section ul,
.np-sec-modal-section ol {
	margin: 6px 0;
	line-height: 1.5;
	color: var( --np-sec-fg );
}
.np-sec-modal-section ul,
.np-sec-modal-section ol { padding-left: 22px; }
.np-sec-modal-icons,
.np-sec-modal-ranks {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.np-sec-modal-hint {
	font-style: italic;
	font-size: .85rem;
	color: var( --np-sec-muted );
}
.np-sec-modal-section details {
	border-top: 1px solid color-mix( in srgb, var( --np-sec-fg ) 6%, transparent );
	padding: 8px 0;
}
.np-sec-modal-section details:first-of-type { border-top: 0; }
.np-sec-modal-section details summary {
	cursor: pointer;
	font-weight: 500;
	color: var( --np-sec-fg );
	list-style: none;
	padding: 4px 0;
}
.np-sec-modal-section details summary::-webkit-details-marker { display: none; }
.np-sec-modal-section details summary::before {
	content: '▸';
	color: var( --np-sec-muted );
	margin-right: 8px;
	display: inline-block;
	transition: transform .14s ease;
}
.np-sec-modal-section details[open] summary::before { transform: rotate( 90deg ); }
.np-sec-modal-section details p {
	padding: 4px 0 4px 22px;
	color: var( --np-sec-muted );
}

.np-sec-modal-foot {
	padding: 14px 20px;
	border-top: 1px solid var( --np-sec-border );
	background: color-mix( in srgb, var( --np-sec-fg ) 4%, transparent );
}
.np-sec-modal-foot p {
	margin: 0;
	text-align: center;
	font-style: italic;
	color: var( --np-sec-muted );
	font-size: .9rem;
}

@media ( max-width: 720px ) {
	.np-sec-modal { padding: 0; }
	.np-sec-modal-content {
		max-height: 100vh;
		border-radius: 0;
		max-width: 100%;
	}
}

/* =================================================================
 * Battle-Log
 * ================================================================= */

.np-sec-battle-log {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.np-sec-battle {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	padding: 12px 14px;
	box-shadow: var( --np-sec-shadow );
}
.np-sec-battle.is-draw     { border-left: 4px solid var( --np-sec-warning ); }
.np-sec-battle.is-pending  { border-left: 4px solid var( --np-sec-muted ); opacity: .85; }
.np-sec-battle-head {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-size: .82rem;
	color: var( --np-sec-muted );
	margin-bottom: 8px;
}
.np-sec-battle-date { font-weight: 600; color: var( --np-sec-fg ); }
.np-sec-battle-type { flex: 1; }
.np-sec-battle-status {
	background: color-mix( in srgb, var( --np-sec-muted ) 25%, transparent );
	padding: 1px 8px;
	border-radius: 999px;
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.np-sec-battle-body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 10px;
	align-items: center;
}
.np-sec-battle-side {
	display: flex;
	gap: 10px;
	align-items: center;
}
.np-sec-battle-side.is-loser {
	flex-direction: row-reverse;
	text-align: right;
}
.np-sec-battle-side-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	flex: 0 0 40px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, .2 );
}
.np-sec-battle-side.is-loser .np-sec-battle-side-icon {
	filter: grayscale( .4 ) brightness( .85 );
}
.np-sec-battle-side-meta { min-width: 0; }
.np-sec-battle-side-meta strong { display: block; font-size: .92rem; }
.np-sec-battle-side-meta small  { display: block; font-size: .76rem; color: var( --np-sec-muted ); }

.np-sec-battle-vs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var( --np-sec-muted );
}
.np-sec-battle-score {
	font-size: 1.1rem;
	font-weight: 700;
	color: var( --np-sec-fg );
	background: color-mix( in srgb, var( --np-sec-fg ) 8%, transparent );
	padding: 2px 12px;
	border-radius: 8px;
}
.np-sec-battle-draw {
	font-weight: 700;
	color: var( --np-sec-warning );
	background: color-mix( in srgb, var( --np-sec-warning ) 18%, transparent );
	padding: 2px 10px;
	border-radius: 999px;
	font-size: .82rem;
}
.np-sec-battle-vs-label { font-size: .8rem; text-transform: uppercase; }

.np-sec-battle-footer {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid color-mix( in srgb, var( --np-sec-fg ) 8%, transparent );
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: .8rem;
	color: var( --np-sec-muted );
}
.np-sec-battle-territory { font-weight: 600; }
.np-sec-battle-photo-link {
	color: var( --np-sec-primary );
	text-decoration: none;
}
.np-sec-battle-photo-link:hover { text-decoration: underline; }
.np-sec-battle-narrative {
	margin: 0;
	flex-basis: 100%;
	font-style: italic;
	color: var( --np-sec-fg );
	line-height: 1.5;
}

/* =================================================================
 * Hall of Fame
 * ================================================================= */

.np-sec-hof-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) );
	gap: 14px;
}
/* V1.81.0: Podium Top-3 */
.np-sec-hof-podium {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 14px;
	margin: 8px 0 22px;
	flex-wrap: wrap;
}
.np-sec-hof-podium-spot {
	flex: 0 1 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 14px 12px;
	border-radius: 14px;
	background: linear-gradient( 180deg, color-mix( in srgb, var( --np-sec-pfac, #1f6feb ) 18%, transparent ) 0%, var( --np-sec-card, rgba(255,255,255,.04) ) 70% );
	border: 1px solid color-mix( in srgb, var( --np-sec-pfac, #1f6feb ) 45%, transparent );
	cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease;
}
.np-sec-hof-podium-spot:hover { transform: translateY( -3px ); box-shadow: 0 8px 22px rgba( 0,0,0,.28 ); }
.np-sec-hof-podium-spot.is-place-1 { transform: translateY( -14px ); flex-basis: 168px; padding-top: 18px; }
.np-sec-hof-podium-spot.is-place-1:hover { transform: translateY( -17px ); }
.np-sec-hof-podium-medal { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.np-sec-hof-podium-avatar,
.np-sec-hof-podium-spot img {
	width: 72px; height: 72px; border-radius: 50%;
	object-fit: cover;
	border: 3px solid var( --np-sec-pfac, #1f6feb );
	box-shadow: 0 0 14px color-mix( in srgb, var( --np-sec-pfac, #1f6feb ) 55%, transparent );
}
.np-sec-hof-podium-name { display: block; margin-top: 8px; font-size: 14px; }
.np-sec-hof-podium-fac { display: block; opacity: .7; font-size: 11px; }
.np-sec-hof-podium-score {
	display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px;
	background: color-mix( in srgb, var( --np-sec-pfac, #1f6feb ) 25%, transparent );
	font-weight: 700; font-size: 12px;
}
.np-sec-hof-card-boss { border-color: rgba( 220, 38, 38, .4 ); }
.np-sec-hof-card {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	padding: 14px 16px;
	box-shadow: var( --np-sec-shadow );
}
.np-sec-hof-card h3 {
	margin: 0 0 10px;
	font-size: 1rem;
}
.np-sec-hof-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-sec-hof-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: var( --np-sec-radius-sm );
	border: 1px solid transparent;
}
.np-sec-hof-row.is-gold   { background: color-mix( in srgb, #facc15 22%, var( --np-sec-card ) ); border-color: color-mix( in srgb, #facc15 30%, transparent ); }
.np-sec-hof-row.is-silver { background: color-mix( in srgb, #cbd5e1 28%, var( --np-sec-card ) ); border-color: color-mix( in srgb, #cbd5e1 32%, transparent ); }
.np-sec-hof-row.is-bronze { background: color-mix( in srgb, #d97706 22%, var( --np-sec-card ) ); border-color: color-mix( in srgb, #d97706 30%, transparent ); }
.np-sec-hof-rank {
	min-width: 22px;
	text-align: center;
	font-weight: 700;
	color: var( --np-sec-muted );
}
.np-sec-hof-icon {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 2px 5px rgba( 0, 0, 0, .15 );
	flex: 0 0 32px;
}
.np-sec-hof-name { flex: 1; min-width: 0; }
.np-sec-hof-name strong { display: block; }
.np-sec-hof-name small {
	display: block;
	color: var( --np-sec-muted );
	font-size: .72rem;
}
.np-sec-hof-stat {
	font-weight: 700;
	color: var( --np-sec-success );
	background: color-mix( in srgb, var( --np-sec-success ) 14%, transparent );
	padding: 2px 9px;
	border-radius: 8px;
	font-size: .78rem;
}
.np-sec-hof-stat.is-defeat {
	color: var( --np-sec-danger );
	background: color-mix( in srgb, var( --np-sec-danger ) 12%, transparent );
}
.np-sec-hof-streak {
	font-weight: 700;
	color: var( --np-sec-fg );
}
.np-sec-hof-streak small {
	font-weight: 500;
	color: var( --np-sec-muted );
	margin-left: 4px;
}

/* V1.31: Honor-Card im Hall of Fame — Cross-Plugin-Trophäen visualisieren */
.np-sec-hof-card-honor {
	background:
		linear-gradient( 135deg, color-mix( in srgb, #fbbf24 12%, transparent ), transparent 60% ),
		var( --np-sec-card );
	border-color: color-mix( in srgb, #fbbf24 32%, var( --np-sec-border ) );
}
.np-sec-hof-card-honor h3 {
	color: color-mix( in srgb, #f59e0b 70%, var( --np-sec-fg ) );
}
.np-sec-hof-card-intro {
	margin: 0 0 12px;
	font-size: .85rem;
	color: var( --np-sec-muted );
}
.np-sec-hof-honor {
	font-weight: 700;
	font-size: 1.05rem;
	color: color-mix( in srgb, #f59e0b 70%, var( --np-sec-fg ) );
	white-space: nowrap;
}

/* =================================================================
 * My-Faction / Login / Beitreten
 * ================================================================= */

.np-sec-login-required {
	background: var( --np-sec-card );
	border: 2px dashed var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	padding: 26px 22px;
	text-align: center;
}
.np-sec-login-required h3 { margin: 0 0 6px; }
.np-sec-login-required p  { color: var( --np-sec-muted ); margin: 0 0 14px; }
.np-sec-login-required .button-primary {
	background: var( --np-sec-primary );
	color: #fff;
	border-color: var( --np-sec-primary );
}

.np-sec-join-faction { padding: 8px 4px; }
.np-sec-join-faction h3 { margin: 0 0 6px; }
.np-sec-join-faction > p { color: var( --np-sec-muted ); margin: 0 0 14px; }

.np-sec-faction-choices {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 10px;
}
.np-sec-faction-choice {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var( --np-sec-border );
	border-left: 4px solid var( --np-sec-faction, var( --np-sec-primary ) );
	border-radius: var( --np-sec-radius );
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	cursor: pointer;
	transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
	font: inherit;
	text-align: left;
}
.np-sec-faction-choice:hover {
	border-color: var( --np-sec-faction, var( --np-sec-primary ) );
	transform: translateY( -1px );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .12 );
}
.np-sec-faction-choice:disabled { opacity: .5; cursor: wait; }
.np-sec-faction-choice-icon { font-size: 22px; line-height: 1; }
.np-sec-faction-choice strong { font-size: 1rem; }
.np-sec-faction-choice small  { color: var( --np-sec-muted ); font-size: .82rem; line-height: 1.4; }

.np-sec-join-status {
	margin: 0;
	font-size: .9rem;
	color: var( --np-sec-success );
	min-height: 1.4em;
}

.np-sec-my-faction {
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 18%, var( --np-sec-card ) ),
		var( --np-sec-card )
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 30%, var( --np-sec-border ) );
	border-radius: var( --np-sec-radius );
	padding: 18px 20px;
	box-shadow: var( --np-sec-shadow );
}
.np-sec-my-faction-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}
.np-sec-my-faction-icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: var( --np-sec-faction, var( --np-sec-primary ) );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: #fff;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, .25 );
}
.np-sec-my-faction-eyebrow {
	display: block;
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --np-sec-muted );
	margin-bottom: 2px;
}
.np-sec-my-faction h3 {
	margin: 0;
	font-size: 1.3rem;
}
.np-sec-my-faction-rank {
	margin: 4px 0 0;
	color: var( --np-sec-muted );
	font-size: .9rem;
}

.np-sec-stat-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: 10px;
	margin-bottom: 10px;
}
.np-sec-stat-tile {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* V1.30: Honor-Tile — Cross-Plugin-Trophäen, optisch hervorgehoben */
.np-sec-stat-tile-honor {
	background: linear-gradient( 135deg, color-mix( in srgb, #fbbf24 18%, var( --np-sec-card ) ), var( --np-sec-card ) );
	border-color: color-mix( in srgb, #fbbf24 35%, var( --np-sec-border ) );
	box-shadow: 0 2px 10px -4px rgba( 251, 191, 36, .35 );
}
.np-sec-stat-tile-honor .np-sec-stat-value {
	color: color-mix( in srgb, #f59e0b 70%, var( --np-sec-fg ) );
}
.np-sec-stat-tile-honor .np-sec-stat-label {
	color: color-mix( in srgb, #f59e0b 55%, var( --np-sec-muted ) );
}

/* V1.39: Streak-Tile — drei Hitze-Stufen + animierte Flamme bei ≥3 */
.np-sec-stat-tile-streak.is-streak-warm {
	background: linear-gradient( 135deg, color-mix( in srgb, #fb923c 14%, var( --np-sec-card ) ), var( --np-sec-card ) );
	border-color: color-mix( in srgb, #fb923c 30%, var( --np-sec-border ) );
}
.np-sec-stat-tile-streak.is-streak-hot {
	background: linear-gradient( 135deg, color-mix( in srgb, #f97316 22%, var( --np-sec-card ) ), var( --np-sec-card ) );
	border-color: color-mix( in srgb, #f97316 45%, var( --np-sec-border ) );
	box-shadow: 0 4px 16px -6px rgba( 249, 115, 22, .45 );
}
.np-sec-stat-tile-streak.is-streak-legendary {
	background: linear-gradient( 135deg, color-mix( in srgb, #dc2626 30%, var( --np-sec-card ) ), color-mix( in srgb, #f97316 18%, var( --np-sec-card ) ) );
	border-color: color-mix( in srgb, #dc2626 55%, var( --np-sec-border ) );
	box-shadow: 0 4px 22px -4px rgba( 220, 38, 38, .65 );
	animation: np-sec-streak-pulse 1.8s ease-in-out infinite;
}
.np-sec-stat-tile-streak .np-sec-stat-value {
	color: #fb923c;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.np-sec-stat-tile-streak.is-streak-hot .np-sec-stat-value,
.np-sec-stat-tile-streak.is-streak-legendary .np-sec-stat-value {
	color: #f97316;
}
.np-sec-stat-tile-streak.is-streak-legendary .np-sec-stat-value {
	color: #fbbf24;
}
.np-sec-stat-streak-flame {
	display: inline-block;
	transform-origin: 50% 90%;
}
.np-sec-stat-tile-streak.is-streak-hot .np-sec-stat-streak-flame,
.np-sec-stat-tile-streak.is-streak-legendary .np-sec-stat-streak-flame {
	animation: np-sec-streak-flame 1.4s ease-in-out infinite;
}
.np-sec-stat-tile-streak.is-streak-legendary .np-sec-stat-streak-flame {
	animation-duration: .9s;
	filter: drop-shadow( 0 0 8px rgba( 251, 191, 36, .8 ) );
}
@keyframes np-sec-streak-pulse {
	0%, 100% { box-shadow: 0 4px 22px -4px rgba( 220, 38, 38, .55 ); }
	50%      { box-shadow: 0 4px 28px -2px rgba( 220, 38, 38, .9 ); }
}
@keyframes np-sec-streak-flame {
	0%, 100% { transform: scale( 1 ) rotate( -3deg ); }
	50%      { transform: scale( 1.15 ) rotate( 3deg ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.np-sec-stat-tile-streak.is-streak-legendary { animation: none; }
	.np-sec-stat-streak-flame { animation: none !important; }
}
.np-sec-stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var( --np-sec-fg );
}
.np-sec-stat-label {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var( --np-sec-muted );
}
.np-sec-my-faction-lore {
	margin: 0;
	font-style: italic;
	color: var( --np-sec-muted );
	line-height: 1.5;
}

/* Badge-Wall im My-Faction-Panel */
.np-sec-badge-wall {
	margin-top: 18px;
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	padding: 16px 18px;
}
.np-sec-badge-wall-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 12px;
}
.np-sec-badge-wall-head h4 { margin: 0; font-size: 1rem; }
.np-sec-badge-wall-count {
	font-size: .78rem;
	color: var( --np-sec-muted );
}
.np-sec-badge-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 8px;
}
.np-sec-badge {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 12px;
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	transition: border-color .15s ease, transform .15s ease;
}
.np-sec-badge.is-earned {
	border-color: color-mix( in srgb, var( --np-sec-success ) 40%, var( --np-sec-border ) );
	background: color-mix( in srgb, var( --np-sec-success ) 6%, transparent );
}
.np-sec-badge.is-locked {
	opacity: .42;
	filter: grayscale( .7 );
}
.np-sec-badge:hover { transform: translateY( -1px ); }
.np-sec-badge-icon {
	font-size: 1.6rem;
	line-height: 1;
	flex: 0 0 32px;
}
.np-sec-badge-text { min-width: 0; }
.np-sec-badge-text strong {
	display: block;
	font-size: .9rem;
	margin-bottom: 2px;
}
.np-sec-badge-text small {
	display: block;
	font-size: .76rem;
	color: var( --np-sec-muted );
	line-height: 1.35;
}

/* Hall-of-Fame Badge-Counter */
.np-sec-hof-badges {
	font-weight: 700;
	color: var( --np-sec-warning );
	background: color-mix( in srgb, var( --np-sec-warning ) 14%, transparent );
	padding: 2px 9px;
	border-radius: 8px;
	font-size: .78rem;
}

/* =================================================================
 * [sectorum_campaign_news] + Narrative-Story
 * ================================================================= */

.np-sec-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.np-sec-news-item {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-left: 4px solid var( --np-sec-primary );
	border-radius: var( --np-sec-radius );
	padding: 18px 22px;
	box-shadow: var( --np-sec-shadow );
}
.np-sec-news-head { margin: 0 0 12px; }
.np-sec-news-date {
	display: block;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --np-sec-muted );
	margin-bottom: 4px;
}
.np-sec-news-title {
	margin: 0 0 4px;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}
.np-sec-news-period {
	color: var( --np-sec-muted );
	font-size: .8rem;
}

.np-sec-news-body { color: var( --np-sec-fg ); line-height: 1.6; }

.np-sec-news-story p.np-sec-news-lead {
	font-size: 1.08rem;
	font-style: italic;
	color: var( --np-sec-fg );
	margin: 0 0 14px;
	padding-left: 12px;
	border-left: 3px solid var( --np-sec-accent );
}
.np-sec-news-section-title {
	font-size: .95rem;
	letter-spacing: -0.01em;
	margin: 18px 0 8px;
	color: var( --np-sec-fg );
}
.np-sec-news-battle-list,
.np-sec-news-faction-list,
.np-sec-news-player-list {
	margin: 0 0 14px;
	padding-left: 22px;
	color: var( --np-sec-fg );
}
.np-sec-news-faction-list {
	list-style: none;
	padding-left: 0;
}
.np-sec-news-faction-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}
.np-sec-news-faction-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --np-sec-faction, var( --np-sec-muted ) );
	flex: 0 0 10px;
}
.np-sec-news-flip-note {
	margin: 6px 0 14px;
	font-size: .88rem;
	color: var( --np-sec-muted );
	font-style: italic;
}
.np-sec-news-quiet {
	margin: 0;
	color: var( --np-sec-muted );
	font-style: italic;
}

.np-sec-news-pagination {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 18px;
}
.np-sec-news-page,
.np-sec-news-page-current {
	padding: 6px 12px;
	border-radius: var( --np-sec-radius-sm );
	border: 1px solid var( --np-sec-border );
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	text-decoration: none;
	font-weight: 500;
}
.np-sec-news-page:hover { border-color: var( --np-sec-primary ); }
.np-sec-news-page-current {
	background: var( --np-sec-primary );
	color: #fff;
	border-color: var( --np-sec-primary );
}

/* =================================================================
 * Player-Profil ([sectorum_player])
 * ================================================================= */

.np-sec-player-card {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 20px 24px;
	background: linear-gradient( 135deg,
		color-mix( in srgb, var( --np-sec-faction ) 20%, var( --np-sec-card ) ),
		var( --np-sec-card )
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-faction ) 30%, var( --np-sec-border ) );
	border-radius: var( --np-sec-radius );
	box-shadow: var( --np-sec-shadow );
	margin-bottom: 16px;
}
.np-sec-player-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	background: var( --np-sec-faction, var( --np-sec-primary ) );
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 48px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .3 );
}
.np-sec-player-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.np-sec-player-eyebrow {
	display: block;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --np-sec-muted );
}
.np-sec-player-name {
	margin: 4px 0 6px;
	font-size: 1.5rem;
}
.np-sec-player-rank {
	margin: 0;
	color: var( --np-sec-muted );
	font-size: .9rem;
}
.np-sec-player-stats {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 8px;
}
.np-sec-player-stats .np-sec-stat-tile {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	padding: 8px 12px;
	min-width: 70px;
	text-align: center;
}

.np-sec-player-lore {
	font-style: italic;
	font-size: 1rem;
	line-height: 1.55;
	padding-left: 12px;
	border-left: 3px solid var( --np-sec-faction, var( --np-sec-accent ) );
}

.np-sec-profile-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	background: var( --np-sec-bg );
	color: var( --np-sec-fg );
	font: inherit;
	resize: vertical;
}
.np-sec-profile-form .np-sec-media-row {
	display: flex;
	gap: 12px;
	align-items: center;
}
.np-sec-profile-form .np-sec-media-preview {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: color-mix( in srgb, var( --np-sec-fg ) 8%, transparent );
	overflow: hidden;
}
.np-sec-profile-form .np-sec-media-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-sec-player-battles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-sec-player-battles li {
	display: grid;
	grid-template-columns: 28px 90px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 12px;
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	background: var( --np-sec-card );
	font-size: .88rem;
}
.np-sec-player-battles li.is-win { border-left: 3px solid var( --np-sec-success ); }
.np-sec-player-battles li.is-loss { border-left: 3px solid var( --np-sec-danger ); opacity: .85; }
.np-sec-player-battle-score {
	font-weight: 700;
	color: var( --np-sec-fg );
}

.np-sec-app-notice {
	padding: 10px 14px;
	background: color-mix( in srgb, var( --np-sec-success ) 18%, var( --np-sec-card ) );
	border: 1px solid color-mix( in srgb, var( --np-sec-success ) 35%, transparent );
	border-radius: var( --np-sec-radius-sm );
	margin-bottom: 14px;
	color: var( --np-sec-fg );
	font-weight: 600;
}

@media ( max-width: 720px ) {
	.np-sec-player-card {
		grid-template-columns: 80px 1fr;
		grid-template-rows: auto auto;
		gap: 14px;
	}
	.np-sec-player-avatar { width: 80px; height: 80px; font-size: 32px; }
	.np-sec-player-stats { grid-column: 1 / -1; grid-template-columns: repeat( 4, 1fr ); }
}

/* =================================================================
 * Stats-Charts ([sectorum_stats])
 * ================================================================= */

.np-sec-stats-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 14px;
}
.np-sec-stats-card {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	padding: 16px 18px;
	box-shadow: var( --np-sec-shadow );
}
.np-sec-stats-card h3 {
	margin: 0 0 12px;
	font-size: 1rem;
}
.np-sec-stats-card-wide { grid-column: 1 / -1; }
.np-sec-stats-empty {
	color: var( --np-sec-muted );
	font-style: italic;
	margin: 12px 0;
}
.np-sec-chart-svg {
	width: 100%;
	height: auto;
	color: var( --np-sec-fg );
}

/* Donut */
.np-sec-donut-wrap {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 16px;
	align-items: start;
}
.np-sec-donut { max-width: 180px; }
.np-sec-donut-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .82rem;
}
.np-sec-donut-legend li {
	display: grid;
	grid-template-columns: 14px 1fr auto;
	gap: 8px;
	align-items: center;
}
.np-sec-donut-swatch {
	width: 12px;
	height: 12px;
	border-radius: 3px;
}
.np-sec-donut-label {
	color: var( --np-sec-fg );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.np-sec-donut-value {
	font-weight: 700;
	color: var( --np-sec-fg );
}
.np-sec-donut-value small {
	font-weight: 500;
	color: var( --np-sec-muted );
}
@media ( max-width: 480px ) {
	.np-sec-donut-wrap { grid-template-columns: 1fr; }
}

/* Win-Rate-Bars */
.np-sec-winrate-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.np-sec-winrate-list li {
	display: grid;
	grid-template-columns: 130px 1fr 90px;
	gap: 8px;
	align-items: center;
	font-size: .85rem;
}
.np-sec-winrate-name {
	color: var( --np-sec-fg );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.np-sec-winrate-track {
	height: 14px;
	background: color-mix( in srgb, var( --np-sec-fg ) 8%, transparent );
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}
.np-sec-winrate-fill {
	display: block;
	height: 100%;
	background: var( --np-sec-faction, var( --np-sec-primary ) );
	border-radius: inherit;
	transition: width .4s ease;
}
.np-sec-winrate-meta {
	text-align: right;
}
.np-sec-winrate-meta strong { font-size: .92rem; }
.np-sec-winrate-meta small { display: block; color: var( --np-sec-muted ); font-size: .72rem; }

/* Streak-Board */
.np-sec-streak-board {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.np-sec-streak-board li {
	display: grid;
	grid-template-columns: 28px 140px 1fr 70px;
	gap: 10px;
	align-items: center;
}
.np-sec-streak-rank {
	font-weight: 700;
	color: var( --np-sec-muted );
	text-align: center;
}
.np-sec-streak-bar {
	display: block;
	height: 8px;
	background: var( --np-sec-faction, var( --np-sec-primary ) );
	border-radius: 999px;
	min-width: 4px;
}
.np-sec-streak-value {
	text-align: right;
	font-weight: 700;
	color: var( --np-sec-fg );
}

/* News-Event-Banner (Random-Events haben eigenen Look) */
.np-sec-news-item:has( .np-sec-news-event ) {
	border-left-color: #f59e0b;
}
.np-sec-news-event-lead {
	font-style: italic;
	color: var( --np-sec-fg );
	font-size: 1.02rem;
	line-height: 1.55;
	padding-left: 12px;
	border-left: 3px solid #f59e0b;
}

/* =================================================================
 * Quiz (Sorting-Hat)
 * ================================================================= */

.np-sec-quiz {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	padding: 20px 24px;
}
.np-sec-quiz-head h3 { margin: 0 0 6px; }
.np-sec-quiz-head p  { color: var( --np-sec-muted ); margin: 0 0 18px; }

.np-sec-quiz-question {
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	padding: 14px 16px;
	margin: 0 0 14px;
}
.np-sec-quiz-question legend {
	padding: 0 8px;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-weight: 600;
}
.np-sec-quiz-q-num {
	background: linear-gradient( 135deg, var( --np-sec-primary ), var( --np-sec-accent ) );
	color: #fff;
	font-size: .68rem;
	letter-spacing: .06em;
	padding: 2px 9px;
	border-radius: 999px;
}
.np-sec-quiz-answers {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}
.np-sec-quiz-answer {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 14px;
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	cursor: pointer;
	transition: border-color .14s ease, background .14s ease;
}
.np-sec-quiz-answer:hover { border-color: var( --np-sec-primary ); }
.np-sec-quiz-answer:has( input:checked ) {
	border-color: var( --np-sec-primary );
	background: color-mix( in srgb, var( --np-sec-primary ) 10%, transparent );
}
.np-sec-quiz-answer input { margin-top: 2px; }
.np-sec-quiz-submit {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.np-sec-quiz-btn {
	background: linear-gradient( 135deg, var( --np-sec-primary ), var( --np-sec-accent ) );
	color: #fff;
	border: 0;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba( 31, 111, 235, .3 );
}
.np-sec-quiz-btn:hover { transform: translateY( -1px ); }
.np-sec-quiz-submit small { color: var( --np-sec-muted ); font-size: .78rem; }

.np-sec-quiz-result {
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-faction ) 24%, var( --np-sec-card ) ),
		var( --np-sec-card )
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-faction ) 35%, var( --np-sec-border ) );
	border-radius: var( --np-sec-radius );
	padding: 18px 20px;
	margin: 0 0 18px;
}
.np-sec-quiz-result-head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
}
.np-sec-quiz-result-icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: var( --np-sec-faction );
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, .25 );
	flex: 0 0 54px;
}
.np-sec-quiz-result-eyebrow {
	display: block;
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --np-sec-muted );
}
.np-sec-quiz-result h3 { margin: 2px 0 0; font-size: 1.2rem; }
.np-sec-quiz-result-lore {
	font-style: italic;
	margin: 6px 0 12px;
	color: var( --np-sec-fg );
	line-height: 1.5;
}
.np-sec-quiz-result-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-sec-quiz-result-actions small {
	font-size: .78rem;
	color: var( --np-sec-muted );
}
.np-sec-quiz-accept {
	background: var( --np-sec-faction ) !important;
	color: #fff !important;
	border-color: var( --np-sec-faction ) !important;
	font-weight: 700 !important;
	padding: 12px 20px !important;
	border-radius: 999px !important;
	align-self: flex-start;
}

.np-sec-faction-choice.is-recommended {
	box-shadow: 0 0 0 2px var( --np-sec-faction ),
	            0 8px 22px color-mix( in srgb, var( --np-sec-faction ) 40%, transparent );
}
.np-sec-faction-choice-badge {
	display: inline-block;
	margin-top: 4px;
	background: var( --np-sec-faction );
	color: #fff;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	align-self: flex-start;
}

/* =================================================================
 * Live-Polling (Owner-Flip-Animation + Indikator)
 * ================================================================= */

.np-sec-app-meta.is-live-active .np-sec-pulse { background: #39d353; }
.np-sec-app-meta.is-pulse-flash {
	animation: np-sec-meta-flash 1.2s ease-out;
}
@keyframes np-sec-meta-flash {
	0%   { background: color-mix( in srgb, var( --np-sec-success ) 35%, transparent ); }
	100% { background: transparent; }
}

.np-sec-fmap-hex.is-just-flipped polygon {
	animation: np-sec-flip-flash 2.4s ease-out;
}
@keyframes np-sec-flip-flash {
	0%   { filter: brightness( 2.2 ) drop-shadow( 0 0 12px #fff ); }
	50%  { filter: brightness( 1.4 ) drop-shadow( 0 0 8px currentColor ); }
	100% { filter: none; }
}

/* Adjacency-Hint: pulsierender Glow auf angreifbaren Sektoren wenn eingeloggter
 * Spieler eine Fraktion hat. Dezent — soll nicht von der Karte ablenken. */
.np-sec-fmap-hex.is-attackable polygon {
	animation: np-sec-attackable-pulse 2.8s ease-in-out infinite;
}
@keyframes np-sec-attackable-pulse {
	0%, 100% { stroke: #fde047; stroke-width: 2; filter: none; }
	50%      { stroke: #fde047; stroke-width: 3; filter: drop-shadow( 0 0 6px rgba( 253, 224, 71, .7 ) ); }
}

/* =================================================================
 * Battle-Photo-Gallery + Lightbox
 * ================================================================= */

.np-sec-gallery-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 12px;
}
.np-sec-gallery-item {
	position: relative;
	border-radius: var( --np-sec-radius );
	overflow: hidden;
	background: var( --np-sec-card );
	box-shadow: var( --np-sec-shadow );
}
.np-sec-gallery-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var( --np-sec-fg );
	font: inherit;
	text-align: left;
}
.np-sec-gallery-btn img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform .25s ease;
}
.np-sec-gallery-btn:hover img { transform: scale( 1.04 ); }
.np-sec-gallery-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
}
.np-sec-gallery-result {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-size: .92rem;
}
.np-sec-gallery-result small {
	color: var( --np-sec-muted );
	margin-left: auto;
	font-weight: 600;
}
.np-sec-gallery-date {
	font-size: .76rem;
	color: var( --np-sec-muted );
}

.np-sec-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s ease;
}
.np-sec-lightbox.is-open { opacity: 1; }
.np-sec-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 5, 8, 14, .94 );
	cursor: pointer;
}
.np-sec-lightbox-close,
.np-sec-lightbox-prev,
.np-sec-lightbox-next {
	position: absolute;
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
	border: 0;
	font-size: 28px;
	cursor: pointer;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.np-sec-lightbox-close:hover,
.np-sec-lightbox-prev:hover,
.np-sec-lightbox-next:hover { background: rgba( 255, 255, 255, .25 ); }
.np-sec-lightbox-close { top: 16px; right: 16px; }
.np-sec-lightbox-prev  { left: 16px; top: 50%; transform: translateY( -50% ); }
.np-sec-lightbox-next  { right: 16px; top: 50%; transform: translateY( -50% ); }

.np-sec-lightbox-frame {
	position: relative;
	max-width: min( 1100px, 95vw );
	max-height: 90vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 1;
}
.np-sec-lightbox-img {
	max-width: 100%;
	max-height: 80vh;
	display: block;
	border-radius: var( --np-sec-radius );
	box-shadow: 0 24px 60px rgba( 0, 0, 0, .6 );
}
.np-sec-lightbox-caption {
	color: #fff;
	background: rgba( 13, 17, 23, .85 );
	padding: 12px 16px;
	border-radius: var( --np-sec-radius-sm );
	max-width: 760px;
}
.np-sec-lightbox-caption header {
	display: flex;
	gap: 10px;
	align-items: baseline;
	flex-wrap: wrap;
}
.np-sec-lightbox-result em {
	font-weight: 700;
	font-style: normal;
	background: rgba( 255, 255, 255, .15 );
	padding: 1px 8px;
	border-radius: 6px;
	margin: 0 4px;
}
.np-sec-lightbox-meta {
	color: rgba( 255, 255, 255, .7 );
	font-size: .85rem;
}
.np-sec-lightbox-narrative {
	margin: 8px 0 0;
	font-size: .9rem;
	color: rgba( 255, 255, 255, .9 );
	line-height: 1.5;
}
.np-sec-lightbox-narrative:empty { display: none; }

/* =================================================================
 * Kampagnen-Archiv (Hall of Conquerors)
 * ================================================================= */

.np-sec-archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.np-sec-archive-item {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	overflow: hidden;
	box-shadow: var( --np-sec-shadow );
}
.np-sec-archive-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-faction ) 20%, var( --np-sec-card ) ),
		var( --np-sec-card )
	);
	border-bottom: 1px solid var( --np-sec-border );
}
.np-sec-archive-eyebrow {
	display: block;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --np-sec-muted );
}
.np-sec-archive-head h3 { margin: 4px 0 0; font-size: 1.3rem; }
.np-sec-archive-champion {
	margin-left: auto;
	text-align: right;
	padding: 8px 12px;
	border: 2px solid var( --np-sec-faction );
	border-radius: var( --np-sec-radius-sm );
	background: rgba( 255, 255, 255, .03 );
}
.np-sec-archive-champion small {
	display: block;
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --np-sec-muted );
}
.np-sec-archive-champion strong {
	display: block;
	font-size: 1rem;
	color: var( --np-sec-fg );
	margin: 2px 0;
}
.np-sec-archive-champion span {
	font-size: .76rem;
	color: var( --np-sec-muted );
}

.np-sec-archive-stats {
	display: flex;
	gap: 28px;
	padding: 12px 20px;
	border-bottom: 1px solid color-mix( in srgb, var( --np-sec-fg ) 6%, transparent );
}
.np-sec-archive-stat {
	display: flex;
	flex-direction: column;
}
.np-sec-archive-stat-value {
	font-size: 1.6rem;
	font-weight: 700;
	color: var( --np-sec-fg );
}
.np-sec-archive-stat-label {
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --np-sec-muted );
}

.np-sec-archive-factions,
.np-sec-archive-players {
	padding: 12px 20px;
}
.np-sec-archive-factions { border-bottom: 1px solid color-mix( in srgb, var( --np-sec-fg ) 6%, transparent ); }
.np-sec-archive-factions h4,
.np-sec-archive-players h4 {
	margin: 0 0 8px;
	font-size: .88rem;
	letter-spacing: -0.01em;
	color: var( --np-sec-fg );
}
.np-sec-archive-factions ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.np-sec-archive-factions li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --np-sec-faction ) 14%, transparent );
	font-size: .85rem;
}
.np-sec-archive-faction-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --np-sec-faction );
}
.np-sec-archive-faction-count {
	font-weight: 700;
	color: var( --np-sec-fg );
}
.np-sec-archive-players ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-sec-archive-players li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .92rem;
}
.np-sec-archive-medal { font-size: 1.3rem; flex: 0 0 28px; }
.np-sec-archive-players small { color: var( --np-sec-muted ); }

/* =================================================================
 * [sectorum_record_battle] – Magic-Link Edit-Form
 * ================================================================= */

.np-sec-record-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}
.np-sec-record-fieldset {
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius );
	padding: 14px 16px;
	background: var( --np-sec-card );
}
.np-sec-record-fieldset legend {
	padding: 0 8px;
	font-weight: 700;
	font-size: .92rem;
	letter-spacing: -0.01em;
}

/* =================================================================
 * V1.32: Map-Picker im Record-Battle
 * V1.32.2: Echte Cluster-Map-Render statt Mini-Hex-Stub
 * ================================================================= */
.np-sec-record-map-picker {
	margin-bottom: 12px;
}
.np-sec-record-map-hint {
	margin: 0 0 8px;
	min-height: 22px;
	font-size: .9rem;
}
.np-sec-record-map-hint strong {
	color: var( --np-sec-fg );
	font-weight: 700;
}
.np-sec-record-map-hint small {
	color: var( --np-sec-muted );
	margin-left: 6px;
}
.np-sec-record-map-hint em {
	color: var( --np-sec-muted );
	font-style: italic;
}
/* V1.32.2: Full-Map-Stage mit Background-Image-Support */
.np-sec-record-map-stage {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	overflow: hidden;
	background: #0e1521;
}
.np-sec-record-map-picker-full .np-sec-record-map-stage::before {
	content: "";
	display: block;
	padding-top: 75%; /* 4:3 Aspect-Ratio Default — wird vom SVG-viewBox überschrieben */
}
.np-sec-record-map-picker-full .np-sec-record-map-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.np-sec-record-map-svg {
	display: block;
	width: 100%;
	max-height: 480px;
}
.np-sec-record-mhex,
.np-sec-record-mpoly {
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease;
	transform-origin: center;
	transform-box: fill-box;
}
.np-sec-record-mhex:hover,
.np-sec-record-mhex:focus-visible,
.np-sec-record-mpoly:hover,
.np-sec-record-mpoly:focus-visible {
	filter: brightness( 1.2 ) drop-shadow( 0 0 8px rgba( 251, 191, 36, .7 ) );
	outline: none;
}
.np-sec-record-mhex.is-selected,
.np-sec-record-mpoly.is-selected {
	filter: drop-shadow( 0 0 12px rgba( 251, 191, 36, .95 ) );
}
.np-sec-record-mhex.is-empty polygon {
	stroke-dasharray: 4 3;
}
.np-sec-record-mhex-icon,
.np-sec-record-mhex-label {
	fill: #fff;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, .5 );
	pointer-events: none;
}
.np-sec-record-map-fallback {
	margin-top: 10px;
}
.np-sec-record-map-fallback summary {
	cursor: pointer;
	font-size: .85rem;
	color: var( --np-sec-muted );
	padding: 4px 0;
	user-select: none;
}
.np-sec-record-map-fallback summary:hover {
	color: var( --np-sec-fg );
}
.np-sec-record-map-fallback select {
	width: 100%;
	margin-top: 6px;
}
@media ( max-width: 720px ) {
	.np-sec-record-map-picker-full .np-sec-record-map-stage::before {
		padding-top: 80%;
	}
}
.np-sec-record-outcome {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.np-sec-record-outcome label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border: 1px solid var( --np-sec-border );
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.np-sec-record-outcome label:hover {
	border-color: var( --np-sec-primary );
}
.np-sec-record-outcome input[type=radio] {
	margin: 0;
}
.np-sec-record-outcome label:has( input:checked ) {
	background: color-mix( in srgb, var( --np-sec-primary ) 15%, transparent );
	border-color: var( --np-sec-primary );
}

.np-sec-record-fieldset:has( .np-sec-record-side ) {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 14px;
	align-items: stretch;
}
.np-sec-record-fieldset:has( .np-sec-record-side ) > legend {
	grid-column: 1 / -1;
}
.np-sec-record-side {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.np-sec-record-side strong {
	font-size: .85rem;
	color: var( --np-sec-muted );
	text-transform: uppercase;
	letter-spacing: .08em;
}
.np-sec-record-side select,
.np-sec-record-side input {
	padding: 8px 10px;
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	background: var( --np-sec-bg );
	color: var( --np-sec-fg );
	font: inherit;
}
.np-sec-record-vs {
	font-size: 1.4rem;
	font-weight: 700;
	color: var( --np-sec-muted );
	display: flex;
	align-items: center;
}
.np-sec-record-fieldset textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --np-sec-border );
	border-radius: var( --np-sec-radius-sm );
	background: var( --np-sec-bg );
	color: var( --np-sec-fg );
	font: inherit;
	resize: vertical;
}

.np-sec-record-submit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}
.np-sec-record-btn {
	background: linear-gradient( 135deg, var( --np-sec-primary ), var( --np-sec-accent ) );
	color: #fff;
	border: 0;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba( 31, 111, 235, .3 );
	transition: transform .14s ease, box-shadow .14s ease;
}
.np-sec-record-btn:hover {
	transform: translateY( -1px );
	box-shadow: 0 8px 22px rgba( 31, 111, 235, .4 );
}
.np-sec-record-submit small {
	color: var( --np-sec-muted );
	font-size: .78rem;
}

.np-sec-record-success {
	background: linear-gradient( 135deg,
		color-mix( in srgb, var( --np-sec-success ) 22%, var( --np-sec-card ) ),
		var( --np-sec-card )
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-success ) 30%, var( --np-sec-border ) );
	border-radius: var( --np-sec-radius );
	padding: 30px 24px;
	text-align: center;
}
.np-sec-record-success h2 { margin: 0 0 6px; }
.np-sec-record-success p  { color: var( --np-sec-muted ); margin: 0 0 16px; }

/* =================================================================
 * V1.39: Last-Visit-Diff-Banner („Willkommen zurück! Während du weg warst…")
 * ================================================================= */
.np-sec-last-visit-diff {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 0 14px;
	padding: 14px 18px;
	background: linear-gradient( 135deg, rgba( 106, 90, 205, .22 ), rgba( 31, 111, 235, .12 ) 60%, var( --np-sec-card ) );
	border: 1px solid rgba( 106, 90, 205, .4 );
	border-radius: 12px;
	animation: np-sec-lvd-in .5s cubic-bezier( .2, .7, .2, 1 );
}
.np-sec-last-visit-diff.is-out {
	animation: np-sec-lvd-out .25s ease forwards;
}
@keyframes np-sec-lvd-in {
	0%   { opacity: 0; transform: translateY( -6px ); }
	100% { opacity: 1; transform: translateY( 0 ); }
}
@keyframes np-sec-lvd-out {
	0%   { opacity: 1; transform: translateY( 0 ); }
	100% { opacity: 0; transform: translateY( -8px ); }
}
.np-sec-lvd-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.np-sec-lvd-text { flex: 1; min-width: 0; }
.np-sec-lvd-text strong {
	display: block;
	font-size: 1rem;
	color: var( --np-sec-fg );
	margin-bottom: 6px;
}
.np-sec-lvd-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: .9rem;
	color: var( --np-sec-fg );
	opacity: .92;
}
.np-sec-lvd-list li { display: inline-flex; align-items: center; gap: 4px; }
.np-sec-lvd-list .is-gain { color: #22c55e; }
.np-sec-lvd-list .is-loss { color: #ef4444; }
.np-sec-lvd-close {
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	color: rgba( 255, 255, 255, .6 );
	width: 28px;
	height: 28px;
	border-radius: 8px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .15s, color .15s;
}
.np-sec-lvd-close:hover { background: rgba( 255, 255, 255, .14 ); color: #fff; }

/* =================================================================
 * V1.40 → V1.41: Atmosphäre — Dramatic Battlefield
 * Treibrauch (deutlich präsenter), Hot-Sektor-Glow, Capital-Embers,
 * + V1.41: Battle-Smoke aufsteigend aus Hot-Hexes, mehr Ember-Streams,
 *   Capital-Glow doppelt so intensiv, Schnellere Pulse-Cycles.
 * Pure CSS, prefers-reduced-motion respektiert.
 * ================================================================= */

/* Smoke-Overlay über der Karte. Drei Layer mit unterschiedlichen Speeds
 * für Tiefe. Keine Hex-Klicks blockieren. V1.41: opacity .55 → .85 */
.np-sec-stage-atmosphere {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 3; /* über SVG aber unter Tooltips */
	mix-blend-mode: screen;
	opacity: .85;
}
.np-sec-smoke {
	position: absolute;
	inset: -20% -20%;
	background-repeat: repeat;
	background-size: 800px 800px;
	background-image: radial-gradient(
		ellipse at center,
		rgba( 200, 100, 55, .22 ) 0%,
		rgba( 110, 65, 45, .14 ) 25%,
		rgba( 45, 30, 30, .08 ) 50%,
		transparent 70%
	);
	will-change: transform, opacity;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.np-sec-smoke-1 {
	animation: np-sec-smoke-drift-1 80s linear infinite;
	opacity: 1;
}
.np-sec-smoke-2 {
	animation: np-sec-smoke-drift-2 130s linear infinite;
	background-size: 1200px 1200px;
	background-image: radial-gradient(
		ellipse at center,
		rgba( 70, 45, 40, .22 ) 0%,
		rgba( 35, 25, 30, .12 ) 30%,
		transparent 60%
	);
	opacity: .85;
}
.np-sec-smoke-3 {
	animation: np-sec-smoke-drift-3 170s linear infinite;
	background-size: 1600px 1600px;
	background-image: radial-gradient(
		ellipse at center,
		rgba( 240, 110, 55, .16 ) 0%,
		rgba( 170, 75, 45, .08 ) 40%,
		transparent 70%
	);
	opacity: .7;
}
@keyframes np-sec-smoke-drift-1 {
	0%   { transform: translate( 0, 0 ); }
	100% { transform: translate( -800px, -400px ); }
}
@keyframes np-sec-smoke-drift-2 {
	0%   { transform: translate( 0, 0 ); }
	100% { transform: translate( 1200px, -600px ); }
}
@keyframes np-sec-smoke-drift-3 {
	0%   { transform: translate( 0, 0 ); }
	100% { transform: translate( -1600px, 300px ); }
}

/* Hot-Sektor — kürzlich umkämpft (letzte 7 Tage).
 * V1.41: Pulse schneller (3.4s → 2.2s), Glow-Intensität +60%. */
.np-sec-fmap-hex.is-hot polygon:first-of-type {
	filter: drop-shadow( 0 0 10px rgba( 251, 113, 36, .8 ) )
	        drop-shadow( 0 0 20px rgba( 220, 60, 30, .45 ) );
	animation: np-sec-hex-hot-pulse 2.2s ease-in-out infinite;
}
@keyframes np-sec-hex-hot-pulse {
	0%, 100% {
		filter: drop-shadow( 0 0 6px rgba( 251, 113, 36, .55 ) )
		        drop-shadow( 0 0 12px rgba( 220, 60, 30, .25 ) );
	}
	50% {
		filter: drop-shadow( 0 0 16px rgba( 251, 113, 36, .95 ) )
		        drop-shadow( 0 0 30px rgba( 220, 60, 30, .6 ) );
	}
}

/* V1.41: Battle-Smoke pro Hot-Hex — aufsteigender Rauch direkt aus dem Hex.
 * Pseudo-Element auf dem <g.np-sec-fmap-hex.is-hot>-Element.
 * SVG kennt kein ::after, daher legen wir das in den umgebenden Wrapper. */
.np-sec-fmap-hex.is-hot {
	position: relative;
}
.np-sec-fmap-hex.is-hot polygon:first-of-type {
	transform-origin: center;
}

/* Capital-Hex — Hauptwelten haben Glut-Effekt. V1.41: schon ohne is-hot
 * leuchten sie jetzt aktiv. Stroke goldener, Pulse auf Capital ohne is-hot. */
.np-sec-fmap-hex.is-capital-hex polygon:first-of-type {
	stroke: rgba( 251, 191, 36, .85 );
	stroke-width: 3.5;
	filter: drop-shadow( 0 0 6px rgba( 251, 191, 36, .45 ) );
	animation: np-sec-hex-capital-idle 4s ease-in-out infinite;
}
.np-sec-fmap-hex.is-capital-hex.is-hot polygon:first-of-type {
	animation: np-sec-hex-capital-pulse 1.6s ease-in-out infinite;
}
@keyframes np-sec-hex-capital-idle {
	0%, 100% {
		filter: drop-shadow( 0 0 5px rgba( 251, 191, 36, .35 ) );
	}
	50% {
		filter: drop-shadow( 0 0 11px rgba( 251, 191, 36, .65 ) )
		        drop-shadow( 0 0 18px rgba( 220, 130, 30, .3 ) );
	}
}
@keyframes np-sec-hex-capital-pulse {
	0%, 100% {
		filter: drop-shadow( 0 0 8px rgba( 251, 191, 36, .65 ) )
		        drop-shadow( 0 0 16px rgba( 220, 60, 30, .35 ) );
	}
	50% {
		filter: drop-shadow( 0 0 20px rgba( 251, 191, 36, .98 ) )
		        drop-shadow( 0 0 32px rgba( 251, 113, 36, .7 ) );
	}
}

/* V1.41: Ember-Streams — deutlich mehr Glutpunkte, verteilt über die ganze
 * Karte nicht nur am unteren Rand. Animation schneller (8s → 5s) und mit
 * leichter Horizontal-Drift damit's „glüht" und nicht nur bobbed. */
.np-sec-stage.has-atmosphere::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
	background-image:
		radial-gradient( circle at  8% 92%, rgba( 251, 113, 36, .5  ) 0, transparent 2.5px ),
		radial-gradient( circle at 18% 78%, rgba( 251, 191, 36, .4  ) 0, transparent 2px ),
		radial-gradient( circle at 28% 95%, rgba( 251, 191, 36, .45 ) 0, transparent 2.5px ),
		radial-gradient( circle at 38% 62%, rgba( 220, 60,  30, .35 ) 0, transparent 2px ),
		radial-gradient( circle at 46% 88%, rgba( 251, 113, 36, .5  ) 0, transparent 2.5px ),
		radial-gradient( circle at 54% 70%, rgba( 220, 60,  30, .4  ) 0, transparent 2.5px ),
		radial-gradient( circle at 62% 96%, rgba( 251, 191, 36, .45 ) 0, transparent 2.5px ),
		radial-gradient( circle at 70% 55%, rgba( 251, 113, 36, .35 ) 0, transparent 2px ),
		radial-gradient( circle at 78% 80%, rgba( 251, 191, 36, .4  ) 0, transparent 2.5px ),
		radial-gradient( circle at 84% 96%, rgba( 251, 113, 36, .5  ) 0, transparent 2.5px ),
		radial-gradient( circle at 92% 72%, rgba( 251, 191, 36, .4  ) 0, transparent 2.5px ),
		radial-gradient( circle at 96% 90%, rgba( 220, 60,  30, .45 ) 0, transparent 2.5px );
	animation: np-sec-embers 5s ease-in-out infinite;
	mix-blend-mode: screen;
	opacity: 1;
}
@keyframes np-sec-embers {
	0%   { transform: translate( 0, 0 ); opacity: .55; }
	33%  { transform: translate( 6px, -14px ); opacity: .9; }
	66%  { transform: translate( -4px, -28px ); opacity: .75; }
	100% { transform: translate( 0, -42px ); opacity: 0; }
}

/* V1.41: Zweite Ember-Layer (::after) — schnellere, kleinere Glutpunkte
 * versetzt animiert. Zusammen wirkt das wie ein lebendiges Funkenmeer. */
.np-sec-stage.has-atmosphere::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	background-image:
		radial-gradient( circle at 15% 85%, rgba( 255, 200, 100, .55 ) 0, transparent 1.5px ),
		radial-gradient( circle at 32% 75%, rgba( 255, 160, 80,  .5  ) 0, transparent 1.5px ),
		radial-gradient( circle at 48% 92%, rgba( 255, 220, 120, .6  ) 0, transparent 2px ),
		radial-gradient( circle at 66% 68%, rgba( 255, 180, 90,  .55 ) 0, transparent 1.5px ),
		radial-gradient( circle at 82% 85%, rgba( 255, 210, 110, .55 ) 0, transparent 1.5px );
	animation: np-sec-embers-fast 3s ease-in-out infinite;
	animation-delay: -1.4s;
	mix-blend-mode: screen;
	opacity: .8;
}
@keyframes np-sec-embers-fast {
	0%   { transform: translate( 0, 0 ); opacity: .35; }
	50%  { transform: translate( -8px, -22px ); opacity: .95; }
	100% { transform: translate( 0, -44px ); opacity: 0; }
}

/* Performance: Animationen auf low-spec / accessibility deaktivieren */
@media ( prefers-reduced-motion: reduce ) {
	.np-sec-smoke,
	.np-sec-fmap-hex.is-hot polygon:first-of-type,
	.np-sec-fmap-hex.is-capital-hex polygon:first-of-type,
	.np-sec-fmap-hex.is-capital-hex.is-hot polygon:first-of-type,
	.np-sec-stage.has-atmosphere::before,
	.np-sec-stage.has-atmosphere::after {
		animation: none;
	}
	.np-sec-fmap-hex.is-hot polygon:first-of-type {
		filter: drop-shadow( 0 0 4px rgba( 251, 113, 36, .35 ) );
	}
}

/* Mobile: Smoke etwas dezenter (Performance auf low-end). V1.41: bleibt
 * dramatisch, nur Smoke-3 + Embers-fast aus weil 12 Gradients teuer sind. */
@media ( max-width: 720px ) {
	.np-sec-stage-atmosphere { opacity: .65; }
	.np-sec-smoke-3 { display: none; }
	.np-sec-stage.has-atmosphere::after { display: none; }
}

/* =================================================================
 * V1.39: Faction-of-the-Week-Highlight (Card zwischen Lore und Karte)
 * Faction-Color als Akzent, Trophäe rechts, Eyebrow-Label klein.
 * ================================================================= */
.np-sec-faction-of-week {
	position: relative;
	margin: 0 0 14px;
	padding: 14px 18px;
	background: linear-gradient(
		90deg,
		color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 22%, var( --np-sec-card ) ) 0%,
		color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 6%,  var( --np-sec-card ) ) 100%
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 35%, var( --np-sec-border ) );
	border-left: 4px solid var( --np-sec-faction, #1f6feb );
	border-radius: 12px;
}
.np-sec-fow-eyebrow {
	display: block;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --np-sec-faction, #1f6feb );
	font-weight: 700;
	margin-bottom: 6px;
	filter: brightness( 1.3 );
}
.np-sec-fow-body {
	display: flex;
	align-items: center;
	gap: 14px;
}
.np-sec-fow-icon {
	font-size: 28px;
	line-height: 1;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 30%, transparent );
	border-radius: 12px;
	flex-shrink: 0;
}
.np-sec-fow-text {
	flex: 1;
	min-width: 0;
}
.np-sec-fow-text strong {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	color: var( --np-sec-fg );
	line-height: 1.2;
}
.np-sec-fow-text small {
	display: block;
	font-size: .82rem;
	color: var( --np-sec-muted );
	margin-top: 2px;
}
.np-sec-fow-medal {
	font-size: 22px;
	line-height: 1;
	filter: drop-shadow( 0 0 8px rgba( 251, 191, 36, .4 ) );
	animation: np-sec-fow-medal 2.6s ease-in-out infinite;
}
@keyframes np-sec-fow-medal {
	0%, 100% { transform: translateY( 0 ) rotate( -2deg ); }
	50%      { transform: translateY( -3px ) rotate( 4deg ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.np-sec-fow-medal { animation: none; }
}

/* =================================================================
 * V1.38: Full-Tab-Bar oben — alle Sektor-Erkunden-Items in einer
 * horizontal scrollbaren Reihe statt unten als Master-Nav-Footer.
 * Filter-Chips wandern UNTER die Legende (statt darüber).
 * ================================================================= */
.np-sec-app-bar-v2 .np-sec-app-bar-row-tabs {
	min-width: 0;
	max-width: 100%;
}
/* V1.38.4: Tabs jetzt auf zwei Reihen (oder mehr) wrappen statt horizontal scrollen.
 * Keine Scrollbar mehr, kein Mask-Fade — Tabs sind alle gleichzeitig sichtbar. */
.np-sec-view-toggle-full {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
	padding: 4px 0;
	row-gap: 8px;
}
.np-sec-view-toggle-full .np-sec-view-pill {
	flex-shrink: 0;
	white-space: nowrap;
	text-decoration: none;
}
.np-sec-app-actions-secondary {
	flex-shrink: 0;
}
.np-sec-filter-bar {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed rgba( 255, 255, 255, .08 );
}
.np-sec-filter-bar .np-sec-filter-chips,
.np-sec-filter-bar .np-sec-search-box {
	margin-bottom: 10px;
}

/* =================================================================
 * V1.37: Drawer (deprecated in V1.38, behalten für Backward-Compat
 * falls Theme noch Referenzen hat). Drawer-Code ist nicht mehr aktiv.
 * ================================================================= */
.np-sec-app-drawer {
	max-width: 1200px;
	margin: 0 auto;
	background: var( --np-sec-bg, #0d1117 );
	border: 1px solid var( --np-sec-border, #30363d );
	border-top: 1px dashed color-mix( in srgb, var( --np-sec-accent, #fbbf24 ) 40%, transparent );
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition:
		max-height .35s cubic-bezier( .34, 1, .64, 1 ),
		opacity .25s ease,
		padding .25s ease;
}
.np-sec-app-drawer.is-open {
	max-height: 4000px;
	opacity: 1;
	padding-bottom: 4px;
}
.np-sec-app-drawer.is-collapsing {
	max-height: 0;
	opacity: 0;
}
.np-sec-app-drawer.is-loading .np-sec-app-drawer-content {
	min-height: 200px;
	opacity: .5;
}
.np-sec-app-drawer-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
	background: linear-gradient( 90deg,
		color-mix( in srgb, var( --np-sec-accent, #1f6feb ) 12%, transparent ),
		transparent 60%
	);
	border-bottom: 1px solid var( --np-sec-border, #30363d );
}
.np-sec-app-drawer-title {
	flex: 1;
	font-size: 1.1rem;
	font-weight: 700;
	color: var( --np-sec-fg, #e6edf3 );
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.np-sec-app-drawer-icon {
	font-size: 1.3rem;
	line-height: 1;
}
.np-sec-app-drawer-close {
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	color: rgba( 255, 255, 255, .7 );
	width: 34px;
	height: 34px;
	border-radius: 10px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
	flex-shrink: 0;
}
.np-sec-app-drawer-close:hover {
	background: rgba( 255, 255, 255, .14 );
	color: #fff;
}
.np-sec-app-drawer-content {
	padding: 6px 0 0;
}
/* Embedded .np-sec-app inside drawer: kein doppelter Border/Padding,
 * weil's schon im Drawer-Container ist */
.np-sec-app-drawer-content .np-sec-app {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0 auto;
	padding: 16px 22px 22px;
	max-width: none;
	background: transparent;
}
.np-sec-app-drawer-error {
	padding: 30px 22px;
	text-align: center;
	color: var( --np-sec-muted, #8b949e );
}
.np-sec-app-drawer-error a {
	color: var( --np-sec-accent, #fbbf24 );
}
/* Plugin-Card unten kantig wenn Drawer angedockt ist */
.np-sec-app--has-drawer {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-bottom: 0;
}
.np-sec-app--has-drawer + .np-sec-app-drawer {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
/* Drawer Unterkante: kantig wenn Master-Nav direkt drunter ist */
.np-sec-app-drawer:has( + .np-sec-master-nav-docked ),
.np-sec-app-drawer.is-open + .np-sec-master-nav-docked {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

@media ( max-width: 720px ) {
	.np-sec-app-drawer-bar { padding: 12px 16px; }
	.np-sec-app-drawer-content .np-sec-app { padding: 12px 16px 16px; }
}

/* =================================================================
 * V1.36: SPA-Loading-State + Iframe-Modal für externe Links
 * Container-Replace beim Tab-Switch, Fade-In, Iframe-Embed für Buchung
 * ================================================================= */
.np-sec-app {
	transition: opacity .25s ease;
}
.np-sec-spa-loading {
	opacity: .5;
	pointer-events: none;
	position: relative;
	min-height: 200px;
}
.np-sec-spa-loading::after {
	content: '⏳';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	font-size: 48px;
	animation: np-sec-spa-spin 1.2s ease-in-out infinite;
	z-index: 10;
}
@keyframes np-sec-spa-spin {
	0%, 100% { transform: translate( -50%, -50% ) rotate( 0deg ); opacity: .7; }
	50%      { transform: translate( -50%, -50% ) rotate( 12deg ); opacity: 1; }
}
.np-sec-spa-fade-in {
	animation: np-sec-spa-fade .4s ease both;
}
@keyframes np-sec-spa-fade {
	0%   { opacity: 0; transform: translateY( 6px ); }
	100% { opacity: 1; transform: translateY( 0 ); }
}
/* Active-Tab-Highlight für Sticky-Nav-Items */
[data-np-sec-spa-link].is-active {
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-accent, #1f6feb ) 30%, transparent ),
		color-mix( in srgb, var( --np-sec-accent, #1f6feb ) 10%, transparent )
	);
	border-color: color-mix( in srgb, var( --np-sec-accent, #1f6feb ) 55%, transparent );
	color: #fff;
	box-shadow: 0 0 0 1px color-mix( in srgb, var( --np-sec-accent, #1f6feb ) 40%, transparent ) inset;
}

/* Iframe-Modal (Buchung etc.) */
.np-sec-spa-iframe-modal {
	position: fixed;
	inset: 0;
	background: rgba( 5, 8, 14, .85 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	z-index: 99997;
	display: flex;
	flex-direction: column;
	padding: 20px;
	opacity: 0;
	transition: opacity .25s ease;
}
.np-sec-spa-iframe-modal.is-in { opacity: 1; }
.np-sec-spa-iframe-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: linear-gradient( 135deg, #131d2e, #1f2a3f );
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-radius: 14px 14px 0 0;
	border-bottom: 0;
}
.np-sec-spa-iframe-bar strong {
	flex: 1;
	color: #fff;
	font-size: 1.05rem;
}
.np-sec-spa-iframe-extlink {
	color: rgba( 255, 255, 255, .7 );
	text-decoration: none;
	font-size: .85rem;
	padding: 5px 10px;
	border-radius: 8px;
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	transition: background .15s, color .15s;
}
.np-sec-spa-iframe-extlink:hover {
	background: rgba( 255, 255, 255, .1 );
	color: #fff;
}
.np-sec-spa-iframe-close {
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	color: rgba( 255, 255, 255, .7 );
	width: 34px;
	height: 34px;
	border-radius: 8px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.np-sec-spa-iframe-close:hover {
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
}
.np-sec-spa-iframe {
	flex: 1;
	width: 100%;
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-top: 0;
	border-radius: 0 0 14px 14px;
	background: #fff;
	min-height: 0;
}
@media ( max-width: 480px ) {
	.np-sec-spa-iframe-modal { padding: 0; }
	.np-sec-spa-iframe-bar,
	.np-sec-spa-iframe { border-radius: 0; }
	.np-sec-spa-iframe-extlink span { display: none; }
}

/* =================================================================
 * V1.34: Player-Modal (Click-Through Quick-View)
 * Faction-Color als linker Border (wie Faction-Tiles), Avatar mit
 * Honor-Glow, Pills für Honor/Rank/Wins, Letzte Battles, CTA.
 * ================================================================= */
.np-sec-pmodal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 5, 8, 14, .78 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .25s ease;
}
.np-sec-pmodal-backdrop.is-in { opacity: 1; }
.np-sec-pmodal {
	position: relative;
	background: linear-gradient( 135deg, #131d2e, #0e1521 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-left: 5px solid var( --np-sec-faction, #1f6feb );
	border-radius: 16px;
	padding: 28px 24px 20px;
	max-width: 480px;
	width: 100%;
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
	color: #fff;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, .7 ),
	            0 0 0 1px rgba( 255, 255, 255, .03 ),
	            inset 0 1px 0 rgba( 255, 255, 255, .04 );
	transform: scale( .92 ) translateY( 10px );
	opacity: 0;
	transition:
		transform .35s cubic-bezier( .34, 1.56, .64, 1 ),
		opacity .25s ease;
}
.np-sec-pmodal-backdrop.is-in .np-sec-pmodal {
	transform: scale( 1 ) translateY( 0 );
	opacity: 1;
}
/* Faction-Tinted Glow im Hintergrund */
.np-sec-pmodal::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 140px;
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 22%, transparent ),
		transparent 60%
	);
	border-radius: 16px 16px 0 0;
	pointer-events: none;
	z-index: 0;
}
.np-sec-pmodal > * { position: relative; z-index: 1; }
.np-sec-pmodal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	color: rgba( 255, 255, 255, .7 );
	border-radius: 10px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
	z-index: 2;
}
.np-sec-pmodal-close:hover {
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
}
.np-sec-pmodal-head {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 18px;
}
.np-sec-pmodal-avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 25%, #1a2535 );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	flex-shrink: 0;
	overflow: hidden;
}
.np-sec-pmodal-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.np-sec-pmodal-head-meta { flex: 1; min-width: 0; }
.np-sec-pmodal-faction-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 25%, transparent );
	border: 1px solid color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 50%, transparent );
	color: #fff;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: 6px;
}
.np-sec-pmodal-name {
	margin: 0 0 4px;
	font-size: 1.5rem;
	line-height: 1.2;
	color: #fff;
	font-weight: 700;
}
.np-sec-pmodal-rank {
	font-size: 13px;
	color: rgba( 255, 255, 255, .65 );
	margin: 0;
}
.np-sec-pmodal-stats {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 8px;
	margin-bottom: 18px;
}
.np-sec-pmodal-stat {
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .06 );
	border-radius: 10px;
	padding: 10px 8px;
	text-align: center;
}
.np-sec-pmodal-stat-value {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
}
.np-sec-pmodal-stat-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: rgba( 255, 255, 255, .55 );
	margin-top: 3px;
}
.np-sec-pmodal-stat.is-honor {
	background: linear-gradient( 135deg, rgba( 251, 191, 36, .14 ), rgba( 251, 191, 36, .04 ) );
	border-color: rgba( 251, 191, 36, .35 );
}
.np-sec-pmodal-stat.is-honor .np-sec-pmodal-stat-value {
	color: #fbbf24;
}
.np-sec-pmodal-stat.is-streak .np-sec-pmodal-stat-value {
	color: #f97316;
}
.np-sec-pmodal-section {
	margin-bottom: 16px;
}
.np-sec-pmodal-section-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba( 255, 255, 255, .55 );
	margin: 0 0 8px;
	font-weight: 600;
}
.np-sec-pmodal-bio {
	font-size: 14px;
	color: rgba( 255, 255, 255, .82 );
	line-height: 1.5;
	margin: 0;
	font-style: italic;
}
.np-sec-pmodal-battles {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-sec-pmodal-battle {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: rgba( 255, 255, 255, .03 );
	border-radius: 8px;
	border-left: 3px solid var( --np-sec-faction, #1f6feb );
	font-size: 13px;
}
.np-sec-pmodal-battle.is-loss {
	border-left-color: #ef4444;
	opacity: .85;
}
.np-sec-pmodal-battle.is-win {
	border-left-color: #22c55e;
}
.np-sec-pmodal-battle-result {
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.np-sec-pmodal-battle.is-win  .np-sec-pmodal-battle-result { color: #22c55e; }
.np-sec-pmodal-battle.is-loss .np-sec-pmodal-battle-result { color: #ef4444; }
.np-sec-pmodal-battle-opp {
	flex: 1;
	color: rgba( 255, 255, 255, .85 );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.np-sec-pmodal-battle-score {
	color: rgba( 255, 255, 255, .65 );
	font-variant-numeric: tabular-nums;
	font-size: 12px;
}
.np-sec-pmodal-cta {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba( 255, 255, 255, .06 );
}
.np-sec-pmodal-cta a,
.np-sec-pmodal-cta button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid rgba( 255, 255, 255, .12 );
	background: rgba( 255, 255, 255, .04 );
	color: #fff;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.np-sec-pmodal-cta a:hover,
.np-sec-pmodal-cta button:hover {
	background: color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 20%, rgba( 255, 255, 255, .04 ) );
	border-color: var( --np-sec-faction, #1f6feb );
}
.np-sec-pmodal-loading,
.np-sec-pmodal-error {
	text-align: center;
	padding: 40px 20px;
	color: rgba( 255, 255, 255, .65 );
	font-size: 14px;
}

/* Klickbar-Markierung auf bestehenden Player-Slots */
.np-sec-hof-row.is-clickable,
.np-sec-battle-side.is-clickable {
	cursor: pointer;
	transition: background .15s, transform .12s;
}
.np-sec-hof-row.is-clickable:hover {
	background: rgba( 255, 255, 255, .04 );
	transform: translateX( 2px );
}
.np-sec-battle-side.is-clickable:hover {
	background: rgba( 255, 255, 255, .03 );
	border-radius: 8px;
}
.np-sec-hof-row.is-clickable:focus-visible,
.np-sec-battle-side.is-clickable:focus-visible {
	outline: 2px solid var( --np-sec-accent, #1f6feb );
	outline-offset: 2px;
	border-radius: 8px;
}

@media ( max-width: 480px ) {
	.np-sec-pmodal-backdrop { padding: 10px; }
	.np-sec-pmodal { padding: 22px 18px 16px; }
	.np-sec-pmodal-stats { grid-template-columns: repeat( 2, 1fr ); }
	.np-sec-pmodal-avatar { width: 68px; height: 68px; font-size: 26px; }
	.np-sec-pmodal-name { font-size: 1.25rem; }
}

/* =================================================================
 * V1.33: Toast-System (bottom-right) + Avatar-Glow
 * Honor-Vergabe, Liga-Confirm-Korrektur, andere Notifications
 * ================================================================= */
.np-sec-toast-stack {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	pointer-events: none;
	max-width: 380px;
	width: calc( 100vw - 40px );
}
.np-sec-toast {
	pointer-events: auto;
	background: linear-gradient( 135deg, #131d2e, #1f2a3f );
	border: 1px solid rgba( 255, 255, 255, .12 );
	border-radius: 14px;
	padding: 14px 16px 14px 14px;
	box-shadow: 0 10px 32px rgba( 0, 0, 0, .55 ), 0 0 0 1px rgba( 255, 255, 255, .03 );
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: #fff;
	transform: translateX( 120% );
	opacity: 0;
	transition:
		transform .35s cubic-bezier( .34, 1.56, .64, 1 ),
		opacity .25s ease;
	will-change: transform, opacity;
}
.np-sec-toast.is-in {
	transform: translateX( 0 );
	opacity: 1;
}
.np-sec-toast.is-out {
	transform: translateX( 120% );
	opacity: 0;
}
.np-sec-toast--honor {
	border-color: rgba( 251, 191, 36, .55 );
	box-shadow: 0 10px 32px rgba( 251, 191, 36, .2 ), 0 0 0 1px rgba( 251, 191, 36, .15 ) inset;
	background: linear-gradient( 135deg, #1f1a0d, #2a2113 );
}
.np-sec-toast--honor-loss {
	border-color: rgba( 239, 68, 68, .45 );
	background: linear-gradient( 135deg, #1f1212, #2a1818 );
}
.np-sec-toast--battle-win {
	border-color: rgba( 34, 197, 94, .55 );
	box-shadow: 0 10px 32px rgba( 34, 197, 94, .2 );
	background: linear-gradient( 135deg, #0e1d14, #14291c );
}
.np-sec-toast--battle-loss {
	border-color: rgba( 100, 116, 139, .55 );
	background: linear-gradient( 135deg, #131c2a, #1c2638 );
}
/* V1.39: Achievement-Pop — größer, golden, mit Glow & subtle Particle-Sparkle */
.np-sec-toast--achievement {
	border-color: rgba( 251, 191, 36, .7 );
	background: linear-gradient( 135deg, #2a1f0d, #3a2b13 );
	box-shadow:
		0 12px 36px rgba( 251, 191, 36, .35 ),
		0 0 0 1px rgba( 251, 191, 36, .25 ) inset,
		0 0 24px rgba( 251, 191, 36, .15 );
	animation: np-sec-toast-ach-glow 2.4s ease-in-out infinite;
}
.np-sec-toast--achievement .np-sec-toast-icon {
	background: rgba( 251, 191, 36, .25 );
	filter: drop-shadow( 0 0 8px rgba( 251, 191, 36, .7 ) );
	font-size: 32px;
	width: 48px;
	height: 48px;
}
.np-sec-toast--achievement .np-sec-toast-body strong {
	font-size: 15px;
	color: #fbbf24;
	letter-spacing: .02em;
}
.np-sec-toast--achievement .np-sec-toast-body small {
	color: rgba( 255, 255, 255, .85 );
	font-size: 12.5px;
}
@keyframes np-sec-toast-ach-glow {
	0%, 100% { box-shadow: 0 12px 36px rgba( 251, 191, 36, .3 ), 0 0 0 1px rgba( 251, 191, 36, .2 ) inset, 0 0 20px rgba( 251, 191, 36, .12 ); }
	50%      { box-shadow: 0 12px 40px rgba( 251, 191, 36, .55 ), 0 0 0 1px rgba( 251, 191, 36, .35 ) inset, 0 0 32px rgba( 251, 191, 36, .25 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.np-sec-toast--achievement { animation: none; }
}
.np-sec-toast-icon {
	font-size: 24px;
	line-height: 1;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, .06 );
	border-radius: 10px;
}
.np-sec-toast--honor .np-sec-toast-icon {
	background: rgba( 251, 191, 36, .15 );
	filter: drop-shadow( 0 0 4px rgba( 251, 191, 36, .5 ) );
}
.np-sec-toast--battle-win .np-sec-toast-icon {
	background: rgba( 34, 197, 94, .15 );
}
.np-sec-toast-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 14px;
}
.np-sec-toast-body strong {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
}
.np-sec-toast-body small {
	color: rgba( 255, 255, 255, .72 );
	font-size: 12px;
	line-height: 1.4;
	word-wrap: break-word;
}
.np-sec-toast-close {
	background: none;
	border: none;
	color: rgba( 255, 255, 255, .45 );
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	padding: 0 4px;
	margin: -2px -4px 0 0;
	border-radius: 6px;
	transition: color .15s, background .15s;
	flex-shrink: 0;
}
.np-sec-toast-close:hover {
	color: #fff;
	background: rgba( 255, 255, 255, .08 );
}

/* Avatar-Glow basierend auf Honor-Tier
 * Tiers: bronze (≥5), silver (≥15), gold (≥30), legendary (≥50)
 * Anwendbar auf <img>, <span>, <a> mit class="np-sec-avatar" */
.np-sec-avatar {
	display: inline-block;
	border-radius: 50%;
	transition: box-shadow .3s ease, transform .2s ease;
}
.np-sec-avatar[data-honor-tier="bronze"] {
	box-shadow: 0 0 0 2px #cd7f32, 0 0 10px rgba( 205, 127, 50, .35 );
}
.np-sec-avatar[data-honor-tier="silver"] {
	box-shadow: 0 0 0 2px #c0c0c0, 0 0 12px rgba( 192, 192, 192, .5 );
}
.np-sec-avatar[data-honor-tier="gold"] {
	box-shadow: 0 0 0 3px #fbbf24, 0 0 16px rgba( 251, 191, 36, .55 );
	animation: np-sec-honor-pulse 2.8s ease-in-out infinite;
}
.np-sec-avatar[data-honor-tier="legendary"] {
	box-shadow: 0 0 0 3px #fbbf24, 0 0 18px rgba( 251, 191, 36, .85 ), 0 0 36px rgba( 251, 191, 36, .35 );
	animation: np-sec-honor-pulse-legendary 1.8s ease-in-out infinite;
}
@keyframes np-sec-honor-pulse {
	0%, 100% { box-shadow: 0 0 0 3px #fbbf24, 0 0 14px rgba( 251, 191, 36, .4 ); }
	50%      { box-shadow: 0 0 0 3px #fbbf24, 0 0 22px rgba( 251, 191, 36, .8 ); }
}
@keyframes np-sec-honor-pulse-legendary {
	0%, 100% {
		box-shadow: 0 0 0 3px #fbbf24, 0 0 18px rgba( 251, 191, 36, .7 ), 0 0 36px rgba( 251, 191, 36, .3 );
		filter: hue-rotate( 0deg );
	}
	50%      {
		box-shadow: 0 0 0 3px #fde047, 0 0 26px rgba( 251, 191, 36, 1 ), 0 0 52px rgba( 251, 191, 36, .55 );
		filter: hue-rotate( 12deg );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.np-sec-avatar[data-honor-tier] { animation: none; }
	.np-sec-toast { transition: opacity .25s ease; }
}
@media ( max-width: 480px ) {
	.np-sec-toast-stack {
		left: 10px;
		right: 10px;
		bottom: 10px;
		max-width: unset;
		width: auto;
	}
}

/* =================================================================
 * V1.32.3: Success-Banner über Cluster-Map auf Record-Success-Seite
 * Dezenter Streifen mit Gradient, fade-in, kein Block-Layout-Bruch
 * ================================================================= */
.np-sec-record-success-banner {
	background: linear-gradient( 135deg,
		color-mix( in srgb, var( --np-sec-success ) 28%, var( --np-sec-card ) ),
		color-mix( in srgb, var( --np-sec-success ) 8%,  var( --np-sec-card ) )
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-success ) 35%, var( --np-sec-border ) );
	border-radius: var( --np-sec-radius );
	padding: 20px 24px;
	margin: 0 0 20px;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, .2 );
	animation: np-sec-success-banner-in .5s ease both;
}
.np-sec-record-success-banner-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.np-sec-record-success-banner h2 {
	margin: 0 0 6px;
	font-size: 1.4rem;
	color: var( --np-sec-fg );
}
.np-sec-record-success-banner p {
	margin: 0 0 6px;
	color: var( --np-sec-fg );
	opacity: .92;
	font-size: .95rem;
}
.np-sec-record-success-banner-hint {
	font-size: .8rem !important;
	opacity: .7 !important;
}
@keyframes np-sec-success-banner-in {
	0%   { opacity: 0; transform: translateY( -8px ); }
	100% { opacity: 1; transform: translateY( 0 ); }
}

@media ( max-width: 720px ) {
	.np-sec-record-fieldset:has( .np-sec-record-side ) {
		grid-template-columns: 1fr;
	}
	.np-sec-record-vs {
		justify-content: center;
		margin: -4px 0;
	}
}

/* =================================================================
 * Mobile (< 720px)
 *
 * V1.28.1: Full-bleed-Trick (`margin-left/right: calc(50% - 50vw)`) sorgt
 * dafür dass der Plugin-Container aus engen Theme-Wrappern ausbricht
 * (z.B. `.entry-content { max-width: 720px }`). Auf Mobile wird so die
 * volle Viewport-Breite genutzt, egal wie das Theme den Content limitiert.
 * ================================================================= */
@media ( max-width: 720px ) {
	.np-sec-app {
		padding: 14px 14px 18px;
		/* Full-bleed gegen Theme-Container */
		margin-left: calc( 50% - 50vw );
		margin-right: calc( 50% - 50vw );
		margin-top: 12px;
		margin-bottom: 12px;
		width: 100vw;
		max-width: 100vw;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		box-sizing: border-box;
	}
	.np-sec-app-bar {
		gap: 10px;
	}
	.np-sec-view-toggle {
		width: 100%;
		margin-left: 0;
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	.np-sec-view-pill {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 8px 14px;
	}
	.np-sec-filter-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}
	.np-sec-chip { flex: 0 0 auto; white-space: nowrap; min-height: 36px; padding: 8px 14px; }
	.np-sec-app { --np-sec-stage-height: 460px; }
	.np-sec-app-title { font-size: 1.2rem; }
	.np-sec-map-controls button { width: 32px; height: 32px; font-size: 16px; }
}

/* =================================================================
 * V1.24: Aktuelle-Fraktion-Badge im App-Bar + Quiz-CTA im Picker
 * ================================================================= */
.np-sec-current-faction-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 8px;
	background: linear-gradient( 135deg, var( --np-sec-faction, #888 ) 0%, color-mix( in srgb, var( --np-sec-faction, #888 ) 70%, #000 ) 100% );
	border: 1px solid rgba( 255, 255, 255, .18 );
	border-radius: 999px;
	color: #fff !important;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .35 );
}
.np-sec-current-faction-badge:hover {
	transform: translateY( -1px );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .5 );
}
.np-sec-current-faction-icon {
	font-size: 22px;
	line-height: 1;
	background: rgba( 0, 0, 0, .25 );
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.np-sec-current-faction-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.np-sec-current-faction-text small {
	font-size: 10px;
	opacity: .8;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.np-sec-current-faction-text strong {
	font-size: .92rem;
	font-weight: 700;
}
.np-sec-current-faction-badge-empty {
	background: rgba( 255, 255, 255, .08 );
	border-style: dashed;
}
.np-sec-current-faction-badge-empty .np-sec-current-faction-icon {
	background: rgba( 253, 224, 71, .25 );
	color: var( --np-sec-accent, #fde047 );
}

/* Quiz-CTA-Banner über dem Picker */
.np-sec-picker-head h3 { margin: 0 0 6px; }
.np-sec-picker-head p  { margin: 0 0 16px; color: var( --np-sec-muted ); }
.np-sec-quiz-cta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	margin-bottom: 20px;
	background: linear-gradient( 90deg, rgba( 253, 224, 71, .12 ) 0%, rgba( 253, 224, 71, .04 ) 100% );
	border: 1px solid rgba( 253, 224, 71, .35 );
	border-radius: 12px;
	color: var( --np-sec-text, #e2e8f0 );
}
.np-sec-quiz-cta-icon {
	font-size: 32px;
	line-height: 1;
	flex: 0 0 auto;
}
.np-sec-quiz-cta-body {
	flex: 1 1 auto;
	min-width: 0;
}
.np-sec-quiz-cta-body strong {
	display: block;
	font-size: 1rem;
	margin-bottom: 2px;
}
.np-sec-quiz-cta-body small {
	color: var( --np-sec-muted, rgba( 255, 255, 255, .65 ) );
	font-size: .85rem;
}
.np-sec-quiz-cta-btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 10px 18px;
	background: var( --np-sec-accent, #fde047 );
	color: #1b2434 !important;
	border-radius: 8px;
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none !important;
	transition: transform .12s ease, box-shadow .12s ease;
	white-space: nowrap;
}
.np-sec-quiz-cta-btn:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 14px rgba( 253, 224, 71, .4 );
}

@media ( max-width: 720px ) {
	.np-sec-current-faction-badge {
		padding: 4px 10px 4px 6px;
		gap: 8px;
	}
	.np-sec-current-faction-icon { width: 26px; height: 26px; font-size: 18px; }
	.np-sec-current-faction-text small { font-size: 9px; }
	.np-sec-current-faction-text strong { font-size: .82rem; }
	.np-sec-quiz-cta {
		flex-direction: column;
		text-align: center;
		padding: 14px;
	}
	.np-sec-quiz-cta-btn { width: 100%; }
}

/* =================================================================
 * V1.27: Multi-Player-Battle-Body (2v2 Teams + FFA-Ranking)
 * ================================================================= */
.np-sec-battle-body.is-multi {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 8px 0;
}
.np-sec-battle-body.is-multi.is-team-battle {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 14px;
	align-items: stretch;
}
.np-sec-battle-team {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	background: rgba( 255, 255, 255, .03 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 10px;
	transition: border-color .15s ease;
}
.np-sec-battle-team.is-winner {
	border-color: rgba( 253, 224, 71, .55 );
	background: linear-gradient( 135deg, rgba( 253, 224, 71, .1 ), rgba( 253, 224, 71, .02 ) );
}
.np-sec-team-label {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --np-sec-muted, rgba( 255, 255, 255, .6 ) );
	font-weight: 700;
	margin-bottom: 4px;
}
.np-sec-battle-team.is-winner .np-sec-team-label {
	color: #fde047;
}
.np-sec-battle-vs--multi {
	display: flex;
	align-items: center;
	justify-content: center;
}
.np-sec-multi-label {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --np-sec-muted, rgba( 255, 255, 255, .55 ) );
	font-weight: 700;
}
.np-sec-ffa-ranking {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-sec-ffa-rank {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: rgba( 255, 255, 255, .03 );
	border: 1px solid rgba( 255, 255, 255, .07 );
	border-radius: 8px;
}
.np-sec-ffa-rank.is-winner {
	border-color: rgba( 253, 224, 71, .5 );
	background: linear-gradient( 90deg, rgba( 253, 224, 71, .08 ), rgba( 253, 224, 71, .02 ) );
}
.np-sec-ffa-icon {
	font-size: 18px;
	font-weight: 700;
	min-width: 28px;
	text-align: center;
}
.np-sec-participant {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	background: linear-gradient( 135deg, var( --np-sec-faction, #888 ) 0%, color-mix( in srgb, var( --np-sec-faction, #888 ) 60%, #000 ) 100% );
	border-radius: 999px;
	color: #fff;
	font-size: .88rem;
}
.np-sec-participant-icon {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, .25 );
	border-radius: 50%;
	font-size: 14px;
}
.np-sec-participant-name {
	font-weight: 600;
}
.np-sec-participant-faction {
	font-size: .72rem;
	opacity: .8;
	margin-left: 4px;
}

@media ( max-width: 720px ) {
	.np-sec-battle-body.is-multi.is-team-battle {
		grid-template-columns: 1fr;
	}
	.np-sec-battle-vs--multi { display: none; }
}

/* =================================================================
 * V1.25: Anstehende Schlachten — Schwert-Pulse auf Karte + Modal-Block
 * ================================================================= */
.np-sec-fmap-hex.is-upcoming-battle polygon:not(.np-sec-fmap-heat) {
	stroke: #ef4444 !important;
	stroke-width: 3 !important;
	filter: drop-shadow( 0 0 8px rgba( 239, 68, 68, .6 ) );
}
.np-sec-fmap-upcoming {
	animation: np-sec-upcoming-pulse 1.4s ease-in-out infinite;
	transform-origin: center;
}
.np-sec-fmap-upcoming circle {
	filter: drop-shadow( 0 0 6px rgba( 239, 68, 68, .8 ) );
}
@keyframes np-sec-upcoming-pulse {
	0%, 100% { transform: translate( var( --np-sec-up-x, 0px ), var( --np-sec-up-y, 0px ) ) scale( 1 ); }
	50%      { transform: translate( var( --np-sec-up-x, 0px ), var( --np-sec-up-y, 0px ) ) scale( 1.18 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.np-sec-fmap-upcoming { animation: none; }
}

/* Sektor-Klick-Modal: Upcoming-Battle-Block */
.np-sec-sector-modal-upcoming {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: linear-gradient( 135deg, rgba( 239, 68, 68, .12 ), rgba( 239, 68, 68, .04 ) );
	border: 1px solid rgba( 239, 68, 68, .35 );
	border-left: 3px solid #ef4444;
	border-radius: 8px;
}
.np-sec-sector-modal-upcoming:empty { display: none; }
.np-sec-sector-modal-upcoming-head {
	font-size: .82rem;
	font-weight: 700;
	color: #ef4444;
	margin-bottom: 8px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.np-sec-upcoming-battle {
	padding: 8px 0;
	border-top: 1px solid rgba( 255, 255, 255, .06 );
}
.np-sec-upcoming-battle:first-of-type { border-top: 0; padding-top: 0; }
.np-sec-upcoming-when {
	font-size: .85rem;
	color: rgba( 255, 255, 255, .75 );
	margin-bottom: 4px;
}
.np-sec-upcoming-fight {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: .92rem;
	flex-wrap: wrap;
}
.np-sec-upcoming-vs {
	padding: 2px 8px;
	background: rgba( 255, 255, 255, .08 );
	border-radius: 4px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	color: rgba( 255, 255, 255, .65 );
}
.np-sec-battle-status {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
}
.np-sec-battle-status.is-confirmed {
	background: rgba( 57, 211, 83, .2 );
	color: #4ade80;
}
.np-sec-battle-status.is-open {
	background: rgba( 253, 224, 71, .15 );
	color: #fde047;
}
.np-sec-upcoming-cta {
	display: block;
	margin-top: 12px;
	padding: 11px 16px;
	background: linear-gradient( 135deg, #ef4444, #dc2626 );
	color: #fff !important;
	text-align: center;
	border-radius: 8px;
	font-size: .92rem;
	font-weight: 700;
	text-decoration: none !important;
	transition: transform .12s ease, box-shadow .12s ease;
}
.np-sec-upcoming-cta:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 18px rgba( 239, 68, 68, .5 );
}

/* =================================================================
 * V1.22: Sektor-Klick-Modal („Was tun?")
 * ================================================================= */
.np-sec-sector-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.np-sec-sector-modal.is-open {
	display: flex;
	animation: np-sec-modal-fade .15s ease-out;
}
@keyframes np-sec-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.np-sec-sector-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 10, 14, 21, .82 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
}
.np-sec-sector-modal-card {
	position: relative;
	z-index: 1;
	max-width: 540px;
	width: 100%;
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
	background: var( --np-sec-card, #15192a );
	border: 1px solid var( --np-sec-border, rgba( 255, 255, 255, .12 ) );
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, .6 );
	padding: 24px 24px 18px;
	color: var( --np-sec-text, #e2e8f0 );
	animation: np-sec-modal-slide .2s ease-out;
}
@keyframes np-sec-modal-slide {
	from { transform: translateY( 12px ); opacity: 0; }
	to   { transform: translateY( 0 );    opacity: 1; }
}
.np-sec-sector-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 30px;
	height: 30px;
	border: 0;
	background: rgba( 255, 255, 255, .08 );
	color: #fff;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	transition: background .15s ease;
}
.np-sec-sector-modal-close:hover {
	background: rgba( 239, 68, 68, .6 );
}
.np-sec-sector-modal-head {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 14px;
	padding-right: 30px;
}
.np-sec-sector-modal-owner-dot {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin-top: 6px;
	border-radius: 50%;
	border: 2px solid rgba( 255, 255, 255, .25 );
	background: transparent;
}
.np-sec-sector-modal-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --np-sec-accent, #fde047 );
	margin-bottom: 2px;
}
.np-sec-sector-modal-title {
	margin: 0 0 2px;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.2;
}
.np-sec-sector-modal-owner {
	display: block;
	color: var( --np-sec-muted, rgba( 255, 255, 255, .65 ) );
	font-size: .85rem;
}
.np-sec-sector-modal-lore {
	margin: 0 0 18px;
	padding: 10px 12px;
	background: rgba( 255, 255, 255, .03 );
	border-left: 3px solid var( --np-sec-accent, #fde047 );
	border-radius: 4px;
	font-size: .92rem;
	font-style: italic;
	color: var( --np-sec-muted, rgba( 255, 255, 255, .8 ) );
	line-height: 1.5;
}
.np-sec-sector-modal-lore:empty { display: none; }

.np-sec-sector-modal-steps {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}
.np-sec-sector-modal-step {
	display: flex;
	gap: 12px;
	padding: 12px;
	background: rgba( 255, 255, 255, .035 );
	border: 1px solid rgba( 255, 255, 255, .06 );
	border-radius: 10px;
	transition: border-color .15s ease;
}
.np-sec-sector-modal-step:hover {
	border-color: var( --np-sec-accent, #fde047 );
}
.np-sec-sector-modal-step-num {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.np-sec-sector-modal-step-num span {
	font-size: 22px;
	line-height: 1;
}
.np-sec-sector-modal-step-num small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var( --np-sec-accent, #fde047 );
	color: #1b2434;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 800;
}
.np-sec-sector-modal-step-body {
	flex: 1 1 auto;
	min-width: 0;
}
.np-sec-sector-modal-step-body strong {
	display: block;
	font-size: .98rem;
	margin-bottom: 2px;
}
.np-sec-sector-modal-step-body p {
	margin: 0 0 8px;
	color: var( --np-sec-muted, rgba( 255, 255, 255, .7 ) );
	font-size: .87rem;
	line-height: 1.45;
}
.np-sec-sector-modal-step-btn {
	display: inline-block;
	padding: 7px 14px;
	background: var( --np-sec-accent, #fde047 );
	color: #1b2434 !important;
	border-radius: 6px;
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none !important;
	transition: transform .12s ease, box-shadow .12s ease;
}
.np-sec-sector-modal-step-btn:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 14px rgba( 253, 224, 71, .35 );
}
.np-sec-sector-modal-footer {
	padding-top: 12px;
	border-top: 1px solid rgba( 255, 255, 255, .06 );
	color: var( --np-sec-muted, rgba( 255, 255, 255, .6 ) );
	font-size: .82rem;
	line-height: 1.5;
}

@media ( max-width: 540px ) {
	.np-sec-sector-modal-card {
		padding: 18px 16px 14px;
		max-height: calc( 100vh - 20px );
	}
	.np-sec-sector-modal-title { font-size: 1.2rem; }
	.np-sec-sector-modal-step { padding: 10px; }
}

/* =================================================================
 * V1.21: [sectorum_anleitung] — Anleitungs-Landing-Section
 * ================================================================= */
.np-sec-anleitung {
	padding: 32px 28px;
}
.np-sec-anleitung-eyebrow {
	display: inline-block;
	padding: 4px 12px;
	background: var( --np-sec-accent-soft, rgba( 253, 224, 71, .15 ) );
	color: var( --np-sec-accent, #fde047 );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 999px;
	margin-bottom: 12px;
}
.np-sec-anleitung-title {
	font-size: clamp( 1.6rem, 3vw, 2.4rem );
	font-weight: 800;
	margin: 0 0 12px;
	line-height: 1.2;
}
.np-sec-anleitung-title span {
	color: var( --np-sec-accent, #fde047 );
}
/* V1.55.1: Active-Campaign-Subtitle im Hero */
.np-sec-anleitung-active-campaign {
	display: inline-block;
	padding: 8px 16px;
	margin: 0 0 20px;
	background: color-mix( in srgb, var( --np-sec-accent, #fde047 ) 12%, rgba( 0, 0, 0, .35 ) );
	border: 1px solid color-mix( in srgb, var( --np-sec-accent, #fde047 ) 40%, transparent );
	border-radius: 999px;
	color: var( --np-sec-muted, rgba( 255, 255, 255, .85 ) );
	font-size: 14px;
	font-weight: 500;
}
.np-sec-anleitung-active-campaign strong {
	color: var( --np-sec-accent, #fde047 );
	font-weight: 700;
	margin-right: 2px;
}
.np-sec-anleitung-active-campaign a {
	color: var( --np-sec-accent, #fde047 );
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px dashed currentColor;
	margin-left: 4px;
}
.np-sec-anleitung-active-campaign a:hover {
	color: #fff;
	border-bottom-style: solid;
}

/* =================================================================
 * V1.57.0 — Battle of the Week (Voting + Winner-Cinematic)
 *
 * 3 Render-Zustände im Shortcode [sectorum_battle_of_week]:
 *   1. Voting-Liste (Mo-Sa) — 5 Kandidaten-Cards
 *   2. Winner-Card (Sonntag 18:00+) — Trophy + Cinematic
 *   3. Banner-Mode — kompakt für Cluster-Page-Header
 * ================================================================= */

/* ─── Container ────────────────────────────────────────────────── */
.np-sec-bow {
	max-width: 1100px;
	margin: 0 auto;
	color: #f4f4f5;
}

/* ─── Banner-Mode (Cluster-Page-Stripe) ────────────────────────── */
.np-sec-bow--banner {
	margin: 0 0 18px;
}
.np-sec-bow-banner-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	background: linear-gradient( 135deg,
		color-mix( in srgb, #fbbf24 22%, rgba( 14, 18, 32, .92 ) ) 0%,
		rgba( 14, 18, 32, .98 ) 60%,
		rgba( 8, 10, 20, 1 ) 100%
	);
	border: 1px solid rgba( 251, 191, 36, .35 );
	border-radius: 14px;
	box-shadow: 0 8px 24px -10px rgba( 251, 191, 36, .25 );
}
.np-sec-bow-banner-icon {
	font-size: 36px;
	line-height: 1;
	filter: drop-shadow( 0 0 12px rgba( 251, 191, 36, .55 ) );
	animation: np-sec-bow-trophy-glow 3s ease-in-out infinite;
}
@keyframes np-sec-bow-trophy-glow {
	0%, 100% { filter: drop-shadow( 0 0 12px rgba( 251, 191, 36, .55 ) ); }
	50%      { filter: drop-shadow( 0 0 24px rgba( 251, 191, 36, .9 ) ); }
}
.np-sec-bow-banner-text {
	flex: 1;
	min-width: 0;
}
.np-sec-bow-banner-eyebrow {
	display: block;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fbbf24;
	font-weight: 700;
	margin-bottom: 2px;
}
.np-sec-bow-banner-stat {
	display: block;
	font-size: 14px;
	color: rgba( 255, 255, 255, .92 );
}
.np-sec-bow-banner-cta {
	flex-shrink: 0;
	padding: 8px 16px;
	background: #fbbf24;
	color: #0e1320 !important;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none !important;
	white-space: nowrap;
	transition: transform .15s ease, background .15s ease;
}
.np-sec-bow-banner-cta:hover {
	transform: translateY( -1px );
	background: #fcd34d;
}

/* ─── Full-Mode Hero ──────────────────────────────────────────── */
.np-sec-bow-hero {
	text-align: center;
	padding: 32px 24px 24px;
	margin: 0 0 24px;
	background: linear-gradient( 135deg,
		color-mix( in srgb, #fbbf24 12%, rgba( 14, 18, 32, .92 ) ) 0%,
		rgba( 8, 10, 20, .98 ) 80%
	);
	border: 1px solid rgba( 251, 191, 36, .25 );
	border-radius: 18px;
}
.np-sec-bow-eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fbbf24;
	font-weight: 700;
	margin-bottom: 12px;
}
.np-sec-bow-title {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: clamp( 24px, 4vw, 36px );
	margin: 0 0 12px;
	color: #fff;
	font-weight: 700;
}
.np-sec-bow-lead {
	font-size: 15px;
	color: rgba( 255, 255, 255, .75 );
	max-width: 620px;
	margin: 0 auto;
	line-height: 1.55;
}

/* ─── Empty-State ─────────────────────────────────────────────── */
.np-sec-bow-empty {
	text-align: center;
	padding: 60px 24px;
	color: rgba( 255, 255, 255, .55 );
}
.np-sec-bow-empty-icon { font-size: 56px; opacity: .6; margin-bottom: 12px; }
.np-sec-bow-empty h3 {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 22px;
	margin: 0 0 8px;
	color: rgba( 255, 255, 255, .85 );
}

/* ─── Voting-Liste ────────────────────────────────────────────── */
.np-sec-bow-candidates {
	margin: 0 0 24px;
}
.np-sec-bow-login-note {
	padding: 12px 18px;
	background: rgba( 251, 191, 36, .08 );
	border: 1px solid rgba( 251, 191, 36, .25 );
	border-radius: 10px;
	color: rgba( 255, 255, 255, .85 );
	font-size: 14px;
	margin-bottom: 16px;
}
.np-sec-bow-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.np-sec-bow-cand {
	display: grid;
	grid-template-columns: 48px 1fr auto auto;
	gap: 16px;
	align-items: center;
	padding: 16px 20px;
	background: linear-gradient( 135deg, rgba( 14, 18, 32, .95 ), rgba( 8, 10, 20, .98 ) );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 14px;
	transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.np-sec-bow-cand:hover {
	transform: translateY( -2px );
	border-color: rgba( 251, 191, 36, .35 );
	box-shadow: 0 8px 20px -10px rgba( 0, 0, 0, .6 );
}
.np-sec-bow-cand.is-voted {
	border-color: #fbbf24;
	background: linear-gradient( 135deg,
		color-mix( in srgb, #fbbf24 12%, rgba( 14, 18, 32, .98 ) ),
		rgba( 8, 10, 20, .98 )
	);
	box-shadow: 0 0 24px -8px rgba( 251, 191, 36, .5 );
}
.np-sec-bow-cand.is-own {
	opacity: .85;
}
.np-sec-bow-cand-rank {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 28px;
	font-weight: 700;
	color: #fbbf24;
	text-align: center;
}
.np-sec-bow-cand-vs {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 14px;
	align-items: center;
	min-width: 0;
}
.np-sec-bow-cand-side {
	--faction-color: #1f6feb;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	color: #fff !important;
	min-width: 0;
}
.np-sec-bow-cand-side strong {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.np-sec-bow-cand-side:hover strong {
	color: color-mix( in srgb, var( --faction-color ) 50%, #fff );
}
.np-sec-bow-cand-avatar {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: color-mix( in srgb, var( --faction-color ) 24%, rgba( 0, 0, 0, .5 ) );
	border: 2px solid color-mix( in srgb, var( --faction-color ) 60%, transparent );
	font-size: 18px;
}
.np-sec-bow-cand-score {
	text-align: center;
	min-width: 70px;
}
.np-sec-bow-cand-score strong {
	display: block;
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}
.np-sec-bow-cand-score small {
	display: block;
	font-size: 10px;
	color: rgba( 255, 255, 255, .5 );
	margin-top: 2px;
}
.np-sec-bow-cand-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-end;
	font-size: 11px;
	color: rgba( 255, 255, 255, .65 );
}
.np-sec-bow-cand-votes strong { color: #fbbf24; font-size: 14px; }
.np-sec-bow-cand-score-pill {
	font-size: 10px;
	letter-spacing: .04em;
}
.np-sec-bow-vote-btn {
	padding: 10px 18px;
	background: rgba( 251, 191, 36, .15 );
	border: 1px solid rgba( 251, 191, 36, .4 );
	color: #fbbf24;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s ease;
	white-space: nowrap;
}
.np-sec-bow-vote-btn:hover:not(:disabled) {
	background: #fbbf24;
	color: #0e1320;
	transform: scale( 1.05 );
}
.np-sec-bow-vote-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}
.np-sec-bow-cand.is-voted .np-sec-bow-vote-btn {
	background: #fbbf24;
	color: #0e1320;
}
.np-sec-bow-fineprint {
	display: block;
	text-align: center;
	margin-top: 18px;
	color: rgba( 255, 255, 255, .5 );
	font-size: 12px;
}

/* ─── Winner-View (Cinematic) ─────────────────────────────────── */
.np-sec-bow-winner {
	margin: 0 0 24px;
	text-align: center;
}
.np-sec-bow-winner-trophy {
	font-size: 88px;
	line-height: 1;
	filter: drop-shadow( 0 0 32px rgba( 251, 191, 36, .7 ) );
	margin-bottom: -24px;
	position: relative;
	z-index: 1;
	animation: np-sec-bow-trophy-rise .8s cubic-bezier( .65, 0, .35, 1 ) .2s both,
	           np-sec-bow-trophy-glow 3s ease-in-out 1.2s infinite;
}
@keyframes np-sec-bow-trophy-rise {
	from { transform: translateY( 40px ) scale( .6 ); opacity: 0; }
	to   { transform: translateY( 0 ) scale( 1 );    opacity: 1; }
}
.np-sec-bow-winner-card {
	position: relative;
	background: linear-gradient( 145deg,
		color-mix( in srgb, #fbbf24 18%, rgba( 14, 18, 32, .95 ) ),
		rgba( 8, 10, 20, .98 )
	);
	border: 2px solid rgba( 251, 191, 36, .55 );
	border-radius: 22px;
	padding: 56px 32px 28px;
	box-shadow: 0 32px 80px -24px rgba( 0, 0, 0, .8 ),
	            0 0 64px -8px rgba( 251, 191, 36, .35 );
}
.np-sec-bow-vs-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
	margin-bottom: 24px;
}
.np-sec-bow-side {
	--faction-color: #1f6feb;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none !important;
	color: #fff !important;
	padding: 18px 14px;
	background: color-mix( in srgb, var( --faction-color ) 14%, rgba( 0, 0, 0, .4 ) );
	border: 1px solid color-mix( in srgb, var( --faction-color ) 50%, transparent );
	border-radius: 16px;
	transition: transform .2s ease;
}
.np-sec-bow-side:hover {
	transform: translateY( -3px );
}
.np-sec-bow-side--winner {
	border-color: #fbbf24;
	box-shadow: 0 0 24px -4px rgba( 251, 191, 36, .5 );
}
.np-sec-bow-side-avatar {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: color-mix( in srgb, var( --faction-color ) 30%, rgba( 0, 0, 0, .5 ) );
	border: 3px solid var( --faction-color );
	font-size: 32px;
}
.np-sec-bow-side strong {
	font-size: 18px;
	font-weight: 700;
}
.np-sec-bow-side small {
	font-size: 12px;
	color: rgba( 255, 255, 255, .65 );
}
.np-sec-bow-vs-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.np-sec-bow-vs-score small {
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, .55 );
	font-weight: 700;
}
.np-sec-bow-vs-score strong {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 40px;
	color: #fbbf24;
}
.np-sec-bow-vs-territory {
	font-size: 11px;
	color: rgba( 255, 255, 255, .65 );
	margin-top: 4px;
}
.np-sec-bow-winner-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px dashed rgba( 255, 255, 255, .12 );
	font-size: 13px;
	color: rgba( 255, 255, 255, .75 );
}

/* ─── Mobile ──────────────────────────────────────────────────── */
@media ( max-width: 720px ) {
	.np-sec-bow-cand {
		grid-template-columns: 36px 1fr;
		gap: 12px;
	}
	.np-sec-bow-cand-vs {
		grid-column: 1 / -1;
		grid-template-columns: 1fr;
		text-align: center;
	}
	.np-sec-bow-cand-meta,
	.np-sec-bow-vote-btn {
		grid-column: 1 / -1;
		justify-self: stretch;
	}
	.np-sec-bow-cand-meta { flex-direction: row; justify-content: center; }
	.np-sec-bow-vs-row {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.np-sec-bow-banner-inner {
		flex-wrap: wrap;
	}
	.np-sec-bow-banner-cta {
		width: 100%;
		text-align: center;
	}
}

/* =================================================================
 * V1.58.0 — Booster-Packs (Mystery-Card-Reveal)
 *
 * Honor-Shop-Erweiterung: 1 Booster-Card mit Reveal-Modal, in dem 3 Cards
 * face-down liegen + bei Klick einzeln geflippt werden.
 * ================================================================= */

.np-sec-shop-booster-section {
	margin: 0 0 24px;
}

/* ─── Buy-Card ────────────────────────────────────────────────── */
.np-sec-shop-booster-card {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 24px 28px;
	background: linear-gradient( 135deg,
		color-mix( in srgb, #a78bfa 22%, rgba( 14, 18, 32, .95 ) ) 0%,
		color-mix( in srgb, #ec4899 14%, rgba( 14, 18, 32, .98 ) ) 60%,
		rgba( 8, 10, 20, 1 ) 100%
	);
	border: 1px solid rgba( 167, 139, 250, .4 );
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 16px 48px -16px rgba( 167, 139, 250, .35 );
}
.np-sec-shop-booster-glow {
	position: absolute;
	top: -50%;
	right: -10%;
	width: 50%;
	height: 200%;
	background: radial-gradient( circle, rgba( 167, 139, 250, .35 ) 0%, transparent 60% );
	filter: blur( 32px );
	pointer-events: none;
	animation: np-sec-booster-glow-shift 6s ease-in-out infinite;
}
@keyframes np-sec-booster-glow-shift {
	0%, 100% { transform: translate( 0, 0 ) scale( 1 ); }
	50%      { transform: translate( -20%, -10% ) scale( 1.2 ); }
}
.np-sec-shop-booster-icon {
	font-size: 64px;
	line-height: 1;
	filter: drop-shadow( 0 0 16px rgba( 167, 139, 250, .6 ) );
	animation: np-sec-booster-bounce 3s ease-in-out infinite;
}
@keyframes np-sec-booster-bounce {
	0%, 100% { transform: translateY( 0 ); }
	50%      { transform: translateY( -4px ); }
}
.np-sec-shop-booster-text {
	min-width: 0;
	z-index: 1;
}
.np-sec-shop-booster-text h3 {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 22px;
	margin: 0 0 6px;
	color: #fff;
	font-weight: 700;
}
.np-sec-shop-booster-text p {
	margin: 0 0 8px;
	color: rgba( 255, 255, 255, .8 );
	font-size: 14px;
	line-height: 1.45;
}
.np-sec-shop-booster-inventory {
	display: inline-block;
	padding: 4px 10px;
	background: rgba( 0, 0, 0, .25 );
	border-radius: 999px;
	color: #fbbf24;
	font-size: 12px;
	font-weight: 600;
}
.np-sec-shop-booster-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 1;
}
.np-sec-shop-booster-price {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 26px;
	color: #fbbf24;
	font-weight: 700;
}
.np-sec-shop-booster-btn {
	padding: 12px 22px;
	font-size: 14px;
	white-space: nowrap;
}

/* ─── Pool-Overview (alle 18 Items) ──────────────────────────── */
.np-sec-shop-booster-pool {
	margin-top: 14px;
	background: rgba( 14, 18, 32, .8 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 12px;
	padding: 10px 16px;
}
.np-sec-shop-booster-pool > summary {
	cursor: pointer;
	font-weight: 600;
	color: rgba( 255, 255, 255, .85 );
	padding: 4px 0;
	list-style: none;
}
.np-sec-shop-booster-pool > summary::-webkit-details-marker { display: none; }
.np-sec-shop-booster-pool > summary::before {
	content: '▶';
	font-size: 10px;
	margin-right: 8px;
	display: inline-block;
	transition: transform .2s ease;
}
.np-sec-shop-booster-pool[open] > summary::before {
	transform: rotate( 90deg );
}
.np-sec-shop-booster-pool-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 10px;
	margin-top: 14px;
}
.np-sec-shop-booster-pool-item {
	--item-color: #8a5cf6;
	position: relative;
	padding: 14px 10px;
	background: color-mix( in srgb, var( --item-color ) 14%, rgba( 0, 0, 0, .4 ) );
	border: 1px solid color-mix( in srgb, var( --item-color ) 50%, transparent );
	border-radius: 10px;
	text-align: center;
	transition: transform .2s ease;
}
.np-sec-shop-booster-pool-item.is-locked {
	opacity: .35;
	filter: grayscale( 1 );
}
.np-sec-shop-booster-pool-item.is-owned {
	box-shadow: 0 0 12px -2px color-mix( in srgb, var( --item-color ) 40%, transparent );
}
.np-sec-shop-booster-pool-item.is-rarity-legendary {
	border-width: 2px;
	box-shadow: 0 0 18px -2px color-mix( in srgb, var( --item-color ) 60%, transparent );
}
.np-sec-shop-booster-pool-item.is-rarity-epic.is-owned {
	box-shadow: 0 0 14px -2px color-mix( in srgb, var( --item-color ) 50%, transparent );
}
.np-sec-shop-booster-pool-icon {
	font-size: 26px;
	margin-bottom: 6px;
}
.np-sec-shop-booster-pool-label {
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 2px;
	line-height: 1.2;
}
.np-sec-shop-booster-pool-rarity {
	font-size: 9px;
	letter-spacing: .12em;
	color: color-mix( in srgb, var( --item-color ) 70%, rgba( 255, 255, 255, .6 ) );
	font-weight: 700;
}
.np-sec-shop-booster-pool-check {
	position: absolute;
	top: 6px;
	right: 8px;
	font-size: 14px;
	color: #22c55e;
	font-weight: 700;
}

/* ─── Reveal-Modal ────────────────────────────────────────────── */
.np-sec-booster-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 8, 6, 20, .92 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .3s ease;
}
.np-sec-booster-modal-overlay.is-open { opacity: 1; }
.np-sec-booster-modal {
	max-width: 720px;
	width: 100%;
	background: linear-gradient( 145deg, #1a1325 0%, #0e1320 100% );
	border: 1px solid rgba( 167, 139, 250, .35 );
	border-radius: 20px;
	padding: 32px 28px 24px;
	position: relative;
	box-shadow: 0 32px 80px rgba( 0, 0, 0, .7 ), 0 0 100px rgba( 167, 139, 250, .25 );
	transform: scale( .9 );
	transition: transform .35s cubic-bezier( .25, 1.5, .5, 1 );
}
.np-sec-booster-modal-overlay.is-open .np-sec-booster-modal {
	transform: scale( 1 );
}
.np-sec-booster-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, .15 );
	background: rgba( 0, 0, 0, .35 );
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.np-sec-booster-modal-title {
	font-family: 'Cinzel', 'Georgia', serif;
	text-align: center;
	margin: 0 0 8px;
	font-size: 24px;
	color: #fff;
}
.np-sec-booster-modal-subtitle {
	text-align: center;
	color: rgba( 255, 255, 255, .65 );
	font-size: 14px;
	margin: 0 0 28px;
}

/* Reveal-Cards */
.np-sec-booster-cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 16px;
	perspective: 1200px;
}
.np-sec-booster-card-slot {
	aspect-ratio: 2 / 3;
	position: relative;
}
.np-sec-booster-flip {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform .65s cubic-bezier( .4, .65, .35, 1 );
	cursor: pointer;
}
.np-sec-booster-flip.is-flipped {
	transform: rotateY( 180deg );
	cursor: default;
}
.np-sec-booster-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Back (face-down state) — Card-Back-Design mit Hex-Muster */
.np-sec-booster-back {
	background:
		radial-gradient( circle at center, rgba( 167, 139, 250, .4 ) 0%, transparent 60% ),
		linear-gradient( 145deg, #2a1a4a 0%, #1a0e2e 100% );
	border: 2px solid rgba( 167, 139, 250, .55 );
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 32px rgba( 167, 139, 250, .35 );
}
.np-sec-booster-back-icon {
	font-size: 64px;
	filter: drop-shadow( 0 0 16px rgba( 167, 139, 250, .9 ) );
	animation: np-sec-booster-back-pulse 2.5s ease-in-out infinite;
}
@keyframes np-sec-booster-back-pulse {
	0%, 100% { transform: scale( 1 ) rotate( 0deg ); }
	50%      { transform: scale( 1.12 ) rotate( 5deg ); }
}
.np-sec-booster-back-hint {
	position: absolute;
	bottom: 14px;
	font-size: 10px;
	letter-spacing: .14em;
	color: rgba( 255, 255, 255, .7 );
	text-transform: uppercase;
}

/* Front (revealed) — Cosmetic-Item-Card */
.np-sec-booster-front {
	transform: rotateY( 180deg );
	--item-color: #8a5cf6;
	background: linear-gradient( 145deg,
		color-mix( in srgb, var( --item-color ) 30%, rgba( 14, 18, 32, .95 ) ),
		rgba( 8, 10, 20, 1 )
	);
	border: 2px solid var( --item-color );
	box-shadow: inset 0 0 40px color-mix( in srgb, var( --item-color ) 35%, transparent ),
	            0 0 24px color-mix( in srgb, var( --item-color ) 50%, transparent );
	align-items: center;
	justify-content: center;
	padding: 16px 12px;
	text-align: center;
}
.np-sec-booster-front-icon {
	font-size: 56px;
	margin-bottom: 12px;
	filter: drop-shadow( 0 0 14px var( --item-color ) );
}
.np-sec-booster-front-label {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 6px;
}
.np-sec-booster-front-rarity {
	display: inline-block;
	padding: 3px 10px;
	background: color-mix( in srgb, var( --item-color ) 30%, rgba( 0, 0, 0, .3 ) );
	border: 1px solid var( --item-color );
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: .12em;
	color: #fff;
	font-weight: 700;
}
.np-sec-booster-front-new-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 3px 8px;
	background: #22c55e;
	color: #fff;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	box-shadow: 0 4px 12px -2px rgba( 34, 197, 94, .6 );
	animation: np-sec-booster-new-pop .5s cubic-bezier( .34, 1.56, .64, 1 ) .65s both;
}
@keyframes np-sec-booster-new-pop {
	from { transform: scale( 0 ) rotate( -20deg ); opacity: 0; }
	to   { transform: scale( 1 ) rotate( 0 );      opacity: 1; }
}
.np-sec-booster-front-dupe-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 3px 8px;
	background: rgba( 255, 255, 255, .12 );
	color: rgba( 255, 255, 255, .65 );
	border-radius: 999px;
	font-size: 9px;
	letter-spacing: .08em;
}
.np-sec-booster-front.is-rarity-legendary {
	animation: np-sec-booster-legendary-glow 2s ease-in-out infinite;
}
@keyframes np-sec-booster-legendary-glow {
	0%, 100% { box-shadow: inset 0 0 40px color-mix( in srgb, var( --item-color ) 35%, transparent ), 0 0 24px color-mix( in srgb, var( --item-color ) 50%, transparent ); }
	50%      { box-shadow: inset 0 0 50px color-mix( in srgb, var( --item-color ) 55%, transparent ), 0 0 36px color-mix( in srgb, var( --item-color ) 70%, transparent ); }
}

/* Modal-Footer */
.np-sec-booster-modal-footer {
	margin-top: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px dashed rgba( 255, 255, 255, .12 );
	font-size: 13px;
	color: rgba( 255, 255, 255, .7 );
}
.np-sec-booster-modal-footer strong { color: #fbbf24; }

@media ( max-width: 600px ) {
	.np-sec-shop-booster-card {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.np-sec-shop-booster-icon { margin: 0 auto; }
	.np-sec-shop-booster-cta { flex-direction: row; justify-content: center; }
	.np-sec-booster-cards { grid-template-columns: 1fr; gap: 12px; }
	.np-sec-booster-card-slot { aspect-ratio: 3 / 2; }
}

/* =================================================================
 * V1.60.0 — Champion-Halle: Cinematic-Section in jeder Archive-Card
 *
 * Wird über jeder Archive-Item-Card gerendert wenn final_standings.player_champion da ist.
 * Crown-Animation + Gold-Gradient + Avatar mit Glow.
 * ================================================================= */

.np-sec-archive-cinematic {
	--faction-color: #fbbf24;
	position: relative;
	padding: 48px 28px 32px;
	margin: 0 0 24px;
	background: linear-gradient( 145deg,
		color-mix( in srgb, #fbbf24 18%, rgba( 14, 18, 32, .95 ) ) 0%,
		color-mix( in srgb, var( --faction-color ) 14%, rgba( 8, 10, 20, .98 ) ) 60%,
		rgba( 5, 6, 14, 1 ) 100%
	);
	border: 2px solid rgba( 251, 191, 36, .55 );
	border-radius: 22px;
	text-align: center;
	overflow: hidden;
	box-shadow: 0 24px 60px -20px rgba( 0, 0, 0, .7 ),
	            0 0 80px -20px rgba( 251, 191, 36, .35 );
}
.np-sec-archive-cinematic::before {
	content: '';
	position: absolute;
	top: -50%;
	left: 50%;
	transform: translateX( -50% );
	width: 200%;
	height: 100%;
	background: radial-gradient( ellipse at center, rgba( 251, 191, 36, .25 ) 0%, transparent 60% );
	pointer-events: none;
	animation: np-sec-archive-shimmer 6s ease-in-out infinite;
}
@keyframes np-sec-archive-shimmer {
	0%, 100% { opacity: .5; transform: translateX( -50% ) scale( 1 ); }
	50%      { opacity: 1;  transform: translateX( -50% ) scale( 1.15 ); }
}

.np-sec-archive-cinematic-crown {
	font-size: 80px;
	line-height: 1;
	margin-bottom: -10px;
	filter: drop-shadow( 0 0 24px rgba( 251, 191, 36, .8 ) );
	animation: np-sec-archive-crown-float 4s ease-in-out infinite;
}
@keyframes np-sec-archive-crown-float {
	0%, 100% { transform: translateY( 0 ); }
	50%      { transform: translateY( -6px ); }
}

.np-sec-archive-cinematic-card {
	position: relative;
	z-index: 1;
	padding: 24px 20px 18px;
	background: linear-gradient( 145deg, rgba( 14, 18, 32, .9 ), rgba( 8, 10, 20, .98 ) );
	border: 1px solid var( --faction-color );
	border-radius: 16px;
	margin-top: 8px;
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}

.np-sec-archive-cinematic-avatar {
	width: 110px;
	height: 110px;
	margin: -56px auto 16px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba( 14, 18, 32, .95 );
	border: 4px solid var( --faction-color );
	box-shadow: 0 0 32px rgba( 251, 191, 36, .55 );
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.np-sec-archive-cinematic-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.np-sec-archive-cinematic-avatar-fallback {
	font-size: 56px;
	line-height: 1;
}

.np-sec-archive-cinematic-eyebrow {
	display: block;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fbbf24;
	font-weight: 700;
	margin-bottom: 6px;
}
.np-sec-archive-cinematic-name {
	display: block;
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	text-decoration: none !important;
	margin-bottom: 6px;
	line-height: 1.15;
	transition: color .15s ease;
}
a.np-sec-archive-cinematic-name:hover {
	color: var( --faction-color );
}
.np-sec-archive-cinematic-faction {
	display: inline-block;
	padding: 4px 12px;
	background: color-mix( in srgb, var( --faction-color ) 22%, rgba( 0, 0, 0, .5 ) );
	border: 1px solid var( --faction-color );
	border-radius: 999px;
	font-size: 13px;
	color: #fff;
	font-weight: 600;
	margin-bottom: 18px;
}
.np-sec-archive-cinematic-stats {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px dashed rgba( 255, 255, 255, .12 );
}
.np-sec-archive-cinematic-stats > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 70px;
}
.np-sec-archive-cinematic-stats strong {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 24px;
	color: #fbbf24;
	font-weight: 700;
}
.np-sec-archive-cinematic-stats small {
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, .55 );
}

@media ( max-width: 560px ) {
	.np-sec-archive-cinematic { padding: 36px 16px 20px; }
	.np-sec-archive-cinematic-crown { font-size: 60px; }
	.np-sec-archive-cinematic-avatar { width: 88px; height: 88px; margin-top: -44px; }
	.np-sec-archive-cinematic-name { font-size: 22px; }
}

/* =================================================================
 * V1.61.0 — Saison-Predictions Form
 * ================================================================= */
.np-sec-predictions-form {
	max-width: 580px;
	margin: 0 auto;
	background: linear-gradient( 145deg, rgba( 14, 18, 32, .95 ), rgba( 8, 10, 20, .98 ) );
	border: 1px solid rgba( 167, 139, 250, .25 );
	border-radius: 14px;
	padding: 24px;
}
.np-sec-predictions-field {
	margin-bottom: 18px;
}
.np-sec-predictions-field label {
	display: block;
	margin-bottom: 8px;
	color: rgba( 255, 255, 255, .85 );
	font-weight: 600;
	font-size: 14px;
}
.np-sec-predictions-field select {
	width: 100%;
	padding: 10px 14px;
	background: rgba( 0, 0, 0, .4 );
	border: 1px solid rgba( 255, 255, 255, .15 );
	color: #fff;
	border-radius: 8px;
	font-size: 14px;
}
.np-sec-predictions-field select:disabled {
	opacity: .55;
	cursor: not-allowed;
}
.np-sec-predictions-result {
	margin-top: 18px;
	padding: 14px;
	background: linear-gradient( 135deg, rgba( 167, 139, 250, .15 ), rgba( 14, 18, 32, .95 ) );
	border: 1px solid #a78bfa;
	border-radius: 10px;
	text-align: center;
	font-weight: 700;
	color: #a78bfa;
}

/* =================================================================
 * V1.84.0 — Boss-Admin-Steuerung (Owner-only Start/Beenden)
 * ================================================================= */
.np-sec-boss-admin {
	max-width: 720px;
	margin: 0 auto 24px;
	padding: 16px 18px;
	border: 1px dashed rgba( 220, 38, 38, .5 );
	border-radius: 14px;
	background: rgba( 220, 38, 38, .06 );
	text-align: center;
}
.np-sec-boss-admin-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #f87171;
	margin-bottom: 8px;
}
.np-sec-boss-admin-hint {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	opacity: .85;
}
.np-sec-boss-admin .np-sec-boss-admin-reset {
	background: #dc2626;
	border-color: #dc2626;
	color: #fff;
}
.np-sec-boss-admin .np-sec-boss-admin-reset:hover {
	background: #b91c1c;
	border-color: #b91c1c;
}

/* =================================================================
 * V1.62.0 — Boss-Battle HP-Bar
 * ================================================================= */
.np-sec-boss-hp {
	max-width: 720px;
	margin: 0 auto 24px;
}
.np-sec-boss-hp-bar {
	position: relative;
	height: 32px;
	background: rgba( 0, 0, 0, .5 );
	border: 2px solid #dc2626;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 0 24px rgba( 220, 38, 38, .4 );
}
.np-sec-boss-hp-fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: calc( 100% - var( --pct, 0% ) );
	background: linear-gradient( 90deg, #dc2626 0%, #ef4444 100% );
	box-shadow: 0 0 16px rgba( 239, 68, 68, .7 );
	transition: width .8s ease;
}
.np-sec-boss-hp-label {
	text-align: center;
	margin-top: 10px;
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 16px;
	color: #ef4444;
	font-weight: 700;
}
.np-sec-boss-ranking {
	max-width: 720px;
	margin: 0 auto;
	padding: 20px;
	background: linear-gradient( 145deg, rgba( 14, 18, 32, .95 ), rgba( 8, 10, 20, .98 ) );
	border: 1px solid rgba( 220, 38, 38, .25 );
	border-radius: 14px;
}
.np-sec-boss-ranking h3 {
	margin: 0 0 14px;
	color: #ef4444;
	font-family: 'Cinzel', 'Georgia', serif;
}
.np-sec-boss-ranking ol {
	list-style: none;
	padding: 0;
	margin: 0;
}
.np-sec-boss-ranking li {
	padding: 10px 14px;
	margin: 0 0 6px;
	background: rgba( 220, 38, 38, .08 );
	border-left: 3px solid #dc2626;
	border-radius: 6px;
	color: #fff;
}
.np-sec-anleitung-lead {
	font-size: 1.05rem;
	color: var( --np-sec-muted, rgba( 255, 255, 255, .7 ) );
	max-width: 720px;
	margin: 0 0 28px;
	line-height: 1.6;
}
.np-sec-anleitung-h {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 32px 0 16px;
}
.np-sec-anleitung-muted {
	color: var( --np-sec-muted, rgba( 255, 255, 255, .65 ) );
	font-size: .9rem;
	margin: 0 0 14px;
}

/* Steps */
.np-sec-anleitung-steps {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 16px;
	margin: 24px 0;
}
.np-sec-anleitung-step {
	background: var( --np-sec-card, rgba( 255, 255, 255, .04 ) );
	border: 1px solid var( --np-sec-border, rgba( 255, 255, 255, .08 ) );
	border-radius: 12px;
	padding: 20px;
	position: relative;
	transition: transform .15s ease, border-color .15s ease;
}
.np-sec-anleitung-step:hover {
	transform: translateY( -2px );
	border-color: var( --np-sec-accent, #fde047 );
}
.np-sec-anleitung-step-num {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.np-sec-anleitung-step-num span {
	font-size: 28px;
	line-height: 1;
}
.np-sec-anleitung-step-num small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var( --np-sec-accent, #fde047 );
	color: #1b2434;
	border-radius: 50%;
	font-weight: 800;
	font-size: 12px;
}
.np-sec-anleitung-step h3 {
	font-size: 1.05rem;
	margin: 4px 0 6px;
}
.np-sec-anleitung-step p {
	margin: 0;
	color: var( --np-sec-muted, rgba( 255, 255, 255, .7 ) );
	font-size: .92rem;
	line-height: 1.5;
}

/* Actions Grid */
.np-sec-anleitung-actions-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 12px;
}
.np-sec-anleitung-action {
	display: flex;
	gap: 12px;
	padding: 14px;
	background: var( --np-sec-card, rgba( 255, 255, 255, .03 ) );
	border: 1px solid var( --np-sec-border, rgba( 255, 255, 255, .06 ) );
	border-radius: 10px;
}
.np-sec-anleitung-action-icon {
	font-size: 22px;
	line-height: 1;
	flex: 0 0 auto;
}
.np-sec-anleitung-action strong {
	display: block;
	font-size: .98rem;
	margin-bottom: 2px;
}
.np-sec-anleitung-action small {
	color: var( --np-sec-muted, rgba( 255, 255, 255, .65 ) );
	font-size: .85rem;
	line-height: 1.45;
}

/* Shortcode-Tabelle (nur für Admins) */
.np-sec-anleitung-shortcodes {
	background: rgba( 0, 0, 0, .25 );
	border: 1px dashed rgba( 253, 224, 71, .25 );
	border-radius: 10px;
	padding: 18px;
	margin: 24px 0;
}
.np-sec-anleitung-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}
.np-sec-anleitung-table th,
.np-sec-anleitung-table td {
	padding: 8px 12px;
	text-align: left;
	border-bottom: 1px solid rgba( 255, 255, 255, .06 );
}
.np-sec-anleitung-table th {
	font-weight: 600;
	color: var( --np-sec-accent, #fde047 );
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.np-sec-anleitung-table code {
	background: rgba( 253, 224, 71, .1 );
	color: var( --np-sec-accent, #fde047 );
	padding: 2px 8px;
	border-radius: 4px;
	font-size: .88rem;
}

/* CTA */
.np-sec-anleitung-cta {
	margin-top: 28px;
	text-align: center;
}
.np-sec-anleitung-cta-btn {
	display: inline-block;
	padding: 14px 28px;
	font-size: 1.05rem;
	font-weight: 700;
}
.np-sec-anleitung-cta small {
	display: block;
	margin-top: 10px;
	color: var( --np-sec-muted, rgba( 255, 255, 255, .55 ) );
	font-size: .85rem;
}

@media ( max-width: 720px ) {
	.np-sec-anleitung { padding: 20px 16px; }
	.np-sec-anleitung-title { font-size: 1.4rem; }
	.np-sec-anleitung-steps { grid-template-columns: 1fr; }
	.np-sec-anleitung-actions-grid { grid-template-columns: 1fr; }
	.np-sec-anleitung-table { font-size: .82rem; }
	.np-sec-anleitung-table th, .np-sec-anleitung-table td { padding: 6px 8px; }
}

/* =================================================================
 * V1.42: Honor-Shop — Custom-Title / Profile-Frame / Banner-Color
 * Permanente Cosmetic-Unlocks, Tab in Master-Nav, [sectorum_shop]
 * ================================================================= */

.np-sec-shop {
	padding: 0 0 32px;
}

.np-sec-shop-head {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px 26px;
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 28%, transparent ),
		color-mix( in srgb, var( --np-sec-accent ) 18%, transparent )
	);
	border-radius: 16px;
	border: 1px solid color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 35%, var( --np-sec-border ) );
	margin: 0 0 22px;
}
.np-sec-shop-head-text { flex: 1; }
.np-sec-shop-eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11px;
	opacity: .8;
	display: block;
	margin-bottom: 4px;
}
.np-sec-shop-head h2 { margin: 0 0 6px; font-size: 1.4rem; color: var( --np-sec-fg ); }
.np-sec-shop-head p { margin: 0; opacity: .82; line-height: 1.55; max-width: 680px; }

.np-sec-shop-balance {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 22px;
	border-radius: 14px;
	background: rgba( 0, 0, 0, .28 );
	border: 1px solid color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 40%, var( --np-sec-border ) );
	transition: transform .18s ease;
}
.np-sec-shop-balance.is-pulse {
	animation: np-sec-shop-balance-pulse .6s ease-out;
}
@keyframes np-sec-shop-balance-pulse {
	0%   { transform: scale( 1 ); }
	40%  { transform: scale( 1.18 ); filter: brightness( 1.4 ); }
	100% { transform: scale( 1 ); filter: brightness( 1 ); }
}
.np-sec-shop-balance-icon { font-size: 22px; line-height: 1; }
.np-sec-shop-balance strong { font-size: 1.5rem; font-weight: 700; color: #fbbf24; }
.np-sec-shop-balance small { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; opacity: .7; }

/* Sections */
/* V1.82.0: Shop-Kategorie-Filterleiste */
.np-sec-shop-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 18px;
}
.np-sec-shop-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var( --np-sec-border, rgba(255,255,255,.12) );
	background: var( --np-sec-card, rgba(255,255,255,.04) );
	color: var( --np-sec-fg, #e6edf3 );
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	touch-action: manipulation;
	transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.np-sec-shop-filter:hover { transform: translateY( -1px ); border-color: var( --np-sec-faction, #1f6feb ); }
.np-sec-shop-filter.is-active {
	background: var( --np-sec-faction, #1f6feb );
	border-color: var( --np-sec-faction, #1f6feb );
	color: #fff;
}
.np-sec-shop-filter-prog {
	font-size: 11px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .22 );
}
.np-sec-shop-section {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: 14px;
	padding: 22px 24px;
	margin: 0 0 18px;
}
.np-sec-shop-section h3 {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 6px;
	font-size: 1.1rem;
	color: var( --np-sec-fg );
}
.np-sec-shop-section-desc {
	margin: 0 0 16px;
	opacity: .75;
	font-size: .92rem;
	line-height: 1.5;
}
.np-sec-shop-price {
	color: #fbbf24;
	font-size: .95rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Title-Form */
.np-sec-shop-title-form,
.np-sec-shop-color-form {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0 0 12px;
}
.np-sec-shop-title-form input[type="text"] {
	flex: 1;
	min-width: 180px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid var( --np-sec-border );
	background: rgba( 0, 0, 0, .25 );
	color: var( --np-sec-fg );
	font-size: .95rem;
}
.np-sec-shop-color-form label {
	display: flex;
	align-items: center;
	gap: 10px;
}
.np-sec-shop-color-form input[type="color"] {
	width: 50px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid var( --np-sec-border );
	cursor: pointer;
	background: transparent;
}

/* Owned-Listen */
.np-sec-shop-owned {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var( --np-sec-border );
}
.np-sec-shop-owned small {
	display: block;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 11px;
	opacity: .6;
	margin: 0 0 8px;
}
.np-sec-shop-owned ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.np-sec-shop-owned li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: rgba( 0, 0, 0, .22 );
	border: 1px solid var( --np-sec-border );
	border-radius: 999px;
	font-size: .88rem;
}
.np-sec-shop-owned li.is-equipped {
	border-color: color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 65%, transparent );
	background: color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 18%, rgba( 0, 0, 0, .25 ) );
}
.np-sec-shop-owned li.is-pending {
	opacity: .65;
	border-style: dashed;
}
.np-sec-shop-tag-active  { color: #34d399; font-weight: 700; }
.np-sec-shop-tag-pending { color: #fbbf24; }
.np-sec-shop-equip {
	background: transparent;
	border: 1px solid var( --np-sec-border );
	color: var( --np-sec-fg );
	padding: 4px 10px;
	border-radius: 999px;
	cursor: pointer;
	font-size: .8rem;
	transition: background .14s, border-color .14s;
}
.np-sec-shop-equip:hover {
	background: var( --np-sec-primary );
	color: #fff;
	border-color: var( --np-sec-primary );
}

/* Frame-Grid */
.np-sec-shop-frame-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: 14px;
}
.np-sec-shop-frame-tile {
	background: rgba( 0, 0, 0, .25 );
	border: 1px solid var( --np-sec-border );
	border-radius: 14px;
	padding: 16px 12px;
	text-align: center;
	transition: transform .15s ease, border-color .15s ease;
	position: relative;
}
.np-sec-shop-frame-tile:hover { transform: translateY( -2px ); border-color: color-mix( in srgb, var( --np-sec-primary ) 45%, var( --np-sec-border ) ); }
.np-sec-shop-frame-tile.is-equipped {
	border-color: #34d399;
	box-shadow: 0 0 0 3px rgba( 52, 211, 153, .18 );
}
.np-sec-shop-frame-tile.is-owned:not(.is-equipped) {
	border-color: color-mix( in srgb, var( --np-sec-accent ) 50%, var( --np-sec-border ) );
}
.np-sec-shop-frame-tile h4 {
	margin: 10px 0 4px;
	font-size: 1rem;
	color: var( --np-sec-fg );
}
.np-sec-shop-frame-tile .np-sec-shop-price {
	display: block;
	margin: 0 0 10px;
}
.np-sec-shop-frame-tile .np-sec-btn { width: 100%; }

.np-sec-shop-frame-avatar {
	position: relative;
	width: 72px;
	height: 72px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.np-sec-shop-frame-emoji {
	position: absolute;
	font-size: 32px;
	line-height: 1;
	z-index: 2;
}
.np-sec-shop-frame-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	z-index: 1;
}

/* V1.42 Frame-Tier-Optik — gleicher Style auch im Player-Modal über `[data-np-sec-frame]` */
.np-sec-shop-frame-ring[data-frame-tier="bronze"],
.np-sec-avatar[data-np-sec-frame="bronze"] {
	box-shadow: 0 0 0 3px #cd7f32, 0 0 12px rgba( 205, 127, 50, .55 );
}
.np-sec-shop-frame-ring[data-frame-tier="silver"],
.np-sec-avatar[data-np-sec-frame="silver"] {
	box-shadow: 0 0 0 3px #c0c0c0, 0 0 14px rgba( 192, 192, 192, .6 );
}
.np-sec-shop-frame-ring[data-frame-tier="gold"],
.np-sec-avatar[data-np-sec-frame="gold"] {
	box-shadow: 0 0 0 3px #ffd700, 0 0 18px rgba( 255, 215, 0, .7 );
	animation: np-sec-frame-gold 3.4s ease-in-out infinite;
}
.np-sec-shop-frame-ring[data-frame-tier="onyx"],
.np-sec-avatar[data-np-sec-frame="onyx"] {
	box-shadow:
		0 0 0 3px #1f1f24,
		0 0 0 5px rgba( 220, 60, 130, .6 ),
		0 0 24px rgba( 220, 60, 130, .35 );
	animation: np-sec-frame-onyx 2.8s ease-in-out infinite;
}
.np-sec-shop-frame-ring[data-frame-tier="plasma"],
.np-sec-avatar[data-np-sec-frame="plasma"] {
	box-shadow:
		0 0 0 3px transparent,
		0 0 0 5px rgba( 31, 200, 255, .8 ),
		0 0 24px rgba( 200, 80, 255, .75 ),
		0 0 36px rgba( 31, 200, 255, .45 );
	animation: np-sec-frame-plasma 2s linear infinite;
}
@keyframes np-sec-frame-gold {
	0%, 100% { box-shadow: 0 0 0 3px #ffd700, 0 0 14px rgba( 255, 215, 0, .55 ); }
	50%      { box-shadow: 0 0 0 3px #ffd700, 0 0 24px rgba( 255, 215, 0, .85 ); }
}
@keyframes np-sec-frame-onyx {
	0%, 100% { box-shadow: 0 0 0 3px #1f1f24, 0 0 0 5px rgba( 220, 60, 130, .55 ), 0 0 18px rgba( 220, 60, 130, .3 ); }
	50%      { box-shadow: 0 0 0 3px #1f1f24, 0 0 0 5px rgba( 220, 60, 130, .9 ),  0 0 32px rgba( 220, 60, 130, .55 ); }
}
@keyframes np-sec-frame-plasma {
	0%   { box-shadow: 0 0 0 3px transparent, 0 0 0 5px rgba( 31, 200, 255, .8 ),  0 0 26px rgba( 200, 80, 255, .65 ); }
	50%  { box-shadow: 0 0 0 3px transparent, 0 0 0 5px rgba( 200, 80, 255, .8 ),  0 0 30px rgba( 251, 113, 36, .65 ); }
	100% { box-shadow: 0 0 0 3px transparent, 0 0 0 5px rgba( 251, 113, 36, .8 ),  0 0 28px rgba( 31, 200, 255, .65 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.np-sec-shop-frame-ring,
	.np-sec-avatar[data-np-sec-frame] {
		animation: none !important;
	}
}

/* Color-Liste */
.np-sec-shop-color-list li {
	padding: 4px 10px 4px 4px;
}
.np-sec-shop-color-swatch {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var( --np-sec-border );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, .35 );
}
.np-sec-shop-color-list code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82rem;
	opacity: .8;
}

/* Help-Box am Fuß */
.np-sec-shop-help {
	margin-top: 18px;
	padding: 14px 18px;
	border-radius: 12px;
	background: rgba( 251, 191, 36, .08 );
	border: 1px dashed rgba( 251, 191, 36, .35 );
	font-size: .9rem;
	line-height: 1.55;
}
.np-sec-shop-help p { margin: 0 0 6px; }
.np-sec-shop-help p:last-child { margin: 0; opacity: .8; }

/* Player-Modal Custom-Title + Banner-Color-Mix
 * (Banner-Color kommt als --np-sec-banner-accent durchs Style-Tag.
 *  Wenn gesetzt, mischen wir's in den Modal-Background-Gradient.) */
.np-sec-pmodal[style*="--np-sec-banner-accent"] {
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-faction ) 80%, transparent ) 0%,
		color-mix( in srgb, var( --np-sec-banner-accent ) 50%, var( --np-sec-faction ) 50% ) 100%
	);
}
.np-sec-pmodal-custom-title {
	margin: 4px 0 0;
	font-style: italic;
	font-size: .88rem;
	opacity: .92;
	color: #fff;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, .55 );
}

@media ( max-width: 720px ) {
	.np-sec-shop-head { flex-direction: column; text-align: center; }
	.np-sec-shop-frame-grid { grid-template-columns: repeat( 2, 1fr ); }
}

/* =================================================================
 * V1.43: Mini-Map (My-Faction-Header + Player-Modal)
 *        Push-Notification-Subscribe-Button
 * ================================================================= */

/* My-Faction-Header bekommt 3-Spalten-Layout damit die Mini-Map rechts passt */
.np-sec-my-faction-head {
	display: flex;
	align-items: center;
	gap: 14px;
}
.np-sec-my-faction-head-text { flex: 1; min-width: 0; }
.np-sec-my-faction-minimap {
	flex-shrink: 0;
}
.np-sec-my-faction-minimap .np-sec-minimap-wrap {
	width: 200px;
	height: 140px;
}

/* Mini-Map-Container */
.np-sec-minimap-wrap {
	position: relative;
	display: inline-block;
	width: 200px;
	height: 140px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var( --np-sec-border );
	background: rgba( 0, 0, 0, .35 );
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.np-sec-minimap-wrap:hover {
	transform: translateY( -2px );
	border-color: color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 55%, var( --np-sec-border ) );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .35 );
}
.np-sec-minimap-svg {
	display: block;
	width: 100%;
	height: 100%;
}
.np-sec-minimap-cta {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 5px 10px;
	font-size: .78rem;
	color: #fff;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, .8 ) 0%,
		rgba( 0, 0, 0, 0 )  100%
	);
	text-align: center;
	pointer-events: none;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Mini-Map im Player-Modal — kompakter */
.np-sec-pmodal-minimap-section .np-sec-minimap-wrap {
	display: block;
	width: 100%;
	max-width: 320px;
	height: 160px;
	margin: 0 auto;
}
.np-sec-pmodal-minimap-empty {
	display: block;
	padding: 16px;
	text-align: center;
	opacity: .55;
	font-style: italic;
	font-size: .85rem;
}

/* Push-Notification Subscribe-Button */
.np-sec-pushnotif-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var( --np-sec-border );
	background: var( --np-sec-card );
	color: var( --np-sec-fg );
	font-size: 15px;
	cursor: pointer;
	transition: background .14s ease, transform .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
	margin-left: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.np-sec-pushnotif-btn:hover {
	background: var( --np-sec-primary );
	color: #fff;
	border-color: var( --np-sec-primary );
	transform: translateY( -1px );
}
.np-sec-pushnotif-btn[aria-pressed="true"] {
	background: linear-gradient( 135deg, #34d399, #1f6feb );
	color: #fff;
	border-color: transparent;
	box-shadow: 0 0 0 3px rgba( 52, 211, 153, .22 );
}
.np-sec-pushnotif-btn[aria-pressed="true"]::after {
	content: '';
	position: absolute;
	top: -2px;
	right: -2px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34d399;
	border: 2px solid var( --np-sec-card );
	animation: np-sec-push-pulse 2s ease-in-out infinite;
}
@keyframes np-sec-push-pulse {
	0%, 100% { transform: scale( 1 ); opacity: 1; }
	50%      { transform: scale( 1.35 ); opacity: .65; }
}
.np-sec-pushnotif-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}

@media ( max-width: 720px ) {
	.np-sec-my-faction-head { flex-wrap: wrap; }
	.np-sec-my-faction-minimap { width: 100%; order: 99; margin-top: 12px; }
	.np-sec-my-faction-minimap .np-sec-minimap-wrap { width: 100%; height: 120px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.np-sec-pushnotif-btn[aria-pressed="true"]::after,
	.np-sec-minimap-svg animate { animation: none; }
}

/* =================================================================
 * V1.44: Mentor-System + Career-Page (Multi-Campaign-Compare)
 * ================================================================= */

/* Mentor */
.np-sec-mentor-head {
	padding: 22px 26px;
	background: linear-gradient(
		135deg,
		rgba( 251, 191, 36, .14 ),
		rgba( 106, 90, 205, .10 )
	);
	border: 1px solid rgba( 251, 191, 36, .25 );
	border-radius: 16px;
	margin: 0 0 22px;
}
.np-sec-mentor-eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11px;
	opacity: .85;
	display: block;
	margin-bottom: 4px;
}
.np-sec-mentor-head h2 { margin: 0 0 8px; color: var( --np-sec-fg ); font-size: 1.4rem; }
.np-sec-mentor-head p  { margin: 0; opacity: .82; line-height: 1.55; max-width: 700px; }

.np-sec-mentor-section {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: 14px;
	padding: 20px 22px;
	margin: 0 0 16px;
}
.np-sec-mentor-section h3 { margin: 0 0 12px; font-size: 1.05rem; color: var( --np-sec-fg ); }

.np-sec-mentor-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.np-sec-mentor-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	margin: 0 0 8px;
	background: rgba( 0, 0, 0, .25 );
	border: 1px solid var( --np-sec-border );
	border-radius: 12px;
}
.np-sec-mentor-icon {
	font-size: 28px;
	line-height: 1;
	flex-shrink: 0;
}
.np-sec-mentor-item-body { flex: 1; min-width: 0; }
.np-sec-mentor-item-body strong { display: block; color: var( --np-sec-fg ); }
.np-sec-mentor-item-body small { display: block; opacity: .72; font-size: .82rem; margin-top: 2px; }
.np-sec-mentor-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.np-sec-mentor-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 22%, transparent ),
		rgba( 0, 0, 0, .25 )
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 40%, var( --np-sec-border ) );
	border-radius: 12px;
}
.np-sec-mentor-card-body { flex: 1; }
.np-sec-mentor-card-body strong { color: var( --np-sec-fg ); font-size: 1.05rem; }
.np-sec-mentor-card-body small  { display: block; opacity: .75; font-size: .85rem; margin-top: 2px; }
.np-sec-mentor-card-body p      { margin: 6px 0 0; font-size: .82rem; opacity: .65; }

.np-sec-mentor-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.np-sec-mentor-card-tile {
	background: rgba( 0, 0, 0, .25 );
	border: 1px solid color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 40%, var( --np-sec-border ) );
	border-radius: 12px;
	padding: 14px 12px;
	text-align: center;
	transition: transform .14s ease, border-color .14s ease;
}
.np-sec-mentor-card-tile:hover {
	transform: translateY( -2px );
	border-color: color-mix( in srgb, var( --np-sec-faction, var( --np-sec-primary ) ) 70%, var( --np-sec-border ) );
}
.np-sec-mentor-card-tile .np-sec-mentor-icon { font-size: 32px; display: block; margin: 0 0 6px; }
.np-sec-mentor-card-tile strong { display: block; color: var( --np-sec-fg ); font-size: .95rem; }
.np-sec-mentor-card-tile small  { display: block; opacity: .72; font-size: .8rem; margin: 2px 0 8px; }
.np-sec-mentor-tile-stats {
	font-size: .82rem;
	opacity: .85;
	margin: 0 0 10px;
}
.np-sec-mentor-card-tile .np-sec-btn { width: 100%; }

.np-sec-mentor-hint {
	margin: 0;
	padding: 12px 14px;
	background: rgba( 251, 191, 36, .08 );
	border: 1px dashed rgba( 251, 191, 36, .3 );
	border-radius: 10px;
	font-size: .9rem;
	line-height: 1.5;
}

/* Mentor-Pill — wird im Player-Modal angezeigt */
.np-sec-pmodal-mentor-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: rgba( 251, 191, 36, .18 );
	border: 1px solid rgba( 251, 191, 36, .35 );
	border-radius: 999px;
	font-size: .78rem;
	color: #fbd76b;
	font-weight: 600;
	margin-top: 6px;
}

/* Career */
.np-sec-career-head {
	padding: 22px 26px;
	background: linear-gradient(
		135deg,
		rgba( 31, 111, 235, .14 ),
		rgba( 106, 90, 205, .10 )
	);
	border: 1px solid rgba( 31, 111, 235, .22 );
	border-radius: 16px;
	margin: 0 0 22px;
}
.np-sec-career-eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11px;
	opacity: .85;
	display: block;
	margin-bottom: 4px;
}
.np-sec-career-head h2 { margin: 0 0 6px; color: var( --np-sec-fg ); font-size: 1.4rem; }
.np-sec-career-head p  { margin: 0; opacity: .8; max-width: 680px; }

.np-sec-career-section {
	background: var( --np-sec-card );
	border: 1px solid var( --np-sec-border );
	border-radius: 14px;
	padding: 20px 22px;
	margin: 0 0 16px;
}
.np-sec-career-section h3 { margin: 0 0 10px; color: var( --np-sec-fg ); font-size: 1.05rem; }
.np-sec-career-subtitle   { margin: 18px 0 10px; font-size: .95rem; color: var( --np-sec-fg ); }
.np-sec-career-primary-faction {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: rgba( 0, 0, 0, .25 );
	border-left: 3px solid var( --np-sec-faction, var( --np-sec-primary ) );
	border-radius: 8px;
	font-size: .9rem;
}
.np-sec-career-hint {
	margin: 0;
	padding: 14px;
	background: rgba( 255, 255, 255, .04 );
	border: 1px dashed var( --np-sec-border );
	border-radius: 10px;
	opacity: .72;
	font-style: italic;
	font-size: .9rem;
	text-align: center;
}

.np-sec-career-stat-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) );
	gap: 10px;
	margin: 0 0 14px;
}
.np-sec-career-stat-tile {
	background: rgba( 0, 0, 0, .25 );
	border: 1px solid var( --np-sec-border );
	border-radius: 10px;
	padding: 12px 10px;
	text-align: center;
}
.np-sec-career-stat-tile strong {
	display: block;
	color: var( --np-sec-fg );
	font-size: 1.4rem;
	font-weight: 700;
}
.np-sec-career-stat-tile small {
	display: block;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .7;
	margin-top: 3px;
}
.np-sec-career-stat-tile.is-decorated {
	background: linear-gradient( 135deg, rgba( 251, 191, 36, .22 ), rgba( 220, 130, 30, .12 ) );
	border-color: rgba( 251, 191, 36, .45 );
}
.np-sec-career-stat-tile.is-decorated strong { color: #fbd76b; }

/* Seasons-Liste */
.np-sec-career-seasons {
	list-style: none;
	margin: 0;
	padding: 0;
}
.np-sec-career-season {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 8px;
	padding: 12px 14px;
	background: rgba( 0, 0, 0, .25 );
	border: 1px solid var( --np-sec-border );
	border-left: 4px solid var( --np-sec-faction, var( --np-sec-primary ) );
	border-radius: 10px;
}
.np-sec-career-season.is-decorated {
	background: linear-gradient(
		90deg,
		rgba( 251, 191, 36, .12 ),
		rgba( 0, 0, 0, .25 ) 70%
	);
	border-left-color: #fbbf24;
}
.np-sec-career-season-head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.np-sec-career-season-faction-icon { font-size: 24px; line-height: 1; }
.np-sec-career-season-head strong { display: block; color: var( --np-sec-fg ); }
.np-sec-career-season-head small  { display: block; opacity: .65; font-size: .78rem; }
.np-sec-career-decorated-badge {
	margin-left: auto;
	padding: 3px 9px;
	font-size: .72rem;
	background: rgba( 251, 191, 36, .25 );
	color: #fbd76b;
	border: 1px solid rgba( 251, 191, 36, .45 );
	border-radius: 999px;
	font-weight: 700;
}
.np-sec-career-season-stats {
	font-size: .85rem;
	opacity: .82;
	margin-left: 38px;
}

/* Leaderboard */
.np-sec-career-leaderboard {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: cleader;
}
.np-sec-career-leaderboard-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	margin: 0 0 6px;
	background: rgba( 0, 0, 0, .25 );
	border: 1px solid var( --np-sec-border );
	border-radius: 10px;
}
.np-sec-career-rank-num {
	font-weight: 700;
	font-size: 1.15rem;
	color: var( --np-sec-fg );
	min-width: 28px;
}
.np-sec-career-leaderboard-item.is-podium { border-color: rgba( 251, 191, 36, .45 ); }
.np-sec-career-leaderboard-item.is-podium .np-sec-career-rank-num { color: #fbd76b; }
.np-sec-career-leaderboard-stats {
	margin-left: auto;
	font-size: .85rem;
	opacity: .82;
}

@media ( max-width: 720px ) {
	.np-sec-mentor-item { flex-wrap: wrap; }
	.np-sec-mentor-actions { width: 100%; }
	.np-sec-career-stat-grid { grid-template-columns: repeat( 2, 1fr ); }
	.np-sec-career-leaderboard-stats { display: block; margin: 4px 0 0 42px; }
}

/* =================================================================
 * V1.45: Booking-Drawer V2 — Tisch-Plugin in-place via Asset-Injection
 * Slide-In von rechts (Desktop) / Bottom-Sheet (Mobile)
 * ================================================================= */

.np-sec-booking-drawer {
	position: fixed;
	inset: 0;
	z-index: 99990;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}
.np-sec-booking-drawer.is-open {
	pointer-events: auto;
	opacity: 1;
}

.np-sec-booking-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .65 );
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
}

.np-sec-booking-drawer__panel {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: min( 720px, 92vw );
	max-height: var( --np-sec-drawer-max-vh, 90vh );
	background: var( --np-sec-bg, #0d1117 );
	border-left: 1px solid var( --np-sec-border, #30363d );
	box-shadow: -16px 0 48px rgba( 0, 0, 0, .55 );
	display: flex;
	flex-direction: column;
	transform: translateX( 100% );
	transition: transform .32s cubic-bezier( .22, .8, .35, 1 );
}
.np-sec-booking-drawer.is-open .np-sec-booking-drawer__panel {
	transform: translateX( 0 );
}

.np-sec-booking-drawer__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid var( --np-sec-border, #30363d );
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-primary, #1f6feb ) 28%, transparent ),
		color-mix( in srgb, var( --np-sec-accent, #6a5acd ) 18%, transparent )
	);
}
.np-sec-booking-drawer__head h3 {
	margin: 0;
	color: var( --np-sec-fg, #e6edf3 );
	font-size: 1.05rem;
	flex: 1;
}
.np-sec-booking-drawer__open-page,
.np-sec-booking-drawer__close {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .08 );
	border: 1px solid var( --np-sec-border, #30363d );
	color: var( --np-sec-fg, #e6edf3 );
	cursor: pointer;
	text-decoration: none;
	font-size: 16px;
	transition: background .14s ease, transform .14s ease;
}
.np-sec-booking-drawer__open-page:hover,
.np-sec-booking-drawer__close:hover {
	background: rgba( 255, 255, 255, .18 );
	transform: translateY( -1px );
}
.np-sec-booking-drawer__close {
	font-size: 22px;
	line-height: 1;
}

.np-sec-booking-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 18px;
	-webkit-overflow-scrolling: touch;
}

.np-sec-booking-drawer__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 60px 20px;
	color: var( --np-sec-fg, #e6edf3 );
	opacity: .85;
}
.np-sec-booking-drawer__loading small {
	font-size: .9rem;
	opacity: .75;
}
.np-sec-booking-drawer__spinner {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid rgba( 255, 255, 255, .12 );
	border-top-color: var( --np-sec-primary, #1f6feb );
	animation: np-sec-drawer-spin 1s linear infinite;
}
@keyframes np-sec-drawer-spin {
	to { transform: rotate( 360deg ); }
}

/* Scroll-Lock vom Body wenn Drawer offen */
body.np-sec-drawer-locked {
	overflow: hidden;
}

/* Mobile: Bottom-Sheet statt Side-Drawer */
@media ( max-width: 720px ) {
	.np-sec-booking-drawer__panel {
		right: 0;
		left: 0;
		top: auto;
		bottom: 0;
		width: 100%;
		max-height: var( --np-sec-drawer-max-vh, 90vh );
		border-left: 0;
		border-top: 1px solid var( --np-sec-border, #30363d );
		border-radius: 16px 16px 0 0;
		transform: translateY( 100% );
	}
	.np-sec-booking-drawer.is-open .np-sec-booking-drawer__panel {
		transform: translateY( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.np-sec-booking-drawer,
	.np-sec-booking-drawer__panel {
		transition: none;
	}
	.np-sec-booking-drawer__spinner {
		animation: none;
		border-top-color: transparent;
		border-right-color: var( --np-sec-primary, #1f6feb );
	}
}

/* =================================================================
 * V1.46: Rivalry-Badge — Nemesis im Player-Modal + Rivalry-Tag im Battle-Log
 * ================================================================= */

/* Nemesis-Section im Player-Modal */
.np-sec-pmodal-nemesis {
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-sec-nemesis-color, #ef4444 ) 22%, transparent ),
		rgba( 0, 0, 0, .35 )
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-nemesis-color, #ef4444 ) 45%, var( --np-sec-border ) );
	border-radius: 12px;
	padding: 14px 16px;
	margin-top: 14px;
	position: relative;
	overflow: hidden;
}
.np-sec-pmodal-nemesis::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		var( --np-sec-nemesis-color, #ef4444 ) 40%,
		var( --np-sec-nemesis-color, #ef4444 ) 60%,
		transparent
	);
	animation: np-sec-nemesis-pulse 3.6s ease-in-out infinite;
}
@keyframes np-sec-nemesis-pulse {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1; }
}
.np-sec-pmodal-nemesis .np-sec-pmodal-section-title {
	color: var( --np-sec-nemesis-color, #ef4444 );
	margin: 0 0 8px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .85rem;
}
.np-sec-pmodal-nemesis-card strong {
	display: block;
	color: var( --np-sec-fg );
	font-size: 1.1rem;
	cursor: pointer;
}
.np-sec-pmodal-nemesis-card small {
	display: block;
	opacity: .8;
	font-size: .85rem;
	margin-top: 2px;
}
.np-sec-pmodal-nemesis-score {
	margin: 10px 0 4px;
}
.np-sec-pmodal-nemesis-h2h {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 14px;
	background: rgba( 0, 0, 0, .35 );
	border-radius: 10px;
	border: 1px solid color-mix( in srgb, var( --np-sec-nemesis-color, #ef4444 ) 35%, var( --np-sec-border ) );
}
.np-sec-pmodal-nemesis-h2h b {
	font-size: 1.4rem;
	font-weight: 800;
	color: var( --np-sec-fg );
	letter-spacing: .04em;
}
.np-sec-pmodal-nemesis-h2h small {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .7;
}
.np-sec-pmodal-nemesis-last {
	margin: 6px 0 0;
	font-size: .8rem;
	opacity: .68;
	font-style: italic;
}

/* Rivalry-Tag im Battle-Log */
.np-sec-battle-rivalry-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	background: linear-gradient(
		135deg,
		rgba( 239, 68, 68, .25 ),
		rgba( 251, 113, 36, .20 )
	);
	border: 1px solid rgba( 239, 68, 68, .45 );
	color: #fca5a5;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-left: 6px;
}

.np-sec-battle.is-rivalry {
	border-left: 4px solid #ef4444;
	background: linear-gradient(
		90deg,
		rgba( 239, 68, 68, .07 ) 0%,
		transparent 60%
	);
}

@media ( prefers-reduced-motion: reduce ) {
	.np-sec-pmodal-nemesis::before {
		animation: none;
		opacity: .65;
	}
}

/* =================================================================
 * V1.46.4: Player-Avatar als WP-User-Image
 * Wenn .np-sec-avatar > <img> enthält: rund croppen + object-fit cover.
 * Wenn .is-emoji-fallback: Emoji im Color-Background centered.
 * ================================================================= */
.np-sec-avatar.has-photo {
	overflow: hidden;
	background: #1a1f29;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.np-sec-avatar.has-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.np-sec-avatar.is-emoji-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, .55 );
	font-size: 1.1em;
	line-height: 1;
}

/* Spezial-Sizing für Hall of Fame Icons + Player-Modal-Avatar */
.np-sec-hof-icon.np-sec-avatar {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}
.np-sec-pmodal-avatar.np-sec-avatar {
	width: 64px;
	height: 64px;
	font-size: 1.4em;
}

/* =================================================================
 * V1.46.7: Eigener `--inline`-Block ENTFERNT — Cluster-Page nutzt jetzt
 * den bestehenden Master-Nav-Renderer (ux.css). Inline-Variante hat nur
 * noch ein paar Margin-Overrides damit's im App-Bar-Header sauber sitzt
 * (siehe `.np-sec-master-nav-inline` in ux.css).
 * ================================================================= */

/* =================================================================
 * V1.47: Trading-Card-Modal + Showcase-Page + Pin-UI + Privacy-Card
 * ================================================================= */

/* ---------- Card-Share-Modal ---------- */
.np-sec-card-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, .82 );
	backdrop-filter: blur( 8px );
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .25s ease;
	padding: 16px;
}
.np-sec-card-modal-overlay.is-open { opacity: 1; }

.np-sec-card-modal {
	background: linear-gradient( 145deg, #1a1325 0%, #0e1320 100% );
	border: 1px solid rgba( 138, 92, 246, .35 );
	border-radius: 18px;
	padding: 28px 24px;
	max-width: 480px;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 24px 64px rgba( 0, 0, 0, .6 ), 0 0 80px rgba( 138, 92, 246, .15 );
	color: #f4f4f5;
}
/* V1.48: Card-Modal V2 — Center-Layout für 3D-Card */
.np-sec-card-modal--v2 { text-align: center; }
.np-sec-card-modal--v2 .np-sec-card-modal-title,
.np-sec-card-modal--v2 .np-sec-card-modal-sub { text-align: center; }
.np-sec-card-modal--v2 .np-sec-card-mount { display: flex; justify-content: center; }
.np-sec-card-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba( 255, 255, 255, .06 );
	color: #fff;
	border: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	transition: background .15s;
}
.np-sec-card-modal-close:hover { background: rgba( 220, 38, 38, .3 ); }

.np-sec-card-modal-title {
	margin: 0 0 6px 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}
.np-sec-card-modal-sub {
	margin: 0 0 18px 0;
	color: rgba( 244, 244, 245, .7 );
	font-size: 14px;
}

/* V1.48: Card-Mount (Container für die 3D-HTML-Card im Modal) */
.np-sec-card-mount {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	margin: 14px 0 18px;
}
.np-sec-card-skeleton {
	color: rgba( 244, 244, 245, .55 );
	font-size: 14px;
	padding: 24px;
}

/* ────────────────────────────────────────────────
   V1.48: 3D Flip + Tilt
──────────────────────────────────────────────── */
.np-sec-card-flip-wrap {
	perspective: 1200px;
	/* V1.51.3: Card-Höhe reduziert auf 480 (vorher 600). Talente sind nur noch
	 * auf der Rückseite — Vorderseite ist kompakter, 6 Stats in 3×2 Grid füllen
	 * sinnvoll. Back-Card-Inhalt (Liga-Stand + Talent-Chips) passt durch
	 * kompakteren Talent-Block weiterhin. */
	width: 300px;
	height: 480px;
	max-width: 100%;
}
.np-sec-card-flip {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .75s cubic-bezier( .4, 0, .2, 1 );
	cursor: pointer;
}
.np-sec-card-flip.is-flipped { transform: rotateY( 180deg ); }
.np-sec-card-face,
.np-sec-card-back-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.np-sec-card-back-face { transform: rotateY( 180deg ); }

/* ────────────────────────────────────────────────
   Card Base + Tier-Varianten
──────────────────────────────────────────────── */
.np-sec-card {
	--tc:      #B87333;
	--tc-glow: rgba( 184, 115, 51, .35 );
	--fc:      #8a5cf6;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	box-shadow:
		0 0 0 2.5px var( --tc ),
		0 0 24px var( --tc-glow ),
		0 12px 40px rgba( 0, 0, 0, .6 );
	width: 100%;
	height: 100%;
}
.np-sec-card--initiate { --tc: #C8863A; --tc-glow: rgba( 200, 134, 58, .3 ); }
.np-sec-card--veteran  { --tc: #A8B8C8; --tc-glow: rgba( 168, 184, 200, .25 ); }
.np-sec-card--champion { --tc: #E8C040; --tc-glow: rgba( 232, 192, 64, .35 ); }
.np-sec-card--legend   { --tc: #9B6FFF; --tc-glow: rgba( 155, 111, 255, .4 ); }

/* Wuppertal-Background-SVG-Container */
.np-sec-card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.np-sec-card-bg svg,
.np-sec-card-bg img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center center;
}
/* V1.48.1: Echte Foto-Karte (Wuppertal-Warhammer-Style) — etwas kontrastreicher */
.np-sec-card-bg--photo img {
	filter: saturate( 1.05 ) contrast( 1.08 );
}
/* V1.48.2: Foto-BG braucht KRÄFTIGEREN Dark-Overlay damit Stadtteil-Labels nicht durchschimmern */
.np-sec-card-bg--photo::after {
	background: linear-gradient(
		160deg,
		rgba( 0, 0, 0, .55 )  0%,
		rgba( 0, 0, 0, .68 ) 45%,
		rgba( 0, 0, 0, .82 ) 100%
	) !important;
}
/* Sigil bei Foto-BG ausblenden — geht im Foto eh unter */
.np-sec-card:has( .np-sec-card-bg--photo ) .np-sec-card-sigil { display: none; }
/* Fallback für Browser ohne :has() — JS setzt zusätzliche Klasse */
.np-sec-card--has-photo .np-sec-card-sigil { display: none; }
.np-sec-card-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.np-sec-card--initiate .np-sec-card-bg::after { background: linear-gradient( to bottom, rgba( 20, 10, 0, .15 ) 0%, rgba( 15, 8, 0, .42 ) 35%, rgba( 10, 5, 0, .78 ) 60%, rgba( 5, 2, 0, .95 ) 100% ); }
.np-sec-card--veteran  .np-sec-card-bg::after { background: linear-gradient( to bottom, rgba( 5, 10, 18, .15 ) 0%, rgba( 4, 8, 16, .42 ) 35%, rgba( 3, 6, 12, .78 ) 60%, rgba( 2, 4, 8, .95 )  100% ); }
.np-sec-card--champion .np-sec-card-bg::after { background: linear-gradient( to bottom, rgba( 20, 15, 0, .15 ) 0%, rgba( 15, 10, 0, .42 ) 35%, rgba( 10, 7, 0, .78 ) 60%, rgba( 5, 3, 0, .95 ) 100% ); }
.np-sec-card--legend   .np-sec-card-bg::after { background: linear-gradient( to bottom, rgba( 12, 5, 30, .15 ) 0%, rgba( 8, 3, 22, .42 ) 35%, rgba( 6, 2, 18, .78 ) 60%, rgba( 4, 1, 14, .96 ) 100% ); }

/* Rückseite — viel dunkler */
.np-sec-card-back-face .np-sec-card--initiate .np-sec-card-bg::after { background: linear-gradient( 160deg, rgba( 40, 18, 0, .84 ) 0%, rgba( 8, 4, 0, .94 ) 100% ) !important; }
.np-sec-card-back-face .np-sec-card--veteran  .np-sec-card-bg::after { background: linear-gradient( 160deg, rgba( 8, 14, 22, .84 ) 0%, rgba( 2, 5, 10, .94 ) 100% ) !important; }
.np-sec-card-back-face .np-sec-card--champion .np-sec-card-bg::after { background: linear-gradient( 160deg, rgba( 36, 26, 0, .84 ) 0%, rgba( 6, 4, 0, .94 ) 100% )  !important; }
.np-sec-card-back-face .np-sec-card--legend   .np-sec-card-bg::after { background: linear-gradient( 160deg, rgba( 14, 6, 36, .86 ) 0%, rgba( 4, 0, 14, .96 ) 100% ) !important; }

/* Sigil-Wasserzeichen */
.np-sec-card-sigil {
	position: absolute;
	right: -36px;
	bottom: -28px;
	width: 220px;
	height: 220px;
	opacity: .08;
	z-index: 1;
	pointer-events: none;
}
.np-sec-card--legend .np-sec-card-sigil { opacity: .14; }
.np-sec-card-sigil svg { width: 100%; height: 100%; }

/* Diagonale Linien-Textur */
.np-sec-card-lines {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient( -45deg, transparent, transparent 18px, rgba( 255, 255, 255, .015 ) 18px, rgba( 255, 255, 255, .015 ) 19px );
	z-index: 1;
	pointer-events: none;
}

/* Tier-Stripe oben */
.np-sec-card-stripe {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var( --tc );
	z-index: 3;
	box-shadow: 0 0 12px var( --tc-glow );
}
.np-sec-card--legend .np-sec-card-stripe {
	background: linear-gradient( 90deg, #FF5C7A, #9B6FFF, #43D17A, #9B6FFF, #FF5C7A );
	background-size: 200% 100%;
	animation: np-sec-stripe-flow 4s linear infinite;
}
@keyframes np-sec-stripe-flow { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }

/* Holo-Foil (Legend) */
.np-sec-card-foil {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	border-radius: 14px;
}
.np-sec-card--legend .np-sec-card-foil {
	background: linear-gradient( 125deg,
		rgba( 255, 92, 122, 0 )      0%,
		rgba( 255, 92, 122, .28 )   15%,
		rgba( 255, 220, 80, .22 )   28%,
		rgba( 67, 209, 122, .25 )   42%,
		rgba( 80, 180, 255, .22 )   56%,
		rgba( 155, 111, 255, .30 )  70%,
		rgba( 255, 92, 122, .22 )   85%,
		rgba( 255, 92, 122, 0 )    100% );
	background-size: 400% 400%;
	animation: np-sec-foil 4s ease-in-out infinite;
	opacity: 1;
	mix-blend-mode: screen;
}
.np-sec-card--legend .np-sec-card-foil::after {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient( 45deg, transparent, transparent 8px, rgba( 255, 255, 255, .04 ) 8px, rgba( 255, 255, 255, .04 ) 9px );
	border-radius: 14px;
	animation: np-sec-foil-lines 3s linear infinite;
}
@keyframes np-sec-foil { 0% { background-position: 0% 30%; } 33% { background-position: 100% 70%; } 66% { background-position: 50% 0%; } 100% { background-position: 0% 30%; } }
@keyframes np-sec-foil-lines { 0% { background-position: 0px 0px; } 100% { background-position: 40px 40px; } }

/* Shine (Silber + Gold) */
.np-sec-card-shine {
	position: absolute;
	inset: 0;
	z-index: 7;
	pointer-events: none;
	border-radius: 14px;
	overflow: hidden;
}
.np-sec-card-shine::after {
	content: '';
	position: absolute;
	top: -100%;
	left: -80%;
	width: 32%;
	height: 300%;
	transform: skewX( -12deg );
}
.np-sec-card--veteran  .np-sec-card-shine::after { background: linear-gradient( 105deg, transparent, rgba( 168, 200, 230, .10 ) 28%, rgba( 210, 230, 255, .38 ) 50%, rgba( 168, 200, 230, .10 ) 72%, transparent ); }
.np-sec-card--champion .np-sec-card-shine::after { background: linear-gradient( 105deg, transparent, rgba( 232, 192, 64, .12 )  28%, rgba( 255, 220, 80, .40 )  50%, rgba( 232, 192, 64, .12 )  72%, transparent ); }
.np-sec-card-flip-wrap:hover .np-sec-card--veteran  .np-sec-card-shine::after,
.np-sec-card-flip-wrap:hover .np-sec-card--champion .np-sec-card-shine::after {
	animation: np-sec-shine-sweep .75s ease-in-out 2;
}
@keyframes np-sec-shine-sweep { 0% { left: -80%; } 100% { left: 140%; } }

/* Card-Inner-Layout (Vorderseite) */
.np-sec-card-inner {
	position: relative;
	z-index: 4;
	padding: 18px 16px 14px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.np-sec-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.np-sec-card-logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	flex: 1;
	min-width: 0;
}
.np-sec-card-eyebrow {
	font-family: 'Inter', sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --fc );
	opacity: .85;
	text-shadow: 0 0 6px var( --fc ), 0 1px 3px rgba( 0, 0, 0, .85 );
}
.np-sec-card-campaign-name {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	letter-spacing: 0.02em;
	text-shadow: 0 0 22px var( --tc ), 0 0 7px var( --tc ), 0 1px 6px rgba( 0, 0, 0, .95 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* V1.48.2: lange Kampagnen-Namen kleiner */
.np-sec-card-campaign-name--long { font-size: 14px; }
/* Sub-Title (nach Em-Dash gesplittet) */
.np-sec-card-campaign-sub {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: 11px;
	font-weight: 600;
	color: rgba( 255, 255, 255, .68 );
	letter-spacing: 0.04em;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, .9 );
	margin-top: -1px;
}
.np-sec-card--legend .np-sec-card-campaign-name {
	background: linear-gradient( 100deg, #FFD6A8 0%, #B89AFF 50%, #FF8FB3 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 24px rgba( 184, 154, 255, .6 );
}
.np-sec-card-tier-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var( --tc );
	box-shadow: 0 0 10px var( --tc-glow );
	margin-top: 4px;
	border: 2px solid rgba( 255, 255, 255, .35 );
	flex-shrink: 0;
}
.np-sec-card-divider {
	height: 1px;
	background: linear-gradient( 90deg, transparent 0%, var( --tc-glow ) 30%, var( --tc-glow ) 70%, transparent 100% );
	margin: 2px 0 4px;
	opacity: .65;
}
/* V1.48.2: Avatar (runder Kreis mit Tier-Color-Glow) */
.np-sec-card-avatar-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 4px 0 2px;
}
.np-sec-card-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var( --tc );
	box-shadow:
		0 0 18px var( --tc-glow ),
		0 0 0 1px rgba( 0, 0, 0, .55 ),
		inset 0 0 0 1px rgba( 0, 0, 0, .4 );
	background: rgba( 0, 0, 0, .5 );
}
.np-sec-card--legend .np-sec-card-avatar {
	border-color: #9B6FFF;
	box-shadow:
		0 0 24px rgba( 155, 111, 255, .55 ),
		0 0 8px rgba( 255, 92, 122, .35 ),
		0 0 0 1px rgba( 0, 0, 0, .55 );
}
.np-sec-card-name {
	font-family: 'Metamorphous', 'Cinzel', serif;
	font-size: 20px;
	color: #fff;
	line-height: 1.2;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, .8 );
	letter-spacing: 0.02em;
}
.np-sec-card-badge-row {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}
.np-sec-card-badge {
	padding: 2px 8px;
	border-radius: 8px;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	background: var( --tc );
	color: #080808;
	box-shadow: 0 0 10px var( --tc-glow );
}
.np-sec-card--legend .np-sec-card-badge {
	background: linear-gradient( 90deg, #FF5C7A, #9B6FFF );
	color: #fff;
}
.np-sec-card-faction-tag {
	background: rgba( 255, 255, 255, .08 );
	border: 1px solid var( --fc );
	color: #fff;
	font-size: 9px;
	padding: 2px 8px;
	border-radius: 7px;
	font-weight: 600;
	box-shadow: 0 0 8px rgba( 138, 92, 246, .2 );
}

/* Stats — V1.48.2: stärkerer Background damit Werte klar lesbar (Foto-BG dahinter) */
.np-sec-card-stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	background: rgba( 8, 6, 20, .72 );
	border: 1px solid rgba( 255, 255, 255, .14 );
	border-radius: 10px;
	padding: 10px 6px;
	gap: 4px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .35 ), 0 4px 14px rgba( 0, 0, 0, .35 );
}
/* V1.51.1: 6 Stats-Tiles in 3 Spalten x 2 Reihen — füllt Front-Card-Höhe sinnvoll */
.np-sec-card-stats.np-sec-card-stats--4col {
	grid-template-columns: repeat( 3, 1fr );
	row-gap: 8px;
}
.np-sec-stat { display: flex; flex-direction: column; align-items: center; }
.np-sec-stat strong {
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 16px;
	color: #fff;
}
.np-sec-stat small {
	font-size: 9px;
	color: #8A94A3;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 1px;
}

/* V1.51.1: Talent-Chips auf Front-Card (zwischen Honor-Bar und Achievements) */
.np-sec-card-front-talents {
	background: rgba( 8, 6, 20, .55 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-radius: 10px;
	padding: 8px 10px;
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
}
.np-sec-card-front-talents-label {
	font-size: 9px;
	color: #8A94A3;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 5px;
	font-weight: 700;
}
.np-sec-card-front-talents-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.np-sec-card-front-talent-chip {
	--tcolor: #8a5cf6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: color-mix( in srgb, var( --tcolor ) 22%, rgba( 0, 0, 0, .35 ) );
	border: 1.5px solid color-mix( in srgb, var( --tcolor ) 70%, transparent );
	box-shadow: 0 0 8px color-mix( in srgb, var( --tcolor ) 40%, transparent );
}
.np-sec-card-front-talent-icon {
	font-size: 14px;
	line-height: 1;
	filter: drop-shadow( 0 0 4px var( --tcolor ) );
}
.np-sec-card-front-talent-more {
	font-size: 11px;
	color: rgba( 255, 255, 255, .65 );
	font-weight: 700;
	padding-left: 4px;
}

/* Honor-/Victory-Progress — V1.48.2: Spur sichtbarer auch bei 0% */
.np-sec-card-honor { display: flex; flex-direction: column; gap: 3px; }
.np-sec-card-honor-bar {
	height: 7px;
	background: rgba( 0, 0, 0, .55 );
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba( 255, 255, 255, .18 );
	box-shadow: inset 0 1px 2px rgba( 0, 0, 0, .5 );
}
.np-sec-card-honor-fill {
	height: 100%;
	border-radius: 4px;
	background: linear-gradient( 90deg, var( --tc ) 0%, rgba( 255, 255, 255, .55 ) 160% );
	box-shadow: 0 0 7px var( --tc );
}
.np-sec-card-honor-text {
	display: flex;
	justify-content: space-between;
	font-size: 8px;
	color: #8A94A3;
	letter-spacing: 0.04em;
}

/* Achievements — V1.48.2: gleiches Backdrop-Pattern wie Stats */
.np-sec-card-achievements {
	background: rgba( 8, 6, 20, .68 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	border-radius: 9px;
	padding: 8px 9px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}
.np-sec-ach-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #8A94A3;
	margin-bottom: 5px;
}
.np-sec-ach-list { display: flex; flex-wrap: wrap; gap: 4px; }
.np-sec-ach {
	background: rgba( 184, 154, 255, .12 );
	border: 1px solid rgba( 184, 154, 255, .22 );
	color: #D8C5FF;
	font-size: 10px;
	padding: 2px 7px;
	border-radius: 7px;
}
.np-sec-ach--pinned {
	background: rgba( 232, 192, 64, .18 );
	border-color: rgba( 232, 192, 64, .55 );
	color: #FFD980;
	box-shadow: 0 0 8px rgba( 232, 192, 64, .25 );
}

/* QR-Bereich — V1.48.2: konsistent mit Stats/Achievement */
.np-sec-card-qr {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba( 8, 6, 20, .72 );
	border: 1px solid rgba( 255, 255, 255, .14 );
	border-radius: 9px;
	padding: 7px 9px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}
.qr-box {
	width: 40px; height: 40px;
	background: #fff;
	border-radius: 4px;
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 1.5px;
	padding: 3px;
}
.qr-box span { background: #111; border-radius: 1px; }
.qr-box span.w { background: #fff; }
.np-sec-qr-info { text-align: right; }
.np-sec-qr-id {
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 11px;
	color: #E8EDF2;
	display: block;
}
.np-sec-qr-domain { font-size: 9px; color: #8A94A3; }

/* Rückseite */
.np-sec-card-back-inner {
	position: relative;
	z-index: 4;
	padding: 16px 15px 13px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.np-sec-back-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 9px;
	border-bottom: 1px solid rgba( 255, 255, 255, .09 );
}
.np-sec-back-logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.np-sec-back-eyebrow {
	font-family: 'Inter', sans-serif;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --fc );
	opacity: .85;
}
.np-sec-back-campaign-name {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 0 8px var( --tc-glow );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}
.np-sec-back-flip-hint {
	font-size: 8px;
	color: rgba( 255, 255, 255, .22 );
	letter-spacing: 0.05em;
}
.np-sec-back-player-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.np-sec-back-name {
	font-family: 'Metamorphous', 'Cinzel', serif;
	font-size: 15px;
	color: #fff;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, .9 );
}
.np-sec-back-section { display: flex; flex-direction: column; gap: 4px; }
.np-sec-back-section-label {
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #8A94A3;
}
.np-sec-back-since { font-size: 11px; color: rgba( 255, 255, 255, .7 ); font-weight: 600; }
.np-sec-back-stat-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}
.np-sec-back-stat {
	background: rgba( 0, 0, 0, .32 );
	border: 1px solid rgba( 255, 255, 255, .07 );
	border-radius: 8px;
	padding: 7px 9px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.np-sec-back-stat strong { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #fff; }
.np-sec-back-stat small { font-size: 8px; color: #8A94A3; text-transform: uppercase; letter-spacing: 0.05em; }
.np-sec-back-quote {
	font-style: italic;
	color: rgba( 255, 255, 255, .65 );
	font-size: 11px;
	padding: 6px 8px;
	background: rgba( 255, 255, 255, .04 );
	border-left: 2px solid var( --fc );
	border-radius: 4px;
	line-height: 1.35;
}
.np-sec-back-faction-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #fff;
}
.np-sec-back-faction-icon { font-size: 18px; }
.np-sec-back-faction-name { font-weight: 600; }
.np-sec-back-custom-title { font-size: 11px; color: #FFD980; font-style: italic; }
.np-sec-back-rivalry { font-size: 11px; color: #FF8E8E; font-weight: 600; }
.np-sec-back-url {
	margin-top: auto;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 8px;
	color: rgba( 255, 255, 255, .25 );
	letter-spacing: 0.06em;
	background: rgba( 255, 255, 255, .03 );
	border: 1px solid rgba( 255, 255, 255, .05 );
	border-radius: 6px;
	padding: 5px 8px;
}
.np-sec-back-stamp {
	position: absolute;
	top: 22%;
	right: 14px;
	transform: rotate( -18deg );
	font-family: 'Inter', sans-serif;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --tc );
	border: 2px solid var( --tc );
	padding: 5px 8px;
	border-radius: 3px;
	opacity: .65;
	box-shadow: 0 0 10px var( --tc-glow ), inset 0 0 4px var( --tc-glow );
	z-index: 5;
	pointer-events: none;
}

/* Modal Actions */
.np-sec-card-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 14px;
}
.np-sec-card-btn {
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, .12 );
	background: rgba( 255, 255, 255, .04 );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: all .15s;
}
.np-sec-card-btn--primary {
	background: linear-gradient( 135deg, #8a5cf6 0%, #6d28d9 100% );
	border-color: transparent;
}
.np-sec-card-btn--primary:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 20px rgba( 138, 92, 246, .4 );
}
.np-sec-card-btn--secondary:hover {
	background: rgba( 255, 255, 255, .08 );
}
.np-sec-card-modal-tip {
	margin-top: 16px;
	font-size: 12px;
	color: rgba( 244, 244, 245, .55 );
	line-height: 1.5;
}
.np-sec-card-flash {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX( -50% );
	background: rgba( 16, 185, 129, .95 );
	color: #fff;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 4px 20px rgba( 16, 185, 129, .4 );
	animation: np-sec-flash-in .25s ease;
}
@keyframes np-sec-flash-in {
	from { opacity: 0; transform: translateX( -50% ) translateY( 10px ); }
	to { opacity: 1; transform: translateX( -50% ) translateY( 0 ); }
}

@media ( max-width: 480px ) {
	.np-sec-card-actions { grid-template-columns: 1fr; }
	/* V1.51.3: kompakter — ratio ≈ 0.62 */
	.np-sec-card-flip-wrap { width: 260px; height: 420px; }
}

/* ============================================================
   V1.50.4 — PNG-Preview inline (Safari/iOS-Fallback)
   ============================================================ */
.np-sec-card-png-preview {
	margin-top: 18px;
	background: rgba( 16, 185, 129, .08 );
	border: 1px solid rgba( 16, 185, 129, .35 );
	border-radius: 12px;
	padding: 14px 16px;
	animation: np-sec-card-png-preview-in .3s ease-out;
}
@keyframes np-sec-card-png-preview-in {
	from { opacity: 0; transform: translateY( -8px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}
.np-sec-card-png-preview-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: #34d399;
	font-size: 14px;
}
.np-sec-card-png-preview-head small {
	color: rgba( 255, 255, 255, .55 );
	font-weight: 400;
}
.np-sec-card-png-preview-close {
	margin-left: auto;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	color: rgba( 255, 255, 255, .65 );
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 11px;
}
.np-sec-card-png-preview-close:hover {
	background: rgba( 255, 255, 255, .15 );
	color: #fff;
}
.np-sec-card-png-preview-hint {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: rgba( 244, 244, 245, .82 );
	line-height: 1.5;
}
.np-sec-card-png-preview-img {
	box-shadow: 0 8px 24px -8px rgba( 0, 0, 0, .55 );
	max-height: 320px;
	width: auto;
}
.np-sec-card-png-preview-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.np-sec-card-png-preview-actions .np-sec-card-btn {
	flex: 1;
	min-width: 140px;
	text-decoration: none;
	text-align: center;
}

/* ---------- Achievement-Pin-Button ---------- */
.np-sec-pin-btn {
	background: transparent;
	border: 1px solid rgba( 255, 255, 255, .12 );
	border-radius: 50%;
	width: 28px;
	height: 28px;
	font-size: 14px;
	cursor: pointer;
	transition: all .15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
	color: rgba( 255, 255, 255, .55 );
}
.np-sec-pin-btn:hover {
	border-color: #fbbf24;
	color: #fbbf24;
	transform: scale( 1.1 );
}
.np-sec-pin-btn.is-pinned {
	background: rgba( 251, 191, 36, .15 );
	border-color: #fbbf24;
	color: #fbbf24;
	box-shadow: 0 0 0 1px #fbbf24, 0 0 12px rgba( 251, 191, 36, .4 );
}

/* ---------- Privacy-Card im My-Faction ---------- */
.np-sec-showcase-privacy-card {
	background: rgba( 138, 92, 246, .08 );
	border: 1px solid rgba( 138, 92, 246, .25 );
	border-radius: 12px;
	padding: 14px 16px;
	margin: 14px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.np-sec-showcase-privacy-card-text {
	font-size: 13px;
	color: rgba( 244, 244, 245, .85 );
	flex: 1;
	min-width: 220px;
}
.np-sec-showcase-privacy-card-text strong { color: #fff; }
.np-sec-showcase-privacy-toggle {
	background: rgba( 16, 185, 129, .2 );
	border: 1px solid rgba( 16, 185, 129, .5 );
	color: #fff;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
	white-space: nowrap;
}
.np-sec-showcase-privacy-toggle[aria-pressed="true"] {
	background: rgba( 100, 116, 139, .2 );
	border-color: rgba( 100, 116, 139, .5 );
}
.np-sec-showcase-privacy-toggle:hover { filter: brightness( 1.15 ); }

/* ---------- Card-Share-Button (im My-Faction Header) ---------- */
.np-sec-card-share-btn {
	background: linear-gradient( 135deg, #8a5cf6 0%, #6d28d9 100% );
	color: #fff;
	border: none;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.np-sec-card-share-btn:hover {
	transform: translateY( -1px );
	box-shadow: 0 8px 24px rgba( 138, 92, 246, .4 );
}

/* ---------- Public-Showcase-Page ---------- */
.np-sec-showcase {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 20px;
}
.np-sec-showcase-hero {
	text-align: center;
	padding: 48px 24px 36px;
	background: linear-gradient( 145deg, rgba( 138, 92, 246, .15 ) 0%, rgba( 14, 18, 32, .85 ) 70% );
	border-radius: 24px;
	border: 1px solid rgba( 138, 92, 246, .3 );
	margin-bottom: 32px;
}
.np-sec-showcase-eyebrow {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba( 168, 130, 255, .9 );
	margin-bottom: 12px;
	font-weight: 600;
}
.np-sec-showcase-title {
	margin: 0 0 12px 0;
	font-size: clamp( 32px, 6vw, 52px );
	font-weight: 800;
	background: linear-gradient( 135deg, #fff 0%, #c4b5fd 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: 1.1;
}
.np-sec-showcase-subtitle {
	font-size: 17px;
	color: rgba( 244, 244, 245, .8 );
	margin: 0 auto 28px;
	max-width: 700px;
	line-height: 1.5;
}
.np-sec-showcase-totals {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 16px;
	max-width: 800px;
	margin: 0 auto;
}
.np-sec-showcase-stat {
	background: rgba( 0, 0, 0, .3 );
	border-radius: 14px;
	padding: 20px 16px;
	border: 1px solid rgba( 255, 255, 255, .08 );
}
.np-sec-showcase-stat-num {
	display: block;
	font-size: 28px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	margin-bottom: 6px;
}
.np-sec-showcase-stat-label {
	font-size: 13px;
	color: rgba( 244, 244, 245, .65 );
	text-transform: uppercase;
	letter-spacing: 1px;
}

.np-sec-showcase-tiles {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 18px;
	margin-bottom: 32px;
}
.np-sec-showcase-tile {
	background: linear-gradient(
		145deg,
		color-mix( in srgb, var( --np-sec-tile-accent, #8a5cf6 ) 12%, transparent ) 0%,
		rgba( 14, 18, 32, .85 ) 100%
	);
	border: 1px solid color-mix( in srgb, var( --np-sec-tile-accent, #8a5cf6 ) 30%, transparent );
	border-radius: 16px;
	padding: 24px;
	text-align: center;
	color: #f4f4f5;
}
.np-sec-showcase-tile-head {
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba( 244, 244, 245, .7 );
	margin-bottom: 16px;
}
.np-sec-showcase-tile-icon {
	font-size: 48px;
	margin-bottom: 12px;
}
.np-sec-showcase-tile-name {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 8px;
}
.np-sec-showcase-tile-stat {
	font-size: 14px;
	color: rgba( 244, 244, 245, .7 );
}

.np-sec-showcase-cta {
	background: linear-gradient( 135deg, rgba( 109, 40, 217, .25 ) 0%, rgba( 14, 18, 32, .85 ) 100% );
	border: 1px solid rgba( 168, 130, 255, .35 );
	border-radius: 20px;
	padding: 36px 28px;
	text-align: center;
}
.np-sec-showcase-cta h3 {
	margin: 0 0 8px 0;
	font-size: 24px;
	color: #fff;
}
.np-sec-showcase-cta p {
	color: rgba( 244, 244, 245, .8 );
	margin: 0 0 24px 0;
	font-size: 15px;
}
.np-sec-showcase-cta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
.np-sec-showcase-cta-btn {
	background: rgba( 255, 255, 255, .08 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, .2 );
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: all .15s;
}
.np-sec-showcase-cta-btn:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 28px rgba( 0, 0, 0, .5 );
}
.np-sec-showcase-cta-btn--quiz {
	background: linear-gradient( 135deg, #8a5cf6 0%, #6d28d9 100% );
	border-color: transparent;
}
.np-sec-showcase-cta-btn--booking {
	background: linear-gradient( 135deg, #10b981 0%, #059669 100% );
	border-color: transparent;
}

/* =================================================================
 * V1.49.0: Saison-Countdown + Bell-Active-State + Live-Event-Banner
 * ================================================================= */

/* ── Saison-Countdown im Header (Meta-Stripe) ── */
.np-sec-season-countdown {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 12px;
	padding: 3px 10px;
	background: rgba( 138, 92, 246, .12 );
	border: 1px solid rgba( 138, 92, 246, .35 );
	color: #c4b5fd;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.np-sec-season-countdown .np-sec-countdown-icon {
	font-size: 12px;
	line-height: 1;
}
/* Urgent (≤ 7 Tage) — rot + pulse */
.np-sec-season-countdown--urgent {
	background: rgba( 220, 38, 38, .18 );
	border-color: rgba( 220, 38, 38, .55 );
	color: #fecaca;
	animation: np-sec-countdown-pulse 2s ease-in-out infinite;
}
@keyframes np-sec-countdown-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 220, 38, 38, .35 ); }
	50%      { box-shadow: 0 0 0 6px rgba( 220, 38, 38, 0 ); }
}

/* ── Bell-Active-State-Glow (Push-Notifications) ── */
.np-sec-pushnotif-btn[aria-pressed="true"] {
	background: rgba( 34, 197, 94, .22 );
	border-color: rgba( 34, 197, 94, .65 );
	box-shadow:
		0 0 0 1px rgba( 34, 197, 94, .55 ),
		0 0 14px rgba( 34, 197, 94, .35 );
}
.np-sec-pushnotif-btn[aria-pressed="true"]::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1px solid rgba( 34, 197, 94, .35 );
	pointer-events: none;
	animation: np-sec-bell-ring 2.4s ease-in-out infinite;
}
.np-sec-pushnotif-btn[aria-pressed="true"] [data-np-sec-pushnotif-icon]::before {
	/* Icon-Override: durchgestrichene Bell → klingelnde Bell */
	content: '🔔';
}
.np-sec-pushnotif-btn[aria-pressed="true"] [data-np-sec-pushnotif-icon] {
	font-size: 0; /* nur das ::before-Emoji zeigen */
}
@keyframes np-sec-bell-ring {
	0%, 100% { transform: scale( 1 ); opacity: .8; }
	50%      { transform: scale( 1.15 ); opacity: 0; }
}

/* ── Live-Event-Banner ── */
.np-sec-event-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 18px;
	background: linear-gradient( 90deg, #7c2d12 0%, #b91c1c 50%, #7c2d12 100% );
	background-size: 200% 100%;
	border-radius: 14px 14px 0 0;
	color: #fff;
	font-size: 13px;
	box-shadow: 0 4px 18px rgba( 185, 28, 28, .35 ), inset 0 1px 0 rgba( 255, 255, 255, .15 );
	margin: 0 0 -2px;
	position: relative;
	animation: np-sec-event-shimmer 6s ease-in-out infinite;
}
@keyframes np-sec-event-shimmer {
	0%, 100% { background-position:   0% 50%; }
	50%      { background-position: 100% 50%; }
}
.np-sec-event-banner-icon {
	font-size: 28px;
	line-height: 1;
	filter: drop-shadow( 0 0 8px rgba( 255, 165, 0, .8 ) );
	animation: np-sec-event-bounce 1.6s ease-in-out infinite;
}
@keyframes np-sec-event-bounce {
	0%, 100% { transform: translateY( 0 ) scale( 1 ); }
	50%      { transform: translateY( -3px ) scale( 1.08 ); }
}
.np-sec-event-banner-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.np-sec-event-banner-name {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: 15px;
	letter-spacing: 0.03em;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, .6 );
}
.np-sec-event-banner-meta {
	font-size: 11px;
	color: rgba( 255, 255, 255, .85 );
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.np-sec-event-banner-badge {
	background: rgba( 255, 255, 255, .15 );
	border: 1px solid rgba( 255, 255, 255, .35 );
	color: #fff;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	white-space: nowrap;
	text-transform: uppercase;
}

/* Event-aktive Karte: subtle pulse-glow auf dem ganzen App-Bar */
.np-sec-app-bar--event-active {
	box-shadow:
		0 0 0 1px rgba( 220, 38, 38, .25 ),
		0 0 36px rgba( 220, 38, 38, .15 );
}

@media ( max-width: 640px ) {
	.np-sec-event-banner { padding: 8px 12px; gap: 10px; }
	.np-sec-event-banner-icon { font-size: 22px; }
	.np-sec-event-banner-name { font-size: 13px; }
	.np-sec-event-banner-badge { font-size: 9px; padding: 3px 8px; }
}

/* =================================================================
 * V1.49.1: Liga-OS-Stand — Cross-Plugin-Integration
 * (Trading-Card-Rückseite + Player-Modal + My-Faction-Dashboard)
 * ================================================================= */

/* My-Faction-Dashboard */
.np-sec-my-faction-liga {
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --liga-color, #0d9488 ) 22%, transparent ) 0%,
		rgba( 8, 6, 20, .75 ) 100%
	);
	border: 1px solid color-mix( in srgb, var( --liga-color, #0d9488 ) 45%, transparent );
	border-left: 3px solid var( --liga-color, #0d9488 );
	border-radius: 12px;
	padding: 14px 16px;
	margin: 14px 0;
	color: rgba( 244, 244, 245, .92 );
	font-size: 13px;
}
.np-sec-my-faction-liga-head {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --liga-color, #0d9488 );
	margin-bottom: 8px;
	filter: brightness( 1.4 );
}
.np-sec-my-faction-liga-head strong {
	color: #fff;
	font-weight: 700;
}
.np-sec-my-faction-liga-row {
	display: block;
	margin: 4px 0;
	line-height: 1.4;
}
.np-sec-my-faction-liga-stats {
	font-weight: 600;
	color: #fff;
}
.np-sec-my-faction-liga-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: var( --liga-color, #0d9488 );
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
	filter: brightness( 1.4 );
	padding-bottom: 1px;
}
.np-sec-my-faction-liga-link:hover { filter: brightness( 1.8 ); }

/* Player-Modal */
.np-sec-pmodal-liga {
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --liga-color, #0d9488 ) 18%, transparent ) 0%,
		rgba( 8, 6, 20, .65 ) 100%
	);
	border-left: 3px solid var( --liga-color, #0d9488 );
	border-radius: 10px;
	padding: 12px 14px;
}
.np-sec-pmodal-liga .np-sec-pmodal-section-title {
	color: var( --liga-color, #0d9488 );
	filter: brightness( 1.4 );
}
.np-sec-pmodal-liga-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: rgba( 244, 244, 245, .9 );
}
.np-sec-pmodal-liga-level,
.np-sec-pmodal-liga-division,
.np-sec-pmodal-liga-stats {
	display: block;
	line-height: 1.4;
}
.np-sec-pmodal-liga-stats { font-weight: 600; color: #fff; }
.np-sec-pmodal-liga-streak { font-weight: 600; }
.np-sec-pmodal-liga-link {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	color: var( --liga-color, #0d9488 );
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
	filter: brightness( 1.4 );
}

/* Trading-Card-Rückseite */
.np-sec-back-liga {
	border-left: 2px solid var( --liga-color, #0d9488 );
	padding: 6px 9px;
	background: linear-gradient(
		90deg,
		color-mix( in srgb, var( --liga-color, #0d9488 ) 15%, transparent ) 0%,
		rgba( 0, 0, 0, .35 ) 100%
	);
	border-radius: 4px 6px 6px 4px;
}
.np-sec-back-liga .np-sec-back-section-label {
	color: var( --liga-color, #0d9488 );
	filter: brightness( 1.5 );
}
.np-sec-back-liga-row {
	font-size: 10px;
	color: rgba( 255, 255, 255, .8 );
	margin-top: 2px;
}
.np-sec-back-liga-level {
	color: #fff;
	font-weight: 600;
}
.np-sec-back-liga-division {
	font-size: 10px;
	color: rgba( 255, 255, 255, .7 );
	margin-top: 1px;
}
.np-sec-back-liga-stats {
	font-size: 10px;
	color: rgba( 255, 255, 255, .65 );
	font-family: 'JetBrains Mono', monospace;
	margin-top: 2px;
}

/* =================================================================
 * V1.50.0: Talent-Tree
 * ================================================================= */
.np-sec-talent-tree {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 20px;
}
.np-sec-talent-head {
	text-align: center;
	margin-bottom: 28px;
}
.np-sec-talent-title {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: clamp( 24px, 4vw, 36px );
	color: #fff;
	margin: 0 0 8px;
	letter-spacing: 0.04em;
}
.np-sec-talent-sub {
	color: rgba( 244, 244, 245, .7 );
	max-width: 700px;
	margin: 0 auto 18px;
	font-size: 14px;
	line-height: 1.5;
}
.np-sec-talent-points {
	display: inline-flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.np-sec-talent-points-pill {
	background: linear-gradient( 135deg, #fbbf24 0%, #f59e0b 100% );
	color: #1a1325;
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 4px 16px rgba( 251, 191, 36, .35 );
}
.np-sec-talent-points-pill strong { font-size: 18px; }
.np-sec-talent-points-pill--secondary {
	background: rgba( 255, 255, 255, .08 );
	color: rgba( 244, 244, 245, .7 );
	box-shadow: none;
	border: 1px solid rgba( 255, 255, 255, .15 );
}

/* Grid: 4 Branches nebeneinander */
.np-sec-talent-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 16px;
}
@media ( max-width: 900px ) {
	.np-sec-talent-grid { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 540px ) {
	.np-sec-talent-grid { grid-template-columns: 1fr; }
}

.np-sec-talent-branch {
	background: linear-gradient(
		160deg,
		color-mix( in srgb, var( --branch-color, #8a5cf6 ) 12%, transparent ) 0%,
		rgba( 14, 18, 32, .85 ) 100%
	);
	border: 1px solid color-mix( in srgb, var( --branch-color, #8a5cf6 ) 35%, transparent );
	border-top: 3px solid var( --branch-color, #8a5cf6 );
	border-radius: 16px;
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.np-sec-talent-branch-head {
	text-align: center;
	margin-bottom: 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba( 255, 255, 255, .08 );
}
.np-sec-talent-branch-icon {
	display: block;
	font-size: 32px;
	line-height: 1;
	filter: drop-shadow( 0 0 12px var( --branch-color ) );
}
.np-sec-talent-branch-name {
	display: block;
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: 17px;
	color: var( --branch-color );
	margin-top: 4px;
	letter-spacing: 0.04em;
	filter: brightness( 1.3 );
}
.np-sec-talent-branch-desc {
	display: block;
	font-size: 11px;
	color: rgba( 244, 244, 245, .55 );
	margin-top: 4px;
	line-height: 1.35;
}

/* Talent-Card */
.np-sec-talent-card {
	background: rgba( 0, 0, 0, .35 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 10px;
	padding: 12px 8px;
	color: rgba( 244, 244, 245, .82 );
	cursor: pointer;
	position: relative;
	transition: all .2s ease;
	font: inherit;
	text-align: center;
	width: 100%;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.np-sec-talent-card-tier {
	position: absolute;
	top: 6px;
	left: 8px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	color: rgba( 255, 255, 255, .35 );
	letter-spacing: 0.1em;
}
.np-sec-talent-card-state-badge {
	position: absolute;
	top: 6px;
	right: 8px;
	font-size: 14px;
	line-height: 1;
}
.np-sec-talent-card-icon {
	font-size: 26px;
	line-height: 1;
	margin-top: 6px;
}
.np-sec-talent-card-name {
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
}

/* States */
.np-sec-talent-card--chosen {
	background: linear-gradient( 145deg, color-mix( in srgb, var( --branch-color ) 35%, transparent ) 0%, rgba( 8, 6, 20, .8 ) 100% );
	border-color: var( --branch-color );
	box-shadow: 0 0 18px color-mix( in srgb, var( --branch-color ) 40%, transparent );
}
.np-sec-talent-card--chosen .np-sec-talent-card-icon {
	filter: drop-shadow( 0 0 8px var( --branch-color ) );
}
.np-sec-talent-card--chosen .np-sec-talent-card-state-badge {
	color: #43d17a;
}
.np-sec-talent-card--available {
	background: rgba( 251, 191, 36, .1 );
	border-color: rgba( 251, 191, 36, .55 );
	box-shadow: 0 0 10px rgba( 251, 191, 36, .2 );
	animation: np-sec-talent-pulse 2s ease-in-out infinite;
}
.np-sec-talent-card--available .np-sec-talent-card-state-badge {
	color: #fbbf24;
}
.np-sec-talent-card--available:hover {
	background: rgba( 251, 191, 36, .2 );
	transform: translateY( -2px );
	box-shadow: 0 8px 24px rgba( 251, 191, 36, .35 );
}
.np-sec-talent-card--locked {
	opacity: .42;
	cursor: not-allowed;
	filter: grayscale( .7 );
}
/* V1.50.6: Waiting-State — Prerequisite OK, aber kein Punkt verfügbar.
 * Soll nicht abgedimmt wie locked aussehen — mehr „kurz vor Erreichen". */
.np-sec-talent-card--waiting {
	background: rgba( 14, 165, 233, .08 );
	border-color: rgba( 14, 165, 233, .35 );
	box-shadow: 0 0 10px rgba( 14, 165, 233, .12 );
	opacity: .85;
	cursor: help;
	filter: none;
}
.np-sec-talent-card--waiting .np-sec-talent-card-state-badge {
	color: #38bdf8;
	animation: np-sec-talent-waiting-pulse 1.8s ease-in-out infinite;
}
@keyframes np-sec-talent-waiting-pulse {
	0%, 100% { opacity: .55; }
	50%      { opacity: 1; }
}
@keyframes np-sec-talent-pulse {
	0%, 100% { box-shadow: 0 0 10px rgba( 251, 191, 36, .2 ); }
	50%      { box-shadow: 0 0 18px rgba( 251, 191, 36, .45 ); }
}

/* Legende */
.np-sec-talent-legend {
	display: flex;
	gap: 24px;
	justify-content: center;
	margin-top: 24px;
	font-size: 12px;
	color: rgba( 244, 244, 245, .65 );
}
.np-sec-talent-legend-dot {
	display: inline-block;
	width: 10px; height: 10px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
}
.np-sec-talent-legend-dot.is-chosen    { background: #43d17a; box-shadow: 0 0 6px #43d17a; }
.np-sec-talent-legend-dot.is-available { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.np-sec-talent-legend-dot.is-waiting   { background: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
.np-sec-talent-legend-dot.is-locked    { background: rgba( 255, 255, 255, .2 ); }

/* ============================================================
   V1.50.1 — Talent-Aktivierungs-Modal (ersetzt browser-confirm)
   ============================================================ */
.np-sec-talent-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 8, 6, 20, .82 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .25s ease;
}
.np-sec-talent-modal-overlay.is-open {
	opacity: 1;
}
.np-sec-talent-modal {
	--branch-color: #8a5cf6;
	position: relative;
	max-width: 460px;
	width: 100%;
	background: linear-gradient(
		160deg,
		color-mix( in srgb, var( --branch-color ) 25%, #14122a ) 0%,
		#0a081a 70%
	);
	border: 1px solid color-mix( in srgb, var( --branch-color ) 60%, transparent );
	border-top: 4px solid var( --branch-color );
	border-radius: 18px;
	padding: 28px 24px 22px;
	text-align: center;
	box-shadow:
		0 30px 80px -10px rgba( 0, 0, 0, .8 ),
		0 0 40px color-mix( in srgb, var( --branch-color ) 30%, transparent );
	transform: scale( .92 ) translateY( 10px );
	transition: transform .3s cubic-bezier( .22, 1.4, .36, 1 );
}
.np-sec-talent-modal-overlay.is-open .np-sec-talent-modal {
	transform: scale( 1 ) translateY( 0 );
}
.np-sec-talent-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .08 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	color: rgba( 255, 255, 255, .65 );
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.np-sec-talent-modal-close:hover {
	background: rgba( 255, 255, 255, .15 );
	color: #fff;
	transform: rotate( 90deg );
}
.np-sec-talent-modal-tier {
	position: absolute;
	top: 14px;
	left: 18px;
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 11px;
	color: var( --branch-color );
	letter-spacing: 0.14em;
	font-weight: 700;
	filter: brightness( 1.35 );
}
.np-sec-talent-modal-icon {
	font-size: 64px;
	line-height: 1;
	margin: 8px 0 10px;
	filter: drop-shadow( 0 0 22px var( --branch-color ) );
	animation: np-sec-talent-modal-icon-float 3s ease-in-out infinite;
}
@keyframes np-sec-talent-modal-icon-float {
	0%, 100% { transform: translateY( 0 ); }
	50%      { transform: translateY( -6px ); }
}
.np-sec-talent-modal-name {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: 22px;
	color: #fff;
	margin: 0 0 8px;
	letter-spacing: 0.03em;
}
.np-sec-talent-modal-desc {
	color: rgba( 244, 244, 245, .92 );
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
}
.np-sec-talent-modal-tip {
	background: rgba( 255, 255, 255, .05 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-left: 3px solid #fbbf24;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 14px;
	text-align: left;
}
.np-sec-talent-modal-tip-label {
	font-size: 11px;
	color: #fbbf24;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 4px;
}
.np-sec-talent-modal-tip-text {
	margin: 0;
	color: rgba( 244, 244, 245, .92 );
	font-size: 13px;
	line-height: 1.5;
}
.np-sec-talent-modal-warning {
	font-size: 12px;
	color: rgba( 251, 191, 36, .85 );
	background: rgba( 251, 191, 36, .08 );
	border-radius: 6px;
	padding: 8px 12px;
	margin: 0 0 16px;
	line-height: 1.45;
}
.np-sec-talent-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}
.np-sec-talent-modal-btn {
	flex: 1;
	max-width: 200px;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid rgba( 255, 255, 255, .15 );
	transition: all .2s ease;
	font-family: inherit;
}
.np-sec-talent-modal-btn:disabled {
	cursor: wait;
	opacity: .85;
}
.np-sec-talent-modal-btn--cancel {
	background: rgba( 255, 255, 255, .06 );
	color: rgba( 244, 244, 245, .85 );
}
.np-sec-talent-modal-btn--cancel:hover {
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
}
.np-sec-talent-modal-btn--confirm {
	background: linear-gradient( 135deg, var( --branch-color ) 0%, color-mix( in srgb, var( --branch-color ) 65%, #000 ) 100% );
	color: #fff;
	border-color: color-mix( in srgb, var( --branch-color ) 80%, transparent );
	box-shadow: 0 6px 18px color-mix( in srgb, var( --branch-color ) 45%, transparent );
}
.np-sec-talent-modal-btn--confirm:hover:not( :disabled ) {
	transform: translateY( -1px );
	box-shadow: 0 8px 22px color-mix( in srgb, var( --branch-color ) 60%, transparent );
	filter: brightness( 1.1 );
}
@media ( max-width: 520px ) {
	.np-sec-talent-modal {
		padding: 24px 18px 18px;
	}
	.np-sec-talent-modal-icon { font-size: 52px; }
	.np-sec-talent-modal-name { font-size: 19px; }
}

/* ============================================================
   V1.50.1 — Talent-Chips auf Card-Back + Player-Modal
   ============================================================ */
/* Card-Back-Talents (Trading-Card) */
.np-sec-back-talents {
	margin-top: 8px;
}
.np-sec-back-talents-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.np-sec-back-talent-chip {
	--tcolor: #8a5cf6;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: color-mix( in srgb, var( --tcolor ) 18%, rgba( 0, 0, 0, .35 ) );
	border: 1px solid color-mix( in srgb, var( --tcolor ) 65%, transparent );
	color: #fff;
	padding: 3px 7px;
	border-radius: 999px;
	font-size: 9px;
	line-height: 1.1;
	box-shadow: 0 0 8px color-mix( in srgb, var( --tcolor ) 30%, transparent );
}
.np-sec-back-talent-icon {
	font-size: 11px;
	filter: drop-shadow( 0 0 4px var( --tcolor ) );
}
.np-sec-back-talent-name {
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Player-Modal-Talents */
.np-sec-pmodal-talents {
	margin-top: 12px;
}
.np-sec-pmodal-talents-count {
	color: rgba( 255, 255, 255, .55 );
	font-weight: 500;
	font-size: 13px;
	margin-left: 4px;
}
.np-sec-pmodal-talent-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.np-sec-pmodal-talent-chip {
	--tcolor: #8a5cf6;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: color-mix( in srgb, var( --tcolor ) 18%, rgba( 0, 0, 0, .4 ) );
	border: 1px solid color-mix( in srgb, var( --tcolor ) 60%, transparent );
	color: #fff;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.2;
	box-shadow: 0 0 10px color-mix( in srgb, var( --tcolor ) 25%, transparent );
	cursor: help;
	transition: transform .15s ease, box-shadow .15s ease;
}
.np-sec-pmodal-talent-chip:hover {
	transform: translateY( -1px );
	box-shadow: 0 4px 16px color-mix( in srgb, var( --tcolor ) 45%, transparent );
}
.np-sec-pmodal-talent-icon {
	font-size: 15px;
	line-height: 1;
	filter: drop-shadow( 0 0 4px var( --tcolor ) );
}
.np-sec-pmodal-talent-name {
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ============================================================
   V1.50.1 — Talent-Tree Inline-Guide
   ============================================================ */
.np-sec-talent-guide {
	background: linear-gradient( 145deg, rgba( 138, 92, 246, .08 ) 0%, rgba( 14, 18, 32, .85 ) 100% );
	border: 1px solid rgba( 138, 92, 246, .25 );
	border-radius: 14px;
	margin: 0 0 24px;
	overflow: hidden;
}
.np-sec-talent-guide-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: transparent;
	border: 0;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 18px;
	cursor: pointer;
	text-align: left;
	transition: background .15s ease;
}
.np-sec-talent-guide-toggle:hover {
	background: rgba( 255, 255, 255, .04 );
}
.np-sec-talent-guide-icon { font-size: 20px; }
.np-sec-talent-guide-chev {
	margin-left: auto;
	transition: transform .25s ease;
	font-size: 14px;
	color: rgba( 255, 255, 255, .55 );
}
.np-sec-talent-guide-toggle[aria-expanded="false"] .np-sec-talent-guide-chev {
	transform: rotate( -90deg );
}
.np-sec-talent-guide-body {
	max-height: 600px;
	overflow: hidden;
	transition: max-height .35s ease, padding .25s ease, opacity .25s ease;
	padding: 0 18px 18px;
}
.np-sec-talent-guide-body.is-collapsed {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}
.np-sec-talent-guide-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media ( max-width: 700px ) {
	.np-sec-talent-guide-steps { grid-template-columns: 1fr; }
}
.np-sec-talent-guide-step {
	display: flex;
	gap: 12px;
	background: rgba( 255, 255, 255, .03 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 10px;
	padding: 12px 14px;
}
.np-sec-talent-guide-step-num {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient( 135deg, #8a5cf6 0%, #6d28d9 100% );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	box-shadow: 0 4px 12px rgba( 138, 92, 246, .35 );
}
.np-sec-talent-guide-step strong {
	color: #fff;
	font-size: 14px;
	display: block;
	margin-bottom: 3px;
}
.np-sec-talent-guide-step p {
	margin: 0;
	color: rgba( 244, 244, 245, .78 );
	font-size: 12.5px;
	line-height: 1.5;
}

/* ============================================================
   V1.50.1 — Tree-Verbindungslinien
   ============================================================ */
.np-sec-talent-branch-tree {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.np-sec-talent-branch-line {
	position: absolute;
	left: 50%;
	top: 8px;
	bottom: 8px;
	width: 4px;
	height: calc( 100% - 16px );
	transform: translateX( -50% );
	pointer-events: none;
	color: color-mix( in srgb, var( --branch-color, #8a5cf6 ) 38%, transparent );
	z-index: 0;
}
.np-sec-talent-branch-tree .np-sec-talent-card {
	position: relative;
	z-index: 1;
}

/* ============================================================
   V1.50.1 — Reset-CTA-Section
   ============================================================ */
.np-sec-talent-reset-section {
	margin-top: 28px;
	text-align: center;
}
.np-sec-talent-reset-card {
	max-width: 640px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: center;
	background: linear-gradient( 145deg, rgba( 245, 158, 11, .12 ) 0%, rgba( 14, 18, 32, .85 ) 100% );
	border: 1px solid rgba( 245, 158, 11, .35 );
	border-left: 4px solid #f59e0b;
	border-radius: 14px;
	padding: 16px 18px;
}
@media ( max-width: 600px ) {
	.np-sec-talent-reset-card { grid-template-columns: 1fr; text-align: left; }
}
.np-sec-talent-reset-icon {
	font-size: 32px;
	line-height: 1;
	filter: drop-shadow( 0 0 12px rgba( 245, 158, 11, .55 ) );
}
.np-sec-talent-reset-text { text-align: left; }
.np-sec-talent-reset-text strong {
	color: #fff;
	font-size: 15px;
	display: block;
	margin-bottom: 3px;
}
.np-sec-talent-reset-text p {
	margin: 0;
	color: rgba( 244, 244, 245, .8 );
	font-size: 13px;
	line-height: 1.4;
}
.np-sec-talent-reset-btn {
	background: linear-gradient( 135deg, #f59e0b 0%, #d97706 100% );
	color: #1a1325;
	font-weight: 700;
	border: 0;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba( 245, 158, 11, .35 );
	transition: all .2s ease;
	white-space: nowrap;
}
.np-sec-talent-reset-btn:hover:not(:disabled) {
	transform: translateY( -1px );
	box-shadow: 0 10px 24px rgba( 245, 158, 11, .5 );
	filter: brightness( 1.08 );
}
.np-sec-talent-reset-btn:disabled {
	background: rgba( 255, 255, 255, .06 );
	color: rgba( 244, 244, 245, .45 );
	box-shadow: none;
	cursor: not-allowed;
}
.np-sec-talent-reset-honor {
	display: block;
	color: rgba( 244, 244, 245, .55 );
	font-size: 12px;
	margin-top: 10px;
}

/* ============================================================
   V1.51.2 — Talent-Boards (Hall-of-Fame) Visual Redesign
   ============================================================ */
.np-sec-talent-boards {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px 60px;
}

/* HERO */
.np-sec-tboard-hero {
	position: relative;
	text-align: center;
	padding: 40px 20px 32px;
	margin-bottom: 28px;
	background: linear-gradient( 145deg, rgba( 245, 158, 11, .12 ) 0%, rgba( 14, 18, 32, .85 ) 70% );
	border: 1px solid rgba( 245, 158, 11, .25 );
	border-radius: 18px;
	overflow: hidden;
}
.np-sec-tboard-hero-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: flex; align-items: center; justify-content: center;
}
.np-sec-tboard-hero-medal {
	position: absolute;
	font-size: 200px;
	opacity: .07;
	transform: translateY( -10%);
	filter: drop-shadow( 0 0 40px rgba( 245, 158, 11, .8 ) );
	animation: np-sec-tboard-medal-float 6s ease-in-out infinite;
}
.np-sec-tboard-hero-glow {
	position: absolute;
	width: 400px; height: 400px;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 245, 158, 11, .25 ) 0%, transparent 65% );
	filter: blur( 30px );
}
@keyframes np-sec-tboard-medal-float {
	0%, 100% { transform: translateY( -10% ) rotate( -5deg ); }
	50%      { transform: translateY( -14% ) rotate( 5deg ); }
}
.np-sec-tboard-hero-title {
	position: relative;
	z-index: 1;
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: clamp( 26px, 4vw, 40px );
	color: #fff;
	margin: 0 0 10px;
	letter-spacing: 0.04em;
	text-shadow: 0 4px 20px rgba( 245, 158, 11, .35 );
}
.np-sec-tboard-hero-sub {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin: 0 auto 24px;
	color: rgba( 244, 244, 245, .85 );
	font-size: 14.5px;
	line-height: 1.55;
}
.np-sec-tboard-hero-stats {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
.np-sec-tboard-hero-stat {
	background: rgba( 8, 6, 20, .55 );
	border: 1px solid rgba( 245, 158, 11, .3 );
	border-radius: 12px;
	padding: 12px 22px;
	min-width: 120px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}
.np-sec-tboard-hero-stat strong {
	display: block;
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 24px;
	color: #fbbf24;
}
.np-sec-tboard-hero-stat small {
	display: block;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba( 244, 244, 245, .7 );
	margin-top: 4px;
}

/* CONTROLS — Search + Branch-Tabs */
.np-sec-tboard-controls {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 28px;
	padding: 14px 16px;
	background: rgba( 14, 18, 32, .55 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 14px;
}
.np-sec-tboard-search {
	flex: 1;
	min-width: 200px;
	padding: 10px 14px;
	background: rgba( 8, 6, 20, .7 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
}
.np-sec-tboard-search:focus {
	outline: none;
	border-color: rgba( 245, 158, 11, .55 );
	box-shadow: 0 0 0 3px rgba( 245, 158, 11, .15 );
}
.np-sec-tboard-branch-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.np-sec-tboard-branch-tab {
	background: rgba( 255, 255, 255, .05 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	color: rgba( 244, 244, 245, .8 );
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	cursor: pointer;
	font: inherit;
	font-weight: 500;
	transition: all .15s ease;
}
.np-sec-tboard-branch-tab:hover {
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
}
.np-sec-tboard-branch-tab.is-active {
	background: linear-gradient( 135deg, var( --branch-color, #8a5cf6 ) 0%, color-mix( in srgb, var( --branch-color, #8a5cf6 ) 65%, #000 ) 100% );
	color: #fff;
	border-color: var( --branch-color, #8a5cf6 );
	box-shadow: 0 4px 14px color-mix( in srgb, var( --branch-color, #8a5cf6 ) 35%, transparent );
	font-weight: 700;
}

/* BRANCH SECTIONS */
.np-sec-tboard-branch {
	margin-bottom: 32px;
}
.np-sec-tboard-branch.is-hidden {
	display: none;
}
.np-sec-tboard-branch-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	padding: 16px 20px;
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --branch-color, #8a5cf6 ) 22%, rgba( 14, 18, 32, .85 ) ) 0%,
		rgba( 14, 18, 32, .9 ) 80%
	);
	border-left: 4px solid var( --branch-color, #8a5cf6 );
	border-radius: 14px;
	box-shadow: 0 6px 20px -8px color-mix( in srgb, var( --branch-color, #8a5cf6 ) 35%, transparent );
}
.np-sec-tboard-branch-icon {
	font-size: 40px;
	line-height: 1;
	filter: drop-shadow( 0 0 14px var( --branch-color, #8a5cf6 ) );
}
.np-sec-tboard-branch-meta {
	flex: 1;
}
.np-sec-tboard-branch-name {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: 22px;
	color: #fff;
	margin: 0 0 4px;
	letter-spacing: 0.04em;
}
.np-sec-tboard-branch-desc {
	margin: 0;
	color: rgba( 244, 244, 245, .72 );
	font-size: 13px;
}

/* CARD GRID */
.np-sec-tboard-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
	gap: 14px;
}

/* TALENT-CARD */
.np-sec-tboard-card {
	--card-color: #8a5cf6;
	position: relative;
	background: linear-gradient(
		160deg,
		color-mix( in srgb, var( --card-color ) 14%, rgba( 14, 18, 32, .92 ) ) 0%,
		rgba( 6, 8, 18, .96 ) 100%
	);
	border: 1px solid color-mix( in srgb, var( --card-color ) 30%, rgba( 255, 255, 255, .08 ) );
	border-top: 3px solid var( --card-color );
	border-radius: 14px;
	padding: 16px 16px 14px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	overflow: hidden;
}
.np-sec-tboard-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 12px 32px -8px color-mix( in srgb, var( --card-color ) 45%, transparent );
	border-color: color-mix( in srgb, var( --card-color ) 60%, transparent );
}
.np-sec-tboard-card.is-mastered::before {
	content: '⭐';
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 18px;
	filter: drop-shadow( 0 0 8px #fbbf24 );
	animation: np-sec-tboard-star-pulse 2.5s ease-in-out infinite;
}
@keyframes np-sec-tboard-star-pulse {
	0%, 100% { transform: scale( 1 ); filter: drop-shadow( 0 0 6px #fbbf24 ); }
	50%      { transform: scale( 1.15 ); filter: drop-shadow( 0 0 14px #fbbf24 ); }
}
.np-sec-tboard-card.is-empty {
	opacity: .75;
}
.np-sec-tboard-card.is-hidden {
	display: none;
}

/* Card-Head */
.np-sec-tboard-card-head {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 12px;
}
.np-sec-tboard-card-icon-wrap {
	position: relative;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	background: radial-gradient( circle, color-mix( in srgb, var( --card-color ) 30%, transparent ) 0%, transparent 70% );
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	border: 1px solid color-mix( in srgb, var( --card-color ) 40%, transparent );
}
.np-sec-tboard-card-icon {
	font-size: 32px;
	line-height: 1;
	filter: drop-shadow( 0 0 10px var( --card-color ) );
}
.np-sec-tboard-card-tier {
	position: absolute;
	bottom: -6px;
	right: -6px;
	background: var( --card-color );
	color: #fff;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 8px;
	box-shadow: 0 2px 8px color-mix( in srgb, var( --card-color ) 50%, transparent );
}
.np-sec-tboard-card-title-block {
	flex: 1;
	min-width: 0;
}
.np-sec-tboard-card-name {
	font-size: 16px;
	color: #fff;
	margin: 0 0 4px;
	font-weight: 700;
}
.np-sec-tboard-card-desc {
	margin: 0;
	font-size: 11.5px;
	color: rgba( 244, 244, 245, .65 );
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Card-Stats Row */
.np-sec-tboard-card-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 12px;
	padding: 8px;
	background: rgba( 8, 6, 20, .55 );
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, .06 );
}
.np-sec-tboard-stat {
	text-align: center;
}
.np-sec-tboard-stat strong {
	display: block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 17px;
	color: #fff;
}
.np-sec-tboard-stat small {
	display: block;
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba( 244, 244, 245, .55 );
	margin-top: 2px;
}
.np-sec-tboard-stat--mastered strong { color: #fbbf24; }

/* Card-Empty (kein Spieler) */
.np-sec-tboard-card-empty {
	text-align: center;
	padding: 16px 12px;
	color: rgba( 244, 244, 245, .55 );
	font-size: 12.5px;
	font-style: italic;
	background: rgba( 255, 255, 255, .03 );
	border: 1px dashed rgba( 255, 255, 255, .12 );
	border-radius: 10px;
}

/* Podium (Top-3 Avatare) */
.np-sec-tboard-card-podium {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-sec-tboard-podium-slot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .07 );
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.np-sec-tboard-podium-slot:hover {
	background: rgba( 255, 255, 255, .08 );
	transform: translateX( 2px );
}
.np-sec-tboard-podium-slot.is-rank-1 {
	background: linear-gradient( 135deg, rgba( 251, 191, 36, .12 ) 0%, rgba( 255, 255, 255, .04 ) 100% );
	border-color: rgba( 251, 191, 36, .3 );
}
.np-sec-tboard-podium-slot.is-rank-2 {
	background: linear-gradient( 135deg, rgba( 192, 192, 192, .1 ) 0%, rgba( 255, 255, 255, .04 ) 100% );
	border-color: rgba( 192, 192, 192, .22 );
}
.np-sec-tboard-podium-slot.is-rank-3 {
	background: linear-gradient( 135deg, rgba( 184, 115, 51, .1 ) 0%, rgba( 255, 255, 255, .04 ) 100% );
	border-color: rgba( 184, 115, 51, .22 );
}
.np-sec-tboard-podium-slot.is-mastered {
	box-shadow: inset 0 0 0 1px rgba( 251, 191, 36, .35 );
}
.np-sec-tboard-podium-rank {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 700;
	color: rgba( 244, 244, 245, .65 );
	min-width: 22px;
}
.np-sec-tboard-podium-slot.is-rank-1 .np-sec-tboard-podium-rank { color: #fbbf24; }
.np-sec-tboard-podium-slot.is-rank-2 .np-sec-tboard-podium-rank { color: #d4d4d8; }
.np-sec-tboard-podium-slot.is-rank-3 .np-sec-tboard-podium-rank { color: #b87333; }
.np-sec-tboard-avatar {
	width: 32px; height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba( 255, 255, 255, .1 );
}
.np-sec-tboard-avatar--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba( 138, 92, 246, .25 );
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
}
.np-sec-tboard-podium-name {
	flex: 1;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.np-sec-tboard-podium-faction {
	font-size: 16px;
	line-height: 1;
	filter: drop-shadow( 0 0 4px currentColor );
}
.np-sec-tboard-podium-battles {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: rgba( 244, 244, 245, .75 );
	background: rgba( 0, 0, 0, .3 );
	padding: 3px 8px;
	border-radius: 999px;
}
.np-sec-tboard-podium-star {
	color: #fbbf24;
	filter: drop-shadow( 0 0 4px #fbbf24 );
}

/* Card-Rest (expandierbare Plätze 4-10) */
.np-sec-tboard-card-rest {
	margin-top: 10px;
}
.np-sec-tboard-card-rest summary {
	cursor: pointer;
	font-size: 11.5px;
	color: rgba( 244, 244, 245, .55 );
	padding: 6px 10px;
	background: rgba( 255, 255, 255, .03 );
	border-radius: 8px;
	list-style: none;
	transition: color .15s ease, background .15s ease;
}
.np-sec-tboard-card-rest summary::-webkit-details-marker { display: none; }
.np-sec-tboard-card-rest summary::before {
	content: '▾';
	display: inline-block;
	margin-right: 6px;
	transition: transform .2s ease;
}
.np-sec-tboard-card-rest[open] summary::before {
	transform: rotate( 180deg );
}
.np-sec-tboard-card-rest summary:hover {
	color: #fff;
	background: rgba( 255, 255, 255, .07 );
}
.np-sec-tboard-rest-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.np-sec-tboard-rest-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	background: rgba( 255, 255, 255, .025 );
	border-radius: 8px;
	font-size: 12.5px;
	cursor: pointer;
}
.np-sec-tboard-rest-row:hover {
	background: rgba( 255, 255, 255, .06 );
}
.np-sec-tboard-rest-rank {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: rgba( 244, 244, 245, .55 );
	min-width: 22px;
}
.np-sec-tboard-rest-name { flex: 1; color: #fff; }
.np-sec-tboard-rest-faction { font-size: 13px; }
.np-sec-tboard-rest-battles {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: rgba( 244, 244, 245, .65 );
}
.np-sec-tboard-rest-row.is-mastered { box-shadow: inset 0 0 0 1px rgba( 251, 191, 36, .2 ); }

/* NO-RESULTS State */
.np-sec-tboard-no-results {
	text-align: center;
	padding: 60px 20px;
	color: rgba( 244, 244, 245, .55 );
}
.np-sec-tboard-no-results-icon {
	font-size: 48px;
	display: block;
	margin-bottom: 12px;
	opacity: .4;
}

/* MOBILE */
@media ( max-width: 600px ) {
	.np-sec-tboard-hero-medal { font-size: 140px; }
	.np-sec-tboard-hero-stats { gap: 8px; }
	.np-sec-tboard-hero-stat { min-width: 95px; padding: 10px 14px; }
	.np-sec-tboard-hero-stat strong { font-size: 20px; }
	.np-sec-tboard-grid { grid-template-columns: 1fr; }
	.np-sec-tboard-branch-head { padding: 12px 14px; gap: 12px; }
	.np-sec-tboard-branch-icon { font-size: 32px; }
	.np-sec-tboard-branch-name { font-size: 18px; }
}

/* =================================================================
 * V1.52.0 — App-Mode-Polish (Capacitor / Liga-OS App_Context)
 *
 * Liga-OS V6.36.1 setzt automatisch `body.np-app-context` + die
 * CSS-Vars `--np-safe-top/bottom/left/right` wenn die Seite in der
 * nativen iOS/Android-App läuft (Capacitor 6 WebView).
 *
 * Brief: AGENT-COMMS/briefe/2026-05-26-0120-FROM-league-os-…
 * Pflicht laut Liga-OS: NICHTS. Das hier ist Defensive Polish damit
 * Toasts/Modals/Nav nicht hinter Notch oder Home-Indicator landen.
 *
 * Im Web-Browser (ohne `.np-app-context`) → 0 Effekt. CSS-Var-
 * Fallbacks sind alle `0px`. Greift NUR in der App.
 * ================================================================= */

/* Toasts unten — über dem iOS-Home-Indikator halten */
body.np-app-context .np-sec-toast-container,
body.np-app-context .np-sec-honor-toast-container,
body.np-app-context .np-sec-battle-toast-container {
	bottom: calc( 16px + var( --np-safe-bottom, 0px ) ) !important;
}

/* Modals + Tour-Spotlights — Padding gegen Notch + Home-Indikator */
body.np-app-context .np-sec-modal-overlay,
body.np-app-context .np-sec-card-modal-overlay,
body.np-app-context .np-sec-talent-modal-overlay,
body.np-app-context .np-sec-tour-spotlight,
body.np-app-context .np-sec-help-modal-overlay {
	padding-top: calc( 16px + var( --np-safe-top, 0px ) ) !important;
	padding-bottom: calc( 16px + var( --np-safe-bottom, 0px ) ) !important;
	padding-left: calc( 16px + var( --np-safe-left, 0px ) ) !important;
	padding-right: calc( 16px + var( --np-safe-right, 0px ) ) !important;
}

/* Master-Nav docked (Plugin-Card-Footer) — Margin-Bottom gegen Home-Indikator */
body.np-app-context .np-sec-master-nav-docked {
	margin-bottom: calc( 24px + var( --np-safe-bottom, 0px ) );
}

/* Master-Nav inline ganz oben — Margin-Top gegen Notch */
body.np-app-context .np-sec-app > .np-sec-master-nav-inline:first-child {
	margin-top: var( --np-safe-top, 0px );
}

/* Plugin-Container Landscape-iPhone — Side-Padding gegen Notch */
body.np-app-context .np-sec-app {
	padding-left: calc( var( --np-sec-app-pad-left, 0px ) + var( --np-safe-left, 0px ) );
	padding-right: calc( var( --np-sec-app-pad-right, 0px ) + var( --np-safe-right, 0px ) );
}

/* Booking-Drawer (V1.45) — Bottom-Padding wenn drawer offen */
body.np-app-context .np-sec-app-drawer.is-open {
	padding-bottom: calc( 4px + var( --np-safe-bottom, 0px ) );
}

/* =================================================================
 * V1.53.0 — Public Player-Profile (`/sectorum-spieler/<slug>/`)
 *
 * Layout: Hero → Du-vs-Er → Stats → Killer-Row (Card/Liga/Loadout)
 *         → Rivalry → Achievements-Wall → Lore-Quote
 *
 * Faction-Color als CSS-Var `--faction-color` durchgereicht, damit
 * Hero-Gradient + Akzentlinien + H2H-Bar dynamisch zur Fraktion passen.
 * ================================================================= */

.np-sec-profile {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 40px;
	color: #f4f4f5;
}

/* ─── 1. HERO ─────────────────────────────────────────────── */
.np-sec-profile-hero {
	position: relative;
	padding: 36px 28px;
	margin: 0 0 24px;
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient( 135deg,
		color-mix( in srgb, var( --faction-color, #1f6feb ) 28%, #0e1320 ) 0%,
		#0e1320 60%,
		#080a14 100%
	);
	border: 1px solid color-mix( in srgb, var( --faction-color, #1f6feb ) 35%, rgba( 255, 255, 255, .08 ) );
	box-shadow: 0 24px 64px -24px rgba( 0, 0, 0, .6 ),
	            inset 0 0 80px -20px color-mix( in srgb, var( --faction-color, #1f6feb ) 25%, transparent );
}
.np-sec-profile-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient( 60% 80% at 50% 0%, color-mix( in srgb, var( --faction-color, #1f6feb ) 30%, transparent ) 0%, transparent 100% ),
		radial-gradient( 30% 60% at 100% 100%, color-mix( in srgb, var( --faction-color, #1f6feb ) 25%, transparent ) 0%, transparent 100% );
	opacity: .7;
	pointer-events: none;
	z-index: 0;
}
.np-sec-profile-hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 28px;
	align-items: center;
	flex-wrap: wrap;
}
.np-sec-profile-hero-avatar {
	width: 120px;
	height: 120px;
	flex: 0 0 120px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid color-mix( in srgb, var( --faction-color, #1f6feb ) 70%, #fff );
	background: rgba( 255, 255, 255, .04 );
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 32px -4px color-mix( in srgb, var( --faction-color, #1f6feb ) 60%, transparent );
}
.np-sec-profile-hero-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.np-sec-profile-hero-avatar-fallback {
	font-size: 56px;
	line-height: 1;
}
.np-sec-profile-hero-text {
	flex: 1 1 280px;
	min-width: 0;
}
.np-sec-profile-hero-eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --faction-color, #1f6feb ) 50%, #cbd5e1 );
	font-weight: 700;
	margin-bottom: 8px;
}
.np-sec-profile-hero-name {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: clamp( 28px, 4vw, 44px );
	font-weight: 700;
	margin: 0 0 12px;
	color: #fff;
	line-height: 1.1;
	text-shadow: 0 4px 24px rgba( 0, 0, 0, .5 );
}
.np-sec-profile-hero-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 14px;
	color: rgba( 255, 255, 255, .82 );
}
.np-sec-profile-hero-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: rgba( 255, 255, 255, .06 );
	border-radius: 999px;
	border: 1px solid rgba( 255, 255, 255, .1 );
}
.np-sec-profile-hero-honor {
	color: #fbbf24 !important;
	background: rgba( 251, 191, 36, .12 ) !important;
	border-color: rgba( 251, 191, 36, .35 ) !important;
}
.np-sec-profile-hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-left: auto;
	align-self: flex-start;
}
.np-sec-profile-hero-actions .np-sec-btn {
	white-space: nowrap;
}

/* ─── 2. „DU GEGEN X"-BLOCK ───────────────────────────────── */
.np-sec-profile-h2h {
	margin: 0 0 24px;
	padding: 20px 24px;
	border-radius: 14px;
	border: 1px solid rgba( 255, 255, 255, .12 );
	background: linear-gradient( 145deg, rgba( 20, 28, 50, .92 ), rgba( 12, 16, 32, .98 ) );
	position: relative;
	overflow: hidden;
}
.np-sec-profile-h2h::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, transparent, color-mix( in srgb, var( --h2h-tone-color, #3b82f6 ) 15%, transparent ), transparent );
	opacity: .6;
	pointer-events: none;
}
.np-sec-profile-h2h--win        { --h2h-tone-color: #22c55e; border-color: rgba( 34, 197, 94, .35 ); }
.np-sec-profile-h2h--loss       { --h2h-tone-color: #ef4444; border-color: rgba( 239, 68, 68, .35 ); }
.np-sec-profile-h2h--even       { --h2h-tone-color: #fbbf24; border-color: rgba( 251, 191, 36, .35 ); }
.np-sec-profile-h2h--neutral    { --h2h-tone-color: #8a5cf6; border-color: rgba( 138, 92, 246, .35 ); }
.np-sec-profile-h2h-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	position: relative;
	z-index: 1;
}
.np-sec-profile-h2h-head h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}
.np-sec-profile-h2h-tag {
	padding: 4px 12px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --h2h-tone-color ) 22%, transparent );
	color: var( --h2h-tone-color );
	font-weight: 700;
	font-size: 13px;
	border: 1px solid color-mix( in srgb, var( --h2h-tone-color ) 50%, transparent );
}
.np-sec-profile-h2h-empty {
	margin: 8px 0 0;
	font-size: 14px;
	color: rgba( 255, 255, 255, .7 );
	position: relative;
	z-index: 1;
}
.np-sec-profile-h2h-score {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	align-items: center;
	gap: 16px;
	position: relative;
	z-index: 1;
}
.np-sec-profile-h2h-side {
	text-align: center;
}
.np-sec-profile-h2h-side strong {
	display: block;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
}
.np-sec-profile-h2h-side small {
	display: block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .65;
	margin-top: 4px;
}
.np-sec-profile-h2h-bar {
	position: relative;
	height: 14px;
	border-radius: 999px;
	background: linear-gradient( 90deg, rgba( 239, 68, 68, .22 ), rgba( 34, 197, 94, .22 ) );
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba( 0, 0, 0, .35 );
}
.np-sec-profile-h2h-bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var( --viewer-pct, 50% );
	background: linear-gradient( 90deg, #22c55e, color-mix( in srgb, #22c55e 60%, transparent ) );
	box-shadow: 0 0 12px rgba( 34, 197, 94, .5 );
	transition: width .8s cubic-bezier( .65, 0, .35, 1 );
}
.np-sec-profile-h2h-last {
	display: block;
	margin-top: 12px;
	font-size: 12px;
	opacity: .7;
	text-align: center;
	position: relative;
	z-index: 1;
}

/* ─── 3. STATS-STRIP ──────────────────────────────────────── */
.np-sec-profile-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
	gap: 10px;
	margin: 0 0 24px;
}
.np-sec-profile-stat {
	padding: 14px 12px;
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 10px;
	text-align: center;
	transition: transform .2s ease, border-color .2s ease;
}
.np-sec-profile-stat:hover {
	transform: translateY( -2px );
	border-color: color-mix( in srgb, var( --np-sec-faction, #1f6feb ) 50%, rgba( 255, 255, 255, .12 ) );
}
.np-sec-profile-stat strong {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}
.np-sec-profile-stat small {
	display: block;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, .55 );
	margin-top: 4px;
}

/* ─── 4. KILLER-ROW (Card + Liga + Loadout) ────────────────── */
.np-sec-profile-row--killer {
	display: grid;
	grid-template-columns: minmax( 280px, 320px ) 1fr 1fr;
	gap: 20px;
	margin: 0 0 24px;
	align-items: start;
}
.np-sec-profile-section-title {
	margin: 0 0 12px;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: color-mix( in srgb, var( --np-sec-faction, #fde047 ) 60%, #fde047 );
	font-weight: 700;
}
.np-sec-profile-section-title .np-sec-profile-achievements-count {
	margin-left: 10px;
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: none;
	color: rgba( 255, 255, 255, .55 );
	font-weight: 500;
}

/* 4a. Trading-Card-Mount */
.np-sec-profile-card-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.np-sec-profile-card-box .np-sec-card-mount {
	width: 100%;
	display: flex;
	justify-content: center;
}
.np-sec-profile-card-hint {
	font-size: 11px;
	color: rgba( 255, 255, 255, .55 );
	text-align: center;
}

/* 4b. Liga-Stand */
.np-sec-profile-liga-box,
.np-sec-profile-loadout-box {
	padding: 18px 18px 16px;
	background: linear-gradient( 145deg, rgba( 14, 18, 32, .92 ), rgba( 8, 10, 20, .98 ) );
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-radius: 14px;
	min-height: 180px;
}
.np-sec-profile-liga-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.np-sec-profile-liga-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed rgba( 255, 255, 255, .08 );
}
.np-sec-profile-liga-row:last-of-type { border-bottom: 0; }
.np-sec-profile-liga-label {
	font-size: 12px;
	color: rgba( 255, 255, 255, .55 );
	white-space: nowrap;
}
.np-sec-profile-liga-value {
	font-size: 14px;
	color: #fff;
	font-weight: 500;
	text-align: right;
}
.np-sec-profile-liga-link {
	margin-top: 8px;
	display: inline-block;
	font-size: 12px;
	color: #2bb6b8;
	text-decoration: none;
	font-weight: 600;
}
.np-sec-profile-liga-link:hover { color: #5fd6d8; }

/* V1.55.0: XP-Progress-Bar im Liga-Stand-Block.
 * --xp-col wird im PHP-Inline-Style aus current.color gesetzt (Liga-OS-Level-Farbe). */
.np-sec-profile-liga-xp { padding-bottom: 4px; }
.np-sec-profile-liga-xp .np-sec-profile-liga-value small {
	display: block;
	font-size: 11px;
	margin-top: 2px;
}
.np-sec-profile-liga-xp-bar {
	--xp-col: #3b82f6;
	position: relative;
	height: 10px;
	margin: 4px 0 8px;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	border-radius: 999px;
	overflow: hidden;
}
.np-sec-profile-liga-xp-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		color-mix( in srgb, var( --xp-col ) 70%, transparent ) 0%,
		var( --xp-col ) 100%
	);
	box-shadow: 0 0 8px color-mix( in srgb, var( --xp-col ) 60%, transparent );
	transition: width .8s cubic-bezier( .65, 0, .35, 1 );
}
.np-sec-profile-liga-xp-pct {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 9px;
	color: rgba( 255, 255, 255, .8 );
	font-weight: 700;
	letter-spacing: .04em;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, .5 );
}

/* 4c. Loadout */
.np-sec-profile-loadout-name {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 12px;
}
.np-sec-profile-loadout-name small {
	font-weight: 500;
	color: rgba( 255, 255, 255, .55 );
	margin-left: 6px;
}
.np-sec-profile-loadout-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.np-sec-profile-loadout-talent {
	--tcolor: #8a5cf6;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: color-mix( in srgb, var( --tcolor ) 14%, rgba( 0, 0, 0, .4 ) );
	border: 1px solid color-mix( in srgb, var( --tcolor ) 50%, transparent );
	border-radius: 8px;
	font-size: 13px;
	color: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
.np-sec-profile-loadout-talent:hover {
	transform: translateX( 3px );
	box-shadow: 0 0 16px color-mix( in srgb, var( --tcolor ) 30%, transparent );
}
.np-sec-profile-loadout-talent.is-mastered {
	border-color: #fbbf24;
	background: color-mix( in srgb, #fbbf24 12%, rgba( 0, 0, 0, .4 ) );
}
.np-sec-profile-loadout-icon {
	font-size: 18px;
	filter: drop-shadow( 0 0 4px var( --tcolor ) );
}
.np-sec-profile-loadout-tname {
	flex: 1;
	font-weight: 500;
}
.np-sec-profile-loadout-star {
	font-size: 14px;
	color: #fbbf24;
	filter: drop-shadow( 0 0 4px #fbbf24 );
}

/* ─── 5. RIVALRY-KONSTELLATION ─────────────────────────────── */
.np-sec-profile-rivalry {
	margin: 0 0 24px;
	padding: 24px;
	background: linear-gradient( 145deg, rgba( 14, 18, 32, .92 ), rgba( 8, 10, 20, .98 ) );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 14px;
}
.np-sec-profile-rivalry .np-sec-profile-section-title {
	font-size: 18px;
	text-transform: none;
	letter-spacing: 0;
	font-family: 'Cinzel', 'Georgia', serif;
}
.np-sec-profile-rivalry-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 18px;
}
.np-sec-profile-rivalry-block h4 {
	margin: 0 0 12px;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, .7 );
	font-weight: 700;
}
.np-sec-profile-rivalry-block--nemesis h4   { color: #ef4444; }
.np-sec-profile-rivalry-block--victims h4   { color: #22c55e; }
.np-sec-profile-rivalry-block--mentor h4    { color: #3b82f6; }
.np-sec-profile-rivalry-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.np-sec-profile-rivalry-card {
	--faction-color: #1f6feb;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: color-mix( in srgb, var( --faction-color ) 12%, rgba( 14, 18, 32, .92 ) );
	border: 1px solid color-mix( in srgb, var( --faction-color ) 45%, transparent );
	border-radius: 10px;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.np-sec-profile-rivalry-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 20px -8px color-mix( in srgb, var( --faction-color ) 50%, transparent );
}
.np-sec-profile-rivalry-block--nemesis .np-sec-profile-rivalry-card {
	box-shadow: 0 0 12px -2px rgba( 239, 68, 68, .35 );
}
.np-sec-profile-rivalry-block--victims .np-sec-profile-rivalry-card {
	box-shadow: 0 0 12px -2px rgba( 34, 197, 94, .25 );
}
.np-sec-profile-rivalry-avatar {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: color-mix( in srgb, var( --faction-color ) 25%, rgba( 0, 0, 0, .4 ) );
	border: 1px solid color-mix( in srgb, var( --faction-color ) 60%, transparent );
	font-size: 18px;
	flex-shrink: 0;
}
.np-sec-profile-rivalry-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.np-sec-profile-rivalry-info strong,
.np-sec-profile-rivalry-info strong a {
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}
.np-sec-profile-rivalry-info strong a:hover {
	color: color-mix( in srgb, var( --faction-color ) 70%, #fff );
}
.np-sec-profile-rivalry-info small {
	font-size: 11px;
	color: rgba( 255, 255, 255, .55 );
}
.np-sec-profile-rivalry-balance {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	color: color-mix( in srgb, var( --faction-color ) 60%, #cbd5e1 );
}

/* ─── 6. ACHIEVEMENTS-WALL ─────────────────────────────────── */
.np-sec-profile-achievements {
	margin: 0 0 24px;
	padding: 24px;
	background: linear-gradient( 145deg, rgba( 14, 18, 32, .92 ), rgba( 8, 10, 20, .98 ) );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 14px;
}
.np-sec-profile-achievements .np-sec-profile-section-title {
	font-size: 18px;
	text-transform: none;
	letter-spacing: 0;
	font-family: 'Cinzel', 'Georgia', serif;
}
.np-sec-profile-achievements-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) );
	gap: 12px;
}
.np-sec-profile-ach {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 8px;
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 10px;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
.np-sec-profile-ach:hover {
	transform: translateY( -2px );
}
.np-sec-profile-ach.is-locked {
	opacity: .35;
	filter: grayscale( 1 );
}
.np-sec-profile-ach.is-earned {
	border-color: rgba( 251, 191, 36, .35 );
	background: linear-gradient( 145deg, rgba( 251, 191, 36, .08 ), rgba( 14, 18, 32, .92 ) );
}
.np-sec-profile-ach.is-pinned {
	border-color: #fbbf24;
	box-shadow: 0 0 16px rgba( 251, 191, 36, .35 );
}
.np-sec-profile-ach.is-rarity-legendary.is-earned {
	border-color: #fbbf24;
	background: linear-gradient( 145deg, rgba( 251, 191, 36, .18 ), rgba( 14, 18, 32, .92 ) );
	box-shadow: 0 0 20px rgba( 251, 191, 36, .4 );
}
.np-sec-profile-ach.is-rarity-epic.is-earned {
	border-color: #a78bfa;
	background: linear-gradient( 145deg, rgba( 167, 139, 250, .15 ), rgba( 14, 18, 32, .92 ) );
}
.np-sec-profile-ach.is-rarity-rare.is-earned {
	border-color: #38bdf8;
}
.np-sec-profile-ach-icon {
	font-size: 28px;
	line-height: 1;
}
.np-sec-profile-ach-label {
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
}
.np-sec-profile-ach.is-locked .np-sec-profile-ach-label {
	color: rgba( 255, 255, 255, .5 );
}
.np-sec-profile-ach-pin {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 10px;
}

/* ─── 7. LORE-QUOTE ────────────────────────────────────────── */
.np-sec-profile-lore {
	margin: 0 0 24px;
}
.np-sec-profile-lore-quote {
	margin: 0;
	padding: 20px 28px;
	background: linear-gradient( 145deg, rgba( 14, 18, 32, .92 ), rgba( 8, 10, 20, .98 ) );
	border-left: 4px solid var( --np-sec-faction, #1f6feb );
	border-radius: 0 10px 10px 0;
	font-style: italic;
	font-size: 15px;
	color: rgba( 255, 255, 255, .85 );
	line-height: 1.6;
}
.np-sec-profile-lore-quote p:last-child { margin-bottom: 0; }

/* ─── EMPTY-STATE ──────────────────────────────────────────── */
.np-sec-profile-empty-state {
	text-align: center;
	padding: 80px 24px;
	max-width: 540px;
	margin: 0 auto;
}
.np-sec-profile-empty-icon {
	font-size: 72px;
	margin-bottom: 16px;
	opacity: .6;
}
.np-sec-profile-empty-state h2 {
	font-family: 'Cinzel', 'Georgia', serif;
	font-size: 28px;
	margin: 0 0 12px;
}
.np-sec-profile-empty-state p {
	color: rgba( 255, 255, 255, .65 );
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 20px;
}

/* ─── MOBILE ───────────────────────────────────────────────── */
@media ( max-width: 880px ) {
	.np-sec-profile-row--killer {
		grid-template-columns: 1fr;
	}
	.np-sec-profile-hero-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.np-sec-profile-hero-actions {
		margin-left: 0;
		justify-content: center;
	}
	.np-sec-profile-hero-meta {
		justify-content: center;
	}
	.np-sec-profile-h2h-score {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.np-sec-profile-h2h-bar {
		order: 3;
	}
}
@media ( max-width: 480px ) {
	.np-sec-profile-hero {
		padding: 24px 18px;
	}
	.np-sec-profile-hero-avatar {
		width: 90px;
		height: 90px;
		flex: 0 0 90px;
	}
	.np-sec-profile-stat strong { font-size: 20px; }
	.np-sec-profile-achievements-grid {
		grid-template-columns: repeat( auto-fill, minmax( 86px, 1fr ) );
	}
}

/* ============================================================================
   V1.75.2 — Boss-Captain-Section + Recruiting-Modal
   ============================================================================ */

.np-sec-boss-captain {
	margin-top: 28px;
	padding: 20px;
	background: rgba( 139, 69, 19, 0.08 );
	border: 1px solid rgba( 139, 69, 19, 0.4 );
	border-radius: 12px;
}
.np-sec-boss-captain h3 {
	margin: 0 0 12px;
	font-size: 18px;
	color: #f59e0b;
}
.np-sec-boss-captain p {
	margin: 0 0 12px;
	line-height: 1.5;
	font-size: 14px;
}
.np-sec-boss-captain small {
	display: block;
	margin: 10px 0;
	opacity: 0.7;
	font-size: 12px;
}
.np-sec-boss-captain button {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid #f59e0b;
	border-radius: 8px;
	background: linear-gradient( 135deg, #8b4513 0%, #b45309 100% );
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.np-sec-boss-captain button:hover {
	transform: translateY( -1px );
	box-shadow: 0 4px 14px rgba( 245, 158, 11, 0.4 );
}
.np-sec-boss-captain button:disabled {
	opacity: 0.6;
	cursor: wait;
	transform: none;
}
.np-sec-boss-captain-active[data-renegade="1"] {
	background: linear-gradient( 135deg, rgba( 220, 38, 38, 0.15 ) 0%, rgba( 139, 69, 19, 0.15 ) 100% );
	border-radius: 8px;
	padding: 14px;
}
.np-sec-boss-captain-release {
	background: linear-gradient( 135deg, #6b7280 0%, #4b5563 100% ) !important;
	border-color: #6b7280 !important;
}

/* Recruiting-Modal */
.np-sec-recruiting-modal {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: np-sec-rec-fade 0.3s ease;
}
@keyframes np-sec-rec-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
.np-sec-recruiting-modal-card {
	max-width: 540px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	background: linear-gradient( 135deg, #0d1117 0%, #1f0f0a 100% );
	border: 2px solid #8b4513;
	border-radius: 16px;
	padding: 32px;
	color: #e6edf3;
	box-shadow: 0 20px 60px rgba( 220, 38, 38, 0.4 );
	position: relative;
	animation: np-sec-rec-slide 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
}
@keyframes np-sec-rec-slide {
	from { transform: translateY( 30px ) scale( 0.96 ); opacity: 0; }
	to { transform: translateY( 0 ) scale( 1 ); opacity: 1; }
}
.np-sec-recruiting-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: transparent;
	border: 0;
	color: #8b949e;
	font-size: 20px;
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transition: background 0.12s ease;
}
.np-sec-recruiting-close:hover {
	background: rgba( 255, 255, 255, 0.08 );
	color: #fff;
}
.np-sec-recruiting-modal-card h2 {
	margin: 0 0 16px;
	font-size: 24px;
	color: #fbbf24;
	text-align: center;
}
.np-sec-recruiting-pitch {
	font-size: 16px;
	font-style: italic;
	line-height: 1.55;
	margin: 0 0 24px;
	padding: 16px;
	background: rgba( 139, 69, 19, 0.15 );
	border-left: 3px solid #f59e0b;
	border-radius: 8px;
}
.np-sec-recruiting-rewards {
	margin: 0 0 24px;
	padding: 16px;
	background: rgba( 0, 0, 0, 0.3 );
	border-radius: 8px;
}
.np-sec-recruiting-rewards strong {
	display: block;
	margin: 0 0 10px;
	color: #fbbf24;
}
.np-sec-recruiting-rewards ul {
	margin: 0 0 10px;
	padding-left: 20px;
	line-height: 1.7;
	font-size: 14px;
}
.np-sec-recruiting-rewards small {
	display: block;
	margin-top: 8px;
	color: #8b949e;
	font-size: 12px;
	line-height: 1.4;
}
.np-sec-recruiting-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.np-sec-recruiting-accept,
.np-sec-recruiting-decline {
	flex: 1 1 200px;
	padding: 14px 20px;
	border: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.np-sec-recruiting-accept {
	background: linear-gradient( 135deg, #8b4513 0%, #dc2626 100% );
	color: #fff;
}
.np-sec-recruiting-decline {
	background: linear-gradient( 135deg, #1f6feb 0%, #3b82f6 100% );
	color: #fff;
}
.np-sec-recruiting-accept:hover,
.np-sec-recruiting-decline:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.4 );
}
.np-sec-recruiting-accept:disabled,
.np-sec-recruiting-decline:disabled {
	opacity: 0.5;
	cursor: wait;
	transform: none;
}

@media ( max-width: 540px ) {
	.np-sec-recruiting-modal-card { padding: 24px 18px; }
	.np-sec-recruiting-modal-card h2 { font-size: 20px; }
	.np-sec-recruiting-actions { flex-direction: column; }
}

/* ============================================================================
   V1.75.4 — Boss-Page: Idle-State + Mini-Anleitung + Captain-Info-Modal
   ============================================================================ */

/* Idle-State (Boss noch nicht aktiv) */
.np-sec-boss-idle {
	margin: 28px 0;
	padding: 32px 24px;
	background: linear-gradient( 135deg, rgba( 139, 69, 19, 0.10 ) 0%, rgba( 13, 17, 23, 0.4 ) 100% );
	border: 1px solid rgba( 245, 158, 11, 0.3 );
	border-radius: 12px;
	text-align: center;
}
.np-sec-boss-idle-icon {
	font-size: 56px;
	margin-bottom: 12px;
	opacity: 0.7;
}
.np-sec-boss-idle h3 {
	margin: 0 0 12px;
	font-size: 20px;
	color: #fbbf24;
}
.np-sec-boss-idle p {
	margin: 0 0 8px;
	line-height: 1.55;
	color: var( --np-sec-fg, #e6edf3 );
}
.np-sec-boss-idle small {
	color: var( --np-sec-muted, #8b949e );
}

/* Mini-Anleitung "So funktioniert's" */
.np-sec-boss-howto {
	margin: 28px 0;
	padding: 24px;
	background: var( --np-sec-card, #161b22 );
	border: 1px solid var( --np-sec-border, #30363d );
	border-radius: 12px;
}
.np-sec-boss-howto h3 {
	margin: 0 0 18px;
	font-size: 18px;
	color: #fbbf24;
}
.np-sec-boss-howto-steps {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	counter-reset: boss-step;
}
.np-sec-boss-howto-steps li {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 14px 16px;
	margin-bottom: 10px;
	background: rgba( 245, 158, 11, 0.04 );
	border-left: 3px solid #f59e0b;
	border-radius: 0 8px 8px 0;
}
.np-sec-boss-howto-steps li strong {
	font-size: 15px;
	color: var( --np-sec-fg, #e6edf3 );
}
.np-sec-boss-howto-steps li span {
	font-size: 14px;
	line-height: 1.5;
	color: var( --np-sec-muted, #8b949e );
}
.np-sec-boss-howto-bonus {
	padding: 16px;
	background: linear-gradient( 135deg, rgba( 139, 69, 19, 0.18 ) 0%, rgba( 220, 38, 38, 0.10 ) 100% );
	border: 1px dashed rgba( 245, 158, 11, 0.5 );
	border-radius: 8px;
}
.np-sec-boss-howto-bonus strong {
	display: block;
	margin-bottom: 6px;
	color: #fbbf24;
	font-size: 15px;
}
.np-sec-boss-howto-bonus p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var( --np-sec-fg, #e6edf3 );
}
/* V1.78.3: Bonus-Box als Tap-Target (Mobile-Fix) + echter CTA-Button.
   cursor:pointer ist auf iOS Safari Voraussetzung dafür, dass ein <div> ein
   Click-Event feuert — vorher war die Box am Handy „nicht anklickbar". */
.np-sec-boss-howto-bonus.is-actionable {
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.np-sec-boss-howto-bonus.is-actionable:hover {
	border-color: rgba( 245, 158, 11, 0.9 );
	transform: translateY( -1px );
	box-shadow: 0 6px 18px rgba( 245, 158, 11, 0.22 );
}
.np-sec-boss-howto-bonus-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 10px 18px;
	border: 1px solid #f59e0b;
	border-radius: 8px;
	background: linear-gradient( 135deg, #8b4513 0%, #b45309 100% );
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.np-sec-boss-howto-bonus-cta:hover {
	transform: translateY( -1px );
	box-shadow: 0 4px 14px rgba( 245, 158, 11, 0.4 );
}

/* Captain-Hint unterm Button */
.np-sec-boss-captain-hint {
	display: block;
	margin-top: 8px;
	color: var( --np-sec-muted, #8b949e );
	font-style: italic;
	font-size: 12px;
}

/* Captain-Info-Modal */
.np-sec-captain-modal {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
	animation: np-sec-rec-fade 0.3s ease;
}
.np-sec-captain-modal-card {
	max-width: 720px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	background: linear-gradient( 135deg, #0d1117 0%, #1f0f0a 100% );
	border: 2px solid #8b4513;
	border-radius: 16px;
	padding: 32px;
	color: #e6edf3;
	box-shadow: 0 20px 60px rgba( 139, 69, 19, 0.5 );
	position: relative;
	animation: np-sec-rec-slide 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
}
.np-sec-captain-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: transparent;
	border: 0;
	color: #8b949e;
	font-size: 20px;
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transition: background 0.12s ease;
}
.np-sec-captain-close:hover {
	background: rgba( 255, 255, 255, 0.08 );
	color: #fff;
}
.np-sec-captain-modal-card h2 {
	margin: 0 0 14px;
	font-size: 24px;
	color: #fbbf24;
	text-align: center;
}
.np-sec-captain-intro {
	margin: 0 0 22px;
	padding: 14px 16px;
	background: rgba( 245, 158, 11, 0.08 );
	border-left: 3px solid #f59e0b;
	border-radius: 0 8px 8px 0;
	font-size: 14px;
	line-height: 1.55;
}
.np-sec-captain-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 22px;
}
.np-sec-captain-col {
	padding: 16px;
	border-radius: 10px;
}
.np-sec-captain-col-pro {
	background: rgba( 34, 197, 94, 0.08 );
	border: 1px solid rgba( 34, 197, 94, 0.3 );
}
.np-sec-captain-col-con {
	background: rgba( 234, 88, 12, 0.08 );
	border: 1px solid rgba( 234, 88, 12, 0.3 );
}
.np-sec-captain-col h3 {
	margin: 0 0 10px;
	font-size: 15px;
}
.np-sec-captain-col-pro h3 { color: #4ade80; }
.np-sec-captain-col-con h3 { color: #fb923c; }
.np-sec-captain-col ul {
	margin: 0;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.6;
}
.np-sec-captain-col li { margin-bottom: 6px; }

.np-sec-captain-faq {
	margin-bottom: 22px;
}
.np-sec-captain-faq details {
	padding: 12px 14px;
	margin-bottom: 8px;
	background: rgba( 255, 255, 255, 0.03 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 8px;
	cursor: pointer;
}
.np-sec-captain-faq summary {
	font-weight: 600;
	font-size: 14px;
	color: var( --np-sec-fg, #e6edf3 );
	user-select: none;
}
.np-sec-captain-faq details[open] summary { color: #fbbf24; }
.np-sec-captain-faq details p {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var( --np-sec-muted, #8b949e );
}
.np-sec-captain-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.np-sec-captain-confirm,
.np-sec-captain-cancel {
	flex: 1 1 240px;
	padding: 14px 20px;
	border: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.np-sec-captain-confirm {
	background: linear-gradient( 135deg, #8b4513 0%, #dc2626 100% );
	color: #fff;
}
.np-sec-captain-cancel {
	background: rgba( 255, 255, 255, 0.08 );
	color: var( --np-sec-fg, #e6edf3 );
	border: 1px solid rgba( 255, 255, 255, 0.15 );
}
.np-sec-captain-confirm:hover { transform: translateY( -2px ); box-shadow: 0 6px 20px rgba( 220, 38, 38, 0.5 ); }
.np-sec-captain-cancel:hover  { transform: translateY( -2px ); background: rgba( 255, 255, 255, 0.12 ); }
.np-sec-captain-confirm:disabled,
.np-sec-captain-cancel:disabled { opacity: 0.5; cursor: wait; transform: none; }

@media ( max-width: 640px ) {
	.np-sec-captain-modal-card { padding: 22px 16px; }
	.np-sec-captain-modal-card h2 { font-size: 20px; }
	.np-sec-captain-grid { grid-template-columns: 1fr; }
	.np-sec-captain-actions { flex-direction: column; }
}

/* ============================================================
   V1.75.6 — Faction-Browser-Page + „Andere Fraktionen"-CTA
   Lore-Card-Grid mit Mitglieder-Pills + Antagonisten-Section.
   Klassen passen exakt zu render_factions_shortcode() / render_faction_card().
   CSS-Var: --faction-color (auf .np-sec-faction-card inline gesetzt).
   ============================================================ */
/* V1.75.9: padding-Override entfernt — defaults (padding: 20px 22px) erben */

.np-sec-factions-hero {
	background: linear-gradient( 135deg, rgba( 88, 60, 160, 0.22 ), rgba( 30, 70, 130, 0.22 ) );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 18px;
	padding: 22px 24px;
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-sec-factions-eyebrow {
	font-size: 12px;
	color: rgba( 230, 220, 255, 0.85 );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.np-sec-factions-title {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	color: #f4f4f6;
	letter-spacing: -0.01em;
}
.np-sec-factions-lead {
	margin: 0;
	color: rgba( 230, 230, 245, 0.78 );
	font-size: 14.5px;
	line-height: 1.55;
}

/* Grid */
.np-sec-factions-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) );
	gap: 18px;
	margin-bottom: 28px;
}
.np-sec-factions-grid--antagonists {
	margin-top: 6px;
	grid-template-columns: repeat( auto-fit, minmax( 360px, 1fr ) );
}

/* Card */
.np-sec-faction-card {
	background: rgba( 20, 22, 28, 0.78 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-left: 5px solid var( --faction-color, #3b82f6 );
	border-radius: 16px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.np-sec-faction-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 14px 32px rgba( 0, 0, 0, 0.35 );
}
.np-sec-faction-card.is-antagonist {
	background: linear-gradient( 165deg, rgba( 15, 40, 50, 0.95 ), rgba( 5, 18, 26, 0.95 ) );
	border-left-color: #0f5e5c;
	box-shadow: 0 0 0 1px rgba( 15, 94, 92, 0.4 ) inset;
}

/* Card-Head */
.np-sec-faction-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.np-sec-faction-card-head > div {
	min-width: 0;
	flex: 1;
}
.np-sec-faction-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	font-size: 24px;
	background: var( --faction-color, #3b82f6 );
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.25 );
}
.np-sec-faction-card-title {
	margin: 0 0 2px;
	font-size: 17px;
	font-weight: 700;
	color: #f4f4f6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.np-sec-faction-card-stats {
	font-size: 12px;
	color: rgba( 200, 200, 215, 0.7 );
	display: block;
}

/* Lore */
.np-sec-faction-card-lore {
	font-size: 13px;
	line-height: 1.55;
	color: rgba( 220, 220, 235, 0.82 );
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Members-Liste */
.np-sec-faction-card-members {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.np-sec-faction-member {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.03 );
	color: #f4f4f6;
	text-decoration: none;
	transition: background 0.15s ease;
	font-size: 13px;
}
.np-sec-faction-member:hover {
	background: rgba( 255, 255, 255, 0.08 );
	text-decoration: none;
}
.np-sec-faction-member-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var( --faction-color, #3b82f6 );
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
	overflow: hidden;
	object-fit: cover;
}
img.np-sec-faction-member-avatar {
	background: transparent;
}
.np-sec-faction-member-avatar--noimg {
	font-size: 14px;
}
.np-sec-faction-member-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}
.np-sec-faction-member-rank {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.08 );
	color: rgba( 220, 220, 240, 0.85 );
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.np-sec-faction-member-wl {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: rgba( 200, 200, 215, 0.7 );
	flex-shrink: 0;
}

/* Card-Empty + More */
.np-sec-faction-card-empty {
	font-size: 12.5px;
	color: rgba( 200, 200, 215, 0.7 );
	font-style: italic;
	padding: 8px 0 0;
	margin: 0;
}
.np-sec-faction-card-more {
	font-size: 12px;
	color: rgba( 200, 200, 215, 0.7 );
	text-align: center;
	padding-top: 6px;
	border-top: 1px dashed rgba( 255, 255, 255, 0.06 );
}

/* Antagonisten-Section (Header + Lead) */
.np-sec-factions-divider {
	margin: 8px 0 14px;
	padding: 14px 18px;
	border-radius: 14px;
	background: linear-gradient( 90deg, rgba( 245, 158, 11, 0.1 ), rgba( 15, 94, 92, 0.08 ) );
	border: 1px solid rgba( 245, 158, 11, 0.22 );
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.np-sec-factions-divider h3 {
	margin: 0;
	font-size: 15px;
	color: #fbbf24;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.np-sec-factions-divider p {
	margin: 0;
	font-size: 13px;
	color: rgba( 220, 220, 235, 0.78 );
	line-height: 1.5;
}

/* CTA-Block am Ende von „Meine Fraktion" */
.np-sec-explore-factions-cta {
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: 14px;
	background: linear-gradient( 135deg, rgba( 70, 90, 160, 0.16 ), rgba( 30, 80, 140, 0.16 ) );
	border: 1px solid rgba( 90, 120, 190, 0.28 );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.np-sec-explore-factions-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.np-sec-explore-factions-text strong {
	font-size: 14px;
	color: var( --np-sec-fg, #f4f4f6 );
}
.np-sec-explore-factions-text small {
	font-size: 12px;
	color: var( --np-sec-muted, #b6b6c2 );
}
.np-sec-explore-factions-cta .np-sec-btn {
	flex-shrink: 0;
}

@media ( max-width: 640px ) {
	.np-sec-factions-grid { grid-template-columns: 1fr; }
	.np-sec-factions-hero { padding: 18px 16px; }
	.np-sec-factions-hero h2 { font-size: 22px; }
	.np-sec-faction-card { padding: 14px; }
	.np-sec-explore-factions-cta { flex-direction: column; align-items: stretch; }
	.np-sec-explore-factions-cta .np-sec-btn { width: 100%; text-align: center; }
}

/* ============================================================
   V1.75.7 — Browser-Polish: Counter-Tiles + Sort-Bar + Join-CTA +
   Card-Foot + is-empty-Dimming + Antagonist-Captain-Button.
   ============================================================ */
.np-sec-factions-counters {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: 12px;
	margin-top: 14px;
}
.np-sec-factions-counter {
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 255, 255, 255, 0.06 );
	border-radius: 12px;
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}
.np-sec-factions-counter strong {
	font-size: 28px;
	font-weight: 800;
	color: #f4f4f6;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.np-sec-factions-counter small {
	font-size: 12px;
	color: rgba( 200, 200, 215, 0.7 );
}

.np-sec-factions-sortbar {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 18px;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba( 255, 255, 255, 0.03 );
	border: 1px solid rgba( 255, 255, 255, 0.06 );
	flex-wrap: wrap;
}
.np-sec-factions-sortbar-label {
	font-size: 12px;
	color: rgba( 200, 200, 215, 0.7 );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.np-sec-factions-sort-btn {
	font-size: 13px;
	font-weight: 600;
	background: transparent;
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	color: rgba( 230, 230, 245, 0.85 );
	padding: 5px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.np-sec-factions-sort-btn:hover { background: rgba( 255, 255, 255, 0.08 ); }
.np-sec-factions-sort-btn.is-active {
	background: var( --faction-color, #3b82f6 );
	border-color: var( --faction-color, #3b82f6 );
	color: #fff;
}

/* Card-Foot mit Detail-Link / Antagonist-Button */
.np-sec-faction-card-foot {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px dashed rgba( 255, 255, 255, 0.06 );
	display: flex;
	justify-content: flex-end;
}
.np-sec-faction-card-cta {
	font-size: 12.5px;
	font-weight: 600;
	color: var( --faction-color, #3b82f6 );
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba( 255, 255, 255, 0.03 );
	transition: background 0.15s ease;
}
.np-sec-faction-card-cta:hover {
	background: rgba( 255, 255, 255, 0.08 );
	text-decoration: none;
}
.np-sec-faction-card.is-antagonist .np-sec-faction-card-cta {
	background: linear-gradient( 135deg, #b45309, #92400e );
	color: #fff;
	border: 1px solid rgba( 251, 191, 36, 0.5 );
}
.np-sec-faction-card.is-antagonist .np-sec-faction-card-cta:hover {
	background: linear-gradient( 135deg, #d97706, #b45309 );
}

/* Title-Link */
.np-sec-faction-card-title a {
	color: inherit;
	text-decoration: none;
}
.np-sec-faction-card-title a:hover {
	color: var( --faction-color, #3b82f6 );
	text-decoration: none;
}

/* More-Link */
.np-sec-faction-card-more a {
	color: var( --faction-color, #3b82f6 );
	text-decoration: none;
	font-weight: 600;
}
.np-sec-faction-card-more a:hover { text-decoration: underline; }

/* 0-Mitglieder-Cards visuell dezenter */
.np-sec-faction-card.is-empty {
	opacity: 0.82;
}
.np-sec-faction-card.is-empty:hover {
	opacity: 1;
}

/* Join-CTA am Ende des Browsers */
.np-sec-factions-join-cta {
	margin-top: 32px;
	padding: 24px 28px;
	border-radius: 18px;
	background: linear-gradient( 135deg, rgba( 88, 60, 160, 0.22 ), rgba( 30, 130, 80, 0.18 ) );
	border: 1px solid rgba( 130, 150, 200, 0.3 );
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.np-sec-factions-join-text { flex: 1; min-width: 240px; }
.np-sec-factions-join-text h3 {
	margin: 0 0 6px;
	font-size: 20px;
	color: #f4f4f6;
}
.np-sec-factions-join-text p {
	margin: 0;
	font-size: 14px;
	color: rgba( 220, 220, 235, 0.85 );
	line-height: 1.5;
}

/* ============================================================
   V1.75.7 — Faction-Detail-Page
   ============================================================ */
/* V1.75.9: padding-Override entfernt — defaults (padding: 20px 22px) erben */

.np-sec-faction-detail-breadcrumb {
	margin-bottom: 14px;
	font-size: 13px;
}
.np-sec-faction-detail-breadcrumb a {
	color: var( --faction-color, #3b82f6 );
	text-decoration: none;
	font-weight: 600;
}
.np-sec-faction-detail-breadcrumb a:hover { text-decoration: underline; }

.np-sec-faction-detail-hero {
	background: linear-gradient( 135deg, color-mix( in srgb, var( --faction-color, #3b82f6 ) 28%, transparent ), rgba( 15, 18, 25, 0.85 ) );
	border: 1px solid var( --faction-color, #3b82f6 );
	border-radius: 20px;
	padding: 28px 30px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 22px;
	align-items: center;
	margin-bottom: 22px;
}
.np-sec-faction-detail-hero-icon {
	width: 96px;
	height: 96px;
	border-radius: 24px;
	display: grid;
	place-items: center;
	font-size: 56px;
	background: var( --faction-color, #3b82f6 );
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.35 );
}
.np-sec-faction-detail-hero-text { min-width: 0; }
.np-sec-faction-detail-eyebrow {
	font-size: 12px;
	color: rgba( 230, 230, 245, 0.7 );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.np-sec-faction-detail-hero-text h1 {
	margin: 4px 0 8px;
	font-size: 32px;
	font-weight: 800;
	color: #f4f4f6;
	letter-spacing: -0.01em;
}
.np-sec-faction-detail-lore {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba( 230, 230, 245, 0.88 );
}

.np-sec-faction-detail-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 12px;
	margin-bottom: 22px;
}
.np-sec-faction-detail-tile {
	background: rgba( 20, 22, 28, 0.78 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
	border-top: 3px solid var( --faction-color, #3b82f6 );
}
.np-sec-faction-detail-tile span:first-child {
	font-size: 22px;
	margin-bottom: 4px;
}
.np-sec-faction-detail-tile strong {
	font-size: 26px;
	font-weight: 800;
	color: #f4f4f6;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.np-sec-faction-detail-tile small {
	font-size: 12px;
	color: rgba( 200, 200, 215, 0.7 );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Champion-Card */
.np-sec-faction-detail-champion {
	margin-bottom: 22px;
	padding: 20px 22px;
	border-radius: 18px;
	background: linear-gradient( 135deg, rgba( 251, 191, 36, 0.14 ), rgba( 217, 119, 6, 0.1 ) );
	border: 1px solid rgba( 251, 191, 36, 0.35 );
}
.np-sec-faction-detail-champion header h2 {
	margin: 0 0 14px;
	font-size: 18px;
	color: #fbbf24;
}
.np-sec-faction-detail-champion-card {
	display: flex;
	gap: 18px;
	align-items: center;
	color: inherit;
	text-decoration: none;
	padding: 12px;
	border-radius: 12px;
	background: rgba( 20, 22, 28, 0.5 );
	transition: background 0.15s ease;
}
.np-sec-faction-detail-champion-card:hover {
	background: rgba( 30, 32, 40, 0.7 );
	text-decoration: none;
}
.np-sec-faction-detail-champion-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #fbbf24;
	color: #18181b;
	display: grid;
	place-items: center;
	font-size: 28px;
	font-weight: 800;
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba( 251, 191, 36, 0.4 );
	object-fit: cover;
}
img.np-sec-faction-detail-champion-avatar { background: transparent; }
.np-sec-faction-detail-champion-text { min-width: 0; flex: 1; }
.np-sec-faction-detail-champion-text strong {
	font-size: 19px;
	color: #f4f4f6;
	display: block;
}
.np-sec-faction-detail-champion-text small {
	font-size: 12px;
	color: rgba( 200, 200, 215, 0.7 );
	display: block;
	margin-top: 2px;
}
.np-sec-faction-detail-champion-stats {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	flex-wrap: wrap;
	font-size: 13px;
	color: rgba( 230, 230, 245, 0.85 );
}

/* Members-Liste */
.np-sec-faction-detail-members {
	margin-bottom: 22px;
}
.np-sec-faction-detail-members header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 12px;
	gap: 10px;
}
.np-sec-faction-detail-members header h2 { margin: 0; font-size: 18px; color: #f4f4f6; }
.np-sec-faction-detail-members header small { color: rgba( 200, 200, 215, 0.7 ); font-size: 13px; }
.np-sec-faction-detail-member-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.np-sec-faction-detail-member {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: rgba( 20, 22, 28, 0.78 );
	border: 1px solid rgba( 255, 255, 255, 0.06 );
	border-radius: 12px;
	transition: border-color 0.15s ease;
}
.np-sec-faction-detail-member:hover { border-color: var( --faction-color, #3b82f6 ); }
.np-sec-faction-detail-member-rank-num {
	font-size: 13px;
	font-weight: 700;
	color: rgba( 200, 200, 215, 0.7 );
	width: 36px;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}
.np-sec-faction-detail-member-link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}
.np-sec-faction-detail-member-link:hover { text-decoration: none; }
.np-sec-faction-detail-member-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var( --faction-color, #3b82f6 );
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 16px;
	flex-shrink: 0;
	object-fit: cover;
	overflow: hidden;
}
img.np-sec-faction-detail-member-avatar { background: transparent; }
.np-sec-faction-detail-member-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.np-sec-faction-detail-member-text strong {
	display: block;
	font-size: 14px;
	color: #f4f4f6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.np-sec-faction-detail-member-text small {
	display: block;
	font-size: 11px;
	color: rgba( 200, 200, 215, 0.7 );
}
.np-sec-faction-detail-member-stats {
	display: flex;
	gap: 12px;
	font-size: 12px;
	color: rgba( 220, 220, 235, 0.85 );
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.np-sec-faction-detail-empty-list {
	padding: 24px;
	text-align: center;
	color: rgba( 200, 200, 215, 0.7 );
	font-style: italic;
	background: rgba( 20, 22, 28, 0.5 );
	border-radius: 12px;
	margin: 0;
}

/* Battles-Liste */
.np-sec-faction-detail-battles header h2 {
	margin: 0 0 12px;
	font-size: 18px;
	color: #f4f4f6;
}
.np-sec-faction-detail-battle-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.np-sec-faction-detail-battle {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: rgba( 20, 22, 28, 0.78 );
	border: 1px solid rgba( 255, 255, 255, 0.06 );
	border-left: 3px solid #6b7280;
	border-radius: 10px;
}
.np-sec-faction-detail-battle.is-win   { border-left-color: #6ee7b7; }
.np-sec-faction-detail-battle.is-loss  { border-left-color: #fca5a5; }
.np-sec-faction-detail-battle-icon { font-size: 20px; flex-shrink: 0; }
.np-sec-faction-detail-battle-text strong {
	display: block;
	font-size: 13px;
	color: #f4f4f6;
}
.np-sec-faction-detail-battle-text small {
	display: block;
	font-size: 11px;
	color: rgba( 200, 200, 215, 0.7 );
	margin-top: 2px;
}

.np-sec-faction-detail-empty {
	padding: 40px 24px;
	text-align: center;
	background: rgba( 20, 22, 28, 0.6 );
	border-radius: 16px;
	border: 1px dashed rgba( 255, 255, 255, 0.12 );
}
.np-sec-faction-detail-empty h2 {
	margin: 0 0 10px;
	font-size: 20px;
	color: #f4f4f6;
}
.np-sec-faction-detail-empty p {
	margin: 0 0 20px;
	color: rgba( 220, 220, 235, 0.85 );
	line-height: 1.55;
}

@media ( max-width: 640px ) {
	.np-sec-faction-detail-hero {
		grid-template-columns: 1fr;
		padding: 22px 18px;
		text-align: center;
	}
	.np-sec-faction-detail-hero-icon { margin: 0 auto; }
	.np-sec-faction-detail-hero-text h1 { font-size: 24px; }
	.np-sec-faction-detail-champion-card { flex-direction: column; text-align: center; }
	.np-sec-faction-detail-champion-stats { justify-content: center; }
	.np-sec-faction-detail-member-stats { flex-direction: column; gap: 2px; text-align: right; }
	.np-sec-factions-join-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ============================================================
   V1.75.10 — Boss-Status-Banner (Live-Indikator wenn Boss aktiv)
   Injection-Points: Welcome / Meine Fraktion / Faction-Browser
   ============================================================ */
.np-sec-boss-status-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	margin: 0 0 18px;
	border-radius: 14px;
	background: linear-gradient( 135deg, rgba( 15, 94, 92, 0.32 ), rgba( 30, 30, 50, 0.85 ) );
	border: 1px solid rgba( 30, 200, 200, 0.4 );
	box-shadow: 0 0 0 1px rgba( 30, 200, 200, 0.15 ) inset, 0 4px 18px rgba( 15, 94, 92, 0.25 );
	position: relative;
	overflow: hidden;
}
.np-sec-boss-status-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient( circle at 12% 50%, rgba( 30, 200, 200, 0.25 ), transparent 60% );
	pointer-events: none;
	animation: np-sec-boss-pulse 3.5s ease-in-out infinite;
}
@keyframes np-sec-boss-pulse {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 1; }
}
.np-sec-boss-status-banner-icon {
	font-size: 34px;
	flex-shrink: 0;
	filter: drop-shadow( 0 2px 8px rgba( 15, 200, 200, 0.45 ) );
	animation: np-sec-boss-wave 4s ease-in-out infinite;
}
@keyframes np-sec-boss-wave {
	0%, 100% { transform: translateY( 0 ); }
	50%      { transform: translateY( -3px ); }
}
.np-sec-boss-status-banner-text {
	flex: 1;
	min-width: 0;
	position: relative;
}
.np-sec-boss-status-banner-text strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #e0fafa;
	letter-spacing: 0.02em;
}
.np-sec-boss-status-banner-text small {
	display: block;
	font-size: 12.5px;
	color: rgba( 200, 230, 230, 0.78 );
	margin-top: 2px;
}
.np-sec-boss-status-banner-progress {
	margin-top: 8px;
	height: 6px;
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 999px;
	overflow: hidden;
}
.np-sec-boss-status-banner-progress span {
	display: block;
	height: 100%;
	background: linear-gradient( 90deg, #6ee7b7, #34d399 );
	border-radius: 999px;
	transition: width 0.4s ease;
}
.np-sec-boss-status-banner-cta {
	flex-shrink: 0;
	background: linear-gradient( 135deg, #0f5e5c, #134e4a );
	border: 1px solid rgba( 30, 200, 200, 0.5 );
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
	z-index: 1;
}
.np-sec-boss-status-banner-cta:hover {
	background: linear-gradient( 135deg, #14706e, #155e58 );
	border-color: rgba( 50, 220, 220, 0.7 );
}

@media ( max-width: 640px ) {
	.np-sec-boss-status-banner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.np-sec-boss-status-banner-icon { align-self: center; }
	.np-sec-boss-status-banner-cta { width: 100%; text-align: center; }
}

/* ============================================================
   V1.75.12 — Faction-Detail-Page: Exklusive Talente + Werthbach-Info-Box
   ============================================================ */
.np-sec-faction-detail-talents {
	margin-bottom: 22px;
}
.np-sec-faction-detail-talents header {
	margin-bottom: 12px;
}
.np-sec-faction-detail-talents header h2 {
	margin: 0;
	font-size: 18px;
	color: #f4f4f6;
}
.np-sec-faction-detail-talents header small {
	display: block;
	font-size: 12.5px;
	color: rgba( 200, 200, 215, 0.7 );
	margin-top: 2px;
}
.np-sec-faction-detail-talent-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 10px;
}
.np-sec-faction-detail-talent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	background: rgba( 20, 22, 28, 0.78 );
	border: 1px solid rgba( 255, 255, 255, 0.06 );
	border-left: 4px solid var( --talent-color, #a16207 );
	border-radius: 12px;
}
.np-sec-faction-detail-talent-icon {
	font-size: 24px;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: var( --talent-color, #a16207 );
	color: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
}
.np-sec-faction-detail-talent-text strong {
	display: block;
	font-size: 14px;
	color: #f4f4f6;
	margin-bottom: 2px;
}
.np-sec-faction-detail-talent-tier {
	display: inline-block;
	margin-left: 6px;
	font-size: 10px;
	padding: 2px 6px;
	background: rgba( 255, 255, 255, 0.08 );
	color: rgba( 220, 220, 240, 0.85 );
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
.np-sec-faction-detail-talent-text small {
	display: block;
	font-size: 12.5px;
	color: rgba( 220, 220, 235, 0.78 );
	line-height: 1.45;
}

/* Werthbach-Tiefe Spezial-Info-Box (nur auf reaver-pirates Detail-Page) */
.np-sec-faction-detail-special-info {
	margin-bottom: 22px;
	padding: 18px 22px;
	border-radius: 16px;
	background: linear-gradient( 135deg, rgba( 15, 94, 92, 0.22 ), rgba( 5, 18, 26, 0.85 ) );
	border: 1px solid rgba( 30, 200, 200, 0.3 );
}
.np-sec-faction-detail-special-info header h2 {
	margin: 0 0 14px;
	font-size: 17px;
	color: #e0fafa;
}
.np-sec-faction-detail-phase-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
.np-sec-faction-detail-phase {
	padding: 14px 16px;
	background: rgba( 20, 22, 28, 0.55 );
	border-radius: 12px;
	border: 1px solid rgba( 255, 255, 255, 0.06 );
}
.np-sec-faction-detail-phase.is-boss {
	background: linear-gradient( 165deg, rgba( 245, 158, 11, 0.12 ), rgba( 30, 25, 20, 0.7 ) );
	border-color: rgba( 245, 158, 11, 0.32 );
}
.np-sec-faction-detail-phase strong {
	display: block;
	font-size: 14px;
	color: #f4f4f6;
	margin-bottom: 8px;
}
.np-sec-faction-detail-phase ul {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 13px;
	color: rgba( 220, 220, 235, 0.85 );
	line-height: 1.55;
}
.np-sec-faction-detail-phase li {
	margin-bottom: 4px;
}
.np-sec-faction-detail-phase-cta {
	margin: 0;
	padding: 10px 14px;
	background: rgba( 30, 200, 200, 0.1 );
	border-radius: 10px;
	font-size: 13px;
	color: rgba( 220, 240, 240, 0.92 );
	border-left: 3px solid #0f5e5c;
}

@media ( max-width: 640px ) {
	.np-sec-faction-detail-phase-grid { grid-template-columns: 1fr; }
	.np-sec-faction-detail-talent-list { grid-template-columns: 1fr; }
}

/* V1.77.0: Talent-Tag-Chips — zeigen welche Sektor-Tags den Bonus auslösen */
.np-sec-faction-detail-talent-tags {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.np-sec-faction-detail-talent-tags small {
	font-size: 11px;
	color: rgba( 200, 200, 215, 0.65 );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}
.np-sec-faction-detail-talent-tag-chip {
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var( --talent-color, #a16207 );
	color: #fff;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
}

/* V1.77.6: Sektor-Tag-Chips im Klick-Modal */
.np-sec-sector-modal-tags { margin: 8px 0 4px; }
.np-sec-sector-modal-tags-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.55 );
	font-weight: 600;
	margin-bottom: 6px;
}
.np-sec-sector-modal-tags-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.np-sec-sector-tag-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: linear-gradient( 135deg, rgba( 99, 161, 250, 0.18 ), rgba( 99, 161, 250, 0.08 ) );
	color: #cfe1ff;
	border: 1px solid rgba( 99, 161, 250, 0.45 );
	cursor: help;
	transition: transform .15s, background .15s;
}
.np-sec-sector-tag-chip:hover {
	transform: translateY( -1px );
	background: linear-gradient( 135deg, rgba( 99, 161, 250, 0.32 ), rgba( 99, 161, 250, 0.16 ) );
}

/* V1.78.0: Kampf-Bonus-Hinweis im Sektor-Modal (welche Fraktion gewinnt hier Honor) */
.np-sec-sector-bonus {
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba( 250, 204, 21, 0.10 );
	border: 1px solid rgba( 250, 204, 21, 0.30 );
}
.np-sec-sector-bonus-line {
	font-size: 12.5px;
	color: #f4e4b8;
	line-height: 1.5;
}
.np-sec-sector-bonus-line strong { color: #facc15; }
.np-sec-sector-bonus-talent { opacity: 0.7; font-style: italic; }

/* ===== V1.94.0 Launch-UX ===== */

/* #1 Gruppierte Master-Nav — 4 thematische Blöcke statt 22 gleichwertiger Pills */
.np-sec-master-nav-grouped {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	align-items: flex-start;
}
.np-sec-nav-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.np-sec-nav-group-label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--np-sec-muted, #8b93a7);
	opacity: 0.85;
	padding-left: 2px;
}
.np-sec-nav-group-items { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
	.np-sec-master-nav-grouped { gap: 12px; }
	.np-sec-nav-group { width: 100%; }
}

/* #2 Unread-Dot am Story-Tab */
.np-sec-master-nav-item { position: relative; }
.np-sec-master-nav-item.np-sec-has-unread::after {
	content: '';
	position: absolute;
	top: 5px;
	right: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #a78bfa;
	box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.65);
	animation: npSecUnreadPulse 2s ease-out infinite;
	pointer-events: none;
}
@keyframes npSecUnreadPulse {
	0%   { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(167, 139, 250, 0); }
	100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.np-sec-master-nav-item.np-sec-has-unread::after { animation: none; }
}

/* #4 First-Conquest-Banner — leere Karte als First-Mover-Anreiz */
.np-sec-first-conquest {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 12px 16px;
	border: 1px solid rgba(167, 139, 250, 0.35);
	border-radius: 12px;
	background: linear-gradient(90deg, rgba(167, 139, 250, 0.14), rgba(31, 111, 235, 0.10));
}
.np-sec-first-conquest-icon { font-size: 1.5rem; line-height: 1; }
.np-sec-first-conquest-text { flex: 1; font-size: 0.92rem; line-height: 1.4; }
.np-sec-first-conquest-text strong { display: block; margin-bottom: 2px; }
.np-sec-first-conquest-cta {
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 10px;
	background: var(--np-sec-accent, #7c5cff);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 0.9rem;
}
.np-sec-first-conquest-cta:hover { filter: brightness(1.12); }
@media (max-width: 640px) {
	.np-sec-first-conquest { flex-direction: column; align-items: flex-start; }
}