/* ============ 基础 ============ */
* {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;   /* 去掉手機點按時閃一下的灰/藍方塊 */
  -webkit-touch-callout: none;                 /* 長按不彈出系統選單 */
  touch-action: manipulation;                  /* 禁用「雙擊縮放」手勢(快速點按鈕兩下整頁放大)；保留雙指捏合縮放與滾動 */
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05070f;            /* 缩放留边的底色 */
  font-family: "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: 700;              /* 全局粗体 */
  user-select: none;
  -webkit-user-select: none;
}

button:focus { outline: none; }   /* 去掉按钮点击时的虚线框 */

img { -webkit-user-drag: none; }

/* ============ 缩放容器 ============ */
/* #viewport 铺满窗口，#stage 是固定设计稿，由 app.js 用 transform: scale() 居中缩放 */
#viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

#stage {
  position: relative;
  width: 1920px;
  height: 960px;
  transform-origin: center center;
  flex: 0 0 auto;
  visibility: hidden;        /* 等 fitStage 算好缩放后再显示，避免刷新时放大闪烁 */
}
#stage.hidden { display: none; }

/* 游戏舞台：与 #stage 同盒子，由 fitStage 同步缩放 */
#gameStage {
  position: relative;
  width: 1920px;
  height: 960px;
  transform-origin: center center;
  flex: 0 0 auto;
}
#gameStage.hidden { display: none; }

#gameStage #gameMusicBtn { right: 130px; top: 90px; }   /* 右上角 */

/* ===== 进场过渡：闪白 → 烟雾散开 ===== */
#transition {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,0.95), rgba(255,255,255,0) 48%),
    radial-gradient(circle at 72% 60%, rgba(255,255,255,0.95), rgba(255,255,255,0) 48%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.9), rgba(255,255,255,0) 50%),
    #ffffff;
}
#transition.run {
  animation: scene-transition 0.9s ease-in-out forwards;
}
@keyframes scene-transition {
  0%   { opacity: 0; transform: scale(1);   filter: blur(0); }
  18%  { opacity: 1; transform: scale(1);   filter: blur(0); }     /* 瞬间变白 */
  100% { opacity: 0; transform: scale(1.45); filter: blur(24px); } /* 烟雾散开 */
}

/* ===== 领奖后 Loading：黑底 + 篮球弹跳 + 进度条 + 百分比 ===== */
#loading {
  position: fixed;
  inset: 0;
  z-index: 90;                       /* 高于过渡(70)/弹窗(50)，盖住一切 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding-bottom: 80px;          /* 居中内容整体上移一点 */
  background:
    radial-gradient(circle at 50% 42%, rgba(42, 100, 220, 0.2), rgba(5, 7, 13, 0) 36%),
    linear-gradient(180deg, #05070d 0%, #071631 52%, #020611 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#loading.show   { opacity: 1; pointer-events: auto; }
#loading.out    { opacity: 0; }
#loading.hidden { display: none; }

.loading-ball-area {
  position: relative;
  width: 200px;
  height: 230px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.loading-ball {
  width: 92px;
  height: auto;
  transform-origin: center bottom;
  animation: loadingBounce 0.9s ease-in-out infinite;
}
/* 落点光晕：球落地大而亮、升空小而淡 */
.loading-ball-glow {
  position: absolute;
  bottom: -12px;                 /* 下移到球底正下方 */
  left: 50%;
  width: 150px;                  /* 比球更宽，落地时从球两侧透出 */
  height: 24px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(90,150,255,0.5), rgba(90,150,255,0) 72%);
  animation: loadingGlow 0.9s ease-in-out infinite;
}
@keyframes loadingBounce {
  0%   { transform: translateY(0)      scale(1.18, 0.82); }  /* 落地：压扁 */
  16%  { transform: translateY(-30px)  scale(1, 1); }
  50%  { transform: translateY(-130px) scale(0.94, 1.07); }  /* 顶点：略拉长 */
  84%  { transform: translateY(-30px)  scale(1, 1); }
  100% { transform: translateY(0)      scale(1.18, 0.82); }
}
@keyframes loadingGlow {
  0%, 100% { transform: translateX(-50%) scale(1.15); opacity: 0.8; }
  50%      { transform: translateX(-50%) scale(0.55); opacity: 0.3; }
}
.loading-bar {
  width: 190px;
  max-width: 58vw;
  height: 18px;
  margin-top: -20px;           /* 连同下方文字一起上移，贴近篮球影子 */
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(18,25,45,0.9));
  border: 1px solid rgba(137, 194, 255, 0.45);
  overflow: hidden;
  box-shadow:
    0 0 18px rgba(60, 126, 255, 0.28),
    inset 0 1px 4px rgba(0,0,0,0.75);
}
.loading-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2d7dff 0%, #60c7ff 38%, #ffe68a 78%, #f7b532 100%);
  box-shadow:
    0 0 14px rgba(255, 212, 75, 0.55),
    0 0 18px rgba(72, 168, 255, 0.62);
  position: relative;
  overflow: hidden;
}
.loading-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.58) 44%, transparent 68%);
  transform: translateX(-110%);
  animation: loadingShine 1.15s ease-in-out infinite;
}
@keyframes loadingShine {
  100% { transform: translateX(110%); }
}
.loading-pct {
  margin-top: -14px;
  color: #fff3bf;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  font-family: "Microsoft JhengHei UI", "Microsoft JhengHei", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.75),
    0 0 12px rgba(67, 155, 255, 0.55);
}

#ball {
  position: absolute;
  left: 50%;
  bottom: 194px;
  width: 230px;
  transform: translateX(-50%);
  transform-origin: center center;
  z-index: 3;
  animation: ball-float 2.6s ease-in-out infinite;   /* 待机微飘 */
}
/* 地面影子：留在地面，随篮球升高变小变淡、落下变大变深（物理影子）*/
#ballShadow {
  position: absolute;
  left: 50%;
  bottom: 188px;                 /* 落在篮球底部稍前方（朝观众一侧），不再脱节在球后/上方 */
  width: 170px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 70%);
  transform: translateX(-50%);
  transform-origin: center center;
  filter: blur(2px);
  z-index: 2;            /* 在篮球(z3)之下 */
  pointer-events: none;
}
@keyframes ball-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-14px); }
}
/* 篮筐网：全屏 cover（与 #bg 同几何）→ 篮筐网与背景篮筐对齐；层级在舞台之上 → 篮球从网后穿过 */
#hoop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;            /* 默认在篮球之后（球在前飞过）；命中跌入时由 JS 抬到球前 */
  pointer-events: none;
}
#hoop.hidden { display: none; }

