/* ============================================
   VERDANTORIA – Stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Nunito:wght@400;600;700&display=swap');

/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1a1a2e;
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
  height: 100vh;
  user-select: none;
}


/* ============================================
   STARTSEITE / LOGIN SCREEN
   ============================================ */

.login-screen {
  position: fixed;
  inset: 0;

  z-index: 500;

  display: block;

  overflow: visible !important;

  background: #000 !important;

  color: white;
}

.login-bg-pattern {
  display: none !important;
}

.landing-top-nav {
  position: sticky;
  top: 0;

  z-index: 20;

  height: 58px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 0 34px;

  background: rgba(5, 5, 24, 0.94);

  border-bottom: 1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.28);
}

.landing-brand {
  justify-self: center;

  font-size: 24px;
  font-weight: 800;

  color: rgba(255,255,255,0.92);

  letter-spacing: 0.5px;
}

.landing-play-btn {
  height: 58px;

  padding: 0 34px;

  border: none;

  background:
    linear-gradient(
      180deg,
      #ff4141,
      #d82732
    );

  color: white;

  font-size: 15px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 18px rgba(255,60,60,0.20);

  transition: all 0.18s ease;
}

.landing-play-btn:hover {
  background:
    linear-gradient(
      180deg,
      #ff5a5a,
      #e02f3a
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 0 24px rgba(255,60,60,0.32);
}

.landing-auth-nav {
  justify-self: end;

  display: flex;
  align-items: center;
  gap: 18px;
}

.landing-auth-link,
.landing-user-label {
  border: none;
  background: transparent;

  color: rgba(255,255,255,0.88);

  font-size: 14px;
  font-weight: 800;

  cursor: pointer;

  transition: all 0.18s ease;
}

.landing-auth-link:hover,
.landing-user-label:hover {
  color: #f0d060;
}

.landing-user-label {
  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,175,55,0.18);
}

.landing-content {
  position: relative;
  z-index: 2;

  width: min(940px, calc(100vw - 48px));

  margin: 78px auto 60px;
}

.landing-hero-card {
  position: relative;

  height: 460px;

  overflow: hidden;

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

  border: 4px solid rgba(255,255,255,0.92);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.005)
    );

  box-shadow:
    0 18px 40px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.landing-hero-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}

.landing-news-section {
  margin-top: 28px;
}

.landing-section-title {
  display: flex;
  align-items: center;

  margin-bottom: 26px;
  padding-left: 14px;

  min-height: 28px;

  border-left: 3px solid #ff333d;

  color: rgba(255,255,255,0.95);

  font-size: 14px;
  font-weight: 900;

  letter-spacing: 0.4px;
}

.landing-news-card {
  min-height: 126px;

  padding: 22px;

  border: 4px solid rgba(255,255,255,0.92);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.025),
      rgba(255,255,255,0.006)
    );

  color: rgba(255,255,255,0.9);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.22);
}

.landing-news-item {
  padding: 16px 18px;

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.015)
    );

  border: 1px solid rgba(212,175,55,0.14);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 16px rgba(0,0,0,0.22);
}

.landing-news-item + .landing-news-item {
  margin-top: 14px;
}

.landing-news-date {
  margin-bottom: 6px;

  font-size: 11px;
  font-weight: 900;

  color: rgba(240,208,96,0.62);

  letter-spacing: 1px;
  text-transform: uppercase;
}

.landing-news-title {
  margin-bottom: 8px;

  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 0.4px;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.7);
}

.landing-news-text {
  color: rgba(255,255,255,0.68);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}


.landing-info-link {
  padding: 9px 14px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);

  background: rgba(255,255,255,0.04);

  color: rgba(255,255,255,0.62);

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  transition: all 0.18s ease;
}

.landing-info-link:hover {
  color: #f0d060;

  border-color: rgba(212,175,55,0.30);

  background: rgba(212,175,55,0.08);
}

.landing-auth-panel {
  position: fixed;

  top: 76px;
  right: 34px;

  z-index: 40;

  width: 390px;

  display: none;

  animation: landingAuthIn 0.18s ease;
}

.login-box {
  position: relative;

  width: 100%;

  padding: 28px;

  background:
    linear-gradient(
      180deg,
      rgba(15,13,30,0.98),
      rgba(8,8,18,0.99)
    );

  border: 2px solid rgba(212,175,55,0.28);
  border-radius: 24px;

  backdrop-filter: blur(14px);

  box-shadow:
    0 24px 60px rgba(0,0,0,0.56),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.landing-auth-close {
  position: absolute;

  top: 12px;
  right: 12px;

  width: 30px;
  height: 30px;

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

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.04);

  color: rgba(255,255,255,0.62);

  cursor: pointer;
}

.landing-auth-close:hover {
  color: white;
  border-color: rgba(212,175,55,0.30);
}

.login-logo {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 900;

  text-align: center;
  letter-spacing: 3px;

  color: #f7d95a;

  background:
    linear-gradient(
      180deg,
      #fff4a8 0%,
      #f0d060 35%,
      #b88618 70%,
      #6f4708 100%
    );

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 1px 0 #7a4a08,
    0 2px 0 #5c3505,
    0 3px 0 #3b2203,
    0 4px 0 #241400,
    0 5px 8px rgba(0,0,0,0.75),
    0 0 18px rgba(240,208,96,0.25);

  margin-bottom: 8px;
}

.login-subtitle {
  text-align: center;

  font-size: 11px;
  font-weight: 800;

  color: rgba(255,255,255,0.45);

  letter-spacing: 2px;

  margin-bottom: 24px;
}

.login-foodtitle {
  text-align: center;

  margin-top: 20px;

  font-size: 10px;
  letter-spacing: 3px;

  color: rgba(240,208,96,0.45);
}

.login-tabs {
  display: flex;

  margin-bottom: 20px;
  padding: 5px;

  background: rgba(255,255,255,0.035);

  border: 1px solid rgba(212,175,55,0.12);
  border-radius: 16px;
}

.login-tab {
  flex: 1;

  padding: 12px;

  border: none;
  border-radius: 12px;

  background: transparent;

  color: rgba(255,255,255,0.45);

  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  transition: all 0.18s ease;
}

.login-tab.active {
  color: #1a1a2e;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 4px 10px rgba(0,0,0,0.3);
}

.login-input {
  width: 100%;

  padding: 15px 16px;
  margin-bottom: 14px;

  border: 1px solid rgba(212,175,55,0.14);
  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.015)
    );

  color: #f5f1dc;

  font-size: 14px;
  font-weight: 600;

  outline: none;

  transition: all 0.18s ease;
}

.login-input:focus {
  border-color: rgba(240,208,96,0.5);

  box-shadow:
    0 0 0 3px rgba(240,208,96,0.08);
}

.login-input::placeholder {
  color: rgba(255,255,255,0.25);
}

.login-btn {
  width: 100%;

  margin-top: 10px;
  padding: 15px;

  border: none;
  border-radius: 16px;

  cursor: pointer;

  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 900;

  color: #1a1a2e;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 8px 18px rgba(0,0,0,0.35);

  transition: all 0.18s ease;
}

.login-btn:hover {
  transform: translateY(-1px) scale(1.01);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 10px 24px rgba(0,0,0,0.42),
    0 0 18px rgba(212,175,55,0.16);
}

.login-error {
  font-size: 12px;

  color: #ff6b6b;

  margin-top: 10px;

  min-height: 18px;

  text-align: center;
}

@keyframes landingAuthIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

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


/* ============================================
   TOP BAR
   ============================================ */

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  pointer-events: none;
}

.top-bar > * {
  pointer-events: auto;
}

/* ===== SPIELER (links) ===== */

.player-section {
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 10px 18px 10px 10px;

  min-width: 330px;

  background:
    linear-gradient(
      180deg,
      rgba(15,13,30,0.88),
      rgba(8,8,18,0.92)
    );

  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 18px;

  box-shadow:
    0 12px 28px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);

  backdrop-filter: blur(6px);
}

.player-portrait-img {
  width: 62px;
  height: 62px;

  border-radius: 50%;

  background:
    radial-gradient(circle at 35% 30%, #2d3d86, #11182f 70%);

  border: 3px solid #3b66ff;

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

  font-size: 28px;

  box-shadow:
    0 0 18px rgba(59,102,255,0.35),
    inset 0 0 16px rgba(0,0,0,0.45);
}

.player-portrait {
  position: relative;
  flex-shrink: 0;
}

.player-portrait-level {
  position: absolute;

  bottom: -10px;
  left: 50%;

  transform: translateX(-50%);

  width: 30px;
  height: 30px;

  border-radius: 50%;

  background:
    linear-gradient(
      180deg,
      #5ea0ff,
      #2455bc
    );

  border: 2px solid #dfeaff;

  color: white;

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

  font-family: 'Nunito', serif;
  font-size: 13px;
  font-weight: 900;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.5);

  z-index: 3;
}

.player-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.player-name {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 900;

  letter-spacing: 1px;

  color: #f0d060;

  background:
    linear-gradient(
      180deg,
      #fff8d8 0%,
      #f7d98a 18%,
      #d7a24d 42%,
      #8f5a1d 68%,
      #5b340d 100%
    );

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.player-xp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-xp-bar {
  position: relative;

  width: 170px;
  height: 12px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(0,0,0,0.45);

  border: 1px solid rgba(212,175,55,0.28);

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.65);
}

.player-xp-fill {
  height: 100%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #b88a18,
      #f0d060,
      #fff1a8
    );

  box-shadow:
    0 0 10px rgba(240,208,96,0.28);

  transition: width 0.4s;
}

.player-xp-text {
  font-size: 11px;
  font-weight: 800;

  color: rgba(255,255,255,0.78);
}

/* ===== RESSOURCEN (rechts) ===== */

.resource-bar {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 6px 10px;
}

.res {
  position: relative;

  min-width: 128px;
  height: 38px;

  display: flex;
  align-items: center;

  padding: 0 18px 0 48px;

  background: rgba(36, 52, 68, 0.62);

  border: 1px solid rgba(170, 220, 255, 0.12);

  border-radius: 999px;

  backdrop-filter: blur(6px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 10px rgba(0,0,0,0.22);
}

.res-icon {
  position: absolute;
  left: -20px;

  width: 52px;
  height: 52px;

  object-fit: contain;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;

  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));

  z-index: 3;
}

.res-val {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 900;

  color: #d8f2ff;

  letter-spacing: 0.2px;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.75);
}

.res.at-cap .res-val {
  color: #ff4444;
  text-shadow: 0 0 8px rgba(255, 50, 50, 0.4);
}

.res:hover {
  background: rgba(48, 68, 88, 0.72);
}

.res-premium:hover {
  background: rgba(92, 40, 128, 0.72);
}

.res-premium {
  background: rgba(78, 32, 110, 0.62);

  border: 1px solid rgba(220, 120, 255, 0.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 10px rgba(0,0,0,0.24);
}

#ri-diamonds .res-icon {
  background: transparent !important;
}

/* ============================================
   CANVAS & GAME
   ============================================ */

canvas {
  display: block;
  cursor: pointer;
}

#icon-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}


/* ============================================
   COLLECT ICONS
   ============================================ */

.collect-icon {
  position: fixed;

  z-index: 50;

  width: 90px;
  height: 78px;

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

  cursor: pointer;
  pointer-events: auto;

  transform-origin: center bottom;

  animation:
    iconPop 0.25s ease,
    collectFloat 2.2s ease-in-out infinite;
}

.collect-icon-ring {
  position: absolute;
  top: 3px;
  left: 50%;

  transform: translateX(-50%);

  width: 72px;
  height: 72px;
  border-radius: 50%;

  border: 2px solid rgba(255, 215, 100, 0.45);

  background:
    radial-gradient(
      circle,
      rgba(255, 220, 120, 0.18),
      rgba(255, 220, 120, 0.02) 68%,
      transparent 72%
    );

  box-shadow:
    0 0 16px rgba(255, 210, 90, 0.28);

  animation: collectRingPulse 1.5s ease-in-out infinite;

  pointer-events: none;
}

.collect-icon-bubble {
  position: relative;
  z-index: 2;

  width: 58px;
  height: 58px;

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

  border-radius: 50%;

  background:
    linear-gradient(
      180deg,
      rgba(63, 49, 23, 0.96),
      rgba(28, 22, 10, 0.96)
    );

  border: 3px solid rgba(212, 175, 55, 0.88);

  box-shadow:
    0 0 14px rgba(212, 175, 55, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.45);

  pointer-events: none;
}

.collect-icon .collect-resource-icon {
  width: 30px;
  height: 30px;

  object-fit: contain;

  filter:
    drop-shadow(0 2px 5px rgba(0,0,0,0.5));

  pointer-events: none;
}

.collect-icon:hover {
  animation-play-state: paused;

  transform: scale(1.08);
}

.collect-icon:active {
  transform: scale(0.96);
}

.collect-icon.full .collect-icon-bubble {
  border-color: #ffd740;

  box-shadow:
    0 0 20px rgba(255, 215, 64, 0.46),
    0 6px 14px rgba(0, 0, 0, 0.45);

  animation: iconBounce 1.2s ease-in-out infinite;
}

.collect-icon.full .collect-icon-ring {
  animation: collectRingPulseStrong 1s ease-in-out infinite;
}

.collect-icon.full .collect-icon-label {
  background: rgba(62, 46, 10, 0.96);
  border-color: rgba(255, 215, 64, 0.5);

  color: #fff1a6;

  animation: collectLabelPulse 1s ease-in-out infinite;
}

@keyframes iconPop {
  from {
    opacity: 0;
    transform: scale(0.75);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes iconBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.08);
  }
}

@keyframes collectFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes collectRingPulse {
  0% {
    transform: translateX(-50%) scale(0.92);
    opacity: 0.65;
  }

  50% {
    transform: translateX(-50%) scale(1.06);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) scale(0.92);
    opacity: 0.65;
  }
}

@keyframes collectRingPulseStrong {
  0% {
    transform: translateX(-50%) scale(0.9);
    opacity: 0.75;
  }

  50% {
    transform: translateX(-50%) scale(1.14);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) scale(0.9);
    opacity: 0.75;
  }
}

/* ============================================
   WINDOW / MODAL BASIS
   ============================================ */

.quest-log,
.build-queue,
.inventory-window,
.level-gift-window,
.item-use-window,
.shop-window,
.settings-window,
.shop-confirm-window {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: none;
  padding: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(15, 13, 30, 0.97),
      rgba(8, 8, 18, 0.97)
    );

  border-radius: 22px;

  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);

  backdrop-filter: blur(6px);
}

/* ============================================
   WINDOW / MODAL HEADER
   ============================================ */

.quest-log-header,
.build-queue-header,
.inventory-header,
.level-gift-header,
.shop-header,
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 14px;
  margin-bottom: 18px;
}

@keyframes modalPopup {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ============================================
   BUILDING PANEL
   ============================================  */

.building-panel {
  position: fixed;

  top: 50%;
  bottom: auto;
  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 140;

  min-width: 420px;
  max-width: 540px;

  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;

  display: none;
  padding: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(15, 13, 30, 0.97),
      rgba(8, 8, 18, 0.97)
    );

  border: 2px solid rgba(212, 175, 55, 0.34);
  border-radius: 22px;

  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);

  backdrop-filter: blur(6px);

  animation: buildingPanelUp 0.22s ease;
}

.building-panel::-webkit-scrollbar {
  width: 8px;
}

.building-panel::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}

.building-panel::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.35);
  border-radius: 999px;
}

.building-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,0.55);
}

.bp-header {
  display: flex;
  align-items: center;
  gap: 14px;

  padding-bottom: 14px;
  margin-bottom: 16px;

  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.bp-title-block { flex: 1; }

.bp-name {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 900;

  color: #f0d060;
  letter-spacing: 1px;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.8);
}

.bp-level {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.bp-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
  line-height: 1.5;
}

.bp-requirements {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
  padding: 6px 10px;
  background: rgba(255, 60, 60, 0.06);
  border: 1px solid rgba(255, 60, 60, 0.15);
  border-radius: 6px;
  display: none;
}

