/* gaya.css — Baristar, tema "Arcade Senja" (PLAN-v2 §2).
   Kelas v1 (PLAN §5) tetap berfungsi, dipetakan ke token baru. */

:root {
  --latar: #F4F3FF;
  --permukaan: #FFFFFF;
  --teks: #1A1736;
  --redup: #55527A;
  --garis: #E2DFF7;
  --go: #FF6B3D;
  --go-teks: #1A1736;
  --go-bayang: #C9431C;
  --ungu: #5B3DF5;
  --ungu-teks: #FFFFFF;
  --ungu-lembut: #ECE8FF;
  --teal: #0B7F73;
  --teal-teks: #FFFFFF;
  --kuning: #FFC83D;
  --benar: #13795B;
  --salah: #C92A5B;
  --benar-teks: #13795B;
  --salah-teks: #C92A5B;
  --radius: 20px;
  --radius-kecil: 12px;
  --bayang: 0 2px 0 var(--garis), 0 8px 24px rgb(26 23 54 / .08);
  /* teks di atas --ungu-lembut / --kuning (PLAN-v2 §2) */
  --ungu-lembut-teks: #3A22C9;
  --kuning-teks: #1A1736;
  /* alias v1 agar layar lama tak rusak */
  --kartu: var(--permukaan);
  --karamel: var(--ungu);
  --emas: var(--kuning);
  --crema: var(--ungu-lembut);
  --kopi: var(--go);
  --espresso: var(--teks);
  --latte: var(--latar);
}
@media (prefers-color-scheme: dark) {
  :root {
    --latar: #13112A;
    --permukaan: #1E1B3B;
    --teks: #F2F0FF;
    --redup: #B4B0D9;
    --garis: #322D5C;
    --go: #FF7A4F;
    --go-teks: #1A1736;
    --go-bayang: #B8401C;
    --ungu: #6E55FF;
    --ungu-teks: #FFFFFF;
    --ungu-lembut: #2A2552;
    --teal: #0B7F73;
    --teal-teks: #FFFFFF;
    --kuning: #FFC83D;
    --benar: #13795B;
    --salah: #C92A5B;
    --benar-teks: #4ADE9B;
    --salah-teks: #FF7AA2;
    --ungu-lembut-teks: #A898FF;
    --kuning-teks: #1A1736;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body {
  font: 15px/1.5 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--teks);
  background-color: var(--latar);
  background-image:
    radial-gradient(640px 440px at 6% -8%, rgb(91 61 245 / .08), transparent 70%),
    radial-gradient(680px 500px at 98% 106%, rgb(255 107 61 / .06), transparent 72%);
  background-attachment: fixed;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0; }
button {
  font: inherit;
  color: inherit;
  border: 1px solid transparent;
  border-radius: 14px;
  background: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
}
button:disabled { opacity: 0.5; cursor: default; }
:focus-visible { outline: 3px solid var(--ungu); outline-offset: 3px; }

/* Tata letak: satu kolom maks 480px di tengah, gutter 16px */
main#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Tata letak beranda & panel (PLAN-v2 §2) */
.go-bungkus { display: flex; flex-direction: column; gap: 8px; }
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 360px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
}
.baris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
label.baris { display: block; margin-bottom: 8px; font-weight: 600; }
.sub { font-size: 13px; color: var(--redup); }

/* Tombol (PLAN-v2 §2) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-ungu, .btn-utama {
  background: var(--ungu);
  color: var(--ungu-teks);
  font-size: 17px;
  font-weight: 700;
  padding: 12px 18px;
  text-align: center;
}
.btn-teal { background: var(--teal); color: var(--teal-teks); }
.btn-garis, .btn-biasa {
  background: transparent;
  border: 2px solid var(--garis);
  color: var(--teks);
}
.btn-garis:not(:disabled):hover, .btn-biasa:not(:disabled):hover { border-color: var(--ungu); }
.btn-hantu { background: transparent; color: var(--redup); }
.btn-hantu:not(:disabled):hover { color: var(--teks); }
.btn:active, .btn-utama:active, .btn-biasa:active, .chip:not([disabled]):active { transform: translateY(2px); }

/* Tombol GO — spesifikasi PERSIS PLAN-v2 §2 */
.btn-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 104px;
  padding: 14px 20px;
  border: none;
  border-radius: 28px;
  background: var(--go);
  color: var(--go-teks);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--go-bayang), 0 14px 28px rgb(255 107 61 / .35);
}
.btn-go .go-judul { font-size: 40px; font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
.btn-go .go-sub { font-size: 14px; font-weight: 600; opacity: 0.92; }
.btn-go svg { width: 28px; height: 28px; flex: none; }
.btn-go:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--go-bayang), 0 6px 14px rgb(255 107 61 / .25);
}

