/* BeyCombo Lab — token warna berkontras tegas untuk mode gelap & terang. */
:root {
  --latar: #f3f5fa;
  --permukaan: #ffffff;
  --permukaan-2: #e8ecf4;
  --garis: #c3cad8;
  --teks: #0b0d12;
  --teks-2: #364056;
  --aksen: #ffcc00;
  --aksen-teks: #0b0d12;
  --aksen-garis: #8a6a00;
  --attack: #c8102e;
  --defense: #0a7a3d;
  --stamina: #0b5ed7;
  --balance: #7a2fc4;
  --peringatan-latar: #fff4cc;
  --peringatan-teks: #5c4500;
  --bayangan: 0 1px 2px rgb(0 0 0 / .06), 0 4px 16px rgb(0 0 0 / .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --latar: #0b0d12; --permukaan: #151a24; --permukaan-2: #1e2533; --garis: #364056; --teks: #f5f7fc; --teks-2: #b9c2d4;
    --aksen-garis: #ffcc00; --attack: #ff6b74; --defense: #4ee08f; --stamina: #6cb2ff; --balance: #cf9bff;
    --peringatan-latar: #3a2f00; --peringatan-teks: #ffe27a; --bayangan: 0 1px 2px rgb(0 0 0 / .4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --latar: #0b0d12; --permukaan: #151a24; --permukaan-2: #1e2533; --garis: #364056; --teks: #f5f7fc; --teks-2: #b9c2d4;
  --aksen-garis: #ffcc00; --attack: #ff6b74; --defense: #4ee08f; --stamina: #6cb2ff; --balance: #cf9bff;
  --peringatan-latar: #3a2f00; --peringatan-teks: #ffe27a; --bayangan: 0 1px 2px rgb(0 0 0 / .4); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--latar); color: var(--teks);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, .nomor, .skor-besar, .tombol-utama { font-family: "Chakra Petch", system-ui, sans-serif; }
h2 { font-size: 1.15rem; margin: 0; }
h3 { margin: 0; }
a { color: inherit; text-decoration-color: var(--aksen-garis); text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--aksen-garis); outline-offset: 2px; }

.kepala { background: var(--teks); color: var(--latar); position: sticky; top: 0; z-index: 10; }
.kepala-isi { max-width: 980px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo svg { width: 38px; height: 38px; }
.logo h1 { font-size: 1.3rem; margin: 0; line-height: 1.1; letter-spacing: .02em; }
.logo p { margin: 0; font-size: .82rem; opacity: .85; }
.tombol-ikon { width: 40px; height: 40px; border-radius: 10px; border: 2px solid currentColor; background: transparent; display: grid; place-items: center; color: inherit; }
.tombol-ikon svg { width: 20px; height: 20px; }

.isi { max-width: 980px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }
/* Isi grid boleh menyempit: baris chip yang bisa digeser tidak boleh melebarkan halaman. */
.isi > *, .saring > *, .saring-blade > *, .kartu > *, .blade-kartu > * { min-width: 0; }
.pembuka-teks { margin: 4px 0 6px; color: var(--teks-2); }
.pembuka-teks strong { color: var(--teks); }
.info-data { margin: 0; font-size: .88rem; color: var(--teks-2); }

.kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 14px; padding: 16px; box-shadow: var(--bayangan); }
.langkah-kepala { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.langkah-kepala h2 small { font-weight: 500; color: var(--teks-2); font-size: .85rem; font-family: system-ui, sans-serif; }
summary.langkah-kepala { cursor: pointer; list-style: none; margin-bottom: 0; }
summary.langkah-kepala::-webkit-details-marker { display: none; }
details[open] > summary.langkah-kepala { margin-bottom: 8px; }
.nomor { width: 30px; height: 30px; border-radius: 50%; background: var(--aksen); color: var(--aksen-teks); display: grid; place-items: center; font-weight: 700; flex: none; }
.lencana { margin-left: auto; font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--permukaan-2); border: 1px solid var(--garis); white-space: nowrap; }
.petunjuk { margin: 0 0 10px; font-size: .9rem; color: var(--teks-2); }

.terpilih { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.terpilih:empty { display: none; }
.pil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--aksen); color: var(--aksen-teks); font-weight: 600; border: 0; font-size: .92rem; }
.pil span.x { width: 22px; height: 22px; border-radius: 50%; background: rgb(0 0 0 / .15); display: grid; place-items: center; font-size: .8rem; }

