/* 17-2 방송 모드(ds 8-3): body[data-broadcast]. 무대는 뷰포트를 채우는 16:9, 무대 위 UI는 1920×1080 설계 px를 --bc-scale(broadcast.js)로 줄인다.
   채팅 자리(1459,648 ~ 1920,1080)에는 HUD·버튼·자막·배너·결과 보드를 두지 않는다. */
:root{--bc-scale:.6667}
/* 헤더 버튼(일반 화면) */
.broadcast-toggle{--step:var(--ui-step);display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;border:3px solid var(--ui-rim);border-radius:var(--ui-r-pill);background:#cfe9fb;box-shadow:0 var(--step) 0 var(--ui-sky-step);color:var(--ui-ink-strong);font:inherit;font-size:15px;font-weight:900;cursor:pointer;transition:transform var(--ui-t-release) var(--ui-ease-out),box-shadow var(--ui-t-release) var(--ui-ease-out)}
.broadcast-toggle svg{width:20px;height:20px;flex:none}
.broadcast-toggle:active{transform:translateY(2px);--step:var(--ui-step-press)}
@media(hover:hover){.broadcast-toggle:hover{transform:translateY(-2px);--step:var(--ui-step-hover)}}
@media(max-width:540px){.broadcast-toggle{display:none}}
.broadcast-off{--step:3px;pointer-events:auto;position:relative;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:3px solid var(--ui-rim);background:var(--ui-panel-hud);box-shadow:0 var(--step) 0 var(--ui-step-color);color:var(--ui-ink-strong);cursor:pointer}
.broadcast-off svg{width:24px;height:24px}
body[data-broadcast] .broadcast-off:not([hidden]){display:grid}
@media(hover:hover){body[data-broadcast] .broadcast-off{opacity:0;transition:opacity 120ms}body[data-broadcast] .arena:is(:hover,:focus-within) .broadcast-off{opacity:1}}

/* 페이지 크롬 숨김 · 레터박스 */
body[data-broadcast]{background:#0b1220;overflow:hidden}
body[data-broadcast] :is(.topbar,.intro,.mode-nav,.mode-support,#care-view,.card-lore,footer,.battle-mode-picker,.battle-header,.recover-balance,.battle-footnote,.battle-caption){display:none!important}
body[data-broadcast] .app-shell{margin:0;padding:0;max-width:none;min-height:0}
/* 무대: 16:9 가운데, 반경·테두리·그림자 없음 */
body[data-broadcast] .arena{position:fixed;z-index:1;left:calc((100vw - 1920px*var(--bc-scale))/2);top:calc((100vh - 1080px*var(--bc-scale))/2);width:calc(1920px*var(--bc-scale));height:calc(1080px*var(--bc-scale));margin:0;border:0;border-radius:0;box-shadow:none}
/* 몬스타·발판: 내 친구 중심 27%, 상대 중심 60%(오른쪽 끝 < 채팅 자리), 폭 26% */
body[data-broadcast] .fighter{width:26%;max-width:none;bottom:16%}
body[data-broadcast] .fighter-player{left:14%}
body[data-broadcast] .fighter-enemy{left:47%;right:auto}
body[data-broadcast] .arena-platform{width:32%;bottom:16%}
body[data-broadcast] .platform-left{left:11%}
body[data-broadcast] .platform-right{left:44%;right:auto}
body[data-broadcast] .venue-pitch{--cx:43.5%}
/* A형 HUD 2줄(653×84) · 중앙 묶음(428×84): 설계 px를 배율로 */
body[data-broadcast] .battle-hud{left:0;right:auto;top:0;width:1920px;box-sizing:border-box;padding:43px 77px 0;gap:16px;grid-template-columns:653px minmax(0,1fr) 653px;transform:scale(var(--bc-scale));transform-origin:0 0}
body[data-broadcast] .hp-card{--hud-icon:40px;--hud-bw:3px;--hud-r:22px;--hud-pad:6px 14px;--hud-col-gap:12px;--hud-row-gap:6px;--hud-name:30px;--hud-num:24px;--hud-chip:20px;--hud-chip-h:28px;--hud-hp:14px;--hud-gauge:10px;--hud-numtag-h:28px;--hud-numtag-overlap:12px;--hud-h:84px;grid-template-columns:var(--hud-icon) minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:32px 28px}
body[data-broadcast] .enemy-hud{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) var(--hud-icon)}
body[data-broadcast] .hp-card>.hud-card-btn{grid-row:1/3}
body[data-broadcast] .player-hud>.hud-top{grid-column:2/4}
body[data-broadcast] .player-hud>.hud-bar{grid-column:2;grid-row:2}
body[data-broadcast] .player-hud>.gauge-row{grid-column:3;grid-row:2;margin-left:4px}
body[data-broadcast] .enemy-hud>.hud-card-btn{grid-column:3}
body[data-broadcast] .enemy-hud>.hud-top{grid-column:1/3}
body[data-broadcast] .enemy-hud>.hud-bar{grid-column:2;grid-row:2}
body[data-broadcast] .enemy-hud>.gauge-row{grid-column:1;grid-row:2;margin-right:4px}
body[data-broadcast] .hp-card .hud-top strong{line-height:32px;min-width:4em}
body[data-broadcast] .hp-card .gnul-tier{padding:0 10px}
body[data-broadcast] .hp-card .gnul-signature i{width:16px;height:16px}
body[data-broadcast] .hp-card .chip-row{gap:6px}
body[data-broadcast] .hp-card :is(.first-badge,.trait-chip,.state-chip){padding:0 10px;max-width:180px;gap:5px}
body[data-broadcast] .hp-card .first-badge svg,body[data-broadcast] .hp-card .trait-chip::before,body[data-broadcast] .hp-card .state-chip::before{width:20px;height:20px}
body[data-broadcast] .hud-num{min-width:104px;padding:0 10px;box-shadow:0 0 0 3px var(--hp)}
body[data-broadcast] .hp-card .gauge-icon svg{width:24px;height:24px}
body[data-broadcast] .hp-card .gauge-row.full .gauge-value{font-size:22px;padding:0 10px}
body[data-broadcast] .hud-card-btn::after{width:18px;height:18px;background-size:11px}
body[data-broadcast] .hud-center{gap:4px}
body[data-broadcast] .hud-center-row{height:44px;gap:8px}
body[data-broadcast] .round-label{height:36px;min-width:96px;padding:0 14px;font-size:24px}
body[data-broadcast] .battle-mute::before{width:26px;height:26px;-webkit-mask-size:26px;mask-size:26px}
body[data-broadcast] .venue-badge{height:36px;padding:0 16px 0 10px;gap:8px;max-width:428px}
body[data-broadcast] .venue-badge i{width:14px;height:14px}
body[data-broadcast] .venue-badge b{font-size:20px}
body[data-broadcast] .venue-badge span{font-size:20px}
/* 배너·기술 이름·컷인 띠·떠오르는 라벨(v1 × 1.6) */
body[data-broadcast] .battle-banner{top:40%;font-size:calc(88px*var(--bc-scale));-webkit-text-stroke-width:calc(10px*var(--bc-scale))}
body[data-broadcast] .skill-banner strong{font-size:calc(100px*var(--bc-scale))}
body[data-broadcast] .skill-banner{max-width:73%}
body[data-broadcast] .cutin-band:not(.full){left:4.01%;right:4.01%;top:22.04%;height:35.93%}
body[data-broadcast] .arena .fx-label{font-size:calc(54px*var(--bc-scale))}
body[data-broadcast] .arena .fx-label.big{font-size:calc(86px*var(--bc-scale))}
body[data-broadcast] .arena .fx-label.blocked{font-size:calc(38px*var(--bc-scale))}
body[data-broadcast] .arena .fx-label.gauge{font-size:calc(26px*var(--bc-scale))}
body[data-broadcast] .arena .fx-label.gauge.full{font-size:calc(29px*var(--bc-scale))}
body[data-broadcast] .arena :is(.fx-label.trait,.fx-label.rest){font-size:calc(29px*var(--bc-scale))}
body[data-broadcast] .arena .fx-label.heal{font-size:calc(35px*var(--bc-scale))}
body[data-broadcast] .arena .fx-label.note{font-size:calc(21px*var(--bc-scale))}
/* 시작 판·결과 보드(v1 × 1.33, 오른쪽 끝 1320 < 채팅 자리) */
body[data-broadcast] .arena-start{top:46%;zoom:calc(var(--bc-scale)*1.5)}
body[data-broadcast] .battle-result{padding:0;justify-content:center}
body[data-broadcast] .result-board{zoom:calc(var(--bc-scale)*1.333);max-height:calc(900px/1.333)}

/* 무대 아래 UI 층: 1920×1080 설계 상자를 무대와 같은 자리에 겹친다(글자·버튼만 누름) */
body[data-broadcast] .battle-controls{position:fixed;z-index:2;left:calc((100vw - 1920px*var(--bc-scale))/2);top:calc((100vh - 1080px*var(--bc-scale))/2);width:1920px;height:1080px;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:scale(var(--bc-scale));transform-origin:0 0;pointer-events:none}
body[data-broadcast] .battle-controls>*{pointer-events:auto}
body[data-broadcast]:has(#battle-result:not([hidden])) .battle-controls{visibility:hidden}
/* NEXT MOVE 말풍선(1190,139 653×≤96): 꼬리는 아랫변 왼쪽 30%에서 아래로(상대 몬스타 쪽) */
body[data-broadcast] .turn-info{position:absolute;left:1190px;top:139px;width:653px;max-height:96px;min-height:0;box-sizing:border-box;margin:0;padding:10px 18px;gap:14px;border-radius:24px;transform-origin:30% 110%}
body[data-broadcast] .turn-info::before{bottom:auto;top:100%;right:auto;left:30%;width:28px;height:20px;clip-path:polygon(0 0,100% 0,20% 100%)}
body[data-broadcast] .turn-info::after{bottom:auto;top:calc(100% - 3px);right:auto;left:calc(30% + 5px);width:18px;height:14px;clip-path:polygon(0 0,100% 0,20% 100%)}
body[data-broadcast] .intent-icon{width:56px;height:56px;border-width:3px}
body[data-broadcast] .intent-icon[data-action]::before{width:31px;height:31px}
body[data-broadcast] .turn-info .eyebrow{font-size:20px;margin-bottom:2px}
body[data-broadcast] .turn-info p{font-size:28px;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* 하단 슬림 바(77,941 1366×96): 수동 = 명령 4버튼 가로 한 줄 */
body[data-broadcast] .skill-buttons{position:absolute;left:77px;top:941px;width:1366px;height:96px;box-sizing:border-box;padding:8px 12px;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--ui-panel-hud);border:3px solid var(--ui-rim);border-radius:24px;box-shadow:0 4px 0 var(--ui-step-color)}
body[data-broadcast] .skill-buttons button{min-height:0;height:74px;margin:0;padding:6px 14px;column-gap:12px;row-gap:0;border-radius:18px;--step:3px}
body[data-broadcast] .skill-icon{width:48px;height:48px}
body[data-broadcast] .skill-icon svg{width:28px;height:28px}
body[data-broadcast] .skill-buttons strong{font-size:28px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-broadcast] .skill-buttons small{font-size:20px;font-weight:800;line-height:1.2;min-height:0;-webkit-line-clamp:1;line-clamp:1;white-space:nowrap;text-overflow:ellipsis;display:block}
body[data-broadcast] .skill-buttons button:is([data-preview=resting]){padding:7px 15px}
@media(prefers-reduced-motion:reduce){.broadcast-toggle{transition:box-shadow var(--ui-t-press)}.broadcast-toggle:is(:hover,:active){transform:none}}