/* Kartu */
.kartu {
  background: var(--permukaan);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--bayang);
}
.kartu-sorot {
  position: relative;
  overflow: hidden;
  background: var(--ungu);
  color: var(--ungu-teks);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--bayang);
}
.kartu-sorot::after {
  content: "";
  position: absolute;
  top: -36px;
  right: -36px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgb(255 255 255 / .25);
  pointer-events: none;
}
.kartu-sorot svg { width: 40px; height: 40px; }
.sorot-ungu { background: var(--ungu); }
.sorot-teal { background: var(--teal); }

/* Chip, lencana */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ungu-lembut);
  color: var(--ungu-lembut-teks);
  font-weight: 600;
  cursor: pointer;
}
.chip:not([disabled]):hover { border-color: var(--ungu); }
.chip[aria-pressed="true"] { background: var(--ungu); color: var(--ungu-teks); }
.chip[disabled] { opacity: 0.55; cursor: default; }
.chip .rekor, .rekor { font-size: 12px; font-weight: 600; opacity: 0.75; }
.lencana {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--kuning);
  color: var(--kuning-teks);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* Bilah progres (PLAN-v2 §2) */
.bilah {
  height: 8px;
  border-radius: 999px;
  background: var(--ungu-lembut);
  overflow: hidden;
}
.bilah > div, .bilah > span {
  display: block;
  height: 100%;
  background: var(--ungu);
  border-radius: inherit;
}
.bilah-porsi { display: flex; gap: 4px; }
.bilah-porsi > * { height: 8px; border-radius: 999px; }
.bilah-porsi > :nth-child(1) { background: var(--teal); }
.bilah-porsi > :nth-child(2) { background: var(--ungu); }
.bilah-porsi > :nth-child(3) { background: var(--go); }

/* Stepper, daftar pemain, kode ruang */
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 2px solid var(--garis);
  border-radius: 50%;
  background: transparent;
  color: var(--teks);
  font-size: 20px;
  font-weight: 700;
}
.stepper > output, .stepper > span, .stepper > b, .stepper > strong {
  min-width: 3ch;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}
.daftar-pemain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.daftar-pemain > li, .daftar-pemain > .pemain {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.daftar-pemain .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.daftar-pemain .status { margin-left: auto; color: var(--redup); font-size: 13px; white-space: nowrap; }
.kode-ruang {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Kepala / profil (v1) */
.kepala { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 34px; line-height: 1; }
.nama-pemain { font-size: 17px; font-weight: 700; }
.gelar { font-size: 13px; opacity: 0.8; }
.streak { margin-left: auto; font-size: 15px; white-space: nowrap; }

.bilah-level {
  height: 8px;
  border-radius: 999px;
  background: var(--ungu-lembut);
  overflow: hidden;
  margin-top: 6px;
}
.bilah-level > div {
  height: 100%;
  background: var(--kuning);
  border-radius: inherit;
  transform-origin: left;
}

.baris-chip { display: flex; flex-wrap: wrap; gap: 8px; }

input[type="text"] {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  background: var(--permukaan);
  color: var(--teks);
}
details.profil > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
}
details.profil > .isi { padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }

/* Kisi hasil harian */
.kisi { font-size: 22px; letter-spacing: 3px; }

/* Layar main (v1) */
.atas-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hitung { font-weight: 700; }
.skor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--ungu-lembut);
  color: var(--ungu-lembut-teks);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.skor-chip.mana { background: var(--ungu); color: var(--ungu-teks); }

