/* =========================================================================
 * flash-anzan.css — フラッシュ暗算モード
 * ========================================================================= */

.fa-label {
  font-size: 14px; font-weight: 900; text-align: center;
  color: var(--color-text-secondary, #5B6474); margin: 4px 0 10px;
  font-family: "MPlus Headline", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fa-label svg { width: 18px; height: 18px; stroke-width: 2; color: #F59E0B; }

.fa-stage {
  width: 100%; max-width: 340px; margin: 0 auto;
  min-height: clamp(140px, 32vw, 180px);
  background: #1A2238; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.35);
}
.fa-stage-number {
  font-family: "Fredoka", sans-serif;
  font-weight: 800; font-size: clamp(56px, 16vw, 84px);
  color: #FDE68A;
  font-variant-numeric: tabular-nums;
}
.fa-stage-number.fa-pop {
  animation: faPop 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes faPop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-stage-number.fa-pop { animation: none; }
}

.fa-answer-wrap {
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  margin-top: 10px;
}
.fa-display {
  width: min(220px, 70%); min-height: 56px;
  border: 2px solid #E7E1D2; border-radius: 14px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Fredoka", sans-serif; font-weight: 800;
  font-size: 30px; color: var(--color-text-primary, #1A2238);
  font-variant-numeric: tabular-nums;
}
.fa-display.fa-empty { color: var(--color-text-secondary, #9CA3AF); }

.fa-keypad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; width: min(280px, 90%);
}
.fa-key {
  min-height: 52px; border: 1px solid #E7E1D2; border-radius: 14px;
  background: #fff; font-family: "Fredoka", sans-serif;
  font-size: 22px; font-weight: 800; color: var(--color-text-primary, #1A2238);
  cursor: pointer; transition: transform .1s var(--ease-smooth, cubic-bezier(.22,1,.36,1));
}
.fa-key:active { transform: scale(.95); }
.fa-key:focus-visible { outline: 3px solid var(--color-primary, #4F5BD5); outline-offset: 2px; }
.fa-key-back { color: #EF4444; }
.fa-key-submit {
  grid-column: span 3;
  min-height: 56px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #F59E0B, #F97316);
  color: #fff; font-size: 18px; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 0 #C2410C;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fa-key-submit:active { transform: translateY(2px); box-shadow: 0 2px 0 #C2410C; }
.fa-key-submit:disabled { opacity: .45; cursor: not-allowed; }
.fa-key:disabled { opacity: .5; cursor: not-allowed; }