/*
  模块说明：大厅页 + 房间等待页 + 个人中心页样式（lobby.css）。
  - 大厅：顶部玩家信息条、常驻合规提示、底注档位切换、档位 × 人数模式卡片网格、私人房创建/加入面板。
  - 房间等待：椭圆座位环、准备按钮、人数不足提示。
  - 个人中心：欢乐豆/场次/胜负统计、历史对局与欢乐豆流水两个 Tab 列表。
  依赖 base.css 的 CSS 变量；无任何外链资源。
*/

/* ============ 1. 大厅顶部信息条 ============ */
.lobby-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(135deg, rgba(20, 106, 75, 0.85), rgba(6, 40, 28, 0.92));
  flex-wrap: wrap;
}
.lobby-hero__hello { font-size: 18px; font-weight: 800; color: var(--c-gold-200); }
.lobby-hero__sub { font-size: 12.5px; color: var(--c-text-dim); margin-top: 3px; }
.lobby-hero__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lobby-hero__beans {
  display: flex; align-items: baseline; gap: 5px;
  padding: 6px 14px; border-radius: var(--r-md);
  border: 1px solid var(--c-gold-600); background: rgba(0, 0, 0, 0.3);
}
.lobby-hero__beans-num { font-size: 22px; font-weight: 900; color: var(--c-gold-400); letter-spacing: 0.5px; }
.lobby-hero__beans-unit { font-size: 12px; color: var(--c-text-dim); }
.lobby-hero__quick { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============ 2. 档位工具条 ============ */
.lobby-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.lobby-toolbar__label { font-size: 13px; color: var(--c-text-dim); }

/* ============ 3. 档位分区 ============ */
.tier-section { margin-bottom: 18px; }
.tier-section__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-md) var(--r-md) 0 0;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.24), rgba(212, 175, 55, 0.04));
  border: 1px solid var(--c-line); border-bottom: 0;
}
.tier-section__name { font-weight: 800; color: var(--c-gold-200); font-size: 15px; }
.tier-section__blinds { font-size: 12.5px; color: var(--c-text-dim); }
.tier-section__range { font-size: 12px; color: var(--c-gold-400); }

.mode-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  padding: 12px; border: 1px solid var(--c-line); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: rgba(9, 46, 33, 0.6);
}

.mode-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.22));
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s, box-shadow 0.15s;
}
.mode-card:hover { transform: translateY(-2px); border-color: var(--c-gold-500); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.mode-card__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mode-card__seats { font-size: 17px; font-weight: 900; color: var(--c-white); }
.mode-card__seats small { font-size: 11px; font-weight: 500; color: var(--c-text-dim); margin-left: 3px; }
.mode-card__blinds { font-size: 12.5px; color: var(--c-gold-400); }
.mode-card__meta { font-size: 12px; color: var(--c-text-dim); display: flex; justify-content: space-between; gap: 6px; }
.mode-card__bottombar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mode-card__code { font-size: 11.5px; color: var(--c-text-dim); letter-spacing: 1px; }
/* 空位进度：用内联 width 控制，颜色区分"可加入"与"将满" */
.seat-bar { height: 6px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.seat-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-green-300), var(--c-gold-400)); transition: width 0.25s; }
.mode-card.is-full { opacity: 0.62; }
.mode-card.is-locked { opacity: 0.55; cursor: not-allowed; }
.mode-card.is-locked:hover { transform: none; border-color: var(--c-line-soft); box-shadow: none; }
.mode-card__lock { font-size: 11.5px; color: #ffb4b4; }
.lobby-foot { text-align: center; font-size: 12px; color: var(--c-text-dim); padding: 6px 0 10px; }

/* ============ 4. 私人房：创建 / 加入面板（弹窗内复用） ============ */
.panel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--c-line-soft); }
.panel-row:last-child { border-bottom: 0; }
.panel-row__label { font-size: 13px; color: var(--c-text-dim); }
.panel-row__value { font-weight: 700; color: var(--c-gold-200); }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pick-item {
  padding: 10px 6px; text-align: center; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--c-line-soft); background: rgba(0, 0, 0, 0.24);
  color: var(--c-text); font-weight: 700;
}
.pick-item small { display: block; font-size: 11px; font-weight: 400; color: var(--c-text-dim); margin-top: 3px; }
.pick-item.is-active { border-color: var(--c-gold-500); background: var(--c-gold-grad); color: var(--c-text-dark); }
.pick-item.is-active small { color: rgba(23, 53, 42, 0.75); }

.free-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(87, 199, 155, 0.16); border: 1px solid var(--c-green-300);
  color: var(--c-green-300); font-weight: 700; font-size: 13px;
}

