/* ============================================================
   Stage 2F.7 Scratch Tool -- real Canvas/Pointer scratch interaction.
   No library, no CDN. The fallback button (spec 三十四) is a plain
   <button>, always in the tab order, never hidden behind the canvas.
   ============================================================ */

.scratch-card {
  position: relative;
  max-width: 520px;
  margin: 0 auto var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-surface-2);
}

.scratch-reveal-content {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6);
}
.scratch-reveal-icon { font-size: 2rem; }
.scratch-reveal-text { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-relaxed); }
.scratch-reveal-hint { font-size: var(--text-xs); color: var(--text-tertiary); }

.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: none;
  transition: opacity var(--duration-slow) var(--ease-decel);
}
.scratch-canvas.is-cleared { opacity: 0; pointer-events: none; }

.scratch-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.scratch-limit-note { text-align: center; font-size: var(--text-xs); color: var(--text-tertiary); }