/* The run HUD (the approved mockup): one gold console along the bottom (life orb | belt | skills | menus | resource
   orb, the XP pips on its brow), the quests and the way home in one card at the top right, the chat in the same frame.
   Every piece is the UI-GUI pack's, at 1.5 screen px per pack px on a 1080-line screen (the #ui layer is laid out for
   1000 lines, so 1.389 layout px each). Rules sit under #hud / #hud-dock so they win over the older HUD rules. */

/* ---- the console ------------------------------------------------------------------------------------------------- */
#hud { position: absolute; left: 50%; bottom: 0; width: 972px; height: 148px; transform: translateX(-50%); pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud .hud-desk {
  position: absolute; left: 0; right: 0; bottom: 4px; height: 78px;
  border: 11px solid transparent; border-image: url('/activity/assets/kit/panels/panel-c.png') 8 / 11px stretch;
  background: rgba(24, 17, 24, 0.86); background-clip: padding-box; image-rendering: pixelated; pointer-events: none;
}
#hud .hud-bar { position: absolute; left: 98px; right: 98px; bottom: 15px; height: 56px; display: flex; align-items: center; justify-content: center; gap: 9px; }
#hud .hud-sep { flex: none; width: 8px; height: 28px; background: url('/activity/assets/kit/frames/detail9.png') center / 8px 28px no-repeat; image-rendering: pixelated; }

