/* 翻硬币(Coin Flip)—— 黑金柠檬
 * 图片 / 短片只有灰狼和那枚拉丝银硬币(public/img/coin/*.webp、public/video/coin/*.mp4);
 * 顶栏、最近结果、头尾两颗按钮、金额、主按钮全是 CSS。方向照老板 10-21 定的那张(design/dark-neon/coinflip/ref/boss-direction-wolf.webp):
 * 狼 + 硬币占上半屏,标题「翻硬币 / COIN FLIP」压在左上角,选头尾的硬币只是 44px 的小图标(老板:当时那两颗太大)。
 * 一屏只一块黄:主按钮「开始翻币」;选中的那一面是柠檬细边,猜中的净赢是柠檬字,不填色。
 * 动的只有 transform / opacity(翻币短片是 <video>,不算);关了「减少动态效果」全关。
 */
.coin {
  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: 1600ms;         /* CSS 翻币多久:coin.js 的 CSS_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;
}
.coin[hidden] { display: none; }
.coin :where(p, h2, h3) { margin: 0; }
/* 用 :where 把重置的权重压到 0:后面单个 class 的按钮样式才盖得过它(button 的 background:none 会吃掉底色) */
.coin :where(button) { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.coin button:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }

/* ---------- 顶栏:返回、字标、余额、喇叭 ---------- */
.cf-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; min-height: 56px; }
.cf-back, .cf-sound { 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); }
.cf-back svg, .cf-sound svg { width: 20px; height: 20px; }
.coin .cf-sound { color: var(--ink); }
.coin .cf-sound[aria-pressed="false"] { color: var(--ink-2); }
.cf-brand { flex: 1; min-width: 0; display: flex; align-items: center; }
.cf-brand img { display: block; height: 22px; width: auto; max-width: 100%; object-fit: contain; }
.cf-bal { flex: none; max-width: 44%; 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) { .cf-top { gap: 6px; padding-left: 12px; padding-right: 12px; } .cf-bal { padding: 7px 10px; font-size: 13px; } .cf-brand img { height: 18px; } }

/* ---------- 主画面:狼那一帧打底,短片 / 3D 翻币 / 落定那一帧叠在上面 ----------
 * 图和短片都是 4:3(1112×834),框也是 4:3、整张画出来、不裁:硬币在左(落定那一帧光环那一圈 x 13–48%、y 36–73%)、狼在右,
 * 裁哪一边都少一块(以前框到正方形、锚在 80%,翻到一半和落定那一帧的硬币被切掉左边)。再高的手机剩下的黑留在主画面和「最近结果」之间
 * (.cf-recent 的 margin-top: auto),面板照旧贴底;矮的手机(底下 max-height 那两段)框压扁到 min-height 为止,这时上下各裁一点,硬币还在 */
