@import 'variables.css';

/* Beispiel für eine Item-Karte */
.item-card.rare {
	border-color: var(--color-rarity-rare);
	box-shadow: 0 0 10px rgba(var(--color-rarity-rare-rgb), 0.3);
}

/* --- Globale Einstellungen (für den ganzen HTML-Body) --- */
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: var(--font-ui);
	color: var(--color-text-light);
	overflow: auto;
}

/* Web-Modus (Landingpage, Kulturen etc.) – Scrolling erlaubt */
body.web {
	overflow: auto;
	height: auto;
}
html.web {
	overflow: auto;
	height: auto;
}
body.web #app-root {
	height: auto;
	overflow: visible;
}

/* --- Stage Spinner --- */
#stage-spinner {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background:
		radial-gradient(ellipse at center bottom, rgba(80,30,10,0.6) 0%, transparent 70%),
		linear-gradient(160deg, #0a0a0f 0%, #1a0f00 50%, #0a0a0f 100%);
	align-items: center;
	justify-content: center;
}
#stage-spinner.visible {
	display: flex;
}
.spinner-ring {
	width: 56px;
	height: 56px;
	border: 4px solid rgba(200,169,81,0.2);
	border-top-color: #c8a951;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}

/* --- Hintergrund des Login-Screens --- */
.login-background {
	position: fixed; /* Fixiert das Bild im Hintergrund */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/bifrostark_loginscreen.jpg'); /* Dein gewähltes Bild hier einfügen! */
	background-size: cover; /* Bild deckt den gesamten Bereich ab */
	background-position: center center; /* Bild zentrieren */
	
	/* Sanfte Zoom-Animation */
	animation: backgroundZoom 60s infinite alternate ease-in-out; 

	/* Dunkle Überlagerung für bessere Lesbarkeit des Textes */
	filter: brightness(0.7); /* Leicht abdunkeln */
	z-index: -1; /* Hinter allen anderen Elementen */
	/*backdrop-filter: blur(15px);/* */
}

@keyframes backgroundZoom {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.1); /* Zoomt sanft bis 110% */
	}
}

/* --- Container für die Login-Box (zentriert) --- */
.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 20px;
	box-sizing: border-box; /* Padding wird in die Höhe/Breite eingerechnet */
}

/* --- Die Login-Box selbst (Frosted Glass Look) --- */
.login-box {
	background: var(--color-bg-glass);
	backdrop-filter: blur(15px);
	border: 1px solid var(--color-bg-glass-border);
	border-radius: 15px;
	padding: 40px 50px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
	text-align: center;
	max-width: 400px;
	width: 100%;
}

.login-box h2 {
	color: #FFFFFF;
	margin:0px 0px 30px 0px;
	font-size: 2.2em;
	text-shadow: 0 0 10px rgba(var(--color-accent-blue-rgb), 0.7);
}

/* --- Eingabefelder --- */
.login-input-group {
	margin-bottom: 20px;
	text-align: left;
}

.login-input-group label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.9em;
	color: var(--color-text-label-blue);
}

.login-input-group input[type="text"],
.login-input-group input[type="password"],
.login-input-group input[type="email"] {
	width: calc(100% - 20px); /* 100% Breite minus Padding */
	padding: 12px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-card);
	background: var(--color-bg-input);
	color: #FFFFFF;
	font-size: 1em;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-input-group input:focus {
	outline: none;
	border-color: var(--color-accent-blue);
	box-shadow: 0 0 15px rgba(var(--color-accent-blue-rgb), 0.4);
}

/* --- Buttons --- */
.login-button {
	width: 100%;
	padding: 15px;
	background: linear-gradient(145deg, var(--color-btn-blue) 0%, var(--color-accent-blue) 100%);
	color: #FFFFFF;
	border: none;
	border-radius: var(--radius-card);
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
	margin-top: 20px;
}

.login-button:hover {
	background: linear-gradient(145deg, #357ABD 0%, #5DAAEF 100%);
	transform: translateY(-2px); /* Leichter "Hover-Effekt" */
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.login-button:active {
	transform: translateY(0);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* --- Link für Registrierung / Zurück --- */
.switch-mode-link {
	display: block;
	margin-top: 20px;
	color: var(--color-text-label-blue);
	text-decoration: none;
	font-size: 0.9em;
	transition: color 0.3s ease;
	cursor: pointer;
}

.switch-mode-link:hover {
	color: var(--color-accent-blue);
	text-decoration: underline;
}

/* --- Fehlermeldungen --- */
.error-message {
	color: var(--color-error); /* Rote Farbe für Fehler */
	margin-top: 15px;
	font-size: 0.9em;
	animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

.success { color:lightgreen; }
.error { color: var(--color-error); }


.char-list-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 20px 0;
	max-height: 300px;
	overflow-y: auto;
}

.char-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-bg-glass-border);
	padding: 15px;
	border-radius: var(--radius-card);
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}

.char-card:hover {
	background: var(--color-bg-card-hover);
	transform: scale(1.02);
}

.attribute-grid {
	display: grid;
	grid-template-columns: 1fr; /* Einspaltig für Attribute untereinander */
	gap: 10px;
	background: var(--color-bg-input);
	padding: 15px;
	border-radius: var(--radius-card);
	margin: 10px 0;
}

.attr-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	padding: 5px 10px;
	border-radius: 4px;
}

.attr-label {
	font-weight: bold;
	color: var(--color-text-gold-soft);
	width: 30px;
}

.attr-value {
	font-size: 1.1em;
	min-width: 25px;
	text-align: center;
}

.stat-badge {
	display: inline-block;
	padding: 5px 15px;
	margin-right: 10px;
	background: var(--color-stat-energy-bg);
	border-radius: var(--radius-pill);
	font-weight: bold;
	border: 1px solid var(--color-stat-energy-border);
	transition: all 0.3s ease;
}

.stat-hp {
	background: var(--color-stat-hp-bg) !important;
	border-color: var(--color-stat-hp-border) !important;
	box-shadow: 0 0 10px rgba(var(--color-stat-hp-glow-rgb), 0.4);
}

