/* Compact forged-metal HUD. No textures, images or extra network messages. */
.battle-hud{
  top:1.4%;left:1.4%;right:1.4%;
  grid-template-columns:minmax(0,1fr) clamp(68px,6.6cqw,104px) minmax(0,1fr);
  gap:1cqw;
}
.battle-hud .plate{
  --hud-edge:#8e7960;--hud-light:#ccbda0;
  position:relative;width:min(100%,clamp(220px,34cqw,570px));
  padding:6px 10px 7px;clip-path:none;border:1px solid #81715875;
  border-top-color:#b7a183a6;border-bottom-color:#332d27;
  background:linear-gradient(180deg,#282723ed,#0b0e10ed 38%,#090c0ee8);
  box-shadow:inset 0 1px 0 #ddd1ae1a,inset 0 0 0 2px #080a0b80,0 3px 8px #0007;
}
.battle-hud .cpu-plate{justify-self:end}
.battle-hud .plate::before,.battle-hud .plate::after{
  content:"";position:absolute;top:-2px;width:5px;height:5px;
  background:#b6a384;border:1px solid #352c24;rotate:45deg;pointer-events:none;
}
.battle-hud .plate::before{left:5px}.battle-hud .plate::after{right:5px}
.battle-hud .plate-name{gap:7px;min-height:26px}
.battle-hud .plate-identity{gap:1px;line-height:1.1}
.battle-hud .plate-name strong{font-size:clamp(13px,1.15cqw,18px);line-height:1.15;letter-spacing:.045em;color:#eee5d3;text-shadow:0 1px 2px #000}
.battle-hud .form-title{font-size:clamp(9px,.65cqw,11px);line-height:1.2;color:#aaa99d;letter-spacing:.015em}
.battle-hud .plate-name small{font-size:clamp(10px,.75cqw,12px)}
.battle-hud .side-tag{padding:1px 5px;border-color:#9280646b;border-radius:0;font-size:clamp(9px,.65cqw,11px);line-height:1.15;letter-spacing:.055em;background:#080a0b70}
.battle-hud .cpu-tag.person{gap:4px;max-width:8cqw}
.battle-hud .cpu-tag.person .sigil{width:12px;filter:none}
.battle-hud .hp-num{flex:none;font-size:9px;line-height:1.2;letter-spacing:0;color:#a9aa9f}
.battle-hud .hp-num b{font-size:clamp(11px,.85cqw,14px);letter-spacing:.015em;margin-left:4px;font-variant-numeric:tabular-nums;color:#ede4d4}
.battle-hud .hp-bar{height:clamp(8px,.75cqw,12px);margin-top:4px;border-color:#96806670;background:#050708;box-shadow:inset 0 1px 3px #000}
.battle-hud .hp-bar::after{background:linear-gradient(180deg,#fff6dc20,transparent 45%,#0005)}
.battle-hud .hp-fill{background:linear-gradient(#75aa9e,#397b70 40%,#205448 78%,#518e79);box-shadow:0 0 5px #4d9c7955}
.battle-hud .cpu-plate .hp-fill{background:linear-gradient(#ba7776,#8c373e 40%,#582129 78%,#8b4343);box-shadow:0 0 5px #a4484855}
.battle-hud .hp-bar.low .hp-fill{background:linear-gradient(#e1a082,#ba513c 45%,#713024);animation:b-low .9s ease-in-out infinite}
.battle-hud .hp-shield{background:repeating-linear-gradient(135deg,#b8dbe7ae 0 3px,#639cb19c 3px 6px);box-shadow:none}
.battle-hud .plate-gauge{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:15px 5px;column-gap:8px;row-gap:3px;margin-top:4px;min-width:0}
.battle-hud .gauge-meta{grid-column:1;grid-row:1;display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden}
.battle-hud .gauge-name{flex:0 1 auto;font-size:clamp(10px,.7cqw,11px);line-height:1.25;letter-spacing:.02em;color:#c8b89b}
.battle-hud .trait-chip{flex:0 1 auto;min-width:0;margin:0 0 0 auto;gap:4px;overflow:hidden;white-space:nowrap;font-size:clamp(9px,.65cqw,10px);line-height:1.25;pointer-events:auto;color:#9d9d90}
.battle-hud .trait-chip b{overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;color:#9d9d90}
.battle-hud .trait-state{flex:none;gap:3px}
.battle-hud .trait-state i{min-width:4px;min-height:4px;width:4px;height:4px;box-shadow:none}
.battle-hud .trait-state .ward{width:5px;height:6px}
.battle-hud .gauge-bar{grid-column:1;grid-row:2;width:100%;height:5px;min-width:0;border-color:#9880646b;background:#050708}
.battle-hud .gauge-bar::after{background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),#090b0cc9 calc(20% - 1px) 20%)}
.battle-hud .gauge-fill{background:linear-gradient(#d8c092,#8b6c40);box-shadow:none}
.battle-hud .cpu-plate .plate-gauge{grid-template-columns:minmax(0,1fr)}
.battle-hud .cpu-plate .gauge-meta{flex-direction:row-reverse}
.battle-hud .cpu-plate .trait-chip{margin:0 auto 0 0;justify-content:flex-start}
.battle-hud .cpu-plate .gauge-fill{background:linear-gradient(#b7a3c7,#725980);box-shadow:none}
.battle-hud .skill-button{grid-column:2;grid-row:1/3;align-self:stretch;padding:0 8px;font-size:10px;line-height:1.2;letter-spacing:.02em;border-radius:0;min-height:23px}
.battle-hud .skill-button.ready{box-shadow:inset 0 1px 0 #c5aa7940,inset 0 0 0 2px #0a080a99,0 0 6px #8f3e282e}
/* Live text is a separate, one-line strip; it cannot enlarge the enemy's plate. */
.battle-hud .opponent-input{
  position:absolute;top:calc(100% + 5px);right:0;display:flex;align-items:baseline;gap:7px;
  width:min(100%,330px);max-width:none;margin:0;padding:2px 6px 3px;
  border:0;border-right:1px solid #8e796047;
  background:linear-gradient(270deg,#080c10ad,#080c1066 75%,transparent);
  font:11px/1.25 ui-monospace,Consolas,monospace;text-shadow:0 1px 2px #000;
}
.battle-hud .opponent-input small{flex:none;margin:0;font:8px/1.25 var(--body);color:#969b93}
.battle-hud .opponent-input>span{flex:0 1 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d1c7b7;font:11px/1.25 var(--body)}
.battle-hud .opponent-input>div{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.battle-hud .opponent-input b{color:#b4d8c9}.battle-hud .opponent-input div>span{color:#969d99}
.battle-hud .opponent-input.input-miss b{color:#dd9085}
.battle-hud .clock-col{gap:4px}
.battle-hud .clock{width:clamp(52px,4.9cqw,78px)}
.battle-hud .clock-track{stroke:#38332a;stroke-width:7;fill:#080b0ef0}
.battle-hud .clock-fill{stroke:#bda77c;stroke-width:3}
.battle-hud .clock strong{font-size:clamp(17px,1.65cqw,26px);color:#e3d6b9}
.battle-hud .clock span{font-size:8px;letter-spacing:.08em}
.battle-hud .arena-buttons{gap:4px}
.battle-hud .arena-icon{height:28px;min-width:28px;padding:0 5px;gap:3px;border-color:#8674586b;border-radius:1px;background:linear-gradient(#242724d9,#0b0e10ed);box-shadow:inset 0 1px 0 #d2c5a314}
.battle-hud .arena-icon svg{width:12px;height:12px}
.battle-hud .arena-icon kbd{font-size:9px;padding:0 3px;border-color:#83705060;color:#b9ab91}
.battle-hud .seek-tag{font-size:clamp(8px,.65cqw,10px);letter-spacing:0;white-space:nowrap;padding:1px 3px;background:#080b0c8c;color:#9fbeae}
.battle-hud .seek-tag::before{width:4px;height:4px;min-width:4px;min-height:4px;box-shadow:none}
.battle-hud .cpu-plate.waiting .plate-name::after{font-size:9px;letter-spacing:0}

/* Touch HUD: labels stay readable, controls keep their 36px touch targets. */
body[data-input="flick"] .battle-hud{top:max(7px,env(safe-area-inset-top));left:2%;right:2%;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);gap:5px}
body[data-input="flick"] .battle-hud .plate{width:100%;padding:5px 6px 6px}
body[data-input="flick"] .battle-hud .plate-name{display:block;min-height:28px;white-space:nowrap}
body[data-input="flick"] .battle-hud .plate-identity{gap:0}
body[data-input="flick"] .battle-hud .plate-identity strong{font-size:12px;line-height:1.25;letter-spacing:0}
body[data-input="flick"] .battle-hud .hp-num{display:block;line-height:1.3;font-size:8px}
body[data-input="flick"] .battle-hud .hp-num b{font-size:10px;margin-left:3px}
body[data-input="flick"] .battle-hud .cpu-plate .hp-num{text-align:right}
body[data-input="flick"] .battle-hud .plate-name>.cpu-tag[data-kind="ai"]{position:static;float:left;display:block;font:8px/1.4 var(--body);padding:0;margin:1px 3px 0 0;border:0;background:none;color:#c3b58e}
body[data-input="flick"] .battle-hud .hp-bar{height:8px;margin-top:3px}
body[data-input="flick"] .battle-hud .plate-gauge{display:block;margin-top:4px}
body[data-input="flick"] .battle-hud .gauge-meta{display:none}
body[data-input="flick"] .battle-hud .gauge-bar{height:4px}
body[data-input="flick"] .battle-hud .opponent-input{top:calc(100% + 4px);padding:2px 3px;display:block;line-height:1.15}
body[data-input="flick"] .battle-hud .opponent-input small{display:none}
body[data-input="flick"] .battle-hud .opponent-input>span{display:block;max-width:100%;font-size:10px;text-align:right}
body[data-input="flick"] .battle-hud .opponent-input>div{font-size:9px;line-height:1.2;margin-top:1px}
body[data-input="flick"] .battle-hud .clock-col{gap:3px}
body[data-input="flick"] .battle-hud .clock{width:48px}
body[data-input="flick"] .battle-hud .clock strong{font-size:16px}
body[data-input="flick"] .battle-hud .arena-buttons{gap:4px}
body[data-input="flick"] .battle-hud .arena-icon{height:36px;min-width:36px;padding:0 3px}
body[data-input="flick"] .battle-hud .arena-icon kbd{display:none}
body[data-input="flick"] .battle-hud .seek-tag{font-size:8px;line-height:1.2;padding:0;background:none;max-width:76px;white-space:normal;text-align:center}
body[data-input="flick"] .battle-hud .seek-tag::before{display:none}
body.lab-folded .lab-fold{top:auto;bottom:8px;min-height:32px;padding:4px 8px;font-size:11px}
@media(max-height:650px){body[data-input="flick"] .battle-hud .opponent-input{display:none}}
@media(max-height:550px) and (orientation:landscape){
  body[data-input="flick"] .battle-hud{right:51%;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);gap:4px}
}
@media(prefers-reduced-motion:reduce){.battle-hud .hp-bar.low .hp-fill,.battle-hud .plate-gauge.ready .gauge-fill,.battle-hud .seek-tag{animation:none}}