.cf-hero { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: 4 / 3; min-height: 150px; overflow: hidden; background: #000; perspective: 900px; }
.cf-art, .cf-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cf-clip { opacity: 0; pointer-events: none; }
.cf-clip.is-on { opacity: 1; }
.cf-art-end[hidden] { display: none; }
.cf-art-end { z-index: 2; }
.cf-art-end.is-land { animation: cf-land .38s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes cf-land { from { transform: scale(1.035); } to { transform: scale(1); } }
/* 等回包:狼那一帧轻轻呼吸一下,看得出在等(短片起来之前) */
.cf-hero.is-wait .cf-art-hero { animation: cf-breathe .9s ease-in-out infinite alternate; }
@keyframes cf-breathe { from { transform: scale(1); } to { transform: scale(1.018); } }
/* 下缘融进黑底,接最近结果那一条 */
.cf-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(to bottom, rgba(10, 10, 10, 0), var(--bg)); z-index: 3; pointer-events: none; }
/* 落定那一下:猜中整张柠檬一闪(径向,中心对着落定那一帧的硬币),没猜中红一闪;只动 opacity */
.cf-glow { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 31% 54%, rgba(229, 255, 61, .55), rgba(229, 255, 61, 0) 62%); }
.cf-glow.is-hit { animation: cf-glow .7s ease-out both; }
.cf-glow.is-miss { background: radial-gradient(ellipse at 31% 54%, rgba(255, 90, 90, .35), rgba(255, 90, 90, 0) 62%); animation: cf-glow .55s ease-out both; }
@keyframes cf-glow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* 标题压在左上角的黑处(狼在右边;落定那一帧的硬币从 36% 高起,标题到 26% 高就完,压不到;翻到一半硬币飞过左上角那一下从字底下过) */
.cf-title { position: absolute; left: 16px; top: 10px; z-index: 4; display: grid; gap: 2px; pointer-events: none; }
/* 翻的过程硬币会从左上角飞过:标题先藏起来,不压到币(落定那一帧量过不压,翻完再显示) */
.cf-hero.is-clip .cf-title, .cf-hero.is-css .cf-title { opacity: 0; }
.cf-title h2 { font-size: 34px; font-weight: 900; line-height: 1.05; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.cf-title small { font-size: 11px; font-weight: 700; letter-spacing: .32em; color: var(--ink-2); }
/* 中文以外的语言大字本身就是「Coin Flip」,底下那行英文小字跟它重复,拿掉(i18n.js 切语言时把 <html lang> 设成那个语言) */
html:not([lang^="zh"]) .cf-title small { display: none; }

/* ---------- CSS 翻币(短片起不来的退路):两张正反面叠成一枚 3D 硬币,位置对着落定那一帧的硬币 ----------
 * 落定那一帧的硬币中心在 (31%, 54%)、直径约 34% 宽(4:3 的框整张不裁,量的就是图上的位置):停下来跟接上去的落定帧对得上 */
.cf-coin3d { position: absolute; left: 14%; top: 31%; width: 34%; aspect-ratio: 1; z-index: 2; transform-style: preserve-3d; opacity: 0; pointer-events: none; }
.cf-face { position: absolute; inset: 0; border-radius: 50%; background: center / contain no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .7); }
.cf-face.is-heads { background-image: url(/img/coin/face-heads.webp?v=1); }
.cf-face.is-tails { background-image: url(/img/coin/face-tails.webp?v=1); transform: rotateY(180deg); }
.cf-hero.is-css .cf-art-hero { opacity: .45; }
.cf-coin3d.is-spin-heads { opacity: 1; animation: cf-spin-heads var(--flip) cubic-bezier(.22, .7, .25, 1) both; }
.cf-coin3d.is-spin-tails { opacity: 1; animation: cf-spin-tails var(--flip) cubic-bezier(.22, .7, .25, 1) both; }
/* 从狼手上(偏下、偏小)弹起来、转五圈、落回正中;尾多半圈 */
@keyframes cf-spin-heads {
  0% { transform: translate3d(8%, 38%, 0) scale(.5) rotateY(0deg); }
  55% { transform: translate3d(0, -12%, 0) scale(1.06) rotateY(1260deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotateY(1800deg); }
}
@keyframes cf-spin-tails {
  0% { transform: translate3d(8%, 38%, 0) scale(.5) rotateY(0deg); }
  55% { transform: translate3d(0, -12%, 0) scale(1.06) rotateY(1440deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotateY(1980deg); }
}

/* 结果:一条药丸贴在主画面底下那一带(落定那一帧的光环到 73% 高为止,底下只有狼的手和零星火花),不压到硬币;猜中柠檬字、没猜中红字。
 * 320 宽的框只有 240 高,猜中那条两行的药丸离光环只剩几像素:359 以下药丸收一点、贴底一点(见下面 max-width: 359px 那段) */
.cf-fx { position: absolute; left: 16px; right: 16px; bottom: 10px; z-index: 4; display: flex; pointer-events: none; }
.cf-res { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 0; max-width: 100%; padding: 7px 14px; border-radius: 999px; background: rgba(10, 10, 10, .84); box-shadow: inset 0 0 0 1px var(--line); animation: cf-cap-in .3s ease-out both; }
.cf-res-big { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.cf-res-amt { font-size: 22px; font-weight: 900; font-style: normal; line-height: 1.1; color: var(--neon); font-variant-numeric: tabular-nums; }
.cf-res small { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-res.is-miss .cf-res-big { color: var(--ink-2); }
/* 没猜中那一行只有输掉的钱:红字,跟别的游戏的「−RM x」一样 */
.cf-res .cf-loss { color: var(--bad); }
@keyframes cf-cap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 最近结果:最新在最左,正反面小图标;猜中的带一圈柠檬细边 ----------
 * margin-top: auto:主画面是 4:3 整张不裁,高的手机多出来的黑留在它和主画面之间,面板照旧贴底 */
.cf-recent { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; padding: 4px 16px; }
.cf-recent-l { flex: none; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.cf-recent-row { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.cf-recent-row::-webkit-scrollbar { display: none; }
.cf-dot { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cf-dot img { display: block; width: 28px; height: 28px; border-radius: 50%; }
.cf-dot.is-hit { box-shadow: 0 0 0 1.5px var(--neon); }
.cf-dot.is-new { animation: cf-pop .3s ease-out both; }
@keyframes cf-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
.cf-recent-empty { font-size: 12px; color: var(--ink-3); }

/* ---------- 控制面板 ---------- */
.cf-panel { flex: none; display: grid; gap: 8px; padding: 4px 16px 0; }
/* 等服务器的时候不收第二下;等超过 300ms(coin.js 的 WAIT_DIM_MS)才变灰 */
.cf-panel.cf-busy { pointer-events: none; }
.cf-panel.cf-busy.cf-wait { opacity: .55; }
/* 头 / 尾:小硬币图标 + 名字 + 倍数;选中的柠檬细边 + 右上角一个勾 */
.cf-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-pick { position: relative; display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 10px 12px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); text-align: left; min-width: 0; }
.cf-pick-coin { flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, .6); }
.cf-pick-name { display: grid; gap: 1px; min-width: 0; }
/* 名字一个词不拆行(「Kepala」「Heads」拆成两行难看);窄的时候倍数挪到第二行(见下面 399 那段),名字永远一行 */
.cf-pick-name b { font-size: 22px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow-wrap: normal; }
.cf-pick-name small { font-size: 9px; font-weight: 700; letter-spacing: .2em; color: var(--ink-3); }
/* 中文以外的语言名字本身就是英文 / 当地语,底下「HEADS / TAILS」那行英文小字重复又占宽,拿掉 */
html:not([lang^="zh"]) .cf-pick-name small { display: none; }
.cf-pick-mult { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cf-pick-check { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--neon); color: var(--neon-ink); opacity: 0; }
.cf-pick-check svg { width: 10px; height: 10px; }
.cf-pick.is-on { box-shadow: inset 0 0 0 2px var(--neon); background: #15160f; }
.cf-pick.is-on .cf-pick-mult { color: var(--neon); box-shadow: inset 0 0 0 1px rgba(229, 255, 61, .55); }
.cf-pick.is-on .cf-pick-check { opacity: 1; }
.cf-pick:disabled { opacity: .55; }
.cf-pick:active:not(:disabled) { transform: scale(.97); }
/* 400 以下(320–399:iPhone SE / mini、大多数安卓、Telegram 半屏):两颗各只有 139–179px,一行放不下「图标 + Kepala + 1.90x」。
 * 改成两行的格子:第一行图标 + 名字,第二行倍数药丸 —— 哪种语言、哪种倍数都一样,不靠 flex 自己折行(折不折看字宽,语言一换就变)。
 * 英文小字拿掉、名字小一号;勾是绝对定位的,不占格。到 479 为止:400–479 宽单行时马来文「Kepala」会压进倍数药丸 */
@media (max-width: 479px) {
  .cf-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "coin name" "mult mult"; column-gap: 8px; row-gap: 6px; align-items: center; padding: 8px 10px; }
  .cf-pick-coin { grid-area: coin; }
  .cf-pick-name { grid-area: name; }
  .cf-pick-name b { font-size: 19px; }
  .cf-pick-name small { display: none; }
  .cf-pick-mult { grid-area: mult; justify-self: start; margin-left: 0; padding: 2px 6px; font-size: 12px; }
  .cf-pick-check { width: 14px; height: 14px; }
}

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

/* 七颗快捷金额(5 / 10 / 20 / 50 / 100 / 200 / 500):320 宽各只有 36px 左右,左右留白收到 2px,「500」不被截 */
.cf-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } /* 十一颗:6 + 5 两行(老板 10-21 加了 1k–10k) */
.cf-qbtn { min-width: 0; padding: 0 3px; min-height: 36px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-qbtn.is-on { box-shadow: inset 0 0 0 1px var(--neon); color: var(--neon); }
.cf-qbtn:disabled { opacity: .35; }
@media (max-width: 359px) { .cf-quick { gap: 4px; } .cf-qbtn { padding: 0 1px; font-size: 12px; } .cf-fx { bottom: 6px; } .cf-res { padding: 5px 12px; } }

/* 主按钮:「开始翻币」,翻的时候写「翻币中…」灰着 */
.cf-go { display: grid; place-items: center; min-height: 56px; border-radius: 18px; background: var(--neon); color: var(--neon-ink); font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.cf-go:active:not(:disabled) { transform: scale(.985); }
.cf-go:disabled { opacity: .35; }
.cf-go.is-rolling { opacity: .6; }

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

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

/* 矮屏幕(iPhone SE、Telegram 半屏):收间距和按钮高度,主画面留够地方 */
@media (max-height: 700px) {
  .cf-top { min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
  .cf-title h2 { font-size: 28px; }
  .cf-recent { min-height: 36px; padding-top: 2px; padding-bottom: 2px; }
  .cf-dot, .cf-dot img { width: 24px; height: 24px; }
  .cf-panel { gap: 6px; }
  .cf-pick { min-height: 60px; padding-top: 6px; padding-bottom: 6px; }
  .cf-pick-coin { width: 40px; height: 40px; }
  .cf-amt { min-height: 46px; } .cf-step { min-height: 46px; }
  .cf-qbtn { min-height: 34px; }
  .cf-go { min-height: 50px; }
}
/* 更矮的(360×513 这种 Telegram 半屏 / 小安卓):主画面让出地方,保证「开始翻币」整颗看得到 */
@media (max-height: 600px) {
  .cf-hero { min-height: 110px; }
  .cf-title h2 { font-size: 22px; }
  .cf-title small { font-size: 9px; }
  .cf-res { padding: 5px 12px; }
  .cf-res-amt { font-size: 18px; }
  .cf-recent { min-height: 30px; padding-top: 0; padding-bottom: 0; }
  .cf-panel { gap: 5px; }
  .cf-pick { min-height: 50px; padding-top: 4px; padding-bottom: 4px; }
  .cf-pick-coin { width: 34px; height: 34px; }
  .cf-pick-name b { font-size: 18px; }
  .cf-amt { min-height: 42px; } .cf-step { min-height: 42px; }
  .cf-qbtn { min-height: 32px; }
  .cf-go { min-height: 46px; }
  .cf-hint { min-height: 20px; }
}

/* 手机开了「减少动态效果」:呼吸、落定、闪光、3D 翻币、弹字幕这些都是装饰,全关(coin.js 也会跳过短片,直接换落定那一帧)。
 * 选择器要跟挂动画的那条一字不差(一样重),不然压不过 */
@media (prefers-reduced-motion: reduce) {
  .cf-art-end.is-land, .cf-hero.is-wait .cf-art-hero, .cf-glow.is-hit, .cf-glow.is-miss, .cf-coin3d.is-spin-heads, .cf-coin3d.is-spin-tails, .cf-res, .cf-dot.is-new { animation: none; }
}