/* the belt: three potion slots (the pack's resource slot, 9-sliced) */
#hud .hud-belt { position: static; display: flex; gap: 4px; }
#hud .belt-slot {
  position: relative; width: 54px; height: 54px; padding: 0; background: none;
  border: 5px solid transparent; border-image: url('/activity/assets/kit/orbs/type-a-res-slot-a.png') 3 fill / 5px stretch; image-rendering: pixelated;
}
#hud .belt-slot > .icon { position: absolute; left: 0; top: 0; width: 44px; height: 44px; }
#hud .belt-slot:hover { filter: brightness(1.2); }
#hud .potion-auto { position: absolute; top: 0; left: 0; padding: 1px 2px; background: #080604da; color: var(--gold-hi); font: 9px/1 var(--f-ui); font-variant: small-caps; pointer-events: none; }
#hud .potion-status { position: absolute; bottom: 1px; left: 0; right: 0; padding: 2px 0; background: #080604e8; color: var(--gold-hi); text-align: center; font: 11px/1 var(--f-ui); pointer-events: none; }
#hud .potion-charge { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, var(--gold-hi) calc(var(--potion-charge, 1) * 100%), #24190e 0); pointer-events: none; }
#hud .belt-slot.recharging > .icon, #hud .belt-slot.used > .icon { filter: brightness(.45); }
#hud .belt-slot.recharging .potion-status { color: #eee4d2; }
#hud .belt-slot.used .potion-status { color: var(--parch-faint); }
#hud .belt-slot.potion-fired { animation: potion-fired .8s ease-out; }
@keyframes potion-fired { 0%, 25% { filter: brightness(1.8) drop-shadow(0 0 10px #f2d77d); } 100% { filter: none; } }

/* the skills: five gold-bracketed slots (Slot D, 9-sliced); a dark sweep and the seconds left while one cools */
#hud .hud-skills { position: static; display: flex; gap: 4px; }
#hud .skill-slot {
  position: relative; width: 56px; height: 56px; padding: 0; background: none; box-shadow: none;
  border: 5px solid transparent; border-image: url('/activity/assets/kit/slots/slotd1.png') 4 fill / 5px stretch; image-rendering: pixelated;
}
#hud .skill-slot img { position: absolute; left: 0; top: 0; width: 46px; height: 46px; }
#hud .skill-slot.empty { background: none; opacity: 0.55; }
#hud .skill-slot:hover { box-shadow: none; filter: brightness(1.15); }
#hud .skill-slot .cdv { left: 0; top: 0; width: 46px; height: 46px; background: conic-gradient(rgba(0, 0, 0, 0.78) calc(var(--cd, 0) * 360deg), transparent 0); }
#hud .skill-slot .cdn { font: 400 18px/1 var(--f-title); color: #fff; text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 0 0 6px #000; }
#hud kbd { position: absolute; right: -4px; bottom: -5px; font: 400 11px/1 var(--f-title); color: var(--gold-hi); text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; pointer-events: none; }

/* the windows: the pack's silver glyphs, gold while their window is open (or under the pointer) */
#hud .hud-row { position: static; display: flex; align-items: center; gap: 3px; }
#hud .ibtn { width: 31px; height: 31px; }
#hud .ibtn::before { content: none; }
#hud .ibtn > .glyph { inset: 0; width: 31px !important; height: 31px !important; }
#hud .ibtn > .glyph.lit, #hud .ibtn.on > .glyph.dim, #hud .ibtn:hover > .glyph.dim { display: none; }
#hud .ibtn.on > .glyph.lit, #hud .ibtn:hover > .glyph.lit { display: block; }
#hud .ibtn:hover { filter: none; }
#hud .ibtn.on::after { inset: -2px; border: 1px solid var(--gold-hi); box-shadow: 0 0 8px rgba(244, 210, 140, 0.55); }
#hud .ibtn kbd { right: -1px; bottom: -3px; font-size: 10px; }

/* the XP brow: the level on its stone, 20 pips of 5% each, the percent */
#hud .hud-xp {
  position: absolute; z-index: 2; left: 104px; right: 104px; bottom: 72px; height: 24px; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 4px;
  border: 6px solid transparent; border-image: url('/activity/assets/kit/titles/title-b.png') 4 10 / 6px 14px stretch;
  background: rgba(28, 20, 28, 0.94); background-clip: padding-box; image-rendering: pixelated;
}
#hud .hud-xp .lvl {
  position: relative; left: auto; top: auto; transform: none; flex: none; width: 32px; height: 32px; margin: -11px 0 -11px -13px;
  background: url('/activity/assets/kit/orbs/type-a-res-slot-b.png') center / 32px no-repeat; image-rendering: pixelated;
  display: grid; place-items: center; font: 400 14px/1 var(--f-title); color: #3a2414; text-shadow: none;
}
#hud .hud-xp .pips { display: flex; flex: 1; min-width: 0; justify-content: space-between; padding: 0 4px; }
#hud .hud-xp .pip { position: relative; flex: 0 0 22px; width: 22px; height: 13px; background: url('/activity/assets/kit/orbs/exp-bar-off.png') center / 22px 13px; image-rendering: pixelated; }
#hud .hud-xp .pip.on { background-image: url('/activity/assets/kit/orbs/exp-bar-on.png'); }
#hud .hud-xp .pip i { position: absolute; left: 0; top: 0; bottom: 0; background: url('/activity/assets/kit/orbs/exp-bar-on.png') left center / 22px 13px; image-rendering: pixelated; }
#hud .hud-xp .xpn { flex: none; min-width: 30px; text-align: right; font: 400 11px/1 var(--f-title); color: var(--gold-hi); text-shadow: 0 1px 0 #000; }
#hud .hud-xp.zenith .pip.on, #hud .hud-xp.zenith .pip i { filter: hue-rotate(220deg) saturate(1.35); }
#hud .hud-xp.zenith .xpn { color: #c99aff; }
#hud .hud-xp.zenith .lvl { color: #44265f; }

/* the orbs: Type A base, the pack's flat fill masked by the frame's own opening (flood-filled from the base art, so
   it meets the ring and its notches exactly) over an opaque backing (the frame's glass is see-through), the glass on
   top; the numbers on the pack's plate beneath. The opening spans source rows 9-54 of 69. */
