/* =====================================================================================================================
   Roundkins — design system v3 (15 Okt 2026, disetujui, gaya "B") diterapkan ke LOBBY + layar engine di luar game. Dulu v2 (13 Okt).
   KURSOR v3 (satu aturan): terpilih = isi --ds-on + teks putih + membesar sedikit + panah oranye (daftar/tombol → kiri, grid/pin → atas).
   Pengecualian: papan huruf & angka (rapat) = isi + membesar, tanpa panah. Huruf selalu tegak.
   Dimuat setelah style.css & ds.css. Hanya mengubah tampilan (warna pastel/biru muda, bayangan lembut, ikon Phosphor) —
   struktur yang sudah disetujui pemilik tetap. Selector dibatasi ke layar lobby/engine (.scr-*, #app.on-world, popup)
   supaya layar game (.scr-game) tidak ikut berubah. Aturan: docs/STYLEGUIDE.md §1b.
   ===================================================================================================================== */

/* ---------- v3: huruf TEGAK di semua layar luar game (style.css lama memiringkan judul) ---------- */
#app.on-world .h, #app .s-title, .v-label, .wp-venue, .wp-q, .lv-name, #app .wl-title, #app .wl-row b, .avp-head, .sp-head,
#app.on-world .who-panel .h, #app.on-world .who-panel .big-btn, #app.on-world .who-panel .ok-btn, #wipe .slam small, #wipe .slam b,
#app:not(.scr-game) .h { font-style: normal; }

/* ---------- v3: panah kursor KIRI untuk tombol & baris (grid/pin/bulat memakai panah atas di aturannya masing-masing) ---------- */
#app .wl-back.f.on::before, #app .s-start.on::before, #app.on-world .who-panel .big-btn.f.on::before, #app.on-world .who-panel .ok-btn.f.on::before,
#app.on-world .who-panel .joy-skip.f.on::before, #app .sp-ok.f.on::before, #app .ar-go.f.on::before,
#app .kc-back.f.on::before, .pg-x.on::before, .scr-parent .btn.f.on::before, .scr-diag .btn.f.on::before {
  content: ''; display: block; position: absolute; left: calc(var(--u) * -2.6); top: 50%; translate: 0 -50%; z-index: 3;
  width: calc(var(--u) * 1.6); height: calc(var(--u) * 2.4); border: 0; filter: none; background: var(--ds-cursor);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 34% 50%); animation: ds-nudge .9s ease-in-out infinite; }

#app .sp-ok, .pg-x, #app .ar-go, .scr-parent .btn, .scr-diag .btn { position: relative; }

/* ---------- ikon di dalam elemen lama ---------- */
#app .ds-i { width: 1em; height: 1em; }

/* ---------- toast ---------- */
#toast { display: flex; align-items: center; gap: .5em; background: var(--ds-scrim); color: #fff; font-family: var(--ds-font); font-weight: 700;
  box-shadow: var(--ds-sh-dark); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#toast .ds-i { font-size: 1.2em; flex: none; }

/* ---------- tombol bulat (🔊 ⚙️) ---------- */
#app .rb.ds-round { background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2)); color: var(--ds-ink); border: 0;
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-surf); }
#app .rb.ds-round.f.on { transform: scale(1.08); background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); }
#app .w-bar .rb.ds-round, #app .s-snd.ds-round { font-size: calc(var(--u) * 2.8); }

/* ---------- splash ---------- */
#app .s-start { position: relative; background: linear-gradient(180deg, #f6802f, var(--ds-cta)); color: #fff; border: 0; font-style: normal;
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-cta); }
#app .s-start.on { transform: scale(1.04); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-cta); }
#app .splash-ui .pill.ds-dark { display: inline-flex; align-items: center; gap: .5em; background: var(--ds-scrim); color: #fff; text-shadow: none; box-shadow: var(--ds-sh-dark); }
#app .splash-ui .pill.ok { background: rgba(31, 110, 70, .72); }
#app .s-title { text-shadow: var(--ds-ts); }

/* ---------- bilah judul peta ---------- */
/* v3 pita atas: judul = pil putih (ikon dalam lingkaran pastel + nama tempat + keterangan). Teks putih lepas tidak terbaca di peta terang. */
#app .w-title { gap: var(--ds-sp-3); padding: var(--ds-sp-1) var(--ds-sp-6) var(--ds-sp-1) var(--ds-sp-1); border-radius: var(--ds-r-pill); background: #fff;
  color: var(--ds-ink); text-shadow: none; box-shadow: var(--ds-sh-dark); }
#app .wt-ic { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); border: 0; border-radius: 50%; background: var(--ds-p-mint); color: var(--ds-deep);
  box-shadow: none; filter: none; font-size: calc(var(--u) * 3); display: grid; place-items: center; }
#app .wt-ic .ds-i { width: 1em; height: 1em; }
#app .wt-tx { gap: calc(var(--u) * .2); }
#app .wt-tx b { font-weight: 700; font-size: var(--ds-fs-title); line-height: 1.1; text-shadow: none; }
#app .wt-tx small { font-weight: 500; font-size: var(--ds-fs-small); color: var(--ds-ink-2); text-shadow: none; }
#app .wt-tx .rule { display: none; }

/* ---------- kartu profil ---------- */
#app .w-card { box-shadow: var(--ds-sh-soft); border: 0; }
#app .wc-av { border-color: var(--ds-sel-2); background: var(--ds-surf); box-shadow: none; }
#app .wc-edit { background: var(--ds-cta); color: #fff; display: grid; place-items: center; font-size: calc(var(--u) * 1.7); box-shadow: none; border: calc(var(--u) * .3) solid #fff; }
#app .wc-name { color: var(--ds-ink); }
#app .wc-stk { background: var(--ds-p-sky); color: var(--ds-ink-2); box-shadow: none; }
#app .wc-stk b { color: var(--ds-ink); }
#app .wc-stk > .ds-i { font-size: calc(var(--u) * 2.4); color: var(--ds-ink); }
#app .wc-stk .joy { display: inline-grid; place-items: center; color: var(--ds-deep); font-size: calc(var(--u) * 2.2); gap: 0; }
#app .wc-stk .joy i { display: none; }
#app .wc-swap { background: var(--ds-scrim); box-shadow: none; }
#app .wc-swap .ds-i { font-size: calc(var(--u) * 2.2); }
#app .wc-stk.f.on, #app .wc-swap.f.on { transform: scale(1.04); background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); }
#app .wc-stk.f.on b, #app .wc-stk.f.on > .ds-i, #app .wc-stk.f.on .joy { color: var(--ds-on-ink); }
#app .wc-av.f.on { transform: scale(1.06); border-color: var(--ds-on); box-shadow: 0 0 0 calc(var(--u) * .35) #fff, var(--ds-sh-on); }

/* ---------- chip controller (kanan bawah) ---------- */
#app .w-pad { box-shadow: var(--ds-sh-soft); color: var(--ds-ink); }
#app .w-pad .wp-ic { color: var(--ds-deep); display: grid; place-items: center; font-size: calc(var(--u) * 2.4); }
#app .wp-perk { display: inline-flex; align-items: center; gap: .3em; background: var(--ds-p-butter); color: #6a4a00; }
#app .wp-perk.ok { background: var(--ds-p-mint); color: #1c6a35; }
#app .wp-perk.tip { background: var(--ds-p-sky); color: var(--ds-ink-2); }

/* ---------- petunjuk tombol: simbol tombol asli mengikuti controller terakhir (body.pad-*) ---------- */
#app .w-hints.ds-hints { color: #fff; text-shadow: none; }
#app .kbg { display: inline-grid; place-items: center; font-style: normal; font-size: calc(var(--u) * 2.8); }
#app .kbg b { display: none; font-weight: inherit; }
#app .kbg.pick .g-a { display: inline-grid; }                       /* bawaan: Joy-Con / Pro / Xbox → A */
body.pad-ps #app .kbg.pick .g-a { display: none; } body.pad-ps #app .kbg.pick .g-ps { display: inline-grid; }
body.pad-gen #app .kbg.pick .g-a { display: none; } body.pad-gen #app .kbg.pick .g-gen { display: inline-grid; }
body.pad-jl #app .kbg.pick .g-a { display: none; } body.pad-jl #app .kbg.pick .g-gen { display: inline-grid; }

/* ---------- badge tempat di peta ---------- */
#app .venue .ring { border-color: var(--ds-sel-2); box-shadow: var(--ds-sh-dark); }
/* ekor gelembung di kiri bawah lingkaran (di .venue, karena .ring memotong isinya) */
#app .venue::after { content: ''; position: absolute; left: calc(var(--u) * 1.2); top: calc(50% + var(--u) * 3); width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.4);
  background: var(--ds-sel-2); clip-path: polygon(0 100%, 8% 0, 100% 0); z-index: 1; pointer-events: none; }
#app .venue.on::after { transform: scale(1.14); transform-origin: 50% -150%; }
#app .venue .tag { background: linear-gradient(180deg, #fff, var(--ds-surf-2)); color: var(--ds-deep); box-shadow: var(--ds-sh-dark); text-shadow: none; }
#app .venue .meta { background: var(--ds-scrim); box-shadow: none; }
#app .venue.on .ring { border-color: var(--ds-on); box-shadow: 0 0 0 calc(var(--u) * .5) #fff, var(--ds-sh-dark); }
#app .venue.on::after { background: var(--ds-on); }
#app .venue.on .tag { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); }

