/* 下班实验室 · 社群档案页
   视觉规范来源：05-brand/brand-design-system.md */

:root {
  --primary: #E8A87C;
  --primary-dark: #C38D6D;
  --bg-cream: #FAF8F5;
  --bg-warm-white: #fffbf5;
  --bg-oat: #F5F0EB;
  --text-dark: #2D2926;
  --text-muted: #6B6560;
  --play-lab: #F2C078;
  --think-lab: #85A392;
  --heal-lab: #B8A9C9;
  --shadow-card: 0 8px 24px rgba(45, 41, 38, 0.06);
  --shadow-standard: 0 10px 25px -5px rgba(45, 41, 38, 0.2), 0 8px 16px -8px rgba(232, 168, 124, 0.3);
  --shadow-emphasis: 0 20px 40px -10px rgba(45, 41, 38, 0.3), 0 12px 24px -8px rgba(232, 168, 124, 0.5);
  --shadow-soft: 0 4px 12px rgba(242, 192, 120, 0.3);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, var(--bg-cream) 0%, var(--bg-warm-white) 100%);
  color: var(--text-dark);
  min-height: 100vh;
  line-height: 1.6;
}

/* ---------- 暖光光晕 ---------- */
.glow-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.glow-left {
  position: absolute;
  top: -10%; left: -20%;
  width: 80%; height: 45%;
  background: radial-gradient(circle, var(--play-lab) 0%, transparent 70%);
  opacity: 0.35;
  filter: blur(80px);
}
.glow-right {
  position: absolute;
  top: 15%; right: -20%;
  width: 70%; height: 50%;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  opacity: 0.28;
  filter: blur(90px);
}

/* ---------- 页面容器（手机优先） ---------- */
.page {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* ---------- 通用卡片 ---------- */
.card {
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid var(--bg-oat);
  border-radius: 28px;
  padding: 26px 24px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}

.section-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--primary-dark);
  background: var(--bg-oat);
  border-radius: 40px;
  padding: 4px 14px;
  margin-bottom: 14px;
}

.section-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}
.section-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* ---------- 开场 hero ---------- */
.hero {
  text-align: center;
  padding: 52px 16px 36px;
}
.hero .brand {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.hero .avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  box-shadow: var(--shadow-emphasis);
  border: 3px solid rgba(255, 255, 255, 0.6);
}
.hero h1 {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 rgba(232, 168, 124, 0.2);
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.hero .member-no {
  font-size: 17px;
  color: var(--primary-dark);
  font-weight: 500;
}
.hero .member-no strong { color: var(--primary); font-weight: 800; }
.hero .first-day {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ---------- 数字卡片 ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.stat {
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid var(--bg-oat);
  border-radius: 24px;
  padding: 20px 12px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.stat .num {
  font-size: 36px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.15;
}
.stat .num small { font-size: 16px; font-weight: 700; margin-left: 2px; }
.stat .label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------- 同场伙伴 ---------- */
.companion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.companion + .companion { border-top: 1px solid var(--bg-oat); }
.chip-avatar {
  width: 44px; height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.companion .who { flex: 1; min-width: 0; }
.companion .who .name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.companion .who .times { font-size: 13px; color: var(--text-muted); }
.companion .bar-wrap { width: 90px; }
.bar {
  height: 8px;
  border-radius: 8px;
  background: var(--bg-oat);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--play-lab), var(--primary));
}
.met-total {
  text-align: center;
  font-size: 15px;
  margin-bottom: 16px;
}
.met-total strong { color: var(--primary); font-size: 22px; font-weight: 900; }

/* ---------- 缘分链 ---------- */
.fate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-cream);
  border-radius: 20px;
  margin-bottom: 10px;
}
.fate-row .emoji { font-size: 22px; }
.fate-row .txt { font-size: 15px; }
.fate-row .txt b { color: var(--primary-dark); }
.fate-row .exp-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  box-shadow: var(--shadow-card);
}
.fate-row .exp-thumb.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--text-dark);
}
.fate-row .exp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.fate-row .exp-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--text-dark);
}
.fate-row .exp-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.fate-row .exp-meta b {
  color: var(--primary-dark);
}

/* ---------- 游戏 ---------- */
.hint {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-cream);
  border-radius: 16px;
  padding: 10px 14px;
  margin-top: 14px;
}

/* 个人页「你玩了什么」按类别分组：类别标题复用 .type-head/.type-pill（和桌游库列表同款），
   标题下面一行最近玩的缩略图（≤4 款 + 「+N」收尾格），等宽 flex 撑满整行——款数少时格子自然更大，
   不用为了对齐凑一个空位出来 */
.gp-thumb-row { display: flex; gap: 8px; margin: 8px 0 18px; }
.gp-thumb-row:last-child { margin-bottom: 0; }
.gp-thumb {
  /* 固定按4列算宽度，不管这一类实际有几款——不然只有1-2款时会因为flex:1撑成一个巨大的格子，
     跟旁边款数多的类别大小不一致 */
  flex: 0 0 calc((100% - 24px) / 4);
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: block;
}
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-thumb.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.gp-thumb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-oat);
  color: var(--text-dark);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.gp-thumb-more:hover { background: var(--primary); color: #fff; }

/* 「+N」点开后的桌游浏览层格子（复用 .album-ov 外壳，见 openGameOverlay）：封面 + 名字的小卡片，
   手机 3 列 / 桌面 4 列，和相册浏览层的图片网格是同一套交互体感但多了文字信息 */
.gp-ov-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 900px) {
  .gp-ov-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gp-ov-tile { display: block; color: inherit; text-decoration: none; }
.gp-ov-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.gp-ov-cover.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.gp-ov-name {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gp-ov-plays { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ---------- 徽章 ---------- */
.badge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.badge {
  text-align: center;
  padding: 18px 10px 14px;
  border-radius: 24px;
  background: var(--bg-cream);
  border: 2px solid var(--bg-oat);
}
.badge .icon { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.badge .name { font-weight: 800; font-size: 15px; }
.badge .desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- 照片墙 ---------- */
.photo-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.photo-wall a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease;
}
.photo-wall a:hover { transform: scale(1.03); }
.photo-wall img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* 相册归档页：封面卡网格（照片先行），点开展开整行照片墙 */
.album-grid {
  display: grid;
  /* minmax(0,1fr)：场地名是 nowrap 长文本，纯 1fr 会被内容最小宽度撑得两列不等宽 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}
.album-card {
  cursor: pointer;
  padding-bottom: 12px;
  border-radius: 16px;
  transition: transform 0.2s ease;
}
.album-card:hover { transform: translateY(-3px); }
.album-cover-lg {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease;
}
.album-card:hover .album-cover-lg { box-shadow: var(--shadow-standard); }
.album-card .at { font-weight: 800; font-size: 14px; margin-top: 8px; }
.album-card .ap {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.album-card .ap span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 相册浏览层：整场照片铺开（手机 2 列/桌面 3 列，内部滚动），灯箱(z-index:100)叠在其上 */
.album-ov {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}
.album-ov-panel {
  position: relative;
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: var(--bg-warm-white);
  border-radius: 24px;
  padding: 16px;
}
.album-ov-head {
  position: sticky;
  top: -16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -16px -16px 12px;
  padding: 14px 16px;
  background: var(--bg-warm-white);
  border-bottom: 1px solid var(--bg-oat);
}
.album-ov-title { font-weight: 800; font-size: 15px; }
.album-ov-count { font-weight: 600; font-size: 12px; color: var(--text-muted); margin-left: 8px; }
/* 浏览层是米白面板，关闭钮换成暖色浅底（.album-ov 前缀提权，压过靠后定义的 .lb-btn） */
.album-ov .album-ov-close {
  position: static;
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 15px;
  background: var(--bg-oat);
  color: var(--primary-dark);
}
.album-ov .album-ov-close:hover { background: var(--primary); color: #FAF8F5; }
.album-ov-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.album-ov-grid a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.album-ov-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
@media (min-width: 900px) {
  .album-ov-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 时间线里的当天照片 */
.tl-photos {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}
.tl-photos a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.tl-photos img {
  display: block;
  width: 62px;
  height: 62px;
  object-fit: cover;
}
.tl-photos .more {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  background: var(--bg-oat);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
}
.tl-photos a.more:hover {
  background: var(--primary);
  color: var(--text-dark);
}

/* ---------- 荣誉墙（奖状） ---------- */
.award-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.award {
  position: relative;
  text-align: center;
  padding: 18px 10px 14px;
  border-radius: 20px;
  background: linear-gradient(160deg, #fffbf5 0%, #FAF4EA 100%);
  border: 2px solid rgba(242, 192, 120, 0.55);
  box-shadow: var(--shadow-soft);
}
.award::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(195, 141, 109, 0.35);
  border-radius: 15px;
  pointer-events: none;
}
.award .aicon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.award .atitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--primary-dark);
  margin-bottom: 6px;
}
.award .aholders {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
}
.award .aholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
  max-width: 100%;
}
.award .aholder .dot {
  width: 22px; height: 22px;
  min-width: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.award .aline { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* ---------- 时间线 ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--play-lab), var(--primary));
  opacity: 0.5;
}
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -22px; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--bg-cream);
  box-shadow: var(--shadow-soft);
}
.tl-item.first-visit::before { background: var(--play-lab); }
.tl-item .tl-date { font-size: 13px; color: var(--primary-dark); font-weight: 700; }
.tl-item .tl-venue { font-size: 16px; font-weight: 800; margin: 2px 0; }
.tl-item .tl-meta { font-size: 13px; color: var(--text-muted); }
.tl-item .tl-games { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.tl-item .tl-games b { color: var(--primary-dark); font-weight: 700; }
.tl-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
  background: var(--play-lab);
  border-radius: 40px;
  padding: 1px 10px;
  margin-left: 6px;
  vertical-align: 2px;
}

