/* Shared rhythm: artwork, controls and screen edges each get their own room. */
#shell{
 --space-tight:8px;
 --space-control:12px;
 --space-group:16px;
 --space-section:24px;
 --panel-gutter:clamp(12px,1.7vw,24px);
 --screen-safe-top:env(safe-area-inset-top,0px);
 --screen-safe-right:env(safe-area-inset-right,0px);
 --screen-safe-bottom:env(safe-area-inset-bottom,0px);
 --screen-safe-left:env(safe-area-inset-left,0px);
}
#shell #collection-panel .collection-dialog{gap:0}
#shell #collection-panel .collection-header{padding:12px var(--panel-gutter);gap:12px}
#shell #collection-panel :is(.collection-body,.collection-store,#snake-builder-panel,#collection-book){padding:var(--panel-gutter);box-sizing:border-box}
#shell #collection-panel :is(.collection-body,.collection-store,.store-layout){gap:var(--space-group)}
#shell #collection-panel .collection-body{grid-template-columns:clamp(200px,19vw,280px) minmax(0,1fr)}
#shell #collection-panel .store-layout{grid-template-columns:clamp(190px,17vw,250px) minmax(0,1fr)}
#shell #collection-panel :is(.collection-catalog,.store-browser){gap:var(--space-control)}
#shell #collection-panel :is(#collection-cards,#store-cards)[data-view]{grid-template-columns:repeat(var(--catalog-columns,4),minmax(0,1fr));gap:12px;padding:3px 5px 3px 3px}
#shell #collection-panel .catalog-card-shell>:is(.collection-card,.store-card){padding-inline:10px}
#shell #collection-panel .store-sidebar{gap:16px}
#shell #collection-panel .store-filters{gap:8px}
#shell #collection-panel :is(.collection-footer,.store-footer){gap:12px;padding:12px}
#shell #collection-panel .browse-toolbar{gap:8px}
#shell #collection-panel :is(.collection-actions,.store-actions){gap:8px}
#shell #snake-builder-panel .snake-builder-controls{padding:16px}
#shell #snake-builder-panel :is(.snake-builder-parts,.snake-builder-list){gap:12px}

/* Keep settings readable as groups, without stretching a label and its value
   to opposite edges of a desktop screen. Open groups keep natural height. */
#shell #settings-panel .settings-dialog{padding:var(--panel-gutter);gap:16px}
#shell #settings-panel #settings-general{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;align-items:start;gap:16px;padding:3px 5px 12px 3px}
#shell #settings-panel .settings-group{align-self:start}
#shell #settings-panel .settings-group>summary{min-height:76px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
#shell #settings-panel .settings-current{font-size:.78rem;line-height:1.5;overflow-wrap:anywhere}
#shell #settings-general .setting-tile{padding:16px}
#shell #settings-panel :is(.control-settings,.guide-grid){gap:16px}
#shell #settings-panel :is(.control-instructions,.guide-grid article){padding:16px}
#shell #settings-panel .guide-grid article p{max-width:60ch}

/* Secondary screens use the same breathing room and bounded reading widths. */
#shell #expansion-panel .expansion-dialog{padding:var(--panel-gutter);column-gap:16px}
#shell #expansion-panel .mode-cards{gap:12px}
#shell #expansion-panel .mode-launch{padding:16px;gap:12px;margin-bottom:16px}
#shell #expansion-panel .mode-card{padding:16px}
#shell #expansion-panel :is(.social-grid,.stats-grid,.achievement-grid){gap:16px}
#shell #party-panel .party-dialog{padding:var(--panel-gutter)}
#shell #party-panel .party-columns{gap:16px}
#shell #party-panel .party-choice{padding:20px}
#shell #rooms-panel .rooms-dialog{padding:var(--panel-gutter)}
#shell #rooms-panel #room-list{gap:12px}
#shell #rooms-panel .room-row{padding:16px;gap:12px}