/* ---------- panel pilih tingkat (warna baris = warna tingkat, tidak diubah) ---------- */
#app .wl-head { box-shadow: var(--ds-sh-soft); border: 0; }
#app .wl-tag { background: var(--ds-deep); color: #fff; }
#app .wl-title { color: var(--ds-ink); font-style: normal; }
#app .wl-sub { color: var(--ds-ink-2); }
#app .wl-row { box-shadow: var(--ds-sh-soft); border: 0; }
#app .wl-row.f.on { box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-soft); transform: scale(1.04); }
#app .wl-row .wl-name, #app .wl-row b { font-style: normal; }
#app .wl-dot { box-shadow: none; }
#app .wl-back, #app .wc-swap { display: inline-flex; align-items: center; gap: calc(var(--u) * .8); background: var(--ds-scrim); color: #fff; box-shadow: var(--ds-sh-dark);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#app .wc-swap { box-shadow: none; }
#app .wl-back .ds-i { font-size: 1.2em; }
#app .wl-back { position: relative; }
#app .wl-back.f.on { transform: scale(1.04); background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); }
#app .wl-last { background: var(--ds-p-butter); color: #6a4a00; }

/* ---------- popup di atas dunia (pemain, nama, jagoan, Joy-Con) ---------- */
#app.on-world .who-panel { box-shadow: var(--ds-sh-soft), 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(29, 58, 95, .14); border: 0; }
#app.on-world .who-panel .h { color: var(--ds-ink); font-style: normal; }
#app.on-world .who-panel .card { background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2)); border: 0; color: var(--ds-ink);
  box-shadow: inset 0 0 0 calc(var(--u) * .3) #fff, var(--ds-sh-surf); }
#app.on-world .who-panel .card .lbl { color: var(--ds-ink); }
#app.on-world .who-panel .card .ic .ds-i { width: 1em; height: 1em; font-size: calc(var(--u) * 6); color: var(--ds-deep); }
#app.on-world .who-panel .card.ghost { background: transparent; box-shadow: inset 0 0 0 calc(var(--u) * .3) var(--ds-surf-edge); }
#app.on-world .who-panel .card.ghost.f.on { background: var(--ds-surf); }
#app.on-world .who-panel .card.f.on, #app.on-world .who-panel .card.sel { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); border: 0; transform: scale(1.04); }
#app.on-world .who-panel .card.f.on .lbl, #app.on-world .who-panel .card.sel .lbl { color: var(--ds-on-ink); }
#app.on-world .who-panel .card.f.on .ic .ds-i { color: var(--ds-on-ink); }
#app.on-world .who-panel .mini-btn { display: grid; place-items: center; font-size: calc(var(--u) * 2.8); }
#app.on-world .who-panel .big-btn, #app.on-world .who-panel .ok-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  background: linear-gradient(180deg, #f6802f, var(--ds-cta)); color: #fff; border: 0; font-style: normal; box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-cta); }
#app.on-world .who-panel .big-btn.f.on, #app.on-world .who-panel .ok-btn.f.on { transform: scale(1.04); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-cta); }
#app.on-world .who-panel .joy-skip:not(.go) { background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2)); color: var(--ds-ink);
  box-shadow: inset 0 0 0 calc(var(--u) * .3) #fff, var(--ds-sh-surf); }
