@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=UnifrakturCook:wght@700&display=swap');
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#3a1f1f,#0a0808 70%),linear-gradient(180deg,#160909,#050505);color:white;min-height:100vh;padding:16px}
.app{width:100%;max-width:480px;margin:0 auto}
.panel{background:rgba(8,8,12,.9);border:1px solid rgba(255,180,80,.18);border-radius:28px;padding:22px;box-shadow:0 25px 90px rgba(0,0,0,.6)}
.logo{text-align:center;font-family:Georgia,serif;font-size:42px;font-weight:900;letter-spacing:2px;color:#ffb35c;text-shadow:0 0 18px rgba(255,80,0,.8)}
.logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:18px;
}

.main-logo{
  display:block;
  width:100%;
  max-width:320px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(255,120,30,.35));
}
.sub{text-align:center;color:#c6a98a;margin-bottom:18px}
.card{
  background:
    linear-gradient(180deg,rgba(20,16,15,.88),rgba(8,7,9,.88));
  border:1px solid rgba(255,180,80,.18);
  border-radius:22px;
  padding:16px;
  margin-top:14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 14px 35px rgba(0,0,0,.35);
}
input{width:100%;padding:15px;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:white;font-size:16px;margin-top:10px}
button{width:100%;padding:15px;border:0;border-radius:15px;margin-top:12px;font-weight:900;font-size:15px;color:white;background:linear-gradient(135deg,#b74719,#ffb23e);cursor:pointer}
button.secondary{background:rgba(255,255,255,.12)}
button.danger{background:#5c2230}
.hidden{display:none}
.small{color:#bfb3a8;font-size:13px;line-height:1.45}
.menu button{font-family:Georgia,serif;font-size:18px;letter-spacing:2px;background:rgba(0,0,0,.25);border:1px solid rgba(255,180,80,.25)}
.menu button.primary{
  background:
    url("/assets/ui/button-highlight.png") center center / 100% 100% no-repeat !important;
  border:none !important;
  box-shadow:none !important;
  min-height:76px;
  padding:0 18px;
  color:#fff4df;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 12px rgba(255,120,30,.55);
}
.hero{background:linear-gradient(135deg,rgba(255,120,30,.18),rgba(255,255,255,.06))}
.enemy,.item,.ladder-row,.codex-row,.bestiary-row{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:12px;margin-top:12px}

.codex-row.locked{
  opacity:.45;
  filter:grayscale(1);
}

.codex-row.locked b{
  color:#aaa;
}

.codex-row .drop-info{
  margin-top:4px;
}
.icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#3b2418,#120c0a);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.info{flex:1}
.tier-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.tier-grid button{margin:0}
.tier-card{
  background:linear-gradient(135deg,#bf5018,#f9a02f);
  border-radius:16px;
  padding:10px;
}

.bestiary-row.locked{
  opacity:.45;
  filter:grayscale(1);
}

.bestiary-row.locked b{
  color:#aaa;
}

.bestiary-row .drop-list{
  margin-top:4px;
}

.tier-main{
  background:transparent;
  margin:0;
  padding:8px;
  text-align:left;
}
.tier-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.tier-actions button{
  margin:0;
  padding:10px;
  font-size:12px;
  background:rgba(0,0,0,.25);
}
.result{background:rgba(255,255,255,.08);border-radius:18px;padding:14px;margin-top:14px}
.log{max-height:180px;overflow:auto;background:rgba(0,0,0,.25);padding:10px;border-radius:12px;margin-top:10px}
.good{color:#8dffb0}.warn{color:#ffcf70}
.bad{color:#ff7070}
.enemy-rank-0{color:#fff}
.enemy-rank-1{color:#ffd76a}
.enemy-rank-2{color:#ff9b28}
.enemy-rank-3{color:#ff4f4f}
.enemy-rank-4,.enemy-rank-5{
  color:#d8b4ff;
  text-shadow:0 0 12px #9d4edd;
}
.r-Normal{color:#ddd}.r-Magisch{color:#6aa6ff}.r-Selten{color:#ffd76a}.r-Episch{color:#c06aff}.r-Legendär{color:#ff8a2b;text-shadow:0 0 10px #ff6b00}.r-Unique{color:#ff4fd8;text-shadow:0 0 10px #ff4fd8}.r-ShinyUnique{color:#7dfff2;text-shadow:0 0 12px #7dfff2}
.topbar{display:flex;justify-content:space-between;gap:8px;align-items:center}
.back{width:auto;padding:10px 14px;margin:0;background:rgba(255,255,255,.12)}
.chance{margin-top:6px;height:8px;background:rgba(0,0,0,.35);border-radius:99px;overflow:hidden}
.chance-fill{height:100%;background:linear-gradient(90deg,#d83b28,#ffc13d,#64ff8d)}
.rank{width:42px;height:42px;border-radius:14px;background:rgba(255,180,80,.15);display:flex;align-items:center;justify-content:center;font-weight:900;color:#ffbd62}
.sell-btn{background:rgba(255,255,255,.12)}
.cooldown-btn{
  background:linear-gradient(90deg,#ffb23e 0%, rgba(255,255,255,.12) 0%);
  opacity:.55;
  transition:background .2s linear, opacity .2s linear;
}
.cooldown-btn.ready{
  opacity:1;
  background:linear-gradient(135deg,#b74719,#ffb23e);
}

.auto-repeat-btn.auto-on{
  opacity:1;
  border:1px solid rgba(255,220,120,.75);
  box-shadow:0 0 0 0 rgba(255,180,60,.7), 0 0 22px rgba(255,150,30,.65);
  animation:autoPulse 1.1s infinite;
}

@keyframes autoPulse{
  0%{box-shadow:0 0 0 0 rgba(255,180,60,.55), 0 0 18px rgba(255,150,30,.5)}
  70%{box-shadow:0 0 0 9px rgba(255,180,60,0), 0 0 28px rgba(255,210,90,.85)}
  100%{box-shadow:0 0 0 0 rgba(255,180,60,0), 0 0 18px rgba(255,150,30,.5)}
}

.tree-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:12px;
}

.tree-tabs button{
  margin:0;
  padding:10px;
  font-size:12px;
}

.tree-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.tree-header button{
  width:auto;
  padding:10px 14px;
}

.tree-wrap{
  margin-top:14px;
  width:100%;
  height:520px;
  overflow:auto;
  border-radius:20px;
  background:radial-gradient(circle at center,#1f1712,#070505 72%);
  border:1px solid rgba(255,180,80,.22);
  position:relative;
  touch-action:pan-x pan-y;
}

.tree-svg{
  width:1200px;
  height:1200px;
  display:block;
}

.node-arrow{
  fill:#ffcf70;
  stroke:#ffcf70;
  stroke-width:1;
  cursor:pointer;
  pointer-events:auto;
}

.node-arrow-bg{
  fill:rgba(0,0,0,.0);
  stroke:none;
  cursor:pointer;
}

.sell-chip{
  width:28px;
  height:28px;
  border-radius:7px;
  display:inline-block;
  border:2px solid rgba(255,255,255,.18);
  opacity:.35;
  cursor:pointer;
}

.sell-chip.active{
  opacity:1;
  box-shadow:0 0 12px rgba(255,220,120,.55);
  border-color:white;
}

#skillNodeInfo{
  margin-top:10px;
  border-color:rgba(255,180,80,.35);
}

.skill-node{
  cursor:pointer;
}

.skill-node.locked{
  opacity:.14;
}

.skill-node circle{
  fill:#15110f;
  stroke:#736050;
  stroke-width:3;
}

.skill-node.available circle{
  stroke:#d5a24c;
}

.skill-node.active circle{
  fill:#ffb23e;
  stroke:#fff0aa;
  filter:drop-shadow(0 0 10px #ff9b28);
}

.skill-node.notable circle{
  stroke-width:5;
}

.skill-node text{
  fill:#f3d39a;
  font-size:12px;
  font-weight:900;
  pointer-events:none;
}

.tree-line{
  stroke:rgba(255,180,80,.22);
  stroke-width:2;
}

.tree-line.active{
  stroke:rgba(255,210,90,.85);
  stroke-width:3;
}

.tree-center{
  fill:#ffb23e;
  stroke:#fff0aa;
  stroke-width:5;
  filter:drop-shadow(0 0 12px #ff9b28);
}


.token-visual{
  position:relative;
  margin:14px auto;
  width:220px;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  background:radial-gradient(circle,#2a1b10,#050505 72%);
  overflow:hidden;
  border:1px solid rgba(255,180,80,.25);
}

.token-img{
  width:160px;
  height:160px;
  object-fit:contain;
  z-index:2;
  filter:drop-shadow(0 0 18px rgba(255,180,60,.35));
}

.token-visual.upgrade .token-img{
  animation:tokenUpgrade 1s ease-in-out;
}

.token-visual.break .token-img{
  animation:tokenBreak .9s ease-in-out;
  filter:grayscale(1) drop-shadow(0 0 18px rgba(80,80,80,.8));
}

.token-visual::after{
  content:"";
  position:absolute;
  inset:-30%;
  opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,190,60,.7),transparent 60%);
  z-index:1;
  pointer-events:none;
}

.token-visual.upgrade::after{
  animation:tokenFlash 1s ease-in-out;
}

.token-visual.break::after{
  background:radial-gradient(circle,rgba(60,60,60,.8),rgba(0,0,0,.9),transparent 70%);
  animation:tokenSmoke 1.1s ease-in-out;
}

.token-choice-hidden{
  display:none;
}

.token-choice-show{
  display:block;
}

.main-menu{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.feature-action-card{
  position:relative;
  overflow:hidden;
  min-height:154px;
  border-radius:22px;
  padding:20px;
  border:1px solid rgba(255,170,70,.42);
  background:
    radial-gradient(circle at 75% 50%,rgba(255,115,25,.16),transparent 36%),
    linear-gradient(135deg,rgba(80,30,14,.92),rgba(9,8,10,.96));
  box-shadow:
    0 0 22px rgba(255,95,20,.22),
    inset 0 0 0 1px rgba(255,255,255,.04);
  cursor:pointer;
}

.feature-action-card:active{
  transform:scale(.99);
}

.feature-action-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 40%,rgba(255,190,90,.20),transparent 22%),
    linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.55));
  pointer-events:none;
}

.feature-action-content{
  position:relative;
  z-index:2;
  max-width:58%;
}

.feature-title{
  font-family:Georgia,serif;
  font-size:28px;
  font-weight:900;
  letter-spacing:2px;
  color:#ffd39a;
  text-shadow:0 0 12px rgba(255,110,25,.55);
  margin-bottom:14px;
}

.feature-sep{
  width:150px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,200,120,.9),transparent);
  margin-bottom:14px;
}

.feature-enemy{
  font-weight:900;
  color:#fff3df;
  margin-bottom:4px;
}

.feature-meta{
  color:#cdb9a8;
  font-size:13px;
  line-height:1.45;
}

.feature-wolf{
  position:absolute;
  right:-18px;
  bottom:-12px;
  width:50%;
  height:115%;
  z-index:1;
  opacity:.95;
  background:
    radial-gradient(circle at 55% 45%,rgba(255,90,20,.20),transparent 24%),
    linear-gradient(90deg,transparent,rgba(0,0,0,.12));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:92px;
  filter:drop-shadow(0 0 20px rgba(255,80,20,.35));
}

.feature-wolf::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(20,10,8,.82),transparent 42%);
}

.menu-row{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:58px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(255,180,90,.22);
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)),
    rgba(0,0,0,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 8px 18px rgba(0,0,0,.22);
  cursor:pointer;
}

.menu-row:active{
  transform:scale(.99);
}

.menu-row-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,170,70,.10);
  border:1px solid rgba(255,180,90,.16);
  font-size:18px;
  flex-shrink:0;
}

.menu-row-label{
  flex:1;
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:900;
  letter-spacing:2px;
  color:#f4dfc0;
}

.menu-row-arrow{
  color:#b98b54;
  font-size:24px;
  font-weight:900;
}

.menu-row.big{
  min-height:92px;
  align-items:flex-start;
  padding:14px 16px;
  position:relative;
  overflow:hidden;
  border-color:rgba(255,150,60,.45);
  background:
    radial-gradient(circle at 82% 50%,rgba(255,100,30,.15),transparent 35%),
    linear-gradient(135deg,rgba(80,35,16,.70),rgba(0,0,0,.25));
}

.menu-row.big .menu-row-label{
  font-size:28px;
  color:#ffd39a;
  text-shadow:0 0 12px rgba(255,100,20,.45);
}

.menu-row-sub{
  color:#cdb9a8;
  font-size:13px;
  margin-top:5px;
  line-height:1.35;
}

.menu-row-text{
  flex:1;
  z-index:2;
}

.menu-row-art{
  position:absolute;
  right:-10px;
  bottom:-16px;
  font-size:74px;
  opacity:.88;
  filter:drop-shadow(0 0 16px rgba(255,80,20,.35));
}

/* === UI ASSET TEST === */

.panel{
  background:
    radial-gradient(circle at top,rgba(255,120,30,.10),transparent 28%),
    linear-gradient(180deg,rgba(8,8,12,.96),rgba(5,5,7,.98));
  border:1px solid rgba(255,180,80,.20);
  border-radius:28px;
  padding:22px;
  box-shadow:
    0 25px 90px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

.menu button{
  background:
    url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  border:none !important;
  box-shadow:none !important;
  min-height:68px;
  padding:0 18px;
  margin-top:8px;
  color:#fff4df;
  text-shadow:
    0 2px 3px rgba(0,0,0,.95),
    0 0 10px rgba(255,120,30,.35);
}

.menu button.primary{
  background:
    url("/assets/ui/button-wide.png") center center / 100% 100% no-repeat !important;
  min-height:72px;
}

.back{
  background:
    url("/assets/ui/button-back.png") center center / 100% 100% no-repeat !important;
  border:none !important;
  box-shadow:none !important;
  min-width:110px;
  height:54px;
  padding:0 16px !important;
  color:#fff4df;
  text-shadow:0 2px 3px rgba(0,0,0,.95);
}

.menu-row{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  border:none !important;
  box-shadow:none !important;
  min-height:62px;
  padding:0 22px;
  cursor:pointer;
}

.menu-row.highlight{
  background:
    url("/assets/ui/button-highlight.png") center center / 100% 100% no-repeat !important;
  min-height:76px;
}

.menu-row-label{
  width:100%;
  flex:none;
  text-align:center;
  font-family:Georgia,serif;
  font-size:22px;
  font-weight:900;
  letter-spacing:2px;
  color:#fff4df;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 10px rgba(255,120,30,.45);
}

.menu-row.highlight .menu-row-label{
  font-size:24px;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 14px rgba(255,130,30,.75);
}

.home-shell{
  background:
    url("/assets/ui/panel-main.png") center top / 100% 100% no-repeat,
    linear-gradient(180deg,rgba(18,10,8,.96),rgba(6,5,7,.98));
  border-radius:28px;
  padding:22px;
  border:1px solid rgba(255,180,80,.22);
  box-shadow:
    0 18px 50px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

@media(max-width:420px){
  .feature-title{
    font-size:24px;
  }

  .feature-action-content{
    max-width:62%;
  }

  .feature-wolf{
    font-size:78px;
    right:-24px;
  }

  .menu-row-label{
    font-size:18px;
  }
}

@keyframes tokenUpgrade{
  0%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 10px gold)}
  45%{transform:scale(1.22) rotate(8deg);filter:brightness(3) drop-shadow(0 0 45px white)}
  100%{transform:scale(1);filter:brightness(1.2) drop-shadow(0 0 22px gold)}
}

@keyframes tokenBreak{
  0%{transform:scale(1)}
  20%{transform:translate(-4px,2px) rotate(-5deg)}
  40%{transform:translate(5px,-3px) rotate(6deg)}
  60%{transform:translate(-3px,4px) rotate(-8deg)}
  100%{transform:scale(.92);opacity:.8}
}

@keyframes tokenFlash{
  0%,30%{opacity:0}
  50%{opacity:1}
  100%{opacity:0}
}

@keyframes tokenSmoke{
  0%{opacity:0}
  40%{opacity:.9}
  100%{opacity:0}
}


/* === PATCH: 3-TEILE HOME PANEL === */

.panel{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

#loginLogo.hidden{
  display:none !important;
}

.home-shell{
  width:100%;
  margin:0 auto;
  filter:drop-shadow(0 18px 45px rgba(0,0,0,.55));
}

.home-panel-top{
  width:100%;
  height:120px;
  background:url("/assets/ui/panel-top.png") center bottom / 100% 100% no-repeat;
  pointer-events:none;
}

.home-panel-middle{
  width:100%;
  background:url("/assets/ui/panel-middle.png") center top / 100% auto repeat-y;
}

.home-panel-bottom{
  width:100%;
  height:120px;
  background:url("/assets/ui/panel-bottom.png") center top / 100% 100% no-repeat;
  pointer-events:none;
}

.home-inner{
  padding:0 24px 0 24px;
  margin-top:-72px;
  margin-bottom:-64px;
  position:relative;
  z-index:2;
}

.home-logo{
  margin:0 0 18px 0;
}

.main-logo{
  display:block;
  width:100%;
  max-width:320px;
  height:auto;
  object-fit:contain;
  margin:0 auto;
  filter:drop-shadow(0 0 12px rgba(255,120,30,.35));
}

.content-shell{
  margin-top:18px;
  background:
    linear-gradient(180deg,rgba(8,8,12,.96),rgba(3,3,5,.98));
  border:1px solid rgba(255,180,80,.14);
  border-radius:24px;
  padding:14px;
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

#screenBattle,
#screenDifficulty,
#screenInventory,
#screenSkilltree,
#screenShop,
#screenCodex,
#screenBestiary,
#screenLadder,
#screenOptions,
#fightResult{
  margin-top:0 !important;
}

/* Menü-Card im Panel sauberer */
.main-menu{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:8px 0 0 0 !important;
}

/* Menübuttons ohne Emojis, mittig */
.menu-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  background:
    url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  border:none !important;
  box-shadow:none !important;
  min-height:62px !important;
  padding:0 22px !important;
  cursor:pointer;
}

.menu-row.highlight{
  background:
    url("/assets/ui/button-highlight.png") center center / 100% 100% no-repeat !important;
  min-height:76px !important;
}

.menu-row-label{
  width:100% !important;
  flex:none !important;
  text-align:center !important;
  font-family:Georgia,serif !important;
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:2px !important;
  color:#fff4df !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 10px rgba(255,120,30,.45) !important;
}

.menu-row.highlight .menu-row-label{
  font-size:24px !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 14px rgba(255,130,30,.75) !important;
}

@media(max-width:420px){
  .home-panel-top{
    height:105px;
  }

  .home-panel-bottom{
    height:105px;
  }

  .home-inner{
    padding:0 20px;
    margin-top:-64px;
    margin-bottom:-56px;
  }

  .menu-row-label{
    font-size:18px !important;
  }

  .menu-row.highlight .menu-row-label{
    font-size:20px !important;
  }
}


/* === PATCH: LOGIN PANEL + EMPTY CONTENT FIX === */

.content-shell{
  display:none !important;
}

.content-shell.open{
  display:block !important;
}

.login-shell{
  margin-top:0;
}

.login-inner{
  padding-top:0;
}

#authBox{
  position:relative;
  z-index:3;
}

/* Login-Panel etwas kürzer wirken lassen */
.login-shell .home-inner{
  margin-top:-72px;
  margin-bottom:-62px;
}

/* Auf dem Login keine extra äußere Box */
.panel{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}


/* === PATCH: REMOVE OLD DOUBLE PANEL BACKGROUND === */

/* Entfernt das alte panel-main.png vom home-shell.
   Ab jetzt bestehen Login und Menü NUR aus:
   panel-top.png + panel-middle.png + panel-bottom.png */
.home-shell{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}

/* Die eigentlichen 3 Panel-Teile bleiben sichtbar */
.home-panel-top,
.home-panel-middle,
.home-panel-bottom{
  position:relative;
  z-index:1;
}

/* Inhalt liegt über den 3 Panel-Teilen */
.home-inner{
  position:relative;
  z-index:2;
}


/* === PATCH: CONTENT WÄCHST IM PANEL === */

.content-shell{
  display:none !important;
  margin-top:18px !important;
  margin-bottom:10px !important;
  background:
    linear-gradient(180deg,rgba(8,8,12,.94),rgba(3,3,5,.96)) !important;
  border:1px solid rgba(255,180,80,.14) !important;
  border-radius:24px !important;
  padding:14px !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

.content-shell.open{
  display:block !important;
}

/* Wichtig: genug Platz unten, damit der Bottom sauber nachrutscht */
.home-inner{
  margin-bottom:-35px !important;
}

.login-shell .home-inner{
  margin-bottom:-62px !important;
}


/* === PATCH: PANEL BOTTOM SPACING FIX === */

/* Bottom nicht über die letzten Buttons ziehen */
.home-inner{
  margin-bottom:25px !important;
}

/* Menü bekommt unten Luft, damit OPTIONEN nicht im Rahmen verschwindet */
#screenMenu{
  padding-bottom:18px !important;
}

/* Falls Content offen ist, bleibt auch unten Abstand */
.content-shell{
  margin-bottom:22px !important;
}

/* Login kompakt lassen */
.login-shell .home-inner{
  margin-bottom:-62px !important;
}


/* === PATCH: PANEL BOTTOM SPACING TIGHT === */

.home-inner{
  margin-bottom:-5px !important;
}

#screenMenu{
  padding-bottom:0 !important;
}

.content-shell{
  margin-bottom:10px !important;
}

.login-shell .home-inner{
  margin-bottom:-62px !important;
}


/* === PATCH: LOGIN BUTTON FIX === */

/* Login braucht unten mehr Platz, damit der zweite Button sichtbar bleibt */
.login-shell .home-inner{
  margin-bottom:10px !important;
}

/* Authbox sauber stapeln */
#authBox{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding-bottom:18px !important;
}

/* Input-Abstand normalisieren */
#authBox input{
  margin-top:0 !important;
}

/* Beide Login-Buttons sichtbar und gleich breit */
#authBox button{
  display:block !important;
  width:100% !important;
  min-height:54px !important;
  height:54px !important;
  margin-top:0 !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Registrieren Highlight */
#authBox button:first-of-type{
  background:
    url("/assets/ui/button-highlight.png") center center / 100% 100% no-repeat !important;
}

/* Login normaler dunkler Button */
#authBox button.secondary{
  background:
    url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
}

/* Login-Panel unten nicht zu früh abschneiden */
.login-shell .home-panel-middle{
  min-height:250px !important;
}

.login-shell .home-panel-bottom{
  margin-top:0 !important;
}


/* === PATCH: ENEMY ASSET CARDS === */

.enemy-select-panel{
  padding:14px !important;
  background:
    linear-gradient(180deg,rgba(8,8,12,.94),rgba(3,3,5,.98)) !important;
  border:1px solid rgba(255,180,80,.18) !important;
  border-radius:22px !important;
}

.enemy-select-subtitle{
  margin-top:8px;
  margin-bottom:12px;
}

.enemy-asset-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.enemy-asset-card{
  position:relative;
  width:100%;
  min-height:128px;
  overflow:hidden;
  border:none;
  border-radius:0;
  cursor:pointer;
  background:
    url("/assets/ui/enemy-card-default.png") center center / 100% 100% no-repeat;
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.45))
    drop-shadow(0 0 10px rgba(255,120,35,.14));
  transition:
    transform .12s ease,
    filter .12s ease;
}

