/* ToolyLab — Yılan (Snake) oyunu */
.sk-tool { max-width: 460px; margin: 0 auto; }
.sk-tool .calc-card { gap: var(--spacing-md); }

/* Mobilde kenar boşluklarını azalt → oyun alanı büyür */
@media (max-width: 640px) {
  .sk-tool .calc-card { padding: var(--spacing-md) var(--spacing-sm); }
}

/* Üst çubuk: zorluk + skorlar + duraklat */
.sk-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.sk-scores { display: inline-flex; align-items: center; gap: var(--spacing-sm); }
.sk-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 44px;
}
.sk-stat svg { width: 18px; height: 18px; }
.sk-stat span { color: var(--text-primary); }
.sk-stat-best svg { color: #fbbf24; }

/* Duraklat / devam butonu */
.sk-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.sk-pause:hover { background: rgba(255, 255, 255, 0.14); color: var(--text-primary); }
.sk-pause svg { width: 18px; height: 18px; }
.sk-pause .icon-play { display: none; }
.sk-pause.paused .icon-pause { display: none; }
.sk-pause.paused .icon-play { display: inline-flex; }

/* Tahta + kaplama */
.sk-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--text-secondary);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  touch-action: none;
}
.sk-board canvas { display: block; width: 100%; height: 100%; }
/* Duvardan geçme açık: kesikli kenar = geçilebilir sınır (kapalıyken düz duvar) */
.sk-board.sk-wrap { border-style: dashed; border-color: rgba(167, 139, 250, 0.7); }
.sk-wrap-hint { margin: 6px 0 0; font-size: 0.82rem; }

/* Başla / Duraklat / Oyun bitti kaplaması */
.sk-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  background: rgba(15, 15, 25, 0.74);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  padding: var(--spacing-md);
}
.sk-overlay[hidden] { display: none; }
.sk-ov-icon svg { width: 46px; height: 46px; color: #a5b4fc; }
.sk-overlay.is-over .sk-ov-icon svg { color: #f87171; }
.sk-ov-title { font-size: 1.1rem; }
.sk-ov-sub { font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; }
.sk-ov-sub:empty { display: none; }

/* Ekran yön tuşları — sol/sağ tam boy dikey butonlar, ortada üst/alt yatay iki
   buton (sol=←, sağ=→, üst-orta=↑, alt-orta=↓). Köşeler oval, içinde oklar. */
.sk-dpad {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  width: 100%;
  aspect-ratio: 1.9 / 1;
  margin: 6px auto 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.sk-left  { grid-column: 1; grid-row: 1 / 3; }
.sk-up    { grid-column: 2; grid-row: 1; }
.sk-down  { grid-column: 2; grid-row: 2; }
.sk-right { grid-column: 3; grid-row: 1 / 3; }
.sk-dbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.05s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sk-dbtn:hover { background: rgba(255, 255, 255, 0.16); }
.sk-dbtn:active { background: rgba(129, 140, 248, 0.5); transform: translateY(1px); }
.sk-dbtn svg { width: 30px; height: 30px; }

/* Alt kontrol — Yeni Oyun (tam genişlik) */
.sk-controls { display: flex; }
.sk-ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: none;
  padding: var(--spacing-sm);
  font-size: 0.95rem;
}
.sk-ctl svg { width: 18px; height: 18px; }
.sk-new { background: var(--gradient-primary); color: #fff; border: none; }
.sk-new:hover { opacity: 0.92; color: #fff; }

/* Yeni Oyun üstündeki küçük klavye notu */
.sk-hint {
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* Masaüstünde d-pad'e gerek yok ama görünür kalsın (klavye + tıklama ikisi de çalışır) */