.monster-inspector { position:absolute; z-index:6; left:22px; top:98px; width:230px; max-height:calc(100% - 110px); overflow-y:auto; padding:15px; color:#dee5d8; background:linear-gradient(150deg,#29342ef5,#19231ff5); border:1px solid #a7bd8d48; border-radius:10px; box-shadow:0 12px 32px #0004; }
.monster-inspector[hidden] { display:none; }
.inspector-close { position:absolute; right:7px; top:7px; border:0; background:none; color:#a7b3a5; font-size:21px; cursor:pointer; }
.inspector-title { display:flex; align-items:center; gap:8px; padding-right:12px; }
.inspector-title img { width:53px; height:57px; object-fit:contain; }
.inspector-title h2 { margin:0 0 4px; font-size:17px; font-weight:600; }
.inspector-stars { color:#ebcd82; font-size:12px; letter-spacing:2px; }
.inspector-side { margin:7px 0 11px; color:#a6b3a5; font-size:10px; }
.inspector-health { height:4px; background:#111b16; border-radius:3px; overflow:hidden; }
.inspector-health span { display:block; height:100%; background:#9cb878; transition:width .2s; }
.inspector-hp { display:block; text-align:right; font-size:10px; color:#bac9ac; margin:5px 0 12px; font-variant-numeric:tabular-nums; }
.inspector-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:0 0 14px; }
.inspector-stats div { border:1px solid #91a68626; border-radius:5px; padding:8px 4px; text-align:center; background:#ffffff03; }
.inspector-stats dt { font-size:9px; letter-spacing:1px; color:#aab8a0; margin-bottom:5px; text-transform:uppercase; }
.inspector-stats dd { font-size:16px; font-variant-numeric:tabular-nums; margin:0; color:#e9e8cf; }
.inspector-attack { font-size:12px; color:#ead6a4; }
.inspector-pa-help { display:block; margin:5px 0 8px; font-size:10px; color:#a5b6be; }
.inspector-damage { font-size:10px; color:#b1bfac; margin:5px 0 12px; }
.inspector-behavior { display:inline-block; padding:4px 7px; border:1px solid #a1bc8b55; border-radius:4px; color:#b9d69d; font-size:10px; }
[data-behavior=kiting] .inspector-behavior { color:#d9d09e; border-color:#c5b47b55; }
.inspector-help { font-size:11px; line-height:1.55; margin:7px 0 10px; color:#b4c0b0; }
.inspector-range-help { display:block; font-size:9px; line-height:1.5; color:#b8a67d; }
#map .cell.movement-range { fill:#69a75c55; stroke:#b5dca0; stroke-opacity:.8; stroke-width:1.2; }
#map .cell.inspected-origin { stroke:#fff0b4; stroke-width:2.8; }
#map .opponent-unit, #combat-layer .combat-unit { pointer-events:auto; cursor:pointer; }
.combat-hit-area { fill:transparent; }
#combat-layer .combat-unit.defeated { pointer-events:none; }
.combat-unit:focus-visible { outline:none; }
.unit:focus-visible .unit-visual, .combat-unit:focus-visible .combat-visual { filter:drop-shadow(0 0 3px #fff0b4); }
@media (max-height:800px) {
 .monster-inspector { padding:8px 13px; }
 .inspector-title img { width:36px; height:36px; }
 .inspector-title h2 { font-size:15px; margin-bottom:2px; }
 .inspector-side { margin:5px 0 7px; }
 .inspector-hp { margin:4px 0 7px; }
 .inspector-stats { margin-bottom:8px; }
 .inspector-stats div { padding:5px 3px; }
 .inspector-stats dt { margin-bottom:3px; }
 .inspector-stats dd { font-size:14px; }
 .inspector-damage { margin:4px 0 7px; }
 .inspector-help { display:none; }
 .inspector-range-help { margin-top:6px; }
}
@media (max-width:900px) { .monster-inspector { left:12px; top:92px; width:195px; padding:11px; } .inspector-help { font-size:10px; } }
@media (max-width:600px) { .monster-inspector { top:64px; width:170px; } .inspector-title img { width:35px; height:40px; } .inspector-title h2 { font-size:14px; } .inspector-stats dd { font-size:13px; } .inspector-help { display:none; } }