.study-pet-card {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 235px;
    overflow: hidden;
    margin: 16px 0;
    border: 1px solid #edd6e2;
    border-radius: 25px;
    background: rgba(255,255,255,.78);
    text-align: left;
}

.pet-home-scene {
    position: relative;
    display: grid;
    min-height: 235px;
    overflow: hidden;
    place-items: center;
    background:
        linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px),
        linear-gradient(145deg,#eadcff,#ffd9e7);
    background-size: 25px 25px,25px 25px,auto;
}

.pet-home-scene::after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -35px;
    left: -20px;
    height: 90px;
    border-radius: 50% 50% 0 0;
    background: rgba(255,255,255,.45);
}

.pet-sparkles {
    position: absolute;
    top: 25px;
    right: 25px;
    color: rgba(255,255,255,.8);
    font-size: 20px;
}

.pet-shadow {
    position: absolute;
    z-index: 2;
    bottom: 36px;
    width: 130px;
    height: 25px;
    border-radius: 50%;
    background: rgba(94,57,77,.14);
    filter: blur(4px);
}

.pet-avatar {
    position: relative;
    z-index: 3;
    display: grid;
    width: 190px;
    height: 185px;
    place-items: center;
    transform-origin: 50% 90%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pet-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 12px rgba(89,53,72,.17));
}
.pet-avatar.pet-empty { opacity:.25; filter:grayscale(1); }
.pet-avatar.pet-empty { cursor: default; }

.pet-avatar.pet-bounce { animation:petBounce .65s cubic-bezier(.2,.85,.3,1); }
.pet-avatar.pet-fed { animation:petFed .85s ease; }
.pet-avatar.pet-petted { animation:petPetted 1.05s cubic-bezier(.2,.9,.25,1); }
.pet-avatar.pet-eating { animation:petEating 1.25s ease; }
@keyframes petBounce { 0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-18px) scale(1.04,.96)}65%{transform:translateY(3px) scale(.96,1.04)} }
@keyframes petFed { 0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) scale(1.05)}50%{transform:rotate(7deg) scale(1.08)}75%{transform:rotate(-4deg)} }
@keyframes petPetted { 0%,100%{transform:translateY(0) scale(1)}22%{transform:translateY(7px) scale(1.08,.91) rotate(-3deg)}48%{transform:translateY(-6px) scale(.96,1.07) rotate(3deg)}72%{transform:translateY(2px) scale(1.03,.97)} }
@keyframes petEating { 0%,100%{transform:scale(1)}20%{transform:translateY(4px) scale(1.04,.96)}35%,55%,75%{transform:scale(1.06,.94) rotate(-2deg)}45%,65%,85%{transform:scale(1.06,.94) rotate(2deg)} }

.pet-interaction-layer {
    position: absolute;
    z-index: 8;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.pet-effect-hand {
    position: absolute;
    top: 26px;
    left: 52%;
    font-size: 46px;
    filter: drop-shadow(0 4px 4px rgba(81,48,64,.25));
    animation:petHandStroke .9s ease-in-out;
}

@keyframes petHandStroke {
    0%{opacity:0;transform:translate(35px,-28px) rotate(-18deg)}
    20%{opacity:1}
    45%{transform:translate(-18px,20px) rotate(8deg)}
    72%{transform:translate(15px,30px) rotate(-5deg)}
    100%{opacity:0;transform:translate(-24px,40px) rotate(9deg)}
}

.pet-effect-heart {
    position: absolute;
    left: var(--heart-x);
    bottom: 55px;
    color: #ff5fa0;
    font-size: var(--heart-size);
    animation:petHeartFloat 1.25s ease-out forwards;
    animation-delay: var(--heart-delay);
}

@keyframes petHeartFloat {
    0%{opacity:0;transform:translateY(10px) scale(.3) rotate(-8deg)}
    20%{opacity:1}
    100%{opacity:0;transform:translateY(-145px) translateX(var(--heart-drift)) scale(1.15) rotate(18deg)}
}

.pet-effect-food {
    position: absolute;
    z-index: 10;
    left: 18px;
    bottom: 55px;
    font-size: 47px;
    filter:drop-shadow(0 4px 4px rgba(78,46,60,.2));
    animation:petFoodFly 1.05s cubic-bezier(.2,.8,.3,1) forwards;
}

@keyframes petFoodFly {
    0%{opacity:0;transform:translate(-30px,25px) rotate(-25deg) scale(.5)}
    18%{opacity:1}
    70%{opacity:1;transform:translate(92px,-62px) rotate(15deg) scale(1)}
    100%{opacity:0;transform:translate(112px,-55px) rotate(20deg) scale(.2)}
}

.pet-effect-spark {
    position:absolute;
    left:var(--spark-x);
    top:var(--spark-y);
    color:#ffe26f;
    font-size:var(--spark-size);
    animation:petSpark .9s ease-out forwards;
}

@keyframes petSpark { 0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1.2) rotate(30deg)}100%{opacity:0;transform:scale(.6) rotate(80deg)} }

