:root{
  --warm:#f3e3bf;
  --warm2:#f7edd3;
  --mist:#111113;
  --text:#1b1b1b;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

body{
  background: radial-gradient(900px 650px at 50% 40%, #151518, #050506);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100svh;
}

/* ===== 舞台 ===== */
.stage{
  --w: min(520px, 96vw);
  --u: calc(var(--w) / 430px);
  --edge-glow: 0;
  --stage-base: #1b1712;
  width: var(--w);
  aspect-ratio: 9 / 16;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: var(--stage-base);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  touch-action: none;
}

/* 黑底提亮層：放到球道上方，只亮左右黑邊與底部，中央球道挖空 */
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity: var(--edge-glow, 0.7);
  transition: opacity 260ms ease;
  mix-blend-mode: screen;

  background:
    radial-gradient(
      ellipse at 50% 120%,   /* 🔥 往下面拉光源（關鍵） */
      rgba(255,240,200,0.55) 0%,
      rgba(255,240,200,0.45) 30%,
      rgba(255,240,200,0.35) 55%,  /* 🔥 亮區延伸到這 */
      rgba(255,240,200,0.20) 70%,
      rgba(255,240,200,0.08) 85%,
      rgba(255,240,200,0) 100%
    );
}
/* 舊 mist 停用（避免再出現只亮半邊） */
.mist{
  position:absolute; inset:0;
  background:
    radial-gradient(130% 95% at 50% 104%,
      rgba(255,248,228,.92) 0%,
      rgba(255,242,210,.62) 45%,
      rgba(255,236,198,.22) 72%,
      rgba(255,236,198,0) 100%
    );
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events:none;
  z-index:1;
  display:none;
}

/* 溝槽效果暫停，球道恢復正常 */

.bg-glow{
  position:absolute; inset:-30%;
  background: radial-gradient(700px 500px at 50% 70%, rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(6px);
  opacity:0;
}

/* ===== HUD ===== */
.hud{
  position:absolute; top:12px; left:12px; right:12px;
  display:flex; align-items:center; justify-content:space-between;
  color: rgba(0,0,0,.65);
  z-index:5;
}
.title, .balls{
  font-weight:700;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: .04em;
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
}
.title{ letter-spacing:.06em; }

/* annoyWrap 已從 HTML 移除，不需要此規則 */

/* ===== 小煩滴（右側 UI 層，z-index 高於球道與瓶子） ===== */
.emotions{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:6;   /* 高於球道(1)、瓶子(2)、背景(3)，低於球(7)和 overlay(10) */
}

/* 基礎尺寸 70×55（寬>高），JS 給 ±10% 隨機，opacity 維持原色不降低 */
.emotion-char{
  position:absolute;
  width:  calc(70px * var(--u, 1));
  height: calc(55px * var(--u, 1));
  transform-origin: 50% 85%;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.emotion-char img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.25));
}

/* 小煩滴靜態，無任何動畫 */
.emotion-char{ animation: none; }

/* 被打中：果凍感（彈扁倒滑消失）
   transform 順序：translateX 要在最外層，否則旋轉後位移方向會偏
   opacity 起點對齊常態 0.6 */
@keyframes jellyHit{
  0%  { opacity:1;  transform: translateX(0)                                     rotate(var(--base-rot,0deg)) scale(1,1);    }
  10% { opacity:1;  transform: translateX(0)                                     rotate(var(--base-rot,0deg)) scale(1.35,.6);}
  25% { opacity:1;  transform: translateX(0)                                     rotate(var(--base-rot,0deg)) scale(.75,1.3);}
  48% { opacity:.8; transform: translateX(calc(var(--fall-dir,1) * 14px))  rotate(calc(var(--base-rot,0deg) + var(--fall-dir,1)*40deg))  scale(1.1,.85);}
  72% { opacity:.4; transform: translateX(calc(var(--fall-dir,1) * 32px))  rotate(calc(var(--base-rot,0deg) + var(--fall-dir,1)*80deg))  scale(.95,1);  }
  100%{ opacity:0;  transform: translateX(calc(var(--fall-dir,1) * 52px))  rotate(calc(var(--base-rot,0deg) + var(--fall-dir,1)*105deg)) scale(.88,1);  }
}
.emotion-char.hit{
  animation: jellyHit 0.55s cubic-bezier(.22,1,.36,1) forwards !important;
}

/* ===== 水滴閃效果：閃在情緒角色中心，z-index 在情緒層(3)上方 ===== */
.water-flash{
  position:absolute;
  z-index:9;
  pointer-events:none;
  width: calc(72px * var(--u,1));
  height: calc(72px * var(--u,1));
  opacity:0;
  transform: translate(-50%,-50%) scale(0.3);
}
.water-flash img{ width:100%; height:100%; object-fit:contain; }

@keyframes waterFlashAnim{
  0%  { opacity:0;   transform: translate(-50%,-50%) scale(0.2); }
  18% { opacity:1;   transform: translate(-50%,-50%) scale(1.4); }
  48% { opacity:.85; transform: translate(-50%,-50%) scale(1.05); }
  100%{ opacity:0;   transform: translate(-50%,-50%) scale(0.65); }
}
.water-flash.pop{
  animation: waterFlashAnim 0.48s ease-out forwards;
}

