/* =========================
   容器
========================= */
.roomlist-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* =========================
   排序
========================= */
.roomlist-sort {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 4px;

  background: rgba(10, 12, 18, 0.75);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 30px rgba(0, 0, 0, 0.45);
}

.roomlist-sort button {
  position: relative;
  z-index: 2;

  min-width: 72px;
  padding: 8px 14px;

  border-radius: 999px;
  border: none;
  background: transparent;

  font-size: 13px;
  font-weight: 500;

  color: #8b90a0; /* 冷静科技灰 */

  cursor: pointer;
  transition: color 0.25s ease;
}

.roomlist-sort button.active {
  color: #f5f7fa;

  background: linear-gradient(
    135deg,
    rgba(131, 96, 195, 0.45),
    rgba(46, 191, 145, 0.45)
  );
}

/* =========================
   卡片
========================= */
.roomlist-card {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(18, 20, 30, 0.95),
    rgba(10, 12, 18, 0.98)
  );
  border-radius: 16px;
  padding: 18px 16px 16px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
}

.roomlist-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(131, 96, 195, 0.25);
}

/* =========================
   Ribbon
========================= */
.room-ribbon {
  position: absolute;
  top: -12px;
  left: 16px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #8360c3, #2ebf91);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(131, 96, 195, 0.15);

  z-index: 2; /* 文字在上 */
}

/* 折角三角 */
.room-ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%; /* 放在 ribbon 底部 */
  margin-top: 0px; /* 往下微调 */
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-top: 12px solid #c84444;
}

/* =========================
   Header
========================= */
.roomlist-header {
  display: flex;
  justify-content: flex-end;
}

.roomlist-header-icon {
  width: 28px;
  margin-top: -3px;
  filter: drop-shadow(0 0 6px rgba(46, 191, 145, 0.6));
}

/* =========================
   信息区
========================= */
.roomlist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px 12px;
  gap: 8px 12px;
  margin-top: 14px;
  font-size: 13px;
}

.label {
  color: rgba(255, 255, 255, 0.45);
}

.value {
  color: #ffffff;
  font-weight: 500;
}

.value.highlight {
  color: #2ebf91;
}

/* =========================
   进度条
========================= */
.progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 14px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    #f9d71c,
    /* 明亮黄色 */ #f5b700,
    /* 金色 */ #d49e00 /* 深金色 */
  );
  box-shadow: 0 0 10px rgba(249, 215, 28, 0.6); /* 光晕效果 */
  transition: width 0.5s ease;
}

/* =========================
   链接
========================= */
.roomlist-link {
  text-decoration: none;
  color: inherit;
}

/* =========================
   分页 & 状态
========================= */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pager button {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 12, 18, 0.8);
  color: #fff;
  cursor: pointer;
}

.pager button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.roomlist-loading,
.roomlist-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 16px;
}

/* ======================
   规则箭头按钮
====================== */
.rule-trigger {
  position: fixed;
  right: -13px;
  top: 150px;
  z-index: 999;

  height: 35px;
  padding: 0 14px;
  min-width: 92px;

  background: rgba(5, 7, 12, 0.35) 100%;
  border: 1px solid rgba(226, 226, 226, 0.12);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);

  border-radius: 15px;

  display: flex;
  align-items: center;
  gap: 6px;

  color: #fff;
  font-size: 14px;
  cursor: pointer;

  /* 外框收缩节奏 → 延长到 2 秒 */
  transition:
    min-width 2s cubic-bezier(0.4, 0, 0.2, 1),
    padding 2s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 2s ease,
    box-shadow 0.3s ease;
}

/* 收起状态 */
.rule-trigger.collapsed {
  color: #ffffff;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 10px 4px 4px 10px;
}

/* 收起状态 */
.rule-trigger.collapsed {
  color: #fff;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 10px 4px 4px 10px;
}

/* ======================
       箭头
  ====================== */
