:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;--darkColor: #181818;--lightColor: whitesmoke;--accentColor: #0D0D35;--glass-bg: hsla(220, 13%, 15%, .7);--glass-border: hsla(210, 40%, 98%, .1);--glass-shadow: 0 20px 25px -5px hsl(220, 13%, 5% / .3)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background-color:var(--darkColor);color:var(--lightColor);display:flex;flex-direction:column;min-height:100vh}header,footer{display:flex;justify-content:center;align-items:center;padding:40px 20px}main{flex:1;display:flex;justify-content:center;align-items:center}#gameContainer{position:relative;width:500px;height:500px;margin:auto;aspect-ratio:1 / 1;max-width:100%}#gameCanvas{width:100%;height:100%;display:block;z-index:1;touch-action:none}.gameUI{position:absolute;top:0;left:0;width:500px;height:500px;background-image:url(/assets/bg.png);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2}.gameUI *{text-align:center;margin-top:5px}#gameStartDiv{display:flex}#gameEndDiv{display:none}#gameStartBtn,#gameRestartBtn{display:inline-block;width:100px;padding:8px 15px;margin:20px 0;text-align:center;font-family:inherit;border-radius:10px;background-color:transparent;color:var(--lightColor);border:2px solid var(--lightColor);cursor:pointer;transition:background-color .3s,color .3s}#gameStartBtn:hover,#gameRestartBtn:hover{background-color:var(--lightColor);color:var(--darkColor)}#muteToggleBtn{position:absolute;top:8%;right:30%;z-index:10;padding:10px 15px;font-size:14px;background-color:transparent;color:var(--lightColor);border:2px solid var(--lightColor);border-radius:10px;cursor:pointer;transition:background-color .3s,color .3s}#muteToggleBtn:hover{background-color:var(--lightColor);color:var(--darkColor)}.text-container{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:10px;padding:20px}@media screen and (max-width: 900px){#gameContainer{width:100%}.gameUI{width:100%;height:100%;padding:20px}#gameCanvas{width:100%;height:auto}#gameStartBtn,#gameRestartBtn{width:80%;padding:10px;font-size:16px}#muteToggleBtn{position:fixed;top:4%;right:8%;width:auto;padding:10px;font-size:16px}h1{font-size:24px}}
