/* ---------------------------------------------------------------------------
   嵌入适配 —— 本站（/games/2048）为 iframe 呈现所加的覆盖层，**不是上游文件**。
   上游：https://github.com/gabrielecirulli/2048

   原版是当独立页面设计的，放进 iframe 后有两处不成立：

   1. **上下留白是给独立页面用的。** 原版 `body { margin: 80px 0 }`（手机 20px），
      在 iframe 里纯粹是把棋盘往下推 —— 桌面实测整页内容 1220px，而游戏区只有
      640px 高，棋盘的下半截直接被推出可视区。
   2. **重复的标题与说明。** `<h1 class="title">2048</h1>` 和那段
      "How to play" 在博客的游戏页外面已经各有一份（还是中文的）。
      那两处已经在 index.html 里删掉了，这里不再管。

   ⚠️ **不要动 `.container` 的宽度。** 棋盘的格子是硬编码的
   （4 × 107px + 3 × 15px 间距 + 两侧 15px 内边距 = 503px），容器一收窄，
   `.grid-container` 是绝对定位、不会被裁，但棋盘会从右边溢出去。
   垂直方向能压，水平方向不能。
   --------------------------------------------------------------------------- */

body {
  margin: 10px 0;
}

/* 棋盘上方只留一点点呼吸位；原来分别是 40px 和 50px。 */
.game-container {
  margin-top: 14px;
}

.game-explanation {
  margin-top: 18px;
}

hr {
  margin: 12px 0;
}