/* --- Details-Panel (SlideIn/FadeIn) --- */
.details-panel {
	position: fixed;
	top: 50%;
	right: 370px; /* Direkt neben der Sidebar */
	transform: translateY(-50%) translateX(20px);
	width: 400px;
	background: var(--color-bg-panel-dark);
	backdrop-filter: blur(20px);
	border: 2px solid var(--color-accent-gold);
	border-radius: var(--radius-box);
	padding: 25px;
	box-shadow: 0 0 50px rgba(0,0,0,0.9);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.details-panel.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

.details-close {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	color: var(--color-accent-gold);
	font-size: 1.5em;
}

.select-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.select-card .help-icon {
	margin-left: 0;
	margin-right: -5px;
	opacity: 0.6;
	transition: opacity 0.2s;
}

.select-card .help-icon:hover {
	opacity: 1;
}
/* ==========================================================================
   RPG CHARACTER CREATOR STYLES
   ========================================================================== */

.creator-layout {
	display: flex;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	justify-content: space-between;
}

.creator-left-sidebar, .creator-right-sidebar {
	width: 350px;
	height: 100%;
	background: var(--color-bg-panel);
	backdrop-filter: blur(20px);
	border: 2px solid var(--color-accent-gold);
	color: var(--color-text-light);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	z-index: 10;
	overflow-y: auto;
	padding: 20px;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(var(--color-accent-gold-rgb), 0.1);
}

.creator-left-sidebar {
	border-left: none;
	border-top: none;
	border-bottom: none;
}

.creator-right-sidebar {
	border-right: none;
	border-top: none;
	border-bottom: none;
}

.creator-center-area {
	flex-grow: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 5;
}

.creator-wizard-header {
	position: relative;
	flex-shrink: 0;
	width: calc(100% - 40px);
	margin: 0 20px 20px 20px;
	z-index: 20;
	background: var(--color-bg-panel);
	backdrop-filter: blur(10px);
	border: 2px solid var(--color-accent-gold);
	border-radius: var(--radius-box);
	padding: 15px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.creator-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(var(--color-accent-gold-rgb), 0.3);
	padding-bottom: 10px;
}

.creator-header-inner h2 {
	font-family: var(--font-rpg);
	color: var(--color-accent-gold);
	font-size: 2.2em;
	margin: 0;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
	text-align: center;
	flex-grow: 1;
}

.creator-wizard-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -40%);
	z-index: 20;
	background: var(--color-bg-panel);
	backdrop-filter: blur(15px);
	border: 2px solid var(--color-accent-gold);
	border-radius: var(--radius-box);
	padding: 30px;
	width: 600px;
	max-height: 70vh;
	overflow-y: auto;
	pointer-events: auto;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
	color: var(--color-text-light);
}

.creator-3d-canvas-container {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	z-index: 10;
	pointer-events: auto;
}

.creator-3d-canvas {
	width: 100%;
	height: 100%;
	display: block;
}

/* Kamera-Fokus Buttons */
.creator-focus-controls {
	position: absolute;
	right: 15px;
	top: 15px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 20;
	pointer-events: auto;
}

.btn-focus {
	width: 44px;
	height: 44px;
	background: var(--color-bg-panel);
	border: 1px solid rgba(var(--color-accent-gold-rgb), 0.5);
	border-radius: var(--radius-card);
	color: var(--color-text-light);
	font-size: 1.4em;
	cursor: pointer;
	transition: all 0.2s ease;
	backdrop-filter: blur(10px);
}

.btn-focus:hover {
	border-color: var(--color-accent-gold);
	box-shadow: 0 0 10px rgba(var(--color-accent-gold-rgb), 0.4);
	transform: scale(1.1);
}

.btn-focus.active {
	border-color: var(--color-accent-gold);
	background: rgba(var(--color-accent-gold-rgb), 0.2);
	box-shadow: 0 0 15px rgba(var(--color-accent-gold-rgb), 0.5);
}

.selection-grid-single {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	margin-bottom: 20px;
}

.creator-box {
	background: var(--color-bg-panel);
	backdrop-filter: blur(20px);
	border: 2px solid var(--color-accent-gold);
	border-radius: var(--radius-box);
	padding: 30px;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(var(--color-accent-gold-rgb), 0.1);
	color: var(--color-text-light);
	width: 100%;
	font-family: var(--font-ui);
	max-height: 85vh;
	overflow-y: auto;
	overflow-x: hidden;
}

.creator-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(var(--color-accent-gold-rgb), 0.3);
	margin-bottom: 25px;
	padding-bottom: 10px;
}

.creator-header h2 {
	font-family: var(--font-rpg);
	color: var(--color-accent-gold);
	font-size: 2.8em;
	margin: 0;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.wizard-steps-indicator {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 20px;
	font-family: var(--font-rpg-sc);
	color: var(--color-text-muted-dark);
}

.step-indicator {
	padding: 5px 15px;
	border-bottom: 2px solid transparent;
	transition: all 0.3s ease;
}

.step-indicator.active {
	color: var(--color-accent-gold);
	border-bottom: 2px solid var(--color-accent-gold);
	text-shadow: 0 0 8px rgba(var(--color-accent-gold-rgb), 0.5);
}

/* Auswahl-Karten (Berufe, Kulturen) */
.selection-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 20px;
}

.select-card {
	background: linear-gradient(180deg, rgba(40,40,50,0.9) 0%, rgba(20,20,25,0.9) 100%);
	border: 1px solid #444;
	border-radius: var(--radius-card);
	padding: 15px;
	cursor: pointer;
	text-align: center;
	transition: all 0.2s ease;
}

.select-card:hover {
	border-color: var(--color-text-muted-dark);
	transform: translateY(-2px);
}

.select-card.active {
	border-color: var(--color-accent-gold);
	background: linear-gradient(180deg, rgba(80,60,20,0.9) 0%, rgba(40,30,10,0.9) 100%);
	box-shadow: 0 0 15px rgba(var(--color-accent-gold-rgb), 0.3);
}

.select-card.locked {
	opacity: 0.4;
	cursor: not-allowed;
	filter: grayscale(100%);
}

