.guild-level-hero-details/* =========================================================
   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);
}

/* Mobile: prevent long-press "save image" / context menu on decorative images */
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Common in-game images should never catch pointer events behind overlays */
.tile img,
.hero-card img,
#assignmentPopupImage,
#heroPopupImage,
#cutsceneImage {
    pointer-events: none;
}


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

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

/* Header Guild badge (icon above name) */
.guild-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-right: auto; /* pushes buttons to the right */
    min-width: 140px;
    max-width: 220px;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 4px 10px;
    background-color: RGBA(255, 255, 255, 0.2);
}

.guild-header:hover {
    background-color: RGBA(255, 255, 255, 0.1);
}

.guild-header-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid rgba(75, 85, 99, 0.9);
    background: rgba(17, 24, 39, 0.85);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}

.guild-header-name {
    font-size: var(--font-xs);
    color: #e5e7eb;
    line-height: 1.1;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

main {
    padding: 1rem;
	padding-bottom: 3rem;	
}

/* global utility */
.hidden {
  /* display: none; */
}


/* =========================================================
   2b. GENERIC BUTTONS
   ========================================================= */
     
   
.button-standard { border-radius: 999px; cursor: pointer;}
.button-small { padding: 3px 6px; font-size: var(--font-xs);}

.button-yellow { color:#facc15; border: 1px solid #facc15; background: #111; }
.button-yellow:hover { color:#111; border: 1px solid #facc15; background: #facc15; }

.button-pulse{animation: pulseButton 2s ease-in-out infinite;}

@keyframes pulseButton {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(0.98); }
    50%      { transform: scale(1.02); }
    75%      { transform: scale(0.98); }
}

/* =========================================================
   2c. GENERIC POPUP
   ========================================================= */

.popup-footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    border: 1px solid RGBA(33, 33, 33, 1.0);
    background: RGBA(33, 33, 33, 1.0);
    color: #eeeeee;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    gap: 0.25rem;
	width: 100%;
    transition: background 0.15s 
ease, border-color 0.15s 
ease, box-shadow 0.15s 
ease, transform 0.08s 
ease;
}

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

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

/* UI verstecken, solange Intro aktiv ist */
body.intro-active header,
body.intro-active footer,
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%;
}
#authEmail, #authPass {
	padding: 10px 15px;
	background-color: #ddd;
	border-radius: 5px;
    border: 1px solid #eee;
}

#authLoginBtn, #authRegisterBtn, #authLogoutBtn {
    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: 5px 0;
}

#authLogoutBtn {
	padding: 0.2rem 0.75rem;
    border: 1px solid #111;
	font-size: 0.8em;
    background: #333;
    color: #CCC;
}
#authRegisterBtn {
	padding: 0.2rem 0.75rem;
    border: 1px solid #111;
	font-size: 0.8em;
    background: #333;
    color: #CCC;
}
#authLogoutBtn {
	padding: 0.2rem 0.75rem;
    border: 1px solid #111;
	font-size: 0.8em;
    background: #333;
    color: #CCC;
}
#authLogoutBtn:hover {
    background: #666;
}

/* 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, #loadLastGameBtn: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 {
    width: 100%;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    border: 1px solid #4b5563;
    background: #111827;
    color: #f9fafb;
    font-size: var(--font-sm);
    font-weight: 700;
    cursor: pointer;
    gap: 0.35rem;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease;
}
.game-start-button:hover {
    background: #1f2937;
    border-color: #6b7280;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
    transform: translateY(-1px);
}

.game-start-button:active {
    transform: translateY(0px);
}

.game-start-button[disabled] {
    opacity: 0.45;
    cursor: default;
    background: #0b1220;
    border-color: #374151;
    box-shadow: none;
    transform: none;
}

/* Start overlay auth box (login/register) */
#authBox input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #374151;
    background: #0b1220;
    color: #f9fafb;
    outline: none;
}

#authBox input::placeholder {
    color: #9ca3af;
}

#authBox input:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
}


/* Password toggle (eye icon) */
#authBox .auth-input-wrap {
    position: relative;
    width: 100%;
}

#authBox .auth-input-wrap input {
    padding-right: 2.6rem;
}

#authBox .pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#authBox .pw-toggle:hover {
    background: rgba(255,255,255,0.06);
    color: #e5e7eb;
}

#authBox .pw-toggle:active {
    transform: translateY(-50%) scale(0.98);
}

#authBox .pw-toggle svg {
    width: 18px;
    height: 18px;
}

#authBox .pw-toggle .eye-closed { display: none; }
#authBox .pw-toggle.showing .eye-open { display: none; }
#authBox .pw-toggle.showing .eye-closed { display: block; }

.auth-register-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #cbd5e1;
    opacity: 0.9;
    text-align: left;
}

.auth-register-info {
    margin-top: 6px;
    font-size: 12px;
    color: #fca5a5;
    text-align: left;
    opacity: 0.95;
}

/* 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-base);
    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
   ========================================================= */
   
/* Vollbild-Overlay für das Guild-Level-Up-Popup (wie Hero-/Assignment-Overlay) */
#guildLevelOverlay {
    display: none;
}

/* Guild-Level-Up-Popup – im Stil von Hero-/Assignment-Popup */
#guildLevelPopup {
    display: none;
}

/* Header & Body im gleichen Stil wie Hero-/Questlog */
#guildLevelPopupHeader {
    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 */

    /* --- NEU: Header bleibt oben, wenn Body scrollt --- */
    position: sticky;
    top: 0;
    z-index: 1;
}

#guildLevelPopupBody {
    padding: 0.65rem 0.75rem 0.75rem;

    /* --- NEU: Body scrollt, damit man unten immer hinkommt --- */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(90vh - 56px); /* ca. Headerhöhe; safe für mobile */
}

#guildLevelRewards {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: var(--font-sm);
}

.guild-level-reward-row {
    padding: 0.35rem 0.45rem;
    border-radius: 6px;
    background: #020617;
    border: 1px solid #374151;
}

.guild-level-reward-choice {
    /*
	padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: #020617;
    border: 1px solid #4b5563;
	*/
}

.guild-level-reward-choice-buttons {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.guild-level-reward-choice-btn {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    border: 1px solid #4b5563;
    background: #020617;
    color: #e5e7eb;
    cursor: pointer;
    text-align: left;
}

.guild-level-reward-choice-btn:hover:not(:disabled) {
    background: #111827;
    border-color: #6b7280;
}

.guild-level-reward-choice-btn.selected {
    border-color: #22c55e;
    background: #022c22;
}

.guild-level-reward-choice-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ----------------------------------------
   ITEM-KARTEN (Random Choice, Grant etc.)
   ---------------------------------------- */

.guild-level-reward-item-grid {
    margin-top: 0.4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.4rem;
}

.guild-level-reward-item-card {
    padding: 0.35rem 0.4rem;
    border-radius: 8px;
    border: 1px solid #4b5563;
    background: #020617;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.guild-level-reward-item-card.selected {
    border-color: #22c55e;
    background: #022c22;
}

.guild-level-reward-item-card.disabled {
    opacity: 0.55;
    cursor: default;
}

.guild-level-reward-item-icon {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 6px;
    background: #020617;
}

.guild-level-reward-item-name {
    font-size: var(--font-sm);
    font-weight: 600;
}

.guild-level-reward-item-type {
    font-size: var(--font-xs);
    color: #9ca3af;
}

.guild-level-reward-item-stats {
    font-size: var(--font-xs);
    color: #e5e7eb;
}

/* ----------------------------------------
   NEU: "Reward Card" Layout (Icon 64 links)
   Wird von der neuen renderGuildLevelRewardPreviewOnly() genutzt
   ---------------------------------------- */
.guild-level-reward-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: #020617;
    border: 1px solid #374151;
}

.guild-level-reward-card__iconwrap {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guild-level-reward-card__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    background: #020617;
}

.guild-level-reward-card__text {
    flex: 1 1 auto;
    min-width: 0;
}

.guild-level-reward-card__titleRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.guild-level-reward-card__title {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guild-level-reward-card__desc {
    margin-top: 0.15rem;
    font-size: var(--font-sm);
    color: #cbd5e1;
    line-height: 1.2em;
}

.guild-level-reward-card__badge {
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--font-xs);
    background: rgba(255, 215, 0, 0.16);
    border: 1px solid rgba(255, 215, 0, 0.25);
    color: #fde68a;
}


#heroSelectOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.90);
  z-index: 9011;
  display: none;
}

#heroSelectPopup{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.8);
  width: 420px;
  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: 9020;
}

/* =========================================================
   GUILD LEVEL INFO POPUP (Rewards Vorschau) – hübscher + Bilder
   ========================================================= */

#guildLevelInfoOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.90);
  z-index: 8995;
  display: none; /* wichtig: verhindert "auto open" */
}