#gamePedestal {
  position: absolute;
  left: 50%;
  bottom: -130px;
  width: 760px;
  transform: translateX(-50%);
  z-index: 1;
}
/* 方向指示：篮球正上方居中的 3 个向上三角，顺序发光（下→上）指示「直射上方」。不再摆动、不影响发射方向 */
#aimArrow {
  position: absolute;
  left: 50%;
  bottom: 470px;                 /* 球正上方 */
  transform: translateX(-50%);   /* 居中，无旋转 → 发射方向恒为竖直 */
  display: flex;
  flex-direction: column;        /* 子元素 1=最上、3=最下 */
  align-items: center;
  gap: 14px;
  z-index: 2;
  pointer-events: none;
}
#aimArrow .chev {                /* 向上三角（CSS 边框法）*/
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 20px solid #ff8a1e;     /* 橙色，在蓝底上更醒目 */
  filter: drop-shadow(0 0 10px rgba(255, 160, 50, 0.9));   /* 静态光晕：只画一次，不每帧重绘 */
  opacity: 0.35;
  animation: chev-glow 1.2s ease-in-out infinite;
}
/* 发光从下往上流动（下面那个先亮）→ 指引向上直射；尺寸由下到上从大到小 */
#aimArrow .chev:nth-child(3) { animation-delay: 0s;    border-left-width: 30px; border-right-width: 30px; border-bottom-width: 38px; }  /* 下：最大 */
#aimArrow .chev:nth-child(2) { animation-delay: 0.16s; border-left-width: 23px; border-right-width: 23px; border-bottom-width: 29px; }  /* 中 */
#aimArrow .chev:nth-child(1) { animation-delay: 0.32s; border-left-width: 14px; border-right-width: 14px; border-bottom-width: 18px; }  /* 上：最小 */
/* 只动 opacity（GPU 合成）→ 顺序明暗发光，光晕固定不重绘 */
@keyframes chev-glow {
  0%, 55%, 100% { opacity: 0.32; }
  28%           { opacity: 1; }
}
#aimArrow.hidden { display: none; }

/* Fine tune: keep only the three triangles, slightly smaller and closer to the ball. */
#aimArrow {
  bottom: 452px;
  gap: 10px;
}
#aimArrow .chev:nth-child(3) {
  border-left-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 32px;
}
#aimArrow .chev:nth-child(2) {
  border-left-width: 19px;
  border-right-width: 19px;
  border-bottom-width: 24px;
}
#aimArrow .chev:nth-child(1) {
  border-left-width: 12px;
  border-right-width: 12px;
  border-bottom-width: 15px;
}

#shootBtn {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  z-index: 6;
}
#shootBtn img { width: 360px; display: block; }

#gameCountText {
  position: absolute;
  left: 50%;
  bottom: 136px;
  transform: translateX(-50%);
  z-index: 6;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  text-shadow:
    -1px 0 1px rgba(0, 0, 0, 0.95), 1px 0 1px rgba(0, 0, 0, 0.95),
    0 0 1px rgba(0, 0, 0, 0.95), 0 2px 1px rgba(0, 0, 0, 0.95),
    0 1px 4px rgba(0, 0, 0, 0.95), 0 4px 10px rgba(0, 0, 0, 0.9);
}
#gameCountText b {
  color: #ffe546;
  font-size: 30px;
  margin: 0 2px;
  text-shadow:
    -1px 0 1px rgba(0, 0, 0, 0.95), 1px 0 1px rgba(0, 0, 0, 0.95),
    0 0 1px rgba(0, 0, 0, 0.95), 0 2px 1px rgba(0, 0, 0, 0.95),
    0 1px 4px rgba(0, 0, 0, 0.95), 0 4px 10px rgba(0, 0, 0, 0.9);
}

/* 投篮：篮球沿抛物线飞向篮筐 + 旋转 + 缩小（终点 Y 按实际篮筐位置微调）*/
#ball.shooting {
  animation: ball-shoot 0.75s cubic-bezier(0.3, 0, 0.5, 1) forwards;
}
@keyframes ball-shoot {
  0%   { transform: translateX(-50%) translate(0, 0)      scale(1)    rotate(0deg); }
  50%  { transform: translateX(-50%) translate(0, -240px) scale(0.7)  rotate(200deg); }
  100% { transform: translateX(-50%) translate(0, -430px) scale(0.32) rotate(380deg); }
}

/* 投篮结果弹窗内容 */
.shot-result { display: flex; flex-direction: column; align-items: center; }
/* 礼物开箱雪碧图（替代结果图标）：600:523 比例，背景位置由 JS 逐帧切换 */
.shot-gift { width: 580px; height: 506px; background: url("../assets/images/gift.webp") no-repeat 0 0; background-size: auto; }
/* 没进框（三不沾/打鐵）：pop character 角色图。占位与礼物盒一致 */
.shot-pop { width: 580px; height: 506px; display: flex; align-items: center; justify-content: center; }
.shot-pop img { width: 108%; height: auto; display: block; transform: translateY(-14px);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35)); }
/* 文字压在角色图上方：名称与金额上移，叠在图片上 */
.shot-result.miss .shot-name { margin-top: -188px; position: relative; z-index: 2; }
.shot-result.miss .amount-svg { position: relative; z-index: 2; }
/* 结果名称图（pop-name/，683:225 比例）替代名称文字 */
.shot-result .shot-name { width: 500px; height: auto; display: block; margin-top: -148px; }
/* 金额：白→金渐变字身 + 红色外描边。
   渐变填充与描边无法在同一文字上叠加（描边会盖掉渐变），故用 ::before 画一份「红描边的同样数字」垫在后面，
   前面这层只显示渐变字身 → 渐变在内、红边在外。 */
.shot-result .amount-svg {
  width: 500px;
  height: 144px;
  margin-top: -42px;
  overflow: visible;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.62));
}
.shot-result .amount-svg text {
  font-family: "Arial Black", "Impact", "Microsoft JhengHei", sans-serif;
  font-size: 112px;
  font-weight: 900;
  letter-spacing: 2px;
}
.shot-result .amount-stroke {
  fill: none;
  stroke: #ec0000;
  stroke-width: 18px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.shot-result .amount-fill {
  fill: url(#amountGrad);
  stroke: #ffffff;
  stroke-width: 2px;
  paint-order: stroke fill;
}
/* 豎屏(手機)：獎金數字用實心金，避免 SVG 漸變 url(#amountGrad) 在彈窗縮放動畫期間延遲渲染(先顯示紅描邊後才變金) */
@media (orientation: portrait) {
  /* 漸變(白→金)用回桌面那套(.amount-fill 的 fill:url(#amountGrad) 內聯). 為避免漸變渲染慢半拍時露出紅底(先紅後金),
     給底層 .amount-stroke 填金色 → 漸變還沒上時顯金色而非紅色; 漸變渲好照樣蓋在上面, 最終即漸變。 */
  .shot-result .amount-stroke { fill: #f8c83c; }
  /* 與電腦版一致: 開窗即可見, 不淡入。手機防殘影靠 translateZ 把數字提升為獨立合成層→開窗劇烈縮放時
     GPU 只整張位圖縮放, 不逐幀重柵格化 SVG 文字→不再跑位/留殘影。投影比電腦版淡一點(0.42)。 */
  .shot-result .amount-svg {
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.42));
    will-change: transform;            /* 顯式提升為獨立合成層(比 translateZ 可靠)→開窗縮放時不重柵格化 */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* 背景铺满整个窗口，独立于缩放舞台 */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ============ 天空：星星 + 流星 ============ */
/* 星空层：与背景图（object-fit:cover）对齐的全屏层。
   left/top/width/height 由 app.js 的 fitSky() 设成背景图实际渲染矩形，
   星星用百分比定位 → 永远落在图像固定的「银河天空」分数区间，换屏不跑偏。 */
#sky {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;           /* 占位，JS 会改成背景图渲染矩形 */
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;             /* 背景之上、舞台内容之下 */
  /* 星星的下边界改为「按列」控制（中间低、两侧高）+ 逐星渐隐，见 app.js */
}

.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.85);   /* 静态光晕：随 transform 缩放，不再每帧重绘 */
  animation: twinkle var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}

