/* v3.7.6 군기(명판) · 에테르 키우기
   - 내 깃발도 상대처럼 가로 깃발(장대는 왼쪽, 오른쪽 끝이 제비꼬리)
   - 양쪽 깃발이 넓고 높아져 16자 아이디가 한 줄에 다 보인다.
     그래도 글자 칸보다 길면 js/game.js fitNameIds가 넘치는 만큼 글씨만 줄인다(말줄임 없음)
   - 위 줄(상대): 왼쪽 칸이 넓어지고, 깃발 · 에테르가 띠보다 조금 아래로 내려와 커진다(아래 소각장 이름표는 가리지 않음)
   - 아래 줄(나): 왼쪽 칸만 넓어지고(핸드는 그만큼 오른쪽으로), 에테르 원형(결정화)이 칸 높이를 거의 다 쓴다 */

/* ---------- 공통: 가로 깃발의 글씨 칸 ---------- */
.nameplate.banner.bn-h { justify-content: flex-start; }
.bn-h .np-meta { flex: 1 1 auto; min-width: 0; grid-template-columns: minmax(0, 1fr); align-content: center; }
.bn-h .np-id { --fs: 20px; font-size: var(--fs); max-width: 100%; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }  /* 11px까지 줄여도 넘치면(아주 좁은 화면) 그때만 말줄임 */
.bn-h .np-sub { max-width: 100%; }
.bn-h .np-meta .pi-role { position: static; justify-self: start; }

/* ---------- 위 줄: 상대 깃발 + 에테르 ---------- */
@media (min-width: 761px) {
  .prow-top { grid-template-columns: calc(var(--pile-w) + var(--cw) * 1.75) minmax(0, 1fr) calc(var(--pile-w) + var(--cw) * 1.75); }
  .prow-top .pinfo { justify-self: end; width: var(--pile-w); }
}
.prow-top .pside { height: calc(var(--top-h) + 20px); position: relative; z-index: 2; }
.prow-top .nameplate.banner { flex: 1 1 auto; min-width: 0; }
.prow-top .ether.altar { flex: 0 0 auto; width: calc(var(--top-h) + 20px); }
.prow-top .bn-h { gap: 10px; padding: 0 calc(var(--cw) * .36) 0 14px; }
.prow-top .bn-h .np-shield { height: 70%; }
.prow-top .bn-h .np-meta { gap: 2px; }
.prow-top .bn-h .np-id { --fs: clamp(15px, calc(var(--top-h) * .3), 26px); }
.prow-top .bn-h .np-sub { display: block; font-size: clamp(11px, calc(var(--top-h) * .16), 14px); }
.prow-top .bn-h .pi-role { font-size: 11px; padding: 0 6px; }

/* ---------- 아래 줄: 내 깃발 + 에테르(결정화 원형) ---------- */
@media (min-width: 761px) {
  .prow-bot { grid-template-columns: calc(var(--pile-w) + var(--cw) * 2.05) minmax(0, 1fr) var(--pile-w); }
  /* 핸드 칸이 좁아진 만큼, 부채꼴 양 끝 카드가 기울어 칸 밖(깃발 · 생명)으로 삐져나가지 않게 펼치는 폭을 조금 줄인다 */
  .prow-bot .hand-me .hand-slot { left: calc(50% - var(--hw) / 2 + var(--k) * min(var(--hw) * .8, (100% - var(--hw) * 1.35) / var(--d))); }
}
.prow-bot .pside { height: calc(var(--hand-vis) - 12px); margin-bottom: 6px; align-items: center; gap: 10px; }
.prow-bot .nameplate.banner.bn-h { flex: 1 1 auto; min-width: 0; align-self: center; height: calc(var(--cw) * .82); gap: 12px; padding: 0 calc(var(--cw) * .27) 0 16px; }
.prow-bot .bn-h .np-shield { height: 48%; }
.prow-bot .bn-h .np-meta { gap: 4px; }
.prow-bot .bn-h .np-id { --fs: clamp(16px, calc(var(--cw) * .13), 28px); }
.prow-bot .bn-h .np-sub { font-size: clamp(11px, calc(var(--cw) * .075), 15px); }
.prow-bot .bn-h .pi-role { font-size: clamp(10px, calc(var(--cw) * .065), 13px); padding: 0 7px; }
/* 에테르 칸 폭 = 원형 지름. 원형은 칸 높이에서 아래 이름표(결정화 가능 · 완료) 자리만 뺀 만큼 */
.prow-bot .ether.altar { flex: 0 0 auto; width: calc(var(--hand-vis) - 12px - 28px); align-self: stretch; padding-inline: 0; }
.prow-bot .eth-ring { width: min(100cqw, calc(100cqh - 38px)); }

/* ---------- 좁은 화면(760px 이하): 칸이 좁으니 방패를 빼고 아이디 칸을 넓힌다 ---------- */
@media (max-width: 760px) {
  .prow-top .bn-h, .prow-bot .nameplate.banner.bn-h { padding: 0 22px 0 10px; gap: 6px; }
  .bn-h .np-shield { display: none; }
  .prow-top .bn-h .np-sub { display: none; }
  .prow-bot .nameplate.banner.bn-h { height: 70%; }
}