@media (max-width: 400px){
  .shell{ padding: 12px; }
  .board{ padding: 12px; }
  .ladder{ --gap: 8px; }
}

/* 3'lü dizilim için değişken tabanlı grid */
.ladder{
  display:flex;
  flex-direction: column-reverse;
  gap:12px;
  padding:8px;
  --cols: 3;          /* JS'ten de set edebiliriz */
  --gap: 10px;
}

.ladder-row{
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
}

/* Yumurta butonlar sütun genişliğini tamamen kullanır */
.ladder-row .btn-3d{
  width: 100%;
  /* min-height burada kalsa bile yumurta CSS'i ile çakışmayacak */
}


/* Yalnız en alt satır aktif; üsttekiler kilitli */
.ladder-row.is-locked .btn-3d{
  opacity:.6;
  pointer-events:none;
}

/* === AKTİF BASAMAK: canlı animasyon (yukarı–aşağı yumuşak sallanma) === */
@keyframes floaty {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
/* Çok sallanmasın diye satıra az veriyoruz, butonlarda da hafif nefes efekti */
.ladder-row.is-active { animation: floaty 1400ms ease-in-out infinite; }
@keyframes breathe {
  0%,100% { box-shadow:
      0 0 0 4px var(--accent-soft),
      0 10px 22px rgba(91,141,239,.18),
      inset 0 2px 0 rgba(255,255,255,.95),
      inset 0 -4px 8px rgba(23,50,77,.08),
      0 1px 0 #fff;
  }
  50% { box-shadow:
      0 0 0 6px var(--accent-soft),
      0 12px 24px rgba(91,141,239,.22),
      inset 0 2px 0 rgba(255,255,255,.95),
      inset 0 -5px 10px rgba(23,50,77,.10),
      0 1px 0 #fff;
  }
}
.ladder-row.is-active .btn-3d{
  border-color: var(--accent);
  animation: breathe 1800ms ease-in-out infinite;
}

/* === BAŞARI: satır tamamlandı (her iki buton da yeşil ve pasif) === */
.ladder-row.is-done .btn-3d{
  background: linear-gradient(180deg,#EFFFF1 0%, #DEF9E4 100%);
  border-color: var(--ok);
  color: #165a00;
  pointer-events: none;
  opacity: 1; /* okunaklı kalsın */
}

/* === İşaret Rozetleri (✓ / ✗) === */
.btn-3d .mark{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px; height: 28px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.btn-3d .mark.tick{
  background: #DFF5E6;
  color: #1a7f00;
  border: 2px solid #8dd69c;
}
.btn-3d .mark.cross{
  background: #FFE3E3;
  color: #b30021;
  border: 2px solid #ffb4b4;
}
/* Geçilen (tamamlanan) basamak: yeşil + tamamen pasif */
.ladder-row.is-done .btn-3d{
  background: linear-gradient(180deg,#EFFFF1 0%, #DEF9E4 100%);
  border-color: var(--ok);
  color: #165a00;
  pointer-events: none !important;   /* tıklanamaz */
  opacity: 1;
}