:root{
  --bg: #0b0d10;
  --panel: #12151a;
  --accent: #ee2222;
  --accent-2:#ee2222;
  --danger:#ef4444;
  --ok:#22c55e;
  --text:#e5e7eb;
  --muted:#bcc2cb;
  --glass: rgba(17, 24, 39, .55);
}

@font-face{
  font-family: 'Akisa';
  src: url('assets/fonts/Akisa.otf') format('opentype');
  font-display: swap; /* block|swap|optional – je nach Wunsch */
  font-weight: 400;
  font-style: normal;
}

h1, h2 {
  font-family: 'Akisa', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  letter-spacing: 0.02em;            /* ggf. anpassen */
  font-weight: 400;                   /* Akisa ist oft unregelmäßig gewichtet */
  text-rendering: optimizeLegibility; /* schöneres Kerning/Hinting */
}
h3 {
  margin-top: 15px;
}

*{ box-sizing: border-box; }
html, body { height: 100%; overscroll-behavior-y: none; }
body{
  margin:0;
  background: radial-gradient(1000px 800px at 60% -10%, #252527, #020202 60%);
  color: var(--text);
  font: 400 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";

}

body.game { touch-action: none;overflow: hidden; }  /* nur wenn die Seite "Spiel" ist */

#game-root{ position: relative; width: 100svw; height: 100svh; overflow: hidden; }
#game{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  background:
    radial-gradient(1200px 900px at 50% 10%, rgba(124,58,237,.06), transparent 60%),
    radial-gradient(800px 500px at 20% 80%, rgba(34,211,238,.06), transparent 60%);
     image-rendering: pixelated;   /* Chrome/Edge/Android */
  image-rendering: crisp-edges; /* Safari/WebKit Fallback */
}

/* HUD */
/* HUD-Grid sauber definieren */
.hud{
  position:absolute; inset:0;
  padding:12px 12px 0 12px;
  display:grid; gap:4px;
  grid-template-columns: 1fr auto;  /* links Inhalt, rechts Pause-Button */
  grid-auto-rows: min-content;       /* Zeilen schrumpfen auf Inhalt */
  pointer-events:none;
  margin-top: 25;
}

/* Zeilen explizit setzen */
.bar{          grid-row:1; grid-column: 1 / -2; }   /* XP-Bar links */
#pauseBtn{     grid-row:1; grid-column: 2; justify-self:end; }

.stats{        grid-row:2; grid-column: 1 / -1; z-index:4; }
.buffs{        grid-row:3; grid-column: 1 / -1; z-index:4; }

.stats { margin-top: 0px; } 
/* Dock bleibt unten fixiert (wie schon bei dir) */
.hud .dock-row{
  position:absolute; left:12px; right:12px; bottom:12px;
  z-index:5; pointer-events:auto;
}
@supports (padding:max(0px)){
  .hud{ padding-bottom: max(72px, env(safe-area-inset-bottom) + 60px); }
  .hud .dock-row{ bottom: max(12px, env(safe-area-inset-bottom)); }
}

.bar{
  position:relative; height:16px; background:rgba(255,255,255,.08);
  border-radius:999px; overflow:hidden; grid-column: 1 / -2;
  border:1px solid rgba(255,255,255,.08);
}
.bar span{
  position:absolute; inset:0; font-size:12px; color:var(--muted);
  display:flex; align-items:center; justify-content:center; mix-blend-mode: difference;
  pointer-events:none;
}
.fill{ height:100%; width:0%; transition: width .15s linear; }
.hp-bar .fill{ background: linear-gradient(90deg, var(--ok), #16a34a); }
.xp-bar .fill{ background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

.news-update .news-date {
  margin: .25rem 0 1rem;
  font-weight: 600;
  opacity: .8;
}
.stats{ grid-column: 1 / -2; display:flex; gap:10px; font-size:12px; color:var(--muted); }
.buffs{ grid-column: 1 / -2; display:flex; gap:8px; pointer-events:auto; }
.buff{
  font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.btn{ pointer-events:auto; background: linear-gradient(316deg, var(--accent), #161616);
  color:white;  border-radius:12px; padding:12px 18px; font-weight:600; letter-spacing:.2px;
  box-shadow: 5px 5px 10px #d7898947;text-decoration: none;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box; /* verhindert hellen Fringe an runden Ecken */
}
.btn.small{ padding:8px 10px; border-radius:10px; }
#pauseBtn{ justify-self:end; align-self:start; }

#pauseBtn{ align-self:center; padding:4px 8px; }

.btn.hero.action-run {
  padding: 20px;

}

/* Overlay: standardmäßig komplett raus aus dem Flow */
.overlay{
  position: fixed;
  inset: 0;
  display: none;          /* NICHT im Layout */
  place-items: center;
  background: radial-gradient(1000px 800px at 50% 30%, rgba(0,0,0,.3), rgba(0,0,0,.7));
  opacity: 0;
  pointer-events: none;   /* keine Klicks abfangen */
  transition: opacity .2s ease;
  z-index: 9000;
  overflow: hidden;             /* ⬅️ Overlay selbst scrollt NICHT */
  overscroll-behavior: contain;
}
/* Sichtbar nur mit .show */
.overlay.show{
  display: grid;          /* jetzt im Layout */
  opacity: 1;
  pointer-events: auto;   /* jetzt klickbar */
}
/* Failsafe: aria-hidden=true erzwingt Unsichtbarkeit */
.overlay[aria-hidden="true"]{
  display: none !important;
  pointer-events: none !important;
}

.panel{
  background: var(--glass); backdrop-filter: blur(50px);
  border:1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 22px;
  max-width: 680px; width: calc(100% - 32px); box-shadow: 0 30px 80px rgba(0,0,0,.5);
  overflow: auto;                 /* ⬅️ nur hier scrollen */
  touch-action: auto;
  overscroll-behavior: contain;   /* ⬅️ Scroll bleibt im Panel */
  -webkit-overflow-scrolling: touch;
}
h1,h2{ margin: 0 0 10px; letter-spacing:1px; }
.list{ margin:10px 0 18px 18px; color:var(--muted); }

/* Joystick – on demand */
#joystick-zone{
  position:absolute;
  display:none;           /* unsichtbar bis Touch/PointerDown */
  left:0; top:0;          /* wird per JS exakt gesetzt */
  width:180px; height:180px; /* Startwert – JS überschreibt dynamisch */
  touch-action:none; pointer-events:auto;
  z-index: 50;            /* über dem Canvas */
}
#joystick-base, #joystick-stick{ position:absolute; inset:0; border-radius:50%; }
#joystick-base{
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px dashed rgba(255,255,255,.15);
}
#joystick-stick{
  width:40%; height:40%; left:30%; top:30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.3);
  transform: translate(0,0);
  transition: transform .06s linear; will-change: transform;
}

/* Desktop (Maus) – Joystick ausgeblendet */
@media (pointer:fine){
  #joystick-zone{ display:none !important; }
}

/* Level-Up Choices */
.choices{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
}
.choice{
  background: linear-gradient(316deg, var(--accent), #161616);
  border:0px solid rgba(209, 205, 214, 0.35);
  padding:14px; border-radius:14px; cursor:pointer; user-select:none;
  display:grid; gap:6px;
}
.choice h3{ margin:0; font-size:16px; color: #ffffff; }
.choice p{ margin:0; color:var(--muted); font-size:13px; }
.choice small{ color:#cbd5e1; opacity:.8; }
.choice:hover{ filter: brightness(1.05); }
@media (min-width: 640px){
  .choices{ grid-template-columns: repeat(3, 1fr); }
}

/* Waffen-Dock */
.weapon-dock{
  grid-column: 1 / -2;
  display:flex; gap:10px; align-items:center;
  padding:8px; border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.weapon-dock .slot{
  position:relative; width:56px; height:56px; flex:0 0 auto;
  border-radius:12px; background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center;
}
.weapon-dock .slot .icon{ width:44px; height:44px; border-radius:10px; background:#111; }
.weapon-dock .slot .lvl{
  position:absolute; right:4px; bottom:4px;
  font-size:11px; line-height:1; padding:2px 6px; border-radius:999px;
  background: rgba(17,24,39,.9); border:1px solid rgba(255,255,255,.12);
}
.weapon-dock .slot.locked{ opacity:.6; }
.weapon-dock .slot .lock{
  position:absolute; inset:0; display:grid; place-items:center; font-size:14px;
  color:#e5e7eb;
}
.weapon-dock .slot .lock small{
  display:block; opacity:.8; font-size:10px; margin-top:2px;
}

/* kleine Geräte: Dock kompakter */
@media (max-width: 480px){
  .weapon-dock{ gap:8px; padding:6px; }
  .weapon-dock .slot{ width:48px; height:48px; border-radius:10px; }
  .weapon-dock .slot .icon{ width:38px; height:38px; }
}

/* Passive-Stat-Dock (Armor/Speed/Damage/Magnet) */
.stat-dock{
  grid-column: 1 / -2;
  display:flex; gap:10px; align-items:center;
  padding:6px 8px; border-radius:14px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.stat-dock .chip{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:999px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  min-width: 84px;
}
.stat-dock .chip canvas.icon{ width:20px; height:20px; }
.stat-dock .chip b{ font-size:12px; }
.stat-dock .chip small{ font-size:11px; color:var(--muted); }
@media (max-width: 480px){
  .stat-dock{ gap:8px; padding:6px; }
  .stat-dock .chip{ min-width:auto; padding:5px 7px; }
  .stat-dock .chip b{ font-size:11px; }
  .stat-dock .chip small{ font-size:10px; }
}

/* === Dock-Reihe (konsolidiert) ========================================== */
.dock-row{
  grid-column: 1 / -1;                 /* volle HUD-Breite */
  display:flex; flex-wrap:nowrap;
  align-items:stretch; gap:12px; min-width:0;
}
/*.dock-row .weapon-dock{ flex:1 1 auto; min-width:0; }*/
.dock-row .stat-dock{  flex:0 0 auto; white-space:nowrap; }

/* Portrait: kompakter – 4 Waffen + Stats passen in 1 Zeile */
@media (orientation: portrait){
  .dock-row{ gap:8px; }

  /* Waffen-Slots kleiner */
  .weapon-dock{ gap:4px; padding:6px; }
  .weapon-dock .slot{ width:48px; height:48px; border-radius:10px; }
  .weapon-dock .slot .icon{ width:38px; height:38px; }
  .weapon-dock .slot .lvl{ right:3px; bottom:3px; font-size:10px; padding:2px 5px; }

  /* Stat-Chips als Icons + kleines Lv-Badge */
  .stat-dock{ gap:6px; padding:4px 6px; transform:translateZ(0) scale(.95); transform-origin:right center; }
  .stat-dock .chip{
    position:relative; min-width:28px; width:28px; height:28px;
    padding:0; gap:0; border-radius:8px;
  }
  .stat-dock .chip canvas.icon{ width:18px; height:18px; }
  .stat-dock .chip b{ display:none; }
  .stat-dock .chip .txt{ position:absolute; right:-4px; bottom:-4px; }
  .stat-dock .chip .txt small{
    font-size:9px; line-height:1; padding:1px 4px; border-radius:999px;
    background:rgba(17,24,39,.9); border:1px solid rgba(255,255,255,.12);
  }
}

/* Sehr schmale Portrait-Phones: letzte Schrumpfstufe */
@media (max-width:360px) and (orientation:portrait){
  .weapon-dock .slot{ width:35px; height:44px; }
  .weapon-dock .slot .icon{ width:34px; height:34px; }
  .weapon-dock .slot .lvl{ font-size:9px; }
  .stat-dock{ transform:translateZ(0) scale(.9); }
  .stat-dock .chip{ min-width:26px; width:26px; height:26px; }
  .stat-dock .chip canvas.icon{ width:16px; height:16px; }
  .stat-dock .chip .txt small{ font-size:8px; padding:1px 3px; }
}

/* Shop */
.shop-list{
  display:grid; gap:10px; grid-template-columns: 1fr;
  margin-top:10px;
}
.shop-item{
  padding:12px; border-radius:14px;
  background: linear-gradient(180deg, rgba(34,211,238,.16), rgba(124,58,237,.08));
  border:1px solid rgba(124,58,237,.35);
  display:grid; gap:6px;
}
.shop-item h3{ margin:0; font-size:16px; color:#e5e7eb; }
.shop-item p{ margin:0; color:var(--muted); font-size:13px; }
.shop-item .row{ display:flex; gap:10px; align-items:center; }
.shop-item .price{ font-weight:700; }
.shop-item button.btn.small{ margin-left:auto; }
.shop-gold{ color:#e5e7eb; margin-top:8px; }

/* Home status pills */
.status-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }


/* Dock unten an den Bildschirmrand pinnen */
.hud .dock-row{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;             /* Abstand zum Rand */
  z-index: 5;
  pointer-events: auto;     /* wieder klick-/touchbar (HUD hat pointer-events:none) */
}

/* iPhone-Notch & Co. abfedern */
@supports (padding: max(0px)) {
  .hud .dock-row{
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Dein Optionen-Overlay gerne etwas deckender */
#optionsDialog.overlay{
  background: rgba(2, 6, 23, 0.88);
}

/* Failsafe: Wenn aria-hidden="true", dann auf jeden Fall weg */
#optionsDialog[aria-hidden="true"]{
  display: none !important;
}
/* Pause-Panel Layout */
.info-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .info-grid{
    grid-template-columns: 1.2fr 1fr;
  }
}

/* Listen */
.stat-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}

.list-tiles{
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  font-size: small;
}
@media (min-width: 560px){
  .list-tiles{
    grid-template-columns: 1fr 1fr;
  }
}
.tile{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.tile h4{
  margin: 0;
  color: var(--text);
  font-size: 15px;
}
.tile .meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
/* Overlay soll scroll zulassen, Panel zentriert aber nicht abgeschnitten */
.overlay{
  position:absolute; inset:0;
  display:grid;
  /* statt place-items:center => Inhalt darf wachsen */
  align-items: center; justify-items: center;
  overflow: auto;                    /* ⬅️ erlaubt Scrollen auf kleinen Screens */
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

/* Panel: max. Höhe an View koppeln + selbst scrollen */
.panel{
  max-height: calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;                    /* ⬅️ scrollt innerhalb des Panels */
  touch-action: auto;                /* überschreibt body.game { touch-action:none } */
}

/* In sehr kleinen Höhen Panel enger machen */
@media (max-height: 640px){
  .panel{ padding: 16px; border-radius: 16px; }
}


/* Nur echte Panel-Footer sticky, NICHT jede .panel .row 
.panel-footer .row{
  position: sticky;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,.65) 40%, rgba(2,6,23,.85) 100%);
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  backdrop-filter: blur(6px);
  z-index: 1;
}*/


/* Bounty-Zeile: kein Sticky-Gradient/Blur aus .panel .row erben */
.panel .row.bounty-row{
  position: relative;        /* statt sticky */
  background: transparent;   /* kein Verlauf-Overlay */
  backdrop-filter: none;     /* kein Blur-Film darüber */
  z-index: 0;
  padding-top: 0;
  padding-bottom: 0;
}


/* Listen im Pause-Menü dürfen schlanker werden */
.stat-list{ max-width: 100%; }
.list-tiles{ max-width: 100%; }
/* Waffen-Dock */
.weapon-dock .slot .icon{
  width:44px; height:44px; border-radius:10px; background:#111; display:block;
}
.weapon-dock .slot img.icon{
  object-fit: cover; /* füllt ohne Verzerrung */
}

/* Pause-Menü – Waffenliste */
.list-tiles .tile{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap:10px;
  align-items:center;
}
.list-tiles .tile img.thumb{
  width:56px; height:56px; border-radius:12px; object-fit:cover; background:#111;
}

/* Pause-Menü: Waffenwerte */
.meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
}
.meta-row2 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
}

.meta-row .werte-label {
  color: var(--text);
  white-space: nowrap;
  font-size: 14px;
  margin-top: 2px; /* etwas tiefer, damit es mit der Liste harmoniert */
}
.meta-row2 .werte-label {
  color: var(--text);
  white-space: nowrap;
  font-size: 14px;
  margin-top: 2px; /* etwas tiefer, damit es mit der Liste harmoniert */
}

.meta-row .stat-list--weapon {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.meta-row2 .stat-list--weapon {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* kleine Geräte */
@media (max-width: 480px){
  .weapon-dock .slot{ width:48px; height:48px; }
  .weapon-dock .slot .icon{ width:38px; height:38px; }
}
/* Glow für Waffen-Evolution im Dock */
.weapon-dock .slot.slot--evo1 {
  box-shadow: 0 0 12px 4px rgba(245, 158, 11, 0.75); /* orange (#f59e0b) */
  border-radius: 12px;
}
.weapon-dock .slot.slot--evo1 img.icon {
  border: 2px solid #f59e0b;
  border-radius: 10px;
}

.weapon-dock .slot.slot--evo2 {
  box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.8);   /* gold */
  border-radius: 12px;
}
.weapon-dock .slot.slot--evo2 img.icon {
  border: 2px solid gold;
  border-radius: 10px;
}

/* Pause-Panel darf eigenständig scrollen */
#pauseScreen .panel{
  max-height: calc(100svh - 40px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}
/* ===== EVO THEME ===== */
#levelScreen.evo .panel {
  position: relative;
  background: linear-gradient(180deg, rgba(124,58,237,.22), rgba(34,211,238,.18));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    0 0 0 2px rgba(124,58,237,.35) inset,
    0 18px 60px rgba(124,58,237,.35),
    0 8px 26px rgba(34,211,238,.25);
    filter: drop-shadow(0 0 14px rgba(124,58,237,.35))
          drop-shadow(0 0 10px rgba(34,211,238,.25));
}

#levelScreen.evo .panel::before {
  /* zarter „Aura“-Schein hinter der Karte */
  content: "";

  background: radial-gradient(600px 260px at 50% -10%, rgba(124,58,237,.45), transparent 60%),
              radial-gradient(600px 260px at 50% 110%, rgba(34,211,238,.35), transparent 70%);
  filter: blur(10px);
  z-index: -1;

}


#levelScreen.evo .choices {
  display: grid; gap: 12px;
}

#levelScreen.evo .choice {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(17,24,39,.65), rgba(17,24,39,.45));
  padding: 14px 14px 14px 56px;
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: pointer;
}
#levelScreen.evo .choice:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 14px 36px rgba(124,58,237,.35);
}

#levelScreen.evo .choice .title {
  font-weight: 700; letter-spacing: .2px; margin: 0 0 2px;color: #f1eded;
}
#levelScreen.evo .choice .desc {
  color: var(--muted);
  font-size: 13px; margin: 0;
}