.card-title {
	display: block;
	font-family: var(--font-rpg);
	font-size: 1.4em;
	color: #fff;
	margin-bottom: 5px;
}

.card-desc {
	color: var(--color-text-muted);
	font-size: 0.85em;
}

/* Attributs- und Talent-Pools */
.points-left {
	text-align: center;
	font-family: var(--font-rpg-sc);
	font-size: 1.5em;
	color: var(--color-accent-blue);
	margin-bottom: 20px;
	text-shadow: 0 0 10px rgba(var(--color-accent-blue-rgb), 0.4);
}

.btn-small {
	background: #333;
	color: var(--color-accent-gold);
	border: 1px solid #555;
	border-radius: 4px;
	width: 30px;
	height: 30px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-small:hover {
	background: #555;
	border-color: var(--color-accent-gold);
}

.btn-small:active {
	transform: scale(0.95);
}

.skill-cat-header {
	font-family: var(--font-rpg);
	color: var(--color-accent-gold);
	border-bottom: 1px solid rgba(var(--color-accent-gold-rgb), 0.3);
	margin-top: 20px;
	padding-bottom: 5px;
}

.skill-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	padding: 8px 15px;
	border-radius: 6px;
	margin-bottom: 5px;
}

.skill-info {
	flex-grow: 1;
}

.skill-name {
	display: block;
	font-weight: bold;
	color: var(--color-text-gold-soft);
}

.skill-check {
	color: var(--color-text-muted-dark);
}

.skill-value {
	font-size: 1.2em;
	min-width: 30px;
	text-align: center;
	margin: 0 10px;
}

/* Footer & Navigation */
.creator-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	border-top: 1px solid rgba(var(--color-accent-gold-rgb), 0.3);
	padding-top: 20px;
}

/* ==========================================================================
   CUSTOM INLINE SCROLLBAR (RPG STYLE)
   ========================================================================== */

/* Custom Scrollbar fr Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: rgba(var(--color-bg-dark-rgb), 0.95);
	border-left: 1px solid rgba(var(--color-accent-gold-rgb), 0.2);
	border-radius: 0 8px 8px 0;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #5a4515 0%, var(--color-accent-gold) 50%, #5a4515 100%);
	border: 1px solid #2a2010;
	border-radius: 6px;
	box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #7a5d20 0%, #ebd488 50%, #7a5d20 100%);
}

/* Firefox Scrollbar */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-accent-gold) rgba(var(--color-bg-dark-rgb), 0.95);
}

/* Falls die Talentliste extrem lang wird, eigenen Scrollbereich geben */
.skill-scroll-container {
	max-height: 60vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 15px; /* Platz fr die Scrollbar, damit der Text nicht klebt */
	border-top: 1px solid rgba(var(--color-accent-gold-rgb), 0.1);
	border-bottom: 1px solid rgba(var(--color-accent-gold-rgb), 0.1);
	margin-top: 10px;
}

/* ==========================================================================
   TOOLTIPS UND HILFEN
   ========================================================================== */

.help-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background: #1a1a20;
	color: var(--color-accent-gold);
	border: 1px solid var(--color-accent-gold);
	border-radius: 50%;
	text-align: center;
	line-height: 16px;
	font-size: 12px;
	margin-left: 8px;
	cursor: help;
	position: relative;
	font-family: var(--font-ui);
}

.help-icon:hover::after {
	content: attr(data-tooltip);
	position: fixed;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(180deg, rgba(30,30,40,0.95) 0%, rgba(10,10,15,0.95) 100%);
	border: 1px solid var(--color-accent-gold);
	border-top: 3px solid var(--color-accent-gold);
	color: var(--color-text-light);
	padding: 15px 20px;
	border-radius: 6px;
	white-space: pre-wrap;
	width: 80%;
	max-width: 600px;
	z-index: 99999;
	box-shadow: 0 5px 20px rgba(0,0,0,0.9);
	font-size: 1.1em;
	line-height: 1.5;
	text-align: center;
	text-shadow: none;
	font-weight: normal;
	pointer-events: none;
}

.attr-label.recommended {
	text-shadow: 0 0 10px rgba(var(--color-accent-gold-rgb), 0.8);
	animation: pulseGold 2s infinite alternate;
}

