/* ==========================================================================
   金局 · 全局视觉升级 v2
   --------------------------------------------------------------------------
   这是一层「叠加」样式：只重定义变量（字体 / 色板 / 圆角 / 阴影 / 字距），
   不重写任何布局规则。所有页面自动继承，不会打乱既有栅格。
   加载顺序：必须在 theme.css / style.css / arena.css 之后。
   ========================================================================== */

/* ── 自托管 Inter 可变字体 ───────────────────────────────────────────── */
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'InterVariable';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var-italic.woff2') format('woff2');
}

:root {
  /* ── 字体栈 ──────────────────────────────────────────────────────────
     英文优先自托管 Inter；中文按「现代感 + 字形完整」排序：
     PingFang（macOS）→ HarmonyOS Sans（华为）→ MiSans（小米）
     → Source Han Sans / Noto Sans SC → 微软雅黑兜底。 */
  --font-sans:
    'InterVariable', 'Inter',
    -apple-system, 'Segoe UI Variable Display', 'Segoe UI',
    'PingFang SC', 'HarmonyOS Sans SC', 'MiSans',
    'Source Han Sans SC', 'Noto Sans SC', 'Microsoft YaHei',
    system-ui, sans-serif;
  --font-display:
    'InterVariable', 'Inter',
    -apple-system, 'Segoe UI Variable Display',
    'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Source Han Sans SC',
    system-ui, sans-serif;
  --font-mono:
    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
    'Roboto Mono', Consolas, monospace;

  /* Inter 的替代字形：更几何的 a/g/l，数字更紧凑 */
  --font-feat: 'cv02', 'cv03', 'cv04', 'cv11';

  /* ── 色板：降低饱和，拉开中性层级 ──────────────────────────────────── */
  --ink-0: #07080b;
  --ink-1: #0b0d12;
  --ink-2: #11141a;
  --ink-3: #171b23;
  --panel: rgba(17, 20, 26, .84);
  --panel-solid: #11141a;
  --line: rgba(255, 255, 255, .075);
  --line-strong: rgba(255, 255, 255, .15);
  --text: #f4f6fa;
  --text-dim: #a2adbf;
  --text-mute: #6d7789;

  /* 主色：克制的香槟金，比原来的 #e9c46a 更收敛 */
  --gold: #d9bd7f;
  --gold-bright: #f2ddae;
  --gold-deep: #b3945a;
  --jade: #34c9a5;
  --danger: #f4736a;
  --warn: #f0c76b;

  --accent: var(--gold);
  --accent-bright: var(--gold-bright);
  --accent-deep: var(--gold-deep);
  --accent-ink: #1a1408;

  /* ── 圆角 ──────────────────────────────────────────────────────────── */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  /* ── 阴影：更柔、更深、更少发光 ────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .32), 0 1px 2px rgba(0, 0, 0, .22);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .22);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .28);
  --glow: 0 8px 26px rgba(217, 189, 127, .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .2s;
}

/* ── 全局字体与渲染 ──────────────────────────────────────────────────── */
html,
body,
input,
select,
textarea,
button {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feat);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* theme.css 原本在 body 上叠了一层 rgba(46,196,166,.10) 的青绿色光晕，
   整站因此泛绿；lobby-pro.css 的 .player-mode 又叠了一层更浓的。
   这两处都用 !important 压死，统一成紫 + 蓝两条极淡光晕。 */
body,
body.player-mode,
/* ── 大厅背景：去掉 lobby-pro.css 的青绿光晕，换成同色系 ───────────────── */
.player-mode {
  background:
    radial-gradient(1100px 560px at 10% -12%, rgba(139, 124, 255, .10), transparent 62%),
    radial-gradient(900px 480px at 94% -4%, rgba(56, 189, 248, .065), transparent 58%),
    linear-gradient(180deg, var(--ink-1), var(--ink-0) 58%) !important;
  background-attachment: fixed !important;
}

/* ── 标题层级：更紧的字距 + 更明确的字重 ─────────────────────────────── */
h1, h2, h3, h4,
.brand b,
.section-heading h2,
.view-head h2,
.player-page-heading h1 {
  font-family: var(--font-display);
  letter-spacing: -.024em;
  font-weight: 750;
}
h1 { letter-spacing: -.032em; font-weight: 800; }
h2 { letter-spacing: -.022em; }
h3, h4 { letter-spacing: -.014em; font-weight: 700; }

/* 正文段落行高与可读性 */
p, li, dd, dt, label, .muted-text, .form-note, .pay-note {
  letter-spacing: .002em;
}
p { line-height: 1.78; }

/* ── 数字一律表格化对齐，避免余额/流水跳动 ───────────────────────────── */
td, th,
.metric strong,
.intro-stats b,
.hero-stats b,
.econ-hero strong,
#wallet,
#wallet-total,
#profile-balance,
.wallet-balance strong,
.pay-row strong {
  font-variant-numeric: tabular-nums;
}

/* 展示型大数字用等宽字体，更像数据面板 */
.intro-stats b,
.hero-stats b,
.metric strong,
.econ-hero strong,
.wallet-balance strong {
  font-family: var(--font-mono);
  letter-spacing: -.015em;
  font-weight: 700;
}

/* 代码 / 单号 / 地址 */
.mono,
code,
kbd,
samp {
  font-family: var(--font-mono);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ── 小标签统一：字距收紧一点，不再松散 ─────────────────────────────── */
.eyebrow,
.card-kicker,
.tag,
.live-pill,
.safe-label,
.spotlight-kicker,
.nav-count {
  font-family: var(--font-display);
  letter-spacing: .15em;
  font-weight: 650;
}

/* ── 按钮：字重与字距统一 ────────────────────────────────────────────── */
button,
.button,
.pay-submit,
.pay-refresh,
.pay-chip,
.lp-submit,
.lp-alt,
.game-filters button,
.record-tabs button,
.activity-tabs button {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feat);
  letter-spacing: .004em;
  font-weight: 600;
}
.button-primary,
.pay-submit,
.lp-submit {
  font-weight: 700;
}

/* ── 表单控件：统一字体与占位符颜色 ──────────────────────────────────── */
input,
select,
textarea {
  font-family: var(--font-sans);
  font-size: 14.5px;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-mute);
  font-weight: 400;
}

