/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/styles.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
/* ==== Military Grey Theme (Auth) ==== */
:root{
  --bg:#0b0f12;          /* near-black */
  --panel:#151b21;       /* dark slate */
  --panel-2:#1b232b;
  --text:#e5edf5;
  --muted:#9aa9b7;
  --line:#1f2a33;
  --accent:#a88f2a;      /* khaki/gold */
  --accent-2:#c9b24d;
  --danger:#ff6b6b;
  --ok:#2bd686;
}

html,body{ background:var(--bg); color:var(--text); }

/* Reset + Box-Sizing */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;                 /* <— verhindert die „Geister“-Scrollbar */
  background: var(--bg);
  color: var(--text);
}

.auth-wrap{
  min-height:100vh; display:grid; place-items:center;
  padding:24px; background:radial-gradient(60% 100% at 50% 0% , #131a20 0%, var(--bg) 60%);
}
.auth-card{
  width:560px; max-width:100%;
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line); border-radius:16px; padding:24px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.auth-title{ margin:0 0 12px; font-size:26px; font-weight:800; letter-spacing:.2px; }
.auth-subtle{ margin:0 0 18px; color:var(--muted); }
.auth-grid{ display:grid; grid-gap:12px; gap:12px; }
.auth-row-2{ display:grid; grid-template-columns:1fr 1fr; grid-gap:12px; gap:12px; }
@media (max-width:640px){ .auth-row-2{ grid-template-columns:1fr; } }

.input{
  background:#0f1419; color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none;
}
.input:focus{ border-color:#2d3b47; box-shadow:0 0 0 3px rgba(45,59,71,.4); }

.auth-actions{ margin-top:12px; display:grid; grid-gap:10px; gap:10px; }
.btn{
  height:44px; border-radius:12px; border:1px solid var(--line);
  background:#0f1419; color:var(--text); font-weight:700;
}
.btn:hover{ filter:brightness(1.05); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{ background:var(--accent); border-color:#7f6b1f; color:#0b0f12; }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--accent-2); }

.form-note{ font-size:14px; color:var(--muted); }

.rule-list{ margin:6px 0 0; padding-left:18px; line-height:1.55; font-size:14px; }
.rule-bad{ color:var(--danger); } .rule-good{ color:var(--ok); }

/* Bühne / Spielcontainer (optional) */
.stage-shell{ display:grid; place-items:center; padding:24px; }
.stage-16x9{ width:min(1200px, 100%); aspect-ratio:16/9; background:#0f1419; border:1px solid var(--line); border-radius:12px; position:relative; overflow:hidden; }

/* Typo: moderne, klare Sans */
:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

html, body, input, button, select, textarea {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { letter-spacing: .2px; }
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }
button { font-weight: 700; }

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================
   Center / Stage
   ========================================================= */

/* Zentriertes Layout + responsive 16:9 Bühne */
.site-center{
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  background: #0b0f14; /* dunkler App-Hintergrund */
}

.stage-shell{
  width: 100%;
  max-width: 1440px;             /* Deckel für große Bildschirme */
}

:root{
  --shell: 1440px;          /* Gesamtbreite */
  --stack-gap: 3px;        /* einheitlicher vertikaler Abstand */
  --page-pad-x: 16px;       /* seitliche Innenabstände */
  --hud-offset: 72px;    /* Höhe HUD/HeroBar (bei dir: anpassen falls nötig) */
  --footbar-h: 48px;
  --dock-h: 56px;
  --dock-gap: 8px;       /* gewünschter Abstand Dock→Footer: 5–10px */
  --side-w: 280px;       /* NEU: einstellbare Sidebar-Breite (links & rechts) */

  --dd-offset-y: 64px;       /* Abstand nach unten vom Button (vorher: 44px) */
  --dd-edge-gap-x: 2px;     /* globaler Abstand zum Seitenrand */

  /* optional: getrennte Ränder, überschreiben globalen Wert */
  --dd-left-gap-x:  var(--dd-edge-gap-x);
  --dd-right-gap-x: var(--dd-edge-gap-x);
  
  /* Surfaces / Typo (einheitlich für Content + Sidebars + Leisten) */
  --radius-md: 14px;
  --text-1: #e7eef5;
  --text-muted: #9aa9b7;

  /* Karten/Content/Sidebars */
  --surface-1-bg: rgba(20,22,28,0.6);
  --surface-1-bd: rgba(255,255,255,0.06);
  --surface-1-shadow: 0 4px 20px rgba(0,0,0,.25);

  /* Ein Ton für alle „Karten“ */
  --surface-rgb: 20,22,28;

  /* getrennt einstellbar: Content vs. Sidebars */
  --surface-content-alpha: .60;   /* Content-Transparenz   */
  --surface-sides-alpha:   .60;   /* Sidebars-Transparenz  */

  --surface-content-bg: rgba(var(--surface-rgb), var(--surface-content-alpha));
  --surface-sides-bg:   rgba(var(--surface-rgb), var(--surface-sides-alpha));

  --surface-content-bd: rgba(255,255,255,.06);
  --surface-sides-bd:   rgba(255,255,255,.06);

  --surface-content-blur: 6px;
  --surface-sides-blur:   6px;

  /* Leisten (HUD/Footbar) */
  --surface-0-bg: linear-gradient(180deg, rgba(9,12,16,.88), rgba(9,12,16,.70));
  --surface-0-bg-foot: linear-gradient(180deg, rgba(10,13,17,.80), rgba(10,13,17,.94));
  --surface-0-bd: rgba(255,255,255,.08);
  --surface-0-shadow-top: 0 -10px 28px rgba(0,0,0,.28);
  --surface-0-shadow-bottom: 0 10px 30px rgba(0,0,0,.28);

  --dock-width: 520px;
}

/* 16:9 Bühne */
.stage-16x9{
  width: 100%;
  aspect-ratio: 16 / 9;          /* Höhe ergibt sich automatisch */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(40,60,70,.35), transparent),
    linear-gradient(#0b0f14, #0b0f14);
  position: relative;            /* wichtig für HUD-Overlay */
}

/* Phaser füllt die Bühne */
#phaser-root{ width: 100%; height: 100%; }

/* =========================================================
   HUD (Overlay-Variante für Stage)
   ========================================================= */

.hud{
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 100;
  height: var(--hud-offset); min-height: var(--hud-offset);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: var(--surface-0-bg);
  border-bottom: 1px solid var(--surface-0-bd);
  box-shadow: var(--surface-0-shadow-bottom);
  display: flex; align-items: center;
  inset: 12px 12px auto 12px;   /* top, left, right */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  pointer-events: none;         /* durchklickbar, Buttons reaktivieren wir gezielt */
  padding: 0 16px;
  z-index: 2;
}

.hud-left, .hud-center, .hud-right { display:flex; align-items:center; gap:12px; }
.hud-left  { justify-content: flex-start; }
.hud-center{ justify-content: center; }
.hud-right { justify-content: flex-end; }

.hud-title{
  font-weight: 600;
  letter-spacing: .2px;
  color: #e7eef5;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Pillen */
.pill{
  pointer-events: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e7eef5;
  font-size: 14px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.pill-ghost{ background: transparent; }
.pill-gold{
  background: linear-gradient(180deg, #f5d37a, #cda850);
  color: #101418;
  border-color: rgba(0,0,0,.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.25);
}

/* XP-Bar */
.xpbar{
  position: relative;
  width: clamp(160px, 28vw, 360px);
  height: 12px;
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.xpbar-fill{
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #64b5ff, #71f3ff);
}
.xpbar-text{
  position:absolute; inset: 0;
  font-size: 11px; color:#dbe7f1;
  display:flex; align-items:center; justify-content:center;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* HUD mobil stapeln */
@media (max-width: 820px){
  .hud{
    grid-template-columns: 1fr;
    inset: 8px;
    gap: 8px;
  }
  .hud-left, .hud-center, .hud-right{
    justify-content: center;
    flex-wrap: wrap;
  }
  .xpbar{ width: clamp(160px, 80vw, 440px); }
}

.alert.warn{
  background:#221f12;
  border:1px solid #4a3f14;
  color:#e6d899;
  border-radius:12px;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.alert-actions{ display:flex; gap:10px; align-items:center; }
.btn.sm{ height:36px; padding:0 12px; border-radius:10px; }

/* optional: Mitte etwas höher */
.site-center { min-height: calc(100vh - 180px); }

/* HUD v2 – Desktop nur Titel; Mobil: Dropdowns links/rechts */
.hud .hud-mobile-only { display: none; pointer-events: auto; } /* HUD selbst ist durchklickbar */
.hud .menu, .hud .menu * { pointer-events: auto; }

.hud .menu > summary {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); cursor: pointer;
}
.hud .menu > summary::-webkit-details-marker { display: none; }
.hud .menu[open] > summary { filter: brightness(1.08); }

.hud .menu-panel {
  position: absolute;
  top: 42px; right: 0;
  background: #0f151a;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  padding: 8px;
  min-width: 280px;
  max-height: 70vh; overflow: auto;
  z-index: 50;
}
/* Linkes Dropdown nach links ausrichten */
.hud .menu.menu-left .menu-panel { left: 0; right: auto; }

@media (max-width: 820px){
  .hud .hud-mobile-only { display: flex; gap: 8px; }
  .hud { gap: 8px; padding: 0 10px; }
}


/* =========================================================
   Gameshell / Panels (Legacy-Layout)
   ========================================================= */

.gameshell{
  --gap: 16px;
  max-width: 1200px;
  margin: 16px auto;
  padding: var(--gap);
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  grid-gap: var(--gap);
  gap: var(--gap);
}

.panel{
  background: var(--surface-content-bg);
  border: 1px solid var(--surface-content-bd);
  border-radius: var(--radius-md);
  box-shadow: var(--surface-1-shadow);
  color: var(--text-1);
  padding: 12px;
}
.panel-title{
  margin: 0 0 10px 0;
  font-size: 14px;
  letter-spacing: .4px;
  color: #e2e8e6;
}
.panel-box{ padding: 8px; border:1px dashed #27302f; border-radius: 10px; }
.kv{ display:flex; justify-content:space-between; padding:4px 0; }
.muted{ color:#95a29f; font-size:12px; }

.build-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}
.btn-build{
  display:flex; align-items:center; gap:8px;
  width:100%; height:40px; padding:0 10px;
  border-radius:10px; border:1px solid #293231;
  background:#151a1a; color:#dfe7e5; cursor:pointer;
  transition:transform .05s ease, background .15s ease, border-color .15s ease;
}
.btn-build:hover{ background:#1a2020; border-color:#31403e; }
.btn-build.active{ background:#2a362e; border-color:#3b5046; }
.b-emoji{ width:22px; text-align:center; }

@media (max-width: 1100px){
  .gameshell{ grid-template-columns: 1fr; }
  .panel-center{ order: 1; }
  .panel-left{ order: 2; }
  .panel-right{ order: 3; }
  .map-wrap{ height: 60vh; }
}

/* =========================================================
   Hero Bar (Top, sticky) – CLEAN
   ========================================================= */

.hero-wrap{
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 120;
  --safe-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(180deg, rgba(11,15,20,.96), rgba(11,15,20,.86));
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-top: var(--safe-top);
}

/* 3-Spalten-Layout: links Icon, Mitte Titel, rechts Icon */
.hero.hero-grid3{
  max-width: 1440px; margin: 0 auto;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 12px 16px;
}

.hero .hero-slot{
  position: relative; /* Anker für absolute Panels */
  display:flex; align-items:center; justify-content:center;
}
.hero .hero-center{ display:flex; justify-content:center; align-items:center; }
.hero .hero-title{
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700; letter-spacing: 0.2px;
}

/* Trigger-Buttons (Icons) */
.hero .hero-menu > summary{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); cursor:pointer;
  z-index: 1; /* sicher klickbar */
}
.hero .hero-menu > summary::-webkit-details-marker{ display:none; }
.hero .hero-menu[open] > summary{ filter: brightness(1.08); }

/* Dropdown-Panel – EIN Container, eine Scrollbar */
.hero .hero-menu-panel{
  position:absolute; top:var(--dd-offset-y); right:0;
  background: rgba(12,16,21,.94);           /* dunkler, weniger transparent */
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.48);
  padding: 10px;
  min-width: min(92vw, 360px);
  overflow: auto;                           /* nur HIER scrollen */
  -webkit-overflow-scrolling: touch;
  z-index: 9999;
}

@media (max-width: 820px){
  .hero .hero-menu-panel{
    min-height: var(--dd-max-h);
  }
}

.hero .hero-menu.hero-menu-left  .hero-menu-panel{ 
  left:var(--dd-left-gap-x);
  right:auto;
  min-width: min(92vw, 240px); /* vorher 320/360 → ca. 1/3 weniger */
}
.hero .hero-menu.hero-menu-right .hero-menu-panel{
  right:var(--dd-right-gap-x); 
  left:auto; 
}	

/* Neutraler Innen-Wrapper (kein Kartenlook) */
.hero .hero-panel-scroll{ padding: 2px; display:block; }

/* Keine zweite Karte & keine eigene Scrollbar für Inhalte im Dropdown */
.hero .hero-menu-panel :where(.stats, [class*="stats"]){
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  background: transparent !important; /* verhindert doppelten Hintergrund */
  border: 0 !important;
  box-shadow: none !important;
  contain: none !important;
}
.hero .hero-menu-panel :where(.stats *, .nav *){
  max-height: none !important;
  overflow: visible !important;
}

/* LeftNav im Hero-Dropdown: innere Scrollbar & feste Höhe abschalten */
.hero .hero-menu-panel .dropdown-compact :where(.nav, [class*="nav"]){
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Desktop: Titel exakt mittig – Slots bleiben Platzhalter */
@media (min-width: 821px){
  .hero .hero-slot{ visibility: hidden; }
}

/* 821–1023px: linken Hero-Button (LeftNav) sichtbar machen */
@media (min-width: 821px) and (max-width: 1023px){
  .hero.hero-grid3 > .hero-slot:first-child{
    visibility: visible; /* überschreibt das "hidden" ab 821px */
  }
}

/* 821–1439px: Stats-Button (rechter Hero-Slot) anzeigen */
@media (min-width: 821px) and (max-width: 1439px){
  .hero.hero-grid3 > .hero-slot:last-child{
    visibility: visible; /* override der Desktop-„hidden“-Regel */
  }
}

/* ≥1440px: Stats-Button ausblenden (RightStats ist dann sichtbar) */
@media (min-width: 1440px){
  .hero.hero-grid3 > .hero-slot:last-child{
    visibility: hidden;
  }
}

/* Mobile: sichtbare Icons, etwas schmaleres Panel */
@media (max-width: 820px){
  .hero.hero-grid3{ padding: 8px 10px; }
  .hero .hero-slot{ visibility: visible; }
  .hero .hero-menu-panel{ min-width: min(92vw, 320px); }
}

/* hübscher Scrollbar nur für das Dropdown-Panel */
.hero .hero-menu-panel{
  /* Firefox / generisch */
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
/* WebKit (Chrome/Edge/Safari) */
.hero .hero-menu-panel::-webkit-scrollbar{ width: 8px; }
.hero .hero-menu-panel::-webkit-scrollbar-track{ background: transparent; }
.hero .hero-menu-panel::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.hero .hero-menu-panel::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.18));
}


/* (Optional) alte XP-Leiste im Hero deaktivieren, falls vorhanden */
.hero .xpbar { display: none !important; }

/* RightStats im Hero-Dropdown: keine zweite Karte im Inneren */
.hero .hero-menu.hero-menu-right .hero-menu-panel .dropdown-compact .panel,
.hero .hero-menu.hero-menu-right .hero-menu-panel .dropdown-compact [class*="card"],
.hero .hero-menu.hero-menu-right .hero-menu-panel .dropdown-compact [class*="section"],
.hero .hero-menu.hero-menu-right .hero-menu-panel .dropdown-compact [class*="box"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* etwas Luft links im aktiven Link (nur im Dropdown) */
.hero .hero-menu-panel .dropdown-compact [class*="navItem"],
.hero .hero-menu-panel .dropdown-compact [class*="navLink"]{
  padding-left: 6px !important;   /* Markierung hat nun Innenrand */
}
.hero .hero-menu-panel .dropdown-compact [class*="navIcon"]{
  margin-left: 2px !important;     /* Icon klebt nicht am Rand */
}

/* =========================================================
   Desktop 3-Spalten Shell (vereinheitlicht)
   ========================================================= */

html, body { height: 100%; } /* robust für ältere Browser */

/* Page Grid: Header | Content | Footer */
.page-shell{
  min-height: 100dvh;          /* <<< statt 'height' für Body-Scroll */
  overflow:visible;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-row-gap: var(--stack-gap);
  row-gap: var(--stack-gap);
  /* normale Browser-Scrollbar */
  --bottom-stack: calc(
    var(--footbar-h, 44px) +
    var(--dock-h, 72px) +
    var(--dock-gap, 12px) +
    env(safe-area-inset-bottom)
  );  
}

/* Shell in der Content-Zeile */
.desk-shell{
  width: 100%;
  /* keine feste Höhe & kein Overflow: Seite scrollt natürlich */
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  grid-template-rows: 1fr auto;
  grid-gap: 16px;
  gap: 16px;
  max-width: var(--shell);
  margin: 0 auto;
  align-items: stretch;
  padding-block: var(--stack-gap);
  padding-inline: var(--page-pad-x);
}

/* Linke/rechte Panels über volle Spaltenhöhe */
.desk-left .panel,
.desk-right .panel{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Content ohne Bubble-Hintergrund */
.content-plain{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Alternativ: alle Panels nur in der Mitte neutralisieren */
.desk-main .panel{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Mittlere Spalte als Flex-Column -> Dock nach unten drücken */
.desk-main{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Dock-Layout in der mittleren Zelle (nicht fixed) */
.action-dock{
  width: 100%;
  padding: 8px 0 6px;
}
.action-dock .dock-label{ text-align:center; margin-bottom:6px; }
.action-dock .xpbar{ width:100%; margin:0 0 10px; }

/* Feuer-Button – finale Version (Duplikate zusammengeführt) */
.fire-zone{ margin-top: 10px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.fire-btn{
  width:100%; height:72px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.25);
  background: linear-gradient(180deg, #FFC56E 0%, #FF8C1E 100%);
  color:#201208; font-weight:900; font-size:22px; letter-spacing:.3px;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(255,140,30,.22),
              inset 0 1px 0 rgba(255,255,255,.35),
              inset 0 -1px 0 rgba(0,0,0,.15);
  transition: transform .06s ease, filter .14s ease, box-shadow .14s ease;
}
.fire-btn .gain{ margin-left:.35rem; }
.fire-btn:hover{ filter: brightness(1.04); }
@keyframes tapFlash {
  0%   { filter: brightness(1.12); box-shadow: 0 12px 28px rgba(255,140,30,.30), inset 0 1px 0 rgba(255,255,255,.4); }
  100% { filter: brightness(1.00); }
}
.fire-btn.tapped{ animation: tapFlash 160ms ease-out; transform: translateY(1px) scale(.997); }

@media (max-width: 1100px){
  .desk-shell{ grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .desk-left, .desk-right{ display:none; }
}
@media (max-width: 740px){
  .fire-btn{ height:64px; font-size:20px; }
}

/* Grid-Positionierung der Zellen */
.desk-left  { grid-column: 1; grid-row: 1 / 3; }
.desk-main  { grid-column: 2; grid-row: 1; display:flex; flex-direction:column; min-height:0; }
.desk-right { grid-column: 3; grid-row: 1 / 3; }
.desk-dock  { grid-column: 2; grid-row: 2; }

/* =========================================================
   Globaler Bild-Hintergrund (statisch)
   ========================================================= */

:root{
  --bg-img: image-set(
    url('/bg/idlefield-dark.webp') type('image/webp') 1x,
    url('/bg/idlefield-dark@2x.webp') type('image/webp') 2x
  );
  /* Effekte */
  --bg-blur: 6px;          /* 0–20px */
  --bg-brightness: 0.25;   /* <1 dunkler, >1 heller */
  --bg-saturate: 1.05;
  --bg-contrast: 1.00;
  --bg-opacity: 1;
}

/* 1) Fallback-Farbe auf html, Body transparent machen */
html { background: #0b0f14; }
body { background: transparent !important; position: relative; z-index: 2; }

/* 2) Bild unter die Seite legen */
html::before{
  content: "";
  position: fixed; inset: 0;
  z-index: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: 50% 50%;
  transform: scale(1.03);
  filter:
    blur(var(--bg-blur))
    brightness(var(--bg-brightness))
    saturate(var(--bg-saturate))
    contrast(var(--bg-contrast));
  opacity: var(--bg-opacity);
  pointer-events: none;
}

/* 3) Abdunklungs-Overlay */
html::after{
  content: "";
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(0,0,0,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.30));
}

/* Kantig + transparent nur für linke/rechte Spalte */
:root{
  --side-panel-alpha: 0.64;
  --side-panel-blur: 6px;
  --side-panel-rgb: 12,16,22;
}
.desk-left .panel,
.desk-right .panel{
  background: rgba(var(--side-panel-rgb), var(--side-panel-alpha));
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(var(--side-panel-blur));
  -webkit-backdrop-filter: blur(var(--side-panel-blur));
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.desk-left .panel .panel-head,
.desk-right .panel .panel-head{ margin-bottom: 10px; }

:root{
  /* Layout-Metriken */
  --shell: 1440px;
  --hud-offset: 72px;   /* Höhe HUD/HeroBar */
  --footbar-h: 48px;    /* Höhe FooterBar */
  --dock-h: 56px;       /* Höhe ActionDock */
  --dock-gap: 8px;      /* Abstand Dock->Footer (z.B. 5–10px) */

  /* Card/Surface Look (für Content & Sidebars identisch) */
  --surface-1-bg: rgba(20,22,28,0.6);
  --surface-1-bd: rgba(255,255,255,0.06);
  --surface-1-shadow: 0 4px 20px rgba(0,0,0,.25);
  --radius-md: 14px;

  /* Typo */
  --text-1: #e7eef5;
  --text-muted: #9aa9b7;
}

/* globale Card-Optik – wird überall genutzt */
.panel{
  background: var(--surface-1-bg);
  border: 1px solid var(--surface-1-bd);
  border-radius: var(--radius-md);
  box-shadow: var(--surface-1-shadow);
  color: var(--text-1);
}

/* =========================================================
   Footer (nicht fixed; Grid-Zeile 3 der Page)
   ========================================================= */

:root{
  --footbar-h: 48px;
  --dock-h: 56px;
  --dock-gap: 8px; /* <— hier auf 8–10px setzen */
}

.footer-wrap{
  margin-top: 1px; /* kein Aufaddieren via margin-top an anderen Stellen */
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(0deg, rgba(11,15,20,.96), rgba(11,15,20,.88));
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.footer{
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #aeb7bf;
  font-size: 14px;
}
.foot-left{ justify-self:start; }
.foot-center{ justify-self:center; }
.foot-right{ justify-self:end; }

.version-txt{
  font-weight: 700;
  letter-spacing: .2px;
  color: #d7dfe6;
  padding: 0;
  border: 0;
  background: transparent;
}
.foot-left strong{ color:#e7eef5; font-weight:700; }
@media (max-width: 740px){
  .footer{ padding: 10px 12px; font-size: 13px; }
}

/* =========================================================
   Optional: Sticky Footer & ActionDock (fixed) für App-Ansichten
   (Diese Klassen sind additive Opt-ins und überschreiben NICHT
   die obigen Footer-Styles, solange sie im Markup nicht genutzt
   werden.)
   ========================================================= */

/* Sticky Footer – 3 Zonen (links/mitte/rechts) */
.footbar--sticky{
  position: fixed; left: 0; right: 0; bottom: 0;
  left: 0; right: 0; bottom: 0;
  height: var(--footbar-h); z-index: 100;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: var(--surface-0-bg-foot);
  border-top: 1px solid var(--surface-0-bd);
  box-shadow: var(--surface-0-shadow-top);
  color: var(--text-1); font-size: 13px;  
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,13,17,.80), rgba(10,13,17,.94));
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -10px 28px rgba(0,0,0,.28);
  color: #dbe5ee;
  font-size: 13px;
}

/* NEU: zentrierter Innen-Container mit gleicher Breite wie die Desk-Shell */
:root{ --shell: 1440px; } /* falls noch nicht definiert */
.footbar-inner{
  max-width: var(--shell); margin: 0 auto; width: 100%; height: 100%;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  padding: 0 max(16px, env(safe-area-inset-right))
           0 max(16px, env(safe-area-inset-left));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Ausrichtung links | mitte | rechts */
.footbar-inner .foot-left   { justify-self: start;  opacity: .92; }
.footbar-inner .foot-center { justify-self: center; font-weight: 700; letter-spacing: .2px; opacity: .95; }
.footbar-inner .foot-right  { justify-self: end;   opacity: .88; }

/* Mobile: rechten Block ausblenden, damit die Mitte zentriert bleibt */
@media (max-width: 560px){
  .footbar-inner{ grid-template-columns: 1fr auto; gap: 8px; }
  .footbar-inner .foot-right{ display: none; }
}

/* ActionDock knapp über dem Footer */
.action-dock--sticky{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--dock-width), calc(100vw - 24px)); /* ← HIER einstellen */
  bottom: calc(env(safe-area-inset-bottom) + var(--footbar-h) + var(--dock-gap) + var(--dock-lift, 0px));
  z-index: 110;
}
@media (max-width: 520px){
  .action-dock--sticky{ width: calc(100% - 24px); }
}

/* Wenn Sticky-Footer/Dock genutzt werden, unten Platz reservieren */
.main-content{ padding-bottom: var(--bottom-stack); }
.sidebar-left, .sidebar-right{ padding-bottom: 0; }

/* === Final override: konsistente Layoutmaße === */
:root{
  --hud-offset: 72px;  /* Höhe HUD/HeroBar */
  --footbar-h: 44px;   /* FooterBar-Höhe */
  --dock-h: 72px;      /* ActionDock gesamt */
  --dock-gap: 12px;    /* Abstand Dock → Footer */
  --sidebar-gap: 32px; /* Extra-Luft nur für Sidebars (unten) */
  /* NEU: ActionDock etwas höher setzen (ohne Sidebars zu verändern) */
  --dock-lift: 10px; /* ↑ positiv = höher; 0px = Standardhöhe */  
}

/* === Hero-Dropdown: Layout der Sidebar-Inhalte korrigieren ================= */

/* volle Breite nutzen */
.hero .hero-menu-panel :where(.nav, .stats) {
  width: 100% !important;
  text-align: left !important;
}

/* Gruppen-Titel im Dropdown sauber setzen */
.hero .hero-menu-panel :where(.groupTitle) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 4px !important;
}

/* Menülisten/-werte: 3-spaltiges Grid -> Icon | Label | Value */
.hero .hero-menu-panel :where(.navMenu) {
  display: grid !important;
  grid-gap: 6px !important;
  gap: 6px !important;
}

.hero .hero-menu-panel :where(.navItem, .statItem) {
  display: grid !important;
  grid-template-columns: 24px 1fr auto !important; /* Icon | Text | Zahl/Badge */
  align-items: center !important;
  grid-gap: 10px !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Spaltenzuordnung */
.hero .hero-menu-panel :where(.navIcon)  { grid-column: 1 !important; justify-self: start !important; }
.hero .hero-menu-panel :where(.navLabel) { grid-column: 2 !important; justify-self: start !important; }
.hero .hero-menu-panel :where(.statValue){ grid-column: 3 !important; justify-self: end   !important; }

/* Falls Links eigene Flex-Regeln haben – neutralisieren */
.hero .hero-menu-panel :where(.navLink){
  display: contents !important; /* übernimmt Grid des Elterns */
}

/* Sicherstellen, dass nichts auf 50% schrumpft (manche Module nutzen max-width) */
.hero .hero-menu-panel :where(.nav, .stats, .navGroup, .navMenu, .statGroup){
  max-width: none !important;
}

/* Optionale Optik: kleiner Innenabstand je Zeile */
.hero .hero-menu-panel :where(.navItem, .statItem) {
  padding: 6px 4px !important;
  border-radius: 8px !important;
}

/* Hover im Dropdown leicht hervorheben (ohne doppelten Panel-Look) */
@media (hover:hover) {
  .hero .hero-menu-panel :where(.navItem:hover, .statItem:hover) {
    background: rgba(255,255,255,.04) !important;
  }
}

/* ========= Hero-Dropdown: Layout der Items (vollbreit, Icon links) ========= */

/* Container im Dropdown eindeutig identifizieren */
.dropdown-compact {
  width: 100%;
  box-sizing: border-box;
}

/* Gruppen + Listen im Dropdown dürfen volle Breite nutzen */
.dropdown-compact [class*="nav"],
.dropdown-compact [class*="stats"],
.dropdown-compact [class*="navGroup"],
.dropdown-compact [class*="navMenu"] {
  width: 100% !important;
  max-width: none !important;
}

/* Listen-Layout: Icon | Label | Value (3 Spalten) */
.dropdown-compact [class*="navMenu"] {
  display: grid !important;
  grid-gap: 6px !important;
  gap: 6px !important;
}

.dropdown-compact [class*="statItem"],
.dropdown-compact [class*="navItem"],
.dropdown-compact [class*="navLink"] {
  display: grid !important;
  grid-template-columns: 26px 1fr auto !important; /* Icon | Text | Zahl */
  align-items: center !important;
  grid-gap: 10px !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Spaltenzuordnung */
.dropdown-compact [class*="navIcon"]  { grid-column: 1 !important; justify-self: start !important; }
.dropdown-compact [class*="navLabel"] { grid-column: 2 !important; justify-self: start !important; }
.dropdown-compact [class*="statValue"]{ grid-column: 3 !important; justify-self: end   !important; }

/* Links, die eine ganze Zeile umschließen, sollen sich in das Grid „auflösen“ */
.dropdown-compact [class*="navLink"] { display: contents !important; }

/* leichte Hover-Optik im Dropdown */
@media (hover:hover){
  .dropdown-compact [class*="statItem"]:hover,
  .dropdown-compact [class*="navItem"]:hover {
    background: rgba(255,255,255,.04) !important;
    border-radius: 8px !important;
  }
}

/* ===== Hero-Dropdown: 3-Spalten-Layout (Icon | Text | Wert) ===== */
/* Greift nur im Dropdown-Container, den wir in HeroBar als .dropdown-compact setzen */
.hero .hero-menu-panel .dropdown-compact {
  width: 100%;
  box-sizing: border-box;
}

/* Menü-/Stats-Listen volle Breite, keine seitlichen Einrückungen */
.hero .hero-menu-panel .dropdown-compact [class*="navMenu"],
.hero .hero-menu-panel .dropdown-compact [class*="navGroup"],
.hero .hero-menu-panel .dropdown-compact [class*="stats"]{
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Jede Zeile: Icon | Label | Value  */
.hero .hero-menu-panel .dropdown-compact a[class],
.hero .hero-menu-panel .dropdown-compact [class*="navItem"],
.hero .hero-menu-panel .dropdown-compact [class*="statItem"]{
  display: grid !important;
  grid-template-columns: 22px 1fr minmax(28px,auto) !important;
  align-items: center !important;
  grid-column-gap: 10px !important;
  column-gap: 10px !important;
  width: 100% !important;
  padding: 6px 0 !important;
}

/* Links, die die komplette Zeile einhüllen, sollen sich ins Grid "auflösen" */
.hero .hero-menu-panel .dropdown-compact a[class]{
  display: contents !important;
}

/* Icon wirklich in Spalte 1 (auch wenn kein .navIcon vorhanden ist) */
.hero .hero-menu-panel .dropdown-compact [class*="navIcon"],
.hero .hero-menu-panel .dropdown-compact [class*="navItem"] > svg:first-child,
.hero .hero-menu-panel .dropdown-compact [class*="statItem"] > svg:first-child{
  grid-column: 1 !important;
  justify-self: start !important;
  width: 20px; height: 20px;
}

/* Text in Spalte 2, linksbündig, ohne zusätzliche Einrückungen */
.hero .hero-menu-panel .dropdown-compact [class*="navLabel"],
.hero .hero-menu-panel .dropdown-compact [class*="label"]{
  grid-column: 2 !important;
  justify-self: start !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wert in Spalte 3, rechtsbündig */
.hero .hero-menu-panel .dropdown-compact [class*="statValue"],
.hero .hero-menu-panel .dropdown-compact [class*="value"],
.hero .hero-menu-panel .dropdown-compact [class*="badge"]{
  grid-column: 3 !important;
  justify-self: end !important;
  text-align: right !important;
  margin: 0 !important; padding: 0 !important;
}

/* Gruppentitel kompakt, Icon links */
.hero .hero-menu-panel .dropdown-compact [class*="groupTitle"]{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 4px !important;
  margin: 0 !important;
}
.hero .hero-menu-panel .dropdown-compact [class*="groupTitle"] [class*="navIcon"]{
  margin-right: 4px !important;
}

/* Tooltip-Wraps im Dropdown neutralisieren (keine Layoutverschiebung, keine Tooltips) */
.hero .hero-menu-panel .dropdown-compact [class*="ttWrap"]{
  display: contents !important;
}

/* ===== Hero-Dropdown: Überschriften wie Items ausrichten ===== */
.hero .hero-menu-panel .dropdown-compact{
  /* gleiche Icon-Breite überall im Dropdown */
  --dd-icon: 22px;
  --dd-gap: 10px;
}

/* Items (Icon | Text | Wert) bleiben wie gehabt, jetzt mit Variable */
.hero .hero-menu-panel .dropdown-compact a[class],
.hero .hero-menu-panel .dropdown-compact [class*="navItem"],
.hero .hero-menu-panel .dropdown-compact [class*="statItem"]{
  display: grid !important;
  grid-template-columns: var(--dd-icon) 1fr minmax(28px,auto) !important;
  align-items: center !important;
  grid-column-gap: var(--dd-gap) !important;
  column-gap: var(--dd-gap) !important;
}

/* ===== Überschriften / Gruppentitel (Icon | Titel) ===== */
.hero .hero-menu-panel .dropdown-compact [class*="groupTitle"]{
  display: grid !important;
  grid-template-columns: var(--dd-icon) 1fr !important; /* nur 2 Spalten */
  align-items: center !important;
  grid-column-gap: var(--dd-gap) !important;
  column-gap: var(--dd-gap) !important;
  padding: 8px 0 4px !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Icon in Spalte 1 */
.hero .hero-menu-panel .dropdown-compact [class*="groupTitle"] [class*="navIcon"],
.hero .hero-menu-panel .dropdown-compact [class*="groupTitle"] > svg:first-child{
  grid-column: 1 !important;
  justify-self: start !important;
  width: calc(var(--dd-icon) - 2px);
  height: calc(var(--dd-icon) - 2px);
}

/* Titel in Spalte 2 (links) */
.hero .hero-menu-panel .dropdown-compact [class*="groupTitle"] > *:not([class*="navIcon"]):not(svg){
  grid-column: 2 !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* gleiche Max-Höhe für beide Dropdowns, kleiner Abstand zum Dock */
.hero .hero-menu-panel{
  --dd-bottom-gap: 180px; /* bei Bedarf 96–120px feinjustieren */
  --dd-max-h: calc(100vh - var(--safe-area-inset-top, 0px) - var(--dd-bottom-gap));
  max-height: var(--dd-max-h);
}

/* ── 2) Doppelten Hintergrund im LEFT-Dropdown neutralisieren ────────── */
/* Nur im linken Dropdown: keine zweite Karte im Inneren (LeftNav-Root etc.) */
.hero .hero-menu.hero-menu-left .hero-menu-panel .dropdown-compact .panel,
.hero .hero-menu.hero-menu-left .hero-menu-panel .dropdown-compact [class*="card"],
.hero .hero-menu.hero-menu-left .hero-menu-panel .dropdown-compact [class*="section"],
.hero .hero-menu.hero-menu-left .hero-menu-panel .dropdown-compact [class*="box"],
.hero .hero-menu.hero-menu-left .hero-menu-panel .dropdown-compact [class*="nav"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ── 3) Zeilen im Dropdown: etwas Innenabstand links fürs Icon ───────── */
.hero .hero-menu-panel .dropdown-compact [class*="navItem"],
.hero .hero-menu-panel .dropdown-compact [class*="navLink"],
.hero .hero-menu-panel .dropdown-compact [class*="statItem"]{
  padding-left: 10px !important;       /* Markierung fängt nicht direkt am Rand an */
}
.hero .hero-menu-panel .dropdown-compact [class*="navIcon"]{
  margin-left: 2px !important;         /* Mini-Luft zwischen Markierung und Icon */
}

/* ── 4) Logout-Icon im LeftNav: roten Verlauf sicher erzwingen ───────── */
.hero .hero-menu-panel .dropdown-compact [data-logout-icon] *{
  fill: none !important;
}

/* Optional (falls irgendein globaler Reset die Pfadbreite reduziert): */
.hero .hero-menu-panel .dropdown-compact [data-logout-icon] path{
  stroke-width: 1.8 !important;
}

/* Logout-Icon: rot in Sidebar und im Dropdown */
.nav [data-logout-icon] path,
.hero .hero-menu-panel .dropdown-compact [data-logout-icon] path{
  stroke-width: 1.8 !important;
}

[data-logout-icon] *{ fill: none !important; }

/* falls irgendein Stil das Icon versteckt */
.nav .danger .navIcon{ display: inline-flex !important; }

.hero .hero-title{ cursor:pointer; -webkit-user-select:none; -moz-user-select:none; user-select:none; }
.hero .hero-title:active{ transform: translateY(0.5px); }