/* 只动 opacity + transform（GPU 合成），不动 box-shadow → 闪烁不再触发逐帧重绘 */
@keyframes twinkle {
  0%, 100% { opacity: calc(var(--peak, 1) * 0.08); transform: scale(0.4); }
  50%      { opacity: var(--peak, 1);              transform: scale(1.8); }
}

/* 流星：一个亮头 + 一条拖尾，整体沿对角线飞过 */
.meteor {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(180, 210, 255, 0.9);
  transform: rotate(145deg);
  animation: meteor-fly var(--dur) linear forwards;
}

.meteor::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 220px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(180, 210, 255, 0.95), rgba(180, 210, 255, 0));
}

@keyframes meteor-fly {
  from { opacity: 0; transform: translate(0, 0) rotate(145deg); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(145deg); }
}

/* ============ 角色 + 台座 ============ */
#characters {
  position: absolute;
  left: 50%;
  bottom: 150px;
  transform: translateX(-50%);
  z-index: 2;
}

.char {
  position: absolute;
  bottom: 0;
  height: 620px;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45));
}

.char-female { left: -510px; bottom: 150px; height: 650px; opacity: 0; --float-y: -13px; }
.char-male   { left: -390px; bottom: 50px; height: 610px; z-index: 1; opacity: 0; --float-y: -7px; }

/* 男生入场：从左滑入 + 淡入 */
.char-male.char-enter {
  animation: char-male-in 1.2s ease-out both;
}
@keyframes char-male-in {
  from { opacity: 0; transform: translateX(-240px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 女生入场：从右滑入 + 淡入，比男生延迟半拍 */
.char-female.char-enter {
  animation: char-female-in 1.2s ease-out 0.4s both;
}
@keyframes char-female-in {
  from { opacity: 0; transform: translateX(240px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 入场后保持可见 */
.char-male.shown,
.char-female.shown { opacity: 1; }

/* 定格后微飘（transform，GPU 合成更顺） */
.char.floating-char {
  animation: char-float 5.6s ease-in-out infinite;
}
@keyframes char-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--float-y, -8px)); }
}

/* ============ 左上角图标按钮 ============ */
.icon-btn {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: transform 0.12s ease;
}
.icon-btn:hover  { transform: scale(1.06); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn img { width: 86px; height: 86px; }
.icon-label {
  font-size: 34px;
  font-weight: 700;
  text-shadow:
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0 0 6px #000, 0 3px 8px #000;
}

#backBtn  { left: 360px; top: 150px; }
#musicBtn { left: 360px; top: 250px; }

/* 静音：图标保持原色，叠加一条斜杠 /（主页 + 游戏内音乐按钮）*/
#musicBtn.muted::after,
#gameMusicBtn.muted::after {
  content: "";
  position: absolute;
  left: 43px;            /* 图标中心：img 宽 86 → 43 */
  top: 8px;
  width: 6px;
  height: 70px;
  background: #ffe24a;   /* 与图标音符同色 */
  border-radius: 3px;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center center;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* ============ 次数徽章 ============ */
#countBadge {
  position: absolute;
  right: 450px;
  top: 100px;
  z-index: 6;
  width: 170px;
  text-align: center;
  transform: scale(1.3);          /* 整体放大（底图+文字一起） */
  transform-origin: right top;    /* 以右上角为基准，不偏移 */
}
#countBadge img { width: 100%; display: block; }
.count-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-7px);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.count-title { font-size: 23px; letter-spacing: 2px; }
.count-num   { font-size: 25px; font-weight: 700; transform: translateY(-8px); }
.count-num b { color: #ffe24a; font-size: 34px; margin-right: 2px; }

/* ============ 标题 Logo（雪碧图） ============ */
#logo {
  --logo-scale: 1.0;           /* 1.0 = 按原生 700px 显示，不放大（最清晰） */
  position: absolute;
  left: 50%;
  top: 470px;
  width: 700px;
  height: 281px;
  margin-left: -350px;          /* 居中：宽 700 的一半，腾出 transform 给微飘 */
  transform: scale(var(--logo-scale));
  transform-origin: top center;
  z-index: 5;
  background-image: url("../assets/images/gamelogo.webp?v=2");
  background-repeat: no-repeat;
  background-size: 3600px 3612px;     /* 雪碧图原始尺寸 */
  background-position: -10px -10px;   /* 第一帧 */
  filter:
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6))
    drop-shadow(0 9px 18px rgba(0, 0, 0, 0.5))
    drop-shadow(0 16px 32px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

/* 入场动画结束后开启微飘（用 transform，GPU 合成更顺滑） */
#logo.floating {
  animation: logo-float 4.5s ease-in-out infinite;
}
@keyframes logo-float {
  0%, 100% { transform: scale(var(--logo-scale)) translateY(0); }
  50%      { transform: scale(var(--logo-scale)) translateY(-5px); }   /* 轻轻上浮约 5px */
}

/* ============ 时间条 ============ */
#timeBar {
  position: absolute;
  left: 50%;
  top: 700px;
  transform: translateX(-50%);
  z-index: 5;
  width: 820px;
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/images/time.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #fff;
  font-size: 34px;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
#timeBar b { color: #ffe24a; font-weight: 700; }

/* ============ 三个主按钮 ============ */
#menu {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  gap: 36px;
  z-index: 6;
}
.menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.menu-btn img { width: 340px; display: block; }
.menu-btn:hover  { transform: translateY(-4px) scale(1.04); filter: brightness(1.1); }
.menu-btn:active { transform: scale(0.96); }
.menu-btn.disabled { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }

/* ============ 弹窗 ============ */
#modalLayer {
  position: fixed;            /* 全屏遮罩，覆盖整个窗口 */
  inset: 0;
  z-index: 50;               /* 高于背景/星空/舞台所有内容 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
#modalLayer.hidden { display: none; }
/* 遮罩淡入 */
#modalLayer:not(.hidden) { animation: layer-in 0.3s ease; }
@keyframes layer-in { from { opacity: 0; } to { opacity: 1; } }

.coin-burst {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.coin-particle {
  position: absolute;
  width: var(--coin-size);
  height: var(--coin-size);
  background: url("../assets/images/coin.webp") no-repeat center / contain;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.45));
  animation: coin-spray var(--coin-dur) linear var(--coin-delay) forwards;
}
@keyframes coin-spray {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
    animation-timing-function: cubic-bezier(0.12, 0.62, 0.38, 1);   /* 上升段减速（接近弧顶变慢）*/
  }
  10% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.12, 0.62, 0.38, 1);
  }
  42% {
    opacity: 1;
    transform: translate(calc(-50% + var(--coin-midx)), calc(-50% + var(--coin-midy))) scale(1.06) rotate(var(--coin-midrot));
    animation-timing-function: cubic-bezier(0.5, 0, 0.78, 0.42);    /* 下落段加速（重力）*/
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--coin-dx)), calc(-50% + var(--coin-dy))) scale(0.84) rotate(var(--coin-rot));
  }
}