@keyframes pulseGold {
	from { color: var(--color-accent-gold); }
	to { color: #fff; }
}

/* ==========================================================================
   ANIMATIONEN (CHRONIK)
   ========================================================================== */

.chronicle-entry {
	opacity: 0;
	transform: translateY(15px);
	animation: revealEntry 1.5s forwards ease-out;
	margin-bottom: 15px;
	color: var(--color-text-gold-soft);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

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


/* --- Char Select --- */
.char-select-screen {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 20px;
	box-sizing: border-box;
}

.char-select-box {
	background: var(--color-bg-panel);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(var(--color-accent-gold-rgb), 0.4);
	border-radius: var(--radius-box);
	padding: 30px;
	width: 100%;
	max-width: 500px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(var(--color-accent-gold-rgb), 0.1);
	text-align: center;
	margin: 0 auto;
	color: var(--color-text-gold-soft);
}

.char-select-box h2 {
	color: var(--color-accent-gold);
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 2em;
	text-shadow: 0 0 10px rgba(var(--color-accent-gold-rgb), 0.5);
	border-bottom: 1px solid rgba(var(--color-accent-gold-rgb), 0.3);
	padding-bottom: 10px;
}

/* --- Utilities --- */
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }
.flex-grow-1 { flex-grow: 1; }
.mt-0 { margin-top: 0 !important; }
.m-0 { margin: 0 !important; }
.mr-8 { margin-right: 8px; }
.text-muted { color: var(--color-text-muted); }
.text-muted-center { text-align: center; color: var(--color-text-muted-dark); }
.flex-align-center { display: flex; align-items: center; }
.flex-align-center-gap { display: flex; gap: 10px; align-items: center; }
.flex-center-gap { display: flex; gap: 10px; justify-content: center; align-items: center; }
.block-mt-15 { display: block; margin-top: 15px; }

/* --- Components --- */
.btn-prev {
	width: 40px;
	height: 40px;
	font-size: 1.2em;
}

.btn-next {
	width: auto;
	padding: 0 15px;
	height: 40px;
	font-size: 1.2em;
	font-family: var(--font-rpg);
}

.btn-auto {
	width: auto !important;
	margin: 0 !important;
}

.btn-dice {
	width: 44px;
	height: 44px;
	margin-top: 0;
	font-size: 1.2em;
	border-radius: var(--radius-card);
}

.btn-dark {
	background: #333 !important;
}

.btn-reroll {
	margin: 0 !important;
	width: auto !important;
	background: linear-gradient(145deg, #a83232 0%, #d14f4f 100%) !important;
}

.step-title {
	flex-grow: 1;
	text-align: center;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.chronicle-container {
	min-height: 200px;
	padding: 15px;
	background: var(--color-bg-input);
	border: 1px solid rgba(var(--color-accent-gold-rgb), 0.3);
	border-radius: var(--radius-card);
	font-family: var(--font-rpg);
	font-size: 1.2em;
	line-height: 1.5;
}

.p-20-center {
	text-align: center;
	padding: 20px;
}

.mt-15-center {
	margin-top: 15px;
	text-align: center;
}

.legacy-title {
	color: var(--color-accent-gold);
	font-family: var(--font-rpg);
	font-size: 1.5em;
	margin-top: -10px;
	margin-bottom: 20px;
	text-shadow: 0 0 5px rgba(var(--color-accent-gold-rgb), 0.5);
}

.mb-20-muted {
	margin-bottom: 20px;
	color: var(--color-text-muted);
}

.flex-gap-mb-20 {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.no-chars-message {
	text-align: center;
	color: var(--color-text-muted);
	margin: 20px 0;
	font-style: italic;
}

.char-avatar {
	width: 50px;
	height: 50px;
	background: var(--color-accent-gold);
	color: #0a0a0f;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	flex-shrink: 0;
	box-shadow: 0 0 10px rgba(var(--color-accent-gold-rgb), 0.3);
}

.select-card-dynamic {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 15px;
}

.char-info {
	flex-grow: 1;
}

.char-action-icon {
	color: var(--color-accent-gold);
	font-size: 1.5em;
	text-shadow: 0 0 5px rgba(var(--color-accent-gold-rgb), 0.5);
}

.restriction-note {
	color: var(--color-error);
	font-size: 0.8em;
	margin-top: 5px;
}

.attr-label-box {
	display: flex;
	align-items: center;
	min-width: 80px;
}


/* ============================================================
   LANDING PAGE
   ============================================================ */

.landing-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background: #0a0a0f;
color: #e8d5a3;
font-family: 'IM Fell English', serif;
}

/* --- TopNav --- */
.landing-topnav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
height: 64px;
background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0) 100%);
border-bottom: 1px solid rgba(200,169,81,0.2);
}

.landing-logo {
font-size: 1.8rem;
font-weight: bold;
color: #c8a951;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 0 0 20px rgba(200,169,81,0.5);
}

.topnav-actions {
display: flex;
align-items: center;
gap: 12px;
}

.topnav-greeting {
color: #c8a951;
font-size: 0.95rem;
margin-right: 8px;
}

/* --- WoW-Style Buttons --- */
.btn-wow {
padding: 9px 22px;
background: linear-gradient(to bottom, #c8a951 0%, #8b6914 100%);
color: #1a0f00;
border: 1px solid #c8a951;
font-family: 'IM Fell English', serif;
font-size: 0.95rem;
font-weight: bold;
cursor: pointer;
letter-spacing: 1px;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
transition: filter 0.2s, transform 0.1s;
}
.btn-wow:hover {
filter: brightness(1.2);
transform: translateY(-1px);
}
.btn-wow:active { transform: translateY(0); }

.btn-wow-outline {
padding: 8px 20px;
background: transparent;
color: #c8a951;
border: 1px solid #c8a951;
font-family: 'IM Fell English', serif;
font-size: 0.95rem;
cursor: pointer;
letter-spacing: 1px;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
transition: background 0.2s, color 0.2s;
}
.btn-wow-outline:hover {
background: rgba(200,169,81,0.15);
}

.btn-topnav { font-size: 0.9rem; padding: 7px 18px; }
.btn-topnav-play { font-size: 1rem; padding: 9px 24px; }

/* --- Hero --- */
.landing-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background:
radial-gradient(ellipse at center bottom, rgba(80,30,10,0.6) 0%, transparent 70%),
linear-gradient(160deg, #0a0a0f 0%, #1a0f00 50%, #0a0a0f 100%);
overflow: hidden;
}

.hero-overlay {
position: absolute;
inset: 0;
background: url('/assets/images/hero-bg.jpg') center/cover no-repeat;
opacity: 0.18;
pointer-events: none;
}

.hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 20px;
}

.hero-title {
font-size: clamp(3.5rem, 10vw, 7rem);
color: #c8a951;
text-shadow: 0 0 40px rgba(200,169,81,0.4), 0 2px 8px rgba(0,0,0,0.8);
letter-spacing: 8px;
text-transform: uppercase;
margin: 0 0 20px;
}

.hero-subtitle {
font-size: clamp(1rem, 2.5vw, 1.4rem);
color: #b8a87a;
letter-spacing: 2px;
margin: 0 0 40px;
font-style: italic;
}

.btn-hero-cta {
font-size: 1.2rem !important;
padding: 14px 40px !important;
clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
box-shadow: 0 0 30px rgba(200,169,81,0.3);
}

/* --- Cultures Section --- */
.landing-cultures-section {
padding: 80px 40px;
background: linear-gradient(to bottom, #0a0a0f, #0f0a05, #0a0a0f);
}

.section-title {
text-align: center;
font-size: 2rem;
color: #c8a951;
letter-spacing: 4px;
text-transform: uppercase;
margin: 0 0 50px;
text-shadow: 0 0 20px rgba(200,169,81,0.3);
}
.section-title::before,
.section-title::after {
content: ' ✦ ';
color: rgba(200,169,81,0.5);
}

.cultures-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
max-width: 1400px;
margin: 0 auto;
}