/* glänzende Kante links + Iconkreis */
#levelScreen.evo .choice::before {
  content: "";
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.35));
  box-shadow: 0 0 0 2px rgba(124,58,237,.6), 0 0 20px rgba(124,58,237,.6);
}
#levelScreen.evo .choice.evo-btn{
  position: relative;
  padding-left: 56px;                             /* Platz für Icon-Kreis links */
  background: rgba(255,255,255,0.05) !important;  /* neutral statt bunter Verläufe */
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);        /* leichter Tiefenwurf */
   /* ⬇️ Einheitliche Maße für Kreis + Emoji */
  --evoIconSize: 28px;
  --evoIconLeft: 14px;
  --evoIconDY: 0.5px;  /* feiner vertikaler Nudge für Emoji-Optik */
}
#levelScreen.evo .choice.evo-btn:hover{
  background: rgba(255,255,255,0.08) !important;  /* dezentes Hover, kein Farbwechsel */
  filter: brightness(1.02);
}
#levelScreen.evo .choice.evo-btn .title{
  font-size: 15px;
  line-height: 1.25;
}
#levelScreen.evo .choice.evo-btn .desc{
  font-size: 13px;
}

/* Linker Icon-Kreis (neutral, Element-Farbe kommt über box-shadow/border) */
#levelScreen.evo .choice.evo-btn::before{
 content: "";
  position: absolute;
  left: var(--evoIconLeft); top: 50%;
  transform: translateY(-50%);
  width: var(--evoIconSize); height: var(--evoIconSize);
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

/* Emoji-Icon (bleibt), Farbe neutral – Element bestimmt nur den Ring/Glow */
#levelScreen.evo .choice.evo-btn::after{
 content: "✨";                        /* wird pro Element überschrieben */
  position: absolute;
  left: var(--evoIconLeft); top: 50%;
  transform: translateY(calc(-50% + var(--evoIconDY)));
  width: var(--evoIconSize); height: var(--evoIconSize);
  display: flex; align-items: center; justify-content: center;
  line-height: var(--evoIconSize);
  font-size: calc(var(--evoIconSize) * 0.82);
  font-weight: 700;
  color: #e5e7eb;
 pointer-events: none;
  z-index: 1;              
}

#levelScreen.evo .choice.evo-btn.evo-fire{
  border-color:#ff4d4d !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,77,77,.35) inset;
}
#levelScreen.evo .choice.evo-btn.evo-fire::before{
  box-shadow: 0 0 0 2px rgba(255,77,77,.55), 0 0 12px rgba(255,77,77,.45);
}
#levelScreen.evo .choice.evo-btn.evo-fire::after{ content: "🔥"; }

#levelScreen.evo .choice.evo-btn.evo-ice{
  border-color:#5bb6ff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 1px rgba(91,182,255,.35) inset;
}
#levelScreen.evo .choice.evo-btn.evo-ice::before{
  box-shadow: 0 0 0 2px rgba(91,182,255,.55), 0 0 12px rgba(91,182,255,.45);
}
#levelScreen.evo .choice.evo-btn.evo-ice::after{ content: "❄️"; }
#levelScreen.evo .choice.evo-btn.evo-poison{
  border-color:#33dd88 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 1px rgba(51,221,136,.35) inset;
}
#levelScreen.evo .choice.evo-btn.evo-poison::before{
  box-shadow: 0 0 0 2px rgba(51,221,136,.55), 0 0 12px rgba(51,221,136,.45);
}
#levelScreen.evo .choice.evo-btn.evo-poison::after{ content: "☠️"; }

#levelScreen.evo .choice.evo-btn.evo-lightning{
  border-color:#66c7ff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 1px rgba(102,199,255,.35) inset;
}
#levelScreen.evo .choice.evo-btn.evo-lightning::before{
  box-shadow: 0 0 0 2px rgba(102,199,255,.55), 0 0 12px rgba(102,199,255,.45);
}
#levelScreen.evo .choice.evo-btn.evo-lightning::after{ content: "⚡"; }

/* EVO-Badge oben */
#levelScreen.evo .evo-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
#levelScreen.evo .evo-badge {
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 8px; border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #7c3aed, #4c1d95);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 20px rgba(124,58,237,.35);
}
#levelScreen.evo .evo-title {
  margin: 0; font-size: 18px;
}
#levelScreen.evo .evo-sub {
  margin: 0; color: var(--muted); font-size: 13px;
}

/* sanfter Glow-Puls der ganzen Evo-Karte */
@keyframes evoPulse {
  0%, 100% { box-shadow: 0 18px 60px rgba(124,58,237,.35), 0 8px 26px rgba(34,211,238,.25); }
  50%      { box-shadow: 0 22px 70px rgba(124,58,237,.5),  0 10px 30px rgba(34,211,238,.35); }
}
#levelScreen.evo .panel { animation: evoPulse 2.6s ease-in-out infinite; }

#loadingScreen {
  position: fixed;
  inset: 0;
  background: #0d0d0d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-box {
  text-align: center;
  font-family: sans-serif;
}

.loading-bar {
  width: 240px;
  height: 12px;
  background: rgba(255,255,255,0.2);
  margin-top: 10px;
  border-radius: 6px;
  overflow: hidden;
}

.loading-progress {
  height: 100%;
  width: 0%;
  background: limegreen;
  transition: width 0.3s;
}
/* --- Gold Animation UI --- */
.gold-anim-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:10px;
  padding:10px 12px; border-radius:14px;
  background: linear-gradient(180deg, rgba(234,179,8,.12), rgba(234,179,8,.06));
  border:1px solid rgba(234,179,8,.25);
}
.gold-anim-row .label{ color:#fcd34d; opacity:.9; margin-right:8px; }
.gold-anim-row b{ font-size:18px; color:#fde68a; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.gold-anim-left, .gold-anim-right{ display:flex; align-items:center; gap:8px; }

/* Ziel-Anker oben rechts (über HUD, aber unaufdringlich) */
.gold-target{
  position:absolute; right:14px; top:12px; z-index:999;
  font-size:18px; opacity:.85; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  pointer-events:none;
}

/* Fliegende Coins */
.coin{
  position:fixed; left:0; top:0; width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff6, transparent 50%),
              radial-gradient(circle at 35% 35%, #fde68a, #f59e0b 60%, #b45309 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
  transform: translate(-50%, -50%) scale(0);
  animation: coin-pop .15s ease-out forwards, coin-fall 1.2s cubic-bezier(.2,.7,.3,1) forwards;
}
.coin::after{
  content:""; position:absolute; inset:3px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
}

@keyframes coin-pop{
  to{ transform: translate(-50%, -50%) scale(1); }
}

@keyframes coin-fall{
  0%{ opacity:0; }
  5%{ opacity:1; }
  100%{ transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
}

/* Funkelsternchen */
.spark{
  position:fixed; width:8px; height:8px; pointer-events:none;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.0) 70%);
  border-radius:50%;
  opacity:0; transform: translate(-50%, -50%) scale(.8);
  animation: spark .6s ease-out forwards;
}
@keyframes spark{
  0%{ opacity:.0; transform: translate(-50%, -50%) scale(.3); }
  30%{ opacity:.9; transform: translate(-50%, -50%) scale(1); }
  100%{ opacity:0; transform: translate(-50%, -50%) scale(1.2); }
}

/* Zahl-Count-Up „pulse“ */
.count-pulse{
  animation: count-pulse .45s ease-in-out;
}
@keyframes count-pulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.1); }
  100%{ transform: scale(1); }
}
/* Auswahl-Buttons mit Thumbnail */
.btn.hero.select{
  display:flex; align-items:center; gap:12px;
  min-width: 240px; text-align:left;
  max-width: 280px;
  background: linear-gradient(180deg, rgba(124,58,237,.22), rgba(124,58,237,.12));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);

}

.btn.hero.select .thumb{
  width:42px; height:42px; flex:0 0 42px;
  border-radius:10px; overflow:hidden;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.14);
}

.btn.hero.select .thumb img{
  width:100%; height:100%; object-fit:contain;
  image-rendering: pixelated; /* passend zu deinem PIXEL_ART */
}

.btn.hero.select .thumb.badge{
  font-size:20px; line-height:1; /* für Emoji-Badges */
}

.btn.hero.select .label{
  display:grid; gap:2px;
}

.btn.hero.select[aria-disabled="true"]{
  filter: grayscale(1) opacity(.65);
  cursor: not-allowed;
}

@media (max-width: 520px){
  .btn.hero.select{ min-width: 100%; }
}

    .btn.hero.select .thumb img{
  width:100%; height:100%; object-fit:contain;
  image-rendering: pixelated;
}
/* Bild in der Emoji-Badge sauber anzeigen */
.btn.hero.select .thumb.badge { font-size:0; line-height:0; }
.btn.hero.select .thumb.badge img { display:block; width:100%; height:100%; object-fit:contain; }
/* sorgt dafür, dass die Badge den BG auch wirklich zeigt */
.btn.hero.select .thumb.badge {
  background-repeat: no-repeat;
}

/* falls die Emoji-Schriftgröße stört, neutralisieren */
.btn.hero.select .thumb.badge { font-size: 0; line-height: 0; }

/* === Intro Overlay =================================================== */
.intro {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 10000;
  overflow: hidden;
}
.intro.show { display: grid; }

.intro-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/bg.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  animation: kenburns 8s ease-in-out forwards;
  filter: saturate(1.05) contrast(1.05) brightness(0.9);
}