/* ── 表格：表头更克制，数字右对齐更专业 ─────────────────────────────── */
th {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: .04em;
  font-size: 11.5px;
  text-transform: uppercase;
  color: var(--text-mute);
}
td {
  font-variant-numeric: tabular-nums;
}

/* ── 链接与焦点态：更清晰的键盘可达性 ────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(217, 189, 127, .65);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 滚动条：更细更暗，不再抢视线 ────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
}
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .13);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .22);
  background-clip: padding-box;
}

/* ── 选中文本 ────────────────────────────────────────────────────────── */
::selection {
  background: rgba(217, 189, 127, .28);
  color: #fff;
}

/* ── 管理后台配色归一 ────────────────────────────────────────────────────
   admin-theme.css 自带一套 --admin-* 变量（深蓝紫底 + 艳金），与本套色板
   两套并存。这里把它们映射到统一变量上，后台就跟着整体视觉一起变。
   design-v2.css 在 admin-theme.css 之后加载，同优先级后者胜出。 */
:root {
  --admin-bg-darkest: var(--ink-0);
  --admin-bg-dark: var(--ink-1);
  --admin-bg-card: var(--ink-2);
  --admin-bg-hover: var(--ink-3);
  --admin-gold: var(--gold);
  --admin-gold-dark: var(--gold-deep);
  --admin-gold-glow: rgba(217, 189, 127, .24);
}

/* ── 覆盖 arena.css 的「赌场红」主按钮 ──────────────────────────────────
   arena.css 里 #player-panel .button-primary 是 ID 级优先级，写死了 #b93549，
   普通类选择器压不住；这里用同等优先级把它拉回金色主色。 */
#player-panel .button-primary,
.room-view .button-primary {
  background: linear-gradient(152deg, var(--gold-bright) 0%, var(--gold) 58%, var(--gold-deep) 100%);
  border-color: var(--gold-deep);
  color: var(--accent-ink);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    0 6px 18px rgba(217, 189, 127, .16);
}
#player-panel .button-primary:hover:not(:disabled),
.room-view .button-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    0 10px 26px rgba(217, 189, 127, .26);
}

