/* A single, measured wardrobe frame: full-height stage, 8 cards or 4 tall cards. */
#shell #collection-panel{padding:clamp(10px,2vw,24px);background:linear-gradient(120deg,#102c3fee,#174556ec),var(--theme-world) center/cover;overflow:hidden}
#shell #collection-panel .collection-dialog{width:min(1600px,100%);height:100%;max-height:100%;grid-template-rows:52px minmax(0,1fr);padding:0;margin:0 auto;gap:clamp(8px,1.5vh,16px);background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#shell #collection-panel .collection-header{height:52px;gap:12px;min-height:0}
#collection-title{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
#shell #collection-panel .collection-header .back-button{width:44px;height:44px;border-radius:12px}
#shell #collection-panel .collection-tabs{margin:0;flex:1;max-width:800px;min-width:0;border:1px solid #bde5e34d;border-radius:12px;padding:4px;gap:4px}
#shell #collection-panel .collection-tabs button{min-height:40px;padding:7px 14px;font-size:clamp(12px,1.25vw,19px);border-radius:8px}
#shell #collection-panel .coin-pill{margin-left:auto;white-space:nowrap}
#shell #collection-panel .collection-body{grid-template-columns:minmax(90px,.65fr) minmax(160px,1.28fr) minmax(0,4fr);gap:clamp(10px,1.4vw,22px);height:auto;min-height:0}
#shell #collection-panel .collection-filters{padding:0;gap:7px;overflow:auto;scrollbar-width:thin}
#shell #collection-panel .collection-filters button{padding:12px 11px;min-height:44px;font-size:clamp(12px,1.1vw,16px);border-radius:10px;background:#ffffff09;border:1px solid transparent}
#shell #collection-panel .collection-filters [aria-pressed=true]{background:#caede7;color:#173e49;border-color:#f3fffc;box-shadow:0 3px #031d2860}
#shell #collection-panel .collection-preview{position:relative;min-height:0;max-height:none;align-self:stretch;padding:12px 10px;border:1px solid #d9eee8;border-radius:16px;background:linear-gradient(165deg,#edf7ee,#c2dfd8);box-shadow:0 6px 20px #001b282e;color:#173e49;gap:4px;overflow:hidden}
#shell #collection-panel .collection-preview .atelier-eyebrow{display:none}
#shell #collection-panel .collection-name{width:100%;padding:7px 10px;flex-shrink:0;background:#ffffffb0;font-size:clamp(12px,1.2vw,18px)!important}
#shell #collection-panel #collection-preview{width:100%;height:0;min-height:0;max-height:none;flex:1;object-fit:contain}
#shell #collection-panel .growth-preview{margin:0;width:100%;display:flex;align-items:center;gap:7px;font-size:10px;color:#3a646a}
#shell #collection-panel .growth-preview select{min-width:0;flex:1;height:28px;margin:0;padding:2px 5px;font-size:11px;border:1px solid #9cbbb7;border-radius:6px;background:#f7fcf5;color:#294c52}
#shell #collection-panel .collection-preview h3{font-size:clamp(16px,1.6vw,25px);line-height:1.05;margin:5px 0 2px;max-width:100%}
#shell #collection-panel .selection-tag{font-size:10px;color:#386068;min-height:12px}
#shell #collection-panel .favorite-button{padding:4px 10px;margin:0;font-size:11px!important;min-height:26px;background:#ffffff80;color:#315b61;border:1px solid #88aaa4}
#shell #collection-panel .favorite-button[aria-pressed=true]{color:#fff;background:#805578}
#shell #collection-panel .collection-catalog{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:10px;overflow:hidden}
#shell #collection-panel .catalog-heading{margin:0;min-height:32px}
#shell #collection-panel .catalog-heading h3{display:none}
#shell #collection-panel .catalog-heading small{font-size:11px;letter-spacing:1.8px;color:#b7d6d8}
#shell #collection-panel .view-switch button{height:34px;width:42px;border:1px solid #a8d3d8;border-radius:8px;font-size:25px;background:#ffffff0b}
#shell #collection-panel .view-switch [aria-pressed=true]{background:#e7f5ef;color:#164651}
#shell #collection-panel .catalog-tools{display:grid;grid-template-columns:minmax(90px,1.5fr) minmax(70px,1fr) minmax(65px,.8fr);gap:8px;margin:0}
#shell #collection-panel .catalog-tools label{font-size:10px;letter-spacing:.02em;gap:3px;color:#bfd5d8}
#shell #collection-panel .catalog-tools :is(input,select){height:32px;min-height:0;margin:0;padding:5px 8px;font-size:12px;border-radius:7px;border:1px solid #7aa4af;background:#123747;color:#f1faf6}
#shell #collection-panel .catalog-tools input::placeholder{color:#a5c5cc}
#shell #collection-panel .collection-cards,#shell #collection-panel .collection-cards[data-view=grid],#shell #collection-panel .collection-cards[data-view=row]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0;max-height:none;padding:0;overflow:hidden;align-content:stretch;align-items:stretch}
#shell #collection-panel .collection-cards[data-view=row]{grid-template-rows:minmax(0,1fr)}
#shell #collection-panel .collection-card{min-height:0;padding:7px 6px;gap:2px;border:1px solid #bad5cf80;border-radius:12px;background:linear-gradient(145deg,#e2eeed,#b5d2cf);color:#24474c;box-shadow:inset 0 1px #fff9;overflow:hidden;justify-content:flex-end}
#shell #collection-panel .collection-card[aria-pressed=true]{background:linear-gradient(145deg,#fffdf0,#e5efcf);border:2px solid #ffe78c;box-shadow:inset 0 0 0 1px #426864,0 2px 8px #001c2744}
#shell #collection-panel .collection-card canvas,#shell #collection-panel .collection-cards[data-view=row] canvas,#shell #collection-panel .collection-cards[data-catalog=snakes] .collection-card canvas{flex:1;width:100%;height:0;min-height:0;max-height:none;object-fit:contain}
#shell #collection-panel .collection-card strong{display:block;flex-shrink:0;font-size:clamp(10px,1.05vw,16px);line-height:1.05;color:#24474c;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#shell #collection-panel .collection-card small{font-size:clamp(9px,.85vw,12px);color:#45666a;line-height:1.1;margin:0}
#shell #collection-panel .card-badge{right:6px;top:4px;font-size:13px;color:#3e6268;z-index:1}
#shell #collection-panel .collection-footer{margin:0;padding:10px 12px;gap:12px;border:1px solid #bce0da40;border-radius:12px;min-height:0}
#shell #collection-panel .collection-footer p{font-size:clamp(11px,1vw,15px);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#shell #collection-panel .collection-actions{flex-direction:row;max-width:340px;gap:7px}
#shell #collection-panel .collection-actions .primary{min-height:40px;width:auto;padding:7px 13px;font-size:clamp(11px,1.1vw,16px);white-space:nowrap;border-radius:9px}
#shell #collection-panel #collection-play{background:linear-gradient(#ffe696,#f5b846);color:#463318;border:1px solid #fff0bc;box-shadow:0 3px #835322}
#shell #collection-panel .catalog-paging{grid-row:5;display:flex;justify-content:center;gap:12px;margin:0;min-height:28px}
#shell #collection-panel .catalog-paging button{height:28px;min-height:28px;width:36px;margin:0;padding:0;font-size:18px;border-radius:7px}
#shell #collection-panel .catalog-paging span{font-size:11px;color:#cae0de}
#shell #collection-panel #collection-status:empty,#shell #collection-panel #equipped-slots[hidden],#shell #collection-panel .collection-empty[hidden]{display:none}
#shell #collection-panel #collection-status:not(:empty){position:absolute;bottom:10px;left:50%;background:#123b49;padding:6px 12px;border-radius:8px;font-size:12px;z-index:3}
@media(orientation:landscape) and (max-height:600px){
 #shell #collection-panel{padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
 #shell #collection-panel .collection-dialog{grid-template-rows:38px minmax(0,1fr)}
 #shell #collection-panel .collection-header{height:38px;gap:8px}
 #shell #collection-panel .collection-header .back-button{width:36px;height:36px}
 #shell #collection-panel .collection-tabs{padding:2px;gap:2px}
 #shell #collection-panel .collection-tabs button{min-height:32px;padding:5px 8px;font-size:12px}
 #shell #collection-panel .collection-body{grid-template-columns:minmax(76px,.65fr) minmax(130px,1.22fr) minmax(0,4fr);gap:10px}
 #shell #collection-panel .collection-filters{gap:5px}#shell #collection-panel .collection-filters button{padding:7px 8px;min-height:34px;font-size:11px}
 #shell #collection-panel .collection-preview{padding:6px 7px;border-radius:11px;gap:2px}
 #shell #collection-panel .collection-name{padding:5px;font-size:12px!important}
 #shell #collection-panel .collection-preview h3{font-size:17px;margin:3px 0 0}
 #shell #collection-panel .collection-catalog{gap:6px;grid-template-rows:24px 37px minmax(0,1fr) 44px 24px}
 #shell #collection-panel .catalog-heading{min-height:24px}#shell #collection-panel .view-switch button{height:24px;width:35px;font-size:21px}
 #shell #collection-panel .catalog-tools label{font-size:9px;gap:1px}#shell #collection-panel .catalog-tools :is(input,select){height:25px;padding:3px 6px;font-size:10px}
 #shell #collection-panel .collection-cards,#shell #collection-panel .collection-cards[data-view=grid],#shell #collection-panel .collection-cards[data-view=row]{gap:7px}
 #shell #collection-panel .collection-card{padding:4px 4px;border-radius:9px}
 #shell #collection-panel .collection-card strong{font-size:10px}#shell #collection-panel .collection-card small{font-size:9px}
 #shell #collection-panel .collection-footer{padding:5px 8px;gap:8px;border-radius:9px}#shell #collection-panel .collection-footer p{font-size:10px}
 #shell #collection-panel .collection-actions .primary{min-height:32px;font-size:10px;padding:4px 8px;box-shadow:none}
 #shell #collection-panel .catalog-paging{min-height:24px;gap:10px}#shell #collection-panel .catalog-paging button{height:24px;min-height:24px}
 #shell #collection-panel .menu-pill{display:none}
 #shell #collection-panel .growth-preview{font-size:9px}#shell #collection-panel .growth-preview select{height:23px;font-size:10px}
 #shell #collection-panel .selection-tag{font-size:9px}#shell #collection-panel .favorite-button{min-height:23px;padding:2px 8px;font-size:10px!important}
}
@media(orientation:portrait){
 #shell #collection-panel .collection-header{flex-wrap:wrap;height:auto;gap:7px}#shell #collection-panel .collection-tabs{order:4;flex-basis:100%;max-width:none}
 #shell #collection-panel .collection-tabs button{padding:7px 4px;font-size:11px}
 #shell #collection-panel .collection-body{grid-template-columns:minmax(105px,1fr) minmax(0,2fr);grid-template-rows:auto minmax(0,1fr)}
 #shell #collection-panel .collection-filters{grid-column:1/-1;flex-direction:row;overflow:auto;gap:5px}#shell #collection-panel .collection-filters button{flex:0 0 auto;min-height:34px;padding:6px 9px;font-size:11px}
 #shell #collection-panel .collection-cards,#shell #collection-panel .collection-cards[data-view=grid],#shell #collection-panel .collection-cards[data-view=row]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
 #shell #collection-panel .collection-cards[data-view=row]{grid-template-rows:repeat(2,minmax(0,1fr))}
 #shell #collection-panel .catalog-tools{grid-template-columns:1fr 1fr}#shell #collection-panel .catalog-tools label:first-child{grid-column:1/-1}
 #shell #collection-panel .collection-catalog{min-height:0;gap:6px}#shell #collection-panel .collection-actions{width:100%}#shell #collection-panel .collection-actions .primary{flex:1;padding:6px;font-size:10px}
 #shell #collection-panel .collection-footer{display:block;padding:7px}#shell #collection-panel .collection-footer p{display:none}
 #shell #collection-panel .growth-preview{display:block;text-align:center}#shell #collection-panel .growth-preview select{width:100%}
}

