/* ══════════════════════════════════════
   BASE & GLOBAL STYLES
══════════════════════════════════════ */

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

html, body {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow-x: auto;
  /* Prevents pinch-zoom on iOS Safari (user-scalable=no is ignored since iOS 10) */
  touch-action: pan-x pan-y;
}

:root {
  --plus1:  #22126A;
  --plus2:  #FFFF5E;
  --bg2:    #1C3DF7;
  --dark:   #0A0820;
  --ok:     #00FF88;
  --err:    #FF2244;
  --muted:  rgba(255,255,94,0.45);
}

body {
  background: #1B0093;
  color: var(--plus2);
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════
   SHARED CONTAINER
══════════════════════════════════════ */

.panel {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 13px;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  color: #fff;
}

/* ══════════════════════════════════════
   SHARED BUTTON BASE
══════════════════════════════════════ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.2rem;
  background: var(--plus2);
  color: var(--plus1);
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  user-select: none;
}

.btn.off {
  background: var(--plus1);
  color: rgba(255,255,94,0.4);
}

/* ghost variant — dark bg, yellow text */
.btn-ghost {
  background: var(--plus1);
  color: var(--plus2);
  border: none;
}

.btn-ghost:active {
  background: var(--plus2);
  color: var(--plus1);
}

@media (hover: hover) {
  .btn-ghost:hover {
    background: var(--plus2);
    color: var(--plus1);
  }
}

/* option variant — stage 2/4 note choices: dark bg, yellow text */
.btn-option {
  background: var(--plus1);
  color: var(--plus2);
  border: none;
  flex: 1;
  min-width: 100px;
  min-height: 52px;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  user-select: none;
}

.btn-option:disabled { cursor: default; }

.btn-option.selected { background: var(--plus2); color: var(--plus1); }
.btn-option.correct  { background: var(--ok); color: var(--plus1); }
.btn-option.wrong    { background: var(--err); color: #fff; }