@charset "UTF-8";html *{box-sizing:border-box}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.w50{width:50%;margin:0 auto}h1{color:#e1e1e1;text-align:center}label{display:block;margin-bottom:10px}input{width:100%;padding:10px;margin-bottom:20px}button{width:100%;padding:15px 10px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}button:not(.isWaiting):hover{background-color:#0056b3;transition:all .3s}.isWaiting{cursor:wait;position:relative;overflow:hidden}button.isWaiting{border:none}button.isWaiting:before{content:"";position:absolute;display:block;background:#fff;border:0;border-radius:20px;animation:serpent 5s linear infinite}@keyframes serpent{0%{top:0;left:0;width:5px;height:5px}12.5%{height:80%}25%{top:calc(100% - 5px);left:0;width:5px;height:5px}37.5%{width:80%}50%{top:calc(100% - 5px);left:calc(100% - 5px);right:0;width:5px;height:5px}62.5%{height:80%}75%{top:0;left:calc(100% - 5px);width:5px;height:5px}87.5%{width:80%}to{top:0;left:0;width:5px;height:5px}}.car{margin-top:100px;height:150px;position:relative}.car:before{position:absolute;content:"";background-image:url(/assets/car-BZllCkvb.png);width:50px;height:100px;background-repeat:no-repeat;background-size:50px 100px;transform:rotate(-90deg);left:calc(50% - 100vw);animation:carMove 10s ease-in-out;animation-delay:5s;z-index:2;overflow:hidden}.car:after{position:absolute;content:"";left:calc(50% - 100vw);right:calc(50% + 100vw);transform:translateY(50%);height:50px;background-image:linear-gradient(to top,transparent 20%,#000 25%,transparent 30%,transparent 70%,#000 75%,transparent 80%);background-repeat:no-repeat;background-size:100%;animation:tireSmoke 10s ease-in-out;animation-delay:5s;z-index:1;overflow:hidden}body{overflow-x:hidden}@keyframes carMove{0%{left:calc(50% - 100vw)}20%{left:calc(50% - 100vw)}45%{left:calc(50% + 100vw);transform:rotate(-90deg)}55%{left:calc(50% + 100vw);transform:rotate(90deg)}80%{left:calc(50% - 100vw);transform:rotate(90deg)}to{left:calc(50% - 100vw);transform:rotate(90deg)}}@keyframes tireSmoke{0%{left:calc(50% - 100vw);right:calc(50% + 100vw)}20%{right:calc(50% + 100vw)}45%{left:calc(50% - 100vw);right:calc(50% - 100vw)}50%{left:calc(50% + 100vw)}55%{left:calc(50% + 100vw);right:calc(50% - 100vw)}80%{left:calc(50% - 100vw);right:calc(50% - 100vw)}to{left:calc(50% - 100vw);right:calc(50% + 100vw)}}#root{width:100%}@media screen and (max-width: 768px){#root h1{font-size:25px}#root h2{font-size:20px}#root h3{font-size:17px}}.game{min-width:100%;min-height:85vh}.game .goal{max-width:70%;max-height:35vh;margin:0 auto;background:#000;border:15px solid #fff;border-bottom:0;border-top-left-radius:10px;border-top-right-radius:10px;position:relative;aspect-ratio:3/1;transition:all .3s}@media (max-width: 768px){.game .goal{border:5px solid #fff;border-bottom:0}}.game .goal:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,#454444 2px,transparent 1px),linear-gradient(90deg,#212121 2px,transparent 1px);background-size:40px 25px;z-index:0}@media screen and (max-width: 768px){.game .goal:before{background-size:35px 20px}}.game .goal .goalkeeper{position:absolute;width:100%;height:70%;bottom:0;left:50%;transform:translate(-50%);margin:auto;z-index:2;vertical-align:bottom;transition:all .3s}.game .goal .goalkeeper img{max-width:100%;max-height:100%}.game .goal .goalkeeper.pos0{left:18%}.game .goal .goalkeeper.pos2{left:84%}.game .goal .shoots{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:space-around;align-items:center}.game .goal .shoots .shoot{border-radius:100%;border:2px dashed #ffffff;background:#ffffff47;width:50px;height:50px;transition:all .3s;z-index:2;animation:rotate 20s linear infinite}@media (max-width: 768px){.game .goal .shoots .shoot{width:40px;height:40px}}.game .goal .shoots .shoot:hover,.game .goal .shoots .shoot.active{border-style:solid;background:#ffffffcb;cursor:pointer}.game .goal .shoots .shoot.invisible{opacity:0}.game .goal .shoots .shoot.shooted{animation:none;border-style:solid;border-color:#ff9d00;background-color:#ff9d0085}.game .ball{position:absolute;width:70px;height:70px;border-radius:100%;margin:0 auto;z-index:3;bottom:0;left:50%;transform:translate(-50%,300%)}@media (max-width: 768px){.game .ball{width:60px;height:60px}}.game .ball img{max-width:100%;max-height:100%}.game .ball.pos0:not(.missed){animation:pos0 1s linear 1 forwards}.game .ball.pos0.missed{animation:pos0Missed 1s linear 1 forwards}.game .ball.pos1:not(.missed){animation:pos1 1s linear 1 forwards}.game .ball.pos1.missed{animation:pos1Missed 1s linear 1 forwards}.game .ball.pos2:not(.missed){animation:pos2 1s linear 1 forwards}.game .ball.pos2.missed{animation:pos2Missed 1s linear 1 forwards}.goalkeeperRole .goal{max-width:90%;max-height:50vh}.goalkeeperRole .ball:not([class*=pos]){display:none}.scoreManche{padding:20px 0;display:flex;justify-content:space-between;gap:10px;width:fit-content;margin:0 auto}.scoreManche .score{border:1px solid white;border-radius:100%;width:20px;height:20px}.scoreManche .score.win{background:green}.scoreManche .score.fail{background:red}@keyframes pos0{0%{width:70px;height:70px;bottom:0;left:50%;transform:translate(-50%,300%);@media (max-width: 768px){width:60px;height:60px}}to{width:55px;height:55px;left:17%;top:50%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}}@keyframes pos0Missed{0%{width:70px;height:70px;bottom:0;left:50%;transform:translate(-50%,300%);@media (max-width: 768px){width:60px;height:60px}}75%{width:55px;height:55px;left:17%;top:50%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}80%{width:55px;height:55px;left:17%;top:50%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}to{width:55px;height:55px;left:17%;top:100%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}}@keyframes pos1{0%{width:70px;height:70px;bottom:0;left:50%;transform:translate(-50%,300%);@media (max-width: 768px){width:60px;height:60px}}to{width:55px;height:55px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}}@keyframes pos1Missed{0%{width:70px;height:70px;bottom:0;left:50%;transform:translate(-50%,300%);@media (max-width: 768px){width:60px;height:60px}}75%{width:55px;height:55px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}80%{width:55px;height:55px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}to{width:55px;height:55px;left:50%;top:100%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}}@keyframes pos2{0%{width:70px;height:70px;bottom:0;left:50%;transform:translate(-50%,300%);@media (max-width: 768px){width:60px;height:60px}}to{width:55px;height:55px;left:84%;top:50%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}}@keyframes pos2Missed{0%{width:70px;height:70px;bottom:0;left:50%;transform:translate(-50%,300%);@media (max-width: 768px){width:60px;height:60px}}75%{width:55px;height:55px;left:84%;top:50%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}80%{width:55px;height:55px;left:84%;top:50%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}to{width:55px;height:55px;left:84%;top:100%;transform:translate(-50%,-50%) rotate(720deg);@media (max-width: 768px){width:45px;height:45px}}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{width:100%;height:100%}.button a{display:inline-block;padding:1em 2em;margin-top:4em;border-radius:8px;border:1px solid transparent;font-size:1em;font-weight:500;font-family:inherit;background-color:#3b4096;color:#fff;text-decoration:none;cursor:pointer;transition:all .3s}.button a:hover,.button a:focus{border-color:#646cff;background-color:#1a1a1a}.iLoveSparkles{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.iLoveSparkles>div{width:100%;height:100%}.iLoveSparkles>div>div{width:100%;height:100%}.cup{max-height:50vh}#root{padding-top:0;min-height:100vh}html *{box-sizing:border-box;outline:none}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover,button:focus{border-color:#646cff}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#c8cbfa}button{background-color:#f9f9f9}}input{border-radius:5px;transition:all .3s}input:hover,input:focus{border-color:#646cff}nav{width:100vw;left:calc(50% - 50vw);position:relative;display:flex;flex-direction:row;gap:100px;align-items:center;font-size:20px;padding:25px 100px;box-shadow:0 0 20px #0006}@media screen and (max-width: 768px){nav{display:none}}nav .logo{width:125px;height:75px;border-radius:20px;overflow:hidden}nav .logo img{width:100%;height:100%;object-fit:cover}nav a{text-decoration:none;color:#fff;position:relative;transition:all .3s}nav a:before{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;border-radius:20px;background-color:#fff;transition:all .3s}nav a:hover:before,nav a:focus:before{width:25%}a.external{position:relative}a.external:after{content:"↗";position:absolute;right:-20px;top:50%;transform:translateY(-50%)}a.external:before{width:calc(100% + 20px)}
