:root{font-family:Inter,system-ui,sans-serif;color:#fff;background:#06182d}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit;color:inherit}.shell{width:min(440px,100%);min-height:100svh;margin:auto;padding:max(16px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));background:linear-gradient(#06182d,#092543);touch-action:none;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;gap:8px}h1{margin:2px 0 10px}small{color:#35c9ff;letter-spacing:.25em;font-weight:800}header button,.piece,.modal button{border:0;background:#ffffff12;border-radius:14px}header button{padding:10px 12px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stats div{text-align:center;padding:9px;border-radius:16px;background:#ffffff12;font-size:10px;letter-spacing:.12em;color:#9dafc1}.stats strong{display:block;color:#fff;font-size:24px}.combo{height:30px;text-align:center;padding-top:7px;color:#ffd15a;font-weight:900}.board{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:10px;border-radius:26px;background:#15385f;box-shadow:0 18px 40px #0005}.cell{display:block;aspect-ratio:1;border-radius:5px;background:#0a2543;box-shadow:inset 0 1px 2px #ffffff18;transition:.12s}.ghost{box-shadow:inset 0 0 0 2px #fffc}.bad{background:#ff5c6070;box-shadow:inset 0 0 0 2px #f77}.clearfx .cell{animation:pulse .22s ease}.popup{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:25px;text-shadow:0 3px 10px #000;animation:pop .4s ease;pointer-events:none}.hint{text-align:center;color:#92a5b8;font-size:11px}.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.piece{position:relative;height:100px;touch-action:none}.piece:disabled{opacity:.1}.block{position:absolute;width:20px;height:20px;left:calc(var(--x)*22px);top:calc(var(--y)*22px);border-radius:5px;background:var(--color);box-shadow:inset 0 2px 2px #ffffff60,0 3px 6px #0005}.piece .block{left:calc(50% - 30px + var(--x)*22px);top:calc(50% - 20px + var(--y)*22px)}.floating{position:fixed;z-index:20;pointer-events:none;transform:translate(-50%) scale(1.35);filter:drop-shadow(0 8px 8px #0007);width:110px;height:100px}.floating .block{left:calc(25px + var(--x)*22px);top:calc(18px + var(--y)*22px)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#03101ddd;display:grid;place-items:center;padding:24px}.modal section{width:min(350px,100%);background:#12375d;border-radius:30px;padding:26px;text-align:center;box-shadow:0 20px 60px #0008}.modal h2{font-size:28px;margin:8px}.modal button{display:block;width:100%;padding:14px;margin-top:12px;text-align:left}.modal button strong{float:right;color:#35c9ff}.modal #close,.modal #again{text-align:center;background:#35c9ff;color:#06203a;font-weight:900}.gem{font-size:40px}@keyframes pulse{50%{transform:scale(.65);filter:brightness(1.8)}}@keyframes pop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.15)}to{opacity:0;transform:translateY(-20px)}}.particles{position:absolute;top:50%;right:50%;bottom:50%;left:50%;pointer-events:none}.particles i{position:absolute;width:7px;height:7px;border-radius:2px;background:hsl(calc(var(--i)*41deg) 90% 62%);animation:burst .48s ease-out forwards;transform:rotate(calc(var(--i)*20deg)) translate(8px)}@keyframes burst{to{opacity:0;transform:rotate(calc(var(--i)*20deg)) translate(105px) scale(.3)}}@media (max-height:720px){.shell{padding-top:8px}.piece{height:84px}.combo{height:24px;padding-top:3px}.hint{margin:8px 0}.stats div{padding:6px}.stats strong{font-size:20px}}