/* ---------- the move / resize frame over a HUD panel (2026-10-18, js/hudbox.js): eight handles straddling the panel's edges and
   corners, shown while the pointer is on it. Gold corner brackets and a short gold bar in the middle of each side, so it
   reads as "pull here"; bigger handles for a finger. Sized in HUD units (--u on #ui). ---------- */
.hb-frame {
  --hb: calc(10px * var(--u)); --hc: calc(20px * var(--u)); --hg: #e0b04e;
  --in: 0.4; --cin: 0.67;   /* (how much of an edge / corner handle lies inside the panel: a finger's lie mostly outside, so its title still drags) */
  position: fixed; z-index: 882; pointer-events: none; box-sizing: border-box;
  outline: 1px dashed rgba(224, 176, 78, 0.45); outline-offset: 1px;
}
.hb-frame[hidden] { display: none; }
#ui > .hb-frame { pointer-events: none; }   /* (#ui > * would make the whole frame catch the presses meant for the panel) */
.hb-frame.busy { outline-color: rgba(255, 224, 138, 0.85); }
.hb-frame.nosize .hb-h { display: none; }
.hb-h { position: absolute; display: block; pointer-events: auto; touch-action: none; }
.hb-n, .hb-s { left: var(--hc); right: var(--hc); height: var(--hb); cursor: ns-resize; }
.hb-n { top: calc(var(--hb) * (var(--in) - 1)); }
.hb-s { bottom: calc(var(--hb) * (var(--in) - 1)); }
.hb-e, .hb-w { top: var(--hc); bottom: var(--hc); width: var(--hb); cursor: ew-resize; }
.hb-e { right: calc(var(--hb) * (var(--in) - 1)); }
.hb-w { left: calc(var(--hb) * (var(--in) - 1)); }
.hb-n::after, .hb-s::after, .hb-e::after, .hb-w::after {   /* the short bar in the middle of a side */
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 3px; background: var(--hg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.hb-n::after, .hb-s::after { width: calc(26px * var(--u)); height: calc(4px * var(--u)); }
.hb-e::after, .hb-w::after { width: calc(4px * var(--u)); height: calc(26px * var(--u)); }
.hb-ne, .hb-nw, .hb-se, .hb-sw { width: var(--hc); height: var(--hc); }
.hb-nw { left: calc(var(--hc) * (var(--cin) - 1)); top: calc(var(--hc) * (var(--cin) - 1)); cursor: nwse-resize; }
.hb-se { right: calc(var(--hc) * (var(--cin) - 1)); bottom: calc(var(--hc) * (var(--cin) - 1)); cursor: nwse-resize; }
.hb-ne { right: calc(var(--hc) * (var(--cin) - 1)); top: calc(var(--hc) * (var(--cin) - 1)); cursor: nesw-resize; }
.hb-sw { left: calc(var(--hc) * (var(--cin) - 1)); bottom: calc(var(--hc) * (var(--cin) - 1)); cursor: nesw-resize; }
.hb-ne::after, .hb-nw::after, .hb-se::after, .hb-sw::after {   /* the gold corner bracket */
  content: ''; position: absolute; width: 62%; height: 62%; box-sizing: border-box; border: 0 solid var(--hg);
  filter: drop-shadow(0 0 1px #000);
}
.hb-nw::after { right: 0; bottom: 0; border-left-width: calc(4px * var(--u)); border-top-width: calc(4px * var(--u)); border-top-left-radius: 4px; }
.hb-ne::after { left: 0; bottom: 0; border-right-width: calc(4px * var(--u)); border-top-width: calc(4px * var(--u)); border-top-right-radius: 4px; }
.hb-sw::after { right: 0; top: 0; border-left-width: calc(4px * var(--u)); border-bottom-width: calc(4px * var(--u)); border-bottom-left-radius: 4px; }
.hb-se::after { left: 0; top: 0; border-right-width: calc(4px * var(--u)); border-bottom-width: calc(4px * var(--u)); border-bottom-right-radius: 4px; }
.hb-h:hover::after { background-color: #fff2c4; border-color: #fff2c4; }
.hb-busy { user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) { .hb-frame { --hb: 24px; --hc: 34px; --in: 0.12; --cin: 0.3; } }   /* (a finger needs more to grab) */