/* ShotTimer — ธีมทางการ "กรมท่าแบบสมาคมกีฬา" (ใช้ทั้งแอปมือถือและหน้าคอม)
   ฟอนต์ IBM Plex Sans Thai / IBM Plex Mono ฝังในแอป (fonts/ · SIL OFL 1.1 — fonts/OFL-IBM-Plex.txt) ใช้ได้แม้ไม่มีเน็ต */
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2212; }

/* สีประจำแบรนด์ (เหมือนกันทุกธีม): แถบหัวกรมท่า · ทองใช้น้อยเฉพาะจุดสำคัญ (อันดับ 1 / เครื่องหมาย) */
:root { --brand: #0e2650; --brand-2: #173a75; --on-brand: #ffffff; --gold: #c8a43a; --on-gold: #1c1404; --radius: 10px; }
:root, :root[data-theme="dark"] {
  --bg: #0a1424; --surface: #101d33; --surface2: #172741; --border: #26385a;
  --text: #e9eef6; --muted: #93a3bb; --accent: #2f6fe0; --on-accent: #ffffff;
  --go: #1e9e5a; --on-go: #ffffff; --stop: #d64045; --on-stop: #ffffff;
  --warn-bg: #3a2f10; --warn: #f0c661; --info-bg: #0f2b52; --info: #a9c8ff;
  --danger-bg: #3d1518; --danger: #ff9a9c; --ok: #5ed39b; --shadow: none;
}
:root[data-theme="light"] {
  --bg: #f2f4f8; --surface: #ffffff; --surface2: #edf1f7; --border: #d3dae6;
  --text: #0e1a2d; --muted: #5a6880; --accent: #123f8c; --on-accent: #ffffff;
  --go: #188a4c; --on-go: #ffffff; --stop: #c62f35; --on-stop: #ffffff;
  --warn-bg: #fff4d6; --warn: #7a5200; --info-bg: #e6efff; --info: #123f8c;
  --danger-bg: #fde8e8; --danger: #9f1f25; --ok: #17784a; --shadow: 0 1px 2px rgba(14, 38, 80, .06), 0 1px 1px rgba(14, 38, 80, .04);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #f2f4f8; --surface: #ffffff; --surface2: #edf1f7; --border: #d3dae6;
    --text: #0e1a2d; --muted: #5a6880; --accent: #123f8c; --on-accent: #ffffff;
    --go: #188a4c; --on-go: #ffffff; --stop: #c62f35; --on-stop: #ffffff;
    --warn-bg: #fff4d6; --warn: #7a5200; --info-bg: #e6efff; --info: #123f8c;
    --danger-bg: #fde8e8; --danger: #9f1f25; --ok: #17784a; --shadow: 0 1px 2px rgba(14, 38, 80, .06), 0 1px 1px rgba(14, 38, 80, .04);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font-family: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif; font-size: 16px; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
#app { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: var(--brand); color: var(--on-brand); border-bottom: 3px solid var(--gold); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .14em; font-size: 15px; }
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; }
.brand small { display: block; font-size: 11px; font-weight: 400; letter-spacing: .04em; opacity: .75; }
.top .pill { background: rgba(255, 255, 255, .14); color: var(--on-brand); }
main { flex: 1; display: flex; flex-direction: column; padding: 8px 16px 96px; }
.view { flex: 1; display: flex; flex-direction: column; gap: 12px; }   /* เต็มที่ว่างที่เหลือ (มีแถบติดตั้งก็ไม่ดันปุ่มเริ่มตกจอ) */
#timerIdle, #timerReview { display: flex; flex-direction: column; gap: 12px; flex: 1; }
[hidden] { display: none !important; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 0; padding-left: 9px; border-left: 3px solid var(--gold); line-height: 1.2; }
.mono { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.gap { gap: 8px; }
.spacer { flex: 1; }
.meter { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
#meterBar { height: 100%; width: 0; background: var(--go); transition: width .05s linear; }
.big-wrap { text-align: center; padding: 8px 0 0; }
.big { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: clamp(64px, 22vw, 108px); line-height: 1.05; font-weight: 500; letter-spacing: -.02em; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; text-align: center; box-shadow: var(--shadow); }
.stat-v { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 500; }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-ok { background: var(--surface2); color: var(--ok); }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.live-shots { margin: 0; padding: 0 0 0 28px; color: var(--muted); font-size: 14px; max-height: 140px; overflow: auto; }
.btn { font: inherit; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; cursor: pointer; text-align: center; }
.btn:hover { border-color: var(--accent); }
.btn:focus-visible, .tab:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.btn-small { padding: 6px 10px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-go, .btn-stop, .btn-big { height: 76px; font-size: 24px; font-weight: 600; letter-spacing: .04em; border-radius: 12px; width: 100%; }
.btn-go { background: var(--go); color: var(--on-go); border: none; }
.btn-stop { background: var(--stop); color: var(--on-stop); border: none; position: relative; overflow: hidden; }
.hold-fill { position: absolute; inset: 0; width: 0; background: rgba(0, 0, 0, .25); }
.btn-stop.holding .hold-fill { width: 100%; transition: width 1s linear; }
.hold-label { position: relative; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid3 { display: grid; grid-template-columns: 1.6fr 0.8fr 1fr; gap: 8px; }
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 8px; }
.ctr { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "l l l" "m v p"; gap: 2px 4px; align-items: center; }
.ctr .ctr-l { grid-area: l; font-size: 13px; color: var(--muted); }
.ctr .btn { padding: 6px 0; font-size: 18px; line-height: 1; }
.ctr .btn:first-of-type { grid-area: m; }
.ctr input { grid-area: v; text-align: center; padding: 6px 2px; width: 100%; }
.ctr .btn:last-of-type { grid-area: p; }
#scCalc { color: var(--accent); }
.score-free { display: flex; flex-direction: column; gap: 8px; }
input.grow { flex: 1; min-width: 0; }
.scores-list { display: flex; flex-direction: column; gap: 12px; }
.sc-match { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.sc-stage { font-size: 13px; color: var(--muted); margin-top: 6px; }
.sc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; font-size: 14px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.sc-row:last-child { border-bottom: none; }
.sc-row .mono { text-align: right; }
a.btn { text-decoration: none; display: block; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.field-label { font-size: 14px; font-weight: 600; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); flex: 1; min-width: 0; }
label.f input[type=number], label.f input[type=text], label.f input[type=email], label.f select { width: 100%; }
input[type=number], input[type=text], input[type=email], select { font: inherit; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; }
input[type=range] { width: 100%; }
.inline-num { width: 72px; padding: 4px 8px; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 15px; flex-wrap: wrap; }
.seg { display: flex; gap: 8px; }
.seg label { flex: 1; text-align: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.seg label:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.seg input { margin: 0 4px 0 0; }
.err { color: var(--danger); min-height: 1em; }
.warn { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 10px; }
.shots { width: 100%; border-collapse: collapse; font-size: 15px; }
.shots th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 4px; }
.shots td { padding: 7px 4px; border-bottom: 1px solid var(--border); }
.shots td:nth-child(2), .shots td:nth-child(3) { font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.shots tr.flag td { background: var(--danger-bg); color: var(--danger); }
.shots tr.deleted td { text-decoration: line-through; color: var(--muted); background: none; }
.shots tr.deleted td:last-child { text-decoration: none; }
.flag-note { color: var(--danger); }
.ok-note { color: var(--ok); }
.mic-cards { display: flex; flex-direction: column; gap: 8px; }
.mic-card { font: inherit; color: var(--text); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; border-radius: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); }
.mic-card.on { border: 2px solid var(--accent); }
.mic-card .t { font-weight: 600; font-size: 15px; }
.mic-card .pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hist li button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 8px; }
.empty { text-align: center; padding: 28px 8px; display: flex; flex-direction: column; gap: 4px; }
.banner { margin: 8px 16px 0; background: var(--info-bg); color: var(--info); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; background: var(--surface); border-top: 1px solid var(--border); padding: 4px 0 calc(6px + env(safe-area-inset-bottom)); z-index: 10; }
.tab { flex: 1; max-width: 140px; background: none; border: none; border-top: 2px solid transparent; color: var(--muted); font: inherit; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 2px; cursor: pointer; }
.tab .ti { width: 22px; height: 22px; display: block; }
.tab.active { color: var(--accent); border-top-color: var(--accent); font-weight: 600; }
:root[data-theme="dark"] .tab.active, :root:not([data-theme]) .tab.active { color: #8db6ff; border-top-color: #8db6ff; }
.toast { position: fixed; left: 16px; right: 16px; top: calc(72px + env(safe-area-inset-top)); z-index: 60; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: 528px; margin: 0 auto; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 14px; text-align: center; }
.toast.bad { background: var(--danger-bg); color: var(--danger); }

/* ผู้ยิงคนถัดไป (RO) */
.next-box { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.next-who { min-width: 0; }
.next-name { font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }