/* 色碟 —— 越南水上夜市(设计稿 output/小游戏市场调研/色碟设计/B.png 下注中、out/S2-摇碗、S3-开碗、S4-赢了)
 * 图片只有角色和币:开碗画面三张(水獭捧着碟、青花碗扣着 / 扣在桌上 / 碗直直提起)、红白两面的币;
 * 格子、格子里的红白小圆点、最近几局、筹码、按钮、倒数圈、横幅、彩带全是 CSS(design/dark-neon/README.md 第 6 节)。
 * 版面(竖屏)照鱼虾蟹:顶栏 / 画面区(最高 4:3,高度 = 页面减掉下面那一块要的,所以一屏放得下)/ 下面一块:倒数圈 + 状态和最近几局并成一行、
 * 押法格子(上面两大格双 / 单,下面五小格)、筹码、三颗按钮、在线人数;本局赢家在最下面(结算才出来,往下卷看)。画面再矮(不到 150px)下面那块才卷。
 * 黑底面板、柠檬黄只用在选中、主按钮、中奖格和要强调的那一个数;画面区外面和格子底下是夜市灯笼那种暖棕(鱼虾蟹是深海蓝黑)。
 * 页面的 JS 跟鱼虾蟹共用(public/bowl-page.js),class 名字照它的写法,前缀 xd-;开出来的那几样沿用 is-dice-in / is-dice-on 两个状态名。
 * 动画只动 transform / opacity(币揭开那一下照设计用 clip-path),关了动态效果的手机全部换成落定那一格。
 */
.xocdia {
  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) + 6px);
  --bg: #0a0a0a; --surface: #141312; --surface-2: #1c1a17; --line: #2a2622;
  --ink: #fff; --ink-2: #938b84; --ink-3: #625b55; --neon: #e5ff3d; --neon-ink: #0a0a0a; --bad: #ff5a5a;
  --river: #0b0706;
  --red: #e3262b; --red-hi: #ff7a66; --red-lo: #96100f; --white: #f4f1ea; --white-lo: #a8a39b;
  --amber: #f2c46d; /* 格子里常驻的倍数:灯笼的暖黄,跟柠檬黄(选中 / 中奖)、白字(名字)、灰字(合计)都分得开 */
  /* 画面区以下那一块要多高(顶栏 60 + 倒数那行 52 + 两排格子 + 筹码 56 + 按钮 52 + 在线人数 32 + 间距):
     上面两大格一排(半宽)、下面五小格一排(五分之一宽,10-27 加了两红两白),高度照里面那几样算(不再跟着宽度算:五小格窄,照宽度算会太矮)。
     大格最矮要放得下里面那几样:上边 13(右上角的角标 / 锁头往格子里伸 12px,名字要从它下面开始)+ 名字一行(字号 × 行高)
     + 间距 7 + 小圆点那一行 15(倍数跟小圆点并排,不另占一行)+ 下边 24(底下那条合计)= 59px + 名字那一行;字号、行高写成变量,跟 .xd-big .xd-cell-name 同一个数,改一处两边一起变
     (10-25 以前大格最矮 76px:360–390 宽放不下,名字被挤扁,「Genap」的 p、「Ganjil」的 j、泰文 / 孟加拉顶上的符号被裁掉)。
     中文小格:上边 17(左上角挂着倍数,见 .xd-cell:not(.xd-big) .xd-pay)+ 名字一行 + 间距 5 + 小圆点 11 + 下边 22 = 55px + 名字那一行(最矮 80px)。
     10-27 第一版倍数在大格、小格都单独占一行:大格多 22px、小格多 4px(中文)到 17px(外语),375×600、360×590 的「确认下注」被挤到第一屏外面;
     现在跟加倍数之前一样高。宽度照 player-layout.css 的上限(最宽 520px)。改了下面任何一块的高度,这里要跟着改 */
  --xd-w: min(100vw, var(--app-max-width, 520px));
  --xd-pad: 16px;
  --xd-big-fs: clamp(24px, 7.4vw, 30px);
  --xd-big-lh: 1.15;
  --xd-big-h: max(calc(var(--xd-big-fs) * var(--xd-big-lh) + 59px), calc((var(--xd-w) - 2 * var(--xd-pad) - 8px) / 4.2));
  /* 小格名字的字号:五小格一格只有 61px(360 宽)到 73px(430 宽),四个中文字要放得下(四小格那时的 clamp(13px, 3.7vw, 16px) 放到五小格,390 宽「三红一白」会出省略号) */
  --xd-sm-fs: clamp(12px, 3.3vw, 15px);
  --xd-sm-lh: 1.15;
  --xd-small-h: max(80px, calc(var(--xd-sm-fs) * var(--xd-sm-lh) + 55px));
  --xd-below: calc(302px + var(--xd-big-h) + var(--xd-small-h) + 8px);
  --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;
}
/* 中文以外的小格名字折两行(见下面 .xd-cell-name),两行塞满整格、没有空可以上下居中:小格最矮 = 上边 17 + 两行名字 + 间距 5 + 小圆点 11 + 下边 22
   = 55px + 两行,字号同那一条(clamp(11px, 3.3vw, 14px))。上边留 17px:左上角挂着倍数(到 14px),右上角的锁头 / 「×倍数」角标往格子里伸 12px,
   越南文叠在一起的两个声调符号会高出行高 2px 多,都碰不到。
   缅甸文上下都高(上面的元音、下面的元音 / 字脚):行高放宽一点,大格的字小一号(缅甸字本来就大)。
   375×600、360×590(iPhone SE 在 Telegram 里)中英缅泰「确认下注」都在第一屏;360×640、375×667 连最底下的在线人数也看得到 */
