/* Target frame: the locked monster (public/js/game/hud/target-frame.js). Only
   the clear button takes input; the rest lets taps and clicks through to the
   world behind it. Where it sits is written by the script into
   --target-frame-left/--target-frame-top; the placement rules themselves live
   in hud-layout.css (desktop) and mobile-gameplay.css (touch). */
#targetFrame[hidden] { display:none !important; }
#targetFrame {
  position:absolute; z-index:24;
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px;
  box-sizing:border-box; padding:7px 9px 8px;
  border:1px solid #b4636399; border-left:3px solid #ff5a4e;
  border-radius:9px; background:linear-gradient(145deg, #1b1420f2, #0e1421f2);
  box-shadow:0 5px 18px #0008;
  color:#f2e7dc; font:12px/1.3 system-ui, sans-serif;
  pointer-events:none; user-select:none; -webkit-user-select:none;
}
/* No room on screen this frame: the ring under the monster still marks the lock. */
#targetFrame[data-placement="none"] { visibility:hidden; }
#targetFrame[data-rank="floor"] { border-left-color:#ffc35d; }
#targetFrame[data-rank="mini"] { border-left-color:#cf95ff; }

.targetFrameBody { min-width:0; }
.targetFrameTop { display:flex; align-items:baseline; gap:6px; min-width:0; }
.targetFrameName {
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:700 13px/1.25 system-ui, sans-serif; color:#fff1e0;
}
.targetFrameLevel {
  flex:0 0 auto; padding:2px 5px; border-radius:4px; background:#2a2434;
  color:#ecd9b4; font:700 10px/1.1 system-ui, sans-serif; font-variant-numeric:tabular-nums;
}
.targetFrameLevel[hidden] { display:none; }
.targetFrameBar {
  position:relative; height:8px; margin-top:5px; overflow:hidden;
  border-radius:4px; background:#221b28; box-shadow:inset 0 0 0 1px #0009;
}
.targetFrameFill {
  display:block; width:100%; height:100%; transform-origin:left center;
  transform:scaleX(var(--target-frame-hp, 1));
  background:linear-gradient(90deg, #43c96a, #79e69a); transition:transform .15s linear;
}
#targetFrame[data-tone="mid"] .targetFrameFill { background:linear-gradient(90deg, #e3aa3f, #f5cf67); }
#targetFrame[data-tone="low"] .targetFrameFill { background:linear-gradient(90deg, #e94758, #ff7280); }
#targetFrame[data-rank="floor"] .targetFrameFill { background:linear-gradient(90deg, #8e2537, #e35a3e 52%, #ffb156); }
#targetFrame[data-rank="mini"] .targetFrameFill { background:linear-gradient(90deg, #5b2a78, #9b4cc4 52%, #dda1ff); }
.targetFrameMeta {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:4px; min-width:0; font:600 10px/1.2 system-ui, sans-serif; color:#c3bdcd;
}
.targetFrameTag {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--target-frame-tag, #ccc5d8); letter-spacing:.02em;
}
.targetFrameHp { flex:0 0 auto; font-variant-numeric:tabular-nums; color:#d7d0e0; }
.targetFrameClear {
  display:grid; place-items:center; width:26px; height:26px; min-width:26px; min-height:26px;
  padding:0; box-sizing:border-box; border:1px solid #9aa7bd4d; border-radius:7px;
  background:#1b2534; color:#dfe4ec; font:700 12px/1 system-ui, sans-serif; cursor:pointer;
  pointer-events:auto; touch-action:manipulation;
}
.targetFrameClear[hidden] { display:none; }
.targetFrameClear:hover { border-color:#cfb780; background:#2b3648; }
.targetFrameClear:focus-visible { outline:2px solid #f1d79b; outline-offset:2px; }
/* Thumbs get the full 44px target, and the three lines beside it are sized to
   fit next to it without making the frame any taller. */
body.touchDevice #targetFrame .targetFrameClear { width:44px; height:44px; min-width:44px; min-height:44px; border-radius:9px; font-size:15px; }
body.touchDevice #targetFrame .targetFrameName { font-size:12px; }
body.touchDevice #targetFrame .targetFrameBar { height:7px; margin-top:4px; }
body.touchDevice #targetFrame .targetFrameMeta { margin-top:3px; font-size:9.5px; }
@media (prefers-reduced-motion:reduce) { .targetFrameFill { transition:none; } }