.bp-production {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.bp-production span {
  color: #7ddf64;
  font-weight: 700;
}

.bp-next {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bp-next span {
  color: #90caf9;
  font-weight: 600;
}

.bp-cost {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;

  margin-bottom: 16px;
}

.bp-cost-item {
  display: flex;
  align-items: center;
  gap: 5px;

  padding: 6px 10px;

  border-radius: 999px;

  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(212,175,55,0.12);

  font-size: 12px;
  font-weight: 800;

  color: rgba(255,255,255,0.75);
}

.bp-cost-item.cant-afford {
  color: #ff6b6b;
}

.bp-btn {
  width: 100%;

  border: none;
  border-radius: 14px;

  padding: 13px;

  cursor: pointer;

  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 900;

  transition: all 0.18s ease;
}

.bp-btn.upgrade {
  color: #1a1a2e;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 5px 12px rgba(0,0,0,0.35);
}

.bp-btn.upgrade:hover {
  transform: translateY(-1px) scale(1.02);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 8px 18px rgba(0,0,0,0.42),
    0 0 14px rgba(212,175,55,0.18);
}

.bp-btn.unavailable {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}

.bp-btn.max-level {
  background: rgba(212, 175, 55, 0.1);
  color: rgba(212, 175, 55, 0.5);
  cursor: default;
  border: 1px solid rgba(212, 175, 55, 0.15);
}

@keyframes buildingPanelUp {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 24px)) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ============================================
   CLOSE BUTTONS
   ============================================ */

.bp-close,
.quest-log-close,
.build-queue-close,
.inventory-close,
.level-gift-close,
.shop-close,
.info-window-close {
  width: 28px;
  height: 28px;

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

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;

  color: rgba(255, 255, 255, 0.5);

  cursor: pointer;

  font-size: 14px;

  transition: all 0.2s;
}

.bp-close:hover,
.quest-log-close:hover,
.build-queue-close:hover,
.inventory-close:hover,
.level-gift-close:hover,
.shop-close:hover,
.info-window-close:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
}

.info-window-close {
  position: absolute;
  top: 12px;
  right: 16px;
}

/* ============================================
   FLOATING TEXT & EFFECTS
   ============================================ */

.float-text {
  position: fixed;
  z-index: 160;

  padding: 10px 18px;
  min-width: 150px;
  max-width: 340px;

  border-radius: 999px;
  border: 1px solid rgba(255, 170, 60, 0.46);

  background:
    linear-gradient(
      180deg,
      rgba(74, 42, 10, 0.96),
      rgba(28, 16, 6, 0.98)
    );

  color: var(--float-color, #ffb347);

  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.5px;

  text-align: center;
  white-space: nowrap;

  pointer-events: none;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 18px rgba(255,140,40,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);

  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 12px rgba(255,160,60,0.14);

  animation: floatUpEpic 1.65s cubic-bezier(0.22, 0.7, 0.18, 1) forwards;
}

.float-text.reward {
  border-color: rgba(255, 180, 70, 0.52);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 22px rgba(255,150,50,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.float-text.upgrade {
  border-color: rgba(255, 210, 100, 0.55);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 24px rgba(255,210,100,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.float-text.xp {
  border-color: rgba(120, 200, 255, 0.52);

  background:
    linear-gradient(
      180deg,
      rgba(18, 35, 60, 0.96),
      rgba(8, 18, 34, 0.98)
    );

  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 22px rgba(120,200,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.float-text.warning {
  border-color: rgba(255, 110, 90, 0.55);

  background:
    linear-gradient(
      180deg,
      rgba(76, 24, 14, 0.96),
      rgba(35, 10, 8, 0.98)
    );

  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 22px rgba(255,110,90,0.20),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.float-text.info {
  border-color: rgba(140, 210, 255, 0.50);

  background:
    linear-gradient(
      180deg,
      rgba(15, 34, 52, 0.96),
      rgba(8, 18, 30, 0.98)
    );

  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 22px rgba(140,210,255,0.20),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

@keyframes floatUpEpic {
  0% {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.72);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.08);
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -52px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -86px) scale(0.95);
  }
}

.level-up-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;

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

  pointer-events: none;

  animation: lvlFade 2.6s ease forwards;
}

.level-up-box {
  padding: 28px 42px;

  border-radius: 24px;

  background:
    linear-gradient(
      180deg,
      rgba(74, 42, 10, 0.94),
      rgba(24, 14, 6, 0.98)
    );

  border: 2px solid rgba(240, 208, 96, 0.42);

  box-shadow:
    0 22px 50px rgba(0,0,0,0.45),
    0 0 40px rgba(240,208,96,0.20),
    inset 0 1px 0 rgba(255,255,255,0.10);

  text-align: center;

  animation: lvlPop 2.6s ease forwards;
}

.level-up-kicker {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;

  color: #ffcb69;

  margin-bottom: 8px;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.8);
}

.level-up-text {
  font-family: 'Cinzel', serif;
  font-size: 58px;
  font-weight: 900;

  color: #f0d060;

  text-shadow:
    0 0 20px rgba(240, 208, 96, 0.45),
    0 0 50px rgba(240, 208, 96, 0.24),
    0 2px 8px rgba(0,0,0,0.75);
}

.level-up-subtext {
  margin-top: 8px;

  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;

  color: rgba(255,255,255,0.8);
}

@keyframes lvlFade {
  0% {
    background: rgba(240, 160, 60, 0.12);
  }

  25% {
    background: rgba(240, 160, 60, 0.06);
  }

  100% {
    background: transparent;
    opacity: 0;
  }
}

@keyframes lvlPop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  14% {
    transform: scale(1.10);
    opacity: 1;
  }

  30% {
    transform: scale(1);
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-36px) scale(0.97);
  }
}

/* ============================================
   INFO SIDEBAR (Login-Screen)
   ============================================ */

.info-sidebar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 501;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 18px 24px;
  cursor: pointer;
  transition: all 0.2s;
}

.info-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.6);
  transform: scale(1.05);
}

.info-btn-icon {
  font-size: 36px;
}

.info-btn-label {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: rgba(212, 175, 55, 0.6);
  letter-spacing: 1px;
}

/* ============================================
   INFO FENSTER
   ============================================ */

.info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 600;
  display: none;
}

.info-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 601;
  background: rgba(12, 12, 28, 0.96);
  border: 2px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  padding: 30px 36px;
  width: 500px;
  max-height: 70vh;
  overflow-y: auto;
  display: none;
  animation: modalPopup 0.22s ease;
}

.info-window-title {
  font-family: 'Cinzel', serif;
  color: #d4af37;
  font-size: 22px;
  margin-bottom: 16px;
}

.info-window-content {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.8;
}

/* ============================================
   MAIN MENU BUTTONS
   ============================================ */

.quest-btn,
.build-btn,
.inventory-btn,
.shop-btn,
.settings-btn,
.level-gift-btn,
.map-toggle-btn,
.army-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  background: transparent;
  border: none;
  padding: 0;

  cursor: pointer;

  transition: all 0.2s;
}

.quest-btn:hover,
.build-btn:hover,
.inventory-btn:hover,
.shop-btn:hover,
.settings-btn:hover,
.level-gift-btn:hover,
.map-toggle-btn:hover,
.army-btn:hover {
  transform: scale(1.08);
}

.quest-btn-icon-img,
.build-btn-icon-img,
.inventory-btn-icon-img,
.shop-btn-icon-img,
.settings-btn-icon-img,
.level-gift-btn-icon-img,
.map-toggle-icon-img,
.army-btn-icon-img {
  object-fit: contain;

  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.65));
}

.quest-btn-label,
.build-btn-label,
.inventory-btn-label,
.shop-btn-label,
.settings-btn-label,
.level-gift-label,
.map-toggle-label,
.army-btn-label {
  font-family: 'Cinzel', serif;

  font-size: 12px;
  font-weight: 700;

  color: #d4af37;

  letter-spacing: 1px;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.8);
}

.quest-btn-badge,
.level-gift-badge {
  position: absolute;

  top: -6px;
  right: -6px;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background:
    linear-gradient(
      180deg,
      #ff5f5f,
      #c81d25
    );

  color: white;

  font-size: 13px;
  font-weight: 900;

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

  box-shadow:
    0 0 8px rgba(255,80,80,0.35);

  animation: badgePulse 1.5s infinite;
}

/* ============================================
   QUEST SYSTEM
   ============================================ */

.quest-btn {
  position: relative;
  z-index: 100;
}

.quest-btn-icon-img {
  width: 72px;
  height: 72px;
}

.quest-btn-badge.green {
  background:
    linear-gradient(
      180deg,
      #47d84f,
      #1f8d2d
    );

  box-shadow:
    0 0 8px rgba(70,220,90,0.35);

  animation: greenBadgePulse 1.5s infinite;
}

@keyframes greenBadgePulse {

  0% {
    box-shadow:
      0 0 8px rgba(70,220,90,0.25);

    transform: scale(1);
  }

  50% {
    box-shadow:
      0 0 18px rgba(70,220,90,0.65);

    transform: scale(1.12);
  }

  100% {
    box-shadow:
      0 0 8px rgba(70,220,90,0.25);

    transform: scale(1);
  }
}

@keyframes badgePulse {

  0% {
    box-shadow:
      0 0 8px rgba(255,80,80,0.25);

    transform: scale(1);
  }

  50% {
    box-shadow:
      0 0 18px rgba(255,80,80,0.65);

    transform: scale(1.12);
  }

  100% {
    box-shadow:
      0 0 8px rgba(255,80,80,0.25);

    transform: scale(1);
  }
}

.quest-log {
  z-index: 140;

  width: 520px;
  max-height: 72vh;

  border: 2px solid rgba(212, 175, 55, 0.34);

  animation: modalPopup 0.22s ease;
}

.quest-log-header {
  margin-bottom: 16px;

  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.quest-item {
  position: relative;

  padding: 16px 16px 14px 18px;
  margin-bottom: 12px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));

  border: 1px solid rgba(212,175,55,0.16);
  border-radius: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);
}

.quest-item-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 900;

  color: #f4e2a0;
  letter-spacing: 0.3px;

  margin-bottom: 6px;
}

.quest-item-desc {
  font-size: 12px;
  line-height: 1.5;

  color: rgba(255,255,255,0.52);

  margin-bottom: 10px;
}

.quest-item-reward {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  font-size: 12px;
  font-weight: 700;

  color: rgba(212,175,55,0.72);
}

.quest-item-reward span {
  color: #f0d060;
  font-weight: 900;
}

.quest-claim-btn {
  margin-top: 8px;
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #2d6a1e, #3d8a2e);
  color: white;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  animation: claimGlow 1.5s ease infinite;
}

.quest-claim-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(60, 150, 30, 0.3);
}

@keyframes claimGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(60, 150, 30, 0.2); }
  50% { box-shadow: 0 0 15px rgba(60, 150, 30, 0.4); }
}

/* ============================================
   BAU-SYSTEM
   ============================================ */

.build-btn {
  position: relative;
}

.build-btn-icon-img {
  width: 74px;
  height: 74px;
}

.build-btn-badge {
  position: absolute;

  top: -2px;
  right: -10px;

  min-width: 34px;
  height: 22px;

  padding: 0 8px;

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

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(58,58,78,0.96),
      rgba(30,30,46,0.96)
    );

  border: 1px solid rgba(212, 175, 55, 0.35);

  color: #f5d87a;

  font-size: 11px;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;

  box-shadow:
    0 3px 8px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);

  text-shadow:
    0 1px 3px rgba(0,0,0,0.8);
}

.build-queue {
  z-index: 140;

  width: 540px;
  max-height: 72vh;

  border: 2px solid rgba(180, 130, 50, 0.34);

  animation: modalPopup 0.22s ease;
}

.build-queue-header {
  border-bottom: 1px solid rgba(180,130,50,0.18);
}

.build-slot {
  position: relative;

  padding: 16px 16px 14px 18px;
  margin-bottom: 12px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.015)
    );

  border: 1px solid rgba(180,130,50,0.16);

  border-radius: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);

  transition: all 0.18s ease;
}

.build-slot.active {
  border-color: rgba(180,130,50,0.34);

  background:
    linear-gradient(
      180deg,
      rgba(180,130,50,0.10),
      rgba(255,255,255,0.02)
    );
}

.build-slot-head {
  margin-bottom: 10px;
}

.build-slot-title {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 0.5px;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.65);
}

.build-slot-level {
  margin-top: 4px;

  font-size: 12px;
  font-weight: 800;

  color: rgba(255,255,255,0.72);
}

.build-slot.empty {
  text-align: center;

  padding: 22px;

  border: 1px dashed rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.015);

  border-radius: 16px;
}

.build-slot-info {
  font-size: 12px;
  line-height: 1.5;

  color: rgba(255,255,255,0.52);

  margin-bottom: 10px;
}

.build-slot-bar {
  width: 100%;
  height: 8px;

  background: rgba(255,255,255,0.06);

  border-radius: 999px;

  overflow: hidden;

  margin-top: 8px;
}

.build-slot-fill {
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #b8822e,
      #e0b15d
    );

  border-radius: 999px;

  box-shadow:
    0 0 12px rgba(212,175,55,0.28);

  transition: width 1s linear;
}

.build-slot-empty-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.2);
}

.bp-btn.cancel {
  background: linear-gradient(135deg, #8b2020, #a52a2a);
  color: white;
}

.bp-btn.cancel:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(255, 50, 50, 0.3);
}

.bp-btn.skip {
  margin-top: 10px;

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

  gap: 6px;

  color: white;

  background:
    linear-gradient(
      180deg,
      #c580ff,
      #8a4fd8
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 5px 12px rgba(0,0,0,0.35);

  transition: all 0.18s ease;
}

.bp-btn.skip:hover {
  transform: translateY(-1px) scale(1.02);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 8px 18px rgba(0,0,0,0.42),
    0 0 16px rgba(197,128,255,0.22);
}

.build-slot-cancel {
  flex: 1;

  padding: 9px 10px;

  border: none;
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(170, 45, 45, 0.85),
      rgba(110, 24, 24, 0.88)
    );

  color: rgba(255, 255, 255, 0.9);

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 10px rgba(0,0,0,0.32);

  transition: all 0.18s ease;
}

.build-slot-cancel:hover {
  transform: translateY(-1px);

  color: white;

  background:
    linear-gradient(
      180deg,
      rgba(205, 58, 58, 0.92),
      rgba(130, 28, 28, 0.94)
    );
}

/* ============================================
   INVENTAR BUTTON
   ============================================ */

.inventory-btn {
  position: relative;
  z-index: 100;
}

.inventory-btn-icon-img {
  width: 74px;
  height: 74px;
}

/* ============================================
   INVENTAR FENSTER
   ============================================ */

.inventory-window {
  z-index: 140;

  width: 560px;
  max-height: 76vh;

  border: 2px solid rgba(212, 175, 55, 0.34);

  animation: modalPopup 0.22s ease;
}

.inventory-header {
  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.inventory-grid {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 14px;
}

.inventory-slot {
  position: relative;

  width: 88px;
  height: 88px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.015)
    );

  border: 1px solid rgba(212,175,55,0.14);

  border-radius: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);

  transition: all 0.18s ease;
}

.inventory-slot:hover {
  transform: translateY(-2px);

  border-color: rgba(212,175,55,0.45);

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,0.10),
      rgba(255,255,255,0.02)
    );

  box-shadow:
    0 8px 18px rgba(0,0,0,0.28),
    0 0 14px rgba(212,175,55,0.10);
}

/* ============================================
   LEVEL-BELOHNUNGEN & ITEM-FENSTER
   ============================================ */

.level-gift-btn {
  position: fixed;

  left: 170px;
  top: 135px;

  z-index: 120;
}

.level-gift-window {
  z-index: 150;

  width: 520px;
  max-height: 72vh;

  border: 2px solid rgba(212, 175, 55, 0.34);

  animation: modalPopup 0.22s ease;
}