/* ── 3D 画布必须撑满宿主容器 ────────────────────────────────────────────
   scene3d/rig.js 里用的是 renderer.setSize(w, h, false)，第三参数 false
   表示「只改 buffer 尺寸，不写 canvas 的内联样式」。canvas 的实际显示尺寸
   完全靠 CSS 决定，而这条规则原本只写在 hall3d.css 里 —— /fish 和 /slot
   不加载那个文件，于是 canvas 退回浏览器默认 300×150，3D 画面被压成一条。
   这里提升为全局规则，所有三个 3D 页面共用。 */
.scene3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  touch-action: pan-y;
}

/* 容器上的装饰覆盖层（斜纹 / 光晕）必须待在 3D 画布下面，
   否则会把整个场景盖成一片纹理。 */
.fish-ocean::after,
.scene-band::after,
#lounge-scene::after,
.hero-hall::after {
  z-index: 0;
  pointer-events: none;
}

/* 3D 宿主容器统一给高度，避免 clientHeight 为 0 时 resize 出 0×0 画布 */
.fish-ocean,
#ocean {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}
/* ── 大厅背景：去掉 lobby-pro.css 的青绿光晕，换成同色系 ───────────────── */
.player-mode {
  background:
    radial-gradient(120% 58% at 50% -10%, rgba(217, 189, 127, .13) 0%, rgba(217, 189, 127, 0) 56%),
    radial-gradient(90% 48% at 8% 6%, rgba(139, 124, 255, .10) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #08090d 0%, #06070a 60%, #040507 100%);
}

/* ── 登录 / 后台面板横向溢出收口 ────────────────────────────────────────────
   实测 1440 视口下 #login-panel 内容宽 1515（容器 1408），把整页顶出 92px 横向滚动。
   原因：grid 子项 .auth-card 的 min-width:auto 按 min-content 撑开轨道。 */
#login-panel.auth-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  overflow-x: clip;
}

#login-panel > *,
#login-panel .auth-card,
#login-panel .auth-intro {
  min-width: 0 !important;
}

@media (min-width: 1001px) {
  #login-panel.auth-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px) !important;
  }
}

/* ══ 大厅：按类型分区的游戏区块 ══════════════════════════════════════════ */
.game-section { margin-top: 26px; }
.game-section:first-of-type { margin-top: 6px; }
.game-section .section-heading { margin: 0 0 12px; }

.section-count {
  font-size: 11px;
  color: #8b98a8;
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(255, 255, 255, .03);
}

/* ══ PG 风格电子游戏卡：霓虹底 + 缓慢扫光 ═════════════════════════════════ */
.pg-card .game-art {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pg-card .game-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .16), rgba(0, 0, 0, 0) 62%);
  z-index: 0;
}

.pg-card .game-art::after {
  content: '';
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg,
      rgba(255, 255, 255, 0) 0 62%,
      rgba(255, 214, 120, .38) 74%,
      rgba(255, 255, 255, 0) 86% 100%);
  animation: pgSweep 7s linear infinite;
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}

@keyframes pgSweep { to { transform: rotate(360deg); } }

.pg-card .game-icon {
  position: relative;
  z-index: 1;
  font-size: 62px;
  line-height: 1;
  text-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 214, 120, .4);
}

.pg-card .game-copy { position: relative; z-index: 1; }

.pg-card .tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 214, 120, .12);
  border: 1px solid rgba(255, 214, 120, .28);
  color: #f0d08a;
}

@media (prefers-reduced-motion: reduce) {
  .pg-card .game-art::after { animation: none; opacity: .25; }
}
/* 大厅「安卓 App」下载入口：与会员中心快捷项同款 */
.lounge-shortcuts a.app-download {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(233, 196, 106, .28);
  background: linear-gradient(135deg, rgba(233, 196, 106, .1), rgba(233, 196, 106, .02));
  color: inherit;
  text-decoration: none;
  min-height: 56px;
}

.lounge-shortcuts a.app-download:active { transform: scale(.985); }

.lounge-shortcuts a.app-download b {
  font-size: 13.5px;
  color: #f0f5f0;
}

.lounge-shortcuts a.app-download small {
  font-size: 10.5px;
  color: #8b9aa8;
}