html, body, div, h1, h2, h3, h4, h5, h6, a, p, img, ul, li, button { padding: 0px; margin: 0px; border: 0px; outline: 0px; }
html, body { width: 100vw; height: 100vh; overflow: hidden; user-select: none; font-family: system-ui, sans-serif; font-size: 16px; color: rgb(0, 0, 0); touch-action: pinch-zoom; }
#hamburger-container { overflow: visible; position: absolute; top: 10px; right: 10px; }
html[dir="rtl"] #hamburger-container { right: unset; left: 10px; }
#modal-root { position: fixed; }
#game-bg { background: linear-gradient(rgb(56, 194, 238) 0%, rgb(46, 195, 208) 100%); z-index: -1000; pointer-events: none; }
@media (forced-colors: active) {
  #game-bg { background: canvas !important; }
}
#game-water { background-image: url("water256.png"); background-size: 256px 256px; background-repeat: repeat; image-rendering: pixelated; z-index: -900; pointer-events: none; }
#game-canvas { image-rendering: pixelated; z-index: -800; }
.full-size { position: absolute; width: 100vw; height: 100vh; top: 0px; left: 0px; }
#game-tint, #game-tint.visible { pointer-events: none; z-index: 0; background-color: rgba(255, 255, 255, 0); transition: background-color 0.35s; }
#game-tint.visible { pointer-events: inherit; background-color: rgba(255, 255, 255, 0.25); }
#game-clicktarget { z-index: 1; }
#game-ui { width: calc(-32px + 100vw); height: calc(-32px + 100vh); padding: 16px; z-index: 2; }
#ui-title { text-transform: uppercase; font-size: 48px; line-height: 48px; font-weight: bold; width: calc(-32px + 100vw); position: absolute; top: calc(10vh); text-align: center; height: 100px; }
#ui-info { font-size: 24px; line-height: 24px; font-weight: 600; width: calc(-32px + 100vw); position: absolute; top: calc(20vh); text-align: center; height: 100px; }
.info-text { display: inline-block; vertical-align: middle; }
.info-button-key { width: 32px; height: 32px; display: inline-block; vertical-align: middle; border: 2px solid rgb(0, 0, 0); border-radius: 4px; }
.info-button-btn { display: inline-block; vertical-align: middle; border: 2px solid rgb(0, 0, 0); border-radius: 16px; width: 28px; height: 28px; font-size: 20px; line-height: 32px; font-weight: 600; font-family: system-ui, sans-serif; }
.info-button-icon { width: 32px; height: 32px; display: inline-block; vertical-align: middle; }
.info-button-text { text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; font-size: 24px; line-height: 20px; padding: 2px 6px 3px; height: 20px; font-family: system-ui, sans-serif; }
.info-button-keytext { display: inline-block; vertical-align: middle; text-transform: uppercase; border: 2px solid rgb(0, 0, 0); border-radius: 4px; font-weight: bold; letter-spacing: 0.5px; font-size: 24px; line-height: 32px; padding: 0px 6px; height: 32px; font-family: system-ui, sans-serif; }
#ui-selection { width: calc(-32px + 100vw); position: absolute; top: calc(-48px + 40vh); text-align: center; height: 100px; }
#selection-box { display: inline-block; width: 72px; height: 72px; vertical-align: middle; }
#ui-selection button { font-size: 24px; padding: 4px; vertical-align: middle; }
#ui-notify { width: calc(-32px + 100vw); position: absolute; top: calc(96px + 40vh); text-align: center; height: 48px; }
#notify-text { display: inline-block; font-size: 16px; line-height: 16px; font-weight: 600; color: rgb(255, 255, 255); padding: 16px 32px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.5); margin: 0px auto; }
#ui-top { position: relative; width: 100%; margin: 0px auto; }
#top-stats { width: 300px; display: flex; margin: 0px auto; }
#stats-counter, #stats-lives, #stats-power { display: flex; flex-grow: 1; justify-content: center; }
#stats-counter { height: 24px; flex-basis: 140px; }
#counter-amount { font-weight: bold; text-align: center; z-index: 3; }
#stats-lives, #stats-power { height: 24px; flex-basis: 80px; }
.counter-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.counter-text { display: inline-block; vertical-align: middle; font-size: 16px; font-weight: bold; line-height: 24px; }
.icon-stroke { stroke: rgb(0, 0, 0); fill: none; }
.icon-fill { fill: rgb(0, 0, 0); }
#ui-notify .icon-fill { fill: rgb(255, 255, 255); }
@media (forced-colors: active) {
  .icon-stroke { stroke: canvastext !important; }
  .icon-fill { fill: canvastext !important; }
}
.icon { width: 24px; height: 24px; background-image: url("interface24.png"); background-size: 48px 96px; }
.life-empty { background-position: 0px 0px; }
.life-full { background-position: -24px 0px; }
.powerup-empty { background-position: 0px -24px; }
.powerup-full { background-position: -24px -24px; }
.shield { background-position: -24px -48px; }
.infinite { background-position: 0px -48px; }
.icon.powerup-small { display: inline-block; background-position: -24px -24px; width: 24px; min-width: 24px; height: 24px; background-size: 48px 96px; margin-inline-end: 12px; }
.icon.life-small { display: inline-block; background-position: -24px 0px; width: 24px; min-width: 24px; height: 24px; background-size: 48px 96px; margin-inline-end: 12px; }
.icon.shield-small { display: inline-block; background-position: -24px -48px; width: 24px; min-width: 24px; height: 24px; background-size: 48px 96px; margin-inline-end: 12px; }
.icon.coin-small { display: inline-block; background-position: -24px -72px; width: 24px; min-width: 24px; height: 24px; background-size: 48px 96px; margin-inline-end: 12px; }
#game-ui button { border: 2px solid transparent; border-radius: 4px; background: rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: system-ui, sans-serif; font-size: 16px; white-space: nowrap; text-decoration: none; cursor: pointer; }
#game-ui button:hover { color: rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.4); }
#game-ui button:focus { color: rgb(0, 0, 0); border: 2px solid rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.4); }
html[dir="rtl"].icon-arrow-right, html[dir="rtl"].icon-arrow-left { transform: scale(-1, 1); }