/* 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;
  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; }

/* 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;
}

/* 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 (pelajaran dari app Arab, 11 Okt 2026). */
.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; } }

/* Standar semua dunia: artwork menjadi latar penuh. Gambar dan hotspot
   tetap satu lapisan, sedangkan tombol navigasi asli berada di atasnya. */
.play-screen.is-fullbleed .scene-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

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

.play-screen.is-fullbleed .play-bar--top {
  top: 0;
  height: 108px;
  min-height: 0;
}

.play-screen.is-fullbleed .play-bar--bottom {
  bottom: 0;
  height: 82px;
  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;
  max-width: calc(100% - 124px);
  min-width: 2ch;
  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;
}

/* Subtitle Indonesia: kecil dan tenang, cuma pendamping kata Inggrisnya. */
.word-pop__meaning {
  margin-top: .45em;
  padding: .24em .7em .28em;
  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(.7rem, 3.1cqw, .98rem);
  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.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: .16em .42em .26em;
  border: clamp(3px, .9cqw, 6px) solid #ffffff;
  border-radius: .5em;
  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: .18em .45em .28em;
  border: clamp(3px, .4vw, 6px) solid #ffffff;
  border-radius: .65em;
  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); } }