/* ============================================
   解谜大厅 - 全屏OA系统风格（强制PC三栏布局）
   ============================================ */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg-primary:#ffffff;
  --bg-secondary:#f7f8fa;
  --bg-tertiary:#eef0f3;
  --bg-white:#fff;
  --text-primary:#1a1a1a;
  --text-secondary:#555;
  --text-dim:#999;
  --accent-blue:#2563eb;
  --accent-blue-dark:#1d4ed8;
  --accent-blue-light:#DBEAFE;
  --accent-blue-bg:rgba(37,99,235,0.08);
  --accent-green:#16a34a;
  --accent-red:#dc2626;
  --border-color:#e0e0e0;
  --border-hover:#cbd5e1;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'SF Mono','JetBrains Mono','Fira Code','Courier New',monospace;
  --top-bar-h:48px;
  --sidebar-w:200px;
  --rightbar-w:240px;
  --radius:6px;
  --radius-sm:4px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.12);
}

html, body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

body {
  font-family:var(--font-sans);
  background:var(--bg-primary);
  color:var(--text-primary);
  font-size:14px;
  line-height:1.6;
  overflow:hidden;
  height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ===== 登录页（与解谜大厅共用样式） ===== */
.login-screen { display:flex; justify-content:center; align-items:center; min-height:100vh; background:var(--bg-secondary); padding:1rem; }
.login-card { background:var(--bg-white); border:1px solid var(--border-color); border-radius:8px; padding:2rem; width:100%; max-width:380px; box-shadow:var(--shadow-md); }
.login-logo { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; }
.login-logo-icon { font-size:2rem; color:var(--accent-blue); }
.login-logo-text h1 { font-size:1.1rem; font-weight:700; color:var(--text-primary); line-height:1.3; }
.login-logo-text p { font-size:.75rem; color:var(--text-dim); }
.login-divider-line { height:1px; background:var(--border-color); margin-bottom:1.25rem; }
.login-tabs { display:flex; gap:1.5rem; margin-bottom:1rem; border-bottom:1px solid var(--border-color); }
.login-tab { padding:.5rem 0; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-size:.88rem; color:var(--text-dim); font-family:var(--font-sans); font-weight:500; transition:all .15s; }
.login-tab.active { color:var(--accent-blue); border-bottom-color:var(--accent-blue); }
.login-form .login-field { margin-bottom:.85rem; }
.login-field label { display:block; font-size:.78rem; color:var(--text-secondary); margin-bottom:.3rem; font-weight:500; }
.login-field input { width:100%; padding:.55rem .75rem; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-sm); font-size:.85rem; font-family:var(--font-sans); color:var(--text-primary); outline:none; transition:border-color .15s; }
.login-field input:focus { border-color:var(--accent-blue); background:var(--bg-white); }
.login-captcha .captcha-row { display:flex; gap:.5rem; align-items:center; }
.login-captcha .captcha-row input { flex:1; }
.captcha-img { padding:.55rem .75rem; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:.85rem; color:var(--text-secondary); letter-spacing:.1em; user-select:none; text-decoration:line-through; cursor:pointer; min-width:80px; text-align:center; }
.captcha-img:hover { background:var(--accent-blue-light); }
.login-btn { width:100%; padding:.6rem; background:var(--accent-blue); color:#fff; border:none; border-radius:var(--radius-sm); font-size:.88rem; font-weight:500; font-family:var(--font-sans); cursor:pointer; transition:background .2s; margin-top:.25rem; }
.login-btn:hover { background:var(--accent-blue-dark); }
.login-error { color:var(--accent-red); font-size:.78rem; margin-top:.5rem; }
.login-guest { text-align:center; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border-color); }
.login-guest a { font-size:.78rem; color:var(--text-dim); text-decoration:none; }
.login-guest a:hover { color:var(--accent-blue); }
.login-footer { display:flex; justify-content:center; gap:.4rem; flex-wrap:wrap; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border-color); font-size:.7rem; color:var(--text-dim); }

/* ============================================
   大厅全屏布局 - 强制PC三栏
   ============================================ */
.hall-app {
  display:flex;
  flex-direction:column;
  width:100vw;
  height:100vh;
  min-width:760px; /* 给一个最小宽度，保证不出现"窄到看不见" */
  background:var(--bg-primary);
}

