/* Rute Pulang — tampilan.
   Papan gelap, petak jalan terang: penghalang langsung kebaca tanpa harus
   dibaca labelnya. Satu momen ramai saja (saat sampai rumah), sisanya diam. */

:root {
  color-scheme: dark;

  --langit: #161d38;      /* langit senja */
  --langit-atas: #24305a;
  --papan: #232c4d;       /* bingkai papan */
  --petak: #ecdcb8;       /* jalan kampung yang kena lampu */
  --petak-gelap: #d9c49a;
  --rintang: #2f4739;     /* pohon & kandang */
  --rute: #ef5d8f;        /* pita rute */
  --rute-tua: #c73c6d;
  --bintang: #f7c948;
  --rumah: #48c4a8;
  --tinta: #101728;
  --kabur: #a8b0cd;
  --kertas: #f3ece0;

  --petak-ukuran: 46px;   /* diatur ulang oleh JS sesuai lebar layar */
  --sela: 6px;
  --lengkung: 14px;
  /* Satu jarak tepi dipakai badan halaman dan semua kotak di dalamnya, supaya
     papan, pemilih rute, dan tombol berbaris di garis yang sama. */
  --tepi: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--kertas);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--langit-atas) 0%, var(--langit) 58%, #0f1428 100%)
    fixed;
  padding: 0 var(--tepi) calc(28px + env(safe-area-inset-bottom));
}

.lewati {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--kertas);
  color: var(--tinta);
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  z-index: 20;
}
.lewati:focus { left: 14px; }

/* ---------- kepala ---------- */

/* Kepala halaman sengaja pendek di ponsel: tinggi yang dipakai judul adalah
   tinggi yang hilang dari papan. Judul dua kata jadi satu baris, anak
   kalimatnya disembunyikan (tetap terbaca pembaca layar lewat .khusus-baca). */
.atas {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 56px 6px;
  position: relative;
  text-align: center;
}

