/* 猴子猜杯(Monkey Cups)—— 马戏团帐篷 × 红丝绒圆桌 × 柠檬
 * 图片只有马戏团背景(public/img/cups/bg.webp,1112×834,中下方一张红丝绒圆桌:丝绒面 x 280–832、y 617–722,金边底 y 约 760)、
 * 猴子四张(monkey-idle 等你 / monkey-shuffle 在洗 / monkey-laugh 指着你笑 / monkey-shock 傻眼,都只露上半身)、
 * 银杯两张(cup 倒扣 / cup-lift 提起倾斜)和红球(ball.webp,球在图的右下角 x 172–359、y 119–304,左上角另有半个杯子要裁掉)。
 * 洗杯换位、最后几下的拖影模糊、停住那一下的抖动、掀杯、柠檬框提示、球的光、倍数徽章、结果卡、面板全是 CSS。版面照设计稿
 * (output/小游戏市场调研/猴子猜杯设计/B.png 选杯、out/S2-洗杯.png、S3-猜中.png、S4-没猜中.png):
 * 顶栏(返回 / 猴子猜杯 / 余额)、上半屏帐篷里的圆桌 + 桌子后面的猴子 + 桌上左中右三个杯子、
 * 下半屏黑底面板(押一杯 / 押两杯、三颗杯子按钮、倍数徽章、下注金额、柠檬大键「开始洗杯」)。
 * 柠檬黄只给选中的押法 / 杯子、主按钮、倍数徽章和押中的光;数字一律白色粗体。
 * 动画(keyframes)只动 transform / opacity;最后几下的模糊是挂上去的静态 filter。关了「减少动态效果」全关。
 * 球(老板 10-25):开局到掀杯之前画面上没有球,cups.js 掀开有球的那杯那一刻才把 .cp-ball 建进 .cp-under。
 */
.cups {
  position: fixed; inset: 0; z-index: 10; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--safe-t, 0px) 0 calc(var(--safe-b, 0px) + 10px);
  --bg: #0a0a0a; --surface: #151515; --surface-2: #1f1f1f; --line: #262626;
  --ink: #fff; --ink-2: #8a8a8a; --ink-3: #5c5c5c; --neon: #e5ff3d; --neon-ink: #0a0a0a; --bad: #ff5a5a; /* 输掉的钱一律这个红(test/loss-amount.test.js) */
  --sans: system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.cups[hidden] { display: none; }
