/* =====================================================================================================================
   Roundkins — DESIGN SYSTEM v3 (DISETUJUI pemilik 15 Okt 2026, gaya terpilih "B": biru sedang + teks putih). Spesifikasi: /design-system.html.
   v3 = v2 + skala tetap (spasi/huruf/radius/ukuran/gerak, token --ds-sp-*, --ds-fs-*, …) + SATU aturan kursor:
   terpilih = isi --ds-on (biru sedang) + teks putih + membesar 3–4% + panah oranye (daftar → kiri, grid/pin/bulat → atas).
   Huruf selalu TEGAK (miring hanya di logo). --ds-sel/--ds-sel-2 tetap biru muda pastel untuk HIASAN diam (cincin badge, ekor, bingkai foto).
   ---- catatan v2 (13 Okt 2026): Pastel seperti aset clay, aksen biru muda, ikon Phosphor (MIT).
   Riset awal: menu konsol olahraga keluarga (docs/STYLEGUIDE.md §1b) — sengaja dibuat berbeda: tanpa garis miring, tanpa pita
   gelap, tanpa simbol 4 titik, warna pastel. Tidak memakai aset/font/simbol Nintendo.
   Contoh hidup: /design-system.html. Semua kelas berawalan .ds- supaya tidak bertabrakan dengan gaya lama (lobby/game).
   Ukuran memakai --u (lebar layar/100, maks 1,6% tinggi) seperti engine; di luar engine --u jatuh ke 10px.

   Tiga ciri utama:
   1. PERMUKAAN PASTEL — pil/lingkaran biru langit pucat, tepi putih (rim); terpilih = biru muda + teks tinta gelap.
   2. BAYANGAN DATAR  — bukan blur: "bibir" warna gelap padat di bawah (box-shadow 0 Y 0), teks putih ber-bayangan keras.
   3. IKON FILL       — Phosphor Fill (tombol) & Duotone (ikon besar) lewat js/icons.js; tinta biru tua di atas terang, putih di atas peta.
   ===================================================================================================================== */
:root {
  /* palet "Langit Pastel" (13 Okt): pastel seperti aset clay, aksen biru muda. Hijau/kuning/merah/biru tegas = warna TINGKAT, jadi
     aksen dibuat pastel & lebih terang dari --lv-4 supaya tidak tertukar. */
  --ds-surf: #f3f9ff;          --ds-surf-2: #e2f0fd;       --ds-surf-edge: #b7d4ef;   /* pil biasa + bibirnya */
  --ds-sel: #92cff8;           --ds-sel-2: #6fbaf1;        --ds-sel-edge: #3f84c2;    /* terpilih: biru muda, teks tinta gelap */
  --ds-sel-ink: #12345a;       /* teks di atas --ds-sel (5,6:1) — dipakai hiasan/terpilih lama */
  /* v3 "B": isi kursor/terpilih. Putih di atas #2678c0 = 4,6:1 · #1d6ab4 = 5,6:1 (diukur) (spesimen B #4aa6ec→#2f8bd6 hanya 2,6–3,6:1, jadi digelapkan) */
  --ds-on: #2678c0;            --ds-on-2: #1d6ab4;         --ds-on-ink: #fff;
  --ds-deep: #2f6eae;          /* label/chip bertulisan putih (5:1) */
  --ds-grey: #e7ebf0;          --ds-grey-ink: #98a3b1;     --ds-grey-edge: #c9d1db;   /* mati / belum tersedia */
  --ds-slab: #355a82;          --ds-slab-2: #284769;                                  /* biru tua: bibir tab, pil sistem */
  --ds-paper: #fff;            --ds-paper-edge: #d6e1ec;                              /* kartu / panel */
  --ds-cta: #f26a1b;           --ds-cta-edge: #b4470c;                                /* aksi utama (oranye, teks putih tebal besar) */
  --ds-scrim: rgba(28, 44, 70, .58);                                                  /* pil gelap tembus */
  --ds-ink: #1d3a5f;           /* teks & ikon di atas permukaan terang (11:1) */
  --ds-ink-2: #5a7493;         /* teks kedua */
  --ds-cursor: #ff8a1f;        /* panah & cincin fokus — bukan latar teks */
  --ds-glyph-ink: #1d3a5f;     /* huruf di dalam simbol tombol */
  /* pastel pendamping (lingkaran ikon, kartu kategori, hiasan) — bukan untuk teks putih */
  --ds-p-sky: #d8ecfd;  --ds-p-lilac: #e6dcff;  --ds-p-peach: #ffe1cf;  --ds-p-mint: #d3f2e3;  --ds-p-butter: #fff1bd;  --ds-p-pink: #ffdcea;
  --ds-line-pink: #ff9cc6;     --ds-line-sky: #7cc4f5;    /* garis tipis bertitik (hiasan judul) */
  --ds-font: var(--mp-font, 'Google Sans', 'Poppins', system-ui, sans-serif);
}
/* Token berukuran dihitung ulang di tiap elemen .ds-* supaya ikut --u setempat (custom property yang memakai var() dihitung di
   elemen tempat ia didefinisikan; kalau hanya di :root, semua ukuran terkunci ke --u layar penuh). */
