/* Tebak Kata Gantung
   Palet senja di atas sawah: langit biru tua, kertas layang-layang krem,
   benang kuning. Tidak ada merah "bahaya" kecuali untuk huruf yang salah. */

:root {
  --langit:   #16233D;
  --panel:    #1F3054;
  --panel-2:  #27395F;
  --kertas:   #F3EADA;
  --benang:   #F2B705;
  --pandan:   #4FB286;
  --bata:     #D2402A;
  --redup:    #9AA9C4;

  --r: 10px;
  --pad: 10px;          /* dikunci: dasar hitungan papan huruf di 320px */
  --sela: 5px;
  --tinggi-tombol: 46px; /* > 44px minimum sasaran sentuh */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
  background: var(--langit);
  color: var(--kertas);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-width: 560px;
  margin-inline: auto;
  overflow-x: hidden;
}

/* hanya untuk pembaca layar */
.lihat-saja {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--benang); color: var(--langit);
  padding: 10px 14px; border-radius: 0 0 var(--r) 0; z-index: 10;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; top: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--benang);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 6px;
}

.top h1 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
}

.back, .tautan {
  color: var(--redup);
  text-decoration: none;
  font-size: .82rem;
  background: none; border: 0; padding: 6px 4px;
  font-family: inherit; cursor: pointer;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.back:hover, .tautan:hover { color: var(--kertas); }

.ikon {
  min-width: 44px; min-height: 44px;
  background: var(--panel); color: var(--redup);
  border: 1px solid var(--panel-2);
  border-radius: var(--r);
  font-size: 1rem; cursor: pointer;
}
.ikon[aria-pressed="true"] { color: var(--langit); background: var(--benang); border-color: var(--benang); }

/* ------------------------------------------------------- pilih tema */

.sambutan {
  margin: 4px 0 18px;
  color: var(--redup);
  font-size: .92rem;
  max-width: 46ch;
}

.judul-kecil {
  margin: 0 0 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--redup);
}

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

   Setiap kelas di bawah yang menyetel `display` DAN menempel pada elemen
   ber-atribut `hidden` di index.html wajib punya penjaga `[hidden]` sendiri.
   Deklarasi penulis mengalahkan `[hidden]{display:none}` bawaan browser -
   persis cara tirai hasil dulu menutupi seluruh halaman sejak awal. */

.mode { margin: 0 0 18px; }

.mode-set {
  border: 1px solid var(--panel-2);
  border-radius: var(--r);
  padding: 10px 12px 12px;
  margin: 0;
  display: grid;
  gap: 8px;
}
.mode-set[hidden] { display: none; }

.mode-set legend { padding: 0 4px; }

.mode-opsi {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--tinggi-tombol);
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--panel-2);
  border-left: 4px solid var(--panel-2);
  border-radius: var(--r);
  cursor: pointer;
}
.mode-opsi input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--benang); }
.mode-opsi:has(input:checked) { border-left-color: var(--benang); background: var(--panel-2); }
.mode-opsi:has(input:focus-visible) { outline: 3px solid var(--benang); outline-offset: 2px; }
.mode-teks { display: grid; gap: 2px; }
.mode-teks b { font-size: .94rem; }
.mode-teks small { color: var(--redup); font-size: .78rem; }

.nama {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--panel);
  border-radius: var(--r);
  border-left: 4px solid var(--benang);
}
.nama[hidden] { display: none; }

.nama-ket { margin: 0; font-size: .78rem; color: var(--redup); max-width: 46ch; }

.nama-baris { display: grid; gap: 4px; margin: 0; }
.nama-baris label { font-size: .78rem; color: var(--redup); }
.nama-baris input {
  min-height: var(--tinggi-tombol);
  padding: 0 10px;
  font: inherit;
  color: var(--kertas);
  background: var(--langit);
  border: 1px solid var(--panel-2);
  border-radius: 8px;
  width: 100%;
}

.deck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.deck-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  text-align: left;
  background: var(--panel);
  color: var(--kertas);
  border: 1px solid var(--panel-2);
  border-left: 4px solid var(--benang);
  border-radius: var(--r);
  padding: 12px;
  min-height: 60px;
  font: inherit;
  cursor: pointer;
}
.deck-btn:hover { background: var(--panel-2); }
.deck-btn b { font-size: 1rem; }
.deck-btn small { grid-column: 1; color: var(--redup); font-size: .78rem; }
.deck-btn .rekor {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: .72rem;
  color: var(--benang);
  text-align: right;
  line-height: 1.3;
}

.catatan {
  margin: 18px 0 0;
  font-size: .76rem;
  color: var(--redup);
  border-top: 1px solid var(--panel-2);
  padding-top: 10px;
  max-width: 46ch;
}

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

