/* =========================================================
   1. RESET & GLOBAL BASIS
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Basis-Schriftgröße für die App – rem-Skalierung */
    font-size: 20px;

    /* Semantische Font-Sizes */
    --font-xs: 0.7rem;
    --font-sm: 0.8rem;
    --font-md: 0.9rem;
    --font-base: 1rem;
    --font-lg: 1.1rem;
    --font-xl: 1.25rem;
    --font-xxl: 1.5rem;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    background-color: #000;
	
    background-image: url("../img/backgrounds/darkforest_start.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;

    color: #e5e7eb;
    font-size: var(--font-base);
}


/* =========================================================
   2. LAYOUT: GRUNDSTRUKTUR (HEADER, MAIN)
   ========================================================= */

header {
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    background: #020617;
    border-bottom: 1px solid #1f2937;
}

header h1 {
    font-size: var(--font-xl);
    margin: 0;
}

main {
    padding: 1rem;
}


/* =========================================================
   3. INTRO-ZUSTAND & START-OVERLAY
   ========================================================= */

/* UI verstecken, solange Intro aktiv ist */
body.intro-active header,
body.intro-active #guildBar,
body.intro-active #satisfactionContainer,
body.intro-active main,
body.intro-active #consolePanel,
body.intro-active #assignmentPopup,
body.intro-active #heroPopup,
body.intro-active #gameEndOverlay,
body.intro-active #landSelectOverlay {
    display: none;
}

/* Im Intro: nur das Start-Overlay anzeigen */
body.intro-active #gameStartOverlay {
    display: flex;
}

/* Vollbild-Overlay für Spielstart */
#gameStartOverlay {
    position: fixed;
    inset: 0;

    background-color: #000;
	
    background-image: url("../img/backgrounds/darkforest_start.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
	
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

#startlogo{
	max-width: 90%;
}


/* Klassischer Start-Button (falls verwendet) */
#gameStartBtn, #loadLastGameBtn  {
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    border: 1px solid #22c55e;
    background: #16a34a;
    color: #f9fafb;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 2px;
}

#gameStartBtn:hover {
    background: #15803d;
}

#loadLastGameBtn {
    margin-top: 2px;
	border: 1px solid #222;
	background: #333;
}

#loadLastGameBtn:hover {
    background: #444;
}



/* Glas-Box für Starttext */
.game-start-content {
    position: relative;
    text-align: center;
    width: min(90vw, 360px);
    background: rgba(0,0,0,0.55);
    padding: 40px 18px;
    border-radius: 10px;
    backdrop-filter: blur(3px);
    border: 1px solid #4b5563;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
}

.game-start-title {
    font-size: 20px;
    margin: 8px 0;
    color: #facc15;
    letter-spacing: 0.3px;
}

.game-start-text {
    font-size: 16px;
    line-height: 1.35;
    color: #e5e7eb;
    margin-bottom: 16px;
}

/* Alternativer Start-Button (gleiche Funktionalität, anderes Design) */
.game-start-button {
    /*
	padding: 10px 18px;
    font-size: 15px;
    border-radius: 6px;
    border: none;
    background: #3b82f6;
    color: white;
    cursor: pointer;
    margin-bottom: 30px;
    transition: 0.15s;
	*/
}
.game-start-button:hover {
    background: #2563eb;
}

/* Rotes Ribbon oben rechts */
.game-start-ribbon {
    position: absolute;
    top: 12px;
    right: -30px;
    padding: 0.15rem 1.4rem;
    background: #ef4444;
    color: #f9fafb;
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transform: rotate(25deg);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 2;
}

/* Tipp-Box im Startoverlay */
.game-start-hintbox {
    background: rgba(255,255,255,0.08);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #d1d5db;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hint-title {
    font-weight: bold;
    font-size: 12px;
    color: #facc15;
}

.hint-text {
    font-size: 12px;
}


/* =========================================================
   4. BUTTONS (HEADER, SOUND, PAUSE)
   ========================================================= */

#consoleToggleBtn,
#musicToggleBtn,
#sfxToggleBtn,
#pauseToggleBtn {
    padding: 0.35rem 0.75rem;
    font-size: var(--font-xs);
    border-radius: 4px;
    border: 1px solid #4b5563;
    background: #111827;
    color: #e5e7eb;
    cursor: pointer;
}

/* Abstände */
#musicToggleBtn {
    margin-right: 0.5rem;
}

#sfxToggleBtn {
    margin-right: 0.5rem;
}

#pauseToggleBtn {
    margin-right: 0.5rem;
}

/* Hover-Stil für Konsolen- und Sound-Buttons */
#consoleToggleBtn:hover,
#musicToggleBtn:hover,
#sfxToggleBtn:hover,
#soundToggleBtn:hover {
    background: #1f2937;
}

/* Optional / älterer Sound-Button (falls noch genutzt) */
#soundToggleBtn {
    margin-right: 0.5rem;
}

/* Pause-Button im Pausen-Zustand */
#pauseToggleBtn.paused {
    border-color: #facc15;
    color: #facc15;
    animation: pausePulse 1.4s ease-in-out infinite;
}

@keyframes pausePulse {
    0%   { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.9); }
    50%  { box-shadow: 0 0 8px 4px rgba(250, 204, 21, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.9); }
}


/* =========================================================
   5. GILDE / AGENTUR-LEISTE & LAND-WECHSEL
   ========================================================= */

/* Obere Info-Leiste (Coins, Land etc.) */
#guildBar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.4rem 1rem;
    background: #020617;
    border-bottom: 1px solid #111827;
}

#guildName {
    font-size: var(--font-sm);
    color: #e5e7eb;
    opacity: 0.85;
}

/* Coins-Anzeige */
#guildCoins, #changeLandBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #111827;
    border: 1px solid #4b5563;
    box-shadow: 0 0 8px rgba(0,0,0,0.35);
    white-space: nowrap;
}

/*
@media (max-width: 768px) {
	
	#guildCoins, #changeLandBtn {
		padding: 0.2rem 0.2rem;
	}

	#guildCoinsLabel, #globeLabel {
		display: none;
	}
}
*/

#guildCoinsIcon, #globeIcon {
    width: 20px;
    height: 20px;
    display: block;
}

#guildCoinsAmount {
    font-weight: 700;
    font-size: var(--font-sm);
    color: #fde68a;
}

#guildCoinsLabel, #globeLabel {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #e5e7eb;
    opacity: 0.8;
}

/* Button zum Land-Wechsel */
#changeLandBtn {
	cursor: pointer;
    margin-right: auto; /* schiebt Coins nach rechts */
}

#changeLandBtn:hover {
    background: #1f2937;
}

/* Land-Auswahl-Overlay */
#landSelectOverlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    display: none; /* per JS auf flex */
    align-items: center;
    justify-content: center;
    z-index: 11500;
}

/* Land-Auswahl-Popup */
#landSelectPopup {
    width: 420px;
    max-width: 90vw;
    background: #020617;
    border-radius: 10px;
    border: 1px solid #4b5563;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
    padding: 0.8rem 0.9rem 0.9rem;
    font-size: var(--font-sm);
}

#landSelectTitle {
    font-size: var(--font-md);
    font-weight: 600;
    margin-bottom: 0.4rem;
    text-align: center;
}

/* Warnhinweis zum Land-Wechsel */
#landSelectWarning {
    font-size: var(--font-xs);
    color: #f97316;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.5);
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
    text-align: center;
}

