/* ==========================================================================
   金局 · App 原生层（app-native.css）
   --------------------------------------------------------------------------
   目标：把页面从「网页」改成「安卓 App」的观感。
   原则：
     1. 系统字体优先，不用 Inter / 不用字距拉宽的英文小标
     2. 扁平：实色面板 + 1px 分隔线，去掉大阴影、外发光、锥形扫光
     3. 圆角收紧（20px → 12px），按钮不再是发光胶囊
     4. 游戏列表改成「缩略图 + 标题 + 说明 + 箭头」的原生列表行
     5. 折叠屏/平板单独断点，不靠拉伸填满
   ========================================================================== */

:root {
  --app-bg: #0a0a0d;
  --app-surface: #141419;
  --app-surface-2: #1b1b22;
  --app-line: rgba(255, 255, 255, .08);
  --app-line-strong: rgba(255, 255, 255, .14);
  --app-text: #eceff3;
  --app-text-dim: #9aa3af;
  --app-text-mute: #6b7480;
  --app-gold: #e8b64c;
  --app-green: #30a46c;
  --app-red: #e5484d;
  --app-radius: 12px;
}

/* ── 1. 全局排版 ──────────────────────────────────────────────────────── */
html,
body {
  font-family: system-ui, -apple-system, "Roboto", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif !important;
  background: var(--app-bg) !important;
  background-image: none !important;
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body,
.player-mode,
.app-shell {
  background-image: none !important;
  background: var(--app-bg) !important;
}

input,
textarea,
select {
  -webkit-user-select: text;
  user-select: text;
}

h1, h2, h3, h4 {
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

/* 英文小标 / 大写字距 —— AI 感最重的一处，App 内全部隐藏 */
.eyebrow,
.spotlight-kicker,
.scene-kicker,
.card-kicker,
.vip-kicker,
.section-count {
  display: none !important;
}

/* ── 2. 顶部栏 ────────────────────────────────────────────────────────── */
.topbar {
  background: var(--app-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--app-line) !important;
  min-height: 56px !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
}

.brand-mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: var(--app-gold) !important;
  color: #14100a !important;
  font-size: 19px !important;
  font-weight: 800;
  box-shadow: none !important;
}

.brand b {
  font-size: 17px !important;
  letter-spacing: 0 !important;
}

.brand small {
  font-size: 10px !important;
  color: var(--app-text-mute) !important;
  letter-spacing: 0 !important;
}

/* ── 3. 按钮：实色、小圆角、无外发光 ──────────────────────────────────── */
.button,
.button-primary,
.button-dark,
.hero-ghost,
#player-panel .button-primary,
.pay-submit,
.slot-btn,
.fish-fire,
.mj-spin,
.bb-spin {
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.button-primary,
#player-panel .button-primary,
.pay-submit,
.slot-btn,
.fish-fire,
.mj-spin,
.bb-spin {
  background: var(--app-gold) !important;
  color: #14100a !important;
  border: 0 !important;
}

.button-dark,
.hero-ghost {
  background: var(--app-surface-2) !important;
  border: 1px solid var(--app-line-strong) !important;
  color: var(--app-text) !important;
}

.button:active,
.button-primary:active,
.pay-submit:active,
.slot-btn:active {
  filter: brightness(.92);
}

/* ── 4. 首屏：去掉聚光与辉光，压成信息头 ──────────────────────────────── */
#lounge-scene,
#player-panel .scene-band,
#player-panel .hero-hall.scene-band {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#lounge-scene .scene-caption h1,
#player-panel .hero-hall h1 {
  font-size: 22px !important;
  letter-spacing: 0 !important;
}

#lounge-scene .scene-caption p,
#player-panel .hero-hall p {
  color: var(--app-text-dim) !important;
  font-size: 12.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8) !important;
}

.hero-stats b { font-size: 16px !important; }
.hero-stats span { font-size: 10.5px !important; color: var(--app-text-mute) !important; }

/* ── 5. 面板：实色 + 发丝线 ──────────────────────────────────────────── */
.lounge-account,
.vip-banner,
.pay-card,
.slot-paytable,
.fish-table,
.mj-paytable,
.bb-bets,
.slot-detail {
  background: var(--app-surface) !important;
  background-image: none !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: none !important;
}

.vip-banner { border-color: rgba(232, 182, 76, .2) !important; }

/* ── 6. 游戏列表：原生行布局 ─────────────────────────────────────────── */
.game-section { margin-top: 20px !important; }

.game-section .section-heading {
  margin: 0 0 8px !important;
  padding: 0 2px;
}

.game-section .section-heading h2 {
  font-size: 16px !important;
  color: var(--app-text) !important;
}

