/* Hollowmark's HUD, layered over the shared arcade chrome in kernel/arcade.css. */

.poe-hud { --rarity: #9aa3b2; }

/* ---- vitals ------------------------------------------------------------- */

.poe-vitals {
  background: var(--hud-panel);
  border: 1px solid var(--hud-edge);
  border-radius: 12px;
  padding: 10px 14px 12px;
  backdrop-filter: blur(6px);
  min-width: 300px;
}

.poe-name-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.poe-level { font-size: 20px; letter-spacing: 0.02em; }
.poe-depth { font-size: 11px; letter-spacing: 0.2em; color: var(--hud-dim); }
.poe-points {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #0a0c11;
  background: var(--hud-accent);
  border-radius: 99px;
  padding: 2px 8px;
  font-weight: 700;
}
.poe-points[hidden] { display: none; }

.poe-bar {
  position: relative;
  height: 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--hud-edge);
  overflow: hidden;
  margin-bottom: 5px;
}
.poe-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  height: 100%;
  width: 0%;
  transition: width 110ms linear;
  background: linear-gradient(90deg, #c0303f, #e4525f);
}
.poe-bar i.life[data-low="1"] { background: linear-gradient(90deg, #ff2d3f, #ff7a5f); }
/* Energy shield draws over life in the same track, the way PoE does, so the effective
   buffer reads as one bar rather than as two numbers competing for attention. */
.poe-bar i.es {
  background: linear-gradient(90deg, rgba(127, 212, 255, 0.85), rgba(180, 236, 255, 0.85));
  z-index: 2;
}
.poe-bar i.es[hidden] { display: none; }
.poe-bar.mana i { background: linear-gradient(90deg, #2f5bd0, #4f8bf0); }
.poe-bar.xp { height: 5px; }
.poe-bar.xp i { background: linear-gradient(90deg, #b48a3f, #ffd23f); transition: width 200ms linear; }
.poe-bar-text {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.poe-res { display: flex; gap: 6px; margin-top: 6px; }
.poe-res-cell {
  display: flex;
  gap: 3px;
  align-items: baseline;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--hud-dim);
}
.poe-res-cell b { font-size: 9px; letter-spacing: 0.1em; }
.poe-res-cell.fire b { color: #ff8a4a; }
.poe-res-cell.cold b { color: #7fd4ff; }
.poe-res-cell.lightning b { color: #ffe15a; }
.poe-res-cell.chaos b { color: #c98ad6; }
.poe-res-cell[data-state="cap"] { color: #7cf7c6; }
.poe-res-cell[data-state="neg"] { color: #ff6f61; }

.poe-stats { font-size: 10.5px; letter-spacing: 0.08em; color: var(--hud-dim); margin-top: 6px; }

.poe-map {
  width: 156px;
  height: 156px;
  background: var(--hud-panel);
  border: 1px solid var(--hud-edge);
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

/* ---- flasks and skills --------------------------------------------------- */

.hud-bl { flex-direction: column; gap: 8px; }

.poe-flasks { display: flex; gap: 7px; }
.poe-flask {
  position: relative;
  width: 46px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid var(--hud-edge);
  background: var(--hud-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 4px;
  backdrop-filter: blur(6px);
}
/* The fill is the charge count, so how close a flask is to usable is readable at a
   glance instead of requiring a number to be parsed mid-fight. */
.poe-flask::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--fill, 0%);
  background: var(--tint);
  opacity: 0.34;
}
.poe-flask.running { border-color: var(--tint); box-shadow: 0 0 12px -2px var(--tint); }
.poe-flask.running::before { opacity: 0.6; }
.poe-flask b { position: absolute; top: 4px; left: 6px; font-size: 10px; color: var(--hud-dim); }
.poe-flask span { position: relative; font-size: 9px; letter-spacing: 0.08em; }

.poe-skills { display: flex; gap: 7px; flex-wrap: wrap; max-width: 48vw; }
.poe-skill {
  border: 1px solid var(--hud-edge);
  border-left: 3px solid var(--tint);
  border-radius: 8px;
  background: var(--hud-panel);
  padding: 5px 10px;
  min-width: 104px;
  backdrop-filter: blur(6px);
  opacity: 0.55;
}
.poe-skill.active { opacity: 1; border-color: var(--tint); box-shadow: 0 0 14px -4px var(--tint); }
.poe-skill strong { display: block; font-size: 12px; }
.poe-skill small { display: block; font-size: 10px; color: var(--hud-dim); }
.poe-no-skill {
  font-size: 11.5px;
  color: var(--hud-accent);
  background: var(--hud-panel);
  border: 1px solid var(--hud-accent);
  border-radius: 8px;
  padding: 6px 11px;
}

/* ---- log ----------------------------------------------------------------- */

.poe-log { list-style: none; margin: 0 0 8px; padding: 0; text-align: right; max-width: 46vw; }
.poe-log li { font-size: 11.5px; color: var(--hud-dim); line-height: 1.5; }
.poe-log li:last-child { color: var(--hud-fg); }
.poe-log .poe-log-hurt { color: #ff8f88; }
.poe-log .poe-log-level, .poe-log .poe-log-passive { color: var(--hud-accent); }
.poe-log .poe-log-craft { color: #c98ad6; }
.poe-log .poe-log-unique { color: #e08f42; }
.poe-log .poe-log-rare { color: #ffff77; }
.poe-log .poe-log-magic { color: #9aa8ff; }
.poe-log .poe-log-fail { color: #ff8f88; }

.poe-prompt {
  font-size: clamp(13px, 2.4vw, 18px);
  letter-spacing: 0.24em;
  color: var(--hud-accent);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
}

/* ---- panels -------------------------------------------------------------- */

.poe-panel {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(940px, 95vw);
  max-height: 88vh;
  overflow-y: auto;
  background: rgba(7, 8, 12, 0.96);
  border: 1px solid var(--hud-edge);
  border-radius: 16px;
  padding: 20px 22px 24px;
  pointer-events: auto;
  backdrop-filter: blur(16px);
}
.poe-panel[hidden] { display: none; }
.poe-panel h2 { margin: 0; font-size: 20px; letter-spacing: 0.02em; }
.poe-panel h3 {
  margin: 20px 0 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--hud-dim);
  font-weight: 600;
}
.poe-panel-head { border-bottom: 1px solid var(--hud-edge); padding-bottom: 10px; }
.poe-panel-hint { margin: 5px 0 0; font-size: 11.5px; color: var(--hud-dim); }
.poe-panel-hint.armed { color: var(--hud-accent); }
.poe-panel-hint.warn { color: #ff8f88; }
.poe-dim { color: var(--hud-dim); font-size: 11px; }
.poe-ok { color: #7cf7c6; }
.poe-warn { color: #ff8f88; }

.poe-orbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 7px; }
.poe-orb {
  font: inherit;
  text-align: left;
  color: var(--hud-fg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hud-edge);
  border-left: 3px solid var(--tint);
  border-radius: 9px;
  padding: 7px 10px;
  cursor: pointer;
  display: grid;
  gap: 1px;
}
.poe-orb:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); }
.poe-orb.empty { opacity: 0.32; cursor: default; }
.poe-orb.armed { background: rgba(255, 210, 63, 0.14); border-color: var(--hud-accent); }
.poe-orb b { font-size: 15px; }
.poe-orb span { font-size: 11px; letter-spacing: 0.1em; color: var(--hud-dim); }
.poe-orb small { font-size: 10px; color: var(--hud-dim); }

.poe-equipped { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.poe-slot-label { font-size: 9px; letter-spacing: 0.22em; color: var(--hud-dim); }

.poe-item {
  display: block;
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--hud-fg);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hud-edge);
  border-left: 3px solid var(--rarity);
  border-radius: 9px;
  padding: 8px 11px;
  margin-top: 4px;
}
button.poe-item { cursor: pointer; }
button.poe-item:hover { background: rgba(255, 255, 255, 0.085); }
.poe-item-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.poe-item strong { color: var(--rarity); font-size: 13px; }
.poe-item small { display: block; font-size: 10.5px; color: var(--hud-dim); }
.poe-item .poe-mod { color: #9aa8ff; }
.poe-item .poe-flavour { color: #b08a5a; font-style: italic; margin-top: 3px; }
.poe-item-base { margin-bottom: 3px; }

.poe-sockets { display: flex; gap: 3px; }
.poe-socket {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--hud-edge);
  background: rgba(0, 0, 0, 0.5);
  display: block;
}
/* Linked sockets are ringed, because the link count is the single most important thing
   about an item and a colour alone is too easy to miss. */
.poe-socket.linked { box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.5); }

.poe-socket-row { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.poe-socket-btn {
  font: inherit;
  font-size: 10px;
  color: var(--hud-fg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--tint);
  border-radius: 7px;
  padding: 3px 8px;
  cursor: pointer;
}
.poe-socket-btn.linked { box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.45); }
.poe-socket-btn:hover { background: rgba(255, 255, 255, 0.11); }

.poe-gems { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px; }
.poe-gem {
  font: inherit;
  text-align: left;
  color: var(--hud-fg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hud-edge);
  border-left: 3px solid var(--tint);
  border-radius: 9px;
  padding: 7px 10px;
  cursor: pointer;
  display: grid;
  gap: 1px;
}
.poe-gem:hover { background: rgba(255, 255, 255, 0.09); }
.poe-gem.armed { background: rgba(255, 210, 63, 0.14); border-color: var(--hud-accent); }
.poe-gem strong { font-size: 12px; color: var(--tint); }
.poe-gem small { font-size: 10px; color: var(--hud-dim); }

.poe-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }

.poe-tree-canvas {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 12px auto 0;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 50%, rgba(40, 48, 70, 0.55), rgba(6, 8, 12, 0.9));
  cursor: pointer;
}
.poe-tree-detail {
  margin: 10px auto 0;
  max-width: 560px;
  text-align: center;
  display: grid;
  gap: 2px;
  min-height: 78px;
}
.poe-tree-detail strong { font-size: 14px; }
.poe-tree-detail small { font-size: 11.5px; }
.poe-tree-detail .poe-mod { color: #9aa8ff; }
.poe-tree-detail .poe-flavour { color: var(--hud-dim); }

.poe-dead table { margin: 0 auto; font-size: 13px; }
.poe-dead td { padding: 5px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.poe-dead td:first-child { font-size: 10px; letter-spacing: 0.18em; color: var(--hud-dim); text-align: left; }
.poe-dead td:last-child { text-align: right; font-weight: 700; }

@media (max-width: 780px) {
  .poe-vitals { min-width: 210px; padding: 7px 10px 9px; }
  .poe-map { width: 104px; height: 104px; }
  .poe-log { display: none; }
  .poe-skills { max-width: 62vw; }
  .poe-skill { min-width: 88px; padding: 4px 8px; }
  .poe-flask { width: 38px; height: 48px; }
  .poe-panel { padding: 14px 14px 18px; }
}