/* Belajar Inggris dari Kecil — warm storybook interface. Play-scene geometry stays in multi-theme.css. */
:root { --paper: #fffaf1; --ink: #254b43; --muted: #7b857a; --coral: #e97557; --mint: #e7efdb; }
body { background: #e7e9df; }
.app-shell { max-width: min(28rem,calc(100dvh * 9 / 16)); background: var(--paper); box-shadow: 0 18px 80px #24433724; }
button:focus-visible, input:focus-visible { outline: 3px solid #42877b; outline-offset: 4px; }
.brand { display: flex; align-items: center; gap: 9px; text-align: left; color: var(--ink); font-size: 25px; font-weight: 700; letter-spacing: -1.2px; line-height: 1; }
.brand small { display: block; margin-top: 6px; font-size: 7px; letter-spacing: 1.4px; font-weight: 500; }
.brand-amp { color: var(--coral); padding: 0 1px; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; border-radius: 13px 13px 13px 4px; background: var(--ink); color: #fff8e5; font-size: 30px; letter-spacing: -6px; padding-right: 6px; transform: rotate(-7deg); box-shadow: 0 3px 0 #17392f; }
.brand-mark span { color: #f5c267; transform: translateY(3px); }
.masuk-screen { display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; background: var(--paper); padding: 0 25px max(22px,env(safe-area-inset-bottom)); color: var(--ink); scrollbar-width: none; }
.welcome-art { width: calc(100% + 50px); flex: 0 0 auto; height: clamp(235px, 66cqw, 290px); position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 85%, #f1ddaf 0, #f7ead0 40%, #eaf0db 75%); border-radius: 0 0 50% 50% / 0 0 14% 14%; }
.welcome-world { position: absolute; top: 32px; width: 37%; height: 208px; border: 6px solid #fffaf1; border-radius: 75px 75px 22px 22px; overflow: hidden; box-shadow: 0 12px 20px #52634024; }
.welcome-world img { width: 100%; height: 100%; object-fit: cover; }
.world-left { left: -5%; top: 47px; transform: rotate(-15deg); }
.world-center { left: 30%; top: 19px; height: 231px; z-index: 2; transform: rotate(-3deg); }
.world-right { right: -5%; top: 43px; transform: rotate(13deg); }
.welcome-world span { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: #fffaf1; border-radius: 10px; padding: 6px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink); box-shadow: 0 3px 0 #e2cda2; }
.world-center span { font-size: 9px; }
.welcome-seal { position: absolute; bottom: 8px; right: 17px; z-index: 3; width: 85px; height: 85px; display: flex; flex-direction: column; justify-content: center; background: #efbe5e; color: #4b5134; border: 4px solid #fff3d9; border-radius: 50%; font-size: 18px; font-weight: 700; transform: rotate(10deg); box-shadow: 0 4px 8px #9b7c2020; }
.welcome-seal b { font-size: 8px; font-weight: 500; }
.welcome-spark { position: absolute; color: var(--coral); z-index: 3; font-size: 38px; }
.spark-one { left: 19%; top: 8px; }.spark-two { right: 16%; top: 8px; color: #3b8075; }
.masuk-kotak { max-width: 370px; padding-top: 23px; }
.welcome-brand { justify-content: center; font-size: 29px; margin-bottom: 20px; }
.welcome-brand small { font-size: 7px; }
.masuk-judul { font-size: clamp(29px, 8.8cqw, 38px); line-height: 1.1; letter-spacing: -1.4px; }
.masuk-judul em { font-style: normal; color: var(--coral); }
.masuk-sub { color: #748075; font-size: 13px; line-height: 1.65; margin: 14px 0; }
.welcome-tags { display: flex; justify-content: center; gap: 8px; margin: 0 0 23px; }
.welcome-tags span { background: #eaf0df; padding: 6px 10px; border-radius: 30px; color: #617553; font-size: 10px; }
.masuk-label { color: var(--ink); font-size: 11px; margin-bottom: 9px; }
.masuk-input { border: 1px solid #e0dfd3; background: #fff; color: var(--ink); border-radius: 15px; padding: 16px; font-size: 16px; user-select: text; }
.masuk-input::placeholder { color: #a4aa9e; }.masuk-input:focus { background: white; border-color: #418779; box-shadow: 0 0 0 3px #41877915; }
.masuk-tombol { background: var(--coral); border-radius: 16px; color: white; box-shadow: 0 5px 0 #c75d43, 0 9px 20px #df805421; font-weight: 600; padding: 17px 15px; margin-top: 13px; }
.masuk-tombol:active { transform: translateY(3px); box-shadow: 0 2px 0 #c75d43; }
.masuk-tombol:disabled { background: #e9b8a5; color: white; box-shadow: none; }
.welcome-note { color: #959b8e; font-size: 10px; margin: 22px 0 0; }
.masuk-pesan { color: #b74936; }.masuk-beli { color: #317c6d; }
.theme-menu { background: var(--paper); color: var(--ink); padding: max(22px,env(safe-area-inset-top)) 0 94px; }
.dashboard-top { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.parent-button { border: 1px solid #e6e4d8; border-radius: 50%; background: #fffef9; color: var(--ink); width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; }
.parent-button svg { width: 21px; height: 21px; }
.dashboard-greeting { position: relative; margin: 22px 24px 20px; }
.dashboard-greeting p { margin: 0 0 9px; font-size: 9px; letter-spacing: 1.65px; color: #859074; font-weight: 600; }
.dashboard-greeting h1 { font-size: clamp(29px,8.5cqw,38px); line-height: 1.1; letter-spacing: -1.4px; margin: 0; font-weight: 600; }
.dashboard-greeting h1 span { color: var(--coral); }
.greeting-sun { position: absolute; right: 3px; top: 18px; font-size: 66px; color: #e8b84e; line-height: 1; transform: rotate(-12deg); }
.menu-hero { height: 190px; margin: 0 20px; border-radius: 26px; overflow: hidden; background: #b9e3df; box-shadow: 0 5px 0 #d1ddd0; isolation: isolate; }
.menu-hero__img { left: auto; right: 0; width: 58%; object-position: 50% 34%; border-radius: 48% 0 0 48% / 55% 0 0 55%; }
.menu-hero__scrim { padding: 23px 19px; justify-content: center; background: linear-gradient(90deg,#b9e3df 0%,#b9e3df 39%,#b9e3df00 63%); }
.menu-hero__kicker { color: #4e8580; font-size: 7px; letter-spacing: 1.1px; font-weight: 700; }
.menu-hero h1 { color: #20534e; font-size: 33px; max-width: 55%; line-height: 1.05; margin: 12px 0 0; }
.menu-hero__sub { color: #477d77; font-size: 10px; max-width: 47%; line-height: 1.5; margin-top: 8px; }
.menu-hero__play { display: flex; gap: 16px; align-items: center; border-radius: 12px; padding: 11px 16px; margin-top: 18px; color: #fffaf1; background: #2a685d; font-size: 12px; box-shadow: 0 3px 0 #205247; }
.menu-hero__play span { font-size: 20px; line-height: 1; }
.explore-heading { display: flex; justify-content: space-between; align-items: baseline; padding: 25px 24px 13px; }
.explore-heading h2 { font-size: 19px; font-weight: 600; letter-spacing: -.6px; margin: 0; }.explore-heading > span { font-size: 10px; color: #8a9182; }
.category-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 24px 5px; }
.category-chip { display: flex; gap: 7px; align-items: center; flex: 0 0 auto; border: 1px solid #e5e4d7; background: #fffdf8; color: #667969; padding: 10px 14px; border-radius: 30px; font-size: 11px; min-height: 42px; cursor: pointer; }
.category-chip span { font-size: 17px; }.category-chip.is-selected { background: var(--ink); color: #fffaf1; border-color: var(--ink); }
.shelf { padding-top: 18px; }.shelf__head { padding: 0 24px 12px; justify-content: space-between; gap: 5px; }
.shelf__head h2 { font-size: 16px; letter-spacing: -.3px; font-weight: 600; }.shelf__head span { color: #9b9f8f; font-size: 9px; }
.shelf__track { gap: 13px; padding: 0 24px 9px; scroll-padding-left: 24px; }
.shelf-card { width: clamp(145px,41cqw,184px); background: #fffef9; border: 1px solid #ede7d9; border-radius: 22px; padding: 6px 6px 13px; box-shadow: 0 4px 0 #ece7d9; position: relative; }
.shelf-card img { border-radius: 17px; aspect-ratio: 1 / 1; object-position: center; background: #e6ecd9; }
.shelf-card__label { color: var(--ink); font-size: 14px; font-weight: 600; margin: 11px 7px 0; padding-right: 20px; }
.shelf-card__meaning { color: #8e9685; font-size: 10px; margin: 4px 7px 0; }
.card-play { position: absolute; bottom: 17px; right: 10px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #eef1e4; color: #527966; font-size: 10px; }
.dashboard-footer { margin: 32px 28px 12px; text-align: center; color: #999e8d; font-size: 10px; line-height: 1.8; }.dashboard-footer span { display: block; color: #d4b26b; font-size: 24px; }
.bottom-nav { position: absolute; z-index: 35; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3,1fr); padding: 10px 20px max(10px,env(safe-area-inset-bottom)); background: #fffdf6f5; border-top: 1px solid #e9e6d9; backdrop-filter: blur(16px); box-shadow: 0 -6px 25px #485a3c06; }
.bottom-nav button { border: 0; background: transparent; color: #909b8c; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px; font-size: 10px; cursor: pointer; }
.bottom-nav svg { width: 23px; height: 23px; }.bottom-nav .is-current { color: var(--ink); font-weight: 600; }.bottom-nav .is-current svg { background: #e6edd8; box-shadow: 0 0 0 5px #e6edd8; border-radius: 8px; }
.parent-dialog { background: var(--paper); color: var(--ink); border: 0; border-radius: 28px; width: min(390px,calc(100% - 32px)); max-height: 85dvh; padding: 30px 23px; box-shadow: 0 25px 90px #152c3650; }
.parent-dialog::backdrop { background: #1e37366b; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; right: 14px; top: 12px; border: 0; background: #eeeede; color: var(--ink); width: 34px; height: 34px; border-radius: 50%; font-size: 25px; cursor: pointer; }
.parent-eyebrow { font-size: 9px; letter-spacing: 1.5px; color: #819474; }.parent-dialog h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.7px; }.parent-description { font-size: 13px; line-height: 1.6; color: #778573; }
.parent-dialog .text-style-picker { margin: 22px 0 0; padding: 18px 0; border-color: #e0e2d4; }.text-style-picker__title { color: var(--ink); font-size: 11px; }
.text-style-option { color: #788472; border-color: #e0e2d4; background: #fffdf7; }.text-style-option.is-selected { background: #eaf0df; color: var(--ink); border-color: #6c8b63; }
.parent-tip { border-radius: 16px; padding: 17px; background: #f5e9d0; font-size: 12px; }.parent-tip p { margin: 8px 0 0; line-height: 1.6; color: #85816e; }
.parent-unlock { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 14px 15px; border: 1px solid #dfe3d6; border-radius: 16px; background: #fffdf7; color: var(--ink); text-align: left; cursor: pointer; }
.parent-unlock span { display: grid; gap: 3px; }.parent-unlock b { font-size: 12px; }.parent-unlock small { color: #8e9688; font-size: 9px; }
.parent-unlock i { position: relative; width: 39px; height: 23px; flex: 0 0 auto; border-radius: 99px; background: #cdd3c8; box-shadow: inset 0 1px 3px #48524726; transition: background 180ms ease; }
.parent-unlock i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px #23352c42; transition: transform 180ms ease; }
.parent-unlock.is-enabled i { background: #62a873; }.parent-unlock.is-enabled i::after { transform: translateX(16px); }
.parent-account { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #e0e2d4; }
.parent-account > span { color: #959b8e; font-size: 10px; }
.logout-button { min-height: 42px; padding: 10px 15px; border: 1px solid #d8b9ac; border-radius: 999px; background: #fffaf5; color: #a54836; font-size: 11px; font-weight: 700; cursor: pointer; }
.logout-button:active { transform: scale(.97); }
.logout-button:focus-visible { outline: 3px solid #d98c73; outline-offset: 3px; }
.siap-screen { background: var(--paper); color: var(--ink); }.siap-sub,.siap-catatan { color: #7e8b78; }.siap-bar { background: #e7e8d7; height: 10px; }.siap-bar span { background: #df9870; }.siap-lewati { color: var(--ink); border-color: #c6d4b7; }
.loading-world { margin: 0 auto 28px; width: 94px; height: 94px; display: grid; place-items: center; border-radius: 30px; background: #eaf0db; color: #dfad58; font-size: 62px; transform: rotate(-8deg); }
@media (max-height: 740px) { .welcome-art { height: 215px; }.welcome-world { height: 165px; }.world-center { height: 190px; }.welcome-brand { margin-bottom: 14px; }.masuk-kotak { padding-top: 17px; }.masuk-judul { font-size: 30px; }.welcome-tags { margin-bottom: 17px; } }
@media (max-height: 640px) {
  .welcome-art { height: 155px; }
  .welcome-world { top: 24px; height: 130px; border-width: 4px; }
  .world-center { top: 8px; height: 145px; }
  .welcome-world span { bottom: 8px; padding: 4px 6px; font-size: 9px; }
  .world-center span { font-size: 7px; }
  .welcome-seal { width: 65px; height: 65px; font-size: 14px; }
  .welcome-seal b { font-size: 6px; }
  .welcome-spark { font-size: 26px; }
  .masuk-kotak { padding-top: 14px; }
  .welcome-brand { font-size: 25px; margin-bottom: 14px; }
  .welcome-brand .brand-mark { width: 33px; height: 33px; }
  .masuk-judul { font-size: 27px; }
  .masuk-sub { font-size: 11px; margin: 10px 0; }
  .welcome-tags { margin-bottom: 14px; }
  .masuk-input { padding: 12px 14px; }
  .masuk-tombol { padding: 14px; }
  .welcome-note { margin-top: 17px; font-size: 9px; }
}
@media (prefers-reduced-motion: no-preference) { .welcome-spark { animation: sparkle-turn 6s ease-in-out infinite; }.greeting-sun { animation: sparkle-turn 9s ease-in-out infinite; } @keyframes sparkle-turn { 50% { transform: rotate(12deg) scale(1.07); } } }

/* =================================================================
   KREACIL CINEMA — pilihan final owner, 15 Sep 2026.
   Poster tetap 9:16 dan memakai contain agar satu dunia terlihat utuh.
   ================================================================= */
:root { --cinema: #0c1110; --cinema-panel: #151c19; --cinema-gold: #ebb96f; --cinema-white: #f5f2e9; }
body { background: #161a18; }
.app-shell { background: var(--cinema); box-shadow: 0 28px 90px #03080666; }

/* Login orang tua */
.masuk-screen {
  display: block;
  overflow-y: auto;
  padding: 0 20px max(28px,env(safe-area-inset-bottom));
  background: var(--cinema);
  color: var(--cinema-white);
  scrollbar-width: none;
}
.masuk-screen::-webkit-scrollbar { display: none; }
.welcome-art {
  width: calc(100% + 40px);
  height: clamp(270px,78cqw,350px);
  margin-left: -20px;
  border-radius: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 24%,#35463f 0,#17201c 36%,#0c1110 76%);
}
.welcome-art::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 42% 0 0;
  background: linear-gradient(transparent,var(--cinema) 94%);
  pointer-events: none;
}
.welcome-world {
  top: 26px;
  width: 34%;
  height: 260px;
  border: 1px solid #ffffff20;
  border-radius: 19px;
  background: #18231e;
  box-shadow: 0 24px 48px #0008;
}
.welcome-world img { object-fit: contain; background: #17201d; }
.world-left { left: -4%; top: 54px; transform: rotate(-9deg); opacity: .72; }
.world-center { left: 33%; top: 15px; height: 294px; z-index: 2; transform: none; }
.world-right { right: -4%; top: 54px; transform: rotate(9deg); opacity: .72; }
.welcome-world span {
  z-index: 2;
  bottom: 10px;
  padding: 6px 9px;
  border: 1px solid #ffffff20;
  border-radius: 999px;
  background: #101714d9;
  color: #fff;
  box-shadow: none;
  font-size: 9px;
  backdrop-filter: blur(9px);
}
.world-center span { font-size: 8px; }
.welcome-seal {
  right: 16px;
  bottom: 9px;
  z-index: 5;
  width: 78px;
  height: 78px;
  border: 1px solid #fff3;
  border-radius: 25px 31px 24px 34px;
  background: var(--cinema-gold);
  color: #243028;
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 18px 35px #0007;
}
.welcome-seal b { margin-top: 5px; font-size: 7px; }
.welcome-spark { z-index: 4; color: var(--cinema-gold); font-size: 25px; }
.spark-one { left: 19%; top: 22px; }
.spark-two { right: 18%; top: 20px; color: #e8e2d3; }
.masuk-kotak { position: relative; z-index: 6; width: 100%; max-width: 370px; margin: -6px auto 0; padding-top: 0; }
.welcome-brand { justify-content: flex-start; margin-bottom: 22px; color: var(--cinema-white); font-size: 28px; }
.brand { color: var(--cinema-white); }
.brand-mark { background: #f2eee4; color: #132019; box-shadow: 0 3px 0 #9d7b48; }
.brand-mark span,.brand-amp { color: #d79050; }
.welcome-eyebrow { margin: 0 0 9px; color: var(--cinema-gold); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-align: left; }
.masuk-judul { margin: 0; color: var(--cinema-white); font-size: clamp(31px,9.8cqw,42px); line-height: 1.02; letter-spacing: -1.8px; text-align: left; }
.masuk-judul em { color: var(--cinema-gold); }
.masuk-sub { margin: 14px 0 15px; color: #f5f2e98f; font-size: 12px; line-height: 1.55; text-align: left; }
.welcome-tags { justify-content: flex-start; margin: 0 0 24px; }
.welcome-tags span { padding: 7px 10px; border: 1px solid #ffffff16; background: #161e1b; color: #f5f2e990; font-size: 9px; }
.masuk-label { color: #f5f2e9aa; font-size: 10px; }
.masuk-input { border: 1px solid #ffffff24; border-radius: 15px; background: #ffffff0a; color: #fff; }
.masuk-input::placeholder { color: #ffffff52; }
.masuk-input:focus { border-color: var(--cinema-gold); background: #ffffff0d; box-shadow: 0 0 0 3px #eab56a18; }
.masuk-tombol { margin-top: 12px; border-radius: 15px; background: var(--cinema-gold); color: #1c241f; box-shadow: 0 5px 0 #a5763e,0 16px 28px #0005; }
.masuk-tombol:active { box-shadow: 0 2px 0 #a5763e; }
.masuk-tombol:disabled { background: #675943; color: #d8c9b2; }
.masuk-pesan { color: #ff9f8a; }.masuk-beli { color: var(--cinema-gold); }
.welcome-note { margin: 21px 0 0; color: #ffffff4f; }

/* Beranda cinema */
.theme-menu { position: relative; overflow-x: hidden; padding: 0 0 98px; background: var(--cinema); color: var(--cinema-white); }
.dashboard-top {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  padding: max(24px,env(safe-area-inset-top)) 20px 38px;
  color: #fff;
  background: linear-gradient(#07100cd9,transparent);
  pointer-events: none;
}
.dashboard-top > * { pointer-events: auto; }
.dashboard-top .brand { color: #fff; font-size: 22px; text-shadow: 0 2px 14px #000a; }
.dashboard-top .brand small { color: #ffffffa0; }
.dashboard-top .brand-mark { width: 36px; height: 36px; border: 1px solid #ffffff35; background: #f5f2e9; box-shadow: 0 6px 18px #0005; }
.parent-button { width: 42px; height: 42px; border: 1px solid #ffffff38; background: #0a1510a6; color: #fff; backdrop-filter: blur(12px); box-shadow: 0 8px 24px #0004; }
.dashboard-greeting { display: none; }
.menu-hero { width: 100%; height: auto; aspect-ratio: 9 / 16; margin: 0; border-radius: 0; background: #18211d; box-shadow: none; }
.menu-hero::after { content: ""; position: absolute; z-index: 1; inset: 37% 0 0; background: linear-gradient(transparent,var(--cinema) 97%); pointer-events: none; }
.menu-hero__img { inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: contain; object-position: center; background: #18211d; }
.menu-hero__scrim { z-index: 2; justify-content: flex-end; padding: 0 20px 30px; background: linear-gradient(180deg,#050a0710 0 48%,#07100cbd 82%,var(--cinema) 100%); }
.menu-hero__kicker { color: var(--cinema-gold); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.menu-hero h1 { max-width: 90%; margin: 7px 0 0; color: #fff; font-size: clamp(35px,10.8cqw,47px); line-height: .96; letter-spacing: -2px; text-shadow: 0 3px 24px #0008; }
.menu-hero__sub { max-width: 85%; margin-top: 9px; color: #ffffffa8; font-size: 11px; }
.menu-hero__play { gap: 9px; margin-top: 18px; padding: 13px 18px; border-radius: 999px; background: var(--cinema-white); color: #101613; font-size: 11px; box-shadow: 0 14px 34px #0008; }
.menu-hero__play span { font-size: 10px; }
.category-tabs { gap: 7px; padding: 6px 18px 16px; }
.category-chip { min-height: 37px; padding: 8px 13px; border: 1px solid #ffffff1f; background: var(--cinema-panel); color: #ffffff7d; font-size: 9px; }
.category-chip span { font-size: 14px; }
.category-chip.is-selected { border-color: var(--cinema-gold); background: var(--cinema-gold); color: #20170f; font-weight: 700; }
.cinema-daily { padding: 28px 0 5px; }
.cinema-section-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 18px 13px; }
.cinema-section-head h2 { margin: 0; color: #fff; font-size: 20px; letter-spacing: -.6px; }
.cinema-section-head div > span { display: block; margin-top: 4px; color: #ffffff55; font-size: 8px; }
.cinema-section-head > span { color: #ffffff66; font-size: 9px; }
.cinema-daily-track,.shelf__track { display: flex; gap: 10px; overflow-x: auto; padding: 0 18px 16px; scroll-padding-left: 18px; scrollbar-width: none; scroll-snap-type: x proximity; }
.cinema-daily-track::-webkit-scrollbar,.shelf__track::-webkit-scrollbar { display: none; }
.cinema-parent-note { position: relative; display: grid; grid-template-columns: 1fr 82px; align-items: center; min-height: 160px; margin: 28px 18px 4px; overflow: hidden; padding: 24px 20px; border: 1px solid #ffffff17; border-radius: 25px; background: radial-gradient(circle at 90% 15%,#eeb56342,transparent 42%),linear-gradient(135deg,#233c31,#16251f); box-shadow: inset 0 1px #ffffff14; }
.cinema-parent-note small,.explore-heading small { color: var(--cinema-gold); font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.cinema-parent-note h2 { margin: 7px 0 0; color: #fff; font-size: 23px; line-height: 1; letter-spacing: -.7px; }
.cinema-parent-note p { margin: 8px 0 0; color: #ffffff7c; font-size: 9px; line-height: 1.45; }
.cinema-parent-note__orb { display: grid; width: 70px; aspect-ratio: 1; place-items: center; border: 1px solid #ffffff2e; border-radius: 28px 36px 29px 40px; background: var(--cinema-gold); color: #253226; font-size: 26px; font-weight: 700; transform: rotate(8deg); box-shadow: 0 15px 30px #0006; }
.explore-heading { align-items: flex-end; padding: 47px 18px 10px; }
.explore-heading h2 { margin: 6px 0 0; color: #fff; font-size: 30px; line-height: 1; letter-spacing: -1.4px; }
.explore-heading p { margin: 9px 0 0; color: #ffffff60; font-size: 9px; line-height: 1.45; }
.explore-heading > span { color: #ffffff63; font-size: 9px; }
.shelf { padding-top: 28px; }
.shelf__head { align-items: flex-end; justify-content: space-between; padding: 0 18px 13px; }
.shelf__head h2 { color: #fff; font-size: 19px; letter-spacing: -.45px; }
.shelf__head span { color: #ffffff58; font-size: 8px; }
.shelf-card { position: relative; flex: 0 0 55%; width: auto; aspect-ratio: 9 / 16; overflow: hidden; padding: 0; border: 0; border-radius: 22px; background: #1b2521; box-shadow: 0 20px 40px -25px #000; scroll-snap-align: start; }
.shelf-card::after { content: ""; position: absolute; z-index: 1; inset: 55% 0 0; background: linear-gradient(transparent,#040907e6); pointer-events: none; }
.shelf-card img { width: 100%; height: 100%; margin: 0; aspect-ratio: 9 / 16; border-radius: 0; object-fit: contain; object-position: center; background: #1b2521; box-shadow: none; }
.shelf-card__label,.shelf-card__meaning { position: absolute; z-index: 2; left: 13px; right: 44px; display: block; color: #fff; text-shadow: 0 2px 12px #000; }
.shelf-card__label { bottom: 28px; margin: 0; padding: 0; font-size: 14px; font-weight: 700; }
.shelf-card__meaning { bottom: 13px; margin: 0; color: #ffffff8e; font-size: 8px; }
.card-play { z-index: 3; inset: auto 12px 12px auto; width: 27px; height: 27px; background: #f5f2e9e8; color: #17201c; box-shadow: 0 7px 18px #0007; }
.cinema-daily-card { flex-basis: 63%; }
.dashboard-footer { margin: 38px 28px 17px; color: #ffffff55; }.dashboard-footer span { color: var(--cinema-gold); }
.bottom-nav { border-color: #ffffff12; background: #0c1110ed; box-shadow: 0 -10px 28px #0005; }
.bottom-nav button { color: #ffffff62; }.bottom-nav .is-current { color: var(--cinema-gold); }.bottom-nav .is-current svg { background: #e9b86d20; box-shadow: 0 0 0 5px #e9b86d20; }

/* Ruang orang tua + logout */
.parent-dialog { border: 1px solid #ffffff1a; background: #121916; color: var(--cinema-white); box-shadow: 0 28px 100px #000b; }
.parent-dialog::backdrop { background: #040806bd; backdrop-filter: blur(8px); }
.dialog-close { background: #ffffff10; color: #fff; }
.parent-eyebrow { color: var(--cinema-gold); }.parent-dialog h2 { color: #fff; }.parent-description { color: #ffffff82; }
.parent-dialog .text-style-picker,.parent-account { border-color: #ffffff17; }.text-style-picker__title { color: #fff; }
.text-style-option { color: #ffffff80; border-color: #ffffff18; background: #ffffff08; }.text-style-option.is-selected { border-color: var(--cinema-gold); background: #eab56a1b; color: #fff; }
.parent-tip { background: #213129; color: #fff; }.parent-tip p { color: #ffffff7f; }
.parent-unlock { border-color: #ffffff17; background: #ffffff08; color: #fff; }.parent-unlock small { color: #ffffff6b; }.parent-unlock i { background: #ffffff25; }.parent-unlock.is-enabled i { background: var(--cinema-gold); }
.parent-account > span { color: #ffffff5f; }
.logout-button { border-color: #e69a7d55; background: #d56f4f16; color: #ffad91; }

/* Layar unduhan mengikuti identitas baru. */
.siap-screen { background: var(--cinema); color: var(--cinema-white); }.siap-sub,.siap-catatan { color: #ffffff72; }.siap-bar { background: #ffffff16; }.siap-bar span { background: var(--cinema-gold); }.siap-lewati { color: var(--cinema-white); border-color: #ffffff30; }.loading-world { background: #233229; color: var(--cinema-gold); }

@media (max-height: 740px) {
  .welcome-art { height: 245px; }
  .welcome-world { height: 210px; }
  .world-center { height: 235px; }
  .welcome-seal { width: 68px; height: 68px; font-size: 14px; }
  .welcome-brand { margin-bottom: 16px; }
}
@media (max-height: 640px) {
  .welcome-art { height: 205px; }
  .welcome-world { top: 38px; height: 170px; }
  .world-center { top: 10px; height: 205px; }
  .masuk-kotak { margin-top: -2px; }
  .welcome-brand { margin-bottom: 12px; }
  .masuk-judul { font-size: 29px; }
}

/* =================================================================
   PETA PETUALANGAN — 4 ilustrasi panjang, 50 dunia, mobil bergerak.
   Gambar hanyalah latar. Tombol, nomor, pilihan dan mobil tetap elemen app
   supaya presisi, ringan, mudah disentuh dan tidak bergantung pada AI text.
   ================================================================= */
.theme-menu {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  background: #183827;
  color: #243326;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.theme-menu::-webkit-scrollbar { display: none; }
.map-topbar {
  position: sticky;
  z-index: 60;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  margin-bottom: -78px;
  padding: max(16px,env(safe-area-inset-top)) 16px 14px;
  color: #fff;
  background: linear-gradient(180deg,#10261de8 0,#10261d9c 56%,transparent 100%);
  pointer-events: none;
}
.map-topbar > * { pointer-events: auto; }
.map-brand { color: #fff; font-size: 20px; text-shadow: 0 3px 16px #0009; }
.map-brand small { color: #ffffffb0; font-size: 6px; }
.map-brand .brand-mark {
  width: 35px;
  height: 35px;
  border: 1px solid #ffffff70;
  background: #fff8e9;
  color: #153b2c;
  box-shadow: 0 5px 14px #0005;
}
.map-topbar__right { display: flex; align-items: center; gap: 8px; }
.map-progress {
  display: grid;
  min-height: 36px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  background: #fff8e9e8;
  color: #244532;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 7px 20px #0004;
  backdrop-filter: blur(10px);
}
.map-topbar .parent-button {
  width: 38px;
  height: 38px;
  border-color: #ffffff80;
  background: #fff8e9e8;
  color: #244532;
  box-shadow: 0 7px 20px #0004;
}
.garage-button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  padding: 3px;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: #fff8e9e8;
  box-shadow: 0 7px 20px #0004;
  backdrop-filter: blur(10px);
}
.garage-button img { display: block; width: 28px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 2px #17322740); }
.map-intro { display: none; }
.world-map {
  /* HP yang lebih ramping dari 9:16 dulu menyisakan pita kosong di bawah
     menu. Peta sekarang setinggi layar dikurangi menu bawah; kelebihan
     lebarnya dipotong rata kiri-kanan (jalur & stage ada di tengah). */
  --map-w: max(100%, calc((100dvh - 61px - max(10px, env(safe-area-inset-bottom))) * 9 / 16));
  position: relative;
  width: var(--map-w);
  margin-left: calc((100% - var(--map-w)) / 2);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #b9dda1;
}
.map-panel {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: none;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.map-panel.is-active { display: block; opacity: 1; animation: map-page-arrive 480ms ease both; }
.map-panel > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.map-page-gate {
  position: absolute;
  z-index: 18;
  left: 50%;
  display: grid;
  width: clamp(76px,21cqw,94px);
  height: clamp(62px,17cqw,78px);
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%,-50%);
  pointer-events: auto;
}
.map-page-gate--previous { top: 12%; }
.map-page-gate--next { top: 80%; }
.map-page-gate__arch {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(6px,1.7cqw,8px) solid #e8c46f;
  border-bottom-width: 5px;
  border-radius: 52px 52px 16px 16px;
  background: linear-gradient(180deg,#547d64,#1a382c);
  box-shadow: 0 7px 0 #8f6838,0 13px 22px #14291d73,inset 0 3px #fff1b6;
}
.map-page-gate__arch::before,.map-page-gate__arch::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #79aa69;
  box-shadow: 15px 5px 0 #4f8659,7px 18px 0 #326547;
}
.map-page-gate__arch::before { left: -4px; }
.map-page-gate__arch::after { right: 11px; transform: scaleX(-1); }
.map-page-gate__arch i { position: absolute; inset: 20px 13px 3px; border-radius: 50% 50% 8px 8px; background: radial-gradient(circle at 50% 90%,#557b67,#0c1d16 72%); box-shadow: inset 0 8px 15px #0009; }
.map-page-gate__arrow { position: relative; z-index: 2; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #fff5d8; color: #335844; font-size: 16px; font-weight: 900; box-shadow: 0 3px 8px #0005; }
.map-page-gate--previous .map-page-gate__arrow { transform: rotate(180deg); }
.map-page-gate.is-locked { filter: grayscale(.7) brightness(.78); }
.map-page-gate.is-locked .map-page-gate__arrow { font-size: 0; }
.map-page-gate.is-locked .map-page-gate__arrow::after { content: "🔒"; font-size: 12px; filter: grayscale(1); }
.map-page-gate.is-opening { z-index: 28; }
.map-page-gate.is-opening .map-page-gate__arch { animation: page-gate-open 420ms ease-in-out infinite alternate; }
.map-dimension-transition {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 17px;
  background: radial-gradient(circle at 50% 50%,#fff0a9 0 6%,#74a572 18%,#244a39 42%,#0c1e18 72%);
  color: #fff;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 360ms ease,transform 520ms ease;
  pointer-events: none;
}
.map-dimension-transition.is-visible { opacity: 1; transform: scale(1); }
.map-dimension-transition.is-leaving { opacity: 0; transform: scale(.92); }
.dimension-portal { position: relative; width: 112px; height: 112px; border: 9px solid #f0cf7c; border-radius: 50%; box-shadow: 0 0 0 8px #527b5c,0 0 45px #fff0a8c9,inset 0 0 28px #081812; animation: dimension-spin 900ms linear infinite; }
.dimension-portal::before,.dimension-portal::after,.dimension-portal i { content: ""; position: absolute; border-radius: 50%; }
.dimension-portal::before { inset: 12px; border: 5px dashed #fff4b6; }
.dimension-portal::after { inset: 29px; background: #07150f; box-shadow: 0 0 22px #b9df8f; }
.dimension-portal i { top: -16px; left: 39px; width: 17px; height: 17px; background: #fff3aa; box-shadow: 0 0 18px #fff; }
.map-dimension-transition span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-shadow: 0 2px 10px #000; }
.map-stage-layer { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.map-stage {
  position: absolute;
  display: grid;
  width: clamp(43px,12.2cqw,55px);
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: clamp(3px,1cqw,5px) solid #fff8e8;
  border-radius: 50%;
  background: linear-gradient(155deg,#fff9d9 0,#f7d27c 62%,#dda84e 100%);
  color: #66411f;
  box-shadow: 0 4px 0 #a87535,0 9px 18px #34200c52,inset 0 2px 2px #fff;
  transform: translate(-50%,-50%);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 140ms ease,filter 140ms ease,background 180ms ease;
}
.map-stage > span { font-size: clamp(13px,4cqw,18px); font-weight: 700; line-height: 1; text-shadow: 0 1px #fff7; }
.map-stage__status { position: absolute; z-index: 2; right: -7px; bottom: -5px; display: none; width: 21px; height: 21px; place-items: center; border: 2px solid #fff8e8; border-radius: 50%; font-size: 10px; font-style: normal; line-height: 1; box-shadow: 0 3px 7px #1c2b204a; }
.map-stage > i {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  max-width: 112px;
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid #ffffffb8;
  border-radius: 999px;
  background: #183827e8;
  color: #fff;
  box-shadow: 0 5px 13px #0004;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  opacity: 0;
  text-overflow: ellipsis;
  transform: translate(-50%,-4px);
  transition: opacity 160ms ease,transform 160ms ease;
  white-space: nowrap;
  pointer-events: none;
}
.map-stage:active { transform: translate(-50%,-45%) scale(.9); filter: brightness(1.08); }
.map-stage:focus-visible { z-index: 4; outline: 4px solid #216c54; outline-offset: 4px; }
.map-stage.is-current {
  z-index: 3;
  background: linear-gradient(155deg,#d8f59d 0,#73bf58 60%,#318248 100%);
  color: #123e27;
  box-shadow: 0 4px 0 #26683d,0 10px 22px #15351a66,inset 0 2px 2px #fff;
}
.map-stage.is-current > i { opacity: 1; transform: translate(-50%,0); }
.map-stage.is-locked { background: linear-gradient(155deg,#e9e6da,#aaa99f); color: #666960; box-shadow: 0 4px 0 #777970,0 8px 15px #24251f42,inset 0 2px 2px #fff; filter: saturate(.35); }
.map-stage.is-locked .map-stage__status { display: grid; background: #5c625d; color: #fff; }
.map-stage.is-locked .map-stage__status::before { content: "🔒"; font-size: 10px; filter: grayscale(1); }
.map-stage.is-complete:not(.is-current) { background: linear-gradient(155deg,#e8f5bc,#83c66a 62%,#3d9152); color: #173e29; box-shadow: 0 4px 0 #347848,0 9px 18px #213c2352,inset 0 2px 2px #fff; }
.map-stage.is-complete .map-stage__status { display: grid; background: #2f8550; color: #fff; }
.map-stage.is-complete .map-stage__status::before { content: "✓"; }
.map-stage.is-mastered .map-stage__status { background: #e5ae43; color: #563711; }
.map-stage.is-mastered .map-stage__status::before { content: "★"; }
.map-stage.is-target {
  z-index: 5;
  animation: map-stage-target 750ms ease-in-out infinite alternate;
}
.theme-menu.is-car-moving .map-stage { pointer-events: none; }
.map-car {
  position: absolute;
  z-index: 25;
  width: clamp(48px,13.5cqw,62px);
  height: clamp(62px,17cqw,78px);
  transform: translate(-50%,-50%) rotate(180deg);
  transform-origin: center;
  pointer-events: none;
  filter: drop-shadow(0 8px 7px #23150b56);
  will-change: left,top,transform;
}
.map-car > img {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.map-car__dust {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 78%;
  width: 70%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse,#fff3d9cc 0 20%,#e9d7af70 38%,transparent 72%);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.5);
}
.map-car::after { content: ""; position: absolute; z-index: 0; inset: -13px; border: 4px solid #fff7b0; border-radius: 50%; opacity: 0; transform: scale(.55); pointer-events: none; }
.map-car.is-refocusing::after { animation: map-car-focus 900ms ease-out both; }
.world-map.is-refocusing .map-panel.is-active { transform-origin: var(--focus-x,50%) var(--focus-y,50%); animation: map-camera-refocus 1000ms cubic-bezier(.16,.8,.24,1) both; }
.map-car.is-driving > img { animation: map-car-bob 260ms ease-in-out infinite alternate; }
.map-car.is-driving .map-car__dust { animation: map-dust 480ms ease-out infinite; }
.map-confirm-wrap {
  position: fixed;
  z-index: 95;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%,28rem);
  transform: translateX(-50%);
}
.map-confirm-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: #10291d9c;
  opacity: 0;
  transition: opacity 220ms ease;
  backdrop-filter: blur(3px);
}
.map-confirm {
  position: absolute;
  right: 10px;
  bottom: max(10px,env(safe-area-inset-bottom));
  left: 10px;
  display: grid;
  grid-template-columns: 105px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 2px solid #fff7e7;
  border-radius: 28px;
  background: linear-gradient(145deg,#fffdf5,#f7ecd2);
  box-shadow: 0 24px 60px #10291d73,inset 0 1px #fff;
  opacity: 0;
  transform: translateY(calc(100% + 22px)) scale(.97);
  transition: opacity 220ms ease,transform 300ms cubic-bezier(.2,.9,.25,1.08);
}
.map-confirm-wrap.is-visible .map-confirm-backdrop { opacity: 1; }
.map-confirm-wrap.is-visible .map-confirm { opacity: 1; transform: translateY(0) scale(1); }
.map-confirm-close {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 10px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1f4837;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 10px #17322742;
}
.map-confirm-image {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 3px solid #fff;
  border-radius: 19px;
  object-fit: cover;
  box-shadow: 0 9px 20px #5a3b1f33;
}
/* Gambar dunia sebelumnya tidak boleh terlihat sementara thumbnail dunia baru dimuat. */
.map-confirm-image:not(.is-ready) { opacity: 0; }
.map-confirm-copy { min-width: 0; padding-top: 5px; }
.map-confirm-copy small { color: #b96c32; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.map-confirm-language { display: block; margin-top: 6px; color: #ba713c; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.map-confirm-copy h2 { margin: 1px 30px 4px 0; color: #193c2e; font-size: clamp(18px,5.6cqw,25px); line-height: 1.02; }
.map-confirm-translation { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; color: #2f5e49; }.map-confirm-translation span { padding: 3px 5px; border-radius: 5px; background: #dfead5; font-size: 6px; font-weight: 900; letter-spacing: .08em; }.map-confirm-translation b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.map-confirm-copy p { margin: 0 0 10px; color: #6b705f; font-size: 9px; line-height: 1.3; }
.map-confirm-enter {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(145deg,#ff765c,#e64e3e);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 5px 0 #ad352d,0 10px 20px #b94b3f3d;
}
.map-confirm-enter:active { transform: translateY(4px); box-shadow: 0 1px 0 #ad352d; }
.garage-wrap {
  position: fixed;
  z-index: 98;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%,28rem);
  transform: translateX(-50%);
}
.garage-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: #10291dad;
  opacity: 0;
  transition: opacity 220ms ease;
  backdrop-filter: blur(5px);
}
.garage-sheet {
  position: absolute;
  right: 8px;
  bottom: max(8px,env(safe-area-inset-bottom));
  left: 8px;
  max-height: calc(100% - 28px);
  overflow: auto;
  padding: 22px 14px 18px;
  border: 2px solid #fff7e7;
  border-radius: 30px;
  background: linear-gradient(150deg,#fffdf5,#f4e6c5);
  box-shadow: 0 24px 60px #10291d8a,inset 0 1px #fff;
  opacity: 0;
  transform: translateY(calc(100% + 22px)) scale(.97);
  transition: opacity 220ms ease,transform 300ms cubic-bezier(.2,.9,.25,1.08);
}
.garage-wrap.is-visible .garage-backdrop { opacity: 1; }
.garage-wrap.is-visible .garage-sheet { opacity: 1; transform: translateY(0) scale(1); }
.garage-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1f4837;
  color: #fff;
  font-size: 23px;
}
.garage-eyebrow { margin: 0; color: #bf743b; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.garage-sheet h2 { margin: 3px 42px 16px 0; color: #173b2d; font-size: 25px; }
.garage-group + .garage-group { margin-top: 16px; }
.garage-group__heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 3px 7px; color: #284c3d; }
.garage-group__heading b { font-size: 12px; }
.garage-group__heading span { color: #8b8878; font-size: 8px; }
.garage-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.garage-car {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border: 2px solid #e7d7b5;
  border-radius: 16px;
  background: #fffaf0;
  color: #5d5b50;
  box-shadow: 0 3px 0 #d4bd8d;
  transition: transform 140ms ease,border-color 140ms ease,background 140ms ease;
}
.garage-car img { display: block; width: 100%; height: clamp(55px,16cqw,72px); object-fit: contain; filter: drop-shadow(0 4px 3px #53381f35); }
.garage-car span { max-width: 100%; overflow: hidden; font-size: clamp(6px,1.9cqw,8px); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.garage-car.is-selected { border-color: #51a06b; background: #e8f3d9; box-shadow: 0 3px 0 #32734b,0 0 0 3px #b9d9a7; transform: translateY(-2px); }
.garage-car:active { transform: translateY(2px) scale(.96); }
.map-nav {
  position: sticky;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: -1px;
  padding-bottom: max(10px,env(safe-area-inset-bottom));
  border-color: #d8c8a6;
  background: #fff8eaf5;
  box-shadow: 0 -9px 28px #203b2445;
  backdrop-filter: blur(14px);
}
.map-nav button { color: #778376; }
.map-nav .is-current { color: #2d694e; }
.map-nav .is-current svg { background: #dcebd3; box-shadow: 0 0 0 5px #dcebd3; }
.world-explore-progress { position: absolute; z-index: 48; top: max(18px,env(safe-area-inset-top)); right: 16px; display: grid; justify-items: end; gap: 5px; min-width: 118px; padding: 9px 11px; border: 2px solid #ffffffd9; border-radius: 17px; background: #173f31d9; color: #fff; box-shadow: 0 8px 20px #14291d55; backdrop-filter: blur(8px); pointer-events: none; }
.world-explore-dots { display: flex; gap: 4px; }.world-explore-dots i { display: block; width: 10px; height: 10px; border: 2px solid #fff8d8; border-radius: 50%; background: #ffffff30; box-shadow: inset 0 1px 2px #0002; transition: transform 200ms ease,background 200ms ease; }
.world-explore-dots i.is-found { background: #f6cb62; box-shadow: 0 0 8px #fff2a8; transform: scale(1.08); }
.world-explore-progress > span { font-size: 7px; font-weight: 800; letter-spacing: .03em; }.world-explore-progress.is-complete { background: #2d754bd9; }
.theme-hotspot.is-discovered::after { content: "✓"; position: absolute; z-index: 5; top: -5px; right: -5px; display: grid; width: clamp(18px,5cqw,24px); aspect-ratio: 1; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #4c9c61; color: #fff; box-shadow: 0 3px 8px #17382066; font-size: clamp(8px,2.5cqw,12px); font-weight: 900; pointer-events: none; }
.round-control:disabled { opacity: .38; filter: grayscale(1); cursor: default; }
/* Pita tipis "Misi selesai" di atas layar main: tidak menutupi gambar,
   tidak menghentikan permainan (perintah owner 20 Sep 2026). */
.world-complete { position: absolute; z-index: 40; top: max(12px,env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 8px 14px 8px 9px; border: 2px solid #ffffffcc; border-radius: 999px; background: #2d7a50f0; color: #fff; box-shadow: 0 6px 18px #12301f55; opacity: 0; transform: translate(-50%,-12px); transition: opacity 240ms ease, transform 240ms ease; pointer-events: none; }
.world-complete.is-visible { opacity: 1; transform: translate(-50%,0); }
.world-complete b { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #fff; color: #2d7a50; font-size: 13px; }
.world-complete span { font-size: 13px; font-weight: 800; white-space: nowrap; }
.world-complete i { overflow: hidden; color: #d9f2e2; font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
@keyframes map-stage-target { to { filter: brightness(1.12); transform: translate(-50%,-50%) scale(1.12); } }
@keyframes map-stage-denied { 20%,60% { transform: translate(-56%,-50%) rotate(-4deg); } 40%,80% { transform: translate(-44%,-50%) rotate(4deg); } }
.map-stage.is-denied,.map-page-gate.is-denied { animation: map-stage-denied 420ms ease; }
@keyframes map-car-bob { to { transform: translateY(-2px) scale(1.025); } }
@keyframes map-dust { from { transform: translate(-50%,-45%) scale(.45); opacity: .8; } to { transform: translate(-50%,25%) scale(1.5); opacity: 0; } }
@keyframes map-camera-refocus { from { opacity: .5; filter: brightness(.65) blur(7px); transform: scale(1.22); } 55% { opacity: 1; filter: brightness(1.08) blur(0); transform: scale(1.07); } to { transform: scale(1); } }
@keyframes map-car-focus { 0% { opacity: 0; transform: scale(.35); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes map-page-arrive { from { opacity: 0; filter: brightness(.6) blur(5px); transform: scale(1.04); } }
@keyframes page-gate-open { to { filter: brightness(1.3); box-shadow: 0 7px 0 #8f6838,0 13px 38px #fff0a8b0,inset 0 3px #fff; transform: scale(1.06); } }
@keyframes dimension-spin { to { transform: rotate(360deg); } }
@keyframes complete-spark { to { transform: scale(1.35) rotate(16deg); filter: drop-shadow(0 0 8px #fff); } }
@media (prefers-reduced-motion: reduce) {
  .theme-menu { scroll-behavior: auto; }
  .map-stage,.map-confirm,.map-confirm-backdrop,.garage-sheet,.garage-backdrop,.map-dimension-transition,.world-complete { transition-duration: 1ms !important; }
  .map-car.is-driving > img,.map-car.is-driving .map-car__dust,.map-car.is-refocusing::after,.map-stage.is-target,.map-page-gate.is-opening .map-page-gate__arch,.dimension-portal,.map-panel.is-active,.world-map.is-refocusing .map-panel.is-active { animation: none; }
  .world-complete__burst i { animation: none; }
}
/* Garis finis di ujung peta 10, di atas plaza bintang (17 Sep 2026). */
.map-finish {
  position: absolute;
  z-index: 18;
  top: 83%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%,-50%);
  cursor: pointer;
  pointer-events: auto;
}
.map-finish__flag {
  display: block;
  width: clamp(92px,26cqw,118px);
  height: clamp(26px,7.4cqw,34px);
  border: 3px solid #fff8e8;
  border-radius: 8px;
  background: repeating-conic-gradient(#1d1d1d 0 25%,#fff 0 50%) 0 0/14px 14px;
  box-shadow: 0 4px 0 #6d4a22,0 10px 18px #1f140966;
}
.map-finish b {
  padding: 3px 10px;
  border-radius: 999px;
  background: #e8573c;
  color: #fff;
  font-size: clamp(10px,3cqw,13px);
  letter-spacing: .14em;
  box-shadow: 0 3px 0 #9c3421;
}
.map-finish.is-reached .map-finish__flag { animation: finish-wave 520ms ease-in-out 4 alternate; }
.map-finish.is-reached b { animation: finish-pop 700ms cubic-bezier(.2,1.6,.4,1) both; }
@keyframes finish-wave { to { transform: rotate(-4deg) scale(1.08); } }
@keyframes finish-pop { from { transform: scale(.4); } }
/* Papan START: di atas mobil seperti gapura, jadi mobil terlihat keluar dari bawahnya. */
.map-start { z-index: 26; pointer-events: none; }
.map-start b { background: #2f8a55; box-shadow: 0 3px 0 #1f5e39; }
/* Kartu hasil sesudah garis finis. */
.finish-summary { position: fixed; z-index: 120; top: 0; bottom: 0; left: 50%; display: grid; width: min(100%,28rem); place-items: center; padding: 20px; background: radial-gradient(circle at 50% 30%,#fff3b8cc 0,#1d3d30e6 70%); transform: translateX(-50%); opacity: 0; transition: opacity 260ms ease; }
.finish-summary.is-visible { opacity: 1; }
.finish-summary__card { width: 100%; max-width: 340px; padding: 22px 20px 18px; border: 3px solid #fff3cf; border-radius: 26px; background: #fffaf0; color: #24433a; text-align: center; box-shadow: 0 8px 0 #c99a4d,0 24px 50px #0006; animation: finish-pop 600ms cubic-bezier(.2,1.5,.4,1) both; }
.finish-summary__trophy { font-size: 58px; line-height: 1; filter: drop-shadow(0 6px 6px #b8862b66); }
.finish-summary__kicker { margin: 10px 0 4px; color: #c0692f; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.finish-summary h2 { margin: 0; font-size: 30px; line-height: 1.05; }
.finish-summary__lead { margin: 8px 0 14px; color: #5f6d63; font-size: 12px; line-height: 1.5; }
.finish-summary__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 12px; }
.finish-summary__stats div { display: grid; gap: 3px; padding: 10px 4px; border-radius: 14px; background: #eef4e4; }
.finish-summary__stats b { color: #2d7a50; font-size: 19px; }
.finish-summary__stats span { color: #637061; font-size: 9px; line-height: 1.3; }
.finish-summary__tip { margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: #fff1d6; color: #6a5431; font-size: 11px; line-height: 1.5; text-align: left; }
.finish-summary__primary, .finish-summary__secondary { display: block; width: 100%; border: 0; border-radius: 15px; font: inherit; font-weight: 700; cursor: pointer; }
.finish-summary__primary { padding: 14px; background: #e8573c; color: #fff; box-shadow: 0 4px 0 #a93c26; }
.finish-summary__secondary { margin-top: 8px; padding: 10px; background: transparent; color: #4e6b5c; }
/* Penanda kecil: app masih menyimpan isi ke HP. Hilang sendiri kalau 100%. */
button.simpan-badge { font-family: inherit; cursor: default; }
button.simpan-badge.is-lanjut { cursor: pointer; background: #f6d372; color: #3d2a0c; border-color: #fff; }
.simpan-badge { display: grid; min-height: 30px; place-items: center; padding: 0 10px; border: 1px solid #ffffff70; border-radius: 999px; background: #173f31d9; color: #ffe9b8; font-size: 9px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 5px 14px #0004; backdrop-filter: blur(8px); }

/* ================================================================
   KANVAS MAIN RESPONSIF — HP, iPad, dan tablet

   Artwork dan hotspot selalu tinggal di kanvas 9:16 yang sama. Ruang layar
   di luar kanvas diisi pantulan tema yang diburamkan, bukan dengan menarik
   gambar utama. Dengan begitu benda tidak gepeng dan titik sentuh tidak
   pernah bergeser walau rasio perangkat berbeda.
   ================================================================ */
.app-shell.is-playing {
  width: 100%;
  max-width: none;
  box-shadow: none;
}

.play-screen {
  /* Fallback viewport untuk Safari lama, lalu unit container untuk browser
     modern. Keduanya menghasilkan rasio yang sama. */
  --stage-w: min(100vw, calc(100vh * 9 / 16));
  --stage-h: min(100vh, calc(100vw * 16 / 9));
  --stage-w: min(100vw, calc(100dvh * 9 / 16));
  --stage-h: min(100dvh, calc(100vw * 16 / 9));
  --stage-w: min(100cqw, calc(100cqh * 9 / 16));
  --stage-h: min(100cqh, calc(100cqw * 16 / 9));
  isolation: isolate;
}

.play-screen::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -36px;
  background-image:
    linear-gradient(180deg, rgba(15,39,30,.32), rgba(15,39,30,.12) 46%, rgba(15,39,30,.38)),
    var(--scene-bg);
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(.72);
  opacity: .62;
  transform: scale(1.08);
  pointer-events: none;
}

.play-screen::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 46%, rgba(10,30,23,.2));
  pointer-events: none;
}

.play-screen.is-fullbleed .scene-shell {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  z-index: 1;
  width: var(--stage-w);
  height: var(--stage-h);
  aspect-ratio: 9 / 16;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 18px 54px rgba(8,28,20,.34);
  transform: translate(-50%,-50%);
}

.play-screen.is-fullbleed .scene-image {
  object-fit: contain;
}

.play-screen.is-fullbleed .play-bar--top,
.play-screen.is-fullbleed .play-bar--bottom {
  right: auto;
  left: 50%;
  width: var(--stage-w);
  transform: translateX(-50%);
}

.play-screen.is-fullbleed .play-bar--top {
  top: calc((100% - var(--stage-h)) / 2);
  container-type: inline-size;
}

.play-screen.is-fullbleed .play-bar--bottom {
  bottom: calc((100% - var(--stage-h)) / 2);
}

.play-screen.is-fullbleed .world-explore-progress {
  top: calc((100% - var(--stage-h)) / 2 + max(18px,env(safe-area-inset-top)));
  right: calc((100% - var(--stage-w)) / 2 + 16px);
}

.play-screen.is-fullbleed .world-complete {
  top: calc((100% - var(--stage-h)) / 2 + max(12px,env(safe-area-inset-top)));
}

/* Sapaan mendapat kolom sendiri di antara tombol rumah dan progres. */
.play-screen.is-fullbleed .intro-pop {
  right: clamp(126px,26cqw,150px);
  left: clamp(72px,18cqw,92px);
  width: auto;
  max-width: none;
  margin-inline: 0;
  font-size: clamp(.8rem,3.4cqw,1.2rem);
}

@media (min-aspect-ratio: 3 / 5) {
  .play-screen.is-fullbleed .scene-shell {
    border-radius: clamp(18px,2.4vmin,30px);
  }
}

/* Tablet portrait memakai artwork 3:4 khusus. Artwork 9:16 asli tetap tepat
   di tengah untuk koordinat hotspot; hanya sisi kiri-kanannya yang ditambah.
   Di tablet yang lebih ramping, yang terpotong cuma kelebihan latar luar. */
@media (min-width: 600px) and (orientation: portrait) {
  .play-screen.is-fullbleed.has-tablet-scene::before,
  .play-screen.is-fullbleed.has-tablet-scene::after {
    display: none;
  }

  .play-screen.is-fullbleed.has-tablet-scene .scene-shell {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .play-screen.is-fullbleed.has-tablet-scene .scene-image {
    inset: auto;
    top: 0;
    left: 50%;
    width: auto;
    min-width: 100%;
    max-width: none;
    height: 100%;
    object-fit: fill;
    transform: translateX(-50%);
  }

  .play-screen.is-fullbleed.has-tablet-scene .hotspot-layer {
    inset: auto;
    top: 0;
    left: 50%;
    width: min(100%,calc(100vh * 9 / 16));
    width: min(100%,calc(100dvh * 9 / 16));
    height: 100%;
    transform: translateX(-50%);
  }

  .play-screen.is-fullbleed.has-tablet-scene .play-bar--top,
  .play-screen.is-fullbleed.has-tablet-scene .play-bar--bottom {
    left: 0;
    width: 100%;
    transform: none;
  }

  .play-screen.is-fullbleed.has-tablet-scene .play-bar--top { top: 0; }
  .play-screen.is-fullbleed.has-tablet-scene .play-bar--bottom { bottom: 0; }

  .play-screen.is-fullbleed.has-tablet-scene .world-explore-progress {
    top: max(18px,env(safe-area-inset-top));
    right: 16px;
  }
}
/* Tanda ✓ pada benda yang menempel di tepi kanan gambar: geser ke dalam. */
.theme-hotspot.is-tepi-kanan.is-discovered::after { right: 3px; }