/* ============================================================
   Noor — the Digi Dolls™ walking guide (see assets/avatar.js)
   ============================================================ */
.avatar-stage{
  position:fixed;inset:0;
  /* above page content, below the pin tool (310), the armed bubble layer (305)
     and every popup (480+), so she never blocks a pop or a prize */
  z-index:290;
  pointer-events:none;
}
.avatar{
  position:absolute;left:0;top:0;
  width:180px;
  transform:translate3d(var(--x,40px),var(--y,60vh),0);
  will-change:transform;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  transition:opacity .35s ease,visibility .35s;
}
.avatar.is-dragging{cursor:grabbing;}
.avatar.is-dismissed{opacity:0;visibility:hidden;pointer-events:none;}
.pin-armed .avatar{pointer-events:none;opacity:.55;}

.avatar__body{
  position:relative;width:100%;
  aspect-ratio:760 / 1405;            /* matches assets/avatar-figure.png */
  transform-origin:bottom center;
  transform:scaleX(var(--face,1));    /* facing flip only; the gait lives on the rig */
}
.avatar__rig{position:absolute;inset:0;}
.avatar__figure{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:contain;object-position:bottom center;
  -webkit-user-drag:none;user-select:none;
  filter:drop-shadow(0 18px 22px rgba(8,8,13,.28)) drop-shadow(0 0 18px rgba(255,30,142,.18));
}

/* a small mood badge near her head; un-mirrored so the glyph reads upright */
.avatar__mood{
  position:absolute;top:7%;left:52%;
  width:30px;height:30px;display:grid;place-items:center;
  font-size:17px;line-height:1;
  background:#fff;border:1.5px solid var(--pink,#ff1e8e);border-radius:50%;
  box-shadow:0 0 14px rgba(255,30,142,.35);
  transform:scaleX(var(--face,1)) scale(1);
  transition:opacity .34s ease,transform .34s ease;
}
.avatar__mood.is-changing{opacity:0;transform:scaleX(var(--face,1)) scale(.6);}

/* walking gait — a gentle bob with a slight rock so the cut-out reads as a stroll */
.avatar.is-walking .avatar__rig{animation:noorWalk .66s ease-in-out infinite;}
@keyframes noorWalk{
  0%,100%{transform:translateY(0) rotate(-1.1deg);}
  25%    {transform:translateY(-4px) rotate(0deg);}
  50%    {transform:translateY(0) rotate(1.1deg);}
  75%    {transform:translateY(-4px) rotate(0deg);}
}
.avatar__shadow{
  position:absolute;left:50%;bottom:-6px;width:60%;height:14px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(8,8,13,.24),transparent 70%);
  border-radius:50%;z-index:-1;
}

/* hide button — sits by her shoulder */
.avatar__hide{
  position:absolute;top:18%;right:2%;z-index:2;
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(8,8,13,.18);background:#fff;color:var(--ink,#08080d);
  font:700 16px/1 'DM Sans',sans-serif;cursor:pointer;
  box-shadow:0 6px 16px rgba(8,8,13,.18);
  opacity:0;transition:opacity .2s;
}
.avatar:hover .avatar__hide,.avatar__hide:focus-visible{opacity:1;}
.avatar__hide:hover{background:var(--pink,#ff1e8e);color:#fff;border-color:var(--pink,#ff1e8e);}
@media (hover:none){.avatar__hide{opacity:1;}}

/* speech bubble */
.avatar__bubble{
  position:absolute;right:0;bottom:calc(100% - 4px);
  transform-origin:bottom right;
  transform:translate(0,8px) scale(.9);
  width:max-content;max-width:min(260px,calc(100vw - 32px));
  background:#fff;color:var(--ink,#08080d);
  border:1.5px solid var(--pink,#ff1e8e);border-radius:14px;
  padding:.7rem .95rem;
  font:500 13.5px/1.45 'DM Sans',sans-serif;
  box-shadow:0 18px 40px -20px rgba(8,8,13,.5),0 0 24px rgba(255,30,142,.25),0 0 30px rgba(0,232,207,.18);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
.avatar__bubble::after{
  content:"";position:absolute;right:42px;top:100%;
  border:8px solid transparent;border-top-color:var(--pink,#ff1e8e);
}
.avatar.bubble-right .avatar__bubble{right:auto;left:0;transform-origin:bottom left;}
.avatar.bubble-right .avatar__bubble::after{right:auto;left:42px;}
.avatar.show-bubble .avatar__bubble{opacity:1;transform:translate(0,0) scale(1);}

/* onboarding hint */
.avatar-hint{
  position:fixed;z-index:295;left:50%;bottom:26px;
  transform:translateX(-50%);
  width:min(440px,calc(100vw - 32px));
  background:var(--ink,#08080d);color:#fff;
  border:1px solid rgba(0,232,207,.35);border-radius:14px;
  padding:1rem 1.2rem;display:grid;gap:.35rem;
  box-shadow:0 24px 50px -24px rgba(8,8,13,.7),0 0 30px rgba(255,30,142,.25);
  animation:noorHintIn .6s ease both;
}
@keyframes noorHintIn{from{opacity:0;transform:translate(-50%,20px);}}
.avatar-hint.is-hidden{display:none;}
.avatar-hint strong{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;}
.avatar-hint span{font-size:.86rem;color:rgba(255,255,255,.78);line-height:1.5;}
.avatar-hint__actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem;}
.avatar-hint button,.avatar-recall{
  border:none;border-radius:100px;padding:.45rem 1.1rem;cursor:pointer;
  font:700 10.5px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.avatar-hint__tour{background:var(--pink,#ff1e8e);color:#fff;}
.avatar-hint__close{background:#fff;color:var(--ink,#08080d);}

/* "bring her back" chip, shown after she's hidden */
.avatar-recall{
  position:fixed;z-index:295;right:18px;bottom:18px;
  background:#fff;color:var(--ink,#08080d);
  border:1.5px solid rgba(8,8,13,.14);
  box-shadow:0 10px 30px rgba(8,8,13,.16),0 0 24px rgba(255,30,142,.22);
}
.avatar-recall:hover{border-color:var(--pink,#ff1e8e);}
.avatar-recall.is-hidden{display:none;}

@media (max-width:700px){
  .avatar{width:112px;}
  .avatar__bubble{font-size:12.5px;max-width:min(230px,calc(100vw - 24px));}
  .avatar-hint{bottom:150px;}
  .avatar-recall{bottom:80px;right:12px;}
}
@media (prefers-reduced-motion:reduce){
  .avatar.is-walking .avatar__rig{animation:none !important;}
  .avatar-hint{animation:none;}
}
@media print{.avatar-stage,.avatar-hint,.avatar-recall{display:none;}}