/* * Field Play-by-Play styles. See playByPlay/fieldPbp.js and the mockup at * mockups/field-position/index.html for the canonical look. * * The field itself is sized by aspect-ratio so it fits any panel size while * keeping the 120:40 (length:width) proportion; all on-field elements are * %-positioned so they don't depend on the pixel size. */ :root { --fp-field: #3a7d44; --fp-field2: #347040; --fp-line: rgba(255, 255, 255, .85); --fp-guide: rgba(255, 255, 255, .34); --fp-rz: rgba(255, 80, 80, .72); --fp-ez: rgba(255, 255, 255, .13); --fp-blue: #2563eb; --fp-red: #dc2626; --fp-hold: #e0a64b; --fp-holdbg: #fff3d6; } /* Panel shell — mirrors the Full PBP panel: full-tab-only, no drag resize. */ .panel-playByPlayField { display: flex; flex-direction: column; min-height: 0; } /* Landscape takeover — CSS overlay, NOT the Fullscreen API (which iOS Safari honors only on