/* ========== Pages hide ========== */
.page { display: none; }
.page.active { display: block; }

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ========== Empty State ========== */
.empty { padding: 40px 20px; text-align: center; color: var(--gray-400); font-size: 14px; }

/* ========== Room Pagination ========== */
.room-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 0 4px; flex-wrap: wrap; }
.rp-info { font-size: 13px; color: var(--gray-500); }
.rp-info b { color: var(--gray-700); }
.rp-btns { display: flex; align-items: center; gap: 4px; }
.rp-btn { padding: 6px 14px; border: 1px solid var(--gray-200); border-radius: 6px; background: #fff; color: var(--gray-600); font-size: 13px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.rp-btn:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.rp-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rp-nums { display: flex; gap: 2px; margin: 0 4px; }
.rp-num { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); border-radius: 6px; background: #fff; color: var(--gray-600); font-size: 13px; cursor: pointer; transition: all 0.15s; }
.rp-num:hover { border-color: var(--primary); color: var(--primary); }
.rp-active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; font-weight: 600; box-shadow: 0 2px 8px rgba(108,63,255,0.3); }

/* ========== 房间详情弹窗样式 ========== */
.dr-log-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:16px;background:linear-gradient(135deg,#6c3fff15,#9b59b615);border-radius:12px;margin-bottom:20px}
.dr-log-title{font-size:20px;font-weight:bold;color:#6c3fff;letter-spacing:2px}
.dr-log-subtitle{color:#666;font-size:14px;margin-top:4px}
.dr-log-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eee;border-radius:10px;margin-bottom:10px;padding:12px 16px}
.dr-log-item:hover{border-color:#6c3fff}
.dr-log-index{flex-shrink:0;width:70px;background:linear-gradient(135deg,#6c3fff,#9b59b6);color:#fff;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px}
.dr-log-index .times{font-size:14px;font-weight:bold}
.dr-log-index .time{font-size:10px;opacity:0.8;margin-top:2px}
.dr-log-content{flex:1;display:flex;flex-wrap:nowrap;gap:8px;overflow:hidden}
.dr-log-card{min-width:70px;max-width:90px;background:#f5f3ff;border:1px solid #e0ddf5;border-radius:6px;padding:8px 6px;text-align:center;flex-shrink:0}
.dr-log-card .cat{font-size:9px;color:#6c3fff;font-weight:600;margin-bottom:3px}
.dr-log-card .name{font-size:10px;font-weight:bold;color:#333;word-break:break-all}
@media(max-width:768px){
  .dr-log-item{flex-direction:column;gap:8px}
  .dr-log-index{width:100%;flex-direction:row;justify-content:space-between;padding:8px 12px}
}

#siCropModal .cropper-view-box,#siCropModal .cropper-face{border-radius:0}
#siCropModal .modal-body{min-height:200px}
#siCropModal{z-index:200 !important}
#cropContainer{position:relative}
#cropContainer img{max-height:380px}

#siGridPicker .gp-cell{width:32px;height:32px;border:2px solid #e0ddd8;border-radius:4px;background:#faf8f5;transition:all 0.12s}
#siGridPicker .gp-cell.hover{background:#f0e6d0;border-color:#c9a96e}
#siGridPicker .gp-cell.selected{background:#e74c3c;border-color:#c0392b}

/* ========== Bingo ========== */
.bt-item{border:2px solid #e0e0e0;border-radius:8px;padding:8px;cursor:pointer;text-align:center;transition:all 0.15s}
.bt-item:hover{border-color:#e74c3c}
.bt-item.selected{border-color:#e74c3c;background:#fef2f2}
.bt-item img{width:50px;height:50px;object-fit:cover;border-radius:4px;margin-bottom:4px}
.bt-item-name{font-size:11px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ========== 通用物品卡片样式（各游戏统一使用） ========== */
/* 基础物品卡片 */
.game-item-card {
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.game-item-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.game-item-card .item-image {
  width: 70px;
  height: 70px;
  margin: 0 auto 10px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-item-card .item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-item-card .item-image .placeholder {
  font-size: 24px;
  opacity: 0.5;
}
.game-item-card .item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-item-card .item-meta {
  font-size: 11px;
  color: var(--gray-500);
}

/* 听天由命物品卡片 */
.game-item-card.destiny:hover {
  border-color: var(--destiny-primary);
  background: var(--destiny-light);
}
.game-item-card.destiny .item-name {
  color: var(--destiny-primary);
}

/* 转盘奖品卡片 */
.game-item-card.wheel:hover {
  border-color: var(--wheel-primary);
  background: var(--wheel-light);
}
.game-item-card.wheel .item-name {
  color: var(--wheel-primary);
}

/* Bingo 物品卡片 */
.game-item-card.bingo:hover {
  border-color: var(--bingo-primary);
  background: var(--bingo-light);
}
.game-item-card.bingo .item-name {
  color: var(--bingo-primary);
}

/* 扫雷大作战卡片 */
.game-item-card.flipcard:hover {
  border-color: var(--flipcard-primary);
  background: var(--flipcard-light);
}
.game-item-card.flipcard .item-name {
  color: var(--flipcard-primary);
}

/* 走迷宫物品卡片 */
.game-item-card.maze:hover {
  border-color: var(--maze-primary);
  background: var(--maze-light);
}
.game-item-card.maze .item-name {
  color: var(--maze-primary);
}

/* 物品卡片状态 */
.game-item-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.game-item-card.disabled:hover {
  transform: none;
  box-shadow: none;
}
.game-item-card.enabled {
  border-color: var(--green);
}

/* 物品卡片操作按钮 */
.game-item-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.2s;
}
.game-item-card:hover .game-item-actions {
  opacity: 1;
}
.game-item-actions .btn {
  padding: 4px 10px;
  font-size: 11px;
}

/* ========== 物品质量标签（扫雷大作战） ========== */
.item-quality {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.item-quality.common { background: #f3f4f5; color: #6b7280; }
.item-quality.uncommon { background: #d1fae5; color: #059669; }
.item-quality.rare { background: #dbeafe; color: #1e40af; }
.item-quality.epic { background: #ede9fe; color: #7c3aed; }
.item.quality.legendary { background: #fef3c7; color: #d97706; }
.item-quality.red { background: #fee2e2; color: #991b1b; }
.item-quality.gold { background: #fef3c7; color: #d97706; }
.item-quality.rainbow {
  background: linear-gradient(135deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6);
  color: #fff;
}

/* ========== 响应式物品网格 ========== */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.item-grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.item-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

/* ========== 游戏卡片增强（仪表盘） ========== */
.game-card {
  overflow: hidden;
}
.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gray-200);
  transition: background 0.2s;
}
.game-card:hover::before {
  background: var(--primary);
}
.game-card.destiny:hover::before { background: var(--destiny-primary); }
.game-card.wheel:hover::before { background: var(--wheel-primary); }
.game-card.bingo:hover::before { background: var(--bingo-primary); }
.game-card.maze:hover::before { background: var(--maze-primary); }
.game-card.flipcard:hover::before { background: var(--flipcard-primary); }
.game-card.guess:hover::before { background: var(--guess-primary); }

/* ========== 快速开房弹窗统一样式 ========== */
.open-room-form .form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.open-room-form .form-group label .icon {
  font-size: 14px;
}

/* ========== 加载更多/空状态 ========== */
.load-more {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  color: var(--gray-600);
}
.load-more:hover {
  background: var(--gray-50);
  border-color: var(--primary);
  color: var(--primary);
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--gray-400);
}
.empty-state .icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.6;
}
.empty-state .text {
  font-size: 14px;
  margin-bottom: 8px;
}
.empty-state .subtext {
  font-size: 12px;
  color: var(--gray-500);
}