/* Liste der verfügbaren Länder */
#landSelectList {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.land-select-item {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #374151;
    background: #020617;
    color: #e5e7eb;
    font-size: var(--font-sm);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.land-select-item:hover {
    background: #111827;
    border-color: #4b5563;
}

.land-select-item.current {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4);
}

.land-select-item span.land-name {
    font-weight: 600;
}

.land-select-item span.land-badge {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a5b4fc;
}

/* Abbrechen-Button im Landpopup */
#landSelectCancelBtn {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #4b5563;
    background: #111827;
    color: #f9fafb;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
}

#landSelectCancelBtn:hover {
    background: #1f2937;
}

/* GUILD CHEST */

/* Guild-Chest-Button im Stil einer Hero-Karte */
#openGuildChestBtn, #openCollectionQuestBtn, #openQuestLogBtn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    border: 1px solid #666666;
    background: #111111;
    padding: 0.5rem;
    cursor: pointer;
    color: #e5e7eb;
    font-size: var(--font-xs);
    font-weight: 600;

    /* damit der Button nicht gestretcht wird */
    max-width: 120px;      /* kannst du bei Bedarf anpassen */
    gap: 0.35rem;
}

/* Icon im Button – nutzt dein Chest-Bild */
#openGuildChestBtn::before, #openCollectionQuestBtn::before, #openQuestLogBtn::before {
    content: "";
    display: block;
    width: 92px;
    height: 92px;
    border-radius: 6px;
    /* background-image: url("../img/elements/guildchest_200x200.jpg");*/
    background-size: cover;
    background-position: center;
}

#openGuildChestBtn::before {
    background-image: url("../img/elements/guildchest_200x200.jpg");
}

#openCollectionQuestBtn:before {
    background-image: url("../img/elements/quests_200x200.jpg");
}

#openQuestLogBtn:before {
    background-image: url("../img/elements/questlog_200x200.jpg");
}

/* Hover: nur leichte Umrandung, wie gewünscht */
#openGuildChestBtn:hover, #openCollectionQuestBtn:hover, #openQuestLogBtn:hover  {
    border-color: #facc15;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.35);
}


/* Vollbild-Overlay für die Guild-Chest (wie Hero-/Assignment-Overlay) */
#guildChestOverlay {
    position: fixed;
    inset: 0; /* top/right/bottom/left = 0 */
    background: rgba(0, 0, 0, 0.90);
    z-index: 8995; /* leicht unter guild-chest-panel, über Spielfeld */
    display: none;
}


.guild-chest-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  max-width: 95vw;
  max-height: 70vh;
  background: #020617;
  border: 1px solid #4b5563;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  z-index: 9001;
}

.guild-chest-panel.hidden {
  display: none;
}

.guild-chest-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  flex: 1;
}

.guild-chest-slots-info {
  font-size: var(--font-xs);
  color: #9ca3af;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.guild-chest-slots-info strong {
  color: #e5e7eb;
}

.guild-chest-content {
  flex: 1;
  overflow-y: auto;
  padding-top: 4px;
}

/* Grid mit Slots */
.guild-chest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}

/* Ein Slot */
.guild-chest-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  background: radial-gradient(circle at 30% 20%, #1f2937, #020617);
  border: 1px solid #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* overflow: hidden; */
}

/* Leerer Slot */
.guild-chest-slot.empty {
  background: transparent;
  border: 1px dashed #374151;
  cursor: default;
  opacity: 0.4;
}

/* Item-Icon im Slot */
.guild-chest-icon {
  max-width: 70%;
  max-height: 70%;
  image-rendering: pixelated;
}

/* Gelber Count-Badge */
.guild-chest-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #facc15;
  color: #1f2937;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #020617;
}

.guild-chest-info {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  max-width: 90vw;
  padding: 10px 12px;
  border-radius: 10px;
  background: #020617;
  border: 1px solid #4b5563;
  font-size: var(--font-xs);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
  z-index: 9010; /* über dem Chest-Panel */
}

.guild-chest-info.hidden {
  display: none;
}

.guild-chest-info-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.guild-chest-info-body {
  color: #9ca3af;
  white-space: normal; /* keine Text-Wurst mehr, wir layouten selbst */
}

/* Schöneres Layout für das Item-Info-Popup */
.guild-chest-info-main {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.guild-chest-info-icon-wrap {
  flex: 0 0 auto;
}

.guild-chest-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #4b5563;
  object-fit: cover;
  background: #020617;
}

.guild-chest-info-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.guild-chest-info-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.guild-chest-info-name {
  font-size: var(--font-sm);
  font-weight: 600;
  color: #e5e7eb;
}

.guild-chest-info-rarity {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Rarity-Farben (optional, je nach item.rarity) */
.guild-chest-info-rarity.rarity-common {
  color: #9ca3af;
}
.guild-chest-info-rarity.rarity-uncommon {
  color: #22c55e;
}
.guild-chest-info-rarity.rarity-rare {
  color: #3b82f6;
}
.guild-chest-info-rarity.rarity-epic {
  color: #a855f7;
}
.guild-chest-info-rarity.rarity-legendary {
  color: #f97316;
}

.guild-chest-info-meta {
  font-size: var(--font-xs);
  color: #9ca3af;
}

.guild-chest-info-section-title {
  margin-top: 6px;
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
}

.guild-chest-info-desc,
.guild-chest-info-effects-text {
  margin-top: 2px;
  font-size: var(--font-xs);
  color: #e5e7eb;
}


.guild-chest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 6px;
}

.guild-chest-content {
  overflow-y: auto;
  padding-right: 4px;
}

.guild-chest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(75,85,99,0.5);
  font-size: 13px;
}

.guild-chest-item:last-child {
  border-bottom: none;
}

.guild-chest-item-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.guild-chest-item-main {
  flex: 1;
}

.guild-chest-item-name {
  font-weight: 500;
}

.guild-chest-item-qty {
  font-size: 12px;
  color: #9ca3af;
}

.guild-chest-item-desc {
  font-size: 11px;
  color: #9ca3af;
}

.guild-chest-empty {
  font-size: 12px;
  color: #9ca3af;
  padding: 4px 2px;
}

.close-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
}

.close-btn:hover {
  color: #f9fafb;
}

.ui-button.small {
  font-size: 12px;
  padding: 4px 8px;
}

.guild-chest-info-price {
  margin-top: 4px;
  font-size: 11px;
  color: #facc15;
  display: flex;
  align-items: center;
  gap: 4px;
}

.guild-chest-info-price .crown-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.guild-chest-sell-btn {
  margin-top: 6px;
  align-self: flex-end;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
}

.guild-chest-sell-btn:hover:not(.disabled) {
  background: #1f2937;
}

.guild-chest-sell-btn.disabled {
  opacity: 0.4;
  cursor: default;
}

.guild-chest-sell-modal {
  position: fixed;              /* statt absolute */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.85);
  z-index: 9020;                /* höher als .guild-chest-info (9010) */
}

.guild-chest-sell-modal.hidden {
  display: none;
}

.guild-chest-sell-inner {
  background: #020617;
  border-radius: 10px;
  border: 1px solid #4b5563;
  padding: 10px 12px;
  width: 320px;
  max-width: 95%;
  box-shadow: 0 18px 45px rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guild-chest-sell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 4px;
}

.guild-chest-sell-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guild-chest-sell-icon {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #4b5563;
}

.guild-chest-sell-text {
  font-size: 12px;
  color: #e5e7eb;
}

#guildChestSellQuestion {
  margin: 0 0 4px 0;
}

#guildChestSellValue {
  margin: 0;
  font-size: 11px;
  color: #facc15;
}

