/* Обвивката на приложението: горен ред, екрани, док (мини плеър + навигация)
   и общият панелен език (заглавия, карти) за вътрешните екрани. */

/* ---------- горен ред ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:var(--z-top);pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-start;color:var(--ink);
  text-shadow:var(--text-glow);
  padding:calc(env(safe-area-inset-top) + 18px) var(--pad-x) 0}
.wordmark{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:21px;line-height:1.05}
.wordmark small{display:block;font-family:var(--font-ui);font-style:normal;font-weight:500;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.daychip{pointer-events:auto;cursor:pointer;text-align:right;font-size:13px;font-weight:500;color:var(--ink);
  padding:6px 0 10px 14px;user-select:none;transition:opacity .35s ease}
.daychip b{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:16px;letter-spacing:.01em}
.daychip span{color:var(--ink-soft)}
.daychip em{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:3px;opacity:.85}
body:not([data-tab="efir"]) .daychip{opacity:0;pointer-events:none}
/* над тъмната завеса мастилото е винаги слонова кост */
body[data-tab="mehanata"] .top,
body[data-tab="lyasara"] .top{color:var(--ivory);text-shadow:0 1px 12px rgba(10,25,10,.55)}
body[data-tab="mehanata"] .wordmark small,
body[data-tab="lyasara"] .wordmark small{color:var(--ivory70)}

/* ---------- екрани ---------- */
.screens{position:fixed;inset:0;z-index:var(--z-screen);pointer-events:none}
/* [mobile-flicker] меко угасване на ръбовете БЕЗ mask-image (маската трепти на мобилен
   Chrome при скрол). Фиксиран градиент-воал над съдържанието, под логото/дока; само на
   Лясъра, чийто фон е тъмната завеса, та угасването към --night е незабележимо. */
.screens::before,.screens::after{content:'';position:fixed;left:0;right:0;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .4s ease}
.screens::before{top:0;height:calc(env(safe-area-inset-top) + 138px);
  background:linear-gradient(to bottom, var(--night), rgba(6,18,11,.62) 58%, transparent)}
.screens::after{bottom:0;height:calc(env(safe-area-inset-bottom) + 156px);
  background:linear-gradient(to top, var(--night), rgba(6,18,11,.55) 56%, transparent)}
body[data-tab="lyasara"] .screens::before,
body[data-tab="lyasara"] .screens::after{opacity:1}
.screen{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none;visibility:hidden;
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1), visibility 0s .4s;
  padding:calc(env(safe-area-inset-top) + 92px) var(--pad-x) calc(env(safe-area-inset-bottom) + 172px)}