/* 宽框（popframe_2）：規則玩法用 */
#modal.wide { width: 1320px; }
#modal.wide #modalBody {
  left: 77px; right: 77px; top: 100px; bottom: 78px;
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* 让文案区自己滚，body 不滚 */
}

/* 規則玩法：6 个篮筐图标 + 数字 */
.rules-icons {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 8px;
  flex: 0 0 auto;             /* 图标行固定，不参与滚动 */
}
.rule-item { display: flex; flex-direction: column; align-items: center; }
.rule-item img { width: 130px; display: block; }
.rule-item b {
  margin-top: 2px;
  font-size: 30px;
  color: #ffe24a;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}
/* 竖框（popframe_3）：獎金記錄用 */
#modal.tall { width: 540px; }
#modal.tall #modalBody {
  left: 52px; right: 52px; top: 105px; bottom: 70px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 獎金記錄表格 */
.record { display: flex; flex-direction: column; height: 100%; }
.record-head {
  display: grid;
  grid-template-columns:1.55fr 0.95fr 0.75fr;
  align-items: center;
  background: #1327a4;
  color: #ffe24a;
  font-size: 20px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 8px;
  flex: 0 0 auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.record-head span { text-align: center; white-space: nowrap; }
.record-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.1);
}
.record-rows::-webkit-scrollbar { width: 8px; }
.record-rows::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 99px; margin: 4px 0; }
.record-rows::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.55); border-radius: 99px; }
.record-rows::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.8); }
.record-row {
  display: grid;
  grid-template-columns: 1.55fr 0.95fr 0.75fr;
  align-items: center;
  padding: 8px;
  color: #fff;
  font-size: 17px;
  border-radius: 6px;
}
.record-row span { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-row:nth-child(even) { background: rgba(96, 108, 196, 0.32); }
.record-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
/* 手機(豎屏)：獎金記錄內容文字放大，電腦版橫屏不受影響 */
@media (orientation: portrait) {
  .record-head  { font-size: 23px; }
  .record-row   { font-size: 20px; }
  .record-empty { font-size: 20px; }
}

/* 規則文案 */
.rules-text {
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);   /* 黑色底色块，不透明度 80% */
  border-radius: 10px;
  padding: 12px 14px;
  flex: 1 1 auto;                   /* 填满剩余空间 */
  min-height: 0;                    /* 允许在 flex 中收缩以触发滚动 */
  overflow-y: auto;
  scrollbar-width: thin;            /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.1);
}
.rules-text p { margin: 0 0 6px; }
.rules-text p:last-child { margin-bottom: 0; }
.rules-text b { color: #ffe24a; font-weight: 700; }   /* 重點高亮：黃色 */
/* 胶囊形滚动条（Chrome / WebKit） */
.rules-text::-webkit-scrollbar { width: 8px; }
.rules-text::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  margin: 6px 0;
}
.rules-text::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 99px;
}
.rules-text::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.8); }

#modal {
  position: relative;
  z-index: 1;
  width: 760px;
  flex: 0 0 auto;                            /* 不被 flex 容器压缩，保持设定宽度 */
  transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1)));   /* 跟随舞台缩放，保持与 UI 同比例 */
  transform-origin: center center;
  animation: modal-open 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 科技感开屏：横向拉出亮线 → 闪烁 → 纵向展开过冲 → 再闪一下落定，全程青色辉光 */
@keyframes modal-open {
  0% {
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(0.55) scaleY(0.012);
    opacity: 0;
  }
  14% {            /* 横向拉成一条亮线（此后保持不透明，不穿透） */
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(1) scaleY(0.016);
    opacity: 1;
  }
  28% {            /* 亮线保持 */
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(1) scaleY(0.03);
    opacity: 1;
  }
  36% {            /* 高度抖一下（科技感的“跳动”，非透明度） */
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(1) scaleY(0.07);
    opacity: 1;
  }
  43% {
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(1) scaleY(0.04);
    opacity: 1;
  }
  78% {            /* 纵向展开 + 过冲 */
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(1) scaleY(1.06);
    opacity: 1;
  }
  88% {            /* 收一下落定 */
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(1) scaleY(0.985);
    opacity: 1;
  }
  100% {
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(1) scaleY(1);
    opacity: 1;
  }
}

/* 科技感收屏：纵向收回成扫描线 → 横向收掉消失（开屏的反过程） */
#modal.closing {
  animation: modal-close 0.42s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}
@keyframes modal-close {
  0% {
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(1) scaleY(1);
    opacity: 1;
  }
  55% {            /* 收回成一条扫描线（仍不透明，不穿透） */
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(1) scaleY(0.03);
    opacity: 1;
  }
  100% {           /* 横向收掉 + 消失 */
    transform: scale(calc(var(--stage-scale, 1) * var(--modal-extra, 1))) scaleX(0.5) scaleY(0.01);
    opacity: 0;
  }
}
.modal-frame { width: 100%; display: block; }
/* 奖励竖框（prizepopframe，竖版较大）：整体等比缩小，避免太大 */
#modal.prize { --modal-extra: 0.62; }
/* 奖励框标题：用 gongxi.webp（恭喜獲得）横幅替换 label 底图 + 文字 */
#modal.prize #modalTitle {
  background-image: url("../assets/images/gongxi.webp");
  width: 540px;
  height: 95px;                  /* 540 / 5.7 ≈ 95，保持比例 */
  top: -54px;
}
#modal.prize .modal-title-text { display: none; }   /* 不显示文字，标题即图片 */
/* 奖励框：关闭按钮、確認按钮放大 */
#modal.prize #modalClose { right: 4px; top: 2px; }
#modal.prize #modalClose img { width: 96px; }
#modal.prize .modal-confirm {
  width: 410px;
  height: 127px;   /* 410 / 3.22 ≈ 127 */
  font-size: 42px;
  font-weight: 800;
  -webkit-text-stroke-width: 0.45px;
}
#modal.prize #modalBody { top: 132px; }

#modalClose {
  position: absolute;
  right: 10px;
  top: 6px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}
#modalClose:hover { transform: scale(1.1) rotate(8deg); }
#modalClose img { width: 64px; }

/* 確認按钮（btn.webp 底图 + 文字） */
.modal-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 22px auto 0;
  width: 260px;
  height: 81px;                 /* 260 / 3.22，保持 btn 比例 */
  background: url("../assets/images/btn.webp") no-repeat center / contain;
  border: none;
  cursor: pointer;
  color: #091a3a;
  font-family: "Microsoft JhengHei UI", "Microsoft JhengHei", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: 30px;
  font-weight: 800;
  -webkit-text-stroke: 0.35px #091a3a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.modal-confirm:hover  { transform: scale(1.05); filter: brightness(1.08); }