.guild-chest-sell-amount {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  margin-top: 4px;
}

.sell-amount-btn,
.sell-amount-all-btn {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
}

.sell-amount-btn:hover,
.sell-amount-all-btn:hover {
  background: #1f2937;
}

.sell-amount-value {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
}

.guild-chest-sell-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.sell-btn {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  cursor: pointer;
}

.sell-btn.secondary {
  background: #020617;
  color: #e5e7eb;
}

.sell-btn.secondary:hover {
  background: #111827;
}

.sell-btn.primary {
  background: #15803d;
  border-color: #16a34a;
  color: #e5e7eb;
}

.sell-btn.primary:hover {
  background: #16a34a;
}

/* ------------------------------------
   Badges auf den Top-Buttons
   ------------------------------------ */

.top-button-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.25rem;

    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;

    box-shadow: 0 0 0 1px rgba(0,0,0,0.6),
                0 2px 4px rgba(0,0,0,0.4);
}

/* Gelber Kreis für aktive Collection-Quests */
#openCollectionQuestBtn .top-button-badge-quests {
    background: #facc15;          /* gelb */
    color: #111827;               /* sehr dunkles Grau (fast schwarz) */
}

/* Graues Badge für Guild-Chest (x/y) */
#openGuildChestBtn .top-button-badge-chest {
    background: #4b5563;          /* grau */
    color: #e5e7eb;
    font-weight: 600;
}


/* =========================================================
   6. TILE-GRID & TILES
   ========================================================= */

/* Wrapper um das Tile-Grid, damit sich Overlays nur über die Tiles legen */
#tileContainerWrapper {
    position: relative;
    display: inline-block;
}

/* Tile-Grid */
#tileContainer {
    display: grid;
    /* grid-template-columns: repeat(5, 120px);  – optional feste Spalten */
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Transparente Lücken-Elemente */
.tile-gap {
    background: transparent;
    opacity: 0.2;
}

/* Tile-Basis */
.tile {
    width: 120px;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #374151;
    background: #030712;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.tile img {
    width: 110px;
    height: 110px;
    object-fit: cover;
}

/* Optionales Label am unteren Rand */
.tile-label {
    position: absolute;
    bottom: 2px;
    left: 4px;
    right: 4px;
    font-size: var(--font-xs);
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 1px 2px;
    border-radius: 3px;
    display: none;
}

/* Auswahl-Countdown (gelb) für Angebote */
.assignment-offer-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    background: #facc15;
    border-radius: 4px 4px 0 0;
    pointer-events: none;
}

/* Auswahl-Countdown (lila) für Story-Angebote */
.has-story-offer .assignment-offer-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    background: #9400e9;
    border-radius: 4px 4px 0 0;
    pointer-events: none;
}


/* Tile mit offenem Angebot */
.has-offer {
    border: 2px solid #facc15;
}

/* Tile mit offenem Story-Angebot */
.has-story-offer {
    border: 2px solid #9400e9;
}


/* Tile während laufendem Assignment */
.tile-assignment-running {
    border: 2px solid #ef4444;
}

/* Laufzeit-Balken (rot) während Assignment */
.assignment-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    background: #ef4444;
    border-radius: 4px 4px 0 0;
    pointer-events: none;
}

/* Hero-Overlay oben im Tile */
.tile-assignment-heroes {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    display: grid;
    gap: 2px;
    grid-auto-rows: auto;
    align-items: start;
    grid-template-columns: repeat(3, 1fr); /* Standard-Grid */
}

.tile-assignment-heroes img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    border: 1px solid #020617;
    object-fit: cover;
}

/* Unterschiedliche Anzahl an Helden → andere Grids */
.tile-assignment-heroes.count-1 {
    grid-template-columns: repeat(2, 1fr);
}

.tile-assignment-heroes.count-2 {
    grid-template-columns: repeat(2, 1fr);
}

.tile-assignment-heroes.count-3 {
    grid-template-columns: repeat(3, 1fr);
}

.tile-assignment-heroes.count-4,
.tile-assignment-heroes.count-5,
.tile-assignment-heroes.count-6,
.tile-assignment-heroes.count-7,
.tile-assignment-heroes.count-8,
.tile-assignment-heroes.count-9 {
    grid-template-columns: repeat(3, 1fr);
}

/* Reward-Phase im Tile */
.tile-reward-pending {
    border-color: #3b82f6;
}

.reward-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    background: #3b82f6;
    border-radius: 0 0 6px 6px;
    pointer-events: none;
}

/* Label bei ausstehender Belohnung */
.tile-reward-label {
    position: absolute;
    top: 22px;
    left: 4px;
    right: 4px;
    font-size: var(--font-sm);
    font-weight: 600;
    text-align: center;
    background: rgba(15, 23, 42, 0.95);
    padding: 3px 4px;
    border-radius: 4px;
    color: #bfdbfe;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .tile-reward-label {
        font-size: 0.6rem;
        padding: 0.1rem 0.1rem;
    }
}

/* ----------------------------------------
   6b. COLLECTION-QUESTS AUF TILES
   ---------------------------------------- */
#collectionQuestPanel{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  max-width: 95vw;
  max-height: 70vh;
  background: #020617;
  border: 1px solid #4b5563;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  z-index: 9001;  
  display: none;
 }

/* Orange Hervorhebung für Tiles mit Sammel-Quest-Angebot */
.tile.has-collection-offer {
    border: 2px solid #f97316;
    /*box-shadow: 0 0 10px rgba(249, 115, 22, 0.7);*/
}

/* Kleiner Countdown-Balken unten im Tile für Collection-Offers */
.collectionquest-offer-timer {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 4px;
    height: 4px;
    background: rgba(249, 115, 22, 1);
    border-radius: 999px;
    overflow: hidden;
    pointer-events: none;
}

.collectionquest-offer-timer-inner {
    height: 100%;
    background: #f97316; /* Orange */
    transform-origin: left center;
    transform: scaleX(1);
}

/* NPC-Icon für Collection-Quests – zentriert auf dem Tile */
.tile-npc-icon {
    position: absolute;
    inset: 12px;              /* Abstand zum Rand */
    max-width: 80%;
    max-height: 80%;
    margin: auto;
    border-radius: 8px;
    border: 2px solid rgba(15, 23, 42, 0.9);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    object-fit: cover;
    pointer-events: none;     /* Klick geht weiterhin auf das Tile */
}

/* Orange Rahmen + Timer-Balken für Collection-Offers */
.has-collection-offer {
    border: 2px solid #f97316;
}

/* Container unten im Tile für den Offer-Timer */
.collectionquest-offer-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    /*background: #ef4444;*/
    border-radius: 4px 4px 0 0;
    pointer-events: none;
}

/* gefüllter Balken (läuft von rechts nach links) */
.collectionquest-offer-timer-inner {
    width: 100%;
    height: 100%;
    background: #f97316;
    transform-origin: left center;
    transform: scaleX(1);
}



/* =========================================================
   7. STORY-EVENT ICONS AUF TILES
   ========================================================= */

/* Großes Story-Event-Icon direkt auf dem Tile */
.storyevent-tile-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #9400e9;
    background-color: #9400e9;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 26px;
    line-height: 22px;
    text-align: center;
    pointer-events: none; /* Tile bleibt klickbar */
}

/* Kleines Story-Event-Icon (z.B. in Listen) */
.storyevent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #f5c542;
    font-weight: bold;
    font-size: 12px;
    line-height: 1;
    margin-right: 6px;
    box-sizing: border-box;
}

