/* 鱼虾蟹 —— 深海夜店(设计稿 output/小游戏市场调研/鱼虾蟹设计/states/S1–S4)
 * 图片只有角色:开盅画面三张(螃蟹捧碟 / 扣在桌上 / 提起盖子)、三颗珍珠骰的六个面、六个格子里的图案;
 * 格子、筹码、按钮、倒数圈、横幅、彩带全是 CSS(design/dark-neon/README.md 第 6 节)。
 * 版面(竖屏):顶栏 / 画面区(最高 4:3,高度 = 页面减掉下面那一块要的,所以一屏放得下)/ 下面一块:倒数圈 + 状态和最近几局并成一行、一行赔法、3×2 六格、筹码、
 * 三颗按钮、在线人数;本局赢家在最下面(结算才出来,往下卷看)。画面再矮(不到 150px)下面那块才卷。
 * 黑底面板、柠檬黄只用在选中、主按钮、中奖格和要强调的那一个数;画面区外面那圈是深海的蓝黑。
 * 动画只动 transform / opacity(骰子揭开那一下照设计用 clip-path),关了动态效果的手机全部换成落定那一格。
 */
.hoohey {
  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: #131416; --surface-2: #1b1d20; --line: #25282c;
  --ink: #fff; --ink-2: #8d9296; --ink-3: #5d6266; --neon: #e5ff3d; --neon-ink: #0a0a0a; --bad: #ff5a5a;
  --sea: #04090d;
  /* 画面区以下那一块要多高(顶栏 60 + 倒数那行 52 + 赔法那行 16 + 六格 + 筹码 56 + 按钮 52 + 在线人数 32 + 间距):格子是 1.6:1(最矮 64px),所以跟着宽度算。
     赔法那行(10-27 加的,一行 16px + 上下间距 8px)也算进来,不然画面区会多占 24px、筹码和「确认下注」被挤到第一屏外面。
     宽度照 player-layout.css 的上限(最宽 520px)。改了下面任何一块的高度,这里要跟着改 */
  --hh-w: min(100vw, var(--app-max-width, 520px));
  --hh-pad: 16px;
  --hh-below: calc(326px + 2 * max(64px, (var(--hh-w) - 2 * var(--hh-pad) - 16px) / 4.8) + 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;
}
.hoohey[hidden] { display: none; }
.hoohey :where(p, h2, h3, ul) { margin: 0; }
/* 用 :where 把重置的权重压到 0:后面单个 class 的按钮样式才盖得过它(button 的 background:none 会吃掉底色) */
.hoohey :where(button) { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.hoohey button:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.hoohey img, .hoohey video { -webkit-user-drag: none; pointer-events: none; }
/* 按钮里面的字、金额、图案一律点不到:按下、松手、click 都落在按钮本身。别人一押,格子里的「总下注」就改字,
   金额还会被 PA 金币那层换成新的 <span>+<img>;按在上面的话,松手时按下去的那个元素已经没了,浏览器不发 click(10-16 冲天鹰同一个毛病) */
.hoohey button > *, .hoohey button * { pointer-events: none; }

/* ---------- 顶栏 ---------- */
.hh-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.hh-back, .hh-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); }
.hh-back svg, .hh-help svg { width: 22px; height: 22px; }
.hh-help { color: var(--ink-2); font-weight: 700; border-radius: 50%; }
.hh-title { flex: 1; min-width: 0; text-align: center; font-size: 22px; font-weight: 900; letter-spacing: .04em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 中文以外标题是「Fish Prawn Crab」「Ikan Udang Ketam」这种长名字:字照屏宽缩、可以折成两行,不再被截成「Fish Prawn C…」(i18n.js 切语言时把 <html lang> 设成那个语言) */
html:not([lang^="zh"]) .hh-title { font-size: clamp(13px, 3.8vw, 17px); 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 行高的符号:泰文 น้ำ 叠在 ำ 上面的 ้ 被切成「นำเต้าปูปลา」(10-31 泰文宣传片录到,等于游戏名拼错)。
   裁切框上面放宽 .32em、下面 .12em(下面放多了会露出第三行的头),负 margin 收回来:字的位置、顶栏高度跟原来一样 */
html:not([lang^="zh"]) .hh-title { padding: .32em 0 .12em; margin: -.32em 0 -.12em; }
html:not([lang^="zh"]) .hh-top:has(.hh-dep:not([hidden])) .hh-title { font-size: 12px; }
.hh-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; }
/* 小「充值」(照冲天鹰):余额不够那几秒才亮,亮的时候余额让一点位子 */
.hh-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; }
.hh-dep[hidden] { display: none; }
.hh-top:has(.hh-dep:not([hidden])) .hh-bal { max-width: 32%; padding-inline: 10px; }
.hh-top.hh-has-music { gap: 6px; }
.hh-top.hh-has-music .hh-title { font-size: 19px; }
.hh-top.hh-has-music .hh-bal { padding-inline: 10px; flex-shrink: 1; min-width: 0; }
html:not([lang^="zh"]) .hh-top.hh-has-music .hh-title { font-size: clamp(12px, 3.4vw, 15px); }
@media (max-width: 380px) { .hh-top { gap: 6px; padding-inline: 12px; } .hh-title { font-size: 18px; } .hh-bal { padding: 8px 10px; font-size: 13px; } }