#guildLevelInfoPopup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.8);
  width: 520px;
  max-width: 92vw;
  max-height: 86vh;
  overflow: auto;

  background: #020617;
  border-radius: 10px;
  border: 1px solid #4b5563;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
  color: #e5e7eb;

  display: none; /* wichtig: Popup bleibt zu bis PopupManager öffnet */
  z-index: 9000;
  font-size: var(--font-sm);
}

#guildLevelInfoPopup .popup-header,
#guildLevelInfoPopupHeader {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #374151;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #030712;
}

#guildLevelInfoPopup .popup-body,
#guildLevelInfoPopupBody {
  padding: 0.65rem 0.75rem 0.85rem;
}

#guildLevelInfoRewards {
  margin-top: 0.6rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.guild-level-info-reward-item {
  margin: 0;
  padding: 0;
}

/* Card Layout */
.guild-level-info-reward-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.6rem;
  align-items: center;

  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
}

.guild-level-info-reward-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,0.06);
}

.guild-level-info-reward-title {
  font-weight: 700;
  font-size: var(--font-sm);
  line-height: 1.1;
}

.guild-level-info-reward-desc {
  margin-top: 0.15rem;
  font-size: var(--font-xs);
  color: #9ca3af;
  line-height: 1.25;
}

/* kleine Badge (z.B. x3) */
.guild-level-info-reward-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  font-size: var(--font-xs);
  border: 1px solid #4b5563;
  background: #0b1220;
  color: #e5e7eb;
}


/* ----------------------------------------
   HERO-KARTEN (Random Choice mit Details)
   ---------------------------------------- */

/* Karten nebeneinander */
.guild-level-reward-hero-grid {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

/* Hero-Karte */
.guild-level-reward-hero-card {
    width: 30%;
	max-width: 120px;
    padding: 0.35rem 0.4rem;
    border-radius: 8px;
    border: 1px solid #4b5563;
    background: #020617;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}

.guild-level-reward-hero-card:hover {
    transform: translateY(-1px);
    border-color: #6b7280;
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.6);
}

.guild-level-reward-hero-card.selected {
    border-color: #22c55e;
    background: #022c22;
}

.guild-level-reward-hero-card.disabled {
    opacity: 0.55;
    cursor: default;
}

/* Portrait */
.guild-level-reward-hero-portrait {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    background: #020617;
}

/* Name / Klasse */
.guild-level-reward-hero-name {
    font-size: var(--font-sm);
    font-weight: 600;
    text-align: center;
}

.guild-level-reward-hero-role {
    font-size: var(--font-xs);
    color: #9ca3af;
    text-align: center;
}

/* (Optional) Kurz-Stats direkt unter der Karte */
.guild-level-reward-hero-stats {
    font-size: var(--font-xs);
    color: #e5e7eb;
}

/* ----------------------------------------
   HERO-DETAILPANEL UNTERHALB (Stats + Terrain)
   ---------------------------------------- */
.guild-level-uo-text{
	margin: 0;
	font-size: 20px;
}

.guild-level-hero-details {
    padding-top: 10px
	/*
	margin-top: 0.75rem;
    border-top: 1px solid #374151;
	*/
}

.guild-level-hero-details.hidden {
    display: none;
}

.guild-level-hero-details.visible {
    display: block;
}

.guild-level-hero-details-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #020617;
    border-radius: 10px;
    border: 1px solid #4b5563;
    padding: 0.6rem 0.7rem;
}

.guild-level-hero-details-title {
    font-size: var(--font-sm);
    font-weight: 600;
}

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

/* Stats + Terrain in zwei Spalten, wie in der Cutscene */
.guild-level-hero-details-content {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: flex-start;
}

.guild-level-hero-attributes,
.guild-level-hero-terrain {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.guild-level-hero-terrain-title {
    font-size: var(--font-xs);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.guild-level-hero-terrain-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: var(--font-xs);
}

.guild-level-hero-terrain-entry {
    display: flex;
    justify-content: space-between;
}

.terrain-bonus-positive {
    color: #bbf7d0;
}

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

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

/* Stat-Zeilen (vereinfacht von Cutscene-Styles übernommen) */
.guild-level-hero-stat-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.guild-level-hero-stat-content {
    flex: 1;
}

.guild-level-hero-stat-header {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-xs);
}

.guild-level-hero-stat-bar {
    margin-top: 0.15rem;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: #020617;
    overflow: hidden;
}

.guild-level-hero-stat-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #22c55e;
    transition: width 0.25s ease-out;
}


.guild-level-hero-stat-label {
    flex: 1;
    color: #9ca3af;
}

.guild-level-hero-stat-value {
    min-width: 2.2rem;
    text-align: right;
    font-weight: 600;
}


/* Bestätigungs-Button im Detailpanel */
.guild-level-hero-select-btn {
    margin-top: 0.4rem;
    align-self: flex-end;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #22c55e;
    background: #022c22;
    color: #bbf7d0;
    font-size: var(--font-xs);
    cursor: pointer;
}

.guild-level-hero-select-btn:hover {
    background: #064e3b;
}


.guild-level-item-header {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.guild-level-item-icon-wrap {
    flex: 0 0 64px;
}

.guild-level-item-icon-large {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: contain;
    background: #020617;
}

.guild-level-item-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.guild-level-item-description {
    font-size: var(--font-xs);
    margin-bottom: 0.35rem;
    color: #e5e7eb;
}

.guild-level-item-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    align-items: center;
    font-size: var(--font-xs);
}

.guild-level-item-tag-label {
    opacity: 0.8;
}

.guild-level-item-tag {
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid #4b5563;
    background: #020617;
}

.guild-level-item-tag.item-tag-allowed {
    border-color: #22c55e;
    color: #bbf7d0;
}

.guild-level-item-tag.item-tag-denied {
    border-color: #ef4444;
    color: #fecaca;
}


.guild-level-reward-item-stats ul {
  padding-left: 18px;
  margin: 3px 0 8px 0;
}

.item-section-title {
  margin-top: 6px;
  font-weight: bold;
  font-size: 0.85em;
}

.item-section-title.allowed {
  color: #22c55e;
}
.item-section-title.denied {
  color: #c33;
}

.stat-icon {
  width: 18px;
  height: 18px;
  margin-right: 1px;
  vertical-align: middle;
}


button.hero-select-entry {
    border-radius: 6px;
    max-width: 28%;
    cursor: pointer;
    background: radial-gradient(circle at 30% 20%, #1f2937, #020617);
    color: #FFF;
    border: 1px solid #4b5563;
    padding: 4px;
    margin: 5px;
}

.hero-select-entry img {
    width: 100%;
    margin-bottom: 5px;
}

/* 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;
}

#guildBar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#guildLevelLine {
  font-size: 14px;
  font-weight: 600;
}

#guildLevelLabelText {
  /* optional leicht hervorheben */
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Wrapper, übernimmt Optik der anderen Balken */
.guild-level-xp-bar {
  width: 100%;
  height: 12px !important;
  border-radius: 999px;
  overflow: hidden;
}

/* Füllung – nutzt deine vorhandene hero-card-stat-bar-fill-Klasse */
.guild-level-xp-bar-fill {
  width: 0%;
  height: 100%;
  transition: width 0.3s ease-out;
}

/* -------------------------------------------- */
/* ✨ XP-Balken – animierter Glanz-Effekt       */
/* -------------------------------------------- */

.guild-level-xp-bar {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
}

/* bunt/verlauf – falls du später einen anderen Farblook willst */
.guild-level-xp-bar-fill {
  background: linear-gradient(90deg,
    #2563eb,
    #4f46e5,
    #7c3aed
  );
  position: relative;
  overflow: hidden;
}

/* ✨ Glanz-Schimmer */
.guild-level-xp-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;

  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.80) 50%,
    rgba(255, 255, 255, 0) 100%
  );

  filter: blur(4px);
  opacity: 0.7;

  animation: guildXPGlanz 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* Animation: wandert alle paar Sekunden durch */
@keyframes guildXPGlanz {
  0%   { left: -40%; }
  25%  { left: 110%; } /* Glanz einmal komplett durch */
  100% { left: 110%; }
}

.guild-level-info-btn {
  margin-left: 0.5rem;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #facc15;
  background: #111;
  color: #facc15;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 8px;
}

.guild-level-info-btn:hover {
  background: #0f172a;
  border-color: #4b5563;
}

.guild-level-info-btn.reward-available{
    animation: pulseGuildLevelUp 2s ease-in-out infinite;
	background: #facc15;
	border-color: #facc15;
	color: #0f172a;
}

.guild-level-info-btn.reward-available:hover{
    animation: pulseGuildLevelUp 2s ease-in-out infinite;
	background: #0f172a;
	border-color: #facc15;
	color: #facc15;
}

@keyframes pulseGuildLevelUp {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(0.97); }
    50%      { transform: scale(1.05); }
    75%      { transform: scale(0.97); }
}

