/* ============================================================
   Stage 2F.7 Smart MiPai -- CSS-3D card-flip reveal. Pure CSS transform/
   transition + a small vanilla-JS state toggle (static/js/mipai.js), no
   Three.js/canvas/library (spec 十四: "本阶段先使用 CSS 3D... 不要立即引
   入完整 Three.js"). frontend/styles/reset.css's global
   prefers-reduced-motion rule already collapses every transition-duration
   below to ~0, so no separate reduced-motion branch is needed here.
   ============================================================ */

.mipai-controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }

.mipai-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  perspective: 1200px;
}

.mipai-card {
  position: relative;
  min-height: 200px;
}

.mipai-card-face {
  width: 100%;
  min-height: 200px;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mipai-card-back {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  background: linear-gradient(160deg, var(--brand-600), var(--brand-400));
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transform: rotateY(0deg);
  transition: transform var(--duration-slower) var(--ease-decel), box-shadow var(--duration-base) var(--ease-standard);
  backface-visibility: hidden;
}
.mipai-card-back:hover { box-shadow: var(--shadow-lg); }
.mipai-card-back:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 3px; }

.mipai-card-index { font-family: var(--font-mono); font-size: var(--text-xs); opacity: 0.75; letter-spacing: 0.1em; }
.mipai-card-back-label { font-size: var(--text-md); font-weight: 700; }
.mipai-card-back-hint { font-size: var(--text-xs); opacity: 0.85; }

.mipai-card-front {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  animation: mipai-flip-in var(--duration-slower) var(--ease-decel);
}

.mipai-card.is-revealed .mipai-card-back { display: none; }

@keyframes mipai-flip-in {
  from { transform: rotateY(-90deg); opacity: 0; }
  to { transform: rotateY(0deg); opacity: 1; }
}

.mipai-face-title { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-2); }
.mipai-face-value { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-2); }
.mipai-face-desc { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-relaxed); }

.mipai-face-structure { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.mipai-structure-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

@media (max-width: 720px) {
  .mipai-stage { gap: var(--space-2); }
  .mipai-card, .mipai-card-face { min-height: 160px; }
  .mipai-card-face { padding: var(--space-3); }
  .mipai-face-value { font-size: var(--text-lg); }
  .mipai-card-back-label { font-size: var(--text-sm); }
}

@media (max-width: 420px) {
  .mipai-card, .mipai-card-face { min-height: 140px; }
  .mipai-card-back-hint, .mipai-card-index { display: none; }
  /* Real-browser testing at 320px found a genuine bug here: a strict
     3-equal-column grid squeezed each card to ~90px wide, and once
     revealed, real content (structure table, multi-sentence explanation)
     wrapped into a ~750px-tall unreadable sliver -- functionally "the PC
     layout shrunk" (spec 三十三 explicitly forbids that), even though the
     letter of "保持三卡可见" (spec 十四) was technically satisfied by 3
     narrow columns. Fix: a still-unrevealed card stays a compact tile in
     the 3-across row (spec's "三卡可见" requirement); once revealed, it
     spans the full row width so its real content has room to breathe --
     "可见" was never meant to require "equally cramped" for revealed
     content. Unrevealed siblings keep reflowing into their own row below. */
  .mipai-card.is-revealed { grid-column: 1 / -1; }
  .mipai-card.is-revealed .mipai-card-face { min-height: 0; }
}