/* ============================================================
   游戏层 · game.css  v1.0
   ------------------------------------------------------------
   第四层样式：游戏页专用组件。
   约定：与 app.css 一致 —— 只允许 var(--sk-*) 令牌，
        禁止硬编码色值。加载顺序：tokens → app → page → game
   ============================================================ */

/* ---------------- 页面骨架 ---------------- */
.gm-page { padding: var(--sk-sp-7) 0 var(--sk-sp-11); }

.gm-top {
  display: flex;
  align-items: center;
  gap: var(--sk-sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sk-sp-6);
}

.gm-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-sp-2);
  font-size: var(--sk-fs-13);
  font-weight: var(--sk-fw-semibold);
  color: var(--sk-text-3);
  text-decoration: none;
  padding: 6px var(--sk-sp-4);
  border-radius: var(--sk-r-pill);
  border: 1px solid var(--sk-line);
  background: var(--sk-surface);
  transition: color var(--sk-dur-fast), border-color var(--sk-dur-fast), background var(--sk-dur-fast);
}
.gm-back:hover { color: var(--sk-accent); border-color: var(--sk-brand-300); background: var(--sk-accent-tint); }

.gm-title {
  font-size: var(--sk-fs-21);
  font-weight: var(--sk-fw-bold);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-text-1);
  margin: 0;
}

.gm-top .gm-spacer { flex: 1; }

/* ---------------- 舞台与 HUD ---------------- */
.gm-stage {
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-lg);
  box-shadow: var(--sk-shadow);
  padding: var(--sk-sp-6);
}

.gm-hud {
  display: flex;
  gap: var(--sk-sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sk-sp-5);
}

.gm-stat {
  flex: 1;
  min-width: 88px;
  background: var(--sk-bg-soft);
  border: 1px solid var(--sk-line-soft);
  border-radius: var(--sk-r-md);
  padding: var(--sk-sp-3) var(--sk-sp-5);
}
.gm-stat .k {
  font-size: var(--sk-fs-11);
  color: var(--sk-text-4);
  letter-spacing: var(--sk-tracking-wide);
  font-weight: var(--sk-fw-semibold);
}
.gm-stat .v {
  font-size: var(--sk-fs-21);
  font-weight: var(--sk-fw-bold);
  color: var(--sk-text-1);
  font-variant-numeric: tabular-nums;
  line-height: var(--sk-lh-tight);
  margin-top: 2px;
}
.gm-stat.hi .v { color: var(--sk-accent); }

/* 游戏区（相对定位，承载浮层） */
.gm-area { position: relative; }

.gm-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sk-r-md);
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-line-soft);
  touch-action: none;
}

/* ---------------- 浮层（开始 / 结束） ---------------- */
.gm-overlay {
  position: absolute;
  inset: 0;
  background: var(--sk-overlay);
  border-radius: var(--sk-r-md);
  display: grid;
  place-items: center;
  z-index: 5;
  transition: opacity var(--sk-dur-base) var(--sk-ease-out);
}
.gm-overlay[hidden] { display: none; }

.gm-panel {
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-lg);
  box-shadow: var(--sk-shadow-lg);
  padding: var(--sk-sp-8) var(--sk-sp-7);
  text-align: center;
  max-width: 320px;
}
.gm-panel h2 {
  margin: 0 0 var(--sk-sp-3);
  font-size: var(--sk-fs-21);
  font-weight: var(--sk-fw-bold);
  color: var(--sk-text-1);
}
.gm-panel p {
  margin: 0 0 var(--sk-sp-6);
  font-size: var(--sk-fs-14);
  color: var(--sk-text-3);
  line-height: var(--sk-lh-relax);
}

.gm-actions { display: flex; gap: var(--sk-sp-3); justify-content: center; flex-wrap: wrap; }

