/* 首頁：遊戲入口玩法預覽、信封開場（home-intro.js）、信紙舞台（home-cast.js）。由 home-stage2 sample 定版（導演 2026-10-21） */

/* ---------- 遊戲入口：左側換成會動的玩法預覽 ---------- */
.game-choice.has-preview{gap:14px;padding:10px 14px 10px 10px}
.game-choice.has-preview .game-choice-icon{display:none}
.game-choice:nth-child(1) .pv{background:#eef7e6}
.game-choice:nth-child(2) .pv{background:#fff6df}
.game-choice:nth-child(3) .pv{background:#e9f2fb}
.game-choice:nth-child(4) .pv{background:#f6ecfa}

/* ---------- 開場（約 3 秒，每次瀏覽只播一次） ---------- */
.intro-veil{position:absolute;inset:0;z-index:20;pointer-events:none}
.intro-envelope{position:absolute;left:50%;top:50%;width:240px;height:160px;margin:-80px 0 0 -120px;perspective:600px}
.intro-envelope .body{position:absolute;inset:0;border-radius:10px;background:#f7e6bd;box-shadow:0 14px 30px rgba(33,80,58,.35)}
.intro-envelope .body::after{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(to top right,#efd7a0 49%,transparent 50%) left bottom/50% 100% no-repeat,linear-gradient(to top left,#efd7a0 49%,transparent 50%) right bottom/50% 100% no-repeat}
.intro-envelope .flap{position:absolute;left:0;right:0;top:0;height:96px;transform-origin:50% 0;transform-style:preserve-3d;z-index:2}
.intro-envelope .flap::before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background:#e8c98a;border-radius:10px 10px 0 0}
.intro-envelope .wax{position:absolute;left:50%;top:70px;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:#c8452f;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.25);display:grid;place-items:center;z-index:3;overflow:hidden}
.intro-envelope .wax img{width:70%;border-radius:50%;opacity:.9;mix-blend-mode:screen}


@media(max-width:680px){.pv{width:104px;height:84px}.pv-match .grid{gap:3px}.game-choice.has-preview{gap:10px}.pv-belt .word img{height:30px}.pv-belt .slot{width:24px;height:24px}}
@media(max-width:375px){.pv{width:92px;height:78px}}
@media(prefers-reduced-motion:reduce){.pv *{animation:none!important;opacity:1!important}.pv .tap,.pv .seal{display:none}.intro-veil{display:none}}

/* ---------- 信紙舞台：角色站在 .selector-letter 上緣走來走去（紙偶式） ---------- */
.letter-stage{position:absolute;z-index:4;pointer-events:none;transform-origin:left bottom;--u:80px}
.stage-actor{position:absolute;bottom:-4px;left:0;pointer-events:auto;cursor:pointer;touch-action:manipulation;will-change:transform}
.stage-actor .bob{transform-origin:50% 100%}
.stage-actor img{display:block;height:calc(var(--u) * var(--h,1));width:auto;filter:drop-shadow(0 3px 0 #b68e4d55);user-select:none;-webkit-user-drag:none}
.stage-actor .shadow{position:absolute;left:15%;right:15%;bottom:-2px;height:7px;border-radius:50%;background:#7a5a2a33}
.stage-say{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);padding:6px 11px;border:2px solid #ebd6a1;border-radius:14px;background:#fffdf4;color:#18583e;font-size:clamp(17px,calc(var(--u) * .17),22px);font-weight:1000;white-space:nowrap;box-shadow:0 3px 0 #d4bc87;animation:saypop .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes saypop{from{opacity:0;transform:translate(-50%,8px) scale(.6)}}
/* 歡呼星星 */
.stage-burst{position:absolute;left:50%;top:30%;width:0;height:0;pointer-events:none}
.stage-burst i{position:absolute;left:0;top:0;width:calc(var(--u) * .16);height:calc(var(--u) * .16);background:var(--c);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 1px 0 #8a5a1a55)}
/* iPad 直式：四個入口時信紙加寬，五字遊戲名不擠成三行 */
@media(min-width:681px) and (orientation:portrait){body[data-page="select"] .selector-letter{width:min(580px,84%);right:8%}}
@media(min-width:681px){body[data-page="select"] .game-choice-copy strong.kid-text{flex-wrap:nowrap;font-size:clamp(20px,2.4vw,27px)}}
/* 電腦／平板橫式：六個入口排 3×2（2026-10-22 加走小路、接信大郵袋；原 2×2）、預覽在上遊戲名在下，整封信不出捲軸（導演 2026-10-21 回報翻翻樂／輸送帶被切掉）；越矮越精簡 */
@media(min-width:681px) and (orientation:landscape){
  body[data-page="select"] .selector-letter{width:min(880px,74%);overflow:visible;max-height:none}
  body[data-page="select"] .game-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .game-choice.has-preview{flex-direction:column;justify-content:center;gap:8px;min-height:0;padding:10px 10px 12px}
  .game-choice.has-preview .game-choice-copy{justify-items:center;text-align:center}
  .game-choice.has-preview .game-choice-arrow{display:none}
  body[data-page="select"] .game-choice.has-preview .game-choice-copy strong.kid-text{justify-content:center;font-size:clamp(15px,1.45vw,22px)}
  body[data-page="select"] .game-choice{min-width:0}
}
@media(min-width:681px) and (orientation:landscape) and (max-height:760px){
  body[data-page="select"] .selector-letter{padding:20px 26px 20px}
  body[data-page="select"] .start-description{margin:4px 0 10px}
  body[data-page="select"] .game-choices{gap:10px}
  .game-choice.has-preview{gap:4px;padding:7px 8px 8px}
  .game-choice-copy small{display:none}
}
@media(min-width:681px) and (orientation:landscape) and (max-height:620px){
  body[data-page="select"] .selector-letter .eyebrow,body[data-page="select"] .start-description{display:none}
  body[data-page="select"] .selector-title{margin-bottom:8px}
  .pv{transform:scale(.82);margin:-9px 0}
}
/* 寬螢幕：信紙往下貼地，上方留出舞台空間 */
@media(min-width:681px){body[data-page="select"] .game-selector{align-items:flex-end;padding-bottom:30px}}
/* 手機：郵局圖下方不再露出天空藍，改用圖片底部的草地／小路色延伸 */
@media(max-width:680px){.start-world{background:linear-gradient(180deg,transparent 0 calc(69% - 36px),#d4d86e calc(69% - 1px),#b9d468 100%),url('assets/postoffice-master.jpg') 46% top/auto 69% no-repeat,#b9d468}}
.letter-stage[hidden]{display:none}
/* 手機與直式平板：六個入口排 2 欄×3 列，預覽在上、遊戲名在下，一頁放得下（iOS 已鎖整頁滑動） */
@media(orientation:portrait),(max-width:680px){
  body[data-page="select"] .game-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .game-choice.has-preview{flex-direction:column;justify-content:center;gap:4px;min-width:0;min-height:0;padding:7px 6px 8px}
  .game-choice.has-preview .game-choice-copy{justify-items:center;text-align:center}
  .game-choice.has-preview .game-choice-arrow{display:none}
  body[data-page="select"] .game-choice.has-preview .game-choice-copy strong.kid-text{justify-content:center}
  body[data-page="select"] .game-choice-copy small{display:none}
}
@media(max-width:680px){body[data-page="select"] .start-description{display:none}body[data-page="select"] .game-choice-copy strong.kid-text{flex-wrap:nowrap;font-size:clamp(14px,4.3vw,20px)}}
/* 手機：遊戲名依卡片寬度縮放，五字＋注音也不超出框 */
@media(max-width:680px){.game-choice.has-preview{container-type:inline-size}body[data-page="select"] .game-choice.has-preview .game-choice-copy strong.kid-text{font-size:min(20px,4.3vw,11cqi)}}
@media(max-width:680px) and (max-height:700px){.pv{transform:scale(.72);margin:-12px -15px}body[data-page="select"] .selector-letter .eyebrow{display:none}}

/* 首頁分區（導演 2026-10-27）：home-pages.js 把入口分成「學英文／玩注音／練腦力」三頁左右滑，每頁 2×2（回到四款時期大小）；下方分區鈕 */
body[data-page="select"] .game-choices.paged{display:flex;gap:0;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;margin:-8px -8px 0;padding:12px 0 10px;-webkit-overflow-scrolling:touch}
body[data-page="select"] .game-choices.paged::-webkit-scrollbar{display:none}
.choice-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;padding:0 8px;scroll-snap-align:start;align-content:start}
@media(orientation:portrait),(max-width:680px){.choice-page{gap:9px}}
@media(min-width:681px) and (orientation:landscape){body[data-page="select"] .selector-letter{width:min(820px,66%)}}
@media(min-width:681px) and (orientation:landscape) and (max-height:760px){.choice-page{gap:10px}}
.pager{display:flex;align-items:stretch;justify-content:center;gap:10px;margin-top:4px}
.pager .tab{position:relative;display:flex;align-items:center;gap:7px;min-height:46px;padding:4px 14px 4px 8px;border:3px solid #bbd6b8;border-radius:16px;background:#f3f8e8;color:#195d42;font:1000 18px/1 "Naikai",ui-rounded,system-ui,sans-serif;box-shadow:0 4px 0 #9fc7a2;cursor:pointer;touch-action:manipulation;transition:background .2s,color .2s,transform .2s}
.pager .tab .tab-icon{display:grid;place-items:center;min-width:34px;height:30px;padding:0 4px;border-radius:9px;background:#fff;color:#2f9d5a;font:1000 14px/1 "Naikai",ui-rounded,system-ui,sans-serif}
.pager .tab b{font:inherit}
.pager .tab.on{background:#2f9d5a;border-color:#2f9d5a;color:#fff;box-shadow:0 4px 0 #1d6b3c}
.pager .tab:active{transform:translateY(3px);box-shadow:0 1px 0 #9fc7a2}
.pager .tab.has-new::after{content:"";position:absolute;right:-5px;top:-5px;width:12px;height:12px;border-radius:50%;background:#e8574a;box-shadow:0 0 0 2px #fffdf6}
.pager .tab.hint{animation:pagerNudge .7s ease-in-out 3}
@keyframes pagerNudge{50%{transform:translateY(-4px) scale(1.08)}}
@media(max-width:680px){.pager{gap:6px}.pager .tab{gap:4px;padding:3px 8px 3px 5px;font-size:15px}.pager .tab .tab-icon{min-width:28px;height:26px;font-size:12px}}
.new-tag{position:absolute;right:-5px;top:-9px;z-index:2;padding:3px 9px;border-radius:999px;background:#e8574a;color:#fff;font:1000 13px/1.2 "Naikai",ui-rounded,system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 3px 0 #9b3229;transform:rotate(8deg);animation:newPop 1.6s ease-in-out infinite}
@keyframes newPop{50%{transform:rotate(8deg) scale(1.12)}}
/* 第 8 張：包裹拼拼樂（草綠＋牛皮紙） */
.game-choice.is-pack{position:relative;border-color:#d8b97e;background:#f8efd9;box-shadow:0 6px 0 #c09a5c;color:#6b4a1c}
.game-choice.is-pack .game-choice-copy small{color:#9a7a4c}
.game-choice.is-pack:active{box-shadow:0 2px 0 #c09a5c}
.game-choice.is-dig{position:relative}
/* 開場前先藏（index.html head 設 data-intro=pending，home-intro.js 接手後拿掉；2026-10-29 導演回報 iPhone 先閃主畫面） */
html[data-intro="pending"] .selector-letter,html[data-intro="pending"] .start-sticker,html[data-intro="pending"] .start-feifei,html[data-intro="pending"] .start-abao{opacity:0}
/* 分頁鈕平分寬度不超出信紙（2026-10-29 導演回報 iPhone 超框） */
.pager .tab{flex:1 1 0;min-width:0;justify-content:center}
@media(max-width:480px){.pager{gap:5px}.pager .tab{gap:2px;padding:3px 4px;font-size:13px;border-width:2px}.pager .tab .tab-icon{display:none}}