/* ============================================================
   css/style.css — Tema visual utama
   Palet: langit cerah, rumput hijau, aksen biru (Tim A) & hijau (Tim B)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@600;700;800&display=swap');

:root{
  --sky-top:#6EC6FF;
  --sky-bottom:#BFEAFF;
  --grass:#7ED957;
  --grass-dark:#5CB83A;
  --teamA:#2F80FF;
  --teamA-dark:#1B5FD9;
  --teamA-light:#DCEBFF;
  --teamB:#2ECC71;
  --teamB-dark:#1E9E56;
  --teamB-light:#DFFCE9;
  --ink:#26324A;
  --white:#FFFFFF;
  --gold:#FFC93C;
  --coral:#FF7A59;
  --purple:#8C6BFF;
  --panel-radius:26px;
  --btn-radius:20px;
  --shadow-soft:0 8px 0 rgba(0,0,0,.12);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Nunito',sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 65%,var(--grass) 65%,var(--grass-dark) 100%);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

h1,h2,h3,.display{font-family:'Baloo 2',cursive;}

button{
  font-family:'Baloo 2',cursive;
  cursor:pointer;
  border:none;
  outline:none;
}
button:focus-visible{outline:3px solid #fff; outline-offset:2px;}

.screen{
  display:none;
  min-height:100vh;
  width:100%;
  padding:24px;
  position:relative;
  z-index:2;
}
.screen.active{display:flex; flex-direction:column;}

/* ---------- Awan dekorasi ---------- */
.cloud{
  position:fixed; z-index:1; opacity:.9; font-size:42px; pointer-events:none;
  animation:driftCloud 40s linear infinite;
}
@keyframes driftCloud{ from{transform:translateX(-10vw);} to{transform:translateX(110vw);} }

/* ============ MENU UTAMA ============ */
.menu-screen{align-items:center; text-align:center;}
.menu-main{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;}
.game-logo{
  font-size:clamp(2.2rem,6vw,3.6rem);
  color:var(--white);
  text-shadow:0 4px 0 rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.15);
  margin:0;
  line-height:1.1;
}
.game-tagline{
  font-size:clamp(1rem,2.4vw,1.4rem);
  color:#fff;
  background:rgba(255,255,255,.18);
  padding:8px 22px;
  border-radius:999px;
  font-weight:800;
  margin-bottom:10px;
}
.robot-hero{width:clamp(110px,14vw,220px); animation:bounceGentle 2.4s ease-in-out infinite; filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));}
.robot-hero img{display:block; width:100%; height:auto;}
@keyframes bounceGentle{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-14px) rotate(2deg);}}

.footer-credit{
  margin-top:auto; padding-top:18px; color:rgba(255,255,255,.85); font-weight:700;
  font-size:clamp(.75rem,1.1vw,.95rem); text-shadow:0 2px 0 rgba(0,0,0,.15); text-align:center;
}