@media(min-width:1100px) and (min-height:651px){
 #shell #settings-panel .settings-dialog{width:min(1060px,100%);height:min(760px,100%)}
 #shell #collection-panel .collection-tabs{max-width:900px}
 #shell #collection-panel .collection-tabs button{padding-inline:20px}
 #shell #snake-builder-panel{column-gap:24px}
}
@media(orientation:portrait){
 #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .lobby-card{grid-template-rows:minmax(140px,1fr) auto auto}
 #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .player-dock{grid-template-rows:44px repeat(2,minmax(64px,auto));width:100%}
 #shell:is([data-text-size=large],[data-text-size=extra]) #lobby .loadout-bar{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto}
 #shell:is([data-text-size=large],[data-text-size=extra]) #lobby #auto-join{grid-column:1/-1;min-height:52px}
 #shell #collection-panel{padding:max(12px,var(--screen-safe-top)) max(12px,var(--screen-safe-right)) max(12px,var(--screen-safe-bottom)) max(12px,var(--screen-safe-left))}
 #shell #collection-panel .collection-dialog{width:100%;min-width:0;max-width:100%;height:100%;overflow:hidden}
 #shell #collection-panel .collection-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-width:0}
 #shell #collection-panel #collection-close{justify-self:start;grid-column:1;grid-row:1}
 #shell #collection-panel .coin-pill{grid-column:2;grid-row:1;justify-self:end}
 #shell #collection-panel .collection-tabs{grid-column:1/-1;grid-row:2;min-width:0;max-width:100%;width:100%;height:auto;overflow-x:auto}
 #shell #collection-panel .collection-tabs button{flex:0 0 auto;min-height:44px;padding:8px 12px}
 #shell #collection-panel :is(.collection-store,.collection-body){display:block;overflow:auto;overscroll-behavior:contain;min-width:0}
 #shell #collection-panel .store-sidebar{display:none}
 #shell #collection-panel #store-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 190px auto auto auto;height:auto;overflow:visible;gap:12px}
 #shell #collection-panel #store-layout .store-browser{display:contents}
 #shell #collection-panel .browse-toolbar{flex-wrap:wrap}
 #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .browse-toolbar .catalog-paging{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;flex:1 0 100%;width:100%;margin:0}
 #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .catalog-paging span{grid-column:1/-1;text-align:right}
 #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .catalog-paging select{min-width:0;width:100%;max-width:100%}
 #shell #collection-panel #store-layout .browse-toolbar{grid-column:1;grid-row:1}
 #shell #collection-panel #store-layout .store-category{display:block;flex:1 1 100px}
 #shell #collection-panel #store-layout #store-preview-stage{grid-column:1;grid-row:2;display:flex;flex-direction:column;height:190px;min-height:0;padding:8px;box-sizing:border-box;overflow:hidden}
 #shell #collection-panel #store-layout :is(#store-edition-label,#store-detail-tag,#store-detail-name){display:none}
 #shell #collection-panel #store-layout #store-inspect{min-height:0;flex:1;display:flex;flex-direction:column}
 #shell #collection-panel #store-layout #store-preview{height:0;min-height:0;max-height:none;flex:1;width:100%;object-fit:contain}
 #shell #collection-panel #store-layout :is(#store-cards,#store-empty){grid-column:1;grid-row:3}
 #shell #collection-panel #store-layout .store-footer{grid-column:1;grid-row:4}
 #shell #collection-panel #store-layout #store-status{grid-column:1;grid-row:5}
 #shell #collection-panel :is(#collection-cards,#store-cards){height:auto;min-height:220px;overflow:visible;flex:none}
 #shell #collection-panel .collection-catalog{overflow:visible;height:auto}
 #shell #collection-panel #collection-preview-stage{height:200px;margin-bottom:12px}
 #shell #collection-panel :is(.collection-footer,.collection-actions){flex-wrap:wrap}
 #shell #collection-panel #snake-builder-panel{display:flex;flex-direction:column;overflow:auto}
 #shell #snake-builder-panel .snake-builder-stage{height:200px;min-height:200px;flex:none}
 #shell #snake-builder-panel .snake-builder-controls{overflow:visible;flex:none}
 #shell #settings-panel #settings-general{grid-template-columns:1fr;gap:12px}
 #shell #settings-panel .settings-group>summary{min-height:68px;padding:12px 16px}
}
@media(orientation:landscape) and (max-height:650px){
 #shell{--panel-gutter:10px;--space-group:12px}
 #shell :is(#collection-panel,#settings-panel,#party-panel,#rooms-panel,#expansion-panel,#account-panel,#career-panel):not(.keyboard-panel){padding:max(8px,var(--screen-safe-top)) max(12px,var(--screen-safe-right)) max(10px,var(--screen-safe-bottom)) max(12px,var(--screen-safe-left))}
 #shell #collection-panel .collection-header{padding:8px 10px;gap:8px}
 #shell #collection-panel :is(.collection-body,.collection-store,#snake-builder-panel,#collection-book){padding:8px 10px 10px}
 #shell #collection-panel .collection-body{grid-template-columns:minmax(0,1fr)}
 #shell #collection-panel #collection-content[data-preview=open]{grid-template-columns:160px minmax(0,1fr)}
 #shell #collection-panel #store-layout{gap:8px 12px}
 #shell #collection-panel #store-layout:not(:has(.store-item-details[open])) :is(#store-detail-tag,#store-detail-name){display:none}
 #shell #collection-panel #store-layout #store-inspect-label{font-size:.7rem;line-height:1.35;margin:4px 0 0}
 #shell #collection-panel :is(.collection-catalog,.store-browser){gap:8px}
 #shell #collection-panel :is(.collection-footer,.store-footer){padding:8px;gap:8px}
 #shell #collection-panel .catalog-card-shell>:is(.collection-card,.store-card){padding-inline:8px}
 #shell #settings-panel .settings-dialog{padding:12px;gap:12px}
 #shell #settings-panel #settings-general{gap:12px}
 #shell #settings-panel .settings-group>summary{min-height:68px;padding:12px;gap:4px}
 #shell #expansion-panel .expansion-dialog{column-gap:12px}
 #shell #expansion-panel .mode-launch{padding:10px;gap:8px;margin-bottom:12px}
 #shell #expansion-panel .mode-card{padding:12px}
 #shell #party-panel .party-choice{padding:12px}
 #shell #party-panel .party-columns{gap:12px}
 #shell #rooms-panel .room-row{padding:12px}
}
@media(max-width:740px){
 #shell #settings-panel #settings-general{grid-template-columns:1fr}
 #shell #settings-panel .settings-group>summary{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;min-height:48px;gap:6px 12px}
}
/* Enlarged text uses the same responsive columns as pagination, with natural
   scrolling height instead of squeezing labels or adding empty grid rows. */
