/* cricket-scorer.css — the Cricket Scorer. Phone first: an app bar, four parts and a tab bar
   at the foot; sheets rise from the bottom. The scoreboard is a dark green board with cream
   figures, like the ones at a ground; the pad under it is big enough to tap without looking
   twice. Light and dark follow the device. The colours of a ball are the same everywhere:
   a four blue, a six purple, a wicket red, an extra amber. */
:root{
  --bg:#eef0ea; --bg2:#e4e7df; --card:#fffefa; --ink:#18201b; --ink2:#59625c; --ink3:#89918b; --line:#dfe2d8; --line2:#cdd2c5;
  --ac:#13753f; --ac2:#0e5f32; --acs:#e0f1e6; --acink:#fff;
  --b1:#0f3d2a; --b2:#0a2c1e; --bink:#f6efd6; --bink2:#b9cfc0; --gold:#f3c547;
  --four:#1d5fc4; --fours:#e3ecfb; --six:#7b2fb8; --sixs:#f0e5fa; --wk:#c62828; --wks:#fde4e4; --ext:#a15c00; --exts:#fcefd6; --dot:#8a928c;
  --shadow:0 1px 2px rgba(20,40,25,.06),0 8px 24px -14px rgba(20,40,25,.3);
  --r:18px; --r2:12px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --tabh:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101412; --bg2:#161b18; --card:#1b211d; --ink:#ecefe9; --ink2:#a6aea8; --ink3:#78807a; --line:#29302b; --line2:#353d37;
    --ac:#4fd08a; --ac2:#7ddfa8; --acs:#173a26; --acink:#05170c;
    --b1:#0d3322; --b2:#082116; --bink:#f6efd6; --bink2:#9fbba9;
    --four:#7ea8ff; --fours:#1c2b4a; --six:#c79bff; --sixs:#2f1f45; --wk:#ff7b7b; --wks:#45201f; --ext:#f2b54a; --exts:#3b2e14; --dot:#7c847e;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.45; font-size:15px; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
button:disabled{ cursor:default; }
a{ color:var(--ac); }
svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:2.5px solid var(--ac); outline-offset:2px; border-radius:6px; }

