/* 前台布局样式：游戏厅（卡片大厅为 display.css 默认） */

/* ========== 游戏厅 ========== */
html[data-layout="hall"] body {
  color: #e8eef8;
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(34, 211, 238, 0.12), transparent 55%),
    radial-gradient(820px 420px at 95% 0%, rgba(244, 63, 94, 0.14), transparent 50%),
    linear-gradient(180deg, #0b1020 0%, #12182b 45%, #0d1322 100%);
}

html[data-layout="hall"] .site-header {
  background: rgba(12, 18, 34, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

html[data-layout="hall"] .brand-text strong,
html[data-layout="hall"] .section-head h2 {
  color: #f8fafc;
}

html[data-layout="hall"] .brand-text span,
html[data-layout="hall"] .lobby-result,
html[data-layout="hall"] .section-head span {
  color: #94a3b8;
}

html[data-layout="hall"] .header-search input {
  background: rgba(20, 28, 48, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}

html[data-layout="hall"] .header-search input:focus {
  background: #1a243c;
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12);
}

html[data-layout="hall"] .cat-tab {
  background: #171f33;
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

html[data-layout="hall"] .cat-tab:hover {
  color: #e2e8f0;
}

html[data-layout="hall"] .cat-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #f43f5e, #22d3ee);
  border-color: transparent;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

html[data-layout="hall"] .cat-tab.active i {
  color: #fff;
  opacity: 0.95;
}

html[data-layout="hall"] .cat-nav-more {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
}

html[data-layout="hall"] .game-grid {
  gap: 10px;
}

html[data-layout="hall"] .game-card {
  min-height: 150px;
  background: #151d31;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.35);
  border-radius: 14px;
}

html[data-layout="hall"] .game-card:hover {
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.2),
    0 16px 30px rgba(0, 0, 0, 0.45);
}

html[data-layout="hall"] .game-cover {
  min-height: 102px;
  padding: 12px;
}

html[data-layout="hall"] .game-cover h3 {
  font-size: 14px;
}

html[data-layout="hall"] .game-info {
  background: #101827;
  border-top-color: rgba(255, 255, 255, 0.06);
}

html[data-layout="hall"] .badge-pwd {
  background: rgba(255, 247, 237, 0.95);
  color: #9a3412;
}

html[data-layout="hall"] .game-need-pwd {
  background: rgba(255, 247, 237, 0.12);
  color: #fdba74;
  border-color: rgba(253, 186, 116, 0.35);
}

html[data-layout="hall"] .game-info em {
  background: linear-gradient(135deg, #f43f5e, #22d3ee);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.25);
}

html[data-layout="hall"] .page-btn {
  background: #171f33;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

html[data-layout="hall"] .page-btn.active {
  background: #22d3ee;
  border-color: #22d3ee;
  color: #082f49;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.3);
}

html[data-layout="hall"] .site-footer {
  background: rgba(10, 14, 26, 0.95);
  border-top-color: rgba(255, 255, 255, 0.06);
}

html[data-layout="hall"] .footer-line,
html[data-layout="hall"] .footer-line a,
html[data-layout="hall"] .footer-disc {
  color: #94a3b8;
}

html[data-layout="hall"] .footer-tools a {
  color: #94a3b8;
  border-bottom-color: rgba(148, 163, 184, 0.4);
}

html[data-layout="hall"] .footer-tools a:hover {
  color: #e2e8f0;
}

html[data-layout="hall"] .empty-box {
  background: rgba(23, 31, 51, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

html[data-layout="hall"] .layout-switch {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-layout="hall"] .layout-switch-btn {
  color: #94a3b8;
}

html[data-layout="hall"] .layout-switch-btn:hover {
  color: #e2e8f0;
}

html[data-layout="hall"] .layout-switch-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #f43f5e, #22d3ee);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* 游戏厅皮肤下的书库组件 */
html[data-layout="hall"] .xm-game-catalog {
  --xm-game-accent: #f43f5e;
  --xm-game-muted: #94a3b8;
  --xm-game-bg: rgba(23, 31, 51, 0.55);
  --key-color: #e2e8f0;
  --muted-color: #94a3b8;
  --main-border-color: rgba(255, 255, 255, 0.1);
  --main-bg-color: rgba(23, 31, 51, 0.72);
  color: #e2e8f0;
}

html[data-layout="hall"] .xm-game-library-hero {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-layout="hall"] .xm-game-search-wrap input {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}

html[data-layout="hall"] .xm-game-library-filters {
  background: rgba(23, 31, 51, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-layout="hall"] .xm-game-filter-chip.is-active,
html[data-layout="hall"] .xm-game-catalog button.xm-game-filter-chip.is-active {
  background: linear-gradient(135deg, #f43f5e, #22d3ee) !important;
  color: #fff !important;
}

html[data-layout="hall"] .xm-game-lib-card {
  background: rgba(23, 31, 51, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html[data-layout="hall"] .xm-game-lib-title {
  color: #f8fafc !important;
}

html[data-layout="hall"] .xm-game-empty {
  color: #94a3b8;
}

html[data-layout="hall"] .xm-game-page-btn {
  background: rgba(23, 31, 51, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

html[data-layout="hall"] .xm-game-page-btn.active {
  background: linear-gradient(135deg, #f43f5e, #22d3ee);
  border-color: transparent;
  color: #fff;
}