.bar-atas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deck-aktif { margin: 0; font-size: .8rem; color: var(--benang); font-weight: 700; }

/* ------------------------------------------------- giliran (mode berdua) */

.giliran { margin: 8px 0 10px; }
.giliran[hidden] { display: none; }

.pemain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pemain li {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  min-height: 56px;
  background: var(--panel);
  border: 1px solid var(--panel-2);
  border-top: 4px solid var(--panel-2);
  border-radius: var(--r);
  min-width: 0;
}
/* Giliran ditandai rangka tebal + panah + teks, tidak pernah warna saja. */
.pemain li.kini {
  background: var(--panel-2);
  border-top-color: var(--benang);
  box-shadow: inset 0 0 0 1px var(--benang);
}
.pemain .nama-pemain {
  font-weight: 700;
  font-size: .86rem;
  overflow-wrap: anywhere;
}
.pemain li.kini .nama-pemain::before {
  content: "\25B8 ";
  color: var(--benang);
}
.pemain .angka { font-size: 1.15rem; font-weight: 700; color: var(--benang); }
.pemain .tanda { font-size: .7rem; color: var(--redup); text-transform: uppercase; letter-spacing: .04em; }
.pemain li.kini .tanda { color: var(--benang); }

.giliran-teks {
  margin: 6px 0 0;
  text-align: center;
  font-size: .84rem;
  color: var(--kertas);
  min-height: 1.2em;
}

.panel-langit {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-radius: var(--r);
  padding: 6px 6px 8px;
  margin: 4px 0 12px;
}

#langit { display: block; width: 100%; height: auto; }

#layang { transition: transform .45s cubic-bezier(.34, 1.2, .64, 1); }

.sisa { margin: 4px 0 0; text-align: center; font-size: .82rem; color: var(--redup); }
.sisa b { color: var(--kertas); }

/* titik sisa tebakan: bentuk + jumlah, bukan cuma warna */
.pips {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px;
}
.pips li {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--benang);
  border: 1px solid var(--benang);
}
.pips li.habis { background: transparent; border-color: var(--redup); opacity: .45; }

/* -------------------------------------------------------- kata */

/* --lebar-huruf disetel app.js dari kata terpanjang, supaya satu kata utuh
   selalu muat dalam satu baris di 320px tanpa terpotong di tengah. */
.kata {
  --lebar-huruf: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin: 2px 0 8px;
  min-height: 46px;
}

.sela-kata { width: 100%; height: 0; }