:root, [class^="ds-"], [class*=" ds-"] {
  --ds-u: var(--u, 10px);
  --ds-lip: calc(var(--ds-u) * .55);             /* tebal bibir bayangan datar */
  --ds-rim: calc(var(--ds-u) * .32);             /* tepi putih */
  --ds-r-pill: 999px;
  --ds-r-card: calc(var(--ds-u) * 2.4);
  /* bayangan LEMBUT (keputusan pemilik 13 Okt: hindari bayangan kasar). Bayangan hanya di lapisan paling bawah sebuah komponen;
     teks/ikon/simbol yang sudah punya latar sendiri tidak diberi bayangan lagi. */
  --ds-sh-soft: 0 calc(var(--ds-u) * .45) calc(var(--ds-u) * 1.2) rgba(29, 58, 95, .16), 0 calc(var(--ds-u) * .1) calc(var(--ds-u) * .3) rgba(29, 58, 95, .10);
  --ds-sh-surf: var(--ds-sh-soft);
  --ds-sh-grey: var(--ds-sh-soft);
  --ds-sh-paper: var(--ds-sh-soft);
  --ds-sh-sel: 0 calc(var(--ds-u) * .5) calc(var(--ds-u) * 1.4) rgba(63, 132, 194, .38), 0 calc(var(--ds-u) * .1) calc(var(--ds-u) * .3) rgba(29, 58, 95, .12);
  --ds-sh-cta: 0 calc(var(--ds-u) * .5) calc(var(--ds-u) * 1.4) rgba(180, 71, 12, .34), 0 calc(var(--ds-u) * .1) calc(var(--ds-u) * .3) rgba(120, 40, 0, .14);
  --ds-sh-dark: 0 calc(var(--ds-u) * .4) calc(var(--ds-u) * 1.2) rgba(10, 20, 35, .22);
  --ds-sh-on: 0 calc(var(--ds-u) * .5) calc(var(--ds-u) * 1.4) rgba(29, 106, 180, .42), 0 calc(var(--ds-u) * .1) calc(var(--ds-u) * .3) rgba(20, 50, 90, .16);
  --ds-sh-press: 0 calc(var(--ds-u) * .1) calc(var(--ds-u) * .35) rgba(29, 58, 95, .18);
  /* teks/ikon lepas di atas peta (tanpa latar): bayangan lembut, bukan offset keras */
  --ds-ts: 0 calc(var(--ds-u) * .1) calc(var(--ds-u) * .25) rgba(10, 20, 35, .45), 0 calc(var(--ds-u) * .2) calc(var(--ds-u) * 1) rgba(10, 20, 35, .28);
  --ds-glyph-sh: drop-shadow(0 calc(var(--ds-u) * .15) calc(var(--ds-u) * .5) rgba(10, 20, 35, .35));
  --ds-ease: cubic-bezier(.3, 1.6, .5, 1);

  /* ===== v3 (disetujui 15 Okt — design-system.html) — skala tetap, semua dalam u ===== */
  /* spasi: kelipatan 0,4u. Pakai HANYA nilai ini untuk gap/padding/margin. */
  --ds-sp-1: calc(var(--ds-u) * .4);  --ds-sp-2: calc(var(--ds-u) * .8);  --ds-sp-3: calc(var(--ds-u) * 1.2); --ds-sp-4: calc(var(--ds-u) * 1.6);
  --ds-sp-5: calc(var(--ds-u) * 2.4); --ds-sp-6: calc(var(--ds-u) * 3.2); --ds-sp-7: calc(var(--ds-u) * 4.8); --ds-sp-8: calc(var(--ds-u) * 6.4);
  /* tipografi: Google Sans TEGAK (tanpa miring). 7 ukuran saja. */
  --ds-fs-display: calc(var(--ds-u) * 5.6); --ds-fs-h1: calc(var(--ds-u) * 4); --ds-fs-h2: calc(var(--ds-u) * 3); --ds-fs-title: calc(var(--ds-u) * 2.4);
  --ds-fs-body: calc(var(--ds-u) * 2);      --ds-fs-label: calc(var(--ds-u) * 1.8); --ds-fs-small: calc(var(--ds-u) * 1.6);
  /* radius: 4 ukuran + pil */
  --ds-r-sm: calc(var(--ds-u) * 1); --ds-r-md: calc(var(--ds-u) * 1.6); --ds-r-lg: calc(var(--ds-u) * 2.4); --ds-r-xl: calc(var(--ds-u) * 3.2);
  /* bingkai layar: margin aman & tinggi pita atas/bawah */
  --ds-safe: calc(var(--ds-u) * 3.2); --ds-band: calc(var(--ds-u) * 7.2);
  /* ukuran komponen tetap */
  --ds-h-btn: calc(var(--ds-u) * 6.4); --ds-h-row: calc(var(--ds-u) * 6.4); --ds-h-round: calc(var(--ds-u) * 6.4); --ds-h-chip: calc(var(--ds-u) * 3.2);
  /* gerak */
  --ds-dur-fast: 120ms; --ds-dur-base: 200ms; --ds-dur-slow: 360ms; --ds-ease-out: cubic-bezier(.2, .8, .3, 1);
}

