/* =====================================================================
   style.css — Tema Global "Memory Royale"
   Nuansa: perayaan 17 Agustus (gapura bambu merah-putih-emas, bendera
   segitiga/bunting, lampu perayaan). Dipakai bersama oleh semua halaman.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* --- Palet warna: "Gapura Kemerdekaan" --- */
  --merah: #C8102E;        /* merah bendera */
  --merah-tua: #6B0F1A;    /* maroon gelap, untuk bayangan & gradasi */
  --emas: #D4A017;         /* emas pusaka, untuk aksen & bingkai */
  --emas-terang: #F2C94C;
  --krem: #F5F0E6;         /* putih tulang, lebih hangat dari putih polos */
  --arang: #17100D;        /* hitam arang, dasar latar gelap */
  --arang-2: #241914;

  --hijau-benar: #2E8B57;  /* jawaban benar */
  --merah-salah: #D93025;  /* jawaban salah / bahaya */

  --font-display: 'Anton', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-deep: 0 20px 60px rgba(0,0,0,0.45);
  --transition: 220ms cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--krem);
  background: var(--arang);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
}

a { color: inherit; }

/* --- Latar bertekstur: gradasi maroon->arang + pola batik garis tipis --- */
.bg-gapura {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(200,16,46,0.35), transparent 55%),
    linear-gradient(180deg, var(--arang-2) 0%, var(--arang) 60%);
}
.bg-gapura::before {
  /* pola garis diagonal tipis, kesan anyaman bambu/kain, sangat halus */
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg, rgba(212,160,23,0.045) 0 2px, transparent 2px 26px
  );
  pointer-events: none;
}

/* --- Bunting: untaian bendera segitiga merah-putih-emas di tepi atas --- */
.bunting {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 18px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.bunting span {
  width: 0; height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 20px solid var(--merah);
  opacity: 0.9;
  animation: sway 3.2s ease-in-out infinite;
  transform-origin: top center;
}
.bunting span:nth-child(3n+1) { border-top-color: var(--krem); animation-delay: .1s; }
.bunting span:nth-child(3n+2) { border-top-color: var(--emas); animation-delay: .4s; }
.bunting span:nth-child(3n)   { border-top-color: var(--merah); animation-delay: .7s; }

@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* --- Percikan kembang api latar, sangat ringan (CSS-only, tanpa canvas) --- */
.spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--emas-terang);
  box-shadow: 0 0 8px 2px rgba(242,201,76,0.8);
  opacity: 0;
  animation: spark-pop 3.6s ease-out infinite;
}
@keyframes spark-pop {
  0% { opacity: 0; transform: scale(0.3) translateY(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-40px); }
}

@media (prefers-reduced-motion: reduce) {
  .bunting span, .spark, * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* --- Kartu umum --- */
.card {
  background: linear-gradient(180deg, rgba(245,240,230,0.06), rgba(245,240,230,0.02));
  border: 1px solid rgba(212,160,23,0.35);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-deep);
}

/* --- Label lencana panitia/peserta (seperti ID badge/lanyard) --- */
.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--emas);
  color: var(--arang);
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
}
.badge-tag.merah { background: var(--merah); color: var(--krem); }

/* --- Tombol --- */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 22px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--merah) 0%, #a30d24 100%);
  color: var(--krem);
  box-shadow: 0 6px 0 #7a0a1a, 0 10px 24px rgba(200,16,46,0.35);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 0 #7a0a1a, 0 8px 20px rgba(200,16,46,0.45); transform: translateY(2px); }

.btn-gold {
  background: linear-gradient(180deg, var(--emas-terang), var(--emas));
  color: var(--arang);
  box-shadow: 0 6px 0 #9c780f;
}
.btn-gold:hover:not(:disabled) { transform: translateY(2px); box-shadow: 0 4px 0 #9c780f; }

.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(245,240,230,0.4);
  color: var(--krem);
}
.btn-outline:hover:not(:disabled) { border-color: var(--emas); color: var(--emas); }

.btn-danger { background: linear-gradient(180deg, var(--merah-salah), #a6221a); color: var(--krem); box-shadow: 0 6px 0 #7d180f; }
.btn-success { background: linear-gradient(180deg, var(--hijau-benar), #1f6b41); color: var(--krem); box-shadow: 0 6px 0 #144d2e; }

.btn-block { width: 100%; }

/* --- Input --- */
.input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(245,240,230,0.25);
  background: rgba(0,0,0,0.25);
  color: var(--krem);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  transition: border-color var(--transition);
}
.input:focus { outline: none; border-color: var(--emas); }
.input::placeholder { letter-spacing: 1px; color: rgba(245,240,230,0.4); }

/* --- Util --- */
.text-muted { color: rgba(245,240,230,0.55); font-size: 13px; }
.text-center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }

.fade-in { animation: fadeIn .5s var(--transition) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--arang-2);
  border: 1px solid var(--emas);
  color: var(--krem);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  z-index: 999;
  box-shadow: var(--shadow-deep);
  animation: fadeIn .3s var(--transition) both;
}
.toast.error { border-color: var(--merah-salah); }