.enemy-asset-card:hover{
  transform:translateY(-1px);
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.55))
    drop-shadow(0 0 16px rgba(255,120,35,.30));
}

.enemy-asset-card:active{
  transform:translateY(1px) scale(.995);
}

.enemy-card-wolf{
  background-image:url("/assets/ui/enemy-card-wolf.png");
}

.enemy-card-bat{
  background-image:url("/assets/ui/enemy-card-bat.png");
}

.enemy-card-rat{
  background-image:url("/assets/ui/enemy-card-rat.png");
}

.enemy-card-default{
  background-image:url("/assets/ui/enemy-card-default.png");
}

.enemy-asset-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.30) 38%,rgba(0,0,0,.06) 70%),
    radial-gradient(circle at 18% 70%,rgba(255,120,30,.20),transparent 34%);
  opacity:.9;
}

.enemy-asset-text{
  position:absolute;
  left:20px;
  bottom:22px;
  z-index:2;
  max-width:62%;
  pointer-events:none;
}

.enemy-asset-title{
  font-family:Georgia,serif;
  font-size:30px;
  line-height:1;
  font-weight:900;
  letter-spacing:.5px;
  color:#fff2d7;
  text-shadow:
    0 3px 5px rgba(0,0,0,.98),
    0 0 12px rgba(255,120,30,.58);
}

.enemy-asset-status{
  margin-top:8px;
  font-size:12px;
  color:#d7c3aa;
  text-shadow:0 2px 3px rgba(0,0,0,.95);
}

/* alte Enemy-Listen optisch nicht mehr verwenden */
.enemy-select-panel .enemy{
  display:none !important;
}

@media(max-width:420px){
  .enemy-asset-card{
    min-height:112px;
  }

  .enemy-asset-text{
    left:16px;
    bottom:18px;
  }

  .enemy-asset-title{
    font-size:25px;
  }
}



/* === PATCH: ENEMY CARD TEXT POSITION + GOTHIC FONT === */

/* Google Font für Gegnernamen */
.enemy-asset-text{
  position:absolute !important;
  left:20px !important;
  top:22px !important;
  bottom:auto !important;
  z-index:2 !important;
  max-width:62% !important;
  pointer-events:none !important;
}

.enemy-asset-title{
  font-family:"Cinzel Decorative", Georgia, serif !important;
  font-size:21px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:.3px !important;
  color:#fff0d2 !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 0 8px rgba(255,125,35,.65),
    0 0 16px rgba(255,70,10,.25) !important;
}

.enemy-asset-status{
  margin-top:4px !important;
  font-size:10px !important;
  line-height:1.1 !important;
  color:#d8c1a0 !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,.95) !important;
}

/* etwas weniger dunkler Schleier, weil dein Bild schon stark ist */
.enemy-asset-overlay{
  background:
    linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.22) 38%,rgba(0,0,0,.04) 70%),
    radial-gradient(circle at 18% 24%,rgba(255,120,30,.13),transparent 30%) !important;
  opacity:.82 !important;
}

@media(max-width:420px){
  .enemy-asset-text{
    left:16px !important;
    top:18px !important;
    max-width:66% !important;
  }

  .enemy-asset-title{
    font-size:18px !important;
    letter-spacing:.2px !important;
  }

  .enemy-asset-status{
    font-size:9px !important;
  }
}

\n
/* === PATCH: ENEMY NAME TRUE GOTHIC FONT === */

.enemy-asset-title{
  font-family:"Pirata One", "UnifrakturCook", Georgia, serif !important;
  font-size:26px !important;
  line-height:1 !important;
  font-weight:400 !important;
  letter-spacing:.8px !important;
  color:#fff0cf !important;
  text-shadow:
    0 3px 4px rgba(0,0,0,.98),
    0 0 10px rgba(255,120,25,.75),
    0 0 22px rgba(160,30,10,.55) !important;
}

.enemy-asset-status{
  font-family:Georgia,serif !important;
  font-size:10px !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  color:#c9a77e !important;
}

@media(max-width:420px){
  .enemy-asset-title{
    font-size:23px !important;
    letter-spacing:.6px !important;
  }
}
\n

/* === PATCH: FORCE ENEMY FONT FINAL === */

.enemy-asset-card .enemy-asset-text .enemy-asset-title,
.enemy-asset-title{
  font-family:"Pirata One", "UnifrakturCook", Georgia, serif !important;
  font-size:26px !important;
  line-height:.95 !important;
  font-weight:400 !important;
  letter-spacing:.8px !important;
  color:#fff0cf !important;
  text-transform:none !important;
  text-shadow:
    0 3px 4px rgba(0,0,0,.98),
    0 0 10px rgba(255,120,25,.85),
    0 0 22px rgba(160,30,10,.55) !important;
}

.enemy-asset-card .enemy-asset-text .enemy-asset-status,
.enemy-asset-status{
  font-family:Georgia,serif !important;
  font-size:10px !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  color:#c9a77e !important;
}

@media(max-width:420px){
  .enemy-asset-card .enemy-asset-text .enemy-asset-title,
  .enemy-asset-title{
    font-size:23px !important;
    letter-spacing:.6px !important;
  }
}


/* === PATCH: ENEMY TITLE TOP + STATUS BOTTOM === */

.enemy-asset-card{
  position:relative !important;
  overflow:hidden !important;
}

.enemy-asset-text{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  z-index:2 !important;
  pointer-events:none !important;
}

/* Name fest links oben, immer eine Zeile */
.enemy-asset-title{
  position:absolute !important;
  top:13px !important;
  left:18px !important;
  right:18px !important;
  bottom:auto !important;
  margin:0 !important;

  font-family:"Pirata One", "UnifrakturCook", Georgia, serif !important;
  font-size:26px !important;
  line-height:.95 !important;
  font-weight:400 !important;
  letter-spacing:.6px !important;

  color:#fff0cf !important;
  text-shadow:
    0 3px 4px rgba(0,0,0,.98),
    0 0 10px rgba(255,120,25,.85),
    0 0 22px rgba(160,30,10,.55) !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}

/* Status fest links unten */
.enemy-asset-status{
  position:absolute !important;
  left:18px !important;
  bottom:13px !important;
  top:auto !important;
  right:auto !important;
  margin:0 !important;

  font-family:Georgia,serif !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;

  color:#d9bd91 !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 0 8px rgba(255,120,30,.35) !important;

  white-space:nowrap !important;
}

/* Auf kleinen Displays etwas kompakter */
@media(max-width:420px){
  .enemy-asset-title{
    top:12px !important;
    left:15px !important;
    right:15px !important;
    font-size:23px !important;
    letter-spacing:.4px !important;
  }

  .enemy-asset-status{
    left:15px !important;
    bottom:11px !important;
    font-size:8px !important;
  }
}



/* === PATCH: HIDE UNLOCKED TEXT IN BATTLE ENEMY CARDS === */
.enemy-asset-card .enemy-asset-status{
  display:none !important;
}



/* === PATCH: BESTIARY V1 CARDS + DETAILS === */

.bestiary-card-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:16px;
}

.bestiary-boss-card{
  position:relative;
  min-height:112px;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  background:
    var(--bestiary-image),
    url("/assets/ui/enemy-card-bg.jpg"),
    linear-gradient(135deg,#1b120d,#070607);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  border:1px solid rgba(255,175,80,.28);
  box-shadow:
    0 12px 28px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.035);
}

.bestiary-boss-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.15) 72%,rgba(0,0,0,.48) 100%),
    radial-gradient(circle at 80% 42%,rgba(255,130,30,.14),transparent 38%);
}

.bestiary-boss-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat;
  opacity:.92;
}

.bestiary-boss-card:active{
  transform:scale(.99);
}

.bestiary-boss-title{
  position:absolute;
  z-index:3;
  left:18px;
  top:14px;
  right:92px;
  margin:0;
  font-family:"Pirata One","UnifrakturCook",Georgia,serif;
  font-size:26px;
  line-height:.95;
  font-weight:400;
  letter-spacing:.5px;
  color:#fff0cf;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  text-shadow:
    0 3px 4px rgba(0,0,0,.98),
    0 0 10px rgba(255,120,25,.78),
    0 0 22px rgba(160,30,10,.45);
}

.bestiary-boss-status{
  position:absolute;
  z-index:3;
  left:18px;
  bottom:13px;
  font-family:Georgia,serif;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#d9bd91;
  white-space:nowrap;
  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 0 8px rgba(255,120,30,.35);
}

.bestiary-boss-details{
  position:absolute;
  z-index:3;
  top:12px;
  right:14px;
  padding:5px 10px 6px 18px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#f7dfb5;
  background:
    linear-gradient(90deg,transparent,rgba(0,0,0,.65) 30%,rgba(0,0,0,.86));
  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 0 8px rgba(255,140,30,.38);
}

.bestiary-boss-card.locked{
  filter:grayscale(1);
  opacity:.55;
}

.bestiary-boss-card.locked .bestiary-boss-status{
  color:#bdb7ad;
}

.bestiary-detail-hero{
  position:relative;
  min-height:170px;
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  background:
    var(--bestiary-image),
    url("/assets/ui/enemy-card-bg.jpg"),
    linear-gradient(135deg,#1b120d,#070607);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  border:1px solid rgba(255,175,80,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 12px 28px rgba(0,0,0,.4);
}

.bestiary-detail-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.28) 52%,rgba(0,0,0,.58)),
    radial-gradient(circle at 80% 45%,rgba(255,120,30,.16),transparent 38%);
}

.bestiary-detail-title{
  position:absolute;
  left:18px;
  top:18px;
  right:18px;
  margin:0;
  font-family:"Pirata One","UnifrakturCook",Georgia,serif;
  font-size:31px;
  line-height:.95;
  font-weight:400;
  color:#fff0cf;
  text-shadow:
    0 3px 4px rgba(0,0,0,.98),
    0 0 12px rgba(255,120,25,.9),
    0 0 26px rgba(160,30,10,.52);
}

.bestiary-detail-meta{
  position:absolute;
  left:18px;
  bottom:16px;
  right:18px;
  color:#e2c9a3;
  font-size:12px;
  line-height:1.35;
  text-shadow:0 2px 3px rgba(0,0,0,.98);
}

.bestiary-detail-section{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.105);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.bestiary-detail-section h3{
  margin:0 0 8px 0;
  font-family:Georgia,serif;
  font-size:15px;
  letter-spacing:.8px;
  color:#ffe0aa;
}

.bestiary-detail-section p{
  margin:0;
  color:#d7c6b8;
  font-size:13px;
  line-height:1.45;
}

.bestiary-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.bestiary-chip{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,180,80,.18);
  color:#f1dfc8;
  font-size:12px;
  line-height:1;
}

.bestiary-loot-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:8px;
}

.bestiary-loot-row{
  padding:9px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  font-size:12px;
  color:#ddd0c4;
}

.bestiary-loot-row b{
  color:#fff0cf;
}

@media(max-width:420px){
  .bestiary-boss-card{
    min-height:104px;
  }

  .bestiary-boss-title{
    left:15px;
    top:13px;
    right:82px;
    font-size:23px;
  }

  .bestiary-boss-status{
    left:15px;
    bottom:11px;
    font-size:8px;
  }

  .bestiary-boss-details{
    right:12px;
    top:11px;
    font-size:9px;
  }

  .bestiary-detail-title{
    font-size:27px;
  }

  .bestiary-loot-grid{
    grid-template-columns:1fr;
  }
}




/* === PATCH: BESTIARY USE SIMPLE BATTLE BUTTON STYLE === */

.bestiary-card-list{
  gap:12px !important;
}

.bestiary-boss-card{
  position:relative !important;
  min-height:88px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  cursor:pointer !important;

  background:
    var(--bestiary-button-image),
    url("/assets/ui/enemy-card-bg.jpg"),
    linear-gradient(135deg,#19100c,#070607) !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;

  border:none !important;
  box-shadow:none !important;
}

/* dunkler Fade, damit Text lesbar bleibt */
.bestiary-boss-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.26) 45%,rgba(0,0,0,.22) 100%) !important;
}

/* einfacher Kampfbutton-Rahmen */
.bestiary-boss-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  opacity:1 !important;
}

/* Name links oben */
.bestiary-boss-title{
  position:absolute !important;
  z-index:3 !important;
  left:18px !important;
  top:13px !important;
  right:90px !important;
  margin:0 !important;

  font-family:"Pirata One","UnifrakturCook",Georgia,serif !important;
  font-size:24px !important;
  line-height:.95 !important;
  font-weight:400 !important;
  letter-spacing:.45px !important;

  color:#fff0cf !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;

  text-shadow:
    0 3px 4px rgba(0,0,0,.98),
    0 0 10px rgba(255,120,25,.70),
    0 0 20px rgba(160,30,10,.45) !important;
}

/* Status links unten */
.bestiary-boss-status{
  position:absolute !important;
  z-index:3 !important;
  left:18px !important;
  bottom:12px !important;

  font-family:Georgia,serif !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;

  color:#d9bd91 !important;
  white-space:nowrap !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 0 8px rgba(255,120,30,.35) !important;
}

/* Details rechts oben mit leichtem Fade */
.bestiary-boss-details{
  position:absolute !important;
  z-index:3 !important;
  top:12px !important;
  right:16px !important;
  padding:5px 8px 5px 18px !important;

  font-family:Georgia,serif !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;

  color:#f7dfb5 !important;
  background:
    linear-gradient(90deg,transparent,rgba(0,0,0,.58) 35%,rgba(0,0,0,.82)) !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 0 8px rgba(255,140,30,.38) !important;
}

.bestiary-boss-card.locked{
  filter:grayscale(1) !important;
  opacity:.56 !important;
}

/* Detailansicht benutzt eigenes großes Bild */
.bestiary-detail-hero{
  background:
    var(--bestiary-detail-image),
    var(--bestiary-button-image),
    url("/assets/ui/enemy-card-bg.jpg"),
    linear-gradient(135deg,#1b120d,#070607) !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

@media(max-width:420px){
  .bestiary-boss-card{
    min-height:82px !important;
  }

  .bestiary-boss-title{
    left:15px !important;
    top:12px !important;
    right:80px !important;
    font-size:21px !important;
  }

  .bestiary-boss-status{
    left:15px !important;
    bottom:10px !important;
    font-size:7px !important;
  }

  .bestiary-boss-details{
    top:11px !important;
    right:13px !important;
    font-size:8px !important;
  }
}




/* === PATCH: BESTIARY BUTTON IMAGES VISIBLE === */

/* Karte nutzt jetzt wirklich dein Boss-Button-Bild als Hauptbild */
.bestiary-boss-card{
  background:
    var(--bestiary-button-image),
    url("/assets/ui/enemy-card-bg.jpg"),
    linear-gradient(135deg,#19100c,#070607) !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* Fade über dem Bild, aber nicht zu stark */
.bestiary-boss-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.14) 45%,rgba(0,0,0,.18) 100%) !important;
  pointer-events:none !important;
}

/* Rahmen nur noch leicht drüber, damit er das Bild nicht schluckt */
.bestiary-boss-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  opacity:.38 !important;
  mix-blend-mode:screen !important;
}

/* Text bleibt oben drüber */
.bestiary-boss-title,
.bestiary-boss-status,
.bestiary-boss-details{
  z-index:5 !important;
}





/* === PATCH: BESTIARY PORTRAIT DETAIL IMAGES === */

/* Die Detailseite soll wie ein großes Boss-Poster wirken */
.bestiary-detail-page{
  background:
    linear-gradient(180deg,rgba(14,10,10,.96),rgba(5,5,7,.98)) !important;
  border-color:rgba(255,180,80,.22) !important;
}

/* Hochkantbild groß darstellen */
.bestiary-detail-hero{
  min-height:720px !important;
  height:72vh !important;
  max-height:860px !important;

  border-radius:22px !important;
  overflow:hidden !important;
  position:relative !important;
  margin-top:14px !important;

  background:
    var(--bestiary-detail-image),
    url("/assets/bestiary/details/detail-fallback.jpg"),
    url("/assets/ui/enemy-card-bg.jpg"),
    linear-gradient(135deg,#1b120d,#070607) !important;

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

  border:1px solid rgba(255,175,80,.30) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -180px 140px rgba(0,0,0,.72),
    0 18px 42px rgba(0,0,0,.55) !important;
}

/* Grundabdunklung: Bild bleibt sichtbar, Text bleibt lesbar */
.bestiary-detail-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,.12) 24%,
      rgba(0,0,0,.14) 58%,
      rgba(0,0,0,.76) 100%
    ),
    radial-gradient(circle at 50% 18%,rgba(255,150,45,.10),transparent 36%) !important;
  pointer-events:none !important;
}

/* Titel oben edel, aber nicht riesig über dem Bild */
.bestiary-detail-title{
  position:absolute !important;
  z-index:3 !important;
  left:18px !important;
  right:18px !important;
  top:18px !important;

  font-family:"Pirata One","UnifrakturCook",Georgia,serif !important;
  font-size:34px !important;
  line-height:.95 !important;
  font-weight:400 !important;

  color:#fff0cf !important;
  text-shadow:
    0 3px 5px rgba(0,0,0,1),
    0 0 12px rgba(255,120,25,.85),
    0 0 28px rgba(120,20,5,.65) !important;
}

/* Meta klein direkt unter Titel */
.bestiary-detail-meta{
  position:absolute !important;
  z-index:3 !important;
  left:20px !important;
  right:20px !important;
  top:62px !important;
  bottom:auto !important;

  color:#e6ccb0 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  text-shadow:0 2px 4px rgba(0,0,0,1) !important;
}

/* Button-Leiste unten auf dem Bild */
.bestiary-detail-tabs{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:16px !important;
  z-index:6 !important;

  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:7px !important;
}

