/* ============================================================
   Snake — tema sunset.
   ============================================================ */

.sj-game-host:has(.snk) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;
}
.sj-game-host:has(.snk),
body:has(.sj-game-stage) .sj-game-host:has(.snk) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.snk) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.snk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px;
  height: 100%;
  box-sizing: border-box;
}

/* ============ Jogo ============ */
.snk-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.snk-game[hidden] { display: none; }

.snk-canvas {
  background: linear-gradient(160deg, #2d2438 0%, #3d2e5c 100%);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    0 12px 32px rgba(45, 36, 56, 0.35);
  /* Bloqueia gestos no canvas (scroll, zoom) — apenas swipe via JS */
  touch-action: none;
}

@media (max-width: 700px) {
  .snk { padding: 8px; gap: 8px; }
}