:root {
    color-scheme: dark;
    --bg: #0f1115; --panel: #181b22; --line: #262a33; --text: #e8eaf0; --muted: #9aa1ad;
    --snake: #5ee08a; --head: #b6f5c9; --food: #ff5d73;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 16px system-ui, sans-serif; }
  body { display: flex; flex-direction: column; align-items: center; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
  header { width: 100%; max-width: 520px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  header a { color: var(--muted); text-decoration: none; font-size: 14px; }
  header a:hover { color: var(--text); }
  .scores { display: flex; gap: 16px; font-variant-numeric: tabular-nums; }
  .scores span { color: var(--muted); font-size: 13px; margin-right: 4px; }
  .wrap { position: relative; width: 100%; max-width: 520px; }
  canvas { display: block; width: 100%; aspect-ratio: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; touch-action: none; }
  .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(15,17,21,.78); border-radius: 12px; text-align: center; padding: 16px; }
  .overlay[hidden] { display: none; }
  .overlay h2 { margin: 0; font-size: 28px; }
  .overlay p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
  button { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
  button:active { transform: scale(.96); }
  .primary { background: var(--snake); color: #0b1f12; border: 0; font-weight: 700; padding: 12px 28px; font-size: 17px; }
  .pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 56px); gap: 8px; margin-top: 16px; }
  .pad button { font-size: 22px; }
  .pad .up { grid-column: 2; grid-row: 1; }
  .pad .left { grid-column: 1; grid-row: 2; }
  .pad .down { grid-column: 2; grid-row: 2; }
  .pad .right { grid-column: 3; grid-row: 2; }
  .pause { padding: 6px 12px; font-size: 14px; }
  @media (hover: hover) and (pointer: fine) { .pad { display: none; } }