#guildLevelBar {
  font-size: 0.8rem;
  opacity: 0.7;
  padding: 2px 6px;
  display: inline-block;
}

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

/* Coins-Anzeige */
#guildCoins {
    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;
}


/* 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 */

/* Legacy nav tile button styles removed for new-design (image buttons) *

/* ------------------------------
   Crafting Popup (Step 2 UI)
------------------------------ */
.crafting-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

/* Friendly intro card */
.crafting-intro {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.crafting-intro-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.35);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.crafting-intro-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    opacity: 0.95;
}

.crafting-intro-title {
    font-weight: 850;
    color: #f3f4f6;
    letter-spacing: 0.2px;
}

.crafting-intro-sub {
    margin-top: 0.15rem;
    opacity: 0.88;
    color: #e5e7eb;
    line-height: 1.35;
    font-size: 0.95em;
}

/* Section cards */
.crafting-section {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.40);
    padding: 0.75rem 0.85rem;
}

.crafting-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
}

.crafting-section-title {
    font-weight: 900;
    color: #f3f4f6;
    letter-spacing: 0.2px;
}

.crafting-section-sub {
    margin-top: 0.15rem;
    opacity: 0.85;
    color: #e5e7eb;
    font-size: 0.92em;
    line-height: 1.3;
}

.crafting-empty-state {
    padding: 0.75rem 0.1rem 0.25rem;
    opacity: 0.95;
}

.crafting-empty-state-title {
    font-weight: 800;
    color: #e5e7eb;
}

.crafting-empty-state-sub {
    margin-top: 0.2rem;
    opacity: 0.85;
    line-height: 1.35;
}

/* Crafting header: title + recipes button */
.crafting-header-left {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.crafting-recipes-btn {
    padding: 0.25rem 0.55rem;
    border-radius: 10px;
}

.crafting-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.crafting-actions .ui-button {
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
}

.crafting-actions .ui-button[disabled] {
    opacity: 0.55;
}

/* Section cards inside crafting popup */
.crafting-section {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.40);
    padding: 0.75rem 0.85rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.crafting-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
}

.crafting-section-title {
    font-weight: 900;
    color: #f3f4f6;
    letter-spacing: 0.2px;
}

.crafting-section-sub {
    margin-top: 0.15rem;
    opacity: 0.82;
    color: #e5e7eb;
    font-size: 0.93em;
    line-height: 1.35;
}

.crafting-empty-state {
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 0.85rem 0.85rem;
    background: rgba(0, 0, 0, 0.35);
}

.crafting-empty-state-title {
    font-weight: 850;
    color: #f3f4f6;
}

.crafting-empty-state-sub {
    margin-top: 0.2rem;
    opacity: 0.85;
    color: #e5e7eb;
    line-height: 1.35;
}

.crafting-selected-title {
    font-weight: 700;
    color: #e5e7eb;
}

.crafting-selected-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crafting-selected-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.5rem 0.6rem;
}

.crafting-selected-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.crafting-selected-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid #3f3f46;
    object-fit: cover;
}

.crafting-selected-name {
    font-weight: 650;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.crafting-selected-right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.crafting-selected-qty {
    min-width: 42px;
    text-align: right;
    color: #e5e7eb;
    opacity: 0.95;
    font-weight: 700;
}

.crafting-empty {
    opacity: 0.75;
    padding: 0.35rem 0.1rem;
}

.crafting-hint {
    opacity: 0.8;
    font-size: 0.95em;
    line-height: 1.35;
}

.crafting-craft-title {
    font-weight: 800;
    color: #e5e7eb;
    margin-top: 0.1rem;
}

.crafting-no-match {
    opacity: 0.75;
    padding: 0.25rem 0.1rem;
}

.crafting-craft-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Inline item info shown under craft result */
.crafting-inline-info {
    margin-top: 0.45rem;
    border: 1px solid #3f3f46;
    border-radius: 12px;
    background: #0b0b0b;
    padding: 0.55rem 0.65rem;
}

.crafting-inline-info-title {
    font-weight: 800;
    color: #e5e7eb;
    margin-bottom: 0.25rem;
}

.crafting-inline-info-desc {
    color: #e5e7eb;
    opacity: 0.9;
    line-height: 1.35;
}

.crafting-inline-info-effects {
    margin-top: 0.35rem;
    font-size: 0.95em;
    opacity: 0.9;
    line-height: 1.35;
}

.crafting-inline-info-effects strong {
    opacity: 1;
}

/* Recipes popup list */
.crafting-recipes-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.crafting-recipe-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 2px solid #3f3f46;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.55rem 0.65rem;
    flex-wrap: wrap;
}

.crafting-recipe-part {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.crafting-recipe-op {
    opacity: 0.75;
    font-weight: 900;
    padding: 0 0.15rem;
}

.crafting-recipe-qty {
    color: #e5e7eb;
    font-weight: 800;
    min-width: 24px;
    text-align: right;
}

.crafting-recipe-iconbtn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.crafting-recipe-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #3f3f46;
    object-fit: cover;
    display: block;
}

/* Button that shows the craft result + cost */
.crafting-craft-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: space-between;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
}

.crafting-craft-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid #3f3f46;
    object-fit: cover;
    flex: 0 0 auto;
}

.crafting-craft-name {
    flex: 1 1 auto;
    text-align: left;
    font-weight: 750;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crafting-craft-cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #facc15;
    font-weight: 850;
    flex: 0 0 auto;
}

.crafting-craft-cost .crown-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* Inline item info under craftable output */
.crafting-inline-info {
    margin-top: -0.25rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #2f2f33;
    border-radius: 12px;
    background: #090909;
    color: #e5e7eb;
    line-height: 1.35;
}

.crafting-inline-info .crafting-inline-desc {
    opacity: 0.9;
}

.crafting-inline-info .crafting-inline-effects {
    margin-top: 0.45rem;
    opacity: 0.95;
    font-size: 0.95em;
}

.crafting-inline-info .crafting-inline-effects-title {
    font-weight: 800;
    margin-bottom: 0.15rem;
}

/* Recipes popup */
.crafting-recipes-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.crafting-recipe-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid #3f3f46;
    border-radius: 12px;
    background: #0b0b0b;
    padding: 0.55rem 0.65rem;
    flex-wrap: wrap;
}

.crafting-recipe-part {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.crafting-recipe-qty {
    color: #e5e7eb;
    font-weight: 850;
    opacity: 0.95;
}

.crafting-recipe-iconbtn {
    border: 1px solid #3f3f46;
    background: #111;
    border-radius: 10px;
    padding: 0;
    width: 44px;
    height: 44px;
    overflow: hidden;
    cursor: pointer;
}

.crafting-recipe-iconbtn img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    display: block;
}

.crafting-recipe-sep {
    opacity: 0.75;
    font-weight: 900;
    padding: 0 0.1rem;
}

/* Recipes popup header: title left, actions + close on the right */
#craftingRecipesPopup .guild-popup-header {
    justify-content: flex-start;
    gap: 10px;
}

#craftingRecipesPopup .guild-popup-header > span {
    flex: 1 1 auto;
}

.crafting-recipes-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Recipes list layout: ingredients left, result right (no + or =) */
.crafting-recipe-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.crafting-recipe-ingredients {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1 1 240px;
}

.crafting-recipe-ingredient {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.crafting-recipe-qtybadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #3f3f46;
    background: #111;
    color: #e5e7eb;
    font-weight: 850;
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.95;
}

.crafting-recipe-result {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* Quick-action button inside recipe rows */
.crafting-recipe-craftnow {
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.crafting-recipe-iconbtn.is-result {
    width: 52px;
    height: 52px;
    border-radius: 12px;
}

.crafting-recipe-iconbtn.is-result img {
    width: 52px;
    height: 52px;
}

.crafting-recipe-row.is-craftable {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.15);
}



/* Vollbild-Overlay für die Guild-Chest (wie Hero-/Assignment-Overlay) */
/* DELETE
#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%) scale(1.8);
  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-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.guild-chest-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.guild-chest-tab {
  font-size: 10px;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid #374151;
  background: rgba(33, 33, 33, 0.55);
  color: #e5e7eb;
  cursor: pointer;
  user-select: none;
}

.guild-chest-tab:hover {
  border-color: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.25);
}

.guild-chest-tab.active {
  border-color: #facc15;
  background: rgba(250, 204, 21, 0.12);
}

.guild-chest-sort {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #374151;
  background: rgba(31, 41, 55, 0.55);
  color: #e5e7eb;
  outline: none;
}

.guild-chest-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 8px;
}

.guild-chest-page-btn {
  font-size: var(--font-xxs);
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid #374151;
  background: rgba(31, 41, 55, 0.55);
  color: #e5e7eb;
  cursor: pointer;
  user-select: none;
}

.guild-chest-page-btn:hover {
  border-color: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.18);
}

.guild-chest-page-btn.active {
  border-color: #facc15;
  background: rgba(250, 204, 21, 0.12);
}

.guild-chest-page-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.guild-chest-sort:focus {
  border-color: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.25);
}

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

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

/* 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;
  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: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  border-radius: 10px;
}

/* 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%) scale(1.8);
  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-info-restrict {
  margin-top: 2px;
  font-size: var(--font-xs);
  color: #e5e7eb;
}

.guild-chest-info-restrict-row {
  margin-top: 2px;
  line-height: 1.3;
}

.guild-chest-info-restrict-label {
  font-weight: 600;
  color: #9ca3af;
}

.guild-chest-info-restrict-row.restrict-allowed {
  color: #86efac;
}

.guild-chest-info-restrict-row.restrict-denied {
  color: #fca5a5;
}

.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;
  margin: 1px 0;
}

.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;
}


.guild-chest-info-actions { margin-top: 12px; display:flex; gap:10px; }
/*.guild-chest-use-btn { padding:10px 12px; border-radius:10px; cursor:pointer; }*/

#consumableHeroSelectPopup .consumable-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.consumable-hero-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px;
  border-radius:12px;
  cursor:pointer;
}

