/* Shared logged-in card layout. Keep the existing typefaces, colors and hearts.
   Name + rating / caretaker / species + class / traits / friendship / status. */
.creature-card .card-copy{text-align:left}
.creature-card .card-name-row{align-items:flex-start}
.creature-card .card-name-row>a{min-width:0;flex:1}
.creature-card .card-name-row h3{overflow-wrap:anywhere}
.creature-card .card-name-row .card-rating{flex:0 0 auto;margin-top:3px}
.creature-card .card-owner{display:block;align-self:flex-start;max-width:100%;text-align:left;overflow-wrap:anywhere}
.creature-card .card-species.species-traits{display:block;margin-bottom:0}
.creature-card .card-class-line{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:5px}
.creature-card .card-class-line .card-rarity{flex:0 0 auto}
.creature-card .card-traits{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:5px;margin-top:6px}
.creature-card .card-status{align-items:center}
.creature-card .card-status strong{min-width:0;overflow-wrap:anywhere}
.creature-card .card-status+.card-playdate{border-top:0;padding-top:12px}

/* Full trait lists stay visible; only their tags become a little quieter. */
.creature-card .card-traits{gap:4px}
.creature-card .card-traits .trait-tag{font-size:11px;line-height:1.45;padding:1px 5px}

/* Equal-height cards with bottom-aligned status blocks also work without
   subgrid. Leave room for a two-line status and the Playdates controls. */
.creature-grid>.creature-card{display:flex;flex-direction:column}
.creature-grid>.creature-card>.card-art{flex:0 0 auto}
.creature-grid>.creature-card>.card-copy{display:flex;flex:1;flex-direction:column;min-width:0}
.creature-card .card-species.species-traits{margin-bottom:11px}
.creature-card .card-status{margin-top:auto;align-items:flex-start;flex:0 0 auto}
.creature-card .card-status strong{min-height:3em}
.creature-card .card-status-dot{margin-top:2px}
.creature-card .card-playdate{display:flex;flex-direction:column;justify-content:flex-end;min-height:112px;margin-top:0}

/* Fallback: extend the trait area and anchor points above the aligned status.
   Leave room for two text lines on narrower cards. */
.friendship-card .card-copy>.card-species{display:flex;flex-direction:column;align-items:stretch;justify-content:normal;gap:0;flex:1;min-width:0}
.friendship-card .card-species>.card-friendship-points{display:flex;align-items:flex-start;flex:none;gap:5px;margin-top:auto;padding-top:8px;min-height:calc(2.8em + 8px);font-size:12px;line-height:1.4}
.friendship-card .card-friendship-points>.icon{flex:none;margin-top:1px}
.friendship-card .card-friendship-points>span{min-width:0;overflow-wrap:anywhere}
.friendship-card .card-playdate{min-height:96px}

/* Share the row tracks, so differing trait counts, wrapped names, statuses
   and optional friendship points cannot push one card's footer below another.
   This is CSS-only: no polling, resize handlers, clipping or hidden traits. */
