/* ============================================================
   Growvia — motion & polish (dimuat paling akhir).
   Aturan main:
   - Animasi masuk pakai :where() (spesifisitas 0): animasi bawaan layar selalu menang.
   - fill-mode backwards: setelah selesai, transform/opacity kembali ke gaya normal
     (hover lift & .locked opacity tetap jalan).
   - GV.morph menambal DOM: animasi masuk hanya jalan saat elemen baru dibuat
     (pindah layar / tab), bukan tiap polling.
   - Hanya opacity/transform/box-shadow: murah di HP.
   ============================================================ */

/* ─────────────── Keyframes ─────────────── */
@keyframes mo-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes mo-pop { from { opacity: 0; transform: scale(.92); } }
@keyframes mo-left { from { opacity: 0; transform: translateX(-8px); } }
@keyframes mo-right { from { opacity: 0; transform: translateX(14px); } }
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-fade-out { to { opacity: 0; } }
@keyframes mo-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes mo-dialog-out { to { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes mo-toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes mo-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(18px) scaleY(.9); } }
@keyframes mo-float { 50% { transform: translateY(-4px); } }
@keyframes mo-glow { 50% { box-shadow: inset 0 0 0 2px #3a2c10, 0 0 12px rgba(242, 178, 58, .55); } }
@keyframes mo-badge { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes mo-dots-fade { 50% { opacity: .45; } }
@keyframes mo-busy { 50% { filter: brightness(1.25); } }
@keyframes mo-shine { from { left: -60%; } to { left: 130%; } }
@keyframes mo-alert { 50% { box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 16px rgba(224, 82, 82, .55); } }

/* ─────────────── Masuk layar: bagian view bertahap ─────────────── */
:where(.main > .view) > * { animation: mo-up .32s ease-out backwards; }
:where(.main > .view) > :nth-child(2) { animation-delay: .04s; }
:where(.main > .view) > :nth-child(3) { animation-delay: .08s; }
:where(.main > .view) > :nth-child(4) { animation-delay: .12s; }
:where(.main > .view) > :nth-child(5) { animation-delay: .16s; }
:where(.main > .view) > :nth-child(6) { animation-delay: .2s; }
:where(.main > .view) > :nth-child(n + 7) { animation-delay: .24s; }
:where(.main > .loading, .main > .empty) { animation: mo-fade .25s ease-out backwards; }

/* Isi grid / daftar: muncul satu per satu (dibatasi 10 langkah supaya daftar panjang tidak lambat) */
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > * {
  animation: mo-pop .28s ease-out backwards;
  animation-delay: .3s;
}
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > :nth-child(1) { animation-delay: .03s; }
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > :nth-child(2) { animation-delay: .06s; }
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > :nth-child(3) { animation-delay: .09s; }
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > :nth-child(4) { animation-delay: .12s; }
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > :nth-child(5) { animation-delay: .15s; }
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > :nth-child(6) { animation-delay: .18s; }
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > :nth-child(7) { animation-delay: .21s; }
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > :nth-child(8) { animation-delay: .24s; }
:where(.grid, .bank-grid, .map-grid, .lb-list, .badge-wrap, .guide-facts, .cs-kpis, .cs-gamelist, .boost-list, .sell-list) > :nth-child(9) { animation-delay: .27s; }
:where(.lb-list, .cs-gamelist, .sell-list, .boost-list) > * { animation-name: mo-left; }

/* ─────────────── Topbar ─────────────── */
.brand img { transition: transform .2s ease; }
.icon-btn, .stat-chip { transition: background .15s ease, border-color .15s ease, transform .1s ease; }
@media (hover: hover) {
  .brand:hover img { transform: rotate(-8deg) scale(1.08); }
  .icon-btn:hover { transform: translateY(-1px); }
  .boost-chip:hover { border-color: var(--gold); transform: translateY(-1px); }
}
.icon-btn:active { transform: translateY(2px); }

/* ─────────────── Sidebar ─────────────── */
/* Buka grup: display none -> flex memulai ulang animasi, jadi isi grup meluncur masuk. */
:where(.nav-list:not(.collapsed), .skill-list:not(.collapsed)) > * { animation: mo-left .22s ease-out backwards; }
:where(.nav-list, .skill-list) > :nth-child(2) { animation-delay: .03s; }
:where(.nav-list, .skill-list) > :nth-child(3) { animation-delay: .06s; }
:where(.nav-list, .skill-list) > :nth-child(4) { animation-delay: .09s; }
:where(.nav-list, .skill-list) > :nth-child(n + 5) { animation-delay: .12s; }
.nav-item img, .skill-item img { transition: transform .15s ease; }
.nav-item, .skill-item { transition: background .12s ease, transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
@media (hover: hover) {
  .nav-item:hover img, .skill-item:hover img { transform: scale(1.15) rotate(-4deg); }
}
.viaz-h { transition: color .15s ease; }
.viaz-caret { transition: color .15s ease; }
.viaz-h:hover .viaz-caret { color: var(--gold); }
.skill-item .track i { transition: transform .5s ease-out; }
.nav-item .pip { animation: pulse 1.6s ease-in-out infinite; }

/* ─────────────── Panel kanan (laci) ─────────────── */
.shell.right-open .right-scrim { animation: mo-fade .2s ease-out; }
:where(.rightbar) > * { animation: mo-right .3s ease-out backwards; }
:where(.rightbar) > :nth-child(2) { animation-delay: .05s; }
:where(.rightbar) > :nth-child(3) { animation-delay: .1s; }
:where(.rightbar) > :nth-child(n + 4) { animation-delay: .15s; }
.log-entry:last-child { animation: mo-left .25s ease-out; }

/* ─────────────── Tombol ─────────────── */
.btn {
  position: relative; overflow: hidden;
  transition: transform .08s ease, box-shadow .08s ease, border-color .15s ease, filter .15s ease;
}
/* Kilau menyapu saat hover tombol utama */
.btn.primary::before, .btn.gold::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
@media (hover: hover) {
  .btn:hover:not(:disabled) { filter: brightness(1.08); }
  .btn.primary:hover:not(:disabled)::before, .btn.gold:hover:not(:disabled)::before { opacity: 1; animation: mo-shine .6s ease-out; }
}
.btn[aria-busy='true'] { animation: mo-busy .8s ease-in-out infinite; cursor: progress; }
.cs-bet-btn[aria-busy='true'] { animation: mo-busy .8s ease-in-out infinite; cursor: progress; }

/* ─────────────── Tab ─────────────── */
.tab { transition: color .15s ease, background .15s ease, box-shadow .2s ease, transform .1s ease; }
@media (hover: hover) { .tab:hover:not(.active) { transform: translateY(-1px); } }
.tab:active { transform: translateY(1px); }
.chip-row .chip { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.chip-row .chip:active { transform: scale(.95); }

/* ─────────────── Kartu & panel ─────────────── */
.card:not(.locked) { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.card-top img { transition: transform .2s ease; }
@media (hover: hover) { .card:not(.locked):hover .card-top img { transform: scale(1.12) rotate(-5deg); } }
.panel-h img { transition: transform .2s ease; }
@media (hover: hover) { .panel:hover > .panel-h img { transform: rotate(-8deg) scale(1.1); } }
.view-title img { animation: mo-float 3s ease-in-out infinite; }

/* ─────────────── Map ─────────────── */
.map-node { transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.map-node img { transition: transform .2s ease; }
@media (hover: hover) {
  .map-node:hover:not(.fog) { transform: translateY(-2px); border-color: var(--gold); }
  .map-node:hover:not(.fog) img { transform: scale(1.15); }
}
.map-node.current { animation: mo-glow 1.8s ease-in-out infinite; }
.map-node.current img { animation: mo-float 2s ease-in-out infinite; }
.map-node.boss:not(.fog) img { filter: drop-shadow(0 0 4px rgba(224, 82, 82, .7)); }

/* ─────────────── Bank ─────────────── */
.bank-cell { transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.bank-cell img { transition: transform .2s ease; }
@media (hover: hover) {
  .bank-cell:hover:not(.empty) { transform: translateY(-2px); }
  .bank-cell:hover:not(.empty) img { transform: scale(1.15) rotate(-6deg); }
}
.sell-row { transition: border-color .15s ease, background .15s ease; }
.sell-row:hover { border-color: var(--line2); background: var(--panel3); }

/* ─────────────── Leaderboard (Goals / Gacha / Clan) ─────────────── */
:where(.lb-podium) > * { animation: mo-rise .45s cubic-bezier(.2, .9, .3, 1.2) backwards; transform-origin: bottom; }
:where(.lb-podium) > .r1 { animation-delay: .2s; }
:where(.lb-podium) > .r2 { animation-delay: .05s; }
:where(.lb-podium) > .r3 { animation-delay: .12s; }
.lb-pod.r1 .lb-medal { animation: mo-float 2.2s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(242, 178, 58, .6)); }
.lb-row { transition: border-color .15s ease, background .15s ease, transform .12s ease; }
@media (hover: hover) { .lb-row:hover { border-color: var(--line2); background: var(--panel3); transform: translateX(2px); } }

/* ─────────────── Profil ─────────────── */
.profile-avatar { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .profile-avatar:hover { transform: scale(1.05) rotate(-2deg); border-color: var(--gold); box-shadow: 0 0 12px rgba(242, 178, 58, .45); } }
.badge-pill { transition: transform .12s ease, border-color .15s ease; }
@media (hover: hover) { .badge-pill:hover { transform: translateY(-2px); } }

/* ─────────────── Guide ─────────────── */
.guide-toc-item { transition: background .12s ease, transform .12s ease, box-shadow .15s ease; }
@media (hover: hover) { .guide-toc-item:hover:not(.active) { transform: translateX(2px); } }
.guide-hero img.big { animation: mo-float 2.6s ease-in-out infinite; }
:where(.guide-body) > * { animation: mo-up .3s ease-out backwards; animation-delay: .08s; }
.guide-tip { animation: mo-pop .3s ease-out backwards .15s; }

/* ─────────────── Casino ─────────────── */
.cs-felt { animation: mo-fade .35s ease-out backwards; }
.cs-game img, .cs-tab img { transition: transform .15s ease, opacity .12s ease; }
@media (hover: hover) { .cs-game:hover img, .cs-tab:hover img { transform: scale(1.15); } }
.cs-chip.on { animation: mo-float 1.6s ease-in-out infinite; }
.cs-lobby-art { transition: transform 6s ease-out, filter .4s ease; }
@media (hover: hover) { .cs-lobby:hover .cs-lobby-art { transform: scale(1.04); filter: saturate(1) brightness(.9); } }

/* ─────────────── Chat ─────────────── */
.ch-thread > .ch-msg:last-child { animation: mo-up .22s ease-out; }
.ch-room { transition: background .12s ease, border-color .15s ease, box-shadow .15s ease; }
.ch-room-ic { transition: border-color .15s ease, transform .15s ease; }
@media (hover: hover) { .ch-room:hover .ch-room-ic { transform: scale(1.06); } }
.ch-badge { animation: mo-badge .3s ease-out; }
.ch-quote { transition: border-color .15s ease, background .15s ease; }
.ch-reply-btn { transition: opacity .12s ease, border-color .15s ease, color .15s ease; }
.ch-reply-btn:hover { border-color: var(--gold); color: var(--head); }
/* Layar sentuh tidak punya hover: tombol balas harus tetap terlihat. */
@media (hover: none) { .ch-reply-btn { opacity: .7; width: 32px; height: 32px; } }

/* ─────────────── Modal ─────────────── */
.modal-backdrop { animation: mo-fade .18s ease-out; }
.modal { animation: mo-dialog-in .22s cubic-bezier(.2, .9, .3, 1.15); }
.modal-backdrop.out { animation: mo-fade-out .18s ease-in forwards; pointer-events: none; }
.modal-backdrop.out .modal { animation: mo-dialog-out .18s ease-in forwards; }
.modal input, .modal select { transition: border-color .15s ease; }

/* ─────────────── Toast: masuk dari kanan + garis sisa waktu ─────────────── */
.toast { position: relative; overflow: hidden; animation: mo-right .22s cubic-bezier(.2, .9, .3, 1.15); }
.toast::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; opacity: .35; transform-origin: left;
  animation: mo-drain 4.2s linear forwards;
}
.toast.success::after { background: var(--green); opacity: .7; }
.toast.error::after { background: var(--red); opacity: .7; }
.toast.info::after { background: var(--blue); opacity: .7; }
.toast.gold::after { background: var(--gold); opacity: .7; }
.toast.out { animation: mo-toast-out .25s ease-in forwards; }

/* ─────────────── State: loading / kosong / boot ─────────────── */
.loading::before {
  content: ''; width: 12px; height: 12px; margin-right: 10px; flex: none;
  border: 2px solid var(--gold); border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.empty { animation: mo-fade .3s ease-out backwards; }
.boot-screen img { animation: mo-float 2.4s ease-in-out infinite; }
.boot-screen p { animation: mo-dots-fade 1.4s ease-in-out infinite; }
.raid-alert { animation: raid-in .25s ease-out, mo-alert 1.6s ease-in-out .25s infinite; }

/* ─────────────── Rapikan: HP ─────────────── */
@media (max-width: 860px) {
  /* Tab satu baris yang bisa digeser, bukan menumpuk 2–3 baris. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: none; }
}
@media (max-width: 560px) {
  /* Judul + badge level sebaris (sebelumnya badge turun, header setinggi 140px). */
  .view-head { flex-wrap: nowrap; align-items: flex-start; }
  .view-head > .view-title { flex: 1; min-width: 0; }
  .view-head > .level-badge, .view-head > .chip { flex: none; }
  .view-head > .level-badge { padding: 4px 8px; }
  .level-badge strong { font-size: 12px; }
  .view-title { gap: 9px; }
  .view-title img, .main .view-title img.pix { width: 32px; height: 32px; max-width: 32px; max-height: 32px; }
}
/* Target sentuh minimal ~32px di layar sentuh. */
@media (pointer: coarse) {
  .btn.sm, .tab { min-height: 32px; }
  .pager-dot { box-sizing: content-box; padding: 8px 4px; background-clip: content-box; }
}

/* Semua animasi di atas mati untuk pemain yang minta gerak dikurangi (game.css juga menekan durasi). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}