/* ---------- the website around the app ---------- */
header.site{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
header.site .brand{ display:flex; align-items:center; font-weight:900; font-size:19px; letter-spacing:-.02em; color:#0e386d; text-decoration:none; font-family:Georgia,serif; }
@media (prefers-color-scheme:dark){ header.site .brand{ color:#cfe0ff; } }
header.site .brand img{ width:24px; height:24px; margin-right:8px; }
header.site .brand span{ color:#0b7d74; }
.hdr-right{ display:flex; align-items:center; gap:12px; }
header.site .back{ font-size:13px; font-weight:700; text-decoration:none; color:var(--ink2); }
.hdr-install{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:7px 12px; border-radius:99px; background:var(--ac); color:var(--acink); }
.hdr-install svg{ width:16px; height:16px; stroke-width:2.2; }
main.page{ width:100%; max-width:600px; margin:0 auto; padding:18px 12px 32px; flex:1; }
.intro{ text-align:center; padding:4px 8px 14px; }
h1.title{ font-size:26px; line-height:1.15; font-weight:800; letter-spacing:-.02em; }
.sub{ color:var(--ink2); font-size:15px; margin-top:6px; }
footer.site{ text-align:center; color:var(--ink2); font-size:13px; padding:22px 16px 30px; }

.installcard{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-bottom:12px; box-shadow:var(--shadow); }
.installcard img{ border-radius:12px; flex:none; }
.ic-text{ flex:1; min-width:0; }
.ic-text b{ display:block; font-size:15px; }
.ic-text span{ display:block; font-size:13px; color:var(--ink2); }

/* ---------- the app ---------- */
.app{ position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); min-height:640px; display:flex; flex-direction:column; }
.appbar{ display:flex; align-items:center; gap:10px; padding:12px 12px 10px 14px; background:var(--card); border-bottom:1px solid var(--line); border-radius:24px 24px 0 0; }
.appbar img{ border-radius:9px; flex:none; }
.ab-id{ flex:1; min-width:0; }
.ab-id b{ display:block; font-size:17px; font-weight:750; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ab-id span{ display:block; font-size:12.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iconbtn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--ink); flex:none; }
.iconbtn:hover{ background:var(--bg2); }
.iconbtn svg{ width:22px; height:22px; }
#abNew{ background:var(--ac); color:var(--acink); }
#abNew:hover{ background:var(--ac2); }
.bars:empty{ display:none; }
.notice{ display:flex; align-items:center; gap:10px; margin:10px 12px 0; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r2); font-size:14px; font-weight:600; }
.notice > span{ flex:1; }
.notice.warn,.warn{ color:var(--wk); background:var(--wks); border-color:transparent; font-size:13.5px; font-weight:600; padding:9px 12px; border-radius:var(--r2); margin-top:10px; }
.pane{ flex:1; padding:12px 12px 20px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border-radius:12px; font-size:14.5px; font-weight:700; background:var(--card); border:1px solid var(--line2); color:var(--ink); text-decoration:none; }
.btn:hover{ border-color:var(--ink3); }
.btn.solid{ background:var(--ac); border-color:var(--ac); color:var(--acink); }
.btn.solid:hover{ background:var(--ac2); border-color:var(--ac2); }
.btn.danger{ color:var(--wk); border-color:var(--wk); background:transparent; }
.btn.danger-solid{ background:var(--wk); border-color:var(--wk); color:#fff; }
@media (prefers-color-scheme:dark){ .btn.danger-solid{ color:#2a0b0b; } }
.btn:disabled{ opacity:.45; }
.btn.sm{ min-height:34px; padding:0 12px; font-size:13px; border-radius:10px; }
.btn.big{ min-height:54px; font-size:16.5px; width:100%; margin-top:14px; }
.btnrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.btnrow .btn{ flex:1 1 auto; }
.xbtn{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--ink2); font-size:16px; flex:none; }
.xbtn:hover{ background:var(--bg2); }
.linkbtn{ color:var(--ac); font-weight:700; font-size:14px; padding:10px 4px; text-decoration:underline; text-underline-offset:3px; display:block; margin:6px auto 0; }
.hint{ font-size:13px; color:var(--ink2); text-align:center; margin-top:12px; padding:0 8px; }
.empty{ color:var(--ink2); text-align:center; padding:28px 12px; font-size:14px; }
.note{ font-size:13.5px; color:var(--ink2); }
.note.small{ font-size:12px; margin-top:8px; }
.mt{ margin-top:8px; }

/* ---------- welcome ---------- */
.welcome{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px 18px 14px; text-align:center; }
.welcome h2{ font-size:21px; font-weight:800; letter-spacing:-.01em; margin-top:6px; }
.welcome p{ color:var(--ink2); font-size:14.5px; margin:6px 0 4px; }
.wl-art{ width:150px; height:100px; }
.wl-field{ fill:var(--acs); stroke:var(--ac); stroke-width:1.5; }
.wl-pitch{ fill:#e8d9b0; stroke:none; }
@media (prefers-color-scheme:dark){ .wl-pitch{ fill:#5a4d2c; } }
.wl-st{ stroke:var(--ink); stroke-width:1.6; }
.wl-ball{ fill:var(--wk); stroke:none; }
.wl-seam{ stroke:#fff; stroke-width:.9; }

/* ---------- the scoreboard ---------- */
.board{ position:relative; background:linear-gradient(180deg,var(--b1),var(--b2)); color:var(--bink); border-radius:var(--r); padding:14px 16px 12px; box-shadow:var(--shadow); overflow:hidden; }
.board::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px); pointer-events:none; }
.bd-top{ display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bink2); }
.bd-top span:first-child{ color:var(--bink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-main{ display:flex; align-items:baseline; gap:12px; margin-top:2px; }
.bd-score{ font-size:52px; line-height:1.05; font-weight:850; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.bd-overs{ font-size:17px; font-weight:700; color:var(--bink2); font-variant-numeric:tabular-nums; }
.bd-facts{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:6px; }
.bd-facts span{ display:flex; align-items:baseline; gap:5px; }
.bd-facts small{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bink2); }
.bd-facts b{ font-size:16px; font-variant-numeric:tabular-nums; }
.bd-line{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.14); font-size:14px; font-weight:700; color:var(--gold); }
.bd-fh{ position:absolute; top:12px; right:14px; z-index:1; font-size:12px; font-weight:900; letter-spacing:.1em; color:#2a1a00; background:var(--gold); padding:4px 9px; border-radius:99px; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ transform:scale(1.07); } }
@media (prefers-reduced-motion:reduce){ .bd-fh{ animation:none; } }
#bdInn{ white-space:nowrap; }
.board:has(.bd-fh:not([hidden])) #bdInn{ visibility:hidden; }

/* ---------- cards on the Score page ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); margin-top:10px; }
.pad-card,.endcard{ padding:16px; }
.ch{ font-size:18px; font-weight:800; letter-spacing:-.01em; }
.endtext{ color:var(--ink2); font-size:14.5px; margin-top:4px; }
.endlines p{ font-size:14px; padding:8px 0; border-bottom:1px dashed var(--line); }
.endlines p:last-child{ border-bottom:none; }
.endlines small{ color:var(--ink2); }

.who{ overflow:hidden; }
.batrows{ list-style:none; }
.batrows li{ border-bottom:1px solid var(--line); }
.batrows li.gap{ padding:14px 14px; color:var(--ink2); font-weight:600; font-size:14px; }
.bat{ width:100%; display:grid; grid-template-columns:1fr auto; grid-template-areas:"n r" "x x"; gap:0 10px; padding:10px 14px; text-align:left; }
.bat:hover{ background:var(--bg); }
.bn{ grid-area:n; display:flex; align-items:center; gap:8px; min-width:0; }
.bn b{ font-size:16.5px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn svg{ width:18px; height:18px; flex:none; color:var(--ink3); opacity:0; }
.on .bn svg{ opacity:1; color:var(--ac); }
.on .bn b::after{ content:" *"; color:var(--ac); }
.br{ grid-area:r; display:flex; align-items:baseline; gap:4px; font-variant-numeric:tabular-nums; }
.br b{ font-size:22px; font-weight:850; }
.br small{ font-size:13px; color:var(--ink2); font-weight:600; }
.bx{ grid-area:x; font-size:12px; color:var(--ink3); padding-left:26px; font-variant-numeric:tabular-nums; }
.pship{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding:8px 14px; font-size:12.5px; color:var(--ink2); background:var(--bg); }
.pship b{ color:var(--ink); }
.bowlrow{ width:100%; display:flex; align-items:center; gap:10px; padding:10px 14px; text-align:left; border-top:1px solid var(--line); }
.bowlrow:hover{ background:var(--bg); }
.bwn{ flex:1; min-width:0; }
.bwn small,.bwf small{ display:block; font-size:11.5px; color:var(--ink3); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.bwf small{ text-transform:none; letter-spacing:0; font-weight:600; text-align:right; }
.bwn b{ display:block; font-size:16px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bwf b{ display:block; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; }
.chg{ font-size:12px; font-weight:800; color:var(--ac); padding:6px 9px; border-radius:99px; background:var(--acs); }

.overline{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:8px 10px; background:var(--card); border:1px solid var(--line); border-radius:var(--r2); }
.ol-label{ font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); white-space:nowrap; }
.balls{ display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.ball{ min-width:30px; height:30px; padding:0 7px; border-radius:99px; display:inline-grid; place-items:center; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; background:var(--bg); color:var(--ink); border:1.5px solid var(--line2); }
.ball.d{ color:var(--dot); }
.ball.s4{ background:var(--four); border-color:var(--four); color:#fff; }
.ball.s6{ background:var(--six); border-color:var(--six); color:#fff; }
.ball.w{ background:var(--wk); border-color:var(--wk); color:#fff; }
@media (prefers-color-scheme:dark){ .ball.s4,.ball.s6,.ball.w{ color:#0b0d0c; } }
.ball.x{ background:var(--exts); border-color:var(--ext); color:var(--ext); }
.ball.fh{ box-shadow:0 0 0 2px var(--gold); }
.ball.none{ border:none; background:none; color:var(--ink3); font-weight:600; padding:0; }
.need{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border-radius:var(--r2); background:var(--acs); color:var(--ac2); font-weight:750; font-size:14.5px; }
@media (prefers-color-scheme:dark){ .need{ color:var(--ac); } }
.need span{ flex:1; }

/* ---------- the pad ---------- */
.pad{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:12px; }
.k{ min-height:60px; border-radius:16px; background:var(--card); border:1px solid var(--line2); box-shadow:0 1px 0 var(--line2); font-size:24px; font-weight:850; font-variant-numeric:tabular-nums; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; color:var(--ink); transition:transform .06s; }
.k small{ font-size:10.5px; font-weight:700; color:var(--ink3); letter-spacing:.03em; margin-top:2px; }
.k:active{ transform:translateY(1px) scale(.98); }
.k:hover{ border-color:var(--ink3); }
.k4{ color:var(--four); background:var(--fours); border-color:transparent; }
.k6{ color:var(--six); background:var(--sixs); border-color:transparent; }
.k4 small,.k6 small{ color:inherit; opacity:.75; }
.kout{ background:var(--wk); border-color:var(--wk); color:#fff; letter-spacing:.04em; }
@media (prefers-color-scheme:dark){ .kout{ color:#2a0b0b; } }
.kx{ font-size:18px; color:var(--ext); background:var(--exts); border-color:transparent; }
.kx small{ color:inherit; opacity:.8; }
.kmore{ font-size:20px; }
.kt{ font-size:13px; font-weight:750; gap:3px; min-height:52px; color:var(--ink2); background:var(--bg); border-color:transparent; box-shadow:none; }
.kt svg{ width:20px; height:20px; }
.kwide{ grid-column:span 2; }
.pad.blocked .k:not(.kt){ opacity:.38; }

/* ---------- chips ---------- */
.chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.chips:empty{ display:none; }
.chips.scroller{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; margin:0 -2px 8px; }
.chips.scroller::-webkit-scrollbar{ display:none; }
.chip{ display:inline-flex; align-items:center; gap:6px; flex:none; min-height:38px; padding:0 13px; border-radius:99px; background:var(--card); border:1px solid var(--line2); font-weight:700; font-size:14px; white-space:nowrap; }
.chip small{ font-size:11px; color:var(--ink3); font-weight:700; }
.chip[aria-checked="true"],.chip[aria-pressed="true"]{ background:var(--ink); color:var(--card); border-color:var(--ink); }
.chip[aria-pressed="true"] small,.chip[aria-checked="true"] small{ color:inherit; opacity:.7; }

/* ---------- the scorecard ---------- */
.paper{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 14px; border:1px solid var(--line); }
.sc-head{ padding-bottom:10px; border-bottom:2px solid var(--ink); margin-bottom:6px; }
.sc-meta{ font-size:12.5px; color:var(--ink2); font-weight:600; }
.sc-team{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:6px; }
.sc-team span{ font-size:17px; font-weight:750; min-width:0; overflow-wrap:anywhere; }
.sc-team b{ font-size:19px; font-weight:850; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sc-team b small{ font-size:13px; font-weight:600; color:var(--ink2); }
.sc-team.won span::after{ content:" ✓"; color:var(--ac); }
.sc-so{ font-size:13px; color:var(--ink2); margin-top:4px; }
.sc-result{ margin-top:8px; font-weight:800; font-size:15px; color:var(--ac); }
.sc-toss{ font-size:12.5px; color:var(--ink2); margin-top:2px; }
.sc-inn{ margin-top:14px; }
.sc-inn h3{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:15px; font-weight:800; background:var(--acs); color:var(--ac2); padding:8px 10px; border-radius:10px; }
@media (prefers-color-scheme:dark){ .sc-inn h3{ color:var(--ac); } }
.sc-inn h3 span{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.sc-inn h3 small{ font-weight:600; }
.paper table{ width:100%; border-collapse:collapse; margin-top:6px; font-size:14px; font-variant-numeric:tabular-nums; }
.paper th{ font-size:11.5px; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:6px 4px; border-bottom:1px solid var(--line2); }
.paper td{ padding:7px 4px; border-bottom:1px solid var(--line); vertical-align:top; }
.paper td b{ font-weight:750; }
.paper td small{ display:block; font-size:12px; color:var(--ink2); line-height:1.3; }
.paper tr.no td small{ color:var(--ac); font-weight:600; }
.paper .r{ text-align:right; white-space:nowrap; }
.paper th:first-child,.paper td:first-child{ width:100%; padding-left:0; }
.paper tfoot td{ border-bottom:none; }
.paper tfoot small{ display:inline; margin-left:4px; }
.paper tr.tot td{ border-top:1.5px solid var(--ink); font-weight:800; padding-top:8px; }
.paper i.on{ font-style:normal; color:var(--ac); }
.sc-note{ font-size:13px; color:var(--ink2); margin-top:6px; line-height:1.5; }
.sc-note b{ color:var(--ink); }
.sc-bowl{ margin-top:12px !important; }
.sc-foot{ text-align:center; font-size:11.5px; color:var(--ink3); margin-top:16px; }
.actions{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; }
.act{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px 9px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--ink); text-decoration:none; }
.act svg{ width:22px; height:22px; }
.act:hover{ border-color:var(--ink3); }
.act.wa{ background:#1fa855; border-color:#1fa855; color:#fff; }
.act.wa:hover{ background:#178a45; }

.overlist{ list-style:none; }
.overlist li{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.overlist li:last-child{ border-bottom:none; }
.overlist li.olhead{ font-size:12px; font-weight:800; color:var(--ink2); text-transform:uppercase; letter-spacing:.05em; padding-top:14px; }
.overlist li.olhead:first-child{ padding-top:4px; }
.olno{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--bg); font-weight:800; font-size:13px; color:var(--ink2); }
.olbody{ flex:1; min-width:0; }
.olwho{ display:block; font-size:13px; font-weight:700; color:var(--ink2); margin-bottom:4px; }
.olbody .ball{ min-width:26px; height:26px; font-size:12px; padding:0 6px; }
.olsum{ text-align:right; font-variant-numeric:tabular-nums; }
.olsum b{ display:block; font-size:16px; }
.olsum small{ font-size:12px; color:var(--ink2); }

/* ---------- grouped lists ---------- */
.group{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-top:12px; }
.group:first-child{ margin-top:0; }
.group-head{ display:flex; justify-content:space-between; gap:10px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); margin-bottom:6px; }
.group-head span:last-child{ letter-spacing:0; text-transform:none; font-weight:700; }
.rows{ list-style:none; }
.rows li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.rows li:last-child{ border-bottom:none; }
.rows li .rt{ flex:1; min-width:0; }
.rows li .rt b{ display:block; font-size:15px; font-weight:700; }
.rows li .rt span{ display:block; font-size:12.5px; color:var(--ink2); }
.rows .none{ color:var(--ink2); font-size:14px; padding:8px 0; display:block; border:none; }
.rows.picks li,.rows.menu li{ padding:0; border-bottom:none; }
.pick{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; padding:11px 12px; border-radius:12px; border:1.5px solid transparent; margin:2px 0; background:var(--bg); }
.pick:hover{ border-color:var(--line2); }
.pick[aria-pressed="true"]{ border-color:var(--ac); background:var(--acs); }
.pick .chev{ width:18px; height:18px; color:var(--ink3); flex:none; }
.pick.warnpick .rt span{ color:var(--ext); }
.pick.dangerpick .rt b{ color:var(--wk); }
.addrow{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border-radius:var(--r); border:1.5px dashed var(--line2); color:var(--ink2); font-weight:700; margin-bottom:12px; }
.addrow:hover{ border-color:var(--ac); color:var(--ac); }
.addrow svg{ width:20px; height:20px; }

.mrow{ padding:0 !important; }
.mrow.open .mopen{ border-left:3px solid var(--ac); padding-left:9px; }
.mopen{ flex:1; min-width:0; text-align:left; padding:11px 0; display:flex; flex-direction:column; gap:3px; }
.mopen:hover .mteams{ color:var(--ac); }
.mdate{ font-size:12px; color:var(--ink3); font-weight:700; }
.mdate em{ font-style:normal; color:var(--ac); }
.mteams{ display:flex; flex-direction:column; gap:1px; }
.mtm{ display:flex; justify-content:space-between; gap:10px; font-size:15px; font-weight:650; }
.mtm b{ font-variant-numeric:tabular-nums; }
.mtm.won{ font-weight:800; }
.mres{ font-size:12.5px; color:var(--ac); font-weight:700; }
.mres.going{ color:var(--ext); }
.mmore{ align-self:center; color:var(--ink2); }

table.rec{ width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums; margin-top:10px; }
table.rec th{ font-size:11px; font-weight:800; color:var(--ink3); text-transform:uppercase; text-align:left; padding:6px 4px; border-bottom:1px solid var(--line2); white-space:nowrap; }
table.rec td{ padding:7px 4px; border-bottom:1px solid var(--line); }
table.rec .r{ text-align:right; }
table.rec td:first-child{ max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mh-scroll{ overflow-x:auto; }

.whatsnew{ margin-top:10px; font-size:13.5px; }
.whatsnew summary{ cursor:pointer; font-weight:700; color:var(--ac); }
.rel{ margin-top:8px; }
.rel b{ font-size:14px; } .rel span{ color:var(--ink2); margin-left:8px; font-size:12.5px; }
.rel ul{ margin:4px 0 0 18px; color:var(--ink2); }

/* ---------- fields ---------- */
.field{ margin-top:12px; min-width:0; }
.field label,.flabel{ display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-bottom:5px; }
input:not([type="checkbox"]):not([type="file"]),select,textarea{ width:100%; min-height:46px; padding:10px 12px; border-radius:12px; border:1px solid var(--line2); background:var(--card); font-size:16px; }
textarea{ resize:vertical; line-height:1.4; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--ac); box-shadow:0 0 0 3px var(--acs); }
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 10px; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line2); border-radius:12px; background:var(--card); overflow:hidden; }
.stepper:focus-within{ border-color:var(--ac); box-shadow:0 0 0 3px var(--acs); }
.stepper input{ border:none !important; box-shadow:none !important; text-align:center; font-weight:750; padding:10px 0 !important; min-width:0; }
.stepper .stp{ width:46px; height:46px; font-size:22px; color:var(--ink); flex:none; }
.stepper .stp:hover{ background:var(--bg); }
.stepper.big input{ font-size:24px; }
.stepper.big .stp{ width:58px; height:58px; font-size:28px; }
.seg{ display:flex; gap:3px; background:var(--bg); border-radius:12px; padding:3px; }
.seg button{ flex:1; min-height:42px; border-radius:10px; font-weight:700; font-size:13.5px; color:var(--ink2); padding:4px 6px; line-height:1.2; }
.seg button small{ font-size:11px; font-weight:600; opacity:.8; }
.seg button[aria-checked="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.switch{ display:flex; align-items:center; gap:12px; margin-top:14px; cursor:pointer; font-size:14.5px; font-weight:600; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch .sw{ position:relative; width:50px; height:30px; border-radius:99px; background:var(--line2); flex:none; transition:background .2s; }
.switch .sw::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.switch input:checked + .sw{ background:var(--ac); }
.switch input:checked + .sw::after{ transform:translateX(20px); }
.switch input:focus-visible + .sw{ outline:2.5px solid var(--ac); outline-offset:2px; }
.switch small{ display:block; font-size:12.5px; color:var(--ink2); font-weight:500; }
details.more{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
details.more summary{ cursor:pointer; font-weight:700; color:var(--ac); font-size:14px; padding:4px 0; }
fieldset.names{ border:none; margin-top:10px; }
fieldset.names legend{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }

/* ---------- sheets ---------- */
dialog.sheet{ position:fixed; inset:auto 0 0 0; margin:0 auto; width:100%; max-width:560px; max-height:92vh; max-height:92dvh; border:none; border-radius:22px 22px 0 0; background:var(--card); color:var(--ink); padding:0; box-shadow:0 -10px 40px rgba(0,0,0,.25); display:none; flex-direction:column; }
dialog.sheet[open]{ display:flex; animation:rise .24s cubic-bezier(.2,.8,.2,1); }
dialog.sheet::backdrop{ background:rgba(8,14,10,.5); animation:fade .2s; }
@keyframes rise{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
@keyframes fade{ from{ opacity:0; } }
.sheet-head{ display:flex; align-items:flex-start; gap:10px; padding:16px 16px 6px; position:relative; }
.sheet-head::before{ content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--line2); }
.sheet-head > div{ flex:1; min-width:0; padding-top:6px; }
.sheet-head b{ display:block; font-size:18px; font-weight:800; }
.sheet-head span{ display:block; font-size:13px; color:var(--ink2); }
.sheet-body{ padding:0 16px 14px; overflow-y:auto; overscroll-behavior:contain; }
.sheet-foot{ display:flex; gap:8px; align-items:center; padding:10px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); flex-wrap:wrap; }
.sheet-foot .grow{ flex:1; }
@media (min-width:700px){
  dialog.sheet{ inset:0; margin:auto; border-radius:22px; max-height:86vh; }
  dialog.sheet[open]{ animation:pop .2s ease-out; }
  @keyframes pop{ from{ transform:scale(.96); opacity:.5; } }
  .sheet-head::before{ display:none; }
}
.xgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.xk{ min-height:66px; border-radius:16px; background:var(--exts); color:var(--ext); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1.5px solid transparent; }
.xk b{ font-size:21px; font-weight:850; }
.xk small{ font-size:11.5px; font-weight:700; opacity:.85; }
.xk:hover{ border-color:var(--ext); }
#xDlg .seg{ margin-top:8px; }
#xNote{ margin-top:12px; }
.kout-btn{ width:100%; margin-top:12px; color:var(--wk); border-color:var(--wk); background:var(--wks); }
.howgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px; }
.howgrid button{ min-height:50px; border-radius:13px; background:var(--bg); font-weight:750; font-size:14.5px; border:2px solid transparent; padding:4px 8px; }
.howgrid button[aria-checked="true"]{ border-color:var(--wk); background:var(--wks); color:var(--wk); }
.howgrid button:disabled{ opacity:.35; text-decoration:line-through; }
.howgrid button[data-how="other"]{ grid-column:span 2; font-size:13.5px; }
.isteps{ background:var(--bg); border-radius:14px; padding:12px 14px; margin-top:10px; }
.isteps b{ font-size:14.5px; }
.isteps ol{ margin:6px 0 0 20px; font-size:14px; color:var(--ink2); }
.isteps.mine{ border:1.5px solid var(--ac); background:var(--acs); }

/* ---------- the tab bar ---------- */
.tabbar{ position:sticky; bottom:0; z-index:5; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); border-top:1px solid var(--line); border-radius:0 0 24px 24px; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); }
.tabbar button{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0 4px; border-radius:12px; font-size:11.5px; font-weight:700; color:var(--ink3); }
.tabbar button svg{ width:24px; height:24px; stroke-width:1.9; }
.tabbar button[aria-selected="true"]{ color:var(--ac); }
.tabbar button[aria-selected="true"] svg{ stroke-width:2.3; }

/* ---------- toast ---------- */
.toast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); top:auto; right:auto; margin:0; transform:translate(-50%,12px); background:var(--ink); color:var(--card); border:none; font-size:14px; font-weight:600; padding:12px 16px; border-radius:14px; box-shadow:0 12px 30px -8px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; display:flex; gap:14px; align-items:center; max-width:calc(100vw - 32px); width:max-content; z-index:50; inset:auto auto calc(84px + env(safe-area-inset-bottom)) 50%; }
.toast.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast button{ color:#7ddfa8; font-weight:800; font-size:14px; white-space:nowrap; }
@media (prefers-color-scheme:dark){ .toast button{ color:var(--ac2); filter:brightness(.6); } }

/* ---------- guide and questions ---------- */
.mh-guide,.faqbox{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-top:16px; }
.mh-guide h2,.faqbox h2{ font-size:19px; font-weight:800; margin:18px 0 6px; letter-spacing:-.01em; }
.mh-guide h2:first-child,.faqbox h2:first-child{ margin-top:0; }
.mh-guide p,.mh-guide li{ font-size:15px; color:var(--ink); }
.mh-guide p{ margin:8px 0; }
.mh-guide ul,.mh-guide ol{ margin:8px 0 8px 22px; }
.mh-guide li{ margin:4px 0; }
.mh-guide code{ background:var(--bg); padding:1px 5px; border-radius:5px; font-size:.92em; }
.mh-guide .mh-scroll{ overflow-x:auto; margin:10px 0; }
.mh-guide table{ border-collapse:collapse; width:100%; font-size:14px; }
.mh-guide th,.mh-guide td{ border:1px solid var(--line2); padding:7px 9px; text-align:left; vertical-align:top; }
.mh-guide th{ background:var(--bg); }
.mh-guide td.r,.mh-guide th.r{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
details.faq{ border-top:1px solid var(--line); padding:11px 0; }
details.faq summary{ cursor:pointer; font-weight:700; font-size:15px; }
details.faq p{ color:var(--ink2); font-size:14.5px; margin-top:6px; }
.pages{ margin-top:14px; font-size:14px; color:var(--ink2); }
.pages a{ font-weight:700; margin-right:10px; }

/* ---------- as an installed app ---------- */
body.is-app header.site, body.is-app .intro, body.is-app .installcard, body.is-app .mh-guide, body.is-app .faqbox, body.is-app .mh-related, body.is-app footer.site{ display:none; }
html.pre-app header.site, html.pre-app .intro, html.pre-app .installcard, html.pre-app footer.site{ display:none; }
body.is-app.show-guide .mh-guide, body.is-app.show-guide .faqbox{ display:block; }
body.is-app{ background:var(--bg2); }
body.is-app main.page{ max-width:640px; padding:0; }
body.is-app .app{ border:none; border-radius:0; box-shadow:none; min-height:100vh; min-height:100dvh; }
body.is-app .appbar{ position:sticky; top:0; z-index:5; border-radius:0; padding-top:calc(12px + env(safe-area-inset-top)); background:color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); }
body.is-app .tabbar{ position:fixed; left:0; right:0; bottom:0; max-width:640px; margin:0 auto; border-radius:0; }
body.is-app .pane{ padding-bottom:calc(var(--tabh) + 28px + env(safe-area-inset-bottom)); }
body.is-app.show-guide .mh-guide{ margin:12px; }
body.is-app.show-guide .faqbox{ margin:12px 12px calc(var(--tabh) + 30px); }
@media (min-width:700px){
  body.is-app{ background:var(--bg); }
  body.is-app .app{ border-left:1px solid var(--line); border-right:1px solid var(--line); }
}
@media (max-width:420px){
  main.page{ padding:12px 8px 24px; }
  .app{ border-radius:20px; }
  .appbar{ border-radius:20px 20px 0 0; }
  .tabbar{ border-radius:0 0 20px 20px; }
  .pane{ padding:10px 8px 16px; }
  .bd-score{ font-size:46px; }
  .k{ min-height:56px; font-size:22px; border-radius:14px; }
  .pad{ gap:6px; }
  .actions{ gap:6px; }
  h1.title{ font-size:23px; }
  .paper{ padding:14px 10px; }
  .paper table{ font-size:13px; }
}

/* ---------- the shared card page ---------- */
main.view .vactions{ margin:4px 0 14px; }
.vload{ text-align:center; color:var(--ink2); padding:40px 0; }
.vfoot{ font-size:13px; color:var(--ink2); text-align:center; margin-top:16px; }
.vtoast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--card); padding:12px 16px; border-radius:14px; font-weight:600; font-size:14px; z-index:50; max-width:calc(100vw - 32px); }

/* ---------- print: only the card ---------- */
#printArea{ display:none; }
@media print{
  @page{ margin:12mm; }
  body > *:not(#printArea){ display:none !important; }
  body{ background:#fff; color:#000; display:block; }
  #printArea{ display:block !important; max-width:180mm; margin:0 auto; }
  .paper{ box-shadow:none !important; border:none !important; background:#fff !important; color:#000 !important; padding:0 !important; }
  .paper .sc-inn h3{ background:#eee !important; color:#000 !important; }
  .paper .sc-result,.paper tr.no td small,.paper i.on,.sc-team.won span::after{ color:#000 !important; }
  .paper td small,.sc-meta,.sc-toss,.sc-note,.sc-so,.paper th{ color:#333 !important; }
  .paper th,.paper td{ border-color:#999 !important; }
  .sc-inn{ break-inside:avoid-page; }
}