/* ===== 顶部栏（占满宽度）===== */
.top-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 1rem;
  height:var(--top-bar-h);
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border-color);
  flex-shrink:0;
  width:100%;
  z-index:100;
}
.top-bar-left { display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; }
.top-logo-icon { font-size:1.1rem; color:var(--accent-blue); flex-shrink:0; }
.top-logo-text { font-size:.85rem; font-weight:600; color:var(--accent-blue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-bar-sep { color:var(--border-color); font-size:.85rem; flex-shrink:0; }
.top-bar-breadcrumb { font-size:.82rem; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-bar-right { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.top-bar-time { font-size:.75rem; color:var(--text-dim); font-family:var(--font-mono); white-space:nowrap; }

/* ===== 用户区域 + 下拉菜单 ===== */
.top-user-area {
  position:relative;
}
.top-user {
  display:inline-flex;
  align-items:center;
  font-size:.82rem;
  color:var(--text-secondary);
  cursor:pointer;
  padding:.3rem .6rem;
  border-radius:var(--radius-sm);
  transition:background .15s;
  user-select:none;
  white-space:nowrap;
}
.top-user:hover { background:var(--bg-tertiary); color:var(--text-primary); }

/* 用户下拉菜单 - 默认隐藏 */
.user-dropdown {
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:var(--bg-white);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  min-width:160px;
  z-index:9999;
  overflow:hidden;
}
.user-dropdown.open { display:block; }
.dropdown-user-name {
  padding:.6rem .8rem;
  font-size:.82rem;
  color:var(--text-secondary);
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border-color);
}
.dropdown-divider {
  height:1px;
  background:var(--border-color);
}
.dropdown-item {
  padding:.55rem .8rem;
  font-size:.85rem;
  cursor:pointer;
  color:var(--text-primary);
  transition:background .15s;
  font-family:var(--font-sans);
}
.dropdown-item:hover { background:var(--accent-blue-bg); color:var(--accent-blue); }

.icon-btn {
  background:none;
  border:none;
  font-size:1rem;
  cursor:pointer;
  padding:.3rem .5rem;
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  transition:background .15s;
  font-family:var(--font-sans);
}
.icon-btn:hover { background:var(--bg-tertiary); }

/* ============================================
   三栏主体布局 - 强制 grid，不允许 collapse
   ============================================ */
.hall-body {
  display:grid !important;
  grid-template-columns:var(--sidebar-w) minmax(0, 1fr) var(--rightbar-w) !important;
  flex:1 1 auto;
  width:100%;
  min-height:0;
  overflow:hidden;
}

/* ===== 左侧导航栏 ===== */
.hall-sidebar {
  background:var(--bg-secondary);
  border-right:1px solid var(--border-color);
  padding:.5rem 0;
  overflow-y:auto;
  overflow-x:hidden;
  min-width:0;
}
.sidebar-section { margin-bottom:.25rem; }
.sidebar-header {
  padding:.5rem .85rem .25rem;
  font-size:.7rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:600;
}
.nav-item {
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  padding:.55rem .85rem;
  background:none;
  border:none;
  border-left:3px solid transparent;
  cursor:pointer;
  font-family:var(--font-sans);
  font-size:.85rem;
  color:var(--text-secondary);
  transition:all .15s;
  text-align:left;
  position:relative;
}
.nav-item:hover {
  background:var(--bg-tertiary);
  color:var(--text-primary);
}
/* 选中态：淡蓝背景 + 左侧蓝色竖条 */
.nav-item.active {
  background:var(--accent-blue-bg);
  color:var(--accent-blue);
  font-weight:600;
  border-left-color:var(--accent-blue);
}
.nav-icon { font-size:1rem; flex-shrink:0; }
.nav-label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== 中间内容区 ===== */
.hall-content {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg-primary);
  min-width:0;
}
.view {
  display:none;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding:1.5rem 2rem;
}
.view.active { display:block; }
.page-header { margin-bottom:1.25rem; }
.page-title { font-size:1.25rem; font-weight:700; color:var(--text-primary); margin-bottom:.25rem; }
.page-subtitle { font-size:.82rem; color:var(--text-dim); }

/* 欢迎卡片 */
.welcome-card {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.25rem 1.5rem;
  background:linear-gradient(135deg, var(--accent-blue-light) 0%, var(--bg-secondary) 100%);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  margin-bottom:1.5rem;
}
.welcome-card-icon { font-size:2.5rem; flex-shrink:0; }
.welcome-card-text h3 { font-size:1rem; font-weight:600; color:var(--text-primary); margin-bottom:.25rem; }
.welcome-card-text p { font-size:.82rem; color:var(--text-secondary); }

/* 区块标题 */
.section-title {
  font-size:.82rem;
  font-weight:600;
  color:var(--text-secondary);
  margin-bottom:.85rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border-color);
}

/* 游戏卡片网格 */
.game-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1rem;
}
.game-card {
  background:var(--bg-white);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:all .15s;
}
.game-card:hover { border-color:var(--accent-blue); box-shadow:var(--shadow-md); }
.game-card.coming-soon {
  border-style:dashed;
  cursor:default;
  opacity:.75;
}
.game-card.coming-soon:hover { border-color:var(--border-color); box-shadow:none; opacity:1; }
.game-card-icon {
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  background:var(--bg-secondary);
}
.game-card-body { padding:.85rem 1rem; }
.game-card-title { font-size:.9rem; font-weight:600; color:var(--text-primary); }
.game-card-desc { font-size:.75rem; color:var(--text-dim); margin-top:.25rem; }