.storyevent-icon::before {
    content: "!";
}


/* =========================================================
   8. HERO-LISTE (KARTEN)
   ========================================================= */

.attr-icon {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
.attr-strength    { background-image: url('../img/elements/attributes/strength_32x32.png'); }
.attr-dexterity   { background-image: url('../img/elements/attributes/dexterity_32x32.png'); }
.attr-speed       { background-image: url('../img/elements/attributes/speed_32x32.png'); }
.attr-intelligence   { background-image: url('../img/elements/attributes/intelligence_32x32.png'); }
.attr-willpower   { background-image: url('../img/elements/attributes/willpower_32x32.png'); }
.attr-charisma    { background-image: url('../img/elements/attributes/charisma_32x32.png'); }


/* Eine Zeile: links Icon, rechts Text + Balken */
.hero-card-stat-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 6px;
}

/* Rechts: Block mit Header + Balken */
.hero-card-stat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Header-Zeile (ohne Icon) */
.hero-card-stat-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-xs);
}

/* Label nimmt den Platz zwischen links und Wert ein */
.hero-card-stat-label {
    flex: 1;
    color: #9ca3af;
}

/* Wert rechtsbündig */
.hero-card-stat-value {
    min-width: 2.2rem;
    text-align: right;
    font-weight: 600;
}

/* + Button rechts daneben */
.hero-card-stat-header .hero-attr-plus {
    margin-left: 0.35rem;
}

/* Balken unter dem Header, aber in derselben Spalte */
.hero-card-stat-bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: #111827;
    overflow: hidden;
}

.hero-card-stat-bar-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(to right, #3b82f6, #22c55e);
    transition: width 250ms ease-out;
}


#heroesContainerTitle {
    margin: 0 0 0.5rem;
    font-size: var(--font-sm);
    font-weight: 600;
}

#heroesContainer, #guildButtonsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Hero-Karte */
.hero-card {
    border-radius: 8px;
    border: 1px solid #666666;
    background: #111111;
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
    cursor: pointer;
    position: relative; /* für hero-assignment-timer */
}

.hero-card.hero-busy {
    border-color: #ef4444;
	border-width: 3px;
}

.hero-card img {
    width: 92px;
    height: 92px;
    border-radius: 6px;
    object-fit: cover;
}

.hero-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-name {
    font-size: var(--font-sm);
    font-weight: 600;
    margin-bottom: 2px;
}

.hero-meta {
    font-size: var(--font-xs);
    color: #9ca3af;
}

/* Timer-Balken auf Hero-Karte */
.hero-assignment-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: #f97316;
    border-radius: 0 0 6px 6px;
    pointer-events: none;
}

/* Hervorhebung, wenn ungenutzte Punkte vorhanden sind */
.hero-card.hero-has-unspent {
    position: relative;
}

.hero-card.hero-has-unspent::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 10px;
    box-shadow: 0 0 0 rgba(250, 204, 21, 0);
    opacity: 0;
    pointer-events: none;
    animation: heroPointsGlow 1.4s ease-in-out infinite;
}

@keyframes heroPointsGlow {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(250, 204, 21, 0);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 28px rgba(250, 204, 21, 0.9);
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(250, 204, 21, 0);
    }
}

/* Hervorhebung, wenn Hero eine Belohnung abholen kann */
.hero-waiting-claim {
    box-shadow: 0 0 10px 3px rgba(0, 120, 255, 0.8);
    border: 2px solid rgba(0, 120, 255, 1);
    animation: hero-claim-pulse 1.2s ease-in-out infinite;
}

@keyframes hero-claim-pulse {
    0% { box-shadow: 0 0 6px 2px rgba(0,120,255,0.5); }
    50% { box-shadow: 0 0 15px 4px rgba(0,120,255,1); }
    100% { box-shadow: 0 0 6px 2px rgba(0,120,255,0.5); }
}


/* ----------------------------------------
   Hero Popup – Equipment / Item Slots
---------------------------------------- */

.hero-popup-items {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid #1f2937;
    font-size: var(--font-xs);
}

.hero-popup-items-title {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 0.35rem;
}

.hero-item-slots {
    display: flex;
    gap: 0.5rem;
}

.hero-item-slot {
    flex: 1;
    min-height: 64px;
    border-radius: 0.5rem;
    border: 1px dashed #4b5563;
    padding: 0.35rem 0.4rem;
    background: rgba(15, 23, 42, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}

.hero-item-slot:hover {
    border-style: solid;
    border-color: #818cf8;
    background: rgba(30, 64, 175, 0.35);
    transform: translateY(-1px);
}

.hero-item-slot-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.4rem;
    margin-bottom: 0.15rem;
    background: #020617;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    font-size: 1.15rem;
}

.hero-item-slot.empty .hero-item-slot-icon::after {
    content: '+';
    color: #4b5563;
}

.hero-item-slot-name {
    font-size: var(--font-2xs);
    text-align: center;
    color: #e5e7eb;
}

.hero-item-unequip-btn {
    margin-top: 0.3rem;
    font-size: var(--font-2xs);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #f97373;
    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;
    cursor: pointer;
}

.hero-item-unequip-btn:hover {
    background: rgba(248, 113, 113, 0.25);
}

.hero-item-unequip-btn.hidden {
    display: none;
}

.hero-item-slot.filled {
    border-style: solid;
    border-color: #e5e7eb;
}

.item-slot.locked {
    pointer-events: none;
    opacity: 0.5;
}

.hero-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
}

.hero-item-slot.equipment-locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.hero-item-slot.equipment-locked .hero-item-unequip-btn {
    cursor: not-allowed;
}


/* =========================================================
   9. POPUPS: ALLGEMEINE GRENZEN (HÖHE)
   ========================================================= */

/* Popups nie größer als der Viewport – Inhalt scrollt intern */
#assignmentPopup,
#heroPopup,
#gameEndPopup {
    max-height: 95vh;
    overflow-y: auto;
}


/* =========================================================
   10. HERO-DETAIL-POPUP
   ========================================================= */
#heroOverlay {
    position: fixed;
    inset: 0; /* top/right/bottom/left = 0 */
    background: rgba(0, 0, 0, 0.90);
    z-index: 8995; /* leicht unter heroPopup, aber über dem Spielfeld */
    display: none;
}


#heroPopup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-width: 95vw;
    background: #020617;
    border-radius: 10px;
    border: 1px solid #4b5563;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
    display: none;
    z-index: 9001;
}

#heroPopupHeader {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #030712;
}

#heroPopupHeader span {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

#heroPopupCloseBtn {
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: var(--font-sm);
}

#heroPopupBody {
    padding: 0.6rem 0.75rem 0.75rem;
    font-size: var(--font-sm);
}

#heroPopupMain {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

#heroPopupImage {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #1f2937;
}

#heroPopupText h3 {
    margin: 0 0 2px;
    font-size: var(--font-sm);
    font-weight: 600;
}

#heroPopupMeta {
    margin: 0 0 2px;
    font-size: var(--font-xs);
    color: #9ca3af;
}

/* Kosten-Bereich (z.B. Rekrutierung) */
#heroPopupCost {
    margin: 4px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

#heroPopupCost img.inline-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

#heroPopupStatus {
    margin: 0;
    font-size: var(--font-xs);
    color: #a5b4fc;
}

/* XP / Level-Block */
#heroPopupLevelBlock {
    border-top: 1px solid #1f2937;
    padding-top: 0.4rem;
    margin: 0.4rem 0;
}

#heroPopupLevelHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-sm);
    margin-bottom: 0.25rem;
}

