/* The shell, carried over from the Clyder Cup app: navy, gold, team blue and red, Oswald and Inter. */
:root{
  --bg:#0a1428;--panel:#101d36;--panel2:#16264a;--txt:#eef3fb;--mut:#8fa1bf;--dim:#5f7296;
  --gold:#e7ac1f;--gold2:#f6cf6b;--grn:#5ee29a;--red:#ff6b7d;--sco:#7fb0ff;--eng:#ff8f9e;
  --line:rgba(255,255,255,.08);--ink:#20140a;
  --disp:Oswald,"Arial Narrow",sans-serif;--body:Inter,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--body);-webkit-text-size-adjust:100%}
.app{min-height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit}
a{color:var(--gold2)}
.boot{flex:1;display:flex;align-items:center;justify-content:center}
.boot .mark,.mark{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a6fd6,#0c2c60 60%);border:3px solid var(--gold2);display:flex;align-items:center;justify-content:center;font:700 26px var(--disp);color:var(--gold2);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 8px rgba(246,207,107,.08)}
/* top bar */
.tb{display:flex;align-items:center;gap:10px;padding:14px max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px))}
.tb .lg{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a6fd6,#0c2c60 60%);border:2px solid var(--gold2);display:flex;align-items:center;justify-content:center;font:700 13px var(--disp);color:var(--gold2);flex:none}
.tb .lg.sq{border-radius:11px}
.tb h1{margin:0;font:700 22px/1.05 var(--disp);letter-spacing:.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb h1 small{display:block;font:500 12px var(--body);color:var(--mut);letter-spacing:0;margin-top:2px}
.tb .ic{margin-left:auto;display:flex;gap:14px;flex:none}
.tb .ic button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px}
.tb .ic button:focus-visible,.btn:focus-visible,.row:focus-visible,.tile:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.tb .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.back{display:flex;align-items:center;gap:4px;font:600 13px var(--body);color:var(--gold2);padding:0 14px 6px}
.back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* content */
.in{padding:0 max(14px,env(safe-area-inset-right,0px)) 24px max(14px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:10px;flex:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}
.card.gold{background:linear-gradient(135deg,rgba(246,207,107,.18),rgba(246,207,107,.06));border-color:rgba(246,207,107,.55)}
.card.split{background:linear-gradient(90deg,#0f1f44 0%,var(--panel) 50%,#3a0d18 100%)}
.ey{font:700 10px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);display:flex;justify-content:space-between;gap:8px}
.ey .m{color:var(--mut);font-weight:600;letter-spacing:.04em;text-transform:none}
p{margin:0}
.lead{font:500 13.5px/1.5 var(--body);color:var(--mut)}
.big{display:grid;gap:8px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:13px;text-align:center;font:700 14px var(--body);background:var(--gold);color:var(--ink)}
.btn.q{background:var(--panel);border:1px solid var(--line);color:var(--txt)}
.btn.g{background:var(--panel);border:1px solid rgba(246,207,107,.5);color:var(--gold2)}
.btn.w{background:#fff;color:#111}
.btn[disabled]{opacity:.5;cursor:default}
.btn svg{width:18px;height:18px}
.inp{width:100%;padding:12px 13px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);font:600 14px var(--body);color:var(--txt);outline:none}
.inp:focus{border-color:rgba(246,207,107,.6)}
.inp.code{text-align:center;font:700 24px var(--disp);letter-spacing:.3em;text-transform:uppercase}
.or{text-align:center;font:600 11px var(--body);color:var(--dim);display:flex;align-items:center;gap:10px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.fine{font:500 11px/1.45 var(--body);color:var(--dim);text-align:center}
.fine b{color:var(--mut)}
.msg{padding:10px 12px;border-radius:12px;font:600 12.5px/1.4 var(--body);background:rgba(94,226,154,.12);border:1px solid rgba(94,226,154,.35);color:var(--grn)}
.msg.err{background:rgba(255,107,125,.12);border-color:rgba(255,107,125,.4);color:var(--red)}
/* splash */
.splash{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 20px 16px;background:radial-gradient(ellipse at 50% 0%,rgba(246,207,107,.18),transparent 55%),radial-gradient(ellipse at 20% 100%,rgba(28,86,173,.35),transparent 50%),radial-gradient(ellipse at 85% 95%,rgba(125,12,30,.4),transparent 50%)}
.wordmark{margin:16px 0 0;font:700 44px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
.wordmark b{color:var(--gold2)}
.tag{margin:8px 0 0;font:500 14px/1.45 var(--body);color:var(--mut);max-width:280px}
.proof{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.proof span{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font:600 11px var(--body);color:var(--mut)}
/* rows and tiles */
.av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 10.5px var(--body);color:#fff;flex:none;background:linear-gradient(135deg,#3a4f7a,#1b2a4a)}
.av.sco{background:linear-gradient(135deg,#2a6fd6,#0c2c60)}.av.eng{background:linear-gradient(135deg,#e8405a,#7d0c1e)}
.av.big{width:40px;height:40px;font-size:13px;border:2px solid var(--gold2)}
.list{display:flex;flex-direction:column;gap:6px}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px 10px;border-radius:13px;background:var(--panel);border:1px solid var(--line);text-align:left;width:100%}
.row b{display:block;font:700 13.5px var(--body)}
.row small{display:block;font:500 11px var(--body);color:var(--mut);margin-top:1px}
.row .r{text-align:right;font:700 12px var(--body);color:var(--gold2);white-space:nowrap}
.row.me{border-color:rgba(246,207,107,.5);background:linear-gradient(135deg,rgba(246,207,107,.14),var(--panel))}
.crest{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#2a6fd6,#7d0c1e);display:flex;align-items:center;justify-content:center;font:700 18px var(--disp);color:var(--gold2);border:2px solid var(--gold2);flex:none}
.hero{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.hero b{display:block;font:700 18px var(--body)}.hero small{display:block;font:500 11.5px var(--body);color:var(--mut)}
.stat4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.stat4 div{background:var(--panel2);border-radius:12px;padding:8px 4px;text-align:center}
.stat4 b{display:block;font:700 20px/1 var(--disp);color:var(--gold2)}
.stat4 small{font:700 8.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;font:700 11px var(--body);color:var(--txt)}
.tile svg{width:20px;height:20px;fill:none;stroke:var(--gold2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile.soon{opacity:.45}
.pill{padding:4px 8px;border-radius:999px;font:700 9.5px var(--body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pill.ok{background:rgba(94,226,154,.16);color:var(--grn)}.pill.g{background:rgba(246,207,107,.16);color:var(--gold2)}.pill.m{background:var(--panel2);color:var(--mut)}
.share{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--panel2)}
.share b{font:700 18px var(--disp);letter-spacing:.12em;color:var(--gold2)}
.share small{display:block;font:500 11px var(--body);color:var(--mut)}
.share button{padding:8px 12px;border-radius:9px;background:var(--gold);color:var(--ink);font:700 11.5px var(--body)}
.fld{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.fld:first-child{border-top:0}
.fld b{display:block;font:700 14px var(--body)}
.fld small{display:block;font:500 11px var(--body);color:var(--mut)}
.seg{display:flex;gap:3px;padding:3px;border-radius:10px;background:var(--panel2)}
.seg button{padding:5px 9px;border-radius:8px;font:700 11px var(--body);color:var(--mut)}
.seg button.on{background:var(--gold);color:var(--ink)}
.empty{text-align:center;padding:18px 10px 14px}
.empty .ic{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;background:var(--panel2);display:flex;align-items:center;justify-content:center}
.empty .ic svg{width:26px;height:26px;fill:none;stroke:var(--gold2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty b{display:block;font:700 16px var(--body)}
.empty p{margin:5px 0 10px;font:500 12.5px/1.45 var(--body);color:var(--mut)}
/* bottom nav */
.nav{position:sticky;bottom:0;display:flex;justify-content:space-around;padding:10px 6px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg)}
.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10px var(--body);color:var(--mut);min-width:56px}
.nav button.on{color:var(--gold2)}
.nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){.view{animation:rise .22s ease}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* events and the draw */
.evt .d{text-align:center;background:var(--panel2);border-radius:9px;padding:5px 0;min-width:44px}
.evt .d b{display:block;font:700 18px/1 var(--disp);color:var(--gold2)}
.evt .d small{font:700 9px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.fmt{display:flex;flex-wrap:wrap;gap:6px}
.fmt button{padding:7px 10px;border-radius:999px;background:var(--panel2);font:700 11.5px var(--body);color:var(--mut)}
.fmt button.on{background:var(--gold);color:var(--ink)}
.lbl{display:grid;gap:4px;font:700 9px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.lbl .inp{padding:9px 10px;font-size:13px}
.draw .tt{font:700 15px var(--disp);color:var(--gold2);width:48px;flex:none}
.draw .tt b{display:block}
.draw .tt small{display:block;font:600 9px var(--body);color:var(--dim);letter-spacing:.06em}
.ps{display:flex;flex-wrap:wrap;gap:4px}
.ps span,.pch{padding:4px 8px;border-radius:8px;background:var(--panel2);font:700 11px var(--body);color:var(--txt);display:inline-flex;gap:5px;align-items:baseline}
.ps span.sco,.pch.sco{color:var(--sco)}.ps span.eng,.pch.eng{color:var(--eng)}
.ps span.meplayer{box-shadow:inset 0 0 0 1px var(--gold2)}
.pch small{font:600 9.5px var(--body);color:var(--dim)}
select.inp{appearance:none;-webkit-appearance:none}
.pch.sel{box-shadow:0 0 0 2px var(--gold2);background:rgba(246,207,107,.18);color:var(--gold2)}
.draw .tt .ud{display:flex;gap:4px;margin-top:4px}
.draw .tt .ud button{width:22px;height:20px;border-radius:6px;background:var(--panel2);color:var(--mut);font-size:10px}
.draw .tt .ud button[disabled]{opacity:.3}