/* Dunia Cilik — cangkang aplikasi.
   Dioptimalkan untuk iPad landscape. Semua ukuran sentuh >= 100px. */

:root {
  --c-merah:#FF5A5F; --c-oranye:#FF9F45; --c-kuning:#FFC93C; --c-hijau:#4ECB71;
  --c-toska:#2EC4B6; --c-biru:#4D96FF;  --c-ungu:#A66CFF;   --c-pink:#FF7BAC;
  --c-coklat:#A9714B; --c-hitam:#3D3D5C; --c-putih:#FFFFFF; --c-abu:#C9D6E3;

  --bg-1:#EAF4FF; --bg-2:#F6E9FF;
  --ink:#3D3D5C;
  --radius:32px;
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
          "Segoe UI Variable Display", "Segoe UI", Nunito, system-ui, sans-serif;
}

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

html, body {
  height:100%; overflow:hidden;
  overscroll-behavior:none;              /* stop bounce-scroll iOS */
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;            /* stop menu Copy/Look Up saat jari ditahan */
}

body {
  font-family:var(--font);
  color:var(--ink);
  background:linear-gradient(150deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-attachment:fixed;
}

section { position:fixed; inset:0; }
[hidden] { display:none !important; }

/* ---------------- splash ---------------- */

#splash {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(12px, 2.4vh, 28px);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.splash-art { display:flex; gap:clamp(16px, 4vw, 54px); font-size:clamp(46px, 9vh, 96px); }
.orb { display:block; animation:float 3.4s ease-in-out infinite; }
.o2 { animation-delay:-0.7s; } .o3 { animation-delay:-1.4s; }
.o4 { animation-delay:-2.1s; } .o5 { animation-delay:-2.8s; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-18px) rotate(4deg)} }

.logo {
  font-size:clamp(40px, 8.5vh, 84px); font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(96deg, var(--c-biru), var(--c-ungu) 45%, var(--c-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.big-btn {
  font-family:inherit; font-size:clamp(24px, 3.6vh, 38px); font-weight:800; color:#fff;
  min-width:clamp(220px, 34vw, 340px); min-height:110px;
  border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg, var(--c-hijau), #35b45c);
  box-shadow:0 10px 0 #2c9c4e, 0 18px 34px rgba(46,160,86,.36);
  transition:transform .09s ease, box-shadow .09s ease;
}
.big-btn:active { transform:translateY(7px); box-shadow:0 3px 0 #2c9c4e, 0 8px 18px rgba(46,160,86,.3); }

.tagline { font-size:clamp(13px, 1.9vh, 18px); color:#7d8aa8; font-weight:600; }

/* ---------------- menu ---------------- */

#menu {
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top) + 20px) calc(env(safe-area-inset-right) + 20px)
          calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 20px);
}

.grid {
  display:grid; gap:clamp(14px, 2.4vw, 34px);
  /* Jumlah kolom diatur app.js dari banyaknya game, supaya menu tetap
     satu baris rapi dan kartunya tidak pernah terpotong di bawah layar. */
  grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr));
  width:100%; max-width:1180px;
}

.card {
  font-family:inherit; cursor:pointer; border:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(6px, 1.4vh, 16px);
  aspect-ratio:1 / 1.06; min-height:150px;
  border-radius:var(--radius); color:#fff;
  background:var(--card-color);
  box-shadow:0 12px 0 rgba(0,0,0,.14), 0 20px 40px rgba(61,61,92,.22);
  transition:transform .1s ease, box-shadow .1s ease;
}
.card:active { transform:translateY(8px) scale(.985); box-shadow:0 4px 0 rgba(0,0,0,.14), 0 10px 22px rgba(61,61,92,.2); }
.card-emoji { font-size:clamp(56px, 13vh, 130px); line-height:1; filter:drop-shadow(0 5px 8px rgba(0,0,0,.2));
  /* Animasi sengaja di EMOJI, bukan di .card: transform pada kartu akan
     menimpa .card:active dan efek tekannya hilang. */
  animation:bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.card:nth-child(2) .card-emoji { animation-delay:-.55s }
.card:nth-child(3) .card-emoji { animation-delay:-1.1s }
.card:nth-child(4) .card-emoji { animation-delay:-1.65s }
.card:nth-child(5) .card-emoji { animation-delay:-2.2s }
.card:nth-child(6) .card-emoji { animation-delay:-2.75s }
.card:nth-child(7) .card-emoji { animation-delay:-3.3s }
.card:nth-child(8) .card-emoji { animation-delay:-3.85s }
.card-label { font-size:clamp(15px, 2.4vh, 25px); font-weight:800; opacity:.96; }

/* ---------------- panggung game ---------------- */

#stage { display:flex; }
#game-root { flex:1; position:relative; min-width:0; min-height:0; }
#game-root svg { width:100%; height:100%; display:block; touch-action:none; }

.load-fail { height:100%; display:flex; align-items:center; justify-content:center; }
.load-fail-emoji { font-size:120px; opacity:.55; }

.corner-btn {
  position:fixed; z-index:20; font-family:inherit; cursor:pointer; border:0;
  width:84px; height:84px; border-radius:50%; font-size:38px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9); color:var(--ink);
  box-shadow:0 6px 0 rgba(61,61,92,.16), 0 12px 26px rgba(61,61,92,.2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .09s ease;
}
.corner-btn:active { transform:translateY(4px); }
/* Tombol gir sengaja dibuat kecil, pudar, dan di pojok bawah:
   mudah ditemukan orang dewasa, jarang ditekan balita. */
#parent-btn { right:calc(env(safe-area-inset-right) + 14px); bottom:calc(env(safe-area-inset-bottom) + 14px);
              width:60px; height:60px; font-size:24px; opacity:.42; box-shadow:none; background:rgba(255,255,255,.6); }