#heroPopupLevel {
    font-weight: 600;
}

#heroPopupXpText {
    font-size: var(--font-xs);
    color: #9ca3af;
}

#heroPopupXpBarOuter {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #020617;
    border: 1px solid #374151;
    overflow: hidden;
}

#heroPopupXpBarInner {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #22c55e, #facc15, #f97316);
    transition: width 0.2s ease-out;
}

/* Attribute & Terrain-Boni */
#heroPopupBonuses {
    font-size: var(--font-xs);
    color: #e5e7eb;
    padding-top: 0.4rem;
    border-top: 1px solid #1f2937;
}

/* Zweispaltiges Grid: Attribute / Terrain */
.hero-popup-bonus-grid {
    line-height: 1.5;
}

.hero-bonus-section-title {
    font-weight: bold;
    margin-bottom: 0.2rem;
}

.hero-bonus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.hero-bonus-label {
    flex: 1;
    font-size: var(--font-sm);
}

.hero-bonus-value {
    width: 32px;
    text-align: right;
    font-weight: 600;
    font-size: var(--font-sm);
}

/* "+“-Button zum Verteilen von Punkten */
.hero-attr-plus {
    margin-left: 8px;
    padding: 0px 6px;
    font-size: var(--font-sm);
    border-radius: 6px;
    border: 1px solid #facc15;
    background: #1f2937;
    color: #fde68a;
    cursor: pointer;
}

.hero-attr-plus:hover {
    background: #facc15;
    color: #111827;
}


/* =========================================================
   11. ASSIGNMENT-POPUP (AUFTRÄGE)
   ========================================================= */

#assignmentOverlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: rgba(0, 0, 0, 0.90);
    z-index: 8995; /* unter dem Popup (#assignmentPopup), aber über dem Spielfeld */
    display: none;
}


#assignmentPopup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: 95vw;
    background: #020617;
    border-radius: 10px;
    border: 1px solid #4b5563;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
    display: none;
    z-index: 9000;
}

/* Kopfzeile des Popups */
#assignmentPopupHeader {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #030712;
}

#assignmentPopupHeaderTitle {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

#assignmentPopupCloseBtn {
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: var(--font-sm);
}

/* Inhalt */
#assignmentPopupBody {
    padding: 0.6rem 0.75rem 0.75rem;
    font-size: var(--font-sm);
}

/* Optionales Bild zum Auftrag */
#assignmentPopupImage {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 0.6rem;
    display: none;
}

/* Titel, Gefahr, Belohnung, Beschreibung */
#assignmentTitle {
    margin: 0 0 0.25rem;
    font-size: var(--font-sm);
    font-weight: 600;
}

#assignmentDanger {
    margin: 0 0 0.5rem;
    font-size: var(--font-xs);
    color: #facc15;
	display: none;
}

#assignmentReward {
    margin: 0 0 0.5rem;
    font-size: var(--font-xs);
    color: #a5b4fc;
	display: none;	
}

#assignmentDescription {
    margin: 0 0 0.6rem;
    font-size: var(--font-sm);
    color: #d1d5db;
}

/* Benötigte Attribute (Pills) */
.assignment-required-attributes {
    margin: 0;
    font-size: var(--font-xs);
    color: #ffffff;
    background: rgba(234, 234, 234, 0.12);
    border-radius: 0.35rem;
    padding: 0.35rem 0.35rem;
}

.assignment-required-attributes-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.assignment-required-attributes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

.assignment-required-attributes-list li {
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: var(--font-xs);
}

/* Terrain-Pills in blau */
.assignment-required-attributes-list li.terrain-item {
    color: #a5b4fc;
    font-weight: 600;
    background: rgba(165, 180, 252, 0.15);
    border: 1px solid rgba(165, 180, 252, 0.45);
}

/* Terrain-Box (separater Block) */
.assignment-terrain-box {
    margin: 0 0 0.7rem;
    font-size: var(--font-xs);
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.12);
    border-radius: 0.35rem;
    padding: 0.35rem 0.6rem;
}

.assignment-terrain-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #c7d2fe;
}

.assignment-terrain-value {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(129, 140, 248, 0.20);
    border: 1px solid rgba(129, 140, 248, 0.4);
    font-size: var(--font-xs);
    color: #e0e7ff;
}

/* Kosten/Belohnung für Hero (Coins, XP, etc.) */
.assignment-hero-cost,
.assignment-hero-reward {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2px 0;
    font-size: 0.9rem;
}

.assignment-hero-cost span:last-child {
    color: #c62828;
    font-weight: 600;
}

.assignment-hero-reward span:last-child {
    color: #2e7d32;
    font-weight: 600;
}

#assignmentHeroRewardValue img,
#assignmentHeroCostValue img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 4px;
    object-fit: contain;
}

/* Fortschritts-Balken im Popup */
#assignmentPopupProgressOuter {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #020617;
    border: 1px solid #374151;
    overflow: hidden;
    margin-bottom: 0.6rem;
}

#assignmentPopupProgressInner {
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #22c55e, #facc15, #f97316);
}

/* Hero-Slots im Popup */
#assignmentHeroSlots {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.hero-slot {
    flex: 1;
    width: 60px;
    height: 60px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-xs);
    color: #6b7280;
}

.hero-slot-img {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
}

/* Hero-Auswahlliste */
#assignmentHeroSelect {
    margin-bottom: 0.5rem;
    padding: 0.4rem;
    background: #020617;
    border-radius: 8px;
    border: 1px solid #374151;
    max-height: 120px;
    overflow-y: auto;
    display: none;
}

.hero-select-item {
    display: flex;
    align-items: center;
    padding: 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    gap: 0.4rem;
    font-size: var(--font-xs);
}

.hero-select-item:hover {
    background: #1e293b;
}

.hero-select-img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
}

.hero-select-text {
    display: flex;
    flex-direction: column;
}

.hero-select-name {
    font-size: var(--font-sm);
    font-weight: 600;
}

.hero-select-meta {
    font-size: var(--font-xs);
    color: #94a3b8;
}

/* Start-Button für Assignment */
#assignmentStartBtn {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #22c55e;
    background: #16a34a;
    color: #f9fafb;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
}

#assignmentStartBtn:hover {
    background: #15803d;
}

/* Button-Style, wenn zu wenig Coins vorhanden */
.not-enough-coins {
    background-color: #c62828 !important;
    border: 2px solid #8e0000 !important;
    color: white !important;
    cursor: not-allowed !important;
}

.assignment-required-attributes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.assignment-req-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
  margin-bottom: 4px;
}

.assignment-req-item .attr-icon{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background-size: contain;
}

.assignment-req-item  .terrain-icon{
	display: none;
}


/* =========================================================
   11b. COLLECTION-QUEST-POPUP (STATIC)
   ========================================================= */

#collectionQuestOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.90);
    display: none;
    z-index: 8995; /* ähnlich wie assignmentOverlay */
}

#collectionQuestPopup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: 95vw;
    background: #020617;
    border-radius: 10px;
    border: 1px solid #4b5563;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
    display: none;
    z-index: 9000;
    font-size: var(--font-sm);
    color: #e5e7eb;
}

#collectionQuestPopupHeader {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #030712;
}

#collectionQuestPopupHeaderTitle {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

#collectionQuestPopupCloseBtn {
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: var(--font-sm);
}

#collectionQuestPopupBody {
    padding: 0.6rem 0.75rem 0.75rem;
}

#collectionQuestTitle {
    margin: 0 0 0.25rem;
    font-size: var(--font-sm);
    font-weight: 600;
}

