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

:root{
  --merah:#E23B2E;       /* merah dinaikkan agar lebih menyala di proyektor */
  --merah-terang:#FF6B52; /* varian merah lebih terang, khusus untuk TEKS di atas background gelap (proyektor lumens rendah bikin merah gelap kelihatan hilang) */
  --merah-deep:#B31F22;
  --merah-darker:#160404; /* background gelap solid, hampir hitam murni */
  --putih:#FFFFFF;
  --kuning:#FFD84D;       /* pengganti emas: jauh lebih terang & menyala */
  --kuning-dim:#F2C233;
  --ink:#0E0806;
  --hijau:#3FCB77;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; background:var(--merah-darker); overflow:hidden;}
body{font-family:'Plus Jakarta Sans',sans-serif; color:var(--putih);}

.scene{
  display:none; position:relative; width:100vw; height:100vh; overflow:hidden;
}
.scene.active{display:block;}

/* dekorasi flagcut dibikin lebih redup opacity-nya supaya tidak mengurangi kontras teks */
.flagcut{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 54%, var(--kuning-dim) 54.4%, var(--kuning-dim) 54.9%, transparent 55.3%),
    linear-gradient(115deg, var(--merah-darker) 0%, var(--merah-deep) 46%, #241211 46%, #241211 100%);
  opacity:.55;
}
.texture{
  position:absolute; inset:0; pointer-events:none; opacity:.04;
  background-image: radial-gradient(circle, var(--putih) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.watermark-num{
  position:absolute; font-family:'Anton',sans-serif; color:rgba(255,255,255,.04);
  font-size:min(60vw,900px); line-height:1; top:-6%; right:-4%; letter-spacing:-0.02em; pointer-events:none; user-select:none;
}

/* ===== OPENING ===== */
#scene-opening{background:var(--merah-darker);}
.op-wrap{
  position:relative; z-index:2; text-align:center;
  max-width:900px; margin:56px auto 0; padding:44px 40px 40px; border-radius:26px;
  background:#000000; /* solid, bukan transparan, biar tidak bercampur dgn ambient light */
  border:2px solid var(--kuning);
  box-shadow:0 0 0 transparent;
}
.op-badge{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  font-family:'Space Mono',monospace; font-size:13px; font-weight:700; letter-spacing:.25em;
  color:#160404; background:var(--kuning);
  padding:8px 22px; border-radius:999px;
}
.op-badge span{color:var(--merah-deep); font-size:11px;}
.op-eyebrow{font-family:'Space Mono',monospace; letter-spacing:.35em; font-size:12px; color:var(--kuning); text-transform:uppercase; font-weight:700;}
.op-title{font-family:'Anton',sans-serif; font-size:clamp(32px,6vw,68px); letter-spacing:.01em; margin:10px 0 4px; line-height:1; color:var(--putih); text-shadow:0 0 30px rgba(255,255,255,.4);}
.op-sub{font-family:'Space Mono',monospace; font-size:14px; color:var(--kuning); letter-spacing:.15em; font-weight:700;}
.bracket{max-width:640px; margin:44px auto 0; display:grid; gap:14px;}
.rt-card{
  position:relative; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:18px;
  background:#000000;
  border:1.5px solid var(--kuning); color:var(--putih);
  border-radius:10px; padding:14px 20px;
}
.pair-divider{font-family:'Space Mono',monospace; color:var(--kuning); font-size:11px; letter-spacing:.2em; font-weight:700;}
.op-waiting{
  margin-top:40px; font-family:'Space Mono',monospace; letter-spacing:.2em; font-size:13px;
  color:var(--kuning); opacity:1; font-weight:700;
}
.op-waiting::after{content:''; display:inline-block; width:6px; height:6px; background:var(--kuning); border-radius:50%;
  margin-left:8px; animation:blink 1.1s infinite;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:.15;}}

/* ===== ROUND START ===== */
#scene-round{background:var(--merah-darker); display:none; align-items:center; justify-content:center;}
#scene-round.active{display:flex;}
.round-burst{position:relative; z-index:2; text-align:center;}
.round-num{
  font-family:'Anton',sans-serif; font-size:clamp(90px,18vw,200px); color:var(--merah-terang); line-height:.85;
  -webkit-text-stroke:4px var(--putih); letter-spacing:.02em; animation:pop .6s ease-out;
  text-shadow:0 0 40px rgba(255,107,82,.6);
}
@keyframes pop{0%{transform:scale(.6); opacity:0;} 100%{transform:scale(1); opacity:1;}}
.round-label{font-family:'Space Mono',monospace; letter-spacing:.4em; font-size:15px; color:var(--kuning); margin-top:6px; font-weight:700;}

/* ===== SOAL / TIMER ===== */
#scene-soal{background:var(--merah-darker);}
.soal-topbar{
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  padding:18px 32px; border-bottom:2px solid var(--kuning);
}
.soal-topbar .tag{font-family:'Space Mono',monospace; letter-spacing:.2em; font-size:16px; color:var(--kuning); font-weight:700;}
.soal-topbar .prog{font-family:'Space Mono',monospace; font-size:16px; color:var(--putih);}
.soal-body{position:relative; z-index:2; max-width:820px; margin:0 auto; padding:5vh 24px 0; text-align:center;}
.soal-kategori{font-family:'Space Mono',monospace; font-size:20px; letter-spacing:.3em; color:var(--kuning); text-transform:uppercase; font-weight:700;}
.soal-pertanyaan{font-family:'Anton',sans-serif; font-size:clamp(28px,5.4vw,68px); line-height:1.18; margin:18px 0 40px; color:var(--putih); text-shadow:0 0 24px rgba(255,255,255,.35);}
.timer{
  font-family:'Space Mono',monospace; font-weight:700; font-size:clamp(60px,9vw,100px);
  letter-spacing:.05em; color:var(--kuning); text-shadow:0 0 30px rgba(255,216,77,.55);
}
.timer.critical{color:var(--merah-terang); -webkit-text-stroke:2px var(--putih); animation:pulse .5s infinite; text-shadow:0 0 30px rgba(255,107,82,.65);}
@keyframes pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.06);}}
.timer-bar{max-width:420px; height:10px; margin:14px auto 0; background:rgba(255,255,255,.15); border-radius:5px; overflow:hidden;}
.timer-bar-fill{height:100%; background:var(--kuning); width:100%; transition:width 1s linear, background .3s;}
.timer-bar-fill.critical{background:var(--merah);}

