:root{
  --bg:#0a0e14; --panel:#121826; --panel2:#0c131e; --line:#1f2937; --ink:#eef2f7; --mut:#8a97a8;
  --y:#fae023; --grn:#2ee06a; --red:#ff3b46; --blue:#3b82f6; --rad:14px;
  /* Semantic surface tokens — these used to be hardcoded hex, so the light theme
     couldn't override them (bases/line-score/tables stayed near-black in day mode). */
  --strip:#05080d;      /* dark line-score / score-strip background */
  --hair:#11161f;       /* hairline dividers inside tables + line score */
  --chip:#1a2230;       /* small inline chips (▲▼ move buttons, etc.) */
  --chip2:#1e2636;      /* pills / neutral badges */
  --base:#2b3a55;       /* EMPTY base fill — brighter so it reads clearly on dark */
  --base-bd:#66809f;    /* EMPTY base outline */
  --base-ink:#0a0e14;   /* number ink on an OCCUPIED (yellow) base */
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:radial-gradient(1200px 600px at 50% -10%,#16202c,var(--bg) 60%);color:var(--ink);
  font:16px/1.45 -apple-system,system-ui,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;user-select:none}
#app{max-width:760px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;width:100%;-webkit-appearance:none}
.row{display:flex;gap:10px}.row>*{flex:1}.wrap{flex-wrap:wrap}
.sp{flex:1}.mut{color:var(--mut)}.center{text-align:center}.hide{display:none!important}

/* top bar */
.bar{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;position:sticky;top:0;
  background:linear-gradient(#0a0e14ee,#0a0e14cc);backdrop-filter:blur(8px);z-index:5;border-bottom:1px solid var(--line)}
.content,.box,.linescore{-webkit-overflow-scrolling:touch}
.lu .pl .mv{color:var(--mut);padding:6px 7px;font-size:13px;flex:0 0 auto;background:var(--chip);border:1px solid var(--line);border-radius:8px;margin-left:2px}
.bar .ttl{font-weight:900;letter-spacing:.3px;font-size:18px}
.bar .ttl small{display:block;font-size:10px;color:var(--y);letter-spacing:3px;font-weight:800;text-transform:uppercase}
.crest{height:30px;width:30px;border-radius:6px;object-fit:contain}
.iconbtn{width:40px;height:40px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:18px}
.content{flex:1;padding:14px 16px calc(20px + var(--safe-b))}

/* generic */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:16px;margin-bottom:12px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:14px;font-weight:700}
.btn.pri{background:var(--y);color:#0a0e14;border-color:var(--y);font-weight:900}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red);border-color:#3a2226}
.btn:active{transform:translateY(1px);filter:brightness(1.08)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--chip2);color:var(--mut)}
.pill.live{background:rgba(255,59,70,.16);color:var(--red)}
.pill.final{background:var(--chip2);color:var(--mut)}
.label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:6px}

/* games list */
.glist .g{display:flex;align-items:center;gap:12px;padding:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad);margin-bottom:10px}
.glist .g .vs{font-weight:800}.glist .g .sc{font-weight:900;font-variant-numeric:tabular-nums}
.glist .g .meta{font-size:12px;color:var(--mut)}
.glist .g.demo{border-color:rgba(250,224,35,.45);background:linear-gradient(180deg,rgba(250,224,35,.06),var(--panel))}
.glist .g .demotag{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.6px;color:#0a0e14;
  background:var(--y);border-radius:5px;padding:2px 6px;margin-right:8px;vertical-align:1px}
.glist .g .gdel{flex:0 0 auto;background:transparent;border:1px solid var(--line);color:var(--mut);
  border-radius:8px;width:38px;height:38px;font-size:16px;cursor:pointer;line-height:1}
.glist .g .gdel:hover{border-color:var(--red);color:var(--red)}

/* lineup editor */
.lu .pl{display:flex;align-items:center;gap:8px;padding:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;margin-bottom:7px}
.lu .pl .ord{width:24px;text-align:center;color:var(--mut);font-weight:800}
.lu .pl input.num{flex:0 0 56px;text-align:center}
.lu .pl input.nm{flex:1}
.lu .pl .x{color:var(--red);padding:6px 10px}

