/* ═══════════════════════════════════════════════════════════════════════════════
   🧸 3D ФИГУРИТЕ НА МЯСТО (img/art/fig-a.webp, 4×2: мама с бебе · бебе на луна · бебе в столче ·
   мече-доктор / мама със сърце · бебе с книжка · бебе с кубчета · зайче с балонче) — 22.09.2026
   Само CSS: нищо в логиката не се пипа.
   · „Мира е до теб“ на началото — самата Мира (зайчето с метъра, persony.webp) вместо малката иконка;
   · SOS: мечето-доктор при съветите долу („Говори бавно…“) — спокойствие, без да пречи (екранът е спешен:
     нищо не мърда, 112 остава първото и най-голямото);
   · „Деветте стаи“ (задържане на бутона в долната лента) — филцов рафт с арките от началото,
     вместо емоджита на бяло.
   ПЪТ НАЗАД: махни <link> на pl-figuri от index.html.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* клетка от листа: x = колона·33.333%, y = ред·100% */
.pl-mira > i.pl-mira-av.pl-mira-av {
  background-image: url(../img/art/persony.webp) !important; background-size: 300% 300% !important; background-position: 50% 0 !important;   /* Мира — зайчето с метъра */
  background-color: #fff !important; background-blend-mode: normal !important;
  width: 62px; height: 62px; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(110, 76, 52, .2);
}

/* ── SOS ── */
/* горе остава компактно (112 е първото); мечето стои долу при „Говори бавно · кажи АДРЕСА първо…“ */
html body .sos-ov .sos-tips { display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 22px !important; }
html body .sos-ov .sos-tips::before {
  content: ''; flex: none; width: 58px; height: 58px; border-radius: 50%;
  background: #fff url(../img/art/fig-a.webp) 100% 0 / 400% 200% no-repeat;
  box-shadow: 0 0 0 3px #fde3e7, 0 4px 10px rgba(155, 35, 53, .18);
}