.item-use-window {
  z-index: 150;

  width: 420px;

  border: 2px solid rgba(212, 175, 55, 0.34);

  animation: modalPopup 0.22s ease;
}

.level-gift-header {
  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.item-use-title {
  margin-bottom: 16px;
}

.level-gift-reward {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 16px;

  padding: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,0.09),
      rgba(255,255,255,0.018)
    );

  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);

  margin-bottom: 12px;
}

.level-gift-reward-info {
  flex: 1;
}

.level-gift-reward-name {
  color: #f4e2a0;
  font-weight: 900;
  font-size: 15px;
}

.level-gift-reward-desc,
.item-use-desc {
  font-size: 13px;
  line-height: 1.7;

  color: rgba(255,255,255,0.58);

  margin-bottom: 16px;
}

.level-gift-claim,
.item-use-yes,
.item-use-no {
  border: none;
  border-radius: 12px;

  padding: 11px 18px;

  cursor: pointer;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  transition: all 0.18s ease;
}

.level-gift-claim,
.item-use-yes {
  color: #1a1a2e;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 4px 10px rgba(0,0,0,0.35);
}

.level-gift-claim:hover,
.item-use-yes:hover {
  transform: translateY(-1px) scale(1.03);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 6px 14px rgba(0,0,0,0.42),
    0 0 14px rgba(212,175,55,0.18);
}

.item-use-no {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);

  border: 1px solid rgba(255,255,255,0.08);
}

.item-use-no:hover {
  background: rgba(255,255,255,0.12);
}

.item-use-actions {
  display: flex;
  justify-content: flex-end;

  gap: 12px;

  margin-top: 20px;
}

.inventory-slot.has-item {
  cursor: pointer;
}

.inventory-item-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);

  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}

.item-use-preview-icon {
  width: 22px;
  height: 22px;

  margin-right: 6px;
}

/* ============================================
   ITEM BENUTZEN – SLIDER
   ============================================ */

.item-use-info {
  padding: 14px 16px;
  margin-bottom: 16px;

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.015)
    );

  border: 1px solid rgba(212,175,55,0.12);

  color: rgba(255,255,255,0.55);

  font-size: 12px;

  line-height: 1.6;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);
}

.item-use-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.item-use-slider-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.item-use-slider {
  flex: 1;

  height: 8px;

  appearance: none;

  border-radius: 999px;

  background:
    rgba(255,255,255,0.08);

  outline: none;
}

.item-use-slider::-webkit-slider-thumb {
  appearance: none;

  width: 20px;
  height: 20px;

  border-radius: 50%;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  cursor: pointer;

  box-shadow:
    0 0 10px rgba(212,175,55,0.35);
}

.item-use-slider-value {
  font-size: 12px;
  color: #d4af37;
  font-weight: 700;
  min-width: 70px;
  text-align: right;
}

.item-use-preview {
  margin-top: 14px;

  padding: 14px;

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,0.08),
      rgba(255,255,255,0.02)
    );

  border: 1px solid rgba(212,175,55,0.16);

  text-align: center;

  color: #f0d060;

  font-size: 13px;
  font-weight: 700;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);
}

.inventory-item-value {
  position: absolute;

  top: 3px;
  left: 50%;

  transform: translateX(-50%);

  font-size: 10px;
  font-weight: 800;

  color: #f0d060;

  text-shadow:
    0 1px 3px rgba(0,0,0,0.9);
}

.inventory-item-count {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.item-use-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 16px;
  margin-bottom: 14px;

  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(255,90,90,0.16),
      rgba(255,255,255,0.02)
    );

  border: 1px solid rgba(255,90,90,0.24);

  color: #ffb5b5;

  line-height: 1.6;

  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 900;

  letter-spacing: 0.4px;

  text-align: center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 18px rgba(0,0,0,0.28),
    0 0 18px rgba(255,90,90,0.12);
}

.item-use-yes.warning {
  background: linear-gradient(135deg, #8b2020, #a52a2a);
}

.item-use-yes.warning:hover {
  box-shadow: 0 0 15px rgba(255, 50, 50, 0.3);
}

.res-premium .res-val {
  color: #c580ff;
}

.collect-resource-icon {
  width: 34px;
  height: 34px;

  object-fit: contain;

  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}

/* ============================================
   SHOP
   ============================================ */

.shop-btn {
  position: fixed;

  right: 150px;
  bottom: 18px;

  z-index: 100;
}

.shop-btn-icon-img {
  width: 74px;
  height: 74px;
}

.shop-window {
  z-index: 140;

  width: 540px;
  max-height: 72vh;

  border: 2px solid rgba(197, 128, 255, 0.34);

  animation: modalPopup 0.22s ease;
}

.shop-header {
  border-bottom: 1px solid rgba(197,128,255,0.18);
}

.shop-item {
  display: grid;
  grid-template-columns: 54px 1fr 86px;
  align-items: center;
  gap: 14px;

  padding: 14px 16px;
  margin-bottom: 12px;

  background:
    linear-gradient(
      180deg,
      rgba(197,128,255,0.09),
      rgba(255,255,255,0.018)
    );

  border: 1px solid rgba(197,128,255,0.18);
  border-radius: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);

  transition: all 0.18s ease;
}

.shop-item:hover {
  transform: translateY(-2px);

  border-color: rgba(197,128,255,0.42);

  background:
    linear-gradient(
      180deg,
      rgba(197,128,255,0.14),
      rgba(255,255,255,0.025)
    );
}

.shop-item-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));
}

.shop-item-info {
  flex: 1;
}

.shop-item-title {
  color: #c580ff;
  font-weight: 700;
  font-size: 15px;
}

.shop-item-desc {
  color: rgba(255,255,255,0.45);
  font-size: 12px;
}

.shop-buy-btn {
  height: 52px;
  min-width: 84px;

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

  background:
    linear-gradient(
      180deg,
      #cf87ff,
      #9f58df
    );

  border: none;
  border-radius: 12px;

  cursor: pointer;

  transition: all 0.2s ease;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 4px 10px rgba(0,0,0,0.35);
}

.shop-price {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
}

.build-slot-actions {
  display: flex;
  gap: 8px;

  margin-top: 12px;
}

.build-slot-skip {
  flex: 1;

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

  padding: 9px 10px;

  border: none;
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      #c580ff,
      #8a4fd8
    );

  color: white;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 4px 10px rgba(0,0,0,0.32);

  transition: all 0.18s ease;
}

.build-slot-skip:hover {
  transform: translateY(-1px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 6px 14px rgba(0,0,0,0.38),
    0 0 12px rgba(197,128,255,0.18);
}

.faction-select {
  position: fixed;
  inset: 0;

  z-index: 10000;

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

  background:
    radial-gradient(
      circle at center,
      rgba(40, 60, 35, 0.35),
      rgba(0, 0, 0, 0.96)
    ),
    #050505;

  pointer-events: auto;
}

.faction-select.active {
  display: flex;
}

.faction-box {
  width: min(760px, calc(100vw - 40px));

  padding: 34px;

  background:
    linear-gradient(
      180deg,
      rgba(15, 13, 30, 0.98),
      rgba(8, 8, 18, 0.99)
    );

  border: 2px solid rgba(212, 175, 55, 0.32);
  border-radius: 24px;

  color: white;

  text-align: center;

  box-shadow:
    0 24px 70px rgba(0,0,0,0.68),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.faction-box h2 {
  font-family: 'Cinzel', serif;
  font-size: 30px;
  font-weight: 900;

  color: #f0d060;

  margin-bottom: 8px;

  letter-spacing: 1px;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.85);
}

.faction-box > p {
  color: rgba(255,255,255,0.55);

  font-size: 14px;
  font-weight: 700;
}

.faction-options {
  display: flex;
  gap: 22px;

  margin-top: 26px;
}

.faction-card {
  flex: 1;

  min-height: 260px;

  padding: 24px 20px;

  border-radius: 20px;

  cursor: pointer;

  transition: all 0.2s ease;

  border: 1px solid rgba(255,255,255,0.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 24px rgba(0,0,0,0.36);
}

.faction-card:hover {
  transform: translateY(-4px) scale(1.03);
}

.faction-icon {
  width: 64px;
  height: 64px;

  margin: 0 auto 14px;

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

  border-radius: 50%;

  font-size: 34px;

  background: rgba(0,0,0,0.28);

  border: 2px solid rgba(255,255,255,0.14);

  box-shadow:
    inset 0 0 18px rgba(0,0,0,0.35),
    0 0 18px rgba(255,255,255,0.08);
}

.faction-card h3 {
  margin-bottom: 12px;

  font-family: 'Cinzel', serif;
  font-size: 21px;
  font-weight: 900;

  letter-spacing: 0.8px;
}

.faction-card p {
  color: rgba(255,255,255,0.72);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.faction-note {
  margin-top: 18px;

  padding: 8px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.5px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);

  color: rgba(255,255,255,0.64);
}

.faction-card.human {
  background:
    linear-gradient(
      180deg,
      rgba(48, 80, 130, 0.92),
      rgba(20, 32, 58, 0.96)
    );

  border-color: rgba(100, 160, 255, 0.28);
}

.faction-card.human h3 {
  color: #dceaff;
}

.faction-card.human:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 30px rgba(0,0,0,0.42),
    0 0 24px rgba(80,140,255,0.20);
}

.faction-card.orc {
  background:
    linear-gradient(
      180deg,
      rgba(62, 104, 48, 0.92),
      rgba(25, 46, 22, 0.97)
    );

  border-color: rgba(110, 210, 90, 0.28);
}

.faction-card.orc h3 {
  color: #c8ffb8;
}

.faction-card.orc:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 30px rgba(0,0,0,0.42),
    0 0 24px rgba(90,220,90,0.18);
}

.player-portrait-img.faction-human {
  border-color: #5ea0ff;

  background:
    radial-gradient(circle at 35% 30%, #416bb8, #162242 70%);

  box-shadow:
    0 0 18px rgba(94,160,255,0.65),
    inset 0 0 16px rgba(0,0,0,0.42);
}

.player-portrait-img.faction-orc {
  border-color: #6bd84a;

  background:
    radial-gradient(circle at 35% 30%, #3d7c38, #162b16 70%);

  box-shadow:
    0 0 18px rgba(107,216,74,0.65),
    inset 0 0 16px rgba(0,0,0,0.42);
}

body.choosing-faction .inventory-btn,
body.choosing-faction .quest-btn,
body.choosing-faction .build-btn,
body.choosing-faction .shop-btn,
body.choosing-faction .settings-btn,
body.choosing-faction .map-toggle-btn,
body.choosing-faction .level-gift-btn,
body.choosing-faction .army-btn {
  display: none !important;
}

.settings-btn {
  position: fixed;

  right: 20px;
  bottom: 18px;

  z-index: 100;
}

.settings-btn-icon-img {
  width: 74px;
  height: 74px;
}

.settings-window {
  z-index: 160;

  width: 460px;

  border: 2px solid rgba(212, 175, 55, 0.34);

  animation: modalPopup 0.22s ease;
}

.settings-header {
  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.settings-close {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.03);

  color: rgba(255,255,255,0.7);

  cursor: pointer;

  transition: all 0.18s ease;
}

.settings-close:hover {
  background: rgba(255,255,255,0.08);

  border-color: rgba(212,175,55,0.28);

  color: white;

  transform: scale(1.06);
}

.settings-content {
  display: flex;
  flex-direction: column;

  gap: 14px;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 16px;

  color: #f5f1dc;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.015)
    );

  border: 1px solid rgba(212,175,55,0.12);

  border-radius: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);
}

.settings-item span {
  color: #f5f1dc !important;

  font-size: 18px;
  font-weight: 700;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.7);
}

.settings-item button {
  border: none;
  border-radius: 12px;

  padding: 10px 14px;

  cursor: pointer;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  color: #1a1a2e;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 4px 10px rgba(0,0,0,0.35);

  transition: all 0.18s ease;
}

.settings-item button:hover {
  transform: translateY(-1px) scale(1.03);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 6px 14px rgba(0,0,0,0.42),
    0 0 14px rgba(212,175,55,0.18);
}

.logout-btn {
  width: 100%;

  border: none;
  border-radius: 14px;

  padding: 12px;

  cursor: pointer;

  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 900;

  color: white;

  background:
    linear-gradient(
      180deg,
      #b82d2d,
      #7a1717
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 5px 12px rgba(0,0,0,0.35);

  transition: all 0.18s ease;
}

.logout-btn:hover {
  transform: translateY(-1px) scale(1.02);

  box-shadow:
    0 8px 18px rgba(0,0,0,0.42),
    0 0 14px rgba(255,80,80,0.16);
}

.shop-price-icon {
  width: 24px;
  height: 24px;
}

.shop-price-val {
  font-size: 14px;
  font-weight: 900;
  color: white;
  line-height: 1;
}

.shop-confirm-window {
  z-index: 180;

  width: 440px;

  border: 2px solid rgba(197, 128, 255, 0.30);

  animation: modalPopup 0.22s ease;
}

.shop-confirm-window .item-use-title {
  margin-bottom: 14px;
}

.shop-confirm-window .item-use-desc {
  margin-bottom: 20px;

  line-height: 1.7;

  color: rgba(255,255,255,0.58);
}

.shop-confirm-window .item-use-yes {
  background:
    linear-gradient(
      180deg,
      #ff6b6b,
      #b92d2d
    );

  color: white;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 5px 12px rgba(0,0,0,0.35);
}

.shop-confirm-window .item-use-yes:hover {
  box-shadow:
    0 8px 18px rgba(0,0,0,0.42),
    0 0 14px rgba(197,128,255,0.20);
}

/* ============================================
   RESSOURCEN TOOLTIP
   ============================================ */

.res-tooltip {
  position: fixed;
  z-index: 250;

  display: none;

  min-width: 220px;
  padding: 14px 16px;

  background:
    linear-gradient(
      180deg,
      rgba(15,13,30,0.97),
      rgba(8,8,18,0.97)
    );

  border: 2px solid rgba(212,175,55,0.28);
  border-radius: 18px;

  backdrop-filter: blur(6px);

  box-shadow:
    0 16px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);

  pointer-events: none;

  animation: tooltipFade 0.14s ease;
}

.res-tooltip-title {
  font-family: 'Cinzel', serif;

  font-size: 15px;
  font-weight: 900;

  color: #f0d060;

  margin-bottom: 10px;

  letter-spacing: 0.5px;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.7);
}

.res-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 6px 0;

  font-size: 12px;

  color: rgba(255,255,255,0.55);

  border-top: 1px solid rgba(255,255,255,0.05);
}

.res-tooltip-row span {
  color: #ffffff;
  font-weight: 800;
}

@keyframes tooltipFade {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }

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

.player-points-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.player-points-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.player-points-value {
  font-size: 12px;
  font-weight: 700;
  color: #d4af37;
}

/* ============================================
   WELTKARTE TOGGLE
   ============================================ */

.map-toggle-btn {
  position: fixed;

  left: 18px;
  bottom: 18px;

  z-index: 100;
}

.map-toggle-icon-img {
  width: 74px !important;
  height: 74px !important;
}

/* ============================================
   SMALL INLINE ICONS
   ============================================ */

.small-res-icon,
.bp-cost-icon,
.quest-reward-icon,
.build-skip-icon,
.shop-price-icon,
.item-use-preview-icon {
  object-fit: contain;
  vertical-align: middle;

  filter:
    drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}

.small-res-icon,
.bp-cost-icon {
  width: 18px;
  height: 18px;

  margin-right: 4px;
}

.level-gift-reward-icon img {
  width: 54px;
  height: 54px;

  object-fit: contain;

  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}

.quest-reward-icon {
  width: 20px;
  height: 20px;

  margin-right: 2px;
}

.build-skip-icon {
  width: 18px;
  height: 18px;

  margin-right: 4px;
}

.left-menu {
  position: fixed;

  left: 18px;
  top: 50%;

  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 42px;

  z-index: 100;
}