.culture-card {
background: linear-gradient(to bottom, #1a1208, #0f0a05);
border: 1px solid rgba(200,169,81,0.25);
overflow: hidden;
cursor: pointer;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.culture-card:hover {
transform: translateY(-4px);
border-color: #c8a951;
box-shadow: 0 8px 30px rgba(200,169,81,0.2);
}

.culture-card-img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
object-position: top;
display: block;
filter: saturate(0.85);
transition: filter 0.2s;
}
.culture-card:hover .culture-card-img {
filter: saturate(1.1);
}

.culture-card-info {
padding: 12px 14px 14px;
}

.culture-card-name {
font-size: 1rem;
color: #c8a951;
margin: 0 0 5px;
letter-spacing: 1px;
}

.culture-card-desc {
font-size: 0.78rem;
color: #8a7a5a;
margin: 0;
font-style: italic;
line-height: 1.4;
}

/* --- Footer --- */
.landing-footer {
padding: 24px 40px;
text-align: center;
color: #4a3f2a;
font-size: 0.8rem;
border-top: 1px solid rgba(200,169,81,0.1);
}


/* ============================================================
   KULTUREN-SEITE
   ============================================================ */

.cultures-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background: #0a0a0f;
}

.cultures-hero {
padding: 120px 40px 60px;
text-align: center;
background: linear-gradient(to bottom, rgba(200,169,81,0.08) 0%, transparent 100%);
border-bottom: 1px solid rgba(200,169,81,0.15);
}

.topnav-link {
color: #b8a87a;
text-decoration: none;
font-family: 'IM Fell English', serif;
font-size: 0.95rem;
letter-spacing: 1px;
padding: 4px 2px;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
cursor: pointer;
}
.topnav-link:hover,
.topnav-link.active {
color: #c8a951;
border-bottom-color: #c8a951;
}

.topnav-links {
display: flex;
gap: 28px;
align-items: center;
}

.cultures-detail-section {
padding: 60px 40px 80px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}

.cultures-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
}

.culture-detail-card {
display: flex;
background: linear-gradient(135deg, #1a1208, #0f0a05);
border: 1px solid rgba(200,169,81,0.2);
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.culture-detail-card:hover {
border-color: #c8a951;
box-shadow: 0 6px 30px rgba(200,169,81,0.15);
}

.cdc-img-wrap {
flex: 0 0 140px;
overflow: hidden;
}
.cdc-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
filter: saturate(0.85);
transition: filter 0.2s;
}
.culture-detail-card:hover .cdc-img {
filter: saturate(1.1);
}

.cdc-body {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}

.cdc-name {
font-size: 1.3rem;
color: #c8a951;
margin: 0;
letter-spacing: 2px;
}

.cdc-desc {
font-size: 0.85rem;
color: #a89870;
margin: 0;
line-height: 1.6;
font-style: italic;
flex: 1;
}

.cdc-stats {
display: flex;
flex-direction: column;
gap: 4px;
border-top: 1px solid rgba(200,169,81,0.15);
padding-top: 10px;
}

.cdc-stat {
font-size: 0.78rem;
color: #7a6a4a;
}
.cdc-stat em {
color: #c8a951;
font-style: normal;
}


/* ============================================================
   BERUFE-SEITE
   ============================================================ */

.calling-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background: #0a0a0f;
}

.calling-section {
padding: 60px 40px 80px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}

.calling-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 24px;
}

.profession-card {
display: flex;
gap: 20px;
background: linear-gradient(135deg, #1a1208, #0f0a05);
border: 1px solid rgba(200,169,81,0.2);
padding: 22px;
transition: border-color 0.2s, box-shadow 0.2s;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.profession-card:hover {
border-color: #c8a951;
box-shadow: 0 6px 30px rgba(200,169,81,0.15);
}

.prof-icon {
font-size: 2.4rem;
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
}

.prof-body {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}

.prof-name {
font-size: 1.2rem;
color: #c8a951;
margin: 0;
letter-spacing: 2px;
}

.prof-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.prof-tag {
font-size: 0.7rem;
padding: 2px 8px;
border: 1px solid;
border-radius: 2px;
letter-spacing: 0.5px;
font-family: sans-serif;
}

.prof-desc {
font-size: 0.85rem;
color: #a89870;
margin: 0;
line-height: 1.6;
font-style: italic;
}

.prof-meta {
display: flex;
gap: 16px;
flex-wrap: wrap;
border-top: 1px solid rgba(200,169,81,0.12);
padding-top: 8px;
}

.prof-meta-item {
font-size: 0.78rem;
color: #7a6a4a;
}
.prof-meta-item em {
color: #c8a951;
font-style: normal;
}

.prof-restriction {
font-size: 0.75rem;
color: #c0392b;
background: rgba(192,57,43,0.1);
border: 1px solid rgba(192,57,43,0.3);
padding: 4px 8px;
}


/* ============================================================
   DIE WELT-SEITE
   ============================================================ */

.world-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background: #0a0a0f;
}

.world-map-section {
padding: 100px 40px 60px;
text-align: center;
background: linear-gradient(to bottom, rgba(200,169,81,0.06) 0%, transparent 100%);
}

.world-title {
margin-bottom: 12px !important;
}

.map-container {
max-width: 1100px;
margin: 40px auto 0;
border: 1px solid rgba(200,169,81,0.3);
box-shadow: 0 0 60px rgba(200,169,81,0.1);
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
overflow: hidden;
}

.world-map-img {
width: 100%;
display: block;
filter: saturate(0.9) sepia(0.15);
transition: filter 0.3s;
}
.map-container:hover .world-map-img {
filter: saturate(1.1) sepia(0);
}

.locations-section {
padding: 60px 40px 80px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}

.locations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}

