/* ---------- Login & akses ---------- */
.login { gap: 14px; }
.login__logo { margin: 0 0 -4px; line-height: 0; }
.login__logo img { width: 200px; height: auto; }
.login .lead { max-width: 320px; }
.login__form { margin-top: 8px; }
.login__foot { margin-top: 4px; }
.login__buy { color: var(--teal-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: 8px 2px; }
.miss {
  width: 100%; display: grid; gap: 12px; text-align: left;
  background: var(--coral-soft); border-radius: var(--r-md); padding: 16px; animation: pop 0.3s;
}
.miss[hidden] { display: none; }
.miss__head { display: flex; align-items: center; gap: 10px; color: var(--coral-ink); }
.miss__title { margin: 0; font-size: 20px; font-weight: 800; }
.miss__text { margin: 0; font-size: 16px; color: var(--ink); }
.miss .btn--ghost { border-color: transparent; }
.akses .btn { width: 100%; }

/* ---------- Beranda ---------- */
.home { gap: 14px; }
.home__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.home__top .pill { justify-self: start; }
.home__tools { justify-self: end; display: flex; gap: 8px; }
.btn-icon--install { color: var(--teal-ink); background: var(--teal-soft); border-color: var(--teal-soft); box-shadow: 0 4px 0 #9ed9d2; }
.btn-icon--install:active { box-shadow: 0 1px 0 #9ed9d2; }
.brand--small { font-size: 26px; }

.home__hero { display: flex; align-items: center; justify-content: center; gap: 14px; }
.home__hero .mascot { flex-shrink: 0; }
.bubble {
  position: relative; margin: 0; max-width: 240px;
  background: var(--teal-soft); border-radius: var(--r-md); padding: 10px 16px;
  font-size: 18px; font-weight: 800; color: var(--teal-ink);
}
/* Ekor balon menunjuk ke maskot di kiri */
.bubble::before {
  content: ''; position: absolute; left: -10px; top: 50%; margin-top: -10px;
  border: 10px solid transparent; border-left: 0; border-right-color: var(--teal-soft);
}

.home__now { display: grid; grid-template-columns: 1fr 104px; gap: 12px; align-items: stretch; }

.next-card {
  background: var(--surface); border-radius: var(--r-lg); border: 4px solid var(--c-soft, var(--line));
  box-shadow: 0 7px 0 var(--c, var(--line)); padding: 14px 14px 16px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.next-card__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--c-ink, var(--ink)); line-height: 1.2; }
.next-card__ar { margin: 0; font-size: 30px; color: var(--c-ink, var(--ink)); text-align: center; white-space: nowrap; overflow: hidden; }
.progress { height: 12px; border-radius: 999px; background: var(--c-soft, var(--line)); overflow: hidden; }
.progress__bar { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--teal)); }
.progress__text { margin: -2px 0 2px; font-size: 15px; color: var(--ink-soft); }
.next-card .btn { min-height: 56px; padding-inline: 12px; gap: 8px; line-height: 1.15; }

.spin {
  border-radius: var(--r-lg); background: var(--surface); border: 4px solid var(--sun-soft);
  box-shadow: 0 7px 0 var(--sun); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding: 10px 6px; overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s;
}
.spin:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--sun); }
.spin__face { display: flex; flex-direction: column; align-items: center; }
.spin__face.is-enter { animation: spin-in 0.45s ease-out; }
.spin__ar { font-size: 56px; color: var(--sun-ink); }
.spin__name { font-size: 18px; font-weight: 800; color: var(--ink-soft); }
.spin__hint { color: var(--sun-ink); opacity: 0.7; }
.spin__hint .ic { width: 20px; height: 20px; }
@keyframes spin-in { from { opacity: 0; transform: translateY(12px); } }

/* Isi beranda dipusatkan vertikal supaya tidak ada lubang kosong di tengah layar tinggi */
.home__hero { margin-top: auto; }
.home > .hint { margin-bottom: auto; }
.home__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home .mode { padding: 14px 10px 16px; gap: 6px; }
.home .mode__tile { width: 64px; height: 64px; border-radius: 20px; }
.home .mode__tile .ic { width: 36px; height: 36px; }
.home .mode__label { font-size: 24px; line-height: 1.1; }
.mode__desc { font-size: 14px; line-height: 1.3; color: var(--ink-soft); text-align: center; }

@media (min-width: 600px) {
  .home { max-width: 720px; width: 100%; margin: 0 auto; gap: 20px; }
  .home__hero .mascot { width: 140px; height: 140px; }
  .bubble { max-width: 320px; font-size: 22px; padding: 14px 20px; }
  .home__now { grid-template-columns: 1fr 180px; }
  .spin__ar { font-size: 88px; }
  .next-card__title { font-size: 24px; }
  .next-card__ar { font-size: 40px; }
  .home .mode__tile { width: 84px; height: 84px; }
  .mode__desc { font-size: 16px; }
}

