/* Read-only HUD: clicks pass through, and class actions retain their space. */
#experience-hud {
  position:absolute; right:18px; bottom:18px; z-index:18; width:236px;
  padding:9px 11px; box-sizing:border-box; pointer-events:none;
  color:#ede8cf; background:linear-gradient(125deg,rgba(17,35,38,.94),rgba(12,23,31,.94));
  border:1px solid #8b7951; border-radius:3px 12px 3px 12px;
  box-shadow:0 5px 16px #0005,inset 0 0 0 2px #c6b0760c;
  font-variant-numeric:tabular-nums; text-shadow:0 1px 2px #000;
}
#experience-hud header { display:flex; align-items:center; gap:8px; line-height:14px; }
#experience-hud header>span { color:#d7ba76; font:11px Georgia,serif; letter-spacing:.14em; }
#experience-level { font:600 11px Georgia,"Yu Mincho",serif; }
#experience-percent { margin-left:auto; color:#bcd6d5; font-size:10px; }
#experience-meter { height:8px; margin:7px 0 6px; overflow:hidden; border:1px solid #728c8160; border-radius:2px; background:#061215; box-shadow:inset 0 1px 3px #000b; }
#experience-fill { display:block; width:0; height:100%; background:linear-gradient(90deg,#276c80,#6cbcb6 65%,#e3d59b); box-shadow:0 0 9px #89d7c966; }
.experience-detail { display:flex; justify-content:space-between; gap:6px; line-height:12px; font-size:10px; white-space:nowrap; }
#experience-values { color:#a7bebc; }
#experience-remaining { color:#f0d79c; font-weight:500; }
#experience-hud.is-max #experience-fill { background:linear-gradient(90deg,#92723c,#edd59a); }
@media(max-width:1100px) {
  #experience-hud { right:10px; bottom:94px; }
  #hud .class-mechanic-panel { bottom:174px; }
}
@media(prefers-reduced-motion:no-preference) {
  #experience-fill { transition:width .2s ease-out; }
}