/*
 * Aiglemoor combat HUD — live panels rendered by hud.js from GMCP frames.
 * Layered on top of style.css (which styles the bar + xterm terminal). The
 * terminal stays the centerpiece in the left column; panels sit around it.
 * Health-band colours mirror the server (render.rs::health_band 90/75/50/30/15/5).
 */
:root{
  --muted:#9a9488; --card-bg:#15131c; --line:#2a2a38; --track:#23202c;
  --hb-healthy:#5fd35f; --hb-scratched:#46b34a; --hb-hurt:#e6c84d;
  --hb-wounded:#c79a2e; --hb-badly:#d35f5f; --hb-critical:#ff5a5a; --hb-near:#ff2f2f;
  --pool-hp:#d35f5f; --pool-mp:#5aa9ff; --pool-sp:#5fd39a; --pool-xp:#b48cff;
  /* Shared steady height for the two top bars (banner + room roster), so they
     hold the same size whether or not a foe / room occupants are present. */
  --top-bar-h:7.5rem;
}

/* The header HP/MP/SP text is redundant once the HUD shows live bars. */
#vitals{ display:none !important; }

/* ---- overall layout: bar / banner / room / (terminal | rail) -------------- */
#banner, #room { flex:0 0 auto; }
#banner[hidden], #room[hidden]{ display:none; }

#hud{
  flex:1 1 auto; min-height:0;
  display:grid; gap:.6rem; padding:.5rem .6rem;
  grid-template-columns: minmax(0,1fr) minmax(312px, 372px);
}
#terminal{ min-height:0; min-width:0; height:100%; padding:.2rem .3rem; }
#rail{
  min-height:0; overflow-y:auto; padding-right:.15rem;
  display:flex; flex-direction:column; gap:.6rem;
}
#rail::-webkit-scrollbar{ width:9px; }
#rail::-webkit-scrollbar-thumb{ background:#2a2a38; border-radius:6px; }

/* ---- card chrome ---------------------------------------------------------- */
.card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:10px;
  padding:.8rem .9rem;
}
.card[hidden]{ display:none; }
.card h2{
  margin:0 0 .55rem; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:700; display:flex; align-items:center; gap:.5rem;
}
.card h2 .who{ color:var(--fg); letter-spacing:.04em; text-transform:none; font-size:.92rem; }
.card h2 .sub{
  margin-left:auto; color:var(--muted); font-weight:400; text-transform:none;
  letter-spacing:.02em; font-size:.76rem;
}

/* ---- enemy banner --------------------------------------------------------- */
/* Steady height: the banner reserves its full combat size even when idle, so it
   never grows/shrinks as a fight starts or ends — content is centred within. */