/* ---------- ikon & simbol tombol ---------- */
.ds-i, .ds-g { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.14em; }
.ds-g { overflow: visible; }

/* ---------- 1. Tombol pil (.ds-btn) — pilihan utama di menu/popup ----------
   <div class="ds-btn f"><span class="ds-ic">${Icons.svg('people')}</span>Ganti pemain</div>
   keadaan: biasa (pastel) · .is-sel / fokus .f.on (biru muda + panah oranye) · .is-off (abu, tak bisa dipilih) · .ds-btn--cta (oranye) */
.ds-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-sp-2);
  min-height: var(--ds-h-btn); padding: 0 var(--ds-sp-6); border-radius: var(--ds-r-pill); cursor: pointer; user-select: none;
  background: linear-gradient(180deg, #fff, var(--ds-surf)); color: var(--ds-ink);
  font: 700 var(--ds-fs-title) / 1 var(--ds-font); font-style: normal; letter-spacing: .01em; white-space: nowrap;
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-surf); transition: transform var(--ds-dur-fast) var(--ds-ease-out), box-shadow var(--ds-dur-fast); }
.ds-btn .ds-ic { display: grid; place-items: center; width: 1.7em; height: 1.7em; margin-left: calc(var(--ds-u) * -1.8); border-radius: 50%;
  background: var(--ds-p-sky); font-size: 1em; }
.ds-btn:active { transform: translateY(calc(var(--ds-u) * .25)); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-press); }
.ds-btn.is-sel, .ds-btn.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); border: 0; }
.ds-btn.is-sel .ds-ic, .ds-btn.f.on .ds-ic { background: #fff; color: var(--ds-on-2); }
.ds-btn.is-sel::before, .ds-btn.f.on::before { content: ''; position: absolute; left: calc(var(--ds-u) * -2.6); top: 50%; translate: 0 -50%;
  width: calc(var(--ds-u) * 1.6); height: calc(var(--ds-u) * 2.4); background: var(--ds-cursor); clip-path: polygon(0 0, 100% 50%, 0 100%, 34% 50%);
  animation: ds-nudge .9s ease-in-out infinite; }
.ds-btn.is-off { background: var(--ds-grey); color: var(--ds-grey-ink); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-grey); cursor: default; }
.ds-btn--cta, .ds-btn--cta.f.on, .ds-btn--cta.is-sel { background: linear-gradient(180deg, #f6802f, var(--ds-cta)); color: #fff;
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-cta); }
.ds-btn--sm { min-height: calc(var(--ds-h-btn) * .75); padding: 0 var(--ds-sp-5); font-size: var(--ds-fs-label); }
.ds-btn--lg { min-height: calc(var(--ds-h-btn) * 1.15); padding: 0 var(--ds-sp-7); font-size: var(--ds-fs-h2); }
@keyframes ds-nudge { 50% { translate: calc(var(--ds-u) * -.6) -50%; } }