#shell:is([data-text-size=large],[data-text-size=extra]) #settings-panel #settings-general{grid-template-columns:1fr}
#shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(#collection-cards,#store-cards)[data-view]{grid-template-columns:repeat(var(--catalog-columns,2),minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:minmax(220px,auto)}
#shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .catalog-card-shell>:is(.collection-card,.store-card){display:flex!important;flex-direction:column;justify-content:center;gap:6px!important}
#shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(.collection-card,.store-card) strong{padding:0;text-align:center;justify-content:center}
@media(orientation:landscape) and (max-height:650px){
 /* Large text needs real scrolling space: fixed toolbar + fixed footnotes
    otherwise consume almost the entire short viewport. Keep Back in its header. */
 #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel:not(.keyboard-panel) :is(.collection-store,.collection-body){display:block;overflow:auto;overscroll-behavior:contain}
 #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel:not(.keyboard-panel) #store-layout:not(:has(.store-item-details[open])){flex:none;height:auto;min-height:0;overflow:visible;grid-template-rows:auto minmax(220px,auto) auto auto}
 #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel:not(.keyboard-panel) :is(#collection-cards,#store-cards){flex:none;min-height:220px!important;overflow:visible}
 #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel:not(.keyboard-panel) .collection-catalog{overflow:visible!important}
 #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel:not(.keyboard-panel) #collection-preview-stage{display:none}
}

/* Artwork-first snake browsing: eight tall cards, with the complete name,
   price and actions anchored to the selection instead of repeated below art. */
#shell #collection-panel :is(#collection-cards,#store-cards){touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain}
/* Cards clip their artwork, so their own touch policy must reserve horizontal
   gestures before the browser reaches the catalog ancestor. */
