/* R58 · square-only purple/gold gallery. Pagination and preview belong to UE. */
.square-page.square-gallery {
 --square-bg:#100e17;
 --square-surface:#1b1529;
 --square-raised:#271c39;
 --square-accent:#c5a6ee;
 --square-accent-strong:#8253b6;
 --square-tint:#b889e71a;
 --square-border:#c5a6ee29;
 --square-muted:#a99bb7;
 --square-columns:2;
 --square-gap:10px;
 --square-page-gradient:linear-gradient(90deg,#321c4a 0%,#291d38 38%,#46331c 76%,#251b2a 100%);
 min-width:0;width:100%;max-width:none;min-height:100%;
 container-type:inline-size;container-name:square-gallery;
 padding:calc(var(--catalog-top,50px) + 8px) 12px calc(var(--dock-panel-bottom,var(--catalog-bottom,112px)) + 16px);
 /* Fallback repeats one viewport, so long lists never stretch the two colors away. */
 background:var(--square-page-gradient);background-size:100% 100vh;background-size:100% 100dvh;background-repeat:repeat-y;
 color:#f1ebf6;
}
.square-page.square-gallery[data-square-tab=community] {
 --square-bg:#14110d;
 --square-surface:#231c13;
 --square-raised:#332818;
 --square-accent:#dfc08a;
 --square-accent-strong:#a17a38;
 --square-tint:#d2ac681a;
 --square-border:#dfc08a2b;
 --square-muted:#b3a48a;
 --square-page-gradient:linear-gradient(90deg,#2d1b44 0%,#3b292d 38%,#503a20 76%,#2c2027 100%);
 color:#f5eee2;
}
/* The existing channel panel is the scroll viewport. Paint its border box,
   leaving the long gallery transparent and keeping the blend on every screen. */
@supports selector(:has(*)) {
 .channel-panel[data-channel=square]:has(>.square-gallery) {background:linear-gradient(118deg,#321c4a 0%,#291d38 38%,#46331c 76%,#251b2a 100%);background-size:100% 100%;background-repeat:no-repeat;background-attachment:scroll;}
 .channel-panel[data-channel=square]:has(>.square-gallery[data-square-tab=community]) {background-image:linear-gradient(118deg,#2d1b44 0%,#3b292d 38%,#503a20 76%,#2c2027 100%);}
 .channel-panel[data-channel=square]>.square-page.square-gallery {background:none;}
}
.square-gallery :is(button,a) {-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.square-gallery [hidden] {display:none!important;}
.square-gallery :is(button,a):focus-visible {outline:2px solid var(--square-accent);outline-offset:3px;}
.square-gallery .square-controls {min-width:0;margin:0 0 12px;}
.square-gallery .square-tabs {display:flex;align-items:stretch;gap:6px;min-width:0;margin:0;padding:3px;border:1px solid var(--square-border);border-radius:12px;background:#08070a66;}
.square-gallery .square-tab {position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;margin:0;padding:9px 6px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--square-muted);font:inherit;font-size:13px;font-weight:500;line-height:1.5;text-align:center;overflow-wrap:anywhere;}
.square-gallery .square-tab:is([aria-selected=true],.is-active) {border-color:var(--square-border);background:var(--square-raised);color:var(--square-accent);box-shadow:inset 0 1px #ffffff08;}
.square-gallery .square-sorts {display:flex;align-items:center;gap:4px;min-width:0;margin:6px 0 10px;padding:0;}
.square-gallery .square-sort {display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:44px;max-width:33.333%;margin:0;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--square-muted);font:inherit;font-size:11px;font-weight:400;line-height:1.5;text-align:center;overflow-wrap:anywhere;}
.square-gallery .square-sort:is([aria-pressed=true],[aria-selected=true],.is-active) {color:var(--square-accent);font-weight:600;background:var(--square-tint);}
.square-gallery :is(.square-tab,.square-sort):disabled {opacity:.55;cursor:wait;}

/* UE owns bounded masonry offsets/heights; do not add columns or a second scroller. */
.square-gallery .square-masonry {position:relative;min-width:0;width:100%;}
.square-gallery .square-tile {position:absolute;left:0;top:0;display:block;box-sizing:border-box;min-width:0;margin:0;padding:0;border:0;border-radius:11px;overflow:hidden;background:var(--square-surface);box-shadow:inset 0 0 0 1px var(--square-border);color:inherit;text-align:left;text-decoration:none;cursor:pointer;touch-action:pan-y pinch-zoom;}
.square-gallery .square-poster {position:relative;display:block;width:100%;min-width:0;aspect-ratio:var(--square-ratio,3/4);overflow:hidden;isolation:isolate;background:var(--square-raised);}
.square-gallery .square-poster>:is(img,video) {display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.square-gallery .square-poster>:is(img,video) {position:absolute;inset:0;margin:0;border:0;}
.square-gallery .square-poster>img {z-index:0;}
.square-gallery .square-poster>video {z-index:1;pointer-events:none;}
.square-gallery .square-tile:is([data-previewing=true],.is-previewing) {border-color:var(--square-accent);box-shadow:0 0 0 1px var(--square-accent-strong);}
/* Metadata is measured by the gallery; ordinary titles reserve only used lines. */
.square-gallery .square-title {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;box-sizing:content-box;min-width:0;height:36px;margin:8px 9px 4px;padding:0;color:inherit;font-size:12px;font-weight:500;line-height:18px;overflow-wrap:anywhere;}
.square-gallery:not(.picfans-gallery) .square-title {height:auto;min-height:18px;margin-bottom:2px;}
.square-gallery .square-author {display:block;box-sizing:content-box;min-width:0;height:18px;margin:0 9px 8px;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--square-muted);font-size:10px;font-weight:400;line-height:18px;}
.square-gallery .square-heat {position:absolute;right:7px;bottom:7px;z-index:2;display:block;box-sizing:border-box;min-width:0;max-width:calc(100% - 14px);margin:0;padding:3px 6px;border:1px solid var(--square-border);border-radius:6px;background:#100c14bf;color:#f1e7dc;font-size:10px;font-weight:400;line-height:1.5;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;pointer-events:none;}
.square-gallery .square-status {clear:both;min-width:0;margin:12px 0;padding:10px 2px;color:var(--square-muted);font-size:11px;line-height:1.7;text-align:center;overflow-wrap:anywhere;}
.square-gallery .square-status:empty {display:none;}
.square-gallery .square-status:is([data-state=error],[data-status=error]) {color:#e6b1be;}
.square-gallery .square-load-more {display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;min-height:44px;margin:10px 0 0;padding:10px 12px;border:1px solid var(--square-border);border-radius:10px;background:var(--square-tint);color:var(--square-accent);font:inherit;font-size:12px;line-height:1.6;text-align:center;overflow-wrap:anywhere;}
.square-gallery .square-load-more:disabled {opacity:.6;cursor:wait;}
.square-gallery .square-sentinel {display:block;width:100%;height:1px;pointer-events:none;}
@media(min-width:700px) {.square-page.square-gallery {--square-gap:12px;}}
@media(min-width:1024px) {
 .square-page.square-gallery {--square-gap:14px;}
 .square-gallery .square-controls {margin-bottom:16px;}
 .square-gallery .square-tabs {max-width:520px;}
 .square-gallery .square-tab {font-size:14px;}
 .square-gallery .square-title {font-size:13px;}
}
/* Count follows gallery width, including a narrow phone preview on a wide PC. */
@container square-gallery (min-width:600px) {.square-gallery .square-masonry {--square-columns:3;}}
@container square-gallery (min-width:900px) {.square-gallery .square-masonry {--square-columns:4;}}
@container square-gallery (min-width:1200px) {.square-gallery .square-masonry {--square-columns:5;}}
@supports not (container-type:inline-size) {
 @media(min-width:1024px) {.square-page.square-gallery {--square-columns:4;}}
 @media(min-width:1280px) {.square-page.square-gallery {--square-columns:5;}}
}
@media(max-width:350px) {.square-page.square-gallery {--square-gap:8px;}.square-gallery .square-tab {font-size:12px;}.square-gallery .square-title {margin-inline:7px;font-size:11px;}.square-gallery :is(.square-author,.square-heat) {margin-inline:7px;}}
@media(prefers-reduced-motion:reduce) {.square-gallery :is(.square-tile,.square-tab,.square-sort) {animation:none;transition:none;}}

/* Full-width virtual ad rows share UE's masonry geometry, never the old grid
   min-height/aspect-ratio. Inline width/height/transform remain JS-owned. */
.square-gallery .square-masonry>.catalog-ad {position:absolute;left:0;top:0;box-sizing:border-box;display:block;grid-column:auto;flex:none;width:100%;max-width:none;min-height:0;max-height:none;aspect-ratio:auto;margin:0;padding:0;overflow:hidden;isolation:isolate;border:1px solid var(--square-border);border-radius:11px;background:var(--square-surface);color:inherit;text-decoration:none;text-align:left;}
.square-gallery .square-masonry>.catalog-ad>img {position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;margin:0;object-fit:cover;object-position:center;}
.square-gallery .square-masonry>.catalog-ad::after {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--square-surface) 0%,var(--square-surface) 22%,#0b07114d 100%);opacity:.92;pointer-events:none;}
.square-gallery .square-masonry>.catalog-ad>.ad-copy {position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;width:min(82%,34rem);max-width:100%;height:100%;min-height:0;margin:0;padding:12px 14px;gap:6px;}
.square-gallery .catalog-ad .ad-copy>strong {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:inherit;font-size:14px;font-weight:550;line-height:1.45;letter-spacing:-.015em;overflow-wrap:anywhere;}
.square-gallery .catalog-ad .ad-copy>small {display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--square-muted);font-size:10px;line-height:1.4;overflow-wrap:anywhere;}
.square-gallery .catalog-ad .ad-copy>span {display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--square-accent);font-size:11px;line-height:1.5;overflow-wrap:anywhere;}
.square-gallery .catalog-ad>.ad-label {z-index:3;top:8px;right:8px;margin:0;padding:2px 5px;border-color:var(--square-border);background:var(--square-surface);color:var(--square-accent);font-size:9px;line-height:1.4;pointer-events:none;}

.square-gallery .square-masonry>.catalog-ad[data-presentation="image"]>img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.square-gallery .square-masonry>.catalog-ad[data-presentation="image"]::after,.square-gallery .square-masonry>.catalog-ad[data-presentation="image"]>.ad-copy {display:none;}