.consumable-hero-img { width:64px; height:64px; object-fit:cover; border-radius:12px; }
.consumable-hero-name { font-size: 14px; }



/* ------------------------------------
   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: #333;          /* grau */
    color: #ccc;
}

#openGuildChestBtn .badge-coin-icon {
    width: 0.95rem;
    height: 0.95rem;
    margin-right: 0.25rem;
    object-fit: contain;
}


/* =========================================================
   6. TILE-GRID & TILES
   ========================================================= */
   
/*
.terrain-icon {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
*/

.terrain-grassland, .terrain-grass  { background-image: url('../img/elements/tiles/grassland_32x32.png'); }
.terrain-forest  { background-image: url('../img/elements/tiles/forest_32x32.png'); }
.terrain-swamp      { background-image: url('../img/elements/tiles/swamp_32x32.png'); }
.terrain-desert      { background-image: url('../img/elements/tiles/desert_32x32.png'); }
.terrain-mountain  { background-image: url('../img/elements/tiles/mountain_32x32.png'); }
.terrain-village  { background-image: url('../img/elements/tiles/village_32x32.png'); }
.terrain-city    { background-image: url('../img/elements/tiles/city_32x32.png'); }
.terrain-lake    { background-image: url('../img/elements/tiles/lake_32x32.png'); }
/*
.terrain-icon    { background-image: url('../img/elements/attributes/charisma_32x32.png'); }
.terrain-icon    { background-image: url('../img/elements/attributes/charisma_32x32.png'); }
*/

/* 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: 100%;
    height: 100%;
    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;
}

/* =========================================================
   ASSIGNMENT BADGES ON TILES (Difficulty + Required Attributes)
   ========================================================= */

/* Top-left: difficulty (icon + number only) */
.tile-assignment-diff-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.42rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.48);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.25) inset,
        0 6px 14px rgba(0,0,0,0.35),
        0 0 14px rgba(239, 68, 68, 0.18);
    pointer-events: none;
    user-select: none;
}

.tile-assignment-diff-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.98);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.tile-assignment-diff-value {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.98);
}

/* Bottom-right: required attribute icons */
.tile-assignment-attrs-badge {
    position: absolute;
    right: 6px;
    bottom: 10px; /* keep clear of the timer bar */
    display: inline-flex;
    align-items: center;
    gap: 0m;
    /* slightly tighter badge on tiles */
    padding: 1px 3px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.28) inset,
        0 10px 20px rgba(0,0,0,0.35);
    pointer-events: none;
    user-select: none;
}

.tile-assignment-attrs-badge .attr-icon {
    /* icons a bit bigger for readability */
    width: 19px;
    height: 19px;
    opacity: 0.95;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}


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

.has-offer {
	animation: wiggleOffer 4s ease-in-out infinite;
}

@keyframes wiggleOffer {
    0%, 46% {transform: rotate(0deg);}
    47% {transform: rotate(1.5deg);}
    48% {transform: rotate(0deg);}
    49% {transform: rotate(-3deg);}
    50% {transform: rotate(0deg);}
    51% {transform: rotate(3deg);}
    52% {transform: rotate(0deg);}
    53% {transform: rotate(-1.5deg);}
    54%, 100% {transform: rotate(0deg);}
}

.tile-reward-pending{
	border: 2px solid #3b82f6;
	animation: bounceReward  4s ease-in-out infinite;
}

@keyframes bounceReward {
    0%, 42% { transform: translateY(0); }
    44% { transform: translateY(-8px); }
    46% { transform: translateY(0); }
    48% { transform: translateY(-6px); }
    50% { transform: translateY(0); }
    52% { transform: translateY(-4px); }
    54% { transform: translateY(0); }
    56% { transform: translateY(-2px); }
    58%, 100% { transform: translateY(0); }
}

.tile-assignment-running {
    animation: pulseRunning 2s ease-in-out infinite;
}

@keyframes pulseRunning {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(0.99); }
    50%      { transform: scale(1.01); }
    75%      { transform: scale(0.99); }
}

/* 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: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.8);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
	background: #3b82f6;
    padding: 3px 7px 4px;
    border-radius: 99px;
    border: 1px solid #000;
    color: #fff;
    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%) scale(1.8);
  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;
}


.hero-card-health {
    position: absolute;
    top: -10px;
    display: flex;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 100px;
    border: 1px solid #666;
    background: #111111;
    font-size: 13px;
    color: #fff;
}

.hero-card-health-icon {
    width: 16px !important;
    height: 16px !important;
}

.hero-low-health {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.8);
}

.hero-popup-health {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.hero-popup-health-icon {
    width: 16px !important;
    height: 16px !important;
}

.hero-popup-health-next {
    opacity: 0.8;
    font-size: 12px;
    margin-left: auto;
}

.health-flash {
    animation: healthFlash 0.5s ease-in-out;
}

@keyframes healthFlash {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}


.hero-card-energy {
    position: absolute;
    /* right: -10px; */
    bottom: -10px;
    display: flex;
    /* align-items: center; */
    gap: 4px;
    padding: 2px 6px;
    border-radius: 100px;
    border: 1px solid #666;
    background: #111111;
    font-size: 13px;
    color: #fff;
}

.hero-card-energy-icon {
    width: 16px !important;
    height: 16px !important; 
}

.hero-low-energy {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.8);
}

.hero-popup-energy {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.hero-popup-energy-icon{
	height: 28px;
	width: 28px;
}


.hero-card-energy.energy-flash {
  animation: energyFlash 1500ms ease-out;
}

@keyframes energyFlash {
  0%   { background: rgba(17, 17, 17, 1.0); }
  25%  { background: rgba(59, 130, 246, 1.0); }
  100% { background: rgba(17, 17, 17, 1.0); }
}



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

#heroesContainer, #guildButtonsContainer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}

/* 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: 100%;
    height: 100%;
    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); }
}









/* =========================================
   GENERISCHE POPUPS (PopupManager-kompatibel)
   Wird u.a. für Guild Level Info verwendet
   ========================================= */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 8995;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   POPUPMANAGER – NEW DEFAULT: FULLSCREEN
   - Popups are fullscreen on all devices
   - Close button sits at the bottom
   - Popup content scrolls internally if it overflows
   ========================================= */

/* Prevent background scroll when a popup is open */
body.pm-popup-open {
  overflow: hidden;
}

/* Overlay forced to fullscreen stretch */ 
.pm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 11, 1.0);
  /* Keep compatible with legacy popup z-indexes (most popups use ~9000) */
  z-index: 8995;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0 !important;
}

/* If an overlay already has its own style (like .popup-overlay), force stretch */
.pm-overlay.popup-overlay,
.pm-overlay.worldmap-overlay {
  align-items: stretch !important;
  justify-content: stretch !important;
}

/* Fullscreen popup container */
.pm-fullscreen {
  position: fixed;
  inset: 0;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(var(--app-vh, 1vh) * 100) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  /* Important: many legacy popups set overflow-y on the container.
     We must keep the footer outside the scroll area, so force overflow hidden. */
  overflow: hidden !important;
  transform: none !important;
  z-index: 9002;
	inset: auto !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	height: auto !important;  
}

/* Make legacy popup-window containers fullscreen too */
/*
.pm-fullscreen.popup-window {
  width: 100vw;
  height: 100vh;
}
*/

/* World map popup also forced fullscreen (it has its own sizing styles later) */
.pm-fullscreen.worldmap-popup {
  width: 100vw !important;
  height: calc(var(--app-vh, 1vh) * 100) !important;
}

/*
  Desktop sizing (>= 900px)
  - Most popups become a centered modal (roughly half-screen width)
  - World map stays large
  - Bottom close button must remain visible; content scrolls internally
*/



