/* ===== Magic 8 Ball 前端页 ===== */
/* 立体感模型：真球体轮廓永远是正圆——球不变形，变形的是球面上的「面片」：
   8 面片向上滚向球缘时按 cosθ 收缩、被轮廓裁掉；答案面片从底部球缘升起展开。
   光泽层固定不动（光永远左上），球面在光下转。 */

.app--home .m8-wrap{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  width:100%;max-width:420px;margin:0 auto;padding:56px 0 28px;
}

/* 问题输入（球下方，留出更大间距） */
.m8-question{
  margin-top:30px;
  width:100%;padding:13px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:inherit;
  font-size:15px;text-align:center;outline:none;
  transition:border-color .2s,background .2s;
}
.m8-question::placeholder{color:rgba(255,255,255,.42);}
.m8-question:focus{border-color:#4650c9;background:rgba(255,255,255,.09);}
.m8-question:disabled{opacity:.55;}

/* 球体舞台 */
.m8-stage{padding:10px 0 4px;}
.m8-ball{position:relative;width:250px;height:250px;}

/* 球轮廓：overflow hidden 裁掉滚出球缘的面片；底色为球面基础着色 */
.m8-silhouette{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.26) 60%, rgba(0,0,0,.55) 86%, rgba(0,0,0,.6) 100%),
    radial-gradient(circle at 50% 42%, #3c3c44 0%, #26262b 42%, #121215 72%, #050506 100%);
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.5),
    0 20px 44px rgba(0,0,0,.55);
}

/* 固定光泽层：光永远从左上来，不随球面片滚动 */
.m8-ball::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  z-index:3;pointer-events:none;
  background:
    radial-gradient(circle at 33% 25%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.16) 9%, rgba(255,255,255,0) 24%),
    radial-gradient(ellipse at 30% 16%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 68% 82%, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 50%),
    radial-gradient(ellipse at 50% 97%, rgba(150,160,255,.12) 0%, rgba(150,160,255,0) 40%);
}

/* ── 球面贴片：直径 62%（真 8 球白圆比例），中心可上下滚动 ──
   位移基准：贴片高 = 0.62 球高，球半径 = 0.5 球高
   → 滚到纬度 θ 时 translateY = ±80.6%·sinθ，纵向压扁 = cosθ */
.m8-patch{
  position:absolute;left:19%;top:19%;width:62%;height:62%;border-radius:50%;
  will-change:transform,opacity;
}
/* 静息态：8 面居中朝前；答案面藏在下缘球后 */
.m8-patch--8{transform:translateY(0) scale(1,1);}
.m8-patch--answer{transform:translateY(81%) scale(.9,.05);opacity:0;}

/* 翻滚（去答案面）：8 面滚向顶部球缘消失，答案面自下缘升起。
   曲线说明：缓入缓出烘焙进关键帧（平滑步降 s(t)=3t²-2t³ 采样 sinθ/cosθ），
   帧间用 linear 补间 → 全程连续无分段顿挫；起步与收尾速度自然为零。 */
.m8-ball.is-tumbling .m8-patch--8{animation:m8-patch8-out 1.15s linear forwards;}
.m8-ball.is-tumbling .m8-patch--answer{animation:m8-patch-answer-in 1.15s linear forwards;}
@keyframes m8-patch8-out{
  0%{transform:translateY(0) scale(1,1);opacity:1;}
  10%{transform:translateY(-13%) scale(.995,.987);}
  20%{transform:translateY(-42%) scale(.985,.851);}
  30%{transform:translateY(-69%) scale(.96,.525);}
  40%{transform:translateY(-80%) scale(.93,.16);}
  48%{transform:translateY(-80.6%) scale(.91,.05);}
  56%{transform:translateY(-80.6%) scale(.9,.05);opacity:0;}
  100%{transform:translateY(-80.6%) scale(.9,.05);opacity:0;}
}
@keyframes m8-patch-answer-in{
  0%{transform:translateY(80.6%) scale(.9,.05);opacity:0;}
  40%{transform:translateY(80%) scale(.92,.12);opacity:0;}
  46%{opacity:1;}
  50%{transform:translateY(79.6%) scale(.93,.16);}
  60%{transform:translateY(68.6%) scale(.96,.525);}
  70%{transform:translateY(42.3%) scale(.985,.851);}
  80%{transform:translateY(13.2%) scale(.995,.987);}
  100%{transform:translateY(0) scale(1,1);opacity:1;}
}
/* 终态（翻滚动画结束后由 is-flipped 静态保持） */
.m8-ball.is-flipped .m8-patch--8{transform:translateY(-80.6%) scale(.9,.05);opacity:0;}
.m8-ball.is-flipped .m8-patch--answer{transform:translateY(0) scale(1,1);opacity:1;}