#collectionQuestDescription {
    margin: 0 0 0.6rem;
    font-size: var(--font-sm);
    color: #d1d5db;
}

/* Buttons unten im Popup */
.collectionquest-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.collectionquest-btn {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #4b5563;
    background: #111827;
    color: #f9fafb;
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
}

.collectionquest-btn:hover {
    background: #1f2937;
}

.collectionquest-btn.primary {
    border-color: #22c55e;
    background: #16a34a;
}

.collectionquest-btn.primary:hover {
    background: #15803d;
}

/* =========================================================
   COLLECTION-QUEST POPUP – REQUIREMENTS & REWARD
   ========================================================= */

.collectionquest-req-block {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #1f2937;
    font-size: var(--font-xs);
}

.collectionquest-req-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 0.35rem;
}

.collectionquest-req-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collectionquest-req-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.collectionquest-req-icon {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #374151;
}

.collectionquest-req-main {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collectionquest-req-name {
    font-size: var(--font-xs);
}

.collectionquest-req-count {
    font-size: var(--font-xs);
    font-weight: 600;
    color: #fde68a;
}

.collectionquest-reward-line {
    margin-top: 0.5rem;
    font-size: var(--font-xs);
    color: #a5b4fc;
}

/* =========================================================
   COLLECTION-QUEST LISTE (BUTTON-POPUP)
   ========================================================= */

.cq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 6px;
}

.cq-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.cq-empty {
    font-size: var(--font-xs);
    color: #9ca3af;
}

.cq-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 8px;
    background: #020617;
    border: 1px solid #1f2937;
}

.cq-npc-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #4b5563;
    flex-shrink: 0;
}

.cq-list-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cq-list-title {
    font-size: var(--font-sm);
    font-weight: 600;
}

.cq-list-progress {
    font-size: var(--font-xs);
    color: #9ca3af;
}

/* =========================================================
   COLLECTION-QUEST DETAIL-ANSICHT
   ========================================================= */

.cq-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cq-detail-npc {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #4b5563;
    flex-shrink: 0;
}

.cq-detail-text {
    flex: 1;
}

.cq-detail-name {
    font-size: var(--font-sm);
    font-weight: 600;
}

.cq-detail-title {
    font-size: var(--font-xs);
    color: #9ca3af;
}

.collectionquest-detail-req-block {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #1f2937;
    font-size: var(--font-xs);
}

.collectionquest-detail-req-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 4px;
}

.collectionquest-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collectionquest-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.collectionquest-detail-icon {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #374151;
}

.collectionquest-detail-main {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collectionquest-detail-name {
    font-size: var(--font-xs);
}

.collectionquest-detail-count {
    font-size: var(--font-xs);
    font-weight: 600;
}

.collectionquest-detail-item.ok .collectionquest-detail-count {
    color: #4ade80;
}

.collectionquest-detail-item.pending .collectionquest-detail-count {
    color: #f97316;
}

.collectionquest-detail-reward-block {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #1f2937;
    font-size: var(--font-xs);
}

.collectionquest-detail-reward-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 4px;
}

/* =========================================================
   11c. COLLECTION-QUEST-LISTE (BUTTON-POPUP)
   ========================================================= */

#collectionQuestListOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.90);
    display: none;
    z-index: 8995; /* ähnlich wie assignmentOverlay / collectionQuestOverlay */
}

#collectionQuestPanel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    max-width: 95vw;
    max-height: 70vh;
    background: #020617;
    border-radius: 10px;
    border: 1px solid #4b5563;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
    padding: 0.6rem 0.75rem 0.7rem;
    font-size: var(--font-sm);
    color: #e5e7eb;
    display: none;
    z-index: 9000;
}

/* optional, um Header/Fußbereich an den Rest anzugleichen */
#collectionQuestPanel .cq-header {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #374151;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
}

#collectionQuestPanel .cq-list {
    margin-top: 0.6rem;
}

#collectionQuestPanel .cq-footer {
    margin-top: 0.6rem;
}



/* =========================================================
   11d. QUESTLOG
   ========================================================= */

/* QUEST LOG OVERLAY */
#questLogOverlay {
    position: fixed;
    inset: 0; /* top/right/bottom/left = 0 */
    background: rgba(0, 0, 0, 0.90);
    z-index: 8995; /* wie guildChestOverlay / collectionQuestListOverlay */
    display: none;
}

/* QUEST LOG – Panel im Stil des Hero-Popups */
.questlog-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;           /* wie #heroPopup */
    max-width: 95vw;
    max-height: 70vh;
    background: #020617;    /* wie #heroPopup */
    color: #e5e7eb;
    border: 1px solid #4b5563;
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
    display: none;          /* beim Laden versteckt */
    z-index: 9001;
    display: none;
    /* Inhalt wird in header/body-Containern organisiert */
}

/* falls du mit .hidden arbeitest – wie bei anderen Popups */
.questlog-panel.hidden {
    display: none;
}

.questlog-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #030712; /* wie #heroPopupHeader */
}

.questlog-header span {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

/* Close-Button an Hero-Close anlehnen */
.questlog-header .close-btn,
#closeQuestLogBtn {
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 1rem;
}

.questlog-header .close-btn:hover,
#closeQuestLogBtn:hover {
    background: rgba(148, 163, 184, 0.15);
}
.questlog-body {
    padding: 0.65rem 0.75rem 0.75rem; /* wie #heroPopupContent */
    font-size: var(--font-sm);
    display: grid;
    grid-template-columns: 1.1fr 1.6fr;
    gap: 0.6rem;
    max-height: calc(70vh - 3rem);
    box-sizing: border-box;
}

/* linke Spalte – Liste */
.questlog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #374151;
    border-radius: 6px;
    max-height: 100%;
    overflow-y: auto;
    font-size: 0.85rem;
    background: #020617;
}

.questlog-list li {
    padding: 6px 8px;
    border-bottom: 1px solid #1f2937;
    cursor: pointer;
}

.questlog-list li:last-child {
    border-bottom: none;
}

.questlog-list li.active {
    background: RGBA(255,255,255,0.2);
}

.questlog-list li:hover {
    background: #0b1120;
}

/* rechte Spalte – Detail */
.questlog-detail-container {
    border: 1px solid #374151;
    border-radius: 6px;
    padding: 8px;
    font-size: 0.9rem;
    overflow-y: auto;
    background: #020617;
}

#questLogDetailTitle {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
}

#questLogDetailProgress {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 6px;
}

#questLogDetailText {
    margin: 0 0 6px;
    line-height: 1.35;
}

#questLogDetailLocation,
.questlog-location {
    margin: 0;
    margin-top: 4px;
    font-size: 0.78rem;
    color: #9ca3af;
    opacity: 0.9;
}




/* ============================================
   GENERISCHE UI-BUTTONS (für CQ-Liste etc.)
   ============================================ */

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    border: 1px solid #4b5563;
    background: #111827;
    color: #f9fafb;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    gap: 0.25rem;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease;
}

.ui-button:hover {
    background: #1f2937;
    border-color: #6b7280;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
    transform: translateY(-1px);
}

/* Kleine Variante (z.B. CQ-Buttons) */
.ui-button.small {
    padding: 0.25rem 0.65rem;
    font-size: var(--font-xs);
    border-radius: 999px;  /* pill-Style */
}

/* Disabled-Zustand (z.B. Complete-Button wenn noch nicht erfüllbar) */
.ui-button[disabled],
.ui-button.disabled {
    opacity: 0.4;
    cursor: default;
    background: #020617;
    border-color: #374151;
    box-shadow: none;
    transform: none;
}