.level-gift-btn-icon-img {
  width: 74px;
  height: 74px;
}

/* ============================================
   TYPOGRAFIE & TEXTSCHÄRFE
   ============================================ */

body,
button,
input,
textarea,
select {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Normale UI-Texte bewusst clean halten */
.quest-item-title,
.quest-item-desc,
.quest-item-reward,
.quest-item-reward span,
.shop-item-title,
.shop-item-desc,
.settings-item,
.settings-item span,
.level-gift-reward-name,
.level-gift-reward-desc,
.item-use-desc,
.bp-desc,
.bp-level,
.bp-production,
.bp-next,
.bp-cost-item,
.res-val,
.player-name,
.player-xp-text,
.player-points-label,
.player-points-value,
.inventory-item-value,
.inventory-item-count,
.shop-price-val,
.login-subtitle,
.login-foodtitle {
  font-family: 'Nunito', sans-serif !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Große Titel behalten den goldenen 3D-Look */
.login-logo,
.quest-log-title,
.inventory-title,
.build-queue-title,
.shop-title,
.level-gift-title,
.settings-title,
.bp-name,
.item-use-title {
  font-family: 'Cinzel', serif !important;

  background:
    linear-gradient(
      180deg,
      #fff8d8 0%,
      #f7d98a 18%,
      #d7a24d 42%,
      #8f5a1d 68%,
      #5b340d 100%
    ) !important;

  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.18),
    0 2px 3px rgba(0,0,0,0.45),
    0 4px 8px rgba(0,0,0,0.55),
    0 0 10px rgba(255,210,120,0.08) !important;

  filter:
    drop-shadow(0 2px 5px rgba(0,0,0,0.35));
}

.quest-log-title,
.inventory-title,
.build-queue-title,
.shop-title,
.level-gift-title,
.settings-title {
  font-size: 20px;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

#music-volume {
  width: 140px;

  accent-color: #d4af37;

  cursor: pointer;
}

#music-volume-text {
  min-width: 42px;

  text-align: right;

  font-size: 12px;
  font-weight: 800;

  color: #f0d060;
}

/* ============================================
   ARMEE SYSTEM
   ============================================ */

.army-btn {
  position: fixed;

  top: 76px;
  right: 34px;

  z-index: 120;
}

.army-btn-icon-img {
  width: 74px;
  height: 74px;
}

.army-window {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 170;

  width: min(1100px, calc(100vw - 48px));
  height: auto;
  max-height: 82vh;

  display: none;

  padding: 22px;

  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;

  background:
    linear-gradient(
      180deg,
      rgba(15, 13, 30, 0.97),
      rgba(8, 8, 18, 0.97)
    );

  border: 2px solid rgba(212, 175, 55, 0.34);
  border-radius: 22px;

  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);

  backdrop-filter: blur(6px);

  animation: modalPopup 0.22s ease;
}

.army-window::-webkit-scrollbar {
  width: 8px;
}

.army-window::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}

.army-window::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.35);
  border-radius: 999px;
}

.army-window::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,0.55);
}

.army-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 14px;
  margin-bottom: 18px;

  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.army-title {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 1px;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.8);
}

.army-subtitle {
  margin-top: 4px;

  font-size: 12px;
  font-weight: 800;

  color: rgba(255,255,255,0.52);
}

.army-subtitle span {
  color: #f0d060;
}

.army-close {
  width: 28px;
  height: 28px;

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

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;

  color: rgba(255, 255, 255, 0.5);

  cursor: pointer;

  font-size: 14px;

  transition: all 0.2s;
}

.army-close:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
}

.army-info-box {
  margin-bottom: 18px;
  padding: 16px;

  border-radius: 16px;
  border: 1px solid rgba(212,175,55,0.16);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);
}

.army-info-box strong {
  display: block;

  margin-bottom: 6px;

  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 900;

  color: #f0d060;
}

.army-info-box p {
  margin-bottom: 12px;

  font-size: 12px;
  line-height: 1.55;

  color: rgba(255,255,255,0.52);
}

.army-reserve-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.army-unit-pill {
  min-height: 42px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;

  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.14);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.015)
    );

  color: rgba(255,255,255,0.78);

  font-size: 12px;
  font-weight: 800;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);
}

.army-unit-icon {
  font-size: 18px;
}

.army-unit-name {
  flex: 1;
}

.army-unit-pill strong {
  margin: 0;

  font-family: 'Nunito', sans-serif;
  font-size: 12px;

  color: #f0d060;
}

.army-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.army-card {
  padding: 16px;

  border-radius: 16px;
  border: 1px solid rgba(212,175,55,0.16);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);
}

.army-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 10px;
}

.army-card-title {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 900;

  color: #f0d060;
}

.army-card-sub {
  margin-top: 4px;

  font-size: 12px;
  font-weight: 800;

  color: rgba(255,255,255,0.54);
}

.army-reset-btn {
  padding: 8px 11px;

  border: none;
  border-radius: 10px;

  cursor: pointer;

  color: rgba(255,255,255,0.9);

  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 900;

  background:
    linear-gradient(
      180deg,
      rgba(150, 45, 45, 0.88),
      rgba(95, 22, 22, 0.92)
    );
}

.army-cap-bar {
  width: 100%;
  height: 8px;

  margin-bottom: 12px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(255,255,255,0.06);
}

.army-cap-fill {
  height: 100%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #b88a18,
      #f0d060,
      #fff1a8
    );

  box-shadow:
    0 0 10px rgba(240,208,96,0.28);
}

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

.army-unit-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 82px minmax(135px, 180px) 92px 78px;
  min-height: 92px;
  align-items: center;
  gap: 8px;

  padding: 10px;

  border-radius: 16px;
  border: 1px solid rgba(212,175,55,0.14);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.015)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 5px 14px rgba(0,0,0,0.22);
}

.army-unit-main {
  display: flex;
  align-items: center;
  gap: 16px;

  min-width: 0;
}

.army-unit-portrait {
  position: relative;

  width: 58px;
  height: 58px;

  flex-shrink: 0;

  overflow: hidden;

  border-radius: 50%;
  border: 2px solid rgba(212,175,55,0.34);

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(212,175,55,0.22),
      rgba(15,13,30,0.96) 70%
    );

  box-shadow:
    0 0 14px rgba(212,175,55,0.16),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.army-unit-portrait img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

.army-unit-portrait-fallback {
  position: absolute;
  inset: 0;

  display: none !important;
  align-items: center;
  justify-content: center;

  font-size: 27px;
}

.army-unit-text {
  min-width: 0;
}

.army-unit-title {
  display: flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,0.86);

  font-size: 14px;
}

.army-unit-sub {
  margin-top: 3px;

  font-size: 12px;
  font-weight: 700;

  color: rgba(255,255,255,0.42);
}

.army-move-input {
  width: 100%;

  padding: 8px;

  border-radius: 10px;
  border: 1px solid rgba(212,175,55,0.14);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.015)
    );

  color: white;

  font-weight: 800;

  outline: none;
}

.army-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.army-move-slider {
  flex: 1;

  accent-color: #d4af37;

  cursor: pointer;
}

.army-slider-value {
  min-width: 42px;

  text-align: right;

  font-size: 11px;
  font-weight: 900;

  color: #f0d060;
}

.army-small-btn {
  padding: 8px 9px;

  border: none;
  border-radius: 10px;

  cursor: pointer;

  color: #1a1a2e;

  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 900;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 5px 12px rgba(0,0,0,0.35);
}

.army-small-btn.secondary {
  color: rgba(255,255,255,0.9);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.04)
    );

  border: 1px solid rgba(255,255,255,0.10);
}

body.choosing-faction .army-btn {
  display: none !important;
}

.army-unit-row.disabled {
  opacity: 0.42;
}

.army-unit-row.disabled .army-unit-title,
.army-unit-row.disabled .army-unit-sub {
  color: rgba(255,255,255,0.32);
}

.army-move-input:disabled,
.army-move-slider:disabled,
.army-small-btn:disabled,
.army-small-btn.disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.65);
}

.army-small-btn:disabled:hover,
.army-small-btn.disabled:hover {
  transform: none;
}

.army-card.locked {
  opacity: 0.58;

  background:
    linear-gradient(
      180deg,
      rgba(80, 80, 100, 0.10),
      rgba(255,255,255,0.012)
    );

  border-color: rgba(255,255,255,0.09);
}

.army-card.locked .army-card-title {
  color: rgba(255,255,255,0.42);
}

.army-card.locked .army-card-sub {
  color: rgba(255, 180, 80, 0.76);
}

.army-card.locked .army-cap-fill {
  background:
    linear-gradient(
      90deg,
      rgba(100,100,120,0.35),
      rgba(150,150,170,0.35)
    );

  box-shadow: none;
}

.army-reset-btn:disabled,
.army-reset-btn.disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.75);
}

.army-reset-btn:disabled:hover,
.army-reset-btn.disabled:hover {
  transform: none;
}

/* ============================================
   KASERNE / EINHEITEN AUSBILDEN
   ============================================ */

.bp-barracks-training {
  display: none;

  margin-bottom: 16px;
}

.barracks-training-box {
  padding: 14px;

  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(255,150,60,0.08),
      rgba(255,255,255,0.018)
    );

  border: 1px solid rgba(255,150,60,0.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 18px rgba(0,0,0,0.24);
}

.barracks-training-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 12px;
}

.barracks-training-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 0.6px;
}

.barracks-training-slots {
  font-size: 11px;
  font-weight: 900;

  color: rgba(255,255,255,0.5);
}

.barracks-training-empty,
.barracks-queue-empty {
  padding: 12px;

  border-radius: 12px;

  background: rgba(0,0,0,0.18);

  color: rgba(255,255,255,0.48);

  font-size: 12px;
  font-weight: 800;

  text-align: center;
}

.barracks-training-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.barracks-unit-card {
  padding: 12px;

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.014)
    );

  border: 1px solid rgba(255,255,255,0.07);
}

.barracks-unit-card.disabled {
  opacity: 0.45;
}

.barracks-unit-head {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 8px;
}

.barracks-unit-icon {
  width: 38px;
  height: 38px;

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

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255,190,90,0.28),
      rgba(64,28,8,0.88)
    );

  border: 1px solid rgba(255,190,90,0.25);

  font-size: 20px;
}

.barracks-unit-info {
  flex: 1;
}

.barracks-unit-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 900;

  color: rgba(255,255,255,0.88);
}

.barracks-unit-desc {
  margin-top: 2px;

  font-size: 11px;
  font-weight: 700;

  color: rgba(255,255,255,0.42);
}

.barracks-unit-meta {
  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 800;

  color: rgba(240,208,96,0.70);
}

.barracks-train-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;

  align-items: center;
}

.barracks-train-input {
  width: 100%;

  padding: 8px;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);

  background: rgba(255,255,255,0.04);

  color: white;

  font-weight: 900;

  outline: none;
}

.barracks-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.barracks-train-slider {
  flex: 1;

  accent-color: #f0d060;

  cursor: pointer;
}

.barracks-train-value {
  min-width: 42px;

  text-align: right;

  font-size: 11px;
  font-weight: 900;

  color: #f0d060;
}

.barracks-train-preview {
  display: flex;
  justify-content: space-between;
  gap: 10px;

  margin-top: 8px;

  font-size: 11px;
  font-weight: 800;

  color: rgba(255,255,255,0.52);
}

.barracks-cost-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  margin-right: 8px;

  color: #f0d060;
}

.barracks-cost-empty {
  color: rgba(255,255,255,0.32);
}

.barracks-train-btn {
  width: 100%;

  margin-top: 10px;
  padding: 9px 10px;

  border: none;
  border-radius: 12px;

  cursor: pointer;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  color: #1a1a2e;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 5px 12px rgba(0,0,0,0.30);
}

.barracks-train-btn:hover {
  transform: translateY(-1px);
}

.barracks-train-btn:disabled,
.barracks-train-btn.disabled,
.barracks-train-input:disabled,
.barracks-train-slider:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.65);
}

.barracks-train-btn:disabled:hover,
.barracks-train-btn.disabled:hover {
  transform: none;
}

.barracks-queue-title {
  margin-top: 14px;
  margin-bottom: 8px;

  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 900;

  color: rgba(240,208,96,0.88);
}

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

.barracks-queue-item {
  padding: 10px;

  border-radius: 12px;

  background: rgba(0,0,0,0.22);

  border: 1px solid rgba(255,255,255,0.06);
}

.barracks-queue-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 7px;

  font-size: 12px;
  font-weight: 800;

  color: rgba(255,255,255,0.75);
}

.barracks-queue-head span {
  color: #f0d060;
}

.barracks-queue-bar {
  width: 100%;
  height: 7px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(255,255,255,0.06);
}

.barracks-queue-fill {
  height: 100%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #b8822e,
      #f0d060
    );

  box-shadow:
    0 0 12px rgba(240,208,96,0.22);
}

.barracks-queue-skip {
  width: 100%;

  margin-top: 9px;
  padding: 8px 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  border: none;
  border-radius: 10px;

  cursor: pointer;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  color: white;

  background:
    linear-gradient(
      180deg,
      #c580ff,
      #8a4fd8
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 5px 12px rgba(0,0,0,0.30);

  transition: all 0.18s ease;
}

.barracks-queue-skip:hover {
  transform: translateY(-1px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 8px 18px rgba(0,0,0,0.38),
    0 0 14px rgba(197,128,255,0.22);
}

/* ============================================
   GEBÄUDE AKTIONSKREISE
   ============================================ */

.building-action-menu {
  position: fixed;

  z-index: 156;

  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;

  transform: translateX(-50%);

  pointer-events: auto;

  animation: buildingActionPop 0.18s ease;
}

.building-action-circle {
  width: 58px;
  height: 58px;

  position: relative;

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

  border-radius: 50%;

  border: 2px solid rgba(240, 208, 96, 0.46);

  cursor: pointer;

  color: #f0d060;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 220, 130, 0.24),
      rgba(60, 35, 12, 0.96) 68%
    );

  box-shadow:
    0 10px 22px rgba(0,0,0,0.42),
    0 0 18px rgba(240,208,96,0.15),
    inset 0 1px 0 rgba(255,255,255,0.10);

  transition: all 0.16s ease;
}

.building-action-circle span {
  font-family: 'Cinzel', serif;
  font-size: 25px;
  font-weight: 900;

  line-height: 1;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.8);
}

.building-action-circle small {
  position: absolute;

  left: 50%;
  top: 62px;

  transform: translateX(-50%);

  padding: 3px 7px;

  border-radius: 999px;

  background: rgba(10, 10, 22, 0.92);
  border: 1px solid rgba(240,208,96,0.20);

  color: rgba(255,255,255,0.78);

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.3px;

  white-space: nowrap;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.35);
}

.building-action-circle:hover {
  transform: translateY(-4px) scale(1.08);

  border-color: rgba(255, 220, 120, 0.82);

  box-shadow:
    0 14px 28px rgba(0,0,0,0.50),
    0 0 24px rgba(240,208,96,0.28),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

.building-action-circle.info {
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(140, 210, 255, 0.25),
      rgba(12, 38, 62, 0.96) 68%
    );

  border-color: rgba(140, 210, 255, 0.44);

  color: #9edcff;
}

.building-action-circle.upgrade {
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 190, 70, 0.28),
      rgba(72, 38, 10, 0.96) 68%
    );

  border-color: rgba(255, 180, 70, 0.48);

  color: #ffcb69;
}

.building-action-circle.train {
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(197, 128, 255, 0.28),
      rgba(46, 20, 76, 0.96) 68%
    );

  border-color: rgba(197, 128, 255, 0.48);

  color: #d8a8ff;
}

.building-action-circle.disabled,
.building-action-circle:disabled {
  opacity: 0.38;

  cursor: not-allowed;

  filter: grayscale(0.65);
}

.building-action-circle.disabled:hover,
.building-action-circle:disabled:hover {
  transform: none;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

@keyframes buildingActionPop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.82);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ============================================
   GEBÄUDE INFO / AUSBAU MODAL
   ============================================ */