/* ---------- 结尾 ---------- */
.footer-card {
  text-align: center;
  padding: 40px 24px;
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid var(--bg-oat);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}
.footer-card .slogan {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.footer-card .slogan-en {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
.footer-card .next {
  margin-top: 20px;
  font-size: 14px;
  color: var(--primary-dark);
  background: var(--bg-cream);
  border-radius: 16px;
  padding: 12px;
}
.footer-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 18px;
  opacity: 0.8;
}

/* ---------- 首页专用 ---------- */
.home-hero { text-align: center; padding: 56px 16px 30px; }
.home-hero h1 {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 3px 3px 0 rgba(232, 168, 124, 0.2);
}
.home-hero .sub {
  margin-top: 10px;
  font-size: 15px;
  color: var(--primary-dark);
}
/* 下一场活动 CTA：新访客的第一入口 */
.hero-cta {
  display: inline-block;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  background: var(--primary);
  border-radius: 40px;
  padding: 12px 26px;
  text-decoration: none;
  box-shadow: var(--shadow-standard);
  transition: all 0.2s ease;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-emphasis); }
/* 找到我的页面搜索 */
.member-search { margin-bottom: 14px; }
.member-search .filter-search { margin-bottom: 0; }
.member-search-results { margin-top: 8px; }
.msr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-dark);
  transition: background 0.2s ease;
}
.msr-row:hover { background: var(--bg-oat); }
.msr-row .dot {
  width: 28px; height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.msr-name { flex: 1; font-weight: 700; font-size: 15px; }
.msr-via { font-weight: 500; font-size: 12px; color: var(--text-muted); }
.msr-meta { font-size: 12px; color: var(--text-muted); }
.msr-empty { font-size: 13px; color: var(--text-muted); padding: 8px 4px; }

.member-wall { display: flex; flex-wrap: wrap; gap: 8px; }
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  background: var(--bg-cream);
  border: 1.5px solid var(--bg-oat);
  border-radius: 40px;
  padding: 5px 12px 5px 5px;
  transition: all 0.3s ease;
}
.member-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-standard);
}
.member-chip .dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
/* ---------- 场次拼桌页 ---------- */
/* 横向三 tab（2026-07-31）：正在拼桌/拼桌成功/发起拼桌，放在称呼输入框下面——三件事对应
   "查看在玩什么""看拼好了什么""自己能发起什么"，取代原来总览+类型浏览+开桌表单从上到下的堆叠 */
.ev-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--bg-oat);
  margin: 4px 0 18px;
}
.ev-tab {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 12px 4px;
  cursor: pointer;
  position: relative;
}
.ev-tab.active { color: var(--text-dark); }
.ev-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1.5px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--primary);
}
.ev-tab-panel.hidden { display: none; }

/* ---------- 拼桌进度速览（称呼和拼桌 tab 之间的迷你榜单，2026-08-01 加、2026-08-02 改三档）----------
   只是"扫一眼看看现在拼到哪了"的入口，比下面的 tab 更轻——用 .card 同一层外壳。
   不设总标题（用户要求去掉）：确定发车（满员）→ 发车但未满（过线还没满）→ 差你一位发车
   （有人报了最想玩但还没过线），三个分区标题各自就是说明，空的档直接不渲染 */
.ev-hot-card.hidden { display: none; }
/* 分区标题：跟 .filter-chips-label 同量级的小标题，不用 .section-label 那种胶囊——
   这里是三档并列的说明文字，不是整卡的主标题 */
.ev-hot-zone-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 14px 0 6px;
}
.ev-hot-zone-title:first-child { margin-top: 0; }
/* 三行一个框，行间一条分割线（2026-08-01，用户要求）——不用 .ev-item 那套卡中卡描边，
   这里更轻量，一个框圈住整组、内部只用一条线分隔，跟"总览"读起来是同一份榜单 */
.ev-hot-list {
  border: 1.5px solid var(--bg-oat);
  border-radius: 14px;
  overflow: hidden;
}
.ev-hot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid var(--bg-oat);
}
.ev-hot-row:first-child { border-top: none; }
/* 名字左边的小封面（2026-08-01，用户要求）——比桌卡自己的 72px 封面小一号，这里只是
   榜单里的辅助识别，不是主视觉 */
.ev-hot-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ev-hot-cover {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  object-fit: cover;
}
.ev-hot-cover.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dark);
}
/* 游戏名可点，跳到下面「正在拼桌」tab 里那张具体的桌卡（2026-08-01）——颜色/hover
   跟别处的游戏名链接（a.game-card:hover .gc-name）同一套反馈 */
