.flappy-board {
  position: relative;
  width: min(90vw, 480px);
  /* 170px = site-header(44) + in-page header(70) + toolbar(42) + gaps */
  height: min(600px, calc(100dvh - 170px));
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  touch-action: none;
  user-select: none;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hide leaderboard on small screens so board fits without scroll */
@media (max-height: 720px) { .leaderboard { display: none; } }
.leaderboard { margin-top: 18px; }
.lb-title { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lb-table th, .lb-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.lb-table th { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.lb-table tbody tr:first-child td { color: var(--accent); font-weight: 700; }
.lb-table tbody tr.lb-new td { color: var(--accent); font-weight: 700; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lb-table tbody tr.lb-new td:first-child::before { content: "★ "; }