/* Colors and layout adapted from the TAMA pickleball app, with a dark theme added. */
:root{--a:#127475;--a2:#015982;--navy:#081e32;--ink:#102536;--mut:#4d6373;--line:#d5e0e8;--bg:#f3f7fa;--card:#fff;--now:#e6f6f4;--ok:#137a48;--bad:#c4183c;--r:14px}
@media (prefers-color-scheme:dark){:root{--a:#4fd1c5;--a2:#7cc4f0;--navy:#050f1a;--ink:#e8eef3;--mut:#a3b4c2;--line:#2c3c4a;--bg:#0d1720;--card:#15222e;--now:#123332;--ok:#5bd69a;--bad:#ff7a93}}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
.wrap{max-width:640px;margin:0 auto;padding:0 12px 90px}
.top{background:linear-gradient(135deg,#081e32,#015982 55%,#127475);color:#fff;padding:14px 16px 10px}
.top h1{margin:0;font-size:1.25rem}.top .sub{opacity:.9;font-size:.85rem;margin-top:2px}.top a{color:#fff}
nav.tabs{display:flex;gap:6px;overflow-x:auto;position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 12px;border-bottom:1px solid var(--line)}
button,.btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 12px;cursor:pointer;text-decoration:none;display:inline-block;min-height:40px}
button.on,.btn.pri,button.pri{background:var(--a);border-color:var(--a);color:var(--bg);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:10px 0}
.card.now{background:var(--now);border-color:var(--a);border-width:2px}
.t{color:var(--mut);font-size:.85rem}.vs{font-weight:650;font-size:1.05rem}.win{color:var(--ok);font-weight:750}
.big{font-size:1.6rem;font-weight:800}.tag{display:inline-block;font-size:.75rem;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--mut)}
table{width:100%;border-collapse:collapse;font-size:.92rem}td,th{padding:7px 4px;border-bottom:1px solid var(--line);text-align:center}td:first-child,th:first-child,td:nth-child(2),th:nth-child(2){text-align:left}
tr.adv td{font-weight:650}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px;width:100%}
label{display:block;margin:10px 0 4px;font-weight:600}.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}
.score{display:flex;align-items:center;gap:6px;margin-top:8px}.score input{width:70px;text-align:center;font-size:1.2rem}.score button{min-width:44px}
.err{color:var(--bad)}.ok{color:var(--ok)}h2{font-size:1.15rem;margin:16px 0 6px}h3{font-size:1rem;margin:14px 0 4px;color:var(--a)}
.bar{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font-size:.85rem;z-index:6}
footer{text-align:center;color:var(--mut);margin:24px 0 8px;font-size:.9rem}footer a{color:var(--a)}
.offline{display:none;background:var(--bad);color:#fff;text-align:center;padding:6px;font-weight:700}.offline.show{display:block}
.mini{font-size:.8rem;padding:4px 8px;min-height:32px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
footer .kids{display:inline-block;margin-top:6px;font-weight:600}
.plan{border-top:1px solid var(--line);padding:10px 0}.plan:first-of-type{border-top:0}.plan .price{font-weight:700;margin-top:2px}.tag.soon{color:var(--bad);border-color:var(--bad)}
.partner{margin:28px 0 8px;padding-top:10px;border-top:1px dashed var(--line);text-align:center;font-size:.78rem}.partner a{color:var(--mut)}
.center{text-align:center}.side{display:flex;justify-content:space-between;font-size:1.1rem;font-weight:600;padding:3px 0}.side b{font-size:1.3rem}.side.win{color:var(--ok)}
.match.tap{cursor:pointer}.match.tap:active{transform:scale(.99)}
.card.now .side{font-size:1.35rem}.card.next{border-style:dashed}
.offs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.offs span{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:4px 10px}.offs small{color:var(--mut)}
.big-offs span{font-size:1.05rem;padding:8px 12px}
.note{color:var(--mut);font-size:.9rem;padding:6px 4px}
.share{width:100%;margin:14px 0;min-height:52px;font-size:1.05rem}
details{margin:12px 0}summary{cursor:pointer;font-weight:600;padding:8px 0}
label.inline{flex:0 0 auto;margin:0;font-weight:400}label.inline input{width:auto}
.champ{font-size:2rem;font-weight:800;margin:6px 0}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20;display:flex;align-items:flex-end}.sheet[hidden]{display:none}
.sheet-in{background:var(--card);width:100%;max-width:640px;margin:0 auto;border-radius:18px 18px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
.pad{margin:12px 0}.pname{font-weight:700;font-size:1.1rem;margin-bottom:6px}.pctl{display:flex;gap:8px}.pctl button{min-width:64px;min-height:60px;font-size:1.8rem;font-weight:700}.pctl input{flex:1;text-align:center;font-size:2rem;font-weight:800}
.quick{margin-top:6px}.savebtn{min-height:56px;font-size:1.15rem}.savebtn:disabled{opacity:.45}
.toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;z-index:30;font-weight:600}
#confetti{position:fixed;inset:0;pointer-events:none;display:none;z-index:40}
nav.tabs button{min-height:44px}
.sports{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sports button{min-height:64px;font-size:1.05rem;font-weight:600;display:flex;align-items:center;gap:8px;justify-content:center}.sports span{font-size:1.5rem}
.go{width:100%;min-height:56px;font-size:1.15rem}
details.plans{margin:22px 0 0;font-size:.85rem;color:var(--mut)}details.plans summary{font-weight:500;font-size:.85rem}
[hidden]{display:none!important}
.sharem{margin-top:8px}.toast .sharem{margin:0 0 0 8px;background:var(--a);color:var(--bg);border-color:var(--a)}
.card.flash{outline:3px solid var(--a);outline-offset:2px}
.toast{display:flex;align-items:center;white-space:nowrap}
details.danger{margin-top:28px;border-top:1px dashed var(--line);padding-top:6px;font-size:.9rem}.dangerbtn{color:var(--bad);border-color:var(--bad);width:100%}
.bigstart{width:100%;min-height:64px;font-size:1.3rem;margin:12px 0 4px}
.startm{width:100%;min-height:52px;font-size:1.05rem;margin:4px 0 8px}
.late{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-weight:600;text-align:center}.late.behind{border-color:#d97706;color:#b45309}
@media (prefers-color-scheme:dark){.late.behind{color:#fbbf24;border-color:#fbbf24}}