.bilah-waktu {
  height: 8px;
  border-radius: 999px;
  background: var(--ungu-lembut);
  overflow: hidden;
}
.bilah-waktu > div {
  height: 100%;
  background: var(--go);
  transform-origin: left;
}
.bilah-waktu.genting > div, .bilah-waktu > div.genting { background: var(--salah); }
/* Pengecualian gerak: bilah waktu TETAP berjalan (informasi waktu),
   juga saat pengguna meminta gerak dikurangi. */
.bilah-waktu > .jalan { animation: susut 12s linear forwards; }
@keyframes susut {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.pertanyaan { font-size: 18px; font-weight: 700; margin: 8px 0 16px; }

.opsi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.opsi > button {
  text-align: left;
  width: 100%;
  position: relative;
  background: transparent;
  border: 2px solid var(--garis);
  border-radius: 14px;
  color: var(--teks);
  padding: 12px 16px;
}
.opsi > button:not(:disabled):hover { border-color: var(--ungu); }
.opsi > button.benar { background: var(--benar); border-color: var(--benar); color: #fff; }
.opsi > button.salah { background: var(--salah); border-color: var(--salah); color: #fff; }

.poin-melayang {
  position: absolute;
  right: 12px;
  top: -10px;
  color: var(--benar-teks);
  font-weight: 700;
  pointer-events: none;
}
.ulang {
  font-size: 13px;
  opacity: 0.85;
  min-height: 44px;
}
.kilat {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--kuning);
  color: var(--kuning-teks);
  font-weight: 700;
}

/* Layar hasil (v1) */
.judul-hasil { font-size: 26px; text-align: center; }
.judul-hasil.menang { color: var(--benar-teks); }
.judul-hasil.kalah { color: var(--salah-teks); }
.merah { color: var(--salah-teks); }
.hijau { color: var(--benar-teks); }
.rincian { display: flex; flex-direction: column; gap: 10px; }
.rincian .soal { font-weight: 600; }
.rincian .baris-jawab { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.kolom-tombol { display: flex; flex-direction: column; gap: 10px; }

.stat { display: flex; justify-content: space-between; gap: 8px; }
.pesan { text-align: center; }
.kartu.galat { border: 2px solid var(--salah); }

/* === meja (K04) === */
/* Duel Meja: layar dibelah dua, separuh atas terputar untuk Pemain 2. */
.layar-meja {
  height: calc(100vh - 32px); /* cadangan browser tanpa dvh */
  height: calc(100dvh - 32px); /* #app ber-padding 16px atas-bawah */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.meja-setengah {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  overflow: hidden;
}
.meja-atas { transform: rotate(180deg); }
.meja-kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}
.meja-skor { font-weight: 700; white-space: nowrap; }
.meja-tanya { font-size: 16px; font-weight: 600; text-align: center; }
.meja-opsi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.meja-opsi > button {
  min-height: 52px;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  background: transparent;
  border: 2px solid var(--garis);
  border-radius: var(--radius-kecil);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.meja-opsi > button.terpilih {
  border-color: var(--ungu);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ungu) 45%, transparent);
}
.meja-opsi > button.redup { opacity: 0.5; }
.meja-opsi > button.benar {
  background: var(--benar);
  border-color: var(--benar);
  color: #fff;
  opacity: 1;
}
.meja-opsi > button.salah {
  background: var(--salah);
  border-color: var(--salah);
  color: #fff;
  opacity: 1;
}
.meja-status { min-height: 20px; text-align: center; font-size: 14px; font-weight: 700; }
.meja-tengah { display: flex; align-items: center; gap: 10px; padding: 2px 10px; }
.meja-tengah .bilah-waktu { flex: 1; }
.meja-garis { height: 1px; background: var(--garis); margin: 0 10px; }
.meja-akhir { align-items: center; text-align: center; gap: 10px; }
.meja-judul { font-size: 22px; }
.meja-ringkas { font-size: 14px; }
.meja-tombol-akhir { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Semua animasi lain hanya bila pengguna memperbolehkan gerak (PLAN-v2 §2). */
@media (prefers-reduced-motion: no-preference) {
  .btn-go { animation: denyut-go 2.4s ease-in-out infinite; }
  @keyframes denyut-go {
    0%, 100% { box-shadow: 0 6px 0 var(--go-bayang), 0 0 0 0 rgb(255 107 61 / .45); }
    50% { box-shadow: 0 6px 0 var(--go-bayang), 0 0 0 12px rgb(255 107 61 / 0); }
  }

  .kartu, .kartu-sorot { animation: pop 160ms ease; }
  @keyframes pop {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
  }

  button.benar { animation: denyut 250ms ease; }
  button.salah, button.getar { animation: getar 250ms ease; }
  @keyframes denyut {
    0% { scale: 1; }
    50% { scale: 1.03; }
    100% { scale: 1; }
  }
  @keyframes getar {
    0%, 100% { translate: 0 0; }
    20% { translate: -6px 0; }
    40% { translate: 6px 0; }
    60% { translate: -4px 0; }
    80% { translate: 4px 0; }
  }

  .poin-melayang { animation: terbang 600ms ease forwards; }
  @keyframes terbang {
    from { translate: 0 0; opacity: 1; }
    to { translate: 0 -18px; opacity: 0; }
  }

  .bilah-level > div { transition: transform 600ms ease; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Bilah waktu tetap berjalan (informasi waktu), tanpa transisi halus tambahan. */
  .bilah-waktu > .jalan {
    animation: susut 12s linear forwards !important;
  }
}

/* v3 beranda */
/* Kartu Duel (Kartu V02): tombol besar putih di atas latar ungu. */
.tombol-putih {
  background: #FFFFFF;
  color: #1A1736;
  border: none;
}
.tombol-putih:not(:disabled):hover { background: #F2F0FF; }
.tombol-putih:active { transform: translateY(2px); }

/* Duel per Topik (Kartu V02): baris pilihan lawan (chip segmented). */
.segmen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.segmen .chip {
  flex: 1 1 auto;
  justify-content: center;
  padding: 6px 10px;
  font-size: 13px;
}

/* Duel per Topik: kisi 2 kolom ubin topik (garis kiri = warna topik, dari style inline). */
.kisi-topik {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.ubin-topik {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 88px;
  padding: 10px 12px;
  border: 2px solid var(--garis);
  border-left: 6px solid var(--ungu);
  border-radius: var(--radius-kecil);
  background: transparent;
  text-align: left;
}
.ubin-topik:not(:disabled):hover { border-color: var(--ungu); }
.ubin-topik-judul {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ubin-topik-sub { font-size: 12px; line-height: 1.3; }

/* v3.1 atur soal terlihat (12 Okt: kartu "Mau berapa soal?" di bawah GO) */
.atur-soal { margin-top: 12px; padding: 14px 16px; }
.atur-judul { font-weight: 800; font-size: 16px; margin: 0 0 10px; }
.atur-chip { flex-wrap: wrap; gap: 8px; }
.atur-detail { margin-top: 12px; }
.atur-tingkat {
  list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  min-height: 44px; padding: 8px 12px; border-radius: 14px; cursor: pointer; font-size: 14px;
  border: 1.5px solid color-mix(in srgb, var(--teks) 22%, transparent);
}
.atur-tingkat::-webkit-details-marker { display: none; }
.atur-tingkat:hover { border-color: var(--ungu); }
.atur-label { font-weight: 700; }
.atur-ubah { margin-left: auto; font-weight: 800; background: var(--ungu); color: var(--ungu-teks); padding: 4px 14px; border-radius: 999px; }
.atur-ubah::after { content: 'Ubah ›'; }
.atur-detail[open] .atur-ubah::after { content: 'Tutup ✕'; }
/* panel lengkap terbuka → sembunyikan judul + chip cepat agar tidak dobel */
.atur-soal:has(.atur-detail[open]) > .atur-judul,
.atur-soal:has(.atur-detail[open]) > .atur-chip { display: none; }
.atur-soal:has(.atur-detail[open]) .atur-detail { margin-top: 0; }

/* v3.2 (12 Okt): topik soal di kartu atur */
.atur-judul-topik { margin-top: 14px; }
/* topik soal: satu baris geser-samping (hemat tinggi beranda) */
.atur-topik { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.atur-topik .chip { flex: none; scroll-snap-align: start; white-space: nowrap; }