/* SCORE screen */
.scorehead{background:var(--panel2);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-bottom:12px}
.teamline{display:flex;align-items:center;padding:10px 14px;gap:10px}
.teamline+.teamline{border-top:1px solid var(--line)}
.teamline .nm{font-weight:800;font-size:17px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teamline.bat .nm{color:var(--y)}
.teamline .rhe{display:flex;gap:14px;color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums}
.teamline .rhe b{color:var(--ink);font-size:15px}
.teamline .big{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
.teamline .big.win{color:var(--grn)}
.linescore{display:flex;gap:0;overflow-x:auto;border-top:1px solid var(--line);background:var(--strip)}
.linescore .c{flex:0 0 30px;text-align:center;font-size:12px;padding:5px 0;font-variant-numeric:tabular-nums;border-right:1px solid var(--hair)}
.linescore .c.h{color:var(--mut);font-weight:800}

.situ{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.situ .inn{font-size:20px;font-weight:900;color:var(--y);display:flex;align-items:center;gap:7px}
.outs{display:flex;gap:6px;align-items:center}.outs i{width:14px;height:14px;border-radius:50%;border:2px solid var(--mut)}
.outs i.on{background:var(--red);border-color:var(--red)}
.count{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}.count .l{font-size:11px;color:var(--mut);margin-right:5px;font-weight:700}

/* diamond */
.diawrap{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:14px;margin-bottom:12px}
.diamond{position:relative;width:120px;height:120px;flex:0 0 120px}
.base{position:absolute;width:34px;height:34px;background:var(--base);border:2px solid var(--base-bd);transform:rotate(45deg);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.base.on{background:var(--y);border-color:var(--y);box-shadow:0 0 16px var(--y),0 1px 3px rgba(0,0,0,.35)}
.base b{transform:rotate(-45deg);font-size:11px;font-weight:800;color:var(--base-ink)}
.b1{right:0;top:43px}.b2{left:43px;top:0}.b3{left:0;top:43px}.bh{left:43px;top:86px;background:transparent;border-color:var(--base-bd)}
.atbat{flex:1;min-width:0}
.atbat .l{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.atbat .who{font-size:22px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atbat .who .n{color:var(--y)}
.atbat .deck{color:var(--mut);font-size:13px;margin-top:3px}

/* outcome grid */
.grp{margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.ob{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 6px;font-weight:800;font-size:14px;text-align:center;line-height:1.15}
.ob.hit{border-color:#2a5a3a}.ob.hit:active{background:#13251a}
.ob.out{border-color:#3a2226}.ob.out:active{background:#251316}
.ob.walk{border-color:#2a3f5a}.ob.walk:active{background:#13202f}
.ob.pitch{padding:12px 4px;font-size:13px}
.ob:active{transform:translateY(1px)}
.ob small{display:block;font-size:10px;color:var(--mut);font-weight:700;margin-top:2px}

.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}

/* box score */
.box{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad);margin-bottom:14px}
table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
th,td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--hair)}
th{color:var(--mut);font-size:10px;text-transform:uppercase;position:sticky;top:0;background:var(--panel2)}
td.nm,th.nm{text-align:left;position:sticky;left:0;background:var(--panel);font-weight:700}
tr.tot td{font-weight:900;border-top:2px solid var(--line);background:var(--panel2)}

/* sheet (runner menu / modals) */
.sheet{position:fixed;inset:0;background:#000a;display:flex;align-items:flex-end;justify-content:center;z-index:30}
.sheet .inner{width:100%;max-width:760px;background:var(--panel);border-top-left-radius:20px;border-top-right-radius:20px;
  padding:18px 16px calc(20px + var(--safe-b));border:1px solid var(--line)}
.sheet h3{margin:0 0 14px}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%) translateY(20px);
  background:#1b2433;border:1px solid var(--line);color:var(--ink);padding:11px 18px;border-radius:999px;font-weight:700;
  font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.empty{text-align:center;color:var(--mut);padding:50px 20px}
.empty .big{font-size:46px;margin-bottom:10px}
.grow{flex:1}

/* save-mode badge + demo banner */
.modebadge{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel2);font-size:13px;margin-bottom:12px;cursor:pointer}
.modebadge b{font-weight:800}
.modebadge .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.modebadge.mode-turbo{border-color:rgba(59,130,246,.5)} .modebadge.mode-turbo .dot{background:var(--blue)} .modebadge.mode-turbo b{color:var(--blue)}
.modebadge.mode-direct{border-color:rgba(46,224,106,.5)} .modebadge.mode-direct .dot{background:var(--grn)} .modebadge.mode-direct b{color:var(--grn)}
.demobanner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 13px;border-radius:11px;margin-bottom:12px;
  background:rgba(250,224,35,.12);border:1px solid rgba(250,224,35,.5);color:var(--y);font-size:13px}
.demobanner span{color:var(--ink)}
.demoreset{margin-left:auto;background:var(--y);color:#0a0e14;font-weight:800;border:0;border-radius:8px;padding:6px 12px;cursor:pointer}
.demoend{padding:13px 14px;border-radius:12px;margin-bottom:14px;text-align:center;
  background:rgba(250,224,35,.14);border:1px solid rgba(250,224,35,.55);color:var(--y);font-size:14px}
.demoend b{font-size:15px}.demoend .mut{color:var(--ink)}

/* group labels above each outcome cluster */
.glabel{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin:0 2px 6px}
.ob.run{border-color:#3a3550;background:var(--panel)}.ob.run:active{background:#1c1830}

/* "now batting" — the block itself is NOT tappable; the small ⇄ Change chip opens the picker */
.atbat .l{display:flex;align-items:center;gap:8px}
.chgbtn{flex:0 0 auto;margin-left:auto;background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:7px 12px;font-size:12px;font-weight:800;color:var(--ink);letter-spacing:.02em;text-transform:none;line-height:1}
.chgbtn:active{transform:translateY(1px);filter:brightness(1.08)}

/* fielder position selector */
.posgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pos{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 4px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:2px}
.pos b{font-size:16px}.pos small{font-size:10px;color:var(--mut)}
.pos:active{background:var(--chip);transform:translateY(1px)}
.pos b{line-height:1.05}.pos small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* runner advancement override rows */
.advrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.advname{flex:0 0 38%;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.advname small{display:block;font-size:11px;color:var(--mut);font-weight:600}
.advopts{display:flex;flex-wrap:wrap;gap:6px;flex:1;justify-content:flex-end}
.advb{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;font-weight:700;min-width:44px}
.advb.sel{background:var(--y);color:#0a0e14;border-color:var(--y)}
.advb.score.sel{background:var(--grn);border-color:var(--grn);color:#04140a}
.advb.out.sel{background:var(--red);border-color:var(--red);color:#fff}
.advb:active{transform:translateY(1px)}

/* ===== REMOTE COCKPIT — Live Feed panel ===== */
.btn.livefeed-on{border-color:var(--red);color:var(--red)}
.livefeed{padding:12px}
.lf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.lf-close{flex:0 0 auto;color:var(--mut);font-size:16px;padding:2px 8px}
.lf-tabs{display:flex;gap:6px;margin-bottom:10px}
.lf-tab{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 4px;font-size:12px;font-weight:800}
.lf-tab.on{background:var(--y);color:#0a0e14;border-color:var(--y)}
.lf-tab:active{transform:translateY(1px)}
.lf-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.lf-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lf-cam{position:relative;width:100%;aspect-ratio:16/9;background:var(--strip);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.lf-camimg{width:100%;height:100%;object-fit:cover;display:block}
.lf-caplabel{position:absolute;left:8px;bottom:8px;background:#000a;color:var(--ink);font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px}
.lf-note{font-size:11px;margin-top:9px;line-height:1.35}

/* ===== Spectator view (inline fan preview) ===== */
.spectator{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;overflow:hidden}
.spectempty{padding:24px 8px;text-align:center}
.spect-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.spect-badge{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--y)}
.spect-score{background:var(--strip);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:10px}
.spect-trow{display:flex;align-items:center;justify-content:space-between;padding:9px 14px}
.spect-trow+.spect-trow{border-top:1px solid var(--line)}
.spect-tn{font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spect-tn.win{color:var(--grn)}
.spect-ts{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
.spect-ts.win{color:var(--grn)}
.spect-situ{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);font-weight:700;margin-bottom:10px;padding:0 2px}
.spect-pbplabel{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin:0 2px 6px}
.spect-pbp{display:flex;flex-direction:column;gap:5px;max-height:280px;overflow-y:auto}
.spect-prow{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:9px;font-size:13px}
.spect-prow.marker{background:#10141d;color:var(--mut);font-weight:800;justify-content:center}
.spect-pt{flex:1;min-width:0}
.spect-psc{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--y);font-variant-numeric:tabular-nums}
.spect-pmk{font-size:12px}

/* ===== Share / Watch links ===== */
.sharerow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.shareinfo{flex:1;min-width:0}
.sharelabel{font-weight:700;font-size:14px}
.shareurl{display:block;font-size:12px;color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.copybtn{flex:0 0 auto;padding:9px 16px;font-size:13px}

/* play-by-play editor */
.playlist{display:flex;flex-direction:column;gap:6px}
.playrow{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.playrow.marker{background:#10141d;color:var(--mut);font-weight:800;justify-content:center}
.playrow .pi{flex:0 0 34px;font-size:11px;color:var(--y);font-weight:800;font-variant-numeric:tabular-nums}
.playrow .pt{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playrow .pdel{flex:0 0 auto;color:var(--red);padding:4px 8px;font-weight:800}
.playrow .pins{flex:0 0 auto;color:var(--grn);padding:4px 8px;font-weight:800}
.playrow.marker .pi,.playrow.marker .pdel,.playrow.marker .pins{display:none}

/* ===== Live mirror (Watch the tablet game) ===== */
.mir-tabs{display:flex;gap:8px;margin-bottom:12px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:4px}
.mir-tab{flex:1;padding:10px 8px;border-radius:9px;font-weight:800;font-size:14px;color:var(--mut)}
.mir-tab.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 0 #0006}
.mir-row.atbat td{background:rgba(250,224,35,.12);font-weight:800}
.mir-row.atbat td.nm{background:rgba(250,224,35,.16);color:var(--y)}
.mir-row.ondeck td.nm{color:var(--ink)}
.mir-row.ondeck td{background:rgba(59,130,246,.07)}

/* Merged scorer: lineup drag-and-drop */
.lu .pl{cursor:default}
.lu .pl .grip{cursor:grab;color:var(--mut,#6b7787);font-size:16px;line-height:1;padding:0 2px;user-select:none;touch-action:none}
.lu .pl .grip:active{cursor:grabbing}
.lu .pl.dragover{outline:2px dashed var(--y,#f5c518);outline-offset:-2px;border-radius:8px}

/* ===== Landscape tablet layout (ADDITIVE) =====================================
   The two wrappers below (.sc-info / .sc-controls) are added by ScreenScore only.
   In portrait / on phones they are `display:contents` — i.e. they have NO box of
   their own and their children flow inside .content exactly as before, so the
   existing portrait layout is byte-for-byte unchanged. Only the landscape media
   query (a ~10" tablet held sideways) turns them into a two-pane layout.        */
.sc-info,.sc-controls{display:contents}

@media (orientation: landscape) and (min-width: 820px) and (min-height: 600px){
  /* Height gate excludes phones held sideways (their landscape height is small);
     width gate ensures a tablet-class canvas. Only the live scoring screen gets
     the wider column so its two panes have room. */
  #app:has(.content.sc-live){max-width:1180px}

  .content.sc-live{
    display:flex;flex-wrap:wrap;align-items:flex-start;
    column-gap:18px;padding:12px 18px calc(16px + var(--safe-b));
  }
  /* full-width bands across the top */
  .content.sc-live>.demobanner,
  .content.sc-live>.modebadge,
  .content.sc-live>.scorehead,
  .content.sc-live>.livefeed,
  .content.sc-live>.sc-replay,
  .content.sc-live>.center{flex:0 0 100%}
  .content.sc-live>.sc-replay{margin-top:6px}
  .content.sc-live>.scorehead{margin-bottom:14px}

  /* LEFT pane — inning / count / outs + diamond + now-batting */
  .content.sc-live>.sc-info{
    display:flex;flex-direction:column;gap:12px;min-width:0;
    flex:0 0 clamp(260px,30%,360px);
  }
  .sc-live .sc-info .situ{margin-bottom:0}
  .sc-live .sc-info .diawrap{margin-bottom:0}
  /* bigger, field-readable situation + batter (we have vertical room here) */
  .sc-live .sc-info .situ .inn{font-size:22px}
  .sc-live .sc-info .situ .count{font-size:22px}
  .sc-live .sc-info .atbat .who{font-size:24px;white-space:normal}
  .sc-live .sc-info .atbat .deck{font-size:14px}
  .sc-live .sc-info .chgbtn{padding:9px 14px;font-size:13px}

  /* RIGHT pane — outcome buttons laid out wide, no scrolling */
  .content.sc-live>.sc-controls{
    display:grid;grid-template-columns:repeat(2,1fr);
    align-content:start;align-items:start;gap:10px;
    flex:1 1 0;min-width:0;
  }
  .sc-live .sc-controls>.grp{margin-bottom:0}
  /* Ball/Strike/Foul (1st group) and 1B/2B/3B/HR (2nd group) are the most-used —
     give them the full width and the biggest targets. */
  .sc-live .sc-controls>.grp:nth-child(1),
  .sc-live .sc-controls>.grp:nth-child(2){grid-column:1 / -1}
  /* action bar (Undo / Lineup / Box / … / End) spans the bottom */
  .sc-live .sc-controls>.actions{grid-column:1 / -1;margin-top:2px}

  /* bigger tap targets for a tablet sitting on a table at the field */
  .sc-live .sc-controls .ob{padding:18px 6px;font-size:16px}
  .sc-live .sc-controls .ob.pitch{padding:20px 6px;font-size:17px}
  .sc-live .sc-controls .actions .btn{padding:15px}
}

/* ===== Task A — set-current-batter / manage-lineup picker ==========================
   The batter list lives in `.batpick`. In portrait it's an ordinary stack (no cap), so
   the picker is byte-identical to before. Long names always wrap inside their button so
   they can never run off the page. The landscape rule below caps the list height + scrolls
   it so a full roster is reachable on a phone held sideways (the reported bug).            */
.batpick .btn{white-space:normal;overflow-wrap:anywhere}
.batpick-actions{display:flex;flex-direction:column;gap:8px;margin-top:8px;border-top:1px solid var(--line);padding-top:12px}

/* ===== Task C — compact bases + outs preview inside decision/confirmation sheets ===== */
.minisitu{display:flex;align-items:center;gap:14px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.diamond.mini{width:74px;height:74px;flex:0 0 74px}
.diamond.mini .base{width:22px;height:22px}
.diamond.mini .b1{right:0;top:26px}.diamond.mini .b2{left:26px;top:0}.diamond.mini .b3{left:0;top:26px}.diamond.mini .bh{left:26px;top:52px}
.diamond.mini .base b{font-size:9px}
.minisitu-meta{flex:1;min-width:0}
.minisitu-warn{color:var(--red);font-size:12px;font-weight:800;margin-top:8px}

/* ===== Task F — Replay button at the bottom of the score screen ===== */
.sc-replay{margin-top:12px;border-color:rgba(250,224,35,.55);color:var(--y);font-weight:800}

/* ===== Landscape (phone + tablet): keep sheets on-screen and scroll long lists =====
   Portrait is untouched. In any landscape orientation, cap the sheet + the batter list so
   they scroll internally instead of running off the top of a short (phone) viewport.       */
@media (orientation: landscape){
  .sheet .inner{max-height:94vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .batpick{max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* ================= DAY (light) THEME =========================================
   Dark is the default (:root above). An explicit choice or the clock flips
   <html data-theme="light"> and these overrides take over. The LVC yellow stays
   the button/brand accent (great on white); only the few places it's used as
   TEXT-on-light get a readable deep gold.                                       */
:root[data-theme="light"]{
  --bg:#eef1f5; --panel:#ffffff; --panel2:#f4f6f9; --line:#d4dae3; --ink:#141a22; --mut:#59636f;
  --grn:#0f9d52; --red:#d81f2a; --blue:#2563eb;
  /* Light-mode surfaces for the semantic tokens (were near-black in day mode before) */
  --strip:#eaeef4; --hair:#dde3ec; --chip:#eef1f6; --chip2:#e7ebf1;
  --base:#d5dde9; --base-bd:#8695ac; --base-ink:#141a22;
}
:root[data-theme="light"] body{background:radial-gradient(1200px 600px at 50% -10%,#ffffff,var(--bg) 60%)}
:root[data-theme="light"] .bar{background:linear-gradient(#ffffffee,#ffffffcc)}
:root[data-theme="light"] .bar .ttl small{color:#9a7d00}
:root[data-theme="light"] .sc-replay{color:#7c6400;border-color:rgba(180,150,20,.55)}
/* line-score numbers need dark ink on the pale strip in day mode */
:root[data-theme="light"] .linescore{background:var(--strip)}
:root[data-theme="light"] .linescore .c{color:var(--ink)}
:root[data-theme="light"] .linescore .c.h{color:var(--mut)}

/* ================= PA CONTROL BAR (bottom of the score screen — IN FLOW) ======
   No longer a floating/fixed row: it sits at the very bottom of the score page as
   an ordinary footer band (the score screen is a flex column, so it always lands
   under the content). Green = audible on the speaker, dim = muted.               */
.pabar{
  display:flex;align-items:stretch;gap:6px;
  margin-top:14px;
  padding:10px 12px calc(12px + var(--safe-b));
  background:linear-gradient(var(--panel2),var(--panel));
  border-top:1px solid var(--line);
}
.pabar .pabtn{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel);
  padding:8px 4px;font-weight:800;color:var(--ink);line-height:1.1;
}
.pabar .pabtn .pe{font-size:17px;line-height:1}
.pabar .pabtn .pl{font-size:11px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pabar .pabtn.out{flex:1.5 1 0}
.pabar .pabtn.out.on{border-color:var(--grn);color:var(--grn)}
.pabar .pabtn.out.muted{border-color:var(--red);color:var(--red)}
.pabar .pabtn.cat.on{border-color:var(--grn);color:var(--grn)}
.pabar .pabtn.cat.muted{border-color:var(--line);color:var(--mut);opacity:.6}
.pabar .pabtn.t{flex:0 0 60px;border-color:var(--blue);color:var(--blue)}
.pabar .pabtn.g{flex:0 0 46px;font-size:18px}
.pabar .pabtn:active{transform:translateY(1px);filter:brightness(1.06)}

/* Tablet-landscape: slightly bigger PA targets (the bar is in-flow, no reservation needed). */
@media (orientation: landscape) and (min-width: 820px) and (min-height: 600px){
  .pabar .pabtn{padding:11px 6px}
  .pabar .pabtn .pe{font-size:19px}
  .pabar .pabtn .pl{font-size:12px}
}

/* ===== PHONE in landscape — two-pane, SAME sizes (no shrinking) ================
   The tablet layout above needs a tall canvas (min-height:600px), which a phone
   held sideways never has (it's WIDE but SHORT). This query catches exactly that
   case and reflows the live score screen into two columns — situation/diamond on
   the left, the outcome buttons on the right — so far less scrolling is needed,
   while every tap target keeps its normal portrait size (the phone doesn't get
   the tablet's enlarged buttons).                                                */
@media (orientation: landscape) and (max-height: 600px){
  #app{max-width:100%}
  .content.sc-live{
    display:flex;flex-wrap:wrap;align-items:flex-start;
    column-gap:14px;padding:12px 14px calc(14px + var(--safe-b));
  }
  /* full-width bands across the top */
  .content.sc-live>.demobanner,
  .content.sc-live>.modebadge,
  .content.sc-live>.scorehead,
  .content.sc-live>.livefeed,
  .content.sc-live>.sc-replay,
  .content.sc-live>.center{flex:0 0 100%}
  /* LEFT pane — situation + diamond + now-batting */
  .content.sc-live>.sc-info{
    display:flex;flex-direction:column;gap:10px;min-width:0;
    flex:0 0 clamp(210px,34%,300px);
  }
  .sc-live .sc-info .situ{margin-bottom:0}
  .sc-live .sc-info .diawrap{margin-bottom:0}
  /* RIGHT pane — outcome buttons in two columns, portrait sizes kept */
  .content.sc-live>.sc-controls{
    display:grid;grid-template-columns:repeat(2,1fr);
    align-content:start;align-items:start;gap:8px;
    flex:1 1 0;min-width:0;
  }
  .sc-live .sc-controls>.grp{margin-bottom:0}
  /* pitch (Ball/Strike/Foul) and hits (1B/2B/3B/HR) span the full right pane */
  .sc-live .sc-controls>.grp:nth-child(1),
  .sc-live .sc-controls>.grp:nth-child(2){grid-column:1 / -1}
  .sc-live .sc-controls>.actions{grid-column:1 / -1;margin-top:2px}
  /* the PA footer band spans full width under everything */
  .pabar{margin-top:12px}
}

/* ===== Defense / positions assignment + review (lineup setup) ================== */
.posset .posgridset{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.posrow{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 9px}
.poslbl{flex:0 0 40px;text-align:center;line-height:1.05}
.poslbl b{display:block;font-size:14px;font-weight:800}
.poslbl small{font-size:10px;color:var(--mut)}
.possel{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px}
.posstatus{margin-top:10px;font-size:12px;font-weight:800;color:var(--red)}
.posstatus.ok{color:var(--grn)}
@media (max-width: 520px){ .posset .posgridset{grid-template-columns:1fr} }

/* ==== demo-setup (A) ==== */
/* Hover/focus/disabled/caret polish for the test-game setup screen — states inline styles can't express.
   All scoped under .demo-setup so nothing here leaks into the rest of the app. */
.demo-setup .btn{transition:filter .12s ease, transform .06s ease, background .12s ease, border-color .12s ease}
.demo-setup .btn.ghost:hover{background:var(--panel2);border-color:var(--mut)}
.demo-setup .btn.pri:hover{filter:brightness(1.04)}
.demo-setup .btn:active{transform:translateY(1px)}
.demo-setup .btn[disabled]{opacity:.5;cursor:not-allowed;filter:none;transform:none}
/* Coupled "#24 · name" field: highlight the whole unit when the name input is focused. */
.demo-setup .nmfield{transition:border-color .12s ease, box-shadow .12s ease}
.demo-setup .nmfield:focus-within{border-color:var(--y);box-shadow:0 0 0 2px rgba(250,224,35,.28)}
.demo-setup .pl .nm::placeholder{color:var(--mut);opacity:.85}
/* POS select: native arrow is stripped by appearance:none, so draw a caret to read as a dropdown. */
.demo-setup .pl .possel{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a97a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 9px center}
.demo-setup .pl .possel:focus{border-color:var(--y);outline:none}
/* ==== /demo-setup ==== */

/* ==== score-ledger (B) ==========================================================
   Live play-by-play panel added to the LEFT column (.sc-info) of the scoring screen
   to fill the empty space below the now-batting card. All visual styling is INLINE
   (theme-aware var(--…)) on the .sc-ledger element in ScreenScore — this block only
   caps the scroll body's height per breakpoint so it stays a bounded, scrollable
   panel that visually fills the available space (never grows unbounded). Portrait &
   the existing landscape blocks are otherwise untouched.                            */
.sc-ledger .sl-body{max-height:30vh;min-height:88px}
/* Tablet landscape (the two-pane screen shown in the screenshot): tall panel that
   fills most of the left column, scrolling internally past that. */
@media (orientation: landscape) and (min-width: 820px) and (min-height: 600px){
  .sc-live .sc-info .sc-ledger .sl-body{max-height:calc(100vh - 360px);min-height:180px}
}
/* Phone held sideways (short viewport, two-pane): medium cap. */
@media (orientation: landscape) and (max-height: 600px){
  .sc-live .sc-info .sc-ledger .sl-body{max-height:calc(100vh - 210px);min-height:110px}
}
/* ==== /score-ledger ==== */