@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800;900&family=DM+Sans:wght@400;600;700&display=swap');
:root{--night:#050b17;--navy:#071426;--cyan:#65f4ff;--volt:#d7ff38;--white:#f4f8fb;--muted:#8fa0b5;--orange:#ff6b35}body{background:radial-gradient(circle at 50% -15%,#183e59 0,#081526 38%,#030914 100%);font-family:'DM Sans',sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#65f4ff08 1px,transparent 1px),linear-gradient(#65f4ff08 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,#0008,transparent 50%)}header{height:76px;background:#020812aa;backdrop-filter:blur(14px);border-bottom:1px solid #65f4ff22}.brand{font-family:'Barlow Condensed',sans-serif;font-size:20px}.connection.live{color:var(--cyan);text-shadow:0 0 12px #65f4ff}.intro{padding:30px 0 20px}.intro>p{color:var(--cyan);margin-bottom:8px}h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(52px,8vw,86px);text-transform:uppercase;letter-spacing:-.045em;margin:0}h1 em{font-family:inherit;font-style:normal;color:transparent;-webkit-text-stroke:1px var(--volt);text-shadow:0 0 30px #d7ff3822}.room b{color:white}.game{border:1px solid #65f4ff22;border-radius:24px;background:#071426;box-shadow:0 45px 120px #000b,0 0 50px #65f4ff0b}.score{height:86px;background:#081729;color:var(--white);border-bottom:1px solid #65f4ff22}.player span{color:var(--muted)}.player strong{font-family:'Barlow Condensed';color:white}.player small{color:#446078}.player.you:after{background:var(--cyan);color:#02101a}.vs{font-family:'Barlow Condensed';font-weight:900;color:var(--orange)}
.pitch{height:390px;background:linear-gradient(to bottom,#050c18 0 22%,#105c43 22%,#0b8a53 100%);perspective:850px;transform-style:preserve-3d;transition:none}.stands{height:88px;background:radial-gradient(circle at 10% 55%,#65f4ff 0 1px,transparent 2px),radial-gradient(circle at 45% 45%,#ff6b35 0 1px,transparent 2px),radial-gradient(circle at 80% 50%,#d7ff38 0 1px,transparent 2px),linear-gradient(#030712,#091526);background-size:19px 18px,23px 19px,21px 17px,auto;display:flex;align-items:center;justify-content:center}.stands span{font:900 11px 'Barlow Condensed';letter-spacing:.45em;color:#ffffff22}.field-lines{position:absolute;inset:88px 0 0;background:linear-gradient(90deg,transparent 49.8%,#ffffff35 50%,transparent 50.2%),repeating-linear-gradient(90deg,#ffffff05 0 90px,#00000005 90px 180px);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%)}.field-lines:after{content:"";position:absolute;width:260px;height:100px;border:2px solid #ffffff55;border-radius:50%;left:calc(50% - 130px);bottom:18px}.goal{width:58%;height:190px;left:21%;top:72px;border:9px solid #f9fdff;filter:drop-shadow(0 0 8px #65f4ff55);z-index:4}.net{background:repeating-linear-gradient(90deg,transparent 0 34px,#ffffff38 35px 36px),repeating-linear-gradient(0deg,transparent 0 27px,#ffffff38 28px 29px)}.keeper{top:143px;left:calc(50% - 25px);width:50px;height:104px;z-index:6}.keeper i{width:24px;height:24px;background:#cb8b60}.keeper b{width:37px;height:66px;background:linear-gradient(135deg,var(--orange),#ff305c)}.keeper u{position:absolute;width:105px;height:10px;background:linear-gradient(90deg,#ffbc84,#ffdfc7,#ffbc84);left:-28px;top:46px;border-radius:10px}.striker{position:absolute;left:calc(50% - 14px);bottom:50px;width:28px;z-index:3}.striker i{display:block;width:17px;height:17px;background:#bb7951;border-radius:50%;margin:auto}.striker b{display:block;width:25px;height:40px;background:#f2f5f6;border-radius:5px 5px 2px 2px}.ball{display:block;opacity:1;width:17px;height:17px;bottom:42px}.spot{bottom:42px;background:#ffffff55}.camera{font-family:'Barlow Condensed';font-weight:800;color:var(--cyan);border-color:#65f4ff66;background:#020812dd}
.aim-grid,.dive-grid{display:none;position:absolute;inset:0;z-index:10}.aim-grid.active{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.aim-grid button{position:relative;border:1px solid #65f4ff3a;background:#02101a12;color:white;transition:.16s;cursor:crosshair}.aim-grid button:after{content:attr(aria-label);opacity:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;background:#020812d9;border:1px solid var(--cyan);border-radius:15px;padding:5px 8px;font:800 10px 'Barlow Condensed';letter-spacing:.08em}.aim-grid button:hover{background:#65f4ff28;box-shadow:inset 0 0 35px #65f4ff28}.aim-grid button:hover:after{opacity:1}.aim-grid:before{content:"MOVE THE MOUSE OVER A ZONE - CLICK TO SHOOT";position:absolute;bottom:-31px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--cyan);font:800 10px 'Barlow Condensed';letter-spacing:.12em}.dive-grid.active{display:grid;grid-template-columns:repeat(3,1fr)}.dive-grid button{border:1px solid #d7ff383d;background:#d7ff3809;color:transparent;cursor:crosshair}.dive-grid button:hover{background:#d7ff3835;box-shadow:inset 0 0 45px #d7ff3830}.dive-grid button:after{content:attr(aria-label);color:var(--volt);font:900 12px 'Barlow Condensed';letter-spacing:.1em;opacity:.55}.dive-grid button:hover:after{opacity:1}.status{background:#061321;border-top:1px solid #65f4ff18}.status p{color:var(--cyan)}.status h2{font-family:'Barlow Condensed';font-size:24px;text-transform:uppercase;letter-spacing:.02em}.timer{font-family:'Barlow Condensed';color:var(--volt)}.controls{background:#0a1a2b;color:#b8c7d7;min-height:64px;border-top:1px solid #ffffff0d}.controls h3{color:white}.waiting{color:#8295a8}.result{background:#020812}.result b{font-family:'Barlow Condensed';color:var(--volt);font-size:34px}aside{color:#8295a8}aside h3{color:var(--cyan)}
.pitch.keeper-view{transform:none;background:linear-gradient(to bottom,#07111f 0 20%,#0d6c48 20%,#096a46 100%)}.pitch.keeper-view .stands{height:74px}.pitch.keeper-view .field-lines{inset:74px 0 0;clip-path:polygon(42% 0,58% 0,95% 100%,5% 100%)}.pitch.keeper-view .goal{width:88%;height:250px;left:6%;top:125px;transform:perspective(600px) rotateX(-7deg);border-width:11px;filter:drop-shadow(0 0 14px #65f4ff55)}.pitch.keeper-view .net{background:repeating-linear-gradient(90deg,transparent 0 55px,#ffffff28 56px 58px),repeating-linear-gradient(0deg,transparent 0 39px,#ffffff28 40px 42px)}.pitch.keeper-view .keeper{display:none}.pitch.keeper-view .striker{bottom:auto;top:102px;transform:scale(.62)}.pitch.keeper-view .ball{bottom:auto;top:148px;transform:scale(.72)}.pitch.keeper-view .camera{display:block;top:84px}.pitch.keeper-view .dive-grid{transform:none}.pitch.keeper-view .aim-grid{display:none!important}
@media(max-width:620px){.pitch{height:320px}.goal{height:155px;top:75px}.keeper{top:132px}.pitch.keeper-view .goal{height:190px;top:120px}.aim-grid:before{font-size:8px}.status h2{font-size:19px}}