.menu-buttons{display:flex; flex-direction:column; gap:14px; width:100%; max-width:420px;}
.btn-big{
  padding:20px 28px;
  font-size:1.3rem;
  font-weight:700;
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center; gap:12px;
  transition:transform .12s;
}
.btn-big:active{transform:translateY(6px); box-shadow:0 2px 0 rgba(0,0,0,.12);}
.btn-big.primary{background:var(--gold); color:#5b3b00; font-size:1.5rem;}
.btn-big.teamA-btn{background:var(--teamA); color:#fff;}
.btn-big.teamB-btn{background:var(--teamB); color:#fff;}

/* ============ PANEL / CARD GENERIK ============ */
.panel{
  background:var(--white);
  border-radius:var(--panel-radius);
  padding:28px;
  box-shadow:0 10px 0 rgba(0,0,0,.10);
  max-width:640px;
  margin:0 auto;
  width:100%;
}
.panel-title{font-size:1.7rem; margin:0 0 18px; text-align:center;}
.top-bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.back-btn{
  background:rgba(255,255,255,.85); border-radius:999px; padding:10px 18px;
  font-weight:700; font-size:1rem; color:var(--ink); box-shadow:var(--shadow-soft);
}
.back-btn:active{transform:translateY(4px); box-shadow:none;}

/* ============ CHECKBOX CARDS (Pilih Materi) ============ */
.chapter-block{margin-bottom:18px;}
.chapter-header{
  font-size:1.15rem; font-weight:800; display:flex; align-items:center; gap:10px;
  background:var(--teamA-light); padding:12px 16px; border-radius:16px; cursor:pointer;
}
.topic-list{display:flex; flex-wrap:wrap; gap:10px; padding:12px 4px;}
.topic-chip{
  padding:10px 16px; border-radius:999px; background:#F2F4F8; font-weight:700; font-size:.95rem;
  display:flex; align-items:center; gap:6px; cursor:pointer; border:2px solid transparent;
}
.topic-chip.checked{background:var(--teamA-light); border-color:var(--teamA);}
.checkbox-dot{width:18px; height:18px; border-radius:6px; background:#fff; border:2px solid #999; display:inline-block; position:relative;}
.topic-chip.checked .checkbox-dot{background:var(--teamA); border-color:var(--teamA);}
.topic-chip.checked .checkbox-dot::after{content:'✓'; color:#fff; font-size:13px; position:absolute; left:2px; top:-2px;}

/* ============ KELOMPOK / TEAM NAME FORM ============ */
.team-form{display:flex; flex-direction:column; gap:20px;}
.team-input-card{
  border-radius:20px; padding:18px; display:flex; align-items:center; gap:14px;
}
.team-input-card.A{background:var(--teamA-light);}
.team-input-card.B{background:var(--teamB-light);}
.team-input-card .team-emoji{font-size:2.4rem;}
.team-input-card input{
  flex:1; border:none; background:#fff; border-radius:14px; padding:12px 16px;
  font-family:'Baloo 2',cursive; font-size:1.2rem; font-weight:700; color:var(--ink);
}
.team-input-card.A input{outline:2px solid var(--teamA);}
.team-input-card.B input{outline:2px solid var(--teamB);}

/* ============ PENGATURAN ============ */
.setting-row{margin-bottom:20px;}
.setting-label{font-weight:800; margin-bottom:10px; font-size:1.05rem;}
.option-pills{display:flex; gap:10px; flex-wrap:wrap;}
.pill{
  padding:10px 20px; border-radius:999px; background:#F2F4F8; font-weight:800; font-size:1rem;
}
.pill.active{background:var(--purple); color:#fff;}
.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0;}
.switch{width:56px; height:30px; border-radius:999px; background:#ccc; position:relative; transition:.2s;}
.switch::after{content:''; width:24px; height:24px; border-radius:50%; background:#fff; position:absolute; top:3px; left:3px; transition:.2s; box-shadow:0 2px 4px rgba(0,0,0,.2);}
.switch.on{background:var(--teamB);}
.switch.on::after{left:29px;}

/* ============ PETUNJUK ============ */
.help-list{display:flex; flex-direction:column; gap:14px; text-align:left;}
.help-item{display:flex; gap:14px; align-items:flex-start; background:#F8F9FC; padding:14px; border-radius:16px;}
.help-item .icon{font-size:1.8rem;}
.help-item p{margin:0; font-weight:700; line-height:1.4;}

/* ============ GAME SCREEN ============ */
.game-screen{padding:14px 14px 18px;}
.game-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.score-pill{
  display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; font-weight:800; font-size:1.1rem; color:#fff;
}
.score-pill.A{background:var(--teamA);}
.score-pill.B{background:var(--teamB);}
.round-info{font-weight:800; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.15); font-size:1.05rem;}

.timer-wrap{display:flex; justify-content:center; margin:4px 0 10px;}
.timer-circle{
  width:74px; height:74px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:800; box-shadow:var(--shadow-soft); color:var(--coral);
  border:5px solid var(--gold);
  transition:transform .2s;
}
.timer-circle.urgent{color:#fff; background:var(--coral); border-color:#c0392b; animation:pulseUrgent .5s infinite;}
@keyframes pulseUrgent{0%,100%{transform:scale(1);} 50%{transform:scale(1.12);}}

/* ---- arena tarik tambang ---- */
.tug-arena{
  background:rgba(255,255,255,.55); border-radius:22px; padding:14px 10px; margin-bottom:12px;
  position:relative;
}
.tug-track{position:relative; height:clamp(80px,10vw,130px); display:flex; align-items:center;}
.tug-slots{position:absolute; left:0; right:0; top:50%; height:8px; transform:translateY(-50%); background:#fff; border-radius:8px; box-shadow:inset 0 2px 4px rgba(0,0,0,.1);}
.tug-slot-marks{position:absolute; left:0; right:0; top:0; bottom:0; display:flex; justify-content:space-between; align-items:center; padding:0 2%;}
.tug-slot-marks span{width:4px; height:22px; background:rgba(0,0,0,.15); border-radius:2px;}
.tug-slot-marks span.center{background:var(--coral); height:32px; width:5px;}

.tug-rope-knot{
  position:absolute; top:50%; font-size:clamp(1.6rem,3vw,2.6rem); transform:translate(-50%,-50%);
  transition:left .9s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));
  z-index:2;
}
.tug-rope-knot.pulling{animation:knotShake .18s linear infinite;}
@keyframes knotShake{
  0%,100%{transform:translate(-50%,-50%) rotate(0deg);}
  25%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.05);}
  75%{transform:translate(-50%,-50%) rotate(8deg) scale(1.05);}
}

/* karakter robot tarik tambang (gambar) */
.tug-char{
  position:absolute; top:50%; width:clamp(56px,9vw,150px); height:clamp(56px,9vw,150px);
  transform:translateY(-50%); transition:left .9s cubic-bezier(.34,1.56,.64,1);
  display:flex; align-items:flex-end; justify-content:center;
}
.tug-char img{width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 6px 6px rgba(0,0,0,.2));}
.tug-char.charA{left:1%; animation:idlePullA 1.7s ease-in-out infinite;}
.tug-char.charB{right:1%; animation:idlePullB 1.7s ease-in-out infinite .85s;}
.tug-char.charB img{transform:scaleX(-1);}

/* Goyangan idle: kedua robot seolah bergantian menarik tali */
@keyframes idlePullA{
  0%,100%{transform:translateY(-50%) rotate(-4deg) translateX(0);}
  50%{transform:translateY(-50%) rotate(3deg) translateX(-6%);}
}
@keyframes idlePullB{
  0%,100%{transform:translateY(-50%) rotate(4deg) translateX(0);}
  50%{transform:translateY(-50%) rotate(-3deg) translateX(6%);}
}

/* Animasi menarik kuat saat ronde dimenangkan */
.tug-char.pulling-win{animation:pullWin .65s ease-in-out 2 !important;}
.tug-char.pulling-lose{animation:pullLose .65s ease-in-out 2 !important;}
@keyframes pullWin{
  0%{transform:translateY(-50%) rotate(-6deg) translateX(0) scale(1);}
  30%{transform:translateY(-50%) rotate(-18deg) translateX(-14%) scale(1.08);}
  60%{transform:translateY(-50%) rotate(-4deg) translateX(-4%) scale(1.04);}
  100%{transform:translateY(-50%) rotate(-6deg) translateX(0) scale(1);}
}
@keyframes pullLose{
  0%{transform:translateY(-50%) rotate(4deg) translateX(0) scale(1);}
  30%{transform:translateY(-50%) rotate(14deg) translateX(10%) scale(.94);}
  60%{transform:translateY(-50%) rotate(6deg) translateX(4%) scale(.97);}
  100%{transform:translateY(-50%) rotate(4deg) translateX(0) scale(1);}
}

.tug-char.win-anim{animation:celebrate .6s ease-in-out infinite !important;}
@keyframes celebrate{0%,100%{transform:translateY(-50%) scale(1);} 50%{transform:translateY(-62%) scale(1.15);}}
.tug-char.lose-anim{animation:none !important; transform:translateY(-50%) rotate(-8deg);}

.final-push-banner{
  text-align:center; font-size:clamp(1rem,1.8vw,1.4rem); font-weight:800; color:var(--coral); margin-top:2px;
  animation:pulseUrgent .6s infinite;
}

/* ---- kartu soal ---- */
.question-card{
  background:#fff; border-radius:24px; padding:18px 16px; text-align:center; box-shadow:0 8px 0 rgba(0,0,0,.08);
  margin-bottom:12px;
}
.question-icon{font-size:2.6rem; margin-bottom:4px;}
.question-topic-tag{
  display:inline-block; background:var(--purple); color:#fff; font-weight:800; font-size:.8rem;
  padding:4px 14px; border-radius:999px; margin-bottom:8px;
}
.question-text{font-size:clamp(1.05rem,3vw,1.5rem); font-weight:800; line-height:1.35; margin:0;}

/* ---- area jawaban dua kelompok ---- */
.answer-zones{display:flex; gap:12px;}
.answer-zone{flex:1; border-radius:22px; padding:12px; display:flex; flex-direction:column; gap:10px;}
.answer-zone.A{background:var(--teamA-light);}
.answer-zone.B{background:var(--teamB-light);}
.zone-header{display:flex; align-items:center; justify-content:space-between; padding:0 4px;}
.zone-title{font-weight:800; font-size:1rem; display:flex; align-items:center; gap:6px;}
.combo-badge{
  font-size:.85rem; font-weight:800; background:var(--gold); color:#5b3b00; padding:3px 10px; border-radius:999px;
  display:none;
}
.combo-badge.show{display:inline-block; animation:popIn .3s;}
@keyframes popIn{from{transform:scale(0);} to{transform:scale(1);}}

.answer-btn{
  width:100%; padding:14px 10px; border-radius:16px; background:#fff; font-weight:800; font-size:.95rem;
  color:var(--ink); text-align:left; display:flex; gap:8px; align-items:center;
  box-shadow:0 4px 0 rgba(0,0,0,.1); transition:transform .1s;
  line-height:1.25;
}
.answer-btn:active{transform:translateY(3px); box-shadow:none;}
.answer-btn .opt-label{
  width:26px; height:26px; border-radius:50%; background:#eee; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; flex-shrink:0;
}
.answer-zone.A .answer-btn .opt-label{background:var(--teamA); color:#fff;}
.answer-zone.B .answer-btn .opt-label{background:var(--teamB); color:#fff;}
.answer-btn.locked{opacity:.55;}
.answer-btn.selected{outline:4px solid var(--gold);}
.answer-btn.correct-reveal{background:#DFFCE9; outline:4px solid var(--teamB);}
.answer-btn.wrong-reveal{background:#FFE3E0; outline:4px solid var(--coral);}
.answer-btn:disabled{cursor:default;}

.lock-tag{
  font-size:.85rem; font-weight:800; text-align:center; padding:6px; border-radius:10px; background:rgba(255,255,255,.7);
}

/* ---- overlay feedback ronde ---- */
.round-overlay{
  position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
  background:rgba(38,50,74,.55); backdrop-filter:blur(2px);
}
.round-overlay.show{display:flex;}
.round-overlay-card{
  background:#fff; border-radius:28px; padding:34px 30px; text-align:center; max-width:360px;
  animation:popIn .35s;
  box-shadow:0 14px 0 rgba(0,0,0,.15);
}
.round-overlay-emoji{font-size:3.4rem; margin-bottom:6px;}
.round-overlay-title{font-size:1.7rem; margin:0 0 6px;}
.round-overlay-sub{font-weight:700; color:#6b7280; margin:0;}
.round-overlay-explain{margin-top:12px; font-weight:700; font-size:.95rem; background:#F2F4F8; padding:12px; border-radius:14px;}

/* ---- countdown mulai ---- */
.countdown-overlay{
  position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));
}
.countdown-overlay.show{display:flex;}
.countdown-number{font-size:9rem; color:#fff; text-shadow:0 6px 0 rgba(0,0,0,.2); animation:popIn .5s;}

/* ============ HASIL ============ */
.result-screen{align-items:center; text-align:center; gap:14px;}
.winner-banner{font-size:clamp(1.8rem,5vw,2.6rem); color:var(--white); text-shadow:0 4px 0 rgba(0,0,0,.18);}
.result-cards{display:flex; gap:14px; width:100%; max-width:640px; flex-wrap:wrap; justify-content:center;}
.result-card{flex:1; min-width:240px; border-radius:22px; padding:20px; color:#fff; text-align:left;}
.result-card.A{background:linear-gradient(160deg,var(--teamA),var(--teamA-dark));}
.result-card.B{background:linear-gradient(160deg,var(--teamB),var(--teamB-dark));}
.result-card h3{margin:0 0 10px; font-size:1.4rem;}
.result-stat{display:flex; justify-content:space-between; font-weight:700; padding:4px 0; border-bottom:1px dashed rgba(255,255,255,.3);}

.recap-panel{max-width:640px; width:100%; text-align:left;}
.recap-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.recap-topic{width:150px; font-weight:800; font-size:.9rem; flex-shrink:0;}
.recap-bar-bg{flex:1; background:#eee; border-radius:999px; height:16px; overflow:hidden;}
.recap-bar-fill{height:100%; background:var(--teamB); border-radius:999px; transition:width .6s;}
.recap-pct{width:44px; text-align:right; font-weight:800; font-size:.9rem;}

.result-buttons{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}

/* ============ MODAL RESET ============ */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:70; display:none; align-items:center; justify-content:center;}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff; border-radius:22px; padding:26px; text-align:center; max-width:320px;}
.modal-box p{font-weight:800; font-size:1.1rem;}
.modal-buttons{display:flex; gap:12px; margin-top:14px;}
.modal-buttons button{flex:1; padding:12px; border-radius:14px; font-weight:800; font-size:1rem;}
.btn-yes{background:var(--coral); color:#fff;}
.btn-no{background:#eee; color:var(--ink);}

/* ============ CONFETTI ============ */
.confetti-piece{
  position:fixed; top:-30px; z-index:80; font-size:1.6rem; pointer-events:none;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg); opacity:1;}
  100%{transform:translateY(110vh) rotate(360deg); opacity:.9;}
}

/* ============ SUDDEN DEATH BANNER ============ */
.sudden-death-tag{
  background:var(--coral); color:#fff; font-weight:800; padding:10px 18px; border-radius:999px;
  display:inline-block; margin-bottom:10px;
}