a.ev-hot-name {
  font-weight: 800;
  font-size: 15px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.ev-hot-name:hover { color: var(--primary-dark); text-decoration: underline; }
.ev-hot-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ev-hot-want, .ev-hot-interest {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 40px;
  white-space: nowrap;
}
/* 必玩/感兴趣同一色相（焦糖）深浅两级区分郑重程度（2026-08-02，head-of-design 建议）——
   之前必玩用苔藓绿、感兴趣用蜜糖黄是"读反了"：暖橙/蜜糖黄在站内其它地方（必玩按钮选中态
   .ev-signed、感兴趣确认态 .ev-int-btn.on）专门表示"更郑重/已确认"，却被分给了更轻的感兴趣；
   苔藓绿又是 Think Lab 专属色，跟"你玩过"标签语义无关，纯属临时借色。改成跟 .ev-wants
   （必玩名单，深焦糖）/.ev-interests（感兴趣名单，暖灰浅色）同一套逻辑：必玩＝焦糖实底+炭黑字
   （像盖了章），感兴趣＝同一焦糖降到 1/3 浓度+暖灰字（浅雾感，仍是热度信号但不抢眼）——
   不碰任何 Lab 专属色，两者对比度分别 ≈10.4:1 / ≈4.96:1，远超 AA */
.ev-hot-want { background: rgba(195, 141, 109, 0.30); color: #2D2926; }
.ev-hot-interest { background: rgba(195, 141, 109, 0.10); color: var(--text-muted); }
/* 满员的桌换一个背景色（2026-08-02，用户要求）——跟"够开"的浅焦糖胶囊拉开，用站内「开桌」
   主按钮同一套暖橙实底+炭黑字（.ev-want-btn 基础态同款配色，对比度已验证过），一眼认出
   "这桌已经不用再攒人了" */
.ev-hot-want.full { background: var(--primary); color: var(--text-dark); }
/* 每张桌卡自己的浅描边卡片（2026-07-31，参照设计参考图）：跟外层 .ev-type-group 的边框
   形成"卡中卡"的两层边框——桌卡背景比外层卡片底色更暖一点（bg-cream），在同一张浅色边框
   卡片里也能读出"这是独立的一张"，不再靠一条分隔线区分 */
.ev-item {
  padding: 14px;
  display: flex;
  flex-direction: column; /* 单列纵向排布，2026-07-31 参照设计参考图——按钮挪到卡片最下面，
                              不再是跟内容并排的右侧列 */
  background: var(--bg-cream);
  border: 1.5px solid var(--bg-oat);
  border-radius: 16px;
  margin-bottom: 10px;
}
.ev-item:last-child { margin-bottom: 0; }
.ev-side-btn { white-space: nowrap; }
.ev-item .game-card { padding-bottom: 6px; }
.ev-item .game-card + .game-card { border-top: none; }
/* 展开区名单左对齐到跟封面同样的起始位置（2026-07-31，参照设计参考图）——
   之前是缩进对齐文字列（86px），现在改成贴着卡片左边，不再缩进 */
.ev-extras { padding-left: 0; }

/* ---------- 标签行（WSBG/你玩过/你是GM/缺GM/带扩展，2026-07-31）----------
   独立一行放在 gc-meta 下面，跟名字分开——WSBG/你玩过用"轻"配色变体（.light），
   不影响 games.html 等别处继续用原来的实心/图章视觉 */
.ev-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.wsbg-badge.light {
  background: rgba(255, 184, 28, 0.18);
  color: #8A6200;
  box-shadow: none;
}
.played-sticker.light {
  transform: none; /* 去掉图章的 -4deg 旋转，标签行里要跟其它胶囊一样安静 */
  background: rgba(133, 163, 146, 0.18);
  color: #3E5A48;
  box-shadow: none;
}

/* ---------- 必玩进度条（按人数上限分格子，2026-07-31）----------
   暖色单色递进（缺人＝暖灰、可开桌＝暮光橙、满员＝焦糖深），跟右边"必玩 x/x"同一行 */
.ev-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ev-fill-track.cells {
  flex: 1;
  display: flex;
  gap: 3px;
  min-width: 0;
}
.ev-fill-cell {
  flex: 1;
  height: 7px;
  min-width: 3px;
  border-radius: 3px;
  background: var(--bg-oat);
}
/* 原来 rgba(107,101,96,0.5) 叠在暖底上实测只有 ~2:1 对比度，不达 WCAG 非文字元素 3:1 门槛——
   偏偏这是最需要一眼看出"填了几格"的状态（interface-details 审查，design/contrast），
   换成不透明的 --text-muted，实测 >4.5:1 */
.ev-fill-cell.filled.state-need { background: var(--text-muted); }
.ev-fill-cell.filled.state-ready { background: var(--primary); }
.ev-fill-cell.filled.state-full { background: var(--primary-dark); }
.ev-progress-count { font-size: 12px; font-weight: 800; color: var(--text-dark); white-space: nowrap; }
.ev-fill-empty-hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* 展开名单前的分隔线（2026-07-31）：放在 .ev-extras 内部第一个子元素，
   收起时跟着展开区一起收起，不会露出一条孤零零的线 */
.ev-divider { height: 1px; background: var(--bg-oat); margin: 2px 0 10px; }

/* ---------- 卡片展开/收起（GM · 完整名单）----------
   独立控制行，不是整卡可点——gc 库内游戏是跳 game.html 的 <a>，整卡可点会跟"点封面去详情页"抢点击。
   过渡时间常数复用 .exp-wrap 的 220ms（拼桌开桌 chips 展开动画同一套节奏，不新开一套） */
/* 文字链接样式（不是通栏行），2026-07-31 参照设计参考图调整——原先是撑满宽度+虚线上边框的
   一整行，现在改成紧凑的行内链接，跟"必玩 X/cap"那行文字挨得更近，读起来像"这行文字下面还有更
   多"而不是另起一个分区。颜色用 #87552C（已验证 5.83:1，AA 达标）而不是 --primary-dark
   直接当文字色（那个组合实测只有 2.67:1，不达标，这里顺手避开这个坑，不是新增问题） */
.ev-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 700;
  color: #87552C;
}
.ev-more-toggle:hover { text-decoration: underline; }
.ev-more-chev { transition: transform 0.2s ease; }
.ev-item.open .ev-more-chev { transform: rotate(180deg); }
.ev-extras {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}
.ev-item.open .ev-extras { max-height: 600px; opacity: 1; }
/* GM 这行不需要头像图标（2026-07-31，参照设计参考图），纯文字 */
.ev-host {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
/* 现在是真 <button>（interface-details 审查 accessibility-12），去掉浏览器原生按钮
   边框/字体/外观，视觉效果跟原来的 <a> 版本保持一致 */
.ev-claim-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dark);
  background: transparent;
  border-radius: 40px;
  padding: 3px 12px;
  margin-left: 8px;
  box-shadow: inset 0 0 0 1.5px var(--primary-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.ev-claim-btn:hover, .ev-claim-btn:active { background: var(--primary-dark); box-shadow: var(--shadow-soft); }
/* 「缺GM」常驻提示：挂在封面卡名字行（gc-name），不是折叠区内——折叠区默认收起，筛选出来的
   卡片如果这个提示只藏在折叠区里，用户扫一眼看不出来，筛选等于白筛（P1a §9.4）。
   不填色（跟 WSBG/你玩过/你是GM 这些"认证/成就"胶囊区分开）——图标+文字，读作中性事实
   提醒而不是又一枚同权重徽章，2026-07-31 参照设计参考图调整 */
.gm-vacant-hint {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 6px;
  white-space: nowrap;
}
/* 带了扩展：标签行下面独立一行的可折叠入口（2026-08-01，参照设计参考图），跟"展开名单"
   同一套交互模式（真实 role=button + 键盘可达），但状态互相独立——展开扩展列表不应该连带
   把 GM/必玩/感兴趣名单也展开。贴着卡片左边，不缩进到 gc-info 的文字列里，跟封面同一个
   起始位置——是"这桌玩的是什么"的延伸，跟 GM/必玩/感兴趣的社交信息分层 */
.ev-exp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 700;
  color: #87552C;
}
.ev-exp-toggle:hover { text-decoration: underline; }
.ev-exp-toggle .ev-more-chev { transition: transform 0.2s ease; }
.ev-exp-toggle.open .ev-more-chev { transform: rotate(180deg); }
.ev-exp-list {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}
.ev-exp-list.open { max-height: 400px; opacity: 1; margin-top: 8px; }
.ev-exp-row { margin-bottom: 6px; }
.ev-exp-row:last-child { margin-bottom: 0; }
/* 「必玩」名单：郑重一档——深色加粗，读起来像一句承诺的复述 */
.ev-wants { font-size: 12px; font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; line-height: 1.5; }
/* 「感兴趣」名单：比必玩名单再轻一档（不占座的轻信号）——更小、更淡、常规字重 */
.ev-interests { font-size: 11px; font-weight: 400; color: var(--text-muted); opacity: 0.68; margin-bottom: 6px; line-height: 1.5; }
/* 名单里每个人的「昵称 + 玩过几次」——inline-block 让两者绑在一起换行，不会出现
   昵称在行尾、次数标签孤零零掉到下一行的情况；标签本身始终用常规字重+更淡颜色，
   不管外层是必玩的加粗还是感兴趣的浅色，都保持「客观计数」的中性语气，不抢名单本身的强调 */
.ev-wl-item { display: inline-block; white-space: nowrap; }
.ev-wl-cnt {
  font-weight: 400;
  font-size: 0.92em;
  color: var(--text-muted);
  opacity: 0.7;
  margin-left: 3px;
}
/* 名单里「你」的自我定位标签（P1a §2）：量级参照 .played-sticker「你玩过」，不抢整行注意力——
   插在昵称文字和 .ev-wl-cnt 次数标签之间 */
.ev-you-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-dark);
  background: rgba(184, 169, 201, 0.22);
  border-radius: 6px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: 1px;
  white-space: nowrap;
}
/* 必玩/感兴趣按钮：横排、靠右、卡片最下面（2026-07-31，参照设计参考图）——展开名单会把这行推下去，
   收起后自然回到展开区收起前的位置，是纵向 flow 天然的行为，不需要额外定位逻辑 */
.ev-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.ev-actions .ev-side-btn { text-align: center; }
/* 「感兴趣」开关：不是必玩按钮的描边版，是完全不同量级的小标签——
   灭 = 近乎纯文字、仅一道极淡暖色描边；亮 = 蜜糖黄软底轻点亮，绝不用必玩的橙色实心语汇，
   避免和「必玩 ✓」的郑重感混淆（必玩为主、感兴趣为辅，靠尺寸+字重+色彩饱和度三重拉开差距） */
/* 尺寸跟 .ev-want-btn.ev-side-btn 完全一致（2026-07-31，用户要求两个胶囊一样大）——
   区分必玩/感兴趣靠字重和选中态配色，不再靠尺寸拉开差距 */