/* 排行榜 */
.ranking-tabs { display:flex; gap:.4rem; margin-bottom:1rem; flex-wrap:wrap; }
.rank-tab {
  padding:.4rem .85rem;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-white);
  cursor:pointer;
  font-size:.82rem;
  color:var(--text-secondary);
  font-family:var(--font-sans);
  transition:all .15s;
}
.rank-tab.active { background:var(--accent-blue); color:#fff; border-color:var(--accent-blue); }
.rank-tab:hover:not(.active) { background:var(--bg-secondary); border-color:var(--border-hover); }
.ranking-list {
  background:var(--bg-white);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
}
.rank-item { display:flex; align-items:center; gap:.85rem; padding:.65rem .85rem; border-bottom:1px solid var(--border-color); }
.rank-item:last-child { border-bottom:none; }
.rank-pos { width:28px; text-align:center; font-weight:700; font-size:.85rem; color:var(--text-dim); }
.empty-state { padding:3rem 1rem; text-align:center; color:var(--text-dim); font-size:.88rem; }

/* 成就 */
.achievement-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:.7rem;
}
.ach-card {
  padding:.85rem;
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  text-align:center;
  background:var(--bg-white);
  transition:all .15s;
}
.ach-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-sm); }
.ach-card.locked { opacity:.45; }
.ach-card.locked:hover { opacity:.7; }
.ach-icon { font-size:1.75rem; margin-bottom:.4rem; }
.ach-name { font-size:.82rem; font-weight:500; }
.ach-desc { font-size:.7rem; color:var(--text-dim); margin-top:.15rem; }

/* ===== 右侧面板 ===== */
.hall-rightbar {
  background:var(--bg-secondary);
  border-left:1px solid var(--border-color);
  overflow-y:auto;
  overflow-x:hidden;
  padding:.85rem;
  min-width:0;
}
.right-card {
  background:var(--bg-white);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  margin-bottom:.7rem;
  overflow:hidden;
}
.right-card-title {
  padding:.55rem .85rem;
  font-size:.75rem;
  font-weight:600;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border-color);
  background:var(--bg-secondary);
}
.right-card-body { padding:.7rem .85rem; }
.user-info-row { display:flex; align-items:center; gap:.7rem; }
.user-avatar-icon { font-size:1.75rem; }
.user-display-name { font-size:.88rem; font-weight:600; color:var(--text-primary); }
.user-status { font-size:.75rem; color:var(--accent-green); margin-top:.1rem; }
.announce-text { font-size:.82rem; color:var(--text-secondary); line-height:1.6; }
.quick-action-btn {
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  padding:.5rem .7rem;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:.82rem;
  color:var(--text-secondary);
  font-family:var(--font-sans);
  transition:all .15s;
  text-align:left;
}
.quick-action-btn:hover {
  background:var(--accent-blue-bg);
  border-color:var(--accent-blue);
  color:var(--accent-blue);
}

/* ===== 设置弹窗 ===== */
.modal-overlay {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.3);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-content {
  background:var(--bg-white);
  border-radius:8px;
  padding:1.5rem;
  max-width:400px;
  width:90%;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:var(--shadow-lg);
}
.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--border-color);
}
.modal-header h3 { font-size:1rem; font-weight:600; }
.settings-section { margin-bottom:.95rem; }
.settings-label { display:block; font-size:.82rem; color:var(--text-secondary); margin-bottom:.35rem; font-weight:500; }
.settings-input {
  width:100%;
  padding:.5rem .7rem;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  font-size:.85rem;
  font-family:var(--font-sans);
  outline:none;
  transition:border-color .15s;
}
.settings-input:focus { border-color:var(--accent-blue); }
.theme-options { display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem; }
.theme-opt {
  padding:.5rem;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-white);
  cursor:pointer;
  font-size:.82rem;
  font-family:var(--font-sans);
  color:var(--text-secondary);
  transition:all .15s;
}
.theme-opt.active { border-color:var(--accent-blue); background:var(--accent-blue-light); color:var(--accent-blue); }
.theme-opt:hover:not(.active) { background:var(--bg-secondary); }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d0d0d0; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#bbb; }

/* ============================================
   响应式 - 即使在窄屏也保持三栏（缩小而非隐藏）
   仅在极窄屏 (< 760px) 才考虑缩窄边栏
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --sidebar-w:180px;
    --rightbar-w:210px;
  }
  .view { padding:1.25rem 1.5rem; }
}
@media (max-width: 860px) {
  :root {
    --sidebar-w:160px;
    --rightbar-w:190px;
  }
  .top-bar-time { display:none; }
  .top-logo-text { max-width:140px; }
}
/* 不再有 max-width:768px 的移动端 collapse，保持三栏 */