:root {
  --bg: #f4f4f0;
  --card: #ffffff;
  --text: #1c1c1a;
  --muted: #6b6b66;
  --border: #d9d8d0;
  --accent: #185fa5;
  --accent-bg: #e6f1fb;
  --ok: #3b6d11;
  --ok-bg: #eaf3de;
  --warn: #854f0b;
  --warn-bg: #faeeda;
  --bad: #a32d2d;
  --bad-bg: #fcebeb;
  --strike: #b3d687;
  --strike-line: #3b6d11;
  --strike-text: #173404;
  --ball: #f7bd5e;
  --ball-line: #ba7517;
  --ball-text: #412402;
  --chase: #f2adad;
  --chase-line: #a32d2d;
  --chase-text: #501313;
  --on-accent: #ffffff;
  --radius: 10px;
  --tap: 48px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161614;
    --card: #222220;
    --text: #ececea;
    --muted: #a3a39d;
    --border: #3a3a36;
    --accent: #85b7eb;
    --accent-bg: #0c447c;
    --on-accent: #0b2440;
    --ok: #c0dd97;
    --ok-bg: #27500a;
    --warn: #fac775;
    --warn-bg: #633806;
    --bad: #f09595;
    --bad-bg: #791f1f;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.4;
  background: var(--bg); color: var(--text);
  -webkit-text-size-adjust: 100%;
  padding-bottom: 72px;
  overscroll-behavior-y: contain;
}
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 22px; margin: 0 0 8px; font-weight: 600; }
h2 { font-size: 17px; margin: 0 0 8px; font-weight: 600; }
h3 { font-size: 14px; margin: 0 0 6px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 8px; }
small, .muted { color: var(--muted); font-size: 13px; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--border);
}
.topbar .title { font-weight: 600; font-size: 17px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar button.link { background: none; border: none; color: var(--accent); font-size: 15px; padding: 6px 4px; min-height: 0; }

.page { padding: 14px; max-width: 1100px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }

button, .btn {
  font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; min-height: var(--tap); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
button:active { transform: scale(.98); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
button.danger { color: var(--bad); border-color: var(--bad); }
button.small { min-height: 36px; padding: 6px 10px; font-size: 14px; }
button.selected { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
button.selected small { color: inherit; opacity: .85; }
button.wide { width: 100%; }
button:disabled { opacity: .45; }

input[type=text], input[type=date], input[type=password], input[type=url], input[type=number], textarea, select {
  font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; min-height: var(--tap); width: 100%;
}
label.field { display: block; margin-bottom: 10px; }
label.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }


.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border); }
.list li:first-child { border-top: none; }
.list li .grow { flex: 1; min-width: 0; }
.list li .name { font-weight: 600; }

.banner { border-radius: var(--radius); padding: 10px 12px; font-size: 15px; margin-bottom: 10px; }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.bad { background: var(--bad-bg); color: var(--bad); }
.banner.info { background: var(--accent-bg); color: var(--accent); }
.banner .big { font-size: 20px; font-weight: 700; }

.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; background: var(--card); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a { flex: 1; text-align: center; padding: 10px 4px 8px; color: var(--muted); font-size: 12px; }
.bottomnav a.active { color: var(--accent); font-weight: 600; }
.bottomnav a .ic { display: block; font-size: 20px; line-height: 1.1; }
.update-banner { position: fixed; left: 12px; right: 12px; top: 10px; z-index: 50; display: flex; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.bottomnav a .ic svg { display: block; margin: 1px auto 1px; }

/* token & pitch buttons */
.grid { display: grid; gap: 8px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.grid.c5 { grid-template-columns: repeat(5, 1fr); }
.grid button { padding: 8px 4px; font-size: 16px; font-weight: 600; min-height: 52px; }
.tok { border-width: 2px; }
.step { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; }
.step b { color: var(--text); }

/* location pad */
.pad { width: 100%; max-width: 540px; display: block; margin: 0 auto; touch-action: manipulation; cursor: crosshair; }
.pad .cell { cursor: pointer; }
.pad .cell.strike { fill: var(--strike); stroke: var(--strike-line); }
.pad .cell.ball { fill: var(--ball); stroke: var(--ball-line); }
.pad .cell.chase { fill: var(--chase); stroke: var(--chase-line); }
.pad .cell:active { opacity: .6; }
.pad text { pointer-events: none; font-family: inherit; }
.pad text.strike { fill: var(--strike-text); }
.pad text.ball { fill: var(--ball-text); }
.pad text.chase { fill: var(--chase-text); }
.pad text.side { fill: var(--muted); font-size: 11px; }

.pitchlog li { font-size: 14px; padding: 8px 0; }

table.map { width: 100%; border-collapse: collapse; font-size: 14px; }
table.map th, table.map td { text-align: left; padding: 6px 4px; border-top: 1px solid var(--border); }
table.map th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; border-top: none; }
table.map td.num { text-align: right; white-space: nowrap; }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--card); border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 700px) { .modal-bg { align-items: center; } .modal { border-radius: 16px; } }

