/* HUD 축소 v2 (ds/specs/battle-ui-style.md 8-1·8-2): B형 일반 70px · C형 540px 이하 62px. A형(방송)은 broadcast.css */
:root{
  --hud-h:70px;--hud-w:34cqw;--hud-bw:3px;--hud-r:18px;--hud-pad:4px 10px;
  --hud-icon:40px;--hud-col-gap:8px;--hud-row-gap:3px;
  --hud-name:16px;--hud-num:12px;--hud-chip:12px;--hud-chip-h:20px;
  --hud-hp:14px;--hud-gauge:10px;--hud-numtag-h:16px;--hud-numtag-overlap:8px;
  --lv-easy:var(--ui-leaf);--lv-easy-step:var(--ui-leaf-step);
  --lv-normal:var(--ui-sun);--lv-normal-step:var(--ui-sun-step);
  --lv-hard:var(--ui-berry);--lv-hard-step:var(--ui-berry-step);
}
.player-hud{--side-step:var(--ui-mine-step)}.enemy-hud{--side-step:var(--ui-foe-step)}
.battle-hud{grid-template-columns:minmax(0,var(--hud-w)) minmax(0,1fr) minmax(0,var(--hud-w))}
.hp-card{container:hud/inline-size;position:relative;display:grid;grid-template-columns:var(--hud-icon) minmax(0,1fr);grid-template-rows:20px 16px 14px;column-gap:var(--hud-col-gap);row-gap:var(--hud-row-gap);align-content:center;box-sizing:border-box;height:var(--hud-h);padding:var(--hud-pad);border-width:var(--hud-bw);border-radius:var(--hud-r)}
.enemy-hud{grid-template-columns:minmax(0,1fr) var(--hud-icon)}
.hp-card>.hud-top,.hp-card>.hud-bar,.hp-card>.gauge-row{grid-column:2;min-width:0}
.enemy-hud>.hud-top,.enemy-hud>.hud-bar,.enemy-hud>.gauge-row{grid-column:1}
.hp-card>.hud-top{grid-row:1}.hp-card>.hud-bar{grid-row:2}.hp-card>.gauge-row{grid-row:3}
/* 편 탭: 글자는 시각 숨김(스크린리더 유지) */
.hp-card .side-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 윗줄: 이름 → 등급 → 시그니처 점 → (빈칸) → 먼저!·특성·상태 */
.hp-card .hud-top{display:flex;justify-content:flex-start;align-items:center;gap:6px;min-height:0;height:100%}
.enemy-hud .hud-top,.enemy-hud .hud-bar,.enemy-hud .gauge-row,.enemy-hud .chip-row{flex-direction:row-reverse}
.hp-card .hud-top strong{flex:0 1 auto;min-width:3em;font-size:var(--hud-name);line-height:20px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-card .gnul-tier{display:inline-flex;align-items:center;height:var(--hud-chip-h);padding:0 7px;border-radius:var(--ui-r-pill);font-size:var(--hud-chip);font-weight:800;line-height:1}
.hp-card .gnul-signature{flex:none;margin:0;gap:0}
.hp-card .gnul-signature span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hp-card .gnul-signature i{width:10px;height:10px}
.hp-card .chip-row{flex:0 1 auto;display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-width:0;min-height:0;margin:0 0 0 auto}
.enemy-hud .chip-row{margin:0 auto 0 0}
.hp-card .first-badge{flex:none;height:var(--hud-chip-h);padding:0 7px;font-size:var(--hud-chip);font-weight:900}
.hp-card .trait-chip,.hp-card .state-chip{flex:0 1 auto;min-width:0;max-width:120px;height:var(--hud-chip-h);padding:0 7px;gap:3px;font-size:var(--hud-chip);font-weight:800;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-card .trait-chip::before,.hp-card .state-chip::before{width:12px;height:12px}
/* HP 줄: 트랙 + 수치 태그(바 안 오른쪽, 링 = 단계색) */
.hud-bar{--hp:var(--ui-hp-high);display:flex;align-items:center;height:100%}
.hud-bar:has(.hp-track[data-level=mid]){--hp:var(--ui-hp-mid)}.hud-bar:has(.hp-track[data-level=low]){--hp:var(--ui-hp-low)}
.hp-card .hp-track{flex:1;min-width:0;height:var(--hud-hp)}
.enemy-hud .hp-track,.enemy-hud .gauge-track{transform:scaleX(-1)}
.hud-num{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:56px;height:var(--hud-numtag-h);margin-left:calc(-1*var(--hud-numtag-overlap));padding:0 6px;border-radius:var(--ui-r-pill);background:var(--ui-panel-hud);box-shadow:0 0 0 2px var(--hp);color:var(--ui-ink-strong);font-size:var(--hud-num);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.enemy-hud .hud-num{margin-left:0;margin-right:calc(-1*var(--hud-numtag-overlap))}
.hud-num b{font-weight:900}
/* 별가루 줄: 반짝 아이콘 · 트랙 · 현재값("가득!" 알약) */
.hp-card .gauge-row{margin:0;gap:4px;height:100%}
.hp-card .gauge-icon svg{width:14px;height:14px}
.hp-card .gauge-track{height:var(--hud-gauge)}
.hp-card .gauge-value{min-width:2.2ch;text-align:right;font-size:var(--hud-num);font-weight:800;line-height:1}
.hp-card .gauge-row.full .gauge-value{position:static;transform:none;display:inline-flex;align-items:center;height:var(--hud-numtag-h);padding:0 6px;font-size:var(--hud-num);font-weight:900}
/* 칩 넘침(8-2-5): 좁은 HUD에서 상태·특성 칩은 아이콘만 */
@container hud (max-width:300px){
  .hp-card .trait-chip,.hp-card .state-chip{font-size:0;gap:0;width:var(--hud-chip-h);padding:0;justify-content:center;flex:none}
}
/* 8-2-4 카드 아이콘 버튼: 원 40, 누름 영역 44, 썸네일(없으면 주 마음 색 + 카드 아이콘), 보기 표지 */
.hud-card-btn{--step:3px;position:relative;grid-column:1;grid-row:1/4;align-self:center;justify-self:center;display:grid;place-items:center;box-sizing:border-box;width:var(--hud-icon);height:var(--hud-icon);padding:0;border:3px solid var(--side-edge);border-radius:50%;background:var(--ui-panel-sunk);box-shadow:0 var(--step) 0 var(--side-step);pointer-events:auto;cursor:pointer;transition:transform var(--ui-t-release) var(--ui-ease-out),box-shadow var(--ui-t-release) var(--ui-ease-out)}
.enemy-hud .hud-card-btn{grid-column:2}
.hud-card-btn::before{content:"";position:absolute;inset:-4px;border-radius:50%}
.hud-card-btn img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 40%;object-view-box:inset(12% 14% 32% 14%)}
.hud-card-btn.no-thumb{background:var(--mind,var(--ui-sun)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2618' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3.5' width='12' height='17' rx='2.5'/%3E%3Cpath d='M9.5 8.5h5M9.5 12h5'/%3E%3C/svg%3E") center/18px no-repeat}
.hud-card-btn::after{content:"";position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-sizing:border-box;background:var(--ui-sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2618' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/10px no-repeat}
.enemy-hud .hud-card-btn::after{right:auto;left:-5px}
.hud-card-btn:active{transform:translateY(2px);--step:1px;transition-duration:var(--ui-t-press)}
@media(hover:hover){.hud-card-btn:hover{transform:translateY(-1px);--step:4px}}
.hud-card-btn:focus-visible{outline:3px solid var(--ui-sun);outline-offset:2px}
.hud-card-btn[aria-expanded=true]{border-color:var(--ui-sun);box-shadow:0 var(--step) 0 var(--side-step),0 0 0 3px #ffd35a66}
.arena.intro .hud-card-btn,.arena.waiting .hud-card-btn{pointer-events:none}
/* 8-2-6 중앙 묶음: 1줄 라운드 + 음소거, 2줄 구장 배지 */
.hud-center{padding-top:0;gap:4px;align-content:start;min-width:0}
.hud-center-row{display:flex;align-items:center;justify-content:center;gap:8px}
.broadcast-off{display:none}
/* C형 540px 이하: v1 폭 유지, 높이 62, 먼저!는 위 모서리 걸이, 특성·상태는 아래 테두리 원 */
@media(max-width:540px){
  :root{--hud-icon:28px;--hud-h:62px;--hud-bw:2px;--hud-r:14px;--hud-pad:4px 6px;--hud-col-gap:6px;--hud-name:13px;--hud-num:11px;--hud-chip:11px;--hud-chip-h:20px;--hud-numtag-overlap:6px}
  .battle-hud{grid-template-columns:1fr 44px 1fr}
  .hp-card{grid-template-rows:16px 16px 12px}
  .hp-card .hud-top strong{line-height:16px;min-width:3em}
  .hp-card .gnul-tier{height:16px;padding:0 5px;font-size:11px}
  .hp-card .gnul-signature i{width:8px;height:8px}
  .hp-card .chip-row{display:contents}
  .hp-card .first-badge{position:absolute;z-index:2;top:-13px;right:8px;height:18px;padding:0 6px;font-size:11px;border:2px solid #fff}
  .enemy-hud .first-badge{right:auto;left:8px}
  .hp-card .trait-chip,.hp-card .state-chip{position:absolute;z-index:2;bottom:-10px;left:40px;width:20px;height:20px;padding:0;gap:0;justify-content:center;font-size:0;border:2px solid #fff;border-radius:50%;max-width:none}
  .hp-card .state-chip{left:64px}
  .enemy-hud .trait-chip{left:auto;right:40px}.enemy-hud .state-chip{left:auto;right:64px}
  .hp-card .trait-chip::before,.hp-card .state-chip::before{width:11px;height:11px}
  .hud-num{min-width:30px;padding:0 4px}
  .hud-num span{display:none}
  .hp-card .gauge-icon svg{width:12px;height:12px}
  .hud-card-btn{border-width:2px;--step:2px}
  .hud-card-btn::before{inset:-8px}
  .hud-card-btn::after{width:12px;height:12px;right:-4px;bottom:-4px;background-size:8px;border-width:1.5px}
  .enemy-hud .hud-card-btn::after{left:-4px}
  .hud-card-btn.no-thumb{background-size:14px}
  .hud-center-row{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){.hud-card-btn{transition:box-shadow var(--ui-t-press)}.hud-card-btn:is(:hover,:active){transform:none}}