.invite-code {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; border-radius: var(--r-md);
  border: 2px dashed var(--c-gold-500); background: rgba(212, 175, 55, 0.1);
}
.invite-code__num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 30px; font-weight: 900; letter-spacing: 9px; color: var(--c-gold-400);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}
.invite-input {
  text-align: center; letter-spacing: 8px; font-size: 22px; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============ 5. 房间等待页 ============ */
.room-root { display: flex; flex-direction: column; gap: 12px; }
.room-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--c-panel); border: 1px solid var(--c-line);
}
.room-top__title { font-size: 16px; font-weight: 800; color: var(--c-gold-200); }
.room-top__sub { font-size: 12.5px; color: var(--c-text-dim); margin-top: 2px; }
.room-top__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.seat-ring {
  position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: 50% / 42%;
  border: 3px solid var(--c-gold-600);
  background:
    radial-gradient(closest-side, rgba(28, 138, 98, 0.55), rgba(6, 40, 28, 0.95)),
    linear-gradient(180deg, var(--c-green-700), var(--c-green-900));
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55), var(--sh-2);
}
.seat-ring__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; color: var(--c-gold-200); font-weight: 800;
}
.seat-ring__center small { display: block; font-size: 12px; font-weight: 400; color: var(--c-text-dim); margin-top: 4px; }

.seat {
  position: absolute; width: 92px; margin-left: -46px; margin-top: -34px;
  text-align: center; font-size: 12px;
}
.seat__avatar {
  width: 52px; height: 52px; margin: 0 auto;
  border-radius: 50%; border: 2px solid var(--c-line);
  background: rgba(0, 0, 0, 0.4);
  display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--c-gold-200);
  overflow: hidden;
}
.seat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.seat__name {
  margin-top: 3px; font-weight: 700; color: var(--c-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat__meta { font-size: 11px; color: var(--c-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat.is-empty .seat__avatar { border-style: dashed; color: var(--c-text-dim); }
.seat.is-ready .seat__avatar { border-color: var(--c-green-300); box-shadow: 0 0 0 3px rgba(87, 199, 155, 0.22); }
.seat.is-me .seat__name { color: var(--c-gold-400); }
.seat__tag { display: inline-block; margin-top: 2px; font-size: 10.5px; padding: 0 6px; border-radius: var(--r-pill); }
.seat__tag--ready { background: rgba(87, 199, 155, 0.2); color: var(--c-green-300); border: 1px solid var(--c-green-300); }
.seat__tag--wait { background: rgba(255, 255, 255, 0.08); color: var(--c-text-dim); border: 1px solid var(--c-line-soft); }
.seat__tag--off { background: rgba(217, 74, 74, 0.16); color: #ffb4b4; border: 1px solid rgba(217, 74, 74, 0.5); }
.seat__btn { margin-top: 4px; }

.room-hint {
  padding: 10px 12px; border-radius: var(--r-md); font-size: 13.5px; text-align: center;
  border: 1px dashed var(--c-gold-600); background: rgba(212, 175, 55, 0.1); color: var(--c-gold-200);
}
.room-hint--ok { border-color: var(--c-green-300); background: rgba(87, 199, 155, 0.12); color: var(--c-green-300); }
.room-bottom { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ============ 6. 个人中心 ============ */
.profile-root { display: flex; flex-direction: column; gap: 12px; }
.profile-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--c-gold-500);
  background: rgba(0, 0, 0, 0.35); display: grid; place-items: center;
  font-size: 26px; font-weight: 800; color: var(--c-gold-200); overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-head__name { font-size: 18px; font-weight: 800; color: var(--c-white); }
.profile-head__sub { font-size: 12.5px; color: var(--c-text-dim); margin-top: 3px; }

.stat-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.stat {
  padding: 12px; border-radius: var(--r-md); text-align: center;
  border: 1px solid var(--c-line-soft); background: rgba(0, 0, 0, 0.24);
}
.stat__num { font-size: 20px; font-weight: 900; color: var(--c-gold-400); }
.stat__num--win { color: var(--c-green-300); }
.stat__num--lose { color: #ff9d9d; }
.stat__label { font-size: 12px; color: var(--c-text-dim); margin-top: 3px; }

.list { display: flex; flex-direction: column; }
.list__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 4px; border-bottom: 1px dashed var(--c-line-soft); font-size: 13px;
}
.list__item:last-child { border-bottom: 0; }
.list__main { min-width: 0; }
.list__title { font-weight: 700; color: var(--c-white); }
.list__sub { font-size: 11.5px; color: var(--c-text-dim); margin-top: 2px; }
.list__right { text-align: right; white-space: nowrap; }
.amount-pos { color: var(--c-green-300); font-weight: 800; }
.amount-neg { color: #ff9d9d; font-weight: 800; }
.amount-zero { color: var(--c-text-dim); font-weight: 700; }

.pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0 4px; font-size: 13px; color: var(--c-text-dim); }

/* ============ 7. 窄屏自适应 ============ */
@media (max-width: 560px) {
  .mode-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 10px; gap: 8px; }
  .lobby-hero { padding: 12px; }
  .lobby-hero__beans-num { font-size: 18px; }
  .lobby-hero__quick { width: 100%; }
  .lobby-hero__quick .btn { flex: 1 1 44%; }
  .seat { width: 76px; margin-left: -38px; margin-top: -30px; }
  .seat__avatar { width: 42px; height: 42px; font-size: 16px; }
  .seat-ring { aspect-ratio: 1 / 1; }
  .invite-code__num { font-size: 24px; letter-spacing: 6px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}