/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a1a;
  --bg-light: #12122a;
  --bg-card: #1a1a2e;
  --green: #00ff41;
  --cyan: #00ccff;
  --error: #ff0055;
  --yellow: #ffcc00;
  --white: #e0e0e0;
  --dim: #555577;
  --font-mono: 'Courier New', 'Consolas', monospace;
}

[data-theme="light"] {
  --bg: #f5f5f0;
  --bg-light: #eeeee8;
  --bg-card: #ffffff;
  --green: #00aa30;
  --cyan: #0088aa;
  --error: #cc0044;
  --yellow: #cc9900;
  --white: #1a1a2e;
  --dim: #888899;
}

[data-theme="light"] body::after { display: none; }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--white);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  line-height: 1;
}

.theme-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 10px rgba(0, 204, 255, 0.3);
}

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-mono);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ========== HEADER ========== */
.header {
  padding: 16px 10%;
  border-bottom: 1px solid var(--bg-card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.header-title {
  font-size: 1.4rem;
  color: var(--green);
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
  cursor: pointer;
}

.header-title:hover { text-shadow: 0 0 20px rgba(0, 255, 65, 0.8); }

.header-sub { font-size: 0.75rem; color: var(--dim); }

.header-score-area {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--cyan);
}

.header-auth {
  font-size: 0.75rem;
  color: var(--dim);
}

.header-auth a {
  color: var(--cyan);
  text-decoration: none;
}

.header-auth a:hover { text-decoration: underline; }

/* ========== SCANLINE OVERLAY ========== */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* ========== SCREENS ========== */
.screen { display: none; padding: 40px 10%; }
.screen.active { display: block; }

/* ========== TITLE SCREEN ========== */
.title-logo { text-align: center; margin-bottom: 40px; }

.title-logo h1 {
  font-size: 3rem;
  color: var(--green);
  text-shadow: 0 0 20px rgba(0, 255, 65, 0.6), 0 0 40px rgba(0, 255, 65, 0.3);
  letter-spacing: 0.2em;
  animation: glowPulse 2s ease-in-out infinite;
}

.title-logo p {
  color: var(--cyan);
  font-size: 0.9rem;
  margin-top: 8px;
  letter-spacing: 0.15em;
}

.login-hint {
  display: none;
  text-align: center;
  font-size: 0.8rem;
  color: var(--dim);
  margin-bottom: 16px;
  padding: 8px 16px;
  background: rgba(0, 204, 255, 0.05);
  border: 1px solid rgba(0, 204, 255, 0.15);
  border-radius: 6px;
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(0, 255, 65, 0.6), 0 0 40px rgba(0, 255, 65, 0.3); }
  50% { text-shadow: 0 0 30px rgba(0, 255, 65, 0.9), 0 0 60px rgba(0, 255, 65, 0.5); }
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.field-card {
  background: var(--bg-card);
  border: 1px solid var(--dim);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.field-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cyan);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.field-card:hover {
  border-color: var(--cyan);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 204, 255, 0.15);
}

.field-card:hover::before { transform: scaleX(1); }

.field-card-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
  color: var(--green);
}

.field-card-name { font-size: 1.2rem; color: var(--white); margin-bottom: 8px; }
.field-card-count { font-size: 0.75rem; color: var(--dim); }
.field-card-best { font-size: 0.7rem; color: var(--yellow); margin-top: 6px; }

/* ========== LEVEL SELECT ========== */
.level-select { display: none; margin-top: 32px; }
.level-select.active { display: block; }

.level-select h2 {
  color: var(--cyan);
  font-size: 1.2rem;
  margin-bottom: 16px;
  text-align: center;
}

.level-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.level-btn {
  background: var(--bg-card);
  border: 2px solid var(--green);
  color: var(--green);
  padding: 16px 40px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s;
}

.level-btn:hover {
  background: var(--green);
  color: var(--bg);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
}

.level-btn-score { display: block; font-size: 0.7rem; margin-top: 6px; opacity: 0.7; }

/* ========== DRILL SCREEN ========== */
.drill-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.drill-progress-bar {
  flex: 1;
  min-width: 120px;
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}

.drill-progress-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.4s;
  border-radius: 3px;
}

.drill-progress-text { font-size: 0.8rem; color: var(--dim); white-space: nowrap; }
.drill-accuracy { font-size: 0.8rem; color: var(--cyan); white-space: nowrap; }

.btn-quit {
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--dim);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-quit:hover { border-color: var(--error); color: var(--error); }

