/* ==========================================================================
   LYSVAL 儿童乐园 · 基础层 base.css（R11 新增）
   --------------------------------------------------------------------------
   定位：reset + 布局栅格 + 统一断点系统。依赖 tokens.css 先加载。
   与现有 style_20261112_1035.css 互补：本文件只提供可复用的基础类，
   不覆盖既有选择器，做到「新增零回归」。

   断点语义（全站唯一）：
     < 640px          手机    —— 单列、紧凑
     640–1024px       平板    —— 单列 + 竖屏特判
     > 1024px         桌面    —— 多列
   LYSVAL注释：后续迁移旧样式的零散 @media 时，统一对齐这三档，
   不再新增 700/720/760/899/900 等中间断点。
   ========================================================================== */

/* ---- 栅格容器：居中 + 内容宽度，替代散落各处的 max-width ---- */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 640px) {
  .container { padding-inline: 22px; }
}

/* ---- 通用响应式栅格（卡片 / 游戏列表通用） ---- */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 需要 4 列的桌面网格 */
.grid.grid-4 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 舞台等比缩放容器（站点通用布局，供各游戏舞台复用） ---- */
.stage-fit {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-fit > * {
  max-width: 100%;
  max-height: 100%;
}

/* ---- 通用按钮基础（颜色来自令牌，组件按需覆盖） ---- */
.btn-base {
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  background: var(--panel2);
  color: var(--text);
  transition: transform .08s ease, filter .12s ease;
}
.btn-base:hover { filter: brightness(1.05); }
.btn-base:active { transform: translateY(1px); }

/* ---- 卡片基础 ---- */
.card-base {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow2);
}