/* ---------- 2. Menu besar (.ds-menu) — pilihan besar dengan ikon pastel + judul + keterangan ----------
   <div class="ds-menu f"><span class="ds-ic p-lilac">${Icons.svg('island','duotone')}</span><b>Main sendiri</b><small>Pilih tempat di peta</small><em>1</em></div>
   lingkaran ikon: .p-sky (bawaan) · .p-lilac · .p-peach · .p-mint · .p-butter · .p-pink */
.ds-menu { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
  column-gap: calc(var(--ds-u) * 1.6); width: 100%; max-width: calc(var(--ds-u) * 60); min-width: 0; cursor: pointer;
  padding: calc(var(--ds-u) * 1.2) calc(var(--ds-u) * 2.4) calc(var(--ds-u) * 1.2) calc(var(--ds-u) * 1.2); border-radius: calc(var(--ds-u) * 4);
  background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2)); color: var(--ds-ink); font-family: var(--ds-font);
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-surf); transition: transform .16s var(--ds-ease); }
.ds-menu .ds-ic { grid-row: 1 / 3; display: grid; place-items: center; width: calc(var(--ds-u) * 6.4); height: calc(var(--ds-u) * 6.4); border-radius: 50%;
  background: var(--ds-p-sky); color: var(--ds-ink); font-size: calc(var(--ds-u) * 3.6); box-shadow: inset 0 0 0 var(--ds-rim) #fff; }
.ds-ic.p-lilac { background: var(--ds-p-lilac); } .ds-ic.p-peach { background: var(--ds-p-peach); } .ds-ic.p-mint { background: var(--ds-p-mint); }
.ds-ic.p-butter { background: var(--ds-p-butter); } .ds-ic.p-pink { background: var(--ds-p-pink); } .ds-ic.p-sky { background: var(--ds-p-sky); }
.ds-menu b { grid-column: 2; align-self: end; font-size: calc(var(--ds-u) * 2.8); line-height: 1.15; }
.ds-menu small { grid-column: 2 / 4; align-self: start; color: var(--ds-ink-2); font-weight: 700; font-size: calc(var(--ds-u) * 1.8); line-height: 1.3;
  padding-top: calc(var(--ds-u) * .3); }
.ds-menu em { grid-row: 1; grid-column: 3; align-self: end; font-style: normal; font-weight: 700; font-size: calc(var(--ds-u) * 1.7); color: var(--ds-ink-2); }
.ds-menu.is-sel, .ds-menu.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.03); border: 0; }
.ds-menu.is-sel small, .ds-menu.f.on small, .ds-menu.is-sel em, .ds-menu.f.on em { color: var(--ds-on-ink); }
.ds-menu.is-sel .ds-ic, .ds-menu.f.on .ds-ic { background: #fff; }
.ds-menu.is-sel::before, .ds-menu.f.on::before { content: ''; position: absolute; left: calc(var(--ds-u) * -2.8); top: 50%; translate: 0 -50%;
  width: calc(var(--ds-u) * 1.8); height: calc(var(--ds-u) * 2.8); background: var(--ds-cursor); clip-path: polygon(0 0, 100% 50%, 0 100%, 34% 50%);
  animation: ds-nudge .9s ease-in-out infinite; }

/* ---------- 3. Tombol bulat (.ds-round) — aksi ikon saja: suara, pengaturan, kembali ----------
   <div class="ds-round f" aria-label="Pengaturan">${Icons.svg('gear')}</div>  · .ds-round--sm · .ds-round--dark (di atas foto/peta gelap) */
.ds-round { position: relative; display: inline-grid; place-items: center; width: calc(var(--ds-u) * 6.4); height: calc(var(--ds-u) * 6.4); border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2)); color: var(--ds-ink); font-size: calc(var(--ds-u) * 3.2);
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-surf); transition: transform .16s var(--ds-ease); }
.ds-round:active { transform: translateY(calc(var(--ds-u) * .25)); box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-press); }
.ds-round.f.on, .ds-round.is-sel { 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); border: 0; }
.ds-round.f.on::before, .ds-round.is-sel::before { content: ''; position: absolute; left: 50%; top: calc(var(--ds-u) * -2.6); translate: -50% 0;
  width: calc(var(--ds-u) * 2); height: calc(var(--ds-u) * 1.6); background: var(--ds-cursor); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ds-round--sm { width: calc(var(--ds-u) * 4.6); height: calc(var(--ds-u) * 4.6); font-size: calc(var(--ds-u) * 2.4); }
.ds-round--dark { background: var(--ds-scrim); color: #fff; box-shadow: var(--ds-sh-dark); }

/* ---------- 4. Pil gelap (.ds-dark) — aksi sistem & info kecil di atas peta: Kembali, Ganti pemain, controller ----------
   <div class="ds-dark f">${Icons.svg('back')}Kembali ke peta</div> */
.ds-dark { position: relative; display: inline-flex; align-items: center; gap: calc(var(--ds-u) * .9); padding: calc(var(--ds-u) * .9) calc(var(--ds-u) * 2.2);
  border-radius: var(--ds-r-pill); background: var(--ds-scrim); color: #fff; font: 700 calc(var(--ds-u) * 2) / 1 var(--ds-font); cursor: pointer;
  box-shadow: var(--ds-sh-dark); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); white-space: nowrap; }
.ds-dark .ds-i, .ds-dark .ds-g { font-size: 1.25em; }
.ds-dark.f.on, .ds-dark.is-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);
  transform: scale(1.04); border: 0; }
