/* One shared surface. Only the editor draws boundaries around individual pieces. */
.public-profile-page .profile-showcase { overflow: visible; padding: 24px 0 32px; }
.profile-showcase > header { margin-bottom: 20px; }
.profile-showcase h2 { letter-spacing: -.035em; font-size: clamp(1.7rem, 3vw, 2.25rem); }
.showcase-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: end; gap: 8px; }
.public-profile-page .profile-showcase > header button { min-height: 42px; border: 1px solid var(--gallery-line); border-radius: 99px; background: var(--gallery-paper); color: var(--gallery-ink); font-size: 12px; font-weight: 700; }
.public-profile-page .profile-showcase > header #editShowcaseButton { background: var(--gallery-deep); border-color: var(--gallery-deep); color: var(--gallery-on-deep); }
.showcase-curate-action { display: flex; flex-direction: column; align-items: center; gap: 5px; }
/* The rooms a showcase is arranged in (the inventory, its tabs, the tools on the floor) are drawn in the
   gallery's warm greys; by night each shade gives way to the theme token in its role (docs/design-system.md,
   Themes), and by day the shade written beside the role is what shows. */
html[data-theme="dark"] { --gallery-night-surface: var(--white); --gallery-night-surface-2: var(--muted-gray); --gallery-night-line: var(--line); --gallery-night-edge: var(--ink-border); --gallery-night-ink: var(--text-dark); --gallery-night-muted: var(--text-muted); --gallery-night-deep: var(--text-dark); --gallery-night-on-deep: var(--on-ink); --gallery-night-glass: rgba(var(--surface-rgb), .96); }
.showcase-new-slot { color: var(--gallery-night-muted, #72634c); font-size: 10px; font-weight: 600; }
.showcase-viewport { max-width: 100%; overflow: auto; border-radius: 20px; scrollbar-width: thin; scrollbar-color: #b8afa0 #f1ede5; }
.showcase-workspace { position: relative; }
.showcase-inventory { position: fixed; top: 16px; left: calc(12px + var(--shell-left)); z-index: 20000; display: flex; flex-direction: column; box-sizing: border-box; width: 328px; max-height: calc(100dvh - 32px); overflow: hidden; padding: 18px; border: 1px solid var(--gallery-night-line, #ddd6ca); border-radius: 16px; background: var(--gallery-night-glass, #fffdf9f5); color: var(--gallery-night-ink, #4f493e); box-shadow: 0 12px 40px #37302518; backdrop-filter: blur(14px); }
.showcase-inventory[hidden], .showcase-item-actions[hidden], .showcase-inventory-edge[hidden], .showcase-inventory :is([data-inventory-add-slot], [data-inventory-close])[hidden], .showcase-layout-tools [data-inventory-toggle][hidden] { display: none; }
.showcase-inventory-edge { position: fixed; left: var(--shell-left); top: 50%; z-index: 12000; display: grid; justify-items: center; gap: 2px; min-width: 36px; padding: 12px 5px; border: 1px solid var(--gallery-night-line, #d8d0c6); border-left: 0; border-radius: 0 12px 12px 0; background: var(--gallery-night-surface, #fffdf8); box-shadow: 2px 3px 14px #37302512; color: var(--gallery-night-muted, #65533c); font-size: 10px; transform: translateY(-50%); }
.showcase-inventory-edge > :first-child { font-size: 24px; line-height: 1; }
.showcase-inventory.is-dragging { opacity: .25; }
/* On a wide screen the items stay out for as long as the space is being arranged (showcase-layout.js),
   clear of the chrome and the news ticker when there is one: where the collector's own card stands. */
@media (min-width: 1000px) {
    .showcase-inventory { --inventory-top: calc(var(--shell-pad-top) + 16px); top: var(--inventory-top); max-height: calc(100dvh - var(--inventory-top) - 16px); }
    .showcase-inventory.is-dragging { opacity: 1; }
}
.showcase-inventory header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0; }
.showcase-inventory h3 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.025em; }
.showcase-inventory header .social-kicker { padding: 0; background: transparent; color: var(--gallery-night-muted, #847a6b); transform: none; font-size: 8px; letter-spacing: .13em; }
.showcase-inventory [data-inventory-close] { min-width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--gallery-night-surface-2, #eee9e0); box-shadow: none; color: var(--gallery-night-muted, #655b4f); font-size: 24px; }
.showcase-inventory p { flex-shrink: 0; margin: 12px 0 16px; font-size: 12px; line-height: 1.5; color: var(--gallery-night-muted, #847a6b); }
.showcase-inventory .showcase-inventory-note { margin-bottom: 0; padding-top: 14px; border-top: 1px solid var(--gallery-night-line, #e9e3d9); font-size: 11px; }
.showcase-inventory [data-inventory-add-slot] { flex-shrink: 0; width: 100%; margin-top: 12px; min-height: 42px; padding: 10px 14px; border: 1px dashed var(--gallery-night-line, #b9aa8d); border-radius: 10px; background: var(--gallery-night-surface, #f8f3e9); color: var(--gallery-night-muted, #63543f); box-shadow: none; font-size: 12px; }
.showcase-inventory-tabs { display: flex; flex-shrink: 0; gap: 4px; padding: 3px; margin-bottom: 12px; border-radius: 10px; background: var(--gallery-night-surface-2, #eee8dd); }
.showcase-inventory-tabs button { flex: 1; min-height: 36px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--gallery-night-muted, #807463); font-size: 12px; font-weight: 650; padding: 6px; }
.showcase-inventory-tabs [aria-selected="true"] { background: var(--gallery-night-surface, #fffdf8); color: var(--gallery-night-ink, #514936); box-shadow: 0 1px 4px #37302512; }
/* The items, two tiles to a row: each one a picture of the thing over its name. */
.showcase-inventory-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 8px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c8bca5 transparent; padding: 2px; }
.showcase-inventory-description { display: block; min-width: 0; }
.showcase-inventory-stack { position: absolute; top: 6px; right: 6px; z-index: 1; padding: 3px 6px; border-radius: 99px; background: var(--gallery-night-deep, #514936); color: var(--gallery-night-on-deep, #fffdf8); font-size: 10px; font-weight: 700; white-space: nowrap; }
.showcase-inventory .showcase-inventory-empty { grid-column: 1 / -1; padding: 16px 0; text-align: center; }
.showcase-inventory .showcase-inventory-item { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; min-width: 0; padding: 6px 6px 9px; border: 1px solid transparent; border-radius: 12px; background: var(--gallery-night-surface, #f3eee6); box-shadow: none; color: var(--gallery-night-ink, #514936); text-align: left; touch-action: none; cursor: grab; }
.showcase-inventory .showcase-inventory-item:hover, .showcase-inventory .showcase-inventory-item.is-selected { background: var(--gallery-night-surface, #f3eee6); border-color: var(--gallery-night-line, #cbbd9f); transform: none; }
/* What is already out in the space steps back. */
/* Come since its owner last opened their items (vanity_news.py): the dot sits inside the tile, clear of the list's edge. */
.showcase-inventory .showcase-inventory-item > .vanity-dot { top: 6px; right: 6px; }
.showcase-inventory .showcase-inventory-item.is-placed { background: transparent; border-color: var(--gallery-night-line, #e9e3d9); }
.showcase-inventory .showcase-inventory-item.is-placed .showcase-inventory-thumbnail { opacity: .5; }
.showcase-inventory-item strong { display: block; overflow-wrap: anywhere; padding: 0 3px; font-size: 12px; font-weight: 650; line-height: 1.25; }
.showcase-inventory-item small { display: block; margin-top: 3px; padding: 0 3px; color: var(--gallery-night-muted, #8b806e); font-size: 10px; }
.showcase-inventory-thumbnail { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 100%; height: 92px; overflow: hidden; border-radius: 8px; background: var(--gallery-night-surface, #fffdf8); }
.showcase-inventory-thumbnail img { max-width: calc(100% - 16px); max-height: 78px; object-fit: contain; }
/* A card's finishes lie on its picture, laid out as the picture is. */
.showcase-inventory-thumbnail > .object-finishes { inset: 7px 8px; -webkit-mask: var(--picture-mask) center / contain no-repeat; mask: var(--picture-mask) center / contain no-repeat; }
/* The thing itself, drawn at its own size and scaled down to fit the tile (showcase-layout.js). */
.showcase-inventory-preview { position: absolute; top: 50%; left: 50%; display: block; width: max-content; transform: translate(-50%, -50%); pointer-events: none; }
.showcase-inventory-preview:not([data-fitted]) { visibility: hidden; }
.showcase-inventory-preview > * { margin-inline: auto; }
.showcase-inventory-preview .pocket-watch { width: 100%; }
.showcase-inventory-preview .bouzopp-coin { width: calc(60px * var(--piece-size, 1)); height: calc(60px * var(--piece-size, 1)); }
.showcase-inventory-blank { display: grid; place-items: center; width: 44px; height: 66px; border: 1px dashed var(--gallery-night-line, #b9a98c); border-radius: 6px; color: var(--gallery-night-muted, #9e8b6f); font-size: 22px; }
.showcase-item-actions { position: absolute; z-index: 40; display: flex; gap: 3px; padding: 4px; border: 1px solid var(--gallery-night-line, #cec0aa); border-radius: 99px; background: var(--gallery-night-surface, #fffdf8); box-shadow: 0 6px 20px #37302525; white-space: nowrap; }
.profile-showcase .showcase-item-actions button { min-height: 34px; padding: 7px 12px; border: 0; border-radius: 99px; background: transparent; box-shadow: none; color: var(--gallery-night-muted, #63533e); font-size: 11px; font-weight: 650; }
.profile-showcase .showcase-item-actions [data-object-configure] { background: var(--gallery-night-deep, #65533c); color: var(--gallery-night-on-deep, #fffdf4); }
.showcase-inventory button:focus-visible, .showcase-item-actions button:focus-visible { outline: 3px solid #8060c5; outline-offset: 2px; }
@media (pointer: coarse) { .showcase-inventory .showcase-inventory-item { touch-action: pan-y; cursor: pointer; } }
.showcase-view-tools { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--gallery-night-muted, #756b5d); font-size: 12px; }
.profile-showcase .showcase-view-tools button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--gallery-night-line, #d8d0c6); border-radius: 99px; background: var(--gallery-night-surface, #fffaf3); box-shadow: none; font-size: 12px; font-weight: 650; }
.showcase-canvas[hidden], .showcase-canvas [hidden] { display: none !important; }
.showcase-canvas {
    --scene-bg: #f1eee8;
    --scene-ink: #675f52;
    --scene-highlight: #fffcf7;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    /* A background drawn with more than a colour gives its layers in --scene-art; --scene-dim darkens it by night. */
    background: linear-gradient(var(--scene-dim, transparent), var(--scene-dim, transparent)),
        var(--scene-art, radial-gradient(ellipse at 28% 12%, var(--scene-highlight), transparent 72%)), var(--scene-bg);
    color: var(--scene-ink);
    isolation: isolate;
}
.showcase-canvas[data-theme="midnight"] { --scene-bg: #252d31; --scene-ink: #d6dfd7; --scene-highlight: #384448; }
.showcase-canvas[data-theme="rose"] { --scene-bg: #eddfdb; --scene-ink: #745c54; --scene-highlight: #fff5ed; }
/* By night the two pale default backgrounds are dimmed to the same tones in the dark (#1092). */
html[data-theme="dark"] .showcase-canvas:is([data-theme="linen"], :not([data-theme])) { --scene-bg: #2a2824; --scene-ink: #cfc6b8; --scene-highlight: #39352e; }
html[data-theme="dark"] .showcase-canvas[data-theme="rose"] { --scene-bg: #30272a; --scene-ink: #dcc6bf; --scene-highlight: #44363a; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .showcase-canvas:is([data-theme="linen"], :not([data-theme])) { --scene-bg: #2a2824; --scene-ink: #cfc6b8; --scene-highlight: #39352e; }
    html:not([data-theme]) .showcase-canvas[data-theme="rose"] { --scene-bg: #30272a; --scene-ink: #dcc6bf; --scene-highlight: #44363a; }
}
/* The backgrounds sold in the Showcase shop (#1093, app.services.showcase_inventory.BACKGROUNDS): each draws its
   material in --scene-art, over --scene-bg, and dims itself by night with --scene-dim. */
.showcase-canvas[data-theme="casino-mat"] { --scene-bg: #17613f; --scene-ink: #e6f3e7; --scene-highlight: #2a8a5d;
    --scene-art: radial-gradient(ellipse at 50% 40%, #2a8a5d, transparent 70%), repeating-linear-gradient(45deg, #ffffff06 0 2px, transparent 2px 5px);
    box-shadow: inset 0 0 0 10px #5b2f18, inset 0 0 0 13px #d6b04c, inset 0 0 80px #00000059; }
.showcase-canvas[data-theme="shop-stand"] { --scene-bg: #e9d7b7; --scene-ink: #4f3a24; --scene-highlight: #f6ead2;
    --scene-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='96'%3E%3Crect width='40' height='80' fill='%23d9483b'/%3E%3Crect x='40' width='40' height='80' fill='%23fff4e2'/%3E%3Ccircle cx='20' cy='80' r='20' fill='%23d9483b'/%3E%3Ccircle cx='60' cy='80' r='20' fill='%23fff4e2'/%3E%3Crect width='80' height='6' fill='%2300000026'/%3E%3C/svg%3E") 0 0 / 80px 96px repeat-x, linear-gradient(transparent calc(100% - 110px), #8c5a33 calc(100% - 110px), #8c5a33 calc(100% - 100px), #a96e41 calc(100% - 100px)),
        repeating-linear-gradient(90deg, #00000010 0 2px, transparent 2px 64px), radial-gradient(ellipse at 50% 30%, #f6ead2, transparent 70%); }
.showcase-canvas[data-theme="wooden-table"] { --scene-bg: #9a6a45; --scene-ink: #fbefe0; --scene-highlight: #b58256;
    --scene-art: radial-gradient(ellipse at 50% 35%, #ffffff1c, #0000001f 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320'%3E%3Crect width='640' height='320' fill='%239a6a45'/%3E%3Crect y='0' width='640' height='2' fill='%23000000' fill-opacity='.22'/%3E%3Crect y='2' width='640' height='1.5' fill='%23ffffff' fill-opacity='.14'/%3E%3Crect x='0' y='0' width='2' height='160' fill='%23000000' fill-opacity='.16'/%3E%3Crect x='2' y='0' width='1.5' height='160' fill='%23ffffff' fill-opacity='.08'/%3E%3Cpath d='M-10 14c90 -5 150 5 240 0s160 -5 250 3.0s120 -5 170 0' stroke='%233a2210' stroke-opacity='0.2' stroke-width='1.2' fill='none'/%3E%3Cpath d='M-10 30c90 -9 150 9 240 0s160 -9 250 5.4s120 -9 170 0' stroke='%233a2210' stroke-opacity='0.13' stroke-width='2.4' fill='none'/%3E%3Cpath d='M-10 46c90 -4 150 4 240 0s160 -4 250 2.4s120 -4 170 0' stroke='%233a2210' stroke-opacity='0.18' stroke-width='1' fill='none'/%3E%3Cpath d='M-10 64c90 -11 150 11 240 0s160 -11 250 6.6s120 -11 170 0' stroke='%233a2210' stroke-opacity='0.12' stroke-width='3' fill='none'/%3E%3Cpath d='M-10 80c90 -6 150 6 240 0s160 -6 250 3.6s120 -6 170 0' stroke='%233a2210' stroke-opacity='0.2' stroke-width='1.1' fill='none'/%3E%3Cpath d='M-10 98c90 -8 150 8 240 0s160 -8 250 4.8s120 -8 170 0' stroke='%233a2210' stroke-opacity='0.1' stroke-width='2.2' fill='none'/%3E%3Cpath d='M-10 116c90 -5 150 5 240 0s160 -5 250 3.0s120 -5 170 0' stroke='%233a2210' stroke-opacity='0.17' stroke-width='1.3' fill='none'/%3E%3Cpath d='M-10 134c90 -10 150 10 240 0s160 -10 250 6.0s120 -10 170 0' stroke='%233a2210' stroke-opacity='0.12' stroke-width='2.6' fill='none'/%3E%3Cpath d='M-10 150c90 -4 150 4 240 0s160 -4 250 2.4s120 -4 170 0' stroke='%233a2210' stroke-opacity='0.16' stroke-width='1' fill='none'/%3E%3Crect y='160' width='640' height='2' fill='%23000000' fill-opacity='.22'/%3E%3Crect y='162' width='640' height='1.5' fill='%23ffffff' fill-opacity='.14'/%3E%3Crect x='320' y='160' width='2' height='160' fill='%23000000' fill-opacity='.16'/%3E%3Crect x='322' y='160' width='1.5' height='160' fill='%23ffffff' fill-opacity='.08'/%3E%3Cpath d='M-10 181c90 -5 150 5 240 0s160 -5 250 3.0s120 -5 170 0' stroke='%233a2210' stroke-opacity='0.2' stroke-width='1.2' fill='none'/%3E%3Cpath d='M-10 197c90 -9 150 9 240 0s160 -9 250 5.4s120 -9 170 0' stroke='%233a2210' stroke-opacity='0.13' stroke-width='2.4' fill='none'/%3E%3Cpath d='M-10 213c90 -4 150 4 240 0s160 -4 250 2.4s120 -4 170 0' stroke='%233a2210' stroke-opacity='0.18' stroke-width='1' fill='none'/%3E%3Cpath d='M-10 231c90 -11 150 11 240 0s160 -11 250 6.6s120 -11 170 0' stroke='%233a2210' stroke-opacity='0.12' stroke-width='3' fill='none'/%3E%3Cpath d='M-10 247c90 -6 150 6 240 0s160 -6 250 3.6s120 -6 170 0' stroke='%233a2210' stroke-opacity='0.2' stroke-width='1.1' fill='none'/%3E%3Cpath d='M-10 265c90 -8 150 8 240 0s160 -8 250 4.8s120 -8 170 0' stroke='%233a2210' stroke-opacity='0.1' stroke-width='2.2' fill='none'/%3E%3Cpath d='M-10 283c90 -5 150 5 240 0s160 -5 250 3.0s120 -5 170 0' stroke='%233a2210' stroke-opacity='0.17' stroke-width='1.3' fill='none'/%3E%3Cpath d='M-10 301c90 -10 150 10 240 0s160 -10 250 6.0s120 -10 170 0' stroke='%233a2210' stroke-opacity='0.12' stroke-width='2.6' fill='none'/%3E%3Cpath d='M-10 317c90 -4 150 4 240 0s160 -4 250 2.4s120 -4 170 0' stroke='%233a2210' stroke-opacity='0.16' stroke-width='1' fill='none'/%3E%3C/svg%3E") 0 0 / 640px 320px; }
.showcase-canvas[data-theme="marble"] { --scene-bg: #efece7; --scene-ink: #4b4650; --scene-highlight: #ffffff;
    --scene-art: radial-gradient(ellipse at 25% 15%, #ffffff8c, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 760' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-10%' y='-10%' width='120%' height='120%'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Crect viewBox='0 0 1000 760' preserveAspectRatio='none' fill='%23efece7'/%3E%3Cg fill='none' stroke='%236d6478' stroke-linecap='round'%3E%3Cpath d='M-30 140c120 50 190 -40 310 10s200 110 330 70 160 -60 420 -50' stroke-opacity='.07' stroke-width='26' filter='url(%23b)'/%3E%3Cpath d='M180 800c40 -160 -60 -290 80 -400s110 -200 50 -440' stroke-opacity='.06' stroke-width='20' filter='url(%23b)'/%3E%3Cpath d='M-30 140c120 50 190 -40 310 10s200 110 330 70 160 -60 420 -50' stroke-opacity='.24' stroke-width='1.6'/%3E%3Cpath d='M60 190c80 10 120 -50 200 -10s90 100 190 60' stroke-opacity='.14' stroke-width='1'/%3E%3Cpath d='M180 800c40 -160 -60 -290 80 -400s110 -200 50 -440' stroke-opacity='.2' stroke-width='1.4'/%3E%3Cpath d='M-30 560c110 -30 170 40 280 0s190 -80 310 -30 160 50 470 30' stroke-opacity='.17' stroke-width='1.2'/%3E%3Cpath d='M560 800c50 -80 10 -190 90 -240s110 -30 160 -80' stroke-opacity='.12' stroke-width='.9'/%3E%3Cpath d='M780 -30c-30 90 50 150 10 230s-80 110 -30 200' stroke-opacity='.11' stroke-width='.9'/%3E%3Cpath d='M-30 400c60 -10 90 30 140 20' stroke-opacity='.1' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.showcase-canvas[data-theme="crime-scene"] { --scene-bg: #33363b; --scene-ink: #f4f1e8; --scene-highlight: #43474d;
    --scene-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='34'%3E%3Crect width='420' height='34' fill='%23f2cb1d'/%3E%3Crect width='420' height='3' fill='%231b1b1b'/%3E%3Crect y='31' width='420' height='3' fill='%231b1b1b'/%3E%3Ctext x='10' y='23' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='15' letter-spacing='2' fill='%231b1b1b'%3ECRIME SCENE %C2%B7 DO NOT CROSS %C2%B7%3C/text%3E%3C/svg%3E") 0 9% / 420px 34px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='34'%3E%3Crect width='420' height='34' fill='%23f2cb1d'/%3E%3Crect width='420' height='3' fill='%231b1b1b'/%3E%3Crect y='31' width='420' height='3' fill='%231b1b1b'/%3E%3Ctext x='10' y='23' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='15' letter-spacing='2' fill='%231b1b1b'%3ECRIME SCENE %C2%B7 DO NOT CROSS %C2%B7%3C/text%3E%3C/svg%3E") 30px 88% / 420px 34px repeat-x,
        radial-gradient(ellipse at 18% 30%, #ffffff08, transparent 45%), radial-gradient(ellipse at 76% 70%, #ffffff07, transparent 40%), radial-gradient(ellipse at 60% 20%, #00000014, transparent 40%), radial-gradient(ellipse at 50% 50%, #43474d, transparent 75%); }
.showcase-canvas[data-theme="brick"] { --scene-bg: #7d3a26; --scene-ink: #fff3e8; --scene-highlight: #c0603f;
    --scene-art: radial-gradient(ellipse at 50% 20%, #ffffff1a, transparent 65%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Crect width='96' height='48' fill='%237d3a26'/%3E%3Cg fill='%23b4553a'%3E%3Crect x='2' y='2' width='44' height='20' rx='1'/%3E%3Crect x='50' y='2' width='44' height='20' rx='1'/%3E%3Crect x='-22' y='26' width='44' height='20' rx='1'/%3E%3Crect x='26' y='26' width='44' height='20' rx='1'/%3E%3Crect x='74' y='26' width='44' height='20' rx='1'/%3E%3C/g%3E%3Cg fill='%23c76a4a' opacity='.55'%3E%3Crect x='8' y='5' width='20' height='3'/%3E%3Crect x='58' y='5' width='14' height='3'/%3E%3Crect x='32' y='29' width='18' height='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 96px 48px; }
.showcase-canvas[data-theme="tiled"] { --scene-bg: #a4d3d9; --scene-ink: #27505a; --scene-highlight: #d7eef1;
    --scene-art: radial-gradient(ellipse at 30% 10%, #ffffff40, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Crect width='128' height='128' fill='%2393c4cb'/%3E%3Crect x='1.5' y='1.5' width='61' height='61' rx='4' fill='%23b7dfe3'/%3E%3Cpath d='M8 14q10-8 26-6' stroke='%23ffffff' stroke-opacity='.28' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Crect x='2' y='52' width='60' height='10' rx='4' fill='%23000000' fill-opacity='.04'/%3E%3Crect x='65.5' y='1.5' width='61' height='61' rx='4' fill='%23aedadf'/%3E%3Cpath d='M72 14q10-8 26-6' stroke='%23ffffff' stroke-opacity='.28' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Crect x='66' y='52' width='60' height='10' rx='4' fill='%23000000' fill-opacity='.04'/%3E%3Crect x='1.5' y='65.5' width='61' height='61' rx='4' fill='%23aedadf'/%3E%3Cpath d='M8 78q10-8 26-6' stroke='%23ffffff' stroke-opacity='.28' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Crect x='2' y='116' width='60' height='10' rx='4' fill='%23000000' fill-opacity='.04'/%3E%3Crect x='65.5' y='65.5' width='61' height='61' rx='4' fill='%23b7dfe3'/%3E%3Cpath d='M72 78q10-8 26-6' stroke='%23ffffff' stroke-opacity='.28' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Crect x='66' y='116' width='60' height='10' rx='4' fill='%23000000' fill-opacity='.04'/%3E%3C/svg%3E") 0 0 / 128px 128px; }
html[data-theme="dark"] .showcase-canvas:is([data-theme="shop-stand"], [data-theme="tiled"]) { --scene-dim: #00000073; --scene-ink: #f1ece4; }
html[data-theme="dark"] .showcase-canvas[data-theme="marble"] { --scene-dim: #1a1724a6; --scene-ink: #e8e3ee; }
html[data-theme="dark"] .showcase-canvas:is([data-theme="casino-mat"], [data-theme="wooden-table"], [data-theme="brick"]) { --scene-dim: #0000004d; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .showcase-canvas:is([data-theme="shop-stand"], [data-theme="tiled"]) { --scene-dim: #00000073; --scene-ink: #f1ece4; }
    html:not([data-theme]) .showcase-canvas[data-theme="marble"] { --scene-dim: #1a1724a6; --scene-ink: #e8e3ee; }
    html:not([data-theme]) .showcase-canvas:is([data-theme="casino-mat"], [data-theme="wooden-table"], [data-theme="brick"]) { --scene-dim: #0000004d; }
}
.showcase-object, .card-display-slot { box-sizing: border-box; position: absolute; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; transform-origin: top left; }
.showcase-object-label { display: none; }
.showcase-object-content { position: relative; width: 100%; min-width: 0; }
.showcase-object-content > #profileFridge,
.showcase-object-content > #profilePS2,
.showcase-object-content > #profileShelf, .showcase-object-content > [data-showcase-instance] { position: absolute; top: 0; left: 0; max-width: none; min-width: 0; margin: 0; transform-origin: top left; }
.showcase-object-content .fridge-preview { margin: 0; }
.showcase-canvas .shelf-edit { opacity: 0; pointer-events: none; }
.showcase-object:hover .shelf-edit, .showcase-object:focus-within .shelf-edit { opacity: 1; pointer-events: auto; }
.showcase-object[data-layout-key="card-display"],
.showcase-object[data-layout-key="card-display"] > .showcase-object-content,
#showcaseCardDisplay, #showcaseCardGrid { display: contents; }
.showcase-card-stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
#showcaseCardGrid .collection-card-button { position: absolute; display: block; width: max-content; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform-origin: top left; }
#showcaseCardGrid .trading-card { zoom: 1; }
/* Let the artwork determine intrinsic width even when its separate caption is long. */
#showcaseCardGrid .collectible-caption { box-sizing: border-box; width: 0; min-width: 100%; color: #25252d; }
/* A slot set to hide the overlay gives its whole footprint to the artwork, in the scene and its magnifier. */
.collection-card-button.hides-caption .trading-card.full-card-image > .collectible-caption { display: none; }
#showcaseCardGrid .collection-card-button:focus-visible { outline: 4px solid #8060c5; outline-offset: 9px; }
.card-display-slot.is-empty { display: grid; place-items: center; border: 1px dashed var(--gallery-night-line, #a3947d); border-radius: 6px; color: var(--scene-ink); font-size: 11px; }
.showcase-canvas:not(.is-arranging) .card-display-slot.is-empty { display: none; }
.showcase-canvas.is-arranging { background: radial-gradient(#8e806247 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(var(--scene-dim, transparent), var(--scene-dim, transparent)),
    var(--scene-art, radial-gradient(ellipse at 28% 12%, var(--scene-highlight), transparent 72%)), var(--scene-bg); }
/* A new background comes up under the space as it is chosen. */
.showcase-canvas.is-redecorated { animation: showcase-redecorated .55s ease-out; }
@keyframes showcase-redecorated { from { filter: brightness(1.35) saturate(.6); } to { filter: none; } }
html.motion-reduced .showcase-canvas.is-redecorated { animation: none; }
.is-arranging :is(.showcase-object, .card-display-slot):not([data-layout-key="card-display"]) { outline: 1px dashed #9f927b99; outline-offset: 5px; cursor: grab; touch-action: none; }
.is-arranging :is(.showcase-object, .card-display-slot).is-selected { outline: 2px solid var(--gallery-night-edge, #927147); }
.is-arranging :is(.showcase-object-content, .showcase-card-stage) { pointer-events: none; }
.is-arranging .showcase-object[data-layout-key="card-display"] > .showcase-object-content { pointer-events: auto; }
.profile-showcase .showcase-move { position: absolute; top: 0; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; max-width: 180px; padding: 4px 9px; border: 1px solid var(--gallery-night-line, #b4a790); border-radius: 99px; background: var(--gallery-night-surface, #fffdf4); box-shadow: 0 2px 8px #24211a14; color: var(--gallery-night-muted, #65533c); font-size: 10px; font-weight: 650; white-space: nowrap; transform: translateX(-50%) scale(calc(1 / var(--layout-scale, 1))); transform-origin: top center; cursor: grab; touch-action: none; }
.profile-showcase .is-selected > .showcase-move { background: var(--gallery-night-deep, #65533c); border-color: var(--gallery-night-edge, #65533c); color: var(--gallery-night-on-deep, #fffdf4); }
.showcase-move:focus-visible { outline: 3px solid #8060c5; outline-offset: 3px; }
.showcase-layout-tools { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--gallery-line); border-radius: 14px; background: var(--gallery-sheet); }
.showcase-layout-tools label { display: grid; gap: 7px; flex: 1 1 115px; min-width: 105px; max-width: 180px; color: var(--gallery-label); font-size: 11px; font-weight: 650; }
.showcase-layout-tools select { box-sizing: border-box; width: 100%; min-height: 42px; padding: 8px 26px 8px 10px; border: 1px solid var(--gallery-line); border-radius: 8px; background: var(--gallery-field); color: var(--gallery-field-ink); font: inherit; font-size: 13px; }
.showcase-layout-tools [data-inventory-toggle] { align-self: center; }
.showcase-layout-tools [data-inventory-count] { margin-left: 6px; padding: 2px 6px; border-radius: 9px; background: var(--gallery-chip); font-size: 10px; }
.showcase-layout-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.profile-showcase .showcase-layout-tools button { min-height: 42px; padding: 9px 13px; border: 1px solid var(--gallery-line); border-radius: 8px; background: var(--gallery-field); box-shadow: none; font-size: 12px; font-weight: 650; }
.profile-showcase .showcase-layout-tools [data-layout-save] { border-color: var(--gallery-deep); background: var(--gallery-deep); color: var(--gallery-on-deep); }
.profile-showcase .showcase-layout-tools [data-layout-reset] { border-color: transparent; background: transparent; color: var(--gallery-quiet); }
.showcase-layout-tools [role="status"], .showcase-layout-hint { flex-basis: 100%; margin: 0; color: var(--gallery-note); font-size: 12px; line-height: 1.5; }
.showcase-layout-tools [role="status"] { color: var(--gallery-error); }
.showcase-layout-tools [role="status"]:empty { display: none; }
.showcase-layout-tools :is(button, select, input):focus-visible, .showcase-heading-actions button:focus-visible { outline: 2px solid #8060c5; outline-offset: 3px; }
.showcase-layout-tools :disabled { opacity: .6; cursor: wait; }
.showcase-slot-count { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 13px; }
.showcase-slot-count select { padding: 8px 10px; border: 1px solid #b9a5ca; border-radius: 6px; background: white; }
.profile-showcase > #showcaseEmpty { padding: 36px 24px; border: 1px dashed var(--gallery-empty-line); border-radius: 18px; background: var(--gallery-empty); color: var(--gallery-empty-ink); text-align: center; font-size: 14px; }
.profile-showcase .showcase-empty-action { display: block; margin: 16px auto 0; padding: 10px 16px; border: 1px solid var(--gallery-night-edge, #343b32); border-radius: 99px; background: var(--gallery-night-deep, #343b32); box-shadow: none; color: var(--gallery-night-on-deep, #fffdf7); font-size: 12px; }
@media (max-width: 760px) {
    .showcase-inventory { top: 12px; left: 8px; width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 14px; }
    .showcase-inventory h3 { font-size: 18px; }
    .showcase-inventory-thumbnail { height: 80px; }
    .showcase-inventory-thumbnail > .object-finishes { inset: 1px 8px; }
    .showcase-heading-actions { justify-content: flex-start; }
    .showcase-viewport { border-radius: 12px; }
    .showcase-canvas:not(.is-zoomed) .shelf-edit { visibility: hidden; }
    .showcase-canvas.is-zoomed .shelf-edit { opacity: 1; pointer-events: auto; }
    .showcase-layout-tools { gap: 10px; padding: 12px; }
    .showcase-layout-tools label { flex: 1 1 110px; max-width: none; }
    .showcase-layout-actions { margin-left: 0; width: 100%; }
    .showcase-layout-actions [data-layout-save] { margin-left: auto; }
}
/* A card slot's price tag (the Price Tag): a paper tag on a string, tied to the slot's top corner. */
.card-display-slot .showcase-price-tag { position: absolute; top: -6px; right: -10px; z-index: 3; display: inline-flex; align-items: center; min-height: 0; padding: 3px 9px 3px 14px; border: 1px solid #b89c62; border-radius: 3px 6px 6px 3px; background: #fff6dc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); color: #4a3a1c; font: 800 11px/1.2 "Cinzel", Georgia, serif; letter-spacing: 0.02em; white-space: nowrap; transform: rotate(8deg); transform-origin: left center; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.card-display-slot .showcase-price-tag::before { content: ''; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #b89c62; }
.card-display-slot button.showcase-price-tag { cursor: pointer; }
.card-display-slot button.showcase-price-tag:hover, .card-display-slot .showcase-price-tag.is-armed { background: #ffe9a8; }
.card-display-slot .showcase-price-tag.is-armed { transform: rotate(0deg); }
.card-display-slot button.showcase-price-tag:focus-visible { outline: 3px solid #d53879; outline-offset: 2px; }
/* Presets and the modular slot's size controls. */
.showcase-preset-picker { display: flex; align-items: center; gap: 6px; color: var(--gallery-night-muted, #72634c); font-size: 11px; font-weight: 700; }
.showcase-preset-picker[hidden] { display: none; }
.showcase-preset-picker input { width: 150px; min-height: 42px; padding: 0 12px; border: 1px solid var(--gallery-night-line, #d8d0c6); border-radius: 99px; background: var(--gallery-night-surface, #fffaf3); color: var(--gallery-night-ink, #514b43); font-size: 12px; font-weight: 700; }
.showcase-preset-picker :is(select, input)[hidden], .showcase-preset-rename[hidden] { display: none; }
.showcase-preset-picker select { min-height: 42px; padding: 0 12px; border: 1px solid var(--gallery-night-line, #d8d0c6); border-radius: 99px; background: var(--gallery-night-surface, #fffaf3); color: var(--gallery-night-ink, #514b43); font-size: 12px; font-weight: 700; }
.profile-showcase .showcase-item-actions :is([data-object-shrink], [data-object-grow]) { min-width: 34px; padding: 7px 0; font-size: 15px; }
.showcase-item-actions button[hidden] { display: none; }
/* A statue slot: one Marble Statue, standing on its own base, stickers welcome. A poster frame and a
   display stand are the same slot for a poster or a figurine (statue.js). */
.statue-showcase { width: 230px; }
.poster-showcase { width: 190px; }
.object-stand-showcase { width: 210px; }
.profile-showcase .statue-preview,
.statue-showcase .statue-preview, .poster-showcase .statue-preview, .object-stand-showcase .statue-preview { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; transform: none; cursor: zoom-in; }
.statue-stage { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 230 / 360; }
.statue-figure { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.statue-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; pointer-events: none; filter: drop-shadow(0 10px 12px #2a241c38); }
.statue-art.is-negative { filter: invert(1) drop-shadow(0 10px 12px #2a241c38); }
/* A statue's finishes lie on the figure, cut to the statue's own outline as the picture is laid out (#950). */
.statue-figure > .object-finishes { -webkit-mask: var(--statue-mask) bottom / contain no-repeat; mask: var(--statue-mask) bottom / contain no-repeat; }
.statue-figure.is-negative-object { filter: none; }
.statue-figure.is-negative-object > .statue-art { filter: invert(1) drop-shadow(0 10px 12px #2a241c38); }
.statue-art-link { position: absolute; inset: 0; display: block; }
.statue-art[hidden], .statue-art-link[hidden], .statue-empty[hidden], .statue-surface[hidden] { display: none; }
/* While the showcase is being arranged, an empty plinth shows where a statue goes. */
.is-arranging .statue-stage.is-empty .statue-figure { border: 2px dashed #9f927b; border-radius: 10px; }
.statue-empty { align-self: center; color: var(--scene-ink, var(--gallery-night-muted, #72634c)); font-size: 12px; }
.statue-surface { position: absolute; inset: 6% 12% 2%; --sticker-width: 26%; --sticker-height: auto; }
/* A poster hangs in a frame behind a cream mat; it is a flat print, so its finishes cover it whole. Its box is
   square: upright (the default) it takes three quarters of the width, across it takes the width and sits mid-height. */
.statue-stage.is-poster { width: 75%; margin: 0 auto; aspect-ratio: 3 / 4; padding: 14px; box-sizing: border-box; border-radius: 4px; background: linear-gradient(135deg, #8a5a32, #5b3a1f 55%, #7a4d2a);
    box-shadow: inset 0 0 0 2px #3e2713, 0 12px 18px #2a241c40; transform-origin: 50% 0; }
.statue-stage.is-poster .statue-figure { background: #f4ecdc; box-shadow: inset 0 2px 6px #00000038; padding: 10px; }
.statue-stage.is-poster .statue-art { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-position: center; filter: none; }
.statue-stage.is-poster .statue-figure.is-negative-object > .statue-art { filter: invert(1); }
.statue-stage.is-poster .statue-surface { inset: 10px; }
.is-arranging .statue-stage.is-poster.is-empty .statue-figure { border-radius: 2px; }
.statue-stage.is-poster[data-shape="square"] { width: 100%; aspect-ratio: 1; }
.statue-stage.is-poster[data-shape="landscape"] { width: 100%; aspect-ratio: 4 / 3; margin: 12.5% 0; }
/* The frame its owner chose; "none" hangs the print bare, with no mat. */
.statue-stage.is-poster[data-frame="black"] { background: linear-gradient(135deg, #3a3d42, #16171a 55%, #2b2d31); box-shadow: inset 0 0 0 2px #050506, 0 12px 18px #2a241c40; }
.statue-stage.is-poster[data-frame="gold"] { background: linear-gradient(135deg, #f1d488, #a87a2a 45%, #e6c26a 70%, #8c6420); box-shadow: inset 0 0 0 2px #6b4a14, inset 0 0 0 5px #f6e2a855, 0 12px 18px #2a241c40; }
.statue-stage.is-poster[data-frame="white"] { background: linear-gradient(135deg, #ffffff, #e6e3dc 60%, #f6f4ef); box-shadow: inset 0 0 0 1px #c9c4b8, 0 12px 18px #2a241c40; }
.statue-stage.is-poster[data-frame="none"] { padding: 0; background: none; box-shadow: none; }
.statue-stage.is-poster[data-frame="none"] .statue-figure { padding: 0; background: none; box-shadow: 0 6px 12px #2a241c40; }
.statue-stage.is-poster[data-frame="none"] .statue-art { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.statue-stage.is-poster[data-frame="none"] .statue-surface { inset: 0; }
/* A figurine stands as it is, with no base of its own. */
.statue-stage.is-stand { aspect-ratio: 210 / 300; }
/* What has just been put in place arrives: a poster swings on its nail, a figurine drops into place. */
.statue-stage.is-poster.is-arriving { animation: poster-hang .9s cubic-bezier(.3, 1.4, .5, 1); }
.statue-stage.is-stand.is-arriving .statue-figure,
.statue-stage.is-statue.is-arriving .statue-figure { animation: figure-settle .6s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 100%; }
@keyframes poster-hang { 0% { transform: rotate(-7deg); } 35% { transform: rotate(4deg); } 65% { transform: rotate(-2deg); } 100% { transform: none; } }
@keyframes figure-settle { 0% { transform: translateY(-14%) scale(.96, 1.04); opacity: 0; } 55% { transform: translateY(0) scale(1.05, .95); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .statue-stage.is-arriving, .statue-stage.is-arriving .statue-figure { animation: none; }
}
.statue-editor { width: min(1080px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; box-sizing: border-box; padding: 24px; border: 3px solid var(--gallery-night-edge, #25252d); border-radius: 17px; background: var(--gallery-night-surface, #fdfaf5); color: var(--gallery-night-ink, #25252d); overflow-y: auto; }
.statue-editor:not([open]) { display: none; }
.statue-editor::backdrop { background: #191323b3; }
.statue-editor [data-statue-canvas] { width: min(100%, 44vh); margin: auto; }
.statue-editor .sticker-editor { padding: 0; margin: 0; border: 0; }
.statue-editor .sticker-editor[hidden] { display: none; }
.showcase-inventory-thumbnail img.is-negative { filter: invert(1); }
@media (max-width: 760px) {
    .statue-editor [data-statue-canvas] { width: min(100%, 22vh); margin: 8px auto; }
    .statue-editor { padding: 16px; }
}