.next-guide-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 10%;
  background: rgba(0, 204, 255, 0.12);
  border-top: 2px solid var(--cyan);
  color: var(--cyan);
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  z-index: 80;
  animation: guideBarPulse 1.5s ease-in-out infinite;
}

.next-guide-bar:hover { background: rgba(0, 204, 255, 0.25); }

.next-guide-key {
  display: inline-block;
  background: var(--cyan);
  color: var(--bg);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-right: 6px;
}

@keyframes guideBarPulse {
  0%, 100% { border-top-color: rgba(0, 204, 255, 0.5); }
  50% { border-top-color: rgba(0, 204, 255, 1); }
}

.drill-score-current { font-size: 0.85rem; color: var(--yellow); white-space: nowrap; }

/* Speech bubble */
.speech-bubble {
  background: var(--bg-card);
  border: 1px solid var(--cyan);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  position: relative;
  font-size: 1rem;
  line-height: 1.6;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 40px;
  border: 10px solid transparent;
  border-top-color: var(--cyan);
  border-bottom: none;
}

.speech-bubble-label { font-size: 0.7rem; color: var(--cyan); margin-bottom: 8px; display: block; }
.speech-bubble-category { font-size: 0.65rem; color: var(--dim); margin-top: 8px; display: block; }

/* Terminal input */
.terminal-input-area {
  background: #0d0d0d;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.terminal-prompt { display: flex; align-items: center; gap: 8px; }
.terminal-prompt-symbol { color: var(--green); font-size: 1rem; white-space: nowrap; }

.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 1rem;
  caret-color: var(--green);
}

.terminal-input::placeholder { color: #334433; }

.terminal-submit-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.btn-submit {
  background: var(--green);
  color: var(--bg);
  border: none;
  padding: 10px 32px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  font-weight: bold;
  transition: all 0.2s;
}

.btn-submit:hover { box-shadow: 0 0 16px rgba(0, 255, 65, 0.5); }
.btn-submit:disabled { opacity: 0.4; cursor: default; }

.btn-hint {
  background: rgba(0, 204, 255, 0.15);
  border: 2px solid var(--cyan);
  color: var(--cyan);
  padding: 10px 24px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 204, 255, 0.3); }
  50% { box-shadow: 0 0 12px rgba(0, 204, 255, 0.6); }
}

.btn-hint:hover { background: rgba(0, 204, 255, 0.25); }

.btn-next {
  background: var(--cyan);
  color: var(--bg);
  border: none;
  padding: 14px 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 8px;
  font-weight: bold;
  transition: all 0.2s;
  display: none;
  animation: nextBtnPulse 1.5s ease-in-out infinite;
  letter-spacing: 0.1em;
}

.btn-next:hover {
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.6);
  transform: translateY(-2px);
}

@keyframes nextBtnPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 204, 255, 0.3); }
  50% { box-shadow: 0 0 20px rgba(0, 204, 255, 0.6); }
}

/* Hint area */
.hint-area {
  display: none;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: rgba(0, 204, 255, 0.05);
  border: 1px solid rgba(0, 204, 255, 0.2);
  border-radius: 8px;
}

.hint-area.active { display: flex; gap: 16px; align-items: flex-start; }
.hint-text { flex: 1; color: var(--cyan); font-size: 0.85rem; line-height: 1.5; }
.hint-level { font-size: 0.65rem; color: var(--dim); display: block; margin-top: 4px; }

/* Terminal output */
.terminal-output {
  background: #0d0d0d;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px 20px;
  min-height: 60px;
  display: none;
  margin-bottom: 16px;
}

.terminal-output.active { display: block; }
.terminal-output-text { font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; }
.terminal-output-text.success { color: var(--green); }
.terminal-output-text.error { color: var(--error); }
.terminal-output-text.partial { color: var(--yellow); }

.explanation-area {
  display: none;
  margin-top: 12px;
  padding: 14px 18px;
  background: rgba(0, 204, 255, 0.06);
  border-left: 3px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.explanation-area.active { display: block; }
.explanation-label { color: var(--cyan); font-weight: bold; margin-bottom: 6px; }

.explanation-answer {
  color: var(--green);
  font-size: 1rem;
  margin: 6px 0;
  padding: 6px 12px;
  background: rgba(0, 255, 65, 0.08);
  border-radius: 4px;
  display: inline-block;
}

.explanation-detail { color: var(--white); margin-top: 6px; }

.result-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-top: 8px;
}

