:root{--blue:#0876c9;--navy:#073a67;--green:#13a55a;--red:#d62828;--gold:#ffbf00;--ink:#132238;--card:rgba(255,255,255,.96)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;background:linear-gradient(180deg,#063762,#0b76b7);color:var(--ink);overscroll-behavior:none}button,input{font:inherit}.screen{display:none;min-height:100dvh;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));align-items:center;justify-content:center}.screen.active{display:flex;flex-direction:column}.home-screen{gap:12px}.hero-card,.card{width:min(680px,100%);border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.25)}.hero-card{position:relative;background:#000}.splash{display:block;width:100%;height:clamp(180px,34vh,300px);object-fit:cover}.hero-overlay{position:absolute;inset:auto 0 0;padding:22px 18px 14px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.76));text-align:center}.hero-overlay h1{margin:0;font-size:clamp(28px,7vw,44px)}.hero-overlay p{margin:4px 0 0;font-weight:700}.card{background:var(--card);padding:18px}.card h2{margin:0 0 14px;text-align:center}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.role-btn{padding:0 0 12px;border:3px solid transparent;border-radius:20px;background:#f4f8fc;overflow:hidden;color:var(--ink)}.role-btn.selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,191,0,.25)}.role-btn img{width:100%;height:140px;object-fit:cover;object-position:center 38%;display:block}.role-btn strong,.role-btn span{display:block;margin-top:8px}.role-btn span{font-size:12px;color:#5b6b7b}.hint{text-align:center;color:#5a6b7d}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.primary,.secondary,.ghost{border:0;border-radius:16px;padding:14px;font-weight:800}.primary{background:linear-gradient(#ffcb2f,#ffac00);color:#2e2500}.secondary{background:linear-gradient(#1e9be5,#0876c9);color:#fff}.ghost{width:100%;margin-top:10px;background:#e8eef4;color:#294359}.primary:disabled,.secondary:disabled,.ghost:disabled{opacity:.45}.center{text-align:center}.status-dot{width:16px;height:16px;border-radius:50%;background:#f1a400;margin:2px auto 12px;box-shadow:0 0 0 6px rgba(241,164,0,.15)}.code-wrap{background:#eef7ff;border:2px dashed #68aee0;border-radius:18px;padding:14px}.code-wrap span,.code-wrap strong{display:block}.code-wrap strong{font-size:46px;letter-spacing:7px;color:var(--navy)}.tiny{border:0;border-radius:12px;padding:8px 12px;background:#edf2f7;color:#294359;font-weight:700}.join-wrap{display:grid;gap:10px}.join-wrap input{font-size:28px;text-align:center;letter-spacing:6px;border:2px solid #b4c8da;border-radius:16px;padding:12px}.hidden{display:none!important}.players-ready{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.players-ready div{background:#f5f8fb;border-radius:14px;padding:12px;display:flex;justify-content:space-between}.players-ready b{font-size:22px;color:#a5b1bb}.players-ready b.on{color:var(--green)}
.game-screen{padding:0;justify-content:stretch;background:#0a5b93}.scorebar{width:100%;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;padding:max(10px,env(safe-area-inset-top)) 10px 10px;background:rgba(2,25,47,.9);color:#fff;z-index:3}.player-score{border-radius:15px;padding:8px 10px}.player-score.red{background:linear-gradient(135deg,#8f1414,#d62828)}.player-score.green{background:linear-gradient(135deg,#08783e,#12a65a)}.player-score span{font-weight:800}.player-score b{float:left;font-size:28px}.shot-dots{display:flex;gap:4px;margin-top:5px}.shot-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35)}.shot-dots i.goal{background:#6df46d}.shot-dots i.miss{background:#111}.roundbox{text-align:center;background:#fff;color:var(--navy);border-radius:14px;padding:7px 12px;min-width:64px}.roundbox small,.roundbox strong{display:block}.roundbox strong{font-size:24px}.stadium{position:relative;flex:1;width:100%;overflow:hidden;background:radial-gradient(circle at 50% 10%,#7bd8ff 0,#208ec6 25%,#095083 55%,#06345d 100%)}.stadium:before{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:46%;background:repeating-linear-gradient(90deg,#16834b 0 70px,#1d9554 70px 140px);transform:perspective(600px) rotateX(23deg);transform-origin:bottom}.goal{position:absolute;left:50%;top:12%;transform:translateX(-50%);width:min(78vw,560px);height:min(38vh,330px);border:10px solid #fff;border-bottom-width:12px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.35);z-index:1}.net{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.36) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.36) 1px,transparent 1px);background-size:24px 24px}.character{position:absolute;z-index:2;transition:transform .4s ease}.character img{width:100%;height:100%;object-fit:cover;border-radius:24px;filter:drop-shadow(0 12px 12px rgba(0,0,0,.3))}.keeper{width:clamp(105px,25vw,180px);height:clamp(150px,34vw,240px);left:50%;top:19%;transform:translateX(-50%)}.shooter{width:clamp(100px,24vw,170px);height:clamp(150px,35vw,240px);right:8%;bottom:4%}.ball{position:absolute;z-index:5;left:50%;bottom:8%;transform:translateX(-50%);font-size:clamp(44px,14vw,86px);touch-action:none;user-select:none;filter:drop-shadow(0 8px 4px rgba(0,0,0,.3));transition:left .45s ease,top .45s ease,bottom .45s ease,transform .45s ease}.aim-guide,.waiting{position:absolute;z-index:6;left:50%;bottom:1.5%;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;padding:8px 14px;border-radius:999px;font-size:13px;white-space:nowrap}.keeper-controls{position:absolute;z-index:7;bottom:3%;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,58px);gap:7px;justify-items:center}.keeper-controls button{width:58px;height:54px;border:0;border-radius:16px;background:rgba(255,255,255,.92);font-size:28px;box-shadow:0 6px 15px rgba(0,0,0,.25)}.keeper-controls button:nth-of-type(4){grid-column:1}.keeper-controls button:nth-of-type(5){grid-column:3}.keeper-controls small{grid-column:1/4;background:rgba(0,0,0,.62);color:#fff;padding:6px 10px;border-radius:99px}.callout{position:absolute;z-index:10;left:50%;top:48%;transform:translate(-50%,-50%);padding:16px 22px;background:#fff;border:5px solid var(--gold);border-radius:24px;font-size:clamp(22px,7vw,40px);font-weight:900;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.35)}.game-footer{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px max(8px,env(safe-area-inset-bottom));background:#062c4d;color:#fff}.danger{background:#6d1010;color:#fff}.celebrate-sepanta{animation:jump .9s ease-in-out 2}.celebrate-baba{animation:flip 1.05s ease-in-out 1}.dive-TL{transform:translate(-120%,-35%) rotate(-22deg)!important}.dive-TR{transform:translate(20%,-35%) rotate(22deg)!important}.dive-BL{transform:translate(-120%,25%) rotate(-36deg)!important}.dive-BR{transform:translate(20%,25%) rotate(36deg)!important}.dive-C{transform:translate(-50%,-18%) scale(1.1)!important}@keyframes jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-110px) scale(1.06)}}@keyframes flip{0%{transform:translate(0,0) rotate(0)}45%{transform:translate(-40px,-100px) rotate(180deg)}100%{transform:translate(0,0) rotate(360deg)}}.confetti span,.result-confetti span{position:absolute;width:10px;height:18px;background:hsl(var(--h),90%,55%);top:-30px;animation:fall var(--d) linear forwards;transform:rotate(var(--r))}@keyframes fall{to{transform:translate(var(--x),115vh) rotate(800deg)}}
.result-screen{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 25%,#37aef1,#073a67)}.winner-card{position:relative;z-index:2;width:min(520px,92vw);text-align:center;background:#fff;border-radius:28px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.35);animation:winnerIn .7s cubic-bezier(.2,.9,.2,1.2)}.winner-card h1{font-size:40px;margin:0 0 8px}.winner-card img{width:min(75vw,330px);height:330px;object-fit:cover;object-position:center 35%;border-radius:30px}.winner-card h2{font-size:36px;margin:8px 0}.winner-card p{font-size:28px;font-weight:900}.result-confetti{position:absolute;inset:0;z-index:1;pointer-events:none}@keyframes winnerIn{from{transform:translateY(70px) scale(.8);opacity:0}to{transform:none;opacity:1}}@media(max-width:520px){.screen{padding-left:10px;padding-right:10px}.role-btn img{height:115px}.card{padding:14px}.goal{top:14%;height:31vh}.keeper{top:20%}.shooter{bottom:6%}}

/* PRO v2 additions */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-btn{border:3px solid transparent;border-radius:18px;padding:14px 10px;background:#f3f7fb;color:var(--ink);text-align:center}.mode-btn strong,.mode-btn span{display:block}.mode-btn strong{font-size:18px}.mode-btn span{font-size:11px;line-height:1.6;margin-top:5px;color:#607080}.mode-btn.selected{border-color:#ffbf00;background:#fff9df;box-shadow:0 0 0 3px rgba(255,191,0,.22)}.room-mode{display:inline-block;background:#eaf5ff;color:#07568c;border-radius:999px;padding:7px 12px;font-weight:900;margin:-4px 0 12px}.roundbox em{display:block;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.7px;background:#063762;color:#fff;border-radius:999px;padding:2px 6px;margin-top:2px}.pro-hud{position:absolute;z-index:8;top:1.5%;left:50%;transform:translateX(-50%);width:min(92vw,520px);display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px;direction:rtl}.pro-hud>div{background:rgba(4,31,55,.82);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(5px);border-radius:12px;padding:6px 8px;text-align:center}.pro-hud span,.pro-hud b{display:block;font-size:10px}.pro-hud b{font-size:12px;margin-top:2px}.pro-hud i{display:block;height:5px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden;margin-top:4px}.pro-hud u{display:block;width:0;height:100%;background:linear-gradient(90deg,#4ddc7d,#ffd84a,#ff5b52);border-radius:99px;text-decoration:none;transition:width .2s}.keeper-controls{grid-template-columns:repeat(3,58px)}.keeper-controls button:nth-of-type(4),.keeper-controls button:nth-of-type(5),.keeper-controls button:nth-of-type(6){grid-column:auto}.keeper-controls small{grid-column:1/4}.dive-TC{transform:translate(-50%,-35%) scale(1.08)!important}.dive-BC{transform:translate(-50%,25%) scale(1.08)!important}@media(max-width:520px){.mode-grid{grid-template-columns:1fr}.pro-hud{top:1%;width:96vw}.pro-hud>div{padding:5px 6px}.goal{top:17%}.keeper{top:22%}}