.intro-scrim {
  position: absolute; inset: 0;
     background: radial-gradient(1200px 800px at 50% 40%, rgba(124, 58, 237, .18), transparent 65%), linear-gradient(180deg, rgb(25 27 33 / 82%), rgb(17 18 22 / 92%));
  backdrop-filter: blur(2px);
}

.intro-content {
  position: relative;
  text-align: center;
  padding: 24px 20px;
  width: min(780px, 92vw);
  transform: translateY(8px);
  animation: floatIn .4s ease-out forwards;
}

.intro-title {
  margin: 0 0 8px;
  font-size: clamp(36px, 7vw, 64px);
  letter-spacing: .5px;
  color: #e5e7eb;
  text-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.intro-sub {
  margin: 0 0 18px;
  color: #cbd5e1;
  font-size: clamp(14px, 2.6vw, 18px);
  opacity: .9;
}

.intro-cta {
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(316deg, var(--accent), #161616);
  color: white;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 14px 18px;
  border-radius: 14px;
  cursor: pointer;
  margin-bottom: 25px;
  box-shadow: 5px 5px 10px #d7898947;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(14px, 3.2vw, 18px);
}
.intro-cta:focus { outline: 2px solid rgba(255,255,255,.5); outline-offset: 3px; }

.intro-cta .blink {
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s steps(2, start) infinite;
}

/* Keyframes */
@keyframes kenburns {
  0%   { transform: scale(1.12) translate3d(0, 0, 0); }
  55%  { transform: scale(1.18) translate3d(1.2%, -1.2%, 0); }
  100% { transform: scale(1.22) translate3d(2.2%, -2.2%, 0); }
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%,100%{ opacity: 0; }
}
#xp-text {
  color: #fff;            /* Weiß */
  mix-blend-mode: normal; /* Überlagerung ausschalten */
  font-weight: bold;      /* optional: besser lesbar */
  text-shadow: 0 0 4px rgba(0,0,0,.8); /* optional: Kontrast */
}
/* === Waffendock: größer & besser lesbar =============================== */
.weapon-dock{
  gap: 14px !important;
  padding: 10px 12px !important;
}

.weapon-dock .slot{
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.weapon-dock .slot .icon{
  width: 58px !important;
  height: 58px !important;
  border-radius: 12px !important;
  background: #111 !important;
  image-rendering: pixelated;
}

.weapon-dock .slot .lvl{
  right: 6px !important;
  bottom: 6px !important;
  font-size: 12px !important;
  padding: 3px 7px !important;
  background: rgba(17,24,39,.92) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Optional: Kontrastrahmen, wenn Slot aktiv/ausgewählt (falls du eine Klasse setzt) */
.weapon-dock .slot.is-active{
  outline: 2px solid rgba(124,58,237,.75);
  outline-offset: 1px;
}

/* Mobile: trotzdem etwas größer als vorher, aber kompakter als Desktop */
@media (max-width: 480px){
  .weapon-dock{ gap: 10px !important; padding: 8px !important; }
  .weapon-dock .slot{ width: 64px !important; height: 64px !important; }
  .weapon-dock .slot .icon{ width: 52px !important; height: 52px !important; }
  .weapon-dock .slot .lvl{ font-size: 11px !important; padding: 2px 6px !important; }
}

/* Pause-Menü – größere Kacheln */
#pauseWeapons .tile{
  grid-template-columns: 68px 1fr;
}
#pauseWeapons .tile img.thumb{
  width: 80px; height: 80px; border-radius: 12px;
}
#pauseWeapons .tile h4{ font-size: 16px; }
#pauseWeapons .tile .meta{ font-size: 13px; }
/* Pause-Screen: Waffenliste besser lesbar */
#pauseWeapons .tile {
  display: grid;
  grid-template-columns: auto 1fr; /* Icon links, Textblock rechts */
  align-items: start;
  gap: 8px;
  padding: 6px 8px;
}

#pauseWeapons .tile h4 {
  margin: 0;
  font-size: 15px;
}

#pauseWeapons .tile .meta {
  display: block;       /* Jede Meta-Info untereinander */
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.85;
}
/* Level-Auswahl Buttons */
.level-btn {
  position: relative;

  height: 120px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

.level-btn .level-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.8);
  transition: transform 0.3s ease;
}

.level-btn:hover .level-bg {
  transform: scale(1.05);
}

.level-btn .level-overlay {
  position: relative;
  width: 100%;
  padding: 10px;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.35);
  font-size: 14px;
}

.level-btn strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.level-btn small {
  font-size: 12px;
  opacity: 0.85;
}
/* Bildfüllende Level-Buttons: Standard-Gradient & Rahmen abschalten */
.btn.hero.level-btn{
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Auswahl-Status – kräftiger Glow */
.level-btn.is-selected,
.level-btn[aria-current="true"]{
  outline: 0;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.25) inset,    /* zarte Innenkante */
    0 0 0 2px var(--accent),                  /* harte Außenkante in Akzent */
    0 0 18px 6px rgba(165, 161, 172, 0.55),        /* violetter Glow */
    0 0 32px 10px rgba(166, 168, 168, 0.35);       /* cyanfarbener Außen-Schein */
}

/* Tastatur-Fokus ebenfalls gut sichtbar machen */
.level-btn:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.25) inset,
    0 0 0 2px var(--accent-2),
    0 0 18px 6px rgba(132, 141, 143, 0.55),
    0 0 32px 10px rgba(102, 100, 104, 0.35);
}


/* Gesperrte Level leicht ausgegraut */
.level-btn[aria-disabled="true"] {
  filter: grayscale(.35) opacity(.7);
  cursor: not-allowed;
}
/* Einheitliche Breite für alle Level-Karten (locked & unlocked) */
#levelGrid .level-btn,
#levelGrid .level-btn[aria-disabled="true"],
#levelGrid .level-btn:disabled{
  width: 220px;
  flex: 0 0 220px;   /* nicht schrumpfen, nicht wachsen */
}

/* Mobile: volle Breite in einer Spalte */
@media (max-width: 520px){
  #levelGrid { gap: 10px; }            /* etwas Luft */
  #levelGrid .level-btn{

    flex: 1 1 100%;
  }
}
/* Mobile: volle Breite in einer Spalte */
@media (max-width: 520px){
  #levelGrid { gap: 10px; }
  #levelGrid .level-btn,
  #levelGrid .level-btn[aria-disabled="true"],
  #levelGrid .level-btn:disabled{
    width: 100%;
    flex: 1 1 100%;
    min-width: 0; /* falls irgendwas erbt */
  }
}
/* Nur auf Smartphones im Portrait-Format */
@media (max-width: 768px) and (orientation: portrait) {
  .hud .dock-row {
    justify-content: center;   /* Zentriert den Inhalt horizontal */
  }

  .hud .dock-row .weapon-dock {
    margin: 0 auto;            /* Sicherheitsnetz, falls flex anders wirkt */
  }
}
/* Nur Pause-Button: Anti-Emoji/Anti-Tap-Highlight, Fokus ohne gelben Rand */
#pauseBtn, #pauseBtn * {
  -webkit-tap-highlight-color: transparent;
}
#pauseBtn { 
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
#pauseBtn:focus { outline: none; }
#pauseBtn:focus-visible {
  /* dezenter Fokus, bleibt im Lila-Style */
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

/* Nur das Icon im Pause-Button */
#pauseBtn .pause-icon {
  width: 16px;
  height: 16px;
  display: block;
}
#pauseBtn .pause-icon rect {
  fill: #fff;           /* Symbol immer weiß, unabhängig von Button-Farbe */
  stroke: none;
}

/* ===== Mods collapsible (Pause-Menü) ===== */
.section-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mods-toggle-btn{
  margin-left:8px;
  background: transparent;
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  width:28px; height:22px; border-radius:6px;
  font-weight:700; font-size:14px;
  cursor:pointer;
  pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Collapsed / Hidden */
.meta-list.mods-list.collapsed{
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.2,.9,.2,1), opacity .18s linear;
}

/* Visible state */
.meta-list.mods-list.show{
  max-height: 480px; /* genug Platz für mehrere Einträge */
  opacity: 1;
  padding-top: 6px;
  margin-top: 6px;
  transition: max-height .36s cubic-bezier(.2,.9,.2,1), opacity .18s linear;
}

/* kleine kosmetische Verbesserungen für Mod-Items */
.meta-list.mods-list li{ padding:4px 0; color:var(--muted); font-size:13px; }
.section-title { font-weight:700; font-size:13px; color:var(--muted); }
/* Mod Picker Overlay */
.overlay.modpicker { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.modpicker-panel h3 { margin: 0 0 6px 0; font-size: 1.15rem; }
.modpicker-panel p { margin: 0 0 12px 0; color: var(--muted, #9aa); }
.modpicker-weapons { display:flex; gap:12px; }
.modpicker-weapon { background: rgba(255,255,255,0.01); border-radius:8px; padding:10px; }
.modpicker-weapon .btn { background: linear-gradient(180deg, #222, #141414); border: 1px solid rgba(255,255,255,0.04); color: var(--text, #eee); padding:6px 8px; border-radius:6px; cursor:pointer; }
.modpicker-mods .btn { width:100%; text-align:left; }

/* Pause-Overlay: XP-Bar-Text gut lesbar wie im HUD */
#pauseScreen .bar span{
  color: var(--text);              /* heller als --muted */
  mix-blend-mode: normal;          /* nicht mit dem Fill „verschmelzen“ */
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
#pauseScreen .bar span b{
  color: #fff;                     /* LVL extra hell */
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
/* Popup: Close-X */
.close-x{
  position: absolute;
  top: 8px; right: 10px;
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.close-x:hover{ filter: brightness(1.1); }
/* Install-Modal explizit über allem (Intro hat z-index:10000) */
#installModal.overlay{
  z-index: 11000;
}

/* === News Update Cards === */
/* Grid innerhalb der News-Card */
.card.news{

  gap: 0px;
}
/* Jeder Tag als eigenes Kästchen */
.card.news > .news-update{
  position: relative;
  padding: 12px 14px 14px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
/* Kleine Lücke zwischen aufeinanderfolgenden News-Tagen */
.card.news > .news-update + .news-update{
  margin-top: 15px; /* Wunschlücke – bei Bedarf z.B. auf 6px/10px ändern */
}

/* Farbige Akzentleiste links */
.card.news > .news-update::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: .9;
}
/* Datumstitel & Items */
.news-update .news-date{
  margin: 0 0 .5rem 0;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  opacity: .9;
}
.news-update .news-item{
  border-top: 1px dashed rgba(255,255,255,.14);
  margin-top: .6rem;
  padding-top: .6rem;
}
.news-update .news-item:first-of-type{
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
@media (prefers-color-scheme: dark){
  .card.news > .news-update{
    background: rgba(17,24,39,.55);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
  }
  .news-update .news-item{
    border-top-color: rgba(255,255,255,.12);
  }
}
/* Footer */
.site-footer{
  margin: 28px auto 0;
  width: min(720px, 92vw);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(124,58,237,.12), rgba(34,211,238,.08));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.site-footer .footer-inner{
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-footer small{ color: #cbd5e1; }
.footer-links{ display: flex; gap: 12px; }
.footer-link{
  color: #e5e7eb; text-decoration: none; font-weight: 600;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
}
.footer-link:hover{ filter: brightness(1.08); }

/* Boss-Banner dezent unter der Gold-Anzeige */
.boss-banner{
  position: relative;
  
  margin: 8px 0 0;
  margin-top: 80px;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  background: rgba(17, 24, 39, .72);         /* dunkel, halbtransparent */
  color: #fff;
  backdrop-filter: blur(2px);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;                       /* nicht klickbar */
  transition: opacity .25s ease, transform .25s ease;
}
.boss-banner.show{
  opacity: 1;
  transform: translateY(0);
}

/* Farbakzente für Miniboss/Endboss */
.boss-banner.miniboss{
  box-shadow: 0 0 0 2px rgba(234,179,8,.35), 0 6px 16px rgba(0,0,0,.25);
}
.boss-banner.endboss{
  box-shadow: 0 0 0 2px rgba(239,68,68,.45), 0 8px 20px rgba(0,0,0,.3);
}
.boss-banner .tag{
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  background: rgba(255,255,255,.12);
}
#toast{
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
  background: var(--glass); backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text); padding: 10px 14px; border-radius: 12px;
  opacity: 0; transition: opacity .2s ease;
  z-index: 9998; pointer-events: none;
}
#toast.show{ opacity: 1; }
/* Bounty-Overlay: oben anordnen, leicht nach unten gepolstert */

#pauseScreen,
#levelScreen,
#shopScreen,
#gameOverScreen {
  align-items: center;
  justify-items: center;
  overflow: auto;                    /* ⬅️ erlaubt Scrollen auf kleinen Screens */
  -webkit-overflow-scrolling: touch; }/* iOS smooth scroll */

  /* Bounty-Overlay gezielt „oben“ statt Center */
#bountyOverlay{
  align-items: flex-start;
  justify-items: center;
  padding-top: 16px;
}
/* Bounty-Overlay: Panel enger machen */
#bountyOverlay .panel{
  width: min(720px, calc(100% - 1px));
}

#bountyOverlay .panel{ margin-top: 0; }
/* Start-Actions: immer 1 Zeile, 3 gleich breite Spalten */

/* --- Feste Ein-Zeilen-Leiste für die drei Haupt-Buttons --- */
.primary-actions{
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;     /* niemals umbrechen */
  width: 100%;
  margin-top: 8px;
}

/* Buttons in der Leiste teilen sich gleichmäßig den Platz */
.primary-actions .btn{
  /*flex: 1 1 0;*/           /* gleich breit */
  /*min-width: 0;*/          /* verhindert Überlaufen */
  text-align: center;
  padding: clamp(10px, 2.6vw, 14px) clamp(10px, 3vw, 16px);
  font-size: clamp(14px, 2.8vw, 16px);
  border-radius: 14px;
}

/* Sehr kleine Geräte: noch kompakter */
@media (max-width: 360px){
  .primary-actions{
    gap: 6px;
  }
  .primary-actions .btn{
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 12px;
  }
}
/* ==== Kopfgeld-Grid ==== */
.bounty-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 12px 0;
}

@media (min-width: 560px){
  .bounty-grid{ grid-template-columns: 1fr 1fr; }
}

.bounty-card{
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(124,58,237,.10), rgba(34,211,238,.06));
  border: 1px solid rgba(255,255,255,.10);
}

.bounty-card .thumb{
  width: 100%; height: 100%;
  border-radius: 10px; overflow: hidden; background:#0b0d10;
}
.bounty-card .thumb img{
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

.bounty-card .head{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
}
.bounty-card h3{
  margin:0; font-size:16px; letter-spacing:.2px; color:var(--text);
}

.bounty-card .badge{
  font-size:12px; padding:3px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  white-space: nowrap;
}
.bounty-card .badge.active{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); }
.bounty-card .badge.done{   background: rgba(234,179,8,.12);  border-color: rgba(234,179,8,.35); }
.bounty-card .badge.idle{   background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.25); }

