/* 自适应布局 - 无固定断点 */

/* 使用 viewport 单位和 clamp 实现流畅缩放 */
:root {
  --spacing-xs: clamp(8px, 2vw, 12px);
  --spacing-sm: clamp(12px, 3vw, 16px);
  --spacing-md: clamp(16px, 4vw, 24px);
  --spacing-lg: clamp(20px, 5vw, 40px);
  
  --font-xs: clamp(11px, 2.5vw, 13px);
  --font-sm: clamp(12px, 3vw, 14px);
  --font-base: clamp(13px, 3.5vw, 16px);
  --font-lg: clamp(15px, 4vw, 18px);
  --font-xl: clamp(18px, 5vw, 24px);
  --font-2xl: clamp(22px, 6vw, 32px);
  
  --radius-sm: clamp(8px, 2vw, 12px);
  --radius-md: clamp(12px, 3vw, 16px);
  --radius-lg: clamp(16px, 4vw, 24px);
}

/* 全局自适应 */
* { box-sizing: border-box; }

html {
  font-size: clamp(14px, 2.5vw, 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: clamp(12px, 3vw, 20px);
  font-size: var(--font-base);
  line-height: 1.5;
}

/* 容器自适应 */
.container, .main, .content, .wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

/* 标题自适应 */
h1 { font-size: var(--font-2xl); margin-bottom: var(--spacing-md); }
h2 { font-size: var(--font-xl); margin-bottom: var(--spacing-sm); }
h3 { font-size: var(--font-lg); margin-bottom: var(--spacing-sm); }
h4 { font-size: var(--font-base); }
p { font-size: var(--font-base); margin-bottom: var(--spacing-sm); }

/* 卡片自适应 */
.card, .platform-card, .game-card, .item-card {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

/* 按钮自适应 */
.btn, button {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-base);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

/* 输入框自适应 */
input, textarea, select {
  padding: var(--spacing-sm);
  font-size: var(--font-base);
  border-radius: var(--radius-sm);
  width: 100%;
  max-width: 100%;
}

/* 图片自适应 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 网格自适应 - 根据内容自动换行 */
.grid, .platforms-grid, .games-grid, .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--spacing-md);
}

/* Flexbox 自适应 */
.flex, .row, .items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.flex > *, .row > *, .items > * {
  flex: 1 1 min(200px, 100%);
}

/* 表格自适应 */
.table-container, .table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  font-size: var(--font-sm);
  border-collapse: collapse;
}

th, td {
  padding: var(--spacing-sm);
  text-align: left;
}

/* 触摸优化 - 所有设备 */
@media (hover: none) and (pointer: coarse) {
  .btn, button, a {
    min-height: 44px;
    min-width: 44px;
  }
  
  a:active, button:active {
    opacity: 0.7;
    transform: scale(0.97);
  }
  
  .card:hover, .btn:hover {
    transform: none;
  }
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: max(env(safe-area-inset-top), 12px);
    padding-bottom: max(env(safe-area-inset-bottom), 12px);
    padding-left: max(env(safe-area-inset-left), 12px);
    padding-right: max(env(safe-area-inset-right), 12px);
  }
}

/* 横屏模式 */
@media (orientation: landscape) and (max-height: 500px) {
  body { padding: var(--spacing-sm); }
  .container { padding: var(--spacing-sm); }
  h1 { font-size: var(--font-xl); margin-bottom: var(--spacing-sm); }
}

/* 高分辨率屏幕 */
@media (min-resolution: 2dppx) {
  body { -webkit-font-smoothing: antialiased; }
}

/* 打印样式 */
@media print {
  body { padding: 0; }
  .btn, button { display: none; }
}

/* 暗色模式 - 系统偏好 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f172a;
    --card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
  }
}

/* 辅助类 - 响应式隐藏 */
.hide-mobile { display: block; }
.hide-desktop { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .hide-desktop { display: block !important; }
}

/* 辅助类 - 间距工具 */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }

/* 文字截断 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}