/* =====================================================
   unitCircle2Styles.css  –  Unit Circle Quiz App
   ===================================================== */

/* ---------- Root / theme ---------- */
:root {
  --uc-bg:          #1a1a2e;
  --uc-panel:       #16213e;
  --uc-card:        #0f3460;
  --uc-accent:      #e94560;
  --uc-accent2:     #f5a623;
  --uc-correct:     #28a745;
  --uc-wrong:       #dc3545;
  --uc-text:        #e0e0e0;
  --uc-muted:       #8892a4;
  --uc-border:      #2a4a7f;
  --uc-canvas-bg:   #0d1b2a;
  --radius:         0.6rem;
}

/* ---------- Global ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--uc-bg);
  color: var(--uc-text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
}

/* ---------- Navbar ---------- */
.navbar-brand span { color: var(--uc-accent2); font-weight: 700; }
.navbar { border-bottom: 2px solid var(--uc-border); }

/* ---------- Cards / panels ---------- */
.uc-card {
  background: var(--uc-panel);
  border: 1px solid var(--uc-border);
  border-radius: var(--radius);
  padding: 1rem;
}

/* ---------- Canvas wrapper ---------- */
#canvas-container {
  background: var(--uc-canvas-bg);
  border: 2px solid var(--uc-border);
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#canvas-container canvas { display: block; }

/* ---------- Score bar ---------- */
#score-bar {
  font-size: 0.9rem;
  color: var(--uc-muted);
}
#score-bar .score-val {
  color: var(--uc-accent2);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ---------- Question panel ---------- */
#question-panel {
  min-height: 60px;
}
#question-text {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--uc-accent2);
}
#question-sub {
  font-size: 0.9rem;
  color: var(--uc-muted);
}

/* ---------- Answer input area ---------- */
.answer-group { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.answer-input {
  background: #0d1b2a;
  border: 1.5px solid var(--uc-border);
  border-radius: var(--radius);
  color: var(--uc-text);
  font-size: 1rem;
  padding: 0.35rem 0.65rem;
  min-width: 140px;
  flex: 1 1 140px;
  transition: border-color 0.2s;
}
.answer-input:focus {
  outline: none;
  border-color: var(--uc-accent2);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2);
}
.answer-input.is-correct  { border-color: var(--uc-correct); }
.answer-input.is-wrong    { border-color: var(--uc-wrong); }

/* ---------- Symbol palette ---------- */
.sym-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uc-muted);
  margin-bottom: 0.4rem;
}

.sym-btn {
  background: var(--uc-card);
  border: 1px solid var(--uc-border);
  border-radius: 0.4rem;
  color: var(--uc-accent2);
  font-size: 1rem;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  user-select: none;
}
.sym-btn:hover  { background: #1a3a6f; transform: scale(1.08); }
.sym-btn:active { transform: scale(0.97); }

/* ---------- Main action buttons ---------- */
.btn-check-answer {
  background: var(--uc-accent);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-weight: 600;
  padding: 0.45rem 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-check-answer:hover { background: #c73652; }

.btn-next {
  background: var(--uc-correct);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-weight: 600;
  padding: 0.45rem 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-next:hover { background: #218838; }

.btn-reveal {
  background: var(--uc-card);
  border: 1px solid var(--uc-border);
  border-radius: var(--radius);
  color: var(--uc-muted);
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-reveal:hover { background: #1a3a6f; color: var(--uc-text); }

/* ---------- Feedback banner ---------- */
#feedback-banner {
  min-height: 2rem;
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  display: none;
}
#feedback-banner.show    { display: block; }
#feedback-banner.correct { background: rgba(40,167,69,0.18); color: var(--uc-correct); border: 1px solid var(--uc-correct); }
#feedback-banner.wrong   { background: rgba(220,53,69,0.18); color: var(--uc-wrong);   border: 1px solid var(--uc-wrong); }
#feedback-banner.reveal  { background: rgba(245,166,35,0.14); color: var(--uc-accent2); border: 1px solid var(--uc-accent2); }

/* ---------- Answer fields labels ---------- */
.field-label {
  font-size: 0.78rem;
  color: var(--uc-muted);
  margin-bottom: 0.2rem;
  display: block;
}

/* ---------- Progress ---------- */
.progress {
  height: 6px;
  background: var(--uc-border);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--uc-accent2), var(--uc-accent));
  transition: width 0.4s ease;
}

/* ---------- Mode selector ---------- */
.mode-btn {
  background: var(--uc-card);
  border: 1.5px solid var(--uc-border);
  border-radius: var(--radius);
  color: var(--uc-muted);
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.mode-btn.active,
.mode-btn:hover {
  background: var(--uc-accent);
  border-color: var(--uc-accent);
  color: #fff;
}

/* ---------- Grid increment selector ---------- */
#grid-inc-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--uc-muted);
}

#sel-grid-inc {
  background: var(--uc-card);
  border: 1.5px solid var(--uc-border);
  border-radius: var(--radius);
  color: var(--uc-text);
  font-size: 0.85rem;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.2s;
}
#sel-grid-inc:focus {
  outline: none;
  border-color: var(--uc-accent2);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
  #canvas-container canvas { max-width: 100%; height: auto !important; }
  .answer-input { min-width: 110px; }
}