/* ============================================================
   TEMA KEJAKSAAN AGUNG RI — hijau adhyaksa & emas
   ============================================================ */
@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/Cinzel.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --hijau-tua:   #06231a;
  --hijau:       #0d3b2c;
  --hijau-muda:  #14543f;
  --emas:        #d4af37;
  --emas-terang: #f5d76e;
  --emas-gelap:  #9a7b1e;
  --krem:        #f6efdc;
  --merah:       #c0392b;
  --benar:       #2ecc71;
  --font-judul:  "Cinzel", serif;
  --font-body:   "Plus Jakarta Sans", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--krem);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -20%, #1c6b4f 0%, transparent 55%),
    radial-gradient(ellipse at 50% 120%, #0f4433 0%, transparent 55%),
    linear-gradient(160deg, var(--hijau-tua) 0%, var(--hijau) 50%, var(--hijau-tua) 100%);
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background: url("../assets/img/pattern-arabesque.png");
  opacity: 0.35;
  pointer-events: none;
}

#particles, #confetti {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#confetti { z-index: 50; }

/* garis ornamen emas atas–bawah */
.ornament {
  position: fixed; left: 0; right: 0; height: 6px; z-index: 5;
  background: linear-gradient(90deg,
    transparent, var(--emas-gelap) 15%, var(--emas-terang) 50%, var(--emas-gelap) 85%, transparent);
}
.ornament-top { top: 0; }
.ornament-bottom { bottom: 0; }

/* ============================================================
   PANGGUNG & TRANSISI LAYAR
   ============================================================ */
.stage {
  position: relative; z-index: 10;
  height: 100%;
  display: grid; place-items: center;
  padding: 24px;
}

.screen {
  position: absolute; inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
}
.screen.active { display: grid; animation: screenIn .65s cubic-bezier(.22,1.2,.36,1) both; }
.screen.leaving { animation: screenOut .4s ease-in both; }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes screenOut {
  to { opacity: 0; transform: translateY(-40px) scale(.96); filter: blur(6px); }
}

/* ============================================================
   LAYAR AWAL
   ============================================================ */
.start-card, .result-card {
  width: min(560px, 94vw);
  text-align: center;
  padding: 42px 36px;
  border-radius: 22px;
  position: relative;
  background:
    linear-gradient(170deg, rgba(20,84,63,.55), rgba(6,35,26,.85)),
    url("../assets/img/pattern-dark.png");
  border: 1px solid rgba(212,175,55,.45);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(245,215,110,.25);
  backdrop-filter: blur(6px);
}
.start-card::before, .result-card::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 16px;
  pointer-events: none;
}

.logo-ring {
  width: 128px; height: 128px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(212,175,55,.18), transparent 70%);
  animation: floaty 4.5s ease-in-out infinite;
}
.logo {
  width: 110px; height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(212,175,55,.35));
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.institusi {
  font-family: var(--font-judul);
  font-size: clamp(.62rem, 2vw, .78rem);
  letter-spacing: .28em;
  color: var(--emas-terang);
  opacity: .9;
}

.title {
  font-family: var(--font-judul);
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 3rem);
  margin: 10px 0 4px;
  background: linear-gradient(100deg, var(--emas-gelap) 0%, var(--emas-terang) 35%, #fff6d8 50%, var(--emas-terang) 65%, var(--emas-gelap) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 3.2s linear infinite;
}
@keyframes shine { to { background-position: 220% center; } }

.subtitle {
  font-size: clamp(.85rem, 2.5vw, 1rem);
  font-weight: 300;
  letter-spacing: .14em;
  color: var(--krem);
  opacity: .85;
}

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0;
}
.divider span {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--emas));
}
.divider span:last-child { background: linear-gradient(90deg, var(--emas), transparent); }
.diamond {
  width: 9px; height: 9px;
  background: var(--emas);
  transform: rotate(45deg);
  box-shadow: 0 0 12px var(--emas);
}

