:root{font-family:"Trebuchet MS",Arial,sans-serif;color:#27324b;background:#edf4ff;font-synthesis:none;--ink:#27324b;--muted:#65748b;--purple:#534dcc;--green:#168058;--red:#c94350;--orange:#ffbe52;--stroke:#dce6f4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0,#dcf4ef 0,transparent 40%),#edf4ff}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;min-height:46px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f1aa26;outline-offset:4px}a{color:inherit}button{transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}button:active{transform:translateY(1px)}[hidden]{display:none!important}header{background:#ffffffed;border-bottom:1px solid var(--stroke);display:flex;justify-content:space-between;align-items:center;min-height:80px;padding:12px max(24px,calc((100vw - 1440px)/2));gap:14px}.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:25px;letter-spacing:-1px;text-decoration:none;white-space:nowrap}.logo{width:42px;height:42px;display:grid;place-items:center}.logo img{width:100%;height:100%}.demo{font-size:11px;letter-spacing:1.4px;background:#fff0ce;color:#855208;padding:6px 9px;border-radius:20px;margin-left:6px}.account{display:flex;gap:9px;align-items:center;font-size:14px}.account a,.account button{border:1px solid #dfe4f5;background:white;border-radius:12px;padding:12px 14px;text-decoration:none;white-space:nowrap;min-height:46px;color:#4e47b7;font-weight:700}.account a:last-child{background:#eeeaff;border-color:#dcd6fa}#playerName{color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}main{max-width:1440px;margin:auto;padding:24px 24px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:20px}.eyebrow{font-size:12px;letter-spacing:1.7px;color:#686d96;font-weight:800}h1{font-size:34px;letter-spacing:-1.2px;margin:7px 0 7px;line-height:1.1}p{font-size:16px;line-height:1.5;color:var(--muted);margin:0}.free{padding:12px 18px;background:#fff4d9;border:1px solid #f8dfa4;line-height:1.6;font-weight:800;font-size:15px;border-radius:16px;color:#835510}.free small{font-weight:400;font-size:13px}.workspace{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px}aside{display:flex;flex-direction:column;gap:22px}aside section{background:#ffffff96;padding:15px;border:1px solid #fff;border-radius:20px}h2{margin:0;font-size:17px}aside h2{margin-bottom:13px;display:flex;gap:8px;align-items:center;font-size:15px}aside h2>span{background:var(--purple);color:white;font-size:11px;padding:5px 6px;border-radius:7px}.pictures{display:grid;gap:10px}.picture{display:grid;grid-template-columns:62px 1fr;align-items:center;text-align:left;padding:7px;gap:9px;border:2px solid transparent;border-radius:14px;background:white;color:var(--ink);box-shadow:0 2px 5px #31497108}.picture img{width:62px;height:66px;object-fit:cover;border-radius:9px}.picture strong{display:block;font-size:14px;line-height:1.2}.picture small{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.3}.picture.active{border-color:var(--purple);background:#f3f0ff;box-shadow:0 3px 9px #534dcc13}.picture:hover{border-color:#a19be5}.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.level{position:relative;text-align:center;background:white;color:var(--muted);border:1px solid #dde3f0;border-radius:12px;padding:10px 5px}.level strong{display:block;font-size:24px;font-weight:900;color:var(--ink);line-height:1.2}.level small{font-size:12px;line-height:1.3;display:block;margin-top:3px}.level:last-child{grid-column:span 2}.level.active{background:var(--purple);color:#eeeaff;border-color:var(--purple);box-shadow:0 4px 12px #534dcc30}.level.active strong{color:white}.helper{font-size:13px;margin-top:12px}.kind-note{padding:16px;background:#dff3e9;border:1px solid #c5e8d7;border-radius:18px;font-size:16px;font-weight:800;color:#267053;line-height:1.6}.kind-note span{font-size:13px;font-weight:400}.play{background:white;border-radius:24px;box-shadow:0 10px 35px #35588309;border:1px solid #dde7f4;padding:22px;min-width:0}.play-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.play-heading h2{font-size:27px;letter-spacing:-.7px;margin-top:5px}.play-heading .eyebrow{font-size:11px}.quiet{padding:10px 12px;font-size:14px;border:1px solid #dfe5f0;border-radius:11px;color:var(--muted);background:#fff}.quiet:hover{background:#f3f5fb}.scoreboard{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;margin-bottom:9px}.scoreboard>div{position:relative;padding:13px 16px;background:#edf8f1;border-radius:14px;border:1px solid #dbeee2;display:flex;align-items:center;justify-content:space-between;gap:8px}.scoreboard>div:nth-child(2){background:#fff2ef;border-color:#f5e3dc}.scoreboard>div:last-child{background:#f0edff;border-color:#e5defb}.scoreboard>div>span{font-size:14px;font-weight:700;color:#557367}.scoreboard>div:nth-child(2)>span{color:#936964}.scoreboard>div:last-child>span{color:#6c60a9}.scoreboard strong{font-size:26px;white-space:nowrap}.scoreboard small{font-size:14px;font-weight:400;color:var(--muted)}.score-rule{font-size:12px;margin-bottom:15px}.progress-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--muted);gap:10px}.progress{height:7px;background:#ecedf7;overflow:hidden;border-radius:8px;margin:9px 0 20px}#progressFill{height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#615ade,#41b8b0);transition:width .3s}.play-surface{display:grid;grid-template-columns:minmax(0,1fr) 185px;gap:20px}.board-panel{min-width:0}.board-area{display:flex;gap:12px;align-items:flex-start}.board-wrap{position:relative;flex:1;min-width:0;padding:10px;background:#e6eef9;border:1px solid #d2dff0;border-radius:17px;overflow:hidden;box-shadow:inset 0 2px 7px #557aab0b}#board{position:relative;display:grid;aspect-ratio:3/2;border-radius:10px;background:#dfe8f4;isolation:isolate;overflow:visible;gap:0}.slot{position:relative;background-color:#edf3fa;background-repeat:no-repeat;border:1px dashed #cad7e7;border-radius:0;min-height:0;padding:0;transition:box-shadow .15s,background-color .15s}.slot:not(.placed):after{content:attr(data-number);position:absolute;inset:0;display:grid;place-items:center;color:#52627a;font-size:13px;font-weight:700;pointer-events:none;opacity:.75}.slot.placed{cursor:default;overflow:visible;z-index:2;border:0}.slot.placed.jigsaw{background:transparent!important}.slot.hinted{box-shadow:inset 0 0 0 4px #f5ba3f;z-index:3}.slot.drop-hover{z-index:5;box-shadow:inset 0 0 0 4px #6b60dd,0 0 20px #7468ea55;background-color:#ddd7ff}.slot.drop-hover:after{opacity:1}#reference{width:130px;flex-shrink:0;background:#f2f0fc;border:1px solid #e3def5;border-radius:14px;padding:9px;margin:0}#reference figcaption{font-size:13px;font-weight:700;margin-bottom:7px;color:#6b6095}#reference img{width:100%;display:block;border-radius:8px}.tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}.tools button{padding:10px 12px;border:1px solid #dfe5f0;background:white;color:#544fa4;font-size:14px;font-weight:700;border-radius:11px}.tools button:hover{background:#f2efff}.tools #hint{background:#fff3d8;border-color:#f2dca7;color:#825810}.tools>span{flex-basis:100%;font-size:14px;color:var(--muted);line-height:1.45;padding:9px 12px;border-radius:10px;background:#f5f7fb;min-height:40px}.tools>span[data-state=correct]{background:#e6f6ed;color:#147950}.tools>span[data-state=correct]:before{content:'✓ ';font-weight:900}.tools>span[data-state=wrong]{background:#fff0ef;color:#a63f47}.tools>span[data-state=wrong]:before{content:'↻ ';font-weight:900}.tools>span[data-state=dragging]{background:#f0edff;color:#6552b7}.pieces-panel{min-width:0;border:1px solid #e3e8f2;border-radius:17px;padding:13px;background:#f6f8fd;align-self:start}.tray-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.tray-heading h3{font-size:15px;margin:0}.tray-heading>span{font-size:12px;color:#66758a;background:white;border:1px solid #e0e6f0;padding:4px 7px;border-radius:12px;white-space:nowrap}#tray{display:flex;gap:25px;flex-wrap:wrap;justify-content:center;align-content:start;padding:20px 14px;max-height:430px;overflow:auto;scrollbar-width:thin;scrollbar-color:#cbd5e8 transparent;min-height:120px}#tray:empty{min-height:60px}.tray-tip{font-size:12px;line-height:1.55;border-top:1px solid #e0e6f0;padding-top:12px;margin-top:8px;text-align:center}.piece{position:relative;width:var(--pw);height:var(--ph);min-height:0;padding:0;background-repeat:no-repeat;border:0;cursor:grab;flex-shrink:0;touch-action:none;transition:transform .15s,filter .15s,opacity .15s}.piece.jigsaw{background:transparent!important;border:0;border-radius:0;filter:drop-shadow(0 3px 3px #31476c33);margin:8px;box-shadow:none}.jigsaw img{user-select:none}.piece:hover{filter:drop-shadow(0 5px 5px #514daa55);transform:translateY(-3px)}.piece.selected{outline:3px solid #7466d9;outline-offset:9px;border-radius:5px;transform:translateY(-4px);filter:drop-shadow(0 4px 5px #7363d966)}.piece.moving{opacity:.24;outline:2px dashed #998dce;transform:none}.is-dragging,.is-dragging *{cursor:grabbing!important;user-select:none}.drag-ghost{position:fixed!important;pointer-events:none;z-index:1000;opacity:1!important;transform:scale(1.12) rotate(-4deg)!important;filter:drop-shadow(0 15px 12px #26344a55) drop-shadow(0 0 7px #a498ff99)!important;outline:0!important;transition:none!important;margin:0!important}.drag-ghost:after{content:'Moving';position:absolute;left:50%;top:calc(100% + 25px);transform:translateX(-50%) rotate(4deg);font-size:12px;font-weight:700;color:white;background:#544cc8;padding:5px 10px;border-radius:20px;white-space:nowrap}.slot.feedback-correct{z-index:8;box-shadow:inset 0 0 0 3px #30c681,0 0 25px 8px #3acb8655;animation:correct-glow 1s ease-out;filter:drop-shadow(0 0 6px #21bb76)}.slot.feedback-correct:before{content:'✓';position:absolute;z-index:9;right:5px;top:5px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#168058;color:white;font-size:17px;box-shadow:0 2px 5px #17362f33;pointer-events:none}.slot.feedback-wrong{z-index:8;box-shadow:inset 0 0 0 4px #e45b65,0 0 24px 7px #ee6f7655;animation:wrong-glow 1s ease-out}.slot.feedback-wrong:before{content:'×';position:absolute;z-index:9;right:5px;top:5px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#c94350;color:white;font-size:20px;pointer-events:none}.piece.feedback-wrong{outline:3px solid #e26972;outline-offset:8px;filter:drop-shadow(0 0 10px #e05a6f99);animation:gentle-return .3s ease-out}@keyframes correct-glow{0%{box-shadow:inset 0 0 0 4px #25bd7a,0 0 30px 10px #34cc8790}100%{box-shadow:inset 0 0 0 3px #30c681,0 0 15px 4px #3acb8620}}@keyframes wrong-glow{0%{box-shadow:inset 0 0 0 4px #e45b65,0 0 30px 10px #ee6f7680}100%{box-shadow:inset 0 0 0 4px #e45b65,0 0 12px 3px #ee6f7620}}@keyframes gentle-return{0%{transform:translateY(-4px)}100%{transform:translateY(0)}}
#celebration{position:absolute;inset:0;background:#ffffffef;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:16px;z-index:20;padding:18px}#celebration>span{font-size:38px}#celebration h2{font-size:28px;margin:7px 0}#celebration p{font-size:14px}.result-score{font-size:28px;color:var(--purple);margin:12px 0 6px}.result-summary{max-width:100%;line-height:1.5}.save-status{font-size:12px!important;margin-top:7px;color:#287655;max-width:95%}#celebration button{border:0;background:var(--purple);color:white;padding:12px 17px;border-radius:12px;font-weight:700;margin-top:12px}#celebration #retrySave{background:#fff1d4;color:#805509}footer{font-size:12px;padding:20px 0;color:#728199;display:flex;justify-content:space-between;gap:15px}.player-history{background:#fff;border:1px solid var(--stroke);border-radius:20px;padding:22px;margin-bottom:20px}.player-history h2{margin-bottom:10px}.player-history ul{padding-left:22px;line-height:1.8;color:var(--muted);font-size:14px}#playerPicker{border:1px solid #ded9f0;border-radius:24px;max-width:430px;width:calc(100% - 32px);padding:28px;color:var(--ink);box-shadow:0 20px 80px #1f325466}#playerPicker::backdrop{background:#25324980;backdrop-filter:blur(4px)}#playerPicker h2{font-size:28px;margin-bottom:9px}#playerPicker p{font-size:15px;margin-bottom:15px}#playerPicker label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}#profileName{width:100%;padding:13px 14px;min-height:50px;border:1px solid #c8d2e6;border-radius:12px;background:#f8faff}#profileChoices{display:flex;gap:8px;flex-wrap:wrap;margin:17px 0}#profileChoices button,.profile-actions button{border-radius:12px;border:1px solid #e0dcf6;background:#f2eeff;color:#5349b6;padding:12px 15px;font-weight:700}.profile-actions{display:flex;gap:10px;justify-content:space-between}.profile-actions button[type=submit]{background:var(--purple);color:white;border-color:var(--purple)}#profileError{margin-top:10px;color:#ad3f4b}
@media(min-width:1600px){main{padding-top:30px}}@media(max-width:1150px){.workspace{grid-template-columns:195px minmax(0,1fr);gap:16px}aside section{padding:12px}.play{padding:18px}.play-surface{grid-template-columns:minmax(0,1fr) 150px;gap:14px}.pieces-panel{padding:10px}#tray{padding:18px 8px;gap:20px}.tray-heading{flex-direction:column;align-items:flex-start}.picture{grid-template-columns:50px 1fr;gap:7px}.picture img{width:50px;height:61px}#reference{width:100px}.scoreboard>div{padding:12px 10px}.scoreboard>div>span{font-size:13px}.scoreboard strong{font-size:24px}.tools>span{font-size:13px}}@media(max-width:950px){.play-surface{grid-template-columns:1fr}.pieces-panel{margin-top:4px}.tray-heading{flex-direction:row;align-items:center}#tray{flex-wrap:nowrap;justify-content:flex-start;max-height:none;overflow-x:auto;overflow-y:hidden;padding:22px 24px;min-height:110px;gap:26px}.tray-tip{display:none}.scoreboard>div{display:block}.scoreboard>div>span{display:block;margin-bottom:3px}.play-heading h2{font-size:24px}#reference{width:112px}.tools{margin-top:12px}.tools>span{min-height:40px}}
@media(max-width:700px){header{min-height:68px;padding:10px 14px;flex-wrap:wrap;gap:8px}.brand{font-size:21px}.logo{width:34px;height:34px}.demo{display:none}.account{gap:6px;font-size:12px}.account a,.account button{padding:10px 9px;min-height:44px}#playerName{display:none}main{padding:18px 14px 0}.intro{margin-bottom:17px}.intro h1{font-size:28px}.intro p{font-size:14px}.intro .eyebrow{font-size:10px}.free{display:none}.workspace{grid-template-columns:1fr;gap:14px}aside{gap:12px}aside section{padding:12px;border-radius:16px}aside h2{font-size:14px;margin-bottom:9px}.pictures{grid-template-columns:repeat(3,1fr);gap:7px}.picture{display:block;padding:5px;text-align:center;border-radius:12px}.picture img{width:100%;height:66px;border-radius:7px}.picture strong{font-size:13px;margin-top:6px}.picture small{display:none}.levels{grid-template-columns:repeat(5,1fr);gap:6px}.level:last-child{grid-column:auto}.level{padding:9px 4px;min-height:65px;border-radius:10px}.level strong{font-size:23px}.level small{font-size:11px}.helper,.kind-note{display:none}.play{border-radius:20px;padding:14px}.play-heading{margin-bottom:13px}.play-heading h2{font-size:24px}.play-heading .eyebrow{font-size:10px}.quiet{font-size:12px;padding:9px}.scoreboard{gap:7px}.scoreboard>div{padding:10px 8px;border-radius:12px}.scoreboard>div>span{font-size:12px}.scoreboard strong{font-size:24px}.scoreboard small{font-size:12px}.score-rule{font-size:11px;margin-bottom:13px}.progress-row{font-size:12px}.progress{margin-bottom:14px}.board-area{flex-direction:column;gap:10px}.board-wrap{width:100%;padding:7px;border-radius:13px}#reference{display:flex;gap:10px;align-items:center;width:100%;padding:7px 10px}#reference img{width:100px;order:-1}#reference figcaption{margin:0;font-size:14px}.tools button{font-size:13px;padding:9px 12px}.tools>span{font-size:13px}.pieces-panel{border-radius:13px;padding:10px}#tray{gap:25px;padding:22px 18px}.tray-heading{margin-bottom:1px}.slot:not(.placed):after{font-size:11px}.slot.feedback-correct:before,.slot.feedback-wrong:before{width:21px;height:21px;font-size:14px;right:3px;top:3px}.board-wrap:has(#celebration:not([hidden])) #board{display:none}#celebration:not([hidden]){position:relative;inset:auto;min-height:290px;padding:20px 10px}#celebration h2{font-size:27px}.result-score{font-size:28px}footer{font-size:11px}footer span{display:none}#playerPicker{padding:22px}.profile-actions button{font-size:14px}}
@media(min-width:951px) and (max-height:850px){header{min-height:64px;padding-top:8px;padding-bottom:8px}main{padding-top:16px}.intro{margin-bottom:16px}.intro .eyebrow{display:none}.intro h1{font-size:28px;margin:0 0 5px}.intro p{font-size:14px}.free{padding:9px 15px}.play{padding:18px}.play-heading{margin-bottom:12px}.play-heading h2{font-size:24px}.scoreboard>div{padding-top:10px;padding-bottom:10px}.score-rule{margin-bottom:10px}.progress{margin-bottom:14px}.board-area{justify-content:center}.board-wrap{max-width:calc((100dvh - 385px)*1.5 + 20px)}#tray{max-height:max(170px,calc(100dvh - 395px))}.tools{margin-top:10px}}
@media(min-width:951px) and (max-height:850px){.board-wrap{max-width:calc((100dvh - 410px)*1.5 + 20px)}}
@media(max-width:700px){.intro{display:none}.picture strong{font-size:14px}.level small{font-size:12px}.score-rule{font-size:12px}footer{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.piece:hover,.piece.selected,.drag-ghost{transform:none!important}}