/* ── Pet additions: photo-based pet, animal picker, clothing equip, mini pet ── */

/* ── Photo-based pet stage ── */
.pet-stage { position:relative; display:inline-flex; flex-direction:column; align-items:center; }
.pet-stage-lg .pet-photo-container { width:150px; height:150px; }
.pet-stage-sm .pet-photo-container { width:82px;  height:82px; }

.pet-photo-container {
  border-radius:50%; overflow:visible; position:relative;
  border:3px solid var(--green); display:flex; align-items:center; justify-content:center;
  overflow:hidden; transition:box-shadow .3s;
}
.pet-photo { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.animal-fallback-letter {
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2'; font-size:2.2rem; font-weight:800; color:rgba(255,255,255,.9);
}
.pet-stage-sm .animal-fallback-letter { font-size:1.2rem; }
.pet-cloth-overlay { position:absolute; top:0; left:0; right:0; bottom:0; z-index:5; overflow:visible; pointer-events:none; }
.cloth-item { user-select:none; }

/* Mood animations */
.pet-stage.mood-happy .pet-photo-container  { animation:petBobble 2.8s ease-in-out infinite; }
.pet-stage.mood-okay  .pet-photo-container  { animation:petSway 3.5s ease-in-out infinite; }
.pet-stage.mood-hungry .pet-photo-container { border-color:var(--coral)!important; animation:petSway 4s ease-in-out infinite; }
.pet-stage.mood-sad  .pet-photo-container   { filter:grayscale(30%); border-color:#999!important; }
.pet-stage.mood-tired .pet-photo-container  { opacity:.8; animation:none; }

@keyframes petBobble { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.03)} }
@keyframes petSway   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Correct / wrong answer animations (applied to .pet-stage) */
.pet-correct-pop  { animation:petPop  .5s cubic-bezier(.175,.885,.32,1.275) !important; }
.pet-wrong-shake  { animation:petShake .45s ease !important; }
@keyframes petPop   { 0%{transform:scale(1)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
@keyframes petShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

/* Speech bubble attached to pet stage */
.pet-speech-new {
  position:absolute; bottom:-38px; left:50%; transform:translateX(-50%);
  background:var(--green-dk); color:#fff; border-radius:var(--r-sm);
  padding:5px 12px; font-size:.7rem; font-weight:600; line-height:1.4;
  white-space:normal; text-align:center; max-width:180px; min-width:80px;
  opacity:0; transition:opacity .3s; pointer-events:none; z-index:20;
}
.pet-speech-new.visible { opacity:1; }
.pet-speech-new::before {
  content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:var(--green-dk);
}
.pet-stage-sm .pet-speech-new { bottom:-32px; font-size:.62rem; max-width:140px; }

/* ── Animal picker (pet creator step 1) ── */
.animal-picker { display:flex; flex-direction:column; gap:10px; }
.animal-search-wrap { position:relative; }
.animal-search-wrap input {
  width:100%; padding:10px 36px 10px 14px;
  border:2px solid var(--green-lt); border-radius:var(--r-md);
  font-family:'Nunito'; font-size:.9rem; outline:none; transition:var(--trans); color:var(--ink);
}
.animal-search-wrap input:focus { border-color:var(--green); }
.animal-search-wrap::after { content:'🔍'; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:.9rem; pointer-events:none; }
.cat-tab-row { display:flex; gap:5px; flex-wrap:wrap; }
.cat-tab {
  padding:5px 10px; border-radius:20px; border:2px solid var(--green-lt);
  background:#fff; font-family:'Nunito'; font-size:.72rem; font-weight:700;
  cursor:pointer; transition:var(--trans); color:var(--ink-soft); white-space:nowrap;
}
.cat-tab.active, .cat-tab:hover { background:var(--green); color:#fff; border-color:var(--green); }
.animal-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  max-height:268px; overflow-y:auto; padding-right:2px;
  scrollbar-width:thin; scrollbar-color:var(--green-lt) transparent;
}
.animal-card {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 4px; border:2px solid var(--green-lt); border-radius:var(--r-sm);
  background:#fff; cursor:pointer; transition:var(--trans);
}
.animal-card:hover { border-color:var(--green-md); background:var(--green-lt); transform:translateY(-1px); }
.animal-card.selected { border-color:var(--green); background:var(--green-lt); box-shadow:0 0 0 2px var(--green); }
.animal-img-wrap {
  width:54px; height:54px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:800; color:rgba(255,255,255,.9);
  position:relative; flex-shrink:0;
}
.animal-img-wrap img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.animal-img-wrap .animal-fallback-letter { z-index:0; font-size:1.2rem; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.animal-label { font-size:.63rem; font-weight:700; color:var(--ink); text-align:center; line-height:1.2; }

/* ── Theme picker (step 2) ── */
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.theme-card {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px; border:2px solid var(--green-lt); border-radius:var(--r-md);
  background:#fff; cursor:pointer; transition:var(--trans); font-family:'Nunito';
}
.theme-card:hover { transform:translateY(-2px); border-color:var(--green-md); }
.theme-card.selected { border-color:var(--green); background:var(--green-lt); box-shadow:0 0 0 2px var(--green); }
.theme-swatch { width:40px; height:40px; border-radius:50%; border:3px solid rgba(0,0,0,.1); }
.theme-label { font-size:.78rem; font-weight:700; color:var(--ink); }

/* ── Mini pet in learning screen ── */
.learn-pet-col { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
#learn-pet-mini { min-width:86px; min-height:90px; }
.pet-answer-pop {
  background:#fff; border-radius:0 var(--r-md) var(--r-md) var(--r-md);
  padding:12px 16px; box-shadow:var(--sh); flex:1; font-size:.88rem; line-height:1.5;
  border-left:4px solid var(--green-lt); transition:border-color .3s;
}
.pet-answer-pop.popped-correct { border-color:var(--success); }
.pet-answer-pop.popped-wrong   { border-color:var(--danger); }

/* ── Improved feedback card ── */
.teacher-feedback {
  border-radius:var(--r-md); padding:14px 16px; margin-bottom:12px; line-height:1.6;
}
.teacher-feedback.correct-fb { background:#edfaf3; border-left:4px solid var(--success); }
.teacher-feedback.wrong-fb   { background:#fdf0ee; border-left:4px solid var(--danger); }
.tf-headline { font-family:'Baloo 2'; font-size:1rem; font-weight:700; margin-bottom:6px; }
.tf-answer   { background:#fff; border-radius:8px; padding:6px 12px; font-weight:700; font-size:.9rem; margin-bottom:8px; display:inline-block; }
.tf-explain  { font-size:.85rem; color:var(--ink-soft); }
.tf-step     { background:rgba(47,107,52,.07); border-radius:8px; padding:6px 10px; margin-top:6px; font-size:.83rem; }

/* ── Shop ── */
.shop-action-btn {
  width:100%; padding:8px 4px; border-radius:var(--r-sm); border:none;
  font-family:'Nunito'; font-size:.8rem; font-weight:700; cursor:pointer; transition:var(--trans);
  margin-top:4px;
}
.btn-buy    { background:var(--green); color:#fff; }
.btn-buy.cant-afford { background:#ddd; color:#999; cursor:not-allowed; }
.btn-equip  { background:var(--amber-lt); color:#8a5a00; border:2px solid var(--amber); }
.btn-equip:hover { background:var(--amber); color:#fff; }
.btn-equipped { background:var(--green-lt); color:var(--green-dk); border:2px solid var(--green); cursor:default; }
.shop-equipped::after { content:'ON'; position:absolute; top:6px; right:6px; background:var(--green); color:#fff; font-size:.55rem; font-weight:800; padding:2px 5px; border-radius:6px; letter-spacing:.05em; }
.shop-slot-badge { display:inline-block; background:var(--green-lt); color:var(--green-dk); font-size:.58rem; font-weight:800; padding:2px 7px; border-radius:8px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }

/* Override old pet styles */
.pet-frame, .pet-body, .pet-acc-top { display:none!important; }
.pc-grid { display:none!important; }