/* 翻回（8 字面）：答案面沉入下缘，8 面自顶部滚回中心（同样的平滑步降采样） */
.m8-ball.is-returning .m8-patch--8{animation:m8-patch8-in .65s linear forwards;}
.m8-ball.is-returning .m8-patch--answer{animation:m8-patch-answer-out .65s linear forwards;}
@keyframes m8-patch8-in{
  0%{transform:translateY(-80.6%) scale(.9,.05);opacity:0;}
  40%{transform:translateY(-80%) scale(.92,.12);opacity:0;}
  46%{opacity:1;}
  50%{transform:translateY(-79.6%) scale(.93,.16);}
  60%{transform:translateY(-68.6%) scale(.96,.525);}
  70%{transform:translateY(-42.3%) scale(.985,.851);}
  80%{transform:translateY(-13.2%) scale(.995,.987);}
  100%{transform:translateY(0) scale(1,1);opacity:1;}
}
@keyframes m8-patch-answer-out{
  0%{transform:translateY(0) scale(1,1);opacity:1;}
  20%{transform:translateY(13%) scale(.995,.987);}
  40%{transform:translateY(42%) scale(.985,.851);}
  60%{transform:translateY(69%) scale(.96,.525);}
  80%{transform:translateY(80%) scale(.93,.16);}
  90%{transform:translateY(80.6%) scale(.91,.05);opacity:0;}
  100%{transform:translateY(80.6%) scale(.9,.05);opacity:0;}
}

