:root{--grass:#2f7d32;--grass2:#38913b;--dirt:#c8955a;--board:#14261a;--chalk:#f4f1e6;--gold:#ffcc33;--red:#d33}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,sans-serif;background:#0d1a12;color:var(--chalk)}
.board{background:var(--board);border-bottom:6px solid #5a3b1e;text-align:center;padding:14px 8px}
h1{font-family:"Courier New",monospace;letter-spacing:4px;margin:0;color:var(--gold);text-shadow:0 0 8px #ffcc3388}h1 span{color:#fff}
.tagline{margin:4px 0 10px;opacity:.75}nav{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
button{font:inherit;cursor:pointer;border:2px solid #fff3;background:#1f3a28;color:var(--chalk);padding:7px 12px;border-radius:6px}
button:hover{border-color:var(--gold)}button.on{background:var(--gold);color:#111}button:disabled{opacity:.4;cursor:default}
main{max-width:1150px;margin:auto;padding:12px}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;background:#000a;padding:10px;border-radius:8px;font-family:"Courier New",monospace}
.bar .roll{font-size:1.1em;color:var(--gold)}.layout{display:grid;grid-template-columns:1fr 320px;gap:14px}
@media(max-width:860px){.layout{grid-template-columns:1fr}}
.field{position:relative;aspect-ratio:1/0.9;background:repeating-linear-gradient(45deg,var(--grass) 0 30px,var(--grass2) 30px 60px);border-radius:50% 50% 8px 8px/60% 60% 8px 8px;border:4px solid #1b4d1d;overflow:hidden}
.infield{position:absolute;left:50%;top:58%;width:38%;aspect-ratio:1;background:var(--dirt);transform:translate(-50%,-50%) rotate(45deg);border:3px solid #fff8}
.mound{position:absolute;left:50%;top:58%;width:7%;aspect-ratio:1;border-radius:50%;background:#b07a45;transform:translate(-50%,-50%)}
.slot{position:absolute;transform:translate(-50%,-50%);width:clamp(62px,13%,96px);text-align:center;cursor:pointer;z-index:2}
.slot .disc{background:#0009;border:2px dashed #fff8;border-radius:10px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative}
.slot.filled .disc{border:2px solid var(--gold);background:#000b}.slot.target .disc{animation:pulse 1s infinite;border-color:#fff}
@keyframes pulse{50%{box-shadow:0 0 14px var(--gold)}}
.slot img{width:100%;image-rendering:pixelated}.pos{font-weight:800;font-family:"Courier New",monospace;font-size:13px;background:var(--board);border-radius:4px;padding:1px 4px;display:inline-block;margin-top:2px}
.nm{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}.ovr{position:absolute;top:-6px;right:-6px;background:var(--red);border-radius:10px;font-size:11px;padding:1px 5px;font-weight:700}
.lbl{margin:12px 0 6px;font-family:"Courier New",monospace;color:var(--gold)}
.pen{display:flex;gap:8px;flex-wrap:wrap;background:#3d2a16;padding:10px;border-radius:8px}.pen .slot{position:relative;transform:none;width:84px}
.scoreboard{background:var(--board);border:3px solid #3a5;border-radius:8px;padding:10px;margin-bottom:12px;font-family:"Courier New",monospace}
.scoreboard h3{margin:0 0 8px;color:var(--gold);text-align:center;border-bottom:1px dashed #3a5;padding-bottom:6px}
ol{padding-left:24px;margin:0}li{padding:3px 0;display:flex;gap:4px;align-items:center}li span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
li button{padding:0 6px;font-size:12px}.trow{display:flex;justify-content:space-between;padding:2px 0}.big{font-size:2em;text-align:center;color:var(--gold);margin:6px 0}
.modal{position:fixed;inset:0;background:#000c;z-index:20;display:flex;align-items:center;justify-content:center}.hidden{display:none!important}
.sheet{background:var(--board);width:min(760px,96vw);height:min(80vh,700px);border-radius:10px;border:3px solid var(--gold);display:flex;flex-direction:column}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:10px}.filters{display:flex;gap:6px;padding:0 10px 10px;flex-wrap:wrap}
.filters input[type=text],#q{flex:1;min-width:140px;padding:7px;border-radius:6px;border:0}select{padding:6px;border-radius:6px}
.grid{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;padding:10px}
.mon{background:#0006;border:1px solid #fff2;border-radius:8px;padding:4px;text-align:center;cursor:pointer;font-size:11px}.mon:hover{border-color:var(--gold)}
.mon img{width:64px;height:64px;image-rendering:pixelated}.mon .f{color:var(--gold)}
.card{position:fixed;z-index:30;background:#fff;color:#111;border-radius:10px;padding:10px;width:230px;box-shadow:0 6px 20px #000a;font-size:12px;pointer-events:none}
.card h4{margin:0}.card .b{display:flex;align-items:center;gap:4px}.card .b i{flex:1;height:6px;background:#ddd;border-radius:3px;overflow:hidden}.card .b i u{display:block;height:100%;background:#2a7}
.card .b em{width:58px;font-style:normal}.type{display:inline-block;padding:0 6px;border-radius:8px;background:#333;color:#fff;font-size:10px;margin-right:3px;text-transform:uppercase}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--gold);color:#111;padding:8px 14px;border-radius:8px;z-index:40}
footer{text-align:center;font-size:12px;opacity:.6;padding:20px}footer a{color:var(--gold)}
@media(max-width:560px){.nm{font-size:9px}.pos{font-size:10px}.pen .slot{width:64px}}
.gv,.hub{display:flex;flex-direction:column;gap:10px}.lsw{overflow-x:auto}
.ls{border-collapse:collapse;width:100%;background:#0b130e;font-family:"Courier New",monospace;border:3px solid #3a5;color:#ffd}
.ls th,.ls td{padding:4px 6px;text-align:center;border-left:1px solid #1d3}.ls th{color:var(--gold)}.ls th.cur{background:#3a5;color:#000}.ls .tn{text-align:left;font-weight:700}.ls .r{color:var(--gold);font-weight:700}
.mid{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:10px;align-items:center}
.pcard{background:var(--board);border:2px solid var(--gold);border-radius:10px;padding:8px;text-align:center;min-height:170px}.pcard img{width:96px;height:96px;image-rendering:pixelated}
.pcard .cl{font-size:11px;letter-spacing:2px;color:var(--gold)}.cr{display:flex;justify-content:center;gap:6px;font-size:12px;flex-wrap:wrap;font-family:"Courier New",monospace}
.dia{position:relative}.dia svg{width:100%;max-width:260px;display:block;margin:auto}.base{fill:#fff;transition:fill .3s}.base.on{fill:var(--gold);filter:drop-shadow(0 0 4px #ff0)}
svg.flash{animation:fl 1s}@keyframes fl{30%{filter:brightness(1.8) drop-shadow(0 0 12px gold)}}
.cnt{display:flex;justify-content:center;gap:10px;font-family:"Courier New",monospace;margin-top:6px;flex-wrap:wrap}.cnt i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#333;margin-left:2px}
.cnt i.g{background:#3c3}.cnt i.y{background:#fc3}.cnt i.r{background:#e33}.cnt .inn{color:var(--gold);font-weight:700}
.ctrl{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.feed{background:#0b130e;border:2px solid #3a5;border-radius:8px;height:240px;overflow:auto;padding:8px;font-size:14px}.ln{padding:3px 0;border-bottom:1px dashed #1d3}
.ln.inn,.ln.end{color:#8c8;font-style:italic}.ln.hr{color:var(--gold);font-weight:800}.ln.run{color:#ffb347;font-weight:700}.ln.hit{color:#cfe}.ln.final{color:var(--gold);font-size:1.15em;font-weight:800}.ln.info{color:#9cf}.ln.ab{display:none}
.box{background:var(--board);border-radius:8px;padding:8px;overflow-x:auto;margin-bottom:8px}.box h4{margin:4px 0;color:var(--gold)}
.box table,.st{width:100%;border-collapse:collapse;font-size:13px;font-family:"Courier New",monospace;margin-bottom:6px}.box th,.box td,.st th,.st td{padding:2px 4px;text-align:right}.box td:first-child,.box th:first-child,.st td:first-child,.st th:first-child{text-align:left}
.st tr.me{background:#ffcc3333}.ctr{text-align:center}.hubg{display:grid;grid-template-columns:1fr 1fr;gap:10px}.l10{font-size:12px}.l10 .w{color:#6e6}.l10 .l{color:#f77}
@media(max-width:700px){.mid{grid-template-columns:1fr 1fr}.dia{grid-column:1/3;grid-row:1}.hubg{grid-template-columns:1fr}.pcard{min-height:0}.pcard img{width:64px;height:64px}.ls{font-size:12px}}
/* ===== ballpark ===== */
.park{position:relative;width:100%;aspect-ratio:1000/900;container-type:inline-size;border-radius:14px;overflow:hidden;border:4px solid #173d22;box-shadow:0 8px 30px #000a;background:#2a7a35;user-select:none}
.parksvg{position:absolute;inset:0;width:100%;height:100%}
.park .slot{position:absolute;transform:translate(-50%,-88%);width:11cqw;text-align:center;cursor:pointer;z-index:3;display:flex;flex-direction:column;align-items:center}
.park .slot .disc{display:none}.spr{width:11cqw;height:11cqw;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 .5cqw .4cqw #000a)}.park .spr.art{image-rendering:auto;width:9cqw;height:9cqw;margin:1cqw}
.park .empty{width:7cqw;height:7cqw;margin:2cqw 0 1cqw;border-radius:50%;border:.4cqw dashed #fffc;background:#0004;color:#fff;display:flex;align-items:center;justify-content:center;font-size:4cqw;font-weight:800}
.park .slot.target .empty{animation:pulse 1s infinite;border-color:var(--gold)}
.tag{display:flex;align-items:stretch;border-radius:.6cqw;overflow:hidden;box-shadow:0 .3cqw .6cqw #000a;font-size:max(9px,1.45cqw);line-height:1.5;white-space:nowrap;margin-top:-.8cqw;max-width:20cqw}
.tag .tp{background:var(--gold);color:#111;font-weight:900;padding:0 .6cqw;font-family:"Courier New",monospace}.tag .tn{background:#0d1a12ee;color:#fff;padding:0 .7cqw;font-weight:700;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.03em}
.tag .to{background:var(--red);color:#fff;font-weight:800;padding:0 .5cqw}.tag.sm{font-size:max(8px,1.2cqw)}
.park .slot:hover .tn{background:#1f5530}.park .slot.side .spr{width:9cqw;height:9cqw}
.hint{text-align:center;font-size:12px;opacity:.6;margin:6px 0}
.fd{position:absolute;transform:translate(-50%,-88%);display:flex;flex-direction:column;align-items:center;z-index:3;pointer-events:none}
.park .fd .spr{width:9cqw;height:9cqw}.park .fd .spr.art{width:7.5cqw;height:7.5cqw}.fd.bt{z-index:5}.fd.bt.flip .spr{transform:scaleX(-1)}.fd.rn{z-index:6}.park .fd.rn .spr{width:8cqw;height:8cqw}
.fd.fade{opacity:0;transition:opacity .5s}
.ball{position:absolute;width:1.4cqw;height:1.4cqw;border-radius:50%;background:#fff;box-shadow:0 0 .8cqw #fff,0 .6cqw .4cqw #0006;z-index:8;transform:translate(-50%,-50%)}
.bug{position:absolute;top:1.2cqw;left:1.2cqw;display:flex;align-items:center;gap:1cqw;background:#0b130ef0;border:2px solid var(--gold);border-radius:1cqw;padding:.6cqw 1cqw;z-index:9;font-family:"Courier New",monospace;font-size:max(11px,2cqw);color:#fff}
.bteams div{display:flex;gap:1.2cqw;justify-content:space-between;padding:0 .4cqw}.bteams .atbat{background:#ffcc3333}.bteams b{color:var(--gold)}
.binn{font-weight:800;color:var(--gold)}.bd{width:max(34px,6cqw)}.bd rect{fill:#0000;stroke:#fff;stroke-width:1.5}.bd rect.on{fill:var(--gold)}
.bcnt{display:flex;flex-direction:column;align-items:center}.bo i{display:inline-block;width:max(7px,1.2cqw);height:max(7px,1.2cqw);border-radius:50%;background:#444;margin:0 1px}.bo i.r{background:#e33}
.pop{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-family:"Courier New",monospace;font-weight:900;font-size:7cqw;color:var(--gold);text-shadow:0 0 2cqw #000,0 .4cqw 0 #a60;z-index:10;opacity:0;pointer-events:none}
.pop.go{animation:popa 1.4s}@keyframes popa{15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%)}}
.mid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mid2 .pcard{display:flex;gap:8px;align-items:center;text-align:left;min-height:0}.mid2 .pcard img{width:64px;height:64px}
.artT{margin-top:8px;font-size:13px;padding:4px 10px}
.layout{grid-template-columns:1fr 300px}
.park.live{max-width:min(100%,calc(80vh*1.111));margin:0 auto}
.park.m3d{aspect-ratio:16/10;background:#16264a}.park.m3d>svg.parksvg,.park.m3d .fd,.park.m3d #ball{display:none!important}
.c3d{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.park.live.m3d{max-width:min(100%,calc(78vh*1.6))}
@media(max-width:700px){.park.m3d{aspect-ratio:4/3}}
/* ===== play mode HUD ===== */
.hud{position:absolute;inset:0;z-index:12;pointer-events:none}
.zone{position:absolute;border:2px solid #fffd;box-shadow:0 0 0 2000px #0000,0 0 10px #000a;background:#ffffff0d}
.zg{position:absolute;inset:0;background:linear-gradient(#fff5,#fff5) 33.3% 0/1px 100% no-repeat,linear-gradient(#fff5,#fff5) 66.6% 0/1px 100% no-repeat,linear-gradient(#fff5,#fff5) 0 33.3%/100% 1px no-repeat,linear-gradient(#fff5,#fff5) 0 66.6%/100% 1px no-repeat}
.ret{position:absolute;transform:translate(-50%,-50%);pointer-events:none}.ret.pci{width:34%;aspect-ratio:1.3;border:3px solid #ffcc33;border-radius:50%;box-shadow:0 0 8px #ffcc33}
.ret.aimr{width:22px;height:22px;border:3px solid #ff4d4d;border-radius:50%;box-shadow:0 0 8px #f44}.ret.aimr::before,.ret.aimr::after{content:'';position:absolute;background:#ff4d4d;left:50%;top:-8px;width:2px;height:32px;transform:translateX(-50%)}.ret.aimr::after{transform:translateX(-50%) rotate(90deg)}
.hb{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
.fb{position:absolute;left:50%;top:18%;transform:translate(-50%,-50%) scale(.6);font:900 clamp(16px,4cqw,34px) "Courier New",monospace;color:#fff;text-shadow:0 2px 0 #000,0 0 12px #000;opacity:0;transition:.2s}
.fb.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.fb.good{color:#7f7}.fb.bad{color:#ff8a7a}
.hpt{position:absolute;right:1.5cqw;top:1.5cqw;background:#000a;color:#ffcc33;font:700 clamp(10px,1.8cqw,16px) "Courier New",monospace;padding:2px 8px;border-radius:6px}
.playbar{background:var(--board);border:3px solid var(--gold);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}
.pb-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}.pb-who{flex:1;min-width:180px}.pb-count{font-family:"Courier New",monospace;color:var(--gold)}
.playbar .big{font-size:1.15em;font-weight:800;padding:12px 22px;background:#b8262a;border-color:#ffcc33;flex:1;min-width:150px;touch-action:manipulation}
.playbar button.on{background:var(--gold);color:#111}.pb-help{font-size:12px;opacity:.7;text-align:center}
.meter{position:relative;flex:1;min-width:160px;height:22px;background:linear-gradient(90deg,#444,#666);border-radius:11px;overflow:hidden;border:2px solid #fff4}
.meter .sweet{position:absolute;left:78%;width:12%;top:0;bottom:0;background:#3c3}.meter i{position:absolute;top:-2px;bottom:-2px;width:4px;background:#fff;box-shadow:0 0 6px #fff;transform:translateX(-50%)}
.park.live{touch-action:none}