.bounty-card .mission{
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.bounty-card .row{
  display:flex; gap:10px; align-items:center; flex-wrap: wrap;
}
.bounty-card .reward{
  color:#e5e7eb; font-size:13px;
}
.bounty-card .spacer{ flex: 1 1 auto; }
.bounty-card .actions .btn.small{ white-space: nowrap; }

/* Bounty: Actions immer rechts an den Rand der Row */
.bounty-card .row .actions{
  margin-left: auto;              /* schiebt Actions nach rechts */
  display: inline-flex;           /* hält Button-Gruppe zusammen */
  align-items: center;
  justify-content: flex-end;
  min-width: max-content;         /* kein Zeilenbruch mitten in den Buttons */
}

/* alten Spacer neutralisieren (wir brauchen ihn nicht mehr) */
.bounty-card .row .spacer{
  flex: 0 0 auto;                 /* kein Strecken */
  display: none;                  /* komplett raus */
}

/* falls es noch Layout-Schwankungen gab: Wrap erlaubt, aber kontrolliert */
.bounty-card .row{
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
}

/* Run-Menü Layout */
.runmenu-title{ margin:0 0 14px; }
.runmenu-h3{ margin:0 0 8px; color:#e5e7eb; font-size:16px; }
.runmenu-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.runmenu-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
}
.runmenu .muted b{ color:#e5e7eb; }

@media (max-width: 860px){
  .runmenu-grid{ grid-template-columns: 1fr; }
}

/* Run-Dialog: "Run starten" größer & mittig */
#runMenu #confirmRunBtn{
  display: block;                 /* eigener Block */
  margin: 12px auto 18px;         /* zentriert */
  min-width: min(360px, 90%);     /* schön breit auf Desktop, begrenzt auf Mobile */
  padding: 16px 24px;             /* höher */
  font-size: clamp(18px, 2.4vw, 22px);
  border-radius: 16px;

}

#runMenu #confirmRunBtn:active{
  transform: translateY(1px);     /* kleines Feedback */
}

@media (max-width: 560px){
  #runMenu #confirmRunBtn{
    min-width: 0;
    padding-bottom: 25px;
    padding-top: 25px;
                     /* auf kleinen Screens volle Breite des Panels */
  }
}


/* Level-Kacheln wie in deinem Bootstrap (Sicherheitsnetz) */
.level-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.level-btn{
  position:relative; overflow:hidden; border-radius:14px; padding:0; min-height:120px;
  display:block; width:100%; text-align:left;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.level-btn .level-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: saturate(1) contrast(1.05) brightness(.9);
  transform: scale(1.02);
}
.level-btn .level-overlay{
  position:relative; z-index:1; padding:12px; backdrop-filter: blur(2px);
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
}
.level-btn.is-selected{
  outline: 2px solid var(--muted);
  box-shadow: 0 0 0 3px rgba(179, 178, 182, 0.25) inset;
}

/* Char-Kacheln kompakt */
.char-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.btn.hero.select{
  position:relative; display:flex; gap:12px; align-items:center; justify-content:flex-start;
  padding:10px 12px; border-radius:14px;
}
.btn.hero.select .thumb{
  display:inline-grid; place-items:center; width:56px; height:56px; border-radius:12px; overflow:hidden;
  background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12);
}
.btn.hero.select .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.btn.hero.select.locked{ opacity:.6; }
.btn.hero.select .label small{ display:block; color:var(--muted); font-size:12px; }
/* style.css – Scroll-Lock, wenn Modals offen sind */
/* Scroll-Lock wenn ein Modal offen ist */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

/* Erzwinge fixed Overlay, falls weiter unten überschrieben wurde */
.overlay {
  position: fixed !important;
  inset: 0;
}
/* === Start-Card: Actions neu arrangieren ================================= */
.actions-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

/* Run: dominiert eine ganze Zeile */
.actions-grid .action-run{
  grid-column: 1 / -1;
  font-size: clamp(18px, 2.4vw, 22px);
  padding: clamp(14px, 2.2vw, 18px) clamp(16px, 3vw, 22px);
  border-radius: 16px;
  /* etwas mehr Glanz & Fokus */

}

/* Sekundär-Buttons: konsistente Höhe & Rhythmus */
.actions-grid .action-bounty,
.actions-grid .action-shop,
.actions-grid .action-faq,
.actions-grid .action-options{
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 14px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn.hero.action-faq,
.btn.hero.action-options
{
  padding: 0px;
}
/* Visuelle Gewichtung nach Wichtigkeit (leicht, nicht grell) */
.actions-grid .action-bounty{
  background: linear-gradient(180deg, rgba(124,58,237,.9), #5b21b6);
}
.actions-grid .action-shop{
  background: linear-gradient(180deg, #fa1633d9, #370606);
}
.actions-grid .action-faq{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}
.actions-grid .action-options{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}

/* Hover/Focus sanft – konsistent */
.actions-grid .btn:hover,
.actions-grid .btn:focus-visible{
  filter: brightness(1.06);
  outline: 0;
}

/* Sehr schmale Geräte: einspaltig */
@media (max-width: 420px){
  /*.actions-grid{
    grid-template-columns: 1fr;
  }*/
  .actions-grid .action-run{
    font-size: 18px;
  }
}

/* === Run-Menü: einheitliche Kachelgrößen ================================ */
:root{
  --tile-w: 240px;       /* Basisbreite je Kachel (passt sich im Grid an) */
  --tile-h: 140px;       /* Höhe je Kachel – für beide gleich */
  --tile-radius: 14px;
}

/* Gemeinsames Grid für Level & Charaktere */
.level-grid,
.char-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-w), 1fr));
}

/* Gemeinsamer Kachelrahmen (Level UND Charaktere) */
.level-btn,
.btn.hero.select{
  position: relative;
  width: 100%;
  height: var(--tile-h);
  padding: 0;
  border-radius: var(--tile-radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Full-bleed Bildhintergrund */
.level-btn .level-bg,
.btn.hero.select .thumb{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.85) saturate(1.02);
}

/* Bei Charakteren kommt das Bild aus <img> – cover erzwingen */
.btn.hero.select .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay/Label unten – gleicher Look für beide */
.level-btn .level-overlay,
.btn.hero.select .label{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
}

/* Typografie angleichen */
.level-btn strong,
.btn.hero.select .label strong{
  display: block;
  font-size: 16px;
  margin: 0 0 4px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.level-btn small,
.btn.hero.select .label small{
  font-size: 12px;
  color: #cbd5e1;
  opacity: .9;
}

/* Hover/Focus konsistent */
.level-btn:hover .level-bg,
.btn.hero.select:hover .thumb{ transform: scale(1.04); transition: transform .25s ease; }
.level-btn:focus-visible,
.btn.hero.select:focus-visible{
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(124,58,237,.6) inset, 0 0 0 4px rgba(124,58,237,.25);
}

/* Ausgewählt-Markierung = identisch */
.level-btn.is-selected,
.btn.hero.select.is-selected{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 0;
  box-shadow: 0 0 0 2px rgba(124,58,237,.5) inset, 0 12px 28px rgba(124,58,237,.25);
}

/* Gesperrt-Status gleich behandeln */
.level-btn[aria-disabled="true"],
.btn.hero.select[aria-disabled="true"]{
  filter: grayscale(.35) opacity(.7);
  cursor: not-allowed;
}

/* Sehr schmale Geräte: 1-Spalte */
@media (max-width: 520px){
  .level-grid, .char-grid{
    grid-template-columns: 1fr;
  }
  :root{ --tile-h: 132px; }
}
/* === RUN-MENÜ: Charakter-Kacheln wie Level (vollflächiges Bild) ========== */
:root{
  /* gleiche Kachelhöhe wie bei Leveln – ggf. angleichen */
  --char-tile-h: 120px;
}

/* Button selbst im Kachel-Stil */
.btn.hero.select{
  position: relative !important;
  height: var(--char-tile-h) !important;
  width: 100%;
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;

  /* Standard-Hintergrund/Border der .btn entfernen – Level-Look */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Bild VOLLFLÄCHIG (wie .level-bg) */
.btn.hero.select .thumb{
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* dezente Bildbearbeitung wie bei Leveln */
  filter: brightness(.85) saturate(1.02);
  transition: transform .25s ease;
}
.btn.hero.select:hover .thumb{
  transform: scale(1.04);
}

/* Beschriftung unten – gleicher Overlay-Look wie Level */
.btn.hero.select .label{
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  padding: 10px !important;
  text-align: center !important;

  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.35);
}

/* Typografie angleichen */
.btn.hero.select .label strong{
  display:block; font-size:16px; margin:0 0 4px; color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.btn.hero.select .label small{
  font-size:12px; color:#cbd5e1; opacity:.9;
}

/* Auswahl-/Fokus-Stile analog zu Level */
.btn.hero.select.is-selected{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 0;
  box-shadow: 0 0 0 2px rgba(114, 114, 116, 0.5) inset, 0 12px 28px rgba(124,58,237,.25);
}
.btn.hero.select:focus-visible{
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(150, 147, 155, 0.6) inset, 0 0 0 4px rgba(124,58,237,.25);
}

/* Gesperrt gleich behandeln */
.btn.hero.select[aria-disabled="true"]{
  filter: grayscale(.35) opacity(.7);
  cursor: not-allowed;
}

/* Breite wie Level (du fixierst Level aktuell auf ~220px) */
#charGrid .btn.hero.select{
  width: 220px;
  flex: 0 0 220px;
}

/* Mobile: ganze Breite in einer Spalte */
@media (max-width: 520px){
  #charGrid .btn.hero.select{
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }
}
/* === Run-Menü: Char-Buttons exakt wie Level-Buttons ===================== */
/* Container-Layout passend zu Level (Wrap + Lücke) */
#charGrid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Gleiche Kachelbreite wie #levelGrid (.level-btn = 220px) */
#charGrid .btn.hero.select{
  width: 220px !important;
  flex: 0 0 220px !important;
  min-width: 0 !important;      /* überschreibt alte min-width:240px */
  max-width: none !important;    /* überschreibt alte max-width:280px */
  height: 120px;                 /* gleiche Höhe wie Level-Kacheln */
  padding: 0;                    /* Kachel-look */
}

/* Mobile: 1-Spalte, volle Breite – wie bei Level-Buttons */
@media (max-width: 520px){
  #charGrid .btn.hero.select{
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}

/* Icon-Only Close oben rechts in der Panel */
.panel{
  position: relative; /* falls noch nicht vorhanden */
}
.icon-close{
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border: 0; border-radius: 10px;
  background: transparent;
  cursor: pointer;
  display: inline-grid; place-items: center;
  /* bessere Klickfläche auf Touch */
  -webkit-tap-highlight-color: transparent;
}

/* Weißes Kreuz via Pseudoelemente */
.icon-close::before,
.icon-close::after{
  content: "";
  position: absolute;
  width: 20px; height: 2px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(0,0,0,.3);
}
.icon-close::before{ transform: rotate(45deg); }
.icon-close::after { transform: rotate(-45deg); }

/* Hover / Focus */
.icon-close:hover{ filter: brightness(1.1); }
.icon-close:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(124,58,237,.25);
}

/* Dunkler Hover-Hintergrund für bessere Sichtbarkeit (optional) */
@media (hover:hover){
  .icon-close:hover{
    background: rgba(255,255,255,.08);
  }
}
/* Screenreader-only Text */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* Panel relativ positionieren */
.panel{ position: relative; }

/* Weißes X oben rechts */
.icon-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border:0; border-radius:10px; background:transparent; cursor:pointer;
  display:inline-grid; place-items:center; -webkit-tap-highlight-color:transparent;
}
.icon-close::before,
.icon-close::after{
  content:""; position:absolute; width:20px; height:2px; background:#fff; border-radius:2px;
  box-shadow:0 0 1px rgba(0,0,0,.3);
}
.icon-close::before{ transform:rotate(45deg); }
.icon-close::after { transform:rotate(-45deg); }
.icon-close:hover{ filter:brightness(1.1); }
.icon-close:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
  box-shadow:0 0 0 4px rgba(162, 156, 173, 0.25);
}
/* Kopfgeld-Button: aktiver Zustand = halb rot, halb lila 
.action-bounty.is-active{
  background:
    linear-gradient(90deg, rgba(239,68,68,.95) 0 50%, rgba(124,58,237,.95) 50% 100%),
    linear-gradient(180deg, var(--accent), #5b21b6);
  box-shadow: 0 14px 26px rgba(239,68,68,.25), 0 0 0 2px rgba(239,68,68,.25) inset;
  border: none;
}
.action-bounty.is-active:hover{ filter: brightness(1.06); }
*/

