:root{--bg:#F6F0E3;--panel:#FBF7EE;--ink:#2B2A33;--sub:#8A8170;--line:#2F5BD3;--move:#F2A023;--bad:#E0523F;--dot:#E2D7C0;--btn:#2F5BD3;--btnInk:#fff;--shadow:0 10px 30px rgba(60,45,20,.12)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background .35s}
#app{position:relative;height:100%;max-width:560px;margin:0 auto;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .3s}
.screen.active{opacity:1;pointer-events:auto;transform:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.icon-btn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--panel);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .15s}
.icon-btn:active{transform:scale(.9)}
.icon-btn svg,.hint svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg .fill{fill:var(--ink);stroke:none}
.icon-btn .mute{display:none}
.muted .icon-btn .mute{display:inline}.muted .icon-btn .wave{display:none}
.bar{display:flex;align-items:center;gap:10px;padding:12px 0 6px}
.bar h2{flex:1;font-size:20px;font-weight:800;letter-spacing:.2px;text-align:center}
#game .bar h2{text-align:left;padding-left:4px}
.bar-right{display:flex;gap:8px}
.count{min-width:42px;text-align:right;font-weight:800;color:var(--move)}
/* home */
.home-top{display:flex;justify-content:flex-end;padding-top:14px}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
#heroArt{width:200px;height:200px;border-radius:44px;box-shadow:var(--shadow)}
h1{font-size:46px;font-weight:900;letter-spacing:.5px;margin-top:22px;color:var(--ink)}
.tag{color:var(--sub);font-size:16px}
.home-actions{display:flex;flex-direction:column;gap:12px;align-items:center;padding-bottom:18px}
.btn{min-width:220px;padding:14px 22px;border-radius:18px;font-weight:800;font-size:18px;transition:transform .15s,box-shadow .15s}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--btn);color:var(--btnInk);box-shadow:0 8px 20px color-mix(in srgb,var(--btn) 35%,transparent)}
.btn.big{font-size:26px;padding:18px 40px;min-width:260px;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.btn.big span{font-size:14px;font-weight:700;opacity:.85;margin-top:4px}
.btn.ghost{background:var(--panel);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.how{text-align:center;color:var(--sub);font-size:14px;line-height:1.5;padding-bottom:26px}
/* levels */
.level-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:10px 2px 30px;align-content:start}
.lv{aspect-ratio:1;border-radius:16px;background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .15s}
.lv:active{transform:scale(.92)}
.lv small{font-size:10px;letter-spacing:1px;color:var(--move);height:12px}
.lv.done{background:color-mix(in srgb,var(--line) 12%,var(--panel))}
.lv.current{outline:3px solid var(--line)}
.lv.locked{opacity:.45;pointer-events:none}
.lv.locked svg{width:16px;height:16px;fill:var(--sub)}
/* game */
.status{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 8px}
.lives{display:flex;gap:4px}
.lives svg{width:22px;height:22px;transition:transform .3s,opacity .3s}
.lives svg.lost{opacity:.22;transform:scale(.8)}
.left{font-weight:700;color:var(--sub);font-size:14px}
.hint{display:flex;align-items:center;gap:4px;background:var(--panel);padding:7px 12px;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hint b{font-size:15px}
.hint svg{stroke:var(--move)}
.hint:disabled{opacity:.4}
.board-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding-bottom:16px}
#board{background:var(--panel);border-radius:20px;box-shadow:var(--shadow);touch-action:none}
.toast{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:14px;font-size:14px;font-weight:700;max-width:88%;text-align:center;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:.94;transform:translate(-50%,0)}
.overlay{position:absolute;inset:0;background:rgba(20,18,12,.35);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:5;backdrop-filter:blur(3px)}
.overlay.show{opacity:1;pointer-events:auto}
.card{background:var(--panel);border-radius:28px;padding:28px 24px;width:min(86%,340px);display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.25);transform:scale(.85);transition:transform .4s cubic-bezier(.2,1.6,.4,1)}
.overlay.show .card{transform:scale(1)}
.card h3{font-size:26px;font-weight:900}
.card p{color:var(--sub);text-align:center;margin-bottom:8px}
.card .btn{width:100%}
.stars{display:flex;gap:6px;margin-bottom:4px}
.stars i{width:46px;height:46px;background:var(--dot);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transform:scale(0);transition:transform .45s cubic-bezier(.2,1.8,.4,1)}
.stars i:nth-child(2){width:58px;height:58px;margin-top:-10px}
.overlay.show .stars i{transform:scale(1)}
.stars i.on{background:linear-gradient(160deg,#FFD66B,var(--move))}
.overlay.show .stars i:nth-child(2){transition-delay:.15s}.overlay.show .stars i:nth-child(3){transition-delay:.3s}
.drop-big{width:56px;height:56px;background:var(--line);opacity:.3;clip-path:path("M28 4C28 4 8 26 8 38a20 20 0 0 0 40 0C48 26 28 4 28 4z")}
#fx{position:absolute;inset:0;pointer-events:none;z-index:6;width:100%;height:100%}