/* 藝術方向：紙繪動畫繪本。暖米色紙底、深藍墨線、三種材料各有專屬色。
   舞台由獨立圖層疊成：背景 meadow／小豬 pigs（三隻各自裁切）／房子 houses（三間各自裁切）／野狼 wolf／程式風線（SVG）。
   所有圖層位置皆用舞台百分比，縮放時相對位置不變。 */
:root {
  --paper: #f6ebd6;
  --paper-2: #efdfbf;
  --ink: #24324a;
  --ink-soft: #4a5872;
  --straw: #e8b84a;
  --wood: #b8743d;
  --brick: #c9583c;
  --wind: #3f9a9c;
  --focus: #1b5fd1;
  --tap: 52px;
  --radius: 18px;
  --serif: "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  --sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper-2);
  background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.5), transparent 40%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 9; }
.skip:focus { top: 8px; }

:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

.book {
  max-width: 1100px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.topbar { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-soft); }
.topbar p { margin: 0; }
.running-title { font-family: var(--serif); font-weight: 700; letter-spacing: .08em; }

/* ---------- 舞台與圖層 ---------- */
.stage-wrap { position: relative; }
.stage {
  position: relative;
  aspect-ratio: 8 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  background: linear-gradient(#a9d8ee 0 55%, #b5c96b 55%);
  container-type: inline-size;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
.stage.turn { animation: pagein .45s ease-out; }
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }

.stage img { display: block; max-width: none; -webkit-user-drag: none; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }

.caption {
  margin-top: 10px;
  background: rgba(36,50,74,.92); color: #fff;
  padding: 8px 14px; border-radius: 12px;
  font-size: 17px; line-height: 1.5;
}
.caption[hidden], .caption:empty { display: none; }

/* 小豬：.pw 負責入場動畫，.pig 是整張 pigs.png（各自裁切、擺姿勢、可點）。
   pigs.png 三隻的腳底約在圖高 84%，水平中心約在 19%／49%／79%。 */
.pigs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pw { position: absolute; inset: 0; --delay: 0s; }
.pw1 { transform-origin: 19% 84%; }
.pw2 { transform-origin: 49% 84%; }
.pw3 { transform-origin: 79% 84%; }
.pig { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; cursor: pointer; }
.pig1 { transform-origin: 19% 84%; clip-path: inset(0 65.4% 0 0); }
.pig2 { transform-origin: 49% 84%; clip-path: inset(0 34.4% 0 34.6%); }
.pig3 { transform-origin: 79% 84%; clip-path: inset(0 0 0 65.6%); }
.pw { animation: walkin var(--dur, 2.4s) cubic-bezier(.25,.7,.3,1) var(--delay, 0s) both, step .5s ease-in-out var(--delay, 0s) var(--steps, 6) alternate; }
.pw.pw2 { --delay: .25s; }
.pw.pw3 { --delay: .5s; }
@keyframes walkin { from { transform: translate(var(--from-x, -60%), var(--from-y, 0)); } to { transform: none; } }
@keyframes step { from { rotate: -2deg; } to { rotate: 2deg; } }

/* 房子：.houses 是整張 houses.png 的方塊，三間各自用 clip-path 顯示三分之一，來源檔不裁切。
   房子腳底約在圖高 87%；三間水平中心約在 17.5%／50.5%／83%。 */
.houses { position: absolute; aspect-ratio: 1890 / 832; pointer-events: none; z-index: 2; }
.house { position: absolute; inset: 0; }
.house-straw { transform-origin: 17.5% 87%; }
.house-wood { transform-origin: 50.5% 87%; transition: transform 1.3s cubic-bezier(.3,1.5,.5,1); }
.house-brick { transform-origin: 83% 87%; }
.hp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; cursor: pointer; }
.hw { clip-path: inset(0 32.5% 0 34.4%); transform-origin: 50.5% 87%; }
.hb { clip-path: inset(0 0 0 67.5%); transform-origin: 83% 87%; }
/* 稻草屋切成三片，輕風一來上面兩片會散開 */
.sa, .sb, .sc { transition: transform 1.7s cubic-bezier(.5,0,.9,.6), opacity 1.7s ease-in; }
.sa { clip-path: inset(0 65.6% 54% 0); transform-origin: 17.5% 23%; }
.sb { clip-path: inset(44% 65.6% 29% 0); transform-origin: 17.5% 57%; }
.sc { clip-path: inset(69% 65.6% 0 0); transform-origin: 17.5% 85%; }

