/* ==========================================================================
   Rebut Jajanan
   Palet warung sore: kayu gelap, kertas nasi, dua aksen yang berbeda RONA dan
   TERANGnya sekaligus, supaya dua pemain tidak pernah dibedakan oleh warna
   saja. Tiap keadaan juga selalu punya teksnya sendiri.
   ========================================================================== */

:root {
  --kayu:       #241a14;
  --kayu-dalam: #180f0b;
  --kayu-garis: #3a2a1e;
  --kertas:     #f7efe2;
  --kertas-rdp: #d9cdba;
  --tinta:      #1d1611;
  --tinta-lmb:  #6b5c4c;

  /* Pemain 1 kuning kunyit (terang), pemain 2 biru telur asin (gelap).
     Berbeda rona DAN luminans, jadi terbedakan juga di layar monokrom. */
  --p0:       #f0b429;
  --p0-dalam: #8a5a02;
  --p1:       #6aa9d8;
  --p1-dalam: #1b4f77;

  --menang:  #86d9a4;
  --redup:   #9c8c78;

  --r-kartu: 12px;
  --r-kotak: 10px;
  --sentuh:  44px;

  --bayang: 0 10px 22px -8px rgba(0,0,0,.6);
  --mulus: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  padding-bottom: 2.5rem;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--kayu-garis) 0%, transparent 62%),
    var(--kayu);
  color: var(--kertas);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

.vh {
  position: absolute !important;
  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;
}

/* Tautan lewati: tersembunyi sampai difokus papan ketik. */
.lewati {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--kertas);
  color: var(--tinta);
  padding: .8rem 1rem;
  min-height: var(--sentuh);
  border-radius: 0 0 var(--r-kotak) 0;
  text-decoration: none;
  font-weight: 700;
}
.lewati:focus { left: 0; }

/* ------------------------------------------------------------- topbar -- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--kayu-garis);
}

.balik, .pil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: var(--sentuh);
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(247,239,226,.3);
  background: rgba(0,0,0,.2);
  color: var(--kertas);
  font: inherit;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
}
.balik::before { content: "\2190"; opacity: .85; }
.balik:hover, .pil:hover { background: rgba(0,0,0,.36); }
.balik:focus-visible, .pil:focus-visible,
.utama:focus-visible, .kedua:focus-visible,
.kartu:focus-visible, input:focus-visible, .lewati:focus-visible {
  outline: 3px solid var(--p0);
  outline-offset: 3px;
}
.pil[aria-pressed="true"] {
  background: var(--kertas);
  color: var(--tinta);
  border-color: var(--kertas);
}
.pil-glif { font-size: 1.05em; }

/* --------------------------------------------------------------- meja -- */

.meja {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.1rem .9rem 0;
}

.kepala {
  margin: .4rem 0 .2rem;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 800;
}
.kepala span:first-child { color: var(--p0); }
.kepala span:last-child { color: var(--p1); }

.slogan {
  margin: 0 0 1.2rem;
  color: var(--redup);
  font-size: .98rem;
}

h2 { font-size: 1.4rem; margin: 0 0 .4rem; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; }

.petunjuk { margin: 0 0 1rem; color: var(--redup); font-size: .95rem; }

/* -------------------------------------------------------------- setup -- */

.isian { margin-bottom: .9rem; }
.isian label {
  display: block;
  margin-bottom: .3rem;
  font-size: .9rem;
  color: var(--redup);
}
.isian input {
  width: 100%;
  min-height: var(--sentuh);
  padding: .6rem .8rem;
  border-radius: var(--r-kotak);
  border: 2px solid var(--kayu-garis);
  background: rgba(0,0,0,.25);
  color: var(--kertas);
  font: inherit;
}

.galat {
  margin: .6rem 0;
  padding: .7rem .9rem;
  border-radius: var(--r-kotak);
  border: 2px solid #e08b7a;
  background: rgba(224,139,122,.16);
  color: #ffd9d0;
  font-size: .93rem;
}

/* [hidden] HARUS ditulis di sini. `display:block` dari stylesheet penulis
   mengalahkan `[hidden]{display:none}` milik peramban, jadi tanpa penjaga ini
   tombol Lanjut - yang ditandai hidden di markup - terpampang sejak cat
   pertama. Ini persis cacat yang membuat hangman pernah tayang tak bisa
   dimainkan, dan overlay.test.js menangkapnya di sini. */
.utama[hidden], .kedua[hidden] { display: none; }