.game-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--app-surface) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  overflow: hidden;
}

.game-card,
.game-card.featured {
  position: relative;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--app-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.game-card:last-child { border-bottom: 0 !important; }
.game-card:active { background: rgba(255, 255, 255, .04) !important; }

.game-card .game-art {
  width: 54px !important;
  height: 54px !important;
  min-height: 0 !important;
  border-radius: 10px !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--app-surface-2) !important;
  box-shadow: none !important;
}

.game-card .game-art::before,
.game-card .game-art::after { display: none !important; }

.game-card .game-icon {
  font-size: 24px !important;
  text-shadow: none !important;
  filter: none !important;
}

.game-card .game-copy {
  display: grid !important;
  gap: 2px !important;
  padding: 0 !important;
  align-content: center !important;
  min-width: 0 !important;
}

.game-card .game-copy h3 {
  font-size: 15px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  color: var(--app-text) !important;
}

.game-card .game-copy p {
  font-size: 11.5px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  color: var(--app-text-mute) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-card .game-copy .tag { display: none !important; }

/* 有链接的卡：整行可点，箭头指示 */
.game-card:has(> .game-copy > a)::after {
  content: "›";
  font-size: 20px;
  line-height: 1;
  color: var(--app-text-mute);
  justify-self: end;
}

.game-card:has(> .game-copy > a) > .game-copy > a {
  position: absolute;
  inset: 0;
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
}

/* 需要按钮的卡（棋牌匹配）：按钮放进右侧列 */
.game-card:has(> .game-copy > button) {
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
}

.game-card:has(> .game-copy > button) > .game-copy > button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  background: var(--app-surface-2) !important;
  border: 1px solid var(--app-line-strong) !important;
  color: var(--app-text) !important;
  white-space: nowrap;
  margin: 0 !important;
  justify-self: end;
  position: relative;
  z-index: 2;
}

/* 会员中心快捷项 */
.lounge-shortcuts {
  gap: 8px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.lounge-shortcuts button,
.lounge-shortcuts a.app-download {
  background: var(--app-surface) !important;
  background-image: none !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: none !important;
  padding: 12px !important;
  min-height: 60px !important;
}

.lounge-shortcuts b { font-size: 13px !important; }
.lounge-shortcuts small { font-size: 10.5px !important; color: var(--app-text-mute) !important; }

/* ── 7. 底部导航：扁平系统栏 ──────────────────────────────────────────── */
.player-navigation,
#player-navigation {
  background: #0e0e13 !important;
  background-image: none !important;
  border-top: 1px solid var(--app-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.player-navigation button,
#player-navigation button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--app-text-mute) !important;
  box-shadow: none !important;
}

.player-navigation button[aria-current="page"],
#player-navigation button[aria-current="page"] {
  background: transparent !important;
  color: var(--app-gold) !important;
  box-shadow: none !important;
}

.player-navigation button[aria-current="page"]::before,
#player-navigation button[aria-current="page"]::before { display: none !important; }

.player-navigation button svg,
#player-navigation button svg { width: 22px !important; height: 22px !important; }

.player-navigation button span,
#player-navigation button span {
  font-size: 10.5px !important;
  letter-spacing: 0 !important;
}

/* ── 8. 去装饰动效（保留中奖弹幕与滚轴）──────────────────────────────── */
.pg-card .game-art::after,
.pg-card .game-art::before,
.login-fx,
.glow-orb,
.live-pill::after,
.vip-banner::after {
  display: none !important;
  animation: none !important;
}

/* ── 9. 折叠屏 / 平板断点 ────────────────────────────────────────────── */
@media (min-width: 600px) {
  main {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 16px 20px 28px !important;
  }

  .game-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .game-card { border-right: 1px solid var(--app-line) !important; }
  .game-card:nth-child(2n) { border-right: 0 !important; }

  .lounge-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  #lounge-scene,
  #player-panel .hero-hall.scene-band {
    border-radius: var(--app-radius) !important;
    height: 220px !important;
  }
}

@media (min-width: 900px) {
  main { max-width: 1040px !important; }

  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .game-card { border-right: 1px solid var(--app-line) !important; }
  .game-card:nth-child(2n) { border-right: 1px solid var(--app-line) !important; }
  .game-card:nth-child(3n) { border-right: 0 !important; }

  .lounge-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ══ 修正：整行覆盖链接里的图标会画在文字上 ═════════════════════════════ */
.game-card:has(> .game-copy > a) > .game-copy > a > * {
  display: none !important;
}

/* ══ 首屏压缩到 App 尺寸（网页版那股大图先压下去）══════════════════════ */
#lounge-scene,
#player-panel .hero-hall.scene-band {
  height: 196px !important;
  min-height: 196px !important;
  max-height: 196px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#player-panel .hero-hall .scene-caption {
  left: 16px !important;
  right: 16px !important;
  bottom: 12px !important;
  max-width: none !important;
  top: auto !important;
}