.back { left:calc(env(safe-area-inset-left) + 14px); top:calc(env(safe-area-inset-top) + 14px); }

/* ---------------- Oyen (maskot) ---------------- */

.mascot-splash { animation:float 3.4s ease-in-out infinite; animation-delay:-1.7s; }

/* Pojok kiri-bawah menu: satu-satunya sudut yang tidak dipakai tombol apa pun
   (gir ada di kanan-bawah, rumah di kiri-atas saat game berjalan). */
.mascot-menu {
  position:fixed; z-index:15; pointer-events:none;
  left:calc(env(safe-area-inset-left) + clamp(8px, 2vw, 40px));
  bottom:calc(env(safe-area-inset-bottom) + clamp(8px, 2vh, 32px));
  animation:float 4.2s ease-in-out infinite;
}
.mascot-menu.pop { animation:oyen-pop .45s ease-out; }
@keyframes oyen-pop {
  0%{transform:scale(1)} 35%{transform:scale(1.18) rotate(-6deg)}
  70%{transform:scale(.94) rotate(3deg)} 100%{transform:scale(1)}
}

/* Menyembul dari tepi bawah saat perayaan. Tidak pernah menerima tap. */
.mascot-cheer {
  position:fixed; z-index:45; pointer-events:none;
  display:flex; align-items:flex-end; gap:12px;
  left:50%; bottom:0;
  transform:translate(-50%, 115%);
  transition:transform .42s cubic-bezier(.34,1.4,.5,1);
}
.mascot-cheer.up { transform:translate(-50%, 12%); }

/* ---------------- transisi antar layar ---------------- */

/* Lingkaran besar yang tumbuh dari titik yang ditekan. Ukurannya 300vmax
   supaya selalu menutup layar dari sudut mana pun titik awalnya. */
.wipe {
  position:fixed; z-index:60; pointer-events:none;
  left:0; top:0; width:300vmax; height:300vmax;
  margin:-150vmax 0 0 -150vmax; border-radius:50%;
  transform:translate(var(--wx,50vw), var(--wy,50vh)) scale(0);
  transition:transform .3s cubic-bezier(.4,0,.7,1);
}
.wipe.in  { transform:translate(var(--wx,50vw), var(--wy,50vh)) scale(1); }
.wipe.out { transition:transform .36s cubic-bezier(.3,0,.6,1);
            transform:translate(var(--wx,50vw), var(--wy,50vh)) scale(0); }

/* ---------------- lapisan confetti ---------------- */

.fx-layer { position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }

/* ---------------- area orang tua ---------------- */

.overlay {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(30,32,54,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.sheet {
  background:#fff; border-radius:28px; padding:28px;
  width:min(520px, 94vw); max-height:88vh; overflow:auto;
  box-shadow:0 30px 70px rgba(0,0,0,.34);
  display:flex; flex-direction:column; gap:16px;
}
.sheet.wide { width:min(680px, 94vw); }
.sheet h2 { font-size:24px; font-weight:800; }
.muted { color:#7d8aa8; font-size:14px; line-height:1.45; }

.hold {
  position:relative; overflow:hidden; border:0; cursor:pointer; font-family:inherit;
  height:96px; border-radius:20px; background:#EDF2F9; color:var(--ink);
  font-size:20px; font-weight:800;
}
.hold-fill { position:absolute; inset:0 auto 0 0; width:0; background:var(--c-biru); opacity:.28; }
.hold-label { position:relative; }

.row { display:flex; align-items:center; justify-content:space-between; gap:16px;
       padding:14px 0; border-top:1px solid #EDF2F9; }
.row strong { font-size:16px; }

.toggle, .danger, .ghost {
  font-family:inherit; font-weight:800; border:0; cursor:pointer; border-radius:14px;
  padding:14px 22px; font-size:16px; min-width:104px;
}
.toggle { background:#EDF2F9; color:#7d8aa8; }
.toggle.on { background:var(--c-hijau); color:#fff; }
.danger { background:#FFECEC; color:var(--c-merah); }
.danger:disabled { opacity:.6; }
.ghost { background:var(--c-biru); color:#fff; padding:18px; font-size:18px; }

.note { font-size:14px; line-height:1.5; padding:14px 16px; border-radius:14px;
        background:#EDF2F9; color:#54627d; }
.btn-pair { display:flex; gap:10px; flex-shrink:0; }
.note.ok { background:#E8F9EE; color:#1e7a44; }
.note.warn { background:#FFF6E5; color:#8a5a00; }
.note small { display:block; margin-top:6px; opacity:.85; }

.about { font-size:14px; line-height:1.6; color:#5b6785; background:#F7FAFF;
         border-radius:16px; padding:16px; }

/* ---------------- aksesibilitas gerak ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
                           transition-duration:.001ms !important; }
  .mascot-splash, .mascot-menu, .card-emoji { animation:none !important; }
}

/* Layar sempit / portrait: turunkan grid jadi 2 kolom biar kartu tetap besar */
@media (max-width: 720px), (orientation: portrait) {
  .grid { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); max-width:600px; }
}