/* ============================================================
   贪吃蛇 · 两个界面共用的样式
   只放「导航页和游戏页都要用」的东西。
   某一页专属的样式写在那页自己的 <style> 里。
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(1200px 620px at 50% -12%, #e4f5ec, #f2f7fb 46%, #e9eff6);
  color: #14312a;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 两页共用的居中容器与卡片 */
.app { width: min(560px, 100%); }
.card {
  background: #fff;
  border: 1px solid rgba(20, 49, 42, .07);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 26px 60px -30px rgba(11, 50, 38, .5), 0 2px 6px rgba(11, 50, 38, .05);
}

/* 按钮。.btn / .ghost 同时给 <button> 和 <a> 用，
   所以显式写 display 和 text-decoration，别依赖标签默认值 */
button { font: inherit; cursor: pointer; border-radius: 999px; transition: .18s; }
button:active { transform: translateY(1px); }

.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-size: 14px; font-weight: 700; color: #15803d; background: #fff;
  border: 1px solid rgba(22, 163, 74, .38); padding: 9px 20px; border-radius: 999px;
  transition: .18s;
}
.btn:hover { background: #f0fdf4; border-color: #16a34a; }
.btn.primary {
  color: #fff; background: #16a34a; border-color: #16a34a;
  box-shadow: 0 10px 20px -10px rgba(22, 163, 74, .9);
}
.btn.primary:hover { background: #15803d; }

.ghost {
  display: inline-block; text-decoration: none;
  font-size: 12px; font-weight: 600; color: #5d706a; background: #f4f8f6;
  border: 1px solid #e6efe9; padding: 7px 12px; border-radius: 999px;
  white-space: nowrap; transition: .18s;
}
.ghost:hover { background: #ecf7f0; color: #15803d; border-color: #bfe6cd; }

/* 键盘按键标记 */
kbd {
  font: inherit; font-size: 11px; font-weight: 700; color: #45605a; background: #fff;
  border: 1px solid #dfe9e3; border-bottom-width: 2px; border-radius: 6px;
  padding: 1px 6px; margin: 0 1px;
}