#hud .orb { position: absolute; z-index: 3; bottom: 28px; width: 96px; height: 96px; }
#hud .orb.life { left: 4px; right: auto; } #hud .orb.res { right: 4px; left: auto; }
#hud .orb > img { position: absolute; inset: 0; width: 96px; height: 96px; image-rendering: pixelated; pointer-events: none; }
#hud .orb .well {
  position: absolute; inset: 0; left: 0; top: 0; width: auto; height: auto; border-radius: 0; overflow: hidden; background: #0c080b;
  -webkit-mask: url('/activity/assets/kit/orbs/orb-mask-a.png') 0 0 / 96px 96px no-repeat; mask: url('/activity/assets/kit/orbs/orb-mask-a.png') 0 0 / 96px 96px no-repeat;
}
#hud .orb.res .well { -webkit-mask-image: url('/activity/assets/kit/orbs/orb-mask-b.png'); mask-image: url('/activity/assets/kit/orbs/orb-mask-b.png'); }
#hud .orb .well i { position: absolute; left: 0; right: 0; bottom: 19.5px; height: calc(64px * var(--f, 1)); transition: height 0.35s ease; }
#hud .orb .well i::after { content: none; }
#hud .orb.life .well i { background: #9c1915; box-shadow: inset 0 2px 0 #d4483c; }
#hud .orb.res .well i { background: var(--res-fill, #01529e); box-shadow: inset 0 2px 0 var(--res-hi, #4b9be8); } /* each class's own (resource-colors.mjs) */
#hud .orb .orb-num {
  position: absolute; left: 4px; right: auto; top: calc(100% - 4px); bottom: auto; width: 89px; height: 24px;
  background: url('/activity/assets/kit/orbs/resorb-frame.png') center / 89px 24px no-repeat; image-rendering: pixelated;
  display: grid; place-items: center; font: 400 12px/1 var(--f-title); color: #fff; text-shadow: 0 1px 0 #000; white-space: nowrap;
}
#hud .orb.res .orb-num { left: auto; right: 4px; }

/* Ward is a crystalline gold crescent inside the existing glass, above red Life. */
#hud .ward-shell, #hud .ward-break { position: absolute; left: 16px; right: 16px; bottom: 19.5px; height: 64px; pointer-events: none; }
#hud .ward-shell { clip-path: polygon(50% 0,58% 15%,64% 32%,67% 50%,64% 68%,58% 85%,50% 100%,100% 100%,100% 0); }
#hud .ward-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(64px * var(--ward, 0)); overflow: hidden; transition: height .22s ease-out; background: radial-gradient(ellipse at 83% 24%,#fff5bbaa,transparent 34%),linear-gradient(112deg,#7e491966,#edb642ed 65%,#fff1a5dd); box-shadow: inset 0 2px #fff0a3,inset -4px 0 8px #ffd76670; }
#hud .ward-fill svg, #hud .ward-break svg { position: absolute; bottom: 0; width: 64px; height: 64px; fill: none; stroke: #fff1a4; stroke-width: 1; }
#hud .ward-fill svg { opacity: .8; }
#hud .ward-break { opacity: 0; }
#hud .ward-break svg { stroke-width: 1.8; }
#hud .ward-break.breaking { animation: hud-ward-shatter .5s ease-out; }
@keyframes hud-ward-shatter { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }
#hud .orb.life.has-ward .orb-num { top: calc(100% - 10px); height: 34px; background-size: 89px 34px; grid-template-rows: 1fr 1fr; padding: 5px 3px; font-size: 10px; line-height: 12px; }
#hud .ward-num { color: #f4dc9a; font-size: 9px; }
#hud .ward-num::before { content: ''; display: inline-block; width: 5px; height: 6px; margin-right: 3px; background: #f4dc9a; clip-path: polygon(0 0,100% 0,100% 65%,50% 100%,0 65%); }
#hud .ward-num[hidden] { display: none; }
#hud .ward-empty .ward-num { color: #a69b83; }
#hud .ward-empty .ward-num::before { background: #a69b83; }
@media (prefers-reduced-motion: reduce) { #hud .ward-fill { transition: none; } #hud .ward-break.breaking { animation: none; } }

/* ---- the top right: the quests and the way home in one card --------------------------------------------------------- */
#spectator-controls { position: absolute; left: 50%; bottom: 160px; transform: translateX(-50%); min-width: 260px; max-width: 90%; padding: 6px 10px; border: 8px solid transparent; border-image: url('/activity/assets/kit/panels/panel-c.png') 8 / 8px stretch; background: #181118ed; background-clip: padding-box; text-align: center; }
#spectator-controls[hidden], body.cine #spectator-controls { display: none; }
.spectator-note { color: var(--parch-dim); font: 12px/1.4 var(--f-ui); }
.spectator-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.spectator-target { color: var(--gold-hi); font: 14px/1.4 var(--f-ui); }
.spectator-row button { flex: none; width: 30px; height: 28px; padding: 0; border: 1px solid var(--gold-lo); background: #241b15; color: var(--gold-hi); font: 22px/1 var(--f-ui); }
.spectator-row button:disabled { opacity: .35; }
.spectator-row button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

#hud-dock {
  position: absolute; top: 20px; right: 22px; z-index: 6; width: 315px; display: flex; flex-direction: column;
  border: 11px solid transparent; border-image: url('/activity/assets/kit/panels/panel-c.png') 8 / 11px stretch;
  background: rgba(24, 17, 24, 0.84); background-clip: padding-box; image-rendering: pixelated; transition: opacity 0.35s;
}
#hud-dock[hidden] { display: none; }
#hud-dock::before, #hud-dock::after { content: ''; position: absolute; top: -18px; width: 26px; height: 26px; background: url('/activity/assets/kit/frames/detail2.png') center / 26px no-repeat; image-rendering: pixelated; pointer-events: none; }
#hud-dock::before { left: -18px; } #hud-dock::after { right: -18px; }
body.cine #hud-dock, body.at-title #hud-dock { opacity: 0; pointer-events: none; }
#right:not([hidden]) ~ #hud-dock { opacity: 0.18; pointer-events: none; }

#hud-dock .tracker:not(.folded) { padding: 1px 2px 0; }
#hud-dock .tracker.folded { align-self: flex-end; }
/* Folded, the card is only the icon (its own frame) and, on a map, the way home beside it. */
#hud-dock.folded { width: auto; flex-direction: row-reverse; align-items: center; gap: 10px; border: 0; background: none; }
#hud-dock.folded::before, #hud-dock.folded::after { content: none; }
#hud-dock.folded #world-actions { margin: 0; padding: 4px 8px; border: 8px solid transparent; border-image: url('/activity/assets/kit/panels/panel-c.png') 8 / 8px stretch; background: rgba(24, 17, 24, 0.84); background-clip: padding-box; }
#hud-dock.folded #return-town { margin-left: 0; }

#hud-dock #world-actions { position: static; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; padding: 6px 2px 0; border-top: 1px solid rgba(107, 84, 48, 0.55); }
#hud-dock #world-actions[hidden] { display: none; }
#hud-dock > #world-actions:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#hud-dock #return-town {
  flex: none; width: 180px; height: 39px; margin-left: -32px; min-width: 0; padding: 0; border: 0; border-image: none;
  background: url('/activity/assets/kit/buttons/buttons-a-buttona-idle.png') center / 180px 39px no-repeat; image-rendering: pixelated;
  font: 400 13px/1 var(--f-ui); font-variant: small-caps; letter-spacing: 0.02em; color: var(--parch); filter: none;
}
#hud-dock #return-town:hover:not(:disabled) { background-image: url('/activity/assets/kit/buttons/buttons-a-buttona1-hoover.png'); color: var(--gold-hi); filter: none; }
#hud-dock #run-save-status { padding: 0; background: none; text-align: right; font: 400 11px/1.25 var(--f-ui); color: #8fbf7a; }
#hud-dock #run-save-status:empty { display: none; }

