/* =====================================================================
   PAGEFX — общие эффекты и меню для страниц НЕТПЛЕЙ / ПРОФИЛЬ (v17).
   На главной эти стили тоже используются (CRT-стили) — home.css
   подключает этот файл вместе с собой.

   Содержимое:
   - CRT: body.crt[data-crt=off|fine|classic|strong|vhs|rgb]
     (стиль задаётся в админке, вкл/выкл — кнопка в меню);
   - выпадающее меню ⋯ (день/ночь, звуки, CRT, баг-репорт);
   - компактная карточка профиля (ховер на кнопке ☺);
   - слой погоды (дождь/снег) на обычных страницах;
   - диалог баг-репорта.
   ===================================================================== */

/* ---------- CRT ---------- */
body.crt::after{
  content:'';position:fixed;inset:0;z-index:40;pointer-events:none;
  box-shadow:inset 0 0 110px rgba(8,10,26,.30);
}
/* мелкие сканлайны — почти незаметные, дефолт */
body.crt[data-crt="fine"]::after{
  background:repeating-linear-gradient(transparent 0 1px,rgba(8,10,26,.18) 1px 2px);
  box-shadow:inset 0 0 90px rgba(8,10,26,.22);
}
/* классика — как было в v16 (2px линия / 3px период) */
body.crt[data-crt="classic"]::after{
  background:repeating-linear-gradient(transparent 0 2px,rgba(8,10,26,.35) 2px 3px);
  box-shadow:inset 0 0 110px rgba(8,10,26,.35);
}
/* жирные строки + тёмная виньетка */
body.crt[data-crt="strong"]::after{
  background:repeating-linear-gradient(transparent 0 3px,rgba(8,10,26,.50) 3px 4px);
  box-shadow:inset 0 0 170px rgba(8,10,26,.55);
}
/* VHS: сканлайны + ползущая полоса плёнки + лёгкий шум */
body.crt[data-crt="vhs"]::after{
  background:repeating-linear-gradient(transparent 0 2px,rgba(8,10,26,.28) 2px 3px);
  box-shadow:inset 0 0 130px rgba(8,10,26,.4);
  animation:pf-vhs 9s linear infinite;
}
body.crt[data-crt="vhs"]::before{
  content:'';position:fixed;inset:0;z-index:40;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.045) 48%,rgba(255,255,255,.045) 52%,transparent 100%);
  background-size:100% 220px;background-repeat:no-repeat;
  animation:pf-vhs-band 7s linear infinite;
}
@keyframes pf-vhs-band{from{background-position:0 -220px}to{background-position:0 calc(100% + 220px)}}
@keyframes pf-vhs{0%,100%{filter:none}50%{filter:saturate(1.06)}}
/* RGB-маска: вертикальные триады субпикселей + слабые строки */
body.crt[data-crt="rgb"]::after{
  background:
    repeating-linear-gradient(90deg,rgba(255,60,120,.07) 0 1px,rgba(60,255,160,.07) 1px 2px,rgba(90,150,255,.07) 2px 3px),
    repeating-linear-gradient(transparent 0 2px,rgba(8,10,26,.14) 2px 3px);
  box-shadow:inset 0 0 100px rgba(8,10,26,.25);
}
@media (prefers-reduced-motion: reduce){
  body.crt[data-crt="vhs"]::after,body.crt[data-crt="vhs"]::before{animation:none}
}

