/* Approved Pity artwork. Pose names remain the shared template interface;
   whole-character gestures are finite and never carry required information. */
.pity-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pity {
  --pity-size: 140px;
  display: inline-block;
  inline-size: var(--pity-size);
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  line-height: 0;
  vertical-align: middle;
  direction: ltr;
}
.pity > .pity-all {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  transform-origin: 50% 90%;
  animation: pity-sway 3.2s ease-in-out 2;
}
.pity > picture > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}
@keyframes pity-sway {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(1.5deg) translateY(-2px); }
}
.pity--cheer > .pity-all { animation: pity-bounce 0.8s var(--ease-bounce, ease-out) 2; }
@keyframes pity-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px) rotate(-2deg); }
}
.pity--oops > .pity-all { animation: pity-slump 3.2s ease-in-out 2; }
@keyframes pity-slump {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-3deg) translateY(2px); }
}
.pity--sleep > .pity-all { animation: pity-breathe 4s ease-in-out 2; }
@keyframes pity-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
.pity--think > .pity-all { animation: pity-ponder 3s ease-in-out 2; }
@keyframes pity-ponder {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-3deg); }
}
.pity--climb > .pity-all { animation: pity-reach 2.6s ease-in-out 2; }
@keyframes pity-reach {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.pity--trophy > .pity-all { animation: pity-hoist 2.8s ease-in-out 2; }
@keyframes pity-hoist {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

/* ---- placements ---------------------------------------------------------- */
.pity-hero { --pity-size: clamp(120px, 22vw, 190px); flex: none; }
.pity-spot { display: grid; place-items: center; margin-block: 1.2rem; }
.pity-spot .pity { --pity-size: clamp(140px, 34vw, 220px); }

/* Pity greets you from the corner of an empty state. */
.pity-empty { --pity-size: 128px; margin-inline: auto; display: block; }

/* She peeks over the top edge of a card. */
.pity-peek {
  --pity-size: 76px;
  position: absolute;
  inset-block-start: -46px;
  inset-inline-end: 14px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce), print {
  .pity *,
  .pity {
    animation: none !important;
    transition: none !important;
  }

}

/* =========================================================================
   Pity's placements around the app
   ========================================================================= */

/* Hero — she stands beside the headline and waves. */
.hero-mascot {
  flex: none;
  display: grid;
  place-items: center;
}
.hero-mascot .pity { --pity-size: clamp(110px, 20vw, 180px); }

/* On a phone the hero card fills the width and she ends up behind the
   buttons with only her edges showing, which reads as a rendering fault
   rather than a mascot. She is decoration here, so she steps out.
   This lives in pity.css deliberately: main.css already hides her at 700px,
   but this file loads afterwards and re-declares display, so the hide has to
   sit beside the declaration it is overriding. */
@media (max-width: 720px) {
  .hero-mascot { display: none; }
}

/* 404 — question marks float up around a lost Pity. */
.pity-lost { position: relative; display: inline-grid; place-items: center; }
.pity-qmark {
  position: absolute;
  font-weight: 900;
  color: var(--brand);
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.pity-qmark--1 { inset-block-start: 6%;  inset-inline-end: 2%;  font-size: 1.5rem; animation: pity-float 3.2s ease-in-out 2; }
.pity-qmark--2 { inset-block-start: -4%; inset-inline-end: 18%; font-size: 2.1rem; animation: pity-float 3.2s ease-in-out 0.5s 2; }
.pity-qmark--3 { inset-block-start: 14%; inset-inline-end: 30%; font-size: 1.2rem; animation: pity-float 3.2s ease-in-out 1s 2; }
@keyframes pity-float {
  0%, 100% { opacity: 0; transform: translateY(6px) rotate(-8deg) scale(0.8); }
  45%      { opacity: 0.9; transform: translateY(-8px) rotate(6deg) scale(1); }
  75%      { opacity: 0; transform: translateY(-18px) rotate(12deg) scale(1.05); }
}

/* Empty states already centre their contents; just give Pity some room. */
.empty .pity { margin-inline: auto; }
.empty--pity h1 { margin-block-start: 0.4rem; }

/* Certificate-locked: Pity climbing toward the medal she hasn't earned yet. */
.cert-locked .pity { margin-inline: auto; }

/* Helper bot — Pity replaces the robot emoji in the FAB and the panel head. */
.robot-fab-pity { display: grid; place-items: center; line-height: 0; }
.robot-fab-pity .pity { --pity-size: 44px; }
.robot-head-pity { display: grid; place-items: center; line-height: 0; flex: none; }
.robot-head-pity .pity { --pity-size: 38px; }

/* Celebration — she bursts in with the card. */
.celebrate-pity { display: grid; place-items: center; margin-block-end: 0.2rem; }
.celebrate-pity .pity { --pity-size: 150px; }

@media (prefers-reduced-motion: reduce) {
  .pity-qmark { animation: none !important; opacity: 0.8; }
}