/* 赛马 —— 黑金柠檬
 * 图片只有角色:马和骑手(canvas 里的奔跑帧、冠军大图,格子里的骑手头像)和舞台右下角的主持人(四个表情)。赛道在 canvas 上现画(race-stage.js);
 * 格子、筹码、按钮、倒数条全是 CSS。
 * 版面(竖屏):顶栏 / 舞台(约 42% 高:赛道 + 左上角最近冠军 + 下方倒数)/ 下面一块可以卷:2×3 六匹马的格子、筹码那一排、限额、下注动态。
 * 号码牌的六个颜色是固定的(1 红 2 白 3 蓝 4 赛马黄 5 绿 6 黑),每一处都同时写号码,不只靠颜色。
 */
.race {
  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: #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;
}
.race[hidden] { display: none; }
.race :where(p, h2, h3, ul) { margin: 0; }
/* 用 :where 把重置的权重压到 0:后面单个 class 的按钮样式才盖得过它(road.css 那种写法会把背景吃掉) */
.race :where(button) { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.race button:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.race img { -webkit-user-drag: none; pointer-events: none; }
/* 按钮里面的字、金额、金币一律点不到:按下、松手、click 都落在按钮本身。别人每押一注(推送 ~4 次 / 秒),
   那匹马格子里的赔率、我的注、全场那一块就整段重写,金额还会被 PA 金币那层换成新的 <span>+<img>;
   鼠标、触控板按在上面的话,松手时按下去的那个元素已经没了,浏览器不发 click(10-16 冲天鹰同一个毛病) */
.race button > *, .race button * { pointer-events: none; }

/* ---------- 顶栏 ---------- */
.rc-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.rc-back, .rc-help { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.rc-back svg, .rc-help svg { width: 20px; height: 20px; }
.rc-help { color: var(--ink-2); font-weight: 700; }
.rc-title { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rc-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) { .rc-top { gap: 8px; padding-left: 12px; padding-right: 12px; } .rc-title { font-size: 15px; } .rc-bal { padding: 7px 10px; } }
/* 顶栏多了音符按钮(2026-10-23):间距收一点、余额框窄一点 */
.rc-top.rc-has-music { gap: 6px; }
.rc-top.rc-has-music .rc-bal { padding-inline: 10px; flex-shrink: 1; min-width: 0; }

/* ---------- 舞台 ---------- */
.rc-stage { position: relative; flex: 0 0 42%; min-height: 180px; max-height: 420px; overflow: hidden; background: #050506; }
.rc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 左上角:最近几场的冠军,号码方块,最新的描一圈柠檬色 */
.rc-recent { position: absolute; top: 8px; left: 10px; right: 58%; display: flex; gap: 3px; overflow: hidden; pointer-events: none; }
.rc-sq, .rc-plate {
  display: grid; place-items: center; flex: none; font-style: normal; font-weight: 800; line-height: 1;
  background: var(--c, #333); color: var(--k, #fff); font-variant-numeric: tabular-nums;
}
.rc-sq { width: 18px; height: 18px; border-radius: 4px; font-size: 11px; }
.rc-sq.is-new { box-shadow: 0 0 0 1.5px var(--neon); }
.rc-sq.is-ring, .rc-plate.is-ring { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
.rc-sq.is-new.is-ring { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 1.5px var(--neon); }

/* 右下角的主持人(一匹拿麦克风的马,四个表情叠在一起,只亮现在那一张):从舞台底边冒出来,
 * 高 = 舞台高度的 36%,最多 130px(跟 race-art.js 的 HOST_BOX 同一组数;race-stage.js 的冠军大图让出这一块)。
 * 摆在 canvas 上面、不接手指;身后一圈淡淡的柠檬色和压暗的底,让他在亮的冠军画面上也看得清。
 * 一张图读不到就整个不出场(is-missing)。 */
.rc-host {
  position: absolute; right: max(4px, env(safe-area-inset-right, 0px)); bottom: 0;
  height: 36%; max-height: 130px; aspect-ratio: 1 / 1; pointer-events: none;
}
.rc-host.is-missing { display: none; }
.rc-host::before {
  content: ''; position: absolute; left: 5%; top: 24%; width: 90%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .55) 72%, rgba(10, 10, 10, 0) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(229, 255, 61, .42);
}
.rc-host-fig { position: absolute; inset: 0; animation: rc-host-bob 2.6s ease-in-out infinite alternate; }
.rc-host-img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  opacity: 0; transform-origin: 50% 100%; transition: opacity .16s ease-out;
}
.rc-host-img.is-on { opacity: 1; animation: rc-host-pop .18s ease-out; }
/* 轻轻往下沉一点再回来(往上的话脚底会露出一条缝) */
@keyframes rc-host-bob { to { transform: translateY(3%); } }
@keyframes rc-host-pop { from { transform: scale(.92); } }
/* 关了动态效果:不晃、不弹、不淡入,表情照样换 */
@media (prefers-reduced-motion: reduce) {
  .rc-host-fig, .rc-host-img, .rc-host-img.is-on { animation: none; transition: none; }
}

/* 下方那一条:「下注 9」+ 一条会缩的柠檬色条 / 停止下注 / 换盘 / 取消 / 暂停。开跑和冠军画面在 canvas 上,这条收起来 */
.rc-banner {
  /* 放在跑道右半边的空地上(下注时马都挤在左边的闸里,别挡住 6 号),底边钉在主持人头顶上方 8px:
   * 用 bottom 钉住,字多换行时往上长,任何舞台尺寸都不会压到他 */
  position: absolute; right: 14px; bottom: calc(min(36%, 130px) + 8px); max-width: calc(58% - 14px);
  display: grid; justify-items: center; gap: 6px; padding: 8px 18px; border-radius: 16px;
  background: rgba(10, 10, 10, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font-size: 16px; font-weight: 800; text-align: center; pointer-events: none;
}
.rc-banner.is-race, .rc-banner.is-result { display: none; }
.rc-ban-row { display: flex; align-items: baseline; gap: 8px; }
.rc-ban-l { letter-spacing: .02em; }
.rc-sec { min-width: 1.4em; font-size: 24px; line-height: 1; color: var(--neon); font-variant-numeric: tabular-nums; }
.rc-bar { display: block; width: 168px; max-width: 60vw; height: 6px; border-radius: 999px; background: #2a2a2a; overflow: hidden; }
.rc-bar > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--neon); transform-origin: left center; }
.rc-banner.is-stop, .rc-banner.is-void, .rc-banner.is-paused { color: var(--ink); }
.rc-banner.is-flip, .rc-banner.is-wait { color: var(--ink-2); }

/* 冠军画面上我的结果(canvas 的横幅在上方,这块在下方) */
.rc-res {
  /* 跟倒数条同一个位置:右半边,底边钉在主持人头顶上方 8px */
  position: absolute; right: 14px; bottom: calc(min(36%, 130px) + 8px); max-width: calc(58% - 14px);
  display: grid; justify-items: center; gap: 2px; padding: 8px 18px; border-radius: 16px;
  background: rgba(10, 10, 10, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none;
  animation: rc-rise .28s ease-out both;
}
.rc-res[hidden] { display: none; }
.rc-res b { font-size: 24px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-res .rc-won { color: var(--neon); }
.rc-res .rc-lost, .rc-res .rc-got { font-size: 18px; color: var(--ink); }
.rc-res small { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* 输掉的钱「−RM x」:红字(没押中那行在小字的位置,大一号;押中但不够本的在大字的位置) */
.rc-res .rc-loss { font-weight: 800; color: var(--bad); }
.rc-res small.rc-loss { font-size: 15px; }
@keyframes rc-rise { from { opacity: 0; transform: translateY(8px); } }

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

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

/* 六匹马的格子:左上角号码牌、圆形骑手头像、赔率、我的注、全场押了多少 */
.rc-board { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-tile {
  position: relative; min-width: 0; min-height: 74px; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 8px 10px 8px 8px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: left;
  transition: transform .09s ease-out, opacity .2s ease-out, box-shadow .2s ease-out;
}
.rc-plate { position: absolute; top: 6px; left: 6px; z-index: 1; width: 20px; height: 20px; border-radius: 5px; font-size: 13px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.rc-plate.is-sm { position: static; width: 18px; height: 18px; border-radius: 4px; font-size: 11px; box-shadow: none; }
.rc-ava { width: 50px; height: 50px; border-radius: 50%; background: #0c0c0c; box-shadow: inset 0 0 0 1.5px #2c2c2c; overflow: hidden; }
.rc-ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-ava.is-missing img { display: none; }
.rc-info { display: grid; gap: 1px; min-width: 0; }
.rc-odds { font-size: 24px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-mine { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-mine em { font-style: normal; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rc-crowd { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-tile.is-on { box-shadow: inset 0 0 0 1px rgba(229, 255, 61, .45); }
.rc-tile.is-on .rc-mine em { color: var(--neon); }
.rc-tile.is-pend .rc-mine em { opacity: .55; }   /* 本机改了、服务器还没回 */
/* 押满了(个人上限或者这一场全场还能收的,连最小的筹码都放不进去):赔率暗下来;「我的注」后面那个点在矮屏幕上也看得到(全场那一行会藏起来) */
.rc-tile.is-full .rc-odds { opacity: .45; }
.rc-tile.is-full .rc-mine em::after { content: ' ·'; color: var(--ink-3); }
.rc-board.is-open .rc-tile:active { transform: scale(.97); }
.rc-board:not(.is-open) .rc-tile { opacity: .82; }
.rc-board.is-result .rc-tile { opacity: 1; }
.rc-tile.is-win { background: #1a1d08; box-shadow: inset 0 0 0 2px var(--neon); }
.rc-tile.is-win .rc-odds { color: var(--neon); }
.rc-board.is-result .rc-tile.is-dim { opacity: .38; }
/* 换盘:赔率一格一格翻过来(--i 是第几格) */
.rc-tile.is-flip .rc-info { animation: rc-flip .45s ease-out backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rc-flip { from { opacity: 0; transform: perspective(240px) rotateX(75deg); } }

/* ---------- 筹码那一排 + 撤销 / ×2 ---------- */
.rc-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } /* 一栏跟着面板宽,不被筹码那一排的最小宽度撑出去(390px 的手机 ×2 被切掉) */
.rc-rail { display: flex; align-items: center; gap: 6px; }
.rc-chips { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 4px; }
.rc-chip {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 46px; aspect-ratio: 1; 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: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rc-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: .55;
}
.rc-chip span { position: relative; }
.rc-chip.is-on { box-shadow: 0 0 0 2px var(--neon), 0 0 12px rgba(229, 255, 61, .4); }
.rc-chip.is-dim { opacity: .4; }
.rc-chip:active { transform: translateY(1px) scale(.94); }
.rc-act {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; align-content: center; gap: 1px;
  border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 10px; line-height: 1.1; color: var(--ink-2); -webkit-touch-callout: none;
}
.rc-act svg { width: 18px; height: 18px; color: var(--ink); }
.rc-act b { font-size: 16px; line-height: 1; color: var(--ink); }
.rc-act:active:not(:disabled) { transform: scale(.95); }
.rc-act:disabled { opacity: .35; }

.rc-limit { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-2); }
.rc-mytotal { flex: none; white-space: nowrap; }
.rc-mytotal b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-rule { min-width: 0; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 单送出去超过 0.3 秒还没回:合计那个数暗一点(格子照样可以点,改动排在后面一起送) */
.rc-panel.rc-wait .rc-mytotal b { opacity: .5; }

/* ---------- 下注动态 ---------- */
.rc-feed { display: grid; gap: 6px; padding-bottom: 10px; font-size: 13px; }
.rc-last { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 12px; }
.rc-last b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-last-l { color: var(--ink-3); }
.rc-tops { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-top-w { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-feed-h { font-size: 12px; color: var(--ink-3); }
.rc-rows { list-style: none; padding: 0; display: grid; }
.rc-rows li { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.rc-who { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-rows b { font-variant-numeric: tabular-nums; }
.rc-empty { padding: 4px 2px; font-size: 12px; color: var(--ink-3); }

/* 矮屏幕:舞台和格子收一点 */
@media (max-height: 700px) {
  .rc-stage { flex-basis: 38%; }
  .rc-tile { min-height: 64px; grid-template-columns: 42px minmax(0, 1fr); }
  .rc-ava { width: 42px; height: 42px; }
  .rc-odds { font-size: 21px; }
  .rc-act { width: 44px; height: 44px; }
}
@media (max-height: 600px) {
  .rc-stage { flex-basis: 34%; min-height: 160px; }
  .rc-crowd { display: none; }
}
@media (max-width: 340px) {
  .rc-body { padding-left: 10px; padding-right: 10px; }
  .rc-tile { grid-template-columns: 38px minmax(0, 1fr); gap: 6px; padding-right: 8px; }
  .rc-ava { width: 38px; height: 38px; }
  .rc-odds { font-size: 19px; }
  .rc-act { width: 44px; }
}