/* The battle panel above the chat bar (src/ui/combat-view.mjs combatPanelHtml):
   everyone in the fight with their health, the foe aimed at, the action buttons. */
.combat-panel{margin:.5rem 0;padding:.7rem .85rem;border:1px solid var(--accent-700);border-radius:10px;background:var(--surface-warm);color:var(--text);font:400 var(--size-ui)/1.4 var(--head)}
.combat-heading{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--accent);margin-bottom:.45rem}
.combat-heading strong{font-weight:600;letter-spacing:.02em}
.combat-roster ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.combat-roster .combat-side{margin-top:4px;padding-top:4px;border-top:1px solid var(--stone-850)}
.combat-fighter{display:grid;grid-template-columns:1.1em minmax(0,1fr) minmax(56px,32%) 4.8em;align-items:center;gap:.65rem;padding:.3rem .55rem;border-radius:6px;font:inherit;letter-spacing:normal}
button.combat-fighter{width:100%;min-height:36px;border:1px solid transparent;background:none;color:var(--text);text-align:left}
button.combat-fighter:hover:not(:disabled){border-color:var(--stone-700)}
button.combat-fighter.picked{border-color:var(--accent-700);background:var(--surface-raised);box-shadow:inset 3px 0 var(--accent)}
button.combat-fighter.picked .combat-name{color:var(--accent)}
.combat-fighter.out{opacity:.5}
.combat-side .combat-fighter{color:var(--text-soft)}
.combat-fighter.you .combat-name{color:var(--text)}
.combat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combat-name small{margin-left:.35em;color:var(--text-dim);font-size:.82em}
.combat-bar{display:block;height:6px;border-radius:3px;background:var(--stone-850);overflow:hidden}
.combat-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--health-from),var(--health-to))}
.combat-bar.low i{background:var(--danger)}
.combat-hp{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:.9em}
.combat-fighter.out .combat-hp{grid-column:3/-1}
.combat-place{color:var(--muted);font-size:.82em;text-align:center;font-variant-numeric:tabular-nums}
.combat-fighter.you .combat-place,button.combat-fighter.picked .combat-place{color:var(--accent)}
.combat-roster .combat-foes{max-height:12.5rem;overflow:auto}
.combat-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;margin-top:.55rem}
.combat-controls button{min-height:42px;padding:.4rem .3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combat-controls button[data-combat-action="begin"]{grid-column:1/-1}
.combat-controls button[aria-expanded="true"]{border-color:var(--accent);background:var(--surface-raised);color:var(--accent)}
.combat-menu{margin-top:.45rem;max-height:13.5rem;overflow:auto;border:1px solid var(--stone-850);border-radius:8px;background:var(--surface-low)}
.combat-menu ul{list-style:none;margin:0;padding:4px;display:grid;gap:2px}
.combat-menu button{width:100%;min-height:40px;display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.45rem .6rem;border:0;border-radius:6px;background:none;color:var(--text);text-align:left;letter-spacing:normal}
.combat-menu button:hover:not(:disabled),.combat-menu button:focus-visible{background:var(--surface-raised)}
.combat-menu button:disabled{color:var(--muted);cursor:default}
.combat-menu small{color:var(--text-dim);white-space:nowrap;font-size:var(--size-small)}
.combat-menu-empty{margin:0;padding:.6rem;color:var(--muted)}
.combat-menu-pools{margin:0;padding:.45rem .65rem 0;color:var(--text-dim);font-size:var(--size-small)}
.combat-panel .combat-hint{margin:.5rem 0 0;color:var(--muted);font-size:var(--size-small)}
@media(max-width:520px){.combat-panel{padding:.55rem .6rem}.combat-heading{margin-bottom:.3rem}.combat-fighter{grid-template-columns:1em minmax(0,1fr) 24% 4.4em;gap:.45rem;padding:.2rem .4rem;font-size:var(--size-small)}button.combat-fighter{min-height:32px}.combat-roster .combat-foes{max-height:10rem}.combat-controls{gap:.3rem}.combat-controls button{padding:.35rem .15rem;font-size:var(--size-small)}}

/* A fight's round in the story (src/ui/combat-view.mjs combatSequenceHtml),
   on the check card (styles/check-card.css): its own head, then each action. */
.combat-result .combat-round{color:var(--accent);font-weight:600;font-size:var(--size-small);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.combat-result .check-strikes li{padding:1px 0}
.combat-result .check-strikes li::first-letter{text-transform:uppercase}
.combat-result .combat-round+.check-strikes{margin-top:2px;padding-top:0;border-top:0}
.combat-result .check-strikes .hurt{color:var(--warn)}
.combat-result .combat-note{margin:6px 0 0;color:var(--text-dim);font-size:var(--size-small)}