.modal-confirm:active { transform: scale(0.96); }

/* 通知框：確認按钮固定到底部宝石位置（脱离居中流，文字单独居中） */
#modal:not(.wide):not(.tall) .modal-confirm {
  position: absolute;
  left: 50%;
  bottom: -54px;
  transform: translateX(-50%);
  margin: 0;
}
#modal:not(.wide):not(.tall) .modal-confirm:hover  { transform: translateX(-50%) scale(1.05); }
#modal:not(.wide):not(.tall) .modal-confirm:active { transform: translateX(-50%) scale(0.96); }

/* 系統通知框 systemframe_m：框較小(改寬度→框縮但內容/label/按鈕絕對尺寸不變)，訊息+確認鈕在框內垂直置中 */
#modal.system { width: 480px; }
/* 標題(label+文字)大小對齊「規則玩法」標題 */
#modal.system #modalTitle { width: 247px; height: 86px; }
#modal.system .modal-title-text { font-size: 29px; }
#modal.system:not(.wide):not(.tall) #modalBody {
  left: 55px; right: 55px; top: 95px; bottom: 110px;   /* 訊息在框中央置中(上避標題、下留按鈕區) */
  font-size: 27px;          /* 比預設小約 2px(渲染) */
}
#modal.system:not(.wide):not(.tall) #modalBody p { position: relative; top: 30px; }   /* 訊息整體下移約 20px(渲染) */
#modal.system:not(.wide):not(.tall) .modal-confirm {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -130px; margin: 0;           /* 確認鈕固定在框底部寶石上 */
}
#modal.system:not(.wide):not(.tall) .modal-confirm:hover  { transform: translateX(-50%) scale(1.05); }
#modal.system:not(.wide):not(.tall) .modal-confirm:active { transform: translateX(-50%) scale(0.96); }

#modalTitle {
  position: absolute;
  top: -16px;                    /* label + 文字整块上移 50px（原 40） */
  left: 50%;
  transform: translateX(-50%);
  width: 275px;
  height: 96px;                  /* 275 / 2.87，保持 label 比例 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/images/label.webp") no-repeat center / contain;
}
/* 标题文字金→白渐变（独立 span，位于横幅底图之上，不被覆盖） */
#modalTitle .modal-title-text {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff, #e1bd52);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* 用 filter 而非 text-shadow：阴影落在渐变文字「后面」，不会盖在字上 */
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.95));
}
#modalBody {
  position: absolute;
  left: 90px;
  right: 90px;
  top: 175px;
  bottom: 90px;
  overflow-y: auto;
  color: #fff;
  font-size: 26px;
  line-height: 1.7;
}
/* 普通通知弹窗（popframe_1）：内容居中、不滚动、文字加大 */
#modal:not(.wide):not(.tall) #modalBody {
  left: 55px; right: 55px; top: 95px; bottom: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  font-size: 30px;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.75);   /* 文字底部阴影 */
  padding-bottom: 50px;        /* 居中内容整体上移约 25px（按钮绝对定位不受影响） */
}
#modal:not(.wide):not(.tall) #modalBody p { margin: 0 0 6px; }

/* ============ 成绩揭晓动画（弹窗前播放）============ */
#resultAnim {
  position: fixed;
  inset: 0;
  z-index: 48;                 /* 在舞台之上、结果弹窗(50)之下 → 揭晓后弹窗叠在其上 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 12, 0.72);
  pointer-events: auto;        /* 揭晓动画期间拦截点击，避免误触投篮按钮 */
}
#resultAnim.hidden { display: none; }
#resultAnim .ra-stage {
  position: relative;
  z-index: 2;                        /* 角色/标题在流星雨(z1)之前 */
  flex: 0 0 auto;                    /* 不被 flex 压缩，保持基准尺寸（同首页 #stage）*/
  /* 高度必须 ≤ 900（< 首页参考 960），否则用同一 --stage-scale 会竖向溢出、标题掉出屏幕外 */
  width: 1300px;                     /* 放大基准（保持 1.44 比例，子元素%位置不变）*/
  height: 900px;
  /* 采用首页同款缩放：随视口等比缩放、上限 1.0 → 大屏更大、小屏自动缩小、始终留边。
     translateY(-5vh)：整体略上提（随视口高度等比）。 */
  transform: translateY(-5vh) scale(var(--stage-scale, 0.78));
  transform-origin: center center;
}
#resultAnim .ra-stage img { position: absolute; left: 50%; opacity: 0; will-change: transform, opacity; }
/* 水墨背景：放大淡入 */
#resultAnim .ra-ink  { top: 50%; width: 118%; transform: translate(-50%, -50%) scale(0.6); z-index: 1; }
/* 角色：从底部上浮淡入 */
#resultAnim .ra-char { bottom: 13%; width: auto; height: auto; transform: translateX(-50%) translateY(40px) scale(1); z-index: 3; }
/* 篮球结果标题 / 姻缘标题：依次弹入 */
/* 两个标题整体下移（不遮角色脸）；第一排左移 150px、第二排右移 150px（错位排布）*/
#resultAnim .ra-stage img.ra-ball { left: calc(50% - 100px); top: 67%; width: 40%; transform: translate(-50%, -50%) scale(0.3); z-index: 4; }
#resultAnim .ra-stage img.ra-luck { left: calc(50% + 100px); top: 81%; width: 36%; transform: translate(-50%, -50%) scale(0.3); z-index: 4; }
/* 豎屏(手機)：揭曉動畫放到最大——固定放大係數取代桌面 --stage-scale(豎屏≈0.22 太小) */
@media (orientation: portrait) {
  #resultAnim .ra-stage { transform: translateY(-6vh) scale(0.54); }
  /* 三分球角色圖構圖偏左→往右移(stage 座標, 會被 scale 0.54 縮放)讓看起來居中。動畫只動 transform 不碰 left, 安全 */
  #resultAnim.ra-3point .ra-char { left: calc(50% + 90px); }
}
/* 流星雨容器：铺满揭晓层，置于「图片之后」（z1 < 舞台 z2）→ 流星在角色/标题背后飘落 */
#resultAnim .ra-meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
#resultAnim .ra-meteors .meteor {
  width: 3px; height: 3px;
  box-shadow: 0 0 7px 2px rgba(180, 210, 255, 0.8);
  animation-name: ra-meteor-fly;          /* 用带 --rot/--mop/--tail 的自然版 */
  animation-timing-function: ease-out;    /* 划过时略减速 */
  animation-fill-mode: both;              /* 延迟期间保持 from 态(透明)，不显示静止亮点 */
}
#resultAnim .ra-meteors .meteor::after { width: var(--tail, 140px); }
/* 自然版流星：拖尾对齐运动方向(--rot)、亮起后渐隐(划过感)、明暗不一(--mop) */
@keyframes ra-meteor-fly {
  0%   { opacity: 0;            transform: translate(0, 0) rotate(var(--rot, 145deg)); }
  10%  { opacity: var(--mop, 1); }
  45%  { opacity: var(--mop, 1); }
  100% { opacity: 0;            transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 145deg)); }
}