.building-modal-window {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 175;

  width: min(520px, calc(100vw - 42px));

  display: none;

  padding: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(15, 13, 30, 0.98),
      rgba(8, 8, 18, 0.98)
    );

  border: 2px solid rgba(212, 175, 55, 0.34);
  border-radius: 22px;

  box-shadow:
    0 24px 70px rgba(0,0,0,0.68),
    0 0 34px rgba(212,175,55,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06);

  backdrop-filter: blur(6px);

  animation: modalPopup 0.22s ease;
}

.building-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 14px;
  margin-bottom: 16px;

  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.building-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 0.8px;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.8);
}

.building-modal-close {
  width: 30px;
  height: 30px;

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

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);

  color: rgba(255,255,255,0.62);

  cursor: pointer;
}

.building-modal-close:hover {
  color: white;
  border-color: rgba(212,175,55,0.35);
}

.building-modal-content {
  color: rgba(255,255,255,0.72);

  font-size: 13px;
  line-height: 1.55;
}

.building-modal-info-text {
  padding: 12px 14px;
  margin-bottom: 14px;

  border-radius: 14px;

  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);

  color: rgba(255,255,255,0.62);
}

.building-modal-section {
  margin-bottom: 14px;
}

.building-modal-section-title {
  margin-bottom: 8px;

  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 0.6px;
}

.building-modal-effect-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 9px 11px;
  margin-bottom: 6px;

  border-radius: 12px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
}

.building-modal-effect-row span {
  color: rgba(255,255,255,0.48);

  font-size: 12px;
  font-weight: 800;
}

.building-modal-effect-row strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: rgba(255,255,255,0.86);

  font-size: 12px;
  font-weight: 900;
}

.building-modal-cost-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.building-modal-cost-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 7px 10px;

  border-radius: 999px;

  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(212,175,55,0.14);

  color: rgba(255,255,255,0.78);

  font-size: 12px;
  font-weight: 900;
}

.building-modal-cost-item.cant-afford {
  color: #ff6b6b;
  border-color: rgba(255, 90, 90, 0.22);
}

.building-modal-empty {
  padding: 10px 12px;

  border-radius: 12px;

  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.05);

  color: rgba(255,255,255,0.42);

  font-size: 12px;
  font-weight: 800;
}

.building-modal-warning {
  padding: 11px 13px;
  margin-top: 12px;

  border-radius: 12px;

  background: rgba(120, 36, 20, 0.28);
  border: 1px solid rgba(255, 100, 70, 0.26);

  color: #ff9a7a;

  font-size: 12px;
  font-weight: 900;
}

.building-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;

  margin-top: 18px;
}

.building-modal-btn {
  padding: 12px 14px;

  border: none;
  border-radius: 13px;

  cursor: pointer;

  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 900;
}

.building-modal-btn.cancel {
  color: rgba(255,255,255,0.82);

  background:
    linear-gradient(
      180deg,
      rgba(70,70,92,0.90),
      rgba(38,38,58,0.92)
    );
}

.building-modal-btn.confirm {
  color: #1a1a2e;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 5px 12px rgba(0,0,0,0.35);
}

.building-modal-btn.confirm:hover,
.building-modal-btn.cancel:hover {
  transform: translateY(-1px);
}

.building-modal-btn.disabled,
.building-modal-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.65);
}

.building-modal-btn.disabled:hover,
.building-modal-btn:disabled:hover {
  transform: none;
}

/* ============================================
   DEV TRANSFORM TOOL
   ============================================ */

.dev-password-window {
  position: fixed;
  inset: 0;
  z-index: 1000;

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

  background: rgba(0, 0, 0, 0.65);
}

.dev-password-box {
  width: 360px;

  padding: 24px;

  border-radius: 18px;
  border: 2px solid rgba(212, 175, 55, 0.42);

  background:
    linear-gradient(
      180deg,
      rgba(15, 13, 30, 0.98),
      rgba(8, 8, 18, 0.98)
    );

  color: white;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.dev-password-box h2 {
  margin-bottom: 8px;

  font-family: 'Cinzel', serif;
  color: #f0d060;
}

.dev-password-box p {
  margin-bottom: 14px;

  color: rgba(255,255,255,0.62);
  font-size: 13px;
}

.dev-password-input {
  width: 100%;

  padding: 13px 14px;

  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.24);

  background: rgba(255,255,255,0.06);
  color: white;

  outline: none;
}

.dev-password-error {
  min-height: 20px;

  margin-top: 10px;

  color: #ff6b6b;
  font-size: 12px;
}

.dev-password-actions {
  display: flex;
  gap: 10px;

  margin-top: 14px;
}

.dev-password-actions button {
  flex: 1;

  padding: 10px;

  border: none;
  border-radius: 12px;

  cursor: pointer;

  font-weight: 900;
}

.dev-password-actions button:first-child {
  background: rgba(255,255,255,0.08);
  color: white;
}

.dev-password-actions button:last-child {
  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  color: #1a1a2e;
}

.dev-transform-panel {
  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 950;

  width: 310px;

  display: none;

  padding: 16px;

  border-radius: 18px;
  border: 2px solid rgba(212, 175, 55, 0.38);

  background:
    linear-gradient(
      180deg,
      rgba(15, 13, 30, 0.96),
      rgba(8, 8, 18, 0.96)
    );

  color: white;

  box-shadow:
    0 18px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.dev-transform-title {
  margin-bottom: 10px;

  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 900;

  color: #f0d060;
}

.dev-transform-help {
  margin-bottom: 12px;

  font-size: 12px;
  line-height: 1.5;

  color: rgba(255,255,255,0.62);
}

.dev-transform-selected {
  margin-bottom: 12px;
  padding: 10px;

  border-radius: 12px;

  background: rgba(255,255,255,0.06);

  font-size: 12px;
  color: rgba(255,255,255,0.82);
}

.dev-transform-btn,
.dev-transform-close {
  width: 100%;

  padding: 10px;

  border: none;
  border-radius: 12px;

  cursor: pointer;

  font-weight: 900;
}

.dev-transform-btn {
  margin-bottom: 10px;

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );

  color: #1a1a2e;
}

.dev-transform-close {
  margin-top: 10px;

  background: rgba(255, 80, 80, 0.18);
  color: #ff9a9a;

  border: 1px solid rgba(255, 80, 80, 0.25);
}

.dev-transform-output {
  min-height: 96px;

  padding: 10px;

  border-radius: 12px;

  background: rgba(0,0,0,0.38);

  color: #d8f2ff;

  font-size: 12px;
  white-space: pre-wrap;
}

/* ===== ACCOUNT / VERSION ===== */


.account-box .login-subtitle {
  margin-bottom: 16px;
}

.account-action-row {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.account-logout-btn {
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color: #f4e2b8;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
}

.account-logout-btn:hover {
  filter: brightness(1.15);
}

.login-error.account-success {
  color: #8ee6a4;
}


.account-main-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.account-password-section {
  margin-top: 14px;
}

.account-back-btn {
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color: #f4e2b8;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

.account-back-btn:hover {
  filter: brightness(1.15);
}


/* ===== WELTKARTE PVE FENSTER ===== */

.worldmap-target-box {
  width: 100%;
  text-align: left;
}

.worldmap-target-desc {
  margin-bottom: 16px;
  padding: 12px 14px;

  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.18);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.015)
    );

  color: rgba(245,241,220,0.78);

  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.worldmap-target-section-title {
  margin: 14px 0 8px;

  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 0.8px;
  text-transform: uppercase;

  text-shadow:
    0 2px 5px rgba(0,0,0,0.7);
}

.worldmap-window-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 7px;
  padding: 9px 11px;

  border-radius: 10px;

  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.055);
}

.worldmap-window-name {
  display: flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,0.78);

  font-size: 13px;
  font-weight: 800;
}

.worldmap-enemy-count {
  color: #ff6b6b;

  font-size: 14px;
  font-weight: 900;

  text-shadow:
    0 0 8px rgba(255,70,70,0.25);
}

.worldmap-loot-amount {
  color: #8ee6a4;

  font-size: 14px;
  font-weight: 900;

  text-shadow:
    0 0 8px rgba(80,220,120,0.24);
}

.worldmap-reward-icon {
  width: 20px;
  height: 20px;

  object-fit: contain;

  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,0.55));
}

.worldmap-next-note {
  margin-top: 14px;
  padding: 10px 12px;

  border-radius: 10px;

  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.18);

  color: rgba(240,208,96,0.78);

  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.item-use-yes.disabled,
.item-use-yes:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ===== ENDE WELTKARTE PVE FENSTER ===== */


/* ===== WELTKARTE PVE ARMEE AUSWAHL ===== */

.worldmap-army-select-list {
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 10px;
}

.worldmap-army-card {
  width: 100%;

  padding: 12px 13px;

  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.20);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.018)
    );

  color: #f5f1dc;

  cursor: pointer;

  text-align: left;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 14px rgba(0,0,0,0.22);

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.worldmap-army-card:hover:not(.disabled) {
  transform: translateY(-1px);

  border-color: rgba(240,208,96,0.48);

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,0.13),
      rgba(212,175,55,0.04)
    );
}

.worldmap-army-card.disabled {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

.worldmap-army-card-top,
.worldmap-army-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.worldmap-army-card-bottom {
  margin-top: 8px;

  color: rgba(255,255,255,0.58);

  font-size: 12px;
  font-weight: 800;
}

.worldmap-army-card-bottom strong {
  color: #f0d060;

  font-size: 14px;
  font-weight: 900;
}

.worldmap-army-name {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 900;

  color: #f0d060;
}

.worldmap-army-status {
  max-width: 190px;

  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;

  text-align: right;
}

.worldmap-army-status-ready {
  color: #8ee6a4;
}

.worldmap-army-status-blocked {
  color: #ff8a8a;
}

.worldmap-army-confirm {
  padding: 14px;

  border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.20);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.018)
    );
}

.worldmap-army-confirm-title {
  margin-bottom: 10px;

  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 900;

  color: #f0d060;
}

.worldmap-army-confirm-text {
  color: rgba(255,255,255,0.78);

  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
}

/* ===== ENDE WELTKARTE PVE ARMEE AUSWAHL ===== */


/* ===== WELTKARTE PVE MARSCH SYSTEM ===== */

.worldmap-march-box {
  padding: 14px;

  border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.22);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 18px rgba(0,0,0,0.22);
}

.worldmap-march-title {
  margin-bottom: 12px;

  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 900;

  color: #f0d060;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.7);
}

.worldmap-march-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 8px;
  padding: 9px 11px;

  border-radius: 10px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.055);
}

.worldmap-march-row span {
  color: rgba(255,255,255,0.58);

  font-size: 12px;
  font-weight: 900;
}

.worldmap-march-row strong {
  color: rgba(255,255,255,0.84);

  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.worldmap-march-running {
  color: #f0d060 !important;

  text-shadow:
    0 0 8px rgba(240,208,96,0.24);
}

.worldmap-march-arrived {
  color: #8ee6a4 !important;

  text-shadow:
    0 0 8px rgba(80,220,120,0.24);
}

/* ===== ENDE WELTKARTE PVE MARSCH SYSTEM ===== */


/* ===== ARMEEÜBERSICHT MARSCHSTATUS ===== */

.army-mission-panel {
  margin: 12px 0 14px;
  padding: 12px;

  border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.22);

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,0.11),
      rgba(0,0,0,0.18)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 16px rgba(0,0,0,0.22);
}

.army-mission-panel.arrived {
  border-color: rgba(142,230,164,0.32);

  background:
    linear-gradient(
      180deg,
      rgba(80,220,120,0.10),
      rgba(0,0,0,0.18)
    );
}

.army-mission-head,
.army-mission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.army-mission-head {
  margin-bottom: 9px;
}

.army-mission-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 900;

  color: #f0d060;
}

.army-mission-status {
  font-size: 11px;
  font-weight: 900;

  color: rgba(255,255,255,0.62);
}

.army-mission-row {
  margin-bottom: 7px;
  padding: 8px 10px;

  border-radius: 10px;

  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.055);
}

.army-mission-row span {
  color: rgba(255,255,255,0.56);

  font-size: 12px;
  font-weight: 900;
}

.army-mission-row strong {
  color: rgba(255,255,255,0.86);

  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.army-mission-panel.arrived .army-mission-timer {
  color: #8ee6a4;
}

.army-mission-bar {
  width: 100%;
  height: 10px;

  margin-top: 10px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(212,175,55,0.22);

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.55);
}

.army-mission-fill {
  height: 100%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #b88a18,
      #f0d060,
      #fff1a8
    );

  transition: width 0.4s ease;

  box-shadow:
    0 0 10px rgba(240,208,96,0.28);
}

.army-mission-panel.arrived .army-mission-fill {
  background:
    linear-gradient(
      90deg,
      #2ea85c,
      #8ee6a4
    );
}

/* ===== ENDE ARMEEÜBERSICHT MARSCHSTATUS ===== */


/* ===== ARMEEÜBERSICHT EINSATZ ===== */

.army-card.army-on-mission .army-cap-bar,
.army-card.army-on-mission .army-unit-list,
.army-card.army-on-mission .army-reset-btn {
  display: none !important;
}

.army-card.army-on-mission {
  border-color: rgba(240,208,96,0.34);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 18px rgba(240,208,96,0.08);
}

.army-mission-troops {
  margin-top: 12px;
  padding: 12px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.035),
      rgba(0,0,0,0.18)
    );
}

.army-mission-troops-title {
  margin-bottom: 9px;

  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 900;

  color: rgba(240,208,96,0.82);

  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.army-mission-troop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 8px 10px;
  margin-bottom: 7px;

  border-radius: 10px;

  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.045);
}

.army-mission-troop-row:last-child {
  margin-bottom: 0;
}

.army-mission-troop-info {
  display: flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,0.76);

  font-size: 12px;
  font-weight: 900;
}

.army-mission-troop-icon {
  width: 22px;
  text-align: center;
  font-size: 16px;
}

.army-mission-troop-row strong {
  color: #f0d060;

  font-size: 13px;
  font-weight: 900;
}