.screen.on{opacity:1;transform:none;visibility:visible;transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1)}
.screen--panel{overflow-y:auto;scrollbar-width:none;
  padding-top:calc(env(safe-area-inset-top) + 124px);
  /* съдържанието гасне към ръбовете през маска: сцената не се затъмнява,
     а скролът угасва преди да стигне логото и дока */
  -webkit-mask-image:linear-gradient(180deg,
    transparent calc(env(safe-area-inset-top) + 40px),
    #000 calc(env(safe-area-inset-top) + 120px),
    #000 calc(100% - 132px), transparent calc(100% - 44px));
  mask-image:linear-gradient(180deg,
    transparent calc(env(safe-area-inset-top) + 40px),
    #000 calc(env(safe-area-inset-top) + 120px),
    #000 calc(100% - 132px), transparent calc(100% - 44px))}
/* [mobile-flicker] Лясъра: махаме mask-image от скролващия панел. На мобилен Chrome
   маската се пре-композира при ВСЕКИ скрол-кадър (и при всяка промяна на дишащия образ)
   и примигва целия екран — потвърдено на устройство с диагностичния флаг ?nomask. Мекото
   угасване идва от фиксиран градиент-воал (.screens::before/after) — композира се веднъж,
   не трепти. Програма/Механата засега запазват маската (различен, светъл фон зад тях). */
#screen-lyasara{-webkit-mask-image:none;mask-image:none}
.screen--panel::-webkit-scrollbar{display:none}
.screen--panel.on{pointer-events:auto}

/* панелен език: заглавие на екран + карти */
.ph{margin-bottom:18px}
.ph h2{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:30px}
.ph p{margin-top:5px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory50)}
.card{background:rgba(10,24,14,.55);border:1px solid var(--hairline);border-radius:16px;
  padding:16px 16px 18px;margin-bottom:14px}
.card-k{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ivory50);margin-bottom:10px}
.empty{font-family:var(--font-display);font-style:italic;font-size:15.5px;color:var(--ivory70);line-height:1.5}

/* ---------- док: мини плеър + навигация ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);pointer-events:none;
  display:flex;flex-direction:column;gap:8px;
  padding:0 var(--pad-x) calc(env(safe-area-inset-bottom) + 12px)}
/* тъмен преход под дока само над завесата (Механата/Лясъра);
   Програма разчита на маската + мастилото, сцената остава чиста */
.dock::before{content:'';position:absolute;left:0;right:0;bottom:0;top:-34px;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:linear-gradient(to top, #04100a 38%, rgba(4,16,10,.86) 62%, rgba(4,16,10,0))}
body[data-tab="mehanata"] .dock::before,
body[data-tab="lyasara"] .dock::before{opacity:1}

.mini{pointer-events:none;display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:14px;background:rgba(7,18,11,.72);border:1px solid var(--hairline);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translateY(8px);transition:opacity .35s ease, transform .35s ease}
body:not([data-tab="efir"]) .mini{pointer-events:auto;opacity:1;transform:none}
.mini-btn{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  position:relative;
  background:radial-gradient(circle at 34% 28%, #fffef4, #efe7cb 78%);
  box-shadow:0 6px 18px rgba(5,14,8,.5), inset 0 -2px 5px rgba(120,110,70,.25);
  display:grid;place-items:center;transition:transform .12s ease}
.mini-btn::before{content:'';position:absolute;inset:5px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 60%, rgba(255,176,84,.9), rgba(245,128,40,0) 70%);
  opacity:var(--ember,0)}
.mini-btn .ic-play,.mini-btn .ic-pause{position:relative;z-index:1}
.mini-btn:active{transform:scale(.92)}
.mini-btn .ic-play{width:0;height:0;border-left:13px solid var(--deep);
  border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.mini-btn .ic-pause{display:none;width:13px;height:15px;justify-content:space-between}
.mini-btn .ic-pause i{display:block;width:4.5px;height:100%;background:var(--deep);border-radius:1px}
.mini-btn.playing .ic-play{display:none}
.mini-btn.playing .ic-pause{display:flex}
.mini-text{min-width:0}
.mini-title{font-family:var(--font-display);font-weight:700;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-artist{margin-top:1px;font-size:11.5px;color:var(--ivory70);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{pointer-events:auto;display:flex;justify-content:center;align-items:baseline;
  gap:clamp(16px,5.5vw,32px)}
.nav button{font-family:var(--font-ui);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);text-shadow:var(--text-glow);
  padding:6px 1px 7px;position:relative;white-space:nowrap;
  background:none;border:0;cursor:pointer;transition:color .25s ease}
.nav button:active{color:var(--ink-soft)}
.nav button.on{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:17px;
  letter-spacing:.01em;text-transform:none;color:var(--ink)}
.nav button.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--ink-soft),transparent)}
/* над тъмната завеса навигацията е винаги слонова кост */
body[data-tab="mehanata"] .nav button,
body[data-tab="lyasara"] .nav button{color:var(--ivory50);text-shadow:var(--shadow-text)}
body[data-tab="mehanata"] .nav button.on,
body[data-tab="lyasara"] .nav button.on{color:var(--ivory)}

/* [perf] инактивните екрани са скрити (visibility:hidden), но техните infinite
   SVG-transform анимации (дишане, дим, реели, лампи, котка) иначе цъкат на main
   thread всеки кадър. Паузата е невидима — вдига се мигом при активиране (.on). */
.screen:not(.on),
.screen:not(.on) *{ animation-play-state: paused !important; }