#resultAnim.run .ra-ink  { animation: ra-ink-in  0.55s ease-out forwards; }
#resultAnim.run .ra-char { animation: ra-char-in 0.50s ease-out 0.12s forwards; }
#resultAnim.run .ra-ball { animation: ra-pop     0.45s cubic-bezier(.2,1.5,.4,1) 0.50s forwards; }
#resultAnim.run .ra-luck { animation: ra-pop     0.45s cubic-bezier(.2,1.5,.4,1) 0.78s forwards; }
#resultAnim.fade { animation: ra-fade 0.3s ease forwards; }

@keyframes ra-ink-in  { to { opacity: 0.95; transform: translate(-50%, -50%) scale(1); } }
@keyframes ra-char-in { to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes ra-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes ra-fade { to { opacity: 0; } }

/* ========================================================================
   手機版首頁（豎屏專用）— 桌面版完全不受影響，只在豎屏顯示
   ======================================================================== */
#mHome {
  position: fixed;
  inset: 0;
  z-index: 4;                 /* 背景/桌面舞台之上，彈窗(50)/過渡(70)/Loading(90)之下 */
  display: none;
  overflow: hidden;
  background-color: #05070f;  /* 手機背景圖載入前先以深色擋住後面那張 zoom 的桌面橫向背景 */
}
@media (orientation: portrait) {
  #mHome:not(.hidden) { display: block; }
  #stage { display: none !important; }     /* 豎屏不顯示桌面首頁 */
  /* iOS 記憶體保護：豎屏改用手機版（#mHome + #mSky），桌面層全部關掉，避免「桌面+手機」雙份圖層同時合成 */
  #sky { display: none !important; }        /* 桌面星空(185顆 box-shadow 星)不在豎屏渲染 → 省掉 185 個模糊合成層 */
  #bg  { display: none !important; }        /* 桌面大背景(4096×1920)不在豎屏合成（手機首頁用自己的 m-bg）*/

  /* 手機彈窗放大 2 倍（利用既有的 --modal-extra 乘數，所有動畫幀都會跟著放大）。
     規則彈窗 .wide 暫不處理；中獎彈窗 .prize 原 0.62 → 1.24 同樣 ×2 */
  #modal:not(.wide) { --modal-extra: 3.3; }
  #modal.prize      { --modal-extra: 2.0; }
}
@media (orientation: landscape) {
  #mHome { display: none !important; }      /* 橫屏不顯示手機首頁 */
}

/* 背景：鋪滿手機屏 */
.m-bg {
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100vh;        /* 後備（舊瀏覽器）*/
  height: 100lvh;       /* 穩定大視口高度：手機位址列收合時，cover 背景不再隨視口變高重新縮放（消除刷新時 mainbg_m 的縮放）*/
  object-fit: cover; object-position: center;
}

/* ====== 診斷安全模式（?off=filter / bg / float）：排查 iOS 崩潰，正常使用不會帶這些 class ====== */
.off-filter .m-char,
.off-filter .m-logo,
.off-filter #logo,
.off-filter .char { filter: none !important; }
.off-filter .star,
.off-filter .meteor,
.off-filter .meteor::after { box-shadow: none !important; }
.off-bg .m-bg { display: none !important; }
.off-logo .m-logo-wrap,
.off-logo #logo { display: none !important; }
.off-float .m-char,
.off-float .m-count { animation: none !important; }

/* ===== 手機版規則彈窗（豎版高框 rulepopframe_m；電腦版橫版彈窗不動）===== */
#mRulesPop {
  position: fixed; inset: 0; z-index: 60;          /* #mHome(4) 之上 */
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.72);
}
#mRulesPop.hidden { display: none; }
#mRulesPop:not(.hidden) { animation: mrules-fade 0.25s ease; }
@keyframes mrules-fade { from { opacity: 0; } to { opacity: 1; } }
.m-rules-box {
  position: relative;
  width: 92vw; max-width: 430px;
  aspect-ratio: 1363 / 2239;
  max-height: 95vh;
  transform-origin: center center;
}
/* 開/關窗動畫：與電腦版弹窗一致(科技感橫向拉線→縱向展開過衝→落定 / 反過程收回) */
#mRulesPop:not(.hidden) .m-rules-box { animation: mrules-open 0.75s cubic-bezier(0.16, 1, 0.3, 1); }
#mRulesPop.closing .m-rules-box { animation: mrules-close 0.42s cubic-bezier(0.7, 0, 0.84, 0) forwards; }
@keyframes mrules-open {
  0%   { transform: scaleX(0.55) scaleY(0.012); opacity: 0; }
  14%  { transform: scaleX(1) scaleY(0.016);  opacity: 1; }
  28%  { transform: scaleX(1) scaleY(0.03);   opacity: 1; }
  36%  { transform: scaleX(1) scaleY(0.07);   opacity: 1; }
  43%  { transform: scaleX(1) scaleY(0.04);   opacity: 1; }
  78%  { transform: scaleX(1) scaleY(1.06);   opacity: 1; }
  88%  { transform: scaleX(1) scaleY(0.985);  opacity: 1; }
  100% { transform: scaleX(1) scaleY(1);      opacity: 1; }
}
@keyframes mrules-close {
  0%   { transform: scaleX(1) scaleY(1);      opacity: 1; }
  55%  { transform: scaleX(1) scaleY(0.03);   opacity: 1; }
  100% { transform: scaleX(0.5) scaleY(0.01); opacity: 0; }
}
.m-rules-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.m-rules-close {
  position: absolute; top: -1.5%; right: -1.5%;
  width: 12%; max-width: 52px;
  background: none; border: 0; padding: 0; cursor: pointer; z-index: 3;
}
.m-rules-close img { width: 100%; display: block; }
/* 內容區：框內留白 */
.m-rules-content {
  position: absolute; left: 8%; right: 8%; top: 8%; bottom: 5.5%;
  display: flex; flex-direction: column;
}
/* 標題：label.webp 橫幅做底(藍金+籃球)，「規則玩法」文字疊上；貼在框最頂、蓋在上邊框 */
.m-rules-title {
  position: absolute; top: calc(1% - 20px); left: 50%; transform: translateX(-50%);
  width: 46%; aspect-ratio: 296 / 103; z-index: 2;
  background: url("../assets/images/label.webp") center/100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;   /* 文字與橫幅正中對齊 */
}
/* 標題文字：金→白漸變 + 陰影，與「獎金記錄」(電腦版弹窗標題)一致 */
.m-rules-title-text {
  font-size: 20px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #ffffff, #e1bd52);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.95));
}
.m-rules-prizes { flex: 0 0 auto; }
.m-rules-row { width: 92%; margin: 0 auto 1.5%; }   /* 整排(圖標+金額)縮小一點、居中，保持對齊 */
.m-rules-row img { width: 100%; display: block; }
.m-rules-amts { display: flex; margin-top: -0.5%; }
.m-rules-amts b {
  flex: 1; text-align: center;
  font-size: 5vw; font-weight: 900; color: #ffe24a;
  text-shadow: 0 2px 3px rgba(0,0,0,.85), -1px 0 0 #6b3e00, 1px 0 0 #6b3e00, 0 -1px 0 #6b3e00, 0 1px 0 #6b3e00;
}
.m-rules-text.rules-text {
  flex: 1 1 auto; overflow-y: auto;
  margin-top: 3%;
  color: #e2ebff; font-size: 3.5vw; line-height: 1.5; font-weight: 600;
  padding-right: 5px;
}
.m-rules-text.rules-text p { margin: 0 0 2.6%; }
/* 電腦版：保留整段不被拆開；手機版：可在括號前換行，但不拆開「【1次】」這類短語 */
.rules-text .nb { white-space: nowrap; }
@media (max-width: 768px) {
  .rules-text .nb {
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
  }
}
/* 手機星空層：星星 + 流星（在背景上、角色下方）*/
.m-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

