*{box-sizing:border-box}html,body{margin:0;overflow:hidden;background:#0b1420;color:#dee8df;font-family:Arial,sans-serif}#stage{position:relative;width:1600px;height:900px;overflow:hidden;transform-origin:top left;isolation:isolate}.landscape,.shade{position:absolute;inset:0;pointer-events:none}.landscape{background:var(--art) center 70%/cover;opacity:.5;z-index:-3}.shade{background:radial-gradient(ellipse at 52% 47%,#061620cc 0%,#07152188 45%,#04101a33 80%),linear-gradient(0deg,#07131fdd,transparent 35%,transparent 80%,#07131f99);z-index:-2}header{position:absolute;top:48px;left:56px;right:56px;display:flex;justify-content:space-between;font:14px ui-monospace,monospace;letter-spacing:3px;color:#bac9d0}#board{position:absolute;left:400px;top:18px;width:800px;height:800px;--unit:114.285714px}#tiles,#lines,#lifted{position:absolute;inset:0;width:100%;height:100%}#lines{z-index:2;overflow:visible}#lifted{z-index:4;pointer-events:none;filter:drop-shadow(0 0 16px #b3edc16b)}.cell{position:absolute;width:14.285714%;height:14.285714%;isolation:isolate}.cell::before{content:"";position:absolute;inset:7% 5% 11%;border-radius:9%;z-index:-1}.cell.void::before{inset:48.7%;background:#c6d5d542;border-radius:50%}.cell.stone::before{background:linear-gradient(145deg,#7e9d9b,#526f73);border:1px solid #a3bcb879;box-shadow:inset 0 2px 0 #c9d6c268,0 6px 0 #293f49,0 8px 0 #192f38,0 14px 15px #00111d7a}.cell.stone::after{content:"";position:absolute;left:20%;bottom:26%;width:27%;height:1px;background:#d3e1cb26;box-shadow:14px -18px 0 #d3e1cb16}.cell.bridge::before{background:linear-gradient(145deg,#cceaca,#8bc1ac);border:1px solid #e6f9d6bb;box-shadow:inset 0 2px 0 #edffe3,0 5px 0 #5b8c80,0 8px 0 #325c60,0 0 28px #b0e2ae32}.cell.bridge::after{content:"";position:absolute;width:32%;height:1px;background:#39736244;left:34%;top:47%;transform:rotate(-45deg)}.cell.glass::before{background:repeating-linear-gradient(135deg,#76bbd54a 0 8px,#3e7eaa45 8px 10px);border:1.5px solid #9ed9e2a8;box-shadow:inset 0 2px 0 #b4f0ef88,0 5px 0 #275269,0 8px 0 #163447,0 0 22px #509eca20}.door{position:absolute;width:40%;height:55%;left:30%;top:18%;border:3px solid #ffdca0;border-bottom-width:1px;background:linear-gradient(180deg,#ffda863b,#f4c78291);box-shadow:0 0 32px #f0c17588,inset 0 0 8px #ffdfb17d;border-radius:40% 40% 2px 2px}.locked .door{border-color:#a48f6b;background:#162c36;box-shadow:none}.mark{position:absolute;width:38%;height:38%;left:31%;top:27%;border-radius:12%;background:#d0edc9;box-shadow:0 0 18px #b8eec344;color:#315447;display:grid;place-items:center;font:20px ui-monospace,monospace}.lantern{position:absolute;inset:0;display:grid;place-items:center;color:#e5b974;font-size:46px;text-shadow:0 0 20px #ffcd7999;z-index:2}.lantern.lit{color:#fff6c0;text-shadow:0 0 15px #ffcf80,0 0 35px #ffbb56}#mote{position:absolute;left:0;top:0;width:14.285714%;height:14.285714%;z-index:5;will-change:transform}#mote img{position:absolute;width:116%;height:116%;left:-8%;bottom:6%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 2px #00131b66) drop-shadow(0 0 15px #ffdda04b)}#mote i{position:absolute;top:6%;left:57%;width:9px;height:9px;border-radius:50%;background:#ffe2a5;box-shadow:0 0 22px 10px #ffd59022;opacity:.6}footer{position:absolute;bottom:45px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:28px;font:16px ui-monospace,monospace;letter-spacing:1px}.phase{color:#829498;transition:color .3s}.phase b{font:400 20px Arial,sans-serif;letter-spacing:0;margin-left:10px}.phase.active{color:#dcf2da}.rule{width:65px;height:1px;background:#bfd9d033}#fireflies{position:absolute;inset:0;pointer-events:none;z-index:-1}#fireflies i{position:absolute;width:3px;height:3px;border-radius:50%;background:#b9d9dc;box-shadow:0 0 9px #b9d9dc;opacity:.25}.still header{font-size:16px}.still #board{width:780px;height:780px;left:410px;top:110px}.still footer{display:none}.still .landscape{opacity:.6}.still .shade{background:radial-gradient(ellipse at center,#061620b5,transparent 80%),linear-gradient(0deg,#07131fb0,transparent 40%,#07131f44)}

@media(max-width:600px){header,footer{display:none}#board{left:250px;top:-72px;width:1100px;height:1100px}}