#banner{
  margin:.6rem .6rem 0; padding:.65rem .9rem;
  background:linear-gradient(180deg,#1c1622,#161019);
  border:1px solid #3a2b34; border-left:4px solid var(--band,#d35f5f); border-radius:10px;
  min-height:var(--top-bar-h, 6rem);
  display:flex; flex-direction:column; justify-content:center; gap:.38rem;
}
.banner-top{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.foe-name{ font-size:1.1rem; font-weight:700; letter-spacing:.03em; color:#f0e4d4; text-transform:capitalize; }
.foe-lv{ color:var(--accent); font-weight:700; }
.foe-band{ margin-left:auto; font-weight:700; color:var(--band,#d35f5f); text-transform:capitalize; }
.foe-desc{ margin:.2rem 0 .5rem; color:var(--muted); font-size:.84rem; }
.chips{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.45rem; }
.chip{
  font-size:.7rem; letter-spacing:.03em; padding:.08rem .5rem; border-radius:999px;
  border:1px solid #5a3a3a; background:#2a1820; color:#ffb3b3; text-transform:capitalize;
}
.badge{
  font-size:.62rem; letter-spacing:.05em; color:#0b0b10; background:var(--accent);
  border-radius:4px; padding:.04rem .35rem; font-weight:700;
}
.badge.boss{ background:#e0794a; }

/* ---- idle / empty placeholders (the two top bars stay put, never collapse) - */
#banner.idle{ background:linear-gradient(180deg,#161b17,#11140f); border-color:#2c3a31; }
.banner-idle{ display:flex; align-items:center; gap:.75rem; min-height:1.7rem; }
.banner-idle .idle-mark{ font-size:1.25rem; line-height:1; color:#6fae8a; opacity:.85; }
.banner-idle .idle-text{ display:flex; flex-direction:column; min-width:0; }
.banner-idle .idle-title{ font-weight:700; letter-spacing:.03em; color:#cdd6cf; }
.banner-idle .idle-sub{ font-size:.8rem; color:var(--muted); }

#room.idle .room-idle{ display:flex; align-items:center; gap:.6rem; padding:.4rem .15rem .15rem; }
#room.idle .room-idle .idle-mark{ font-size:1.1rem; line-height:1; color:#6a7ba0; opacity:.8; }
#room.idle .room-idle .idle-text{ font-size:.84rem; color:var(--muted); }

/* ---- bars ----------------------------------------------------------------- */
.bar{ position:relative; height:1.2rem; background:var(--track); border-radius:6px; overflow:hidden; border:1px solid #000; }
.bar.big{ height:1.6rem; }
.bar-fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:6px 0 0 6px; transition:width .5s cubic-bezier(.4,.8,.3,1); }
.bar-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 .5rem; font-size:.76rem; font-weight:700; text-shadow:0 1px 2px #000; letter-spacing:.02em;
}
.bar-label .pct{ color:#000a; }
.bar.big .bar-label{ font-size:.9rem; }

/* ---- you / pools ---------------------------------------------------------- */
.pools{ display:flex; flex-direction:column; gap:.38rem; }

/* ---- stats ---------------------------------------------------------------- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.45rem .55rem; }
.stat{ background:#100e16; border:1px solid var(--line); border-radius:7px; padding:.38rem .45rem; text-align:center; }
.stat .k{ font-size:.64rem; letter-spacing:.1em; color:var(--muted); }
.stat .v{ font-size:1.02rem; font-weight:700; color:#ece6dc; }
.stat .m{ font-size:.7rem; color:var(--accent); }
.stat-foot{ display:flex; gap:1.1rem; margin-top:.55rem; font-size:.8rem; color:var(--muted); }
.stat-foot b{ color:#ece6dc; font-weight:700; }

/* ---- equipment ------------------------------------------------------------ */
.eq-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.42rem; }
.slot{ background:#100e16; border:1px solid var(--line); border-radius:7px; padding:.38rem .45rem; min-height:3.2rem; display:flex; flex-direction:column; gap:.18rem; }
.slot .sk{ font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.slot .si{ font-size:.76rem; color:#ddd6ea; line-height:1.2; }
.slot.empty{ opacity:.5; }
.slot.empty .si{ color:var(--muted); font-style:italic; }
.slot.magic{ border-color:#33606a; box-shadow:inset 0 0 0 1px #1c3338; }
.cond{ height:.26rem; border-radius:999px; background:var(--track); overflow:hidden; margin-top:auto; }
.cond>i{ display:block; height:100%; }

/* Item rarity tints — mirror render::rarity_color (common white, rare cyan,
   gems by element). Applied to equipment names and inventory rows. */
.r-rare    { color:#7fd6e0; }
.r-gem-fire{ color:#ff6b6b; }
.r-gem-water{ color:#6ba9ff; }
.r-gem-air { color:#f2d24e; }
.r-gem-earth{ color:#6fd38a; }

/* ---- inventory ------------------------------------------------------------ */
.inv-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.26rem; }
.inv-list li{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; padding:.16rem .2rem; border-bottom:1px dotted #221f2b; }
.inv-list li .dot{ color:var(--accent); }
.inv-list li .qty{ margin-left:auto; color:var(--muted); font-size:.76rem; }
.inv-empty{ color:var(--muted); font-size:.82rem; }
.gold-row{ display:flex; align-items:center; gap:.5rem; margin-top:.55rem; padding-top:.5rem; border-top:1px solid var(--line); font-weight:700; }
.gold-row .coin{ color:var(--accent); }
.carry{ margin-left:auto; color:var(--muted); font-weight:400; font-size:.76rem; }

/* ---- room roster ---------------------------------------------------------- */
/* Same steady baseline as the banner: the empty roster reserves the same height
   so the two top bars match and don't shrink when no one else is around. A busy
   room grows one tile-row at a time but is bounded so it can't shove the
   terminal far — the grid scrolls past a couple of rows. */
#room{ margin:.6rem .6rem 0; min-height:var(--top-bar-h, 6rem); display:flex; flex-direction:column; }
#room .room-grid{ max-height:9.5rem; overflow-y:auto; }
#room .room-grid::-webkit-scrollbar{ width:8px; }
#room .room-grid::-webkit-scrollbar-thumb{ background:#2a2a38; border-radius:6px; }
#room.idle .room-idle{ flex:1 1 auto; align-items:center; }
.room-grid{ display:grid; gap:.48rem; margin-top:.1rem; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); }
.foe{ display:flex; align-items:center; gap:.5rem; background:#100e16; border:1px solid var(--line); border-radius:8px; padding:.42rem .5rem; min-width:0; }
.foe.fighting{ border-color:var(--accent); box-shadow:inset 0 0 0 1px #3a2f12; }
.foe .dot{ flex:0 0 auto; width:.66rem; height:.66rem; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; }
.foe .body{ min-width:0; flex:1 1 auto; }
.foe .nm{ display:block; font-size:.83rem; color:#f0d98a; line-height:1.2; text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.foe.kind-player .nm{ color:#eaeaf2; }
.foe.kind-pet .nm{ color:#d6a6ff; }
.foe .meta{ display:flex; align-items:center; gap:.38rem; margin-top:.14rem; flex-wrap:wrap; }
.foe .lv{ font-size:.7rem; color:var(--muted); font-weight:700; }
.foe .hpw{ font-size:.68rem; color:var(--muted); }
.rtag{ font-size:.64rem; letter-spacing:.02em; padding:.03rem .42rem; border-radius:999px; border:1px solid; text-transform:capitalize; white-space:nowrap; }
.rtag.hostile { color:#ff9a9a; border-color:#7a3a3a; background:#2a1418; }
.rtag.passive { color:var(--muted); border-color:#3a3a48; background:#16151c; }
.rtag.quest   { color:var(--accent); border-color:#6a571f; background:#231d0c; }
.rtag.merchant,.rtag.banker{ color:#9ec9ff; border-color:#33486a; background:#121a2a; }
.rtag.pet     { color:#d6a6ff; border-color:#5a3a6a; background:#1d1428; }
.rtag.player  { color:#eaeaf2; border-color:#4a4a58; background:#191922; }
.rtag.fighting{ color:var(--accent); border-color:var(--accent); background:#241d08; font-weight:700; }

/* ---- responsive: stack on narrow screens, give the terminal real height --- */
@media (max-width: 860px){
  html, body{ height:auto; }
  body{ min-height:100vh; }
  #hud{ display:flex; flex-direction:column; }
  #terminal{ height:58vh; min-height:300px; border:1px solid var(--line); border-radius:8px; }
  #rail{ overflow:visible; }
}