* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a12;
  touch-action: none;
  overscroll-behavior: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #14141f 0%, #0a0a12 70%);
}

#game-canvas {
  display: block;
  background: #0d0d16;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  touch-action: none;
}

#mute-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 10;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(15, 15, 24, 0.75);
  /* No icon image asset for now — main.js sets this button's textContent
     to a plain glyph (🔊/🔇) instead of a sprite-sheet background. */
  color: #f4f4f8;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  touch-action: manipulation;
}

#mute-btn:hover {
  background: rgba(25, 25, 38, 0.9);
}

#mute-btn:active {
  transform: scale(0.94);
}