.btn {
  font: inherit;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 10px 20px;
  background: var(--surface);
  color: var(--text);
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              transform 0.06s ease, box-shadow 0.15s ease;
}

.btn:hover { background: var(--border); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-large {
  font-size: 17px;
  padding: 15px 28px;
  min-height: 56px;
  border-radius: var(--radius);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
  font-weight: 500;
}
.btn-outline:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-icon {
  background: transparent;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  border-radius: 50%;
  color: var(--text-muted);
}
.btn-icon:hover { background: var(--primary-soft); color: var(--primary); }

.dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 320px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  border: 2px solid transparent;
}

.dot-pending { background: var(--border); }
.dot-current {
  background: var(--surface);
  border-color: var(--primary);
  transform: scale(1.15);
}
.dot-pass    { background: var(--success); }
.dot-fail    { background: var(--error); }

.answer-input {
  font: inherit;
  font-weight: 500;
  font-size: 24px;
  text-align: center;
  padding: 12px 16px;
  width: 220px;
  max-width: 100%;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.answer-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.answer-input:disabled { color: var(--text-muted); background: var(--bg); }

@keyframes flash-green {
  0%, 100% { background: var(--surface); }
  50% { background: var(--success-soft); }
}

@keyframes flash-red {
  0%, 100% { background: var(--surface); transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); background: var(--error-soft); }
  80% { transform: translateX(3px); }
}

.flash-correct { animation: flash-green 0.4s ease-out; }
.flash-incorrect { animation: flash-red 0.5s ease-out; }

.draw-canvas {
  width: min(90vw, 360px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, var(--border) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  touch-action: none;
  cursor: crosshair;
  display: block;
}

.canvas-wrap {
  position: relative;
  display: inline-block;
  width: min(90vw, 360px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, var(--border-strong) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.canvas-wrap .draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
}

.canvas-silhouette {
  position: absolute;
  inset: 2px;
  pointer-events: none;
  opacity: 0.18;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: calc(var(--radius) - 2px);
}

@media (prefers-color-scheme: dark) {
  .canvas-silhouette {
    /* PNG is dark ink on transparent — invert to light ink for dark surface */
    filter: invert(1);
    opacity: 0.35;
  }
}