/* Scroll area */
.pm-popup-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Bottom close bar */
.pm-popup-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
 /* border-top: 1px solid #1f2937;
  background: #020617;*/
}

.pm-popup-footer .pm-close-btn {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: block;
}

/* Hide common top-right close icons when we have a bottom close bar */
.pm-has-bottom-close button.close-btn[data-popup-close],
.pm-has-bottom-close .worldmap-close[data-popup-close] {
  display: none !important;
}

/* Remove internal max-heights that created nested scrolling on some popups */
.pm-fullscreen .popup-body {
  max-height: none;
  overflow: visible;
}

/* Fensterrahmen – orientiert sich an #guildLevelPopup, #heroPopup etc. */
/*
.popup-window {
  background: #020617;
  border-radius: 12px;
  border: 1px solid #4b5563;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  width: 420px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e5e7eb;
  font-size: var(--font-sm, 14px);
}
*/

/* Mini-Info Popup (kurz eingeblendete Hinweise) */
.mini-info-overlay {
  background: rgba(0, 0, 0, 0);
  align-items: flex-start;
  justify-content: center;
  padding-top: 70px;
  pointer-events: none; /* Klicks sollen nicht blockieren */
  z-index: 9998;
}

.mini-info-window {
  width: 100%;
  margin: 20% 10%;
  max-width: 92vw;
  pointer-events: auto; /* Fenster selbst kann (falls nötig) Interaktion bekommen */
}

.mini-info-header {
  border-bottom: 0;
  padding: 0.5rem 1rem 0;
}

.mini-info-body {
  padding: 0.75rem 1rem 1rem;
}

.mini-info-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.mini-info-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid #1f2937;
  background: rgba(2, 6, 23, 0.6);
  object-fit: cover;
  image-rendering: auto;
}

#miniInfoText {
  line-height: 1.4;
}


.mini-info-footer {
  padding: 0 1rem 0.9rem;
  display: flex;
  justify-content: flex-end;
}

/* ===========================
   DAILY REWARDS POPUP
   =========================== */

.daily-rewards-overlay {
  z-index: 10050;
}

.daily-rewards-window {
  max-width: 520px;
  width: calc(100% - 24px);
}

.daily-rewards-subtitle {
  margin: 0 0 12px 0;
  opacity: 0.85;
}

.daily-rewards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daily-reward-day {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,0.25);
}

.daily-reward-day__label {
  font-weight: 600;
  margin-bottom: 4px;
}

.daily-reward-day__reward {
  opacity: 0.85;
  font-size: 0.95rem;
}

.daily-reward-day--next {
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12) inset;
}

.daily-reward-day--claimed {
  opacity: 0.6;
}

.daily-reward-day--chest {
  grid-column: 1 / -1;
}

@media (max-width: 420px) {
  .daily-rewards-grid {
    grid-template-columns: 1fr;
  }
}

/* Kopfzeile – sehr ähnlich wie #guildLevelPopupHeader */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(to bottom, #020617, #020617);
  border-bottom: 1px solid #111827;
}

.popup-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Inhalt – wie andere Popups */
.popup-body {
  padding: 0.9rem 1rem 1rem;
  overflow-y: auto;
  max-height: calc(80vh - 3.5rem);
  line-height: 1.5;
}

/* Close-Button nutzt bereits .popup-close-btn-Styles,
   daher hier nichts extra nötig */




/* Liste der „Next Level“-Belohnungen im Info-Popup */
.guild-level-info-reward-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.guild-level-info-reward-list li {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(30, 64, 175, 0.5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Optional kleine Icon-Bubble oder Badge am Anfang */
.guild-level-info-reward-list li::before {
  content: "•";
  font-size: 14px;
  color: #facc15;
}



/* ----------------------------------------
   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)
   ========================================================= */

/*
  Global top-layer for auxiliary popups (e.g. item info over hero popup).
  Prevents stacking-context issues on mobile browsers...
*/
#topPopupLayer {
  position: fixed;
  inset: 0;
  z-index: 9018; /* intentionally extremely high */
  pointer-events: none; /* children enable their own events */
}

#topPopupLayer > * {
  pointer-events: auto;
}

/* Popups nie größer als der Viewport – Inhalt scrollt intern */
#assignmentPopup,
#heroPopup,
#gameEndPopup,
#guildLevelPopup {
    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%) scale(1.8);
    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;
    /* draw attention like .hero-card.hero-has-unspent::before */
    animation: heroAttrPlusPulse 1.4s ease-in-out infinite;
}

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

@keyframes heroAttrPlusPulse {
    0% {
        box-shadow: 0 0 0 rgba(250, 204, 21, 0);
    }
    50% {
        box-shadow: 0 0 18px rgba(250, 204, 21, 0.85);
    }
    100% {
        box-shadow: 0 0 0 rgba(250, 204, 21, 0);
    }
}


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

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


#assignmentPopup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.8);
    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 {
	display: none !important;
    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.25rem;
}

.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: 11px;
}

/* Terrain-Pills in blau */
.assignment-required-attributes-list li.terrain-item {
    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: 11px;
}

/* ============================
   ASSIGNMENT LOOT PREVIEW
   ============================ */

.assignment-loot-preview {
    margin-top: 0.65rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.assignment-loot-preview-title {
    font-weight: 600;
    font-size: var(--font-xs);
    color: #f3f4f6;
    margin-bottom: 0.35rem;
    /* display: flex; */
	display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.assignment-loot-preview-note {
    font-weight: 400;
    color: rgba(209, 213, 219, 0.9);
    font-size: 0.72rem;
}

.assignment-loot-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.assignment-loot-preview-item {
    display: inline-flex;
    align-items: center;
    gap: 0.10rem;
    padding: 0.1rem 0.1rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    user-select: none;
}

.assignment-loot-preview-item:active {
    transform: scale(0.99);
}

.assignment-loot-preview-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 0.35rem;
    background: rgba(0,0,0,0.22);
}

.assignment-loot-preview-name {
    font-size: 0.78rem;
    color: #e5e7eb;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assignment-loot-preview-chance {
    font-size: 0.50rem;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.05rem 0.1rem;
    /*
	border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
	*/
}

/* 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,
.assignment-energy-cost,
.assignment-reward-and-energy {
    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;
}

.assignment-energy-cost span:last-child{
    color: rgba(59, 130, 246, 1);
    font-weight: 600;	
}

.assignment-reward-and-energy {
	margin-bottom: 8px;
}

.assignment-reward-and-energy span:first-child{
    /* The left slot can show difficulty badges (not always a green reward value). */
    color: inherit;
    font-weight: 600;	
}

.assignment-reward-and-energy span:last-child{
    color: rgba(59, 130, 246, 1);
    font-weight: 600;	
}

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

/* Difficulty badge (shown under the time bar in active assignment popups) */
.difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    /* threatening / dangerous */
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.42);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.25) inset,
        0 6px 18px rgba(0,0,0,0.25),
        0 0 18px rgba(239, 68, 68, 0.14);
    user-select: none;
}

.difficulty-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    color: rgba(254, 202, 202, 0.95);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

.difficulty-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.85);
}

.difficulty-value {
    font-size: 0.9rem;
    font-weight: 800;
    color: rgba(254, 202, 202, 0.98);
}

/* -------------------------------------------------------------------------
   TILE OVERLAYS: assignment difficulty + required attributes
   ------------------------------------------------------------------------- */

.tile-assignment-diff-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.58);
    border: 1px solid rgba(239, 68, 68, 0.7);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.35) inset,
        0 10px 22px rgba(0,0,0,0.35),
        0 0 16px rgba(239, 68, 68, 0.16);
    pointer-events: none;
    user-select: none;
}

.tile-assignment-diff-badge .tile-diff-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    color: rgba(254, 202, 202, 0.95);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

.tile-assignment-diff-badge .tile-diff-value {
    font-size: 0.78rem;
    font-weight: 900;
    color: rgba(254, 202, 202, 0.98);
    letter-spacing: 0.02em;
}

.tile-assignment-attrs-badge {
    position: absolute;
    right: 6px;
    bottom: 8px; /* leave room for the timer bar */
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem 0.35rem;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.35) inset,
        0 10px 22px rgba(0,0,0,0.35);
    pointer-events: none;
    user-select: none;
}

.tile-assignment-attrs-badge .attr-icon {
    transform: scale(0.85);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

/* 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: #facc15; /* linear-gradient(to right, #22c55e, #facc15, #f97316); */
}

/* Hero-Slots im Popup */
#assignmentHeroSlots {
    display: flex;
    gap: 0.5rem;
    margin-top: 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-slot .empty {
    animation: pulseYellow 4s ease-in-out infinite;
}