.gm-tip {
  margin-top: var(--sk-sp-5);
  font-size: var(--sk-fs-13);
  color: var(--sk-text-3);
  line-height: var(--sk-lh-relax);
}
.gm-tip kbd {
  font-family: var(--sk-font-mono);
  font-size: var(--sk-fs-11);
  background: var(--sk-bg-soft);
  border: 1px solid var(--sk-line);
  border-bottom-width: 2px;
  border-radius: var(--sk-r-xs);
  padding: 1px 6px;
  color: var(--sk-text-2);
}

/* ---------------- 2048 ---------------- */
.g2048 {
  position: relative;
  background: var(--sk-bg-soft);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-md);
  padding: var(--sk-sp-3);
  aspect-ratio: 1 / 1;
  touch-action: none;
  overflow: hidden;
}
.g2048-cells, .g2048-tiles {
  position: absolute;
  inset: var(--sk-sp-3);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--sk-sp-3);
}
.g2048-cells div { background: var(--sk-surface-2); border-radius: var(--sk-r-sm); }

.g2048-tile {
  position: absolute;
  border-radius: var(--sk-r-sm);
  display: grid;
  place-items: center;
  font-weight: var(--sk-fw-bold);
  font-variant-numeric: tabular-nums;
  transition: transform var(--sk-dur-base) var(--sk-ease-out);
  will-change: transform;
  /* 尺寸由 JS 按格子计算后写入 --s */
  width: var(--s);
  height: var(--s);
  font-size: var(--fs);
  background: var(--sk-gray-200);
  color: var(--sk-text-1);
}
.g2048-tile.v2    { background: var(--sk-gray-100); color: var(--sk-text-2); }
.g2048-tile.v4    { background: var(--sk-brand-100); color: var(--sk-text-2); }
.g2048-tile.v8    { background: var(--sk-brand-200); color: var(--sk-text-1); }
.g2048-tile.v16   { background: var(--sk-brand-300); color: var(--sk-text-1); }
.g2048-tile.v32   { background: var(--sk-brand-400); color: var(--sk-text-1); }
.g2048-tile.v64   { background: var(--sk-brand-500); color: #fff; }
.g2048-tile.v128  { background: var(--sk-brand-600); color: #fff; }
.g2048-tile.v256  { background: var(--sk-brand-700); color: #fff; }
.g2048-tile.v512  { background: var(--sk-brand-800); color: #fff; }
.g2048-tile.v1024 { background: var(--sk-brand-900); color: #fff; }
.g2048-tile.v2048 { background: var(--sk-grad-brand); color: #fff; box-shadow: var(--sk-shadow-brand); }

.g2048-tile.pop { animation: gm-pop var(--sk-dur-base) var(--sk-ease-spring); }
@keyframes gm-pop { from { transform: scale(.42); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------------- 记忆翻牌 ---------------- */
.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sk-sp-3);
}
.mem-card {
  position: relative;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  perspective: 700px;
  background: none;
  border: 0;
  padding: 0;
}
.mem-in {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--sk-dur-slow) var(--sk-ease-out);
  border-radius: var(--sk-r-md);
}
.mem-card.flipped .mem-in { transform: rotateY(180deg); }

.mem-face {
  position: absolute;
  inset: 0;
  border-radius: var(--sk-r-md);
  display: grid;
  place-items: center;
  font-size: 30px;
  backface-visibility: hidden;
  border: 1px solid var(--sk-line);
}
.mem-back {
  background: var(--sk-grad-brand);
  color: #fff;
  border-color: transparent;
  font-size: 22px;
}
.mem-front {
  background: var(--sk-surface-2);
  transform: rotateY(180deg);
  color: var(--sk-text-1);
}
.mem-card.matched .mem-front {
  background: var(--sk-ok-soft);
  border-color: var(--sk-ok);
}
.mem-card:disabled { cursor: default; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 640px) {
  .gm-page { padding: var(--sk-sp-5) 0 var(--sk-sp-9); }
  .gm-stage { padding: var(--sk-sp-4); }
  .gm-stat { min-width: 72px; padding: var(--sk-sp-3); }
}