*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{color:#333;overscroll-behavior:none;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);width:100%;height:100%;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}#loading{z-index:100;color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);flex-direction:column;justify-content:center;align-items:center;gap:20px;font-size:1.3em;display:flex;position:fixed;inset:0}#loading.hidden{display:none}.spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:48px;height:48px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#app{flex-direction:column;height:100dvh;display:flex}header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#fffffff2;flex-shrink:0;padding:8px 14px;box-shadow:0 2px 12px #0000001a}#title-row{justify-content:space-between;align-items:center;display:flex}header h1{color:#4a2b8a;font-size:1.25em}#stars{gap:3px;display:flex}.star{color:#ccc;font-size:20px;transition:transform .3s,color .3s}.star.earned{color:gold;animation:.5s popStar}@keyframes popStar{0%{transform:scale(0)}50%{transform:scale(1.4)}to{transform:scale(1)}}#info-row{justify-content:space-between;align-items:center;margin-top:4px;display:flex}#level-text{color:#666;font-size:.9em;font-weight:600}.header-btn{color:#764ba2;cursor:pointer;background:0 0;border:2px solid #764ba2;border-radius:20px;padding:4px 12px;font-size:.8em;font-weight:600;transition:all .2s}.header-btn:active{color:#fff;background:#764ba2}#btn-row{gap:8px;display:flex}#game{flex-direction:column;flex:1;gap:6px;min-height:0;padding:8px 10px;display:flex;overflow:hidden}#grid-wrapper{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}#grid{background:#ffffffeb;border:3px solid #ffffffb3;border-radius:10px;transition:box-shadow .4s;display:grid;overflow:hidden;box-shadow:0 4px 24px #0003}#grid.complete{box-shadow:0 0 30px #ffd70080,0 4px 24px #0003}#grid.complete .grid-cell{border-color:#0000}.grid-cell{background-color:#f0ebfa66;background-size:var(--bg-size);background-repeat:no-repeat;border:1px dashed #7850b433;transition:border-color .3s;position:relative}.grid-cell .hint{background-image:var(--puzzle-img);background-size:var(--bg-size);opacity:.13;pointer-events:none;background-repeat:no-repeat;position:absolute;inset:0}.grid-cell .dot{pointer-events:none;background:#6446a040;border-radius:50%;width:8px;height:8px;animation:2.5s ease-in-out infinite pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes pulse{0%,to{opacity:.25;transform:translate(-50%,-50%)scale(1)}50%{opacity:.5;transform:translate(-50%,-50%)scale(1.4)}}.grid-cell.filled .hint,.grid-cell.filled .dot{display:none}.grid-cell.filled{background-image:var(--puzzle-img);background-color:#0000;animation:.35s snapIn}.grid-cell.highlight{background-color:#64c87833;border-color:#64c87880}.grid-cell.just-placed{animation:.35s snapIn,.6s placedGlow}@keyframes snapIn{0%{transform:scale(1.06)}50%{transform:scale(.97)}to{transform:scale(1)}}@keyframes placedGlow{0%{box-shadow:inset 0 0 0 3px #4caf50b3}to{box-shadow:none}}#tray-label{color:#ffffffd9;text-align:center;flex-shrink:0;font-size:.8em;font-weight:600}#tray{-webkit-overflow-scrolling:touch;background:#ffffff1f;border-radius:10px;flex-wrap:wrap;flex-shrink:0;place-content:flex-start center;gap:6px;min-height:60px;max-height:38vh;padding:8px;display:flex;overflow-y:auto}.tray-piece{background-image:var(--puzzle-img);background-size:var(--bg-size);cursor:grab;background-repeat:no-repeat;border:2px solid #ffffff80;border-radius:6px;flex-shrink:0;transition:transform .15s,opacity .15s;box-shadow:0 2px 8px #0000004d}.tray-piece:active{transform:scale(1.05)}.tray-piece.dragging{opacity:.25;transform:scale(.95)}.tray-piece.wrong{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}#ghost{z-index:50;pointer-events:none;background-image:var(--puzzle-img);background-size:var(--bg-size);opacity:.92;background-repeat:no-repeat;border:2px solid #fffc;border-radius:8px;position:fixed;box-shadow:0 10px 40px #0006}.overlay{z-index:60;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay.hidden{display:none}#congrats-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000008c}#congrats-content{text-align:center;background:#fff;border-radius:22px;max-width:85vw;padding:36px 28px;animation:.5s bounceIn;box-shadow:0 20px 60px #0000004d}@keyframes bounceIn{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}#congrats-content h2{color:#4a2b8a;margin-bottom:8px;font-size:1.8em}#congrats-content p{color:#666;margin-bottom:6px;font-size:1.05em}#final-stars{margin:10px 0;font-size:2em;display:none}.action-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:30px;margin-top:16px;padding:12px 32px;font-size:1.05em;font-weight:700;transition:transform .2s;display:inline-block;box-shadow:0 4px 15px #667eea66}.action-btn:active{transform:scale(.95)}.confetti{z-index:61;pointer-events:none;animation:confettiFall var(--dur) ease-in forwards;border-radius:2px;position:fixed;top:-12px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(105vh)rotate(720deg)}}#preview-overlay{background:#000000e0;flex-direction:column;gap:16px;padding:20px}#preview-overlay img{object-fit:contain;border-radius:10px;max-width:92vw;max-height:82vh;box-shadow:0 10px 40px #00000080}#close-preview{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:50%;width:40px;height:40px;font-size:1.3em;position:absolute;top:16px;right:16px}