/* ============================================================
   focus-coach.css — idle "are you still there?" nudge.

   Scope: every class is prefixed `fcx-` (focus-coach-extra). NOTE the
   plain `fc-` prefix is already taken in prep.css by the flashcard
   player (.fc-card, .fc-face, .fc-wrap) and the focus-mode chip
   (.fc-exit, .fc-avatar), so `fcx-` is what actually guarantees no
   collision with existing .bk-* / .pl-* / .fc-* styles.

   Layering: z-index 946 sits ABOVE the xp bar / focus chip / study
   timer (940–941) but BELOW #otFrame (950), the countdown corner
   .pl-corner (951) and the break-coach overlay .bk-overlay (980).
   That is deliberate: remaining time is never covered, and if the
   break coach opens it always wins.
   ============================================================ */

/* ---------- shake / wiggle keyframes ---------- */
@keyframes fcx-wiggle {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  25%      { transform: rotate(6deg) translateY(-5px); }
  50%      { transform: rotate(-5deg) translateY(0); }
  75%      { transform: rotate(8deg) translateY(-3px); }
}
@keyframes fcx-shake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  10%      { transform: translate3d(-9px, 3px, 0) rotate(-2deg); }
  20%      { transform: translate3d(8px, -4px, 0) rotate(2.2deg); }
  30%      { transform: translate3d(-7px, -3px, 0) rotate(-1.6deg); }
  40%      { transform: translate3d(9px, 4px, 0) rotate(2deg); }
  50%      { transform: translate3d(-8px, 2px, 0) rotate(-2.4deg); }
  60%      { transform: translate3d(7px, -5px, 0) rotate(1.8deg); }
  70%      { transform: translate3d(-9px, 4px, 0) rotate(-2deg); }
  80%      { transform: translate3d(8px, 3px, 0) rotate(2.4deg); }
  90%      { transform: translate3d(-6px, -4px, 0) rotate(-1.4deg); }
}
@keyframes fcx-jitter {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  15%      { transform: translate3d(-6px, -10px, 0) rotate(-18deg) scale(1.18); }
  30%      { transform: translate3d(7px, 6px, 0) rotate(16deg) scale(.86); }
  45%      { transform: translate3d(-9px, 5px, 0) rotate(-24deg) scale(1.12); }
  60%      { transform: translate3d(6px, -8px, 0) rotate(20deg) scale(.92); }
  75%      { transform: translate3d(-4px, 9px, 0) rotate(-12deg) scale(1.2); }
  90%      { transform: translate3d(8px, -3px, 0) rotate(14deg) scale(.9); }
}
@keyframes fcx-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes fcx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fcx-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fcx-toast-in {
  0%   { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- overlay ---------- */
.fcx-overlay {
  position: fixed;
  inset: 0;
  z-index: 946;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 31, 56, .48);
  animation: fcx-fade-in .18s ease both;
}

/* ---------- card ---------- */
.fcx-card {
  position: relative;
  width: min(460px, 100%);
  background: #fff;
  border-radius: 22px;
  padding: 34px 34px 28px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .32);
  outline: none;
}
.fcx-card:focus-visible { box-shadow: 0 24px 70px rgba(16, 24, 40, .32), 0 0 0 3px var(--teal, #15808b); }

/* the card itself shakes only in phase 2 */
.fcx-card.fcx-drop { animation: fcx-shake .42s linear infinite; }

.fcx-title {
  font-family: Poppins, Inter, sans-serif;
  font-weight: 700;
  font-size: 1.42rem;
  line-height: 1.25;
  color: var(--ink, #16243a);
  margin: 0 0 10px;
}
.fcx-body {
  font-family: Inter, system-ui, sans-serif;
  font-size: .96rem;
  line-height: 1.62;
  color: var(--ink-soft, #3c4856);
  margin: 0 0 22px;
}

/* ---------- emoji cast ---------- */
.fcx-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 84px;
  margin: 0 0 16px;
  font-size: 2.6rem;
  line-height: 1;
  user-select: none;
}
.fcx-solo { display: inline-block; animation: fcx-wiggle 1s ease-in-out infinite; }
.fcx-extra { display: none; }
.fcx-stage.fcx-drop .fcx-extra { display: inline-block; }
.fcx-stage.fcx-drop .fcx-solo,
.fcx-stage.fcx-drop .fcx-extra { animation: fcx-jitter .34s linear infinite; }
/* the solo dancer is span #1, so the cast is children 2–6 */
.fcx-stage.fcx-drop > span:nth-child(3n) { animation-name: fcx-spin; animation-duration: .5s; }
.fcx-stage.fcx-drop > span:nth-child(2) { animation-delay: .04s; }
.fcx-stage.fcx-drop > span:nth-child(3) { animation-delay: .11s; }
.fcx-stage.fcx-drop > span:nth-child(4) { animation-delay: .07s; }
.fcx-stage.fcx-drop > span:nth-child(5) { animation-delay: .15s; }
.fcx-stage.fcx-drop > span:nth-child(6) { animation-delay: .02s; }

/* phase 1 caption */
.fcx-cue {
  font-family: Poppins, Inter, sans-serif;
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--muted, #6b7480);
  margin: 0;
}

/* ---------- actions ---------- */
.fcx-prompt { animation: fcx-pop .22s ease both; }
.fcx-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.fcx-btn {
  font: 600 .98rem/1 Poppins, Inter, sans-serif;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fcx-btn:focus-visible { outline: 3px solid var(--teal, #15808b); outline-offset: 2px; }
.fcx-btn-primary { background: var(--teal, #15808b); color: #fff; box-shadow: 0 8px 20px rgba(21, 128, 139, .22); }
.fcx-btn-primary:hover { background: var(--teal-dark, #116a73); }
.fcx-btn-secondary { background: #fff; border: 1.5px solid var(--line, #e9edf1); color: var(--ink, #16243a); padding: 12px 20px; }
.fcx-btn-secondary:hover { border-color: var(--teal, #15808b); color: var(--teal-dark, #116a73); }
.fcx-btn-quiet {
  background: transparent;
  border: 0;
  color: var(--muted, #6b7480);
  font: 500 .84rem/1 Inter, system-ui, sans-serif;
  padding: 8px 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fcx-btn-quiet:hover { color: var(--ink, #16243a); }

/* ---------- quiet variant (strict / timed: no scrim, no motion) ---------- */
.fcx-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 0);
  z-index: 946;
  width: min(430px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  background: #16243a;
  color: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .34);
  animation: fcx-toast-in .2s ease both;
}
.fcx-toast-text {
  flex: 1;
  font: 500 .9rem/1.5 Inter, system-ui, sans-serif;
  color: #ffffff;
  margin: 0;
}
.fcx-toast .fcx-btn {
  flex: 0 0 auto;
  font-size: .86rem;
  padding: 10px 16px;
}
.fcx-toast .fcx-btn-secondary { background: transparent; border-color: #52627e; color: #ffffff; }
.fcx-toast .fcx-btn-secondary:hover { border-color: #8fd4c9; color: #8fd4c9; }
.fcx-toast .fcx-btn:focus-visible { outline: 3px solid #8fd4c9; outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 480px) {
  .fcx-overlay { padding: 16px; align-items: flex-end; }
  .fcx-card { padding: 26px 20px 22px; border-radius: 20px; }
  .fcx-title { font-size: 1.22rem; }
  .fcx-body { font-size: .92rem; }
  .fcx-stage { font-size: 2.05rem; gap: 6px; min-height: 68px; }
  .fcx-btn { padding: 13px 18px; font-size: .94rem; }
  .fcx-toast { bottom: 12px; flex-wrap: wrap; }
  .fcx-toast-text { flex: 1 0 100%; }
  .fcx-toast .fcx-btn { flex: 1 1 auto; }
}

/* ---------- reduced motion: no shake, ever ---------- */
@media (prefers-reduced-motion: reduce) {
  .fcx-overlay,
  .fcx-card,
  .fcx-card.fcx-drop,
  .fcx-prompt,
  .fcx-toast,
  .fcx-solo,
  .fcx-extra,
  .fcx-stage.fcx-drop .fcx-solo,
  .fcx-stage.fcx-drop .fcx-extra {
    animation: none !important;
    transform: none !important;
  }
  .fcx-toast { transform: translate(-50%, 0) !important; }
}