.location-card {
background: linear-gradient(135deg, #1a1208, #0f0a05);
border: 1px solid rgba(200,169,81,0.2);
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color 0.2s, box-shadow 0.2s;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.location-card:hover {
border-color: #c8a951;
box-shadow: 0 4px 24px rgba(200,169,81,0.15);
}

.loc-header {
display: flex;
align-items: flex-start;
gap: 14px;
}

.loc-icon {
font-size: 2rem;
line-height: 1;
flex-shrink: 0;
}

.loc-title-wrap {
display: flex;
flex-direction: column;
gap: 2px;
}

.loc-name {
font-size: 1.15rem;
color: #c8a951;
margin: 0;
letter-spacing: 1px;
}

.loc-subtitle {
font-size: 0.75rem;
color: #7a6a4a;
font-style: italic;
}

.loc-desc {
font-size: 0.85rem;
color: #a89870;
margin: 0;
line-height: 1.6;
font-style: italic;
flex: 1;
}

.loc-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(200,169,81,0.12);
padding-top: 10px;
flex-wrap: wrap;
gap: 8px;
}

.loc-culture {
font-size: 0.75rem;
color: #7a6a4a;
}
.loc-culture em {
color: #c8a951;
font-style: normal;
}

.loc-danger {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
}

.danger-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
display: inline-block;
}
.danger-dot.filled {
border-color: transparent;
}


/* --- Pantheon & Widersacher --- */

