.home-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.home-hero__title {
  margin-bottom: var(--space-2);
}

.home-hero__lead {
  color: var(--color-text-muted);
}

.island-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 20% 15%, var(--color-sea-sparkle) 0 6%, transparent 7%),
    radial-gradient(circle at 80% 75%, var(--color-sea-sparkle) 0 5%, transparent 6%),
    linear-gradient(180deg, var(--color-sea), var(--color-sea-deep));
  overflow: hidden;
}

.island-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-pop);
}

.island-card__art {
  width: min(220px, 100%);
  animation: island-float 5s ease-in-out infinite;
}

.island-card:nth-child(2) .island-card__art {
  animation-delay: -1.2s;
}

.island-card:nth-child(3) .island-card__art {
  animation-delay: -2.4s;
}

.island-card:nth-child(4) .island-card__art {
  animation-delay: -3.6s;
}

.island-card__name {
  margin: 0;
  font-size: var(--font-size-lg);
}

.island-card__tagline {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.island-card__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 800;
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.island-card--open .island-card__badge {
  background: var(--color-strand-living);
  color: var(--color-text);
}

.island-card--open:hover {
  transform: scale(1.05);
}

.island-card--locked {
  filter: grayscale(0.6);
  opacity: 0.75;
  cursor: default;
}

@media (max-width: 640px) {
  .island-map {
    grid-template-columns: 1fr;
    padding: var(--space-5) var(--space-3);
  }
}