/* story_stage.css v2 — 4 格故事 grid + 家人角色串場
 * 對話匡完全隱藏
 */

/* 對話匡完全拿掉 (只在故事模式 ep001/ep002) */
.page:has(.story-stage) .bubble-area,
body.story-mode .bubble-area {
  display: none !important;
}

/* 故事舞台 = 整版 */
.story-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0a1735 0%, #050a18 100%);
  color: white;
  font-family: -apple-system, "Noto Sans TC", "PingFang TC", sans-serif;
  padding: 12px 22px;
  overflow: hidden;
  gap: 12px;
}
.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-header {
  display: flex; align-items: center; gap: 16px;
  flex-shrink: 0;
  position: relative;
}
.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.1;
  flex: 1;
  padding: 6px 14px;
  border-radius: 10px;
  border: 4px solid transparent;
  transition: border-color .3s ease;
}
/* 標題正在說話 — 紅粗框 */
.story-title.speaking {
  border-color: #ef4444;
  background: rgba(239,68,68,.12);
  animation: speakingPulse 0.9s ease-in-out infinite;
}
.story-title .accent { color: #f72585; }
.story-title .big { font-size: 1.4em; }

/* 家人角色 — 放在 4 格 grid 正中央交叉點 */
.story-speaker {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 170px; height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.7)) drop-shadow(0 0 24px rgba(255,209,102,.4));
  animation: speakerBobCenter 2.6s ease-in-out infinite;
  z-index: 40;
  pointer-events: none;
}
@keyframes speakerBobCenter {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  50% { transform: translate(-50%, calc(-50% - 10px)) rotate(3deg); }
}
@media (min-width: 1024px) and (orientation: landscape) {
  .story-speaker { width: 200px; height: 200px; }
}

/* ===== 4 格 Grid ===== */
.story-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}
.story-grid.r1c4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
.story-grid.r2c2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.story-grid.r1c3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
.story-grid.r1c2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }

.grid-cell {
  background: rgba(255,255,255,.05);
  border: 3px solid #fbbf24;
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
  position: relative;
  animation: cellFadeIn .5s ease both;
  box-shadow: 0 0 0 0 rgba(251,191,36,.4), 0 6px 16px rgba(0,0,0,.5);
}
.grid-cell.hero {
  border-color: #f72585;
  background: rgba(247,37,133,.08);
  animation: cellFadeIn .5s ease both, heroPulse 1.6s ease-in-out infinite 0.4s;
}
.grid-cell-1 { animation-delay: 0s; }
.grid-cell-2 { animation-delay: .12s; }
.grid-cell-3 { animation-delay: .24s; }
.grid-cell-4 { animation-delay: .36s; }

.grid-cell.hero::after {
  content: '👀';
  position: absolute;
  top: 4px; left: 4px;
  background: #f72585; color: white;
  width: 32px; height: 32px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(247,37,133,.6);
  animation: tipBob 1.4s ease-in-out infinite;
  z-index: 3;
}

@keyframes cellFadeIn {
  from { opacity: 0; transform: translateY(15px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247,37,133,.85), 0 8px 24px rgba(247,37,133,.4); }
  50% { box-shadow: 0 0 0 10px rgba(247,37,133,0), 0 8px 24px rgba(247,37,133,.6); }
}
@keyframes tipBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Cell 內容 */
.cell-img {
  max-width: 100%;
  max-height: 65%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.cell-emoji {
  font-size: 100px;
  line-height: 1;
  text-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.cell-label {
  font-size: 20px;
  font-weight: 900;
  color: #ffd166;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.grid-cell.hero .cell-label { color: white; }
.cell-detail {
  font-size: 14px;
  font-weight: 700;
  color: #fef3c7;
  text-align: center;
  line-height: 1.35;
  max-width: 100%;
}
.cell-bignum {
  font-size: 70px;
  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; }

/* 特效 cell — SVG 動畫填滿 */
.cell-effect {
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.cell-effect svg {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}

/* iPad 12.9 橫向 */
/* 正在說話的 cell — 紅色粗框閃爍 (JS 加上 .speaking class) */
.grid-cell.speaking {
  border-color: #ef4444 !important;
  border-width: 7px !important;
  background: rgba(239,68,68,.12) !important;
  z-index: 5;
  animation: speakingPulse 0.85s ease-in-out infinite !important;
}
.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.04);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(239,68,68,0), 0 0 36px rgba(239,68,68,.8);
    transform: scale(1.07);
  }
}

@media (min-width: 1024px) and (orientation: landscape) {
  .story-stage { padding: 16px 32px; gap: 14px; }
  .story-title { font-size: 38px; padding-right: 130px; }
  .story-speaker { width: 120px; height: 120px; }
  .cell-label { font-size: 24px; }
  .cell-detail { font-size: 16px; }
  .cell-bignum { font-size: 90px; }
  .cell-emoji { font-size: 130px; }
}