.house.shake { animation: shake .3s linear infinite; }
.house.shake.hard { animation-duration: .16s; }
@keyframes shake { 25% { transform: rotate(-1.4deg); } 75% { transform: rotate(1.4deg); } }
.house-straw[data-fx="gone"] .sa { transform: translate(-8%, -26%) rotate(-65deg); opacity: 0; }
.house-straw[data-fx="gone"] .sb { transform: translate(16%, -12%) rotate(48deg); opacity: 0; transition-delay: .12s; }
.house-straw[data-fx="gone"] .sc { transform: scaleY(.55); opacity: .5; transition-delay: .25s; }
.house-wood[data-fx="tilt"] { transform: rotate(5deg) translateX(-1%); }
.house-wood[data-fx="down"] { transform: rotate(12deg) translate(-3%, 2.5%); }

/* 野狼：.ww 負責入場，img.wolf 負責吹氣與被點時的動作 */
.ww { position: absolute; z-index: 4; pointer-events: none; animation: wolfin 1.5s cubic-bezier(.25,.8,.3,1) both; }
.wolf { width: 100%; height: auto; pointer-events: auto; cursor: pointer; transform-origin: 30% 90%; }
@keyframes wolfin { from { transform: translateX(-115%); } to { transform: none; } }
.stage.wind-on .wolf { animation: huff .9s ease-in-out; }
@keyframes huff { 30% { transform: scale(1.07) rotate(-2.5deg); } 70% { transform: scale(1.07) rotate(-2.5deg); } }

