/* Reset ringan + elemen dasar yang dipakai host maupun siswa. */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-teks);
  color: var(--teks-utama);
  background-color: var(--tinta-900);
  /* Titik halus meniru tekstur papan permainan cetak. */
  background-image: radial-gradient(var(--tinta-700) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

/* ---------- Tombol ---------- */
.tombol {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--tinta-900);
  background: var(--amber);
  border: none;
  border-radius: var(--r-sedang);
  padding: var(--s4) var(--s6);
  cursor: pointer;
  box-shadow: var(--angkat-2);
  transition: transform var(--cepat) ease, box-shadow var(--cepat) ease,
              background-color var(--cepat) ease;
}

/* Tombol turun menekan bayangannya — terasa seperti menekan tuts fisik. */
.tombol:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--angkat-3); }
.tombol:active:not(:disabled) { transform: translateY(4px); box-shadow: var(--angkat-1); }

.tombol:disabled {
  background: var(--tinta-600);
  color: var(--teks-redup);
  cursor: not-allowed;
  box-shadow: none;
}

.tombol--hantu {
  background: transparent;
  color: var(--teks-utama);
  border: 2px solid var(--tinta-600);
  box-shadow: none;
}
.tombol--hantu:hover { border-color: var(--amber); color: var(--amber); }

/* Fokus keyboard harus selalu terlihat. */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

/* ---------- Input ---------- */
.kolom {
  width: 100%;
  font-family: var(--font-teks);
  font-size: 1.05rem;
  color: var(--teks-utama);
  background: var(--tinta-800);
  border: 2px solid var(--tinta-600);
  border-radius: var(--r-sedang);
  padding: var(--s4);
  transition: border-color var(--cepat) ease;
}
.kolom::placeholder { color: var(--teks-redup); }
.kolom:focus { border-color: var(--amber); outline: none; }

.kolom--kode {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.35em;
  text-indent: 0.35em; /* mengimbangi letter-spacing agar tetap terlihat di tengah */
  text-transform: uppercase;
}

/* ---------- Label kecil di atas judul ---------- */
.eyebrow {
  font-family: var(--font-kode);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teks-redup);
}

/* ---------- Pesan kesalahan ---------- */
.pesan-error {
  display: none;
  font-size: 0.95rem;
  color: var(--koral);
  background: rgba(255, 93, 93, 0.1);
  border-left: 3px solid var(--koral);
  border-radius: var(--r-kecil);
  padding: var(--s3) var(--s4);
}
.pesan-error.tampil { display: block; }

/* ---------- Indikator koneksi polling ---------- */
.sinyal {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-kode);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teks-redup);
}
.sinyal::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-bulat);
  background: var(--mint);
  transition: background-color var(--sedang) ease;
}
.sinyal[data-status="putus"]::before { background: var(--koral); }
.sinyal[data-status="putus"] { color: var(--koral); }

/* ---------- Tombol nyala/mati suara ---------- */
.tombol-suara {
  font-family: var(--font-kode);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teks-redup);
  background: transparent;
  border: 2px solid var(--tinta-600);
  border-radius: var(--r-bulat);
  padding: var(--s1) var(--s3);
  cursor: pointer;
  transition: color var(--cepat) ease, border-color var(--cepat) ease;
}
.tombol-suara:hover { color: var(--amber); border-color: var(--amber); }
.tombol-suara[data-senyap="ya"] { opacity: 0.6; }

/* ---------- Konfeti ----------
   Melayang di atas segalanya tapi tidak pernah menangkap sentuhan,
   supaya tombol di bawahnya tetap bisa ditekan saat konfeti berjatuhan. */
.konfeti-kanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 90;
}

.sembunyi { display: none !important; }