/* === Bounty: größere Waffen-Thumbnails ================================== */
.reward-weapon-thumb{
  height: 44px;
  width: auto;
  margin-left: 8px;
  border-radius: 8px;
  vertical-align: middle;
  image-rendering: crisp-edges; /* bessere Schärfe bei kleinen Assets */
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* auf größeren Screens noch etwas größer */
@media (min-width: 480px){
  .reward-weapon-thumb{ height: 56px; }
}

/* === Inline styles migrated from index.html === */
:root { --bg-dim: rgba(15,23,42,.55); }
    body,html { height:100%; }
    .landing {
      position:relative; min-height:100vh; display:grid; place-items:center;
      background: radial-gradient(1200px 600px at 60% 40%, rgba(99,102,241,.18), transparent 70%),
                  linear-gradient(180deg, rgba(2,6,23,.9), rgba(2,6,23,.9));
    }
    .landing::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url('assets/bg.jpg');
      background-size: cover;
      background-position: center;
      opacity: .28;
      mix-blend-mode: screen;
      pointer-events: none;
    }
    .card {
      position:relative; z-index:1; width:min(720px, 92vw);
      padding:28px; border-radius:20px;
      margin-top: 15px;
      background: linear-gradient(180deg, #92929200, #0000001c);
      border:1px solid rgba(255,255,255,.14);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      /*display:grid;*/ gap:14px;
    }
    .title { font-size: clamp(28px, 5vw, 44px); margin:0; color:#e5e7eb; }
    .subtitle { color:#cbd5e1; margin:.25rem 0 0; }
    .meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
    .pill { padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); font-size:14px; color:#e5e7eb; }
    .actions { /*display:flex;*/ flex-wrap:wrap; gap:5px; margin-top:8px; }
    .btn.hero { font-size:18px; padding:12px 16px; border-radius:14px;  margin-top: 10px; }
    .muted { color:#94a3b8; font-size:13px; }
    /* kleine Liste im Optionspanel */
    .opt-list { display:grid; gap:12px; margin:12px 0; }
    .opt-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .opt-row label { color:#cbd5e1; }
    .opt-actions { display:flex; gap:12px; margin-top:14px;flex-wrap: nowrap; }
    .danger {  background: linear-gradient(134deg, var(--accent), #161616);  }
    .news-update .news-date {
  margin: .25rem 0 1rem;
  font-weight: 600;
  opacity: .8;
}
    opt-actions .btn{
  flex: 1 1 0;            /* gleichmäßig verteilen */
  min-width: 0;           /* verhindern, dass sie rausdrücken */
  padding: 10px 12px;     /* etwas kompakter für Mobile */
  font-size: 14px;
  border-radius: 12px;
}
@media (max-width: 360px){
  .opt-actions .btn{
    padding: 8px 10px;
    font-size: 13px;
  }}
/* === Canonical Overlay rule (consolidated) === */
.overlay{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: radial-gradient(1000px 800px at 50% 30%, rgba(0,0,0,.3), rgba(0,0,0,.7));
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 9998;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.overlay.show{
  display: grid;
  opacity: 1;
  pointer-events: auto;
}
.overlay[aria-hidden="true"]{
  display: none !important;
  pointer-events: none !important;
}
/* ===== Bounty Card: Waffenbild als Hintergrund in der Zeile ===== */
.bounty-card .bounty-row{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;         /* kein Glasfilm */
  isolation: isolate;
  min-height: 96px;                 /* genug Fläche fürs Bild */
}

/* Bild-Layer */
.bounty-card .bounty-row::before{
  content: "";
  position: absolute; inset: -2px;
  background-image: var(--bounty-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05) brightness(1.0);
  opacity: .7;                      /* vorher ~.28 → jetzt deutlich sichtbarer */
  z-index: -2;
}

/* Scrim für bessere Lesbarkeit des Textes über Bild */
.bounty-card .bounty-row::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 50%,
               rgba(2,6,23,0) 0%,
               rgba(2,6,23,.18) 70%,
               rgba(2,6,23,.38) 100%);
  z-index: -1;
}

/* Inhalt in der Row etwas „chip“-artig */
.bounty-card .bounty-row .reward{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.bounty-card .bounty-row .actions .btn.small{
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* Hover: nur minimal mehr Präsenz */
.bounty-card .bounty-row:hover::before{ opacity: .78; }

/* Mobile: etwas weniger Vignette */
@media (max-width: 520px){
  .bounty-card .bounty-row{ padding: 8px 10px; min-height: 88px; }
  .bounty-card .bounty-row::before{ opacity: .64; }
  .bounty-card .bounty-row::after{
    background: radial-gradient(120% 100% at 50% 50%,
      rgba(2,6,23,0) 0%,
      rgba(2,6,23,.14) 72%,
      rgba(2,6,23,.30) 100%);
  }
}

.bounty-unlock{
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(124,58,237,.10), rgba(34,211,238,.06));
  display: flex;
  align-items: center;
}
.bounty-unlock .unlock-row{
  display: flex;
  align-items: center;
  gap: 10px;
}
.bounty-unlock .unlock-copy small{
  color: #cbd5e1;
}


#openBountyBtn {
  background: linear-gradient(135deg, var(--accent), #161616);

}
#confirmRunBtn{
  background: linear-gradient(180deg, #ee2222,rgb(139, 20, 20)2);
}
/* Der Bounty-Button soll Pseudo-Elemente positionieren dürfen */

#openBountyBtn {

  position: relative;
  overflow: visible; /* Badge darf minimal überstehen */
}

/* Aktiv-Badge oben rechts – erscheint nur, wenn .is-active gesetzt ist */
.action-bounty.is-active::after{
  content: attr(data-badge, "AKTIV"); /* fallback-Text */
  position: absolute;
  top: -6px;
  right: -6px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  padding: 4px 7px;
  border-radius: 999px;

  /* Badge-Farben (weiß auf lila/teal – bleibt in deinem Farbsystem) */
  color: #fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* Optional: dezenter Aktiv-Glow (ohne Hintergrund zu ändern) */
.action-bounty.is-active{
      box-shadow: 0 12px 26px rgb(216 161 49 / 35%), 0 0 0 2px rgb(0 0 0 / 28%) inset;
}

/* Optional: sanfter „ping“-Puls um den Badge */
.action-bounty.is-active::before{
  content:"";
  position:absolute;
  top: -6px;
  right: -6px;
  width: 1px; height: 1px; /* Startpunkt – skaliert gleich */
  transform: translate(50%,-50%);
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(124,58,237,.45);
  animation: bountyPing 1.6s ease-out infinite;
  pointer-events:none;
}

@keyframes bountyPing{
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,.45); opacity: .9; }
  70%  { box-shadow: 0 0 0 16px rgba(124,58,237,.0); opacity: 0; }
  100% { box-shadow: 0 0 0 16px rgba(124,58,237,.0); opacity: 0; }
}

/* Respektiere reduzierte Bewegung */
@media (prefers-reduced-motion: reduce){
  .action-bounty.is-active::before{ animation: none; }
}
/* ===== SHOP (Overlay) – Clean Version ================================= */

/* Grid: 1/2/3 Spalten abhängig von der Breite */
#shopScreen .shop-list{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}
@media (min-width: 560px){
  #shopScreen .shop-list{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px){
  #shopScreen .shop-list{ grid-template-columns: repeat(3, 1fr); }
}

/* Karte (neutraler Rahmen; KEIN Milchglas hier!) */
#shopScreen .shop-item{
  display: grid;
  grid-template-columns: 108px 1fr;   /* Thumb links, Inhalt rechts */
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;            /* wichtig: NICHT milchig */
}

/* Thumbnail links */
#shopScreen .shop-item .thumb-wrap{ grid-row: 1 / span 3; }
#shopScreen .shop-item .shop-thumb{
  width: 108px; height: 108px;
  border-radius: 12px;
  object-fit: cover; background:#111; display:block;
}

/* Inhalt rechts – HIER liegt der Milch/Blur-Effekt */
#shopScreen .shop-item .shop-content{
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
}

/* Typo nur innerhalb des Content-Blocks – kein extra ::before/Blur auf h3 */
#shopScreen .shop-item .shop-content h3{
  margin: 0;
  font-size: 16px;
  color: #e5e7eb;
}
#shopScreen .shop-item .shop-content p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Preis + Button: eine Zeile, stabil */
#shopScreen .shop-item .shop-content .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;          /* kein Umbruch auf normalen Breiten */
  margin-top: 6px;
}
#shopScreen .shop-item .shop-content .price{
  font-weight: 700;
  white-space: nowrap;        /* lange Zahlen brechen nicht um */
}
#shopScreen .shop-item .shop-content .btn.small{
  flex: 0 0 auto;             /* Button wird nicht gestaucht */
}

/* Mobil: alles untereinander; großes Hero-Thumb; Row darf umbrechen */
@media (max-width: 560px){
  #shopScreen .shop-item{ grid-template-columns: 1fr; }
  #shopScreen .shop-item .thumb-wrap{ grid-row: auto; }
  #shopScreen .shop-item .shop-thumb{ width: 100%; height: 140px; }
}
@media (max-width: 380px){
  #shopScreen .shop-item .shop-content .row{ flex-wrap: wrap; }
  #shopScreen .shop-item .shop-content .btn.small{ width: 100%; }
}
/* Bounty-Pill */
.go-bounty { margin: 8px 0 4px; }
.go-bounty .pill{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; }
.go-bounty .pill.ok  { background:rgba(34,197,94,.2);  color:#bbf7d0; border:1px solid rgba(34,197,94,.4); }
.go-bounty .pill.fail{ background:rgba(239,68,68,.2); color:#fecaca; border:1px solid rgba(239,68,68,.4); }

/* Bonus-Liste */
.go-weapons{ margin-top:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); }
.go-weapons h4{ margin:0 0 8px; font-size:14px; }
.go-wrow{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); margin-bottom:8px; }
.go-wrow.is-mvp{ background:linear-gradient(90deg, rgba(250,204,21,.15), rgba(250,204,21,.28)), rgba(255,255,255,.05); border-color:rgba(250,204,21,.35); }
.go-wrow .w-left{ display:flex; gap:10px; align-items:center; }
 .go-wrow .w-thumb{
   width:34px; height:34px; border-radius:8px; object-fit:cover;
   background:#0b1020; border:1px solid rgba(255,255,255,.10);
 }
 .go-wrow .w-txt{ display:flex; flex-direction:column; line-height:1.15; }
 .go-wrow .w-name{ font-weight:700; }
 .go-wrow .w-sub{ color:var(--muted); }
/* Rechts: Spaltenbreiten in „ch“ (breitenstabile Ziffern) */
.go-wrow .w-right{
  display:grid;
  grid-template-columns: 8ch 9ch 7ch;   /* KILLS | DMG | DPS */
  column-gap:12px;
  justify-items:end;
  text-align:right;
  font-size:15px;
  font-weight:700;
  font-variant-numeric: tabular-nums;   /* Ziffern monospaced */
  white-space:nowrap;
  letter-spacing:.2px;
}
.go-wrow .w-name{ white-space:nowrap; }

/* Smartphone breit (≤520px): kompaktere Spalten, Zeile bleibt 2-spaltig */
@media (max-width: 520px){
  .go-wrow{ 
    display:grid; 
    grid-template-columns: 1fr auto; 
    align-items:center; 
    gap:8px;
  }
  .go-wrow .w-left{ grid-column:1; }
  .go-wrow .w-right{ 
    grid-column:2; 
    grid-template-columns: 7ch 8ch 6ch; 
    column-gap:18px; 
    font-size:14px; 
  }
  .go-wrow .w-thumb{ width:30px; height:30px; border-radius:7px; }
}

/* Sehr schmale Phones (≤380px): Werte unter den Namen stapeln, weiterhin bündig */
@media (max-width: 380px){
  .go-wrow{
    grid-template-columns: 1fr;         /* stapeln */
    align-items:start;
  }
  .go-wrow .w-right{
    grid-column:1;                       /* unter die linke Spalte */
    justify-items:start;                 /* linksbündig, spart Breite */
    text-align:left;
    grid-template-columns: 7ch 8ch 6ch;  /* behält Spalten-Alignment */
    column-gap:12px;
    margin-top:4px;
    font-size:14px;
  }
  .go-wrow .w-thumb{ width:28px; height:28px; }
}
 .go-wrow .w-right .stat{ font-weight:700; letter-spacing:.2px; text-align:right; }
 /* Optional: sehr schmale Screens – Spalten etwas schmaler */
 @media (max-width: 400px){
   .go-wrow .w-right{
  grid-template-columns: 5rem 5rem 5rem;
   margin-left: 15px;
     column-gap:10px;
     font-size:14px;
   }
 }
 /* Name links nicht umbrechen, Thumbnail hält Breite stabil */
 .go-wrow .w-name{ white-space:nowrap; }
 .go-wrow .w-right .k{ color:#93c5fd; }
 .go-wrow .w-right .d{ color:#fca5a5; }
 .go-wrow .w-right .p{ color:#fde68a; }

/* Pause-Overlay: Overlay selbst NICHT scrollen, Panel darin organisiert das Scrollen */
#pauseScreen.overlay{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  z-index: 9000;
}

/* Panel als Flex-Column: Body scrollt, Footer bleibt separat */
#pauseScreen .panel{
  display: flex;
  flex-direction: column;
  max-height: calc(100svh - 40px);
  overflow: hidden;                 /* Scrollen nur im Body */
}

/* Scroll-Container: hier sitzt der eigentliche Inhalt */
#pauseScreen .panel-body{
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;               /* vermeidet Layout-Jump bei iOS Scrollbar */
  /* Platz unter Content, damit der sticky Footer nichts überdeckt */
  padding-bottom: 90px;
  flex: 1 1 auto;
}

/* Sticky Footer: immer sichtbar am unteren Rand des Panels */
#pauseScreen .panel-footer .row{
  position: sticky;
  bottom: 0;
 /* background:
    linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,.65) 40%, rgba(2,6,23,.85) 100%);*/
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  backdrop-filter: blur(6px);
  z-index: 10;                       /* über dem Body-Content */
}
/* Pause-Menü: Footer-Buttons zentrieren */
#pauseScreen .panel-footer .row{
  display: flex;            /* Sicherheitsnetz, falls inline-Stile fehlen */
  justify-content: center;  /* <-- zentriert die Buttons */
  align-items: center;
  gap: 12px;
}