/* 现在是真 <button>（accessibility-12），去掉浏览器原生按钮边框/字体/外观 */
.ev-int-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border-radius: 40px;
  padding: 6px 16px;
  text-decoration: none;
  /* 未选中态边框颜色（2026-08-01，用户要求）：原来用 --bg-oat（#F5F0EB）叠在卡片本来就是
     --bg-cream（#FAF8F5）的底色上，两个颜色太接近，胶囊描边基本看不出来——换成暖灰半透明，
     只是"看得出这是个胶囊"的轻描边，不抢选中态（下面 .on）的视觉重量 */
  box-shadow: inset 0 0 0 1.5px rgba(107, 101, 96, 0.3);
  transition: all 0.2s ease;
}
.ev-int-btn:hover { color: var(--primary-dark); box-shadow: inset 0 0 0 1.5px var(--primary-dark); }
.ev-int-btn.on {
  font-weight: 700;
  color: #87552C;
  background: linear-gradient(90deg, rgba(242, 192, 120, 0.30), rgba(232, 168, 124, 0.16));
  box-shadow: inset 0 0 0 1.5px rgba(242, 192, 120, 0.65);
}
.ev-int-btn.on:hover { box-shadow: inset 0 0 0 1.5px rgba(242, 192, 120, 0.9); }
.ev-int-btn:disabled { opacity: 0.7; cursor: default; }
.ev-blurb {
  font-size: 13px;
  color: var(--primary-dark);
  background: var(--bg-cream);
  border-left: 3px solid var(--play-lab);
  border-radius: 0 12px 12px 0;
  padding: 6px 10px;
  margin-bottom: 6px;
  line-height: 1.5;
}
/* 「必玩」= 承诺：字重更重、双层暖阴影——单独出现时（开桌按钮/各种确认弹框）是实心大按钮；
   跟 .ev-side-btn 一起出现时（卡片内必玩/感兴趣两个胶囊）尺寸改成跟 .ev-int-btn 一致，见下方
   .ev-want-btn.ev-side-btn 覆盖规则。这里也是真 <button>（accessibility-12），去掉原生按钮外观 */
.ev-want-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-dark);
  background: var(--primary);
  border-radius: 40px;
  padding: 7px 20px;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: all 0.2s ease;
}
.ev-want-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-standard); }
.ev-want-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
.ev-want-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.ev-nick-input {
  flex: 1;
  max-width: 160px;
  border: 2px solid var(--bg-oat);
  border-radius: 40px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--bg-cream);
  outline: none;
}
.ev-nick-input:focus { border-color: var(--primary); }
@media (max-width: 520px) {
  .ev-extras { padding-left: 0; }
}

/* ---------- 补记页（catchup.html）：多场折叠列表 ---------- */
.catchup-row + .catchup-row { border-top: 1px solid var(--bg-oat); }
.catchup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px;
  cursor: pointer;
  user-select: none;
}
.catchup-head-main { flex: 1; min-width: 0; }
.catchup-date { font-size: 15px; font-weight: 800; }
.catchup-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.catchup-mine-tag {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--bg-oat);
  border-radius: 40px;
  padding: 3px 10px;
  white-space: nowrap;
}
.catchup-chev {
  flex: none;
  color: var(--primary-dark);
  font-size: 14px;
  transition: transform 0.2s ease;
}
.catchup-row.open .catchup-chev { transform: rotate(180deg); }
.catchup-body { padding: 0 0 18px; }
.catchup-body .card { margin-bottom: 0; }
@media (max-width: 520px) {
  .catchup-head { padding: 12px 0; }
}
@media (min-width: 900px) {
  .catchup-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-content: start; }
  .catchup-list > .section-label, .catchup-list > .section-sub { grid-column: 1 / -1; }
  .catchup-row { grid-column: span 1; }
  .catchup-row.open { grid-column: 1 / -1; }
}

/* ---------- 桌游库筛选器 ---------- */
.filter-card { padding: 18px 18px; }
.filter-search {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--bg-oat);
  border-radius: 40px;
  padding: 10px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--bg-cream);
  outline: none;
  margin-bottom: 12px;
}
.filter-search:focus { border-color: var(--primary); }
/* 最想玩/也想玩用法说明（2026-08-02）——就是一行小字，不做成 .hint 那种带底色的提示框，
   避免在"正在拼桌"顶部又多一层视觉重量 */
.ev-want-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
/* 拼桌页筛选chip行上方的小标题（2026-07-31）——桌游库页的 .filter-chips 复用同一个 class，不受影响 */
/* 标签是 .filter-chips 这行的第一个孩子，跟chip同一行、一起wrap，不单独占一行 */
.filter-chips-label { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.filter-chip {
  /* 现在是真正的 <button>（键盘可达），去掉浏览器原生按钮字体/外观，边框/背景仍按下面的规则来 */
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 40px;
  color: var(--text-dark);
  background: var(--bg-cream);
  border: 1.5px solid var(--bg-oat);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.filter-chip:hover { border-color: var(--primary); }
.filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-dark);
  box-shadow: var(--shadow-soft);
}
/* WSBG 筛选 chip：默认态和普通 chip 一样，激活态用赛事本色（黄底白字）而不是站内品牌橙，
   和游戏卡片上的 WSBG 小标签色值呼应，一眼认出这是"外部认证"筛选而非普通类型筛选 */
.wsbg-filter-chip.active {
  background: #FFB81C;
  border-color: #FFB81C;
  color: #fff;
  box-shadow: var(--shadow-soft);
}
/* 尺寸跟 .filter-chip 对齐（2026-08-01，用户要求「人数」「谁有/哪里有」两个筛选 select
   跟 WSBG 比赛桌游那颗 chip 一样大）——之前 padding/边框都比 chip 粗一号，同一行筛选器
   里显得不匹配 */
.filter-players {
  border: 1.5px solid var(--bg-oat);
  border-radius: 40px;
  padding: 5px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--bg-cream);
  outline: none;
}
.filter-players:focus { border-color: var(--primary); }
/* 「人数」「谁有/哪里有」两个 select 固定同一行（2026-08-01，用户要求）——独立 flex 行，
   不依赖 select 天然 inline-block 换行，窄屏也保证这两个分到一组 */
.filter-selects { display: flex; flex-wrap: wrap; gap: 8px; }
/* 拼桌页「带一款游戏来开桌」表单里的「桌游主人」筛选：和桌游库的所属筛选同款 select，
   但这里独占一行、宽度撑满，和它上下的 .filter-search 输入框对齐 */
.owner-filter {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}
/* 选完「桌游主人」后，select 本身收起来，换成这枚确认 chip（暖橙实心，呼应 .filter-chip.active
   的「已激活筛选」视觉），「换一个」点了切回 select——选中态不占太多视觉重量，但清楚知道选了谁 */
.owner-filter-chip {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 16px;
  border-radius: 40px;
  background: var(--primary);
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: var(--shadow-soft);
}
.owner-filter-chip-clear {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* 开桌表单·扩展多选（P1）：故意不用 .filter-chip.active 那套实心暮光橙——
   紧挨着「开桌」实心 CTA 按钮，撞色会分不清哪个是提交按钮，改用更轻的蜜糖黄配色 */
.exp-wrap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}
.exp-wrap.open { max-height: 240px; opacity: 1; }
.exp-ask { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 2px 0 6px; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.exp-chip {
  appearance: none; -webkit-appearance: none; font-family: inherit;
  font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 40px;
  background: var(--bg-cream); border: 1.5px solid var(--bg-oat);
  color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; user-select: none;
}
.exp-chip:hover { border-color: var(--primary); color: var(--text-dark); }
.exp-chip.on {
  font-weight: 700; color: #87552C;
  background: linear-gradient(90deg, rgba(242,192,120,0.30), rgba(232,168,124,0.16));
  border-color: rgba(242,192,120,0.65);
}
.exp-chip.on:hover { border-color: rgba(242,192,120,0.9); }

/* ---------- 桌游卡片 ---------- */
.game-card {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  align-items: flex-start;
}
.game-card + .game-card { border-top: 1px solid var(--bg-oat); }
img.game-cover {
  width: 72px;
  height: 72px;
  min-width: 72px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.game-cover.fallback {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-dark);
}
.gc-info { flex: 1; min-width: 0; }
.gc-name { font-weight: 800; font-size: 15px; line-height: 1.4; }
.gc-en { font-weight: 500; color: var(--text-muted); font-size: 12px; }
/* WSBG（世界桌游大赛）参赛认证标 —— 沿用赛事官方配色（黄底白字），不用站内品牌色，
   目的是让它读作「外部认证徽标」而不是我们自己的功能状态标签 */
.wsbg-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: #FFB81C;
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: 2px;
  white-space: nowrap;
}
/* 详情页大标题旁用大一号变体，40px 标题旁 10px 小标会显得比例失衡 */
.wsbg-badge.lg {
  font-size: 15px;
  padding: 2px 10px;
  border-radius: 7px;
  vertical-align: 6px;
  margin-left: 8px;
}
/* 教学视频·桌游库页「标签」——刻意做成文字胶囊而不是圆点图标：
   一眼读出「这是属性」而非「这是控件」，配色沿用 type-pill 同款「浅底+同色系深字」公式
   （E8A87C 30% 透明度打底 + #87552C 深字，对比度 ~5.2:1，已在 type-pill 验证过），
   不可点，不设 cursor:pointer / hover 态，和拼桌页的按钮版故意做出质感区分。
   .expansion-tag（桌游扩展数量标签，2026-07-29）/ .ev-exp-tag（拼桌页「带扩展」标签，2026-07-30）
   复用同一套视觉，属性完全一致，故合并选择器 */
