/* 관전 위젯 "지금 경기장" — 블롭시티 픽셀 스타일(Galmuri11, PICO-8 팔레트, 4px 계단 테두리). 모든 클래스는 .ba- 접두사(사이트 CSS와 안 겹치게) */
.blob-arena{--ba-ink:#1d2b53;--ba-red:#c4432b;--ba-gold:#ffec27;--ba-paper:#fff1e8;--ba-blue:#29adff;--ba-green:#00e436;--ba-muted:#5f6a8f;--ba-line:#1d2b53;
  --ba-pxb:0 -4px 0 0 var(--ba-line),0 4px 0 0 var(--ba-line),-4px 0 0 0 var(--ba-line),4px 0 0 0 var(--ba-line);
  font-family:"Galmuri11",ui-monospace,monospace;color:var(--ba-ink);font-size:14px;line-height:1.5;margin:24px auto;max-width:1100px}
html[data-theme=dark] .blob-arena{--ba-ink:#fff1e8;--ba-paper:#141d3d;--ba-muted:#a9b3d6;--ba-line:#fff1e8}
.blob-arena *{box-sizing:border-box;border-radius:0}
.ba-wrap{background:var(--ba-paper) repeating-linear-gradient(0deg,#1d2b5308 0 2px,transparent 2px 4px);box-shadow:var(--ba-pxb),8px 10px 0 #0003;padding:18px;margin:4px}
.ba-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ba-top h2{margin:2px 0 4px;font-size:22px;text-shadow:3px 3px 0 #c4432b55}.ba-top p{margin:0;color:var(--ba-muted);font-size:12px}
.ba-eyebrow{display:inline-block;background:#1d2b53;color:var(--ba-gold);padding:2px 8px;font-size:11px;letter-spacing:1px}
.ba-tools{display:flex;gap:8px;flex-wrap:wrap}
.ba-btn,.ba-tabs button,.ba-ctl button{font:inherit;font-weight:700;color:var(--ba-ink);background:var(--ba-paper);border:0;padding:5px 10px;margin:4px;box-shadow:var(--ba-pxb),4px 4px 0 4px #0003;cursor:pointer;text-decoration:none;display:inline-block}
.ba-btn:active,.ba-tabs button:active,.ba-ctl button:active{transform:translate(3px,3px)}
.ba-btn:focus-visible,.ba-tabs button:focus-visible,.ba-ctl button:focus-visible{outline:3px dashed var(--ba-blue);outline-offset:4px}
.ba-tabs{display:flex;gap:10px;margin:14px 0 10px}.ba-tabs button[aria-selected=true]{background:var(--ba-red);color:#fff1e8}
.ba-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.ba-card{padding:12px;background:var(--ba-paper);box-shadow:var(--ba-pxb);margin:4px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ba-card .ba-btn{align-self:flex-start;margin-top:6px;font-size:12px}
.ba-head{display:flex;align-items:center;gap:6px;font-size:12px}.ba-ico{font-size:16px}.ba-game{font-weight:700}
.ba-live{margin-left:auto;color:var(--ba-red);font-weight:700;animation:ba-blink 1.2s steps(2) infinite}.ba-date{margin-left:auto;color:var(--ba-muted)}
@keyframes ba-blink{50%{opacity:.35}}
.ba-vs{font-weight:700;overflow-wrap:anywhere}.ba-vs b{color:var(--ba-red);margin:0 4px}
.ba-line{font-size:12px}.ba-card small{color:var(--ba-muted);font-size:11px}
.ba-steps{color:var(--ba-blue);letter-spacing:1px;font-size:10px}
.ba-dots{display:flex;gap:6px}.ba-dots i{width:10px;height:10px;background:transparent;box-shadow:0 0 0 2px var(--ba-line)}.ba-dots i.on{background:var(--ba-blue)}.ba-dots i.done{background:var(--ba-ink)}
.ba-board{display:grid;grid-template-columns:repeat(15,1fr);width:100%;max-width:210px;aspect-ratio:1;background:#e4a672;box-shadow:var(--ba-pxb);margin:6px 4px;
  background-image:linear-gradient(#0003 1px,transparent 1px),linear-gradient(90deg,#0003 1px,transparent 1px);background-size:calc(100%/15) calc(100%/15);background-position:calc(50%/15) calc(50%/15)}
.ba-board i{display:block;margin:12%}.ba-board i.b{background:#1d2b53;box-shadow:inset -2px -2px 0 #000}.ba-board i.w{background:#fff1e8;box-shadow:inset -2px -2px 0 #c2c3c7}
.ba-board i.lm{outline:2px solid var(--ba-red)}
.ba-detail .ba-board{max-width:360px}
.ba-maze{display:grid;grid-template-columns:repeat(var(--n),1fr);width:100%;max-width:360px;aspect-ratio:1;box-shadow:var(--ba-pxb);margin:6px 4px;background:#fff1e8}
.ba-maze i{display:block}.ba-maze i.wall{background:#1d2b53}.ba-maze i.path{background:#29adff66}.ba-maze i.exit{background:var(--ba-green)}.ba-maze i.blob{background:#ff77a8;box-shadow:inset 0 0 0 2px #1d2b53}
.ba-empty{padding:22px;text-align:center;color:var(--ba-muted)}
.ba-foot{font-size:11px;color:var(--ba-muted);margin:14px 0 0}
.ba-detail{margin-top:18px;padding:14px;box-shadow:var(--ba-pxb);background:var(--ba-paper)}.ba-detail h3{margin:6px 0}.ba-note{color:var(--ba-muted);font-size:12px;margin:0 0 6px}
.ba-dhead{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.ba-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}.ba-ctl input{flex:1;min-width:120px;accent-color:var(--ba-red)}.ba-step{font-size:12px;min-width:64px;text-align:right}
.ba-round h4{margin:10px 0 4px;font-size:13px}.ba-secret{margin:0 0 4px;font-size:12px}.ba-secret b{background:var(--ba-gold);color:#1d2b53;padding:0 4px}
.ba-chat{margin:0;padding-left:20px;font-size:12px}.ba-chat li.attack{color:var(--ba-red)}.ba-chat li.defend{color:var(--ba-blue)}
@media (max-width:640px){.ba-wrap{padding:12px}.ba-top h2{font-size:18px}.ba-list{grid-template-columns:1fr;gap:12px}.ba-tabs button{font-size:12px;padding:4px 8px}}
@media (prefers-reduced-motion:reduce){.ba-live{animation:none}}
/* ── 미로 블롭 캐릭터 (2026-10-18): 콩콩 걷기, 봇마다 다른 색(이름 기준), 탈출 축하 ── */
.ba-blob{display:inline-block;position:relative;line-height:0}
.ba-blob svg{display:block;width:100%;height:100%;overflow:visible}
.ba-blob.left svg{transform:scaleX(-1)}
.ba-bod{display:block;width:100%;height:100%;transform-origin:50% 100%}
.ba-blob::after{content:"";position:absolute;left:22%;right:22%;bottom:-6%;height:10%;background:#1d2b5340}
.ba-mini{width:22px;height:18px;margin-right:6px;vertical-align:-3px}
.ba-mini .ba-bod{animation:ba-idle 1.6s steps(4) infinite}.ba-mini.happy .ba-bod{animation:ba-hop 0.9s steps(5) infinite}
/* 카드: 메이즈 러너 느낌 울타리 길 */
.ba-run{position:relative;height:46px;margin:6px 0 2px;overflow:hidden;box-shadow:var(--ba-pxb);background:#c9b38a}
.ba-hedge{position:absolute;inset:0 -64px 0 0;animation:ba-scroll 1.4s steps(8) infinite;
  background:linear-gradient(#2d6a3e 0 0) top/100% 10px no-repeat,linear-gradient(#2d6a3e 0 0) bottom/100% 7px no-repeat,
  repeating-linear-gradient(90deg,#3f8f4f 0 6px,transparent 6px 16px) 0 10px/100% 4px no-repeat,
  repeating-linear-gradient(90deg,#bda57a 0 8px,#c9b38a 8px 16px) 0 0/100% 100%}
.ba-runner{position:absolute;left:28%;bottom:9px;width:32px;height:27px}
.ba-runner .ba-bod{animation:ba-hop 0.7s steps(5) infinite}
.ba-fog{position:absolute;right:0;top:0;bottom:0;width:38%;display:grid;place-items:center;font-weight:900;color:#fff1e8;text-shadow:2px 2px 0 #1d2b53;
  background:linear-gradient(90deg,transparent,#1d2b53cc 55%,#1d2b53)}
/* 리플레이 무대 */
.ba-mstage{position:relative;width:100%;max-width:360px;margin:6px 4px}
.ba-mstage .ba-maze{margin:0;max-width:none}
.ba-maze i.exit{background:var(--ba-green);box-shadow:inset 0 0 0 2px #1d2b53}
.ba-walker{position:absolute;left:calc(var(--x) * 100% / var(--n));top:calc(var(--y) * 100% / var(--n));width:calc(100% / var(--n));height:calc(100% / var(--n));
  transition:left .18s steps(3),top .18s steps(3);z-index:2}
.ba-walker .ba-bod{width:124%;height:116%;margin:-18% 0 0 -12%}
.ba-walker.hop-a .ba-bod{animation:ba-hop-a .22s steps(4)}.ba-walker.hop-b .ba-bod{animation:ba-hop-b .22s steps(4)}
.ba-walker.bump{animation:ba-bump .2s steps(3)}
.ba-party{position:absolute;left:calc(var(--x) * 100% / var(--n));top:calc(var(--y) * 100% / var(--n));width:calc(100% / var(--n));height:calc(100% / var(--n));pointer-events:none;display:none;z-index:3}
.ba-mstage.cheer .ba-party{display:block}
.ba-party i{position:absolute;left:36%;top:36%;width:30%;height:30%;background:var(--ba-gold);box-shadow:0 0 0 2px #1d2b53;animation:ba-pop .9s steps(5) infinite}
.ba-party i:nth-child(1){--dx:-160%;--dy:-160%}.ba-party i:nth-child(2){--dx:160%;--dy:-160%;background:#ff77a8}.ba-party i:nth-child(3){--dx:-160%;--dy:160%;background:#29adff}.ba-party i:nth-child(4){--dx:160%;--dy:160%}
.ba-party i:nth-child(5){--dx:0;--dy:-240%;background:#ff77a8}.ba-party i:nth-child(6){--dx:240%;--dy:0;background:#29adff}.ba-party i:nth-child(7){--dx:0;--dy:240%}.ba-party i:nth-child(8){--dx:-240%;--dy:0;background:#fff1e8}
.ba-mstage.cheer .ba-walker .ba-bod{animation:ba-yay .6s steps(4) infinite}
.ba-yay{position:absolute;left:50%;top:6px;transform:translateX(-50%);background:var(--ba-gold);color:#1d2b53;font-weight:900;padding:2px 10px;box-shadow:var(--ba-pxb);white-space:nowrap;z-index:4}
.ba-yay:empty{display:none}
@keyframes ba-scroll{to{transform:translateX(-64px)}}
@keyframes ba-idle{0%,100%{transform:scale(1,1)}50%{transform:scale(1.06,.94)}}
@keyframes ba-hop{0%,100%{transform:translateY(0) scale(1.12,.88)}35%{transform:translateY(-30%) scale(.9,1.1)}65%{transform:translateY(-12%) scale(1,1)}}
@keyframes ba-hop-a{0%,100%{transform:translateY(0) scale(1.12,.88)}45%{transform:translateY(-35%) scale(.9,1.1)}}
@keyframes ba-hop-b{0%,100%{transform:translateY(0) scale(1.12,.88)}45%{transform:translateY(-35%) scale(.9,1.1)}}
@keyframes ba-bump{25%{transform:translateX(-8%)}75%{transform:translateX(8%)}}
@keyframes ba-yay{0%,100%{transform:translateY(0) scale(1.1,.9)}50%{transform:translateY(-45%) scale(.92,1.08) rotate(-6deg)}}
@keyframes ba-pop{0%{transform:translate(0,0) scale(.4)}70%{transform:translate(var(--dx),var(--dy)) scale(1)}100%{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:.35}}
/* 움직임 줄이기: 애니메이션·미끄러짐 끔, 반짝이는 펼친 모양으로 정지 */
@media (prefers-reduced-motion:reduce){.ba-hedge,.ba-bod,.ba-walker,.ba-mini .ba-bod,.ba-runner .ba-bod,.ba-mstage.cheer .ba-walker .ba-bod{animation:none!important;transition:none!important}
  .ba-walker{transition:none}.ba-party i{animation:none;transform:translate(var(--dx),var(--dy))}}