.rule-trigger .arrow {
  font-size: 16px;
  flex-shrink: 0;

  /* 箭头过渡 → 可加轻微旋转 + 平滑 */
  transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 收起时箭头轻微吸附 */
.rule-trigger.collapsed .arrow {
  transform: translateX(2px);
}

/* ======================
       规则文字丝滑消失
  ====================== */
.rule-trigger .text {
  white-space: nowrap;

  opacity: 1;
  transform: translateX(0);

  /* 文字先走，框后收 → 延长到约 2 秒 */
  transition:
    transform 1.8s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 1.6s ease 0.2s; /* 延迟 0.2s，文字先淡出 */
}

/* 收起时 */
.rule-trigger.collapsed .text {
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
}

/* ======================
     弹窗遮罩
  ====================== */
.rule-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* ======================
     规则弹窗
  ====================== */
.rule-modal {
  width: 90%;
  max-width: 360px;

  max-height: 80vh; /* 核心：限制整个弹窗高度 */
  background: #0a0a0a;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;

  display: flex; /* 关键 */
  flex-direction: column; /* 关键 */

  overflow: hidden; /* 防止整体滚动 */
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* header */
.rule-header {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* content */
.rule-content {
  flex: 1 1; /* 占据剩余空间 */
  padding: 16px;

  font-size: 14px;
  line-height: 1.7;
  color: #ccc;

  overflow-y: auto; /* 内容滚动 */
  box-sizing: border-box;
}

/* footer */
.rule-footer {
  padding: 14px;
  text-align: center;
}

.rule-footer button {
  width: 100%;
  height: 40px;
  background: linear-gradient(135deg, #8360c3, #2ebf91);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/* =========================
   通用页面容器
========================= */
.page-container {
  width: 100%;
  max-width: 1200px; /* 根据页面需求限制最大宽度 */
  margin: 10px auto;
  padding: 0 0px; /* 左右间隙 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
}

/* =========================
     高级顶部 Tab
  ========================= */
.tab-wrapper {
  margin-top: 40px;
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
}

.tab-group {
  position: relative;
  display: flex;

  /* 深色半透明面板 */
  background: rgba(10, 12, 18, 0.75);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);

  border-radius: 999px;
  margin-top: 40px;
  padding: 4px;

  /* 极弱边框，融入背景 */
  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 30px rgba(0, 0, 0, 0.45);
}

.tab-item {
  position: relative;
  z-index: 2;
  min-width: 140px;
  text-align: center;
  padding: 10px 0;

  font-size: 14px;
  font-weight: 500;

  /* 冷静的科技灰 */
  color: #8b90a0;

  cursor: pointer;
  transition: color 0.25s ease;
}

.tab-item.active {
  color: #f5f7fa;
}

/* 滑动指示块 */
.tab-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 140px;
  height: calc(100% - 8px);

  /* 能量面板 */
  background: linear-gradient(
    135deg,
    rgba(131, 96, 195, 0.45),
    rgba(46, 191, 145, 0.45)
  );

  border-radius: 999px;

  transition: transform 0.25s ease;
}

.tab-indicator.right {
  transform: translateX(140px);
}

/* =========================
     卡片样式（通用） 
  ========================= */
.card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin: 0 auto 16px;
  box-sizing: border-box;
}

.card h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #f8fafc;
}

/* =========================
     表单控件
  ========================= */
.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.form-item label {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 6px;
}

.form-item input {
  height: 38px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 0 12px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-item input:focus {
  outline: none;
  border-color: #3b82f6;
}

.create-room-card .form-item input {
  background: rgb(17, 18, 25);
  color: #f1f5f9;
  border: 1px solid #2a2f3f;
}

.create-room-card .form-item input::placeholder {
  color: #8b90a0;
}

.create-room-card .form-item input:focus {
  background: #202536;
  border-color: rgba(46, 191, 145, 0.9);
}

/* 代币切换 */
.label-token-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.create-room-feedback {
  margin-top: 6px;
  text-align: center;
}

.error-text {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 6px;
}

.tx-hint {
  color: #888;
  font-size: 12px;
  margin-top: 4px;
}

/* =========================
     按钮
  ========================= */
.btn {
  width: 100%;
  height: 44px;
  font-size: 15px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(252, 252, 252);
  background: linear-gradient(135deg, #8360c3, #2ebf91);
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}

.btn-outline {
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

/* =========================
     订单 & 历史记录
  ========================= */
.order-block {
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-block h3 {
  font-size: 15px;
  margin-top: 16px;
  color: #ffffff;
}

.order-item {
  background-color: rgba(52, 152, 219, 0.12);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(11, 35, 57, 0.08);

  padding: 16px;

  font-size: 13px;
  color: #fefefe;

  display: flex;
  flex-direction: column;
  gap: 6px;

  transition: all 0.2s ease;
}

.cancel-btn {
  margin-top: 10px;
  align-self: flex-end;
  background: #ef4444;
  border: none;
  color: white;
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.cancel-btn--disabled {
  background: #1f2937; /* 深灰 */
  color: #dedede; /* 灰字 */
  border: 1px dashed #bdbcbc;
  cursor: not-allowed;
  opacity: 0.8;
}

.cancel-btn--disabled:hover {
  background: #1f2937;
}

/* =========================
   通用页面容器
========================= */
.page-container {
  width: 100%;
  max-width: 1200px;
  margin: 10px auto;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
}

/* =========================
   房间详情
========================= */
.room-page-card {
  width: 100%;
  max-width: 520px;
  margin: 80px auto 40px;
  background: linear-gradient(
    180deg,
    rgba(18, 20, 30, 0.35),
    rgba(10, 12, 18, 0.38)
  );
  border-radius: 16px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 24px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .room-page-card {
    margin: 72px auto 24px;
    max-width: calc(100% - 32px);
    padding: 20px;
  }
}

/* =========================
   房间 Meta 信息（关键）
========================= */
.room-meta {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px 12px;
  gap: 8px 12px;
  font-size: 14px;
  color: #ffffff;
}

/* 创建者：始终独占一行 */
.meta-owner {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.4;
  color: #334155;
  word-break: break-all;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e5e7eb;
  margin-bottom: 6px;
}

/* =========================
   手机端重排（彻底解决溢出）
========================= */
/* @media (max-width: 640px) {
  .room-meta {
    grid-template-columns: 88px 1fr;
    row-gap: 10px;
  }

  .room-meta > div {
    display: contents;
  }

  .room-meta > div::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
  }
} */

/* =========================
   其余保持原样
========================= */
.players {
  margin-top: 16px;
}

.players-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.player-item {
  background: #6d7471;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: #f9d71c;
}

.action-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-direction: column;
}

.winners-list {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.winner-item {
  background: linear-gradient(90deg, #fff7ed, #ffedd5);
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  color: #92400e;
}

.winner-me {
  border: 1px solid #10b981;
}

.muted {
  color: #94a3b8;
}

/* 返回按钮 */
.back-btn {
  /* position: fixed; */
  top: 80px;
  left: 16px;
  z-index: 99999;
  padding: 8px 14px;
  font-size: 16px;
  background: linear-gradient(135deg, #8360c3, #2ebf91);
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: all 0.2s ease;
  margin-bottom: 20px;
}

.room-title {
  margin: 0 0 16px 0;
  font-size: 20px;
}
h2.room-title {
  color: #2ebf91;
}
h3 {
  color: #2ebf91;
}
.result {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* =========================
     加载、空状态
  ========================= */
.roomlist-loading,
.roomlist-empty {
  padding: 16px;
  text-align: center;
  color: #666;
  font-size: 15px;
}

.roomlist-link {
  text-decoration: none;
  color: inherit; /* 非常重要 */
}

.roomlist-link:hover {
  text-decoration: none;
}

.create-room-action {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 32px; /* 和下方区域的间距 */
}

.btn-create {
  width: 20%;
  height: 44px;
  border-radius: 12px;
  border: none;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;

  cursor: pointer;
  color: #ffffff;

  background: linear-gradient(135deg, #8360c3, #2ebf91);

  transition: all 0.1s ease;
}

/* disabled 通用态 */
.btn-create:disabled,
.btn-create.loading {
  cursor: not-allowed;
  opacity: 0.6;

  background: linear-gradient(135deg, #14532d, #166534);

  box-shadow: none;
  transform: none;
}

/* 已确认 */
.btn-create.success {
  background: linear-gradient(135deg, #22c55e, #86efac);

  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.6);
}

/* 失败 */
.btn-create.error {
  background: linear-gradient(135deg, #7f1d1d, #dc2626);

  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.4);
}

.share-btn {
  font-size: 13px;
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
  cursor: pointer;
}

.toast {
  position: fixed;
  top: 20px; /* 右上角 */
  right: 24px;

  width: 260px;
  padding: 14px 16px;
  background: #1f1f1f;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 14px;
  z-index: 9999;

  /* 初始状态（隐藏） */
  opacity: 0;
  transform: translateX(120%);
  pointer-events: none;

  transition:
    opacity 0.55s ease-out,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

@media (max-width: 480px) {
  .toast {
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* =========================
   房间 Ribbon（丝带标签）
========================= */
.room-ribbon {
  position: absolute;
  top: 12px;
  left: -8px;

  padding: 6px 18px 6px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;

  /* 渐变色，让丝带更高级 */
  background: linear-gradient(135deg, #3498db, #8b5cf6);

  border-radius: 4px;
  z-index: 2;
}

/* 左下角折角 */
.room-ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;

  width: 0;
  height: 0;
  border-top: 8px solid #5b2c6f; /* 渐深色 */
  border-left: 8px solid transparent;
}

/* =========================
   房间背景色  上边线
========================= */
.roomlist-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 14px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
}