/* story_stage.css v6 — iPad Pro 12.9 直立滿版 / 15 頁版 / 2 SVG + 2 photo+fam
 * 直立 1024 × 1366，扣上方 ~50px 狀態列、扣下方 ~80px 控制鈕
 */

/* 對話匡完全隱藏 */
.page:has(.story-stage) .bubble-area,
body.story-mode .bubble-area {
  display: none !important;
}

/* 直立滿版舞台 */
.story-stage {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr 1fr auto;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #0a1735 0%, #050a18 100%);
  color: white;
  font-family: -apple-system, "Noto Sans TC", "PingFang TC", sans-serif;
  overflow: hidden;
}
.story-stage.bg-sunset { background: linear-gradient(180deg, #1a0f3a 0%, #461a47 50%, #6e2854 100%); }
.story-stage.bg-sky    { background: linear-gradient(180deg, #0c4a85 0%, #1976b0 100%); }
.story-stage.bg-warm   { background: linear-gradient(180deg, #3d1b1b 0%, #6a2d2d 100%); }
.story-stage.bg-forest { background: linear-gradient(180deg, #0d2818 0%, #1f4d33 100%); }
.story-stage.bg-night  { background: radial-gradient(ellipse at top, #1a1a4a 0%, #050a18 70%); }
.story-stage.bg-finale { background: radial-gradient(ellipse at center, #6e2854 0%, #1a0f3a 60%, #050a18 100%); }

/* 標題列 — 跨 2 欄 */
.story-header {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 4px 8px;
  border-radius: 12px;
  transition: all .3s ease;
}
.story-title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffd166;
  text-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 24px rgba(255,209,102,.3);
  margin: 0;
  line-height: 1.15;
  flex: 1;
}
.story-title .accent { color: #f72585; }
.story-title .big { font-size: 1.4em; }
.story-header.speaking {
  background: rgba(239,68,68,.18);
  box-shadow: 0 0 0 4px rgba(239,68,68,.8), 0 0 28px rgba(239,68,68,.6);
  animation: speakingPulse 0.85s ease-in-out infinite;
}

/* ===== 4 格 — 直立排 2x2 ===== */
.grid-cell {
  background: rgba(255,255,255,.05);
  border: 3px solid #fbbf24;
  border-radius: 14px;
  padding: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  min-height: 0;
  overflow: hidden;
  position: relative;
  animation: cellFadeIn .5s ease both;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.grid-cell-1 { animation-delay: 0s; }
.grid-cell-2 { animation-delay: .12s; }
.grid-cell-3 { animation-delay: .24s; }
.grid-cell-4 { animation-delay: .36s; }
@keyframes cellFadeIn {
  from { opacity: 0; transform: translateY(15px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ⭐ 正在說話 — 紅粗框心跳 (JS 加 .speaking) */
.grid-cell.speaking, .story-header.speaking {
  border-color: #ef4444 !important;
  border-width: 6px !important;
  background: rgba(239,68,68,.15) !important;
  z-index: 5;
  animation: speakingPulse 0.85s ease-in-out infinite;
}
.grid-cell.speaking .cell-label { color: #ef4444 !important; }
@keyframes speakingPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239,68,68,.95), 0 0 28px rgba(239,68,68,.7);
    transform: scale(1.02);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(239,68,68,0), 0 0 36px rgba(239,68,68,.85);
    transform: scale(1.05);
  }
}

/* Cell 內容 */
.cell-img {
  max-width: 100%;
  max-height: 70%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.cell-emoji {
  font-size: 70px;
  line-height: 1;
  text-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.cell-label {
  font-size: 17px;
  font-weight: 900;
  color: #ffd166;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.cell-detail {
  font-size: 12px;
  font-weight: 700;
  color: #fef3c7;
  text-align: center;
  line-height: 1.3;
}
.cell-bignum {
  font-size: 52px;
  font-weight: 900;
  color: #4cc9f0;
  line-height: 1;
}
.cell-bignum.pink { color: #f72585; }
.cell-bignum.green { color: #4ade80; }
.cell-bignum.yellow { color: #ffd166; }
.cell-bignum .unit { font-size: 0.4em; font-weight: 700; }

/* SVG cell — 填滿 */
.cell-effect {
  width: 100%;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.cell-effect svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* ===== 家人角色 — 多位置避免重疊 ===== */
/* 預設右上 */
.story-speaker {
  position: absolute;
  width: 110px; height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.6));
  z-index: 40;
  pointer-events: none;
  animation: speakerBob 2.4s ease-in-out infinite;
}
.story-speaker.pos-tr { top: 14px; right: 14px; }
.story-speaker.pos-tl { top: 14px; left: 14px; }
.story-speaker.pos-bl { bottom: 14px; left: 14px; }
.story-speaker.pos-br { bottom: 14px; right: 14px; }
.story-speaker.pos-center {
  top: 50%; left: 50%;
  width: 130px; height: 130px;
  transform: translate(-50%, -50%);
  animation: speakerBobCenter 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.8)) drop-shadow(0 0 20px rgba(255,209,102,.45));
}
@keyframes speakerBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}
@keyframes speakerBobCenter {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  50% { transform: translate(-50%, calc(-50% - 10px)) rotate(3deg); }
}

/* ===== 結尾頁 ===== */
.story-stage.finale .grid-cell {
  border-width: 4px;
  border-color: #ffd166;
  background: rgba(255,209,102,.08);
}
.story-stage.finale .story-title {
  font-size: 38px;
  color: #ffd166;
  text-shadow: 0 0 40px rgba(255,209,102,.7), 0 0 60px rgba(247,37,133,.5);
  animation: titleGlow 2s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 20px rgba(255,209,102,.5)); }
  50% { filter: brightness(1.3) drop-shadow(0 0 30px rgba(255,209,102,.9)); }
}

/* ===== iPad Pro 12.9 直立 (≥1024×≥1300) ===== */
@media (min-width: 1000px) and (orientation: portrait), (min-width: 1024px) and (min-height: 1100px) {
  .story-stage { padding: 16px 20px; gap: 14px; }
  .story-title { font-size: 38px; }
  .cell-label { font-size: 20px; }
  .cell-detail { font-size: 14px; }
  .cell-bignum { font-size: 70px; }
  .cell-emoji { font-size: 100px; }
  .story-speaker { width: 140px; height: 140px; }
  .story-speaker.pos-center { width: 200px; height: 200px; }
  .story-stage.finale .story-title { font-size: 50px; }
}

/* iPad 12.9 橫向 fallback */
@media (min-width: 1024px) and (orientation: landscape) {
  .story-stage { padding: 14px 28px; gap: 12px; }
  .story-title { font-size: 36px; }
  .cell-label { font-size: 22px; }
  .cell-bignum { font-size: 80px; }
  .story-speaker { width: 130px; height: 130px; }
}

@media (max-width: 700px) {
  .story-title { font-size: 22px; }
  .cell-label { font-size: 14px; }
  .cell-bignum { font-size: 40px; }
  .story-speaker { width: 80px; height: 80px; }
}

/* ===== v15+ 6 cells grid (3 column × 2 row for 20 頁/集) ===== */
.story-stage.grid-6 {
  grid-template-rows: auto 1fr 1fr auto;
  grid-template-columns: 1fr 1fr 1fr;
}
.story-stage.grid-6 .story-header { grid-column: 1 / 4; }
.story-stage.grid-6 .grid-cell-5,
.story-stage.grid-6 .grid-cell-6 {
  animation-delay: .48s;
}
.story-stage.grid-6 .grid-cell-6 { animation-delay: .60s; }