/* 🪤 23.09 МЕРЕНО (nosht_novo): тъмната тема на приложението е html[data-theme="dark"]
   (js/app.js:33 + css/dark.css). html.bl-night е ДРУГО — тихите часове (js/night.js).
   Моите нощни правила бяха само за bl-night → в тъмна тема заглавието на картата
   остана тъмносиньо върху тъмносин филц: контраст 1.24:1. Затова всяко нощно
   правило тук важи И за двете. */
/* 🪤 23.09 МЕРЕНО (fei_den2.png): премиумът слага #plHome .pl-pers (ID!) с три колони —
   на 390px третата излизаше извън екрана. Затова ВСИЧКИ мои правила тук са с #plHome. */
/* ═══════════════════════════════════════════════════════════════════════════════
   🧚 ФЕИТЕ ЛЕТЯТ · вид · 23.09.2026
   Едра рисунка на всяка фея, която се носи във въздуха (различен ритъм за всяка,
   за да не махат с крилца в такт), име със сериф, роля и „какво прави“.
   ПЪТ НАЗАД: махни <link href="css/pl-fei.css"> от index.html.
   ═══════════════════════════════════════════════════════════════════════════════ */

html.pl-on #plHome .pl-pers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 2px 2px 6px;
  overflow: visible;
}
@media (min-width: 560px) { html.pl-on #plHome .pl-pers { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

html.pl-on #plHome .pl-pers .pl-per[data-pl-fei] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 10px 14px;
  min-height: 0;
  width: auto;
  border: 0;
  border-radius: 24px;
  background: var(--pl-felt-bg, #fffaf3);
  box-shadow: 0 10px 22px rgba(120, 88, 70, .12), inset 0 1px 0 rgba(255, 255, 255, .85);
  overflow: visible;
  transition: transform .4s cubic-bezier(.22, .9, .3, 1), box-shadow .4s ease;
}
html.pl-on #plHome .pl-pers .pl-per[data-pl-fei]::after {
  content: '';
  position: absolute; inset: 7px;
  border: 2px dashed rgba(196, 150, 120, .34);
  border-radius: 18px;
  pointer-events: none;
}

/* ── самата фея: едра рисунка, която ЛЕТИ ── */
html.pl-on #plHome .pl-pers .pl-per[data-pl-fei] > i {
  width: 118px !important;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: 118px !important;
  border-radius: 0;
  background-color: transparent !important;
  box-shadow: none;
  filter: drop-shadow(0 10px 14px rgba(120, 88, 70, .18));
  animation: plFeiFly 5.4s ease-in-out infinite;
  animation-delay: calc(var(--fei-i, 0) * -.62s);
  transform-origin: 50% 70%;
}
@keyframes plFeiFly {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-7px) rotate(1.6deg); }
  50%  { transform: translateY(-3px) rotate(0deg); }
  75%  { transform: translateY(-9px) rotate(-1.6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
html.pl-on #plHome .pl-pers .pl-per[data-pl-fei]:hover,
html.pl-on #plHome .pl-pers .pl-per[data-pl-fei]:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 32px rgba(120, 88, 70, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html.pl-on #plHome .pl-pers .pl-per[data-pl-fei]:hover > i { animation-duration: 2.6s; }

/* ── името, ролята, какво прави ── */
html.pl-on #plHome .pl-pers .pl-per[data-pl-fei] > b {
  font-family: var(--pl-serif, Georgia, serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--pl-ink, #2b3a67);
  margin-top: 2px;
}
html.pl-on #plHome .pl-pers .pl-per[data-pl-fei] > small {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #9c4f75;   /* МЕРЕНО (axe): #b06d8e даваше 3.72:1 при 11.5px получер; сега 5.34:1 */
  text-transform: none;
}
html.pl-on #plHome .pl-pers .pl-per[data-pl-fei] > .pl-fei-do {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(70, 60, 75, .78);
  text-align: center;
}

/* ── нощем ── */
html.bl-night.pl-on #plHome .pl-pers .pl-per[data-pl-fei], html[data-theme="dark"].pl-on #plHome .pl-pers .pl-per[data-pl-fei]{
  background: #2a2436;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.bl-night.pl-on #plHome .pl-pers .pl-per[data-pl-fei]::after, html[data-theme="dark"].pl-on #plHome .pl-pers .pl-per[data-pl-fei]::after{ border-color: rgba(255, 220, 190, .2); }
html.bl-night.pl-on #plHome .pl-pers .pl-per[data-pl-fei] > b, html[data-theme="dark"].pl-on #plHome .pl-pers .pl-per[data-pl-fei] > b{ color: #f2e9ff; }
html.bl-night.pl-on #plHome .pl-pers .pl-per[data-pl-fei] > small, html[data-theme="dark"].pl-on #plHome .pl-pers .pl-per[data-pl-fei] > small{ color: #ffc0d8; }
html.bl-night.pl-on #plHome .pl-pers .pl-per[data-pl-fei] > .pl-fei-do, html[data-theme="dark"].pl-on #plHome .pl-pers .pl-per[data-pl-fei] > .pl-fei-do{ color: rgba(236, 232, 245, .76); }
html.bl-night.pl-on #plHome .pl-pers .pl-per[data-pl-fei] > i, html[data-theme="dark"].pl-on #plHome .pl-pers .pl-per[data-pl-fei] > i{ filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)) brightness(.94); }

