/* ==========================================================================
   야구장 그림 (sim-field.js) — /sim/ · /play/ 공통
   ========================================================================== */
.sim-field { width: 100%; height: auto; }
.f-grass { fill: var(--grass); }
.f-track { fill: none; stroke: var(--dirt); stroke-width: 5; opacity: .75; }
.f-dirt, .f-plate-dirt, .f-mound { fill: var(--dirt); }
.f-infield { fill: var(--grass-2); }
.f-line { fill: none; stroke: var(--chalk); stroke-width: .9; }
.f-mound { stroke: var(--chalk); stroke-width: .4; }
.f-base { fill: var(--chalk); stroke: color-mix(in srgb, var(--ink) 25%, transparent); stroke-width: .3; }
.f-fielders circle { stroke-width: 1; }
.f-fielders text { font: 800 5.4px var(--font-sans); text-anchor: middle; }
.f-fielders--opp circle { fill: color-mix(in srgb, var(--muted) 30%, var(--surface)); stroke: var(--muted); }
.f-fielders--opp text { fill: var(--ink-2); }
.f-fielders--us circle { fill: var(--navy); stroke: #fff; }
.f-fielders--us text { fill: #fff; }
.f-runners circle { stroke: #fff; stroke-width: 1.4; }
.f-runners--us circle { fill: var(--sbo); }
.f-runners--opp circle { fill: var(--crown); }
.f-me__ring { fill: var(--honey); }
.f-me__bg { fill: #FFF8EC; }
.f-me__tag rect { fill: var(--navy); }
.f-me__tag text { fill: #fff; font: 800 6px var(--font-sans); text-anchor: middle; }
.ball circle { fill: #fff; stroke: #8A90A8; stroke-width: .7; }
.ball-path { fill: none; stroke: #fff; stroke-width: 1.1; stroke-dasharray: 2.4 2; opacity: .95; }
.ball-path--liner, .ball-path--throw { stroke-dasharray: none; }
.arw { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.arw--ok { stroke: var(--ok); }
.arw--bad { stroke: var(--danger); stroke-dasharray: 4 3; }
.arw--later { stroke-dasharray: 3 2.6; }
.ah--ok { fill: var(--ok); }
.ah--bad { fill: var(--danger); }
.ring { fill: none; stroke-width: 2; }
.ring--ok { stroke: var(--ok); }
.ring--bad { stroke: var(--danger); stroke-dasharray: 3 2.4; }
.ring--look { stroke-dasharray: 1.6 2; }
:root:not([data-theme="light"]) .sim-field .f-line { stroke-width: .8; }

/* 움직임 (모션 줄이기 설정이면 꺼짐) */
.sim-field.is-anim .ball-path { animation: draw .7s ease-out both; stroke-dasharray: var(--len); }
.sim-field.is-anim .ball-path--ground, .sim-field.is-anim .ball-path--fly { animation: draw .7s ease-out both, dashify 0s .7s forwards; }
.sim-field.is-anim .ball { animation: ballin .25s .6s ease-out both; }
.sim-field.is-anim .arw:not(.arw--bad):not(.arw--later) { stroke-dasharray: var(--len); animation: draw .6s .1s ease-out both; }
.sim-field.is-anim .arw--bad, .sim-field.is-anim .arw--later, .sim-field.is-anim .ring { animation: fadein .4s ease both; }
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes dashify { to { stroke-dasharray: 2.4 2; } }
@keyframes ballin { from { opacity: 0; transform: var(--t, none) scale(.3); } }
@keyframes fadein { from { opacity: 0; } }
.sim-field.is-anim .ball { transform-box: fill-box; }
.fx-off .sim-field * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  body:not(.fx-on) .sim-field * { animation: none !important; }
  .sim-timer i.is-run { transition-duration: 6s; }
}

.mover--run { fill: var(--honey); stroke: #fff; stroke-width: 1.2; }
.mover--ball { fill: #fff; stroke: #8A90A8; stroke-width: .7; }