/* Sehr kleine Screens: ggf. Umbruch, trotzdem mittig */
@media (max-width: 360px){
  #pauseScreen .panel-footer .row{
    flex-wrap: wrap;
    justify-content: center;
  }
  #pauseScreen .panel-footer .row .btn{
    flex: 0 0 auto;         /* nicht strecken, schön kompakt */
  }
}
#restartBtn {
  margin-top: 15px;
}
/* Fortschritt: Thumbnails in Kacheln */
.list-tiles .tile {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
}
.list-tiles .tile img.thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: #111;
}

/* Mobile kompakter */
@media (max-width: 480px){
  .list-tiles .tile { grid-template-columns: 48px 1fr; gap: 8px; }
  .list-tiles .tile img.thumb { width: 48px; height: 48px; border-radius: 10px; }
}
#closeProgressBtn {
  margin-top: 25px;
}
/* Basis-Pill (falls nicht vorhanden) */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
}

/* Pill als Button */
.pill-btn{
  cursor: pointer;
  background: linear-gradient(180deg, #62626233, rgb(204 197 216 / 8%));
  border-color: rgba(192, 192, 192, 0.35);
  box-shadow: 5px 5px 10px rgba(176, 176, 177, 0.25);
}
.pill-btn:hover{ filter: brightness(1.05); }
.pill-btn:active{ transform: translateY(1px); }

/* Mobile noch etwas kompakter */
@media (max-width: 480px){
  .pill{ padding:5px 8px; font-size:12px; }
}
/* Statuszeile: immer EINZEILIG */
.status{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;     /* kein Zeilenumbruch */
  white-space: nowrap;   /* Inhalt nicht umbrechen */
  min-width: 0;          /* für sichere Schrumpfung */
}

.status .pill{
  flex: 0 0 auto;        /* Breite nicht dehnen, nicht umbrechen */
  white-space: nowrap;
}

/* Pill-Button etwas kompakter */
.status .pill-btn{
  padding: 6px 10px;
  font-size: 14px;
}

/* Very small screens (≤360px): alles noch schmaler */
@media (max-width: 360px){
  .status{ gap: 4px; }
  .status .pill{
    padding: 4px 8px;
    font-size: 14px;
  }
  .status .pill-btn{
    padding: 4px 8px;
    font-size: 14px;
  }
}
/* Kleines Panel für Meta-Overlay */
.panel-small{
  max-width: 420px;
}

/* Einträge kompakt */
#metaList li{
  display:flex; justify-content:space-between; gap:10px;
}
#metaList li b{ color:var(--text); }
#metaList small{ color:var(--muted); }

/* Close-X hast du schon global (.close-x) – passt. */
#closeMetaBtn {
  margin-top: 25px;
}
/* Charakter-Thumbnail im Game-Over-Unlock */
.reward-char-thumb{
  height: 56px;
  width: 56px;
  border-radius: 12px;
  object-fit: cover;
  margin-left: 8px;
  vertical-align: middle;
  image-rendering: crisp-edges;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Optional: leicht andere Gradient-Nuance für Char-Unlock (gleiches Layout wie .bounty-unlock) */
.char-unlock{
  background: linear-gradient(180deg, rgba(34,211,238,.10), rgba(99,102,241,.06));
}

/* Game Over – Karten-Thumbnail */
.reward-map-thumb{
  height: 56px;
  width: 56px;
  border-radius: 12px;
  object-fit: cover;
  margin-left: 8px;
  vertical-align: middle;
  image-rendering: crisp-edges;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* leichte Akzentnuance für Map-Kachel (analog zu .char-unlock) */
.map-unlock{
  background: linear-gradient(180deg, rgba(34,211,238,.10), rgba(16,185,129,.08));
}
/* ================================
   Fortschritt: Level-Karten (scoped)
   ================================ */
#progressScreen .panel-body h3 + #levelStats {
  margin-top: 8px;
}

#progressScreen .progress-level-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Karte wie Level-Button, aber als statisches <article> */
#progressScreen .level-card{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 120px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  background: rgba(255,255,255,.04);
}

#progressScreen .level-card .bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.85) saturate(1.02);
  transform: scale(1.02);
}

#progressScreen .level-card .scrim{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  display: grid;
  gap: 4px;       /* jede Info eigene Zeile */
}

/* Rows & Typo */
#progressScreen .level-card .row{
  font-size: 13px;
  color: #cbd5e1;
}
#progressScreen .level-card .row.title{
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  margin-bottom: 2px;
}

/* Miniboss-Checks */
#progressScreen .level-card .row.minibosses{
  display: flex;
  align-items: center;
  gap: 8px;
}
#progressScreen .level-card .row.minibosses .label{
  min-width: 82px;
}
#progressScreen .level-card .row.minibosses .checks{
  display: inline-flex;
  gap: 6px;
}
#progressScreen .level-card .mini-dot{
  display:inline-grid;
  place-items:center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 12px; line-height: 1;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  opacity: .9;
}
#progressScreen .level-card .mini-dot.ok{
  background: rgba(34,197,94,.25);
  border-color: rgba(34,197,94,.65);
}
#progressScreen .level-card .mini-dot.no{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.55);
}

/* Mobile 1-Spalte */
@media (max-width: 520px){
  #progressScreen .progress-level-grid{
    grid-template-columns: 1fr;
  }
}
/* Verfügbar-Badge oben rechts – erscheint nur, wenn .is-available gesetzt ist */
.action-bounty.is-available::after{
  content: attr(data-badge, "VERFÜGBAR");
  position: absolute;
  top: -6px;
  right: -6px;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .3px;
  padding: 4px 7px;
  border-radius: 999px;

  /* andere Farbgebung als aktiv – z. B. cyan/blau */
  color: #0c4a6e; /* dunkles Blau für Text */
      background: linear-gradient(353deg, #ffffff, #ffffff);
  border: 1px solid rgba(12,74,110,.25);
  box-shadow:
    0 6px 14px rgba(2,6,23,.25),
    0 0 0 1px rgba(255,255,255,.12) inset;
}

/* Kein Puls bei „verfügbar“ (nur bei aktiv) – optional:
.action-bounty.is-available::before{ content:none; }
*/
/* ===== Tutorial Cards Overlay ===== */
#tutorial-card-overlay[hidden] { display: none !important; }
#tutorial-card-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  pointer-events: auto;
}
#tutorial-card-overlay .tc-backdrop {
  position: absolute; inset: 0;
  backdrop-filter: blur(4px);
  background: rgba(10, 12, 14, 0.55);
}
#tutorial-card-overlay .tc-card {
  position: relative;
  max-width: min(720px, 90vw);
  width: 100%;
  background: #0f1216;
  color: #e7edf3;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
#tutorial-card-overlay .tc-close {
  position: absolute; top: 8px; right: 8px;
  border: 0; background: transparent; color: #cbd5e1;
  font-size: 20px; line-height: 1; padding: 8px; cursor: pointer;
}
#tutorial-card-overlay .tc-media {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
  display: grid; place-items: center;
}
#tutorial-card-overlay .tc-media img {
  max-width: 100%; height: auto; display: block;
  object-fit: contain; padding: 16px;
}
#tutorial-card-overlay .tc-content { padding: 16px 18px 18px; }
#tutorial-card-overlay .tc-content h2 {
  font-size: 20px; margin: 0 0 8px; letter-spacing: .2px;
}
#tutorial-card-overlay .tc-content p {
  margin: 0; line-height: 1.45; color: #cfe5ff;
}
#tutorial-card-overlay .tc-actions {
  margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#tutorial-card-overlay .tc-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 10px;
  background: linear-gradient(316deg, var(--accent), #161616); color: #fff; font-weight: 600;
}
#tutorial-card-overlay .tc-btn:active { transform: translateY(1px); }
#tutorial-card-overlay .tc-hint {
  font-size: 12px; color: #9fb3c8; opacity: .9;
}
@media (min-width: 720px){
  #tutorial-card-overlay .tc-card {
    grid-template-columns: 42% 58%;
  }
  #tutorial-card-overlay .tc-media { min-height: 260px; }
}
/* Versteckte News-Items einklappen */
.news-item--hidden{ display:none; }

/* Toggle-Button unaufdringlich darstellen */
.news-more{
  align-self: flex-start;
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.22);
  color: #e5e7eb;
}
.news-more:hover{ filter: brightness(1.05); }

/* Back-to-Top Button (unten rechts) */
#toTop{
  all: unset;
  position: fixed !important;
  right: 18px; bottom: 18px;
  z-index: 99999;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,24,39,.70);
  color: #fff; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
#toTop svg{
  width: 20px; height: 20px;
  stroke: #fff; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#toTop.show{ opacity: .95; transform: translateY(0); pointer-events: auto; }
#toTop:hover{ filter: brightness(1.08); }

/* === RUN-MENÜ – KOMPAKT === */
.runmenu-title{ margin-bottom: 8px; }

/* 2 Spalten Desktop, 1 Spalte mobil */
.runmenu .runmenu-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 680px){
  .runmenu .runmenu-grid{ grid-template-columns: 1fr; }
}

/* Grids für Level + Charakter – kleinere Kacheln */
.runmenu .level-grid,
.runmenu .char-grid{
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (max-width: 560px){
  .runmenu .level-grid,
  .runmenu .char-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Level-Button kompakt */
.runmenu .level-btn{
  position: relative;
  padding: 10px 10px 10px 10px; /* kompakter */
  min-height: 74px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Hintergrundbild als Cover */
.runmenu .level-btn .level-bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  filter: brightness(.72) saturate(.92);
}

/* Overlay mit Titel + (optional) Lock-Zeile */
.runmenu .level-btn .level-overlay{
  position:relative; z-index:1;
  display:grid; gap:4px;
}

/* Titel schlanker */
.runmenu .level-btn strong{
  font-size: 15px; line-height:1.1;
}

/* Lock-/Hinweiszeile */
.runmenu .level-btn small.muted{
  font-size: 12px; opacity: .92;
}

/* Ausgewählte Kachel */
.runmenu .level-btn.is-selected{
  outline: 2px solid rgba(255,255,255,.45);
  outline-offset: 0;
}

/* Gesperrt: etwas entsättigt */
.runmenu .level-btn[aria-disabled="true"]{
  filter: grayscale(.15) opacity(.9);
}

/* Charakter-Button kompakt – nutzt dein existierendes Markup (thumb + label) */
.runmenu .btn.hero.select{
  display:grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Thumbnail kleiner */
.runmenu .btn.hero.select .thumb{
  width: 48px; height: 48px;
  border-radius: 10px;
  background-size: cover; background-position:center;
}

/* Textblock: nur Titel standardmäßig – Subline wird weggelassen (oder nur bei 🔒) */
.runmenu .btn.hero.select .label strong{
  display:block; font-size: 15px;
}
.runmenu .btn.hero.select .label small{
  display:block; font-size: 12px; color: var(--muted);
}

/* Gesperrte Charaktere grauer */
.runmenu .btn.hero.select.locked{
  filter: grayscale(.15) opacity(.9);
}

/* Buttons generell etwas schlanker im Run-Menü */
#runMenu .btn.hero{
  padding: 12px 14px;
  border-radius: 12px;
}
#confirmRunBtn{
  margin-bottom: 6px;
}
/* === Char-Kacheln exakt wie Level-Kacheln === */
/* Da die Char-Kacheln jetzt die Klasse .level-btn tragen, gelten dieselben Regeln.
   Wir ergänzen nur eine minimale Feinabstimmung für das Grid. */

.runmenu .char-grid .char-btn.level-btn{
  /* optional: sicherstellen, dass dieselbe Mindesthöhe greift */
  min-height: 74px; /* identisch zur Level-Kachel */
}

/* Optional: gleiche Auswahl-Markierung erzwingen (falls woanders überschrieben) */
.runmenu .char-grid .char-btn.level-btn.is-selected{
  outline: 2px solid rgba(255,255,255,.45);
}
@media (max-width: 560px){
  .runmenu .level-btn,
  .runmenu .char-grid .char-btn.level-btn{
    min-height: 78px;
  }
}
/* Run-Menü Grids: Level & Char identisch */
#levelGrid,
#charGrid{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Mobil: exakt 2 Spalten, damit kompakt */
@media (max-width: 560px){
  #levelGrid,
  #charGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}
/* === FINAL OVERRIDE: Auswahl klar sichtbar (Level + Char) ================= */
.btn.hero.level-btn.is-selected,
.btn.hero.level-btn[aria-current="true"]{
  outline: 2px solid var(--accent-2) !important;   /* cyanfarbene Outline */
  outline-offset: 0;
  /* kräftiger, zweifarbiger Glow; überschreibt "box-shadow: none !important" */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.32) inset,
    0 0 0 2px var(--accent),
    0 0 9px 6px rgba(197, 197, 197, 0.65),
    0 0 18px 12px rgba(55, 59, 59, 0.45) !important;
}

/* Keyboard-Fokus ebenso deutlich */
.btn.hero.level-btn:focus-visible{
  outline: 2px solid var(--accent) !important;
  box-shadow:
    0 0 0 2px rgba(48, 46, 46, 0.25) inset,
    0 0 0 2px var(--accent-2),
    0 0 9px 6px rgba(150, 155, 156, 0.55),
    0 0 18px 10px rgba(172, 172, 172, 0.35) !important;
}
/* === Clipping-Fix für selektierte Kacheln (Level + Char) ================== */
/* Bild IMMER selbst runden & clippen – unabhängig vom Button-Overflow */
.btn.hero.level-btn .level-bg{
  border-radius: inherit;                  /* runde Ecken wie der Button */
  clip-path: inset(0 round 14px);          /* hartes Clipping auf Radius */
  -webkit-clip-path: inset(0 round 14px);  /* Safari/WebKit */
  pointer-events: none;
}

/* Beim selektierten Zustand Overflow erlauben (für Glow),
   aber das Bild bleibt durch clip-path sauber beschnitten */
.btn.hero.level-btn.is-selected,
.btn.hero.level-btn[aria-current="true"]{
  overflow: visible !important;
  position: relative;
}

/* Glow NICHT mehr direkt am Button-Schatten, sondern als Pseudo-Element */
.btn.hero.level-btn.is-selected::after,
.btn.hero.level-btn[aria-current="true"]::after{
  content: "";
  position: absolute;
  inset: -2px;                     /* leicht größer als die Kachel */
  border-radius: 16px;             /* minimal größer als 14px der Kachel */
  pointer-events: none;
  /* derselbe kräftige Glow wie zuvor, aber jetzt getrennt vom Inhalt */
  box-shadow:
    0 0 0 2px rgba(117, 117, 117, 0.32) inset,
    0 0 0 2px #ebebeb,
    0 0 5px 3px rgba(224, 222, 228, 0.65),
    0 0 9px 6px rgba(194, 197, 197, 0.45);
  z-index: 2;
}

/* Optional: den alten Outline/Shadow auf dem Element selbst ausbremsen,
   damit wirklich nur das ::after den Glow rendert */
.btn.hero.level-btn.is-selected,
.btn.hero.level-btn[aria-current="true"]{
  outline: 0 !important;
  box-shadow: none !important;
}
/* ==== Aktive Meta-Upgrades: Karten-Layout ==== */
#metaList, #pauseMeta{
  /* überschreibt .stat-list zu einem Grid */
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0;
  margin: 0;
}

