/* 首页：玩游戏，学英语。一页从上往下：品牌 → 演示 → 真玩一句 → 选场景 → 自己做一课 → 注册 */
body[data-mode=home]{background:#0b1024 url(../assets/intro/night.webp) center top/cover fixed}
/* 1. 品牌 */
.hero{max-width:760px;margin:0 auto;padding:22px 16px 0;text-align:center}
.hero h1{margin:0;font:700 clamp(32px,9vw,56px)/1.15 "Songti SC","Noto Serif SC",serif;color:#fff6dc;letter-spacing:.04em;text-shadow:0 0 22px #f2c66d55}
.hero .lang{display:inline-block;min-width:2em;color:var(--gold);transition:opacity .25s,transform .25s}
.hero .lang.out{opacity:0;transform:translateY(-.25em)}
.hero .sub{margin:6px 0 0;font-size:clamp(16px,4.4vw,19px);color:#e8dcb8}
/* 2. 演示视频 */
.demo{max-width:560px;margin:12px auto 0;padding:0 16px}
.demo-label{text-align:center;font-size:12px;color:#9fd3c7;letter-spacing:.1em;margin-bottom:4px}
.demo-box{aspect-ratio:16/9;max-height:26vh;margin:0 auto;border:2px solid #5fb3a8aa;box-shadow:0 0 0 4px #5fb3a81a;overflow:hidden;border-radius:14px;background:#ffffff08;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:14px}
.demo-box small{font-size:11px}
.demo-box video{display:block;width:100%;height:100%;object-fit:cover}
/* 3. 游戏框 */
.game{max-width:760px;margin:12px auto 0;padding:0 16px}
.game-head{text-align:center;font:600 14px "Songti SC","Noto Serif SC",serif;color:var(--gold);letter-spacing:.2em;margin-bottom:4px}
.game #app{min-height:0;padding:0 0 4px}
.game #app:empty{min-height:200px}
.game-foot{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:6px}
.game-foot .tap-hint{color:#fff6dc;animation:breathe 2.2s ease-in-out infinite}
body.armed .game-foot .tap-hint{display:none}
@media (pointer:fine){.game-foot .tap-hint{display:none}}
body[data-mode=home]{padding-bottom:var(--kbh)}
.result .quote{margin:10px 0 4px;font-size:15px;line-height:1.6;color:#e8dcb8}.result .quote i{font:20px Georgia,serif;color:#fff6dc}.result .quote span{display:block;font-size:12px;color:var(--muted)}
/* 各段 */
.sec{max-width:760px;margin:0 auto;padding:46px 16px 8px;text-align:center}
.sec h2{margin:0 0 14px;font:700 clamp(22px,6vw,32px)/1.35 "Songti SC","Noto Serif SC",serif;color:#fff6dc}
.sec h3{margin:4px 0 2px;font-size:16px;color:#fff6dc}
.sec p{margin:0;color:#d9d3e6;font-size:14px;line-height:1.65}
.lead{font-size:16px!important;color:#e8dcb8!important;margin-bottom:10px!important}
.fine{font-size:12px!important;color:var(--muted)!important;margin:0 0 14px!important}
/* 4. 场景 */
.packs.six{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pack{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 10px;text-align:center;color:var(--ink);transition:transform .15s,border-color .15s}
.pack:hover,.pack:active{transform:translateY(-2px);border-color:#f2c66d99}
.pack i{font-style:normal;font-size:28px;display:block}
.pack p{font-size:12px!important;color:var(--muted)!important}
.more-packs{margin-top:12px;background:none;border:1px dashed var(--line);border-radius:14px;padding:10px 14px;color:var(--muted);font-size:13px;width:100%}
.more-packs.wanted,.btn.wanted{border-color:#9fd3a4aa;color:#cfe9d2}
/* 6. 结尾 */
.sec.end h2{font-size:clamp(26px,7vw,38px)}
.btn.big{font-size:16px;padding:12px 28px}
.foot{text-align:center;color:#8d8aa3;font-size:12px;padding:44px 16px calc(30px + env(safe-area-inset-bottom))}
/* 手机 */
@media (max-width:640px){.packs.six{grid-template-columns:repeat(2,1fr);gap:8px}.pack{padding:14px 8px}}
.pack .pack-stars{display:block;margin-top:6px}.pack .sk-ministars{margin-left:0}
/* 首屏 v2（Fable 1109）：一句话说清做什么＋信任条；演示视频进弹窗；三张小卡 */
.hero .trust{margin:8px 0 0;font-size:13px;color:#9fd3c7;letter-spacing:.06em}
.hero br.m{display:none}
@media (max-width:560px){.hero br.m{display:inline}.hero{padding-top:14px}}
.game-head{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.how-btn{background:none;border:1px solid #9fd3c766;color:#9fd3c7;border-radius:999px;padding:2px 10px;font-size:12px;letter-spacing:0;cursor:pointer;font-family:inherit}
.how-btn:hover{border-color:#9fd3c7;color:#fff}
.how-dlg{border:0;border-radius:16px;padding:14px;background:#141a3a;color:#e9ecf8;width:min(92vw,720px);box-shadow:0 20px 60px #000a}
.how-dlg::backdrop{background:#000a}
.how-dlg video{width:100%;border-radius:10px;display:block}
.how-dlg p{font-size:14px;text-align:center;margin:10px 0}
.how-dlg form{text-align:center}
.why3{max-width:760px;margin:22px auto 0;padding:0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.why3>div{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:14px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.why3 i{font-style:normal;font-size:24px}.why3 b{font-size:14px;font-weight:600;color:#fff6dc}
@media (max-width:560px){.why3{grid-template-columns:1fr;gap:8px}.why3>div{flex-direction:row;padding:10px 14px;text-align:left}}
.game-foot .tap-hint{display:none!important}
@media (max-width:560px){.hero{padding-top:34px}}
/* 跟随小兔子 v3（proto/bunny.js，三期⑦）：底图＋手臂/眼睛补丁叠成母帧，整身姿势是横排帧条；呼吸用 CSS，影子是渐变不是滤镜 */
.bunny-pal{position:fixed;left:0;top:0;z-index:30;width:var(--s,110px);height:var(--s,110px);pointer-events:none;will-change:transform;transform-origin:50% 90%;transition:opacity .25s}
.bunny-pal[hidden]{display:none}
.bunny-pal.anchored{z-index:1}
#game{position:relative;z-index:2}
.bunny-pal .bp-act,.bunny-pal .bp-breath,.bunny-pal .bp-rig{position:absolute;inset:0;transform-origin:50% 97.6%}
.bunny-pal .bp-breath{animation:bp-breathe 3.4s ease-in-out infinite}
@keyframes bp-breathe{0%,100%{transform:scale(1.012,.985)}50%{transform:scale(.99,1.012)}}
.bunny-pal .bp-rig i,.bunny-pal .bp-frame{position:absolute;background-repeat:no-repeat;display:block}
.bunny-pal .bp-base,.bunny-pal .bp-frame{inset:0;background-size:100% 100%}
.bunny-pal .bp-rig[hidden],.bunny-pal .bp-frame[hidden]{display:none}
/* 点击/指针热区只在身体上（帧格四周是空白） */
.bunny-pal .bp-act::after{content:"";position:absolute;left:30%;right:30%;top:14%;bottom:3%;pointer-events:auto;cursor:pointer}
.bunny-pal .bp-shadow{position:absolute;left:31%;right:31%;bottom:.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,#0008,#0000);transform-origin:50% 50%}
.bunny-pal.bp-enter{clip-path:polygon(-60% -60%,160% -60%,160% 98%,-60% 98%)}
.bunny-pal.bp-hide{opacity:0}.bunny-pal.bp-hide .bp-act::after{pointer-events:none}
.bunny-pal .bp-say{position:absolute;left:64%;bottom:84%;white-space:nowrap;background:#fff6dc;color:#1b2140;font-size:13px;font-weight:600;padding:6px 10px;border-radius:12px 12px 12px 3px;box-shadow:0 4px 12px #0005;opacity:0;transform:translateY(6px) scale(.9);transition:opacity .2s,transform .2s;pointer-events:none}
.bunny-pal.bp-right .bp-say{left:auto;right:64%;border-radius:12px 12px 3px 12px}
.bunny-pal.talking .bp-say{opacity:1;transform:none}
@media (max-width:759px){.bunny-pal .bp-say{font-size:12px;white-space:normal;width:max-content;max-width:60vw}}
@media (prefers-reduced-motion:reduce){.bunny-pal .bp-breath{animation:none}}
@media (max-width:759px){.foot{padding-left:72px;text-align:left}}