/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.2rem;
  min-height: 44px;
  cursor: pointer;
  border: 3px solid var(--mc-border);
  box-shadow:
    inset -3px -3px 0 rgba(0,0,0,0.4),
    inset 3px 3px 0 rgba(255,255,255,0.15);
  transition: filter 0.1s, transform 0.1s;
  text-decoration: none;
  color: var(--mc-text);
  margin: 0.3rem;
  touch-action: manipulation;
  user-select: none;
}
.mc-btn:hover { filter: brightness(1.2); }
.mc-btn:active { transform: translateY(2px); box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.15); }
.mc-btn:focus-visible { outline: 3px solid var(--mc-gold); outline-offset: 2px; }

.mc-btn-green  { background: var(--mc-green-btn); }
.mc-btn-red    { background: var(--mc-red-btn); }
.mc-btn-gray   { background: var(--mc-gray-btn); }
.mc-btn-gold   { background: var(--mc-gold-btn); color: var(--mc-gold); }
.mc-btn-small  { font-size: 0.55rem; padding: 0.5rem 0.8rem; min-height: 40px; background: var(--mc-gray-btn); }
.mc-btn-tiny   { font-size: 0.5rem; padding: 0.4rem 0.8rem; min-height: 38px; background: var(--mc-gray-btn); }

/* ─── DIFFICULTY BUTTONS ──────────────────── */
.diff-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.diff-btn {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  padding: 0.55rem 0.9rem;
  min-height: 42px;
  background: var(--mc-gray-btn);
  color: var(--mc-text);
  border: 3px solid var(--mc-border);
  cursor: pointer;
  box-shadow: inset -2px -2px 0 #1A1A1A, inset 2px 2px 0 #666;
  touch-action: manipulation;
  user-select: none;
}
.diff-btn:hover { filter: brightness(1.2); }
.diff-btn.active { background: var(--mc-green-btn); border-color: var(--mc-grass); }
.diff-btn:focus-visible { outline: 3px solid var(--mc-gold); outline-offset: 2px; }

/* ─── CHOICE BUTTONS ──────────────────────── */
.choices-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.choice-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: var(--mc-panel);
  border: 3px solid #4A4A4A;
  box-shadow: inset -3px -3px 0 #1A1A1A, inset 3px 3px 0 #5A5A5A;
  padding: 0.85rem 1rem;
  min-height: 52px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: filter 0.1s, border-color 0.1s;
  font-family: inherit;
  color: var(--mc-text);
  touch-action: manipulation;
  user-select: none;
}
.choice-btn:hover:not(:disabled) { filter: brightness(1.2); border-color: var(--mc-grass); }
.choice-btn:disabled { cursor: default; }
.choice-btn:focus-visible { outline: 3px solid var(--mc-gold); outline-offset: 2px; }
.choice-btn.choice-selected {
  border-color: var(--mc-gold) !important;
  box-shadow: inset -3px -3px 0 #1a1508, inset 3px 3px 0 #5a4a20, 0 0 0 2px rgba(255, 215, 0, 0.25);
}
.choice-btn.correct  { border-color: var(--mc-emerald) !important; background: #1A3A1A !important; box-shadow: 0 0 10px var(--mc-emerald) !important; }
.choice-btn.wrong    { border-color: var(--mc-redstone) !important; background: #3A1A1A !important; box-shadow: 0 0 10px var(--mc-redstone) !important; }
.choice-btn.revealed { border-color: var(--mc-emerald) !important; background: #1A2A1A !important; }

.choice-label {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: var(--mc-gold);
  min-width: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.choice-text {
  font-family: var(--font-vt);
  font-size: 1.2rem;
  line-height: 1.4;
}

/* ─── THEME PICKER PILLS ──────────────────── */
.theme-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.theme-picker-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: #aaa;
  white-space: nowrap;
}
.theme-picker-btns { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.theme-pill {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  padding: 0.4rem 0.6rem;
  border: 2px solid #555;
  background: #222;
  color: #ccc;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s;
}
.theme-pill:hover     { background: #333; border-color: #888; }
.theme-pill.active    { background: #2a4a2a; border-color: #4CAF50; color: #6eff6e; }