/* Author: goodjava@qq.com */
.formation-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.unit-target,.unit-intent{position:absolute;transform:translateX(-50%);text-align:center;box-sizing:border-box;font-family:'Songti SC',serif}
.unit-target{pointer-events:auto;display:flex;align-items:stretch;flex-direction:column;gap:2px;border:1px solid #849b80;background:#15291fe8;color:#efe8cd;padding:5px 7px;border-radius:8px;cursor:pointer;font-size:12px;min-height:58px;box-shadow:0 3px 12px #102a1855}
.unit-target.selected{border-color:#e8cc83;box-shadow:0 0 0 2px #d9b96855,0 3px 12px #102a1855}
.unit-target b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-target span{font:12px Georgia,serif;color:#f4eaca}
.unit-target small{font-size:10px;color:#cbd8bb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-target:focus-visible{outline:3px solid #f7d783;outline-offset:3px}
.unit-target.fallen{opacity:.40;cursor:default}
.unit-hp{display:block;height:4px;background:#09160d;border-radius:2px;overflow:hidden}
.unit-hp i{display:block;height:100%;background:#91b675;transition:width .25s}
.unit-intent{font-size:12px;color:#fff0cb;background:#172b21e8;border:1px solid #9da97c88;border-radius:8px;padding:4px 6px;line-height:1.35;pointer-events:none}
.unit-intent.fallen{opacity:0}
.encounter-picks{display:flex;gap:10px;flex-wrap:wrap}.encounter-picks .pick{flex:1;min-width:130px}
.target-aim-hint{width:260px;box-sizing:border-box;padding:5px 8px;border:1px solid #f2c46599;border-radius:12px;background:#16392ddd;color:#ffe5a6;text-align:center;font:12px/1.4 'Songti SC',serif;pointer-events:none}
@media(max-width:699px){.unit-target{padding:4px;min-height:58px}.unit-target b{font-size:11px}.unit-intent{font-size:10px;padding:3px}.unit-target small{font-size:9px}}
.unit-overhead {
  position:absolute; transform:translate(-50%,-100%); box-sizing:border-box;
  height:28px; display:flex; align-items:stretch; border:1px solid #849b80;
  border-radius:6px; background:#192e24f0; color:#efe8cd; pointer-events:auto;
}
.unit-overhead.selected { border-color:#e8cc83; }
.unit-overhead.fallen { opacity:.42; }
.unit-overhead .unit-overhead-select {
  position:static; transform:none; flex:1; min-width:0; min-height:0;
  flex-direction:row; align-items:center; justify-content:space-between; gap:4px;
  padding:0 5px; border:0; border-radius:5px 0 0 5px; background:transparent; box-shadow:none;
}
.unit-overhead-select:disabled { opacity:1; cursor:default; }
.unit-overhead-select b { font-size:12px; }
.unit-overhead-select .unit-attack { flex:none; font:600 11px/1 system-ui,sans-serif; color:#ffd68a; white-space:nowrap; }
.unit-overhead-detail {
  flex:none; padding:0 5px; border:0; border-left:1px solid #a6b69766;
  border-radius:0 5px 5px 0; background:#24392f; color:#f4e2ac;
  font:11px/1 system-ui,sans-serif; cursor:pointer;
}
.unit-overhead-detail:hover { background:#385141; }
.unit-overhead-detail:focus-visible { outline:2px solid #f7d783; outline-offset:2px; }
.unit-overhead > .unit-hp { position:absolute; bottom:0; left:5px; right:5px; height:2px; pointer-events:none; }
.enemy-detail {
  box-sizing:border-box; width:min(430px,calc(100vw - 24px)); max-height:calc(100dvh - 24px);
  padding:16px; overflow:auto; border:1px solid #bfaa70; border-radius:10px;
  background:#f8efd9; color:#25382c; font:14px/1.45 system-ui,sans-serif;
}
.enemy-detail::backdrop { background:#101e18a3; }
.enemy-detail h2,.enemy-detail p { margin:0; }
.enemy-detail h2 { font-size:20px; }
.enemy-detail h3 { font-size:14px; margin:0 0 4px; color:#526743; }
.enemy-detail section { border-top:1px solid #cbb78a; margin-top:10px; padding-top:7px; }
.enemy-detail ul { list-style:none; margin:0; padding:0; }
.enemy-detail li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 8px; padding:3px 0; }
.enemy-detail li small { grid-column:1/-1; }
.enemy-detail small { color:#5b644d; }
.enemy-detail form { display:flex; justify-content:flex-end; margin-top:12px; }
@media (max-width:699px), (max-height:519px) {
  .unit-overhead .unit-overhead-select { padding:0 4px; gap:2px; }
  .unit-overhead-select b,.unit-overhead-select .unit-attack,.unit-overhead-detail { font-size:10px; }
  .unit-overhead-detail { padding:0 4px; }
}