/* Material-only shelf skins. Slot geometry, board patterns and art proportions stay unchanged. */
:is(.scene,.shelf-skin-swatch)[data-skin="box"]{
 --skin-frame:#e7e2d7;--skin-light:#fffdf5;--skin-edge:#bcb6a9;
 --skin-back:#d5d0c5;--skin-dark:#aaa395;--skin-room:#f0ece2;
 --skin-depth:#6e645729;--skin-rim:#ffffffad;--skin-grain:transparent;
 --skin-accent:#d7cfbe;--skin-silhouette:#625b50;--skin-rear-opacity:.54;
}
:is(.scene,.shelf-skin-swatch)[data-skin="box"][data-tint="oak"]{
 --skin-frame:#e5cba5;--skin-light:#f8e9cd;--skin-edge:#b99c75;
 --skin-back:#d8c4a7;--skin-dark:#af9777;--skin-room:#f3e7d3;
 --skin-silhouette:#6d5a42;
}
:is(.scene,.shelf-skin-swatch)[data-skin="box"][data-tint="sage"]{
 --skin-frame:#cedac9;--skin-light:#edf4e4;--skin-edge:#9bad96;
 --skin-back:#c1ceb9;--skin-dark:#94a58c;--skin-room:#e8eedf;
 --skin-silhouette:#4b6048;
}
:is(.scene,.shelf-skin-swatch)[data-skin="box"][data-tint="rose"]{
 --skin-frame:#e1cbc5;--skin-light:#fbeae0;--skin-edge:#bfa198;
 --skin-back:#d7c0b7;--skin-dark:#ac9087;--skin-room:#f3e5df;
 --skin-silhouette:#70554e;
}
:is(.scene,.shelf-skin-swatch)[data-skin="box"][data-tint="night"]{
 --skin-frame:#c4d0dc;--skin-light:#ecf0f5;--skin-edge:#91a3b6;
 --skin-back:#adbccd;--skin-dark:#7d91a7;--skin-room:#e4eaf0;
 --skin-silhouette:#34495c;--skin-rear-opacity:.58;
}
:is(.scene,.shelf-skin-swatch)[data-skin="oak"]{
 --skin-frame:#d8bb91;--skin-light:#f6dfb9;--skin-edge:#ae8b60;
 --skin-back:#cfb897;--skin-dark:#a68a68;--skin-room:#eee3d1;
 --skin-depth:#7255362e;--skin-rim:#fff0d0b3;--skin-grain:#9874430a;
 --skin-accent:#ccb088;--skin-silhouette:#67533d;--skin-rear-opacity:.54;
}
:is(.scene,.shelf-skin-swatch)[data-skin="walnut"]{
 --skin-frame:#8f725a;--skin-light:#b89b7a;--skin-edge:#5d4837;
 --skin-back:#79634f;--skin-dark:#4d3d30;--skin-room:#e9dfd2;
 --skin-depth:#21170e35;--skin-rim:#d9bd982e;--skin-grain:#e0bf9210;
 --skin-accent:#a78a68;--skin-silhouette:#f1e3c8;--skin-rear-opacity:.60;
}
:is(.scene,.shelf-skin-swatch)[data-skin="gallery"]{
 --skin-frame:#e9e0d0;--skin-light:#fff9ec;--skin-edge:#bdae96;
 --skin-back:#d6cbb7;--skin-dark:#afa18b;--skin-room:#f4ecdf;
 --skin-depth:#70624726;--skin-rim:#fff8e5cc;--skin-grain:transparent;
 --skin-accent:#b99d62;--skin-silhouette:#6c5d45;--skin-rear-opacity:.54;
}