.video-tag, .expansion-tag, .ev-exp-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #87552C;
  background: rgba(232, 168, 124, 0.3);
  box-shadow: inset 0 0 0 1.5px rgba(232, 168, 124, 0.8);
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: 5px;
  vertical-align: 1px;
  white-space: nowrap;
}
/* 教学视频·拼桌页「按钮」——放在 ev-extras 里，紧跟"感兴趣的人"名单下一行（不是感兴趣按钮），
   和详情页 .game-video-cta 同一套实心暖橙药丸语言（缩小一号）；独立可点、target=_blank
   新标签页打开，不打断当前拼桌页的报名状态。
   display:flex（不是 inline-flex）+ width:fit-content：GM 是「暂无」且没有必玩/感兴趣名单时
   （比如库外没人认领的桌），前一个兄弟元素是 .ev-host（inline-flex），如果这里也用 inline-flex
   就会跟 GM 那行挤在同一行——block 级但宽度收紧到内容大小，既保证独占一行，又不会撑成通栏 */
.gc-video-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dark);
  background: var(--primary);
  border-radius: 40px;
  padding: 5px 13px;
  margin-top: 2px;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: all 0.2s ease;
}
.gc-video-btn:hover, .gc-video-btn:active { background: var(--primary-dark); box-shadow: var(--shadow-standard); }
.gc-intro { font-size: 13px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.gc-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* 教学视频跟人数·时长同一行（2026-07-31，参照设计参考图）：跟 gc-meta 同级大小，
   决策辅助信息不需要占比原来折叠区里那个大按钮更大的视觉权重 */
.gc-video-cta-sm {
  color: #87552C;
  font-weight: 700;
  text-decoration: none;
  margin-left: 8px;
  white-space: nowrap;
}
.gc-video-cta-sm:hover { text-decoration: underline; }
.gc-meta .type-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
}

.game-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.game-rank-row + .game-rank-row { border-top: 1px solid var(--bg-oat); }
.game-rank-row .rank {
  font-size: 15px;
  font-weight: 900;
  color: var(--primary);
  width: 24px;
  text-align: center;
}
.game-rank-row .gname { flex: 1; font-weight: 700; font-size: 15px; }
.game-rank-row .gtype { font-size: 12px; color: var(--text-muted); }

/* ---------- 成长曲线（首页「我们走过的路」） ---------- */
.growth-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 130px;
  margin: 6px 0 4px;
}
.growth-chart .gbar {
  flex: 1;
  position: relative;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--play-lab), var(--primary));
  opacity: 0.75;
  min-height: 8px;
  transition: opacity 0.2s ease, filter 0.2s ease;
  cursor: default;
}
.growth-chart .gbar.peak {
  opacity: 1;
  box-shadow: var(--shadow-soft);
}
/* 手机没有 hover：点按柱子加 .tip-open，与 hover 等效（app.js 里切换） */
.growth-chart .gbar:hover,
.growth-chart .gbar.tip-open {
  opacity: 1;
  filter: brightness(1.06);
  z-index: 20; /* 气泡永远压在其他柱子前面 */
}
/* 悬浮气泡：日期 / 地点 / 人数 三行 */
.growth-chart .gbar:hover::after,
.growth-chart .gbar.tip-open::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-dark);
  color: var(--bg-cream);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  padding: 6px 12px;
  border-radius: 10px;
  white-space: pre-line;
  width: max-content;
  text-align: center;
  box-shadow: var(--shadow-standard);
  z-index: 30;
  pointer-events: none;
}
/* 气泡小箭头 */
.growth-chart .gbar:hover::before,
.growth-chart .gbar.tip-open::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text-dark);
  z-index: 10;
  pointer-events: none;
}
/* 靠边的柱子气泡不出界 */
.growth-chart .gbar:nth-child(-n+3):hover::after,
.growth-chart .gbar:nth-child(-n+3).tip-open::after {
  left: 0;
  transform: none;
}
.growth-chart .gbar:nth-last-child(-n+3):hover::after,
.growth-chart .gbar:nth-last-child(-n+3).tip-open::after {
  left: auto;
  right: 0;
  transform: none;
}
.growth-chart .gbar .gval {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  color: var(--primary-dark);
  white-space: nowrap;
}
.growth-months {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}
.growth-months span {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 2px solid var(--bg-oat);
  padding-top: 3px;
}

/* ---------- 日历页 ---------- */
.cal-teaser {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text-dark);
  transition: all 0.3s ease;
}
.cal-teaser:hover { transform: translateY(-2px); box-shadow: var(--shadow-standard); }
.cal-teaser .cal-emoji { font-size: 30px; }
.cal-teaser .t { flex: 1; }
.cal-teaser .t .tt { font-weight: 800; font-size: 17px; }
.cal-teaser .t .ts { font-size: 13px; color: var(--text-muted); }
.cal-teaser .arrow { font-size: 20px; color: var(--primary); font-weight: 800; }

.cal-dow-row, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 0 8px;
}
.cal-cell {
  min-height: 62px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid var(--bg-oat);
  padding: 4px 3px;
  overflow: hidden;
}
.cal-cell.blank { background: transparent; border-color: transparent; }
.cal-cell.next-month { opacity: 0.75; }
.cal-cell .dnum {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding-left: 2px;
}
.cal-cell.today {
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
}
.cal-cell.today .dnum { color: var(--primary); }
.cal-evt {
  margin-top: 2px;
  border-radius: 8px;
  padding: 3px 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cal-evt .evt-place { font-weight: 500; opacity: 0.85; }
.evt-board { background: rgba(133, 163, 146, 0.22); border: 1px solid rgba(133, 163, 146, 0.55); color: #4A6355; }
.evt-convention { background: rgba(184, 169, 201, 0.22); border: 1px solid rgba(184, 169, 201, 0.6); color: #5F5273; }
.evt-special { background: rgba(217, 165, 160, 0.25); border: 1px solid rgba(217, 165, 160, 0.65); color: #7A4A45; }
.evt-outdoor { background: rgba(242, 192, 120, 0.25); border: 1px solid rgba(242, 192, 120, 0.7); color: #7A5B24; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.cal-legend .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}

/* 日历页月份切换：左右箭头 + 当前月标题；卡片本身还接受左右滑动手势切月 */
.cal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.cal-nav-title {
  flex: 1;
  text-align: center;
  font-weight: 800;
  font-size: 17px;
  color: var(--text-dark);
}
.cal-nav-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--bg-oat);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-dark);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cal-nav-btn:hover:not(:disabled) { background: rgba(232, 168, 124, 0.25); border-color: var(--primary); }
.cal-nav-btn:disabled { opacity: 0.3; cursor: default; }

.agenda-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.agenda-row + .agenda-row { border-top: 1px solid var(--bg-oat); }
.agenda-row .adate {
  min-width: 62px;
  text-align: center;
  border-radius: 14px;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.agenda-row .adate small { display: block; font-size: 10px; font-weight: 600; opacity: 0.8; }
.agenda-row .ainfo { flex: 1; min-width: 0; }
.agenda-row .ainfo .at { font-weight: 800; font-size: 15px; }
.agenda-row .ainfo .ap { font-size: 12px; color: var(--text-muted); }
.agenda-row .acap {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}
/* 桌游局行的「先看拼桌」小字链（次级入口，主按钮是报名） */
.agenda-peek {
  display: inline-block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  text-decoration: none;
}
.agenda-peek:hover { color: var(--primary); text-decoration: underline; }
.agenda-row .agenda-cta { white-space: nowrap; }
/* ---------- 拼桌页「你玩过」印章（苔藓绿，和橙色「我想玩」按钮区分开） ---------- */
.played-sticker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #85A392;
  background: rgba(133, 163, 146, 0.1);
  border: 1.5px solid #85A392;
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 6px;
  transform: rotate(-4deg);
  vertical-align: 2px;
  white-space: nowrap;
}
/* ---------- 照片灯箱 ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 41, 38, 0.94); /* 炭黑，不用纯黑 */
}
.lb-img {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 84vh;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(45, 41, 38, 0.6);
}
.lb-btn {
  /* 现在是真正的 <button>（键盘可达），这几行去掉浏览器原生按钮边框/字体，
     不然会在圆形按钮外露出一圈系统灰边、字形也可能变成系统默认字体 */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.16);
  color: #FAF8F5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lb-btn:hover { background: rgba(232, 168, 124, 0.45); }
.lb-close { top: 18px; right: 16px; font-size: 17px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); padding-bottom: 4px; }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); padding-bottom: 4px; }
.lb-count {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(250, 248, 245, 0.85);
  font-size: 13px;
  letter-spacing: 2px;
}

