/* Built for a referee in sunlight with gloves of sweat: big targets, high contrast. */
:root{--bg:#0b1210;--panel:#141e1a;--line:#24322c;--ink:#f2f6f4;--quiet:#94a59d;--accent:#3fbf86;--accent-ink:#04140c;
  --home:#5aa9ff;--away:#ffb35a;--yellow:#ffd23f;--red:#ff4d4f;--warn:#ffb020}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);user-select:none;-webkit-user-select:none}
a{color:var(--accent)}
button{font:inherit;font-weight:700;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;min-height:48px;cursor:pointer;touch-action:manipulation}
button:active{transform:scale(.97)}button:disabled{opacity:.35}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.stop{background:#fff;color:#000;border-color:#fff}
button.danger{background:var(--red);color:#fff;border-color:var(--red)}
button.ghost{background:transparent}
button.big{min-height:64px;font-size:20px}button.small{min-height:36px;padding:6px 12px;font-size:14px}
.wide{width:100%}
input,textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;width:100%;user-select:text;-webkit-user-select:text}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--quiet);font-weight:600}
.pad{padding:16px}.stack{display:flex;flex-direction:column;gap:12px}
.center-col{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:420px;margin:0 auto}
.center{text-align:center}.muted{color:var(--quiet)}.small{font-size:13px}
.err{color:var(--red);margin:0}
.logo{text-align:center;margin-bottom:24px}.logo img{width:72px}.logo h1{margin:8px 0 0}.logo p{margin:4px 0 0;color:var(--quiet)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:3}
.bar b{display:block}
.sync{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;display:inline-block}
.sync.ok{background:#123326;color:var(--accent)}.sync.busy{background:#33290f;color:var(--warn)}.sync.off{background:#3a1416;color:#ff8a8c}
h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--quiet);margin:8px 0 12px}
h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--quiet);margin:16px 0 8px}
.fx{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;margin-bottom:10px;padding:14px 16px;font-weight:400}
.fx .when{font-size:13px;color:var(--quiet);font-weight:600}.fx .teams{font-size:18px;font-weight:700}.fx .teams i{font-weight:400;color:var(--quiet)}
.fx .sub{font-size:13px;color:var(--quiet)}

.clock{text-align:center;padding:14px 16px 16px;border-bottom:1px solid var(--line)}
.clock .per{color:var(--quiet);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.time{font-size:76px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.05;margin:4px 0 12px}
.clock:not(.run) .time{color:var(--quiet)}.clock.over .time{color:var(--warn)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bins{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.bin{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--panel);border-left:6px solid var(--yellow)}
.bin.red20,.bin.red{border-left-color:var(--red)}
.bin .rem{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.bin.soon .rem{color:var(--warn)}.bin.due{background:#123326;animation:flash 1s infinite}.bin.due .rem{color:var(--accent);font-size:18px}
@keyframes flash{50%{background:#1d4d38}}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.col{display:flex;flex-direction:column;gap:8px;text-align:center}
.col .nm{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:10px;padding:4px 8px}
.col.home .nm{background:var(--home);color:var(--home-ink,#000)}.col.away .nm{background:var(--away);color:var(--away-ink,#000)}
.col .pts{font-size:56px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.col .tr{color:var(--quiet);font-size:13px;margin-top:-4px}
.act{min-height:56px}.act.try{min-height:72px;font-size:22px}
.col.home .act.try{background:var(--home);color:var(--home-ink,#000);border-color:var(--home)}.col.away .act.try{background:var(--away);color:var(--away-ink,#000);border-color:var(--away)}
.card-btn{border-color:var(--yellow)}
.log{padding:0 12px 24px}.loghead{display:flex;justify-content:space-between;align-items:center}
.li{display:grid;grid-template-columns:56px 1fr;gap:8px;padding:8px 10px;border-radius:10px;font-size:15px}
.li span:first-child{color:var(--quiet);font-variant-numeric:tabular-nums;font-weight:700}
.li.home{border-left:4px solid var(--home)}.li.away{border-left:4px solid var(--away)}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;z-index:10}
.sheet[hidden]{display:none}
.sheet-card{background:var(--bg);border-top:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-height:92vh;overflow:auto;padding:12px 16px calc(20px + env(safe-area-inset-bottom))}
.sheet-head{display:flex;justify-content:space-between;align-items:center}.sheet-head h3{margin:0;font-size:16px;color:var(--ink);text-transform:none;letter-spacing:0}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.num{display:flex;flex-direction:column;align-items:center;padding:8px 2px;min-height:60px}
.num b{font-size:22px}.num small{font-size:10px;color:var(--quiet);font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num.bench{background:#0f1714}
.cardpick{min-height:64px;font-size:18px}.cardpick.yellow{background:var(--yellow);color:#1b1600;border:0}.cardpick.red,.cardpick.red20{background:var(--red);color:#fff;border:0}
.conv{text-align:center}.conv .time.over{color:var(--red)}
.code{font-size:48px;font-weight:800;letter-spacing:.12em;text-align:center;margin:16px 0;font-variant-numeric:tabular-nums}
.final{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;text-align:center;margin:12px 0 4px;font-weight:700}
.final .fs{font-size:48px;font-weight:800;font-variant-numeric:tabular-nums}
.okbox,.warnbox{padding:14px;border-radius:14px;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.okbox{background:#123326}.warnbox{background:#33290f;color:#ffe2a6}

button.timeoff{background:#ff9f1a;color:#1a1000;border-color:#ff9f1a}
.per .off{color:#ff9f1a}
.setup{margin:10px 12px 0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);display:flex;flex-direction:column;gap:10px}
.setup h3{margin:0}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.setrow>span{color:var(--quiet);font-size:14px;font-weight:600}
.seg{display:flex;gap:6px;align-items:center}
.seg button{min-height:44px;min-width:52px}
.halfv{min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.swatchbtn{display:flex;align-items:center;gap:6px;padding:6px 10px}
.sw{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.35);display:inline-block;flex:none}
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.pal{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:72px}
.pal .sw{width:32px;height:32px}.pal.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.pal small{font-size:11px;color:var(--quiet);font-weight:500}
/* Keep dark jersey colours visible on the dark background. */
.col .nm,.col .act.try{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}

.bin.temp{border-left-color:#7fb8ff;flex-wrap:wrap}.bin.temp.blood{border-left-color:var(--red)}
.bin.temp small{color:var(--quiet);font-weight:500}
.bin.temp.blood.due{background:#3a1416;animation:none}.bin.temp.blood.due .rem{color:#ff8a8c}

.num.off,.num:disabled{opacity:.22;background:transparent;border-style:dashed}

#clock{cursor:pointer}.clock .dir{font-size:12px;color:var(--quiet);margin:-8px 0 10px}