/* Buttons etwas dunkler und edler */
.bestiary-detail-tab{
  height:44px !important;
  margin:0 !important;
  padding:0 6px !important;

  border-radius:12px !important;
  border:1px solid rgba(255,175,75,.34) !important;

  background:
    linear-gradient(180deg,rgba(42,24,13,.88),rgba(4,4,5,.94)) !important;

  color:#ffe2b4 !important;
  font-family:Georgia,serif !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.4px !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 8px rgba(255,120,30,.35) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.48) !important;
}

.bestiary-detail-tab.active{
  color:#fff6df !important;
  border-color:rgba(255,215,130,.68) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 20px rgba(255,130,35,.42),
    0 8px 18px rgba(0,0,0,.48) !important;
}

/* Slide-Panel: stärker abgedunkelt, damit Text auf detailreichen Bildern lesbar bleibt */
.bestiary-slide-panel{
  position:absolute !important;
  left:14px !important;
  top:108px !important;
  bottom:76px !important;
  width:calc(100% - 28px) !important;
  z-index:5 !important;

  border-radius:18px !important;
  border:1px solid rgba(255,180,80,.32) !important;

  background:
    linear-gradient(90deg,
      rgba(3,3,4,.97) 0%,
      rgba(7,5,5,.94) 58%,
      rgba(10,7,5,.82) 100%
    ) !important;

  backdrop-filter:blur(3px) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 18px 44px rgba(0,0,0,.72) !important;

  padding:16px !important;
  overflow:auto !important;

  transform:translateX(-115%) !important;
  opacity:0 !important;
  pointer-events:none !important;

  transition:
    transform .34s ease,
    opacity .28s ease !important;
}

.bestiary-slide-panel.open{
  transform:translateX(0) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

.bestiary-slide-panel h3{
  margin:0 0 10px 0 !important;
  font-family:Georgia,serif !important;
  font-size:18px !important;
  letter-spacing:.8px !important;
  color:#ffe0aa !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 10px rgba(255,120,30,.45) !important;
}

.bestiary-slide-panel p{
  margin:0 !important;
  color:#eadccc !important;
  font-size:14px !important;
  line-height:1.55 !important;
  text-shadow:0 2px 3px rgba(0,0,0,1) !important;
}

.bestiary-detail-chip{
  background:rgba(0,0,0,.48) !important;
  border-color:rgba(255,180,80,.30) !important;
}

.bestiary-detail-loot-cell{
  background:rgba(0,0,0,.50) !important;
  border-color:rgba(255,255,255,.12) !important;
}

/* Handy-Anpassung */
@media(max-width:420px){
  .bestiary-detail-hero{
    min-height:620px !important;
    height:70vh !important;
    max-height:760px !important;
  }

  .bestiary-detail-title{
    font-size:29px !important;
    left:15px !important;
    right:15px !important;
    top:16px !important;
  }

  .bestiary-detail-meta{
    left:16px !important;
    right:16px !important;
    top:56px !important;
    font-size:11px !important;
  }

  .bestiary-slide-panel{
    left:12px !important;
    top:96px !important;
    bottom:66px !important;
    width:calc(100% - 24px) !important;
    padding:14px !important;
  }

  .bestiary-detail-tabs{
    left:12px !important;
    right:12px !important;
    bottom:13px !important;
    gap:6px !important;
  }

  .bestiary-detail-tab{
    height:38px !important;
    font-size:10px !important;
  }
}





/* === PATCH: BESTIARY DETAIL SLIDE OVERLAY === */

.bestiary-detail-page{
  background:
    linear-gradient(180deg,rgba(14,10,10,.96),rgba(5,5,7,.98)) !important;
  border-color:rgba(255,180,80,.22) !important;
}

/* Großes Hochkant-Bossbild */
.bestiary-detail-hero{
  position:relative !important;
  min-height:760px !important;
  height:78vh !important;
  max-height:980px !important;

  border-radius:24px !important;
  overflow:hidden !important;
  margin-top:14px !important;

  border:1px solid rgba(255,180,80,.30) !important;

  background:
    var(--bestiary-detail-image),
    url("/assets/bestiary/details/detail-fallback.jpg"),
    url("/assets/ui/enemy-card-bg.jpg"),
    linear-gradient(135deg,#1b120d,#070607) !important;

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

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 -180px 140px rgba(0,0,0,.72),
    0 18px 42px rgba(0,0,0,.55) !important;
}

/* Bild-Grundabdunklung */
.bestiary-detail-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,.12) 24%,
      rgba(0,0,0,.10) 58%,
      rgba(0,0,0,.74) 100%
    ),
    radial-gradient(circle at 50% 18%,rgba(255,150,45,.10),transparent 36%) !important;
  pointer-events:none !important;
}

/* Kopfbereich über dem Bild */
.bestiary-detail-head{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  pointer-events:none !important;
}

/* Titel oben links */
.bestiary-detail-title{
  position:absolute !important;
  z-index:4 !important;
  left:18px !important;
  right:18px !important;
  top:18px !important;

  font-family:"Pirata One","UnifrakturCook",Georgia,serif !important;
  font-size:34px !important;
  line-height:1 !important;
  font-weight:400 !important;

  color:#fff0cf !important;
  text-shadow:
    0 3px 5px rgba(0,0,0,1),
    0 0 12px rgba(255,120,25,.85),
    0 0 28px rgba(120,20,5,.65) !important;
}

/* Meta unter Titel */
.bestiary-detail-meta{
  position:absolute !important;
  z-index:4 !important;
  left:20px !important;
  right:20px !important;
  top:62px !important;

  color:#e6ccb0 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  text-shadow:0 2px 4px rgba(0,0,0,1) !important;
}

/* Button-Leiste oben über dem Bild */
.bestiary-detail-top-tabs{
  position:absolute !important;
  z-index:7 !important;
  left:18px !important;
  right:18px !important;
  top:102px !important;

  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:8px !important;

  pointer-events:auto !important;
}

.bestiary-detail-top-tab{
  height:40px !important;
  margin:0 !important;
  padding:0 8px !important;

  border-radius:12px !important;
  border:1px solid rgba(255,180,80,.34) !important;

  background:
    linear-gradient(180deg,rgba(42,24,13,.90),rgba(5,5,7,.94)) !important;

  color:#ffe2b4 !important;
  font-family:Georgia,serif !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.35px !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 8px rgba(255,120,30,.38) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.48) !important;

  cursor:pointer !important;
}

.bestiary-detail-top-tab.active{
  color:#fff8e6 !important;
  border-color:rgba(255,215,130,.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 20px rgba(255,130,35,.45),
    0 8px 18px rgba(0,0,0,.48) !important;
}

/* Slide Overlay */
.bestiary-overlay-panel{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  top:154px !important;
  bottom:16px !important;
  z-index:6 !important;

  border-radius:20px !important;
  border:1px solid rgba(255,180,80,.32) !important;

  background:
    linear-gradient(90deg,
      rgba(3,3,5,.97) 0%,
      rgba(7,5,6,.95) 58%,
      rgba(14,9,7,.84) 100%
    ) !important;

  backdrop-filter:blur(3px) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 18px 44px rgba(0,0,0,.74) !important;

  padding:18px !important;
  overflow:auto !important;

  transform:translateX(-115%) !important;
  opacity:0 !important;
  pointer-events:none !important;

  transition:
    transform .34s ease,
    opacity .28s ease !important;
}

.bestiary-overlay-panel.open{
  transform:translateX(0) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

.bestiary-overlay-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  width:36px !important;
  height:36px !important;
  padding:0 !important;
  margin:0 !important;

  border-radius:10px !important;
  border:1px solid rgba(255,180,80,.28) !important;
  background:rgba(0,0,0,.54) !important;
  color:#fff2db !important;

  font-size:16px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  z-index:10 !important;
}

.bestiary-overlay-section{
  display:none !important;
  padding-right:34px !important;
}

.bestiary-overlay-section.open{
  display:block !important;
}

.bestiary-overlay-section h3{
  margin:0 0 12px 0 !important;
  font-family:Georgia,serif !important;
  font-size:22px !important;
  letter-spacing:.8px !important;
  color:#ffe0aa !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 10px rgba(255,120,30,.45) !important;
}

.bestiary-overlay-section p{
  margin:0 !important;
  color:#eadccc !important;
  font-size:15px !important;
  line-height:1.65 !important;
  text-shadow:0 2px 3px rgba(0,0,0,1) !important;
}

.bestiary-detail-chip-wrap{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:10px !important;
}

.bestiary-detail-chip{
  display:inline-flex !important;
  align-items:center !important;
  min-height:32px !important;
  padding:8px 12px !important;

  border-radius:999px !important;
  border:1px solid rgba(255,180,80,.30) !important;
  background:rgba(0,0,0,.48) !important;

  color:#f4e6d0 !important;
  font-size:13px !important;
  line-height:1.15 !important;
  text-shadow:0 2px 3px rgba(0,0,0,.95) !important;
}

.bestiary-detail-loot-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:10px !important;
}

.bestiary-detail-loot-cell{
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(0,0,0,.50) !important;
  border-radius:14px !important;
  padding:12px !important;

  color:#eadccc !important;
  font-size:14px !important;
  line-height:1.4 !important;
  text-shadow:0 2px 3px rgba(0,0,0,1) !important;
}

.bestiary-detail-loot-cell b{
  color:#fff0cf !important;
}

/* Alte Boxen unter dem Bild sicher verstecken, falls sie noch im DOM landen */
.bestiary-detail-page > .bestiary-detail-box,
.bestiary-detail-page > .bestiary-detail-section{
  display:none !important;
}

/* Mobile */
@media(max-width:420px){
  .bestiary-detail-hero{
    min-height:680px !important;
    height:74vh !important;
    max-height:820px !important;
  }

  .bestiary-detail-title{
    font-size:28px !important;
    left:15px !important;
    right:15px !important;
    top:15px !important;
  }

  .bestiary-detail-meta{
    left:16px !important;
    right:16px !important;
    top:54px !important;
    font-size:11px !important;
  }

  .bestiary-detail-top-tabs{
    left:12px !important;
    right:12px !important;
    top:88px !important;
    gap:6px !important;
  }

  .bestiary-detail-top-tab{
    height:36px !important;
    font-size:10px !important;
    padding:0 4px !important;
  }

  .bestiary-overlay-panel{
    left:12px !important;
    right:12px !important;
    top:132px !important;
    bottom:14px !important;
    padding:14px !important;
  }

  .bestiary-detail-loot-grid{
    grid-template-columns:1fr !important;
  }

  .bestiary-overlay-section h3{
    font-size:18px !important;
  }

  .bestiary-overlay-section p{
    font-size:13px !important;
  }
}




/* === PATCH: TIERPANEL UI === */

.tierpanel-shell{
  width:100%;
  margin-top:14px;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.45));
}

.tierpanel-top{
  width:100%;
  height:86px;
  background:url("/assets/ui/tierpanel-top.png") center bottom / 100% 100% no-repeat;
  pointer-events:none;
}

.tierpanel-middle{
  width:100%;
  background:url("/assets/ui/tierpanel-middle.png") center top / 100% auto repeat-y;
}

.tierpanel-bottom{
  width:100%;
  height:86px;
  background:url("/assets/ui/tierpanel-bottom.png") center top / 100% 100% no-repeat;
  pointer-events:none;
}

.tierpanel-inner{
  padding:0 18px;
  margin-top:-28px;
  margin-bottom:-26px;
  position:relative;
  z-index:2;
}

/* überschreibt alten Grid-Stil sauber */
.tier-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:12px !important;
  margin-top:10px !important;
}

/* alter orangener Block wird nicht mehr genutzt */
.tier-card{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}

/* neuer einzelner Tierblock */
.tier-entry{
  position:relative;
  min-height:176px;
  border-radius:18px;
  overflow:hidden;
  background:
    url("/assets/ui/tier-block.png") center center / 100% 100% no-repeat,
    linear-gradient(135deg,rgba(80,35,16,.70),rgba(0,0,0,.25));
  box-shadow:
    0 10px 20px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

.tier-entry-inner{
  height:100%;
  min-height:176px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:14px 14px 12px 14px;
  position:relative;
  z-index:2;
}

.tier-main{
  width:100% !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
  min-height:auto !important;
  text-align:left !important;
  color:white !important;
}

.tier-main:active{
  transform:scale(.99);
}

.tier-stage{
  font-family:Georgia,serif;
  font-size:26px;
  font-weight:900;
  line-height:1;
  letter-spacing:1px;
  color:#fff0d4;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 10px rgba(255,140,30,.35);
  margin-bottom:8px;
}

.tier-label{
  font-size:14px;
  font-weight:900;
  margin-bottom:8px;
  text-shadow:0 2px 3px rgba(0,0,0,.90);
}

.tier-penalty,
.tier-recommended{
  font-size:12px;
  color:#d7c4ad;
  line-height:1.35;
  text-shadow:0 2px 3px rgba(0,0,0,.9);
}

.tier-recommended{
  margin-top:8px;
}

.tier-chance{
  margin-top:10px;
}

.tier-chance-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.10);
}

.tier-chance-fill{
  height:100%;
  background:linear-gradient(90deg,#d83b28,#ffc13d,#64ff8d);
}

.tier-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin-top:10px !important;
}

.tier-actions button{
  margin:0 !important;
  min-height:42px !important;
  padding:0 8px !important;
  font-size:11px !important;
  font-weight:900 !important;

  background:
    url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;

  border:none !important;
  box-shadow:none !important;
  color:#fff4df !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,.95),
    0 0 8px rgba(255,120,30,.35) !important;
}

.tier-actions button:active{
  transform:scale(.98);
}

/* alte Chance-Klassen dürfen nicht stören */
.chance{
  display:none;
}

@media(max-width:420px){
  .tierpanel-top{
    height:74px;
  }

  .tierpanel-bottom{
    height:74px;
  }

  .tierpanel-inner{
    padding:0 14px;
    margin-top:-24px;
    margin-bottom:-22px;
  }

  .tier-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .tier-entry{
    min-height:164px;
  }

  .tier-entry-inner{
    min-height:164px;
    padding:13px 13px 11px 13px;
  }

  .tier-stage{
    font-size:24px;
  }
}




/* === PATCH: TIERBLOCK CLEAN BACKGROUND + DARK FANTASY FONT === */

/* Alter orangener / transparenter Hintergrund komplett weg */
.tier-card,
.tier-main,
.tier-actions,
.tier-entry-inner{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Nur noch das echte tier-block.png soll den Block darstellen */
.tier-entry{
  background:
    url("/assets/ui/tier-block.png") center center / 100% 100% no-repeat !important;

  border:none !important;
  box-shadow:none !important;
  outline:none !important;

  /* Wichtig: kein extra runder transparenter Kasten */
  border-radius:0 !important;
  overflow:visible !important;
}

/* Falls irgendwo alte Pseudo-Layer liegen */
.tier-entry::before,
.tier-entry::after,
.tier-card::before,
.tier-card::after,
.tier-main::before,
.tier-main::after{
  content:none !important;
  display:none !important;
}

/* Innenabstand bleibt, aber ohne eigene Fläche */
.tier-entry-inner{
  position:relative !important;
  z-index:2 !important;
  min-height:176px !important;
  padding:18px 16px 14px 16px !important;
}

/* Der komplette klickbare Bereich bleibt unsichtbar */
.tier-main{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#1a0d05 !important;
  text-align:center !important;
  cursor:pointer !important;
}

/* Schrift wie Pergament/Fantasy: dunkel, schwer, weniger Glow */
.tier-stage{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.4px !important;

  color:#1a0d05 !important;

  text-shadow:
    0 1px 0 rgba(255,230,185,.55),
    0 2px 2px rgba(80,35,10,.20) !important;

  margin:0 0 10px 0 !important;
}

/* Chance-Text */
.tier-label{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:20px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  margin:0 0 8px 0 !important;

  text-shadow:
    0 1px 0 rgba(255,230,185,.45),
    0 2px 2px rgba(80,35,10,.18) !important;
}

/* Farben etwas dunkler/edler */
.tier-label.good{
  color:#243f14 !important;
}

.tier-label.warn{
  color:#7a4d00 !important;
}

.tier-label.bad{
  color:#791c1c !important;
}

.tier-penalty,
.tier-recommended{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:#1d1108 !important;

  text-shadow:
    0 1px 0 rgba(255,230,185,.38) !important;
}

.tier-penalty{
  margin-top:6px !important;
}

.tier-recommended{
  margin-top:10px !important;
}

/* Chance-Bar dunkler und flacher */
.tier-chance{
  margin:12px auto 10px auto !important;
  width:88% !important;
}

.tier-chance-bar{
  height:10px !important;
  border-radius:999px !important;
  overflow:hidden !important;

  background:rgba(24,14,8,.62) !important;
  border:1px solid rgba(60,35,18,.72) !important;

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.55),
    0 1px 0 rgba(255,220,160,.25) !important;
}

.tier-chance-fill{
  height:100% !important;
  background:linear-gradient(90deg,#b32118,#d9902f,#58e36d) !important;
}

/* Auto-Buttons optisch weniger modern, mehr Brett/Metall */
.tier-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin-top:12px !important;
}

.tier-actions button{
  min-height:46px !important;
  margin:0 !important;
  padding:0 8px !important;

  font-family:Georgia,"Times New Roman",serif !important;
  font-size:15px !important;
  line-height:1.05 !important;
  font-weight:900 !important;

  color:#f2d3a4 !important;

  background:
    url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;

  border:none !important;
  box-shadow:none !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 0 8px rgba(255,130,35,.35) !important;
}

/* Falls alte .chance vom alten Layout noch sichtbar wäre */
.chance{
  display:none !important;
}

/* Mobile Feinschliff */
@media(max-width:420px){
  .tier-entry-inner{
    min-height:164px !important;
    padding:16px 14px 13px 14px !important;
  }

  .tier-stage{
    font-size:30px !important;
  }

  .tier-label{
    font-size:19px !important;
  }

  .tier-penalty,
  .tier-recommended{
    font-size:14px !important;
  }

  .tier-actions button{
    min-height:42px !important;
    font-size:14px !important;
  }
}





/* === PATCH: TIERPANEL BETTER SIZE === */

.tier-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:14px !important;
  margin-top:12px !important;
  align-items:start !important;
}

.tier-entry{
  min-height:0 !important;
  height:auto !important;
  width:100% !important;
  max-width:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:
    url("/assets/ui/tier-block.png") center center / 100% 100% no-repeat !important;
  border:none !important;
  box-shadow:none !important;
}

.tier-entry-inner{
  min-height:220px !important;
  height:auto !important;
  padding:16px 14px 12px 14px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.tier-main{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  text-align:center !important;
}

.tier-stage{
  font-size:26px !important;
  line-height:1.02 !important;
  margin-bottom:6px !important;
}

.tier-label{
  font-size:16px !important;
  line-height:1.05 !important;
  margin-bottom:7px !important;
}

.tier-penalty,
.tier-recommended{
  font-size:12px !important;
  line-height:1.18 !important;
}

.tier-recommended{
  margin-top:8px !important;
}

.tier-chance{
  width:82% !important;
  margin:9px auto 8px auto !important;
}

.tier-chance-bar{
  height:8px !important;
}

.tier-actions{
  gap:7px !important;
  margin-top:10px !important;
}

.tier-actions button{
  min-height:38px !important;
  font-size:12px !important;
  line-height:1.05 !important;
  padding:0 5px !important;
}

/* alte Layer wirklich weg */
.tier-card,
.tier-card *,
.tier-main::before,
.tier-main::after,
.tier-entry::before,
.tier-entry::after{
  box-shadow:none !important;
}

@media(max-width:420px){
  .tier-grid{
    gap:12px !important;
  }

  .tier-entry-inner{
    min-height:205px !important;
    padding:15px 12px 11px 12px !important;
  }

  .tier-stage{
    font-size:24px !important;
  }

  .tier-label{
    font-size:15px !important;
  }

  .tier-penalty,
  .tier-recommended{
    font-size:11px !important;
  }

  .tier-actions button{
    min-height:36px !important;
    font-size:11px !important;
  }
}





/* === PATCH: TIERPANEL SHELL CLEAN === */

/* Falls Google Fonts erlaubt/erreichbar ist */
@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap");

/* Die normale Card um screenDifficulty entfernen, damit kein zweiter Rahmen entsteht */
#screenDifficulty > .card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}

/* Falls chooseEnemy noch irgendwo eine alte card-Struktur erzeugt */
#screenDifficulty .card:has(.tierpanel-shell),
#screenDifficulty .card:has(.tier-shell){
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Alte Tierpanel-Variante unschädlich machen */
.tierpanel-shell{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Neuer großer kompletter Rahmen */
.tier-shell{
  width:100%;
  margin:0 auto;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.55));
}

.tier-shell-top{
  width:100%;
  height:200px;
  background:url("/assets/ui/tierpanel-top.png") center bottom / 100% 100% no-repeat;
  pointer-events:none;
}

