:root {
  --bg: #0f1730;
  --fg: #fff;
  --chip: rgba(255,255,255,0.18);
  --muted: #cfd8e3;
}

body { margin:0; font-family:Poppins,system-ui,Arial; background:var(--bg); color:var(--fg); }
.card { margin:14px auto; padding:16px; max-width:960px; background:rgba(255,255,255,0.06); border-radius:16px; backdrop-filter: blur(6px); }
h2,h3 { margin:0 0 10px; }

/* tombol */
button{ cursor:pointer; padding:10px 16px; border-radius:12px; border:0; font-weight:600; }
button.primary{ background:#7a5af8; color:#fff; }
button.danger{ background:#ff4d6d; color:#fff; }
button:disabled{ opacity:.6; cursor:default; }

/* chip */
.chip{ display:inline-block; padding:6px 12px; border-radius:999px; background:var(--chip); margin:2px; font-size:14px; }

/* countdown */
#tLbl{ text-align:center; font-size:36px; font-weight:900; letter-spacing:1px; text-shadow:0 2px 0 rgba(0,0,0,.25),0 4px 0 rgba(0,0,0,.2),0 8px 12px rgba(0,0,0,.55); }
#preLbl{ text-align:center; font-size:32px; font-weight:800; }

/* opsi jawaban */
/* ==== Opsi jawaban berwarna ==== */
button.opt{
  position: relative;
  font-weight: 700;
  border-radius: 14px;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}

/* warna A/B/C/D */
button.optA{ background:#ff4d6d; border-color:#ff4d6d; }   /* merah */
button.optB{ background:#ffd93d; border-color:#ffd93d; }   /* kuning */
button.optC{ background:#4cd964; border-color:#4cd964; }   /* oranye */
button.optD{ background:#3498db; border-color:#3498db; }   /* biru */

/* keadaan saat memilih */
button.opt.glow, button.opt.picked{
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25) inset, 0 6px 18px rgba(0,0,0,.25);
}
button.opt.dim{ opacity:.55 }

/* reveal */
button.opt.correct{
  box-shadow: 0 0 0 3px rgba(255,255,255,.35) inset, 0 0 0 9999px rgba(0,255,100,.18) inset;
}
button.opt.wrong{
  box-shadow: 0 0 0 3px rgba(255,255,255,.2) inset, 0 0 0 9999px rgba(255,0,60,.18) inset;
  filter: saturate(.8) brightness(.95);
}

/* disabled setelah terkunci */
button.opt:disabled{
  cursor: default;
  opacity: .85;
}

.opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.opts button{ height:80px; font-size:20px; font-weight:700; border-radius:14px; border:0; }
#o0{ background:#ff4d6d; } /* merah */
#o1{ background:#ffd93d; } /* kuning */
#o2{ background:#4cd964; } /* hijau */
#o3{ background:#3498db; } /* biru */
.opts button.glow{ box-shadow:0 0 18px rgba(255,255,255,.8); }
.opts button.dim{ opacity:.4; }

/* grafik hasil jawaban */
.vchart{ display:flex; align-items:flex-end; gap:20px; height:260px; padding:12px 4px; width:100%; }
.vbar{ flex:1 1 0; min-width:64px; border-radius:10px 10px 0 0; position:relative; display:flex; align-items:flex-end; justify-content:center; }
.vA{ background:#ff4d6d; } .vB{ background:#ffd93d; } .vC{ background:#4cd964; } .vD{ background:#3498db; }
.vbar .label{ position:absolute; bottom:-26px; font-size:14px; color:var(--muted); }
.vbar .val{ position:absolute; bottom:100%; transform:translateY(-8px); font-size:14px; font-weight:800; }

/* scoreboard (kecil & rapi di mobile) */
#board ol{ margin:0; padding:0; list-style:decimal inside; }
#board li.lb-item{ display:flex; justify-content:space-between; padding:6px 10px; border-bottom:1px solid rgba(255,255,255,.1); font-size:16px; }
#board .nm{ font-weight:600; font-size:15px; }
#board .sc{ font-weight:700; font-size:15px; }

/* podium */
#pod, #podium{ text-align:center; padding:20px; }
#pod div, #podium div{ margin:8px 0; }

/* overlay/banner */
#ov{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; z-index:9999; }
#ovText{ padding:14px 22px; border-radius:14px; font-size:22px; font-weight:800; background:#000; color:#fff; }

/* input PIN terkunci */
.ro{ background:#222; color:#999; cursor:not-allowed; }

/* spinner untuk podiumWait */
.loading-spinner{ margin:20px auto; width:40px; height:40px; border:4px solid rgba(255,255,255,.2); border-top:4px solid #fff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* responsive kecil */
@media (max-width:640px){
  .opts{ grid-template-columns:1fr; }
  #tLbl{ font-size:28px; }
  #board li.lb-item{ font-size:14px; }
  #board .nm, #board .sc{ font-size:13px; }
}

.loading-spinner{ margin:20px auto; width:40px; height:40px; border:4px solid rgba(255,255,255,.2); border-top:4px solid #fff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* recap podium */
.podium-wrap{
  display:flex; align-items:flex-end; justify-content:center; gap:16px;
  max-width:680px; margin:20px auto;
}
.podium-col{
  width:32%; text-align:center; background:rgba(255,255,255,0.06);
  border-radius:14px 14px 8px 8px; padding:14px 8px; position:relative;
}
.podium-col .cup{ font-size:34px; margin-bottom:6px; }
.podium-col .place{ font-size:32px; font-weight:900; opacity:.9; }
.podium-col .place.big{ font-size:40px; }
.podium-col .name{ font-weight:800; margin-top:6px; font-size:16px; }
.podium-col .score{ font-weight:700; font-size:14px; opacity:.9; }

.podium-col.gold{ transform:translateY(-18px); box-shadow:0 8px 24px rgba(255,215,0,.18); }
.podium-col.silver{ transform:translateY(-6px);  box-shadow:0 8px 24px rgba(220,220,220,.12); }
.podium-col.bronze{ transform:translateY(0);     box-shadow:0 8px 24px rgba(184,115,51,.12); }

@media (max-width:640px){
  .podium-wrap{ gap:10px; }
  .podium-col .name{ font-size:14px; }
  .podium-col .score{ font-size:12px; }
}

.podium-center{
  min-height:40vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.podium-center .title{ font-size:22px; font-weight:800; margin-bottom:10px; }
.podium-center .title .big{ font-size:56px; }
.podium-center .cup{ font-size:28px; margin-bottom:8px; }
.podium-center .name{ font-size:24px; font-weight:800; margin:8px 0; }
.podium-center .score{ font-size:20px; }
.loading-spinner{ margin:20px auto; width:40px; height:40px; border:4px solid rgba(255,255,255,.2); border-top:4px solid #fff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* Preload (menunggu pertanyaan) — center & lebih kecil */
#pre{
  min-height:40vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
#preLbl{ font-size:24px; font-weight:800; }

/* Loading spinner */
.loading-spinner{
  margin:20px auto; width:40px; height:40px;
  border:4px solid rgba(255,255,255,.2); border-top:4px solid #fff;
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* Podium (tengah) */
.podium-center{
  min-height:40vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.podium-center .title{ font-size:22px; font-weight:800; margin-bottom:10px; }
.podium-center .title .big{ font-size:56px; }
.podium-center .cup{ font-size:28px; margin-bottom:8px; }
.podium-center .name{ font-size:24px; font-weight:800; margin:8px 0; }
.podium-center .score{ font-size:20px; }

/* Recap 1-2-3 */
.podium-wrap{
  display:flex; align-items:flex-end; justify-content:center; gap:16px;
  max-width:680px; margin:20px auto;
}
.podium-col{
  width:32%; text-align:center; background:rgba(255,255,255,0.06);
  border-radius:14px 14px 8px 8px; padding:14px 8px; position:relative;
}
.podium-col .cup{ font-size:34px; margin-bottom:6px; }
.podium-col .place{ font-size:32px; font-weight:900; opacity:.9; }
.podium-col .place.big{ font-size:40px; }
.podium-col .name{ font-weight:800; margin-top:6px; font-size:16px; }
.podium-col .score{ font-weight:700; font-size:14px; opacity:.9; }
.podium-col.gold{ transform:translateY(-18px); box-shadow:0 8px 24px rgba(255,215,0,.18); }
.podium-col.silver{ transform:translateY(-6px);  box-shadow:0 8px 24px rgba(220,220,220,.12); }
.podium-col.bronze{ transform:translateY(0);     box-shadow:0 8px 24px rgba(184,115,51,.12); }

@media (max-width:640px){
  .podium-wrap{ gap:10px; }
  .podium-col .name{ font-size:14px; }
  .podium-col .score{ font-size:12px; }
}

/* Podium waiting countdown */
.podium-center{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:60vh; text-align:center;
}
.podium-center .title{
  font-size: clamp(24px,4vw,42px); font-weight:800; margin-bottom:12px;
}
.countdown-big{
  font-size: clamp(48px,10vw,128px);
  font-weight:900;
  line-height:1;
  text-shadow: 0 4px 18px rgba(0,0,0,.25);
}

.winner-name {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  margin-top: 8px;
}
.winner-score {
  font-size: clamp(18px, 4vw, 32px);
  margin-top: 4px;
  opacity: .9;
}
.recap {
  list-style:none;
  padding:0;
  margin:16px 0 0;
  font-size: clamp(20px,4vw,36px);
  font-weight:600;
}
.recap li{margin:6px 0;}

/* ==== ANIMASI PODIUM ==== */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(18px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pop {
  0% { transform: scale(.6); opacity: 0; }
  60%{ transform: scale(1.05); opacity: 1; }
  100%{ transform: scale(1); }
}
@keyframes pulseGlow {
  0%,100% { text-shadow: 0 4px 18px rgba(0,0,0,.15); }
  50%      { text-shadow: 0 8px 26px rgba(0,0,0,.28); }
}

.podium-center { 
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:60vh; text-align:center; 
}
.podium-center .title{
  font-size: clamp(24px,4vw,42px); font-weight:800; margin-bottom:12px;
  animation: fadeUp .6s ease both;
}
.countdown-big{
  font-size: clamp(48px,10vw,128px);
  font-weight:900; line-height:1;
  text-shadow: 0 4px 18px rgba(0,0,0,.25);
  animation: pop .5s ease both;
}

/* Winner text with pop + pulse */
.winner-name {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 900;
  margin-top: 8px;
  animation: pop .48s ease both, pulseGlow 2.4s ease-in-out infinite;
}
.winner-score {
  font-size: clamp(18px, 4vw, 32px);
  margin-top: 4px;
  opacity: .9;
  animation: fadeUp .5s .1s ease both;
}

/* Recap list */
.recap { list-style:none; padding:0; margin:16px 0 0;
  font-size: clamp(20px,4vw,36px); font-weight:700; }
.recap li{ margin:6px 0; animation: fadeUp .45s ease both; }
.recap li:nth-child(2){ animation-delay:.08s; }
.recap li:nth-child(3){ animation-delay:.16s; }

/* Emoji burst container */
.burst {
  position: absolute; inset: 0; overflow: visible; pointer-events:none;
}
.burst i{
  position:absolute; font-style:normal; will-change: transform, opacity;
  animation: burstFly 900ms ease-out forwards;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
@keyframes burstFly{
  0%   { transform: translate(var(--x,0), var(--y,0)) scale(.6) rotate(0deg); opacity:0; }
  12%  { opacity:1; }
  100% { transform: translate(var(--tx,0), var(--ty,-120px)) scale(1.1) rotate(var(--rot,30deg)); opacity:0; }
}

.podium-gold {
  background: linear-gradient(135deg,#ffd700,#ffb600);
  color:#fff;
}
.podium-silver {
  background: linear-gradient(135deg,#c0c0c0,#e0e0e0);
  color:#000;
}
.podium-bronze {
  background: linear-gradient(135deg,#cd7f32,#a65c1d);
  color:#fff;
}
.podium-recap {
  background: linear-gradient(135deg,#0fd5a7,#2bb0ff);
  color:#fff;
}

/* bikin sudut agak halus */
.podium-gold,.podium-silver,.podium-bronze,.podium-recap {
  border-radius:22px; padding:32px; margin:0 12px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}

/* ===== Overlay agar selalu muncul di HP ===== */
.podium-overlay{
  position: fixed;
  inset: 0;
  display: none;               /* show via JS */
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;               /* di atas semua */
  backdrop-filter: blur(2px);
}
.podium-card{
  width: 100%;
  max-width: 720px;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

/* Center content */
.podium-center{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: 50vh; text-align:center;
}
.podium-center .title{
  font-size: clamp(24px,4vw,42px); font-weight:800; margin-bottom:12px;
  animation: fadeUp .6s ease both;
}
.countdown-big{
  font-size: clamp(48px,10vw,128px);
  font-weight:900; line-height:1;
  text-shadow: 0 4px 18px rgba(0,0,0,.25);
  animation: pop .5s ease both;
}
.winner-name {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 900; margin-top: 8px;
  animation: pop .48s ease both, pulseGlow 2.4s ease-in-out infinite;
}
.winner-score {
  font-size: clamp(18px, 4vw, 32px);
  margin-top: 4px; opacity: .9; animation: fadeUp .5s .1s ease both;
}
.recap { list-style:none; padding:0; margin:16px 0 0;
  font-size: clamp(20px,4vw,36px); font-weight:700; }
.recap li{ margin:6px 0; animation: fadeUp .45s ease both; }
.recap li:nth-child(2){ animation-delay:.08s; }
.recap li:nth-child(3){ animation-delay:.16s; }

/* Warna podium sesuai piala */
.podium-gold   { background: linear-gradient(135deg,#ffd700,#ffb600); color:#5b3f00; }
.podium-silver { background: linear-gradient(135deg,#e5e5e5,#cfcfcf); color:#262626; }
.podium-bronze { background: linear-gradient(135deg,#cd7f32,#a65c1d); color:#fff; }
.podium-recap  { background: linear-gradient(135deg,#0fd5a7,#2bb0ff); color:#fff; }

/* Emoji burst */
.burst { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.burst i{
  position:absolute; font-style:normal; will-change: transform, opacity;
  animation: burstFly 900ms ease-out forwards;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}
@keyframes burstFly{
  0%   { transform: translate(var(--x,0), var(--y,0)) scale(.6) rotate(0deg); opacity:0; }
  12%  { opacity:1; }
  100% { transform: translate(var(--tx,0), var(--ty,-120px)) scale(1.1) rotate(var(--rot,30deg)); opacity:0; }
}
/* Animasi bantu */
@keyframes fadeUp{0%{opacity:0;transform:translateY(18px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
@keyframes pulseGlow{0%,100%{text-shadow:0 4px 18px rgba(0,0,0,.15)}50%{text-shadow:0 8px 26px rgba(0,0,0,.28)}}

.choices{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:14px;
}
button.opt{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:12px 16px;
  font-size:16px;
  font-weight:600;
  border-radius:12px;
  border:none;
  color:#fff;
  cursor:pointer;
}

/* label A/B/C/D */
button.opt .lbl{
  width:28px;height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.25);
  font-weight:700;
}

/* teks jawaban */
button.opt .txt{
  flex:1;
  text-align:left;
}

/* warna tombol */
.optA{background:#7a5af8;}
.optB{background:#22c55e;}
.optC{background:#f59e0b;}
.optD{background:#ef4444;}