/* 牛加水 · 黑金柠檬。牌全是 CSS,没有图片 —— 照设计规范「只有角色是图片,其余全 CSS」 */
.ngau {
  position: fixed; inset: 0; z-index: 10; overflow: hidden auto;
  --vh: 100vh;
  --bg: #0a0a0a; --surface: #151515; --surface-2: #1c1c1c; --line: #242424;
  --ink: #fff; --ink-2: #8a8a8a; --neon: #e5ff3d; --neon-ink: #0a0a0a; --bad: #ff5a5a;
  background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
@supports (height: 100dvh) { .ngau { --vh: 100dvh; } }
.ngau[hidden] { display: none; }
/* 按钮里面的字、金额、金币一律点不到:按下、松手、click 都落在按钮本身。
   每秒的轮询会改按钮里面的字(大厅那一行的人数、庄家),金额还会被 PA 金币那层换成新的 <span>+<img>,不能让手指落在会被换掉的东西上 */
.ngau button > *, .ngau button * { pointer-events: none; }
.ngau p, .ngau h2 { margin: 0; }
/* :where() 让这条重置不占权重 —— 不然 `.ngau button` (0,1,1) 会压过下面每一条
   `.ng-xxx` (0,1,0),把按钮自己的底色全吃掉。老坑了,牛牛那边也踩过 */
.ngau :where(button) { appearance: none; border: 0; margin: 0; font: inherit; color: inherit; background: none; cursor: pointer; }

.ng-wrap {
  min-height: var(--vh); display: flex; flex-direction: column; gap: 14px;
  padding: calc(var(--safe-t, 0px) + 12px) 16px calc(var(--safe-b, 0px) + 20px);
}
.ng-top { display: flex; align-items: center; gap: 12px; }
.ng-top h2 { flex: 1; text-align: center; font-size: 18px; font-weight: 800; }
.ng-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface); font-size: 22px; line-height: 1; }
.ng-bal { min-width: 40px; text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ng-help { width: 32px; height: 32px; font-size: 15px; font-weight: 800; color: var(--ink-2); }
.ng-lead { text-align: center; font-size: 13px; color: var(--ink-2); }
.ng-link { display: inline; padding: 0; font-size: inherit; color: var(--neon); text-decoration: underline; text-underline-offset: 3px; }
/* 玩法说明里的赔率表:牌型 + 倍数一行,倍数靠右、柠檬色 */
.ng-odds { list-style: none; padding: 0; }
.ng-odds li { display: flex; align-items: baseline; gap: 8px; }
.ng-odds li span { color: var(--ink-2); font-size: 12px; }
.ng-odds li i { margin-left: auto; font-style: normal; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums; }

/* ---------- 选桌 ----------
   按档位分组,一档底下几张桌。想做庄就挑一张「空桌」—— 空桌用柠檬色标出来,
   扫一眼就知道哪张能坐 */
.ng-tier { display: grid; gap: 8px; }
.ng-tier + .ng-tier { margin-top: 6px; }
.ng-tier-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
.ng-tier-top b { flex: none; font-size: 16px; font-weight: 800; white-space: nowrap; }
/* 说明那半边可以缩、可以换行,档位名不行 —— 不然「入门房」会断成「入门 / 房」 */
.ng-tier-top small { min-width: 0; text-align: right; font-size: 11px; line-height: 1.5; color: var(--ink-2); }
.ng-tier-top small i { font-style: normal; font-variant-numeric: tabular-nums; }
.ng-tables { display: grid; gap: 6px; }
.ng-table-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line); text-align: left;
}
.ng-table-row.is-free { box-shadow: inset 0 0 0 1px rgba(229, 255, 61, .35); }
.ng-no {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: var(--surface-2); font-size: 13px; font-weight: 800; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ng-table-row.is-free .ng-no { background: var(--neon); color: var(--neon-ink); }
.ng-table-state { flex: 1; min-width: 0; font-size: 13px; }
.ng-table-state { display: flex; align-items: baseline; gap: 8px; }
.ng-table-state i { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-table-state span { color: var(--ink-2); }
.ng-j { flex: none; font-size: 12px; color: var(--ink-2); }
.ng-free { color: var(--neon); }
.ng-table-n { flex: none; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ng-arrow { flex: none; font-style: normal; color: var(--ink-2); }
.ng-empty { text-align: center; padding: 40px 0; color: var(--ink-2); font-size: 14px; }

/* 一张牌:白底黑字,红花色转红。没有图片 */
.ng-card {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 30px; height: 42px; border-radius: 5px; background: #f4f1ea; color: #111;
  font-style: normal; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.ng-card b { font-size: 14px; font-weight: 800; }
.ng-card span { font-size: 11px; }
.ng-card.is-red { color: #d0342c; }
.ng-card.is-back { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ng-card.is-joker { background: var(--neon); color: var(--neon-ink); font-size: 8px; font-weight: 800; letter-spacing: -.02em; }

/* ---------- 注码盘 ---------- */
.ng-hint { text-align: center; font-size: 13px; color: var(--ink-2); }
.ng-rack { display: flex; gap: 8px; justify-content: center; }
/* 一颗筹码:黑饼 + 柠檬色边条。边条是 conic-gradient 挖出来的,没有图片 */
.ng-coin {
  position: relative; flex: 1; max-width: 68px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 36%, #262626 0%, #141414 72%);
  box-shadow: inset 0 0 0 2px rgba(229, 255, 61, .45), 0 2px 6px rgba(0, 0, 0, .6);
  font-size: 15px; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums;
}
.ng-coin::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(229, 255, 61, .55) 0 13deg, transparent 13deg 45deg);
  -webkit-mask-image: radial-gradient(circle, transparent 63%, #000 64%);
  mask-image: radial-gradient(circle, transparent 63%, #000 64%);
}
.ng-coin:active { transform: translateY(1px) scale(.95); }
.ng-coin.is-max {
  background: var(--neon); color: var(--neon-ink); font-size: 13px;
  box-shadow: inset 0 0 0 2px rgba(10, 10, 10, .28), 0 2px 6px rgba(0, 0, 0, .6);
}
.ng-coin.is-max::before { background: repeating-conic-gradient(from 0deg, rgba(10, 10, 10, .3) 0 13deg, transparent 13deg 45deg); }

/* 做庄面板:要选的只有鬼牌几张,庄钱是这张桌写死的 */
.ng-jokers { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ng-joker {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
}
.ng-note { text-align: center; font-size: 11px; color: var(--ink-2); }
.ng-joker.is-on { background: var(--neon); color: var(--neon-ink); box-shadow: none; }
.ng-joker:active { transform: scale(.95); }

.ng-go { display: flex; gap: 8px; }
/* 下庄是「往回走」的动作,不给柠檬色 —— 那个颜色留给「往前推」的键 */
.ng-quit {
  flex: 1; min-height: 52px; border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.ng-quit[disabled] { color: var(--ink-2); }
/* 已经排队等下庄:描一圈柠檬,提醒他这局完了就走 */
.ng-quit.is-armed { box-shadow: inset 0 0 0 1.5px var(--neon); color: var(--neon); }
.ng-quit:active:not([disabled]) { transform: scale(.98); }
.ng-clear {
  flex: none; width: 60px; min-height: 52px; border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.ng-ok {
  flex: 1; min-height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--neon); color: var(--neon-ink); font-size: 16px; font-weight: 800;
}
.ng-ok b { font-variant-numeric: tabular-nums; }
.ng-ok[disabled] { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
/* 余额不够做庄:样子跟灰掉的一样,但按得到(按了提示 + 开充值,不送做庄) */
.ng-ok.is-short { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ng-clear[disabled] { opacity: .38; }
.ng-ok:active:not([disabled]), .ng-clear:active:not([disabled]) { transform: scale(.98); }

/* ---------- 牌桌 ---------- */
.ng-table {
  min-height: var(--vh); display: flex; flex-direction: column;
  padding: calc(var(--safe-t, 0px) + 12px) 16px calc(var(--safe-b, 0px) + 16px);
}
/* 绒面:上缘一道黄细弧,往下越来越黑 —— 跟大话骰那张桌子同一套语言 */
.ng-felt {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 10px -16px 0; padding: 18px 16px 0;
  border-radius: 50% 50% 0 0 / 56px 56px 0 0;
  background: radial-gradient(120% 90% at 50% 0%, #1b1b1b 0%, #121212 42%, var(--bg) 78%);
  box-shadow: inset 0 1px 0 rgba(229, 255, 61, .55);
}
/* 荷官:大厅封面那头牛。图是纯黑底,四边淡出去融进绒面 */
.ng-dealer {
  position: absolute; left: 50%; top: -14px; width: 36%; max-width: 140px;
  transform: translateX(-50%); opacity: .28; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 85%),
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 85%),
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

.ng-seat { position: relative; z-index: 2; width: 100%; display: grid; gap: 7px; justify-items: center; }
.ng-seat.is-me { padding-bottom: 2px; }
.ng-seat.is-me .ng-card { width: 40px; height: 56px; }
.ng-seat.is-me .ng-card b { font-size: 18px; }
.ng-seat.is-me .ng-card span { font-size: 14px; }
.ng-self { flex: none; font-size: 11px; font-weight: 700; color: var(--neon); }
/* 只让对手区横向滚动,本人手牌不随人数变多而被挤出屏幕。 */
.ng-opponents {
  position: relative; z-index: 2; display: flex; gap: 12px;
  width: 100%; min-width: 0; overflow-x: auto; padding: 4px 0 8px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.ng-opponents > .ng-seat { flex: 0 0 160px; min-width: 0; scroll-snap-align: start; }
.ng-opponents > .ng-seat:only-child { flex-basis: 100%; }
.ng-opponents .ng-who { box-sizing: border-box; width: 100%; }
.ng-opponents .ng-who > div { flex: 1; }
.ng-opponents:focus-visible { outline: 1px solid var(--neon); outline-offset: 2px; }
.ng-who {
  display: flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  background: rgba(10, 10, 10, .72); backdrop-filter: blur(6px);
}
.ng-who > div { min-width: 0; }
.ng-who b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 一行写完,写不下就截断 —— 让它换行会把名牌撑成一坨盖住头像 */
.ng-who small { display: block; font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-who small b { display: inline; font-size: inherit; font-weight: 700; color: var(--ink-2); }
.ng-av {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--surface-2); font-size: 15px; font-weight: 800;
}
.ng-seat.is-on .ng-av { background: var(--neon); color: var(--neon-ink); }
.ng-delta { font-style: normal; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ng-delta.up { color: var(--neon); }
.ng-delta.down { color: var(--bad); }
.ng-nobanker { position: relative; z-index: 2; padding: 22px 0; color: var(--ink-2); font-size: 14px; }

.ng-mid { position: relative; z-index: 2; margin: auto 0; display: flex; align-items: center; gap: 10px; }
.ng-felt { gap: 8px; }
.ng-phase { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.ng-clock {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--neon);
  font-size: 18px; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums;
}
.ng-others { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ng-other { padding: 4px 10px; border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--ink-2); }
.ng-other.is-in { color: var(--ink); box-shadow: inset 0 0 0 1px var(--neon); }
.ng-vs { position: relative; z-index: 2; padding-bottom: 6px; display: grid; gap: 3px; justify-items: center; }
.ng-vs-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.ng-vs-row b { font-weight: 700; color: var(--ink); }
.ng-vs-row .ng-delta { font-size: 12px; }
.ng-tie { font-style: normal; }

.ng-acts { flex: none; display: grid; gap: 10px; padding-top: 14px; }

/* 五张的摆法:上面两张是「头」(定点数),下面三张是「底」(凑 10 的倍数)。
   真桌上就这么摆,而且一眼看得出这手牌为什么是这个点数 */
.ng-cards { display: grid; gap: 4px; justify-items: center; }
.ng-row, .ng-head { display: flex; gap: 4px; }
.ng-head .ng-card { box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 1px var(--neon); }

@media (max-height: 680px) {
  .ng-opponents .ng-card { width: 26px; height: 36px; }
  .ng-seat.is-me .ng-card { width: 36px; height: 48px; }
  .ng-acts { gap: 8px; padding-top: 8px; }
}