/* === HERO (правый нижний) === */
.hero-popup-right {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 250px; /* ширина героя, не пузыря */
  opacity: 0;
  transition: opacity .45s ease;
}
.hero-popup-right.show { opacity: 1; }

/* плавное движение и лёгкий зум у внутреннего контейнера */
.hero-container-right {
  position: relative;
  display: inline-block;
  transform: translateY(12px) scale(.98);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.hero-popup-right.show .hero-container-right {
  transform: translateY(0) scale(1);
}

.hero-image-right {
  width: 100%;
  height: auto;
  display: block;
}

/* Пузырь текста — компактная версия */
.hero-text-right {
  box-sizing: border-box;
  position: absolute;
  bottom: 100%;
  right: 70px;     /* пузырь уходит влево от героя, чтобы не липнуть к краю */
  transform: none;

  font-family: 'Lato', sans-serif;
  font-size: 15px;
  color: black;
  background: rgba(255, 255, 255, 0.95);

  /* место под крестик (верх/право), чтобы текст не налезал */
  padding: 20px 44px 12px 12px;

  border-radius: 12px;
  box-shadow:
    0 0 0 2px black,
    0 4px 10px rgba(0, 0, 0, 0.3);

  /* нормальная ширина: короткий текст не превращается в «столбик» */
  width: 340px;
  max-width: min(420px, calc(100vw - 40px));

  text-align: center; /* по умолчанию как на мобиле */
  word-break: break-word;
  z-index: 10;
}

/* Выравнивание текста внутри пузыря (управляется классами) */
.hero-text-right.bubble-left,
.hero-text-right .bubble-left {
  text-align: left;
}
.hero-text-right.bubble-center,
.hero-text-right .bubble-center {
  text-align: center;
}

.hero-text-right::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 28px solid black;    /* обводка */
  z-index: 8;
}
.hero-text-right::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;
  border-top: 24px solid rgba(255,255,255,0.95);
  z-index: 9;
}

/* Крестик */
.hero-close-right {
  position: absolute;
  top: 6px;
  right: 10px;

  width: 28px;
  height: 28px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;

  font-size: 20px;
  line-height: 1;
  color: red;
  cursor: pointer;
  font-weight: 700;
}

