html,
body {
  margin: 0;
  height: 100vh;
  height: 100dvh; /* accounts for phone browser toolbars; ignored where unsupported */
  background: #222;

  /* The game fits the window exactly, so nothing should ever scroll or bounce. */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wraps the canvas so the pause button can be positioned relative to it with
   plain percentages — it always matches the canvas's own box exactly, at any
   window size, with no JavaScript resize handling needed. */
.game-viewport {
  position: relative;

  /* Grow or shrink to the largest 2:1 box that fits the window (capped at
     1200px wide). The drawing resolution stays 800x400, so game code is
     unaffected. The second width line is a fallback for older browsers. */
  box-sizing: border-box;
  aspect-ratio: 2 / 1;
  width: min(100vw, 200vh, 1200px);
  width: min(100vw, 200dvh, 1200px);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid white;
  box-sizing: border-box;

  /* No scrolling, pinch-zoom or double-tap zoom when touching the game. */
  touch-action: none;

  /* No text selection, long-press menu or grey tap flash. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Pause/resume button. Positioned in the bottom-right corner: clear of the
   Score/Coins (top-left) and High Score/Total Coins (top-right) HUD text, and
   clear of the player, who stays fixed near the left edge of the ground.
   right/bottom use the same 16px-in-800x400-canvas-space margin the HUD text
   already uses (16/800 = 2%, 16/400 = 4%), so it lines up with that same
   convention and stays correctly placed as the canvas is scaled by CSS.
   The button's own size is fixed in real CSS pixels (not scaled with the
   canvas), so the tap target stays a comfortable 44x44 at any screen size. */
.pause-button {
  display: none; /* only shown on touch devices, via the media query below */
  position: absolute;
  right: 2%;
  bottom: 4%;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: white;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;

  /* Above the canvas, so a tap here lands on the button, not on the canvas's
     own touch-to-jump listener — the browser targets whichever element is
     visually on top, and this element isn't a child of canvas, so the tap
     can't reach canvas's handler at all. */
  z-index: 5;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Touch-primary devices only (no hover, coarse pointer) — a direct capability
   check rather than reading the user agent string. Combined with the
   .show-for-state class (toggled from game.js based on gameState), the button
   only actually renders when both are true: a touch device AND a run in
   progress (playing or paused). */
@media (hover: none) and (pointer: coarse) {
  .pause-button.show-for-state {
    display: flex;
  }
}

/* Credits link: small and dim, at the bottom centre of the page. It only
   overlaps the empty ground strip of the game, never the gameplay area. */
.credits-link {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 6px 12px;
  font: 13px sans-serif;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

.credits-link:hover,
.credits-link:focus-visible {
  color: white;
}

/* Full-window dark backdrop with a scrollable box in the middle. */
.credits-panel {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.75);
}

.credits-panel[hidden] {
  display: none;
}

.credits-box {
  box-sizing: border-box;
  width: min(640px, 100%);
  max-height: 100%;
  overflow: auto;
  touch-action: pan-y; /* lets a finger scroll the text even though the page itself doesn't scroll */
  padding: 20px;
  background: #1c1c1c;
  color: #eee;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  font: 14px/1.5 sans-serif;
}

.credits-box pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}

.credits-box a {
  color: #8fc7ff;
}

.credits-close {
  position: sticky;
  top: 0;
  float: right;
  margin: 0 0 8px 8px;
  padding: 6px 14px;
  font: 14px sans-serif;
  color: #eee;
  background: #333;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
}