/* 大厅视觉规范：以用户确认的白色设计图为依据。
   本文件只负责大厅与公共外壳；账号、钱包、游戏 iframe 使用原有组件与流程。
   主视觉文字在 HTML/词典中，图片只含装饰。默认浅色由 theme.js 控制，已保存偏好仍优先。 */
:root[data-theme='light'] {
  --bg: #f4f8fb;
  --panel: #fff;
  --panel2: #f0f5f8;
  --line: #e6edf2;
  --ink: #182535;
  --muted: #738196;
  --accent: #008b7d;
  --blue: #087d91;
}
:root[data-theme='dark'] {
  --accent: #64d9c5;
}
body {
  background: var(--bg);
}
.topbar {
  min-height: 72px;
  background: var(--panel);
  border-bottom-color: var(--line);
  gap: 24px;
}
.topbar .brand .parallel-wordmark,
.topbar .brand .parallel-compact,
html[data-theme='light'] .brand .parallel-wordmark,
html[data-theme='light'] .brand .parallel-compact {
  color: var(--accent);
}
.topbar > .brand .parallel-wordmark {
  width: 172px;
}
.topbar .env {
  padding-left: 22px;
  border-left: 1px solid var(--line);
  font-size: 14px;
}
.topbar-actions {
  gap: 10px;
  padding: 0;
}
.topbar-actions button {
  min-height: 40px;
  border-radius: 10px;
}
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 9px;
  color: var(--muted);
  background: var(--panel2);
  flex-shrink: 0;
}
.header-icon svg {
  width: 20px;
  height: 20px;
}

.theme-moon,
[data-theme='dark'] .theme-sun {
  display: none;
}
[data-theme='dark'] .theme-moon {
  display: block;
}
#guest-actions {
  display: flex;
  gap: 10px;
}
#guest-actions button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 9px 20px;
}
#guest-actions svg {
  width: 18px;
  height: 18px;
}
#guest-actions .secondary {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
}
[data-theme='light'] .primary {
  background: var(--accent);
  color: white;
}
[data-theme='light'] .primary:hover {
  background: #007367;
}
.topbar .wallet-menu {
  order: -1;
}

.topbar .currency-toggle {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 主视觉高度克制；装饰位于右侧，文字区不叠加复杂图案。 */
main {
  max-width: 1600px;
  min-height: calc(100vh - 150px);
}
#games-view {
  padding-top: 20px;
  padding-bottom: 18px;
}
.lobby-welcome {
  position: relative;
  min-height: 178px;
  overflow: hidden;
  border: 1px solid #e6f3f0;
  border-radius: 18px;
  background: #eafbf7;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.lobby-welcome-art {
  position: absolute;
  right: 0;
  top: 0;
  width: 65%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  /* 羽化图片左缘，切换深色时也不会露出矩形拼接边。 */
  mask-image: linear-gradient(to right, transparent, #000 20%);
}
.lobby-welcome::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #eafbf7 0%, #eafbf7 30%, #eafbf700 55%);
  pointer-events: none;
}
.lobby-welcome-copy {
  position: relative;
  z-index: 1;
  max-width: 58%;
  padding: 24px 38px;
  color: #19323b;
}
.lobby-welcome-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.lobby-welcome-copy h1 {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.25;
  margin: 8px 0;
  color: #087f76;
}
.lobby-welcome-copy .lobby-welcome-description {
  color: #617a83;
}
[data-theme='dark'] .lobby-welcome {
  border-color: #34524d;
  background: #163b36;
}
[data-theme='dark'] .lobby-welcome::after {
  background: linear-gradient(90deg, #163b36 0%, #163b36 35%, #163b3600 72%);
}
[data-theme='dark'] .lobby-welcome-copy,
[data-theme='dark'] .lobby-welcome-copy h1 {
  color: #e6fff8;
}
[data-theme='dark'] .lobby-welcome-description {
  color: #bed9d5;
}
.lobby-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
}
.lobby-games,
.game-activity,
.activity-skeleton {
  background: var(--panel);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}
