/*!
 * layout.css · 页面骨架与响应式
 * 依赖：tokens.css、base.css
 * 断点：> 1024 / 768–1024 / 480–768 / < 480
 */

/* ---------- 容器 ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.container-narrow {
  max-width: var(--content-max);
}

/* ---------- 顶部内核状态条（sticky，常驻）---------- */
.kernel-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.kernel-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 6px 0;
}

.kernel-bar__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-badge);
  line-height: 1.4;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kernel-bar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kernel-bar--err {
  background: color-mix(in srgb, var(--status-err) 18%, var(--bg-surface));
  border-bottom-color: var(--status-err);
}

.kernel-bar--err .kernel-bar__text {
  color: var(--status-err);
  white-space: normal;
}

/* ---------- 详情抽屉 ---------- */
.kernel-drawer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.kernel-drawer[hidden] {
  display: none;
}

.kernel-drawer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  font-size: var(--font-note);
}

.kernel-drawer__grid dt {
  color: var(--text-muted);
  font-size: var(--font-badge);
}

.kernel-drawer__grid dd {
  margin: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---------- 页头 ---------- */
.page-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0 var(--space-5);
}

.page-head__main {
  flex: 1 1 auto;
  min-width: 0;
}

.page-head__sub {
  margin-top: var(--space-1);
  font-size: var(--font-note);
  color: var(--text-secondary);
}

.page-head__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.back-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-note);
  color: var(--text-secondary);
}

.back-link:hover {
  color: var(--brand-gold);
  text-decoration: none;
}

/* ---------- 区块 ---------- */
.section {
  margin-bottom: var(--space-6);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.section__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- 首页彩种卡片栅格 ---------- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* ---------- 彩种页主内容栅格（桌面 1:1 双栏）---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.split__col {
  min-width: 0;
}

/* ---------- 首页说明栅格 ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

/* ---------- 页脚 ---------- */
.page-foot {
  padding: var(--space-5) 0 calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  font-size: var(--font-note);
  color: var(--text-muted);
  text-align: center;
}

/* ---------- 常驻提示条 ---------- */
.notice-strip {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-note);
  line-height: var(--lh-note);
  border-left: 3px solid var(--status-warn);
  background: color-mix(in srgb, var(--status-warn) 14%, var(--bg-surface));
  color: var(--text-primary);
}

.notice-strip--err {
  border-left-color: var(--status-err);
  background: color-mix(in srgb, var(--status-err) 14%, var(--bg-surface));
}

/* ---------- 弹窗 ---------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--overlay-scrim);
}

.modal-scrim[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 84vh;
  overflow: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}

/* ============================================================
 * 断点 768–1024：单栏纵向堆叠
 * ========================================================== */
@media (max-width: 1024px) {
  .split {
    grid-template-columns: 1fr;
  }

  .game-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
 * 断点 480–768：按钮纵向铺满、统计面板 2×3
 * ========================================================== */
@media (max-width: 768px) {
  .page-head {
    padding: var(--space-5) 0 var(--space-4);
    gap: var(--space-3);
  }

  .stack-sm {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .metric-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .metric-grid--stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
 * 断点 < 480：状态条压缩一行、返回首页图标化、底部安全区
 * ========================================================== */
@media (max-width: 480px) {
  .kernel-bar__inner {
    min-height: 34px;
    gap: var(--space-2);
  }

  .kernel-bar__text {
    font-size: 11px;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid,
  .metric-grid--stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-foot {
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }

  .back-link__text {
    display: none;
  }

  .card {
    padding: var(--space-4);
  }
}

/* ---------- 横屏：球区允许换行，禁止横向滚动 ---------- */
@media (orientation: landscape) and (max-height: 480px) {
  .ball-row {
    flex-wrap: wrap;
  }
}