/* ============================================================
   小游戏公用皮肤。
   配色直接沿用聊天那边的 Messenger 风格（app.css），两边看着像一家人：
   浅色 #FFF 底 / #F0F0F0 面 / #0084FF 主色，深色 #000 / #303030 / #0A7CFF。
   同样跟随系统主题。
   ============================================================ */
:root{
  color-scheme:light dark;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  --bg:#FFFFFF;
  --bar:rgba(255,255,255,.94);
  --surface:#F0F2F5;
  --line:#E4E6EB;
  --text:#050505;
  --text2:#65676B;
  --muted:#8A8D91;
  --accent:#0084FF;
  --pill:#F0F2F5;
  --danger:#F02849;
  --board:#F0F0F0;
  --grid:rgba(0,0,0,.045);
  --snake:#0084FF;
  --snake-head:#0066CC;
  --food:#F02849;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000000;
    --bar:rgba(0,0,0,.92);
    --surface:#242526;
    --line:#2A2B2C;
    --text:#E4E6EB;
    --text2:#B0B3B8;
    --muted:#8A8D91;
    --accent:#0A7CFF;
    --pill:#303030;
    --danger:#FF5C6C;
    --board:#161617;
    --grid:rgba(255,255,255,.05);
    --snake:#0A7CFF;
    --snake-head:#4EA8FF;
    --food:#FF5C6C;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",
       "PingFang SC","Helvetica Neue",sans-serif;
  display:flex;flex-direction:column;
  /* 游戏全程不该出现文字选中和长按菜单，一滑就选蓝一片很出戏 */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  padding-top:var(--safe-t);padding-bottom:var(--safe-b);
}

/* ---------------- 顶栏 ---------------- */
.gbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:6px 10px;border-bottom:1px solid var(--line);
  background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
.gbar b{flex:1;font-size:17px;font-weight:600}
.gback{
  display:grid;place-items:center;width:38px;height:38px;
  color:var(--accent);text-decoration:none;border-radius:50%;
}
.gmini{
  padding:6px 12px;border:0;border-radius:16px;background:var(--pill);
  color:var(--text);font:600 13px inherit;font-family:inherit;cursor:pointer;
}

/* ---------------- 分数 ---------------- */
.scorebar{
  flex:0 0 auto;display:flex;gap:10px;padding:10px 14px 6px;
}
.sc{
  flex:1;display:flex;align-items:baseline;gap:8px;
  padding:8px 12px;border-radius:12px;background:var(--surface);
}
.sc span{font-size:12.5px;color:var(--text2)}
.sc b{font-size:19px;font-variant-numeric:tabular-nums}

/* ---------------- 棋盘 ---------------- */
.stage{
  flex:1;position:relative;display:grid;place-items:center;
  min-height:0;padding:6px 10px;
}
#cv{
  display:block;border-radius:14px;background:var(--board);
  /* 手指在棋盘上滑动是操作方向，不能让浏览器拿去滚页面 */
  touch-action:none;
}

/* ---------------- 遮罩（开始/暂停/结束）---------------- */
.overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.45);border-radius:14px;
}
.overlay[hidden]{display:none}
.ov-card{
  min-width:220px;max-width:82%;padding:20px 22px;border-radius:18px;
  background:var(--bg);text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.ov-title{font-size:20px;font-weight:700;margin-bottom:6px}
.ov-sub{font-size:13.5px;color:var(--text2);line-height:1.5;margin-bottom:16px;white-space:pre-line}
.ov-btn{
  width:100%;padding:12px;border:0;border-radius:22px;
  background:var(--accent);color:#fff;font:600 16px inherit;font-family:inherit;cursor:pointer;
}
.ov-btn:active{opacity:.85}

/* ---------------- 方向键 ----------------
 * 滑动是主操作，方向键是给"单手拿着、拇指够不到滑动区"的情况兜底。
 * 屏幕矮的时候（横屏、小屏）自动收起，别把棋盘挤没了。
 */
.pad{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 0 14px;
}
.pk-row{display:flex;gap:8px}
.pk{
  width:62px;height:44px;border:0;border-radius:12px;
  background:var(--surface);color:var(--text2);
  font-size:15px;cursor:pointer;
}
.pk:active{background:var(--pill);color:var(--accent)}
.pk.pause{color:var(--accent);font-size:13px}
@media (max-height:620px){ .pad{display:none} }