.army-mission-troop-empty {
  color: rgba(255,255,255,0.55);

  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* ===== ENDE ARMEEÜBERSICHT EINSATZ ===== */


/* ===== PVE KAMPF UND RÜCKMARSCH UI ===== */

.army-mission-panel.returning {
  border-color: rgba(142,230,164,0.32);

  background:
    linear-gradient(
      180deg,
      rgba(80,220,120,0.10),
      rgba(0,0,0,0.18)
    );
}

.army-mission-panel.returning .army-mission-fill {
  background:
    linear-gradient(
      90deg,
      #2ea85c,
      #8ee6a4
    );
}

.army-mission-result-win,
.army-mission-loot {
  color: #8ee6a4 !important;
}

.army-mission-result-loss {
  color: #ff7d6e !important;
}

.worldmap-battle-mini-result,
.worldmap-return-report {
  margin-top: 12px;
  padding: 12px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(0,0,0,0.22);

  color: rgba(255,255,255,0.78);

  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.worldmap-battle-mini-result.won,
.worldmap-return-report.won {
  border-color: rgba(142,230,164,0.28);
  background:
    linear-gradient(
      180deg,
      rgba(80,220,120,0.10),
      rgba(0,0,0,0.20)
    );
}

.worldmap-battle-mini-result.lost,
.worldmap-return-report.lost {
  border-color: rgba(255,125,110,0.28);
  background:
    linear-gradient(
      180deg,
      rgba(255,90,80,0.10),
      rgba(0,0,0,0.20)
    );
}

.worldmap-return-title {
  margin-bottom: 12px;

  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 900;

  color: #f0d060;
}

/* ===== ENDE PVE KAMPF UND RÜCKMARSCH UI ===== */


/* ===== NACHRICHTEN SYSTEM ===== */



.messages-window {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: 76vh;

  display: none;

  z-index: 170;

  padding: 18px;

  overflow: hidden;

  border-radius: 20px;
  border: 2px solid rgba(212,175,55,0.34);

  background:
    radial-gradient(circle at top, rgba(212,175,55,0.12), transparent 34%),
    rgba(12, 12, 28, 0.97);

  box-shadow:
    0 22px 55px rgba(0,0,0,0.62),
    inset 0 1px 0 rgba(255,255,255,0.05);

  animation: modalPopup 0.22s ease;
}

.messages-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 14px;
  padding-bottom: 12px;

  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.messages-title {
  margin: 0;

  font-family: 'Cinzel', serif;
  font-size: 23px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 0.8px;
}

.messages-subtitle {
  margin-top: 4px;

  color: rgba(255,255,255,0.50);

  font-size: 12px;
  font-weight: 800;
}

.messages-close {
  width: 34px;
  height: 34px;

  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 10px;

  background: rgba(0,0,0,0.25);

  color: #f0d060;

  cursor: pointer;

  font-weight: 900;
}

.messages-close:hover {
  background: rgba(212,175,55,0.12);
}

.messages-tabs {
  display: flex;
  gap: 10px;

  margin-bottom: 12px;
}

.messages-tab {
  padding: 8px 12px;

  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 999px;

  background: rgba(212,175,55,0.10);

  color: #f0d060;

  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 900;
}

.messages-list {
  max-height: calc(76vh - 145px);

  overflow-y: auto;

  padding-right: 4px;
}

.messages-empty {
  padding: 36px 18px;

  border-radius: 16px;
  border: 1px dashed rgba(212,175,55,0.22);

  color: rgba(255,255,255,0.64);

  text-align: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}

.messages-empty span {
  color: rgba(240,208,96,0.72);
}

.message-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;
  padding: 13px;

  border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.16);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.018)
    );

  cursor: pointer;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.message-entry:hover {
  transform: translateY(-1px);

  border-color: rgba(240,208,96,0.42);

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,0.12),
      rgba(212,175,55,0.035)
    );
}

.message-entry.unread {
  border-color: rgba(255,95,95,0.42);

  box-shadow:
    0 0 18px rgba(255,80,80,0.10);
}

.message-entry-main {
  min-width: 0;
  flex: 1;
}

.message-entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 5px;
}

.message-entry-type {
  color: #f0d060;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.message-entry-date {
  color: rgba(255,255,255,0.42);

  font-size: 11px;
  font-weight: 800;

  white-space: nowrap;
}

.message-entry-title {
  color: rgba(255,255,255,0.82);

  font-size: 13px;
  font-weight: 900;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-delete-btn {
  padding: 8px 10px;

  border: 1px solid rgba(255,100,100,0.24);
  border-radius: 10px;

  background: rgba(120,20,20,0.26);

  color: #ff9a9a;

  cursor: pointer;

  font-size: 11px;
  font-weight: 900;
}

.message-delete-btn:hover {
  background: rgba(180,40,40,0.34);
}

.message-detail {
  padding: 14px;

  border-radius: 16px;
  border: 1px solid rgba(212,175,55,0.18);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(0,0,0,0.16)
    );
}

.message-detail-title {
  margin-bottom: 4px;

  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 900;

  color: #f0d060;
}

.message-detail-title.win {
  color: #8ee6a4;
}

.message-detail-title.loss {
  color: #ff7d6e;
}

.message-detail-date {
  margin-bottom: 14px;

  color: rgba(255,255,255,0.44);

  font-size: 12px;
  font-weight: 800;
}

.message-detail-section {
  margin-bottom: 13px;
  padding: 12px;

  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.065);

  background: rgba(0,0,0,0.22);
}

.message-detail-section-title {
  margin-bottom: 8px;

  color: #f0d060;

  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.message-detail-result {
  font-size: 15px;
  font-weight: 900;
}

.message-detail-result.win,
.message-good {
  color: #8ee6a4 !important;
}

.message-detail-result.loss,
.message-bad {
  color: #ff7d6e !important;
}

.message-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 7px;
  padding: 8px 10px;

  border-radius: 10px;

  background: rgba(255,255,255,0.035);
}

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

.message-detail-row span {
  color: rgba(255,255,255,0.66);

  font-size: 12px;
  font-weight: 850;
}

.message-detail-row strong {
  color: rgba(255,255,255,0.88);

  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.message-detail-empty {
  padding: 8px 0;

  color: rgba(255,255,255,0.54);

  font-size: 12px;
  font-weight: 850;
}

.message-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 14px;
}

.message-detail-actions button {
  padding: 9px 13px;

  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,0.16),
      rgba(212,175,55,0.07)
    );

  color: #f0d060;

  cursor: pointer;

  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 900;
}

.message-detail-actions button.danger {
  border-color: rgba(255,100,100,0.28);
  background: rgba(120,20,20,0.28);
  color: #ff9a9a;
}

/* ===== ENDE NACHRICHTEN SYSTEM ===== */


/* ===== NACHRICHTEN BUTTON POSITION ===== */

.message-btn {
  position: fixed !important;

  right: 280px !important;
  bottom: 18px !important;

  z-index: 130 !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  width: auto;
  height: auto;

  background: transparent;
  border: none;
  padding: 0;

  cursor: pointer;

  opacity: 1 !important;
  visibility: visible !important;

  transition: all 0.2s;
}

.message-btn:hover {
  transform: scale(1.08);
}

.message-btn-icon-img {
  width: 74px;
  height: 74px;

  object-fit: contain;

  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.65));
}

.message-btn-no-image::before {
  content: "✉️";

  width: 74px;
  height: 74px;

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

  font-size: 52px;

  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.65));
}

.message-btn-label {
  font-family: 'Cinzel', serif;

  font-size: 12px;
  font-weight: 700;

  color: #d4af37;

  letter-spacing: 1px;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.8);
}

.message-btn-badge {
  position: absolute;

  top: -6px;
  right: -8px;

  min-width: 26px;
  height: 26px;
  padding: 0 7px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #ff5f5f,
      #c81d25
    );

  color: white;

  font-size: 12px;
  font-weight: 900;

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

  box-shadow:
    0 0 14px rgba(255,80,80,0.45);

  animation: badgePulse 1.5s infinite;
}

body.choosing-faction .message-btn {
  display: none !important;
}

/* ===== ENDE NACHRICHTEN BUTTON POSITION ===== */


/* ===== NACHRICHTEN LÖSCHEN BESTÄTIGUNG ===== */

.message-delete-confirm-box {
  padding: 12px;

  border-radius: 14px;
  border: 1px solid rgba(255,100,100,0.24);

  background:
    linear-gradient(
      180deg,
      rgba(150,30,30,0.18),
      rgba(0,0,0,0.18)
    );
}

.message-delete-confirm-title {
  margin-bottom: 8px;

  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 900;

  color: #ff9a9a;
}

.message-delete-confirm-text {
  margin-bottom: 10px;

  color: rgba(255,255,255,0.82);

  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
}

.message-delete-confirm-warning {
  color: rgba(255,190,190,0.72);

  font-size: 12px;
  font-weight: 800;
}

.message-delete-confirm-danger-btn {
  background:
    linear-gradient(
      180deg,
      rgba(210,55,55,0.95),
      rgba(130,20,20,0.95)
    ) !important;

  color: white !important;

  border-color: rgba(255,120,120,0.6) !important;
}

/* ===== ENDE NACHRICHTEN LÖSCHEN BESTÄTIGUNG ===== */


/* ===== MARSCHVORBEREITUNG TRUPPENVERGLEICH ===== */

.worldmap-prepare-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;

  margin-top: 12px;
}

.worldmap-prepare-column {
  min-width: 0;
}

.worldmap-prepare-unit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 7px;
  padding: 9px 10px;

  border-radius: 10px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.055);
}

.worldmap-prepare-unit-row.enemy {
  border-color: rgba(255,125,110,0.16);
}

.worldmap-prepare-unit-row.own {
  border-color: rgba(142,230,164,0.16);
}

.worldmap-prepare-unit-main {
  min-width: 0;
}

.worldmap-prepare-unit-name {
  display: block;

  color: rgba(255,255,255,0.84);

  font-size: 12px;
  font-weight: 900;
}

.worldmap-unit-stats {
  margin-top: 3px;

  color: rgba(255,255,255,0.48);

  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
}

.worldmap-own-count {
  color: #8ee6a4;

  font-size: 13px;
  font-weight: 950;
}

.worldmap-prepare-empty {
  padding: 10px;

  border-radius: 10px;

  background: rgba(0,0,0,0.18);

  color: rgba(255,255,255,0.55);

  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 720px) {
  .worldmap-prepare-columns {
    grid-template-columns: 1fr;
  }
}

/* ===== ENDE MARSCHVORBEREITUNG TRUPPENVERGLEICH ===== */


/* ===== SCHWERE EINHEITEN BILDER ===== */

.barracks-unit-icon.barracks-unit-portrait {
  position: relative;

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

  overflow: hidden;
}

.barracks-unit-icon.barracks-unit-portrait img {
  position: absolute;

  width: 100%;
  height: 100%;

  object-fit: contain;

  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,0.55));
}

.barracks-unit-icon-fallback {
  position: relative;
  z-index: 1;
}

/* ===== ENDE SCHWERE EINHEITEN BILDER ===== */


/* ===== KASERNE UND ARMEE FENSTER-LAYOUT ===== */

.building-panel.barracks-expanded {
  width: min(1100px, calc(100vw - 48px));
  max-width: min(1100px, calc(100vw - 48px));
  height: auto;
  max-height: 82vh;

  padding: 22px;
}

.building-panel.barracks-expanded .barracks-training-box {
  padding: 18px;

  border-radius: 20px;
}

.building-panel.barracks-expanded .barracks-training-title {
  font-size: 19px;
}

.building-panel.barracks-expanded .barracks-training-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.building-panel.barracks-expanded .barracks-train-row {
  grid-template-columns: 100px 1fr;
}

.building-panel.barracks-expanded .barracks-train-preview {
  margin-top: 10px;
}

.barracks-unit-icon-fallback,
.barracks-unit-icon.barracks-unit-portrait > span,
.building-panel.barracks-expanded .barracks-unit-icon > span {
  display: none !important;
}

@media (max-width: 900px) {
  .building-panel.barracks-expanded .barracks-training-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== ENDE KASERNE UND ARMEE FENSTER-LAYOUT ===== */


/* ===== KASERNE AUSBILDUNG DETAILS ===== */

/* Zahlenfeld-Pfeile entfernen */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Karten-Grundoptik */
.building-panel.barracks-expanded .barracks-unit-card {
  position: relative;

  overflow: hidden;

  padding: 16px;

  border-radius: 18px;

  border: 1px solid rgba(240,208,96,0.20);

  background:
    radial-gradient(circle at 16% 12%, rgba(240,208,96,0.12), transparent 32%),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 22px rgba(0,0,0,0.28);
}

.building-panel.barracks-expanded .barracks-unit-card::before {
  content: "";

  position: absolute;

  left: 14px;
  right: 14px;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(240,208,96,0.72),
      transparent
    );

  opacity: 0.75;
}

.building-panel.barracks-expanded .barracks-unit-card:hover {
  border-color: rgba(240,208,96,0.42);

  background:
    radial-gradient(circle at 16% 12%, rgba(240,208,96,0.17), transparent 34%),
    linear-gradient(
      180deg,
      rgba(212,175,55,0.10),
      rgba(255,255,255,0.02)
    );
}

.building-panel.barracks-expanded .barracks-unit-head {
  margin-bottom: 12px;
  padding-bottom: 12px;

  border-bottom: 1px solid rgba(240,208,96,0.10);
}

.building-panel.barracks-expanded .barracks-unit-name {
  margin-bottom: 5px;

  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 0.4px;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 12px rgba(240,208,96,0.16);
}

.building-panel.barracks-expanded .barracks-unit-desc {
  max-width: 420px;

  color: rgba(255,255,255,0.66);

  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

/* Meta-Chips */
.building-panel.barracks-expanded .barracks-unit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 12px;
  margin-bottom: 8px;
}

.building-panel.barracks-expanded .barracks-unit-meta span,
.building-panel.barracks-expanded .barracks-unit-meta div {
  padding: 6px 9px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.30),
      rgba(255,255,255,0.035)
    );

  border: 1px solid rgba(240,208,96,0.15);

  color: rgba(255,255,255,0.72);

  font-size: 11px;
  font-weight: 900;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.building-panel.barracks-expanded .barracks-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  min-height: 34px;
  padding: 7px 11px;

  border-radius: 999px;
  border: 1px solid rgba(240,208,96,0.18);

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.34),
      rgba(255,255,255,0.04)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04);

  font-size: 12px;
  font-weight: 900;
}

.building-panel.barracks-expanded .barracks-meta-icon {
  width: 18px;
  min-width: 18px;

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

  font-size: 14px;
  line-height: 1;
}

.building-panel.barracks-expanded .barracks-meta-icon.hp {
  color: #78e08f;
}

.building-panel.barracks-expanded .barracks-meta-icon.attack {
  color: #f6c453;
}

.building-panel.barracks-expanded .barracks-meta-icon.defense {
  color: #8ecbff;
}

.building-panel.barracks-expanded .barracks-meta-value {
  color: rgba(255,255,255,0.86);

  font-size: 12px;
  font-weight: 950;
}

.building-panel.barracks-expanded .barracks-meta-special {
  width: 100%;
  margin-top: 4px;
  padding: 9px 11px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;

  border-radius: 12px;
  border: 1px solid rgba(212,175,55,0.18);

  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,0.08),
      rgba(0,0,0,0.18)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.building-panel.barracks-expanded .barracks-meta-special-label {
  color: #f0d060;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.building-panel.barracks-expanded .barracks-meta-special-text {
  color: rgba(255,255,255,0.74);

  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

/* Stats direkt aus HTML */
.building-panel.barracks-expanded .barracks-stats-panel {
  width: 100%;
  min-width: 0;
  margin-top: 12px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.building-panel.barracks-expanded .barracks-stat-chip {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;

  display: grid !important;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 6px !important;

  padding: 8px 9px !important;

  overflow: hidden;

  border-radius: 999px;
  border: 1px solid rgba(240,208,96,0.16);

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.36),
      rgba(255,255,255,0.04)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 5px 12px rgba(0,0,0,0.18);
}

.building-panel.barracks-expanded .barracks-stat-icon {
  width: 20px !important;
  min-width: 20px !important;

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

  text-align: center;

  font-size: 15px;
  line-height: 1;
}

.building-panel.barracks-expanded .barracks-stat-chip.hp .barracks-stat-icon {
  color: #7ee68f;
}

.building-panel.barracks-expanded .barracks-stat-chip.attack .barracks-stat-icon {
  color: #f0d060;
}

.building-panel.barracks-expanded .barracks-stat-chip.defense .barracks-stat-icon {
  color: #8ecbff;
}

.building-panel.barracks-expanded .barracks-stat-label {
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: rgba(255,255,255,0.48);

  font-size: 8.5px !important;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.15px !important;
  text-transform: uppercase;
}

.building-panel.barracks-expanded .barracks-stat-chip.defense .barracks-stat-label {
  font-size: 8px !important;
  letter-spacing: 0 !important;
}

.building-panel.barracks-expanded .barracks-stat-chip strong {
  justify-self: end;

  min-width: 26px;

  margin-left: 0 !important;

  color: rgba(255,255,255,0.90);

  font-size: 12px !important;
  font-weight: 950;
  line-height: 1;
  text-align: right;
}

.building-panel.barracks-expanded .barracks-special-box {
  grid-column: 1 / -1;

  margin-top: 2px;
  padding: 10px 12px;

  border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.22);

  background:
    radial-gradient(circle at top left, rgba(240,208,96,0.10), transparent 38%),
    linear-gradient(
      180deg,
      rgba(212,175,55,0.075),
      rgba(0,0,0,0.20)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045);
}