/* === ДЕСКТОП: пузырь как на мобилке (над героем, маяк по центру) === */
@media (min-width: 769px){
  .hero-text-right{
    left: 50%;
    right: auto;
    /* сдвиг влево чуть сильнее, чтобы пузырь не вылезал за правый край */
    transform: translateX(-65%);

    /* нормальная ширина, без “столбика” */
    width: 340px;
    max-width: min(420px, calc(100vw - 60px));

    /* меньше “пустоты” под крестик, но текст всё равно не лезет под него */
    padding: 28px 38px 12px 12px;
  }

  .hero-text-right::before,
  .hero-text-right::after{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* === ПАДЕНИЕ БИОПЛАЗМЫ === */
.falling-bio {
  position: fixed;
  left: 50%;
  top: 10%;
  z-index: 15000;
  width: 200px;
  height: 200px;
  transform-origin: center center;
  pointer-events: none;
  opacity: 1;
  animation: fall-bio 1.5s ease-in-out forwards;
}
.falling-bio.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@keyframes fall-bio {
  0%   { top: 10%;  transform: translateX(-50%) rotate(-15deg); opacity: .95; }
  20%  { transform: translateX(-55%) rotate(12deg); }
  40%  { transform: translateX(-47%) rotate(-10deg); }
  60%  { transform: translateX(-53%) rotate(8deg);  opacity: 1; }
  80%  { transform: translateX(-50%) rotate(-4deg); opacity: 1; }
  100% { top: 110%; transform: translateX(-50%) rotate(0deg);  opacity: 0; }
}



/* === БИОПЛАЗМА-СЧЁТЧИК (бамп) === */
.bioplasma-count { display: inline-block; transform-origin: center; }
.bioplasma-icon,
.bioplasma-count {
  display: inline-block;
  transform: scale(1);
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.bioplasma-bump .bioplasma-icon,
.bioplasma-bump .bioplasma-count,
.bioplasma:hover .bioplasma-icon,
.bioplasma:hover .bioplasma-count {
  transform: scale(1.16);
}
@media (prefers-reduced-motion: reduce) {
  .bioplasma-icon, .bioplasma-count { transition: none !important; }
}

/* === BIO-CLOUD === */
.bio-cloud {
  box-sizing: border-box;
  user-select: none;
  pointer-events: none;
  text-align: center;
  min-width: 140px;
  max-width: 80vw;
  word-break: break-word;
  background: rgba(255,255,255,0.98);
  border-radius: 36px;
  border: 3px solid #90ff90;
  box-shadow: 0 8px 38px 0 rgba(120,220,120,0.13), 0 2px 16px 0 rgba(0,0,0,0.10);
  font-family: 'WellwaitFree', 'Lato', sans-serif;
  font-size: 21px;
  font-weight: bold;
  color: #222;
  padding: 18px 36px;
  opacity: 0;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.bio-cloud-icon {
  height: 38px;
  width: 38px;
  margin-right: 5px;
  filter: drop-shadow(0 0 9px gold);
  vertical-align: middle;
}




/* === бейдж уведомлений над аватаром === */
/* обёртка нужна для абсолютного позиционирования кружка */
.avatar-wrap { 
  position: relative; 
  display: inline-block; /* чтобы кружок “привязался” к размеру аватара */
}

/* сам кружок (по умолчанию скрыт) */
.avatar-wrap .notif-badge {
  position: absolute;
  top: 0;               /* прижат к правому-верхнему углу аватара */
  right: 0;
  transform: translate(50%, -50%); /* чуть за край */
  min-width: 20px;      /* компактный круг с запасом под двузначные */
  height: 20px;
  padding: 0 6px;       /* чтобы влезли "10…99" */
  border-radius: 999px; /* круглая форма */
  background: #16a34a;  /* зелёный; потом можно переопределить переменной темы */
  color: #fff;

  /* ——— шрифт и читабельность цифр ——— */
  font-family: "Lato", Arial, sans-serif;     /* рус: остаёмся на твоём Lato */
  font-weight: 900;                           /* рус: плотнее, чтобы цифры были заметнее */
  font-size: 16px;                            /* рус: размер как был */
  line-height: 18px;                          /* рус: центрирование по высоте */
  font-variant-numeric: tabular-nums;         /* рус: одинаковая ширина цифр 0–9 */
  font-feature-settings: "tnum" 1, "lnum" 1;  /* рус: дубль на случай, если font-variant не сработает */
  letter-spacing: 0;                          /* рус: без растяжения */
  text-transform: none;                       /* рус: выключаем возможный uppercase */
  text-align: center;
  

  box-shadow: 0 0 0 2px #fff; /* тонкий кант, чтобы читалось на любом фоне */
  display: none;        /* показываем только когда есть непрочитанные */
  pointer-events: auto; /* чтобы клик по бейджу работал */
  cursor: pointer;
}
.avatar-wrap .notif-badge.show {
  display: inline-block; /* включаем кружок */
}

/* === ТЕЛЕПОРТ БЛОКА (универсально) === */
.bio-teleport{
  opacity: 1;
  transition: opacity 260ms ease;
  will-change: opacity;
}
.bio-teleport.bio-teleport-hidden{
  opacity: 0;
  pointer-events: none;
}

/* если нужно отключать анимацию — делаем отдельным классом */
.bio-teleport.bio-teleport-noanim{
  transition: none !important;
}

/* один мобильный блок (удалены дубли @media 600px) */
@media (max-width: 600px) {
  .bio-cloud {
    font-size: 16px;
    padding: 10px 8px;
    min-width: 90px;
    border-radius: 24px;
  }
}
/* === МОБИЛКА: герой по центру снизу === */
@media (max-width: 768px){
  .hero-popup-right{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom) + 12px);
    width: min(380px, 90vw);
    max-width: none; /* чтоб не ограничивало базовое max-width */
  }
  .hero-container-right{ width: 100%; }
}
/* МАЯК: МОБИЛКА — заголовок "Ответ" в попапе героя (жирный, но компактный) */
@media (max-width: 768px){
  .hero-popup-right .answer-title,
  .hero-text-right .answer-title{
    font-size: 1em;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 6px;
  }
}

/* === ПУЗЫРЬ ГЕРОЯ: адаптация как в zagadka1 (чтобы на мобилке было «по центру») === */
@media (min-width: 481px) and (max-width: 768px){
  .hero-text-right{
    left:50%; right:auto; transform:translateX(-50%);
    width:min(420px, calc(100vw - 40px));
    font-size:16px;
  }
  .hero-text-right::before,
  .hero-text-right::after{ left:50%; right:auto; transform:translateX(-50%); }
}

@media (min-width: 376px) and (max-width: 480px){
  .hero-text-right{
    left:50%; right:auto; transform:translateX(-50%);
    width:min(360px, calc(100vw - 32px));
    font-size:15px;
  }
  .hero-text-right::before,
  .hero-text-right::after{ left:50%; right:auto; transform:translateX(-50%); }
}

@media (max-width: 375px){
  .hero-text-right{
    left:50%; right:auto; transform:translateX(-50%);
    width:min(320px,calc(100vw - 32px));
    font-size:14px;
  }
  .hero-text-right::before,
  .hero-text-right::after{
    left:50%; right:auto; transform:translateX(-50%);
    border-top-width:22px;
  }
}
/* Уважение к reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-popup-right,
  .hero-container-right{
    transition: none !important;
    transform: none !important;
  }
}