.tier-shell-middle{
  width:100%;
  background:url("/assets/ui/tierpanel-middle.png") center top / 100% auto repeat-y;
}

.tier-shell-bottom{
  width:100%;
  height:112px;
  background:url("/assets/ui/tierpanel-bottom.png") center top / 100% 100% no-repeat;
  pointer-events:none;
}

.tier-shell-inner{
  position:relative;
  z-index:2;
  padding:0 18px;
  margin-top:-22px;
  margin-bottom:-58px;
}

/* Header sitzt jetzt im gleichen Asset-Rahmen */
.tier-shell-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}

.tier-shell-title-wrap{
  flex:1;
  min-width:0;
}

.tier-shell-title{
  font-family:"UnifrakturCook", Georgia, "Times New Roman", serif !important;
  font-size:30px;
  line-height:1.05;
  font-weight:700;
  color:#f3dec0;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 10px rgba(255,145,40,.25);
  margin-bottom:9px;
}

.tier-shell-subtitle{
  font-size:13px;
  line-height:1.35;
  color:#d8c7b0;
  max-width:320px;
  text-shadow:0 2px 3px rgba(0,0,0,.8);
}

.tier-back{
  flex:0 0 auto;
  margin-top:-4px !important;
}

/* Grid ohne zweiten Rahmen */
.tier-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:14px !important;
  margin-top:10px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  align-items:start !important;
}

/* Alte orangene/helle Wrapper komplett entfernen */
.tier-card,
.tier-card *,
.tier-main,
.tier-actions,
.tier-entry-inner{
  border:none !important;
  box-shadow:none !important;
}

.tier-card{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}

/* Einzelner Tierblock: nur dein Asset */
.tier-entry{
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  max-width:none !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
  border-radius:0 !important;
  overflow:visible !important;

  background:
    url("/assets/ui/tier-block.png") center center / 100% 100% no-repeat !important;
}

.tier-entry::before,
.tier-entry::after,
.tier-card::before,
.tier-card::after,
.tier-main::before,
.tier-main::after{
  content:none !important;
  display:none !important;
}

/* Innenbereich kompakter, damit nichts gestreckt wirkt */
.tier-entry-inner{
  min-height:228px !important;
  height:auto !important;
  padding:17px 13px 13px 13px !important;
  background:transparent !important;
  position:relative !important;
  z-index:2 !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

/* Buttonfläche unsichtbar */
.tier-main{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  text-align:center !important;
  color:#1d0f08 !important;
  cursor:pointer !important;
}

/* Pergament-Schrift im Tierblock */
.tier-stage{
  font-family:"UnifrakturCook", Georgia, "Times New Roman", serif !important;
  font-size:28px !important;
  line-height:1.0 !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
  color:#221108 !important;
  margin:0 0 7px 0 !important;

  text-shadow:
    0 1px 0 rgba(255,230,185,.48),
    0 2px 2px rgba(60,25,8,.18) !important;
}

.tier-label{
  font-family:"UnifrakturCook", Georgia, "Times New Roman", serif !important;
  font-size:18px !important;
  line-height:1.0 !important;
  font-weight:700 !important;
  margin:0 0 8px 0 !important;

  text-shadow:
    0 1px 0 rgba(255,230,185,.38),
    0 2px 2px rgba(60,25,8,.18) !important;
}

.tier-label.good{
  color:#294d1d !important;
}

.tier-label.warn{
  color:#7a4d00 !important;
}

.tier-label.bad{
  color:#842222 !important;
}

.tier-penalty{
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  color:#24150c !important;
  margin:0 0 8px 0 !important;

  text-shadow:0 1px 0 rgba(255,230,185,.35) !important;
}

.tier-recommended{
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:12px !important;
  line-height:1.18 !important;
  font-weight:700 !important;
  color:#24150c !important;
  margin-top:8px !important;
  text-align:center !important;

  text-shadow:0 1px 0 rgba(255,230,185,.35) !important;
}

.tier-chance{
  width:82% !important;
  margin:8px auto 7px auto !important;
}

.tier-chance-bar{
  height:8px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:rgba(35,18,9,.58) !important;
  border:1px solid rgba(65,35,16,.65) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.50),
    0 1px 0 rgba(255,220,160,.20) !important;
}

.tier-chance-fill{
  height:100% !important;
  background:linear-gradient(90deg,#b92f1c,#e0a53a,#62e878) !important;
}

/* Action Buttons unten */
.tier-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
  margin-top:10px !important;
  background:transparent !important;
}

.tier-actions button{
  min-height:39px !important;
  margin:0 !important;
  padding:0 5px !important;

  background:
    url("/assets/ui/tier-action-button.png") center center / 100% 100% no-repeat,
    url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;

  border:none !important;
  box-shadow:none !important;

  color:#f2e1c2 !important;
  font-family:"UnifrakturCook", Georgia, "Times New Roman", serif !important;
  font-size:15px !important;
  line-height:1.0 !important;
  font-weight:700 !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 0 8px rgba(255,130,35,.35) !important;
}

/* alte Chance-Klasse verstecken, falls noch irgendwo vorhanden */
.chance{
  display:none !important;
}

/* Mobile */
@media(max-width:420px){
  .tier-shell-top{
    height:100px;
  }

  .tier-shell-bottom{
    height:100px;
  }

  .tier-shell-inner{
    padding:0 16px;
    margin-top:-56px;
    margin-bottom:-54px;
  }

  .tier-shell-title{
    font-size:25px;
  }

  .tier-shell-subtitle{
    font-size:12px;
  }

  .tier-grid{
    gap:12px !important;
  }

  .tier-entry-inner{
    min-height:212px !important;
    padding:15px 11px 12px 11px !important;
  }

  .tier-stage{
    font-size:25px !important;
  }

  .tier-label{
    font-size:16px !important;
  }

  .tier-penalty{
    font-size:12px !important;
  }

  .tier-recommended{
    font-size:11px !important;
  }

  .tier-actions button{
    min-height:36px !important;
    font-size:13px !important;
  }
}




/* === PATCH: TIERPANEL TOP SPACING FIX === */

/* Inhalt nicht mehr so stark in den Top-Rahmen ziehen */
.tier-shell-inner{
  margin-top:-34px !important;
  margin-bottom:-54px !important;
  padding:0 22px !important;
}

/* Header etwas tiefer, damit die obere Verzierung Luft hat */
.tier-shell-header{
  padding-top:18px !important;
  margin-bottom:18px !important;
}

/* Topstück etwas höher lassen, damit der Rahmen nicht abgeschnitten wirkt */
.tier-shell-top{
  height:132px !important;
}

/* Zurück-Button sauber im Kopfbereich */
.tier-back{
  margin-top:4px !important;
}

/* Mobile */
@media(max-width:420px){
  .tier-shell-top{
    height:120px !important;
  }

  .tier-shell-inner{
    margin-top:-30px !important;
    margin-bottom:-50px !important;
    padding:0 18px !important;
  }

  .tier-shell-header{
    padding-top:14px !important;
  }
}





/* === PATCH: TIERPANEL TOP SPACING TWEAK === */

/* kleines Stück höher, ohne den oberen Rahmen abzuschneiden */
.tier-shell-inner{
  margin-top:-42px !important;
  margin-bottom:-54px !important;
}

/* Header etwas weniger tief */
.tier-shell-header{
  padding-top:10px !important;
  margin-bottom:16px !important;
}

/* Top bleibt hoch genug für die Verzierung */
.tier-shell-top{
  height:140px !important;
}

.tier-back{
  margin-top:0 !important;
}

@media(max-width:420px){
  .tier-shell-inner{
    margin-top:-38px !important;
    margin-bottom:-50px !important;
  }

  .tier-shell-header{
    padding-top:8px !important;
  }

  .tier-shell-top{
    height:118px !important;
  }
}





/* === PATCH: HERO INFO CLEAN TEXT === */

/* Hero-Infokasten oben im Hauptmenü unsichtbar machen */
#screenHero .hero{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;

  padding:4px 6px 12px 6px !important;
  margin:0 0 12px 0 !important;

  color:#d2c1a1 !important;
}

/* Falls .card-Regeln noch reindrücken */
#screenHero .card.hero{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Heldname */
#screenHero .hero > b{
  display:block !important;

  font-family:Georgia, "Times New Roman", serif !important;
  font-size:20px !important;
  line-height:1.15 !important;
  font-weight:900 !important;

  color:#ead8b3 !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,.85),
    0 0 8px rgba(120,60,20,.22) !important;

  margin-bottom:4px !important;
}

/* Normale Werte */
#screenHero .hero div{
  color:#d2c1a1 !important;

  font-size:15px !important;
  line-height:1.32 !important;
  font-weight:600 !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.78) !important;
}

/* Spielername, Waffentree, Siege/Niederlagen matter */
#screenHero .hero .small{
  color:#9f8c72 !important;

  font-size:12px !important;
  line-height:1.28 !important;
  font-weight:500 !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.72) !important;
}

/* Gold / wichtige Zahlen nicht mehr grellweiß */
#screenHero .hero span{
  color:inherit !important;
}

/* Zustandsfarben etwas schmutziger */
#screenHero .hero .bad{
  color:#c97f68 !important;
}

#screenHero .hero .good{
  color:#98b98a !important;
}

#screenHero .hero .warn{
  color:#c9a56a !important;
}

/* Diamant etwas weniger grell im Gesamtbild */
#screenHero .hero div:nth-child(4){
  color:#cfc0a5 !important;
}

/* Auf kleinen Displays kompakter */
@media(max-width:420px){
  #screenHero .hero{
    padding:2px 4px 10px 4px !important;
    margin-bottom:10px !important;
  }

  #screenHero .hero > b{
    font-size:18px !important;
  }

  #screenHero .hero div{
    font-size:13px !important;
    line-height:1.28 !important;
  }

  #screenHero .hero .small{
    font-size:11px !important;
  }
}






/* === PATCH: CONTENT SHELL TRANSPARENT FORCE === */

/* Der schwarze äußere Container unter dem Menü soll verschwinden */
#contentShell,
.content-shell{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-top:18px !important;
  border-radius:0 !important;
}

/* Alle Hauptkarten in geöffneten Menüs bekommen den Tierpanel-Look */
#contentShell > div > .card,
#screenBattle > .card,
#screenDifficulty > .card,
#screenInventory > .card,
#screenSkilltree > .card,
#screenShop > .card,
#screenCodex > .card,
#screenBestiary > .card,
#screenLadder > .card,
#screenOptions > .card{
  background:
    url("/assets/ui/tierpanel-top.png") top center / 100% auto no-repeat,
    url("/assets/ui/tierpanel-bottom.png") bottom center / 100% auto no-repeat,
    url("/assets/ui/tierpanel-middle.png") center top / 100% 100% repeat-y !important;

  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:42px 24px 42px 24px !important;
  overflow:visible !important;
}

/* Alte normale Karten-Optik innerhalb dieser Menüs unsichtbar machen */
#contentShell .card .card,
#screenBattle .card .card,
#screenInventory .card .card,
#screenSkilltree .card .card,
#screenShop .card .card,
#screenCodex .card .card,
#screenBestiary .card .card,
#screenLadder .card .card,
#screenOptions .card .card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Topbar schöner im Pergament/Tierpanel */
#contentShell .topbar,
#screenBattle .topbar,
#screenInventory .topbar,
#screenSkilltree .topbar,
#screenShop .topbar,
#screenCodex .topbar,
#screenBestiary .topbar,
#screenLadder .topbar,
#screenOptions .topbar{
  margin-bottom:14px !important;
}

#contentShell .topbar b,
#screenBattle .topbar b,
#screenInventory .topbar b,
#screenSkilltree .topbar b,
#screenShop .topbar b,
#screenCodex .topbar b,
#screenBestiary .topbar b,
#screenLadder .topbar b,
#screenOptions .topbar b{
  font-family:"UnifrakturCook", Georgia, serif !important;
  font-size:28px !important;
  color:#f0dec0 !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.9),
    0 0 10px rgba(255,130,35,.22) !important;
}

/* Kleine Erklärungstexte weniger weiß */
#contentShell .small,
#screenBattle .small,
#screenInventory .small,
#screenSkilltree .small,
#screenShop .small,
#screenCodex .small,
#screenBestiary .small,
#screenLadder .small,
#screenOptions .small{
  color:#c7b497 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.75) !important;
}

/* Listen-Elemente nicht komplett transparent, aber weniger graue Browserbox */
#screenInventory .item,
#screenShop .item,
#screenLadder .ladder-row,
#screenCodex .codex-row,
#screenBestiary .bestiary-row,
#screenBattle .enemy{
  background:rgba(20,14,10,.34) !important;
  border:1px solid rgba(255,190,90,.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 8px 18px rgba(0,0,0,.25) !important;
}

/* Tier-Screen nicht doppelt einpacken, weil der schon eigene tier-shell hat */
#screenDifficulty > .card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Resultbox nach Kampf ebenfalls weniger Standard-Container */
#fightResult .result{
  background:
    url("/assets/ui/tierpanel-top.png") top center / 100% auto no-repeat,
    url("/assets/ui/tierpanel-bottom.png") bottom center / 100% auto no-repeat,
    url("/assets/ui/tierpanel-middle.png") center top / 100% 100% repeat-y !important;

  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:42px 24px 42px 24px !important;
  color:#d8c5a4 !important;
}

/* Mobile */
@media(max-width:420px){
  #contentShell > div > .card,
  #screenBattle > .card,
  #screenInventory > .card,
  #screenSkilltree > .card,
  #screenShop > .card,
  #screenCodex > .card,
  #screenBestiary > .card,
  #screenLadder > .card,
  #screenOptions > .card{
    padding:34px 18px 34px 18px !important;
  }

  #contentShell .topbar b,
  #screenBattle .topbar b,
  #screenInventory .topbar b,
  #screenSkilltree .topbar b,
  #screenShop .topbar b,
  #screenCodex .topbar b,
  #screenBestiary .topbar b,
  #screenLadder .topbar b,
  #screenOptions .topbar b{
    font-size:24px !important;
  }
}






/* === PATCH: PANEL MIDDLE REPEAT FIX === */

/*
  Fix:
  Vorher wurde tierpanel-middle.png mit background-size 100% 100% gestreckt.
  Jetzt wird middle mit 100% auto wiederholt.
*/

/* Hauptkarten in Content-Menüs */
#contentShell > div > .card,
#screenBattle > .card,
#screenInventory > .card,
#screenSkilltree > .card,
#screenShop > .card,
#screenCodex > .card,
#screenBestiary > .card,
#screenLadder > .card,
#screenOptions > .card{
  background-image:
    url("/assets/ui/tierpanel-top.png"),
    url("/assets/ui/tierpanel-bottom.png"),
    url("/assets/ui/tierpanel-middle.png") !important;

  background-position:
    top center,
    bottom center,
    top center !important;

  background-size:
    100% auto,
    100% auto,
    100% auto !important;

  background-repeat:
    no-repeat,
    no-repeat,
    repeat-y !important;

  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}

/* Kampf-Ergebnisbox */
#fightResult .result{
  background-image:
    url("/assets/ui/tierpanel-top.png"),
    url("/assets/ui/tierpanel-bottom.png"),
    url("/assets/ui/tierpanel-middle.png") !important;

  background-position:
    top center,
    bottom center,
    top center !important;

  background-size:
    100% auto,
    100% auto,
    100% auto !important;

  background-repeat:
    no-repeat,
    no-repeat,
    repeat-y !important;

  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}

/* Difficulty/Tierstufen-Screen nutzt eigene 3-Teil-Struktur, nicht den Card-Hintergrund */
#screenDifficulty > .card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Die echte Tier-Shell-Middle ebenfalls garantiert wiederholen lassen */
.tier-shell-middle,
.tierpanel-middle{
  background-image:url("/assets/ui/tierpanel-middle.png") !important;
  background-position:top center !important;
  background-size:100% auto !important;
  background-repeat:repeat-y !important;
}

/* Top/Bottom der echten Tier-Shell nicht stretchen außer in der Höhe ihres eigenen Elements */
.tier-shell-top,
.tierpanel-top{
  background-image:url("/assets/ui/tierpanel-top.png") !important;
  background-position:bottom center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}

.tier-shell-bottom,
.tierpanel-bottom{
  background-image:url("/assets/ui/tierpanel-bottom.png") !important;
  background-position:top center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}






/* === PATCH: TIER HEADER INTO TOP === */

/* Top ist jetzt echter Headerbereich */
.tier-shell-top{
  position:relative !important;
  height:185px !important;

  background-image:url("/assets/ui/tierpanel-top.png") !important;
  background-position:top center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;

  pointer-events:auto !important;
}

/* Header sitzt direkt IM Top */
.tier-shell-header{
  position:absolute !important;
  left:24px !important;
  right:24px !important;
  top:72px !important;

  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:16px !important;

  margin:0 !important;
  padding:0 !important;
  z-index:5 !important;
}

.tier-shell-title-wrap{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:65% !important;
}

.tier-shell-title{
  font-family:"UnifrakturCook", Georgia, "Times New Roman", serif !important;
  font-size:30px !important;
  line-height:1.05 !important;
  font-weight:700 !important;

  color:#f1dfc0 !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 10px rgba(255,145,40,.22) !important;

  margin:0 0 10px 0 !important;
}

.tier-shell-subtitle{
  font-size:13px !important;
  line-height:1.35 !important;
  color:#d8c7ad !important;
  max-width:330px !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.85) !important;
}

/* Zurück sitzt ebenfalls im Top */
.tier-back{
  flex:0 0 auto !important;
  margin-top:0 !important;
  min-width:118px !important;
}

/* Middle soll direkt unter Top sauber weiterlaufen */
.tier-shell-middle{
  background-image:url("/assets/ui/tierpanel-middle.png") !important;
  background-position:top center !important;
  background-size:100% auto !important;
  background-repeat:repeat-y !important;
}

/* Inner nicht mehr in den Top ziehen */
.tier-shell-inner{
  margin-top:0 !important;
  margin-bottom:-54px !important;
  padding:0 22px 0 22px !important;
  position:relative !important;
  z-index:2 !important;
}

/* Karten näher an den Top anschließen */
.tier-grid{
  margin-top:0 !important;
}

/* Falls alte Header-Positionierung weiter unten noch gewinnt */
.tier-shell-middle .tier-shell-header{
  display:none !important;
}

/* Bottom bleibt Abschluss */
.tier-shell-bottom{
  background-image:url("/assets/ui/tierpanel-bottom.png") !important;
  background-position:top center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}

/* Mobile */
@media(max-width:420px){
  .tier-shell-top{
    height:165px !important;
  }

  .tier-shell-header{
    left:20px !important;
    right:20px !important;
    top:62px !important;
    gap:12px !important;
  }

  .tier-shell-title-wrap{
    max-width:62% !important;
  }

  .tier-shell-title{
    font-size:24px !important;
    margin-bottom:8px !important;
  }

  .tier-shell-subtitle{
    font-size:12px !important;
    line-height:1.3 !important;
  }

  .tier-back{
    min-width:104px !important;
  }

  .tier-shell-inner{
    padding:0 18px !important;
    margin-top:0 !important;
    margin-bottom:-50px !important;
  }
}

/* === PATCH: INVENTORY SHOP ITEM IMAGES FIXED === */

#screenInventory .item,
#screenShop .item{
  align-items:flex-start !important;
  gap:14px !important;
}

.item-art-wrap{
  width:86px !important;
  min-width:86px !important;
  height:98px !important;

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

  border-radius:10px !important;
  overflow:hidden !important;

  background:rgba(0,0,0,.10) !important;
  border:none !important;
  box-shadow:none !important;
}

.item-art{
  width:82px !important;
  height:94px !important;
  object-fit:contain !important;
  display:block !important;

  filter:
    drop-shadow(0 5px 8px rgba(0,0,0,.55))
    drop-shadow(0 0 8px rgba(255,150,40,.08)) !important;
}

#screenInventory .item .icon,
#screenShop .item .icon{
  display:none !important;
}

#screenInventory .item .info,
#screenShop .item .info{
  padding-top:2px !important;
}

@media(max-width:420px){
  .item-art-wrap{
    width:70px !important;
    min-width:70px !important;
    height:82px !important;
  }

  .item-art{
    width:68px !important;
    height:80px !important;
  }

  #screenInventory .item,
  #screenShop .item{
    gap:10px !important;
  }
}


\n\n

/* === PATCH: ITEM CARDS TRANSPARENT LINES === */

/*
  Nur CSS.
  Macht Inventar/Händler-Items transparenter.
  Fügt oben/unten Linien ein.
  Nutzt vorhandene Itembilder.
*/