.world-lore-section {
padding: 60px 40px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
.world-lore-dark {
max-width: 100%;
background: linear-gradient(to bottom, #0f0a05, #0a0a0f);
padding: 60px calc((100% - 1400px) / 2 + 40px);
}

.lore-intro {
text-align: center;
color: #8a7a5a;
font-style: italic;
margin: -20px 0 40px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.section-title-dark {
color: #c0392b !important;
text-shadow: 0 0 20px rgba(192,57,43,0.3) !important;
}
.section-title-dark::before,
.section-title-dark::after {
content: ' ☠ ' !important;
color: rgba(192,57,43,0.4) !important;
}

/* Pantheon Grid */
.pantheon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}

.pantheon-card {
display: flex;
gap: 14px;
align-items: flex-start;
background: linear-gradient(135deg, #1a1208, #0f0a05);
border: 1px solid rgba(200,169,81,0.15);
border-left: 3px solid var(--god-color);
padding: 16px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.pantheon-card:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
border-color: var(--god-color);
}

.god-icon { font-size: 2rem; flex-shrink: 0; }
.god-body { display: flex; flex-direction: column; gap: 4px; }
.god-name { color: var(--god-color); margin: 0; font-size: 1.1rem; letter-spacing: 1px; }
.god-aspect { font-size: 0.82rem; color: #c8a951; font-style: italic; }
.god-focus { font-size: 0.78rem; color: #7a6a4a; }
.god-bonus { font-size: 0.75rem; color: #6a5a3a; margin-top: 4px; }
.god-bonus em { color: #c8a951; font-style: normal; }

/* Adversaries Grid */
.adversaries-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
max-width: 1400px;
margin: 0 auto;
}

.adversary-card {
background: linear-gradient(135deg, #1a0808, #0f0505);
border: 1px solid rgba(192,57,43,0.2);
border-left: 3px solid var(--adv-color);
padding: 18px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.adversary-card:hover {
border-color: var(--adv-color);
box-shadow: 0 4px 20px rgba(192,57,43,0.1);
}

.adv-header { display: flex; gap: 12px; align-items: flex-start; }
.adv-icon { font-size: 1.8rem; flex-shrink: 0; }
.adv-name { color: var(--adv-color); margin: 0; font-size: 1.05rem; letter-spacing: 1px; }
.adv-title { font-size: 0.75rem; color: #7a4a4a; font-style: italic; }

.adv-rival { font-size: 0.75rem; color: #7a6a4a; }
.adv-rival em { color: #c8a951; font-style: normal; }

.adv-gift {
display: flex;
flex-direction: column;
gap: 2px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
padding: 8px 10px;
}
.adv-gift-label { font-size: 0.78rem; color: #c8a951; }
.adv-gift-bonus { font-size: 0.75rem; color: #27ae60; }

.adv-flaw {
font-size: 0.78rem;
color: #c0392b;
font-style: italic;
}


/* ═══════════════════════════════════════════════════════
   TALENTE-SEITE
   ═══════════════════════════════════════════════════════ */
.talents-page {
  background: #0d0d0d;
  color: #e8dcc8;
  min-height: 100vh;
}

.talents-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px 40px;
}

.talents-prog-section {
  background: rgba(255,255,255,0.02);
  max-width: 100%;
  padding: 60px 0 40px;
}
.talents-prog-section > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.talents-section-title {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: #c9a84c;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(201,168,76,0.3);
  padding-bottom: 10px;
}

.talents-section-intro {
  color: #b0a090;
  font-size: 1rem;
  margin-bottom: 30px;
  max-width: 800px;
  line-height: 1.7;
}

/* Kategorie-Grid */
.talents-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.talent-cat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--cat-color, #555);
  border-top: 4px solid var(--cat-color, #c9a84c);
  border-radius: 8px;
  padding: 20px 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.talent-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.talent-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.talent-cat-icon { font-size: 1.6rem; }
.talent-cat-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: var(--cat-color, #c9a84c);
  font-weight: 700;
}
.talent-cat-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.talent-skill-tag {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  font-size: 0.72rem;
  padding: 3px 9px;
  color: #d0c0a0;
  white-space: nowrap;
}
.talent-skill-tag.small { font-size: 0.68rem; padding: 2px 7px; }

/* Progressions-Tabelle */
.talents-prog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.talents-prog-table th {
  background: rgba(201,168,76,0.15);
  color: #c9a84c;
  text-align: left;
  padding: 10px 16px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border-bottom: 2px solid rgba(201,168,76,0.3);
}
.talents-prog-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #c8baa8;
}
.talents-prog-table tr:hover td { background: rgba(255,255,255,0.03); }
.prog-range { color: #c9a84c; font-weight: 700; width: 80px; }
.prog-label { color: #e8dcc8; font-weight: 600; width: 160px; }

/* Talentlehrer-Grid */
.talents-teachers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.teacher-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--cat-color, #c9a84c);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: background 0.2s;
}
.teacher-card:hover { background: rgba(255,255,255,0.06); }
.teacher-icon { font-size: 1.8rem; min-width: 36px; text-align: center; }
.teacher-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: #e8dcc8;
  margin-bottom: 4px;
}
.teacher-location {
  font-size: 0.8rem;
  color: #8a7a65;
  margin-bottom: 8px;
}
.teacher-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.teacher-note {
  font-size: 0.75rem;
  color: #c9a84c;
  background: rgba(201,168,76,0.1);
  border-radius: 4px;
  padding: 3px 8px;
  display: inline-block;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════
   DIE WELT – CHRONIKEN
   ═══════════════════════════════════════════════════════ */
.world-chronicles-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

.chronicles-story {
  margin: 30px 0 40px;
}

.chronicles-text {
  color: #c8baa8;
  font-size: 1.05rem;
  line-height: 1.85;
  margin-bottom: 20px;
  text-indent: 1.5em;
}

.chronicles-prophecy {
  border-left: 4px solid #c9a84c;
  background: rgba(201, 168, 76, 0.06);
  padding: 24px 28px;
  margin: 40px 0;
  border-radius: 0 8px 8px 0;
}

.prophecy-quote {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: #e8dcc8;
  font-style: italic;
  line-height: 1.7;
  margin: 0 0 12px 0;
}

.prophecy-source {
  display: block;
  font-size: 0.82rem;
  color: #8a7a65;
  letter-spacing: 0.03em;
}

.chronicles-timeline-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: #c9a84c;
  margin: 40px 0 20px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  padding-bottom: 8px;
}

.chronicles-timeline {
  position: relative;
  padding-left: 40px;
}

.chronicles-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #c9a84c, rgba(201,168,76,0.1));
}

.timeline-item {
  position: relative;
  margin-bottom: 32px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.timeline-dot {
  position: absolute;
  left: -36px;
  top: 0;
  width: 28px;
  height: 28px;
  background: #1a1510;
  border: 2px solid #c9a84c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.timeline-content { flex: 1; }

.timeline-year {
  display: inline-block;
  font-size: 0.75rem;
  color: #c9a84c;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  background: rgba(201,168,76,0.1);
  padding: 2px 8px;
  border-radius: 10px;
}

.timeline-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #e8dcc8;
  margin: 6px 0 6px;
}

.timeline-desc {
  color: #9a8a75;
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PODCAST PAGE
   ═══════════════════════════════════════════════════════════════ */

.podcast-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #0a0a0f;
}

/* Hero */
.podcast-hero {
  position: relative;
  padding: 100px 40px 60px;
  background: linear-gradient(to bottom, rgba(74,158,255,0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(200,169,81,0.15);
}
.podcast-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center top, rgba(74,158,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.podcast-hero-content {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.podcast-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #4a9eff;
  border: 1px solid rgba(74,158,255,0.4);
  padding: 3px 12px;
  margin-bottom: 16px;
}
.podcast-title {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--gold, #c8a951);
  font-family: 'IM Fell English', serif;
  margin: 0 0 12px;
  line-height: 1.3;
}
.podcast-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  margin: 0 0 16px;
  line-height: 1.6;
}
.podcast-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
}
.podcast-meta-sep { color: rgba(255,255,255,0.2); }

/* Main layout */
.podcast-main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .podcast-main { grid-template-columns: 1fr; }
}

/* Video */
.podcast-video-wrapper {
  position: relative;
}
.podcast-video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #0d0d14;
  border: 1px solid rgba(200,169,81,0.25);
  overflow: hidden;
}
.podcast-video-container iframe,
.podcast-video-container > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.podcast-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 0.95rem;
  background: #0d0d14;
}

/* Sidebar */
.podcast-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.podcast-chapters-box,
.podcast-speakers-box {
  background: linear-gradient(135deg, #1a1208, #0f0a05);
  border: 1px solid rgba(200,169,81,0.2);
  padding: 20px;
}
.podcast-chapters-title,
.podcast-speakers-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(200,169,81,0.7);
  margin: 0 0 14px;
}

/* Chapters */
.podcast-chapters-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.podcast-chapter-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  padding: 4px 0;
  border-bottom: 1px solid rgba(200,169,81,0.06);
  transition: color 0.2s;
}
.podcast-chapter-item:last-child { border-bottom: none; }
.podcast-chapter-item:hover { color: rgba(255,255,255,0.9); }
.podcast-chapter-time {
  font-family: monospace;
  font-size: 0.78rem;
  color: #4a9eff;
  min-width: 38px;
  flex-shrink: 0;
}

/* Speakers */
.podcast-speaker {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(200,169,81,0.08);
}
.podcast-speaker:last-child { border-bottom: none; }
.podcast-speaker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.podcast-speaker strong { font-size: 0.9rem; color: rgba(255,255,255,0.9); display: block; margin-bottom: 2px; }
.podcast-speaker-role { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin: 0; }

/* ═══════════════════════════════════════════
   GAME – BASE
═══════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
canvas { display: block; }

/* ═══════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════ */
#loading-screen {
  position: fixed; inset: 0; z-index: 99999;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.8s ease;
}
#loading-screen.fade-out { opacity: 0; pointer-events: none; }
#loading-bg {
  position: absolute; inset: 0;
  background-image: url('../images/bifrostark_loginscreen.jpg');
  background-size: cover; background-position: center;
  filter: brightness(0.45);
}
#loading-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 24px;
  width: min(480px, 90vw);
}
#loading-title {
  font-family: 'Segoe UI', serif;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 300; letter-spacing: 0.18em;
  color: #f0d880;
  text-shadow: 0 0 40px rgba(240,180,40,0.6), 0 2px 8px rgba(0,0,0,0.9);
  text-transform: uppercase;
}
#loading-subtitle {
  font-size: 0.8rem; letter-spacing: 0.3em;
  color: rgba(200,170,80,0.6); text-transform: uppercase;
  margin-top: -18px;
}
#loading-bar-wrap {
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
}
#loading-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7a4e00, #f0c030, #ffe680);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s linear infinite;
  transition: width 0.3s ease;
  border-radius: 2px;
}
@keyframes loading-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#loading-status {
  font-size: 0.75rem; color: rgba(200,180,120,0.6);
  letter-spacing: 0.12em; min-height: 1.2em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   VOLLBILD-MAP (Taste M)
═══════════════════════════════════════════ */
#fullmap {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  pointer-events: all;
}
#fullmap-inner {
  width: 85vmin; height: 85vmin; max-width: 900px; max-height: 900px;
  background: #1a1510; border: 2px solid rgba(160,120,60,0.6);
  border-radius: 4px; display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(0,0,0,0.9);
}
#fullmap-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(160,120,60,0.4);
  color: rgba(220,180,100,0.9); font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase;
}
#fullmap-close {
  background: none; border: 1px solid rgba(160,120,60,0.4);
  color: rgba(200,160,80,0.8); cursor: pointer; padding: 2px 8px;
  border-radius: 2px; font-size: 13px;
}
#fullmap-close:hover { background: rgba(160,120,60,0.3); }
#fullmap-img-wrap { flex: 1; position: relative; overflow: hidden; border-radius: 0 0 2px 2px; }
#fullmap-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.3) brightness(0.7); }
#fullmap-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ═══════════════════════════════════════════
   MINIMAP (oben rechts)