.cups :where(p, h2, h3) { margin: 0; }
/* 用 :where 把重置的权重压到 0:后面单个 class 的按钮样式才盖得过它(button 的 background:none 会吃掉底色) */
.cups :where(button) { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.cups button:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.cups img { -webkit-user-drag: none; pointer-events: none; }
/* 按钮里面的字、图一律点不到:按下、松手、click 都落在按钮本身 */
.cups button > *, .cups button * { pointer-events: none; }

/* ---------- 顶栏:返回、标题、余额(照河豚打气 / 袋鼠猜倍数:余额不缩最多占 44%,标题吃剩下的、长了折两行) ---------- */
.cp-top { flex: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px; }
.cp-back { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cp-back svg { width: 20px; height: 20px; }
.cp-music { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--neon); }
.cp-music[aria-pressed="false"] { color: var(--ink-2); }
.cp-music svg { width: 20px; height: 20px; }
.cp-back, .cp-music { position: relative; }
.cp-back::before, .cp-music::before { content: ''; position: absolute; inset: -2px; }
.cp-title { flex: 1; min-width: 0; text-align: center; font-size: clamp(16px, 5vw, 20px); font-weight: 800; line-height: 1.12; letter-spacing: .02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cp-bal { flex: none; max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 359px) { .cp-top { gap: 6px; padding-left: 12px; padding-right: 12px; } .cp-bal { padding: 6px 9px; font-size: 13px; } }

/* ---------- 主画面 ----------
 * .cp-stage 铺满主画面、当 container;.cp-scene 是跟背景图一样 4:3 的框,背景、猴子、球、杯子全按这个框的百分比摆,所以永远站在图里那张桌上。
 * 框多大:让主画面刚好看得到「猴子帽顶到桌子金边」那一段(图上约 y 290–770,框高约是主画面的 1.75 倍 → 宽 233cqh),
 * 但至少铺满宽(100cqw)、最多放大到桌子占满宽(175cqw),高的主画面就多露一点帐篷;再保证框比主画面高(145cqh)。
 * 左右置中(桌子在正中),桌子金边下缘(图上 y 767 = 92%)贴主画面底边。
 * 认不得 cq 单位的旧 WebView:退回「高度铺满、至少一样宽」、置中(极端比例下杯子会偏一点,照样能玩) */
.cp-hero { position: relative; flex: 1 1 auto; min-height: 200px; overflow: hidden; background: #12060a; }
.cp-stage { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.cp-scene { position: absolute; left: 50%; bottom: 0; height: 100%; min-width: 100%; aspect-ratio: 1112 / 834; transform: translateX(-50%); }
@supports (width: 1cqw) {
  .cp-scene {
    --sw: max(145cqh, clamp(100cqw, 233cqh, 175cqw)); --sh: calc(var(--sw) * .75);
    width: var(--sw); height: var(--sh); min-width: 0; aspect-ratio: auto; transform: none;
    left: calc((100cqw - var(--sw)) / 2); bottom: auto; top: calc(100cqh - var(--sh) * .92);
  }
}
.cp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; }
/* The film contains the monkey and table. Interactive cups and the server's
 * revealed ball remain separate, except while the baked shuffle is playing. */
.cp-motion-poster, .cp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; opacity: 0; }
.cp-video { z-index: 1; }
.cp-motion-stage .cp-motion-poster, .cp-video.is-visible { opacity: 1; }
.cp-motion-stage .cp-bg, .cp-motion-stage .cp-monkey { visibility: hidden; }
.cp-video-shuffle .cp-cup, .cp-video-shuffle .cp-under { visibility: hidden; }
.cp-motion-stage .cp-scene { width: auto; min-width: 0; height: 100%; aspect-ratio: 1168 / 880; bottom: 0; }
@supports (width: 1cqw) {
  .cp-motion-stage .cp-scene {
    /* The height owns the stage scale. A wide window must not enlarge the
     * table until the monkey's face and hands are cropped out above it. */
    --sw: 132.7273cqh; --sh: calc(var(--sw) * .75342466);
    width: var(--sw); height: var(--sh); left: calc((100cqw - var(--sw)) / 2);
    bottom: auto; top: calc(100cqh - var(--sh) * .98); transform: none;
  }
}
/* 下缘融进黑底,接面板 */
.cp-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10%; background: linear-gradient(to bottom, rgba(10, 10, 10, 0), var(--bg)); z-index: 4; pointer-events: none; }

/* 猴子:站在桌子后面、只露上半身,身体中线对着桌子正中(四张身体中线都在图宽的 48–49%)。
 * 图的下缘是一刀切的身子:往下 16% 淡掉,融进丝绒桌面(杯子再盖住中间那段) */
.cp-monkey { position: absolute; left: 50%; bottom: 18.5%; z-index: 1; width: 0; height: 46%; }
.cp-monkey-img { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); -webkit-mask-image: linear-gradient(to bottom, #000 84%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, #000 84%, rgba(0, 0, 0, 0) 100%); }
/* 等你那张轻轻晃(坏笑);傻眼 / 指着你笑那张弹一下 */
.cp-monkey.is-idle { animation: cp-bob 1.3s ease-in-out infinite alternate; }
@keyframes cp-bob { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -1.4%, 0); } }
.cp-monkey.is-pop { animation: cp-pop .42s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes cp-pop { 0% { transform: translate3d(0, 0, 0) scale(1); } 45% { transform: translate3d(0, -3%, 0) scale(1.04); } 100% { transform: translate3d(0, 0, 0) scale(1); } }

/* 三个杯子:倒扣在桌面前半(杯底 y 700 = 16.1%),左中右三格的中心在 x 381 / 556 / 731(格距 15.74% = 杯宽 9% 的 174.9%)。
 * 每个杯子都摆在正中那一格,--s(0 / 1 / 2)用 transform 推到自己那一格;换位的时候 --to 是要去的那一格 */
.cp-cup { position: absolute; left: 45.5%; bottom: 16.1%; z-index: 2; width: 9%; aspect-ratio: 331 / 360; transform: translate3d(calc((var(--s, 1) - 1) * 174.9%), 0, 0); }
.cp-cup:disabled { cursor: default; }
.cp-cup-img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translate3d(-50%, 0, 0); filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .6)); }
/* 两两换位:一个从后面绕(往上、缩小一点),一个从前面绕(往下、放大一点),走弧线;一次比一次快(时长 --d 由 cups.js 写) */
.cp-cup.is-back { --arc: -18%; --sc: .9; z-index: 1; }
.cp-cup.is-front { --arc: 8%; --sc: 1.08; z-index: 3; }
.cp-cup.is-swap { animation: cp-swap var(--d, 300ms) cubic-bezier(.45, .05, .55, .95) both; }
@keyframes cp-swap {
  0% { transform: translate3d(calc((var(--s, 1) - 1) * 174.9%), 0, 0) scale(1); }
  50% { transform: translate3d(calc(((var(--s, 1) + var(--to, 1)) / 2 - 1) * 174.9%), var(--arc, 0%), 0) scale(var(--sc, 1)); }
  100% { transform: translate3d(calc((var(--to, 1) - 1) * 174.9%), 0, 0) scale(1); }
}
/* Register the live sprites to the film's wider cup positions. The original
 * scene above remains the fallback when neither poster nor video is usable. */
