/* Live Field: image-backed field; every pulsing pad is a direct command. */
#hud .field-panel { display: grid; grid-template-columns: auto auto; align-items: end; gap: 8px; }
#hud .live-field { grid-column: 2; grid-row: 1; width: 350px; height: auto; border-radius: 12px; overflow: hidden; pointer-events: auto; }
#hud .field-panel .pitch-cross { grid-column: 1; grid-row: 1; }
#hud .field-panel .pc-sub { grid-column: 1; grid-row: 2; }
#hud .mf-heading { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 0; color: var(--htext); font: italic 700 15px/1.2 var(--cond); }
#hud .mf-heading span { color: var(--hgold); font: 600 11px var(--font); }
#hud .mf-heading b { flex: 1; }
#hud .mf-heading { padding-top: 0; min-height: 44px; gap: 7px; }
#hud .mf-auto { position: relative; min-width: 44px; min-height: 44px; padding: 4px 7px; border: 1px solid var(--hgold-soft); border-radius: 6px; background: #07152c66; color: var(--htext); font: italic 700 12px var(--cond); pointer-events: auto; cursor: pointer; }
#hud .mf-auto:disabled { color: var(--hmuted); cursor: default; }
#hud .mf-auto:focus-visible { outline: 2px solid var(--hgold); outline-offset: -4px; border-radius: 6px; }
#hud .mf-pitch { position: relative; width: 100%; aspect-ratio: 4/3; margin-bottom: 46px; }
#hud .mf-formations { display: flex; gap: 5px; padding: 0 8px 3px; }
#hud .mf-formations[hidden], #hud .mf-status[hidden] { display: none; }
#hud .mf-formations button { flex: 1; min-width: 0; min-height: 36px; padding: 5px 3px; border: 1px solid var(--hgold-soft); border-radius: 6px; background: #07152c88; color: var(--htext); font: 700 12px/1.2 var(--font); cursor: pointer; touch-action: none; }
#hud .mf-formations button[aria-pressed="true"] { border-color: #ffe39a; background: #e5bd5a; color: #13243d; }
#hud .mf-formations button:disabled { opacity: .55; cursor: default; }
#hud .mf-formations button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
#hud .mf-ground, #hud .mf-route, #hud .mf-players, #hud .mf-orders, #hud .mf-ball { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#hud .mf-ground { object-fit: contain; }
#hud .mf-route { z-index: 1; }
#hud .mf-players { z-index: 5; }
#hud .mf-orders { z-index: 5; }
#hud .mf-ball { z-index: 6; }
#hud .mf-head { position: absolute; z-index: 1; width: 32px; height: 32px; transform: translate(-50%,-50%); filter: drop-shadow(0 1px 1px #000b); pointer-events: none; }
#hud .mf-head[hidden] { display: none; }
#hud .mf-head img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 1px #c4d9ff); }
#hud .mf-head small { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); padding: 0 3px; border: 1px solid #a0c8ff; border-radius: 3px; background: #0c2853; color: #fff; font: 700 9px/12px var(--cond); white-space: nowrap; }
/* Runners always stay in front of overlapping defenders, regardless of DOM order. */
#hud .mf-head.runner { z-index: 3; filter: drop-shadow(0 0 2px #ffb744); }
#hud .mf-head.runner small { background: #933d14; color: #fff5bc; border-color: #ffd276; }
#hud .live-field .bd-base { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 4; pointer-events: auto; transform: translate(-50%,-50%); touch-action: none; color: #e9effb; }
#hud .live-field .bd-base::after { display: none; }
#hud .live-field .bd-base i { width: 20px; height: 20px; border: 1.5px solid #dceaff; border-radius: 2px; background: #c8d5e32b; box-shadow: none; }
#hud .live-field .bd-base:disabled { cursor: default; opacity: .72; }
#hud .live-field .bd-base.available i { background: #e5bd5a33; border-color: #fff2b9; animation: mfPulse 1.15s ease-in-out infinite; }
#hud .live-field .bd-base.selected i { background: var(--hgold); border-color: #fff9e4; box-shadow: 0 0 0 3px #ffd76666, 0 0 18px #ffd766; }
#hud .live-field .bd-base:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px; }
#hud .mf-status { margin: 2px 8px 8px; min-height: 29px; padding: 6px 8px; border: 1px solid #e5bd5a52; border-radius: 7px; color: #fff4d0; background: #07152caa; text-align: center; font: italic 700 13px/1.2 var(--cond); }
@keyframes mfPulse { 50% { box-shadow: 0 0 0 5px #ffd76666, 0 0 16px #ffd766; } }
html.short #hud .live-field { width: 276px; height: auto; }
html.short #hud .mf-heading { padding: 0 9px; font-size: 13px; }
html.short #hud .mf-head { width: 26px; height: 26px; }
html.short #hud .mf-status { margin: 2px 6px 6px; min-height: 25px; padding: 5px; font-size: 11px; }
html.short #hud .mf-pitch { aspect-ratio: 4/3; }
@media (prefers-reduced-motion: reduce) { #hud .live-field .bd-base.available i { animation: none; box-shadow: 0 0 0 3px #ffd76666; } }
/* On a phone the panel stays closed (nothing bottom right) till the scoreboard's bases are
   tapped (field-hud.css: they pulse while a runner's on); ✕ closes it, and it opens by itself
   while the ball's in play. The desktop's panel stays open and never shows ✕. */
#hud .mf-close { display: none; }
html.short #hud .live-field:not(.mf-open) { display: none; }
html.short #hud .live-field.mf-open .mf-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--hgold-soft); border-radius: 6px; background: #07152c66; color: var(--htext); font: 700 15px var(--font); cursor: pointer; pointer-events: auto; }
/* Opened on a phone, the panel stays under the top-right buttons: its map narrows with the
   screen's height (the heading, formations, status and the catcher under home take about 150px,
   the bottom gap and the buttons above another 66px) and the catcher keeps only the room it needs. */
html.short #hud .live-field.mf-open { width: min(276px, calc((var(--gh) - 216px) * 4 / 3)); }
html.short #hud .live-field .mf-pitch { margin-bottom: 30px; }