@keyframes pulseYellow {
    0% {
        color: rgba(107, 114, 128, 1); /* leicht gelb */
    }
    30% {
        color: rgba(107, 114, 128, 1); /* leicht gelb */
    }
    50% {
        color: rgba(255, 255, 0, 0.6); /* etwas stärkeres Gelb */
    }
    70% {
         color: rgba(107, 114, 128, 1); 
    }    
	100% {
         color: rgba(107, 114, 128, 1); 
    }
}

/* 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: inline-flex;
    align-items: center;
    padding: 0.15rem;
    border-radius: 6px;
    cursor: pointer;
    gap: 0.4rem;
    font-size: var(--font-xs);
}

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

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

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

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

.hero-select-meta {
	display: none;
	/*
    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: 10px;
  margin-bottom: 4px;
}

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



/* =========================================================
   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%) scale(1.8);
    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%) scale(1.8);
    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%) scale(1.8);
    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 {
	margin: 1px 0;
    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;
}


/* Busy/Finalizing state (spinner on the right) */
.ui-button.is-busy {
    position: relative;
    padding-right: 1.85rem;
}

.ui-button.is-busy::after {
    content: '';
    position: absolute;
    right: 0.6rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 2px solid rgba(249, 250, 251, 0.25);
    border-top-color: currentColor;
    animation: haSpin 0.8s linear infinite;
}

@keyframes haSpin {
    to { transform: rotate(360deg); }
}

/* 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
   ========================================================= */

#assignmentResultProgress.success {
  transition: transform 0.4s ease;
  transform-origin: left;
  animation: pulseGreen 0.6s ease;
}

#assignmentResultProgress.fail {
  transition: transform 0.4s ease;
  transform-origin: left;
  animation: pulseRed 0.6s ease;
}

#assignmentResultStatus{
	/*display: none !important;*/
}

/* Make REQUIRED (target number) pop */
#assignmentResultRequired{
  justify-content:center;
  margin: 10px 0 6px;
  font-weight: bold;
  border: 1px solid #666;
  background: RGBA(0,0,0,0.4);
  padding: 3px 12px;
  border-radius: 3px;
}

#assignmentResultCurrent{
  display:none !important;
}

.assignment-d20-info {
	font-size: 22px;
}

/* BIG result text after dice */
.assignment-result-status.big{
  margin-top: 12px;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.assignment-result-status.big.success{
  text-shadow: 0 0 18px rgba(34,197,94,0.25);
}

.assignment-result-status.big.fail{
  text-shadow: 0 0 18px rgba(239,68,68,0.20);
}


.assignment-required-badge{
  display:flex;
  align-items:baseline;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(250, 204, 21, 0.35);
  background: rgba(250, 204, 21, 0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.assignment-required-badge__label{
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 204, 21, 0.9);
  font-weight: 800;
}

.assignment-required-badge__value{
  font-size: 22px;
  font-weight: 900;
  color: #fde68a;
}

 

/* 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;
	display: none !important;
}

/* 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;
	display: 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;
}

/* Reward preview shown after SUCCESS (before the player clicks "Take Rewards") */
.assignment-pending-rewards {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.assignment-pending-rewards-title {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 8px;
}

.assignment-pending-rewards-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Daily quest contribution section shown after claiming rewards */
.assignment-daily-contrib {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

/* Daily quest contrib rendered as an entry inside the reward list */
.assignment-reward-entry.assignment-daily-contrib-entry {
    display: block;
}

.assignment-reward-entry.assignment-daily-contrib-entry .assignment-daily-contrib {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.assignment-daily-contrib-title {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 8px;
}

.assignment-daily-contrib-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assignment-daily-contrib-row {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.assignment-daily-contrib-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.assignment-daily-contrib-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
}

.assignment-daily-contrib-meta {
    font-size: 11px;
    opacity: 0.8;
    white-space: nowrap;
}

.assignment-daily-contrib-bar-outer {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.assignment-daily-contrib-bar-inner {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.6);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25) inset;
}

.assignment-reward-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.assignment-reward-entry[data-has-progress="1"] {
    align-items: flex-start;
}

.assignment-reward-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assignment-reward-topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.assignment-reward-meta {
    font-size: 11px;
    opacity: 0.8;
    margin-top: -2px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.assignment-reward-meta-right {
    text-align: right;
    opacity: 0.95;
}

.assignment-reward-progress {
    height: 8px;
    border-radius: 999px;
    /* Allow the NEW LEVEL badge to sit above the bar */
    overflow: visible;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(0, 0, 0, 0.35);
    position: relative;
}

.assignment-reward-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    /* Motivating default color (overridden per type below) */
    background: linear-gradient(90deg, rgba(46, 229, 157, 0.95), rgba(0, 194, 255, 0.90));
    box-shadow: 0 0 10px rgba(46, 229, 157, 0.22);
    transition: width 650ms ease;
}

/* Slight variations per progress type */
.assignment-reward-progress-fill.progress-guild {
    background: linear-gradient(90deg, rgba(46, 229, 157, 0.98), rgba(0, 194, 255, 0.92));
    box-shadow: 0 0 10px rgba(46, 229, 157, 0.26);
}

.assignment-reward-progress-fill.progress-hero {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.96), rgba(59, 130, 246, 0.92));
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.20);
}

.assignment-reward-progress-fill.progress-land {
    background: linear-gradient(90deg, rgba(255, 211, 122, 0.98), rgba(196, 138, 29, 0.92));
    box-shadow: 0 0 10px rgba(255, 211, 122, 0.22);
}

/* Daily quest progress (distinct color, same bar style) */
.assignment-reward-progress-fill.progress-daily {
    background: linear-gradient(90deg, rgba(244, 63, 94, 0.96), rgba(168, 85, 247, 0.90));
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.22);
}

/* NEW LEVEL badge (revealed when bar hits 100%) */
.assignment-reward-newlevel-badge {
    position: absolute;
    right: 8px;
    top: -14px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 900;
    opacity: 0;
    transform: translateY(2px) scale(0.96);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.98);
    background: linear-gradient(90deg, rgba(46, 229, 157, 0.92), rgba(0, 194, 255, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 0 10px rgba(46, 229, 157, 0.25),
        0 0 22px rgba(0, 194, 255, 0.18);
    transition: opacity 220ms ease, transform 220ms ease;
}

.assignment-reward-progress.show-new-level .assignment-reward-newlevel-badge {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: haNewLevelBadgePulse 1.15s ease-in-out infinite;
}

.assignment-reward-progress.show-new-level .assignment-reward-progress-fill {
    box-shadow: 0 0 14px rgba(46, 229, 157, 0.35);
}

@keyframes haNewLevelBadgePulse {
    0%, 100% {
        filter: brightness(1);
        transform: translateY(0) scale(1);
        box-shadow:
            0 0 10px rgba(46, 229, 157, 0.25),
            0 0 22px rgba(0, 194, 255, 0.18);
    }
    50% {
        filter: brightness(1.15);
        transform: translateY(-1px) scale(1.04);
        box-shadow:
            0 0 14px rgba(46, 229, 157, 0.42),
            0 0 30px rgba(0, 194, 255, 0.30);
    }
}

.assignment-reward-entry img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* Penalties (FAIL) - similar to rewards preview */
.assignment-pending-penalties {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.assignment-pending-penalties-title {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 8px;
}

.assignment-pending-penalties-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assignment-penalty-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.assignment-penalty-entry img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 auto;
}

.assignment-penalty-entry .penalty-label {
    flex: 1 1 auto;
    opacity: 0.92;
}

.assignment-penalty-entry .penalty-amount {
    flex: 0 0 auto;
    font-weight: 700;
    opacity: 0.95;
}


.assignment-reward-entry .reward-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-reward-entry .reward-amount {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}

/* Log-Zeilen im Assignment-Result – hübsches Layout */
.assignment-result-log-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

/* Hero-Portrait im Log (klein & einheitlich) */
.hero-result-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* Fallback, falls kein Bild gefunden wird */
.hero-result-icon.hero-result-icon-default {
    background: #111827;
    border-radius: 999px;
}

/* Attribute- und Terrain-Icons im Log leicht verkleinern */
.assignment-result-log-line .attr-icon,
.assignment-result-log-line .terrain-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

/* Falls .terrain-icon global noch keine Größe hat: */
.terrain-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

/* Textteil (Name + kurzer Hinweis) */
.assignment-result-text {
    font-size: 11px;
    color: #9ca3af;
    /* nimmt den verfügbaren Platz zwischen Icons und Wert ein */
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wert (z.B. +4) immer rechts, klar sichtbar */
.assignment-result-value {
    font-weight: 700;
    font-size: 11px;
    margin-left: 4px;
    color: #e5e7eb;
}

/* Negative Werte: rot einfärben */
.assignment-result-log-line.negative .assignment-result-value {
    color: #fca5a5;
}

.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);
	display: none !important;
}

