/* Tebak Tetangga — jalan kampung waktu magrib: teal tua, jendela kuning lampu. */
:root {
  --malam: #0f2e36;
  --panel: #16404a;
  --garis: #2c5d68;
  --kapur: #f3e8d2;
  --redup: #9cbcc2;
  --lampu: #f2b134;
  --batu: #7f9fa6;
  --bata: #d4674a;
  --daun: #6fbf8b;
  --r: 10px;
  --sel: 44px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 14px calc(28px + env(safe-area-inset-bottom));
  background: var(--malam);
  background-image:
    radial-gradient(120% 60% at 50% -10%, #1b4d58 0%, rgba(27, 77, 88, 0) 70%);
  color: var(--kapur);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

h1, h2 { margin: 0; font-weight: 600; }

.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.lewati {
  position: absolute; left: -9999px;
  background: var(--lampu); color: #14343c;
  padding: 12px 16px; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.lewati:focus { left: 0; top: 0; z-index: 10; }

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

.atas { max-width: 34rem; margin: 0 auto; padding: 18px 0 6px; }

.balik {
  display: inline-block; min-height: 44px; line-height: 44px;
  color: var(--redup); text-decoration: none; font-size: .9rem;
}
.balik::before { content: "\2190"; margin-right: .45em; }
.balik:hover, .balik:focus-visible { color: var(--lampu); text-decoration: underline; }

/* Tautan ke versi balapan online. Sasaran sentuh 44px seperti .balik, dan
   diberi bingkai supaya terbaca sebagai tautan tanpa bergantung pada warna. */
.tautan-online {
  display: inline-block; min-height: 44px; line-height: 40px;
  margin-left: .8em; padding: 0 .8em;
  border: 2px solid var(--redup); color: var(--redup);
  text-decoration: none; font-size: .82rem;
}
.tautan-online:hover, .tautan-online:focus-visible {
  color: var(--lampu); border-color: var(--lampu); text-decoration: underline;
}

h1 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(2rem, 11vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
h1 span { display: block; color: var(--lampu); font-style: italic; }

.pengantar {
  margin: .7rem 0 0;
  max-width: 32rem;
  color: var(--redup);
}

/* ---------- kartu ---------- */

main { max-width: 34rem; margin: 0 auto; }

.kartu {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  padding: 16px 14px;
  margin-top: 16px;
}

.kartu h2 {
  font-size: .95rem;
  letter-spacing: .01em;
  color: var(--lampu);
}

.catatan { margin: .35rem 0 0; font-size: .85rem; color: var(--redup); }

/* ---------- petunjuk ---------- */

.petunjuk { margin: .8rem 0 0; padding: 0; list-style: none; counter-reset: p; }

.petunjuk li { counter-increment: p; }

.petunjuk button {
  display: flex; gap: .65em; width: 100%;
  min-height: 44px; padding: 9px 10px;
  align-items: baseline; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--garis);
  color: inherit; font: inherit; cursor: pointer;
  border-radius: 6px;
}
.petunjuk li:first-child button { border-top: 0; }

.petunjuk button::before {
  content: counter(p);
  flex: none;
  min-width: 1.5em; height: 1.5em;
  display: inline-grid; place-items: center;
  border: 1px solid var(--garis); border-radius: 50%;
  font-size: .78rem; color: var(--lampu);
}

.petunjuk button[aria-pressed="true"] { color: var(--batu); }
.petunjuk button[aria-pressed="true"] span { text-decoration: line-through; }
.petunjuk button[aria-pressed="true"]::before { color: var(--batu); }
.petunjuk button:hover { background: #1b4b56; }

/* ---------- kisi ---------- */

.papan-bungkus { margin-top: .9rem; display: grid; gap: 16px; }

.kisi { width: 100%; border-collapse: collapse; table-layout: fixed; }

.kisi caption {
  caption-side: top; text-align: left;
  padding-bottom: .4rem; font-size: .8rem; color: var(--redup);
}

.kisi th, .kisi td { padding: 0; }

.kisi thead th {
  width: var(--sel);
  font-size: .75rem; font-weight: 600; color: var(--kapur);
  padding-bottom: 4px;
}
.kisi thead th:first-child { width: auto; text-align: left; }

/* atap rumah di kepala kolom — satu-satunya hiasan di halaman */
.atap {
  display: block;
  width: 100%; max-width: 30px; height: 12px;
  margin: 0 auto 3px;
  background: var(--garis);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.kisi tbody th {
  text-align: left; font-weight: 500; font-size: .8rem;
  padding: 0 8px 0 2px;
  color: var(--kapur);
  overflow-wrap: anywhere; hyphens: auto;
}

.sel {
  width: 100%; height: var(--sel); min-height: 44px;
  display: grid; place-items: center;
  background: #123640;
  border: 1px solid var(--garis);
  border-radius: 7px;
  color: var(--batu);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer;
  transition: background-color .12s linear, color .12s linear;
}
.kisi td { padding: 2px; }

.sel[data-tanda="yes"] {
  background: #4a3a12;
  border-color: var(--lampu);
  color: var(--lampu);
}
.sel[data-tanda="no"] {
  background: #14343c;
  color: var(--batu);
}
.sel[data-tanda="none"] { color: #47707a; }

.sel:hover { background: #1c4d58; }

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

.aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .9rem; }

.tombol {
  flex: 1 1 auto; min-height: 44px; min-width: 44px;
  padding: 11px 14px;
  background: #123640;
  border: 1px solid var(--garis); border-radius: 8px;
  color: var(--kapur); font: inherit; font-weight: 500;
  cursor: pointer;
}
.tombol:hover { background: #1c4d58; }

.tombol.utama {
  flex-basis: 100%;
  background: var(--lampu); border-color: var(--lampu);
  color: #14343c; font-weight: 600;
}
.tombol.utama:hover { background: #ffc453; }

.tombol.sunyi { color: var(--redup); }

:focus-visible {
  outline: 3px solid var(--lampu);
  outline-offset: 2px;
}

/* ---------- status & pembahasan ---------- */

.status {
  margin: .9rem 0 0; padding: 11px 12px;
  border-left: 3px solid var(--garis); border-radius: 0 6px 6px 0;
  background: #123640;
  font-size: .92rem;
}
.status[data-nada="cocok"] { border-left-color: var(--daun); }
.status[data-nada="bentrok"] { border-left-color: var(--bata); }
.status[data-nada="selesai"] { border-left-color: var(--lampu); }

.pembahasan { margin-top: 1rem; border-top: 1px solid var(--garis); padding-top: .8rem; }
.pembahasan h3 { margin: 0 0 .5rem; font-size: .9rem; color: var(--lampu); }
.pembahasan ol { margin: 0; padding-left: 1.2rem; }
.pembahasan li { margin-bottom: .7rem; font-size: .9rem; }
.pembahasan .kutip { color: var(--kapur); }
.pembahasan .fakta { margin: .3rem 0 0; padding-left: 1rem; color: var(--redup); font-size: .85rem; }
.pembahasan .sisa { color: var(--batu); font-size: .8rem; }
.pembahasan .jawaban { margin: .8rem 0 0; padding: 0; list-style: none; }
.pembahasan .jawaban li {
  border-top: 1px solid var(--garis); padding-top: .5rem; margin-bottom: .5rem;
}

/* ---------- setelan ---------- */

.benih { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .8rem; align-items: center; }
.benih label { flex: 1 0 100%; font-size: .85rem; color: var(--redup); }
.benih input {
  flex: 1 1 10rem; min-height: 44px; padding: 10px 12px;
  background: #123640; border: 1px solid var(--garis); border-radius: 8px;
  color: var(--kapur); font: inherit;
}
.benih .tombol { flex: 0 1 auto; }

.sakelar {
  display: flex; align-items: center; gap: .6em;
  min-height: 44px; margin-top: .4rem; cursor: pointer;
  font-size: .9rem;
}
.sakelar input { width: 20px; height: 20px; accent-color: var(--lampu); }

.bawah {
  max-width: 34rem; margin: 20px auto 0;
  color: var(--batu); font-size: .82rem;
}

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

@media (min-width: 560px) {
  :root { --sel: 48px; }
  .kisi tbody th { font-size: .85rem; }
  .tombol.utama { flex-basis: auto; }
}

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

@media (forced-colors: active) {
  .sel { border: 1px solid ButtonBorder; }
  .sel[data-tanda="yes"] { border-width: 3px; }
  .atap { background: ButtonBorder; }
}