#app.on-world .who-panel .joy-skip { position: relative; font-style: normal; }
#app.on-world .who-panel .joy-skip:not(.go).f.on { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); transform: scale(1.04); }
#app.on-world .who-panel .key { background: linear-gradient(180deg, #fff, var(--ds-surf-2)); color: var(--ds-ink); border: 0; box-shadow: inset 0 0 0 calc(var(--u) * .25) #fff, var(--ds-sh-surf); }
#app.on-world .who-panel .key.on { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); transform: scale(1.1); border: 0; }
#app.on-world .who-panel .key.del { background: linear-gradient(180deg, #fff3f3, #ffe1e1); color: #a8322a; }
#app.on-world .who-panel .name-field { border: 0; box-shadow: inset 0 calc(var(--u) * -.3) 0 var(--ds-surf-2), var(--ds-sh-soft); color: var(--ds-ink); }
#app.on-world .who-panel .name-inp:focus { box-shadow: 0 0 0 calc(var(--u) * .4) var(--ds-on), var(--ds-sh-soft); }
#app.on-world .card.f.on::before { border-top-color: var(--ds-cursor); filter: none; }
.joy-feat span { display: inline-flex; align-items: center; gap: .35em; background: var(--ds-p-sky); color: var(--ds-ink); }
.joy-feat .hl { background: var(--ds-p-butter); color: #6a4a00; box-shadow: none; }
.joy-also { display: flex; align-items: center; gap: .4em; }
.joy-status { background: var(--ds-p-butter); color: #6a4a00; }
.joy-status.ok { background: var(--ds-p-mint); color: #1c6a35; }
.joy-dev { background: var(--ds-p-sky); color: var(--ds-ink-2); }
.joy-dev.ok { background: var(--ds-p-mint); color: #1c6a35; }

/* ---------- popup foto & atur suara ---------- */
#app .av-pop, #app .snd-pop { box-shadow: var(--ds-sh-soft), 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(29, 58, 95, .14); border: 0; font-family: var(--ds-font); }
#app .avp { background: var(--ds-surf); box-shadow: inset 0 0 0 calc(var(--u) * .25) #fff, var(--ds-sh-surf); border: 0; }
#app .avp.sel { background: var(--ds-sel); box-shadow: inset 0 0 0 calc(var(--u) * .25) #fff, var(--ds-sh-sel); }
#app .avp.f.on { border: 0; transform: scale(1.1); box-shadow: 0 0 0 calc(var(--u) * .45) var(--ds-on), var(--ds-sh-on); }
#app .sp-head, #app .sp-name { display: flex; align-items: center; gap: .45em; color: var(--ds-ink); }
#app .sp-name .ds-i { color: var(--ds-deep); }
#app .sp-lv { background: var(--ds-surf); color: var(--ds-ink-2); box-shadow: inset 0 0 0 calc(var(--u) * .2) #fff, var(--ds-sh-surf); border: 0; }
#app .sp-lv .off { display: grid; place-items: center; font-style: normal; }
#app .sp-lv.sel { background: linear-gradient(180deg, var(--ds-sel), var(--ds-sel-2)); color: var(--ds-sel-ink); box-shadow: inset 0 0 0 calc(var(--u) * .2) #fff, var(--ds-sh-sel); }
#app .sp-lv.sel small { color: var(--ds-sel-ink); }
#app .sp-lv.f.on { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); border: 0; transform: scale(1.06); }
#app .sp-lv.f.on small, #app .sp-lv.f.on .off { color: var(--ds-on-ink); }
#app .sp-ok { display: inline-flex; align-items: center; justify-content: center; gap: .35em; background: linear-gradient(180deg, #f6802f, var(--ds-cta)); color: #fff;
  box-shadow: var(--ds-sh-cta); border: 0; }
#app .sp-ok.f.on { transform: scale(1.04); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-cta); }

/* ---------- gerbang orang tua ---------- */
.pg-panel { box-shadow: var(--ds-sh-soft), 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(29, 58, 95, .16); }
.pg-h { display: flex; align-items: center; gap: .4em; color: var(--ds-ink-2); }
.pg-q { color: var(--ds-ink); }
.pg-ans { background: var(--ds-surf-2); color: var(--ds-ink); }
.pg-k { background: linear-gradient(180deg, #fff, var(--ds-surf-2)); color: var(--ds-ink); box-shadow: inset 0 0 0 calc(var(--u) * .25) #fff, var(--ds-sh-surf); }
.pg-k.ok { background: linear-gradient(180deg, var(--ds-sel), var(--ds-sel-2)); color: var(--ds-sel-ink); box-shadow: inset 0 0 0 calc(var(--u) * .25) #fff, var(--ds-sh-sel); }
.pg-x { display: inline-flex; align-items: center; gap: .35em; background: var(--ds-surf); color: var(--ds-ink); box-shadow: var(--ds-sh-surf); }
.pg-k.on, .pg-x.on { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); transform: scale(1.08); }

/* ---------- Menu Orang Tua & Tes Controller (layar orang tua) ---------- */
.scr-parent .panel, .scr-diag .panel { box-shadow: var(--ds-sh-soft), 0 12px 36px rgba(29, 58, 95, .10); color: var(--ds-ink); font-family: var(--ds-font); }
.scr-parent .panel h2, .scr-diag .panel h2, .scr-parent .panel h3, .scr-diag .panel h3 { display: flex; align-items: center; gap: .4em; color: var(--ds-ink); }
.scr-parent .panel h2 .ds-i, .scr-diag .panel h2 .ds-i { color: var(--ds-deep); }
.scr-parent .btn, .scr-diag .btn { display: inline-flex; align-items: center; gap: .45em; background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2)); color: var(--ds-ink);
  border: 0; box-shadow: inset 0 0 0 2px #fff, var(--ds-sh-surf); font-family: var(--ds-font); font-weight: 700; }
.scr-parent .btn .ds-i, .scr-diag .btn .ds-i { color: var(--ds-deep); font-size: 1.1em; }
.scr-parent .btn:hover, .scr-diag .btn:hover { background: linear-gradient(180deg, #fff, var(--ds-surf)); }
.scr-parent .btn.primary, .scr-diag .btn.primary { background: linear-gradient(180deg, #f6802f, var(--ds-cta)); color: #fff; box-shadow: var(--ds-sh-cta); }
.scr-parent .btn.danger, .scr-diag .btn.danger { background: linear-gradient(180deg, #fff3f3, #ffe1e1); color: #a8322a; }
.scr-parent .btn.danger .ds-i { color: #a8322a; }
.scr-parent .btn:focus-visible, .scr-diag .btn:focus-visible { outline: 3px solid var(--ds-cursor); outline-offset: 2px; }
.scr-parent .prow { border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ds-surf-2); }
.scr-parent .field select, .scr-parent .panel .inp { border-color: var(--ds-surf-edge); color: var(--ds-ink); }
.mic-meter { background: var(--ds-surf-2); }

/* ---------- perayaan, album, istirahat ---------- */
.scr-celebrate .card.tile, .scr-album .card.tile { background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2)); border: 0; color: var(--ds-ink);
  box-shadow: inset 0 0 0 calc(var(--u) * .3) #fff, var(--ds-sh-surf); }
.scr-celebrate .card.tile .ic .ds-i, .scr-album .card.tile .ic .ds-i { width: 1em; height: 1em; font-size: calc(var(--u) * 5.4); color: var(--ds-deep); }
.scr-celebrate .card.tile.f.on, .scr-album .card.tile.f.on { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); border: 0; transform: translateY(calc(var(--u) * -.6)) scale(1.04); }
.scr-celebrate .card.tile.f.on .lbl, .scr-album .card.tile.f.on .lbl, .scr-celebrate .card.tile.f.on .ic .ds-i, .scr-album .card.tile.f.on .ic .ds-i { color: var(--ds-on-ink); }
.scr-album .stk { background: #fff; box-shadow: var(--ds-sh-soft); border: 0; }
.scr-album .stk.locked { background: var(--ds-grey); box-shadow: none; }
.scr-album .stk.f.on { box-shadow: 0 0 0 calc(var(--u) * .5) var(--ds-on), var(--ds-sh-on); }
.scr-album .chip, .scr-celebrate .chip { background: var(--ds-deep); color: #fff; }

/* ---------- tombol tahan orang tua (⚙️ pojok, buka kunci istirahat) ---------- */
#app .gate .hold, #app .unlock .hold { background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2)); color: var(--ds-ink); border: 0;
  box-shadow: inset 0 0 0 calc(var(--u) * .3) #fff, var(--ds-sh-surf); display: grid; place-items: center; }
#app .gate .hold .ds-i, #app .unlock .hold .ds-i { width: 1em; height: 1em; }
.scr-album .card.f.on::before, .scr-celebrate .card.f.on::before { border-top-color: var(--ds-cursor); filter: none; }
.scr-album .chip, .scr-celebrate .chip { box-shadow: var(--ds-sh-soft); }

/* ---------- Sub-lobby ARENA (14 Okt 2026, gaya C): peta di-zoom ke venue, tiap isi arena = pin di areanya; area terpilih disorot
   di titik WORLD.zoomAt (27% 50%). Lapisan .ar-pins ikut transform peta (app.js worldZoomTo) — pin diskala balik dengan --z. ---------- */
#app .ar-pins { position: absolute; pointer-events: none; --z: 1; z-index: 1; }
#app .ar-pin { position: absolute; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); cursor: pointer;
  transform: translate(-50%, -50%) scale(calc(.82 / var(--z))); transform-origin: 50% 50%; transition: transform .25s var(--ds-ease); }
#app .ar-pin.f.on { box-shadow: none; border: 0; z-index: 3; transform: translate(-50%, -50%) scale(calc(1.08 / var(--z))); }
#app .ar-ring { position: relative; width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); border-radius: 50%; background: var(--ds-surf); overflow: hidden;
  border: calc(var(--u) * .7) solid #fff; display: grid; place-items: center; box-shadow: var(--ds-sh-dark); }
#app .ar-ring img.host { width: 86%; height: 86%; object-fit: contain; object-position: 50% 70%; }
#app .ar-ic { width: 60%; color: #b4470c; display: grid; } #app .ar-ic svg { width: 100%; height: auto; }
#app .ar-pin.is-book .ar-ring { background: linear-gradient(135deg, #ffe08a, #ffb84a); }
#app .ar-tag { padding: calc(var(--u) * .6) calc(var(--u) * 1.8); border-radius: 999px; background: linear-gradient(180deg, #fff, var(--ds-surf-2)); color: var(--ds-deep);
  font: 700 calc(var(--u) * 2) / 1.1 var(--mp-font); white-space: nowrap; box-shadow: var(--ds-sh-dark); }
#app .ar-pin.on .ar-ring { border-color: var(--ds-on); box-shadow: 0 0 0 calc(var(--u) * .5) #fff, var(--ds-sh-on); }
#app .ar-pin.on .ar-tag { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); }
/* sorotan area: cincin berdenyut di bawah pin terpilih + kursor oranye di atasnya */
#app .ar-pin.on::before { content: ''; position: absolute; left: 50%; top: calc(var(--u) * 4.2); width: calc(var(--u) * 20); height: calc(var(--u) * 11); z-index: -1;
  translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(146, 207, 248, .35) 70%, transparent);
  box-shadow: 0 0 0 calc(var(--u) * .5) rgba(255, 255, 255, .85); animation: ar-pulse 1.6s ease-in-out infinite; }
#app .ar-pin.on::after { content: ''; position: absolute; top: calc(var(--u) * -3.4); left: 50%; translate: -50% 0; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.4);
  background: var(--ds-cursor); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); animation: ar-bob .8s ease-in-out infinite; }
@keyframes ar-pulse { 50% { scale: 1.08; opacity: .8; } }
@keyframes ar-bob { 50% { translate: -50% calc(var(--u) * .6); } }
/* peta di luar area sorot sedikit diredupkan (titik sorot tetap: area terpilih selalu dibawa ke sana) */
#app .ar-dim { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse calc(var(--u) * 30) calc(var(--u) * 22) at 27% 50%, transparent 55%, rgba(16, 32, 60, .30) 100%); }
#app .ar-panel { bottom: auto; top: calc(var(--u) * 15); }
#app .ar-go { align-self: flex-end; display: inline-flex; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .8) calc(var(--u) * 2) calc(var(--u) * .8) calc(var(--u) * 1.2);
  border-radius: 999px; background: linear-gradient(180deg, #f6802f, var(--ds-cta)); color: #fff; font: 700 calc(var(--u) * 2) / 1 var(--mp-font); box-shadow: var(--ds-sh-cta); }
#app .ar-go .kbg { font-size: 1.3em; }

/* ---------- Buku Pintar: buku terbuka di atas peta yang diredupkan ---------- */
#app.scr-book::before { content: ''; position: absolute; inset: 0; background: rgba(16, 32, 60, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#app .bk { position: absolute; left: 50%; top: calc(var(--u) * 10.5); translate: -50% 0; width: min(calc(var(--u) * 90), 94vw); height: calc(100% - var(--u) * 20);
  display: grid; grid-template-columns: 1fr 1.45fr; gap: calc(var(--u) * .4); padding: calc(var(--u) * 1); border-radius: calc(var(--u) * 2.6);
  background: linear-gradient(180deg, #f2b25a, #e39a3e); box-shadow: var(--ds-sh-dark); }
#app .bk-pg { position: relative; background: #fffaf0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
#app .bk-left { border-radius: calc(var(--u) * 2) calc(var(--u) * .5) calc(var(--u) * .5) calc(var(--u) * 2); box-shadow: inset calc(var(--u) * -1) 0 calc(var(--u) * 1.4) rgba(0, 0, 0, .07);
  padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 5); gap: calc(var(--u) * .6); }
#app .bk-right { border-radius: calc(var(--u) * .5) calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * .5); padding: calc(var(--u) * 1.8); }
#app .bk-pic { height: calc(var(--u) * 16); width: 100%; display: flex; align-items: center; justify-content: center; flex: none; }
#app .bk-pic .bk-img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * .5) calc(var(--u) * .8) rgba(29, 58, 95, .2)); }
#app .bk-pic .bk-shape { height: 100%; width: auto; }
#app .bk-pic .bk-emo { font-size: calc(var(--u) * 12); line-height: 1; }
#app .bk-pic .bk-sw { width: calc(var(--u) * 15); height: calc(var(--u) * 15); flex: none; }
#app .bk-pic .bk-many { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: calc(var(--u) * .3); max-width: calc(var(--u) * 26); }
#app .bk-pic .bk-many img { width: calc(var(--u) * 4.6); }
#app .bk-big { font: 800 calc(var(--u) * 6.4) / 1 var(--mp-font); color: var(--ds-deep); }
#app .bk-big:empty { display: none; }
#app .bk-word { font: 700 calc(var(--u) * 3.4) / 1.15 var(--mp-font); color: var(--ds-ink); text-align: center; }
#app .bk-hint { position: absolute; bottom: calc(var(--u) * 1.6); display: inline-flex; align-items: center; gap: calc(var(--u) * .6); color: var(--ds-ink-2);
  font: 700 calc(var(--u) * 1.6) / 1 var(--mp-font); }
#app .bk-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: 1fr; gap: calc(var(--u) * 1.1); width: 100%; height: 100%; }
#app .bk-it { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .3); min-height: 0; overflow: hidden;
  border-radius: calc(var(--u) * 1.6); background: #fff; box-shadow: var(--ds-sh-soft); cursor: pointer; padding: calc(var(--u) * .5); transition: transform .16s var(--ds-ease); }
#app .bk-it.f.on { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); border: 0; transform: scale(1.06); z-index: 1; box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); }
#app .bk-it.f.on small { color: var(--ds-on-ink); }
#app .bk-it .bk-img { height: 62%; max-width: 92%; object-fit: contain; min-height: 0; }
#app .bk-it .bk-shape { height: 58%; }
#app .bk-it .bk-emo { font-size: calc(var(--u) * 4); line-height: 1; }
#app .bk-it .bk-sw { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); }
#app .bk-it small { font: 700 calc(var(--u) * 1.6) / 1.1 var(--mp-font); color: var(--ds-ink); text-align: center; }
#app .bk-it .bk-lbl { font: 800 calc(var(--u) * 3.4) / 1 var(--mp-font); color: var(--ds-deep); }
#app .bk-it.on .bk-lbl { color: var(--ds-on-ink); }
#app .bk-sw { display: grid; place-items: center; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 calc(var(--u) * .3) rgba(29, 58, 95, .14); }
#app .bk-sw img { width: 72%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
/* game arena yang belum dibuka (VENUES[id].plan): tampil bergembok — abu-abu lembut, tetap bisa dipilih ("segera dibuka!") */
#app .ar-pin.is-lock .ar-ring { background: var(--ds-grey); overflow: visible; }
#app .ar-pin.is-lock .ar-ring img { filter: grayscale(1) opacity(.55); border-radius: 50%; }
#app .ar-pin.is-lock .ar-tag { background: var(--ds-grey); color: var(--ds-grey-ink); }
#app .ar-lock { position: absolute; right: calc(var(--u) * -1); bottom: calc(var(--u) * -.6); width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: 50%;
  display: grid; place-items: center; background: var(--ds-slab); color: #fff; font-style: normal; box-shadow: var(--ds-sh-dark); }
#app .ar-lock svg { width: 58%; height: auto; }
#app .ar-pin.is-lock.on .ar-ring { border-color: #fff; box-shadow: 0 0 0 calc(var(--u) * .5) var(--ds-grey-edge), var(--ds-sh-dark); }
#app .ar-pin.is-lock.on .ar-tag { background: linear-gradient(180deg, #fff, var(--ds-grey)); color: var(--ds-ink); box-shadow: 0 0 0 calc(var(--u) * .35) #fff, var(--ds-sh-dark); }
#app .ar-go.is-lock { background: var(--ds-grey); color: var(--ds-grey-ink); box-shadow: var(--ds-sh-soft); }
#app .ar-panel .wl-host img.ar-host { object-fit: contain; object-position: 50% 100%; }

/* Buat profil — langkah umur (untuk orang tua, 14 Okt): 4 tombol umur → tingkat awal + batas waktu bawaan */
#app .who-panel.age-step .note { margin: calc(var(--u) * .4) 0 calc(var(--u) * 1.4); max-width: calc(var(--u) * 60); text-align: center; color: var(--ds-ink-2); }
#app .grid.ages { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.4); width: min(calc(var(--u) * 64), 100%); }
#app .grid.ages .age-btn { height: auto; padding: calc(var(--u) * 1.4) calc(var(--u) * .8); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); }
#app .grid.ages .age-n { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; display: grid; place-items: center; background: var(--ds-p-sky);
  color: var(--ds-deep); font: 800 calc(var(--u) * 4.2) / 1 var(--mp-font); }
#app .grid.ages .lbl { font-size: calc(var(--u) * 2); text-align: center; display: flex; flex-direction: column; gap: calc(var(--u) * .3); }
#app .grid.ages .lbl small { font-size: calc(var(--u) * 1.25); font-weight: 600; color: var(--ds-ink-2); line-height: 1.3; }

/* ---------- Pilih sahabat (Kru Bintang) — panggung besar (14 Okt) ----------
   .buddy-step.bd-lv-N = warna tingkat sahabat itu (biru Airu · hijau Daunu · kuning Setrum · merah Apiyo); [data-k] = efek kecil
   khas tugasnya (gelembung laut, daun, kilau mercusuar, hangat matahari). Animasi hanya hiasan; konten tidak pernah disembunyikan. */
#app.on-world .who-panel.buddy-step { width: min(calc(var(--u) * 94), 96vw); padding: calc(var(--u) * 2.4) calc(var(--u) * 3) calc(var(--u) * 2.6);
  --bc: var(--lv-1); --bc2: var(--lv-1-2); background: radial-gradient(ellipse 60% 70% at 30% 58%, color-mix(in srgb, var(--bc2) 30%, #fff), #fff 70%); }
#app .buddy-step.bd-lv-2 { --bc: var(--lv-2); --bc2: var(--lv-2-2); }
#app .buddy-step.bd-lv-3 { --bc: var(--lv-3); --bc2: var(--lv-3-2); }
#app .buddy-step.bd-lv-4 { --bc: var(--lv-4); --bc2: var(--lv-4-2); }
#app .buddy-step .who-head .h { font-size: calc(var(--u) * 3.6); }
#app .bd-stage { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * .6); }
#app .bd-show { position: relative; height: calc(var(--u) * 27); display: flex; align-items: flex-end; justify-content: center; }
#app .bd-glow { position: absolute; left: 50%; top: 48%; width: calc(var(--u) * 26); height: calc(var(--u) * 26); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bc2) 70%, #fff), transparent); animation: bd-breathe 3s ease-in-out infinite; }
#app .bd-pad { position: absolute; bottom: calc(var(--u) * .4); left: 50%; translate: -50% 0; width: calc(var(--u) * 22); height: calc(var(--u) * 5); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bc) 55%, #fff), color-mix(in srgb, var(--bc) 25%, #fff) 70%, transparent);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.6) color-mix(in srgb, var(--bc) 35%, transparent); }
#app .bd-big { position: relative; height: calc(var(--u) * 24); width: auto; margin-bottom: calc(var(--u) * 1.6); transform-origin: 50% 100%;
  filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1) rgba(29, 58, 95, .22)); animation: bd-idle 2.4s ease-in-out infinite; }
#app .bd-big.hop { animation: bd-hop .5s var(--ds-ease), bd-idle 2.4s .5s ease-in-out infinite; }
@keyframes bd-idle { 50% { transform: translateY(calc(var(--u) * -.8)) scale(1.02, .98); } }
@keyframes bd-hop { 0% { transform: scale(.92, 1.06); } 40% { transform: translateY(calc(var(--u) * -3)) scale(.96, 1.05); } 75% { transform: scale(1.06, .94); } }
@keyframes bd-breathe { 50% { scale: 1.06; } }
/* hiasan kecil di sekitar sahabat */
#app .bd-fx { position: absolute; inset: 0; pointer-events: none; }
#app .bd-fx i { position: absolute; left: calc(14% + var(--i) * 9%); bottom: 18%; width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border-radius: 50%;
  opacity: .0; animation: bd-rise 3.6s calc(var(--i) * .4s) ease-in infinite; }
