:root{--bg:#0e0709;--surface-top:#1f1116;--surface-bot:#150a0c;--surface-grad:linear-gradient(180deg, #1f1116 0%, #150a0c 100%);--border:#352126;--ink:#ede4d8;--ink-strong:#fff;--ink-muted:#928379;--gold:#bd9553;--home:#5e7dbe;--home-soft:#5e7dbe;--away:#a0414a;--away-soft:#cd7c88;--pause-bg:#7c2a30;--team-neutral:#928379;--change-view-bg:#eacacf;--reset-bg:#7c2a30;--field-dark:#2b4832;--field-light:#70892b;--font-display:"Archivo", system-ui, -apple-system, sans-serif;--font-ui:"Space Grotesk", system-ui, -apple-system, sans-serif;--r-btn:8px;--r-card:10px;--shadow-card:0 4px 4px 0 #00000040}html,body,#root{background:var(--bg);width:100%;height:100%;color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;margin:0}*{box-sizing:border-box}button{font:inherit;color:inherit}:root{--edge:32px}.stage-host{background:var(--bg);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.topbar{height:9vh;min-height:64px;max-height:110px;padding:0 var(--edge);flex-shrink:0;grid-template-columns:clamp(240px,20vw,340px) 16px 1fr 16px clamp(240px,20vw,340px);align-items:center;gap:0;display:grid}.topbar-left{grid-column:1;justify-content:flex-start;align-items:center;display:flex}.topbar-centre{grid-column:3;justify-content:center;align-items:center;gap:14px;display:flex}.clock{font-family:var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;font-size:clamp(28px,5vh,64px);font-weight:700;line-height:1}.pause-btn{background:var(--pause-bg);width:clamp(36px,4vh,48px);height:clamp(36px,4vh,48px);color:var(--ink);cursor:pointer;border:0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;line-height:0;transition:filter .12s,transform .12s;display:flex}.pause-btn:hover{filter:brightness(1.15)}.pause-btn:active{transform:scale(.96)}.topbar-actions{grid-column:5;justify-content:flex-end;align-items:center;gap:8px;display:flex}.action-btn{border-radius:var(--r-btn);min-width:118px;height:clamp(32px,4vh,46px);font-family:var(--font-ui);white-space:nowrap;cursor:pointer;border:0;grid-template-columns:26px 1fr;align-items:center;padding:0 10px 0 8px;font-size:clamp(12px,1.4vh,15px);font-weight:600;transition:filter .12s,transform .12s;display:grid}.action-btn svg{justify-self:start}.action-btn span{text-align:center}.action-btn:hover{filter:brightness(1.05)}.action-btn:active{transform:translateY(1px)}.action-btn.settings{background:var(--change-view-bg);color:var(--bg)}.action-btn.download{background:var(--gold);color:var(--bg)}.action-btn.reset{background:var(--reset-bg);color:var(--ink)}.play-direction{border-radius:var(--r-btn);flex-shrink:0;justify-content:center;align-items:center;width:clamp(34px,4vh,46px);height:clamp(34px,4vh,46px);transition:color .16s,background .16s;display:flex}.play-direction.home{color:var(--home);background:color-mix(in srgb, var(--home) 16%, transparent)}.play-direction.away{color:var(--away-soft);background:color-mix(in srgb, var(--away) 20%, transparent)}.play-direction svg{transition:transform .2s}.half-stepper{border:1px solid var(--border);border-radius:var(--r-btn);background:var(--surface-grad);flex-shrink:0;align-items:center;gap:2px;height:clamp(32px,4vh,46px);padding:0 5px;display:flex}.half-btn{width:clamp(26px,3.2vh,36px);height:100%;color:var(--gold);cursor:pointer;background:0 0;border:0;border-radius:4px;place-items:center;padding:0;transition:color .12s,background .12s;display:grid}.half-btn:hover:not(:disabled){background:color-mix(in srgb, var(--gold) 16%, transparent)}.half-btn:disabled{color:var(--team-neutral);opacity:.4;cursor:default}.half-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}.half-value{font-family:var(--font-display);color:var(--ink);text-align:center;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;min-width:2.4ch;font-size:clamp(15px,2vh,21px);font-weight:700;line-height:1}.topbar-rule{background:var(--border);height:1px;margin:0 var(--edge);flex-shrink:0}.main-grid{min-height:0;padding:16px var(--edge) var(--edge);flex-direction:row;flex:1;gap:16px;display:flex}.main-grid>.panel.event-log{flex-direction:column;flex:0 0 clamp(240px,20vw,340px);height:100%;display:flex;overflow:hidden}.main-centre,.main-right{flex-direction:column;min-height:0;display:flex}.main-centre{flex:1}.main-right{flex-shrink:0;width:clamp(240px,20vw,340px)}.main-centre .panel.field-wrap,.main-right .panel.actions{flex:1;min-height:0}.panel{border-radius:var(--r-card);background:var(--surface-grad);border:1px solid var(--border);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.event-log-head{font-family:var(--font-display);color:var(--ink-strong);border-bottom:2px solid var(--border);grid-template-columns:80px 40px 1fr;align-items:baseline;gap:0;padding:10px 14px 8px;font-size:clamp(16px,2.2vh,24px);font-weight:700;line-height:1;display:grid}.event-log-head .ts{font-variant-numeric:tabular-nums;color:var(--ink)}.event-log-head .zone{text-align:center;color:var(--ink);font-size:clamp(13px,1.8vh,20px)}.event-log-head .latest-action{text-align:right}.event-log-list{padding:0 0 var(--r-card) 0;scrollbar-width:none;flex:1;min-height:0;margin:0;list-style:none;overflow-y:scroll}.event-log-list::-webkit-scrollbar{display:none}.event-row{font-family:var(--font-display);border-top:1px solid var(--border);grid-template-columns:80px 40px 1fr;align-items:baseline;padding:6px 14px;font-size:clamp(14px,1.8vh,20px);font-weight:700;line-height:1;display:grid}.event-row:first-child{border-top:none}.event-row .ts{color:var(--ink);font-variant-numeric:tabular-nums;font-size:clamp(12px,1.6vh,18px)}.event-row .zone{text-align:center;color:var(--ink);font-size:clamp(12px,1.6vh,18px)}.event-row .what{text-align:right}.event-row.home .what{color:var(--home)}.event-row.away .what{color:var(--away-soft)}.field{background:var(--bg);grid-template-columns:29px 1fr 1fr 1fr 1fr 1fr 29px;gap:4px;width:100%;height:100%;display:grid;position:relative}.field-arrow{pointer-events:none;color:var(--ink);opacity:.16;z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0 29px}.field-arrow svg{width:min(30%,240px);height:auto;display:block}.field-strip.left-strip.home{background:var(--home);border-radius:var(--r-card) 0 0 var(--r-card)}.field-strip.left-strip.away{background:var(--away);border-radius:var(--r-card) 0 0 var(--r-card)}.field-strip.right-strip.home{background:var(--home);border-radius:0 var(--r-card) var(--r-card) 0}.field-strip.right-strip.away{background:var(--away);border-radius:0 var(--r-card) var(--r-card) 0}.field-zone{cursor:pointer;font-family:var(--font-display);color:var(--ink);-webkit-user-select:none;user-select:none;place-items:start center;padding-top:18px;font-size:clamp(20px,3vh,36px);font-weight:700;transition:background .12s,color .12s,opacity .12s;display:grid}.field-zone.dim{background:color-mix(in srgb, var(--field-dark) 85%, #000);opacity:.65}.field-zone.armed.home{background:var(--home);color:var(--ink-strong);opacity:1}.field-zone.armed.away{background:var(--away);color:var(--ink-strong);opacity:1}.actions-list{flex-direction:column;padding:0 22px;display:flex;position:absolute;inset:0}.action-row,.hotkey-guide-row{font-family:var(--font-display);border-top:2px solid var(--border);flex:1;grid-template-columns:1fr 44px;align-items:center;width:100%;padding:0;font-size:clamp(13px,1.8vh,20px);font-weight:700;line-height:1;display:grid}.action-row{color:var(--ink);border:0;border-top:2px solid var(--border);text-align:left;cursor:pointer;background:0 0;transition:color .12s}.action-row:first-child{border-top:none}.action-row:hover,.action-row.armed{color:var(--gold)}.action-row:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:6px}.hotkey-guide-row{color:var(--ink-muted);pointer-events:none;-webkit-user-select:none;user-select:none}.hotkey-guide-row:first-of-type{border-top:1px solid var(--gold)}.action-row .hotkey,.hotkey-guide-key{color:var(--gold);text-align:right;font-size:clamp(13px,1.8vh,20px);font-weight:700}.settings-view{background:var(--bg);flex-direction:column;flex:1;min-height:0;display:flex}.settings-head{height:9vh;min-height:64px;max-height:110px;padding:0 var(--edge);border-bottom:1px solid var(--border);flex-shrink:0;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.settings-title{font-family:var(--font-display);color:var(--ink-strong);letter-spacing:-.01em;grid-column:2;margin:0;font-size:clamp(20px,3.4vh,38px);font-weight:700;line-height:1}.settings-back,.settings-restore{border:1px solid var(--border);border-radius:var(--r-btn);background:var(--surface-grad);height:clamp(32px,4vh,46px);color:var(--ink);font-family:var(--font-ui);white-space:nowrap;cursor:pointer;align-items:center;gap:6px;padding:0 14px;font-size:clamp(12px,1.4vh,15px);font-weight:600;transition:color .12s,border-color .12s;display:inline-flex}.settings-back{grid-column:1;justify-self:start}.settings-restore{color:var(--gold);grid-column:3;justify-self:end}.settings-back:hover,.settings-restore:hover{border-color:var(--gold);color:var(--gold)}.settings-back:focus-visible,.settings-restore:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.settings-scroll{scrollbar-width:none;min-height:0;padding:20px var(--edge) var(--edge);flex:1;overflow-y:auto}.settings-scroll::-webkit-scrollbar{display:none}.settings-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:16px;max-width:1800px;margin:0 auto;display:grid}@media (width<=900px){.settings-grid{grid-template-columns:minmax(0,1fr)}}.settings-column{flex-direction:column;gap:16px;min-width:0;display:flex}.settings-card{padding:18px 22px 6px;overflow:visible}.settings-card-head{border-bottom:2px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;display:flex}.settings-card-head h2{font-family:var(--font-display);color:var(--ink-strong);margin:0;font-size:clamp(15px,2.1vh,22px);font-weight:700;line-height:1}.settings-note{color:var(--team-neutral);margin:12px 0 4px;font-size:clamp(11px,1.4vh,14px);line-height:1.45}.preset-group{border:1px solid var(--border);border-radius:var(--r-btn);background:var(--bg);gap:4px;padding:3px;display:inline-flex}.preset-btn{color:var(--team-neutral);font-family:var(--font-ui);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:6px 14px;font-size:clamp(11px,1.4vh,14px);font-weight:600;transition:background .12s,color .12s}.preset-btn:hover{color:var(--ink)}.preset-btn.active{background:var(--gold);color:var(--bg)}.preset-btn.custom{cursor:default;color:var(--gold);font-style:italic}.preset-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.binding-list{margin:8px 0 0;padding:0;list-style:none}.binding-row{border-top:1px solid var(--border);font-family:var(--font-display);grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:9px 0;font-size:clamp(13px,1.7vh,19px);font-weight:700;line-height:1;display:grid}.binding-row:first-child{border-top:none}.binding-label{color:var(--ink);min-width:0}.binding-error{font-family:var(--font-ui);color:var(--away-soft);text-align:right;font-size:clamp(10px,1.2vh,12px);font-weight:600}.binding-key{border:1px solid var(--border);background:var(--bg);min-width:58px;height:32px;color:var(--gold);font-family:var(--font-display);cursor:pointer;border-radius:6px;padding:0 10px;font-size:clamp(12px,1.6vh,17px);font-weight:700;transition:border-color .12s,color .12s,background .12s}.binding-key:hover{border-color:var(--gold)}.binding-key:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.binding-key.capturing{border-color:var(--gold);background:color-mix(in srgb, var(--gold) 18%, transparent);color:var(--ink-strong);animation:1.1s ease-in-out infinite capture-pulse}@keyframes capture-pulse{0%,to{opacity:1}50%{opacity:.55}}.setting-row{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding:14px 0;display:flex}.setting-row:first-of-type{border-top:none}.setting-copy{min-width:0}.setting-label{font-family:var(--font-display);color:var(--ink);cursor:pointer;font-size:clamp(13px,1.7vh,18px);font-weight:700;line-height:1.2;display:block}.setting-hint{color:var(--team-neutral);max-width:46ch;margin:4px 0 0;font-size:clamp(11px,1.3vh,13px);line-height:1.4}.switch{border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:999px;flex-shrink:0;width:50px;height:28px;padding:0;transition:background .16s,border-color .16s;position:relative}.switch-thumb{background:var(--team-neutral);border-radius:50%;width:20px;height:20px;transition:transform .16s,background .16s;position:absolute;top:3px;left:3px}.switch.on{background:color-mix(in srgb, var(--gold) 30%, transparent);border-color:var(--gold)}.switch.on .switch-thumb{background:var(--gold);transform:translate(22px)}.switch:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.step-field{border:1px solid var(--border);border-radius:var(--r-btn);background:var(--bg);flex-shrink:0;align-items:center;gap:2px;height:34px;padding:0 4px;display:flex}.step-btn{width:26px;height:26px;color:var(--gold);cursor:pointer;background:0 0;border:0;border-radius:4px;place-items:center;padding:0;font-size:17px;line-height:1;transition:background .12s;display:grid}.step-btn:hover{background:color-mix(in srgb, var(--gold) 16%, transparent)}.step-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}.step-input{width:46px;color:var(--ink);font-family:var(--font-display);text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield;background:0 0;border:0;font-size:clamp(13px,1.7vh,17px);font-weight:700}.step-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.step-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.step-input:focus{outline:none}.step-input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}.step-unit{color:var(--team-neutral);padding-right:2px;font-size:clamp(11px,1.4vh,14px);font-weight:600}