.result-badge.correct { background: rgba(0, 255, 65, 0.15); color: var(--green); border: 1px solid var(--green); }
.result-badge.partial { background: rgba(255, 204, 0, 0.15); color: var(--yellow); border: 1px solid var(--yellow); }
.result-badge.wrong { background: rgba(255, 0, 85, 0.15); color: var(--error); border: 1px solid var(--error); }

/* ========== RESULT SCREEN ========== */
.result-header { text-align: center; margin-bottom: 32px; }
.result-header h2 { font-size: 1.4rem; color: var(--cyan); margin-bottom: 8px; }

.result-score-big {
  font-size: 4rem;
  color: var(--green);
  text-shadow: 0 0 30px rgba(0, 255, 65, 0.5);
  font-weight: bold;
}

.result-score-max { font-size: 1.2rem; color: var(--dim); }
.result-grade { font-size: 1.4rem; margin-top: 8px; color: var(--yellow); }

.result-body {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 32px;
}

.radar-container { flex: 1; min-width: 280px; max-width: 420px; text-align: center; }
.radar-container canvas { width: 100%; height: auto; }

.result-robot-area {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.result-comment {
  background: var(--bg-card);
  border: 1px solid var(--cyan);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.8rem;
  color: var(--cyan);
  text-align: center;
  line-height: 1.5;
}

.result-details { margin-bottom: 32px; }
.result-details h3 { color: var(--cyan); font-size: 1rem; margin-bottom: 12px; }
.result-q-list { list-style: none; }

.result-q-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(85, 85, 119, 0.2);
  font-size: 0.8rem;
  flex-wrap: wrap;
}

.result-q-icon { font-size: 1rem; flex-shrink: 0; }
.result-q-text { flex: 1; min-width: 120px; color: var(--white); }
.result-q-answer { color: var(--dim); font-size: 0.75rem; }
.result-q-score { color: var(--yellow); white-space: nowrap; }

.result-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.btn-result {
  padding: 14px 32px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s;
  border: 2px solid;
}

.btn-strength { background: transparent; border-color: var(--green); color: var(--green); }
.btn-strength:hover { background: var(--green); color: var(--bg); }
.btn-weakness { background: transparent; border-color: var(--error); color: var(--error); }
.btn-weakness:hover { background: var(--error); color: var(--white); }
.btn-back { background: transparent; border-color: var(--dim); color: var(--dim); }
.btn-back:hover { border-color: var(--white); color: var(--white); }

/* ========== CYBER ROBOT ========== */
.robot {
  --robot-scale: 1;
  width: calc(80px * var(--robot-scale));
  position: relative;
  display: inline-block;
}

.robot.small { --robot-scale: 0.6; }
.robot.large { --robot-scale: 1.5; }

.robot-antenna {
  width: calc(4px * var(--robot-scale));
  height: calc(20px * var(--robot-scale));
  background: var(--cyan);
  margin: 0 auto;
  position: relative;
  box-shadow: 0 0 8px var(--cyan);
  animation: antennaGlitch 3s infinite;
}

.robot-antenna::after {
  content: '';
  position: absolute;
  top: calc(-8px * var(--robot-scale));
  left: 50%;
  transform: translateX(-50%);
  width: calc(10px * var(--robot-scale));
  height: calc(10px * var(--robot-scale));
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--cyan), 0 0 24px rgba(0, 204, 255, 0.4);
}

@keyframes antennaGlitch {
  0%, 90%, 100% { transform: translateX(0); }
  92% { transform: translateX(-2px); }
  94% { transform: translateX(3px); }
  96% { transform: translateX(-1px); }
  98% { transform: translateX(2px); }
}

.robot-head {
  width: calc(70px * var(--robot-scale));
  height: calc(55px * var(--robot-scale));
  background: var(--bg-card);
  border: calc(2px * var(--robot-scale)) solid var(--cyan);
  margin: 0 auto;
  position: relative;
  clip-path: polygon(15% 0%, 85% 0%, 100% 20%, 100% 100%, 0% 100%, 0% 20%);
  box-shadow: 0 0 10px rgba(0, 204, 255, 0.2);
}

.robot-eye {
  position: absolute;
  width: calc(14px * var(--robot-scale));
  height: calc(14px * var(--robot-scale));
  background: var(--green);
  border-radius: calc(3px * var(--robot-scale));
  top: calc(18px * var(--robot-scale));
  box-shadow: 0 0 8px var(--green), inset 0 0 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
}

.robot-eye.left { left: calc(14px * var(--robot-scale)); }
.robot-eye.right { right: calc(14px * var(--robot-scale)); }

