:root{--bg:#fff4e0;--dots:#ffe2b8;--ink:#2b2d42;--muted:#7a7c92;--white:#fff;--pink:#ff5d8f;--yellow:#ffc93c;--mint:#2ec4b6;--sky:#4cc9f0;--orange:#ff8c42;--purple:#9b5de5;--red:#ef233c;--radius:18px;color:var(--ink);font-family:Fredoka,Segoe UI,system-ui,sans-serif;line-height:1.4}*{box-sizing:border-box}html,body,#root{background-color:var(--bg);background-image:radial-gradient(var(--dots) 2.5px, transparent 2.5px);background-size:28px 28px;height:100%;margin:0;overflow:hidden}button{font:inherit;cursor:pointer;color:var(--ink);background:var(--white);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);touch-action:manipulation;border-radius:14px;padding:.6rem 1.1rem;font-weight:600;transition:transform 80ms,box-shadow 80ms}button:hover{box-shadow:0 6px 0 var(--ink);transform:translateY(-2px)}button:active{box-shadow:0 0 0 var(--ink);transform:translateY(4px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button.active{background:var(--yellow)}.btn--primary{background:var(--pink);color:var(--white);padding:.8rem 1.5rem;font-size:1.1rem}.btn--danger{background:var(--red);color:var(--white);padding:.8rem 1.5rem;font-size:1.1rem}.btn--ghost{background:var(--white)}.btn--continue{background:var(--mint);width:min(480px,100%);color:var(--white);margin:0 auto 1.75rem;font-size:1.1rem;display:block}.muted{color:var(--muted);font-size:.9rem}.screen{height:100%;padding:1.25rem;overflow:auto}.menu{max-width:920px;margin:0 auto}.menu__hero{text-align:center;margin:1.5rem 0 2rem}.menu__hero h1{letter-spacing:.02em;margin:0 0 .3rem;font-size:clamp(2.4rem,8vw,4rem);font-weight:700}.menu__letter{text-shadow:3px 3px 0 var(--ink);animation:2.4s ease-in-out infinite bounce;display:inline-block}.menu__letter:nth-child(5n+1){color:var(--pink)}.menu__letter:nth-child(5n+2){color:var(--yellow)}.menu__letter:nth-child(5n+3){color:var(--mint)}.menu__letter:nth-child(5n+4){color:var(--sky)}.menu__letter:nth-child(5n+5){color:var(--purple)}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}.menu__hero p{color:var(--muted);margin:0;font-size:1.15rem}.menu__section{margin-bottom:2rem}.menu__section h2{background:var(--ink);color:var(--white);border-radius:999px;margin:0 0 .9rem;padding:.2rem .8rem;font-size:1.1rem;display:table;transform:rotate(-2deg)}.difficulty-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;display:grid}.difficulty-card{text-align:left;border-radius:var(--radius);min-height:130px;color:var(--white);flex-direction:column;gap:.35rem;padding:1.1rem;display:flex}.difficulty-card__name{font-size:1.5rem;font-weight:700}.difficulty-card__desc{opacity:.95;flex:1;font-size:.9rem;font-weight:500}.difficulty-card__best{background:var(--white);color:var(--ink);border-radius:999px;align-self:flex-start;padding:.1rem .6rem;font-size:.8rem}.difficulty-card--relaxed{background:var(--mint)}.difficulty-card--classic{background:var(--sky)}.difficulty-card--hard{background:var(--orange)}.difficulty-card--nightmare{background:var(--red);animation:2.5s ease-in-out infinite wiggle}@keyframes wiggle{0%,85%,to{transform:rotate(0)}90%{transform:rotate(-2deg)}95%{transform:rotate(2deg)}}.ready-gate{background:#2b0a12 repeating-linear-gradient(-45deg,#3a0d18 0 24px,#2b0a12 24px 48px);place-items:center;display:grid;overflow:hidden}.ready-gate__card{z-index:1;text-align:center;max-width:420px;color:var(--white);background:var(--red);border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);border-radius:24px;padding:2rem;animation:3s ease-in-out infinite shake;position:relative}.ready-gate__pulse{z-index:-1;border:4px solid var(--yellow);pointer-events:none;border-radius:30px;animation:1.2s ease-out infinite pulse-ring;position:absolute;inset:-12px}@keyframes pulse-ring{0%{opacity:1;transform:scale(.95)}to{opacity:0;transform:scale(1.12)}}@keyframes shake{0%,90%,to{transform:translate(0)}92%{transform:translate(-6px)}94%{transform:translate(6px)}96%{transform:translate(-4px)}98%{transform:translate(4px)}}.ready-gate h1{text-transform:uppercase;letter-spacing:.08em;text-shadow:3px 3px 0 var(--ink);margin:0 0 .5rem;font-size:2.6rem}.ready-gate__warn{margin:1rem 0 1.5rem;font-size:1.3rem;font-weight:700}.ready-gate__actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.ready-gate .btn--danger{background:var(--yellow);color:var(--ink)}.freeplay{max-width:900px;margin:0 auto}.freeplay__header{align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.freeplay__header h1{color:var(--purple);text-shadow:2px 2px 0 var(--ink);margin:0;font-size:2rem}.freeplay__controls,.image-picker{background:var(--white);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:0 5px 0 var(--ink);padding:1rem}.freeplay__controls{flex-direction:column;gap:1rem;margin-top:1.25rem;display:flex}.slider-label{flex-direction:column;gap:.4rem;font-size:1.1rem;display:flex}.slider-label input[type=range]{width:100%;accent-color:var(--pink)}.toggles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem;display:grid}.toggles label{align-items:center;gap:.45rem;font-weight:500;display:flex}.toggles input[type=checkbox]{width:1.2rem;height:1.2rem;accent-color:var(--mint)}.toggles select{font:inherit;border:2px solid var(--ink);background:var(--white);border-radius:8px;margin-left:.4rem;padding:.2rem .4rem}.image-picker__tabs{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.image-picker__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;display:grid}.image-picker__thumb{flex-direction:column;padding:0;display:flex;overflow:hidden}.image-picker__thumb img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}.image-picker__thumb span{padding:.35rem .5rem;font-size:.85rem}.image-picker__thumb.selected{background:var(--yellow);transform:rotate(-2deg)}.image-picker__upload{flex-direction:column;align-items:flex-start;gap:.75rem;display:flex}.image-picker__preview img{border:3px solid var(--ink);border-radius:12px;max-width:min(320px,100%);display:block}.game{flex-direction:column;height:100%;padding:0;display:flex;overflow:hidden}.game--relaxed{background-color:#e3faf6}.game--classic{background-color:#e4f6fd}.game--hard{background-color:#fff0e3}.game--nightmare{background-color:#3a0d18;background-image:radial-gradient(#5a1424 2.5px,#0000 2.5px);background-size:28px 28px;animation:2.5s ease-in-out infinite danger-pulse}@keyframes danger-pulse{0%,to{background-color:#3a0d18}50%{background-color:#521222}}.hud{z-index:20;background:var(--white);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:0 4px 0 var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin:.6rem;padding:.5rem .75rem;display:flex}.hud__stats{font-variant-numeric:tabular-nums;gap:.6rem;font-weight:600;display:flex}.hud__time,.hud__pieces{color:var(--white);border-radius:999px;padding:.2rem .75rem}.hud__time{background:var(--purple)}.hud__pieces{background:var(--mint)}.hud__actions{flex-wrap:wrap;gap:.4rem;display:flex}.hud__actions button{box-shadow:0 3px 0 var(--ink);border-width:2px;padding:.3rem .75rem;font-size:.9rem}.hud__actions button:active{box-shadow:0 0 0 var(--ink);transform:translateY(3px)}.hud__quit{background:var(--pink)!important;color:var(--white)!important}.hud__hint{width:100%;color:var(--muted);margin:0;font-size:.85rem}.game__board-wrap{touch-action:none;flex:1;position:relative;overflow:hidden}.puzzle-board{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:relative;overflow:hidden}.puzzle-board--paused .piece{filter:blur(4px)}.puzzle-ghost{z-index:0;opacity:.18;border:3px dashed var(--ink);pointer-events:none;background-size:100% 100%;border-radius:6px;position:absolute}.puzzle-preview{z-index:15;border:3px solid var(--ink);width:min(180px,28vw);box-shadow:0 4px 0 var(--ink);pointer-events:none;border-radius:12px;position:absolute;top:12px;right:12px;overflow:hidden;transform:rotate(2deg)}.puzzle-preview img{width:100%;display:block}.piece{pointer-events:none;filter:drop-shadow(2px 3px #2b2d4259);position:absolute}.piece--dragging{filter:drop-shadow(4px 8px 4px #2b2d4266)}.piece--edge{filter:drop-shadow(0 0 5px var(--yellow)) drop-shadow(0 0 3px var(--orange))}.pause-overlay{z-index:30;color:var(--yellow);text-shadow:3px 3px 0 var(--ink);background:#fff4e099;place-items:center;font-size:3rem;font-weight:700;display:grid;position:absolute;inset:0}.loading{height:100%;color:var(--purple);place-items:center;gap:1rem;font-size:1.4rem;font-weight:600;display:grid}.win{place-items:center;display:grid;position:relative;overflow:hidden}.win__confetti{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.win__card{z-index:1;text-align:center;background:var(--white);border:4px solid var(--ink);width:min(440px,92vw);box-shadow:0 8px 0 var(--ink);border-radius:24px;padding:1.5rem;animation:.5s cubic-bezier(.2,1.6,.4,1) pop-in;position:relative}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.win__card h1{color:var(--pink);text-shadow:2px 2px 0 var(--ink);margin:0 0 .5rem;font-size:2.2rem}.win__best{background:var(--yellow);border-radius:999px;margin:0 0 .75rem;padding:.2rem .8rem;font-weight:700;display:inline-block}.win__image{border:3px solid var(--ink);border-radius:12px;width:100%;margin-bottom:.75rem;display:block}.win__stats{margin:0 0 1rem;font-size:1.1rem;font-weight:600}.win__actions{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}@media (width<=600px){.hud__stats{font-size:.9rem}.puzzle-preview{width:110px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}