#shell #collection-panel .collection-preview::before,#shell #collection-panel .collection-preview::after{display:none}
#shell #collection-panel .collection-preview h3{color:#173e49}
#shell #collection-panel .collection-tabs{width:auto;align-self:stretch;margin:0}
/* Lobby controls form two compact groups around the character stage. */
#shell #lobby .lobby-card{grid-template-columns:clamp(145px,17vw,222px) minmax(0,1fr) clamp(135px,15vw,196px);grid-template-rows:minmax(0,1fr) clamp(50px,10vh,76px);gap:clamp(10px,1.6vw,22px)}
#shell #lobby .player-dock{display:flex;flex-direction:column;justify-content:center;gap:10px;align-self:stretch;padding:0}
#shell #lobby :is(.dock-button,.ranked-shortcut,.profile-plaque){flex:0 0 auto;height:auto;min-height:clamp(42px,8vh,65px);padding:10px 13px;border-radius:12px;border-width:1px;font-size:clamp(13px,1.5vw,20px);gap:12px;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#shell #lobby .profile-plaque{min-height:38px;margin-bottom:3px}
#shell #lobby .dock-button small{font-size:11px;margin-top:3px}
#shell #lobby .career-strip{align-content:center;grid-template-rows:repeat(3,minmax(46px,auto));gap:10px}
#shell #lobby .career-strip>button{min-height:clamp(50px,11vh,88px);padding:10px;border-radius:12px;border-width:1px;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#shell #lobby .career-strip strong{font-size:clamp(14px,1.4vw,21px)}
#shell #lobby .career-strip>button>span:not(.feature-icon){font-size:clamp(11px,1vw,15px)}
#shell #lobby .equipped-stage{padding:0;overflow:visible}
#shell #lobby .equipped-heading{display:block}
#shell #lobby .equipped-heading>span{font-size:10px;letter-spacing:.15em}
#shell #lobby .equipped-heading h2{font-size:clamp(22px,2.8vw,38px);margin-top:2px}
#shell #lobby .loadout-bar{gap:12px;padding:0;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch}
#shell #lobby .loadout-bar button{border-radius:13px;min-height:0}
#shell #lobby .loadout-bar .showcase-edit{font-size:clamp(14px,1.8vw,24px);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#shell #lobby #auto-join{font-size:clamp(25px,3.8vw,48px);border-width:2px!important}
#shell #lobby #modes-open{font-size:clamp(11px,1.1vw,16px);padding:7px 16px;min-height:32px;border-radius:20px;bottom:calc(clamp(50px,10vh,76px) + 12px);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media(orientation:landscape) and (max-height:600px){
 #shell #main-topbar{height:54px;padding-top:6px}#shell #lobby{padding-top:62px;padding-bottom:10px}
 #shell #main-topbar .icon-button{width:38px;height:38px;border-radius:11px}#shell #main-topbar .icon-button svg{width:23px;height:23px}
 #shell #main-topbar :is(.best-plaque,.coin-plaque){min-height:36px;padding:4px 9px;border-width:1px;border-radius:10px}
 #shell #main-topbar .wordmark{font-size:25px;-webkit-text-stroke:3px #0a4776}
 #shell #lobby .player-dock,#shell #lobby .career-strip{gap:7px}
 #shell #lobby :is(.dock-button,.ranked-shortcut,.profile-plaque){min-height:36px;padding:7px 10px;font-size:13px;border-radius:10px;gap:9px}
 #shell #lobby .dock-button small{display:none}#shell #lobby .dock-icon{width:24px}#shell #lobby .dock-icon svg{width:23px;height:23px}
 #shell #lobby .career-strip>button{min-height:52px;padding:7px;border-radius:10px;grid-template-columns:26px minmax(0,1fr)}
 #shell #lobby .career-strip strong{font-size:14px}#shell #lobby .career-strip>button>span:not(.feature-icon){font-size:10px}
 #shell #lobby .equipped-heading h2{font-size:22px}
 #shell #lobby .equipped-heading>span{font-size:9px}
 #shell #lobby #modes-open{bottom:59px;min-height:27px;padding:4px 12px;font-size:11px}
}
@media(orientation:portrait){#shell #lobby .lobby-card{grid-template-columns:1fr 1.5fr;grid-template-rows:1fr auto auto}#shell #lobby .career-strip{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}#shell #lobby .loadout-bar{grid-column:1/-1;grid-row:3}}

/* Keep each catalog section in its intended track despite older atelier rules. */
#shell #collection-panel .catalog-heading{display:flex;position:static;grid-row:1;height:auto}
#shell #collection-panel .catalog-tools{grid-row:2}
#shell #collection-panel .collection-cards{grid-row:3;grid-auto-rows:minmax(0,1fr)}
#shell #collection-panel .collection-footer{grid-row:4}

.family-profile-menu{margin-top:1rem;padding:1rem;border:1px solid #8bced2;border-radius:20px;background:#ecfffc;color:#163f52}.family-profile-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:12px 0}.family-profile-card{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:16px;background:#fff;border:2px solid transparent}.family-profile-card[data-active=true]{border-color:#128c83}.family-profile-card canvas{width:100%;height:170px}.family-profile-card p{font-size:.85rem;margin:0}.family-profile-card button{min-height:42px}.family-profile-menu label{display:flex;flex-direction:column;gap:6px}.family-profile-menu input{min-height:44px;padding:9px;border:1px solid #81b9c5;border-radius:10px;background:#fff;color:#163f52}
.snake-home-favorite{display:flex;flex-direction:column;align-items:center;max-width:180px;padding:8px;border-radius:16px;background:var(--panel-soft,#e8f6ff);color:inherit}
.snake-home-favorite canvas{display:block;width:140px;height:116px;max-width:100%}
#snake-home-favorites{display:flex;flex-wrap:wrap;gap:10px}

/* Native disclosures keep trophy explanations available to touch and keyboard. */
#snake-home-trophies{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}
#snake-home-trophies .snake-home-keepsake{min-width:0;padding:0;overflow-wrap:anywhere}
#snake-home-trophies summary{min-height:48px;box-sizing:border-box;padding:12px;cursor:pointer;font-size:1rem;line-height:1.35}
#snake-home-trophies summary:focus-visible{outline:3px solid #fff;outline-offset:-3px;border-radius:12px}
#snake-home-trophies .snake-home-trophy-kind{display:block;font-size:.8em;font-weight:400;margin-top:4px;color:#e1f6f3}
#snake-home-trophies .snake-home-keepsake p{margin:0;padding:0 12px 12px;line-height:1.5;color:#fff}

.home-room-decor{margin-top:12px;padding:12px;border:1px solid #b0d5ce;border-radius:14px;background:#193f50;color:#fff}
.home-room-decor label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:700}
.home-room-decor select{min-height:44px;max-width:100%;padding:8px;border-radius:8px;background:#fff;color:#16313b;font:inherit}
.home-room-window{position:relative;isolation:isolate;height:160px;margin-top:12px;border:8px solid #c5a580;border-radius:24px 24px 8px 8px;background-color:#336c7d;background-size:cover;background-position:center;overflow:hidden;box-shadow:inset 0 0 28px #08263166}
.home-room-window::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#38536b 0,#537b91 18px,#38536b 36px);opacity:0;z-index:1}
.home-room-window[data-curtains=true]::before{opacity:1}
.home-room-window::after{content:'';position:absolute;inset:0;z-index:2;background:#06152270;pointer-events:none}
.home-room-window[data-lamp=true]::after{background:radial-gradient(ellipse at 50% 0,#ffdc8766,transparent 80%)}
.home-room-decor p{margin:10px 0;line-height:1.5}
.home-room-controls{display:flex;flex-wrap:wrap;gap:8px}
.home-room-controls button{min-height:44px;padding:10px 14px;border:1px solid #d5e9eb;border-radius:10px;background:#e4f3ed;color:#173e46;font:inherit;font-weight:700}
.home-room-decor :is(button,select):focus-visible{outline:3px solid #ffdc87;outline-offset:3px}
.home-room-status:empty{display:none}