.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 {
	display: none;
    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 calc(0.75rem + env(safe-area-inset-bottom));
  /* border-top: 1px solid #1f2937; */
  /* background: #020617; */
  /* Always keep the bottom close button visible */
  position: sticky;
  bottom: 0;
  z-index: 2;
}

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

/* Assignment reroll button (shown only after FAIL) */
.popup-footer .popup-reroll-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* Generic "action" button shown above the bottom close button in some popups (e.g. Guild Chest -> Crafting) */
.popup-footer .popup-craft-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* =========================================================
   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;
}


/* =========================================================
   GUILD BUTTON + GUILD POPUP (PopupManager)
   ========================================================= */

/* Guild button shares the same tile style as the other top buttons (see #openGuildBtn rules above). */

/* Fullscreen overlay */
/*
#guildPopupOverlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 11, 1.0);
  z-index: 8995;
  align-items: center;
  justify-content: center;
  display: none;
}

/* Other PopupManager overlays that don't use .popup-overlay * /
#rankingPopupOverlay,
#settingsPopupOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.90);
  z-index: 8995;
  align-items: center;
  justify-content: center;
  display: none;
}
*/

/* Popup window */
/*
.guild-popup-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.8);
  width: 520px;
  max-width: 95vw;
  max-height: 80vh;
  background: #020617;
  border: 1px solid #4b5563;
  border-radius: 10px;
  z-index: 9000;
  display: none;
  overflow: hidden;
}

.guild-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #374151;
  background: #0b1220;
  color: #f9fafb;
  font-weight: 700;
}

.guild-popup-body {
  padding: 12px;
  overflow: auto;
}
*/

.guild-popup-field {
  margin-top: 12px;
}

.guild-popup-field label {
  display: block;
  font-size: 0.82rem;
  color: #cbd5e1;
  margin-bottom: 6px;
}

#guildPopupNameInput {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid #374151;
  background: #0b1220;
  color: #f9fafb;
}

.guild-popup-icons-title {
  font-size: 0.82rem;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.guild-popup-stats {
	margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.guild-stat {
  padding: 10px;
  border: 1px solid RGBA(55,55,55,1.0);
  border-radius: 10px;
  background: RGBA(33,33,33,1.0);
}

.guild-stat .k {
  font-size: 0.75rem;
  color: #94a3b8;
}

.guild-stat .v {
  margin-top: 2px;
  font-size: 1rem;
  color: #f9fafb;
  font-weight: 700;
}

.guild-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.guild-icon-choice {
  border: 1px solid #374151;
  background: #0b1220;
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.guild-icon-choice img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
}

.guild-icon-choice.locked {
  opacity: 0.35;
  cursor: default;
}

.guild-icon-choice.selected {
  border-color: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25);
}

/* Current logo row + picker */
.guild-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guild-current-icon {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #0b1220;
}

.guild-dice-style-btn {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #0b1220;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guild-dice-style-btn:hover {
  filter: brightness(1.08);
}

.guild-dice-style-board {
  position: absolute;
  inset: 0;
  background: #395204;
  border: 10px solid #7b4205;
  box-sizing: border-box;
}

.guild-dice-style-die {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-12deg);
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
}

.diceboard-styles-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 900px) {
  .diceboard-styles-wrap {
    grid-template-columns: 1fr 1fr;
  }
}

.diceboard-section {
  border: 1px solid #1f2937;
  border-radius: 12px;
  background: #0b1220;
  padding: 12px;
}

.diceboard-section-title {
  font-weight: 800;
  margin-bottom: 10px;
  opacity: 0.95;
}

.diceboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.diceboard-card {
  border: 1px solid #253047;
  border-radius: 12px;
  background: #0e172a;
  padding: 10px;
  position: relative;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

.diceboard-card:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: #3b82f6;
}

.diceboard-card.selected {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.22);
}

.diceboard-card.selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(34,197,94,0.20);
  border: 1px solid rgba(34,197,94,0.55);
  color: rgba(220,255,230,0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.diceboard-card-title {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diceboard-preview {
  height: 72px;
  border-radius: 10px;
  border: 1px solid #273244;
  overflow: hidden;
  position: relative;
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Board swatch (shows wall + floor colors clearly) */
.diceboard-board-swatch {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  border: 8px solid transparent;
  box-sizing: border-box;
}

/* SVG d20 preview */
.diceboard-d20 {
  width: 64px;
  height: 64px;
  display: block;
}

.guild-dice-d20 {
  width: 100%;
  height: 100%;
  display: block;
}

.diceboard-preview .board {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
}

.diceboard-preview .die {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.45);
  border: 2px solid rgba(255,255,255,0.18);
}

.guild-icon-picker {
  margin-top: 10px;
}

.guild-icon-picker.hidden {
  display: none;
}

/* Settings popup */
.settings-section {
  padding: 10px;
  border: 1px solid #1f2937;
  border-radius: 10px;
  background: #0b1220;
  margin-bottom: 10px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.settings-row:last-child { margin-bottom: 0; }

.settings-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f9fafb;
  min-width: 110px;
}

.settings-label-small {
  font-size: 0.78rem;
  font-weight: 600;
  color: #cbd5e1;
}

.settings-row-slider {
  align-items: center;
}

.settings-slider {
  flex: 1 1 auto;
}

.settings-value {
  width: 46px;
  text-align: right;
  font-size: 0.8rem;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}

/* Ranking popup */
#rankingPopup {
  /* When opened, JS switches this panel to display:flex.
     These rules ensure the list area can scroll on smaller screens. */
  flex-direction: column;
}

#rankingPopup .guild-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.ranking-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.ranking-tab {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #0b1220;
  color: #e5e7eb;
  font-weight: 700;
  cursor: pointer;
}

.ranking-tab.active {
  border-color: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25);
}

.ranking-timer {
  padding: 10px;
  border: 1px solid #1f2937;
  border-radius: 10px;
  background: #0b1220;
  color: #cbd5e1;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 38px 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #1f2937;
  border-radius: 12px;
  background: #0b1220;
}

.ranking-row.me {
  border-color: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.15);
}

.ranking-rank {
  font-weight: 800;
  color: #f9fafb;
  text-align: center;
}

.ranking-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #020617;
  object-fit: cover;
}

.ranking-name {
  font-weight: 700;
  color: #f9fafb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-xp {
  font-weight: 800;
  color: #e5e7eb;
}

.ranking-divider {
  height: 1px;
  background: #1f2937;
  margin: 6px 0;
}

@media (max-width: 520px) {
  .guild-icon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.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: 1;
}

.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);
    }
}

/* --------------------------------------------------------------------
   DAILY QUESTS POPUP
-------------------------------------------------------------------- */
/*
.daily-quests-overlay {
  align-items: center;
  justify-content: center;
  z-index: 10020;
}
* /

.daily-quests-window {
  width: min(520px, 92vw);
  max-height: min(80vh, 700px);
  overflow: hidden;
}
*/
.daily-quests-subtitle {
  margin: 0 0 12px 0;
  opacity: 0.9;
  font-size: 0.95rem;
}

.daily-quests-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.daily-quest-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.daily-quest-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  /* background: rgba(0,0,0,0.25); */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.daily-quest-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.daily-quest-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.daily-quest-titleline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.daily-quest-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.daily-quest-progress-text {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
  white-space: nowrap;
}

.daily-quest-desc {
  opacity: 0.85;
  font-size: 0.92rem;
  line-height: 1.25;
}

.daily-quest-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}

.daily-quest-bar-inner {
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.75);
  border-radius: 999px;
  transition: width 250ms ease;
}

.daily-quest-row.completed {
  border-color: rgba(120,255,160,0.35);
  background: rgba(80,255,140,0.10);
}

.daily-quest-row.completed .daily-quest-bar-inner {
  width: 100% !important;
  background: rgba(120,255,160,0.85);
}

#dailyRewardsPopup {
  max-height: 88vh;
  height: auto;
  overflow: hidden; /* wichtig: scroll im inneren container */
}

#dailyRewardsPopup .popup-content,
#dailyRewardsPopup .daily-rewards-content {
  max-height: calc(88vh - 120px); /* header+footer space */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}

#dailyRewardsPopup .popup-footer,
#dailyRewardsPopup .daily-rewards-footer {
  position: sticky;
  bottom: 0;
  background: rgba(0,0,0,0.85); /* oder deine popup bg */
  padding: 12px;
}

.daily-reward-day {
  display: flex;
  align-items: center;
  gap: 12px;
}

.daily-reward-day__icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
}

.daily-reward-day__text {
  display: flex;
  flex-direction: column;
}

.daily-reward-day__label {
  font-weight: bold;
}

.daily-reward-day--claimed {
  opacity: 0.4;
  filter: grayscale(1);
}




/* Flash fallback avatar for stripped asset builds */
.flash-fallback-avatar {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75em;
  color: #facc15;
}

/* ===========================
   WORLD MAP POPUP
   =========================== */
