:root{--navy:#082655;--blue:#18a9ec;--orange:#ff7a16;--team:#ff7a16;--team2:#18a9ec}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Trebuchet MS",Arial,sans-serif;color:var(--navy);background:#2bb7ed}button{font:inherit}.screen{min-height:100svh}.home-screen{padding:clamp(18px,4vw,55px);background:linear-gradient(145deg,#073a78,#0b71c7 55%,#22b9ed);color:#fff;overflow:hidden}.hub-header{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;min-height:45vh}.hub-header h1{font-size:clamp(50px,8vw,105px);line-height:.85;margin:10px 0;text-shadow:0 7px 0 #052b5b}.hub-header h1 strong{color:#ffad18;-webkit-text-stroke:3px white}.hub-header p{font-size:clamp(18px,2.4vw,30px);font-weight:800}.hub-header img{width:min(48vw,620px);margin-right:-8vw;filter:drop-shadow(0 20px 18px #041a3f55)}.eyebrow{font-weight:900;letter-spacing:2px;color:#aee9ff}.game-grid{position:relative;z-index:2;max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.game-tile{min-height:210px;border:5px solid #ffffff80;border-radius:30px;padding:20px;color:#fff;background:#ffffff18;display:flex;flex-direction:column;align-items:flex-start;text-align:left;backdrop-filter:blur(6px)}.game-tile.active{cursor:pointer;background:linear-gradient(145deg,#ff9b1d,#f15b0a);box-shadow:0 10px 0 #b53a02;border-color:white}.game-tile.active:active{transform:translateY(6px);box-shadow:0 4px 0 #b53a02}.game-icon{font-size:52px}.game-tile small{font-weight:900;letter-spacing:1px}.game-tile strong{font-size:25px;margin-top:8px}.game-tile em{margin-top:auto;background:white;color:#d95105;padding:8px 13px;border-radius:11px;font-style:normal;font-weight:900}.locked{opacity:.6}.install-btn{display:block;margin:28px auto 0;border:3px solid #fff;border-radius:16px;background:#0a315f;color:#fff;padding:13px 22px;font-weight:900;cursor:pointer}.game-screen{background:linear-gradient(#24b7f5 0 34%,#197bbb 34% 50%,#39b84e 50%);padding-bottom:30px}.game-top{height:105px;display:flex;align-items:center;justify-content:space-between;padding:12px clamp(12px,4vw,50px);color:white}.back-btn{border:3px solid white;background:#0b579d;color:white;border-radius:50%;width:45px;height:45px;font-size:33px;cursor:pointer}.logo{display:flex;flex-direction:column;align-items:center}.logo b{font-size:clamp(34px,6vw,70px);line-height:.8;color:#ff9a12;-webkit-text-stroke:3px white;text-shadow:0 5px 0 #b84500}.logo span{font-size:clamp(8px,1.4vw,16px);font-weight:900;margin-top:10px;background:#0b4f9c;border:3px solid white;border-radius:12px;padding:5px 10px}.score{display:flex;gap:13px;align-items:center;background:#082655;border:3px solid white;border-radius:18px;padding:9px 13px;font-size:18px;font-weight:900}.score button{border:0;background:none;cursor:pointer}.setup-card{width:min(750px,94vw);margin:40px auto;background:#f8fcff;border:7px solid white;outline:5px solid #63bce7;border-radius:35px;padding:25px;text-align:center;box-shadow:0 12px 0 #0877b4,0 22px 45px #07244b55}.setup-card h2{font-size:clamp(28px,4vw,44px);margin:7px}.setup-card p{margin:14px 0 8px;color:#58728b;font-weight:900}.choice-grid{display:grid;gap:10px}.ops{grid-template-columns:repeat(4,1fr)}.levels{grid-template-columns:repeat(3,1fr)}.choice-grid button{border:3px solid #c4dfea;border-radius:16px;background:#edf8ff;color:#315476;padding:12px 5px;font-weight:900;cursor:pointer}.choice-grid button.selected{background:#fff3c5;border-color:#ffad18;color:#b54e00;box-shadow:0 4px 0 #e48600;transform:translateY(-2px)}.ops span{display:block;font-size:12px}.kits{display:flex;justify-content:center;gap:12px}.kits button{border:3px solid #c7dfe9;border-radius:13px;background:white;padding:5px;cursor:pointer}.kits button.selected{border-color:#ff8a13;box-shadow:0 4px 0 #dc6500;transform:translateY(-2px)}.kits i{display:block;width:36px;height:36px;border-radius:8px}.orange{background:linear-gradient(135deg,#ff7a16 58%,#18a9ec 59%)}.blue{background:linear-gradient(135deg,#1877e8 58%,#fff 59%)}.red{background:linear-gradient(135deg,#e52d3f 58%,#fff 59%)}.green{background:linear-gradient(135deg,#16a05d 58%,#ffe348 59%)}.purple{background:linear-gradient(135deg,#7837c7 58%,#ffd33d 59%)}.primary{margin-top:22px;border:4px solid white;outline:3px solid #ffb128;background:linear-gradient(#ff971e,#ff6410);color:white;text-shadow:0 2px 0 #a93600;box-shadow:0 7px 0 #bd3900;border-radius:18px;padding:13px 32px;font-size:19px;font-weight:900;cursor:pointer}.primary:active{transform:translateY(5px);box-shadow:0 2px 0 #bd3900}.best{display:block;margin-top:14px;font-weight:900;color:#657f96}.match{width:min(1120px,97vw);margin:0 auto}.match-hud{width:max-content;max-width:95vw;margin:3px auto 9px;display:flex;align-items:center;gap:15px;background:#082655;color:white;border:3px solid white;border-radius:16px;padding:7px 15px;font-weight:900;font-size:11px}.match-hud strong{color:#ffd43b;font-size:15px}.bar{width:150px;height:8px;background:#315987;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;width:10%;background:#5bd25c;transition:.3s}.pitch{position:relative;height:min(49vh,450px);overflow:hidden;border:7px solid white;border-radius:28px;background:repeating-linear-gradient(90deg,#35b955 0 100px,#42c561 100px 200px);box-shadow:0 10px 0 #087431}.pitch:before{content:"";position:absolute;inset:4%;border:4px solid #ffffffaa}.field-lines:before{content:"";position:absolute;left:50%;top:4%;bottom:4%;border-left:4px solid #ffffffaa}.field-lines:after{content:"";position:absolute;left:50%;top:50%;width:130px;height:130px;border:4px solid #ffffffaa;border-radius:50%;transform:translate(-50%,-50%)}.goal{position:absolute;right:3%;top:24%;width:16%;height:52%;border:7px solid white;border-right:0;background:repeating-linear-gradient(45deg,transparent 0 13px,#e7f7ff99 14px 16px)}.goalie{position:absolute;left:24%;top:50%;transform:translateY(-50%);font-size:45px;display:flex;flex-direction:column;align-items:center;transition:.8s}.goalie small{font-size:7px;background:#082655;color:white;padding:3px;border-radius:5px}.player{position:absolute;width:70px;height:76px;z-index:3;transition:1s cubic-bezier(.2,.8,.2,1)}.player .shirt{position:absolute;left:4px;top:18px;width:62px;height:55px;display:grid;place-items:center;background:linear-gradient(90deg,var(--team) 0 68%,var(--team2) 69%);border:4px solid white;clip-path:polygon(18% 0,32% 9%,68% 9%,82% 0,100% 24%,86% 42%,82% 100%,18% 100%,14% 42%,0 24%);filter:drop-shadow(0 5px 3px #06492466)}.player .shirt b{font-size:21px;color:white;text-shadow:0 2px 0 #0007}.player em{position:absolute;z-index:2;left:23px;top:0;width:25px;height:25px;border-radius:50%;background:#d98d5b;border:3px solid #6b361f;box-shadow:inset 0 5px 0 #402216}.player small{position:absolute;top:74px;left:15px;background:#082655;color:white;border-radius:6px;padding:3px;font-size:7px;font-weight:900}.lucca{left:25%;top:53%}.teammate{left:48%;top:22%}.rival .shirt{background:linear-gradient(90deg,#8e2db7 0 68%,#f4dcff 69%)}.rival.r1{left:51%;top:58%}.rival.r2{left:68%;top:30%}.ball{position:absolute;left:31%;top:68%;font-size:33px;z-index:4;transition:1s cubic-bezier(.2,.8,.2,1)}.callout{position:absolute;left:50%;top:7%;transform:translateX(-50%);background:white;color:#0a5795;border:4px solid #2f9fe0;border-radius:15px;padding:7px 14px;font-weight:900;z-index:5}.pitch.play-drible:not(.success) .lucca{left:55%;top:27%}.pitch.play-drible:not(.success) .ball{left:61%;top:42%}.pitch.play-chute:not(.success) .lucca{left:61%;top:48%}.pitch.play-chute:not(.success) .ball{left:67%;top:63%}.pitch.success .callout{background:#fff1a3;color:#b94c00;border-color:#ff8e13;animation:pop .5s}.pitch.success.play-passe .ball{left:50%;top:34%;transform:rotate(540deg)}.pitch.success.play-passe .teammate{left:55%;top:27%}.pitch.success.play-drible .lucca{left:61%;top:48%}.pitch.success.play-drible .ball{left:67%;top:63%;transform:rotate(720deg)}.pitch.success.play-drible .r1{left:42%;top:65%;transform:rotate(-25deg)}.pitch.success.play-chute .lucca{left:72%;top:45%;transform:rotate(8deg)}.pitch.success.play-chute .ball{left:87%;top:48%;transform:rotate(900deg) scale(.65)}.pitch.success.play-chute .goalie{transform:translate(-35px,-85%) rotate(-25deg)}.pitch.wrong{animation:shake .3s}.math-panel{margin-top:12px;display:grid;grid-template-columns:1.1fr 1.3fr .7fr;align-items:center;gap:15px;background:#f8fcff;border:5px solid white;outline:4px solid #63bce7;border-radius:25px;padding:10px 16px;box-shadow:0 8px 0 #0877b4}.math-panel small{font-weight:900;color:#0879bd}.math-panel h2{font-size:clamp(22px,3vw,34px);margin:2px}.math-panel h2 b{color:#ed6410}.answers{display:flex;justify-content:center;gap:10px}.answers button{width:clamp(67px,7vw,90px);aspect-ratio:1;border:4px solid white;outline:3px solid #1884ce;border-radius:50%;background:white;box-shadow:0 5px 0 #07589c;color:#082655;font-size:27px;font-weight:900;cursor:pointer}.answers button.good{outline-color:#3bca50;background:#eaffdd}.answers button.bad{outline-color:#ff4c3a;animation:shake .3s}.message{text-align:center;font-size:11px;font-weight:900;color:#53708d}.message span{font-size:18px;color:#ffc51d}.message button{border:0;border-radius:11px;background:#ff7414;color:#fff;padding:10px;font-weight:900;cursor:pointer}.finish>div{font-size:70px}.finish #record{font-weight:900;color:#b55700}.secondary{display:block;margin:15px auto 0;border:0;background:none;color:#53708d;font-weight:900;cursor:pointer}@keyframes pop{50%{transform:translateX(-50%) scale(1.15)}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@media(max-width:720px){.hub-header{min-height:40vh}.hub-header img{position:absolute;opacity:.28;width:100%;right:-25%;top:8%}.game-grid{grid-template-columns:1fr}.game-tile{min-height:140px}.game-top{height:90px}.score{gap:7px;padding:6px;font-size:14px}.ops{grid-template-columns:repeat(2,1fr)}.match{width:98vw}.pitch{height:40vh}.match-hud .bar{width:70px}.player{transform:scale(.75)}.math-panel{grid-template-columns:1fr;text-align:center;gap:6px;padding:8px}.math-panel h2{font-size:24px}.answers button{width:68px}.message{min-height:31px}.setup-card{margin-top:20px}.logo span{display:none}}@media(display-mode:standalone){.back-btn{margin-top:env(safe-area-inset-top)}}