.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 24px); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 18px; font-size: 14px; z-index: 30; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.has-undo.show { pointer-events: auto; }
.toast-undo { flex: none; min-height: 36px; padding: 4px 14px; border-radius: 999px; background: var(--bg); color: var(--text); border: none; font-weight: 700; }
.toast.show { opacity: 1; }

/* game layout: stack on phone, three columns on tablet/desktop */
.game-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .game-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .game-grid .card { margin-bottom: 0; }
  .game-grid .card:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1000px) {
  .game-grid { grid-template-columns: 0.9fr 1.3fr 1fr; }
  .game-grid .card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .game-grid .card:nth-child(3) { grid-column: 3; grid-row: 1; }
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
details summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.hint { font-size: 13px; color: var(--muted); }

/* record bar (game page) */
.recordbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--border);
}
.recordbar .grow { flex: 1; min-width: 0; }
.recordbar .rec-call { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recordbar .rec-what { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recordbar button { min-height: 56px; min-width: 150px; font-size: 18px; opacity: .55; }
.recordbar button.ready { opacity: 1; }
.pad .cell.sel { fill: var(--accent); stroke: var(--text); stroke-width: 3; }
.pad text.sel { fill: var(--on-accent); font-weight: 700; }

/* situation strip */
.sitbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; align-items: stretch; }
.sit-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-size: 12px; color: var(--muted); }
button.sit-cell { color: var(--muted); }
.sit-cell b { color: var(--text); font-size: 14px; white-space: nowrap; }
.sit-cell b.count { font-size: 24px; }
.sit-bases { border: none; }
.dots { display: flex; gap: 8px; }
.dot { width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--muted); background: transparent; }
.dot.on { background: var(--bad); border-color: var(--bad); }
.diamond .base { fill: var(--card); stroke: var(--muted); stroke-width: 2; cursor: pointer; }
.diamond .base.on { fill: var(--accent); stroke: var(--accent); }
.diamond .plate { fill: var(--border); }
.sitrow { gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.sitrow .lbl { width: 56px; font-size: 13px; color: var(--muted); }
.sitrow .tok { min-width: 48px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper span { font-size: 13px; color: var(--muted); }
.stepper button { min-width: 40px; min-height: 40px; padding: 0; }
.stepper b { min-width: 22px; text-align: center; }

/* admin */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text); }
a.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
a.btn.small { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.stat span { display: block; font-size: 13px; color: var(--muted); }
.stat b { font-size: 24px; }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.admin-games li { flex-wrap: wrap; }

.sit-pitcher { grid-column: 1 / -1; display: flex; gap: 8px; align-items: stretch; }
.sit-pitcher .pp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 52px; padding: 6px 12px; text-align: left; }
.sit-pitcher .pp-top { display: flex; align-items: baseline; gap: 10px; }
.sit-pitcher .pp-top b { flex: 1; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sit-pitcher .chg { color: var(--accent); font-size: 14px; white-space: nowrap; }
.sit-pitcher .pp-stats { font-size: 13px; color: var(--muted); }
.sit-pitcher .switch { flex: none; font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--accent); border-color: var(--accent); }
.sit-cell .tiny { font-size: 10px; }
/* The pitcher's last dozen pitches: hit, close, missed, over the plate, not graded */
.gdots { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 1px; }
.gdot { width: 11px; height: 11px; border-radius: 50%; background: transparent; border: 1.5px solid var(--border); }
.gdot.hit { background: var(--ok); border-color: var(--ok); }
.gdot.close { background: var(--ball); border-color: var(--ball-line); }
.gdot.miss { background: var(--bad); border-color: var(--bad); }
.gdot.over { background: var(--bad); border-color: var(--text); border-width: 2.5px; }
.outgrid { margin-bottom: 8px; }
.outgrid button { font-size: 14px; min-height: 46px; }
.outgrid.out button { border-color: var(--bad); }
.outgrid.hit button { border-color: var(--ok); }