.saring { display: grid; gap: 8px; margin-bottom: 12px; }
input[type="search"] { width: 100%; padding: 11px 14px; border-radius: 10px; border: 2px solid var(--garis); background: var(--latar); color: var(--teks); font: inherit; }
input[type="search"]:focus { border-color: var(--aksen-garis); outline: none; }
.baris-chip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.chip { flex: none; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--garis); background: var(--permukaan); font-size: .88rem; font-weight: 600; }
.chip.aktif { background: var(--teks); color: var(--latar); border-color: var(--teks); }

.daftar-part { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.part { text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--garis); background: var(--latar); display: grid; gap: 4px; position: relative; min-height: 76px; }
.part:hover { border-color: var(--teks-2); }
.part[aria-pressed="true"] { border-color: var(--aksen-garis); background: var(--permukaan-2); box-shadow: inset 0 0 0 1px var(--aksen-garis); }
.part[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--aksen); color: var(--aksen-teks); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.part-nama { font-weight: 700; padding-right: 54px; line-height: 1.25; }
.part-sub { font-size: .78rem; color: var(--teks-2); }
.part-info { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .78rem; color: var(--teks-2); align-items: center; }
.tier { position: absolute; top: 8px; right: 10px; font: 700 .8rem "Chakra Petch", sans-serif; padding: 1px 7px; border-radius: 6px; border: 1.5px solid var(--teks); }
.part[aria-pressed="true"] .tier { right: 38px; }
.tier-X, .tier-S { background: var(--teks); color: var(--latar); }
.peran { font-weight: 700; font-size: .78rem; }
.peran-Attack { color: var(--attack); } .peran-Defense { color: var(--defense); } .peran-Stamina { color: var(--stamina); } .peran-Balance { color: var(--balance); }
.tombol-teks { margin-top: 10px; background: none; border: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.kosong { color: var(--teks-2); font-size: .92rem; padding: 8px 0; }

.segmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.segmen button { padding: 12px 8px; border-radius: 12px; border: 2px solid var(--garis); background: var(--latar); font-weight: 700; display: grid; gap: 2px; text-align: center; }
.segmen button small { font-weight: 500; font-size: .78rem; color: var(--teks-2); }
.segmen button[aria-checked="true"] { background: var(--teks); color: var(--latar); border-color: var(--teks); }
.segmen button[aria-checked="true"] small { color: inherit; opacity: .85; }

.grup-milik { margin-top: 12px; }
.grup-milik h3 { font-size: .95rem; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.grup-milik h3 button { font-size: .8rem; font-weight: 600; background: none; border: 0; text-decoration: underline; padding: 2px 4px; color: var(--teks-2); }
.centang { display: flex; flex-wrap: wrap; gap: 6px; }
.centang label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1.5px solid var(--garis); border-radius: 8px; font-size: .86rem; cursor: pointer; background: var(--latar); }
.centang input { accent-color: var(--teks); margin: 0; }
.centang label:has(input:checked) { border-color: var(--teks); background: var(--permukaan-2); font-weight: 700; }

.aksi { position: sticky; bottom: 0; padding: 10px 0 12px; background: linear-gradient(transparent, var(--latar) 30%); z-index: 5; }
.tombol-utama { width: 100%; padding: 16px; border-radius: 14px; border: 2px solid var(--aksen-teks); background: var(--aksen); color: var(--aksen-teks); font-size: 1.2rem; font-weight: 700; letter-spacing: .03em; box-shadow: 0 4px 0 var(--aksen-teks); }
.tombol-utama:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--aksen-teks); }
.tombol-utama:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---------- Hasil ---------- */
.hasil { display: grid; gap: 14px; scroll-margin-top: 70px; }
.peringatan { background: var(--peringatan-latar); color: var(--peringatan-teks); border: 1.5px solid currentColor; border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: .92rem; }
.tab-deck { display: flex; gap: 6px; overflow-x: auto; }
.tab-deck button { flex: none; padding: 9px 14px; border-radius: 10px; border: 2px solid var(--garis); background: var(--permukaan); font-weight: 700; }
.tab-deck button[aria-selected="true"] { background: var(--aksen); color: var(--aksen-teks); border-color: var(--aksen-teks); }
.deck-kepala { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.cincin { --n: 0; width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(var(--teks) calc(var(--n) * 1%), var(--permukaan-2) 0); display: grid; place-items: center; }
.cincin > div { width: 72px; height: 72px; border-radius: 50%; background: var(--permukaan); display: grid; place-items: center; text-align: center; line-height: 1; }
.skor-besar { font-size: 1.9rem; font-weight: 700; }
.cincin small { display: block; font-size: .68rem; color: var(--teks-2); margin-top: 2px; }
.deck-kepala h2 { font-size: 1.3rem; }
.deck-kepala p { margin: 4px 0 0; color: var(--teks-2); font-size: .94rem; }
.yakin { display: inline-block; margin-top: 6px; font-size: .82rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1.5px solid currentColor; }
.yakin-Tinggi { color: var(--defense); } .yakin-Sedang { color: var(--stamina); } .yakin-Rendah { color: var(--attack); }
.deret-nama { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.deret-nama span { background: var(--permukaan-2); border: 1px solid var(--garis); border-radius: 8px; padding: 4px 10px; font-weight: 700; font-size: .9rem; }

.combo { border-left: 6px solid var(--warna, var(--garis)); }
.combo.peran-Attack { --warna: var(--attack); } .combo.peran-Defense { --warna: var(--defense); } .combo.peran-Stamina { --warna: var(--stamina); } .combo.peran-Balance { --warna: var(--balance); }
.combo { color: var(--teks); }
.urutan { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--warna); color: var(--latar); display: grid; place-items: center; font: 700 1.3rem "Chakra Petch", sans-serif; }
.nilai-combo { margin-left: auto; text-align: right; flex: none; }
.nilai-combo b { font: 700 1.6rem "Chakra Petch", sans-serif; display: block; line-height: 1; }
.nilai-combo small { font-size: .72rem; color: var(--teks-2); }
.batang { display: grid; grid-template-columns: 64px 1fr 34px; align-items: center; gap: 8px; font-size: .82rem; margin-top: 6px; }
.batang .rel { height: 10px; border-radius: 99px; background: var(--permukaan-2); overflow: hidden; border: 1px solid var(--garis); }
.batang .isi-rel { height: 100%; background: var(--teks); border-radius: 99px; }
.batang b { text-align: right; }
.bagian { margin-top: 14px; }
.bagian h4 { margin: 0 0 6px; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; color: var(--teks-2); }
.bagian ul { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.tabel-part { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel-part td { padding: 6px 8px; border-bottom: 1px solid var(--garis); }
.tabel-part td:first-child { color: var(--teks-2); width: 34%; }
.tabel-part td:last-child { text-align: right; white-space: nowrap; color: var(--teks-2); }
.lawan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lawan div { border: 1.5px solid var(--garis); border-radius: 10px; padding: 8px 10px; font-size: .9rem; }
.lawan div b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--teks-2); }
.strategi ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.strategi li { border: 1.5px solid var(--garis); border-radius: 12px; padding: 10px 12px; }
.strategi li b { display: block; margin-bottom: 2px; }
.strategi li p { margin: 0; color: var(--teks-2); font-size: .93rem; }
.rincian-skor { font-size: .82rem; color: var(--teks-2); margin-top: 10px; }

.cara-kerja summary { cursor: pointer; }
.cara-kerja summary h2 { display: inline; }
.cara-kerja ol { padding-left: 20px; display: grid; gap: 6px; font-size: .94rem; }

.kaki { max-width: 980px; margin: 8px auto 0; padding: 16px 16px 40px; color: var(--teks-2); font-size: .88rem; }
.kaki h2 { color: var(--teks); font-size: 1rem; }
.daftar-sumber { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.daftar-sumber li { border: 1px solid var(--garis); border-radius: 10px; padding: 8px 10px; background: var(--permukaan); }
.daftar-sumber b { color: var(--teks); }
.ok { color: var(--defense); font-weight: 700; } .gagal { color: var(--attack); font-weight: 700; }

/* ---------- Mode, kategori, kartu blade & combo (versi 2) ---------- */
.mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode button { padding: 12px 8px; border-radius: 14px; border: 2px solid var(--garis); background: var(--permukaan); font-weight: 700; font-size: 1rem; display: grid; gap: 2px; }
.mode button small { font-weight: 500; font-size: .76rem; color: var(--teks-2); }
.mode button[aria-selected="true"] { background: var(--aksen); color: var(--aksen-teks); border-color: var(--aksen-teks); box-shadow: 0 3px 0 var(--aksen-teks); }
.mode button[aria-selected="true"] small { color: inherit; }
.kategori { margin-bottom: 10px; }
.kategori .chip b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--aksen); color: var(--aksen-teks); font-size: .74rem; margin-left: 4px; }
.aksi-kategori { display: flex; gap: 16px; flex-wrap: wrap; }
.aksi-kategori .tombol-teks { margin: 0; }
.part-sub { font-size: .78rem; color: var(--teks-2); }
.segmen.lima { grid-template-columns: repeat(5, 1fr); }
.segmen.enam { grid-template-columns: repeat(6, 1fr); }
.segmen.enam button { font-size: 1.1rem; }
.segmen .g-Attack[aria-checked="true"] { background: var(--attack); border-color: var(--attack); color: var(--latar); }
.segmen .g-Defense[aria-checked="true"] { background: var(--defense); border-color: var(--defense); color: var(--latar); }
.segmen .g-Stamina[aria-checked="true"] { background: var(--stamina); border-color: var(--stamina); color: var(--latar); }
.segmen .g-Balance[aria-checked="true"] { background: var(--balance); border-color: var(--balance); color: var(--latar); }
.set { margin-top: 12px; }
.set > b { font-size: .9rem; }
.set .deret-nama { margin-top: 6px; }
.blade-kartu { display: grid; gap: 10px; }
.blade-kepala { display: flex; gap: 12px; align-items: center; }
.blade-kepala h2 { font-size: 1.25rem; }
.blade-kepala .sub { font-size: .88rem; color: var(--teks-2); }
.urutan-blade { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--teks); color: var(--latar); display: grid; place-items: center; font: 700 1.2rem "Chakra Petch", sans-serif; }
details.combo { border: 1.5px solid var(--garis); border-left: 6px solid var(--warna, var(--garis)); border-radius: 12px; background: var(--latar); }
details.combo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
details.combo > summary::-webkit-details-marker { display: none; }
details.combo .urutan { width: 34px; height: 34px; border-radius: 10px; font-size: 1.05rem; }
.combo-judul { display: grid; min-width: 0; }
.combo-judul b { font: 700 1.08rem "Chakra Petch", sans-serif; line-height: 1.25; }
.combo-judul small { font-size: .8rem; color: var(--teks-2); }
details.combo .nilai-combo b { font-size: 1.4rem; }
details.combo[open] > summary { border-bottom: 1px solid var(--garis); }
.combo-isi { padding: 4px 12px 14px; }
.isi-rel { display: block; }
.ket { font-size: .76rem; color: var(--teks-2); border: 1px solid var(--garis); border-radius: 6px; padding: 0 5px; margin-left: 2px; white-space: nowrap; }

