/* 17-1 구장 줄·배지·무대 팔레트 (ds/specs/battle-ui-style.md 8-4·8-5). 글자는 모두 크림 패널 위 — 팔레트와 무관 */
.arena,.venue-chip,.venue-badge{--venue-sky:#0e1a3a;--venue-sky-2:#24486c;--venue-pitch:#1f6b62;--venue-light:#ffd9a0;--venue-stand:#0a1328;--venue-accent:#6fdac6}
[data-venue="kr-seoul"]{--venue-sky:#0e1a3a;--venue-sky-2:#24486c;--venue-pitch:#1f6b62;--venue-light:#ffd9a0;--venue-stand:#0a1328;--venue-accent:#6fdac6}
[data-venue="jp-yokohama"]{--venue-sky:#0c1734;--venue-sky-2:#6a3a6e;--venue-pitch:#25665a;--venue-light:#ffe0ec;--venue-stand:#0b0f24;--venue-accent:#ff9fc4}
[data-venue="gb-london"]{--venue-sky:#121a27;--venue-sky-2:#4a5868;--venue-pitch:#2c5c43;--venue-light:#e6efff;--venue-stand:#0c1119;--venue-accent:#a3b8d4}
[data-venue="gb-manchester"]{--venue-sky:#16161e;--venue-sky-2:#4d403e;--venue-pitch:#2b5d3d;--venue-light:#ffcf8a;--venue-stand:#2a1612;--venue-accent:#dc7d5a}
[data-venue="es-madrid"]{--venue-sky:#15121f;--venue-sky-2:#6a4a26;--venue-pitch:#33663a;--venue-light:#ffe3a6;--venue-stand:#140f14;--venue-accent:#f5c35a}
[data-venue="es-barcelona"]{--venue-sky:#07192e;--venue-sky-2:#0f6a73;--venue-pitch:#266e55;--venue-light:#fff2cc;--venue-stand:#06131f;--venue-accent:#4fc3f7}
[data-venue="de-munich"]{--venue-sky:#0b1640;--venue-sky-2:#2f5aa8;--venue-pitch:#2d6b48;--venue-light:#f4f8ff;--venue-stand:#0a1230;--venue-accent:#eef4ff}
[data-venue="it-milan"]{--venue-sky:#19161f;--venue-sky-2:#4b4152;--venue-pitch:#316540;--venue-light:#ffe6c7;--venue-stand:#120f18;--venue-accent:#d9a3e6}
[data-venue="fr-paris"]{--venue-sky:#141a4a;--venue-sky-2:#4b4a9a;--venue-pitch:#2a6446;--venue-light:#fff0d0;--venue-stand:#0e1236;--venue-accent:#b7a6f0}
[data-venue="pt-lisbon"]{--venue-sky:#1a1642;--venue-sky-2:#57407e;--venue-pitch:#2e6a44;--venue-light:#ffe07a;--venue-stand:#120f2c;--venue-accent:#ffe14d}
[data-venue="br-rio"]{--venue-sky:#08202c;--venue-sky-2:#1d5a58;--venue-pitch:#2f7a45;--venue-light:#ffd49a;--venue-stand:#061820;--venue-accent:#ffa45c}
[data-venue="ar-buenosaires"]{--venue-sky:#1c1328;--venue-sky-2:#4d2f48;--venue-pitch:#2d6a3e;--venue-light:#fff0c0;--venue-stand:#2a170f;--venue-accent:#b6e36a}
/* 8-5-3 절차적 무대(배경 원화가 없을 때). 도형은 관중석·조명탑·피치 원뿐, 움직이는 것 없음 */
.venue-bg,.venue-lights,.venue-stand,.venue-pitch{display:none;pointer-events:none}
.arena[data-venue] .arena-sky{background:radial-gradient(ellipse 70% 40% at 50% 62%,color-mix(in srgb,var(--venue-light) 20%,transparent),transparent 70%),linear-gradient(180deg,var(--venue-sky) 0%,var(--venue-sky-2) 62%)}
.arena[data-venue] :is(.arena-moon,.arena-forest){display:none}
.arena[data-venue] :is(.venue-lights,.venue-stand,.venue-pitch){display:block}
.venue-lights{position:absolute;inset:0;z-index:-3}
.venue-light{position:absolute;inset:0}
.venue-light .pole{position:absolute;left:var(--x);top:calc(14% + 8px);height:32%;width:3px;transform:translateX(-50%);background:color-mix(in srgb,var(--venue-stand),#fff 14%)}
.venue-light .lamp{position:absolute;left:var(--x);top:14%;width:26px;height:10px;border-radius:3px;transform:translateX(-50%);background:var(--venue-light);box-shadow:0 0 18px 6px color-mix(in srgb,var(--venue-light) 55%,transparent)}
.venue-light .beam{position:absolute;left:calc(var(--x) - 12%);top:calc(14% + 6px);width:24%;height:64%;transform-origin:50% 0;transform:rotate(var(--tilt,0deg));background:linear-gradient(180deg,color-mix(in srgb,var(--venue-light) 30%,transparent),transparent 85%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:.6}
.venue-stand{position:absolute;left:-4%;right:-4%;top:44%;height:26%;z-index:-2;background:color-mix(in srgb,var(--venue-accent) 55%,transparent);clip-path:polygon(0 30%,8% 12%,22% 4%,50% 0,78% 4%,92% 12%,100% 30%,100% 100%,0 100%)}
.venue-stand::after{content:"";position:absolute;inset:2px 0 0;background:repeating-linear-gradient(0deg,transparent 0 9px,color-mix(in srgb,var(--venue-stand),#fff 7%) 9px 10px),var(--venue-stand);clip-path:inherit}
.venue-stand::before{content:"";position:absolute;left:0;right:0;top:100%;height:60%;background:linear-gradient(var(--venue-stand),color-mix(in srgb,var(--venue-stand),var(--venue-pitch) 40%))}
.arena[data-venue] .arena-ground{background:repeating-linear-gradient(90deg,#ffffff0a 0 6%,transparent 6% 12%),radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--venue-pitch),#fff 12%),var(--venue-pitch) 55%,color-mix(in srgb,var(--venue-pitch),#000 35%));border-top:2px solid color-mix(in srgb,var(--venue-accent) 35%,transparent);box-shadow:0 -30px 70px color-mix(in srgb,var(--venue-light) 12%,transparent)}
.venue-pitch{position:absolute;inset:0;z-index:-1;--pc:color-mix(in srgb,#fff 60%,var(--venue-accent));--cx:50%}
.venue-pitch .circle{position:absolute;left:var(--cx);bottom:12%;width:30%;aspect-ratio:1/.22;transform:translate(-50%,50%);box-sizing:border-box;border:3px solid var(--pc);border-radius:50%;opacity:.55}
.venue-pitch .line{position:absolute;left:var(--cx);bottom:12%;height:14%;width:2px;transform:translateX(-50%);background:var(--pc);opacity:.55}
/* 배경 원화가 있을 때: 하늘 위 원화, 달·조명탑·관중석·피치·피치 원 숨김 */
.venue-bg{position:absolute;inset:0;z-index:-4;background:var(--venue-art) center 70%/cover no-repeat}
.arena[data-venue-art] .venue-bg{display:block}
.arena[data-venue-art] :is(.arena-moon,.arena-forest,.venue-lights,.venue-stand,.arena-ground,.venue-pitch){display:none}

/* 8-4-1 설정 화면 줄: 구장·레벨·진행 */
.battle-options{display:grid;gap:10px;min-width:0}
.option-label.venue-label{background:var(--ui-sky-deep)}
.option-label.level-label{background:var(--ui-berry-deep)}
.option-label.auto-label{background:var(--ui-leaf-deep)}
.venue-row{display:flex;flex-wrap:wrap;gap:8px;min-width:0;padding:8px 0 6px}
/* 8-4-2 구장 칩 · 랜덤 토글 */
.venue-chip,.venue-random{--step:var(--ui-step);--step-c:var(--ui-step-color);position:relative;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:44px;padding:0 14px 0 6px;border:2px solid var(--ui-line);border-radius:var(--ui-r-pill);background:var(--ui-panel);box-shadow:0 var(--step) 0 var(--step-c);color:var(--ui-ink-strong);font:inherit;white-space:nowrap;cursor:pointer;transition:transform var(--ui-t-release) var(--ui-ease-out),box-shadow var(--ui-t-release) var(--ui-ease-out)}
.venue-random{padding:0 14px 0 10px}
.venue-no{flex:none;display:grid;place-items:center;box-sizing:border-box;width:28px;height:28px;border-radius:50%;border:2px solid var(--venue-accent);background:color-mix(in srgb,var(--venue-accent) 35%,#fff);color:var(--ui-ink-strong);font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}
.venue-city,.venue-random span{font-size:15px;font-weight:900;letter-spacing:-.02em}
.venue-code{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--ui-ink-soft)}
.venue-soon{font-size:11px;font-weight:800;color:var(--ui-ink-off)}
.venue-random svg{width:20px;height:20px;flex:none}
.venue-random svg circle{fill:none}
.venue-chip:not(:disabled):not([aria-disabled=true]):active,.venue-random:not(:disabled):active{transform:translateY(2px);--step:var(--ui-step-press);transition-duration:var(--ui-t-press)}
@media(hover:hover){.venue-chip:not(:disabled):not([aria-disabled=true]):hover,.venue-random:not(:disabled):hover{transform:translateY(-2px);--step:var(--ui-step-hover)}}
.venue-chip[aria-checked=true]{border:3px solid var(--ui-leaf);padding:0 13px 0 5px;background:var(--ui-leaf-tint);--step-c:var(--ui-leaf-step)}
.venue-chip[aria-checked=true]::before{content:"";position:absolute;top:-7px;left:-7px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:2px solid #fff;background:var(--ui-leaf-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.venue-random[aria-checked=true]{border:3px solid var(--ui-sky);padding:0 13px 0 9px;background:var(--ui-sky-tint);--step-c:var(--ui-sky-step);color:var(--ui-sky-deep)}
.venue-random[aria-checked=true] svg circle{fill:currentColor}
.venue-chip[aria-disabled=true]{opacity:.45;filter:grayscale(.7);border:2px dashed var(--ui-off-line);--step:0px;cursor:not-allowed}
.venue-chip:disabled,.venue-random:disabled{cursor:not-allowed;opacity:.7;--step:2px}
.venue-chip:focus-visible,.venue-random:focus-visible{outline:3px solid var(--ui-ink-strong);outline-offset:3px}
/* 8-4-3 구장 이름 배지(중앙 묶음 2줄) */
.venue-badge{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;max-width:100%;min-width:0;height:28px;padding:0 12px 0 8px;border-radius:var(--ui-r-pill);border:3px solid var(--ui-rim);background:var(--ui-panel-hud);box-shadow:0 3px 0 var(--ui-step-color);color:var(--ui-ink-strong);pointer-events:none}
.venue-badge i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--venue-accent);box-shadow:0 0 0 2px var(--ui-line-strong)}
.venue-badge b{flex:none;font-size:12px;font-weight:800;color:var(--ui-ink-soft);letter-spacing:.04em}
.venue-badge span{min-width:0;font-size:13px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.venue-badge.pop{animation:ui-pop var(--ui-t-pop) var(--ui-ease-out)}
@media(max-width:760px){.venue-row{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:120px;gap:6px;padding:10px 4px 8px 10px;scrollbar-width:thin}.venue-chip{scroll-snap-align:start;flex:none}.venue-random{position:sticky;left:0;z-index:2;flex:none;scroll-snap-align:start;box-shadow:0 var(--step) 0 var(--step-c),8px 0 8px -6px #3a26181f}}
@media(max-width:540px){
  .venue-no{width:24px;height:24px;font-size:12px}.venue-city,.venue-random span{font-size:14px}.venue-code{font-size:11px}
  .venue-light .pole{width:2px}.venue-light .lamp{width:16px;height:6px}
  .venue-pitch .circle{width:44%;border-width:2px}
  .hud-center .venue-badge{position:absolute;left:50%;top:78px;translate:-50% 0;max-width:70%;height:24px;padding:0 10px 0 7px;gap:5px}
  .venue-badge i{width:8px;height:8px}.venue-badge b{display:none}.venue-badge span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.venue-chip,.venue-random{transition:box-shadow var(--ui-t-press),background-color var(--ui-t-press)}.venue-chip:is(:hover,:active),.venue-random:is(:hover,:active){transform:none!important}.venue-badge.pop{animation:ui-fade 120ms ease-out}}