@supports(grid-template-rows:subgrid){
 .creature-grid>.creature-card{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
 .creature-grid>.creature-card>.card-art{grid-row:1}
 .creature-grid>.creature-card>.card-copy{display:grid;grid-template-rows:subgrid;grid-row:2 / span 5;row-gap:0}
 .creature-card .card-copy>.card-name-row{grid-row:1}
 .creature-card .card-copy>.card-owner{grid-row:2;justify-self:start;align-self:start}
 .creature-card .card-copy>.card-owner-row{grid-row:2;min-width:0;align-self:start}
 .creature-card .card-copy>.card-species{grid-row:3;align-self:start}
 .creature-card .card-copy>.card-status{grid-row:4;align-self:stretch;margin-top:0}
 .creature-card .card-status strong{min-height:0}
 .creature-card .card-copy>.card-playdate{grid-row:5;min-height:0;margin-top:0}
 /* Share class, traits and friendship tracks independently. If every card
    has zero points, the empty friendship track collapses. */
 .creature-grid>.friendship-card{grid-row:span 8}
 .creature-grid>.friendship-card>.card-copy{grid-row:2 / span 7}
 .friendship-card .card-copy>.card-species{display:grid;grid-template-rows:subgrid;grid-row:3 / span 3;row-gap:0;align-self:stretch}
 .friendship-card .card-species>.card-class-line{grid-row:1;align-self:start}
 .friendship-card .card-species>.card-traits{grid-row:2;align-self:start}
 .friendship-card .card-species>.card-friendship-points{grid-row:3;align-self:start;margin-top:8px;padding-top:0;min-height:0}
 .friendship-card .card-copy>.card-status{grid-row:6}
 .friendship-card .card-copy>.card-playdate{grid-row:7}
}

/* Exact foreground/background colors from the Playdates rarity chips.
   Profile typography, spacing and badge position stay unchanged. */
.profile-species>.profile-rarity{background:#eef2e8;color:#7c8c72}
.profile-species>.profile-rarity.rarity-2{background:#e8f1ee;color:#4f806f}
.profile-species>.profile-rarity.rarity-3{background:#eee9f6;color:#8065a0}
.profile-species>.profile-rarity.rarity-4{background:#fff0e7;color:#a76645}
.profile-species>.profile-rarity.rarity-5{background:#fff4cd;color:#94731c}

/* Match the Favorites mobile grid, picture height and inner padding. */
@media(max-width:650px){
 .creature-grid.playdate-discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .playdate-discovery-card .card-art{height:175px}
 .playdate-discovery-card .card-copy{padding:12px}
 .playdate-discovery-card .card-playdate .button{font-size:12px;line-height:1.35;min-height:48px;padding:8px 6px;gap:5px}
 .playdate-discovery-card .card-playdate .button .icon{width:14px;height:14px;flex-basis:14px}
 .friendship-card .card-species>.card-friendship-points{font-size:11px}
}
@media(max-width:380px){.playdate-discovery-card .card-art{height:145px}}

/* Remove only the top-header shortcut from display and keyboard navigation.
   Keeping its existing header context avoids changing the compact mobile logo
   and account-controls layout. Sidebar/forum promotions are unaffected. */
#app>.topbar>.header-forum{display:none}

/* The familiar Explore summary, followed by one tidy set of filters. */
.playdate-controls .discovery-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:8px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.playdate-controls .filter-chip{justify-content:center;min-width:0;padding:9px 8px;white-space:normal;text-align:center}
.playdate-controls .filter-chip>.icon{flex:none}
.playdate-controls .discovery-selects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1 / -1;gap:8px;width:100%;margin:0}
.playdate-controls .discovery-selects .select-control{min-width:0;width:100%;padding-left:10px;font-size:13px}
.playdate-controls .explorer-traits .trait-tag{font-size:11px;line-height:1.45;padding:1px 5px}
.playdate-controls .explorer-selected-title h2{min-width:0;overflow-wrap:anywhere}
.playdate-controls .explorer-selected-info p{overflow-wrap:anywhere}
.playdate-empty p{margin-bottom:12px}
@media(max-width:650px){
 .playdate-controls .discovery-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
 .playdate-controls .discovery-selects{grid-template-columns:repeat(2,minmax(0,1fr))}
 .playdate-controls #status-filter{grid-column:1 / -1}
}

/* Touch must not leave sticky hover lifts, tilted portraits or bouncing hearts.
   Important transforms also suppress the existing card-arrival animation here.
   Mouse hover and keyboard focus styling remain available on desktop. */
@media(hover:none),(pointer:coarse){
 .friendship-listing .creature-card{transform:none!important;box-shadow:none;border-color:var(--line);transition:none}
 .friendship-listing .card-art .creature-portrait{transform:none!important;animation:none!important;transition:none}
 .friendship-listing .favorite-button,.friendship-listing .favorite-button>.icon,.friendship-listing .card-playdate .button{transform:none!important;animation:none!important;transition:background .2s,color .2s,border-color .2s}
 .friendship-listing .card-playdate .button{box-shadow:none}
}