:root{--bg-0: #020611;--bg-1: #08172d;--bg-2: #123257;--panel: rgba(8, 19, 35, .78);--panel-border: rgba(152, 216, 255, .24);--text: #e9f6ff;--muted: #95b7d1;--gold: #ffd88a;--size: 8;--cell: min(9vw, 66px);--gap: 6px}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Sora,Noto Sans SC,PingFang SC,sans-serif;color:var(--text);background:radial-gradient(circle at 15% 20%,rgba(77,163,255,.22),transparent 40%),radial-gradient(circle at 80% 90%,rgba(141,80,255,.2),transparent 35%),linear-gradient(145deg,var(--bg-0),var(--bg-1) 45%,var(--bg-2));display:grid;place-items:center;padding:20px;overflow-x:hidden}.starfield,.starfield:before,.starfield:after{position:fixed;inset:0;content:"";pointer-events:none;background-repeat:repeat;opacity:.45}.starfield{background-image:radial-gradient(2px 2px at 18% 25%,#fff,transparent),radial-gradient(1.6px 1.6px at 70% 60%,#fff,transparent),radial-gradient(1.4px 1.4px at 44% 15%,#fff,transparent),radial-gradient(1.7px 1.7px at 85% 35%,#fff,transparent);animation:drift 30s linear infinite}.starfield:before{background-image:radial-gradient(1.4px 1.4px at 12% 60%,rgba(255,255,255,.75),transparent),radial-gradient(1.3px 1.3px at 76% 21%,rgba(255,255,255,.75),transparent),radial-gradient(1.7px 1.7px at 56% 82%,rgba(255,255,255,.8),transparent);animation:drift 45s linear infinite reverse}.starfield:after{background-image:radial-gradient(2px 2px at 30% 45%,rgba(255,255,255,.6),transparent),radial-gradient(1.6px 1.6px at 88% 74%,rgba(255,255,255,.7),transparent),radial-gradient(1.4px 1.4px at 63% 10%,rgba(255,255,255,.55),transparent);animation:twinkle 4.2s ease-in-out infinite}@keyframes drift{0%{transform:translateY(0)}to{transform:translateY(-30px)}}@keyframes twinkle{0%,to{opacity:.35}50%{opacity:.7}}.app{width:min(96vw,860px);border:1px solid var(--panel-border);border-radius:18px;background:var(--panel);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);box-shadow:0 18px 44px #0000006b;padding:16px;position:relative}.top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}h1{margin:0;font-size:clamp(24px,4vw,34px);letter-spacing:.4px;color:#9de5ff;text-shadow:0 0 18px rgba(157,229,255,.35)}.sub{margin:4px 0 0;color:var(--muted);font-size:13px}.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.chip{padding:6px 11px;border-radius:999px;border:1px solid rgba(137,206,255,.36);background:#071629b8;font-size:13px;color:#e7f8ff}.tools{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 10px}button{border:1px solid rgba(157,227,255,.4);color:#e8f9ff;background:linear-gradient(180deg,#11385ffa,#081d32fa);border-radius:10px;padding:8px 12px;font-size:14px;cursor:pointer;transition:transform .14s ease,box-shadow .2s ease,border-color .2s ease}button:hover{transform:translateY(-1px);border-color:#bff2ffcc;box-shadow:0 8px 18px #50a9ff38}button.active{border-color:var(--gold);box-shadow:0 0 0 2px #ffd88a47 inset}button:disabled{cursor:not-allowed;opacity:.4;transform:none;box-shadow:none}.msg{min-height:22px;margin-bottom:10px;color:#bdeeff;font-size:14px}.board-wrap{position:relative;width:fit-content;margin:0 auto}.board-wrap.screen-shake{animation:screenShake .44s linear}.board{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(var(--size),var(--cell));grid-template-rows:repeat(var(--size),var(--cell));gap:var(--gap);padding:10px;border-radius:14px;border:1px solid rgba(119,204,255,.28);background:radial-gradient(circle at 50% 0%,rgba(22,110,179,.25),transparent 48%),linear-gradient(180deg,#08203af5,#061425f5);box-shadow:inset 0 0 24px #469eff29,0 8px 20px #00000038;touch-action:manipulation;-webkit-user-select:none;user-select:none}.board:after{content:"";position:absolute;inset:-8%;opacity:0;pointer-events:none;mix-blend-mode:screen}.board.tool-charge-supernova:after{background:radial-gradient(circle,rgba(255,176,107,.45),rgba(255,88,58,.08) 55%,transparent 72%);animation:boardPulse .55s ease-in-out infinite}.board.tool-release-supernova:after{background:radial-gradient(circle,rgba(255,240,189,.9),rgba(255,142,96,.26) 45%,transparent 72%);animation:boardFlash .62s ease-out 1}.board.tool-charge-blackhole:after{background:radial-gradient(circle,rgba(130,100,255,.38),rgba(66,32,122,.2) 45%,rgba(7,6,22,.5) 66%,transparent 74%);animation:boardPulse .7s ease-in-out infinite}.board.tool-release-blackhole:after{background:radial-gradient(circle,rgba(214,196,255,.5),rgba(89,56,160,.42) 35%,rgba(5,5,14,.85) 62%,transparent 73%);animation:boardVortex .9s ease-out 1}.cell{position:relative;border-radius:12px;border:1px solid rgba(158,222,255,.18);background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--tile-glow) 32%,transparent),transparent 68%),#03101ff2;overflow:hidden;box-shadow:inset 0 0 0 1px #82d8ff0f;transition:transform .14s ease,box-shadow .22s ease}.cell:before{content:"";position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;filter:var(--tile-filter, saturate(1.1) contrast(1.08));transform:scale(1.04)}.cell:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff2e,#0000002e);mix-blend-mode:screen;pointer-events:none}.cell.selected{transform:scale(1.06);box-shadow:0 0 0 2px #ffd88abf,0 0 20px #ffd88a59}.cell.clearing{animation:flare .35s ease forwards}.cell.nova{animation:nova .86s cubic-bezier(.16,.84,.27,1) forwards}.cell.hole{animation:hole 1s cubic-bezier(.17,.78,.3,1) forwards}.cell.warp:before{animation:warpStretch .78s cubic-bezier(.22,.7,.26,1) infinite;transform-origin:50% 50%}.cell.chroma:before{animation:chromaSplit .42s ease-in-out infinite alternate}.cell.chroma:after{background:linear-gradient(90deg,rgba(255,88,88,.22),transparent 28%,transparent 72%,rgba(76,175,255,.22)),linear-gradient(180deg,#ffffff29,#00000038)}.cell.spawn{animation:dropIn .24s ease}@keyframes flare{0%{transform:scale(1);opacity:1}55%{transform:scale(.7);opacity:.45}to{transform:scale(.2);opacity:0}}@keyframes nova{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(1.26);filter:brightness(1.75) saturate(1.4)}to{transform:scale(.08) rotate(18deg);opacity:0}}@keyframes hole{0%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.52) rotate(170deg);opacity:.9}to{transform:scale(.05) rotate(430deg);opacity:0}}@keyframes warpStretch{0%{transform:scale(1.02) skew(0);filter:var(--tile-filter, saturate(1.1) contrast(1.08))}50%{transform:scale(.84,1.28) skew(9deg);filter:var(--tile-filter, saturate(1.35) contrast(1.3)) blur(.4px)}to{transform:scale(1.06,.92) skew(-8deg);filter:var(--tile-filter, saturate(1.1) contrast(1.08))}}@keyframes chromaSplit{0%{transform:scale(1.06) translate(-1px);filter:var(--tile-filter, saturate(1.1) contrast(1.08)) drop-shadow(-2px 0 0 rgba(255,92,92,.45))}to{transform:scale(1.08) translate(1px);filter:var(--tile-filter, saturate(1.25) contrast(1.15)) drop-shadow(2px 0 0 rgba(88,186,255,.45))}}@keyframes dropIn{0%{transform:translateY(-14px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.particle-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.shockwave{position:absolute;inset:0;pointer-events:none;opacity:0}.shockwave:before{content:"";position:absolute;left:50%;top:50%;width:24%;height:24%;border-radius:999px;transform:translate(-50%,-50%) scale(.1);opacity:0}.shockwave.shock-supernova:before{border:3px solid rgba(255,201,137,.9);box-shadow:0 0 24px #ffa55ea6;animation:shockwaveBlast .85s ease-out forwards}.shockwave.shock-blackhole:before{border:3px solid rgba(172,142,255,.8);box-shadow:0 0 26px #7656e0b8;animation:shockwaveVortex .9s ease-out forwards}.particle{position:absolute;width:8px;height:8px;border-radius:999px;background:var(--color);transform:translate(-50%,-50%);animation:burst var(--dur) ease-out forwards;left:var(--x);top:var(--y)}.particle.charge{width:10px;height:10px;filter:blur(.4px) saturate(1.4)}.particle.supernova{width:12px;height:12px;box-shadow:0 0 18px #ffab58bf}.particle.blackhole{width:11px;height:11px;box-shadow:0 0 20px #8d70ffb8}@keyframes burst{0%{opacity:.95;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}}@keyframes shockwaveBlast{0%{opacity:.95;transform:translate(-50%,-50%) scale(.12)}to{opacity:0;transform:translate(-50%,-50%) scale(6.9)}}@keyframes shockwaveVortex{0%{opacity:.9;transform:translate(-50%,-50%) scale(.18) rotate(0)}to{opacity:0;transform:translate(-50%,-50%) scale(6.3) rotate(180deg)}}@keyframes screenShake{0%{transform:translate(0)}16%{transform:translate(-2px,1px)}32%{transform:translate(2px,-1px)}48%{transform:translate(-1px,-2px)}64%{transform:translate(2px,1px)}80%{transform:translate(-1px,2px)}to{transform:translate(0)}}@keyframes boardPulse{0%,to{opacity:.2;transform:scale(.95)}50%{opacity:.75;transform:scale(1.05)}}@keyframes boardFlash{0%{opacity:.15;transform:scale(.92)}35%{opacity:1;transform:scale(1.08)}to{opacity:0;transform:scale(1.18)}}@keyframes boardVortex{0%{opacity:.15;transform:scale(1) rotate(0)}45%{opacity:.8;transform:scale(1.08) rotate(130deg)}to{opacity:0;transform:scale(.82) rotate(260deg)}}.legend{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.6}.legend b{color:#daf5ff}.sources{margin-top:8px;color:#7dc8e7;font-size:12px;line-height:1.5}@media(max-width:560px){:root{--cell: min(10.4vw, 56px);--gap: 5px}.app{padding:12px}.chip{font-size:12px}button{font-size:13px;padding:8px 10px}}