/* Element identity and combat resources; the arena camera and artwork stay shared. */
.element-badge{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px;font-weight:650;line-height:1.3;color:inherit}
.element-badge>.game-logo{width:20px;height:20px;padding:2px;border-radius:50%;background:color-mix(in srgb,var(--element-color) 23%,transparent);color:var(--element-color);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--element-color) 65%,transparent)}
.discipline-marks{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.discipline-marks .game-logo{width:21px;height:21px;color:inherit}
.card-face-top>.discipline-marks{color:inherit}
.card-type .element-badge{font-size:inherit;text-transform:none;letter-spacing:0}
.card-type .element-badge>.game-logo{width:16px;height:16px}
.card-affinity{margin-top:22px;padding:15px 0;border-top:1px solid #a18d6666;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.card-affinity>.element-badge{font-size:14px}
.card-affinity>.element-badge>.game-logo{width:25px;height:25px}
.card-affinity p{flex-basis:100%;font:12px/1.6 'Segoe UI',sans-serif;color:var(--muted);margin:0}
.ability-meta .element-badge{font:inherit;letter-spacing:0;text-transform:none}
.ability-meta .element-badge>.game-logo{width:16px;height:16px}
.hud-heading{gap:5px;flex-wrap:nowrap}
.hud-name{display:flex;align-items:center;gap:7px;min-width:0}
.hud-name>strong{white-space:nowrap}
.hud .discipline-marks{gap:3px}
.hud .discipline-marks .game-logo{width:clamp(14px,2.7cqw,28px);height:clamp(14px,2.7cqw,28px);font-size:clamp(14px,1.7cqw,20px)}
.hud-heading>.element-badge>.game-logo{width:clamp(13px,1.9cqw,22px);height:clamp(13px,1.9cqw,22px)}
.hud-mana{display:flex;align-items:center;gap:6px;margin-top:5px;color:#4b64ab;font-size:clamp(7px,1.1cqw,10px);line-height:1}
.hud-mana .mana-label{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.hud-mana .game-logo{width:clamp(9px,1.2cqw,13px);height:clamp(9px,1.2cqw,13px)}
.hud .hud-mana progress{flex:1;width:0;min-width:0;margin:0;height:clamp(4px,.65cqw,7px);accent-color:#667fde;border:0;background:#cad3e6;border-radius:10px;overflow:hidden}
.hud .hud-mana progress::-webkit-progress-bar{background:#cad3e6;border-radius:10px}
.hud .hud-mana progress::-webkit-progress-value{background:linear-gradient(90deg,#5478bd,#98a7ef);border-radius:10px}
.hud .hud-mana progress::-moz-progress-bar{background:#667fde;border-radius:10px}
.hud-mana>b{font:inherit;font-weight:700;white-space:nowrap}
.hud-effects:empty{display:none}
.hud-effects .aura-status{display:inline-flex;align-items:center;gap:3px;font-size:clamp(6px,.95cqw,10px);margin-top:5px;color:#485364;white-space:nowrap}
.aura-status .element-badge{font:inherit}
.aura-status .element-badge>.game-logo{width:clamp(10px,1.4cqw,16px);height:clamp(10px,1.4cqw,16px)}
.support-status{font:italic 13px/1.5 Georgia;color:#42666c;border-top:1px solid #749c8e80;padding-top:9px;display:block}
.battle-console.resolving .support-status{opacity:.75}
.command-tabs{flex-wrap:wrap}
html[data-art=color] .command-tabs{gap:4px}
html[data-art=color] .command-tabs button{padding-left:8px;padding-right:8px}
.assist-help{grid-column:1/-1;font-size:12px;color:var(--muted);padding:4px 0 10px;line-height:1.6}
.reserve-choice>.portrait{grid-row:1/6}
.reserve-choice>.element-badge{font-size:10px}
.reserve-choice .assist-combo{font-size:11px;line-height:1.45;color:#4e647a}
.assist-choice>small{font-weight:700;margin-top:3px}
.battle-ability .reaction-preview{border-top:1px solid #a08c6155;padding-top:6px}
html[data-art=color] .battle-ability>.reaction-preview{font-size:10px;color:#3d5e72}
.element-guide{margin-top:25px;border-top:1px solid #9da6a64d;padding-top:13px;font-size:13px}
.element-guide>summary{cursor:pointer;color:var(--muted)}
.element-guide-content{font-size:12px;line-height:1.7;margin-top:15px}
.element-guide-content>p{margin:12px 0}
.element-cycle{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:15px 0}
.cycle-arrow{opacity:.65}
.reaction-rules{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:15px 0}
.reaction-rule{padding:14px;border:1px solid #899e9e55;border-radius:3px 12px 3px 3px;background:#ffffff08}
.reaction-pair{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.reaction-rule>strong{font:19px Georgia;display:block;margin-bottom:4px}
.reaction-rule>p{font-size:12px}
.support-actor{z-index:2;pointer-events:none;filter:drop-shadow(0 0 6px #eff8ff55)}
.support-actor>.portrait{height:100%}
.support-actor>.actor-name{font-size:clamp(7px,1cqw,10px)!important}
.element-impact{position:absolute;top:15%;left:50%;display:flex;align-items:center;flex-direction:column;gap:5px;background:#102c45e8;color:#fff7e2;border:1px solid #d3c098;border-radius:3px 12px;padding:7px 12px;white-space:nowrap;z-index:6;box-shadow:0 4px 12px #10223350}
.element-impact>.element-badge{font-size:clamp(10px,1.5cqw,17px)}
.element-impact>b{font:clamp(11px,1.7cqw,20px) Georgia}
@media(max-width:950px){.support-status{grid-row:3;grid-column:1/-1;padding-top:6px;font-size:12px}.hud-name{gap:4px}}
@media(max-width:680px){html[data-art=color] .command-tabs{gap:2px}html[data-art=color] .command-tabs button{font-size:10px;padding:8px 5px}.command-tabs .game-logo{width:12px;height:12px}.command-tabs #pass{margin-left:0}.reaction-rules{grid-template-columns:1fr}.element-cycle{gap:5px}.element-cycle .element-badge{font-size:10px}.element-cycle .element-badge>.game-logo{width:16px;height:16px}.reserve-choice>.portrait{grid-row:auto}.reserve-choice>.element-badge{justify-content:center}.assist-help{font-size:11px}.reserve-choice .assist-combo{font-size:10px}.hud-mana{gap:3px;margin-top:4px}.hud-name{gap:3px}.hud .discipline-marks{gap:2px}.element-impact{padding:4px 7px;left:30%}.card-type .element-badge>.game-logo{width:12px;height:12px}}
/* Compact HUDs use their free corners, without moving the arena or either fighter. */
@media(max-width:600px){
  html[data-art=color] .stage .hud{width:44%;padding:6px 7px}
  html[data-art=color] .stage .hud .hud-name>strong{font-size:13px;line-height:1.3}
  html[data-art=color] .stage .hud .discipline-marks .game-logo{width:15px;height:15px;font-size:14px}
  html[data-art=color] .stage .hud-heading>.element-badge>.game-logo{width:15px;height:15px}
  html[data-art=color] .stage .hud-info{font-size:9px;line-height:1.4}
  html[data-art=color] .stage .hud .hud-mana{font-size:9px}
  html[data-art=color] .stage .hud .hud-mana progress{height:5px}
  html[data-art=color] .stage .hud-effects{gap:2px}
  html[data-art=color] .stage .hud-effects small{display:inline-block;font-size:9px;letter-spacing:0;line-height:1.2;margin-top:4px}
  html[data-art=color] .stage .hud-effects .aura-status{font-size:9px;line-height:1.2;margin-top:4px}
  html[data-art=color] .stage .aura-status .element-badge>.game-logo{width:12px;height:12px}
}