/* ═══════════════════════════════════════════════════════
   天禧棋牌 — 生产级游戏 UI
   Production Game Lobby Visual System
   ═══════════════════════════════════════════════════════ */

:root {
  --gold: #ffd060; --gold-dark: #c08020; --gold-glow: rgba(255,208,96,0.3);
  --felt: #0d6840; --felt-dark: #083828;
  --wood: #2a1608; --wood-light: #3a2010; --wood-dark: #1a0c04;
  --red: #e83030; --green: #30b848;
  --card-bg: linear-gradient(180deg, rgba(50,28,12,0.95), rgba(30,16,6,0.98));
}

/* ── Animated background ── */
body {
  background: #0a0502 !important;
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(212,160,64,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(180,80,20,0.03) 0%, transparent 50%) !important;
}
.lobby-main { position: relative; }
.lobby-main::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(2px 2px at 10% 15%, rgba(255,208,96,0.15), transparent),
    radial-gradient(2px 2px at 30% 70%, rgba(255,208,96,0.1), transparent),
    radial-gradient(2px 2px at 70% 25%, rgba(255,208,96,0.12), transparent),
    radial-gradient(2px 2px at 85% 60%, rgba(255,208,96,0.08), transparent),
    radial-gradient(2px 2px at 50% 90%, rgba(255,208,96,0.1), transparent);
  animation: sparkle 6s ease-in-out infinite alternate;
}
@keyframes sparkle { 0% { opacity: 0.4; } 100% { opacity: 1; } }

/* ── TOPBAR = Game chrome ── */
.topbar {
  background: linear-gradient(180deg, #2c1608 0%, #1c0e04 100%) !important;
  border-bottom: 2px solid !important;
  border-image: linear-gradient(90deg, transparent, #d4a040, #ffd060, #d4a040, transparent) 1 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
  height: 52px !important; padding: 0 12px !important;
}
.topbar .brand-icon {
  background: linear-gradient(135deg, #ffe070, #c08020) !important;
  box-shadow: 0 0 16px rgba(212,160,64,0.5), inset 0 -2px 0 rgba(0,0,0,0.2) !important;
}
.topbar .nav-links a.active {
  color: #ffd060 !important;
  text-shadow: 0 0 10px rgba(255,208,96,0.5) !important;
  position: relative;
}
.topbar .nav-links a.active::after {
  content: ''; position: absolute; bottom: -2px; left: 20%; right: 20%; height: 2px;
  background: #ffd060; border-radius: 1px;
  box-shadow: 0 0 6px rgba(255,208,96,0.5);
}

/* ── Enter Lobby Button = 3D Game Button ── */
.topbar .button.primary, .topbar-right .button.primary {
  background: linear-gradient(180deg, #58cc30, #389818) !important;
  border: 1px solid #68d838 !important;
  box-shadow: 0 3px 0 #287010, 0 4px 12px rgba(40,140,20,0.4), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
  font-weight: 800 !important; letter-spacing: 1px !important;
  transform: translateY(0); transition: all 0.1s !important;
}
.topbar .button.primary:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #287010, 0 2px 6px rgba(40,140,20,0.3) !important;
}

/* ── Player Bar ── */
.lobby-top-status {
  background: var(--card-bg) !important;
  border: 1px solid rgba(212,160,64,0.25) !important;
  border-radius: 14px !important; margin: 10px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212,160,64,0.08) !important;
  position: relative; overflow: hidden;
}
.lobby-top-status::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,208,96,0.3), transparent);
}
.player-avatar {
  background: linear-gradient(135deg, #ffe070, #b88020) !important;
  box-shadow: 0 0 0 3px rgba(212,160,64,0.3), 0 0 16px rgba(212,160,64,0.2) !important;
  font-weight: 900 !important;
}
.currency-panel {
  background: linear-gradient(180deg, rgba(212,160,64,0.12), rgba(160,120,40,0.06)) !important;
  border: 1px solid rgba(212,160,64,0.2) !important;
  border-radius: 22px !important; padding: 5px 14px !important;
}
.currency-panel strong {
  color: #ffd060 !important; font-size: 18px !important;
  text-shadow: 0 0 8px rgba(255,208,96,0.3) !important;
}
.currency-plus {
  background: linear-gradient(180deg, #ffd060, #c8a020) !important;
  color: #3a1808 !important; border: none !important;
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  font-weight: 900 !important; font-size: 14px !important; cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}
.daily-sign-card {
  background: linear-gradient(135deg, #f0c040, #d0a020) !important;
  color: #3a1808 !important; border-radius: 10px !important;
  box-shadow: 0 3px 10px rgba(200,160,32,0.3), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  font-weight: 700 !important;
}

/* ── Quick Game Tiles ── */
.quick-game-grid { padding: 6px 10px !important; gap: 8px !important; }
.quick-game-item {
  background: var(--card-bg) !important;
  border: 1px solid rgba(212,160,64,0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
  transition: all 0.15s !important; position: relative; overflow: hidden;
  padding: 14px 6px 10px !important;
}
.quick-game-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,160,64,0.35), transparent);
}
.quick-game-item:hover, .quick-game-item:active {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: rgba(212,160,64,0.45) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 16px rgba(212,160,64,0.1) !important;
}
.quick-game-icon {
  width: 44px !important; height: 44px !important; border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(212,160,64,0.18), rgba(160,100,30,0.08)) !important;
  border: 1px solid rgba(212,160,64,0.15) !important;
  font-size: 20px !important; color: var(--gold) !important;
}
.quick-game-item strong { color: #f0e0c0 !important; font-size: 13px !important; }
.quick-game-item small { color: #806840 !important; font-size: 10px !important; }

/* ── Quick Menu ── */
.quick-menu-bar {
  background: rgba(30,16,6,0.8) !important;
  border: 1px solid rgba(212,160,64,0.12) !important;
  border-radius: 12px !important; margin: 0 10px !important; padding: 8px 4px !important;
}
.quick-menu-bar a i {
  width: 38px !important; height: 38px !important; border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(212,160,64,0.12), rgba(120,80,20,0.06)) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 18px !important; color: var(--gold) !important;
}

/* ── Lobby Cards ── */
.lobby-entry-deck { gap: 8px !important; padding: 8px 10px !important; }
.lobby-card {
  border-radius: 12px !important; overflow: hidden !important; position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: transform 0.15s !important;
}
.lobby-card:hover { transform: translateY(-2px) !important; }
.lobby-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 50%);
  pointer-events: none; border-radius: 12px;
}
.lobby-card-visual i { font-size: 24px !important; }
.lobby-card-labels strong { font-size: 13px !important; font-weight: 800 !important; }

