* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "Comic Sans MS", "Chalkboard SE", "Segoe UI", sans-serif;
  background: linear-gradient(#bfe8ff 0%, #dff5d8 60%, #cdeec2 100%);
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.stage { width: min(100vw, 1040px); padding: 8px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
}
.topbar h1 {
  color: #2c6e31; font-size: 28px;
  text-shadow: 0 2px 0 #ffffffaa;
}
.home, .round-btn, .game-menu {
  font-size: 24px; text-decoration: none; background: #fffdf4;
  border: 3px solid #8fce7e; border-radius: 50%;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.round-btn { min-width: 78px; border-radius: 16px; font-size: 16px; }
.game-menu { min-width: 88px; border-radius: 16px; font-size: 16px; }
.round-btn:active, .home:active, .game-menu:active { transform: scale(0.94); }
.canvas-wrap { position: relative; width: 100%; }
canvas {
  width: 100%; height: auto; display: block;
  border-radius: 20px; box-shadow: 0 8px 24px #4c7a4c33;
  touch-action: none;
}