═══════════════════════════════════════════ */
#minimap-wrap { position: fixed; top: 16px; right: 16px; width: 180px; height: 180px; }
#minimap-canvas {
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(0,0,0,0.8), 0 0 4px rgba(120,90,40,0.6);
}
#minimap-label {
  position: absolute; bottom: -18px; left: 0; right: 0;
  text-align: center; font-size: 10px;
  color: rgba(200,170,80,0.7); pointer-events: none;
  letter-spacing: 1px; text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   DEBUG HUD (oben links)
═══════════════════════════════════════════ */
#debug-hud {
  position: fixed; top: 10px; left: 10px;
  color: rgba(255,255,255,0.7); font-size: 11px;
  background: rgba(0,0,0,0.4); padding: 6px 10px;
  border-radius: 4px; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════
   GAME GUI WRAPPER
═══════════════════════════════════════════ */
#game-gui { position: fixed; inset: 0; pointer-events: none; }
#game-gui > * { pointer-events: all; }

/* ═══════════════════════════════════════════
   PLAYER FRAME (unten links) – HP/Mana Orbs
═══════════════════════════════════════════ */
#player-frame {
  position: fixed; bottom: 80px; left: 20px;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(10,8,6,0.92), rgba(25,18,10,0.92));
  border: 1px solid rgba(120,90,40,0.6);
  border-radius: 6px; padding: 8px 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,200,80,0.1);
}
.orb-wrap { position: relative; width: 44px; height: 44px; }
.orb { position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 50%; transition: height 0.2s ease; }
.orb-wrap::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid rgba(80,60,30,0.8);
  background: rgba(0,0,0,0.6); z-index: 1;
}
.orb { z-index: 2; clip-path: circle(50% at 50% 50%); }
.orb-hp { background: linear-gradient(180deg, #e84040, #8b0000); }
.orb-mp { background: linear-gradient(180deg, #4080e8, #00008b); }
.orb-label {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff; font-weight: bold;
  text-shadow: 0 1px 2px #000; pointer-events: none;
  text-align: center; line-height: 1.1;
}
.player-name {
  color: #f0d080; font-size: 12px; font-weight: bold;
  text-shadow: 0 0 6px rgba(240,180,40,0.5); white-space: nowrap;
}

/* ═══════════════════════════════════════════
   XP BAR (ganz unten)
═══════════════════════════════════════════ */
#xp-bar-wrap {
  position: fixed; bottom: 0; left: 0; right: 0; height: 6px;
  background: rgba(0,0,0,0.7); border-top: 1px solid rgba(100,70,20,0.5);
}
#xp-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7a4e00, #f0c030, #7a4e00);
  background-size: 200% 100%;
  animation: xp-shimmer 2s linear infinite;
  transition: width 0.4s ease;
}
@keyframes xp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#xp-label {
  position: absolute; right: 8px; top: -16px;
  font-size: 10px; color: rgba(240,200,80,0.7); pointer-events: none;
}

/* ═══════════════════════════════════════════
   ACTION BAR (Mitte unten)
═══════════════════════════════════════════ */
#actionbar {
  position: fixed; bottom: 10px;
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
#actionbar-slots {
  display: flex; gap: 3px;
  background: linear-gradient(180deg, rgba(15,12,8,0.95), rgba(25,18,10,0.95));
  border: 1px solid rgba(100,75,30,0.7);
  border-radius: 6px; padding: 4px;
  box-shadow: 0 0 20px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,200,60,0.08);
}
#gcd-canvas { position: absolute; top: 4px; left: 4px; pointer-events: none; border-radius: 4px; }
.ab-slot {
  position: relative; width: 50px; height: 50px;
  background: linear-gradient(135deg, #1a1208, #0d0904);
  border: 1px solid rgba(80,60,20,0.8);
  border-radius: 4px; cursor: pointer; overflow: hidden;
  transition: border-color 0.1s;
}
.ab-slot:hover { border-color: rgba(220,180,60,0.8); }
.ab-slot.on-cd { filter: brightness(0.65); }
.ab-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.ab-cd-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; height: 0%;
  background: rgba(0,0,0,0.72); transition: height 0.1s linear; pointer-events: none;
}
.ab-cd-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: bold; color: #fff;
  text-shadow: 0 0 4px #000; pointer-events: none;
}
.ab-keybind {
  position: absolute; bottom: 2px; right: 3px;
  font-size: 9px; color: rgba(200,180,100,0.7);
  pointer-events: none; font-weight: bold;
}
.ab-slot[title]:hover::after {
  content: attr(title);
  position: absolute; bottom: 110%; left: 50%;
  transform: translateX(-50%);
  background: rgba(8,6,4,0.97); color: #f0e0b0;
  border: 1px solid rgba(120,90,40,0.8);
  padding: 4px 8px; border-radius: 4px;
  font-size: 11px; white-space: nowrap;
  pointer-events: none; z-index: 100;
}