/* 贪吃蛇 · 页面专属样式
 * 页面骨架 / HUD / 按钮 / 遮罩 / 动画 都来自 /games/assets/base.css，这里只写棋盘。
 */

/* ---------- 棋盘 ---------- */

/* .frame 提供灰外框，棋盘本体（奶油底 + 极淡格线 + 蛇与食物）画在 canvas 上 */
.frame { position: relative; width: 100%; }
.stage { width: 100%; }

#board {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--cell);
  border-radius: var(--radius);
  touch-action: none;
}

/* 撞墙 / 咬到自己时抖一下棋盘 */
.frame.shake { animation: shake 0.42s ease-in-out; }

/* ---------- 就绪 / 暂停提示（贴在棋盘下沿，不挡蛇和食物） ---------- */

.notice {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.45em 1em;
  max-width: 92%;
  background: rgba(255, 253, 242, 0.92);
  border: 1px solid var(--muted);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease-in-out;
}
.notice.show { opacity: 1; }

/* ---------- 按钮排布 ---------- */

.actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }