:root{--ink:#141210;--deep:#0D0C0A;--paper:#F5F1EA;--red:#D7261E;--gold:#C9A45C;--muted:#CFC7B8;--line:#F5F1EA1f;--card:#1E1A16}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Archivo',Arial,sans-serif;background:var(--ink);color:var(--paper);font-size:17px;line-height:1.45;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
.dis{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
.kick{font-family:'Archivo Black',Arial,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--ink);border-bottom:1px solid var(--line)}
.logo{display:flex;gap:6px;text-decoration:none;transform:rotate(-3deg)}
.logo span{font-family:'Anton',Impact,sans-serif;font-size:24px;line-height:1}
.logo span+span{color:var(--red)}
.who{font-family:'Archivo Black',Arial,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--gold);padding:8px 12px;max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.view{flex:1;padding:20px 16px calc(96px + env(safe-area-inset-bottom,0px));max-width:560px;width:100%;margin:0 auto}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--deep);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 8px;font-family:'Archivo Black',Arial,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tabs button.on{color:var(--gold)}
.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

h1.dis{font-size:clamp(40px,11vw,56px);margin:6px 0 10px}
h2.dis{font-size:28px;margin:22px 0 10px}
p.lede{color:var(--muted);margin-bottom:16px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-family:'Archivo Black',Arial,sans-serif;font-size:14px;letter-spacing:.12em;text-transform:uppercase;background:var(--red);color:#FFF8F0;padding:18px;box-shadow:4px 4px 0 var(--gold);margin:10px 0}
.btn.ghost{background:transparent;border:2px solid var(--gold);box-shadow:none;color:var(--paper)}
.btn.small{padding:12px;font-size:12px;margin:6px 0}
.btn:disabled{opacity:.45}
.btn:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.card{background:var(--card);border:1px solid var(--line);padding:16px;margin:12px 0}
label{display:block;font-family:'Archivo Black',Arial,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:12px 0 6px;color:var(--gold)}
input[type=text],input[type=email]{width:100%;font:inherit;font-size:18px;padding:14px;border:2px solid var(--gold);background:#0D0C0A;color:var(--paper);border-radius:0}
.seg{display:flex;border:2px solid var(--gold);margin:6px 0}
.seg button{flex:1;padding:12px;font-family:'Archivo Black',Arial,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.seg button.on{background:var(--gold);color:var(--ink)}
.players{display:flex;flex-direction:column;gap:8px}
.players .row{display:flex;gap:8px;align-items:center}
.players .row input{flex:1}
.players .row button{width:44px;height:44px;border:2px solid var(--line);font-size:22px;color:var(--muted)}

/* play */
.shooter{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:8px}
.shooter .name{font-family:'Anton',Impact,sans-serif;font-size:34px;line-height:1;text-transform:uppercase}
.shooter .team{color:var(--muted);font-size:14px}
.shooter .total{font-family:'Anton',Impact,sans-serif;font-size:44px;line-height:1;color:var(--gold)}
.throws{display:flex;gap:5px;margin:10px 0 16px}
.throws span{flex:1;height:8px;background:#2a2521}
.throws span.done{background:var(--gold)}
.throws span.now{background:var(--red)}
.pad{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pad button{padding:18px 10px;border:2px solid var(--gold);display:flex;flex-direction:column;align-items:center;gap:2px;min-height:96px;justify-content:center}
.pad button .pts{font-family:'Anton',Impact,sans-serif;font-size:40px;line-height:1}
.pad button .lbl{font-family:'Archivo Black',Arial,sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pad button.swish{background:var(--gold);color:var(--ink);grid-column:span 2;min-height:84px}
.pad button.swish .lbl{color:#4a3a12}
.pad button.fifty{background:var(--red);color:#FFF8F0;border-color:var(--red);grid-column:span 2;min-height:84px}
.pad button.fifty .lbl{color:#FFE3DC}
.pad button.miss{border-color:var(--line);color:var(--muted);grid-column:span 2;min-height:64px}
.pad button:active{transform:translate(2px,2px)}
.tools{display:flex;gap:10px;margin-top:12px}
.tools button{flex:1;padding:12px;border:2px solid var(--line);font-family:'Archivo Black',Arial,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.log{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.log span{font-family:'Anton',Impact,sans-serif;font-size:16px;padding:4px 9px;background:#2a2521}
.log span.h{background:var(--gold);color:var(--ink)}
.log span.f{background:var(--red)}
.standings{margin-top:18px}
.standings .r{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.standings .r b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:20px;color:var(--gold)}

/* result */
.big{text-align:center;padding:24px 0 8px}
.big .n{font-family:'Anton',Impact,sans-serif;font-size:96px;line-height:1;color:var(--gold)}
.big .w{font-family:'Anton',Impact,sans-serif;font-size:30px;text-transform:uppercase}
.tag{display:inline-block;font-family:'Anton',Impact,sans-serif;background:var(--red);color:#fff;padding:4px 12px;transform:rotate(-3deg);margin:8px 0}
table{width:100%;border-collapse:collapse;font-size:15px}
td,th{padding:10px 6px;border-bottom:1px solid var(--line);text-align:left}
th{font-family:'Archivo Black',Arial,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
td.num{font-family:'Anton',Impact,sans-serif;font-size:22px;text-align:right}
td.rank{font-family:'Anton',Impact,sans-serif;font-size:22px;color:var(--gold);width:40px}
.me{background:#2a2521}

.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--gold);color:var(--ink);font-family:'Archivo Black',Arial,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 18px;opacity:0;pointer-events:none;transition:.25s;z-index:9;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:8;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet .in{background:var(--ink);border-top:3px solid var(--gold);width:100%;max-width:560px;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow:auto}
.fine{font-size:13px;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:30px 10px}
.hist .r{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.hist .r b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:24px;color:var(--gold)}
.merch{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.merch .item{background:var(--card);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:6px;text-decoration:none}
.merch .item img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;margin:-14px -14px 8px;width:calc(100% + 28px);max-width:none}
.merch .item b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:20px;text-transform:uppercase;line-height:1}
.merch .item span{color:var(--gold);font-family:'Archivo Black',Arial,sans-serif;font-size:12px}
.rulelist .r{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.rulelist .r b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:26px;color:var(--gold);min-width:64px;text-align:right}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}