/* 角色（疊在背景上）*/
.m-char { position: absolute; pointer-events: none; left: 50%; opacity: 0; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
.m-char-female { width: 94%;  top: calc(6.3vw + 30px);  --m-tx: -62%; --m-fy: -13px; transform: translateX(var(--m-tx)); z-index: 1; }
.m-char-male   { width: 106%; top: calc(38.9vw + 50px); margin-left: -20px; --m-tx: -47%; --m-fy: -7px;  transform: translateX(var(--m-tx)); z-index: 2; }

/* 手機角色入場（與桌面同邏輯：男左滑入 / 女右滑入延遲半拍）→ 定格 → 微飄。保留定位 translateX 不被覆蓋 */
.m-char-male.m-enter   { animation: m-char-male-in   1.2s ease-out both; }
.m-char-female.m-enter { animation: m-char-female-in 1.2s ease-out 0.4s both; }
@keyframes m-char-male-in   { from { opacity: 0; transform: translateX(var(--m-tx)) translateX(-22%); } to { opacity: 1; transform: translateX(var(--m-tx)); } }
@keyframes m-char-female-in { from { opacity: 0; transform: translateX(var(--m-tx)) translateX(22%);  } to { opacity: 1; transform: translateX(var(--m-tx)); } }
.m-char.m-shown   { opacity: 1; }
.m-char.m-floating { animation: m-char-float 5.6s ease-in-out infinite; }
@keyframes m-char-float { 0%, 100% { transform: translateX(var(--m-tx)) translateY(0); } 50% { transform: translateX(var(--m-tx)) translateY(var(--m-fy)); } }

/* 圖示按鈕（返回 / 音樂 / 記錄 / 規則）*/
.m-icon {
  position: absolute; z-index: 6;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.m-icon img { width: 13vw; max-width: 72px; display: block; }
.m-icon span { color: #fff; font-size: 4vw; max-width: 100px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.7); }
.m-back   { left: 1.5vw;  top: 2.5vh; }
.m-music  { right: 1.5vw; top: 2.5vh; }
.m-record { right: 1.5vw; top: calc(2.5vh + 23vw); }
.m-rules  { right: 1.5vw; top: calc(2.5vh + 46vw); }

/* 靜音：與電腦版一致，音樂圖標上疊一條黃色斜槓 /（slash 高度跟著圖標 13vw/72px 縮放，自動對齊）。手機首頁 .m-music + 遊戲 .mg-music 共用 */
.m-music.muted::after,
.mg-music.muted::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;                                /* 圖標在按鈕最上方 → 從圖標頂起算 */
  width: 5px;
  height: 13vw; max-height: 72px;        /* = .m-icon img 高度 → 斜槓垂直中心對齊圖標中心 */
  background: #ffe24a;                    /* 與圖標音符同色 */
  border-radius: 3px;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center center;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* 次數徽章 */
.m-count {
  position: absolute; z-index: 5; left: 3vw; top: calc(30vh - 30px); width: 36vw; max-width: 205px;
  animation: m-count-float 4.6s ease-in-out infinite;   /* 手機版次數徽章輕微微飄（電腦版 #countBadge 不加） */
}
.m-count img { width: 100%; display: block; }
@keyframes m-count-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-1.3deg); }
}
.m-count-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 12%;          /* 文字往上提一點（菱形視覺中心偏上）*/
  color: #fff; font-weight: 800; text-shadow: 0 2px 5px rgba(0,0,0,.6); line-height: 1.15;
}
.m-count-title { font-size: 5vw; }
.m-count-num { font-size: 5vw; }
.m-count-num b { color: #ffe24a; font-size: 6.5vw; }

/* Logo：陰影放在「容器」上(單一 filter → iOS 正常渲染)，作用於內部合成出的 logo。
   logo 形狀始終不變(只是內容由糊變清晰) → 陰影從頭到尾恆定、不閃、iOS 不會消失。 */
.m-logo-wrap {
  position: absolute; z-index: 4;
  left: 50%; top: calc(83vw + 65px);
  width: 700px; height: 281px; margin-left: -350px;
  transform-origin: top center;
  transform: scale(var(--m-logo-scale, 0.58));
  filter:
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
/* 動畫層：填滿容器。半解析度雪碧圖(12.4MB 取代 52MB)，background-size 撐回 3600 → frame 座標不變 */
.m-logo {
  position: absolute; inset: 0;
  background-image: url("../assets/images/gamelogo_m.webp?v=3");
  background-size: 3600px 3612px;
  background-repeat: no-repeat;
  background-position: 10px 10px;          /* 首幀 */
}
/* 清晰靜態層：填滿容器、疊在動畫層上，動畫播完淡入(內容糊→清晰)。陰影由容器提供，這層不帶 filter */
.m-logo-final {
  background-image: url("../assets/images/gamelogo_last.webp?v=1");
  background-size: 700px 281px;
  background-position: 0 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.m-logo-final.show { opacity: 1; }

/* 時間條 */
.m-time {
  position: absolute; z-index: 5; left: 50%; top: calc(112vw + 85px); transform: translateX(-50%);
  width: 94vw; max-width: 600px; aspect-ratio: 820 / 71;
  display: flex; align-items: center; justify-content: center;
  background: url("../assets/images/time.webp") center/contain no-repeat;
  white-space: nowrap; color: #fff; font-weight: 800; font-size: calc(3.5vw + 1px);
  letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.m-time b { color: #ffe24a; font-weight: 700; }

/* 開始投緣 */
.m-start {
  position: absolute; z-index: 5; left: 50%; width: 62vw; max-width: 380px;
  /* bottom 鎖底 5vh；但可視區變矮(Chrome 上下工具列)時按鈕會往上擠到時間條 → 用 min() 鉗制：
     可視區夠高用 5vh(Safari 不變)，變矮時自動減小 bottom，保證按鈕頂在時間條下方 ~20px(不重疊)。
     144vw+105px ≈ 時間條底(120vw+85) + 間距20 + 按鈕高(24vw) → 反推的 bottom 上限 */
  bottom: min(5vh, calc(100% - 144vw - 90px));
  transform: translateX(-50%); background: none; border: 0; padding: 0; cursor: pointer;
}
.m-start img { width: 100%; display: block; }

/* ===== 手機版遊戲視圖（豎屏專用 #mGame；桌面 #gameStage 完全不動）===== */
#mGame {
  position: fixed;
  inset: 0;
  z-index: 4;                 /* 與 #mHome 同層：彈窗/過渡/Loading 之下 */
  display: none;
  overflow: hidden;
  background-color: #05070f;  /* 背景圖載入前先以深色擋住後面的桌面層 */
}
@media (orientation: portrait) {
  #mGame:not(.hidden) { display: block; }
  #gameStage { display: none !important; }   /* 豎屏不顯示桌面遊戲舞台（手機用 #mGame）*/
}
@media (orientation: landscape) {
  #mGame { display: none !important; }        /* 橫屏不顯示手機遊戲視圖 */
}

/* ThinkPHP 裝置分流：以後端 $isMobile 為準，不受手機旋轉方向影響。 */
body.is-mobile #mHome:not(.hidden),
body.is-mobile #mGame:not(.hidden) {
  display: block !important;
}

/* 手機彈窗改由後端裝置分支控制，不再依賴 portrait media query。 */
body.is-mobile #modalLayer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(0, 0, 0, 0.55);
}

body.is-mobile #modalLayer.hidden {
  display: none !important;
}

body.is-mobile #modal:not(.wide) {
  --modal-extra: 3.3;
}

