:root{--bg:#0e1518;--card:#16211f;--edge:#283a36;--ink:#eaf3f0;--dim:#8fa8a1;--accent:#37b98a;--gold:#f0b83a;--red:#ff6b6b;--warn:#f0b83a}
*{box-sizing:border-box;margin:0}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:12px}
nav{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--edge);background:var(--card);position:sticky;top:0;z-index:5}
nav .brand{font-weight:800;color:var(--accent);letter-spacing:.3px;margin-right:4px}
nav a{color:var(--dim);font-weight:600;padding:2px 2px}
nav a.on,nav a:hover{color:var(--ink)}
nav .me{margin-left:auto;color:var(--dim);font-size:13px}
@media(max-width:640px){nav .me{width:100%;margin-left:0;order:5}}
.card{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:14px;margin:12px 0}
.card h2{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);margin-bottom:10px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grow{flex:1;min-width:0}
@media(max-width:560px){.formrow{flex-direction:column;align-items:stretch}.formrow>label.fld,.formrow>input,.formrow>.btn{width:100%;align-self:stretch}}
.btn{background:var(--accent);color:#04160f;border:0;border-radius:8px;padding:9px 14px;font-weight:700;cursor:pointer;min-height:40px}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn.gold{background:var(--gold);color:#241a04}
.btn.sm{min-height:32px;padding:5px 10px;font-size:13px}
.btn.icon{min-height:34px;min-width:34px;padding:4px 8px}
.btn:disabled{opacity:.4;cursor:default}
input,select{background:#0b1211;color:var(--ink);border:1px solid var(--edge);border-radius:8px;padding:9px 10px;font-size:15px;max-width:100%}
label.fld{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--dim)}
table{width:100%;border-collapse:collapse}
th{color:var(--dim);font-size:12px;text-transform:uppercase;text-align:left;padding:6px 6px;border-bottom:1px solid var(--edge)}
td{padding:7px 6px;border-bottom:1px solid rgba(40,58,54,.5)}
tr:last-child td{border-bottom:0}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;background:#0b1211;color:var(--dim)}
.pill.on{background:rgba(55,185,138,.18);color:var(--accent)}
.pill.off{background:rgba(255,107,107,.15);color:var(--red)}
.jn{font-weight:800;color:var(--gold)}
.dim{color:var(--dim)}
.muted{color:var(--dim);font-size:13px}

/* batting order list */
.bat-list{list-style:none;padding:0;margin:0}
.bat-item{display:flex;align-items:center;gap:8px;padding:8px 6px;border:1px solid var(--edge);border-radius:10px;margin-bottom:6px;background:#0b1211}
.bat-item.drag{opacity:.4}
.bat-item .ord{width:22px;text-align:center;font-weight:800;color:var(--dim)}
.bat-item .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bat-item .mv{display:flex;gap:4px}
.handle{cursor:grab;color:var(--dim);padding:0 4px;touch-action:none}

/* fielding grid: fixed layout so it never exceeds the card at 390 */
.grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.fgrid{table-layout:fixed;width:100%}
.fgrid th,.fgrid td{border:1px solid var(--edge);text-align:center;padding:6px 2px;font-size:13px}
.fgrid th.pos{width:40px;text-align:left;color:var(--ink);font-weight:800;background:#0b1211;padding-left:6px}
.fgrid thead th{color:var(--dim);font-weight:700}
.fgrid td{cursor:pointer;overflow-wrap:anywhere;word-break:break-word}
.fgrid .cellj{font-size:12px}
.fgrid td.empty{color:var(--red)}
.fgrid td.sel{outline:2px solid var(--accent);outline-offset:-2px}
.fgrid .cellj{font-weight:800;color:var(--gold)}
.fgrid .benchrow th,.fgrid .benchrow td{background:rgba(40,58,54,.25);font-style:italic;color:var(--dim);font-weight:600}
.fgrid .benchrow td{overflow-wrap:anywhere}

/* warnings */
.warn-list{display:flex;flex-direction:column;gap:6px}
.warn{display:flex;gap:8px;align-items:flex-start;padding:7px 10px;border-radius:8px;font-size:13px;background:rgba(240,184,58,.12);border:1px solid rgba(240,184,58,.4);color:var(--gold)}
.warn.err{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.4);color:var(--red)}
.warn .ic{font-weight:800}
.ok-note{color:var(--accent);font-size:13px}

/* picker sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);border:1px solid var(--edge);border-radius:14px 14px 0 0;width:100%;max-width:520px;max-height:75vh;overflow:auto;padding:14px}
@media(min-width:560px){.sheet-bg{align-items:center}.sheet{border-radius:14px}}
.sheet h3{font-size:15px;margin-bottom:10px}
.pick{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;border:1px solid var(--edge);border-radius:10px;margin-bottom:6px;background:#0b1211;color:var(--ink);cursor:pointer}
.pick .jn{min-width:26px}

.avail-grid{display:grid;grid-template-columns:1fr;gap:6px}
.avail-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--edge);border-radius:8px;background:#0b1211}
#login{max-width:360px;margin:12vh auto}
.err{color:var(--red);font-size:13px;min-height:18px;margin-top:6px}
.tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;background:#0b1211;color:var(--dim);margin:1px}