/* Round 47: readable, viewport-scaled battle HUD. Sizes are in em so the
   whole encounter scales with --hud-size, which follows the window. */
#battleModal.hud-v2 .battle-compact{font-size:clamp(14px,1.35vw,19px);--hud-size:1em}
#battleModal.hud-v2 .compact-bar{gap:.5em;margin-bottom:.5em}
#battleModal.hud-v2 .compact-bar .badge{font-size:.82em;padding:.35em .7em}
#battleModal.hud-v2 .compact-bar button{font-size:.8em;padding:.4em .8em}
#battleModal.hud-v2 .compact-combatants{gap:.6em}
#battleModal.hud-v2 .compact-side{padding:.55em .7em;gap:.35em;border-radius:10px}
#battleModal.hud-v2 .compact-head b{font-size:1em;letter-spacing:.02em}
#battleModal.hud-v2 .compact-monster{width:3.4em;height:3.4em}
#battleModal.hud-v2 .enemy-level{font-size:.85em}

/* Energy */
.energy-hud{display:inline-flex;align-items:center;gap:.45em;padding:.25em .7em .25em .4em;border:1px solid #f2c94c;border-radius:999px;background:linear-gradient(180deg,#3a2c0b,#1c1606);box-shadow:0 0 12px #f2c94c44,inset 0 0 0 1px #fff2}
.energy-hud .bolt svg{width:1.35em;height:1.35em;display:block;fill:#ffd84a;filter:drop-shadow(0 0 4px #ffcf33)}
.energy-hud .orbs{display:inline-flex;gap:.28em}
.energy-hud .orb{width:.95em;height:.95em;border-radius:50%;display:block}
.energy-hud .orb.on{background:radial-gradient(circle at 35% 30%,#fffbe0 0,#ffe066 30%,#f0a400 70%,#9a5a00 100%);box-shadow:0 0 8px #ffcf33}
.energy-hud .orb.on.bonus{background:radial-gradient(circle at 35% 30%,#fff 0,#b8f4ff 30%,#38c7f0 70%,#0a6d93 100%);box-shadow:0 0 8px #5fd8ff}
.energy-hud .orb.off{background:#120d03;box-shadow:inset 0 0 0 2px #6b5313}
.energy-hud .num{font:800 1.15em/1 system-ui;color:#fff5cc;text-shadow:0 0 6px #ffb800}
.energy-hud .num small{font-size:.65em;color:#d9c27a;font-weight:700}

/* Health */
.hp-row{display:flex;align-items:center;gap:.4em;min-width:0}
.hp-row .hud-meter{flex:1;min-width:0}
.hp-icon svg{width:1.55em;height:1.55em;display:block}
.hp-row.you .hp-icon svg path:first-child{fill:#ff4d6d}
.hp-row.you .hp-icon svg{filter:drop-shadow(0 0 4px #ff4d6d99)}
.hp-row.you .hp-icon .shine{stroke:#ffd0da}
.hp-row.enemy .hp-icon svg path{fill:#c9655e}
.hp-row.enemy .hp-icon .eye{fill:#ffe08a}
.hp-row.enemy .hp-icon svg{filter:drop-shadow(0 0 4px #ff6b4a88)}
#battleModal .compact-combatants .meter.hud-meter{height:1.55em;margin:0;border-radius:999px;background:#1a0f14;box-shadow:inset 0 2px 4px #000c,0 0 0 1px #ffffff26}
#battleModal .compact-combatants .meter.hud-meter span{position:relative;border-radius:999px;transition:width .35s ease}
#battleModal .compact-combatants .meter.hud-meter span::after{content:"";position:absolute;left:4px;right:4px;top:2px;height:35%;border-radius:999px;background:linear-gradient(#ffffff70,#fff0)}
#battleModal .meter.you.hud-meter.high span{background:linear-gradient(90deg,#1f9d55,#5ee07a)}
#battleModal .meter.you.hud-meter.mid span{background:linear-gradient(90deg,#c48a12,#f4d03f)}
#battleModal .meter.you.hud-meter.low span{background:linear-gradient(90deg,#a3122a,#ff4d6d);animation:hudPulse 1s ease-in-out infinite}
#battleModal .meter.enemy.hud-meter span{background:linear-gradient(90deg,#8e1f2a,#e2574c)}
#battleModal .compact-combatants .meter.hud-meter .meter-label{font:800 .92em/1 system-ui;letter-spacing:.03em;color:#fff;text-shadow:0 1px 0 #000,0 0 4px #000}
@keyframes hudPulse{50%{filter:brightness(1.35)}}

/* Armor and Block */
#battleModal .compact-tags{gap:.5em;align-items:center}
#battleModal .compact-tags .hud-stat{display:inline-flex;align-items:center;gap:.3em;background:none!important;padding:0!important;font-size:1em!important}
.hud-cap{font:700 .7em/1 system-ui;letter-spacing:.06em;text-transform:uppercase;color:#c9d6e2}
.hud-shield{display:inline-block;filter:drop-shadow(0 1px 3px #000c)}
.hud-shield .rim{display:grid;place-items:center;width:1.9em;height:2.15em;clip-path:polygon(50% 0,100% 14%,93% 60%,50% 100%,7% 60%,0 14%);background:linear-gradient(160deg,#ffe7a3,#b0852f 60%,#6b4c12)}
.hud-shield .face{display:grid;place-items:center;width:1.62em;height:1.86em;clip-path:polygon(50% 0,100% 14%,93% 60%,50% 100%,7% 60%,0 14%);background:linear-gradient(160deg,#eef4fb,#93a9c2 45%,#3d526b)}
.hud-shield b{font:900 .9em/1 system-ui;color:#0b1622;margin-top:-.15em}
.hud-crystal{display:inline-block;filter:drop-shadow(0 0 5px #5fe3ff)}
.hud-crystal .gem{display:grid;place-items:center;width:2em;height:2.1em;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(150deg,#e9fdff 0,#7ae8ff 30%,#1aa3cf 65%,#0b4f78)}
.hud-crystal b{font:900 .9em/1 system-ui;color:#04263a;text-shadow:0 1px 0 #ffffff80}
.compact-side.enemy .hud-stat.block .hud-crystal{filter:drop-shadow(0 0 5px #ff9b7a)}
.compact-side.enemy .hud-stat.block .gem{background:linear-gradient(150deg,#fff1e9 0,#ffb08f 30%,#d9573a 65%,#7a2014)}

/* Text elsewhere in the encounter scales too. */
#battleModal.hud-v2 .intent-bubble{font-size:.95em}
#battleModal.hud-v2 .intent-bubble .when{font-size:.9em}
#battleModal.hud-v2 .intent-bubble .what{font-size:1.12em}
#battleModal.hud-v2 .compact-tags .debuff-tag,#battleModal.hud-v2 .compact-tags .buff-tag,#battleModal.hud-v2 .compact-tags .ward-tag{font-size:.75em;padding:.2em .5em}
#battleModal.hud-v2 .aether-row b{font-size:clamp(13px,1.2vw,17px)}
#battleModal.hud-v2 .aether-pips i{width:clamp(11px,1vw,15px);height:clamp(11px,1vw,15px)}
#battleModal.hud-v2 #combatLog{font-size:clamp(12px,1.05vw,15px)}
#battleModal.hud-v2 .hand-title h2{font-size:clamp(18px,1.8vw,26px)}

/* Phones: the two combatants stack so bars and numbers stay large. */
@media (max-width:560px){
  #battleModal.hud-v2 .battle-compact{font-size:15px}
  #battleModal.hud-v2 .compact-combatants{grid-template-columns:1fr}
  #battleModal.hud-v2 .compact-head b{white-space:normal}
}

/* Round 57, resized in Round 64: Weaken is a compact burgundy button. */
#battleModal .weaken-hud{display:inline-flex;align-items:center;gap:.3em;margin-top:.2em;padding:.25em .6em .25em .3em;border:1px solid #c0485f;border-radius:8px;background:radial-gradient(120% 140% at 0% 0%,#c0485f44,transparent 55%),linear-gradient(135deg,#5c1324,#3a0b17 60%,#22060d);color:#ffe3e8;font:inherit;font-size:.6em;cursor:pointer;box-shadow:0 0 0 1px #c0485f33,0 0 9px #a0203c66;animation:wkPulse 2.2s ease-in-out infinite;transition:transform .12s ease,box-shadow .12s ease;text-align:left}
#battleModal .weaken-hud:hover{transform:translateY(-1px) scale(1.04);box-shadow:0 0 0 1px #e0687e,0 0 14px #c0304caa}
#battleModal .weaken-hud:active{transform:scale(.97)}
#battleModal .weaken-hud .wk-icon{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffc9d2,#a3283f 60%,#4a0a18);box-shadow:0 0 6px #d0405a}
#battleModal .weaken-hud .wk-icon svg{width:1.2em;height:1.2em}
#battleModal .weaken-hud .wk-icon .blade{fill:#fff}
#battleModal .weaken-hud .wk-icon .crack{stroke:#4a0a18}
#battleModal .weaken-hud .wk-icon .arrow{stroke:#2a0610}
#battleModal .weaken-hud .wk-text{display:flex;flex-direction:column;line-height:1.15}
#battleModal .weaken-hud .wk-text b{font:900 1em/1.1 system-ui;letter-spacing:.1em;color:#fff;text-shadow:0 0 5px #d0405a}
#battleModal .weaken-hud .wk-text small{font:600 .75em/1.2 system-ui;color:#f3b8c3}
#battleModal .weaken-hud.spent{cursor:default;animation:none;border-color:#7a3a47;background:linear-gradient(135deg,#2e1218,#1c0a0f);box-shadow:none;opacity:.85}
#battleModal .weaken-hud.spent .wk-icon{background:radial-gradient(circle at 35% 30%,#d8b0b8,#743442 60%,#36121b);box-shadow:none}
#battleModal .weaken-hud.spent .wk-text b{text-shadow:none;color:#ecccd2}
@keyframes wkPulse{50%{box-shadow:0 0 0 1px #c0485f55,0 0 14px #a0203caa}}

/* Round 64: always-visible debuff strip. */
#battleModal .debuff-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.35em;margin-top:.3em;padding:.3em .45em;border-radius:8px;border:1px dashed #ffffff26;background:#0006;min-height:1.9em}
#battleModal .debuff-strip .ds-cap{font:700 .66em/1 system-ui;letter-spacing:.08em;text-transform:uppercase;color:#9fb0c0}
#battleModal .debuff-strip .ds-none{font-size:.75em;color:#7d8a96;font-style:italic}
#battleModal .debuff-strip .ds-item{display:inline-flex;align-items:center;gap:.25em;font:700 .78em/1 system-ui;padding:.28em .5em;border-radius:6px;cursor:help}
#battleModal .debuff-strip .ds-item i{font-style:normal}
#battleModal .debuff-strip.you .ds-item{background:#4a1220;border:1px solid #d9536b;color:#ffd5dc}
#battleModal .debuff-strip.enemy .ds-item{background:#1b3a17;border:1px solid #7fcf5f;color:#dcffcf}
/* Round 62: damage over time per turn. */
#battleModal .dot-hud{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.25em;padding:.25em .6em;border-radius:8px;border:1px solid;font:inherit}
#battleModal .dot-hud.you{background:linear-gradient(135deg,#5a1424,#2b0c16);border-color:#ff6b81;color:#ffd0d8;box-shadow:0 0 10px #ff3b5c44}
#battleModal .dot-hud.enemy{background:linear-gradient(135deg,#1f4a16,#0f2a0c);border-color:#8be36b;color:#dcffcf;box-shadow:0 0 10px #6bd84a44}
#battleModal .dot-hud .dot-drop{font-size:.9em}
#battleModal .dot-hud .dot-num{font:900 1.05em/1 system-ui}
#battleModal .dot-hud .dot-cap{font:700 .62em/1 system-ui;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
#battleModal .dot-hud .dot-detail{flex-basis:100%;font:600 .62em/1.2 system-ui;opacity:.85}

/* Round 70: phones — tighter encounter header so the hand is closer to view. */
@media (max-width:560px){
  #battleModal.hud-v2 .battle-compact{font-size:13px}
  #battleModal.hud-v2 .intent-bubbles{grid-template-columns:1fr 1fr;gap:6px}
  #battleModal.hud-v2 .intent-bubble{font-size:.85em;padding:6px 8px}
  #battleModal.hud-v2 .intent-bubble .what{font-size:1em}
  #battleModal .debuff-strip{min-height:0;padding:.2em .4em;margin-top:.2em}
  #battleModal.hud-v2 .compact-side{padding:.4em .55em;gap:.25em}
  #battleModal.hud-v2 .compact-combatants{grid-template-columns:1fr 1fr;gap:.4em}
  #battleModal.hud-v2 .compact-monster{width:2.4em;height:2.4em}
  #battleModal .compact-combatants .meter.hud-meter{height:1.35em}
}

/* Round 77: wildlife-style sprites (Elaris, Vespera, Chronospire) were invisible
   in the compact battle portrait — give them a size and their first frame. */
#battleModal .compact-monster .wildlife-sprite{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:400% 100%;background-position:0 0;image-rendering:pixelated}