/* ── GAME CATALOG = Key visual area ── */
.catalog-grid { gap: 10px !important; padding: 0 10px !important; }
.catalog-card {
  background: var(--card-bg) !important;
  border: 1px solid rgba(212,160,64,0.18) !important;
  border-radius: 14px !important; overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
  transition: all 0.2s !important;
}
.catalog-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 24px rgba(212,160,64,0.08) !important;
  border-color: rgba(212,160,64,0.35) !important;
}
.catalog-card-visual {
  height: 140px !important; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #142840, #0a1820) !important;
}
.catalog-card-visual::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(transparent, rgba(30,16,6,0.9));
}
.catalog-card-body { padding: 12px !important; }
.catalog-card-body h3 { color: #f0e0c0 !important; font-weight: 800 !important; font-size: 15px !important; margin-bottom: 4px !important; }
.catalog-card-body p { color: #907858 !important; font-size: 12px !important; line-height: 1.4 !important; }
.catalog-tag {
  background: rgba(212,160,64,0.1) !important;
  border: 1px solid rgba(212,160,64,0.18) !important;
  color: #c0a058 !important; font-size: 10px !important;
  padding: 2px 8px !important; border-radius: 10px !important;
}

/* ── Game Buttons = 3D Press ── */
.catalog-actions .button.primary {
  background: linear-gradient(180deg, #f0a820, #c88018) !important;
  border: none !important; color: #fff !important; font-weight: 800 !important;
  box-shadow: 0 3px 0 #986010, 0 4px 10px rgba(200,140,20,0.3), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transition: all 0.1s !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.catalog-actions .button.primary:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #986010, 0 2px 4px rgba(200,140,20,0.2) !important;
}
.catalog-actions .button.tertiary {
  color: #a08858 !important; border: 1px solid rgba(160,136,88,0.3) !important;
}
.catalog-actions .status.live {
  background: linear-gradient(180deg, #38c050, #208830) !important;
  color: #fff !important; font-weight: 900 !important;
  padding: 3px 10px !important; border-radius: 10px !important;
  font-size: 10px !important; letter-spacing: 1.5px !important;
  box-shadow: 0 0 10px rgba(48,184,72,0.35) !important;
  animation: liveGlow 2s ease-in-out infinite alternate;
}
@keyframes liveGlow {
  0% { box-shadow: 0 0 6px rgba(48,184,72,0.2); }
  100% { box-shadow: 0 0 14px rgba(48,184,72,0.45); }
}

/* ── Filter Pills ── */
.filter-strip { padding: 8px 10px !important; }
.filter-pill {
  background: rgba(30,16,6,0.8) !important;
  border: 1px solid rgba(212,160,64,0.15) !important;
  color: #907050 !important; border-radius: 20px !important;
  padding: 7px 22px !important; font-weight: 700 !important;
  transition: all 0.15s !important;
}
.filter-pill.active, .filter-pill:hover {
  background: linear-gradient(180deg, #ffd060, #c8a020) !important;
  color: #3a1808 !important; border-color: #d4a040 !important;
  box-shadow: 0 3px 10px rgba(212,160,64,0.3) !important;
}

/* ── Section Headers ── */
.section-header { padding: 18px 12px 10px !important; }
.section-header .eyebrow { color: #d4a040 !important; letter-spacing: 4px !important; font-size: 11px !important; }
.section-header h2 { color: #f0e0c0 !important; font-weight: 800 !important; }

/* ── Stats Bar ── */
.hero-mini-stats {
  background: var(--card-bg) !important;
  border: 1px solid rgba(212,160,64,0.15) !important;
  border-radius: 12px !important; margin: 0 10px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3) !important;
}
.hero-mini-stats article strong { color: #ffd060 !important; font-size: 20px !important; }
.hero-mini-stats article span { color: #806840 !important; }

/* ── Lanterns ── */
.lobby-lantern {
  width: 18px !important; height: 18px !important; border-radius: 50% !important;
  background: radial-gradient(circle, #ff4020, #c02010) !important;
  box-shadow: 0 0 20px rgba(255,64,32,0.5), 0 0 40px rgba(255,64,32,0.2) !important;
  animation: lanternPulse 3s ease-in-out infinite alternate !important;
}
@keyframes lanternPulse {
  0% { box-shadow: 0 0 15px rgba(255,64,32,0.4), 0 0 30px rgba(255,64,32,0.15); transform: scale(1); }
  100% { box-shadow: 0 0 25px rgba(255,64,32,0.65), 0 0 50px rgba(255,64,32,0.3); transform: scale(1.1); }
}

/* ── Game Hall ── */
.game-hall-shell { background: linear-gradient(180deg, #1a0c04, #0a0502) !important; min-height: 100vh; }
.game-hall-header {
  background: linear-gradient(180deg, #3a1c0c, #2a1408) !important;
  border-bottom: 2px solid !important;
  border-image: linear-gradient(90deg, transparent, #d4a040, transparent) 1 !important;
}
.game-hall-title { color: var(--gold) !important; text-shadow: 0 0 10px rgba(255,208,96,0.3) !important; }
.game-room-card {
  background: var(--card-bg) !important;
  border: 1px solid rgba(212,160,64,0.2) !important;
  border-radius: 12px !important; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
  transition: all 0.15s !important;
}
.game-room-card:hover { border-color: rgba(212,160,64,0.4) !important; transform: translateX(4px) !important; }
.game-room-accent { background: linear-gradient(180deg, #ffd060, #c08020) !important; width: 4px !important; }
.game-room-info h3 { color: var(--gold) !important; font-weight: 800 !important; }
.game-room-tag { background: rgba(212,160,64,0.1) !important; border: 1px solid rgba(212,160,64,0.2) !important; color: #c0a060 !important; }

/* ── Game Table ── */
.game-table-shell {
  background: radial-gradient(ellipse at center, #1a6840 0%, #0e4028 50%, #082818 100%) !important;
  min-height: 100vh;
}
.game-table-top {
  background: rgba(0,0,0,0.4) !important;
  border-bottom: 1px solid rgba(212,160,64,0.2) !important;
}
.game-table-felt {
  border: 6px solid !important;
  border-image: linear-gradient(180deg, #8a6030, #5a3820, #6a4428) 1 !important;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.5) !important;
  background: radial-gradient(ellipse, rgba(30,120,70,0.3), transparent) !important;
}
.table-btn {
  border: none !important; color: #fff !important; font-weight: 800 !important;
  border-radius: 8px !important; padding: 8px 4px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}
.table-btn:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.3) !important; }

/* ── Auth Pages ── */
.auth-shell--minimal { background: radial-gradient(ellipse at top center, rgba(80,40,16,0.4), #0a0502 70%) !important; }
.auth-single-card {
  background: var(--card-bg) !important;
  border: 1px solid rgba(212,160,64,0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}
.auth-minimal-hero {
  background: linear-gradient(180deg, rgba(50,28,12,0.6), transparent) !important;
  border-radius: 16px !important; padding: 24px !important;
  border: 1px solid rgba(212,160,64,0.12) !important;
}
.auth-minimal-hero h1 { color: var(--gold) !important; }
.auth-single-form .button.primary {
  background: linear-gradient(180deg, #58cc30, #389818) !important;
  border: 1px solid #60d430 !important; font-size: 16px !important;
  padding: 14px !important; font-weight: 800 !important;
  box-shadow: 0 3px 0 #287010, 0 4px 12px rgba(40,140,20,0.4), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* ── Inner Pages ── */
.inner-page-hero {
  background: linear-gradient(180deg, rgba(50,28,12,0.7), transparent) !important;
  border-bottom: 1px solid rgba(212,160,64,0.12) !important;
}
.inner-page-card {
  background: var(--card-bg) !important;
  border: 1px solid rgba(212,160,64,0.12) !important;
  border-radius: 12px !important;
}

/* ── Footer ── */
.footer-panel {
  background: linear-gradient(180deg, rgba(20,10,4,0.95), #0a0502) !important;
  border-top: 1px solid rgba(212,160,64,0.1) !important;
}

/* ── Trust Band ── */
.trust-band-card {
  background: var(--card-bg) !important;
  border: 1px solid rgba(212,160,64,0.12) !important;
  border-radius: 12px !important;
}

/* ── Global polish ── */
h1, h2, h3 { text-shadow: 0 2px 6px rgba(0,0,0,0.4) !important; }
::selection { background: rgba(212,160,64,0.3); color: #fff; }
.lobby-main { scrollbar-width: none; }
.lobby-main::-webkit-scrollbar { display: none; }

/* ═══ Compact lobby entry deck ═══ */
.lobby-entry-deck--compact {
  display: grid !important; grid-template-columns: repeat(6, 1fr) !important;
  gap: 8px !important; padding: 8px 10px !important;
}
.lobby-entry-deck--compact .lobby-card {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 6px !important;
  padding: 14px 8px !important; text-align: center !important;
  text-decoration: none !important;
}
.lobby-card-icon { font-size: 22px !important; color: var(--gold) !important; }
.lobby-entry-deck--compact .lobby-card strong {
  font-size: 12px !important; color: #c8a060 !important;
}

/* ═══ Game hall improvements ═══ */
.game-hall-currency {
  display: flex !important; gap: 20px !important; padding: 10px 16px !important;
  font-size: 14px !important; color: #c8a060 !important;
  background: rgba(0,0,0,0.3) !important; border-radius: 8px !important;
  margin: 8px 16px !important;
}
.game-hall-currency i { color: var(--gold) !important; margin-right: 4px !important; }
.game-room-card {
  display: flex !important; align-items: center !important;
  padding: 16px !important; margin: 0 12px 8px !important;
}
.game-room-info { flex: 1 !important; }
.game-room-action {
  display: flex !important; flex-direction: column !important;
  align-items: flex-end !important; gap: 6px !important;
}
.game-room-online { font-size: 13px !important; }

/* Fix niuniu emoji */
.niu-top span:first-child::before { content: '' !important; }
.slots-top span:first-child::before { content: '' !important; }

@media screen and (max-width: 900px) and (orientation: landscape) {
  .lobby-entry-deck--compact { grid-template-columns: repeat(6, 1fr) !important; }
}