@media (prefers-reduced-motion: reduce) {
  html.pl-on #plHome .pl-pers .pl-per[data-pl-fei] > i { animation: none; }
}

/* ═══ ХОРОТО: балоните стават феи (23.09) ═══
   Секцията „Запознай се с помощничките“ (js/home.js) се върти като хоро. Оставяме
   движението, сменяме лицето: нарисуваният балон отстъпва на истинската фея. */
html.pl-on .horo-b[data-pl-fei] .horo-ball {
  width: 74px;
  height: 74px;
  filter: drop-shadow(0 8px 12px rgba(120, 88, 70, .22));
}
html.pl-on .horo-b[data-pl-fei] .horo-ball svg { display: none; }          /* нарисуваният балон си отива */
html.pl-on .horo-b[data-pl-fei] .horo-aura { opacity: .35; }
html.pl-on .horo-b[data-pl-fei] .horo-badge {
  right: -4px; bottom: 2px;
  font-size: 16px;
}
html.pl-on .horo-b[data-pl-fei] .horo-name {
  font-family: var(--pl-serif, Georgia, serif);
  font-weight: 700;
  color: var(--pl-ink, #2b3a67);
}
html.bl-night.pl-on .horo-b[data-pl-fei] .horo-name, html[data-theme="dark"].pl-on .horo-b[data-pl-fei] .horo-name{ color: #f2e9ff; }
html.bl-night.pl-on .horo-b[data-pl-fei] .horo-ball, html[data-theme="dark"].pl-on .horo-b[data-pl-fei] .horo-ball{ filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)) brightness(.93); }

/* 🪤 МЕРЕНО (horo_fei.png): старите балони носят нарисувано личице (.лице с .око/.зеница/
   .усмивка, js/home.js:381) — върху феята то изглеждаше като изпъкнали очи насред тялото.
   Феята си има лице. Личицето се маха само там, където има фея. */
