:root{font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;color:#fff;--ink:#251657;--board-size:min(calc(100vw - 34px),420px,calc(100dvh - 360px));--gap:4px;--cell:calc((var(--board-size) - 28px) / 6)}
*{box-sizing:border-box}html{height:100%;background:#23165d}body{min-width:300px;min-height:100%;margin:0;background:radial-gradient(circle at 12% 15%,#6a38bf 0,transparent 28%),radial-gradient(circle at 88% 82%,#4b2bb4 0,transparent 34%),linear-gradient(165deg,#28176c,#1a1554 70%,#25136b);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.23;background-image:radial-gradient(#9883ed 1px,transparent 1px);background-size:31px 31px;mask-image:linear-gradient(transparent,#000)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #fff;outline-offset:3px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.app{position:relative;min-height:100dvh;width:min(100%,560px);margin:auto;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom)}.screen{min-height:100dvh;padding:18px 0 30px}.kicker{text-transform:uppercase;letter-spacing:.17em;font-weight:900;font-size:.7rem;color:#c9b9ff;margin:0 0 5px}.home{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.home-art{position:absolute;inset:5% 0 auto;height:270px;pointer-events:none}.home-art span{position:absolute;display:grid;place-items:center;width:66px;height:66px;border-radius:18px;font-size:2rem;font-weight:1000;box-shadow:inset 0 7px 3px #ffffff69,inset 0 -8px 0 #0002,0 10px 20px #10083f66;transform:rotate(-13deg)}.home-art span:nth-child(1){top:7%;left:12%;background:#ffcb32}.home-art span:nth-child(2){top:28%;right:8%;background:#ff5b80;transform:rotate(12deg)}.home-art span:nth-child(3){top:66%;left:4%;background:#35cdf0;transform:rotate(16deg)}.home-art span:nth-child(4){top:84%;right:12%;background:#8bdc4b}h1{font-size:clamp(4.6rem,18vw,7rem);line-height:.82;letter-spacing:-.08em;margin:10px 0 24px;text-shadow:0 6px 0 #1a0c55,0 14px 23px #0c083e99;transform:rotate(-3deg)}h1 em{font-style:normal;color:#ffcf35}.home-description{font-size:1.12rem;line-height:1.5;font-weight:750;color:#e5dcff;margin:0 0 28px}.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,330px)}.button{border:0;border-radius:18px;min-height:52px;color:#fff;font-weight:900;box-shadow:inset 0 4px 0 #ffffff58,inset 0 -5px 0 #0002,0 7px 0 #120c46;transition:transform .1s,filter .1s}.button:active,.icon-button:active,.control-button:active{transform:translateY(3px);filter:brightness(.95)}.button-primary{background:linear-gradient(#ffdf46,#ffae20);color:#553200}.button-secondary{background:linear-gradient(#8052e1,#5c35c1)}.button-large{grid-column:1/-1;min-height:68px;font-size:1.45rem}.progress-copy{font-size:.82rem;font-weight:800;color:#c2b2f7;margin:28px 0 0}.page-header,.game-header{display:flex;align-items:center;gap:14px}.page-header>div,.game-title-wrap{flex:1}.page-header h2,.game-header h2{margin:0;font-size:2rem;line-height:1.05;letter-spacing:-.04em}.icon-button{width:48px;height:48px;flex:none;display:grid;place-items:center;border:0;border-radius:16px;background:#5b38bd;color:white;font-size:2rem;font-weight:700;box-shadow:inset 0 3px 0 #ffffff43,inset 0 -4px 0 #0003,0 4px 0 #140d4c}.levels-intro{line-height:1.45;color:#d6cafd;font-weight:650;margin:22px 3px}.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.level-button{aspect-ratio:1;border:0;border-radius:15px;background:linear-gradient(#8464d5,#6341b9);color:white;font-weight:1000;font-size:1.3rem;box-shadow:inset 0 3px 0 #ffffff50,inset 0 -5px 0 #0003,0 4px 0 #150d4a;position:relative}.level-button.completed{background:linear-gradient(#ffdd46,#ffad22);color:#613d04}.level-button small{position:absolute;right:3px;top:1px;color:white;font-size:.66rem}.game{padding-top:12px}.game-header h2{font-size:1.65rem}.stats{display:grid;grid-template-columns:1fr .85fr 1fr;gap:8px;margin:16px 0 8px}.stat{border:1px solid #ffffff26;border-radius:15px;background:#ffffff17;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center}.stat small{color:#c9b9ff;text-transform:uppercase;font-size:.63rem;font-weight:900;letter-spacing:.12em}.stat strong{font-size:1.18rem;line-height:1.12}.stat-goal{background:#ffcb36;color:#513400;border-color:#ffe585}.stat-goal small{color:#724700}.status{min-height:31px;text-align:center;font-size:.8rem;font-weight:750;color:#cfc2fc;margin:4px 0}.status.error{color:#ffadbb}.status.success{color:#b9f79a}.board-wrap{display:flex;justify-content:center}.board{width:var(--board-size);height:var(--board-size);display:grid;grid-template-columns:repeat(6,var(--cell));grid-template-rows:repeat(6,var(--cell));gap:var(--gap);padding:var(--gap);border-radius:19px;background:#100b3a;box-shadow:0 0 0 3px #7156cf,0 8px 0 #100934,0 18px 28px #0a06299e;touch-action:none}.board-cell{display:grid;place-items:center;position:relative;border:0;padding:0;border-radius:8px;background:#352675;color:#a997e3;font-size:clamp(.6rem,2.2vw,.85rem);font-weight:900;user-select:none}.board-cell.target{background:#fff0a0;color:#593a03;box-shadow:inset 0 0 0 3px #ffc629,0 0 12px #ffc62966}.board-cell.preview{background:#6c58b4}.board-cell.preview-invalid{background:#b4507a}.board-cell .tile{position:absolute;inset:0;z-index:1}.tile{border-radius:8px;background:var(--color);box-shadow:inset 0 4px 1px #ffffff87,inset 0 -6px 0 #0002,0 2px 2px #06032266}.tile:before{content:"";position:absolute;top:14%;left:17%;width:25%;height:10%;border-radius:100%;background:#ffffffb8;transform:rotate(-35deg)}.tile.selected{box-shadow:inset 0 0 0 3px #fff,inset 0 4px 1px #ffffff87,inset 0 -6px 0 #0002,0 2px 2px #06032266}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 16px}.control-button{border:0;border-radius:14px;min-height:56px;background:linear-gradient(#8061d5,#5b39b7);box-shadow:inset 0 3px 0 #ffffff50,inset 0 -4px 0 #0003,0 4px 0 #110a41;color:#fff;display:flex;align-items:center;justify-content:center;gap:5px;font-weight:900}.control-button span{font-size:1.6rem;line-height:1}.control-button small{font-size:.75rem}.tray-heading{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 8px}.tray-heading h3{margin:0;font-size:1rem}.tray-heading span{font-size:.75rem;color:#c9b9ff;font-weight:800}.tray{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-height:145px}.tray-piece{position:relative;min-height:70px;border:2px solid #ffffff26;border-radius:13px;background:#ffffff18;touch-action:none;display:grid;place-items:center;color:white}.tray-piece.selected{border-color:#fff19a;background:#ffffff30}.tray-piece.placed{opacity:.42}.mini-shape{position:relative;width:64px;height:53px;display:block}.mini-tile{position:absolute;width:12px;height:12px;border-radius:3px;background:var(--color);box-shadow:inset 0 2px #ffffff80,inset 0 -2px #0002}.tray-piece-name{position:absolute;right:5px;bottom:3px;font-size:.58rem;font-weight:900;color:#d9d0fc}.drag-ghost{position:fixed;z-index:30;pointer-events:none;filter:drop-shadow(0 9px 5px #0b063b88)}.drag-ghost .tile{position:absolute;width:var(--cell);height:var(--cell)}.drag-ghost.invalid{opacity:.62}.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:#090625ba;backdrop-filter:blur(5px)}.dialog{position:relative;width:min(100%,390px);max-height:min(85dvh,700px);overflow:auto;border:3px solid #a487fb;border-radius:26px;background:linear-gradient(#5036aa,#34217c);box-shadow:0 12px 0 #120b45,0 25px 50px #07021f99;padding:26px 22px 24px;text-align:center}.dialog-close{position:absolute;right:10px;top:10px;width:40px;height:40px;font-size:1.55rem}.dialog h2{font-size:2rem;margin:5px 36px 12px;line-height:1.05}.dialog p{line-height:1.5;color:#e2d9ff;font-weight:650}.dialog .button{width:100%;margin-top:10px}.dialog .button + .button{margin-top:12px}.dialog-emoji{font-size:3rem;margin:5px 0}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#ffffff17;border-radius:14px;padding:10px 12px;margin:12px 0;font-weight:850;text-align:left}.toggle{min-width:70px;min-height:42px;border:0;border-radius:12px;background:#7764ad;color:#fff;font-weight:900}.toggle.on{background:#ffca38;color:#503400}.help-steps{text-align:left;padding-left:20px;line-height:1.55;font-weight:650;color:#e3d9ff}.help-steps li{margin:8px 0}@media(max-width:380px){:root{--board-size:min(calc(100vw - 24px),calc(100dvh - 340px))}.app{padding-left:10px;padding-right:10px}.control-button small{display:none}.tray-piece{min-height:60px}.level-grid{gap:6px}.level-button{border-radius:11px}}@media(max-height:720px){:root{--board-size:min(calc(100vw - 34px),360px,calc(100dvh - 310px))}.controls{margin-top:13px}.tray-piece{min-height:60px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}