/* FOOTKULTURE design system */
:root{
  --night:#0a1230; --night2:#101c4a; --night3:#1a2a66;
  --grass:#1faa4b; --grass2:#168a3c; --grass-lt:#3fd46b;
  --yellow:#ffd21f; --red:#ff3b3b; --orange:#ff8a1f; --blue:#2d7bff; --chalk:#f7f5ee;
  --lvl1:#22c55e; --lvl2:#ff9d1f; --lvl3:#ff3b4a;
  --ink:#0a1230; --muted:#9fb0e6;
  --radius:18px; --shadow:0 6px 0 rgba(0,0,0,.35);
  --f-display:'Anton','Impact','Arial Narrow',sans-serif;
  --f-body:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --lvl:var(--lvl1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--f-body);font-weight:600;font-size:22px;color:var(--chalk);
  background:radial-gradient(120% 90% at 50% 0%,var(--night3),var(--night) 70%);overflow-x:hidden;
  -webkit-tap-highlight-color:transparent}
body.fixed{overflow:hidden}
h1,h2,h3,.disp{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1}
button,input{font-family:inherit}
:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
#bg{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;
  background:linear-gradient(180deg,#0a1230 0%,#101c4a 38%,#16803a 38.2%,#1faa4b 100%)}
#ui{position:relative;z-index:2;min-height:100%}
.hidden{display:none!important}

/* buttons */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4em;cursor:pointer;border:0;
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.5rem;
  padding:.55em 1.2em;border-radius:14px;color:var(--ink);background:var(--yellow);
  box-shadow:0 6px 0 #b8940a;transition:transform .12s var(--ease-pop),box-shadow .12s,filter .15s}
.btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.07)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 #b8940a}
.btn.green{background:var(--grass-lt);box-shadow:0 6px 0 #167a37}
.btn.green:active{box-shadow:0 1px 0 #167a37}
.btn.red{background:var(--red);color:#fff;box-shadow:0 6px 0 #a11c1c}
.btn.ghost{background:rgba(255,255,255,.12);color:var(--chalk);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.btn.big{font-size:2.2rem;padding:.5em 1.4em}
.btn.sm{font-size:1rem;padding:.4em .9em;box-shadow:0 4px 0 #b8940a}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.pulse{animation:pulseBtn 1.1s infinite}
@keyframes pulseBtn{50%{transform:scale(1.06)}}

.card{background:rgba(10,18,48,.78);backdrop-filter:blur(6px);border:3px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.chalk{color:var(--chalk)}
.muted{color:var(--muted)}
.yellow{color:var(--yellow)}

input.field{width:100%;font-size:1.8rem;font-weight:700;padding:.5em .7em;border-radius:14px;border:4px solid var(--night3);
  background:var(--chalk);color:var(--ink);text-align:center;outline:none;font-family:var(--f-body)}
input.field:focus{border-color:var(--yellow)}
input.field.pin{font-family:var(--f-display);letter-spacing:.3em;font-size:2.4rem;font-weight:400}

/* screens & transitions */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:scrIn .45s var(--ease-pop) both}
.screen.out{animation:scrOut .22s ease-in both}
@keyframes scrIn{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@keyframes scrOut{to{opacity:0;transform:translateY(-30px) scale(.98)}}
.wipe{position:fixed;inset:0;z-index:50;pointer-events:none;background:var(--yellow);transform:translateX(-101%)}
.wipe.go{animation:wipe .55s cubic-bezier(.7,0,.3,1)}
@keyframes wipe{0%{transform:translateX(-101%) skewX(-12deg)}45%,55%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(101%) skewX(-12deg)}}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.pop{animation:pop .5s var(--ease-pop) both}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.bounce{animation:bounce .6s var(--ease-pop)}
@keyframes bounce{0%{transform:scale(1)}30%{transform:scale(1.25,.8)}60%{transform:scale(.9,1.15)}100%{transform:scale(1)}}

/* jersey */
.jersey{display:inline-block;width:1em;height:1em;vertical-align:middle;flex:none}

/* level pill */
.lvl{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);text-transform:uppercase;
  padding:.25em .8em;border-radius:99px;background:var(--lvl);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);letter-spacing:.05em}
.lvl[data-l="1"]{--lvl:var(--lvl1)}.lvl[data-l="2"]{--lvl:var(--lvl2)}.lvl[data-l="3"]{--lvl:var(--lvl3)}
.cat{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;color:var(--yellow)}

/* mute */
.mute{position:fixed;top:12px;right:12px;z-index:60;width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.3);
  background:rgba(10,18,48,.75);color:#fff;font-size:1.5rem;cursor:pointer}
.mute:hover{background:var(--night3)}

/* scoreboard rows */
.row{display:flex;align-items:center;gap:.6em;padding:.35em .8em;border-radius:12px;background:rgba(255,255,255,.08);
  font-size:1.4rem}
.row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sc{font-family:var(--f-display);color:var(--yellow);font-variant-numeric:tabular-nums}
.row .rk{font-family:var(--f-display);width:1.6em;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}