/*
.worldmap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 11550;
}

.worldmap-popup {
  width: min(980px, 96vw);
  height: min(640px, 92vh);
  background: #020617;
  border: 1px solid #4b5563;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
*/
/*
.worldmap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid #1f2937;
}

.worldmap-title {
  font-size: var(--font-md);
  font-weight: 600;
}

.worldmap-title-nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.worldmap-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}

#worldMapPrevRealm { justify-self: start; }
#worldMapNextRealm { justify-self: end; }

.worldmap-nav-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #374151;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  font-weight: 700;
}

.worldmap-nav-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.worldmap-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.worldmap-realm-stats {
  font-size: 0.78rem;
  opacity: 0.85;
}

.worldmap-close {
  background: transparent;
  border: 1px solid #374151;
  color: #e5e7eb;
  border-radius: 8px;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
}

.worldmap-close:hover {
  background: #111827;
  border-color: #4b5563;
}
*/

.worldmap-title-nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.worldmap-body {
  flex: 1;
  display: grid;
  grid-template-rows: auto 90px;
  gap: 0;
  min-height: 0;
}

.worldmap-viewport {
  position: relative;
  overflow: hidden;
  background: RGBA(11,11,11,0.5);
  border-radius: 10px;
  touch-action: none; /* enables custom pan/zoom */
}

.worldmap-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.worldmap-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* keep panning usable */
}

.worldmap-markers {
  position: absolute;
  inset: 0;
}

.worldmap-marker {
  position: absolute;
  transform: translate(-50%, -50%) scale(1.8);
  border: 0;
  background: rgba(255,255,255,0);
  /*
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(229, 231, 235, 0.55);
  background: rgba(2, 6, 23, 0.65);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  padding: 0;
  */
}

.worldmap-marker.selected img{
  animation: markerGlow 1.2s ease-in-out infinite;
}

@keyframes markerGlow {
  0%, 100% {
    filter:
      brightness(1.1)
      saturate(1.25)
      drop-shadow(0 0 6px rgba(255, 210, 120, 0.45))
      drop-shadow(0 0 14px rgba(255, 140, 60, 0.35));
    transform: scale(1);
  }
  50% {
    filter:
      brightness(1.35)
      saturate(1.5)
      drop-shadow(0 0 10px rgba(255, 230, 160, 0.70))
      drop-shadow(0 0 24px rgba(255, 120, 40, 0.55));
    transform: scale(1.04);
  }
}

.worldmap-marker img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.worldmap-marker:hover {
  /*
  border-color: rgba(253, 230, 138, 0.9);
  box-shadow: 0 0 0 2px rgba(253, 230, 138, 0.18), 0 10px 25px rgba(0, 0, 0, 0.55);
  */
}

.worldmap-marker.current {
  /*
  border-color: rgba(34, 197, 94, 0.9);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22), 0 10px 25px rgba(0, 0, 0, 0.55);
  */
}

.worldmap-marker.locked img {
  filter: grayscale(1) brightness(0.85);
  opacity: 0.75;
}

.worldmap-marker.selected {
  /*
  border-color: rgba(99, 102, 241, 0.95);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.22), 0 10px 25px rgba(0, 0, 0, 0.55);
  */
}

.worldmap-marker-lock {
  position: absolute;
  right: -8px;
  top: -10px;
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid #374151;
  border-radius: 10px;
  padding: 0.1rem 0.25rem 0.3rem;
  font-size: 20px;
}

.worldmap-marker-stars {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%) scale(2.5);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid rgba(55, 65, 81, 0.8);
  color: #fbbf24;
  pointer-events: none;
  white-space: nowrap;
}

/* Step 9: Completed badge on marker */
.worldmap-marker-badge {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%) scale(2.5);
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(55, 65, 81, 0.85);
  color: #fbbf24;
  pointer-events: none;
  white-space: nowrap;
}

.worldmap-marker.completed img {
  filter:
    brightness(1.05)
    saturate(1.25)
    drop-shadow(0 0 8px rgba(34, 197, 94, 0.35));
}

/* Step 8 additions */
.worldmap-realmstats {
  flex: 1;
  text-align: center;
  font-size: 12px;
  opacity: 0.9;
  pointer-events: none;
}

.land-progress-hud {
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(55, 65, 81, 0.55);
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.15;
  min-width: 110px;
}

.land-progress-hud .land-progress-title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 2px;
}

.land-progress-hud .land-progress-meta {
  opacity: 0.95;
  font-size: 11px;
}
/*
.worldmap-info {
  border-left: 1px solid #1f2937;
  background: #020617;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
}
*/
.worldmap-info-title {
  margin: 15px 0 6px;
  font-size: 26px;
  font-weight: 650;
  text-align: center;
}

.worldmap-info-row {
  display: none;
  /*
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.6rem;
  align-items: center;
  */
}

.worldmap-info-img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #374151;
  background: #0b1220;
}

.worldmap-info-meta {
  font-size: var(--font-sm);
  color: #e5e7eb;
  opacity: 0.9;
  line-height: 1.35;
}

.worldmap-travel-btn {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #111827;
  color: #e5e7eb;
  font-size: var(--font-sm);
  font-weight: 650;
  cursor: pointer;
}

.worldmap-travel-btn:hover {
  border-color: #4b5563;
}

.worldmap-travel-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.worldmap-dev {
  font-size: var(--font-xs);
  color: #94a3b8;
  opacity: 0.95;
  border-top: 1px dashed rgba(148, 163, 184, 0.35);
  padding-top: 0.5rem;
}

/*
@media (max-width: 760px) {
  .worldmap-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .worldmap-info {
    border-left: none;
    border-top: 1px solid #1f2937;
  }
}
*/

/* -----------------------------
   Assignment Stage Progress UI
   ----------------------------- */

.assignment-stage-progress {
  margin: 8px 0 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(55, 65, 81, 0.55);
}

.assignment-stage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.assignment-stage-label {
  font-size: 14px;
  font-weight: 750;
  color: #e5e7eb;
}

.assignment-stage-points {
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
}

.assignment-stage-bar-outer {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.assignment-stage-bar-inner {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #fbbf24;
  transition: width 250ms ease;
}

/* --- Land Points Bar (replaces guild bar on main screen) --- */
#landPointsBar.land-points-bar {
  width: min(680px, calc(100% - 24px));
  margin: 10px auto 8px auto;
  padding: 10px 14px 10px 14px;
  border: 2px solid #a47a2c;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
}

#landPointsBarTitle.land-points-title {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: 18px;
  text-transform: none;
  margin-bottom: 8px;
}

.land-points-progress-outer {
  width: 100%;
  height: 18px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.55);
  overflow: hidden;
}

.land-points-progress-inner {
  height: 100%;
  width: 0%;
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(90,175,255,0.95), rgba(60,230,170,0.95));
  transition: width 220ms ease;
}

.land-points-stars {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
  font-size: 20px;
  line-height: 1;
}

.land-points-stars .land-star {
  text-shadow: 0 2px 0 rgba(0,0,0,0.45);
}

.land-points-stars .land-star.filled {
  color: #ffd27a;
}

.land-points-stars .land-star.empty {
  color: rgba(255,255,255,0.25);
}

/* Hide the compact stage/points texts in the header (requested) */
#landProgressMeta,
#landProgressStage,
#landProgressPoints {
  display: none !important;
}

/* Guild bar moved into Guild popup */
#guildPopup #guildBar {
  width: 100%;
  margin: 0 0 12px 0;
}
#guildPopup #guildLevelLine {
  justify-content: space-between;
}

.worldmap-realm-starline{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:4px;font-size:14px;color:#e5e7eb;}
.worldmap-realm-starline .star{font-size:18px;color:#fbbf24;}
.worldmap-realm-starline .needed{opacity:0.95;}

.worldmap-stage{position:relative;}
.worldmap-stage.locked img{filter: grayscale(1) brightness(0.65);}
.worldmap-lock-overlay{position:absolute;inset:0;display:none;justify-content:center;align-items:center;pointer-events:none;}
.worldmap-stage.locked .worldmap-lock-overlay{display:flex;}
.worldmap-lock-icon{width:140px;height:140px;border-radius:999px;background:rgba(0,0,0,0.50);border:1px solid rgba(255,255,255,0.18);display:flex;justify-content:center;align-items:center;font-size:72px;}

/* Locked realm: make map softer and less punchy (but keep UI sharp) */
.worldmap-stage.locked .worldmap-image{
  filter: grayscale(1) saturate(0.55) brightness(0.75) blur(2.0px);
}

/* Coming soon realm: stronger blur/BW + big question mark overlay */
.worldmap-stage.coming-soon .worldmap-image{
  filter: grayscale(1) saturate(0) brightness(0.45) blur(7.0px);
}
.worldmap-stage.coming-soon .worldmap-lock-overlay{display:flex;}
.worldmap-stage.coming-soon .worldmap-lock-icon{font-size:92px;}