/* 몬스타 리그 경기 모드(league-battle.js, body.league-mode). 방송 스코어버그·클럽 표시·경기 종료 패널. 기존 배틀 화면은 건드리지 않는다. */
.league-mode { --lg-ink: #0A1230; --lg-gold: #FFC629; --lg-live: #D8142B; --lg-font: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; --lg-s: 1; }
/* 리그 모드: 대진 고르기·모드·설정·관중 전환·수동 조작·멈추기는 숨긴다(엔트리·순서는 서버 스냅샷) */
.league-mode .intro, .league-mode .mode-nav, .league-mode .mode-support, .league-mode .battle-mode-picker, .league-mode .roster-picker,
.league-mode .audience-picker, .league-mode #recover-balance, .league-mode .result-actions, .league-mode .auto-stop, .league-mode #abandon-battle,
.league-mode .auto-toggle, .league-mode.league-last .auto-countdown, .league-mode.league-done .battle-result { display: none !important; }
.league-mode:not(.league-ready) #start-battle { visibility: hidden; }
.league-mode .battle-heading .eyebrow { font-family: var(--lg-font); letter-spacing: .12em; }

/* 스코어버그(아레나 위 가운데) */
.lg-bug { position: absolute; left: 50%; top: 12px; z-index: 14; transform: translateX(-50%) scale(var(--lg-s)); transform-origin: 50% 0; pointer-events: none; font-family: var(--lg-font); color: #fff; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.lg-bug:empty { display: none; }
.lg-bug-row { display: flex; align-items: stretch; height: 40px; background: var(--lg-ink); }
.lg-bug-tag { display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: var(--lg-gold); color: var(--lg-ink); font: italic 800 11px/1 var(--lg-font); letter-spacing: .04em; }
.lg-bug-tag b { font-size: 13px; }
.lg-bug-team { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-width: 104px; font: 800 17px/1 "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; white-space: nowrap; }
.lg-bug-team.home { background: var(--home); color: var(--home-ink); justify-content: flex-end; }
.lg-bug-team.away { background: var(--away); color: var(--away-ink); box-shadow: inset 0 -4px 0 var(--away-accent, transparent); }
.lg-bug-team .crest { width: 28px; height: 28px; }
.lg-bug-score { display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #fff; color: var(--lg-ink); font: 800 30px/1 var(--lg-font); font-variant-numeric: tabular-nums; }
.lg-bug-score i { font-style: normal; opacity: .55; font-weight: 600; }
.lg-bug-bout { display: flex; align-items: center; background: var(--lg-live); padding: 0 10px; font: 800 15px/1 var(--lg-font); letter-spacing: .08em; white-space: nowrap; }
.league-done .lg-bug-bout { background: var(--lg-ink); }
.lg-bug-replay { display: flex; align-items: center; padding: 0 10px; background: var(--lg-ink); color: var(--lg-gold); box-shadow: inset 3px 0 0 var(--lg-gold); font: italic 800 15px/1 var(--lg-font); letter-spacing: .1em; }
.league-replay .lg-bug-bout { background: #26305C; }
.league-mode .battle-hud { top: 88px; }
.league-mode .hp-card { overflow: visible; }
.league-mode .hp-card { border-color: var(--club, var(--ui-rim)); }
.lg-club { position: absolute; top: -26px; left: 18px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 4px; background: var(--club); color: var(--club-ink, #fff); font: 800 13px/1 "Noto Sans KR", sans-serif; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); pointer-events: none; }
.enemy-hud .lg-club { left: auto; right: 18px; }
.lg-club .crest { width: 16px; height: 16px; flex: none; }
.lg-club small { font: 700 10px/1 var(--lg-font); letter-spacing: .1em; opacity: .85; }

/* 안내(키 필요·오류) */
.lg-note { margin: 0 0 12px; padding: 12px 16px; background: var(--lg-ink); color: #fff; font: 600 15px/1.5 "Noto Sans KR", sans-serif; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lg-note.is-error { border-left: 0; box-shadow: inset 0 4px 0 var(--lg-live); }
.lg-note p { margin: 0; flex: 1 1 260px; }
.lg-note a { color: var(--lg-gold); font-weight: 800; }
.lg-key { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-key input { min-height: 40px; padding: 0 10px; border: 1px solid #2B3A74; background: #111B44; color: #fff; }
.lg-key button { min-height: 40px; padding: 0 14px; border: 0; background: var(--lg-gold); color: var(--lg-ink); font-weight: 800; cursor: pointer; }

/* 경기 종료 패널 */
.lg-final { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(7, 12, 34, .72); padding: 16px; word-break: keep-all; }
.lg-final[hidden] { display: none; }
.lg-final-board { width: min(640px, 100%); background: var(--lg-ink); color: #fff; text-align: center; padding: 22px 22px 24px; box-shadow: 0 -5px 0 var(--lg-gold) inset; }
.lg-final-kick { margin: 0; font: 800 15px/1 var(--lg-font); letter-spacing: .18em; color: var(--lg-gold); }
.league-mode #battle-title .lg-title-team { display: inline-block; max-width: 100%; }   /* 긴 공식 이름이 vs 사이에서 둘로 쪼개지지 않게 */
.lg-final-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin: 16px 0 10px; }
.lg-final-score span { display: grid; justify-items: center; gap: 8px; font: 900 18px/1.2 "Noto Sans KR", sans-serif; text-align: center; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.lg-final-score strong { font: 800 84px/1 var(--lg-font); font-variant-numeric: tabular-nums; }
.lg-final-score strong i { font-style: normal; opacity: .6; margin: 0 4px; }
.lg-final-line { margin: 0 0 16px; font: 700 16px/1.4 "Noto Sans KR", sans-serif; color: #C3CAE0; }
.lg-final-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.lg-final-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid #fff; color: #fff; text-decoration: none; font: 800 15px/1 "Noto Sans KR", sans-serif; }
.lg-final-actions a.primary { background: var(--lg-gold); border-color: var(--lg-gold); color: var(--lg-ink); }
.lg-final-actions a:focus-visible { outline: 3px solid var(--lg-gold); outline-offset: 2px; }

/* 방송 모드(1920×1080 설계 → --bc-scale) */
/* --lg-hud-y: HUD를 내린 설계 px. HUD 윗변 = y + 43(패딩), 높이 84 → 예고 말풍선은 y + 143(16 간격) */
body[data-broadcast].league-mode { --lg-s: calc(var(--bc-scale, 1) * 1.7); --lg-hud-y: 110px; }
body[data-broadcast].league-exhibition { --lg-hud-y: 150px; }
body[data-broadcast].league-mode .lg-bug { top: calc(18px * var(--bc-scale, 1)); }
body[data-broadcast].league-mode .battle-hud { top: calc(var(--lg-hud-y) * var(--bc-scale, 1)); }
body[data-broadcast].league-mode .lg-club { transform: scale(1.6); transform-origin: 0 100%; top: -40px; }
body[data-broadcast].league-mode .enemy-hud .lg-club { transform-origin: 100% 100%; }
@media (max-width: 760px) {
  .lg-bug-tag { display: none; }
  .lg-bug-team { min-width: 0; padding: 0 8px; font-size: 14px; gap: 6px; }
  .lg-bug-team .crest { width: 22px; height: 22px; }
  .lg-bug-row { height: 34px; }
  .lg-bug-score { font-size: 24px; padding: 0 10px; }
  .lg-bug-replay { padding: 0 6px; font-size: 11px; letter-spacing: .04em; }
    .lg-bug-bout { font-size: 12px; line-height: 20px; }
    .league-mode .battle-hud { top: 70px; }
  .lg-final-score strong { font-size: 56px; }
  .lg-final-score .crest { width: 52px; height: 52px; }
  .lg-final-score span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .lg-bug, .lg-final { transition: none; animation: none; } }
/* 방송 모드: HUD를 --lg-hud-y만큼 내렸으므로 예고 말풍선(≤96)·도발 줄도 같이 내린다(친선전 150 포함) */
body[data-broadcast].league-mode .turn-info { top: calc(var(--lg-hud-y) + 143px); }
body[data-broadcast].league-mode .turn-taunt { top: calc(var(--lg-hud-y) + 247px); }

/* 응원 발동 한 순간만 읽히는 알림. 반복 발동은 팀 아이콘만 반짝인다. */
.lg-cheer{position:absolute;z-index:19;top:154px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;display:grid;gap:4px;pointer-events:none;color:#fff7d5;font-size:13px;line-height:1.45;text-align:center}.lg-cheer[hidden]{display:none}.lg-cheer span{padding:7px 12px;border-radius:14px;background:#10213aed;border:1px solid #d8c786}.lg-cheer strong{color:#ffe295}.lg-cheer-pulse{animation:lg-cheer-pulse 700ms ease-out}@keyframes lg-cheer-pulse{50%{filter:drop-shadow(0 0 7px #ffe59b);opacity:.7}}@media(max-width:600px){.lg-cheer{top:137px;font-size:11px;max-width:94%}.lg-cheer span{padding:5px 8px}}@media(prefers-reduced-motion:reduce){.lg-cheer-pulse{animation:none;outline:2px solid #f4d483;outline-offset:2px}}

/* 친선전(3명 선발 연전, body.league-exhibition): 남은 선수 점·현재 대진·판 사이 휴식 카드·올킬 */
.lg-ex-score { gap: 8px; padding: 0 12px; }
.lg-ex-score > i { font: 700 10px/1 "Noto Sans KR", sans-serif; opacity: .6; white-space: nowrap; }
.lg-ex-dots { display: inline-flex; gap: 4px; }
.lg-ex-dots.home { flex-direction: row-reverse; }
.lg-ex-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--lg-ink); opacity: .35; }
.lg-ex-dots i.on { background: var(--lg-gold); border-color: var(--lg-ink); opacity: 1; }
.lg-ex-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; height: 26px; background: rgba(10, 18, 48, .92); font: 700 13px/1 "Noto Sans KR", sans-serif; }
.lg-ex-who { display: flex; align-items: center; gap: 6px; padding: 0 10px; min-width: 0; white-space: nowrap; }
.lg-ex-who.home { justify-content: flex-end; }
.lg-ex-who i { font: 800 15px/1 var(--lg-font); font-style: normal; color: var(--lg-gold); }
.lg-ex-who b { overflow: hidden; text-overflow: ellipsis; }
.lg-ex-who em, .lg-rest em { font-style: normal; font-weight: 800; font-size: 11px; padding: 3px 5px; background: var(--lg-live); color: #fff; white-space: nowrap; }
.lg-ex-vs { display: flex; align-items: center; padding: 0 8px; background: var(--lg-gold); color: var(--lg-ink); font: italic 800 13px/1 var(--lg-font); }
.league-exhibition .battle-hud { top: 116px; }
.league-exhibition .lg-cheer { top: 182px; }
.league-exhibition.league-done .lg-bug-bout { background: var(--lg-gold); color: var(--lg-ink); }
.lg-rest { position: absolute; left: 50%; top: 46%; z-index: 26; transform: translate(-50%, -50%); width: min(460px, calc(100% - 24px)); pointer-events: none; animation: lg-rest-in .35s ease-out both; }
.lg-rest[hidden] { display: none; }
.lg-rest-board { background: var(--lg-ink); color: #fff; padding: 14px 18px 16px; box-shadow: inset 0 4px 0 var(--lg-gold), 0 10px 30px rgba(0, 0, 0, .45); text-align: center; word-break: keep-all; }
.lg-rest-kick { margin: 0 0 10px; font: 800 14px/1 var(--lg-font); letter-spacing: .16em; color: var(--lg-gold); }
.lg-rest ul { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.lg-rest li { display: grid; gap: 4px; justify-items: center; }
.lg-rest li small { font: 700 12px/1.2 "Noto Sans KR", sans-serif; color: #C3CAE0; }
.lg-rest li b { font: 900 18px/1.2 "Noto Sans KR", sans-serif; }
.lg-rest li.vs { font: italic 800 24px/1 var(--lg-font); color: var(--lg-gold); }
.lg-rest-note { margin: 10px 0 0; font: 600 13px/1.5 "Noto Sans KR", sans-serif; color: #C3CAE0; }
.lg-rest-note b { color: #fff; }
.lg-rest-hp { display: grid; gap: 6px; }
.lg-rest-hp > b { font: 900 20px/1.2 "Noto Sans KR", sans-serif; }
.lg-rest-hp span { font: 700 16px/1 var(--lg-font); color: #C3CAE0; }
.lg-rest-hp strong { font: 800 26px/1 var(--lg-font); color: #fff; }
.lg-rest-hp span em { background: var(--lg-gold); color: var(--lg-ink); font-size: 12px; vertical-align: 4px; }
.lg-rest-hp > i { position: relative; display: block; height: 12px; background: #1B285C; }
.lg-rest-hp > i s, .lg-rest-hp > i u { position: absolute; left: 0; top: 0; bottom: 0; text-decoration: none; }
.lg-rest-hp > i u { background: var(--lg-gold); animation: lg-rest-gain 1s .5s ease-out both; }
.lg-rest-hp > i s { background: #2FBF71; z-index: 1; }
@keyframes lg-rest-in { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes lg-rest-gain { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.league-exhibition .lg-final-score span { gap: 6px; }
.league-exhibition .lg-final-score small { font: 700 12px/1.2 "Noto Sans KR", sans-serif; color: #C3CAE0; }
.league-exhibition .lg-final-score .lg-ex-dots i { border-color: #C3CAE0; }
.lg-final-ak { display: inline-block; margin: 0 0 10px; padding: 6px 14px; background: var(--lg-gold); color: var(--lg-ink); font: 900 22px/1 "Noto Sans KR", sans-serif; letter-spacing: .04em; }
@media (max-width: 760px) {
  .lg-ex-score > i { display: none; }
  .lg-ex-dots i { width: 9px; height: 9px; border-width: 1.5px; }
  .lg-ex-score { padding: 0 8px; gap: 6px; }
  .lg-ex-sub { height: 22px; font-size: 11px; }
  .lg-ex-who { padding: 0 6px; gap: 4px; }
  .lg-ex-who em { font-size: 9px; padding: 2px 3px; }
  .league-exhibition .battle-hud { top: 94px; }
  .league-exhibition .lg-cheer { top: 158px; }
  .lg-rest li b { font-size: 15px; }
  .lg-rest { top: 58%; }
  .lg-rest-hp strong { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .lg-rest, .lg-rest-hp > i u { animation: none; } }
.league-exhibition .lg-final-score .lg-ex-dots { display: inline-flex; flex-direction: row; gap: 5px; }
@media (max-width: 760px) {
  .league-exhibition .lg-final { padding: 8px; }
  .league-exhibition .lg-final-board { padding: 14px 12px 14px; }
  .league-exhibition .lg-final-score { margin: 10px 0 6px; gap: 8px; }
  .league-exhibition .lg-final-score .crest { width: 40px; height: 40px; }
  .league-exhibition .lg-final-score span { font-size: 13px; }
  .league-exhibition .lg-final-line { font-size: 13px; margin-bottom: 10px; }
  .league-exhibition .lg-final-actions a { min-height: 40px; padding: 0 10px; font-size: 13px; }
}

/* AI 감독(턴 지휘) 친선전(body.league-commanded): 대기(전술 준비 중)·판 시작 전술 카드·결정적 순간 말풍선·스코어버그 지휘 칩·결과 보드 감독의 한 수.
   자동 예고(다음 행동)는 그림자 자동 명령이라 지휘 판에서는 숨긴다. 말풍선 문구 = reason_code 정해진 문구(league/ai.js REASON). */
.league-commanded .auto-next-move { display: none !important; }
/* 지휘 판의 '다음 행동'(battle.js 상대 의도 예고) = 자동 정책 그림자라 실제 감독 명령과 다르고, 사람 지휘에선 상대 명령을 미리 알려 주게 된다 → 숨김 */
.league-commanded #turn-info { display: none !important; }
.lg-cmd-chip { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 2px 5px; background: var(--lg-gold); color: var(--lg-ink); font: 800 11px/1 "Noto Sans KR", sans-serif; white-space: nowrap; }
.lg-cmd-chip i, .lg-ex-who .lg-cmd-chip i { font: italic 800 11px/1 var(--lg-font); letter-spacing: .04em; color: inherit; }
.lg-cmd-chip.is-auto { background: rgba(255, 255, 255, .16); color: #C3CAE0; }
.lg-cmd-wait { position: absolute; left: 50%; top: 42%; z-index: 27; transform: translate(-50%, -50%); width: min(420px, calc(100% - 24px)); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.lg-cmd-wait[hidden], .lg-tac[hidden], .lg-talk[hidden] { display: none; }
.lg-tac { position: absolute; left: 50%; top: 46%; z-index: 26; transform: translate(-50%, -50%); width: min(520px, calc(100% - 24px)); pointer-events: none; animation: lg-rest-in .35s ease-out both; }
.lg-tac-board { background: var(--lg-ink); color: #fff; padding: 14px 16px 16px; box-shadow: inset 0 4px 0 var(--lg-gold), 0 10px 30px rgba(0, 0, 0, .45); text-align: center; word-break: keep-all; }
.lg-tac ul { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.lg-tac li { display: grid; gap: 6px; justify-items: center; min-width: 0; padding: 10px 6px 12px; background: #111B44; box-shadow: inset 0 -4px 0 var(--c, var(--lg-gold)); }
.lg-tac li.vs { padding: 0; background: none; box-shadow: none; font: italic 800 24px/1 var(--lg-font); color: var(--lg-gold); }
.lg-tac li small { font: 700 12px/1.25 "Noto Sans KR", sans-serif; color: #C3CAE0; }
.lg-tac li b { font: 900 22px/1.1 "Noto Sans KR", sans-serif; }
.lg-tac li em { font: 700 13px/1.3 "Noto Sans KR", sans-serif; font-style: normal; color: var(--lg-gold); }
.lg-tac-icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--lg-gold); color: var(--lg-ink); }
.lg-tac li:not(.is-ai) .lg-tac-icon { background: #1B285C; color: #C3CAE0; }
.lg-tac li:not(.is-ai) b { color: #C3CAE0; font-size: 18px; }
.lg-tac-icon svg { width: 28px; height: 28px; }
.lg-talk { position: absolute; left: 0; right: 0; top: 34%; z-index: 25; display: flex; justify-content: space-between; gap: 12px; padding: 0 4%; pointer-events: none; }
.lg-say { position: relative; margin: 0; max-width: min(46%, 300px); padding: 10px 14px 11px; background: #fff; color: var(--lg-ink); box-shadow: inset 0 -4px 0 var(--c, var(--lg-gold)), 0 8px 22px rgba(0, 0, 0, .35); display: grid; gap: 4px; word-break: keep-all; animation: lg-say-in .25s cubic-bezier(.22, .8, .3, 1) both; }
.lg-say.away { margin-left: auto; text-align: right; }
.lg-say::after { content: ""; position: absolute; bottom: -10px; left: 22px; border: 10px solid transparent; border-bottom: 0; border-top-color: #fff; }
.lg-say.away::after { left: auto; right: 22px; }
.lg-say small { font: 800 11px/1.2 "Noto Sans KR", sans-serif; color: #4A557E; }
.lg-say b { font: 900 18px/1.25 "Noto Sans KR", sans-serif; }
@keyframes lg-say-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.lg-final-move { display: grid; gap: 4px; margin: 0 auto 12px; max-width: 520px; padding: 10px 14px; background: #111B44; box-shadow: inset 4px 0 0 var(--c, var(--lg-gold)); text-align: left; font: 700 15px/1.4 "Noto Sans KR", sans-serif; color: #fff; word-break: keep-all; }
.lg-final-move small { font: 800 12px/1 var(--lg-font); letter-spacing: .14em; color: var(--lg-gold); }
.lg-final-move b { color: var(--lg-gold); }
@media (max-width: 760px) {
  .lg-tac li b { font-size: 17px; }
  .lg-tac li small, .lg-tac li em { font-size: 11px; }
  .lg-tac-icon { width: 34px; height: 34px; } .lg-tac-icon svg { width: 22px; height: 22px; }
  .lg-tac { top: 56%; } .lg-cmd-wait { top: 56%; }
  .lg-talk { top: 40%; padding: 0 8px; gap: 6px; }
  .lg-say { max-width: 49%; padding: 7px 9px 8px; } .lg-say b { font-size: 14px; } .lg-say small { font-size: 10px; }
  .lg-cmd-chip { font-size: 9px; padding: 2px 3px; } .lg-ex-who .lg-cmd-chip i { font-size: 9px; }
  .lg-final-move { font-size: 13px; padding: 8px 10px; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .lg-tac, .lg-say { animation: none; } }

/* ── 하단 해설 바(.auto-panel) ─────────────────────────────────────────────
   리그 판은 [멈추기]·[다음 행동]이 없어서 해설이 바 전체를 쓴다(빈 칸을 남기지 않게 열을 하나로 접는다).
   사람 직접 지휘(body.league-human)일 때만 바를 둘로 나눈다: 왼쪽 = 해설, 오른쪽 = 내 명령 판(.lg-dock).
   명령 판이 해설을 덮지 않는다 — 둘은 같은 격자의 다른 칸이라 겹칠 수 없다. */
.league-mode .auto-panel.auto-panel { grid-template-columns: minmax(0, 1fr); }
.league-mode .auto-panel .commentary { grid-column: 1 / -1; }
.lg-dock { display: none; }
.league-human .auto-panel.auto-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: stretch; }
.league-human .auto-panel .commentary { grid-column: 1; grid-row: 1; }
.league-human .lg-dock { display: grid; grid-column: 2; grid-row: 1; min-width: 0; min-height: 132px; }
.lg-dock > * { grid-area: 1 / 1; min-width: 0; }
.lg-human-idle { display: grid; place-items: center; margin: 0; padding: 12px; border-radius: 16px; background: var(--lg-ink); color: #8D97BA; box-shadow: inset 0 4px 0 #1B285C; font: 700 14px/1.35 "Noto Sans KR", sans-serif; text-align: center; word-break: keep-all; }
.lg-human:not([hidden]) ~ .lg-human-idle { display: none; }
.lg-cmd-chip.is-human { background: #fff; color: var(--lg-ink); }
.lg-human { position: relative; display: grid; align-content: start; gap: 8px; padding: 10px 12px 12px; border-radius: 16px; background: var(--lg-ink); color: #fff; box-shadow: inset 0 4px 0 var(--lg-gold), 0 6px 0 #0006; }
.lg-human[hidden] { display: none; }
.lg-human-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; word-break: keep-all; }
.lg-human-kick { font: 800 14px/1 var(--lg-font); letter-spacing: .14em; color: var(--lg-gold); }
.lg-human-head b { font: 900 16px/1.2 "Noto Sans KR", sans-serif; }
.lg-human-head small { flex: 1 1 auto; min-width: 0; font: 600 12px/1.35 "Noto Sans KR", sans-serif; color: #C3CAE0; text-align: right; }
.lg-human-cmds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lg-hcmd { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 64px; padding: 8px 4px; border: 0; border-radius: 10px; background: var(--lg-gold); color: var(--lg-ink); font: 900 16px/1.1 "Noto Sans KR", sans-serif; cursor: pointer; box-shadow: inset 0 -4px 0 rgba(10, 18, 48, .25); }
.lg-hcmd svg { width: 22px; height: 22px; }
.lg-hcmd small { font: 700 11px/1.1 "Noto Sans KR", sans-serif; }
.lg-hcmd:hover:not(:disabled) { filter: brightness(1.06); }
.lg-hcmd:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lg-hcmd:disabled { background: #1B285C; color: #8D97BA; cursor: not-allowed; box-shadow: none; }
.lg-human.is-sent .lg-hcmd { opacity: .55; }
.lg-human-note { margin: 0; min-height: 0; font: 700 13px/1.35 "Noto Sans KR", sans-serif; color: var(--lg-gold); }
.lg-human-note:empty { display: none; }
@media (max-width: 760px) {
  .league-human .auto-panel.auto-panel { grid-template-columns: minmax(0, 1fr); }
  .league-human .auto-panel .commentary { grid-row: 1; }
  .league-human .lg-dock { grid-column: 1; grid-row: 2; min-height: 168px; }
  .lg-human { padding: 8px; gap: 6px; }
  .lg-human-head small { flex-basis: 100%; text-align: left; font-size: 11px; }
  .lg-human-cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .lg-hcmd { min-height: 48px; grid-template-columns: auto auto; justify-content: center; gap: 0 6px; font-size: 14px; }
  .lg-hcmd small { grid-column: 1 / -1; }
  .lg-hcmd svg { width: 18px; height: 18px; }
  .lg-human-head b { font-size: 14px; }
}
/* 방송 모드(1920×1080 설계 px): 하단 바 = 해설 바(사람 지휘가 아니면 기존 96px 한 줄), 사람 지휘면 136px로 키워 왼쪽 해설 카드 + 오른쪽 명령 카드.
   채팅 자리(1459,648~)를 피해 바는 77~1443px 안에서만 쓴다. */
body[data-broadcast].league-mode .auto-panel .commentary-tab { left: 36px; }
body[data-broadcast].league-human .auto-panel.auto-panel { top: 901px; height: 136px; padding: 0; gap: 16px; grid-template-columns: 540px minmax(0, 1fr); background: none; border: 0; box-shadow: none; }
body[data-broadcast].league-human .auto-panel .commentary { position: relative; box-sizing: border-box; height: 136px; padding: 24px 24px 12px; border: 3px solid var(--ui-rim); border-radius: 24px; background: var(--ui-panel-hud); box-shadow: 0 4px 0 var(--ui-step-color); }
body[data-broadcast].league-human .auto-panel .commentary-tab { top: 0; left: 24px; }
body[data-broadcast].league-human .auto-panel .commentary-line { font-size: 27px; line-height: 33px; -webkit-line-clamp: 3; line-clamp: 3; }
body[data-broadcast].league-human .lg-dock { min-height: 0; height: 136px; }
body[data-broadcast].league-human .lg-human, body[data-broadcast].league-human .lg-human-idle { box-sizing: border-box; height: 136px; padding: 12px 16px 14px; gap: 8px; border-radius: 24px; }
body[data-broadcast].league-human .lg-human-idle { font-size: 24px; }
body[data-broadcast].league-human .lg-human-head { flex-wrap: nowrap; gap: 12px; }
body[data-broadcast].league-human .lg-human-kick { font-size: 24px; white-space: nowrap; }
body[data-broadcast].league-human .lg-human-head b { font-size: 26px; white-space: nowrap; }
body[data-broadcast].league-human .lg-human-head small { font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body[data-broadcast].league-human .lg-human-cmds { gap: 12px; }
body[data-broadcast].league-human .lg-hcmd { min-height: 0; height: 66px; grid-template-columns: auto auto; justify-content: center; gap: 0 10px; padding: 0 8px; border-radius: 16px; font-size: 26px; }
body[data-broadcast].league-human .lg-hcmd svg { width: 30px; height: 30px; }
body[data-broadcast].league-human .lg-hcmd small { grid-column: 1 / -1; font-size: 15px; }
body[data-broadcast].league-human .lg-human-note { position: absolute; top: 12px; right: 16px; max-width: 58%; padding-left: 10px; background: var(--lg-ink); font-size: 20px; line-height: 1.2; }

/* 친선: 아레나 위 길잡이(팀 홈으로 · 매치센터) — 방송 모드에서는 숨김 */
.lg-back { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0 0 10px; padding: 0 14px; min-height: 44px; background: var(--lg-ink); font: 700 14px/1.2 "Noto Sans KR", sans-serif; }
.lg-back[hidden], .broadcast .lg-back { display: none; }
.lg-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: #C3CAE0; text-decoration: none; }
.lg-back a.lg-back-home { color: var(--lg-gold); }
.lg-back a b { color: #fff; }
.lg-back a:hover { text-decoration: underline; }
.lg-back a:focus-visible { outline: 3px solid var(--lg-gold); outline-offset: 2px; }

/* 무대 준비 중 로딩(html.lg-boot: index.html 머리에서 켜고 battle.js(본편)·league-battle.js(리그, html.lg-boot-lg)가 무대가 채워지면 끈다) — 스크립트가 도는 동안 빈 무대·빈 HUD가 보이지 않게 아레나를 덮는다 */
html.lg-boot .arena::after { content: "경기장을 준비하고 있어요"; position: absolute; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; padding-top: 110px; box-sizing: border-box; text-align: center; color: #fff; font: 800 clamp(15px, 2.2cqw, 30px)/1.3 "Noto Sans KR", sans-serif; letter-spacing: .02em; background: radial-gradient(ellipse at 50% 42%, #1B285C 0, #0A1230 72%); opacity: 1; transition: opacity .25s ease; }
html.lg-boot .arena::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 81; width: 52px; height: 52px; margin: -56px 0 0 -26px; box-sizing: border-box; border: 5px solid rgba(255, 198, 41, .25); border-top-color: #FFC629; border-radius: 50%; animation: lg-boot-spin .9s linear infinite; transition: opacity .25s ease; }
html.lg-boot-out .arena::after, html.lg-boot-out .arena::before { opacity: 0; }
html.lg-boot .battle-controls, html.lg-boot .lg-bug, html.lg-boot-lg .battle-heading { visibility: hidden; }
@keyframes lg-boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.lg-boot .arena::before { animation: none; border-color: #FFC629; } html.lg-boot .arena::after { transition: none; } }