html,body,#root{width:100%;min-height:100vh;margin:0;padding:0}.zone-grid-wrap{flex-direction:column;align-items:center;gap:12px;display:flex}.zone-grid{aspect-ratio:3/2;background:repeating-linear-gradient(0deg, transparent, transparent 8px, #ffffff05 8px, #ffffff05 9px), var(--lcd-bg);border:3px solid var(--dirt);border-radius:8px;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:300px;padding:10px;display:grid;box-shadow:inset 0 0 24px #00000080}.zone-cell{background:var(--bg-panel);border:2px solid var(--grass);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;min-height:44px;transition:all .12s;display:flex;position:relative}.zone-cell:hover:not(:disabled){border-color:var(--lcd-green);background:#1a3326}.zone-cell:active:not(:disabled){transform:scale(.95)}.zone-cell.selected{background:var(--grass);border-color:var(--lcd-green);box-shadow:0 0 16px #5dff8f80}.zone-cell:disabled{cursor:default}.zone-label{color:var(--text-dim);letter-spacing:.5px;font-size:13px;font-weight:700}.zone-cell.selected .zone-label{color:#fff}.zone-cell.reveal-pitch{border-color:var(--amber);background:#ffb64833}.zone-cell.reveal-bat{border-color:var(--lcd-green);background:#5dff8f33}.zone-cell.reveal-pitch.reveal-bat{background:linear-gradient(135deg,#ffb6484d,#5dff8f4d);border-color:#fff;box-shadow:0 0 20px #fff6}.reveal-tag{font-size:20px;position:absolute}.pitch-tag{top:2px;right:4px}.bat-tag{bottom:2px;left:4px}.reveal-legend{color:var(--text-dim);gap:20px;font-size:12px;display:flex}.reveal-legend span{align-items:center;gap:6px;display:flex}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.dot.pitch{background:var(--amber)}.dot.bat{background:var(--lcd-green)}.scoreboard{background:var(--lcd-bg);border:3px solid var(--dirt);font-variant-numeric:tabular-nums;border-radius:12px;padding:14px 16px;box-shadow:inset 0 0 30px #0009,0 4px 12px #0006}.sb-top{border-bottom:1px dashed var(--lcd-dim);justify-content:space-between;align-items:center;gap:8px;padding-bottom:12px;display:flex}.sb-team{flex:1;align-items:center;gap:8px;display:flex}.sb-team:last-child{justify-content:flex-end}.sb-team-name{color:var(--text-dim);font-size:13px;font-weight:600}.sb-team-name.at-bat{color:var(--lcd-green);text-shadow:0 0 8px #5dff8f66}.sb-team-score{color:var(--lcd-green);text-shadow:0 0 12px #5dff8f66;text-align:center;min-width:32px;font-size:32px;font-weight:900}.sb-inning{align-items:baseline;gap:1px;padding:0 10px;display:flex}.sb-inning-num{color:var(--amber);font-size:24px;font-weight:900}.sb-inning-half{color:var(--amber);font-size:14px;font-weight:700}.sb-inning-max{color:var(--text-dim);font-size:12px}.sb-mid{justify-content:space-between;align-items:center;gap:16px;padding:14px 4px 8px;display:flex}.base-diamond{flex-shrink:0;width:76px;height:76px;position:relative}.base{border:2px solid var(--grass);background:#16291c;border-radius:3px;width:20px;height:20px;position:absolute;transform:rotate(45deg);box-shadow:inset 0 1px 3px #00000080}.base.occupied{background:var(--amber);border-color:#ffd24a;box-shadow:0 0 12px #ffb64899}.base-2{top:0;left:28px}.base-1{top:28px;right:0}.base-3{top:28px;left:0}.base-home{background:var(--white);border-color:var(--white);opacity:.5;bottom:0;left:28px}.sb-count{flex-direction:column;gap:6px;display:flex}.count-row{align-items:center;gap:8px;display:flex}.count-label{width:16px;color:var(--text-dim);font-size:14px;font-weight:800}.count-dots{gap:5px;display:flex}.count-dot{background:#16291c;border:1px solid #0006;border-radius:50%;width:14px;height:14px;transition:all .15s;box-shadow:inset 0 1px 2px #00000080}.count-dot.ball.on{background:var(--amber);box-shadow:0 0 8px #ffb64899}.count-dot.strike.on,.count-dot.out.on{background:var(--red);box-shadow:0 0 8px #ff5a5a99}.sb-status{text-align:center;border-top:1px dashed var(--lcd-dim);padding-top:10px;font-size:14px;font-weight:600}.status-bat{color:var(--lcd-green)}.status-pitch{color:var(--amber)}:root{--bg-deep:#0a1410;--bg-panel:#11201a;--grass:#2d6a3e;--grass-light:#3d8a52;--dirt:#8b5a2b;--lcd-bg:#0d1f12;--lcd-green:#5dff8f;--lcd-dim:#2a6e3f;--amber:#ffb648;--red:#ff5a5a;--white:#f0f5f1;--text-dim:#7a9485}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-deep);color:var(--white);-webkit-font-smoothing:antialiased;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif}.app-shell{background:radial-gradient(ellipse 120% 80% at 50% 0%, #15301f 0%, var(--bg-deep) 60%);justify-content:center;align-items:center;min-height:100dvh;padding:16px;display:flex}.center-msg{text-align:center;color:var(--text-dim)}.loading-ball{font-size:48px;animation:1.2s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.notice{color:var(--amber);margin-top:12px;font-size:14px}.lobby{text-align:center;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:420px;display:flex}.game-title{letter-spacing:-1px;color:var(--lcd-green);text-shadow:0 0 18px #5dff8f73;margin-top:8px;font-size:44px;font-weight:900}.subtitle{color:var(--text-dim);letter-spacing:.5px;margin-bottom:8px;font-size:15px}.name-input{background:var(--bg-panel);border:2px solid var(--grass);width:100%;max-width:280px;color:var(--white);text-align:center;border-radius:12px;outline:none;padding:14px 16px;font-size:16px;transition:border-color .15s}.name-input:focus{border-color:var(--lcd-green)}.name-input::placeholder{color:var(--text-dim)}.btn-primary{background:linear-gradient(180deg, var(--grass-light), var(--grass));color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;max-width:280px;padding:16px;font-size:17px;font-weight:700;transition:transform 80ms,box-shadow 80ms;box-shadow:0 4px #1d4a2c,0 6px 16px #0006}.btn-primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #1d4a2c,0 2px 8px #0006}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.queue-status{flex-direction:column;align-items:center;gap:12px;display:flex}.queue-status p{color:var(--amber)}.howto{width:100%;max-width:320px;margin-top:20px}.howto-toggle{border:1px solid var(--grass);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:8px;padding:8px 16px;font-size:13px}.howto-body{background:var(--bg-panel);text-align:left;color:var(--text-dim);border-radius:10px;margin-top:10px;padding:14px;font-size:13px;line-height:1.9}.howto-body b{color:var(--lcd-green)}.play-area{flex-direction:column;gap:14px;width:100%;max-width:440px;display:flex}.role-banner{text-align:center;padding:8px;font-size:15px;font-weight:600}.role-pitch{color:var(--amber)}.role-bat{color:var(--lcd-green)}.swing-toggle{justify-content:center;gap:8px;display:flex}.swing-toggle button{background:var(--bg-panel);border:2px solid var(--grass);max-width:130px;color:var(--text-dim);cursor:pointer;border-radius:10px;flex:1;padding:10px;font-size:15px;font-weight:600;transition:all .12s}.swing-toggle button.on{background:var(--grass);border-color:var(--lcd-green);color:#fff}.action-row{justify-content:center;align-items:center;min-height:60px;display:flex}.btn-pitch{background:linear-gradient(180deg, var(--amber), #e89a2e);color:#2a1a05;cursor:pointer;border:none;border-radius:14px;width:100%;max-width:280px;padding:18px;font-size:19px;font-weight:800;transition:transform 80ms,box-shadow 80ms;box-shadow:0 4px #b87410,0 6px 16px #0006}.btn-pitch:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #b87410}.btn-pitch:disabled{opacity:.4;cursor:not-allowed}.waiting{text-align:center}.dots-anim{color:var(--text-dim);font-size:15px}.dots-anim:after{content:"";animation:1.4s steps(4,end) infinite dots}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.opp-ready{color:var(--lcd-green);margin-top:6px;font-size:14px;font-weight:600;display:block}.result-flash{text-align:center;border-radius:14px;padding:16px;font-size:32px;font-weight:900;animation:.3s ease-out flash-in}@keyframes flash-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.r-strike,.r-out{color:var(--red)}.r-ball{color:var(--amber)}.r-foul{color:var(--text-dim)}.r-hit{color:var(--lcd-green);text-shadow:0 0 16px #5dff8f80}.r-hit2{color:#6dffea;text-shadow:0 0 16px #6dffea80}.r-hit3{color:#ffd24a;text-shadow:0 0 18px #ffd24a99}.r-hr{color:var(--amber);text-shadow:0 0 24px #ffb648b3;font-size:40px;animation:.3s ease-out flash-in,.5s ease-in-out .3s 2 hr-pulse}@keyframes hr-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.notice-bar{text-align:center;border:1px solid var(--amber);color:var(--amber);cursor:pointer;background:#ffb64826;border-radius:8px;padding:10px;font-size:14px}.gameover{text-align:center;flex-direction:column;align-items:center;gap:20px;display:flex}.result-banner{letter-spacing:-1px;font-size:56px;font-weight:900}.result-banner.win{color:var(--lcd-green);text-shadow:0 0 24px #5dff8f80}.result-banner.lose{color:var(--red)}.result-banner.draw{color:var(--amber)}.final-score{color:var(--white);align-items:center;gap:14px;font-size:28px;font-weight:700;display:flex}.final-score .vs{color:var(--text-dim)}@media (width<=380px){.game-title{font-size:36px}.result-flash{font-size:26px}.r-hr{font-size:32px}}@media (prefers-reduced-motion:reduce){.loading-ball,.result-flash,.r-hr,.dots-anim:after{animation:none}}.play-area-3d{width:100vw;height:100dvh;position:fixed;inset:0;overflow:hidden}.scene-zone{z-index:1;position:absolute;inset:0}.scene-zone canvas{display:block;width:100%!important;height:100%!important}.hud-top-zone{z-index:3;pointer-events:auto;transform-origin:0 0;transition:transform .3s,opacity .3s;position:absolute;top:10px;left:10px;transform:scale(.62)}.hud-top-zone.compact{opacity:.88;transform:scale(.5)}.hud-bottom-zone{z-index:3;pointer-events:auto;max-width:260px;position:absolute;bottom:10px;right:10px}.hud-bottom-zone .panel-card{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a1410e0;border:1px solid #2d6a3e8c;border-radius:12px;flex-direction:column;gap:6px;padding:8px 10px;transition:opacity .3s,transform .3s;display:flex}.hud-bottom-zone .panel-card.hidden{opacity:0;pointer-events:none;transform:translateY(12px)scale(.95)}.hud-bottom-zone .role-banner{text-align:center;padding:2px 0;font-size:11px}.hud-bottom-zone .swing-toggle{gap:4px;display:flex}.hud-bottom-zone .swing-toggle button{flex:1;padding:4px 6px;font-size:12px}.hud-bottom-zone .zone-grid{gap:4px}.hud-bottom-zone .zone-cell{min-height:36px;padding:4px;font-size:11px}.hud-bottom-zone .btn-pitch{padding:7px 10px;font-size:13px}.hud-bottom-zone .waiting{padding:6px;font-size:12px}.scene-zone .result-flash,.play-area-3d .result-flash{z-index:4;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a1410b3;padding:14px 28px;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.play-area-3d .result-flash.r-hr{animation:.3s ease-out flash-in,.5s ease-in-out .3s 2 hr-pulse}@media (width<=380px){.hud-top-zone{transform:scale(.5)}.hud-bottom-zone{max-width:220px;bottom:6px;right:6px}}@media (orientation:landscape) and (height<=500px){.hud-top-zone{transform:scale(.46)}.hud-bottom-zone{max-width:230px}}