:root{font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;color:#f5f5f5}*{cursor:default}body{background-color:#000;margin:auto 0 0;padding:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:100dvh}body>*{display:none}@media (orientation: landscape){body>*{display:block}header>*{margin:0;padding:0}header{display:flex;justify-content:space-between;width:80%;height:10vh;align-items:center}header>div>*{text-shadow:#999 .1vmin .1vmin .2vmin;margin:0}header #caption{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:max-content}header #caption h1{font-size:4.4vh;font-weight:700;padding-bottom:.3vh}header #caption p{font-size:1.9vh}header .players{display:flex;justify-content:center;align-items:center;font-size:4vh;min-width:30%}header :is(#player1Name,#player2Name):after{content:": "}header .players:first-of-type{justify-content:flex-start}header .players:last-of-type{justify-content:flex-end}header .players h3:first-of-type{cursor:pointer;padding-right:.75vw}header button{cursor:pointer;background:#6464ff80;border:rgb(200,200,200,.7) .5vh outset;border-radius:50%;width:5.5vh;height:5.5vh;font-size:2.5vh;font-weight:700;z-index:1}header button:hover{opacity:.8}main{height:80vh;width:80vw}main canvas{cursor:pointer}#touchZoneLeft,#touchZoneRight,.joystick-container{touch-action:none;-webkit-user-select:none;user-select:none}#touchZoneLeft,#touchZoneRight{width:36.5vw;height:80%;position:absolute;top:10%;z-index:1}#touchZoneLeft{left:0}#touchZoneRight{right:0}aside{position:absolute;display:flex;flex-direction:column;justify-content:space-between;top:0;height:100%;width:10vw}aside#leftPowerUps{left:0;align-items:end}aside#rightPowerUps{right:0;align-items:start}button.powerUps{position:absolute;width:5vw;height:5vw;font-size:2.5vw;color:#fff;border-color:#f5f5f5;border-width:.3vw;border-radius:.3vw;background-color:#ffffff15;cursor:pointer;z-index:10}button#upperLeftPU{top:5vh;right:1vw}button#lowerLeftPU{bottom:5vh;right:1vw}button#upperRightPU{top:5vh;left:1vw}button#lowerRightPU{bottom:5vh;left:1vw}#settingsContainer,#leaderboardContainer{position:absolute;display:none;top:0;left:0;width:100%;height:100%;background-color:#000000d9;justify-content:center;align-items:center;z-index:9999}#settingsContainer #settingsForm{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#333;border-radius:1vh;border:#666 .5vh solid;padding:3.5vh 4vh 2.5vh;width:max-content;height:max-content;font-size:3.5vh;box-shadow:#eeea 0 0 1vh}#settingsContainer #settingsForm>h2{font-size:6vh;margin-top:0;margin-bottom:3vh;text-align:center}#settingsContainer #settingsForm>div{margin:2vh 0;width:100%;display:flex;justify-content:space-between;align-items:center}#settingsContainer #settingsForm label{margin-right:2vh}#settingsContainer #settingsForm :is(input,button){cursor:pointer}#settingsContainer #settingsForm input{font-size:4vh;text-align:center;border-radius:1vh}#settingsContainer #settingsForm input:is([type=checkbox],[type=number]){width:50%;margin:auto 0}#settingsContainer #settingsForm input[type=checkbox]{height:3.8vh}#settingsContainer #settingsForm button{border-radius:1.5vh;border:#fff .3vh solid;width:35%;height:6vh;padding:.5vh;margin-top:3vh;font-size:2.75vh;font-weight:700;align-items:center;text-align:center;box-shadow:#fff6 0 0 .5vh;text-shadow:#fff4 .1vh .1vh .1vh}:is(#settingsContainer #settingsForm,#leaderboardContainer #leaderboard) button:hover{opacity:.8}#settingsContainer #settingsForm #applySettingsBtn{background-color:#3caf3ccc}#settingsContainer #settingsForm #cancelSettingsBtn{background-color:#f00c}#settingsContainer #settingsForm #refreshSettingsBtn{width:min-content;height:min-content;padding:1vh 2.5vh;margin-bottom:1vh;background:none;box-shadow:none;border:none;font-size:5.5vh}#leaderboard{position:relative;width:max-content;padding:0 2.5vw;max-width:67vw;min-width:15vw;height:77.5vh;margin:auto;overflow-y:scroll;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;box-shadow:#a5a5a5d0 0 0 1.5vh;background-color:#333;border-radius:2.5vh;border:rgba(255,217,0,.8) 1vh solid;font-weight:700}#leaderboard h2{font-size:2.75em;margin-top:-1vh;margin-bottom:1vh;text-align:center}#leaderboard .leaderboard-row{display:flex;justify-content:space-around;width:100%;gap:2.5vw;padding:.5vh 0}#leaderboard .leaderboard-rank{text-align:left}#leaderboard .leaderboard-name{flex:4;text-align:left}#leaderboard .leaderboard-score{text-align:center}#leaderboard #closeLeaderboardBtn{position:sticky;width:200%;height:auto;bottom:0;overscroll-behavior:contain;background-color:#ac0000eb;margin-top:auto;border:none;font-size:2em;color:#f5f5f5;text-shadow:black .015em .06em;align-self:center;font-weight:bolder;padding-bottom:.1em;cursor:pointer}#leaderboard #closeLeaderboardBtn:focus{outline:none;border:whitesmoke .08em solid}footer{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;width:80%;height:10vh;z-index:10}footer div{display:flex;justify-content:center;align-items:center;width:max-content}footer button{margin:0 1.5vw;width:8vw;border-radius:1.75vh;font-size:1.075vw;text-align:center;font-weight:700;cursor:pointer;color:#fff;background-color:#333;border:whitesmoke .4vh solid;z-index:1999}footer button#resetBtn{padding:1.5vh 2vh;margin-left:0}footer button#fullscreenBtn{width:10vw;padding:1.5vh}footer button#leaderboardBtn{width:11.5vw;padding:1.5vh 1vh}footer button:hover{opacity:.8}footer img{width:6.5vh;margin-right:2vw}footer p{font-size:2.5vh;padding-right:2vw;margin:auto 0}footer #version{font-size:1.75vh;font-style:italic;margin-top:auto;padding-top:.4vh}}@media (orientation: portrait){body>*,#settingsContainer,#leaderboardContainer,#settingsForm,#leaderboard{display:none}body{display:flex;justify-content:center;align-items:center;background-color:#000;color:#fff;font-size:3.8vw;text-align:center;height:100vh;width:100vw}body:before{width:80vw;margin:0 auto;content:" EN: Please use your device in landscape mode. \aIf you need any help, feel free to click \aon the ❔ above the game field! \a\a*********************************** \a\a DE: Bitte drehe dein Gerät ins Querformat. \a Falls Du Hilfe benötigst, klicke einfach \a auf das ❔ über dem Spielfeld! \a\a*********************************** \a\a";white-space:pre-line}body:after{font-size:15vw;font-weight:bolder;content:"▯ → ▭"}}