/* 引入 Tailwind 基础样式 */
@import url('https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css');

/* 自定义颜色变量 */
:root {
  --color-primary: #1e3a8a;
  --color-secondary: #475569;
  --color-available: #10b981;
  --color-sold: #ef4444;
  --color-neutral: #f3f4f6;
}

/* 自定义颜色类 */
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.ring-primary { --tw-ring-color: var(--color-primary) !important; }
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary) !important; }
.focus\:border-primary:focus { border-color: var(--color-primary) !important; }

.bg-available { background-color: var(--color-available) !important; }
.text-available { color: var(--color-available) !important; }
.border-available { border-color: var(--color-available) !important; }

.bg-sold { background-color: var(--color-sold) !important; }
.text-sold { color: var(--color-sold) !important; }
.border-sold { border-color: var(--color-sold) !important; }

.bg-secondary { background-color: var(--color-secondary) !important; }
.text-secondary { color: var(--color-secondary) !important; }

.bg-neutral { background-color: var(--color-neutral) !important; }

/* 透明度变体 */
.bg-primary\/10 { background-color: rgba(30, 58, 138, 0.1) !important; }
.bg-sold\/10 { background-color: rgba(239, 68, 68, 0.1) !important; }
.bg-available\/10 { background-color: rgba(16, 185, 129, 0.1) !important; }
.hover\:text-primary\/80:hover { color: rgba(30, 58, 138, 0.8) !important; }

/* 自定义网格和组件样式 */
.tomb-grid {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 2px;
}

.tomb-cell {
  aspect-ratio: 1/1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tomb-cell:hover {
  transform: scale(1.1);
  z-index: 10;
}

.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}