:is(.scene,.shelf-skin-swatch)[data-skin="hinoki"]{
 --skin-frame:#e1c9a2;--skin-light:#fff0cf;--skin-edge:#b8996d;--skin-back:#d9c7a6;--skin-dark:#b29a74;--skin-room:#f3e9d6;
 --skin-depth:#81664028;--skin-rim:#fff7e9ad;--skin-grain:#a88a5b12;--skin-accent:#c3a676;--skin-silhouette:#6a593f;--skin-rear-opacity:.56;
}
:is(.scene,.shelf-skin-swatch)[data-skin="bamboo"]{
 --skin-frame:#c7bd87;--skin-light:#f1e8b8;--skin-edge:#8e8a59;--skin-back:#cbc49c;--skin-dark:#9d996e;--skin-room:#edead4;
 --skin-depth:#5c613027;--skin-rim:#fff8d8a0;--skin-grain:#6d744212;--skin-accent:#9c9e68;--skin-silhouette:#515535;--skin-rear-opacity:.56;
}
:is(.scene,.shelf-skin-swatch)[data-skin="rattan"]{
 --skin-frame:#c7ac7f;--skin-light:#ecd5aa;--skin-edge:#957b50;--skin-back:#cfba96;--skin-dark:#a18c66;--skin-room:#eee2cc;
 --skin-depth:#6c52312b;--skin-rim:#fff0c58c;--skin-grain:#8e713b14;--skin-accent:#b49a68;--skin-silhouette:#685337;--skin-rear-opacity:.56;
}
:is(.scene,.shelf-skin-swatch)[data-skin="sakura-wood"]{
 --skin-frame:#cda58d;--skin-light:#efd2b8;--skin-edge:#9d725d;--skin-back:#c9af96;--skin-dark:#9e7d67;--skin-room:#f1e2d6;
 --skin-depth:#7043332b;--skin-rim:#ffe7d09c;--skin-grain:#81543d12;--skin-accent:#b78d70;--skin-silhouette:#6b4d3d;--skin-rear-opacity:.56;
}
:is(.scene,.shelf-skin-swatch)[data-skin="kiri"]{
 --skin-frame:#d8cdb4;--skin-light:#fff6dc;--skin-edge:#b1a184;--skin-back:#d9cfb7;--skin-dark:#afa184;--skin-room:#f3eedd;
 --skin-depth:#71634124;--skin-rim:#fff9eccc;--skin-grain:#998a6210;--skin-accent:#ab915b;--skin-silhouette:#655c42;--skin-rear-opacity:.56;
}
:is(.scene,.shelf-skin-swatch)[data-skin="urushi-red"]{
 --skin-frame:#a9654c;--skin-light:#d59776;--skin-edge:#754934;--skin-back:#aa8270;--skin-dark:#765343;--skin-room:#eedbd0;
 --skin-depth:#4b231e32;--skin-rim:#f1b29162;--skin-grain:transparent;--skin-accent:#ceab66;--skin-silhouette:#f4e5ca;--skin-rear-opacity:.62;
}
:is(.scene,.shelf-skin-swatch)[data-skin="indigo"]{
 --skin-frame:#728590;--skin-light:#a9b9bc;--skin-edge:#4e626d;--skin-back:#8a9b9d;--skin-dark:#5d7279;--skin-room:#e0e8e5;
 --skin-depth:#273d492e;--skin-rim:#e5eee780;--skin-grain:#deece810;--skin-accent:#b3b38c;--skin-silhouette:#f0e9d7;--skin-rear-opacity:.62;
}
:is(.scene,.shelf-skin-swatch)[data-skin="urushi-black"]{
 --skin-frame:#62605a;--skin-light:#989184;--skin-edge:#42443e;--skin-back:#77796d;--skin-dark:#4b5047;--skin-room:#e6e4d8;
 --skin-depth:#20251a30;--skin-rim:#d4d0ac42;--skin-grain:transparent;--skin-accent:#cab174;--skin-silhouette:#f3e7c8;--skin-rear-opacity:.62;
}

.scene[data-skin]{
 /* shelf-design writes palette variables inline; material choice deliberately wins over them. */
 --shelf-frame:var(--skin-frame)!important;--shelf-light:var(--skin-light)!important;
 --shelf-edge:var(--skin-edge)!important;--shelf-back:var(--skin-back)!important;
 --shelf-dark:var(--skin-dark)!important;--shelf-room:var(--skin-room)!important;
}
.scene[data-skin]::before{background:none}
.scene[data-skin] .window-light{opacity:.12}
.scene[data-skin][data-form] .cabinet{
 border-color:var(--skin-frame);border-top-color:var(--skin-light);
 border-left-color:var(--skin-light);border-right-color:var(--skin-edge);
 background:var(--skin-dark);box-shadow:inset 1px 1px 0 var(--skin-rim),inset -1px -1px 0 var(--skin-depth);
}
.scene[data-skin][data-form] .shelf-row{
 border-color:var(--skin-frame);border-top-color:var(--skin-light);
 background:linear-gradient(180deg,var(--skin-dark),var(--skin-back) 35%,var(--skin-back) 83%,var(--skin-dark));
 box-shadow:inset 0 5px 8px var(--skin-depth);
}
.scene[data-skin][data-form] .shelf-row::after{
 background:linear-gradient(90deg,var(--skin-light),var(--skin-frame) 60%,var(--skin-edge));
 box-shadow:1px 0 1px var(--skin-depth);
}
.scene[data-skin][data-form] .compartment{
 border-color:var(--skin-frame);border-top-color:var(--skin-light);border-right-color:var(--skin-edge);
 background:repeating-linear-gradient(91deg,transparent 0 18px,var(--skin-grain) 19px 20px),linear-gradient(180deg,var(--skin-dark),var(--skin-back) 30%,var(--skin-back) 85%,var(--skin-dark));
 box-shadow:inset 1px 1px 0 var(--skin-rim),inset -1px -2px 0 var(--skin-depth),inset 0 6px 8px var(--skin-depth);
}
.scene[data-skin][data-form="grid"] .floor{background:linear-gradient(var(--skin-frame),var(--skin-light));box-shadow:inset 0 1px 0 var(--skin-rim)}