/* ── ДЕВЕТТЕ СТАИ ── */
html body .np-box.np-box {
  background-color: #fffaf3; background-image: url(../img/art/felt.webp); background-size: 160px 160px; background-blend-mode: multiply;
  border: 1px solid rgba(214, 186, 158, .65); border-radius: 30px;
  box-shadow: 0 -10px 40px rgba(60, 40, 30, .28), inset 0 2px 0 rgba(255, 255, 255, .9);
  outline: 1.5px dashed rgba(196, 160, 124, .55); outline-offset: -8px; padding: 18px 14px 20px;
}
html body .np-box .np-h { font-family: Georgia, 'Noto Serif', serif; font-size: 21px; color: #2b3163; }
html body .np-box .np-grid { gap: 10px 8px; }
html body .np-box .np-b {
  border: 0; border-radius: 18px; padding: 6px 2px 8px; gap: 6px; min-height: 104px;
  font-family: Georgia, 'Noto Serif', serif; font-size: 12.5px; font-weight: 700; color: #2b3163; background: transparent;
}
html body .np-box .np-b span {
  width: 74px; height: 64px; border-radius: 40px 40px 12px 12px; font-size: 0; color: transparent;
  background: #fde6ef center / cover no-repeat; box-shadow: inset 0 0 0 3px #fff, 0 5px 12px rgba(110, 76, 52, .2);
}
html body .np-box .np-b:active span { transform: translateY(2px) scale(.97); }
html body .np-box .np-b:focus-visible { outline: 3px solid #c8457a; outline-offset: 2px; background: rgba(200, 69, 122, .08); }
.np-b[data-r="Бременност"] span      { background-image: url(../img/art/room-preg.webp) !important; }
.np-b[data-r="Моето бебе"] span      { background-image: url(../img/art/room-baby.webp) !important; }
.np-b[data-r="Захранване"] span      { background-image: url(../img/art/room-feed.webp) !important; }
.np-b[data-r="Здраве и SOS"] span    { background-image: url(../img/art/room-health.webp) !important; }
.np-b[data-r="Развитие и игри"] span { background-image: url(../img/art/room-play.webp) !important; }
.np-b[data-r="Инструменти"] span     { background-image: url(../img/art/room-tools.webp) !important; }
.np-b[data-r="Дневник на мама"] span { background-image: url(../img/art/room-diary.webp) !important; }
.np-b[data-r="Жената в мен"] span    { background-image: url(../img/art/room-mom.webp) !important; }
.np-b[data-r="Лабораторията"] span   { background-image: url(../img/art/room-lab.webp) !important; }
html[data-theme="dark"] body .np-box.np-box { background-color: #26336b; background-blend-mode: normal; background-image: none; border-color: rgba(255, 255, 255, .16); outline-color: rgba(255, 255, 255, .22); }
html[data-theme="dark"] body .np-box .np-h, html[data-theme="dark"] body .np-box .np-b { color: #f3f0ff; }

/* ═══ 🧚 ФЕИТЕ НА СТАИТЕ (img/art/persony.webp, 3×3, Soul 2 — 23.09: плюшени ФЕИ с крилца, не играчки;
   собственикът: „това са феи помощнички за всяко нещо и имената им са подбрани за категорията“) ═══
   Мила (облаче) · Мира (зайче с метър) · Малина (малинка-готвачка) / Вита (мече-сестра) · Луна · Искра (звезда) /
   Дара (бухалче с ключ) · Ния (коте с чаша) · Ема (лисиче-детектив). Клетка: x = колона·50%, y = ред·50%.
   Медальонът стои на горния десен ъгъл на заглавната плочка (.pl-rhero-t) — само украса (aria няма нужда: псевдоелемент). */
html body #roomOverlay .ro-panel .pl-rhero-t::after {
  content: ''; position: absolute; right: -18px; top: -26px; width: 64px; height: 64px; border-radius: 50%;
  background: #fff url(../img/art/persony.webp) 0 0 / 300% 300% no-repeat;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(229, 109, 153, .35), 0 8px 16px rgba(110, 76, 52, .22);
  animation: plPersIn .7s cubic-bezier(.3, 1.4, .5, 1) .35s both;
}
@keyframes plPersIn { from { opacity: 0; transform: translateY(12px) scale(.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
html body #roomOverlay .ro-panel.ro-peach  .pl-rhero-t::after { background-position: 0 0; }
html body #roomOverlay .ro-panel.ro-sky    .pl-rhero-t::after { background-position: 50% 0; }
html body #roomOverlay .ro-panel.ro-carrot .pl-rhero-t::after { background-position: 100% 0; }
html body #roomOverlay .ro-panel.ro-green  .pl-rhero-t::after { background-position: 0 50%; }
html body #roomOverlay .ro-panel.ro-lav    .pl-rhero-t::after { background-position: 50% 50%; }
html body #roomOverlay .ro-panel.ro-sun    .pl-rhero-t::after { background-position: 100% 50%; }
html body #roomOverlay .ro-panel.ro-mint   .pl-rhero-t::after { background-position: 0 100%; }
html body #roomOverlay .ro-panel.ro-rose   .pl-rhero-t::after { background-position: 50% 100%; }
html body #roomOverlay .ro-panel.ro-cork   .pl-rhero-t::after { background-position: 100% 100%; }
html[data-theme="dark"] body #roomOverlay .ro-panel .pl-rhero-t::after { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255, 194, 214, .4), 0 8px 16px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { html body #roomOverlay .ro-panel .pl-rhero-t::after { animation: none; } }

/* 📚 новите листове за рафтовете на статиите (js/pl-statii.js: „t“ и „h“) — url-ът трябва да е в CSS файл */
#roArticles .art-card.pl-sa-t::before, .pl-sa-medal.pl-sa-t { background-image: url(../img/art/statii-t.webp); }
#roArticles .art-card.pl-sa-h::before, .pl-sa-medal.pl-sa-h { background-image: url(../img/art/ico-h.webp); }

/* ═══ 🌬️ ЖИВИЯТ РАФТ И ДОЛНАТА ЛЕНТА ═══
   Арките на началото се полюляват една след друга — като играчки на въртележка над креватчето.
   Само transform, безкрайно → мениджърът izvan_ekrana.js ги спира извън екрана, plavno.js — при
   плъзгане с пръст; при „по-малко движение“ не мърдат. Долната лента подскача при докосване. */
html.pl-on .pl-shelf .pl-room .pl-arch { animation: plArchBob 4.6s ease-in-out infinite; transform-origin: 50% 100%; }
html.pl-on .pl-shelf .pl-room:nth-child(2) .pl-arch { animation-delay: -.6s; }
html.pl-on .pl-shelf .pl-room:nth-child(3) .pl-arch { animation-delay: -1.2s; }
html.pl-on .pl-shelf .pl-room:nth-child(4) .pl-arch { animation-delay: -1.8s; }
html.pl-on .pl-shelf .pl-room:nth-child(5) .pl-arch { animation-delay: -2.4s; }
html.pl-on .pl-shelf .pl-room:nth-child(6) .pl-arch { animation-delay: -3s; }
html.pl-on .pl-shelf .pl-room:nth-child(7) .pl-arch { animation-delay: -3.6s; }
html.pl-on .pl-shelf .pl-room:nth-child(8) .pl-arch { animation-delay: -4.2s; }
html.pl-on .pl-shelf .pl-room:nth-child(9) .pl-arch { animation-delay: -.3s; }
@keyframes plArchBob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-4px) rotate(.6deg); } }
html.pl-on .pl-shelf .pl-room:active .pl-arch { animation: none; transform: translateY(2px) scale(.97); }

html body .bn-item:active span, html body .bn-item:active svg { animation: plNavPop .34s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes plNavPop { 0% { transform: none; } 45% { transform: translateY(-4px) scale(1.14); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.pl-on .pl-shelf .pl-room .pl-arch, html body .bn-item:active span, html body .bn-item:active svg { animation: none !important; }
}

/* ═══ лицето на помощничката в картата за разговор (.ask-badge) — героинята на стаята ═══ */
html body #roomOverlay .ro-panel .ask-badge {
  color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important;
  display: inline-block !important; width: 46px !important; height: 46px !important; border-radius: 50%;
  background: #fff url(../img/art/persony.webp) 0 0 / 300% 300% no-repeat !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(229, 109, 153, .3), 0 4px 10px rgba(110, 76, 52, .2);
}
html body #roomOverlay .ro-panel.ro-peach .ask-badge { background-position: 0 0 !important; }
html body #roomOverlay .ro-panel.ro-sky .ask-badge { background-position: 50% 0 !important; }
html body #roomOverlay .ro-panel.ro-carrot .ask-badge { background-position: 100% 0 !important; }
html body #roomOverlay .ro-panel.ro-green .ask-badge { background-position: 0 50% !important; }
html body #roomOverlay .ro-panel.ro-lav .ask-badge { background-position: 50% 50% !important; }
html body #roomOverlay .ro-panel.ro-sun .ask-badge { background-position: 100% 50% !important; }
html body #roomOverlay .ro-panel.ro-mint .ask-badge { background-position: 0 100% !important; }
html body #roomOverlay .ro-panel.ro-rose .ask-badge { background-position: 50% 100% !important; }
html body #roomOverlay .ro-panel.ro-cork .ask-badge { background-position: 100% 100% !important; }

/* ═══ профилът: лента-глава зад закрепените ✕ и „✚ 112“ (находка на проверителя) ═══
   Досега двата бутона плуваха ГОЛИ върху превъртащия се тефтер и закриваха текст. В реф. 15 горната
   лента стои над сцената. Лентата е само украса (pointer-events: none) — бутоните остават над нея (z 7). */
html .prof-overlay::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; z-index: 6; pointer-events: none;
  height: calc(env(safe-area-inset-top, 0px) + 72px);
  background: linear-gradient(180deg, rgba(255, 250, 243, .97) 46%, rgba(255, 250, 243, .82) 72%, rgba(255, 250, 243, 0) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
html[data-theme="dark"] .prof-overlay::before { background: linear-gradient(180deg, rgba(22, 32, 74, .97) 46%, rgba(22, 32, 74, .82) 72%, rgba(22, 32, 74, 0) 100%); }