body.is-mobile #modal.prize {
  --modal-extra: 2;
}

body.is-mobile .record-head {
  font-size: 23px;
}

body.is-mobile .record-row,
body.is-mobile .record-empty {
  font-size: 20px;
}

body.is-mobile .shot-result .amount-stroke {
  fill: #f8c83c;
}

body.is-mobile .shot-result .amount-svg {
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.42));
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

body.is-mobile #stage,
body.is-mobile #gameStage,
body.is-mobile #sky,
body.is-mobile #bg {
  display: none !important;
}

body.is-desktop #mHome,
body.is-desktop #mGame,
body.is-desktop #mRulesPop {
  display: none !important;
}

body.is-desktop #stage:not(.hidden),
body.is-desktop #gameStage:not(.hidden) {
  display: block !important;
}
/* 場景背景 + 籃網層：同尺寸(1440×2560)同 cover → 篮網與場景篮筐精準對齊 */
.mg-bg, .mg-hoop {
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;             /* 鎖大視口：位址列升降時不重新縮放 */
  object-fit: cover; object-position: center center;
  pointer-events: none;
}
.mg-bg   { z-index: 0; }
.mg-hoop { z-index: 1; }      /* 籃網在場景之上（投籃時球可穿到網後，由 JS 切 z 處理）*/

/* 右上：音樂（沿用 .m-icon 樣式，定位同手機首頁音樂鈕）*/
.mg-music { right: 1.5vw; top: 2.5vh; z-index: 6; }

/* 台座（發光圓盤，在下方置中）*/
.mg-pedestal {
  position: absolute; left: 50%; top: calc(73% + 30px);
  width: 96vw; max-width: 580px;
  transform: translateX(-50%);
  z-index: 2; pointer-events: none;
}

/* 方向箭頭（3 個向上三角，順序發光，與電腦版 #aimArrow 一致；尺寸用 vw 自適應）*/
.mg-aim {
  position: absolute; left: 50%; top: calc(42% + 30px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1.9vw;
  z-index: 3; pointer-events: none;
}
.mg-aim .chev {
  width: 0; height: 0;
  border-left: 4.1vw solid transparent;
  border-right: 4.1vw solid transparent;
  border-bottom: 5.2vw solid #ff8a1e;
  filter: drop-shadow(0 0 1.3vw rgba(255, 160, 50, 0.9));
  opacity: 0.35;
  animation: chev-glow 1.2s ease-in-out infinite;   /* 共用電腦版已定義的 chev-glow */
}
.mg-aim .chev:nth-child(3) { animation-delay: 0s;    border-left-width: 4.1vw; border-right-width: 4.1vw; border-bottom-width: 5.2vw; }  /* 下：最大 */
.mg-aim .chev:nth-child(2) { animation-delay: 0.16s; border-left-width: 3.1vw; border-right-width: 3.1vw; border-bottom-width: 3.9vw; }  /* 中 */
.mg-aim .chev:nth-child(1) { animation-delay: 0.32s; border-left-width: 2vw;   border-right-width: 2vw;   border-bottom-width: 2.5vw; }  /* 上：最小 */
.mg-aim.hidden { display: none; }   /* 投出時收起箭頭(與電腦版 #aimArrow.hidden 一致) */

/* 球的投影（台座上的橢圓陰影）*/
/* 球的投影：與電腦版 #ballShadow 一致(柔化模糊橢圓)。台座待機不顯示(opacity:0)，只有投出落地才由 JS 淡入 */
.mg-ball-shadow {
  position: absolute; left: 50%; top: calc(70.5% + 16px);   /* 落地時影子貼在球正下方(球底) */
  width: 38vw; height: 9vw; max-width: 200px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 70%);
  transform: translateX(-50%);
  transform-origin: center center;
  filter: blur(2px);
  opacity: 0;                                  /* 預設無影(台座上); 落地時 setMBallShadow 淡入 */
  will-change: transform, opacity;             /* 與球同提升到 GPU 圖層 */
  z-index: 2; pointer-events: none;
}

/* 球（置中、放大）*/
.mg-ball {
  position: absolute; left: 50%; top: calc(53.5% + 30px);   /* 以球頂為錨, 配合 translateX(-50%); launchBall 投籃時以此為基準, 不會跳動 */
  width: 36vw; max-width: 208px;
  transform: translateX(-50%);
  animation: ball-float 2.6s ease-in-out infinite;   /* 待機微飄(與電腦版 #ball 一致; 投出時 launchBall 會 animation:none 暫停)*/
  will-change: transform;   /* 提升到獨立 GPU 圖層 → 投籃移動球只合成不重繪整個場景(小手機更順, 消除半渲染閃現) */
  z-index: 2;   /* 低於投籃時的籃網層(z=3)→球進框瞬間被網蓋住；高於台座/投影(z=2 同層, DOM 在後→在上) */
  /* 不加 drop-shadow → 只保留落地時的物理地面影子(.mg-ball-shadow), 避免球身自帶影子疊成兩層 */
}

/* 可投次數（緊貼點擊投出按鈕上方 20px；按鈕 top:82% → 距底 18%，故底邊 = 18% + 20px）*/
.mg-count {
  position: absolute; left: 50%; bottom: calc(18% - 2px);   /* 靠近點擊投出按鈕(下移到藥丸上方幾 px) */
  transform: translateX(-50%);
  z-index: 4; white-space: nowrap;
  font-size: 5.2vw; font-weight: 800; color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6);
}
.mg-count b { color: #ffe24a; font-size: 5.8vw; font-weight: 900; }

/* 點擊投出（台座下方）*/
.mg-shoot {
  position: absolute; left: 50%; top: 82%;
  width: 60vw; max-width: 370px;
  transform: translateX(-50%);
  background: none; border: 0; padding: 0; cursor: pointer; z-index: 5;
}
.mg-shoot img { width: 100%; display: block; }
.mg-shoot.disabled { filter: grayscale(65%) brightness(0.5); pointer-events: none; }   /* 投籃中: 變暗灰化(tint, 不透明) + 不可點 */