.menu-screen {
  overflow: hidden;
}

/* NOT: Dişli konumu artık styles.css'teki .menu-topbar (akış içi üst bar) ile
   yönetiliyor. Buradaki absolute konum kuralları kaldırıldı (üst barı bozuyordu). */
.menu-settings-button {
  transform: none;
}

.menu-scene {
  /* Konum/genişlik/üst boşluk styles.css'te .menu-screen .brand .menu-scene ile
     yönetiliyor; burada SADECE arka plan görseli kalsın. */
  background:
    linear-gradient(rgba(255, 253, 232, 0.2), rgba(255, 253, 232, 0.08)),
    url("./assets/snake-hero-bg-v2.png") center / cover no-repeat;
}

.menu-hero-image {
  z-index: 1;
  width: 90%;
  height: 118%;
  top: 55%;
}

.menu-play-button {
  position: relative;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-content: center;
  column-gap: 12px;
  justify-items: center;
  text-align: center;
}

.menu-play-button .menu-button-icon {
  position: static;
  grid-row: 1 / 3;
  align-self: center;
}

.menu-play-button small {
  grid-column: 2;
}

.unlocked-icon {
  position: relative;
  border-radius: 8px;
  background: linear-gradient(145deg, #f7fff2 0%, #dcefd4 100%);
  border: 2px solid rgba(91, 150, 86, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(28, 84, 45, 0.14);
}

.unlocked-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 16px;
  height: 15px;
  border: 4px solid #63a856;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
  transform: translateX(-50%);
  box-shadow: none;
}

.unlocked-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 8px;
  height: 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(#4b9c45 0 48%, #347737 49% 100%);
  transform: translateX(-50%);
}

@media (max-width: 520px) {
  .menu-settings-button {
    right: 12px;
    top: 16px;
  }

  .menu-scene {
    width: 100%;
    margin-top: 14px;
  }
}