.utama, .kedua {
  display: block;
  width: 100%;
  min-height: var(--sentuh);
  margin-top: .8rem;
  padding: .75rem 1.1rem;
  border-radius: var(--r-kotak);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.utama { background: var(--p0); color: #2a1c00; }
.utama:hover { background: #ffc94a; }
.kedua {
  background: transparent;
  color: var(--kertas);
  border-color: var(--kayu-garis);
}
.kedua:hover { border-color: var(--redup); }

.ringkas {
  margin-top: 1.6rem;
  padding: 1rem;
  border: 1px solid var(--kayu-garis);
  border-radius: var(--r-kotak);
  background: rgba(0,0,0,.18);
}
.ringkas ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.ringkas li { margin-bottom: .5rem; font-size: .94rem; }

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

/* [hidden] ditulis eksplisit dengan alasan yang sama seperti .utama di atas:
   aturan penulis mengalahkan [hidden]{display:none} bawaan peramban, jadi
   tanpa ini layar serah terpampang bersamaan dengan meja. */
.serah[hidden] { display: none; }

.serah {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3rem;
  padding: 2rem 1rem 1.6rem;
  border: 1px solid var(--kayu-garis);
  border-radius: var(--r-kotak);
  background: rgba(0,0,0,.24);
}

.serah-glif { margin: 0; font-size: 2.6rem; line-height: 1; }

.serah-nama {
  margin: .2rem 0 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--p0);
  /* Nama panjang tidak boleh melebar melewati layar 320px. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.serah-ket {
  margin: 0 0 .5rem;
  max-width: 34ch;
  color: var(--kertas);
  font-size: .95rem;
}

/* Tombolnya satu-satunya kendali di layar ini, jadi diberi lebar penuh
   seperti tombol utama lain dan tidak pernah di bawah lantai sentuh. */
.serah .utama { width: 100%; max-width: 22rem; }

/* ------------------------------------------------------------ giliran -- */

.giliran {
  margin: 0 0 .9rem;
  padding: .7rem .9rem;
  border-radius: var(--r-kotak);
  border: 1px solid var(--kayu-garis);
  background: rgba(0,0,0,.22);
  font-size: .95rem;
  min-height: var(--sentuh);
}

/* ----------------------------------------------------------- skorbar -- */

.skorbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .5rem;
  margin-bottom: 1rem;
}

.skor {
  padding: .6rem .5rem;
  border-radius: var(--r-kotak);
  border: 2px solid var(--kayu-garis);
  background: rgba(0,0,0,.22);
  text-align: center;
}
/* Memimpin ditandai bingkai TEBAL plus lencana teks "memimpin" di bawah,
   jadi tidak pernah warna saja. */
#skor-0[data-memimpin="ya"] { border-color: var(--p0); }
#skor-1[data-memimpin="ya"] { border-color: var(--p1); }

.skor-nama {
  display: block;
  font-size: .82rem;
  color: var(--redup);
  overflow-wrap: anywhere;
}
#skor-0 .skor-nama { color: var(--p0); }
#skor-1 .skor-nama { color: var(--p1); }

.skor-angka {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
}
.skor-tanda {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--menang);
  min-height: 1.1em;
}

.skor-sisa {
  align-self: center;
  text-align: center;
  padding: 0 .3rem;
}
.sisa-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--redup);
}
.sisa-angka { display: block; font-size: 1.25rem; font-weight: 700; }

/* ------------------------------------------------------------- deret -- */

.jajanan-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .35rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}

.jajanan {
  padding: .45rem .25rem;
  border-radius: 8px;
  border: 2px solid var(--kayu-garis);
  background: rgba(0,0,0,.2);
  text-align: center;
  font-size: .7rem;
  min-width: 0;
}
.jajanan[data-keadaan="sekarang"] {
  border-color: var(--kertas);
  background: rgba(247,239,226,.12);
}
.jajanan[data-keadaan="selesai"] { opacity: .62; }

/* `anywhere` memotong "Gorengan" jadi "Gorenga/n" di kolom sempit, yang justru
   membuat nama jajanannya sulit dikenali sekilas - padahal itu satu-satunya
   gunanya. Dibiarkan meluber terkendali dan dikecilkan sedikit sebagai
   gantinya; nama terpanjang ("Es Cendol") tetap muat dalam dua baris. */
