[qcms-id="571"] {
  --c-bg: #10151c; --c-grid: #18202a; --c-snake: #3ddc97; --c-food: #ff5d73;
  max-inline-size: 28rem; margin-inline: auto; text-align: center;

  .hud { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; margin-block: .5rem; }
  .stage { position: relative; }
  canvas {
    display: block; inline-size: 100%; aspect-ratio: 1; border-radius: .75rem;
    background: var(--c-bg); touch-action: none;
  }
  .start {
    position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
    padding: .7em 1.8em; font: inherit; font-weight: 600; border: 0; border-radius: 99px;
    background: var(--c-snake); color: var(--c-bg); cursor: pointer;
    &[hidden] { display: none; }
  }
}