/* TU Shooting Scoreboard — range-office scorebook layout. Light = red + white, dark = red + black */
:root{
  --bg:#f6f2f2; --paper:#ffffff; --ink:#1c1c1c; --muted:#6b6b6b; --line:#e6dcdc;
  --accent:#c8102e; --accent-soft:#fde8ea; --gold:#c8102e; --gold-soft:#fde8ea; --gold-ink:#ffffff; --brand:#ffffff;
  --band:#c8102e; --band-ink:#ffffff; --edge:#7d0a1d; --ok:#1f6b45; --warn:#b06a00; --focus:#1d4ed8;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans Thai",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0a0a0a; --paper:#161616; --ink:#f5f5f5; --muted:#a8a8a8; --line:#2e2e2e;
  --accent:#ff3b4f; --accent-soft:#3a1015; --gold:#e0172e; --gold-soft:#2a1216; --gold-ink:#ffffff; --brand:#ff3b4f;
  --band:#000000; --band-ink:#ffffff; --edge:#e0172e; --ok:#5cc28d; --warn:#e5a33b; --focus:#7aa2ff; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a0a0a; --paper:#161616; --ink:#f5f5f5; --muted:#a8a8a8; --line:#2e2e2e;
  --accent:#ff3b4f; --accent-soft:#3a1015; --gold:#e0172e; --gold-soft:#2a1216; --gold-ink:#ffffff; --brand:#ff3b4f;
  --band:#000000; --band-ink:#ffffff; --edge:#e0172e; --ok:#5cc28d; --warn:#e5a33b; --focus:#7aa2ff; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;margin:0;padding-inline:16px;padding-block:20px 40px}
.wrap{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--band);color:var(--band-ink);border-radius:8px;border-bottom:6px solid var(--edge)}
h1{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;margin:0;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
h1 span{color:var(--brand)}
.sub{color:color-mix(in srgb,var(--band-ink) 85%,transparent);margin:4px 0 0;font-size:.9rem}
.status{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.78rem;color:var(--band-ink)}
header button{background:transparent;color:var(--band-ink);border-color:color-mix(in srgb,var(--band-ink) 55%,transparent)}
header button:hover:not(:disabled){border-color:#fff;color:#fff}
header .dot{background:color-mix(in srgb,var(--band-ink) 60%,transparent)}
header .dot.live{background:#6dff9f}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dot.live{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
.dot.bad{background:var(--accent)}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
label.f{display:flex;flex-direction:column;gap:2px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
select,input[type=text],input[type=email],input[type=password],textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:6px 8px;min-width:0}
button{font:inherit;font-size:.88rem;cursor:pointer;border-radius:4px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:7px 12px}
button:hover:not(:disabled){border-color:var(--ink)}
button:disabled{opacity:.5;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.ghost{background:transparent}
button[aria-pressed=true]{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:600}
a{color:var(--focus)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.spacer{flex:1}
.meta{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs button{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;padding:6px 14px}
.tabs button{border-color:var(--accent)}
.tabs button .c{font-family:var(--mono);font-size:.75rem;opacity:.7;margin-left:6px}
main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
main.two{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:980px){main.two{grid-template-columns:1fr}}
section.panel{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:6px;padding:14px;min-width:0}
h2{font-family:var(--display);font-weight:600;font-size:1.35rem;text-transform:uppercase;letter-spacing:.03em;margin:0 0 10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
h2 small{font-family:var(--body);font-size:.8rem;text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400}
.tablebox{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-ink);background:var(--gold);font-weight:600;text-align:right;padding:6px;white-space:nowrap}
th small{display:block;font-size:.85em;opacity:.7;text-transform:none;letter-spacing:0}
th.l,td.l{text-align:left}
td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);font-size:.86rem;white-space:nowrap}
td.name{font-family:var(--body);font-size:.95rem;text-align:left;white-space:normal;min-width:130px}
td.uni{font-family:var(--body);text-align:left}
tbody tr.row.click{cursor:pointer}
tbody tr.row.click:hover{background:var(--bg)}
tbody tr.sel{background:var(--gold-soft)}
td.rank{font-family:var(--display);font-weight:700;font-size:1.35rem;text-align:left;width:2.2em;color:var(--accent)}
td.total{font-weight:600;font-size:1rem}
td.total .x,td.tt .x{color:var(--accent);font-size:.85em;margin-left:4px}
td.ser{color:var(--muted)}
td.ser .x{color:var(--accent)}
tr.out td{opacity:.5}
tr.teamstart td{border-top:2px solid var(--accent)}
td.tt{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--accent)}
.pill{display:inline-block;font-family:var(--body);font-size:.7rem;padding:1px 7px;border-radius:99px;border:1px solid var(--line);color:var(--muted);margin-left:4px;vertical-align:middle}
.pill.done{border-color:var(--ok);color:var(--ok)}
.empty{color:var(--muted);padding:22px 4px;line-height:1.7;white-space:normal;text-align:left;font-family:var(--body)}
.add{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.add input{flex:1 1 130px}
/* staff: score card */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:12px}
.fields label.f input,.fields label.f select{width:100%}
.big{font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.big small{font-size:1rem;color:var(--muted);font-weight:500;margin-left:6px}
.big .x{color:var(--accent);font-size:1.4rem;margin-left:6px}
.cardtop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{border:0;border-radius:0}
.series{display:grid;grid-template-columns:2.4em minmax(0,1fr) 4.6em;gap:8px;align-items:center;padding:6px 0;border-top:1px dashed var(--line)}
.series .lab{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--muted)}
.series .st{font-family:var(--mono);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.series .st .x{color:var(--accent)}
.shots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
@media (max-width:520px){.shots{grid-template-columns:repeat(5,minmax(0,1fr))}}
.shots input,.serin{width:100%;min-width:0;text-align:center;font-family:var(--mono);font-size:.9rem;padding:6px 0;border-radius:3px}
.serin{font-size:1rem;text-align:left;padding:6px 10px}
.shots input.x{border-color:var(--accent);color:var(--accent);font-weight:600}
input[aria-invalid=true]{background:var(--accent-soft)!important;border-color:var(--accent)!important}
.locked{font-size:.8rem;color:var(--muted)}
.hint{font-size:.8rem;color:var(--muted);margin:10px 0 0}
.rowbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--accent-soft);border:1px solid var(--accent);border-radius:4px;padding:8px 10px;font-size:.88rem}
.notice{background:var(--paper);border:1px dashed var(--warn);border-radius:4px;padding:8px 12px;font-size:.85rem}
.notice.err{border:1px solid var(--accent);background:var(--accent-soft)}
.import textarea{width:100%;font-family:var(--mono);font-size:.82rem}
.import pre{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:8px;font-family:var(--mono);font-size:.78rem;overflow-x:auto;margin:6px 0}
.rules{font-size:.8rem;color:var(--muted);line-height:1.7}
.rules b{color:var(--ink);font-weight:500}
/* staff: login + save status */
.login{max-width:380px;margin:40px auto;display:flex;flex-direction:column;gap:12px}
.login label.f input{width:100%}
.save{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.save.ok{color:var(--ok)}
.save.err{color:var(--accent);font-weight:600}
.linkrow{font-size:.82rem;color:var(--muted)}
/* projector board */
body.board{font-size:clamp(16px,1.5vw,30px);padding-block:2vh}
body.board .wrap{max-width:none}
body.board h1{font-size:clamp(2.2rem,4.2vw,5rem)}
body.board .sub{font-size:1em}
body.board .status{font-size:clamp(.9rem,1.3vw,1.6rem);font-weight:600}
body.board .tabs button{font-size:clamp(1.1rem,1.9vw,2.4rem);padding:.25em .8em}
body.board h2{font-size:clamp(1.5rem,2.6vw,3.2rem)}
body.board h2 small{font-size:.5em}
body.board th{font-size:clamp(.75rem,1vw,1.2rem)}
body.board td{font-size:clamp(1rem,1.5vw,1.9rem);padding:.45em .4em}
body.board td.name{font-size:clamp(1.05rem,1.6vw,2rem)}
body.board td.total{font-size:clamp(1.1rem,1.7vw,2.1rem)}
body.board td.rank,body.board td.tt{font-size:clamp(1.3rem,2vw,2.6rem)}
.progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--gold)}
.live-badge{font-family:var(--display);font-weight:700;letter-spacing:.12em;color:var(--accent);background:#fff;padding:2px 10px;border-radius:3px}
.live-badge.off{background:transparent;color:inherit;border:1px solid currentColor;opacity:.7}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.theme-btn{white-space:nowrap}
.lang-btn{white-space:nowrap;font-weight:600}
html[lang="en"] .l-th{display:none}
html:not([lang="en"]) .l-en{display:none}
.hdr-link{font-family:var(--body);font-size:.88rem;color:var(--band-ink);text-decoration:none;border:1px solid color-mix(in srgb,var(--band-ink) 55%,transparent);border-radius:4px;padding:7px 12px;white-space:nowrap}
.hdr-link:hover{border-color:#fff}
/* on-screen score keypad */
.keypad{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);border-top:4px solid var(--accent);padding:6px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.28)}
body.has-kp{padding-bottom:300px}
.kp-head{max-width:520px;margin:0 auto 6px;font-family:var(--mono);font-size:.8rem;color:var(--muted);text-align:center}
.kp-grid{max-width:520px;margin:0 auto;display:grid;gap:6px;grid-template-columns:repeat(4,1fr)}
.kp-grid.kp-dec,.kp-grid.kp-ten{grid-template-columns:repeat(4,1fr)}
button.kp{min-height:52px;font-family:var(--display);font-weight:700;font-size:1.5rem;border-radius:8px;padding:0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button.kp:active{background:var(--gold);color:#fff;border-color:var(--gold)}
button.kp.kp-x{color:var(--accent);border-color:var(--accent)}
button.kp.kp-w{font-size:1.3rem}
button.kp.kp-n{background:var(--accent);border-color:var(--accent);color:#fff;font-size:1.2rem}
#kpBtn{font-size:1.1rem;padding:5px 10px}
/* narrow screens: let the header controls wrap instead of widening the page */
.status{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
#userBox{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
#userEmail{overflow-wrap:anywhere;min-width:0}
header>div{min-width:0}
/* change history */
.hrow{display:grid;grid-template-columns:9.5em minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 0;border-top:1px dashed var(--line)}
.hmeta{font-family:var(--mono);font-size:.74rem;color:var(--muted);line-height:1.4}
.hbody{font-size:.9rem;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.chg{font-family:var(--mono);font-size:.8rem;background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:1px 6px}
.tag{font-size:.75rem;border-radius:99px;padding:1px 8px;border:1px solid currentColor}
.tag.add{color:var(--ok)}
.tag.del{color:var(--accent)}
label.chk{display:inline-flex;gap:6px;align-items:center;font-size:.85rem}
@media (max-width:620px){.hrow{grid-template-columns:1fr auto}.hmeta{grid-column:1/-1}}
/* public search + relay filter */
.filters{align-items:flex-end}
.filters .grow{flex:1 1 220px}
.filters input[type=search]{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:7px 10px}
.plink{margin-left:auto;font-size:.88rem;white-space:nowrap}
/* athlete detail popup */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto}
.modal-card{position:relative;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:8px;max-width:640px;width:100%;margin:4vh auto;padding:16px}
.modal-x{position:absolute;top:8px;right:8px;padding:4px 10px;font-size:1rem}
body.modal-open{overflow:hidden}
.dhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin:0 28px 10px 0}
.drank{font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--accent);min-width:1.6em;text-align:center}
.dname{font-size:1.25rem;font-weight:600;overflow-wrap:anywhere}
.dtotal{font-family:var(--display);font-weight:700;font-size:2.2rem;text-align:right;line-height:1}
.dtotal .x{color:var(--accent);font-size:1.1rem;margin-left:4px}
.dtotal small{display:block;font-family:var(--mono);font-size:.7rem;color:var(--muted);font-weight:500;margin-top:2px}
.muted{color:var(--muted);font-size:.85rem}
.dseries{display:grid;grid-template-columns:2.2em minmax(0,1fr) 5.5em;gap:8px;align-items:center;padding:7px 0;border-top:1px dashed var(--line)}
.dseries .lab{font-family:var(--display);font-weight:600;color:var(--muted)}
.dseries .st{font-family:var(--mono);font-weight:600;text-align:right}
.dseries .st .x{color:var(--accent)}
.chips{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
@media (max-width:520px){.chips{grid-template-columns:repeat(5,minmax(0,1fr))}}
.chip{font-family:var(--mono);font-size:.8rem;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:2px 0}
.chip.x{color:var(--accent);border-color:var(--accent);font-weight:600}
.chip.empty{opacity:.4}
.dstats{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;padding-top:8px;border-top:2px solid var(--line);font-size:.9rem}
tbody tr.row.click td.name{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent);text-underline-offset:3px}
.sub.updated{margin-top:2px;font-family:var(--mono);font-size:.8rem}
.sub.updated:empty{display:none}
/* QR code on the projector board */
.qrbox{display:flex;align-items:center;gap:10px;color:var(--band-ink)}
.qrbox .qrimg{width:clamp(76px,9vw,150px);line-height:0;border-radius:6px;overflow:hidden;background:#fff}
.qrbox .qrimg svg{width:100%;height:auto;display:block}
.qrbox .qrcap{font-size:clamp(.75rem,1.1vw,1.3rem);font-weight:600;line-height:1.25}
@media (max-width:700px){.qrbox{display:none}}
/* past results list + banner */
.notice.past{background:var(--gold-soft);border-style:solid;border-color:var(--accent)}
.comps{display:flex;flex-direction:column;gap:10px}
.comp{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:6px;padding:12px 14px}
.comp.live{border-left-color:var(--accent)}
.comp .cname{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);text-decoration:none;margin-right:8px;overflow-wrap:anywhere}
.comp .cname:hover{text-decoration:underline}
.comp .cmain{min-width:0;flex:1 1 260px}
.comp .cact{display:flex;gap:8px}
.btnlink{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:7px 14px;font-size:.88rem;text-decoration:none;color:var(--ink);background:var(--paper)}
.btnlink.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btnlink:hover{border-color:var(--ink)}
.comp .tag{display:inline-block;vertical-align:middle;white-space:nowrap}
/* logo in page headers */
header>div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
header>div:first-child>.logo{grid-column:1;grid-row:1 / span 6;width:clamp(60px,6.5vw,92px);height:auto;border-radius:16%}
header>div:first-child>:not(.logo){grid-column:2}
body.board header>div:first-child>.logo{width:clamp(72px,7vw,130px)}
/* "now shooting" relay */
tbody tr.row.now td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
tbody tr.row.now td:first-child{box-shadow:inset 5px 0 0 var(--accent)}
.nowbadge{margin:4px 0 0;display:inline-block;font-weight:600;font-size:.85rem;background:#fff;color:#c8102e;border-radius:99px;padding:2px 12px}
.nowbadge[hidden]{display:none}
body.board .nowbadge{font-size:clamp(.9rem,1.4vw,1.6rem)}