/* ============================================================
   KUBO小游戏 · 全站公共样式（base.css）
   ------------------------------------------------------------
   设计系统：浅色简约 / 青绿主色 / 系统字体 / 无渐变无发光
   所有页面先引入本文件，再引入各自的页面专属样式
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root {
  --bg: #f0f6f4;                       /* 页面底色（淡青绿） */
  --bg2: #e3eeea;                      /* 次级背景 */
  --card: #ffffff;                     /* 卡片 */
  --border: #dbe7e3;                   /* 边框 */
  --fg: #23272f;                       /* 主文字 */
  --muted: #7d8592;                    /* 弱化文字 */
  --accent: #0d9488;                   /* 主色（青绿） */
  --accent-dim: rgba(13, 148, 136, .12);
  --accent-glow: rgba(13, 148, 136, .28);
  --danger: #e5484d;                   /* 危险红 */
  --warn: #b7791f;                     /* 警告琥珀 */
  --r: 12px;                           /* 大圆角 */
  --rs: 8px;                           /* 小圆角 */
  --ease: .3s cubic-bezier(.25, .46, .45, .94);
}

/* ---------- 2. 基础重置 ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 3. 内联 SVG 图标 ---------- */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: .85em;
  height: .85em;
}

/* ---------- 4. 兼容性徽章（首页卡片 / 播放器控制栏通用） ---------- */
.badge-landscape {
  background: rgba(183, 121, 31, .12);
  color: #b7791f;
  border: 1px solid rgba(183, 121, 31, .3);
}

.compat-pc {
  background: rgba(47, 127, 193, .12);
  color: #2f7fc1;
  border: 1px solid rgba(47, 127, 193, .28);
}

.compat-mobile {
  background: rgba(217, 115, 40, .12);
  color: #d97328;
  border: 1px solid rgba(217, 115, 40, .28);
}

.compat-both {
  background: rgba(42, 157, 92, .12);
  color: #2a9d5c;
  border: 1px solid rgba(42, 157, 92, .28);
}

/* ---------- 5. 分类标签色板（仅底色与文字，圆角/边框等容器样式由页面定义） ----------
   射击红 / 赛车金 / 模拟橙 / 动作绿 / 摸金蓝（浅底实字，避免与主色撞色） */
.tag-射击 { background: rgba(214, 60, 65, .1);  color: #d63c41; }
.tag-赛车 { background: rgba(212, 146, 13, .12); color: #b07c08; }
.tag-模拟 { background: rgba(217, 115, 40, .12); color: #d97328; }
.tag-动作 { background: rgba(42, 157, 92, .1);  color: #2a9d5c; }
.tag-摸金 { background: rgba(47, 127, 193, .1); color: #2f7fc1; }

/* ---------- 6. 设备兼容提示弹窗（首页 / 播放器通用） ---------- */
.compat-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(31, 41, 55, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.compat-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.compat-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(31, 41, 55, .25);
}

.compat-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(183, 121, 31, .12);
  color: #b7791f;
}

.compat-modal h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.compat-modal p {
  color: var(--muted);
  font-size: .88rem;
  margin-bottom: 24px;
  line-height: 1.6;
}

.compat-modal .modal-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.modal-btn {
  padding: 10px 24px;
  border-radius: var(--rs);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease);
  border: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}

.modal-btn-cancel {
  background: var(--bg2);
  color: var(--muted);
}

.modal-btn-cancel:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.modal-btn-confirm {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.modal-btn-confirm:hover {
  background: #0b7d72;
  border-color: #0b7d72;
}

/* ---------- 7. 滚动条 ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #c2d4ce; border-radius: 3px; }

/* ---------- 8. 动效降级（无障碍：用户偏好减少动效时全部动画瞬时完成） ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}