*{box-sizing:border-box}
:root{
  --bg:#0b0b0f;--card:#11131a;--muted:#d1d5db;--brand:#22c55e;--brand2:#60a5fa;
}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--bg); color:white; display:flex; align-items:center; justify-content:center;
}
.container{width:min(1100px,95vw); margin:auto; padding:16px}
.grid{display:grid; gap:16px}
.card{
  background:var(--card); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.title{align_items:center; font-size:clamp(20px,3vw,28px); margin:0 0 8px 0; font-weight:700; letter-spacing:.3px}
.score-wrap{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.team{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; border-radius:16px}
.team-a{border:2px solid var(--brand)}
.team-b{border:2px solid var(--brand2)}
.team-name{font-size:clamp(20px,4vw,36px); font-weight:700; text-align:center; margin:0 0 8px}
.score{font-size:clamp(60px,14vw,160px); font-weight:800; line-height:1; letter-spacing:2px}
.meta{display:flex; gap:12px; justify-content:center; align-items:center; opacity:.9}
.badge{padding:6px 10px; border-radius:999px; background:#1f2937; font-size:14px}
.serving{filter:drop-shadow(0 0 10px rgba(255,255,255,.45));}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
button,input,select{font-size:18px}
button{padding:12px 16px; border-radius:12px; border:1px solid #374151; background:#111827; color:white; cursor:pointer}
button:active{transform:scale(.98)}
button.primary{background:#16a34a; border-color:#166534}
button.warn{background:#991b1b; border-color:#7f1d1d}
input,select{padding:10px 12px; border-radius:10px; border:1px solid #374151; background:#0b1220; color:white}
.sep{height:1px; background:#1f2937; margin:12px 0}
.footer{opacity:.7; font-size:14px; text-align:center; margin-top:8px}
.fullscreen{position:fixed; top:16px; right:16px}