/* 休闲小游戏屋 · 公共糖果风样式 */
:root{
  --sky1:#fff0f7;--sky2:#ffeaf1;
  --ink:#7c5f6b;--ink2:#bb92a4;
  --accent:#ff8ab5;--accent2:#ff6e9d;
  --ok:#27a477;--card:#ffffff;--line:#ffd3e4;
  --cf1:#ffc9de;--cf2:#ffe9a8;--cf3:#c9ecd9;--board:#fffdf8;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);min-height:100vh;overflow-x:hidden;
  background:linear-gradient(180deg,var(--sky1),var(--sky2)) fixed;
}
/* 糖果纸屑背景（颜色跟随皮肤 --cf1~3） */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(var(--cf1) 3px,transparent 3px),
    radial-gradient(var(--cf2) 3px,transparent 3px),
    radial-gradient(var(--cf3) 3px,transparent 3px);
  background-size:90px 90px,70px 70px,110px 110px;
  background-position:0 0,30px 40px,60px 10px;
}
.wrap{position:relative;z-index:1;max-width:480px;margin:0 auto;
  padding:14px 14px calc(24px + env(safe-area-inset-bottom));}

/* 顶栏 */
.bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bar b{font-size:17px;letter-spacing:2px}
.pill{background:rgba(255,255,255,.85);color:var(--ink2);border-radius:99px;
  font-size:12px;padding:7px 14px;box-shadow:0 2px 6px rgba(0,0,0,.06);user-select:none}

/* 每日打卡条 */
.checkin{display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  border-radius:20px;padding:13px 18px;margin-bottom:6px;
  box-shadow:0 7px 16px rgba(255,110,150,.35)}
.checkin .cl{display:flex;flex-direction:column;gap:2px}
.checkin .cl b{font-size:15px;letter-spacing:1px}
.checkin .cl s{text-decoration:none;font-size:11px;opacity:.92}
.checkin i{font-style:normal;font-weight:800;font-size:13px;letter-spacing:1px}
.checkin.done{background:#fff;color:var(--ink);border:2px dashed #f3bfd4;
  box-shadow:0 5px 12px rgba(255,120,170,.16)}
.checkin.done .cl s{color:var(--ink2)}

/* 分区货架 */
.sec-head{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 9px}
.sec-head b{font-size:14.5px;letter-spacing:1px}
.sec-head s{text-decoration:none;font-size:10.5px;color:var(--ink2)}
.crow{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  width:fit-content;max-width:100%;margin:0 auto;
  padding:3px 2px 10px;scrollbar-width:none}
.crow::-webkit-scrollbar{display:none}
.cc{flex:0 0 92px;border-radius:18px;padding:14px 4px 11px;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:5px;scroll-snap-align:start;
  background:var(--card);border:2.5px solid var(--line)}
.cc i{font-style:normal;font-size:26px}
.cc b{font-size:11px}
.cc s{text-decoration:none;font-size:8.5px;color:var(--ink2)}
.cc s.cok{color:var(--ok);font-weight:800}
.cc.ghost{background:rgba(255,255,255,.5);border:2px dashed #eec3d7;
  box-shadow:none;color:var(--ink2);justify-content:center}