/* ---------- 画面区 ----------
 * 高度 = 页面高度减掉下面那一块要的(--hh-below):倒数、六格、筹码、「确认下注」一屏全看得到,不用往下卷(一卷倒数圈又被卷走);
 * 最高 4:3(整张图都露出来),最矮 150px。不认 clamp 的旧浏览器退回 36vh。
 * 三张图和骰子放在一块正好 4:3 的 .hh-art 里(骰子的百分比位置跟图对得上),画面矮了整块裁掉一点,不变形、骰子不跑位。
 * 裁的时候上面裁七成、下面裁三成:碟子和骰子在偏下的地方(骰子底边 77%),要留在画面里、不被底下那层渐变压暗 */
.hh-hero { position: relative; flex: none; width: 100%; height: 36vh; height: clamp(150px, calc(100% - var(--hh-below)), calc(var(--hh-w) * .75)); overflow: hidden; background: var(--sea); }
.hh-art { position: absolute; left: 0; right: 0; top: 70%; aspect-ratio: 4 / 3; transform: translateY(-70%); }
.hh-rig { position: absolute; inset: 0; transform-origin: 50% 72%; }
.hh-frame, .hh-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hh-hero.is-idle .hh-frame[data-frame="idle"],
.hh-hero.is-closed .hh-frame[data-frame="closed"],
.hh-hero.is-lifted .hh-frame[data-frame="lifted"] { opacity: 1; }
/* 影片在播:三张图收起来,只亮那一支(shake 在 4 秒前,lift 在 4 秒后) */
.hh-hero.is-clip .hh-frame { opacity: 0; }
.hh-hero.is-clip-idle .hh-clip[data-clip="idle"], .hh-hero.is-clip-shake .hh-clip[data-clip="shake"], .hh-hero.is-clip-lift .hh-clip[data-clip="lift"] { opacity: 1; }
.hh-hero.is-missing .hh-art { opacity: .25; }
/* 下边淡进页面的黑,跟下面那一块接上。叠的顺序:图 < 这层渐变 < 彩带 < 横幅 / 我的结果 < 白闪 */
.hh-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 秒一圈) */
.hh-hero.is-breathe .hh-rig { animation: hh-breathe 4s ease-in-out infinite; }
@keyframes hh-breathe { 50% { transform: scale(1.012); } }
/* 摇盅:左右快抖,幅度要看得出来在摇 */
.hh-hero.is-shake .hh-rig { animation: hh-shake .18s linear infinite; }
@keyframes hh-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 是负的延迟:中途进来接着演完 */
.hh-hero.is-jolt .hh-art { animation: hh-jolt .32s cubic-bezier(.2, .8, .3, 1) var(--jd, 0ms) both; }
@keyframes hh-jolt {
  0% { transform: translateY(-70%); }
  22% { transform: translateY(-66.5%) scale(1.02); }
  55% { transform: translateY(-71.2%); }
  100% { transform: translateY(-70%); }
}
.hh-flash { position: absolute; z-index: 4; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.hh-hero.is-flash .hh-flash { animation: hh-flash .12s linear var(--fd, 0ms) both; }
@keyframes hh-flash { from { opacity: .85; } to { opacity: 0; } }
/* 扣下之后到提盖:画面慢慢推近一点(提起来之后停在推近的那一格,到下一局换回 idle 时一起复原) */
.hh-hero.is-tense .hh-rig { animation: hh-tense 1.2s ease-in var(--td, 0ms) both; }
@keyframes hh-tense { from { transform: scale(1); } to { transform: scale(1.035); } }
.hh-hero.is-lifted .hh-rig { transform: scale(1.035); }
.hh-hero.is-clip .hh-rig { transform: none; }

/* 三颗骰子:本来就在碟子上(盖子底下),提盖那一刻由下往上揭开。位置照 DICE_SPOT:中心 x 41% / 50% / 59%,底边 77%,宽 9% */
.hh-dice { position: absolute; inset: 0; opacity: 0; }
.hh-hero.is-dice-in .hh-dice, .hh-hero.is-dice-on .hh-dice { opacity: 1; }
.hh-die { position: absolute; left: calc(var(--x) - 4.5%); bottom: 23%; width: 9%; height: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); }
.hh-hero.is-dice-in .hh-die { animation: hh-uncover .35s cubic-bezier(.2, .8, .3, 1) var(--dd, 0ms) both; }
@keyframes hh-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(这一局第一次露出来时定一次,之后不改) */
.hh-glow { position: absolute; left: 32%; width: 36%; bottom: 18%; aspect-ratio: 2.4 / 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(229, 255, 61, .55), rgba(229, 255, 61, 0)); opacity: .35; }
.hh-hero.is-dice-in .hh-glow, .hh-hero.is-dice-on .hh-glow { animation: hh-glow 1.2s ease-out var(--gd, 0ms) both; }
@keyframes hh-glow { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.08); } 100% { opacity: .35; transform: scale(1); } }

