/* Size cards from the panel's usable width, not the device width or registration order. */
#game #panel .transformationPanel{container-type:inline-size;container-name:catalog-panel}
#game #panel .catalogOrderHint{color:#cdb986;font-size:11px}
#game #panel .atlasExtraArt{margin-top:10px}
#game #panel .atlasExtraArt summary{padding:8px 0;cursor:pointer;color:#cdb986}
#game #panel .transformCollection{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));grid-auto-rows:minmax(142px,auto);gap:6px;max-height:400px;min-width:0;align-items:stretch}
#game #panel #panelBody .transformCard{height:auto;min-height:142px!important;min-width:0;padding:6px!important;gap:3px!important;justify-content:center!important}
#game #panel .transformCard .transformPortrait{width:64px;height:64px;flex:none}
#game #panel .transformCard b{font-size:12px;line-height:1.45;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;max-width:100%}
#game #panel .transformCard :is(small,span:last-child){font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
#game #panel .transformDetail{min-width:0}
#game #panel .transformSearch label:first-child{flex:1 1 190px;min-width:0}
#game #panel .transformSearch input[type=search]{flex:1;min-width:0;width:100%}
#game #panel .transformFeatured{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px}
#game #panel .transformFeatured article{min-width:0;height:auto;padding:6px}
#game #panel .transformFeatured b{font-size:12px;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;line-height:1.45}
#game #panel .transformFeatured .transformPortrait{width:72px;height:72px;flex:none}
#game #panel .transformRates p{flex-wrap:wrap;min-width:0;gap:3px}
#game #panel .transformSummon>div{flex-basis:100%;min-width:0}
#game #panel #panelBody .transformSummon>button{flex:1 1 120px;min-width:0;white-space:normal;min-height:44px!important}
@container catalog-panel (max-width:440px){
 #game #panel .transformLayout{grid-template-columns:minmax(0,1fr)}
 #game #panel .transformCollection{grid-row:1;max-height:340px}
 #game #panel .transformDetail{grid-row:2;position:static;display:grid;grid-template-columns:88px minmax(0,1fr);gap:3px 8px;text-align:left;align-items:center}
 #game #panel .transformDetail canvas{grid-column:1;grid-row:1/span 4;width:88px;height:96px}
 #game #panel .transformDetail>:is(small,h4,button,p){grid-column:2;min-width:0}
 #game #panel .transformDetail>:is(.transformStory,.transformHelp,.transformPreferences,.transformLockHelp,.transformCompare){grid-column:1/-1}
 #game #panel .transformRates>div{grid-template-columns:minmax(0,1fr)}
}
/* Eight equipment buttons used to step by 27px despite the shared 32/38px button minimum. */
#game #panel .bagSheet{min-width:0;flex-shrink:0}
#game #panel .equipmentStage{display:grid;grid-template-columns:60px minmax(0,1fr) 60px;grid-template-rows:repeat(4,56px);gap:4px 6px;height:auto;min-height:236px;flex:none;padding:4px 0;box-sizing:content-box}
#game #panel .paperDoll{position:static;inset:auto;grid-column:2;grid-row:1/5;min-width:0;justify-content:center;gap:3px}
#game #panel .paperDoll canvas{position:static;inset:auto;width:min(140px,100%);height:auto;aspect-ratio:1;flex:none}
#game #panel .paperDoll strong{white-space:normal;overflow-wrap:anywhere;max-width:100%;font-size:13px}
#game #panel #panelBody .paperDoll #equipBest{width:100%;min-width:0;white-space:normal;min-height:40px!important;line-height:1.35!important}
#game #panel #panelBody .equipmentStage .equipSocket{position:relative;inset:auto;width:100%;height:56px;min-height:56px!important;min-width:0;margin:0;padding:3px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-sizing:border-box}
#game #panel .equipSocket:nth-of-type(odd){grid-column:1}
#game #panel .equipSocket:nth-of-type(even){grid-column:3}
#game #panel .socket0,#game #panel .socket1{grid-row:1}
#game #panel .socket2,#game #panel .socket3{grid-row:2}
#game #panel .socket4,#game #panel .socket5{grid-row:3}
#game #panel .socket6,#game #panel .socket7{grid-row:4}
#game #panel .equipmentStage .equipSocket .artIcon{width:32px;height:32px;max-width:none;max-height:none;margin:0;padding:0;flex:none}
#game #panel .equipmentStage .equipSocket small{position:static;inset:auto;font-size:11px;line-height:14px}
#game #panel .equipmentStage .equipSocket b{top:1px;bottom:auto;right:1px;font-size:10px;line-height:13px;padding:0 2px;border-radius:2px}
#game #panel #panelBody .bagInventory{min-width:0;min-height:140px;max-height:220px;height:180px;flex:none}
#game #panel .inventoryGrid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}
/* Each result keeps a real portrait and wrapping name, including the 11th pity reward. */
#game #rewardOverlay .rewardScene:not(.coupon){display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:12px;width:min(640px,100%)}
#game #rewardOverlay header{flex:none;padding:4px 18px 10px}
#game #rewardOverlay .rewardCards{flex:0 1 auto;min-height:0;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));grid-auto-rows:max-content;align-content:start;gap:6px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;padding:3px}
#game #rewardOverlay .rewardCard{height:auto;min-height:172px;box-sizing:border-box}
#game #rewardOverlay .rewardFace{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 5px;text-align:center;height:100%;min-height:170px}
#game #rewardOverlay .rewardFace :is(.artIcon,.transformPortrait){width:64px;height:64px;flex:none}
#game #rewardOverlay .rewardFace b{max-width:100%;font-size:13px;line-height:1.45;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
#game #rewardOverlay .rewardFace :is(small,span:last-child){max-width:100%;font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
#game #rewardOverlay .count1{grid-template-columns:minmax(0,190px);justify-content:center}
#game #rewardOverlay .count1 .rewardCard,#game #rewardOverlay .count1 .rewardFace{min-height:220px}
#game #rewardOverlay .count1 .rewardFace :is(.artIcon,.transformPortrait){width:100px;height:100px}
#game #rewardOverlay footer{flex:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#game #rewardOverlay footer button{flex:1 1 120px;min-width:0;min-height:42px;white-space:normal;overflow-wrap:anywhere;padding:6px}
#game #rewardOverlay .rewardRepeat{flex-basis:100%;gap:2px}
#game #rewardOverlay .rewardRepeat small{font-size:11px}
@media(max-width:520px){
 #rewardOverlay{padding:8px}
 #game #rewardOverlay .rewardScene{padding:10px}
 #game #rewardOverlay .rewardCards:not(.count1){grid-template-columns:repeat(2,minmax(0,1fr))}
 #game #rewardOverlay h2{font-size:23px}
}
@media(max-height:480px){
 #game #rewardOverlay h2{font-size:20px;margin:3px 0}
 #game #rewardOverlay header{padding-bottom:4px}
 #game #rewardOverlay footer{margin-top:5px}
 #game #rewardOverlay .rewardRepeat{flex-basis:180px}
}