:root{--pink:#ff8fab;--pink2:#ffc2d4;--bg1:#fff5f8;--bg2:#eef3ff;--ink:#6b4a5a;--mint:#bdf0dc;--lav:#d9ccff;--slot:52px;--gap:10px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{font-family:-apple-system,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg1),var(--bg2));user-select:none;-webkit-user-select:none;touch-action:manipulation}
#app{max-width:520px;margin:0 auto;height:100dvh;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}
.topbar{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 12px 8px}
.brand{font-weight:800;font-size:20px;flex:1;color:#e0628a;letter-spacing:1px}
.pill{background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;box-shadow:0 2px 0 #f3d3de;font-size:15px;white-space:nowrap}
.icon-btn{border:0;background:#fff;width:40px;height:40px;border-radius:14px;font-size:20px;box-shadow:0 3px 0 #f3d3de;color:var(--ink);cursor:pointer}
.icon-btn.off{opacity:.45}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #f3d3de}
#map{overflow-y:auto;-webkit-overflow-scrolling:touch}
.map-hero{text-align:center;padding:6px 16px 10px}
.hero-title{font-size:14px;opacity:.8;margin-bottom:12px}
.big-btn{display:block;width:100%;border:0;border-radius:22px;padding:16px;font-size:22px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ff9fba,#ff7aa0);box-shadow:0 6px 0 #e0628a,0 10px 20px rgba(255,122,160,.35);cursor:pointer;animation:breathe 1.8s ease-in-out infinite}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #e0628a}
.soft-btn{margin-top:14px;width:100%;border:0;border-radius:18px;padding:12px;font-size:17px;font-weight:700;background:linear-gradient(90deg,#d9ccff,#bdf0dc,#ffe3a8);color:var(--ink);box-shadow:0 4px 0 #cbbde8;cursor:pointer}
.soft-btn.done{opacity:.6}
.soft-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #cbbde8}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.bag{margin-top:12px;display:flex;justify-content:center;gap:10px;font-size:14px}
.bag span{background:#fff;border-radius:12px;padding:4px 10px}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;padding:10px 18px 20px}
.lv{aspect-ratio:1;border-radius:50%;border:0;font-size:20px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ffb3c8,#ff8fab);box-shadow:0 5px 0 #e0628a;position:relative;cursor:pointer}
.lv.locked{background:#e9e2ea;color:#b9a9b4;box-shadow:0 5px 0 #d4c8d1}
.lv.cur{animation:bounce 1s ease-in-out infinite;background:linear-gradient(180deg,#ffe08a,#ffc145);box-shadow:0 5px 0 #e09a1c;color:#7a4a00}
.lv .st{position:absolute;bottom:-16px;left:0;right:0;font-size:11px;letter-spacing:-1px}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.foot{text-align:center;font-size:12px;opacity:.5;padding:10px 0 30px}
.progress{margin:0 16px;height:10px;background:#fff;border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
#progressBar{height:100%;width:0;background:linear-gradient(90deg,#ffb3c8,#ff8fab);border-radius:99px;transition:width .35s}
.lvl-title{flex:1;text-align:center;font-weight:800;font-size:19px}
#board{flex:1;display:grid;justify-content:center;align-content:center;gap:calc(var(--gap)*1.6) var(--gap);padding:8px}
.shelf{position:relative;padding:calc(var(--slot)*.5) 8px 0;border-radius:16px;background:linear-gradient(180deg,#fff0f5,#ffe1ea);box-shadow:inset 0 0 0 2px #ffd0de;transition:box-shadow .2s,transform .2s}
.shelf.glow{box-shadow:inset 0 0 0 3px #ffb300,0 0 16px #ffd36b}
.shelf.drop-ok{box-shadow:inset 0 0 0 3px #7bd8b2}
.shelf .ledge{height:calc(var(--slot)*.18);margin:0 -8px;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#f7a9c0,#ee8fac)}
.back{position:absolute;top:3px;left:8px;right:8px;display:flex;justify-content:space-around;pointer-events:none}
.back span{font-size:calc(var(--slot)*.34);opacity:.45;filter:saturate(.6);width:var(--slot);text-align:center}
.more{position:absolute;top:-9px;right:4px;background:#b48ad8;color:#fff;font-size:11px;font-weight:800;border-radius:99px;padding:2px 6px;pointer-events:none}
.row{display:flex;gap:2px}
.slot{width:var(--slot);height:calc(var(--slot)*1.08);display:flex;align-items:flex-end;justify-content:center;border-radius:12px 12px 4px 4px;background:rgba(255,255,255,.45)}
.item{width:calc(var(--slot)*.94);height:calc(var(--slot)*.94);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:calc(var(--slot)*.62);line-height:1;background:var(--c,#fff);box-shadow:0 3px 0 rgba(0,0,0,.08),inset 0 -3px 0 rgba(0,0,0,.05);cursor:grab;touch-action:none;transition:transform .15s}
.item.sel{transform:translateY(-10px) scale(1.08);box-shadow:0 10px 12px rgba(224,98,138,.3)}
.item.dim{opacity:.25}
.item.hint{animation:hintp .6s ease-in-out infinite}
@keyframes hintp{0%,100%{transform:scale(1)}50%{transform:scale(1.15) translateY(-4px)}}
.item.pop{animation:pop .32s ease-in forwards}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(0);opacity:0}}
.reveal .item{animation:rev .3s ease-out}
@keyframes rev{0%{transform:translateY(-14px) scale(.6);opacity:.3}100%{transform:none;opacity:1}}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-60%) scale(1.15);box-shadow:0 12px 20px rgba(0,0,0,.18)}
.spark{position:fixed;z-index:40;pointer-events:none;font-size:18px;animation:spark .6s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.boosters{display:flex;justify-content:space-around;padding:8px 10px calc(env(safe-area-inset-bottom) + 12px)}
.booster{position:relative;border:0;background:#fff;border-radius:18px;width:74px;height:66px;box-shadow:0 4px 0 #f3d3de;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);cursor:pointer}
.booster:active{transform:translateY(3px);box-shadow:0 1px 0 #f3d3de}
.booster.empty{opacity:.5}
.b-ic{font-size:24px}.b-tx{font-size:13px;font-weight:700}
.badge{position:absolute;top:-6px;right:-4px;background:#ff7aa0;color:#fff;font-size:12px;font-weight:800;border-radius:99px;min-width:22px;padding:2px 6px}
.combo{position:absolute;left:0;right:0;top:32%;text-align:center;font-size:34px;font-weight:900;color:#ff6f96;text-shadow:0 3px 0 #fff,0 0 12px #fff;pointer-events:none;opacity:0;z-index:30}
.combo.show{animation:combo .9s ease-out}
@keyframes combo{0%{opacity:0;transform:scale(.5)}20%{opacity:1;transform:scale(1.15)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-30px)}}
.toast{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(107,74,90,.88);color:#fff;padding:8px 16px;border-radius:99px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;z-index:30}
.toast.show{opacity:1}
.modal{position:absolute;inset:0;background:rgba(107,74,90,.35);display:flex;align-items:center;justify-content:center;z-index:60;backdrop-filter:blur(3px)}
.modal.hidden{display:none}
.card{background:#fff;border-radius:28px;width:min(86%,360px);padding:24px 20px;text-align:center;animation:cardin .35s cubic-bezier(.3,1.6,.6,1)}
@keyframes cardin{from{transform:scale(.6);opacity:0}}
.card h2{margin:0 0 6px;font-size:26px;color:#e0628a}
.card p{margin:6px 0 14px;font-size:15px;opacity:.8}
.stars{font-size:44px;letter-spacing:6px;margin:6px 0}
.stars .off{filter:grayscale(1);opacity:.3}
.stars span{display:inline-block;animation:starin .4s backwards}
@keyframes starin{from{transform:scale(0) rotate(-90deg)}}
.card .big-btn{animation:none;margin-top:6px}
.card .soft-btn{margin-top:10px}
.reward{background:#fff4d6;border-radius:14px;padding:8px;font-size:14px;margin:8px 0}
#confetti{position:absolute;inset:0;pointer-events:none;z-index:70}