html, body {
  margin: 0;
  padding: 0;
  background: #000;
  height: 100%;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.game-shell {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  padding: 0;
  box-sizing: border-box;
}

/* Without an explicit shared cell, CSS grid auto-placement puts each child
   in its own row, stacking .touch-controls below the canvas instead of
   overlaying it. Forcing both into row 1 / column 1 makes them overlap. */
.game-shell > canvas,
.game-shell > .touch-controls {
  grid-area: 1 / 1;
}

canvas {
  background: #000;
  display: block;
  cursor: none;
  touch-action: none;
  border: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.touch-controls {
  display: none;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  box-sizing: border-box;
  padding: 20px;
  pointer-events: none;
}

.touch-btn {
  pointer-events: auto;
  touch-action: none;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 8px;
  font-size: 26px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.touch-btn:active {
  background: #fff;
  color: #000;
}

/* Only real touch devices get on-screen controls — keyboard/mouse on
   desktop already has Arrow/A/D + Space, and showing big buttons there
   would just clutter the canvas for no benefit. */
@media (pointer: coarse) {
  .touch-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .touch-btn--left,
  .touch-btn--right {
    width: 72px;
    height: 72px;
  }

  .touch-btn--action {
    width: 64px;
    height: 64px;
    align-self: flex-end;
    /* The paddle rests centered near the very bottom edge (~PADDLE.y in
       config.js). A bottom-anchored center button sits right on top of
       it at the very moment the player is most likely to look for the
       paddle (before the first launch), so this is lifted clear of that
       band instead of touching the bottom edge like ◀/▶. */
    margin-bottom: 56px;
  }
}

.rotate-overlay {
  display: none;
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.2rem;
  text-align: center;
}

/* screen.orientation.lock('landscape') only works in fullscreen/installed
   PWA context on most browsers; this is the universal fallback so a phone
   held upright still gets a clear instruction instead of a squashed canvas. */
@media (orientation: portrait) and (max-width: 900px) {
  .game-shell {
    display: none;
  }

  .rotate-overlay {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    padding: 24px;
    box-sizing: border-box;
  }
}