.game-window--snake{max-width:440px}
.game-canvas-wrap--snake{aspect-ratio:1/1;background:var(--bg-alt)}
#snakeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}

.game-diff-buttons{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.game-diff-buttons.is-hidden{display:none}
.game-overlay-title.is-countdown{font-size:2.6rem}

.game-card-snake-scene{position:absolute;inset:0}
.game-card-snake-body{
  position:absolute;inset:0;
  animation:game-card-snake-move 4.8s ease-in-out infinite;
}
@keyframes game-card-snake-move{
  0%{transform:translate(0,0)}
  25%{transform:translate(14%,0)}
  50%{transform:translate(14%,10%)}
  75%{transform:translate(0,10%)}
  100%{transform:translate(0,0)}
}
.game-card-snake-seg{
  position:absolute;width:16px;height:16px;border-radius:4px;background:var(--accent);opacity:.85;
}
.game-card-snake-seg--head{
  background:var(--accent-bright);box-shadow:0 0 16px rgba(143,227,168,.6);
  animation:game-card-snake-pulse 1.8s ease-in-out infinite;
}
.game-card-snake-bug{
  position:absolute;width:13px;height:13px;border-radius:50%;background:var(--warn);
  box-shadow:0 0 12px rgba(251,146,60,.55);
  animation:game-card-snake-blink 1.8s ease-in-out infinite;
}

@media (max-width:520px){
  .game-window--snake{max-width:none}
}

@keyframes game-card-snake-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}
@keyframes game-card-snake-blink{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

@media (prefers-reduced-motion: reduce){
  .game-card-snake-seg--head{animation:none}
  .game-card-snake-bug{animation:none}
  .game-card-snake-body{animation:none}
}