/* Slide Puzzle. Builds on the Kids design system v3 tokens in kids-product.css. */
.sp-stage{position:relative}
#kids-slide .kg-hero h1{overflow-wrap:anywhere;hyphens:auto}
.sp-stage .kg-levels button:focus-visible,.sp-stage .kp-button:focus-visible,.sp-toggle:focus-visible,.sp-pic:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}

/* ---------- Size picker ---------- */
.sp-sizes{margin:0 0 18px;width:fit-content;max-width:100%;box-sizing:border-box}
.sp-sizes button{display:inline-flex;align-items:center;gap:6px}
.sp-size-name{font-weight:700;opacity:.8}
.sp-age{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--k-gold,#f6c96c);color:#241a05;font:800 .72rem/1.5 "Manrope",Inter,sans-serif}
.sp-sizes button[aria-pressed="true"] .sp-age{background:#b07d1c;color:#fff}

/* ---------- Layout ---------- */
.sp-play{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(18px,3vw,34px);align-items:start}
.sp-board-col{min-width:0}
.sp-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.sp-keys{text-align:center;margin:12px auto 0!important;max-width:540px}

/* ---------- Board ---------- */
.sp-frame{width:100%;max-width:560px;margin:0 auto;padding:clamp(8px,1.6vw,14px);box-sizing:border-box;border-radius:28px;
 background:linear-gradient(145deg,#f6c96c,#e3a64a);box-shadow:0 18px 44px rgba(2,4,20,.5),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(120,70,10,.35)}
.sp-board{position:relative;width:100%;aspect-ratio:1/1;border-radius:18px;background:#0a1031;box-shadow:inset 0 3px 12px rgba(0,0,0,.6);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.sp-n2{--n:2}.sp-n3{--n:3}.sp-n4{--n:4}
.sp-r0{--r:0}.sp-r1{--r:1}.sp-r2{--r:2}.sp-r3{--r:3}
.sp-c0{--c:0}.sp-c1{--c:1}.sp-c2{--c:2}.sp-c3{--c:3}

.sp-tile,.sp-hole{position:absolute;left:0;top:0;width:calc(100% / var(--n));height:calc(100% / var(--n));box-sizing:border-box;transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100%))}
.sp-tile{margin:0;padding:3px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;
 transition:transform .17s cubic-bezier(.3,.7,.3,1),padding .45s ease;z-index:1}
.sp-n4 .sp-tile{padding:2.5px}
.sp-face{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:12px;background:#1b2063;
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),0 3px 0 rgba(0,0,0,.35);transition:border-radius .45s ease,box-shadow .45s ease}
.sp-n4 .sp-face{border-radius:9px}
.sp-face:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);pointer-events:none;transition:opacity .45s}
.sp-art{display:block;width:100%;height:100%}
.sp-tile:hover .sp-face{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 3px 0 rgba(0,0,0,.35)}
.sp-tile:focus{outline:none}
.sp-tile:focus-visible{z-index:3}
.sp-tile:focus-visible .sp-face{box-shadow:inset 0 0 0 4px var(--k-gold,#f6c96c),0 0 0 3px #0a1031}
.sp-tile:active .sp-face{filter:brightness(1.08)}

/* The empty space: a soft dashed slot. */
.sp-hole{padding:6px;z-index:0;pointer-events:none}
.sp-hole:before{content:"";display:block;width:100%;height:100%;box-sizing:border-box;border-radius:12px;border:3px dashed rgba(246,201,108,.45);background:radial-gradient(circle,rgba(246,201,108,.1),transparent 70%)}

/* Numbers mode. */
.sp-num{position:absolute;left:50%;top:50%;translate:-50% -50%;display:none;place-items:center;min-width:2.1em;height:2.1em;padding:0 .3em;box-sizing:border-box;border-radius:999px;
 background:rgba(255,255,255,.94);color:#151b4a;font:900 clamp(15px,1.1rem,26px)/1 "Manrope",Inter,sans-serif;box-shadow:0 0 0 3px #151b4a,0 4px 10px rgba(2,4,20,.45);pointer-events:none}
.sp-numbers .sp-num{display:grid}
.sp-n4 .sp-num{font-size:clamp(13px,.95rem,22px)}
.sp-complete .sp-num{display:none}

/* Hint: a glowing gold ring. */
@keyframes sp-glow{0%,100%{box-shadow:inset 0 0 0 4px var(--k-gold,#f6c96c),0 0 0 0 rgba(246,201,108,.7)}50%{box-shadow:inset 0 0 0 4px #fff3cf,0 0 0 8px rgba(246,201,108,0)}}
.sp-tile.sp-hint{z-index:2}
.sp-tile.sp-hint .sp-face{animation:sp-glow 1.1s ease-in-out infinite}

/* A gentle "not that one" wobble. */
@keyframes sp-nope{0%,100%{rotate:0deg}25%{rotate:-4deg}75%{rotate:4deg}}
.sp-tile.sp-nope .sp-face{animation:sp-nope .35s ease}

/* Finish: the missing piece slides in, then the seams disappear. */
.sp-missing{z-index:2;opacity:0;pointer-events:none;transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100% + 40%)) scale(.85);transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s ease,padding .45s ease}
.sp-solving .sp-missing{opacity:1;transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100%))}
.sp-complete .sp-tile{padding:0}
.sp-complete .sp-face{border-radius:0;box-shadow:none}
.sp-complete .sp-face:after{opacity:0}
.sp-complete .sp-hole{display:none}
.sp-whole{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;transition:opacity .35s ease .35s}
.sp-complete .sp-whole{opacity:1}
.sp-complete .sp-tile{cursor:default}
@keyframes sp-shine{0%{opacity:0;transform:translateX(-120%) rotate(20deg)}30%{opacity:.6}100%{opacity:0;transform:translateX(220%) rotate(20deg)}}
.sp-board:after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);opacity:0;pointer-events:none;z-index:4}
.sp-complete:after{animation:sp-shine 1.1s .25s ease-out both}

