/* Rimba Loncat — tata letak.
 *
 * Tegak dan satu tangan. Kendalinya SENTUH, bukan papan ketik: tiga bantalan
 * besar di bawah layar, semuanya lewat 44px dengan jarak lebar.
 *
 * Warna ditulis PEKAT, bukan gradien di bawah opacity. Alasannya terukur:
 * tombol gradien di word-duel ternyata cuma 4,78:1 di ujung gelapnya padahal
 * warna mentahnya terbaca 9,45:1 — yang mengikat ujung gelapnya. Warna pekat
 * tidak punya ujung gelap yang bisa berbeda dari yang tertulis, jadi angka di
 * komentar di bawah ini benar-benar angka yang dilukis layar.
 */

:root {
  /* --ink: ungu nila tua. Diperiksa terhadap SEMUA permainan lain di kumpulan
     ini dan tidak ada yang memakainya — aturannya satu warna satu permainan,
     dijaga tes "tidak ada dua permainan berbagi --ink". */
  --ink:        #241b4e;
  --ink-lembut: #4a3f72;   /* 8,18:1 di atas --krem */
  --krem:       #f6efe2;
  --panel:      #efe4d0;
  --panel-tepi: #d9caab;
  --chip:       #e6dcc8;
  --utama:      #4e3391;   /* teks putih di atasnya 9,52:1 */
  --utama-tekan:#3d2873;
  --bahaya:     #9d2235;   /* 6,77:1 di atas --krem, putih di atasnya 7,74:1 */
  --langit-1:   #79b7e8;
  --langit-2:   #bfe0f2;
  --r-besar: 18px;
  --r-kecil: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Gulir mendatar tidak pernah benar; kalau ada yang meluber, itu bug yang
     harus diperbaiki, bukan digulir. */
  overflow-x: hidden;
}

body {
  font-family: ui-rounded, "Trebuchet MS", "Segoe UI", sans-serif;
  background: var(--krem);
  color: var(--ink);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.vh {
  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;
}

/* Tautan lewat: muncul hanya saat difokus papan ketik. */
.lewati {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  padding: 14px 20px;
  border-radius: 0 0 var(--r-kecil) 0;
  text-decoration: none;
  font-weight: 700;
}
.lewati:focus { left: 0; }

/* ------------------------------------------------------------------ atas -- */

.atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  flex-wrap: wrap;
}

/* min-height 44px DAN padding tegak yang cukup. Catatan penting: di kumpulan
   ini pernah terbukti min-height yang memegang angka 44, bukan padding-nya —
   jadi keduanya ditulis dan tesnya mengukur kotak yang benar-benar dirender,
   bukan salah satu deklarasinya. */
.balik, .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: var(--r-kecil);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid var(--panel-tepi);
  background: var(--chip);
  color: var(--ink);          /* 11,50:1 */
  cursor: pointer;
  font-family: inherit;
}
.balik:hover, .chip:hover { background: #dbceb4; }
.balik:focus-visible, .chip:focus-visible,
.utama:focus-visible, .kedua:focus-visible,
.pad:focus-visible, .benih:focus-visible {
  outline: 3px solid var(--utama);
  outline-offset: 2px;
}

/* Suara nyala ditandai BENTUK (ikon berubah) dan KATA, bukan cuma warna. */
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;               /* 15,65:1 */
  border-color: var(--ink);
}

/* ----------------------------------------------------------------- judul -- */

.rimba {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 12px 28px;
}

.judul {
  margin: 6px 0 2px;
  font-size: clamp(30px, 10vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.judul span:first-child { color: var(--utama); }

.slogan {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-lembut);   /* 8,18:1 */
}

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

.papan { margin: 0; }

.hud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.hud-kotak {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 12px;
  background: #fff;
  border: 2px solid var(--panel-tepi);
  border-radius: var(--r-kecil);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--ink);          /* 15,65:1 di atas putih */
}
.hud-angka { font-size: 16px; }
.hud-ikon { color: var(--utama); font-size: 13px; }

/* Ketahanan: hati PENUH vs hati KOSONG berbeda BENTUK (isi vs garis), jadi
   keadaannya terbaca tanpa membedakan warna sama sekali. Angkanya juga ada
   di sebelahnya. */
.hud-hati { letter-spacing: 2px; font-size: 15px; color: var(--bahaya); }

.layar {
  position: relative;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: var(--r-besar);
  overflow: hidden;
  background: var(--langit-2);
  /* Tegak. Tingginya ikut lebar supaya tidak pernah meluber di 320px. */
  aspect-ratio: 39 / 50;
}

#kanvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Seni Kenney itu bitmap; biarkan penghalus bawaan bekerja karena kita
     menggambar pada ukuran aslinya atau lebih kecil, bukan diperbesar. */
  touch-action: none;
}

/* ----------------------------------------------------------------- tirai -- */

.tirai {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(36, 27, 78, 0.93);
}
.tirai[hidden] { display: none; }

.tirai-isi {
  width: 100%;
  max-width: 300px;
  text-align: center;
  color: #fff;
}
.tirai-judul {
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 800;
}
.tirai-teks {
  margin: 0 0 14px;
  font-size: 14.5px;
  /* Putih penuh di atas tirai ungu tua: rasionya jauh di atas 4,5. */
  color: #fff;
}
.tirai-benih {
  margin: 0 0 12px;
  font-size: 14px;
  color: #fff;
}

.benih-baris {
  display: block;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  text-align: left;
}
.benih {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  margin: 0 0 12px;
  border-radius: var(--r-kecil);
  border: 2px solid var(--panel-tepi);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;   /* 16px supaya iOS tidak memperbesar layar saat difokus */
}

.utama, .kedua {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: var(--r-kecil);
  border: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.utama {
  background: var(--utama);
  color: #fff;               /* 9,52:1 — warna pekat, bukan gradien */
}
.utama:hover { background: var(--utama-tekan); }
.kedua {
  margin-top: 9px;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;    /* kontras penuh di atas tirai */
}
.kedua:hover { background: rgba(255, 255, 255, 0.16); }

/* --------------------------------------------------------------- ringkas -- */

.ringkas {
  margin: 9px 0 0;
  padding: 10px 13px;
  background: var(--panel);
  border: 2px solid var(--panel-tepi);
  border-radius: var(--r-kecil);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);          /* 12,43:1 di atas --panel */
  min-height: 44px;
}

/* --------------------------------------------------------------- kendali -- */

.kendali {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 10px;
  margin: 12px 0 0;
}

/* 76px tinggi: jauh di atas lantai 44px, karena ini dipakai sambil bergerak
   dan ibu jari tidak presisi. min-height DAN tinggi isi sama-sama cukup. */
.pad {
  min-height: 76px;
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--r-besar);
  border: 3px solid var(--ink);
  background: var(--chip);
  color: var(--ink);          /* 11,50:1 */
  font-family: inherit;
  font-size: 25px;
  font-weight: 800;
  cursor: pointer;
  /* Tanpa ini, menahan tombol di ponsel memunculkan menu salin/tempel dan
     menggulir halaman — dua-duanya mematikan permainan aksi. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pad-loncat {
  background: var(--utama);
  color: #fff;               /* 9,52:1 */
  border-color: var(--utama-tekan);
}
.pad-teks { font-size: 13px; font-weight: 800; letter-spacing: 0.3px; }

/* Ditekan: ditandai BENTUK (mengecil + tepi tebal), bukan cuma warna. */
.pad.tekan {
  transform: scale(0.95);
  border-width: 5px;
}

/* ---------------------------------------------------------------- aturan -- */

.aturan {
  margin: 22px 0 0;
  padding: 15px 17px;
  background: var(--panel);
  border: 2px solid var(--panel-tepi);
  border-radius: var(--r-besar);
}
.aturan h2 { margin: 0 0 9px; font-size: 19px; }
.aturan ul { margin: 0; padding-left: 20px; }
.aturan li { margin: 0 0 8px; font-size: 14.5px; color: var(--ink); }
.aturan li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ kaki -- */

.kaki {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 12px 30px;
  font-size: 13px;
  color: var(--ink-lembut);   /* 8,18:1 */
}
.kaki p { margin: 0 0 5px; }
.kaki strong { color: var(--ink); }

/* --------------------------------------------------------- gerak dikurangi -- */

/* Yang bergerak di sini: getaran layar saat kena, dan pengecilan bantalan.
   Permainannya sendiri TIDAK dihentikan — menghentikan permainan aksi bukan
   menghormati preferensi, itu menghapus permainannya. Yang dimatikan cuma
   hiasannya. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pad.tekan { transform: none; }
}

/* ------------------------------------------------------------------ 320px -- */

@media (max-width: 360px) {
  .rimba { padding: 0 8px 22px; }
  .judul { font-size: 27px; }
  .hud-kotak { padding: 7px 9px; font-size: 14px; }
  .hud-angka { font-size: 15px; }
  .kendali { gap: 7px; }
  .pad { font-size: 22px; min-height: 72px; }
  .pad-teks { font-size: 12px; }
  .atas { padding: 8px; gap: 8px; }
  .balik, .chip { padding: 11px 13px; font-size: 14px; }
}