.jajanan-nama {
  display: block;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  font-size: .96em;
  line-height: 1.2;
}
.jajanan-nilai {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
}
.jajanan-jejak {
  display: block;
  font-size: .62rem;
  color: var(--redup);
  line-height: 1.2;
  /* Nama pemain bisa panjang; dipotong dengan elipsis daripada memaksa
     petaknya melar dan mendorong deret jadi melebihi 320px. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------- arena -- */

.arena {
  padding: .9rem .7rem;
  margin-bottom: 1.1rem;
  border-radius: var(--r-kartu);
  border: 1px solid var(--kayu-garis);
  background: rgba(0,0,0,.24);
}

.rebutan {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .5rem;
  align-items: center;
}

.pasang {
  padding: .5rem .3rem;
  border-radius: var(--r-kotak);
  border: 2px dashed var(--kayu-garis);
  text-align: center;
  min-width: 0;
}
.pasang[data-terpasang="ya"] { border-style: solid; }
#pasang-0[data-terpasang="ya"] { border-color: var(--p0); }
#pasang-1[data-terpasang="ya"] { border-color: var(--p1); }
/* Pemenang babak ditandai bingkai tebal DAN teks di .kabar serta di aria-live,
   jadi tidak bergantung pada warna. */
.pasang[data-menang="ya"] { border-width: 4px; }

.pasang-nama {
  display: block;
  font-size: .78rem;
  color: var(--redup);
  overflow-wrap: anywhere;
}
.pasang-kartu {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
}

.hadiah {
  padding: .5rem .6rem;
  border-radius: var(--r-kotak);
  background: var(--kertas);
  color: var(--tinta);
  text-align: center;
  min-width: 5.2rem;
}
.hadiah-nama {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.hadiah-nilai { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.hadiah-satuan { display: block; font-size: .68rem; color: var(--tinta-lmb); }

.kabar {
  margin: .8rem 0 0;
  font-size: .92rem;
  min-height: 1.4em;
  color: var(--kertas);
}

/* ------------------------------------------------------------ tangan -- */

.tangan-blok { margin-bottom: 1.1rem; }

.tangan-judul {
  margin: 0 0 .35rem;
  font-size: .95rem;
  overflow-wrap: anywhere;
}
.tangan-catatan {
  margin: 0 0 .5rem;
  font-size: .84rem;
  color: var(--redup);
  min-height: 1.2em;
}

.tangan {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kartu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Lantai sentuh 44px, tidak dari padding yang bisa hilang saat teks
     mengecil. */
  min-width: var(--sentuh);
  min-height: var(--sentuh);
  padding: .4rem .5rem;
  border-radius: var(--r-kotak);
  border: 2px solid var(--kertas);
  background: var(--kertas);
  color: var(--tinta);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .14s var(--mulus);
}
.kartu:hover { transform: translateY(-3px); }

.kartu-mati {
  background: transparent;
  color: var(--kertas);
  border-color: var(--kayu-garis);
  border-style: dashed;
  cursor: default;
  opacity: .8;
}
.kartu-mati:hover { transform: none; }

.lawan .tangan-judul { color: var(--redup); }

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

.juara {
  margin: .4rem 0 .2rem;
  font-size: 1.7rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.juara-skor { margin: 0 0 1rem; color: var(--redup); overflow-wrap: anywhere; }

.rekap {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  font-size: .9rem;
}
.rekap li { margin-bottom: .3rem; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ footer -- */

footer {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 1rem .9rem 0;
  border-top: 1px solid var(--kayu-garis);
  color: var(--redup);
  font-size: .85rem;
}
footer p { margin: 0; }

/* ------------------------------------------------------------ dialog -- */

dialog {
  width: min(92vw, 34rem);
  padding: 1.4rem 1.1rem 1.1rem;
  border: 2px solid var(--kayu-garis);
  border-radius: var(--r-kartu);
  background: var(--kayu-dalam);
  color: var(--kertas);
}
dialog::backdrop { background: rgba(0,0,0,.66); }

.dialog-tutup {
  position: absolute;
  top: .5rem;
  right: .5rem;
  min-width: var(--sentuh);
  min-height: var(--sentuh);
  border: none;
  border-radius: 50%;
  background: rgba(247,239,226,.12);
  color: var(--kertas);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.dialog-tutup:hover { background: rgba(247,239,226,.22); }
.dialog-tutup:focus-visible { outline: 3px solid var(--p0); outline-offset: 2px; }

.label-kecil {
  margin: 0 0 .2rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--redup);
}
.aturan-list { margin: .6rem 0 0; padding-left: 1.2rem; }
.aturan-list li { margin-bottom: .6rem; font-size: .94rem; }

.aturan-kenapa {
  margin-top: 1rem;
  padding: .8rem;
  border-radius: var(--r-kotak);
  border: 1px solid var(--kayu-garis);
  background: rgba(0,0,0,.28);
}
.aturan-kenapa h3 { margin: 0 0 .3rem; font-size: .95rem; }
.aturan-kenapa p { margin: 0; font-size: .89rem; color: var(--kertas); }

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

/* Enam jajanan berjajar jadi sangat sempit di layar 320px, jadi di bawah
   380px deretnya dibagi dua baris tiga. Diukur di peramban, bukan dikira. */
@media (max-width: 380px) {
  .jajanan-list { grid-template-columns: repeat(3, 1fr); }
  .meja { padding-left: .6rem; padding-right: .6rem; }
  .topbar { padding-left: .6rem; padding-right: .6rem; }
  .hadiah { min-width: 4.4rem; }
  .skor-angka { font-size: 1.6rem; }
}

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

/* Selain memendekkan durasi, putaran tak terbatas benar-benar dimatikan:
   memangkas durasi saja membuat animasi infinite berputar sangat cepat
   selamanya, yang justru kebalikan dari yang diminta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation: none !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .kartu:hover { transform: none; }
}