/* ===========================================================
   Flappy — game-specific styles only.
   Chrome (body, h1, buttons, score boxes, hint, kbd) comes
   from shared.css; we only lay out the canvas + controls.
   =========================================================== */

body {
  gap: 14px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;   /* kill double-tap zoom delay on mobile */
}

h1 { font-weight: 700; font-size: 2.4rem; }

.scores { display: flex; gap: 10px; }

/* The canvas is the playfield. Fixed 2:3 aspect, clamped narrow so it
   stays comfortable on phones yet never grows past ~400px on desktop. */
#game {
  width: 400px;
  max-width: min(92vw, 400px);
  aspect-ratio: 2 / 3;
  height: auto;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: 0 10px 40px var(--shadow);
  cursor: pointer;
  touch-action: none;           /* swallow scroll/zoom while playing */
  display: block;
}

/* Single oversized control — easy thumb target, works without a keyboard. */
#flapBtn {
  padding: 14px 40px;
  font-size: 1.15rem;
}