.building-panel.barracks-expanded .barracks-special-label {
  margin-bottom: 4px;

  color: #f0d060;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.building-panel.barracks-expanded .barracks-special-text {
  color: rgba(255,255,255,0.74);

  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

/* Training-Controls */
.building-panel.barracks-expanded .barracks-train-row {
  margin-top: 12px;
  padding-top: 12px;

  border-top: 1px solid rgba(255,255,255,0.055);
}

.building-panel.barracks-expanded .barracks-train-preview,
.building-panel.barracks-expanded .barracks-unit-cost,
.building-panel.barracks-expanded .barracks-unit-costs {
  border-radius: 12px;

  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.055);
}

.building-panel.barracks-expanded input[type="number"] {
  height: 42px;

  padding: 0 12px;

  border-radius: 12px;
  border: 1px solid rgba(240,208,96,0.28);

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.42),
      rgba(0,0,0,0.26)
    );

  color: #f5f1dc;

  font-size: 16px;
  font-weight: 900;
  text-align: center;

  outline: none;

  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.45),
    0 0 0 rgba(240,208,96,0);
}

.building-panel.barracks-expanded input[type="number"]:focus {
  border-color: rgba(240,208,96,0.72);

  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.45),
    0 0 14px rgba(240,208,96,0.18);
}

.building-panel.barracks-expanded .barracks-train-btn,
.building-panel.barracks-expanded button[onclick*="train"],
.building-panel.barracks-expanded button[onclick*="Train"] {
  border-radius: 12px;

  font-family: 'Cinzel', serif;
  font-weight: 900;

  letter-spacing: 0.4px;

  box-shadow:
    0 8px 16px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

.building-panel.barracks-expanded .barracks-train-btn:hover,
.building-panel.barracks-expanded button[onclick*="train"]:hover,
.building-panel.barracks-expanded button[onclick*="Train"]:hover {
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .building-panel.barracks-expanded .barracks-stats-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ===== ENDE KASERNE AUSBILDUNG DETAILS ===== */


/* ===== KASERNE SOLDATENBILD INDIVIDUELL ===== */

/*
  Hier kannst du jedes Soldatenbild einzeln einstellen.

  left   = nach links/rechts
  bottom = nach oben/unten
  width  = Bildbreite
  height = Bildhöhe
  card-image-space = Abstand für Text rechts
*/

.building-panel.barracks-expanded .barracks-unit-card {
  --card-image-space: 148px;
  --unit-art-left: -18px;
  --unit-art-bottom: -10px;
  --unit-art-width: 188px;
  --unit-art-height: 242px;

  position: relative !important;
  overflow: hidden !important;

  min-height: 230px;

  padding-left: var(--card-image-space) !important;

  background:
    radial-gradient(circle at 8% 50%, rgba(240,208,96,0.14), transparent 34%),
    linear-gradient(
      90deg,
      rgba(16,10,28,0.50) 0%,
      rgba(16,10,28,0.25) 28%,
      rgba(255,255,255,0.035) 100%
    ) !important;
}

.building-panel.barracks-expanded .barracks-unit-card::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(16,10,28,0.00) 0%,
      rgba(16,10,28,0.08) 18%,
      rgba(16,10,28,0.54) 40%,
      rgba(16,10,28,0.00) 100%
    );

  z-index: 1;
}

.building-panel.barracks-expanded .barracks-unit-head,
.building-panel.barracks-expanded .barracks-unit-info,
.building-panel.barracks-expanded .barracks-stats-panel,
.building-panel.barracks-expanded .barracks-special-box,
.building-panel.barracks-expanded .barracks-unit-meta,
.building-panel.barracks-expanded .barracks-train-row,
.building-panel.barracks-expanded .barracks-train-preview,
.building-panel.barracks-expanded .barracks-train-btn {
  position: relative;
  z-index: 2;
}

.building-panel.barracks-expanded .barracks-unit-head {
  display: block !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px;
}

.building-panel.barracks-expanded .barracks-unit-icon.barracks-unit-portrait {
  position: absolute !important;

  left: var(--unit-art-left) !important;
  bottom: var(--unit-art-bottom) !important;

  width: var(--unit-art-width) !important;
  height: var(--unit-art-height) !important;

  overflow: visible !important;

  border: none !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  z-index: 0 !important;
}

.building-panel.barracks-expanded .barracks-unit-icon.barracks-unit-portrait img {
  position: absolute !important;

  left: 0 !important;
  bottom: 0 !important;

  width: var(--unit-art-width) !important;
  height: var(--unit-art-height) !important;

  object-fit: contain !important;
  object-position: left bottom !important;

  transform: none !important;

  opacity: 0.98;

  filter:
    drop-shadow(0 10px 14px rgba(0,0,0,0.72))
    drop-shadow(0 0 14px rgba(240,208,96,0.10)) !important;
}

/* ===== EINZELWERTE: LEICHTE EINHEITEN ===== */

.building-panel.barracks-expanded .barracks-unit-card.unit-cavalry.tier-light {
  --card-image-space: 148px;
  --unit-art-left: -190px;
  --unit-art-bottom: -100px;
  --unit-art-width: 258px;
  --unit-art-height: 312px;
}

.building-panel.barracks-expanded .barracks-unit-card.unit-swordsman.tier-light,
.building-panel.barracks-expanded .barracks-unit-card.unit-spearman.tier-light,
.building-panel.barracks-expanded .barracks-unit-card.unit-archer.tier-light {
  --card-image-space: 148px;
  --unit-art-left: -170px;
  --unit-art-bottom: -100px;
  --unit-art-width: 238px;
  --unit-art-height: 292px;
}


/* ===== EINZELWERTE: SCHWERE EINHEITEN ===== */

.building-panel.barracks-expanded .barracks-unit-card.unit-cavalry.tier-heavy {
  --card-image-space: 148px;
  --unit-art-left: -190px;
  --unit-art-bottom: -100px;
  --unit-art-width: 238px;
  --unit-art-height: 292px;
}

.building-panel.barracks-expanded .barracks-unit-card.unit-swordsman.tier-heavy,
.building-panel.barracks-expanded .barracks-unit-card.unit-spearman.tier-heavy,
.building-panel.barracks-expanded .barracks-unit-card.unit-archer.tier-heavy {
  --card-image-space: 148px;
  --unit-art-left: -170px;
  --unit-art-bottom: -100px;
  --unit-art-width: 238px;
  --unit-art-height: 292px;
}


@media (max-width: 900px) {
  .building-panel.barracks-expanded .barracks-unit-card {
    --card-image-space: 120px;
    --unit-art-left: -22px;
    --unit-art-bottom: -8px;
    --unit-art-width: 160px;
    --unit-art-height: 224px;
  }
}

/* ===== ENDE KASERNE SOLDATENBILD INDIVIDUELL ===== */


/* ===== ARMEEÜBERSICHT SOLDATENBILD INDIVIDUELL ===== */

/*
  Armeeübersicht:
  Hier kannst du jedes Soldatenbild einzeln einstellen.

  --army-text-space   = Platz für Text rechts vom Bild
  --army-art-left     = Bild links/rechts
  --army-art-bottom   = Bild hoch/runter
  --army-art-width    = Bildbreite
  --army-art-height   = Bildhöhe
*/

.army-unit-row {
  --army-text-space: 94px;
  --army-art-left: -8px;
  --army-art-bottom: -8px;
  --army-art-width: 104px;
  --army-art-height: 104px;

  overflow: hidden;
}

.army-unit-main {
  position: relative;

  min-height: 86px;
  padding-left: var(--army-text-space);

  overflow: visible;
}

.army-unit-text {
  position: relative;
  z-index: 2;
}

/* Portrait wird wie kleines Artwork links in die Zeile eingebaut */
.army-unit-portrait {
  position: absolute !important;

  left: var(--army-art-left) !important;
  bottom: var(--army-art-bottom) !important;

  width: var(--army-art-width) !important;
  height: var(--army-art-height) !important;

  overflow: visible !important;

  border: none !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  z-index: 1;
}

.army-unit-portrait img {
  position: absolute !important;

  left: 0 !important;
  bottom: 0 !important;

  width: var(--army-art-width) !important;
  height: var(--army-art-height) !important;

  object-fit: contain !important;
  object-position: left bottom !important;

  transform: none !important;

  opacity: 0.98;

  filter:
    drop-shadow(0 7px 10px rgba(0,0,0,0.66))
    drop-shadow(0 0 10px rgba(240,208,96,0.08)) !important;
}


/* ===== EINZELWERTE: LEICHTE EINHEITEN ===== */

.army-unit-row.unit-cavalry.tier-light {
  --army-text-space: 100px;
  --army-art-left: -12px;
  --army-art-bottom: -10px;
  --army-art-width: 112px;
  --army-art-height: 112px;
}

.army-unit-row.unit-swordsman.tier-light,
.army-unit-row.unit-spearman.tier-light,
.army-unit-row.unit-archer.tier-light {
  --army-text-space: 94px;
  --army-art-left: -8px;
  --army-art-bottom: -8px;
  --army-art-width: 104px;
  --army-art-height: 104px;
}


/* ===== EINZELWERTE: SCHWERE EINHEITEN ===== */

.army-unit-row.unit-cavalry.tier-heavy {
  --army-text-space: 104px;
  --army-art-left: -14px;
  --army-art-bottom: -8px;
  --army-art-width: 98px;
  --army-art-height: 98px;
}

.army-unit-row.unit-swordsman.tier-heavy,
.army-unit-row.unit-spearman.tier-heavy,
.army-unit-row.unit-archer.tier-heavy {
  --army-text-space: 98px;
  --army-art-left: -10px;
  --army-art-bottom: -10px;
  --army-art-width: 110px;
  --army-art-height: 110px;
}


@media (max-width: 900px) {
  .army-unit-row {
    grid-template-columns: 1fr;

    --army-text-space: 96px;
    --army-art-left: -10px;
    --army-art-bottom: -8px;
    --army-art-width: 108px;
    --army-art-height: 108px;
  }

  .army-unit-main {
    min-height: 90px;
  }
}

/* ===== ENDE ARMEEÜBERSICHT SOLDATENBILD INDIVIDUELL ===== */


/* ===== RÄUBERLAGER COOLDOWN STYLE ===== */

.worldmap-cooldown-box {
  margin: 12px 0 4px;
  padding: 11px 13px;

  border-radius: 14px;
  border: 1px solid rgba(142,203,255,0.22);

  background:
    radial-gradient(circle at top left, rgba(142,203,255,0.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.18));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.worldmap-cooldown-label {
  margin-bottom: 4px;

  color: #8ecbff;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.worldmap-cooldown-text {
  color: rgba(255,255,255,0.72);

  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.worldmap-cooldown-countdown {
  color: #f0d060;
}

.item-use-yes.worldmap-cooldown-disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

/* ===== ENDE RÄUBERLAGER COOLDOWN STYLE ===== */


/* ===== NEUIGKEITEN SYSTEM ===== */

.news-btn {
  position: fixed !important;

  right: var(--news-btn-right, 410px) !important;
  bottom: 18px !important;

  z-index: 130 !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  width: auto;
  height: auto;

  background: transparent;
  border: none;
  padding: 0;

  cursor: pointer;

  opacity: 1 !important;
  visibility: visible !important;

  transition: all 0.2s;
}

.news-btn:hover {
  transform: scale(1.08);
}

.news-btn-icon-img {
  width: 74px;
  height: 74px;

  object-fit: contain;

  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.65));
}

.news-btn-no-image::before {
  content: "📰";

  width: 74px;
  height: 74px;

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

  font-size: 52px;

  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.65));
}

.news-btn-label {
  font-family: 'Cinzel', serif;

  font-size: 12px;
  font-weight: 700;

  color: #d4af37;

  letter-spacing: 1px;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.8);
}

.news-window {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 170;

  width: min(1100px, calc(100vw - 48px));
  max-height: 82vh;

  display: none;

  padding: 22px;

  overflow: hidden;

  background:
    radial-gradient(circle at top, rgba(212,175,55,0.10), transparent 34%),
    linear-gradient(
      180deg,
      rgba(15, 13, 30, 0.97),
      rgba(8, 8, 18, 0.97)
    );

  border: 2px solid rgba(212, 175, 55, 0.34);
  border-radius: 22px;

  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);

  backdrop-filter: blur(6px);

  animation: modalPopup 0.22s ease;
}

.news-header {
  display: flex;
  align-items: center !important;
  justify-content: space-between;

  gap: 16px;

  padding-bottom: 14px;
  margin-bottom: 18px;

  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.news-title {
  margin: 0;

  font-family: 'Cinzel', serif;
  font-size: var(--news-title-font-size, 30px);
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 1px;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.85),
    0 0 18px rgba(240,208,96,0.18);
}

.news-subtitle {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.news-close {
  width: 34px;
  height: 34px;

  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 10px;

  background: rgba(0,0,0,0.25);

  color: #f0d060;

  cursor: pointer;

  font-weight: 900;
}

.news-close:hover {
  background: rgba(212,175,55,0.12);
}

.news-content-frame {
  padding: 14px;

  border-radius: 18px;
  border: 1px solid rgba(212,175,55,0.18);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.035),
      rgba(0,0,0,0.18)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.news-content {
  max-height: calc(82vh - 170px);

  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 8px;
}

.news-content::-webkit-scrollbar {
  width: 8px;
}

.news-content::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}

.news-content::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.35);
  border-radius: 999px;
}

.news-content::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,0.55);
}

.news-entry {
  margin-bottom: 14px;
  padding: 18px;

  border-radius: 16px;
  border: 1px solid rgba(212,175,55,0.16);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 18px rgba(0,0,0,0.24);
}

.news-entry:last-child {
  margin-bottom: 0;
}

.news-entry-date {
  margin-bottom: 7px;

  color: rgba(240,208,96,0.62);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 1px;
  text-transform: uppercase;
}

.news-entry-title {
  margin: 0 0 10px;

  font-family: 'Cinzel', serif;
  font-size: 19px;
  font-weight: 900;

  color: #f0d060;

  letter-spacing: 0.4px;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.75);
}

.news-entry-text {
  color: rgba(255,255,255,0.72);

  font-size: 14px;
  font-weight: 750;
  line-height: 1.7;
}

.news-empty {
  padding: 42px 18px;

  border-radius: 16px;
  border: 1px dashed rgba(212,175,55,0.22);

  color: rgba(255,255,255,0.64);

  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

body.choosing-faction .news-btn {
  display: none !important;
}

@media (max-width: 900px) {
  :root {
    --news-btn-right: 390px;
    --news-title-font-size: 24px;
  }
}

/* ===== ENDE NEUIGKEITEN SYSTEM ===== */

/* ===== NEUIGKEITEN AUTO POPUP STYLE ===== */

.news-footer {
  margin-top: 14px;
  padding-top: 14px;

  display: flex;
  justify-content: flex-end;

  border-top: 1px solid rgba(212,175,55,0.16);
}

.news-dont-show-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 9px 12px;

  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.18);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(0,0,0,0.16)
    );

  color: rgba(255,255,255,0.62);

  font-size: 12px;
  font-weight: 850;

  cursor: pointer;
  user-select: none;
}

.news-dont-show-label:hover {
  color: #f0d060;
  border-color: rgba(212,175,55,0.34);
}

.news-dont-show-label input {
  display: none;
}

.news-checkmark {
  position: relative;

  width: 18px;
  height: 18px;

  border-radius: 6px;
  border: 1px solid rgba(212,175,55,0.42);

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.36),
      rgba(255,255,255,0.035)
    );
}

.news-dont-show-label input:checked + .news-checkmark {
  border-color: rgba(240,208,96,0.86);

  background:
    linear-gradient(
      180deg,
      #f0d060,
      #b88a18
    );
}

.news-dont-show-label input:checked + .news-checkmark::after {
  content: "✓";

  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -54%);

  color: #1a1a2e;

  font-size: 14px;
  font-weight: 1000;
}

/* ===== ENDE NEUIGKEITEN AUTO POPUP STYLE ===== */

/* ===== NEUIGKEITEN DETAIL ===== */



