/* Font lokal, bukan CDN Google: kuota pengguna target terbatas dan app ini
   harus tetap rapi waktu offline. Satu berkas variabel, 15 KB. */
@font-face {
  font-family: "Outfit";
  src: url("font/outfit.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: only light;
  font-family: "Outfit", system-ui, "Segoe UI", sans-serif;
  background: #0b0c0e;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Wajib dan harus !important: beberapa kelas di bawah memasang display
   sendiri, tanpa aturan ini atribut hidden-nya jadi tidak berguna. */
[hidden] {
  display: none !important;
}

html,
body {
  min-width: 320px;
  width: 100%;
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  overflow: hidden;
  background: #ffffff;
  color: #244759;
  user-select: none;
}

button {
  font: inherit;
  touch-action: manipulation;
}

/* Kolom app di tengah halaman, persis pola Salad Seminggu: lebar maksimal
   28rem, setinggi layar, tanpa bingkai HP bohongan. Di HP dia memenuhi
   layar dengan sendirinya karena lebarnya cuma dibatasi, bukan dipaksa. */
.page {
  display: grid;
  min-height: 100dvh;
  place-items: start center;
}

.app-shell {
  position: relative;
  width: 100%;
  max-width: 28rem;
  height: 100dvh;
  overflow: hidden;
  background: #0b0c0e;
  container-type: inline-size;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.app {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.screen {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.screen.is-hidden {
  display: none;
}

/* ============================================================
   MENU UTAMA - "Bioskop": hero besar + rak per kategori.
   Kartu memakai assets/thumbs (sekitar 50 KB), bukan PNG penuh.
   ============================================================ */
.theme-menu {
  overflow-y: auto;
  padding-bottom: max(34px, env(safe-area-inset-bottom));
  background: #0b0c0e;
  color: #f2f1ee;
  scrollbar-width: none;
}

.theme-menu::-webkit-scrollbar {
  display: none;
}

.menu-hero {
  position: relative;
  display: block;
  height: min(430px, 98cqw);
}

.menu-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.menu-hero__scrim {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 22px 26px;
  background: linear-gradient(180deg, rgba(11, 12, 14, .12) 0 38%, rgba(11, 12, 14, .74) 72%, #0b0c0e 100%);
}

.menu-hero__kicker {
  margin: 0;
  color: rgba(242, 241, 238, .62);
  font-size: .72rem;
  font-weight: 500;
}

.menu-hero h1 {
  margin: 6px 0 0;
  font-size: clamp(1.9rem, 9cqw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.menu-hero__sub {
  margin: 6px 0 0;
  color: rgba(242, 241, 238, .66);
  font-size: .82rem;
}

.menu-hero__play {
  margin-top: 16px;
  padding: 13px 32px;
  border: 0;
  border-radius: 999px;
  background: #f4f3f0;
  color: #0b0c0e;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms ease;
}

.menu-hero__play:active {
  transform: scale(.97);
}

.menu-hero__play:focus-visible {
  outline: 3px solid #f4f3f0;
  outline-offset: 4px;
}

.shelf {
  padding-top: 26px;
}

.shelf__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 22px 12px;
}

.shelf__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.015em;
}

.shelf__head span {
  color: rgba(242, 241, 238, .38);
  font-size: .72rem;
}

.shelf__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 22px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 22px;
  scrollbar-width: none;
}

.shelf__track::-webkit-scrollbar {
  display: none;
}

.shelf-card {
  flex: 0 0 auto;
  width: clamp(140px, 40cqw, 172px);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}

/* Kartu memakai rasio 9:16, sama persis dengan gambar aslinya, supaya
   seluruh isi dunia kelihatan dan tidak ada yang terpotong. */
.shelf-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 14px;
  background: #1b1e23;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: transform 160ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.shelf-card:active img {
  transform: scale(.96);
}

.shelf-card:focus-visible img {
  outline: 3px solid #f4f3f0;
  outline-offset: 3px;
}

.shelf-card__label {
  display: block;
  margin-top: 8px;
  color: rgba(242, 241, 238, .88);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.2;
}

.shelf-card__meaning {
  display: block;
  margin-top: 2px;
  color: rgba(242, 241, 238, .4);
  font-size: .68rem;
}

/* Pengaturan gaya tulisan: dipindah ke dasar menu, bukan lagi di puncak. */
.text-style-picker {
  margin: 38px 22px 0;
  padding: 16px 14px 15px;
  border-top: 1px solid rgba(242, 241, 238, .1);
}

.text-style-picker__title {
  display: block;
  margin-bottom: 11px;
  color: rgba(242, 241, 238, .45);
  font-size: .72rem;
  font-weight: 500;
  text-align: center;
}

.text-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.text-style-option {
  display: grid;
  min-width: 0;
  min-height: 72px;
  place-items: center;
  gap: 6px;
  padding: 9px 6px 8px;
  border: 1px solid rgba(242, 241, 238, .12);
  border-radius: 12px;
  background: rgba(242, 241, 238, .04);
  color: rgba(242, 241, 238, .55);
  font-size: .68rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.text-style-option.is-selected {
  border-color: rgba(242, 241, 238, .72);
  background: rgba(242, 241, 238, .1);
  color: #f2f1ee;
}

.text-style-option:active {
  transform: scale(.97);
}

.text-style-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
}

.text-style-sample--sticker {
  padding: 5px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: #ff795e;
  text-shadow: 0 1px 0 rgba(76, 42, 36, .3);
}

.text-style-sample--bubble {
  padding: 5px 11px;
  border-radius: 10px;
  color: #32627d;
  background: #fff7ca;
}



/* Tiga lapis: bilah atas, gambar, bilah bawah. Tidak ada satu pun tombol
   yang menindih gambar - gambar dunia harus kelihatan utuh. */
/* Tiga lapis: bilah atas, gambar berbingkai, bilah bawah. Warna bilahnya
   diambil dari gambar dunia itu sendiri lewat --utama/--terang/--tinta
   (assets/palet.json, dibikin oleh: npm run palet). */
.play-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* container-type: size supaya .scene-shell bisa memakai cqw dan cqh
     buat menghitung bingkai gambarnya. */
  container-type: size;
  /* Cadangan untuk browser lama tanpa color-mix(): pita di atas/bawah gambar
     tetap berwarna terang, bukan hitam. */
  background: #e6f1ee;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--utama) 52%, #fff),
    color-mix(in srgb, var(--utama) 14%, #fff) 46%,
    color-mix(in srgb, var(--utama) 42%, #fff));
}

.play-bar {
  position: relative;
  z-index: 30;
  align-self: stretch;
  display: flex;
  align-items: center;
  /* Bilah ini cuma wadah tombol. Kalau dia ikut menangkap sentuhan, benda di
     baris paling atas jadi tidak bisa ditekan (ketahuan 20 Sep 2026). */
  pointer-events: none;
}
.play-bar > * { pointer-events: auto; }
/* Penghitung "3 / 50" dan titik progres hanya informasi: sentuhan di atasnya
   diteruskan ke benda di belakangnya (dulu bel dan kerang di tepi bawah
   sebagian tidak bisa ditekan). */
.play-bar > .play-center { pointer-events: none; }

/* Bilah atas lebih tinggi dari bilah bawah supaya kata punya ruang dan
   tidak pernah ketabrak poni HP. */
.play-bar--top {
  flex: 1.5 1 auto;
  min-height: 120px;
  justify-content: flex-start;
  /* Minimal 16px walau HP-nya tidak punya poni, supaya kata tidak pernah
     mepet ke bilah status. */
  padding: max(env(safe-area-inset-top), 16px) 16px 0;
}

/* Kisi tiga kolom, bukan space-between: letak tombol dan penghitung jadi
   pasti, tidak bergeser mengikuti panjang teks. */
.play-bar--bottom {
  flex: 1 1 auto;
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 0 16px env(safe-area-inset-bottom);
}

#previous-button { justify-self: start; }
#next-button { justify-self: end; }

/* Gambar dibingkai: ada jarak di keempat sisinya dan sudutnya dibulatkan,
   jadi warna bilah mengelilinginya dan gambarnya tidak menyentuh garis. */
.scene-shell {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  height: min(calc((100cqw - 28px) * 16 / 9), calc(100cqh - 188px));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 22px;
  background: #c9f1ff;
  box-shadow:
    0 0 0 1px rgba(60, 45, 30, .08),
    0 10px 24px -12px rgba(60, 45, 30, .45);
}

.scene-image,
.hotspot-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-image {
  display: block;
  object-fit: fill;
  pointer-events: none;
}

/* Standar semua dunia: artwork menjadi latar penuh. Gambar dan hotspot
   tetap satu lapisan, sedangkan tombol navigasi asli berada di atasnya.
   Artwork-nya 9:16. HP sekarang (apalagi kalau app dipasang ke layar HP)
   lebih jangkung dari itu; dulu gambarnya ditarik memanjang sampai lingkaran
   jadi lonjong dan persegi jadi persegi panjang. Sekarang bingkainya tetap
   9:16 di tengah layar, sisanya diisi warna dunia itu sendiri. */
.play-screen.is-fullbleed .scene-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  width: min(100cqw, calc(100cqh * 9 / 16));
  height: min(100cqh, calc(100cqw * 16 / 9));
  margin: auto;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

/* Gambar dunia sedang dimuat: gambar dunia sebelumnya sudah dibuang, yang
   tampil adalah thumbnail buram dari dunia yang BARU. Benda belum bisa
   disentuh sampai gambar aslinya siap, supaya yang terdengar selalu sama
   dengan yang terlihat. */
.scene-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--scene-thumb, none) center / 100% 100% no-repeat;
  filter: blur(10px) saturate(1.05);
  transform: scale(1.06);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.scene-shell.is-loading::before { opacity: 1; }

.scene-shell.is-loading .scene-image,
.scene-shell.is-loading .hotspot-layer {
  visibility: hidden;
}

.scene-shell.is-loading .hotspot-layer { pointer-events: none; }

.scene-status {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  pointer-events: none;
}

.scene-shell.is-loading .scene-status { display: flex; }

.scene-status__spinner {
  width: 46px;
  height: 46px;
  border: 5px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  opacity: 0;
  /* Muncul sesudah 0,45 detik: gambar yang sudah tersimpan di HP tidak
     sempat memunculkan putaran ini sama sekali. */
  animation: scene-spin 900ms linear infinite, scene-status-in 200ms ease 450ms forwards;
}

.scene-status__text,
.scene-status__retry { display: none; }

.scene-shell.is-slow .scene-status__text,
.scene-shell.is-failed .scene-status__text,
.scene-shell.is-slow .scene-status__retry,
.scene-shell.is-failed .scene-status__retry { display: block; }

.scene-shell.is-failed .scene-status__spinner { display: none; }

.scene-status__text {
  max-width: 240px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255, 252, 232, .95);
  color: #34463c;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

.scene-status__retry {
  min-height: 44px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  color: var(--tinta, #295b72);
  background: #fff;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--utama, #46cbd5) 40%, #fff), 0 8px 18px rgba(0, 0, 0, .18);
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
}

@keyframes scene-spin { to { transform: rotate(360deg); } }
@keyframes scene-status-in { to { opacity: 1; } }

.play-screen.is-fullbleed .play-bar--top,
.play-screen.is-fullbleed .play-bar--bottom {
  position: absolute;
  left: 0;
  right: 0;
  flex: none;
}

/* Tinggi bilah ikut menghitung poni/Dynamic Island dan garis home iPhone.
   Dulu tingginya tetap 108px, jadi di app yang dipasang ke layar HP kartu
   kata Arab sebagian tertutup bilah status. */
.play-screen.is-fullbleed .play-bar--top {
  top: 0;
  height: calc(max(env(safe-area-inset-top), 16px) + 92px);
  min-height: 0;
}

.play-screen.is-fullbleed .play-bar--bottom {
  bottom: 0;
  height: calc(max(env(safe-area-inset-bottom), 6px) + 76px);
  min-height: 0;
  padding-bottom: max(env(safe-area-inset-bottom), 6px);
}

.hotspot-layer {
  z-index: 2;
}

.theme-hotspot {
  position: absolute;
  z-index: var(--z, 2);
  padding: 0;
  border: 0;
  border-radius: var(--radius, 40%);
  background: transparent;
  cursor: pointer;
  isolation: isolate;
}

.theme-hotspot::before {
  content: "";
  position: absolute;
  left: var(--piece-left, 0%);
  top: var(--piece-top, 0%);
  width: var(--piece-width, 100%);
  height: var(--piece-height, 100%);
  border-radius: inherit;
  background-image: var(--scene-image);
  background-repeat: no-repeat;
  background-size: var(--bg-size);
  background-position: var(--bg-position);
  filter:
    drop-shadow(0 .58rem .18rem rgba(76, 72, 44, .34))
    drop-shadow(0 -.12rem .08rem rgba(255,255,255,.38));
  transform-origin: 50% 74%;
  animation: soft-float 2.65s ease-in-out infinite;
  transition: filter 120ms ease;
  pointer-events: none;
}

/* Standar tombol semua dunia (lihat SOFT_SHAPE_THEMES).
   Tepinya dilebur pakai mask supaya tidak ada patahan kotak melengkung.
   Bayangannya dipindah ke elemen induk, sebab filter dijalankan sebelum mask:
   kalau tetap di ::before, bayangannya ikut kepotong mask. */
.hotspot-layer[data-shape="soft"] .theme-hotspot {
  filter:
    drop-shadow(0 .5rem .3rem rgba(76, 72, 44, .26))
    drop-shadow(0 -.1rem .1rem rgba(255, 255, 255, .3));
  transition: filter 140ms ease;
}

.hotspot-layer[data-shape="soft"] .theme-hotspot::before {
  border-radius: 0;
  filter: none;
  mask-image: radial-gradient(closest-side at 50% 50%, #000 62%, rgba(0, 0, 0, .6) 82%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 62%, rgba(0, 0, 0, .6) 82%, transparent 100%);
}

.hotspot-layer[data-shape="soft"] .theme-hotspot:hover {
  filter:
    drop-shadow(0 .62rem .34rem rgba(76, 72, 44, .3))
    drop-shadow(0 -.12rem .12rem rgba(255, 255, 255, .38));
}

.hotspot-layer[data-shape="soft"] .theme-hotspot:hover::before { filter: none; }

/* Benda yang sudah punya potongan transparan: tidak perlu mask sama sekali,
   sebab bentuknya sudah tersimpan di alpha berkas PNG-nya. Bayangan yang
   dipasang di elemen induk otomatis mengikuti siluetnya. */
.theme-hotspot[data-cut]::before {
  border-radius: 0;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.hotspot-layer .theme-hotspot[data-cut] {
  filter:
    drop-shadow(0 .42rem .26rem rgba(76, 72, 44, .3))
    drop-shadow(0 -.08rem .08rem rgba(255, 255, 255, .28));
}

.theme-hotspot:nth-child(2n)::before { animation-delay: -.85s; animation-duration: 3s; }
.theme-hotspot:nth-child(3n)::before { animation-delay: -1.45s; animation-duration: 2.8s; }
.theme-hotspot:nth-child(4n)::before { animation-delay: -.35s; animation-duration: 3.25s; }

.theme-hotspot:hover::before {
  filter:
    drop-shadow(0 .7rem .22rem rgba(76, 72, 44, .38))
    drop-shadow(0 -.15rem .1rem rgba(255,255,255,.48));
}

.theme-hotspot.is-active::before {
  animation: soft-press 420ms cubic-bezier(.2,.9,.25,1);
}

.theme-hotspot:focus-visible {
  outline: 5px solid rgba(255,255,255,.92);
  outline-offset: 4px;
}

/* Dipasang di bawah baris tombol bundar, bukan sejajar dengannya, supaya
   kata yang muncul tidak pernah menindih tombol rumah. */
.word-pop {
  position: absolute;
  z-index: 29;
  bottom: 6px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 106px;
  max-width: min(220px, calc(100% - 138px));
  min-height: 0;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(.86);
  transform-origin: 50% 100%;
  transition: opacity 190ms ease;
}

.word-pop__english {
  display: flex;
  align-items: center;
  justify-content: center;
}

.word-pop__arabic {
  display: block;
  max-width: 100%;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(1.15rem, 5cqw, 1.65rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Bantuan baca latin selalu kecil: Arab tetap menjadi fokus utama. */
.word-pop__latin {
  display: block;
  width: auto;
  max-width: 100%;
  margin-top: .08em;
  overflow: hidden;
  font-size: clamp(.56rem, 2.25cqw, .72rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .015em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Subtitle Indonesia: kecil dan tenang, cuma pendamping kata Arabnya. */
.word-pop__meaning {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  margin-top: .24em;
  padding: .2em .62em .23em;
  border: 0;
  border-radius: 999px;
  color: var(--tinta, #4a6b78);
  background: rgba(255,255,255,.94);
  box-shadow: 0 .12em .3em rgba(60,50,45,.16);
  font-size: clamp(.62rem, 2.55cqw, .82rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: none;
}

/* Sambutan dunia duduk di bilah atas, satu tempat dengan kata, BUKAN
   melayang di atas gambar. Dulu dia menutupi benda paling atas. */
.intro-pop {
  position: absolute;
  z-index: 31;
  left: 0;
  right: 0;
  bottom: 10px;
  margin-inline: auto;
  width: fit-content;
  display: flex;
  max-width: calc(100% - 132px);
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: .5em .8em .58em;
  border: clamp(3px, .9cqw, 5px) solid rgba(255,255,255,.96);
  border-radius: .9em;
  color: var(--tinta, #295b72);
  background: rgba(255, 252, 232, .96);
  box-shadow: 0 .16em 0 color-mix(in srgb, var(--utama, #cd9f49) 50%, #fff), 0 .3em .6em rgba(34, 65, 66, .2);
  font-size: clamp(.95rem, 4.4cqw, 1.35rem);
  font-weight: 1000;
  line-height: 1.12;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.86);
  transform-origin: 50% 100%;
  transition: opacity 190ms ease;
}

.intro-pop__emoji {
  flex: 0 0 auto;
  font-size: 1.35em;
}

.intro-pop__copy {
  display: grid;
  justify-items: center;
  gap: .22em;
  min-width: 0;
}

.intro-pop__copy b {
  font: inherit;
  font-weight: 1000;
  white-space: normal;
  overflow-wrap: anywhere;
}

.intro-pop__copy small {
  display: block;
  max-width: 100%;
  color: color-mix(in srgb, var(--tinta, #295b72) 78%, #fff);
  font-size: .55em;
  font-weight: 800;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
}

.play-center {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
}

.intro-pop.is-visible {
  transition: none;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: intro-pop-in 2.6s cubic-bezier(.18,.85,.28,1) forwards;
}

/* Kondisi diam ditulis eksplisit, bukan cuma diandalkan ke animasi. Kalau
   animasi dimatikan (hemat gerak, browser lama, tab di latar), katanya tetap
   muncul. Animasinya cuma menambah lenting. */
.word-pop.is-visible {
  /* transition dimatikan saat muncul supaya katanya langsung penuh, bukan
     numpang animasi. Waktu kelasnya dilepas, transition di aturan dasar yang
     jalan, jadi hilangnya tetap halus. */
  transition: none;
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: word-pop-in 3.8s cubic-bezier(.18,.85,.28,1) forwards;
}

.word-pop__letter {
  display: inline-block;
  font-size: clamp(1.8rem, 7.8cqw, 2.65rem);
  font-weight: 1000;
  line-height: .95;
  letter-spacing: -.025em;
}

.play-screen[data-text-style="sticker"] .word-pop {
  padding: 6px 16px 8px;
  border: 3px solid #ffffff;
  border-radius: 14px;
  color: #fff;
  background: var(--utama, #ff785e);
  box-shadow: 0 .12em 0 var(--tinta, #c64e46), 0 .3em .5em rgba(65, 65, 50, .25);
  text-shadow: 0 .065em 0 rgba(70, 45, 35, .38);
}

.play-screen[data-text-style="sticker"] .word-pop__letter:nth-child(2n) {
  transform: translateY(.035em);
}

.play-screen[data-text-style="bubble"] .word-pop {
  padding: 6px 16px 8px;
  border: 3px solid #ffffff;
  border-radius: 14px;
  color: #285f7f;
  background: #fff6bf;
  box-shadow: inset 0 -.1em 0 #eccb66, 0 .18em .28em rgba(47, 79, 76, .25);
  text-shadow: 0 .04em 0 #fff;
}

.play-screen[data-text-style="bubble"] .word-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.24em;
  width: .42em;
  height: .42em;
  border-right: clamp(3px, .4vw, 6px) solid #fff;
  border-bottom: clamp(3px, .4vw, 6px) solid #fff;
  background: #f1d475;
  transform: translateX(-50%) rotate(45deg);
}


.tap-puff {
  position: absolute;
  z-index: 20;
  width: clamp(56px, 7vw, 90px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92) 0 9%, rgba(255,241,144,.72) 10% 31%, transparent 64%);
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
  animation: puff 480ms ease-out forwards;
}

.round-control {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(44px, 13cqw, 58px);
  aspect-ratio: 1;
  padding: 0 0 .08em;
  border: 0;
  border-radius: 50%;
  color: var(--tinta, #5a4630);
  background: #fff;
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--utama) 34%, #fff),
    0 8px 16px rgba(80, 65, 60, .18);
  font-size: clamp(1.6rem, 7cqw, 2.4rem);
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(7px);
}

.round-control:active {
  transform: translateY(4px) scale(.95);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--utama) 34%, #fff), 0 4px 8px rgba(80, 65, 60, .16);
}

#home-button { font-size: clamp(1.3rem, 5.6cqw, 1.9rem); }

.theme-dots {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--tinta, #5a4630);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.theme-dot {
  width: clamp(9px, 1.3vw, 14px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transition: transform 180ms ease, background 180ms ease;
}

.theme-dot.is-active {
  background: #fff7a8;
  transform: scale(1.38);
}

.theme-dots.is-counter {
  min-width: 72px;
  justify-content: center;
  color: #fff;
  background: rgba(25, 75, 90, .55);
  font-size: .82rem;
  font-weight: 1000;
  letter-spacing: .04em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@keyframes soft-float {
  0%, 100% { transform: translateY(0) rotate(-.25deg) scale(1); }
  50% { transform: translateY(-2.6%) rotate(.35deg) scale(1.015); }
}

@keyframes soft-press {
  0% { transform: translateY(0) scale(1); }
  26% { transform: translateY(7%) scale(.89, .82); filter: drop-shadow(0 .12rem .05rem rgba(76,72,44,.28)) brightness(1.06); }
  62% { transform: translateY(-5%) scale(1.09, 1.13); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes puff {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.2); }
  65% { opacity: .72; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

/* Titik tengahnya translate(-50%, -50%) karena kata sekarang ditaruh di
   tengah bilah atas, bukan menempel di puncak layar. */
@keyframes word-pop-in {
  0% { transform: translate(-50%, 10px) scale(.7) rotate(-3deg); }
  8% { transform: translate(-50%, 0) scale(1.12) rotate(1.5deg); }
  15% { transform: translate(-50%, 0) scale(.98) rotate(-.5deg); }
  21%, 100% { transform: translate(-50%, 0) scale(1) rotate(0); }
}

@keyframes intro-pop-in {
  0% { transform: translateY(10px) scale(.78) rotate(-2deg); }
  13% { transform: translateY(0) scale(1.06) rotate(1deg); }
  23%, 100% { transform: translateY(0) scale(1) rotate(0); }
}

@media (max-width: 560px) {
  .theme-menu { padding-inline: 12px; }
  .theme-card__label { min-height: 48px; }
  .text-style-picker { padding: 10px; margin-bottom: 22px; }
  .text-style-options { gap: 6px; }
  .text-style-option { min-height: 68px; padding-inline: 3px; }
  .round-control { width: 50px; font-size: 2.2rem; }
  .home-control { font-size: 1.7rem; }
  .theme-dots { bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-hotspot::before { animation: none; }
  .theme-card, .theme-dot { transition: none; }
  .scene-status__spinner { animation: scene-status-in 1ms linear 450ms forwards; }
}

/* =================================================================
   LAYAR MASUK dan LAYAR MENYIAPKAN
   ================================================================= */
.masuk-screen,
.siap-screen {
  display: grid;
  place-items: center;
  padding: 28px 26px max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #12161c 0%, #0b0c0e 60%);
  color: #f2f1ee;
  text-align: center;
}

.masuk-screen.is-hidden,
.siap-screen.is-hidden { display: none; }

.masuk-kotak,
.siap-kotak { width: 100%; max-width: 340px; }

.masuk-judul {
  margin: 0;
  font-size: clamp(2rem, 11cqw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.035em;
}

.masuk-sub {
  margin: 10px 0 30px;
  color: rgba(242, 241, 238, .58);
  font-size: .88rem;
  line-height: 1.55;
}

.masuk-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(242, 241, 238, .72);
  font-size: .78rem;
  font-weight: 600;
  text-align: left;
}

.masuk-input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid rgba(242, 241, 238, .22);
  border-radius: 14px;
  background: rgba(242, 241, 238, .06);
  color: #f2f1ee;
  font: inherit;
  font-size: 1rem;
}

.masuk-input::placeholder { color: rgba(242, 241, 238, .35); }

.masuk-input:focus {
  outline: 0;
  border-color: rgba(242, 241, 238, .6);
  background: rgba(242, 241, 238, .1);
}

.masuk-tombol {
  width: 100%;
  margin-top: 12px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  background: #f4f3f0;
  color: #0b0c0e;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms ease;
}

.masuk-tombol:active { transform: scale(.98); }
.masuk-tombol:disabled { background: rgba(242, 241, 238, .18); color: rgba(242, 241, 238, .6); }

.masuk-pesan {
  margin: 14px 0 0;
  color: #ff9b86;
  font-size: .82rem;
  line-height: 1.5;
}

.masuk-beli {
  display: inline-block;
  margin-top: 12px;
  color: #f2f1ee;
  font-size: .82rem;
  font-weight: 600;
}

/* ---------- menyiapkan ---------- */
.siap-judul {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.siap-sub {
  margin: 10px 0 26px;
  color: rgba(242, 241, 238, .58);
  font-size: .85rem;
  line-height: 1.6;
}

.siap-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(242, 241, 238, .12);
}

.siap-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #f4f3f0;
  transition: width 240ms ease;
}

.siap-persen {
  margin: 14px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.siap-catatan {
  margin: 8px 0 0;
  color: rgba(242, 241, 238, .45);
  font-size: .76rem;
  line-height: 1.5;
}

.siap-lewati {
  margin-top: 20px;
  padding: 11px 22px;
  border: 1px solid rgba(242, 241, 238, .24);
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 241, 238, .8);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
}
/* Panah kanan menyala saat misi dunia ini sudah selesai. */
.round-control.is-ready { background: #f6d372; color: #5a3d12; box-shadow: 0 0 0 5px #f6d37255, 0 4px 0 #c39a37; animation: siap-lanjut 1.1s ease-in-out infinite alternate; }
@keyframes siap-lanjut { to { transform: scale(1.09); } }