.lobby-games {
  padding: 18px;
}
.game-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.games-heading {
  gap: 8px;
  margin-bottom: 14px;
}
.games-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  min-width: 0;
}
.games-title > svg {
  width: 25px;
  height: 25px;
  color: var(--accent);
  flex-shrink: 0;
}
.games-title h2 {
  font-size: 22px;
  font-weight: 750;
  white-space: nowrap;
}
#game-catalog-count {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.game-type-filter {
  margin-left: 0;
}
.game-types {
  flex-wrap: nowrap;
  gap: 4px;
}
.game-types button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--panel2);
  padding: 7px 8px;
  font-size: 11px;
  border-radius: 9px;
}
.game-types svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.game-types button[aria-pressed='true'] {
  background: #dff8f0;
  color: #007c70;
  border-radius: 24px;
}
[data-theme='dark'] .game-types button[aria-pressed='true'] {
  background: #174c42;
  color: #9aefdb;
}

/* 微动效只作用于封面，不移动标题；触屏不引入悬停状态。 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .game-card {
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }
  .game-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px #16333c22;
  }
  .game-image {
    transition:
      transform 0.3s ease,
      opacity 0.15s;
  }
  .game-card:hover .game-image {
    transform: scale(1.035);
  }
}
.game-activity {
  padding: 0 20px 10px;
}
.activity-heading {
  min-height: 70px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.activity-heading strong {
  font-size: 22px;
  font-weight: 750;
}
.activity-toggle {
  max-width: 125px;
  line-height: 1.4;
  padding: 4px 0;
  font-size: 11px;
}
.activity-toggle::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 5px;
}
.activity-toggle[aria-pressed='true']::before {
  background: var(--muted);
}
.activity-caption {
  font-size: 10px;
  padding: 8px 0;
  border: 0;
}
.activity-item {
  min-height: 88px;
  padding: 15px 0;
  gap: 12px;
}
.activity-list {
  max-height: 528px;
  scrollbar-gutter: auto;
}
.activity-image-link,
.activity-game-icon {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
}
.activity-item b {
  font-size: 17px;
}
.activity-player {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
.activity-item .activity-game-link {
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}
.activity-item header {
  flex-wrap: nowrap;
}
.activity-item time {
  font-size: 11px;
}
/* 轻量页脚：详情保留语义 HTML 与可抓取链接，不以大幅徽章占据大厅。 */
footer {
  background: var(--panel);
}
.footer-statement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding: 18px 0;
}
.footer-main {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: var(--muted);
}
.footer-brand-name {
  margin: 0;
  color: var(--accent);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.footer-secondary {
  order: 3;
  width: 100%;
  font-size: 11px;
  color: var(--muted);
}
.footer-secondary .footer-intro {
  padding: 0;
  margin: 0 0 10px;
}
.footer-secondary .footer-intro p {
  margin: 0 0 6px;
  line-height: 1.7;
}
.footer-secondary .footer-languages {
  margin: 0 0 12px;
  gap: 6px 14px;
}
.footer-secondary .footer-copy strong {
  font-size: 11px;
  font-weight: 500;
}
.footer-secondary .footer-copy p {
  margin-top: 4px;
  font-size: 11px;
}
.footer-tools {
  gap: 12px;
}
.footer-tools .age-mark {
  width: 25px;
  height: 25px;
  font-size: 10px;
}
.footer-tools #encrypted-connection {
  font-size: 0;
  gap: 0;
}
.theme-switcher {
  background: transparent;
  padding: 0;
  gap: 2px;
}
.theme-switcher button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 6px;
}
.theme-switcher button[aria-pressed='true'] {
  background: var(--panel2);
  color: var(--accent);
}
@media (max-width: 1350px) {
  .lobby-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
  .games-title {
    flex-basis: 100%;
    margin-bottom: 5px;
  }
  .game-type-filter {
    margin-right: auto;
  }
  .activity-heading strong {
    font-size: 19px;
  }
}
@media (max-width: 1100px) {
  .lobby-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .game-activity {
    padding: 0 20px 12px;
  }
  .activity-list {
    max-height: none;
  }
  .lobby-welcome-copy {
    padding: 22px;
    max-width: 65%;
  }
  .games-title {
    flex-basis: auto;
    margin-bottom: 0;
  }
}
@media (max-width: 650px) {
  .topbar {
    padding: 10px 12px;
    gap: 8px;
    min-height: 62px;
  }
  .topbar > .brand .parallel-wordmark {
    width: 108px;
  }
  .topbar-actions {
    gap: 6px;
  }
  .topbar-actions button {
    min-height: 36px;
  }

  #guest-actions {
    gap: 5px;
  }
  #guest-actions button {
    padding: 7px 9px;
    font-size: 12px;
  }
  #guest-actions svg {
    display: none;
  }
  .topbar .currency-toggle {
    max-width: 76px;
    font-size: 11px;
    padding: 6px 8px;
  }
  .lobby-welcome {
    min-height: 164px;
    border-radius: 14px;
    margin-bottom: 14px;
  }
  .lobby-welcome-copy {
    padding: 20px 16px;
    max-width: 77%;
  }
  .lobby-welcome-copy h1 {
    font-size: 24px;
    line-height: 1.3;
  }
  .lobby-welcome-copy p {
    font-size: 11px;
  }
  .lobby-welcome-art {
    width: 75%;
    object-position: 68% center;
    opacity: 0.65;
  }
  .lobby-welcome::after {
    background: linear-gradient(90deg, #eafbf7 0%, #eafbf7ee 38%, #eafbf700 100%);
  }
  .lobby-welcome-description {
    max-width: 220px;
  }
  .lobby-games {
    padding: 12px;
    border-radius: 14px;
  }
  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .games-title h2 {
    font-size: 19px;
  }
  .games-title > svg {
    width: 20px;
    height: 20px;
  }
  #game-catalog-count {
    font-size: 10px;
  }
  .game-types-toggle {
    display: none;
  }
  .game-type-filter {
    width: calc(100% - 44px);
    order: 2;
    min-width: 0;
  }
  .game-types,
  .game-type-filter.is-open .game-types {
    position: static;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    padding: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }
  .game-types button {
    width: auto;
    min-height: 38px;
    padding: 7px 9px;
    text-align: center;
    font-size: 11px;
  }

  .game-activity {
    padding: 0 16px 12px;
  }
  .footer-statement {
    gap: 12px;
  }
  .footer-main {
    gap: 12px;
    flex-wrap: wrap;
  }
  .footer-tools {
    margin-left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-card,
  .game-image {
    transition: none;
  }
}