/* ---------- Side panel ---------- */
.sp-status{margin:0!important;padding:12px 16px 12px 46px;border-radius:16px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62);min-height:3.4em;position:relative;font-size:1.04rem!important;line-height:1.4}
.sp-status:before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--k-gold,#f6c96c) 20%);box-shadow:0 0 12px rgba(246,201,108,.6)}
.sp-peek{margin:0;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;padding:12px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--k-line-soft,#1f2a62)}
.sp-peek[hidden]{display:none}
.sp-peek-art{flex:none;display:block;width:96px;height:96px;border-radius:12px;box-shadow:0 0 0 3px var(--k-gold,#f6c96c)}
.sp-peek figcaption{flex:1 1 8em;display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-peek figcaption span{font-size:.85rem;color:var(--k-muted,#aab3da)}
.sp-peek figcaption strong{font:800 1.08rem/1.25 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)}
.sp-toggles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5em),1fr));gap:10px}
.sp-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:8px 14px;border-radius:999px;border:2px solid var(--k-line,#2a3678);background:rgba(255,255,255,.04);color:var(--k-ink,#f4f6ff);font:800 1rem/1.2 "Manrope",Inter,sans-serif;cursor:pointer;touch-action:manipulation}
.sp-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sp-toggle:hover{border-color:#3b4a9a}
.sp-toggle[aria-pressed="true"]{background:#fff3d6;color:#4a3108;border-color:var(--k-gold,#f6c96c)}
.sp-actions{margin-top:0!important}
.sp-actions .kp-button{flex:1 1 100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;font-size:1.08rem}
.sp-actions svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sp-actions .kp-button[hidden]{display:none}
.sp-hint-btn:not(.kp-button-secondary){background:linear-gradient(100deg,var(--k-gold,#f6c96c),#ffad7a)!important;color:#2a1a04!important;box-shadow:0 8px 24px rgba(246,201,108,.28)!important}

/* ---------- Picture gallery ---------- */
.sp-gallery{margin-top:24px;padding-top:18px;border-top:1px solid var(--k-line-soft,#1f2a62)}
.sp-gallery h3{margin:0 0 12px!important;font-size:1.1rem!important}
.sp-pics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px}
.sp-pics li{margin:0;min-width:0}
.sp-pic{position:relative;display:block;width:100%;aspect-ratio:1/1;min-height:44px;padding:0;border:3px solid transparent;border-radius:14px;background:var(--k-bg-2,#0c1234);cursor:pointer;overflow:visible;box-sizing:border-box;transition:transform .15s ease,border-color .15s}
.sp-pic-art{display:block;width:100%;height:100%;border-radius:11px;opacity:.82;transition:opacity .15s}
.sp-pic:hover{transform:translateY(-2px)}
.sp-pic:hover .sp-pic-art{opacity:1}
.sp-pic[aria-pressed="true"]{border-color:var(--k-gold,#f6c96c);box-shadow:0 0 0 3px rgba(246,201,108,.25)}
.sp-pic[aria-pressed="true"] .sp-pic-art{opacity:1}
.sp-pic-done{position:absolute;right:-7px;top:-7px;display:none;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--k-mint,#62e3ab);box-shadow:0 0 0 3px var(--k-surface,#111944)}
.sp-pic-done svg{width:16px;height:16px;fill:none;stroke:#0b2a1d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sp-pic.sp-done .sp-pic-done{display:grid}

/* ---------- Win panel ---------- */
.sp-win{position:relative;overflow:hidden;outline:none}
.sp-win:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}
.sp-win h3,.sp-win p{position:relative}
.sp-win p{max-width:540px}
.sp-win-actions{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sp-win-actions .kp-button{flex:0 1 210px}
.sp-win-actions .kp-button[hidden]{display:none}
.sp-star{width:56px;height:56px;fill:#2c3770;stroke:#4a568f;stroke-width:1;stroke-linejoin:round}
.sp-star-on{fill:var(--k-gold,#f6c96c);stroke:#c79a3a;filter:drop-shadow(0 4px 10px rgba(246,201,108,.45))}
@keyframes sp-star{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.sp-win:not([hidden]) .sp-star{animation:sp-star .5s cubic-bezier(.2,.9,.3,1.3) both}
.sp-win:not([hidden]) .sp-star:nth-child(2){animation-delay:.15s}
.sp-win:not([hidden]) .sp-star:nth-child(3){animation-delay:.3s}
.sp-confetti{position:absolute;inset:0;pointer-events:none}
.sp-bit{position:absolute;top:-14px;width:12px;height:12px;border-radius:50%;opacity:0}
.sp-bit:nth-child(6n+1){background:#ff5b5b}.sp-bit:nth-child(6n+2){background:#4b8dff}.sp-bit:nth-child(6n+3){background:#ffcf3d}
.sp-bit:nth-child(6n+4){background:#36d48c;border-radius:3px}.sp-bit:nth-child(6n+5){background:#a57bff}.sp-bit:nth-child(6n){background:#ff9640;border-radius:3px}
.sp-bit-0{left:5%}.sp-bit-1{left:13%}.sp-bit-2{left:21%}.sp-bit-3{left:30%}.sp-bit-4{left:38%}.sp-bit-5{left:46%}.sp-bit-6{left:54%}.sp-bit-7{left:62%}.sp-bit-8{left:71%}.sp-bit-9{left:79%}.sp-bit-10{left:87%}.sp-bit-11{left:94%}
@keyframes sp-fall{0%{transform:translateY(0);opacity:1}100%{transform:translateY(260px);opacity:0}}
.sp-win:not([hidden]) .sp-bit{animation:sp-fall 1.9s ease-in both}
.sp-win:not([hidden]) .sp-bit:nth-child(3n+1){animation-delay:.2s;animation-duration:2.2s}
.sp-win:not([hidden]) .sp-bit:nth-child(3n+2){animation-delay:.45s;animation-duration:1.7s}

.sp-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ---------- How to play ---------- */
.sp-howto{margin-top:22px;padding:clamp(18px,3vw,30px);border-radius:28px;background:var(--k-surface,#111944);border:1px solid var(--k-line-soft,#1f2a62)}
.sp-howto h2{margin:0 0 16px!important;font-size:1.35rem!important}
.sp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sp-steps li{margin:0;padding:16px;border-radius:20px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.sp-steps strong{color:var(--k-ink,#f4f6ff)}
.sp-step-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border-radius:50%}
.sp-step-icon svg{width:24px;height:24px;fill:none;stroke:#13183f;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sp-step-look{background:var(--k-sky,#7cbcff)}
.sp-step-slide{background:var(--k-gold,#f6c96c)}
.sp-step-star{background:var(--k-mint,#62e3ab)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
 .sp-play{grid-template-columns:1fr}
 .sp-side{max-width:560px;width:100%;margin:0 auto}
 .sp-pics{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:700px){.sp-steps{grid-template-columns:1fr}}
@media(max-width:520px){
 .sp-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,5.6em),1fr));width:100%;border-radius:20px}
 .sp-sizes button{border-radius:15px;padding:6px 8px;flex-direction:column;gap:0;line-height:1.2}
 .sp-size-name{font-size:.78rem}
 .sp-frame{border-radius:22px;padding:7px}
 .sp-board{border-radius:15px}
 .sp-tile{padding:2px}
 .sp-face{border-radius:9px}
 .sp-n4 .sp-face{border-radius:7px}
 .sp-pics{gap:7px}
 .sp-pic{border-radius:11px}
 .sp-pic-art{border-radius:8px}
}
@media(prefers-reduced-motion:reduce){
 .sp-tile,.sp-face,.sp-face:after,.sp-missing,.sp-whole,.sp-pic,.sp-pic-art{transition:none!important}
 .sp-tile.sp-hint .sp-face{animation:none!important;box-shadow:inset 0 0 0 5px var(--k-gold,#f6c96c)}
 .sp-tile.sp-nope .sp-face,.sp-complete:after,.sp-win:not([hidden]) .sp-star{animation:none!important}
 .sp-pic:hover{transform:none}
 .sp-confetti{display:none}
}
@media print{.sp-side,.sp-sizes,.sp-win,.sp-keys,.sp-gallery,.sp-howto{display:none!important}.sp-frame{box-shadow:none}}