/* ── Akimi Islands — the boat ─────────────────────────────────────────────
   Two things live here: the panel that asks where to sail, and the screen
   that covers the world while one island is torn down and the next is built.

   The place cards reuse .card from shop.css on purpose, so choosing an island
   feels like the same action as choosing a hat.
   ───────────────────────────────────────────────────────────────────────── */

.card--place {
  min-height: 186px;
  padding: 16px 12px 14px;
  gap: 6px;
}

.card-face--place {
  width: 68px;
  height: 68px;
  font-size: 38px;
  background: rgba(79, 195, 247, .14);
}

.card-blurb {
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink-soft);
  text-align: center;
  /* Pushes the "Sail" line to the bottom, so every card's footer lines up
     however long the description is. */
  margin-bottom: auto;
}

/* Where the explorer is standing right now — the same gold ring the shop
   uses for the hat you are wearing, so the meaning carries across. */
.card--place[data-state="here"] {
  background: #FFF7E4;
  box-shadow: 0 0 0 3px var(--gold), var(--shadow-sm);
}
.card--place[data-state="here"] .card-price { color: #8A5B12; }

.card--place[data-state="open"] .card-price { color: #0E7A55; }

/* Not open yet. Faded, never crossed out, and it keeps its place on the
   shelf — it is the reason to keep playing. */
.card--place[data-state="locked"] { opacity: .66; }
.card--place[data-state="locked"] .card-face { filter: grayscale(.75); }
.card--place[data-state="locked"] .card-price { color: var(--ink-soft); font-weight: 600; }

.voyage-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* ── Sailing ──────────────────────────────────────────────────────────────
   Covers everything while the old island is freed and the new one is grown.
   It is not decoration: building a world takes a moment on a cheap tablet,
   and a child watching trees pop into existence one by one thinks the game
   has broken.
   ───────────────────────────────────────────────────────────────────────── */

#sailing {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
  background: linear-gradient(180deg, #8FE0F5 0%, #5EC8EE 55%, #2E9DC4 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
#sailing.on { opacity: 1; visibility: visible; }

.sailing-boat {
  font-size: 74px;
  animation: sail-along 2.4s ease-in-out infinite;
}
@keyframes sail-along {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50%      { transform: translateY(-16px) rotate(7deg); }
}

.sailing-where {
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 0 #2E9DC4, 0 10px 26px rgba(11, 60, 80, .35);
}
.sailing-note { font-size: 18px; color: #0E4258; }

/* The waves the boat rides over. Three bars, each drifting at its own speed,
   which is enough to read as a moving sea. */
.sailing-sea {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(280px, 70vw);
  margin-top: 6px;
}
.sailing-sea i {
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  animation: sea-slide 1.9s ease-in-out infinite;
}
.sailing-sea i:nth-child(2) { width: 78%; animation-delay: .25s; }
.sailing-sea i:nth-child(3) { width: 56%; animation-delay: .5s; }
@keyframes sea-slide {
  0%, 100% { transform: translateX(-14px); opacity: .5; }
  50%      { transform: translateX(14px);  opacity: .95; }
}

@media (max-width: 560px) {
  .voyage-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
  .card--place { min-height: 172px; }
  .card-face--place { width: 58px; height: 58px; font-size: 32px; }
}

/* Phone held sideways: the cards go into a row that scrolls across, because
   three of them stacked will not fit above the fold. */
@media (max-height: 520px) {
  .voyage-grid {
    grid-auto-flow: column;
    grid-auto-columns: 158px;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .card--place { min-height: 158px; }
}