/* 경기 화면 추가 규칙: app.css 다음에 읽는다(다시 보기·자막 띠·골 연출·중계 판 시각) */

/* 조작 줄: 속도 단추 글자가 두 줄로 꺾이지 않게, 최소 너비 44 */
.match .spd button, .match .camseg button { white-space: nowrap; min-width: 44px; min-height: 36px; display: inline-grid; place-items: center; }
.match .spd button svg { width: 18px; height: 18px; }
.match .ctrl .btn { white-space: nowrap; }

/* 감독 지시: 단추 하나로 접고 위로 펼친다 */
.match .shouts { position: relative; flex-wrap: nowrap; }
.match .shouts .orders { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: rgba(6, 10, 18, .86); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.match .shouts .orders span { font-size: 10px; transition: transform .2s; }
.match .shouts .orders.on span { transform: rotate(180deg); }
.match .olist { position: absolute; left: 0; bottom: calc(100% + 8px); display: grid; gap: 4px; padding: 6px; min-width: 150px; border-radius: 14px; }
.match .olist[hidden] { display: none; }
.match .olist button { min-height: 44px; padding: 0 14px; border-radius: 10px; background: transparent; border: 0; box-shadow: none; color: #f2f5fa; font-size: 14px; font-weight: 700; text-align: left; white-space: nowrap; }
.match .olist button:hover, .match .olist button:focus-visible { background: rgba(255, 255, 255, .08); }

/* 오른쪽 판: 맨 위 음성·소리 아이콘, 점수판, 시간 줄 */
.match .mx-side { grid-template-rows: auto auto auto auto auto minmax(0, 1fr); }
.mx-top { display: flex; justify-content: flex-end; gap: 4px; padding: 4px 6px 0; }
.mx-top .ib { width: 44px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2, #a7b1c2); }
.mx-top .ib svg { width: 20px; height: 20px; }
.mx-top .ib .x { display: none; }
.mx-top .ib:not(.on) .x { display: inline; }
.mx-top .ib.on { color: #fff; background: rgba(255, 255, 255, .08); }
.mx-top .ib[hidden] { display: none; }
.match .mx-score { padding: 0 10px 6px; background: none; }
.match .mx-score .t .crest { width: 44px; height: 50px; }
.match .mx-score .t b { font-size: 13px; font-weight: 700; }
.match .mx-score .c { gap: 6px; }
.mx-timeline { position: relative; margin: 0 14px 6px; height: 30px; }
.mx-timeline .tl-bar { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.mx-timeline .tl-bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #0a0f18; }
.mx-timeline .tl-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(200, 255, 46, .35), #c8ff2e); }
.mx-timeline .tl-m { position: absolute; left: 0; right: 0; top: 0; height: 20px; }
.mx-timeline .tl-m i { position: absolute; top: 3px; transform: translateX(-50%); width: 7px; height: 10px; border-radius: 1.5px; box-shadow: 0 0 0 1.5px #0a0f18; }
.mx-timeline .tl-m i.yc { background: #ffd23a; }
.mx-timeline .tl-m i.rc { background: #ff3b45; }
.mx-timeline .tl-m i.sb { width: 4px; height: 8px; top: 4px; background: var(--tc); border-radius: 2px; }
.mx-timeline .tl-m i.gl { top: 1px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff 0 32%, #1b2230 34% 46%, #fff 48%); box-shadow: 0 0 0 2px var(--tc), 0 0 0 3.5px #0a0f18; z-index: 1; }
.mx-timeline .tl-l { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font: 700 11px/1 var(--num, sans-serif); color: var(--ink-3, #6e7a8e); }

/* 경기장 조명: 가장자리를 어둡게(캔버스 대신 합성 단계에서 칠해 휴대폰 부담을 줄인다) */
.match .mx-field::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;  will-change: transform; background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(0, 4, 10, .4) 100%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .14)); }
.match.rp-on .mh, .match.rp-on .cap { visibility: hidden; }

/* 골 다시 보기: 위아래 검은 띠, 왼쪽 위 표시, 오른쪽 아래 건너뛰기 */
.mx-rp { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.mx-rp[hidden] { display: none; }
.mx-rp::before, .mx-rp::after { content: ''; position: absolute; left: 0; right: 0; height: 9%; background: #000; animation: rp-bar .35s ease both; }
.mx-rp::before { top: 0; }
.mx-rp::after { bottom: 0; }
.mx-rp .rp-tag { position: absolute; z-index: 1; top: calc(9% + 10px); left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 6px; background: rgba(6, 10, 18, .82); font: 800 13px/1 var(--num, sans-serif); letter-spacing: .06em; color: #fff; }
.mx-rp .rp-tag i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d55; box-shadow: 0 0 0 3px rgba(255, 77, 85, .25); animation: rp-dot 1s ease-in-out infinite; }
.mx-rp [data-rskip] { position: absolute; z-index: 1; right: 14px; bottom: calc(9% + 10px); pointer-events: auto; background: rgba(6, 10, 18, .86); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
@keyframes rp-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rp-dot { 50% { opacity: .35; } }

/* 킥오프·후반 시작·경기 종료 자막 띠 */
.mx-banner { position: absolute; z-index: 4; left: 50%; top: 38%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 12px 34px 13px; pointer-events: none; white-space: nowrap;
  background: linear-gradient(90deg, rgba(5, 9, 16, 0), rgba(5, 9, 16, .9) 18%, rgba(5, 9, 16, .9) 82%, rgba(5, 9, 16, 0)); animation: bn-in 2.6s ease both; }
.mx-banner::before, .mx-banner::after { content: ''; position: absolute; left: 12%; right: 12%; height: 2px; background: var(--acc, #c6ff2e); }
.mx-banner::before { top: 0; }
.mx-banner::after { bottom: 0; }
.mx-banner b { font: italic 900 34px/1 var(--num, sans-serif); letter-spacing: .04em; color: #fff; }
.mx-banner span { font-size: 13px; font-weight: 800; color: #c9d3e6; }
@keyframes bn-in { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); } 12% { opacity: 1; clip-path: inset(0 0 0 0); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* 골 연출: 넣은 팀 색 띠가 왼쪽에서 들어와 화면을 가로지르고 1.8초 뒤 오른쪽으로 빠진다 */
.match .goalfx { display: grid; align-items: center; font-size: inherit; text-shadow: none; animation: none; overflow: hidden; background: none; }
.match .goalfx .gb { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 24px; background: var(--tc); color: var(--ti, #fff); transform: skewY(-4deg); box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 14px 40px rgba(0, 0, 0, .5); animation: gf-band 1.8s cubic-bezier(.2, .8, .2, 1) both; }
.match .goalfx .gb > * { transform: skewY(4deg); }
.match .goalfx b { font: italic 800 56px/1 var(--num, sans-serif); letter-spacing: .02em; }
.match .goalfx .gn { font-size: 22px; font-weight: 900; }
.match .goalfx .gm { padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .28); color: #fff; font: 800 18px/1 var(--num, sans-serif); }
@keyframes gf-band { 0% { transform: skewY(-4deg) translateX(-105%); } 16% { transform: skewY(-4deg) translateX(0); } 84% { transform: skewY(-4deg) translateX(0); opacity: 1; } 100% { transform: skewY(-4deg) translateX(105%); opacity: .6; } }
@media (max-height: 430px) { .match .goalfx b { font-size: 44px; } .mx-banner b { font-size: 26px; } }
/* 하프타임 대화상자: 휴대폰 높이에서도 아래 버튼이 잘리지 않게 골 목록은 촘촘히, 통계는 안에서 굴린다 */
.ht-goals { margin-bottom: 8px; gap: 3px; }
.ht-goals > div { padding: 5px 12px; font-size: 14px; }
.ht-stats { max-height: 34vh; overflow-y: auto; }

/* 중계 판: 점수판·점유율 막대·말풍선 */
.match .mx-score .clk { font: 700 16px/1 var(--num, sans-serif); padding: 0; border-radius: 0; background: none; color: #c8ff2e; letter-spacing: .02em; white-space: nowrap; }
.match .mini3 span { font-size: 13px; }
.match .msg b { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.match .msg b em { font-style: normal; font: 700 12px/1 var(--num, sans-serif); color: var(--ink-3, #6e7a8e); }
.match .msg .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.match .msg .av:has(img) { background: #0f1622; overflow: hidden; }
.match .msg.goal > div { border-left: 4px solid var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, #121d33), #121d33 75%); }
.match .msg.goal p { font-weight: 900; }
.match .msg.goal b em { padding: 3px 6px; border-radius: 5px; background: #06090f; color: #fff; box-shadow: inset 0 0 0 1.5px var(--tc); }
.match .mx-score .sc { font: 800 40px/1 var(--num, sans-serif); letter-spacing: .02em; padding: 5px 12px 4px; border-radius: 8px; background: linear-gradient(180deg, #ffffff, #dfe5ee); box-shadow: 0 3px 0 #000, inset 0 -2px 0 rgba(0, 0, 0, .12); font-variant-numeric: tabular-nums; }
.match .mx-score .clk { font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.match .mx-poss .pb { height: 8px; border-radius: 999px; gap: 3px; background: transparent; }
.match .mx-poss .pb i { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.match .mx-poss .pl b { font-variant-numeric: tabular-nums; }
.match .msg > div { border-radius: 3px 12px 12px 12px; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.match .msg { grid-template-columns: 30px minmax(0, 1fr); }
.match .msg .av { width: 30px; height: 30px; font-size: 13px; border-width: 1.5px; }
.match .msg p { font-size: 12.5px; line-height: 1.5; }
.match .msg.imp > div { border-left: 3px solid var(--acc, #c6ff2e); }

/* 선방 연출: 막은 팀 색 작은 띠가 위쪽에서 1.5초 */
.savefx { position: absolute; z-index: 4; left: 50%; top: 31%; transform: translateX(-50%); pointer-events: none; }
.savefx .sb { display: flex; align-items: center; gap: 12px; padding: 8px 20px; border-left: 6px solid var(--tc); border-radius: 4px; background: rgba(6, 10, 18, .92); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); animation: sv-in 1.5s cubic-bezier(.2, .8, .2, 1) both; white-space: nowrap; }
.savefx b { font: italic 900 30px/1 var(--num, sans-serif); color: #fff; letter-spacing: .03em; }
.savefx span { font-size: 15px; font-weight: 800; color: #c9d3e6; }
@keyframes sv-in { 0% { opacity: 0; transform: translateY(-14px); } 14% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }
@media (max-height: 430px) { .savefx b { font-size: 24px; } }
/* 점수판 팀 이름: 긴 이름은 한 줄로 줄임표 */
.match .mx-score .t { min-width: 0; }
.match .mx-score .t b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 다시 보기 각도가 바뀔 때 짧게 어두워진다 */
.mx-rp .rp-cut { position: absolute; inset: 0; background: #000; animation: rp-cut .4s ease-out both; }
@keyframes rp-cut { 0% { opacity: .85; } 100% { opacity: 0; } }
.mx-rp .rp-tag em { margin-left: 4px; padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .3); font-style: normal; font-family: inherit; font-weight: 800; letter-spacing: 0; color: #c9d3e6; }

/* 전술 판: 상대 지시 */
.match .oi-list { display: grid; gap: 4px; }
.match .oi-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 6px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.match .oi-row.on { background: rgba(198, 255, 46, .07); box-shadow: inset 3px 0 0 var(--acc, #c6ff2e); }
.match .oi-row .n { font: 800 13px/1 var(--num, sans-serif); color: var(--ink-3, #6e7a8e); text-align: center; }
.match .oi-row b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match .oi-k { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.match .oi-k button { min-height: 32px; padding: 0 4px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: var(--ink-2, #a7b1c2); font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match .oi-k button.on { background: var(--acc, #c6ff2e); border-color: transparent; color: #06090f; }

/* 기록 탭: 선수 평점 */
.match .rt { display: grid; gap: 10px; }
.match .rt-team { display: grid; gap: 2px; }
.match .rt-h { padding: 0 0 4px 8px; border-left: 3px solid var(--tc); font-size: 12px; font-weight: 800; color: var(--ink-2, #a7b1c2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match .rt-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 38px; gap: 6px; align-items: center; min-height: 30px; padding: 0 6px; border-radius: 8px; }
.match .rt-row:nth-child(even) { background: rgba(255, 255, 255, .03); }
.match .rt-row.off { opacity: .55; }
.match .rt-row .n { font: 800 12px/1 var(--num, sans-serif); color: var(--ink-3, #6e7a8e); text-align: center; }
.match .rt-row b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match .rt-row .ev { display: flex; gap: 3px; }
.match .rt-row .ev i { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); color: #fff; }
.match .rt-row .ev i.mo { background: #ffd23a; color: #111722; }
.match .rv { font: 800 14px/1 var(--num, sans-serif); text-align: center; padding: 4px 0; border-radius: 6px; font-variant-numeric: tabular-nums; }
.match .rv.hi { background: #2fbf71; color: #04120a; }
.match .rv.gd { background: #8fd14f; color: #0b1406; }
.match .rv.ok { background: #e0b43a; color: #161004; }
.match .rv.lo { background: #e5534b; color: #fff; }

/* 하프타임 지시 */
.ht-talk { margin: 4px 0 8px; }
.ht-talk .segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ht-talk .segs button { min-height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #f2f5fa; font-size: 15px; font-weight: 800; }
.ht-talk .segs button.pre { border-color: var(--acc, #c6ff2e); }
.ht-talk .segs button.on { background: var(--acc, #c6ff2e); color: #06090f; }
.ht-talk .segs button:disabled:not(.on) { opacity: .45; }
.ht-talk .sub { margin: 6px 0 0; font-size: 13px; }
@media (max-height: 430px) { .ht-stats { max-height: 20vh; } .ht-talk .segs button { min-height: 44px; } }
/* 좁은 판에서 상대 지시 단추 글자가 잘리지 않게 두 줄 두 칸 */
.match .oi-k { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 휴대폰 높이: 하프타임 지시가 있으면 통계 막대는 기록 탭에서 보고 대화상자에서는 접는다 */
@media (max-height: 430px) { .ovl:has(.ht-talk) .ht-stats { display: none; } }
.match.rp-on .savefx { display: none; }
/* 경기 종료: 경기장을 어둡게 깔고 자막을 그 위에 남긴다(사라지지 않음) */
.mx-dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(3, 6, 12, .55); animation: dim-in .6s ease both; }
@keyframes dim-in { from { opacity: 0; } to { opacity: 1; } }
.mx-banner.end { z-index: 4; animation: bn-end .6s ease both; background: linear-gradient(90deg, rgba(5, 9, 16, 0), rgba(5, 9, 16, .96) 14%, rgba(5, 9, 16, .96) 86%, rgba(5, 9, 16, 0)); }
@keyframes bn-end { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
/* 공격 방향: 카메라 버튼 아래 작은 띠. 팀 색 점과 화살표, 후반에는 서로 바뀐다 */
.match .mx-dir { display: flex; gap: 10px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: var(--muted); width: max-content; max-width: 46vw; pointer-events: none; }
.match .mx-dir span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vw; }
.match .mx-dir i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); flex: none; }
.match .mx-dir b { color: #fff; font-size: 9px; }
.match.rp-on .mx-dir { display: none; }
/* 중계 판: 코드가 맨 아래로 내릴 때 부드러운 스크롤이 끼면 다음 줄에서 바닥 판단이 어긋난다. 위로 올려 둔 동안 새 줄 단추 */
.match .chat { scroll-behavior: auto; }
.match .mx-body { position: relative; }
.match .chat-new { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--acc, #c6ff2e); color: #06090f; font-size: 13px; font-weight: 800; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); white-space: nowrap; }

/* ---------- TV 중계 그래픽(3묶음) ---------- */
/* 초상: 그림 파일이면 얼굴 위쪽을 둥글게 자르고, 없으면 SVG 그림. 가슴 띠·번호는 숨긴다 */
.match .tv-por { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: end center; background: #1a2333; box-shadow: 0 0 0 2px var(--tc, #fff); }
.match .tv-por.big { width: 46px; height: 46px; }
.match .tv-por svg { width: 120%; height: 120%; }
.match .tv-por .ph-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.match .tv-por .ph-img.fl { transform: scaleX(-1); }
.match .tv-por .ph-kit, .match .tv-por .ph-num { display: none; }

/* 킥오프 전 라인업: 두 팀 포메이션 판을 나란히, 위에 경기장·시간대·날씨 */
.mx-intro { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding: 10px 12px 12px; background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(4, 8, 16, .82), rgba(2, 4, 9, .96)); animation: li-in .35s ease both; }
.mx-intro.out { animation: li-out .26s ease both; }
.mx-intro .li-top { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding-right: 92px; white-space: nowrap; overflow: hidden; }
.mx-intro .li-top b { font-size: 15px; font-weight: 900; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.mx-intro .li-top span { font-size: 12.5px; font-weight: 700; color: #c9d3e6; }
.mx-intro .li-ts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-height: 0; }
.mx-intro .li-t { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 5px; min-height: 0; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); border-top: 3px solid var(--tc); animation: li-team .5s cubic-bezier(.2, .8, .2, 1) both; }
.mx-intro .li-t:nth-child(2) { animation-delay: .25s; }
.mx-intro .li-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mx-intro .li-h .crest { width: 22px; height: 26px; flex: none; }
.mx-intro .li-h b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mx-intro .li-h em { margin-left: auto; padding: 2px 7px; border-radius: 5px; background: var(--tc); color: var(--ti, #fff); font: 800 12px/1.2 var(--num, sans-serif); font-style: normal; flex: none; }
.mx-intro .li-p { position: relative; min-height: 0; border-radius: 8px; background: linear-gradient(180deg, #17573a, #0f4029); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); overflow: hidden; }
.mx-intro .li-p::before { content: ''; position: absolute; left: 30%; right: 30%; bottom: 0; height: 14%; border: 1px solid rgba(255, 255, 255, .25); border-bottom: 0; }
.mx-intro .li-p::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .3); }
.mx-intro .li-d { position: absolute; transform: translate(-50%, 50%); display: grid; justify-items: center; width: 62px; animation: li-dot .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--i) * 45ms); }
.mx-intro .li-d .tv-por { width: 28px; height: 28px; --tc: rgba(255, 255, 255, .85); }
.mx-intro .li-n { position: absolute; top: -3px; left: calc(50% + 8px); min-width: 15px; height: 14px; padding: 0 3px; border-radius: 4px; background: #06090f; color: #fff; font: 800 10px/14px var(--num, sans-serif); text-align: center; }
.mx-intro .li-d b { max-width: 62px; margin-top: 1px; padding: 0 3px; border-radius: 3px; background: rgba(3, 6, 12, .72); font-size: 10px; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.mx-intro .li-tac { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: #a7b1c2; white-space: nowrap; }
.mx-intro .li-tac b { color: #fff; font-weight: 800; }
.mx-intro .li-skip { position: absolute; right: 12px; top: 6px; min-height: 32px; background: rgba(6, 10, 18, .9); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.mx-intro.short .li-t, .mx-intro.short .li-d { animation-duration: .25s; animation-delay: 0s; }
@keyframes li-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes li-out { to { opacity: 0; } }
@keyframes li-team { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes li-dot { from { opacity: 0; transform: translate(-50%, 50%) scale(.6); } to { opacity: 1; transform: translate(-50%, 50%); } }
/* 휴대폰(무대 480, 화면 배율 약 0.81): 이름 16px·번호 13px 무대 단위라 화면에서 13px·10.5px 이상. 이름 칸은 82px(한글 네 글자), 넘치면 말줄임 */
#stage.small .mx-intro { gap: 5px; padding: 6px 10px 8px; }
#stage.small .mx-intro .li-top { min-height: 44px; align-items: center; padding-right: 104px; }
#stage.small .mx-intro .li-top b { font-size: 18px; }
#stage.small .mx-intro .li-top span { font-size: 15px; }
#stage.small .mx-intro .li-t { gap: 4px; padding: 5px 6px; }
#stage.small .mx-intro .li-h b { font-size: 16px; }
#stage.small .mx-intro .li-h em { font-size: 15px; }
#stage.small .mx-intro .li-d { width: 82px; }
#stage.small .mx-intro .li-d .tv-por { width: 26px; height: 26px; }
#stage.small .mx-intro .li-n { top: -5px; left: calc(50% + 7px); min-width: 19px; height: 17px; font-size: 13px; line-height: 17px; }
#stage.small .mx-intro .li-d b { max-width: 82px; font-size: 16px; line-height: 1.25; }
#stage.small .mx-intro .li-tac { font-size: 15px; }
#stage.small .mx-intro .li-skip { min-height: 44px; top: 4px; }

/* 교체·카드·부상·골 자막: 경기장 왼쪽 아래 초상 띠(TV 하단 자막 자리), 한 번에 하나 */
.evband { position: absolute; z-index: 4; left: max(12px, env(safe-area-inset-left)); bottom: calc(env(safe-area-inset-bottom) + 66px); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 7px 14px 7px 8px; border-radius: 6px; border-left: 5px solid var(--tc); background: rgba(6, 10, 18, .93); box-shadow: 0 6px 22px rgba(0, 0, 0, .45); pointer-events: none; white-space: nowrap; animation: eb-in .32s cubic-bezier(.2, .8, .2, 1) both; }
.evband.out { animation: eb-out .24s ease both; }
.evband .eb-t { display: grid; gap: 3px; min-width: 0; }
.evband .eb-t b { font-size: 15px; font-weight: 900; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.evband .eb-t b i { font-style: normal; font: 800 13px/1 var(--num, sans-serif); padding: 2px 6px; margin-left: 4px; border-radius: 4px; background: #06090f; color: #fff; box-shadow: inset 0 0 0 1.5px var(--tc); }
.evband .eb-t em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #c9d3e6; overflow: hidden; text-overflow: ellipsis; }
.evband .eb-k { display: grid; gap: 2px; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, .16); font: italic 900 17px/1 var(--num, sans-serif); color: #fff; }
.evband .eb-k em { font: 700 11px/1.2 sans-serif; font-style: normal; color: #a7b1c2; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.evband .eb-sw { display: flex; flex-direction: column; gap: 5px; }
.evband.sub .eb-sw + .eb-sw { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .12); }
.evband .eb-p { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; color: #fff; }
.evband .eb-p .tv-por { width: 26px; height: 26px; }
.evband .eb-p.out { opacity: .85; }
.evband .eb-p.out .tv-por { --tc: #ff4d55; }
.evband .eb-p.in .tv-por { --tc: #3fdc7e; }
.evband .ar { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; flex: none; }
.evband .out .ar { border-top: 9px solid #ff4d55; }
.evband .in .ar { border-bottom: 9px solid #3fdc7e; }
.evband .eb-c { width: 16px; height: 22px; border-radius: 2.5px; flex: none; box-shadow: 0 2px 0 rgba(0, 0, 0, .4); transform: rotate(8deg); animation: eb-card .45s cubic-bezier(.3, 1.6, .5, 1) .12s both; }
.evband .eb-c.y { background: #ffd23a; }
.evband .eb-c.r { background: #ff3b45; }
.evband .eb-c.two { box-shadow: -7px -3px 0 -1px #ffd23a, 0 2px 0 rgba(0, 0, 0, .4); }
.evband .eb-st { width: 38px; height: 19px; flex: none; }
.evband.goal { padding: 8px 16px 8px 8px; border-left-width: 7px; }
@keyframes eb-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes eb-out { to { opacity: 0; transform: translateX(-12px); } }
@keyframes eb-card { from { transform: rotate(-30deg) scale(.4); opacity: 0; } to { transform: rotate(8deg); opacity: 1; } }
.match.rp-on .evband { display: none; }

/* 점수판: 바뀐 숫자에 둥근 빛 */
.match .mx-score .sc { position: relative; }
.match .mx-score .sc i { position: relative; display: inline-block; font-style: normal; }
.match .mx-score .sc i.hit { animation: sc-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.match .mx-score .sc i.hit::after { content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 70%, #fff) 0%, color-mix(in srgb, var(--tc) 45%, transparent) 38%, transparent 70%); mix-blend-mode: multiply; animation: sc-glow 1.6s ease-out both; pointer-events: none; }
.match .mx-score .sc.hit { box-shadow: 0 3px 0 #000, 0 0 0 3px var(--tc), 0 0 22px color-mix(in srgb, var(--tc) 70%, transparent); transition: box-shadow .2s; }
@keyframes sc-pop { 0% { transform: scale(1.5); } 100% { transform: none; } }
@keyframes sc-glow { 0% { transform: scale(.3); opacity: 1; } 60% { opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }

/* 하프타임·종료 통계 판: 막대 4줄과 슈팅 지도 */
.mx-board { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 24px)); display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(5, 9, 16, .94); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 40px rgba(0, 0, 0, .55); pointer-events: none; animation: bd-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.mx-board.end { top: auto; bottom: calc(env(safe-area-inset-bottom) + 62px); transform: translateX(-50%); animation: bd-in-end .4s cubic-bezier(.2, .8, .2, 1) .4s both; }
.mx-board .bd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; white-space: nowrap; }
.mx-board .bd-h b { font: italic 900 20px/1 var(--num, sans-serif); color: #fff; }
.mx-board .bd-h span { font-size: 13px; font-weight: 800; color: #c9d3e6; overflow: hidden; text-overflow: ellipsis; }
.mx-board .bd-h em { font-style: normal; font: 800 16px/1 var(--num, sans-serif); color: #fff; padding: 0 4px; }
.mx-board .bd-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 12px; align-items: center; }
.mx-board .bd-bars { display: grid; gap: 7px; }
.mx-board .bd-r { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 6px; align-items: baseline; }
.mx-board .bd-r b { font: 800 14px/1 var(--num, sans-serif); color: #fff; font-variant-numeric: tabular-nums; }
.mx-board .bd-r span { text-align: center; font-size: 11.5px; font-weight: 700; color: #a7b1c2; }
.mx-board .bd-t { grid-column: 1 / -1; display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.mx-board .bd-t i { display: block; height: 100%; transform-origin: left; animation: bd-bar .7s cubic-bezier(.2, .8, .2, 1) .2s both; }
.mx-board .bd-t i + i { transform-origin: right; }
.mx-board .bd-mw { display: grid; gap: 4px; min-width: 0; }
.mx-board .bd-map { width: 100%; height: auto; display: block; }
.mx-board .bd-lg { display: flex; flex-wrap: wrap; gap: 3px 9px; font-size: 10.5px; font-weight: 700; color: #a7b1c2; }
.mx-board .bd-lg span { display: inline-flex; align-items: center; gap: 4px; }
.mx-board .bd-lg i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #c9d3e6; }
.mx-board .bd-lg i.f { background: #c9d3e6; border-color: #fff; }
.mx-board .bd-lg i.s { background: rgba(201, 211, 230, .55); }
.mx-board .bd-motm { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 8px; border-left: 5px solid var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 26%, #0b111c), #0b111c 70%); }
.mx-board .bd-motm .eb-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.mx-board .bd-motm em { font-style: normal; font-size: 11px; font-weight: 800; color: #ffd23a; }
.mx-board .bd-motm b { font-size: 16px; font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-board .bd-motm .eb-t > span { font-size: 12px; font-weight: 700; color: #c9d3e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-board .bd-rt { display: grid; justify-items: center; padding: 5px 9px; border-radius: 8px; background: #2fbf71; color: #04120a; font: 900 20px/1 var(--num, sans-serif); }
.mx-board .bd-rt small { font: 800 10px/1.2 sans-serif; }
@keyframes bd-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes bd-in-end { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes bd-bar { from { transform: scaleX(0); } to { transform: none; } }
/* 경기 종료: 통계 판이 있으면 종료 자막은 위로 올리고 작게 */
.mx-field:has(.mx-board.end) .mx-banner.end { top: 13%; padding: 8px 28px 9px; }
.mx-field:has(.mx-board.end) .mx-banner.end b { font-size: 24px; }
@media (max-height: 430px) {
  .mx-board { gap: 6px; padding: 8px 10px; }
  .mx-board .bd-bars { gap: 5px; }
  .mx-board .bd-h b { font-size: 17px; }
  .mx-board .bd-motm b { font-size: 14px; }
  .mx-field:has(.mx-board.end) .mx-banner.end { top: 10%; }
  .mx-field:has(.mx-board.end) .mx-banner.end b { font-size: 20px; }
  .mx-field:has(.mx-board.end) .mx-banner.end span { font-size: 12px; }
}

/* 저품질 1단계: 그림자·빛 번짐을 줄인다. 2단계: 움직임을 끄고 바로 보이게 */
.match.lq1 .evband, .match.lq1 .mx-board, .match.lq2 .evband, .match.lq2 .mx-board { box-shadow: none; }
.match.lq1 .mx-score .sc.hit, .match.lq2 .mx-score .sc.hit { box-shadow: 0 3px 0 #000, 0 0 0 3px var(--tc); }
.match.lq2 .mx-intro, .match.lq2 .mx-intro *, .match.lq2 .evband, .match.lq2 .evband *, .match.lq2 .mx-board, .match.lq2 .mx-board *, .match.lq2 .mx-score .sc i { animation: none !important; }
.match.lq2 .mx-score .sc i.hit::after { display: none; }
.match.lq2 .mx-intro { background: rgba(2, 4, 9, .95); }

/* 전술·교체 판을 다시 그릴 때 브라우저가 스크롤을 옮기지 않게(자리는 match.js가 되돌린다) */
.match .mx-body { overflow-anchor: none; }

/* 하이라이트만 보기: 단추와 장면 사이 건너뛰기 자막 */
.match .ctrl .hlx { display: inline-flex; align-items: center; gap: 5px; }
.match .ctrl .hlx svg { width: 16px; height: 16px; }
.match .ctrl .hlx.on { background: var(--acc, #c6ff2e); color: var(--acc-ink, #06090f); }
.hl-skip { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 8px; background: rgba(5, 9, 16, .72); pointer-events: none; animation: hs-in .18s ease-out both; }
.hl-skip.out { animation: hs-out .22s ease-in both; }
.hl-skip .hs-m { display: flex; align-items: center; gap: 14px; padding: 10px 22px; border-radius: 12px; background: rgba(10, 16, 28, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.hl-skip .hs-m b { font: italic 900 34px/1 var(--num, sans-serif); color: #fff; font-variant-numeric: tabular-nums; }
.hl-skip .hs-m svg { width: 28px; height: 28px; color: var(--acc, #c6ff2e); }
.hl-skip > span { font-size: 14px; font-weight: 800; color: #c9d3e6; }
@keyframes hs-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-height: 430px) { .hl-skip .hs-m b { font-size: 26px; } .hl-skip .hs-m svg { width: 22px; height: 22px; } }
.match.lq2 .hl-skip { animation: none; }

/* 하프타임: 대화상자를 오른쪽에 두고 바탕을 어둡게 깔지 않는다(왼쪽 경기장의 전반 통계 판이 또렷하게). 같은 막대는 판에 있어 대화상자에서는 뺀다 */
.ovl:has(.ht-dlg) { background: linear-gradient(90deg, rgba(2, 5, 12, 0) 50%, rgba(2, 5, 12, .5)); place-items: center end; }
.ht-dlg { width: min(420px, 100%); }
.ht-dlg .ht-stats { display: none; }
.ht-seg { display: none; }
/* 휴대폰: [통계]를 누르면 대화상자가 제목·탭·후반 시작만 남기고 줄어 통계 판이 다 보인다 */
@media (max-height: 430px) {
  .ovl:has(.ht-dlg) { padding: 8px; }
  .ht-dlg { width: min(330px, 100%); }
  .ht-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
  .ht-seg button { min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: #a7b1c2; font-size: 14px; font-weight: 800; }
  .ht-seg button.on { background: var(--acc, #c6ff2e); color: var(--acc-ink, #06090f); }
  .ht-dlg.ht-peek .dlg-b > :not(.ht-seg), .ht-dlg.ht-peek > :not(.dlg-h):not(.dlg-b):not(.acts) { display: none; }
  .ht-dlg.ht-peek { align-self: end; }
  .ovl:has(.ht-peek) { background: none; }
}

/* 휴대폰 무대(480, 화면 배율 약 0.81): 경기 화면 글자는 무대 15px 이상이라 화면에서 12px 이상, 조작 단추는 높이 44 */
#stage.small .match .spd button, #stage.small .match .camseg button { min-height: 44px; font-size: 15px; }
#stage.small .match .ctrl { gap: 4px; }
#stage.small .match .ctrl .btn { font-size: 15px; padding: 0 12px; }
#stage.small .match .shouts .orders { font-size: 15px; }
#stage.small .match .mx-dir, #stage.small .match .mx-dir b { font-size: 15px; }
#stage.small .mx-top .ib { height: 44px; }
#stage.small .match .mx-score .t b { font-size: 15px; }
#stage.small .mx-timeline .tl-l { font-size: 15px; }
#stage.small .match .mx-poss .pl { font-size: 15px; }
#stage.small .match .mini3 span { font-size: 15px; }
#stage.small .match .mini3 b { font-size: 16px; }
#stage.small .match .mx-tabs button { min-height: 44px; font-size: 15px; }
#stage.small .match .chat .sub { font-size: 15px; }