:root{
  --navy-900:#0b1220;
  --navy-800:#101a2e;
  --navy-700:#1e2d4f;
  --navy-600:#2b3d64;
  --line:#3a4d78;
  --orange:#e8622c;
  --orange-lo:#c04a19;
  --white:#f6f8fc;
  --dim:#a8b6d1;
  --green:#3ddc84;
  --red:#ff5a52;
  --tap:52px;
  --r:12px;
  font-size:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--navy-900);
  color:var(--white);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  font-weight:500;
  padding-bottom:32px;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:contain;
  overflow-x:hidden;
}
h1,h2,h3,.num,.callnum,.stepval,.save,.step{font-family:'Barlow Condensed','Barlow',sans-serif}
button,input,select{font-family:inherit;font-size:1rem;color:inherit}
button{cursor:pointer;border:0;background:none}
main{padding:12px;display:block;max-width:1100px;margin:0 auto;width:100%;min-width:0}
.view{display:flex;flex-direction:column;gap:14px;min-width:0}

/* ---------- header ---------- */
.topbar>*{min-width:0}
.topbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,var(--navy-700),var(--navy-800));
  border-bottom:3px solid var(--orange);
  padding:10px 12px;
  display:grid;gap:8px;
  grid-template-columns:minmax(0,1fr);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:38px;height:38px;color:var(--white);flex:0 0 auto}
