/* Tebak Kata Rahasia — identitas sendiri: malam tinta + nyala lampu teplok.
   Ungu-nila gelap, aksen kuning-oranye hangat, huruf serif untuk kata. */

:root {
  --tinta:      #15132a;
  --tinta-2:    #1d1b38;
  --tinta-3:    #262347;
  --garis:      #3a3663;
  --garis-kuat: #575290;
  --teks:       #ece9ff;
  --teks-lembut:#a9a3cf;
  --nyala:      #ffb340;
  --nyala-gelap:#7a4f00;
  --nyala-teks: #2a1a00;
  --ya:         #6fe3b0;
  --tidak:      #ff8f9c;
  --bahaya:     #ff6b7d;
  --radius:     14px;
  --sentuh:     44px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--tinta);
  background-image:
    radial-gradient(90% 60% at 50% -10%, #2b2550 0%, transparent 70%);
  background-attachment: fixed;
  color: var(--teks);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* ---------- lompat & kerangka ---------- */

.lewati {
  position: absolute; left: -9999px; top: 0;
  background: var(--nyala); color: var(--nyala-teks);
  padding: .75rem 1rem; z-index: 20; border-radius: 0 0 var(--radius) 0;
  font-weight: 700; text-decoration: none;
}
.lewati:focus { left: 0; }

main { display: block; }
main:focus { outline: none; }

.layar {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 .75rem;
}
.layar[hidden] { display: none; }
.tengah { text-align: center; }

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

.atas {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  max-width: 34rem;
  margin: 0 auto;
  padding: .5rem .75rem;
}

.balik {
  color: var(--teks-lembut);
  text-decoration: none;
  font-size: .85rem;
  min-height: var(--sentuh);
  display: inline-flex; align-items: center;
  padding: 0 .5rem 0 0;
}
.balik:hover, .balik:focus-visible { color: var(--nyala); text-decoration: underline; }

.judul {
  flex: 1 1 100%;
  order: 3;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: .02em;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--nyala);
}

.ikon {
  margin-left: auto;
  min-height: var(--sentuh);
  padding: 0 .7rem;
  font-size: .8rem;
  background: var(--tinta-2);
  color: var(--teks-lembut);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  cursor: pointer;
}
.ikon[aria-pressed="true"] { color: var(--nyala); border-color: var(--nyala); }

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  margin: .6rem 0 .5rem;
}
.subjudul {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teks-lembut);
  margin: 1.6rem 0 .4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--garis);
}

.intro, .ket, .catatan {
  color: var(--teks-lembut);
  font-size: .9rem;
  margin: 0 0 .9rem;
}
.ket { font-size: .82rem; }
.intro strong { color: var(--teks); }

.catatan {
  background: var(--tinta-2);
  border-left: 3px solid var(--nyala);
  padding: .7rem .8rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- status ---------- */

.status {
  max-width: 34rem;
  margin: 0 auto .5rem;
  padding: .55rem .8rem;
  min-height: 1.2rem;
  background: var(--tinta-2);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  font-size: .88rem;
}
.status:empty { display: none; }

.galat {
  max-width: 34rem;
  margin: 0 auto .5rem;
  padding: .55rem .8rem;
  background: #3b1622;
  border: 1px solid var(--bahaya);
  border-radius: var(--radius);
  color: #ffd3d9;
  font-size: .88rem;
}
.galat::before { content: "\26A0  "; }

/* ---------- kotak & isian ---------- */

.kotak {
  background: var(--tinta-2);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: .8rem;
  margin: 0 0 .9rem;
}
fieldset.kotak { min-width: 0; }
legend {
  padding: 0 .4rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teks-lembut);
}

.baris { margin: 0 0 .8rem; }
.baris:last-child { margin-bottom: 0; }
.baris label {
  display: block;
  font-size: .82rem;
  color: var(--teks-lembut);
  margin-bottom: .3rem;
}
.opsional { font-weight: 400; opacity: .8; }

