:root{
  --red:#C8232C; --red-dk:#9E1B22; --green:#1B6B3F; --green-dk:#134E2E; --gold:#E8A824;
  --paper:#FFFFFF; --cream:#FFF8EE; --ink:#2B2522; --muted:#6F655D; --line:#EADFD2;
  --f-title:"Lora", Georgia, serif; --f-ui:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0; font-family:var(--f-ui); color:var(--ink); background:var(--green);
  background-image:radial-gradient(circle at 15% 20%, rgba(255,255,255,.07) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.06) 0 2px, transparent 3px), radial-gradient(circle at 40% 85%, rgba(255,255,255,.05) 0 1.5px, transparent 2.5px);
  background-size:160px 160px, 220px 220px, 120px 120px; -webkit-font-smoothing:antialiased}
.stripe{height:14px; background:repeating-linear-gradient(135deg, var(--red) 0 14px, #fff 14px 28px)}
.app{max-width:1100px; margin:0 auto; grid-template-columns:minmax(0,1fr); padding:14px max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display:grid; gap:14px}
header{display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; color:#fff}
.logo{width:44px; height:44px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none; box-shadow:0 0 0 4px var(--red); text-decoration:none}
.logo img{width:30px; height:30px}
.brand h1{margin:0; font:700 clamp(20px,2.6vw,28px)/1.1 var(--f-title)}
.brand p{margin:2px 0 0; font-size:12.5px; opacity:.85}
.brand p a{color:#fff}
.spacer{flex:1}
.tools{display:flex; gap:8px; flex-wrap:wrap}
.seg{display:inline-flex; background:rgba(255,255,255,.12); border-radius:999px; padding:4px}
.seg button{border:0; background:transparent; color:#fff; font:600 14px var(--f-ui); padding:8px 16px; border-radius:999px; cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff; color:var(--green)}
.tool{border:0; background:rgba(255,255,255,.12); color:#fff; font:500 13.5px var(--f-ui); padding:9px 14px; border-radius:999px; cursor:pointer; display:inline-flex; gap:7px; align-items:center; text-decoration:none}
.tool:hover{background:rgba(255,255,255,.2)}
.tool[aria-pressed="true"]{background:var(--gold); color:var(--ink)}
button:focus-visible, a:focus-visible, input:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.panel{background:var(--paper); border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.18); overflow:hidden}
.ph{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line)}
.ph h2{margin:0; font:700 18px var(--f-title); color:var(--green)}
.ph .count{margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.pb{padding:18px}
.big{width:100%; border:0; background:var(--red); color:#fff; font:700 clamp(19px,2.4vw,24px) var(--f-ui); padding:16px; border-radius:16px; cursor:pointer; box-shadow:0 6px 0 var(--red-dk); transition:transform .08s}
.big:active{transform:translateY(4px); box-shadow:0 2px 0 var(--red-dk)}
.big:disabled{background:#B9AFA6; box-shadow:0 6px 0 #9C928A; cursor:default}
.big.green{background:var(--green); box-shadow:0 6px 0 var(--green-dk)}
.big.green:active{box-shadow:0 2px 0 var(--green-dk)}
.btn{border:0; background:var(--green); color:#fff; font:600 15px var(--f-ui); padding:10px 18px; border-radius:10px; cursor:pointer}
.btn.red{background:var(--red)}
.ghost{border:2px solid var(--line); background:#fff; color:var(--ink); font:600 15px var(--f-ui); padding:9px 16px; border-radius:10px; cursor:pointer}
.ghost:hover{border-color:var(--green)}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.muted{color:var(--muted)}
.pop{animation:pop .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1}}
@media (prefers-reduced-motion:reduce){.pop{animation:none}}
.foot{color:#fff; opacity:.88; font-size:12.5px; text-align:center; line-height:1.6; margin:4px 0 0}
.foot a{color:#fff}
input[type=text], input[type=number]{font:600 16px var(--f-ui); padding:9px 12px; border:2px solid var(--line); border-radius:10px; min-width:0}
input[type=text]:focus, input[type=number]:focus{outline:none; border-color:var(--green)}

/* lock screen */
.lock{max-width:460px; width:100%; margin:6vh auto 0; text-align:center}
.lock input{width:100%}
.lock .pb{display:grid; gap:14px}
.lock h2{margin:0; font:700 24px var(--f-title); color:var(--green)}
.lock p{margin:0; line-height:1.55}
.lock form{display:flex; gap:8px}
.lock input{flex:1; text-transform:uppercase; letter-spacing:.12em; text-align:center; font-size:20px}
.lock .err{color:var(--red); font-weight:600; min-height:1.4em}
.lock .shop{font-size:13.5px}
.lock .shop a{color:var(--green); font-weight:600}

/* scoreboard */
.teams{display:grid; gap:8px}
.team{display:flex; align-items:center; gap:8px; background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:6px 8px 6px 12px}
.team .nm{flex:1 1 0; width:0; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:0; background:transparent; font-family:var(--f-ui); font-size:15px; padding:4px 0}
.team .sc{font:700 22px var(--f-ui); min-width:44px; text-align:center; font-variant-numeric:tabular-nums; color:var(--green)}
.team button{width:40px; height:40px; border-radius:10px; border:0; font:700 20px var(--f-ui); cursor:pointer; background:#fff; color:var(--ink); box-shadow:inset 0 0 0 2px var(--line)}
.team button.plus{background:var(--green); color:#fff; box-shadow:none}
.team button.x{width:30px; height:30px; font-size:15px; background:transparent; box-shadow:none; color:var(--muted)}
.team.lead{border-color:var(--gold); background:#FFF3D6}

/* sheet */
.sheet{position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; padding:16px; z-index:10}
.sheet .box{background:#fff; border-radius:18px; padding:22px; max-width:380px; width:100%; display:grid; gap:12px; text-align:center}
.sheet h3{margin:0; font:700 20px var(--f-title); color:var(--green)}
.sheet .row{justify-content:center}
[hidden]{display:none !important}