/* ---- the chat, in the same frame; folded, it sits beside the console's left end when the window is wide enough ---- */
#realm-chat { border-image-source: url('/activity/assets/kit/panels/panel-c.png'); border-image-slice: 8; border-width: 11px; border-image-width: 11px; background-color: rgba(24, 17, 24, 0.9); }
#realm-chat.collapsed { width: 210px; background-color: rgba(24, 17, 24, 0.84); bottom: calc(152px * var(--ui-scale, 1)); }
@media (min-aspect-ratio: 3/2) { #realm-chat.collapsed { bottom: calc(12px * var(--ui-scale, 1)); } }
#realm-chat:not(.collapsed) { bottom: calc(152px * var(--ui-scale, 1)); max-height: calc(100vh - 152px * var(--ui-scale, 1) - 28px); }

/* a build changed on a map: the plate over the XP brow says it waits for town (main.js fightingHero) */
#hud .hud-pending {
  position: absolute; z-index: 2; left: 50%; bottom: 98px; transform: translateX(-50%); white-space: nowrap; padding: 3px 12px;
  border: 6px solid transparent; border-image: url('/activity/assets/kit/titles/title-b.png') 4 10 / 6px 14px stretch;
  background: rgba(28, 20, 28, 0.94); background-clip: padding-box; image-rendering: pixelated;
  font: 400 12px/1 var(--f-title); color: var(--gold-hi); text-shadow: 0 1px 0 #000;
}