.btn-gold {
  font-family: var(--font-judul);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .22em;
  padding: 16px 48px;
  border: none; border-radius: 999px;
  cursor: pointer;
  color: #2b1f04;
  background: linear-gradient(170deg, #f9e08a, var(--emas) 55%, var(--emas-gelap));
  box-shadow:
    0 10px 28px rgba(212,175,55,.35),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 6px rgba(90,60,0,.4);
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.btn-gold::after {
  content: "";
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: sweep 2.8s ease-in-out infinite;
}
@keyframes sweep { 60%, 100% { left: 140%; } }
.btn-gold:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 38px rgba(212,175,55,.5), inset 0 1px 0 rgba(255,255,255,.65); }
.btn-gold:active { transform: translateY(1px) scale(.97); }

.motto {
  margin-top: 22px;
  font-family: var(--font-judul);
  font-style: italic;
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--emas);
  opacity: .8;
}

/* ============================================================
   LAYAR KUIS
   ============================================================ */
#screen-quiz { place-items: start center; padding-top: 5vh; }
#screen-quiz > * { width: min(680px, 94vw); }

.quiz-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.quiz-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-judul);
  font-size: .85rem; letter-spacing: .2em;
  color: var(--emas-terang);
}
.logo-mini { width: 34px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }

.score-chip {
  font-size: .75rem; letter-spacing: .15em;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.5);
  background: rgba(6,35,26,.7);
}
.score-chip b {
  font-family: var(--font-judul);
  font-size: 1.05rem;
  color: var(--emas-terang);
  margin-left: 6px;
}
.score-chip.bump { animation: bump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump { 40% { transform: scale(1.18); } }

.progress-track {
  height: 8px;
  border-radius: 99px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(212,175,55,.25);
  overflow: hidden;
  margin-bottom: 16px;
}
#progress-fill {
  height: 100%; width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--emas-gelap), var(--emas-terang));
  box-shadow: 0 0 12px rgba(212,175,55,.6);
  transition: width .6s cubic-bezier(.22,1,.36,1);
}

.quiz-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; opacity: .9;
}

.timer-ring {
  --p: 100; /* persen sisa waktu */
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--emas-terang) calc(var(--p) * 1%), rgba(255,255,255,.08) 0);
  transition: background .3s linear;
}
.timer-ring::before {
  content: "";
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--hijau-tua);
}
.timer-ring span {
  position: relative;
  font-family: var(--font-judul);
  font-size: 1.15rem;
  color: var(--krem);
}
.timer-ring.danger { background: conic-gradient(var(--merah) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); animation: pulseDanger .6s infinite; }
@keyframes pulseDanger { 50% { transform: scale(1.1); } }

.question-card {
  padding: 30px 32px;
  border-radius: 18px;
  background:
    linear-gradient(170deg, rgba(20,84,63,.6), rgba(6,35,26,.9)),
    url("../assets/img/pattern-dark.png");
  border: 1px solid rgba(212,175,55,.45);
  border-left: 5px solid var(--emas);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  margin-bottom: 22px;
  animation: cardIn .55s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateX(60px) rotate(1deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0); }
}
.question-card.out { animation: cardOut .35s ease-in both; }
@keyframes cardOut {
  to { opacity: 0; transform: translateX(-60px) rotate(-1deg); }
}
.question-card h2 {
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-weight: 600;
  line-height: 1.55;
}

.answers { display: grid; gap: 12px; padding-bottom: 40px; }

.answer {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  text-align: left;
  padding: 15px 20px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,.3);
  background: rgba(6,35,26,.65);
  color: var(--krem);
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  animation: answerIn .5s cubic-bezier(.22,1.2,.36,1) forwards;
  animation-delay: calc(var(--i) * 90ms + 150ms);
  transition: border-color .25s, background .25s, transform .2s, box-shadow .25s;
}
@keyframes answerIn { to { opacity: 1; transform: translateY(0); } }

.answer .huruf {
  flex: 0 0 38px;
  height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-family: var(--font-judul);
  font-weight: 700;
  color: var(--emas-terang);
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.4);
  transition: all .25s;
}

.answer:hover:not(:disabled) {
  border-color: var(--emas);
  background: rgba(20,84,63,.8);
  transform: translateX(8px);
  box-shadow: -6px 0 0 -2px var(--emas), 0 10px 26px rgba(0,0,0,.4);
}
.answer:hover:not(:disabled) .huruf {
  background: var(--emas);
  color: #2b1f04;
}
.answer:disabled { cursor: default; }