#app .buddy-step[data-k="airu"] .bd-fx i { border: calc(var(--u) * .25) solid rgba(255, 255, 255, .95); background: color-mix(in srgb, var(--lv-1-2) 35%, transparent); }
#app .buddy-step[data-k="daunu"] .bd-fx i { border-radius: 0 70% 0 70%; background: var(--lv-2-2); animation-name: bd-fall; bottom: auto; top: 6%; }
#app .buddy-step[data-k="setrum"] .bd-fx i { border-radius: 0; background: #fff6b0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation-name: bd-twinkle;
  bottom: auto; top: calc(10% + var(--i) * 7%); }
#app .buddy-step[data-k="apiyo"] .bd-fx i { background: radial-gradient(circle, #ffe08a, #ff9a3c 70%, transparent); width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); }
@keyframes bd-rise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(var(--u) * -20)); } }
@keyframes bd-fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(var(--u) * 20)) rotate(220deg); } }
@keyframes bd-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.1); } }
/* kartu kenalan */
#app .bd-card { background: #fff; border-radius: var(--ds-r-card); padding: calc(var(--u) * 2) calc(var(--u) * 2.4); box-shadow: var(--ds-sh-soft);
  display: flex; flex-direction: column; gap: calc(var(--u) * .7); border-top: calc(var(--u) * .6) solid var(--bc); }
#app .bd-tag { align-self: flex-start; padding: calc(var(--u) * .3) calc(var(--u) * 1.1); border-radius: 999px; background: var(--ds-deep); color: #fff;
  font: 700 calc(var(--u) * 1.3) / 1.2 var(--mp-font); letter-spacing: .04em; text-transform: uppercase; }
#app .bd-name { font: 800 calc(var(--u) * 5) / 1 var(--mp-font); color: var(--ds-ink); }
#app .bd-line { margin: 0; display: flex; gap: calc(var(--u) * 1); align-items: baseline; font: 600 calc(var(--u) * 1.8) / 1.3 var(--mp-font); color: var(--ds-ink-2); }
#app .bd-line span { min-width: calc(var(--u) * 9); }
#app .bd-line b { color: var(--ds-ink); }
#app .bd-say { margin: calc(var(--u) * .4) 0 0; padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.6);
  background: color-mix(in srgb, var(--bc2) 22%, #fff); font: 700 calc(var(--u) * 2) / 1.3 var(--mp-font); color: var(--ds-ink); }
/* deret potret + tombol main */
#app .bd-row { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1.6); }
#app .bd-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); cursor: pointer; transition: transform .18s var(--ds-ease); }
#app .bd-face { width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); border-radius: 50%; background: var(--ds-surf); display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 calc(var(--u) * .4) #fff, var(--ds-sh-soft); }
#app .bd-face .avatar { width: 88%; height: 88%; display: grid; place-items: center; }
#app .bd-face .avatar img, #app .bd-face .avatar .emo img { width: 100%; height: 100%; object-fit: contain; }
#app .bd-pick b { font: 700 calc(var(--u) * 1.7) / 1 var(--mp-font); color: var(--ds-ink-2); }
#app .bd-pick.lv-1 { --pc: var(--lv-1); } #app .bd-pick.lv-2 { --pc: var(--lv-2); } #app .bd-pick.lv-3 { --pc: var(--lv-3); } #app .bd-pick.lv-4 { --pc: var(--lv-4); }
#app .bd-pick.sel .bd-face { background: color-mix(in srgb, var(--pc) 28%, #fff); box-shadow: 0 0 0 calc(var(--u) * .55) var(--pc), var(--ds-sh-soft); }
#app .bd-pick.sel b { color: var(--ds-ink); }
#app .bd-pick.f.on { transform: translateY(calc(var(--u) * -.8)) scale(1.08); box-shadow: none; border: 0; }
#app .bd-pick.f.on::before { content: ''; position: absolute; top: calc(var(--u) * -2.8); left: 50%; translate: -50% 0; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2);
  background: var(--ds-cursor); clip-path: polygon(0 0, 100% 0, 50% 100%); }
