/* 巨魔怪的故事 — 課堂投影用繪本 */
:root{
  --u: 19.2px;              /* 舞台寬度的 1%，由 app.js 設定 */
  --bg:#14171c;
  --ink:#f5f0e6;
  --dlg:#ffd27a;
  --fs:60px;                /* 故事頁統一字級，由 app.js 計算 */
  --fsQ:120px;              /* 提問頁 */
  --fsL:48px;               /* 啟發頁 */
  --fsE:48px;               /* 結尾頁 */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;
  font-weight:700;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ---------- 舞台：固定 16:9 ---------- */
#stage{
  position:relative;
  width:min(100vw, 177.7778vh);
  height:min(56.25vw, 100vh);
  overflow:hidden;
  background:var(--bg);
}

.slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
}
.slide.on{opacity:1;visibility:visible}

/* ---------- 圖片區：68% 高、100% 寬 ---------- */
.imgwrap{
  flex:0 0 68%;height:68%;width:100%;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.imgwrap img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}
.imgwrap img.hide{display:none}
.ph{
  position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,#23272e 0 calc(var(--u)*2),#2a2f37 0 calc(var(--u)*4));
  display:flex;align-items:center;justify-content:center;
  color:rgba(245,240,230,.4);
  font-size:calc(var(--u)*3.4);
  letter-spacing:.05em;
}

/* ---------- 文字面板：32% 高 ---------- */
.panel{
  flex:0 0 32%;height:32%;
  position:relative;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:calc(var(--u)*0.8) calc(var(--u)*3) calc(var(--u)*1.8);
  text-align:center;
  font-size:var(--fs);
  line-height:1.25;
  overflow:hidden;
}
.pcontent{width:100%}
.beats{width:100%}
.beat{display:none}
.beat.on{display:block;animation:fadeIn .15s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(.18em)}to{opacity:1;transform:none}}
html.measuring #stage{visibility:hidden}
html.measuring .beat.on{animation:none}
html.measuring .item{transition:none}

.line{
  display:block;
  white-space:nowrap;
  line-height:1.25;
}
.line.dlg{color:var(--dlg)}

/* 拍點 */
.dots{
  position:absolute;
  left:0;right:0;bottom:calc(var(--u)*0.5);
  display:flex;justify-content:center;gap:calc(var(--u)*0.55);
  pointer-events:none;
}
.dots i{
  width:calc(var(--u)*0.45);height:calc(var(--u)*0.45);
  border-radius:50%;
  background:rgba(245,240,230,.18);
}
.dots i.on{background:rgba(245,240,230,.5)}
.dots.hide{display:none}

/* ---------- 封面：滿版圖 + 疊字 ---------- */
.slide[data-kind="cover"] .imgwrap{flex:1 1 100%;height:100%}
.slide[data-kind="cover"] .imgwrap img{object-fit:cover}
.cover-text{
  position:absolute;left:0;right:0;top:0;
  z-index:2;
  padding:calc(var(--u)*4.5) calc(var(--u)*4) calc(var(--u)*5);
  text-align:center;
  background:linear-gradient(180deg,rgba(8,10,14,.55) 0%,rgba(8,10,14,.28) 55%,rgba(8,10,14,0) 100%);
}
.cover-title{
  display:block;white-space:nowrap;
  font-size:calc(var(--u)*9);
  font-weight:900;color:#fff;
  letter-spacing:.06em;line-height:1.12;
  text-shadow:0 calc(var(--u)*.18) calc(var(--u)*.9) rgba(0,0,0,.85),
              0 0 calc(var(--u)*2.2) rgba(0,0,0,.55);
}
.cover-sub{
  display:block;white-space:nowrap;
  margin-top:.5em;
  font-size:calc(var(--u)*2.7);
  color:#f2ead8;letter-spacing:.1em;
  text-shadow:0 calc(var(--u)*.15) calc(var(--u)*.7) rgba(0,0,0,.85);
}

/* ---------- 提問頁 ---------- */
.slide[data-kind="question"] .panel{font-size:var(--fsQ)}

/* ---------- 啟發頁：圖 50% / 面板 50% ---------- */
.slide[data-kind="lessons"] .imgwrap{flex:0 0 50%;height:50%}
.slide[data-kind="lessons"] .panel{flex:0 0 50%;height:50%;font-size:var(--fsL)}
.lessons-title{
  display:block;white-space:nowrap;
  font-size:1.15em;font-weight:900;color:#fff;
  letter-spacing:.1em;margin-bottom:.32em;
}
.items{width:100%}
.item{
  display:flex;align-items:center;justify-content:center;
  gap:.45em;white-space:nowrap;margin-top:.22em;
  opacity:0;transform:translateY(.2em);
  transition:opacity .25s ease,transform .25s ease;
}
.item.show{opacity:1;transform:none}
.item.past{opacity:.5}
.item .num{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:1.55em;height:1.55em;border-radius:50%;
  background:var(--dlg);color:#1a1206;
  font-size:.78em;font-weight:900;
}
.item .txt{display:block;white-space:nowrap}

/* ---------- 結尾頁 ---------- */
.slide[data-kind="end"] .panel{font-size:var(--fsE)}
.end-title{
  display:block;white-space:nowrap;
  font-size:1.3em;font-weight:900;color:#fff;
  letter-spacing:.08em;margin-bottom:.3em;
}
.btn{
  display:inline-block;margin-top:.42em;
  padding:.32em 1em;
  font-size:.74em;font-weight:700;white-space:nowrap;
  color:#1a1206;background:var(--dlg);
  border-radius:.5em;text-decoration:none;
  box-shadow:0 calc(var(--u)*.15) calc(var(--u)*.6) rgba(0,0,0,.45);
}
.btn:hover{filter:brightness(1.08)}

/* ---------- HUD ---------- */
#hud{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:calc(var(--u)*.7) calc(var(--u)*1.3);
  pointer-events:none;
  font-size:calc(var(--u)*1.2);font-weight:400;
  color:rgba(245,240,230,.4);letter-spacing:.06em;
}
#counter{font-variant-numeric:tabular-nums}

@media (max-width:700px){#hint{display:none}}