/* ---------- 桌游详情页 ---------- */
/* 封面等比缩放：宽不超容器、高不超 420（竖长条盒在手机上不再占两屏）；桌面版另有 450 双上限 */
img.game-hero-cover {
  width: auto;
  max-width: 100%;
  max-height: 420px;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: var(--shadow-standard);
  margin: 0 auto 18px;
}
.game-hero-cover.fallback {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 800;
  color: var(--text-dark);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
}
.game-intro { font-size: 14px; line-height: 1.8; }
/* 详情页的 BGG 较长介绍（编译成中文，未翻译的新游戏暂显英文原文） */
.game-desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.85;
}

/* 游戏名/封面 → 详情页链接（保持原有视觉，hover 给一点暖色反馈） */
a.game-card, a.game-rank-row, a.tl-game { color: inherit; text-decoration: none; }
a.tl-game { color: var(--primary-dark); font-weight: 700; }
a.game-card:hover .gc-name, a.game-rank-row:hover .gname { color: var(--primary-dark); }

/* 拼桌页 restrictLink：卡片不再整卡可点，只有封面和名字这两小块各自是链接 */
.gc-cover-link { display: block; color: inherit; text-decoration: none; }
a.gc-name-link { display: block; color: inherit; text-decoration: none; }
a.gc-name-link:hover { color: var(--primary-dark); }
.gc-cover-link:hover .game-cover.fallback { color: var(--primary-dark); }

/* ---------- 拼桌页满员 / 还差 1 人印章 ---------- */
.full-sticker,
.seat-sticker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: 2px;
  white-space: nowrap;
}
.full-sticker {
  color: var(--primary-dark);
  background: rgba(195, 141, 109, 0.12);
  border: 1.5px solid var(--primary-dark);
  transform: rotate(-4deg);
}
.seat-sticker {
  color: var(--primary);
  background: rgba(232, 168, 124, 0.12);
  border: 1.5px dashed var(--primary);
}
/* 实验员墙底部的「报名下一场」直达链接 */
a.unlock-signup {
  color: var(--primary-dark);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
a.unlock-signup:hover { color: var(--primary); text-decoration: underline; }

/* 类型分组胶囊（拼桌页 + 桌游库共用）：类型色浅底 + 同色系深字 + 同色描边，颜色由 JS 按类型注入 */
.type-pill {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 800;
}
/* 拼桌页分组标题：胶囊保持原本大小，右侧接一条延伸到行尾的同色细线做分隔——
   胶囊本身不拉伸，靠线传达"这条线以下到下一个胶囊之前都是这个类型" */
.ev-type-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}
/* 每个类型一张独立的浅描边卡片（2026-07-31），标题+桌卡都在卡片内部——
   让每个类型分组本身也读作一个独立个体，不只是一条分隔线。
   三 tab 改版后类型分组直接躺在 tab 面板（页面暖色渐变背景）上，不再套一层外层 .card，
   所以这里要补回和 .card 一样的不透明白底+阴影，不然透着渐变底看起来空落落的 */
.ev-type-group {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  border: 1.5px solid var(--bg-oat);
  border-radius: 18px;
  padding: 14px 16px;
  margin: 14px 0;
}
.ev-type-group:first-of-type { margin-top: 4px; }
.ev-type-line {
  flex: 1 1 auto;
  height: 1.5px;
  border-radius: 2px;
  opacity: 0.3;
}
/* 类型分组默认收起（P1，2026-07-31）：只有「本场的桌」列表的分组标题可点，
   桌游下拉里复用的 .ev-type-head（.nick-drop 内）没有这个 class，不受影响 */