@media (min-width:560px){
  #metaList, #pauseMeta{
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width:860px){
  #metaList, #pauseMeta{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

#metaList .meta-empty, #pauseMeta .meta-empty{
  list-style: none;
  padding: 8px 10px;
  text-align: center;
  color: var(--muted);
}

/* Karte */
.meta-card{
  list-style: none;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

/* Thumb */
.meta-thumb{
  position: relative;
  width: 56px; height: 56px;
  border-radius: 12px; overflow: hidden;
  background:#111;
}
.meta-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  image-rendering: crisp-edges;
}
.meta-badge{
  position: absolute;
  left: 6px; top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .2px;
  padding: 2px 6px; border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #7c3aed, #4c1d95);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 12px rgba(124,58,237,.35);
}

/* Body */
.meta-body{ display: grid; gap: 6px; align-content: center; }
.meta-row{
  display: flex; align-items: baseline; /*justify-content: space-between;*/ gap: 8px;
}
.meta-row2{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.meta-title{
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}
.meta-level{
  color: var(--muted);
  font-size: 12px;
}

/* Progressbar */
.meta-bar{
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}
.meta-fill{
  /*position: absolute;*/ inset: 0 0 0 auto; /* von links füllen */
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .25s ease;
}

/* Perk-Variante: dezenter Glow */
.meta-card.meta-perk{
  background: linear-gradient(180deg, rgba(34,211,238,.10), rgba(124,58,237,.06));
  border-color: rgba(124,58,237,.28);
}

/* Mobile kompakter */
@media (max-width:480px){
  .meta-card{
    grid-template-columns: 48px 1fr;
    padding: 8px;
    gap: 8px;
  }
  .meta-thumb{ width:48px; height:48px; border-radius:10px; }
  .meta-title{ font-size:13px; }
  .meta-level{ font-size:11px; }
}
/* === News kompakt === */
.news-actions{
  display:flex; gap:8px; margin:.25rem 0 1rem;
}
.news-actions.top{ margin:.25rem 0 1rem; display:flex; gap:8px; }
.news-actions.bottom{ margin:1rem 0 .25rem; display:flex; gap:8px; justify-content:center; }

.news-list{
  display:grid; gap:12px;
}
.news-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
  display: grid; gap: 8px;
}
.news-card-head{
  display:flex; align-items:center; justify-content:space-between;
}
.news-card-date{
  font-weight:600; opacity:.85;
}
.news-card .news-item strong{ color:#e5e7eb; }
.news-card .news-item small{ color:var(--muted); }
.news-card .news-item p{ margin:.25rem 0 0; color:var(--muted); }

.news-toggle{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#e5e7eb; border-radius:8px; padding:6px 10px;
  font-size:12px; cursor:pointer;
}

/* === Overlay Fix: klickbar & über allem === */
.overlay{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;           /* über Header/Canvas/UI */
  background: rgba(0,0,0,.55);
  align-items: center;
  justify-content: center;
  pointer-events: none;     /* Basis: blockt nichts solange .show fehlt */
}
.overlay.show{
  display: flex;
  pointer-events: auto;     /* Jetzt anklickbar */
}
.overlay .panel{
  max-width: 800px;
  width: min(92vw, 800px);
 /* max-height: 80vh;*/
  overflow: auto;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 16px;
}
.overlay .close-x{
  position:absolute; top:10px; right:14px;
}

/* === News: Feinschliff Abstände === */
.news-card .news-toggle{ margin-top: 12px; }
.news-card .news-card-more{ margin-top: 8px; }
.news-card .news-card-more .news-item + .news-item{ margin-top: 12px; }

/* === Archiv-Liste (Grundstil, einheitlich) === */
.news-arch-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:8px;
}
.news-arch-row{
  width:100%;
  display:grid;
  grid-template-columns: 110px 1fr; /* fix für Datum, flexibel für Titel */
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#e5e7eb;
  cursor:pointer;
  text-align:left;
}
.news-arch-row b{
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.news-arch-row span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;       /* lange Titel laufen nicht mehr krumm */
}
.news-arch-row:hover{ filter:brightness(1.05); }
.news-arch-row[aria-current="true"]{ outline:2px solid rgba(255,255,255,.25); }

/* === Rechte Detailspalte im Archiv === */
.news-arch-detail .news-card{ margin:0; }
.news-arch-detail .news-toggle{ display:none !important; }
.news-arch-detail .news-card-more{ margin-top:8px; }

/* === Artikel-Overlay (Einzelartikel) === */
#newsArticleOverlay .panel{
  max-width: 860px;
  width: min(92vw, 860px);
  max-height: 82vh;
  overflow:auto;
}
#newsArticleContent .news-card{ margin:0; }
#newsArticleContent .news-toggle{ display:none !important; }
#newsArticleContent .news-card-more{ margin-top:8px; }

/* Zurück-Button im Artikel */
.back-btn{
  position:absolute; left:14px; top:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#e5e7eb;
  border-radius:8px; padding:6px 10px; font-size:14px; cursor:pointer;
}
#newsArticleOverlay .close-x{ top:10px; right:14px; }
#newsArticleOverlay h2{ margin-top:42px; }

/* Close-Button im Archiv-Footer (bestehender Abstand) */
#closeNewsArchiveBtn { margin-top: 25px; }

/* News: Archiv-Button in der gleichen Zeile wie die Überschrift, rechtsbündig */
.card.news h2.news-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card.news h2.news-head > span{ flex:1 1 auto; }
.card.news h2.news-head .btn.small{ margin-left:12px; }

/* === News-Archiv: Layout & Scroll ============================== */
/* Panel nie größer als der Bildschirm; Inhalt in definierte Zeilen aufteilen */
#newsOverlay .panel{
  display: grid;
  grid-template-rows:
    auto  /* Close-X & Titel */
    auto  /* Einleitungstext */
    1fr   /* Scrollbarer Inhaltsbereich */
    auto; /* Footer mit Schließen-Button */
  row-gap: 10px;
  max-height: calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* Zweispaltiger Content: links Liste (scrollt), rechts Detail (scrollt) */
#newsOverlay .news-arch-body{
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: 12px;
  min-height: 0; /* wichtig: erlaubt Kindern, 1fr-Höhe wirklich auszunutzen */
}

/* Beide Teilbereiche dürfen innerhalb ihrer Zelle scrollen */
#newsOverlay .news-arch-list,
#newsOverlay .news-arch-detail{
  overflow: auto;
  min-height: 0;   /* verhindert „aufblähen“; erlaubt echtes Scrollen */
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Optik der Liste im Overlay (kleiner Scrollbar-Puffer) */
#newsOverlay .news-arch-list{
  display: grid;
  gap: 8px;
  padding-right: 4px;
}

/* Mobil: untereinander, beide Teile scrollen eigenständig */
@media (max-width: 640px){
  #newsOverlay .news-arch-body{
    grid-template-columns: 1fr;
    grid-auto-rows: auto auto;
  }
  /* Damit die Liste nicht zu lang wird: halbe Viewport-Höhe */
  #newsOverlay .news-arch-list{
    max-height: min(48svh, 460px);
  }
  /* Detail darunter nutzt den restlichen Platz */
  #newsOverlay .news-arch-detail{
    max-height: calc(100svh - 24px - 140px); /* Titel+Text+Abstände grob einkalkuliert */
  }
}

/* Kleiner Feinschliff: Panel-Footer absetzen, aber nicht sticky */
#newsOverlay .panel .panel-footer{
  margin-top: 8px;
}



  #levelScreen .choice {
    outline-style:groove;
    outline-color: #fdfdfd;
    outline-width: 1px;
  }

  /* === Kurosawa-Modus === */
#game-root { position: relative; }

#game,
#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

#fx {
  pointer-events: none;   /* Overlay klickt nicht */
}

/* Nur die Haupt-Canvas wird entsättigt */
#game.kurosawa {
  filter: grayscale(1) contrast(1.08);
}

/* Pause-Menü: Mod-Leiste unter der Kachel über volle Breite,
   ohne die bestehende Grid-Struktur der Tile zu verändern */
#pauseWeapons .tile > .modbar{
  grid-column: 1 / -1;          /* spannt über beide Spalten der Tile */
 
   padding-top: 8px;
   display: flex;                /* ⬅️ erzwingt horizontales Layout */
   flex-wrap: wrap;
   gap: 4px 4px;
   align-items: center;
   justify-content: center;
   border-top: 1px solid rgba(255,255,255,.08);
 }

/* (Belasse deine existierenden .wmod-Styles. Falls noch nicht vorhanden:) */
#pauseWeapons .wmod{
  position: relative;
  width: 42px; height: 42px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--accent-2, #22d3ee), var(--accent, #7c3aed));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  overflow: hidden;
}
#pauseWeapons .wmod .ic{
  font-size: 10px; font-weight: 800; letter-spacing: .2px;
  color: #0b0d10; mix-blend-mode: screen; opacity:.95;
}
#pauseWeapons .wmod .num{
  position: absolute; right: -3px; bottom: -3px;
  font-size: 14px; line-height: 1;
  background: rgba(17,24,39,.92);
  color: #e5e7eb;
  padding: 1px 4px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
}
#pauseWeapons .wmod[data-lv="0"]{
  filter: grayscale(1) contrast(.9) brightness(.8);
  opacity: .6;
}

#pauseWeapons .wmod[data-lv="0"] .num{ display: none; }


#pauseWeapons .wmod{
  background: #0f172a url('assets/mods/default.jpg') center/cover no-repeat;
}
#pauseWeapons .wmod[data-mod="dmg"]{ background-image: url('assets/mods/dmg.jpg'); }
#pauseWeapons .wmod[data-mod="crit"]{ background-image: url('assets/mods/crit.jpg'); }
#pauseWeapons .wmod[data-mod="rate"]{ background-image: url('assets/mods/rate.jpg'); }
#pauseWeapons .wmod[data-mod="aoe"]{ background-image: url('assets/mods/aoe.jpg'); }
#pauseWeapons .wmod[data-mod="beams"]{ background-image: url('assets/mods/beams.jpg'); }
#pauseWeapons .wmod[data-mod="burst"]{ background-image: url('assets/mods/burst.jpg'); }
#pauseWeapons .wmod[data-mod="cool"]{ background-image: url('assets/mods/cool.jpg'); }
#pauseWeapons .wmod[data-mod="count"]{ background-image: url('assets/mods/count.jpg'); }
#pauseWeapons .wmod[data-mod="dur"]{ background-image: url('assets/mods/dur.jpg'); }
#pauseWeapons .wmod[data-mod="knockback"]{ background-image: url('assets/mods/knockback.jpg'); }
#pauseWeapons .wmod[data-mod="lifesteal"]{ background-image: url('assets/mods/lifesteal.jpg'); }
#pauseWeapons .wmod[data-mod="mag"]{ background-image: url('assets/mods/mag.jpg'); }
#pauseWeapons .wmod[data-mod="pierce"]{ background-image: url('assets/mods/pierce.jpg'); }
#pauseWeapons .wmod[data-mod="radius"]{ background-image: url('assets/mods/radius.jpg'); }
#pauseWeapons .wmod[data-mod="range"]{ background-image: url('assets/mods/range.jpg'); }
#pauseWeapons .wmod[data-mod="reload"]{ background-image: url('assets/mods/reload.jpg'); }
#pauseWeapons .wmod[data-mod="second"]{ background-image: url('assets/mods/second.jpg'); }
#pauseWeapons .wmod[data-mod="shrap"]{ background-image: url('assets/mods/shrap.jpg'); }
#pauseWeapons .wmod[data-mod="speed"]{ background-image: url('assets/mods/speed.jpg'); }
#pauseWeapons .wmod[data-mod="stun"]{ background-image: url('assets/mods/stun.jpg'); }

/* === Pause-Menü: Waffen-Level „Fieberthermometer“ ====================== */
#pauseWeapons .lvl-thermo{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 4px;
}

#pauseWeapons .lvl-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 1px 3px rgba(0,0,0,.25) inset, 0 0 0 1px rgba(0,0,0,.25);
  background: rgba(255,255,255,.08);
  transform: translateZ(0);
}

/* aktive Stufen */
#pauseWeapons .lvl-dot.on{
  background: linear-gradient(180deg, var(--accent-2,#22d3ee), var(--accent,#7c3aed));
  border-color: rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.25),
    0 0 8px rgba(124,58,237,.35);
}

/* inaktive Stufen */
#pauseWeapons .lvl-dot.off{
  filter: grayscale(1) contrast(.9) brightness(.9);
  opacity: .6;
}

