/* Layar game ala peta level: peta, soal, hasil, dan daftar Main Bebas.
   Layar game selalu pas 1 layar (100dvh, tanpa scroll); ukuran mengikuti tinggi layar.
   Semua warna dari tokens.css. */

/* ---------- Layar penuh (peta, soal, hasil) ---------- */

.layar {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5dvh, 14px);
  max-width: 560px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  animation: fade-masuk 0.3s ease-out; /* hanya opacity: transform bisa memicu scrollbar sesaat */
}
@keyframes fade-masuk {
  from {
    opacity: 0;
  }
}
.layar > * {
  flex-shrink: 0;
}
.topbar__bintang {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  color: var(--c-koin-ink);
  font-size: 1.15rem;
}
.topbar__bintang .ikon {
  color: var(--c-koin-dark);
}

/* ---------- Animasi bersama ---------- */

.goyang {
  animation: goyang 0.5s ease-in-out;
}
@keyframes goyang {
  20%,
  60% {
    transform: translateX(-10px) rotate(-3deg);
  }
  40%,
  80% {
    transform: translateX(10px) rotate(3deg);
  }
}
@keyframes apung {
  from {
    transform: translateY(-4px);
  }
  to {
    transform: translateY(4px);
  }
}
@keyframes naik-turun {
  50% {
    transform: translateY(-8px);
  }
}
@keyframes denyut {
  50% {
    transform: scale(1.08);
  }
}
@keyframes bintang-pop {
  from {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }
}
@keyframes muncul {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.bintang-terbang {
  position: fixed;
  z-index: 40;
  width: 56px;
  margin: -28px 0 0 -28px;
  pointer-events: none;
  animation: bintang-naik 0.9s ease-out forwards;
}
.bintang-terbang img {
  width: 100%;
  height: auto;
}
@keyframes bintang-naik {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  30% {
    transform: scale(1.2) translateY(-20px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(-140px);
    opacity: 0;
  }
}

/* ---------- Peta ---------- */

.layar--peta {
  max-width: 640px;
  --koin: clamp(46px, 8.6dvh, 70px);
}
.topbar .topbar__title {
  font-size: clamp(0.85rem, 3.9vw, 1.2rem);
  line-height: 1.15;
  /* nama tahap panjang turun ke 2 baris, bukan terpotong */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* Panel per tahap, geser kiri/kanan; tidak ada scroll vertikal */
.peta-geser {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.peta-geser::-webkit-scrollbar {
  display: none;
}
.peta-tahap {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}
.peta-jalan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.peta-jalan__dasar {
  fill: none;
  stroke: var(--c-jalan);
  stroke-width: clamp(22px, 6.5vw, 36px);
  stroke-linecap: round;
}
.peta-jalan__garis {
  fill: none;
  stroke: var(--c-surface);
  stroke-width: 3px;
  stroke-dasharray: 3 12;
  stroke-linecap: round;
  opacity: 0.85;
}
.dekor {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.dekor svg {
  width: 100%;
  height: auto;
}

/* Papan nama tahap */
.papan {
  position: absolute;
  top: 0;
  z-index: 2;
  width: min(32vw, 19dvh, 140px);
  pointer-events: none;
}
.papan--kiri {
  left: 0;
}
.papan--kanan {
  right: 0;
}
.papan__img {
  width: 100%;
  height: auto;
}
/* Teks di atas bidang papan (sekitar 17%-56% tinggi gambar) */
.papan__teks {
  position: absolute;
  top: 17%;
  left: 7%;
  right: 7%;
  height: 39%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  font-size: clamp(0.72rem, 2dvh, 0.95rem);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}
.papan__teks small {
  font-size: 0.8em;
  font-weight: 400;
}
.peta-tahap--kunci .papan {
  filter: grayscale(0.6);
}

/* Koin level: titik pusat di (left, top); isi diposisikan relatif ke titik itu */
.koin {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
}
.koin__btn {
  position: absolute;
  left: calc(var(--koin) / -2);
  top: calc(var(--koin) / -2);
  width: var(--koin);
  height: var(--koin);
  display: grid;
  place-items: center;
  border: 4px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-koin);
  color: var(--c-koin-ink);
  box-shadow: 0 5px 0 var(--c-koin-dark);
  font-size: calc(var(--koin) * 0.42);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.koin__btn:active {
  translate: 0 var(--tekan);
  box-shadow: 0 2px 0 var(--c-koin-dark);
}
.koin--aktif,
.koin--buka {
  --koin: calc(clamp(46px, 8.6dvh, 70px) * 1.2);
  z-index: 2;
}
.koin--aktif .koin__btn,
.koin--buka .koin__btn {
  border-width: 5px;
  background: var(--c-primary);
  color: var(--c-primary-ink);
  box-shadow: 0 5px 0 var(--c-primary-dark);
}
.koin--aktif .koin__btn {
  animation: denyut 1.4s ease-in-out infinite;
}
.koin--kunci .koin__btn {
  background: var(--c-kunci);
  color: var(--c-kunci-ink);
  box-shadow: 0 5px 0 var(--c-kunci-dark);
  cursor: default;
}
.koin--kunci .koin__btn:active {
  translate: none;
}
.koin__btn .ikon {
  width: 42%;
  height: 42%;
}
.koin__sapi {
  position: absolute;
  left: calc(var(--koin) * -0.4);
  bottom: calc(var(--koin) / 2 - 10px);
  width: calc(var(--koin) * 0.8);
  height: auto;
  pointer-events: none;
  animation: naik-turun 2.4s ease-in-out infinite;
}
.koin__bintang {
  position: absolute;
  top: calc(var(--koin) / 2 - 6px);
  left: 0;
  display: flex;
  translate: -50% 0;
  pointer-events: none;
}
.koin__bintang span {
  width: calc(var(--koin) * 0.34);
}
.koin__bintang span:nth-child(2) {
  margin-top: 3px;
}
.koin__bintang img {
  width: 100%;
  height: auto;
}
.koin__bintang .kosong,
.hasil__bintang .kosong {
  opacity: 0.35;
  filter: grayscale(1);
}
.koin__label {
  position: absolute;
  top: calc(var(--koin) / 2 + 8px);
  left: 0;
  translate: -50% 0;
  padding: 1px 12px;
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-primary-dark);
  box-shadow: 0 3px 0 var(--c-line);
  font-size: clamp(0.85rem, 2.2dvh, 1.05rem);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

/* Titik halaman tahap (target sentuh 56px, titiknya kecil) */
.peta-titik {
  display: flex;
  justify-content: center;
}
.peta-titik button {
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.peta-titik button::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: 0 2px 0 var(--c-bukit-jauh);
  transition: transform 0.2s, background-color 0.2s;
}
.peta-titik button[aria-current='true']::before {
  background: var(--c-koin);
  box-shadow: 0 2px 0 var(--c-koin-dark);
  transform: scale(1.4);
}

/* ---------- Layar soal ---------- */

.progres {
  flex: 1;
  height: 18px;
  border-radius: 9px;
  background: var(--c-line);
  overflow: hidden;
}
.progres > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 9px;
  background: var(--c-primary);
  transition: width 0.4s ease-out;
}
.instruksi {
  margin: 0;
  color: var(--c-ink);
  font-size: clamp(1.05rem, 2.8dvh, 1.4rem);
  font-weight: 700;
  text-align: center;
}
.kartu-soal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1dvh, 10px);
  padding: clamp(10px, 2dvh, 20px);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: 0 5px 0 var(--c-line);
}
/* Tombol dengar bulat biru */
.btn-dengar {
  --btn-bg: var(--c-biru);
  --btn-ink: var(--c-biru-ink);
  --btn-edge: var(--c-biru-dark);
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border-radius: 50%;
}
.btn-dengar--besar {
  width: clamp(72px, 15dvh, 112px);
  height: clamp(72px, 15dvh, 112px);
}
.btn-dengar--besar .ikon {
  width: 50%;
  height: 50%;
}
.kartu-soal .btn-dengar:not(.btn-dengar--besar) {
  position: absolute;
  top: 8px;
  right: 8px;
}
.kartu-soal__teks {
  margin: 0;
  padding: 0 calc(var(--tap) - 8px);
  font-size: clamp(1.9rem, 6.4dvh, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.kartu-soal__sub {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: clamp(0.9rem, 2.2dvh, 1.1rem);
}

/* Pilihan jawaban: grid 2 kolom, kartu putih, border oranye saat dipilih */
.jawaban {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.6dvh, 14px);
}
.jawaban > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - clamp(8px, 1.6dvh, 14px) / 2);
}
.pilihan {
  display: grid;
  place-items: center;
  min-height: clamp(56px, 11dvh, 100px);
  padding: 6px;
  border: 4px solid var(--c-surface);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: 0 5px 0 var(--c-line);
  font-size: clamp(1.8rem, 6dvh, 2.8rem);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: border-color 0.15s, transform 0.15s;
}
.pilihan:active {
  translate: 0 var(--tekan);
  box-shadow: 0 2px 0 var(--c-line);
}
.pilihan[aria-pressed='true'] {
  border-color: var(--c-pilih);
}
.pilihan.benar {
  border-color: var(--c-primary);
  transform: scale(1.05);
}
.pilihan--apung {
  animation: apung 3.4s ease-in-out infinite alternate;
}
.pilihan--apung.goyang {
  animation: goyang 0.5s ease-in-out;
}
.pilihan--gambar img {
  width: auto;
  max-width: 100%;
  height: clamp(64px, 17dvh, 150px);
  object-fit: contain;
}

.pengisi {
  flex: 1 1 auto;
  min-height: 0;
}

/* Tombol Cek: hijau 3D, menempel di bawah */
.btn-cek {
  min-height: var(--tap);
  font-size: clamp(1.1rem, 2.8dvh, 1.35rem);
}
.btn-cek:disabled {
  --btn-bg: var(--c-kunci);
  --btn-ink: var(--c-kunci-ink);
  --btn-edge: var(--c-kunci-dark);
  opacity: 1;
}

/* Sapi di pojok bawah, tidak ikut mendorong layout */
.sapi-sudut {
  position: absolute;
  z-index: 3;
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--tap) + 10px);
  width: clamp(56px, 12dvh, 104px);
  pointer-events: none;
}
.sapi-sudut img {
  width: 100%;
  height: auto;
}
.sapi-sudut [data-pose='mikir'] {
  display: block;
  animation: naik-turun 2.6s ease-in-out infinite;
}
.sapi-sudut [data-pose='senang'] img {
  animation: bintang-pop 0.4s var(--ease-bounce);
}
.karakter--gerak {
  animation: lompat 0.9s var(--ease-bounce);
}