#app .buddy-step .bd-go { margin-left: calc(var(--u) * 2); }

/* Bolo (maskot, versi base sementara) mengintip dari balik judul splash — LORE §4a/§7 */
#app .s-title { position: relative; }
#app .s-bolo { position: absolute; right: -1.08em; bottom: .3em; height: 1.25em; width: auto; z-index: -1; transform-origin: 30% 100%; rotate: 14deg;
  filter: drop-shadow(0 .05em .08em rgba(10, 30, 60, .3)); animation: s-bolo-peek 2.6s ease-in-out infinite; }
@keyframes s-bolo-peek { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-.1em) rotate(-6deg); } 55% { transform: translateY(-.06em) rotate(5deg); } }

/* ---------- Kartu Roundkins (js/cards.js) — rasio 63:88, bingkai warna set (bukan kuning polos), nama besar = flash card ---------- */
.rk-card { --w: calc(var(--u) * 15); position: relative; width: var(--w); aspect-ratio: 63 / 88; transform-style: preserve-3d; border-radius: calc(var(--w) * .07);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.1); font-family: var(--mp-font); }
.rk-card.sm { --w: calc(var(--u) * 9.6); }
.rk-card.big { --w: min(calc(var(--u) * 30), 46vh); }
.rk-face { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  background: linear-gradient(160deg, var(--c2), var(--c1)); padding: calc(var(--w) * .055); display: flex; flex-direction: column;
  box-shadow: 0 calc(var(--w) * .03) calc(var(--w) * .08) rgba(16, 32, 60, .28), inset 0 0 0 calc(var(--w) * .012) rgba(255, 255, 255, .55); }
.rk-front .rk-name { display: block; margin: calc(var(--w) * .01) 0 calc(var(--w) * .035); padding: calc(var(--w) * .025) calc(var(--w) * .05); border-radius: calc(var(--w) * .04);
  background: #fff; color: var(--ds-ink); text-align: center; font-weight: 800; font-size: calc(var(--w) * .105); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-art { flex: 1; min-height: 0; border-radius: calc(var(--w) * .05); display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fff, color-mix(in srgb, var(--c2) 35%, #fff) 70%); box-shadow: inset 0 0 0 calc(var(--w) * .01) rgba(255, 255, 255, .8); }
.rk-art img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 calc(var(--w) * .02) calc(var(--w) * .025) rgba(29, 58, 95, .28)); }
.rk-info { margin-top: calc(var(--w) * .03); color: #fff; text-align: center; font-weight: 700; font-size: calc(var(--w) * .06); line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.rk-foot { display: flex; justify-content: space-between; margin-top: calc(var(--w) * .025); color: rgba(255, 255, 255, .92); font-weight: 700; font-size: calc(var(--w) * .045); }
.rk-card.sm .rk-info, .rk-card.sm .rk-foot { display: none; }
.rk-back { transform: rotateY(180deg); align-items: center; justify-content: center; gap: calc(var(--w) * .04); color: #fff;
  background: radial-gradient(circle at 50% 40%, var(--c2), var(--c1) 75%); }
.rk-back::before { content: ''; position: absolute; inset: calc(var(--w) * .05); border-radius: calc(var(--w) * .05); border: calc(var(--w) * .012) dashed rgba(255, 255, 255, .55); }
.rk-star { width: calc(var(--w) * .28); color: #ffe27a; } .rk-star .ds-i, .rk-star svg { width: 100%; height: auto; }
.rk-logo { font-style: italic; font-weight: 900; font-size: calc(var(--w) * .14); text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.rk-back small { font-weight: 700; font-size: calc(var(--w) * .06); opacity: .9; }
.rk-none { display: grid; place-items: center; background: color-mix(in srgb, var(--c1) 18%, #eef2f7); border: calc(var(--w) * .02) dashed color-mix(in srgb, var(--c1) 45%, #fff);
  color: color-mix(in srgb, var(--c1) 55%, #fff); font: 800 calc(var(--w) * .3) / 1 var(--mp-font); }

/* perayaan: sahabat merayakan | judul + lampu + tombol | kartu baru */
#app .cele { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3); }
#app .cele-mid { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); }
#app .cele-buddy { position: relative; justify-self: end; width: calc(var(--u) * 24); aspect-ratio: 1; display: grid; place-items: center; }
#app .cele-buddy img.kit { position: relative; width: 92%; height: 92%; object-fit: contain; transform-origin: 50% 100%; animation: cele-jump 1s cubic-bezier(.3, 1.4, .5, 1) infinite;
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.2) rgba(29, 58, 95, .3)); }
#app .cele-buddy.almost img.kit { animation: cele-nod 1.8s ease-in-out infinite; }
#app .cele-glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 226, 122, .35) 60%, transparent); }
@keyframes cele-jump { 0%, 100% { transform: translateY(0) scale(1.04, .96); } 45% { transform: translateY(calc(var(--u) * -3.2)) scale(.97, 1.04); } }
@keyframes cele-nod { 50% { transform: rotate(-4deg) translateY(calc(var(--u) * -.6)); } }
#app .cele-reward { justify-self: start; display: flex; gap: calc(var(--u) * 1.6); }
#app .cele-card { position: relative; animation: cele-pop .6s var(--d, 0s) cubic-bezier(.3, 1.5, .5, 1) backwards; }
#app .cele-card .rk-card { animation: cele-sway 3s ease-in-out infinite; }
#app .cele-rib { position: absolute; z-index: 2; top: calc(var(--u) * -1.4); left: 50%; translate: -50% 0; padding: calc(var(--u) * .4) calc(var(--u) * 1.2); border-radius: 999px;
  background: var(--ds-cta); color: #fff; font: 800 calc(var(--u) * 1.5) / 1 var(--mp-font); white-space: nowrap; box-shadow: var(--ds-sh-cta); }
@keyframes cele-pop { from { transform: scale(.6) rotate(-8deg); } }
@keyframes cele-sway { 50% { transform: rotateY(14deg) rotateX(4deg); } }
#app.scr-celebrate .row-tiles { margin-top: calc(var(--u) * .6); }

/* istirahat: sahabat tidur siang (redup, napas pelan, Zzz) */
#app .rest-buddy { position: relative; width: calc(var(--u) * 20); aspect-ratio: 1; display: grid; place-items: center; }
#app .rest-buddy img.kit { width: 100%; height: 100%; object-fit: contain; filter: saturate(.7) brightness(.92); transform-origin: 50% 100%; animation: rest-breathe 3.2s ease-in-out infinite; }
#app .rest-buddy.night img.kit { filter: saturate(.55) brightness(.8); }
#app .zzz { position: absolute; right: 2%; top: 4%; display: flex; gap: calc(var(--u) * .4); color: #fff; font: italic 900 calc(var(--u) * 3) / 1 var(--mp-font); text-shadow: var(--ds-ts); }
#app .zzz i { font-style: italic; animation: zzz 2.4s ease-in-out infinite; } #app .zzz i:nth-child(2) { font-size: .8em; animation-delay: .4s; } #app .zzz i:nth-child(3) { font-size: .62em; animation-delay: .8s; }
@keyframes rest-breathe { 50% { transform: scale(1.03, .97); } }
@keyframes zzz { 50% { transform: translateY(calc(var(--u) * -1)); opacity: .55; } }

/* koleksi kartu (layar "album") */
#app .kc { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 2) calc(var(--u) * 3) 0; }
#app .kc-head { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
#app .kc-head .h { margin: 0; }
#app .kc-bolo { width: calc(var(--u) * 9); height: auto; filter: drop-shadow(0 calc(var(--u) * .4) calc(var(--u) * .6) rgba(29, 58, 95, .25)); animation: rest-breathe 2.6s ease-in-out infinite; }
#app .kc-body { flex: 1; overflow-y: auto; padding: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 6); scrollbar-width: none; }
#app .kc-set h3 { margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 1); color: #fff; font: 800 calc(var(--u) * 2.4) / 1 var(--mp-font); text-shadow: var(--ds-ts); }
#app .kc-set h3 small { margin-left: calc(var(--u) * .6); padding: calc(var(--u) * .2) calc(var(--u) * .8); border-radius: 999px; background: var(--c1); font-style: normal; font-size: .6em; text-shadow: none; }
#app .kc-grid { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.4); }
#app .kc-cell { cursor: pointer; border-radius: calc(var(--u) * 1); transition: transform .16s var(--ds-ease); }
#app .kc-cell { position: relative; }
#app .kc-cell.f.on { transform: translateY(calc(var(--u) * -.6)) scale(1.08); box-shadow: 0 0 0 calc(var(--u) * .45) #fff, 0 0 0 calc(var(--u) * .8) var(--ds-on); border: 0; }
#app .kc-cell.locked { cursor: default; }

/* lihat kartu 3D */
#app .kv-back { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2);
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 40, 75, .55), rgba(10, 20, 40, .82)); }
#app .kv-stage { perspective: calc(var(--u) * 120); }
/* panah kartu sebelum/sesudah (17 Okt): tombol bulat v3 di kiri & kanan kartu; panah kanan = ikon 'back' dicerminkan */
#app .kv-row { display: flex; align-items: center; gap: calc(var(--u) * 4); }
#app .kv-go { flex: none; }
#app .kv-next .ds-i { transform: scaleX(-1); }
#app .kv-stage .rk-card { cursor: grab; touch-action: none; }
#app .kv-stage .rk-card.kv-drag { transition: none; cursor: grabbing; }
#app .kv-bar { display: flex; align-items: center; gap: calc(var(--u) * 2.4); color: #fff; font: 700 calc(var(--u) * 1.8) / 1 var(--mp-font); text-shadow: var(--ds-ts); }
#app .kv-bar span { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); }
#app .kv-bar .ds-i { width: 1.2em; height: 1.2em; }
#app .kv-pad { display: none !important; } body.pad-on #app .kv-pad { display: inline-flex !important; }
#app .cele-card { perspective: calc(var(--u) * 80); }
/* perayaan — penyesuaian: panel tengah terbaca di atas latar game, kartu lebih besar & di tengah kolom kanan */
#app .cele { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
#app .cele-mid { padding: calc(var(--u) * 2) calc(var(--u) * 2.6); border-radius: var(--ds-r-card); background: rgba(255, 255, 255, .86); box-shadow: var(--ds-sh-soft); }
#app .cele-mid .h.big { margin: 0; color: var(--ds-ink); text-shadow: none; }
#app .cele-buddy { justify-self: center; width: min(calc(var(--u) * 24), 100%); }
#app .cele-reward { justify-self: center; }
#app .cele-reward .rk-card { --w: calc(var(--u) * 17); }
#app .cele-reward:has(.cele-card + .cele-card) .rk-card { --w: calc(var(--u) * 12.5); }
.rk-star > * { width: 100% !important; height: auto !important; font-size: calc(var(--w) * .28); }

