/* ===========================================================
   Frogger — game-specific styles only.
   Chrome, buttons, #status, .hint, .stat live in shared.css.
   =========================================================== */

/* A touch tighter than the shared 20px so everything fits a phone screen. */
body { gap: 14px; }

/* ---------- stat chips row ---------- */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.stats .stat { min-width: 64px; }

/* ---------- board + overlay ---------- */
.board-wrap {
  position: relative;
  width: min(448px, 92vw);
}

#game {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 8px 26px var(--shadow);
  touch-action: none;            /* let us own swipe gestures */
}

/* game-over overlay sits over the canvas */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay);
  border-radius: 12px;
  backdrop-filter: blur(2px);
}
.overlay.show { display: flex; }

.overlay-card {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 18px 50px var(--shadow);
}
.overlay-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 6px; }
.overlay-sub { color: var(--muted); margin-bottom: 18px; }

/* ---------- on-screen D-pad ---------- */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 6px;
  justify-content: center;
}
.dpad-btn {
  padding: 0;
  font-size: 1.25rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.dpad-btn:active { opacity: 0.7; }
.dpad-btn.up    { grid-column: 2; grid-row: 1; }
.dpad-btn.left  { grid-column: 1; grid-row: 2; }
.dpad-btn.down  { grid-column: 2; grid-row: 2; }
.dpad-btn.right { grid-column: 3; grid-row: 2; }

/* tiny screens — shrink the pad a little */
@media (max-width: 380px) {
  .dpad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); }
}