:root{
  --ink:#13201B; --ink-soft:#4A5A53; --chalk:#FBFAF6; --line:#D6D9D2;
  --pitch:#2F6B4F; --pitch-soft:#E4EDE7; --short:#B4560F; --over:#7A2E2E; --ok:#2F6B4F;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--chalk);color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.45;padding:0 0 80px;
  -webkit-user-select:none;user-select:none;
}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em}
h2{font-size:16px}
h3{font-size:12px;font-weight:700;color:var(--ink-soft)}

.topbar{position:sticky;top:0;z-index:20;background:var(--ink);display:flex;align-items:stretch}
.topbar .brand{
  display:flex;flex-direction:column;justify-content:center;padding:0 9px;color:var(--chalk);
  font-size:12px;font-weight:800;line-height:1.15;border-right:1px solid #2A3B34;white-space:nowrap;
}
.topbar .brand .sub{font-size:9px;font-weight:600;color:#8FA49B}
.topbar .brand .sync.offline{color:#F2B36B}
.topbar .hamenu{
  appearance:none;border:0;background:var(--ink);color:var(--chalk);font-size:20px;line-height:1;
  padding:0 12px;cursor:pointer;border-right:1px solid #2A3B34;
}
.topbar .hamenu[hidden]{display:none}
.histrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.histrow .when{flex:1}
.topbar nav{display:flex;flex:1}
.topbar nav button{
  flex:1;appearance:none;border:0;cursor:pointer;background:var(--ink);color:#9FB0A8;
  font:inherit;font-weight:700;font-size:13px;padding:7px 2px;border-bottom:3px solid transparent;
}
.topbar nav button[aria-selected="true"]{color:var(--chalk);border-bottom-color:var(--pitch)}
.topbar nav button:focus-visible{outline:2px solid var(--chalk);outline-offset:-3px}

main{padding:12px;max-width:1440px;margin:0 auto}
section[hidden]{display:none}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}
.card[hidden]{display:none}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row[hidden]{display:none}
.spread{justify-content:space-between}
button.btn{
  appearance:none;font:inherit;font-weight:700;cursor:pointer;
  border:1px solid var(--ink);background:#fff;color:var(--ink);
  border-radius:8px;padding:9px 13px;min-height:42px;
}
button.btn.primary{background:var(--ink);color:var(--chalk)}
button.btn.green{background:var(--pitch);border-color:var(--pitch);color:#fff}
button.btn.quiet{border-color:var(--line);color:var(--ink-soft);font-weight:600}
button.btn.sm{min-height:36px;padding:6px 11px;font-size:13px}
button.btn:focus-visible{outline:3px solid var(--pitch);outline-offset:2px}
button.btn:disabled{opacity:.42;cursor:not-allowed}
input,select{
  font:inherit;padding:8px 9px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);min-height:42px;-webkit-user-select:text;user-select:text;
}
input[type=number]{width:78px}
input[type=checkbox]{min-height:0;width:20px;height:20px;padding:0;margin:0;accent-color:var(--pitch)}
label.check{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;font-weight:700}
label.check[hidden]{display:none}
.toast{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);
  background:var(--ink);color:var(--chalk);border-radius:10px;padding:8px 8px 8px 14px;
  font-size:14px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.toast[hidden]{display:none}
.toast.second{bottom:76px;flex-wrap:wrap}
label.field{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:700;color:var(--ink-soft)}
select.qform{min-height:36px;padding:4px 8px;font-size:13px;font-weight:800}

.banner{
  background:#FFF4E2;border:1px solid var(--short);color:var(--short);
  border-radius:8px;padding:9px 11px;font-size:13px;font-weight:700;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
}
.banner[hidden]{display:none}

.qtabs{display:flex;gap:5px;margin-bottom:10px}
.qtabs button{
  flex:1;appearance:none;font:inherit;font-weight:800;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  border-radius:8px;padding:9px 2px;min-height:44px;
}
.qtabs button[aria-selected="true"]{background:var(--pitch);border-color:var(--pitch);color:#fff}
.qtabs button .qf{display:block;font-size:10px;font-weight:600;opacity:.8;letter-spacing:0}

.scen{display:flex;gap:5px;margin-bottom:10px}
.scen[hidden]{display:none}
.scen button{
  flex:1;appearance:none;font:inherit;font-weight:800;font-size:13px;cursor:pointer;
  border:2px solid var(--line);background:#fff;color:var(--ink-soft);
  border-radius:8px;padding:9px 4px;min-height:44px;
}
.scen button[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:#fff}

/* field + flanking bench */
.fieldgrid{display:grid;grid-template-columns:1fr;gap:8px;align-items:start}
@media(min-width:760px){
  .fieldgrid{grid-template-columns:minmax(120px,1fr) minmax(300px,420px) minmax(120px,1fr)}
  /* pin every child to its own column so hiding the reference panel does not
     let the bench and pitch slide into the wrong columns */
  #benchLeft{grid-column:1}
  .fieldgrid .pitchwrap{grid-column:2}
  #benchRight{grid-column:3}
  #prevWrap{grid-column:1 / -1;order:9}
  #prevBody{grid-template-columns:minmax(0,190px) minmax(0,1fr)}
  .benchcol{display:flex;flex-direction:column;gap:6px}
  .benchcol .chip{width:100%;justify-content:center;text-align:center}
  .benchstrip{display:none}
}
@media(min-width:1180px){
  /* reference sits beside the working pitch so it stays visible while dragging.
     Columns are assigned explicitly: on Q1 the reference is hidden and its
     column simply sits empty rather than everything shifting left. */
  .fieldgrid{grid-template-columns:260px minmax(110px,1fr) minmax(300px,430px) minmax(110px,1fr)}
  #prevWrap{grid-column:1;grid-row:1;order:0;position:sticky;top:64px;align-self:start}
  #benchLeft{grid-column:2;grid-row:1}
  .fieldgrid .pitchwrap{grid-column:3;grid-row:1}
  #benchRight{grid-column:4;grid-row:1}
  #prevBody{grid-template-columns:1fr}
  .prevchanges{font-size:12px}
}
@media(max-width:759px){
  .benchcol{display:none}
}
.benchstrip{margin-bottom:8px}
.benchhdr{font-size:11px;font-weight:800;color:var(--ink-soft);margin-bottom:4px}

#prevWrap{border:1px solid var(--line);border-radius:10px;background:#F6F7F5;padding:8px;min-width:0}
.prevhdr{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--ink-soft)}
#prevBody{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:10px;align-items:start;margin-top:8px}
@media(max-width:600px){ #prevBody{grid-template-columns:1fr} }
.prevpitch svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.prevchanges{font-size:13px;line-height:1.5}
.prevchanges b{font-size:11px;color:var(--ink-soft);display:block;margin-bottom:2px}
.prevchanges .on{color:var(--ok);font-weight:700}
.prevchanges .off{color:var(--short);font-weight:700}
.prevchanges .same{color:var(--ink-soft)}
.pitchwrap{background:var(--pitch-soft);border-radius:10px;padding:6px;touch-action:none}
svg.pitch{display:block;width:100%;height:auto;touch-action:none}
.slotbox{fill:#fff;stroke:var(--pitch);stroke-width:1.5;cursor:grab}
.slotbox.empty{fill:#fff;stroke-dasharray:4 3;stroke:#9AAFA3}
.slotbox.sel{fill:#FFF4E2;stroke:var(--short);stroke-width:3}
.slotbox.hot{fill:#E2F0E8;stroke:var(--short);stroke-width:3}
.slotnum{font-size:9px;font-weight:700;fill:var(--ink-soft)}
.slotname{font-size:11px;font-weight:800;fill:var(--ink);text-anchor:middle;pointer-events:none}
.slotpos{font-size:8px;font-weight:700;fill:var(--ink-soft);text-anchor:middle;pointer-events:none}
.slotbox.tier1{fill:#F2F8F4}
.slotbox.tier3{fill:#FFFBF3}

.chips{display:flex;flex-wrap:wrap;gap:6px;touch-action:none}
.chip{
  appearance:none;font:inherit;font-weight:700;font-size:14px;cursor:grab;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:8px 12px;min-height:40px;touch-action:none;
}
.chip.sel{background:#FFF4E2;border-color:var(--short);border-width:2px}
.chip.t1{border-left:5px solid var(--pitch)}
.chip.t3{border-left:5px solid #C99A4E}
.chip .n{color:var(--ink-soft);font-weight:600;margin-right:4px}
.chip.out{opacity:.45;text-decoration:line-through;border-style:dashed}
.chip .gkmark{font-size:10px;color:var(--pitch);font-weight:800;margin-left:4px}

#ghost{
  position:fixed;z-index:999;pointer-events:none;display:none;
  background:var(--ink);color:#fff;font-weight:800;font-size:14px;
  padding:8px 13px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35);
  transform:translate(-50%,-140%);
}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:7px 5px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:11px;color:var(--ink-soft);font-weight:700;line-height:1.25;vertical-align:bottom}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
#seasonTable th,#seasonTable td{text-align:center}
#gameList th.num,#gameList td.num{text-align:center}
#seasonTable,#gameList,#rosterList,#planSits{overflow-x:auto;-webkit-overflow-scrolling:touch}
tr.short td{background:#FFF6EC}
tr.over td{background:#FBEFEF}
.tag{font-size:11px;font-weight:800;padding:2px 6px;border-radius:4px}
.tag.short{background:#FBE6CE;color:var(--short)}
.tag.over{background:#F3DCDC;color:var(--over)}
.tag.ok{background:#DCEAE1;color:var(--ok)}
.tag.planned{background:#E4E8F2;color:#34466B}
.scrollx{overflow-x:auto;max-width:100%}
.posnote{font-size:11px;color:var(--short);font-weight:700;margin-top:2px;max-width:260px}
.oppnote{font-size:13px;margin-top:6px;padding:7px 9px;background:#F6F7F5;border:1px solid var(--line);border-radius:8px;-webkit-user-select:text;user-select:text}

.hint{font-size:12px;color:var(--ink-soft);margin:6px 0 0}
.warn{font-size:13px;color:var(--short);font-weight:700;margin:4px 0 0}

/* print sheet */
#printSheet{display:none}
.print-page{break-after:page;page-break-after:always;break-inside:avoid;page-break-inside:avoid;overflow:hidden}
.print-page:last-child{break-after:auto;page-break-after:auto}
.psheet-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #000;padding-bottom:3pt;margin-bottom:6pt}
.psheet-head h1{font-size:14pt}
.psheet-head .sub{font-size:9pt;font-weight:700}
.pquarter-title{margin:0 0 6pt;border:3px solid #000;padding:4pt;text-align:center;font-size:24pt;font-weight:900;line-height:1;letter-spacing:.08em}
.pquarter-instruction{text-align:center;font-size:9pt;font-weight:800;margin:-2pt 0 5pt}
.ppage-body{display:grid;grid-template-columns:minmax(0,1fr) 180pt;gap:8pt;align-items:start}
.pmain{min-width:0}
.pfield-single svg{display:block;width:auto;height:6.15in;max-width:100%;margin:0 auto}
.q4grid{display:grid;grid-template-columns:1fr 1fr;gap:6pt}
.q4choice{border:2px solid #000;padding:3pt;break-inside:avoid}
.q4choice h4{margin:0 0 3pt;padding:3pt 2pt;border-bottom:2px solid #000;text-align:center;font-size:14pt;font-weight:900;line-height:1;letter-spacing:.03em}
.q4choice svg{display:block;width:100%;height:auto}
.choicebox{display:inline-block;width:12pt;height:12pt;border:2px solid #000;vertical-align:-2pt;margin-right:4pt}
.pside{min-width:0;break-inside:avoid}
.pnotes{font-size:8pt;margin-top:6pt;border:1px solid #000;padding:3pt 4pt;line-height:1.3;break-inside:avoid;max-height:1.9in;overflow:hidden;word-wrap:break-word}
.pnotes .pline{border-bottom:1px solid #999;height:11pt;margin-top:3pt}
.psit{font-size:9pt;margin-top:3pt;line-height:1.3}
.psummary{border:2px solid #000;padding:4pt;break-inside:avoid}
.psummary h3{margin:0 0 2pt;text-align:center;font-size:12pt;font-weight:900;letter-spacing:.04em}
.psummary-sub{text-align:center;font-size:7.5pt;font-weight:700;margin-bottom:3pt}
.psummary table{font-size:8pt}
.psummary th,.psummary td{padding:2pt;border-bottom:.5pt solid #777}
.psummary th{text-align:center;color:#000;font-size:7.5pt;vertical-align:middle}
.psummary td:first-child{text-align:left;font-weight:700}
.psummary td.num{text-align:center;font-weight:800}
.psummary .outmark{text-align:center;font-weight:800;letter-spacing:.04em}
.psummary-note{font-size:7pt;line-height:1.2;margin-top:3pt}

@media(max-width:600px){
  main{padding:8px}
  .card{padding:10px}
  #seasonTable table{min-width:650px}
  #gameList table{min-width:650px}
  #rosterList table{min-width:760px}
  #planSits table{min-width:540px}
}


@media print{
  @page{margin:8mm;size:landscape}
  body{background:#fff;padding:0;font-size:10pt}
  .topbar,main,.toast{display:none !important}
  #printSheet{display:block !important}
}