*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overscroll-behavior:none;touch-action:none}body{min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#fff;background:radial-gradient(circle at 50% -12%,rgba(255,255,255,.16),transparent 28%),linear-gradient(160deg,#0f172a,#1e1b4b 48%,#020617);display:flex;justify-content:center;-webkit-user-select:none;user-select:none}#app{width:100%}.phone{width:min(430px,100vw);min-height:100vh;padding:max(12px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:11px}.top{display:flex;justify-content:space-between;align-items:center;gap:10px}.title{font-size:22px;font-weight:950;letter-spacing:-.8px;line-height:1.05}.sub{margin-top:4px;color:#c7d2fe;font-size:12px;font-weight:750}.badges{display:flex;gap:7px}.badge{min-width:58px;text-align:center;padding:7px 8px;border-radius:16px;background:#ffffff1c;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 18px #0000002e}.badge span{display:block;font-size:10px;color:#c7d2fe;font-weight:850}.badge b{display:block;font-size:18px;margin-top:1px}.ruleCard{border-radius:18px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);padding:10px 11px;color:#dbeafe;font-size:12px;line-height:1.45;font-weight:750}.ruleCard b{color:#fff}.boardWrap{position:relative;padding:9px;background:#ffffff14;border:1px solid rgba(255,255,255,.14);border-radius:24px;box-shadow:inset 0 1px #ffffff1f,0 18px 34px #00000047}#board{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:var(--cell-gap, 6px);width:100%;aspect-ratio:1 / 1;touch-action:none}.anim-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(7,1fr);gap:var(--cell-gap, 6px);pointer-events:none;z-index:2}.magnet-ghost{display:flex;align-items:center;justify-content:center;z-index:3}.magnet-ghost .magnet{width:82%;height:82%}.magnet-slide{animation:magnet-slide .4s cubic-bezier(.22,1,.36,1) forwards}.magnet-fall{animation:magnet-fall .42s cubic-bezier(.4,0,.85,.2) forwards}@keyframes magnet-slide{0%{transform:translate(0)}to{transform:translate(calc(var(--d-c) * (100% + var(--cell-gap, 6px))),calc(var(--d-r) * (100% + var(--cell-gap, 6px))))}}@keyframes magnet-fall{0%{transform:translate(0) scale(1);opacity:1}70%{opacity:.85}to{transform:translate(calc(var(--fall-dc) * (130% + var(--cell-gap, 6px))),calc(var(--fall-dr) * (130% + var(--cell-gap, 6px)))) scale(.55);opacity:0}}.cell{border-radius:12px;background:#ffffff14;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;position:relative;transition:transform .12s,background .12s,opacity .12s,box-shadow .12s;overflow:hidden}.cell.preview{background:#ffffff3d;transform:scale(.92);box-shadow:0 0 0 2px #ffffff38 inset}.cell.bad{background:#f8717159;transform:scale(.92)}.magnet{width:82%;height:82%;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:950;letter-spacing:-.5px;box-shadow:inset 0 3px 4px #ffffff47,inset 0 -6px 10px #00000040,0 8px 16px #00000040;border:1px solid rgba(255,255,255,.25);position:relative}.magnet.N{background:linear-gradient(145deg,#60a5fa,#1d4ed8)}.magnet.S{background:linear-gradient(145deg,#fca5a5,#dc2626)}.magnet:after{content:"";position:absolute;top:13%;right:13%;bottom:13%;left:13%;border-radius:999px;border:1px solid rgba(255,255,255,.18);pointer-events:none}.magnet.small{width:64px;height:64px;font-size:28px}.cell.cell-locked{pointer-events:none}.cell-pop{background:#fbbf2438;box-shadow:0 0 0 2px #fbbf2473 inset}.magnet-pop{animation:magnet-pop .4s cubic-bezier(.34,1.4,.64,1) forwards}@keyframes magnet-pop{0%{transform:scale(1);opacity:1;filter:brightness(1)}35%{transform:scale(1.18);filter:brightness(1.35)}to{transform:scale(0);opacity:0;filter:brightness(2)}}.nextPanel{display:grid;grid-template-columns:82px 1fr 92px;align-items:center;gap:10px;min-height:92px;border-radius:24px;padding:11px;background:#ffffff1a;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 24px #0003}.nextBox{height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:#0003;border:1px solid rgba(255,255,255,.11)}.nextText b{display:block;font-size:15px;margin-bottom:4px}.nextText span{display:block;color:#c7d2fe;font-size:12px;line-height:1.35;font-weight:720}.toggleBox{display:grid;gap:7px}button{border:0;border-radius:17px;color:#0f172a;background:#fff;font-size:14px;font-weight:950;box-shadow:0 10px 20px #00000038;padding:12px 9px;cursor:pointer}button.secondary{color:#fff;background:#ffffff1f;border:1px solid rgba(255,255,255,.14)}.toast{min-height:22px;text-align:center;color:#dbeafe;font-size:13px;font-weight:850}.bottomBtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#030712c7;display:none;align-items:center;justify-content:center;padding:20px}.modal{width:min(350px,92vw);border-radius:28px;background:#111827;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 56px #00000073;padding:23px;text-align:center}.modal h2{font-size:28px;margin:0 0 8px}.modal p{color:#c7d2fe;line-height:1.5;margin:0 0 18px;font-weight:650}.modalBtns{display:grid;grid-template-columns:1fr 1fr;gap:9px}@media (max-height: 730px){.phone{gap:8px;padding-top:8px}.ruleCard{display:none}.nextPanel{min-height:82px;grid-template-columns:72px 1fr 82px;padding:9px}.nextBox{height:64px}.magnet.small{width:56px;height:56px;font-size:24px}.nextText span{font-size:11px}button{padding:10px 7px}}