/* 程式風線：SVG 路徑上會滑動的一小段白線 */
.gusts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.gust { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 380 1000; stroke-dashoffset: 380; opacity: 0; }
.gusts.on-blow .gust { animation: gust 1.6s ease-out both; }
.gusts.on-blow .g1 { animation-delay: .2s; }
.gusts.on-blow .g2 { animation-delay: .4s; }
.stage:not(.wind-on) .gusts.on-blow .gust { animation: none; opacity: 0; }
.stage[data-level="2"] .gust { stroke-width: 7; }
.stage[data-level="3"] .gust { stroke-width: 10; }
.ambient .gust { animation: gustloop 6s ease-in-out infinite; stroke-width: 6; }
.ambient .g1 { animation-delay: 1.4s; }
.ambient .g2 { animation-delay: 2.8s; }
@keyframes gust { 0% { stroke-dashoffset: 380; opacity: 0; } 12% { opacity: .95; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
@keyframes gustloop { 0% { stroke-dashoffset: 380; opacity: 0; } 10% { opacity: .8; } 45%, 100% { stroke-dashoffset: -1000; opacity: 0; } }

/* 可點區塊（程式畫的透明熱點）與說明標籤 */
.hs { position: absolute; z-index: 6; pointer-events: auto; cursor: pointer; border-radius: 12px; transition: background .2s, box-shadow .2s; }
.hs.picked { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 3px rgba(255,255,255,.9); }
.bubble {
  position: absolute; z-index: 6; display: grid; place-items: center;
  width: 9%; min-width: var(--tap); aspect-ratio: 1; border-radius: 50%;
  background: #fff8e8; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font: 900 clamp(22px, 5cqw, 40px)/1 var(--serif); color: var(--ink); cursor: pointer;
  animation: floaty 2.6s ease-in-out infinite;
}
@keyframes floaty { 50% { translate: 0 -6px; } }
.tag {
  position: absolute; z-index: 6; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 14px; border-radius: 999px; cursor: pointer;
  background: #fff8e8; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  font-size: 14px; font-size: clamp(13px, 2.3cqw, 20px); font-weight: 700; line-height: 1.4; color: var(--ink);
}
.tag[data-hot="straw"] { background: #f7dc8d; }
.tag[data-hot="wood"] { background: #e8bd8a; }
.tag[data-hot="brick"] { background: #f0a58f; }
.tag.picked { outline: 3px solid #fff; }
.smoke {
  position: absolute; z-index: 1; width: 4%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  opacity: 0; animation: smoke 4.5s ease-out infinite;
}
@keyframes smoke { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate(60%,-380%) scale(2.2); } }
.treesway { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 34% 62% at 6% 32%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 62% at 6% 32%, #000 40%, transparent 100%);
  transform-origin: 3% 62%; animation: treesway 3.4s ease-in-out infinite; }
@keyframes treesway { 50% { rotate: 1.4deg; } }

/* 被點到的圖層：輕輕晃一下並發光 */
.pig.picked, .hp.picked, .wolf.picked { animation: wiggle .7s ease-in-out 2; filter: drop-shadow(0 0 8px rgba(255,255,255,.95)); }
@keyframes wiggle { 25% { rotate: -2.5deg; } 75% { rotate: 2.5deg; } }

/* ---------- 各頁的分層布置與敘事動作 ---------- */
/* 封面：小豬走入畫面，鏡頭由近拉遠 */
.stage[data-scene="cover"] .bg { animation: pull 3.2s ease-out both; }
@keyframes pull { from { scale: 1.16; } to { scale: 1; } }
.stage[data-scene="cover"] .pig { translate: 0 4%; scale: .95; }
.stage[data-scene="cover"] .pw { --from-x: -75%; --dur: 2.6s; }

/* 出發：背景緩緩往後移動，小豬縮小、持續邁步 */
.stage[data-scene="depart"] .bg { animation: travel 14s ease-in-out infinite alternate; }
@keyframes travel { from { scale: 1.1; translate: 2% 0; } to { scale: 1.1; translate: -3.5% 0; } }
.stage[data-scene="depart"] .pig { scale: .64; }
.stage[data-scene="depart"] .pig1 { translate: 3% 3%; }
.stage[data-scene="depart"] .pig2 { translate: 0 2%; }
.stage[data-scene="depart"] .pig3 { translate: -3% 0; }
.stage[data-scene="depart"] .pw { --from-x: -50%; --dur: 2.2s; --steps: infinite; }

/* 材料：只有房子與小標籤 */
.stage[data-scene="materials"] .houses { left: 3%; top: 22%; width: 94%; }
.stage[data-scene="materials"] .bg { scale: 1.05; }
.stage[data-scene="materials"] .house { animation: rise .9s cubic-bezier(.3,1.3,.5,1) both; }
.stage[data-scene="materials"] .house-wood { animation-delay: .15s; }
.stage[data-scene="materials"] .house-brick { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; translate: 0 8%; } to { opacity: 1; translate: 0 0; } }
.stage[data-scene="materials"] .tag { top: 85%; }

/* 大風：野狼從左入場，風線掃過，三間房子各自反應 */
.stage[data-scene="wind"] .houses { left: 28%; top: 40%; width: 71%; }
.stage[data-scene="wind"] .ww { left: 0; top: 52%; width: 29%; }
.stage[data-scene="wind"] .bg { filter: saturate(.85) brightness(.96); }
.stage.wind-on[data-scene="wind"] .bg { animation: gustbg 1.6s ease-in-out; }
@keyframes gustbg { 30%, 60% { translate: -1.2% 0; scale: 1.03; } }

/* 結尾：小豬聚到磚屋，煙囪冒煙，樹在搖 */
.stage[data-scene="home"] .houses { left: -58%; top: -3%; width: 145%; }
.stage[data-scene="home"] .pig { scale: .42; pointer-events: none; }
.stage[data-scene="home"] .pig1 { translate: 28% 6.5%; }
.stage[data-scene="home"] .pig2 { translate: 7.5% 6.5%; }
.stage[data-scene="home"] .pig3 { translate: -12% 6.5%; }
.stage[data-scene="home"] .pw { --dur: 2.8s; --steps: 6; }
.stage[data-scene="home"] .pw1 { --from-x: -70%; }
.stage[data-scene="home"] .pw2 { --from-x: -60%; }
.stage[data-scene="home"] .pw3 { --from-x: -50%; }

/* ---------- 文字面板與控制 ---------- */
.panel {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  box-shadow: 6px 6px 0 var(--ink);
}
.panel:focus { outline: none; }
.scene-title { font-family: var(--serif); font-size: 26px; line-height: 1.3; margin: 0 0 6px; }
.scene-text { font-size: 21px; line-height: 1.8; margin: 0 0 12px; letter-spacing: .04em; }
.detail {
  min-height: 3.6em;
  margin: 10px 0;
  padding: 10px 14px;
  border-left: 8px solid var(--wind);
  background: #fff8e8;
  border-radius: 0 12px 12px 0;
  font-size: 19px;
}
.detail:empty::before { content: "點一點畫面或下面的按鈕，找找看。"; color: var(--ink-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip, .btn, .wind-btn {
  min-height: var(--tap);
  min-width: var(--tap);
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 6px 18px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.chip:active, .btn:active, .wind-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.chip[aria-pressed="true"], .chip.on { background: var(--straw); }
.chip[data-mat="wood"][aria-pressed="true"] { background: #e3b27d; }
.chip[data-mat="brick"][aria-pressed="true"] { background: #ec9d86; }
.chip.seen::after { content: " ✓"; }

.play-zone { display: grid; gap: 10px; margin-bottom: 8px; }
.play-zone:empty { display: none; }
.play-zone label { font-weight: 700; display: block; }
.wind-btn { background: var(--wind); color: #fff; font-size: 22px; padding: 8px 26px; }
.wind-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
input[type="range"] { width: min(320px, 100%); height: var(--tap); accent-color: var(--wind); }
.wind-level { font-weight: 700; }

.controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; }
.btn.primary { background: var(--brick); color: #fff; }
.btn.toggle[aria-pressed="false"] { background: var(--paper-2); text-decoration: line-through; text-decoration-thickness: 2px; }
.btn.toggle[aria-pressed="false"] .lbl { text-decoration: line-through; }
#btn-mute[aria-pressed="true"] { background: var(--ink); color: #fff; text-decoration: none; }
#btn-mute[aria-pressed="false"] { text-decoration: none; }
#btn-mute[aria-pressed="false"] .lbl { text-decoration: none; }
.btn[disabled] { opacity: .4; cursor: default; box-shadow: none; }
.note { min-height: 1.5em; margin: 0; text-align: center; font-size: 15px; color: var(--ink-soft); }
.dots { display: flex; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.dots button {
  width: var(--tap); height: var(--tap); background: none; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; touch-action: manipulation;
}
.dots button::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; }
.dots button[aria-current="step"]::before { background: var(--brick); width: 22px; height: 22px; }

@media (min-width: 900px) {
  body { font-size: 19px; }
  .book { grid-template-columns: 1.55fr 1fr; grid-template-areas: "top top" "stage panel" "ctl ctl" "note note" "dots dots"; gap: 16px 24px; padding: 20px 24px; align-items: start; }
  .topbar { grid-area: top; }
  .stage-wrap { grid-area: stage; }
  .panel { grid-area: panel; }
  .controls { grid-area: ctl; }
  .note { grid-area: note; }
  .dots { grid-area: dots; }
}
@media (max-width: 420px) {
  .btn { padding: 6px 12px; font-size: 16px; }
  .scene-text { font-size: 20px; }
  .tag { padding: 2px 8px; border-width: 2px; }
}
/* 減少動態：不做入場、漂浮、風線與抖動，房子只在狀態改變時直接換位 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .ambient .gust { display: none; }
  .smoke { display: none; }
}