#screenInventory .item,
#screenShop .item{
  position:relative !important;

  display:flex !important;
  align-items:flex-start !important;
  gap:16px !important;

  margin-top:18px !important;
  padding:20px 14px 20px 14px !important;

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

  overflow:visible !important;
}

/* dunkler Lesbarkeitsverlauf statt sichtbarem Container */
#screenInventory .item::before,
#screenShop .item::before{
  content:"" !important;
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  top:12px !important;
  bottom:12px !important;

  border-radius:18px !important;

  background:
    linear-gradient(90deg,
      rgba(10,7,5,.50) 0%,
      rgba(10,7,5,.38) 34%,
      rgba(10,7,5,.18) 66%,
      rgba(10,7,5,.04) 100%) !important;

  border:none !important;
  box-shadow:none !important;

  pointer-events:none !important;
  z-index:0 !important;
}

/* obere Trennlinie */
#screenInventory .item::after,
#screenShop .item::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:18px !important;

  background:
    url("/assets/ui/item-line-top.png") center top / 100% 100% no-repeat,
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,170,70,.0) 8%,
      rgba(255,170,70,.38) 48%,
      rgba(255,170,70,.0) 92%,
      transparent 100%) !important;

  pointer-events:none !important;
  z-index:4 !important;
}

/* zusätzliche untere Linie über separates Pseudo-Element am Bildbereich simuliert */
#screenInventory .item .info::after,
#screenShop .item .info::after{
  content:"" !important;
  position:absolute !important;
  left:-110px !important;
  right:0 !important;
  bottom:-20px !important;
  height:18px !important;

  background:
    url("/assets/ui/item-line-bottom.png") center bottom / 100% 100% no-repeat,
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,170,70,.0) 8%,
      rgba(255,170,70,.30) 48%,
      rgba(255,170,70,.0) 92%,
      transparent 100%) !important;

  pointer-events:none !important;
  z-index:4 !important;
}

/* Bild links sauberer, ohne sichtbaren fetten Kasten */
#screenInventory .item-art-wrap,
#screenShop .item-art-wrap{
  position:relative !important;
  z-index:2 !important;

  width:94px !important;
  min-width:94px !important;
  height:118px !important;

  margin:0 !important;

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

  background:
    radial-gradient(circle at center,
      rgba(255,190,90,.10),
      rgba(0,0,0,.10) 56%,
      transparent 72%) !important;

  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#screenInventory .item-art,
#screenShop .item-art{
  width:88px !important;
  height:112px !important;
  object-fit:contain !important;
  display:block !important;

  filter:
    drop-shadow(0 6px 9px rgba(0,0,0,.62))
    drop-shadow(0 0 10px rgba(255,145,40,.10)) !important;
}

/* Textbereich über dem Verlauf */
#screenInventory .item .info,
#screenShop .item .info{
  position:relative !important;
  z-index:2 !important;

  flex:1 !important;
  padding:4px 4px 6px 0 !important;

  color:#d8c3a2 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.78) !important;
}

/* Itemname etwas edler */
#screenInventory .item .info b,
#screenShop .item .info b{
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:17px !important;
  line-height:1.15 !important;
  font-weight:900 !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,.88),
    0 0 8px rgba(255,145,40,.10) !important;
}

/* Meta-Text weniger grell */
#screenInventory .item .small,
#screenShop .item .small{
  color:#bda98b !important;
  font-size:12px !important;
  line-height:1.35 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
}

/* Werte klar lesbar, aber nicht weiß-glühend */
#screenInventory .item .info > div:not(.small),
#screenShop .item .info > div:not(.small){
  color:#e0ccb0 !important;
  font-size:15px !important;
  line-height:1.35 !important;
}

/* Buttons unten besser integriert */
#screenInventory .item button,
#screenShop .item button{
  position:relative !important;
  z-index:5 !important;

  max-width:260px !important;
  min-height:40px !important;

  margin-top:12px !important;

  border-radius:12px !important;
  border:1px solid rgba(255,180,80,.32) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,185,90,.12), transparent 60%),
    linear-gradient(180deg, rgba(48,25,13,.96), rgba(10,7,7,.98)) !important;

  color:#f0d8b2 !important;

  font-family:Georgia, "Times New Roman", serif !important;
  font-size:14px !important;
  font-weight:900 !important;

  text-shadow:
    0 2px 3px rgba(0,0,0,.96),
    0 0 8px rgba(255,145,40,.14) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,220,160,.04),
    0 5px 13px rgba(0,0,0,.25) !important;
}

/* Ausgerüstet darf etwas heller wirken */
#screenInventory .item button:disabled,
#screenInventory .item button[disabled]{
  opacity:1 !important;
  color:#f4dfba !important;
  border-color:rgba(255,210,120,.36) !important;
}

/* alte Iconbox sicher weg */
#screenInventory .item .icon,
#screenShop .item .icon{
  display:none !important;
}

/* Mobile */
@media(max-width:420px){
  #screenInventory .item,
  #screenShop .item{
    gap:10px !important;
    padding:18px 10px 18px 10px !important;
    margin-top:16px !important;
  }

  #screenInventory .item-art-wrap,
  #screenShop .item-art-wrap{
    width:76px !important;
    min-width:76px !important;
    height:96px !important;
  }

  #screenInventory .item-art,
  #screenShop .item-art{
    width:72px !important;
    height:92px !important;
  }

  #screenInventory .item .info b,
  #screenShop .item .info b{
    font-size:15px !important;
  }

  #screenInventory .item .info > div:not(.small),
  #screenShop .item .info > div:not(.small){
    font-size:13px !important;
  }

  #screenInventory .item .info::after,
  #screenShop .item .info::after{
    left:-86px !important;
  }
}

\n\n\n

/* === PATCH FIX: ITEM CARDS SOFT OVERLAY === */

/* Schwarze Overlays komplett killen */
#screenInventory .item::before,
#screenShop .item::before,
#screenInventory .item::after,
#screenShop .item::after,
#screenInventory .item .info::after,
#screenShop .item .info::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Item-Zeilen sauber und transparent */
#screenInventory .item,
#screenShop .item{
  position: relative !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;

  margin: 14px 0 !important;
  padding: 12px 8px 12px 8px !important;

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

/* Nur dezente Linien oben/unten statt riesigem Container */
#screenInventory .item .info,
#screenShop .item .info{
  position: relative !important;
  z-index: 2 !important;
  flex: 1 !important;
  padding: 4px 2px 8px 0 !important;

  color: #d5c0a0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;

  background:
    linear-gradient(90deg, rgba(255,170,70,0), rgba(255,170,70,.18), rgba(255,170,70,0)) top center / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,170,70,0), rgba(255,170,70,.14), rgba(255,170,70,0)) bottom center / 100% 1px no-repeat !important;
}

/* Bildbereich ohne Kasten */
#screenInventory .item-art-wrap,
#screenShop .item-art-wrap{
  position: relative !important;
  z-index: 2 !important;

  width: 92px !important;
  min-width: 92px !important;
  height: 118px !important;

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

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#screenInventory .item-art,
#screenShop .item-art{
  width: 88px !important;
  height: 112px !important;
  object-fit: contain !important;
  display: block !important;

  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) !important;
}

/* alte Emoji/Iconbox sicher aus */
#screenInventory .item .icon,
#screenShop .item .icon{
  display: none !important;
}

/* Itemnamen */
#screenInventory .item .info b,
#screenShop .item .info b{
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.85) !important;
}

/* normaler Text */
#screenInventory .item .info > div,
#screenShop .item .info > div{
  color: #ddc7a7 !important;
}

/* kleiner Meta-Text */
#screenInventory .item .small,
#screenShop .item .small{
  color: #b9a486 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.72) !important;
}

/* Buttons etwas edler, aber ohne Rieseneffekt */
#screenInventory .item button,
#screenShop .item button{
  margin-top: 12px !important;
  min-height: 40px !important;
  max-width: 260px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(255,180,80,.28) !important;

  background: linear-gradient(180deg, rgba(52,28,14,.92), rgba(12,8,8,.96)) !important;
  color: #efd7b2 !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;

  text-shadow: 0 2px 3px rgba(0,0,0,.92) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.20) !important;
}

#screenInventory .item button:disabled,
#screenInventory .item button[disabled]{
  opacity: 1 !important;
}

/* Mobile */
@media (max-width: 420px){
  #screenInventory .item,
  #screenShop .item{
    gap: 10px !important;
    padding: 10px 6px !important;
  }

  #screenInventory .item-art-wrap,
  #screenShop .item-art-wrap{
    width: 76px !important;
    min-width: 76px !important;
    height: 96px !important;
  }

  #screenInventory .item-art,
  #screenShop .item-art{
    width: 72px !important;
    height: 92px !important;
  }

  #screenInventory .item .info b,
  #screenShop .item .info b{
    font-size: 15px !important;
  }
}

\n



/* === PATCH: SKILLTREE WEAPON SPECIALIZATION UI === */

.weapon-spec-panel{
  position:relative;
  margin:16px 0 14px 0;
  padding:14px 14px 16px 14px;

  background:
    linear-gradient(180deg, rgba(18,11,7,.38), rgba(8,6,6,.22)) !important;

  border:1px solid rgba(255,190,90,.20);
  border-radius:18px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 8px 18px rgba(0,0,0,.22);
}

.weapon-spec-title{
  color:#f0dec0;
  font-family:"UnifrakturCook", Georgia, serif;
  font-size:24px;
  line-height:1;
  margin-bottom:12px;

  text-shadow:
    0 2px 3px rgba(0,0,0,.9),
    0 0 10px rgba(255,150,40,.16);
}

.weapon-spec-bar{
  display:flex;
  align-items:center;
  gap:12px;

  min-height:72px;
  padding:10px 12px;

  border-radius:16px;
  border:1px solid rgba(255,180,80,.22);

  background:
    radial-gradient(circle at 80% 50%, rgba(255,180,80,.12), transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.10));
}

.weapon-spec-icon{
  width:58px;
  min-width:58px;
  height:58px;

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

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

  border-radius:14px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,190,90,.18);
}

.weapon-spec-icon img{
  max-width:52px;
  max-height:52px;
  object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.55));
}

.weapon-spec-icon.empty{
  color:#d7c09b;
  font-family:Georgia, serif;
}

.weapon-spec-main{
  flex:1;
  min-width:0;
}

.weapon-spec-name{
  color:#f1ddb9;
  font-family:Georgia, "Times New Roman", serif;
  font-size:21px;
  line-height:1.15;
  font-weight:900;
  text-shadow:0 2px 3px rgba(0,0,0,.88);
}

.weapon-spec-desc{
  margin-top:4px;
  color:#c6ad8c;
  font-size:12px;
  line-height:1.35;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}

.weapon-spec-gem{
  width:58px;
  min-width:58px;
  height:58px;

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

  border-radius:50%;
  border:1px solid rgba(255,210,130,.28);
  background:
    radial-gradient(circle, rgba(255,255,255,.13), rgba(0,0,0,.22));

  box-shadow:
    inset 0 0 12px rgba(255,255,255,.04),
    0 0 18px rgba(255,160,50,.12);
}

.weapon-spec-gem img{
  max-width:54px;
  max-height:54px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.18));
}

.weapon-spec-gem.empty{
  color:#c7ad88;
  font-size:34px;
  font-family:Georgia, serif;
}

.weapon-spec-active.emerald .weapon-spec-gem{ box-shadow:0 0 18px rgba(50,255,140,.22); }
.weapon-spec-active.purple .weapon-spec-gem{ box-shadow:0 0 18px rgba(190,90,255,.22); }
.weapon-spec-active.red .weapon-spec-gem{ box-shadow:0 0 18px rgba(255,70,50,.22); }
.weapon-spec-active.orange .weapon-spec-gem{ box-shadow:0 0 18px rgba(255,130,40,.22); }
.weapon-spec-active.amber .weapon-spec-gem{ box-shadow:0 0 18px rgba(255,190,70,.22); }
.weapon-spec-active.sapphire .weapon-spec-gem{ box-shadow:0 0 18px rgba(60,130,255,.22); }
.weapon-spec-active.onyx .weapon-spec-gem{ box-shadow:0 0 18px rgba(120,90,180,.22); }
.weapon-spec-active.yellow .weapon-spec-gem{ box-shadow:0 0 18px rgba(255,230,80,.22); }

.weapon-spec-choices{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.weapon-spec-choice{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;

  min-height:42px !important;
  margin:0 !important;
  padding:6px 10px !important;

  border-radius:13px !important;
  font-size:12px !important;
}

.weapon-spec-choice img{
  width:28px;
  height:28px;
  object-fit:contain;
}

.weapon-spec-actions{
  margin-top:10px;
}

.weapon-spec-actions button{
  max-width:180px;
}

/* Wenn keine Waffenspezialisierung aktiv ist, wird der Tree darunter versteckt */
.weapon-tree-locked .tree-header,
.weapon-tree-locked #skillNodeInfo,
.weapon-tree-locked .tree-wrap{
  display:none !important;
}

.weapon-tree-locked::after{
  content:"Kein Waffen-Tree freigeschaltet. Setze oben einen Edelstein ein.";
  display:block;
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  color:#cdb590;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,190,90,.14);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}

@media(max-width:420px){
  .weapon-spec-title{
    font-size:21px;
  }

  .weapon-spec-bar{
    gap:8px;
    padding:8px;
  }

  .weapon-spec-icon,
  .weapon-spec-gem{
    width:48px;
    min-width:48px;
    height:48px;
  }

  .weapon-spec-icon img,
  .weapon-spec-gem img{
    max-width:44px;
    max-height:44px;
  }

  .weapon-spec-name{
    font-size:18px;
  }

  .weapon-spec-choices{
    grid-template-columns:1fr;
  }
}






/* === PATCH: HIDE OLD SKILLTREE HEADER === */

/* Alten Skilltree-Header mit Aktiv/Effizienz/Edit/Reset ausblenden */
#screenSkilltree .tree-header{
  display:none !important;
}

/* Alten Hinweistext "Edit AUS = sicher scrollen..." ausblenden */
#screenSkilltree .tree-header + .small{
  display:none !important;
}

/* Alten Node-Info-Kasten ausblenden */
#screenSkilltree #skillNodeInfo{
  display:none !important;
}

/* Tree direkt unter die neue Spezialisierungsleiste ziehen */
#screenSkilltree .tree-wrap{
  margin-top:16px !important;
}

/* Spezialisierungsleiste bekommt unten etwas weniger Abstand */
#screenSkilltree .weapon-spec-panel{
  margin-bottom:10px !important;
}






/* === PATCH: WEAPON SPEC COMPACT STATS === */

#screenSkilltree .weapon-spec-title{
  margin-top:14px !important;
  margin-bottom:14px !important;
}

.weapon-spec-stats{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,190,90,.18);
  background:rgba(0,0,0,.16);
}

.weapon-stat-summary{
  color:#e8d1ad;
  font-size:13px;
  line-height:1.4;
  margin-bottom:10px;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}

.weapon-stat-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;

  padding:10px 0;
  border-top:1px solid rgba(255,190,90,.12);
}

.weapon-stat-row:first-of-type{
  border-top:none;
}

.weapon-stat-name{
  color:#f0ddb8;
  font-family:Georgia, "Times New Roman", serif;
  font-size:16px;
  font-weight:900;
  text-shadow:0 2px 3px rgba(0,0,0,.85);
}

.weapon-stat-desc{
  color:#bda789;
  font-size:11px;
  line-height:1.3;
}

.weapon-stat-controls{
  display:flex;
  align-items:center;
  gap:6px;
}

.weapon-stat-controls button{
  width:34px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:10px !important;
  font-size:18px !important;
  line-height:1 !important;
}

.weapon-stat-controls span{
  min-width:24px;
  text-align:center;
  color:#f1ddb8;
  font-weight:900;
}

.weapon-stat-bonus{
  min-width:54px;
  text-align:right;
  color:#9af0a2;
  font-weight:900;
  font-size:14px;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
}

.weapon-stat-row.disabled-stat .weapon-stat-bonus{
  color:#cc8f85;
}

.weapon-stat-row.disabled-stat .weapon-stat-name,
.weapon-stat-row.disabled-stat .weapon-stat-desc{
  opacity:.72;
}

/* Alter SVG-Waffentree wird ersetzt */
#screenSkilltree .weapon-spec-stats ~ .tree-wrap{
  display:none !important;
}

@media(max-width:420px){
  .weapon-stat-row{
    grid-template-columns:1fr;
    gap:6px;
  }

  .weapon-stat-controls{
    justify-content:flex-start;
  }

  .weapon-stat-bonus{
    text-align:left;
  }
}






/* === PATCH: WEAPON SPEC QUEST GIFT OVERLAY === */

.weapon-spec-quest-overlay{
  position:fixed;
  inset:0;
  z-index:9999;

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

  padding:18px;
  background:rgba(0,0,0,.56);

  animation:weaponQuestFadeIn .22s ease-out;
}

@keyframes weaponQuestFadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.weapon-spec-quest-card{
  position:relative;
  width:min(420px, 94vw);

  border-radius:22px;
  border:1px solid rgba(255,185,85,.35);

  background:
    radial-gradient(circle at 50% 0%, rgba(255,170,70,.18), transparent 42%),
    linear-gradient(180deg, rgba(44,25,12,.96), rgba(11,7,5,.98));

  box-shadow:
    0 22px 60px rgba(0,0,0,.72),
    inset 0 0 0 1px rgba(255,255,255,.04);

  overflow:hidden;
}

.weapon-spec-quest-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:2;

  width:38px !important;
  height:38px !important;
  min-height:38px !important;

  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;

  font-size:24px !important;
  line-height:1 !important;
}

.weapon-spec-quest-image{
  position:relative;
  min-height:210px;

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

  background:
    radial-gradient(circle at 50% 50%, rgba(255,200,110,.20), transparent 44%),
    rgba(0,0,0,.32);

  cursor:pointer;
}

.weapon-spec-quest-image img{
  width:100%;
  max-height:300px;
  object-fit:cover;
  display:block;
}

.weapon-spec-quest-image-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;

  color:#f1d9b0;
  font-family:"UnifrakturCook", Georgia, serif;
  font-size:32px;
  text-shadow:0 3px 6px rgba(0,0,0,.9);
  pointer-events:none;
}

.weapon-spec-quest-image img:not([style*="display: none"]) + .weapon-spec-quest-image-fallback{
  display:none;
}

.weapon-spec-quest-text{
  padding:18px 20px 12px 20px;

  color:#f2dfbf;
  font-size:17px;
  line-height:1.45;

  text-shadow:0 2px 3px rgba(0,0,0,.85);
  cursor:pointer;
}

.weapon-spec-quest-hint{
  margin-top:12px;
  color:#c59d62;
  font-size:12px;
}

.weapon-spec-quest-actions{
  display:flex;
  gap:10px;
  padding:0 20px 20px 20px;
}

.weapon-spec-quest-actions button{
  flex:1;
}

@media(max-width:430px){
  .weapon-spec-quest-card{
    width:96vw;
  }

  .weapon-spec-quest-image{
    min-height:180px;
  }

  .weapon-spec-quest-text{
    font-size:15px;
  }
}






/* === PATCH: GEM CODEX === */

.codex-tabs{
  display:flex;
  gap:8px;
  margin:12px 0 14px 0;
}

.codex-tabs button{
  flex:1;
  min-height:38px !important;
  margin:0 !important;
}

.codex-tabs button.active{
  border-color:rgba(255,210,120,.55) !important;
  color:#ffe0ad !important;
  box-shadow:0 0 18px rgba(255,160,50,.16) !important;
}

.gem-summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0;
}

.gem-summary-card{
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,190,90,.18);
  background:rgba(0,0,0,.18);
}

.gem-summary-card b{
  color:#f0dbb6;
  font-family:Georgia, "Times New Roman", serif;
}

.gem-group{
  margin-top:16px;
}

.gem-group-title{
  display:flex;
  align-items:center;
  gap:10px;

  margin:10px 0 8px 0;
  padding:9px 10px;

  border-radius:14px;
  border:1px solid rgba(255,190,90,.18);
  background:rgba(0,0,0,.20);

  color:#f0dbb6;
  font-family:Georgia, "Times New Roman", serif;
  font-weight:900;
}

.gem-group-title img{
  width:34px;
  height:34px;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(255,180,80,.18));
}

.gem-codex-row .gem-rolls{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}

.gem-stat-pill{
  display:inline-block;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(255,190,90,.18);
  background:rgba(0,0,0,.22);
  color:#d8c19c;
  font-size:11px;
  line-height:1.2;
}

.gem-codex-row.locked{
  opacity:.62;
  filter:saturate(.55);
}

@media(max-width:430px){
  .gem-summary-grid{
    grid-template-columns:1fr;
  }
}






