:root{--bg:#0b1220;--panel:#111827;--panel-2:#1f2937;--text:#f9fafb;--muted:#a7b0bf;--accent:#22c55e;--accent-2:#16a34a;--border:#334155;--shadow:0 14px 36px rgba(0,0,0,.35);--player-font:clamp(2rem,7vh,5rem)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none}button,input{font:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}.app-shell{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.topbar{display:grid;grid-template-columns:1fr auto auto auto auto;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border)}.brand{font-weight:900;font-size:clamp(1.15rem,2.2vw,1.8rem);letter-spacing:.08em}.subtitle{color:var(--muted);font-size:clamp(.68rem,1.35vw,.9rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.match-meta{text-align:right;min-width:8rem}.possession-label{font-weight:800}.total{color:var(--accent);font-weight:800}body.mode-zonal #possessionLabel,body.mode-zonal #totalDisplay{color:var(--text);font-weight:900}.icon-btn{border:1px solid var(--border);border-radius:.7rem;background:var(--panel-2);color:var(--text);min-width:44px;min-height:44px;font-size:1.25rem}.icon-btn:disabled{opacity:.35;cursor:not-allowed}#liveUndoBtn{width:auto;padding:0 .9rem;font-size:1rem;font-weight:800;white-space:nowrap}
#flipZonesBtn{width:auto;padding:0 .7rem;font-size:.9rem;font-weight:800;white-space:nowrap}
#flipZonesBtn[aria-pressed="true"]{background:var(--accent-2);border-color:var(--accent);color:#04120a}
#flipZonesBtn[hidden]{display:none}.view{display:none;min-height:0}.view.active{display:block}#matchView{position:relative;padding:8px;min-height:0;overflow:hidden}.player-grid[hidden],.zonal-grid[hidden]{display:none!important}.player-grid{height:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:.45rem}.player-btn{border:1px solid #3f4c60;border-radius:.7rem;background:linear-gradient(180deg,#1e293b,#111827);color:var(--text);display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:.25rem .35rem;overflow:hidden}.player-btn:active{transform:scale(.97);background:#263449}.player-line{display:flex;align-items:baseline;justify-content:center;gap:.16em;white-space:nowrap;font-weight:900;line-height:1}.player-number{font-size:var(--player-font);color:var(--text);font-weight:900}.player-separator{font-size:calc(var(--player-font) * .78);color:#94a3b8;font-weight:800}.player-count{font-size:calc(var(--player-font) * .9);color:var(--accent);font-weight:900}.player-btn.zero .player-count{color:#94a3b8}.zonal-grid{height:100%;min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;padding:3px;overflow:hidden}
.zone-block{border:1px solid var(--border);border-radius:.75rem;background:#0f172a;padding:8px;min-width:0;min-height:0;display:flex;flex-direction:column;container-type:size;container-name:zone-block}
.zone-heading{display:flex;flex-direction:column;gap:1px;margin-bottom:2px}
.zone-number{font-size:clamp(12px,min(9.5cqh,8.5cqw),20px);font-weight:900;color:var(--text);line-height:1}
.zone-boundary{font-size:clamp(10px,min(7cqh,6.5cqw),16px);font-weight:800;color:var(--text);line-height:1.05;min-width:0}
.zone-body{flex:1;min-height:0;display:grid;grid-template-rows:minmax(28px,26fr) minmax(28px,26fr) minmax(48px,48fr);gap:6px}
.zone-trend{min-height:0;min-width:0;display:grid;grid-template-rows:auto auto minmax(40px,1fr);gap:1px;border-top:1px solid var(--border);padding-top:2px}
.zone-trend-recent{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.zone-trend-recent-label{font-size:clamp(9px,min(5cqh,4.5cqw),14px);color:var(--muted);letter-spacing:.04em;font-weight:700}
.zone-trend-recent-value{font-size:clamp(12px,min(9cqh,8cqw),23px);font-weight:900;line-height:1.05}
.zone-trend-unavailable{font-size:clamp(10px,min(6.3cqh,5.8cqw),14px);color:var(--muted)!important}
.zone-trend-overall{display:flex;align-items:baseline;gap:5px}
.zone-trend-overall-label{font-size:clamp(7px,min(4cqh,3.5cqw),11px);color:var(--muted);letter-spacing:.03em;font-weight:700}
.zone-trend-overall-value{font-size:clamp(10px,min(6cqh,5.5cqw),17px);font-weight:800}
.zone-trend-svg{width:100%;height:100%;display:block}
.zone-trend-line{stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.zone-trend-zero{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}
.zone-trend-chart{min-height:0;min-width:0}
.zone-tap{appearance:none;-webkit-appearance:none;border:1px solid var(--border);border-radius:.6rem;background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;width:100%;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size;container-name:zone-tap;overflow:hidden}
.zone-tap:active{background:var(--panel)}
.zone-tap-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18em;width:100%;height:100%;min-width:0;min-height:0;font-size:clamp(9px,min(42cqh,24cqw),2.6rem)}
.zone-side-label{display:block;font-weight:800;font-size:.48em;letter-spacing:.03em;color:var(--text);line-height:1.1;max-width:100%}
.zone-side-count{display:block;font-weight:900;font-size:1em;color:var(--accent);line-height:1;max-width:100%}
.zone-preview{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem}
.preview-zone{border:1px solid var(--border);border-radius:.6rem;padding:.5rem .7rem;background:#0f172a}.zone-card{border:1px solid var(--border);border-radius:.7rem;padding:.7rem;margin-bottom:.8rem;background:#0f172a}.zone-card-heading{font-weight:900;color:var(--accent);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem}.preview-invalid{color:#f87171;font-weight:700;padding:.5rem .1rem}.no-active{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:1.1rem;padding:2rem}.no-active[hidden]{display:none}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.66);display:none;align-items:center;justify-content:center;padding:2vh 2vw;z-index:50}.overlay.open{display:flex}.panel{width:min(94vw,900px);max-height:92dvh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:1rem;box-shadow:var(--shadow);padding:1rem}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.panel-head h2{margin-bottom:.2rem}h1,h2,p{margin-top:0}.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.menu-grid button,.manage-actions button,.saved-actions button,.primary-btn{border:1px solid var(--border);border-radius:.75rem;padding:.9rem;background:var(--panel-2);color:var(--text);font-weight:800}.primary-btn{background:var(--accent-2);border-color:var(--accent)}.danger{background:#3b1116!important;border-color:#7f1d1d!important;color:#fecaca!important}.field-label{display:block;color:var(--muted);font-weight:700;margin-bottom:.35rem}.text-input{width:100%;background:#0f172a;color:var(--text);border:1px solid var(--border);border-radius:.7rem;padding:.75rem;margin-bottom:.8rem}.setup-note{font-size:.9rem;margin-bottom:.8rem}.setup-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}.setup-player{display:flex;align-items:center;gap:.35rem;background:#0f172a;border:1px solid var(--border);border-radius:.55rem;padding:.55rem}.setup-slot{font-size:.72rem;color:var(--muted);font-weight:800}.setup-player input[type=number]{width:100%;min-width:0;border:0;background:transparent;color:var(--text);font-weight:900;outline:none}.manage-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}.manage-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}.manage-player{display:flex;align-items:center;justify-content:center;gap:.55rem;background:#0f172a;border:1px solid var(--border);border-radius:.65rem;padding:.72rem .45rem;min-height:3.3rem;font-weight:900}.manage-player input[type=checkbox]{width:1.35rem;height:1.35rem;accent-color:var(--accent);flex:0 0 auto}.manage-player-text{display:flex;align-items:baseline;gap:.32rem;white-space:nowrap}.manage-number{font-size:1.15rem}.manage-count{color:var(--muted);font-size:.82rem}.panel-footer{margin-top:1rem;display:flex;justify-content:flex-end}.report-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--border);background:var(--panel)}.report-header h1{margin-bottom:.2rem;font-size:clamp(1.25rem,3vw,2rem)}.muted{color:var(--muted)}.report-body{padding:1rem;max-width:1100px;margin:0 auto}.report-total{font-size:1.05rem;font-weight:900;margin-bottom:1rem;color:var(--accent)}.bar-list{display:grid;gap:.65rem}.bar-row{display:grid;grid-template-columns:minmax(5rem,9rem) minmax(0,1fr) 3.5rem;align-items:center;gap:.75rem}.bar-label{font-weight:900;text-align:right}.bar-track{height:clamp(1.65rem,4vh,2.3rem);border-radius:.55rem;background:#172033;overflow:hidden;border:1px solid #263449}.bar-fill{height:100%;min-width:2px;background:linear-gradient(90deg,var(--accent-2),var(--accent));border-radius:.45rem}.bar-value{font-weight:900;font-size:1.1rem}.empty{color:var(--muted);text-align:center;padding:3rem 1rem;font-size:1.1rem}.saved-list{display:grid;gap:.65rem}.saved-card{border:1px solid var(--border);border-radius:.75rem;padding:.8rem;background:#0f172a}.saved-title{font-weight:900}.saved-meta{color:var(--muted);font-size:.85rem;margin:.25rem 0 .7rem}.saved-mode{color:var(--accent);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.15rem}.zone-report-list{display:flex;flex-direction:column;gap:.6rem}.zone-report-row{border:1px solid var(--border);border-radius:.7rem;padding:.6rem .8rem;background:#0f172a}.zone-report-counts{display:flex;gap:1.2rem;color:var(--text);font-weight:700}.saved-actions{display:flex;gap:.5rem;flex-wrap:wrap}.saved-actions button{padding:.55rem .7rem}.toast{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%) translateY(150%);opacity:0;transition:.2s ease;background:#020617;color:var(--text);border:1px solid var(--border);border-radius:.7rem;padding:.7rem 1rem;z-index:100;box-shadow:var(--shadow);font-weight:700}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}@media(max-width:720px){:root{--player-font:clamp(1.55rem,6.4vh,3.5rem)}.topbar{gap:.45rem;padding:.5rem .55rem}.subtitle{display:none}.match-meta{min-width:6.4rem}#matchView{padding:.35rem}.player-grid{gap:.28rem}.player-btn{border-radius:.5rem;padding:.15rem}.bar-row{grid-template-columns:4.5rem minmax(0,1fr) 2.7rem;gap:.45rem}.setup-grid,.manage-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.menu-grid{gap:.5rem}.menu-grid button{padding:.75rem .55rem}}@media(max-width:520px){.setup-grid,.manage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@supports not (container-type: size){
  .zone-number{font-size:18px}
  .zone-boundary{font-size:13px}
  .zone-trend-recent-label{font-size:12px}
  .zone-trend-recent-value{font-size:22px}
  .zone-trend-overall-label{font-size:10px}
  .zone-trend-overall-value{font-size:15px}
  .zone-side-label{font-size:.8rem}
  .zone-side-count{font-size:1.6rem}
}
@media(max-height:480px) and (orientation:landscape){
  .topbar{padding:5px 8px;gap:6px}
  .subtitle{display:none}
  .brand{font-size:1rem}
  .icon-btn{min-width:36px;min-height:36px;font-size:1rem}
  #liveUndoBtn{padding:0 10px;font-size:.8rem}
  #flipZonesBtn{padding:0 8px;font-size:.75rem}
  .match-meta{min-width:70px}
  .possession-label,.total{font-size:.8rem}
  #matchView{padding:5px}
  .zonal-grid{gap:6px}
  .zone-block{padding:6px}
  .zone-body{gap:4px}
  .zone-trend{padding-top:2px}
}