#shell #collection-panel :is(.collection-card,.store-card,.collection-card canvas,.store-card canvas){touch-action:pan-y pinch-zoom}
#shell #collection-panel :is(#collection-cards,#store-cards)[data-paginated=true],#shell #collection-panel [data-paginated=true] :is(.collection-card,.store-card,canvas){cursor:grab;-webkit-user-select:none;user-select:none}
#shell #collection-panel :is(#collection-cards,#store-cards)[data-dragging=true],#shell #collection-panel [data-dragging=true] :is(.collection-card,.store-card,canvas){cursor:grabbing}
#shell #collection-panel .browse-toolbar .catalog-paging .catalog-gesture-hint{font-size:.65rem;line-height:1.25;color:#c5dadf;white-space:nowrap;max-width:none;flex:0 0 auto}
#shell #collection-panel :is(#collection-cards,#store-cards)[data-artwork=true]{gap:6px;grid-template-rows:minmax(0,1fr)!important;overflow:hidden}
#shell #collection-panel [data-artwork=true] .catalog-card-shell>:is(.collection-card,.store-card){padding:8px 3px 24px!important;gap:0!important;min-width:44px;position:relative}
#shell #collection-panel [data-artwork=true] :is(.collection-card,.store-card)>:is(strong,small,.store-price,.card-badge){display:none!important}
#shell #collection-panel [data-artwork=true] .card-favorite{display:none!important}
#shell #collection-panel [data-artwork=true] :is(.collection-card,.store-card) canvas{width:100%!important;height:0!important;min-height:0!important;max-height:none!important;flex:1 1 0!important}
#shell #collection-panel [data-artwork=true] :is(.collection-card,.store-card)::after{content:'◇';position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:14px;line-height:18px;color:#e5d5b1;pointer-events:none}
#shell #collection-panel [data-artwork=true] [data-ownership=owned]::after{content:'✓';color:#bbefd7}
#shell #collection-panel [data-artwork=true] [data-ownership=equipped]::after{content:'✓';color:#ffe4a3}
#shell #collection-panel [data-artwork=true] :is(.collection-card,.store-card)[aria-pressed=true]{border-color:#ffe4a3!important;box-shadow:inset 0 0 0 2px #ffe4a350!important}
#shell #collection-panel #store-preview-stage{position:relative}
#shell #collection-panel .selected-favorite{position:absolute;right:2px;top:2px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#183449df;color:#fce8d7;font-size:22px;z-index:2}
#shell #collection-panel .selected-favorite[aria-pressed=true]{color:#ffbaca;background:#593447}
/* Details retain balance and replacement facts. The closed strip gives that
   space back to the artwork; purchase confirmation remains unchanged. */
@media(orientation:landscape){
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open])) .store-footer{min-height:0;flex-wrap:nowrap!important;padding:6px 8px;gap:8px!important}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open])) :is(#store-budget-note,#store-slot-note){display:none}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel .store-footer>.selection-summary{min-width:0;white-space:normal;line-height:1.3;overflow-wrap:anywhere}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel .store-footer>.store-item-details{flex-shrink:0}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open])) .store-actions{flex-shrink:0;flex-wrap:nowrap}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel .collection-footer{padding:6px 8px}
}

#shell #collection-panel :is(.store-item-details,.collection-item-details)>summary{min-width:44px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;border:1px solid #9bb9c54d;border-radius:10px;padding:6px 10px}
#shell #collection-panel :is(.store-item-details,.collection-item-details)[open]>summary{font-size:14px;justify-content:flex-start}
#shell #collection-panel .collection-catalog:has(.collection-item-details[open])>:is(.browse-toolbar,#collection-cards,#collection-empty,#equipped-slots){display:none}
#shell #collection-panel .collection-footer:has(.collection-item-details[open]){flex:1 1 0;flex-direction:column;align-items:stretch;min-height:0}
#shell #collection-panel .collection-footer:has(.collection-item-details[open])>.selection-summary{flex:none}
#shell #collection-panel .collection-item-details[open]{flex:1 1 0;display:flex;flex-direction:column;min-height:0}
#shell #collection-panel .collection-item-details[open] #collection-description{display:block;flex:1 1 auto;overflow:auto;font-size:.85rem;line-height:1.6;white-space:pre-line;margin:12px 0}
#shell #collection-panel .collection-footer:has(.collection-item-details[open]) .collection-actions{justify-content:flex-end}
@media(orientation:landscape) and (max-height:650px){
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open])) #store-detail-name{display:block;font-size:12px;line-height:1.3;margin:4px 0 0}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open]))[data-preview=open] #store-preview-stage{grid-row:2/4}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open]))[data-preview=open] .store-footer{grid-column:2}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open]))[data-preview=open] #store-selected-summary{display:none}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open])) .store-item-details{margin-right:auto}
}