h1 {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
h1 span {
  color: var(--bintang);
  font-style: italic;
}

/* Terbaca pembaca layar, tidak memakan tinggi layar. */
.khusus-baca {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.atas__sub {
  margin: 4px 0 0;
  color: var(--kabur);
  font-size: 13px;
  line-height: 1.4;
}

.ikon {
  position: absolute;
  top: 6px;
  right: 0;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  background: transparent;
  color: var(--kabur);
  border: 1.5px solid #3a456e;
  border-radius: 12px;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.ikon__gambar { font-size: 15px; line-height: 1; }
.ikon[aria-pressed="true"] { color: var(--bintang); border-color: var(--bintang); }

/* ---------- pemilih rute ---------- */

/* Urutan di ponsel: papan dulu (order 1), pemilih rute menyusul (order 2).
   Di layar lebar keduanya berdampingan, lihat @media (min-width: 900px). */
main {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.main { order: 1; }
.pilih { order: 2; }
.ajar { order: 3; }

h2 {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
}

/* ---------- pemilih rute yang bisa dilipat ---------- */

.pilih__lipat {
  background: #1a2240;
  border: 1.5px solid #333d64;
  border-radius: 16px;
  padding: 0 var(--tepi);
}
.pilih__ringkas {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;   /* sasaran sentuh penuh */
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
}
.pilih__ringkas::-webkit-details-marker { display: none; }
/* Panah lipat digambar sendiri supaya arahnya ikut keadaan <details>. */
.pilih__ringkas::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--kabur);
  border-bottom: 2.5px solid var(--kabur);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.pilih__lipat[open] .pilih__ringkas::after { transform: rotate(-135deg); }
.pilih__ringkas h2 { font-size: 17px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pilih__ringkas:focus-visible { outline: 3px solid var(--bintang); outline-offset: -3px; border-radius: 14px; }

.pilih__maju { margin: 0; font-size: 12px; font-weight: 400; color: var(--kabur); font-family: inherit; }

.pilih__daftar {
  display: grid;
  /* 6 kolom butuh >=44px per petak; di bawah itu turun sendiri jadi 4 kolom. */
  grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
  gap: 7px;
  margin: 0 0 var(--tepi);
  padding: 0;
  list-style: none;
}

@media (max-width: 359px) {
  .pilih__daftar { grid-template-columns: repeat(4, 1fr); }
  /* Di 320px, ruang dikembalikan ke papan supaya petak 6x6 tetap >=44px. */
  :root { --sela: 4px; --tepi: 9px; }
  .atas { padding-inline: 52px; }
  h1 { font-size: 21px; }
}

.petak-level {
  position: relative;
  width: 100%;
  min-height: 46px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px 2px;
  background: #1c2442;
  color: var(--kertas);
  border: 1.5px solid #39446d;
  border-radius: 11px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.petak-level:hover { border-color: var(--rute); }
/* Hanya rute yang sudah selesai menampilkan angka rekor. Yang belum selesai
   tidak lagi menulis "belum" — keadaannya sudah ada di aria-label tombolnya,
   dan teks 9px itu cuma bikin sesak di ponsel. */
.petak-level__tanda { font-size: 9px; color: var(--kabur); line-height: 1; }
.petak-level__tanda:empty { display: none; }
.petak-level[aria-current="true"] {
  background: var(--rute);
  border-color: var(--rute);
  color: #fff;
}
.petak-level[aria-current="true"] .petak-level__tanda { color: #ffe3ee; }
.petak-level[data-selesai="ya"] { border-color: var(--rumah); }
.petak-level[data-selesai="ya"] .petak-level__tanda { color: var(--rumah); }
.petak-level[aria-current="true"][data-selesai="ya"] .petak-level__tanda { color: #ffe3ee; }

.pilih__harian { margin-top: 12px; }
.pilih__catatan { margin: 7px 0 0; font-size: 12px; color: var(--kabur); line-height: 1.5; }

/* ---------- papan ---------- */

/* Papan dan perkakasnya satu kolom; catatan peta (order 5) pindah ke bawah
   papan supaya panjang-pendeknya tidak menggeser papan turun. */
.main {
  display: grid;
  gap: 8px;
}
.main__kepala { order: 1; text-align: center; }
.skor { order: 2; }
.papan__bungkus { order: 3; }
.tombol-baris { order: 4; }
.main__catatan { order: 5; }
.pindah { order: 6; }

.main__kepala {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.main__urut {
  margin: 0;
  font-size: 12px;
  color: var(--kabur);
  letter-spacing: 0.04em;
}
.main__kepala h2 { font-size: 19px; }
.main__catatan {
  margin: 4px auto 0;
  max-width: 44ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kabur);
  text-align: center;
}

/* Penghitung menempel tepat di atas papan: satu baris tipis, bukan tiga kartu
   tebal, supaya papan tidak terdorong ke bawah lipatan layar. */
.skor {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
.skor__butir {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 11px;
  background: #1b2340;
  border: 1.5px solid #333d64;
  border-radius: 999px;
  text-align: center;
}
.skor__butir[hidden] { display: none; }
.skor__angka { font-size: 16px; font-weight: 700; line-height: 1.1; }
.skor__label { font-size: 11px; color: var(--kabur); }
.skor__butir--rekor .skor__angka { color: var(--rumah); }
.skor__butir.berdenyut { animation: denyut 0.4s ease; }

@keyframes denyut {
  50% { transform: scale(1.09); border-color: var(--bintang); }
}

.papan__bungkus { display: grid; justify-items: center; gap: 7px; }

.papan {
  display: grid;
  gap: var(--sela);
  padding: var(--sela);
  background: linear-gradient(180deg, #2a3358, var(--papan));
  border: 2px solid #3c4877;
  border-radius: 20px;
  touch-action: manipulation;
}
@media (max-width: 359px) {
  .papan { gap: 4px; padding: 5px; border-radius: 16px; }
}

.papan:focus-visible {
  outline: 3px solid var(--bintang);
  outline-offset: 4px;
}

.petak {
  position: relative;
  width: var(--petak-ukuran);
  height: var(--petak-ukuran);
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--petak);
  border: none;
  border-radius: 9px;
  font: inherit;
  color: var(--tinta);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.petak svg { display: block; width: 78%; height: 78%; overflow: visible; }
.petak:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: -3px;
  z-index: 3;
}

/* penghalang: pohon/kandang, jelas beda tekstur dari jalan */
.petak[data-jenis="rintang"] {
  background: var(--rintang);
  cursor: not-allowed;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}

/* petak yang sudah jadi bagian rute */
.petak[data-rute="ya"] { background: var(--petak-gelap); }

.petak__pita {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.petak__pita i {
  position: absolute;
  background: var(--rute);
  border-radius: 3px;
}
/* batang pita ke tiap arah, digambar dari tengah petak */
.petak__pita i.p-U { left: 50%; top: -5px; width: 10px; height: 55%; transform: translateX(-50%); }
.petak__pita i.p-D { left: 50%; bottom: -5px; width: 10px; height: 55%; transform: translateX(-50%); }
.petak__pita i.p-L { top: 50%; left: -5px; height: 10px; width: 55%; transform: translateY(-50%); }
.petak__pita i.p-R { top: 50%; right: -5px; height: 10px; width: 55%; transform: translateY(-50%); }
.petak__pita i.p-titik {
  left: 50%; top: 50%;
  width: 13px; height: 13px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ujung rute sekarang */
.petak[data-kepala="ya"] .petak__pita i { background: var(--rute-tua); }
.petak[data-kepala="ya"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2.5px dashed var(--rute-tua);
  border-radius: 12px;
  animation: kedip 1.8s ease-in-out infinite;
}

@keyframes kedip {
  50% { opacity: 0.35; }
}

/* bintang */
.bintang-gambar { transition: transform 0.25s ease, opacity 0.25s ease; }
.petak[data-ambil="ya"] .bintang-gambar { transform: scale(0.42); opacity: 0.32; }
.petak[data-baru="ya"] .bintang-gambar { animation: ambil 0.45s ease; }

@keyframes ambil {
  0% { transform: scale(1); }
  40% { transform: scale(1.5) rotate(18deg); }
  100% { transform: scale(0.42); }
}

/* tokoh */
.tokoh { transition: transform 0.22s ease; }
.petak[data-jalan="ya"] .tokoh { animation: melangkah 0.4s ease; }

@keyframes melangkah {
  25% { transform: translateY(-14%) rotate(-5deg); }
  60% { transform: translateY(0) rotate(4deg); }
}

/* rumah menyala saat semua bintang beres */
.petak[data-buka="ya"] { box-shadow: inset 0 0 0 3px var(--rumah), 0 0 16px rgba(72, 196, 168, 0.55); }

.petak.tolak { animation: geleng 0.3s ease; }

@keyframes geleng {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.petak[data-saran="ya"]::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 3px solid var(--bintang);
  border-radius: 7px;
  animation: kedip 1s ease-in-out infinite;
}

/* Kabar rute (.lapor) naik ke atas penjelasan cara main: yang berubah tiap
   langkah harus dekat papan, yang statis boleh di bawah. */
.papan__bantuan {
  order: 2;
  margin: 0;
  max-width: 42ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--kabur);
  text-align: center;
}

.lapor {
  order: 1;
  margin: 0;
  min-height: 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--bintang);
}
.lapor[data-nada="salah"] { color: #ff9bb6; }
.lapor[data-nada="senang"] { color: var(--rumah); }

/* ---------- tombol ---------- */

.tombol-baris {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.tombol {
  flex: 1 1 auto;
  min-height: 46px;
  min-width: 44px;
  padding: 11px 15px;
  background: #2b3560;
  color: var(--kertas);
  border: 1.5px solid #46528a;
  border-radius: 13px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tombol:hover { background: #35407a; }
.tombol:disabled { opacity: 0.42; cursor: default; }
.tombol--garis { background: transparent; border-color: var(--bintang); color: var(--bintang); }
.tombol--garis:hover { background: rgba(247, 201, 72, 0.14); }
.tombol--isi { background: var(--rute); border-color: var(--rute); color: #fff; }
.tombol--isi:hover { background: var(--rute-tua); }
.tombol--kecil { font-size: 13px; min-height: 44px; }

:where(button, a):focus-visible {
  outline: 3px solid var(--bintang);
  outline-offset: 3px;
}

.pindah { display: flex; gap: 8px; margin-top: 8px; }

/* ---------- cara main ---------- */

.ajar {
  padding: 18px;
  background: #1a2240;
  border: 1.5px solid #333d64;
  border-radius: 16px;
}
.ajar__daftar {
  margin: 12px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
  font-size: 14px;
  line-height: 1.55;
  color: #dbe1f2;
}
.ajar__daftar b { color: var(--kertas); }
.ajar__tenang {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #333d64;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--kabur);
}

/* ---------- sampai rumah ---------- */

.sampai {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 14, 30, 0.78);
}
.sampai[hidden] { display: none; }

.sampai__kartu {
  width: min(380px, 100%);
  padding: 26px 22px;
  background: #1d2648;
  border: 2px solid var(--rumah);
  border-radius: 22px;
  text-align: center;
  animation: naik 0.32s ease;
}

@keyframes naik {
  from { transform: translateY(14px); opacity: 0; }
}

.sampai__lampu { margin: 0 0 6px; }
.sampai__kartu h2 { font-size: 26px; }
.sampai__rinci {
  margin: 10px 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #dbe1f2;
}
.sampai__tombol { display: grid; gap: 8px; }
.sampai__tutup {
  margin-top: 12px;
  padding: 10px;
  min-height: 44px;
  width: 100%;
  background: none;
  border: none;
  color: var(--kabur);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- bawah ---------- */

.bawah {
  max-width: 560px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--kabur);
}
.bawah a { color: var(--bintang); }

/* ---------- layar lebar ---------- */

/* Layar sedang ke atas: ruang sudah longgar, judul boleh besar lagi. */
@media (min-width: 600px) {
  :root { --tepi: 20px; }
  .atas { padding: 20px 64px 8px; }
  h1 { font-size: 38px; line-height: 0.95; }
  h1 span { display: block; }
  /* Ruang sudah cukup: anak kalimat judul kembali terlihat. */
  .atas__sub.khusus-baca {
    position: static;
    width: auto;
    height: auto;
    margin: 10px 0 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-size: 15px;
  }
  .ikon { top: 16px; }
  main { gap: 18px; }
  .main { gap: 12px; }
  .main__catatan { font-size: 14px; }
}

@media (min-width: 900px) {
  body { padding-inline: 24px; }
  .atas, main, .bawah { max-width: 980px; }
  main {
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
    gap: 26px;
  }
  .main { grid-row: span 2; order: 2; }
  .pilih { order: 1; }
  .ajar { order: 3; }
  .pilih__daftar { grid-template-columns: repeat(4, 1fr); }
  /* Di sini pemilih rute selalu terbuka; panah lipatnya tidak ada gunanya. */
  .pilih__lipat { background: none; border: none; padding: 0; }
  .pilih__ringkas { cursor: default; }
  .pilih__ringkas::after { display: none; }
  .pilih__ringkas h2 { font-size: 21px; }
}

/* ---------- gerak seperlunya ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}