.ds-dark.f.on::before, .ds-dark.is-sel::before { content: ''; position: absolute; left: calc(var(--ds-u) * -2.6); top: 50%; translate: 0 -50%;
  width: calc(var(--ds-u) * 1.6); height: calc(var(--ds-u) * 2.4); background: var(--ds-cursor); clip-path: polygon(0 0, 100% 50%, 0 100%, 34% 50%);
  animation: ds-nudge .9s ease-in-out infinite; }

/* ---------- 5. Petunjuk tombol (.ds-hints) — kanan bawah, HANYA kalau controller terbaca ----------
   <div class="ds-hints"><span>${Icons.glyph('stick')}Pilih</span><span>${Icons.glyph('face','right')}OK</span></div> */
/* v3: satu pil gelap (bukan teks putih lepas — tidak terbaca di bagian peta yang terang) */
.ds-hints { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-5); padding: var(--ds-sp-3) var(--ds-sp-5); border-radius: var(--ds-r-pill);
  background: var(--ds-scrim); color: #fff; font: 700 var(--ds-fs-label) / 1 var(--ds-font); box-shadow: var(--ds-sh-dark);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ds-hints > span { display: inline-flex; align-items: center; gap: calc(var(--ds-u) * .7); }
.ds-hints .ds-g { font-size: 1.35em; }   /* bayangan ada di dalam SVG, hanya di bentuk dasarnya (huruf di atasnya tanpa bayangan) */
.ds-hints--ink { background: none; box-shadow: none; padding: 0; color: var(--ds-ink); text-shadow: none; --ds-glyph-ink: #fff; }
.ds-hints--ink .ds-g .ds-sh { filter: none; }

/* ---------- 6. Bilah judul (.ds-title) — kiri atas layar: ikon + judul + garis bertitik + keterangan ----------
   <header class="ds-title"><span class="ds-ic">${Icons.svg('island')}</span><b>Pulau Main Pintar</b><i></i><small>Pilih tempat bermain.</small></header> */
.ds-title { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--ds-u) * 1.4); align-items: center; color: #fff; font-family: var(--ds-font);
  text-shadow: var(--ds-ts); }