.robot.thinking .robot-eye { height: calc(6px * var(--robot-scale)); top: calc(22px * var(--robot-scale)); }
.robot.explaining .robot-eye { border-radius: 50%; animation: eyeBlink 1.5s infinite; }
.robot.revealing .robot-eye { background: var(--yellow); box-shadow: 0 0 12px var(--yellow); animation: eyeFlash 0.5s infinite; }

@keyframes eyeBlink { 0%, 45%, 55%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.1); } }
@keyframes eyeFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.robot-mouth {
  position: absolute;
  bottom: calc(8px * var(--robot-scale));
  left: 50%;
  transform: translateX(-50%);
  width: calc(24px * var(--robot-scale));
  height: calc(4px * var(--robot-scale));
  display: flex;
  gap: calc(2px * var(--robot-scale));
  transition: all 0.3s;
}

.robot-mouth span {
  flex: 1;
  background: var(--cyan);
  border-radius: calc(1px * var(--robot-scale));
  box-shadow: 0 0 4px var(--cyan);
}

.robot.thinking .robot-mouth { width: calc(16px * var(--robot-scale)); }
.robot.explaining .robot-mouth { height: calc(8px * var(--robot-scale)); border-radius: calc(4px * var(--robot-scale)); }
.robot.revealing .robot-mouth { height: calc(10px * var(--robot-scale)); width: calc(30px * var(--robot-scale)); }

.robot-body {
  width: calc(60px * var(--robot-scale));
  height: calc(45px * var(--robot-scale));
  background: var(--bg-card);
  border: calc(2px * var(--robot-scale)) solid rgba(0, 204, 255, 0.4);
  margin: calc(4px * var(--robot-scale)) auto 0;
  border-radius: calc(4px * var(--robot-scale)) calc(4px * var(--robot-scale)) calc(8px * var(--robot-scale)) calc(8px * var(--robot-scale));
  position: relative;
  overflow: hidden;
}

.robot-body::before {
  content: '';
  position: absolute;
  top: calc(8px * var(--robot-scale));
  left: calc(8px * var(--robot-scale));
  right: calc(8px * var(--robot-scale));
  bottom: calc(8px * var(--robot-scale));
  background:
    linear-gradient(var(--cyan), transparent 1px) 0 0 / calc(8px * var(--robot-scale)) calc(8px * var(--robot-scale)),
    linear-gradient(90deg, var(--cyan), transparent 1px) 0 0 / calc(8px * var(--robot-scale)) calc(8px * var(--robot-scale));
  opacity: 0.15;
}

.robot-body-light {
  position: absolute;
  width: calc(8px * var(--robot-scale));
  height: calc(8px * var(--robot-scale));
  border-radius: 50%;
  top: calc(10px * var(--robot-scale));
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: bodyPulse 2s infinite;
}

@keyframes bodyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.robot-arms {
  display: flex;
  justify-content: space-between;
  width: calc(80px * var(--robot-scale));
  margin: calc(-30px * var(--robot-scale)) auto 0;
  pointer-events: none;
}

.robot-arm {
  width: calc(8px * var(--robot-scale));
  height: calc(30px * var(--robot-scale));
  background: var(--bg-card);
  border: calc(1px * var(--robot-scale)) solid rgba(0, 204, 255, 0.3);
  border-radius: calc(4px * var(--robot-scale));
}

/* ========== ANIMATIONS ========== */
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.shake { animation: shake 0.4s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Score popup */
.score-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  pointer-events: none;
  z-index: 100;
  animation: scorePopup 1.2s ease forwards;
}

.score-popup.full { color: var(--green); text-shadow: 0 0 30px var(--green), 0 0 60px var(--green); font-size: 4rem; }
.score-popup.partial-pop { color: var(--yellow); text-shadow: 0 0 30px var(--yellow); }
.score-popup.zero { color: var(--error); text-shadow: 0 0 30px var(--error); }

.combo-display {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--yellow);
  text-shadow: 0 0 10px var(--yellow);
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.combo-display.active { opacity: 1; }

.combo-display.hot {
  color: #ff6600;
  text-shadow: 0 0 15px #ff6600, 0 0 30px #ff3300;
  font-size: 1.3rem;
  animation: comboPulse 0.5s ease-in-out infinite;
}

.combo-display.fire {
  color: #ff0044;
  text-shadow: 0 0 20px #ff0044, 0 0 40px #ff0000;
  font-size: 1.5rem;
  animation: comboPulse 0.3s ease-in-out infinite;
}

@keyframes comboPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.1); }
}

.encourage-msg { margin-top: 8px; font-size: 0.85rem; color: var(--cyan); opacity: 0.9; }

