/* 2048 · 离线小游戏（视觉参照 game.haiyong.site/2048.html） */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: #f8ffe5;
  color: #555;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 彩色标题块 ---------- */
.masthead { padding: 2rem 1rem; text-align: center; }
.masthead h1 { margin: 0; font-size: 2.2rem; font-weight: 400; }
.masthead span {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  margin: 0 0.4rem;
  color: #f8ffe5;
  background: #ffc43d;
}
.masthead span:nth-of-type(2) { background: #ef476f; }
.masthead span:nth-of-type(3) { background: #1b9aaa; }
.masthead span:nth-of-type(4) { background: #06d6a0; }

/* ---------- 页宽 ---------- */
.app {
  width: min(100% - 2rem, 440px);
  margin: 0 auto;
  padding-bottom: 3rem;
}

/* ---------- 返回入口 ---------- */
.back-row { margin: 0 0 1rem; font-size: 0.9rem; }
.back {
  color: #1b9aaa;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.back:hover { color: #14727e; }
.back:active { color: #0d4a52; }

/* ---------- 玩法说明 ---------- */
.directions {
  margin: 0;
  padding: 2rem;
  border-top: 1px solid #9a9a95;
  border-bottom: 1px solid #9a9a95;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

/* ---------- 分数 ---------- */
.scores { display: flex; justify-content: center; }
.score-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.8rem;
  font-size: 1.2rem;
  line-height: 1;
}
.score-container.best-score { color: #9a9a95; }
.score {
  position: relative;
  margin-left: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: right;
}
.add {
  position: absolute;
  left: 120%;
  top: 0;
  opacity: 0;
  font-size: 1rem;
  color: #1b9aaa;
}
.add.active { animation: add 0.8s ease-in-out; }

@keyframes add {
  0% { opacity: 1; top: 0; }
  100% { opacity: 0; top: -100%; }
}

/* ---------- 棋盘 ---------- */
.board {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 7px;
  background: #9a9a95;
  border-radius: 3px;
  touch-action: none;
}

.field {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
}

/* 格子与方块都占棋盘的 1/4，用 translate 的百分比定位（100% = 自身宽度 = 一格） */
.cell,
.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 25%;
}

/* 空位：底色 #f8ffe5，四周留出棋盘底色，形成灰缝 */
.cell::before {
  content: "";
  position: absolute;
  inset: 7.407%; /* 5px / 67.5px */
  background: #f8ffe5;
  border-radius: 3px;
}

.tile { transition: transform 110ms ease-in-out; }

.tile-inner {
  position: absolute;
  inset: 10.37%; /* 7px / 67.5px */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5.6%;
  background: #ffc43d;
  color: #f8ffe5;
  font-size: 1.8rem;
  font-size: 10.667cqw; /* 1.8rem / 270px，随棋盘缩放 */
  line-height: 1;
}
.tile-inner.d4 { font-size: 1.3rem; font-size: 7.6cqw; }
.tile-inner.d5 { font-size: 1.05rem; font-size: 6.2cqw; }

.v4 { background: #ef476f; }
.v8 { background: #1b9aaa; }
.v16 { background: #06d6a0; }
.v32 { background: #f37694; }
.v64 { background: #22c2d6; }
.v128 { background: #17f8be; }
.v256 { background: #ffd470; }
.v512 { background: #eb184a; }
.v1024 { background: #14727e; }
.v2048 { background: #05a47b; }

.tile-inner.pop { animation: pop 0.3s ease-in-out 110ms both; }
.tile-inner.pop-now { animation: pop 0.3s ease-in-out both; }
.tile-inner.shrink { animation: shrink 0.5s ease-in-out both; }

@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  90% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shrink {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.9; }
}

/* ---------- 结束遮罩 ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(85, 85, 85, 0.9);
  border-radius: 3px;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
.overlay.show { opacity: 1; visibility: visible; }
.overlay-title { margin: 0; line-height: 1.3; }
.monkey { margin: 1rem 0; font-size: 3rem; line-height: 1; }
.overlay-sub { margin: 0 0 1.5rem; font-size: 1rem; }

/* ---------- 按钮 ---------- */
.btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 1px;
  color: #fff;
  background: #1b9aaa;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0.9em 1.5em;
  cursor: pointer;
}
.btn:hover { background-color: #14727e; }
.btn:active { background-color: #0d4a52; }
.btn:focus-visible { box-shadow: 0 0 10px #0d4a52 inset; outline: none; }

/* ---------- 底部 ---------- */
.actions {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 0.75rem;
}

.hint {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: #9a9a95;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 440px) {
  .masthead { padding: 1rem; }
  .masthead span { width: 3rem; height: 3rem; line-height: 3rem; }
  .directions { padding: 1rem; }
}

@media (max-width: 375px) {
  .masthead span { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; }
}