.huruf {
  width: var(--lebar-huruf);
  height: 34px;
  margin: 0 2px;
  font-size: clamp(.8rem, calc(var(--lebar-huruf) * .62), 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0;
  border-bottom: 3px solid var(--panel-2);
  color: var(--kertas);
}
.huruf.isi { border-bottom-color: var(--pandan); }
.huruf.bongkar { color: var(--bata); border-bottom-color: var(--bata); }

@keyframes muncul {
  from { transform: translateY(-6px) scale(.8); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.huruf.baru { animation: muncul .28s ease-out; }

.hint {
  margin: 0 0 10px;
  padding: 9px 11px;
  background: var(--panel);
  border-left: 3px solid var(--benang);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .86rem;
  color: var(--kertas);
}
.hint::before {
  content: "Petunjuk. ";
  color: var(--benang);
  font-weight: 700;
  font-size: .78rem;
}

.kabar {
  margin: 0 0 8px;
  min-height: 1.2em;
  font-size: .84rem;
  text-align: center;
  color: var(--redup);
}
.kabar.salah { color: var(--bata); }
.kabar.benar { color: var(--pandan); }

/* ---------------------------------------------- PAPAN HURUF (320px)

   Lebar layar 320 - padding badan (10 x 2) = 300px tersedia.
   7 kolom, 6 sela x 5px = 30px  ->  270 / 7 = 38.5px per tombol.
   Tinggi dikunci 46px supaya tetap di atas ambang sentuh 44px.
   26 huruf mengisi baris 7 / 7 / 7 / 5; lima terakhir ditengahkan
   lewat margin otomatis pada anak pertama baris terakhir.        */

.papan {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sela);
  margin: 0 0 12px;
}

.papan button {
  min-width: 0;                      /* biar grid boleh menyusut, tanpa luber */
  height: var(--tinggi-tombol);
  padding: 0;
  font: 700 1.02rem/1 inherit;
  font-family: inherit;
  color: var(--kertas);
  background: var(--panel-2);
  border: 1px solid #32467096;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease;
}
.papan button:active:not(:disabled) { transform: scale(.94); }

/* huruf ke-22 (awal baris terakhir) ditengahkan: sisa 5 tombol dari 7 kolom */
.papan button:nth-child(22) { grid-column: 2; }

/* status: warna + simbol + teks tersembunyi, tak pernah warna saja */
.papan button.benar {
  background: var(--pandan);
  color: #08110A;
  border-color: var(--pandan);
}
.papan button.benar::after { content: " \2713"; }

.papan button.salah {
  background: transparent;
  color: var(--redup);
  border-color: var(--bata);
  border-style: dashed;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.papan button:disabled { cursor: default; }

/* --------------------------------------------------- jawab kata utuh */

.jawab {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 11px;
  background: var(--panel);
  border-radius: var(--r);
  border-left: 3px solid var(--benang);
}
.jawab[hidden] { display: none; }

.jawab > label { font-size: .82rem; color: var(--kertas); font-weight: 700; }

.jawab-baris { display: flex; gap: 6px; }
.jawab-baris input {
  flex: 1;
  min-width: 0;
  min-height: var(--tinggi-tombol);
  padding: 0 10px;
  font: inherit;
  color: var(--kertas);
  background: var(--langit);
  border: 1px solid var(--panel-2);
  border-radius: 8px;
  text-transform: uppercase;
}
.jawab-baris button { flex: none; }

.jawab-ket { margin: 0; font-size: .74rem; color: var(--redup); }

/* ------------------------------------------------------------ skor */

.skor {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--panel-2);
  padding-top: 10px;
  font-size: .82rem;
}
/* Mode berdua menyembunyikan blok skor solo lewat atribut `hidden`, jadi ia
   butuh penjaga yang sama dengan tirai. */
.skor[hidden] { display: none; }
.skor p { margin: 0; }
.skor-label { color: var(--redup); }
.skor b { color: var(--benang); font-size: 1rem; }

/* ----------------------------------------------------------- hasil */

.tirai {
  position: fixed; inset: 0;
  background: #0B1426E6;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  z-index: 20;
}

/* WAJIB. `display:flex` di atas adalah deklarasi penulis, jadi ia MENGALAHKAN
   `[hidden]{display:none}` bawaan browser. Tanpa baris ini, tirai hasil yang
   ditandai `hidden` di index.html tetap terlukis menutupi seluruh halaman
   sejak awal: tidak ada satu pun tombol dek yang bisa diklik, dan menekan
   "Lanjut" memanggil lanjut() saat state masih null -> TypeError.
   Seluruh 35 tes mesin tetap hijau saat itu karena tidak ada satu pun tes
   yang memuat DOM atau CSS. Pola yang sama sudah benar di reflex-arena. */
.tirai[hidden] { display: none; }

.kartu {
  background: var(--panel);
  border: 1px solid var(--panel-2);
  border-top: 4px solid var(--benang);
  border-radius: var(--r);
  padding: 18px 16px;
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.kartu h2 { margin: 0 0 8px; font-size: 1.2rem; }
.hasil-kata {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--benang);
  word-break: break-word;
}
.hasil-arti { margin: 0 0 12px; font-size: .84rem; color: var(--redup); }
.hasil-skor { margin: 0 0 16px; font-size: .9rem; }

.hasil-duo {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 5px;
  text-align: left;
}
.hasil-duo[hidden] { display: none; }
.hasil-duo li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--panel-2);
  font-size: .86rem;
}
.hasil-duo li.unggul { box-shadow: inset 0 0 0 1px var(--benang); }
.hasil-duo li b { color: var(--benang); }

.aksi { display: grid; gap: 8px; }

.utama, .kedua {
  min-height: var(--tinggi-tombol);
  border-radius: 8px;
  font: 700 .95rem inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 0 12px;
}
.utama { background: var(--benang); color: var(--langit); border: 0; }
.kedua { background: transparent; color: var(--redup); border: 1px solid var(--panel-2); }
.kedua:hover { color: var(--kertas); }

/* ----------------------------------------------------- penyesuaian */

@media (min-width: 380px) {
  .papan { gap: 6px; }
  .huruf { height: 38px; }
}

@media (min-width: 480px) {
  :root { --pad: 16px; }
  .papan { grid-template-columns: repeat(9, 1fr); }
  .papan button:nth-child(22) { grid-column: auto; }
  .papan button:nth-child(19) { grid-column: 2; } /* 9/9/8 -> baris akhir ditengahkan */
  .huruf { height: 42px; }
}

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

@media (prefers-contrast: more) {
  .papan button { border-width: 2px; }
  .huruf { border-bottom-width: 4px; }
}