/* === PATCH: WEAPON SPEC CHOICE GEMS RIGHT === */

.weapon-spec-choice{
  display:grid !important;
  grid-template-columns:32px 1fr 34px !important;
  align-items:center !important;
  gap:9px !important;
  text-align:left !important;
}

.weapon-spec-choice .weapon-choice-icon{
  width:28px !important;
  height:28px !important;
  object-fit:contain !important;
  justify-self:center !important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.65));
}

.weapon-spec-choice .weapon-choice-name{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.weapon-spec-choice .weapon-choice-gem{
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
  justify-self:end !important;
  border-radius:50% !important;

  filter:
    drop-shadow(0 0 6px rgba(255,220,130,.22))
    drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

.weapon-spec-choice.emerald .weapon-choice-gem{
  filter:drop-shadow(0 0 8px rgba(50,255,130,.45)) drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

.weapon-spec-choice.red .weapon-choice-gem{
  filter:drop-shadow(0 0 8px rgba(255,60,40,.45)) drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

.weapon-spec-choice.purple .weapon-choice-gem{
  filter:drop-shadow(0 0 8px rgba(190,80,255,.45)) drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

.weapon-spec-choice.amber .weapon-choice-gem,
.weapon-spec-choice.yellow .weapon-choice-gem,
.weapon-spec-choice.orange .weapon-choice-gem{
  filter:drop-shadow(0 0 8px rgba(255,190,60,.45)) drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

.weapon-spec-choice.sapphire .weapon-choice-gem{
  filter:drop-shadow(0 0 8px rgba(60,140,255,.45)) drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

.weapon-spec-choice.onyx .weapon-choice-gem{
  filter:drop-shadow(0 0 8px rgba(80,80,120,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.7));
}





/* === PATCH: REMOVE LEFT WEAPON ICON IN SPEC CHOICES === */

.weapon-spec-choice{
  display:grid !important;
  grid-template-columns:1fr 34px !important;
  align-items:center !important;
  gap:10px !important;
  text-align:left !important;
}

.weapon-spec-choice .weapon-choice-icon{
  display:none !important;
}

.weapon-spec-choice .weapon-choice-name{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-weight:700 !important;
}

.weapon-spec-choice .weapon-choice-gem{
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
  justify-self:end !important;
  border-radius:50% !important;
  filter:drop-shadow(0 0 8px rgba(255,220,130,.25)) drop-shadow(0 2px 5px rgba(0,0,0,.7));
}









/* === PATCH: INTRO KNIGHT CLEAN LORE === */

.intro-knight-overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
}

.intro-knight-overlay.clean-follow{
  display:block !important;
  padding:0 !important;
}

.intro-knight-card.lore-card{
  position:fixed !important;
  width:min(390px, calc(100vw - 28px)) !important;
  max-height:calc(100vh - 140px) !important;
  overflow:hidden !important;
  pointer-events:auto !important;

  border-radius:18px !important;
  border:1px solid rgba(184,125,49,.72) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(119,74,27,.35), transparent 42%),
    linear-gradient(180deg, rgba(31,18,10,.98), rgba(8,6,5,.99)) !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,220,150,.04),
    inset 0 0 30px rgba(116,65,20,.18) !important;

  color:#f3dec0 !important;
}

.intro-knight-layout{
  display:grid !important;
  grid-template-columns:104px 1fr !important;
  gap:0 !important;
  min-height:150px !important;
}

.intro-knight-portrait{
  position:relative !important;
  overflow:hidden !important;
  min-height:150px !important;

  border-right:1px solid rgba(184,125,49,.38) !important;

  background:
    radial-gradient(circle at 50% 25%, rgba(255,190,85,.16), transparent 45%),
    #090706 !important;
}

.intro-knight-portrait img{
  width:100% !important;
  height:100% !important;
  min-height:150px !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
  filter:brightness(.88) contrast(1.08) saturate(.82) !important;
}

.intro-knight-portrait-fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;

  font-family:"UnifrakturCook", Georgia, serif;
  font-size:24px;
  color:#e8c997;
  text-shadow:0 2px 6px rgba(0,0,0,.9);
}

.intro-knight-portrait.fallback .intro-knight-portrait-fallback{
  display:flex;
}

.intro-knight-content{
  padding:16px 17px 12px 17px !important;
  cursor:pointer !important;
}

.intro-knight-kicker{
  font-family:"UnifrakturCook", Georgia, serif !important;
  font-size:22px !important;
  line-height:1 !important;
  color:#f0d8ad !important;
  text-shadow:0 2px 4px rgba(0,0,0,.9) !important;
  margin-bottom:10px !important;
}

.intro-knight-title{
  font-family:"UnifrakturCook", Georgia, serif !important;
  font-size:20px !important;
  line-height:1.05 !important;
  color:#ffd893 !important;
  text-shadow:0 2px 5px rgba(0,0,0,.9) !important;
  margin-bottom:7px !important;
}

.intro-knight-body{
  color:#ead6b8 !important;
  font-size:13.5px !important;
  line-height:1.33 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.85) !important;
}

.intro-knight-progress{
  margin-top:8px !important;
  color:#b98b52 !important;
  font-size:11.5px !important;
}

.intro-knight-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  padding:0 14px 14px 14px !important;
}

.intro-knight-actions button,
.intro-knight-primary,
.intro-knight-secondary{
  margin:0 !important;
  min-height:43px !important;
  height:43px !important;
  border-radius:13px !important;

  font-family:Georgia, "Times New Roman", serif !important;
  font-weight:900 !important;
  font-size:15px !important;

  color:#f1dcc0 !important;
  border:1px solid rgba(181,116,42,.55) !important;

  background:
    linear-gradient(180deg, rgba(69,38,17,.96), rgba(22,12,7,.98)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,230,170,.08),
    0 4px 12px rgba(0,0,0,.55) !important;
}

.intro-knight-primary{
  color:#ffe1ac !important;
  border-color:rgba(228,166,74,.72) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(123,73,22,.78), transparent 60%),
    linear-gradient(180deg, rgba(78,43,18,.98), rgba(26,13,6,.98)) !important;
}

.intro-knight-actions button:hover{
  filter:brightness(1.14) !important;
}

.intro-knight-close{
  position:absolute !important;
  top:9px !important;
  right:9px !important;
  z-index:5 !important;

  width:34px !important;
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
  padding:0 !important;

  border-radius:50% !important;
  font-size:22px !important;
  line-height:1 !important;

  color:#ffe2b8 !important;
  border:1px solid rgba(222,151,60,.72) !important;

  background:
    radial-gradient(circle at 50% 20%, rgba(135,73,21,.9), rgba(36,17,7,.98)) !important;

  box-shadow:
    0 4px 12px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,230,170,.12) !important;
}

.intro-knight-highlight{
  position:relative !important;
  z-index:9999 !important;

  border-color:rgba(238,184,83,.96) !important;

  box-shadow:
    0 0 0 2px rgba(216,148,42,.32),
    0 0 22px rgba(217,134,29,.65),
    inset 0 0 18px rgba(198,116,30,.18) !important;

  animation:introKnightCleanPulse 1.15s ease-in-out infinite !important;
}

@keyframes introKnightCleanPulse{
  0%,100%{
    filter:brightness(1);
  }
  50%{
    filter:brightness(1.23);
  }
}

@media(max-width:430px){
  .intro-knight-card.lore-card{
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 132px) !important;
  }

  .intro-knight-layout{
    grid-template-columns:86px 1fr !important;
    min-height:142px !important;
  }

  .intro-knight-portrait{
    min-height:142px !important;
  }

  .intro-knight-portrait img{
    min-height:142px !important;
  }

  .intro-knight-content{
    padding:14px 14px 10px 14px !important;
  }

  .intro-knight-kicker{
    font-size:20px !important;
  }

  .intro-knight-title{
    font-size:18px !important;
  }

  .intro-knight-body{
    font-size:12.8px !important;
  }
}






/* === PATCH: FINAL MENU + TOKEN CHOICE LAYOUT === */

/* Menüstruktur wieder wie ursprünglich: Highlight nur für Kampf starten */
.menu .menu-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  background:url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  border:none !important;
  box-shadow:none !important;
  min-height:62px !important;
  padding:0 22px !important;
}

.menu .menu-row.highlight{
  background:url("/assets/ui/button-highlight.png") center center / 100% 100% no-repeat !important;
  min-height:76px !important;
}

.menu .menu-row-label{
  width:100% !important;
  flex:none !important;
  text-align:center !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:2px !important;
  color:#fff4df !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 10px rgba(255,120,30,.45) !important;
}

.menu .menu-row.highlight .menu-row-label{
  font-size:24px !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 14px rgba(255,130,30,.75) !important;
}

/* Token-Auswahl bekommt wieder eigene Kartenoptik */
#tokenChoicesList.token-choice-list{
  margin-top:18px !important;
  padding:14px 10px !important;
  border-radius:18px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,210,130,.08), transparent 45%),
    linear-gradient(180deg, rgba(35,20,9,.28), rgba(8,5,3,.16)) !important;

  border:1px solid rgba(120,75,34,.24) !important;
}

#tokenChoicesList.token-choice-hidden{
  display:none !important;
}

#tokenChoicesList.token-choice-show{
  display:block !important;
}

#tokenChoicesList .token-choice-item{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;

  margin:14px 0 !important;
  padding:12px !important;
  min-height:132px !important;

  border-radius:16px !important;
  border:1px solid rgba(139,82,35,.42) !important;

  background:
    radial-gradient(circle at 16% 50%, rgba(255,190,90,.12), transparent 42%),
    linear-gradient(180deg, rgba(41,23,11,.48), rgba(13,8,5,.30)) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,230,170,.035),
    0 8px 18px rgba(0,0,0,.22) !important;

  cursor:pointer !important;
}

#tokenChoicesList .token-choice-item.selected,
#tokenChoicesList .token-choice-item.active{
  border-color:rgba(255,205,105,.90) !important;
  box-shadow:
    0 0 0 2px rgba(255,190,80,.25),
    0 0 20px rgba(255,145,35,.38),
    inset 0 0 0 1px rgba(255,230,170,.06) !important;
}

#tokenChoicesList .token-choice-item .item-art-wrap{
  width:86px !important;
  min-width:86px !important;
  height:112px !important;

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

  background:
    linear-gradient(180deg, rgba(132,72,30,.28), rgba(36,18,8,.20)) !important;
  border:1px solid rgba(136,79,35,.36) !important;
  border-radius:8px !important;
  overflow:hidden !important;
}

#tokenChoicesList .token-choice-item .item-art{
  width:82px !important;
  height:108px !important;
  object-fit:contain !important;
  display:block !important;
}

#tokenChoicesList .token-choice-item .info{
  flex:1 !important;
  min-width:0 !important;
  color:#ead6b8 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.8) !important;
}

#tokenChoicesList .token-choice-item .info b{
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:20px !important;
  line-height:1.08 !important;
  text-shadow:0 2px 3px rgba(0,0,0,.9) !important;
}

#tokenChoicesList .token-choice-item .info > div:not(.small){
  color:#e9d2ad !important;
  font-size:14px !important;
  line-height:1.28 !important;
}

#tokenChoicesList > button{
  font-family:Georgia, "Times New Roman", serif !important;
  background:url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  border:none !important;
  box-shadow:none !important;
  color:#fff4df !important;
  text-shadow:0 2px 4px rgba(0,0,0,.95) !important;
}

@media(max-width:420px){
  #tokenChoicesList .token-choice-item{
    gap:10px !important;
    padding:10px 8px !important;
  }

  #tokenChoicesList .token-choice-item .item-art-wrap{
    width:74px !important;
    min-width:74px !important;
    height:96px !important;
  }

  #tokenChoicesList .token-choice-item .item-art{
    width:70px !important;
    height:92px !important;
  }

  #tokenChoicesList .token-choice-item .info b{
    font-size:17px !important;
  }
}






/* === PATCH: TOKEN CHOICE VISIBLE SELECTED STATE === */

#tokenChoicesList .token-choice-item.selected,
#tokenChoicesList .token-choice-item.active{
  border-color:rgba(255,215,120,.98) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,210,110,.22), transparent 44%),
    linear-gradient(180deg, rgba(65,35,13,.64), rgba(18,9,4,.42)) !important;

  box-shadow:
    0 0 0 2px rgba(255,204,92,.38),
    0 0 26px rgba(255,155,35,.55),
    inset 0 0 0 1px rgba(255,240,180,.10),
    inset 0 0 28px rgba(255,160,55,.12) !important;
}

#tokenChoicesList .token-choice-item.selected::after,
#tokenChoicesList .token-choice-item.active::after{
  content:"✓";
  position:absolute;
  right:12px;
  top:10px;

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

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

  color:#ffe2a8;
  font-weight:900;
  font-size:18px;

  background:
    radial-gradient(circle at 50% 35%, rgba(111,64,19,.95), rgba(29,13,5,.98));
  border:1px solid rgba(255,210,110,.75);

  box-shadow:
    0 0 12px rgba(255,160,45,.55),
    inset 0 1px 0 rgba(255,240,180,.18);
}

#tokenChoicesList .token-choice-item.selected .info b,
#tokenChoicesList .token-choice-item.active .info b{
  text-shadow:
    0 2px 3px rgba(0,0,0,.95),
    0 0 12px rgba(255,170,50,.45) !important;
}










/* === CLEAN: SKILLTREE LOCKED MENU UI === */

/*
  Ziel:
  - Button bleibt in alter Menu-Optik
  - SKILLTREE bleibt exakt mittig
  - Hinweis steht rechts neben dem mittigen SKILLTREE-Text
  - nur locked Button wird grau
*/

#screenMenu .main-menu .menu-row.locked{
  position:relative !important;

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

  min-height:62px !important;
  padding:0 22px !important;

  opacity:.58 !important;
  filter:grayscale(1) brightness(.50) contrast(.88) !important;
  cursor:not-allowed !important;
}

#screenMenu .main-menu .menu-row.locked:hover{
  opacity:.58 !important;
  filter:grayscale(1) brightness(.50) contrast(.88) !important;
}

#screenMenu .main-menu .menu-row.locked .menu-row-label{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;

  width:100% !important;
  padding:0 !important;
  margin:0 !important;

  text-align:center !important;

  font-family:Georgia, "Times New Roman", serif !important;
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:2px !important;

  color:#8f877d !important;
  text-shadow:0 2px 4px rgba(0,0,0,.95) !important;

  pointer-events:none !important;
}

#screenMenu .main-menu .menu-row.locked .menu-row-subline{
  position:absolute !important;

  /*
    Direkt rechts neben dem zentrierten SKILLTREE-Text.
    Nicht am rechten Buttonrand.
  */
  left:calc(50% + 86px) !important;
  top:50% !important;
  transform:translateY(-50%) !important;

  width:118px !important;
  margin:0 !important;
  padding:0 !important;

  text-align:left !important;
  line-height:1.05 !important;

  font-family:Georgia, "Times New Roman", serif !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;

  color:#a8977c !important;
  opacity:.98 !important;
  text-shadow:0 2px 3px rgba(0,0,0,.95) !important;

  pointer-events:none !important;
}

.skilltree-locked-box{
  margin-top:14px !important;
  text-align:center !important;
  border:1px solid rgba(160,100,45,.28) !important;
  background:rgba(0,0,0,.18) !important;
}

@media(max-width:420px){
  #screenMenu .main-menu .menu-row.locked .menu-row-label{
    font-size:20px !important;
  }

  #screenMenu .main-menu .menu-row.locked .menu-row-subline{
    left:calc(50% + 72px) !important;
    width:104px !important;
    font-size:10px !important;
  }
}




/* === FINAL GEM CODEX UI === */

.gem-codex-shell{ overflow:hidden; }

.gem-color-tabs{
  display:flex;
  gap:6px;
  margin:14px 0;
  overflow-x:auto;
  padding:4px 2px 10px;
}

.gem-color-tab{
  width:auto !important;
  min-width:78px;
  height:72px;
  margin:0 !important;
  padding:7px 8px !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,rgba(20,13,8,.96),rgba(7,4,2,.96)) !important;
  border:1px solid rgba(196,128,55,.38) !important;
  box-shadow:inset 0 0 0 1px rgba(255,220,140,.08),0 6px 14px rgba(0,0,0,.45) !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#e9d3aa !important;
  font-family:Georgia,serif !important;
}

.gem-color-tab img{
  width:26px;
  height:26px;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(255,170,70,.25));
}

.gem-color-tab span{ font-size:12px; line-height:1; }
.gem-color-tab small{ font-size:10px; color:#a98b62; }

.gem-color-tab.active{
  border-color:rgba(255,170,70,.95) !important;
  box-shadow:inset 0 0 0 1px rgba(255,220,150,.20),0 0 18px rgba(255,122,30,.40),0 8px 20px rgba(0,0,0,.55) !important;
  filter:brightness(1.18);
}

.gem-family-panel{
  display:flex;
  gap:16px;
  align-items:center;
  padding:16px;
  margin:12px 0 16px;
  border:1px solid rgba(174,112,52,.34);
  border-radius:16px;
  background:radial-gradient(circle at 18% 50%,rgba(155,75,255,.13),transparent 32%),linear-gradient(180deg,rgba(40,22,10,.58),rgba(12,7,4,.72));
  box-shadow:inset 0 0 30px rgba(0,0,0,.45);
}

.gem-family-art{
  width:104px;
  min-width:104px;
  height:104px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,rgba(130,40,220,.25),rgba(0,0,0,.45) 65%);
  position:relative;
}

.gem-family-art img{
  width:84px;
  height:84px;
  object-fit:contain;
}

.gem-family-info h2{
  margin:0 0 6px;
  font-family:Georgia,serif;
  color:#f4dfc0;
  font-size:28px;
}

.gem-family-stats{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.gem-family-stats div{
  min-width:92px;
  padding:8px 10px;
  border:1px solid rgba(177,119,54,.35);
  background:rgba(0,0,0,.20);
  border-radius:10px;
}

.gem-family-stats b{
  display:block;
  font-size:11px;
  color:#b99a72;
}

.gem-family-stats span{
  display:block;
  font-size:20px;
  color:#f0d7a9;
  font-family:Georgia,serif;
}

.gem-entry-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.gem-entry{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(160,102,44,.30);
  background:linear-gradient(180deg,rgba(26,14,7,.74),rgba(8,5,3,.80));
  box-shadow:inset 0 0 0 1px rgba(255,220,140,.04),0 8px 18px rgba(0,0,0,.30);
}

.gem-entry.locked{
  opacity:.42;
  filter:grayscale(.75);
}

.gem-entry.active{
  border-color:rgba(90,220,110,.55);
  box-shadow:inset 0 0 0 1px rgba(110,255,130,.10),0 0 14px rgba(70,220,90,.18);
}

.gem-entry-img{
  width:72px;
  min-width:72px;
  height:72px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,rgba(120,50,210,.18),rgba(0,0,0,.48) 65%);
  position:relative;
  overflow:hidden;
}

.gem-entry-img img{
  width:58px;
  height:58px;
  object-fit:contain;
  position:relative;
  z-index:2;
}

.gem-entry-img span{
  font-size:30px;
  font-weight:900;
  color:#d0c4b5;
}

.glow-0{filter:hue-rotate(0deg) brightness(1.00)}
.glow-1{filter:hue-rotate(8deg) brightness(1.05)}
.glow-2{filter:hue-rotate(-8deg) brightness(1.08)}
.glow-3{filter:hue-rotate(16deg) brightness(1.03)}
.glow-4{filter:hue-rotate(-16deg) brightness(1.06)}
.glow-5{filter:hue-rotate(25deg) brightness(1.04)}
.glow-6{filter:hue-rotate(-25deg) brightness(1.07)}

.gem-entry-main{
  flex:1;
  min-width:0;
}

.gem-entry-title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.gem-entry-title b{
  font-family:Georgia,serif;
  font-size:18px;
  color:#ead3ad;
}

.gem-active-pill{
  font-size:12px;
  padding:3px 9px;
  border-radius:999px;
  color:#9dff9d;
  background:rgba(30,120,35,.35);
  border:1px solid rgba(110,255,120,.35);
  text-transform:uppercase;
}

.gem-entry-action{
  width:150px;
  min-width:150px;
}

.gem-equip-btn{
  width:100% !important;
  margin:0 !important;
  min-height:54px;
  padding:0 12px !important;
  background:url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  border:none !important;
  box-shadow:none !important;
  color:#fff4df !important;
  font-family:Georgia,serif !important;
  font-weight:900 !important;
  text-shadow:0 2px 4px rgba(0,0,0,.95);
}

.gem-codex-footer{
  margin-top:14px;
  text-align:center;
  color:#b99a72 !important;
}

