.pet-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block-end:20px}.pet-roster button{min-width:0;display:grid;gap:8px;padding:10px;border:1px solid #b8b1c4;border-radius:12px;background:#fff;color:#172c3b;font-size:16px;text-align:center;line-height:1.5}.pet-roster button[aria-pressed=true]{outline:3px solid #694ca1;outline-offset:1px;background:#f0eafb}.pet-roster img{display:block;width:96px;max-width:100%;height:96px;aspect-ratio:1;object-fit:contain;border-radius:8px;justify-self:center}.pet-roster span{overflow-wrap:anywhere}.pet-roster button:focus-visible{outline:3px solid #694ca1;outline-offset:3px}.pet-playground.pet-portrait{height:auto;min-height:0;padding:0;display:grid;place-items:center;background:none;border-radius:12px;overflow:hidden}.pet-portrait .pet-stage-image{display:block;position:static;width:min(100%,320px);height:auto;max-width:100%;object-fit:contain}.pet-health{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-block:16px;color:#f5f5fc}.pet-health strong{font-size:16px}.pet-health button{min-height:48px;padding:10px 16px;border:1px solid #8b789e;border-radius:8px;background:#eee7f8;color:#35244c;font-size:16px}.pet-health button small{display:block;font-size:16px}.pet-buttons button:disabled{opacity:1;color:#38404d;background:#e3e5e9;border-color:#8b8f97;cursor:not-allowed}.pet-buttons button:disabled small{color:#38404d}

@media(max-width:620px){.pet-roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* Full-body companions keep breathing room without reducing UI type. */
.pet-playground.pet-portrait{padding:20px;box-sizing:border-box}.play-pet-species-portrait{display:flex;justify-content:center;padding:20px}.play-pet-species-portrait img{display:block;max-width:100%;height:auto;object-fit:contain}

/* Level row reuses the daily check-in grid/controls, with ten growth tiles. */
.pet-level-carousel{position:relative;min-width:0;width:100%;padding-inline:52px;margin-block:24px;box-sizing:border-box}.pet-levels{--pet-level-columns:1;display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - (var(--pet-level-columns) - 1)*12px)/var(--pet-level-columns));gap:12px;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;list-style:none;margin:0;padding:2px 0 8px}.pet-levels>li{scroll-snap-align:start;min-width:0;display:grid;gap:8px;align-content:start;text-align:center;padding:10px;border:1px solid #8d829a;border-radius:12px;background:#f1f1f5;color:#273141;font-size:16px;line-height:1.5}.pet-levels img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:8px}.pet-levels [data-state=current]{background:#e5f1ff;border:2px solid #176ebd;color:#163c65}.pet-levels [data-state=done]{background:#f1eafa;color:#35244c}.pet-levels b{display:inline-block;padding:2px 10px;border-radius:6px;background:#176ebd;color:#fff;font-size:16px}.pet-levels [data-state=locked] img{filter:grayscale(.65)}.pet-level-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:1px solid #b9cbc3;border-radius:50%;color:#176ebd;background:#fff;box-shadow:0 2px 8px #08212a26;cursor:pointer;font-size:28px}.pet-level-previous{inset-inline-start:0}.pet-level-next{inset-inline-end:0}.pet-level-arrow[hidden],.pet-care-confirm[hidden]{display:none}.pet-level-arrow:dir(rtl){transform:translateY(-50%) rotate(180deg)}.pet-care-confirm{padding:16px;border:1px solid #8d829a;border-radius:12px;background:#f4f0fa;color:#172c3b;font-size:16px;line-height:1.6}.pet-care-confirm>div{display:flex;gap:16px;flex-wrap:wrap}.pet-care-confirm button{font:inherit;min-height:48px;padding:10px 16px;border-radius:10px}.pet-playground[data-pet-condition]{position:relative}.pet-condition-effect{position:absolute;inset-inline-end:15%;top:15%;font-size:52px;line-height:1;pointer-events:none}.pet-playground[data-pet-condition=sick] .pet-stage-image{filter:saturate(.65)}.pet-buttons{flex-wrap:wrap}.pet-buttons>button{min-width:120px;min-height:48px;flex:1}.pet-health{color:#172c3b}
.pet-care-confirm button:disabled{opacity:1;background:#e6e9ee;color:#384250}.pet-level-arrow{-webkit-appearance:none;appearance:none}.pet-roster:empty{display:none}
.pet-buttons button,.pet-buttons button small{font-size:16px}.pet-levels strong,.pet-levels span{font-size:16px}.pet-levels [data-state=current] b{background:#155b9c}.pet-levels{touch-action:pan-x pan-y}
/* Four care actions reflow before their 145px readable button width is crossed. */
.site-typography .pet-buttons{grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))}

.pet-levels [aria-current=step]{scroll-snap-align:center}
/* Care status and the payment review keep readable text in the native dark game. */
#game-content .pet-health{color:#f5f5fc;background:#232537;border:1px solid #4b4a62;border-radius:10px;padding:12px}
#game-content .pet-health strong{color:#f5f5fc}
#game-content .pet-care-confirm :is(h4,p,span,strong){color:#172c3b;font-size:16px}
#game-content .pet-care-confirm button{color:#172c3b;background:#eee8fb;border:1px solid #9986b4}
#game-content .pet-care-confirm #pet-care-pay:not(:disabled){color:#fff;background:#392568}
.site-typography #game-content .pet-buttons button:disabled,.site-typography #game-content .pet-buttons button:disabled small{color:#f5f5fc;background:#303145;opacity:1}
#game-content .pet-levels [aria-current=step] b{background:#155a9c}