.game-shell[data-game=shelves] #scene{display:grid;place-items:center;background:#18343e;touch-action:none}
#shelves{position:relative;flex:none;aspect-ratio:3/2;background:#7c8f7b url('../assets/shelves-wall-integrated-v2.png') center/100% 100% no-repeat;user-select:none;-webkit-user-select:none;overflow:hidden}
.shelf-cat-detail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.shelf{position:absolute;width:33%;height:29%;left:4%;top:5%;cursor:pointer;border-radius:9px;outline-offset:4px;touch-action:none}
.shelf:nth-child(even){left:63%}.shelf:nth-child(n+3){top:43%}
#shelves[data-rows="3"] .shelf{top:2%;height:22%;min-height:44px}#shelves[data-rows="3"] .shelf:nth-child(n+3){top:27%}#shelves[data-rows="3"] .shelf:nth-child(n+5){top:52%}
.shelf-wood{display:block;position:absolute;bottom:0;left:0;width:100%;height:auto;aspect-ratio:5/1;pointer-events:none;overflow:hidden}
.shelf-label{position:absolute;left:2%;top:0;font:10px/1.4 system-ui;color:#203e46;background:#f0e2c780;border-radius:3px;padding:1px 5px;pointer-events:none}
.shelf.complete .shelf-label::after{content:' ✓';color:#254b35}
.slots{position:absolute;left:3%;right:3%;bottom:calc(var(--shelf-width)*.166);display:flex;align-items:flex-end;gap:0;height:calc(var(--shelf-width)*.28)}
.slot{position:relative;width:calc(100% / var(--capacity));height:100%;flex-shrink:0;display:flex;align-items:flex-end;justify-content:center}
.shelf-item{display:block;width:100%;height:100%;max-height:100%;overflow:visible;pointer-events:none;transform-origin:center bottom}
.slot:not(.front) .shelf-item{transform:scale(.76);filter:brightness(.73) saturate(.8);opacity:.86}
.slot.front{z-index:2;cursor:grab;touch-action:none}.slot.front .shelf-item{transform:scale(1.1);filter:drop-shadow(0 3px 1px #14313b40)}
.slot.front::before{content:'';position:absolute;left:25%;right:25%;bottom:-5px;height:3px;background:#f3dd9e;border-radius:2px;opacity:.95}
.shelf.selected .slot.front::before{height:5px;background:#fff0bd}
.shelf.selected{background:#e6c79212;outline:2px solid #eed59a}
.shelf.can-place{background:#e1eac52b;box-shadow:inset 0 0 0 2px #d8e2b4}
.shelf.front-hint .slot.front{outline:2px solid #ffe4a4;outline-offset:3px;border-radius:7px}
.empty-mark{position:absolute;left:10%;right:10%;bottom:calc(var(--shelf-width)*.18);height:44%;display:grid;place-items:center;font:11px/1.4 system-ui;color:#e7edcf;border:1px dashed #e7edcf90;border-radius:8px;background:#15374428;pointer-events:none}
.shelf.capture-source .slot.front{outline:2px solid #f3dd9e;outline-offset:3px;border-radius:7px}
.shelf.drag-source{outline:1px dashed #eed59a;outline-offset:3px}
.slot.drag-hidden{visibility:hidden}
.shelf.drag-can-place{background:#e6c79220;box-shadow:inset 0 0 0 2px #e8d19e}
.shelf.drag-can-place.drag-over{background:#e6c79238;box-shadow:inset 0 0 0 3px #f2dfa9}
.drag-ghost{position:fixed;z-index:10000;pointer-events:none;filter:drop-shadow(0 6px 3px #153c4d55)}.drag-ghost .shelf-item{width:100%;height:100%}
.game-shell[data-game=shelves] .goal{margin-top:0}
@media(max-width:650px){.shelf-label{font-size:8px;padding:0 3px}.empty-mark{font-size:9px;border-radius:5px}.slot.front{min-width:39px;margin-inline:-4px}.shelf.selected{outline-offset:2px}.slots{height:calc(var(--shelf-width)*.34)}.slot.front .shelf-item{transform:scale(1.08)}}
@media(max-width:350px){.slot.front{min-width:35px;margin-inline:-4px}.shelf-label{font-size:7px}.empty-mark{font-size:8px}}
.game-shell[data-game=shelves] .all-levels{font:11px/1.4 system-ui;color:#e8dcc4;background:transparent;border:1px solid #9cafa060;border-radius:6px;padding:7px 10px;margin-top:12px;cursor:pointer}.levels-dialog{width:min(520px,calc(100% - 28px))}.levels-dialog>p{font:12px/1.7 system-ui;margin:15px 0;color:#bec8b5}#level-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px}#level-grid button{font:12px/1 system-ui;width:100%;aspect-ratio:1;margin:0;padding:0;background:transparent;color:#e8dcc4;border:1px solid #9cafa060;border-radius:6px;min-height:32px}#level-grid button.completed{box-shadow:inset 0 -3px #a8b58b}#level-grid button[aria-current=true]{background:#dccba1;color:#173744;border-color:#dccba1}
@media(max-width:650px){.game-shell[data-game=shelves] .all-levels{grid-column:1/-1;grid-row:4;margin:0;justify-self:end;padding:5px 9px;font-size:9px}.game-shell[data-game=shelves] .side{row-gap:5px}.levels-dialog{padding:18px}#level-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}}