@media(max-width:520px){
  .gem-family-panel{ align-items:flex-start; }
  .gem-family-art{ width:82px; min-width:82px; height:82px; }
  .gem-family-art img{ width:64px; height:64px; }
  .gem-family-info h2{ font-size:23px; }
  .gem-entry{ gap:9px; padding:10px; }
  .gem-entry-img{ width:58px; min-width:58px; height:58px; }
  .gem-entry-img img{ width:46px; height:46px; }
  .gem-entry-action{ width:112px; min-width:112px; }
  .gem-equip-btn{ font-size:12px !important; }
}


/* === FINAL FIX: Bestiarium Tabs Mobile sauber innerhalb des Bildes === */
.bestiary-detail-top-tabs{
  box-sizing:border-box !important;
  max-width:calc(100% - 36px) !important;
}

.bestiary-detail-top-tab{
  box-sizing:border-box !important;
  min-width:0 !important;
  width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

@media(max-width:700px){
  .bestiary-detail-top-tabs{
    left:12px !important;
    right:12px !important;
    top:88px !important;
    max-width:calc(100% - 24px) !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .bestiary-detail-top-tab{
    height:40px !important;
    min-height:40px !important;
    padding:0 6px !important;
    font-size:13px !important;
    line-height:1 !important;
  }

  .bestiary-overlay-panel{
    top:184px !important;
    left:12px !important;
    right:12px !important;
    bottom:14px !important;
  }
}

@media(max-width:380px){
  .bestiary-detail-top-tab{
    font-size:12px !important;
    padding:0 4px !important;
  }

  .bestiary-overlay-panel{
    top:180px !important;
  }
}


/* === REAL FINAL BUTTON SYSTEM === */
/* Explizite Content-Buttons. Hauptmenü, Kampfstart, Zurück und Tier-Hauptbutton bleiben unangetastet. */

/* Standard Content-Button */
button.dd-content-btn,
.dd-content-btn,
.tier-actions button,
#screenInventory .inventory-tabs button,
#screenInventory .item button,
#screenSkilltree .tree-tabs button,
#screenSkilltree .weapon-spec-actions button,
#screenSkilltree .weapon-stat-save,
#screenSkilltree button.secondary,
#screenSkilltree button.danger,
#screenShop .merchant-tabs button,
#screenShop button:not(.back):not(.sell-chip),
#tokenChoicesList > button,
#screenCodex .codex-tabs button,
#screenCodex .gem-family-btn,
#screenCodex .gem-equip-btn,
#screenBestiary .bestiary-detail-top-tab,
#screenBestiary .bestiary-detail-chip,
#screenOptions button:not(.back){
  background: url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 14px !important;

  color: #ffe2b4 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
  letter-spacing: .25px !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 8px rgba(255,120,30,.34) !important;
}

/* Große Kampf-/Ergebnisbuttons */
#repeatBtn,
#autoRepeatBtn,
.result button:not(.back):not(.tier-main),
button.dd-wide-btn,
.dd-wide-btn{
  background: url("/assets/ui/button-wide.png") center center / 100% 100% no-repeat !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 16px !important;

  color: #ffe2b4 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
  min-height: 52px !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 8px rgba(255,120,30,.34) !important;
}

/* Aktive Tabs / Highlight */
#autoRepeatBtn.auto-on,
#screenInventory .inventory-tabs button.active,
#screenSkilltree .tree-tabs button.active,
#screenShop .merchant-tabs button.active,
#screenCodex .codex-tabs button.active,
#screenCodex .gem-family-btn.active,
#screenBestiary .bestiary-detail-top-tab.active,
button.dd-content-btn.active,
button.active.dd-content-btn{
  background: url("/assets/ui/button-highlight.png") center center / 100% 100% no-repeat !important;

  color: #fff4df !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 12px rgba(255,120,30,.55) !important;
}

/* Danger: Asset bleibt, Text rötlicher */
#screenSkilltree button.danger,
#screenOptions button.danger,
#tokenChoicesList button.danger,
.result button.danger,
button.danger.dd-content-btn{
  background: url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  color: #ffd6d6 !important;
}

/* Plus / Minus im Skilltree */
#screenSkilltree .weapon-stat-btn{
  background: url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffe2b4 !important;
  font-family: Georgia, serif !important;
  font-weight: 900 !important;
}

/* X-Schließen */
#screenBestiary .bestiary-overlay-close,
.weapon-spec-quest-close,
.intro-knight-close{
  background: url("/assets/ui/button-back.png") center center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffe2b4 !important;
  font-family: Georgia, serif !important;
  font-weight: 900 !important;
}

/* Disabled */
#repeatBtn:disabled,
#screenInventory .item button:disabled,
#screenInventory .item button[disabled],
button.dd-content-btn:disabled,
button.dd-content-btn[disabled]{
  opacity: .58 !important;
  filter: grayscale(.2) !important;
  cursor: not-allowed !important;
}

/* Kompakte Itembuttons */
#screenInventory .item button,
#screenShop .item button,
#screenCodex .gem-equip-btn{
  min-height: 42px !important;
  padding: 9px 14px !important;
  margin-top: 8px !important;
}

/* Hover */
.tier-actions button:hover,
#screenInventory .inventory-tabs button:hover,
#screenInventory .item button:hover,
#screenSkilltree .tree-tabs button:hover,
#screenSkilltree .weapon-spec-actions button:hover,
#screenSkilltree .weapon-stat-save:hover,
#screenShop .merchant-tabs button:hover,
#screenShop button:not(.back):not(.sell-chip):hover,
#tokenChoicesList > button:hover,
#screenCodex .codex-tabs button:hover,
#screenCodex .gem-family-btn:hover,
#screenCodex .gem-equip-btn:hover,
#screenBestiary .bestiary-detail-top-tab:hover,
#screenBestiary .bestiary-detail-chip:hover,
#screenOptions button:not(.back):hover,
.result button:not(.back):not(.tier-main):hover{
  filter: brightness(1.08) !important;
}


/* === FINAL FIX: Gem Glow dezent und farbecht === */
/* Kein großer Farbnebel im Container. Glow nur noch am Edelsteinbild. */

.gem-entry-img,
.gem-row-img{
  background:rgba(0,0,0,.14) !important;
  box-shadow:none !important;
  border:none !important;
  overflow:visible !important;
}

/* Echte Edelsteinfarbe behalten, nur kleiner Außen-Halo */
.gem-entry-img img,
.gem-row-img img,
.gem-family-art img,
.gem-family-btn img,
.gem-detail-head img{
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.65))
    drop-shadow(0 0 4px rgba(255,215,110,.18))
    drop-shadow(0 0 9px rgba(255,215,110,.08)) !important;
}

/* Alte Karat-Glow-Klassen nicht mehr farbverschieben lassen */
.glow-0,
.glow-1,
.glow-2,
.glow-3,
.glow-4,
.glow-5,
.glow-6{
  filter:none !important;
}

/* Aktiver Stein darf leicht leuchten, aber nicht flächig */
.gem-entry.active{
  border-color:rgba(255,215,120,.38) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,140,.05),
    0 0 10px rgba(255,190,80,.10) !important;
}

.gem-row.active{
  border-color:rgba(255,215,120,.38) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,140,.05),
    0 0 10px rgba(255,190,80,.10) !important;
}


/* === FINAL FIX: Gem Glow sichtbar aber sauber === */
/* Sichtbarer Außen-Halo, aber kein großer farbiger Container-Nebel. */

.gem-entry-img,
.gem-row-img{
  background:rgba(0,0,0,.18) !important;
  box-shadow:none !important;
  border:none !important;
  overflow:visible !important;
}

/* Der Stein selbst leuchtet außen. Keine Hue-Rotation, keine Farbverfälschung. */
.gem-entry-img img,
.gem-row-img img,
.gem-family-art img,
.gem-family-btn img,
.gem-detail-head img{
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.70))
    drop-shadow(0 0 3px rgba(255,240,150,.45))
    drop-shadow(0 0 8px rgba(255,220,90,.30))
    drop-shadow(0 0 16px rgba(255,180,40,.16)) !important;
}

/* Topas/gelbe Steine dürfen sichtbar goldener wirken */
.gem-family-btn:has(b),
.gem-detail-head{
  --gemOuterGlow: rgba(255,210,70,.22);
}

/* Alte Karat-Glow-Klassen bleiben farbecht */
.glow-0,
.glow-1,
.glow-2,
.glow-3,
.glow-4,
.glow-5,
.glow-6{
  filter:none !important;
}

/* Aktiver Stein: dezenter Rahmen, kein grüner Nebel */
.gem-entry.active,
.gem-row.active{
  border-color:rgba(255,215,120,.45) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,140,.08),
    0 0 12px rgba(255,190,80,.14) !important;
}

/* Familienauswahl darf leicht leuchten, aber nicht flächig */
.gem-family-btn.active{
  box-shadow:
    inset 0 0 0 1px rgba(255,220,140,.08),
    0 0 12px rgba(255,190,80,.16) !important;
}


/* === FINAL FIX: 70 Karat Glow Varianten === */
/* Steinbild bleibt farbecht. Nur der Außen-Halo variiert je Karat. */

.gem-row-img{
  background:rgba(0,0,0,.16) !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.gem-row-img img{
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.70))
    drop-shadow(0 0 var(--gemGlowTiny, 3px) hsla(var(--gemGlowHue, 45),95%,72%,var(--gemGlowA1, .35)))
    drop-shadow(0 0 var(--gemGlowMid, 8px) hsla(var(--gemGlowHue, 45),95%,58%,var(--gemGlowA2, .22)))
    drop-shadow(0 0 var(--gemGlowBig, 16px) hsla(var(--gemGlowHue, 45),95%,48%,var(--gemGlowA3, .12))) !important;
}

/* Familien-Icons bleiben dezenter, weil sie keine Karat-Variante darstellen */
.gem-family-btn img,
.gem-family-art img,
.gem-detail-head img{
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.70))
    drop-shadow(0 0 5px rgba(255,220,110,.28))
    drop-shadow(0 0 12px rgba(255,190,70,.14)) !important;
}

/* Keine alte Hue-Rotation mehr auf dem Stein selbst */
.glow-0,
.glow-1,
.glow-2,
.glow-3,
.glow-4,
.glow-5,
.glow-6{
  filter:none !important;
}

/* === PATCH: GAME NOTICE MODAL USES DURATAS PANEL + BUTTON ASSETS === */

#gameNoticeOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(2px) !important;
}

#gameNoticeOverlay .game-notice-modal{
  width:min(92vw, 760px) !important;
  min-height:260px !important;
  padding:54px 44px 42px 44px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:
    0 0 0 1px rgba(255,180,80,.22),
    0 22px 80px rgba(0,0,0,.85),
    inset 0 0 60px rgba(0,0,0,.62) !important;

  background:
    linear-gradient(rgba(18,10,5,.34), rgba(18,10,5,.44)),
    url("/assets/ui/tierpanel-top.png") top center / 100% auto no-repeat,
    url("/assets/ui/tierpanel-bottom.png") bottom center / 100% auto no-repeat,
    url("/assets/ui/tierpanel-middle.png") center center / 100% 100% repeat-y !important;

  color:#f4e3c2 !important;
  text-align:center !important;
  font-family:Georgia, "Times New Roman", serif !important;
}

#gameNoticeOverlay .game-notice-modal h2,
#gameNoticeOverlay .game-notice-modal .game-notice-title{
  margin:0 0 24px 0 !important;
  color:#ffdf8a !important;
  font-size:clamp(30px, 5.4vw, 58px) !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:.5px !important;
  text-shadow:
    0 3px 0 rgba(0,0,0,.55),
    0 0 22px rgba(255,170,40,.22) !important;
}

#gameNoticeOverlay .game-notice-modal p,
#gameNoticeOverlay .game-notice-modal .game-notice-text{
  margin:0 auto 34px auto !important;
  max-width:650px !important;
  color:#fff4df !important;
  font-size:clamp(20px, 3vw, 34px) !important;
  line-height:1.48 !important;
  font-weight:900 !important;
  text-shadow:0 3px 0 rgba(0,0,0,.75) !important;
}

#gameNoticeOverlay .game-notice-modal button,
#gameNoticeOverlay .game-notice-modal .game-notice-ok{
  width:100% !important;
  min-height:76px !important;
  margin:16px auto 0 auto !important;
  padding:18px 24px !important;
  border:0 !important;
  border-radius:0 !important;
  background:url("/assets/ui/button-highlight.png") center center / 100% 100% no-repeat !important;
  color:#fff8e8 !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:clamp(26px, 4vw, 46px) !important;
  font-weight:900 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  text-shadow:
    0 3px 0 rgba(0,0,0,.7),
    0 0 14px rgba(255,220,120,.25) !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#gameNoticeOverlay .game-notice-modal button:active,
#gameNoticeOverlay .game-notice-modal .game-notice-ok:active{
  transform:translateY(2px) scale(.99) !important;
  filter:brightness(1.08) !important;
}

@media (max-width: 560px){
  #gameNoticeOverlay{
    padding:10px !important;
    align-items:center !important;
  }

  #gameNoticeOverlay .game-notice-modal{
    width:94vw !important;
    min-height:220px !important;
    padding:38px 22px 30px 22px !important;
  }

  #gameNoticeOverlay .game-notice-modal button,
  #gameNoticeOverlay .game-notice-modal .game-notice-ok{
    min-height:64px !important;
  }
}



/* === PATCH: DURATAS GAME CONFIRM MODAL === */

#gameConfirmOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
}

#gameConfirmOverlay .game-confirm-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(2px) !important;
}

#gameConfirmOverlay .game-confirm-modal{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(92vw, 820px) !important;
  min-height:260px !important;
  padding:54px 42px 38px 42px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:
    0 0 0 1px rgba(255,180,80,.22),
    0 22px 80px rgba(0,0,0,.85),
    inset 0 0 60px rgba(0,0,0,.58) !important;
  background:
    linear-gradient(rgba(18,10,5,.35), rgba(18,10,5,.45)),
    url("/assets/ui/tierpanel-top.png") top center / 100% auto no-repeat,
    url("/assets/ui/tierpanel-bottom.png") bottom center / 100% auto no-repeat,
    url("/assets/ui/tierpanel-middle.png") center center / 100% 100% repeat-y !important;
  color:#f4e3c2 !important;
  text-align:center !important;
  font-family:Georgia, "Times New Roman", serif !important;
}

#gameConfirmOverlay .game-confirm-title{
  margin:0 0 22px 0 !important;
  color:#ffdf8a !important;
  font-size:clamp(26px, 4.4vw, 50px) !important;
  line-height:1.06 !important;
  font-weight:900 !important;
  text-shadow:
    0 3px 0 rgba(0,0,0,.55),
    0 0 22px rgba(255,170,40,.22) !important;
}

#gameConfirmOverlay .game-confirm-text{
  margin:0 auto 30px auto !important;
  max-width:670px !important;
  color:#fff4df !important;
  font-size:clamp(18px, 2.5vw, 31px) !important;
  line-height:1.45 !important;
  font-weight:800 !important;
  text-shadow:0 3px 0 rgba(0,0,0,.75) !important;
}

#gameConfirmOverlay .game-confirm-actions{
  display:flex !important;
  gap:16px !important;
  justify-content:center !important;
  align-items:stretch !important;
  flex-wrap:wrap !important;
  margin-top:8px !important;
}

#gameConfirmOverlay .game-confirm-actions button{
  flex:1 1 280px !important;
  min-width:240px !important;
  min-height:72px !important;
  margin:0 !important;
  padding:18px 20px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#fff8e8 !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:clamp(20px, 2.8vw, 34px) !important;
  font-weight:900 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  text-shadow:
    0 3px 0 rgba(0,0,0,.7),
    0 0 14px rgba(255,220,120,.25) !important;
  cursor:pointer !important;
}

#gameConfirmOverlay .game-confirm-ok{
  background:url("/assets/ui/button-highlight.png") center center / 100% 100% no-repeat !important;
}

#gameConfirmOverlay .game-confirm-cancel{
  background:url("/assets/ui/button-menu.png") center center / 100% 100% no-repeat !important;
}

#gameConfirmOverlay .game-confirm-actions button:active{
  transform:translateY(2px) scale(.99) !important;
  filter:brightness(1.08) !important;
}

@media (max-width: 560px){
  #gameConfirmOverlay .game-confirm-modal{
    width:94vw !important;
    min-height:220px !important;
    padding:36px 20px 28px 20px !important;
  }

  #gameConfirmOverlay .game-confirm-actions{
    gap:12px !important;
  }

  #gameConfirmOverlay .game-confirm-actions button{
    flex:1 1 100% !important;
    min-width:100% !important;
    min-height:64px !important;
  }
}


/* === DURATAS GAME VERSION STYLES === */

.game-version-badge{
  position:fixed;
  right:10px;
  bottom:8px;
  z-index:9999;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(243,210,138,.28);
  background:rgba(18,10,6,.72);
  color:#e8d6ad;
  font-family:Georgia,serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  box-shadow:0 0 12px rgba(0,0,0,.35);
  pointer-events:none;
  opacity:.78;
}

.game-version-panel{
  margin-top:16px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(243,210,138,.24);
  background:rgba(20,10,6,.42);
  color:#f0dfbc;
  font-family:Georgia,serif;
  line-height:1.45;
}

.game-version-panel b{
  color:#f3d28a;
  font-size:18px;
}

.game-version-panel .small{
  color:#d7c3a0;
  font-size:13px;
}

.game-version-notes{
  margin-top:8px;
}

@media(max-width:700px){
  .game-version-badge{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    bottom:4px;
    font-size:10px;
    max-width:92vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* === PATCH: VERSION BADGE NUMBER ONLY === */

.main-menu .game-version-badge{
  min-width:110px !important;
  max-width:180px !important;
  padding:4px 12px !important;
  font-size:12px !important;
  opacity:.72 !important;
}

@media(max-width:700px){
  .main-menu .game-version-badge{
    min-width:92px !important;
    max-width:140px !important;
    font-size:10px !important;
    padding:3px 9px !important;
  }
}


/* === PATCH: VERSION BADGE NORMAL MENU BOTTOM === */

/* Falls noch ein alter Body-Badge existiert: niemals anzeigen */
body > #gameVersionBadge,
body > .game-version-badge{
  display:none !important;
}

/* Startmenü bekommt unten Platz, aber Badge ist normaler Inhalt */
#screenMenu .main-menu,
.main-menu{
  padding-bottom:28px !important;
}

/* Version nur als normale kleine Zeile am Ende vom Startmenü */
#screenMenu .main-menu #gameVersionBadge,
.main-menu #gameVersionBadge,
#screenMenu .main-menu .game-version-badge,
.main-menu .game-version-badge{
  position:static !important;
  display:block !important;

  transform:none !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;

  width:max-content !important;
  min-width:0 !important;
  max-width:180px !important;

  margin:18px auto 0 auto !important;
  padding:4px 12px !important;

  border-radius:999px !important;
  border:1px solid rgba(243,210,138,.25) !important;
  background:rgba(18,10,6,.55) !important;
  color:#e8d6ad !important;

  font-family:Georgia,serif !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.3px !important;
  text-align:center !important;
  text-shadow:0 1px 2px rgba(0,0,0,.9) !important;
  box-shadow:0 0 10px rgba(0,0,0,.25) !important;

  pointer-events:none !important;
  opacity:.68 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:auto !important;
}

/* In aufgeklappten Content-Screens nicht anzeigen */
#contentShell #gameVersionBadge,
#screenBattle #gameVersionBadge,
#screenDifficulty #gameVersionBadge,
#screenInventory #gameVersionBadge,
#screenSkilltree #gameVersionBadge,
#screenShop #gameVersionBadge,
#screenCodex #gameVersionBadge,
#screenBestiary #gameVersionBadge,
#screenLadder #gameVersionBadge,
#screenOptions #gameVersionBadge{
  display:none !important;
}

@media(max-width:700px){
  #screenMenu .main-menu #gameVersionBadge,
  .main-menu #gameVersionBadge{
    font-size:10px !important;
    padding:3px 9px !important;
    margin-top:14px !important;
    max-width:140px !important;
  }
}


/* === PATCH: REMOVE STARTMENU VERSION BADGE === */

#gameVersionBadge,
.game-version-badge{
  display:none !important;
}


/* === PATCH: UNIQUE TITLE TIGHT FINAL === */
.unique-effect.small{
  margin-top:4px !important;
  line-height:1.22 !important;
}

.dd-unique-title{
  display:block !important;
  font-size:13px !important;
  line-height:1.05 !important;
  font-weight:700 !important;
  margin:2px 0 1px 0 !important;
  padding:0 !important;
  font-family:inherit !important;
}

