/* Readable combat outcomes use existing illustrations; no generated icons. */
.hud-info{align-items:center;gap:5px}
.hud-info>.team-portraits{display:inline-flex;gap:4px;letter-spacing:0;flex-shrink:0}
.team-portrait{position:relative;display:inline-block;width:clamp(20px,3cqw,36px);height:clamp(25px,3.6cqw,43px);background:linear-gradient(150deg,#385b6c,#162d42);border:1px solid #91aeb6;border-radius:5px 5px 2px 2px;overflow:hidden;vertical-align:middle;box-sizing:border-box}
.team-portrait>img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;transform:scale(2.8);transform-origin:55% 9%}
.team-portrait.is-active{border:2px solid #bd8a2e;box-shadow:0 0 0 1px #ffe7a9}
.team-state{position:absolute;bottom:0;inset-inline:0;background:#f1cf86;color:#263848;text-align:center;font:700 7px/1.35 'Segoe UI',sans-serif;letter-spacing:0}
.team-portrait.is-ko>img{filter:grayscale(1);opacity:.35}
.team-portrait.is-ko{background:#3f3940;border-color:#7c6670}
.team-portrait.is-ko .team-state{background:#643c48;color:#fff2ef;font-size:8px}
.team-portrait:focus-visible{outline:2px solid #3a72b9;outline-offset:2px}
/* One quiet strip replaces the explanatory panels. Details are opt-in. */
.combat-feedback{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#b7b39e;border:1px solid #b7b39e;border-top:0}
.impact-recap{display:flex;align-items:center;gap:9px;min-height:46px;padding:6px 12px;border:0;border-radius:0;background:#edf3ec;color:#243e4a;box-shadow:inset 3px 0 #398780;text-align:left;cursor:help;font:12px 'Segoe UI',sans-serif}
.impact-recap:only-child{grid-column:1/-1}
.impact-recap[data-side="1"]{background:#f4ece4;box-shadow:inset 3px 0 #a06558}
.impact-recap:hover,.impact-recap[aria-expanded="true"]{background:#fffbef;color:#233c50;transform:none}
.impact-identity{display:flex;align-items:center;gap:7px;flex-shrink:0}
.impact-identity>small{font-size:10px;letter-spacing:0;min-width:35px;color:#547276}
.impact-recap[data-side="1"] .impact-identity>small{color:#8c6255}
.impact-identity>img{width:23px;height:30px;object-fit:cover;object-position:50% 10%;background:#9bada64a;border-radius:3px}
.impact-amount{font:700 22px/1 Georgia;color:#344857;white-space:nowrap}
.compact-symbols{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap}
.effect-symbols{display:inline-flex;gap:3px;align-items:center;font:11px/1.2 'Segoe UI',sans-serif;white-space:nowrap;padding:3px 5px;border-radius:4px;color:#3b5660;background:#cadce366}
.effect-symbols.advantage{background:#e9c77540;color:#70531d}
.effect-symbols.vapor{background:#e7b5a645;color:#805148}
.effect-symbols.erosion{background:#bdcc9d55;color:#4b6441}
.effect-symbols .element-badge>.game-logo{width:18px;height:18px;font-size:12px}
.info-mark{font:14px/1 'Segoe UI',sans-serif;opacity:.6;margin-left:auto;flex-shrink:0}
.impact-flash{position:absolute;z-index:9;max-width:42%;pointer-events:none;filter:drop-shadow(0 2px 4px #14263e55)}
.impact-flash[data-side="1"]{right:9%;top:43%}
.impact-flash[data-side="0"]{left:9%;top:70%}
.impact-flash .compact-symbols{justify-content:center;gap:3px}
.impact-flash .effect-symbols{background:#fbf4e7ed;border:1px solid #d2bd88;font-size:15px;padding:5px 8px}
.impact-flash .element-badge>.game-logo{width:22px;height:22px}
.stage .actor>.combat-damage{position:absolute;top:34%;left:45%;bottom:auto;width:auto;margin:0;padding:0;color:#fff2bd;font:700 clamp(24px,4cqw,50px)/1 Georgia;text-shadow:2px 2px #732e3a,-1px -1px #732e3a;z-index:9;white-space:nowrap}
.combat-tip{position:fixed;z-index:1000;width:310px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;box-sizing:border-box;padding:15px 18px;border:1px solid #c3a971;border-radius:4px 13px 4px 4px;background:#17364bf5;color:#f7f0dd;box-shadow:0 8px 25px #081b3e40;pointer-events:auto;font:12px/1.55 'Segoe UI',sans-serif}
.combat-tip>strong{font:18px/1.25 Georgia;color:#f0d99b}
.combat-tip>p{margin:8px 0 0;white-space:pre-line}
.hud .hud-detail,.hud .status-chip,.hud .aura-status{appearance:none;border:0;box-shadow:none;background:transparent;border-radius:4px;padding:2px 3px;color:#405667;cursor:help;min-height:25px;transform:none}
.hud .hud-detail{display:inline-flex;align-items:center;justify-content:center;min-width:25px}
.hud .hud-detail .element-badge>.game-logo{width:clamp(15px,1.9cqw,22px);height:clamp(15px,1.9cqw,22px)}
.hud .status-chip{font:10px/1.3 'Segoe UI',sans-serif;background:#d2c9dd50}
.hud .hud-effects .aura-status{margin-top:0;gap:3px;border:1px dashed #8ea9b880;padding:1px 4px}
.hud .aura-status>small{font:10px/1.2 'Segoe UI',sans-serif;margin:0!important;color:inherit}
.hud .hud-detail:hover,.hud .status-chip:hover,.hud .aura-status:hover{background:#d3e2db80;color:#253e52}
.battle-ability-choice,.assist-card{display:flex;flex-direction:column;min-width:0}
.battle-ability-choice>.battle-ability,html[data-art=color] .battle-ability-choice>.battle-ability{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px 10px;min-height:105px;height:auto;padding:12px;text-align:left;width:100%;border-bottom-left-radius:0;border-bottom-right-radius:0}
.battle-ability-choice>.battle-ability>.ability-emblem,html[data-art=color] .battle-ability-choice>.battle-ability>.ability-emblem{grid-column:1;grid-row:1/4;width:34px;height:44px;align-self:center}
.battle-ability-choice>.battle-ability>.ability-meta,html[data-art=color] .battle-ability-choice>.battle-ability>.ability-meta{display:flex;align-items:center;gap:5px;grid-column:2;grid-row:1;font:10px/1.3 'Segoe UI',sans-serif;letter-spacing:0;text-transform:none}
.battle-ability-choice>.battle-ability>.ability-meta .element-badge>.game-logo{width:15px;height:15px}
.battle-ability-choice>.battle-ability>strong,html[data-art=color] .battle-ability-choice>.battle-ability>strong{grid-column:2;grid-row:2;font:20px/1.15 Georgia}
.battle-ability-choice>.battle-ability>b,html[data-art=color] .battle-ability-choice>.battle-ability>b{grid-column:2;grid-row:3;border:0;padding:0;font:10px/1.3 'Segoe UI',sans-serif}
.battle-ability-choice>.battle-ability:after{display:none}
.ability-info{display:flex;align-items:center;gap:5px;min-height:32px;width:100%;padding:5px 10px;margin:0;border:1px solid #bfa97e;border-top:0;border-radius:0 0 5px 5px;background:#e8dfc9;color:#365265;font:11px 'Segoe UI',sans-serif;cursor:help;box-shadow:none}
.ability-info:hover,.ability-info[aria-expanded="true"]{background:#f5edda;color:#253e52;transform:none}
.ability-info .compact-symbols{gap:3px}
.ability-info .effect-symbols{padding:0 3px;font-size:10px}
.ability-info .effect-symbols .game-logo{width:16px;height:16px}
.ability-info .info-mark{margin-left:auto}
.assist-card>.reserve-choice{flex:1;width:100%;border-bottom-left-radius:0;border-bottom-right-radius:0}
.assist-help{grid-column:1/-1;justify-self:start;width:auto;min-height:32px;margin:0;padding:4px 8px;border:0;background:transparent;color:var(--muted);font:12px 'Segoe UI',sans-serif;cursor:help}
.assist-help:hover{color:var(--ink);background:#fff6;transform:none}
html[data-art=color] .battle-console.resolving .narration{min-height:220px}
html[data-art=color] .battle-console.resolving #narration{font-size:clamp(22px,3vw,34px)}
.sound-toggle{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;min-height:36px;min-width:62px;background:#173b50;color:#ede7d3;border:1px solid #9cafab80;border-radius:5px;white-space:nowrap;font:11px 'Segoe UI',sans-serif}
.sound-toggle>span:first-child{font-size:19px}
.sound-toggle[aria-pressed="false"]{opacity:.65}
.sound-toggle:hover{background:#244e60;color:#fff;transform:none}
.ability-info:focus-visible,.impact-recap:focus-visible,.hud button:focus-visible,.sound-toggle:focus-visible{outline:2px solid #cf9b47;outline-offset:2px}
@media(max-width:680px){
  .combat-feedback{grid-template-columns:1fr}
  .impact-recap{min-height:43px;padding:5px 9px;gap:6px}
  .impact-amount{font-size:20px}
  .impact-identity{gap:4px}
  .impact-identity>img{width:20px;height:27px}
  .effect-symbols{font-size:10px;padding:3px 4px;gap:2px}
  .effect-symbols .element-badge>.game-logo{width:16px;height:16px}
  .impact-recap .info-mark{font-size:12px}
  .battle-ability-choice>.battle-ability,html[data-art=color] .battle-ability-choice>.battle-ability{grid-template-columns:29px minmax(0,1fr);min-height:113px;padding:10px 8px;gap:4px 7px}
  .battle-ability-choice>.battle-ability>.ability-emblem,html[data-art=color] .battle-ability-choice>.battle-ability>.ability-emblem{width:27px;height:35px}
  .battle-ability-choice>.battle-ability>strong,html[data-art=color] .battle-ability-choice>.battle-ability>strong{font-size:17px}
  .ability-info{min-height:40px;padding:4px 6px}
  .ability-info .compact-symbols{gap:4px}
  .impact-flash{max-width:47%}
  .impact-flash[data-side="1"]{right:4%;top:36%}
  .impact-flash[data-side="0"]{left:4%;top:62%}
  .impact-flash .effect-symbols{font-size:10px;padding:3px 4px}
  .impact-flash .element-badge>.game-logo{width:15px;height:15px}
  .sound-toggle{padding:4px 7px;min-width:55px;min-height:34px}
}
@media(max-width:600px){
  .hud-info>.team-portraits{gap:3px}
  .team-portrait{width:19px;height:25px}
  .team-state{font-size:6px}
  .team-portrait.is-ko .team-state{font-size:7px}
  html[data-art=color] .stage .hud .hud-detail{min-width:24px;padding:0 3px}
  html[data-art=color] .stage .hud .hud-effects .aura-status{font-size:9px;margin-top:1px}
  html[data-art=color] .stage .hud .aura-status>small{font-size:9px}
  .hud .status-chip{font-size:9px}
}