.ev-type-toggle { cursor: pointer; user-select: none; }
.ev-type-agg { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ev-type-toggle .ev-more-chev { flex-shrink: 0; }
.ev-type-toggle.open .ev-more-chev { transform: rotate(180deg); }
/* 筛选 chip 命中但分组当前收起时，forceOpenType 会强制展开——一次性高亮闪一下提示"这个分组是
   被筛选打开的，不是我自己点开的"，避免用户困惑（P1a §1.4，class 由 forceOpenType 加/减） */
@keyframes evTypeFlash {
  0%   { box-shadow: 0 0 0 4px rgba(232, 168, 124, 0.35); }
  100% { box-shadow: 0 0 0 4px rgba(232, 168, 124, 0); }
}
.ev-type-head.filter-opened .type-pill { animation: evTypeFlash 700ms ease-out; }

/* 桌游库组标题：胶囊 + 款数 */
.type-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.type-count { font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* 已报名（可点击进入取消流程）与取消确认警示态：
   信号态仍是实心大按钮（不能比「感兴趣」的轻量小标签还弱），只是从暮光橙换成更深的焦糖色，
   读作"已经落定、比待报时更沉一点"，而不是褪成浅底灰字的"弱化态" */
.ev-want-btn.ev-signed { background: var(--primary-dark); color: var(--text-dark); }
.ev-want-btn.ev-signed:hover { box-shadow: var(--shadow-standard); }
.ev-want-btn.ev-cancel-arm {
  background: var(--bg-warm-white);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1.5px var(--primary-dark);
}
.ev-want-btn.disabled {
  background: var(--bg-oat);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
}
.ev-want-btn.disabled:hover { transform: none; box-shadow: none; }

/* 「必玩」卡片按钮改成跟「感兴趣」同一套视觉语言（2026-07-31，用户要求）：带边框的浅底胶囊，
   选中/点击后变成带一点颜色的胶囊，不再是实心大按钮——只在 .ev-side-btn（卡片内的必玩/感兴趣
   按钮）场景生效，靠更高的选择器优先级覆盖上面的基础 .ev-want-btn 规则；.ev-want-btn 单独出现
   （开桌按钮、各种确认弹框的确认按钮）不受影响，维持原来的实心大按钮 */
.ev-want-btn.ev-side-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  /* 跟 .ev-int-btn 未选中态同一处理（2026-08-01）：--bg-oat 边框贴 --bg-cream 卡片背景太糊 */
  box-shadow: inset 0 0 0 1.5px rgba(107, 101, 96, 0.3);
  padding: 6px 16px;
}
.ev-want-btn.ev-side-btn:hover {
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1.5px var(--primary-dark);
  transform: none;
}
.ev-want-btn.ev-side-btn.ev-signed {
  font-weight: 800;
  color: #87552C;
  background: linear-gradient(90deg, rgba(242, 192, 120, 0.30), rgba(232, 168, 124, 0.16));
  box-shadow: inset 0 0 0 1.5px rgba(242, 192, 120, 0.65);
}
.ev-want-btn.ev-side-btn.ev-signed:hover {
  box-shadow: inset 0 0 0 1.5px rgba(242, 192, 120, 0.9);
}
.ev-want-btn.ev-side-btn.ev-cancel-arm {
  background: var(--bg-warm-white);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1.5px var(--primary-dark);
}
.ev-want-btn.ev-side-btn.disabled {
  background: var(--bg-oat);
  color: var(--text-muted);
  box-shadow: none;
}

/* ---------- 拼桌页称呼下拉 ---------- */
/* 每张 .card 因 backdrop-filter 自成堆叠上下文，称呼卡要整体抬到其他卡之上（但低于 z-50 的吸顶导航） */
.nick-card { position: relative; }
/* 拼桌页「怎么称呼你」卡片专用：下拉往下弹、会溢出卡片底边，必须比后面紧跟的卡片（开桌表单/赛后补记）
   高一级才不被盖住——.nick-card 本身不能带这个 z-index，因为那些卡片也用同一个 class，
   打平的话谁在 DOM 后面谁盖住前面（backdrop-filter 让每张卡各自成一个层叠上下文） */
.nick-card-top { z-index: 45; }
.nick-wrap { position: relative; }
.nick-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--bg-oat);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  z-index: 60;
  max-height: 264px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* 滚到头也不把滚动传给页面 */
}
.nick-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
}
.nick-opt .dot {
  width: 28px; height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
/* 桌游下拉选项的小封面（拼桌页开桌表单 / 赛后补记表单共用 renderGameOpts）：
   方角矩形和游戏卡片的圆角风格呼应，比 .dot 人像圆形略大方一点，没封面时退回类型色底+首字 */
.nick-opt-cover {
  width: 36px; height: 36px;
  min-width: 36px;
  border-radius: 8px;
  object-fit: cover;
}
.nick-opt-cover.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.nick-opt:hover { background: var(--bg-oat); }
.nick-opt + .nick-opt { border-top: 1px solid var(--bg-oat); }
.nick-opt.selected { background: var(--bg-oat); }
/* 桌游下拉里的分类标题：复用 .ev-type-head/.type-pill（和「本场的桌游」列表同款胶囊+延伸线），
   套用下拉自己的内边距而不是卡片的——避免搬进下拉后跟 18px 的卡片级 margin 挤占本就有限的高度 */
.nick-drop .ev-type-head { margin: 6px 0 2px; padding: 0 14px; }
.nick-drop .ev-type-head:first-child { margin-top: 4px; }
.nick-drop-hint + .ev-type-head { margin-top: 2px; }
.nick-opt-check {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.nick-opt-meta + .nick-opt-check { margin-left: 8px; }
.nick-opt-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.nick-drop.up { top: auto; bottom: calc(100% + 6px); }
.nick-drop-hint {
  padding: 8px 14px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* ---------- 赛后补记：同桌人 chips（信息标签，不是按钮——浅底+描边沿用 .game-pill 的静态标签处理，
   和「记下这局」CTA 的实心暖橙+阴影明确区分开，避免用户分不清哪个是可点提交、哪个是已选的人） ---------- */
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.sl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 6px 5px 14px;
  border-radius: 40px;
  background: var(--bg-cream);
  border: 1.5px solid var(--bg-oat);
  color: var(--text-dark);
}
.sl-chip-x {
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 6px;
  color: var(--text-muted);
  opacity: 0.7;
}
.sl-chip-x:hover { opacity: 1; color: var(--primary-dark); }

/* ---------- 全站导航 ---------- */
.site-nav {
  position: sticky;
  top: 8px;
  z-index: 50;
  display: flex;
  gap: 4px;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--bg-oat);
  border-radius: 40px;
  padding: 6px 8px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.site-nav-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 40px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.site-nav-link:hover { color: var(--text-dark); background: var(--bg-oat); }
.site-nav-link.active {
  background: var(--primary);
  color: var(--text-dark); /* 白字在暮光橙上对比度只有 2:1，炭黑字才达标 */
  box-shadow: var(--shadow-soft);
}

/* ---------- Luma 日历订阅出口 ---------- */
.luma-open {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  text-decoration: none;
}
.luma-open:hover { color: var(--primary); }

/* ---------- 桌游详情页·教学视频入口 ----------
   活在「这是什么桌游」卡片内部，和正文段落/BGG来源脚注共处一卡，
   朴素文字链接（.luma-open）在这里会被大段简介文字盖过去，
   所以给实心暖橙色药丸——用和「必玩」承诺按钮同一套「块级+width:fit-content」
   的孤行写法，保证它永远单独占一行，不会被前面 .section-label 的行内盒子勾住 */
.game-video-cta {
  display: block;
  width: fit-content;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark);
  background: var(--primary);
  border-radius: 40px;
  padding: 8px 18px;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
  transition: all 0.2s ease;
}
.game-video-cta:hover { background: var(--primary-dark); box-shadow: var(--shadow-standard); }

/* ---------- 手机端日历紧凑化 ---------- */
@media (max-width: 520px) {
  .page.wide { padding-left: 8px; padding-right: 8px; }
  .page.wide .card { padding: 16px 8px; }
  .cal-dow-row, .cal-grid { gap: 3px; }
  .cal-dow { font-size: 11px; padding-bottom: 5px; }
  .cal-cell { min-height: 44px; padding: 3px 2px; border-radius: 10px; }
  .cal-cell .dnum { font-size: 10px; padding-left: 1px; }
  .cal-evt {
    font-size: 9px;
    padding: 2px 3px;
    margin-top: 2px;
    border-radius: 6px;
    line-height: 1.2;
  }
  /* 手机上格子里只留事件名，人数/地点看下方清单 */
  .cal-evt .evt-place { display: none; }
  .cal-legend { font-size: 11px; gap: 8px 12px; }
  .cal-nav-title { font-size: 15px; }
  .cal-nav-btn { width: 30px; height: 30px; font-size: 16px; }
}

/* 手机端专属元素（如日历下方的清单视图），桌面隐藏 */
@media (min-width: 600px) {
  .mobile-only { display: none !important; }
}

/* 桌面端稍微放宽 */
@media (min-width: 600px) {
  .page { max-width: 520px; }
  .page.wide { max-width: 640px; }
}

/* ===== 桌面端全站统一（≥900px）=====
   规则：所有页面容器 1080px，页面里所有块（导航/卡片/页脚）统一同宽，
   宽出来的空间靠卡片内部多列消化。手机端（<900px）完全不受影响 */
@media (min-width: 900px) {
  .page, .page.wide { max-width: 1080px; }

  /* 导航四个 tab 平均分散铺满整条 bar（手机端保持居中紧凑） */
  .site-nav { justify-content: space-evenly; }

  /* 桌游库：2 列 */
  .game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 36px; }
  .game-grid .game-card + .game-card { border-top: none; }
  .game-grid .game-card { border-top: 1px solid var(--bg-oat); }

  /* 相册：封面卡 3 列 */
  .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; }

  /* 拼桌列表：每个类型分组卡片（.ev-type-group）内部的桌卡 2 列——
     2026-07-31 起类型分组本身变成独立浅描边卡片（见 style.css 上面 .ev-type-group），
     grid 作用范围从"整张「本场的桌游」外层卡"收窄到"分组卡片内部"，外层卡片本身是普通竖排块级布局 */
  body[data-page="event"] .ev-type-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
  }

  /* 主页：精选照片墙 4 列、热门桌游榜双列（列优先：左列 1-5、右列 6-10） */
  body[data-page="home"] .card:has(.photo-wall) .photo-wall { grid-template-columns: repeat(4, 1fr); }
  .rank-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 40px;
  }

  /* 桌游详情页：封面是图不是格子，宽高双上限 450 等比缩放；
     img 前缀保证权重压过基础规则的 width:100%，否则竖图会被压扁 */
  img.game-hero-cover, .game-hero-cover.fallback {
    width: auto;
    max-width: 450px;
    max-height: 450px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 无封面的色块兜底保持方形 */
  .game-hero-cover.fallback { width: 450px; height: 450px; }

  /* 主页荣誉墙：4 列 × 2 行，格子保持手机版的原始大小感 */
  .award-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .game-grid { grid-template-columns: repeat(3, 1fr); }
  .album-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 拼桌前的 Luma 报名确认弹层 ---------- */
.luma-gate-mask {
  position: fixed;
  inset: 0;
  background: rgba(45, 41, 38, 0.35);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.luma-gate {
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-emphasis);
}
.luma-gate .ev-want-btn {
  display: block;
  text-align: center;
  margin: 16px 0 12px;
  padding: 10px 16px;
}
.luma-gate .luma-open { display: block; text-align: center; }

/* ---------- 拼桌页：等 Apps Script 响应时的全页遮罩 ----------
   开桌/必玩/感兴趣/取消提交后有 ~1.2 秒落盘延迟，这段时间里整页变灰挡住误触，
   中间用 Play/Think/Heal 三色呼吸点代替生硬的系统转圈——显隐都由 app.js 的
   busyStart/busyEnd 控制 .show，本身默认不可见也不挡点击 */
.ev-busy-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* 之前这里带 backdrop-filter: blur(1px) 做毛玻璃，但手机 WebKit（Safari/微信内置，
     iOS 上都是同一套 WKWebView 内核）对"backdrop-filter 祖先 + 里面跑 transform 动画"
     这个组合有已知合成器 bug，点点动画会直接定格——试过 will-change、强制断开重连动画
     都没解决，说明病根就是 backdrop-filter 本身，直接去掉，加深一点背景色补偿视觉上少
     的那层毛玻璃感 */
  background: rgba(45, 41, 38, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ev-busy-mask.show { opacity: 1; pointer-events: auto; }
.ev-busy-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--bg-cream);
  border-radius: 24px;
  padding: 20px 28px;
  box-shadow: var(--shadow-standard);
}
.ev-busy-dots { display: flex; gap: 10px; }
.ev-busy-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  /* 缩放/透明度改由 JS（app.js busyTick，逐帧 requestAnimationFrame 手写）驱动，不再用
     CSS @keyframes——手机 WebKit 上这个 loading 遮罩的原生 CSS 动画反复出现"根本不起播"
     的怪癖，will-change/去掉backdrop-filter/强制重启/双重rAF延迟起播都试过没解决，索性
     绕开整个"CSS animation 引擎会不会被晾着"的问题；这里只留静止兜底外观（JS 没跑起来时
     退化成一直显示的实心点，不会更难看） */
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
}
.ev-busy-dots span.d1 { background: var(--play-lab); }
.ev-busy-dots span.d2 { background: var(--think-lab); }
.ev-busy-dots span.d3 { background: var(--heal-lab); }
.ev-busy-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* ---------- 实验报告个人卡片（report.html）---------- */
/* 卡片按手机竖屏截图设计：全断点保持窄容器，不进桌面 1080px 布局 */
body[data-page="report"] .page { max-width: 480px; }

