/* ===== Asah Kata — tema hijau–emas (7 Agu 2026) =====

   Tema sebelumnya menaruh SELURUH tampilan layar pembuka di dalam satu gambar
   raster, lalu menyembunyikan judul, statistik, dan tombol aslinya dan menumpuk
   "hotspot" tak terlihat di atas gambar itu.

   Di sini gambar cuma jadi LATAR (assets/latar.svg, vektor, ±4 KB), sedangkan
   judul, angka statistik, dan tombol kembali jadi teks HTML sungguhan: terbaca
   mesin pengindeks, terbaca pembaca layar, dan tidak melenceng posisinya di
   layar yang rasionya tidak biasa. */

:root {
  --em-terang: #ffe9a3;
  --em: #f0b429;
  --em-tua: #b3790c;
  --hijau-pekat: #03130c;
  --garis-emas: rgba(240, 180, 41, 0.45);
}

/* ---------- Layar pembuka ---------- */
#layar-menu {
  background:
    url("latar.svg") center center / cover no-repeat,
    radial-gradient(circle at 50% 30%, #1d5233, #03130c 70%);
}

.menu-isi {
  position: relative;
  z-index: 1;
}

/* Logo: empat ubin huruf, digambar dengan CSS — bukan gambar, bukan lambang */
.logo-besar {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 0;
  margin-bottom: 18px;
}
.logo-besar .ubin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 68px;
  border-radius: 11px;
  background: linear-gradient(160deg, #fffdf2, #e4d8b6);
  border: 2px solid #d8af42;
  box-shadow: 0 4px 0 #31663b, 0 8px 16px rgba(0, 0, 0, 0.35);
  color: #176037;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}
.logo-besar .ubin:nth-child(odd) { transform: rotate(-3deg); }
.logo-besar .ubin:nth-child(even) { transform: rotate(3deg); }

.judul {
  background: linear-gradient(180deg, var(--em-terang) 0%, var(--em) 45%, var(--em-tua) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Cadangan kalau background-clip:text tidak didukung — jangan sampai
     judulnya hilang sama sekali di peramban lama. */
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .judul { color: var(--em); -webkit-text-fill-color: var(--em); }
}

.subjudul { color: #f3ead2; }

.menu-stat-item {
  background: linear-gradient(180deg, rgba(6, 60, 35, 0.88), rgba(2, 20, 13, 0.92));
  border: 1px solid var(--garis-emas);
  box-shadow: inset 0 0 18px rgba(240, 180, 41, 0.07);
}
.menu-stat-angka { color: #ffe27a; }

.tombol-utama {
  background: linear-gradient(180deg, #fff19a 0%, #f7bd2e 42%, #d87d05 100%);
  color: #251100;
  border: 2px solid #fff0a0;
  box-shadow: 0 5px 0 #7d4300, 0 13px 28px rgba(0, 0, 0, 0.4);
}
.tombol-teks { color: #ffe895; }
.menu-kaki a { color: #e8dcc0; }
.menu-kaki a:hover { color: var(--em); }

/* ---------- Layar permainan ---------- */
#layar-main {
  background:
    radial-gradient(circle at 50% 12%, rgba(249, 190, 40, 0.14), transparent 34%),
    linear-gradient(180deg, #0b2a1a, #03130c 70%);
}
.bar-atas {
  background: linear-gradient(180deg, rgba(8, 75, 42, 0.98), rgba(2, 31, 19, 0.98));
  border-bottom: 2px solid var(--em);
  box-shadow: 0 5px 24px rgba(0, 0, 0, 0.5);
}
.ikon-tombol, .bar-koin, .bar-level-teks { color: #ffe27a; }
.bar-progres { background: #102319; border: 1px solid #8f7124; }
.bar-progres-isi { background: linear-gradient(90deg, #f29410, #ffe56c); }

.kartu-petunjuk, .slot-jawaban, .rak-huruf, .baris-aksi {
  background: linear-gradient(180deg, rgba(5, 55, 32, 0.94), rgba(2, 22, 14, 0.97));
  border-color: var(--garis-emas) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.32), inset 0 0 22px rgba(240, 180, 41, 0.06);
}
.label-kategori { background: linear-gradient(#fff19b, #d88a08) !important; color: #281300 !important; }
.teks-petunjuk, .pesan-status { color: #fff6d2 !important; }

/* Ubin huruf di papan dibuat sama persis dengan ubin di logo, supaya yang
   dilihat di iklan dan yang dilihat saat bermain terasa satu barang. */
.huruf, .slot {
  background: linear-gradient(145deg, #fffef1, #e9ddb0) !important;
  color: #176037 !important;
  border: 2px solid #d8af42 !important;
  box-shadow: 0 5px 0 #31663b, 0 8px 14px rgba(0, 0, 0, 0.3) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 900 !important;
}
.huruf:active { transform: translateY(4px); box-shadow: 0 1px 0 #31663b !important; }

.tombol-aksi {
  background: linear-gradient(180deg, #0c6038, #06321f) !important;
  border-color: #b49330 !important;
  color: #fff2b3 !important;
}
.aksi-harga { color: #ffd968 !important; }
.slot-iklan { background: rgba(1, 12, 7, 0.84); border-color: rgba(240, 180, 41, 0.28) !important; }

/* ---------- Popup ---------- */
.tirai { background: rgba(0, 5, 3, 0.8) !important; backdrop-filter: blur(7px); }
.popup {
  border: 2px solid var(--em) !important;
  background: linear-gradient(180deg, #084326, #02170e) !important;
  color: #fff6d2 !important;
  box-shadow: 0 0 0 5px rgba(93, 54, 4, 0.65), 0 28px 80px rgba(0, 0, 0, 0.66) !important;
}
.popup-judul, .popup-kata { color: #ffe26c !important; text-shadow: 0 2px #774000; }

/* Hujan meteor jangan sampai menutupi tulisan */
.fx { mix-blend-mode: screen; opacity: 0.5; }

@media (max-width: 560px) {
  .logo-besar .ubin { width: 48px; height: 60px; font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .fx { display: none !important; }
}