:root{font-family:"Nunito",system-ui,sans-serif;color:#3b2a25;background:#5d3c2f}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #448596;outline-offset:2px}.hidden{display:none!important}.world{min-height:100vh;background:radial-gradient(circle at 50% 20%,#d4a46b,#875a3f 65%,#4a302a);position:relative}.world:before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(90deg,#ffffff08 0 2px,transparent 2px 140px);pointer-events:none}header{display:flex;align-items:center;justify-content:space-between;height:55px;padding:8px 22px;position:relative;z-index:2}header a{color:#fff2d2;text-decoration:none;font-weight:1000;text-shadow:0 2px #563424}header button,.settings button{background:#f3dfb7;border:2px solid #684b37;border-radius:8px;padding:7px 11px;font-weight:900;color:#4a3527;box-shadow:2px 3px #523c2c}main{position:relative;display:grid;grid-template-columns:minmax(300px,930px) minmax(230px,310px);gap:clamp(16px,3vw,38px);justify-content:center;align-items:start;padding:14px 24px 40px}.easel{background:#e8cf9d;border:12px solid #67452e;border-radius:14px;padding:12px;box-shadow:0 14px 28px #2e1c1880,inset 0 0 0 3px #f7e4b2;max-width:min(100%,calc((100vh - 220px)*4/3));justify-self:center;width:100%}.toolbar{display:flex;justify-content:space-between;gap:10px;font-weight:1000;color:#604331;margin-bottom:10px}.toolbar strong{font-family:"Baloo 2",system-ui;color:#315e58;font-size:1.15rem}#board{width:100%;aspect-ratio:4/3;display:grid;position:relative;background:#c6ae8e;border:4px solid #513927;box-shadow:inset 0 0 15px #55452c;overflow:hidden;touch-action:none}#board:after{content:"";position:absolute;inset:0;background:var(--art) center/100% 100% no-repeat;opacity:0;pointer-events:none;transition:opacity .2s}#board.show-preview:after{opacity:.83}.slot{min-width:0;min-height:0;border:1px solid #967858;background:#ddc59f;color:#785d47;display:grid;place-items:center;font-weight:1000;padding:0;position:relative}.slot.empty:before{content:"";width:28%;height:28%;border:1px dashed #9d8060;border-radius:50%;opacity:.55}.slot.placed,.slot.mixed{background-image:var(--art);background-size:var(--bgsize);background-position:var(--bgpos);border:1px solid #ffffff50}.slot.selected,.piece.selected{outline:3px solid #ffcc49;outline-offset:-3px;z-index:1}.slot.hint{animation:glow .8s infinite alternate}@keyframes glow{to{box-shadow:inset 0 0 0 5px #ffdb57;background-color:#ffe49f}}#tray-wrap{margin-top:12px;background:#f5e4c2;border:3px solid #98734b;border-radius:10px;padding:8px}.tray-bar{display:flex;justify-content:space-between;align-items:center;color:#694b34;margin-bottom:6px}.tray-bar button{border:1px solid #9a7456;border-radius:8px;background:#fff7e4;padding:4px 10px;font-weight:900}.tray-bar button.active{background:#d9b075}#tray{display:flex;gap:7px;overflow:auto;max-height:125px;padding:4px 2px 8px;scrollbar-color:#a07852 #f3e1bc}.piece{flex:none;width:58px;height:58px;border:3px solid #fff9e8;box-shadow:1px 2px 4px #6b4b3977;background-image:var(--art);background-size:var(--bgsize);background-position:var(--bgpos);border-radius:4px}.piece:hover{transform:translateY(-3px)}aside{color:#fff3d4}.portrait{background:#46372d77;border:2px solid #e4bf87;border-radius:12px;padding:13px 16px}.portrait h1{font:900 2rem/1.05 "Baloo 2",system-ui;margin:0}.portrait p{margin:5px 0 0;font-weight:800;font-size:.85rem}.preview-frame{background:#f6e7c5;border:8px solid #6b4932;border-radius:8px;padding:8px;margin-top:16px;color:#5b432f;font-weight:1000;text-align:center;box-shadow:0 6px #4a3428}.preview-frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.preview-frame span{display:block;margin-top:4px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.controls button,.modes button{border:2px solid #6b4b37;border-radius:8px;background:#f6e5bf;color:#513929;padding:9px;font-weight:1000;box-shadow:2px 3px #523a2d}.controls button:last-child{grid-column:span 2}#help{font-weight:900;line-height:1.3;min-height:35px}.record{display:flex;justify-content:space-between;font-weight:900}.settings{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:16px;font-size:.82rem;font-weight:900}.settings select{max-width:135px;padding:6px;background:#f6e7c5;border:2px solid #6b4b37;border-radius:7px}.overlay{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:#26190fba;backdrop-filter:blur(3px);padding:15px;overflow:auto}.card{width:min(96vw,490px);background:#f8eacb;border:10px solid #7b5437;border-radius:17px;box-shadow:0 20px 40px #1a110db0;text-align:center;padding:22px}.card h2{font:900 2rem/1.05 "Baloo 2",system-ui;margin:0;color:#61422d}.card p{margin:8px 0 16px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.choices div{display:grid;gap:5px;text-align:left;font-weight:900}.choices select{min-width:0;padding:7px;background:#fff9eb;border:2px solid #8d694a;border-radius:6px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:9px}.modes button:last-child{grid-column:span 2;background:#dfb87b}.result img{display:block;width:min(100%,360px);aspect-ratio:4/3;object-fit:cover;margin:10px auto;border:8px solid #7b5437}.toast{position:fixed;z-index:7;bottom:20px;left:50%;transform:translateX(-50%);background:#315e56;color:#fff;padding:10px 18px;border-radius:25px;font-weight:900;box-shadow:0 5px 15px #241a1377}@media(max-width:900px){main{grid-template-columns:1fr;max-width:750px;margin:auto}.easel{order:1}aside{order:2;display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-frame{margin:0}.controls{margin:0;align-self:start}.portrait{grid-column:span 2}}@media(max-width:550px){header{height:45px;padding:5px 11px}main{padding:4px 8px 28px;gap:10px}.easel{border-width:7px;padding:6px}.toolbar{font-size:.75rem;margin-bottom:5px}#board{border-width:2px}.piece{width:48px;height:48px}aside{grid-template-columns:1fr}.portrait{grid-column:auto}.preview-frame{max-width:180px}.portrait h1{font-size:1.5rem}.controls{grid-template-columns:1fr 1fr}.card{padding:14px;border-width:7px}}@media(prefers-reduced-motion:reduce){*,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
:root .tray-pages{display:flex;align-items:center;gap:5px;font-size:.8rem}.tray-pages button{min-width:29px}.tray-pages button:disabled{opacity:.4;cursor:default}.tray-bar{gap:8px}.tray-bar>strong{white-space:nowrap}
#board-viewport{width:100%;overflow:visible}#board-viewport.large{overflow:auto;max-height:62vh;scrollbar-color:#a07852 #f3e1bc}#board-viewport.large #board{width:100%}
.slot.placed{background:transparent;border-color:transparent;z-index:2;overflow:visible}.jigsaw-shape{position:absolute;left:-20%;top:-20%;width:140%;height:140%;pointer-events:none;overflow:visible}.piece{position:relative;background:none;border-color:transparent;box-shadow:none;overflow:visible}.piece .jigsaw-shape{filter:drop-shadow(1px 2px 2px #50372599)}.piece:hover,.piece.selected{z-index:3}
.result img{animation:artReveal 1.1s ease-out both}@keyframes artReveal{from{filter:brightness(1.65) saturate(1.35);transform:scale(.94) rotate(-1deg)}to{filter:brightness(1) saturate(1);transform:scale(1) rotate(0)}}