/* ---------- Peta pulau ---------- */
.map__path { list-style: none; margin: 0; padding: 8px 0 24px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.map__path::before { content: ''; position: absolute; left: 50%; top: 40px; bottom: 60px; border-left: 6px dashed var(--line-strong); transform: translateX(-3px); }
.map__stop { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 50%; position: relative; }
.map__stop--left { align-self: flex-start; }
.map__stop--right { align-self: flex-end; }
.island {
  position: relative; width: 132px; height: 112px; border-radius: 48% 52% 44% 56% / 58% 50% 50% 42%;
  background: var(--c-soft); border: 5px solid var(--c); box-shadow: 0 8px 0 var(--c-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform 0.12s;
}
.island:active { transform: translateY(5px); }
.island__no { position: absolute; top: -14px; left: -6px; width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 800; box-shadow: 0 3px 0 var(--c-ink); }
.island__ar { font-family: var(--font-ar); font-weight: 700; font-size: 32px; color: var(--c-ink); }
.island__lock .ic { width: 40px; height: 40px; }
.island.is-locked { background: var(--surface-2); border-color: var(--line-strong); box-shadow: 0 8px 0 var(--line-strong); color: var(--mute); }
.island.is-locked .island__no { background: var(--mute); box-shadow: 0 3px 0 #6b7388; }
.island.is-new { animation: pop 0.5s 0.3s both, pulse 1.4s 0.8s ease-in-out infinite; }
.island__name { font-size: 18px; font-weight: 800; }

/* ---------- Kenal huruf ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.next { margin-top: auto; align-self: center; width: min(100%, 360px); }

/* ---------- Tebak bunyi ---------- */
.dots { display: flex; justify-content: center; gap: 8px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line-strong); transition: background 0.2s, transform 0.2s; }
.dot.is-now { background: var(--c, var(--teal)); transform: scale(1.3); }
.dot.is-done { background: var(--ok); }
.tebak__ask { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 8px 0; }
.speaker {
  width: 112px; height: 112px; border-radius: 50%; background: var(--c, var(--teal)); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 0 var(--c-ink, var(--teal-ink));
  animation: pulse 1.6s ease-in-out infinite;
}
.speaker .ic { width: 56px; height: 56px; }
.speaker:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--c-ink, var(--teal-ink)); animation: none; }
.speaker--small { width: 64px; height: 64px; animation: none; box-shadow: 0 5px 0 var(--teal-ink); }
.speaker--small .ic { width: 32px; height: 32px; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: auto; margin-bottom: auto; }
.options .card { min-height: 150px; }
.options .card__ar { font-size: 72px; }
@media (max-width: 380px) { .options .card__ar { font-size: 56px; } .options .card { min-height: 124px; } }

/* ---------- Mode main ---------- */
.unlocked { margin: 0; text-align: center; font-size: 34px; color: var(--teal-ink); word-spacing: 6px; }
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }

/* ---------- Pop balon ---------- */
.balon { padding-bottom: 0; }
.balon__target { display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--surface); border: 3px solid var(--line); border-radius: var(--r-md); padding: 8px 16px; box-shadow: 0 4px 0 var(--line-strong); }
.balon__want { font-size: 56px; color: var(--teal-ink); min-width: 64px; text-align: center; }
.balon__count { font-size: 20px; color: var(--ink-soft); }
.sky { position: relative; flex: 1; min-height: 60dvh; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(#cfeaff, #eaf6ff 70%, #ffffff); }
.balloon {
  --c: var(--teal); --c-ink: var(--teal-ink);
  position: absolute; bottom: -150px; width: 96px; height: 116px;
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0 12%, transparent 13%), var(--c);
  color: #fff; display: grid; place-items: center;
  animation: rise linear forwards;
}
.balloon::after { content: ''; position: absolute; bottom: -34px; left: 50%; width: 2px; height: 34px; background: var(--c-ink); }
.balloon__ar { font-size: 50px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
.balloon--sun { --c: var(--sun); --c-ink: var(--sun-ink); }
.balloon--coral { --c: var(--coral); --c-ink: var(--coral-ink); }
.balloon--sky { --c: var(--sky); --c-ink: var(--sky-ink); }
.balloon--grape { --c: var(--grape); --c-ink: var(--grape-ink); }
.balloon--leaf { --c: var(--leaf); --c-ink: var(--leaf-ink); }
.balloon.wobble .balloon__ar { animation: wobble 0.4s; display: inline-block; }
.balloon.is-popped { animation: burst 0.3s forwards !important; pointer-events: none; }
@keyframes rise { to { transform: translateY(calc(-60dvh - 320px)); } }
@keyframes wobble { 25% { rotate: -12deg; } 75% { rotate: 12deg; } }
@keyframes burst { to { scale: 1.6; opacity: 0; } }