/* ---------- Susun Kata ---------- */

.wadah {
  position: relative;
  width: min(62vw, 26dvh, 300px);
}
.wadah__img {
  width: 100%;
  height: auto;
}
/* Slot duduk di atas bak wadah (bagian atas gambar kosong) */
.wadah__slot {
  position: absolute;
  top: 0;
  left: 16%;
  right: 4%;
  height: 26%;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.slot {
  flex: 1;
  max-width: 96px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px dashed var(--c-warm-dark);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: clamp(1.3rem, 4dvh, 2rem);
  font-weight: 700;
  transition: transform 0.2s, background-color 0.2s;
}
.slot.dekat {
  background: var(--c-accent);
  transform: scale(1.08);
}
.slot.terisi {
  border: 3px solid var(--c-pilih);
  cursor: pointer;
  animation: masuk-slot 0.3s var(--ease-bounce);
}
.slot.benar {
  border-color: var(--c-primary);
}
@keyframes masuk-slot {
  from {
    transform: scale(0.6);
  }
}
.wadah--jalan {
  animation: wadah-jalan 1.5s ease-in forwards;
}
.wadah--naik {
  animation: wadah-naik 1.5s ease-in forwards;
}
.wadah--terbang {
  animation: wadah-terbang 1.5s ease-in forwards;
}
@keyframes wadah-jalan {
  15% {
    transform: translateX(-12px);
  }
  100% {
    transform: translateX(110vw);
  }
}
@keyframes wadah-naik {
  100% {
    transform: translateY(-110vh) scale(0.9);
  }
}
@keyframes wadah-terbang {
  100% {
    transform: translate(40vw, -110vh);
  }
}
.keping {
  position: relative;
  cursor: grab;
  touch-action: none; /* Pointer Events: seret tanpa menggulir layar */
  transition: transform 0.35s var(--ease-bounce), border-color 0.15s;
}
.keping.seret {
  z-index: 10;
  cursor: grabbing;
  transition: none;
  box-shadow: 0 14px 24px rgb(0 0 0 / 0.2);
}
.keping.terpakai {
  visibility: hidden;
}

/* ---------- Hasil ---------- */

.layar--hasil {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.karakter--hasil {
  width: min(56vw, 32dvh, 260px);
  height: auto;
  animation: naik-turun 2.4s ease-in-out infinite;
}
.hasil__bintang {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.hasil__bintang span {
  width: clamp(54px, 10dvh, 92px);
  animation: bintang-pop 0.5s var(--ease-bounce) both;
}
.hasil__bintang span:nth-child(2) {
  width: clamp(66px, 12.5dvh, 112px);
}
.hasil__bintang img {
  width: 100%;
  height: auto;
}
.layar--hasil .title {
  font-size: clamp(1.6rem, 5dvh, 2.6rem);
}
.hasil__tombol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  animation: muncul 0.4s ease-out both;
}

/* ---------- Main Bebas ---------- */

.main-list {
  display: grid;
  gap: 18px;
}
.main-list .btn {
  justify-content: flex-start;
  text-align: left;
}
.main-list .ikon {
  width: 40px;
  height: 40px;
}
.main-list .btn:disabled {
  --btn-bg: var(--c-kunci);
  --btn-ink: var(--c-kunci-ink);
  --btn-edge: var(--c-kunci-dark);
  opacity: 1;
}
.main-list small {
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
}

/* ---------- Beranda ---------- */

.home-sapa {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4dvh, 12px);
}
.karakter--home {
  width: min(48vw, 24dvh, 220px);
  height: auto;
  animation: naik-turun 2.6s ease-in-out infinite;
}
.home-sapa .lead {
  color: var(--c-ink);
}
/* Satu tombol utama "Ayo Main!" + tombol kedua "Main Bebas" yang lebih kecil tapi tetap jelas */
.layar--home .home-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.2dvh, 20px);
  padding-bottom: 5px; /* ruang untuk bayangan 3D */
}
.layar--home .home-mode .btn {
  flex-direction: row;
}
.layar--home .home-mode .btn-ayo {
  min-height: clamp(76px, 14dvh, 128px);
  border-radius: var(--radius-l);
  font-size: clamp(1.6rem, 4.6dvh, 2.4rem);
}
.layar--home .btn-ayo .ikon {
  width: clamp(36px, 6dvh, 56px);
  height: clamp(36px, 6dvh, 56px);
}
.layar--home .home-mode .btn-bebas {
  width: 84%;
  min-height: clamp(56px, 9dvh, 80px);
  font-size: clamp(1.15rem, 3dvh, 1.5rem);
}
.layar--home .btn-bebas .ikon {
  width: clamp(26px, 4dvh, 36px);
  height: clamp(26px, 4dvh, 36px);
}