/* 糖果色描边（每游戏一色） */
.st1{border-color:#ff8ab5;box-shadow:0 4px 11px rgba(255,138,181,.22)}
.st2{border-color:#52c78f;box-shadow:0 4px 11px rgba(82,199,143,.2)}
.st3{border-color:#56b8f2;box-shadow:0 4px 11px rgba(86,184,242,.2)}
.st4{border-color:#a58ae8;box-shadow:0 4px 11px rgba(165,138,232,.2)}
.st5{border-color:#ff9a5e;box-shadow:0 4px 11px rgba(255,154,94,.2)}
.st6{border-color:#f7c948;box-shadow:0 4px 11px rgba(247,201,72,.25)}
.st7{border-color:#8fd06c;box-shadow:0 4px 11px rgba(143,208,108,.2)}
.st8{border-color:#4fd0c9;box-shadow:0 4px 11px rgba(79,208,201,.2)}

.tip{text-align:center;font-size:11px;color:#c9a9b6;margin-top:18px;letter-spacing:1px}

/* 交互通用 */
.tap{position:relative;overflow:hidden;transition:transform .15s;cursor:pointer}
.tap:active{transform:scale(.96)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.6);
  transform:scale(0);animation:rip .55s ease-out forwards;pointer-events:none}
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.in{opacity:1;transform:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}

/* 轻提示 */
.toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(16px);background:#fff;color:#e0568d;
  font-size:13px;font-weight:700;padding:11px 20px;border-radius:99px;
  box-shadow:0 8px 22px rgba(200,90,140,.28);opacity:0;pointer-events:none;
  transition:all .3s;z-index:60;letter-spacing:1px;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes rip{to{transform:scale(1);opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,138,181,.45)}70%{box-shadow:0 0 0 10px rgba(255,138,181,0)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* ===== 游戏页公共（2048 / 贪吃蛇 / 俄罗斯方块共用） ===== */
a.pill{text-decoration:none}
.scores{display:flex;gap:10px;margin:2px 0 10px}
.score{flex:1;background:#fff;border:2.5px solid #f0d4e2;border-radius:16px;
  padding:9px 10px 8px;text-align:center;box-shadow:0 3px 9px rgba(255,120,170,.1)}
.score s{text-decoration:none;display:block;font-size:10.5px;color:var(--ink2);letter-spacing:1px}
.score b{font-size:20px;color:var(--accent2)}
.ctrls{display:flex;gap:10px;margin-bottom:12px}
.cbtn{flex:1;text-align:center;background:#fff;border:2.5px solid #f0d4e2;border-radius:14px;
  padding:10px 0;font-size:13.5px;font-weight:800;color:var(--ink);
  box-shadow:0 3px 8px rgba(255,120,170,.1)}
.hint{text-align:center;font-size:11.5px;color:#c9a9b6;margin-top:12px;letter-spacing:1px}
.overlay{position:fixed;inset:0;background:rgba(123,63,90,.35);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:50;
  opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.show{opacity:1;pointer-events:auto}
.panel{background:#fff;border:2.5px solid #ffdcef;border-radius:24px;
  padding:26px 20px 20px;width:300px;max-width:86vw;text-align:center;
  box-shadow:0 16px 40px rgba(160,60,110,.3);transform:scale(.9);transition:transform .25s}
.overlay.show .panel{transform:scale(1)}
.panel h3{font-size:19px;letter-spacing:2px;margin-bottom:8px}
.panel p{font-size:12.5px;color:var(--ink2);line-height:1.7;margin-bottom:6px}
.panel p b{color:var(--accent2);font-size:16px}
.pbtn{display:block;width:100%;margin:9px 0 0;padding:13px 0;border-radius:16px;
  font-weight:800;font-size:15px;border:2.5px solid transparent;letter-spacing:1px}
.pbtn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 6px 14px rgba(255,110,150,.35)}
.pbtn.plain{background:#fff;border-color:#f0d4e2;color:var(--ink)}
.diffrow{display:flex;gap:8px;margin-top:8px}
.dbtn{flex:1;padding:11px 0;border-radius:14px;border:2.5px solid #f0d4e2;background:#fff;
  font-weight:800;font-size:13px;color:var(--ink)}
.dbtn.on{border-color:var(--accent);color:var(--accent);background:#fff0f7}

/* ===== 换肤面板 ===== */
.srow{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;
  border:2px solid var(--line);margin-top:8px;font-weight:800;font-size:14px}
.srow.on{border-color:var(--accent);color:var(--accent);background:#fff}
.srow s{text-decoration:none;margin-left:auto;font-size:11px;opacity:.55}
.sdots{display:flex;gap:4px}
.sdots b{width:14px;height:14px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}