.correct-flash { animation: correctFlash 0.6s ease; }
@keyframes correctFlash { 0% { background: var(--bg); } 15% { background: rgba(0, 255, 65, 0.1); } 100% { background: var(--bg); } }

.correct-particles { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 99; }

.particle {
  position: absolute;
  font-size: 1.5rem;
  animation: particleFly 1.5s ease forwards;
  pointer-events: none;
}

@keyframes particleFly { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.3); } }

@keyframes scorePopup {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1); }
}

/* ========== BADGE SYSTEM ========== */
.header-badge-btn {
  background: transparent;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  margin-left: 8px;
}

.header-badge-btn:hover {
  background: rgba(255, 204, 0, 0.15);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.badge-card {
  background: var(--bg-card);
  border: 2px solid var(--dim);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.3s;
  position: relative;
}

.badge-card.earned { opacity: 1; }
.badge-card.unearned { opacity: 0.4; filter: grayscale(0.8); }
.badge-card.rarity-bronze { border-color: #cd7f32; }
.badge-card.rarity-silver { border-color: #c0c0c0; }
.badge-card.rarity-gold { border-color: #ffd700; }
.badge-card.rarity-platinum { border-color: #00ffcc; }
.badge-card.earned.rarity-bronze { box-shadow: 0 0 12px rgba(205, 127, 50, 0.3); }
.badge-card.earned.rarity-silver { box-shadow: 0 0 12px rgba(192, 192, 192, 0.3); }
.badge-card.earned.rarity-gold { box-shadow: 0 0 16px rgba(255, 215, 0, 0.4); }
.badge-card.earned.rarity-platinum { box-shadow: 0 0 20px rgba(0, 255, 204, 0.4); }

.badge-card-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.badge-card-name { font-size: 0.95rem; color: var(--white); margin-bottom: 4px; font-weight: bold; }
.badge-card-desc { font-size: 0.7rem; color: var(--dim); line-height: 1.4; margin-bottom: 6px; }

.badge-card-rarity { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; }
.badge-card-rarity.rarity-bronze { color: #cd7f32; }
.badge-card-rarity.rarity-silver { color: #c0c0c0; }
.badge-card-rarity.rarity-gold { color: #ffd700; }
.badge-card-rarity.rarity-platinum { color: #00ffcc; }

.badge-card-date { font-size: 0.6rem; color: var(--dim); margin-top: 6px; }

.badge-summary { text-align: center; margin-bottom: 16px; }
.badge-summary-count { font-size: 1.6rem; color: var(--yellow); font-weight: bold; }
.badge-summary-label { font-size: 0.85rem; color: var(--dim); margin-top: 4px; }

.badge-back-btn {
  display: block;
  margin: 32px auto 0;
  background: transparent;
  border: 2px solid var(--dim);
  color: var(--dim);
  padding: 12px 32px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s;
}

.badge-back-btn:hover { border-color: var(--white); color: var(--white); }

/* Badge notification popup */
.badge-notify {
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 2px solid var(--yellow);
  border-radius: 12px;
  padding: 20px 32px;
  text-align: center;
  z-index: 10000;
  transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 240px;
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.4), 0 8px 32px rgba(0, 0, 0, 0.6);
}

.badge-notify.show { top: 80px; }
.badge-notify-label { font-size: 0.7rem; color: var(--yellow); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 8px; animation: badgeGlow 1s ease-in-out infinite; }
.badge-notify-icon { font-size: 3rem; display: block; margin-bottom: 8px; }
.badge-notify-name { font-size: 1.1rem; color: var(--white); font-weight: bold; }

@keyframes badgeGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 204, 0, 0.6); }
  50% { text-shadow: 0 0 20px rgba(255, 204, 0, 1), 0 0 40px rgba(255, 204, 0, 0.5); }
}

/* ========== MOBILE ========== */
@media (max-width: 600px) {
  .header { flex-wrap: wrap; gap: 8px; }
  .header-title { font-size: 1.1rem; }
  .header-score-area { margin-left: 0; width: 100%; }
  .title-logo h1 { font-size: 2rem; letter-spacing: 0.1em; }
  .field-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .result-score-big { font-size: 2.8rem; }
  .result-body { flex-direction: column; align-items: center; }
  .result-robot-area { flex: none; }
  .speech-bubble { padding: 14px 16px; font-size: 0.9rem; }
  .screen { padding: 24px 10%; }
  .badge-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .badge-card { padding: 14px 10px; }
  .badge-card-icon { font-size: 2rem; }
  .badge-notify { min-width: 200px; padding: 16px 20px; }
}