/* Open gaps remain open: neither the rows nor the cabinet fills an island/bridge silhouette. */
.scene[data-skin][data-form]:not([data-form="grid"]),
.scene[data-skin][data-form][data-design="cubes"],
.scene[data-skin][data-form][data-design="staggered"]{background:transparent;box-shadow:none}
.scene[data-skin][data-form]:not([data-form="grid"]) .cabinet,
.scene[data-skin][data-form]:not([data-form="grid"]) .shelf-row,
.scene[data-skin][data-form][data-design="cubes"] .cabinet,
.scene[data-skin][data-form][data-design="cubes"] .shelf-row,
.scene[data-skin][data-form][data-design="staggered"] .cabinet,
.scene[data-skin][data-form][data-design="staggered"] .shelf-row{background:none;box-shadow:none}
.scene[data-skin="box"][data-form="grid"]{background:var(--skin-frame);border-radius:6px}
.scene[data-skin="box"][data-form] .cabinet{border-radius:2px}
.scene[data-skin="box"][data-form] .compartment{border-radius:1px}

/* A single fine brass edge, without additional ornaments or a larger frame. */
.scene[data-skin="gallery"][data-form] .compartment{
 box-shadow:inset 0 1px 0 #b89b5f,inset 0 -1px 0 #b89b5f,inset 1px 0 0 var(--skin-rim),inset 0 6px 8px var(--skin-depth);
}
.scene[data-skin="gallery"][data-form] .cabinet{box-shadow:inset 0 1px 0 #b89b5f,inset 0 -1px 0 #b89b5f,inset -1px -1px 0 var(--skin-depth)}
.scene[data-skin="gallery"][data-form]:not([data-form="grid"]) .cabinet,
.scene[data-skin="gallery"][data-form][data-design="cubes"] .cabinet,
.scene[data-skin="gallery"][data-form][data-design="staggered"] .cabinet{box-shadow:none}

/* Flat rear silhouettes adapt to the actual shelf material, independent of room backgrounds. */
.game[data-background] .scene[data-skin][data-form] .back-stock:not(.hint-source){
 color:var(--skin-silhouette);opacity:var(--skin-rear-opacity);filter:none;
}
.game[data-background] .scene[data-skin][data-form] .back-stock:not(.hint-source) svg{filter:none}

/* Preserve functional highlights above the material shading. */
.scene[data-skin][data-form] .compartment:is(.relation-wrapped,.relation-sandwich,[data-obstacle="wrapped"],[data-obstacle="sandwich"]):not(.drop-compartment){box-shadow:inset 0 0 0 1px #fffbed,inset 0 5px 7px var(--skin-depth)}
.scene[data-skin][data-form] .compartment.drop-compartment{box-shadow:inset 0 0 0 2px #ffe5a0,inset 0 0 20px #fff2b64d}
.scene[data-skin][data-form] .compartment[data-obstacle="ice"]{box-shadow:inset 0 0 12px 3px #c2f2ff,inset 0 5px 7px var(--skin-depth)}
.scene[data-skin][data-form] .compartment[data-obstacle="sandwich"].obstacle-closed:not(.drop-compartment){box-shadow:inset 0 0 0 1px #fffbed,inset 0 5px 7px var(--skin-depth)}
.scene[data-skin][data-form] .compartment.relation-wrapped.relation-sandwich:not(.drop-compartment){box-shadow:inset 0 0 0 1px #fffbed,inset 0 0 0 5px #326f9d,inset 0 5px 7px var(--skin-depth)}

/* Decorative, CSS-only three-cubby shop sample. No DOM children or product artwork needed. */
.shelf-skin-swatch[data-skin]{
 position:relative;display:block;flex:0 0 76px;width:76px;height:43px;
 border:5px solid var(--skin-frame);border-top-color:var(--skin-light);border-right-color:var(--skin-edge);
 border-radius:3px;background:linear-gradient(180deg,var(--skin-dark),var(--skin-back) 36%,var(--skin-back) 82%,var(--skin-dark));
 box-shadow:inset 0 4px 6px var(--skin-depth);overflow:hidden;pointer-events:none;
}
.shelf-skin-swatch[data-skin]::before{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,transparent 0 calc(33.333% - 2px),var(--skin-light) calc(33.333% - 2px),var(--skin-frame) 33.333%,var(--skin-edge) calc(33.333% + 2px),transparent calc(33.333% + 2px) calc(66.666% - 2px),var(--skin-light) calc(66.666% - 2px),var(--skin-frame) 66.666%,var(--skin-edge) calc(66.666% + 2px),transparent calc(66.666% + 2px));
}
.shelf-skin-swatch[data-skin]::after{content:"";position:absolute;inset:0;box-shadow:inset 1px 1px 0 var(--skin-rim),inset 0 -2px 0 var(--skin-depth);pointer-events:none}
.shelf-skin-swatch[data-skin="gallery"]::after{box-shadow:inset 0 1px 0 #b89b5f,inset 0 -1px 0 #b89b5f}

/* Quiet material textures distinguish upgrades without changing any slot geometry. */
.scene[data-skin="hinoki"][data-form] .compartment,.shelf-skin-swatch[data-skin="hinoki"]{background-image:repeating-linear-gradient(90deg,transparent 0 13px,#ad89560d 14px 15px),linear-gradient(180deg,var(--skin-dark),var(--skin-back) 30%,var(--skin-back) 85%,var(--skin-dark))}
.scene[data-skin="bamboo"][data-form] .compartment,.shelf-skin-swatch[data-skin="bamboo"]{background-image:repeating-linear-gradient(90deg,transparent 0 10px,#596b3b12 10px 11px,#fffbd610 11px 12px),linear-gradient(180deg,var(--skin-dark),var(--skin-back) 30%,var(--skin-back) 85%,var(--skin-dark))}
.scene[data-skin="rattan"][data-form] .compartment,.shelf-skin-swatch[data-skin="rattan"]{border-radius:4px;background-image:repeating-linear-gradient(45deg,transparent 0 4px,#7355230b 4px 5px),repeating-linear-gradient(-45deg,transparent 0 4px,#fff2cd12 4px 5px),linear-gradient(180deg,var(--skin-dark),var(--skin-back) 30%,var(--skin-back) 85%,var(--skin-dark))}
.scene[data-skin="sakura-wood"][data-form] .compartment,.shelf-skin-swatch[data-skin="sakura-wood"]{background-image:repeating-linear-gradient(178deg,transparent 0 11px,#81543d0e 12px 13px),linear-gradient(180deg,var(--skin-dark),var(--skin-back) 30%,var(--skin-back) 85%,var(--skin-dark))}
.scene[data-skin="indigo"][data-form] .compartment,.shelf-skin-swatch[data-skin="indigo"]{background-image:repeating-linear-gradient(90deg,transparent 0 3px,#e9efe80a 3px 4px),repeating-linear-gradient(0deg,transparent 0 3px,#122b3309 3px 4px),linear-gradient(180deg,var(--skin-dark),var(--skin-back) 30%,var(--skin-back) 85%,var(--skin-dark))}
.scene:is([data-skin="kiri"],[data-skin="urushi-black"])[data-form] .compartment{box-shadow:inset 0 1px 0 var(--skin-accent),inset 0 -1px 0 var(--skin-accent),inset 0 6px 8px var(--skin-depth)}
.shelf-skin-swatch:is([data-skin="kiri"],[data-skin="urushi-black"])::after{box-shadow:inset 0 1px 0 var(--skin-accent),inset 0 -1px 0 var(--skin-accent)}
.scene[data-skin="urushi-red"][data-form] .compartment{box-shadow:inset 0 2px 0 #e9b18a55,inset 0 -2px 0 #59382b22,inset 0 6px 8px var(--skin-depth)}

/* Clarify the borders between three-cubby columns; outer frames retain their width. */
.scene[data-skin][data-columns="3"][data-form] .compartment:not(:last-of-type){border-right-width:6px}
/* Rear goods retain their logical slot; only the flat artwork peeks above and sideways. */
.scene[data-skin][data-form] .back-stock{
 transform:translate(5px,clamp(-17px,-34%,-11px)) scale(.96);
 transform-origin:center bottom;
}
.scene[data-skin][data-form][data-rows="9"] .back-stock{
 transform:translate(4px,clamp(-15px,-36%,-11px)) scale(.96);
}

/* In nine short rows, lifting stock by 11–15px clipped its identifying top.
   Keep the retro outline inside the cubby and expose a small sideways edge. */
.scene[data-skin][data-form][data-rows="9"] .back-stock:has(>svg.retro-art){
 height:calc(100% - 4px);max-height:74px;
 transform:translate(var(--rear-peek-x,clamp(2px,10%,4px)),var(--rear-peek-y,-8px)) scale(.86);
}
.scene[data-skin][data-form][data-rows="9"] .back-stock>svg.retro-art{max-height:74px}