/* ---------- Intro dermaga (LORE §7) — lapisan di atas peta; langkah diatur [data-step]. Tanpa animasi pun tiap langkah tetap terbaca. ---------- */
#app .intro { position: absolute; inset: 0; overflow: hidden; cursor: pointer; }
#app .intro::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 calc(var(--u) * 14) rgba(10, 30, 60, .35); }
#app .in-cap { position: absolute; left: 50%; bottom: calc(var(--u) * 5); translate: -50% 0; margin: 0; max-width: calc(var(--u) * 70); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.6);
  border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ds-ink); font: 800 calc(var(--u) * 2.8) / 1.25 var(--mp-font); text-align: center; box-shadow: var(--ds-sh-soft); z-index: 3; }
#app .in-cap:empty { display: none; }
#app .in-cap.pop { animation: pop .35s var(--ds-ease); }
#app .in-skip { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 3); z-index: 4; display: inline-flex; align-items: center; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .8) calc(var(--u) * 2); border-radius: 999px; background: var(--ds-scrim); color: #fff; font: 700 calc(var(--u) * 1.8) / 1 var(--mp-font); }
#app .in-skip .ds-i { width: 1em; height: 1em; }
/* 1. dari perahu: ujung perahu + Ombo dari belakang */
#app .in-boat { position: absolute; left: 50%; bottom: calc(var(--u) * -3); translate: -50% 0; width: calc(var(--u) * 46); height: calc(var(--u) * 26); z-index: 2;
  transition: transform .6s ease-in, opacity .6s; animation: in-bob 2.2s ease-in-out infinite; }
/* ujung perahu dilihat dari dalam: dek kayu meruncing + pinggiran putih (bukan gambar, cukup CSS sampai ada aset) */
#app .in-bow { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 100%; height: 66%;
  clip-path: polygon(50% 0, 96% 100%, 4% 100%); background: linear-gradient(90deg, #f7f9fc 0 7%, #c98f55 7% 93%, #f7f9fc 93%);
  filter: drop-shadow(0 calc(var(--u) * -.4) calc(var(--u) * 1.4) rgba(10, 30, 60, .25)); }
#app .in-bow::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--u) * 3.6), rgba(90, 50, 20, .22) calc(var(--u) * 3.6) calc(var(--u) * 3.8)); }
#app .in-ombo { position: absolute; left: 50%; bottom: 46%; translate: -50% 0; height: 70%; width: auto; z-index: 1; filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * .8) rgba(10, 30, 60, .25)); }
@keyframes in-bob { 50% { transform: translateY(calc(var(--u) * -.8)) rotate(-.8deg); } }
#app .intro:not([data-step="boat"]) .in-boat { transform: translateY(120%); opacity: 0; }
/* 2–3. dermaga: Bolo + sahabat menyambut */
#app .in-cast { position: absolute; left: 50%; bottom: calc(var(--u) * 12); translate: -50% 0; display: flex; align-items: flex-end; gap: calc(var(--u) * 2); z-index: 2;
  opacity: 0; transform: translateY(calc(var(--u) * 6)); transition: opacity .4s, transform .5s var(--ds-ease); }
#app .intro[data-step="dock"] .in-cast, #app .intro[data-step="spin"] .in-cast { opacity: 1; transform: none; }
#app .in-cast img { height: calc(var(--u) * 20); width: auto; filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1) rgba(10, 30, 60, .3)); transform-origin: 50% 100%; }
#app .in-bolo { animation: cele-jump .8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
#app .in-buddy { height: calc(var(--u) * 17) !important; animation: in-wave 1.2s ease-in-out infinite; }
#app .intro[data-step="spin"] .in-bolo { animation: in-spin 1.4s ease-in-out infinite; }
@keyframes in-wave { 50% { transform: rotate(-8deg); } }
@keyframes in-spin { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(180deg) translateY(calc(var(--u) * -2.4)); } 100% { transform: rotateY(360deg); } }
/* 4. alun-alun: Air Mancur Bintang bercahaya */
#app .in-glow { position: absolute; left: 50%; top: 44%; width: calc(var(--u) * 34); height: calc(var(--u) * 34); translate: -50% -50%; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 244, 180, .85), rgba(255, 214, 90, .35) 55%, transparent); opacity: 0; transition: opacity .8s; }
#app .intro[data-step="plaza"] .in-glow, #app .intro[data-step="crew"] .in-glow { opacity: 1; animation: bd-breathe 2s ease-in-out infinite; }
/* 5. Kru Bintang melompat masuk satu per satu */
#app .in-crew { position: absolute; left: 50%; bottom: calc(var(--u) * 12); translate: -50% 0; display: flex; gap: calc(var(--u) * 1.6); z-index: 2; opacity: 0; transition: opacity .3s; }
#app .intro[data-step="crew"] .in-crew { opacity: 1; }
#app .in-crew img { height: calc(var(--u) * 14); width: auto; transform-origin: 50% 100%; filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * .8) rgba(10, 30, 60, .3)); }
#app .intro[data-step="crew"] .in-crew img { animation: in-boing .7s calc(var(--i) * .45s) cubic-bezier(.3, 1.5, .5, 1) backwards, cele-jump 1s calc(var(--i) * .45s + .7s) ease-in-out infinite; }
@keyframes in-boing { from { transform: translateY(calc(var(--u) * -18)) scale(.8, 1.2); } }
/* Bolo sprite (15 Okt): putar di intro = ganti sprite arah, jadi animasi rotateY dimatikan; Bolo menguap di layar istirahat */
#app .intro[data-step="spin"] .in-bolo { animation: cele-jump .9s cubic-bezier(.3, 1.4, .5, 1) infinite; }
#app .rest-bolo { position: absolute; left: -48%; bottom: 0; height: 62%; width: auto; filter: drop-shadow(0 calc(var(--u) * .5) calc(var(--u) * .7) rgba(29, 58, 95, .25)); }

/* Splash: logo Roundkins horizontal (pemilik 15 Okt, assets/brand/ — file final, tidak diubah) + bayangan biru laut tipis supaya terbaca;
   teks di bawahnya biasa dengan bayangan tipis (tanpa garis biru). Mockup: lab/logo-splash. */
#app .s-brand { display: flex; flex-direction: column; align-items: center; text-shadow: none; }
#app .s-logo { display: block; height: calc(var(--u) * 11); width: auto; filter: drop-shadow(0 calc(var(--u) * .2) calc(var(--u) * .5) rgba(10, 80, 130, .45)); }
#app .s-brand small { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.4); font-weight: 600; font-style: normal; letter-spacing: .01em; text-transform: none;
  text-shadow: 0 1px calc(var(--u) * .45) rgba(10, 40, 70, .45); }

/* ---------- v3: tombol kembali = pil sistem kiri bawah (popup pemain/nama/sahabat/umur, album) ---------- */
#app .w-sysback, #app .kc-back { position: absolute; left: var(--ds-safe); bottom: var(--ds-safe); z-index: 8; font-size: var(--ds-fs-label); }
#app.on-world .who-panel .ok-btn.dim { opacity: 1; background: var(--ds-grey); color: var(--ds-grey-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff; filter: none; }
/* perayaan: panah atas kartu pilihan butuh ruang di atas baris tombol */
#app.scr-celebrate .row-tiles { margin-top: var(--ds-sp-5); }

/* ---------- v3 latar "layar lapis": pulau buram + tirai tipis (sama seperti popup pemain), ganti langit gradien polos ----------
   CSS saja — layar ini sengaja TIDAK masuk WORLD_SCREENS (itu mengatur suara latar, efek & kamera peta). */
