/* =========================================================================
 * ondoku.css — 音読モード
 * ========================================================================= */

.od-label {
  font-size: 14px; font-weight: 900; text-align: center;
  color: var(--color-text-secondary, #5B6474); margin: 4px 0 8px;
  font-family: "MPlus Headline", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}
.od-sentence {
  font-size: clamp(22px, 6vw, 28px); font-weight: 800; line-height: 2;
  text-align: center; letter-spacing: 0.06em;
  background: #F8FAFF; border: 1px solid #E7E1D2; border-radius: 14px;
  padding: 18px 14px; margin: 0 auto; max-width: 420px;
  color: var(--color-text-primary, #1A2238);
}
.od-kana {
  font-size: 15px; font-weight: 700; line-height: 1.9; text-align: center;
  color: #92400E; background: #FFFBEB; border: 1px dashed #FDE68A;
  border-radius: 10px; padding: 8px 12px; margin: 8px auto 0; max-width: 420px;
}
.od-kana.hidden { display: none; }
.od-kana-toggle {
  display: block; margin: 8px auto 0; min-height: 44px; padding: 8px 16px;
  border: 1px solid #E7E1D2; border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 800; color: var(--color-text-secondary, #5B6474);
  cursor: pointer;
  transition: transform .1s var(--ease-smooth, cubic-bezier(.22,1,.36,1));
}
.od-kana-toggle:active { transform: scale(.96); }
.od-kana-toggle:focus-visible { outline: 3px solid var(--color-primary, #4F5BD5); outline-offset: 2px; }

.od-wrap { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 10px; }
.od-btn {
  width: min(420px, 100%); min-height: 52px; padding: 12px;
  border: none; border-radius: 14px;
  font-size: 16px; font-weight: 900; cursor: pointer; color: #fff;
}
.od-btn:focus-visible { outline: 3px solid #1A2238; outline-offset: 2px; }
.od-model { background: linear-gradient(135deg, var(--color-primary, #4F5BD5), #7C3AED); box-shadow: 0 4px 0 #3B46B0; }
.od-model:active { transform: translateY(2px); box-shadow: 0 2px 0 #3B46B0; }
.od-rec { background: linear-gradient(135deg, #F97316, #EA580C); box-shadow: 0 4px 0 #C2410C; }
.od-rec:active { transform: translateY(2px); box-shadow: 0 2px 0 #C2410C; }
.od-rec.recording { background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 4px 0 #B91C1C; animation: odPulse 1.2s infinite; }
@keyframes odPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.od-rec.hidden { display: none; }
.od-play { width: min(420px, 100%); }
.od-play.hidden { display: none; }
.od-play audio { width: 100%; }

.od-check {
  width: min(420px, 100%);
  background: var(--color-surface, #fff); border: 1px solid #E7E1D2; border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.od-check-label { font-size: 13px; font-weight: 900; text-align: center; color: var(--color-text-secondary, #5B6474); }
.od-good {
  min-height: 56px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff; font-size: 17px; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 0 #15803D;
}
.od-good:active { transform: translateY(2px); box-shadow: 0 2px 0 #15803D; }
.od-good:focus-visible { outline: 3px solid var(--color-primary, #4F5BD5); outline-offset: 2px; }
.od-soso {
  min-height: 48px; border: 1px solid #E7E1D2; border-radius: 12px;
  background: #fff; font-size: 14.5px; font-weight: 800;
  color: var(--color-text-secondary, #5B6474); cursor: pointer;
}
.od-soso:active { transform: scale(.98); }
.od-soso:focus-visible { outline: 3px solid var(--color-primary, #4F5BD5); outline-offset: 2px; }