.peringkat ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: pr; }
.peringkat li { counter-increment: pr; border: 1.5px solid var(--garis); border-radius: 12px; padding: 9px 12px 9px 46px; position: relative; }
.peringkat li::before { content: counter(pr); position: absolute; left: 10px; top: 9px; width: 26px; height: 26px; border-radius: 8px; background: var(--permukaan-2); display: grid; place-items: center; font: 700 .9rem "Chakra Petch", sans-serif; }
.peringkat li.masuk { border-color: var(--defense); }
.peringkat li.masuk::before { background: var(--defense); color: var(--latar); }
.peringkat li .tier { position: static; margin-left: 4px; }
.peringkat .pr-combo { display: block; font-size: .86rem; color: var(--teks-2); }
.peringkat li p { margin: 2px 0 0; font-size: .88rem; color: var(--teks-2); }

@media (max-width: 560px) {
  .mode button { font-size: .92rem; padding: 10px 4px; }
  .mode button small { font-size: .7rem; }
  .segmen.lima { grid-template-columns: 1fr 1fr; }
  .segmen.lima button:first-child { grid-column: 1 / -1; }
  .segmen.enam { grid-template-columns: repeat(6, 1fr); }
  .segmen.enam button { display: block; text-align: center; padding: 10px 0; }
  .segmen { grid-template-columns: 1fr; }
  .segmen button { grid-template-columns: auto 1fr; text-align: left; align-items: baseline; gap: 8px; padding: 11px 14px; }
  .daftar-part { grid-template-columns: 1fr 1fr; }
  .part-nama { padding-right: 0; padding-top: 22px; }
  .tier { left: 10px; right: auto; }
  .part[aria-pressed="true"] .tier { right: auto; }
  .deck-kepala { grid-template-columns: 1fr; justify-items: start; }
    .lawan { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .hasil > * { animation: muncul .25s ease-out both; }
  @keyframes muncul { from { opacity: 0; transform: translateY(6px); } }
}