#app.scr-rest, #app.scr-album, #app.scr-parent, #app.scr-diag, #app.scr-celebrate { isolation: isolate; background: #7cc8e4; }
#app.scr-rest::before, #app.scr-album::before, #app.scr-parent::before, #app.scr-diag::before, #app.scr-celebrate::before {
  content: ''; position: fixed; inset: calc(var(--u) * -3); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 40, 70, .14), rgba(10, 40, 70, .46)), url(../assets/world/splash.jpg) 50% 50% / cover;
  filter: blur(calc(var(--u) * .7)) saturate(1.05); }
/* teks istirahat kini di atas pulau buram → pakai panel putih */
#app.scr-rest .center.col { width: fit-content; max-width: 92%; margin: auto; height: auto; padding: var(--ds-sp-6) var(--ds-sp-7); border-radius: var(--ds-r-xl);
  background: #fff; box-shadow: var(--ds-sh-soft); }
#app.scr-rest .h.big { color: var(--ds-ink); text-shadow: none; font-size: var(--ds-fs-display); }
#app.scr-rest .sub { color: var(--ds-ink-2); font-size: var(--ds-fs-body); }
#app.scr-rest .unlock span { color: var(--ds-ink-2); font-size: var(--ds-fs-small); }
#app.scr-album .kc-set h3 { text-shadow: var(--ds-ts); }
#app.scr-rest .center.col { flex: 0 0 auto; }
/* popup dengan pil Kembali: sisakan pita bawah supaya pil tidak menimpa panel */
#app.on-world .who-backdrop:has(.w-sysback) { padding-bottom: calc(var(--ds-band) + var(--ds-safe) * .5); }
#app.on-world .who-backdrop:has(.w-sysback) .bd-show { height: calc(var(--u) * 21); }
#app.on-world .who-backdrop:has(.w-sysback) .bd-big { height: calc(var(--u) * 18.5); }

/* ---------- v3 Menu Orang Tua / Ubah pemain / Tes Controller: ukuran ikut --u (dulu px tetap → kecil di TV), pil pilihan ganti dropdown ----------
   minimum teks orang tua = --ds-fs-small. Tombol kembali = pil sistem kiri bawah (tetap terlihat walau panel digulir). */
.scr-parent .panel, .scr-diag .panel { width: min(94vw, calc(var(--u) * 84)); margin: var(--ds-sp-6) auto calc(var(--ds-band) + var(--ds-safe)); padding: var(--ds-sp-6) var(--ds-sp-7);
  border-radius: var(--ds-r-xl); font-size: var(--ds-fs-small); line-height: 1.4; }
.scr-parent .panel h2, .scr-diag .panel h2 { margin: 0 0 var(--ds-sp-3); font-size: var(--ds-fs-h2); font-weight: 700; }
.scr-parent .panel h3, .scr-diag .panel h3 { margin: var(--ds-sp-6) 0 var(--ds-sp-2); font-size: var(--ds-fs-title); font-weight: 700; }
.scr-parent .field, .scr-diag .field { gap: var(--ds-sp-3); padding: var(--ds-sp-3) 0; border-bottom: 1px solid var(--ds-surf-2); }
.scr-parent .field label { flex: 1 1 calc(var(--u) * 22); font-size: var(--ds-fs-label); color: var(--ds-ink); }
.scr-parent .hint, .scr-parent .muted, .scr-diag .hint, .scr-diag .muted, .scr-parent .prow ul { font-size: var(--ds-fs-small); color: var(--ds-ink-2); }
.scr-parent .panel .btn, .scr-diag .panel .btn { min-height: calc(var(--ds-h-btn) * .75); padding: 0 var(--ds-sp-5); border-radius: var(--ds-r-pill); font-size: var(--ds-fs-label); }
.scr-parent .panel .btn.sm { min-height: calc(var(--ds-h-btn) * .65); font-size: var(--ds-fs-small); }
.scr-parent .panel .btn.primary { box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-cta); }
.scr-parent .panel .btn:focus-visible, .scr-diag .panel .btn:focus-visible { outline: 0; background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink);
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); }
.scr-parent .panel .btn:focus-visible .ds-i { color: var(--ds-on-ink); }
.scr-parent .panel .row-btn, .scr-diag .panel .row-btn { gap: var(--ds-sp-3); margin-top: var(--ds-sp-4); flex-wrap: wrap; }
.scr-parent .panel .inp { font-size: var(--ds-fs-label); min-height: calc(var(--ds-h-btn) * .75); border-radius: var(--ds-r-md); }
.scr-parent .prow { padding: var(--ds-sp-3) var(--ds-sp-4); border-radius: var(--ds-r-lg); margin-bottom: var(--ds-sp-3); }
.scr-parent .ph b { font-size: var(--ds-fs-label); }
.scr-parent .gchks { gap: var(--ds-sp-2) var(--ds-sp-5); }
.scr-parent .gchk { font-size: var(--ds-fs-label); color: var(--ds-ink); min-height: var(--ds-h-chip); }
.scr-parent .gchk input { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); accent-color: var(--ds-on); }
.scr-parent input[type=range] { accent-color: var(--ds-on); min-height: calc(var(--u) * 4); }
.scr-diag .panel pre { font-size: var(--ds-fs-small); border-radius: var(--ds-r-md); }
.panel select[hidden] { display: none !important; }
/* pil pilihan (segmented): satu baris, yang aktif = pil putih; fokus remote/keyboard = isi --ds-on */
.panel .seg { display: inline-flex; flex-wrap: wrap; gap: var(--ds-sp-1); padding: var(--ds-sp-1); border-radius: var(--ds-r-lg); background: var(--ds-surf-2); max-width: 100%; }
.panel .seg button { min-height: calc(var(--ds-h-btn) * .62); padding: 0 var(--ds-sp-4); border: 0; border-radius: var(--ds-r-pill); background: transparent; cursor: pointer;
  font: 700 var(--ds-fs-small) / 1 var(--ds-font); color: var(--ds-ink-2); transition: background var(--ds-dur-fast), color var(--ds-dur-fast); }
.panel .seg button.on { background: #fff; color: var(--ds-ink); box-shadow: var(--ds-sh-soft); }
.panel .seg button:focus-visible { outline: 0; background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); }
#app .p-sysback { position: fixed; left: var(--ds-safe); bottom: var(--ds-safe); z-index: 20; border: 0; font-size: var(--ds-fs-label); }
#app .p-sysback:focus-visible { outline: 0; background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); }
/* panel orang tua = wadah gulir sendiri, berhenti di atas pita bawah supaya pil Kembali tidak menimpa isi */
#app.scr-parent, #app.scr-diag { overflow: hidden; }
.scr-parent .panel, .scr-diag .panel { margin: var(--ds-safe) auto 0; max-height: calc(100% - var(--ds-safe) * 2 - var(--ds-band)); overflow-y: auto; overscroll-behavior: contain; }
#app.scr-rest .sub { text-align: center; }
#app.scr-rest .zzz { color: var(--ds-sel-2); text-shadow: none; }
#app .wt-ic svg { fill: currentColor; }
#app.scr-album .kc { padding-bottom: calc(var(--ds-band) + var(--ds-safe) * .5); }
/* pengecualian kursor: tombol bulat di pita atas terlalu dekat tepi layar untuk panah atas → isi + membesar saja */
#app .rb.ds-round.f.on::before { display: none; }

/* ---------- Kartu v2 (docs/CARDS.md v2, 16 Okt) — splash art penuh. Bingkai per tingkat SEMENTARA (desain final = sesi Asset).
   Gambar 3:4 di kartu 63:88 → sisi kiri/kanan sedikit terpotong (object-fit: cover). Nama di area aman atas, tingkat di area aman bawah. */