/* EVO-Marker (Lvl 4 & 8) – andere Farbe */
#pauseWeapons .lvl-dot.evo{
  border-width: 2px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.25),
    0 0 10px rgba(245,158,11,.45);
}
#pauseWeapons .lvl-dot.evo.on{
  background: linear-gradient(180deg, #fbbf24, #f59e0b); /* warmes Gold/Orange */
  border-color: rgba(255,255,255,.75);
}
#pauseWeapons .lvl-dot.evo.off{
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.55);
}

/* sehr kleine Geräte: minimal kleiner */
@media (max-width: 420px){
  #pauseWeapons .lvl-dot{ width: 10px; height: 10px; }
}

#pauseWeapons .thumb-wrap{
  position: relative;
  width: 56px; height: 56px;            /* matcht dein aktuelles Thumb-Maß */
  border-radius: 12px;
  overflow: visible;                     /* Badge darf „überstehen“ */
}
#pauseWeapons .thumb-wrap .thumb{
  width: 100%; height: 100%;
  object-fit: cover;
  background:#111;
  border-radius: 12px;
  display:block;
}
/* Badge-Position NUR im Thumbnail überlagern */
 #pauseWeapons .thumb-wrap .badge-evo{
   position: absolute; left: 6px; top: 6px;
   background: linear-gradient(180deg, #f59e0b, #d97706);
   color: #111; font-weight: 800; font-size: 10px; line-height: 1;
   padding: 3px 6px; border-radius: 999px;
   border: 1px solid rgba(0,0,0,.35);
   box-shadow: 0 4px 12px rgba(0,0,0,.35);
 }
/* Optional: abgestufter Glow */
#pauseWeapons .badge-evo.badge-evo1{ box-shadow: 0 0 10px 4px rgba(245,158,11,.5); }
#pauseWeapons .badge-evo.badge-evo2{ box-shadow: 0 0 12px 6px rgba(255,215,0,.7); }


/* ==== Pause-Panel: KPI-Stat-Karten ===================================== */
#pauseStats.stat-cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px; grid-template-columns:1fr;
}
@media (min-width:560px){
  #pauseStats.stat-cards{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  #pauseStats.stat-cards{ grid-template-columns:1fr 1fr 1fr; }
}

#pauseStats .stat-card{
  display:grid; gap:8px; padding:10px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
}
#pauseStats .stat-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13px; color: var(--muted);
}
#pauseStats .stat-kpi{
  display:flex; align-items:baseline; gap:6px;
}
#pauseStats .stat-kpi .val{
  font-size:18px; font-weight:700; color: var(--text);
}
#pauseStats .stat-kpi .unit{
  font-size:12px; color: var(--muted);
}
#pauseStats .stat-badge{
  font-size:11px; padding:2px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25); color:#e5e7eb;
}
#pauseStats .stat-bar{
  height:8px; border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
}
#pauseStats .stat-bar .fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
/* Varianten */
#pauseStats .ok    { color: var(--ok); }
#pauseStats .danger{ color: var(--danger); }

/* KPI-Reihe (Welle/Kills/Zeit/Gold) – jetzt auch unter der XP-Bar nutzbar */
.kpi-row{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content: center;
}
.kpi-chip{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:#cbd5e1;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.kpi-chip b{ font-size:13px; color:#fff; }

/* Abstand unter der XP-Bar für die neue KPI-Zeile im Pause-Menü */
#pauseKpi{
  margin-top: 8px;
}
/* ==== Pause-Panel: Stat-Zeilen (Label | Value in einer Zeile) ==== */
#pauseStats .stat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:14px;
}
#pauseStats .stat-row .label{
  color: var(--muted);
}
#pauseStats .stat-row .value{
  font-weight:700;
  color: var(--text);
}
/* ==== Pause-Panel: Run-Upgrades als Karten ================================= */
#pausePassives.run-cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px; grid-template-columns:1fr;
}
@media (min-width:560px){
  #pausePassives.run-cards{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  #pausePassives.run-cards{ grid-template-columns:1fr 1fr 1fr; }
}

#pausePassives .run-card{
  display:grid; gap:8px; padding:10px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
}
#pausePassives .run-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:14px;
}
#pausePassives .run-row .label{ color: var(--muted); }
#pausePassives .run-row .value{ font-weight:700; color: var(--text); }
#pausePassives .sub{
  font-size:12px; color: var(--muted);
}

/* ==== Pause-Panel: Stats als eine Gruppenkachel ========================= */
#pauseStats.stat-cards .stat-card.stat-group{
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
}
#pauseStats .stat-lines{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
/* Zeile: Label | Wert (eine Zeile) */
#pauseStats .stat-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:14px;
}
#pauseStats .stat-row .label{ color: var(--muted); }
#pauseStats .stat-row .value{ font-weight:700; color: var(--text); }
/* HP-Balken direkt unter der HP-Zeile */
#pauseStats .stat-bar{
  height:8px; border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
}
#pauseStats .stat-bar .fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* --- Tooltip für Waffen-Mod-Piktogramme --------------------------------- */
.wmod-tip{
  position: fixed;
  z-index: 10000;
  max-width: 220px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.3;
  color: #e5e7eb;
  background: rgba(17,24,39,.92);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0;
  transform: translate(-50%, -4px);
  pointer-events: none;              /* Klicks gehen „durch“ */
  transition: opacity .12s ease, transform .12s ease;
  white-space: normal;               /* lange Texte umbrechen */
  word-break: break-word;            /* keine Überläufe nach links/rechts */
}
.wmod-tip.show{
  opacity: 1;
  transform: translate(-50%, 0);
}
.wmod-tip::after{
  content:"";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent rgba(17,24,39,.92) transparent;
}
/* Wenn links an die Kante eingerastet: keine Mittel-Zentrierung */
.wmod-tip.edge-left{
  transform: translate(0, 0); /* linke Kante = exakte X-Position */
}
.wmod-tip.edge-left::after{
  left: 12px; transform: none; /* Pfeil näher an den Badge */
}

/* Wenn rechts an die Kante eingerastet */
.wmod-tip.edge-right{
  transform: translate(-100%, 0); /* rechte Kante = exakte X-Position */
}
.wmod-tip.edge-right::after{
  left: calc(100% - 12px); transform: none;
}

/* ==================== Pause: Evo-Ring, Badges, Thermometer ==================== */
 #pauseWeapons .tile{
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 12px 14px;
   align-items: start;
 }
 /* Bild-Container mit ruhigem Innen-Ring */
 #pauseWeapons .thumb-wrap{
  width: 96px; height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background:#0b1020;
  display:grid; place-items:center;
  box-shadow: none; /* kein innerer Ring mehr – Bild bleibt gleich groß */
 }
#pauseWeapons .thumb-wrap.thumb-ring.ring-e1{
  /* dünner Außen-Rand, verkleinert das Bild nicht */
  box-shadow: 0 0 0 2px #f59e0b;
}
#pauseWeapons .thumb-wrap.thumb-ring.ring-e2{
  box-shadow: 0 0 0 2px #fbbf24;
}
#pauseWeapons .thumb-wrap.thumb-ring.ring-both{
  /* bei beiden Evolutions: Rand in Evo2-Farbe (Gold) */
  box-shadow: 0 0 0 2px #fbbf24;
}
 #pauseWeapons .thumb{
   width:100%; height:100%; object-fit:cover; display:block;
 }

 /* Evo-Badges unter dem Bild */
 #pauseWeapons .evo-badges{
   grid-column: 1 / span 1;
   display:flex; gap:6px;
   align-items:center;
   margin-top: 4px;
 }
 #pauseWeapons .badge-evo,
 #pauseWeapons .badge-evo2{
   display:inline-flex; align-items:center; justify-content:center;
   min-width:44px; height:20px; padding:0 8px;
   border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.2px;
   border:1px solid transparent; user-select:none;
 }
 #pauseWeapons .badge-evo.off,
 #pauseWeapons .badge-evo2.off{
   color:#94a3b8; background:#0b1020; border-color:#1f2937;
 }
 #pauseWeapons .badge-evo.on{
   color:#111827; background:#f59e0b; border-color:#f59e0b; /* Amber */
 }
 #pauseWeapons .badge-evo2.on{
   color:#111827; background:#fbbf24; border-color:#fbbf24; /* Gold */
 }

 /* Rechte Spalte (Titel/Stats/Thermo) */
 #pauseWeapons .tile > div:nth-of-type(2){
   grid-column: 2 / span 1;
 }
 #pauseWeapons h4{ margin:2px 0 6px; font-weight:600; letter-spacing:.2px; }
 #pauseWeapons .meta-row{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; }
 #pauseWeapons .stat-list--weapon{ display:grid; gap:4px 12px; grid-template-columns:1fr 1fr; }

 /* Mikro-Thermometer-Zeile */
 #pauseWeapons .wthermo-row{
   margin: 8px 0 8px;
   display:flex; align-items:center;
 }
 #pauseWeapons .wthermo-row .evo-thermo{
   width:100%; height:26px; display:block;
 }

 /* Linie über den Piktogrammen */
#pauseWeapons .wmods-sep{
   grid-column: 1 / -1;
   height:1px;
   background: linear-gradient(to right, transparent, #334155, transparent);
   margin: 6px 0 6px;
 }

/* Modbar: vorhandene Optik bleibt; hier nur Sicherheits-Layout */
 #pauseWeapons .modbar{
   grid-column: 1 / -1;
 }

 /* Responsive: schmalere Kachel */
 @media (max-width: 520px){
   #pauseWeapons .tile{
     grid-template-columns: 84px 1fr;
     gap: 10px 12px;
   }
   #pauseWeapons .thumb-wrap{ width:84px; height:84px; border-radius:10px; }
   #pauseWeapons .wthermo-row .evo-thermo{ height:24px; }
   #pauseWeapons .stat-list--weapon{ grid-template-columns:1fr; }
 }
 
 /* Linke Spalte: Thumbnail + vertikale Badges darunter */
 #pauseWeapons .thumbcol{
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 /* Badgeliste UNTER dem Bild: vertikal stapeln & statisch */
 #pauseWeapons .evo-badges{
   display: flex;
   flex-direction: column;   /* untereinander */
   align-items: center;
   gap: 6px;
   margin-top: 15px;
 }
 #pauseWeapons .evo-badges .badge-evo,
 #pauseWeapons .evo-badges .badge-evo2{
   position: static;         /* NICHT absolut hier */
   min-width: 56px;
   height: 22px;
 }

/* === Kontakt-Karte / Formular === */
.card.contact .about-card { display: grid; gap: 10px; }
.contact-form { display: grid; gap: 10px; }
.contact-form .form-group {
  display: grid; gap: 6px;
}
.contact-form label {
  font-weight: 600; color: var(--text);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--muted); }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}
.contact-form .submit-button {
  align-self: start;
  /* nutzt bereits .btn-Grundstil – hier nur etwas Feinschliff */
  background: linear-gradient(180deg, var(--accent), #5b21b6);
}
.contact-form .form-hint {
  margin: 6px 2px 0;
  font-size: 12px; color: var(--muted);
}
.about-card p {
  margin: 0;
}
@media (min-width: 640px){
  .contact-form .form-group--row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
}

/* === News mit Bild ======================================================= */
.news-item .news-media{
  margin: 10px 0 12px;
}
.news-item .news-media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.news-item .news-media figcaption{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  opacity: .9;
}

/* Optional: kompakter auf sehr kleinen Screens */
@media (max-width: 420px){
  .news-item .news-media figcaption{ font-size: 11px; }
}

#pauseRampage {
  margin-top: 20px;
}
/* Rampage-Boost-Highlight in den Stats (Pausemenü) */
.stat-row .value.ramp-boost{
  color: #ef4444 !important;                /* kräftiges Rot */
  font-weight: 700;              /* etwas fetter für Kontrast */
  text-shadow:
    0 0 6px rgba(239,68,68,.45), /* weicher roter Glow */
    0 0 12px rgba(239,68,68,.25);
  transition: color .15s ease, text-shadow .15s ease;
}
/* optional: leichtes „Anblinken“ beim Öffnen/Neu-Rendern */
.stat-row .value.ramp-boost[title]{
  filter: saturate(1.08) contrast(1.03);
}

/* Rampage – Godlike-Badge */
.rg-badge{
  margin-top: .5rem;
  padding: .25rem .5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .03em;
  background: linear-gradient(90deg, #f8e38b, #f0c13a);
  color: #5a3d00;
  box-shadow: 0 0 10px rgba(240, 195, 58, .5), inset 0 0 6px rgba(255,255,255,.6);
  user-select: none;
}

/* Nur wenn du an die Card-Styles kommst – sonst ignorieren */
.tc-card img { 
  width: 100%;
  height: auto;
  display: block;
  /* Falls Bild als Background eingesetzt wird: object-fit: cover im <img>-Fall ersetzen */
}

/* ===== Sound-Icon Button ===== */
.icon-btn{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  /* Touch/Hit-Area */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 10px;
  color: var(--text);
  pointer-events: auto; /* falls in einem pointer-events:none Container */
}
.icon-btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
.icon{
  width: 25px;
  height: 25px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
}
/* Standard: "AN" sichtbar, "AUS" versteckt */
.icon--off{ display: none; }
/* Wenn gemutet: "AUS" zeigen, "AN" verstecken */
.icon-btn.is-muted .icon--on{ display: none; }
.icon-btn.is-muted .icon--off{ display: block; }
/* ===== Mute-Durchstreichkreuz farbig (unabhängig vom Icon) ===== */
.icon-btn .cross{
  fill: none;
  stroke: var(--icon-cross-color, var(--accent)); /* eigene Var oder fallback Akzent */
  stroke-width: 2.75; /* leicht dicker für mobile Sichtbarkeit */
  stroke-linecap: round;
}

/* Optional: beim Hover/Fokus etwas stärker hervorheben */
.icon-btn:is(:hover, :focus-visible) .cross{
  stroke-width: 3;
}

/* Optional: Wenn du im stummen Zustand das ganze Icon abdunkeln willst,
   bleibt das Kreuz trotzdem farbig auffällig */
.icon-btn.is-muted{
  color: var(--text-muted, #777); /* optionaler Ton für den Lautsprecherkörper */
}