html.pl-on .horo-b[data-pl-fei] .лице { display: none !important; }
html.pl-on .horo-b[data-pl-fei] .horo-ball {
  border-radius: 50%;
  background-color: #fdf6ec;
  background-clip: padding-box;
}
html.bl-night.pl-on .horo-b[data-pl-fei] .horo-ball, html[data-theme="dark"].pl-on .horo-b[data-pl-fei] .horo-ball{ background-color: #2a2436; }
html.pl-on .horo-b[data-pl-fei] .horo-name { margin-top: 6px; display: block; }
html.pl-on .horo-b[data-pl-fei] .horo-badge { right: -2px; bottom: -2px; }

/* имената да се четат и когато кръговете се доближат при въртене */
html.pl-on .horo-b[data-pl-fei] .horo-name {
  position: relative;
  z-index: 4;
  padding: 1px 6px;
  border-radius: 9px;
  background: rgba(255, 252, 247, .82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
html.bl-night.pl-on .horo-b[data-pl-fei] .horo-name, html[data-theme="dark"].pl-on .horo-b[data-pl-fei] .horo-name{ background: rgba(42, 36, 54, .82); box-shadow: none; }
html.pl-on .horo-b[data-pl-fei] .horo-badge { z-index: 5; }

/* ═══════════════════════════════════════════════════════════════════════════════
   🧚 20.10 · ПОМОЩНИЧКИТЕ — ЕДНА ЛЕНТА (gl20)
   Беше: 9 едри карти в 2 колони ≈ 1142 px (два екрана), с 9 безкрайни „летения“ (plFeiFly) —
   и същите девет пак в хорото долу и в ъгъла на всяка голяма карта. Сега: една лента, която се
   плъзга с пръст (snap), 9 компактни карти — фея, име, роля, какво прави (нищо не е махнато).
   Движение: при влизане в кадър феите долитат веднъж една след друга (outQuart, по 50 ms);
   при докосване — малък подскок. Безкрайното летене е спряно.
   ПЪТ НАЗАД: махни този блок (до „край 20.10“).
   ═══════════════════════════════════════════════════════════════════════════════ */
html.pl-gl20 #plHome .pl-pomosht { position: relative; margin: 26px 0 0; }
html.pl-gl20 #plHome .pl-pomosht .pl-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 20px 8px; }
html.pl-gl20 #plHome .pl-pomosht .pl-ph { margin: 0; font-family: var(--pl-serif); font-weight: 700; font-size: 21px; line-height: 1.15; color: var(--pl-navy); }
html.pl-gl20 #plHome .pl-pomosht .pl-panel-h small { font-size: 12.5px; font-weight: 700; color: var(--pl-ink-soft); }
html.pl-gl20 #plHome .pl-pomosht .pl-pers {
  display: flex; grid-template-columns: none; gap: 10px; margin: 0; padding: 6px 16px 16px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none;
}
html.pl-gl20 #plHome .pl-pomosht .pl-pers::-webkit-scrollbar { display: none; }
/* десният ръб се топи — подсказва, че има още (статичен преливник, не маска) */
html.pl-gl20 #plHome .pl-pomosht::after {
  content: ''; position: absolute; right: 0; top: 38px; bottom: 16px; width: 26px; pointer-events: none;
  background: linear-gradient(90deg, rgba(246, 237, 227, 0), #f6ede3);
}
html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] {
  flex: 0 0 118px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 8px 12px; border-radius: 22px; border: 1px solid rgba(214, 186, 158, .5);
  background: #fffaf3; box-shadow: 0 6px 14px rgba(110, 76, 52, .12);
  transition: opacity .55s cubic-bezier(.25, 1, .5, 1), transform .55s cubic-bezier(.25, 1, .5, 1);
  transition-delay: calc(var(--i, 0) * 50ms);
}
html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei]::after { content: none; display: none; }      /* шевът — в малка карта е шум */
html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei]:hover, html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei]:focus-visible { transform: none; }
html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > i {
  width: 84px !important; height: 84px !important; animation: none !important;
  filter: drop-shadow(0 6px 8px rgba(120, 88, 70, .16));
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei]:active > i { transform: translate3d(0, -5px, 0) rotate(-4deg); transition-duration: .18s; }
html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > b { font-size: 15.5px; margin-top: 4px; color: var(--pl-navy); }
html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > small { font-size: 11.5px; }
html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > .pl-fei-do {
  margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--pl-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* поява: веднъж, когато лентата влезе в кадър (.pl-vh — js/premium-home.js) */
/* 27.10 · ЗАКОНЪТ ЗА СКРИТИЯ ТАБ (комит 25f85ec): феите са пипаемо съдържание. html.pl-gl20-io идва веднага, .pl-vh —
   чак от наблюдателя, който в скрит таб/headless не тръгва → стояха на 0. Сега чакат на .4. ПЪТ НАЗАД: върни „opacity: 0“. */
html.pl-gl20-io #plHome .pl-pomosht:not(.pl-vh) .pl-pers .pl-per { opacity: .4; transform: translate3d(22px, 0, 0); }
/* нощем */
html[data-theme="dark"].pl-gl20 #plHome .pl-pomosht .pl-ph { color: #fff; }
html[data-theme="dark"].pl-gl20 #plHome .pl-pomosht .pl-panel-h small { color: #c9cbe3; }
html[data-theme="dark"].pl-gl20 #plHome .pl-pomosht::after { background: linear-gradient(90deg, rgba(22, 29, 69, 0), #161d45); }
html[data-theme="dark"].pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] { background: rgba(31, 43, 92, .95); border-color: rgba(255, 255, 255, .14); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
html[data-theme="dark"].pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > b { color: #fff; }
html[data-theme="dark"].pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > .pl-fei-do { color: #c9cbe3; }
@media (prefers-reduced-motion: reduce) {
  html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei], html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > i { transition: none; }
  html.pl-gl20-io #plHome .pl-pomosht:not(.pl-vh) .pl-pers .pl-per { opacity: 1; transform: none; }
}
/* 🌙 тихите часове (html.bl-night) правеха лентата тъмна И В СВЕТЛА тема (мерено 20.10, gl20_c1) — в светла остава светла */
html:not([data-theme="dark"]).pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] { background: #fffaf3; box-shadow: 0 6px 14px rgba(110, 76, 52, .12); }
html:not([data-theme="dark"]).pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > b { color: var(--pl-navy); }
html:not([data-theme="dark"]).pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > small { color: #9c4f75; }
html:not([data-theme="dark"]).pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > .pl-fei-do { color: var(--pl-ink-soft); }
html:not([data-theme="dark"]).pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > i { filter: drop-shadow(0 6px 8px rgba(120, 88, 70, .16)); }
html:not([data-theme="dark"]).pl-gl20 .horo-b[data-pl-fei] .horo-name { color: var(--pl-ink, #2b3a67); background: rgba(255, 252, 247, .82); }
html:not([data-theme="dark"]).pl-gl20 .horo-b[data-pl-fei] .horo-ball { background-color: #fdf6ec; filter: drop-shadow(0 8px 12px rgba(120, 88, 70, .22)); }
/* рисунката на феята е квадрат с кремав фон — заобленият ъгъл я прави плочка, не изрезка */
html.pl-gl20 #plHome .pl-pers .pl-per[data-pl-fei] > i { border-radius: 18px; }
/* край 20.10 */