:root{--cream:#f4eee4;--lime:#d9ff36;--orange:#ffc24a;--red:#ff5945;--ink:#0e2a23}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 0,#235745,#0b2721 48%);color:var(--cream);font:14px Arial,sans-serif;min-height:100vh}button{font:inherit;font-weight:800;cursor:pointer}header{height:70px;border-bottom:1px solid #ffffff20;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{color:white;text-decoration:none;font-weight:900;letter-spacing:.1em}.brand:first-letter{color:var(--lime)}header button{border:1px solid #ffffff55;border-radius:24px;background:transparent;color:white;padding:10px 16px}.connection{font-size:10px;letter-spacing:.16em;color:#a4b4ae}.connection.live{color:var(--lime)}main{width:min(900px,94vw);margin:auto}.intro{text-align:center;padding:38px 0 24px}.intro>p{font-size:10px;font-weight:bold;letter-spacing:.18em;color:var(--lime)}h1{font-size:clamp(36px,7vw,68px);line-height:.95;margin:12px 0;letter-spacing:-.06em}h1 em{color:var(--orange);font-family:Georgia,serif;font-weight:400}.room{font-size:10px;letter-spacing:.15em;color:#b8c8c1}.game{border-radius:18px;overflow:hidden;box-shadow:0 28px 80px #0005}.score{height:100px;background:var(--cream);color:var(--ink);display:flex;justify-content:center;align-items:center;gap:42px}.player{text-align:center;width:180px;position:relative}.player span{display:block;font-size:10px;letter-spacing:.15em;font-weight:bold}.player strong{font:700 46px Georgia}.player small{display:block;color:#9bada6;letter-spacing:4px}.player.you:after{content:"YOU";position:absolute;right:4px;top:2px;background:var(--lime);padding:3px 7px;border-radius:10px;font-size:9px}.vs{color:var(--red);font-family:Georgia}.pitch{height:300px;background:linear-gradient(90deg,#237c44,#319851,#237c44);position:relative;overflow:hidden;transition:transform .25s}.stands{height:56px;background:linear-gradient(90deg,#182d27,#634047,#1b392f,#6b4545,#183129)}.goal{position:absolute;width:54%;height:145px;left:23%;top:34px;border:8px solid white;border-bottom:0}.net{height:100%;background:repeating-linear-gradient(90deg,transparent 0 23px,#ffffff55 24px 25px),repeating-linear-gradient(0deg,transparent 0 20px,#ffffff55 21px 22px)}.keeper{position:absolute;left:calc(50% - 22px);top:97px;width:44px;height:84px;z-index:3}.keeper i{display:block;width:21px;height:21px;border-radius:50%;background:#e4a174;margin:auto}.keeper b{display:block;width:31px;height:56px;border-radius:8px;background:var(--red);margin:auto}.spot{position:absolute;width:10px;height:10px;border-radius:50%;background:white;bottom:42px;left:calc(50% - 5px)}.camera{display:none;position:absolute;top:10px;left:50%;transform:translateX(-50%);background:#0b2721dd;color:var(--lime);border:1px solid #d9ff3677;border-radius:18px;padding:6px 10px;font-size:9px;letter-spacing:.1em;z-index:6}.pitch.keeper-view{transform:rotateY(180deg)}.pitch.keeper-view .camera{display:block;transform:translateX(-50%) rotateY(180deg)}.status{background:#133c32;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.status p{margin:0 0 5px;color:var(--lime);font-size:10px;font-weight:bold;letter-spacing:.12em}.status h2{font-size:18px;margin:0}.timer{font:800 38px Georgia;color:var(--lime)}.controls{background:var(--cream);color:var(--ink);padding:22px;text-align:center}.controls h3{font-size:11px;letter-spacing:.15em;margin:0 0 14px}.grid{display:flex;justify-content:center;gap:10px}.choice{display:grid;gap:6px}.choice button,.dive button{border:0;border-radius:8px;background:#17493b;color:white;padding:11px 17px;min-width:105px}.choice button:first-child{background:var(--red)}.choice label{font-size:9px;text-transform:uppercase;letter-spacing:.13em}.dive button{padding:15px 22px}.waiting{color:#526a61;padding:5px}.result{text-align:center;background:#091f1a;padding:17px}.result b{font-size:27px;color:var(--lime)}.result p{margin:5px 0 0;text-transform:uppercase;font-size:10px;letter-spacing:.12em}.hidden{display:none}aside{margin:24px 0 50px;display:flex;align-items:center;gap:25px;color:#b7c6bf}aside h3{color:var(--lime);font-size:10px;letter-spacing:.15em}aside div{display:flex;gap:9px;max-width:310px}aside b{font-size:10px;color:white}aside span{font-size:11px;line-height:1.4}@media(max-width:620px){header{padding:0 14px}.connection{display:none}.intro{padding-top:25px}.score{gap:8px}.player{width:125px}.pitch{height:250px}.goal{height:125px}.grid{gap:5px}.choice button,.dive button{min-width:84px;padding:10px 7px}.status{padding:15px}.status h2{font-size:15px}aside{display:block}.game{border-radius:12px}}