input[type="text"], select {
  width: 100%;
  min-height: var(--sentuh);
  padding: .5rem .7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--teks);
  background: var(--tinta-3);
  border: 1px solid var(--garis-kuat);
  border-radius: 10px;
}
select { appearance: none; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--teks-lembut) 50%),
                    linear-gradient(135deg, var(--teks-lembut) 50%, transparent 50%);
  background-position: right 1.05rem center, right .75rem center;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}

.pilihanMode { display: grid; gap: .5rem; }
.radio {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--sentuh);
  padding: .5rem .7rem;
  background: var(--tinta-3);
  border: 1px solid var(--garis-kuat);
  border-radius: 10px;
  cursor: pointer;
}
.radio input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--nyala); }
.radio span { display: flex; flex-direction: column; }
.radio small { color: var(--teks-lembut); font-size: .76rem; }
.radio:has(input:checked) { border-color: var(--nyala); background: #2e2747; }

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

button {
  font: inherit;
  font-weight: 600;
  min-height: var(--sentuh);
  padding: .55rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--garis-kuat);
  background: var(--tinta-3);
  color: var(--teks);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--nyala); }
button:disabled { opacity: .45; cursor: not-allowed; }

.besar { display: block; width: 100%; font-size: 1rem; padding: .8rem 1rem; min-height: 52px; }
.utama { background: var(--nyala); color: var(--nyala-teks); border-color: var(--nyala); }
.utama:hover:not(:disabled) { background: #ffc766; }
.bahaya { background: #431a24; color: #ffd3d9; border-color: var(--bahaya); }
.bahaya:hover:not(:disabled) { background: #5a2230; border-color: #ff9aa7; }
.kecil { font-size: .82rem; padding: .5rem .8rem; font-weight: 500; }

.barisTombol { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; }
.barisTombol > * { flex: 1 1 10rem; }

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

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

.papan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin: 0 0 .9rem;
}

.kata {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: .5rem .45rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  letter-spacing: .01em;
  word-break: break-word;
  background: var(--tinta-2);
  border: 1px solid var(--garis-kuat);
  border-radius: 10px;
  color: var(--teks);
}

/* dipilih sebagai kata rahasia: warna + centang + tebal */
.kata[aria-pressed="true"].pilihan {
  background: var(--nyala);
  color: var(--nyala-teks);
  border-color: #fff;
  font-weight: 700;
}
.kata.pilihan[aria-pressed="true"]::after {
  content: "\2713";
  position: absolute; top: .15rem; right: .35rem;
  font-size: .8rem; font-weight: 700;
}

/* dicoret: warna redup + garis coret + tanda silang (bukan warna saja) */
.kata.coret[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--teks-lembut);
  border-style: dashed;
  border-color: var(--garis);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.kata.coret[aria-pressed="true"]::after {
  content: "\00D7";
  position: absolute; top: .1rem; right: .35rem;
  font-size: .95rem; font-weight: 700; color: var(--tidak);
}

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

.papanSkor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin: 0 0 1rem;
}
.papanSkor > div {
  background: var(--tinta-2);
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: .5rem .4rem;
  text-align: center;
  min-width: 0;
}
.papanSkor dt {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--teks-lembut);
}
.papanSkor dd {
  margin: .2rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--nyala);
  word-break: break-word;
}

/* ---------- pertanyaan ---------- */

.kelompokTanya { margin: 0 0 .7rem; }
.kelompokTanya > summary {
  min-height: var(--sentuh);
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .7rem;
  background: var(--tinta-2);
  border: 1px solid var(--garis-kuat);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  list-style: none;
}
.kelompokTanya > summary::-webkit-details-marker { display: none; }
.kelompokTanya > summary::before { content: "\25B8"; color: var(--nyala); }
.kelompokTanya[open] > summary::before { content: "\25BE"; }
.kelompokTanya > summary .hitung {
  margin-left: auto; font-weight: 400; font-size: .78rem; color: var(--teks-lembut);
}

.isiTanya { display: grid; gap: .4rem; padding: .5rem 0 0; }