#shell #collection-panel :is(.store-item-details,.collection-item-details)>summary::before{display:none}
#shell #collection-panel :is(.store-item-details,.collection-item-details)>summary::-webkit-details-marker{display:none}

#shell #collection-panel #collection-favorite{min-height:44px;min-width:44px;box-sizing:border-box}
@media(orientation:landscape) and (max-height:650px){
 /* Grid fits both rows in the same frame; Tall keeps one uninterrupted row.
    Names and prices stay with the selection in these short-screen views. */
 #shell #collection-panel :is(#collection-cards,#store-cards)[data-compact=true][data-view=grid]{grid-template-rows:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr);gap:6px;overflow:hidden}
 #shell #collection-panel [data-compact=true][data-view=grid] .catalog-card-shell{height:100%!important;min-height:0!important}
 #shell #collection-panel [data-compact=true][data-view=grid] .catalog-card-shell>:is(.collection-card,.store-card){height:100%!important;min-height:44px!important;padding:3px 8px!important;gap:0!important;position:relative}
 #shell #collection-panel [data-compact=true][data-view=grid] :is(.collection-card,.store-card)>:is(strong,small,.store-price,.card-badge){display:none!important}
 #shell #collection-panel [data-compact=true][data-view=grid] .card-favorite{display:none!important}
 #shell #collection-panel [data-compact=true][data-view=grid] :is(.collection-card,.store-card) canvas{width:100%;height:0!important;min-height:0!important;max-height:none!important;flex:1 1 0!important}
 #shell #collection-panel [data-compact=true][data-view=grid] :is(.collection-card,.store-card)::after{content:'◇';position:absolute;bottom:6px;left:8px;font-size:14px;line-height:18px;color:#e5d5b1;pointer-events:none}
 #shell #collection-panel [data-compact=true][data-view=grid] [data-ownership=owned]::after{content:'✓';color:#bbefd7}
 #shell #collection-panel [data-compact=true][data-view=grid] [data-ownership=equipped]::after{content:'✓';color:#ffe4a3}
}
/* Calm shared surfaces keep item color in the artwork. Only the chosen snake
   receives the brighter surface, strong rim and selection check. */
#shell #collection-panel :is(.collection-card,.store-card){background:linear-gradient(150deg,#254354,#182f40 78%)!important;border:1px solid #62829188!important;box-shadow:inset 0 1px #effbff12,0 2px 4px #06172722!important}
#shell #collection-panel :is(.collection-card,.store-card)[aria-pressed=true]{background:linear-gradient(150deg,#466879,#294b5c 78%)!important;border:2px solid #ffe2a2!important;box-shadow:inset 0 0 0 1px #ffe2a26b,0 0 0 1px #071d30!important}
#shell #collection-panel :is(.collection-card,.store-card)[aria-pressed=true]::before{content:'Preview';position:absolute;top:7px;left:7px;z-index:2;color:#ffe2a2;font-size:11px;line-height:18px;font-weight:800;pointer-events:none}
#shell #collection-panel :is(.collection-card,.store-card)[aria-pressed=true][data-ownership=equipped]::before{content:'Equipped ✓'}
#shell #collection-panel :is(.store-footer:not(:has(.store-item-details[open])),.collection-footer:not(:has(.collection-item-details[open]))){display:none!important}
#shell #collection-panel :is(#store-budget-note,#store-slot-note){display:none!important}
/* Every card owns a heart and a details/action entry. Both have 44px touch
   targets; a plus opens details and never directly buys or equips anything. */