html:not([lang^="zh"]) .xocdia {
  --xd-sm-fs: clamp(11px, 3.3vw, 14px);
  --xd-sm-lh: 1.15;
  --xd-small-h: max(80px, calc(var(--xd-sm-fs) * var(--xd-sm-lh) * 2 + 55px));
}
html[lang="my"] .xocdia { --xd-big-fs: clamp(22px, 6.6vw, 28px); --xd-big-lh: 1.25; --xd-sm-lh: 1.25; }
.xocdia[hidden] { display: none; }
.xocdia :where(p, h2, h3, ul) { margin: 0; }
/* 用 :where 把重置的权重压到 0:后面单个 class 的按钮样式才盖得过它(button 的 background:none 会吃掉底色) */
.xocdia :where(button) { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.xocdia button:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.xocdia img, .xocdia video { -webkit-user-drag: none; pointer-events: none; }
/* 按钮里面的字、金额、小圆点一律点不到:按下、松手、click 都落在按钮本身。别人一押,格子里的总下注就改字,
   金额还会被 PA 金币那层换成新的 <span>+<img>;按在上面的话,松手时按下去的那个元素已经没了,浏览器不发 click(10-16 冲天鹰同一个毛病) */
.xocdia button > *, .xocdia button * { pointer-events: none; }

/* ---------- 顶栏 ---------- */
.xd-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.xd-back, .xd-help { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.xd-back svg, .xd-help svg { width: 22px; height: 22px; }
.xd-help { color: var(--ink-2); font-weight: 700; border-radius: 50%; }
.xd-title { flex: 1; min-width: 0; text-align: center; font-size: 24px; font-weight: 900; letter-spacing: .08em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 中文以外标题是「Xoc Dia」「Xóc Đĩa」,泰文 / 孟加拉 / 缅甸是音译:字照屏宽缩、可以折成两行(i18n.js 切语言时把 <html lang> 设成那个语言) */
html:not([lang^="zh"]) .xd-title { font-size: clamp(14px, 4.2vw, 19px); letter-spacing: 0; line-height: 1.08; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* 两行截断要 overflow:hidden,会切掉超出 1.08 行高的符号(泰文 ซ็ 的 ็、น้ำ 的 ้,越南文大写 Ĩ):裁切框上面放宽 .32em、下面 .12em,
   负 margin 收回来,字的位置、顶栏高度不变(同鱼虾蟹 .hh-title,10-31 泰文宣传片录到鱼虾蟹顶栏「นำเต้าปูปลา」) */
html:not([lang^="zh"]) .xd-title { padding: .32em 0 .12em; margin: -.32em 0 -.12em; }
html:not([lang^="zh"]) .xd-top:has(.xd-dep:not([hidden])) .xd-title { font-size: 13px; }
.xd-bal { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 9px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 小「充值」(照冲天鹰):余额不够那几秒才亮,亮的时候余额让一点位子 */
.xd-dep { flex: none; min-height: 44px; padding: 0 10px; border-radius: 999px; background: var(--neon); color: var(--neon-ink); font-size: 13px; font-weight: 800; white-space: nowrap; }
.xd-dep[hidden] { display: none; }
.xd-top:has(.xd-dep:not([hidden])) .xd-bal { max-width: 32%; padding-inline: 10px; }
.xd-top.xd-has-music { gap: 6px; }
.xd-top.xd-has-music .xd-title { font-size: 20px; }
.xd-top.xd-has-music .xd-bal { padding-inline: 10px; flex-shrink: 1; min-width: 0; }
html:not([lang^="zh"]) .xd-top.xd-has-music .xd-title { font-size: clamp(12px, 3.6vw, 16px); }
@media (max-width: 380px) { .xd-top { gap: 6px; padding-inline: 12px; } .xd-title { font-size: 20px; } .xd-bal { padding: 8px 10px; font-size: 13px; } }

/* ---------- 画面区 ----------
 * 高度 = 页面高度减掉下面那一块要的(--xd-below):倒数、六个押法、筹码、「确认下注」一屏全看得到,不用往下卷;
 * 最高 4:3(整张图都露出来),最矮 150px。不认 clamp 的旧浏览器退回 36vh。
 * 三张图和四枚币放在一块正好 4:3 的 .xd-art 里(币的百分比位置跟图对得上),画面矮了整块裁掉一点,不变形、币不跑位。
 * 裁的时候上面裁七成、下面裁三成:碟子和币在偏下的地方(币底边约 72%),要留在画面里、不被底下那层渐变压暗 */
.xd-hero { position: relative; flex: none; width: 100%; height: 36vh; height: clamp(150px, calc(100% - var(--xd-below)), calc(var(--xd-w) * .75)); overflow: hidden; background: var(--river); }
.xd-art { position: absolute; left: 0; right: 0; top: 70%; aspect-ratio: 4 / 3; transform: translateY(-70%); }
.xd-rig { position: absolute; inset: 0; transform-origin: 48% 68%; }
.xd-frame, .xd-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.xd-hero.is-idle .xd-frame[data-frame="idle"],
.xd-hero.is-closed .xd-frame[data-frame="closed"],
.xd-hero.is-lifted .xd-frame[data-frame="lifted"] { opacity: 1; }
/* 影片在播(XOCDIA_CLIPS,准备好了才用):三张图收起来,只亮那一支(收注 idle、开碗 4 秒前 shake、4 秒后 lift) */
.xd-hero.is-clip .xd-frame { opacity: 0; }
.xd-hero.is-clip-idle .xd-clip[data-clip="idle"], .xd-hero.is-clip-shake .xd-clip[data-clip="shake"], .xd-hero.is-clip-lift .xd-clip[data-clip="lift"] { opacity: 1; }
.xd-hero.is-missing .xd-art { opacity: .25; }
/* 下边淡进页面的黑,跟下面那一块接上。叠的顺序:图 < 这层渐变 < 彩带 < 横幅 / 我的结果 < 白闪 */
.xd-hero::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(to bottom, rgba(10, 10, 10, 0), var(--bg)); pointer-events: none; }

/* 收注中:水獭捧着碟轻轻呼吸(4 秒一圈) */
.xd-hero.is-breathe .xd-rig { animation: xd-breathe 4s ease-in-out infinite; }
@keyframes xd-breathe { 50% { transform: scale(1.012); } }
/* 摇碗:左右快抖,幅度要看得出来在摇 */
.xd-hero.is-shake .xd-rig { animation: xd-shake .18s linear infinite; }
@keyframes xd-shake {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(-2.6%, -.6%, 0) rotate(-1.6deg); }
  50% { transform: translate3d(0, .4%, 0) rotate(0deg); }
  75% { transform: translate3d(2.6%, -.6%, 0) rotate(1.6deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
/* 扣到桌上那一下:整块画面往下一顿再弹回来(震屏)+ 白闪 120ms。--jd / --fd 是负的延迟:中途进来接着演完 */
.xd-hero.is-jolt .xd-art { animation: xd-jolt .32s cubic-bezier(.2, .8, .3, 1) var(--jd, 0ms) both; }
@keyframes xd-jolt {
  0% { transform: translateY(-70%); }
  22% { transform: translateY(-66.5%) scale(1.02); }
  55% { transform: translateY(-71.2%); }
  100% { transform: translateY(-70%); }
}
.xd-flash { position: absolute; z-index: 4; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.xd-hero.is-flash .xd-flash { animation: xd-flash .12s linear var(--fd, 0ms) both; }
@keyframes xd-flash { from { opacity: .85; } to { opacity: 0; } }
/* 扣下之后到揭碗:画面慢慢推近一点(提起来之后停在推近的那一格,到下一局换回 idle 时一起复原) */
.xd-hero.is-tense .xd-rig { animation: xd-tense 1.2s ease-in var(--td, 0ms) both; }
@keyframes xd-tense { from { transform: scale(1); } to { transform: scale(1.035); } }
.xd-hero.is-lifted .xd-rig { transform: scale(1.035); }
.xd-hero.is-clip .xd-rig { transform: none; }

/* 四枚币:本来就在碟子上(碗底下),掀碗那一刻由下往上揭开。位置照 COIN_SPOT,对的是 10-26 的 hero-lifted(= 掀碗影片最后一格,碟子跟 hero-closed / 影片同一个位置):
   碟子外缘 x 32.4–65.5%、亮面前缘(再往下是碟子的前沿)中间 72.4%、到 x 41% / 57% 收到 72%。四枚中心 x 41.05% / 46.35% / 51.65% / 56.95%(以碟子中心 49% 排开),
   底边 71.6%(中间两枚往下 0.4% 成浅弧,跟着前缘的弯;--b 是从下往上量的 28.4% / 28%),每枚宽 5.5%:底边都在亮面前缘上面 3px 以上,不压到碟子前沿 */
.xd-dice { position: absolute; inset: 0; opacity: 0; }
.xd-hero.is-dice-in .xd-dice, .xd-hero.is-dice-on .xd-dice { opacity: 1; }
.xd-coin { position: absolute; left: calc(var(--x) - 2.75%); bottom: var(--b, 28.4%); width: 5.5%; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
/* 三张图:提起来那一刻由下往上揭 0.35 秒(--du,bowl-page.js 给) */
.xd-hero.is-dice-in .xd-coin { animation: xd-uncover var(--du, .35s) cubic-bezier(.2, .8, .3, 1) var(--dd, 0ms) both; }
/* 掀碗影片在播(bowl-page.js 挂 is-dice-step):不演动画,露几成照影片画到的那一格查 XOCDIA_CLIPS.uncoverSteps(--rv,第 24、25 格 45%、第 26 格 75%)。
   影片一格在屏幕上停 42ms,这一格里碗没动,按真实时间走的揭开线会在这一格里越过碗沿(币顶画到碗前面);关了动态效果也照这张表,币不会整枚先冒出来 */
.xd-hero.is-dice-in.is-dice-step .xd-coin { animation: none; clip-path: inset(calc(100% - var(--rv, 0%)) 0 0 0); }
@keyframes xd-uncover { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
/* 揭开那一下碟子上泛一圈柠檬光,慢慢退成淡淡的一层。揭开 0.35 秒以后 class 从 is-dice-in 换成 is-dice-on,光要接着演完 1.2 秒:
   两个 class 挂同一个动画(名字不变就不会重来),延迟用 --gd(这一局第一次露出来时定一次,之后不改) */
.xd-glow { position: absolute; left: 36%; width: 26%; bottom: 25%; aspect-ratio: 2.6 / 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(229, 255, 61, .55), rgba(229, 255, 61, 0)); opacity: .35; }
.xd-hero.is-dice-in .xd-glow, .xd-hero.is-dice-on .xd-glow { animation: xd-glow 1.2s ease-out var(--gd, 0ms) both; }
@keyframes xd-glow { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.08); } 100% { opacity: .35; transform: scale(1); } }

/* 「停止下注」:柠檬色刷子横幅,斜着盖在画面中间偏下(封盘那一下出来,摇到第 1.4 秒收掉) */
.xd-stamp { position: absolute; z-index: 3; left: 50%; top: 66%; display: none; transform: translate(-50%, -50%); pointer-events: none; }
.xd-stamp b {
  display: block; padding: 8px 34px 10px; background: var(--neon); color: var(--neon-ink);
  font-size: clamp(22px, 7.4vw, 34px); font-weight: 900; letter-spacing: .06em; white-space: nowrap;
  clip-path: polygon(3% 12%, 18% 0, 46% 8%, 72% 0, 97% 10%, 100% 52%, 96% 92%, 70% 100%, 40% 91%, 14% 100%, 0 84%, 2% 46%);
  transform: rotate(-6deg);
}
.xd-hero.is-stamp .xd-stamp { display: block; animation: xd-stamp .28s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes xd-stamp { from { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* 结果画面上我的结果:赢了是黑色刷子底 + 柠檬「赢了」+ 白色大字金额;没中只在下方安静地写一行 */
.xd-res {
  position: absolute; z-index: 3; left: 50%; bottom: 9%; transform: translateX(-50%); max-width: calc(100% - 32px);
  display: grid; justify-items: center; gap: 2px; padding: 8px 20px; border-radius: 16px;
  background: rgba(10, 10, 10, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none;
  animation: xd-rise .28s ease-out both;
}
.xd-res[hidden] { display: none; }
.xd-res b { font-size: 22px; line-height: 1.1; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xd-res .xd-lost, .xd-res .xd-got { font-size: 17px; color: var(--ink); }
.xd-res small { font-size: 15px; font-variant-numeric: tabular-nums; }
/* 输掉的钱「−RM x」:红字(没押中那行在小字的位置;押中但不够本的在大字的位置) */
.xd-res .xd-loss { font-weight: 800; color: var(--bad); }
.xd-res.is-win {
  bottom: 14%; padding: 10px 34px 12px; border-radius: 0; background: #050505;
  box-shadow: 0 0 0 2px rgba(229, 255, 61, .55), 0 0 28px rgba(229, 255, 61, .25);
  clip-path: polygon(2% 10%, 30% 0, 66% 6%, 98% 0, 100% 46%, 97% 94%, 64% 100%, 30% 93%, 0 100%, 1% 50%);
  animation: xd-win .42s cubic-bezier(.2, .9, .3, 1.2) both;
}
.xd-res .xd-won-l { font-size: clamp(30px, 10vw, 46px); color: var(--neon); letter-spacing: .08em; }
.xd-res .xd-won { font-size: clamp(28px, 9vw, 42px); color: #fff; }
@keyframes xd-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes xd-win { from { opacity: 0; transform: translateX(-50%) scale(.6) rotate(-4deg); } to { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); } }
/* 彩带:净赢的时候从画面上方撒下来(14 条,--i 错开;柠檬、白、灯笼红) */
.xd-confetti { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.xd-confetti[hidden] { display: none; }
.xd-confetti i {
  position: absolute; top: -8%; left: calc(4% + var(--i) * 6.7%); width: 7px; height: 14px; border-radius: 2px;
  background: var(--neon); opacity: 0;
  animation: xd-fall 1.6s cubic-bezier(.3, .1, .6, 1) calc(var(--i) * 70ms) both;
}
.xd-confetti i:nth-child(3n) { background: #fff; width: 5px; }
.xd-confetti i:nth-child(4n) { background: var(--red); height: 10px; }
@keyframes xd-fall { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(820%) rotate(540deg); } }

/* 读屏用的那一句,画面上看不到 */
.xd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 下面那一块(可以卷) ---------- */
.xd-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; padding: 6px var(--xd-pad) 8px; scrollbar-width: none; }
.xd-body::-webkit-scrollbar { display: none; }

/* 倒数圈 + 状态字(左)和最近几局(右)并成一行(52px):收注那 20 秒倒数一直在第一屏,省下来的高度让筹码和按钮也留在第一屏 */
.xd-strip { flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; }
/* 最近几局:一局一排四个红白小圆点,最新的在最左边、描柠檬边;多了往右横着卷,右边淡出 */
.xd-recent {
  flex: 1 1 0; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent);
}
.xd-recent::-webkit-scrollbar { display: none; }
.xd-recent:empty { display: none; } /* 还没有开完的局(新开服、刚上线):不留一块空白,倒数那块照旧靠左 */
.xd-rc { flex: none; display: flex; align-items: center; gap: 3px; padding: 7px 9px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.xd-rc .xd-dot { width: 9px; height: 9px; }
.xd-rc.is-new { box-shadow: inset 0 0 0 1.5px var(--neon); }

/* 红白小圆点(格子里、最近几局):白是象牙白,红是灯笼红,都带一点高光,像设计稿上的币 */
.xd-dot { display: block; flex: none; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--white) 45%, var(--white-lo) 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.xd-dot.is-red { background: radial-gradient(circle at 35% 30%, var(--red-hi) 0%, var(--red) 50%, var(--red-lo) 100%); }

/* 倒数圈 + 状态字:只占自己要的宽度(最多六成),剩下的给最近几局 */
.xd-status { flex: none; max-width: 60%; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 14px 4px 4px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
/* 没有倒数圈的那几种(马上开始 / 取消 / 暂停):字比较长,整行给它 */
.xd-status.is-void, .xd-status.is-paused, .xd-status.is-wait { flex: 1 1 auto; max-width: none; padding-left: 14px; }
.xd-ring { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.xd-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.xd-ring circle { fill: none; stroke-width: 3.5; }
.xd-ring-bg { stroke: #2d2924; }
/* 倒数圈跟数字一起整秒走一格,不带过渡:以前每 250ms 改一次、带 0.25 秒过渡,等于一直在过渡,低端机主线程每一帧都重算样式 */
.xd-ring-fg { stroke: var(--neon); stroke-linecap: round; }
.xd-ring b { position: relative; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.xd-state { min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: .03em; line-height: 1.15; overflow-wrap: anywhere; }
.xd-status.is-stop .xd-state, .xd-status.is-shake .xd-state, .xd-status.is-open .xd-state { color: var(--neon); }
.xd-status.is-flip .xd-state, .xd-status.is-wait .xd-state, .xd-status.is-void .xd-state, .xd-status.is-paused .xd-state { color: var(--ink-2); font-size: 14px; }
.xd-status.is-void .xd-ring, .xd-status.is-paused .xd-ring, .xd-status.is-wait .xd-ring { display: none; }
/* 外语状态字长(Đã ngừng đặt cược、Mangkuk sedang dibuka):字照屏宽缩、这块最多用到六成六,一般一行放得下(10-31 越南文宣传片录到折成两行);
   真的放不下照旧折两行。换局 / 暂停那几种自己的 14px 不受影响(选择器比较重) */
html:not([lang^="zh"]) .xd-status { max-width: 66%; }
html:not([lang^="zh"]) .xd-state { font-size: clamp(13px, 3.9vw, 17px); letter-spacing: 0; }

/* 七个押法:十栏的格子,上面「双」「单」各占五栏(大格),下面五小格各占两栏(10-27 加了两红两白,以前四栏、四小格),
   小格照红的个数排:四红、三红一白、两红两白、三白一红、四白(public/xocdia.js 的 LAYOUT,跟格子 id 的索引无关)。
   每格中间是名字 + 一排四个红白小圆点,还有这一格拿回几倍(常驻,下注时就看得到:大格跟小圆点并排,小格挂在左上角),最下面一行全场合计「RM x」;
   我押的筹码大格压在右上角、小格放在底下合计那条的位置(草稿是虚线圈),中了亮柠檬框 + 「×倍数」角标(这时常驻的倍数藏起来,不重复成两个 ×),没中的暗下来,封盘后上锁。
   角标、锁头都挂在格子的右上角(一半露在格子外,落在格子之间的空隙里;大格中了我押的筹码挪到左上角):360 宽时小格只有 61px,
   放在格子里面会压住「三红一白」。挂在角上的往格子里伸 12px,所以大格上边留 13px、小格留 17px(小格左上角还挂着倍数),名字从它下面开始,左右两个角都碰不到字 */
.xd-board { flex: none; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: var(--xd-big-h) var(--xd-small-h); gap: 8px; }
.xd-cell {
  position: relative; min-width: 0; min-height: 0; grid-column: span 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 13px 4px 22px;
  border-radius: 16px; background: radial-gradient(120% 90% at 50% 100%, #24150b 0%, var(--surface) 72%); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .09s ease-out, opacity .2s ease-out;
}
/* 大格:名字自己占一行,底下小圆点和倍数并成一行(折行排,名字那一块撑满一行);倍数单独一行的话大格多 22px,矮屏「确认下注」会被挤出第一屏(10-27 复查) */
.xd-cell.xd-big { grid-column: span 5; padding-bottom: 24px; flex-flow: row wrap; align-content: center; column-gap: 10px; }
/* 小格(五个一排):上边留 17px(左上角挂倍数),名字和小圆点之间收到 5px */
.xd-cell:not(.xd-big) { gap: 5px; padding-top: 17px; }
/* 名字:flex: none —— 格子挤的时候不准把名字压扁(压扁了 overflow:hidden 就把字的上下裁掉)。
   要 overflow:hidden 才有省略号,可是它也会裁掉超出行高的笔画:马来文的 p / j / g 往下伸、泰文 / 孟加拉 / 越南文的符号往上伸、缅甸文上下都伸。
   所以裁切框上下各放宽 .35em、左右各放宽 .2em(孟加拉的 ি 往左伸、泰文 / 孟加拉最后一笔往右伸):padding 撑开、负 margin 收回来,
   排版的高度、宽度还是原来那样(max-width 跟着加回 .4em),真的太长才在左右出省略号 */
.xd-cell-name { flex: none; max-width: calc(100% + .4em); padding: .35em .2em; margin: -.35em -.2em; font-size: var(--xd-sm-fs); font-weight: 900; line-height: var(--xd-sm-lh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.xd-big .xd-cell-name { font-size: var(--xd-big-fs); line-height: var(--xd-big-lh); letter-spacing: .04em; flex-basis: calc(100% + .4em); text-align: center; }
/* 中文以外的小格名字(「3 red 1 white」「3 đỏ 1 trắng」「အနီ 3 အဖြူ 1」)360–430 宽一行放不下,被省略号切掉的后半截正是区分两格的地方:
   折成两行(cellName 把前后两半各自连成一块,只在中间折),字照屏宽缩一点;五小格一样大。小格高度照两行算(见上面 --xd-small-h) */
html:not([lang^="zh"]) .xd-cell:not(.xd-big) .xd-cell-name {
  font-size: clamp(11px, 3.3vw, 14px); line-height: var(--xd-sm-lh); text-align: center; white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.xd-dots { display: flex; align-items: center; gap: 3px; }
.xd-big .xd-dots { gap: 6px; }
.xd-big .xd-dot { width: 15px; height: 15px; }
/* 这一格拿回几倍(常驻,照这一局的设定):一行、不折、不缩;中了的格子右上角的「×倍数」角标写同一个数,这里藏起来(只藏不拿掉,格子里的东西不跳)。
   大格:跟小圆点并排,一样高(15px),不多占一行。
   小格:挂在左上角、格子上边留的那 17px 里 —— 五小格一格只有 61–73px 宽,小圆点那排放不下倍数,单独一行外语小格又多 17px。
   小格右上角只剩锁头(封盘,碰不到「×3.75」)和中奖的「×倍数」角标(那时这里藏起来);我押的筹码在底下(见 .xd-badge 那几条) */
.xd-pay {
  flex: none; display: block; font-style: normal; font-size: 13px; line-height: 15px; height: 15px; font-weight: 900; color: var(--amber);
  font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.xd-cell:not(.xd-big) .xd-pay { position: absolute; top: 2px; left: 5px; font-size: 10px; line-height: 12px; height: 12px; letter-spacing: 0; }
.xd-cell.is-win .xd-pay { visibility: hidden; }
.xd-cell-sum {
  position: absolute; z-index: 1; left: 50%; bottom: 4px; transform: translateX(-50%); width: calc(100% - 12px); max-width: 220px; padding: 0 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); font-size: clamp(10px, 2.9vw, 12px); line-height: 16px; text-align: center; color: var(--ink-2); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.xd-big .xd-cell-sum { line-height: 18px; color: var(--ink); }
/* 我押的:柠檬色小筹码挂在右上角(小格挂在底下,见下面);还在草稿里的(没确认)是黑底虚线圈 */
.xd-badge {
  position: absolute; top: -12px; right: -6px; z-index: 2; min-width: 26px; height: 24px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--neon); color: var(--neon-ink); font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #0a0a0a, 0 2px 6px rgba(0, 0, 0, .6);
}
.xd-badge[hidden] { display: none; }
.xd-cell.is-draft .xd-badge { background: #0a0a0a; color: var(--neon); box-shadow: inset 0 0 0 2px var(--neon); outline: 1.5px dashed rgba(229, 255, 61, .7); outline-offset: 2px; }
/* 单送出去、回包还没到(按确认那一刻就挂上):这张单的角标一明一暗(循环,慢网络等多久都在动;回包快的话第一格就是原样,不会闪一下) */
.xd-cell.is-pend .xd-badge { opacity: .6; animation: xd-pend .7s ease-in-out infinite alternate; }
@keyframes xd-pend { from { opacity: 1; } to { opacity: .45; } }
/* 大格中了:右上角让给「×倍数」,我押的筹码挪到左上角(两个都看得到;小格的筹码本来就在底下) */
.xd-cell.is-win .xd-badge { right: auto; left: -6px; }
/* 小格:我押的筹码一直放在格子底下合计那条的位置,我押了的格子合计让位(中了也一样,照鱼虾蟹:结果画面那几秒,我中了的那格先看我押的)。
   五小格一格只有 61–73px 宽、左上角挂着倍数:筹码挂右上角的话押到三位数(「100」「2.5K」,草稿再加一圈虚线)就压住「×3.75」(10-27 复查实测),
   中了的时候左上角的筹码也会跟右上角的「×2.50」撞在一起。高 18px、贴底:草稿的虚线圈(往外 3.5px)也碰不到上面的小圆点(格子下边留 22px) */
.xd-cell:not(.xd-big) .xd-badge { top: auto; bottom: 0; right: auto; left: 50%; transform: translateX(-50%); height: 18px; }
.xd-cell.is-on:not(.xd-big) .xd-cell-sum { visibility: hidden; }
.xd-cell.is-on { box-shadow: inset 0 0 0 2px var(--neon); }
.xd-cell.is-draft { box-shadow: inset 0 0 0 1.5px rgba(229, 255, 61, .55); }
/* 中了:柠檬框 + 柠檬光,右上角「×1.90」这种角标(柠檬底黑字,照设计稿) */
.xd-hit {
  position: absolute; top: -12px; right: -6px; z-index: 3; min-width: 40px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; background: var(--neon); color: var(--neon-ink); font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #0a0a0a, 0 0 12px rgba(229, 255, 61, .55);
  animation: xd-pop .3s cubic-bezier(.2, .9, .3, 1.3) both;
}
.xd-hit[hidden] { display: none; }
.xd-cell.is-win { box-shadow: inset 0 0 0 2.5px var(--neon), 0 0 16px rgba(229, 255, 61, .35); background: radial-gradient(120% 90% at 50% 100%, #26300a 0%, #15180a 72%); }
.xd-cell.is-win .xd-cell-name { color: var(--neon); }
.xd-board.is-result .xd-cell.is-dim { opacity: .35; }
@keyframes xd-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
/* 上锁(不在收注):小圆点褪成灰的,格子暗一点(照设计稿 S2);锁头是一颗深色小圆片,挂在格子右上角 ——
   跟「×倍数」角标、我押的筹码同一个角(上锁和中奖不会同时出现;押了的格子封盘后不挂锁、亮着筹码),往格子里伸 11px,碰不到名字。
   10-25 以前挂在小圆点那一排的右边,压住小格名字最后一个字(「三红一白」的「白」、外语第二行的最后一个字母)。结果画面不锁(要看中了哪几格) */
.xd-lock {
  position: absolute; top: -11px; right: -5px; z-index: 2; display: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2); box-shadow: 0 0 0 2px #0a0a0a, inset 0 0 0 1px var(--line);
}
.xd-lock svg { display: block; width: 100%; height: 100%; }
.xd-cell.is-locked { opacity: .62; }
.xd-cell.is-locked .xd-lock { display: block; }
.xd-cell.is-locked .xd-dot { filter: grayscale(1) brightness(.7); }
.xd-cell.is-locked.is-on .xd-lock { display: none; }
.xd-cell.is-locked.is-on { opacity: 1; }
.xd-cell.is-locked.is-on .xd-dot { filter: none; }
/* 押满了(全场还能收的、个人上限,连最小的筹码都放不进去):小圆点暗下来 */
.xd-cell.is-full .xd-dots, .xd-cell.is-full .xd-pay { opacity: .4; }
.xd-board.is-open .xd-cell:active { transform: scale(.96); }

/* 筹码:六颗圆筹码(虚线圈),选中的柠檬色 */
.xd-chips { flex: none; display: flex; justify-content: space-between; gap: 6px; padding: 4px 10px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.xd-chip {
  position: relative; flex: 0 1 48px; min-width: 44px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 36%, #302c28 0%, #1b1917 74%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .6);
  font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.xd-chip::before {
  content: ''; position: absolute; inset: 2px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #e8e8e8 0 14deg, transparent 14deg 45deg);
  -webkit-mask-image: radial-gradient(circle, transparent 66%, #000 67%);
  mask-image: radial-gradient(circle, transparent 66%, #000 67%);
  opacity: .6;
}
.xd-chip span { position: relative; }
.xd-chip.is-on { background: radial-gradient(circle at 50% 36%, #f2ff8a 0%, var(--neon) 70%); color: var(--neon-ink); box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px var(--neon), 0 0 14px rgba(229, 255, 61, .45); }
.xd-chip.is-on::before { background: repeating-conic-gradient(from 0deg, #0a0a0a 0 14deg, transparent 14deg 45deg); opacity: .5; }
.xd-chip.is-dim { opacity: .4; }
.xd-chip:active { transform: translateY(1px) scale(.94); }

/* 三颗按钮:清除 / 重复(深色)+ 柠檬大键「确认下注 RM x」 */
.xd-acts { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.1fr); gap: 8px; }
.xd-act, .xd-go { min-height: 52px; border-radius: 16px; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
.xd-act { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.xd-go { background: var(--neon); color: var(--neon-ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.xd-go span { display: block; overflow: hidden; text-overflow: ellipsis; }
/* 外语按钮字长(Kosongkan、Sudah bertaruh 200):字照屏宽缩、左边两颗宽一点,确认键可以折两行,不再出省略号(同鱼虾蟹,10-31 马来文宣传片录到) */
html:not([lang^="zh"]) .xd-acts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.8fr); }
html:not([lang^="zh"]) .xd-act, html:not([lang^="zh"]) .xd-go { font-size: clamp(12px, 3.6vw, 15px); padding: 0 6px; }
html:not([lang^="zh"]) .xd-go span { white-space: normal; line-height: 1.12; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.xd-act:disabled, .xd-go:disabled { opacity: .38; }
.xd-go:disabled { background: #3b3835; color: #9d9893; opacity: 1; }
.xd-act:active:not(:disabled), .xd-go:active:not(:disabled) { transform: scale(.97); }
/* 单送出去那一刻(老板 10-26「点了要等一下才有反应」,以前要等 0.3 秒):确认键当场暗一点,被回「手太快」等着自己补送那一小段也暗着,回包到了才亮回来;
   字等 0.15 秒还没回包才换成「发送中…」(bowl-page.js 的 SENDING_TEXT_MS,回包快的不闪一下) */
.xd-acts.xd-wait .xd-go { opacity: .6; }

/* 在线人数 + 本局赢家 */
.xd-foot { flex: none; display: flex; align-items: center; min-height: 32px; }
.xd-online { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 700; }
.xd-online[hidden] { display: none; }
.xd-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px rgba(229, 255, 61, .7); }
.xd-winners { flex: none; padding: 10px 14px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.xd-winners[hidden] { display: none; }
.xd-w-h { font-size: 14px; font-weight: 900; color: var(--neon); text-align: center; }
.xd-w-rows { list-style: none; padding: 0; margin-top: 4px; display: grid; }
.xd-w-rows li { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.xd-w-rows li:last-child { border-bottom: 0; }
.xd-w-n { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xd-w-rows b { font-variant-numeric: tabular-nums; }
.xd-w-rows li:first-child b { color: var(--neon); }

/* 矮屏幕不用另外收:画面区自己让出高度(见 .xd-hero);窄屏左右留白收到 12px(--xd-below 跟着算) */
@media (max-width: 380px) {
  .xocdia { --xd-pad: 12px; }
  .xd-dots { gap: 2px; }
  .xd-dot { width: 10px; height: 10px; }
  .xd-chips { padding-inline: 6px; gap: 4px; }
  .xd-act, .xd-go { font-size: 15px; }
}

/* 关了动态效果:不抖、不呼吸、不闪、不撒彩带;币直接露出来(落定那一格),横幅和结果照样出 */
@media (prefers-reduced-motion: reduce) {
  .xd-hero.is-breathe .xd-rig, .xd-hero.is-shake .xd-rig, .xd-hero.is-jolt .xd-art, .xd-hero.is-flash .xd-flash, .xd-hero.is-tense .xd-rig,
  .xd-hero.is-dice-in .xd-coin, .xd-hero.is-dice-in .xd-glow, .xd-hero.is-dice-on .xd-glow, .xd-hero.is-stamp .xd-stamp, .xd-res, .xd-res.is-win, .xd-confetti i, .xd-hit, .xd-cell.is-pend .xd-badge { animation: none; }
  .xd-confetti { display: none; }
  .xd-cell { transition: none; }
}