/* =====================================================================
   SCOUNDREL — panels.css
   Untere Panele: Ausrüstung (Waffe + Erschlagene) und Stapel
   ===================================================================== */

.lower{ display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:16px; align-items:stretch; }
.panel{
  background:linear-gradient(180deg,var(--stone-hi),var(--stone));
  border:1px solid var(--stone-edge); border-radius:12px; padding:14px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), var(--shadow);
}
.panel h2{
  font-family:var(--display); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:11.5px; color:var(--gold); margin-bottom:12px;
}

/* ---------- Ablege-Zonen (Drag-Ziele) ---------- */
.zone{ position:relative; transition:box-shadow .18s, border-color .18s, background .18s; }
.zone .heart-ic{ color:var(--blood); }
.zone .zonehint{
  margin-top:12px; font-size:11px; font-style:italic; color:var(--ink-faint); letter-spacing:.02em;
}
/* Leben-Zahl */
.hpbig{
  font-family:var(--display); font-weight:900; line-height:1; color:var(--parch);
  font-size:clamp(30px,7vw,46px); margin:2px 0 0;
  display:flex; align-items:baseline; gap:4px;
}
.hpbig .small{ font-size:.42em; font-weight:700; color:var(--ink-faint); }
.zone .hpbar{ width:100%; margin:9px 0 6px; }
.zone .sub{ font-size:13px; color:var(--ink-faint); font-style:italic; min-height:1.2em; }

/* Hervorhebung während des Ziehens (Klassen aus drag.js) */
body.is-dragging .zone.zone-active{
  border-color:var(--gold-deep);
  box-shadow:inset 0 0 0 1px var(--gold-deep), var(--shadow);
}
.zone.hover-ok{
  border-color:var(--gold);
  background:linear-gradient(180deg,#2c2415,var(--stone-hi));
  box-shadow:inset 0 0 26px rgba(201,168,74,.22), 0 0 0 2px var(--gold), 0 0 22px rgba(201,168,74,.35);
}
.zone.hover-no{
  border-color:var(--blood);
  box-shadow:inset 0 0 26px rgba(168,48,32,.2), 0 0 0 2px var(--blood);
}

/* Monsterzähler unter dem Stapel */
.stapel-sub{ margin-top:12px; text-align:center; font-size:12.5px; font-style:italic; color:var(--ink-faint); }

/* ---------- Ausrüstung ---------- */
.equip-row{ display:flex; align-items:center; gap:18px; min-height:96px; }
.wslot{ position:relative; width:74px; aspect-ratio:5/7; flex-shrink:0; }
.wslot.empty{
  border:2px dashed var(--stone-edge); border-radius:8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-faint); font-style:italic; font-size:11px; padding:6px;
}
.minicard{
  position:absolute; width:74px; aspect-ratio:5/7; border-radius:8px;
  background:linear-gradient(160deg,var(--card-face-1),var(--card-face-2));
  border:1px solid var(--card-face-edge); box-shadow:0 4px 10px -3px rgba(0,0,0,.6);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:900; color:var(--card-weapon-ink);
}
.minicard .v{ font-size:24px; line-height:1; }
.minicard .s{ font-size:13px; }
.minicard.slain{
  color:var(--card-monster-ink);
  background:linear-gradient(160deg,var(--card-monster-bg-1),var(--card-monster-bg-2));
  border-color:var(--card-monster-edge); box-shadow:0 4px 10px -3px rgba(0,0,0,.7);
}
.minicard.slain .v{ font-size:18px; }
.minicard.appear{ animation:slainIn .4s cubic-bezier(.2,.9,.3,1.2); }
@keyframes slainIn{ from{ transform:translate(-26px,-30px) rotate(-12deg); opacity:0; } to{ opacity:1; } }

.durbadge{ font-style:italic; font-size:13px; color:var(--parch); }
.durbadge b{ color:var(--steel-hi); font-style:normal; font-weight:600; }
.durbadge.sharp b{ color:var(--herb-hi); }
.durbadge.dull b{ color:var(--blood-hi); }

/* ---------- Stapel (Dungeon / Ablage) ---------- */
.piles{ display:flex; gap:24px; align-items:center; justify-content:space-around; min-height:96px; }
.pile{ text-align:center; }
.pilestack{ position:relative; width:60px; height:84px; margin:0 auto 8px; }
.pilestack i{
  position:absolute; width:54px; height:78px; border-radius:7px;
  background:linear-gradient(160deg,#241c12,#15100a);
  border:1px solid var(--stone-edge);
  box-shadow:0 3px 7px -2px rgba(0,0,0,.6);
}
.pilestack i:nth-child(1){ left:0; top:6px; }
.pilestack i:nth-child(2){ left:3px; top:3px; }
.pilestack i:nth-child(3){ left:6px; top:0; background:linear-gradient(160deg,#2e2415,#1c150d); }
.pilestack i:nth-child(3)::after{
  content:""; position:absolute; inset:0; border-radius:7px;
  background:radial-gradient(circle at 50% 45%, rgba(201,168,74,.25), transparent 60%);
}
.pilestack.empty i{ opacity:.25; }
.pile .num{ font-family:var(--display); font-weight:900; font-size:22px; color:var(--gold); }
.pile .cap{ font-size:11px; color:var(--ink-faint); letter-spacing:.08em; text-transform:uppercase; }

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