/* ---------- верхнее меню страниц (и дропдаун главной) ---------- */
.pf-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-nav a,.pf-nav button,.pf-nav .pf-online{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;min-width:112px;padding:0 14px;border-radius:6px;
  font-size:12px;font-family:var(--font,'Space Grotesk',Arial,sans-serif);
  background:rgba(23,22,47,.82);border:1px solid rgba(255,255,255,.10);
  color:#a29ab8;text-decoration:none;cursor:pointer;white-space:nowrap;
  backdrop-filter:blur(14px);
}
.pf-nav .pf-menu__btn{min-width:104px;width:auto;padding:0 12px;font-size:10px}
.pf-nav .pf-online{min-width:88px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px}
.pf-nav a:hover,.pf-nav button:hover{color:#f4f1ff;border-color:rgba(70,223,235,.5)}
.pf-nav .cur{color:#f4f1ff;border-color:#ff4da6;box-shadow:0 0 14px rgba(255,77,166,.25)}
.pf-online{color:#a8e79d;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px}
.pf-online::before{content:'●';margin-right:2px;color:#a8e79d}

/* дропдаун ⋯ */
.pf-menu{position:relative}
.pf-menu__btn{font-size:14px}
.pf-menu__pop{
  position:absolute;top:calc(100% + 8px);right:0;min-width:196px;
  background:#17162f;border:1px solid rgba(255,255,255,.14);border-radius:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);padding:6px;z-index:60;
  display:none;
}
.pf-menu.open .pf-menu__pop{display:block}
.pf-menu__pop button{
  display:flex;align-items:center;gap:10px;width:100%;
  background:transparent;border:0;color:#a29ab8;font-size:12px;
  padding:10px 12px;border-radius:6px;cursor:pointer;text-align:left;
}
.pf-menu__pop button:hover{background:#211e3b;color:#f4f1ff}
.pf-menu__pop button[aria-pressed="true"]{color:#46dfeb}
.pf-menu__pop .pf-sep{height:1px;background:rgba(255,255,255,.10);margin:5px 8px}

/* ---------- карточка профиля (ховер на ☺) ---------- */
.pf-prof{position:relative}
.pf-prof__pop{
  position:absolute;top:calc(100% + 10px);right:0;width:min(300px,calc(100vw - 36px));
  background:#17162f;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);padding:16px;z-index:61;
  display:none;
}
.pf-prof.open .pf-prof__pop{display:block}
.pf-prof__head{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center}
.pf-prof__ava{width:42px;height:42px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:#211e3b;overflow:hidden}
.pf-prof__ava svg{width:100%;height:100%;display:block}
.pf-prof__id strong{display:block;font-size:14px;color:#f4f1ff}
.pf-prof__id small{display:block;font-size:10px;color:#a29ab8;margin-top:3px;font-family:var(--mono,'IBM Plex Mono',monospace)}
.pf-prof__x{width:26px;height:26px;border:1px solid rgba(255,255,255,.12);background:transparent;border-radius:5px;color:#a29ab8;cursor:pointer}
.pf-prof__rank{margin:12px 0 4px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;color:#ffd166}
.pf-prof__bar{height:5px;background:#211e3b;border-radius:3px;overflow:hidden;margin:6px 0 4px}
.pf-prof__bar i{display:block;height:100%;background:linear-gradient(90deg,#ff4da6,#46dfeb);border-radius:3px}
.pf-prof__next{font-size:10px;color:#a29ab8;font-family:var(--mono,'IBM Plex Mono',monospace)}
.pf-prof__stats{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0;padding:0}
.pf-prof__stats li{background:#211e3b;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:8px 4px;text-align:center}
.pf-prof__stats b{display:block;font-size:12px;color:#f4f1ff}
.pf-prof__stats span{display:block;font-size:8px;color:#a29ab8;margin-top:3px}
.pf-prof__go{display:block;text-align:center;padding:10px;border-radius:6px;background:linear-gradient(90deg,#ff4da6,#4fd1ff);color:#140a26;font-weight:700;font-size:11px;text-decoration:none;letter-spacing:.05em}
.pf-prof__out{display:block;width:100%;margin-top:8px;padding:8px;border-radius:6px;background:transparent;border:1px solid rgba(255,255,255,.14);color:#a29ab8;font-size:11px;cursor:pointer}
.pf-prof__out:hover{border-color:#ff5c5c;color:#ff5c5c}

/* ---------- слой погоды ---------- */
.pf-weather{position:fixed;inset:0;z-index:1;pointer-events:none}
.pf-badges{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:50;display:grid;gap:8px;justify-items:center}
.pf-toast{
  background:#17162f;border:1px solid rgba(70,223,235,.4);border-radius:8px;
  color:#f4f1ff;font-size:12px;padding:11px 16px;box-shadow:0 12px 34px rgba(0,0,0,.5);
  animation:pf-toast-in .25s ease;max-width:min(420px,90vw);
}
.pf-toast.out{opacity:0;transition:opacity .3s}
@keyframes pf-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- баг-репорт ---------- */
.pf-bugd{
  border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#17162f;color:#f4f1ff;
  width:min(430px,calc(100vw - 32px));padding:0;
}
.pf-bugd form{padding:18px;display:grid;gap:12px}
.pf-bugd__head{display:flex;justify-content:space-between;align-items:center}
.pf-bugd__title{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:12px;color:#ff4da6;letter-spacing:.08em}
.pf-bugd__x{background:transparent;border:1px solid rgba(255,255,255,.12);color:#a29ab8;width:28px;height:28px;border-radius:5px;cursor:pointer;font-size:16px}
.pf-bugd__sevs{display:flex;gap:6px;flex-wrap:wrap}
.pf-bugd__sevs label{flex:1;min-width:110px}
.pf-bugd__sevs input{display:none}
.pf-bugd__sevs span{
  display:block;text-align:center;font-size:10px;padding:9px 6px;border-radius:6px;
  border:1px solid rgba(255,255,255,.12);color:#a29ab8;cursor:pointer;
}
.pf-bugd__sevs input:checked+span{border-color:#46dfeb;color:#46dfeb;background:rgba(70,223,235,.08)}
.pf-bugd textarea,.pf-bugd input[type=text]{
  width:100%;background:#211e3b;border:1px solid rgba(255,255,255,.12);border-radius:6px;
  color:#f4f1ff;padding:10px 12px;font:12px var(--font,'Space Grotesk',Arial,sans-serif);
}
.pf-bugd textarea{resize:vertical;min-height:84px}
.pf-bugd__hint{font-size:10px;color:#a29ab8;line-height:1.6}
.pf-bugd__actions{display:flex;gap:8px;justify-content:flex-end}
.pf-bugd__actions button{padding:10px 14px;border-radius:6px;cursor:pointer;font-size:11px}
.pf-bugd__cancel{background:transparent;border:1px solid rgba(255,255,255,.14);color:#a29ab8}
.pf-bugd__send{background:linear-gradient(90deg,#ff4da6,#4fd1ff);border:0;color:#140a26;font-weight:700}
.pf-bugd__result{font-size:11px;min-height:1em}
.pf-bugd__result--err{color:#ff5c5c}
.pf-bugd__result--ok{color:#a8e79d}
dialog.pf-bugd::backdrop{background:rgba(12,12,34,.62);backdrop-filter:blur(4px)}

/* ---------- день/ночь страниц ---------- */
body.pf-day{--pf-page-bg:linear-gradient(180deg,#2b3a6b 0%,#5d4a8a 55%,#a35a8f 100%)}
body.pf-night{--pf-page-bg:linear-gradient(180deg,#0c0c22 0%,#221a44 55%,#3d2050 100%)}