/* ===== 球道：實景圖底（PNG 去背，鋪滿舞台） ===== */
.play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: none;
  z-index:2;
}

.play::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  z-index:2;
  pointer-events:none;

  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent      0%,
      rgba(0,0,0,.15) 14%,
      rgba(0,0,0,.55) 20%,
      rgba(0,0,0,.90) 20%,
      black           22%,
      black          100%
    );
  -webkit-mask-size: 100% 100%;
  mask-image:
    linear-gradient(to bottom,
      transparent      0%,
      rgba(0,0,0,.15) 12%,
      rgba(0,0,0,.55) 25%,
      rgba(0,0,0,.90) 40%,
      black           48%,
      black          90%
    );
  mask-size: 100% 100%;

  background-image: url('圖底.png');
  background-size: 100% 100%;
  background-position: center top;
}

/* .lane-blend 已停用 */
.lane-blend{ display:none; }

/* 元件層 */
.bottles, .ball, .trail, .hint{ position:absolute; z-index:4; }
.bottles{ inset:0; }

/* ===== 瓶子（跑道上的打擊目標） ===== */
.bottle{
  position:absolute;
  width: calc(46px * var(--u, 1));
  height: calc(112px * var(--u, 1));
  background: transparent !important;
  backdrop-filter: none !important;
  transform-origin: 50% 92%;
  /* 瓶子底部陰影：加深度感 */
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.28));
}
.bottle img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}

/* 瓶子待命微晃 */
@keyframes bottleBreath{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}
.bottle{ animation: bottleBreath 3.6s ease-in-out infinite; }
.bottle:nth-child(2){ animation-delay:.2s; }
.bottle:nth-child(3){ animation-delay:.35s; }
.bottle:nth-child(4){ animation-delay:.5s; }
.bottle:nth-child(5){ animation-delay:.65s; }
.bottle:nth-child(6){ animation-delay:.8s; }

/* ===== 提示 ===== */
.hint{ display:none !important; }

/* ===== 球 ===== */
.ball{
  width: calc(54px * var(--u, 1));
  height: calc(54px * var(--u, 1));
  border-radius: 999px;
  /* 不透明象牙白，帶高光感，無透明度 */
  background: radial-gradient(circle at 38% 32%,
    #fffff0 0%,
    #f5e8c8 28%,
    #e8d0a0 55%,
    #d4b878 78%,
    #c8a855 100%
  );
  box-shadow:
    0 8px 20px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.30),
    inset 0 -3px 8px rgba(100,60,0,.20);
  display:none;
  z-index:7;
}
.idle-ball{
  display:block !important;
  left:50% !important;
  bottom:24px !important;
  transform: translateX(-50%) !important;
}
.idle-ball::after{ display:none !important; content:none !important; }
.fly-ball{
  display:block !important;
  transform: translate(-50%,-50%);
  will-change: left, top, transform, opacity;
  z-index:7;
}

/* 拖尾 */
.trail{
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,210,120,.35);
  filter: blur(2px);
  display:none;
  z-index:6;
}

/* ===== 結算卡片 ===== */
.overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 0 0 100px;
  z-index:10;
}
.overlay[hidden]{ display:none !important; }

.card{
  width:min(520px, 90vw);
  padding:24px 22px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}
.line{
  font-size:18px;
  color: rgba(0,0,0,.78);
  line-height:1.5;
  margin-bottom:20px;
  text-align:center;
}
.actions{
  display:flex;
  gap:16px;
  justify-content:center;
}

/* ===== 油滴按鈕 =====
   油滴形：尖頭在頂部約 35%，大肚子在下方 65%
   padding-top 推字到大肚子中段
*/
.oil-btn{
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  width: 90px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;      /* 比之前多推 10px，字落在大肚子下半段 */
  padding-bottom: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease;
}
.oil-btn:active{ transform: scale(0.93); }

.oil-btn .oil-bg{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
/* ghost：只降低底圖透明度，文字另外設定保持清晰 */
.oil-btn.ghost .oil-bg{
  opacity: 0.35;
  filter: saturate(0.1) brightness(1.05);
}

.oil-btn span{
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: rgba(45, 22, 4, 0.85);
  text-align: center;
  line-height: 1.35;
  max-width: 60px;
  text-shadow:
    0  1px 2px rgba(255,230,150,.55),
    0 -1px 1px rgba(255,230,150,.25);
}
/* ghost 文字：深色清晰，不跟底圖一起淡 */
.oil-btn.ghost span{
  color: rgba(45, 22, 4, 0.80);
  text-shadow:
    0 1px 3px rgba(255,240,200,.50);
}

/* ===== 禁止選取 ===== */
.stage, #bottles, #bottles img, .bottle,
#emotions, #emotions img, .emotion-char, .ball{
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:none;
}

/* 瓶子尺寸已由 --u 變數自動縮放，不需要手機額外調整 */