/* 大厅通过表面底色分层，避免深色主题出现连续描边的“表格感”。
   输入框、键盘焦点仍保留必要边界，不影响识别与操作。 */
.topbar,
footer {
  border: 0;
}
.lobby-welcome {
  border: 0;
}
.activity-heading,
.activity-item {
  border-bottom: 0;
}
.activity-item + .activity-item {
  margin-top: 2px;
}
.topbar .currency-toggle {
  border-radius: 10px;
}
[data-theme='dark'] .topbar .currency-toggle,
[data-theme='dark'] #guest-actions .secondary {
  border-color: transparent;
  background: var(--panel2);
}
/* 同一行的图标使用同尺寸触控盒，年龄标识与主题图标按中心线对齐。 */
.footer-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 auto;
}
.footer-tools > button,
.theme-switcher button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 7px;
  border: 0;
}
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.footer-tools .age-mark {
  width: 22px;
  height: 22px;
}
.footer-tools svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 650px) {
  /* 手机只保留页面一层边距；取消游戏区嵌套容器的左右留白。 */
  main:has(#workspace:not([hidden]) #games-view:not([hidden])) {
    padding-inline: 10px;
  }
  .lobby-games {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .game-grid {
    gap: 7px;
  }
  .game-activity {
    padding: 0 6px 12px;
    background: transparent;
    border: 0;
  }

  .lobby-welcome-copy {
    padding-inline: 14px;
  }
  footer {
    padding-inline: 12px;
  }
  .footer-main {
    width: 100%;
    justify-content: space-between;
  }
  .footer-tools {
    margin-left: 0;
  }
}

@media (max-width: 420px) {
  /* 窄屏将登录收为头像入口，保留完整无障碍名称；注册仍显示文字。
     避免较长的欧洲语言文案挤出屏幕，也不压缩游戏卡片的可用宽度。 */
  #guest-login {
    width: 36px;
    flex: 0 0 36px;
  }
  #guest-login svg {
    display: block;
    flex-shrink: 0;
  }
  #guest-login span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 标题和机台模式固定为一行；分类独占下一行，不挤占标题空间。 */
.games-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.games-titlebar .games-title {
  flex-basis: auto;
  margin-bottom: 0;
}
/* 原生 checkbox 保留键盘与表单语义，独立轨道负责展示；整个标签均可点击。
   视觉开关保持紧凑，点击区域至少 44px 高，兼顾手机触控。 */