/* Optional: „Primär“-Variante, falls du später brauchst */
.ui-button.primary {
    border-color: #22c55e;
    background: #16a34a;
}

.ui-button.primary:hover {
    background: #15803d;
    border-color: #22c55e;
}



/* =========================================================
   12. ASSIGNMENT-ERGEBNIS & ERFOLGS-ANZEIGE
   ========================================================= */

/* Ergebnis-Panel nach einem Auftrag */
.assignment-result-panel {
    margin-top: 16px;
    padding: 12px 14px;
    background: #1f2430;
    border-radius: 10px;
    border: 1px solid #374151;
    font-size: 13px;
}

.assignment-result-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Balken-Wrapper */
.assignment-result-bar-wrapper {
    position: relative;
    width: 100%;
    height: 26px;
    margin-bottom: 6px;
}

/* Hintergrund (Fehlanteil, rot) */
.assignment-result-bar-bg {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4b1117, #7f1d1d);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

/* Mittellinie bei 50% */
.assignment-result-bar-midline {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 3px;
    background: rgba(232, 202, 0, 0.8);
    pointer-events: none;
}

/* Erfolgsanteil (grüner Balken) */
.assignment-result-bar-fg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #22c55e);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    transition: width 0.6s ease-out;
}

.assignment-result-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 8px;
}

.assignment-result-bar-labels strong {
    color: #e5e7eb;
}

/* Log der Einzelschritte */
.assignment-result-log {
    max-height: 120px;
    overflow-y: auto;
    padding: 6px 8px;
    background: #111827;
    border-radius: 6px;
    font-size: 11px;
}

.assignment-result-log-line {
    margin-bottom: 3px;
}

.assignment-result-log-line strong {
    color: #6ee7b7;
}

/* Negativer Beitrag rot */
.assignment-result-log-line.negative strong {
    color: #fca5a5;
}

/* Status-Zeile (Erfolg/Fehlschlag) */
.assignment-result-status {
    margin-top: 6px;
    text-align: right;
    font-size: 12px;
}

.assignment-result-status.success {
    color: #6ee7b7;
}

.assignment-result-status.fail {
    color: #fca5a5;
}

/* Erfolgs-Chance-Anzeige im Popup */
.assignment-success-container {
    margin: 0.4rem 0 0.8rem;
    font-size: var(--font-xs);
}

.assignment-success-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    color: #9ca3af;
}

.assignment-success-header span:last-child {
    font-weight: 600;
    color: #e5e7eb;
}

.assignment-success-bar-outer {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: #111827;
    box-shadow: inset 0 0 0 1px rgba(31, 41, 55, 0.9);
    overflow: hidden;
}

.assignment-success-bar-inner {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f97316, #22c55e);
    transition: width 0.25s ease-out;
}


/* =========================================================
   13. ZUFRIEDENHEIT (SATISFACTION) & POINTS-FLASH
   ========================================================= */

#satisfactionContainer {
    margin-top: 6px;
    padding: 0.5rem 1rem;
    background: #020617;
    border-bottom: 1px solid #1f2937;
}

/* Multiplikator-Label (falls verwendet) */
#satisfactionMultiplierLabel {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Überschrift vor der Leiste */
#satisfactionLabel {
    font-size: var(--font-xs);
    margin-bottom: 0.25rem;
    color: #e5e7eb;
}

/* Balken-Hintergrund */
#satisfactionBarOuter {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #020617;
    border: 1px solid #374151;
    overflow: hidden;
}

/* Füllung (aktueller Wert) */
#satisfactionBarInner {
    height: 100%;
    width: 50%;
    background: linear-gradient(to right, #f97316, #22c55e);
    transition: width 0.2s ease-out;
}

/* Points-Flash (± Zufriedenheit/Coin-Flash) */
#pointsFlash {
    position: fixed;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%) scale(0.9);

    /* Größe & Optik */
    font-size: 3.5rem;
    font-weight: 800;
    pointer-events: none;
    opacity: 0;
    z-index: 9500;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

    /* NEU: Layout für Icon + Text */
    display: inline-flex;
    align-items: center;    /* Icon + Text vertikal mittig */
    gap: 0.25em;            /* Abstand zwischen Icon und Text */

    /* NEU: alles in eine Zeile */
    white-space: nowrap;
}


#pointsFlash.show-positive {
    color: #22c55e;
}

#pointsFlash.show-negative {
    color: #ef4444;
}

#pointsFlash.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Extra-Styling für Coin-Flash */
#pointsFlash.coin-flash {
    color: #fde68a;
}

/* Icon + Zahl neben­einander */
#pointsFlash .coin-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25em;
}

#pointsFlash .coin-icon img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

/* Container für eine einzelne Flash-Nachricht */
.flash-message {
    display: inline-flex;          /* Icon + Text in einer Zeile */
    align-items: center;           /* vertikal mittig */
    gap: 8px;                      /* Abstand zwischen Icon und Text */
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6); /* oder deine bestehende Farbe */
    color: #fff;
    font-size: 0.9rem;

    /* Wichtig: alles in eine Zeile, kein Zeilenumbruch */
    white-space: nowrap;
    overflow: hidden;              /* falls zu lang: */
    text-overflow: ellipsis;       /* ... am Ende */
}

/* Optional: verschiedene Typen (falls du sowas schon hast) */
.flash-message.success {
    background: rgba(40, 167, 69, 0.85);
}

.flash-message.error {
    background: rgba(220, 53, 69, 0.9);
}

.flash-message.info {
    background: rgba(23, 162, 184, 0.9);
}

/* Wrapper für das Icon */
.flash-icon {
    width: 0.9em;                 /* skaliert mit der Schriftgröße */
    height: 0.9em;     				/* skaliert mit der Schriftgröße */
	padding: 5px;
	background-color: #111111;
    border-radius: 0.1em;         /* leicht abgerundet, relativ zur Größe */
    border: 0.03em solid #facc15; /* gelber Rand, skaliert mit */
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Das eigentliche Bild im Icon */
.flash-icon img {
	border-radius: 0.1em;  
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Text daneben (für den Fall, dass du extra Klasse verwendest) */
.flash-text {
    line-height: 1.2;
}


/* =========================================================
   14. SPIEL-ENDE (GAME-END-OVERLAY)
   ========================================================= */

#gameEndOverlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 12000;
}

/* Popup für Sieg/Niederlage */
#gameEndPopup {
    width: 320px;
    max-width: 90vw;
    background: #020617;
    border-radius: 12px;
    border: 2px solid #4b5563;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
    padding: 1rem 1.1rem 1.1rem;
    text-align: center;
}

#gameEndPopup.win {
    border-color: #22c55e;
}

#gameEndPopup.lose {
    border-color: #ef4444;
}

#gameEndTitle {
    font-size: var(--font-xxl);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

#gameEndMessage {
    font-size: var(--font-sm);
    color: #e5e7eb;
    margin-bottom: 0.9rem;
}

#gameEndRestartBtn {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    border: 1px solid #4b5563;
    background: #111827;
    color: #f9fafb;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
}

#gameEndRestartBtn:hover {
    background: #1f2937;
}


/* ==========================================
   Generischer Footer für Popups
   ========================================== */

.popup-footer {
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid #1f2937;
  background: #020617;
}

.popup-footer .popup-close-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   15. DEBUG-KONSOLE
   ========================================================= */

