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

body {
  font-family: 'Comic Sans MS', 'Trebuchet MS', 'Segoe UI', sans-serif;
  min-height: 100vh;
  background: linear-gradient(160deg, #fef3c7 0%, #bfdbfe 50%, #fecaca 100%);
  color: #1a202c;
}

.hidden { display: none !important; }

#screen-setup, #screen-game, #screen-winner { padding: 24px; }

#btn-to-dashboard {
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: bold;
  color: #2b6cb0;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 10px;
  text-decoration: none;
}
#btn-to-dashboard:hover { background: rgba(255, 255, 255, 0.95); }

h1 { font-size: 24px; color: #2b6cb0; margin-bottom: 4px; }
.setup-label { font-size: 14px; font-weight: bold; color: #2d3748; margin: 16px 0 8px; }
.game-intro { max-width: 640px; font-size: 13px; line-height: 1.7; color: #4a5568; margin: 20px 0 4px; padding-top: 16px; border-top: 1px dashed rgba(0, 0, 0, 0.15); }

#category-checklist {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.category-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #2d3748;
  cursor: pointer;
}
.category-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

#target-choice { display: flex; gap: 10px; }
.target-btn {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  color: #2d3748;
  cursor: pointer;
}
.target-btn.target-selected {
  background: linear-gradient(135deg, #4299e1, #3182ce);
  color: white;
  box-shadow: 0 3px 0 #2b6cb0;
}

#btn-start {
  display: block;
  margin-top: 20px;
  padding: 14px 32px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #48bb78, #38a169);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 0 #2f855a;
}
#btn-start:disabled { background: #a0aec0; box-shadow: 0 4px 0 #718096; cursor: not-allowed; }
#btn-start:hover:not(:disabled) { transform: translateY(-2px); }

#rope-track {
  max-width: 500px;
  margin: 0 auto 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 10px;
}
#rope-illustration { width: 100%; height: auto; display: block; }

@keyframes celebrate-bounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.03) rotate(-1deg); }
  50% { transform: scale(1.06) rotate(1deg); }
  75% { transform: scale(1.03) rotate(-1deg); }
}
#rope-track.celebrate { animation: celebrate-bounce 0.8s ease; }

#rope-knot { transition: transform 0.4s ease; }
#rope-knot.no-transition { transition: none; }

@keyframes lean-pull-kiri {
  0% { transform: rotate(0deg) translateX(0); }
  35% { transform: rotate(-11deg) translateX(-4px); }
  100% { transform: rotate(0deg) translateX(0); }
}
@keyframes lean-pull-kanan {
  0% { transform: rotate(0deg) translateX(0); }
  35% { transform: rotate(11deg) translateX(4px); }
  100% { transform: rotate(0deg) translateX(0); }
}
#char-kiri.leaning { animation: lean-pull-kiri 0.35s ease; transform-origin: 0px 14px; }
#char-kanan.leaning { animation: lean-pull-kanan 0.35s ease; transform-origin: 0px 14px; }

@keyframes defeated-fall-kiri {
  from { transform: rotate(0deg) translate(0, 0); }
  to { transform: rotate(65deg) translate(28px, 12px); }
}
@keyframes defeated-fall-kanan {
  from { transform: rotate(0deg) translate(0, 0); }
  to { transform: rotate(-65deg) translate(-28px, 12px); }
}
#char-kiri.defeated { animation: defeated-fall-kiri 0.6s ease forwards; transform-origin: 0px 14px; }
#char-kanan.defeated { animation: defeated-fall-kanan 0.6s ease forwards; transform-origin: 0px 14px; }

#team-panels {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.team-panel {
  flex: 1;
  min-width: 260px;
  max-width: 340px;
  padding: 16px;
  border-radius: 16px;
  text-align: center;
}
.team-kiri { background: linear-gradient(160deg, #ebf8ff, #bee3f8); border: 3px solid #4299e1; }
.team-kanan { background: linear-gradient(160deg, #fff5f5, #fed7d7); border: 3px solid #e53e3e; }
.team-label { font-size: 16px; font-weight: bold; margin-bottom: 8px; }
.team-kiri .team-label { color: #2b6cb0; }
.team-kanan .team-label { color: #c53030; }

.question-text { font-size: 24px; font-weight: bold; margin-bottom: 8px; color: #1a202c; }
.answer-display {
  min-height: 36px;
  font-size: 22px;
  font-weight: bold;
  background: white;
  border-radius: 10px;
  padding: 6px 12px;
  margin-bottom: 12px;
  color: #2d3748;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.key {
  padding: 14px 0;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  background: white;
  color: #2d3748;
  cursor: pointer;
  min-height: 48px;
}
.key:hover { background: #edf2f7; }
.key:active { transform: translateY(1px); }
.key-clear { background: #fed7d7; color: #c53030; }
.key-go { background: #48bb78; color: white; }
.key-go:disabled { background: #a0aec0; cursor: not-allowed; }

#screen-winner { text-align: center; padding-top: 80px; }
#winner-text { font-size: 28px; color: #2b6cb0; margin-bottom: 20px; }
#btn-play-again {
  padding: 14px 32px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #4299e1, #3182ce);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 0 #2b6cb0;
}

.ad-slot {
  max-width: 500px;
  min-height: 90px;
  margin: 160px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  border: 2px dashed rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  color: rgba(45, 55, 72, 0.55);
  font-size: 13px;
  font-weight: bold;
}