#player-panel .hero-hall h1 {
  font-size: 19px !important;
  line-height: 1.25 !important;
  margin: 0 0 2px !important;
  white-space: nowrap !important;
}

#player-panel .hero-hall p {
  font-size: 11.5px !important;
  margin: 0 0 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#player-panel .hero-hall .hero-actions {
  gap: 8px !important;
}

#player-panel .hero-hall .hero-actions .button,
#player-panel .hero-hall .hero-actions a {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
}

#player-panel .hero-hall .hero-actions svg {
  width: 14px !important;
  height: 14px !important;
}

/* 首屏统计条在小屏没有信息价值，隐藏 */
#player-panel .hero-hall .hero-stats {
  display: none !important;
}

/* 余额卡去渐变 */
.lounge-account,
.lounge-account > *,
.account-greeting,
.vip-banner,
.vip-banner > * {
  background-image: none !important;
}

.lounge-account {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
}

/* VIP 横幅里的金按钮改成描边，避免整屏只有一块亮金色 */
.vip-banner .vip-banner-cta,
.vip-banner .button-primary {
  background: transparent !important;
  border: 1px solid rgba(232, 182, 76, .5) !important;
  color: var(--app-gold) !important;
  box-shadow: none !important;
}
/* ══ 行内链接：完全透明，只做点击热区 ═══════════════════════════════════ */
.game-card > .game-copy > a,
.game-card > .game-copy > a.button,
.game-card > .game-copy > a.button-dark,
.game-card > .game-copy > a.button-primary {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  z-index: 3;
}

.game-card > .game-copy > a > * {
  display: none !important;
}
/* ══ 列表箭头（用背景图，避免伪元素被绝对定位链接挤掉）══════════════════ */
.game-card {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 15px 15px !important;
}

/* 带按钮的行不用箭头（按钮自带可点性） */
.game-card:has(> .game-copy > button) {
  background-image: none !important;
  padding-right: 14px !important;
}
/* ══ 老虎机顶部切换器：横向滑动的原生 chip 条 ═══════════════════════════ */
.slot-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  gap: 8px !important;
  padding: 4px 16px 12px !important;
  margin: 0 -16px 8px !important;
  scrollbar-width: none;
}

.slot-nav::-webkit-scrollbar { display: none; }

.slot-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--app-text-dim);
  background: var(--app-surface);
  border: 1px solid var(--app-line);
}

.slot-nav a.on {
  background: var(--app-gold);
  border-color: transparent;
  color: #14100a;
  font-weight: 700;
}

/* ══ 登录 / 注册：原生表单 ═════════════════════════════════════════════ */
#login-panel .auth-intro,
#login-panel .intro-stats {
  display: none !important;
}

#login-panel .auth-card {
  background: var(--app-surface) !important;
  background-image: none !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  gap: 14px !important;
}

#login-panel .card-kicker,
#login-panel .lp-badge {
  display: none !important;
}

#login-panel h2 {
  font-size: 20px !important;
  margin: 0 0 4px !important;
}

#login-panel label,
#login-panel .lp-field {
  display: grid !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--app-text-dim) !important;
}

#login-panel input {
  height: 48px !important;
  border-radius: 10px !important;
  background: var(--app-surface-2) !important;
  border: 1px solid var(--app-line-strong) !important;
  color: var(--app-text) !important;
  font-size: 16px !important;
  padding: 0 14px !important;
}

#login-panel input:focus {
  border-color: var(--app-gold) !important;
  outline: none !important;
  box-shadow: none !important;
}

#login-panel button[type="submit"],
#login-panel .button-primary {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  font-size: 15px !important;
}

#login-panel .form-note,
#login-panel .status {
  font-size: 12px !important;
}

/* 登录区背景的装饰光斑 */
#login-panel::before,
#login-panel::after,
[class*="glow"],
[class*="orb"] {
  display: none !important;
  animation: none !important;
}
/* 登录主按钮：强制去掉紫青渐变，改品牌实色 */
#login-panel form#login button[type="submit"],
#login-panel form#login .button-primary,
#login-panel #login .button-primary {
  background: var(--app-gold) !important;
  background-image: none !important;
  color: #14100a !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 次级按钮（注册 / 游客）保持描边 */
#login-panel #register-toggle,
#login-panel #guest-play,
#login-panel .button-ghost {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--app-line-strong) !important;
  color: var(--app-text) !important;
  box-shadow: none !important;
}