.ds-title .ds-ic { grid-row: 1 / 4; font-size: calc(var(--ds-u) * 5); filter: var(--ds-glyph-sh); }
.ds-title b { font-weight: 700; font-size: calc(var(--ds-u) * 3.2); line-height: 1.1; }
.ds-title i { position: relative; display: block; height: calc(var(--ds-u) * .28); margin: calc(var(--ds-u) * .7) calc(var(--ds-u) * 1.2) calc(var(--ds-u) * .7) 0;
  background: #fff; border-radius: 9px; box-shadow: var(--ds-ts); min-width: calc(var(--ds-u) * 24); }
.ds-title small { font-weight: 700; font-size: calc(var(--ds-u) * 2); }
.ds-title--ink { color: var(--ds-ink); text-shadow: none; }
.ds-title--ink .ds-ic { filter: none; }
.ds-title--ink i { background: var(--ds-ink); box-shadow: none; }

/* ---------- 7. Tab judul (.ds-tab) — judul layar penuh (menu, album, pengaturan) di pojok kiri atas: pita biru tua membulat ---------- */
.ds-tab { display: inline-flex; align-items: center; gap: calc(var(--ds-u) * 1); padding: calc(var(--ds-u) * 1.2) calc(var(--ds-u) * 3.2) calc(var(--ds-u) * 1.2) calc(var(--ds-u) * 2.4);
  background: var(--ds-deep); color: #fff; font: 700 calc(var(--ds-u) * 2.6) / 1 var(--ds-font); border-radius: 0 0 var(--ds-r-pill) 0;
  box-shadow: var(--ds-sh-dark); }
.ds-tab .ds-i { font-size: 1.25em; }

/* ---------- 8. Chip (.ds-chip) — label kecil: nama tempat, "segera", jumlah pemain ---------- */
.ds-chip { display: inline-flex; align-items: center; gap: var(--ds-sp-1); min-height: var(--ds-h-chip); padding: 0 var(--ds-sp-3);
  border-radius: var(--ds-r-pill); background: var(--ds-deep); color: #fff; font: 700 var(--ds-fs-small) / 1.1 var(--ds-font);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ds-chip--soft { background: var(--ds-p-sky); color: var(--ds-ink); letter-spacing: 0; text-transform: none; }
.ds-chip--dark { background: var(--ds-scrim); letter-spacing: 0; text-transform: none; }
.ds-chip--warn { background: var(--ds-cursor); color: #fff; }   /* "segera" — teks besar tebal saja (2,4:1) */

/* ---------- 9. Badge tempat (.ds-badge) — lingkaran bercincin + ekor gelembung + label miring-ringan ---------- */
.ds-badge { position: relative; display: inline-flex; align-items: center; font-family: var(--ds-font); cursor: pointer; }
.ds-badge .ds-ring { position: relative; z-index: 2; display: grid; place-items: center; width: calc(var(--ds-u) * 8.4); height: calc(var(--ds-u) * 8.4);
  border-radius: 50%; background: #fff; border: calc(var(--ds-u) * .65) solid var(--ds-sel); color: var(--ds-ink); font-size: calc(var(--ds-u) * 4.2);
  box-shadow: var(--ds-sh-dark); }
.ds-badge .ds-ring::after { content: ''; position: absolute; left: calc(var(--ds-u) * 1); bottom: calc(var(--ds-u) * -1.5); width: calc(var(--ds-u) * 2.2); height: calc(var(--ds-u) * 2.2);
  background: #fff; clip-path: polygon(0 100%, 0 0, 100% 0); border-left: calc(var(--ds-u) * .65) solid var(--ds-sel); }  /* ekor gelembung */
.ds-badge .ds-ring img { width: 86%; height: 86%; object-fit: contain; object-position: 50% 70%; }
.ds-badge .ds-label { margin-left: calc(var(--ds-u) * -2.4); padding: calc(var(--ds-u) * 1) calc(var(--ds-u) * 2.6) calc(var(--ds-u) * 1) calc(var(--ds-u) * 3.4);
  border-radius: 0 var(--ds-r-pill) var(--ds-r-pill) 0; background: linear-gradient(180deg, #fff, var(--ds-surf-2)); color: var(--ds-deep);
  font-weight: 700; font-size: calc(var(--ds-u) * 2.3); line-height: 1; box-shadow: var(--ds-sh-dark); white-space: nowrap; }
.ds-badge.is-sel .ds-ring, .ds-badge.f.on .ds-ring { border-color: var(--ds-on); transform: scale(1.12); box-shadow: 0 0 0 calc(var(--ds-u) * .45) #fff, var(--ds-sh-dark); }
.ds-badge.is-sel .ds-label, .ds-badge.f.on .ds-label { background: linear-gradient(180deg, var(--ds-on), var(--ds-on-2)); color: var(--ds-on-ink); font-size: calc(var(--ds-u) * 2.6); }
.ds-badge.is-sel::before, .ds-badge.f.on::before { content: ''; position: absolute; left: calc(var(--ds-u) * -3.2); top: 50%; translate: 0 -50%; z-index: 3;
  width: calc(var(--ds-u) * 2.2); height: calc(var(--ds-u) * 3.2); background: var(--ds-cursor); clip-path: polygon(0 0, 100% 50%, 0 100%, 34% 50%);
  animation: ds-nudge .9s ease-in-out infinite; }
.ds-badge.f.on { box-shadow: none; border: 0; }

/* ---------- 10. Kartu pemain (.ds-player) — pil putih: foto · controller + 4 lampu pemain · progres + hadiah ---------- */
.ds-player { display: inline-flex; align-items: center; gap: calc(var(--ds-u) * 1.4); padding: calc(var(--ds-u) * .8) calc(var(--ds-u) * .8) calc(var(--ds-u) * .8) calc(var(--ds-u) * .8);
  border-radius: var(--ds-r-pill); background: #fff; color: var(--ds-ink); font-family: var(--ds-font); box-shadow: var(--ds-sh-paper); }
.ds-player .ds-av { width: calc(var(--ds-u) * 6.4); height: calc(var(--ds-u) * 6.4); border-radius: 50%; overflow: hidden; background: var(--ds-surf); display: grid; place-items: center;
  box-shadow: inset 0 0 0 calc(var(--ds-u) * .3) var(--ds-sel); }
.ds-player .ds-av img { width: 80%; height: 80%; object-fit: contain; }
.ds-player .ds-pad { display: flex; flex-direction: column; align-items: center; gap: calc(var(--ds-u) * .4); font-size: calc(var(--ds-u) * 3); color: var(--ds-ink); }
.ds-lights { display: flex; gap: calc(var(--ds-u) * .3); }
.ds-lights i { width: calc(var(--ds-u) * .9); height: calc(var(--ds-u) * .9); border-radius: 2px; background: #c9d1d8; }
.ds-lights i.on { background: #2fbf5b; }
.ds-player .ds-prog { display: inline-flex; align-items: center; gap: calc(var(--ds-u) * 1); padding: calc(var(--ds-u) * .5) calc(var(--ds-u) * .5) calc(var(--ds-u) * .5) calc(var(--ds-u) * 1.8);
  border-radius: var(--ds-r-pill); background: var(--ds-grey); font-weight: 700; font-size: calc(var(--ds-u) * 2.2); color: var(--ds-ink-2); }
.ds-player .ds-prog b { color: var(--ds-cursor); }
.ds-player .ds-prog .ds-round { width: calc(var(--ds-u) * 4.4); height: calc(var(--ds-u) * 4.4); font-size: calc(var(--ds-u) * 2.4); }

.ds-player .ds-round, .ds-player .ds-prog, .ds-card .ds-round--inner, .ds-callout > b { box-shadow: inset 0 0 0 var(--ds-rim) #fff; }
.ds-player .ds-prog { box-shadow: none; }

/* ---------- 11. Callout (.ds-callout) — penanda di atas dunia game: "Giliranmu", "Pelempar" (ikon bulat + pil) ---------- */
.ds-callout { display: inline-flex; align-items: center; font-family: var(--ds-font); }
.ds-callout .ds-bub { display: grid; place-items: center; width: calc(var(--ds-u) * 7); height: calc(var(--ds-u) * 7); border-radius: 50%; background: #fff; color: var(--ds-ink);
  font-size: calc(var(--ds-u) * 3.6); box-shadow: inset 0 0 0 var(--ds-rim) var(--ds-surf-2), var(--ds-sh-paper); position: relative; z-index: 1; }
.ds-callout > b { margin-left: calc(var(--ds-u) * -1.4); padding: calc(var(--ds-u) * .8) calc(var(--ds-u) * 2.2) calc(var(--ds-u) * .8) calc(var(--ds-u) * 2.4);
  border-radius: 0 var(--ds-r-pill) var(--ds-r-pill) 0; background: var(--ds-surf); color: var(--ds-sel-edge); font-weight: 700; font-size: calc(var(--ds-u) * 2.1);
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-surf); }

/* ---------- 12. Baki skor (.ds-score) — HUD game: baris slot hasil per pemain + angka ---------- */
.ds-score { display: inline-grid; gap: calc(var(--ds-u) * .5); padding: calc(var(--ds-u) * .6); border-radius: calc(var(--ds-u) * 1.4); background: var(--ds-scrim);
  font-family: var(--ds-font); box-shadow: var(--ds-sh-dark); }
.ds-score .row { display: flex; align-items: center; gap: calc(var(--ds-u) * .4); }
.ds-score .who { width: calc(var(--ds-u) * 4); height: calc(var(--ds-u) * 4); border-radius: calc(var(--ds-u) * .8); background: #fff; display: grid; place-items: center; overflow: hidden; }
.ds-score .who img { width: 90%; height: 90%; object-fit: contain; }
.ds-score .slot { width: calc(var(--ds-u) * 4); height: calc(var(--ds-u) * 4); border-radius: calc(var(--ds-u) * .7); background: rgba(255, 255, 255, .12);
  display: grid; place-items: center; color: #fff; font-size: calc(var(--ds-u) * 2.4); }
.ds-score .slot.ok { background: rgba(47, 191, 91, .9); } .ds-score .slot.no { background: rgba(232, 67, 74, .85); } .ds-score .slot.now { box-shadow: inset 0 0 0 calc(var(--ds-u) * .3) var(--mp-sun, #ffc21a); }
.ds-score .pts { min-width: calc(var(--ds-u) * 6); height: calc(var(--ds-u) * 4); border-radius: calc(var(--ds-u) * .7); display: grid; place-items: center; background: var(--c, var(--ds-sel-2));
  color: #fff; font-weight: 700; font-size: calc(var(--ds-u) * 2.6); }

/* ---------- 13. Isian (.ds-field) — tombol bulat ikon + batang putih bergaris bawah (nama, ejaan baca) ---------- */
.ds-field { display: flex; align-items: center; gap: calc(var(--ds-u) * 1.2); font-family: var(--ds-font); }
.ds-field .ds-round { flex: none; }
.ds-field input, .ds-field .ds-val { flex: 1; min-width: 0; height: calc(var(--ds-u) * 5); border: 0; border-radius: var(--ds-r-pill); padding: 0 calc(var(--ds-u) * 2);
  background: #fff; color: var(--ds-ink); font: 700 calc(var(--ds-u) * 2.4) var(--ds-font); text-align: center; outline: none;
  box-shadow: inset 0 calc(var(--ds-u) * -.25) 0 var(--ds-surf-2), var(--ds-sh-paper); display: grid; place-items: center; }
.ds-field input:focus { box-shadow: inset 0 calc(var(--ds-u) * -.35) 0 var(--ds-cursor), 0 0 0 calc(var(--ds-u) * .35) var(--ds-cursor); }

/* ---------- 14. Kartu & panel (.ds-card) — permukaan putih bersih, bibir datar, tanpa bayangan blur besar ---------- */
.ds-card { background: #fff; border-radius: var(--ds-r-card); color: var(--ds-ink); font-family: var(--ds-font); padding: calc(var(--ds-u) * 2.4);
  box-shadow: var(--ds-sh-paper); }
.ds-card--glass { background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ds-frame { position: relative; border: calc(var(--ds-u) * .28) solid #fff; border-radius: calc(var(--ds-u) * 1.2); }   /* bingkai garis putih (pratinjau) */
.ds-frame::after { content: ''; position: absolute; left: calc(var(--ds-u) * -.55); bottom: calc(var(--ds-u) * -.55); width: calc(var(--ds-u) * .8); height: calc(var(--ds-u) * .8);
  border-radius: 50%; background: #fff; }

/* ---------- 15. Latar berpola (.ds-pattern) — layar menu penuh: abu-biru pucat + ikon pudar (isi --ds-pat lewat Icons.pattern) ---------- */
.ds-pattern { background: var(--ds-pat, none) 0 0 / calc(var(--ds-u) * 29) auto, radial-gradient(120% 90% at 30% 20%, #f3f7fa, #dfe7ee); }

@media (prefers-reduced-motion: reduce) {
  .ds-btn::before, .ds-menu::before, .ds-badge::before { animation: none !important; }
  .ds-btn, .ds-menu, .ds-round { transition: none; }
}