/* 5 Menit Matematika Styles */
body {
  background: url('../assets/bg2.jpg') center/cover fixed;
}
body::after {
  content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(26,26,46,0.85); z-index: -1;
}

.game-container {
  max-width: 600px; margin: 0 auto; padding: 60px 16px 20px;
  min-height: 100vh; position: relative; z-index: 1;
}

/* Menu */
.menu-screen { text-align: center; padding-top: 20px; }
.menu-screen h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.2rem, 5vw, 2rem);
  background: linear-gradient(180deg, var(--poke-yellow), #FF9800);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.menu-pokemon { font-size: 4rem; margin: 10px 0; }

.setting-section { margin: 20px 0; }
.setting-label {
  font-family: 'Press Start 2P', monospace; font-size: 0.7rem;
  color: var(--poke-yellow); margin-bottom: 10px; display: block;
}
.diff-btns { display: flex; gap: 12px; justify-content: center; }
.diff-btn { flex: 1; max-width: 180px; font-size: 0.95rem !important; }
.diff-btn small { font-size: 0.7rem; opacity: 0.7; }
.diff-btn.active { box-shadow: 0 0 20px rgba(255,203,5,0.5); border-color: #fff; }

.ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.op-check {
  display: flex; align-items: center; gap: 8px;
  background: #2a2a4a; border: 2px solid #444; border-radius: 12px;
  padding: 10px 14px; cursor: pointer; transition: all 0.2s;
}
.op-check:has(input:checked) { border-color: var(--poke-yellow); background: #2a2a5a; }
.op-check input { width: 18px; height: 18px; accent-color: var(--poke-yellow); }
.op-check span { font-weight: 700; font-size: 0.95rem; }

.start-btn { width: 100%; }

/* Timer */
.timer-bar {
  text-align: center; margin-bottom: 16px;
  background: linear-gradient(145deg, #2a2a4a, #1e1e3a);
  border: 3px solid var(--poke-yellow); border-radius: 16px;
  padding: 12px 16px;
}
.timer-icon { font-size: 1.5rem; }
.timer-display {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--poke-yellow);
  text-shadow: 0 0 20px rgba(255,203,5,0.5);
}
.timer-display.urgent { color: var(--poke-red); animation: glow 0.5s infinite; text-shadow: 0 0 20px rgba(227,53,13,0.7); }
.timer-progress-bg {
  width: 100%; height: 8px; background: #333; border-radius: 4px; margin-top: 8px;
}
.timer-progress {
  height: 100%; background: linear-gradient(90deg, var(--poke-green), #8BC34A);
  border-radius: 4px; transition: width 1s linear;
  width: 100%;
}
.timer-progress.medium { background: linear-gradient(90deg, #FF9800, #FFC107); }
.timer-progress.low { background: linear-gradient(90deg, var(--poke-red), #FF5722); }

/* Stats bar */
.stats-bar {
  display: flex; justify-content: space-around;
  background: rgba(0,0,0,0.3); border-radius: 12px;
  padding: 10px; margin-bottom: 16px;
  font-family: 'Press Start 2P', monospace; font-size: 0.55rem;
}
.stat-item { text-align: center; }
.stat-label { color: #888; }
.stat-value { color: var(--poke-yellow); font-size: 0.9rem; margin-top: 4px; }

/* Question area */
.question-area {
  background: linear-gradient(145deg, #2a2a4a, #1e1e3a);
  border: 3px solid var(--poke-yellow); border-radius: 16px;
  padding: 24px; text-align: center;
}
.question-label {
  font-size: 0.7rem; color: var(--poke-yellow);
  font-family: 'Press Start 2P', monospace; margin-bottom: 8px;
}
.question-text {
  font-size: clamp(1.5rem, 6vw, 2.5rem); font-weight: 900; margin: 12px 0;
}
.answer-input {
  width: 100%; max-width: 250px; padding: 14px;
  font-size: 2rem; text-align: center;
  background: #1a1a2e; color: white;
  border: 3px solid var(--poke-blue); border-radius: 12px;
  font-family: 'Nunito'; font-weight: 900; outline: none;
  -moz-appearance: textfield;
}
.answer-input::-webkit-outer-spin-button,
.answer-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.answer-input:focus { border-color: var(--poke-yellow); box-shadow: 0 0 15px rgba(255,203,5,0.3); }
.submit-btn { width: 100%; max-width: 250px; margin-top: 12px; }

/* Feedback */
.feedback {
  text-align: center; padding: 10px; border-radius: 10px;
  font-weight: 900; font-size: 1.1rem; margin: 10px 0;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.feedback.correct { background: rgba(76,175,80,0.2); color: #8BC34A; }
.feedback.wrong { background: rgba(227,53,13,0.2); color: #FF5722; }

/* Streak display */
.streak-display {
  text-align: center; font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem; min-height: 30px; color: #FF9800;
}

/* Result screen */
.result-screen { text-align: center; padding-top: 40px; }
.result-screen h2 {
  font-family: 'Press Start 2P', monospace; font-size: clamp(1.2rem, 5vw, 1.8rem);
  color: var(--poke-yellow); margin: 10px 0;
}
.result-pokemon { font-size: 5rem; }
.stars-display { font-size: 3rem; margin: 16px 0; }
.result-card { margin: 20px 0; }
.result-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px;
}
.result-item { text-align: center; }
.result-num {
  display: block; font-family: 'Press Start 2P', monospace;
  font-size: 1.2rem; color: var(--poke-yellow);
}
.result-lbl { display: block; font-size: 0.8rem; color: #aaa; margin-top: 4px; }

@media (max-width: 400px) {
  .ops-grid { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
}