.tanya {
  text-align: left;
  font-weight: 500;
  font-size: .92rem;
  line-height: 1.35;
  padding: .6rem .7rem;
}
.tanya .sudah {
  display: block;
  font-size: .74rem;
  color: var(--teks-lembut);
  margin-top: .15rem;
}
.tanya:disabled { text-decoration: line-through; }

/* ---------- riwayat ---------- */

.riwayat { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.riwayat:empty::after {
  content: "Belum ada langkah.";
  color: var(--teks-lembut);
  font-size: .85rem;
}
.riwayat li {
  background: var(--tinta-2);
  border: 1px solid var(--garis);
  border-left-width: 4px;
  border-radius: 0 10px 10px 0;
  padding: .5rem .7rem;
  font-size: .88rem;
}
.riwayat li .tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: .4rem;
}
.riwayat li.ya    { border-left-color: var(--ya); }
.riwayat li.tidak { border-left-color: var(--tidak); }
.riwayat li.ya    .tag { color: var(--ya); }
.riwayat li.tidak .tag { color: var(--tidak); }
.riwayat li .nomor { color: var(--teks-lembut); font-size: .72rem; }

/* ---------- serah terima ---------- */

.ikonBesar { font-size: 3rem; margin: 1.5rem 0 .3rem; }
.serahNama {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  color: var(--nyala);
  margin: 0 0 .4rem;
  word-break: break-word;
}
.serahKet { color: var(--teks-lembut); font-size: .9rem; margin: 0 0 1.6rem; }

.terpilih {
  font-size: .88rem;
  margin: 0 0 .6rem;
  color: var(--teks-lembut);
}
.terpilih strong { color: var(--nyala); font-family: Georgia, serif; }

.aksiBawah {
  position: sticky;
  bottom: 0;
  background: var(--tinta);
  border-top: 1px solid var(--garis);
  padding: .7rem 0 .8rem;
}

.kabarSolo {
  background: var(--tinta-2);
  border: 1px solid var(--garis-kuat);
  border-left: 4px solid var(--nyala);
  border-radius: 0 10px 10px 0;
  padding: .6rem .8rem;
  font-size: .88rem;
  margin: 0 0 1rem;
}

.konfirm {
  margin-top: .7rem;
  padding: .7rem;
  background: #431a24;
  border: 1px solid var(--bahaya);
  border-radius: 10px;
  font-size: .9rem;
}
.konfirm p { margin: 0; }

/* ---------- selesai ---------- */

.menang {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  color: var(--nyala);
  background: var(--tinta-2);
  border: 1px solid var(--nyala);
  border-radius: var(--radius);
  padding: .9rem;
  text-align: center;
  margin: 0 0 1rem;
}
.bukaan { display: grid; gap: .9rem; }
.kartuBuka {
  background: var(--tinta-2);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: .8rem;
}
.kartuBuka h3 { margin: 0 0 .2rem; font-size: 1rem; font-family: Georgia, serif; }
.kartuBuka .rahasiaNya {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  color: var(--nyala);
  margin: 0 0 .7rem;
}
.kartuBuka .rahasiaNya .cap {
  display: block; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teks-lembut); font-family: inherit;
}

.bawah {
  max-width: 34rem;
  margin: 2.5rem auto 0;
  padding: 1rem .75rem 0;
  border-top: 1px solid var(--garis);
  color: var(--teks-lembut);
  font-size: .78rem;
  text-align: center;
}
.bawah code { color: var(--nyala); font-size: .95em; }

/* ---------- layar lebih lega ---------- */

@media (min-width: 26rem) {
  .papan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .judul { flex: 1 1 auto; order: 0; margin-left: .3rem; font-size: 1.15rem; }
  .pilihanMode { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 40rem) {
  .layar { padding: 0 1rem; }
  .judul { font-size: 1.4rem; }
}

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

@media (prefers-reduced-motion: no-preference) {
  .kata, button, .radio { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
  @keyframes munculHalus { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .layar:not([hidden]) { animation: munculHalus .22s ease both; }
}

@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 (prefers-contrast: more) {
  :root { --garis: #8a83c9; --teks-lembut: #cfc9f0; }
}