#consolePanel {
    position: fixed;
    top: 40px;
    right: 10px;
    width: 320px;
    height: 220px;
    background: rgba(15, 23, 42, 0.96);
    border-radius: 8px;
    border: 1px solid #4b5563;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-xs);
    display: none;
    z-index: 9999;
}

#consolePanelHeader {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #020617;
}

#consolePanelHeader span {
    font-weight: 600;
    font-size: var(--font-xs);
}

#consoleCloseBtn {
    cursor: pointer;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: var(--font-sm);
}

#consoleOutput {
    padding: 0.35rem 0.5rem;
    height: calc(220px - 30px);
    overflow-y: auto;
    white-space: pre-wrap;
}

.console-line {
    margin-bottom: 2px;
}


/* =========================================================
   16. CUTSCENES (EINBLENDUNGEN & HERO-AUSWAHL)
   ========================================================= */

.cutscene {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.cutscene.hidden {
    display: none;
}

/* Innerer Container */
.cutscene-inner {
    max-width: 800px;
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Bildbereich */
.cutscene-image-container {
    flex: 1 1 auto;
    overflow: hidden;
    border-radius: 12px;
    background: #111;
}

.cutscene-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Textbereich */
.cutscene-text-container {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #f0f0f0;
    font-size: 18px;
    line-height: 1.5;
}

/* Skip-Button oben rechts */
.cutscene-skip {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #f0f0f0;
    font-size: 12px;
    cursor: pointer;
}

.cutscene-continue-hint {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

/* Hero-Auswahlbereich in Cutscene */
.cutscene-choices {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    justify-content: center;
    min-height: 160px;
    opacity: 0;
    transition: opacity 400ms ease;
}

.cutscene-choices.hidden {
    display: none;
}

.cutscene-choices.visible {
    opacity: 1;
}

/* Detailbereich unter der Heldenauswahl */
.cutscene-hero-details {
    margin-top: 8px;
    opacity: 0;
    transition: opacity 300ms ease;
}

.cutscene-hero-details.hidden {
    display: none;
}

.cutscene-hero-details.visible {
    display: block;
    opacity: 1;
}

.cutscene-hero-details-box {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid #374151;
    font-size: var(--font-xs);
    color: #e5e7eb;
}

.cutscene-hero-details-title {
    font-size: var(--font-sm);
    font-weight: 600;
    margin-bottom: 2px;
}

.cutscene-hero-details-meta {
    font-size: var(--font-xs);
    color: #9ca3af;
    margin-bottom: 6px;
}

.cutscene-hero-details {
    margin-top: 8px;
    opacity: 0;
    transition: opacity 300ms ease;
}

.cutscene-hero-details.hidden {
    display: none;
}

.cutscene-hero-details.visible {
    display: block;
    opacity: 1;
}

.cutscene-hero-details-box {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid #374151;
    font-size: var(--font-xs);
    color: #e5e7eb;
}

.cutscene-hero-details-title {
    font-size: var(--font-sm);
    font-weight: 600;
    margin-bottom: 2px;
}

.cutscene-hero-details-meta {
    font-size: var(--font-xs);
    color: #9ca3af;
    margin-bottom: 6px;
}

/* Zwei Spalten: links Attribute, rechts Terrain-Boni */
.cutscene-hero-details-content {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.cutscene-hero-attributes {
    flex: 2;
}

.cutscene-hero-terrain {
    flex: 1;
    border-left: 1px solid #374151;
    padding-left: 8px;
}

/* eine Zeile: Icon links, rechts der ganze Inhalt */
.cutscene-hero-stat-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 6px;
}

/* Icon-Spalte */
.cutscene-hero-stat-row .attr-icon {
    width: 28px;
    height: 28px;
    background-size: contain;
    flex: 0 0 28px;
}

/* Inhalt rechts vom Icon (Label + Wert + Balken) */ 
.cutscene-hero-stat-content {
    flex: 1;
}

/* Header: Label + Wert in einer Zeile */
.cutscene-hero-stat-header {
    display: flex;
    align-items: center;
    font-size: var(--font-xs);
    margin-bottom: 2px;
}

/* Label nimmt den Platz zwischen links und Wert ein */
.cutscene-hero-stat-label {
    flex: 1;
    color: #9ca3af;
}

/* Wert rechtsbündig */
.cutscene-hero-stat-value {
    min-width: 2.2rem;
    text-align: right;
    font-weight: 600;
}

/* Balken-Hintergrund (läuft erst ab rechter Kante des Icons) */
.cutscene-hero-stat-bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: #111827;
    overflow: hidden;
}

/* Füllung – Breite per JS gesetzt */
.cutscene-hero-stat-bar-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(to right, #3b82f6, #22c55e);
    transition: width 250ms ease-out;
}

/* Terrain-Boni rechts */
.cutscene-hero-terrain-title {
    font-size: var(--font-xs);
    font-weight: 600;
    margin-bottom: 4px;
    color: #e5e7eb;
}

.cutscene-hero-terrain-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cutscene-hero-terrain-entry {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-xs);
}

/* Farben: positiv = grün, negativ = rot, neutral = gelb */
.terrain-bonus-positive {
    color: #4ade80;
}

.terrain-bonus-negative {
    color: #f87171;
}

.terrain-bonus-neutral {
    color: #facc15;
}

/* Button "Choose this hero" */
.cutscene-hero-select-btn {
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #22c55e;
    background: #16a34a;
    color: #f9fafb;
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cutscene-hero-select-btn:hover {
    background: #15803d;
}


/* Reuse der hero-card, aber vertikal & zentriert */
.cutscene-hero-choice.hero-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 180px;
}

.cutscene-hero-choice.hero-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-bottom: 0.35rem;
}

.cutscene-hero-choice .hero-name {
    font-size: var(--font-sm);
}

.cutscene-hero-choice .hero-meta {
    font-size: var(--font-xs);
    color: #9ca3af;
}

/* Fade-In / Fade-Out der Elemente */
.cutscene-image-container,
.cutscene-text-container,
.cutscene-choices {
    opacity: 0;
    transition: opacity 400ms ease;
}

.cutscene-image-container.visible,
.cutscene-text-container.visible,
.cutscene-choices.visible {
    opacity: 1;
}

/* Einblende-Animation für die einzelnen Karten */
.cutscene-hero-choice {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 300ms ease, transform 300ms ease, box-shadow 200ms ease;
}

.cutscene-hero-choice.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Kurzes Aufleuchten bei Auswahl */
.cutscene-hero-choice-selected {
    box-shadow: 0 0 0 2px #facc15;
    transform: translateY(-2px);
}

/* Mini-Mobile-Anpassung für Cutscenes */
@media (max-width: 600px) {
    .cutscene-inner {
        max-width: 100%;
    }
    .cutscene-text-container {
        font-size: 13px;
    }
}


/* =========================================================
   17. RESPONSIVE LAYOUT (MOBILE)
   ========================================================= */

@media (max-width: 768px) {

    /* Tile-Grid: adaptive Spaltenanzahl */
    #tileContainer {
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        max-width: 100%;
    }

    .tile {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .tile img {
        width: 90%;
        height: 90%;
    }

    /* Heroes: 2 Karten pro Reihe, vertikal arrangiert */
    #heroesContainer, #guildButtonsContainer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
    }

    .hero-card {
        width: 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.6rem;
    }

    .hero-card img {
        width: 72px;
        height: 72px;
        margin-bottom: 0.4rem;
    }

    .hero-info {
        align-items: center;
    }

    .hero-name {
        font-size: var(--font-sm);
    }

    .hero-meta {
        font-size: var(--font-xs);
    }
}