/* Total Degeneracy – WC2026 Pick'Em Pool (server-backed) */ const { useState, useEffect, useRef } = React; /* ═══════════════════════════════════════════════ PLAYER THEMES ═══════════════════════════════════════════════ */ const PLAYER_THEMES = { Martin: { emoji:"🍀", label:"The Leprechaun", bg:"linear-gradient(160deg,#1a4a1a,#0d2e0d)", border:"#3daa3d", accent:"#7fe87f", shadow:"rgba(61,170,61,0.5)", textColor:"#b8ffb8", tagline:"Top o' the mornin'", pattern:"radial-gradient(circle at 20% 80%,rgba(61,170,61,0.15) 0%,transparent 50%)" }, Gaston: { emoji:"🎣", label:"Cuban Fisherman", bg:"linear-gradient(160deg,#0a2a4a,#1a1a00)", border:"#c8a020", accent:"#f0c850", shadow:"rgba(200,160,32,0.5)", textColor:"#ffd87a", tagline:"El pescador de La Habana", pattern:"radial-gradient(circle at 80% 20%,rgba(200,160,32,0.12) 0%,transparent 50%)" }, Chuck: { emoji:"☭", label:"1950s Communist", bg:"linear-gradient(160deg,#5a0000,#2a0000)", border:"#ff3030", accent:"#ffcc00", shadow:"rgba(255,48,48,0.5)", textColor:"#ffcc00", tagline:"For the proletariat!", pattern:"radial-gradient(circle at 50% 50%,rgba(255,48,48,0.1) 0%,transparent 60%)" }, Jim: { emoji:"🦌", label:"Upstate NY", bg:"linear-gradient(160deg,#1a2a3a,#2a1a0a)", border:"#a06020", accent:"#e88030", shadow:"rgba(160,96,32,0.5)", textColor:"#f0b070", tagline:"Finger Lakes represent", pattern:"radial-gradient(circle at 30% 70%,rgba(160,96,32,0.15) 0%,transparent 50%)" }, Josh: { emoji:"👑", label:"Biggie Smalls", bg:"linear-gradient(160deg,#1a0a2a,#0a0a1a)", border:"#aa60ff", accent:"#cc88ff", shadow:"rgba(170,96,255,0.5)", textColor:"#ddaaff", tagline:"It was all a dream", pattern:"radial-gradient(circle at 60% 30%,rgba(170,96,255,0.15) 0%,transparent 50%)" }, Richard: { emoji:"🐊", label:"Crocodile Dundee", bg:"linear-gradient(160deg,#2a1a00,#1a2a0a)", border:"#8aaa20", accent:"#c8e040", shadow:"rgba(138,170,32,0.5)", textColor:"#d8f060", tagline:"That's not a knife…", pattern:"radial-gradient(circle at 70% 60%,rgba(138,170,32,0.15) 0%,transparent 50%)" }, }; /* ═══════════════════════════════════════════════ CONSTANTS ═══════════════════════════════════════════════ */ const PLAYERS = ["Josh","Martin","Gaston","Jim","Chuck","Richard"]; const TOURNAMENT_START = new Date("2026-06-11T16:00:00-04:00"); const SCORING = { group: {result:3}, r32:{winner:3,method:2}, r16:{winner:5,method:3}, qf:{winner:7,method:4}, sf:{winner:10,method:5}, final:{winner:13,method:8}, golden:10, }; const ROUNDS = [ {id:"group",label:"Group Stage"},{id:"r32",label:"Round of 32"}, {id:"r16",label:"Round of 16"},{id:"qf",label:"Quarterfinals"}, {id:"sf",label:"Semifinals"},{id:"final",label:"Final"}, ]; /* ═══════════════════════════════════════════════ SCHEDULE ═══════════════════════════════════════════════ */ const GROUP_GAMES = [ {id:"g1", home:"Mexico", away:"South Africa", group:"A",kickoff:"2026-06-11T15:00:00-04:00"}, {id:"g2", home:"South Korea", away:"Czechia", group:"A",kickoff:"2026-06-11T22:00:00-04:00"}, {id:"g3", home:"Czechia", away:"South Africa", group:"A",kickoff:"2026-06-18T12:00:00-04:00"}, {id:"g4", home:"Mexico", away:"South Korea", group:"A",kickoff:"2026-06-18T15:00:00-04:00"}, {id:"g5", home:"Mexico", away:"Czechia", group:"A",kickoff:"2026-06-22T16:00:00-04:00"}, {id:"g6", home:"South Africa",away:"South Korea", group:"A",kickoff:"2026-06-22T16:00:00-04:00"}, {id:"g7", home:"Canada", away:"Bosnia-Herz.", group:"B",kickoff:"2026-06-12T15:00:00-04:00"}, {id:"g8", home:"Qatar", away:"Switzerland", group:"B",kickoff:"2026-06-12T15:00:00-04:00"}, {id:"g9", home:"Switzerland", away:"Bosnia-Herz.", group:"B",kickoff:"2026-06-19T12:00:00-04:00"}, {id:"g10",home:"Canada", away:"Qatar", group:"B",kickoff:"2026-06-19T18:00:00-04:00"}, {id:"g11",home:"Canada", away:"Switzerland", group:"B",kickoff:"2026-06-23T16:00:00-04:00"}, {id:"g12",home:"Bosnia-Herz.",away:"Qatar", group:"B",kickoff:"2026-06-23T16:00:00-04:00"}, {id:"g13",home:"Brazil", away:"Morocco", group:"C",kickoff:"2026-06-13T15:00:00-04:00"}, {id:"g14",home:"Haiti", away:"Scotland", group:"C",kickoff:"2026-06-13T21:00:00-04:00"}, {id:"g15",home:"Brazil", away:"Haiti", group:"C",kickoff:"2026-06-20T12:00:00-04:00"}, {id:"g16",home:"Scotland", away:"Morocco", group:"C",kickoff:"2026-06-20T15:00:00-04:00"}, {id:"g17",home:"Brazil", away:"Scotland", group:"C",kickoff:"2026-06-24T20:00:00-04:00"}, {id:"g18",home:"Morocco", away:"Haiti", group:"C",kickoff:"2026-06-24T20:00:00-04:00"}, {id:"g19",home:"USA", away:"Paraguay", group:"D",kickoff:"2026-06-12T21:00:00-04:00"}, {id:"g20",home:"Australia", away:"Turkey", group:"D",kickoff:"2026-06-13T18:00:00-04:00"}, {id:"g21",home:"Turkey", away:"Paraguay", group:"D",kickoff:"2026-06-19T12:00:00-04:00"}, {id:"g22",home:"USA", away:"Australia", group:"D",kickoff:"2026-06-19T15:00:00-04:00"}, {id:"g23",home:"Turkey", away:"USA", group:"D",kickoff:"2026-06-25T22:00:00-04:00"}, {id:"g24",home:"Paraguay", away:"Australia", group:"D",kickoff:"2026-06-25T15:00:00-04:00"}, {id:"g25",home:"Germany", away:"Curacao", group:"E",kickoff:"2026-06-14T16:00:00-04:00"}, {id:"g26",home:"Ivory Coast", away:"Ecuador", group:"E",kickoff:"2026-06-14T19:00:00-04:00"}, {id:"g27",home:"Germany", away:"Ivory Coast", group:"E",kickoff:"2026-06-20T13:00:00-04:00"}, {id:"g28",home:"Ecuador", away:"Curacao", group:"E",kickoff:"2026-06-20T00:00:00-04:00"}, {id:"g29",home:"Ecuador", away:"Germany", group:"E",kickoff:"2026-06-25T19:00:00-04:00"}, {id:"g30",home:"Curacao", away:"Ivory Coast", group:"E",kickoff:"2026-06-25T19:00:00-04:00"}, {id:"g31",home:"Netherlands", away:"Japan", group:"F",kickoff:"2026-06-14T16:00:00-04:00"}, {id:"g32",home:"Sweden", away:"Tunisia", group:"F",kickoff:"2026-06-14T22:00:00-04:00"}, {id:"g33",home:"Netherlands", away:"Sweden", group:"F",kickoff:"2026-06-20T13:00:00-04:00"}, {id:"g34",home:"Tunisia", away:"Japan", group:"F",kickoff:"2026-06-20T00:00:00-04:00"}, {id:"g35",home:"Tunisia", away:"Netherlands", group:"F",kickoff:"2026-06-25T19:00:00-04:00"}, {id:"g36",home:"Japan", away:"Sweden", group:"F",kickoff:"2026-06-25T19:00:00-04:00"}, {id:"g37",home:"Belgium", away:"Egypt", group:"G",kickoff:"2026-06-15T18:00:00-04:00"}, {id:"g38",home:"Iran", away:"New Zealand", group:"G",kickoff:"2026-06-15T00:00:00-04:00"}, {id:"g39",home:"Belgium", away:"Iran", group:"G",kickoff:"2026-06-21T15:00:00-04:00"}, {id:"g40",home:"New Zealand", away:"Egypt", group:"G",kickoff:"2026-06-21T18:00:00-04:00"}, {id:"g41",home:"New Zealand", away:"Belgium", group:"G",kickoff:"2026-06-26T16:00:00-04:00"}, {id:"g42",home:"Egypt", away:"Iran", group:"G",kickoff:"2026-06-26T16:00:00-04:00"}, {id:"g43",home:"Spain", away:"Cape Verde", group:"H",kickoff:"2026-06-15T13:00:00-04:00"}, {id:"g44",home:"Saudi Arabia",away:"Uruguay", group:"H",kickoff:"2026-06-15T18:00:00-04:00"}, {id:"g45",home:"Spain", away:"Saudi Arabia", group:"H",kickoff:"2026-06-21T19:00:00-04:00"}, {id:"g46",home:"Uruguay", away:"Cape Verde", group:"H",kickoff:"2026-06-21T22:00:00-04:00"}, {id:"g47",home:"Uruguay", away:"Spain", group:"H",kickoff:"2026-06-26T20:00:00-04:00"}, {id:"g48",home:"Cape Verde", away:"Saudi Arabia", group:"H",kickoff:"2026-06-26T20:00:00-04:00"}, {id:"g49",home:"France", away:"Senegal", group:"I",kickoff:"2026-06-16T15:00:00-04:00"}, {id:"g50",home:"Iraq", away:"Norway", group:"I",kickoff:"2026-06-16T18:00:00-04:00"}, {id:"g51",home:"France", away:"Iraq", group:"I",kickoff:"2026-06-22T15:00:00-04:00"}, {id:"g52",home:"Norway", away:"Senegal", group:"I",kickoff:"2026-06-22T18:00:00-04:00"}, {id:"g53",home:"Norway", away:"France", group:"I",kickoff:"2026-06-26T16:00:00-04:00"}, {id:"g54",home:"Senegal", away:"Iraq", group:"I",kickoff:"2026-06-26T16:00:00-04:00"}, {id:"g55",home:"Argentina", away:"Algeria", group:"J",kickoff:"2026-06-16T21:00:00-04:00"}, {id:"g56",home:"Austria", away:"Jordan", group:"J",kickoff:"2026-06-17T00:00:00-04:00"}, {id:"g57",home:"Argentina", away:"Austria", group:"J",kickoff:"2026-06-22T21:00:00-04:00"}, {id:"g58",home:"Jordan", away:"Algeria", group:"J",kickoff:"2026-06-23T00:00:00-04:00"}, {id:"g59",home:"Argentina", away:"Jordan", group:"J",kickoff:"2026-06-27T16:00:00-04:00"}, {id:"g60",home:"Algeria", away:"Austria", group:"J",kickoff:"2026-06-27T16:00:00-04:00"}, {id:"g61",home:"Portugal", away:"DR Congo", group:"K",kickoff:"2026-06-17T13:00:00-04:00"}, {id:"g62",home:"Uzbekistan", away:"Colombia", group:"K",kickoff:"2026-06-17T22:00:00-04:00"}, {id:"g63",home:"Portugal", away:"Uzbekistan", group:"K",kickoff:"2026-06-23T15:00:00-04:00"}, {id:"g64",home:"Colombia", away:"DR Congo", group:"K",kickoff:"2026-06-23T18:00:00-04:00"}, {id:"g65",home:"Portugal", away:"Colombia", group:"K",kickoff:"2026-06-27T20:00:00-04:00"}, {id:"g66",home:"DR Congo", away:"Uzbekistan", group:"K",kickoff:"2026-06-27T20:00:00-04:00"}, {id:"g67",home:"England", away:"Croatia", group:"L",kickoff:"2026-06-17T16:00:00-04:00"}, {id:"g68",home:"Ghana", away:"Panama", group:"L",kickoff:"2026-06-17T19:00:00-04:00"}, {id:"g69",home:"England", away:"Ghana", group:"L",kickoff:"2026-06-23T21:00:00-04:00"}, {id:"g70",home:"Panama", away:"Croatia", group:"L",kickoff:"2026-06-24T00:00:00-04:00"}, {id:"g71",home:"England", away:"Panama", group:"L",kickoff:"2026-06-27T16:00:00-04:00"}, {id:"g72",home:"Croatia", away:"Ghana", group:"L",kickoff:"2026-06-27T16:00:00-04:00"}, ]; const KNOCKOUT_ROUNDS = { r32:[ {id:"r32_1", label:"R32 Match 1", home:"TBD",away:"TBD",kickoff:"2026-06-28T15:00:00-04:00"}, {id:"r32_2", label:"R32 Match 2", home:"TBD",away:"TBD",kickoff:"2026-06-28T19:00:00-04:00"}, {id:"r32_3", label:"R32 Match 3", home:"TBD",away:"TBD",kickoff:"2026-06-29T15:00:00-04:00"}, {id:"r32_4", label:"R32 Match 4", home:"TBD",away:"TBD",kickoff:"2026-06-29T19:00:00-04:00"}, {id:"r32_5", label:"R32 Match 5", home:"TBD",away:"TBD",kickoff:"2026-06-30T15:00:00-04:00"}, {id:"r32_6", label:"R32 Match 6", home:"TBD",away:"TBD",kickoff:"2026-06-30T19:00:00-04:00"}, {id:"r32_7", label:"R32 Match 7", home:"TBD",away:"TBD",kickoff:"2026-07-01T15:00:00-04:00"}, {id:"r32_8", label:"R32 Match 8", home:"TBD",away:"TBD",kickoff:"2026-07-01T19:00:00-04:00"}, {id:"r32_9", label:"R32 Match 9", home:"TBD",away:"TBD",kickoff:"2026-07-02T15:00:00-04:00"}, {id:"r32_10",label:"R32 Match 10", home:"TBD",away:"TBD",kickoff:"2026-07-02T19:00:00-04:00"}, {id:"r32_11",label:"R32 Match 11", home:"TBD",away:"TBD",kickoff:"2026-07-03T15:00:00-04:00"}, {id:"r32_12",label:"R32 Match 12", home:"TBD",away:"TBD",kickoff:"2026-07-03T19:00:00-04:00"}, {id:"r32_13",label:"R32 Match 13", home:"TBD",away:"TBD",kickoff:"2026-07-04T15:00:00-04:00"}, {id:"r32_14",label:"R32 Match 14", home:"TBD",away:"TBD",kickoff:"2026-07-04T19:00:00-04:00"}, {id:"r32_15",label:"R32 Match 15", home:"TBD",away:"TBD",kickoff:"2026-07-05T15:00:00-04:00"}, {id:"r32_16",label:"R32 Match 16", home:"TBD",away:"TBD",kickoff:"2026-07-05T19:00:00-04:00"}, ], r16:[ {id:"r16_1",label:"R16 Match 1",home:"TBD",away:"TBD",kickoff:"2026-07-06T15:00:00-04:00"}, {id:"r16_2",label:"R16 Match 2",home:"TBD",away:"TBD",kickoff:"2026-07-06T19:00:00-04:00"}, {id:"r16_3",label:"R16 Match 3",home:"TBD",away:"TBD",kickoff:"2026-07-07T15:00:00-04:00"}, {id:"r16_4",label:"R16 Match 4",home:"TBD",away:"TBD",kickoff:"2026-07-07T19:00:00-04:00"}, {id:"r16_5",label:"R16 Match 5",home:"TBD",away:"TBD",kickoff:"2026-07-08T15:00:00-04:00"}, {id:"r16_6",label:"R16 Match 6",home:"TBD",away:"TBD",kickoff:"2026-07-08T19:00:00-04:00"}, {id:"r16_7",label:"R16 Match 7",home:"TBD",away:"TBD",kickoff:"2026-07-09T15:00:00-04:00"}, {id:"r16_8",label:"R16 Match 8",home:"TBD",away:"TBD",kickoff:"2026-07-09T19:00:00-04:00"}, ], qf:[ {id:"qf_1",label:"QF Match 1",home:"TBD",away:"TBD",kickoff:"2026-07-11T15:00:00-04:00"}, {id:"qf_2",label:"QF Match 2",home:"TBD",away:"TBD",kickoff:"2026-07-11T19:00:00-04:00"}, {id:"qf_3",label:"QF Match 3",home:"TBD",away:"TBD",kickoff:"2026-07-12T15:00:00-04:00"}, {id:"qf_4",label:"QF Match 4",home:"TBD",away:"TBD",kickoff:"2026-07-12T19:00:00-04:00"}, ], sf:[ {id:"sf_1",label:"SF Match 1",home:"TBD",away:"TBD",kickoff:"2026-07-14T19:00:00-04:00"}, {id:"sf_2",label:"SF Match 2",home:"TBD",away:"TBD",kickoff:"2026-07-15T19:00:00-04:00"}, ], final:[ {id:"final_1",label:"The Final",home:"TBD",away:"TBD",kickoff:"2026-07-19T15:00:00-04:00"}, ], }; const GOLDEN_BOOT_CANDIDATES = [ "Kylian Mbappé","Erling Haaland","Vinicius Jr.","Lionel Messi", "Harry Kane","Lamine Yamal","Jude Bellingham","Cristiano Ronaldo", "Pedri","Bukayo Saka","Phil Foden","Antoine Griezmann", "Darwin Núñez","Richarlison","Cody Gakpo","Lautaro Martínez", "Achraf Hakimi","Sadio Mané","Romelu Lukaku","Dušan Vlahović", "Rasmus Højlund","Leroy Sané","Memphis Depay","Hirving Lozano", "Alexis Vega","Cyle Larin","Andy Robertson","Robert Lewandowski", ]; const METHOD_OPTIONS = [{value:"90",label:"90 min"},{value:"aet",label:"Extra Time"},{value:"pens",label:"Penalties"}]; const FLAGS = { "Mexico":"🇲🇽","South Africa":"🇿🇦","South Korea":"🇰🇷","Czechia":"🇨🇿", "Canada":"🇨🇦","Bosnia-Herz.":"🇧🇦","Qatar":"🇶🇦","Switzerland":"🇨🇭", "Brazil":"🇧🇷","Morocco":"🇲🇦","Haiti":"🇭🇹","Scotland":"🏴󠁧󠁢󠁳󠁣󠁴󠁿", "USA":"🇺🇸","Paraguay":"🇵🇾","Australia":"🇦🇺","Turkey":"🇹🇷", "Germany":"🇩🇪","Curacao":"🇨🇼","Ivory Coast":"🇨🇮","Ecuador":"🇪🇨", "Netherlands":"🇳🇱","Japan":"🇯🇵","Sweden":"🇸🇪","Tunisia":"🇹🇳", "Belgium":"🇧🇪","Egypt":"🇪🇬","Iran":"🇮🇷","New Zealand":"🇳🇿", "Spain":"🇪🇸","Cape Verde":"🇨🇻","Saudi Arabia":"🇸🇦","Uruguay":"🇺🇾", "France":"🇫🇷","Senegal":"🇸🇳","Iraq":"🇮🇶","Norway":"🇳🇴", "Argentina":"🇦🇷","Algeria":"🇩🇿","Austria":"🇦🇹","Jordan":"🇯🇴", "Portugal":"🇵🇹","DR Congo":"🇨🇩","Uzbekistan":"🇺🇿","Colombia":"🇨🇴", "England":"🏴󠁧󠁢󠁥󠁮󠁧󠁿","Croatia":"🇭🇷","Ghana":"🇬🇭","Panama":"🇵🇦","TBD":"⚽", }; const fl = t => FLAGS[t] || "🏳️"; /* ═══════════════════════════════════════════════ HELPERS ═══════════════════════════════════════════════ */ function gameDeadline(game) { if (!game.kickoff) return null; return new Date(new Date(game.kickoff).getTime() - 30*60*1000); } function isGameLocked(game) { const dl = gameDeadline(game); return dl ? new Date() >= dl : false; } function goldenBootLocked() { return new Date() >= TOURNAMENT_START; } function isKoRoundOpen(rid) { return (KNOCKOUT_ROUNDS[rid]||[]).some(g => !isGameLocked(g)); } function isLocked(rid) { if (rid==="group") return GROUP_GAMES.every(g => isGameLocked(g)); return !isKoRoundOpen(rid); } function fmtDeadline(game) { const dl = gameDeadline(game); if (!dl) return null; return dl.toLocaleString("en-US",{month:"short",day:"numeric",hour:"numeric",minute:"2-digit",timeZoneName:"short",hour12:true}); } function fmtTimestamp(iso) { if (!iso) return null; return new Date(iso).toLocaleString("en-US",{month:"short",day:"numeric",hour:"numeric",minute:"2-digit",timeZoneName:"short",hour12:true}); } function resolveGame(game, liveFixtures) { const live = liveFixtures && liveFixtures[game.id]; if (!live) return game; return {...game, home:live.home||game.home, away:live.away||game.away, kickoff:live.kickoff||game.kickoff}; } function getLocalClaim() { try { return JSON.parse(localStorage.getItem("wc26_claim")||"null"); } catch { return null; } } function setLocalClaim(name, code) { try { localStorage.setItem("wc26_claim", JSON.stringify({name,code})); } catch {} } function genCode() { return String(Math.floor(1000+Math.random()*9000)); } function calcScore(player, picks, results, goldenBoot) { let score = 0; const pp = picks[player]||{}; GROUP_GAMES.forEach(g => { const pick=pp[g.id], res=results[g.id]; if (pick&&res&&pick.result===res.result) score+=SCORING.group.result; }); ["r32","r16","qf","sf","final"].forEach(rid => { const sc=SCORING[rid]; (KNOCKOUT_ROUNDS[rid]||[]).forEach(g => { const pick=pp[g.id], res=results[g.id]; if (!pick||!res) return; if (pick.winner===res.winner) { score+=sc.winner; if (pick.method===res.method) score+=sc.method; } }); }); const gb=goldenBoot[player]; if (gb&&results.goldenBoot&&gb===results.goldenBoot) score+=SCORING.golden; return score; } function calcBreakdown(player, picks, results, goldenBoot) { const pp=picks[player]||{}; const bd={group:0,r32:0,r16:0,qf:0,sf:0,final:0,golden:0}; GROUP_GAMES.forEach(g => { const pick=pp[g.id], res=results[g.id]; if (pick&&res&&pick.result===res.result) bd.group+=SCORING.group.result; }); ["r32","r16","qf","sf","final"].forEach(rid => { const sc=SCORING[rid]; (KNOCKOUT_ROUNDS[rid]||[]).forEach(g => { const pick=pp[g.id], res=results[g.id]; if (!pick||!res) return; if (pick.winner===res.winner) { bd[rid]+=sc.winner; if (pick.method===res.method) bd[rid]+=sc.method; } }); }); const gb=goldenBoot[player]; if (gb&&results.goldenBoot&&gb===results.goldenBoot) bd.golden+=SCORING.golden; return bd; } /* ═══════════════════════════════════════════════ SERVER API (replaces localStorage) ═══════════════════════════════════════════════ */ async function loadAll() { const claim = getLocalClaim(); const qs = claim ? `?player=${encodeURIComponent(claim.name)}&pin=${encodeURIComponent(claim.code)}` : ""; try { const r = await fetch("/api/state"+qs); if (!r.ok) throw new Error("api"); return r.json(); } catch { return {picks:{},results:{},goldenBoot:{},claims:{},liveFixtures:{}}; } } /* ═══════════════════════════════════════════════ APP ROOT ═══════════════════════════════════════════════ */ function App() { const [view,setView] = useState("home"); const [activePlayer,setActivePlayer] = useState(null); const [activeRound,setActiveRound] = useState("group"); const [data,setData] = useState({picks:{},results:{},goldenBoot:{},claims:{},liveFixtures:{}}); const [saving,setSaving] = useState(false); const [adminMode,setAdminMode] = useState(false); const [adminKey,setAdminKey] = useState(""); const [toast,setToast] = useState(null); const [localPicks,setLocalPicks] = useState({}); const [localGolden,setLocalGolden] = useState(""); const [showRules,setShowRules] = useState(false); const [claimModal,setClaimModal] = useState(null); const [claimInput,setClaimInput] = useState(""); const [localClaim,setLocalClaimState] = useState(() => getLocalClaim()); const [confirmSave,setConfirmSave] = useState(false); useEffect(() => { loadAll().then(setData); }, []); function notify(msg,type="ok") { setToast({msg,type}); setTimeout(()=>setToast(null),3000); } function handlePlayerTap(name) { const alreadyClaimed = !!(data.claims&&data.claims[name]); if (localClaim&&localClaim.name===name) { doEnterPlayer(name); return; } setClaimInput(""); setClaimModal({mode: alreadyClaimed ? "verify" : "choose", name}); } async function handleClaimNew(name) { const code = genCode(); try { const r = await fetch("/api/claim",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({player:name,pin:code})}); if (!r.ok) { const e=await r.json().catch(()=>{}); notify(e?.error||"Claim failed","err"); return; } const nd = await r.json(); setData(nd); setLocalClaim(name,code); setLocalClaimState({name,code}); setClaimModal({mode:"show",name,code}); } catch { notify("Network error","err"); } } async function handleVerifyCode(name) { try { const r = await fetch("/api/verify",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({player:name,pin:claimInput.trim()})}); if (!r.ok) { notify("Wrong code ✗","err"); return; } const nd = await r.json(); setData(nd); setLocalClaim(name,claimInput.trim()); setLocalClaimState({name,code:claimInput.trim()}); setClaimModal(null); doEnterPlayer(name); } catch { notify("Network error","err"); } } function doEnterPlayer(name) { setActivePlayer(name); setLocalPicks({...(data.picks[name]||{})}); setLocalGolden(data.goldenBoot[name]||""); setActiveRound("group"); setClaimModal(null); setView("picks"); } function savePicks() { if (isLocked(activeRound)) { notify("This round is locked 🔒","err"); return; } setConfirmSave(true); } async function doSavePicks() { setConfirmSave(false); setSaving(true); const claim = getLocalClaim(); if (!claim||claim.name!==activePlayer) { notify("Session mismatch — re-select your name","err"); setSaving(false); return; } try { const r = await fetch("/api/picks",{method:"POST",headers:{"Content-Type":"application/json"}, body:JSON.stringify({player:activePlayer,pin:claim.code,picks:localPicks,goldenBoot:localGolden,round:activeRound})}); if (!r.ok) { const e=await r.json().catch(()=>{}); notify(e?.error||"Save failed","err"); setSaving(false); return; } const nd = await r.json(); setData(nd); notify("Picks saved ✓"); } catch { notify("Network error","err"); } setSaving(false); } async function saveResultsBatch(newResults) { try { const r = await fetch("/api/admin/results",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({adminKey,results:newResults})}); if (!r.ok) { const e=await r.json().catch(()=>{}); notify(e?.error||"Save failed","err"); return; } setData(await r.json()); } catch { notify("Network error","err"); } } async function saveResult(id,obj) { await saveResultsBatch({[id]:obj}); } async function saveFixturesBatch(newFixtures) { try { const r = await fetch("/api/admin/fixtures",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({adminKey,fixtures:newFixtures})}); if (!r.ok) { notify("Save failed","err"); return; } setData(await r.json()); } catch { notify("Network error","err"); } } const scores = PLAYERS.map(p=>({name:p,score:calcScore(p,data.picks,data.results,data.goldenBoot)})).sort((a,b)=>b.score-a.score); const daysLeft = Math.max(0,Math.ceil((TOURNAMENT_START-new Date())/86400000)); return (
{toast&&
{toast.msg}
} {showRules&&setShowRules(false)}/>} {claimModal&&( setClaimModal(null)} onClaimNew={handleClaimNew} onVerify={handleVerifyCode} onEnter={doEnterPlayer} localClaim={localClaim}/> )} {confirmSave&&( setConfirmSave(false)}/> )}
setView("home")}>
⚽
TOTAL DEGENERACY
World Cup 2026 · Pick'Em Pool
{view==="home"&&} {view==="picks"&&activePlayer&&( setLocalPicks(p=>({...p,[id]:{result:r,_savedAt:new Date().toISOString()}}))} setKoPick={(id,fld,val)=>setLocalPicks(p=>({...p,[id]:{...(p[id]||{}),[fld]:val}}))} localGolden={localGolden} setLocalGolden={setLocalGolden} onSave={savePicks} saving={saving} data={data} onBack={()=>setView("home")} savedAt={data.savedAt||{}} liveFixtures={data.liveFixtures||{}}/> )} {view==="leaderboard"&&} {view==="reveal"&&} {view==="admin"&&( )}
); } /* ═══════════════════════════════════════════════ HOME VIEW ═══════════════════════════════════════════════ */ function HomeView({players,onSelect,scores,daysLeft,localClaim}) { return (
🏆 WORLD CUP 2026
104 games. 6 degenerates. One champion.
{daysLeft>0 ?
Tournament starts in {daysLeft} day{daysLeft!==1?"s":""}
:
🔴 Tournament is LIVE
}
{scores.some(s=>s.score>0)&&(
CURRENT STANDINGS
{scores.map((s,i)=>{ const theme=PLAYER_THEMES[s.name]||{}; return (
{i===0?"🥇":i===1?"🥈":i===2?"🥉":`${i+1}.`} {theme.emoji} {s.name} {s.score}pts
); })}
)}
SELECT YOUR NAME TO ENTER PICKS
{players.map(name=>( s.name===name)?.score??0} onSelect={onSelect} isLocalPlayer={localClaim?.name===name} isClaimed={false}/> ))}
); } function PlayerCard({name,score,onSelect,isLocalPlayer}) { const theme=PLAYER_THEMES[name]||{}; return (
onSelect(name)} style={{...S.playerCard,background:theme.bg,border:`2px solid ${isLocalPlayer?theme.border:theme.border+"55"}`,boxShadow:isLocalPlayer?`0 0 24px ${theme.shadow},0 4px 16px rgba(0,0,0,0.5)`:"0 4px 16px rgba(0,0,0,0.4)"}}>
{isLocalPlayer&&
YOUR PICKS
}
{theme.emoji}
{name}
{theme.label}
{score>0&&
{score} pts
}
"{theme.tagline}"
); } /* ═══════════════════════════════════════════════ PICKS VIEW ═══════════════════════════════════════════════ */ function PicksView({player,activeRound,setActiveRound,localPicks,setGroupPick,setKoPick,localGolden,setLocalGolden,onSave,saving,data,onBack,savedAt,liveFixtures}) { const theme=PLAYER_THEMES[player]||{}; const gbLocked=goldenBootLocked(); const locked=isLocked(activeRound); const roundSavedAt=savedAt[`${player}__${activeRound}`]||null; const allGamesPicked = activeRound==="group" ? GROUP_GAMES.every(g=>localPicks[g.id]?.result) : (KNOCKOUT_ROUNDS[activeRound]||[]).every(g=>{const rg=resolveGame(g,liveFixtures);return rg.home==="TBD"||localPicks[g.id]?.winner;}); return (
{theme.emoji}
{player}'s Picks
{theme.tagline}
{roundSavedAt&&
✅ Saved {fmtTimestamp(roundSavedAt)}
}
{ROUNDS.map(r=>{ const hasLocked=(r.id==="group")?GROUP_GAMES.some(g=>isGameLocked(g)):(KNOCKOUT_ROUNDS[r.id]||[]).some(g=>isGameLocked(resolveGame(g,liveFixtures))); const isCurrent=r.id===activeRound; return ( ); })}
🥾
Golden Boot {gbLocked?"🔒 Locked":"(locks at kickoff)"}
Worth 10 pts if correct
{!allGamesPicked&&!locked&&
⚠️ Not all games picked yet
}
{activeRound==="group" ? : }
); } /* ═══════════════════════════════════════════════ GROUP PANEL ═══════════════════════════════════════════════ */ function GroupPanel({localPicks,setGroupPick,locked,results,savedAt}) { const [viewMode,setViewMode]=useState("date"); const fmtDateHeader = dateStr => new Date(dateStr + 'T12:00:00Z') .toLocaleDateString("en-US",{weekday:"short",month:"short",day:"numeric"}) .toUpperCase(); const gamesByDate=()=>{ const buckets={}; GROUP_GAMES.forEach(g=>{ const key = g.kickoff ? g.kickoff.slice(0,10) : 'TBD'; if(!buckets[key])buckets[key]=[]; buckets[key].push(g); }); // Return sorted by date key (YYYY-MM-DD sorts correctly) return Object.entries(buckets).sort(([a],[b])=>a.localeCompare(b)); }; const gamesByGroup=()=>{ const buckets={}; GROUP_GAMES.forEach(g=>{ if(!buckets[g.group])buckets[g.group]=[]; buckets[g.group].push(g); }); return buckets; }; return (
{[["date","📅 By Date"],["group","🗂 By Group"]].map(([m,l])=>( ))}
{viewMode==="date" ? gamesByDate().map(([dateKey,games])=>(
📅 {fmtDateHeader(dateKey)}
{games.map(game=>)}
)) : Object.entries(gamesByGroup()).sort(([a],[b])=>a.localeCompare(b)).map(([grp,games])=>(
GROUP {grp}
{games.map(game=>)}
)) }
); } function GameRow({game,localPicks,setGroupPick,locked,results,savedAt,showGroup}) { const now=new Date(); const pick=localPicks[game.id]?.result; const res=results[game.id]?.result; const dl=gameDeadline(game); const gameLocked=isGameLocked(game); const pickTs=localPicks[game.id]?._savedAt||null; const urgentSoon=dl&&!gameLocked&&(dl-now)<6*60*60*1000; return (
{showGroup&&Grp {game.group}} {fl(game.home)} {game.home}
{[["home","W"],["draw","D"],["away","W"]].map(([opt,label])=>{ const active=pick===opt; const correct=res&&res===opt; const wrong=res&&active&&!correct; return ( ); })}
{game.away} {fl(game.away)}
{gameLocked?"🔒 Locked":(dl?:null)} {pickTs?`✅ ${gameLocked?"Submitted":"Picked"} ${fmtTimestamp(pickTs)}`:""}
); } function Countdown({deadline,urgentSoon}) { const [now,setNow]=useState(new Date()); useEffect(()=>{ const t=setInterval(()=>setNow(new Date()),1000); return ()=>clearInterval(t); },[]); const ms=deadline-now; if (ms<=0) return 🔒 Locked; const totalSecs=Math.floor(ms/1000); const d=Math.floor(totalSecs/86400), h=Math.floor((totalSecs%86400)/3600), m=Math.floor((totalSecs%3600)/60), s=totalSecs%60; const parts=[]; if(d>0)parts.push(`${d}d`); if(d>0||h>0)parts.push(`${h}h`); parts.push(`${m}m`); if(d===0&&h===0)parts.push(`${String(s).padStart(2,"0")}s`); const color=urgentSoon?"#ffaa44":d>1?"#446655":"#88ccaa"; return ⏳ {parts.join(" ")} to lock; } /* ═══════════════════════════════════════════════ KNOCKOUT PANEL ═══════════════════════════════════════════════ */ function KnockoutPanel({roundId,localPicks,setKoPick,locked,results,liveFixtures}) { const games=KNOCKOUT_ROUNDS[roundId]||[]; return (
{games.map(rawGame=>{ const game=resolveGame(rawGame,liveFixtures); const pick=localPicks[game.id]||{}; const res=results[game.id]||{}; const gameLocked=isGameLocked(game); const isTbd=game.home==="TBD"||game.away==="TBD"; return (
{game.label} {gameLocked&&🔒} {game.kickoff&&{fmtDeadline(game)}}
{fl(game.home)} {game.home} vs {fl(game.away)} {game.away}
{!isTbd&&(
Winner
{[game.home,game.away].map(team=>{ const active=pick.winner===team; const correct=res.winner===team; return ( ); })}
Method (+{SCORING[roundId]?.method||0} pts)
{METHOD_OPTIONS.map(opt=>{ const active=pick.method===opt.value; const correct=res.method===opt.value&&!!res.winner; return ( ); })}
)} {res.winner&&
Result: {res.winner} ({METHOD_OPTIONS.find(m=>m.value===res.method)?.label||res.method})
}
); })}
); } /* ═══════════════════════════════════════════════ LEADERBOARD ═══════════════════════════════════════════════ */ function LeaderboardView({scores,data}) { const [expanded,setExpanded]=useState(null); return (
🏆 Standings
{scores.map((s,i)=>{ const theme=PLAYER_THEMES[s.name]||{}; const bd=calcBreakdown(s.name,data.picks,data.results,data.goldenBoot); const isExp=expanded===s.name; return (
setExpanded(isExp?null:s.name)}>
{i===0?"🥇":i===1?"🥈":i===2?"🥉":`${i+1}.`} {theme.emoji}
{s.name}
{theme.label}
{s.score} pts
{isExp?"▲":"▼"}
{isExp&&(
{Object.entries(bd).map(([k,v])=>(
{k==="golden"?"Golden Boot":k}
0?theme.accent:"#334",fontWeight:"bold"}}>{v}
))}
)}
); })}
); } /* ═══════════════════════════════════════════════ PICKS REVEAL ═══════════════════════════════════════════════ */ function PicksRevealView({data,liveFixtures}) { const [roundId,setRoundId]=useState("group"); return (
👁 All Picks
{ROUNDS.map(r=>( ))}
); } function RevealRound({roundId,data,liveFixtures}) { const games = roundId==="group" ? GROUP_GAMES : (KNOCKOUT_ROUNDS[roundId]||[]).map(g=>resolveGame(g,liveFixtures)); return (
{PLAYERS.map(p=>)} {games.map(game=>{ const res=data.results[game.id]; const locked=isGameLocked(game); return ( {PLAYERS.map(p=>{ const pick=data.picks[p]?.[game.id]; const correct=res&&(roundId==="group"?pick?.result===res.result:pick?.winner===res.winner); const txt=roundId==="group"?(pick?.result?{home:"H",draw:"D",away:"A"}[pick.result]:"–"):(pick?.winner?`${fl(pick.winner)}${pick.winner}${pick.method?` (${pick.method})`:""}` :"–"); return ( ); })} ); })}
Match{PLAYER_THEMES[p]?.emoji} {p}Result
{game.home==="TBD"?game.label:`${fl(game.home)}${game.home} v ${fl(game.away)}${game.away}`} {locked?txt:"🔒"} {res?(roundId==="group"?({home:`${game.home} win`,draw:"Draw",away:`${game.away} win`}[res.result]||"?"):`${res.winner} (${res.method||"?"})`):"–"}
); } /* ═══════════════════════════════════════════════ ADMIN VIEW ═══════════════════════════════════════════════ */ function AdminView({adminMode,adminKey,setAdminKey,setAdminMode,data,saveResult,saveResultsBatch,saveFixturesBatch,notify,setData}) { const [adminTab,setAdminTab]=useState("sync"); const [adminRound,setAdminRound]=useState("group"); const [localResults,setLocalResults]=useState({}); const [syncing,setSyncing]=useState(false); const [syncLog,setSyncLog]=useState([]); const [goldenInput,setGoldenInput]=useState(""); function log(msg){setSyncLog(l=>[...l.slice(-19),msg]);} async function syncResults() { setSyncing(true); setSyncLog([]); try { log("Sending sync request to server…"); const r=await fetch("/api/admin/sync-results",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({adminKey})}); const res=await r.json(); if(!r.ok) throw new Error(res.error||"Sync failed"); (res.log||[]).forEach(log); if(res.data) setData(res.data); } catch(e){log(`❌ ${e.message}`);} setSyncing(false); } async function syncFixtures() { setSyncing(true); setSyncLog([]); try { log("Syncing fixtures from server…"); const r=await fetch("/api/admin/sync-fixtures",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({adminKey})}); const res=await r.json(); if(!r.ok) throw new Error(res.error||"Sync failed"); (res.log||[]).forEach(log); if(res.data) setData(res.data); } catch(e){log(`❌ ${e.message}`);} setSyncing(false); } async function saveGoldenBoot() { if(!goldenInput){notify("Pick a player","err");return;} try { const r=await fetch("/api/admin/results",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({adminKey,results:{goldenBoot:goldenInput}})}); if(!r.ok) throw new Error("Failed"); setData(await r.json()); notify("Golden Boot set ✓"); setGoldenInput(""); } catch{notify("Failed","err");} } if (!adminMode) return (
🔐
Admin Access
setAdminKey(e.target.value)} onKeyDown={e=>e.key==="Enter"&&setAdminMode(true)}/>
); return (
{[["sync","🔄 Sync"],["results","📝 Results"],["recover","🚨 Recovery"]].map(([t,l])=>( ))}
{adminTab==="sync"&&(
Sync from football-data.org
{syncLog.length>0&&( 
              {syncLog.join("\n")}
)}
Set Golden Boot Winner
{data.results?.goldenBoot&&
Current: {data.results.goldenBoot}
}
)} {adminTab==="results"&&(
Manual Result Entry
{ROUNDS.filter(r=>r.id!=="group").map(r=>( ))}
{adminRound==="group"?( GROUP_GAMES.map(game=>(
{fl(game.home)} {game.home} vs {fl(game.away)} {game.away}
{["home","draw","away"].map(opt=>( ))} {(localResults[game.id]||data.results[game.id])&&( )}
)) ):( (KNOCKOUT_ROUNDS[adminRound]||[]).map(rawGame=>{ const game=resolveGame(rawGame,data.liveFixtures||{}); const cur=localResults[game.id]||data.results[game.id]||{}; return (
{game.label}: {fl(game.home)}{game.home} vs {fl(game.away)}{game.away}
Winner
{[game.home,game.away].map(t=>( ))}
Method
{METHOD_OPTIONS.map(m=>( ))}
{(localResults[game.id]?.winner)&&( )}
); }) )}
)} {adminTab==="recover"&&( )}
); } /* ═══════════════════════════════════════════════ RECOVERY TAB ═══════════════════════════════════════════════ */ function RecoveryTab({adminKey,notify,setData}) { const [backups,setBackups]=useState([]); const [scanning,setScanning]=useState(false); async function listBackups() { setScanning(true); try { const r=await fetch(`/api/admin/backups?adminKey=${encodeURIComponent(adminKey)}`); if(!r.ok) throw new Error("Failed — check admin key"); const {backups:list}=await r.json(); setBackups(list); notify(`Found ${list.length} backup${list.length!==1?"s":""}`); } catch(e){notify(e.message,"err");} setScanning(false); } async function exportData() { try { const r=await fetch(`/api/admin/export?adminKey=${encodeURIComponent(adminKey)}`); if(!r.ok) throw new Error("Export failed"); const blob=await r.blob(); const url=URL.createObjectURL(blob); const a=document.createElement("a"); a.href=url; a.download=`pool-export-${Date.now()}.json`; a.click(); URL.revokeObjectURL(url); } catch(e){notify(e.message,"err");} } return (
🚨 Data Recovery
Server backups are taken hourly. Use Export to download current data as JSON.
{backups.length>0&&(
{backups.map(b=>
{b}
)}
)}
); } /* ═══════════════════════════════════════════════ CLAIM MODAL ═══════════════════════════════════════════════ */ function ClaimModal({modal,claimInput,setClaimInput,onClose,onClaimNew,onVerify,onEnter,localClaim}) { const theme=PLAYER_THEMES[modal.name]||{}; return (
e.stopPropagation()}>
{theme.emoji}
{modal.name}
{modal.mode==="choose"&&( <>
Claim this name to save your picks. You'll get a 4-digit code — write it down!
{localClaim?.name===modal.name&&} )} {modal.mode==="show"&&( <>
Your code — write this down!
{modal.code}
You'll need this to access your picks from other devices.
)} {modal.mode==="verify"&&( <>
Enter your 4-digit code to access picks.
setClaimInput(e.target.value.replace(/\D/g,""))} onKeyDown={e=>e.key==="Enter"&&onVerify(modal.name)}/> )}
); } /* ═══════════════════════════════════════════════ CONFIRM SAVE MODAL ═══════════════════════════════════════════════ */ function ConfirmSaveModal({player,round,localPicks,localGolden,onConfirm,onCancel}) { const theme=PLAYER_THEMES[player]||{}; const roundGames=round==="group"?GROUP_GAMES:(KNOCKOUT_ROUNDS[round]||[]); const pickedCount=round==="group"?roundGames.filter(g=>localPicks[g.id]?.result).length:roundGames.filter(g=>localPicks[g.id]?.winner).length; return (
e.stopPropagation()}>
💾
Save {player}'s Picks?
{ROUNDS.find(r=>r.id===round)?.label}
{pickedCount} of {roundGames.length} games picked
{localGolden&&
🥾 Golden Boot: {localGolden}
}
Picks for locked games will be ignored.
); } /* ═══════════════════════════════════════════════ RULES MODAL ═══════════════════════════════════════════════ */ function RulesModal({onClose}) { return (
e.stopPropagation()}>
📋 Rules & Scoring
Group Stage
Pick Home Win / Draw / Away Win
3 pts for correct result

Knockout Rounds
Pick the winner (no draws)
{[["R32",3,2],["R16",5,3],["QF",7,4],["SF",10,5],["Final",13,8]].map(([r,w,m])=>( ))}
RoundWinnerMethod bonus
{r}{w}{m}
Method = 90 min / Extra Time / Penalties

Golden Boot
Pick the tournament top scorer — 10 pts if correct
Locks at tournament kickoff

Picks lock 1 hour before each game.
); } /* ═══════════════════════════════════════════════ STYLES ═══════════════════════════════════════════════ */ const S = { root: {minHeight:"100vh",background:"#050810",position:"relative",overflow:"hidden"}, confettiBg: {position:"fixed",inset:0,backgroundImage:"radial-gradient(ellipse at 20% 50%,rgba(44,204,102,0.04) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(44,102,204,0.04) 0%,transparent 60%)",pointerEvents:"none"}, orb1: {position:"fixed",top:-100,left:-100,width:400,height:400,background:"radial-gradient(circle,rgba(44,204,102,0.06) 0%,transparent 70%)",pointerEvents:"none"}, orb2: {position:"fixed",bottom:-150,right:-100,width:500,height:500,background:"radial-gradient(circle,rgba(44,102,204,0.06) 0%,transparent 70%)",pointerEvents:"none"}, orb3: {position:"fixed",top:"40%",left:"60%",width:300,height:300,background:"radial-gradient(circle,rgba(200,160,32,0.04) 0%,transparent 70%)",pointerEvents:"none"}, toast: {position:"fixed",top:20,left:"50%",transform:"translateX(-50%)",zIndex:9999,padding:"10px 20px",borderRadius:8,fontSize:14,color:"#fff",fontWeight:"bold",boxShadow:"0 4px 16px rgba(0,0,0,0.5)"}, header: {background:"rgba(5,8,16,0.95)",backdropFilter:"blur(10px)",borderBottom:"1px solid rgba(44,204,102,0.1)",position:"sticky",top:0,zIndex:100}, headerInner: {maxWidth:1100,margin:"0 auto",padding:"12px 20px",display:"flex",alignItems:"center",justifyContent:"space-between",gap:12,flexWrap:"wrap"}, brand: {display:"flex",alignItems:"center",gap:10,cursor:"pointer"}, brandBall: {fontSize:24}, brandTitle: {fontSize:16,fontWeight:"bold",color:"#2ecc66",letterSpacing:2}, brandSub: {fontSize:10,color:"#446",letterSpacing:1}, headerRight: {display:"flex",alignItems:"center",gap:10,flexWrap:"wrap"}, rulesBtn: {background:"rgba(255,255,255,0.05)",border:"1px solid rgba(255,255,255,0.1)",color:"#889",borderRadius:6,padding:"6px 12px",fontSize:12,cursor:"pointer"}, nav: {display:"flex",gap:4}, navBtn: {background:"transparent",border:"1px solid transparent",color:"#446",borderRadius:6,padding:"6px 12px",fontSize:12,cursor:"pointer",transition:"all 0.15s"}, navActive: {background:"rgba(44,204,102,0.1)",border:"1px solid rgba(44,204,102,0.3)",color:"#2ecc66"}, main: {maxWidth:1100,margin:"0 auto",padding:"24px 16px"}, homeWrap: {display:"flex",flexDirection:"column",gap:24}, heroSection: {textAlign:"center",padding:"32px 0 16px"}, heroTitle: {fontSize:28,fontWeight:"bold",color:"#2ecc66",letterSpacing:3,marginBottom:8}, heroSub: {fontSize:14,color:"#446",marginBottom:8}, heroCountdown:{fontSize:13,color:"#667"}, miniLeader: {background:"rgba(255,255,255,0.02)",border:"1px solid rgba(44,204,102,0.1)",borderRadius:10,padding:"14px 18px"}, miniLeaderGrid:{display:"flex",flexDirection:"column",gap:6,marginTop:8}, miniLeaderCard:{display:"flex",alignItems:"center",gap:10,background:"rgba(0,0,0,0.3)",borderRadius:6,padding:"6px 10px",fontSize:13}, sectionLabel: {fontSize:10,letterSpacing:3,color:"#334",textTransform:"uppercase",marginBottom:8}, playerGrid: {display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(160px,1fr))",gap:16}, playerCard: {position:"relative",borderRadius:14,padding:"20px 14px",cursor:"pointer",transition:"transform 0.15s,box-shadow 0.15s",display:"flex",flexDirection:"column",alignItems:"center",gap:6,overflow:"hidden"}, playerBadge: {position:"absolute",top:8,right:8,fontSize:8,letterSpacing:1,padding:"2px 6px",borderRadius:3,fontWeight:"bold"}, playerEmoji: {fontSize:28}, playerName: {fontSize:16,fontWeight:"bold",letterSpacing:1}, playerLabel: {fontSize:10,letterSpacing:1}, playerScore: {fontSize:18,fontWeight:"bold"}, playerTagline:{fontSize:10,fontStyle:"italic",textAlign:"center"}, picksWrap: {position:"relative",borderRadius:14,padding:"20px",border:"2px solid",overflow:"hidden",background:"linear-gradient(160deg, rgba(42, 26, 0, 0.26), rgba(26, 42, 10, 0.4))"}, picksHeader: {display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16,gap:12,flexWrap:"wrap"}, backBtn: {background:"rgba(255,255,255,0.05)",border:"1px solid rgba(255,255,255,0.1)",color:"#667",borderRadius:6,padding:"6px 12px",fontSize:12,cursor:"pointer"}, picksTitle: {fontSize:18,fontWeight:"bold"}, saveBtn: {border:"none",borderRadius:8,padding:"10px 18px",fontSize:13,fontWeight:"bold",cursor:"pointer",transition:"opacity 0.15s"}, roundTabs: {display:"flex",gap:6,marginBottom:16,flexWrap:"wrap"}, roundTab: {background:"rgba(255,255,255,0.03)",border:"1px solid rgba(255,255,255,0.08)",color:"#446",borderRadius:6,padding:"6px 12px",fontSize:11,cursor:"pointer"}, roundTabActive:{background:"rgba(44,204,102,0.1)",border:"1px solid rgba(44,204,102,0.3)",color:"#2ecc66"}, gbWrap: {background:"rgba(0,0,0,0.3)",borderRadius:8,border:"1px solid",padding:"10px 14px",flex:1,minWidth:200,maxWidth:360}, gbTitle: {fontSize:12,fontWeight:"bold"}, gbSub: {fontSize:10,color:"#446"}, gbSelect: {width:"100%",background:"#0a0a14",border:"1px solid #1a3a1a",color:"#aac",borderRadius:6,padding:"6px 8px",fontSize:12,marginTop:4}, groupBlock: {marginBottom:20,background:"rgba(255,255,255,0.02)",borderRadius:10,padding:"12px 14px"}, groupLabel: {fontSize:10,letterSpacing:3,color:"#334",marginBottom:8}, dateHeader: {fontSize:11,letterSpacing:2,color:"#99aabb",background:"rgba(255,255,255,0.03)",border:"1px solid rgba(255,255,255,0.06)",borderRadius:6,padding:"5px 10px",marginBottom:6,display:"inline-block"}, grpBadge: {fontSize:9,letterSpacing:1,color:"#aacc44",background:"rgba(170,204,68,0.12)",border:"1px solid rgba(170,204,68,0.25)",borderRadius:4,padding:"2px 6px",whiteSpace:"nowrap",flexShrink:0}, gameRow: {display:"flex",alignItems:"center",gap:8,padding:"8px 0",borderBottom:"1px solid rgba(255,255,255,0.04)"}, teamName: {fontSize:12,color:"#aac",minWidth:80,flex:1}, btnGroup: {display:"flex",gap:4}, pickBtn: {borderRadius:5,padding:"5px 10px",fontSize:11,fontWeight:"bold",cursor:"pointer",transition:"all 0.1s",minWidth:36}, koGameRow: {background:"rgba(255,255,255,0.02)",borderRadius:10,padding:"14px",marginBottom:10,border:"1px solid rgba(255,255,255,0.06)"}, koTeam: {fontSize:13,color:"#aac"}, koPickBtn: {display:"block",width:"100%",borderRadius:6,padding:"7px 10px",fontSize:11,cursor:"pointer",marginBottom:4,textAlign:"left"}, lbWrap: {display:"flex",flexDirection:"column",gap:10}, lbCard: {borderRadius:12,padding:"14px 18px",cursor:"pointer",transition:"transform 0.1s"}, lbName: {fontSize:16,fontWeight:"bold"}, lbScore: {fontSize:24,fontWeight:"bold"}, revealWrap: {display:"flex",flexDirection:"column",gap:16}, pageTitle: {fontSize:20,fontWeight:"bold",color:"#2ecc66",letterSpacing:2,marginBottom:8}, th: {padding:"6px 10px",color:"#334",fontSize:11,letterSpacing:1,textAlign:"center",fontWeight:"normal"}, td: {padding:"6px 10px",fontSize:12}, adminGate: {display:"flex",alignItems:"center",justifyContent:"center",minHeight:300}, adminCard: {background:"rgba(255,255,255,0.03)",border:"1px solid rgba(255,200,68,0.2)",borderRadius:12,padding:"30px 40px",textAlign:"center",display:"flex",flexDirection:"column",gap:12,minWidth:260}, adminInput: {background:"#0a0a14",border:"1px solid #1a3a1a",color:"#aac",borderRadius:6,padding:"8px 12px",fontSize:14,outline:"none",width:"100%"}, adminWrap: {maxWidth:800}, adminSectionTitle:{fontSize:13,color:"#99aabb",letterSpacing:2,marginBottom:12,textTransform:"uppercase"}, modalOverlay: {position:"fixed",inset:0,background:"rgba(0,0,0,0.8)",zIndex:200,display:"flex",alignItems:"center",justifyContent:"center",padding:16}, modalBox: {background:"#0a0a14",borderRadius:14,padding:"28px 24px",textAlign:"center",maxWidth:360,width:"100%",display:"flex",flexDirection:"column",gap:8,boxShadow:"0 20px 60px rgba(0,0,0,0.8)"}, }; // Mount ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));