/* ── 8 面片：白圆 + 黑「8」 ── */
.m8-patch--8{
  background:radial-gradient(circle at 38% 32%, #ffffff 0%, #f2f0ea 55%, #ddd9d0 100%);
  box-shadow:
    inset -6px -8px 16px rgba(0,0,0,.18),
    inset 4px 6px 10px rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
}
.m8-eight{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:700;font-size:72px;line-height:1;color:#0a0a0c;
  padding-top:2px;   /* 视觉居中微调 */
}

/* ── 答案面片：深色圆窗 + 压圈 + 发光蓝三角 ── */
.m8-patch--answer .m8-window{
  position:relative;width:90%;height:90%;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #101024 0%, #06060f 68%, #020204 100%);
  box-shadow:
    inset 0 8px 20px rgba(0,0,0,.95),
    inset 0 -3px 8px rgba(90,100,255,.10),
    0 0 0 7px rgba(8,8,12,.9),
    0 0 0 9px rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
}
/* 发光蓝三角：只当背景板 */
.m8-patch--answer .m8-tri{
  width:66%;height:60%;
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
  background:
    radial-gradient(circle at 50% 68%, #5566ff 0%, #2231d6 42%, #0c14a0 78%, #060a66 100%);
  filter:drop-shadow(0 0 14px rgba(64,84,255,.75)) drop-shadow(0 0 30px rgba(40,60,255,.35));
}
/* 答案文字：绝对定位在三角下半部（宽处），保证完全落在蓝色范围内 */
.m8-answer{
  position:absolute;left:50%;top:54%;transform:translateX(-50%);
  width:52%;max-height:36%;overflow:hidden;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:#fff;text-align:center;line-height:1.28;
  text-transform:uppercase;
  text-shadow:0 0 6px rgba(120,140,255,.9), 0 1px 3px rgba(0,0,0,.6);
  word-break:break-word;
}
/* 长答案自动缩小（JS 按长度挂类） */
.m8-answer.m8-answer--sm{font-size:10px;line-height:1.22;}
.m8-answer.m8-answer--xs{font-size:8.5px;line-height:1.18;letter-spacing:.01em;}

/* 球底阴影 */
.m8-shadow{
  position:absolute;left:50%;bottom:-24px;width:172px;height:26px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%);
}

/* 摇晃：8 字面朝观众，两组乱序关键帧每轮随机选一组（随机摇动） */
.m8-ball.is-shaking{animation:m8-shake-a .38s linear infinite;}
.m8-ball.is-shaking-alt{animation:m8-shake-b .44s linear infinite;}
@keyframes m8-shake-a{
  0%{transform:translate(0,0) rotate(0deg);}
  9%{transform:translate(-14px,5px) rotate(-8deg);}
  18%{transform:translate(12px,-8px) rotate(7deg);}
  27%{transform:translate(-10px,-4px) rotate(-5deg);}
  36%{transform:translate(14px,6px) rotate(9deg);}
  45%{transform:translate(-13px,2px) rotate(-9deg);}
  55%{transform:translate(9px,-7px) rotate(4deg);}
  64%{transform:translate(-12px,7px) rotate(-6deg);}
  73%{transform:translate(13px,-3px) rotate(8deg);}
  82%{transform:translate(-14px,-6px) rotate(-10deg);}
  91%{transform:translate(10px,6px) rotate(5deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
@keyframes m8-shake-b{
  0%{transform:translate(0,0) rotate(0deg);}
  11%{transform:translate(12px,-6px) rotate(7deg);}
  22%{transform:translate(-13px,4px) rotate(-8deg);}
  33%{transform:translate(9px,7px) rotate(5deg);}
  44%{transform:translate(-14px,-3px) rotate(-9deg);}
  56%{transform:translate(13px,5px) rotate(8deg);}
  67%{transform:translate(-10px,-7px) rotate(-4deg);}
  78%{transform:translate(12px,3px) rotate(9deg);}
  89%{transform:translate(-12px,-5px) rotate(-7deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
/* 摇完落定的小回弹 */
.m8-ball.is-settling{animation:m8-settle .5s ease-out;}
@keyframes m8-settle{
  0%{transform:scale(1.06) rotate(2.5deg);}
  60%{transform:scale(.98) rotate(-1deg);}
  100%{transform:scale(1) rotate(0);}
}

/* 状态提示 */
.m8-hint{margin:2px 0 0;font-size:13.5px;color:rgba(255,255,255,.55);text-align:center;}

/* 答案解说（打字机） */
.m8-note{
  margin:0;min-height:3.2em;width:100%;
  font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86);
  text-align:center;white-space:pre-wrap;word-break:break-word;
}
.m8-note .m8-caret{
  display:inline-block;width:2px;height:1em;
  background:rgba(255,255,255,.8);vertical-align:-0.15em;
  animation:m8-caret-blink .8s step-end infinite;
}
@keyframes m8-caret-blink{50%{opacity:0;}}

/* 按钮 */
.m8-actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.m8-shake-btn{
  padding:13px 34px;border-radius:999px;border:none;cursor:pointer;
  font-size:15.5px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#545ee0,#3a43bb);
  box-shadow:0 8px 20px rgba(70,80,201,.35);
  transition:transform .15s,box-shadow .15s,opacity .2s;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.m8-shake-btn:active{transform:scale(.96);}
.m8-shake-btn:disabled{opacity:.5;cursor:default;}

@media (max-width:360px){
  .m8-ball{width:220px;height:220px;}
  .m8-eight{font-size:64px;}
  .m8-answer{font-size:10.5px;}
  .m8-answer.m8-answer--sm{font-size:9px;}
  .m8-answer.m8-answer--xs{font-size:7.5px;}
}

/* 「返回首页」沉到页面底部：整页纵向铺满，链接用 margin-top:auto 推到底 */
.app--home{min-height:100vh;display:flex;flex-direction:column;box-sizing:border-box;}
.app--home .home{flex:1;display:flex;flex-direction:column;width:100%;}
.app--home .fixed-bottom-nav{margin-top:0;padding-top:0;}

/* 底部导航固定后，内容仍可完整滚动到按钮上方。 */
.app--home{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));}

/* 底部导航与安全区之间保留 20px 间距。 */
.fixed-bottom-nav{padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));}