/* step 2: compact game page */
.sitbar { padding: 6px; gap: 5px; }
.sitbar .sit-cell { min-height: 58px; }
.pitchgrid { margin-bottom: 8px; }
.pitchgrid button { min-height: 46px; font-size: 14px; padding: 4px 2px; }
.speedrow { gap: 8px; margin: 8px 0 2px; flex-wrap: nowrap; }
.speedrow label { font-weight: 600; }
.speedrow input { width: 76px; min-height: 40px; padding: 6px 10px; font-size: 18px; text-align: center; }
.speedrow #lastspeed { margin-left: auto; }
.padhead { margin: 2px 0 6px; }
.padhead .small { min-height: 40px; }
button.clearall { color: var(--bad); }
.banner.slim { padding: 7px 12px; font-size: 14px; margin-bottom: 8px; }
.syncpill { white-space: nowrap; }
.syncpill.warn { color: var(--warn); border-color: var(--warn); font-weight: 600; }
.card.continue { display: flex; align-items: center; gap: 12px; cursor: pointer; border-color: var(--accent); }
.card.continue .grow { flex: 1; min-width: 0; }
.card.continue .name { font-weight: 700; font-size: 17px; }
.signedout { margin: 10px 14px 0; }
a.btn.primary { color: var(--on-accent); }
@media (max-width: 420px) {
  .topbar { gap: 6px; padding: 8px 10px; }
  .topbar .title { font-size: 15px; }
  .topbar button.small { padding: 6px 8px; font-size: 13px; }
}

@media (max-width: 700px) {
  .game-grid { gap: 10px; }
  .game-grid .card { padding: 10px; }
  .sitbar .sit-cell { min-height: 52px; }
  .sit-cell b.count { font-size: 22px; }
  .sit-pitcher .pp-main, .sit-pitcher .switch { min-height: 44px; }
}


