.puzzle-main{background:linear-gradient(180deg,#eef8ff 0,#fff 38%);padding-bottom:3rem}
.puzzle-intro{max-width:980px;margin:0 auto;padding:2.8rem 1.25rem 1.6rem;text-align:center}
.puzzle-intro h1{margin:.25rem 0 .75rem;color:#063f78;font-size:clamp(2rem,5vw,3.4rem)}
.puzzle-intro>p:last-child{max-width:780px;margin:0 auto;font-size:1.08rem;line-height:1.7;color:#364b5e}
.puzzle-studio{width:min(1180px,calc(100% - 2rem));margin:0 auto;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:1.4rem;align-items:start}
.puzzle-controls,.puzzle-play-area,.puzzle-help{background:#fff;border:1px solid #cfe3f5;border-radius:24px;box-shadow:0 16px 45px rgba(4,63,120,.12)}
.puzzle-controls{padding:1.25rem;position:sticky;top:1rem}
.control-label,.puzzle-controls legend{font-weight:800;color:#063f78}
#puzzle-picture{width:100%;margin:.5rem 0 1.1rem;padding:.78rem;border:2px solid #9bc8eb;border-radius:12px;background:#fff;color:#17334b;font:inherit}
.puzzle-controls fieldset{border:0;padding:0;margin:0 0 1rem}
.level-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.55rem}
.level-button{border:2px solid #b9d8ef;border-radius:14px;background:#f3faff;padding:.55rem .2rem;color:#174a70;cursor:pointer}
.level-button strong,.level-button span{display:block}.level-button strong{font-size:1.45rem}.level-button span{font-size:.7rem;line-height:1.2}
.level-button.selected{background:#07549a;border-color:#07549a;color:#fff;box-shadow:0 5px 14px rgba(7,84,154,.25)}
.timer-choice{display:flex;gap:.65rem;align-items:center;padding:.8rem;border-radius:12px;background:#fff6d9;color:#5b4300;font-weight:750}
.timer-choice input{width:1.2rem;height:1.2rem;accent-color:#07549a}
.puzzle-actions{display:grid;gap:.55rem;margin:1rem 0}.puzzle-actions .button{width:100%;text-align:center;border:none;cursor:pointer}
.score-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.score-panel div{text-align:center;background:#eef7ff;border-radius:12px;padding:.55rem .2rem}.score-panel span,.score-panel strong{display:block}.score-panel span{font-size:.72rem;color:#567084}.score-panel strong{color:#063f78;font-size:1.1rem}
.puzzle-status{min-height:3em;margin:1rem 0 0;padding:.75rem;border-radius:12px;background:#eaf8ef;color:#155b31;font-weight:700;text-align:center}
.puzzle-play-area{padding:1.1rem;position:relative;overflow:hidden}
.puzzle-board{display:grid;width:100%;aspect-ratio:10/7;overflow:hidden;border:5px solid #07549a;border-radius:16px;background:#d9ecf9;touch-action:none}
.puzzle-piece{position:relative;border:1px solid rgba(255,255,255,.7);background-repeat:no-repeat;cursor:grab;min-width:0;min-height:0;transition:transform .12s,box-shadow .12s,opacity .12s}
.puzzle-piece:hover{z-index:2;box-shadow:inset 0 0 0 3px #ffd24a}
.puzzle-piece.selected{z-index:3;box-shadow:inset 0 0 0 5px #ffb300;transform:scale(.96)}
.puzzle-piece.correct::after{content:"✓";position:absolute;right:4px;top:3px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#18a657;color:#fff;font-size:.78rem;font-weight:900;box-shadow:0 1px 4px #1238}
.puzzle-piece[draggable=true]:active{cursor:grabbing;opacity:.75}
.picture-preview{position:absolute;inset:1.1rem 1.1rem auto;z-index:10;display:none;aspect-ratio:10/7;border:5px solid #ffb300;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 12px 35px #002b}
.picture-preview.show{display:block}.picture-preview img{width:100%;height:100%;object-fit:cover;display:block}
.play-help{text-align:center;color:#526b7d;margin:1rem .5rem .15rem}
.puzzle-help{width:min(980px,calc(100% - 2rem));margin:1.5rem auto 0;padding:1.3rem 1.6rem}.puzzle-help h2{color:#063f78}.puzzle-help li{margin:.45rem 0}
.puzzle-celebration{animation:celebrate .65s ease 2}@keyframes celebrate{50%{transform:scale(1.015);box-shadow:0 0 0 10px #ffd24a,0 20px 55px rgba(4,63,120,.22)}}
@media(max-width:820px){.puzzle-studio{grid-template-columns:1fr}.puzzle-controls{position:static}.puzzle-play-area{padding:.7rem}.picture-preview{inset:.7rem .7rem auto}.puzzle-piece.correct::after{width:17px;height:17px;font-size:.65rem}.level-button span{font-size:.66rem}}
@media(max-width:430px){.puzzle-studio{width:min(100% - 1rem,1180px)}.puzzle-controls{padding:1rem}.puzzle-board{border-width:3px}.puzzle-piece.correct::after{display:none}.puzzle-help{width:calc(100% - 1rem);padding:1rem}}
@media(prefers-reduced-motion:reduce){.puzzle-piece,.puzzle-celebration{transition:none;animation:none}}