.brandtext{display:flex;flex-direction:column;line-height:1;min-width:0}
.bt1{font-family:'Barlow Condensed';font-weight:700;font-size:1.35rem;letter-spacing:.06em}
.bt2{font-size:.72rem;color:var(--orange);letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.connpill{margin-left:12px;padding:3px 10px;border-radius:999px;font-size:.62rem;font-weight:700;letter-spacing:.08em;white-space:nowrap;flex-shrink:0}
.connpill.online{background:rgba(70,180,120,.15);color:#5fd393;border:1px solid rgba(95,211,147,.35)}
.connpill.offline{background:rgba(232,98,44,.15);color:var(--orange);border:1px solid rgba(232,98,44,.4)}
.connpill.syncing{background:rgba(90,140,220,.15);color:#7fb0f5;border:1px solid rgba(127,176,245,.4)}
.connpill.unavailable{background:rgba(150,150,150,.15);color:#a9a9a9;border:1px solid rgba(169,169,169,.4)}
@media (max-width: 900px){.connpill{margin-left:8px;padding:3px 8px;font-size:.55rem;letter-spacing:.05em}}
.gameinfo{display:flex;gap:8px}
.mini{flex:1 1 0;display:flex;align-items:center;gap:6px;background:var(--navy-900);border:1.5px solid var(--line);border-radius:10px;padding:0 8px;min-height:44px;min-width:0}
.mini span{font-size:.62rem;letter-spacing:.12em;color:var(--dim);font-weight:700}
.mini input{flex:1;min-width:0;background:none;border:0;outline:none;font-weight:600;font-size:.95rem;padding:8px 0}
.mini input::placeholder{color:#6c7d9e}

.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.stat{background:var(--navy-900);border:1.5px solid var(--line);border-radius:10px;padding:5px 4px;text-align:center;min-width:0}
.stat b{display:block;font-family:'Barlow Condensed';font-size:1.5rem;line-height:1;font-weight:700}
.stat span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.56rem;letter-spacing:.1em;color:var(--dim);font-weight:700;margin-top:2px}
#stTd b{color:var(--orange)}

/* ---------- form ---------- */
.card{background:var(--navy-800);border:1.5px solid var(--line);border-radius:var(--r);padding:12px}
.formhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
h2{margin:0;font-size:1.15rem;letter-spacing:.12em;font-weight:700}
h2 em,label em{font-style:normal;color:var(--dim);font-weight:600;font-size:.7rem;letter-spacing:.06em}
.form.editing{border-color:var(--orange);box-shadow:0 0 0 2px rgba(232,98,44,.28)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0}
.field label{font-size:.68rem;letter-spacing:.14em;color:var(--dim);font-weight:700;text-transform:uppercase}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.row2>*{min-width:0}

.tapfield{
  min-height:var(--tap);
  background:var(--navy-900);
  border:2px solid var(--line);
  border-radius:var(--r);
  color:var(--white);
  font-weight:600;font-size:1.05rem;
  padding:10px 12px;
  width:100%;
  text-align:left;
  display:flex;align-items:center;gap:10px;
  outline:none;
}
.tapfield:focus-visible{border-color:var(--orange)}
input.tapfield::placeholder{color:#6c7d9e}
.tapfield.big{min-height:60px}
.tapfield[data-empty="1"] .calltext{color:#8494b5;font-weight:600}
.callnum{
  flex:0 0 auto;background:var(--navy-700);border:1.5px solid var(--line);
  border-radius:8px;padding:3px 8px;font-size:1.15rem;font-weight:700;letter-spacing:.02em;min-width:48px;text-align:center;
}
.tapfield:not([data-empty="1"]) .callnum{background:var(--orange);border-color:var(--orange);color:#160c05}
.calltext{flex:1;min-width:0;font-size:1.02rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis}

.stepper{display:flex;align-items:center;gap:6px;min-width:0}
.step{
  width:48px;height:var(--tap);flex:0 0 48px;
  background:var(--navy-700);border:2px solid var(--line);border-radius:var(--r);
  font-size:1.7rem;font-weight:700;line-height:1;color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.step:active{background:var(--orange);border-color:var(--orange);color:#160c05}
.stepval{
  flex:1 1 0;min-width:0;text-align:center;font-size:1.9rem;font-weight:700;line-height:var(--tap);
  background:var(--navy-900);border:2px solid var(--line);border-radius:var(--r);min-width:52px;
}

.chipwrap{position:relative;min-width:0}
.chipwrap:after{content:'';position:absolute;right:0;top:0;bottom:6px;width:26px;pointer-events:none;background:linear-gradient(90deg,rgba(16,26,46,0),var(--navy-800))}
.chipstrip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;min-width:0;max-width:100%}
.chipstrip::-webkit-scrollbar{display:none}
.chipstrip.wrap{flex-wrap:wrap;overflow:visible}
.chip{
  flex:0 0 auto;min-height:48px;min-width:48px;padding:6px 12px;
  background:var(--navy-700);border:2px solid var(--line);border-radius:10px;
  font-weight:700;font-size:1rem;color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.chip.neg{color:var(--red);border-color:#6b2e2c}
.chip.pos{color:var(--green);border-color:#28603f}
.chip.on{background:var(--orange);border-color:var(--orange);color:#160c05}
.chip.neg.on,.chip.pos.on{color:#160c05}
.resultchip{font-size:.92rem;letter-spacing:.04em;text-transform:uppercase}

.yardrow{display:flex;gap:10px;align-items:stretch}
select.tapfield{flex:1;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 12px) 22px;background-size:6px 6px;background-repeat:no-repeat;display:block;padding-right:34px}
.yardview{
  flex:0 0 84px;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed';font-size:2rem;font-weight:700;
  background:var(--navy-900);border:2px solid var(--line);border-radius:var(--r);
}
.yardview.neg{color:var(--red);border-color:#6b2e2c}
.yardview.pos{color:var(--green);border-color:#28603f}

.save{
  width:100%;min-height:60px;border-radius:var(--r);
  background:var(--orange);color:#160c05;
  font-size:1.5rem;font-weight:700;letter-spacing:.1em;
}
.save:active{background:var(--orange-lo)}
.save.danger{background:var(--red);color:#1c0906}
.ghost{
  min-height:44px;padding:0 12px;border:2px solid var(--line);border-radius:10px;
  background:var(--navy-700);color:var(--white);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
}
.ghost:active{border-color:var(--orange)}
.ghost.danger{color:var(--red);border-color:#6b2e2c}

/* ---------- log ---------- */
.logsec{display:flex;flex-direction:column;gap:8px}
.logcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.loghead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.count{background:var(--navy-700);border:1.5px solid var(--line);border-radius:8px;padding:0 8px;font-size:1rem}
.logactions{display:flex;gap:6px;flex-wrap:wrap}
.loglist{display:flex;flex-direction:column;gap:8px}
.empty{color:var(--dim);font-size:.9rem;background:var(--navy-800);border:1.5px dashed var(--line);border-radius:var(--r);padding:14px;margin:0;text-align:center}

.logrow{background:var(--navy-800);border:1.5px solid var(--line);border-left:5px solid var(--orange);border-radius:var(--r);padding:10px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.logrow .pnum{font-family:'Barlow Condensed';font-size:1.55rem;font-weight:700;color:var(--dim);min-width:32px;text-align:center;line-height:1}
.logmain{min-width:0}
.logcall{font-weight:700;font-size:1rem;line-height:1.2;overflow-wrap:anywhere}
.logmeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;font-size:.72rem;color:var(--dim);font-weight:600;letter-spacing:.04em}
.tag{background:var(--navy-700);border:1px solid var(--line);border-radius:6px;padding:2px 6px;text-transform:uppercase}
.tag.res{background:rgba(232,98,44,.16);border-color:var(--orange-lo);color:#ffb896}
.logright{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ydbig{font-family:'Barlow Condensed';font-size:1.85rem;font-weight:700;line-height:1}
.ydbig.neg{color:var(--red)}
.ydbig.pos{color:var(--green)}
.ydbig.zero{color:var(--dim)}
.rowbtns{display:flex;gap:6px}
.iconbtn{width:48px;height:48px;border:2px solid var(--line);border-radius:10px;background:var(--navy-700);font-size:1.05rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.iconbtn.del{color:var(--red);border-color:#6b2e2c}

/* ---------- sheets ---------- */
.sheet{
  position:fixed;inset:0;z-index:80;
  background:var(--navy-900);
  display:flex;flex-direction:column;
}
.sheetbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;background:var(--navy-700);border-bottom:3px solid var(--orange);flex:0 0 auto;
}
.sheetbar h3{margin:0;font-size:1.3rem;letter-spacing:.14em}
.close{width:48px;height:48px;border:2px solid var(--line);border-radius:10px;background:var(--navy-800);font-size:1.1rem;font-weight:700;color:var(--white);display:flex;align-items:center;justify-content:center}
.tabs{min-width:0;max-width:100%;display:flex;gap:6px;overflow-x:auto;padding:8px 12px;background:var(--navy-800);border-bottom:1.5px solid var(--line);flex:0 0 auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;min-height:48px;padding:0 14px;border:2px solid var(--line);border-radius:10px;background:var(--navy-700);color:var(--white);font-family:'Barlow Condensed';font-size:1.15rem;font-weight:700;letter-spacing:.08em}
.tab.on{background:var(--orange);border-color:var(--orange);color:#160c05}
.sheetbody{flex:1;overflow-y:auto;padding:12px 12px 40px;-webkit-overflow-scrolling:touch}
.grouphdr{font-family:'Barlow Condensed';font-size:1.1rem;letter-spacing:.14em;color:var(--orange);font-weight:700;margin:14px 0 8px;padding-bottom:4px;border-bottom:1.5px solid var(--line)}
.grouphdr:first-child{margin-top:0}
.playgrid{display:grid;grid-template-columns:1fr;gap:8px}
.playbtn{
  min-height:64px;display:flex;align-items:center;gap:10px;
  background:var(--navy-800);border:2px solid var(--line);border-radius:var(--r);
  padding:8px 10px;text-align:left;color:var(--white);
}
.playbtn:active{border-color:var(--orange);background:var(--navy-700)}
.playbtn .pn{flex:0 0 58px;text-align:center;font-family:'Barlow Condensed';font-size:1.6rem;font-weight:700;background:var(--orange);color:#160c05;border-radius:8px;padding:4px 0}
.playbtn .pc{font-size:1.08rem;font-weight:700;line-height:1.15}

.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.playercard{
  min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--navy-800);border:2px solid var(--line);border-radius:var(--r);padding:8px;color:var(--white);
}
.playercard:active{border-color:var(--orange);background:var(--navy-700)}
.playercard .jn{font-family:'Barlow Condensed';font-size:2.5rem;font-weight:700;line-height:1;color:var(--orange)}
.playercard .pnm{font-size:.85rem;font-weight:600;text-align:center;line-height:1.15}

/* ---------- confirm + toast ---------- */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(6,10,18,.78);display:flex;align-items:center;justify-content:center;padding:20px}
.confirm{background:var(--navy-800);border:2px solid var(--line);border-radius:var(--r);padding:16px;max-width:420px;width:100%}
.confirm p{margin:0 0 14px;font-size:1.05rem;font-weight:600}
.confirmrow{display:flex;gap:10px}
.confirmrow .ghost,.confirmrow .save{flex:1;min-height:52px;font-size:1.1rem}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:95;background:var(--orange);color:#160c05;font-weight:700;padding:12px 18px;border-radius:10px;max-width:90vw;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.45)}

/* ---------- responsive ---------- */
@media (min-width:560px){
  .playgrid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:repeat(4,1fr)}
  .stat b{font-size:1.7rem}
  .stat span{font-size:.62rem}
}
@media (min-width:700px){
  main{padding:16px}
  .view[data-view="log"]{display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,1.15fr);align-items:start;gap:16px}
  .gamectl,.camstrip,.advisor{grid-column:1 / -1}
}
@media (min-width:960px){
  .playgrid{grid-template-columns:repeat(3,1fr)}
  .view[data-view="log"]{grid-template-columns:400px 1fr}
  .topbar{grid-template-columns:auto minmax(220px,1fr) auto;align-items:center;gap:14px}
  .stats{grid-template-columns:repeat(5,76px)}
}

/* ---------- main tabs ---------- */
.maintabs{
  position:sticky;top:0;z-index:35;
  display:flex;gap:6px;padding:8px 12px;
  background:var(--navy-800);border-bottom:1.5px solid var(--line);
  max-width:1100px;margin:0 auto;width:100%;box-sizing:border-box;
  /* Nine tabs do not fit a phone. Let the strip itself scroll sideways
     instead of dragging the whole page with it. */
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.maintabs::-webkit-scrollbar{display:none}
.maintab{
  flex:1 0 auto;min-width:0;white-space:nowrap;padding:0 14px;
  min-height:48px;border:2px solid var(--line);border-radius:10px;
  background:var(--navy-700);color:var(--dim);font-family:'Barlow Condensed';
  font-size:1.05rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.maintab.on{background:var(--orange);border-color:var(--orange);color:#160c05}

/* ---------- game card ---------- */
.gamecard .formhead{flex-wrap:wrap;gap:8px}
.gamecard .formhead h2{flex:1 1 100%}
.gamecard .formhead h2 em{display:block;margin-top:2px}
.gamecard .hint{color:var(--dim);font-size:.82rem;font-weight:600;margin:0 0 12px;line-height:1.4}
.gcrows{display:flex;flex-direction:column;gap:8px}
.gcrow{background:var(--navy-900);border:1.5px solid var(--line);border-left:5px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px}
.gcrow.warn{border-left-color:var(--red)}
.gcrowtop{display:flex;align-items:center;gap:10px;min-width:0}
.gcjn{font-family:'Barlow Condensed';font-size:1.5rem;font-weight:700;color:var(--orange);flex:0 0 auto;min-width:38px;text-align:center}
.gcname{flex:1;min-width:0;font-weight:700;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--white)}
.gcname.hl{color:var(--red)}
.gccount{flex:0 0 auto;font-family:'Barlow Condensed';font-size:1.15rem;font-weight:700;background:var(--navy-700);border:1.5px solid var(--line);border-radius:8px;padding:3px 9px;color:var(--dim)}
.gccount.full{color:var(--green);border-color:#28603f}
.gcrow.warn .gccount{color:var(--red);border-color:#6b2e2c}
.gcboxwrap{overflow-x:auto;scrollbar-width:none}
.gcboxwrap::-webkit-scrollbar{display:none}
.gcboxes{display:flex;gap:6px;min-width:min-content}
.gcbox{
  flex:0 0 auto;width:42px;height:42px;min-width:42px;min-height:42px;
  border:2px solid var(--line);border-radius:8px;background:var(--navy-800);
  color:var(--dim);font-weight:700;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
}
.gcbox.on{background:var(--orange);border-color:var(--orange);color:#160c05}

/* ---------- playbook ---------- */
.pbbody{display:flex;flex-direction:column;gap:14px}
.pbdiagram{background:var(--navy-900);border:1.5px solid var(--line);border-radius:var(--r);padding:10px;min-height:120px;display:flex;align-items:center;justify-content:center}
.pbdiagram img{width:100%;max-width:100%;height:auto;display:block;border-radius:8px;background:#fff}
.pbplays{display:grid;grid-template-columns:1fr;gap:8px}
.pbplayhdr{font-family:'Barlow Condensed';font-size:1.05rem;letter-spacing:.1em;color:var(--orange);font-weight:700;margin:4px 0 0}
.pbstage{display:flex;flex-direction:column;gap:8px}
.pbcap{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--navy-800);border:1.5px solid var(--line);border-radius:var(--r);padding:8px 10px}
.pbcaptxt{display:flex;align-items:center;gap:9px;font-family:'Barlow Condensed';
  font-size:1.16rem;font-weight:700;letter-spacing:.02em;color:var(--white)}
.pbcapnum{background:var(--orange);color:#fff;border-radius:7px;padding:2px 9px;font-size:1.02rem}
.pbcapnum:empty{display:none}
.pbback{background:var(--navy-700);color:var(--white);border:1.5px solid var(--line);
  border-radius:9px;padding:7px 12px;font-family:'Barlow Condensed';font-weight:700;
  font-size:.95rem;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.pbback:active{background:var(--orange);border-color:var(--orange)}
.pbplaybtn.on{border-color:var(--orange);background:rgba(232,97,44,.16)}
.pbplaybtn.on .pn{background:var(--orange)}
.pbplaybtn{cursor:pointer}
.pbplaybtn.disabled{opacity:.4;cursor:not-allowed}
.pbplaybtn.disabled .pn{background:var(--navy-700)}
.pbplaybtn{
  min-height:56px;display:flex;align-items:center;gap:10px;
  background:var(--navy-900);border:1.5px solid var(--line);border-radius:var(--r);
  padding:8px 10px;color:var(--white);
}
.pbplaybtn .pn{flex:0 0 50px;text-align:center;font-family:'Barlow Condensed';font-size:1.3rem;font-weight:700;background:var(--navy-700);color:var(--white);border-radius:8px;padding:3px 0}
.pbplaybtn .pc{font-size:.98rem;font-weight:600;line-height:1.15}
.pbcustomsvg{width:100%;max-width:100%;display:block;border-radius:8px;background:#fff}

/* ---------- custom (drawn) plays & formations ---------- */
.pbplayrow{display:flex;align-items:stretch;gap:8px}
.pbplayrow .pbplaybtn{flex:1 1 auto;min-width:0}
.pbedit{flex:0 0 auto;width:44px;min-height:44px;background:var(--navy-800);
  border:1.5px solid var(--line);border-radius:var(--r);color:var(--orange);font-size:1.1rem;
  display:flex;align-items:center;justify-content:center}
.pbedit:active{border-color:var(--orange);background:var(--navy-700)}

.drawtoolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.drawswatches{display:flex;gap:8px}
.drawswatch{width:36px;height:36px;border-radius:50%;border:3px solid var(--navy-700);padding:0}
.drawswatch.on{border-color:var(--white);box-shadow:0 0 0 2px var(--orange)}
.drawtools{display:flex;gap:8px}
.drawcanvas{position:relative;width:100%;background:var(--navy-900);border:1.5px solid var(--line);
  border-radius:var(--r);overflow:hidden;touch-action:none}
#drawSvg{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}
#drawSheet .sheetfoot{display:flex;gap:10px}
#drawSheet .sheetfoot .save{flex:1;width:auto}
#drawSheet .sheetfoot .ghost{flex:0 0 auto}

@media (min-width:560px){
  .gcboxes{gap:8px}
  .pbplays{grid-template-columns:1fr}
}
@media (min-width:700px){
  .pbbody{display:grid;grid-template-columns:minmax(420px,1.45fr) minmax(260px,1fr);align-items:start;gap:16px}
  .pbdiagram{position:sticky;top:70px}
}

[hidden]{display:none!important}

/* ============================ game control / scoreboard ============= */
.gamectl{display:flex;flex-direction:column;gap:12px}
.scorebar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;
  border-radius:var(--r);border:1.5px solid var(--line);background:var(--navy-800)}
.sb b{font-family:'Barlow Condensed';font-size:2.5rem;line-height:1;font-weight:700;color:var(--white)}
.sb .sblab{font-size:.7rem;letter-spacing:.09em;color:var(--muted);font-weight:700;
  text-transform:uppercase;text-align:center}
.sb.us{border-color:rgba(232,97,44,.55)}
.sb.us b{color:var(--orange)}
.stat.score b{font-size:1.35rem}

.possrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.posspill{flex:0 0 auto;font-family:'Barlow Condensed';font-weight:700;letter-spacing:.05em;
  font-size:1.05rem;padding:8px 14px;border-radius:999px;background:var(--orange);color:#fff}
.posspill.them{background:var(--navy-700);color:var(--white);border:1.5px solid var(--line)}
.possbtn{flex:1 1 180px;min-height:46px;background:var(--navy-700);color:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r);font-family:'Barlow Condensed';
  font-weight:700;letter-spacing:.05em;font-size:1rem;cursor:pointer}
.possbtn:active{background:var(--orange);border-color:var(--orange)}
.possbtn.sm{flex:0 0 auto;min-height:0;padding:10px 14px}
.oppchip{border-color:rgba(224,16,32,.5)}

/* ============================ pick row / typing / mic =============== */
.pickrow{display:flex;gap:8px;align-items:stretch}
.pickrow .grow{flex:1 1 auto;min-width:0}
.micbtn{flex:0 0 58px;font-size:1.35rem;background:var(--navy-700);color:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer}
.micbtn.live{background:var(--red);border-color:var(--red);animation:micpulse 1s infinite}
.micbtn[disabled]{opacity:.4}
@keyframes micpulse{50%{opacity:.55}}
.typein{margin-top:8px;font-size:1rem}

/* ============================ add player =========================== */
.addplayer{padding:10px 14px;border-bottom:1.5px solid var(--line);display:flex;
  flex-direction:column;gap:8px}
.addbtn{align-self:flex-start;background:var(--navy-700);color:var(--white);
  border:1.5px dashed var(--line);border-radius:var(--r);padding:10px 14px;
  font-family:'Barlow Condensed';font-weight:700;letter-spacing:.05em;cursor:pointer}
.addform{display:grid;grid-template-columns:74px 1fr auto;gap:8px}
.save.sm{padding:0 16px;min-height:44px;font-size:1rem}

/* ============================ player stats ========================= */
.statswrap{overflow-x:auto}
table.pstats{width:100%;border-collapse:collapse;font-size:.94rem}
table.pstats th,table.pstats td{padding:8px 9px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--line)}
table.pstats th:first-child,table.pstats td:first-child{text-align:left}
table.pstats th{font-family:'Barlow Condensed';font-size:.82rem;letter-spacing:.07em;
  color:var(--muted);text-transform:uppercase;background:var(--navy-900)}
table.pstats td.jn{font-family:'Barlow Condensed';font-weight:700;color:var(--orange)}
table.pstats tr.tot td{border-top:2px solid var(--orange);font-weight:700;border-bottom:none}
table.pstats td.low{color:var(--orange)}

/* ============================ camera =============================== */
.camstage{margin:10px 0;background:#000;border:1.5px solid var(--line);
  border-radius:var(--r);min-height:200px;display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.camstage iframe,.camstage video{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.camquick{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}

.xbotbox{background:var(--navy-800);border:1.5px solid var(--line);border-radius:var(--r);
  padding:12px;display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.xbotbtn{min-height:56px;background:var(--orange);color:#fff;border:0;border-radius:var(--r);
  font-family:'Barlow Condensed';font-weight:700;font-size:1.25rem;letter-spacing:.06em;cursor:pointer}
.xbotbtn:active{filter:brightness(.9)}
.xbotadv summary{cursor:pointer;font-family:'Barlow Condensed';font-weight:700;
  letter-spacing:.05em;color:var(--muted);padding:4px 0}
.xbotadv code{background:var(--navy-900);padding:1px 5px;border-radius:4px}

.camstrip{display:flex;flex-direction:column;gap:10px}
.camhead{display:flex;gap:8px;align-items:stretch}
.camhead .xbotbtn{flex:1 1 auto;min-height:52px;font-size:1.15rem}
.camhead .ghost{flex:0 0 auto;white-space:nowrap}
.camstrip .camstage{margin:0;max-height:46vh}
.camstrip .camstage.hidden{display:none}
.camset summary{cursor:pointer;font-family:'Barlow Condensed';font-weight:700;
  letter-spacing:.05em;color:var(--muted);padding:4px 0}
.camset .field{margin-top:8px}

/* ============================ special teams ======================== */
.stbody{display:flex;flex-direction:column;gap:12px}
.stfield{background:var(--navy-900);border:1.5px solid var(--line);border-radius:var(--r);padding:8px}
.stfield svg{width:100%;height:auto;display:block}
.stfield .spot{cursor:pointer}
.stfield .spot circle{fill:var(--navy-700);stroke:var(--line);stroke-width:1.6}
.stfield .spot.set circle{fill:var(--orange);stroke:var(--orange)}
.stfield .spot text.jn{fill:#fff;font-weight:700}
.stfield .spot text.ps{fill:var(--muted);font-weight:700}
.stfield .spot.set text.ps{fill:var(--white)}
.stlist{display:grid;grid-template-columns:1fr;gap:6px}
.strowitem{display:grid;grid-template-columns:66px 1fr auto;gap:8px;align-items:center;
  background:var(--navy-800);border:1.5px solid var(--line);border-radius:var(--r);padding:7px 9px}
.strowitem.empty{border-style:dashed}
.strowitem .pos{font-family:'Barlow Condensed';font-weight:700;letter-spacing:.04em;
  color:var(--orange);font-size:1.02rem}
.strowitem .who{font-size:.96rem;font-weight:600;color:var(--white);min-width:0}
.strowitem.empty .who{color:var(--muted);font-weight:500}
.strowitem .x{background:none;border:0;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:0 6px}
.strow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (min-width:900px){
  .stbody{display:grid;grid-template-columns:minmax(320px,1.25fr) minmax(240px,1fr);align-items:start;gap:16px}
  .stlist{grid-template-columns:1fr}
}

/* ============================ lineups / plan ======================= */
.segrow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.seg{display:inline-flex;background:var(--navy-900);border:1.5px solid var(--line);
  border-radius:var(--r);padding:3px;gap:3px}
.seg button{background:none;border:0;color:var(--muted);cursor:pointer;padding:7px 16px;
  border-radius:calc(var(--r) - 3px);font-family:'Barlow Condensed';font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:1rem;white-space:nowrap}
.seg button.on{background:var(--orange);color:#fff}
.seg button.on.blue{background:#2F6FD0}
.planrow{display:flex;gap:4px;margin-left:auto}
.planrow button{background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:1rem;padding:2px 7px;border-radius:6px}
.planrow button:hover{background:var(--navy-700);color:var(--white)}
.pbplaybtn.editing{display:flex;align-items:center;gap:10px}
.planfield{padding:0 14px 10px}
.planbar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px}

/* ============================ wristband builder ==================== */
.bandlist{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.bandgrp{border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden}
.bandgh{background:var(--navy-900);padding:6px 11px;font-family:'Barlow Condensed';
  font-weight:700;letter-spacing:.07em;color:var(--orange);font-size:1.02rem;
  display:flex;justify-content:space-between}
.bandrow{display:grid;grid-template-columns:38px 1fr auto auto;gap:8px;align-items:center;
  padding:6px 10px;border-top:1px solid var(--line)}
.bandrow .bn{font-family:'Barlow Condensed';font-weight:700;color:var(--white);
  background:var(--navy-700);border-radius:5px;text-align:center;padding:1px 0}
.bandrow .bc{font-size:.95rem;color:var(--white);min-width:0}
.bandrow .bmove,.bandrow .bx{background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:.82rem;padding:2px 7px;border-radius:6px;font-weight:700}
.bandrow .bmove:hover,.bandrow .bx:hover{background:var(--navy-700);color:var(--white)}
.bandempty{padding:16px;text-align:center;color:var(--muted);border:1.5px dashed var(--line);
  border-radius:var(--r)}
.sheetfoot{padding:12px 14px;border-top:1.5px solid var(--line);position:sticky;bottom:0;
  background:var(--navy-800)}
.sheetfoot .save{width:100%}
.playpick{display:flex;align-items:center;gap:9px}
.playpick .tick{flex:0 0 auto;width:19px;height:19px;border:2px solid var(--line);
  border-radius:5px;display:inline-block}
.playpick.on .tick{background:var(--orange);border-color:var(--orange)}

/* ============================ print / PDF ========================== */
.printonly{display:none}
@media print{
  header.topbar,.maintabs,.sheet,.scrim,.toast,.logactions,#formCard,.gamectl,
  .view:not(#view-print){display:none !important}
  .printonly{display:block}
  body{background:#fff;color:#111}
  #view-print,#view-print *{visibility:visible}
  .prhead{margin-bottom:10px}
  .prhead h1{font-size:20pt;margin:0 0 2pt}
  .prhead p{font-size:9pt;margin:0;color:#444}
  table.pr{width:100%;border-collapse:collapse;font-size:8.5pt}
  table.pr th,table.pr td{border:.5pt solid #999;padding:3pt 4pt;text-align:left}
  table.pr th{background:#eee;font-weight:700}
  h2.prsec{font-size:12pt;margin:14pt 0 4pt}

  /* wristband printing — exact physical sizes, nothing else on the page */
  @page{size:letter;margin:.4in}
  body.wbprint #view-print{display:none !important}
  body.wbprint .wbsheet{display:flex !important}
  body:not(.wbprint) .wbsheet{display:none !important}
}
.wbsheet{display:none}
.wbsheet{flex-wrap:wrap;gap:.22in;align-content:flex-start}
.wbpair{display:flex;gap:.10in;flex:0 0 auto}
.wbcard{box-sizing:border-box;flex:0 0 auto;border:.5pt dashed #999;border-radius:.06in;
  padding:.05in .06in;overflow:hidden;background:#fff;color:#000;
  font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column}
.wbcard .wbhead{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1pt solid #000;padding-bottom:.02in;margin-bottom:.03in;flex:0 0 auto}
.wbcard .wbteam{font-weight:700;letter-spacing:.02em}
.wbcard .wbtag{font-weight:700}
.wbcols{display:flex;gap:.07in;flex:1 1 auto;min-height:0}
.wbcol{flex:1 1 0;display:flex;flex-direction:column;min-width:0}
.wbrow{display:flex;align-items:center;gap:.04in;flex:1 1 0;min-height:0;
  border-bottom:.25pt solid #ccc}
.wbrow:last-child{border-bottom:0}
/* grouped card body */
.wbbody{flex:1 1 auto;min-height:0;overflow:hidden;column-gap:.09in}
.wbgrp{break-inside:avoid;page-break-inside:avoid;margin-bottom:.035in}
.wbgh{font-weight:700;border-bottom:.6pt solid #000;line-height:1.12;
  letter-spacing:.02em;margin-bottom:.008in}
.wbgrp .wbrow{display:flex;align-items:baseline;gap:.04in;flex:0 0 auto;
  border-bottom:0;line-height:1.15}
.wbgrp .wbnum{font-weight:700;text-align:right;flex:0 0 auto}
/* calls wrap instead of shrinking to one line — the card has height to
   spare, and bigger type matters more than a tidy single line */
.wbgrp .wbcall{white-space:normal;overflow-wrap:break-word;overflow:visible;
  text-overflow:clip;flex:1 1 auto}
.wbnum{font-weight:700;text-align:right;flex:0 0 auto}
.wbcall{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}

/* ---------- defensive front presets on the lineups board ---------- */
.fronts {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 10px;
}
.frontslbl {
  font-size: 11px; letter-spacing: .10em; color: #7b8794;
  font-weight: 700; margin-right: 4px;
}
.frontbtn {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid #cfd6df; background: #fff; color: #2b3a52;
  min-height: 34px;
}
.frontbtn.on {
  background: #ff6500; border-color: #ff6500; color: #fff;
  box-shadow: 0 0 0 2px rgba(255,101,0,.28);
}

/* ---------- the card editor ---------- */
body.cardEdOpen { overflow: hidden; }
.cardEd {
  position: fixed; inset: 0; z-index: 90; background: #eef1f5;
  display: flex; flex-direction: column;
}
.cardEdBar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #22314f; color: #fff; flex: 0 0 auto;
}
.cardEdTitle {
  font-weight: 800; letter-spacing: .04em; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cardEdSpacer { flex: 1 1 auto; }
.cardEdBar .ghost {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: 8px; padding: 8px 12px; font: inherit;
  font-size: 12px; font-weight: 700; cursor: pointer; min-height: 36px;
}
.cardEdBar .primary {
  background: #ff6500; border: 0; color: #fff; border-radius: 8px;
  padding: 8px 16px; font: inherit; font-size: 12px; font-weight: 800;
  cursor: pointer; min-height: 36px;
}
.cardEdStage {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center;
  justify-content: center; padding: 10px;
}
.cardEdSvg {
  width: 100%; height: auto; aspect-ratio: 640 / 470;
  max-width: 900px; max-height: 100%; background: #fff;
  border-radius: 10px; box-shadow: 0 2px 14px rgba(20,30,50,.16);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.cardEdTools {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; padding: 8px 12px; background: #fff;
  border-top: 1px solid #dde3ea;
}
.edgrp { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.edlbl {
  font-size: 10px; letter-spacing: .10em; color: #8a919b; font-weight: 700;
  margin-right: 2px;
}
.edbtn {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  padding: 8px 11px; border-radius: 8px; cursor: pointer; min-height: 36px;
  border: 1px solid #cfd6df; background: #fff; color: #2b3a52;
}
.edbtn.on { background: #2f6df6; border-color: #2f6df6; color: #fff; }
.edbtn.primary { background: #ff6500; border-color: #ff6500; color: #fff; }
.edbtn.danger { border-color: #e0a2ac; color: #b0233a; }
.edsw {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 2px solid #cfd6df; padding: 0;
}
.edsw.on { border-color: #2f6df6; box-shadow: 0 0 0 2px rgba(47,109,246,.30); }
.cardEdHint {
  flex: 0 0 auto; padding: 7px 12px 11px; background: #fff;
  font-size: 12px; color: #6b7684; line-height: 1.35;
}
.pbedit.edited { border-color: #ff6500; color: #ff6500; }
@media (max-width: 620px) {
  .cardEdTools { padding: 6px 8px; }
  .edbtn { font-size: 11px; padding: 7px 9px; }
}

/* ---------- team roster -------------------------------------------
   One editable row per player. Columns line up with the header on a
   laptop; on a phone the row folds so the number and name stay big
   enough to hit and the three toggles get a line of their own.      */
.rosadd{
  display:grid;grid-template-columns:64px 1fr 62px 62px auto;gap:6px;
  align-items:center;margin-bottom:10px;
}
.rosaddbtn{
  min-height:44px;padding:0 14px;border-radius:10px;border:0;
  background:var(--orange);color:#160c05;
  font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.rosaddbtn:active{background:var(--orange-lo)}

.rostools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.rosspacer{flex:1}
.roscount{
  color:var(--dim);font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
}

.roshead,.rosrow{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 58px 58px minmax(0,220px) 48px 44px;
  gap:6px;align-items:center;
}
.roshead{
  padding:0 4px 6px;color:var(--dim);
  font-size:.6rem;font-weight:700;letter-spacing:.1em;
}
.rosrows{display:flex;flex-direction:column;gap:6px}
.rosrow{
  background:var(--navy-800);border:1.5px solid var(--line);
  border-left:5px solid var(--navy-600);border-radius:var(--r);padding:6px;
}

.rosrow input{
  min-height:40px;background:var(--navy-900);color:var(--white);
  border:1.5px solid var(--line);border-radius:8px;padding:0 8px;
  min-width:0;width:100%;
}
.rosrow input:focus,.rosadd input:focus{outline:0;border-color:var(--orange)}
.rosadd input{
  min-height:44px;background:var(--navy-900);color:var(--white);
  border:1.5px solid var(--line);border-radius:8px;padding:0 8px;min-width:0;
}
.rosadd input::placeholder,.rosrow input::placeholder{color:#6c7d9e}
input.rosnum{
  font-family:'Barlow Condensed','Barlow',sans-serif;font-size:1.35rem;
  font-weight:700;text-align:center;padding:0 2px;letter-spacing:.02em;
}
input.rosname{font-weight:600}
input.rospos{
  text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.06em;padding:0 2px;
}

.rosflags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.rosflag{
  min-height:40px;padding:0 2px;border-radius:8px;
  border:1.5px solid var(--line);background:var(--navy-900);color:#7f8fae;
  font-size:.58rem;font-weight:700;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rosflag.on{background:var(--navy-600);border-color:var(--orange);color:var(--white)}
.rosflag:active{border-color:var(--orange)}

.rosdel{
  min-height:40px;min-width:40px;border-radius:8px;
  border:1.5px solid #6b2e2c;background:var(--navy-900);color:var(--red);
  font-size:1rem;font-weight:700;
}
.rosdel:active{background:#2a1412}
.rosleg{margin-top:12px}
.rosleg b{color:var(--white)}

@media (max-width:720px){
  .roshead{display:none}
  .rosrow{
    grid-template-columns:48px minmax(0,1fr) 48px 48px 40px;
    grid-template-areas:"num name pos dpos del" "flags flags flags flags info";
    row-gap:6px;
  }
  .rosrow .rosinfo{grid-area:info}
  .rosrow input.rosnum{grid-area:num}
  .rosrow input.rosname{grid-area:name}
  .rosrow input.rospos{grid-area:pos}
  .rosrow input.rosdpos{grid-area:dpos}
  .rosrow .rosflags{grid-area:flags}
  .rosrow .rosdel{grid-area:del}
  .rosflag{font-size:.62rem}
  .rosadd{grid-template-columns:64px 1fr 60px 60px;row-gap:6px}
  .rosaddbtn{grid-column:1 / -1}
}

/* Confirmations now carry a second paragraph of consequence — honour the
   line breaks instead of collapsing them into one wall of text. */
#confirmMsg{white-space:pre-line}

/* ---------- defense, returns and kicking -------------------------------- */

.tag.kind{
  background:var(--orange-lo);color:var(--white);
  border-color:var(--orange);font-weight:700
}
.logdef{
  margin:6px 0 0;font-size:.82rem;letter-spacing:.06em;
  color:var(--dim);line-height:1.5
}

/* The credit field reads back what you tapped, so it wraps rather than
   truncating a long list of jersey numbers. */
.defbtn{text-align:left;white-space:normal;line-height:1.4;padding:10px 12px}
.defbtn .calltext{white-space:normal}
.defbtn[data-empty]{color:var(--dim)}

/* A return has no play call, so nothing should shift when it hides. */
#formCard.retplay #playCallBtn{display:none}

.dsel{
  margin:10px 0 8px;font-size:.85rem;letter-spacing:.08em;
  color:var(--white);font-weight:700
}
.dsum{
  margin:12px 0 14px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--navy-800);color:var(--dim);
  font-size:.85rem;line-height:1.5;word-break:break-word
}
.playercard.picked{
  background:var(--orange);border-color:var(--orange);color:#fff
}
.playercard.picked .pnm{color:rgba(255,255,255,.9)}

.dsub{
  margin:26px 0 10px;font-size:.95rem;letter-spacing:.16em;
  color:var(--white);text-transform:uppercase
}
.dwarn{
  border:1px solid var(--orange);border-radius:var(--r);
  background:rgba(232,98,44,.14);color:var(--white);padding:8px 12px
}

/* The tally board scrolls sideways on a phone: seven stat columns will not
   fit next to a name at 390px, and shrinking the buttons would break the
   52px tap target this whole app is built around. */
.dboardwrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--navy-800)
}
.dboardwrap::-webkit-scrollbar{height:0;width:0}
.dboard{min-width:520px}
.drow{
  display:grid;grid-template-columns:150px repeat(7,1fr);
  align-items:stretch;border-bottom:1px solid var(--navy-700)
}
.drow:last-child{border-bottom:0}
.dhead{
  position:sticky;top:0;z-index:1;background:var(--navy-700);
  border-bottom:1px solid var(--line)
}
.dhead .dwho,.dhead .dh{
  padding:8px 6px;font-size:.7rem;letter-spacing:.1em;color:var(--dim);
  font-weight:700;text-align:center;align-self:center
}
.dhead .dwho{text-align:left;padding-left:12px}
.dwho{
  display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;
  min-width:0;overflow:hidden
}
.djn{
  flex:0 0 auto;min-width:26px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--orange);font-size:1rem
}
.dnm{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.85rem;color:var(--white)
}
.dtap{
  min-height:var(--tap);border:0;border-left:1px solid var(--navy-700);
  background:transparent;color:var(--dim);font:inherit;font-size:1.05rem;
  font-variant-numeric:tabular-nums;cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
.dtap:active{background:var(--navy-600)}
.dtap.has{color:var(--white);font-weight:700;background:rgba(232,98,44,.16)}
.dtap:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}

/* Collapsed to a single bar by default — kicks are a handful of plays a
   night and the coach would rather look at the call log. */
.kicksec{padding:0;overflow:hidden}
.kicksec>summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  padding:12px 14px;min-height:46px
}
.kicksec>summary::-webkit-details-marker{display:none}
.kicksec>summary::before{
  content:'\25B8';color:var(--orange);font-size:.9rem;flex:0 0 auto;
  transition:transform .15s ease
}
.kicksec[open]>summary::before{transform:rotate(90deg)}
.kicksec>summary .kslab{
  flex:1 1 auto;font-family:'Barlow Condensed','Barlow',sans-serif;
  font-weight:700;letter-spacing:.06em;font-size:1.05rem;color:var(--white)
}
.kicksec>summary:hover .kslab{color:var(--orange)}
.kicksec>*:not(summary){margin-left:14px;margin-right:14px}
.kicksec>*:last-child{margin-bottom:14px}
.kicklist{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.kickrow{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--line);border-left-width:4px;border-radius:var(--r);
  background:var(--navy-800)
}
.kickrow.good{border-left-color:var(--green)}
.kickrow.bad{border-left-color:var(--red)}
.ktext{
  flex:1;min-width:0;font-size:.88rem;letter-spacing:.04em;
  color:var(--white);line-height:1.4
}

@media (max-width:420px){
  .drow{grid-template-columns:112px repeat(7,1fr)}
  .dboard{min-width:480px}
}

/* The defensive spot is the one the quick tackle picker groups by, so it
   reads as the live field of the two. */
input.rosdpos{border-color:var(--navy-600);color:var(--orange)}
input.rosdpos:focus{border-color:var(--orange)}

/* ---------- quick defensive tally on the scoreboard card ---------------- */

/* Seven buttons that have to be hittable with a thumb while watching the
   field, so they wrap into rows rather than shrinking to fit one line. */
.dquick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.dqbtn{
  min-height:38px;padding:0 4px;
  background:var(--navy-700);color:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r);
  font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;
  letter-spacing:.04em;font-size:.78rem;line-height:1.1;cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
.dqbtn:active{background:var(--orange);border-color:var(--orange)}
.dqbtn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.dqgroup{
  margin:16px 0 8px;font-size:.72rem;letter-spacing:.14em;
  color:var(--orange);font-weight:700;text-transform:uppercase
}
.dqgroup:first-child{margin-top:6px}

/* The running count sits in the corner of the card so a coach can see he
   already has three on the same man. */
.dqcard{position:relative}
.dqn{
  position:absolute;top:4px;right:6px;
  font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;
  font-size:.9rem;color:var(--orange);line-height:1
}
.dquickfoot{
  display:flex;gap:8px;align-items:center;margin-top:16px;
  position:sticky;bottom:0;padding:10px 0;background:var(--navy-900)
}
.dquickfoot .save{flex:1;margin:0}
.dquickfoot .ghost{flex:0 0 auto}

/* Our side of the ball on the left, theirs on the right, so the tally
   buttons sit under the opponent's score where a coach expects them. */
.ctlrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.ctlcol{display:flex;flex-direction:column;gap:12px;min-width:0}
.ctlcol .field{margin:0}

@media (max-width:560px){
  .ctlrow{grid-template-columns:1fr}
  .dquick{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dqbtn{min-height:44px}
}

/* ---------- player stats, grouped by side of the ball ------------------- */

.statblk{margin-top:22px}
.statblk:first-child{margin-top:6px}
.statblkh{
  margin:0 0 10px;padding-bottom:6px;
  border-bottom:2px solid var(--orange);
  font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;
  letter-spacing:.1em;font-size:1.15rem;color:var(--white)
}
/* Returns and kicking are both special teams, so they sit inside that
   block under their own smaller heads. */
.statsub{
  margin:16px 0 6px;font-size:.74rem;letter-spacing:.14em;
  color:var(--dim);font-weight:700;text-transform:uppercase
}
.statblk .statsub:first-of-type{margin-top:0}

/* ---------- ball carrier picker, with a way off the list ----------------- */

.pcslot{position:relative;min-width:0}
.pcslot>.playercard{width:100%}
/* Small, in the corner, and it only ever unticks the CARRIER flag — a coach
   should never delete a kid from the roster by fat-fingering a picker. */
.pcx{
  position:absolute;top:-6px;right:-6px;
  width:26px;height:26px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-900);color:var(--dim);
  border:1.5px solid var(--line);border-radius:50%;
  font-size:.7rem;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
.pcx:hover,.pcx:active{background:var(--red);border-color:var(--red);color:var(--white)}
.pcx:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
#carrierHint{margin:0 14px 4px}

/* ---------- unsaved-work badge, editor undo -------------------------- */

.unsavedchip{
  align-self:center;margin-left:10px;flex:0 0 auto;
  font-size:.62rem;font-weight:800;letter-spacing:.09em;
  padding:4px 8px;border-radius:999px;
  background:rgba(214,58,42,.16);color:#ff9a86;
  border:1px solid var(--red)
}
.cardEdDot{
  align-self:center;flex:0 0 auto;
  font-size:.62rem;font-weight:800;letter-spacing:.09em;
  padding:4px 8px;border-radius:999px;white-space:nowrap;
  background:rgba(214,58,42,.22);color:#ffb3a1;border:1px solid #d63a2a
}
/* The bar carries six controls now, so let it wrap instead of squeezing
   SAVE off the edge of a phone. */
.cardEdBar{flex-wrap:wrap}
.cardEdTitle{min-width:0;flex:0 1 auto}
@media (max-width:560px){
  .cardEdBar{gap:6px;padding:8px 10px}
  .cardEdBar .ghost,.cardEdBar .primary{font-size:11px;padding:7px 10px;min-height:34px}
  .cardEdSpacer{flex:1 1 100%;height:0}
}
.cardEdBar button[disabled]{opacity:.4;cursor:default}
/* An unsaved card gives SAVE a nudge, so it reads as the thing to do next. */
.cardEdBar .primary.needsave{box-shadow:0 0 0 3px rgba(214,58,42,.35)}

/* ---- whiteboard, save sheet, reorder list ---- */
.pbheadrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.pbheadrow .seg { margin-bottom: 0; }
.pbheadrow button { flex: 0 0 auto; }
.sheetnote { margin: 8px 0 12px; font-size: .8rem; line-height: 1.5; color: var(--dim); }
.sheetnote strong { color: var(--white); font-weight: 800; }
.chk { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px;
  font-size: .82rem; font-weight: 700; color: var(--white); min-height: 44px; }
.chk input { width: 22px; height: 22px; accent-color: var(--orange); }
button.primary.wide { width: 100%; margin-top: 12px; }
.rolist { display: flex; flex-direction: column; gap: 6px; }
.rorow { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--navy-800);
  touch-action: none; }
.rorow.drag { border-color: var(--orange); background: var(--navy-700);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.rorow .rogrip { font-size: 1.1rem; color: var(--dim); cursor: grab; padding: 0 2px; }
.rorow .roname { flex: 1 1 auto; font-weight: 800; font-size: .82rem; color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rorow .rorange { font-size: .74rem; font-weight: 800; color: var(--orange);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.rorow[data-empty="1"] .rorange { color: var(--dim); }
.rorow .romv { width: 40px; min-height: 40px; padding: 0; font-size: .8rem; flex: 0 0 auto; }

/* A sheet opened from inside the card editor has to sit above it. */
.sheet { z-index: 96; }
.scrim { z-index: 98; }
.toast { z-index: 99; }

/* ---- player playbook: row marks, the favourites tab, the picker ---- */
.pbmark {
  font: inherit; font-size: 15px; font-weight: 800; line-height: 1;
  width: 42px; min-height: 44px; flex: 0 0 auto; cursor: pointer;
  border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--navy-800); color: var(--dim);
}
.pbmark.fav.on { color: #ffc24a; border-color: #7a5c15; background: #2a2110; }
.pbmark.book.on { color: #0b1220; border-color: var(--green); background: var(--green); }
.tab.favtab { color: #ffc24a; }
.tab.favtab.on { color: #0b1220; }
.pbplaybtn .pcform {
  display: block; font-size: .64rem; letter-spacing: .10em; font-weight: 700;
  color: var(--dim); margin-top: 2px;
}
.pbkopts { margin: 6px 0 10px; }
.pbkopts .chk { margin: 4px 0; }
.pbkrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px; }
.pbkcount { font-size: .74rem; font-weight: 800; color: var(--orange); letter-spacing: .06em; }
.pbklist { display: flex; flex-direction: column; gap: 6px; }
.pbkunit {
  font-size: .68rem; letter-spacing: .16em; font-weight: 800; color: var(--dim);
  margin: 12px 0 2px;
}
.pbkform { border: 1.5px solid var(--line); border-radius: 10px; background: var(--navy-800); }
.pbkform.has { border-color: var(--green); }
.pbkform:not(.has) .pbkn { color: var(--dim); }
.pbkformhead { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.pbkname {
  flex: 1 1 auto; text-align: left; font: inherit; font-size: .82rem; font-weight: 800;
  color: var(--white); background: none; border: 0; cursor: pointer; min-height: 40px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pbkn { font-size: .72rem; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
.pbkmini {
  font: inherit; font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  padding: 0 9px; min-height: 36px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--navy-700); color: var(--white);
}
.pbkplays { padding: 2px 8px 8px; display: flex; flex-direction: column; }
.pbkplay {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  font-size: .78rem; color: var(--white); border-top: 1px solid #22314f;
}
.pbkplay input { width: 20px; height: 20px; accent-color: var(--green); }

@media print {
  .pbkbook { display: block; color: #111; }
  .pbkpage { page-break-after: always; break-after: page; }
  .pbkbook .pbkpage:last-child { page-break-after: auto; break-after: auto; }
  .pbkcover { text-align: center; padding-top: 1.1in; }
  .pbkcovtop { font-size: 11pt; letter-spacing: .28em; font-weight: 700; }
  .pbkcover h1 { font-size: 34pt; margin: .12in 0 .04in; letter-spacing: .02em; }
  .pbkcovsub { font-size: 12pt; letter-spacing: .22em; color: #444; }
  .pbkcovline { font-size: 12pt; margin-top: .30in; text-align: left;
    max-width: 5.4in; margin-left: auto; margin-right: auto; }
  .pbkblank { display: inline-block; width: 2.6in; border-bottom: 1pt solid #111; }
  .pbkblank.short { width: .9in; }
  .pbkcovlist { list-style: none; padding: 0; margin: .5in auto 0; font-size: 11pt;
    max-width: 5.4in; text-align: left; }
  .pbkcovlist li { border-bottom: .5pt solid #bbb; padding: 4pt 0; }
  .pbkcovnote { font-size: 10pt; color: #333; max-width: 5.4in; margin: .45in auto 0; }
  h2.pbkh { font-size: 17pt; margin: 0 0 4pt; letter-spacing: .02em; }
  h3.pbkh3 { font-size: 11pt; margin: 12pt 0 3pt; letter-spacing: .16em; }
  p.pbkp { font-size: 10pt; color: #222; margin: 0 0 10pt; }
  table.pbkix { font-size: 9pt; }
  table.pbkix td { border: .5pt solid #bbb; padding: 2.5pt 4pt; }
  td.pbkixn { font-weight: 700; width: .6in; text-align: right; }
  td.pbkixf { color: #444; }
  .pbkgapart { border: .75pt solid #111; padding: .18in .12in; margin: .12in 0 .2in; }
  .pbkgaprow { display: flex; justify-content: space-between; font-size: 15pt;
    font-weight: 700; padding: 0 .1in; }
  .pbkgaprow span { flex: 1 1 0; text-align: center; }
  .pbkgapc { color: #666; }
  .pbkgapline { border-top: 1.5pt solid #111; margin: .06in 0; }
  .pbkgappos { font-size: 11pt; color: #333; }
  .pbkrunhead { font-size: 9pt; letter-spacing: .18em; font-weight: 700; color: #444;
    border-bottom: .5pt solid #999; padding-bottom: 2pt; margin-bottom: 6pt; }
  .pbkcells { display: flex; flex-wrap: wrap; gap: .14in; align-content: flex-start; }
  .pbkcard { box-sizing: border-box; border: .75pt solid #111; border-radius: .05in;
    padding: .06in .07in; overflow: hidden; display: flex; flex-direction: column;
    break-inside: avoid; page-break-inside: avoid; }
  .pbkcap { display: flex; align-items: baseline; gap: .08in; flex: 0 0 auto;
    border-bottom: .5pt solid #111; padding-bottom: 2pt; margin-bottom: 3pt; }
  .pbknum { font-size: 13pt; font-weight: 800; }
  .pbkcall { font-size: 11pt; font-weight: 700; flex: 1 1 auto; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .pbkform { font-size: 8pt; letter-spacing: .12em; color: #555; flex: 0 0 auto;
    border: 0; background: none; }
  .pbkart { flex: 1 1 auto; min-height: 0; display: flex; align-items: center;
    justify-content: center; }
  .pbkart svg, .pbkart img { max-width: 100%; max-height: 100%; width: auto; height: 100%; }
  .pbkcard.solo, .pbkcard.gapref { width: 100%; height: auto; }
  .pbkcard.solo .pbkart svg, .pbkcard.gapref .pbkart svg { width: 100%; height: auto; }
  .pbkcard.gapref { margin: .1in 0 .18in; }
  .pbkgrid.per1 .pbkcard { width: 100%; height: 9.5in; }
  .pbkgrid.per2 .pbkcard { width: 100%; height: 4.68in; }
  .pbkgrid.per4 .pbkcard { width: 48.5%; height: 4.68in; }
  .pbkgrid.per6 .pbkcard { width: 32%; height: 3.1in; }
}

/* ---- camera app picker ------------------------------------------- */
.camprovrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.camprov {
  background: var(--navy-700); color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 13px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.camprov:hover { color: #fff; border-color: var(--orange); }
.camprov.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.camprov[disabled] { opacity: .45; }
.camprovnote { margin: 0 0 10px; }
.camtab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; height: 100%; padding: 18px; text-align: center;
}
.camtab .empty { margin: 0; }
.camtab .possbtn { flex: 0 0 auto; height: auto; min-height: var(--tap); padding: 12px 18px; max-width: 320px; }

/* ---- coaching notes: the bar under the card and the note sheet ---- */
.pbnotebar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-top:1.5px solid var(--line);background:var(--navy-800);
  border-bottom-left-radius:var(--r);border-bottom-right-radius:var(--r);
}
.pbnotetxt{
  margin:0;flex:1 1 auto;min-width:0;font-size:.82rem;font-weight:700;line-height:1.3;
  color:var(--white);letter-spacing:.02em;
}
.pbnotetxt.empty{color:var(--dim);font-weight:600;font-style:italic}
.pbnotebtn{
  flex:0 0 auto;min-height:var(--tap);padding:0 14px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--navy-700);color:var(--white);
  font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.10em;cursor:pointer;
}
.pbnotebtn:active{border-color:var(--orange);color:var(--orange)}
.pbmark.note.on{color:var(--orange);border-color:var(--orange);background:rgba(255,101,0,.14)}
.notearea{min-height:74px;padding:10px 12px;resize:vertical;line-height:1.35}
#noteWho{color:var(--orange);font-weight:800;letter-spacing:.04em}
#noteQuick .chip{font-size:.7rem}
@media (max-width:420px){
  .pbnotebar{flex-direction:column;align-items:stretch}
  .pbnotebtn{width:100%}
}

/* Sheet primaries only ever had a width — give them the same orange the
   big SAVE button uses so the main action in a sheet reads as the main
   action. Ghost buttons marked .wide fill the sheet the same way. */
.sheetbody button.primary{
  min-height:56px;border:none;border-radius:var(--r);cursor:pointer;
  background:var(--orange);color:#160c05;
  font-family:'Barlow Condensed','Barlow',sans-serif;
  font-size:1.3rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.sheetbody button.primary:active{background:var(--orange-lo)}
.sheetbody button.ghost.wide{width:100%;margin-top:10px;min-height:50px}

/* ---- the flag on a play: the row under the result chips, the sheet ---- */
.penbox{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:8px;padding:9px 12px;border-radius:12px;
  border:1.5px solid var(--orange);background:rgba(255,101,0,.10);
}
.penline{margin:0;flex:1 1 180px;min-width:0;font-size:.82rem;font-weight:800;
  letter-spacing:.03em;color:var(--white)}
.penline.empty{color:var(--dim);font-weight:600;font-style:italic}
.penbtn{
  flex:0 0 auto;min-height:var(--tap);padding:0 14px;border-radius:10px;cursor:pointer;
  border:1.5px solid var(--orange);background:var(--orange);color:#160c05;
  font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.10em;
}
.chip.resultchip.flag.on{background:var(--red);border-color:var(--red);color:#fff}
.chip.penchip{text-align:left;font-size:.7rem;letter-spacing:.04em}
#penYdIn{margin-top:8px}
.logmeta .tag.flag{border-color:var(--orange);color:var(--orange)}

/* ---- board pop-ups: the coaching note, and the close question ---- */
.cardEdBar .ghost.on { background: #ff6500; border-color: #ff6500; }
.cardEdPop {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(10,14,24,.72);
}
.cardEdPop[hidden] { display: none; }
.cardEdPopBox {
  width: 100%; max-width: 460px; background: #fff; color: #14181f;
  border-radius: 14px; padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.cardEdPopBox h4 {
  margin: 0 0 4px; font-size: 15px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
}
.cardEdPopSub { margin: 0 0 12px; font-size: 12.5px; color: #5b6472; }
.cardEdNoteIn {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px;
  border: 1.5px solid #c7cdd6; border-radius: 10px; font: inherit;
  font-size: 15px; color: #14181f; background: #fff;
}
.cardEdNoteIn:focus { outline: none; border-color: #ff6500; }
.cardEdCount {
  display: block; margin: 6px 0 10px; font-size: 11px; color: #7b8492;
  letter-spacing: .06em; text-align: right;
}
.cardEdQuick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.edchip {
  border: 1px solid #c7cdd6; background: #f4f6f9; color: #2b3341;
  border-radius: 999px; padding: 7px 11px; font: inherit; font-size: 11.5px;
  font-weight: 700; letter-spacing: .04em; cursor: pointer; min-height: 34px;
}
.edchip:active { background: #ff6500; border-color: #ff6500; color: #fff; }
.cardEdPopBox button.primary {
  width: 100%; min-height: 50px; margin-bottom: 8px; border: 0; border-radius: 10px;
  background: #ff6500; color: #fff; font: inherit; font-size: 14px; font-weight: 800;
  letter-spacing: .07em; cursor: pointer;
}
.cardEdPopBox button.ghost {
  width: 100%; min-height: 46px; margin-bottom: 8px; border: 1.5px solid #c7cdd6;
  border-radius: 10px; background: #fff; color: #2b3341; font: inherit;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
}
.cardEdPopBox button.ghost.danger { border-color: #e0a2ac; color: #b0233a; }
.cardEdPopBox button:last-child { margin-bottom: 0; }

/* ---------- player info & emergency contacts ---------- */
.rhinfo{color:var(--dim);text-align:center}
.rosinfo{
  min-height:40px;min-width:44px;border-radius:8px;
  border:1.5px solid var(--line);background:var(--navy-900);color:#8fa2c4;
  font-size:.95rem;font-weight:700;display:flex;align-items:center;
  justify-content:center;gap:3px;padding:0 4px;
}
.rosinfo .rosinfon{font-size:.72rem;font-weight:700;letter-spacing:.02em}
.rosinfo.on{border-color:var(--orange);color:var(--white);background:var(--navy-600)}
.rosinfo:active{border-color:var(--orange)}

.pigrid{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;margin-bottom:16px}
.pigrid .pifield:nth-child(3),.pigrid .pifield:nth-child(4){grid-column:auto}
.pifield{display:flex;flex-direction:column;gap:4px;min-width:0}
.pilbl{font-size:.6rem;font-weight:700;letter-spacing:.1em;color:var(--dim)}
.pifield input{
  min-height:46px;background:var(--navy-900);color:var(--white);
  border:1.5px solid var(--line);border-radius:8px;padding:0 10px;
  font:inherit;font-size:1rem;width:100%;min-width:0;box-sizing:border-box;
}
.pifield input:focus{outline:0;border-color:var(--orange)}
.pifield input::placeholder{color:#6c7d9e}

.pihead{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  flex-wrap:wrap;border-top:1.5px solid var(--line);padding-top:12px;margin-bottom:10px;
}
.pihead span{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--white)}
.pihead em{font-size:.66rem;font-style:normal;color:var(--dim)}

.picon{
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 128px 74px 42px;
  gap:6px;align-items:center;margin-bottom:8px;
  background:var(--navy-800);border:1.5px solid var(--line);
  border-left:5px solid var(--navy-600);border-radius:var(--r);padding:6px;
}
.picon input{
  min-height:44px;background:var(--navy-900);color:var(--white);
  border:1.5px solid var(--line);border-radius:8px;padding:0 8px;
  font:inherit;width:100%;min-width:0;box-sizing:border-box;
}
.picon input:focus{outline:0;border-color:var(--orange)}
.picon input::placeholder{color:#6c7d9e}
input.pirel{text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:0 2px}
input.piname{font-weight:600}
input.piphone{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:1.05rem;letter-spacing:.03em}
.picall{
  min-height:44px;border-radius:8px;border:1.5px solid var(--green);
  color:#7de3ab;background:rgba(14,128,67,.16);text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;letter-spacing:.06em;
}
.picall.off{border-color:var(--line);color:#5f6f8e;background:var(--navy-900);pointer-events:none}
.pidel{
  min-height:44px;min-width:40px;border-radius:8px;
  border:1.5px solid #6b2e2c;background:var(--navy-900);color:var(--red);
  font-size:.95rem;font-weight:700;
}
.pidel:active{background:#2a1412}
#piBody .ghost.wide{width:100%;margin-top:6px}

@media (max-width:560px){
  .pihead{flex-direction:column;align-items:flex-start;gap:2px}
  .pihead em{line-height:1.3}
  .pigrid{grid-template-columns:74px minmax(0,1fr)}
  .picon{
    grid-template-columns:62px minmax(0,1fr) 42px;
    grid-template-areas:"rel name del" "phone phone phone" "call call call";
    row-gap:6px;
  }
  .picon input.pirel{grid-area:rel}
  .picon input.piname{grid-area:name}
  .picon input.piphone{grid-area:phone;font-size:1.15rem}
  .picon .picall{grid-area:call;min-height:46px;font-size:.72rem}
  .picon .pidel{grid-area:del}
}

/* ---------- the call sheet ---------- */
.advisor { border-left: 4px solid var(--orange); }
.advsit {
  display: flex; flex-wrap: wrap;
  gap: 10px 20px; align-items: flex-end;
}
.advsit .field { flex: 0 0 auto; }
.advsit .field.wide { flex: 1 1 100%; }
.advdef { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.advdef > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  cursor: pointer; font-weight: 800; letter-spacing: .04em;
  font-size: 13px; text-transform: uppercase;
}
.advdef > summary .advread {
  font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--muted); font-size: 12px;
}
.advdef .field { margin-top: 10px; }
.advout { margin-top: 14px; display: grid; gap: 10px; }
.advhead { display: grid; gap: 3px; }
.advhead b { font-size: 17px; letter-spacing: .01em; }
.advhead span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.advpick {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px; align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface2, rgba(0, 0, 0, .02));
}
.advpick:first-of-type { border-color: var(--orange); }
.advrank {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy, #22314f); color: #fff;
  font-weight: 800; font-size: 15px;
}
.advpick:first-of-type .advrank { background: var(--orange); }
.advmain { min-width: 0; }
.advcall { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.advnum { font-weight: 800; color: var(--muted); font-size: 13px; }
.advname { font-weight: 800; font-size: 16px; letter-spacing: .01em; }
.advtag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.advwhy { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 3px; }
.advwhy li { font-size: 13px; line-height: 1.35; color: var(--ink, inherit); }
.advuse { align-self: center; white-space: nowrap; }
.advnote {
  margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted);
  border-left: 3px solid var(--line); padding-left: 9px;
}
@media (max-width: 620px) {
  .advpick { grid-template-columns: 28px 1fr; }
  .advuse { grid-column: 2; justify-self: start; margin-top: 4px; }
}
@media print { .advisor { display: none; } }

/* ---------- team name and logo ---------- */
button.brand {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  position: relative;
}
button.brand:hover .brandpen { opacity: 1; }
.brandpen {
  font-size: 12px; opacity: 0; transition: opacity .15s ease;
  color: var(--muted); align-self: center;
}
.logoimg {
  width: 40px; height: 40px; object-fit: contain; border-radius: 6px;
}
.teamlogorow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.teamlogoprev {
  width: 82px; height: 82px; border: 1px solid var(--line); border-radius: 12px;
  display: grid; place-items: center; padding: 8px; background: #fff;
}
.teamlogoprev img, .teamlogoprev svg { max-width: 100%; max-height: 100%; }
.teamlogobtns { display: grid; gap: 8px; }

/* ---------- printed masthead ---------- */
.prhead { display: flex; align-items: center; gap: 14px; }
.prhead .prmark { flex: 0 0 auto; }
.prhead .prlogo { width: 52px; height: 52px; object-fit: contain; display: block; }
.prhead .prtxt { min-width: 0; }
.prhead .prteam {
  font-size: 11pt; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #22314f;
}
.pbkcovmark { display: grid; place-items: center; margin-bottom: 10px; }
.pbkcovmark .prlogo { width: 108px; height: 108px; object-fit: contain; }

.brandwrap{display:flex;align-items:center;min-width:0}

/* Chips in the call sheet wrap instead of pushing the card wide. */
.advsit .field { min-width: 0; }
.advsit .chipstrip { flex-wrap: wrap; }
.advisor .chipstrip { flex-wrap: wrap; }
.advout { min-width: 0; }
.advcall, .advwhy li { overflow-wrap: anywhere; }

/* hidden always wins, even for svg/img with display rules */
[hidden] { display: none !important; }

.pbkmiss { font: 600 11px/1.4 var(--stack, sans-serif); color: #555; text-align: center; padding: 18px 6px; }

/* Team-code feedback lines in TEAM SETUP. */
.hint.good { color: #1d7a45; font-weight: 600; }
.hint.warn { color: #b3261e; font-weight: 600; }

/* ---------- folding blocks and fields on LOG PLAY ---------- */
.foldall{display:flex;gap:8px;justify-content:flex-end;margin:0 0 8px}
.foldall .ghost.sm{padding:4px 10px;font-size:.6rem;letter-spacing:.08em}
.foldtog{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;
  color:inherit;font:inherit;cursor:pointer;text-align:left;min-height:34px}
.foldtog .foldcaret{display:inline-block;width:14px;flex:0 0 14px;text-align:center;
  color:var(--orange);font-size:.8rem;line-height:1}
.foldtog .foldlab{font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.foldbar{display:flex;align-items:center}
.foldbar .foldtog .foldlab{font-size:.95rem}
.foldtog.inhead{flex:1 1 auto}
.foldtog.inhead .foldlab{font-size:1.02rem}
.foldtog.infield{width:100%;min-height:30px}
.foldtog.infield .foldlab{font-size:.66rem;color:var(--muted, #9fb0c8);letter-spacing:.09em}
.foldtog .foldsum{margin-left:auto;padding-left:10px;font-size:.68rem;font-weight:700;
  color:var(--orange);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58%}
.field.isfolded{padding-bottom:2px}
.card.isfolded,.logsec.isfolded{padding-bottom:10px}
.foldtog.caretonly{min-width:22px;flex:0 0 auto}
h2.foldtitle{cursor:pointer}
.foldhead{display:flex;align-items:center;gap:6px;min-height:26px}
.foldhead > label{margin:0;cursor:pointer}
/* Keep folded blocks inside their card on a phone. */
.foldbody{min-width:0;width:100%}
.foldhead{width:100%;min-width:0}
.foldhead > label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.foldtog{min-width:0}
/* A caret-only toggle must not eat the label's width. */
.foldtog.caretonly{width:auto;flex:0 0 auto}
/* Section titles stay next to their caret, buttons stay on the right. */
.formhead h2.foldtitle,.loghead h2.foldtitle{margin-right:auto}