.lounge-mode {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.lounge-mode input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.lounge-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
  flex: 0 0 30px;
  border-radius: 999px;
  background: #cbd5df;
  transition: background-color 160ms ease;
}
.lounge-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 2px #0002;
  transition: transform 160ms ease;
}
[data-theme='dark'] .lounge-switch {
  background: #526071;
}
.lounge-mode input:checked + .lounge-switch {
  background: var(--accent);
}
.lounge-mode input:checked + .lounge-switch::after {
  transform: translateX(12px);
}
.lounge-mode input:focus-visible + .lounge-switch {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lounge-mode:has(input:checked) {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .lounge-switch,
  .lounge-switch::after {
    transition: none;
  }
}
.game-type-filter {
  width: 100%;
}
/* 恢复记录之间的细线，缩短行距；隐藏原生滚动条但保留滚轮与触控滚动。 */
.activity-item {
  min-height: 72px;
  padding: 11px 0;
}
.activity-item + .activity-item {
  margin-top: 0;
  border-top: 1px solid var(--line);
}
.activity-list,
.game-types {
  scrollbar-width: none;
}
.activity-list::-webkit-scrollbar,
.game-types::-webkit-scrollbar {
  display: none;
}
.activity-list {
  max-height: 432px;
}
/* 覆盖旧平台样式中的半圆角。余额与语言共享完整背景，子按钮不再单独描边。 */
.topbar .wallet-menu {
  background: var(--panel2);
  border-radius: 10px;
}
.topbar #wallet-toggle,
.topbar #currency-toggle,
[data-theme='dark'] .topbar #currency-toggle {
  background: transparent;
  border: 0;
  border-radius: 10px;
  min-height: 40px;
}
.topbar #currency-toggle {
  color: var(--muted);
}
.topbar #wallet-toggle:hover,
.topbar #currency-toggle:hover {
  color: var(--accent);
}
@media (max-width: 1100px) {
  .activity-list {
    max-height: none;
  }
}
@media (max-width: 650px) {
  .game-types svg {
    display: none;
  }
  .games-titlebar {
    gap: 8px;
  }
  .games-titlebar .games-title {
    gap: 5px;
  }
  .games-titlebar h2 {
    font-size: 18px;
    white-space: normal;
  }
  #game-catalog-count {
    display: none;
  }
  .lounge-mode {
    max-width: 45%;
    font-size: 11px;
  }
  .topbar #wallet-toggle,
  .topbar #currency-toggle {
    min-height: 36px;
  }
}

@media (min-width: 1101px) {
  /* 右栏不参与行高计算，由左侧目录决定高度；列表占用剩余空间并独立滚动。
     分类筛选、机台展开或窗口缩放时由 Grid 自动重新排版，无须 JS 测量。 */
  .game-activity {
    align-self: stretch;
    contain: size;
    min-height: 0;
  }
  .game-activity .activity-list {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
}

/* 圣诞帽只装饰默认 CLUB998 标志，独立于原始 SVG，不修改品牌与商户上传图片。
   透明素材帽檐贴合圆形标志上沿，毛球向左，避免遮住字标。
   三种尺寸分别补偿字标居中留白；伪元素不占布局、不拦截点击，加载期间隐藏。 */
.topbar > .brand:not(.brand-pending):has(.parallel-wordmark)::before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 48px;
  height: 24px;
  top: -14px;
  left: -10px;
  background: url('/assets/lobby/logo-santa-hat.webp') center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 650px) {
  .topbar > .brand:not(.brand-pending):has(.parallel-wordmark)::before {
    width: 30px;
    height: 15px;
    top: -4px;
    left: -6px;
  }
}
.topbar.logo-compact > .brand:not(.brand-pending):has(.parallel-wordmark)::before {
  width: 42px;
  height: 21px;
  top: -12px;
  left: -8px;
}

/* 错误留在所属区域，不撑高导航、不盖住游戏；完整文字仍可被辅助技术读取。 */
.topbar .session-loading:not(.is-checking) {
  max-width: 280px;
  flex-wrap: nowrap;
}
.topbar .session-loading:not(.is-checking) p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
}
.catalog-warning {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.catalog-warning button {
  flex-shrink: 0;
  padding: 5px 12px;
}
@media (max-width: 650px) {
  .topbar .session-loading:not(.is-checking) {
    max-width: 200px;
  }
}