@media (max-width: 700px){
  .dd-unique-title{
    font-size:12px !important;
    margin:1px 0 1px 0 !important;
  }
}


/* === PATCH: DIVINATION TOKEN OVERLAY SESSION === */

#divinationTokenOverlay{
  position:fixed;
  inset:0;
  z-index:99998;
}

#divinationTokenOverlay .token-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(2px);
}

#divinationTokenOverlay .token-overlay-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(94vw, 720px);
  max-height:88vh;
  overflow:auto;
  box-sizing:border-box;
  padding:38px 22px 24px 22px;
  color:#f5ead7;
  text-align:center;
  background-image:
    url("/assets/ui/tierpanel-top.png"),
    url("/assets/ui/tierpanel-bottom.png"),
    url("/assets/ui/tierpanel-middle.png");
  background-position:
    top center,
    bottom center,
    top center;
  background-size:
    100% auto,
    100% auto,
    100% auto;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-y;
  filter:drop-shadow(0 18px 35px rgba(0,0,0,.75));
}

#divinationTokenOverlay .token-overlay-close{
  position:absolute;
  right:16px;
  top:12px;
  width:44px;
  height:40px;
  padding:0 !important;
  margin:0 !important;
  line-height:38px;
  font-size:28px;
  z-index:2;
  background:url("/assets/ui/button-back.png") center center / 100% 100% no-repeat !important;
}

#divinationTokenOverlay .token-overlay-title{
  font-size:28px;
  font-weight:900;
  color:#f3d28a;
  line-height:1.05;
}

#divinationTokenOverlay .token-overlay-stage{
  margin-top:4px;
  font-size:18px;
  font-weight:900;
  color:#ffe7a3;
}

#divinationTokenOverlay .token-overlay-desc{
  margin-top:8px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

#divinationTokenOverlay .token-overlay-message{
  margin:12px auto 6px auto;
  font-weight:900;
  font-size:17px;
}

#divinationTokenOverlay .token-visual{
  margin:12px auto 12px auto;
}

#divinationTokenOverlay .token-img{
  width:min(220px, 54vw);
  height:auto;
  display:block;
  margin:0 auto;
}

#divinationTokenOverlay .token-overlay-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:10px auto 12px auto;
  max-width:420px;
}

#divinationTokenOverlay .token-choice-list{
  margin-top:12px;
}

#divinationTokenOverlay .token-choice-hidden{
  display:none !important;
}

#divinationTokenOverlay .token-choice-show{
  display:block !important;
}

#divinationTokenOverlay .token-choice-item{
  cursor:pointer;
}

#divinationTokenOverlay .token-choice-item.selected,
#divinationTokenOverlay .token-choice-item.active{
  outline:2px solid rgba(255,220,120,.9);
  box-shadow:0 0 18px rgba(255,210,90,.35);
}

@media(max-width:700px){
  #divinationTokenOverlay .token-overlay-panel{
    width:96vw;
    max-height:90vh;
    padding:34px 14px 20px 14px;
  }

  #divinationTokenOverlay .token-overlay-title{
    font-size:23px;
  }

  #divinationTokenOverlay .token-overlay-stage{
    font-size:16px;
  }
}


/* === WEAPON AFFIX UI PHASE 1 === */
.weapon-affix-box{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(243,210,138,.20);
  background:rgba(0,0,0,.18);
  color:#d8c7a5;
  line-height:1.35;
}

/* === DURATAS AFFIX UI V1 === */

.dd-affix-box{
  margin:8px 0 6px 0;
  padding:7px 8px;
  border:1px solid rgba(243,210,138,.22);
  border-radius:10px;
  background:rgba(20,12,8,.34);
}

.dd-affix-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  font-size:12px;
  line-height:1.25;
  margin:2px 0;
}

.dd-affix-prefix{
  color:#f3d28a;
  font-weight:900;
  opacity:.95;
}

.dd-affix-name{
  color:#d8c39a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dd-affix-value{
  color:#9dffb0;
  font-weight:900;
  white-space:nowrap;
}

@media(max-width:700px){
  .dd-affix-box{
    margin:6px 0 5px 0;
    padding:6px 7px;
  }

  .dd-affix-row{
    grid-template-columns:minmax(0,1fr) auto;
    font-size:11px;
    gap:6px;
  }
}

/* Duratas Gänseblümchen Unique UI */
.duratas-unique-effect-box{
  margin-top:8px;
  padding:8px 9px;
  border:1px solid rgba(255,220,120,.35);
  border-radius:10px;
  background:rgba(255,220,120,.08);
  line-height:1.35;
}

.duratas-unique-effect-title{
  font-size:12px;
  opacity:.78;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:3px;
}

.duratas-unique-effect-name{
  color:#ffe08a;
  font-weight:800;
}

.duratas-unique-effect-desc{
  margin-top:4px;
  font-size:13px;
  opacity:.92;
}

.duratas-unique-effect-scale{
  margin-top:4px;
  font-size:13px;
  color:#9cffb1;
  font-weight:800;
}


/* DURATAS UNIQUE INLINE INVENTORY LAYOUT E17 */
.duratas-unique-inline{
  margin-top:8px;
  max-width:330px;
  color:#e9d8b8;
  font-size:14px;
  line-height:1.28;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}

.duratas-unique-inline-label{
  display:block;
  font-weight:900;
  color:#f3d28a;
  margin-bottom:2px;
}

.duratas-unique-inline-text{
  display:block;
  opacity:.94;
}

.item .duratas-unique-inline{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

@media(max-width:700px){
  .duratas-unique-inline{
    font-size:13px;
    line-height:1.24;
  }
}
/* /DURATAS UNIQUE INLINE INVENTORY LAYOUT E17 */



/* DURATAS UNIQUE INLINE LAYOUT e17 */
.duratas-unique-effect-box,
.duratas-unique-effect-title,
.duratas-unique-effect-name,
.duratas-unique-effect-desc,
.duratas-unique-effect-scale{
  all: unset;
}

.duratas-unique-inline{
  margin-top: 9px;
  max-width: 330px;
  color: rgba(244,234,210,.88);
  font-size: 15px;
  line-height: 1.28;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}

.duratas-unique-inline b{
  color: #f3d28a;
  font-weight: 950;
}

.duratas-unique-inline-label,
.duratas-unique-inline-text{
  display: inline;
}

.duratas-stat-empty{
  margin-bottom: 4px;
}

.item .info .dd-content-btn{
  margin-top: 12px;
}

/* DURATAS UNIQUE INVENTORY WEAPON-LAYOUT e17 */
.duratas-unique-inline,
.duratas-unique-weapon-layout{
  margin-top:10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#ead9bd;
  line-height:1.32;
  max-width:340px;
}

.duratas-unique-inline-label{
  display:block !important;
  margin:0 0 2px 0 !important;
  padding:0 !important;
  color:#f3d28a;
  font-weight:900;
  font-size:15px;
  line-height:1.2;
}

.duratas-unique-inline-text{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#ead9bd;
  font-size:15px;
  line-height:1.32;
}

.duratas-unique-effect-box{
  display:none !important;
}
/* /DURATAS UNIQUE INVENTORY WEAPON-LAYOUT e17 */

/* DURATAS UNIQUE INVENTORY WEAPON-LAYOUT e17 */
.duratas-unique-inline,
.duratas-unique-weapon-layout{
  margin-top:10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#ead9bd;
  line-height:1.32;
  max-width:340px;
}

.duratas-unique-inline-label{
  display:block !important;
  margin:0 0 2px 0 !important;
  padding:0 !important;
  color:#f3d28a;
  font-weight:900;
  font-size:15px;
  line-height:1.2;
}

.duratas-unique-inline-text{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#ead9bd;
  font-size:15px;
  line-height:1.32;
}

.duratas-unique-effect-box{
  display:none !important;
}
/* /DURATAS UNIQUE INVENTORY WEAPON-LAYOUT e17 */

/* DURATAS AFFIX NORMAL STAT LINES e18 */
.duratas-affix-stat-list{
  margin-top:8px !important;
  margin-bottom:6px !important;
}

.duratas-stat-affix{
  max-width:330px;
}

.duratas-stat-affix .duratas-stat-label{
  color:#ead9bd;
  opacity:.9;
}

.duratas-stat-affix .duratas-stat-value{
  color:#9dffb0 !important;
  font-weight:900;
}
/* /DURATAS AFFIX NORMAL STAT LINES e18 */


/* DURATAS AFFIX FINAL CLEANUP */
.dd-affix-prefix{
  display:none !important;
}
.dd-affix-name{
  white-space:normal;
}

/* DURATAS E43 REAL ASSET BUTTON SYSTEM */
.dd-btn,
.dd-content-btn,
.home-card button,
.login-card button,
.hero-link-card button,
.weapon-spec-quest-actions button,
.intro-knight-actions button,
.intro-knight-card button,
.weapon-spec-quest-card button:not(.weapon-spec-quest-close),
button.dd-btn {
  min-height: 48px;
  padding: 11px 20px;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: .2px;
  color: #f7ead0;
  text-shadow: 0 2px 3px rgba(0,0,0,.85);
  background-image: url("/assets/ui/button-wide.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.dd-btn.primary,
.home-card button.primary,
.login-card button.primary,
.hero-link-card button.primary,
.weapon-spec-quest-actions button:first-child,
.intro-knight-actions button:first-child,
button.primary.dd-btn {
  color: #fff4d4;
  background-image: url("/assets/ui/button-highlight.png") !important;
}

.dd-btn.secondary,
.home-card button.secondary,
.login-card button.secondary,
.hero-link-card button.secondary,
.weapon-spec-quest-actions button.secondary,
.intro-knight-actions button.secondary,
button.secondary.dd-btn {
  color: #ead9bc;
  background-image: url("/assets/ui/button-menu.png") !important;
}

.dd-btn.back,
button.back.dd-btn,
button.back {
  color: #fff0d0;
  background-image: url("/assets/ui/button-back.png") !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dd-btn:hover,
.dd-content-btn:hover,
.home-card button:hover,
.login-card button:hover,
.hero-link-card button:hover,
.weapon-spec-quest-actions button:hover,
.intro-knight-actions button:hover,
.intro-knight-card button:hover,
.weapon-spec-quest-card button:not(.weapon-spec-quest-close):hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.dd-btn:active,
.dd-content-btn:active,
.home-card button:active,
.login-card button:active,
.hero-link-card button:active,
.weapon-spec-quest-actions button:active,
.intro-knight-actions button:active {
  filter: brightness(.92);
  transform: translateY(1px);
}

.weapon-spec-quest-actions,
.intro-knight-actions,
.hero-link-actions,
.login-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weapon-spec-quest-actions button,
.intro-knight-actions button,
.hero-link-actions button,
.login-actions button {
  width: 100%;
}

.weapon-spec-quest-close {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(0,0,0,.55) !important;
  color: #f3d2aa !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,220,150,.25) !important;
}
/* /DURATAS E43 REAL ASSET BUTTON SYSTEM */


/* DURATAS E49 TOKEN OVERLAY FORCE FRONT */
#divinationTokenOverlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: block !important;
  pointer-events: auto !important;
}

#divinationTokenOverlay .token-overlay-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;
  pointer-events: auto !important;
}

#divinationTokenOverlay .token-overlay-panel{
  position: fixed !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
}
/* /DURATAS E49 TOKEN OVERLAY FORCE FRONT */


/* DURATAS E53 OLD ITEM STATS LAYOUT */
.duratas-stat-list{
  display:block;
  width:100%;
  margin-top:10px;
}

.duratas-stat-row{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:baseline;
  gap:12px;
  width:100%;
  margin:4px 0;
  font-size:15px;
  line-height:1.35;
}

.duratas-stat-label{
  color:#e8dcc0;
  font-weight:400;
  text-align:left;
}

.duratas-stat-value{
  color:#f2deb1;
  font-weight:400;
  text-align:right;
  justify-self:end;
  min-width:72px;
}

.duratas-no-stats{
  margin-top:8px;
  color:#cfc3a8;
  font-weight:400;
}
/* /DURATAS E53 OLD ITEM STATS LAYOUT */


/* DURATAS E52 INVENTORY STAT READABILITY RESTORE */
/* Werte nicht mehr ganz rechts auseinanderziehen und nicht so brutal fett. */
.duratas-stat-line{
  justify-content:flex-start !important;
  max-width:none !important;
  gap:0 !important;
  padding:1px 0 !important;
}

.duratas-stat-value{
  margin-left:0 !important;
  font-weight:700 !important;
  text-shadow:none !important;
}

.duratas-stat-label{
  opacity:.92 !important;
}

.duratas-stat-list{
  gap:2px !important;
  font-size:15px !important;
  line-height:1.18 !important;
}
/* /DURATAS E52 INVENTORY STAT READABILITY RESTORE */

/* DURATAS E69B TOKEN OVERLAY TARGETED FRONT FIX */
/* Nur das echte Token-Auswahlfenster. Keine globalen Modal-Selektoren. */
#divinationTokenOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

#divinationTokenOverlay .token-overlay-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

#divinationTokenOverlay .token-overlay-panel {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

#divinationTokenOverlay .token-overlay-panel button,
#divinationTokenOverlay button {
  pointer-events: auto !important;
}
/* /DURATAS E69B TOKEN OVERLAY TARGETED FRONT FIX */


/* DURATAS E69 TOKEN DISCARD INLINE CONFIRM */
.duratas-token-discard-confirm{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.72) !important;
  pointer-events: auto !important;
}

.duratas-token-discard-card{
  width: min(92vw, 420px);
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,220,150,0.35);
  background: rgba(20,14,10,0.98);
  box-shadow: 0 20px 80px rgba(0,0,0,0.85);
  color: #f3dec1;
  text-align: center;
}

.duratas-token-discard-title{
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #ffd28a;
}

.duratas-token-discard-text{
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 14px;
}

.duratas-token-discard-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* /DURATAS E69 TOKEN DISCARD INLINE CONFIRM */


/* E71 VERSION HISTORY SCROLL */
.game-version-history-scroll{
  max-height: 430px;
  overflow-y: auto;
  padding-right: 8px;
  margin-top: 10px;
}

.game-version-history-scroll::-webkit-scrollbar{
  width: 10px;
}

.game-version-history-scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.22);
  border-radius: 10px;
}

.game-version-history-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,220,150,0.35);
  border-radius: 10px;
}

.game-version-entry{
  padding: 12px 0 16px 0;
  border-bottom: 1px solid rgba(255,220,160,0.14);
}

.game-version-entry:first-child{
  padding-top: 0;
}

.game-version-entry:last-child{
  border-bottom: none;
}

.game-version-entry-title{
  font-size: 1.05em;
  font-weight: 900;
  color: #f5dfad;
  margin-bottom: 4px;
}

.game-version-entry.current .game-version-entry-title{
  color: #ffe7a6;
}

.game-version-entry .game-version-notes{
  margin-top: 10px;
  line-height: 1.45;
}

/* =========================================================
   DURATAS E71 AUTH LAYOUT FIX
   Fix:
   - Login/Register/Held verlinken nicht mehr doppelt untereinander sichtbar
   - keine wiederholten Top-Panels
   - Auth Screens füllen genau den Viewport
   - Panels bleiben sauber im Rahmen
   ========================================================= */

/* Grundsätzlich: versteckte Screens wirklich weg */
.hidden,
.screen.hidden,
#screenLogin.hidden,
#screenRegister.hidden,
#screenLinkHero.hidden,
#screenHeroLink.hidden,
#screenCharSelect.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Auth Screens als echter einzelner Vollbild-Screen */
#screenLogin,
#screenRegister,
#screenLinkHero,
#screenHeroLink {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  z-index: 100 !important;

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

  padding: clamp(10px, 2.5vh, 24px) clamp(10px, 3vw, 20px) !important;
  box-sizing: border-box !important;

  background-color: #050302 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* Falls ein Screen hidden ist, gewinnt hidden trotzdem */
#screenLogin.hidden,
#screenRegister.hidden,
#screenLinkHero.hidden,
#screenHeroLink.hidden {
  display: none !important;
}

/* Body darf auf Auth nicht scrollen, sonst sieht man alte Panels darunter */
body.duratas-auth-screen,
html:has(body.duratas-auth-screen) {
  overflow: hidden !important;
  height: 100% !important;
}

/* Auth Container/Card stabilisieren */
#screenLogin .card,
#screenRegister .card,
#screenLinkHero .card,
#screenHeroLink .card,
#screenLogin .panel,
#screenRegister .panel,
#screenLinkHero .panel,
#screenHeroLink .panel,
#screenLogin .login-card,
#screenRegister .login-card,
#screenLinkHero .login-card,
#screenHeroLink .login-card {
  width: min(92vw, 560px) !important;
  max-width: 560px !important;
  max-height: calc(100svh - 28px) !important;
  overflow: hidden !important;

  margin: 0 auto !important;
  box-sizing: border-box !important;

  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}

/* Login / Register Form nicht zu tief ziehen */
#screenLogin form,
#screenRegister form,
#screenLogin .login-form,
#screenRegister .login-form,
#screenLogin .auth-form,
#screenRegister .auth-form {
  max-height: calc(100svh - 240px) !important;
  overflow: visible !important;
}

/* Logo in Auth Screens kompakt halten */
#screenLogin img.logo,
#screenRegister img.logo,
#screenLinkHero img.logo,
#screenHeroLink img.logo,
#screenLogin .logo img,
#screenRegister .logo img,
#screenLinkHero .logo img,
#screenHeroLink .logo img {
  display: block !important;
  width: min(78vw, 430px) !important;
  max-width: 430px !important;
  height: auto !important;
  margin: 0 auto clamp(12px, 2vh, 22px) auto !important;
}

/* Doppelte Logos innerhalb eines Auth Screens ausblenden */
#screenLogin img.logo ~ img.logo,
#screenRegister img.logo ~ img.logo,
#screenLinkHero img.logo ~ img.logo,
#screenHeroLink img.logo ~ img.logo,
#screenLogin .logo ~ .logo,
#screenRegister .logo ~ .logo,
#screenLinkHero .logo ~ .logo,
#screenHeroLink .logo ~ .logo {
  display: none !important;
}

/* Inputs sauber und nicht überbreit */
#screenLogin input,
#screenRegister input,
#screenLinkHero input,
#screenHeroLink input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Auth Buttons sauber skalieren */
#screenLogin button,
#screenRegister button,
#screenLinkHero button,
#screenHeroLink button {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Handy quer/kleine Höhe: alles kompakter */
@media (max-height: 760px) {
  #screenLogin,
  #screenRegister,
  #screenLinkHero,
  #screenHeroLink {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #screenLogin img.logo,
  #screenRegister img.logo,
  #screenLinkHero img.logo,
  #screenHeroLink img.logo,
  #screenLogin .logo img,
  #screenRegister .logo img,
  #screenLinkHero .logo img,
  #screenHeroLink .logo img {
    width: min(68vw, 360px) !important;
    margin-bottom: 10px !important;
  }

  #screenLogin .card,
  #screenRegister .card,
  #screenLinkHero .card,
  #screenHeroLink .card,
  #screenLogin .panel,
  #screenRegister .panel,
  #screenLinkHero .panel,
  #screenHeroLink .panel,
  #screenLogin .login-card,
  #screenRegister .login-card,
  #screenLinkHero .login-card,
  #screenHeroLink .login-card {
    max-height: calc(100svh - 16px) !important;
  }
}

/* Falls alte Auth-Screens im normalen Flow hängen: aus Flow entfernen */
#app > #screenLogin,
#app > #screenRegister,
#app > #screenLinkHero,
#app > #screenHeroLink,
body > #screenLogin,
body > #screenRegister,
body > #screenLinkHero,
body > #screenHeroLink {
  flex-shrink: 0 !important;
}

/* =========================================================
   DURATAS E73 BACKGROUND MUSIC OPTIONS
   ========================================================= */

.duratas-music-option-panel{
  margin: 18px 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 190, 90, 0.24);
  background:
    radial-gradient(circle at top left, rgba(255,160,60,0.12), transparent 45%),
    rgba(0,0,0,0.28);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.35);
}

.duratas-music-option-title{
  font-size: clamp(18px, 3.5vw, 24px);
  font-weight: 900;
  color: #f6d28a;
  margin-bottom: 8px;
}

.duratas-music-option-state{
  color: rgba(255,245,225,0.86);
  font-size: clamp(14px, 3vw, 18px);
  margin-bottom: 12px;
}

.duratas-music-toggle{
  width: 100%;
  max-width: 420px;
}

.duratas-music-toggle.music-on{
  filter: brightness(1.05);
}

.duratas-music-toggle.music-off{
  opacity: 0.92;
}

.duratas-music-option-hint{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,245,225,0.58);
  line-height: 1.35;
}