/* Hi-Lo(猜下一张大小)—— 黑金柠檬
 * 图片只有狐狸(四个姿势 public/img/hilo/fox-*.webp);牌桌、扑克牌、按钮、标签全是 CSS。
 * 扑克牌照射龙门的 .gl-card(goal.css)复制一份改成 .hl-card,两边各改各的不互相牵连。
 * 一屏只一块黄:主按钮(下注 / 收钱);累计倍数是黄字描边,不填色。
 */
.hilo {
  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);
  --flip: 160ms;          /* 翻牌两半各多久:hilo.js 的 FLIP_MS 读同一个数,改一边要改另一边 */
  --bg: #0a0a0a; --surface: #151515; --surface-2: #1c1c1c; --line: #242424;
  --ink: #fff; --ink-2: #8a8a8a; --ink-3: #5c5c5c; --neon: #e5ff3d; --neon-ink: #0a0a0a; --bad: #ff5a5a;
  --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;
}
.hilo[hidden] { display: none; }
.hilo :where(p, h2, h3) { margin: 0; }
/* 用 :where 把重置的权重压到 0:后面单个 class 的按钮样式才盖得过它(button 的 background:none 会吃掉底色) */
.hilo :where(button) { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.hilo button:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }

/* ---------- 顶栏(照小鸡) ---------- */
.hl-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.hl-back, .hl-music { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; flex: none; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.hl-back svg, .hl-music svg { width: 20px; height: 20px; }
/* 颜色要压过上面的 button { color: inherit } */
.hilo .hl-music { color: var(--gold, #e5ff3d); }
.hilo .hl-music[aria-pressed="false"] { color: var(--ink-2); }
.hl-title { flex: 1; min-width: 0; text-align: center; font-size: 18px; font-weight: 800; line-height: 1.1; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-bal { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 14px; border-radius: 999px; 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: 340px) { .hl-top { gap: 8px; padding-left: 12px; padding-right: 12px; } .hl-bal { padding: 7px 10px; } }

/* ---------- 一张牌:白底、左上角点数、中间花色;牌背是黑底 + 一圈柠檬细边 + 斜纹(照 goal.css 的 .gl-card) ---------- */
.hl-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; box-sizing: border-box; padding: 4px 6px;
  border-radius: 10%; background: #fff; color: #111; font-style: normal; font-weight: 800; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .08);
  font-variant-numeric: tabular-nums;
}
.hl-card b { font-size: 28px; }
.hl-card span { place-self: center; font-size: 34px; }
.hl-card.is-red { color: #d8262f; }
.hl-card.is-back { background: #0f0f0f repeating-linear-gradient(135deg, rgba(229, 255, 61, .12) 0 4px, transparent 4px 10px); box-shadow: 0 6px 18px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(229, 255, 61, .55); }
.hl-card.is-back b, .hl-card.is-back span { display: none; }

/* ---------- 已出牌列:小牌从左到右,最新的在最右,多了横着滑 ---------- */
.hl-trail { flex: none; display: flex; gap: 4px; min-height: 48px; padding: 4px 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.hl-trail::-webkit-scrollbar { display: none; }
.hl-mini { flex: none; width: 29px; height: 40px; padding: 2px 3px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.hl-mini b { font-size: 12px; }
.hl-mini span { font-size: 15px; }
/* 押大小翻出同点数(不算)的那几张:灰一点,右上角一个「=」 */
.hl-mini.is-push { opacity: .55; }
.hl-mini.is-push::after { content: '='; position: absolute; top: -5px; right: -4px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.hl-mini.is-new { animation: hl-pop .28s ease-out both; }
@keyframes hl-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* ---------- 信息带:第 n 张 / 累计倍数 ---------- */
.hl-strip { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 16px 6px; font-size: 13px; color: var(--ink-2); }
.hl-strip b { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.hl-strip b.hl-mult { margin: 0 0 0 4px; padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--neon); color: var(--neon); font-size: 16px; }
/* 局外「接着上一局 Q♥」那张牌:红心 / 方块写红色(跟牌面一样) */
.hl-strip b.is-red { color: var(--bad); }

/* ---------- 牌桌:狐狸站在桌后面,两张牌躺在桌上(现在这张 + 下一张的牌背) ---------- */
.hl-stage { position: relative; flex: 1; min-height: 190px; overflow: hidden; container-type: size; }
/* 狐狸:整只 532 高的立绘,高度照牌桌,腰以下藏在桌面后面;宽度照姿势各自的宽高比(design/dark-neon/hilo/out/sprites.json) */
.hl-fox { position: absolute; left: 50%; top: 2%; height: 104%; aspect-ratio: var(--fw) / 532; transform: translateX(-50%); background: center top / contain no-repeat; z-index: 1; pointer-events: none; }
.hl-fox[hidden] { display: none; }
.hl-fox.is-idle { background-image: url(/img/hilo/fox-idle.webp?v=1); --fw: 297; }
.hl-fox.is-win { background-image: url(/img/hilo/fox-win.webp?v=1); --fw: 448; animation: hl-cheer .5s ease-out; }
.hl-fox.is-lose { background-image: url(/img/hilo/fox-lose.webp?v=1); --fw: 328; animation: hl-sag .45s ease-out; }
.hl-fox.is-surprise { background-image: url(/img/hilo/fox-surprise.webp?v=1); --fw: 277; animation: hl-jolt .35s ease-out; }
@keyframes hl-cheer { 0% { transform: translateX(-50%) translateY(6%); } 55% { transform: translateX(-50%) translateY(-3%); } 100% { transform: translateX(-50%) translateY(0); } }
@keyframes hl-sag { from { transform: translateX(-50%) translateY(-2%); } to { transform: translateX(-50%) translateY(0); } }
@keyframes hl-jolt { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.04); } 100% { transform: translateX(-50%) scale(1); } }
/* 桌面:一大块椭圆,上缘一道柠檬细光(跟大厅封面那张桌子一样) */
.hl-felt { position: absolute; left: -12%; right: -12%; top: 58%; height: 90%; border-radius: 50%; background: radial-gradient(ellipse at 50% 20%, #181818, #0c0c0c 62%); box-shadow: inset 0 2px 0 rgba(229, 255, 61, .55), 0 -10px 30px rgba(229, 255, 61, .06); z-index: 2; pointer-events: none; }
.hl-table { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; align-items: flex-end; gap: 16px; z-index: 3; perspective: 600px; }
.hl-slot { position: relative; display: grid; justify-items: center; }
/* 中间的大牌:按牌桌高度缩放(不支持容器单位的旧浏览器就用固定尺寸) */
.hl-card.is-big { width: 92px; height: 129px; padding: 7px 9px; }
@supports (height: 1cqh) { .hl-card.is-big { height: min(40cqh, 160px); width: auto; aspect-ratio: 5 / 7; } }
.hl-card.is-big b { font-size: 30px; }
.hl-card.is-big span { font-size: 44px; }
/* 还没开局的空牌位:不透明(别让后面的狐狸透出来),只是边框淡一点 */
.hl-card.is-ghost { box-shadow: 0 6px 18px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(229, 255, 61, .2); }
.hl-card.is-bust { box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 0 3px var(--bad); }
.hl-slot.is-deck .hl-card { transform-origin: 50% 50%; }
/* 「剩 n 张」写在牌背上方,不占牌桌的高度(两张牌底边对齐) */
.hl-left { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: rgba(10, 10, 10, .85); box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* 翻牌:牌背转到侧面 → 换成牌面从另一侧转回来(只动 transform) */
.hl-card.is-flip-out { animation: hl-flip-out var(--flip) ease-in forwards; }
.hl-card.is-flip-in { animation: hl-flip-in var(--flip) ease-out both; }
@keyframes hl-flip-out { from { transform: rotateY(0deg); } to { transform: rotateY(90deg); } }
@keyframes hl-flip-in { from { transform: rotateY(-90deg); } to { transform: rotateY(0deg); } }
/* 翻出来的那张滑到中间 */
.hl-card.is-in { animation: hl-in .28s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes hl-in { from { opacity: .3; transform: translateX(60%) scale(.9); } to { opacity: 1; transform: translateX(0) scale(1); } }

/* 结果字幕:飘在狐狸胸口那一带(脸和举起来的手留给他自己),牌桌上缘之上 */
.hl-fx { position: absolute; left: 16px; right: 16px; top: 30%; z-index: 4; display: grid; justify-items: center; pointer-events: none; }
.hl-cap { display: grid; justify-items: center; gap: 2px; max-width: 100%; padding: 10px 18px; border-radius: 18px; background: rgba(21, 21, 21, .92); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, .7); animation: hl-cap-in .3s ease-out both; text-align: center; }
.hl-cap-big { font-size: 26px; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums; }
.hl-cap small { font-size: 12px; color: var(--ink-2); }
.hl-cap.is-push .hl-cap-big { font-size: 17px; color: var(--ink); }
.hl-cap.is-bad .hl-cap-big { color: var(--bad); }
/* 输了那一行只有输掉的钱:红字、大一号,跟别的游戏的「−RM x」一样 */
.hl-cap .hl-loss { font-size: 16px; font-weight: 800; color: var(--bad); font-variant-numeric: tabular-nums; }
.hl-cap .hl-cap-big.is-big { text-shadow: 0 0 26px rgba(229, 255, 61, .55); }
@keyframes hl-cap-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 控制面板 ---------- */
.hl-panel { flex: none; display: grid; gap: 8px; padding: 8px 16px 0; }
/* 等服务器的时候不收第二下;等超过 300ms(hilo.js 的 WAIT_DIM_MS)才变灰 */
.hl-panel.hl-busy { pointer-events: none; }
.hl-panel.hl-busy.hl-wait { opacity: .55; }
/* 三个(「一样」关着就两个)按钮:名字 + 这一步猜中的倍数;押不了的灰掉,倍数的位置写原因 */
.hl-picks { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.hl-pick { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 62px; padding: 6px 8px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
/* 箭头钉在左上角,名字自己居中:马来文「Lebih Rendah」这种长名字可以折成两行,不会被箭头挤歪 */
.hl-pick-name { display: block; max-width: 100%; text-align: center; font-size: 16px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.hl-pick-name svg { position: absolute; left: 9px; top: 9px; width: 13px; height: 13px; opacity: .7; }
.hl-pick small { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-pick:disabled { opacity: .38; box-shadow: inset 0 0 0 1px var(--line); }
.hl-pick:disabled small { font-size: 11px; font-weight: 500; color: var(--ink-2); white-space: normal; line-height: 1.2; }
/* 倍数不到 1 倍:猜中了累计倍数反而变小,数字用灰的,别看起来像好事 */
.hl-pick.is-under small { color: var(--ink-2); }
.hl-pick.is-picked { box-shadow: inset 0 0 0 2px var(--neon); }
.hl-pick:active:not(:disabled) { transform: scale(.97); }

.hl-betrow { display: flex; align-items: stretch; gap: 8px; }
.hl-step { display: grid; place-items: center; width: 52px; min-height: 48px; flex: none; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 22px; font-weight: 700; }
.hl-step:disabled { opacity: .35; }
.hl-amt { flex: 1; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 52px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.hl-amt small { font-size: 11px; color: var(--ink-2); }
.hl-amt-in { display: inline-flex; align-items: baseline; gap: 4px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hl-amt input { width: 6.5ch; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; outline: none; }
.hl-amt input:disabled { color: var(--ink); opacity: 1; -webkit-text-fill-color: var(--ink); }

.hl-quick { display: flex; gap: 6px; }
.hl-qbtn { flex: 1 1 0; min-width: 0; padding: 0 4px; min-height: 36px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 「最高」那颗宽一点(马来文 Maksimum、越南文 Cao nhất 比两个汉字长得多)。10-19 快捷金额从四颗加到五颗(5 / 10 / 20 / 50 / 100),
   间距 8 → 6px、这一颗 1.8 → 2.4 份宽,不然它被挤窄、马来文 390 宽的手机上也只剩「Maksi…」。无头 Chrome 量过 320 / 360 / 390 宽:
   中英马越泰孟缅都整个看得到(马来文以前 320 宽会截);菲律宾文 Pinakamataas 还是截(以前也截,再宽中文那颗就太空) */
.hl-qbtn.is-max { flex-grow: 2.4; }
.hl-qbtn.is-on { box-shadow: inset 0 0 0 1px var(--neon); color: var(--neon); }
.hl-qbtn:disabled { opacity: .35; }
/* 窄手机(320 宽):五颗数字各只有 35px 左右,左右留白收到 2px,「100」「500」不被截成「1…」 */
@media (max-width: 359px) { .hl-qbtn { padding: 0 2px; } }

/* 主按钮:没在打是「下注」,打着是「收钱 RM x」(一张没翻收不了,灰着) */
.hl-go { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 56px; border-radius: 18px; background: var(--neon); color: var(--neon-ink); font-weight: 800; }
.hl-go span { font-size: 20px; }
.hl-go small { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-go:active:not(:disabled) { transform: scale(.985); }
.hl-go:disabled { opacity: .35; }
/* 「取消 RM x」(老板 10-19:一张没翻可以取消):占收钱那一格,次要的样子(不是柠檬黄),免得跟「下注」「收钱」混 */
.hl-go.is-cancel { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }

.hl-hint { min-height: 24px; padding: 0; font-size: 12px; color: var(--ink-3); text-align: center; }

/* 规则卡在 .hilo 外面(弹层):返还率 / 注额 / 单局最高派彩那张小表 */
.sim-table.hl-rules-table { width: 100%; table-layout: fixed; font-size: 13px; margin-top: 10px; }
.hl-rules-table td { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hl-rules-table td:first-child { width: 48%; color: var(--ink-2, #8a8a8a); }

/* 矮屏幕(iPhone SE、Telegram 半屏):收间距和按钮高度,牌桌留够地方 */
@media (max-height: 700px) {
  .hl-trail { min-height: 40px; padding-top: 2px; padding-bottom: 2px; }
  .hl-mini { width: 25px; height: 34px; }
  .hl-mini b { font-size: 11px; } .hl-mini span { font-size: 13px; }
  .hl-panel { gap: 6px; }
  .hl-pick { min-height: 54px; }
  .hl-amt { min-height: 46px; } .hl-step { min-height: 46px; }
  .hl-qbtn { min-height: 34px; }
  .hl-go { min-height: 50px; }
}
/* 更矮的(360×513 这种 Telegram 半屏 / 小安卓):牌桌让出地方,保证「收钱」和「怎么玩」那一行整行看得到 */
@media (max-height: 600px) {
  .hl-top { padding-top: 6px; padding-bottom: 6px; }
  .hl-trail { min-height: 36px; padding-top: 0; padding-bottom: 0; }
  .hl-strip { padding-bottom: 2px; }
  .hl-stage { min-height: 110px; }
  /* 牌桌矮了大牌跟着变小(高 = 40cqh),点数和花色也照牌桌高度缩,不然花色掉出牌外(不认 cqh 的旧浏览器整行无效,沿用上面的字号) */
  .hl-card.is-big { padding: 4px 6px; }
  .hl-card.is-big b { font-size: min(30px, 13cqh); }
  .hl-card.is-big span { font-size: min(44px, 19cqh); }
  .hl-panel { gap: 5px; padding-top: 4px; }
  .hl-pick { min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
  .hl-amt { min-height: 42px; } .hl-step { min-height: 42px; }
  .hl-qbtn { min-height: 32px; }
  .hl-go { min-height: 46px; }
  .hl-hint { min-height: 20px; }
}

/* 手机开了「减少动态效果」:翻牌、滑牌、弹字幕、狐狸跳一下这些都是装饰,全关(结果照样马上看得到;hilo.js 也会跳过翻牌的停顿)。
 * 选择器要跟挂动画的那条一字不差(一样重):只写 .hl-fox 压不过 .hl-fox.is-win,狐狸照样跳 */
@media (prefers-reduced-motion: reduce) {
  .hl-fox.is-win, .hl-fox.is-lose, .hl-fox.is-surprise, .hl-mini.is-new, .hl-card.is-flip-out, .hl-card.is-flip-in, .hl-card.is-in, .hl-cap { animation: none; }
}