.pet-speech-bubble {
    position:absolute;
    z-index:12;
    top:18px;
    left:15px;
    max-width:145px;
    padding:8px 11px;
    border:2px solid rgba(255,255,255,.85);
    border-radius:14px 14px 14px 4px;
    background:rgba(255,255,255,.9);
    color:#8e4f70;
    box-shadow:0 8px 18px rgba(94,56,76,.14);
    font:600 9px 'Prompt',sans-serif;
    animation:petSpeechIn .28s ease-out;
}

@keyframes petSpeechIn { from{opacity:0;transform:translateY(7px) scale(.9)}to{opacity:1;transform:none} }

.pet-accessory { position:absolute; z-index:5; top:7px; left:50%; transform:translateX(-50%); font-size:37px; filter:drop-shadow(0 3px 3px rgba(73,45,59,.2)); }
.pet-avatar[data-accessory="ribbon"] .pet-accessory::before { content:'🎀'; }
.pet-avatar[data-accessory="glasses"] .pet-accessory { top:61px; }.pet-avatar[data-accessory="glasses"] .pet-accessory::before { content:'🕶️'; }
.pet-avatar[data-accessory="hat"] .pet-accessory { top:-24px; }.pet-avatar[data-accessory="hat"] .pet-accessory::before { content:'🎓'; }

.pet-card-content {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 25px 28px;
}

.pet-card-content h3 { margin:5px 0 4px; color:#634654; font-size:21px; }
.pet-card-content p { margin:0; max-width:520px; color:#947b88; font-size:11px; line-height:1.65; }
.pet-status-row { display:flex; gap:8px; flex-wrap:wrap; margin:13px 0 4px; }
.pet-status-row span { padding:7px 10px; border-radius:10px; background:#fff1f7; color:#9a5878; font-size:9px; }
.pet-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.pet-actions .btn,.pet-action-btn { width:auto; min-height:39px; margin:0; padding:7px 12px; font-size:9px; }
.pet-action-btn { border:1px solid #e4c9d7; border-radius:11px; background:#fff8fb; color:#a95a81; font:600 9px 'Prompt',sans-serif; cursor:pointer; }

.pet-dialog { width:min(92vw,650px); }
.pet-choice-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.pet-choice-grid button { display:grid; gap:3px; min-height:95px; padding:9px 4px; place-items:center; border:2px solid #ecd7e2; border-radius:15px; background:#fff9fc; color:#795866; font:600 9px 'Prompt',sans-serif; cursor:pointer; }
.pet-choice-grid button img { width:58px; height:58px; object-fit:contain; filter:drop-shadow(0 5px 5px rgba(88,52,70,.13)); }
.pet-choice-grid button.active { border-color:#dd7dab; background:#fff0f7; box-shadow:0 0 0 3px rgba(221,125,171,.13); }
.pet-closet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px; }
.pet-closet-item { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px; border:1px solid #ead3df; border-radius:14px; background:#fff9fc; color:#745362; text-align:left; cursor:pointer; }
.pet-closet-item>span { display:grid; height:43px; place-items:center; border-radius:12px; background:#fff0f6; font-size:24px; }
.pet-closet-item div { display:grid; }.pet-closet-item strong { font-size:10px; }.pet-closet-item small { color:#a48a97; font-size:8px; }
.pet-closet-item>em { color:#bc608b; font-size:9px; font-style:normal; }
.pet-closet-item.equipped { border-color:#d978a6; box-shadow:0 0 0 2px rgba(217,120,166,.13); }

body.dark-mode .study-pet-card { border-color:#4d3a55; background:rgba(31,24,39,.9); }
body.dark-mode .pet-card-content h3 { color:#ffe3ef; }
body.dark-mode .pet-card-content p { color:#bda8b4; }
body.dark-mode .pet-status-row span,.dark-mode .pet-action-btn { background:#2c2133; color:#efabcd; border-color:#584362; }
body.dark-mode .pet-choice-grid button,.dark-mode .pet-closet-item { border-color:#584362; background:#281e30; color:#f2c5d9; }

@media(max-width:650px) {
    .study-pet-card { grid-template-columns:1fr; }
    .pet-home-scene { min-height:210px; }
    .pet-card-content { padding:20px; }
    .pet-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .pet-closet-grid { grid-template-columns:1fr; }
}