/* Altes schwarzes "Lesen" ausblenden, falls es noch irgendwo vorhanden ist */
.news-entry-open {
  display: none !important;
}

.news-entry-mainline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;

  width: 100%;
}

.news-entry-title-wrap {
  min-width: 0;
}

.news-open-btn {
  flex-shrink: 0;

  min-width: 92px;

  padding: 9px 14px;

  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.30);

  background:
    linear-gradient(
      180deg,
      rgba(240,208,96,0.16),
      rgba(0,0,0,0.24)
    );

  color: #f0d060;

  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.7px;
  text-transform: uppercase;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 6px 14px rgba(0,0,0,0.24);

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.news-open-btn:hover {
  transform: translateY(-1px);

  border-color: rgba(240,208,96,0.55);

  background:
    linear-gradient(
      180deg,
      rgba(240,208,96,0.26),
      rgba(0,0,0,0.24)
    );
}

.news-entry-clickable {
  cursor: pointer;
}

.news-entry-clickable:hover .news-open-btn {
  border-color: rgba(240,208,96,0.55);
}

.news-entry-detail {
  margin-bottom: 0;
}

.news-entry-text.detail {
  margin-top: 12px;
  padding-top: 14px;

  border-top: 1px solid rgba(212,175,55,0.12);

  color: rgba(255,255,255,0.76);

  font-size: 14px;
  font-weight: 750;
  line-height: 1.75;
}

.news-detail-actions {
  display: flex;
  justify-content: flex-end;

  margin-top: 16px;
  padding-top: 14px;

  border-top: 1px solid rgba(212,175,55,0.14);
}

.news-back-btn {
  padding: 10px 15px;

  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.26);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(0,0,0,0.18)
    );

  color: rgba(255,255,255,0.74);

  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 14px rgba(0,0,0,0.22);
}

.news-back-btn:hover {
  color: #f0d060;
  border-color: rgba(240,208,96,0.50);
}

/* ===== ENDE NEUIGKEITEN DETAIL ===== */

/* ===== NEUIGKEITEN FORMATIERTER TEXT ===== */

.news-entry-text.detail strong {
  color: #f0d060;
  font-weight: 950;
}

.news-entry-text.detail u {
  text-decoration-color: rgba(240,208,96,0.72);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.news-entry-text.detail .news-green,
.news-entry-text.detail span[style*="color"] {
  font-weight: 900;
  text-shadow:
    0 0 10px rgba(120,224,143,0.16);
}

/* ===== ENDE NEUIGKEITEN FORMATIERTER TEXT ===== */


/* ===== KASERNE KOSTEN PRO EINHEIT STYLE ===== */

.barracks-cost-single {
  margin-left: 4px;

  color: rgba(255,255,255,0.42);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.2px;
}

/* ===== ENDE KASERNE KOSTEN PRO EINHEIT STYLE ===== */


/* ===== COMBAT REPORT DETAIL ===== */

.combat-report-v2 {
  max-width: 760px;

  scrollbar-width: thin;
  scrollbar-color: rgba(240, 210, 96, 0.75) rgba(10, 12, 18, 0.55);
}

.combat-report-hero-v2 {
  padding: 18px;
  margin-bottom: 10px;

  border-radius: 18px;
  border: 1px solid rgba(240, 210, 120, 0.28);

  background:
    radial-gradient(circle at top left, rgba(240, 210, 120, 0.18), transparent 42%),
    rgba(15, 20, 22, 0.92);

  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.35);
}

.combat-report-hero-v2.win {
  border-color: rgba(130, 220, 140, 0.36);
}

.combat-report-hero-v2.loss {
  border-color: rgba(230, 95, 95, 0.42);
}

.combat-report-kicker-v2,
.combat-report-sub-v2,
.combat-system-note-v2 {
  display: none !important;
}

.combat-report-title-v2 {
  color: #f3df9b;

  font-size: 22px !important;
  font-weight: 900;
  line-height: 1.2;

  text-align: center !important;
}

.combat-report-date-v2 {
  margin-bottom: 12px;
}

.combat-stat-grid-v2 {
  display: flex !important;
  justify-content: center !important;

  margin: 14px 0 16px !important;
}

.combat-stat-grid-v2 .combat-stat-card-v2:not(:first-child) {
  display: none !important;
}

.combat-stat-grid-v2 .combat-stat-card-v2:first-child {
  width: min(360px, 100%) !important;
  min-height: 88px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 18px 10px !important;

  text-align: center !important;

  border-radius: 20px !important;
  border: 1px solid rgba(240, 210, 96, 0.24) !important;

  background:
    radial-gradient(circle at top, rgba(240, 210, 96, 0.16), transparent 58%),
    rgba(8, 14, 16, 0.74) !important;

  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.28) !important;
}

.combat-stat-grid-v2 .combat-stat-card-v2:first-child span {
  display: none !important;
}

.combat-stat-grid-v2 .combat-stat-card-v2:first-child strong {
  display: block;

  font-size: 30px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.55) !important;
}

.combat-report-section-v2 {
  margin-top: 12px;
  padding: 12px;

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(0, 0, 0, 0.18);

  color: #f3f3f3 !important;
}

.combat-report-section-title-v2 {
  margin-bottom: 9px;

  color: #f0d060;

  font-weight: 900;
}

.combat-unit-table-v2 {
  display: grid;
  gap: 5px;
}

.combat-unit-row-v2 {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) 0.7fr 0.7fr 0.7fr;
  align-items: center;
  gap: 8px;

  padding: 7px 8px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.045);

  color: #f3f3f3 !important;

  font-size: 13px;
}

.combat-unit-row-v2 span,
.combat-unit-row-v2 strong,
.combat-unit-name-v2 {
  color: #f3f3f3 !important;
}

.combat-unit-head-v2 {
  background: rgba(240, 210, 96, 0.12);

  color: #f0d060 !important;

  font-size: 12px;
  font-weight: 900;
}

.combat-unit-head-v2 span {
  color: #f0d060 !important;
}

.combat-unit-name-v2 {
  font-weight: 800;
}

.combat-good-v2 {
  color: #9cffb0 !important;
}

.combat-bad-v2 {
  color: #ff9f9f !important;
}

.combat-unit-row-v2 span.combat-bad-v2 {
  color: #ff8f8f !important;
}

.combat-unit-row-v2 span.combat-survived-v2 {
  color: #9cffb0 !important;
}

.combat-report-empty-v2,
.message-detail-row,
.message-detail-row span,
.message-detail-row strong {
  color: #f3f3f3 !important;
}

.combat-report-empty-v2 {
  opacity: 0.75;

  padding: 4px 0;

  font-size: 13px;
}

.combat-loot-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.combat-loot-item-v2 {
  padding: 9px;

  border-radius: 12px;
  border: 1px solid rgba(240, 210, 96, 0.13);

  background: rgba(240, 210, 96, 0.10);
}

.combat-loot-item-v2 span {
  display: block;

  font-size: 12px;

  opacity: 0.75;
}

.combat-loot-item-v2 strong {
  display: block;

  margin-top: 3px;

  color: #f0d060;
}

.combat-bonus-list-v2 {
  display: grid;
  gap: 6px;
}

.combat-bonus-item-v2 {
  padding: 8px 9px;

  border-radius: 10px;
  border: 1px solid rgba(100, 170, 220, 0.14);

  background: rgba(100, 170, 220, 0.10);

  font-size: 13px;
  line-height: 1.35;
}

#messages-window,
.messages-window,
#messages-list,
.message-detail {
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 210, 96, 0.75) rgba(10, 12, 18, 0.55);
}

#messages-window::-webkit-scrollbar,
.messages-window::-webkit-scrollbar,
#messages-list::-webkit-scrollbar,
.message-detail::-webkit-scrollbar,
.combat-report-v2::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

#messages-window::-webkit-scrollbar-track,
.messages-window::-webkit-scrollbar-track,
#messages-list::-webkit-scrollbar-track,
.message-detail::-webkit-scrollbar-track,
.combat-report-v2::-webkit-scrollbar-track {
  background: rgba(10, 12, 18, 0.55);
  border-radius: 999px;
  border: 1px solid rgba(240, 210, 96, 0.08);
}

#messages-window::-webkit-scrollbar-thumb,
.messages-window::-webkit-scrollbar-thumb,
#messages-list::-webkit-scrollbar-thumb,
.message-detail::-webkit-scrollbar-thumb,
.combat-report-v2::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      rgba(240, 210, 96, 0.95),
      rgba(148, 108, 38, 0.9)
    );

  border-radius: 999px;
  border: 2px solid rgba(10, 12, 18, 0.85);
}

#messages-window::-webkit-scrollbar-thumb:hover,
.messages-window::-webkit-scrollbar-thumb:hover,
#messages-list::-webkit-scrollbar-thumb:hover,
.message-detail::-webkit-scrollbar-thumb:hover,
.combat-report-v2::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 232, 130, 1),
      rgba(184, 135, 42, 1)
    );
}

@media (max-width: 700px) {
  .combat-unit-row-v2 {
    grid-template-columns: minmax(120px, 1.4fr) 0.7fr 0.7fr 0.7fr;
    font-size: 12px;
  }

  .combat-loot-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== ENDE COMBAT REPORT DETAIL ===== */


/* ===== VERDANTORIA ARMY BUTTON SLIGHTLY LOWER ===== */
.army-btn {
  top: 88px !important;
}
/* ===== ENDE VERDANTORIA ARMY BUTTON SLIGHTLY LOWER ===== */


/* ============================================
   VERDANTORIA HOMEPAGE
   ============================================ */

.landing-content.lc-v2 {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

/* ===== HOMEPAGE HERO ===== */
.lv2-hero {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 55vh !important;

  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  overflow: visible !important;
}

.lv2-hero-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.lv2-hero-bg-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
}

.lv2-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(to bottom,
      rgba(8,8,20,0.35) 0%,
      rgba(8,8,20,0.15) 40%,
      rgba(8,8,20,0.60) 85%,
      rgba(8,8,20,0.95) 100%
    ),
    linear-gradient(to right,
      rgba(8,8,20,0.60) 0%,
      transparent 25%,
      transparent 75%,
      rgba(8,8,20,0.60) 100%
    );
}

/* ===== HOMEPAGE CHARAKTERE ===== */
.lv2-hero-char {
  position: fixed !important;
  bottom: 100px !important;
  z-index: 4 !important;

  width: clamp(520px, 25vw, 450px) !important;
  height: 130vh !important;

  pointer-events: none !important;
  overflow: visible !important;
}

.lv2-hero-char img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  display: block !important;
}

.lv2-hero-char--left {
  left: 0 !important;
}

.lv2-hero-char--right {
  right: 0 !important;
}

/* ===== HOMEPAGE MITTE ===== */
.lv2-hero-center {
  position: relative !important;
  z-index: 3 !important;

  display: flex !important;
  flex: unset !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px;
  text-align: center;

  padding: 20px 20px 40px !important;
}

.lv2-logo-img {
  width: 40vw !important;
  max-width: 600px !important;
  min-width: 280px !important;
  height: auto !important;

  display: block !important;

  margin-top: -200px !important;
  margin-bottom: 20px !important;
}

.lv2-hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;

  margin-top: -90px !important;
}

/* ===== HOMEPAGE BILDBUTTONS ===== */
.lv2-btn-img {
  background: none !important;
  border: none !important;
  padding: 0 !important;

  cursor: pointer !important;

  transition: transform 0.15s ease, filter 0.15s ease !important;
  box-shadow: none !important;
}

.lv2-btn-img img {
  height: 70px !important;
  width: auto !important;
  display: block !important;
}

.lv2-btn-img:hover {
  transform: scale(1.05) !important;
  filter: brightness(1.15) !important;
}

.lv2-btn-img:active {
  transform: scale(0.97) !important;
}

#lv2-login-btn {
  position: relative !important;
  top: 0 !important;
  left: 43px !important;
}

#lv2-login-btn img {
  height: 70px !important;
}

#lv2-register-btn {
  position: relative !important;
  top: 0 !important;
  left: 13px !important;
}

#lv2-register-btn img {
  height: 55px !important;
}

#lv2-play-btn {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

#lv2-play-btn img {
  height: 70px !important;
}

/* ===== HOMEPAGE FEATURE-BILDER ===== */
.lv2-features-img {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-end !important;

  gap: 16px !important;
  padding: 20px !important;

  position: relative !important;
  z-index: 5 !important;

  width: 100% !important;
  background: transparent !important;
}

.lv2-fcard {
  background: none !important;
  border: none !important;
  padding: 0 !important;

  cursor: pointer !important;

  transition: transform 0.2s ease, filter 0.2s ease !important;
  position: relative !important;
}

.lv2-fcard img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.lv2-fcard:hover {
  transform: translateY(-4px) scale(1.02) !important;
  filter: brightness(1.1) !important;
}

#fcard-1 {
  width: 350px;
  top: -150px;
  left: 140px;
}

#fcard-2 {
  width: 350px;
  top: -150px;
  left: 170px;
}

#fcard-3 {
  width: 350px;
  top: -150px;
  left: 200px;
}

#fcard-4 {
  width: 350px;
  top: -150px;
  left: 230px;
}

#fcard-5 {
  width: 350px;
  top: -150px;
  left: 0;
}

/* ===== HOMEPAGE NAVBAR ===== */
.lv2-topnav-minimal {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;

  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;

  width: auto !important;
  padding: 12px 20px !important;

  z-index: 50 !important;
}

.lv2-user-chip:not([style*="display:none"]) {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  padding: 8px 16px !important;

  background: rgba(10, 8, 5, 0.75) !important;
  border: 1px solid rgba(200, 168, 75, 0.4) !important;
  border-radius: 999px !important;

  color: #C8A84B !important;

  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;

  backdrop-filter: blur(8px);
  transition: all 0.18s ease;
}

.lv2-user-chip:hover {
  background: rgba(200, 168, 75, 0.15) !important;
  border-color: rgba(200, 168, 75, 0.7) !important;
}

/* ===== HOMEPAGE ALPHA TEXT ===== */
#lv2-alpha-text {
  font-family: 'Cinzel', serif !important;
  font-size: 18px !important;
  color: #C8A84B !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;

  position: fixed !important;
  bottom: 12px !important;
  left: 50% !important;
  top: auto !important;
  z-index: 999 !important;

  display: block !important;
  text-align: center !important;

  margin: 20px auto !important;

  opacity: 0.75 !important;
  transform: translateX(-50%) !important;
  text-shadow: 0 0 12px rgba(200,168,75,0.4) !important;
}
/* ===== ENDE HOMEPAGE ===== */


/* ===== QUESTGEBER GRUPPIERUNG ===== */
.quest-giver-group {
  margin-bottom: 18px;
}

.quest-giver-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;

  margin: 4px 2px 10px;
  padding: 8px 10px;

  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(212,175,55,0.10), rgba(20,14,24,0.32));
}

.quest-giver-name {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 14px;
  color: #f3d37a;
  letter-spacing: 0.4px;
}

.quest-giver-line {
  font-size: 11px;
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.quest-giver-group .quest-item {
  margin-left: 8px;
}


/* ===== QUESTLOG SCROLLBAR ===== */
.quest-log {
  max-height: min(78vh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.quest-log::-webkit-scrollbar {
  width: 8px;
}

.quest-log::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}

.quest-log::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.35);
  border-radius: 999px;
}

.quest-log::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,0.55);
}
/* ===== ENDE QUESTLOG SCROLLBAR ===== */


/* ===== SAMMELQUEST FORTSCHRITT ===== */
.quest-item-progress {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(212,175,55,0.16);
  border-radius: 10px;
  background: rgba(20,14,24,0.38);
}

.quest-progress-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

.quest-progress-row strong {
  color: #f3d37a;
  font-weight: 800;
}

.quest-progress-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}

.quest-progress-bar {
  margin-top: 7px;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.06);
}

.quest-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212,175,55,0.55), rgba(125,223,100,0.72));
}
/* ===== ENDE SAMMELQUEST FORTSCHRITT ===== */