:root{
  --bg:#eef1f8; --card:#ffffff; --ink:#1a2a4a; --muted:#6b7f9e;
  --blue:#4a6db5; --deep:#3d5080; --navy:#1a2a4a; --foam:#f0f7ff;
  --pink:#ff9eb5; --rice:#fffaf0; --line:#c9dff5;
  --shadow:0 10px 28px rgba(30,95,173,.10); --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6; min-height:100vh;
  display:flex; flex-direction:column;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(126,200,255,.28) 0 40px, transparent 41px),
    radial-gradient(circle at 90% 80%, rgba(58,141,222,.14) 0 60px, transparent 61px),
    radial-gradient(#c9dff5 1.1px, transparent 1.1px);
  background-size:auto, auto, 22px 22px;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
.top{
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:2px solid var(--line); position:sticky; top:0; z-index:20;
}
.top-inner,.wrap,footer.foot .inner{max-width:960px; margin:0 auto; padding:0 18px}
.top-inner{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); font-size:1.05rem}
.brand .logo-sticker{width:36px; height:36px; object-fit:contain; flex-shrink:0}
nav a{margin-left:14px; color:var(--ink); font-weight:600; font-size:.92rem}
nav a.active,nav a:hover{color:var(--deep); text-decoration:none}
.wrap{flex:1; padding:24px 18px 40px}
.hero{
  background:linear-gradient(135deg,#d9ecff,#f0f7ff 50%,#e8fff8);
  border:2px solid var(--line); border-radius:24px; padding:22px 20px;
  box-shadow:var(--shadow); display:flex; gap:16px; align-items:flex-start;
  margin-bottom:24px;
}
.hero-sticker{
  width:96px; height:96px; object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 4px 8px rgba(30,95,173,.18));
}
.hero h1{margin:0; font-size:clamp(1.35rem,3.6vw,1.9rem)}
.hero p{margin:6px 0 0; color:var(--muted)}
.badge{
  display:inline-block; background:#fff; border:1.5px solid var(--line);
  border-radius:999px; padding:4px 12px; font-size:.78rem; color:var(--muted); font-weight:700;
}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.card{
  background:var(--card); border:2px solid var(--line); border-radius:22px;
  padding:20px; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s;
  display:flex; flex-direction:column; gap:10px;
}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(30,95,173,.14)}
.card .ico{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  font-size:1.45rem; color:#fff;
}
.card h2{margin:0; font-size:1.15rem}
.card p{margin:0; color:var(--muted); font-size:.95rem; flex:1}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:linear-gradient(135deg,#5eb0f0,#3d5080); color:#fff !important;
  border:none; border-radius:999px; padding:10px 18px; font-weight:800;
  cursor:pointer; text-decoration:none !important; font-size:.95rem;
  box-shadow:0 6px 16px rgba(30,95,173,.28);
}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:#fff; color:var(--ink) !important; border:2px solid var(--line); box-shadow:none}
.btn.sm{padding:8px 14px; font-size:.85rem}
.panel{background:var(--card); border:2px solid var(--line); border-radius:22px; padding:20px; box-shadow:var(--shadow); position:relative}
.game-head{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px}
.game-title{display:flex; align-items:center; gap:10px; min-width:0}
.game-title .game-sticker{width:72px; height:72px; object-fit:contain; flex-shrink:0}
.scores{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.score-box{
  background:var(--foam); border:2px solid var(--line); border-radius:14px;
  padding:8px 14px; min-width:90px; text-align:center;
}
.score-box span{display:block; font-size:.72rem; color:var(--muted); font-weight:700; letter-spacing:.04em}
.score-box b{font-size:1.2rem}
.hint{color:var(--muted); font-size:.9rem; margin:12px 0 0}
footer.foot{border-top:2px solid var(--line); background:rgba(255,255,255,.75); padding:18px 0; margin-top:auto}
footer.foot .inner{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; color:var(--muted); font-size:.82rem}
footer.foot .fan{font-size:.76rem; opacity:.95; line-height:1.45}
footer.foot .credit a{color:var(--deep)}
.board-wrap{display:flex; justify-content:center; position:relative; z-index:1}
#board2048{
  background:#9ec9ef; border-radius:14px; padding:10px; display:grid;
  grid-template-columns:repeat(4,1fr); gap:10px; width:min(100%,380px); touch-action:none;
}
.cell{
  aspect-ratio:1; border-radius:12px; background:#d6eaff99;
  display:grid; place-items:center; font-weight:800; font-size:clamp(1.1rem,4.5vw,1.55rem);
  color:var(--navy); transition:background .12s; line-height:1.1; text-align:center; padding:2px;
}
.t2{background:#fffaf0}.t4{background:#fff3d6}.t8{background:#c9e8ff;color:#1e5fad}
.t16{background:#9fd4ff;color:#123}.t32{background:#6bb6f0;color:#fff}
.t64{background:#3a8dde;color:#fff}.t128{background:#2a74c4;color:#fff;font-size:clamp(.95rem,3.8vw,1.25rem)}
.t256{background:#1e5fad;color:#fff;font-size:clamp(.95rem,3.8vw,1.25rem)}
.t512{background:#164a8c;color:#fff;font-size:clamp(.9rem,3.5vw,1.15rem)}
.t1024{background:#0f3568;color:#fff;font-size:clamp(.8rem,3.2vw,1.05rem)}
.t2048{background:linear-gradient(135deg,#7ec8ff,#1e5fad);color:#fff;font-size:clamp(.8rem,3.2vw,1.05rem)}
.tbig{background:#0a274d;color:#fff;font-size:clamp(.75rem,3vw,.95rem)}
.overlay{position:fixed; inset:0; background:rgba(26,42,74,.4); display:none; align-items:center; justify-content:center; z-index:50; padding:18px}
.overlay.show{display:flex}
.modal{background:#fff; border-radius:22px; padding:24px; max-width:340px; width:100%; text-align:center; border:2px solid var(--line); box-shadow:var(--shadow)}
#snakeCanvas{display:block; margin:0 auto; max-width:100%; width:min(100%,380px); height:auto; aspect-ratio:1; touch-action:none; background:#0f2a44; border-radius:14px; border:3px solid #3a8dde}
#mineBoard.mine-grid, .mine-grid{
  --mine-size:32px;
  display:grid !important;
  grid-template-columns:repeat(var(--mine-cols, 9), var(--mine-size));
  gap:4px; background:#d6eaff; padding:10px; border-radius:14px; border:2px solid var(--line);
  margin:0 auto; width:max-content; max-width:100%;
  justify-content:center; touch-action:manipulation;
}
.mcell{
  width:var(--mine-size); height:var(--mine-size); border:none; border-radius:8px;
  font-weight:800; cursor:pointer; background:#a8cff0; color:#1a2a4a;
  font-size:calc(var(--mine-size) * 0.45); padding:0; line-height:1;
  display:grid; place-items:center;
}
.mcell.open{background:#f7fbff;cursor:default}
.mcell.flag{background:#ffe3a3}
.mcell.boom{background:#ff9eb5;color:#fff}
.mcell.n1{color:#2b6cb0}.mcell.n2{color:#2f855a}.mcell.n3{color:#c53030}
.mcell.n4{color:#553c9a}.mcell.n5{color:#9b2c2c}
.pad{display:none; grid-template-columns:repeat(3,64px); gap:8px; justify-content:center; margin-top:16px}
.pad button{width:64px;height:48px;border-radius:14px;border:2px solid var(--line);background:#fff;font-size:1.1rem;cursor:pointer;font-weight:800;color:var(--deep)}
.pad .sp{visibility:hidden}
.about-stickers{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 16px}
.about-stickers img{width:72px; height:72px; object-fit:contain}
@media (max-width:640px){
  nav a{margin-left:8px; font-size:.78rem}
  .hero{gap:12px}
  .hero-sticker{width:72px; height:72px}
  .game-title .game-sticker{width:56px; height:56px}
  .pad{display:grid}
  #mineBoard.mine-grid, .mine-grid{ --mine-size:28px; gap:3px; padding:8px; }
}
@media (max-width:420px){
  #mineBoard.mine-grid, .mine-grid{ --mine-size:22px; gap:2px; padding:6px; }
}
@media (max-width:360px){
  #mineBoard.mine-grid, .mine-grid{ --mine-size:18px; gap:2px; }
}
@media (max-width:380px){
  .hero-sticker,.game-title .game-sticker,.brand .logo-sticker{display:none}
}