:root{--bg0: #070b18;--bg1: #10182c;--panel: rgba(18, 28, 52, .78);--line: rgba(140, 180, 255, .18);--text: #e8eefc;--muted: #8b97b8;--accent: #6ee7ff;--gold: #ffd36a;--cell: 68px;--gap: 10px;--radius: 16px;--c1: #ff5d6c;--c2: #ff8a4c;--c3: #ffd24a;--c4: #7dff8a;--c5: #4de3ff;--c6: #4f8cff;--c7: #8b6dff;--c8: #ff6ad5}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:radial-gradient(1200px 600px at 10% -10%,rgba(80,140,255,.18),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(255,90,180,.12),transparent 50%),var(--bg0);color:var(--text);font-family:Segoe UI,PingFang SC,Hiragino Sans GB,Noto Sans SC,sans-serif}body{overflow-x:hidden}#app{max-width:520px;margin:0 auto;padding:20px 16px 40px}.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}h1{margin:0;font-size:22px;letter-spacing:.04em}.sub{margin:4px 0 0;color:var(--muted);font-size:13px}.icon-btn{width:40px;height:40px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;cursor:pointer;font-size:16px}.icon-btn:hover{border-color:var(--accent)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 6px;text-align:center}.stat b{display:block;font-size:16px;color:var(--gold)}.stat span{color:var(--muted);font-size:11px}.hint{min-height:42px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#6ee7ff14;border:1px solid rgba(110,231,255,.18);color:#c9e9ff;font-size:13px;line-height:1.5}.hint.warn{background:#ff5d6c1f;border-color:#ff5d6c59;color:#ffd0d4}.board-wrap{position:relative;width:calc(var(--cell) * 4 + var(--gap) * 3);margin:0 auto 16px;touch-action:none;-webkit-user-select:none;user-select:none}.board-bg{display:grid;grid-template-columns:repeat(4,var(--cell));grid-template-rows:repeat(4,var(--cell));gap:var(--gap)}.slot{border-radius:var(--radius);background:#ffffff09;border:1px dashed rgba(140,180,255,.16)}.slot.target{background:#6ee7ff12;border-style:solid;border-color:#6ee7ff38}.links{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.tile{position:absolute;left:0;top:0;width:var(--cell);height:var(--cell);border-radius:var(--radius);display:grid;place-items:center;font-size:28px;font-weight:800;color:#081018;cursor:grab;z-index:2;transform:translate(var(--x),var(--y));transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;box-shadow:0 8px 18px #00000047}.tile:active{cursor:grabbing}.tile.selected{z-index:3;transform:translate(var(--x),var(--y)) scale(1.05);filter:brightness(1.12);box-shadow:0 0 0 3px #ffffff8c,0 10px 22px #00000059}.tile.snap{animation:snap .35s ease}.tile.n1{background:linear-gradient(160deg,#ff8b96,var(--c1))}.tile.n2{background:linear-gradient(160deg,#ffb07a,var(--c2))}.tile.n3{background:linear-gradient(160deg,#ffe58a,var(--c3))}.tile.n4{background:linear-gradient(160deg,#b6ffbc,var(--c4))}.tile.n5{background:linear-gradient(160deg,#9af1ff,var(--c5))}.tile.n6{background:linear-gradient(160deg,#8eb6ff,var(--c6))}.tile.n7{background:linear-gradient(160deg,#b8a4ff,var(--c7))}.tile.n8{background:linear-gradient(160deg,#ff9ee4,var(--c8))}@keyframes snap{0%{transform:translate(var(--x),var(--y)) scale(1)}40%{transform:translate(var(--x),var(--y)) scale(1.12)}to{transform:translate(var(--x),var(--y)) scale(1)}}.controls{display:flex;gap:8px;margin-bottom:16px}.btn{flex:1;height:42px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;cursor:pointer;font-size:14px}.btn:hover{border-color:var(--accent)}.btn.primary{background:linear-gradient(180deg,#5eead4,#22c3c3);color:#042024;border:none;font-weight:700}.levels{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px}.lv{height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;position:relative}.lv.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.lv.cleared:after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--c4)}.extra{display:flex;gap:8px}.help{margin-top:16px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;color:var(--muted);font-size:12px;line-height:1.7}.help b{color:var(--text)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0408109e;display:grid;place-items:center;padding:20px;z-index:20}.modal{width:min(360px,100%);background:#121a30;border:1px solid var(--line);border-radius:18px;padding:22px 18px;text-align:center}.modal h2{margin:0 0 8px}.modal p{margin:0 0 16px;color:var(--muted)}.modal .row{display:flex;gap:8px}.hidden{display:none}@media(max-width:420px){:root{--cell: 62px;--gap: 8px}h1{font-size:20px}}