.answer.correct {
  border-color: var(--benar);
  background: linear-gradient(90deg, rgba(46,204,113,.3), rgba(6,35,26,.7));
  animation: popCorrect .5s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 24px rgba(46,204,113,.45);
}
.answer.correct .huruf { background: var(--benar); border-color: var(--benar); color: #06231a; }
@keyframes popCorrect { 40% { transform: scale(1.04); } }

.answer.wrong {
  border-color: var(--merah);
  background: linear-gradient(90deg, rgba(192,57,43,.35), rgba(6,35,26,.7));
  animation: shake .45s;
}
.answer.wrong .huruf { background: var(--merah); border-color: var(--merah); color: #fff; }
@keyframes shake {
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
.answer.dim { opacity: .35 !important; filter: grayscale(.6); }

/* jawaban benar berkedip saat pemain salah pilih */
.answer.blink-benar {
  animation: blinkBenar 1.4s linear forwards;
}
.answer.blink-benar .huruf {
  animation: blinkHuruf 1.4s linear forwards;
}
@keyframes blinkBenar {
  0%, 24%, 48%, 72%, 100% {
    border-color: var(--benar);
    background: linear-gradient(90deg, rgba(46,204,113,.35), rgba(6,35,26,.7));
    box-shadow: 0 0 24px rgba(46,204,113,.5);
  }
  12%, 36%, 60% {
    border-color: rgba(212,175,55,.3);
    background: rgba(6,35,26,.65);
    box-shadow: none;
  }
}
@keyframes blinkHuruf {
  0%, 24%, 48%, 72%, 100% { background: var(--benar); border-color: var(--benar); color: #06231a; }
  12%, 36%, 60% { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.4); color: var(--emas-terang); }
}

/* ============================================================
   LAYAR HASIL
   ============================================================ */
.laurel-glow {
  position: absolute; top: -40px; left: 50%;
  width: 260px; height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(212,175,55,.3), transparent 65%);
  pointer-events: none;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 50% { opacity: .5; transform: translateX(-50%) scale(1.15); } }

.logo-result { width: 86px; margin-bottom: 8px; animation: floaty 4.5s ease-in-out infinite; }

.grade {
  font-family: var(--font-judul);
  font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  letter-spacing: .1em;
  background: linear-gradient(100deg, var(--emas-gelap), var(--emas-terang) 50%, var(--emas-gelap));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 3.2s linear infinite;
}

.final-score {
  margin: 10px auto 6px;
  width: 150px; height: 150px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 3px solid var(--emas);
  background: radial-gradient(circle at 35% 30%, rgba(212,175,55,.25), rgba(6,35,26,.8));
  box-shadow: 0 0 40px rgba(212,175,55,.35), inset 0 0 30px rgba(0,0,0,.5);
  animation: scoreRingIn .8s cubic-bezier(.34,1.56,.64,1) both .2s;
}
@keyframes scoreRingIn {
  from { transform: scale(.3) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.final-score span {
  font-family: var(--font-judul);
  font-weight: 900;
  font-size: 3.2rem;
  color: var(--emas-terang);
  text-shadow: 0 4px 18px rgba(0,0,0,.6);
}

.grade-msg { opacity: .85; font-weight: 300; margin-bottom: 22px; }

.stat-row { display: flex; justify-content: center; gap: 14px; margin-bottom: 26px; }
.stat {
  flex: 1; max-width: 120px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(6,35,26,.6);
  border: 1px solid rgba(212,175,55,.3);
}
.stat b {
  display: block;
  font-family: var(--font-judul);
  font-size: 1.35rem;
  color: var(--emas-terang);
}
.stat small { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }

/* ============================================================
   INTRO MENU — elemen masuk berurutan ala game menu
   ============================================================ */
.intro .intro-item {
  opacity: 0;
  animation: introDrop .7s cubic-bezier(.22,1.3,.36,1) forwards;
  animation-delay: calc(var(--d) * 140ms + 250ms);
}
@keyframes introDrop {
  0%   { opacity: 0; transform: translateY(-34px) scale(.92); filter: blur(5px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.intro .logo-ring.intro-item {
  animation: logoEntrance 1s cubic-bezier(.34,1.56,.64,1) forwards, floaty 4.5s ease-in-out 1.3s infinite;
}
@keyframes logoEntrance {
  0%   { opacity: 0; transform: scale(.2) rotate(-180deg); }
  70%  { opacity: 1; transform: scale(1.12) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* tombol PLAY besar berdenyut */
.btn-play {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 1.3rem;
  padding: 18px 60px;
  animation: playPulse 2s ease-in-out infinite;
}
.intro .btn-play.intro-item {
  animation: introDrop .7s cubic-bezier(.22,1.3,.36,1) forwards, playPulse 2s ease-in-out 1.6s infinite;
  animation-delay: calc(var(--d) * 140ms + 250ms), 1.6s;
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(212,175,55,.35), 0 0 0 0 rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.65); }
  50%      { box-shadow: 0 10px 28px rgba(212,175,55,.5),  0 0 0 14px rgba(212,175,55,0), inset 0 1px 0 rgba(255,255,255,.65); }
}
/* segitiga play murni CSS */
.play-shape {
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #2b1f04;
}

/* ============================================================
   PAPAN PERINGKAT
   ============================================================ */
.board {
  margin: 0 auto 24px;
  width: min(380px, 100%);
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(6,35,26,.65);
  border: 1px solid rgba(212,175,55,.35);
}
.board-title {
  font-family: var(--font-judul);
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--emas-terang);
  margin-bottom: 12px;
}
#leaderboard { list-style: none; }
#leaderboard li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: .9rem;
  opacity: 0;
  animation: answerIn .45s cubic-bezier(.22,1.2,.36,1) forwards;
  animation-delay: calc(var(--i) * 110ms + .3s);
}
#leaderboard li:nth-child(odd) { background: rgba(255,255,255,.04); }
#leaderboard li.me {
  background: linear-gradient(90deg, rgba(212,175,55,.25), rgba(212,175,55,.05));
  border: 1px solid rgba(212,175,55,.5);
}
#leaderboard .rank {
  flex: 0 0 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-judul);
  font-size: .78rem; font-weight: 700;
  background: rgba(212,175,55,.15);
  color: var(--emas-terang);
}
#leaderboard li:first-child .rank { background: var(--emas); color: #2b1f04; box-shadow: 0 0 12px rgba(212,175,55,.6); }
#leaderboard .nama { flex: 1; text-align: left; font-weight: 600; }
#leaderboard .poin { font-family: var(--font-judul); color: var(--emas-terang); }
#leaderboard .detik { font-size: .72rem; opacity: .65; width: 52px; text-align: right; }
.board-kosong { font-size: .82rem; opacity: .6; padding: 6px; }

/* ============================================================
   MODE PORTRAIT — layar tegak (kiosk / HP)
   ============================================================ */
@media (orientation: portrait) {
  .start-card, .result-card {
    width: min(620px, 94vw);
    padding: 6vh 7vw;
  }
  .logo-ring { width: min(34vw, 200px); height: min(34vw, 200px); }
  .logo { width: min(29vw, 170px); }
  .title { font-size: clamp(2rem, 9vw, 3.6rem); }
  .subtitle { font-size: clamp(.9rem, 3.4vw, 1.15rem); }
  .btn-play { font-size: clamp(1.2rem, 5vw, 1.6rem); padding: 20px 17vw; }

  #screen-quiz { padding-top: 4vh; }
  #screen-quiz > * { width: min(620px, 94vw); }
  .question-card { padding: 7vw 6vw; min-height: 18vh; display: grid; align-items: center; }
  .question-card h2 { font-size: clamp(1.15rem, 4.6vw, 1.5rem); }
  .answers { gap: 14px; }
  .answer { padding: 18px 20px; font-size: clamp(1rem, 4vw, 1.15rem); border-radius: 16px; }
  .answer .huruf { flex: 0 0 44px; height: 44px; }
  .timer-ring { width: 66px; height: 66px; }
  .timer-ring::before { width: 52px; height: 52px; }
  .final-score { width: min(40vw, 170px); height: min(40vw, 170px); }
}

/* responsif kecil */
@media (max-width: 480px) {
  .start-card, .result-card { padding: 30px 20px; }
  .stat-row { gap: 8px; }
  .answer { padding: 13px 14px; font-size: .92rem; }
}