#shell #collection-panel :is(#collection-cards,#store-cards) .card-favorite{display:block!important;z-index:3}
#shell #collection-panel .card-details{position:absolute;right:0;bottom:0;z-index:3;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:#e1edf0;font-size:24px;line-height:1;isolation:isolate;touch-action:manipulation}
#shell #collection-panel .card-details::before{content:'';position:absolute;inset:8px;border-radius:50%;z-index:-1;background:#163044e6;border:1px solid #9fb9c76b}
#shell #collection-panel .card-details:focus-visible{outline:2px solid #ffe2a2;outline-offset:-4px}
#shell #collection-panel .card-details:active{filter:brightness(1.2)}
#shell #collection-panel :is(#collection-cards,#store-cards) .catalog-card-shell>:is(.collection-card,.store-card){padding-bottom:44px!important}
#shell #collection-panel :is(#collection-cards,#store-cards)[data-artwork=true] .catalog-card-shell>:is(.collection-card,.store-card){padding:30px 3px 32px!important}
#shell #collection-panel [data-artwork=true] :is(.collection-card,.store-card)::after{left:7px;right:auto;bottom:13px;background:none;height:18px;z-index:1}
#shell.high-contrast #collection-panel :is(.collection-card,.store-card){background:#071521!important;border-color:#fff!important}
#shell.high-contrast #collection-panel :is(.collection-card,.store-card)[aria-pressed=true]{outline:3px solid #fff;outline-offset:-5px}
@media(orientation:landscape) and (max-height:650px){
 #shell #collection-panel #store-layout:not(:has(.store-item-details[open])){grid-template-rows:auto minmax(0,1fr);row-gap:8px}
 #shell:not([data-text-size=large]):not([data-text-size=extra]) #collection-panel #store-layout:not(:has(.store-item-details[open]))[data-preview=open] #store-preview-stage{grid-row:2}
 #shell #collection-panel :is(#collection-cards,#store-cards)[data-compact=true][data-view=grid] .catalog-card-shell>:is(.collection-card,.store-card){padding:5px!important}
 #shell #collection-panel [data-compact=true][data-view=grid] :is(.collection-card,.store-card)::after{left:8px;right:auto;bottom:6px;background:none;height:18px;z-index:1}
}
@media(forced-colors:active){#shell #collection-panel :is(.collection-card,.store-card){background:Canvas!important;border-color:ButtonText!important}}

/* The item page repeats neither the browsing gesture hint nor an overlapping
   status badge. Keep the centered top status and top-right heart separate. */
#shell #collection-panel #store-layout:has(.store-item-details[open]) #store-inspect-label,
#shell #collection-panel #collection-content:has(.collection-item-details[open]) #collection-preview-size{display:none!important}
#shell #collection-panel #store-layout:has(.store-item-details[open]) #store-inspect{order:1}
#shell #collection-panel #store-layout:has(.store-item-details[open]) #store-detail-name{order:2}
#shell #collection-panel #store-layout:has(.store-item-details[open]) #store-detail-tag{max-width:calc(100% - 76px);box-sizing:border-box;overflow-wrap:normal}
@media(orientation:landscape){
 #shell #collection-panel #store-layout:has(.store-item-details[open]){grid-template-columns:clamp(220px,19vw,250px) minmax(0,1fr);height:100%;min-height:0;box-sizing:border-box;grid-template-rows:minmax(0,1fr)!important}
 #shell #collection-panel #collection-store:has(.store-item-details[open]){overflow:hidden!important}
 #shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel #store-layout:has(.store-item-details[open]){grid-template-columns:300px minmax(0,1fr)}
}

#shell #collection-panel .collection-footer:has(.collection-item-details[open]) .collection-actions{flex-wrap:wrap;gap:8px}
/* A detail page needs a bounded column even when the browsing catalogue uses
   natural scrolling height for enlarged text. Keep its actions in the frame. */
#shell #collection-panel .collection-catalog:has(.collection-item-details[open]){min-width:0;min-height:0;overflow:hidden!important}
#shell #collection-panel .collection-footer:has(.collection-item-details[open]){width:100%;max-width:100%;box-sizing:border-box;min-width:0}
#shell #collection-panel .collection-footer:has(.collection-item-details[open]) .collection-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));width:100%;max-width:none;min-width:0;flex-shrink:0}
#shell #collection-panel .collection-footer:has(.collection-item-details[open]) .collection-actions button{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere}
#shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel #collection-content:has(.collection-item-details[open]){display:block!important;overflow:hidden!important;min-width:0}
#shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .collection-catalog:has(.collection-item-details[open]){height:100%;width:100%;box-sizing:border-box}
#shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel #collection-content:has(.collection-item-details[open]) #collection-preview-stage{display:none}
/* Detail content forms one bounded vertical column, never wrapped columns. */
#shell #collection-panel .store-footer:has(.store-item-details[open]){flex-wrap:nowrap!important;flex-direction:column;align-items:stretch;width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
#shell #collection-panel .store-footer:has(.store-item-details[open])>.store-item-details{flex:1 1 0!important;min-height:0;min-width:0;max-width:100%;width:100%}
#shell #collection-panel .store-item-details[open] #store-detail-description{width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:auto}
#shell #collection-panel .store-footer:has(.store-item-details[open]) .store-actions{width:100%;min-width:0;max-width:100%;margin-left:0;flex-wrap:wrap;justify-content:flex-end;flex:none}
#shell #collection-panel .collection-footer:has(.collection-item-details[open]){flex-wrap:nowrap!important}
@media(orientation:portrait){
 #shell #collection-panel #collection-content:has(.collection-item-details[open]){display:flex!important;flex-direction:column;overflow:hidden!important;min-height:0}
 #shell #collection-panel #collection-content:has(.collection-item-details[open]) #collection-preview-stage{flex:0 0 160px;height:160px;min-height:0;margin:0 0 8px}
 #shell #collection-panel .collection-catalog:has(.collection-item-details[open]){flex:1 1 0;height:0;min-height:0;overflow:hidden!important}
 #shell #collection-panel #store-layout:has(.store-item-details[open]){display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;gap:8px}
 #shell #collection-panel #store-layout:has(.store-item-details[open]) #store-preview-stage{flex:0 0 160px;height:160px;min-height:0;width:100%;box-sizing:border-box}
 #shell #collection-panel #store-layout:has(.store-item-details[open]) .store-footer{flex:1 1 0;min-height:0}
}

/* Keep identity and catalogue controls readable when text is enlarged. */
#shell #lobby .profile-plaque{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;min-height:44px}
#shell #lobby .profile-plaque #profile-name{grid-column:1;grid-row:1;min-width:0}
#shell #lobby .profile-plaque #profile-identity{grid-column:1;grid-row:2;font-size:clamp(10px,.65em,14px);line-height:1.1}
#shell #lobby .profile-plaque>span:last-child{grid-column:2;grid-row:1/3}
#shell #collection-panel .browse-toolbar .catalog-paging span{max-width:none;flex:0 0 auto;white-space:nowrap}
#shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .browse-toolbar .catalog-paging{flex:0 0 100%;width:100%;justify-content:flex-end;margin-left:0}
#shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel .browse-toolbar .store-category{width:160px;flex:0 0 160px;max-width:100%}

/* Continuous horizontal catalogs. Existing controls and artwork stay intact. */
#shell #collection-panel :is(#collection-cards,#store-cards)[data-continuous=true][data-view]{grid-template-columns:none!important;grid-template-rows:repeat(var(--catalog-rows,1),minmax(0,1fr))!important;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--catalog-columns,4) - 1)*var(--catalog-gap,10px))/var(--catalog-columns,4));overflow-x:auto!important;overflow-y:hidden!important;touch-action:auto!important;scrollbar-width:none;scroll-snap-type:none;overflow-anchor:none;padding:0!important}
#shell #collection-panel :is(#collection-cards,#store-cards)[data-continuous=true]::-webkit-scrollbar{display:none;width:0;height:0}
#shell #collection-panel [data-continuous=true] :is(.collection-card,.store-card,canvas){touch-action:auto!important}
#shell:is([data-text-size=large],[data-text-size=extra]) #collection-panel :is(#collection-cards,#store-cards)[data-continuous=true]{min-height:calc(var(--catalog-rows,1)*220px + (var(--catalog-rows,1) - 1)*var(--catalog-gap,10px))!important}

/* The loading shape uses the alpha contour of this exact catalog snake. */
:is(#collection-cards,#store-cards) [data-slot="finish"] canvas:not([data-gallery-painted]):not([data-gallery-placeholder]) {
 background:#a0a6af;
 mask-image:var(--row-mask);mask-size:var(--row-mask-size);mask-position:var(--row-mask-position);mask-repeat:no-repeat;
}
:is(#collection-cards,#store-cards)[data-view="grid"] [data-slot="finish"] canvas:not([data-gallery-painted]):not([data-gallery-placeholder]) {
 mask-image:var(--grid-mask);mask-size:var(--grid-mask-size);mask-position:var(--grid-mask-position);
}