.rk-v2 .rk-front { padding: 0; background: var(--c1); box-shadow: 0 calc(var(--w) * .03) calc(var(--w) * .08) rgba(16, 32, 60, .28); }
.rk-v2 .rk-splash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.rk-v2 .rk-front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 calc(var(--w) * .028) var(--rim, #fff), inset 0 0 0 calc(var(--w) * .036) rgba(16, 32, 60, .12); }
.rk-v2 .rk-front .rk-name { position: absolute; z-index: 2; left: 8%; right: 8%; top: 4.5%; margin: 0; padding: calc(var(--w) * .022) calc(var(--w) * .04);
  border-radius: 999px; background: rgba(255, 255, 255, .93); color: var(--ds-ink); font-size: calc(var(--w) * .085 * var(--fit, 1)); font-weight: 700; font-style: normal;
  box-shadow: 0 calc(var(--w) * .01) calc(var(--w) * .03) rgba(16, 32, 60, .18); }
.rk-v2 .rk-foot { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 4.5%; margin: 0; align-items: center; color: #fff; font-size: calc(var(--w) * .045);
  text-shadow: 0 1px 3px rgba(10, 20, 40, .55); }
.rk-v2 .rk-tier { padding: calc(var(--w) * .012) calc(var(--w) * .035); border-radius: 999px; background: var(--c1); text-shadow: none;
  box-shadow: inset 0 0 0 calc(var(--w) * .006) rgba(255, 255, 255, .7); }
.rk-v2.sm .rk-foot { display: none; }
.rk-v2.sm .rk-front .rk-name { font-size: calc(var(--w) * .1 * var(--fit, 1)); padding: calc(var(--w) * .02) calc(var(--w) * .03); left: 6%; right: 6%; top: 4%; }
/* nama panjang: app.js fitCardNames() memperkecil lewat --fit sampai muat (tanpa "…"), 17 Okt */
.rk-v2 .rk-art { position: absolute; inset: 0; border-radius: inherit; }
/* tingkat: warna tepi (sementara) */
.rk-v2.t-langka { --rim: #e9eef5; }
.rk-v2.t-langka .rk-front::after { box-shadow: inset 0 0 0 calc(var(--w) * .03) #dfe6ef, inset 0 0 0 calc(var(--w) * .038) #9aa8ba, inset 0 0 calc(var(--w) * .08) rgba(255, 255, 255, .6); }
.rk-v2.t-epik .rk-front::after { box-shadow: inset 0 0 0 calc(var(--w) * .03) #fff, inset 0 0 0 calc(var(--w) * .042) #b48cf2; }
.rk-v2.t-epik .rk-front::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light; opacity: .45;
  background: linear-gradient(115deg, transparent 20%, #ff9ccf 35%, #ffe08a 45%, #8affc1 55%, #8ab8ff 65%, transparent 80%); background-size: 250% 250%;
  animation: rk-holo 5s ease-in-out infinite; }
.rk-v2.t-legenda .rk-front::after { box-shadow: inset 0 0 0 calc(var(--w) * .03) #ffe08a, inset 0 0 0 calc(var(--w) * .042) #c7961c, inset 0 0 calc(var(--w) * .1) rgba(255, 224, 138, .55); }
@keyframes rk-holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* kartu terkunci di album v2: misi tertulis di bawahnya (dibacakan host di versi jadi) */
#app .kc-cell.locked { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); }
#app .kc-mis { width: calc(var(--u) * 9.6); color: #fff; font: 500 calc(var(--u) * 1.2) / 1.25 var(--ds-font); text-align: center; text-shadow: var(--ds-ts); }
@media (prefers-reduced-motion: reduce) { .rk-v2.t-epik .rk-front::before { animation: none; } }
#app .kc-grid { align-items: flex-start; }
/* perayaan dengan 2 kartu (ronde sempurna): bertumpuk seperti kipas supaya tidak terpotong tepi layar */
#app .cele-reward:has(.cele-card + .cele-card) { gap: 0; }
#app .cele-reward:has(.cele-card + .cele-card) .rk-card { --w: calc(var(--u) * 14.5); }
#app .cele-reward .cele-card + .cele-card { margin-left: calc(var(--u) * -8); margin-top: calc(var(--u) * 4); rotate: 7deg; z-index: 1; }
#app .cele-reward:has(.cele-card + .cele-card) .cele-card:first-child { rotate: -5deg; }
/* kartu v2 yang dimiliki tapi splash art-nya belum ada: gambar cadangan (sprite/master) di atas latar warna grup */
.rk-v2 .rk-fb { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #fff, color-mix(in srgb, var(--c2) 55%, #fff) 60%, var(--c2)); }
.rk-v2 .rk-fb img { width: 74%; height: 62%; object-fit: contain; margin-top: 8%; filter: drop-shadow(0 calc(var(--w) * .02) calc(var(--w) * .03) rgba(29, 58, 95, .28)); }
.rk-v2 .rk-fbstar { width: 40%; color: color-mix(in srgb, var(--c1) 70%, #fff); } .rk-v2 .rk-fbstar svg { width: 100%; height: auto; }
/* lihat kartu: kartu yang baru didapat di luar ronde (Buku, arena) */
#app .kv-new { padding: calc(var(--u) * .8) calc(var(--u) * 2.4); border-radius: 999px; background: linear-gradient(180deg, #f6802f, var(--ds-cta)); color: #fff;
  font: 700 var(--ds-fs-title) / 1 var(--ds-font); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-cta); }
/* perayaan: lebih dari 2 kartu baru → "+N kartu" */
#app .cele-more { position: absolute; z-index: 3; right: calc(var(--u) * -1.2); bottom: calc(var(--u) * -1.2); padding: calc(var(--u) * .5) calc(var(--u) * 1.2); border-radius: 999px;
  background: var(--ds-deep); color: #fff; font: 700 var(--ds-fs-small) / 1 var(--ds-font); box-shadow: inset 0 0 0 calc(var(--u) * .25) #fff; }
#app .rk-v2 .rk-fbstar, .rk-v2 .rk-fbstar { width: auto; font-size: calc(var(--w) * .34); line-height: 0; }

/* ---------- Kartu v2 BELUM dimiliki (16 Okt, riset Pokédex/TCG Pocket/Hearthstone): hitam-putih + buram, makin jelas seiring progres
   (--rv = rasio progres 0..1) + gembok. Legendaris = rahasia (gelap + "?"). Bisa dibuka: misi + progres dibacakan. ---------- */
.rk-v2.rk-lock .rk-splash, .rk-v2.rk-lock .rk-fb img, .rk-v2.rk-lock .rk-fbstar {
  filter: grayscale(calc(1 - var(--rv, 0) * .85)) blur(calc((1 - var(--rv, 0)) * (1 - var(--rv, 0)) * var(--w) * .06 + var(--w) * .006)) brightness(calc(.8 + var(--rv, 0) * .15)); }
.rk-v2.rk-lock .rk-front { background: #b9c3cf; }
.rk-v2.rk-lock.t-epik .rk-front::before { display: none; }                 /* tanpa holo sebelum dimiliki */
.rk-v2 .rk-lockic { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--w) * .26); height: calc(var(--w) * .26);
  border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); color: var(--ds-ink-2);
  box-shadow: 0 calc(var(--w) * .01) calc(var(--w) * .04) rgba(16, 32, 60, .3); }
#app .rk-v2 .rk-lockic .ds-i, .rk-v2 .rk-lockic .ds-i { width: 52%; height: 52%; }
.rk-v2 .rk-secret { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #3a3f78, #141a3d 75%); }
.rk-v2 .rk-secret b { font: 800 calc(var(--w) * .5) / 1 var(--ds-font); color: rgba(255, 224, 138, .85); text-shadow: 0 0 calc(var(--w) * .08) rgba(255, 224, 138, .6); }
.rk-v2.rk-lock .rk-secret ~ .rk-lockic { display: none; }
#app .kc-bar { display: block; width: calc(var(--u) * 9.6); height: calc(var(--u) * .9); border-radius: 999px; background: rgba(255, 255, 255, .45); overflow: hidden;
  box-shadow: inset 0 0 0 calc(var(--u) * .12) rgba(255, 255, 255, .7); }
#app .kc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ds-cta), #ffb347); }
#app .kc-num { color: #fff; font: 700 calc(var(--u) * 1.3) / 1 var(--ds-font); text-shadow: var(--ds-ts); }
#app .kc-cell.locked { cursor: pointer; }
#app .kv-mis { display: flex; align-items: center; gap: var(--ds-sp-3); padding: var(--ds-sp-2) var(--ds-sp-5); border-radius: 999px; background: #fff; color: var(--ds-ink);
  font: 700 var(--ds-fs-label) / 1 var(--ds-font); box-shadow: var(--ds-sh-soft); }
#app .kv-mis .ds-i { width: 1.1em; height: 1.1em; color: var(--ds-ink-2); vertical-align: -.15em; }
#app .kv-mis .kc-bar { width: calc(var(--u) * 14); background: var(--ds-surf-2); }

/* ---------- Album v2 rapat (16 Okt, masukan pemilik): kartu lebih besar & berdempetan, progres DI DALAM kartu, misi hanya di detail ---------- */
#app .kc .rk-card.sm { --w: calc(var(--u) * 10.8); }
#app .kc-grid { gap: calc(var(--u) * .8); }
#app .kc-set h3 { margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 1.4); }
.rk-v2 .rk-prog { position: absolute; z-index: 3; left: 7%; right: 7%; bottom: 5%; display: flex; align-items: center; gap: calc(var(--w) * .04);
  padding: calc(var(--w) * .02) calc(var(--w) * .035); border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 calc(var(--w) * .01) calc(var(--w) * .03) rgba(16, 32, 60, .2); }
.rk-v2 .rk-prog span { flex: 1; height: calc(var(--w) * .05); border-radius: 999px; background: var(--ds-surf-2); overflow: hidden; }
.rk-v2 .rk-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ds-cta), #ffb347); }
.rk-v2 .rk-prog b { font: 700 calc(var(--w) * .1) / 1 var(--ds-font); color: var(--ds-ink); }
.rk-v2.big .rk-prog { bottom: 13%; }
/* pilih urutan: per game / per tingkat (pil, satu baris di kanan kepala album) */
#app .kc-sort { margin-left: auto; display: flex; gap: var(--ds-sp-1); padding: var(--ds-sp-1); border-radius: 999px; background: rgba(255, 255, 255, .55);
  box-shadow: var(--ds-sh-soft); }
#app .kc-sort > div { position: relative; padding: var(--ds-sp-2) var(--ds-sp-5); border-radius: 999px; font: 700 var(--ds-fs-label) / 1 var(--ds-font); color: var(--ds-ink-2); cursor: pointer; }
#app .kc-sort > div.is-on { background: #fff; color: var(--ds-ink); box-shadow: var(--ds-sh-soft); }
#app .kc-sort > div.f.on { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); transform: scale(1.04); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-on); }
#app .kc-sort > div.f.on::before { content: ''; position: absolute; left: 50%; top: calc(var(--u) * -2.4); translate: -50% 0; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.4);
  background: var(--ds-cursor); clip-path: polygon(0 0, 100% 0, 50% 100%); }
#app .kc-sort > div { display: inline-flex; align-items: center; gap: var(--ds-sp-2); }
#app .kc-sort > div .ds-i { font-size: 1.15em; }