.visual-pack{--vis-ink:#49684f;--vis-cream:#f6f0db;--vis-line:#c7d1b6;max-width:720px;margin:0 auto;color:var(--vis-ink);outline:none}.visual-pack *{box-sizing:border-box}.vis-instruction{max-width:590px;margin:0 auto 20px;text-align:center;font-size:12px;line-height:1.65;color:#77826c}.visual-pack svg{display:block;max-width:100%}.vis-button{border:1px solid var(--vis-line);border-radius:10px;background:#faf8eb;color:var(--vis-ink);padding:10px;min-width:0;font:inherit;cursor:pointer;box-shadow:0 3px 0 #becbb049;touch-action:manipulation;transition:background .15s,box-shadow .15s,transform .15s}.vis-button:not(:disabled):hover{background:#eef2df;transform:translateY(-1px)}.vis-button:not(:disabled):active{transform:translateY(2px)}.vis-button:disabled{cursor:default;opacity:.65}.vis-button.selected{outline:3px solid #cdaa57;outline-offset:2px;background:#f7edc7}.vis-button:focus-visible,.visual-pack [tabindex]:focus-visible{outline:3px solid #7998b3;outline-offset:3px}.vis-button>svg{width:28px;height:28px;margin:auto}.vis-stat{display:flex;justify-content:space-between;gap:15px;max-width:440px;margin:0 auto 17px;font-size:11px;letter-spacing:.7px;color:#738068}.vis-notice{text-align:center;max-width:530px;margin:20px auto 0;color:#6f845f;font-size:13px;line-height:1.5}.vis-grid{display:grid;gap:5px;max-width:400px;margin:0 auto 20px;padding:10px;border-radius:15px;background:#d9dfc7;box-shadow:0 6px 0 #b9c5a8}.vis-grid>.vis-button{padding:0;aspect-ratio:1;min-height:0;box-shadow:0 2px 0 #a5b49933}.vis-grid>.vis-button:disabled{opacity:1}
.vis-mahjong{position:relative;aspect-ratio:1.35;max-width:500px;margin:0 auto 23px;background:radial-gradient(ellipse at 50% 40%,#73917b,#4e705c);border:12px solid #b6bd94;border-radius:23px;box-shadow:0 7px 0 #8c9873,inset 0 4px 12px #284c3e25}.vis-mahjong-tile{position:absolute;width:20%;height:25%;padding:10px 8px;background:#edead8;border:1px solid #c7c7aa;border-radius:9px;box-shadow:3px 5px 0 #8aab83,4px 7px 5px #24483344}.vis-mahjong-tile>svg{width:75%;height:75%;max-width:44px}.vis-mahjong-tile:disabled{opacity:.76}.vis-mahjong-tile.vis-free:disabled{opacity:1}.vis-mahjong-tile.vis-free{background:#fff9df}.vis-mahjong-tile.selected{outline:3px solid #f7d976;z-index:25!important}.vis-shisen{position:relative;aspect-ratio:8/6;max-width:500px;margin:0 auto;border:1px solid #d9e2c5;border-radius:19px;background:#e7edd8;box-shadow:inset 0 3px 14px #75976811}.vis-shisen-tile{position:absolute;width:11.25%;height:15%;padding:7px;background:#f8f1d9;border-color:#d9cbab;box-shadow:0 4px 0 #b4bb95;border-radius:7px}.vis-shisen-tile>svg{width:80%;height:80%}.vis-shisen-tile small{position:absolute;right:3px;bottom:1px;font-size:9px;color:#85916f}.vis-face-1{background:#eadbb8}.vis-shisen-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 3px #edcc7a)}
.vis-picture-preview{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 15px;color:#8b937c;font-size:9px;letter-spacing:1.7px}.vis-picture-preview svg{width:100px;height:auto;border:4px solid #eee6ce;border-radius:9px;box-shadow:0 3px 0 #cfc6aa}.vis-picture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:9px;background:#b8c8a6;box-shadow:0 6px 0 #91a77d;border-radius:14px;max-width:380px;margin:0 auto 22px}.vis-picture-tile{padding:0;aspect-ratio:360/340;overflow:hidden;border:0;border-radius:3px;background:#dce4cd;box-shadow:0 3px 0 #8ea17b44}.vis-picture-tile>svg{width:100%;height:100%}.vis-picture-tile:disabled{opacity:1}.vis-image-blank{background:#93a87e;box-shadow:inset 0 3px 7px #4d66482a}.vis-image-blank:disabled{opacity:.8}.vis-slot-mark{font-size:26px;line-height:1;color:#b1bda0;font-weight:300}.vis-jigsaw{background:#d9d9bc;box-shadow:0 6px 0 #b5b998}.vis-jigsaw-tray{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;max-width:520px;margin:20px auto;padding:14px;background:#eeead7;border:1px dashed #d2cfb4;border-radius:15px}.vis-jigsaw-piece{width:75px;height:71px;padding:0;border:2px solid #fff7dd;overflow:hidden;border-radius:6px;box-shadow:0 4px 0 #b9b699;touch-action:none}.vis-jigsaw-piece>svg{width:100%;height:100%}.vis-jigsaw-piece:nth-child(3n+1){transform:rotate(-2deg)}.vis-jigsaw-piece:nth-child(3n+2){transform:rotate(2deg)}.visual-image_slide [data-image-tile]:not(:disabled){touch-action:none}
.vis-mosaic-reference{display:grid;grid-template-columns:repeat(6,1fr);width:100px;gap:1px;margin:0 auto 20px;border:5px solid #e3dabc;background:#d8cfad;box-shadow:0 3px 0 #bfb797;border-radius:6px;overflow:hidden}.vis-mosaic-reference i{aspect-ratio:1}.vis-mosaic{grid-template-columns:repeat(6,minmax(0,1fr));max-width:355px;background:#c3bba0;box-shadow:0 6px 0 #a2997d;gap:4px}.vis-mosaic>.vis-button{border-radius:5px;border:1px solid #9c9f7633;box-shadow:inset 0 1px 0 #fff6,0 2px 0 #8e896a35}.vis-palette{display:flex;justify-content:center;gap:14px;margin-top:25px}.vis-palette .vis-button{width:44px;height:44px;padding:0;border:5px solid #fff8e8;border-radius:50%;background:var(--swatch);box-shadow:0 3px 0 #b9b79b}.vis-palette .vis-button:not(:disabled):hover{background:var(--swatch);filter:brightness(1.05)}
.vis-tangram-board{position:relative;max-width:365px;margin:0 auto 22px;padding:8px;border:1px solid #c9c7a8;background:#e3ddc2;border-radius:10px;box-shadow:0 6px 0 #b7b39b}.vis-tangram-board>svg{width:100%;height:auto}.vis-shape-slot{position:absolute;width:25px;height:25px;min-height:0;border-radius:50%;font-size:10px;padding:0;transform:translate(-50%,-50%);background:#fff9e49c;border:1px solid #aaa88777;box-shadow:none}.vis-shape-slot:not(:disabled):hover{transform:translate(-50%,-50%) scale(1.1);background:#fff5c8}.vis-shape-slot:disabled{opacity:.25}.vis-shape-tray{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:18px auto;max-width:610px}.vis-shape-piece{width:65px;height:69px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;padding:9px;background:#f3f0df;touch-action:none}.vis-shape-piece>svg{width:100%;height:40px;overflow:visible}.vis-shape-piece small{font-size:9px;line-height:1}.vis-piece-number{font-size:10px;margin-left:-7px;color:#899071}.vis-fit-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:22px auto}.vis-fit-controls>.vis-button{font-size:12px;min-height:43px}.vis-fit-preview{width:75px;height:65px;padding:8px;border:1px dashed #b8c4a6;border-radius:9px;font-size:10px;text-align:center;display:flex;align-items:center;justify-content:center;color:#95a083}.vis-fit-preview svg{width:100%;height:100%;overflow:visible}.vis-pentomino{grid-template-columns:repeat(5,minmax(0,1fr));max-width:365px;background:#c6b089;box-shadow:0 6px 0 #a48c65;gap:3px;border:5px solid #c6b089}.vis-pentomino>.vis-button{border-radius:4px;border:1px solid #9a8d6822}.vis-pentomino .vis-fit-cell{outline:2px solid #e2bd63;outline-offset:-4px;filter:brightness(1.1)}
.vis-warehouse{grid-template-columns:repeat(6,minmax(0,1fr));max-width:390px;background:#778b6f;padding:5px;gap:3px;box-shadow:0 6px 0 #52664b}.vis-warehouse>.vis-button{background:#e5e3c7;border:0;border-radius:4px}.vis-warehouse>.vis-wall{background:linear-gradient(145deg,#8a9e7f,#6d8162);box-shadow:inset 0 3px 0 #a8b796,0 2px 0 #52684b}.vis-warehouse .vis-on-goal{background:#e9dba5}.vis-goal{display:block;width:42%;height:42%;border:2px dashed #b99b50;border-radius:50%;margin:auto}.vis-crate{display:block;position:relative;width:76%;height:76%;margin:auto;background:linear-gradient(45deg,transparent 44%,#a27a4588 45%,#a27a4588 55%,transparent 56%),linear-gradient(-45deg,transparent 44%,#a27a4588 45%,#a27a4588 55%,transparent 56%),#d4ad71;border:3px solid #b58b54;border-radius:5px;box-shadow:0 3px 0 #8c70433b}.vis-keeper{display:block;position:relative;margin:auto;width:63%;height:72%;background:#739b80;border-radius:40% 40% 24% 24%;box-shadow:inset 0 -6px #4f7967,0 3px 0 #74876340}.vis-keeper:before{content:"";position:absolute;width:60%;height:50%;left:20%;top:-4%;background:#e1c394;border-radius:50%}.vis-keeper i{position:absolute;top:4%;left:12%;width:76%;height:22%;background:#aec48c;border-radius:50%;z-index:1}.vis-dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,43px);gap:6px;justify-content:center;margin:24px auto 15px}.vis-dpad .vis-button{padding:9px;min-height:0}.vis-up{grid-column:2;grid-row:1}.vis-left{grid-column:1;grid-row:2}.vis-down{grid-column:2;grid-row:2}.vis-right{grid-column:3;grid-row:2}.vis-dpad svg{width:23px;height:23px}
.vis-parking{position:relative;aspect-ratio:1;max-width:390px;margin:0 auto 24px;border:10px solid #c7ccb3;border-radius:15px;background:repeating-linear-gradient(0deg,transparent,transparent calc(100% / 6 - 1px),#afbfa357 calc(100% / 6 - 1px),#afbfa357 calc(100% / 6)),repeating-linear-gradient(90deg,#e2e7d4,#e2e7d4 calc(100% / 6 - 1px),#b9c6a7 calc(100% / 6 - 1px),#b9c6a7 calc(100% / 6));box-shadow:0 6px 0 #a5b092}.vis-exit{position:absolute;right:-12px;top:34.5%;height:15%;width:25px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-size:8px;letter-spacing:1px;background:#eee1a8;color:#89723e;border:1px solid #cbbb82;border-radius:4px;z-index:5}.vis-car{position:absolute;display:flex;align-items:center;justify-content:space-around;padding:9px!important;border:4px solid #e2e7d4;background:var(--car)!important;border-radius:14px;box-shadow:inset 0 -4px #0002;touch-action:none}.vis-exit-car{--car:#d68f77!important}.vis-car-v{flex-direction:column}.vis-car-h .vis-car-window{height:70%;width:23%}.vis-car-v .vis-car-window{width:70%;height:23%}.vis-car-window{display:block;background:#e6f0dca8;border-radius:4px;border:1px solid #ffffff50}.vis-car.selected{outline:2px solid #5d7852;outline-offset:-5px;z-index:3}.vis-car-controls{display:flex;justify-content:center;align-items:center;gap:10px;font-size:11px}.vis-car-controls .vis-button{width:47px;height:43px;padding:9px}.vis-car-controls svg{width:24px;height:24px}.vis-undo-row{text-align:center;margin:20px auto 0}.vis-undo-row .vis-button{font-size:11px;box-shadow:none;background:transparent;border-color:#d4dccc}
.vis-orchard{grid-template-columns:repeat(6,minmax(0,1fr));max-width:405px;background:#8aab7e;border:5px solid #8aab7e;box-shadow:0 7px 0 #668a5e;gap:5px}.vis-orchard>.vis-button{background:#f1efce;border:1px solid #d8dab6;border-radius:10px;touch-action:none}.vis-orchard>.vis-button svg{width:64%;height:64%}.vis-fresh-fruit{animation:vis-pop .4s ease-out}.vis-stacks{display:flex;justify-content:center;gap:25px;margin:25px auto 35px;max-width:480px}.vis-stacks>.vis-button{flex:1;max-width:125px;min-height:145px;position:relative;display:flex;align-items:center;flex-direction:column;background:#d8e0c7;padding:12px 10px;border-radius:15px}.vis-stack-card{width:75px;max-width:100%;aspect-ratio:.83;border:1px solid #ccc6a2;border-radius:10px;background:#f6edd0;box-shadow:3px 4px 0 #c1bea0,6px 8px 0 #bbc39f;display:flex;align-items:center;justify-content:center;margin-bottom:15px}.vis-stack-card svg{width:58%;height:58%}.vis-stacks small{font-size:10px;color:#7e8b6e}.vis-stack-peek{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;margin-top:8px}.vis-stack-peek svg{width:13px;height:13px;opacity:.7}.vis-collect-tray{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:420px;margin:0 auto;padding:12px;background:#dcd6b7;border-radius:12px;box-shadow:inset 0 2px 5px #8c8a6522}.vis-collect-tray>span{aspect-ratio:.8;border-radius:7px;background:#f5efd7;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #c0bc9d}.vis-collect-tray svg{width:70%;height:70%}
.vis-sort-token{width:110px;height:110px;margin:30px auto;padding:10px;touch-action:none;cursor:grab;filter:drop-shadow(0 6px 0 #4e68441a)}.vis-sort-token>svg{width:100%;height:100%}.vis-sort-bins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:450px;margin:0 auto}.vis-sort-bins>.vis-button{padding:15px 9px 8px;background:#e7e9d4;border:3px solid #ccd5b6;border-radius:10px 10px 20px 20px;box-shadow:0 5px 0 #afbda0}.vis-sort-bins>.vis-button svg{width:80%;height:auto;opacity:.5}.vis-sort-bins span{display:block;margin-top:10px;font-size:14px;color:#728165}.vis-tubes{display:flex;gap:13px;justify-content:center;align-items:flex-end;max-width:470px;margin:35px auto 25px;padding:0 5px 12px;border-bottom:6px solid #c7bb95}.vis-tubes>.vis-button{padding:0;border:0;background:transparent!important;box-shadow:none;flex:1;max-width:65px;touch-action:none}.vis-tube-glass{display:flex;flex-direction:column;width:100%;height:190px;padding:7px 5px 5px;border:4px solid #b8cebc;border-top:0;border-radius:0 0 20px 20px;overflow:hidden;box-shadow:inset 5px 0 0 #fff6,3px 4px 0 #7f998215;background:#eff5e340}.vis-tube-glass i{display:block;height:25%;flex:1;box-shadow:inset 4px 0 #ffffff25}.vis-tubes small{display:block;font-size:11px;margin-top:12px}.vis-tubes>.vis-button.selected{outline:0;transform:translateY(-10px) rotate(-4deg)}.vis-tubes>.vis-button.selected .vis-tube-glass{border-color:#c3a65c;box-shadow:0 0 0 3px #dfc47d55}
.vis-spot-pictures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:700px;margin:0 auto}.vis-spot-pictures>div>span{display:block;text-align:center;font-size:9px;letter-spacing:1.4px;color:#8b947b;margin-bottom:9px}.vis-spot-pictures svg{width:100%;border:6px solid #e0d9bd;border-radius:14px;box-shadow:0 5px 0 #bfbba0;overflow:hidden}.vis-difference{cursor:crosshair;touch-action:manipulation}.vis-found-ring{fill:none;stroke:#4e805d;stroke-width:4;stroke-dasharray:6 4;pointer-events:none;animation:vis-ring .4s ease-out}.vis-missed-ring{fill:#be7d5733;stroke:#bc8063;stroke-width:2;pointer-events:none}
.vis-mirror-studio{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:15px auto;max-width:600px}.vis-mirror-studio span{display:block;text-align:center;color:#8a947b;font-size:9px;letter-spacing:1px;margin-bottom:12px}.vis-mirror-reference{width:145px;max-width:40%}.vis-mirror-reference .vis-grid{gap:2px;padding:5px;border-radius:8px;box-shadow:0 3px 0 #b9c5a8}.vis-mirror-reference i{aspect-ratio:1;background:#f8f3df}.vis-mirror-paper{width:335px;max-width:100%;flex:1 0 240px}.vis-mirror-paper .vis-grid,.vis-mirror-reference .vis-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.vis-mirror-paper .vis-grid{gap:3px;padding:8px}.vis-mirror-paper .vis-button{border:0;border-radius:3px;background:#f8f3df;touch-action:none}.vis-mirror-studio .ink{background:#769b7b}.vis-mirror-studio .vis-mirror-axis{font-size:25px;letter-spacing:0;color:#adb697}.vis-brushes{display:flex;gap:12px;justify-content:center}.vis-brushes .vis-button{min-width:78px;font-size:12px}.vis-stroke-preview{outline:2px solid #dab961;outline-offset:-3px;filter:brightness(1.05)}
.vis-drag-source{opacity:.35!important}.vis-drag-ghost{opacity:.92!important;box-shadow:0 10px 24px #31452b33!important;transition:none!important;touch-action:none;overflow:hidden;border-radius:10px}.vis-drag-ghost svg{width:100%;height:100%}.vis-drop-target{outline:3px solid #d1b459!important;outline-offset:-3px;background:#eee3b9!important}.vis-notice:empty{display:none}@keyframes vis-pop{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes vis-ring{from{opacity:.2;stroke-width:9}to{opacity:1;stroke-width:4}}
@media(max-width:500px){.vis-instruction{font-size:11px;line-height:1.55}.vis-grid{padding:7px;gap:4px}.vis-stat{font-size:10px;letter-spacing:0}.vis-mahjong{border-width:8px}.vis-mahjong-tile{padding:5px;border-radius:6px}.vis-shisen-tile{padding:3px;border-radius:5px}.vis-shape-tray{gap:7px}.vis-shape-piece{width:52px;height:61px;padding:7px}.vis-fit-controls{gap:8px}.vis-fit-controls>.vis-button{font-size:11px;padding:9px}.vis-picture-grid{padding:6px}.vis-picture-preview svg{width:82px}.vis-jigsaw-piece{width:61px;height:57px}.vis-jigsaw-tray{padding:10px;gap:7px}.vis-pentomino{padding:6px;gap:3px}.vis-stacks{gap:12px}.vis-stacks>.vis-button{padding:10px 7px;min-height:130px}.vis-stack-card{width:60px}.vis-collect-tray{gap:4px;padding:9px}.vis-sort-bins{gap:8px}.vis-sort-bins>.vis-button{padding:10px 5px 7px}.vis-tubes{gap:9px}.vis-tube-glass{height:160px;padding:5px 3px 3px;border-width:3px}.vis-spot-pictures{grid-template-columns:1fr;max-width:350px;gap:23px}.vis-parking{border-width:8px}.vis-car{padding:7px!important;border-width:3px;border-radius:11px}.vis-orchard{padding:6px;gap:4px}.vis-mirror-studio{gap:9px}.vis-mirror-reference{width:118px}.vis-mirror-paper{flex-basis:100%}.vis-mirror-reference .vis-grid{padding:4px;gap:1px}}
@media(prefers-reduced-motion:reduce){.visual-pack *{animation:none!important;transition:none!important}.vis-button:not(:disabled):hover,.vis-button:not(:disabled):active{transform:none}}

.visual-tangram [data-tangram-drop]{cursor:pointer;transition:filter .15s}.visual-tangram [data-tangram-drop]:hover{filter:brightness(1.06)}
/* Let the mirror canvas shrink inside narrow phone layouts. */
.vis-mirror-paper{min-width:0;width:min(335px,100%)}
.vis-mirror-studio{min-width:0;width:100%}

/* Larger puzzles keep usable tile targets; only the Mahjong tray scrolls. */
.vis-picture-grid{grid-template-columns:repeat(var(--picture-size,3),minmax(0,1fr))}
.vis-picture-grid[data-picture-size="4"],.vis-picture-grid[data-picture-size="5"]{max-width:490px}
.vis-mahjong-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;padding:8px 5px 16px;overscroll-behavior-x:contain;border-radius:20px;scrollbar-width:thin;scrollbar-color:#9ba982 transparent;-webkit-overflow-scrolling:touch}
.vis-mahjong-sized{min-width:var(--mahjong-min);max-width:var(--mahjong-max);width:100%;margin:0 auto 8px}
.vis-mahjong-sized .vis-mahjong-tile{padding:5px 3px 12px}
.vis-mahjong-sized .vis-mahjong-tile>svg{width:78%;height:78%;max-width:44px}
.vis-tile-suit{position:absolute;bottom:5px;left:3px;right:3px;display:flex;justify-content:center;gap:3px;pointer-events:none}
.vis-tile-suit i{display:block;width:3px;height:3px;border-radius:50%;background:#527354}
@media(max-width:500px){.vis-mahjong-sized{border-width:8px}.vis-mahjong-scroll{padding-inline:2px}.vis-picture-grid[data-picture-size="5"]{gap:2px}.vis-picture-grid[data-picture-size="5"] .vis-slot-mark{font-size:18px}}