/* Fixed-size rows prevent percentage-based SVGs from collapsing a large roster. */
.collection-filter-toggle{display:none}
.collection-main{position:relative}
.roster-grid{flex:1 1 0;grid-auto-rows:max-content;align-items:start;overflow-y:auto}
.roster-grid>.unit-card{min-height:190px;height:auto}.roster-grid>.unit-card .portrait{height:130px}.roster-grid>.unit-card .sprite{height:120px;width:100px;flex:none}
.collection-screen{height:calc(100% - 10px);margin:5px 28px;border:1px solid #9dc9c33b;border-radius:20px;background:#082b3ff2;padding:22px 24px;display:flex;flex-direction:column;min-height:0;overflow:hidden;box-shadow:0 20px 60px #001b3540}
.collection-heading{display:flex;align-items:center;gap:24px;flex:none;padding-bottom:18px;border-bottom:1px solid #b2d7d11e}.collection-heading>div:first-child{margin-right:auto}.collection-heading small{font-size:8px;letter-spacing:2px;color:#90c6cd}.collection-heading h1{font:30px var(--display);margin:6px 0}.collection-heading p{font-size:11px;color:#abc5ca;margin:0}.collection-progress{width:170px;flex:none}.collection-progress>span{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#abc7cb}.collection-progress b{font-size:23px;color:#ffe2a4}.collection-progress b small{font-size:11px;letter-spacing:0}.collection-progress>div{height:4px;background:#ffffff12;border-radius:4px;margin-top:10px;overflow:hidden}.collection-progress i{display:block;height:100%;background:#9ce3d0}.collection-recruit{border:1px solid #dfc28b66;background:#e6d4a50e;color:#ffe3ad;border-radius:9px;padding:10px 14px;font-size:11px;white-space:nowrap}
.collection-layout{display:flex;flex:1;min-height:0;padding-top:18px;gap:22px}.collection-sidebar{width:170px;flex:none;border-right:1px solid #b2d7d11e;padding-right:18px;overflow-y:auto;scrollbar-width:thin}.collection-sidebar>small{display:block;font-size:9px;letter-spacing:1px;color:#87b2bd;margin:3px 10px 12px}.collection-groups{display:grid;gap:5px}.collection-groups button{display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:8px;background:transparent;padding:12px 10px;text-align:left;color:#b7ccd1;font-size:11px}.collection-groups i{font-size:19px;font-style:normal;width:20px;text-align:center}.collection-groups button span{margin-left:auto;font-size:10px;color:#88aeba}.collection-groups .selected{background:#a7d7cf16;border-color:#afdacf44;color:#fff1cc}.collection-groups .selected span{color:#ffe1a0}.collection-legend{border-top:1px solid #afdad020;margin-top:25px;padding:20px 7px}.collection-legend b{font-size:10px;color:#d5dcca}.collection-legend p{font-size:10px;line-height:1.8;color:#8faeba}.collection-legend small{font-size:9px;line-height:1.7;letter-spacing:0;color:#799ca9}.mobile-group{display:none}
.collection-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.collection-toolbar{display:flex;justify-content:space-between;gap:12px;flex:none;align-items:center}.ownership-tabs{display:flex;background:#051f30;border:1px solid #a3cfcc25;border-radius:9px;padding:4px;gap:3px}.ownership-tabs button{padding:8px 11px;border:0;border-radius:6px;background:transparent;color:#a6c2c9;white-space:nowrap;font-size:11px}.ownership-tabs button span{display:inline-block;margin-left:7px;font-size:10px;opacity:.75}.ownership-tabs button.selected{background:#b8dcd1;color:#214552;font-weight:700}.collection-search{display:flex;align-items:center;gap:8px;background:#061f3099;border:1px solid #9bc2c52e;border-radius:8px;padding:0 11px;min-width:130px}.collection-search>span{font-size:23px;color:#9bbfc4}.collection-search input{width:210px;min-width:0;background:transparent;color:#fff0d6;border:0;padding:10px 0;font-size:11px;outline-offset:0}.collection-search input::placeholder{color:#7197a7}
.collection-filters{display:flex;flex-wrap:wrap;gap:10px 24px;flex:none;margin-top:13px}.collection-filters>div{display:flex;align-items:center;gap:12px}.collection-filters>div>b{font-size:10px;font-weight:500;color:#85aab7}.collection-chips{display:flex;gap:5px}.collection-chips button{padding:6px 10px;border:1px solid #9ecdc328;background:transparent;border-radius:6px;color:#9bb8c5;font-size:10px}.collection-chips button.selected{border-color:#e9cd91;color:#f9dda4;background:#cfb78314}.collection-chips [data-value=UR]{color:#ffe09a}.collection-chips [data-value=SSR]{color:#d9a6f6}.collection-chips [data-value=SR]{color:#9ac6fd}.collection-chips [data-value=R]{color:#94d6b0}
.collection-resultbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:none;min-height:43px}.collection-resultbar p{font-size:10px;color:#96b5bf;margin:0}.collection-resultbar>div{display:flex;align-items:center;gap:10px}.collection-reset{border:0;background:transparent;color:#87a9b5;font-size:10px;padding:7px 0;text-decoration:underline;text-underline-offset:3px}.collection-resultbar select,.mobile-group select{border:1px solid #a0c9c630;border-radius:6px;background:#103146;color:#c9dad9;font-size:10px;padding:6px 9px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
.catalog-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:226px;gap:12px;flex:1 1 0;min-height:0;overflow:auto;align-content:start;padding:3px 4px 12px;scrollbar-width:thin;scrollbar-color:#648891 #0a293c;overscroll-behavior:contain}
.catalog-card{display:flex;flex-direction:column;min-width:0;height:226px;min-height:226px;border:1px solid #a1c5c03b;border-radius:11px;padding:0;background:linear-gradient(145deg,#345564,#18394e);overflow:hidden;text-align:left;color:#f1e9d5;box-shadow:0 4px 9px #041d2c20}.catalog-card:hover{border-color:#edce8d;box-shadow:0 4px 16px #04182288}.catalog-art{height:131px;min-height:131px;position:relative;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 65%,#c4e4d718,transparent 70%)}.catalog-art>.sprite{height:104px;width:94px;max-width:90%;flex:none;margin-top:6px;transition:transform .2s}.catalog-card:hover .sprite{transform:translateY(-3px)}.catalog-number{position:absolute;top:9px;left:9px;color:#8fafb8;font-size:8px;letter-spacing:.3px}.catalog-rarity{position:absolute;top:7px;right:9px;color:#d1c7a9;font-size:12px;font-weight:800}.rarity-UR .catalog-rarity{color:#ffe199}.rarity-SSR .catalog-rarity{color:#dba8ff}.rarity-SR .catalog-rarity{color:#a9ccff}.rarity-R .catalog-rarity{color:#9ddbb3}.catalog-status{position:absolute;bottom:5px;left:8px;padding:3px 6px;font-size:8px;border-radius:4px;background:#0b2b40ad;color:#a7c6ca}.catalog-status.equipped{color:#b5efcc;background:#143e42e0}.catalog-card.is-missing .sprite{opacity:.7;filter:saturate(.65)}.catalog-info{padding:9px 10px;background:#082b3c50;border-top:1px solid #d2e5cf16;flex:1;min-height:0}.catalog-info>div{display:flex;align-items:center;gap:4px}.catalog-info h2{font-size:12px;font-weight:600;line-height:1.4;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catalog-role{font-size:8px;margin-left:auto;padding:3px 4px;background:#d8ebe50b;color:#aac7ca;border-radius:4px;flex:none}.catalog-info p{display:flex;justify-content:space-between;gap:4px;margin:5px 0 9px;font-size:9px;color:#8cacb9}.catalog-info p span{color:#b9cbc7;white-space:nowrap}.catalog-info dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid #abc9ca1c;padding-top:6px;gap:5px}.catalog-info dt{font-size:8px;color:#789dac}.catalog-info dd{font-size:10px;color:#e6d8b7;margin:3px 0 0;font-variant-numeric:tabular-nums}
.collection-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:none;border-top:1px solid #b6d7ce22;padding-top:10px;min-height:43px}.collection-footer>span{font-size:9px;color:#81a4b2}.collection-footer nav{display:flex;align-items:center;gap:5px;height:auto}.collection-footer button{width:29px;height:27px;border-radius:5px;background:#08283b;border:1px solid #a1c4c029;color:#acc4c9;font-size:11px;padding:0}.collection-footer button.selected{background:#c8dace;color:#264852;border-color:#c8dace}.collection-footer nav>span{font-size:9px;color:#8caeb9;padding:0 4px}.catalog-empty{grid-column:1/-1;text-align:center;margin:25px auto;color:#aac4cc}.catalog-empty>span{font-size:38px;color:#759eaf}.catalog-empty h2{font:22px var(--display);color:#e2e2c8}.catalog-empty p{font-size:11px}.catalog-empty button{background:#b9dacf;color:#204653;border:0;padding:10px 18px;border-radius:7px;font-size:11px}
@media(max-width:1400px){.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.collection-sidebar{width:150px;padding-right:12px}.collection-layout{gap:15px}.collection-search input{width:180px}.collection-filters{gap:8px 18px}}
@media(max-width:1050px){.collection-screen{margin:3px 16px;padding:18px;height:calc(100% - 6px)}.collection-progress{width:130px}.collection-heading{gap:14px}.collection-heading h1{font-size:26px}.collection-search input{width:145px}.ownership-tabs button{padding:8px}.ownership-tabs button span{margin-left:4px}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-recruit{font-size:10px}.collection-sidebar{width:135px}.collection-groups button{padding:10px 7px;gap:6px}.collection-groups i{width:17px}}
@media(max-width:760px){.collection-screen{margin:0 8px;height:100%;padding:13px;border-radius:13px}.collection-heading{padding-bottom:10px;gap:10px}.collection-heading h1{font-size:23px;margin:4px 0}.collection-heading p{display:none}.collection-heading>div>small{font-size:7px;letter-spacing:1.4px}.collection-progress{width:95px}.collection-progress>span{font-size:8px}.collection-progress b{font-size:19px}.collection-progress b small{font-size:9px}.collection-recruit{padding:8px;font-size:9px}.collection-layout{display:flex;flex-direction:column;padding-top:10px;gap:9px}.collection-sidebar{width:100%;padding:0;border:0;overflow:visible;flex:none}.collection-sidebar>small,.collection-groups,.collection-legend{display:none}.mobile-group{display:flex;align-items:center;gap:10px;font-size:10px;color:#8cabb8}.mobile-group select{flex:1;max-width:200px}.collection-toolbar{flex-wrap:wrap;gap:8px}.ownership-tabs{width:100%;justify-content:space-between}.ownership-tabs button{flex:1;padding:7px 4px;font-size:10px}.collection-search{width:100%}.collection-search input{width:100%;padding:8px 0}.collection-search>span{font-size:19px}.collection-filters{margin-top:8px;gap:6px}.collection-filters>div{gap:8px}.collection-chips{gap:4px}.collection-chips button{padding:5px 9px;font-size:9px}.collection-resultbar{min-height:36px}.collection-resultbar p{font-size:9px}.collection-resultbar select{max-width:109px;font-size:9px;padding:5px}.collection-reset{font-size:9px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;grid-auto-rows:221px;padding:2px 2px 9px}.catalog-card{height:221px;min-height:221px}.catalog-art{height:126px;min-height:126px}.catalog-info h2{font-size:11px}.catalog-info{padding:8px}.collection-footer{flex-wrap:wrap;justify-content:center;gap:5px;padding-top:7px}.collection-footer>span{width:100%;text-align:center;font-size:8px}.collection-footer nav{gap:4px}.collection-footer button{width:27px;height:25px}}
.collection-footer{margin:0;padding:8px 0 0}.collection-sidebar{scrollbar-color:#507480 transparent}.collection-heading h1{line-height:1.15}.collection-groups button{padding-top:9px;padding-bottom:9px}
@media(max-height:550px) and (orientation:landscape){.filters-expanded .collection-filters{position:absolute;top:35px;left:0;right:0;z-index:4;background:#123247;border:1px solid #84adae;border-radius:8px;padding:10px;box-shadow:0 8px 25px #00182788}}
@media(max-height:550px) and (orientation:landscape){.collection-heading{padding-bottom:7px}.collection-heading h1{font-size:21px;margin:0}.collection-heading p,.collection-heading>div>small,.collection-progress>div,.collection-legend{display:none}.collection-screen{padding:10px 15px}.collection-layout{padding-top:8px;gap:12px}.collection-sidebar{width:128px}.collection-groups button{padding:7px}.collection-filters{display:none;margin-top:7px}.filters-expanded .collection-filters{display:flex}.collection-chips button{padding:4px 7px}.collection-resultbar{min-height:28px}.collection-footer{padding:5px 0 0;min-height:32px}.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px}.catalog-card{height:210px;min-height:210px}.catalog-art{height:115px;min-height:115px}.catalog-art>.sprite{height:92px}.collection-progress b{font-size:19px}.collection-filter-toggle{display:block;border:1px solid #adcec044;border-radius:6px;background:#123348;color:#e4ddbd;padding:6px 9px;font-size:10px}.ownership-tabs button{padding:5px 7px}.collection-toolbar{gap:6px}.collection-search input{padding:7px 0}}

/* Catalog cards remain reachable below the fold on compact screens. */
@media(max-width:760px){
  .collection-screen{height:auto;min-height:100%;box-sizing:border-box;overflow:visible}
  .collection-layout,.collection-main{flex:none;min-height:0}
  .catalog-grid{flex:none;min-height:0;overflow:visible;padding-bottom:10px}
}
@media(max-width:950px) and (max-height:600px) and (orientation:landscape){
  .collection-screen{height:auto;min-height:500px;margin:0 12px;padding:10px 12px;overflow:visible}
  .collection-layout{display:flex;flex:none;flex-direction:column;gap:8px;padding-top:8px}
  .collection-sidebar{width:100%;padding:0;border:0;overflow:visible}
  .collection-sidebar>small,.collection-groups,.collection-legend{display:none}
  .collection-toolbar{flex-wrap:wrap;gap:6px}
  .collection-search{flex:1;min-width:155px}
  .collection-search input{width:100%}
  .collection-filters{flex-wrap:wrap}
  .collection-main{flex:none;min-height:0}
  .catalog-grid{flex:none;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:190px;overflow:visible}
  .catalog-card{height:190px;min-height:190px}
  .catalog-art{height:102px;min-height:102px}
  .catalog-art>.sprite{height:82px}
  .collection-footer{padding:7px 0 2px}
}