.cp-motion-stage .cp-cup { left: 43.307%; bottom: 17.69%; width: 13.13%; transform: translate3d(calc((var(--s, 1) - 1) * 143.618%), 0, 0); }
.cp-motion-stage .cp-cup.is-swap { animation-name: cp-motion-swap; }
@keyframes cp-motion-swap {
  0% { transform: translate3d(calc((var(--s, 1) - 1) * 143.618%), 0, 0) scale(1); }
  50% { transform: translate3d(calc(((var(--s, 1) + var(--to, 1)) / 2 - 1) * 143.618%), var(--arc, 0%), 0) scale(var(--sc, 1)); }
  100% { transform: translate3d(calc((var(--to, 1) - 1) * 143.618%), 0, 0) scale(1); }
}
/* 最后几下快到看不清(稿 S2 的杯子拖影):cups.js 换位最后 3 下给整排杯子挂 is-blur ——
 * 杯子横向拉长、糊掉、左右各拖一道银影(静态 filter,不进 keyframes),杯子后面再拖一道金色光痕一闪一闪;停住就拿掉 */
.cp-cup.is-blur .cp-cup-img { transform: translate3d(-50%, 0, 0) scaleX(1.24); filter: blur(2.6px) drop-shadow(-12px 0 5px rgba(225, 228, 236, .45)) drop-shadow(12px 0 5px rgba(225, 228, 236, .45)); opacity: .88; }
.cp-cup.is-blur::before { content: ''; position: absolute; left: -70%; right: -70%; top: 34%; height: 40%; border-radius: 50%; background: linear-gradient(90deg, rgba(255, 210, 110, 0), rgba(255, 222, 140, .5) 28%, rgba(255, 248, 215, .8) 50%, rgba(255, 222, 140, .5) 72%, rgba(255, 210, 110, 0)); filter: blur(4px); opacity: .8; pointer-events: none; animation: cp-streak .12s linear infinite alternate; }
@keyframes cp-streak { from { opacity: .45; transform: scaleX(.85); } to { opacity: .9; transform: scaleX(1.15); } }
/* 最后一下停住:整排杯子轻轻抖一下再定住(抖的是杯子的图,按钮还站在自己那一格) */
.cp-cup.is-jolt .cp-cup-img { animation: cp-jolt .28s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes cp-jolt { 0%, 100% { transform: translate3d(-50%, 0, 0) rotate(0deg); } 22% { transform: translate3d(-57%, 0, 0) rotate(-3deg); } 48% { transform: translate3d(-44%, 0, 0) rotate(2deg); } 74% { transform: translate3d(-52%, 0, 0) rotate(-1deg); } }
/* 掀杯:换成提起倾斜的那张、往上提(定住的位置写在静态里,关了动态效果直接就在上面) */
.cp-cup.is-up { z-index: 3; }
.cp-cup.is-up .cp-cup-img { transform: translate3d(-58%, -74%, 0) rotate(-6deg); animation: cp-lift .4s cubic-bezier(.2, .8, .3, 1.15) both; }
@keyframes cp-lift { from { transform: translate3d(-50%, 0, 0) rotate(0deg); } to { transform: translate3d(-58%, -74%, 0) rotate(-6deg); } }
/* 点完杯、请求在路上(老板 10-26「点了要等一下才有反应」):点的那杯当场轻轻抬一下、左右晃着等掀 —— 回包没到就一直晃(循环,慢网络等一秒也不像卡住)。
 * 只动 transform、杯口不离开桌面(抬 1.5%、晃 ±4°,角上最多离桌 1–2px):球在哪还没开,杯底下什么都没有,也不能露出一条空的缝 */
.cp-cup.is-ready .cp-cup-img { animation: cp-ready .14s ease-out both, cp-ready-hold .36s ease-in-out .14s infinite alternate; }
@keyframes cp-ready { from { transform: translate3d(-50%, 0, 0) rotate(0deg); } to { transform: translate3d(-50%, -1.5%, 0) rotate(-4deg); } }
@keyframes cp-ready-hold { from { transform: translate3d(-50%, -1.5%, 0) rotate(-4deg); } to { transform: translate3d(-50%, -1.5%, 0) rotate(4deg); } }
/* 回包到了:从晃到的那个样子(cups.js 读出来写进 --lx / --ly / --lr;读不到用晃开始那一格)直接掀起来,不先跳回原位再掀 */
.cp-cup.is-up.is-ready .cp-cup-img { animation: cp-lift-go .38s cubic-bezier(.2, .8, .3, 1.15) both; }
@keyframes cp-lift-go { from { transform: translate3d(var(--lx, -50%), var(--ly, -1.5%), 0) rotate(var(--lr, -4deg)); } to { transform: translate3d(-58%, -74%, 0) rotate(-6deg); } }
/* 等你点杯:杯底一圈柠檬框一明一暗(规格「三个杯子可点(柠檬框提示)」);点了的那杯框常亮、杯子发光 */
.cp-cup::after { content: ''; position: absolute; left: -16%; right: -16%; bottom: -10%; height: 26%; border-radius: 50%; box-shadow: 0 0 0 2px var(--neon), 0 0 14px 2px rgba(229, 255, 61, .55); opacity: 0; pointer-events: none; }
.cp-cup.is-pickable::after { opacity: .7; animation: cp-hint .9s ease-in-out infinite alternate; }
@keyframes cp-hint { from { opacity: .25; } to { opacity: 1; } }
.cp-cup.is-on::after { opacity: 1; }
.cp-cup.is-on .cp-cup-img { filter: drop-shadow(0 0 10px rgba(229, 255, 61, .85)) drop-shadow(0 6px 5px rgba(0, 0, 0, .6)); }

/* 杯底那一格:不占位、不开新的层叠(球照样按 .cp-scene 摆、压在杯子底下);掀杯之前是空的 */
.cp-under { display: contents; }
/* 红球(约半个杯口宽,稿 S3):跟杯子一样摆在正中那一格,--b(0 / 1 / 2)推到有球那一格(格距 15.74% = 球宽 4.6% 的 342.1%),压在杯子底下。
 * 只在掀开有球的那杯时才建出来,建出来就是看得到的 */
.cp-ball { position: absolute; left: 47.7%; bottom: 16.1%; z-index: 1; width: 4.6%; aspect-ratio: 1; transform: translate3d(calc((var(--b, 1) - 1) * 342.1%), 0, 0); pointer-events: none; }
.cp-motion-stage .cp-ball { left: 46.872%; bottom: 17.69%; z-index: 2; width: 6%; transform: translate3d(calc((var(--b, 1) - 1) * 314.283%), 0, 0); }
.cp-motion-stage .cp-cup { z-index: 3; }
.cp-motion-stage .cp-cup.is-front, .cp-motion-stage .cp-cup.is-up { z-index: 4; }
/* 只要右下角那颗球:框 188×188 从图的 (172, 118) 起 → 图宽 191.5%、往左 91.5%、往上 62.8%,再剪成圆 */
.cp-ball-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.cp-ball-img { position: absolute; left: -91.5%; top: -62.8%; width: 191.5%; height: auto; max-width: none; }
/* 押中:球底下一团柠檬光一明一暗(稿 S3) */
.cp-ball-glow { position: absolute; left: 50%; top: 50%; width: 600%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 230, .95) 0 10%, rgba(240, 255, 120, .85) 18%, rgba(229, 255, 61, .45) 34%, rgba(229, 255, 61, 0) 60%); opacity: 0; transform: translate(-50%, -50%) scale(.7); }
.cp-ball.is-glow .cp-ball-glow { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: cp-glow 1s ease-in-out infinite alternate; }
.cp-ball.is-glow .cp-ball-clip { box-shadow: 0 0 10px 3px rgba(229, 255, 61, .85); }
@keyframes cp-glow { from { opacity: .65; transform: translate(-50%, -50%) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }

/* 结果卡(押中,稿 S3):贴在猴子右边、帐篷那一片,歪着的黑牌 + 柠檬框:「猜中了」柠檬字 + 白色派彩。
 * 只占右半边、靠右对齐:不盖猴子傻眼的脸、也不盖中间提起来的杯子(派彩数字长了才往左伸) */
.cp-cardwrap { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-start; justify-content: flex-end; padding: 18% 10px 0 50%; pointer-events: none; }
.cp-cardwrap:empty { display: none; }
.cp-card { display: grid; justify-items: center; gap: 2px; max-width: 100%; padding: 6px 12px 8px; background: rgba(8, 8, 8, .92); border-radius: 14px 8px 16px 6px / 10px 16px 8px 14px; box-shadow: 0 0 0 3px var(--neon), 0 0 22px rgba(229, 255, 61, .45), 0 10px 22px rgba(0, 0, 0, .55); transform: rotate(-5deg); animation: cp-card-in .3s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes cp-card-in { from { opacity: 0; transform: rotate(-5deg) scale(.8); } to { opacity: 1; transform: rotate(-5deg) scale(1); } }
/* 外文「猜中了」(You got it! / Tepat! …)一行放不下就折两行,不截成半句 */
.cp-card-big { max-width: 100%; color: var(--neon); font-size: clamp(18px, 5.6vw, 26px); font-weight: 900; line-height: 1.1; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
.cp-card-amt { color: #fff; font-style: normal; font-size: clamp(18px, 5.8vw, 28px); font-weight: 900; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 控制面板 ---------- */
.cp-panel { flex: none; display: grid; gap: 8px; padding: 10px 16px 0; }
/* 等服务器、掀杯的时候不收第二下 */
.cp-panel.cp-busy { pointer-events: none; }
/* 等回复超过 0.3 秒:面板暗下去 */
.cp-panel.cp-busy.cp-wait > :not(.cp-picks) { opacity: .55; }

/* 押一杯 / 押两杯:一条分段切换,选中的柠檬底(稿 B) */
.cp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cp-mode { min-height: 38px; padding: 0 6px; border-radius: 12px; color: var(--ink-2); font-size: 16px; font-weight: 800; line-height: 1.15; }
.cp-mode.is-on { background: var(--neon); color: var(--neon-ink); }
.cp-mode:disabled { opacity: .45; }
.cp-mode.is-on:disabled { opacity: .7; }

/* 三颗杯子按钮 1 2 3:黑卡 + 小银杯 + 杯身中间一个黑圆数字(稿 B);跟桌上的杯子同步,等你点杯时也能点这里 */
.cp-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-pick { position: relative; display: grid; place-items: center; min-height: 72px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cp-pick:disabled { cursor: default; }
.cp-pick-cup { height: 58px; width: auto; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .55)); }
.cp-pick-no { position: absolute; left: 50%; top: 54%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 20, 20, .82); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); color: #fff; font-size: 17px; font-weight: 900; transform: translate(-50%, -50%); }
/* 亮着的那颗(点了的 / 定格后刚才押的):柠檬框 + 光 */
.cp-pick.is-on { background: #1a1d0c; box-shadow: inset 0 0 0 2px var(--neon), 0 0 16px rgba(229, 255, 61, .35); }
/* 等你点杯:每颗外框一明一暗 */
.cp-pick::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--neon); opacity: 0; pointer-events: none; }
.cp-pick.is-pickable::before { opacity: .7; animation: cp-hint .9s ease-in-out infinite alternate; }
/* 洗杯中三颗灰掉(稿 S2) */
.cp-panel.is-shuffle .cp-pick-cup { filter: grayscale(1) brightness(.5); }
.cp-panel.is-shuffle .cp-pick-no { opacity: .5; }
/* 定格后有球的那颗:杯口底下露一颗小红球(稿 S4) */
.cp-pick.has-ball::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a8a 0 12%, #e2201c 45%, #7a0806 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); transform: translateX(-50%); }

/* 倍数徽章:黑底、粗柠檬边、歪一点,两边甩两滴(稿 B 的涂鸦框);洗杯中写「洗杯中」;没中换灰牌「在 N 号杯」+ 红字 */
.cp-badgerow { display: flex; align-items: center; justify-content: center; min-height: 46px; }
.cp-badge { position: relative; display: inline-flex; align-items: baseline; gap: 10px; max-width: 92%; padding: 5px 24px 6px; background: #0a0a0a; border-radius: 18px 10px 20px 12px / 14px 20px 12px 18px; box-shadow: 0 0 0 4px var(--neon), 0 0 18px rgba(229, 255, 61, .35); transform: rotate(-2deg); }
.cp-badge::before, .cp-badge::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--neon); }
.cp-badge::before { left: -14px; top: 30%; }
.cp-badge::after { right: -12px; bottom: 12%; width: 6px; height: 6px; }
.cp-badge b { color: #fff; font-size: 24px; font-weight: 900; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cp-badge.is-busy b { font-size: 20px; letter-spacing: .04em; }
.cp-badge.is-miss { background: #3a3a3e; box-shadow: 0 0 0 4px #1d1d1f, 0 6px 14px rgba(0, 0, 0, .5); animation: cp-badge-in .3s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes cp-badge-in { from { opacity: 0; transform: rotate(-2deg) scale(.8); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }
.cp-badge.is-miss::before, .cp-badge.is-miss::after { background: #5a5a60; }
.cp-badge.is-miss b { color: #f0f0f0; font-size: 20px; }
.cp-badge .cp-loss { color: var(--bad); font-style: normal; font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 下注金额:− 数字 +、底下五颗快捷金额(稿 B) */
.cp-box { display: grid; gap: 8px; padding: 10px 12px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cp-row { display: flex; align-items: stretch; gap: 10px; }
.cp-step { flex: none; display: grid; place-items: center; width: 54px; min-height: 44px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-size: 26px; font-weight: 600; }
.cp-step:disabled { opacity: .35; }
.cp-field { flex: 1; min-width: 0; display: grid; place-items: center; min-height: 44px; cursor: text; }
.cp-in { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; max-width: 100%; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 框的宽由 cups.js 照字数写(几个 ch):「RM」紧贴着数字,一起置中 */
.cp-in input { width: 5ch; min-width: 0; max-width: 10ch; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: center; outline: none; -webkit-user-select: text; user-select: text; }
.cp-in input:disabled { color: var(--ink-2); opacity: 1; -webkit-text-fill-color: var(--ink-2); }
.cp-unit { font-size: .9em; }
.cp-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cp-qbtn { min-width: 0; min-height: 34px; padding: 0 2px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-qbtn.is-on { background: var(--neon); color: var(--neon-ink); }
.cp-qbtn:disabled { opacity: .35; }
.cp-qbtn.is-on:disabled { opacity: .7; }

/* 柠檬大键:「开始洗杯」/「再来一局」;洗杯中、掀杯中灰掉(稿 S2);等你点杯时锁住但不暗,写「选一个杯」、柠檬框空心(是提示不是坏掉) */
.cp-go { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 12px; border-radius: 999px; background: var(--neon); color: var(--neon-ink); font-size: 21px; font-weight: 900; letter-spacing: .06em; line-height: 1.15; box-shadow: 0 0 22px rgba(229, 255, 61, .3); }
.cp-go:active:not(:disabled) { transform: scale(.98); }
.cp-go:disabled { opacity: .45; }
.cp-go.is-prompt:disabled { opacity: 1; background: rgba(229, 255, 61, .08); color: var(--neon); box-shadow: inset 0 0 0 2px var(--neon); }

.cp-hint { min-height: 22px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* 规则卡在 .cups 外面(弹层):两种押法的倍数、注额的范围和单局最高派彩 */
.sim-table.cp-rules-table { width: 100%; table-layout: fixed; font-size: 13px; margin-top: 10px; }
.cp-rules-table td { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* 矮屏幕(iPhone SE、Telegram 半屏):收间距和按钮高度,主画面留够地方(375×667 也整页放得下,不裁「开始洗杯」) */
@media (max-height: 740px) {
  .cp-hero { min-height: 170px; }
  .cp-top { min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
  .cp-panel { gap: 7px; padding-top: 8px; }
  .cp-mode { min-height: 34px; font-size: 15px; }
  .cp-pick { min-height: 62px; } .cp-pick-cup { height: 48px; } .cp-pick-no { width: 26px; height: 26px; font-size: 15px; }
  .cp-badgerow { min-height: 40px; } .cp-badge b { font-size: 21px; }
  .cp-box { gap: 6px; padding: 8px 10px; }
  .cp-step, .cp-field { min-height: 40px; } .cp-step { width: 50px; }
  .cp-in { font-size: 20px; }
  .cp-qbtn { min-height: 32px; }
  .cp-go { min-height: 50px; font-size: 19px; }
  .cp-hint { min-height: 20px; }
}
/* 更矮的(360×640 这种):杯子按钮、格子再压,保证「开始洗杯」整颗看得到 */
@media (max-height: 660px) {
  .cp-hero { min-height: 140px; }
  .cp-panel { gap: 6px; padding-top: 6px; }
  .cp-modes { padding: 3px; } .cp-mode { min-height: 32px; font-size: 14px; }
  .cp-pick { min-height: 54px; } .cp-pick-cup { height: 42px; } .cp-pick-no { width: 24px; height: 24px; font-size: 14px; }
  .cp-badgerow { min-height: 36px; } .cp-badge { padding: 3px 20px 4px; } .cp-badge b { font-size: 19px; } .cp-badge.is-miss b { font-size: 17px; }
  .cp-box { gap: 5px; padding: 6px 10px; }
  .cp-step, .cp-field { min-height: 36px; } .cp-step { width: 46px; font-size: 22px; }
  .cp-in { font-size: 18px; }
  .cp-qbtn { min-height: 30px; font-size: 14px; }
  .cp-go { min-height: 46px; font-size: 18px; }
  .cp-hint { min-height: 18px; }
  .cp-card-big { font-size: clamp(16px, 5vw, 22px); } .cp-card-amt { font-size: clamp(16px, 5.2vw, 24px); }
}
/* 再矮的(360×513:Telegram 半屏、小安卓):主画面最矮降到 110px、面板每样再收一点,「开始洗杯」和底下那行提示整颗看得到;
 * 主画面只剩一百多 px,结果卡往上提、字缩一档 */
@media (max-height: 560px) {
  .cp-hero { min-height: 110px; }
  .cp-top { min-height: 44px; padding-top: 2px; padding-bottom: 2px; }
  .cp-panel { gap: 5px; padding-top: 4px; }
  .cp-mode { min-height: 30px; }
  .cp-pick { min-height: 48px; } .cp-pick-cup { height: 36px; } .cp-pick-no { width: 22px; height: 22px; font-size: 13px; }
  .cp-badgerow { min-height: 32px; } .cp-badge b { font-size: 17px; } .cp-badge.is-miss b { font-size: 15px; } .cp-badge .cp-loss { font-size: 13px; }
  .cp-box { gap: 4px; padding: 5px 10px; }
  .cp-step, .cp-field { min-height: 34px; }
  .cp-in { font-size: 17px; }
  .cp-qbtn { min-height: 28px; }
  .cp-go { min-height: 44px; font-size: 17px; }
  .cp-hint { min-height: 16px; }
  .cp-cardwrap { padding-top: 8%; }
  .cp-card { padding: 5px 14px 7px; }
  .cp-card-big { font-size: clamp(14px, 4.4vw, 18px); } .cp-card-amt { font-size: clamp(15px, 4.8vw, 20px); }
}

/* 手机开了「减少动态效果」:猴子晃 / 弹、换位、拖影闪、停住抖一下、点完杯等掀那一下晃(cups.js 本来就不挂;筹码声、震动照样有)、掀杯、柠檬框一明一暗、球的光、卡片弹出都是装饰,全关(结果照样看得清:
 * 掀起来的杯子、球的光都写在静态里;cups.js 这时也不洗杯,模糊不会挂上)。选择器要跟挂动画的那条一字不差(一样重),不然压不过 */
@media (prefers-reduced-motion: reduce) {
  .cp-monkey.is-idle, .cp-monkey.is-pop, .cp-cup.is-swap, .cp-cup.is-blur::before, .cp-cup.is-jolt .cp-cup-img, .cp-cup.is-up .cp-cup-img, .cp-cup.is-ready .cp-cup-img, .cp-cup.is-up.is-ready .cp-cup-img, .cp-cup.is-pickable::after, .cp-ball.is-glow .cp-ball-glow, .cp-card, .cp-pick.is-pickable::before, .cp-badge.is-miss { animation: none; }
}