.teams-strip{position:relative; z-index:2; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; padding:26px 20px 0;}
.team-chip{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:20px; padding:12px 26px; border-radius:999px; border:1.5px solid var(--kuning); color:var(--putih); background:#000000;}
.team-chip.answering{background:var(--kuning); color:#160404; border-color:var(--kuning); animation:glow 1s infinite; font-weight:800;}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,216,77,.7);} 50%{box-shadow:0 0 0 10px rgba(255,216,77,0);}}

.score-side{position:absolute; z-index:2; top:110px; right:0; bottom:0; width:290px; padding:0 24px; display:none;}
@media(min-width:900px){.score-side{display:block;} .soal-body{max-width:900px; margin:0 0 0 6%;}}
.score-title{font-family:'Space Mono',monospace; font-size:15px; letter-spacing:.25em; color:var(--kuning); margin-bottom:16px; font-weight:700;}
.score-row{display:flex; justify-content:space-between; align-items:center; font-family:'Plus Jakarta Sans',sans-serif; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.18);}
.score-row .nm{font-weight:700; font-size:20px; color:var(--putih);}
.score-row .pt{font-family:'Space Mono',monospace; font-weight:700; color:var(--kuning); font-size:22px;}
.score-row.lead .pt{color:var(--merah-terang);}

/* ===== BENAR / SALAH ===== */
.scene.result-scene.active{display:flex; align-items:center; justify-content:center; text-align:center;}
#scene-benar{background:#0B3A1E;}
#scene-salah{background:#3A0B0B;}
.result-wrap{position:relative; z-index:2; color:var(--putih);}
.result-icon{font-size:clamp(60px,12vw,110px); line-height:1;}
.result-label{font-family:'Anton',sans-serif; font-size:clamp(40px,8vw,80px); letter-spacing:.02em; margin:6px 0; color:var(--putih); text-shadow:0 0 30px rgba(255,255,255,.45);}
.result-point{font-family:'Space Mono',monospace; font-size:clamp(20px,2.6vw,26px); color:var(--kuning); font-weight:700;}
.result-team{margin-top:22px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px; letter-spacing:.15em; text-transform:uppercase; opacity:1; color:var(--putih);}

/* ===== RANKING ===== */
#scene-ranking{background:var(--merah-darker); display:flex; align-items:center; justify-content:center;}
.rank-wrap{position:relative; z-index:2; text-align:center; padding:20px;}
.rank-title-wrap{
  display:inline-block; margin:0 auto 44px; padding:18px 42px; border-radius:18px;
  background:#000000;
  border:2px solid var(--kuning);
}
.rank-title{font-family:'Anton',sans-serif; font-size:clamp(30px,5vw,52px); margin-bottom:8px; color:var(--putih); text-shadow:0 0 30px rgba(255,255,255,.4);}
.rank-sub{font-family:'Space Mono',monospace; letter-spacing:.25em; font-size:12px; color:var(--kuning); margin-bottom:0; font-weight:700;}
.podium{display:flex; align-items:flex-end; justify-content:center; gap:16px;}
.pod{width:150px; border-radius:8px 8px 0 0; padding-top:18px; position:relative; font-family:'Plus Jakarta Sans',sans-serif;}
.pod .medal{font-family:'Anton',sans-serif; font-size:34px;}
.pod .rtn{font-weight:800; font-size:15px; margin-top:6px;}
.pod .pts{font-family:'Space Mono',monospace; font-size:13px; opacity:.9; margin-top:2px;}
.pod.first{height:190px; background:var(--kuning); color:#160404; order:2;}
.pod.second{height:140px; background:#E4DED2; color:#160404; order:1;}
.pod.third{height:110px; background:#E8A662; color:#160404; order:3;}

.waiting-msg{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:var(--merah-darker); z-index:99; font-family:'Space Mono',monospace; color:var(--kuning); letter-spacing:.2em; font-size:13px; font-weight:700;
}