:root{
  --bg:#eef1f7; --panel:#ffffff; --panel2:#f2f5fa; --line:#dde3ee;
  --txt:#1b2438; --muted:#64708a; --faint:#9aa3b8;
  --accent:#16a34a; --accent-d:#11803b; --accent2:#b45309;
  --pick:#d8f5e4; --pick-h:#c6efd6; --picktx:#075f43; --pickb:#15a34a;
  --gold:#b9770c;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--txt);
  background:#2f9152 url('/pitch.svg') center center / cover no-repeat fixed;}
/* animated layers over the pitch: drifting grass shimmer + slow floodlight sweep */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 78px);
  animation:grassdrift 14s linear infinite}
body::after{content:"";position:fixed;top:-25%;left:0;width:45%;height:150%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
  filter:blur(10px);transform:translateX(-120%) rotate(3deg);animation:floodlight 11s ease-in-out infinite alternate}
@keyframes grassdrift{from{transform:translateX(0)}to{transform:translateX(78px)}}
@keyframes floodlight{from{transform:translateX(-120%) rotate(3deg)}to{transform:translateX(360%) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
header{padding:18px 22px;border-bottom:1px solid var(--line);border-top:3px solid var(--accent);background:var(--panel);}
h1{margin:0;font-size:20px;letter-spacing:.2px}
.sub{color:var(--muted);font-size:13px;margin-top:4px}
.tabs{display:flex;gap:6px;padding:12px 22px 0;flex-wrap:wrap}
.tab{padding:9px 16px;border:1px solid var(--line);border-bottom:none;border-radius:9px 9px 0 0;background:var(--panel2);color:var(--muted);cursor:pointer;font-size:14px;font-weight:600;text-decoration:none;display:inline-block}
.tab.active{background:var(--panel);color:var(--txt)}
.view{display:none;padding:18px 22px 60px}
.view.active{display:block}
.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
input[type=text],input[type=password]{background:var(--panel);border:1px solid var(--line);color:var(--txt);padding:10px 12px;border-radius:8px;font-size:14px;min-width:160px}
button.act{background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer}
button.act:hover{background:var(--accent-d)}
button.act:disabled{opacity:.4;cursor:not-allowed}
button.ghost{background:var(--panel);color:var(--txt);border:1px solid var(--line);padding:9px 14px;border-radius:8px;font-weight:600;cursor:pointer;font-size:13px}
button.ghost:hover{background:var(--panel2)}
.note{color:var(--muted);font-size:13px}
.pill{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--muted)}
.progress{font-weight:700;color:var(--txt)}
.scroll{overflow-x:auto;padding-bottom:12px}
.bracket{display:flex;gap:14px;min-width:1500px}
.col{display:flex;flex-direction:column;justify-content:space-around;gap:10px;min-width:164px;padding-top:18px}
.col.final-col{position:relative;justify-content:center;gap:18px;min-width:184px}
/* round label hugs the top of its column's first match */
.matchwrap{position:relative;width:100%}
.matchwrap>.rndlabel{position:absolute;left:0;right:0;bottom:100%;margin:0 0 4px}
.fillctl{position:absolute;top:0;left:50%;transform:translateX(-50%);width:330px;max-width:330px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 16px rgba(20,30,60,.18);padding:12px;display:flex;flex-direction:column;gap:7px;z-index:6}
.fillctl input{width:100%}
.fillctl .ctl-pills{display:flex;gap:8px;justify-content:center}
.fillctl .ctl-btns{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.fillctl .ctl-btns .ghost{flex:1;min-width:0;padding:9px 8px;text-align:center}
.fillctl .act{width:100%}
.fillctl .ctl-hint{font-size:11px;color:var(--muted);text-align:center;line-height:1.4}
.lb-link{display:block;width:100%;text-align:center;text-decoration:none;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:9px;font-weight:700;font-size:13px}
.lb-link:hover{background:#eef6ff;border-color:#cfe0f2}
#signinBox,#playBox{display:flex;flex-direction:column;gap:9px}
.ctl-title{font-weight:800;font-size:15px;text-align:center;margin-bottom:2px}
.ctl-user{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.ctl-user b{color:var(--txt)}
.ctl-signout{padding:5px 11px;font-size:12px}
.ctl-auto{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--panel2)}
.ctl-sublabel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);text-align:center;margin-bottom:5px}
.ctl-auto .ctl-btns{margin-bottom:5px}
.ctl-autohint{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.35}
.ctl-foot{display:flex;gap:6px}
.ctl-foot .ctl-reset{flex:1;padding:8px;font-size:12px}
.ctl-foot .lb-link{flex:1;width:auto;padding:8px;font-size:12px}
.rndlabel{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#fff;text-align:center;margin-bottom:2px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* standalone My-bracket / Actual-bracket switch under the control box */
.viewtoggle{display:flex;gap:4px;margin:12px auto 0;width:max-content;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:0 3px 12px rgba(10,30,15,.30)}
.vt-btn{border:none;background:transparent;color:var(--muted);font-weight:800;font-size:13px;padding:8px 18px;border-radius:999px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
.vt-btn:hover{color:var(--txt)}
.vt-btn.active{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(10,80,40,.35)}
.match{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.match.big{border-color:var(--gold)}
/* small per-match points tag (top-right); turns green when the pick is correct */
.ptag{position:absolute;top:4px;right:5px;z-index:3;font-size:10px;font-weight:800;line-height:15px;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.85);color:var(--muted);pointer-events:none}
.ptag.won{background:rgba(255,255,255,.95);color:var(--accent)}
.ptag.lost{background:rgba(255,255,255,.95);color:#dc2626}
/* team row: the flag fills the whole row as a background; name overlaid */
.slot{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line);min-height:52px;user-select:none;background-size:cover;background-position:center;overflow:hidden}
.slot:last-child{border-bottom:none}
.slot.hasflag::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(12,18,32,.66),rgba(12,18,32,.30) 55%,rgba(12,18,32,.10))}
.slot>*{position:relative;z-index:1}
.slot .nm{flex:1;min-width:0;font-size:12px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.75)}
.slot.empty{cursor:default;background:var(--panel2)}
.slot.empty .nm{color:var(--faint);font-style:italic;text-transform:none;font-weight:600;text-shadow:none}
.slot.hasflag:hover::before{background:linear-gradient(90deg,rgba(12,18,32,.54),rgba(12,18,32,.22) 55%,rgba(12,18,32,.05))}
.slot.picked{box-shadow:inset 0 0 0 3px var(--accent)}
.slot.picked::before{background:linear-gradient(90deg,rgba(6,68,38,.74),rgba(8,90,50,.36) 55%,rgba(8,90,50,.12))}
.slot.locked{cursor:not-allowed}
.slot .chk{color:#4ade80;font-weight:400;font-size:18px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.slot.correct{box-shadow:inset 0 0 0 3px var(--accent)}
.slot.wrong{opacity:.55}
.slot.wrong .nm{text-decoration:line-through}
.third{margin-top:10px}
.third .rndlabel{color:#ffdd80}
/* --- bracket landing page: scale entire bracket to fit the screen --- */
#fitwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8px}
#fitbox{position:relative}
#fitbox .bracket{position:absolute;top:0;left:0;transform-origin:top left}
.lbbtn{position:fixed;top:12px;right:14px;z-index:40;background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 3px 10px rgba(10,30,15,.28)}
.lbbtn:hover{background:var(--panel2)}
/* leaderboard page slim bar */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);box-shadow:0 2px 8px rgba(10,30,15,.18)}
.topbar-title{font-weight:800;font-size:16px}
.empty-state{color:var(--txt);padding:30px;text-align:center;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(10,30,15,.18)}
/* --- leaderboard: name + score, front and center --- */
.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,#e9f7ef,#e8f1ff);border:1px solid #cfe3d8;border-radius:14px;padding:18px 20px;margin-bottom:18px;max-width:560px}
.cta-title{font-size:17px;font-weight:800;color:var(--txt)}
.cta-sub{color:var(--muted);font-size:13px;margin-top:3px}
.lb{display:flex;flex-direction:column;gap:8px;max-width:560px}
.lb-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 16px;cursor:pointer;box-shadow:0 1px 2px rgba(20,30,60,.05);transition:transform .08s}
.lb-row:hover{transform:translateX(2px)}
.lb-row.me{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.lb-rank{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:var(--panel2);color:var(--muted)}
.lb-row.top1 .lb-rank{background:linear-gradient(135deg,#fbe089,#e3a008);color:#3a2600}
.lb-row.top2 .lb-rank{background:linear-gradient(135deg,#e7ebf2,#b4bccb);color:#27303f}
.lb-row.top3 .lb-rank{background:linear-gradient(135deg,#f0c79c,#c07e44);color:#3a1d07}
.lb-main{flex:1;min-width:0}
.lb-name{font-size:17px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.lb-sub{font-size:11px;color:var(--faint);margin-top:2px}
.lb-scorewrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.lb-score{font-size:25px;font-weight:800;color:var(--accent);display:flex;align-items:baseline;gap:3px;line-height:1}
.lb-score span{font-size:11px;color:var(--muted);font-weight:600}
.lb-denom{font-size:11px;color:var(--faint);font-weight:700;white-space:nowrap}
.lb-row.top1{padding:16px 18px}
.lb-row.top1 .lb-name{font-size:19px}
.lb-row.top1 .lb-score{font-size:28px}
.metag{font-size:10px;background:var(--accent);color:#fff;border-radius:6px;padding:1px 6px;margin-left:8px;font-weight:800}
.lb-go{color:var(--faint);font-size:22px;font-weight:700;line-height:1;margin-left:2px}
.lb-row:hover .lb-go{color:var(--txt)}
.lbfoot{display:flex;gap:10px;align-items:center;margin-top:18px;max-width:620px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:10px;padding:10px 14px;box-shadow:0 2px 10px rgba(10,30,15,.18)}
.viewer{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.viewer-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.viewer-head b{font-size:17px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:12px 20px;border-radius:10px;font-weight:700;opacity:0;transition:opacity .25s;pointer-events:none;z-index:50;box-shadow:0 6px 20px rgba(20,30,60,.18)}
.toast.show{opacity:1}
.toast.err{background:#e5484d;color:#fff}
.hostbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px;max-width:520px;box-shadow:0 1px 2px rgba(20,30,60,.05)}
.adminlink{color:var(--muted);font-size:12px;text-decoration:none}
.adminlink:hover{color:var(--txt)}
code{background:var(--panel2);padding:2px 6px;border-radius:5px;font-size:12px;color:var(--txt)}
/* score box sits to the side of each team row */
.slot .sc{width:32px;min-width:32px;margin-left:auto;text-align:center;padding:4px 2px;font-size:14px;font-weight:800;background:#fff;border:1px solid rgba(0,0,0,.15);color:var(--txt);border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.slot .sc::-webkit-outer-spin-button,.slot .sc::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.slot.picked .sc{border-color:var(--accent)}
.slot .sgoal{margin-left:auto;font-weight:800;color:#fff;font-size:14px;min-width:22px;text-align:center;background:rgba(0,0,0,.5);border-radius:6px;padding:2px 7px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.slot .sgoal.none{background:rgba(0,0,0,.32);color:#e6ebf4;font-weight:600}
.scorewarn{display:none;padding:4px 9px;font-size:10px;color:#b4231f;background:#fdeaea;border-top:1px solid var(--line);text-align:center;letter-spacing:.3px}
.match.bad .scorewarn{display:block}
.match.bad .slot .sc{border-color:#e5484d;color:#b4231f}
.scoreact{padding:4px 9px;font-size:11px;text-align:center;border-top:1px solid var(--line);background:var(--panel2);color:var(--muted)}
.scoreact.hit{color:#15803d;background:#dcfce7}
.scoreact.hit b{color:#15803d}