.j-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(265px,310px);gap:22px;align-items:start;margin:14px 0 28px}.j-main,.j-side{min-width:0}.j-topline,.j-tray-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.j-topline strong{font-size:18px}.j-board-frame{position:relative;padding:14px;border:1px solid var(--glass-edge);border-radius:25px;background:radial-gradient(circle at 18% 8%,#fff8,transparent 37%),linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:inset 0 2px 2px #fff8,inset 0 -3px 7px #12281c1c,0 7px 0 var(--tile-edge),0 24px 30px #152b2029}.j-board{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:12px;background:linear-gradient(145deg,#ffffff80,#233e2c20);box-shadow:inset 0 3px 9px #13281a40,0 2px 0 #fff8;touch-action:none}.j-board::before{content:"";position:absolute;inset:0;background-image:var(--scene);background-size:100% 100%;opacity:.14;filter:grayscale(.5);pointer-events:none}.j-slot,.j-placed{position:absolute;width:16.66667%;height:25%;margin:0;padding:0;border:0;background:transparent}.j-slot{z-index:2;cursor:crosshair;border:1px solid #ffffff30}.j-slot:hover,.j-slot:focus-visible,.j-slot.hint{background:#fff5;outline:3px solid var(--select,#f5c74d);outline-offset:-3px}.j-slot.filled{pointer-events:none;border-color:transparent}.j-placed{z-index:3;pointer-events:none}.j-piece-art{position:absolute;left:-20%;top:-20%;width:140%;height:140%;overflow:visible;filter:drop-shadow(0 2px 1px #172b1d80) drop-shadow(0 5px 3px #172b1d42)}.j-placed .j-piece-art{filter:drop-shadow(0 1px 1px #172b1d80)}.j-side{padding:19px;border:1px solid var(--glass-edge);border-radius:23px;background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:inset 0 2px #fff8,0 6px 0 var(--tile-edge),0 20px 25px #12271a24}.j-tray-head h2{font-size:19px;margin:0}.j-tray-help{font-size:13px;line-height:1.4;margin:0 0 12px}.j-tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start;max-height:560px;overflow-y:auto;padding:5px 6px 11px 3px}.j-tray-item{position:relative;display:block;aspect-ratio:1;border:1px solid var(--glass-edge);border-radius:12px;background:linear-gradient(145deg,#ffffff8a,var(--surface-2));box-shadow:inset 0 1px #fff9,0 3px 0 var(--tile-edge),0 6px 8px #10261825;cursor:grab;touch-action:none;overflow:visible}.j-tray-item:hover{translate:0 -2px}.j-tray-item:active{cursor:grabbing}.j-tray-item.selected,.j-tray-item:focus-visible{outline:3px solid var(--select,#ecc258);outline-offset:2px;box-shadow:0 0 0 5px #ecc25830,0 4px 0 var(--tile-edge)}.j-tray-item .j-piece-art{pointer-events:none}.j-tray-item[hidden]{display:none}.j-practice-link{display:flex;justify-content:center;margin-top:15px;text-align:center}.j-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.j-actions .btn{min-height:44px;flex:1 1 auto}.j-actions [aria-pressed=true]{box-shadow:inset 0 2px 5px #10251a3b;background:var(--surface-2)}.j-reference{max-width:390px;margin:15px auto 0;padding:10px;border:1px solid var(--glass-edge);border-radius:17px;background:var(--surface);box-shadow:0 4px 0 var(--tile-edge)}.j-reference img{display:block;width:100%;height:auto;border-radius:10px}.j-reference p{margin:8px 2px 2px;text-align:center;font-size:12px;color:var(--muted)}.j-message{min-height:1.8em}.j-practice-finish{margin-bottom:30px;text-align:center}.j-practice-finish .btn{margin:6px}.j-drag-ghost{position:fixed;width:90px;height:90px;z-index:1000;pointer-events:none;opacity:.95;filter:drop-shadow(0 15px 16px #12251c66);transform:translate(-50%,-50%) scale(1.12)}.j-board.finished .j-placed{animation:j-finish .75s ease-out both}.j-board.finished .j-placed:nth-of-type(3n){animation-delay:.1s}@keyframes j-finish{50%{filter:brightness(1.13)}}@media(max-width:760px){.j-shell{grid-template-columns:1fr}.j-side{padding:15px}.j-tray{grid-template-columns:repeat(6,minmax(0,1fr));max-height:300px}.j-tray-help{margin-bottom:8px}}@media(max-width:450px){.j-board-frame{padding:9px;border-radius:18px}.j-tray{grid-template-columns:repeat(4,minmax(0,1fr));max-height:330px}.j-actions .btn{font-size:13px;padding:10px 12px}.j-topline strong{font-size:16px}}@media(prefers-reduced-motion:reduce){.j-tray-item:hover{translate:none}.j-board.finished .j-placed{animation:none}}
.j-picture-heading{font-size:15px;margin:24px 0 10px}.j-picture-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.j-picture-choice{display:block;overflow:hidden;border:1px solid var(--glass-edge);border-radius:13px;background:var(--surface);box-shadow:0 3px 0 var(--tile-edge),0 7px 13px #12271a22;color:var(--text);font-size:12px;font-weight:800;text-decoration:none;transition:translate .18s,box-shadow .18s}.j-picture-choice:hover{translate:0 -3px;box-shadow:0 5px 0 var(--tile-edge),0 11px 17px #12271a30}.j-picture-choice[aria-current=page]{outline:3px solid var(--select,#ecc258);outline-offset:1px}.j-picture-choice img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.j-picture-choice span{display:block;padding:7px 8px}
.j-category-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.j-category-filters button{min-height:34px;padding:6px 9px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--surface);color:var(--text);font-size:12px;font-weight:700;line-height:1.2;font-family:inherit;cursor:pointer;box-shadow:0 2px 0 var(--tile-edge)}.j-category-filters button:hover{translate:0 -1px}.j-category-filters button[aria-pressed=true]{background:var(--chip);outline:2px solid var(--select,#ecc258);outline-offset:1px}
.j-picture-picker{max-height:460px;overflow-y:auto;align-content:start;padding:3px 5px 9px 3px;scrollbar-color:var(--tile-edge) transparent}