.report-card {
  background: linear-gradient(160deg, #fffbf5 0%, #FAF4EA 100%);
  border: 2px solid rgba(242, 192, 120, 0.55);
  box-shadow: var(--shadow-standard);
  padding: 30px 26px 24px;
}
.rp-brand {
  text-align: center;
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 6px;
}
.rp-date {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.rp-id {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(195, 141, 109, 0.35);
}
.rp-avatar {
  width: 56px; height: 56px;
  min-width: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.rp-id-txt { min-width: 0; }
.rp-nick { font-size: 22px; font-weight: 900; overflow-wrap: anywhere; line-height: 1.3; }
.rp-visit { font-size: 14px; color: var(--primary-dark); }
.rp-visit b { color: var(--primary); font-weight: 800; }
.rp-sec-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary-dark);
  margin: 16px 0 8px;
}
.rp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-pill {
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid var(--bg-oat);
  border-radius: 40px;
  padding: 5px 12px;
}
.rp-pill.new {
  border-color: rgba(242, 192, 120, 0.85);
  background: rgba(242, 192, 120, 0.18);
}
.rp-pill i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #7A5A1E;
  margin-left: 2px;
}
.rp-note { font-size: 13px; color: var(--text-muted); }
.rp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.rp-stat {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--bg-oat);
  border-radius: 18px;
  text-align: center;
  padding: 12px 4px;
}
.rp-stat .n { font-size: 24px; font-weight: 900; color: var(--primary); line-height: 1.2; }
.rp-stat .n small { font-size: 12px; font-weight: 700; margin-left: 1px; }
.rp-stat .l { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rp-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed rgba(195, 141, 109, 0.35);
}
.rp-foot .slogan { font-size: 15px; font-weight: 800; letter-spacing: 2px; }
.rp-foot .slogan-en { font-size: 11px; color: var(--text-muted); letter-spacing: 1px; margin-top: 3px; }
.rp-links { text-align: center; font-size: 12px; margin-top: 14px; }
.rp-links a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }

/* 个人页时间线里的报告入口 */
.tl-report { margin-top: 6px; font-size: 13px; }
.tl-report a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }

/* ---------- 实验报告：保存到相册 ---------- */
.rp-save-btn {
  display: block;
  max-width: 260px;
  margin: 18px auto 0;
  text-align: center;
  background: linear-gradient(135deg, var(--play-lab), var(--primary));
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 800;
  border-radius: 40px;
  padding: 12px 24px;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: all 0.2s ease;
}
.rp-save-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-standard); }
.rp-save-mask {
  position: fixed;
  inset: 0;
  background: rgba(45, 41, 38, 0.62);
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 20px;
  overflow-y: auto;
}
.rp-save-box { max-width: 380px; width: 100%; text-align: center; margin: auto 0; }
.rp-save-img {
  display: block;
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow-emphasis);
}
.rp-save-hint { color: #fffbf5; font-size: 14px; font-weight: 700; margin-top: 14px; }
.rp-save-dl {
  display: inline-block;
  color: rgba(255, 251, 245, 0.85);
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
  text-decoration: none;
}
.rp-save-close {
  /* 现在是真正的 <button>，去掉浏览器原生按钮边框/字体（同 .lb-btn 的理由） */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.92);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

/* ---------- 主页「最新实验报告」入口 ---------- */
.report-nudge {
  display: block;
  margin: 0 auto 20px;
  max-width: 480px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  background: linear-gradient(135deg, #FDF3EC, var(--bg-oat));
  border: 1.5px solid var(--primary);
  border-radius: 40px;
  padding: 10px 20px;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: all 0.2s ease;
}
.report-nudge:hover { transform: translateY(-2px); box-shadow: var(--shadow-standard); }

/* 报告页顶部「上一层」返回档案 + 底部换昵称留白 */
.rp-up { display: block; margin: 0 0 14px; }
.rp-links { margin-top: 18px; }

/* 保存预览层的长按引导：手指 + 扩散光环，脉冲几秒后自动淡出 */
.rp-save-box { position: relative; }
.rp-press-guide {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.92);
  box-shadow: var(--shadow-emphasis);
  font-size: 30px;
  line-height: 64px;
  text-align: center;
  pointer-events: none;
  animation: rp-press 1.3s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.rp-press-guide::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2.5px solid rgba(232, 168, 124, 0.9);
  animation: rp-press-ring 1.3s ease-out infinite;
}
.rp-press-guide.gone { opacity: 0; }
@keyframes rp-press {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(0.82); }
  60% { transform: scale(0.82); }
}
@keyframes rp-press-ring {
  0%, 45% { transform: scale(1); opacity: 0; }
  55% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- 实验报告：本场游戏封面网格 ---------- */
.rp-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 14px 10px;
}
.rp-game { text-align: center; }
.rp-game-cwrap { position: relative; display: inline-block; }
.rp-game-cover {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.rp-game.new .rp-game-cover {
  box-shadow: 0 0 0 2px rgba(242, 192, 120, 0.9), var(--shadow-card);
}
.rp-game-cover.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-dark);
}
.rp-game-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fffbf5;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.rp-game-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.rp-game-newtag { font-size: 10px; font-weight: 700; color: #7A5A1E; margin-top: 1px; }

/* 报告卡：场次限定勋章 + 玩法偏好标签——两者视觉完全同款（同一张实心渐变胶囊），
   玩法偏好是"这场整体调性"、场次限定是"这场发生了什么事"，语义不同但不再做视觉区分（产品决策） */
.rp-medal, .rp-pref {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #87552C;
  background: linear-gradient(90deg, rgba(242, 192, 120, 0.30), rgba(232, 168, 124, 0.20));
  border: 1.5px solid rgba(232, 168, 124, 0.85);
  border-radius: 40px;
  padding: 5px 14px;
  margin: 10px 0 2px;
}
.rp-medal-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-left: 8px;
  letter-spacing: 1px;
}

/* 勋章/偏好含义气泡：显隐完全由 app.js 切换 .tip-open 控制（不叠加 CSS :hover，避免切换目标时新旧气泡重叠），样式同成长曲线气泡。
   同一张卡上不管是场次限定勋章还是玩法偏好标签，都共用这一套规则和 app.js 里同一个 closeAllTips，保证任意时刻只有一个气泡展开。
   touch-action: manipulation 去掉移动端最多 300ms 的双击缩放判定延迟（微信内置浏览器上尤其明显）；
   will-change 让气泡单独起一个合成层，避免每次显隐都触发父级 .card 的 backdrop-filter 毛玻璃重新合成（低端机卡顿的主因） */
.rp-medal, .rp-pref { position: relative; cursor: pointer; touch-action: manipulation; }
.rp-medal.tip-open::after, .rp-pref.tip-open::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-dark);
  color: var(--bg-cream);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  padding: 6px 12px;
  border-radius: 10px;
  white-space: normal;
  width: max-content;
  max-width: 230px;
  text-align: center;
  box-shadow: var(--shadow-standard);
  z-index: 30;
  pointer-events: none;
  will-change: transform;
}
.rp-medal.tip-open::before, .rp-pref.tip-open::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text-dark);
  z-index: 10;
  pointer-events: none;
}

/* 多枚勋章的容器：流式排布 */
.rp-medals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 2px;
}
.rp-medals .rp-medal, .rp-medals .rp-pref { margin: 0; }

/* 补记页：展开后先看到这场已记录的「你玩过什么 + 和谁」 */
.catchup-played .cp-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--primary-dark);
  margin: 4px 0 8px;
}
.catchup-played .cp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-cream);
  border: 1.5px solid var(--bg-oat);
  border-radius: 14px;
  margin-bottom: 6px;
}
.catchup-played .cp-cover {
  display: block;
  width: 44px;
  height: 44px;
  min-width: 44px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.catchup-played .cp-cover.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark);
}
.catchup-played .cp-info { min-width: 0; }
.catchup-played .cp-name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.catchup-played .cp-mates { font-size: 12px; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.catchup-played .cp-row.cp-empty { font-size: 13px; color: var(--text-muted); }