/* Dot on the pad: a softball to scale, with a larger invisible handle to drag it */
.pad .dot { fill: #f3de3a; stroke: #3a3200; stroke-width: 2.5; pointer-events: none; }
.pad .dot-hit { fill: transparent; touch-action: none; cursor: grab; }
@media (max-width: 700px) {
  /* Let the pad use the full card width on a phone */
  .game-grid .card .pad { width: calc(100% + 16px); max-width: none; margin: 0 -8px; }
}

/* Runners: one row each, where she ended up */
.runners { display: flex; flex-direction: column; gap: 10px; }
.runrow .who { font-weight: 600; margin-bottom: 4px; }
.runrow .who small { font-weight: 400; color: var(--muted); }
.runrow .dest { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.runrow .dest button { min-height: 44px; padding: 4px 2px; font-size: 14px; }
.runrow .dest button.out { border-color: var(--bad); }
.runrow .dest button.run { border-color: var(--ok); }

/* Pitcher scorecards */
.sc-mini { margin-top: 4px; font-size: 14px; }
.sc-rate { font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.sc-rate.good, .sc-tile.good b { color: var(--ok); }
.sc-rate.good { background: var(--ok-bg); }
.sc-rate.mid, .sc-tile.mid b { color: var(--warn); }
.sc-rate.mid { background: var(--warn-bg); }
.sc-rate.low, .sc-tile.low b { color: var(--bad); }
.sc-rate.low { background: var(--bad-bg); }
.sc-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 14px; }
@media (min-width: 800px) { .sc-tiles { grid-template-columns: repeat(4, 1fr); } }
.sc-tile { background: var(--bg); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.sc-tile span { display: block; font-size: 13px; color: var(--muted); }
.sc-tile b { display: block; font-size: 24px; line-height: 1.2; margin: 2px 0; }
.sc-tile b.long { font-size: 16px; line-height: 1.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-tile small { display: block; font-size: 12px; }
.sc-maps { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .sc-maps { grid-template-columns: 1fr 1fr; } }
.sc-svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.sc-cell { stroke: var(--border); stroke-width: 1; fill: var(--bg); }
.sc-cell.good { fill: var(--ok-bg); stroke: var(--ok); }
.sc-cell.mid { fill: var(--warn-bg); stroke: var(--warn); }
.sc-cell.low { fill: var(--bad-bg); stroke: var(--bad); }
.sc-cell.on { stroke: var(--text); stroke-width: 3; }
.sc-t { fill: var(--text); font-size: 15px; font-weight: 700; pointer-events: none; }
.sc-s { fill: var(--muted); font-size: 12px; pointer-events: none; }
.sc-chase { fill: var(--bg); }
.sc-ring { fill: var(--card); stroke: var(--border); }
.sc-zone { fill: none; stroke: var(--muted); stroke-width: 2; }
.sc-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.sc-target { fill: none; stroke: var(--text); stroke-width: 3; stroke-dasharray: 8 5; }
.sc-dot { fill-opacity: .75; stroke-width: 1.5; }
.sc-dot.hit { fill: var(--ok); stroke: var(--ok); }
.sc-dot.close { fill: var(--warn); stroke: var(--warn); }
.sc-dot.miss { fill: var(--bad); stroke: var(--bad); }
.sc-dot.over { stroke: var(--text); stroke-width: 3; }
.sc-legend { font-size: 13px; text-align: center; margin-top: 4px; }
.sc-key { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: -1px; }
.sc-key.hit { background: var(--ok); } .sc-key.close { background: var(--warn); } .sc-key.miss { background: var(--bad); }
.sc-tables { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 800px) { .sc-tables { grid-template-columns: repeat(3, 1fr); } }
.sc-barcell { width: 35%; }
.sc-bar { display: block; height: 8px; border-radius: 4px; background: var(--border); min-width: 2px; }
.sc-bar.good { background: var(--ok); } .sc-bar.mid { background: var(--warn); } .sc-bar.low { background: var(--bad); }
.sc-pas .name { font-weight: 600; }
.sc-bad { color: var(--bad); }
.sc-grade { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.sc-grade.hit { background: var(--ok-bg); color: var(--ok); }
.sc-grade.close { background: var(--warn-bg); color: var(--warn); }
.sc-grade.miss { background: var(--bad-bg); color: var(--bad); }
.sc-dmg { font-size: 18px; color: var(--bad); min-width: 24px; text-align: right; }
.sc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-scroll table.map td, .sc-scroll table.map th { white-space: nowrap; }
.sc-trend { width: 100%; max-width: 560px; display: block; }
.sc-barv { fill: var(--border); }
.sc-barv.good { fill: var(--ok); } .sc-barv.mid { fill: var(--warn); } .sc-barv.low { fill: var(--bad); }
.sc-avg { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 6 4; }
tr.sc-total td { font-weight: 700; }
table.map tr[data-go] td a { color: var(--accent); }
@media (max-width: 480px) {
  .sc-scroll table.map { font-size: 13px; }
  .sc-scroll table.map td, .sc-scroll table.map th { padding: 6px 3px; }
}
.sc-preview { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; display: block; }

/* Help */
.help .help-toc { margin: 6px 0 0; padding-left: 18px; line-height: 1.9; }
.help .help-list { margin: 6px 0 10px; padding-left: 20px; line-height: 1.5; }
.help .help-list li { margin-bottom: 6px; }
.help-step { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; line-height: 1.5; }
.help-n { flex: none; min-width: 28px; height: 28px; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.help-step > div { flex: 1; min-width: 0; }
.help-img { display: block; width: 100%; max-width: 380px; height: auto; margin: 10px 0 4px; border: 1px solid var(--border); border-radius: 10px; }
.help-tip { background: var(--accent-bg); border-radius: 10px; padding: 10px 12px; margin: 12px 0 4px; line-height: 1.5; }
.help-warn { background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 10px 12px; margin: 12px 0 4px; line-height: 1.5; }
.help-sec { scroll-margin-top: 64px; }

/* Home */
button.bigstart { min-height: 60px; font-size: 19px; margin-bottom: 14px; }

/* The pad: 1 the spot that was called, 2 where it went */
.padsteps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
.padstep { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 6px 10px; min-height: 56px; border-width: 2px; }
.padstep .n { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 13px; background: var(--bg); color: var(--muted); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.padstep .t { font-size: 12px; color: var(--muted); }
.padstep b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.padstep .sc-grade { grid-column: 2; justify-self: start; margin: 2px 0 0; }
.padstep.on { border-color: var(--accent); background: var(--accent-bg); }
.padstep.on .n { background: var(--accent); color: var(--on-accent); }
.padhint { text-align: center; margin: 6px 0 8px; }
.pad .spot-layer { display: none; }
.pad.mode-spot .spot-layer { display: inline; }
.pad.mode-spot .went-layer { display: none; }
.pad .spot { stroke: var(--card); stroke-width: 3; cursor: pointer; }
.pad .spot.zone { fill: var(--strike); }
.pad .spot.chase { fill: var(--chase); }
.pad .spot.sel { fill: var(--accent); }
.pad .spot-t { fill: var(--strike-text); font-weight: 600; }
.pad .spot.chase + .spot-t { fill: var(--chase-text); }
.pad .spot.sel + .spot-t { fill: var(--on-accent); font-weight: 700; }
.pad .target-outline { fill: none; stroke: var(--text); stroke-width: 4; stroke-dasharray: 9 6; pointer-events: none; }
.pad.mode-spot #padDot { opacity: .45; }
.pad.mode-spot .dot-hit { pointer-events: none; }

/* Buzz batting, between our half-innings */
.batting h2 { font-size: 22px; margin-bottom: 10px; }
.scoreline { justify-content: space-between; gap: 12px; }
.scoreline .stepper button { min-width: 52px; min-height: 52px; font-size: 22px; }
.scoreline .stepper b { font-size: 24px; min-width: 32px; }
.scoreline .stepper span { font-size: 15px; color: var(--text); font-weight: 600; }

/* What happens when she misses */
.sc-scroll table.sc-kinds th { white-space: normal; vertical-align: bottom; }
.pad.mode-spot text.side { display: none; }

/* Ask tab */
.ask-examples { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ask-examples button { text-align: left; min-height: 44px; font-size: 15px; }
.ask-turn { margin-bottom: 14px; scroll-margin-top: 64px; }
.ask-q { margin: 0 0 8px auto; max-width: 85%; width: fit-content; background: var(--accent); color: var(--on-accent); padding: 9px 13px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }
.ask-a { background: var(--card); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; padding: 10px 14px; max-width: 95%; line-height: 1.5; }
.ask-a p { margin: 0 0 8px; }
.ask-a p:last-child, .ask-a ul:last-child { margin-bottom: 0; }
.ask-a ul { margin: 0 0 8px; padding-left: 20px; }
.ask-a li { margin-bottom: 4px; }
.ask-err { color: var(--bad); }
.ask-working { animation: ask-pulse 1.4s ease-in-out infinite; }
@keyframes ask-pulse { 50% { opacity: .45; } }
.ask-steps { margin-top: 8px; font-size: 13px; color: var(--muted); }
.ask-steps summary { font-weight: 500; font-size: 13px; color: var(--accent); padding: 2px 0; }
.ask-steps ul { margin: 4px 0 0; padding-left: 18px; }
.ask-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px; }
.ask-form textarea { flex: 1; min-height: 48px; resize: vertical; font-size: 16px; }
.ask-form button { min-width: 84px; }
.bottomnav a { padding-left: 2px; padding-right: 2px; }

/* How to log a pitch (game page) */
.guide summary { color: var(--accent); }
.guide-steps { margin: 6px 0 8px; padding-left: 22px; line-height: 1.5; }
.guide-steps li { margin-bottom: 6px; }
.guide .hint { margin-bottom: 8px; }
#autoout.nudge { color: var(--warn); font-weight: 600; }

/* The other team's lineup, as buttons */
.lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.lineup button { min-height: 44px; padding: 4px 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; justify-content: flex-start; text-align: left; }
.lineup .lu-n { font-size: 12px; opacity: .7; min-width: 14px; }
#lineup-text { font-size: 16px; }

/* Buzz Hitting: the hitter's view of a pitch (took it, swing and miss, foul, in play, well hit) */
.gdot.take { background: transparent; border-color: var(--muted); }
.gdot.whiff { background: var(--bad); border-color: var(--bad); }
.gdot.foul { background: var(--ball); border-color: var(--ball-line); }
.gdot.inplay { background: var(--accent); border-color: var(--accent); }
.gdot.well { background: var(--ok); border-color: var(--ok); }
.sc-grade.take { background: var(--bg); color: var(--muted); }
.sc-grade.whiff { background: var(--bad-bg); color: var(--bad); }
.sc-grade.foul { background: var(--warn-bg); color: var(--warn); }
.sc-grade.inplay { background: var(--accent-bg); color: var(--accent); }
.sc-grade.well { background: var(--ok-bg); color: var(--ok); }
.sc-dot.take { fill: var(--border); stroke: var(--muted); fill-opacity: .9; }
.sc-dot.whiff { fill: var(--bad); stroke: var(--bad); }
.sc-dot.foul { fill: var(--warn); stroke: var(--warn); }
.sc-dot.inplay { fill: var(--accent); stroke: var(--accent); }
.sc-dot.well { fill: var(--ok); stroke: var(--ok); }
.sc-key.take { background: var(--border); border: 1px solid var(--muted); } .sc-key.whiff { background: var(--bad); } .sc-key.foul { background: var(--warn); } .sc-key.inplay { background: var(--accent); } .sc-key.well { background: var(--ok); }
.sc-good { color: var(--ok); }
.sc-dmg.good { color: var(--ok); }
.sc-zt { fill: var(--text); font-size: 12px; font-weight: 700; pointer-events: none; }
.sc-zs { fill: var(--muted); font-size: 10px; pointer-events: none; }
.sit-pitcher .switch { min-width: 64px; max-width: 110px; white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.sc-kinds td b { font-size: 16px; }
/* The batter row of the top bar: on a phone the batter gets the whole first line, their pitcher and End inning share the second */
@media (max-width: 520px) {
  .sit-pitcher { flex-wrap: wrap; }
  .sit-pitcher .pp-main { flex: 1 1 100%; }
  .sit-pitcher .switch { flex: 1 1 0; max-width: none; min-height: 40px; }
}
/* The hitters, one row each, on the team setup and edit screens */
.roster-row { border-top: 1px solid var(--border); padding: 10px 0 6px; }
.roster-row:first-child { border-top: none; padding-top: 0; }
.roster-row .r-name { flex: 1; min-width: 120px; }
.roster-row .r-num { width: 72px; text-align: center; }
.roster-row .r-del { min-width: 40px; padding: 6px 8px; }
.roster-row .r-bats { gap: 6px; margin-top: 6px; }
.roster-row .r-bats .lbl { width: 40px; font-size: 13px; color: var(--muted); }
.roster-row .r-bats .tok { min-width: 72px; }
.roster-row .r-slap { margin-left: 6px; }

/* Laptops and desktops: use the whole width, with larger text and bigger pads */
@media (min-width: 1100px) {
  .page { max-width: none; padding: 18px 24px; }
  html { font-size: 17px; }
  body { font-size: 17px; }
  small, .muted, .hint { font-size: 14px; }
  table.map { font-size: 15px; }
  h2 { font-size: 19px; }
  .game-grid { gap: 18px; }
  .pad { max-width: 640px; }
  .sc-svg { max-width: 440px; }
  .sc-tiles { grid-template-columns: repeat(4, 1fr); }
  .modal { max-width: 640px; }
}
@media (min-width: 1500px) {
  .page { padding: 20px 32px; }
  html, body { font-size: 18px; }
  .pad { max-width: 720px; }
  .sc-svg { max-width: 500px; }
}