/* 「停止下注」:柠檬色刷子横幅,斜着盖在画面中间偏下(封盘那一下出来,摇到第 1.4 秒收掉) */
.hh-stamp { position: absolute; z-index: 3; left: 50%; top: 62%; display: none; transform: translate(-50%, -50%); pointer-events: none; }
.hh-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);
}
.hh-hero.is-stamp .hh-stamp { display: block; animation: hh-stamp .28s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes hh-stamp { from { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* 结果画面上我的结果:赢了是黑色刷子底 + 柠檬「赢了」+ 白色大字金额;没中只在下方安静地写一行 */
.hh-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: hh-rise .28s ease-out both;
}
.hh-res[hidden] { display: none; }
.hh-res b { font-size: 22px; line-height: 1.1; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hh-res .hh-lost, .hh-res .hh-got { font-size: 17px; color: var(--ink); }
.hh-res small { font-size: 15px; font-variant-numeric: tabular-nums; }
/* 输掉的钱「−RM x」:红字(没押中那行在小字的位置;押中但不够本的在大字的位置) */
.hh-res .hh-loss { font-weight: 800; color: var(--bad); }
.hh-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: hh-win .42s cubic-bezier(.2, .9, .3, 1.2) both;
}
.hh-res .hh-won-l { font-size: clamp(30px, 10vw, 46px); color: var(--neon); letter-spacing: .08em; }
.hh-res .hh-won { font-size: clamp(28px, 9vw, 42px); color: #fff; }
@keyframes hh-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hh-win { from { opacity: 0; transform: translateX(-50%) scale(.6) rotate(-4deg); } to { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); } }
/* 彩带:净赢的时候从画面上方撒下来(14 条,--i 错开) */
.hh-confetti { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.hh-confetti[hidden] { display: none; }
.hh-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: hh-fall 1.6s cubic-bezier(.3, .1, .6, 1) calc(var(--i) * 70ms) both;
}
.hh-confetti i:nth-child(3n) { background: #fff; width: 5px; }
.hh-confetti i:nth-child(4n) { background: #ffd23d; height: 10px; }
@keyframes hh-fall { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(820%) rotate(540deg); } }

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

/* ---------- 下面那一块(可以卷) ---------- */
.hh-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(--hh-pad) 8px; scrollbar-width: none; }
.hh-body::-webkit-scrollbar { display: none; }

/* 倒数圈 + 状态字(左)和最近几局(右)并成一行(52px):收注那 20 秒倒数一直在第一屏,省下来的高度让筹码和按钮也留在第一屏 */
.hh-strip { flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; }
/* 最近几局:一局一组三个小图案,最新的在最左边、描柠檬边;多了往右横着卷,右边淡出 */
.hh-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);
}
.hh-recent::-webkit-scrollbar { display: none; }
.hh-recent:empty { display: none; } /* 还没有开完的局(新开服、刚上线):不留一块空白,倒数那块照旧靠左 */
.hh-rc { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.hh-rc img { width: 20px; height: 20px; object-fit: contain; }
.hh-rc.is-new { box-shadow: inset 0 0 0 1.5px var(--neon); }

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

/* 盘面上方那行赔法「中 1 颗 ×2 · 2 颗 ×3 · 3 颗 ×4」(10-27 老板「鱼虾蟹也是没显示倍数」;六格同一套赔法,所以不写进每一格):
   常驻、一行、居中,灯笼那种暖黄(不用柠檬黄:柠檬黄留给选中、主按钮、中奖格)。字照屏宽缩,外语长一点也一行放得下(真的放不下才出省略号);
   设定还没到手就不显示(hidden),高度照样算在 --hh-below 里 */
.hh-pays {
  flex: none; height: 16px; font-size: clamp(11px, 3.2vw, 13px); line-height: 16px; font-weight: 800; text-align: center; color: #f2c46d;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-pays[hidden] { display: none; }
/* 六格(3×2,1.6:1):左上图案名、中间大图案、最下面一整行全场「总下注 RM x」;我押的筹码在右上角(草稿是虚线圈),
   中了亮柠檬框 + 「×拿回几倍」(10-27 以前写开出几颗,跟上面那行赔法的「×」意思不一样),没中的暗下来,封盘后上锁。总下注以前挤在右上角跟名字、筹码抢位子,360–430 宽连「总下注 RM 0」都被截掉 */
.hh-board { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hh-cell {
  position: relative; min-width: 0; aspect-ratio: 1.6; min-height: 64px; overflow: hidden;
  border-radius: 16px; background: radial-gradient(120% 90% at 50% 100%, #0f1a22 0%, var(--surface) 70%); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .09s ease-out, opacity .2s ease-out;
}
/* 名字:要 overflow:hidden 才有省略号,可是它也会裁掉超出行高的笔画:泰文 / 孟加拉 / 越南文 / 缅甸文的符号往上伸(น้ำเต้า、ไก่、Bầu),
   马来 / 菲律宾的 g / p、泰文 กุ้ง ปู 下面的元音、缅甸文 ကြက် 的字脚往下伸,孟加拉 ি 往左、最后一笔往右伸(10-25 以前上下左右都被切掉一点)。
   所以裁切框上下各放宽 .35em、左右各放宽 .2em:padding 撑开、负 margin 收回来,字的位置、排版宽度跟原来一样(max-width 跟着加回 .4em),
   真的太长(Rooster、Alimango)照旧在右边出省略号。名字是 absolute 的,格子挤也不会被压扁;格子高度照 1.6:1 算、图案照百分比摆,都不用动:
   格子最矮 64px 也放得下名字的裁切框(上边 6–8 + 一行 16×1.1 + 放宽的 .35em ≈ 31px)+ 最下面「总下注」那一行(下边 3 + 14),两块碰不到 */
.hh-cell-name { position: absolute; top: 6px; left: 8px; z-index: 1; max-width: calc(52% + .4em); padding: .35em .2em; margin: -.35em -.2em; font-size: 16px; font-weight: 900; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
/* 泰文叠在 ำ 上面的声调符号(น้ำเต้า)比行高高出 4px 多:名字往下挪 2px,墨水离格子上缘留 3px 以上(中了的柠檬框有 2.5px 粗,不压在框上)。
   缅甸文在安卓的 Noto Sans Myanmar 下 ကြက် 的 ြ 顶上那一横离上缘只剩 1px(Mac 的 Myanmar Sangam 量不出来),一样往下挪 2px */
html[lang="th"] .hh-cell-name, html[lang="my"] .hh-cell-name { top: 8px; }
/* 外语名字长(Rooster、Alimango、เหรียญ):字照屏宽缩一点,往右可以用到右上角筹码 / 锁头 / 「×倍数」前面(右边留 46px),
   不再被截成「Roos…」(10-31 英文宣传片录到);375 宽 Rooster 约 53px、能用约 65px */
html:not([lang^="zh"]) .hh-cell-name { max-width: calc(100% - 46px + .4em); font-size: clamp(13px, 3.6vw, 16px); }
.hh-cell-sum {
  position: absolute; z-index: 1; left: 50%; bottom: 3px; transform: translateX(-50%); max-width: calc(100% - 4px); padding: 0 4px; border-radius: 999px;
  background: rgba(10, 10, 10, .72); font-size: clamp(9px, 2.6vw, 10px); line-height: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.hh-cell-art { position: absolute; left: 14%; right: 14%; top: 16%; bottom: 13%; display: grid; place-items: center; }
.hh-cell-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.hh-cell-art.is-missing img { display: none; }
/* 我押的:柠檬色小筹码压在右上角;还在草稿里的(没确认)是黑底虚线圈 */
.hh-badge {
  position: absolute; top: 4px; right: 4px; z-index: 2; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--neon); color: var(--neon-ink); font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #0a0a0a, 0 2px 6px rgba(0, 0, 0, .6);
}
.hh-badge[hidden] { display: none; }
.hh-cell.is-draft .hh-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; }
/* 单送出去、回包还没到(按确认那一刻就挂上):这张单的角标一明一暗(循环,慢网络等多久都在动;回包快的话第一格就是原样,不会闪一下) */
.hh-cell.is-pend .hh-badge { opacity: .6; animation: hh-pend .7s ease-in-out infinite alternate; }
@keyframes hh-pend { from { opacity: 1; } to { opacity: .45; } }
/* 中了:右上角让给「×倍数」,我押的筹码挪到右下角、缩小一点(两个都看得到;格子最矮 64px 也不叠);
   这一格的总下注让位(结果画面那几秒,我中了的那格先看我押的) */
.hh-cell.is-win .hh-badge { top: auto; bottom: 4px; min-width: 26px; height: 26px; font-size: 11px; }
.hh-cell.is-win.is-on .hh-cell-sum { display: none; }
.hh-cell.is-on { box-shadow: inset 0 0 0 2px var(--neon); }
.hh-cell.is-draft { box-shadow: inset 0 0 0 1.5px rgba(229, 255, 61, .55); }
/* 中了:柠檬框 + 柠檬光,右上角「×倍数」(压在我的筹码上面) */
.hh-hit {
  position: absolute; top: 4px; right: 4px; z-index: 3; min-width: 34px; height: 30px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; background: #0a0a0a; color: var(--neon); font-size: 14px; font-weight: 900;
  box-shadow: inset 0 0 0 2px var(--neon), 0 0 10px rgba(229, 255, 61, .5);
  animation: hh-pop .3s cubic-bezier(.2, .9, .3, 1.3) both;
}
.hh-hit[hidden] { display: none; }
.hh-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 70%); }
.hh-cell.is-win .hh-cell-name { color: var(--neon); }
.hh-board.is-result .hh-cell.is-dim { opacity: .35; }
@keyframes hh-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
/* 上锁(不在收注):锁头在右上角,格子暗一点;结果画面不锁(要看中了哪几格) */
.hh-lock { position: absolute; top: 8px; right: 8px; z-index: 1; display: none; width: 18px; height: 18px; color: var(--ink-2); }
.hh-lock svg { width: 100%; height: 100%; }
.hh-cell.is-locked { opacity: .62; }
.hh-cell.is-locked .hh-lock { display: block; }
.hh-cell.is-locked .hh-cell-sum { display: none; }
.hh-cell.is-locked.is-on .hh-lock { display: none; }
.hh-cell.is-locked.is-on { opacity: 1; }
/* 押满了(全场还能收的、个人上限,连最小的筹码都放不进去):图案暗下来 */
.hh-cell.is-full .hh-cell-art { opacity: .4; }
.hh-board.is-open .hh-cell:active { transform: scale(.96); }

/* 筹码:六颗圆筹码(虚线圈),选中的柠檬色 */
.hh-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); }
.hh-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%, #303030 0%, #1b1b1b 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;
}
.hh-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;
}
.hh-chip span { position: relative; }
.hh-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); }
.hh-chip.is-on::before { background: repeating-conic-gradient(from 0deg, #0a0a0a 0 14deg, transparent 14deg 45deg); opacity: .5; }
.hh-chip.is-dim { opacity: .4; }
.hh-chip:active { transform: translateY(1px) scale(.94); }

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

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

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

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