/* Responsive Tatari cards: database, calculator/comparison and starless Spa. */
:is(.tatari-profile,#stats-workspace .result-pet) :is(.portrait-card,.result-portrait-card){position:relative;width:170px;height:210px;margin-bottom:40px;--card-star-height:80px;--card-star-width:240px;--card-star-bottom:-32px}
:is(.tatari-profile,#stats-workspace .result-pet) :is(.detail-portrait,.result-portrait){position:absolute;top:4%;bottom:auto;left:50%;transform:translateX(-50%);width:auto;height:auto;max-width:100%;max-height:88%;margin:0;object-fit:contain}
:is(.tatari-profile,#stats-workspace .result-pet) :is(.portrait-card-background,.result-portrait-background){inset:2%;width:96%;height:96%}
:is(.tatari-profile,#stats-workspace .result-pet) .portrait-card>.star-display{height:var(--card-star-height);bottom:var(--card-star-bottom);overflow:visible}
:is(.tatari-profile,#stats-workspace .result-pet) :is(.star-level-image,.result-stars){width:auto;height:var(--card-star-height);max-width:var(--card-star-width);object-fit:contain;flex-shrink:0}
#stats-workspace .result-pet .result-stars{position:absolute;top:auto;bottom:var(--card-star-bottom);left:50%;transform:translateX(-50%)}
@media(max-width:600px){:is(.tatari-profile,#stats-workspace .result-pet) :is(.portrait-card,.result-portrait-card){width:150px;height:185px;margin-bottom:32px;--card-star-height:64px;--card-star-width:192px;--card-star-bottom:-25px}}
@media(max-width:850px){#stats-workspace.comparison-mode .result-pet .result-portrait-card{width:110px;height:136px;margin-bottom:26px;--card-star-height:48px;--card-star-width:144px;--card-star-bottom:-19px}}
:is(.tatari-profile,#stats-workspace .result-pet) :is(.portrait-card.tier-1,.portrait-card.tier-2,.result-portrait-card[data-tier="1"],.result-portrait-card[data-tier="2"]) :is(.detail-portrait,.result-portrait){top:50%;transform:translate(-50%,-50%)}
body[data-guide=spa] .spa-skin-art{position:relative;background-size:96% 96%}
body[data-guide=spa] .spa-skin-art img{position:absolute;top:4%;left:50%;transform:translateX(-50%);width:auto;height:auto;max-width:100%;max-height:88%;margin:0;object-fit:contain}