:lang(ka){font-family:'Noto Sans Georgian','Inter',sans-serif}
:lang(hy){font-family:'Noto Sans Armenian','Inter',sans-serif}

/* ═════════ Block separator ═════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0f;--bg1:#111118;--bg2:#18181f;--bg3:#202028;
  --acc:#e63d6f;--accG:rgba(230,61,111,.18);
  --green:#22c55e;--greenG:rgba(34,197,94,.15);
  --gold:#f5b731;
  --t1:#f0f0f5;--t2:#8888a0;--t3:#44445a;--br:rgba(255,255,255,.07);
}

/* ═══ Unified close button ═══ */
/* ─── Единая кнопка закрытия по всему сайту ─── */
.vz-x{
  position:relative;   /* для невидимой области нажатия (::after) на телефонах */
  width:32px;height:32px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.72);
  cursor:pointer;line-height:1;flex-shrink:0;
  -webkit-appearance:none;appearance:none;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.vz-x:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.22)}
.vz-x:active{transform:scale(.90)}
.vz-x svg{width:15px;height:15px;display:block;pointer-events:none}
/* Вариант «в углу окна» — тот же вид, только позиционирован */
.vz-x.vz-x-abs{position:absolute;top:14px;right:14px;z-index:5}
/* Мелкий вариант для удаления фото/сообщений */
.vz-x.vz-x-sm{width:22px;height:22px}
.vz-x.vz-x-sm svg{width:11px;height:11px}
/* Мелкие крестики удаления подсвечиваются красным */
.vz-x.vz-x-sm:hover{
  background:rgba(239,68,68,.16);color:#ef4444;border-color:rgba(239,68,68,.3);
}

/* СТРАХОВКА: любой крестик-SVG рисуется обводкой, а не заливкой.
   Без этого path без stroke заливается чёрным и на тёмном фоне
   выглядит как пустой кружок. */
svg path[d="M18 6L6 18M6 6l12 12"]{
  stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
/* У этих кнопок свои размеры, а у их SVG размер не задан —
   без этого он растягивается до дефолтных 300x150 и ломает кнопку. */
.ns-clear svg,.dmd-del svg,.dm-act-del svg,.drb-cancel svg,
.fp-c-del svg,.bug-photo-del svg{
  width:58%;height:58%;display:block;pointer-events:none;
}
/* Браузер даёт <button> свой padding (1px 6px) — из-за него крестик
   уезжает вбок вместо центра. Сбрасываем и центрируем жёстко. */
.ns-clear,.dmd-del,.dm-act-del,.drb-cancel,.fp-c-del,.bug-photo-del{
  padding:0;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-appearance:none;appearance:none;
}
/* Кнопки с крестиком и собственным оформлением: центрируем иконку,
   внешний вид не трогаем. Отдельный класс вместо :has() — его не знает
   Firefox до версии 121, и там крестик уезжал вбок. */
.vz-xc{
  padding:0;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-appearance:none;appearance:none;
}
.vz-xc svg{width:58%;height:58%;display:block;pointer-events:none}
/* Для современных браузеров — дополнительная подстраховка */
button:has(> svg > path[d="M18 6L6 18M6 6l12 12"]){
  padding:0;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
}
html[data-theme="light"] .vz-x{
  border-color:rgba(0,0,0,.10);background:rgba(0,0,0,.05);color:rgba(0,0,0,.55);
}
html[data-theme="light"] .vz-x:hover{background:rgba(0,0,0,.10);color:#111}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  color:var(--t1);
  min-height:100vh;
  overflow-x:hidden;
  font-size:15px;
  background:radial-gradient(ellipse at top, #1a0a2e 0%, #0a0612 40%, #000 100%);
  background-attachment:fixed;
  position:relative;
}
/* Звёзды на фоне всего сайта */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 10% 50%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 70% 45%, rgba(255,255,255,.35), transparent);
  background-repeat:repeat;
  background-size:800px 800px;
  pointer-events:none;
  z-index:0;
  opacity:.6;
}
/* Контент над звёздами */
body > *{position:relative;z-index:1}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:var(--acc);border-radius:2px}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--accG)}70%{box-shadow:0 0 0 10px transparent}}
@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
@keyframes liveDot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes slideIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@keyframes barStripe{0%{background-position:40px 0}100%{background-position:0 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popIn{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes progPulse{0%,100%{opacity:1}50%{opacity:.7}}
.fade-up{animation:fadeUp .35s ease forwards}

/* ── LANG DROPDOWN ── */
.lang-bar{
  position:fixed;top:58px;right:14px;z-index:300;
  background:var(--bg1);border:1px solid var(--br);border-radius:13px;
  padding:5px;display:none;flex-direction:column;gap:1px;
  box-shadow:0 8px 28px rgba(0,0,0,.5);min-width:170px;
}
.lang-bar.open{display:flex;animation:fadeUp .18s ease}
.lang-opt{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--t2);
  background:transparent;border:none;text-align:left;width:100%;transition:all .12s;
}
.lang-opt:hover{background:var(--bg3);color:var(--t1)}
.lang-opt.active{background:var(--accG);color:var(--acc);font-weight:700}
.lang-flag{font-size:18px;flex-shrink:0;line-height:1}
.lang-btn{
  background:var(--bg2);border:1px solid var(--br);color:var(--t2);
  padding:5px 10px;border-radius:17px;cursor:pointer;
  font-size:13px;font-weight:500;white-space:nowrap;
  display:flex;align-items:center;gap:5px;transition:all .15s;
}
.lang-btn:hover{border-color:var(--acc);color:var(--acc)}
.lang-btn-flag{font-size:17px;line-height:1}

/* ── NAV ── */
/* ── NAV — premium cinematic ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:66px;
  display:flex;align-items:center;padding:0 22px;gap:10px;
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(255,45,146,.10), transparent 45%),
    radial-gradient(120% 200% at 100% 0%, rgba(58,155,255,.10), transparent 45%),
    linear-gradient(180deg, rgba(14,9,20,.92), rgba(9,6,14,.82));
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.05);
}
nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,45,146,.0) 8%,
    rgba(255,45,146,.7) 26%,
    rgba(168,107,255,.85) 50%,
    rgba(58,155,255,.7) 74%,
    rgba(58,155,255,.0) 92%,
    transparent 100%);
  background-size:200% 100%;
  animation:navFlow 6s linear infinite;
  filter:blur(.3px);
  pointer-events:none;
}
@keyframes navFlow{0%{background-position:0% 0}100%{background-position:-200% 0}}

.logo{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:800;font-size:19px;letter-spacing:-.04em;
  margin-right:auto;cursor:pointer;
  display:flex;align-items:center;gap:9px;flex-shrink:0;
  background:linear-gradient(120deg,#fff 0%,#ffd0e6 45%,#cfe2ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:transform .18s;
}
.logo:hover{transform:translateY(-1px)}
.logo::before{
  content:"";display:inline-block;
  width:32px;height:28px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56' fill='none'><defs><linearGradient id='a' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ff5fb2'/><stop offset='100%25' stop-color='%23c41b6f'/></linearGradient><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%236fc1ff'/><stop offset='100%25' stop-color='%231f6fc6'/></linearGradient></defs><path d='M6 10 L16 10 L24 36 L26 36 L22 24 Z' fill='url(%23a)'/><path d='M40 10 L30 10 L28 24 L24 36 L26 36 L28 30 Z' fill='url(%23a)'/><path d='M52 12 Q45 12 45 18 Q45 24 52 26 Q59 28 59 34 Q59 40 52 40 Q47 40 45 36 L48 33 Q49 36 52 36 Q55 36 55 33 Q55 30 50 28 Q43 26 43 18 Q43 8 52 8 Q57 8 59 12 L56 15 Q54 12 52 12 Z' fill='url(%23b)'/></svg>") center/contain no-repeat;
  filter:drop-shadow(0 0 12px rgba(255,45,146,.55)) drop-shadow(0 0 20px rgba(58,155,255,.3));
  flex-shrink:0;
  animation:logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.logo-dot{
  width:7px;height:7px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.16), 0 0 10px rgba(34,197,94,.8);
  animation:liveDot 1.8s ease-in-out infinite;
  margin-left:-5px;
  align-self:flex-end;
  margin-bottom:3px;
}

.nav-stats{
  display:flex;gap:2px;align-items:center;
  margin-right:14px;
  padding:5px 6px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.25);
}
.nav-stat{
  font-size:12px;color:var(--t3);
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:8px;
  background:transparent;border:none;
  transition:background .15s;
  white-space:nowrap;font-weight:500;
  position:relative;
}
.nav-stat + .nav-stat::before{
  content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:rgba(255,255,255,.07);
}
.nav-stat:hover{background:rgba(255,255,255,.04)}
.nav-stat strong{
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;font-size:13px;
}
.nav-stat:nth-child(1) strong{color:#22c55e;text-shadow:0 0 10px rgba(34,197,94,.45)}
.nav-stat:nth-child(2) strong{color:#ff5fb2;text-shadow:0 0 10px rgba(255,45,146,.45)}
.nav-stat:nth-child(3) strong{color:#6fc1ff;text-shadow:0 0 10px rgba(58,155,255,.45)}
@media(max-width:980px){.nav-stats{display:none}}

.nav-tabs{display:flex;gap:2px;align-items:center;margin-right:6px}
.nav-tab{
  position:relative;
  background:transparent;border:none;
  color:var(--t2);
  padding:8px 15px;border-radius:10px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;
  transition:color .18s, background .18s, box-shadow .18s;
  white-space:nowrap;letter-spacing:-.01em;
  overflow:hidden;
}
.nav-tab:hover{color:var(--t1);background:rgba(255,255,255,.04)}
#nav-profile{border-radius:10px!important;width:auto!important;height:auto!important;padding:8px 15px!important;overflow:visible!important}
.nav-tab.active{
  color:#fff;
  background:linear-gradient(180deg, rgba(255,45,146,.22), rgba(168,107,255,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,45,146,.25),
    0 4px 16px rgba(255,45,146,.28);
}
.nav-tab.active::after{
  content:"";position:absolute;left:22%;right:22%;bottom:3px;height:2px;
  background:linear-gradient(90deg,transparent,#ff5fb2,#a86bff,transparent);
  border-radius:2px;
  box-shadow:0 0 8px rgba(255,45,146,.7);
}

.nav-add{
  position:relative;
  background:linear-gradient(135deg,#ff4fa6 0%,#c026a8 55%,#7c3aed 100%);
  border:none;color:#fff;
  padding:9px 18px 9px 15px;border-radius:11px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:700;font-size:13px;
  white-space:nowrap;flex-shrink:0;
  display:inline-flex;align-items:center;gap:7px;
  letter-spacing:-.01em;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 0 20px rgba(255,45,146,.4),
    0 6px 18px rgba(124,58,237,.35);
  transition:transform .12s, box-shadow .2s, filter .2s;
}
.nav-add::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  animation:navShine 3.6s ease-in-out infinite;
}
@keyframes navShine{0%{left:-60%}45%,100%{left:140%}}
.nav-add::before{
  content:"";display:inline-block;width:13px;height:13px;position:relative;z-index:1;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M13 2L4 14h7l-1 8 9-12h-7l1-8z' fill='white'/></svg>") center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.7));
}
.nav-add:hover{
  transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 0 30px rgba(255,45,146,.6),
    0 8px 24px rgba(124,58,237,.5);
}
.nav-add:active{transform:translateY(0) scale(.97)}

.lang-btn{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:10px!important;
  height:34px;width:40px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s, background .15s;
}
.lang-btn:hover{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.16)!important;
}

.mob-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(10,10,15,.97);
  backdrop-filter:blur(24px);
  border-top:1px solid var(--br);
  display:none;
  justify-content:space-around;
  align-items:flex-end;
  padding:8px 4px max(16px,env(safe-area-inset-bottom)) 4px;
  height:64px;
}
@media(max-width:580px){
  .mob-nav{display:flex}
  .nav-tabs{display:none}
  .nav-add-group{display:none!important}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
  nav{padding:0 10px;gap:3px}
}
.mob-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:4px 10px;
  cursor:pointer;flex:1;
  color:var(--t3);
  transition:color .15s;
  -webkit-tap-highlight-color:transparent;
  min-width:0;
}
.mob-tab svg{flex-shrink:0;transition:stroke .15s}
.mob-label{font-size:10px;font-weight:500;line-height:1;white-space:nowrap}
.mob-tab.active{color:var(--acc)}
.mob-tab.active svg{stroke:var(--acc)}

/* Центральная кнопка + */
.mob-add{position:relative;flex:1}
.mob-plus-btn{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,#ff2d55,#e63d6f);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(230,61,111,.5);
  margin-bottom:2px;
  margin-top:-20px;
  transition:transform .15s;
  flex-shrink:0;
}
.mob-add:active .mob-plus-btn{transform:scale(.92)}
.mob-plus-btn svg{stroke:#fff}

.page{display:none;padding-top:66px;min-height:100vh}
.page.active{display:block}

/* ══════════════════════
   HOME
══════════════════════ */
/* Поиск в шапке страницы (под навбаром) */
.home-search-bar{
  padding:12px 20px 8px;max-width:800px;margin:0 auto;
}
.search-wrap{
  display:flex;gap:8px;align-items:center;
  background:var(--bg1);border:1px solid var(--br);border-radius:12px;
  padding:10px 14px;transition:border-color .2s;
}
.search-wrap:focus-within{border-color:var(--acc)}
.search-icon{font-size:16px;flex-shrink:0;color:var(--t3)}
.search-input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-family:'Inter',sans-serif;font-size:14px}
.search-input::placeholder{color:var(--t3)}
.search-clear{background:transparent;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:2px 4px;transition:color .15s;line-height:1}
.search-clear:hover{color:var(--t1)}
.search-result{padding:0 20px 0;max-width:800px;margin:0 auto;display:none}
.search-result.show{display:block}

/* ═══════════════════════════════
   HOME HERO STATS BAND
═══════════════════════════════ */
.home-hero{
  max-width:800px;margin:18px auto 0;padding:0 20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.hh-stat{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(20,14,28,.65), rgba(14,9,22,.78));
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.hh-stat:hover{
  border-color:rgba(255,45,146,.25);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.hh-stat-icon{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.hh-stat-body{min-width:0}
.hh-stat-num{
  font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1;
}
.hh-stat-lbl{
  font-size:11px;color:var(--t2);
  margin-top:4px;
  letter-spacing:.01em;
}

/* ═══════════════════════════════
   HOT RAIL — top battles
═══════════════════════════════ */
.hot-rail{max-width:800px;margin:22px auto 0;padding:0 20px}
.hr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hr-title{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--t1);
}
.hr-fire{
  font-size:18px;
  filter:drop-shadow(0 0 8px rgba(255,140,60,.6));
  animation:hrFire 2s ease-in-out infinite;
}
@keyframes hrFire{0%,100%{transform:scale(1)}50%{transform:scale(1.15) rotate(-3deg)}}
.hr-link{
  font-size:13px;color:#ff5fb2;text-decoration:none;font-weight:500;
  transition:color .15s;
}
.hr-link:hover{color:#ffb3d6}

.hr-scroll{
  display:flex;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:4px 0 10px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hr-scroll::-webkit-scrollbar{display:none}

.hr-card{
  flex-shrink:0;
  width:200px;
  scroll-snap-align:start;
  border-radius:14px;
  overflow:hidden;
  background:rgba(14,9,22,.7);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  transition:border-color .15s, transform .15s, box-shadow .15s;
  position:relative;
}
.hr-card:hover{
  border-color:rgba(255,45,146,.4);
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.4);
}
.hr-photos{
  display:flex;aspect-ratio:1/1;position:relative;
  background:#111118;
}
.hr-photo{width:50%;position:relative;overflow:hidden}
.hr-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;transition:transform .4s}
.hr-card:hover .hr-photo img{transform:scale(1.05)}
.hr-vs{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:26px;border-radius:7px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56' fill='none'><defs><linearGradient id='a' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ff5fb2'/><stop offset='100%25' stop-color='%23c41b6f'/></linearGradient><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%236fc1ff'/><stop offset='100%25' stop-color='%231f6fc6'/></linearGradient></defs><path d='M6 10 L16 10 L24 36 L26 36 L22 24 Z' fill='url(%23a)'/><path d='M40 10 L30 10 L28 24 L24 36 L26 36 L28 30 Z' fill='url(%23a)'/><path d='M52 12 Q45 12 45 18 Q45 24 52 26 Q59 28 59 34 Q59 40 52 40 Q47 40 45 36 L48 33 Q49 36 52 36 Q55 36 55 33 Q55 30 50 28 Q43 26 43 18 Q43 8 52 8 Q57 8 59 12 L56 15 Q54 12 52 12 Z' fill='url(%23b)'/></svg>") center/22px 18px no-repeat,
    linear-gradient(180deg,#1a0f1e,#0a0612);
  border:1.5px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 3px rgba(10,6,18,.7), 0 0 14px rgba(230,61,111,.35);
}
.hr-bar{height:3px;background:rgba(255,255,255,.05);position:relative;overflow:hidden}
.hr-bar-l{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#ff2d92,#ff5fb2);box-shadow:0 0 8px rgba(255,45,146,.55)}
.hr-bar-r{position:absolute;top:0;right:0;height:100%;background:linear-gradient(270deg,#3a9bff,#6fc1ff);box-shadow:0 0 8px rgba(58,155,255,.55)}
.hr-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px 10px;
  font-size:11px;color:var(--t2);
}
.hr-foot .hr-pcts{font-family:'JetBrains Mono','SF Mono',monospace;font-weight:600;color:var(--t1)}
.hr-foot .hr-pcts .hr-l{color:#ff5fb2}
.hr-foot .hr-pcts .hr-r{color:#6fc1ff}
.hr-foot .hr-votes{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.hr-rank{
  position:absolute;top:8px;left:8px;
  width:24px;height:24px;border-radius:7px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  display:grid;place-items:center;
  font-family:'JetBrains Mono','SF Mono',monospace;font-weight:700;font-size:11px;color:#ff5fb2;
  border:1px solid rgba(255,45,146,.35);
  z-index:3;
}
.hr-card:nth-child(1) .hr-rank{color:#ffd86a;border-color:rgba(255,216,106,.45);background:rgba(255,216,106,.12)}

/* ═══════════════════════════════
   FEATURED BATTLE (Битва дня)
═══════════════════════════════ */
.featured-battle{
  max-width:800px;margin:22px auto 0;padding:0 20px;
}
.fb-head{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.fb-crown{font-size:20px;filter:drop-shadow(0 0 8px rgba(255,216,106,.6))}
.fb-title{
  font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--t1);
}
.fb-tag{
  margin-left:auto;
  padding:3px 10px;border-radius:999px;
  background:rgba(255,216,106,.10);border:1px solid rgba(255,216,106,.3);
  color:#ffd86a;font-size:11px;font-weight:600;letter-spacing:.02em;
}
.fb-body{
  position:relative;
  border-radius:18px;overflow:hidden;
  background:#0a0612;
  border:1px solid rgba(255,216,106,.22);
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    0 0 36px rgba(255,216,106,.15),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.fb-photos{display:flex;position:relative;aspect-ratio:16/9}
.fb-photo{width:50%;position:relative;overflow:hidden}
.fb-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.featured-battle:hover .fb-photo img{transform:scale(1.04)}
.fb-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.7), transparent 50%);
  pointer-events:none;
}
.fb-name{
  position:absolute;bottom:10px;left:14px;right:14px;
  z-index:2;
  font-weight:700;font-size:18px;color:#fff;letter-spacing:-.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.fb-photo:last-child .fb-name{text-align:right}

.fb-vs{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:80px;height:60px;border-radius:13px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56' fill='none'><defs><linearGradient id='a' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ff5fb2'/><stop offset='100%25' stop-color='%23c41b6f'/></linearGradient><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%236fc1ff'/><stop offset='100%25' stop-color='%231f6fc6'/></linearGradient></defs><path d='M6 10 L16 10 L24 36 L26 36 L22 24 Z' fill='url(%23a)'/><path d='M40 10 L30 10 L28 24 L24 36 L26 36 L28 30 Z' fill='url(%23a)'/><path d='M52 12 Q45 12 45 18 Q45 24 52 26 Q59 28 59 34 Q59 40 52 40 Q47 40 45 36 L48 33 Q49 36 52 36 Q55 36 55 33 Q55 30 50 28 Q43 26 43 18 Q43 8 52 8 Q57 8 59 12 L56 15 Q54 12 52 12 Z' fill='url(%23b)'/></svg>") center/44px 38px no-repeat,
    linear-gradient(180deg,#1a0f1e,#0a0612);
  border:1.5px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 5px rgba(10,6,18,.7),
    0 0 26px rgba(230,61,111,.45),
    0 0 40px rgba(58,155,255,.25);
  animation:vsBadgePulse 2.4s ease-in-out infinite;
}

.fb-foot{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px 20px;gap:14px;
  background:linear-gradient(180deg, rgba(255,216,106,.04), rgba(255,216,106,.0));
  border-top:1px solid rgba(255,255,255,.05);
}
.fb-pct{font-family:'JetBrains Mono','SF Mono',monospace;font-weight:700;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fb-pct.l{color:#ff5fb2;text-shadow:0 0 12px rgba(255,45,146,.4)}
.fb-pct.r{color:#6fc1ff;text-align:right;text-shadow:0 0 12px rgba(58,155,255,.4)}
.fb-meta{
  text-align:center;font-size:12px;color:var(--t2);
}
.fb-meta-time{
  font-family:'JetBrains Mono','SF Mono',monospace;font-weight:600;color:#ffd86a;
  font-size:14px;letter-spacing:.04em;margin-bottom:4px;
  text-shadow:0 0 8px rgba(255,216,106,.4);
}

/* responsive */
@media(max-width:768px){
  .home-hero{grid-template-columns:repeat(2,1fr);padding:0 12px}
  .hh-stat{padding:10px}
  .hh-stat-num{font-size:16px}
  .hot-rail{padding:0 12px;margin-top:18px}
  .featured-battle{padding:0 12px;margin-top:18px}
  .hr-card{width:170px}
  .fb-name{font-size:15px;bottom:8px;left:10px;right:10px}
  .fb-vs{width:64px;height:48px}
  .fb-pct{font-size:18px}
  .fb-foot{padding:10px 12px;gap:8px}
}
@media(max-width:480px){
  .home-hero{grid-template-columns:repeat(2,1fr)}
  .hr-card{width:150px}
  .fb-photos{aspect-ratio:3/2}
}

/* Живая плашка вместо вкладок «Активные / Завершённые» */
.home-live-bar{
  display:flex;align-items:center;gap:9px;
  /* Ширина контента .hot-rail и .home-type-filter: 800px минус padding 2x20px */
  width:calc(100% - 40px);max-width:760px;
  margin:16px auto 0;padding:10px 16px;
  box-sizing:border-box;
  background:linear-gradient(135deg,rgba(255,79,166,.10),rgba(124,58,237,.08));
  border:1px solid rgba(255,79,166,.22);
  border-radius:14px;
  box-shadow:0 4px 20px rgba(255,45,146,.08);
}
@media(max-width:768px){
  .home-live-bar{width:calc(100% - 24px);margin-top:14px}
}
/* Светлая тема: на белом фоне полупрозрачный градиент почти не виден */
html[data-theme="light"] .home-live-bar{
  background:linear-gradient(135deg,rgba(255,79,166,.10),rgba(124,58,237,.07));
  border-color:rgba(255,79,166,.30);
  box-shadow:0 2px 10px rgba(255,45,146,.10);
}
.hlb-pulse{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:#ff3d71;box-shadow:0 0 0 0 rgba(255,61,113,.6);
  animation:hlbPulse 2s infinite;
}
@keyframes hlbPulse{
  0%{box-shadow:0 0 0 0 rgba(255,61,113,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,61,113,0)}
  100%{box-shadow:0 0 0 0 rgba(255,61,113,0)}
}
.hlb-text{
  flex:1;font-size:13.5px;font-weight:700;color:var(--t1);
  letter-spacing:-.01em;
}
.hlb-count{
  font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#ff4fa6,#7c3aed);
  padding:3px 11px;border-radius:999px;flex-shrink:0;
  min-width:26px;text-align:center;
}
.home-type-filter{display:flex;gap:7px;padding:12px 20px 0;max-width:800px;margin:0 auto}
.htf-tab{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--t2);padding:7px 16px;border-radius:11px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:700;font-size:13px;
  transition:all .18s;white-space:nowrap;
}
.htf-tab:hover{color:var(--t1);background:rgba(255,255,255,.08)}
.htf-tab.active{
  color:#fff;background:linear-gradient(135deg,#ff4fa6,#7c3aed);
  border-color:transparent;box-shadow:0 4px 16px rgba(255,45,146,.3);
}
.home-top{padding:18px 20px 4px;display:flex;align-items:center;justify-content:space-between;max-width:800px;margin:0 auto;gap:10px}
.home-title{font-weight:700;font-size:22px;letter-spacing:-.03em;color:var(--t1)}
.live-badge{
  display:flex;align-items:center;gap:6px;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.22);
  padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:600;color:#22c55e;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:liveDot 1.6s ease-in-out infinite}

/* ══════════════════════════════
   КАРТОЧКИ БАТЛОВ — redesign
══════════════════════════════ */
.battles-list{display:flex;flex-direction:column;gap:14px;padding:18px 20px 0;max-width:800px;margin:0 auto}
.battle-row{
  position:relative;
  background:linear-gradient(180deg, rgba(20,14,28,.7), rgba(14,9,22,.85));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  overflow:hidden;cursor:pointer;
  transition:border-color .2s, transform .2s, box-shadow .2s;
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.battle-row:hover{
  border-color:rgba(230,61,111,.45);
  transform:translateY(-2px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    0 0 0 1px rgba(230,61,111,.12),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.battle-row.finished{opacity:.78}
.battle-row.finished:hover{opacity:1;transform:none}

/* Фото — больше и выразительнее */
.br-photos-row{display:flex;position:relative;aspect-ratio:16/9}
.br-photo{width:50%;position:relative;overflow:hidden;flex-shrink:0}
.br-photo:first-child::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,45,146,.0) 60%, rgba(255,45,146,.18) 100%);
  pointer-events:none;
}
.br-photo:last-child::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(225deg, rgba(58,155,255,.0) 60%, rgba(58,155,255,.18) 100%);
  pointer-events:none;
}
.br-photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 28%;
  display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.battle-row:hover .br-photo img{transform:scale(1.06)}
.br-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 55%);pointer-events:none;z-index:1}

/* ИМЕНА НА ФОТО */
.br-photo-name{
  position:absolute;bottom:10px;left:10px;right:10px;
  z-index:2;
  font-size:17px;font-weight:700;
  color:#fff;letter-spacing:-.01em;
  text-shadow:0 2px 8px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.5);
  text-align:left;
}
.br-photo:last-child .br-photo-name{text-align:right}
.br-verified{width:16px !important;height:16px !important;display:inline-block !important;vertical-align:middle;margin-left:3px;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.br-name-link{cursor:pointer;pointer-events:auto;display:inline-flex;align-items:center}
.br-name-arrow{display:inline-block;opacity:.7;font-weight:700;margin-left:3px;font-size:18px}

/* VS бадж — Versuz mark в списке батлов */
.br-vs{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:42px;border-radius:11px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56' fill='none'><defs><linearGradient id='a' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ff5fb2'/><stop offset='100%25' stop-color='%23c41b6f'/></linearGradient><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%236fc1ff'/><stop offset='100%25' stop-color='%231f6fc6'/></linearGradient></defs><path d='M6 10 L16 10 L24 36 L26 36 L22 24 Z' fill='url(%23a)'/><path d='M40 10 L30 10 L28 24 L24 36 L26 36 L28 30 Z' fill='url(%23a)'/><path d='M52 12 Q45 12 45 18 Q45 24 52 26 Q59 28 59 34 Q59 40 52 40 Q47 40 45 36 L48 33 Q49 36 52 36 Q55 36 55 33 Q55 30 50 28 Q43 26 43 18 Q43 8 52 8 Q57 8 59 12 L56 15 Q54 12 52 12 Z' fill='url(%23b)'/></svg>") center/30px 26px no-repeat,
    linear-gradient(180deg,#1a0f1e,#0a0612);
  border:1.5px solid rgba(255,255,255,.12);
  z-index:5;
  font-size:0;
  color:transparent;
  box-shadow:
    0 0 0 4px rgba(10,6,18,.7),
    0 0 20px rgba(230,61,111,.35),
    0 0 32px rgba(58,155,255,.18),
    0 6px 14px rgba(0,0,0,.6);
  animation:vsBadgePulse 2.4s ease-in-out infinite;
}
.br-vs::before{
  content:"";position:absolute;inset:-1px;border-radius:12px;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,45,146,.55), rgba(168,107,255,.4), rgba(58,155,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
@keyframes vsBadgePulse{
  0%,100%{box-shadow:0 0 0 4px rgba(10,6,18,.7),0 0 20px rgba(230,61,111,.35),0 0 32px rgba(58,155,255,.18),0 6px 14px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 0 4px rgba(10,6,18,.7),0 0 28px rgba(230,61,111,.55),0 0 44px rgba(58,155,255,.3),0 6px 14px rgba(0,0,0,.6)}
}

/* Полоска голосов — ярче */
.br-vote-bar{height:4px;background:rgba(255,255,255,.05);position:relative;overflow:hidden}
.br-vote-left{
  position:absolute;top:0;left:0;height:100%;
  background:linear-gradient(90deg,#ff2d92,#ff5fb2);
  box-shadow:0 0 12px rgba(255,45,146,.55);
  transition:width .7s cubic-bezier(.34,1.56,.64,1);
}
.br-vote-right{
  position:absolute;top:0;right:0;height:100%;
  background:linear-gradient(270deg,#3a9bff,#6fc1ff);
  box-shadow:0 0 12px rgba(58,155,255,.55);
  transition:width .7s cubic-bezier(.34,1.56,.64,1);
}

/* Проценты */
.br-pcts{display:flex;justify-content:space-between;padding:10px 16px 2px;font-variant-numeric:tabular-nums}
.br-pct-left{
  font-size:18px;font-weight:700;
  color:#ff5fb2;
  text-shadow:0 0 12px rgba(255,45,146,.35);
  letter-spacing:-.02em;
}
.br-pct-right{
  font-size:18px;font-weight:700;
  color:#6fc1ff;
  text-shadow:0 0 12px rgba(58,155,255,.35);
  letter-spacing:-.02em;
}

/* Инфо-строка */
.br-info{padding:6px 16px 14px;display:flex;align-items:center;gap:10px}
.br-names{
  font-weight:600;font-size:13px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--t2);
  letter-spacing:-.01em;
}
.br-names .vs-sep{color:var(--t3);font-weight:400;font-size:11px;margin:0 6px;text-transform:uppercase;letter-spacing:.06em}
.br-meta{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.br-votes{
  font-size:12px;color:var(--t2);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
.br-votes::before{
  content:"";display:inline-block;width:11px;height:11px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff5fb2'><path d='M12 21s-7-4.5-9.5-9.2C.8 8.1 2.6 4 6.4 4c2 0 3.5 1.2 4.6 2.8C12.1 5.2 13.6 4 15.6 4c3.8 0 5.6 4.1 3.9 7.8C19 16.5 12 21 12 21z'/></svg>") center/contain no-repeat;
}
.br-votes strong{color:var(--t1);font-weight:600;font-variant-numeric:tabular-nums}
.br-time{
  font-size:11px;color:var(--t2);white-space:nowrap;font-weight:500;
  display:inline-flex;align-items:center;gap:4px;
  font-variant-numeric:tabular-nums;
}
.br-num{
  font-size:11px;font-weight:600;color:var(--t2);
  background:rgba(255,255,255,.04);padding:4px 10px;border-radius:7px;
  flex-shrink:0;cursor:pointer;border:1px solid rgba(255,255,255,.06);
  transition:all .15s;user-select:none;
  font-family:'JetBrains Mono','SF Mono',monospace;letter-spacing:.02em;
}
.br-num:hover{background:rgba(230,61,111,.12);color:#ff5fb2;border-color:rgba(230,61,111,.4)}
.br-num.copied{background:rgba(34,197,94,.15);color:#22c55e;border-color:rgba(34,197,94,.4)}
.finished-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.28);
  padding:3px 10px;border-radius:999px;
  font-size:10px;font-weight:600;color:#22c55e;flex-shrink:0;
  letter-spacing:.02em;
}

/* Пагинация */
.pagination{display:flex;align-items:center;justify-content:center;gap:5px;padding:24px 20px 32px;max-width:800px;margin:0 auto;flex-wrap:wrap}
.pg-btn{
  background:transparent;border:1px solid rgba(255,255,255,.08);
  color:var(--t2);padding:8px 13px;border-radius:8px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:500;font-size:13px;
  transition:all .15s;white-space:nowrap;
}
.pg-btn:hover:not(:disabled){border-color:var(--acc);color:var(--t1);background:rgba(230,61,111,.08)}
.pg-btn:disabled{opacity:.3;cursor:not-allowed}
.pg-btn.active{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 4px 12px rgba(230,61,111,.35)}
.pg-dots{color:var(--t3);font-size:13px;padding:0 2px}
.pg-info{font-size:12px;color:var(--t2);margin-left:5px;white-space:nowrap}

/* ══════════════════════
   БАТЛ (голосование)
══════════════════════ */
.battle-inner{max-width:700px;margin:0 auto;padding:20px 14px 28px}
.battle-label{text-align:center;margin-bottom:18px}
.battle-label h2{font-weight:800;font-size:20px;letter-spacing:-.3px;margin-bottom:3px}
.battle-label p{font-size:13px;color:var(--t2);font-weight:400}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;position:relative}
/* Старые правила .duel-card / .duel-img удалены — используются новые v0 стили ниже */
.duel-card.voted{cursor:default}
.duel-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 50%);pointer-events:none}
.duel-hover{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(230,61,111,.35) 0%,transparent 60%);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s;pointer-events:none;
}
.duel-card:hover:not(.voted) .duel-hover{opacity:1}
.duel-hover-icon{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:voteIconPop .22s cubic-bezier(.34,1.56,.64,1);
}
.duel-hover-heart{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#ff2d55,#ff6b8a);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  box-shadow:0 4px 24px rgba(255,45,85,.5),0 0 0 8px rgba(255,45,85,.15);
}
.duel-hover-label{
  font-size:13px;font-weight:700;color:#fff;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
  padding:4px 14px;border-radius:20px;letter-spacing:.3px;
}
@keyframes voteIconPop{
  from{transform:scale(.6) translateY(8px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
/* ═══════════════════════════════════════════════════════════
   ⚡ BATTLE — Premium standalone-style integration
   ═══════════════════════════════════════════════════════════ */

#page-battle{
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* Звёздный фон теперь на body — этот блок не нужен */
#page-battle::before{display:none}

#page-battle .battle-inner{
  max-width:1400px;
  margin:0 auto;
  padding:14px 16px 20px;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#page-battle .battle-inner > *{width:100%}
#page-battle .battle-inner > .finished-banner{max-width:600px}

/* ═══ Header ═══ */
.battle-type-filter{
  display:flex;align-items:center;justify-content:center;gap:8px;
  max-width:760px;margin:0 auto;padding:16px 16px 0;
}
.btf-tab{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--t2);padding:8px 18px;border-radius:12px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:700;font-size:13.5px;
  transition:all .18s;white-space:nowrap;
}
.btf-tab:hover{color:var(--t1);background:rgba(255,255,255,.08)}
.btf-tab.active{
  color:#fff;background:linear-gradient(135deg,#ff4fa6,#7c3aed);
  border-color:transparent;box-shadow:0 4px 16px rgba(255,45,146,.3);
}
.battle-top-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:8px 0 12px;gap:16px;
  position:relative;
}
.battle-top-bar > .battle-top-actions{justify-self:end}
.battle-brand{display:none}

.battle-mega-timer{
  text-align:center;
  justify-self:center;
  /* panel */
  padding:6px 14px 6px;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(28,16,40,.78), rgba(10,6,18,.86));
  border:1px solid rgba(255,95,178,.30);
  box-shadow:
    0 0 14px rgba(255,45,146,.14),
    0 0 28px rgba(58,155,255,.08),
    0 8px 18px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 8px rgba(0,0,0,.4);
  position:relative;
}
/* glass highlight along the top edge */
.battle-mega-timer::before{
  content:"";position:absolute;
  inset:1px 1px auto 1px;height:46%;
  border-radius:14px 14px 50% 50% / 14px 14px 100% 100%;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  pointer-events:none;
}
/* gradient hairline rim */
.battle-mega-timer::after{
  content:"";position:absolute;inset:-1px;border-radius:15px;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,45,146,.55), rgba(168,107,255,.4), rgba(58,155,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  opacity:.6;
}
/* Заголовок завершённого батла вместо таймера */
.bmt-finished-title{
  font-size:20px;font-weight:900;
  background:linear-gradient(135deg,#fff 0%,#ff6bb3 50%,#60a5fa 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.3px;line-height:1.2;
}
.bmt-finished-sub{
  font-size:11px;font-weight:600;
  color:rgba(255,255,255,.5);
  letter-spacing:.12em;text-transform:uppercase;margin-top:4px;
}
/* Результат (Ничья / Победитель) в блоке таймера */
.finished-winner{
  margin-top:8px;
  font-size:13px;font-weight:800;
  color:#fff;
  padding:6px 14px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  display:inline-block;
  letter-spacing:-.1px;
}
.bmt-label{
  position:relative;z-index:1;
  font-size:8px;color:rgba(255,200,222,.65);
  font-weight:600;margin-bottom:3px;
  letter-spacing:.24em;text-transform:uppercase;
}
.bmt-time{
  position:relative;z-index:1;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.05em;
  background:linear-gradient(180deg, #ffd9eb 0%, #ff5fb2 32%, #a86bff 65%, #6fc1ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(255,45,146,.45)) drop-shadow(0 0 16px rgba(58,155,255,.3));
  animation:timerGlow 3s ease-in-out infinite;
}
@keyframes timerGlow{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,45,146,.45)) drop-shadow(0 0 16px rgba(58,155,255,.3))}
  50%{filter:drop-shadow(0 0 14px rgba(255,45,146,.75)) drop-shadow(0 0 24px rgba(58,155,255,.5))}
}
.bmt-units{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;
  font-size:7.5px;color:rgba(255,255,255,.42);
  font-weight:600;margin-top:4px;
  letter-spacing:.18em;text-transform:uppercase;
}

.battle-top-actions{display:flex;gap:10px;flex-shrink:0}

/* Fixed share/report — правый нижний угол */
.battle-fixed-actions{
  position:fixed;
  right:20px;
  bottom:28px;
  display:none;
  flex-direction:column;
  gap:10px;
  z-index:200;
  align-items:flex-end;
}
.battle-fixed-actions.visible{display:flex}

/* Share с текстом */
.battle-share-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
/* В завершённых батлах кнопку «Поделиться» не показываем (жалоба остаётся) */
.battle-fixed-actions.is-finished .battle-share-wrap{display:none!important}
.battle-share-label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.85);
  text-align:right;
  line-height:1.3;
  letter-spacing:.02em;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  background:rgba(15,10,25,.7);
  backdrop-filter:blur(10px);
  padding:7px 11px;
  border-radius:12px;
  border:1px solid rgba(59,130,246,.3);
  max-width:120px;
  animation:shareLabelPulse 2.5s ease-in-out infinite;
}
@keyframes shareLabelPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.3)}
  50%{box-shadow:0 0 16px 2px rgba(59,130,246,.4)}
}

/* Мобилка/планшет — позиционируем выше таббара */
@media(max-width:768px){
  .battle-fixed-actions{
    right:14px;
    bottom:80px; /* выше таббара */
  }
}
.battle-action-btn{
  position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  transition:all .3s cubic-bezier(.34,1.2,.64,1);
  box-shadow:0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
  overflow:hidden;
}
.battle-action-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .8s;pointer-events:none;
}
.battle-action-btn:hover::before{transform:translateX(100%)}

/* КРУГЛЫЕ кнопки только с иконками */
.battle-action-circle{
  width:42px;
  height:42px;
  border-radius:50%;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.battle-action-circle svg{
  width:18px;
  height:18px;
  transition:transform .3s;
}
.battle-action-circle:hover svg{transform:scale(1.15)}

/* Share — синяя */
.battle-action-share{
  background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(37,99,235,.15));
  border-color:rgba(59,130,246,.4);
  box-shadow:0 4px 16px rgba(59,130,246,.3), inset 0 1px 0 rgba(255,255,255,.12);
  color:#93c5fd;
}
.battle-action-share:hover{
  background:linear-gradient(135deg, rgba(59,130,246,.45), rgba(37,99,235,.3));
  border-color:rgba(59,130,246,.7);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(59,130,246,.6), inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff;
}

/* Report — розовая */
.battle-action-report{
  background:linear-gradient(135deg, rgba(236,72,153,.25), rgba(190,24,93,.15));
  border-color:rgba(236,72,153,.4);
  box-shadow:0 4px 16px rgba(236,72,153,.3), inset 0 1px 0 rgba(255,255,255,.12);
  color:#fbcfe8;
}
.battle-action-report:hover{
  background:linear-gradient(135deg, rgba(236,72,153,.45), rgba(190,24,93,.3));
  border-color:rgba(236,72,153,.7);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(236,72,153,.6), inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff;
}
.battle-action-btn:active{transform:translateY(0)!important;transition:transform .1s}
.battle-action-icon-btn{width:38px;height:38px;padding:0;justify-content:center;font-size:18px}

/* ═══ DUEL ═══ */
.duel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  position:relative;
  margin-bottom:14px;
  padding:14px 0;
  align-items:center;
  justify-items:stretch;
  perspective:1500px;
  flex:1;
  min-width:0;
}
.duel-vs-col{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:8;
  pointer-events:none;
}

/* Контейнер со стрелками */
.duel-arrows-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  max-width:1116px;
  margin-left:auto;
  margin-right:auto;
}
.duel-arrows-wrap > .duel{flex:1 1 auto;min-width:0}

.duel-arrow{
  position:relative;
  flex-shrink:0;
  width:44px;
  height:76px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(30,18,46,.65), rgba(14,8,22,.75));
  border:1.5px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  color:rgba(255,255,255,.78);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, background .25s, box-shadow .25s, color .2s;
  z-index:10;
  pointer-events:all;
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -10px 16px rgba(0,0,0,.3);
  overflow:hidden;
}
/* faint inner glow accent — colored per side */
.duel-arrow::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 50%, rgba(236,72,153,.22), transparent 60%);
  opacity:0;transition:opacity .3s;
  pointer-events:none;
}
.duel-arrow.duel-arrow-next::before{
  background:radial-gradient(circle at 50% 50%, rgba(59,130,246,.22), transparent 60%);
}
/* edge gradient stripe — sits along the inner side */
.duel-arrow::after{
  content:"";position:absolute;top:14%;bottom:14%;width:2px;
  border-radius:2px;
  background:linear-gradient(180deg, transparent, rgba(236,72,153,.85), transparent);
  filter:blur(.4px);
  box-shadow:0 0 8px rgba(236,72,153,.7);
  opacity:.55;transition:opacity .25s;
}
.duel-arrow.duel-arrow-prev::after{right:8px}
.duel-arrow.duel-arrow-next::after{
  left:8px;
  background:linear-gradient(180deg, transparent, rgba(59,130,246,.85), transparent);
  box-shadow:0 0 8px rgba(59,130,246,.7);
}

.duel-arrow svg{
  width:22px;height:22px;
  position:relative;z-index:2;
  filter:drop-shadow(0 0 0 transparent);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), filter .25s, color .2s;
}

/* Светлая тема: стрелки перелистывания — светлые (были тёмными на белом) */
html[data-theme="light"] .duel-arrow{
  background:linear-gradient(180deg,#ffffff,#f2f4f8);
  border-color:#e2e6ef;
  color:#8b5cf6;
  box-shadow:0 6px 16px rgba(20,30,60,.12),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .duel-arrow.duel-arrow-prev:hover{
  background:linear-gradient(180deg,#fff,#fdeef4);
  border-color:rgba(236,72,153,.55);
  color:#e63d6f;
  box-shadow:0 8px 20px rgba(236,72,153,.25),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .duel-arrow.duel-arrow-next:hover{
  background:linear-gradient(180deg,#fff,#f0f0fd);
  border-color:rgba(139,92,246,.55);
  color:#8b5cf6;
  box-shadow:0 8px 20px rgba(139,92,246,.25),inset 0 1px 0 rgba(255,255,255,.9);
}

/* PREV — pink */
.duel-arrow.duel-arrow-prev:hover{
  background:linear-gradient(180deg, rgba(236,72,153,.22), rgba(190,24,93,.18));
  border-color:rgba(236,72,153,.55);
  color:#fff;
  transform:translateX(-2px);
  box-shadow:
    0 0 28px rgba(236,72,153,.45),
    0 14px 28px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 16px rgba(0,0,0,.3);
}
.duel-arrow.duel-arrow-prev:hover::before{opacity:1}
.duel-arrow.duel-arrow-prev:hover::after{opacity:1}
.duel-arrow.duel-arrow-prev:hover svg{
  transform:translateX(-3px);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.55));
}

/* NEXT — blue */
.duel-arrow.duel-arrow-next:hover{
  background:linear-gradient(180deg, rgba(59,130,246,.22), rgba(37,99,235,.18));
  border-color:rgba(59,130,246,.55);
  color:#fff;
  transform:translateX(2px);
  box-shadow:
    0 0 28px rgba(59,130,246,.45),
    0 14px 28px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 16px rgba(0,0,0,.3);
}
.duel-arrow.duel-arrow-next:hover::before{opacity:1}
.duel-arrow.duel-arrow-next:hover::after{opacity:1}
.duel-arrow.duel-arrow-next:hover svg{
  transform:translateX(3px);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.55));
}

.duel-arrow:active{transform:scale(.96)}

/* VS column wrapper (VS + percentages) */
.duel-vs-col{
  display:flex;flex-direction:column;align-items:center;
  align-self:stretch;justify-content:center;gap:14px;
}

/* Mini countdown that lives between the photos */
.vs-mini-timer{
  display:inline-flex;flex-direction:column;align-items:center;
  padding:8px 14px 10px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(28,16,40,.82), rgba(10,6,18,.9));
  border:1px solid rgba(255,95,178,.32);
  box-shadow:
    0 0 18px rgba(255,45,146,.2),
    0 0 32px rgba(58,155,255,.12),
    0 10px 24px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07);
  white-space:nowrap;
  z-index:9;
  position:relative;
}
.vs-mini-timer::before{
  content:"";position:absolute;inset:-1px;border-radius:13px;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,45,146,.6), rgba(168,107,255,.5), rgba(58,155,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;opacity:.75;
}
.vs-mini-label{
  font-size:8px;color:rgba(255,200,222,.7);
  font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:4px;
}
.vs-mini-time{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.04em;
  background:linear-gradient(180deg, #ffd9eb 0%, #ff5fb2 35%, #a86bff 65%, #6fc1ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(255,45,146,.5));
  animation:timerGlow 3s ease-in-out infinite;
}
/* hide on mobile where the VS column is hidden */
@media(max-width:768px){
  .vs-mini-timer{display:none}
}

/* VS — Versuz mark style (V pink + S blue) */
.duel-vs-text{
  position:relative;
  z-index:8;
  pointer-events:none;
  flex-shrink:0;
  width:140px;
  height:120px;
  display:flex;align-items:center;justify-content:center;
  margin:0;
  font-size:0;
  color:transparent;
  /* the logotype mark scaled large */
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56' fill='none'><defs><linearGradient id='a' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ff5fb2'/><stop offset='100%25' stop-color='%23c41b6f'/></linearGradient><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%236fc1ff'/><stop offset='100%25' stop-color='%231f6fc6'/></linearGradient></defs><path d='M6 10 L16 10 L24 36 L26 36 L22 24 Z' fill='url(%23a)'/><path d='M40 10 L30 10 L28 24 L24 36 L26 36 L28 30 Z' fill='url(%23a)'/><path d='M52 12 Q45 12 45 18 Q45 24 52 26 Q59 28 59 34 Q59 40 52 40 Q47 40 45 36 L48 33 Q49 36 52 36 Q55 36 55 33 Q55 30 50 28 Q43 26 43 18 Q43 8 52 8 Q57 8 59 12 L56 15 Q54 12 52 12 Z' fill='url(%23b)'/></svg>") center/contain no-repeat;
  filter:
    drop-shadow(0 0 18px rgba(236,72,153,.55))
    drop-shadow(0 0 32px rgba(59,130,246,.4));
  animation:vsPulse 2.4s ease-in-out infinite;
}
.duel-vs-text::before{
  /* subtle vertical glow seam behind the mark */
  content:'';
  position:absolute;
  top:-10%;bottom:-10%;left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(236,72,153,.55) 25%,
    rgba(255,255,255,.85) 50%,
    rgba(59,130,246,.55) 75%,
    transparent 100%);
  filter:blur(.5px);
  z-index:-1;
  opacity:.6;
}
@keyframes vsPulse{
  0%,100%{filter:drop-shadow(0 0 18px rgba(236,72,153,.55)) drop-shadow(0 0 32px rgba(59,130,246,.4))}
  50%{filter:drop-shadow(0 0 26px rgba(236,72,153,.85)) drop-shadow(0 0 44px rgba(59,130,246,.6))}
}
@keyframes boltFlicker{
  0%,100%{opacity:.85;filter:blur(1px) drop-shadow(0 0 16px rgba(236,72,153,.7)) drop-shadow(0 0 32px rgba(59,130,246,.5))}
  25%{opacity:1;filter:blur(2px) drop-shadow(0 0 32px rgba(236,72,153,1)) drop-shadow(0 0 64px rgba(59,130,246,.8))}
  50%{opacity:.7}
  75%{opacity:1;filter:blur(2px) drop-shadow(0 0 36px rgba(236,72,153,1)) drop-shadow(0 0 72px rgba(168,85,247,.8))}
}
@keyframes vsPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

/* ═══ Battle Cards ═══ */
.duel-card{
  position:relative;
  width:100%;max-width:400px;
  margin:0 auto;
  cursor:pointer;
  z-index:3;
  display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.34,1.2,.64,1), opacity .5s;
  transform-style:preserve-3d;
}
/* Прижимаем карточки друг к другу — левая к правому краю, правая к левому, с зазором 1см */
.duel-card:nth-child(1){margin-right:57px;margin-left:auto}
.duel-card:nth-child(3){margin-left:57px;margin-right:auto}

/* НАКЛОН применяется ВСЕЙ КАРТОЧКЕ (фото + кнопка) */
.duel-card:nth-child(1){
  transform:rotateY(8deg);
  transform-origin:right center;
}
.duel-card:nth-child(3){
  transform:rotateY(-8deg);
  transform-origin:left center;
}

.duel-card-frame{
  position:relative;
  border-radius:24px;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1.5px solid;
  transition:box-shadow .5s, transform .5s cubic-bezier(.34,1.2,.64,1);
}
/* Red flash when clicking own photo */
@keyframes ownPhotoFlash{
  0%{box-shadow:0 0 0 3px #ef4444,0 0 30px rgba(239,68,68,.8)}
  50%{box-shadow:0 0 0 6px #ef4444,0 0 50px rgba(239,68,68,.9)}
  100%{box-shadow:0 0 0 3px #ef4444,0 0 30px rgba(239,68,68,.8)}
}
.duel-card-frame.own-flash{
  animation:ownPhotoFlash .3s ease 3;
  border-color:#ef4444!important;
}

/* Pink (left) */
.duel-card:nth-child(1) .duel-card-frame{
  border-color:#ec4899;
  box-shadow:
    0 0 0 1px rgba(236,72,153,.4),
    0 0 30px rgba(236,72,153,.7),
    0 0 60px rgba(236,72,153,.4),
    0 0 100px rgba(236,72,153,.2),
    -10px 12px 36px rgba(0,0,0,.6);
}
.duel-card:nth-child(1):hover:not(.voted){
  transform:rotateY(8deg) translateY(-10px) scale(1.02);
}
.duel-card:nth-child(1):hover:not(.voted) .duel-card-frame{
  box-shadow:
    0 0 0 1px rgba(236,72,153,.7),
    0 0 50px rgba(236,72,153,1),
    0 0 100px rgba(236,72,153,.6),
    0 0 160px rgba(236,72,153,.3),
    -14px 18px 48px rgba(0,0,0,.7);
}

/* Blue (right) */
.duel-card:nth-child(3) .duel-card-frame{
  border-color:#3b82f6;
  box-shadow:
    0 0 0 1px rgba(59,130,246,.4),
    0 0 30px rgba(59,130,246,.7),
    0 0 60px rgba(59,130,246,.4),
    0 0 100px rgba(59,130,246,.2),
    10px 12px 36px rgba(0,0,0,.6);
}
.duel-card:nth-child(3):hover:not(.voted){
  transform:rotateY(-8deg) translateY(-10px) scale(1.02);
}
.duel-card:nth-child(3):hover:not(.voted) .duel-card-frame{
  box-shadow:
    0 0 0 1px rgba(59,130,246,.7),
    0 0 50px rgba(59,130,246,1),
    0 0 100px rgba(59,130,246,.6),
    0 0 160px rgba(59,130,246,.3),
    14px 18px 48px rgba(0,0,0,.7);
}

/* Winner / Loser — same size, no scaling */
.duel-card.winner{z-index:5}
.duel-card.loser{opacity:.7}

/* Photo wrap */
.duel-img-wrap{
  position:relative;
  width:100%;height:100%;
  background:#0a0612;
}
/* Heart cursor on hover — pink for left, blue for right */
/* Обычный курсор-палец на фото (сердечко убрано) */
.duel-card:not(.voted) .duel-img-wrap{
  cursor:pointer;
}
/* На кнопках и имени — обычный курсор-палец */
.duel-x2-btn, .duel-x2-btn *,
.duel-gift-btn, .duel-gift-btn *,
.duel-info .duel-name, .duel-info .duel-name *{
  cursor:pointer !important;
}
/* Ряд кнопок x2 + подарок ПОД фото — ВНЕ 3D наклона карточки */
.duel-action-row{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:12px;
  padding:0 8px;
  position:relative;
  z-index:100;
  transform-style:flat;
  transform:translateZ(0.01px);
}
.duel-action-row .duel-x2-btn,
.duel-action-row .duel-gift-btn{
  position:relative !important;
  bottom:auto !important;
  right:auto !important;
  z-index:100;
  cursor:pointer !important;
}
.duel-action-row .duel-x2-btn *,
.duel-action-row .duel-gift-btn *{
  pointer-events:none;
}

/* JS-сердечко-курсор (следует за мышкой, не мигает) */
.heart-cursor{
  position:fixed;
  width:38px;height:38px;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  margin-left:-19px;
  margin-top:-16px;
  transition:opacity .12s ease;
  will-change:left,top;
}
.heart-cursor.show{
  opacity:1;
}
.heart-cursor svg{
  width:100%;height:100%;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.duel-img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 25%;
  display:block;
  transition:transform 1.2s cubic-bezier(.34,1.2,.64,1);
  pointer-events:none;
}
.duel-card:hover:not(.voted) .duel-img{transform:scale(1.06)}

.duel-grad{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.55) 25%,transparent 55%);
  pointer-events:none;z-index:1;
}

/* Reflection sweep */
.duel-img-wrap::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-100%);
  transition:transform 1.4s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:4;
}
.duel-card:hover:not(.voted) .duel-img-wrap::after{transform:translateX(100%)}

/* Badges */
.duel-top-badges{
  position:absolute;top:16px;left:16px;right:16px;
  display:flex;justify-content:space-between;align-items:flex-start;
  z-index:6;pointer-events:none;
}
.duel-verified-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  font-size:13px;font-weight:600;
  padding:6px 12px 6px 6px;border-radius:999px;
}
.duel-verified-icon{
  width:20px;height:20px;
  flex-shrink:0;
  background-image:url('/images/verified.svg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.duel-verified-icon svg{display:none}
.duel-verified-badge img{display:none}

.duel-votes-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  font-size:13px;font-weight:700;
  padding:6px 12px;border-radius:999px;
}
.duel-votes-badge::before{
  content:'❤';color:#ec4899;font-size:14px;
}

/* Контейнер счётчиков на фото (сердечки + подарки) */
.duel-counters{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}
.duel-gifts-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(245,158,11,.18);
  backdrop-filter:blur(12px);
  border:1px solid rgba(245,158,11,.4);
  color:#fbbf24;
  font-size:13px;font-weight:800;
  padding:6px 12px;border-radius:999px;
  box-shadow:0 0 12px rgba(245,158,11,.25);
}
.duel-gifts-badge::before{
  content:'🎁';font-size:14px;
}

/* Иконка верификации возле имени */
.duel-name-verified{
  width:18px !important;
  height:18px !important;
  display:inline-block !important;
  vertical-align:middle;
  margin-left:4px;
  flex-shrink:0;
  filter:drop-shadow(0 1px 4px rgba(59,130,246,.6));
}

.duel-hover,.duel-win-badge,.duel-card.winner .duel-win-badge{display:none!important}

/* Info bottom */
.duel-info{
  position:absolute;bottom:0;left:0;right:80px;
  padding:16px 18px 18px;z-index:5;
  pointer-events:none;
}
.duel-info .duel-name{pointer-events:auto;cursor:pointer;position:relative;z-index:60}
.duel-info .duel-age{pointer-events:none}
.duel-name{
  font-weight:800;font-size:28px;letter-spacing:-.4px;
  color:#fff;
  display:flex;align-items:center;gap:8px;
  line-height:1.1;margin-bottom:8px;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.duel-name-check{
  width:22px;height:22px;border-radius:50%;
  background:#3b82f6;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.duel-name-check svg{width:14px;height:14px;color:#fff}
.duel-name img{display:none}
.duel-age{
  font-size:14px;color:rgba(255,255,255,.88);
  line-height:1.45;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.duel-elo,.duel-time,.duel-vote-bar,.duel-foot{display:none}
.upload-area{display:none!important}

/* ═══ Vote buttons под карточками ═══ */
.duel-vote-cta{
  display:none!important;
}
.duel-card.winner .duel-vote-cta,
.duel-card.loser .duel-vote-cta{
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .4s, transform .4s;
}
.vote-cta-btn{
  position:relative;
  width:100%;
  padding:12px 14px;
  border:2px solid;
  border-radius:14px;
  font-family:inherit;
  font-weight:700;font-size:13px;
  cursor:pointer;color:#fff;
  overflow:hidden;
  transition:transform .3s, box-shadow .3s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  letter-spacing:-.2px;
}
.vote-cta-btn.vote-left{
  background:linear-gradient(135deg, rgba(236,72,153,.95), rgba(190,24,93,.9));
  border-color:rgba(236,72,153,.7);
  box-shadow:
    0 0 28px rgba(236,72,153,.55),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 10px rgba(0,0,0,.25);
}
.vote-cta-btn.vote-right{
  background:linear-gradient(135deg, rgba(59,130,246,.95), rgba(37,99,235,.9));
  border-color:rgba(59,130,246,.7);
  box-shadow:
    0 0 28px rgba(59,130,246,.55),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 10px rgba(0,0,0,.25);
}
.vote-cta-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .8s;pointer-events:none;
}
.vote-cta-btn:hover::after{transform:translateX(100%)}
.vote-cta-btn.vote-left:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 44px rgba(236,72,153,.85),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 10px rgba(0,0,0,.25);
}
.vote-cta-btn.vote-right:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 44px rgba(59,130,246,.85),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 10px rgba(0,0,0,.25);
}
.vote-cta-btn:active{transform:scale(.97)!important}
.vote-cta-btn-icon{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:18px;
}
.vote-cta-btn-icon::before{display:none}
.vote-cta-btn-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}



/* Старый CSS центральных процентов оставляем для совместимости */
.duel-vs-pcts{
  background:rgba(15,15,30,.75);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(14px);
  border-radius:14px;
  padding:8px 18px;
  text-align:center;
  min-width:140px;
  box-shadow:0 0 24px rgba(0,0,0,.4);
  display:none; /* СКРЫТ — теперь прогресс-бары */
}

.duel-vs-pcts-bottom{display:none!important}
.duel-vs-pcts .vp-pcts{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:18px;font-weight:800;margin-bottom:2px;
}
.duel-vs-pcts .vp-pct-left{color:#ec4899;text-shadow:0 0 14px rgba(236,72,153,.5)}
.duel-vs-pcts .vp-pct-right{color:#3b82f6;text-shadow:0 0 14px rgba(59,130,246,.5)}
.duel-vs-pcts .vp-bolt{
  font-size:18px;
  filter:drop-shadow(0 0 8px rgba(236,72,153,.7));
  animation:zapPulse 1.2s ease-in-out infinite;
}
.duel-vs-pcts .vp-bolt::before{content:'⚡';color:#ec4899}
@keyframes zapPulse{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.15) rotate(-5deg)}
}
.duel-vs-pcts .vp-total{
  font-size:11px;color:rgba(255,255,255,.5);
  font-weight:500;letter-spacing:.04em;
}
.duel-vs-pcts .vp-total span{color:#fff;font-weight:700}

/* Share prompt */
.share-prompt{
  margin:16px auto 0;
  max-width:680px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:10px 18px;
  font-size:12px;color:rgba(255,255,255,.7);
  flex-wrap:wrap;
}
.share-prompt-btn{
  background:rgba(59,130,246,.18);
  border:1px solid rgba(59,130,246,.3);
  color:#60a5fa;
  padding:7px 16px;border-radius:10px;
  font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:all .2s;
}
.share-prompt-btn:hover{
  background:rgba(59,130,246,.3);
  transform:translateY(-1px);
}

/* Hide old elements */
.vote-panel,.battle-countdown,.battle-label,.hint,.vote-row,.vote-percentages,.vote-percentages-centered,.duel-result{display:none!important}

/* ═══ BATTLE COMMENTS ═══ */
.battle-comments{
  max-width:900px;margin:36px auto 24px;padding:24px 26px 26px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(14,9,22,.65);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.bc-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;gap:12px;
}
.bc-title{
  display:inline-flex;align-items:center;gap:10px;
  font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--t1);
}
.bc-title svg{color:#ff5fb2}
.bc-count{
  padding:2px 9px;border-radius:999px;
  background:rgba(255,45,146,.14);border:1px solid rgba(255,45,146,.32);
  color:#ff5fb2;font-size:11px;font-weight:600;
  font-family:'JetBrains Mono','SF Mono',monospace;
}
.bc-sort{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;color:var(--t2);font-size:12px;cursor:pointer;
  font-family:inherit;padding:4px 6px;border-radius:6px;
}
.bc-sort:hover{color:var(--t1);background:rgba(255,255,255,.04)}

.bc-compose{
  display:grid;grid-template-columns:36px 1fr auto auto;gap:10px;align-items:center;
  padding:8px 8px 8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(20,14,30,.55);
  margin-bottom:18px;
  position:relative;
}
.bc-emoji-btn{
  width:34px;height:34px;border-radius:9px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:var(--t2);cursor:pointer;
  display:grid;place-items:center;
  transition:color .15s, background .15s, border-color .15s, transform .12s;
}
.bc-emoji-btn:hover{color:#ffd86a;background:rgba(255,216,106,.08);border-color:rgba(255,216,106,.3)}
.bc-emoji-btn:active{transform:scale(.94)}

/* picker pop-up */
.bc-emoji-picker{
  position:absolute;
  right:0;bottom:calc(100% + 8px);
  z-index:20;
  width:300px;
  padding:10px;
  border-radius:14px;
  background:rgba(20,12,28,.96);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  animation:bcepIn .14s ease-out;
}
@keyframes bcepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bc-emoji-picker[hidden]{display:none}

.bcep-tabs{
  display:flex;gap:4px;
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.bcep-tab{
  flex:1;height:30px;border-radius:7px;
  border:none;background:transparent;
  font-size:16px;cursor:pointer;
  transition:background .15s, transform .12s;
}
.bcep-tab:hover{background:rgba(255,255,255,.05)}
.bcep-tab.active{background:rgba(230,61,111,.18)}
.bcep-tab:active{transform:scale(.95)}

.bcep-grid{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:2px;
  max-height:200px;
  overflow-y:auto;
}
.bcep-cell{
  width:100%;aspect-ratio:1;
  border-radius:7px;border:none;background:transparent;
  display:grid;place-items:center;
  font-size:18px;cursor:pointer;
  transition:background .12s, transform .12s;
}
.bcep-cell:hover{background:rgba(255,255,255,.06)}
.bcep-cell:active{transform:scale(.85)}

@media(max-width:540px){
  .bc-emoji-picker{width:calc(100vw - 40px);right:auto;left:0}
}
.bc-input{
  background:none;border:none;outline:none;color:var(--t1);
  font-family:inherit;font-size:14px;width:100%;padding:6px 4px;
}
.bc-input::placeholder{color:var(--t2)}
.bc-send{
  height:34px;padding:0 14px;border-radius:9px;border:none;
  background:linear-gradient(180deg,#ff4fa6,#cf1f72);color:#fff;
  font-weight:600;font-size:12px;cursor:pointer;
  box-shadow:0 0 14px rgba(255,45,146,.35);
  transition:filter .15s,transform .15s;
}
.bc-send:hover{filter:brightness(1.08)}
.bc-send:active{transform:scale(.97)}

.bc-list{display:flex;flex-direction:column;gap:18px}
.bc-item{display:grid;grid-template-columns:38px 1fr auto;gap:12px}
.bc-avatar{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;color:#fff;
  border:1.5px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg,#5b3aa0,#2d1f4a);
  flex-shrink:0;
}
.bc-avatar.pk{background:linear-gradient(135deg,#ff5fb2,#c41b6f);border-color:rgba(255,45,146,.5);box-shadow:0 0 10px rgba(255,45,146,.35)}
.bc-avatar.bl{background:linear-gradient(135deg,#6fc1ff,#1f6fc6);border-color:rgba(58,155,255,.5);box-shadow:0 0 10px rgba(58,155,255,.35)}
.bc-avatar.gd{background:linear-gradient(135deg,#ffd86a,#e07b00);border-color:rgba(255,200,80,.4)}
.bc-me{background:linear-gradient(135deg,#a86bff,#5b3aa0);border-color:rgba(168,107,255,.5);font-size:11px}

/* Аватар-фото в комментарии */
.bc-avatar-img{object-fit:cover;padding:0}
/* Галочка верификации в комментарии */
.bc-verified{width:14px;height:14px;vertical-align:middle;margin-left:-4px}
/* @упоминание в тексте ответа */
.bc-mention{color:#a86bff;font-weight:700}
/* Ответ — отступ слева + линия */
.bc-item.bc-reply{
  margin-left:34px;
  padding-left:14px;
  border-left:2px solid rgba(168,107,255,.3);
}

.bc-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.bc-meta{display:inline-flex;align-items:center;gap:9px;font-size:12px;flex-wrap:wrap}
.bc-meta .bc-name{font-weight:600;color:var(--t1)}
.bc-tag{padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.04em}
.bc-tag.pk{color:#ff5fb2;background:rgba(255,45,146,.12);border:1px solid rgba(255,45,146,.3)}
.bc-tag.bl{color:#6fc1ff;background:rgba(58,155,255,.12);border:1px solid rgba(58,155,255,.3)}
.bc-time{color:var(--t2);font-size:11px}
.bc-text{color:var(--t1);font-size:13.5px;line-height:1.5;word-break:break-word}
.bc-actions{display:inline-flex;align-items:center;gap:14px;margin-top:3px;color:var(--t2);font-size:11px}
.bc-actions button{background:none;border:none;color:inherit;cursor:pointer;padding:0;font-size:inherit;font-family:inherit;display:inline-flex;align-items:center;gap:4px}
.bc-actions button:hover{color:var(--t1)}

.bc-likes{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--t2);font-size:11px;font-family:'JetBrains Mono',monospace;padding-top:2px}
.bc-likes button{background:none;border:none;cursor:pointer;padding:0;color:inherit;display:grid;place-items:center;transition:color .15s,transform .15s}
.bc-likes button:hover{color:#ff5fb2;transform:scale(1.1)}
.bc-likes .bc-liked{color:#ff5fb2}

.bc-more{
  margin-top:18px;width:100%;padding:10px;
  border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:rgba(20,14,30,.4);color:var(--t2);
  font-size:12px;font-weight:500;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.bc-more:hover{color:var(--t1);border-color:rgba(255,255,255,.18)}

@media(max-width:768px){
  .battle-comments{margin:24px 10px 18px;padding:18px 16px}
  .bc-title{font-size:15px}
  .bc-input{font-size:13px}
  .bc-text{font-size:13px}
}

/* Mobile */
/* ═══ TABLET ═══ */
@media(max-width:1024px){
  .duel-card{max-width:340px}
  .duel-vs-text{width:120px;height:200px;margin:0;font-size:50px}
  .duel-vs-text::before{width:48px;height:200px}
  .bmt-time{font-size:30px}
  .duel-name{font-size:22px}
}

/* ═══ TABLET ═══ */
@media(max-width:768px){
  #page-battle .battle-inner{padding:10px 10px 20px}
  .battle-top-bar{padding:4px 0 10px;gap:8px}
  .bmt-time{font-size:26px}
  .bmt-label{font-size:9px;margin-bottom:3px}
  .bmt-units{gap:24px;font-size:8px;margin-top:5px}
  .battle-action-circle{width:36px;height:36px}
  .battle-action-circle svg{width:15px;height:15px}
  
  .duel-arrow{width:36px;height:36px}
  .duel-arrow svg{width:16px;height:16px}
  .duel-arrows-wrap{gap:4px}
  
  .duel{padding:10px 0;margin-bottom:14px}
  .duel-card{max-width:none}
  .duel-card:nth-child(1){transform:rotateY(5deg)}
  .duel-card:nth-child(3){transform:rotateY(-5deg)}
  .duel-card:nth-child(1):hover:not(.voted){transform:rotateY(5deg) translateY(-4px) scale(1.01)}
  .duel-card:nth-child(3):hover:not(.voted){transform:rotateY(-5deg) translateY(-4px) scale(1.01)}
  .duel-card:nth-child(1).winner{transform:none!important}
  .duel-card:nth-child(3).winner{transform:none!important}
  .duel-card:nth-child(1).loser{transform:none!important}
  .duel-card:nth-child(3).loser{transform:none!important}
  
  .duel-name{font-size:17px;margin-bottom:4px}
  .duel-age{font-size:11px;line-height:1.35}
  .duel-info{padding:12px}
  .duel-verified-badge,.duel-votes-badge{font-size:10px;padding:4px 8px}
  .duel-verified-badge{padding-left:4px;gap:5px}
  .duel-verified-icon{width:15px;height:15px}
  .duel-top-badges{top:8px;left:8px;right:8px}
  
  .duel-vs-text{width:80px;height:130px;margin:0;font-size:32px}
  .duel-vs-text::before{width:30px;height:130px}
  
  .vote-cta-btn{padding:10px 8px;font-size:11px;gap:5px;border-radius:12px}
  .vote-cta-btn-icon{width:16px;height:16px;font-size:13px}
  .duel-vote-cta{margin-top:8px}
  
  .duel-vs-pcts{padding:8px 14px;min-width:110px}
  .duel-vs-pcts .vp-pcts{font-size:15px;gap:8px}
  .duel-vs-pcts .vp-bolt{font-size:13px}
  .duel-vs-pcts .vp-total{font-size:9px}
  
  .share-prompt{font-size:10px;flex-direction:column;gap:8px;padding:10px 14px;margin-top:14px}
}

/* ═══ MOBILE (телефоны) ═══ */
@media(max-width:480px){
  #page-battle .battle-inner{padding:8px 8px 16px}
  .battle-top-bar{padding:4px 0 8px;gap:6px;flex-wrap:nowrap;position:relative}
  .battle-mega-timer{position:static;transform:none;min-width:0;flex:1}
  .bmt-time{font-size:22px}
  .bmt-label{font-size:8px;margin-bottom:2px;letter-spacing:.06em}
  .bmt-units{gap:16px;font-size:7px;margin-top:3px}
  .battle-action-circle{width:32px;height:32px}
  .battle-action-circle svg{width:13px;height:13px}
  .battle-top-actions{gap:6px}
  
  .duel-arrow{width:28px;height:28px}
  .duel-arrow svg{width:12px;height:12px}
  .duel-arrows-wrap{gap:2px}
  
  .duel{padding:6px 0;margin-bottom:10px;gap:0}
  .duel-card:nth-child(1),.duel-card:nth-child(3){transform:none}
  .duel-card:nth-child(1):hover:not(.voted),.duel-card:nth-child(3):hover:not(.voted){transform:translateY(-3px) scale(1.005)}
  .duel-card:nth-child(1).winner,.duel-card:nth-child(3).winner{transform:none!important}
  .duel-card:nth-child(1).loser,.duel-card:nth-child(3).loser{transform:none!important}
  .duel-card:nth-child(1) .duel-card-frame{box-shadow:0 0 0 1px rgba(236,72,153,.4),0 0 12px rgba(236,72,153,.5),0 0 24px rgba(236,72,153,.25),-2px 4px 12px rgba(0,0,0,.5)}
  .duel-card:nth-child(3) .duel-card-frame{box-shadow:0 0 0 1px rgba(59,130,246,.4),0 0 12px rgba(59,130,246,.5),0 0 24px rgba(59,130,246,.25),2px 4px 12px rgba(0,0,0,.5)}
  .duel-card-frame{border-radius:18px}
  
  .duel-name{font-size:13px;letter-spacing:-.2px;margin-bottom:2px}
  .duel-age{font-size:9px;line-height:1.25;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .duel-info{padding:8px}
  
  .duel-verified-badge{font-size:0;padding:3px;gap:0}
  .duel-verified-badge span:last-child,.duel-verified-badge::after{display:none}
  .duel-verified-icon{width:13px;height:13px}
  .duel-votes-badge{font-size:9px;padding:3px 6px;gap:2px}
  .duel-votes-badge::before{width:9px;height:9px}
  .duel-top-badges{top:6px;left:6px;right:6px}
  
  .duel-vs-text{width:50px;height:90px;margin:0;font-size:22px}
  .duel-vs-text::before{width:20px;height:90px}
  
  .vote-cta-btn{padding:8px 4px;font-size:9px;gap:3px;border-radius:10px;border-width:1.5px;letter-spacing:-.3px}
  .vote-cta-btn-icon{width:12px;height:12px;font-size:10px}
  .duel-vote-cta{margin-top:6px}
  
  .duel-vs-pcts{padding:6px 10px;min-width:75px;border-radius:10px}
  .duel-vs-pcts .vp-pcts{font-size:11px;gap:5px;margin-bottom:1px}
  .duel-vs-pcts .vp-bolt{font-size:9px}
  .duel-vs-pcts .vp-total{font-size:8px}
  
  .share-prompt{font-size:10px;padding:8px 12px;margin-top:10px;border-radius:10px}
  .share-prompt-btn{font-size:10px;padding:4px 10px}
  .share-prompt-text{font-size:10px;line-height:1.3}
}

/* ═══ MOBILE TINY (320-360px) ═══ */
@media(max-width:360px){
  .bmt-time{font-size:18px}
  .duel-vs-text{width:42px;height:75px;margin:0;font-size:18px}
  .duel-vs-text::before{width:16px;height:75px}
  .duel-name{font-size:12px}
  .duel-age{font-size:8px}
  .vote-cta-btn{font-size:8px;padding:7px 3px}
  .vote-cta-btn-icon{width:10px;height:10px}
  .duel-vs-pcts{padding:5px 8px;min-width:65px}
  .duel-vs-pcts .vp-pcts{font-size:10px}
  .duel-arrow{width:24px;height:24px}
  .duel-arrow svg{width:10px;height:10px}
  .duel-verified-icon{width:11px;height:11px}
  .duel-votes-badge{font-size:8px;padding:2px 5px}
}
/* Mobile next battle button — скрыта по умолчанию */
.bmt-subtitle{display:none}

/* ═══ Баннер завершённого батла ═══ */
.finished-banner{
  margin:0 auto 24px;
  padding:28px 32px;
  text-align:center;
  background:linear-gradient(135deg, rgba(236,72,153,.18), rgba(139,92,246,.18), rgba(59,130,246,.18));
  border:1.5px solid rgba(236,72,153,.4);
  border-radius:24px;
  backdrop-filter:blur(16px);
  box-shadow:
    0 8px 32px rgba(0,0,0,.5),
    0 0 60px rgba(236,72,153,.15),
    inset 0 1px 0 rgba(255,255,255,.1);
  max-width:600px;
  width:100%;
  animation:finishedBannerIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes finishedBannerIn{
  from{opacity:0;transform:translateY(-20px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.finished-banner-title{
  font-size:28px;font-weight:900;
  background:linear-gradient(135deg,#fff 0%,#ff6bb3 50%,#60a5fa 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.5px;
  margin-bottom:6px;
}
.finished-banner-sub{
  font-size:14px;font-weight:600;
  color:rgba(255,255,255,.55);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.finished-winner{
  margin-top:14px;
  font-size:17px;font-weight:800;
  color:#fff;
  padding:10px 20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  display:inline-block;
  letter-spacing:-.2px;
}
.finished-winner b{
  background:linear-gradient(135deg,#fbbf24,#ec4899);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
}
.finished-winner-card .duel-card-frame{
  box-shadow:0 0 0 3px #fbbf24,0 0 40px rgba(251,191,36,.5)!important;
}
.finished-winner-card::before{
  content:'👑';
  position:absolute;
  top:-30px;left:50%;
  transform:translateX(-50%);
  font-size:36px;
  z-index:30;
  filter:drop-shadow(0 4px 12px rgba(251,191,36,.6));
}
.finished-loser-card{
  opacity:.55;
  filter:grayscale(.4);
}

@media(max-width:768px){
  .finished-banner{padding:14px 16px;margin:0 0 12px}
  .finished-banner-title{font-size:18px}
  .finished-banner-sub{font-size:12px}
  .finished-winner{font-size:13px;padding:6px 12px}
}

.mobile-next-battle-btn{
  display:none;
  width:100%;
  margin:14px 0 6px;
  padding:14px 20px;
  background:linear-gradient(135deg, rgba(236,72,153,.15), rgba(59,130,246,.15));
  border:1.5px solid rgba(236,72,153,.4);
  border-radius:14px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:15px;
  letter-spacing:.02em;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(236,72,153,.25), inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .2s, box-shadow .2s;
}
.mobile-next-battle-btn:active{
  transform:scale(.97);
}

/* ═══════════════════════════════════════════════════════════ */

/* ═══ Мобилка/планшет: упрощённый интерфейс ═══ */
@media(max-width:768px){
  /* Скрываем VS */
  .duel-vs-text{display:none!important}

  /* Скрываем кнопки голосования снизу — тап по фото вместо них */
  .duel-vote-cta{display:none!important}

  /* Скрываем стрелки переключения */
  .duel-arrow{display:none!important}

  /* Показываем большую кнопку "Следующий батл" */
  .mobile-next-battle-btn{display:block}

  /* Имена внизу карточки */
  .duel-info{
    bottom:0!important;
    padding:14px 14px 16px!important;
  }
  .duel-name{font-size:18px!important}
  .duel-age{font-size:12px!important}

  /* Таймер по центру */
  .battle-mega-timer{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:auto!important;
    flex:none!important;
    margin-top:0!important;
  }
  .battle-top-bar{min-height:80px}

  /* Карточки в одну колонку, помещаются в экран без скролла */
  .duel-card-frame{
    aspect-ratio:16/10!important;
    border-radius:14px!important;
  }

  .duel-card{
    max-width:100%!important;
    width:100%!important;
  }
  
  /* Грид → вертикальный стек, обе карточки на 1 экран */
  .duel{
    display:flex!important;
    flex-direction:column!important;
    padding:0 !important;
    gap:10px!important;
    perspective:none!important;
  }
  .duel-vs-text{display:none!important;width:0!important;height:0!important;margin:0!important}
  .duel-card:nth-child(1){transform:none!important}
  .duel-card:nth-child(3){transform:none!important}
  
  #page-battle .battle-inner{
    overflow-x:hidden;
    padding:8px 14px 14px!important;
  }

  /* Кнопка следующий батл — меньше */
  .mobile-next-battle-btn{
    padding:10px 16px;
    font-size:13px;
    margin:10px 0 4px;
    border-radius:12px;
  }

  /* Подпись под таймером */
  .bmt-subtitle{
    display:block;
    margin-top:8px;
    font-size:12px;
    font-weight:700;
    color:rgba(255,255,255,.75);
    letter-spacing:.04em;
    text-shadow:0 1px 6px rgba(0,0,0,.5);
  }
}

/* ═══════════════════════════════════════════════════════════ */




/* ═══ Report Modal ═══ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;transition:opacity .25s;
}
.modal-overlay.show{opacity:1}
.report-modal-box{
  background:linear-gradient(180deg,#15101e 0%,#0d0918 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  max-width:440px;
  width:100%;
  padding:28px 24px 24px;
  position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 60px rgba(236,72,153,.15);
  transform:scale(.95);
  transition:transform .3s cubic-bezier(.34,1.6,.64,1);
  max-height:85vh;
  overflow-y:auto;
}
.modal-overlay.show .report-modal-box{transform:scale(1)}
.modal-close{position:absolute;top:14px;right:14px;z-index:6;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.7);
  font-size:20px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.modal-close:hover{background:rgba(255,255,255,.1);color:#fff}
.report-modal-icon{
  font-size:48px;
  text-align:center;
  margin-bottom:8px;
  filter:drop-shadow(0 0 16px rgba(236,72,153,.5));
}
.report-modal-title{
  text-align:center;
  font-size:20px;
  font-weight:700;
  color:#fff;
  margin:0 0 6px;
}
.report-modal-sub{
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,.55);
  margin:0 0 20px;
  line-height:1.4;
}
.report-reasons{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.report-reason-btn{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:14px 16px;
  cursor:pointer;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;font-weight:500;
  text-align:left;
  transition:all .2s;
  width:100%;
}
.report-reason-btn:hover{
  background:rgba(236,72,153,.08);
  border-color:rgba(236,72,153,.3);
  transform:translateX(2px);
}
.report-reason-icon{
  font-size:22px;
  flex-shrink:0;
  width:32px;text-align:center;
}
.report-reason-label{
  flex:1;
  line-height:1.3;
}
.report-reason-arrow{
  font-size:22px;
  color:rgba(255,255,255,.4);
  flex-shrink:0;
  font-weight:300;
}
.report-reason-btn:hover .report-reason-arrow{color:#ec4899}

@media(max-width:500px){
  .report-modal-box{padding:24px 18px 18px;border-radius:20px}
  .report-modal-title{font-size:18px}
  .report-modal-sub{font-size:12px}
  .report-reason-btn{padding:12px 14px;font-size:13px}
  .report-reason-icon{font-size:18px;width:26px}
}

/* ═══ Success modal ═══ */
.report-success-box{
  background:linear-gradient(180deg,#15101e 0%,#0d0918 100%);
  border:1px solid rgba(34,197,94,.3);
  border-radius:24px;
  max-width:380px;
  width:100%;
  padding:36px 28px 28px;
  text-align:center;
  box-shadow:
    0 24px 80px rgba(0,0,0,.6),
    0 0 60px rgba(34,197,94,.25);
  transform:scale(.85);
  transition:transform .35s cubic-bezier(.34,1.6,.64,1);
}
.modal-overlay.show .report-success-box{transform:scale(1)}
.report-success-icon{
  width:80px;height:80px;
  margin:0 auto 18px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:
    0 8px 30px rgba(34,197,94,.5),
    0 0 60px rgba(34,197,94,.3);
  animation:successPop .5s cubic-bezier(.34,1.7,.64,1);
}
.report-success-icon svg{width:40px;height:40px}
@keyframes successPop{
  0%{transform:scale(0) rotate(-180deg)}
  60%{transform:scale(1.1) rotate(10deg)}
  100%{transform:scale(1) rotate(0)}
}
.report-success-title{
  font-size:22px;
  font-weight:800;
  color:#fff;
  margin:0 0 8px;
  letter-spacing:-.3px;
}
.report-success-sub{
  font-size:14px;
  color:rgba(255,255,255,.6);
  margin:0 0 24px;
  line-height:1.4;
}
.report-success-btn{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  border:none;
  padding:12px 32px;
  border-radius:14px;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 6px 20px rgba(34,197,94,.4);
}
.report-success-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 26px rgba(34,197,94,.55);
}








.duel-win-badge,.duel-card.winner .duel-win-badge{display:none!important}
.duel-info{position:absolute;bottom:0;left:0;right:80px;padding:12px 13px;text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none}
.duel-name{font-weight:700;font-size:18px;margin-bottom:3px;color:#fff}
.duel-age{font-size:14px;color:rgba(255,255,255,.8);font-weight:500}
.duel-elo{display:inline-flex;align-items:center;gap:4px;margin-top:6px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:3px 10px;border-radius:12px;font-size:13px;font-weight:700;color:#fff}
.duel-time{font-size:13px;color:rgba(255,255,255,.8);margin-top:5px;font-weight:500}
.duel-vote-bar{height:5px;background:var(--bg3);position:relative;overflow:hidden}
.duel-vote-left{position:absolute;top:0;left:0;height:100%;background:var(--green);border-radius:0 2px 2px 0;transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.duel-vote-right{position:absolute;top:0;right:0;height:100%;background:var(--acc);border-radius:2px 0 0 2px;transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.duel-foot{padding:8px 11px;display:flex;align-items:center;justify-content:space-between}
.duel-pct-green{font-weight:800;font-size:16px;color:var(--green)}
.duel-pct-red{font-weight:800;font-size:16px;color:var(--acc)}

/* ══ КНОПКА ПОДАРИТЬ — большая золотая ══ */
.duel-gift-btn{
  position:absolute;bottom:14px;right:14px;z-index:20;
  width:54px;height:54px;border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:0;
  background:none;
  padding:0;
  box-shadow:0 6px 22px rgba(245,158,11,.45);
  animation:dgbPulse 2.4s ease-in-out infinite;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  overflow:visible;
  -webkit-tap-highlight-color:transparent;
  pointer-events:auto;
}
.duel-gift-btn::before{
  content:none;
}
.duel-gift-btn::after{ content:none; }
.duel-gift-btn:hover{
  transform:scale(1.1) rotate(-6deg);
  box-shadow:0 10px 30px rgba(245,158,11,.7);
}
.duel-gift-btn:active{transform:scale(.94)}
@keyframes dgbPulse{
  0%,100%{box-shadow:0 6px 22px rgba(245,158,11,.45)}
  50%{box-shadow:0 8px 28px rgba(245,158,11,.65)}
}
@keyframes dgbWiggle{
  0%,100%{transform:rotate(0)}
  10%{transform:rotate(-5deg)}
  20%{transform:rotate(5deg)}
  30%{transform:rotate(-2deg)}
  40%{transform:rotate(0)}
}
@keyframes dgbSpin{
  to{transform:rotate(360deg)}
}
@media(max-width:768px){
  .duel-gift-btn{width:46px;height:46px;bottom:10px;right:10px}
  .duel-x2-btn{width:46px;height:46px;bottom:10px;right:66px}
}

/* ══ КНОПКА X2 ГОЛОС (платный) ══ */
.duel-x2-btn{
  position:absolute;bottom:14px;right:80px;z-index:20;
  width:54px;height:54px;border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:none;
  padding:0;
  box-shadow:0 6px 22px rgba(58,155,255,.45);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  overflow:visible;
  -webkit-tap-highlight-color:transparent;
}
.duel-x2-btn::before{ content:none; }
.duel-x2-btn::after{ content:none; }
/* Картинка-иконка заполняет всю круглую кнопку */
.duel-btn-img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  pointer-events:none;
  display:block;
}
.duel-x2-btn:hover{
  transform:scale(1.1) rotate(-6deg);
  box-shadow:0 10px 30px rgba(58,155,255,.7);
}
.duel-x2-btn:active{transform:scale(.94)}

@media(max-width:768px){
  .duel-x2-btn{width:46px;height:46px;bottom:10px;right:66px;font-size:16px}
  .duel-x2-btn::before,.duel-x2-btn::after{width:14px;height:14px;font-size:8px;top:-3px;right:-3px}
}

/* ══ КНОПКА ПОДЕЛИТЬСЯ на карточке ══ */
.duel-share-btn{
  position:absolute;bottom:46px;left:10px;z-index:15;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,background .2s;
  -webkit-tap-highlight-color:transparent;
}
.duel-share-btn:hover{transform:scale(1.12);background:rgba(255,255,255,.26)}
.duel-share-btn:active{transform:scale(.94)}
.duel-share-btn svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ══ МОДАЛКА ПОДЕЛИТЬСЯ ══ */
.share-modal-bg{
  position:fixed;inset:0;z-index:800;
  display:none;align-items:flex-end;justify-content:center;
}
.share-modal-bg.open{display:flex;animation:fadeUp .2s ease}
.share-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.share-modal{
  position:relative;z-index:1;
  width:100%;max-width:480px;
  background:var(--bg1);
  border-radius:24px 24px 0 0;
  border-top:1px solid var(--br);
  padding:20px 16px 36px;
  animation:slideUp .3s cubic-bezier(.34,1.2,.64,1);
}
.sm-handle{width:36px;height:4px;background:var(--bg3);border-radius:2px;margin:0 auto 16px}
.sm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sm-title{font-size:16px;font-weight:800}
.sm-close{}

/* Превью батла в модалке */
.sm-preview{
  display:flex;align-items:center;gap:12px;
  background:var(--bg2);border:1px solid var(--br);
  border-radius:14px;padding:10px 14px;margin-bottom:16px;
}
.sm-preview-photos{display:flex;align-items:center;gap:-6px}
.sm-preview-photo{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--bg1);margin-left:-8px}
.sm-preview-photo:first-child{margin-left:0}
.sm-preview-vs{font-size:10px;font-weight:800;color:var(--acc);margin:0 6px}
.sm-preview-info{flex:1;min-width:0}
.sm-preview-names{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-preview-code{font-size:10px;color:var(--t3);font-family:'Inter',sans-serif;margin-top:2px}

/* Кнопки соцсетей */
.sm-socials{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;margin-bottom:16px}
.sm-social{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.sm-social-icon{
  width:54px;height:54px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s, box-shadow .18s;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.sm-social:hover .sm-social-icon{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 18px rgba(0,0,0,.28)}
.sm-social:active .sm-social-icon{transform:scale(.94)}
.sm-social-name{font-size:11px;color:var(--t2);font-weight:500;text-align:center}

/* Поле ссылки */
.sm-link-label{font-size:12px;color:var(--t3);font-weight:600;margin-bottom:8px}
.sm-link-row{display:flex;gap:8px}
.sm-link-input{
  flex:1;background:var(--bg2);border:1px solid var(--br);
  color:var(--t2);border-radius:12px;padding:10px 14px;
  font-family:'Inter',sans-serif;font-size:12px;outline:none;
  cursor:text;transition:border-color .18s;
}
.sm-link-input:focus{border-color:var(--acc)}
.sm-copy-btn{
  background:var(--acc);border:none;color:#fff;
  padding:10px 16px;border-radius:12px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:700;
  transition:opacity .18s;white-space:nowrap;flex-shrink:0;
  display:flex;align-items:center;gap:6px;
}
.sm-copy-btn:hover{opacity:.85}
.sm-copy-btn.copied{background:var(--green)}
.gift-count{
  position:absolute;top:-5px;right:-5px;
  background:var(--acc);color:#fff;
  font-size:9px;font-weight:800;
  padding:1px 5px;border-radius:10px;
  display:none;font-family:'Inter',sans-serif;
  border:1.5px solid var(--bg1);
  white-space:nowrap;
}
.gift-count.show{display:block}

/* ══ МОДАЛКА ПОДАРКОВ — поверх фото ══ */
.gift-modal-bg{
  display:none;
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
  padding:20px;
}
.gift-modal-bg.open{display:flex}
.gift-modal-backdrop{
  position:absolute;inset:0;
}
.gift-modal{
  position:relative;z-index:1;
  width:100%;max-width:480px;
  background:var(--bg1);
  border-radius:20px;
  border:1px solid var(--br);
  padding:24px 20px 28px;
  max-height:85vh;overflow-y:auto;
}
@keyframes legalPop{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.duel-x2-btn-hidden{display:none!important}
/* PvP / PvE кнопки в навбаре */
.nav-add-pvp{
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 60%,#1d4ed8 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 0 18px rgba(59,130,246,.4)!important;
}
.nav-add-pve{
  background:linear-gradient(135deg,#ff4fa6 0%,#c026a8 55%,#7c3aed 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 0 18px rgba(255,45,146,.4)!important;
}
.nav-add-pvp:hover,.nav-add-pve:hover{transform:translateY(-1px)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.gm-handle{display:none}
.gm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.gm-title{font-size:16px;font-weight:800}
.gm-close{background:var(--bg3);border:none;color:var(--t2);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.gm-sub{font-size:12px;color:var(--t2);margin-bottom:16px}
.gm-sub span{color:var(--gold);font-weight:700}

/* Сетка подарков */
.gift-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;margin-bottom:16px;
}
.gift-item{
  background:var(--bg2);border:1.5px solid var(--br);
  border-radius:14px;padding:10px 6px 8px;
  text-align:center;cursor:pointer;
  transition:all .18s;position:relative;
}
.gift-item:hover{border-color:var(--gold);transform:translateY(-2px)}
.gift-item.selected{
  border-color:var(--gold);
  background:rgba(245,158,11,.12);
  transform:translateY(-2px);
}
.gift-item.selected::after{
  content:'✓';position:absolute;top:4px;right:6px;
  font-size:10px;font-weight:800;color:var(--gold);
}
.gift-emoji{font-size:26px;display:block;margin-bottom:4px}
.gift-image{width:48px;height:48px;object-fit:contain;display:block;margin:0 auto 4px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}

/* ═══ Overlay с действиями после голосования ═══ */
.duel-name{cursor:pointer;transition:opacity .2s}
.duel-name:hover{opacity:.85}
.duel-name-arrow{
  display:inline-block;
  opacity:.6;
  font-weight:700;
  margin-left:2px;
  transition:transform .2s, opacity .2s;
}
.duel-name:hover .duel-name-arrow{opacity:1;transform:translateX(3px)}

/* ═══ Custom confirm modal ═══ */
.cc-bg{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(10px);
  z-index:99999;
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .2s;
}
.cc-bg.open{display:flex;opacity:1}
.cc-box{
  background:linear-gradient(180deg,#1a1028 0%,#0d0918 100%);
  border:1.5px solid rgba(236,72,153,.3);
  border-radius:22px;
  max-width:380px;width:100%;
  padding:32px 24px 24px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(236,72,153,.15);
  animation:ccSlide .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ccSlide{from{transform:translateY(20px) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.cc-icon{
  font-size:48px;
  margin-bottom:12px;
  filter:drop-shadow(0 4px 16px rgba(236,72,153,.4));
}
.cc-msg{
  font-size:16px;
  font-weight:700;
  color:#fff;
  line-height:1.4;
  margin-bottom:14px;
  letter-spacing:-.1px;
}
.cc-cost{
  display:inline-block;
  background:linear-gradient(135deg, rgba(251,191,36,.2), rgba(245,158,11,.15));
  border:1px solid rgba(251,191,36,.4);
  border-radius:12px;
  padding:8px 18px;
  font-size:18px;
  font-weight:900;
  color:#fbbf24;
  margin-bottom:20px;
  box-shadow:0 4px 16px rgba(251,191,36,.2);
}
.cc-buttons{
  display:flex;
  gap:10px;
  margin-top:8px;
}
.cc-btn{
  flex:1;
  padding:13px 16px;
  border-radius:14px;
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  border:1.5px solid;
  transition:all .2s;
}
.cc-btn-cancel{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);
}
.cc-btn-cancel:hover{background:rgba(255,255,255,.08);color:#fff}
.cc-btn-ok{
  background:linear-gradient(135deg,#ec4899,#be185d);
  border-color:rgba(255,255,255,.2);
  color:#fff;
  box-shadow:0 6px 20px rgba(236,72,153,.45);
}
.cc-btn-ok:hover{box-shadow:0 8px 28px rgba(236,72,153,.65);transform:translateY(-1px)}
.cc-btn:active{transform:scale(.96)}

/* ═══ Public profile modal ═══ */
/* Модалка выбора страны */
.cp-modal-bg{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:cpFadeIn .2s ease;
}
@keyframes cpFadeIn{from{opacity:0}to{opacity:1}}
.cp-modal{
  background:var(--bg2,#16121f);
  border:1px solid var(--br,rgba(255,255,255,.1));
  border-radius:20px;
  width:100%;max-width:420px;max-height:80vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.cp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;font-size:17px;font-weight:800;color:var(--t1,#fff);
  border-bottom:1px solid var(--br,rgba(255,255,255,.08));
}
.cp-close{position:absolute;top:14px;right:14px;z-index:6;
}
.cp-close:hover{background:rgba(255,255,255,.15)}
.cp-search{
  margin:14px 20px;
  background:var(--bg,#0e0b16);border:1.5px solid var(--br,rgba(255,255,255,.1));
  color:var(--t1,#fff);border-radius:12px;padding:12px 14px;font-size:15px;outline:none;
  font-family:inherit;
}
.cp-search:focus{border-color:var(--acc,#ec4899)}
.cp-list{
  flex:1;overflow-y:auto;padding:0 12px 14px;
  display:flex;flex-direction:column;gap:2px;
}
.cp-list::-webkit-scrollbar{width:6px}
.cp-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.cp-item{
  display:flex;align-items:center;gap:12px;
  background:none;border:none;cursor:pointer;
  padding:11px 12px;border-radius:10px;
  color:var(--t1,#fff);font-size:15px;text-align:left;width:100%;
  font-family:inherit;transition:background .12s;
}
.cp-item:hover{background:rgba(255,255,255,.07)}
.cp-flag{font-size:22px;flex-shrink:0}

/* Модалка выбора страны — конец */
.pp-modal-bg{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(12px);
  z-index:9999;
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .25s;
}
.pp-modal-bg.open{display:flex;opacity:1;animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pp-modal{
  background:linear-gradient(180deg,#1a1028 0%,#0d0918 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  max-width:440px;width:100%;
  padding:28px 24px;
  position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:slideUp .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.pp-close{position:absolute;top:16px;right:16px;z-index:6;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:24px;line-height:1;
  cursor:pointer;
  transition:all .2s;
}
.pp-close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.pp-header{
  display:flex;gap:16px;align-items:center;
  margin-bottom:24px;
}
.pp-avatar{
  width:80px;height:80px;border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(236,72,153,.4);
  box-shadow:0 4px 20px rgba(236,72,153,.3);
  flex-shrink:0;
}
.pp-avatar-fallback{
  background:linear-gradient(135deg,#ec4899,#3b82f6);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:900;color:#fff;
}
.pp-info{flex:1;min-width:0}
.pp-name{
  font-size:22px;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:6px;
  margin-bottom:2px;
  letter-spacing:-.3px;
}
.pp-verified{width:18px;height:18px}
.pp-username{font-size:14px;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:6px}
.pp-country{font-size:13px;color:rgba(255,255,255,.6);font-weight:500;margin-bottom:6px}
.pp-bio{font-size:14px;color:rgba(255,255,255,.75);line-height:1.4}
.pp-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:16px;
}
.pp-stat{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px 8px;
  text-align:center;
}
.pp-stat-val{
  font-size:20px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#fff,#ff6bb3);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:2px;
}
.pp-stat-lbl{font-size:11px;color:rgba(255,255,255,.5);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* Уровень в публичном профиле */
.pp-level{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:10px;
}
.pp-level-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;
}
.pp-level-name{font-size:15px;font-weight:800;color:#fff}
.pp-level-score{font-size:12px;color:rgba(255,255,255,.5);font-weight:500}
.pp-level-bar{
  height:6px;border-radius:3px;
  background:rgba(255,255,255,.1);
  overflow:hidden;margin-bottom:6px;
}
.pp-level-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,#ec4899,#a855f7);
  transition:width .4s ease;
}
.pp-level-sub{font-size:11px;color:rgba(255,255,255,.4);text-align:right}

.pp-extra{
  background:rgba(236,72,153,.12);
  border:1px solid rgba(236,72,153,.25);
  border-radius:12px;
  padding:10px 14px;
  text-align:center;
  font-size:14px;
  color:#fff;
  font-weight:700;
}
.pp-extra span{font-size:16px;margin-right:6px}
/* Соцсети в публичном профиле */
.pp-socials{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pp-social-btn{
  display:flex;align-items:center;gap:8px;
  flex:1;min-width:120px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:10px 14px;
  text-decoration:none;color:#fff;font-size:13px;font-weight:600;
  transition:background .2s, transform .15s;
}
.pp-social-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.pp-social-btn img{width:22px;height:22px;border-radius:6px;object-fit:cover;flex-shrink:0}
.pp-social-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:480px){
  .pp-modal{padding:24px 18px;border-radius:20px}
  .pp-header{gap:12px;margin-bottom:18px}
  .pp-avatar{width:64px;height:64px}
  .pp-name{font-size:18px}
  .pp-stats{grid-template-columns:repeat(2,1fr)}
  .pp-stat-val{font-size:18px}
}

.vote-actions-overlay{
  position:absolute;
  bottom:14px;
  right:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:50;
  animation:voteActionsAppear .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events:auto;
  transform-style:flat;
  backface-visibility:visible;
  transform:translateZ(1px);
}
/* Сбрасываем индивидуальные позиции — везде правый нижний на фото */
#dc-0 .vote-actions-overlay,
#dc-1 .vote-actions-overlay{
  left:auto;
  right:14px;
  top:auto;
  bottom:14px;
}
@keyframes voteActionsAppear{
  from{opacity:0;transform:translateY(20px) scale(.6)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.va-btn{
  width:44px;height:44px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid;
  backdrop-filter:blur(12px);
  cursor:pointer;
  font-size:20px;
  transition:transform .2s, box-shadow .25s;
  padding:0;
  line-height:1;
  pointer-events:auto!important;
  position:relative;
  z-index:60;
}
.va-btn:hover{transform:scale(1.1) rotate(-5deg)}
.va-btn:active{transform:scale(.95)}
.va-btn-gift{
  position:relative;
  width:54px;height:54px;
  font-size:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(135deg,#ffd86a 0%,#f59e0b 45%,#e63d6f 100%);
  border-color:rgba(255,236,150,.55);
  box-shadow:
    0 6px 22px rgba(245,158,11,.6),
    0 0 30px rgba(255,216,106,.35),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 8px rgba(0,0,0,.18);
  animation:vaGiftPulse 2.4s ease-in-out infinite;
  overflow:visible;
}
/* gift icon */
.va-btn-gift::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20 7h-2.5a3 3 0 0 0-5.5-3 3 3 0 0 0-5.5 3H4a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h1v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7h1a1 1 0 0 0 1-1V9a2 2 0 0 0-2-2zM15 4a1 1 0 1 1 0 2h-2V5a1 1 0 0 1 1-1h1zM9 4a1 1 0 0 1 1 1v1H8a1 1 0 1 1 0-2h1zm2 18H7a1 1 0 0 1-1-1v-7h5v8zm0-9H4V9h7v4zm2 9v-8h5v7a1 1 0 0 1-1 1h-4zm7-9h-7V9h7v4z'/></svg>") center/26px no-repeat;
  filter:drop-shadow(0 1px 2px rgba(80,30,0,.3));
  pointer-events:none;
  animation:vaGiftWiggle 3.2s ease-in-out infinite;
}
/* rotating shimmer ring */
.va-btn-gift::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.55) 70deg, transparent 140deg, transparent 360deg);
  filter:blur(1px);
  pointer-events:none;opacity:.6;
  animation:vaGiftSpin 3.5s linear infinite;
  z-index:-1;
}
.va-btn-gift:hover{
  box-shadow:
    0 10px 30px rgba(245,158,11,.8),
    0 0 40px rgba(255,216,106,.6),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -3px 8px rgba(0,0,0,.18);
}
@keyframes vaGiftPulse{
  0%,100%{box-shadow:0 6px 22px rgba(245,158,11,.6),0 0 30px rgba(255,216,106,.35),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 8px rgba(0,0,0,.18)}
  50%{box-shadow:0 8px 28px rgba(245,158,11,.8),0 0 44px rgba(255,216,106,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(0,0,0,.18)}
}
@keyframes vaGiftWiggle{
  0%,100%{transform:rotate(0)}
  10%{transform:rotate(-5deg)}
  20%{transform:rotate(5deg)}
  30%{transform:rotate(-2deg)}
  40%{transform:rotate(0)}
}
@keyframes vaGiftSpin{
  to{transform:rotate(360deg)}
}
.va-btn-revote{
  background:linear-gradient(135deg, rgba(59,130,246,.85), rgba(29,78,216,.9));
  border-color:rgba(255,255,255,.25);
  box-shadow:0 6px 20px rgba(59,130,246,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.va-btn-revote:hover{box-shadow:0 8px 28px rgba(59,130,246,.8), inset 0 1px 0 rgba(255,255,255,.3)}

@media(max-width:768px){
  .vote-actions-overlay{bottom:14px;right:10px;gap:8px}
  #dc-0 .vote-actions-overlay,
  #dc-1 .vote-actions-overlay{
    left:auto;right:10px;top:auto;bottom:14px;
  }
  .va-btn{width:38px;height:38px;font-size:18px}
}
.gift-name{font-size:10px;color:var(--t2);font-weight:500;margin-bottom:2px}
.gift-price{font-size:11px;font-weight:800;color:var(--gold)}
.gift-rarity-dot{
  width:5px;height:5px;border-radius:50%;
  display:inline-block;margin-right:3px;vertical-align:middle;
}

/* Количество */
.gift-qty-row{
  display:flex;align-items:center;justify-content:center;
  gap:0;margin-bottom:16px;
  background:var(--bg2);border:1px solid var(--br);
  border-radius:14px;padding:8px 16px;
}
.gift-qty-label{font-size:12px;color:var(--t2);font-weight:600;margin-right:auto}
.gift-qty-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--br);
  color:var(--t1);font-size:18px;font-weight:300;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;line-height:1;
}
.gift-qty-btn:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.gift-qty-val{
  font-size:20px;font-weight:800;
  min-width:44px;text-align:center;
  font-family:'Inter',sans-serif;
}
.gift-total{
  font-size:12px;color:var(--t2);margin-left:auto;
  font-family:'Inter',sans-serif;
}
.gift-total b{color:var(--gold)}

/* Кнопка отправить */
.gift-send-btn{
  width:100%;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  border:none;color:#fff;padding:14px;border-radius:16px;
  cursor:pointer;font-family:'Inter',sans-serif;font-weight:800;font-size:15px;
  transition:opacity .18s,transform .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 20px rgba(245,158,11,.35);
}
.gift-send-btn:hover{opacity:.88}
.gift-send-btn:active{transform:scale(.97)}
.gift-send-btn:disabled{
  background:var(--bg3);color:var(--t3);
  box-shadow:none;cursor:not-allowed;
}
.gift-send-btn.gm-send-topup{
  background:linear-gradient(135deg,#22c55e,#16a34a)!important;
  box-shadow:0 4px 20px rgba(34,197,94,.45), inset 0 1px 0 rgba(255,255,255,.15)!important;
  animation:topupPulse 1.8s ease-in-out infinite;
}
.gift-send-btn.gm-send-topup:hover{
  box-shadow:0 6px 28px rgba(34,197,94,.6), inset 0 1px 0 rgba(255,255,255,.2)!important;
  transform:translateY(-1px);
}
@keyframes topupPulse{
  0%,100%{box-shadow:0 4px 20px rgba(34,197,94,.45), inset 0 1px 0 rgba(255,255,255,.15)}
  50%{box-shadow:0 6px 32px rgba(34,197,94,.7), inset 0 1px 0 rgba(255,255,255,.2)}
}

.gift-balance-row{
  text-align:center;font-size:11px;color:var(--t3);
  margin-top:10px;
}
.gift-balance-row span{color:var(--gold);font-weight:700}
.gift-balance-row a{color:var(--acc3);cursor:pointer;font-weight:600}

@media(max-width:640px){
  .gift-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .gift-emoji{font-size:22px}
  .gift-item{padding:8px 4px 6px;border-radius:12px}
  .gift-modal{padding:16px 12px 28px}
  .gm-title{font-size:15px}
}
.duel-vs{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:20;pointer-events:none;
}
.vs-circle{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,#ff2d55,#e63d6f);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:12px;color:#fff;letter-spacing:.5px;
  box-shadow:0 0 0 4px rgba(0,0,0,.4),0 0 28px rgba(230,61,111,.7);
  flex-shrink:0;
  animation:vsPulse2 1.8s ease-in-out infinite;
}
@keyframes vsPulse2{
  0%,100%{box-shadow:0 0 0 4px rgba(0,0,0,.4),0 0 20px rgba(230,61,111,.6);transform:scale(1)}
  50%{box-shadow:0 0 0 6px rgba(0,0,0,.25),0 0 40px rgba(230,61,111,1);transform:scale(1.1)}
}
.duel-result,.duel-result.show{display:none!important}
.share-btn{
  background:var(--bg3);border:1px solid var(--br);color:var(--t1);
  padding:9px 18px;border-radius:22px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
  display:flex;align-items:center;gap:6px;
  transition:all .18s;white-space:nowrap;
}
.share-btn:hover{border-color:var(--acc);color:var(--acc);background:var(--accG)}
.share-icon{font-size:15px}
.share-panel{
  margin-top:12px;padding:14px;
  background:var(--bg2);border:1px solid var(--br);border-radius:14px;
  animation:fadeUp .25s ease;
}
.share-panel-title{font-size:12px;color:var(--t2);font-weight:600;margin-bottom:10px}
.share-socials{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.share-social-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:22px;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  transition:opacity .18s,transform .15s;color:#fff;
}
.share-social-btn:hover{opacity:.88}
.share-social-btn:active{transform:scale(.96)}
.share-link-row{display:flex;gap:6px;align-items:center}
.share-link-input{
  flex:1;background:var(--bg3);border:1px solid var(--br);
  color:var(--t2);border-radius:9px;padding:8px 12px;
  font-family:'Inter',sans-serif;font-size:12px;outline:none;
  cursor:text;
}
.share-copy-btn{
  background:var(--acc);border:none;color:#fff;
  padding:8px 14px;border-radius:9px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  transition:opacity .18s;white-space:nowrap;flex-shrink:0;
}
.share-copy-btn:hover{opacity:.85}
.share-copy-btn.copied{background:var(--green)}
.dr-voted-wrap{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dr-voted-icon{font-size:28px;flex-shrink:0}
.dr-voted-title{font-weight:700;font-size:15px;margin-bottom:3px}
.dr-voted-sub{font-size:12px;color:var(--t2)}
.elo-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.elo-chip{font-size:12px;font-weight:600;padding:4px 11px;border-radius:15px}
.elo-chip.win{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);color:var(--green)}
.elo-chip.loss{background:rgba(230,61,111,.1);border:1px solid rgba(230,61,111,.22);color:var(--acc)}
.hint{
  text-align:center;font-size:14px;font-weight:500;
  margin-top:12px;min-height:26px;
  color:var(--t1);
  display:flex;align-items:center;justify-content:center;gap:7px;
  opacity:1;transition:opacity .3s;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:7px 18px;
  letter-spacing:.1px;
}
.hint.hidden{opacity:0;pointer-events:none;border-color:transparent;background:transparent}
.btn-main{background:var(--acc);border:none;color:#fff;padding:10px 22px;border-radius:22px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;transition:opacity .18s,transform .15s}
.btn-main:hover{opacity:.86}
.btn-main:active{transform:scale(.97)}
.btn-out{background:transparent;border:1px solid var(--br);color:var(--t2);padding:10px 18px;border-radius:22px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:500;font-size:14px;transition:all .18s}
.btn-out:hover{border-color:var(--acc);color:var(--acc)}
.upload-area{background:var(--bg1);border:1.5px dashed var(--br);border-radius:13px;padding:14px;margin-bottom:13px;display:none}
.upload-area.visible{display:block;animation:fadeUp .3s ease}

/* ══ ГАМБУРГЕР МЕНЮ ══ */
.hamburger-btn{
  background:var(--bg2);border:1px solid var(--br);
  width:36px;height:36px;border-radius:10px;
  cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  transition:all .15s;flex-shrink:0;
}
.hamburger-btn:hover{border-color:var(--acc)}
.hamburger-btn span{
  display:block;width:16px;height:2px;
  background:var(--t2);border-radius:1px;
  transition:all .2s;
}
.hamburger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--acc)}
.hamburger-btn.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--acc)}

/* Боковое меню */
.side-menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);z-index:350;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.side-menu-overlay.open{opacity:1;pointer-events:all}
.side-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:360;
  width:280px;max-width:85vw;
  background:var(--bg1);border-left:1px solid var(--br);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.side-menu.open{transform:translateX(0)}

.sm-header{
  padding:20px 18px 16px;
  border-bottom:1px solid var(--br);
  display:flex;align-items:center;gap:10px;
}
.sm-header-logo{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:900}
.sm-header-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.sm-close{margin-left:auto;background:var(--bg3);border:none;color:var(--t2);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}

/* Баланс в меню */
.sm-balance{
  margin:14px 14px 0;
  background:linear-gradient(135deg,rgba(230,61,111,.1),rgba(139,92,246,.08));
  border:1px solid rgba(230,61,111,.2);
  border-radius:14px;padding:14px;
  cursor:pointer;transition:border-color .18s;
}
.sm-balance:hover{border-color:rgba(230,61,111,.4)}
.sm-balance-lbl{font-size:11px;color:var(--t2);margin-bottom:4px}
.sm-balance-val{font-size:24px;font-weight:900;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sm-balance-btn{
  background:var(--acc);color:#fff;border:none;
  padding:8px;border-radius:10px;width:100%;
  font-family:'Inter',sans-serif;font-weight:700;font-size:13px;
  cursor:pointer;transition:opacity .15s;
}
.sm-balance-btn:hover{opacity:.88}

/* Пункты меню */
.sm-nav{padding:10px 8px;flex:1}
.sm-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 12px;border-radius:12px;cursor:pointer;
  transition:all .15s;margin-bottom:2px;
  font-size:14px;font-weight:600;color:var(--t2);
  border:none;background:transparent;width:100%;text-align:left;
  font-family:'Inter',sans-serif;
}
.sm-item:hover{background:var(--bg2);color:var(--t1)}
.sm-item.active{background:var(--accG);color:var(--acc)}
.sm-item-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
}
.sm-item-arrow{margin-left:auto;color:var(--t3);font-size:12px}
.sm-divider{height:1px;background:var(--br);margin:8px 12px}

.sm-footer{
  padding:14px 18px;border-top:1px solid var(--br);
  font-size:11px;color:var(--t3);text-align:center;
}
.sm-footer a{color:var(--acc);cursor:pointer}

/* ══ НАСТРОЙКИ ══ */
.settings-page{max-width:480px;margin:0 auto;padding:16px 14px 100px}
.wallet-page{max-width:560px;margin:0 auto;padding:16px 14px 100px}
.settings-section{margin-bottom:20px}
.settings-section-title{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;padding:0 4px;margin-bottom:8px}
.settings-card{background:var(--bg1);border:1px solid var(--br);border-radius:16px;overflow:hidden}
.settings-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--br);cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent}
.settings-item:last-child{border-bottom:none}
.settings-item:hover{background:var(--bg2)}
.si-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.si-info{flex:1;min-width:0}
.si-title{font-size:14px;font-weight:600}
.si-sub{font-size:12px;color:var(--t3);margin-top:2px}
.si-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.si-arrow{color:var(--t3);font-size:14px}
.si-value{font-size:12px;color:var(--t2)}
.toggle{width:44px;height:24px;border-radius:12px;background:var(--bg3);border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--acc)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.toggle.on::after{transform:translateX(20px)}
.edit-modal-bg{position:fixed;inset:0;z-index:800;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.edit-modal-bg.open{display:flex;animation:fadeUp .2s ease}
.edit-modal{background:var(--bg1);border-radius:24px 24px 0 0;border-top:1px solid var(--br);width:100%;max-width:480px;padding:20px 20px 40px;animation:slideUp .3s cubic-bezier(.34,1.2,.64,1)}
.em-handle{width:36px;height:4px;background:var(--bg3);border-radius:2px;margin:0 auto 16px}
.em-title{font-size:16px;font-weight:800;margin-bottom:16px}
.em-input{width:100%;background:var(--bg2);border:1.5px solid var(--br);color:var(--t1);border-radius:12px;padding:12px 14px;font-family:'Inter',sans-serif;font-size:15px;outline:none;transition:border-color .2s;margin-bottom:14px}
.em-input:focus{border-color:var(--acc)}
.em-btn{width:100%;background:var(--acc);border:none;color:#fff;padding:13px;border-radius:12px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;transition:opacity .18s}
.em-btn:hover{opacity:.88}
.em-cancel{width:100%;background:transparent;border:1px solid var(--br);color:var(--t2);padding:11px;border-radius:12px;cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;margin-top:8px;transition:all .15s}

/* ══ КОШЕЛЁК ══ */
.wallet-balance-card{
  background:linear-gradient(135deg,#1a0a2e,#2d0a1a,#1a0a1e);
  border:1px solid rgba(230,61,111,.2);
  border-radius:20px;padding:24px;margin-bottom:16px;
  position:relative;overflow:hidden;
}
.wallet-balance-card::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,61,111,.15),transparent);
  pointer-events:none;
}
.wbc-label{font-size:12px;color:var(--t2);font-weight:500;margin-bottom:6px}
.wbc-amount{font-size:42px;font-weight:900;letter-spacing:-1px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.wbc-coin{font-size:28px}
.wbc-rub{font-size:14px;color:var(--t2);font-weight:500;margin-bottom:16px}
.wbc-btns{display:flex;gap:8px}
.wbc-btn{flex:1;padding:10px;border-radius:12px;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;font-size:13px;transition:all .18s}
.wbc-btn-add{background:var(--acc);color:#fff;box-shadow:0 4px 16px rgba(230,61,111,.3)}
.wbc-btn-add:hover{opacity:.88}
.wbc-btn-out{background:rgba(255,255,255,.08);color:var(--t1);border:1px solid rgba(255,255,255,.12)}
.wbc-btn-out:hover{background:rgba(255,255,255,.13)}

/* Пакеты пополнения */
.topup-section{margin-bottom:20px}
.topup-title{font-size:15px;font-weight:700;margin-bottom:12px}
.topup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.topup-pkg{
  background:var(--bg1);border:1.5px solid var(--br);
  border-radius:14px;padding:12px 8px;text-align:center;
  cursor:pointer;transition:all .2s;position:relative;
}
.topup-pkg:hover{border-color:var(--acc);transform:translateY(-2px)}
.topup-pkg.selected{border-color:var(--acc);background:var(--accG)}
.topup-pkg.popular::before{
  content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--acc);color:#fff;font-size:9px;font-weight:800;
  padding:2px 8px;border-radius:10px;white-space:nowrap;
}
.topup-coins{font-size:22px;font-weight:900;margin-bottom:2px}
.topup-bonus{font-size:10px;color:var(--green);font-weight:700;margin-bottom:4px;min-height:14px}
.topup-price{font-size:13px;color:var(--t2);font-weight:500}

/* Кастомная сумма */
.topup-custom{
  background:var(--bg1);border:1.5px solid var(--br);
  border-radius:14px;padding:14px;margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.topup-custom-lbl{font-size:13px;font-weight:600;color:var(--t2);white-space:nowrap}
.topup-custom-inp{
  flex:1;background:var(--bg2);border:1px solid var(--br);
  color:var(--t1);border-radius:9px;padding:8px 12px;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:700;
  outline:none;transition:border-color .2s;
}
.topup-custom-inp:focus{border-color:var(--acc)}
.topup-custom-coins{font-size:13px;color:var(--acc);font-weight:700;white-space:nowrap}

/* Способы оплаты */
.pay-methods{margin-bottom:16px}
.pay-title{font-size:15px;font-weight:700;margin-bottom:10px}
.pay-list{display:flex;flex-direction:column;gap:6px}
.pay-item{
  background:var(--bg1);border:1.5px solid var(--br);
  border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:all .18s;
}
.pay-item:hover{border-color:rgba(255,255,255,.15)}
.pay-item.selected{border-color:var(--acc);background:var(--accG)}
.pay-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.pay-name{font-weight:600;font-size:14px}
.pay-desc{font-size:11px;color:var(--t3);margin-top:1px}
.pay-check{margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--br);display:flex;align-items:center;justify-content:center;transition:all .18s;flex-shrink:0}
.pay-item.selected .pay-check{background:var(--acc);border-color:var(--acc);color:#fff;font-size:11px}

/* Кнопка оплаты */
.pay-btn{
  width:100%;background:linear-gradient(135deg,var(--acc),#c2185b);
  border:none;color:#fff;padding:15px;border-radius:14px;
  font-family:'Inter',sans-serif;font-weight:800;font-size:16px;
  cursor:pointer;transition:opacity .18s,transform .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 24px rgba(230,61,111,.35);
  margin-bottom:12px;
}
.pay-btn:hover{opacity:.9}
.pay-btn:active{transform:scale(.98)}
.pay-note{text-align:center;font-size:11px;color:var(--t3);display:flex;align-items:center;justify-content:center;gap:5px}

/* История */
.history-list{display:flex;flex-direction:column;gap:6px}
.history-item{
  background:var(--bg1);border:1px solid var(--br);
  border-radius:11px;padding:11px 13px;
  display:flex;align-items:center;gap:10px;
}
.hist-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.hist-info{flex:1;min-width:0}
.hist-title{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-date{font-size:11px;color:var(--t3);margin-top:2px}
.hist-amount{font-weight:800;font-size:15px;flex-shrink:0}

@media(max-width:640px){
  .topup-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .topup-coins{font-size:18px}
  .wbc-amount{font-size:34px}
}
.profile-page{max-width:680px;margin:0 auto;padding:24px 16px 80px}
/* Кликабельная обложка */
.prof-cover{
  height:160px;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,#1a0a1e,#2d0a1a);
  position:relative;margin-bottom:0;
}
.prof-cover::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 60%,rgba(230,61,111,.25),transparent 60%)}
.prof-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

/* Аватар профиля */
.prof-top{display:flex;align-items:flex-end;justify-content:space-between;margin-top:-62px;padding:0 4px;margin-bottom:14px;position:relative;z-index:8}
.prof-ava-wrap{position:relative;cursor:pointer}
.prof-ava{width:116px;height:116px;border-radius:50%;object-fit:cover;object-position:top;border:4px solid var(--bg);box-shadow:0 0 0 2.5px var(--acc);transition:all .2s}
.prof-ava-wrap:hover .prof-ava{box-shadow:0 0 0 4px var(--acc),0 0 22px var(--accG)}
.prof-ava-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--acc);opacity:.35;animation:ring 2.5s ease-in-out infinite}
.prof-name{font-weight:800;font-size:22px;letter-spacing:-.3px;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prof-username{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:14px;
}
.prof-username-tag{
  background:var(--accG);border:1px solid rgba(230,61,111,.3);
  color:var(--acc);font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:20px;
}
.prof-country-tag{
  background:var(--bg2);border:1px solid var(--br);
  color:var(--t2);font-size:12px;font-weight:500;
  padding:3px 10px;border-radius:20px;
}
.prof-bio{font-size:13px;color:var(--t2);margin-bottom:12px;line-height:1.5}
.prof-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-bottom:16px}
.ps-card{background:var(--bg1);border:1px solid var(--br);border-radius:10px;padding:10px 8px;text-align:center}
.ps-icon{font-size:18px;margin-bottom:3px}
.ps-val{font-weight:800;font-size:17px}
.ps-lbl{font-size:10px;color:var(--t3)}
.prof-elo-block{background:var(--bg1);border:1px solid var(--br);border-radius:12px;padding:13px 15px;margin-bottom:16px}
.peb-top{display:flex;justify-content:space-between;margin-bottom:7px;font-size:13px;font-weight:600}
.peb-bar{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.peb-fill{height:100%;background:linear-gradient(90deg,var(--acc),#f472b6);border-radius:2px;transition:width .8s ease}
.peb-sub{font-size:11px;color:var(--t3);margin-top:5px;text-align:right}
/* Trophy icon in level bar */
.trophy-icon{width:20px;height:20px;vertical-align:middle;margin-right:4px;object-fit:contain}
/* Trophy collection block */
.prof-trophies-block{background:var(--bg1);border:1px solid var(--br);border-radius:12px;padding:13px 15px;margin-bottom:16px}
.ptb-header{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--t1)}
.prof-trophies{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ptr-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:70px;transition:transform .2s,opacity .2s}
.ptr-item img{width:48px;height:48px;object-fit:contain;transition:filter .2s}
.ptr-item .ptr-name{font-size:10px;font-weight:600;color:var(--t2);text-align:center}
.ptr-item.locked{opacity:.3}
.ptr-item.locked img{filter:grayscale(1) brightness(.5)}
.ptr-item.unlocked{opacity:1}
.ptr-item.unlocked:hover{transform:scale(1.12)}
/* Popup trophies */
.pp-trophies{display:flex;gap:6px;justify-content:center;margin-top:8px}
.pp-trophy{width:28px;height:28px;transition:transform .2s}
.pp-trophy img{width:100%;height:100%;object-fit:contain}
.pp-trophy.locked{opacity:.25;filter:grayscale(1)}
.pp-trophy.unlocked:hover{transform:scale(1.2)}
.prof-section-title{font-weight:700;font-size:15px;margin-bottom:10px}
.prof-battles{display:flex;flex-direction:column;gap:7px}

/* ═══ Мои батлы в профиле ═══ */
.my-battles-tabs{
  display:flex;gap:6px;margin-bottom:12px;
  background:var(--bg1);
  border:1px solid var(--br);
  border-radius:12px;
  padding:4px;
}
.mb-tab{
  flex:1;
  background:transparent;
  border:none;
  color:var(--t2);
  padding:8px 12px;border-radius:9px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;
  cursor:pointer;
  transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.mb-tab:hover{color:var(--t1)}
.mb-tab.active{background:var(--acc);color:#fff;box-shadow:0 4px 12px rgba(230,61,111,.3)}
.mb-count{
  background:rgba(255,255,255,.15);
  padding:1px 7px;border-radius:8px;font-size:10px;
  font-weight:800;min-width:18px;text-align:center;
}
.mb-tab:not(.active) .mb-count{background:var(--bg3);color:var(--t1)}

.mb-list{display:flex;flex-direction:column;gap:10px}

.mb-item{
  background:var(--bg1);
  border:1px solid var(--br);
  border-radius:14px;
  padding:12px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  cursor:pointer;
  transition:all .2s;
  position:relative;
}
.mb-item:hover{
  border-color:rgba(230,61,111,.4);
  background:rgba(230,61,111,.04);
  transform:translateY(-1px);
}

.mb-photos{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
  position:relative;
}
.mb-photo{
  width:46px;height:60px;
  border-radius:8px;
  object-fit:cover;
  background:var(--bg2);
}
.mb-photo.mb-waiting{
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--t3);
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1.5px dashed var(--br);
}
.mb-vs{
  font-size:9px;font-weight:900;
  background:var(--bg2);
  color:var(--t2);
  padding:2px 5px;border-radius:6px;
  border:1px solid var(--br);
  letter-spacing:.02em;
}

.mb-info{
  min-width:0;
  display:flex;flex-direction:column;gap:3px;
}
.mb-names{
  font-size:13px;font-weight:700;color:var(--t1);
  display:flex;align-items:center;gap:5px;
  overflow:hidden;
}
.mb-name-a,.mb-name-b{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:90px;
}
.mb-vs-sep{font-size:10px;color:var(--t3);font-weight:500;flex-shrink:0}
.mb-stats{
  font-size:11px;color:var(--t2);
  display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;
}
.mb-pct-a{color:#22c55e;font-weight:700}
.mb-pct-b{color:#ec4899;font-weight:700}
.mb-time{color:#fbbf24;font-weight:600}
.mb-winner{
  background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.08));
  border:1px solid rgba(34,197,94,.3);
  color:#22c55e;
  padding:2px 8px;border-radius:8px;font-weight:700;font-size:10px;
}
.mb-winner.mb-tie{
  background:rgba(251,191,36,.15);
  border-color:rgba(251,191,36,.3);
  color:#fbbf24;
}
.mb-code{
  font-size:10px;color:var(--t3);
  font-family:'Inter',monospace;
  letter-spacing:.04em;font-weight:600;
}

.mb-delete{
  background:rgba(248,113,113,.1);
  border:1px solid rgba(248,113,113,.2);
  color:#f87171;
  width:34px;height:34px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all .2s;
  flex-shrink:0;
}
.mb-delete:hover{
  background:rgba(248,113,113,.2);
  border-color:rgba(248,113,113,.4);
  transform:scale(1.05);
}

@media(max-width:500px){
  .mb-item{padding:10px;gap:10px}
  .mb-photo{width:40px;height:52px}
  .mb-names{font-size:12px}
  .mb-name-a,.mb-name-b{max-width:70px}
  .mb-stats{font-size:10px;gap:6px}
  .mb-delete{width:30px;height:30px}
}

/* Реферальный блок */
.ref-block{
  background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(230,61,111,.07));
  border:1px solid rgba(139,92,246,.25);
  border-radius:14px;padding:16px;margin-bottom:16px;
}
.ref-block-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ref-block-icon{width:42px;height:42px;border-radius:12px;background:rgba(139,92,246,.15);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ref-block-title{font-weight:800;font-size:15px;margin-bottom:2px}
.ref-block-sub{font-size:12px;color:var(--t2)}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ref-stat{background:rgba(0,0,0,.2);border-radius:10px;padding:9px 8px;text-align:center}
.ref-stat-val{font-size:18px;font-weight:800;color:#c4b5fd}
.ref-stat-lbl{font-size:10px;color:var(--t3);margin-top:2px}
.ref-link-wrap{background:rgba(0,0,0,.25);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ref-link-text{flex:1;font-size:12px;color:var(--t2);font-family:'Inter',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color .2s}
.ref-link-text:hover{color:var(--acc);text-decoration:underline}
.ref-link-copy{background:var(--acc);border:none;color:#fff;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;transition:opacity .15s;flex-shrink:0}
.ref-link-copy:hover{opacity:.85}
.ref-link-copy.copied{background:var(--green)}
.ref-share-btns{display:flex;gap:6px;flex-wrap:wrap}
.ref-share-btn{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:10px;border:none;cursor:pointer;font-size:12px;font-weight:600;font-family:'Inter',sans-serif;color:#fff;transition:opacity .15s;flex:1;justify-content:center}
.ref-share-btn:hover{opacity:.85}
.pb-row{background:var(--bg1);border:1px solid var(--br);border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:10px}
.pb-photo{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0}
.pb-info{flex:1;min-width:0}
.pb-title{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-meta{font-size:11px;color:var(--t3);margin-top:2px}
.pb-result{font-weight:800;font-size:14px;flex-shrink:0}
.rating-inner{max-width:700px;margin:0 auto;padding:20px 14px 28px}
.rating-head{margin-bottom:16px}
.rating-head h2{font-weight:800;font-size:20px;letter-spacing:-.3px;margin-bottom:3px}
.rating-head p{font-size:13px;color:var(--t2);font-weight:400}
.period-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--bg1);border:1px solid var(--br);border-radius:10px;padding:4px}
.period-tab{flex:1;background:transparent;border:none;color:var(--t2);padding:7px;border-radius:7px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:500;font-size:13px;transition:all .13s}
.period-tab.active{background:var(--bg3);color:var(--t1);font-weight:600}
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:18px;align-items:flex-end}
.pod-card{display:flex;flex-direction:column;align-items:center;gap:5px}
.pod-crown{font-size:17px}
.pod-photo{border-radius:50%;object-fit:cover;object-position:top;border:2.5px solid currentColor}
.pod-name{font-weight:700;font-size:12px;color:inherit;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:82px}
.pod-elo{font-weight:800;font-size:14px}
.pod-base{width:100%;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px}
.rating-list{display:flex;flex-direction:column;gap:7px}
.rating-row{background:var(--bg1);border:1px solid var(--br);border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:11px;transition:border-color .15s;cursor:pointer}
.rating-row:hover{border-color:rgba(230,61,111,.3)}

/* ═══ LIVE VOTE FEED ═══ */
.vote-feed{
  margin:18px 0 22px;
  padding:14px 14px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(20,14,30,.65), rgba(14,9,22,.78));
  box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.vf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 4px}
.vf-title{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:13px;color:var(--t1);
  letter-spacing:-.01em;
}
.vf-live-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 8px #22c55e, 0 0 14px rgba(34,197,94,.5);
  animation:vfDot 1.4s ease-in-out infinite;
}
@keyframes vfDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
.vf-count{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:11px;color:var(--t2);font-weight:500;
  letter-spacing:.02em;
}

.vf-list{
  display:flex;flex-direction:column;gap:1px;
  padding:0 4px 4px;
  scroll-behavior:smooth;
  /* Свёрнутое состояние — 6 записей, прокрутка не нужна,
     поэтому и затемнения сверху здесь нет */
  overflow:visible;
}
/* ─── Окно «Все действия» ─── */
.vfm-bg{
  position:fixed;inset:0;z-index:960;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:vfmFade .18s ease;
}
@keyframes vfmFade{from{opacity:0}to{opacity:1}}
.vfm-card{
  width:100%;max-width:440px;
  max-height:min(76vh, 640px);
  display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#1c1c25 0%,#141419 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  animation:vfmPop .26s cubic-bezier(.34,1.3,.64,1);
}
@keyframes vfmPop{from{transform:scale(.94) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.vfm-head{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.vfm-title{
  display:flex;align-items:center;gap:8px;
  font-size:15.5px;font-weight:800;color:var(--t1);letter-spacing:-.01em;
}
/* Пульсирующая точка — лента живая, обновляется на ходу */
.vfm-pulse{
  width:8px;height:8px;border-radius:50%;background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.6);
  animation:vfmPulse 2s infinite;
}
@keyframes vfmPulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}
  70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
.vfm-count{
  font-size:12px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#ec4899,#7c3aed);
  padding:2px 9px;border-radius:999px;
}
.vfm-list{
  flex:1;min-height:0;
  overflow-y:auto;
  padding:8px 10px 14px;
  -webkit-overflow-scrolling:touch;
}
.vfm-list::-webkit-scrollbar{width:5px}
.vfm-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
html[data-theme="light"] .vfm-card{
  background:linear-gradient(180deg,#fff 0%,#faf9fc 100%);
  border-color:rgba(0,0,0,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
html[data-theme="light"] .vfm-head{border-bottom-color:rgba(0,0,0,.07)}
@media(max-width:640px){
  .vfm-card{max-width:100%;max-height:82vh}
}

/* Кнопка «Все действия» под лентой */
.vf-more{
  margin:8px 4px 2px;padding:9px 12px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:var(--t2);
  font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.vf-more:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:var(--t1);
}
.vf-more-arw{font-size:11px;opacity:.75;line-height:1}
html[data-theme="light"] .vf-more{
  border-color:rgba(0,0,0,.09);
  background:rgba(0,0,0,.035);
}
html[data-theme="light"] .vf-more:hover{background:rgba(0,0,0,.07)}
.vf-list::-webkit-scrollbar{width:4px}
.vf-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

.vf-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  background:transparent;
  transition:background .15s;
  animation:vfSlideIn .35s cubic-bezier(.2,.7,.2,1) backwards;
}
.vf-item:hover{background:rgba(255,255,255,.03)}
@keyframes vfSlideIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

.vf-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#5b3aa0,#2d1f4a);
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;color:#fff;
  border:1.5px solid rgba(255,255,255,.10);
  flex-shrink:0;
}
.vf-text{
  font-size:13px;color:var(--t1);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
/* Цветная точка-индикатор стороны */
.vf-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
}
.vf-dot.pk{background:#ff5fb2;box-shadow:0 0 8px rgba(255,45,146,.6)}
.vf-dot.bl{background:#6fc1ff;box-shadow:0 0 8px rgba(58,155,255,.6)}
.vf-text b{color:#fff;font-weight:700}
/* Пустая лента */
.vf-empty{
  text-align:center;padding:16px;
  font-size:13px;color:var(--t3);
}
.vf-text .vf-voter{font-weight:600;color:var(--t1)}
.vf-text .vf-verb{color:var(--t2);font-weight:500}
.vf-text .vf-arrow{color:var(--t3);margin:0 4px}
.vf-text .vf-target.pk{color:#ff5fb2;font-weight:600}
.vf-text .vf-target.bl{color:#6fc1ff;font-weight:600}
.vf-time{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px;color:var(--t3);
  white-space:nowrap;
  letter-spacing:.02em;
}

/* fresh-item highlight */
.vf-item.fresh{
  background:linear-gradient(90deg, rgba(255,45,146,.08), rgba(58,155,255,.08));
  animation:vfFresh 1.6s ease-out, vfSlideIn .35s cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes vfFresh{
  0%{background:linear-gradient(90deg, rgba(255,45,146,.22), rgba(58,155,255,.22))}
  100%{background:transparent}
}

@media(max-width:768px){
  .vote-feed{padding:12px 10px 6px}
  .vf-text{font-size:12px}
  .vf-avatar{width:26px;height:26px;font-size:10px}
}

/* battle-page variant — wider container & subtle outer breathing room */
.battle-vote-feed{
  max-width:900px;
  margin:24px auto 0;
}

/* ═══ VOTE SCALE under the photos ═══ */
.vote-scale{
  max-width:680px;
  margin:14px auto 0;
  padding:10px 14px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(20,14,28,.55), rgba(14,9,22,.7));
  box-shadow:0 8px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.vs-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
}
.vs-side{
  display:flex;align-items:baseline;gap:6px;
  min-width:0;
}
.vs-side.r{justify-content:flex-end}
.vs-pct{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:15px;font-weight:700;line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.vs-side.l .vs-pct{color:#ff5fb2}
.vs-side.r .vs-pct{color:#6fc1ff}
.vs-lbl{
  font-size:11px;color:var(--t2);
  letter-spacing:.01em;font-weight:500;
  max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vs-track{
  position:relative;
  height:5px;border-radius:999px;
  background:rgba(255,255,255,.05);
  overflow:visible;
}
.vs-fill{
  position:absolute;top:0;height:100%;border-radius:999px;
  transition:width .7s cubic-bezier(.34,1.56,.64,1);
}
.vs-fill.l{
  left:0;
  background:linear-gradient(90deg,#ff2d92,#ff5fb2);
  box-shadow:0 0 8px rgba(255,45,146,.45);
}
.vs-fill.r{
  right:0;
  background:linear-gradient(270deg,#3a9bff,#6fc1ff);
  box-shadow:0 0 8px rgba(58,155,255,.45);
  opacity:.7;
}
.vs-spark{
  position:absolute;top:50%;
  width:12px;height:12px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.3) 35%, rgba(255,255,255,0) 70%);
  box-shadow:0 0 12px rgba(255,255,255,.6), 0 0 22px rgba(255,45,146,.45);
  pointer-events:none;
  transition:left .7s cubic-bezier(.34,1.56,.64,1);
  z-index:2;
}
.vs-total{
  margin-top:6px;
  text-align:center;
  font-size:11px;color:var(--t3);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.vs-total strong{color:var(--t2);font-weight:600}

@media(max-width:768px){
  .vote-scale{padding:8px 12px 6px;margin-top:10px;border-radius:12px}
  .vs-row{gap:8px}
  .vs-pct{font-size:13px}
  .vs-lbl{font-size:10px;max-width:60px}
}
@media(max-width:480px){
  .vs-pct{font-size:12px}
  .vs-lbl{font-size:9px;max-width:50px}
  .vs-track{height:4px}
  .vs-spark{width:10px;height:10px}
}

/* collapsible feed */
.vf-collapsible .vf-toggle{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  padding:8px 6px;
  border-radius:10px;
  transition:background .15s;
}
.vf-collapsible .vf-toggle:hover{background:rgba(255,255,255,.03)}
.vf-chevron{
  color:var(--t2);
  transition:transform .25s ease, color .15s;
  flex-shrink:0;
  margin-left:6px;
}
.vf-collapsible .vf-toggle:hover .vf-chevron{color:var(--t1)}
.vf-collapsible .vf-list{
  max-height:0;
  overflow:hidden;
  padding:0 4px;
  transition:max-height .35s cubic-bezier(.2,.7,.2,1), padding .25s, margin .25s;
  margin-top:0;
}
.vf-collapsible.open .vf-list{
  max-height:320px;
  padding:0 4px 4px;
  margin-top:6px;
}
.vf-collapsible.open .vf-chevron{transform:rotate(180deg);color:#ff5fb2}
/* keep collapsed feed compact */
.vf-collapsible:not(.open){padding-bottom:6px}
.vf-collapsible:not(.open) .vf-head{margin-bottom:0}

/* ═══ SKELETON LOADING for rating ═══ */@keyframes skShimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.sk-line, .sk-circle{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.10) 25%,
      rgba(255,45,146,.14) 50%,
      rgba(58,155,255,.10) 75%,
      rgba(255,255,255,.04) 100%);
  background-size:200% 100%;
  animation:skShimmer 1.6s linear infinite;
  border-radius:6px;
  display:block;
}
.sk-circle{border-radius:50%}

.pod-skel{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  pointer-events:none;
}
.pod-photo-skel{
  width:64px;height:64px;border-radius:50%;
  border:2px solid rgba(255,255,255,.06);
}
.pod-base-skel{
  width:100%;
  border-radius:8px 8px 0 0;
  margin-top:4px;
}

.sk-row{
  pointer-events:none;
  border-color:rgba(255,255,255,.05);
  background:rgba(20,14,30,.45);
  opacity:.85;
}
.sk-row:hover{border-color:rgba(255,255,255,.05)}

/* fade out skeleton once real content is rendered */
.sk-row, .pod-skel{
  animation:skShimmerFade 1.6s linear infinite, skSlideIn .35s ease-out backwards;
}
.sk-row:nth-child(1){animation-delay:0s, 0s}
.sk-row:nth-child(2){animation-delay:0s, .05s}
.sk-row:nth-child(3){animation-delay:0s, .1s}
.sk-row:nth-child(4){animation-delay:0s, .15s}
.sk-row:nth-child(5){animation-delay:0s, .2s}
.sk-row:nth-child(6){animation-delay:0s, .25s}
@keyframes skSlideIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:.85;transform:none}
}
@keyframes skShimmerFade{
  0%,100%{opacity:.85}
  50%{opacity:1}
}

.sk-loading-hint{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:18px;padding:14px;
  color:var(--t2);font-size:13px;font-weight:500;
  letter-spacing:-.01em;
}
.sk-bolt-spinner{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(255,45,146,.18), rgba(58,155,255,.18));
  border:1px solid rgba(255,45,146,.35);
  color:#ff5fb2;
  animation:boltSpin 1.4s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(255,45,146,.5));
}
@keyframes boltSpin{
  0%,100%{transform:rotate(0) scale(1);color:#ff5fb2;border-color:rgba(255,45,146,.4);filter:drop-shadow(0 0 12px rgba(255,45,146,.5))}
  50%{transform:rotate(20deg) scale(1.12);color:#6fc1ff;border-color:rgba(58,155,255,.5);filter:drop-shadow(0 0 16px rgba(58,155,255,.6))}
}
.rating-row.top1{border-color:rgba(245,183,49,.3);box-shadow:0 0 12px rgba(245,183,49,.07)}
.rr-pos{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.rr-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0;border:2px solid var(--br)}
.rr-info{flex:1;min-width:0}
.rr-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-meta{font-size:11px;color:var(--t3);font-weight:400;margin-top:2px;display:flex;gap:7px;flex-wrap:wrap}
.rr-bar{height:2px;background:var(--bg3);border-radius:1px;overflow:hidden;margin-top:5px}
.rr-bar-fill{height:100%;background:var(--acc);border-radius:1px}
.rr-elo{text-align:right;flex-shrink:0}
.rr-elo-val{font-weight:800;font-size:16px}
.rr-elo-lbl{font-size:9px;color:var(--t3)}

/* ════════════════════════════════
   МОДАЛКА — ЗАГРУЗКА + КРОППЕР
════════════════════════════════ */
/* ═══ FULLSCREEN MODAL — выбор режима батла ═══ */
.pmodal-bg{position:fixed;inset:0;background:rgba(0,2,8,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:500;display:none;align-items:flex-end;justify-content:center;padding:0;animation:pmFade .35s cubic-bezier(.34,1.2,.64,1)}
.pmodal-bg.open{display:flex}
@keyframes pmFade{from{opacity:0}to{opacity:1}}
@keyframes pmSlide{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pmGlowBlue{0%,100%{box-shadow:0 0 30px rgba(59,130,246,.25),0 0 60px rgba(59,130,246,.12),inset 0 0 0 1px rgba(255,255,255,.06)}50%{box-shadow:0 0 50px rgba(59,130,246,.45),0 0 90px rgba(59,130,246,.2),inset 0 0 0 1px rgba(255,255,255,.1)}}
@keyframes pmGlowPink{0%,100%{box-shadow:0 0 30px rgba(230,61,111,.25),0 0 60px rgba(230,61,111,.12),inset 0 0 0 1px rgba(255,255,255,.06)}50%{box-shadow:0 0 50px rgba(230,61,111,.45),0 0 90px rgba(230,61,111,.2),inset 0 0 0 1px rgba(255,255,255,.1)}}
@keyframes pmPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes pmShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes pmSpin{to{transform:rotate(360deg)}}

.pmodal{position:relative;width:100%;max-width:560px;max-height:96vh;overflow-y:auto;background:linear-gradient(180deg,rgba(15,20,35,.96) 0%,rgba(8,10,20,.99) 100%);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:28px 28px 0 0;border:1px solid rgba(59,130,246,.15);border-bottom:none;padding:20px 20px 100px;animation:pmSlide .45s cubic-bezier(.34,1.2,.64,1);scrollbar-width:none}
.pmodal::-webkit-scrollbar{display:none}
.pmodal::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 20%,rgba(59,130,246,.6) 50%,transparent 80%)}

.pm-pull{width:48px;height:5px;background:rgba(255,255,255,.15);border-radius:3px;margin:0 auto 16px}

.pm-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:12px}
.pm-title-wrap{flex:1;min-width:0}
.pm-title{font-size:26px;font-weight:900;letter-spacing:-.5px;background:linear-gradient(135deg,#fff 0%,#dbeafe 50%,#60a5fa 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:5px;line-height:1.1}
.pm-sub{font-size:14px;color:rgba(255,255,255,.55);font-weight:500;line-height:1.4}
.pm-close{flex-shrink:0}
.pm-close:hover{}

/* Карточки выбора режима */
.pm-modes{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.pm-mode{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.02) 100%);border:1.5px solid rgba(255,255,255,.08);border-radius:22px;padding:20px;cursor:pointer;transition:all .35s cubic-bezier(.34,1.2,.64,1);overflow:hidden;backdrop-filter:blur(20px)}
.pm-mode::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.04) 50%,transparent 70%);transform:translateX(-100%);transition:transform .8s;pointer-events:none}
.pm-mode:hover{transform:translateY(-2px)}
.pm-mode:hover::before{transform:translateX(100%)}

.pm-mode.mode-blue:hover{border-color:rgba(59,130,246,.5);background:linear-gradient(135deg,rgba(59,130,246,.08) 0%,rgba(59,130,246,.02) 100%);box-shadow:0 16px 48px rgba(59,130,246,.25),0 0 0 1px rgba(59,130,246,.2) inset}
.pm-mode.mode-pink:hover{border-color:rgba(230,61,111,.5);background:linear-gradient(135deg,rgba(230,61,111,.08) 0%,rgba(230,61,111,.02) 100%);box-shadow:0 16px 48px rgba(230,61,111,.25),0 0 0 1px rgba(230,61,111,.2) inset}
.pm-mode.mode-purple:hover{border-color:rgba(168,85,247,.5);background:linear-gradient(135deg,rgba(168,85,247,.08) 0%,rgba(168,85,247,.02) 100%);box-shadow:0 16px 48px rgba(168,85,247,.25),0 0 0 1px rgba(168,85,247,.2) inset}

.pm-mode-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.pm-mode-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .35s}
.pm-mode.mode-blue .pm-mode-icon{background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(59,130,246,.08));border:1px solid rgba(59,130,246,.3);box-shadow:0 8px 24px rgba(59,130,246,.2)}
.pm-mode.mode-pink .pm-mode-icon{background:linear-gradient(135deg,rgba(230,61,111,.25),rgba(230,61,111,.08));border:1px solid rgba(230,61,111,.3);box-shadow:0 8px 24px rgba(230,61,111,.2)}
.pm-mode.mode-purple .pm-mode-icon{background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(168,85,247,.08));border:1px solid rgba(168,85,247,.3);box-shadow:0 8px 24px rgba(168,85,247,.2)}
.pm-mode:hover .pm-mode-icon{transform:scale(1.08) rotate(-6deg)}
.pm-mode.mode-blue:hover .pm-mode-icon{animation:pmGlowBlue 2.5s ease infinite}
.pm-mode.mode-pink:hover .pm-mode-icon{animation:pmGlowPink 2.5s ease infinite}
.pm-mode-icon svg{width:26px;height:26px}
.pm-mode.mode-blue .pm-mode-icon svg{stroke:#60a5fa}
.pm-mode.mode-pink .pm-mode-icon svg{stroke:#ff5a8a}
.pm-mode.mode-purple .pm-mode-icon svg{stroke:#c084fc}

.pm-mode-title{font-size:18px;font-weight:900;color:#fff;letter-spacing:-.3px}
.pm-mode-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55;margin-bottom:14px}

/* Mini preview VS */
.pm-vs-preview{display:flex;align-items:center;gap:8px;margin-bottom:14px;justify-content:center}
.pm-vs-card{width:60px;height:80px;border-radius:10px;background:linear-gradient(135deg,rgba(230,61,111,.15),rgba(230,61,111,.05));border:1px solid rgba(230,61,111,.25);position:relative;overflow:hidden;animation:pmFloat 3s ease infinite}
.pm-vs-card:nth-child(3){animation-delay:.5s}
.pm-vs-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 50%)}
.pm-vs-divider{font-size:16px;font-weight:900;color:#ff5a8a;letter-spacing:-1px;text-shadow:0 0 16px rgba(230,61,111,.6)}

/* Mini preview "Найти соперника" — одно фото + знак вопроса */
.pm-find-preview{display:flex;align-items:center;gap:8px;margin-bottom:14px;justify-content:center}
.pm-find-card{width:60px;height:80px;border-radius:10px;background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.05));border:1px solid rgba(59,130,246,.25);position:relative;overflow:hidden;animation:pmFloat 3s ease infinite}
.pm-find-card.unknown{background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border-style:dashed;border-color:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:24px;color:rgba(255,255,255,.4);animation-delay:.5s}
.pm-find-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 50%)}
.pm-find-card.unknown::after{display:none}

.pm-mode-btn{width:100%;padding:13px;border:none;border-radius:14px;font-family:'Inter',sans-serif;font-weight:800;font-size:14px;letter-spacing:.2px;cursor:pointer;transition:all .25s;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden}
.pm-mode-btn.btn-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 8px 24px rgba(59,130,246,.35)}
.pm-mode-btn.btn-pink{background:linear-gradient(135deg,#e63d6f,#c2185b);box-shadow:0 8px 24px rgba(230,61,111,.35)}
.pm-mode-btn.btn-purple{background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 8px 24px rgba(168,85,247,.35)}
.pm-mode-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s}
.pm-mode:hover .pm-mode-btn::after{transform:translateX(100%)}
.pm-mode-btn:hover{transform:translateY(-1px)}
.pm-mode-btn.btn-blue:hover{box-shadow:0 12px 32px rgba(59,130,246,.5)}
.pm-mode-btn.btn-pink:hover{box-shadow:0 12px 32px rgba(230,61,111,.5)}
.pm-mode-btn.btn-purple:hover{box-shadow:0 12px 32px rgba(168,85,247,.5)}

/* ═══ Слайдер времени ═══ */
.pm-duration{background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:18px;margin-bottom:8px;backdrop-filter:blur(20px)}
.pm-dur-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pm-dur-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#fff}
.pm-dur-value{font-size:18px;font-weight:900;background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.3px;min-width:80px;text-align:right}

/* ═══ Чипы времени ═══ */
/* ── Раскрывающийся блок "Время батла" ── */
.pm-dur-collapse{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:12px;
}
.pm-dur-toggle{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;
  color:var(--t1);
}
.pm-dur-toggle > span{color:var(--t1);font-weight:700;font-size:14.5px}
.pm-dur-toggle [data-i="pm_dur_title"]{color:var(--t1);font-weight:700;font-size:14.5px}
.pm-dur-toggle-val{color:var(--acc);font-weight:800;font-size:14px}
.pm-dur-arrow{color:var(--t3);font-size:13px;transition:transform .25s ease}
.pm-dur-collapse.open .pm-dur-arrow{transform:rotate(180deg)}
.pm-dur-body{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  padding:0 16px;
}
.pm-dur-collapse.open .pm-dur-body{
  max-height:240px;
  padding:0 16px 16px;
}
/* Блок времени батла всегда раскрыт */
.pm-dur-body{
  max-height:none!important;
  overflow:visible!important;
  padding:0 16px 16px!important;
}
.pm-dur-toggle{cursor:default}
.pm-dur-arrow{display:none}
/* ── Предупреждение перед созданием батла ── */
.pm-warning{
  display:flex;align-items:flex-start;gap:9px;
  background:rgba(251,191,36,.07);
  border:1px solid rgba(251,191,36,.22);
  border-radius:13px;
  padding:12px 14px;
  margin-bottom:14px;
  color:#fcd34d;
  font-size:12.5px;line-height:1.45;
}
.pm-warning svg{flex-shrink:0;margin-top:1px}
.pm-dur-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pm-dur-chip{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:11px 4px 9px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1.5px solid rgba(255,255,255,.08);
  border-radius:14px;
  cursor:pointer;
  font-family:inherit;
  transition:transform .18s cubic-bezier(.34,1.4,.5,1),border-color .18s,background .18s,box-shadow .2s;
  overflow:visible;
}
.pm-dur-chip:hover{
  transform:translateY(-2px);
  border-color:rgba(96,165,250,.5);
  background:linear-gradient(180deg,rgba(96,165,250,.12),rgba(96,165,250,.03));
}
.pm-dur-chip:active{transform:translateY(0) scale(.96)}
.pm-dur-chip .pdc-n{
  font-size:20px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.pm-dur-chip .pdc-u{font-size:10px;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.01em}
.pm-dur-chip.active{
  border-color:transparent;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 8px 22px rgba(139,92,246,.42),inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateY(-2px);
}
.pm-dur-chip.active .pdc-n{color:#fff}
.pm-dur-chip.active .pdc-u{color:rgba(255,255,255,.85)}

/* ═══ Светлая тема: читаемость окна создания VS ═══ */
/* Заголовок — фирменный градиент (был бел→голубой, невидим на белом) */
html[data-theme="light"] .pm-title{
  background:linear-gradient(135deg,#e63d6f 0%,#8b5cf6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
html[data-theme="light"] .pm-sub{color:#5b6472}
/* Кнопка создания в неактивном состоянии — видимый серый вместо прозрачно-белого */
html[data-theme="light"] .pm-cta:disabled{
  background:#e9ecf2;
  color:#9aa3b2;
  box-shadow:none;
}
/* Блок «Время батла» */
html[data-theme="light"] .pm-dur-collapse{background:#f6f7fb;border-color:#e5e8f0}
html[data-theme="light"] .pm-dur-chip{
  background:#fff;
  border-color:#e5e8f0;
  box-shadow:0 1px 3px rgba(20,30,60,.05);
}
html[data-theme="light"] .pm-dur-chip .pdc-n{color:#1a2233}
html[data-theme="light"] .pm-dur-chip .pdc-u{color:#8a93a5}
html[data-theme="light"] .pm-dur-chip:hover{
  border-color:#c4b5fd;
  background:#faf5ff;
}
html[data-theme="light"] .pm-dur-chip.active{
  border-color:transparent;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
}
html[data-theme="light"] .pm-dur-chip.active .pdc-n,
html[data-theme="light"] .pm-dur-chip.active .pdc-u{color:#fff}
html[data-theme="light"] .pm-dur-toggle-val{color:#e63d6f}

/* ═══ Слайдер времени батла ═══ */
.pm-dur-slider{padding:8px 4px 2px}
.pm-dur-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:8px;border-radius:6px;margin:0;
  background:
    linear-gradient(90deg,#e63d6f,#8b5cf6) 0/var(--pmdur-pct,66.6%) 100% no-repeat,
    rgba(255,255,255,.12);
  outline:none;cursor:pointer;
}
.pm-dur-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid #8b5cf6;
  box-shadow:0 3px 10px rgba(139,92,246,.5);
  cursor:pointer;transition:transform .12s;
}
.pm-dur-range::-webkit-slider-thumb:active{transform:scale(1.15)}
.pm-dur-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid #8b5cf6;
  box-shadow:0 3px 10px rgba(139,92,246,.5);cursor:pointer;
}
.pm-dur-range::-moz-range-track{height:8px;border-radius:6px;background:transparent}
.pm-dur-ticks{display:flex;justify-content:space-between;margin-top:13px;padding:0 1px}
.pm-dur-ticks span{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-family:inherit;transition:color .15s,transform .15s;
}
.pm-dur-ticks b{font-size:14px;font-weight:800;color:rgba(255,255,255,.4);line-height:1;font-variant-numeric:tabular-nums}
.pm-dur-ticks i{font-size:9px;font-style:normal;color:rgba(255,255,255,.28);letter-spacing:.02em}
.pm-dur-ticks span.on b{color:#fff;transform:scale(1.18)}
.pm-dur-ticks span.on i{color:rgba(255,255,255,.75)}
/* Светлая тема */
html[data-theme="light"] .pm-dur-range{
  background:
    linear-gradient(90deg,#e63d6f,#8b5cf6) 0/var(--pmdur-pct,66.6%) 100% no-repeat,
    #e5e8f0;
}
html[data-theme="light"] .pm-dur-ticks b{color:#9aa3b2}
html[data-theme="light"] .pm-dur-ticks i{color:#b4bcc9}
html[data-theme="light"] .pm-dur-ticks span.on b{color:#1a2233}
html[data-theme="light"] .pm-dur-ticks span.on i{color:#5b6472}

/* Светлая тема: подложка окна «Начать батл» — прозрачно-матовая (была чёрной) */
html[data-theme="light"] .pmodal-bg{
  background:rgba(235,238,246,.55)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
/* Светлая тема: подсказка под фото (была белым текстом на белом) */
html[data-theme="light"] .pm-tip{
  background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(230,61,111,.05));
  border-color:rgba(139,92,246,.18);
  color:#5b6472;
}
.pm-dur-chip .pdc-badge{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-size:8.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  padding:2px 7px;border-radius:999px;color:#3a2300;
  background:linear-gradient(135deg,#ffe9a8,#ffd86a);
  box-shadow:0 3px 8px rgba(245,158,11,.4);
  opacity:0;transition:opacity .2s;
}
.pm-dur-chip.active .pdc-badge{opacity:1}


.pm-dur-slider-wrap{position:relative;padding:14px 0 8px}
.pm-dur-track{position:relative;height:8px;background:rgba(255,255,255,.06);border-radius:8px;overflow:visible}
.pm-dur-track-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#3b82f6 0%,#60a5fa 100%);border-radius:8px;transition:width .25s cubic-bezier(.34,1.2,.64,1);box-shadow:0 0 16px rgba(59,130,246,.5)}
.pm-dur-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;background:#fff;border-radius:50%;cursor:grab;box-shadow:0 0 0 4px rgba(59,130,246,.25),0 4px 16px rgba(59,130,246,.4);transition:transform .15s,box-shadow .25s;z-index:3}
.pm-dur-thumb:hover{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 6px rgba(59,130,246,.3),0 6px 20px rgba(59,130,246,.5)}
.pm-dur-thumb:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.05)}
.pm-dur-input{position:absolute;inset:-8px 0;width:100%;height:calc(100% + 16px);opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;margin:0;z-index:4}
.pm-dur-input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;cursor:pointer;background:transparent}
.pm-dur-input::-moz-range-thumb{width:32px;height:32px;cursor:pointer;background:transparent;border:none}

.pm-dur-marks{display:flex;justify-content:space-between;margin-top:14px;padding:0 2px}
.pm-dur-mark{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.02em;transition:color .25s;cursor:pointer;text-align:center;flex:1}
.pm-dur-mark.active{color:#60a5fa}

/* Photo cards (вторичная модалка) */
.pm-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.pm-slot{display:flex;flex-direction:column;gap:8px}

/* ═══ ФОТО-КРОППЕР ═══ */
.cropper-bg{
  position:fixed;inset:0;z-index:600;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,2,8,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .2s;
}
.cropper-bg.open{display:flex;opacity:1}
.cropper{
  width:100%;max-width:400px;
  background:linear-gradient(180deg,rgba(20,24,40,.98),rgba(12,14,26,.99));
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  padding:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  animation:cropIn .28s cubic-bezier(.34,1.4,.5,1);
}
@keyframes cropIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.cropper-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cropper-title{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.02em;display:flex;align-items:center;gap:7px}
.cropper-x{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.cropper-x:hover{background:rgba(255,255,255,.12)}

.cropper-stage{
  position:relative;
  width:100%;aspect-ratio:3/4;
  border-radius:18px;overflow:hidden;
  background:#05060c;
  touch-action:none;cursor:grab;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  user-select:none;-webkit-user-select:none;
}
.cropper-stage.grabbing{cursor:grabbing}
.cropper-img{
  position:absolute;top:0;left:0;
  max-width:none;max-height:none;
  will-change:transform;
  pointer-events:none;-webkit-user-drag:none;
}
/* сетка третей */
.cropper-grid{position:absolute;inset:0;pointer-events:none;opacity:.5}
.cropper-grid::before,.cropper-grid::after{
  content:"";position:absolute;background:rgba(255,255,255,.28)}
.cropper-grid::before{left:33.33%;right:33.33%;top:0;bottom:0;
  border-left:1px solid rgba(255,255,255,.28);border-right:1px solid rgba(255,255,255,.28);background:transparent}
.cropper-grid::after{top:33.33%;bottom:33.33%;left:0;right:0;
  border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28);background:transparent}
.cropper-ring{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(255,79,166,.6),inset 0 0 26px rgba(255,79,166,.2);border-radius:18px}

.cropper-zoom{display:flex;align-items:center;gap:12px;margin-top:16px}
.cropper-zbtn{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background .15s,transform .12s}
.cropper-zbtn:hover{background:rgba(255,255,255,.12)}
.cropper-zbtn:active{transform:scale(.92)}
.cropper-range{
  flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;
  background:linear-gradient(90deg,#ff4fa6,#7c3aed);
  outline:none;cursor:pointer}
.cropper-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;cursor:grab;
  box-shadow:0 0 0 4px rgba(124,58,237,.25),0 3px 10px rgba(0,0,0,.4)}
.cropper-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:none;cursor:grab;
  box-shadow:0 0 0 4px rgba(124,58,237,.25),0 3px 10px rgba(0,0,0,.4)}
.cropper-hint{text-align:center;font-size:11.5px;color:rgba(255,255,255,.4);margin-top:12px;font-weight:500}
.cropper-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:14px}
.cropper-btn{
  padding:13px;border-radius:14px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;
  border:none;transition:transform .12s,filter .15s,background .15s}
.cropper-btn:active{transform:scale(.97)}
.cropper-btn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff}
.cropper-btn.ghost:hover{background:rgba(255,255,255,.1)}
.cropper-btn.solid{
  background:linear-gradient(135deg,#ff4fa6,#7c3aed);color:#fff;
  box-shadow:0 8px 22px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.cropper-btn.solid:hover{filter:brightness(1.08)}
@media(max-width:480px){.cropper{max-width:340px;padding:14px}}

.pm-card{position:relative;aspect-ratio:3/4;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1.5px dashed rgba(230,61,111,.3);cursor:pointer;overflow:hidden;transition:all .3s cubic-bezier(.34,1.2,.64,1);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px}
.pm-card:hover{border-color:rgba(230,61,111,.7);transform:translateY(-2px);box-shadow:0 12px 40px rgba(230,61,111,.25)}
.pm-card.drag{border-color:#ff5a8a;border-style:solid;background:linear-gradient(135deg,rgba(230,61,111,.15),rgba(230,61,111,.05));box-shadow:0 0 40px rgba(230,61,111,.5)}
.pm-card.has-photo{border-style:solid;border-color:rgba(230,61,111,.5);padding:0;animation:pmGlowPink 3s ease-in-out infinite}
.pm-card input{display:none}
.pm-card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px}
.pm-card-shimmer{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);pointer-events:none}
.pm-card.has-photo .pm-card-shimmer{animation:pmShine 2.5s ease infinite}

.pm-card-icon{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,rgba(230,61,111,.25),rgba(230,61,111,.1));display:flex;align-items:center;justify-content:center;margin-bottom:10px;border:1px solid rgba(230,61,111,.3);transition:all .3s}
.pm-card:hover .pm-card-icon{transform:scale(1.1) rotate(-8deg)}
.pm-card-icon svg{width:22px;height:22px;stroke:#ff5a8a}
.pm-card-label{font-size:13px;font-weight:800;color:#fff;margin-bottom:3px;text-align:center}
.pm-card-hint{font-size:10px;color:rgba(255,255,255,.45);font-weight:500;text-align:center;line-height:1.4}

.pm-card-badge{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#e63d6f,#c2185b);color:#fff;font-size:9px;font-weight:800;padding:4px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 12px rgba(230,61,111,.4);z-index:2}
.pm-card-remove{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.15);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:3;backdrop-filter:blur(10px)}
.pm-card.has-photo .pm-card-remove{display:flex}
.pm-card-loading{position:absolute;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:4;border-radius:20px;backdrop-filter:blur(4px)}
.pm-card.loading .pm-card-loading{display:flex}
.pm-spinner{width:36px;height:36px;border:3px solid rgba(230,61,111,.2);border-top-color:#ff5a8a;border-radius:50%;animation:pmSpin .8s linear infinite}

.pm-slot-name{width:100%;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;color:#fff;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;text-align:center;outline:none;transition:all .25s;box-sizing:border-box}
.pm-slot-name::placeholder{color:rgba(255,255,255,.3);font-weight:500}
.pm-slot-name:focus{border-color:#e63d6f;background:rgba(230,61,111,.06);box-shadow:0 0 0 3px rgba(230,61,111,.15)}

.pm-tip{background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.02));border:1px solid rgba(59,130,246,.15);border-radius:14px;padding:10px 14px;font-size:12px;color:rgba(255,255,255,.65);text-align:center;margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:6px}

.pm-field{margin-bottom:16px;position:relative}
.pm-field-lbl{font-size:11px;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.pm-field-counter{color:rgba(255,255,255,.35);font-weight:600;font-size:10px;letter-spacing:0;text-transform:none}
.pm-field-counter.warn{color:#fbbf24}
.pm-field-counter.danger{color:#f87171}
.pm-inp{width:100%;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px;color:#fff;font-family:'Inter',sans-serif;font-size:15px;font-weight:500;outline:none;transition:all .25s;box-sizing:border-box}
.pm-inp::placeholder{color:rgba(255,255,255,.3)}
.pm-inp:focus{border-color:#e63d6f;background:rgba(230,61,111,.06);box-shadow:0 0 0 4px rgba(230,61,111,.12)}
.pm-textarea{resize:none;min-height:80px;line-height:1.5}

.pm-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;color:rgba(255,255,255,.55);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;padding:0;margin-bottom:14px;transition:color .2s}
.pm-back:hover{color:#fff}

.pm-cta{position:relative;width:100%;background:linear-gradient(135deg,#e63d6f 0%,#c2185b 100%);border:none;color:#fff;padding:18px;border-radius:18px;font-family:'Inter',sans-serif;font-weight:900;font-size:16px;letter-spacing:.3px;cursor:pointer;transition:all .3s cubic-bezier(.34,1.2,.64,1);overflow:hidden;box-shadow:0 8px 32px rgba(230,61,111,.4);margin-top:8px}
.pm-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);transition:transform .8s}
.pm-cta:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(230,61,111,.55)}
.pm-cta:hover::before{transform:translateX(100%)}
.pm-cta:disabled{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.04));color:rgba(255,255,255,.3);cursor:not-allowed;box-shadow:none;transform:none}
.pm-cta.cta-blue{background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);box-shadow:0 8px 32px rgba(59,130,246,.4)}
.pm-cta.cta-blue:hover{box-shadow:0 16px 48px rgba(59,130,246,.55)}

.pm-success{display:none;text-align:center;padding:30px 10px 20px}
.pm-success.show{display:block;animation:pmSlide .5s cubic-bezier(.34,1.2,.64,1)}
.pm-success-icon{font-size:64px;margin-bottom:14px;animation:pmPulse 2s ease infinite}
.pm-success-title{font-size:24px;font-weight:900;background:linear-gradient(135deg,#fff,#60a5fa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.pm-success-sub{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:20px;line-height:1.5}
.pm-success-code{font-size:32px;font-weight:900;color:#60a5fa;letter-spacing:4px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.25);border-radius:14px;padding:18px;margin:14px 0 20px}

.pm-step{display:none}
.pm-step.active{display:block;animation:pmSlide .4s cubic-bezier(.34,1.2,.64,1)}

@media(min-width:600px){
  .pmodal-bg{align-items:center;padding:20px}
  .pmodal{border-radius:28px;border:1px solid rgba(59,130,246,.2);max-height:92vh;padding:24px 22px 22px}
  .pm-pull{display:none}
}
@media(max-width:380px){
  .pm-title{font-size:22px}
  .pm-mode{padding:16px}
  .pm-mode-title{font-size:16px}
  .pm-mode-icon{width:46px;height:46px}
  .pm-dur-value{font-size:16px;min-width:70px}
  .pm-cards{gap:8px}
  .pm-card{padding:10px;border-radius:16px}
}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:400;display:none;align-items:center;justify-content:center;padding:16px}
.modal-bg.open{display:flex;animation:fadeUp .22s ease}
.modal{background:var(--bg1);border:1px solid var(--br);border-radius:20px;padding:24px;width:100%;max-width:460px;position:relative;max-height:90vh;overflow-y:auto}
.modal-title{font-weight:800;font-size:18px;margin-bottom:5px}
.modal-sub{font-size:13px;color:var(--t2);margin-bottom:18px}
.modal-close{position:absolute;top:16px;right:16px;background:var(--bg3);border:none;color:var(--t2);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.modal-close:hover{color:var(--t1)}
.drop-zone{border:2px dashed var(--br);border-radius:14px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s;margin-bottom:16px;overflow:hidden;position:relative;min-height:160px;display:flex;align-items:center;justify-content:center}
.drop-zone:hover,.drop-zone.drag{border-color:var(--acc);background:var(--accG)}
.drop-zone input{display:none}
.dz-placeholder{padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.dz-icon-wrap{width:60px;height:60px;border-radius:50%;background:var(--accG);border:1px solid rgba(230,61,111,.3);display:flex;align-items:center;justify-content:center;font-size:26px;transition:transform .2s}
.drop-zone:hover .dz-icon-wrap{transform:scale(1.08)}
.dz-title{font-weight:700;font-size:14px}
.dz-sub{font-size:12px;color:var(--t3)}
.dz-hint{font-size:11px;color:rgba(230,61,111,.7);font-weight:500}
/* кроппер */
.cropper-wrap{display:none;margin-bottom:16px}
.cropper-wrap.show{display:block;animation:fadeUp .3s ease}
.cropper-label{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:7px;display:flex;align-items:center;gap:5px}
.cropper-canvas-wrap{position:relative;width:100%;padding-bottom:100%;overflow:hidden;border-radius:12px;background:var(--bg3);border:1px solid var(--br)}
.cropper-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.cropper-grid{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}
.cg-v{border-right:1px solid rgba(255,255,255,.12)}
.cg-h{border-bottom:1px solid rgba(255,255,255,.12)}
.crop-hint{font-size:11px;color:var(--t3);margin-top:5px;text-align:center}
.crop-btn{width:100%;background:linear-gradient(135deg,#7c3aed,var(--acc));border:none;color:#fff;padding:11px;border-radius:10px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;margin-top:8px;transition:opacity .18s;display:flex;align-items:center;justify-content:center;gap:7px}
.crop-btn:hover{opacity:.88}
/* прогресс */
.upload-prog-wrap{margin-bottom:16px;display:none}
.upload-prog-wrap.show{display:block;animation:fadeUp .3s ease}
.upw-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.upw-spinner{width:18px;height:18px;border-radius:50%;flex-shrink:0;border:2.5px solid rgba(230,61,111,.25);border-top-color:var(--acc);animation:spin .8s linear infinite}
.upw-text{font-size:13px;font-weight:600}
.upw-pct{font-size:13px;font-weight:800;color:var(--acc);margin-left:auto}
.upw-bar-bg{height:10px;background:var(--bg3);border-radius:5px;overflow:hidden;position:relative}
.upw-bar-fill{height:100%;border-radius:5px;background:repeating-linear-gradient(45deg,var(--acc),var(--acc) 10px,rgba(230,61,111,.65) 10px,rgba(230,61,111,.65) 20px);background-size:40px 100%;animation:barStripe .55s linear infinite;transition:width .18s linear}
.upw-stages{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.upw-stage{font-size:10px;font-weight:600;padding:3px 9px;border-radius:11px;background:var(--bg3);color:var(--t3);display:flex;align-items:center;gap:3px;transition:all .3s}
.upw-stage.done{background:var(--greenG);color:var(--green);border:1px solid rgba(34,197,94,.3)}
.upw-stage.active{background:var(--accG);color:var(--acc);border:1px solid rgba(230,61,111,.3);animation:progPulse 1s ease-in-out infinite}
/* поля */
.field-lbl{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px}
.field-inp{background:var(--bg3);border:1px solid var(--br);color:var(--t1);border-radius:9px;padding:9px 12px;font-family:'Inter',sans-serif;font-size:14px;width:100%;outline:none;transition:border-color .18s}
.field-inp:focus{border-color:var(--acc)}
.submit-btn{width:100%;background:var(--acc);border:none;color:#fff;padding:13px;border-radius:12px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;transition:opacity .18s,transform .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.submit-btn:hover{opacity:.88}
.submit-btn:active{transform:scale(.98)}
.submit-btn:disabled{opacity:.4;cursor:not-allowed}
/* успех */
.upload-success{display:none;text-align:center;padding:20px}
.upload-success.show{display:block;animation:popIn .4s ease}
.us-icon{font-size:48px;margin-bottom:12px}
.us-title{font-weight:800;font-size:18px;margin-bottom:6px}
.us-sub{font-size:13px;color:var(--t2);margin-bottom:4px}
.us-num{font-size:28px;font-weight:800;color:var(--acc);margin:10px 0;letter-spacing:2px}
.us-hint{font-size:12px;color:var(--t3);margin-bottom:14px}

/* ══════════════════════
   ПОДАРКИ
══════════════════════ */
.gift-open-btn{
  background:linear-gradient(135deg,#f59e0b,#f97316);
  border:none;color:#fff;padding:10px 18px;border-radius:22px;
  cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;
  display:flex;align-items:center;gap:7px;
  transition:opacity .18s,transform .15s;
  box-shadow:0 4px 16px rgba(245,158,11,.35);
}
.gift-open-btn:hover{opacity:.88}
.gift-open-btn:active{transform:scale(.96)}

.gift-panel{
  margin-top:12px;
  background:var(--bg1);border:1px solid var(--br);
  border-radius:16px;padding:16px;
  animation:fadeUp .25s ease;
}
.gift-panel-title{
  font-size:13px;font-weight:700;margin-bottom:4px;
  display:flex;align-items:center;gap:6px;
}
.gift-panel-sub{font-size:11px;color:var(--t2);margin-bottom:14px;font-weight:400}
.gift-target-row{
  display:flex;gap:8px;margin-bottom:14px;
}
.gift-target{
  flex:1;padding:8px 12px;border-radius:10px;
  border:1.5px solid var(--br);cursor:pointer;
  text-align:center;font-size:13px;font-weight:600;
  transition:all .15s;background:var(--bg2);
}
.gift-target:hover{border-color:var(--gold)}
.gift-target.selected{
  border-color:var(--gold);
  background:rgba(245,158,11,.1);
  color:var(--gold);
}
.gift-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-bottom:14px;
}
.gift-item{
  background:var(--bg2);border:1.5px solid var(--br);
  border-radius:12px;padding:10px 6px;
  text-align:center;cursor:pointer;
  transition:all .18s;
}
.gift-item:hover{border-color:var(--gold);transform:scale(1.05)}
.gift-item.selected{border-color:var(--gold);background:rgba(245,158,11,.1)}
.gift-emoji{font-size:24px;margin-bottom:4px;display:block}
.gift-name{font-size:10px;color:var(--t2);font-weight:500;margin-bottom:2px}
.gift-price{font-size:11px;font-weight:800;color:var(--gold);font-family:'Inter',sans-serif}
.gift-send-btn{
  width:100%;background:linear-gradient(135deg,#f59e0b,#f97316);
  border:none;color:#fff;padding:12px;border-radius:12px;
  cursor:pointer;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;
  transition:opacity .18s,transform .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.gift-send-btn:hover{opacity:.88}
.gift-send-btn:active{transform:scale(.97)}
.gift-send-btn:disabled{opacity:.4;cursor:not-allowed}
.gift-balance{
  text-align:center;font-size:11px;color:var(--t3);
  margin-top:8px;font-family:'Inter',sans-serif;
}
.gift-balance span{color:var(--gold);font-weight:700}

/* Летящий подарок */
@keyframes giftFly{
  0%{transform:translate(-50%,-50%) scale(0) rotate(-20deg);opacity:0}
  15%{transform:translate(-50%,-50%) scale(1.3) rotate(5deg);opacity:1}
  30%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1}
  70%{transform:translate(-50%,-120%) scale(1) rotate(0deg);opacity:1}
  100%{transform:translate(-50%,-200%) scale(.5) rotate(20deg);opacity:0}
}
@keyframes giftRain{
  0%{transform:translateY(-60px) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(360deg);opacity:0}
}
@keyframes giftBurst{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1}
  50%{transform:translate(-50%,-50%) scale(1.5);opacity:.8}
  100%{transform:translate(-50%,-50%) scale(3);opacity:0}
}
.flying-gift{
  position:fixed;font-size:52px;
  animation:giftFly 2.2s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events:none;z-index:600;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));
}
.gift-rain-item{
  position:fixed;top:-60px;font-size:32px;
  animation:giftRain linear forwards;
  pointer-events:none;z-index:600;
}
.gift-burst{
  position:fixed;width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.6),transparent);
  animation:giftBurst .6s ease forwards;
  pointer-events:none;z-index:599;
}
/* Счётчик подарков на карточке батла скрыт: посторонним не нужно видеть,
   сколько подарков получил участник. В профиле владельца они остаются. */
.duel-gifts-badge{display:none!important}

/* ─── Окно выбора количества повторных голосов ─── */
.vcp-bg{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(10px);
  animation:vcpFade .18s ease;
}
@keyframes vcpFade{from{opacity:0}to{opacity:1}}
.vcp-card{
  position:relative;width:100%;max-width:360px;
  padding:26px 22px 20px;border-radius:22px;
  background:linear-gradient(180deg,#1c1c25 0%,#141419 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 28px 70px rgba(0,0,0,.65), 0 0 40px rgba(236,72,153,.10);
  animation:vcpPop .26s cubic-bezier(.34,1.3,.64,1);
}
@keyframes vcpPop{from{transform:scale(.92) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.vcp-x{position:absolute;top:14px;right:14px}
.vcp-head{text-align:center;margin-bottom:20px}
.vcp-bolt{
  font-size:34px;line-height:1;margin-bottom:10px;
  filter:drop-shadow(0 4px 14px rgba(245,158,11,.5));
}
.vcp-title{font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-.01em}
.vcp-rate{font-size:13px;color:var(--t3);margin-top:5px}
.vcp-rate b{color:var(--acc);font-weight:800}
.vcp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.vcp-opt{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:15px 10px;border-radius:15px;cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  font-family:inherit;
  transition:background .15s,border-color .15s,transform .12s;
}
.vcp-opt:hover:not(:disabled){
  background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(124,58,237,.12));
  border-color:rgba(236,72,153,.45);
  transform:translateY(-2px);
}
.vcp-opt:active:not(:disabled){transform:scale(.97)}
.vcp-mult{font-size:23px;font-weight:800;color:var(--t1);line-height:1}
.vcp-cost{font-size:13px;font-weight:700;color:var(--acc);display:flex;align-items:center;gap:3px}
/* Не хватает монет — вариант виден, но неактивен */
.vcp-opt.vcp-off{opacity:.38;cursor:not-allowed}
.vcp-opt.vcp-off .vcp-cost{color:var(--t3)}
.vcp-balance{
  text-align:center;font-size:12.5px;color:var(--t3);
  padding:9px 0;margin-bottom:12px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.vcp-balance b{color:var(--t1);font-weight:800}
.vcp-cancel{
  width:100%;padding:12px;border-radius:13px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:transparent;
  color:var(--t3);font-family:inherit;font-weight:600;font-size:14px;
  transition:background .15s,color .15s;
}
.vcp-cancel:hover{background:rgba(255,255,255,.05);color:var(--t1)}
html[data-theme="light"] .vcp-card{
  background:linear-gradient(180deg,#fff 0%,#faf9fc 100%);
  border-color:rgba(0,0,0,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
html[data-theme="light"] .vcp-opt{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}

/* Отказ: нельзя голосовать за своё фото или дарить себе.
   Карточка вспыхивает красной рамкой и коротко вздрагивает. */
.duel-card.deny{
  animation:denyShake .5s cubic-bezier(.36,.07,.19,.97);
}
.duel-card.deny .duel-img-wrap,
.duel-card.deny .duel-img{
  outline:3px solid #ef4444;
  outline-offset:-3px;
  border-radius:inherit;
  box-shadow:0 0 0 4px rgba(239,68,68,.25), 0 0 26px rgba(239,68,68,.45);
  transition:outline .15s, box-shadow .15s;
}
@keyframes denyShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-5px)}
  60%{transform:translateX(4px)}
  80%{transform:translateX(-2px)}
}
@media(prefers-reduced-motion:reduce){
  .duel-card.deny{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   ПОЛЁТ ПОДАРКА НА ФОТО
   Подарок летит к фото получателя, падает на снимок с «приплюскиванием»,
   держится на нём и в конце «впитывается» в фото. Старт задают
   переменные --dx/--dy (смещение от точки приземления), длительность —
   --gd, момент касания — --gl. Проценты касания в @keyframes совпадают
   с таблицей GIFT_ANIM в app.html (float/romance 34%, speed 22%,
   drop 26%, creature 32%, heavy 34%).
   Слой #gift-stage-page прокручивается вместе со страницей, поэтому
   при прокрутке подарок остаётся на фото, а не висит на экране.
   Анимируются только transform и opacity — без нагрузки на отрисовку.
   ═══════════════════════════════════════════════════════════════ */
.gsend{
  position:fixed;z-index:620;pointer-events:none;
  width:var(--sz,92px);height:var(--sz,92px);
  margin-left:calc(var(--sz,92px) / -2);
  margin-top:calc(var(--sz,92px) / -2);
  transform-origin:50% 78%;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.gsend img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
  -webkit-user-drag:none;user-select:none;
}
/* Подсветка под подарком: вспыхивает в момент касания фото */
.gsend::after{
  content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle, var(--glow,rgba(255,255,255,.5)) 0%, transparent 65%);
  opacity:0;z-index:-1;
  animation:gsendGlow 2.2s ease-out var(--gl,1.2s) both;
}
@keyframes gsendGlow{
  0%{opacity:0;transform:scale(.4)}
  10%{opacity:.85;transform:scale(1.3)}
  45%{opacity:.30;transform:scale(1)}
  100%{opacity:0;transform:scale(.9)}
}

/* 1. Парящие: шарик, бабочка, крылья, клевер — поднимаются снизу и мягко садятся */
.gs-float{animation:gsFloat var(--gd,3.8s) ease both}
@keyframes gsFloat{
  0%{transform:translate(var(--dx),var(--dy)) rotate(-12deg) scale(.4);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  10%{opacity:1}
  24%{transform:translate(calc(var(--dx) * .2),calc(var(--dy) * .1 - 34px)) rotate(6deg) scale(1.02);animation-timing-function:ease-in-out}
  34%{transform:translate(0,0) rotate(-2deg) scale(1.06,.94)}
  40%{transform:translate(0,-6px) rotate(2deg) scale(.98,1.03)}
  47%{transform:translate(0,0) rotate(0deg) scale(1)}
  60%{transform:translate(0,-5px) rotate(-2deg) scale(1)}
  72%{transform:translate(0,0) rotate(1deg) scale(1)}
  80%{transform:translate(0,-2px) rotate(0deg) scale(1.08);opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  100%{transform:translate(0,10px) rotate(0deg) scale(.2);opacity:0}
}

/* 2. Романтика: роза, сердце, букет, кольцо — дуга сбоку и «стук сердца» на фото */
.gs-romance{animation:gsRomance var(--gd,3.8s) ease both}
@keyframes gsRomance{
  0%{transform:translate(var(--dx),var(--dy)) rotate(34deg) scale(.3);opacity:0;animation-timing-function:cubic-bezier(.25,.6,.4,1)}
  10%{opacity:1}
  20%{transform:translate(calc(var(--dx) * .45),calc(var(--dy) * -.25)) rotate(-8deg) scale(1.08);animation-timing-function:cubic-bezier(.5,0,.75,.5)}
  34%{transform:translate(0,0) rotate(0deg) scale(1.1,.9)}
  40%{transform:translate(0,-8px) rotate(-3deg) scale(.96,1.05)}
  46%{transform:translate(0,0) rotate(0deg) scale(1)}
  56%{transform:translate(0,0) rotate(0deg) scale(1.07)}
  62%{transform:translate(0,0) rotate(0deg) scale(1)}
  68%{transform:translate(0,0) rotate(0deg) scale(1.05)}
  74%{transform:translate(0,0) rotate(0deg) scale(1)}
  80%{transform:translate(0,-2px) rotate(0deg) scale(1.08);opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  100%{transform:translate(0,10px) rotate(0deg) scale(.2);opacity:0}
}

/* 3. Техника: ракета, мотоцикл, спорткар, самолёт — резкий влёт сбоку с заносом */
.gs-speed{animation:gsSpeed var(--gd,3.8s) ease both}
@keyframes gsSpeed{
  0%{transform:translate(var(--dx),var(--dy)) rotate(-20deg) scale(.6);opacity:0;animation-timing-function:cubic-bezier(.3,.6,.5,1)}
  5%{opacity:1}
  16%{transform:translate(calc(var(--dx) * .08),calc(var(--dy) * .08)) rotate(-4deg) scale(1.15,.9)}
  22%{transform:translate(calc(var(--dx) * -.03),0) rotate(6deg) scale(1.08,.9)}
  28%{transform:translate(0,0) rotate(-2deg) scale(.96,1.04)}
  34%{transform:translate(0,0) rotate(0deg) scale(1)}
  80%{transform:translate(0,-2px) rotate(0deg) scale(1.08);opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  100%{transform:translate(0,10px) rotate(0deg) scale(.2);opacity:0}
}

/* 4. Драгоценности: бриллиант, корона, звезда, сундук — падают сверху с отскоком */
.gs-drop{animation:gsDrop var(--gd,3.8s) ease both}
@keyframes gsDrop{
  0%{transform:translate(var(--dx),var(--dy)) rotate(-10deg) scale(.55);opacity:0;animation-timing-function:cubic-bezier(.45,0,.9,.55)}
  8%{opacity:1}
  20%{transform:translate(calc(var(--dx) * .08),calc(var(--dy) * .1)) rotate(-3deg) scale(.95,1.12);animation-timing-function:cubic-bezier(.5,0,1,.6)}
  26%{transform:translate(0,0) rotate(0deg) scale(1.2,.8);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
  32%{transform:translate(0,-22px) rotate(3deg) scale(.94,1.06);animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  38%{transform:translate(0,0) rotate(0deg) scale(1.08,.93);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
  43%{transform:translate(0,-7px) rotate(-1deg) scale(.99,1.01)}
  48%{transform:translate(0,0) rotate(0deg) scale(1)}
  80%{transform:translate(0,-2px) rotate(0deg) scale(1.08);opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  100%{transform:translate(0,10px) rotate(0deg) scale(.2);opacity:0}
}

/* 5. Существа: дракон, феникс, кот, мишка — пикируют по дуге и «переступают» */
.gs-creature{animation:gsCreature var(--gd,3.8s) ease both}
@keyframes gsCreature{
  0%{transform:translate(var(--dx),var(--dy)) rotate(24deg) scale(.4);opacity:0;animation-timing-function:cubic-bezier(.3,.5,.5,1)}
  10%{opacity:1}
  20%{transform:translate(calc(var(--dx) * .3),calc(var(--dy) * -.15)) rotate(-12deg) scale(1.05);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  32%{transform:translate(0,0) rotate(4deg) scale(1.08,.92)}
  40%{transform:translate(0,-10px) rotate(-5deg) scale(.97,1.04)}
  48%{transform:translate(0,0) rotate(3deg) scale(1)}
  58%{transform:translate(0,-6px) rotate(-2deg) scale(1.03)}
  68%{transform:translate(0,0) rotate(0deg) scale(1)}
  80%{transform:translate(0,-2px) rotate(0deg) scale(1.08);opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  100%{transform:translate(0,10px) rotate(0deg) scale(.2);opacity:0}
}

/* 6. Монументальные: замок, трон, дворец, вселенная — медленно спускаются и падают с грохотом */
.gs-heavy{animation:gsHeavy var(--gd,4.2s) ease both}
@keyframes gsHeavy{
  0%{transform:translate(var(--dx),var(--dy)) rotate(0deg) scale(.25);opacity:0;animation-timing-function:cubic-bezier(.3,.6,.5,1)}
  12%{transform:translate(calc(var(--dx) * .6),calc(var(--dy) * .62)) rotate(0deg) scale(.7);opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.5)}
  34%{transform:translate(0,0) rotate(0deg) scale(1.25,.78);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
  40%{transform:translate(0,-12px) rotate(-1deg) scale(.93,1.07)}
  46%{transform:translate(0,0) rotate(1deg) scale(1.06,.95)}
  52%{transform:translate(0,0) rotate(0deg) scale(1)}
  82%{transform:translate(0,-2px) rotate(0deg) scale(1.06);opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  100%{transform:translate(0,10px) rotate(0deg) scale(.2);opacity:0}
}

/* Спокойный режим (в системе включено «уменьшение движения»):
   подарок просто проявляется на фото и исчезает */
.gs-calm{animation:gsCalm var(--gd,1.9s) ease both}
@keyframes gsCalm{
  0%{transform:scale(.85);opacity:0}
  20%{transform:scale(1);opacity:1}
  80%{transform:scale(1);opacity:1}
  100%{transform:scale(.9);opacity:0}
}

/* Тень на фото под точкой приземления — растёт, пока подарок приближается */
.gs-shadow{
  position:fixed;z-index:617;pointer-events:none;
  width:var(--sz,92px);height:calc(var(--sz,92px) * .28);
  margin-left:calc(var(--sz,92px) / -2);
  margin-top:calc(var(--sz,92px) * -.14);
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, transparent 72%);
  opacity:0;will-change:transform,opacity;
  animation:gsShadowIn var(--gl,1.2s) ease-in both, gsShadowOut var(--gf,.76s) ease-in var(--go,3s) forwards;
}
@keyframes gsShadowIn{
  0%{opacity:0;transform:scale(.25)}
  100%{opacity:.7;transform:scale(1)}
}
@keyframes gsShadowOut{
  0%{opacity:.7;transform:scale(1)}
  100%{opacity:0;transform:scale(.3)}
}

/* Волна по поверхности фото в момент касания (сплюснута — лежит «на снимке») */
.gs-shock{
  position:fixed;z-index:618;pointer-events:none;
  width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:2px solid var(--glow,rgba(255,255,255,.8));
  box-shadow:0 0 10px var(--glow,rgba(255,255,255,.5));
  animation:gsShock .85s ease-out both;
}
.gs-shock.gs-shock-2{border-width:1px;animation-delay:.12s;animation-duration:.95s}
@keyframes gsShock{
  0%{transform:scale(.3,.15);opacity:0}
  20%{opacity:.9}
  100%{transform:scale(6.5,2.6);opacity:0}
}

/* Искры, разлетающиеся при приземлении */
.gs-spark{
  position:fixed;z-index:619;pointer-events:none;
  width:7px;height:7px;border-radius:50%;
  background:var(--glow,#fff);
  box-shadow:0 0 6px var(--glow,#fff);
  animation:gsSpark .95s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes gsSpark{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--sx),var(--sy)) scale(0);opacity:0}
}

/* В слое страницы элементы позиционируются от слоя, а не от окна */
#gift-stage-page > *{position:absolute}

@media(prefers-reduced-motion:reduce){
  .gs-shock,.gs-spark,.gs-shadow{display:none}
}

.gift-toast{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,rgba(245,158,11,.9),rgba(249,115,22,.9));
  backdrop-filter:blur(10px);
  color:#fff;padding:10px 20px;border-radius:24px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:700;
  z-index:700;pointer-events:none;
  animation:giftToastAnim 2.5s ease forwards;
  white-space:nowrap;
  box-shadow:0 4px 24px rgba(245,158,11,.4);
}
@keyframes giftToastAnim{
  0%{opacity:0;transform:translateX(-50%) translateY(20px)}
  15%{opacity:1;transform:translateX(-50%) translateY(0)}
  70%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-20px)}
}

/* Счётчик подарков на батле */
.gift-counter{
  position:absolute;top:10px;left:10px;z-index:10;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  border-radius:12px;padding:4px 9px;
  font-size:11px;font-weight:700;color:var(--gold);
  display:none;align-items:center;gap:4px;
  border:1px solid rgba(245,158,11,.3);
}
.gift-counter.show{display:flex}

@media(max-width:640px){
  .gift-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .gift-emoji{font-size:20px}
  .gift-item{padding:8px 4px;border-radius:10px}
  .gift-open-btn{padding:9px 14px;font-size:13px}
}
/* ─── Всплывающее уведомление ───────────────────────────────
   Цвет и иконка зависят от типа: успех, ошибка, предупреждение,
   запрет, ожидание. Тип проставляет showToast() классом. */
.toast{
  position:fixed;top:74px;left:50%;
  z-index:10600;
  display:flex;align-items:center;gap:10px;
  max-width:min(440px, calc(100vw - 32px));
  padding:11px 16px 11px 12px;
  border-radius:16px;
  font-size:13.5px;font-weight:600;line-height:1.35;
  color:var(--t1);
  background:rgba(24,24,31,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-14px) scale(.96);
  transition:opacity .22s ease, transform .28s cubic-bezier(.34,1.3,.64,1);
}
.toast.show{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
/* Кружок с иконкой слева */
.toast-ic{
  flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;line-height:1;
  color:#fff;
}
.toast-tx{min-width:0;overflow-wrap:anywhere}

/* Цветная полоса слева — сразу считывается тип сообщения */
.toast::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;
  width:3px;border-radius:0 3px 3px 0;background:var(--toast-c,#10b981);
}
.toast{overflow:hidden}

.toast-ok  { --toast-c:#10b981 }
.toast-err { --toast-c:#ef4444 }
.toast-warn{ --toast-c:#f59e0b }
.toast-lock{ --toast-c:#8b5cf6 }
.toast-wait{ --toast-c:#3b82f6 }

.toast-ok   .toast-ic{background:#10b981}
.toast-err  .toast-ic{background:#ef4444}
.toast-warn .toast-ic{background:#f59e0b}
.toast-lock .toast-ic{background:#8b5cf6;font-size:10px}
.toast-wait .toast-ic{background:#3b82f6;font-size:10px}

/* Ошибку подсвечиваем чуть заметнее */
.toast-err{
  border-color:rgba(239,68,68,.35);
  box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 26px rgba(239,68,68,.20);
}

html[data-theme="light"] .toast{
  background:rgba(255,255,255,.96);
  border-color:rgba(0,0,0,.08);
  box-shadow:0 14px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
}

@media(max-width:640px){
  .toast{top:66px;font-size:13px;padding:10px 14px 10px 11px}
}
@media(prefers-reduced-motion:reduce){
  .toast{transition:opacity .15s}
  .toast.show{transform:translate(-50%,0)}
}
.br-photo img{background:#111118}.rr-photo{background:#111118}.pod-photo{background:#111118}.prof-ava{background:#111118}.nav-avatar img{background:#111118}
.confetti-p{position:fixed;top:0;width:6px;height:6px;border-radius:2px;pointer-events:none;z-index:998;animation:confetti linear forwards}

/* ══════════════════════════════════════
   МОБИЛЬНАЯ АДАПТАЦИЯ — полная
══════════════════════════════════════ */
@media(max-width:640px){

  /* Навбар */
  nav{padding:0 12px;gap:4px;height:58px}
  .logo{font-size:15px;gap:5px}
  .logo-dot{width:7px;height:7px}
  .nav-add{padding:6px 12px;font-size:12px;border-radius:16px}
  .lang-btn{padding:4px 8px;font-size:12px}
  .lang-btn-flag{font-size:15px}
  #nav-avatar img{width:30px;height:30px}
  .page{padding-top:52px}

  /* Lang dropdown */
  .lang-bar{top:54px;right:8px;min-width:150px}
  .lang-opt{padding:8px 10px;font-size:12px}
  .lang-flag{font-size:16px}

  /* Мобильный nav */
  .mob-tab{padding:3px 6px}
  .mob-tab svg{width:20px;height:20px}
  .mob-label{font-size:9px}
  .mob-plus-btn{width:44px;height:44px;margin-top:-18px}

  /* Поиск */
  .home-search-bar{padding:10px 12px 6px}
  .search-wrap{padding:8px 12px;border-radius:10px}
  .search-input{font-size:13px}

  /* Вкладки */
  .home-tabs{padding:8px 12px 0;gap:6px}

  /* Заголовок главной */
  .home-top{padding:8px 12px 0}
  .home-title{font-size:16px}
  .live-badge{font-size:11px;padding:3px 9px}
  .live-dot{width:5px;height:5px}

  /* Список батлов */
  .battles-list{padding:8px 12px 0;gap:6px}
  .battle-row{border-radius:12px}
  .br-photos-row{aspect-ratio:2/1}
  .br-vs{width:26px;height:26px;font-size:8px}
  .br-vote-bar{height:5px}
  .br-pcts{padding:4px 10px 1px}
  .br-pct-left,.br-pct-right{font-size:14px}
  .br-info{padding:3px 10px 8px;gap:6px;flex-wrap:wrap}
  .br-names{font-size:13px}
  .br-meta{gap:5px;font-size:11px}
  .br-votes{font-size:11px}
  .br-time{font-size:10px}
  .br-num{font-size:10px;padding:2px 6px}

  /* Пагинация */
  .pagination{padding:14px 12px 20px;gap:4px}
  .pg-btn{padding:6px 11px;font-size:12px;border-radius:8px}
  .pg-info{font-size:11px;margin-left:3px}

  /* Страница батла */
  .battle-inner{padding:14px 10px 20px}
  .battle-label h2{font-size:17px}
  .battle-label p{font-size:12px}
  .duel{gap:6px}
  .duel-card{border-radius:12px;border-width:1.5px}
  .duel-img{aspect-ratio:3/5}
  .duel-info{padding:8px 9px;bottom:40px}
  .duel-name{font-size:15px}
  .duel-age{font-size:11px}
  .duel-elo{font-size:9px;padding:2px 7px;margin-top:3px}
  .duel-time{font-size:11px;margin-top:3px}
  .duel-vote-bar{height:4px}
  .duel-foot{padding:7px 9px}
  .duel-pct-green,.duel-pct-red{font-size:14px}
  .vs-circle{width:36px;height:36px;font-size:9px}
  .duel-hover-heart{width:50px;height:50px;font-size:22px}
  .duel-hover-label{font-size:12px;padding:3px 12px}
  .duel-win-badge{width:26px;height:26px;font-size:13px;top:8px;right:8px}
  .hint{font-size:12px;padding:5px 14px;margin-top:8px}

  /* Результат */
  .duel-result{padding:12px;border-radius:11px}
  .dr-voted-wrap{gap:10px;margin-bottom:10px}
  .dr-voted-icon{font-size:24px}
  .dr-voted-title{font-size:14px}
  .dr-voted-sub{font-size:11px}
  .elo-row{gap:6px;margin-bottom:10px}
  .elo-chip{font-size:11px;padding:3px 9px}

  /* Кнопки действий */
  .btn-main{padding:9px 18px;font-size:13px;border-radius:20px}
  .btn-out{padding:9px 14px;font-size:13px;border-radius:20px}
  .share-btn{padding:8px 14px;font-size:12px;border-radius:20px}
  .share-icon{font-size:13px}
  .share-panel{padding:12px;border-radius:12px;margin-top:10px}
  .share-panel-title{font-size:11px;margin-bottom:8px}
  .share-socials{gap:6px}
  .share-social-btn{padding:7px 11px;font-size:12px;border-radius:18px}
  .share-link-input{font-size:11px;padding:7px 10px}
  .share-copy-btn{padding:7px 12px;font-size:11px}

  /* Профиль */
  .profile-page{padding:16px 12px 80px}
  .prof-cover{height:120px;border-radius:14px}
  .prof-top{margin-top:-52px;margin-bottom:10px}
  .prof-ava{width:96px;height:96px;border-width:3px}
  .prof-ava-ring{inset:-2px}
  .prof-edit-btn{width:32px;height:32px;font-size:14px;top:8px;right:8px;border:1px solid rgba(255,255,255,.2)}
  .prof-name{font-size:17px}
  .prof-username{font-size:12px}
  .prof-bio{font-size:12px;margin-bottom:10px}
  .prof-stats{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;margin:10px 0}
  .ps-card{padding:8px 6px;border-radius:9px}
  .ps-icon{font-size:16px}
  .ps-val{font-size:15px}
  .ps-lbl{font-size:9px}
  .prof-elo-block{padding:11px 13px;border-radius:10px}
  .peb-top{font-size:12px}
  .peb-sub{font-size:10px}
  .prof-section-title{font-size:14px;margin-bottom:8px}
  .pb-row{padding:9px 11px;gap:8px;border-radius:10px}
  .pb-photo{width:36px;height:36px}
  .pb-title{font-size:12px}
  .pb-meta{font-size:10px}
  .pb-result{font-size:13px}

  /* Рейтинг */
  .rating-inner{padding:14px 10px 20px}
  .rating-head h2{font-size:18px}
  .rating-head p{font-size:12px}
  .period-tabs{border-radius:9px;padding:3px}
  .period-tab{font-size:12px;padding:6px}
  .podium{gap:5px;margin-bottom:14px}
  .pod-crown{font-size:14px}
  .pod-name{font-size:11px;max-width:72px}
  .pod-elo{font-size:12px}
  .pod-base{font-size:16px}
  .rating-list{gap:6px}
  .rating-row{padding:9px 11px;gap:9px;border-radius:10px}
  .rr-pos{width:24px;height:24px;font-size:11px}
  .rr-photo{width:38px;height:38px}
  .rr-name{font-size:13px}
  .rr-meta{font-size:10px;gap:5px}
  .rr-elo-val{font-size:14px}

  /* Модалка */
  .modal-bg{padding:10px}
  .modal{padding:18px;border-radius:16px}
  .modal-title{font-size:16px}
  .modal-sub{font-size:12px;margin-bottom:14px}
  .modal-close{width:26px;height:26px;font-size:13px;top:14px;right:14px}
  .drop-zone{min-height:130px;border-radius:12px;margin-bottom:12px}
  .dz-icon-wrap{width:52px;height:52px;font-size:22px}
  .dz-title{font-size:13px}
  .dz-sub{font-size:11px}
  .dz-hint{font-size:10px}
  .field-lbl{font-size:11px}
  .field-inp{font-size:13px;padding:8px 11px;border-radius:8px}
  .crop-btn{font-size:13px;padding:10px;border-radius:9px}
  .submit-btn{font-size:14px;padding:12px;border-radius:11px}
  .upw-text{font-size:12px}
  .upw-pct{font-size:12px}
  .upw-bar-bg{height:8px}
  .upw-stage{font-size:9px;padding:2px 7px}
  .us-icon{font-size:40px;margin-bottom:10px}
  .us-title{font-size:16px}
  .us-sub{font-size:12px}
  .us-num{font-size:24px;letter-spacing:3px}

  /* Cover crop modal */
  #coverCropBg .modal{padding:16px;border-radius:16px}
  #coverCropBg .modal-title{font-size:15px;margin-bottom:3px}
  #coverCropBg .modal-sub{font-size:11px;margin-bottom:12px}

  /* Toast */
  .toast{font-size:12px;padding:7px 14px;top:58px;max-width:90vw;white-space:normal;text-align:center}

  /* Поиск результат */
  .search-result{padding:0 12px 0}
}

/* Очень маленькие экраны */
@media(max-width:380px){
  .nav-add{display:none}
  .br-photos-row{aspect-ratio:16/9}
  .duel{gap:4px}
  .share-socials{gap:5px}
  .share-social-btn{padding:6px 9px;font-size:11px}
  .prof-stats{grid-template-columns:repeat(2,1fr)}
}
/* Всплывающее окно после 5 голосов */
.vote-popup{
  position:fixed;bottom:32px;left:50%;transform:translateX(-50%);
  z-index:9000;
  animation:votePopupIn .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events:auto;
}
@keyframes votePopupIn{
  from{opacity:0;transform:translateX(-50%) translateY(30px) scale(.9)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
.vote-popup-inner{
  background:linear-gradient(135deg,rgba(20,10,35,.97),rgba(30,15,50,.97));
  border:1.5px solid rgba(236,72,153,.4);
  border-radius:20px;
  padding:20px 28px;
  text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 60px rgba(236,72,153,.2);
  backdrop-filter:blur(20px);
  min-width:280px;max-width:360px;
}
.vote-popup-icon{font-size:36px;margin-bottom:8px;animation:popupIconPulse 1s ease-in-out infinite}
@keyframes popupIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.vote-popup-title{
  font-size:18px;font-weight:900;color:#fff;
  margin-bottom:6px;letter-spacing:-.3px;
}
.vote-popup-sub{
  font-size:13px;color:rgba(255,255,255,.7);
  margin-bottom:14px;line-height:1.5;
}
.vote-popup-sub b{color:#fff;font-weight:700}
.vote-popup-btn{
  background:linear-gradient(135deg,#ec4899,#a855f7);
  border:none;border-radius:12px;
  padding:10px 24px;
  color:#fff;font-size:14px;font-weight:700;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.vote-popup-btn:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(236,72,153,.5)}
.mb-waiting-lbl{color:#fbbf24!important}

/* ═══ Модалка вывода средств ═══ */
.withdraw-modal-bg{position:fixed;inset:0;z-index:850;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.withdraw-modal-bg.open{opacity:1;pointer-events:auto}
.withdraw-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(5px)}
.withdraw-modal{position:relative;z-index:1;background:var(--bg1);border-radius:24px 24px 0 0;border-top:1px solid var(--br);width:100%;max-width:480px;padding:22px 18px 32px;max-height:88vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.34,1.2,.64,1)}
.withdraw-modal-bg.open .withdraw-modal{transform:translateY(0)}
.wm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.wm-title{font-size:18px;font-weight:800;color:var(--t1)}
.wm-close{}
.wm-rate{font-size:12.5px;color:var(--t3);margin-bottom:18px}
.wm-field{margin-bottom:16px}
.wm-field label{display:block;font-size:13px;color:var(--t2);font-weight:600;margin-bottom:8px}
.wm-field input{width:100%;background:var(--bg2);border:1px solid var(--br);border-radius:12px;padding:13px 15px;color:var(--t1);font-family:inherit;font-size:15px;outline:none}
.wm-field input:focus{border-color:var(--acc)}
.wm-rub{font-size:14px;color:var(--green);font-weight:700;margin-top:8px}
.wm-methods{display:flex;gap:8px}
.wm-method{flex:1;background:var(--bg2);border:1px solid var(--br);color:var(--t2);padding:11px 8px;border-radius:12px;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;transition:all .15s}
.wm-method.active{background:linear-gradient(135deg,#ff4fa6,#7c3aed);color:#fff;border-color:transparent}
.wm-submit{width:100%;background:linear-gradient(135deg,#ff4fa6,#7c3aed);border:none;color:#fff;padding:15px;border-radius:14px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;margin-top:6px}
.wm-submit:active{transform:scale(.98)}
.wm-note{font-size:11.5px;color:var(--t3);text-align:center;margin-top:12px;line-height:1.5}
.wm-history{margin-top:22px;border-top:1px solid var(--br);padding-top:16px}
.wm-hist-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:12px}
.wm-hist-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13.5px}
.wm-hist-sub{font-size:11.5px;color:var(--t3);margin-top:3px}
.wm-hist-status{font-size:12.5px;font-weight:700}

/* ─── Ожидающий PvP-батл (фото + ?) ─── */
.waiting-battle-view{display:flex;flex-direction:column;align-items:center;padding:24px 16px;max-width:560px;margin:0 auto;animation:fadeUp .25s ease}
.wb-back{align-self:flex-start;background:none;border:none;color:var(--t2);font-size:15px;cursor:pointer;padding:6px 0;margin-bottom:8px}
.wb-back:hover{color:var(--t1)}
.wb-title{font-size:20px;font-weight:800;color:var(--t1);margin-bottom:4px;text-align:center}
.wb-sub{font-size:13px;color:var(--t3);margin-bottom:22px;text-align:center}
.wb-duel{display:flex;align-items:center;gap:12px;width:100%;justify-content:center;margin-bottom:20px}
.wb-side{flex:1;max-width:200px;display:flex;flex-direction:column;align-items:center;gap:10px}
.wb-photo{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;border:2px solid var(--br);background:var(--bg3)}
.wb-photo-empty{display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:800;color:var(--t3);border:2px dashed var(--br)}
.wb-name{font-size:14px;font-weight:700;color:var(--t1)}
.wb-name-wait{color:var(--t3);font-weight:500}
.wb-vs{font-size:22px;font-weight:900;color:var(--pink);flex-shrink:0}
.wb-hint{font-size:12.5px;color:var(--t3);text-align:center;margin-bottom:20px;line-height:1.5;max-width:380px}
.wb-share{width:100%;max-width:360px;padding:14px;border:none;border-radius:14px;background:linear-gradient(135deg,#ff4fa6,#7c3aed);color:#fff;font-weight:700;font-size:15px;cursor:pointer;margin-bottom:10px}
.wb-share:active{transform:scale(.98)}
.wb-delete{width:100%;max-width:360px;padding:13px;border:1px solid var(--br);border-radius:14px;background:transparent;color:#f87171;font-weight:600;font-size:14px;cursor:pointer}
.wb-delete:hover{background:rgba(248,113,113,.08)}

/* ═══════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ДОВОДКА (добавлено) — только поверх, ничего не ломает
   ═══════════════════════════════════════════════════════════ */

/* Никакой горизонтальной прокрутки + картинки не вылезают за экран */
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas{max-width:100%;height:auto}

/* Поддержка «чёлки» / вырезов экрана (iPhone и др.). На обычных экранах = 0. */
@supports(padding:max(0px,env(safe-area-inset-top))){
  nav{
    height:calc(66px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }
  .page{padding-top:calc(66px + env(safe-area-inset-top))}
}

/* Крупные тап-зоны на телефоне (удобно пальцем) */
@media(max-width:580px){
  button, .nav-add, .htf-tab, .mob-tab{min-height:40px}
  input, select, textarea{font-size:16px}   /* iOS не зумит при фокусе */
}

/* share-режим на главной: показываем только «Поделиться», без «Жалобы» */
.battle-fixed-actions.share-only .battle-action-report{display:none}

/* Страница батла на телефоне: плашка «Делись батлом» не перекрывает фото
   (оставляем только круглую кнопку-иконку) */
@media(max-width:580px){
  .battle-share-label{display:none}
}

/* ═══ ФОТО БАТЛА РЯДОМ ДРУГ С ДРУГОМ НА ТЕЛЕФОНЕ (side-by-side VS) ═══ */
@media(max-width:768px){
  .duel{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    align-items:stretch!important;
    padding:8px 16px!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .duel-card{
    margin:0!important;
    max-width:100%!important;
    width:100%!important;
    min-width:0!important;
  }
  .duel-card:nth-child(1){margin:0!important}
  .duel-card:nth-child(3){margin:0!important}
  /* рамка фото — вписывается в свою колонку, соотношение 3:4 */
  .duel-card-frame{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:3/4!important;
    height:auto!important;
    box-sizing:border-box!important;
  }
  .duel-img-wrap{width:100%!important;height:100%!important}
  .duel-img{width:100%!important;height:100%!important;object-fit:cover!important}
  /* ник не должен налезать/обрезаться */
  .duel-info{max-width:100%!important;box-sizing:border-box!important}
  .duel-info .duel-name,.duel-username{
    max-width:100%!important;overflow:hidden!important;
    text-overflow:ellipsis!important;white-space:nowrap!important;
    font-size:12px!important;
  }
  /* маленький VS между фото по центру */
  .duel-vs-text{
    display:flex!important;
    position:absolute!important;top:50%!important;left:50%!important;
    transform:translate(-50%,-50%)!important;
    width:auto!important;height:auto!important;margin:0!important;
    font-size:20px!important;z-index:9!important;
    align-items:center;justify-content:center;pointer-events:none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   БАТЛ (страница голосования) — финальный аккуратный блок.
   Все правки собраны в одном месте, без повторов.
   ═══════════════════════════════════════════════════════════════ */

/* — Значок голосов «❤ N»: в одну строку, по центру, компактный — */
.duel-votes-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:5px 12px!important;
  font-size:13px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.duel-votes-badge::before{
  font-size:11px!important;
  line-height:1!important;
  display:inline-block!important;
  vertical-align:middle!important;
  margin:0!important;
}
/* Значок чуть левее края (числа сокращаются: 1K, 100K, 1M — не растянется) */
.duel-top-badges{right:16px!important}

/* — Ник: виден целиком, чуть левее и ниже, шрифт поменьше — */
.duel-info{right:12px!important;left:4px!important;max-width:none!important;
  padding-left:8px!important;padding-bottom:8px!important}
.duel-name{font-size:16px!important}

/* — Телефон: фото рядом (слева/справа), пропорции 3:4, целиком,
     с боковым запасом чтобы увеличение после лайка не вылезало — */
@media(max-width:768px){
  .duel{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;max-width:100%!important;
    padding:8px 16px!important;
    box-sizing:border-box!important;
  }
  .duel-card{
    margin:0!important;width:100%!important;max-width:none!important;min-width:0!important;
    transform:none!important;
  }
  .duel-card-frame{aspect-ratio:3/4!important;width:100%!important;height:auto!important}
  .duel-img-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  .duel-img{
    width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:center!important;
    aspect-ratio:auto!important;
  }
  .duel-top-badges{top:10px!important;left:12px!important;right:14px!important}
  .duel-info{right:10px!important;left:4px!important;
    padding-left:6px!important;padding-bottom:6px!important}
  .duel-name{font-size:12px!important}
}

/* ═══════════════════════════════════════════════════════════════
   ГЛОБАЛЬНАЯ ПОЛИРОВКА — круги, галочка, таймер, ник, сердечко.
   Для всех экранов: iOS / Android / desktop.
   ═══════════════════════════════════════════════════════════════ */

/* 1) Кнопки «Жалоба» и «Поделиться» — ИДЕАЛЬНО круглые на всех экранах */
.battle-action-circle{
  width:42px!important;height:42px!important;
  min-width:42px!important;min-height:42px!important;
  max-width:42px!important;max-height:42px!important;
  aspect-ratio:1/1!important;border-radius:50%!important;
  padding:0!important;flex:0 0 42px!important;
}
.battle-fixed-actions{align-items:flex-end!important}

/* 2) Синяя галочка верификации — БЕЗ тёмного фона на ВСЕХ страницах */
img[src*="verified.svg"],
.duel-name-verified,.br-verified,.bc-verified,.pp-verified,.verified-badge{
  background:transparent!important;border:none!important;
  box-shadow:none!important;padding:0!important;
  filter:none!important;border-radius:0!important;
}
.duel-verified-badge{
  background:transparent!important;border:none!important;
  padding:0!important;backdrop-filter:none!important;box-shadow:none!important;
}

/* 3) Таймер — компактный и аккуратный. Дни в одну строку с часами (2д 01:12:52) */
.bmt-time{white-space:nowrap!important}
@media(max-width:768px){
  .bmt-time{font-size:19px!important;letter-spacing:.03em!important}
  .bmt-label{font-size:7px!important;letter-spacing:.18em!important;margin-bottom:2px!important}
  .bmt-units{display:none!important}   /* подписи ЧАСОВ/МИНУТ/СЕКУНД убраны — чище */
  .finished-winner{font-size:11px!important;padding:4px 10px!important;margin-top:5px!important}
  /* фильтры Все/PvP/PvE — компактнее */
  .htf-tab,.btf-tab{font-size:12px!important;padding:7px 13px!important}
}

/* 4) Сердечко «❤ N» на телефоне — меньше и аккуратнее */
@media(max-width:768px){
  .duel-votes-badge{padding:4px 9px!important;font-size:11px!important;gap:4px!important}
  .duel-votes-badge::before{font-size:10px!important}
}

/* 5) Ник на телефоне — меньше, всегда помещается (обрезка многоточием в крайнем случае) */
@media(max-width:768px){
  .duel-name{
    font-size:11px!important;gap:4px!important;
    max-width:100%!important;overflow:hidden!important;
    text-overflow:ellipsis!important;white-space:nowrap!important;
    display:inline-flex!important;
  }
  .duel-name-verified{width:13px!important;height:13px!important;margin-left:3px!important}
  .duel-name-arrow{font-size:12px!important}
}

/* 6) Очень узкие экраны (старые/маленькие телефоны ≤380px) */
@media(max-width:380px){
  .bmt-time{font-size:16px!important}
  .duel-name{font-size:10px!important}
  .duel-votes-badge{padding:3px 7px!important;font-size:10px!important}
  .htf-tab,.btf-tab{font-size:11px!important;padding:6px 10px!important}
  .battle-action-circle{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important;flex:0 0 38px!important}
}

/* ═══ ВСЕ КРЕСТИКИ ЗАКРЫТИЯ — идеально круглые (на всех модалках, всех экранах, десктоп тоже) ═══ */
.pm-close,.sm-close,.gm-close,.modal-close,.cp-close,.pp-close,.wm-close,.cropper-x{
  width:36px!important;height:36px!important;
  min-width:36px!important;min-height:36px!important;
  max-width:36px!important;max-height:36px!important;
  flex:0 0 36px!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  padding:0!important;
  box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:1!important;
}
@media(max-width:380px){
  .pm-close,.sm-close,.gm-close,.modal-close,.cp-close,.pp-close,.wm-close,.cropper-x{
    width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
    max-width:32px!important;max-height:32px!important;flex:0 0 32px!important;
  }
}

/* Ник на карточках главной ленты — меньше (как в батле), с обрезкой */
@media(max-width:768px){
  .br-photo-name{
    font-size:12px!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  .br-verified{width:13px!important;height:13px!important}
  .br-name-arrow{font-size:13px!important}
}
@media(max-width:380px){
  .br-photo-name{font-size:11px!important}
}

/* ═══ ФОН ЗА НИКНЕЙМОМ УДАЛЁН — на всех страницах, телефон и десктоп ═══ */
/* тёмные градиенты-подложки внизу фото — убраны */
.br-grad{background:none!important}
.duel-grad{background:none!important}
/* тяжёлые тени-ореолы у ника — убраны (осталась микро-тень для читаемости букв) */
.br-photo-name{text-shadow:0 1px 3px rgba(0,0,0,.45)!important;background:none!important}
.duel-name{text-shadow:0 1px 3px rgba(0,0,0,.45)!important;background:none!important}
.duel-info{text-shadow:none!important;background:none!important}
.br-name-link{background:none!important}

/* ═══ Фирменная монета VS (вместо эмодзи 🪙) ═══ */
.vcoin{
  height:1.05em;width:auto;
  display:inline-block;vertical-align:-0.14em;
  margin:0 1px;
}

/* ═══════════════════════════════════════════════════════════════
   ЧИТАЕМОСТЬ: сайт светлее, текст и кнопки ярче (глобально).
   Меняются переменные — действует на весь сайт сразу.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* фоны — заметно светлее, но стиль остаётся тёмным/неоновым */
  --bg:#12121c;
  --bg1:#1b1b28;
  --bg2:#242433;
  --bg3:#2e2e40;
  /* текст — ярче: главный чисто-белый, вторичный хорошо читаемый */
  --t1:#ffffff;
  --t2:#c2c2d4;
  --t3:#8a8aa2;
  /* границы заметнее */
  --br:rgba(255,255,255,.14);
}
/* Вторичные кнопки (фильтры и подобные) — светлый текст, виднее фон */
.htf-tab,.btf-tab{
  color:#eaeaf4!important;
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.18)!important;
}
/* Активные фильтры остаются акцентными — их не трогаем */
.htf-tab.active,.btf-tab.active{color:#fff!important}
/* Плейсхолдеры в полях — читаемее */
input::placeholder,textarea::placeholder{color:#9a9ab2!important;opacity:1}

/* ═══════════════════════════════════════════════════════════════
   ВСЕ МОДАЛКИ — ПО ЦЕНТРУ ЭКРАНА (телефон и десктоп), с крестиком.
   Раньше выезжали шторкой снизу — теперь как «Политика»: по центру.
   ═══════════════════════════════════════════════════════════════ */
.share-modal-bg,.gift-modal-bg,.edit-modal-bg,.withdraw-modal-bg,.pmodal-bg{
  align-items:center!important;
  padding:18px!important;
}
.share-modal,.gift-modal,.edit-modal,.withdraw-modal,.pmodal{
  position:relative!important;
  border-radius:24px!important;
  border:1px solid var(--br)!important;
  width:100%!important;
  max-width:480px!important;
  max-height:90vh!important;
  overflow-y:auto!important;
}
.pmodal{max-width:560px!important}
/* выезд снизу больше не нужен — окно просто появляется по центру */
.withdraw-modal{transform:none!important}
.withdraw-modal-bg.open .withdraw-modal{transform:none!important}
/* полоска-«ручка» шторки не нужна у центрированного окна */
.em-handle{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА (день). Включается кнопкой в меню; по умолчанию —
   как в системе пользователя. Акценты бренда не меняются.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"]{
  --bg:#f3f2f8;
  --bg1:#ffffff;
  --bg2:#f1f0f6;
  --bg3:#e7e6ef;
  --t1:#17171f;
  --t2:#4c4c60;
  --t3:#8b8b9c;
  --br:rgba(20,20,40,.13);
}
html[data-theme="light"] body{
  background:radial-gradient(ellipse at top,#ffffff 0%,#f4f2fa 55%,#edeaf4 100%);
  background-attachment:fixed;
  color:var(--t1);
}
html[data-theme="light"] nav{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,246,251,.88));
  border-bottom:1px solid rgba(20,20,40,.08);
}
html[data-theme="light"] .mob-nav{
  background:rgba(255,255,255,.95);
  border-top:1px solid rgba(20,20,40,.08);
}
/* фильтры и вторичные кнопки: тёмный текст на светлом */
html[data-theme="light"] .htf-tab,
html[data-theme="light"] .btf-tab{
  color:#2b2b3c!important;
  background:rgba(20,20,40,.06)!important;
  border-color:rgba(20,20,40,.15)!important;
}
html[data-theme="light"] .htf-tab.active,
html[data-theme="light"] .btf-tab.active{color:#fff!important}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:#84849a!important}
/* ники поверх фото остаются белыми с тенью — читаемо на любом фото */
html[data-theme="light"] .duel-name,
html[data-theme="light"] .br-photo-name{color:#fff!important}

/* ═══ СВЕТЛАЯ ТЕМА v2 — автоматическая дочистка всех тёмных пятен ═══ */
html[data-theme="light"] .battle-mega-timer,
html[data-theme="light"] .battle-row,
html[data-theme="light"] .bc-avatar.bl,
html[data-theme="light"] .cc-box,
html[data-theme="light"] .cp-modal,
html[data-theme="light"] .cp-search,
html[data-theme="light"] .cropper,
html[data-theme="light"] .cropper-stage,
html[data-theme="light"] .edit-modal-bg,
html[data-theme="light"] .fb-photo::after,
html[data-theme="light"] .gift-send-btn.gm-send-topup,
html[data-theme="light"] .hh-stat,
html[data-theme="light"] .hr-card,
html[data-theme="light"] .hr-photos,
html[data-theme="light"] .hr-rank,
html[data-theme="light"] .mob-nav,
html[data-theme="light"] .modal-bg,
html[data-theme="light"] .nav-avatar img,
html[data-theme="light"] .pm-card-loading,
html[data-theme="light"] .pm-card-remove,
html[data-theme="light"] .pmodal,
html[data-theme="light"] .pod-photo,
html[data-theme="light"] .pp-modal,
html[data-theme="light"] .prof-ava,
html[data-theme="light"] .prof-ava-edit,
html[data-theme="light"] .prof-cover-edit,
html[data-theme="light"] .prof-cover-overlay,
html[data-theme="light"] .prof-cover:hover .prof-cover-overlay,
html[data-theme="light"] .ref-link-wrap,
html[data-theme="light"] .ref-stat,
html[data-theme="light"] .report-modal-box,
html[data-theme="light"] .report-success-btn,
html[data-theme="light"] .report-success-icon,
html[data-theme="light"] .rr-photo,
html[data-theme="light"] .share-modal-backdrop,
html[data-theme="light"] .withdraw-modal-backdrop{
  background:var(--bg1)!important;
  border-color:var(--br)!important;
  backdrop-filter:none!important;
}
html[data-theme="light"] .bc-more:hover,
html[data-theme="light"] .cc-btn-cancel,
html[data-theme="light"] .cc-btn-cancel:hover,
html[data-theme="light"] .cc-msg,
html[data-theme="light"] .cropper-btn.ghost,
html[data-theme="light"] .cropper-title,
html[data-theme="light"] .cropper-x,
html[data-theme="light"] .cropper-zbtn,
html[data-theme="light"] .fb-name,
html[data-theme="light"] .finished-winner,
html[data-theme="light"] .lang-btn:hover,
html[data-theme="light"] .modal-close:hover,
html[data-theme="light"] .pay-item:hover,
html[data-theme="light"] .pm-back:hover,
html[data-theme="light"] .pm-card-label,
html[data-theme="light"] .pm-card-remove,
html[data-theme="light"] .pm-close:hover,
html[data-theme="light"] .pm-dur-chip .pdc-n,
html[data-theme="light"] .pm-dur-chip.active .pdc-n,
html[data-theme="light"] .pm-dur-chip.active .pdc-u,
html[data-theme="light"] .pm-dur-label,
html[data-theme="light"] .pm-inp,
html[data-theme="light"] .pm-mode-btn,
html[data-theme="light"] .pm-mode-title,
html[data-theme="light"] .pm-slot-name,
html[data-theme="light"] .pp-close,
html[data-theme="light"] .pp-extra,
html[data-theme="light"] .pp-level-name,
html[data-theme="light"] .pp-name,
html[data-theme="light"] .pp-social-btn,
html[data-theme="light"] .prof-cover-edit,
html[data-theme="light"] .ref-share-btn,
html[data-theme="light"] .report-modal-title,
html[data-theme="light"] .report-reason-btn,
html[data-theme="light"] .report-success-title,
html[data-theme="light"] .share-social-btn,
html[data-theme="light"] .vf-text b,
html[data-theme="light"] .vote-cta-btn,
html[data-theme="light"] .vote-popup-sub b,
html[data-theme="light"] .vote-popup-title{
  color:var(--t1)!important;
  text-shadow:none!important;
}

/* доводки светлой темы */
html[data-theme="light"] .side-menu{background:#fff;border-left:1px solid var(--br)}
html[data-theme="light"] .search-wrap{background:var(--bg2)!important;border:1px solid var(--br)!important}
html[data-theme="light"] .search-input{color:var(--t1)!important}
html[data-theme="light"] .bmt-time{color:#5b21b6!important;text-shadow:none!important}
html[data-theme="light"] .toast{background:#fff!important;color:var(--t1)!important;border:1px solid var(--br)!important;box-shadow:0 8px 30px rgba(20,20,40,.18)!important}
html[data-theme="light"] .mob-tab{color:var(--t3)}
html[data-theme="light"] .mob-tab.active{color:var(--acc)}
html[data-theme="light"] .sm-item{color:var(--t1)!important}
html[data-theme="light"] .settings-item{background:var(--bg1)!important;border-color:var(--br)!important}

/* «VS» между фото батла — убран (по просьбе владельца) */
.duel-vs{display:none!important}

/* ═══ Красивый переключатель темы 🌙/☀️ в меню ═══ */
.theme-switch{
  margin-left:auto;
  width:54px;height:30px;flex:0 0 54px;
  border-radius:999px;position:relative;
  background:linear-gradient(135deg,#23233a,#14141f);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45);
  transition:background .35s,border-color .35s;
}
.ts-knob{
  position:absolute;top:2px;left:2px;
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#3b3b55,#262639);
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:left .35s cubic-bezier(.34,1.4,.64,1),background .35s;
}
/* светлая тема: капсула «дневная», ползунок уезжает вправо, солнце */
html[data-theme="light"] .theme-switch{
  background:linear-gradient(135deg,#ffd98a,#ffbde0);
  border-color:rgba(20,20,40,.15);
  box-shadow:inset 0 2px 6px rgba(120,80,0,.15);
}
html[data-theme="light"] .ts-knob{
  left:26px;
  background:linear-gradient(135deg,#fff,#ffe9c9);
  border-color:rgba(20,20,40,.12);
  box-shadow:0 2px 8px rgba(120,80,20,.35);
}

/* ═══ СВЕТЛАЯ ТЕМА v3 — расширенная дочистка (все оттенки тёмного, все селекторы групп) ═══ */
html[data-theme="light"] .battle-mega-timer,
html[data-theme="light"] .battle-row,
html[data-theme="light"] .bc-avatar,
html[data-theme="light"] .bc-avatar.bl,
html[data-theme="light"] .bc-compose,
html[data-theme="light"] .bc-more,
html[data-theme="light"] .cc-box,
html[data-theme="light"] .cp-modal,
html[data-theme="light"] .cp-search,
html[data-theme="light"] .cropper,
html[data-theme="light"] .cropper-stage,
html[data-theme="light"] .edit-modal-bg,
html[data-theme="light"] .fb-photo::after,
html[data-theme="light"] .gift-send-btn.gm-send-topup,
html[data-theme="light"] .hh-stat,
html[data-theme="light"] .hr-bar-r,
html[data-theme="light"] .hr-card,
html[data-theme="light"] .hr-photos,
html[data-theme="light"] .hr-rank,
html[data-theme="light"] .live-dot,
html[data-theme="light"] .logo-dot,
html[data-theme="light"] .mob-nav,
html[data-theme="light"] .modal-bg,
html[data-theme="light"] .nav-avatar img,
html[data-theme="light"] .pm-card-loading,
html[data-theme="light"] .pm-card-remove,
html[data-theme="light"] .pm-dur-chip.active,
html[data-theme="light"] .pm-dur-track-fill,
html[data-theme="light"] .pm-dur-value,
html[data-theme="light"] .pmodal,
html[data-theme="light"] .pod-photo,
html[data-theme="light"] .pp-avatar-fallback,
html[data-theme="light"] .pp-modal,
html[data-theme="light"] .prof-ava,
html[data-theme="light"] .prof-ava-edit,
html[data-theme="light"] .prof-cover-edit,
html[data-theme="light"] .prof-cover-overlay,
html[data-theme="light"] .prof-cover:hover .prof-cover-overlay,
html[data-theme="light"] .ref-link-wrap,
html[data-theme="light"] .ref-stat,
html[data-theme="light"] .report-modal-box,
html[data-theme="light"] .report-success-btn,
html[data-theme="light"] .report-success-icon,
html[data-theme="light"] .rr-photo,
html[data-theme="light"] .share-modal-backdrop,
html[data-theme="light"] .sk-row,
html[data-theme="light"] .vf-avatar,
html[data-theme="light"] .vf-live-dot,
html[data-theme="light"] .vote-popup-inner,
html[data-theme="light"] .vs-fill.r,
html[data-theme="light"] .withdraw-modal-backdrop{
  background:var(--bg1)!important;
  border-color:var(--br)!important;
  backdrop-filter:none!important;
}
html[data-theme="light"] .bc-count,
html[data-theme="light"] .bc-emoji-btn:hover,
html[data-theme="light"] .bc-likes .bc-liked,
html[data-theme="light"] .bc-likes button:hover,
html[data-theme="light"] .bc-more:hover,
html[data-theme="light"] .bc-tag.pk,
html[data-theme="light"] .bc-title svg,
html[data-theme="light"] .bmt-finished-sub,
html[data-theme="light"] .bmt-units,
html[data-theme="light"] .btf-tab,
html[data-theme="light"] .btf-tab.active,
html[data-theme="light"] .cc-btn-cancel,
html[data-theme="light"] .cc-btn-cancel:hover,
html[data-theme="light"] .cc-msg,
html[data-theme="light"] .cropper-btn.ghost,
html[data-theme="light"] .cropper-hint,
html[data-theme="light"] .cropper-title,
html[data-theme="light"] .cropper-x,
html[data-theme="light"] .cropper-zbtn,
html[data-theme="light"] .fb-meta-time,
html[data-theme="light"] .fb-name,
html[data-theme="light"] .fb-pct.l,
html[data-theme="light"] .fb-tag,
html[data-theme="light"] .finished-banner-sub,
html[data-theme="light"] .finished-winner,
html[data-theme="light"] .hr-card:nth-child(1) .hr-rank,
html[data-theme="light"] .hr-foot .hr-pcts .hr-l,
html[data-theme="light"] .hr-link,
html[data-theme="light"] .hr-link:hover,
html[data-theme="light"] .hr-rank,
html[data-theme="light"] .lang-btn:hover,
html[data-theme="light"] .mb-delete,
html[data-theme="light"] .mb-pct-b,
html[data-theme="light"] .mb-time,
html[data-theme="light"] .mb-waiting-lbl,
html[data-theme="light"] .mb-winner.mb-tie,
html[data-theme="light"] .modal-close,
html[data-theme="light"] .modal-close:hover,
html[data-theme="light"] .nav-stat:nth-child(2) strong,
html[data-theme="light"] .pay-item:hover,
html[data-theme="light"] .pm-back,
html[data-theme="light"] .pm-back:hover,
html[data-theme="light"] .pm-card-hint,
html[data-theme="light"] .pm-card-label,
html[data-theme="light"] .pm-card-remove,
html[data-theme="light"] .pm-close,
html[data-theme="light"] .pm-close:hover,
html[data-theme="light"] .pm-dur-chip .pdc-n,
html[data-theme="light"] .pm-dur-chip .pdc-u,
html[data-theme="light"] .pm-dur-chip.active .pdc-n,
html[data-theme="light"] .pm-dur-chip.active .pdc-u,
html[data-theme="light"] .pm-dur-label,
html[data-theme="light"] .pm-dur-mark,
html[data-theme="light"] .pm-field-counter,
html[data-theme="light"] .pm-field-counter.danger,
html[data-theme="light"] .pm-field-counter.warn,
html[data-theme="light"] .pm-field-lbl,
html[data-theme="light"] .pm-inp,
html[data-theme="light"] .pm-inp::placeholder,
html[data-theme="light"] .pm-inp:focus,
html[data-theme="light"] .pm-mode-btn,
html[data-theme="light"] .pm-mode-desc,
html[data-theme="light"] .pm-mode-title,
html[data-theme="light"] .pm-slot-name,
html[data-theme="light"] .pm-slot-name::placeholder,
html[data-theme="light"] .pm-slot-name:focus,
html[data-theme="light"] .pm-spinner,
html[data-theme="light"] .pm-sub,
html[data-theme="light"] .pm-success-sub,
html[data-theme="light"] .pm-vs-divider,
html[data-theme="light"] .pp-bio,
html[data-theme="light"] .pp-close,
html[data-theme="light"] .pp-country,
html[data-theme="light"] .pp-extra,
html[data-theme="light"] .pp-level-name,
html[data-theme="light"] .pp-level-score,
html[data-theme="light"] .pp-level-sub,
html[data-theme="light"] .pp-name,
html[data-theme="light"] .pp-social-btn,
html[data-theme="light"] .pp-stat-lbl,
html[data-theme="light"] .pp-username,
html[data-theme="light"] .prof-cover-edit,
html[data-theme="light"] .ref-share-btn,
html[data-theme="light"] .report-modal-sub,
html[data-theme="light"] .report-modal-title,
html[data-theme="light"] .report-reason-arrow,
html[data-theme="light"] .report-reason-btn,
html[data-theme="light"] .report-reason-btn:hover .report-reason-arrow,
html[data-theme="light"] .report-success-sub,
html[data-theme="light"] .report-success-title,
html[data-theme="light"] .share-social-btn,
html[data-theme="light"] .sk-row,
html[data-theme="light"] .sk-row:hover,
html[data-theme="light"] .vf-collapsible.open .vf-chevron,
html[data-theme="light"] .vf-text .vf-target.pk,
html[data-theme="light"] .vf-text b,
html[data-theme="light"] .vote-cta-btn,
html[data-theme="light"] .vote-popup-sub,
html[data-theme="light"] .vote-popup-sub b,
html[data-theme="light"] .vote-popup-title,
html[data-theme="light"] .vs-side.l .vs-pct,
html[data-theme="light"] .wb-delete{
  color:var(--t1)!important;
  text-shadow:none!important;
}

/* точечные доводки по скринам */
html[data-theme="light"] .htf-tab.active,
html[data-theme="light"] .btf-tab.active{
  background:linear-gradient(135deg,var(--acc),#7c3aed)!important;
  color:#fff!important;border-color:transparent!important;
}
html[data-theme="light"] [data-i="pay_via"]{color:var(--t1)!important}
html[data-theme="light"] .bmt-label{color:#a21caf!important}
html[data-theme="light"] .bmt{background:var(--bg1)!important;border:1px solid var(--br)!important}
/* ники на фото — по-прежнему белые */
html[data-theme="light"] .duel-name,
html[data-theme="light"] .br-photo-name{color:#fff!important}

/* ═══ Светлая тема: карточка баланса и логотип (по скрину) ═══ */
html[data-theme="light"] .wallet-balance-card{
  background:linear-gradient(135deg,#ffffff,#f6effa)!important;
  border:1px solid var(--br)!important;
}
html[data-theme="light"] .wallet-balance-card::before{display:none!important}
html[data-theme="light"] .wbc-label{color:var(--t2)!important}
html[data-theme="light"] .wbc-amount{color:var(--t1)!important;text-shadow:none!important}
html[data-theme="light"] .wbc-rub{color:var(--t2)!important}
html[data-theme="light"] .wbc-btns button:not(.wbc-topup){
  background:rgba(20,20,40,.06)!important;color:#2b2b3c!important;border:1px solid rgba(20,20,40,.15)!important;
}
/* Логотип Versuz: в светлой теме тёмный градиент — читаемый */
html[data-theme="light"] .logo{
  background:linear-gradient(120deg,#1c1030 0%,#c02574 55%,#4338ca 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}

/* Панели Live-голоса и Комментарии: были жёстко тёмными, теперь адаптивны под светлую тему */
html[data-theme="light"] .vote-feed,
html[data-theme="light"] .battle-comments{
  background:var(--bg1)!important;
  border-color:var(--br)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.06)!important;
}
html[data-theme="light"] .battle-share-label{
  color:var(--t1)!important;
  background:var(--bg1)!important;
  text-shadow:none!important;
  border-color:var(--br)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.1)!important;
}

/* Контент новостного поста в окне уведомления */
.notif-post-content h1{font-size:22px;font-weight:800;margin:14px 0 8px;line-height:1.25}
.notif-post-content h2{font-size:19px;font-weight:800;margin:12px 0 7px;line-height:1.3}
.notif-post-content h3{font-size:16px;font-weight:700;margin:10px 0 6px;line-height:1.35}
.notif-post-content p{margin:8px 0}
.notif-post-content ul,.notif-post-content ol{margin:8px 0;padding-left:24px}
.notif-post-content li{margin:4px 0}
.notif-post-content a{color:var(--acc);text-decoration:underline;word-break:break-word}
.notif-post-content img{max-width:100%;height:auto;border-radius:10px;margin:10px 0}
.notif-post-content blockquote{margin:10px 0;padding:8px 14px;border-left:3px solid var(--acc);background:var(--bg2);border-radius:0 8px 8px 0;color:var(--t2)}
.notif-post-content b,.notif-post-content strong{font-weight:800}



/* ═══════════════════════════════════════════════════════════════
   ПОДПИСКИ + ВИТРИНА ПОДАРКОВ + СВЕЧЕНИЕ АВАТАРА
   ═══════════════════════════════════════════════════════════════ */

/* Пульсирующее neon-glow свечение аватара — как будто "заряжен энергией" */
@keyframes avaGlowPulse{
  0%,100%{box-shadow:0 0 0 2px var(--acc), 0 0 18px 2px var(--accG)}
  50%{box-shadow:0 0 0 3px var(--acc), 0 0 32px 8px rgba(230,61,111,.55)}
}
.prof-ava{animation:avaGlowPulse 2.8s ease-in-out infinite}
.pp-avatar{animation:avaGlowPulse 2.8s ease-in-out infinite}

/* Подписчики / подписки — аккуратные плашки под ником */
/* ═══ Подписки в профиле: карточка с секциями ═══ */
.prof-social{
  display:flex;align-items:stretch;gap:10px;
  justify-content:center;
  margin:14px 0 4px;
}
.social-card{
  flex:1;display:flex;align-items:stretch;
  background:var(--bg1);
  border:1px solid var(--br);
  border-radius:16px;
  overflow:hidden;
}
.sc-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:13px 8px;
  background:none;border:none;cursor:pointer;
  font-family:inherit;
  transition:background .16s;
}
.sc-item:hover{background:var(--bg2)}
.sc-item:active{background:var(--bg3)}
.sc-num{
  font-size:20px;font-weight:900;color:var(--t1);
  line-height:1;letter-spacing:-.02em;
}
.sc-lbl{
  font-size:11px;font-weight:600;color:var(--t2);
  text-transform:lowercase;letter-spacing:.01em;
}
.sc-div{
  width:1px;align-self:stretch;
  background:var(--br);
  flex-shrink:0;
}

/* Ссылка на Instagram — отдельной плиткой того же роста */
.social-ig{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:13px 16px;min-width:96px;
  border-radius:16px;text-decoration:none;
  background:linear-gradient(135deg,rgba(225,48,108,.13),rgba(131,58,180,.13));
  border:1px solid rgba(225,48,108,.32);
  color:#e1306c;
  transition:all .16s;
}
.social-ig svg{flex-shrink:0}
.social-ig span{
  font-size:11.5px;font-weight:700;
  max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.social-ig:hover{
  background:linear-gradient(135deg,rgba(225,48,108,.22),rgba(131,58,180,.22));
  border-color:rgba(225,48,108,.55);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(225,48,108,.18);
}
.social-ig:active{transform:translateY(0)}
html[data-theme="light"] .social-ig{color:#c13584}

/* Телефоны */
@media(max-width:520px){
  .prof-social{gap:8px;margin:12px 0 4px}
  .sc-item{padding:11px 6px}
  .sc-num{font-size:18px}
  .sc-lbl{font-size:10.5px}
  .social-ig{padding:11px 12px;min-width:84px}
  .social-ig span{font-size:11px;max-width:80px}
}
@media(max-width:380px){
  .social-ig{min-width:64px;padding:11px 9px}
  .social-ig span{display:none}   /* очень узко — оставляем только иконку */
}

/* Витрина подарков — горизонтальная плашка над "Последние батлы" */
.gift-showcase{
  background:var(--bg1);border:1px solid var(--br);border-radius:16px;
  padding:14px 0 14px 16px;margin-bottom:16px;
}
.gs-header{
  font-size:14px;font-weight:800;color:var(--t1);margin-bottom:10px;padding-right:16px;
  display:flex;align-items:center;gap:6px;
}
.gs-scroll{
  display:flex;gap:10px;overflow-x:auto;overflow-y:visible;padding-bottom:2px;padding-right:16px;padding-top:8px;
  scrollbar-width:none;
}
.gs-scroll::-webkit-scrollbar{display:none}
.gs-item{
  position:relative;flex-shrink:0;width:64px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .15s;
}
.gs-item:active{transform:scale(.92)}
.gs-item-icon{
  width:56px;height:56px;border-radius:16px;
  background:var(--bg2);border:1.5px solid var(--br);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.gs-item:hover .gs-item-icon{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 6px 16px rgba(230,61,111,.25)}
.gs-item-icon img{width:36px;height:36px;object-fit:contain}
.gs-item-name{font-size:10.5px;color:var(--t2);font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}
.gs-badge{
  position:absolute;top:-4px;right:2px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  color:#fff;font-size:10px;font-weight:800;line-height:18px;text-align:center;
  border:2px solid var(--bg1);
}
.gs-empty{color:var(--t3);font-size:12.5px;padding-right:16px}

/* Микро-модалка тултипа подарка "От @user: сообщение" */
.gift-tip-modal{
  position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  isolation:isolate;
}
.gift-tip-card{
  background:var(--bg1);border:1px solid var(--br);border-radius:20px;
  width:100%;max-width:340px;padding:24px 22px;text-align:center;
  animation:legalPop .25s cubic-bezier(.34,1.3,.64,1);
}
.gift-tip-icon{width:64px;height:64px;object-fit:contain;margin:0 auto 12px}
.gift-tip-name{font-size:16px;font-weight:800;color:var(--t1);margin-bottom:2px}
.gift-tip-qty{font-size:12.5px;color:var(--t3);margin-bottom:14px}
.gift-tip-from{
  background:var(--bg2);border-radius:14px;padding:12px 14px;font-size:13.5px;
  color:var(--t1);line-height:1.5;text-align:left;margin-bottom:8px;
}
.gift-tip-from b{color:var(--acc)}
.gift-tip-more{font-size:11.5px;color:var(--t3)}
.gift-tip-close{
  margin-top:14px;width:100%;padding:11px;border:none;border-radius:12px;
  background:var(--bg3);color:var(--t1);font-weight:700;font-size:13.5px;cursor:pointer;
}

/* Список подписчиков/подписок */
.follow-list-modal{
  position:fixed;inset:0;z-index:9700;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.follow-list-card{
  background:var(--bg1);border:1px solid var(--br);border-radius:20px;
  width:100%;max-width:400px;max-height:80vh;display:flex;flex-direction:column;
  animation:legalPop .25s cubic-bezier(.34,1.3,.64,1);overflow:hidden;
}
.fl-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--br);flex-shrink:0}
.fl-title{font-size:16px;font-weight:800}
.fl-close{}
.fl-list{overflow-y:auto;padding:8px}
.fl-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;transition:background .15s}
.fl-item:hover{background:var(--bg2)}
.fl-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg3)}
.fl-info{flex:1;min-width:0}
.fl-name{font-size:14px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:4px}
.fl-username{font-size:12px;color:var(--t3)}
.fl-empty{padding:40px 20px;text-align:center;color:var(--t3);font-size:13px}

/* Композер личного сообщения */
.dm-compose-card{
  background:var(--bg1);border:1px solid var(--br);border-radius:20px;
  width:100%;max-width:380px;padding:22px;animation:legalPop .25s cubic-bezier(.34,1.3,.64,1);
}
.dm-compose-textarea{
  width:100%;min-height:90px;padding:12px 14px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--br);color:var(--t1);
  font-size:14px;font-family:inherit;resize:vertical;margin:12px 0;box-sizing:border-box;
}
.dm-compose-send{
  width:100%;padding:12px;border:none;border-radius:12px;cursor:pointer;
  font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
}

/* ═══ БЕЙДЖ ПОДАРКОВ = ТОЧНАЯ КОПИЯ БЕЙДЖА ЛАЙКОВ ═══
   Значения один-в-один скопированы с .duel-votes-badge (строки 4963+, медиа 768/380),
   отличается только цвет (золотой), чтобы визуально отделять от лайков.
   Бейдж лайков НЕ трогаем — он эталон. */
.duel-gifts-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:5px 12px!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.5)!important;
  backdrop-filter:blur(12px)!important;
  border:1px solid rgba(245,158,11,.35)!important;
  color:#fbbf24!important;
  box-shadow:none!important;
}
.duel-gifts-badge::before{
  content:'\1F381'!important;
  font-size:11px!important;
  line-height:1!important;
  display:inline-block!important;
  vertical-align:middle!important;
  margin:0!important;
}
/* Те же брейкпоинты и значения, что у лайков */
@media(max-width:768px){
  .duel-gifts-badge{padding:4px 9px!important;font-size:11px!important;gap:4px!important}
  .duel-gifts-badge::before{font-size:10px!important}
}
@media(max-width:380px){
  .duel-gifts-badge{padding:3px 7px!important;font-size:10px!important}
}
/* Счётчики чуть глубже внутрь фото, чтобы бейджи не заходили на скруглённый угол */
.duel-top-badges{right:12px!important}

/* ═══ Кликабельные @username по всему сайту ═══ */
.u-mention{
  color:var(--acc);
  font-weight:700;
  cursor:pointer;
  transition:opacity .15s;
}
.u-mention:hover{opacity:.75}
.u-mention,.u-mention:hover{text-decoration:none!important}

/* Аватар автора действия в уведомлениях */
.notif-actor-ava{
  width:34px;height:34px;border-radius:50%;
  object-fit:cover;flex-shrink:0;cursor:pointer;
  background:var(--bg3);
  border:1.5px solid var(--br);
  transition:border-color .15s,transform .15s;
}
.notif-actor-ava:hover{border-color:var(--acc);transform:scale(1.06)}
.notif-actor-ava-lg{width:48px;height:48px}
.notif-actor-fallback{
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:14px;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
}
.notif-actor-ava-lg.notif-actor-fallback{font-size:19px}

/* ═══ Ответы на комментарии и подсветка ═══ */
/* Плашка «Отвечаешь @кому» над полем ввода */
.bc-reply-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(230,61,111,.10);
  border:1px solid rgba(230,61,111,.28);
  border-radius:12px;padding:8px 12px;margin-bottom:8px;
  font-size:13px;color:var(--t2);
}
.bc-reply-bar b{color:var(--acc)}
.bc-reply-bar button{
  background:none;border:none;color:var(--t3);cursor:pointer;
  font-size:14px;line-height:1;padding:4px 6px;border-radius:6px;
}
.bc-reply-bar button:hover{background:rgba(255,255,255,.08);color:var(--t1)}

/* Ветка ответа — отступ и линия слева */
.bc-item.bc-reply{
  margin-left:34px;
  padding-left:14px;
  border-left:2px solid rgba(255,255,255,.10);
}
@media(max-width:520px){
  .bc-item.bc-reply{margin-left:20px;padding-left:10px}
}

/* Подсветка комментария, к которому перешли из уведомления */
@keyframes bcHighlightPulse{
  0%{background:rgba(230,61,111,.28)}
  100%{background:rgba(230,61,111,.10)}
}
.bc-item.bc-highlight{
  background:rgba(230,61,111,.10);
  border-radius:12px;
  box-shadow:0 0 0 2px rgba(230,61,111,.45);
  animation:bcHighlightPulse 1.2s ease-out;
  transition:background .4s, box-shadow .4s;
}

/* ═══ Обсуждение завершено (комментарии закрыты) ═══ */
.bc-locked{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg, rgba(230,61,111,.08), rgba(139,92,246,.08));
  border:1px solid var(--br);
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:14px;
}
.bcl-icon{
  width:42px;height:42px;flex-shrink:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--br);
}
.bcl-text{min-width:0}
.bcl-title{font-size:14px;font-weight:800;color:var(--t1);margin-bottom:3px}
.bcl-sub{font-size:12.5px;color:var(--t2);line-height:1.45}
@media(max-width:520px){
  .bc-locked{padding:14px;gap:11px}
  .bcl-icon{width:36px;height:36px;font-size:18px}
  .bcl-title{font-size:13px}
  .bcl-sub{font-size:11.5px}
}

/* ═══ Полоса голосования — адаптация под светлую тему ═══
   Была жёстко тёмной (градиент), из-за чего выделялась чёрным блоком на светлом фоне */
html[data-theme="light"] .vote-scale{
  background:var(--bg1)!important;
  border-color:var(--br)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.06)!important;
}
html[data-theme="light"] .vs-lbl{color:var(--t2)!important}
html[data-theme="light"] .vs-total{color:var(--t2)!important}
html[data-theme="light"] .vs-total strong{color:var(--t1)!important}
html[data-theme="light"] .vs-bar{
  background:rgba(0,0,0,.07)!important;
}

/* ═══ Кнопка «Пополнить» в окне подарка ═══
   Она по ошибке попала в общий список «сделать фон светлым» для светлой темы,
   из-за чего зелёная кнопка становилась белой, а белый текст на ней — невидимым. */
html[data-theme="light"] .gift-send-btn.gm-send-topup{
  background:linear-gradient(135deg,#22c55e,#16a34a)!important;
  color:#fff!important;
  border:none!important;
  backdrop-filter:none!important;
  box-shadow:0 4px 20px rgba(34,197,94,.4)!important;
}
html[data-theme="light"] .gift-send-btn{
  color:#fff!important;
}
html[data-theme="light"] .gift-send-btn:disabled{
  background:var(--bg3)!important;
  color:var(--t3)!important;
}
/* Иконка монеты масштабируется под размер текста — см. основное правило .vcoin выше */



/* ═══════════════════════════════════════════════════════════════
   ПОИСК В ШАПКЕ — компактное поле с выпадающими результатами
   ═══════════════════════════════════════════════════════════════ */
.nav-search{
  position:relative;
  display:flex;align-items:center;gap:7px;
  flex:0 1 210px;
  min-width:0;
  height:34px;
  padding:0 10px;
  border-radius:11px;
  background:var(--bg2);
  border:1px solid var(--br);
  transition:border-color .18s, background .18s, box-shadow .18s, flex-basis .22s;
}
.nav-search:hover{border-color:rgba(255,255,255,.16)}
.nav-search:focus-within{
  flex-basis:290px;
  border-color:var(--acc);
  background:var(--bg1);
  box-shadow:0 0 0 3px rgba(230,61,111,.14);
}
.ns-icon{color:var(--t3);flex-shrink:0;transition:color .18s}
.nav-search:focus-within .ns-icon{color:var(--acc)}
.ns-input{
  flex:1;min-width:0;
  background:none;border:none;outline:none;
  color:var(--t1);
  font-family:inherit;font-size:13px;font-weight:500;
  padding:0;
}
.ns-input::placeholder{color:var(--t3);font-weight:400}
.ns-clear{
  flex-shrink:0;
  width:22px;height:22px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.75);
  line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
}
.ns-clear:hover{background:var(--acc);color:#fff;border-color:transparent}
/* В светлой теме прежний фон (--bg3) сливался с полем поиска —
   круг был не виден, оставался как будто голый крестик */
html[data-theme="light"] .ns-clear{
  border-color:rgba(0,0,0,.14);
  background:rgba(0,0,0,.07);
  color:rgba(0,0,0,.55);
}
html[data-theme="light"] .ns-clear:hover{background:var(--acc);color:#fff;border-color:transparent}
/* Те же круги в светлой теме: прежний фон (--bg3) сливался с подложкой */
html[data-theme="light"] .dmd-del,
html[data-theme="light"] .drb-cancel{
  border-color:rgba(0,0,0,.14);
  background:rgba(0,0,0,.07);
  color:rgba(0,0,0,.55);
}
html[data-theme="light"] .drb-cancel:hover{background:var(--acc);color:#fff;border-color:transparent}
html[data-theme="light"] .dmd-del:hover{background:#ef4444;color:#fff;border-color:transparent}
html[data-theme="light"] .dm-act{
  border-color:rgba(0,0,0,.14);
  background:rgba(0,0,0,.07);
  color:rgba(0,0,0,.55);
}

/* Результаты — выпадающей панелью под полем */
.nav-search .ns-result{
  position:absolute;
  top:calc(100% + 8px);
  left:0;right:0;
  min-width:280px;
  max-height:min(420px, 60vh);
  overflow-y:auto;
  background:var(--bg1);
  border:1px solid var(--br);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  padding:6px;
  z-index:1200;
  display:none;
}
.nav-search .ns-result.show{display:block}
html[data-theme="light"] .nav-search .ns-result{
  box-shadow:0 16px 40px rgba(0,0,0,.14);
}

/* Планшет — поле уже */
@media(max-width:1100px){
  .nav-search{flex-basis:160px}
  .nav-search:focus-within{flex-basis:230px}
}
/* Узкие экраны — прячем поиск из шапки (на мобильных своя навигация) */
@media(max-width:860px){
  .nav-search{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   ЛИЧНЫЕ СООБЩЕНИЯ
   ═══════════════════════════════════════════════════════════════ */
/* Кнопки-иконки в шапке (сообщения) */
.nav-icon-btn{
  position:relative;
  background:none;border:none;cursor:pointer;
  padding:6px;margin-left:6px;line-height:1;
  color:var(--t1);
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,transform .15s;
}
.nav-icon-btn:hover{color:var(--acc);transform:translateY(-1px)}
.nav-icon-badge{
  position:absolute;top:0;right:0;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:#ef4444;color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
}

/* Окно мессенджера */
.dm-modal{
  position:fixed;inset:0;z-index:9800;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.dm-modal.open{display:flex}
.dm-window{
  display:flex;
  width:100%;max-width:900px;height:min(640px,86vh);
  background:var(--bg1);
  border:1px solid var(--br);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.5);
  animation:legalPop .25s cubic-bezier(.34,1.3,.64,1);
}
html[data-theme="light"] .dm-window{box-shadow:0 28px 70px rgba(0,0,0,.18)}

/* Левая колонка — диалоги */
.dm-side{
  width:300px;flex-shrink:0;
  display:flex;flex-direction:column;
  border-right:1px solid var(--br);
  background:var(--bg);
}
.dm-side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 14px;
  font-size:16px;font-weight:800;color:var(--t1);
  border-bottom:1px solid var(--br);
}
.dm-close{
}
.dm-close:hover{background:var(--acc);color:#fff}
.dm-dialogs{flex:1;overflow-y:auto;padding:8px}

.dmd-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;border-radius:13px;cursor:pointer;
  transition:background .15s;position:relative;
}
.dmd-item:hover{background:var(--bg2)}
.dmd-item.active{background:var(--bg2)}
.dmd-item.has-unread .dmd-last{color:var(--t1);font-weight:600}
.dmd-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg3)}
.dmd-ava-fb{
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:17px;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
}
.dmd-body{flex:1;min-width:0}
.dmd-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dmd-name{font-size:14px;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmd-time{font-size:11px;color:var(--t3);flex-shrink:0}
.dmd-last{font-size:12.5px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.dmd-you{color:var(--t3)}
.dmd-unread{
  min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--acc);color:#fff;font-size:11px;font-weight:800;
  line-height:19px;text-align:center;flex-shrink:0;
}
.dmd-del{
  position:absolute;top:6px;right:6px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .15s,background .15s,color .15s;z-index:2;
}
.dmd-item:hover .dmd-del{opacity:1;pointer-events:auto}
.dmd-del:hover{background:#ef4444;color:#fff;border-color:transparent}
@media(hover:none){.dmd-del{display:none}}

/* Правая колонка — переписка */
.dm-chat{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg1)}
.dm-chat-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--br);flex-shrink:0;
}
.dmc-ava{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--bg3)}
.dmc-info{min-width:0}
.dmc-name{font-size:15px;font-weight:800;color:var(--t1)}
.dmc-user{font-size:12px;color:var(--t2);cursor:pointer}
.dm-back{display:none;background:none;border:none;color:var(--t1);font-size:20px;cursor:pointer;padding:0 4px 0 0}

.dm-messages{
  flex:1;overflow-y:auto;padding:18px;
  display:flex;flex-direction:column;gap:7px;
}
.dm-day{
  align-self:center;margin:10px 0 4px;
  font-size:11.5px;color:var(--t3);
  background:var(--bg2);padding:4px 12px;border-radius:999px;
}
.dm-msg{display:flex;max-width:74%}
.dm-msg.mine{align-self:flex-end;justify-content:flex-end}
.dm-bubble{
  position:relative;
  padding:9px 13px 9px 13px;
  border-radius:16px;
  font-size:14px;line-height:1.45;
  color:var(--t1);
  background:var(--bg2);
  border:1px solid var(--br);
  word-break:break-word;white-space:pre-wrap;
}
.dm-msg.mine .dm-bubble{
  background:linear-gradient(135deg,#e63d6f,#c02574);
  color:#fff;border-color:transparent;
}
.dm-time{
  display:inline-block;margin-left:9px;
  font-size:10.5px;opacity:.65;vertical-align:baseline;
}
.dm-msg.sending .dm-bubble{opacity:.6}
.dm-msg.failed .dm-bubble{background:#7f1d1d;color:#fff}

.dm-compose{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-top:1px solid var(--br);flex-shrink:0;
}
.dm-input{
  flex:1;min-width:0;
  padding:11px 15px;border-radius:13px;
  background:var(--bg2);border:1px solid var(--br);
  color:var(--t1);font-family:inherit;font-size:14px;outline:none;
  transition:border-color .15s;
}
.dm-input:focus{border-color:var(--acc)}
.dm-send{
  width:42px;height:42px;flex-shrink:0;
  border:none;border-radius:13px;cursor:pointer;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .2s;
}
.dm-send:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(230,61,111,.4)}

.dm-empty,.dm-empty-list,.dm-loading{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--t3);font-size:13.5px;text-align:center;padding:30px;gap:10px;
}
.dm-empty-icon{font-size:44px;opacity:.5}

/* Мобильные: список и чат по очереди на весь экран */
@media(max-width:760px){
  .dm-modal{padding:0}
  .dm-window{max-width:100%;height:100%;border-radius:0;border:none}
  .dm-side{width:100%}
  .dm-chat{display:none}
  .dm-window.chat-open .dm-side{display:none}
  .dm-window.chat-open .dm-chat{display:flex}
  .dm-back{display:block}
  .dm-msg{max-width:86%}
}

/* Пустой список батлов на главной */
.home-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:60px 20px;text-align:center;
}
.home-empty-icon{font-size:52px;opacity:.55}
.home-empty-title{font-size:19px;font-weight:800;color:var(--t1)}
.home-empty-sub{font-size:13.5px;color:var(--t2)}
.home-empty-btn{
  margin-top:8px;padding:13px 30px;border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 8px 24px rgba(230,61,111,.35);
  transition:transform .15s,box-shadow .2s;
}
.home-empty-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(230,61,111,.45)}

/* Эмодзи в переписке */
.dm-input-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.dm-input-wrap .dm-input{width:100%;padding-right:44px}
.dm-emoji-btn{
  position:absolute;right:8px;
  width:30px;height:30px;
  border:none;border-radius:9px;background:none;
  color:var(--t3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,background .15s;
}
.dm-emoji-btn:hover{color:var(--acc);background:rgba(230,61,111,.1)}
.dm-emoji-picker{
  position:absolute;bottom:calc(100% + 10px);right:0;
  width:320px;
  background:var(--bg1);
  border:1px solid var(--br);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  padding:10px;z-index:60;
  display:flex;flex-direction:column;
  max-height:340px;
}
.dm-emoji-picker[hidden]{display:none}
html[data-theme="light"] .dm-emoji-picker{box-shadow:0 16px 40px rgba(0,0,0,.14)}
.dmep-tabs{
  display:flex;gap:4px;margin-bottom:8px;
  padding-bottom:8px;border-bottom:1px solid var(--br);
}
.dmep-tab{
  flex:1;padding:6px;border:none;border-radius:9px;
  background:none;cursor:pointer;font-size:17px;line-height:1;
  transition:background .15s;
}
.dmep-tab:hover{background:var(--bg2)}
.dmep-tab.active{background:var(--bg3)}
.dmep-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px;
  flex:1;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--bg3) transparent;
}
.dmep-grid::-webkit-scrollbar{width:5px}
.dmep-grid::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:3px}
.dmep-cell{
  border:none;background:none;cursor:pointer;
  font-size:20px;line-height:1;padding:5px;border-radius:8px;
  transition:background .12s,transform .12s;
}
.dmep-cell:hover{background:var(--bg2);transform:scale(1.15)}
@media(max-width:760px){
  .dm-emoji-picker{width:min(320px, calc(100vw - 32px));max-height:280px}
}

/* Галочки прочтения и удаление сообщений */
.dm-meta{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:9px;vertical-align:baseline;
}
.dm-meta .dm-time{margin-left:0}
.dm-ticks{
  font-size:11px;line-height:1;opacity:.6;letter-spacing:-1px;
  transition:opacity .2s,color .2s;
}
.dm-ticks.read{opacity:1;color:#7dd3fc}
.dm-msg.mine .dm-ticks.read{color:#bae6fd}

.dm-msg{position:relative;align-items:center;gap:6px}
.dm-actions{
  display:flex;gap:4px;flex-shrink:0;
  opacity:0;pointer-events:none;
  transition:opacity .15s;
}
.dm-msg:hover .dm-actions{opacity:1;pointer-events:auto}
/* У чужих сообщений кнопки справа от пузыря, у своих — слева */
.dm-msg:not(.mine){flex-direction:row-reverse;justify-content:flex-end}
.dm-act{
  width:24px;height:24px;
  border:1px solid rgba(255,255,255,.12);border-radius:50%;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.75);
  font-size:11px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,transform .15s;
}
.dm-act:hover{background:var(--acc);color:#fff;transform:scale(1.1)}
.dm-act-del:hover{background:#ef4444}
.dm-msg.deleting{opacity:.4;pointer-events:none}
/* На тач-устройствах кнопки не показываем — там долгое нажатие */
@media(hover:none){
  .dm-actions{display:none}
  .dm-msg.selected .dm-actions{display:flex;opacity:1;pointer-events:auto}
}
.dm-msg.selected .dm-actions{opacity:1;pointer-events:auto}
.dm-msg.selected .dm-bubble{box-shadow:0 0 0 2px var(--acc)}

/* Цитата внутри сообщения */
.dm-quote{
  display:flex;gap:8px;align-items:stretch;
  margin:-2px 0 6px;padding:5px 8px;
  background:rgba(255,255,255,.07);
  border-radius:9px;cursor:pointer;
  transition:background .15s;
}
.dm-quote:hover{background:rgba(255,255,255,.13)}
.dm-msg.mine .dm-quote{background:rgba(0,0,0,.18)}
.dm-msg.mine .dm-quote:hover{background:rgba(0,0,0,.26)}
.dm-quote-bar{width:3px;border-radius:2px;background:currentColor;opacity:.6;flex-shrink:0}
.dm-quote-text{
  font-size:12.5px;line-height:1.35;opacity:.8;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  white-space:normal;
}

/* Подсветка сообщения при переходе по цитате */
@keyframes dmFlash{
  0%{background:rgba(230,61,111,.30)}
  100%{background:transparent}
}
.dm-msg.dm-flash .dm-bubble{animation:dmFlash 1.6s ease-out}

/* Плашка «Ответить» над полем ввода */
.dm-reply-bar{
  display:flex;align-items:center;gap:10px;
  margin:0 18px;padding:9px 12px;
  background:var(--bg2);
  border:1px solid var(--br);
  border-radius:12px;
}
.dm-reply-bar .dm-quote-bar{background:var(--acc);opacity:1;width:3px;align-self:stretch}
.drb-body{flex:1;min-width:0}
.drb-title{font-size:11.5px;font-weight:800;color:var(--acc);margin-bottom:1px}
.drb-text{
  font-size:12.5px;color:var(--t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.drb-cancel{
  width:24px;height:24px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.12);border-radius:50%;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.75);
  font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.drb-cancel:hover{background:var(--acc);color:#fff;border-color:transparent}


/* ═══ Меню действий по долгому нажатию (телефоны) ═══ */
.dm-sheet{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .18s;
}
.dm-sheet.open{opacity:1}
.dm-sheet-box{
  width:100%;max-width:460px;
  margin:0 10px 10px;
  background:var(--bg1);
  border:1px solid var(--br);
  border-radius:20px;
  padding:8px;
  transform:translateY(16px);
  transition:transform .2s cubic-bezier(.34,1.2,.64,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.4);
}
.dm-sheet.open .dm-sheet-box{transform:translateY(0)}
.dm-sheet-preview{
  padding:10px 14px 12px;
  font-size:13px;color:var(--t2);
  border-bottom:1px solid var(--br);
  margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.dm-sheet-btn{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:14px 16px;
  border:none;border-radius:14px;
  background:none;color:var(--t1);
  font-family:inherit;font-size:15px;font-weight:600;text-align:left;
  cursor:pointer;transition:background .15s;
}
.dm-sheet-btn:active{background:var(--bg2)}
.dsb-ico{
  width:26px;text-align:center;
  font-size:15px;color:var(--t2);
}
.dm-sheet-btn.danger{color:#f87171}
.dm-sheet-btn.danger .dsb-ico{color:#f87171}
.dm-sheet-btn.cancel{
  justify-content:center;
  margin-top:6px;
  background:var(--bg2);
  color:var(--t2);font-weight:700;
}

/* ═══ Лайки сообщений (двойное нажатие) ═══ */
.dm-bubble{position:relative}
.dm-heart{
  position:absolute;bottom:-9px;right:8px;
  display:inline-flex;align-items:center;gap:2px;
  padding:2px 5px;border-radius:999px;
  background:var(--bg1);
  border:1px solid var(--br);
  font-size:11px;line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  user-select:none;
}
.dm-msg.mine .dm-heart{right:auto;left:8px}
.dm-heart i{font-style:normal;font-size:10px;font-weight:800;color:var(--t2)}
.dm-heart.mine-like{border-color:rgba(230,61,111,.5)}
@keyframes dmHeartPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.45)}
  100%{transform:scale(1)}
}
.dm-heart.pop{animation:dmHeartPop .32s ease-out}

/* Большое сердце при лайке */
@keyframes dmFlyHeart{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
  55%{opacity:1;transform:translate(-50%,-90%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-160%) scale(.85)}
}
.dm-fly-heart{
  position:absolute;left:50%;top:50%;
  font-size:34px;line-height:1;
  pointer-events:none;z-index:5;
  animation:dmFlyHeart .8s ease-out forwards;
}
/* Не выделять текст при быстрых двойных нажатиях */
.dm-messages .dm-bubble{-webkit-user-select:none;user-select:none}
.dm-messages{-webkit-tap-highlight-color:transparent}
/* Своё сердечко можно снять кликом */
.dm-heart.mine-like{cursor:pointer}
.dm-heart.mine-like:hover{border-color:var(--acc);background:var(--bg2)}


/* ═══ Подписки в чужом профиле ═══ */
.pp-social{margin:0 0 14px}
.pp-social .social-card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
}
.pp-social .sc-item:hover{background:rgba(255,255,255,.07)}
.pp-social .sc-num{color:#fff}
.pp-social .sc-lbl{color:rgba(255,255,255,.6)}
.pp-social .sc-div{background:rgba(255,255,255,.12)}
html[data-theme="light"] .pp-social .social-card{background:var(--bg2);border-color:var(--br)}
html[data-theme="light"] .pp-social .sc-num{color:var(--t1)}
html[data-theme="light"] .pp-social .sc-lbl{color:var(--t2)}

/* Кнопка «Написать» — ровно по центру */
.pp-actions{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin:14px 0 4px;
}
.pp-follow-btn{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:46px;padding:0 18px;
  border:none;border-radius:14px;
  cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:800;letter-spacing:-.01em;
  color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 6px 18px rgba(230,61,111,.32);
  transition:transform .16s,box-shadow .16s,background .16s,opacity .16s;
  white-space:nowrap;
}
.pp-follow-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(230,61,111,.42)}
.pp-follow-btn:active{transform:translateY(0) scale(.98)}
.pp-follow-btn.following{
  background:var(--bg2);
  color:var(--t2);
  border:1px solid var(--br);
  box-shadow:none;
}
.pp-follow-btn.following:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.pp-msg-btn{
  flex-shrink:0;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--br);border-radius:14px;
  cursor:pointer;
  color:var(--t1);
  background:var(--bg2);
  transition:transform .16s,background .16s,border-color .16s,color .16s;
}
.pp-msg-btn:hover{transform:translateY(-1px);background:var(--bg3);border-color:var(--acc);color:var(--acc)}
.pp-msg-btn:active{transform:translateY(0) scale(.96)}

/* ═══ Кнопка подписки в списке подписчиков ═══ */
.fl-avatar-fb{
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:17px;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
}
.fl-btn{
  flex-shrink:0;
  min-width:104px;
  padding:8px 14px;
  border:none;border-radius:11px;
  cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 4px 14px rgba(230,61,111,.3);
  transition:all .16s;
  white-space:nowrap;
}
.fl-btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(230,61,111,.4)}
.fl-btn:active{transform:scale(.97)}
.fl-btn:disabled{opacity:.6;cursor:default}
/* Уже подписан — приглушённая кнопка, как в Instagram */
.fl-btn.following{
  background:var(--bg3);
  color:var(--t2);
  border:1px solid var(--br);
  box-shadow:none;
}
.fl-btn.following:hover{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.45);
  color:#f87171;
  transform:none;box-shadow:none;
}
@media(max-width:420px){
  .fl-btn{min-width:0;padding:7px 11px;font-size:11.5px}
}

/* ═══ Вкладки «Чаты / Запросы» ═══ */
.dm-tabs{
  display:flex;gap:4px;padding:8px 10px 0;
  border-bottom:1px solid var(--br);
}
.dm-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 6px;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;
  color:var(--t2);
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.dm-tab:hover{color:var(--t1)}
.dm-tab.active{color:var(--acc);border-bottom-color:var(--acc)}
.dm-tab-badge{
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--acc);color:#fff;
  font-size:10.5px;font-weight:800;line-height:18px;text-align:center;
}

/* Кнопка меню в шапке диалога */
.dmc-menu-btn{
  margin-left:auto;flex-shrink:0;
  width:32px;height:32px;
  border:none;border-radius:9px;
  background:none;color:var(--t2);
  font-size:17px;line-height:1;cursor:pointer;
  transition:background .15s,color .15s;
  position:relative;
}
.dmc-menu-btn:hover{background:var(--bg2);color:var(--t1)}
.dm-popup-menu{
  position:absolute;top:100%;right:0;z-index:100;
  min-width:220px;background:var(--bg1);border:1px solid var(--br);border-radius:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.45);padding:6px;
  opacity:0;transform:translateY(-6px) scale(.96);
  transition:opacity .15s,transform .15s;pointer-events:none;
}
html[data-theme="light"] .dm-popup-menu{box-shadow:0 12px 36px rgba(0,0,0,.14)}
.dm-popup-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.dm-popup-menu .dm-sheet-btn{padding:10px 14px;border-radius:10px;font-size:14px}
.dm-popup-menu .dm-sheet-btn.cancel{display:none}
.dm-select-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;background:var(--bg2);border-top:1px solid var(--br);flex-shrink:0;
}
.dm-select-bar .dsb-count{font-size:13px;color:var(--t2);font-weight:600;flex:1}
.dm-select-bar .dsb-del{
  padding:8px 16px;border:none;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:800;color:#fff;background:#ef4444;
}
.dm-select-bar .dsb-del:disabled{opacity:.4;cursor:default}
.dm-select-bar .dsb-cancel{
  padding:8px 14px;border:none;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;background:var(--bg3);color:var(--t2);
}
.dm-msg .dm-sel-chk{display:none}
.dm-messages.select-mode .dm-msg .dm-sel-chk{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;
  border:2px solid var(--br);border-radius:50%;cursor:pointer;
}
.dm-messages.select-mode .dm-msg.chk-on .dm-sel-chk{background:var(--acc);border-color:var(--acc)}
.dm-messages.select-mode .dm-msg.chk-on .dm-sel-chk::after{content:'✓';color:#fff;font-size:12px;font-weight:800}
.dm-messages.select-mode .dm-actions{display:none!important}

/* Плашка входящего запроса */
.dm-request-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 18px;
  background:rgba(230,61,111,.08);
  border-bottom:1px solid var(--br);
  flex-wrap:wrap;
}
.drq-text{font-size:13px;color:var(--t2);font-weight:600}
.drq-actions{display:flex;gap:8px}
.drq-accept,.drq-decline{
  padding:8px 16px;border:none;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:800;
  transition:all .15s;
}
.drq-accept{
  color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 4px 14px rgba(34,197,94,.3);
}
.drq-accept:hover{transform:translateY(-1px)}
.drq-decline{background:var(--bg3);color:var(--t2)}
.drq-decline:hover{background:rgba(239,68,68,.15);color:#f87171}

/* Плашка блокировки вместо поля ввода */
.dm-blocked-bar{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 18px;
  border-top:1px solid var(--br);
  font-size:13px;color:var(--t2);
  flex-wrap:wrap;text-align:center;
}
.dbb-unblock{
  padding:8px 16px;border:none;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:800;
  color:#fff;background:linear-gradient(135deg,#e63d6f,#8b5cf6);
}
.dbb-unblock:hover{transform:translateY(-1px)}

/* Пометка «запрос» в списке диалогов */
.dmd-item.is-request .dmd-name::after{
  content:'•';
  color:var(--acc);
  margin-left:6px;
  font-size:16px;
  line-height:0;
}

/* ═══ Окно подтверждения (вместо системного confirm) ═══ */
.vz-confirm{
  position:fixed;inset:0;z-index:10500;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s;
}
.vz-confirm.open{opacity:1}
.vzc-box{
  width:100%;max-width:360px;
  background:var(--bg1);
  border:1px solid var(--br);
  border-radius:20px;
  padding:26px 24px 20px;
  text-align:center;
  transform:scale(.94);
  transition:transform .2s cubic-bezier(.34,1.3,.64,1);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.vz-confirm.open .vzc-box{transform:scale(1)}
html[data-theme="light"] .vzc-box{box-shadow:0 24px 60px rgba(0,0,0,.18)}
.vzc-icon{
  width:56px;height:56px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;font-size:26px;
  background:var(--bg2);
  border:1px solid var(--br);
}
.vzc-icon.danger{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.3);
}
.vzc-title{font-size:17px;font-weight:800;color:var(--t1);line-height:1.3}
.vzc-text{
  margin-top:8px;
  font-size:13.5px;color:var(--t2);line-height:1.5;
}
.vzc-actions{display:flex;gap:10px;margin-top:22px}
.vzc-btn{
  flex:1;padding:13px;border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:800;
  transition:all .15s;
}
.vzc-cancel{background:var(--bg3);color:var(--t2)}
.vzc-cancel:hover{background:var(--bg2);color:var(--t1)}
.vzc-ok{
  color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 6px 18px rgba(230,61,111,.3);
}
.vzc-ok:hover{transform:translateY(-1px)}
.vzc-ok.danger{
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  box-shadow:0 6px 18px rgba(239,68,68,.35);
}
.vzc-btn:active{transform:scale(.97)}

/* ═══ Предложение доставить сообщение за монеты ═══ */
.dm-direct-offer{
  position:relative;
  align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:340px;width:100%;
  margin:10px 0 4px;padding:16px 18px;
  background:linear-gradient(135deg,rgba(230,61,111,.10),rgba(139,92,246,.10));
  border:1px solid rgba(230,61,111,.28);
  border-radius:16px;
  text-align:center;
}
.ddo-text{font-size:13px;color:var(--t2);line-height:1.5}
.ddo-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 20px;border:none;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 6px 18px rgba(230,61,111,.32);
  transition:transform .15s,box-shadow .2s,opacity .2s;
}
.ddo-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(230,61,111,.42)}
.ddo-btn:active{transform:scale(.97)}
.ddo-btn:disabled{opacity:.6;cursor:default;transform:none}
.ddo-close{position:absolute;top:8px;right:8px;width:24px;height:24px;
  background:var(--bg3);color:var(--t2);
  font-size:10px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.ddo-close:hover{background:var(--acc);color:#fff}

/* ═══ Затемнение за модальными окнами ═══
   Фон-затемнение по ошибке попадал в общий список «сделать светлым»
   для светлой темы — из-за этого страница за окном становилась белой
   вместо полупрозрачного затемнения. */
html[data-theme="light"] .share-modal-backdrop,
html[data-theme="light"] .gift-modal-backdrop,
html[data-theme="light"] .edit-modal-backdrop,
html[data-theme="light"] .withdraw-modal-backdrop,
html[data-theme="light"] .pmodal-backdrop{
  background:rgba(0,0,0,.35)!important;
  border:none!important;
  backdrop-filter:blur(4px)!important;
}
/* Тёмная тема — затемнение чуть плотнее */
.share-modal-backdrop,
.gift-modal-backdrop,
.edit-modal-backdrop,
.withdraw-modal-backdrop,
.pmodal-backdrop{
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
}

/* Превью «Поделиться» для батла, ждущего соперника */
.sm-preview-wait{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg3);
  border:2px dashed var(--br);
  color:var(--t3);
  font-size:22px;font-weight:800;
}

/* ═══ Кроппер — поверх всех окон ═══
   Он открывается ИЗ других окон (создание батла, приём вызова по ссылке,
   комната), поэтому его слой должен быть выше них. Раньше кроппер был
   ниже окна вызова и открывался под ним — казалось, что вместо обрезки
   снова показывается окно «Тебя вызвали на батл». */
.cropper-bg{ z-index:10200!important; }

/* ═══════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ: единая ширина блоков на странице батла.
   Раньше фото были с отступом 16px, комментарии 10px, а полоса
   голосов и кнопка «Следующий батл» — во всю ширину экрана.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .vote-scale{
    margin-left:16px!important;
    margin-right:16px!important;
    max-width:none!important;
  }
  .mobile-next-battle-btn{
    margin-left:16px!important;
    margin-right:16px!important;
    width:calc(100% - 32px)!important;
  }
  .battle-comments{
    margin-left:16px!important;
    margin-right:16px!important;
  }
  .vote-feed{
    margin-left:16px!important;
    margin-right:16px!important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ТОП СЕЙЧАС — 3 призовых места в стиле сторис + продвижение батла за монеты
   ═══════════════════════════════════════════════════════════════════════════ */

.hot-rail .hr-scroll{
  overflow:visible;
  justify-content:center;
  position:relative;
  padding:4px 12px 10px;
  border-radius:22px;
  border:1px solid rgba(245,158,11,.28);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245,158,11,.1), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="light"] .hot-rail .hr-scroll{
  border-color:rgba(245,158,11,.35);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245,158,11,.09), transparent 70%),
    linear-gradient(180deg, #ffffff, #fdfaf6);
  box-shadow:0 8px 24px rgba(20,30,60,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.tp-rail{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:26px;
  padding:14px 8px 6px;
  flex-wrap:nowrap;
  width:100%;
  /* Пять мест не всегда помещаются по ширине — включаем прокрутку.
     Полоса скрыта, прокрутка пальцем работает как обычно. */
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.tp-slot{
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;
  width:112px;
  flex-shrink:0;          /* иначе при 5 местах слоты сжимаются вместо прокрутки */
  transition:transform .22s cubic-bezier(.34,1.3,.5,1);
}
.tp-slot:hover{transform:translateY(-4px)}
.tp-rail::-webkit-scrollbar{display:none}
.tp-slot{scroll-snap-align:center}

/* На узких экранах пять мест не помещаются: делаем слоты компактнее,
   прижимаем ленту к левому краю и прокручиваем пальцем */
@media(max-width:768px){
  .tp-rail{
    justify-content:flex-start;
    gap:16px;
    padding:12px 4px 6px;
  }
  .tp-slot{width:92px}
}
@media(max-width:420px){
  .tp-rail{gap:12px}
  .tp-slot{width:82px}
}

/* Кольцо-обводка (градиент как у сторис) */
.tp-ring{
  position:relative;
  width:96px;height:96px;
  border-radius:50%;
  padding:3.5px;
  display:flex;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 8px 22px rgba(139,92,246,.28);
}
.tp-ring-1{
  background:conic-gradient(from 210deg,#fbbf24,#f59e0b,#e63d6f,#f59e0b,#fbbf24);
  box-shadow:0 10px 26px rgba(245,158,11,.4);
}
.tp-ring-2{
  background:conic-gradient(from 200deg,#e63d6f,#8b5cf6,#e63d6f);
  box-shadow:0 8px 22px rgba(230,61,111,.34);
}
.tp-ring-3{
  background:conic-gradient(from 190deg,#38bdf8,#8b5cf6,#38bdf8);
  box-shadow:0 8px 22px rgba(56,189,248,.32);
}
.tp-ring-4{
  background:conic-gradient(from 180deg,#a78bfa,#7c3aed,#a78bfa);
  box-shadow:0 8px 20px rgba(124,58,237,.28);
}
.tp-ring-5{
  background:conic-gradient(from 170deg,#67e8f9,#0ea5e9,#67e8f9);
  box-shadow:0 8px 20px rgba(14,165,233,.26);
}
.tp-slot:hover .tp-ring{filter:brightness(1.12) saturate(1.15)}
.tp-ring{transition:filter .2s,box-shadow .2s}

/* Внутренний круг с двумя фото */
.tp-circle{
  position:relative;
  width:100%;height:100%;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  background:var(--bg2);
  border:2.5px solid var(--bg);
}
.tp-circle img{width:50%;height:100%;object-fit:cover;object-position:top;display:block}
.tp-half{width:50%;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.tp-vs{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:10px;font-weight:900;letter-spacing:.02em;color:#fff;
  padding:2px 5px;border-radius:7px;
  background:rgba(10,12,22,.72);
  border:1px solid rgba(255,255,255,.22);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* Номер места */
.tp-num{
  position:absolute;bottom:-2px;right:-2px;
  width:27px;height:27px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  font-size:13px;font-weight:900;color:#1a1a1a;
  border:2.5px solid var(--bg);
  box-shadow:0 3px 8px rgba(0,0,0,.3);
  z-index:3;
}
.tp-num-1{background:linear-gradient(135deg,#fde68a,#f59e0b)}
.tp-num-2{background:linear-gradient(135deg,#e5e7eb,#9ca3af)}
.tp-num-3{background:linear-gradient(135deg,#fcd9b6,#cd7c2f)}
/* Места 4 и 5 — без медалей, но с собственным фоном: иначе у занятого
   слота тёмная цифра ложится на прозрачный фон и не видна в тёмной теме */
.tp-num-4{background:linear-gradient(135deg,#c4b5fd,#8b5cf6);color:#fff}
.tp-num-5{background:linear-gradient(135deg,#a5f3fc,#0ea5e9);color:#fff}

/* Огонёк «горячего» */
.tp-flame{
  position:absolute;top:-3px;left:-1px;
  font-size:16px;z-index:3;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  animation:tpFlame 1.8s ease-in-out infinite;
}
@keyframes tpFlame{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.14) rotate(4deg)}}

.tp-cap{
  margin-top:11px;
  font-size:12.5px;font-weight:800;color:var(--t1);
  text-align:center;white-space:nowrap;
}
.tp-sub{
  margin-top:2px;
  font-size:10.5px;font-weight:600;color:var(--t3);
  text-align:center;
  max-width:112px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-height:13px;
}

/* Свободное место */
.tp-free .tp-ring-free{
  background:transparent;
  border:2px dashed rgba(255,255,255,.22);
  box-shadow:none;
  padding:2px;
}
.tp-free:hover .tp-ring-free{border-color:var(--acc);filter:none}
.tp-circle-free{
  background:rgba(255,255,255,.03);
  border-color:transparent;
  align-items:center;justify-content:center;
}
.tp-rocket{font-size:26px;opacity:.5;animation:tpFloat 2.6s ease-in-out infinite}
@keyframes tpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.tp-free:hover .tp-rocket{opacity:1}
.tp-cap-free{color:var(--t3)}
.tp-free .tp-num{background:rgba(255,255,255,.12);color:var(--t3);box-shadow:none}

/* ── Модалка «Поднять батл в топ» ── */
.promote-bg{
  position:fixed;inset:0;z-index:10400;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,2,8,.62);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .18s;
}
.promote-bg.open{opacity:1}
.promote-card{
  position:relative;
  width:100%;max-width:380px;
  padding:26px 22px 22px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(22,26,44,.99),rgba(13,15,28,.99));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  text-align:center;
  transform:translateY(14px) scale(.97);
  transition:transform .22s cubic-bezier(.34,1.3,.5,1);
}
.promote-bg.open .promote-card{transform:translateY(0) scale(1)}
.promote-close{position:absolute;top:14px;right:14px;z-index:6;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;
  cursor:pointer;font-size:15px;
  color:var(--t2);
  background:rgba(255,255,255,.08);
  transition:background .16s,color .16s;
}
.promote-close:hover{background:rgba(255,255,255,.16);color:var(--t1)}
.promote-icon{
  font-size:40px;line-height:1;margin-bottom:8px;
  pointer-events:none;              /* декор не должен перехватывать клики */
  animation:tpFloat 2.6s ease-in-out infinite;
}
.promote-title{font-size:19px;font-weight:900;color:var(--t1);margin-bottom:7px}
.promote-desc{font-size:12.5px;line-height:1.5;color:var(--t3);margin-bottom:16px}
.promote-preview{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:16px;position:relative;
}
.promote-preview img{
  width:74px;height:92px;object-fit:cover;object-position:top;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.12);
}
.promote-pvs{
  font-size:12px;font-weight:900;color:var(--t2);
  letter-spacing:.02em;
}
.promote-rows{
  display:flex;flex-direction:column;gap:1px;
  border-radius:14px;overflow:hidden;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,.08);
}
.promote-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;
  font-size:13px;
  background:rgba(255,255,255,.03);
}
.promote-row span{color:var(--t3);font-weight:600}
.promote-row b{color:var(--t1);font-weight:800;display:flex;align-items:center;gap:4px}
.promote-row-bal b{color:var(--gold)}
.promote-cta{
  width:100%;height:50px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  border:none;border-radius:15px;
  cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#f59e0b,#e63d6f);
  box-shadow:0 8px 24px rgba(230,61,111,.36);
  transition:transform .16s,box-shadow .16s,filter .16s;
}
.promote-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(230,61,111,.46);filter:brightness(1.06)}
.promote-cta:active{transform:translateY(0) scale(.99)}
.promote-cta-low{
  background:var(--bg2);
  color:var(--t2);
  border:1px solid var(--br);
  box-shadow:none;
  font-size:13.5px;
}

/* ── Светлая тема ── */
html[data-theme="light"] .tp-circle{background:#eef1f7;border-color:#fff}
html[data-theme="light"] .tp-half{background:linear-gradient(180deg,#e9edf5,#f4f6fa)}
html[data-theme="light"] .tp-num{border-color:#fff}
html[data-theme="light"] .tp-free .tp-ring-free{border-color:#d6dbe6}
html[data-theme="light"] .tp-circle-free{background:#f6f7fb}
html[data-theme="light"] .tp-free .tp-num{background:#e9ecf2;color:#9aa3b2}
html[data-theme="light"] .promote-bg{background:rgba(235,238,246,.6)}
html[data-theme="light"] .promote-card{
  background:linear-gradient(180deg,#fff,#fafbff);
  border-color:#e5e8f0;
  box-shadow:0 26px 60px rgba(20,30,60,.22);
}
html[data-theme="light"] .promote-close{background:#eef1f7;color:#5b6472}
html[data-theme="light"] .promote-close:hover{background:#e2e6ef;color:#1a2233}
html[data-theme="light"] .promote-rows{border-color:#e5e8f0}
html[data-theme="light"] .promote-row{background:#f8f9fc}
html[data-theme="light"] .promote-preview img{border-color:#e5e8f0}
html[data-theme="light"] .promote-cta-low{background:#f2f4f8;color:#5b6472;border-color:#e2e6ef}
html[data-theme="light"] .br-in-top{background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(230,61,111,.08))}

/* ── Мобильные ── */
@media(max-width:560px){
  .tp-rail{gap:14px;padding:12px 4px 4px}
  .tp-slot{width:88px}
  .tp-ring{width:78px;height:78px;padding:3px}
  .tp-num{width:23px;height:23px;font-size:11.5px}
  .tp-flame{font-size:14px}
  .tp-cap{font-size:11.5px;margin-top:9px}
  .tp-sub{font-size:9.5px;max-width:88px}
  .tp-rocket{font-size:22px}
  .promote-preview img{width:64px;height:80px}
}

/* ── Кнопка «В топ» по центру страницы батла (под VS) ── */
.duel-promote-btn{
  pointer-events:auto;              /* родитель .duel-vs-col не кликабелен */
  margin-top:14px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 14px 8px;
  border:none;border-radius:16px;
  cursor:pointer;
  font-family:inherit;
  color:#fff;
  background:linear-gradient(135deg,#f59e0b,#e63d6f);
  box-shadow:0 8px 22px rgba(230,61,111,.42),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s cubic-bezier(.34,1.3,.5,1),box-shadow .18s,filter .18s;
  white-space:nowrap;
}
.duel-promote-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 13px 30px rgba(230,61,111,.55);filter:brightness(1.07)}
.duel-promote-btn:active{transform:translateY(0) scale(.97)}
.dpb-ico{font-size:19px;line-height:1;animation:tpFloat 2.6s ease-in-out infinite}
.dpb-txt{font-size:11.5px;font-weight:900;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.2)}

/* Счётчик поднятий в карусели */
.tp-boosts{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 9px;border-radius:9px;
  font-size:12px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#f59e0b,#e63d6f);
  box-shadow:0 3px 10px rgba(230,61,111,.3);
}

@media(max-width:560px){
  .duel-promote-btn{margin-top:10px;padding:7px 11px 6px;border-radius:13px}
  .dpb-ico{font-size:16px}
  .dpb-txt{font-size:10px}
}

/* ── Батл в топ-3: рамки фото становятся зелёными (вместо розовой и синей) ── */
.duel-in-top .duel-card:nth-child(1) .duel-card-frame,
.duel-in-top .duel-card:nth-child(3) .duel-card-frame{
  border-color:#22c55e;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.45),
    0 0 30px rgba(34,197,94,.7),
    0 0 60px rgba(34,197,94,.4),
    0 0 100px rgba(34,197,94,.2),
    0 12px 36px rgba(0,0,0,.55);
}
.duel-in-top .duel-card:nth-child(1):hover:not(.voted) .duel-card-frame,
.duel-in-top .duel-card:nth-child(3):hover:not(.voted) .duel-card-frame{
  box-shadow:
    0 0 0 1px rgba(34,197,94,.75),
    0 0 50px rgba(34,197,94,1),
    0 0 100px rgba(34,197,94,.6),
    0 0 160px rgba(34,197,94,.3),
    0 18px 48px rgba(0,0,0,.65);
}
html[data-theme="light"] .duel-in-top .duel-card:nth-child(1) .duel-card-frame,
html[data-theme="light"] .duel-in-top .duel-card:nth-child(3) .duel-card-frame{
  box-shadow:
    0 0 0 1px rgba(34,197,94,.4),
    0 0 26px rgba(34,197,94,.45),
    0 0 56px rgba(34,197,94,.25),
    0 10px 28px rgba(20,30,60,.16);
}

/* Пометка про бонусный счёт под балансом в кошельке */
.wbc-bonus-note{
  margin:6px auto 2px;
  max-width:420px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--t3);
  text-align:center;
}
html[data-theme="light"] .wbc-bonus-note{color:#7b8494}

/* Монетка рядом с цифрой «50» в блоке рефералов */
.ref-stat-val .vcoin{height:.78em;vertical-align:-.04em;margin-left:2px}

/* ═══ Два кошелька: основной и бонусный ═══ */
.wallets-split{
  display:grid;grid-template-columns:1fr 1fr;gap:11px;
  margin:12px auto 6px;max-width:440px;
}
.wallet-mini{
  padding:15px 15px 13px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  text-align:left;
}
.wm-main{
  border-color:rgba(34,197,94,.35);
  background:linear-gradient(160deg,rgba(34,197,94,.12),rgba(34,197,94,.04));
}
.wm-bonus{
  border-color:rgba(139,92,246,.35);
  background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(230,61,111,.05));
}
.wm-top{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.wm-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.wm-main .wm-dot{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.7)}
.wm-bonus .wm-dot{background:#8b5cf6;box-shadow:0 0 8px rgba(139,92,246,.7)}
.wm-label{font-size:12px;font-weight:800;color:var(--t2);letter-spacing:.01em}
.wm-val{
  display:flex;align-items:center;gap:5px;
  font-size:30px;font-weight:900;color:var(--t1);
  font-variant-numeric:tabular-nums;line-height:1.05;
  letter-spacing:-.02em;
}
.wm-val .vcoin{height:.62em;vertical-align:0}
.wm-hint{margin-top:5px;font-size:10.5px;font-weight:600;color:var(--t3);line-height:1.3}

html[data-theme="light"] .wallet-mini{background:#fff;border-color:#e5e8f0}
html[data-theme="light"] .wm-main{
  border-color:rgba(34,197,94,.4);
  background:linear-gradient(160deg,rgba(34,197,94,.1),rgba(34,197,94,.03));
}
html[data-theme="light"] .wm-bonus{
  border-color:rgba(139,92,246,.4);
  background:linear-gradient(160deg,rgba(139,92,246,.1),rgba(230,61,111,.04));
}
html[data-theme="light"] .wm-hint{color:#7b8494}

@media(max-width:400px){
  .wm-val{font-size:24px}
  .wallets-split{gap:8px}
  .wallet-mini{padding:12px 11px 11px}
  .wm-hint{font-size:9.5px}
}

/* ═══ Разбивка по счетам в боковом меню ═══ */
.sm-wallets{
  display:flex;flex-direction:column;gap:6px;
  margin:9px 0 12px;
}
.sm-wallet{
  display:flex;align-items:center;gap:7px;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  font-size:12.5px;
}
.sm-w-main{border-color:rgba(34,197,94,.32);background:rgba(34,197,94,.09)}
.sm-w-bonus{border-color:rgba(139,92,246,.32);background:rgba(139,92,246,.09)}
.sm-w-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sm-w-main .sm-w-dot{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.7)}
.sm-w-bonus .sm-w-dot{background:#8b5cf6;box-shadow:0 0 6px rgba(139,92,246,.7)}
.sm-w-lbl{flex:1;font-weight:700;color:var(--t2)}
.sm-w-val{font-size:16px;font-weight:900;color:var(--t1);font-variant-numeric:tabular-nums}
.sm-wallet .vcoin{height:13px;flex-shrink:0}
html[data-theme="light"] .sm-wallet{background:#fff;border-color:#e5e8f0}
html[data-theme="light"] .sm-w-main{border-color:rgba(34,197,94,.38);background:rgba(34,197,94,.08)}
html[data-theme="light"] .sm-w-bonus{border-color:rgba(139,92,246,.38);background:rgba(139,92,246,.08)}

/* Сообщение об ошибке прямо в окне поднятия в топ */
.promote-err{
  margin-bottom:12px;
  padding:10px 13px;
  border-radius:12px;
  font-size:12.5px;font-weight:700;line-height:1.4;
  color:#ef4444;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.3);
}

/* ═══ Окно «Бонусный счёт» ═══ */
.wm-q,.sm-w-q{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex-shrink:0;
  border-radius:50%;
  font-size:10px;font-weight:900;
  color:#8b5cf6;
  background:rgba(139,92,246,.2);
  border:1px solid rgba(139,92,246,.45);
}
.wm-bonus,.sm-w-bonus{cursor:pointer;transition:transform .15s,box-shadow .15s}
.wm-bonus:hover,.sm-w-bonus:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(139,92,246,.28)}

.bonus-bg{
  position:fixed;inset:0;z-index:10450;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,2,8,.62);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .18s;
  overflow-y:auto;
}
.bonus-bg.open{opacity:1}
.bonus-card{
  position:relative;
  width:100%;max-width:390px;
  padding:24px 20px 20px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(22,26,44,.99),rgba(13,15,28,.99));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.97);
  transition:transform .22s cubic-bezier(.34,1.3,.5,1);
  margin:auto;
}
.bonus-bg.open .bonus-card{transform:translateY(0) scale(1)}
.bonus-close{position:absolute;top:13px;right:13px;z-index:6;
  border:none;border-radius:50%;
  cursor:pointer;font-size:14px;
  color:var(--t2);background:rgba(255,255,255,.08);
  transition:background .16s,color .16s;
}
.bonus-close:hover{background:rgba(255,255,255,.16);color:var(--t1)}
.bonus-hero{text-align:center;margin-bottom:18px}
.bonus-ico{font-size:38px;line-height:1;margin-bottom:6px;pointer-events:none}
.bonus-ttl{font-size:19px;font-weight:900;color:var(--t1);margin-bottom:5px}
.bonus-now{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12.5px;color:var(--t3);font-weight:600;
}
.bonus-now b{color:#8b5cf6;font-weight:900;font-size:15px}
.bonus-now .vcoin{height:13px}

.bonus-sec{margin-bottom:14px}
.bonus-sec-ttl{
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  color:var(--t3);margin-bottom:7px;padding-left:2px;
}
.bonus-row{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;margin-bottom:5px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.bonus-emj{font-size:16px;line-height:1;flex-shrink:0}
.bonus-txt{flex:1;font-size:12.5px;font-weight:600;color:var(--t1);line-height:1.35}
.bonus-amt{
  flex-shrink:0;
  font-size:13px;font-weight:900;color:#22c55e;
  font-variant-numeric:tabular-nums;
}
.bonus-warn{
  padding:11px 12px;margin-bottom:16px;
  border-radius:13px;
  background:linear-gradient(160deg,rgba(245,158,11,.12),rgba(230,61,111,.06));
  border:1px solid rgba(245,158,11,.28);
}
.bonus-warn-row{
  display:flex;align-items:flex-start;gap:8px;
  font-size:11.5px;font-weight:600;color:var(--t2);line-height:1.4;
}
.bonus-warn-row+.bonus-warn-row{margin-top:7px}
.bonus-warn-row span:first-child{flex-shrink:0}
.bonus-ok{
  width:100%;height:47px;
  border:none;border-radius:14px;
  cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#e63d6f);
  box-shadow:0 8px 22px rgba(139,92,246,.34);
  transition:transform .16s,box-shadow .16s,filter .16s;
}
.bonus-ok:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(139,92,246,.45);filter:brightness(1.06)}
.bonus-ok:active{transform:translateY(0) scale(.99)}

/* Светлая тема */
html[data-theme="light"] .bonus-bg{background:rgba(235,238,246,.6)}
html[data-theme="light"] .bonus-card{
  background:linear-gradient(180deg,#fff,#fafbff);
  border-color:#e5e8f0;
  box-shadow:0 26px 60px rgba(20,30,60,.22);
}
html[data-theme="light"] .bonus-close{background:#eef1f7;color:#5b6472}
html[data-theme="light"] .bonus-close:hover{background:#e2e6ef;color:#1a2233}
html[data-theme="light"] .bonus-row{background:#f8f9fc;border-color:#e5e8f0}
html[data-theme="light"] .bonus-warn{
  background:linear-gradient(160deg,rgba(245,158,11,.1),rgba(230,61,111,.04));
  border-color:rgba(245,158,11,.32);
}
html[data-theme="light"] .bonus-warn-row{color:#5b6472}

@media(max-width:400px){
  .bonus-card{padding:20px 15px 16px}
  .bonus-txt{font-size:12px}
}

/* ═══ Галерея фото профиля ═══ */
.gal-bg{
  position:fixed;inset:0;z-index:10460;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,2,8,.66);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .18s;overflow-y:auto;
}
.gal-bg.open{opacity:1}
.gal-card{
  position:relative;
  width:100%;max-width:520px;
  padding:22px 18px 18px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(22,26,44,.99),rgba(13,15,28,.99));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.97);
  transition:transform .22s cubic-bezier(.34,1.3,.5,1);
  margin:auto;
}
.gal-bg.open .gal-card{transform:translateY(0) scale(1)}
.gal-close{position:absolute;top:13px;right:13px;z-index:6;
  border:none;border-radius:50%;cursor:pointer;font-size:14px;
  color:var(--t2);background:rgba(255,255,255,.08);
  transition:background .16s,color .16s;
}
.gal-close:hover{background:rgba(255,255,255,.16);color:var(--t1)}
.gal-head{margin-bottom:14px;padding-right:38px}
.gal-ttl{font-size:18px;font-weight:900;color:var(--t1)}
.gal-sub{font-size:12px;color:var(--t3);font-weight:600;margin-top:2px}







.gal-empty{
  text-align:center;padding:34px 12px;
  color:var(--t3);font-size:13px;font-weight:600;
}
.gal-add{
  width:100%;height:46px;margin-top:14px;
  border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 8px 22px rgba(230,61,111,.32);
  transition:transform .16s,box-shadow .16s,filter .16s;
}
.gal-add:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(230,61,111,.44);filter:brightness(1.06)}
.gal-full{
  position:fixed;inset:0;z-index:10700;
  display:flex;align-items:center;justify-content:center;
  padding:24px;cursor:zoom-out;
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.gal-full img{max-width:100%;max-height:100%;border-radius:16px;object-fit:contain}
/* мобильные: показываем крестик удаления всегда */
@media(max-width:560px){
}
/* Светлая тема */
html[data-theme="light"] .gal-bg{background:rgba(235,238,246,.62)}
html[data-theme="light"] .gal-card{
  background:linear-gradient(180deg,#fff,#fafbff);
  border-color:#e5e8f0;box-shadow:0 26px 60px rgba(20,30,60,.22);
}
html[data-theme="light"] .gal-close{background:#eef1f7;color:#5b6472}
html[data-theme="light"] .gal-close:hover{background:#e2e6ef;color:#1a2233}
html[data-theme="light"] .gal-item{background:#eef1f7;border-color:#e5e8f0}

/* ═══ Светлая тема: накладка обложки не должна закрывать фото ═══
   В общем правиле смены темы `.prof-cover-overlay` попал в список элементов,
   которым задаётся сплошной фон var(--bg1). Накладка растянута поверх фото
   (inset:0), поэтому в светлой теме она белым листом скрывала обложку. */
html[data-theme="light"] .prof-cover-overlay{
  background:rgba(0,0,0,0)!important;
  border-color:transparent!important;
  backdrop-filter:none!important;
}
html[data-theme="light"] .prof-cover:hover .prof-cover-overlay{
  background:rgba(0,0,0,.38)!important;
}
/* Кнопка «Изменить обложку» — читаемая на любом фото */
html[data-theme="light"] .prof-cover-edit{
  background:rgba(10,12,22,.72)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.25)!important;
}

/* Чужой аватар — открывается крупно по клику */
.pp-avatar-zoom{cursor:zoom-in;transition:transform .18s,box-shadow .18s}
.pp-avatar-zoom:hover{transform:scale(1.06);box-shadow:0 6px 26px rgba(236,72,153,.5)}
/* Просмотр аватара — круглый, в отличие от прямоугольных фото галереи */
.gal-full img{box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* ═══ Аватар: убраны расходящиеся кольца и пульсация ═══
   Кольцо .prof-ava-ring расширялось до 1.6× и таяло, а avaGlowPulse
   постоянно менял тень — вместе давали «полоски» вокруг аватара. */
.prof-ava-ring{display:none!important}
.prof-ava{animation:none!important}
.pp-avatar{animation:none!important}
/* Ровная статичная обводка вместо пульсации */
.prof-ava{box-shadow:0 0 0 2.5px var(--acc), 0 6px 20px rgba(0,0,0,.28)!important}
.prof-ava-wrap:hover .prof-ava{box-shadow:0 0 0 3.5px var(--acc), 0 8px 26px rgba(230,61,111,.4)!important}
.pp-avatar{box-shadow:0 4px 20px rgba(236,72,153,.3)!important}
.pp-avatar-zoom:hover{box-shadow:0 6px 26px rgba(236,72,153,.5)!important}

/* ═══ Лента фото профиля (как в Instagram) ═══ */
.gal-card{padding:0!important;max-width:820px!important;display:flex;flex-direction:column;max-height:92vh}
.gal-head{
  position:relative;
  padding:16px 52px 12px 18px!important;
  margin-bottom:0!important;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.gal-close{top:14px!important;right:14px!important}
.gal-feed{
  flex:1;min-height:0;
  overflow-y:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.gal-feed::-webkit-scrollbar{width:6px}
.gal-feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.gal-add{margin:0 14px 14px!important;flex-shrink:0}

/* Одно фото в ленте */
.fp{position:relative;border-bottom:1px solid rgba(255,255,255,.07)}
.fp:last-child{border-bottom:none}
.fp-top{position:relative;display:flex;justify-content:flex-end;padding:6px 10px 0}
.fp-dots{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;cursor:pointer;
  font-size:19px;font-weight:900;line-height:1;
  color:var(--t1);background:transparent;
  transition:background .16s;
}
.fp-dots:hover{background:rgba(255,255,255,.1)}
.fp-menu{
  position:absolute;top:36px;right:10px;z-index:5;
  min-width:150px;padding:5px;
  border-radius:13px;
  background:#1b2036;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  display:none;
}
.fp-menu.open{display:block}
.fp-menu-item{
  width:100%;padding:10px 12px;
  display:flex;align-items:center;gap:8px;
  border:none;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;text-align:left;
  color:var(--t1);background:transparent;transition:background .14s;
}
.fp-menu-item:hover{background:rgba(255,255,255,.08)}
.fp-danger{color:#ef4444}
.fp-danger:hover{background:rgba(239,68,68,.14)}
.fp-img{
  width:100%;display:block;
  max-height:62vh;object-fit:cover;
  background:#000;cursor:pointer;user-select:none;
}
.fp-actions{display:flex;align-items:center;gap:16px;padding:10px 14px 6px}
.fp-btn{
  display:flex;align-items:center;gap:6px;
  border:none;background:transparent;cursor:pointer;padding:0;
  font-family:inherit;font-size:14px;font-weight:800;color:var(--t1);
  transition:transform .14s;
}
.fp-btn:hover{transform:scale(1.06)}
.fp-btn:active{transform:scale(.94)}
.fp-like.on{color:#ff5c8a}
.fp-heart,.fp-ico{font-size:19px;line-height:1;display:inline-block}
@keyframes fpPop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.fp-heart.pop{animation:fpPop .32s ease}

/* Комментарии — раскрываются по клику на 💬 */
.fp-comments{display:none;padding:2px 14px 4px}
.fp-comments.open{display:block}
.fp-c{display:flex;align-items:flex-start;gap:8px;padding:5px 0;position:relative}
.fp-c-ava{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0}
.fp-c-ava-ph{
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
}
.fp-c-body{flex:1;min-width:0;font-size:13px;line-height:1.45}
.fp-c-name{font-weight:800;color:var(--acc);cursor:pointer;margin-right:5px}
.fp-c-name:hover{text-decoration:underline}
.fp-c-text{color:var(--t1);word-break:break-word}
.fp-c-verified{width:13px;height:13px;vertical-align:middle;margin-left:3px}
.fp-c-reply{margin-left:34px}
.fp-c-actions{margin-top:2px}
.fp-c-reply-btn{
  border:none;background:transparent;cursor:pointer;padding:0;
  font-family:inherit;font-size:11.5px;font-weight:700;color:var(--t3);
  transition:color .14s;
}
.fp-c-reply-btn:hover{color:var(--acc)}
/* Подсветка комментария, на который отвечают (как в батле) */
.fp-c.replying{
  background:rgba(230,61,111,.1);
  border-radius:10px;
  margin:0 -8px;padding-left:8px;padding-right:8px;
}
/* Плашка «Ответ для @кому» над полем ввода */
.pv-reply-bar{
  display:none;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 18px;
  font-size:12.5px;color:var(--t2);
  background:rgba(230,61,111,.08);
  border-top:1px solid rgba(255,255,255,.06);
}
.pv-reply-bar b{color:var(--acc)}
.pv-reply-bar button{
  border:none;background:transparent;cursor:pointer;
  color:var(--t3);font-size:13px;padding:2px 6px;border-radius:6px;
  transition:color .14s,background .14s;
}
.pv-reply-bar button:hover{color:var(--t1);background:rgba(255,255,255,.08)}
/* Вспышка комментария при переходе из уведомления */
.fp-c-flash{animation:fpCFlash 2.2s ease}
@keyframes fpCFlash{
  0%,100%{background:transparent}
  15%,55%{background:rgba(230,61,111,.18);border-radius:10px}
}
.fp-c-del{
  width:22px;height:22px;flex-shrink:0;
  border:none;border-radius:50%;cursor:pointer;
  font-size:10px;color:var(--t3);background:transparent;
  opacity:0;transition:opacity .14s,color .14s,background .14s;
}
.fp-c:hover .fp-c-del{opacity:1}
.fp-c-del:hover{color:#ef4444;background:rgba(239,68,68,.12)}
.fp-nocmt,.fp-loading,.fp-empty{
  padding:12px 4px;text-align:center;
  color:var(--t3);font-size:12.5px;font-weight:600;
}
.fp-empty{padding:40px 16px}

/* Поле ввода — тоже по клику на 💬 */
.fp-input-row{display:none;gap:8px;align-items:center;padding:4px 14px 14px}
.fp-input-row.open{display:flex}
.fp-input-row input{
  flex:1;min-width:0;height:36px;padding:0 13px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--t1);font-family:inherit;font-size:13px;
  outline:none;transition:border-color .16s;
}
.fp-input-row input:focus{border-color:var(--acc)}
.fp-send{
  flex-shrink:0;height:36px;padding:0 15px;
  border:none;border-radius:18px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  transition:filter .16s;
}
.fp-send:hover{filter:brightness(1.08)}

/* Светлая тема */
html[data-theme="light"] .gal-head,
html[data-theme="light"] .fp{border-color:#eceff5}
html[data-theme="light"] .fp-dots:hover{background:#f0f2f7}
html[data-theme="light"] .fp-menu{background:#fff;border-color:#e5e8f0}
html[data-theme="light"] .fp-menu-item:hover{background:#f2f4f8}
html[data-theme="light"] .fp-img{background:#f2f4f8}
html[data-theme="light"] .fp-input-row input{background:#f6f7fb;border-color:#e2e6ef}
html[data-theme="light"] .gal-feed::-webkit-scrollbar-thumb{background:#d7dce6}

@media(max-width:560px){
  .gal-card{max-width:100%!important;max-height:94vh}
  .fp-img{max-height:56vh}
  .fp-c-del{opacity:1}
}

/* ═══ Галерея-плитки (десктоп 3-в-ряд, телефон 2-в-ряд) ═══ */
.gal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:14px;
}
.gtile{
  position:relative;
  aspect-ratio:1/1;
  width:100%;
  padding:0;border:none;cursor:pointer;
  border-radius:12px;overflow:hidden;
  background:#000;
  transition:transform .16s,box-shadow .16s;
}
.gtile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.gtile-img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.gtile-likes{
  position:absolute;left:7px;bottom:7px;
  display:flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:20px;
  font-size:12px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
}
.gtile-likes.on{color:#ff5c8a}
/* Плитка-кнопка «+ Добавить фото» — всегда первая, по центру своей ячейки */
.gtile-add{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,rgba(230,61,111,.16),rgba(139,92,246,.16));
  border:2px dashed rgba(230,61,111,.55);
}
.gtile-add:hover{
  background:linear-gradient(135deg,rgba(230,61,111,.26),rgba(139,92,246,.26));
  border-color:rgba(230,61,111,.85);
}
.gtile-plus{
  font-size:38px;font-weight:300;line-height:1;
  color:var(--acc);
}
.gtile-add-lbl{
  font-size:12px;font-weight:800;color:var(--acc);
  text-align:center;padding:0 6px;
}
.gtile-add.busy{pointer-events:none;opacity:.6}
.gtile-add.busy .gtile-plus{
  animation:gtileSpin .8s linear infinite;
}
@keyframes gtileSpin{to{transform:rotate(360deg)}}

/* ═══ Полноэкранный просмотр фото: фото слева, комментарии справа ═══ */
.pv-bg{
  position:fixed;inset:0;z-index:10620;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .18s;
  display:flex;align-items:stretch;justify-content:center;
  padding:18px;
}
.pv-bg.open{opacity:1}
.pv-card{
  position:relative;
  width:100%;height:100%;
  display:flex;flex-direction:row;
  background:#000;
  border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.985);
  transition:transform .2s cubic-bezier(.34,1.2,.5,1);
}
.pv-bg.open .pv-card{transform:scale(1)}
/* Левая часть — фото на всю высоту */
.pv-photo{
  position:relative;
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  padding:16px;
}
.pv-img{
  max-width:100%;max-height:100%;
  object-fit:contain;display:block;user-select:none;cursor:zoom-in;
}
/* Прозрачные стрелки переключения фото */
.pv-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .16s,transform .16s;
}
.pv-nav svg{display:block}
.pv-nav:hover{background:rgba(255,255,255,.28)}
.pv-nav:active{transform:translateY(-50%) scale(.9)}
.pv-nav-prev{left:20px}
.pv-nav-next{right:20px}
/* Правая колонка — комментарии */
.pv-side{
  width:400px;flex-shrink:0;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(18,21,36,1),rgba(12,14,26,1));
  border-left:1px solid rgba(255,255,255,.08);
}
.pv-side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.pv-actions{display:flex;align-items:center;gap:18px}
.pv-cc-lbl{font-size:15px;font-weight:800;color:var(--t1)}
.pv-head-btns{display:flex;align-items:center;gap:8px}
.pv-menu-wrap{position:relative}
.pv-dots,.pv-close{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:8px;cursor:pointer;
  color:var(--t1);background:rgba(255,255,255,.1);
  transition:background .16s;
}
.pv-dots{line-height:0}
.pv-dots svg{display:block}
.pv-close{font-size:15px}
.pv-dots:hover,.pv-close:hover{background:rgba(255,255,255,.2)}
.pv-menu{
  position:absolute;top:40px;right:0;z-index:5;
  min-width:160px;padding:5px;
  border-radius:13px;
  background:#1b2036;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  display:none;
}
.pv-menu.open{display:block}
.pv-menu-item{
  width:100%;padding:10px 12px;
  display:flex;align-items:center;gap:8px;
  border:none;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;text-align:left;
  color:var(--t1);background:transparent;transition:background .14s;
}
.pv-menu-item:hover{background:rgba(255,255,255,.08)}
.pv-danger{color:#ef4444}
.pv-danger:hover{background:rgba(239,68,68,.14)}
.pv-comments{
  flex:1;min-height:0;overflow-y:auto;
  padding:12px 18px;
}
.pv-comments::-webkit-scrollbar{width:6px}
.pv-comments::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.pv-input-row{
  display:flex;gap:8px;align-items:center;
  padding:12px 18px 16px;flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.07);
}
.pv-input-row input{
  flex:1;min-width:0;height:40px;padding:0 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--t1);font-family:inherit;font-size:13px;
  outline:none;transition:border-color .16s;
}
.pv-input-row input:focus{border-color:var(--acc)}
html[data-theme="light"] .pv-bg{background:rgba(20,22,34,.92)}
html[data-theme="light"] .pv-side{background:linear-gradient(180deg,#fff,#f7f8fc)}
html[data-theme="light"] .pv-side-head,
html[data-theme="light"] .pv-input-row{border-color:#eceff5}
html[data-theme="light"] .pv-input-row input{background:#f6f7fb;border-color:#e2e6ef}
html[data-theme="light"] .pv-comments::-webkit-scrollbar-thumb{background:#d7dce6}
html[data-theme="light"] .pv-close,html[data-theme="light"] .pv-dots{color:#1a1a2e}
html[data-theme="light"] .pv-close,html[data-theme="light"] .pv-dots{background:#eceff5}
html[data-theme="light"] .pv-menu{background:#fff;border-color:#e5e8f0}
html[data-theme="light"] .pv-menu-item{color:#1a1a2e}
html[data-theme="light"] .pv-menu-item:hover{background:#f2f4f8}

/* Телефон: фото сверху, комментарии снизу (колонкой) */
@media(max-width:760px){
  .pv-card{flex-direction:column}
  .pv-photo{flex:none;height:52vh;padding:0}
  .pv-side{width:100%;flex:1;min-height:0;border-left:none;border-top:1px solid rgba(255,255,255,.08)}
  .pv-nav{width:44px;height:44px;font-size:28px}
  .pv-nav-prev{left:10px}
  .pv-nav-next{right:10px}
}
@media(max-width:560px){
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:6px;padding:10px}
  .gtile-plus{font-size:32px}
  .gtile-add-lbl{font-size:11px}
}

/* ═══ Кроппер фото (двигать + масштабировать перед загрузкой) ═══ */
.gcrop-bg{
  position:fixed;inset:0;z-index:10640;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,2,8,.78);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .16s;
}
.gcrop-bg.open{opacity:1}
.gcrop-card{
  width:100%;max-width:420px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(22,26,44,.99),rgba(13,15,28,.99));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 70px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.97);
  transition:transform .2s cubic-bezier(.34,1.3,.5,1);
}
.gcrop-bg.open .gcrop-card{transform:translateY(0) scale(1)}
.gcrop-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.gcrop-ttl{font-size:16px;font-weight:900;color:var(--t1)}
.gcrop-close{
  color:var(--t2);background:rgba(255,255,255,.08);
  transition:background .16s;
}
.gcrop-close:hover{background:rgba(255,255,255,.16)}
.gcrop-stage{
  width:100%;aspect-ratio:1/1;
  border-radius:14px;overflow:hidden;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;
}
#gcrop-canvas{display:block;width:100%;height:100%;touch-action:none}
.gcrop-zoom{
  display:flex;align-items:center;gap:12px;
  margin-top:14px;
  color:var(--t2);font-size:18px;font-weight:700;
}
.gcrop-zoom input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;
  height:5px;border-radius:3px;
  background:rgba(255,255,255,.14);outline:none;cursor:pointer;
}
.gcrop-zoom input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 2px 8px rgba(230,61,111,.5);
}
.gcrop-zoom input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
}
.gcrop-hint{
  margin-top:10px;text-align:center;
  font-size:11px;color:var(--t3);
}
.gcrop-apply{
  width:100%;height:46px;margin-top:14px;
  border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  box-shadow:0 8px 22px rgba(230,61,111,.32);
  transition:filter .16s,opacity .16s;
}
.gcrop-apply:hover{filter:brightness(1.06)}
.gcrop-apply:disabled{opacity:.6;cursor:default}
html[data-theme="light"] .gcrop-bg{background:rgba(235,238,246,.75)}
html[data-theme="light"] .gcrop-card{background:linear-gradient(180deg,#fff,#f7f8fc);border-color:#e5e8f0}
html[data-theme="light"] .gcrop-zoom input[type=range]{background:#e2e6ef}
@media(max-width:560px){
  .gcrop-card{max-width:100%}
}

/* Правило про контент в галерее */
.gal-rule{
  margin:0 14px 8px;
  padding:9px 12px;
  border-radius:11px;
  font-size:11.5px;font-weight:600;line-height:1.4;
  color:#f59e0b;
  background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.28);
  flex-shrink:0;
}
/* @ник в комментариях к фото */
.fp-c-text .u-mention{cursor:pointer;color:var(--acc);font-weight:700}
.fp-c-text .u-mention:hover{text-decoration:underline}
html[data-theme="light"] .gal-rule{background:rgba(245,158,11,.09);color:#b45309}

/* ═══ Язык в боковом меню (мобильные) ═══ */
.sm-lang-cur{
  margin-left:auto;
  padding:3px 9px;
  border-radius:8px;
  font-size:11.5px;font-weight:900;letter-spacing:.03em;
  color:var(--t2);
  background:rgba(255,255,255,.08);
}
html[data-theme="light"] .sm-lang-cur{background:#eef1f7;color:#5b6472}
@media(max-width:860px){
  /* кнопку языка в шапке прячем — она переехала в меню */
  .lang-btn{display:none!important}
  /* список языков показываем снизу и поверх бокового меню (у него z-index 360) */
  .lang-bar{
    left:14px;right:14px;
    top:auto;bottom:96px;
    z-index:11000;
    min-width:0;
  }
}

/* ═══ Поиск на мобильных: иконка в шапке раскрывает поле ═══ */
.mob-search-btn{
  display:none;                     /* на десктопе поиск и так в шапке */
  width:34px;height:34px;
  align-items:center;justify-content:center;
  border:none;border-radius:50%;
  background:none;cursor:pointer;
  color:var(--t1);
  transition:background .16s,color .16s;
}
.mob-search-btn:hover{background:rgba(255,255,255,.08)}
.mob-search-btn.on{color:var(--acc);background:rgba(230,61,111,.14)}

@media(max-width:860px){
  .mob-search-btn{display:flex}
  .nav-search.mob-open{
    display:flex!important;
    position:fixed;
    top:58px;left:10px;right:10px;
    z-index:1250;
    flex-basis:auto;
    height:44px;
    padding:0 12px;
    border-radius:14px;
    background:var(--bg2);
    border:1px solid var(--br);
    box-shadow:0 12px 32px rgba(0,0,0,.35);
    animation:mobSearchIn .18s ease;
  }
  .nav-search.mob-open .ns-input{font-size:15px}
  .nav-search.mob-open .ns-result{top:50px;left:0;right:0;max-height:60vh}
}
@keyframes mobSearchIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
html[data-theme="light"] .mob-search-btn:hover{background:#f0f2f7}
html[data-theme="light"] .nav-search.mob-open{
  background:#fff;border-color:#e2e6ef;
  box-shadow:0 12px 32px rgba(20,30,60,.16);
}

/* Блокировка прокрутки страницы под открытыми панелями */
body.scroll-locked{
  position:fixed;
  left:0;right:0;width:100%;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}
/* внутри самой панели прокрутка остаётся доступной */
body.scroll-locked .lang-bar{touch-action:auto}

/* ═══ Три кнопки оплаты: Stripe, PayPal, Крипта ═══ */
.pay-total{
  display:flex;align-items:baseline;justify-content:center;gap:7px;
  margin:2px 0 11px;
  font-size:13px;font-weight:700;color:var(--t3);
}
.pay-total b{
  font-size:20px;font-weight:900;color:var(--t1);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.pay-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  margin-top:2px;
}
.pay-row .pay-btn{
  position:relative;
  width:100%;margin:0;
  height:56px;
  display:flex;align-items:center;justify-content:center;
  border-radius:15px;
  padding:0 6px;
  overflow:hidden;
  transition:transform .16s,box-shadow .16s,filter .16s;
}
.pay-row .pay-btn:hover{transform:translateY(-2px)}
.pay-row .pay-btn:active{transform:translateY(0) scale(.985)}
.pay-row .pay-btn:disabled{opacity:.55;cursor:default;transform:none}
.brand-word{
  display:flex;align-items:center;gap:5px;
  font-weight:900;letter-spacing:-.03em;line-height:1;
}
.pay-btn-stripe{
  background:linear-gradient(135deg,#635BFF,#8B5CF6)!important;
  box-shadow:0 6px 18px rgba(99,91,255,.34)!important;
}
.pay-btn-stripe:hover{box-shadow:0 10px 26px rgba(99,91,255,.46)!important;filter:brightness(1.06)}
.brand-stripe{font-size:21px;color:#fff}
.pay-btn-pp{
  background:#ffc439!important;
  color:#111!important;
  box-shadow:0 6px 18px rgba(255,196,57,.3)!important;
}
.pay-btn-pp:hover{filter:brightness(1.05);box-shadow:0 10px 26px rgba(255,196,57,.42)!important}
.pp-logo{height:24px;width:auto;display:block}
.pp-word{font-size:17px;font-weight:900;color:#253B80;letter-spacing:-.02em}
.pay-btn-crypto{
  background:linear-gradient(135deg,#f7931a,#e8730c)!important;
  color:#fff!important;
  box-shadow:0 6px 18px rgba(247,147,26,.3)!important;
}
.pay-btn-crypto:hover{filter:brightness(1.06);box-shadow:0 10px 26px rgba(247,147,26,.44)!important}
.brand-crypto{font-size:14.5px;color:#fff}
.cr-soon{
  position:absolute;top:5px;right:6px;
  padding:2px 6px;border-radius:7px;
  font-size:8.5px;font-weight:900;letter-spacing:.04em;
  text-transform:uppercase;
  color:#7a3d00;background:rgba(255,255,255,.85);
}
@media(max-width:480px){
  .pay-row{gap:7px}
  .pay-row .pay-btn{height:52px;border-radius:13px}
  .brand-stripe{font-size:17px}
  .pp-logo{height:19px}
  .brand-crypto{font-size:12px;gap:3px}
  .brand-crypto svg{width:15px;height:15px}
  .cr-soon{font-size:7.5px;padding:1.5px 4px;top:4px;right:4px}
  .pay-total b{font-size:18px}
}

/* ═══ Логотипы платёжных систем под кнопками ═══ */
.pay-logos{
  display:flex;gap:7px;flex-wrap:wrap;
  justify-content:center;align-items:center;
  margin:12px 0 8px;
  opacity:.9;
}
.pay-logos svg{flex-shrink:0}

/* ═══ Кнопка «История транзакций» ═══ */
.hist-open-btn{
  width:100%;margin-top:22px;
  display:flex;align-items:center;gap:11px;
  padding:15px 16px;
  border-radius:16px;cursor:pointer;
  border:1px solid var(--br);
  background:var(--bg2);
  font-family:inherit;font-size:14.5px;font-weight:800;
  color:var(--t1);text-align:left;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.hist-open-btn:hover{
  transform:translateY(-2px);
  border-color:var(--acc);
  box-shadow:0 8px 22px rgba(230,61,111,.18);
}
.hist-open-btn:active{transform:translateY(0) scale(.99)}
.hob-ico{font-size:19px;line-height:1;flex-shrink:0}
.hob-text{flex:1}
.hob-arrow{font-size:19px;color:var(--t3);flex-shrink:0}

/* ═══ Окно истории транзакций ═══ */
.hist-bg{
  position:fixed;inset:0;z-index:10480;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,2,8,.64);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .18s;
}
.hist-bg.open{opacity:1}
.hist-card{
  position:relative;
  width:100%;max-width:440px;max-height:82vh;
  display:flex;flex-direction:column;
  padding:20px 16px 14px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(22,26,44,.99),rgba(13,15,28,.99));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  transform:translateY(14px) scale(.97);
  transition:transform .22s cubic-bezier(.34,1.3,.5,1);
}
.hist-bg.open .hist-card{transform:translateY(0) scale(1)}
.hist-close{position:absolute;top:14px;right:14px;z-index:6;
  border:none;border-radius:50%;cursor:pointer;font-size:14px;
  color:var(--t2);background:rgba(255,255,255,.08);
  transition:background .16s,color .16s;
}
.hist-close:hover{background:rgba(255,255,255,.16);color:var(--t1)}
.hist-head{margin-bottom:12px;padding-right:38px}
.hist-ttl{font-size:18px;font-weight:900;color:var(--t1)}
.hist-card .history-list{
  flex:1;min-height:0;overflow-y:auto;
  margin:0;padding-right:2px;
}
.hist-card .history-list::-webkit-scrollbar{width:5px}
.hist-card .history-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}

/* Светлая тема */
html[data-theme="light"] .hist-open-btn{background:#fff;border-color:#e5e8f0}
html[data-theme="light"] .hist-bg{background:rgba(235,238,246,.62)}
html[data-theme="light"] .hist-card{
  background:linear-gradient(180deg,#fff,#fafbff);
  border-color:#e5e8f0;box-shadow:0 26px 60px rgba(20,30,60,.22);
}
html[data-theme="light"] .hist-close{background:#eef1f7;color:#5b6472}
html[data-theme="light"] .hist-close:hover{background:#e2e6ef;color:#1a2233}
html[data-theme="light"] .hist-card .history-list::-webkit-scrollbar-thumb{background:#d7dce6}

/* ═══════════════════════════════════════════════════════════════════════════
   ИСПРАВЛЕНИЕ ВЫСОТЫ ОКОН НА МОБИЛЬНЫХ (особенно Android Chrome)
   ───────────────────────────────────────────────────────────────────────────
   Две беды разом:
   1) align-items:center вместе с overflow-y:auto обрезает ВЕРХ окна,
      и доскроллить до него невозможно — лечится flex-start + margin:auto.
   2) Единица vh на Android Chrome считается по экрану БЕЗ адресной строки,
      поэтому 92vh оказывается выше видимой области. Единица dvh считает
      по-настоящему видимую высоту; для старых браузеров оставлен запасной vh.
   ═══════════════════════════════════════════════════════════════════════════ */
.gal-bg, .bonus-bg, .hist-bg, .promote-bg, .pv-bg{
  align-items:flex-start!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  padding:14px 12px!important;
}
.gal-card, .bonus-card, .hist-card, .promote-card, .pv-card{
  margin:auto!important;          /* центрирует, но не режет верх */
  flex-shrink:0;
}
/* Высота по реально видимой области экрана */
.gal-card{ max-height:none!important; }
.hist-card{ max-height:82vh!important; }
.gal-card, .hist-card{ width:100%; }

@supports (height: 100dvh){
  .gal-bg, .bonus-bg, .hist-bg, .promote-bg, .pv-bg{ min-height:100dvh; }
  .hist-card{ max-height:82dvh!important; }
}

/* Узкие экраны (Infinix HOT 40i и подобные ~360px) */
@media(max-width:400px){
  .gal-bg, .bonus-bg, .hist-bg, .promote-bg, .pv-bg{ padding:10px 8px!important; }
  .gal-card, .bonus-card, .hist-card, .promote-card{ border-radius:18px }
  .gal-head{ padding:14px 46px 10px 14px!important }
  .gal-ttl{ font-size:16px }
  .gal-add{ margin:0 10px 10px!important; height:44px }
  .fp-actions{ padding:9px 12px 5px }
  .fp-comments, .fp-input-row{ padding-left:12px;padding-right:12px }
}

/* ═══ Узкие экраны: плашка завершения и плавающие кнопки ═══ */
@media(max-width:420px){
  /* Плашка «Батл завершён» — меньше отступов, чтобы текст не ломался */
  .finished-banner{
    padding:18px 14px!important;
    margin:0 auto 16px!important;
    border-radius:18px!important;
  }
  /* Плавающие кнопки поднимаем над нижней навигацией и уводим от края */
  .battle-fixed-actions{
    right:12px!important;
    bottom:82px!important;
    gap:8px!important;
  }
  /* Подпись у кнопки «поделиться» на узком экране мешает — прячем,
     сама кнопка остаётся */
  .battle-share-label{display:none!important}
}

/* ═══ Инструкция по оплате криптой ═══ */
.cg-bg{
  position:fixed;inset:0;z-index:10500;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(0,2,8,.66);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .18s;overflow-y:auto;
}
.cg-bg.open{opacity:1}
.cg-card{
  position:relative;
  width:100%;max-width:390px;
  padding:26px 22px 20px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(22,26,44,.99),rgba(13,15,28,.99));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  text-align:center;
  transform:translateY(14px) scale(.97);
  transition:transform .22s cubic-bezier(.34,1.3,.5,1);
  margin:auto;
}
.cg-bg.open .cg-card{transform:translateY(0) scale(1)}
.cg-close{position:absolute;top:13px;right:13px;z-index:6;
  border:none;border-radius:50%;cursor:pointer;font-size:14px;
  color:var(--t2);background:rgba(255,255,255,.08);
  transition:background .16s,color .16s;
}
.cg-close:hover{background:rgba(255,255,255,.16);color:var(--t1)}
.cg-ico{
  font-size:34px;line-height:1;margin-bottom:6px;
  font-weight:900;color:#f7931a;pointer-events:none;
}
.cg-title{font-size:18px;font-weight:900;color:var(--t1);margin-bottom:16px}
.cg-steps{text-align:left;margin-bottom:14px}
.cg-step{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 0;
  font-size:13px;line-height:1.45;color:var(--t1);
}
.cg-num{
  flex-shrink:0;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  font-size:11.5px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#f7931a,#e8730c);
}
.cg-warn{
  text-align:left;
  padding:11px 12px;margin-bottom:16px;
  border-radius:13px;
  background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.28);
}
.cg-warn-row{
  display:flex;align-items:flex-start;gap:8px;
  font-size:11.5px;font-weight:600;color:var(--t2);line-height:1.4;
}
.cg-warn-row+.cg-warn-row{margin-top:7px}
.cg-warn-row span:first-child{flex-shrink:0}
.cg-go{
  width:100%;height:47px;
  border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#f7931a,#e8730c);
  box-shadow:0 8px 22px rgba(247,147,26,.34);
  transition:transform .16s,box-shadow .16s,filter .16s;
}
.cg-go:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(247,147,26,.45);filter:brightness(1.06)}
.cg-go:active{transform:translateY(0) scale(.99)}

html[data-theme="light"] .cg-bg{background:rgba(235,238,246,.62)}
html[data-theme="light"] .cg-card{
  background:linear-gradient(180deg,#fff,#fffaf5);
  border-color:#e5e8f0;box-shadow:0 26px 60px rgba(20,30,60,.22);
}
html[data-theme="light"] .cg-close{background:#eef1f7;color:#5b6472}
html[data-theme="light"] .cg-warn{background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.3)}
html[data-theme="light"] .cg-warn-row{color:#7a5a20}

/* Предупреждение о минимальной сумме для крипты */
.cg-min{
  padding:10px 12px;margin-bottom:12px;
  border-radius:12px;
  font-size:12.5px;font-weight:700;line-height:1.4;
  color:#ef4444;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.3);
}
.cg-go:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* Подпись о минимальной сумме для крипты */
.pay-crypto-note{
  margin:16px 0 4px;
  text-align:center;
  font-size:11.5px;font-weight:700;
  letter-spacing:.01em;
  color:var(--t3);
  opacity:.85;
  transition:color .16s,opacity .16s;
}
.pay-crypto-note.warn{color:#f59e0b}
/* Кнопка крипты, когда сумма слишком мала */
.pay-btn.pay-btn-off{
  opacity:.4;
  filter:grayscale(.6);
}

/* Символ валюты внутри поля своей суммы */
.topup-cur-wrap{
  position:relative;
  flex:1;min-width:0;
  display:flex;align-items:center;
}
.topup-cur-wrap .topup-custom-inp{
  width:100%;
  padding-right:34px;      /* место под символ валюты */
}
.topup-cur{
  position:absolute;right:12px;
  pointer-events:none;
  font-size:13px;font-weight:800;
  color:var(--t3);
}

/* ── Режим редактирования профиля ── */
.prof-edit-btn{
  position:absolute;top:10px;right:10px;z-index:10;
  width:36px;height:36px;border-radius:10px;border:none;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.prof-edit-btn:hover{background:rgba(0,0,0,.75)}
/* Когда режим редактирования активен */
.prof-edit-btn.active{background:linear-gradient(90deg,#ec4899,#a855f7)}

.prof-cover-edit-overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
  border-radius:inherit;
}
.peo-btn{
  padding:8px 16px;border-radius:10px;border:none;
  background:rgba(255,255,255,.15);backdrop-filter:blur(6px);
  color:#fff;font-weight:700;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:5px;
  transition:background .2s;
}
.peo-btn:hover{background:rgba(255,255,255,.28)}
.peo-del{background:rgba(239,68,68,.3)}
.peo-del:hover{background:rgba(239,68,68,.5)}

.prof-ava-edit-overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);border-radius:50%;
}
.peo-ava-btn{
  width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(255,255,255,.2);backdrop-filter:blur(6px);
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.peo-ava-btn:hover{background:rgba(255,255,255,.35)}


/* ═══ Global mobile optimizations ═══ */
@media(max-width:768px){
  /* Touch targets: min 44px for all interactive elements */
  button, .btn, [onclick], a.nav-tab, .mob-tab{min-height:44px}
  input, select, textarea{min-height:44px;font-size:16px}/* prevents iOS zoom */
  /* Smoother scrolling */
  .page, .dm-messages, .dm-dialogs, .fl-list{-webkit-overflow-scrolling:touch}
  /* Close buttons consistent on mobile */
  .vz-x{width:32px;height:32px}
}
@media(max-width:380px){
  /* Extra small screens */
  .vz-x{width:28px;height:28px}
  .vz-x svg{width:12px;height:12px}
}
/* Prevent text selection on buttons */
button,[role="button"]{-webkit-user-select:none;user-select:none}
/* Smooth scroll everywhere */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ═══════════════════════════════════════════════════════════════════════
   ИСПРАВЛЕНИЕ ШАПКИ НА ПЛАНШЕТАХ, ТЕЛЕФОНАХ ЛЁЖА И НОУТБУКАХ
   Шапке с полным набором элементов нужно ~1480px. На любой ширине меньше
   правые кнопки — сообщения, уведомления, язык, меню — уезжали за край
   экрана и становились недоступны. Существующие правила не менялись:
   здесь только добавки для проблемных ширин.
   ═══════════════════════════════════════════════════════════════════════ */

/* Статистика, вкладки, поиск и язык теперь уступают место по очереди
   и ровно тогда, когда перестают помещаться: это делает скрипт подгонки
   шапки в app.html (классы nf1…nf7 на <html>, правила — ниже в блоке
   «ПОДГОНКА ШАПКИ ПОД ШИРИНУ»). Раньше тут были жёсткие границы 1620
   и 1460px, и при других шрифтах, масштабе или языке кнопка меню
   уезжала за край окна в промежутках между ними. */
/* Планшеты и телефоны лёжа: вкладки переезжают в нижнюю панель — ровно
   так же, как на телефоне (правила взяты из блока max-width:580px).
   Нижней границы нет намеренно: при масштабе браузера ширина бывает
   дробной (например, 580,8px), и в щели между «до 580» и «от 581» не
   действовало бы ни одно правило. С телефонным блоком правила совпадают,
   поэтому их наложение безвредно. */
@media(max-width:1100px){
  .mob-nav{display:flex}
  .nav-tabs{display:none}
  .nav-add-group{display:none!important}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
}
/* Отступы шапки — только выше телефонного диапазона. Телефоны имеют своё
   правило (max-width:640px) выше по файлу; при равной значимости побеждает
   последнее, поэтому здесь мы обязаны не пересекаться с ним, иначе шапка
   на телефоне сдвинулась бы. Граница дробная — чтобы не осталось щели. */
@media(min-width:640.01px) and (max-width:1100px){
  nav{padding:0 10px;gap:3px}
}

/* Поиск в шапке задуман шириной 210px, но ему было разрешено сжиматься
   до нуля: при нехватке места от него оставалась одна лупа, и ввести код
   батла или ник было нельзя. Держим минимальную рабочую ширину — место
   ему уступает статистика (правила выше). */
/* Точное дополнение к «до 1100px» — без щели на дробных ширинах */
@media not all and (max-width:1100px){
  .nav-search{min-width:150px}
}

/* Пункт «Язык» в боковом меню — только там, где кнопки языка в шапке нет */
.sm-item.sm-lang-mobile{display:none}
@media(max-width:860px){
  .sm-item.sm-lang-mobile{display:flex}
}

/* ═══════════════════════════════════════════════════════════════════════
   КНОПКА «ПОДНЯТЬ БАТЛ» В ЗАГОЛОВКЕ «ТОП СЕЙЧАС» И ОКНО ВЫБОРА БАТЛА
   ═══════════════════════════════════════════════════════════════════════ */
.hr-raise-btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 12px;border:0;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.01em;color:#fff;
  background:linear-gradient(135deg,#ff4d8d 0%,#ec4899 35%,#a855f7 70%,#7c3aed 100%);
  background-size:180% 180%;
  box-shadow:0 8px 22px rgba(236,72,153,.38),0 2px 6px rgba(124,58,237,.25),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,background-position .5s;
  -webkit-tap-highlight-color:transparent;
}
/* Пробегающий блик */
.hr-raise-btn::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);
  animation:hrRaiseShine 3.2s ease-in-out infinite;
}
@keyframes hrRaiseShine{0%,55%{left:-60%}100%{left:130%}}
.hr-raise-btn:hover{
  transform:translateY(-2px) scale(1.03);background-position:100% 0;
  box-shadow:0 12px 28px rgba(236,72,153,.48),0 3px 10px rgba(124,58,237,.32),inset 0 1px 0 rgba(255,255,255,.4);
}
.hr-raise-btn:active{transform:scale(.96)}
.hr-raise-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;font-size:14px;line-height:1;
  background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  animation:hrRaiseRocket 2.4s ease-in-out infinite;
}
@keyframes hrRaiseRocket{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-8deg)}}
@media(max-width:420px){
  .hr-raise-btn{padding:8px 13px 8px 9px;font-size:12.5px;gap:6px}
  .hr-raise-ico{width:22px;height:22px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .hr-raise-btn::after,.hr-raise-ico{animation:none}
}

/* Окно выбора батла */
.tpk-bg{
  position:fixed;inset:0;z-index:960;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:tpkFade .18s ease;
}
@keyframes tpkFade{from{opacity:0}to{opacity:1}}
.tpk-card{
  width:100%;max-width:460px;max-height:min(78vh,660px);
  display:flex;flex-direction:column;overflow:hidden;border-radius:22px;
  background:linear-gradient(180deg,#1c1c25 0%,#141419 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 40px rgba(236,72,153,.12);
  animation:tpkPop .26s cubic-bezier(.34,1.3,.64,1);
}
@keyframes tpkPop{from{transform:scale(.94) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.tpk-head{
  flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.07);
}
.tpk-title{font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.01em}
.tpk-head .vz-x{flex:0 0 34px;width:34px;height:34px;min-width:34px;min-height:34px;padding:0}
.tpk-sub{font-size:12.5px;color:var(--t3);margin-top:4px;display:flex;align-items:center;gap:4px}
.tpk-list{flex:1;min-height:0;overflow-y:auto;padding:10px;-webkit-overflow-scrolling:touch}
.tpk-list::-webkit-scrollbar{width:5px}
.tpk-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.tpk-row{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:10px;margin-bottom:6px;border-radius:14px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  font-family:inherit;color:inherit;
  transition:background .15s,border-color .15s,transform .12s;
}
.tpk-row:hover{background:linear-gradient(135deg,rgba(236,72,153,.14),rgba(124,58,237,.10));border-color:rgba(236,72,153,.4)}
.tpk-row:active{transform:scale(.985)}
.tpk-thumbs{flex-shrink:0;display:flex}
.tpk-thumbs img{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
  border:2px solid #16161c;background:var(--bg2);
}
.tpk-thumbs img+img{margin-left:-12px}
.tpk-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tpk-names{
  font-size:13.5px;font-weight:700;color:var(--t1);line-height:1.3;
  /* до двух строк: иначе длинный первый ник вытеснял второй и не было видно, с кем батл */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;
}
.tpk-names i{font-style:normal;color:var(--acc);font-weight:800;margin:0 3px}
.tpk-meta{font-size:12px;color:var(--t3)}
.tpk-go{
  flex-shrink:0;padding:7px 13px;border-radius:999px;
  font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#ec4899,#7c3aed);
  box-shadow:0 4px 12px rgba(236,72,153,.3);
}
.tpk-empty{padding:30px 16px;text-align:center;font-size:13.5px;color:var(--t3)}
html[data-theme="light"] .tpk-card{
  background:linear-gradient(180deg,#fff 0%,#faf9fc 100%);
  border-color:rgba(0,0,0,.08);box-shadow:0 24px 60px rgba(0,0,0,.18);
}
html[data-theme="light"] .tpk-head{border-bottom-color:rgba(0,0,0,.07)}
html[data-theme="light"] .tpk-row{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.07)}
html[data-theme="light"] .tpk-thumbs img{border-color:#fff}
@media(max-width:640px){.tpk-card{max-height:84vh}}

/* Метка счёта в истории операций — под названием, чтобы её не обрезало */
.tx-acc{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:6px;white-space:nowrap}
.tx-acc-main{color:#22c55e;background:rgba(34,197,94,.13)}
.tx-acc-bonus{color:#a78bfa;background:rgba(167,139,250,.15)}

/* ═══════════════════════════════════════════════════════════════════════
   ВИДЕО-АКЦИЯ: баннер на главной и окно с условиями
   ═══════════════════════════════════════════════════════════════════════ */
.pv-banner{
  position:relative;overflow:hidden;isolation:isolate;cursor:pointer;
  max-width:760px;margin:16px auto 0;
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;
  background:linear-gradient(120deg,rgba(236,72,153,.16),rgba(124,58,237,.14) 55%,rgba(59,130,246,.12));
  border:1px solid rgba(236,72,153,.35);
  box-shadow:0 10px 30px rgba(236,72,153,.14);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.pv-banner::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);animation:pvShine 4s ease-in-out infinite;
}
@keyframes pvShine{0%,60%{left:-60%}100%{left:130%}}
.pv-banner:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(236,72,153,.22)}
.pv-banner:active{transform:scale(.99)}
.pv-ico{
  flex-shrink:0;width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  background:linear-gradient(135deg,#ff4d8d,#7c3aed);
  box-shadow:0 6px 16px rgba(236,72,153,.4),inset 0 1px 0 rgba(255,255,255,.3);
}
.pv-txt{flex:1;min-width:0}
.pv-t{font-size:15px;font-weight:800;color:var(--t1);letter-spacing:-.01em;line-height:1.25}
.pv-s{font-size:12.5px;color:var(--t2);margin-top:3px;line-height:1.35}
.pv-go{
  flex-shrink:0;padding:9px 15px;border-radius:999px;
  font-size:13px;font-weight:800;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#ec4899,#7c3aed);
  box-shadow:0 6px 16px rgba(236,72,153,.35);
}
@media(max-width:1100px){.pv-banner{margin:14px 16px 0}}
@media(max-width:480px){
  .pv-banner{gap:11px;padding:12px}
  .pv-ico{width:42px;height:42px;font-size:21px;border-radius:12px}
  .pv-t{font-size:14px}.pv-s{font-size:12px}
  .pv-go{padding:8px 12px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.pv-banner::after{animation:none}}

.pvm-bg{
  position:fixed;inset:0;z-index:960;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:tpkFade .18s ease;
}
.pvm-card{
  width:100%;max-width:460px;max-height:min(86vh,720px);display:flex;flex-direction:column;overflow:hidden;
  border-radius:22px;background:linear-gradient(180deg,#1c1c25 0%,#141419 100%);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 40px rgba(236,72,153,.12);
  animation:tpkPop .26s cubic-bezier(.34,1.3,.64,1);
}
.pvm-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.pvm-head .vz-x{flex:0 0 34px;width:34px;height:34px;min-width:34px;min-height:34px;padding:0}
.pvm-title{font-size:16px;font-weight:800;color:var(--t1)}
.pvm-body{overflow-y:auto;padding:16px 18px 20px}
.pvm-lead{font-size:18px;font-weight:800;color:var(--t1);line-height:1.3;margin-bottom:12px}
.pvm-rules{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.pvm-rules li{font-size:13.5px;color:var(--t2);line-height:1.45}
.pvm-rules li::marker{color:var(--acc);font-weight:800}
.pvm-note{font-size:12.5px;color:var(--t3);line-height:1.45;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);margin-bottom:14px}
.pv-st{font-size:13.5px;font-weight:700;padding:10px 12px;border-radius:12px;margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pv-st-wait{color:#fbbf24;background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.25)}
.pv-st-bad{color:#f87171;background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.25)}
.pv-st-ok{color:#22c55e;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.25)}
.pv-st-hint{width:100%;font-size:12px;font-weight:500;color:var(--t3)}
.pvm-input{
  width:100%;box-sizing:border-box;padding:13px 14px;border-radius:13px;font-family:inherit;font-size:14px;
  color:var(--t1);background:var(--bg2);border:1px solid rgba(255,255,255,.12);outline:none;margin-bottom:10px;
}
.pvm-input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(236,72,153,.15)}
.pvm-send{
  width:100%;padding:13px;border:0;border-radius:13px;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#ec4899,#7c3aed);box-shadow:0 8px 20px rgba(236,72,153,.32);
}
.pvm-send:disabled{opacity:.6;cursor:default}
html[data-theme="light"] .pvm-card{background:linear-gradient(180deg,#fff 0%,#faf9fc 100%);border-color:rgba(0,0,0,.08);box-shadow:0 24px 60px rgba(0,0,0,.18)}
html[data-theme="light"] .pvm-head{border-bottom-color:rgba(0,0,0,.07)}
html[data-theme="light"] .pvm-note{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.07)}
html[data-theme="light"] .pvm-input{border-color:rgba(0,0,0,.12)}
.tpk-mine{color:var(--acc);font-weight:800}

/* ═══ Вкладки подарков по редкости в окне дарения ═══ */
.gm-tabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  margin:2px 0 12px;
}
.gm-tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:0;padding:8px 4px 7px;border-radius:12px;cursor:pointer;
  font-family:inherit;color:var(--t2);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  transition:background .15s,border-color .15s,color .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.gm-tab:hover{border-color:var(--gm-c);color:var(--t1)}
.gm-tab:active{transform:scale(.97)}
.gm-tab.active{
  color:var(--t1);border-color:var(--gm-c);
  background:rgba(255,255,255,.09);              /* запасной вариант для старых браузеров */
  box-shadow:0 0 0 1px var(--gm-c) inset;
  background:color-mix(in srgb, var(--gm-c) 16%, transparent);
  box-shadow:0 0 0 1px var(--gm-c) inset, 0 6px 16px color-mix(in srgb, var(--gm-c) 25%, transparent);
}
.gm-tab-dot{width:8px;height:8px;border-radius:50%;background:var(--gm-c);box-shadow:0 0 8px var(--gm-c)}
.gm-tab-name{
  max-width:100%;font-size:11.5px;font-weight:800;line-height:1.15;text-align:center;
  /* Название целиком, при нехватке места — в две строки, без многоточия */
  white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:manual;
}
/* Карточки своего размера: высота сетки зафиксирована по самой большой
   вкладке, а свободное место остаётся снизу, а не растягивает карточки */
#gm-grid{align-content:start;align-items:start}
.gm-tab-n{font-size:10.5px;font-weight:700;color:var(--t3)}
.gm-tab.active .gm-tab-n{color:var(--gm-c)}
html[data-theme="light"] .gm-tab{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
@media(max-width:360px){
  .gm-tabs{gap:4px}
  .gm-tab{padding:7px 2px 6px}
  .gm-tab-name{font-size:10.5px}
}
/* Низкие экраны (старые маленькие телефоны): поджимаем окно, чтобы не листать */
@media(max-height:640px){
  #gift-modal .gm-tabs{margin-bottom:8px}
  #gift-modal .gm-tab{padding:6px 2px 5px;gap:2px}
  #gm-grid .gift-item{padding-top:6px;padding-bottom:6px}
  #gm-grid .gift-item > div:first-child{height:38px!important;margin-bottom:2px!important}
  #gm-grid .gift-image{max-width:38px!important;max-height:38px!important}
}

/* Голос отправлен, ждём подтверждения сервера — карточка чуть приглушена,
   повторные нажатия не проходят. Успех показывается только после ответа. */
.duel-card.vote-pending,.vote-pending{opacity:.72;pointer-events:none;transition:opacity .15s}

/* ═══════════════════════════════════════════════════════════════════════
   ПОДГОНКА ШАПКИ ПОД ШИРИНУ
   Скрипт в app.html проверяет, помещается ли шапка, и по одному добавляет
   на <html> классы nf1, nf2 … nf7, пока кнопка меню не окажется внутри
   окна. Каждый уровень включает и все предыдущие. Порядок уступок:
   nf1 — подписи статистики   nf2 — статистика целиком
   nf3 — компактные вкладки   nf4 — вкладки уезжают в нижнюю панель
   nf5 — поиск сворачивается в лупу, язык уходит в боковое меню
   nf6 — прячется «+ В батл» nf7 — минимальные отступы
   Уровни 4–6 повторяют то, что на узких экранах уже делают правила
   max-width:1100 / 860 / 380 — только включаются, когда места не хватает
   на самом деле, а не на заранее угаданной ширине.
   ═══════════════════════════════════════════════════════════════════════ */
/* На планшетах и телефонах статистики в шапке нет — как и раньше */
@media(max-width:1100px){
  .nav-stats{display:none}
}
html.nf1 .nav-stats .nav-stat span[data-i]{display:none}
html.nf2 .nav-stats{display:none}

html.nf3 .nav-tab{padding:8px 10px;font-size:13px}
html.nf3 #nav-profile{padding:8px 10px!important}
html.nf3 .nav-add{padding:9px 13px 9px 11px}

html.nf4 .mob-nav{display:flex}
html.nf4 .nav-tabs{display:none}
html.nf4 .nav-add-group{display:none!important}
html.nf4 body{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
html.nf4 nav{padding:0 10px;gap:3px}

html.nf5 .nav-search{display:none}
html.nf5 .lang-btn{display:none!important}
html.nf5 .mob-search-btn{display:flex}
html.nf5 .sm-item.sm-lang-mobile{display:flex}
html.nf5 .lang-bar{
  left:14px;right:14px;
  top:auto;bottom:96px;
  z-index:11000;
  min-width:0;
}
html.nf5 .nav-search.mob-open{
  display:flex!important;
  position:fixed;
  top:58px;left:10px;right:10px;
  z-index:1250;
  flex-basis:auto;
  height:44px;
  padding:0 12px;
  border-radius:14px;
  background:var(--bg2);
  border:1px solid var(--br);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  animation:mobSearchIn .18s ease;
}
html.nf5 .nav-search.mob-open .ns-input{font-size:15px}
html.nf5 .nav-search.mob-open .ns-result{top:50px;left:0;right:0;max-height:60vh}

html.nf6 .nav-add{display:none}

html.nf7 nav{padding:0 8px;gap:2px}
html.nf7 .logo{font-size:14px;gap:4px}
html.nf7 #dmBtn,html.nf7 #notifBell{margin-left:0!important}

/* ═══════════════════════════════════════════════════════════════════════
   ПОДАРКИ КОМБО (как в TikTok Live)
   Круглая кнопка внизу по центру: каждое нажатие дарит ещё один подарок.
   Золотое кольцо — обратный отсчёт до конца комбо (--gcd), над кнопкой
   счётчик ×N, над фото получателя — такой же счётчик.
   ═══════════════════════════════════════════════════════════════════════ */
.gm-combo-hint{
  display:flex;align-items:flex-start;gap:8px;
  margin:12px 0 14px;padding:10px 12px;border-radius:12px;
  background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.24);
  font-size:12.5px;line-height:1.4;color:var(--t2);font-weight:600;
}
.gm-combo-ic{color:#ffd166;flex-shrink:0}

.gcombo{
  position:fixed;left:50%;
  bottom:calc(30px + env(safe-area-inset-bottom, 0px));
  z-index:880;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
  transform:translateX(-50%);
  animation:gcomboIn .3s cubic-bezier(.2,1.4,.4,1) both;
}
.gcombo.out{animation:gcomboOut .24s ease-in forwards}
@keyframes gcomboIn{from{opacity:0;transform:translateX(-50%) scale(.4)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes gcomboOut{from{opacity:1;transform:translateX(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) scale(.6)}}
/* Над нижней панелью вкладок (телефоны, планшеты, узкие окна) */
@media(max-width:1100px){
  .gcombo{bottom:calc(88px + env(safe-area-inset-bottom, 0px))}
}
html.nf4 .gcombo{bottom:calc(88px + env(safe-area-inset-bottom, 0px))}

.gcombo-btn{
  pointer-events:auto;position:relative;
  width:84px;height:84px;border-radius:50%;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:44px;line-height:1;color:#fff;cursor:pointer;
  background:radial-gradient(circle at 35% 28%, #ff7cc0 0%, #e0379f 45%, #7c3aed 100%);
  box-shadow:0 0 0 3px rgba(255,255,255,.14), 0 12px 30px rgba(192,38,168,.5), 0 0 36px var(--gc-glow, #ff4fa6);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
  transition:transform .08s;
}
.gcombo-btn:active{transform:scale(.9)}
.gcombo-btn.hit{animation:gcomboHit .22s ease-out}
@keyframes gcomboHit{0%{transform:scale(.86)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.gcombo-btn:focus-visible{outline:3px solid #ffd166;outline-offset:8px}
.gcombo-btn img{
  width:56px;height:56px;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
.gcombo-ring{
  position:absolute;left:-8px;top:-8px;
  width:calc(100% + 16px);height:calc(100% + 16px);
  transform:rotate(-90deg);pointer-events:none;overflow:visible;
}
.gcombo-ring circle{fill:none;stroke-width:4.5}
.gcombo-ring .bg{stroke:rgba(255,255,255,.18)}
.gcombo-ring .fg{
  stroke:#ffd166;stroke-linecap:round;
  stroke-dasharray:289.03;stroke-dashoffset:0;
  animation:gcomboRing var(--gcd, 3s) linear forwards;
}
@keyframes gcomboRing{from{stroke-dashoffset:0}to{stroke-dashoffset:289.03}}

.gcombo-count{
  font-family:'Inter',sans-serif;font-weight:900;font-style:italic;
  font-size:32px;line-height:1;letter-spacing:-.02em;color:#ffd166;
  text-shadow:0 2px 0 #b45309, 0 0 18px rgba(255,209,102,.7), 0 4px 14px rgba(0,0,0,.5);
  opacity:0;transform:scale(.6);transition:opacity .15s, transform .15s;
  white-space:nowrap;
}
.gcombo-count.show{opacity:1;transform:scale(1)}
.gcombo-count.show.pop{animation:gcomboPop .26s cubic-bezier(.2,1.6,.4,1)}
@keyframes gcomboPop{0%{transform:scale(1.5)}100%{transform:scale(1)}}
.gcombo-x{font-size:22px;margin-right:2px}
.gcombo-hint{
  display:flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:12px;font-weight:700;color:#fff;
  background:rgba(15,10,25,.78);border:1px solid rgba(255,255,255,.14);
  padding:4px 11px;border-radius:999px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* Счётчик ×N над фото получателя (лежит в слое страницы, едет вместе с фото) */
.gs-combo-x{
  z-index:621;pointer-events:none;opacity:0;
  font-family:'Inter',sans-serif;font-weight:900;font-style:italic;
  font-size:34px;line-height:1;color:#fff;white-space:nowrap;
  text-shadow:0 0 14px var(--glow,#ff4fa6), 0 0 28px var(--glow,#ff4fa6), 0 3px 8px rgba(0,0,0,.6);
  transform:translate(-50%,-50%);
}
.gs-combo-x.pop{animation:gsComboX .45s cubic-bezier(.2,1.5,.4,1) forwards}
.gs-combo-x.fade{animation:gsComboXOut .35s ease-in forwards}
@keyframes gsComboX{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}
  35%{opacity:1;transform:translate(-50%,-50%) scale(.94)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes gsComboXOut{
  from{opacity:1;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;transform:translate(-50%,-80%) scale(.9)}
}
@media(prefers-reduced-motion:reduce){
  .gcombo,.gcombo.out,.gcombo-btn.hit,.gcombo-count.show.pop{animation-duration:.01s}
}

/* Кнопки «Поделиться» и «Жалоба» — над нижней панелью вкладок, где она есть.
   Раньше между 769 и 1100px они оказывались поверх панели. */
@media(min-width:768.01px) and (max-width:1100px){
  .battle-fixed-actions{bottom:84px}
}
html.nf4 .battle-fixed-actions{bottom:84px}

/* ═══════════════════════════════════════════════════════════════════════
   КРЕСТИКИ ЗАКРЫТИЯ НА ТЕЛЕФОНАХ — РОВНЫЙ КРУГ
   Правило для телефонов «любая кнопка не ниже 44px» вытягивало крестик
   в овал (32×44). Теперь высота всегда равна ширине, а удобная для
   пальца область 44px остаётся — невидимым кольцом вокруг кнопки.
   ═══════════════════════════════════════════════════════════════════════ */
.vz-x{min-height:0;min-width:0;aspect-ratio:1/1;flex-shrink:0}
@media(max-width:768px){
  .vz-x{min-height:0;max-height:none}
}
@media(hover:none),(pointer:coarse){
  .vz-x::after{content:"";position:absolute;inset:-6px;border-radius:50%}
  .vz-x.vz-x-sm::after{inset:-9px}
}

/* ═══════════════════════════════════════════════════════════════════════
   АДАПТАЦИЯ ПОД ТЕЛЕФОНЫ — ИСПРАВЛЕНИЯ ПО ИТОГАМ ПРОВЕРКИ ВСЕХ СТРАНИЦ
   (ширина 320–430px, телефон лёжа 667×375 и 844×390, планшет 768px)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Круглые кнопки и аватары не должны вытягиваться в овал правилом
      «кнопка не ниже 44px» — у них высота всегда равна ширине. */
@media(max-width:768px){
  .mob-search-btn,.dmd-del{min-height:0;aspect-ratio:1/1}
  .bc-avatar,.dmc-ava,.dmd-ava{min-height:0;aspect-ratio:1/1}
  .br-name-link{min-height:0}
}
@media(hover:none),(pointer:coarse){
  .mob-search-btn{position:relative}
  .mob-search-btn::after{content:"";position:absolute;inset:-5px;border-radius:50%}
}
/* Аватар в чате и в списке диалогов не сжимается длинным именем */
.dmc-ava,.dmd-ava{flex-shrink:0}
/* Свой аватар в поле комментария: фото внутри кружка, а не вытянутое */
.bc-avatar{overflow:hidden}
#bc-my-avatar{position:relative}
#bc-my-avatar img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block;border-radius:50%}

/* 2. Поле комментария: на узком экране поле ввода было шириной в пару букв */
@media(max-width:480px){
  .bc-compose{grid-template-columns:32px minmax(0,1fr) auto auto;gap:6px;padding:6px 6px 6px 8px}
  .bc-compose .bc-avatar{width:32px;height:32px}
  .bc-send{padding:0 11px;font-size:12px}
  .bc-emoji-btn{width:32px;height:32px}
}
@media(max-width:400px){
  /* Свой аватар здесь не обязателен — место отдаём тексту */
  .bc-compose{grid-template-columns:minmax(0,1fr) auto auto}
  .bc-compose #bc-my-avatar{display:none}
}

/* 3. Поле со ссылкой рядом с кнопкой «Копировать» — кнопка вылезала за окно */
input:not([type=checkbox]):not([type=radio]):not([type=range]){min-width:0}
.sm-link-input{min-width:0;width:100%}
@media(max-width:380px){
  .sm-copy-btn{padding:10px 12px;font-size:12px}
}

/* 4. Статистика профиля: три карточки — в один ряд, без «сироты» во втором */
@media(max-width:380px){
  .prof-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.pp-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:480px){
  .pp-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pp-stat{padding:12px 4px}
}

/* 5. Карточки в комнатах ожидания: на телефоне кнопка «Принять» уходит под
      фото и текст, а не сжимает текст до одного слова в строке */
@media(max-width:480px){
  .room-card{display:grid!important;grid-template-columns:78px minmax(0,1fr);gap:10px 12px!important;align-items:center!important;padding:12px!important}
  .room-card-photo{width:78px!important;height:100px!important;border-radius:12px!important}
  .room-card-act{grid-column:1 / -1;width:100%!important}
  .room-card-btn{width:100%!important;padding:12px 16px!important}
}

/* 6. Длинный email в настройках наезжал на значок замка */
.si-sub{overflow-wrap:anywhere}
.si-info{padding-right:6px}

/* 7. Крестик в окне выбора страны был прибит к углу экрана, а не окна */
.cp-head .cp-close{position:relative!important;top:auto!important;right:auto!important}

/* 8. «Пополнить баланс» в окне подарка не разрывается на две строки */
#gift-modal .gift-balance-row a{white-space:nowrap}

/* 9. Заголовок завершённого батла на телефоне: блок был узким и наезжал
      на шапку и фото. Теперь он в потоке, по ширине текста. */
@media(max-width:768px){
  .battle-top-bar:has(.bmt-finished-title){min-height:0!important;display:flex!important;justify-content:center}
  .battle-top-bar:has(.bmt-finished-title) > div:first-child{display:none}
  .battle-mega-timer:has(.bmt-finished-title){
    position:relative!important;left:auto!important;top:auto!important;transform:none!important;
    width:auto!important;max-width:calc(100% - 8px);margin:0 auto!important;padding:10px 18px 12px!important;
  }
  .bmt-finished-title{font-size:18px;white-space:nowrap}
  .bmt-finished-sub{font-size:10px}
  .battle-mega-timer .finished-winner{margin-top:6px;padding:5px 12px;font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* 10. Боковое меню на телефоне лёжа: блок баланса сжимался по высоте и
       пункты меню налезали на него. Элементы меню больше не сжимаются —
       меню просто прокручивается. */
.side-menu > *{flex-shrink:0}
/* Самые узкие телефоны (≤360px): «Отправить» — значком-стрелкой, текст
   остаётся для экранного диктора, поле ввода становится шире */
@media(max-width:360px){
  .bc-send{font-size:0;width:40px;padding:0;display:grid;place-items:center}
  .bc-send::before{content:"";width:16px;height:16px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2L15 22L11 13L2 9L22 2Z'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2L15 22L11 13L2 9L22 2Z'/></svg>") center/contain no-repeat;}
}
/* Имена-ссылки (ник в комментарии, упоминания) не растягиваются по высоте
   правилом «кнопка не ниже 44px» — время и текст стоят ровно рядом с ником */
@media(max-width:768px){
  span[onclick],.u-mention{min-height:0}
}
/* Меню «⋯» в переписке: пункты в одну строку («Выбрать сообщения» переносился) */
#dm-chat-menu .dm-sheet-btn{white-space:nowrap}
#dm-chat-menu{max-width:calc(100vw - 16px)}

/* ═══════════════════════════════════════════════════════════════════════
   ПРИГЛАСИ ДРУЗЕЙ — на телефоне пункт бокового меню и окно по центру
   ═══════════════════════════════════════════════════════════════════════ */
.sm-item.sm-ref-mobile{display:none}
.sm-ref-badge{
  margin-left:auto;margin-right:4px;
  font-size:11px;font-weight:800;color:#a78bfa;
  background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);
  padding:2px 8px;border-radius:999px;
}
@media(max-width:768px){
  .sm-item.sm-ref-mobile{display:flex}
  /* в профиле блок не показываем — он открывается из меню */
  #page-profile #ref-block{display:none}
}
.ref-modal-bg{
  position:fixed;inset:0;z-index:9500;
  background:rgba(0,0,0,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:cpFadeIn .2s ease;
}
.ref-modal{
  position:relative;width:100%;max-width:420px;max-height:calc(100vh - 32px);overflow-y:auto;
  background:var(--bg1);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:refPop .22s cubic-bezier(.2,1.2,.4,1);
}
@keyframes refPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.ref-modal #ref-block{margin:0!important;padding:20px 16px 16px;border-radius:18px}
.ref-modal .ref-modal-x{position:absolute;top:12px;right:12px;z-index:3}
.ref-modal .ref-block-top{padding-right:40px}

/* ═══════════════════════════════════════════════════════════════════════
   МОИ БАТЛЫ: вкладки «Активные / Завершённые» и кнопка удаления — нежнее
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .my-battles-tabs{
    gap:4px;padding:3px;border-radius:999px;margin-bottom:12px;
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  }
  .mb-tab{
    min-height:0;padding:7px 10px;border-radius:999px;
    font-size:12.5px;font-weight:700;letter-spacing:-.01em;gap:6px;
    color:var(--t2);
  }
  .mb-tab.active{
    background:linear-gradient(135deg,rgba(255,79,166,.20),rgba(124,58,237,.16));
    color:#ff8cc6;
    box-shadow:inset 0 0 0 1px rgba(255,95,178,.32);
  }
  .mb-count{padding:0 6px;line-height:16px;font-size:10px;border-radius:999px;min-width:16px}
  .mb-tab.active .mb-count{background:rgba(255,95,178,.22);color:#ffb3d9}
  .mb-tab:not(.active) .mb-count{background:rgba(255,255,255,.07);color:var(--t2)}

  .mb-delete{
    width:32px;height:32px;min-height:0;border-radius:50%;
    background:rgba(248,113,113,.07);
    border:1px solid rgba(248,113,113,.16);
    color:rgba(248,113,113,.85);
    align-self:center;position:relative;
  }
  .mb-delete svg{width:15px;height:15px}
  .mb-delete:active{background:rgba(248,113,113,.18);color:#f87171;transform:scale(.92)}
}
@media(hover:none),(pointer:coarse){
  .mb-delete::after{content:"";position:absolute;inset:-6px;border-radius:50%}
}
html[data-theme="light"] .mb-tab.active{color:#d6247a;box-shadow:inset 0 0 0 1px rgba(214,36,122,.28)}
html[data-theme="light"] .mb-tab.active .mb-count{background:rgba(214,36,122,.14);color:#d6247a}
html[data-theme="light"] .my-battles-tabs{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.07)}
.sm-item.sm-ref-mobile > span[data-i]{min-width:0;line-height:1.25}

/* ═══════════════════════════════════════════════════════════════════════
   ЗАВЕРШЁННЫЙ БАТЛ: корона победителя и кнопки справа
   ═══════════════════════════════════════════════════════════════════════ */
/* На телефоне блок с фото обрезает всё, что выше карточки, и корона была
   видна наполовину. Теперь она сидит на верхнем крае фото. */
@media(max-width:768px){
  .finished-winner-card::before{
    top:6px!important;font-size:28px!important;line-height:1;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(251,191,36,.75))!important;
    animation:crownFloat 2.8s ease-in-out infinite;
  }
}
@keyframes crownFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.finished-winner-card::before{animation:none}}
/* В завершённом батле жалоба и «Поделиться» не нужны */
.battle-fixed-actions.is-finished{display:none!important}

/* ═══════════════════════════════════════════════════════════════════════
   «+ В БАТЛ» В ШАПКЕ НА ТЕЛЕФОНЕ — компактная аккуратная кнопка
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .nav-add{
    min-height:0;height:34px;padding:0 13px 0 11px;border-radius:999px;
    font-size:12.5px;font-weight:700;gap:5px;letter-spacing:-.01em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(236,72,153,.32);
  }
  .nav-add svg{width:13px;height:13px}
}

/* ═══════════════════════════════════════════════════════════════════════
   НИЖНЕЕ МЕНЮ — «ПАРЯЩИЙ ДОК»
   Стеклянная капсула над краем экрана. Активная вкладка — светящаяся
   градиентная «капля» за иконкой и градиентная подпись.
   Сам .mob-nav остаётся полосой во всю ширину (его высоту используют
   другие окна для отступа), а капсулу рисует ::before.
   ═══════════════════════════════════════════════════════════════════════ */
.mob-nav{
  height:calc(74px + env(safe-area-inset-bottom, 0px));
  padding:0 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background:transparent!important;border:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  align-items:stretch;justify-content:space-between;
  pointer-events:none;
}
.mob-nav::before{
  content:"";position:absolute;z-index:0;
  left:12px;right:12px;top:0;bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  border-radius:24px;
  background:linear-gradient(180deg,rgba(28,18,42,.96),rgba(11,7,18,.97));
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 36px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
  pointer-events:auto;
}
/* тонкая неоновая линия по верхнему краю капсулы */
.mob-nav::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:40px;right:40px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,79,166,.75),rgba(168,107,255,.8),rgba(58,155,255,.7),transparent);
  opacity:.7;
}
.mob-nav .mob-tab{
  position:relative;z-index:1;isolation:isolate;pointer-events:auto;
  flex:1;min-width:0;min-height:0;height:64px;
  justify-content:flex-start;padding:12px 2px 0;gap:5px;
  color:rgba(255,255,255,.46);
  transition:color .2s;
}
.mob-nav .mob-tab svg{
  width:22px;height:22px;stroke:currentColor;
  transition:transform .25s cubic-bezier(.3,1.4,.5,1),stroke .2s,filter .2s;
}
.mob-nav .mob-label{font-size:10.5px;font-weight:600;letter-spacing:.01em;transition:color .2s}
.mob-nav .mob-tab:active svg{transform:scale(.86)}

/* активная вкладка */
.mob-nav .mob-tab.active{color:#fff}
.mob-nav .mob-tab.active::before{
  content:"";position:absolute;z-index:-1;
  top:7px;left:50%;width:48px;height:32px;margin-left:-24px;
  border-radius:16px;
  background:linear-gradient(135deg,#ff4fa6 0%,#c026a8 55%,#7c3aed 100%);
  box-shadow:0 6px 18px rgba(236,72,153,.45),0 0 22px rgba(168,85,247,.35),inset 0 1px 0 rgba(255,255,255,.28);
  animation:mobBubble .35s cubic-bezier(.3,1.5,.5,1);
}
.mob-nav .mob-tab.active svg{stroke:#fff;transform:translateY(-1px)}
.mob-nav .mob-tab.active .mob-label{
  background:linear-gradient(90deg,#ff7cc0,#b794ff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-weight:700;
}
@keyframes mobBubble{0%{transform:scale(.55);opacity:.3}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.mob-nav .mob-tab.active::before{animation:none}}

/* светлая тема */
html[data-theme="light"] .mob-nav{background:transparent!important;border:none!important}
html[data-theme="light"] .mob-nav::before{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,246,252,.98));
  border-color:rgba(20,20,40,.08);
  box-shadow:0 12px 30px rgba(40,20,70,.14),0 2px 6px rgba(40,20,70,.08),inset 0 1px 0 #fff;
}
html[data-theme="light"] .mob-nav .mob-tab{color:rgba(30,25,50,.45)}
html[data-theme="light"] .mob-nav .mob-tab.active{color:#fff}
html[data-theme="light"] .mob-nav .mob-tab.active .mob-label{background:linear-gradient(90deg,#e0247f,#7c3aed);-webkit-background-clip:text;background-clip:text}

/* самые узкие телефоны */
@media(max-width:360px){
  .mob-nav{padding-left:8px;padding-right:8px}
  .mob-nav::before{left:8px;right:8px}
  .mob-nav .mob-label{font-size:9.5px}
  .mob-nav .mob-tab.active::before{width:42px;margin-left:-21px}
}

/* страница и плавающие кнопки — над доком */
@media(max-width:1100px){
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
  .battle-fixed-actions{bottom:calc(90px + env(safe-area-inset-bottom, 0px))!important}
  .gcombo{bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
}
html.nf4 body{padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
html.nf4 .battle-fixed-actions{bottom:calc(90px + env(safe-area-inset-bottom, 0px))!important}
html.nf4 .gcombo{bottom:calc(92px + env(safe-area-inset-bottom, 0px))}

/* ═══════════════════════════════════════════════════════════════════════
   ГЛАВНАЯ: переключатель «Все / PvP / PvE» — стеклянная капсула
   ═══════════════════════════════════════════════════════════════════════ */
.home-type-filter{padding-top:14px}
.home-type-filter .htf-tab{
  display:inline-flex;align-items:center;gap:6px;
  min-height:0;height:34px;padding:0 15px!important;border-radius:999px;
  font-size:13px!important;font-weight:700;letter-spacing:-.01em;
  color:rgba(255,255,255,.62)!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none;transition:color .2s,background .2s,border-color .2s,box-shadow .25s,transform .12s;
}
.home-type-filter .htf-tab:active{transform:scale(.95)}
.home-type-filter .htf-ico{width:15px;height:15px;flex-shrink:0;opacity:.85}
.home-type-filter .htf-tab.active{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(255,79,166,.95),rgba(124,58,237,.95))!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 6px 18px rgba(236,72,153,.32),inset 0 1px 0 rgba(255,255,255,.25);
}
.home-type-filter .htf-tab.active .htf-ico{opacity:1}
html[data-theme="light"] .home-type-filter .htf-tab{
  color:rgba(30,25,50,.62)!important;background:rgba(255,255,255,.85)!important;
  border-color:rgba(20,20,40,.1)!important;box-shadow:0 2px 6px rgba(40,20,70,.05);
}
html[data-theme="light"] .home-type-filter .htf-tab.active{
  color:#fff!important;background:linear-gradient(135deg,#ff4fa6,#7c3aed)!important;border-color:transparent!important;
  box-shadow:0 6px 16px rgba(236,72,153,.28);
}

/* ═══════════════════════════════════════════════════════════════════════
   ШАПКА: поиск, сообщения, колокольчик и меню — единый набор
   стеклянных кнопок одного размера с мягким неоновым откликом
   ═══════════════════════════════════════════════════════════════════════ */
.hdr-ico{
  position:relative;flex-shrink:0;
  width:36px;height:36px;min-width:36px;min-height:0!important;padding:0!important;margin-left:0!important;
  border-radius:12px!important;
  align-items:center;justify-content:center;
  color:rgba(255,255,255,.82);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .2s,border-color .2s,box-shadow .25s,transform .12s,background .2s;
}
#dmBtn.hdr-ico,#notifBell.hdr-ico{display:inline-flex}
.hdr-ico svg{width:18px;height:18px;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.hdr-ico:hover{
  color:#fff;transform:none;
  border-color:rgba(255,95,178,.45)!important;
  box-shadow:0 0 0 3px rgba(255,79,166,.10),0 4px 14px rgba(236,72,153,.22),inset 0 1px 0 rgba(255,255,255,.08);
}
.hdr-ico:active{transform:scale(.92)}
.mob-search-btn.hdr-ico{aspect-ratio:auto}
.mob-search-btn.hdr-ico.on{color:#fff;border-color:rgba(255,95,178,.5)!important;background:linear-gradient(135deg,rgba(255,79,166,.28),rgba(124,58,237,.24))!important}
/* колокольчик слегка качается, когда есть новые уведомления */
#notifBell.has-new svg{animation:bellRing 2.6s ease-in-out infinite;transform-origin:50% 10%}
@keyframes bellRing{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(14deg)}88%{transform:rotate(-12deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){#notifBell.has-new svg{animation:none}}
/* счётчики — градиентная капсула с обводкой цвета шапки */
.hdr-ico .nav-icon-badge{
  top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;line-height:15px;
  font-size:9.5px;font-weight:800;border-radius:999px;
  background:linear-gradient(135deg,#ff4f6d,#e0247f);
  border:1.5px solid #0e0914;box-shadow:0 2px 8px rgba(224,36,127,.5);
}
/* меню: три линии разной длины, при открытии — крестик */
.hamburger-btn.hdr-ico{flex-direction:column;align-items:center;gap:4px}
.hamburger-btn.hdr-ico span{
  width:16px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .28s cubic-bezier(.3,1.3,.5,1),opacity .2s,width .25s,background .2s;
}
.hamburger-btn.hdr-ico span:nth-child(2){width:11px;margin-left:5px}
.hamburger-btn.hdr-ico span:nth-child(3){width:14px;margin-left:2px}
.hamburger-btn.hdr-ico:hover span:nth-child(2),.hamburger-btn.hdr-ico:hover span:nth-child(3){width:16px;margin-left:0}
.hamburger-btn.hdr-ico.open{color:#ff8cc6;border-color:rgba(255,95,178,.5)!important}
.hamburger-btn.hdr-ico.open span:nth-child(1){transform:translateY(6px) rotate(45deg);width:16px;background:currentColor}
.hamburger-btn.hdr-ico.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger-btn.hdr-ico.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:16px;margin-left:0;background:currentColor}
/* промежутки между кнопками одинаковые */
nav .hdr-ico + .hdr-ico,nav .hdr-ico + .lang-btn,nav .lang-btn + .hdr-ico{margin-left:2px!important}
@media(max-width:768px){
  .hdr-ico{width:34px;height:34px;min-width:34px;border-radius:11px!important}
  .hdr-ico::after{content:"";position:absolute;inset:-5px;border-radius:14px}
}
/* светлая тема */
html[data-theme="light"] .hdr-ico{
  color:#3b3452;background:linear-gradient(180deg,#fff,#f6f4fb)!important;
  border-color:rgba(20,20,40,.09)!important;box-shadow:0 2px 6px rgba(40,20,70,.06);
}
html[data-theme="light"] .hdr-ico:hover{color:#d6247a;border-color:rgba(214,36,122,.35)!important}
html[data-theme="light"] .hdr-ico .nav-icon-badge{border-color:#fff}
html[data-theme="light"] .hamburger-btn.hdr-ico.open{color:#d6247a}

/* ═══════════════════════════════════════════════════════════════════════
   ПЕРЕКЛЮЧАТЕЛЬ СТРАНИЦ НА ГЛАВНОЙ — стеклянная капсула
   Кругляши-номера, стрелки-шевроны, подпись «Стр. N из M» под капсулой.
   Если страница одна — переключатель не показывается.
   ═══════════════════════════════════════════════════════════════════════ */
.pagination{flex-direction:column;gap:8px!important;padding:22px 16px 28px!important}
.pagination:empty{display:none}
.pg-capsule{
  display:inline-flex;align-items:center;gap:4px;padding:4px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
}
.pagination .pg-btn{
  width:36px;height:36px;min-width:36px;min-height:0!important;padding:0!important;
  border-radius:50%!important;border:none!important;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:13.5px!important;font-weight:700;
  color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;
  cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:none;
  transition:color .2s,background .2s,transform .12s,box-shadow .25s;
}
.pagination .pg-btn:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.08)}
.pagination .pg-btn:active:not(:disabled){transform:scale(.9)}
.pagination .pg-btn:disabled{opacity:.28;cursor:default}
.pagination .pg-btn.active{
  color:#fff;background:linear-gradient(135deg,#ff4fa6,#7c3aed);
  box-shadow:0 4px 14px rgba(236,72,153,.4),inset 0 1px 0 rgba(255,255,255,.25);
}
.pagination .pg-arrow{color:rgba(255,255,255,.75)}
.pagination .pg-dots{color:rgba(255,255,255,.4);font-size:13px;padding:0 2px;letter-spacing:.05em}
.pagination .pg-info{margin:0!important;font-size:11.5px!important;font-weight:600;color:var(--t3);letter-spacing:.02em}
html[data-theme="light"] .pg-capsule{
  background:linear-gradient(180deg,#fff,#f7f5fc);border-color:rgba(20,20,40,.08);
  box-shadow:0 6px 18px rgba(40,20,70,.08),inset 0 1px 0 #fff;
}
html[data-theme="light"] .pagination .pg-btn{color:rgba(30,25,50,.6)}
html[data-theme="light"] .pagination .pg-btn:hover:not(:disabled){color:#1a1530;background:rgba(20,20,40,.05)}
html[data-theme="light"] .pagination .pg-btn.active{color:#fff}
html[data-theme="light"] .pagination .pg-arrow{color:rgba(30,25,50,.7)}
html[data-theme="light"] .pagination .pg-dots{color:rgba(30,25,50,.35)}
@media(max-width:360px){
  .pagination .pg-btn{width:32px;height:32px;min-width:32px;font-size:12.5px!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   «НАЧАТЬ БАТЛ» — ВЫБОР РЕЖИМА НА ТЕЛЕФОНЕ
   Две компактные карточки помещаются в экран без прокрутки: яркая иконка,
   заголовок, короткое описание и два признака-«чипа», стрелка справа.
   Вся карточка — кнопка (большая кнопка «Продолжить» на телефоне не нужна).
   ═══════════════════════════════════════════════════════════════════════ */
.pm-mode-short,.pm-mode-chips{display:none}
@media(max-width:768px){
  .pmodal:has(#pm-step-mode.active){padding:18px 16px 18px!important}
  #pm-step-mode .pm-head{margin-bottom:16px;align-items:center}
  #pm-step-mode .pm-title{font-size:24px;line-height:1.15}
  #pm-step-mode .pm-sub{font-size:13px;margin-top:2px}
  #pm-step-mode .pm-modes{gap:12px;margin-bottom:0}

  #pm-step-mode .pm-mode{
    display:grid;grid-template-columns:52px minmax(0,1fr) 18px;
    column-gap:14px;row-gap:6px;align-items:center;
    padding:16px 14px 16px 16px;border-radius:20px;
    -webkit-tap-highlight-color:transparent;
  }
  #pm-step-mode .pm-mode:active{transform:scale(.985)}
  #pm-step-mode .pm-mode-head{display:contents}
  #pm-step-mode .pm-mode-icon{grid-column:1;grid-row:1 / span 3;align-self:center;width:52px;height:52px;border-radius:16px}
  #pm-step-mode .pm-mode-head > div:not(.pm-mode-icon){grid-column:2;grid-row:1;min-width:0}
  #pm-step-mode .pm-mode-title{font-size:16.5px;line-height:1.2}
  #pm-step-mode .pm-mode-desc,
  #pm-step-mode .pm-find-preview,
  #pm-step-mode .pm-vs-preview,
  #pm-step-mode .pm-mode-btn{display:none}
  #pm-step-mode .pm-mode-short{display:block;grid-column:2;grid-row:2;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62)}
  #pm-step-mode .pm-mode-chips{display:flex;flex-wrap:wrap;gap:6px;grid-column:2;grid-row:3;margin-top:2px}
  #pm-step-mode .pm-mode-chips span{
    font-size:10.5px;font-weight:700;letter-spacing:.01em;
    padding:3px 9px;border-radius:999px;white-space:nowrap;
  }
  /* стрелка */
  #pm-step-mode .pm-mode::after{
    content:"";grid-column:3;grid-row:1 / span 3;align-self:center;
    width:18px;height:18px;opacity:.75;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
    transition:transform .25s;
  }
  #pm-step-mode .pm-mode:active::after{transform:translateX(3px)}

  /* синяя карточка — «Найти соперника» */
  #pm-step-mode .pm-mode.mode-blue{
    background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(59,130,246,.04) 60%,rgba(124,58,237,.06));
    border:1.5px solid rgba(96,165,250,.38);
    box-shadow:0 10px 28px rgba(29,78,216,.18),inset 0 1px 0 rgba(255,255,255,.06);
  }
  #pm-step-mode .pm-mode.mode-blue .pm-mode-icon{
    background:linear-gradient(135deg,#60a5fa,#1d4ed8);border:none;
    box-shadow:0 8px 20px rgba(37,99,235,.45),inset 0 1px 0 rgba(255,255,255,.3);
  }
  #pm-step-mode .pm-mode.mode-blue .pm-mode-icon svg{stroke:#fff}
  #pm-step-mode .pm-mode.mode-blue .pm-mode-chips span{color:#93c5fd;background:rgba(59,130,246,.14);border:1px solid rgba(96,165,250,.3)}
  #pm-step-mode .pm-mode.mode-blue::after{background:#93c5fd}

  /* розовая карточка — «Создать VS» */
  #pm-step-mode .pm-mode.mode-pink{
    background:linear-gradient(135deg,rgba(255,79,166,.15),rgba(230,61,111,.04) 60%,rgba(124,58,237,.07));
    border:1.5px solid rgba(255,95,178,.38);
    box-shadow:0 10px 28px rgba(194,24,91,.18),inset 0 1px 0 rgba(255,255,255,.06);
  }
  #pm-step-mode .pm-mode.mode-pink .pm-mode-icon{
    background:linear-gradient(135deg,#ff6fb0,#c2185b);border:none;
    box-shadow:0 8px 20px rgba(219,39,119,.45),inset 0 1px 0 rgba(255,255,255,.3);
  }
  #pm-step-mode .pm-mode.mode-pink .pm-mode-icon svg{stroke:#fff}
  #pm-step-mode .pm-mode.mode-pink .pm-mode-chips span{color:#ff9dcb;background:rgba(255,79,166,.13);border:1px solid rgba(255,95,178,.3)}
  #pm-step-mode .pm-mode.mode-pink::after{background:#ff9dcb}

  /* светлая тема */
  html[data-theme="light"] #pm-step-mode .pm-mode-short{color:#5b6472}
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-blue{
    background:linear-gradient(135deg,#eef4ff,#fff 65%);border-color:rgba(59,130,246,.35);
    box-shadow:0 8px 22px rgba(37,99,235,.12);
  }
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-pink{
    background:linear-gradient(135deg,#fff0f7,#fff 65%);border-color:rgba(236,72,153,.35);
    box-shadow:0 8px 22px rgba(219,39,119,.12);
  }
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-blue .pm-mode-chips span{color:#1d4ed8;background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.25)}
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-pink .pm-mode-chips span{color:#be185d;background:rgba(236,72,153,.10);border-color:rgba(236,72,153,.25)}
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-blue::after{background:#2563eb}
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-pink::after{background:#db2777}
}
/* узкие и низкие телефоны (iPhone SE и подобные) */
@media(max-width:360px){
  .pmodal:has(#pm-step-mode.active){padding:14px 12px 14px!important}
  #pm-step-mode .pm-head{margin-bottom:12px}
  #pm-step-mode .pm-title{font-size:21px}
  #pm-step-mode .pm-sub{font-size:12px}
  #pm-step-mode .pm-modes{gap:10px}
  #pm-step-mode .pm-mode{grid-template-columns:42px minmax(0,1fr) 14px;column-gap:10px;row-gap:5px;padding:12px 10px 12px 12px;border-radius:18px}
  #pm-step-mode .pm-mode-icon{width:42px;height:42px;border-radius:13px}
  #pm-step-mode .pm-mode-icon svg{width:21px;height:21px}
  #pm-step-mode .pm-mode-title{font-size:15px}
  #pm-step-mode .pm-mode-short{font-size:11.5px;line-height:1.4}
  #pm-step-mode .pm-mode-chips span{font-size:10px;padding:2px 8px}
  #pm-step-mode .pm-mode::after{width:14px;height:14px}
}
@media(max-width:768px) and (max-height:620px){
  #pm-step-mode .pm-mode-chips{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   «НАЧАТЬ БАТЛ» — ШАГИ ЗАГРУЗКИ ФОТО НА ТЕЛЕФОНЕ (PvP и PvE)
   Меньше и нежнее: аккуратная карточка для фото, тонкий ползунок времени,
   компактные подсказки и переключатель «Быстрый бой / По ссылке / Комната»
   в виде капсул. Всё помещается на экран.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .pmodal:has(#pm-step-find.active),.pmodal:has(#pm-step-vs.active){padding:14px 16px 16px!important}
  .pmodal:has(#pm-step-find.active) .pm-pull,.pmodal:has(#pm-step-vs.active) .pm-pull{display:none}

  #pm-step-find .pm-back,#pm-step-vs .pm-back{min-height:0;height:26px;margin-bottom:4px;font-size:12.5px}
  #pm-step-find .pm-head,#pm-step-vs .pm-head{margin-bottom:12px;align-items:center}
  #pm-step-find .pm-title,#pm-step-vs .pm-title{font-size:20px;line-height:1.2}
  #pm-step-find .pm-sub,#pm-step-vs .pm-sub{font-size:12.5px;margin-top:2px}

  /* карточки для фото */
  #pm-step-find .pm-cards{margin-bottom:10px!important;max-width:none!important}
  #pm-step-find .pm-slot{align-items:center}
  #pm-step-find .pm-card{aspect-ratio:auto;width:min(58%,190px);height:min(27vh,200px)}
  #pm-step-vs .pm-cards{gap:10px;margin-bottom:12px}
  #pm-step-vs .pm-card{aspect-ratio:auto;height:min(23vh,165px)}
  #pm-step-find .pm-card,#pm-step-vs .pm-card{
    border-radius:18px;border:1.5px dashed rgba(255,95,178,.30);
    background:linear-gradient(160deg,rgba(255,79,166,.07),rgba(124,58,237,.05) 60%,rgba(255,255,255,.02));
  }
  #pm-step-find .pm-card-icon,#pm-step-vs .pm-card-icon{width:42px;height:42px;margin-bottom:8px}
  #pm-step-find .pm-card-icon svg,#pm-step-vs .pm-card-icon svg{width:19px;height:19px}
  #pm-step-find .pm-card-label,#pm-step-vs .pm-card-label{font-size:12.5px}
  #pm-step-find .pm-card-hint{font-size:10px}
  #pm-step-vs .pm-card-badge{top:8px;left:8px;font-size:8.5px;padding:3px 7px;border-radius:7px}

  /* подсказка и предупреждение */
  #pm-step-find .pm-tip{padding:7px 12px;font-size:11.5px;border-radius:12px;margin-bottom:10px}
  #pm-step-find .pm-warning,#pm-step-vs .pm-warning{padding:8px 11px;font-size:11.5px;line-height:1.4;border-radius:12px;margin-bottom:10px;gap:7px}
  #pm-step-find .pm-warning > span:first-child,#pm-step-vs .pm-warning > span:first-child{font-size:13px!important}

  /* время батла */
  #pm-step-find .pm-dur-collapse,#pm-step-vs .pm-dur-collapse{border-radius:14px;margin-bottom:10px}
  #pm-step-find .pm-dur-toggle,#pm-step-vs .pm-dur-toggle{min-height:0;padding:10px 14px 4px}
  #pm-step-find .pm-dur-toggle [data-i="pm_dur_title"],#pm-step-vs .pm-dur-toggle [data-i="pm_dur_title"]{font-size:13.5px}
  #pm-step-find .pm-dur-toggle span[style*="font-size:17px"],#pm-step-vs .pm-dur-toggle span[style*="font-size:17px"]{font-size:14px!important}
  #pm-step-find .pm-dur-toggle-val,#pm-step-vs .pm-dur-toggle-val{font-size:13px}
  #pm-step-find .pm-dur-body,#pm-step-vs .pm-dur-body{padding:0 14px 10px!important}
  #pm-step-find .pm-dur-slider,#pm-step-vs .pm-dur-slider{padding:8px 2px 0}
  .pmodal .pm-dur-range{min-height:0!important;height:6px;font-size:inherit}
  .pmodal .pm-dur-range::-webkit-slider-thumb{width:18px;height:18px;border-width:3px}
  .pmodal .pm-dur-range::-moz-range-thumb{width:18px;height:18px}
  #pm-step-find .pm-dur-ticks,#pm-step-vs .pm-dur-ticks{margin-top:9px}
  #pm-step-find .pm-dur-ticks b,#pm-step-vs .pm-dur-ticks b{font-size:12px}
  #pm-step-find .pm-dur-ticks i,#pm-step-vs .pm-dur-ticks i{font-size:8.5px}

  /* Быстрый бой / По ссылке / Комната — капсулы */
  .pm-fmodes{gap:6px!important;margin-bottom:10px!important;padding:3px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
  .pm-fmodes .pm-cta{
    min-height:0!important;height:34px;padding:0 6px!important;border-radius:999px!important;
    font-size:12px!important;font-weight:700!important;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:transparent!important;border:none!important;color:rgba(255,255,255,.62)!important;box-shadow:none!important;
  }
  .pm-fmodes .pm-cta.cta-blue{
    background:linear-gradient(135deg,rgba(59,130,246,.95),rgba(124,58,237,.9))!important;color:#fff!important;
    box-shadow:0 4px 14px rgba(59,130,246,.35),inset 0 1px 0 rgba(255,255,255,.22)!important;
  }
  .pm-fmodes .pm-cta::after,.pm-fmodes .pm-cta::before{display:none}

  /* главная кнопка */
  #pm-cta-find,#pm-cta{padding:0!important;height:48px;min-height:0;border-radius:15px;font-size:15px}

  /* светлая тема */
  html[data-theme="light"] #pm-step-find .pm-card,html[data-theme="light"] #pm-step-vs .pm-card{
    background:linear-gradient(160deg,#fff4fa,#f7f3ff 60%,#fff);border-color:rgba(219,39,119,.28);
  }
  html[data-theme="light"] .pm-fmodes{background:#f3f1f8;border-color:rgba(20,20,40,.07)}
  html[data-theme="light"] .pm-fmodes .pm-cta{color:#4b4563!important}
  html[data-theme="light"] .pm-fmodes .pm-cta.cta-blue{color:#fff!important}
}
/* невысокие экраны (iPhone SE, 8): подсказку прячем, карточку делаем ниже */
@media(max-width:768px) and (max-height:760px){
  #pm-step-find .pm-tip{display:none}
  #pm-step-find .pm-card{height:min(21vh,150px);width:min(46%,150px)}
  #pm-step-find .pm-head,#pm-step-vs .pm-head{margin-bottom:8px}
  #pm-step-find .pm-sub{font-size:12px}
}
@media(max-width:768px) and (max-height:600px){
  #pm-step-find .pm-warning{display:none}
  #pm-step-find .pm-card{height:120px;width:120px}
  #pm-step-find .pm-card-hint{display:none}
}
/* подписи «Быстрый бой / По ссылке / Комната» целиком, без многоточия */
@media(max-width:768px){
  .pm-fmodes .pm-cta{flex:1 1 auto!important;overflow:visible;text-overflow:clip;padding:0 8px!important}
}
@media(max-width:380px){
  .pm-fmodes{gap:2px!important}
  .pm-fmodes .pm-cta{font-size:11px!important;padding:0 5px!important;letter-spacing:-.02em}
}
/* длинные переводы переносятся на 2 строки внутри капсулы, а не вылезают */
@media(max-width:768px){
  .pm-fmodes{border-radius:20px}
  .pm-fmodes .pm-cta{flex:1 1 0!important;min-width:0;white-space:normal;height:auto;min-height:34px!important;
    padding:5px 6px!important;line-height:1.15;border-radius:17px!important;text-align:center;word-break:normal;overflow-wrap:anywhere}
}
/* Ползунки (масштаб фото и т.п.) на телефоне были толстыми плитами из‑за
   правила «поля ввода не ниже 44px» — возвращаем тонкую дорожку */
@media(max-width:768px){
  input[type=range]{min-height:0!important}
  .cropper-range{height:6px}
}

/* ═══════════════════════════════════════════════════════════════════════
   ШАГ PvP (И PvE) — ЧУТЬ КРУПНЕЕ И КРАСИВЕЕ НА ОБЫЧНЫХ ТЕЛЕФОНАХ
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* крестик «убрать фото» — ровный круг */
  .pm-card-remove{min-height:0!important;width:30px!important;height:30px!important;aspect-ratio:1/1;top:8px;right:8px;
    background:rgba(10,8,18,.62)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 2px 8px rgba(0,0,0,.3)}
  .pm-card-remove svg{width:11px;height:11px}
  .pm-card.has-photo{border-style:solid!important;border-color:rgba(255,95,178,.45)!important;box-shadow:0 10px 26px rgba(236,72,153,.22)}

  /* «Быстрый бой / По ссылке / Комната» — три плитки: значок сверху, подпись снизу */
  .pm-fmodes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;padding:0!important;
    background:none!important;border:none!important;border-radius:0!important;margin-bottom:12px!important}
  .pm-fmodes .pm-cta{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:62px;min-height:0!important;padding:6px 4px!important;border-radius:16px!important;
    background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.10)!important;
    color:rgba(255,255,255,.72)!important;box-shadow:none!important;white-space:normal;
    transition:background .2s,border-color .2s,box-shadow .25s,transform .12s;
  }
  .pm-fmodes .pm-cta:active{transform:scale(.96)}
  .pm-fmodes .fm-ico{font-size:19px;line-height:1}
  .pm-fmodes .fm-txt{font-size:12px;font-weight:700;line-height:1.15;text-align:center}
  .pm-fmodes .pm-cta.cta-blue{
    background:linear-gradient(160deg,rgba(59,130,246,.30),rgba(124,58,237,.26))!important;
    border:1.5px solid rgba(129,140,248,.75)!important;color:#fff!important;
    box-shadow:0 8px 20px rgba(79,70,229,.28),inset 0 1px 0 rgba(255,255,255,.12)!important;
  }
  html[data-theme="light"] .pm-fmodes .pm-cta{background:#fff!important;border-color:rgba(20,20,40,.10)!important;color:#4b4563!important;box-shadow:0 2px 8px rgba(40,20,70,.05)!important}
  html[data-theme="light"] .pm-fmodes .pm-cta.cta-blue{
    background:linear-gradient(160deg,#eef2ff,#f5f0ff)!important;border-color:#6366f1!important;color:#3730a3!important;
    box-shadow:0 8px 18px rgba(99,102,241,.2)!important;
  }
  #pm-cta-find,#pm-cta{height:52px;border-radius:16px;font-size:15.5px}
}
/* обычные и высокие телефоны: места хватает — карточка фото крупнее */
@media(max-width:768px) and (min-height:761px){
  #pm-step-find .pm-card{width:min(64%,230px);height:min(28vh,245px)}
  #pm-step-find .pm-title,#pm-step-vs .pm-title{font-size:22px}
  #pm-step-find .pm-head,#pm-step-vs .pm-head{margin-bottom:14px}
  #pm-step-vs .pm-card{height:min(26vh,200px)}
  #pm-step-find .pm-card-icon,#pm-step-vs .pm-card-icon{width:50px;height:50px}
  #pm-step-find .pm-card-icon svg,#pm-step-vs .pm-card-icon svg{width:22px;height:22px}
  #pm-step-find .pm-card-label,#pm-step-vs .pm-card-label{font-size:13.5px}
}
@media(max-width:768px) and (min-height:761px){
  .pm-fmodes .pm-cta{height:58px}
}
/* совсем низкие экраны (iPhone SE 1-го поколения и т.п.) — плитки без значка, всё помещается без прокрутки */
@media(max-width:768px) and (max-height:600px){
  .pm-fmodes .pm-cta{height:44px;padding:4px!important}
  .pm-fmodes .fm-ico{display:none}
  .pm-fmodes .fm-txt{font-size:11.5px}
  #pm-cta-find,#pm-cta{height:46px}
}
/* очень длинные переводы на низком экране — компактнее подписи, чтобы всё влезло */
@media(max-width:768px){
  #pm-step-find.pm-tight .pm-head,#pm-step-vs.pm-tight .pm-head{margin-bottom:8px!important}
  #pm-step-find.pm-tight .pm-sub,#pm-step-vs.pm-tight .pm-sub{font-size:12px!important;line-height:1.3!important}
  #pm-step-find.pm-tight .pm-title,#pm-step-vs.pm-tight .pm-title{font-size:19px!important}
  #pm-step-find.pm-tight .pm-tip,#pm-step-vs.pm-tight .pm-tip{display:none!important}
  #pm-step-find.pm-tight .pm-warning,#pm-step-vs.pm-tight .pm-warning{font-size:10.5px!important;line-height:1.3!important;padding:6px 10px!important;margin-bottom:8px!important}
  #pm-step-find.pm-tight .pm-fmodes .pm-cta{height:42px!important}
  #pm-step-find.pm-tight .pm-fmodes .fm-ico{display:none}
  #pm-step-find.pm-tight .pm-fmodes .fm-txt{font-size:11.5px}
  #pm-step-find.pm-tight .pm-fmodes{margin-bottom:10px!important}
}
/* компьютер: пробел между значком и подписью режима */
.pm-fmodes .fm-ico{margin-right:6px}
@media(max-width:768px){ .pm-fmodes .fm-ico{margin-right:0} }
/* ═══════════════════════════════════════════════════════════════════════
   PvP / PvE: фото КРУПНОЕ на любом телефоне. Карточка стартует большой,
   а скрипт (_pmFitNow) подгоняет её ровно под свободное место экрана.
   Крестик закрытия — вверху справа, на одной линии с «Назад».
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  #pm-step-find .pm-card{width:min(72%,260px)!important;height:min(48vh,350px)!important}
  #pm-step-vs .pm-card{height:min(38vh,280px)!important}
  #pm-step-find .pm-card-hint{display:block}

  #pm-step-find,#pm-step-vs{position:relative}
  #pm-step-find .pm-close,#pm-step-vs .pm-close{position:absolute!important;top:-5px;right:0;z-index:3}
  #pm-step-find .pm-head,#pm-step-vs .pm-head{padding-right:0}
  #pm-step-find .pm-title-wrap,#pm-step-vs .pm-title-wrap{min-width:0;flex:1 1 auto}
}
@media(max-width:768px) and (max-height:600px){
  #pm-step-find .pm-card-hint{display:none}
}
/* значок «загрузить» строго по центру карточки */
#pm-empty-find,#pm-empty-1,#pm-empty-2{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
@media(max-width:768px){
  /* окно создания батла занимает почти весь экран — больше места для фото */
  .pmodal-bg:has(#pm-step-find.active),.pmodal-bg:has(#pm-step-vs.active){padding:10px!important}
  #pmodal-inner:has(#pm-step-find.active),#pmodal-inner:has(#pm-step-vs.active){max-height:calc(100vh - 20px)!important;max-height:calc(100dvh - 20px)!important}
}
/* невысокие экраны: остальные блоки чуть плотнее, фото — крупнее */
@media(max-width:768px) and (max-height:760px){
  #pm-step-find .pm-dur-toggle,#pm-step-vs .pm-dur-toggle{padding:10px 14px!important}
  #pm-step-find .pm-dur-body,#pm-step-vs .pm-dur-body{padding:0 14px 10px!important}
  #pm-step-find .pm-dur-collapse,#pm-step-vs .pm-dur-collapse{margin-bottom:8px!important}
  #pm-step-find .pm-warning,#pm-step-vs .pm-warning{margin-bottom:8px!important;padding:7px 11px!important}
  .pm-fmodes .pm-cta{height:52px}
  .pm-fmodes{margin-bottom:10px!important}
  #pm-cta-find,#pm-cta{height:48px}
}

/* ═══════════════════════════════════════════════════════════════════════
   PK-ШКАЛА ГОЛОСОВ — как в TikTok Live: розовая и голубая стороны,
   молния на стыке, бегущие штрихи у лидера, числа голосов на концах.
   ═══════════════════════════════════════════════════════════════════════ */
.pk{--pk-pink1:#ff7ab8;--pk-pink2:#ff2e84;--pk-pink3:#d9105e;--pk-blue1:#7ff0ff;--pk-blue2:#27c4f5;--pk-blue3:#0b92d8;
  --a:50%;position:relative;user-select:none;-webkit-user-select:none}
.pk-bar{position:relative;height:24px;border-radius:999px}
.pk-track{position:absolute;inset:0;border-radius:inherit;overflow:hidden;display:flex;background:#0d0b18;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 6px 18px rgba(0,0,0,.35)}
.pk-fill{position:relative;height:100%;overflow:hidden}
.pk-fill.l{width:var(--a);flex:0 0 auto;background:linear-gradient(180deg,var(--pk-pink1) 0%,var(--pk-pink2) 52%,var(--pk-pink3) 100%);
  transition:width .75s cubic-bezier(.2,.9,.25,1)}
.pk-fill.r{flex:1 1 auto;background:linear-gradient(180deg,var(--pk-blue1) 0%,var(--pk-blue2) 52%,var(--pk-blue3) 100%)}
/* глянец сверху */
.pk-fill::after{content:"";position:absolute;left:0;right:0;top:0;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.06));pointer-events:none}
/* бегущие диагональные штрихи у лидера */
.pk-fill::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background-image:linear-gradient(135deg,rgba(255,255,255,.26) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.26) 75%,transparent 75%,transparent);
  background-size:20px 20px;animation:pkStripe .9s linear infinite}
.pk-fill.r::before{animation-direction:reverse}
.pk.lead-l .pk-fill.l::before,.pk.lead-r .pk-fill.r::before{opacity:1}
@keyframes pkStripe{from{background-position:0 0}to{background-position:20px 0}}
/* свечение шва */
.pk-seam{position:absolute;top:-20%;bottom:-20%;left:var(--a);width:18px;margin-left:-9px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,236,150,.55) 45%,rgba(255,200,60,0));
  filter:blur(1px);transition:left .75s cubic-bezier(.2,.9,.25,1)}
/* числа */
.pk-num{position:absolute;top:50%;transform:translateY(-50%);z-index:2;font-style:italic;font-weight:900;font-size:14px;line-height:1;
  color:#fff;letter-spacing:.01em;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 8px rgba(0,0,0,.25);pointer-events:none}
.pk-num.l{left:12px}
.pk-num.r{right:12px}
/* молния */
.pk-bolt{position:absolute;z-index:3;left:var(--a);top:50%;width:30px;height:44px;margin:-22px 0 0 -15px;pointer-events:none;
  transition:left .75s cubic-bezier(.2,.9,.25,1)}
.pk-bolt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 5px rgba(255,190,40,.9)) drop-shadow(0 0 12px rgba(255,120,0,.55));
  animation:pkBolt 1.8s ease-in-out infinite;transform-origin:50% 55%}
@keyframes pkBolt{0%,100%{transform:scale(1) rotate(0)}8%{transform:scale(1.12) rotate(-4deg)}16%{transform:scale(.97) rotate(2deg)}24%{transform:scale(1.04)}}
.pk-spark{position:absolute;width:12px;height:17px;top:14px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
  animation:pkSpark 1.1s steps(1,end) infinite}
.pk-spark.l{left:-9px;stroke:#ff4fa0;filter:drop-shadow(0 0 4px rgba(255,60,150,.9))}
.pk-spark.r{right:-9px;stroke:#39d4ff;filter:drop-shadow(0 0 4px rgba(40,200,255,.9));animation-delay:.55s}
@keyframes pkSpark{0%{opacity:1;transform:translateY(0)}30%{opacity:.25;transform:translateY(-3px)}60%{opacity:.9;transform:translateY(2px) scaleX(-1)}85%{opacity:0}}
/* вспышка при новом голосе */
.pk.pk-zap .pk-bolt-svg{animation:pkZap .85s cubic-bezier(.2,1.4,.4,1)}
.pk.pk-zap .pk-seam{animation:pkSeam .85s ease-out}
@keyframes pkZap{0%{transform:scale(1)}25%{transform:scale(1.45) rotate(-8deg);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px rgba(255,170,0,.95))}100%{transform:scale(1)}}
@keyframes pkSeam{0%{opacity:1;transform:scaleX(1)}30%{transform:scaleX(2.4)}100%{transform:scaleX(1)}}

/* ── большая шкала на странице батла ── */
.vote-scale.pk-lg{max-width:680px;margin:14px auto 0;padding:10px 12px 12px!important;border-radius:20px;
  background:linear-gradient(180deg,rgba(28,18,44,.72),rgba(12,9,24,.82))!important;border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)!important}
.pk-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-bottom:9px}
.pk-user{display:flex;align-items:center;gap:7px;min-width:0}
.pk-user.r{justify-content:flex-end}
.pk-name{font-size:13.5px;font-weight:700;font-style:italic;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  text-shadow:0 1px 3px rgba(0,0,0,.4)}
.pk-ava{position:relative;flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center}
.pk-ava img{width:28px;height:28px;border-radius:50%;object-fit:cover;position:relative;z-index:1;background:#1c1830;
  box-shadow:0 0 0 2px var(--pk-ring,#fff),0 3px 8px rgba(0,0,0,.35)}
.pk-user.l .pk-ava{--pk-ring:var(--pk-pink2)}
.pk-user.r .pk-ava{--pk-ring:var(--pk-blue2)}
.pk-laurel{position:absolute;inset:-2px -2px -4px;color:#c9d2e3;z-index:2;pointer-events:none}
.pk-laurel svg{width:100%;height:100%;display:block;fill:currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.pk.lead-l .pk-user.l .pk-laurel,.pk.lead-r .pk-user.r .pk-laurel,.pk:not(.lead-l):not(.lead-r) .pk-laurel{color:#f5c542}
.pk.lead-l .pk-user.l .pk-laurel svg,.pk.lead-r .pk-user.r .pk-laurel svg{filter:drop-shadow(0 0 4px rgba(255,200,60,.6)) drop-shadow(0 1px 1px rgba(0,0,0,.3))}
/* корона победителю завершённого батла */
.pk.pk-done.lead-l .pk-user.l .pk-ava::before,.pk.pk-done.lead-r .pk-user.r .pk-ava::before{content:"👑";position:absolute;top:-13px;left:50%;
  transform:translateX(-50%) rotate(-8deg);font-size:15px;z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.pk-clock{font-size:22px;font-weight:900;color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.45),0 0 16px rgba(255,255,255,.12)}
.pk-clock.fin{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#ffd76a;padding:4px 10px;border-radius:999px;
  background:rgba(255,200,60,.12);border:1px solid rgba(255,200,60,.35)}
.pk-row{display:flex;align-items:center;gap:6px}
.pk-lg .pk-bar{flex:1 1 auto;height:26px}
.pk-lg .pk-num{font-size:15px}
.pk-gift{flex:0 0 auto;width:36px;height:36px;min-height:0!important;padding:0;border:none;background:none;cursor:pointer;display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent}
.pk-gift img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));animation:pkGift 2.6s ease-in-out infinite}
.pk-gift.r img{animation-delay:1.3s}
.pk-gift:active img{transform:scale(.88)}
@keyframes pkGift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-6deg)}}
.pk.pk-nogift .pk-gift{display:none}
.pk-done .pk-fill::before{animation:none}

/* ── мини-шкала в карточке батла на главной ── */
.pk-sm{padding:12px 12px 4px}
.pk-sm .pk-bar{height:19px}
.pk-sm .pk-num{font-size:11.5px}
.pk-sm .pk-num.l{left:9px}.pk-sm .pk-num.r{right:9px}
.pk-sm .pk-bolt{width:21px;height:31px;margin:-15.5px 0 0 -10.5px}
.pk-sm .pk-spark{width:9px;height:13px;top:9px}
.pk-sm .pk-spark.l{left:-6px}.pk-sm .pk-spark.r{right:-6px}
.pk-sm .pk-fill::before{background-size:16px 16px;animation-name:pkStripeSm}
@keyframes pkStripeSm{from{background-position:0 0}to{background-position:16px 0}}
.pk-sm .pk-track{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 4px 10px rgba(0,0,0,.25)}

/* светлая тема */
html[data-theme="light"] .vote-scale.pk-lg{background:linear-gradient(180deg,#ffffff,#f7f4fd)!important;border-color:rgba(40,20,80,.08)!important;
  box-shadow:0 10px 26px rgba(60,30,110,.10)!important}
html[data-theme="light"] .pk-name{color:#221b33;text-shadow:none}
html[data-theme="light"] .pk-clock{color:#1d1530;text-shadow:none}
html[data-theme="light"] .pk-track{background:#ece8f6;box-shadow:inset 0 0 0 1.5px rgba(40,20,80,.08),0 4px 12px rgba(60,30,110,.12)}
html[data-theme="light"] .pk-laurel{color:#aeb7c9}
html[data-theme="light"] .pk.lead-l .pk-user.l .pk-laurel,html[data-theme="light"] .pk.lead-r .pk-user.r .pk-laurel,
html[data-theme="light"] .pk:not(.lead-l):not(.lead-r) .pk-laurel{color:#e3a91c}
html[data-theme="light"] .pk-clock.fin{color:#a86b00;background:#fff4d6;border-color:#f3d48a}

/* телефон */
@media(max-width:768px){
  .vote-scale.pk-lg{padding:9px 10px 11px!important;border-radius:18px}
  .pk-name{font-size:12.5px}
  .pk-clock{font-size:19px}
  .pk-lg .pk-bar{height:24px}
  .pk-lg .pk-num{font-size:14px}
  .pk-gift{width:32px;height:32px}
  .pk-gift img{width:30px;height:30px}
}
@media(max-width:360px){
  .pk-clock{font-size:16px}
  .pk-ava{width:34px;height:34px}
  .pk-ava img{width:25px;height:25px}
  .pk-gift{width:28px;height:28px}.pk-gift img{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){
  .pk-fill::before,.pk-bolt-svg,.pk-spark,.pk-gift img{animation:none!important}
  .pk-fill.l,.pk-bolt,.pk-seam{transition:none}
}

/* «VS» между фото на странице батла убран — остаётся только PK-шкала */
.duel-vs-text{display:none!important}
/* венок чуть шире аватара, чтобы листья шли вокруг, а не поверх рамки */
.pk-laurel{inset:-6px}
@media(max-width:768px){ .pk-clock{font-size:17px} }
@media(max-width:360px){ .pk-clock{font-size:15px} }
/* компьютер: шкала крупнее */
@media(min-width:769px){
  .vote-scale.pk-lg{padding:12px 16px 14px!important;border-radius:22px}
  .pk-lg .pk-top{margin-bottom:10px}
  .pk-lg .pk-ava{width:48px;height:48px}
  .pk-lg .pk-ava img{width:36px;height:36px}
  .pk-lg .pk-name{font-size:16px}
  .pk-lg .pk-clock{font-size:28px}
  .pk-lg .pk-row{gap:10px}
  .pk-lg .pk-bar{height:32px}
  .pk-lg .pk-num{font-size:18px}
  .pk-lg .pk-num.l{left:16px}.pk-lg .pk-num.r{right:16px}
  .pk-lg .pk-bolt{width:38px;height:56px;margin:-28px 0 0 -19px}
  .pk-lg .pk-spark{width:14px;height:20px;top:18px}
  .pk-lg .pk-spark.l{left:-12px}.pk-lg .pk-spark.r{right:-12px}
  .pk-lg .pk-fill::before{background-size:24px 24px;animation-name:pkStripeLg}
  .pk-lg .pk-gift{width:44px;height:44px}
  .pk-lg .pk-gift img{width:42px;height:42px}
  .pk-sm{padding:14px 14px 4px}
  .pk-sm .pk-bar{height:22px}
  .pk-sm .pk-num{font-size:13px}
  .pk-sm .pk-bolt{width:24px;height:36px;margin:-18px 0 0 -12px}
}
@keyframes pkStripeLg{from{background-position:0 0}to{background-position:24px 0}}
@media(max-width:360px){
  .pk-top{gap:5px}
  .pk-clock{font-size:14px}
  .pk-name{font-size:11.5px}
  .pk-user{gap:4px}
}

/* ═══════════════════════════════════════════════════════════════════════
   «+ В БАТЛ» НА УЗКИХ ТЕЛЕФОНАХ (Android 360–380px)
   Раньше на экранах до 380px кнопка просто пряталась — на большинстве
   Android её не было вовсе. Теперь она есть всегда: шапка сама решает,
   сколько места есть, и сначала делает кнопку компактнее (nf6), а на
   совсем узких — круглой кнопкой с молнией (nf7).
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:380px){
  html .nav-add{display:inline-flex}
}
html.nf6 .nav-add{display:inline-flex;padding:0 10px 0 8px;font-size:11.5px;gap:4px;letter-spacing:-.02em}
html.nf6 .nav-add::before{width:11px;height:11px}
html.nf7 .nav-add{width:34px;min-width:34px;height:34px;padding:0;gap:0;justify-content:center;font-size:0;border-radius:50%}
html.nf7 .nav-add::before{width:16px;height:16px}

/* ═══════════════════════════════════════════════════════════════════════
   БОКОВОЕ МЕНЮ — ПРЕМИУМ
   Тёмное стекло с цветным свечением, карточка пользователя, баланс как
   банковская карта с переливом, пункты — сгруппированный список с
   цветными иконками, мягкое появление по очереди.
   ═══════════════════════════════════════════════════════════════════════ */
#sideMenu{
  width:min(340px,88vw);max-width:none;
  background:
    radial-gradient(120% 55% at 100% 0%,rgba(236,72,153,.20),transparent 62%),
    radial-gradient(100% 50% at 0% 100%,rgba(124,58,237,.18),transparent 62%),
    linear-gradient(180deg,#13101f 0%,#0c0a15 100%);
  border-left:1px solid rgba(255,255,255,.08);
  border-radius:26px 0 0 26px;
  box-shadow:-24px 0 60px rgba(0,0,0,.55);
  scrollbar-width:none;
}
#sideMenu::-webkit-scrollbar{display:none}
.side-menu-overlay.open{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* шапка */
#sideMenu .sm-header{padding:calc(18px + env(safe-area-inset-top,0px)) 16px 8px;border-bottom:none;gap:12px;align-items:center}
#sideMenu .sm-header.has-user .sm-header-logo{display:none}
#sideMenu .sm-close{width:38px;height:38px;flex:0 0 38px;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.10)!important;color:rgba(255,255,255,.8)}
#sideMenu .sm-close svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.sm-user{display:flex;align-items:center;gap:12px;min-width:0;flex:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sm-u-ring{position:relative;flex:0 0 52px;width:52px;height:52px;border-radius:50%;padding:2.5px;
  background:conic-gradient(from 0deg,#ff4fa6,#a855f7,#3b82f6,#22d3ee,#ff4fa6);animation:smRing 6s linear infinite;
  box-shadow:0 6px 18px rgba(236,72,153,.35)}
@keyframes smRing{to{filter:hue-rotate(360deg)}}
.sm-u-ring img,.sm-u-ini{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2.5px solid #13101f;background:#1d1830}
.sm-u-ini{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#ec4899,#7c3aed)}
.sm-u-meta{display:flex;flex-direction:column;min-width:0}
.sm-u-name{font-size:17px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.sm-u-handle{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

/* баланс — «банковская карта» */
#sideMenu .sm-balance{
  position:relative;overflow:hidden;margin:10px 14px 0;padding:16px 16px 14px;border-radius:22px;border:none;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.22),transparent 55%),
    linear-gradient(135deg,#ff4fa6 0%,#c026d3 42%,#7c3aed 72%,#3b82f6 100%);
  box-shadow:0 14px 34px rgba(192,38,211,.35),inset 0 1px 0 rgba(255,255,255,.35);
  color:#fff;isolation:isolate;
}
#sideMenu .sm-balance::before{ /* перелив */
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);
  animation:smShine 5s ease-in-out infinite;
}
#sideMenu .sm-balance::after{ /* водяной знак VS */
  content:"VS";position:absolute;right:-6px;bottom:-26px;z-index:-1;font-size:110px;font-weight:900;font-style:italic;
  letter-spacing:-.06em;color:rgba(255,255,255,.10);line-height:1;pointer-events:none;
}
@keyframes smShine{0%,55%{left:-70%}100%{left:140%}}
#sideMenu .sm-balance-lbl{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:2px}
#sideMenu .sm-balance-total{display:flex;align-items:center;gap:8px;font-size:32px;font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-bottom:12px;text-shadow:0 2px 10px rgba(0,0,0,.18)}
#sideMenu .sm-balance-total .vcoin{height:24px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
#sideMenu .sm-wallets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
#sideMenu .sm-wallet{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot lbl q" "val val coin";
  align-items:center;gap:3px 6px;padding:8px 10px;border-radius:14px;min-height:0;
  background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.22)!important;backdrop-filter:blur(4px)}
#sideMenu .sm-w-dot{grid-area:dot}
#sideMenu .sm-w-q{grid-area:q}
#sideMenu .sm-w-lbl{grid-area:lbl;font-size:11px;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sideMenu .sm-w-val{grid-area:val;font-size:16px;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis}
#sideMenu .sm-wallet .vcoin{grid-area:coin;height:13px}
#sideMenu .sm-w-q{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
#sideMenu .sm-w-main .sm-w-dot{background:#4ade80}
#sideMenu .sm-w-bonus .sm-w-dot{background:#fde047;box-shadow:0 0 6px rgba(253,224,71,.8)}
#sideMenu .sm-balance-btn{
  height:44px;padding:0;border-radius:14px;background:#fff;color:#7c1d6f;font-size:14.5px;font-weight:800;
  box-shadow:0 6px 16px rgba(20,0,40,.25);transition:transform .12s,box-shadow .2s;
}
#sideMenu .sm-balance-btn:active{transform:scale(.97)}

/* пункты — сгруппированный список */
#sideMenu .sm-nav{margin:14px 14px 0;padding:6px;border-radius:20px;flex:0 0 auto;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
#sideMenu .sm-item{position:relative;min-height:54px;padding:8px 10px;margin:0;border-radius:14px;gap:12px;
  font-size:15px;font-weight:700;color:rgba(255,255,255,.9)}
#sideMenu .sm-item:hover,#sideMenu .sm-item:active{background:rgba(255,255,255,.06)}
#sideMenu .sm-item-icon{width:36px;height:36px;border-radius:11px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.25)}
#sideMenu .sm-item-icon svg{stroke:currentColor}
.sm-ic-lang{background:linear-gradient(135deg,#38bdf8,#2563eb)!important}
.sm-ic-theme{background:linear-gradient(135deg,#fbbf24,#f97316)!important}
.sm-ic-set{background:linear-gradient(135deg,#94a3b8,#475569)!important}
.sm-ic-ref{background:linear-gradient(135deg,#f472b6,#8b5cf6)!important}
.sm-ic-sup{background:linear-gradient(135deg,#818cf8,#4f46e5)!important}
.sm-ic-out{background:rgba(248,113,113,.14)!important;color:#f87171!important;box-shadow:none!important}
#sideMenu .sm-item-arrow{font-size:18px;line-height:1;color:rgba(255,255,255,.3);margin-left:auto}
#sideMenu .sm-lang-cur{margin-left:auto;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:800;
  background:rgba(56,189,248,.14);color:#7dd3fc;border:1px solid rgba(56,189,248,.28)}
#sideMenu .sm-lang-cur + .sm-item-arrow{margin-left:6px}
.sm-ref-badge{margin-left:auto;display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:999px;flex-shrink:0;
  font-size:11.5px;font-weight:900;color:#fde68a;background:rgba(250,204,21,.13);border:1px solid rgba(250,204,21,.3)}
.sm-ref-badge .vcoin{height:11px}
#sideMenu .sm-ref-badge + .sm-item-arrow{margin-left:6px}
#sideMenu .theme-switch{margin-left:auto}
/* разделители между строками */
#sideMenu .sm-nav .sm-item::after{content:"";position:absolute;bottom:0;left:58px;right:10px;height:1px;background:rgba(255,255,255,.06)}
#sideMenu .sm-nav .sm-item:has(+ .sm-divider)::after,#sideMenu .sm-nav .sm-logout::after{display:none}
#sideMenu .sm-divider{display:none}
/* выход — отдельной строкой */
#sideMenu .sm-logout{margin-top:10px!important;color:#f87171!important;background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.18)}

#sideMenu .sm-footer{margin-top:auto;border-top:none;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));color:rgba(255,255,255,.35)}

/* появление по очереди */
#sideMenu .sm-header,#sideMenu .sm-balance,#sideMenu .sm-nav > *,#sideMenu .sm-footer{
  opacity:0;transform:translateX(26px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.25,1)}
#sideMenu.open .sm-header,#sideMenu.open .sm-balance,#sideMenu.open .sm-nav > *,#sideMenu.open .sm-footer{opacity:1;transform:none}
#sideMenu.open .sm-header{transition-delay:.05s}
#sideMenu.open .sm-balance{transition-delay:.10s}
#sideMenu.open .sm-nav > *:nth-child(1){transition-delay:.15s}
#sideMenu.open .sm-nav > *:nth-child(2){transition-delay:.19s}
#sideMenu.open .sm-nav > *:nth-child(3){transition-delay:.23s}
#sideMenu.open .sm-nav > *:nth-child(4){transition-delay:.27s}
#sideMenu.open .sm-nav > *:nth-child(5){transition-delay:.31s}
#sideMenu.open .sm-nav > *:nth-child(6){transition-delay:.35s}
#sideMenu.open .sm-nav > *:nth-child(n+7){transition-delay:.39s}
#sideMenu.open .sm-footer{transition-delay:.42s}
@media(prefers-reduced-motion:reduce){
  #sideMenu .sm-header,#sideMenu .sm-balance,#sideMenu .sm-nav > *,#sideMenu .sm-footer{transition:none;opacity:1;transform:none}
  #sideMenu .sm-balance::before,.sm-u-ring{animation:none}
}

/* светлая тема */
html[data-theme="light"] #sideMenu{
  background:
    radial-gradient(120% 55% at 100% 0%,rgba(236,72,153,.12),transparent 62%),
    radial-gradient(100% 50% at 0% 100%,rgba(124,58,237,.10),transparent 62%),
    linear-gradient(180deg,#ffffff 0%,#f7f4fc 100%);
  border-left:1px solid rgba(40,20,80,.08);box-shadow:-24px 0 60px rgba(40,20,80,.18)}
html[data-theme="light"] #sideMenu .sm-close{background:rgba(40,20,80,.05)!important;border-color:rgba(40,20,80,.08)!important;color:#4b4563}
html[data-theme="light"] .sm-u-ring img,html[data-theme="light"] .sm-u-ini{border-color:#fff}
html[data-theme="light"] .sm-u-name{color:#1d1530}
html[data-theme="light"] .sm-u-handle{color:#8a84a0}
html[data-theme="light"] #sideMenu .sm-nav{background:#fff;border-color:rgba(40,20,80,.07);box-shadow:0 6px 20px rgba(40,20,80,.06)}
html[data-theme="light"] #sideMenu .sm-item{color:#231d35}
html[data-theme="light"] #sideMenu .sm-item:hover,html[data-theme="light"] #sideMenu .sm-item:active{background:rgba(40,20,80,.04)}
html[data-theme="light"] #sideMenu .sm-nav .sm-item::after{background:rgba(40,20,80,.07)}
html[data-theme="light"] #sideMenu .sm-item-arrow{color:rgba(40,20,80,.3)}
html[data-theme="light"] #sideMenu .sm-lang-cur{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}
html[data-theme="light"] .sm-ref-badge{background:#fef3c7;color:#92400e;border-color:#fde68a}
html[data-theme="light"] #sideMenu .sm-logout{background:#fff5f5;border-color:#fecaca;color:#dc2626!important}
html[data-theme="light"] #sideMenu .sm-footer{color:#9a94ad}

/* ── боковое меню: доработки ── */
/* Кольцо аватарки вращается само по себе, фото остаётся в своих цветах
   (раньше перелив окрашивал и саму фотографию — она выглядела тусклой) */
.sm-u-ring{animation:none!important;background:none!important;overflow:hidden;isolation:isolate}
.sm-u-ring::before{content:"";position:absolute;inset:-40%;z-index:-1;
  background:conic-gradient(from 0deg,#ff4fa6,#a855f7,#3b82f6,#22d3ee,#facc15,#ff4fa6);animation:smRingSpin 4s linear infinite}
@keyframes smRingSpin{to{transform:rotate(360deg)}}
.sm-u-ring img,.sm-u-ini{position:relative;z-index:1;filter:none!important}
@media(prefers-reduced-motion:reduce){.sm-u-ring::before{animation:none}}

/* Пригласи друзей — и на компьютере */
#sideMenu .sm-item.sm-ref-mobile{display:flex}

/* Заморожено с подарков */
#sideMenu .sm-frozen{display:flex;align-items:center;gap:9px;margin:-4px 0 12px;padding:9px 11px;border-radius:14px;
  background:rgba(15,10,40,.22);border:1px dashed rgba(255,255,255,.35)}
#sideMenu .sm-frozen[style*="none"]{display:none}
#sideMenu .sm-fz-ico{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#7dd3fc,#60a5fa);color:#0b1b3a;box-shadow:0 0 12px rgba(125,211,252,.55)}
#sideMenu .sm-fz-txt{display:flex;flex-direction:column;min-width:0;flex:1}
#sideMenu .sm-fz-lbl{font-size:12px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sideMenu .sm-fz-hint{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.72);line-height:1.25}
#sideMenu .sm-fz-val{font-size:16px;font-weight:900;color:#e0f2fe;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(125,211,252,.6)}
#sideMenu .sm-frozen .vcoin{height:13px;flex-shrink:0}
#sideMenu .sm-frozen.is-zero .sm-fz-val{color:rgba(255,255,255,.85);text-shadow:none}
#sideMenu .sm-fz-lbl{white-space:normal;line-height:1.2}

/* Профиль: «Пригласи друзей» живёт в боковом меню на всех устройствах */
#page-profile #ref-block{display:none!important}

/* Страница баланса: заморожено с подарков */
.wallet-frozen{display:flex;align-items:center;gap:11px;max-width:440px;margin:4px auto 8px;padding:11px 14px;border-radius:16px;
  text-align:left;border:1px dashed rgba(125,211,252,.45);background:linear-gradient(160deg,rgba(56,189,248,.12),rgba(99,102,241,.06))}
.wf-ico{flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#0b1b3a;
  background:linear-gradient(135deg,#7dd3fc,#60a5fa);box-shadow:0 0 14px rgba(125,211,252,.5)}
.wf-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.wf-lbl{font-size:13px;font-weight:800;color:var(--t1);line-height:1.2}
.wf-hint{font-size:11px;font-weight:600;color:var(--t3);line-height:1.3}
.wf-val{display:flex;align-items:center;gap:5px;font-size:20px;font-weight:900;color:#7dd3fc;font-variant-numeric:tabular-nums;flex-shrink:0}
.wf-val .vcoin{height:14px}
.wallet-frozen.is-zero .wf-val{color:var(--t2)}
html[data-theme="light"] .wallet-frozen{background:linear-gradient(160deg,#eff9ff,#f3f2ff);border-color:#9fd8f7}
html[data-theme="light"] .wf-val{color:#0284c7}
html[data-theme="light"] .wallet-frozen.is-zero .wf-val{color:#8a8fa3}
/* Профиль на компьютере, светлая тема: активная вкладка «Активные» была
   розовым текстом на розовом фоне — делаем текст белым */
@media(min-width:769px){
  html[data-theme="light"] .mb-tab.active{color:#fff;box-shadow:0 4px 12px rgba(230,61,111,.3)}
  html[data-theme="light"] .mb-tab.active .mb-count{background:rgba(255,255,255,.25);color:#fff}
}

/* ═══════════════════════════════════════════════════════════════════════
   СТРАНИЦА БАЛАНСА — ПРЕМИУМ (одинаково на телефоне и компьютере)
   Карточка как в боковом меню: банковская карта с переливом, общая сумма
   крупно, счета стеклянными плашками; пакеты — плитки с ценой-капсулой;
   выбранный пакет подсвечивается градиентной рамкой.
   ═══════════════════════════════════════════════════════════════════════ */
#page-wallet .wallet-page{max-width:520px;padding:18px 16px 110px}

#page-wallet .wallet-balance-card{
  position:relative;overflow:hidden;isolation:isolate;margin-bottom:22px;padding:20px 18px 18px!important;border-radius:26px!important;
  border:none!important;color:#fff;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.22),transparent 55%),
    linear-gradient(135deg,#ff4fa6 0%,#c026d3 42%,#7c3aed 72%,#3b82f6 100%)!important;
  box-shadow:0 18px 44px rgba(192,38,211,.35),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
#page-wallet .wallet-balance-card::before{
  display:block!important;content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:-1;border-radius:0;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.28),transparent)!important;transform:skewX(-18deg);
  animation:smShine 5.5s ease-in-out infinite;right:auto;
}
#page-wallet .wallet-balance-card::after{
  content:"VS";position:absolute;right:-8px;bottom:-34px;z-index:-1;font-size:150px;font-weight:900;font-style:italic;
  letter-spacing:-.06em;color:rgba(255,255,255,.10);line-height:1;pointer-events:none;
}
#page-wallet .wbc-label{font-size:12px!important;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.8)!important;margin-bottom:2px}
#page-wallet .wbc-total{display:flex;align-items:center;gap:10px;font-size:42px;font-weight:900;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;margin-bottom:14px;text-shadow:0 2px 12px rgba(0,0,0,.18)}
#page-wallet .wbc-total .vcoin{height:30px;width:auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.25))}

#page-wallet .wallets-split{margin:0 0 10px;max-width:none;gap:10px}
#page-wallet .wallet-mini{padding:12px 13px 11px!important;border-radius:16px;
  background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.24)!important;backdrop-filter:blur(4px)}
#page-wallet .wm-label{color:rgba(255,255,255,.88)!important}
#page-wallet .wm-val{font-size:24px;color:#fff!important}
#page-wallet .wm-val .vcoin{height:15px}
#page-wallet .wm-hint{color:rgba(255,255,255,.72)!important}
#page-wallet .wm-main .wm-dot{background:#4ade80}
#page-wallet .wm-bonus .wm-dot{background:#fde047;box-shadow:0 0 8px rgba(253,224,71,.8)}
#page-wallet .wm-q{background:rgba(255,255,255,.22)!important;color:#fff!important;border-color:transparent!important}

#page-wallet .wallet-frozen{max-width:none;margin:0 0 12px;background:rgba(15,10,40,.22)!important;border:1px dashed rgba(255,255,255,.38)!important}
#page-wallet .wf-lbl{color:#fff!important}
#page-wallet .wf-hint{color:rgba(255,255,255,.75)!important}
#page-wallet .wf-val{color:#e0f2fe!important;text-shadow:0 0 10px rgba(125,211,252,.6)}
#page-wallet .wallet-frozen.is-zero .wf-val{color:rgba(255,255,255,.88)!important;text-shadow:none}

#page-wallet .wbc-bonus-note{color:rgba(255,255,255,.78)!important;font-size:11.5px;line-height:1.45;margin:0 0 14px;text-align:left}
#page-wallet .wbc-btns{gap:10px}
#page-wallet .wbc-btn{height:50px;padding:0 10px;border-radius:15px;font-size:15px;font-weight:800;white-space:nowrap}
#page-wallet .wbc-btn-add{background:#fff!important;color:#7c1d6f!important;border:none!important;box-shadow:0 8px 20px rgba(20,0,40,.25)!important}
#page-wallet .wbc-btn-out{background:rgba(255,255,255,.16)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important}
#page-wallet .wbc-btn:active{transform:scale(.97)}

/* пакеты */
#page-wallet .topup-title{font-size:18px;font-weight:900;letter-spacing:-.01em;margin:4px 2px 14px}
#page-wallet .topup-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
#page-wallet .topup-pkg{position:relative;padding:16px 8px 12px!important;border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;
  border:1px solid rgba(255,255,255,.10)!important;transition:transform .15s,border-color .2s,box-shadow .2s,background .2s}
#page-wallet .topup-pkg:hover{transform:translateY(-2px);border-color:rgba(255,95,178,.45)!important}
#page-wallet .topup-pkg:active{transform:scale(.97)}
#page-wallet .topup-coins{display:flex;align-items:center;justify-content:center;gap:5px;font-size:22px;font-weight:900;letter-spacing:-.02em;margin-bottom:8px;color:var(--t1)}
#page-wallet .topup-coins .vcoin{height:17px}
#page-wallet .topup-price{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:800;
  color:var(--t1);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
#page-wallet .topup-pkg.popular{border-color:transparent!important;
  background:linear-gradient(#1a1326,#1a1326) padding-box,linear-gradient(135deg,#ff4fa6,#a855f7,#3b82f6) border-box!important;
  border:1.5px solid transparent!important;box-shadow:0 10px 26px rgba(236,72,153,.22)}
#page-wallet .topup-pkg.popular::before{display:none}
#page-wallet .topup-hit{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:1;white-space:nowrap;
  padding:3px 9px;border-radius:999px;font-size:9.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#ff4fa6,#f97316);box-shadow:0 4px 12px rgba(249,115,22,.4)}
#page-wallet .topup-pkg.selected{
  background:linear-gradient(160deg,rgba(255,79,166,.24),rgba(124,58,237,.22)) padding-box,linear-gradient(135deg,#ff4fa6,#a855f7,#3b82f6) border-box!important;
  border:1.5px solid transparent!important;box-shadow:0 12px 28px rgba(168,85,247,.35)!important;transform:translateY(-2px)}
#page-wallet .topup-pkg.selected .topup-price{background:#fff;color:#7c1d6f;border-color:transparent}
#page-wallet .topup-pkg.selected::after{content:"✓";position:absolute;top:7px;right:8px;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff;background:linear-gradient(135deg,#ff4fa6,#7c3aed)}

/* своя сумма */
#page-wallet .topup-custom{border-radius:18px!important;padding:12px 14px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important}
#page-wallet .topup-custom-inp{border-radius:12px!important;min-height:44px}

/* оплата */
#page-wallet .pay-total{margin:18px 0 12px}
#page-wallet .pay-row .pay-btn{border-radius:16px;height:54px}

/* история */
#page-wallet .hist-open-btn{border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important}
#page-wallet .hob-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:0;
  background:linear-gradient(135deg,#fbbf24,#f97316);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.25)}

/* телефон */
@media(max-width:480px){
  #page-wallet .wallet-page{padding:14px 14px 110px}
  #page-wallet .wbc-total{font-size:38px}
  #page-wallet .wm-val{font-size:21px}
  #page-wallet .topup-grid{gap:8px}
  #page-wallet .topup-coins{font-size:19px}
  #page-wallet .topup-price{font-size:11.5px;padding:3px 8px}
  #page-wallet .wbc-btn{font-size:14px}
}
@media(prefers-reduced-motion:reduce){#page-wallet .wallet-balance-card::before{animation:none}}

/* светлая тема: карта остаётся цветной, плитки — белые */
html[data-theme="light"] #page-wallet .topup-pkg{background:#fff!important;border-color:rgba(40,20,80,.09)!important;box-shadow:0 4px 14px rgba(40,20,80,.05)}
html[data-theme="light"] #page-wallet .topup-price{background:#f3effa;border-color:#e7e0f3;color:#3b2f55}
html[data-theme="light"] #page-wallet .topup-pkg.popular{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ff4fa6,#a855f7,#3b82f6) border-box!important}
html[data-theme="light"] #page-wallet .topup-pkg.selected{background:linear-gradient(160deg,#fff0f8,#f3ecff) padding-box,linear-gradient(135deg,#ff4fa6,#a855f7,#3b82f6) border-box!important}
html[data-theme="light"] #page-wallet .topup-pkg.selected .topup-price{background:linear-gradient(135deg,#ec4899,#7c3aed);color:#fff}
html[data-theme="light"] #page-wallet .topup-custom,html[data-theme="light"] #page-wallet .hist-open-btn{background:#fff!important;border-color:rgba(40,20,80,.09)!important}

/* ── боковое меню: общая сумма не нужна — видно «Основной» и «Бонусный» ── */
#sideMenu .sm-balance-total{display:none}
#sideMenu .sm-balance-lbl{margin-bottom:10px}

/* ═══════════════════════════════════════════════════════════════════════
   КОМНАТА ОЖИДАНИЯ — галерея вызовов
   Шапка-карточка с «живой» точкой и кнопкой «Создать вызов», вызовы —
   крупные портретные карточки: фото, ник, ELO и длительность на фото,
   кнопка «Принять» на всю ширину.
   ═══════════════════════════════════════════════════════════════════════ */
#roomsModal.rooms-screen{
  background:
    radial-gradient(90% 40% at 100% 0%,rgba(168,85,247,.16),transparent 60%),
    radial-gradient(80% 40% at 0% 100%,rgba(236,72,153,.10),transparent 60%),
    var(--bg)!important;
}
.rm-wrap{max-width:760px;width:100%;margin:0 auto;padding-left:16px;padding-right:16px;box-sizing:border-box}
.rm-top{padding-top:14px;flex-shrink:0}
.rm-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;padding:16px 16px 14px;color:#fff;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.2),transparent 55%),linear-gradient(135deg,#7c3aed 0%,#a855f7 45%,#ec4899 100%);
  box-shadow:0 14px 34px rgba(124,58,237,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.rm-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%)}
.rm-hero-row{display:flex;align-items:center;gap:12px}
.rm-hero-ico{flex:0 0 46px;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:24px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.rm-hero-txt{min-width:0}
.rm-hero-title{font-size:19px;font-weight:900;letter-spacing:-.01em;line-height:1.15}
.rm-hero-cat{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.22)}
.rm-live{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:rmPulse 1.6s infinite}
@keyframes rmPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.rm-hero-desc{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.86);margin:10px 0 12px}
.rm-create{width:100%;height:44px;border:none;border-radius:14px;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:800;
  color:#6d28d9;background:#fff;box-shadow:0 6px 16px rgba(30,0,60,.25);transition:transform .12s}
.rm-create:active{transform:scale(.97)}
.rm-sec{display:flex;align-items:center;gap:8px;padding-top:16px;padding-bottom:10px;flex-shrink:0;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.rm-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;font-size:11px;letter-spacing:0;
  color:#fff;background:linear-gradient(135deg,#a855f7,#ec4899)}
.rm-count:empty{display:none}
.rm-list{overflow-y:auto;flex:1;padding-bottom:28px;scrollbar-width:none}
.rm-list::-webkit-scrollbar{display:none}

.rm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:620px){.rm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.rm-card{display:flex;flex-direction:column;gap:8px;padding:6px 6px 8px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 26px rgba(0,0,0,.25);transition:transform .18s,box-shadow .2s;animation:rmIn .45s cubic-bezier(.2,.9,.25,1) both}
.rm-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(124,58,237,.25)}
.rm-grid .rm-card:nth-child(2){animation-delay:.05s}.rm-grid .rm-card:nth-child(3){animation-delay:.1s}
.rm-grid .rm-card:nth-child(4){animation-delay:.15s}.rm-grid .rm-card:nth-child(n+5){animation-delay:.2s}
@keyframes rmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rm-card.mine{background:linear-gradient(#17122a,#17122a) padding-box,linear-gradient(135deg,#a855f7,#ec4899) border-box;border:1.5px solid transparent}
.rm-photo{position:relative;aspect-ratio:3/4;border-radius:17px;overflow:hidden;background:var(--bg3);cursor:pointer}
.rm-photo > img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.rm-card:hover .rm-photo > img{transform:scale(1.04)}
.rm-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 28%,transparent 52%,rgba(0,0,0,.78) 100%);pointer-events:none}
.rm-chip{position:absolute;top:8px;z-index:1;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;white-space:nowrap;
  background:rgba(10,8,20,.5);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rm-elo{left:8px}.rm-dur{right:8px}
.rm-who{position:absolute;left:10px;right:10px;bottom:9px;z-index:1;color:#fff}
.rm-name{font-size:15px;font-weight:900;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:inline-block;max-width:calc(100% - 20px);vertical-align:middle}
.rm-ver{width:14px;height:14px;margin-left:4px;vertical-align:middle}
.rm-ago{font-size:11px;font-weight:600;color:rgba(255,255,255,.8);margin-top:2px}
.rm-accept{height:42px;border:none;border-radius:14px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#ff4fa6,#a855f7 55%,#6d28d9);box-shadow:0 6px 16px rgba(168,85,247,.38);transition:transform .12s,filter .2s}
.rm-accept:active{transform:scale(.96)}
.rm-accept:hover{filter:brightness(1.08)}
.rm-mine-row{display:flex;flex-direction:column;gap:6px}
.rm-mine-badge{display:block;text-align:center;padding:7px 8px;border-radius:12px;font-size:12px;font-weight:800;color:#d8b4fe;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.35)}
.rm-cancel{height:34px;border-radius:12px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:800;color:#f87171;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3)}
.rm-empty{text-align:center;padding:34px 18px;border-radius:22px;border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.rm-empty-ico{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:30px;
  background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(236,72,153,.2))}
.rm-empty-txt{font-size:13.5px;color:var(--t2);line-height:1.5;margin-bottom:14px}
.rm-create-sm{max-width:260px;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff}
@media(prefers-reduced-motion:reduce){.rm-card{animation:none}.rm-live{animation:none}}

/* светлая тема */
html[data-theme="light"] .rm-card{background:#fff;border-color:rgba(40,20,80,.08);box-shadow:0 8px 22px rgba(40,20,80,.08)}
html[data-theme="light"] .rm-card.mine{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#a855f7,#ec4899) border-box}
html[data-theme="light"] .rm-mine-badge{color:#7c3aed;background:#f3e8ff;border-color:#e9d5ff}
html[data-theme="light"] .rm-empty{background:#fff;border-color:rgba(40,20,80,.14)}

.rm-who .rm-ver{width:14px!important;height:14px!important;display:inline-block;object-fit:contain}
@media(min-width:620px){.rm-hero .rm-create{width:auto;min-width:260px;padding:0 28px}}
.rm-grid{align-items:start}

/* ═══ v153: компактная шапка «Комнаты ожидания» ═══ */
.rm-hero{border-radius:20px;padding:12px 12px 12px}
.rm-hero-row{gap:10px}
.rm-hero-ico{flex:0 0 38px;width:38px;height:38px;border-radius:12px;font-size:19px}
.rm-hero-title{font-size:16px}
.rm-hero-cat{margin-top:3px;padding:2px 8px;font-size:11px}
.rm-hero-desc{font-size:11.5px;line-height:1.4;margin:8px 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rm-create{height:38px;border-radius:12px;font-size:13.5px}
.rm-hero::after{width:120px;height:120px;right:-30px;top:-30px}
.rm-sec{padding-top:12px}

/* ═══ v153: кошелёк — без общей суммы (основной и бонусный видны ниже) ═══ */
#page-wallet .wbc-total{display:none!important}
#page-wallet .wbc-label{margin-bottom:10px}

/* ═══ v153: окно «Начать батл» — способы поиска, описание режима, ИИ-проверка ═══ */
#pm-step-mode .pm-mode.mode-blue .pm-mode-chips.pm-ways span.pm-way-ai{color:#c4b5fd;background:rgba(139,92,246,.16);border-color:rgba(167,139,250,.38)}
html[data-theme="light"] #pm-step-mode .pm-mode.mode-blue .pm-mode-chips.pm-ways span.pm-way-ai{color:#6d28d9;background:rgba(139,92,246,.10);border-color:rgba(139,92,246,.28)}
@media(min-width:769px){
  #pm-step-mode .pm-mode.mode-blue .pm-ways{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
  #pm-step-mode .pm-mode.mode-blue .pm-ways span{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;color:#93c5fd;background:rgba(59,130,246,.14);border:1px solid rgba(96,165,250,.3)}
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-blue .pm-ways span{color:#1d4ed8;background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.25)}
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-blue .pm-ways span.pm-way-ai{color:#6d28d9;background:rgba(139,92,246,.10);border-color:rgba(139,92,246,.28)}
}
.pm-fm-desc{position:relative;margin:-2px 0 12px;padding:9px 12px 9px 14px;border-radius:12px;font-size:12px;line-height:1.45;font-weight:500;text-align:left;
  color:var(--t2);background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(59,130,246,.03));border:1px solid rgba(96,165,250,.22);overflow:hidden}
.pm-fm-desc::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#60a5fa,#a855f7)}
.pm-fm-flash{animation:pmFmIn .28s ease}
@keyframes pmFmIn{from{opacity:.2;transform:translateY(-3px)}to{opacity:1;transform:none}}
html[data-theme="light"] .pm-fm-desc{color:#4b5563;background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.02));border-color:rgba(59,130,246,.2)}
.pm-tip.pm-ai{display:flex!important;align-items:flex-start;justify-content:flex-start;gap:9px;text-align:left;line-height:1.4;font-size:11.5px;font-weight:500;
  color:var(--t1);background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(34,197,94,.06));border:1px solid rgba(167,139,250,.3);padding:8px 12px;margin-bottom:12px}
.pm-tip.pm-ai > span:last-child{opacity:.88}
.pm-ai-ico{flex:0 0 24px;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:14px;background:rgba(139,92,246,.22)}
html[data-theme="light"] .pm-tip.pm-ai{color:#374151;background:linear-gradient(135deg,rgba(139,92,246,.09),rgba(34,197,94,.05));border-color:rgba(139,92,246,.24)}
html[data-theme="light"] .pm-ai-ico{background:rgba(139,92,246,.14)}
@media(max-width:768px){
  #pm-step-find .pm-tip.pm-ai{padding:7px 10px;font-size:11px;margin-bottom:10px;border-radius:12px}
  #pm-step-find .pm-fm-desc{font-size:11.5px;padding:8px 10px 8px 12px;margin-bottom:10px}
  #pm-step-find.pm-tight .pm-tip.pm-ai{display:flex!important;font-size:10.5px;padding:5px 9px;margin-bottom:8px}
  #pm-step-find.pm-tight .pm-tip.pm-ai > span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #pm-step-find.pm-tight .pm-ai-ico{flex-basis:20px;width:20px;height:20px;font-size:12px}
  #pm-step-find.pm-tight .pm-fm-desc{font-size:10.5px;line-height:1.35;padding:6px 9px 6px 11px;margin-bottom:8px}
}

/* ═══ v153: поиск — люди, батлы, подсказки ═══ */
.nav-search .ns-result{padding:8px;border-radius:16px;scrollbar-width:thin}
.nav-search .ns-result.show{animation:srchIn .16s ease}
@keyframes srchIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.srch-head{display:flex;align-items:center;gap:8px;padding:4px 6px 8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.srch-head b{min-width:18px;height:18px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;font-size:10.5px;letter-spacing:0;color:#fff;background:linear-gradient(135deg,#a855f7,#ec4899)}
.srch-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;cursor:pointer;transition:background .14s;outline:none}
.srch-row + .srch-row{margin-top:2px}
.srch-row:hover,.srch-row:focus-visible{background:rgba(255,255,255,.06)}
.srch-row:active{background:rgba(168,85,247,.14)}
.srch-ava{flex:0 0 40px;width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 2px rgba(168,85,247,.35)}
.srch-ava-fb{display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(135deg,#ec4899,#7c3aed)}
.srch-info{flex:1;min-width:0}
.srch-name{display:flex;align-items:center;gap:4px;min-width:0;font-weight:700;font-size:14px;color:var(--t1)}
.srch-name-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.srch-ver{width:14px;height:14px;flex:0 0 14px}
.srch-sub{display:flex;align-items:center;gap:8px;margin-top:1px;font-size:11.5px;color:var(--t3);min-width:0}
.srch-at{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--t2)}
.srch-elo{white-space:nowrap;flex-shrink:0}
.srch-wins{flex-shrink:0;font-size:12px;font-weight:700;color:var(--t2);padding:4px 8px;border-radius:999px;background:rgba(251,191,36,.10)}
.srch-row mark,.srch-at mark{background:none;color:#f472b6;font-weight:800}
.srch-msg{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;font-size:13px;color:var(--t2);background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.1)}
.srch-msg + .srch-head,.srch-msg + .srch-msg{margin-top:8px}
.srch-msg-ico{flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px;background:rgba(168,85,247,.14)}
.srch-msg-txt{min-width:0;overflow-wrap:anywhere;line-height:1.4}
.srch-msg-txt strong{color:var(--t1)}
.srch-msg-txt small{display:block;margin-top:2px;font-size:11.5px;color:var(--t3)}
.srch-found{padding:0 6px 8px;font-size:11.5px;color:var(--t2);font-weight:600}
.srch-found strong{color:var(--acc);letter-spacing:.04em}
.srch-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(168,85,247,.25);border-top-color:#a855f7;animation:srchSpin .7s linear infinite}
@keyframes srchSpin{to{transform:rotate(360deg)}}
.ns-result .battle-row{margin:0}
html[data-theme="light"] .srch-row:hover,html[data-theme="light"] .srch-row:focus-visible{background:#f4f1fb}
html[data-theme="light"] .srch-msg{background:#faf9fd;border-color:rgba(40,20,80,.14)}
html[data-theme="light"] .srch-row mark{color:#db2777}
html[data-theme="light"] .srch-wins{background:#fef3c7;color:#92400e}
.ns-backdrop{position:fixed;inset:0;z-index:199;background:rgba(6,4,14,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .18s}
.ns-backdrop.on{opacity:1;pointer-events:auto}
html[data-theme="light"] .ns-backdrop{background:rgba(20,16,40,.28)}
@media(min-width:861px){html:not(.nf5) .ns-backdrop{display:none}}
@media(max-width:860px){
  .nav-search.mob-open .ns-result{top:52px;max-height:min(66vh,520px);background:var(--bg1);box-shadow:0 18px 44px rgba(0,0,0,.5)}
}
html.nf5 .nav-search.mob-open .ns-result{top:52px;max-height:min(66vh,520px);background:var(--bg1);box-shadow:0 18px 44px rgba(0,0,0,.5)}

/* ═══ v153: РЕЙТИНГ — подиум, своё место, таблица лидеров ═══ */
#page-rating .rating-inner{max-width:720px;padding-top:18px}
#page-rating .rating-head{text-align:center;margin-bottom:14px}
#page-rating .rating-head h2{font-size:26px;font-weight:900;letter-spacing:-.02em;margin-bottom:4px;
  background:linear-gradient(90deg,#fde68a,#fbbf24 30%,#f472b6 70%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
#page-rating .rating-head p{font-size:13px;color:var(--t2)}
#page-rating .period-tabs{max-width:420px;margin:0 auto 18px;padding:4px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
#page-rating .period-tab{border-radius:999px;padding:8px 6px;font-size:13px;font-weight:700;color:var(--t2);transition:color .15s,background .2s,box-shadow .2s}
#page-rating .period-tab.active{color:#fff;background:linear-gradient(135deg,#ec4899,#8b5cf6);box-shadow:0 6px 18px rgba(168,85,247,.35)}

#page-rating .rt-pod{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;
  margin:0 0 18px;padding:34px 10px 0;border-radius:26px;isolation:isolate;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 30%,rgba(251,191,36,.20),transparent 70%),
             radial-gradient(40% 50% at 12% 70%,rgba(148,163,184,.14),transparent 70%),
             radial-gradient(40% 50% at 88% 75%,rgba(234,88,12,.14),transparent 70%),
             linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07)}
#page-rating .rt-pod[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:460px;margin-left:auto;margin-right:auto}
#page-rating .rt-pod[data-n="1"]{grid-template-columns:minmax(0,220px);justify-content:center}
#page-rating .rt-pod::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.5) 0 1px,transparent 1.5px),radial-gradient(circle at 70% 35%,rgba(255,255,255,.4) 0 1px,transparent 1.5px),radial-gradient(circle at 45% 12%,rgba(253,230,138,.7) 0 1.2px,transparent 1.8px),radial-gradient(circle at 85% 15%,rgba(255,255,255,.35) 0 1px,transparent 1.5px),radial-gradient(circle at 10% 45%,rgba(253,230,138,.5) 0 1px,transparent 1.5px)}
.rt-pl{--m1:#fde68a;--m2:#f59e0b;--mc:251,191,36;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;cursor:pointer;
  animation:rtRise .6s cubic-bezier(.2,.9,.25,1) both}
.rt-p2{--m1:#f1f5f9;--m2:#94a3b8;--mc:148,163,184}
.rt-p3{--m1:#fed7aa;--m2:#ea580c;--mc:234,88,12}
@keyframes rtRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rt-crown{font-size:26px;line-height:1;margin-bottom:2px;filter:drop-shadow(0 3px 8px rgba(251,191,36,.6));animation:rtFloat 2.6s ease-in-out infinite}
@keyframes rtFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
.rt-av-wrap{position:relative;width:62px;height:62px;border-radius:50%;flex-shrink:0;box-shadow:0 0 26px rgba(var(--mc),.35)}
.rt-p1 .rt-av-wrap{width:84px;height:84px;box-shadow:0 0 36px rgba(var(--mc),.55)}
.rt-ring{position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,var(--m1),var(--m2),#fff,var(--m2),var(--m1));animation:rtSpin 5s linear infinite}
@keyframes rtSpin{to{transform:rotate(360deg)}}
.rt-av{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top;
  border:3px solid var(--bg);box-sizing:border-box;background:var(--bg2)}
.rt-ava-fb{font-weight:900;font-size:24px;color:#fff;background:linear-gradient(135deg,#ec4899,#7c3aed)!important}
.rt-p1 .rt-ava-fb{font-size:32px}
.rt-medal{position:absolute;z-index:2;left:50%;bottom:-8px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:900;color:#1f1300;
  background:linear-gradient(135deg,var(--m1),var(--m2));border:2px solid var(--bg);box-shadow:0 3px 8px rgba(0,0,0,.35)}
.rt-pname{display:flex;align-items:center;justify-content:center;gap:3px;max-width:100%;margin-top:14px;padding:0 2px;
  font-size:13px;font-weight:800;color:var(--t1)}
.rt-pname > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rt-p1 .rt-pname{font-size:14.5px}
.rt-ver{width:14px;height:14px;flex:0 0 14px}
.rt-pelo{margin-top:2px;font-size:13px;font-weight:900;color:var(--m1);font-variant-numeric:tabular-nums}
.rt-pelo small{font-size:9.5px;font-weight:800;opacity:.7;letter-spacing:.04em}
.rt-step{position:relative;width:100%;margin-top:10px;height:66px;border-radius:16px 16px 0 0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:8px;gap:2px;
  background:linear-gradient(180deg,rgba(var(--mc),.34),rgba(var(--mc),.06));border:1px solid rgba(var(--mc),.38);border-bottom:none}
.rt-p1 .rt-step{height:104px}
.rt-p2 .rt-step{height:80px}
.rt-step-top{position:absolute;top:0;left:12%;right:12%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
.rt-step-num{font-size:30px;font-weight:900;line-height:1;background:linear-gradient(180deg,#fff,var(--m1) 45%,var(--m2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rt-p1 .rt-step-num{font-size:40px}
.rt-step-w{font-size:11px;font-weight:800;color:rgba(255,255,255,.85);white-space:nowrap}
.rt-pl.is-me .rt-pname > span{color:#f472b6}
.rt-pl:hover .rt-av-wrap{transform:translateY(-2px);transition:transform .2s}

.rt-me{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border-radius:18px;cursor:pointer;
  background:linear-gradient(var(--bg1),var(--bg1)) padding-box,linear-gradient(135deg,#ec4899,#8b5cf6,#3b82f6) border-box;border:1.5px solid transparent;
  box-shadow:0 10px 26px rgba(168,85,247,.2)}
.rt-me-rank{display:flex;flex-direction:column;align-items:center;min-width:58px}
.rt-me-rank small{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);text-align:center;line-height:1.1}
.rt-me-rank b{font-size:22px;font-weight:900;background:linear-gradient(135deg,#f472b6,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.rt-me-av{flex:0 0 44px;width:44px;height:44px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:18px;box-shadow:0 0 0 2px rgba(236,72,153,.5)}
.rt-me-info{flex:1;min-width:0}
.rt-me-name{display:flex;align-items:center;gap:4px;font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-me-meta{font-size:12px;color:var(--t2);margin-top:2px}
.rt-me-elo{text-align:right}
.rt-me-elo b{display:block;font-size:18px;font-weight:900}
.rt-me-elo small,.rt-elo small{font-size:9.5px;font-weight:800;color:var(--t3);letter-spacing:.06em}
.rt-me-out{cursor:default;gap:10px;box-shadow:none}
.rt-me-ico{flex:0 0 36px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:rgba(168,85,247,.15)}
.rt-me-txt{font-size:13px;line-height:1.45;color:var(--t2)}

.rt-sec{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 10px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--t2)}
.rt-sec b{font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--t3)}
.rt-list{display:flex;flex-direction:column;gap:8px}
.rt-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07);
  transition:transform .15s,border-color .2s,background .2s;animation:rtIn .4s ease both}
@keyframes rtIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rt-row:hover{transform:translateY(-1px);border-color:rgba(168,85,247,.35);background:rgba(168,85,247,.07)}
.rt-row.is-me{background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(139,92,246,.10));border-color:rgba(236,72,153,.4)}
.rt-rank{flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:900;color:var(--t2);
  background:rgba(255,255,255,.06);font-variant-numeric:tabular-nums}
.rt-rav{flex:0 0 42px;width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:top;display:grid;place-items:center;font-size:17px}
.rt-info{flex:1;min-width:0}
.rt-name{display:flex;align-items:center;gap:4px;min-width:0;font-size:14px;font-weight:700;color:var(--t1)}
.rt-name-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rt-you{flex-shrink:0;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ec4899,#8b5cf6)}
.rt-meta{display:flex;gap:10px;margin-top:2px;font-size:11.5px;color:var(--t3);white-space:nowrap}
.rt-wr{color:#4ade80;font-weight:700}
.rt-bar{height:4px;margin-top:6px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.rt-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#22c55e,#2dd4bf)}
.rt-elo{flex-shrink:0;text-align:right;min-width:48px}
.rt-elo b{display:block;font-size:16px;font-weight:900;color:var(--t1);font-variant-numeric:tabular-nums}
@media(max-width:420px){
  #page-rating .rating-head h2{font-size:23px}
  #page-rating .rt-pod{gap:6px;padding:30px 6px 0;border-radius:22px}
  .rt-av-wrap{width:56px;height:56px}
  .rt-p1 .rt-av-wrap{width:74px;height:74px}
  .rt-pname{font-size:12px}
  .rt-p1 .rt-pname{font-size:13px}
  .rt-row{gap:10px;padding:9px 10px}
  .rt-rav{flex-basis:38px;width:38px;height:38px}
  .rt-rank{flex-basis:28px;width:28px;height:28px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.rt-ring,.rt-crown,.rt-pl,.rt-row{animation:none}}
html[data-theme="light"] #page-rating .period-tabs{background:#fff;border-color:rgba(40,20,80,.1)}
html[data-theme="light"] #page-rating .rating-head h2{background:linear-gradient(90deg,#d97706,#db2777 60%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] #page-rating .rt-pod{background:radial-gradient(60% 55% at 50% 30%,rgba(251,191,36,.22),transparent 70%),linear-gradient(180deg,#fff,#fbf8ff);border-color:rgba(40,20,80,.08)}
html[data-theme="light"] #page-rating .rt-pod::before{opacity:0}
html[data-theme="light"] .rt-p1{--m1:#f59e0b;--m2:#b45309}
html[data-theme="light"] .rt-p2{--m1:#94a3b8;--m2:#475569}
html[data-theme="light"] .rt-p3{--m1:#ea580c;--m2:#9a3412}
html[data-theme="light"] .rt-step-num{background:linear-gradient(180deg,var(--m1),var(--m2));-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .rt-step-w{color:#374151}
html[data-theme="light"] .rt-medal{color:#fff}
html[data-theme="light"] .rt-row{background:#fff;border-color:rgba(40,20,80,.08);box-shadow:0 4px 14px rgba(40,20,80,.05)}
html[data-theme="light"] .rt-row:hover{background:#faf5ff}
html[data-theme="light"] .rt-row.is-me{background:linear-gradient(135deg,#fdf2f8,#f5f3ff)}
html[data-theme="light"] .rt-rank{background:#f3f1f8;color:#4b4563}
html[data-theme="light"] .rt-bar{background:#eef0f4}
html[data-theme="light"] .rt-wr{color:#16a34a}

/* ═══ v153: уведомления — значок типа и подробное окно с историей ═══ */
.ntf-ava-wrap{position:relative;flex-shrink:0;width:36px;height:36px}
.ntf-ava-wrap .notif-actor-ava{width:36px;height:36px}
.ntf-badge{position:absolute;right:-5px;bottom:-4px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:10px;line-height:1;
  background:var(--bg1);border:1.5px solid var(--nc,#a855f7);box-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none}
.ntf-emoji{flex-shrink:0;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:18px;line-height:1;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.3);
  background:color-mix(in srgb,var(--nc,#a855f7) 16%,transparent);border:1px solid color-mix(in srgb,var(--nc,#a855f7) 35%,transparent)}
@media(max-width:600px){#notifPanel{left:10px!important;right:10px!important;width:auto!important;max-height:74vh!important;border-radius:18px!important}}

#notifDetail{padding:16px!important}
.nd-card{width:100%;max-height:88vh;overflow-y:auto;background:var(--bg1);border:1px solid var(--br);border-radius:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);animation:legalPop .25s cubic-bezier(.34,1.3,.64,1);scrollbar-width:thin}
.nd-hero{position:relative;display:flex;align-items:flex-start;gap:14px;padding:20px 18px 16px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 140% at 0% 0%,rgba(168,85,247,.2),transparent 60%);
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--nc) 26%,transparent),transparent 60%);border-bottom:1px solid var(--br)}
.nd-ava{position:relative;flex-shrink:0}
.nd-ava .notif-actor-ava-lg{width:52px;height:52px;border:2px solid color-mix(in srgb,var(--nc) 70%,transparent)}
.nd-emoji{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:rgba(168,85,247,.16);border:1px solid rgba(168,85,247,.35);
  background:color-mix(in srgb,var(--nc) 18%,transparent);border:1px solid color-mix(in srgb,var(--nc) 40%,transparent)}
.nd-badge{position:absolute;right:-6px;bottom:-5px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  background:var(--bg1);border:2px solid var(--nc);box-shadow:0 3px 8px rgba(0,0,0,.35);pointer-events:none}
.nd-htitle{flex:1;min-width:0;padding-top:2px}
.nd-title{font-weight:900;font-size:17.5px;line-height:1.3;color:var(--t1);overflow-wrap:anywhere}
.nd-time{font-size:12px;color:var(--t3);margin-top:4px}
.nd-lbl{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.nd-lbl b{min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;font-size:10px;letter-spacing:0;color:#fff;background:linear-gradient(135deg,#a855f7,#ec4899)}
.nd-story{margin:16px 18px 0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--br)}
.nd-story-txt{font-size:14.5px;line-height:1.55;color:var(--t1);white-space:pre-wrap;overflow-wrap:anywhere}
.nd-facts{margin:12px 18px 0;border-radius:14px;border:1px solid var(--br);overflow:hidden}
.nd-fact{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;font-size:13px}
.nd-fact + .nd-fact{border-top:1px solid var(--br)}
.nd-fk{color:var(--t3);flex-shrink:0}
.nd-fv{min-width:0;text-align:right;color:var(--t1);font-weight:700;display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.nd-user{color:var(--acc);cursor:pointer}
.nd-gift{display:inline-flex;align-items:center;gap:6px}
.nd-gift img{width:26px;height:26px;object-fit:contain}
.nd-qty{padding:1px 7px;border-radius:999px;font-size:11.5px;color:#fff;background:linear-gradient(135deg,#ec4899,#a855f7)}
.nd-coins{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--t2);font-weight:700}
.nd-coins .vcoin{height:13px;width:auto}
.nd-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;padding:2px 8px;border-radius:8px;background:rgba(255,255,255,.06)}
.nd-st{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}
.nd-st.live{color:#4ade80;background:rgba(34,197,94,.12)}
.nd-st.end{color:var(--t2);background:rgba(148,163,184,.14)}
.nd-hist{margin:16px 18px 0}
.nd-hrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer;transition:background .14s}
.nd-hrow:hover{background:rgba(255,255,255,.05)}
.nd-hico{flex:0 0 30px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:14px;
  background:rgba(168,85,247,.14);
  background:color-mix(in srgb,var(--nc) 16%,transparent)}
.nd-htxt{flex:1;min-width:0;display:flex;flex-direction:column}
.nd-htxt b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.nd-htxt small{font-size:11px;color:var(--t3)}
.nd-harr{color:var(--t3);font-size:18px}
.nd-actions{display:flex;flex-direction:column;gap:8px;padding:18px}
.nd-actions:empty{display:none}
.nd-btn2{width:100%;padding:12px;border-radius:12px;cursor:pointer;font-family:inherit;font-weight:800;font-size:13.5px;color:var(--t1);
  background:rgba(255,255,255,.05);border:1px solid var(--br)}
.nd-btn2:hover{background:rgba(255,255,255,.09)}
#notifDetail .nd-card > div[style*="padding:18px 22px 0"],#notifDetail .nd-card > div[style*="padding:16px 20px 0"]{padding-left:18px!important;padding-right:18px!important}
html[data-theme="light"] .nd-story{background:#faf9fd}
html[data-theme="light"] .nd-code{background:#f3f1f8}
html[data-theme="light"] .nd-hrow:hover{background:#f6f3fc}
html[data-theme="light"] .nd-btn2{background:#f6f5fa}
html[data-theme="light"] .ntf-badge,html[data-theme="light"] .nd-badge{box-shadow:0 2px 6px rgba(20,20,40,.15)}
@media(max-width:768px){
  #pm-step-mode .pm-mode.mode-blue .pm-mode-chips.pm-ways{grid-column:1 / -1;gap:5px;margin-top:4px}
  #pm-step-mode .pm-mode.mode-blue .pm-mode-chips.pm-ways span{font-size:10px;padding:2px 7px;white-space:nowrap}
}
.pm-ai-short{display:none}
@media(max-width:768px){
  #pm-step-find.pm-tight2 .pm-fm-desc{display:none}
  #pm-step-find.pm-tight2 .pm-ai-long{display:none!important}
  #pm-step-find.pm-tight2 .pm-ai-short{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #pm-step-find.pm-tight2 .pm-tip.pm-ai{align-items:center}
}
.nd-fv{flex:1 1 auto;overflow-wrap:anywhere}
.nd-user{min-width:0;overflow-wrap:anywhere;word-break:break-word}

/* ═══ v154: комнаты — без большой шапки, кнопка «!» и окно «Как работают комнаты» ═══ */
.rm-sec.rm-sec-top{padding-top:16px;padding-bottom:12px;gap:8px}
.rm-info{flex:0 0 24px;width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:grid;place-items:center;
  font-family:inherit;font-size:14px;font-weight:900;line-height:1;letter-spacing:0;color:#fff;
  background:linear-gradient(135deg,#a855f7,#ec4899);border:none;box-shadow:0 0 0 0 rgba(236,72,153,.55);animation:rmInfoPulse 2.4s ease-out infinite;transition:transform .15s}
.rm-info:hover{transform:scale(1.1)}
.rm-info:active{transform:scale(.94)}
@keyframes rmInfoPulse{0%{box-shadow:0 0 0 0 rgba(236,72,153,.55)}70%{box-shadow:0 0 0 8px rgba(236,72,153,0)}100%{box-shadow:0 0 0 0 rgba(236,72,153,0)}}
.rm-create-mini{margin-left:auto;flex-shrink:0;height:34px;padding:0 14px;border:none;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:0;text-transform:none;white-space:nowrap;color:#fff;
  background:linear-gradient(135deg,#ff4fa6,#a855f7 60%,#6d28d9);box-shadow:0 6px 16px rgba(168,85,247,.35);transition:transform .12s,filter .2s}
.rm-create-mini:hover{filter:brightness(1.08)}
.rm-create-mini:active{transform:scale(.96)}
@media(max-width:360px){.rm-create-mini{padding:0 10px;font-size:11.5px;height:32px}}
@media(prefers-reduced-motion:reduce){.rm-info{animation:none}}

.ri-bg{position:fixed;inset:0;z-index:9700;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(6,4,14,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:riFade .18s ease}
@keyframes riFade{from{opacity:0}to{opacity:1}}
.ri-card{position:relative;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;border-radius:24px;padding:22px 18px 18px;
  background:radial-gradient(120% 60% at 0% 0%,rgba(168,85,247,.18),transparent 60%),var(--bg1);border:1px solid var(--br);
  box-shadow:0 24px 60px rgba(0,0,0,.55);animation:legalPop .25s cubic-bezier(.34,1.3,.64,1);scrollbar-width:thin}
.ri-x{position:absolute;top:14px;right:14px}
.ri-head{display:flex;align-items:center;gap:12px;padding-right:40px;margin-bottom:16px}
.ri-ico{flex:0 0 46px;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:23px;
  background:linear-gradient(135deg,#7c3aed,#ec4899);box-shadow:0 8px 20px rgba(168,85,247,.35)}
.ri-title{font-size:19px;font-weight:900;letter-spacing:-.01em;color:var(--t1);line-height:1.2}
.ri-sub{font-size:12.5px;color:var(--t2);line-height:1.4;margin-top:3px}
.ri-steps{position:relative;display:flex;flex-direction:column;gap:4px}
.ri-step{position:relative;display:flex;gap:12px;padding:10px 10px 10px 0}
.ri-step:not(:last-child)::after{content:"";position:absolute;left:18px;top:48px;bottom:-6px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(168,85,247,.5),rgba(236,72,153,.15))}
.ri-num{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.32)}
.ri-body{min-width:0;padding-top:1px}
.ri-st{font-size:14.5px;font-weight:800;color:var(--t1)}
.ri-sd{font-size:12.5px;line-height:1.5;color:var(--t2);margin-top:2px}
.ri-step.ri-ai{margin:4px 0;padding:10px;border-radius:14px;background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(34,197,94,.07));border:1px solid rgba(167,139,250,.3)}
.ri-step.ri-ai::after{display:none}
.ri-step.ri-ai .ri-num{background:rgba(34,197,94,.14);border-color:rgba(74,222,128,.35)}
.ri-foot{display:flex;gap:10px;margin-top:16px}
.ri-ok,.ri-go{flex:1;height:46px;border-radius:14px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:800}
.ri-ok{color:var(--t1);background:rgba(255,255,255,.06);border:1px solid var(--br)}
.ri-go{border:none;color:#fff;background:linear-gradient(135deg,#ff4fa6,#a855f7 60%,#6d28d9);box-shadow:0 8px 20px rgba(168,85,247,.35)}
@media(max-width:380px){.ri-foot{flex-direction:column}.ri-card{padding:20px 14px 14px}}
html[data-theme="light"] .ri-bg{background:rgba(20,16,40,.4)}
html[data-theme="light"] .ri-card{background:radial-gradient(120% 60% at 0% 0%,rgba(168,85,247,.10),transparent 60%),#fff;box-shadow:0 24px 60px rgba(20,16,40,.2)}
html[data-theme="light"] .ri-ok{background:#f5f3fa}
html[data-theme="light"] .ri-step.ri-ai{background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(34,197,94,.05))}
.rm-sec.rm-sec-top{flex-wrap:wrap;row-gap:8px}
.rm-sec.rm-sec-top > span:first-child{min-width:0}
.rm-info{min-width:24px!important;max-width:24px;min-height:0!important;height:24px!important;max-height:24px;box-sizing:border-box;align-self:center}
@media(max-width:380px){
  .ri-head{padding-right:34px;gap:10px}
  .ri-ico{flex-basis:38px;width:38px;height:38px;font-size:19px;border-radius:12px}
  .ri-title{font-size:17px}
  .ri-num{flex-basis:34px;width:34px;height:34px;font-size:16px}
  .ri-step:not(:last-child)::after{left:16px;top:44px}
}

/* ═══ v157: «Начать батл» на телефоне — способы поиска отдельной строкой под карточкой
   (раньше значок карточки наезжал на них), крестик — на уровне заголовка ═══ */
@media(max-width:768px){
  #pm-step-mode .pm-mode.mode-blue .pm-mode-chips.pm-ways{grid-column:1 / -1;grid-row:4;margin-top:6px;gap:6px}
  #pm-step-mode .pm-mode.mode-blue .pm-mode-chips.pm-ways span{font-size:11px;padding:4px 10px}
  #pm-step-mode .pm-head{align-items:flex-start}
  #pm-step-mode .pm-head .pm-close{align-self:flex-start;margin-top:-6px}
}
@media(max-width:360px){
  #pm-step-mode .pm-mode.mode-blue .pm-mode-chips.pm-ways span{font-size:10.5px;padding:3px 8px}
}

/* ═══════════════════════════════════════════════════════════════════════
   v158: СТРАНИЦА ПРОФИЛЯ — обложка, аватар с кольцом, карточки статистики,
   уровень, трофеи, подарки, мои батлы. Только оформление: разметка и id те же.
   ═══════════════════════════════════════════════════════════════════════ */
#page-profile .profile-page{max-width:720px;padding-top:18px}
/* обложка */
#page-profile .prof-cover{position:relative;height:176px;border-radius:26px;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 120% at 0% 0%,rgba(255,79,166,.55),transparent 60%),
             radial-gradient(70% 120% at 100% 100%,rgba(58,155,255,.45),transparent 60%),
             linear-gradient(135deg,#1a1028,#0e0a18);
  box-shadow:0 18px 40px rgba(10,4,24,.35)}
#page-profile .prof-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(8,5,16,.45) 100%)}
#page-profile .prof-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#page-profile .prof-edit-btn,#page-profile .prof-cover-edit-overlay{z-index:3}
#page-profile .prof-edit-btn{width:40px;height:40px;border-radius:14px;background:rgba(10,8,20,.45);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
/* аватар с вращающимся градиентным кольцом */
#page-profile .prof-top{margin-top:-64px;padding:0 6px;margin-bottom:12px}
#page-profile .prof-ava-wrap{position:relative;isolation:isolate;border-radius:50%}
#page-profile .prof-ava-wrap::before{content:"";position:absolute;inset:-5px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,#ff4fa6,#a855f7,#3b82f6,#22d3ee,#ff4fa6);animation:pfRing 6s linear infinite;
  box-shadow:0 10px 30px rgba(168,85,247,.35)}
@keyframes pfRing{to{transform:rotate(360deg)}}
#page-profile .prof-ava{position:relative;width:112px;height:112px;border:4px solid var(--bg)!important;box-shadow:none!important;animation:none!important}
#page-profile .prof-ava-wrap:hover .prof-ava{box-shadow:none!important}
/* имя, ник, страна */
#page-profile .prof-name{font-size:25px;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:2px 6px 6px;word-break:break-word}
#page-profile .prof-username{margin:0 6px 4px;gap:6px}
#page-profile .prof-bio{margin:12px 6px 4px;font-size:13.5px;line-height:1.55;color:var(--t2)}
/* подписчики / подписки / фото */
#page-profile .prof-social{margin:16px 0 12px;gap:10px}
#page-profile .social-card{border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);box-shadow:0 10px 26px rgba(0,0,0,.18)}
#page-profile .sc-item{padding:15px 6px;gap:4px}
#page-profile .sc-num{font-size:21px;font-variant-numeric:tabular-nums}
#page-profile .sc-lbl{font-size:11.5px}
#page-profile .social-ig{border-radius:20px;min-width:92px;color:#fff;border:none;
  background:linear-gradient(135deg,#f58529,#dd2a7b 45%,#8134af 80%,#515bd4);box-shadow:0 10px 24px rgba(221,42,123,.3)}
#page-profile .social-ig:hover{filter:brightness(1.06);background:linear-gradient(135deg,#f58529,#dd2a7b 45%,#8134af 80%,#515bd4)}
/* рейтинг / победы / батлы */
#page-profile .prof-stats{gap:10px;margin-bottom:12px}
#page-profile .ps-card{position:relative;overflow:hidden;border-radius:20px;padding:14px 8px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 24px rgba(0,0,0,.16)}
#page-profile .ps-card::before{content:"";position:absolute;left:18%;right:18%;top:0;height:2px;border-radius:0 0 3px 3px;background:var(--pc,#a855f7);opacity:.9}
#page-profile .ps-card:nth-child(1){--pc:#f59e0b;--pcb:rgba(245,158,11,.16)}
#page-profile .ps-card:nth-child(2){--pc:#fbbf24;--pcb:rgba(251,191,36,.16)}
#page-profile .ps-card:nth-child(3){--pc:#a855f7;--pcb:rgba(168,85,247,.16)}
#page-profile .ps-icon{width:34px;height:34px;margin:0 auto 6px;border-radius:12px;display:grid;place-items:center;font-size:17px;background:var(--pcb)}
#page-profile .ps-val{font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
#page-profile .ps-lbl{font-size:11px;font-weight:700;color:var(--t3);margin-top:2px}
/* уровень */
#page-profile .prof-elo-block{position:relative;border-radius:20px;padding:16px 16px 14px;margin-bottom:12px;overflow:hidden;
  background:linear-gradient(var(--bg1),var(--bg1)) padding-box,linear-gradient(135deg,rgba(255,79,166,.55),rgba(168,85,247,.45),rgba(59,130,246,.45)) border-box;
  border:1px solid transparent;box-shadow:0 12px 28px rgba(168,85,247,.14)}
#page-profile .peb-top{align-items:center;font-size:15px;font-weight:800;margin-bottom:10px}
#page-profile .peb-top .trophy-icon{width:26px;height:26px;margin-right:6px}
#page-profile .peb-top > span:last-child{font-size:12.5px!important;font-weight:800!important;color:var(--t2)!important;
  padding:3px 10px;border-radius:999px;background:rgba(168,85,247,.12)}
#page-profile .peb-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
#page-profile .peb-fill{position:relative;min-width:6px;border-radius:999px;background:linear-gradient(90deg,#ff4fa6,#a855f7,#3b82f6);
  box-shadow:0 0 14px rgba(168,85,247,.6)}
#page-profile .peb-fill::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);background-size:200% 100%;animation:pfShine 2.6s linear infinite}
@keyframes pfShine{from{background-position:200% 0}to{background-position:-200% 0}}
#page-profile .peb-sub{font-size:12px;font-weight:600;margin-top:8px}
/* трофеи */
#page-profile .prof-trophies-block{border-radius:20px;padding:16px 14px 14px;margin-bottom:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09)}
#page-profile .ptb-header{font-size:15px;font-weight:800;margin-bottom:12px}
#page-profile .prof-trophies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;justify-content:stretch}
#page-profile .ptr-item{width:auto;position:relative;padding:10px 4px 8px;border-radius:16px;gap:5px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
#page-profile .ptr-item img{width:40px;height:40px}
#page-profile .ptr-item .ptr-name{font-size:10.5px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-profile .ptr-item.unlocked{background:radial-gradient(90% 80% at 50% 0%,rgba(251,191,36,.18),transparent 70%),rgba(255,255,255,.04);
  border-color:rgba(251,191,36,.35)}
#page-profile .ptr-item.unlocked .ptr-name{color:var(--t1)}
#page-profile .ptr-item.unlocked:hover{transform:translateY(-2px)}
#page-profile .ptr-item.locked{opacity:.5}
#page-profile .ptr-item.locked::after{content:"🔒";position:absolute;top:5px;right:6px;font-size:9px;opacity:.8}
@media(min-width:560px){#page-profile .prof-trophies{grid-template-columns:repeat(7,minmax(0,1fr))}}
/* подарки */
#page-profile .gift-showcase{border-radius:20px;padding:16px 14px 12px;margin-bottom:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09)}
#page-profile .gs-header{font-size:15px;font-weight:800;margin-bottom:12px}
#page-profile .gs-item-icon{border-radius:16px}
/* мои батлы */
#page-profile .prof-section-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:900;letter-spacing:-.01em;margin:22px 4px 12px}
#page-profile .prof-section-title::before{content:"";width:4px;height:18px;border-radius:4px;background:linear-gradient(180deg,#ff4fa6,#a855f7)}
#page-profile .mb-item{border-radius:18px}
@media(max-width:420px){
  #page-profile .prof-cover{height:150px;border-radius:22px}
  #page-profile .prof-top{margin-top:-56px}
  #page-profile .prof-ava{width:96px;height:96px;border-width:3px!important}
  #page-profile .prof-name{font-size:22px}
  #page-profile .sc-num{font-size:19px}
  #page-profile .ps-val{font-size:20px}
}
@media(max-width:340px){
  #page-profile .prof-trophies{gap:6px}
  #page-profile .ptr-item img{width:34px;height:34px}
  #page-profile .social-ig{min-width:76px;padding:12px 10px}
}
@media(prefers-reduced-motion:reduce){#page-profile .prof-ava-wrap::before,#page-profile .peb-fill::after{animation:none}}
/* светлая тема */
html[data-theme="light"] #page-profile .social-card,
html[data-theme="light"] #page-profile .ps-card,
html[data-theme="light"] #page-profile .prof-trophies-block,
html[data-theme="light"] #page-profile .gift-showcase{background:#fff;border-color:rgba(40,20,80,.08);box-shadow:0 8px 22px rgba(40,20,80,.07)}
html[data-theme="light"] #page-profile .prof-elo-block{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,rgba(236,72,153,.45),rgba(168,85,247,.4),rgba(59,130,246,.4)) border-box;box-shadow:0 10px 24px rgba(168,85,247,.1)}
html[data-theme="light"] #page-profile .peb-bar{background:#efeaf7}
html[data-theme="light"] #page-profile .ptr-item{background:#faf8fd;border-color:rgba(40,20,80,.07)}
html[data-theme="light"] #page-profile .ptr-item.unlocked{background:radial-gradient(90% 80% at 50% 0%,rgba(251,191,36,.2),transparent 70%),#fffaf0;border-color:rgba(245,158,11,.35)}
html[data-theme="light"] #page-profile .prof-cover{box-shadow:0 14px 32px rgba(40,20,80,.18)}
#page-profile .social-card{min-width:0}
#page-profile .sc-item{min-width:0}
#page-profile .sc-lbl{max-width:100%;text-align:center;line-height:1.2;overflow-wrap:anywhere}
@media(max-width:380px){
  #page-profile .prof-social{gap:8px}
  #page-profile .sc-item{padding:13px 4px}
  #page-profile .sc-lbl{font-size:10px}
  #page-profile .social-ig{min-width:70px;padding:12px 8px}
  #page-profile .social-ig span{max-width:64px}
}
#page-profile .gs-header{display:flex;align-items:center;gap:6px}
#page-profile .gs-cnt{min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff4fa6,#a855f7)}
#page-profile .prof-trophies{justify-items:stretch}
#page-profile .prof-edit-btn{z-index:4}

/* ═══ v159: комнаты — окно до низа экрана, список не прячется под нижним меню ═══ */
#roomsModal .rm-list{padding-bottom:var(--rm-bot,28px)}
#roomsModal .rm-empty{padding-bottom:30px}
#roomsModal .rm-empty-txt{margin-bottom:0}

/* ═══ v160: «Начать батл» на компьютере — PvP (синяя) и PvE (розовая) карточки
   различимы без наведения, в окошках-превью видно, что там фото ═══ */
@media(min-width:769px){
  #pm-step-mode .pm-mode.mode-blue{
    background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(59,130,246,.04) 60%,rgba(124,58,237,.06));
    border-color:rgba(96,165,250,.42);box-shadow:0 10px 28px rgba(29,78,216,.16),inset 0 1px 0 rgba(255,255,255,.06)}
  #pm-step-mode .pm-mode.mode-pink{
    background:linear-gradient(135deg,rgba(255,79,166,.15),rgba(230,61,111,.04) 60%,rgba(124,58,237,.07));
    border-color:rgba(255,95,178,.42);box-shadow:0 10px 28px rgba(194,24,91,.16),inset 0 1px 0 rgba(255,255,255,.06)}
  #pm-step-mode .pm-mode.mode-blue:hover{border-color:rgba(96,165,250,.8);box-shadow:0 16px 44px rgba(37,99,235,.3)}
  #pm-step-mode .pm-mode.mode-pink:hover{border-color:rgba(255,95,178,.8);box-shadow:0 16px 44px rgba(219,39,119,.3)}
  #pm-step-mode .pm-mode.mode-blue .pm-mode-icon{background:linear-gradient(135deg,#60a5fa,#1d4ed8);border:none;box-shadow:0 8px 20px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.3)}
  #pm-step-mode .pm-mode.mode-pink .pm-mode-icon{background:linear-gradient(135deg,#ff6fb0,#c2185b);border:none;box-shadow:0 8px 20px rgba(219,39,119,.4),inset 0 1px 0 rgba(255,255,255,.3)}
  #pm-step-mode .pm-mode.mode-blue .pm-mode-icon svg,#pm-step-mode .pm-mode.mode-pink .pm-mode-icon svg{stroke:#fff}
  #pm-step-mode .pm-mode .pm-mode-btn{color:#fff!important}
  /* окошки-превью: силуэт человека / картинка / знак вопроса */
  #pm-step-mode .pm-find-card,#pm-step-mode .pm-vs-card{width:74px;height:98px;border-radius:14px;border-width:1.5px}
  #pm-step-mode .pm-find-card::before,#pm-step-mode .pm-vs-card::before{content:"";position:absolute;inset:0;background-position:center bottom;background-repeat:no-repeat;background-size:100% 100%}
  #pm-step-mode .pm-find-card:not(.unknown){background:linear-gradient(160deg,rgba(96,165,250,.35),rgba(29,78,216,.18));border-color:rgba(96,165,250,.6)}
  #pm-step-mode .pm-find-card:not(.unknown)::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 98'><circle cx='37' cy='38' r='15' fill='%2393c5fd'/><path d='M7 98c0-21 13-33 30-33s30 12 30 33z' fill='%2393c5fd'/></svg>")}
  #pm-step-mode .pm-find-card.unknown{font-size:34px;font-weight:900;color:#93c5fd;border-color:rgba(96,165,250,.55);border-width:1.5px;background:rgba(59,130,246,.07)}
  #pm-step-mode .pm-find-card.unknown::before{display:none}
  #pm-step-mode .pm-vs-card{background:linear-gradient(160deg,rgba(255,111,176,.35),rgba(194,24,91,.18));border-color:rgba(255,95,178,.6)}
  #pm-step-mode .pm-vs-preview .pm-vs-card:first-child::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 98'><circle cx='37' cy='38' r='15' fill='%23ffb3d9'/><path d='M7 98c0-21 13-33 30-33s30 12 30 33z' fill='%23ffb3d9'/></svg>")}
  #pm-step-mode .pm-vs-preview .pm-vs-card:last-child::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 98'><circle cx='52' cy='28' r='9' fill='%23ffd9ec'/><path d='M0 98 L24 52 L40 76 L52 62 L74 98z' fill='%23ffb3d9'/></svg>")}
  #pm-step-mode .pm-find-preview .pm-vs-divider{color:#60a5fa!important;text-shadow:0 0 16px rgba(59,130,246,.5)!important}
  #pm-step-mode .pm-vs-preview .pm-vs-divider{color:#ff5a8a!important;text-shadow:0 0 16px rgba(230,61,111,.5)!important}
  #pm-step-mode .pm-vs-divider{font-size:20px}
  #pm-step-mode .pm-find-preview,#pm-step-mode .pm-vs-preview{gap:14px}
  /* светлая тема */
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-blue{background:linear-gradient(135deg,#eaf2ff,#fff 70%);border-color:rgba(59,130,246,.45);box-shadow:0 8px 22px rgba(37,99,235,.12)}
  html[data-theme="light"] #pm-step-mode .pm-mode.mode-pink{background:linear-gradient(135deg,#ffeaf4,#fff 70%);border-color:rgba(236,72,153,.45);box-shadow:0 8px 22px rgba(219,39,119,.12)}
  html[data-theme="light"] #pm-step-mode .pm-find-card:not(.unknown){background:linear-gradient(160deg,#bfdbfe,#60a5fa);border-color:#3b82f6}
  html[data-theme="light"] #pm-step-mode .pm-find-card:not(.unknown)::before{filter:brightness(0) invert(1);opacity:.95}
  html[data-theme="light"] #pm-step-mode .pm-find-card.unknown{color:#2563eb;border-color:rgba(37,99,235,.5);background:#eff6ff}
  html[data-theme="light"] #pm-step-mode .pm-vs-card{background:linear-gradient(160deg,#fbcfe8,#f472b6);border-color:#ec4899}
  html[data-theme="light"] #pm-step-mode .pm-vs-card::before{filter:brightness(0) invert(1);opacity:.95}
  html[data-theme="light"] #pm-step-mode .pm-find-preview .pm-vs-divider{color:#2563eb!important;text-shadow:none!important}
  html[data-theme="light"] #pm-step-mode .pm-vs-preview .pm-vs-divider{color:#db2777!important;text-shadow:none!important}
}
@media(min-width:769px){
  #pm-step-mode .pm-modes{gap:12px}
  #pm-step-mode .pm-mode{padding:16px 18px}
  #pm-step-mode .pm-mode-head{margin-bottom:8px}
  #pm-step-mode .pm-mode-desc{margin-bottom:8px}
  #pm-step-mode .pm-mode.mode-blue .pm-ways{margin:2px 0 10px}
  #pm-step-mode .pm-find-preview,#pm-step-mode .pm-vs-preview{margin-bottom:12px}
}
@media(min-width:769px) and (max-height:900px){
  #pm-step-mode .pm-find-card,#pm-step-mode .pm-vs-card{width:60px;height:80px;border-radius:12px}
  #pm-step-mode .pm-find-card.unknown{font-size:28px}
}
@media(min-width:769px) and (max-height:780px){
  #pm-step-mode .pm-find-card,#pm-step-mode .pm-vs-card{width:46px;height:60px;border-radius:10px}
  #pm-step-mode .pm-find-card.unknown{font-size:22px}
  #pm-step-mode .pm-mode{padding:12px 16px}
  #pm-step-mode .pm-mode-icon{width:44px;height:44px}
}
@media(min-width:769px) and (max-height:780px){
  #pm-step-mode .pm-mode-desc{font-size:12.5px;line-height:1.45}
  #pm-step-mode .pm-find-preview,#pm-step-mode .pm-vs-preview{margin-bottom:8px}
}
@media(min-width:769px) and (max-height:740px){
  #pm-step-mode .pm-find-preview,#pm-step-mode .pm-vs-preview{display:none}
}

/* ═══ v163: 10 уровней — трофеи в профиле ровно по 5 в ряд ═══ */
#page-profile .prof-trophies{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px}
#page-profile .ptr-item{padding:8px 2px 7px}
#page-profile .ptr-item img{width:34px;height:34px}
#page-profile .ptr-item .ptr-name{font-size:9.5px}
@media(min-width:560px){
  #page-profile .prof-trophies{gap:8px}
  #page-profile .ptr-item{padding:10px 4px 8px}
  #page-profile .ptr-item img{width:42px;height:42px}
  #page-profile .ptr-item .ptr-name{font-size:11px}
}

/* ═══ v164: в поиске нет крестика очистки — поиск закрывается нажатием мимо ═══ */
.nav-search .ns-clear,#search-clear{display:none!important}

/* ═══ v165: в комментариях к батлу нет кнопки смайликов — они есть на клавиатуре телефона ═══ */
.bc-emoji-btn,#bc-emoji-btn,.bc-emoji-picker,#bc-emoji-picker{display:none!important}

/* ═══ v165b: смайлики в комментариях — только на компьютере (мышь). На телефоне и
   планшете они есть на клавиатуре. Окно открывается вниз, поверх списка комментариев,
   непрозрачное — раньше через него просвечивала шкала батла с молнией ═══ */
@media(min-width:769px) and (hover:hover) and (pointer:fine){
  .bc-emoji-btn,#bc-emoji-btn{display:grid!important}
  .bc-compose{z-index:30}
  #bc-emoji-picker:not([hidden]){display:block!important;top:calc(100% + 8px);bottom:auto;z-index:60;
    background:#17111f;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 44px rgba(0,0,0,.6)}
  html[data-theme="light"] #bc-emoji-picker:not([hidden]){background:#fff;border-color:rgba(40,20,80,.12);box-shadow:0 18px 44px rgba(40,20,80,.18)}
}

/* ═══════════════════════════════════════════════════════════════════════
   v166: КОММЕНТАРИИ К БАТЛУ — как в привычных соцсетях: имя, текст,
   под ним «время · Ответить», справа сердечко; ответы — веткой с линией.
   ═══════════════════════════════════════════════════════════════════════ */
#battle-comments .bc-head{margin-bottom:14px}
#battle-comments .bc-title{font-size:17px;font-weight:800}
#battle-comments .bc-count{font-family:inherit;font-weight:800;font-size:12px;padding:2px 10px}
/* поле ввода — «пилюля», кнопка отправки — круглая со стрелкой */
#battle-comments .bc-compose{grid-template-columns:36px minmax(0,1fr) auto auto;gap:8px;padding:6px 6px 6px 8px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);margin-bottom:18px;transition:border-color .18s,box-shadow .18s}
#battle-comments .bc-compose:focus-within{border-color:rgba(255,95,178,.55);box-shadow:0 0 0 3px rgba(255,79,166,.12)}
#battle-comments .bc-compose .bc-avatar{width:36px;height:36px}
#battle-comments .bc-input{font-size:15px;padding:8px 4px;min-width:0}
#battle-comments .bc-send{position:relative;width:40px;height:40px;padding:0;border-radius:50%;font-size:0;color:transparent;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#ff4fa6,#a855f7);box-shadow:0 6px 16px rgba(236,72,153,.35)}
#battle-comments .bc-send::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13'/><path d='M22 2 15 22l-4-9-9-4z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13'/><path d='M22 2 15 22l-4-9-9-4z'/></svg>") center/contain no-repeat}
#battle-comments .bc-send:disabled{opacity:.5}
/* список */
#battle-comments .bc-list{gap:2px}
#battle-comments .bc-item{grid-template-columns:40px minmax(0,1fr) 34px;gap:10px;align-items:start;padding:9px 6px;border-radius:14px;transition:background .15s}
#battle-comments .bc-item:hover{background:rgba(255,255,255,.03)}
#battle-comments .bc-item > .bc-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0}
#battle-comments .bc-body{gap:2px}
#battle-comments .bc-meta{gap:4px;font-size:13px;line-height:1.3}
#battle-comments .bc-meta .bc-name{font-weight:700;color:var(--t2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#battle-comments .bc-verified{margin-left:0;width:13px;height:13px;flex-shrink:0}
#battle-comments .bc-text{font-size:15px;line-height:1.45;color:var(--t1);overflow-wrap:anywhere;white-space:pre-wrap}
#battle-comments .bc-actions{gap:14px;margin-top:3px;font-size:12.5px;color:var(--t3)}
#battle-comments .bc-time{font-size:12.5px;color:var(--t3)}
#battle-comments .bc-reply-btn{font-weight:700;color:var(--t2);padding:2px 0}
#battle-comments .bc-reply-btn:hover{color:var(--t1)}
#battle-comments .bc-likes{font-family:inherit;gap:1px;padding-top:4px;min-width:34px}
#battle-comments .bc-likes button{width:34px;height:30px;border-radius:10px;color:var(--t3)}
#battle-comments .bc-likes button svg{width:19px;height:19px}
#battle-comments .bc-likes button:active{transform:scale(1.25)}
#battle-comments .bc-likes .bc-liked{color:#ff3b6b}
#battle-comments .bc-likes .bc-liked svg{animation:bcPop .28s ease}
@keyframes bcPop{0%{transform:scale(.7)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
#battle-comments .bc-num{font-size:11.5px;font-weight:700;color:var(--t3);min-height:14px;line-height:14px}
/* ответы — веткой */
#battle-comments .bc-item.bc-reply{position:relative;margin-left:50px;padding-left:6px;border-left:none;grid-template-columns:30px minmax(0,1fr) 34px}
#battle-comments .bc-item.bc-reply > .bc-avatar{width:30px;height:30px;font-size:10px}
#battle-comments .bc-item.bc-reply::before{content:"";position:absolute;left:-26px;top:-6px;width:20px;height:30px;
  border-left:2px solid rgba(255,255,255,.12);border-bottom:2px solid rgba(255,255,255,.12);border-bottom-left-radius:12px}
#battle-comments .bc-item.bc-reply .bc-text{font-size:14.5px}
#battle-comments .bc-item.bc-highlight{background:rgba(230,61,111,.10)}
/* плашка «Ответ для @…» */
#battle-comments .bc-reply-bar{border-radius:12px;margin-bottom:8px}
/* пусто */
#battle-comments .bc-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 12px;font-size:13.5px;color:var(--t3);text-align:center}
#battle-comments .bc-empty span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:rgba(168,85,247,.12)}
@media(min-width:769px) and (hover:hover) and (pointer:fine){
  /* на компьютере — кнопка с текстом, как раньше */
  #battle-comments .bc-send{width:auto;height:40px;padding:0 20px;border-radius:999px;font-size:13.5px;font-weight:800;color:#fff}
  #battle-comments .bc-send::before{display:none}
}
@media(max-width:768px){
  .battle-comments{padding:18px 12px 16px;border-radius:20px}
  #battle-comments .bc-item{padding:8px 2px}
  #battle-comments .bc-item.bc-reply{margin-left:44px}
}
html[data-theme="light"] #battle-comments .bc-compose{background:#f6f4fa;border-color:rgba(40,20,80,.10)}
html[data-theme="light"] #battle-comments .bc-compose:focus-within{border-color:rgba(236,72,153,.5);box-shadow:0 0 0 3px rgba(236,72,153,.10)}
html[data-theme="light"] #battle-comments .bc-item:hover{background:rgba(40,20,80,.03)}
html[data-theme="light"] #battle-comments .bc-item.bc-reply::before{border-color:rgba(40,20,80,.14)}
html[data-theme="light"] #battle-comments .bc-meta .bc-name{color:#5b5670}
#battle-comments .bc-actions{align-items:center;margin-top:0}
#battle-comments .bc-reply-btn{min-height:26px!important;height:26px;padding:0 2px}
#battle-comments .bc-time{white-space:nowrap;flex-shrink:0}
#battle-comments .bc-likes button{min-height:0!important;min-width:0!important}
#battle-comments .bc-item > div.bc-avatar{display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,#a86bff,#5b3aa0);border:none}
#battle-comments .bc-item > div.bc-avatar.gd{background:linear-gradient(135deg,#ffb84d,#e07b00)}
html[data-theme="light"] #battle-comments .bc-item > div.bc-avatar{color:#fff}
/* v166: поле ввода — гибкая строка: ввод занимает всё свободное место при любом наборе кнопок */
#battle-comments .bc-compose{display:flex;align-items:center}
#battle-comments .bc-compose .bc-input{flex:1 1 auto;width:auto}
#battle-comments .bc-compose > .bc-avatar,
#battle-comments .bc-compose > .bc-emoji-btn,
#battle-comments .bc-compose > .bc-send{flex:0 0 auto}
@media(max-width:400px){
  #battle-comments .bc-compose{padding-left:16px}
}
/* светлая тема: аватар без фото остаётся цветным кружком с буквами, а не белым пятном */
html[data-theme="light"] #battle-comments .bc-item > div.bc-avatar{background:linear-gradient(135deg,#a86bff,#5b3aa0)!important;color:#fff!important;border:none!important}
html[data-theme="light"] #battle-comments .bc-item > div.bc-avatar.gd{background:linear-gradient(135deg,#ffb84d,#e07b00)!important}
html[data-theme="light"] #battle-comments .bc-compose > div.bc-avatar{background:linear-gradient(135deg,#a86bff,#5b3aa0)!important;color:#fff!important}
html[data-theme="light"] #battle-comments .bc-likes .bc-liked{color:#ff3b6b!important;background:transparent!important}
@media(max-width:768px){
  .battle-fixed-actions{transition:opacity .2s ease}
  .battle-fixed-actions.bc-over{opacity:0!important;pointer-events:none!important;visibility:hidden}
}
/* v166: плашка «Ответ для @…» — компактная строка, крестик нормального размера */
#battle-comments .bc-reply-bar{padding:6px 6px 6px 14px;border-radius:999px;min-height:0;font-size:13px}
#battle-comments .bc-reply-bar > span{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#battle-comments .bc-reply-bar button{flex:0 0 28px;width:28px!important;height:28px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--t2)}
#battle-comments .bc-reply-bar button svg{width:13px!important;height:13px!important;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
html[data-theme="light"] #battle-comments .bc-reply-bar button{background:rgba(40,20,80,.08)}
#battle-comments .bc-reply-bar{scroll-margin-top:96px}
/* v166: круглая кнопка отправки — ровный круг 44×44 (удобно попадать пальцем) */
@media(max-width:768px),(hover:none),(pointer:coarse){
  #battle-comments .bc-send{width:44px;height:44px;min-width:44px;min-height:44px}
}

/* ═══════════════════════════════════════════════════════════════════════
   v167: на телефоне при нажатии на поле ввода, кнопку или ссылку браузер
   на мгновение рисовал поверх серый/чёрный прямоугольник. Отключено везде.
   ═══════════════════════════════════════════════════════════════════════ */
html{-webkit-tap-highlight-color:rgba(0,0,0,0)}
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
input,textarea,select,button,a,label,[onclick],[role="button"],[contenteditable]{-webkit-tap-highlight-color:transparent!important}

/* ═══════════════════════════════════════════════════════════════════════
   v169: БАТЛ НА ТЕЛЕФОНЕ — цветное свечение вокруг фото обрезалось блоком
   и выглядело как розовый/синий квадрат позади фото. Свечение убрано:
   остаётся аккуратная цветная рамка и лёгкая тень.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .duel .duel-card:nth-child(1) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(236,72,153,.35),0 4px 10px rgba(0,0,0,.30)!important}
  .duel .duel-card:nth-child(3) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(59,130,246,.35),0 4px 10px rgba(0,0,0,.30)!important}
  .duel.duel-in-top .duel-card:nth-child(1) .duel-card-frame:not(.own-flash),
  .duel.duel-in-top .duel-card:nth-child(3) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(34,197,94,.40),0 4px 10px rgba(0,0,0,.30)!important}
  html[data-theme="light"] .duel .duel-card:nth-child(1) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(236,72,153,.30),0 4px 10px rgba(20,30,60,.12)!important}
  html[data-theme="light"] .duel .duel-card:nth-child(3) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(59,130,246,.30),0 4px 10px rgba(20,30,60,.12)!important}
  html[data-theme="light"] .duel.duel-in-top .duel-card:nth-child(1) .duel-card-frame:not(.own-flash),
  html[data-theme="light"] .duel.duel-in-top .duel-card:nth-child(3) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(34,197,94,.35),0 4px 10px rgba(20,30,60,.12)!important}
}
/* светлая тема: подпись под таймером была белой на белом */
html[data-theme="light"] .bmt-subtitle{color:#6b6780!important}
/* v169: свечение кнопок-подарков под фото обрезалось ровной линией — даём ему место снизу
   (высота страницы не меняется: добавленный отступ компенсирован) */
@media(max-width:768px){
  #page-battle .duel{padding-bottom:40px!important;margin-bottom:-20px!important}
}
/* v169: светлая тема — надпись «Следующий батл» была белой на светлом фоне */
html[data-theme="light"] .mobile-next-battle-btn{color:#7a2a8c!important;text-shadow:none!important}

/* ═══════════════════════════════════════════════════════════════════════
   v170: БАТЛ НА ТЕЛЕФОНЕ — тени и свечения обрезались по прямой линии
   (над фото — тень таймера, под фото — свечение кнопок), из-за чего были
   видны «полосы». Блоки больше ничего не обрезают; горизонтальную
   прокрутку по-прежнему не даёт сама страница батла.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  #page-battle .battle-inner{overflow:visible!important}
  #page-battle .duel{overflow:visible!important}
  #page-battle{overflow-x:hidden!important}
}
/* светлая тема: под таймером было тяжёлое чёрное пятно-тень — делаем мягкую */
html[data-theme="light"] .battle-mega-timer{box-shadow:0 0 14px rgba(255,45,146,.12),0 8px 18px rgba(60,30,110,.14)!important}

/* ═══════════════════════════════════════════════════════════════════════
   v171: НАСТРОЙКИ — страница и все её окна в едином аккуратном стиле.
   Страница: карточка аккаунта, строки с линейными иконками, отдельный
   блок «Аккаунт» (выход, удаление). Окна: иконка → заголовок →
   пояснение → поле → кнопки, одинаково во всех разделах.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── страница ── */
#page-settings .settings-page{max-width:560px;padding:18px 16px 120px}
#page-settings .settings-section{margin-bottom:22px}
#page-settings .settings-section-title{font-size:12px;font-weight:800;letter-spacing:.09em;color:var(--t3);padding:0 6px;margin-bottom:9px}
#page-settings .settings-card{border-radius:20px;border:1px solid var(--br);background:var(--bg1);box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden}
#page-settings .settings-item{position:relative;gap:14px;padding:13px 14px 13px 14px;min-height:64px;border-bottom:none;transition:background .15s}
#page-settings .settings-item + .settings-item::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--br)}
#page-settings .settings-item:hover{background:rgba(255,255,255,.035)}
#page-settings .settings-item:active{background:rgba(255,255,255,.06)}
#page-settings .settings-item:focus-visible{outline:2px solid rgba(236,72,153,.6);outline-offset:-2px}
#page-settings .si-icon{width:40px;height:40px;border-radius:13px;font-size:0;color:#fff;background:rgba(255,255,255,.08)}
#page-settings .si-icon svg{width:21px;height:21px;display:block}
#page-settings .si-icon.si-t-img{padding:0;overflow:hidden;background:none}
#page-settings .si-icon.si-t-img img{width:100%;height:100%;object-fit:cover;display:block}
#page-settings .si-t-pink{background:rgba(236,72,153,.16);color:#f472b6}
#page-settings .si-t-cyan{background:rgba(6,182,212,.16);color:#22d3ee}
#page-settings .si-t-green{background:rgba(34,197,94,.16);color:#4ade80}
#page-settings .si-t-violet{background:rgba(168,85,247,.16);color:#c084fc}
#page-settings .si-t-blue{background:rgba(59,130,246,.16);color:#60a5fa}
#page-settings .si-t-amber{background:rgba(245,158,11,.16);color:#fbbf24}
#page-settings .si-t-indigo{background:rgba(99,102,241,.18);color:#a5b4fc}
#page-settings .si-t-slate{background:rgba(148,163,184,.16);color:#cbd5e1}
#page-settings .si-t-red{background:rgba(239,68,68,.15);color:#f87171}
#page-settings .si-title{font-size:15px;font-weight:700;color:var(--t1);line-height:1.25}
#page-settings .si-sub{font-size:13px;color:var(--t3);margin-top:3px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
#page-settings .si-sub:empty{display:none}
#page-settings .si-danger .si-title{color:#f87171}
#page-settings .si-right{gap:8px}
/* стрелка — ровный шеврон вместо символа «›» */
#page-settings .si-arrow{display:inline-block;width:8px;height:8px;font-size:0;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);color:var(--t3);opacity:.7;margin-right:4px;flex-shrink:0}
#page-settings .si-danger .si-arrow{color:#f87171}
#page-settings .si-pill{font-size:12px;font-weight:700;line-height:1;padding:6px 10px;border-radius:999px;background:rgba(148,163,184,.14);color:var(--t2);white-space:nowrap}
#page-settings .si-pill:empty{display:none}
#page-settings .si-pill.on{background:rgba(34,197,94,.16);color:#4ade80}

/* карточка аккаунта */
#page-settings .set-me{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:22px;border-radius:22px;cursor:pointer;position:relative;overflow:hidden;
  border:1px solid rgba(236,72,153,.28);
  background:linear-gradient(135deg,rgba(236,72,153,.16),rgba(124,58,237,.14) 55%,rgba(59,130,246,.12));
  box-shadow:0 10px 28px rgba(0,0,0,.22);transition:transform .15s}
#page-settings .set-me:active{transform:scale(.99)}
#page-settings .set-me-ava{width:60px;height:60px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg3);border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 12px rgba(0,0,0,.25)}
#page-settings .set-me-info{flex:1;min-width:0}
#page-settings .set-me-name{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:800;color:var(--t1);line-height:1.2;min-width:0}
#page-settings .set-me-name > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#page-settings .set-me-ver{width:17px;height:17px;flex-shrink:0}
#page-settings .set-me-ver[hidden]{display:none}
#page-settings .set-me-user{font-size:13.5px;color:var(--t2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-settings .set-me-user:empty{display:none}
#page-settings .set-me-link{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--t2);white-space:nowrap;flex-shrink:0}
@media(max-width:380px){ #page-settings .set-me-link > span:first-child{display:none} }

/* светлая тема — страница */
html[data-theme="light"] #page-settings .settings-card{box-shadow:0 6px 20px rgba(40,20,80,.07)}
html[data-theme="light"] #page-settings .settings-item:hover{background:rgba(40,20,80,.03)}
html[data-theme="light"] #page-settings .settings-item:active{background:rgba(40,20,80,.06)}
html[data-theme="light"] #page-settings .si-t-pink{background:#fde7f1!important;color:#db2777}
html[data-theme="light"] #page-settings .si-t-cyan{background:#dff6fb!important;color:#0891b2}
html[data-theme="light"] #page-settings .si-t-green{background:#dcf7e6!important;color:#16a34a}
html[data-theme="light"] #page-settings .si-t-violet{background:#f0e6fe!important;color:#9333ea}
html[data-theme="light"] #page-settings .si-t-blue{background:#e2edff!important;color:#2563eb}
html[data-theme="light"] #page-settings .si-t-amber{background:#fdf0d5!important;color:#d97706}
html[data-theme="light"] #page-settings .si-t-indigo{background:#e6e8ff!important;color:#4f46e5}
html[data-theme="light"] #page-settings .si-t-slate{background:#eceef3!important;color:#475569}
html[data-theme="light"] #page-settings .si-t-red{background:#fde5e5!important;color:#dc2626}
html[data-theme="light"] #page-settings .si-danger .si-title{color:#dc2626}
html[data-theme="light"] #page-settings .si-danger .si-arrow{color:#dc2626}
html[data-theme="light"] #page-settings .si-pill{background:#eceef3;color:#475569}
html[data-theme="light"] #page-settings .si-pill.on{background:#dcf7e6;color:#15803d}
html[data-theme="light"] #page-settings .set-me{background:linear-gradient(135deg,#ffe9f3,#f1e8ff 55%,#e6efff)!important;border-color:rgba(236,72,153,.22);box-shadow:0 8px 22px rgba(120,60,160,.10)}
html[data-theme="light"] #page-settings .set-me-ava{border-color:#fff}

/* ── окна ── */
.vs-bg{position:fixed;inset:0;z-index:810;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(8,5,16,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:vsFade .18s ease}
@keyframes vsFade{from{opacity:0}to{opacity:1}}
@keyframes vsPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.vs-sheet{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg1);border:1px solid var(--br);border-radius:26px;padding:26px 22px 22px;box-sizing:border-box;
  box-shadow:0 24px 60px rgba(0,0,0,.5);animation:vsPop .22s cubic-bezier(.2,.9,.3,1.1);-webkit-overflow-scrolling:touch}
.vs-sheet.vs-tall{max-width:440px}
.vs-sheet .vs-x{position:absolute!important;top:14px;right:14px;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:50%;
  border:1px solid var(--br);background:var(--bg2);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2}
.vs-sheet .vs-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.vs-hero{text-align:center;margin-bottom:18px;padding:0 26px}
.vs-ico{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;margin:0 auto 14px;flex-shrink:0}
.vs-ico svg{width:30px;height:30px;display:block}
.vs-t-pink{background:rgba(236,72,153,.16);color:#f472b6}
.vs-t-cyan{background:rgba(6,182,212,.16);color:#22d3ee}
.vs-t-violet{background:rgba(168,85,247,.16);color:#c084fc}
.vs-t-blue{background:rgba(59,130,246,.16);color:#60a5fa}
.vs-t-amber{background:rgba(245,158,11,.16);color:#fbbf24}
.vs-t-indigo{background:rgba(99,102,241,.18);color:#a5b4fc}
.vs-t-green{background:rgba(34,197,94,.16);color:#4ade80}
.vs-t-slate{background:rgba(148,163,184,.16);color:#cbd5e1}
.vs-t-red{background:rgba(239,68,68,.15);color:#f87171}
.vs-sheet .vs-title{font-size:20px;font-weight:800;line-height:1.25;color:var(--t1);margin:0 0 6px;overflow-wrap:anywhere}
.vs-desc{font-size:14px;line-height:1.5;color:var(--t2);overflow-wrap:anywhere}
.vs-desc b{color:var(--t1);font-weight:700}
.vs-desc:empty{display:none}
.vs-label{font-size:13px;font-weight:700;color:var(--t2);margin:0 2px 8px}
.vs-label.vs-center{text-align:center;margin-top:16px}
.vs-hint{font-size:12.5px;line-height:1.45;color:var(--t3);text-align:center;margin:12px 0 0}
.vs-inwrap{position:relative;margin-bottom:12px}
.vs-sheet .vs-input{display:block;width:100%;height:54px;box-sizing:border-box;margin:0;padding:0 16px;border-radius:16px;border:1.5px solid var(--br);background:var(--bg2);
  color:var(--t1);font-family:'Inter',sans-serif;font-size:16px;font-weight:500;outline:none;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none}
.vs-sheet .vs-input::placeholder{color:var(--t3);font-weight:400}
.vs-sheet .vs-input:focus{border-color:#ec4899;box-shadow:0 0 0 4px rgba(236,72,153,.14)}
.vs-sheet .vs-input.vs-in-red:focus{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.14)}
.vs-inwrap .vs-eye ~ *, .vs-inwrap .vs-input{padding-right:52px}
.vs-eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:40px!important;height:40px!important;min-width:0!important;min-height:0!important;border:none;background:none;color:var(--t3);
  display:flex;align-items:center;justify-content:center;border-radius:12px;cursor:pointer;padding:0}
.vs-eye svg{width:21px;height:21px}
.vs-eye.on{color:#ec4899}
.vs-sheet .vs-code{text-align:center;height:62px;padding:0 8px!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:28px;font-weight:700;letter-spacing:10px;text-indent:10px;margin-bottom:12px}
.vs-sheet .vs-code::placeholder{letter-spacing:10px;opacity:.35}
.vs-sheet .vs-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;box-sizing:border-box;margin:0 0 10px;padding:12px 18px;border:none;border-radius:16px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:800;line-height:1.2;color:#fff;text-align:center;
  background:linear-gradient(135deg,#ff4fa6,#a855f7);box-shadow:0 10px 22px rgba(236,72,153,.28);transition:transform .15s,opacity .15s,box-shadow .15s}
.vs-sheet .vs-btn:last-child{margin-bottom:0}
.vs-sheet .vs-btn:hover{opacity:.94}
.vs-sheet .vs-btn:active{transform:scale(.985)}
.vs-sheet .vs-btn:disabled{background:var(--bg3);color:var(--t3);box-shadow:none;cursor:not-allowed;opacity:1;transform:none}
.vs-sheet .vs-btn.vs-b-blue{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 10px 22px rgba(59,130,246,.28)}
.vs-sheet .vs-btn.vs-b-indigo{background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 10px 22px rgba(99,102,241,.28)}
.vs-sheet .vs-btn.vs-b-red{background:linear-gradient(135deg,#f43f5e,#dc2626);box-shadow:0 10px 22px rgba(239,68,68,.26)}
.vs-sheet .vs-btn.vs-b-blue:disabled,.vs-sheet .vs-btn.vs-b-indigo:disabled,.vs-sheet .vs-btn.vs-b-red:disabled{background:var(--bg3);box-shadow:none}
.vs-sheet .vs-btn.vs-b-ghost{background:transparent;color:var(--t2);border:1.5px solid var(--br);box-shadow:none;font-weight:700;font-size:15px;min-height:50px}
.vs-sheet .vs-btn.vs-b-ghost:hover{background:var(--bg2);color:var(--t1)}
.vs-err{font-size:13px;line-height:1.4;color:#f87171;background:rgba(248,113,113,.10);border:1px solid rgba(248,113,113,.28);border-radius:12px;padding:10px 12px;margin:0 0 12px;text-align:left;overflow-wrap:anywhere}
/* верификация */
.vs-codebox{border-radius:18px;padding:14px 12px;margin-bottom:16px;text-align:center;background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(59,130,246,.05));border:1px dashed rgba(59,130,246,.45)}
.vs-codebox-lbl{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);margin-bottom:6px}
.vs-codebox-val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:32px;font-weight:800;letter-spacing:6px;color:#60a5fa;line-height:1.1;overflow-wrap:anywhere}
.vs-steps-title{font-size:14px;font-weight:800;color:var(--t1);margin-bottom:10px}
.vs-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.vs-steps li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--t2)}
.vs-steps li > span{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:#60a5fa;background:rgba(59,130,246,.16)}
.vs-steps li > div{flex:1;min-width:0;padding-top:2px}
.vs-drop{display:block;border:2px dashed var(--br);border-radius:18px;background:var(--bg2);padding:20px 14px;text-align:center;cursor:pointer;margin-bottom:12px;transition:border-color .18s,background .18s}
.vs-drop:hover{border-color:rgba(59,130,246,.6)}
.vs-drop-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;margin:0 auto 10px;background:rgba(59,130,246,.16);color:#60a5fa}
.vs-drop-ico svg{width:24px;height:24px}
.vs-drop-title{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:3px}
.vs-drop-hint{font-size:12.5px;color:var(--t3)}
.vs-drop-prev{max-width:100%;max-height:240px;border-radius:12px;margin:12px auto 0}
/* удаление аккаунта */
.vs-warn{border-radius:16px;padding:14px 16px;margin-bottom:16px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);font-size:13.5px;line-height:1.5;color:var(--t2)}
.vs-warn-h{font-weight:800;color:#f87171;margin-bottom:8px}
.vs-warn ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px}
.vs-warn li{position:relative;padding-left:16px}
.vs-warn li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:#f87171;opacity:.8}
.vs-warn-f{font-weight:800;color:#f87171}
/* 2FA */
.vs-qr{width:196px;height:196px;margin:0 auto 14px;padding:10px;box-sizing:border-box;border-radius:20px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.vs-qr img{width:100%;height:100%;display:block;image-rendering:pixelated;border-radius:6px}
.vs-key{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:6px 6px 6px 14px;border-radius:14px;background:var(--bg2);border:1px solid var(--br)}
.vs-key code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:700;letter-spacing:2px;color:#c084fc;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;text-align:left}
.vs-key-copy{flex:0 0 38px;width:38px!important;height:38px!important;min-width:0!important;min-height:0!important;border-radius:11px;border:none;background:rgba(168,85,247,.16);color:#c084fc;display:grid;place-items:center;cursor:pointer;padding:0}
.vs-key-copy svg{width:19px;height:19px}
.vs-key-copy:active{transform:scale(.94)}
.vs-status-on{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;margin:0 auto 16px;padding:8px 14px;border-radius:999px;background:rgba(34,197,94,.14);color:#4ade80;font-size:13.5px;font-weight:700}
.vs-status-on svg{width:17px;height:17px;flex-shrink:0;stroke-width:2.6}
/* заблокированные */
.vs-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding-right:40px;text-align:left}
.vs-head .vs-ico{width:48px;height:48px;border-radius:16px;margin:0}
.vs-head .vs-ico svg{width:24px;height:24px}
.vs-head .vs-title{font-size:18px;margin-bottom:2px}
.vs-head .vs-desc{font-size:13px}
.vs-sheet .vs-list{padding:0;margin:0 -8px;max-height:min(52vh,420px);overflow-y:auto}
.vs-sheet .vs-list .fl-item{padding:10px 8px;border-radius:14px;cursor:default}
.vs-sheet .vs-list .fl-info{min-width:0}
.vs-sheet .vs-list .fl-name,.vs-sheet .vs-list .fl-username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.vs-sheet .vs-list .fl-btn{flex-shrink:0;white-space:nowrap}
.vs-empty{text-align:center;padding:18px 10px 8px}
.vs-empty .vs-ico{margin-bottom:12px}
.vs-empty-t{font-size:16px;font-weight:800;color:var(--t1);margin-bottom:4px}
.vs-empty-d{font-size:13.5px;line-height:1.45;color:var(--t3)}

/* окно «Изменить …» — тот же вид */
#editModalBg{z-index:810;padding:18px!important;align-items:center!important;background:rgba(8,5,16,.62)!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}
#editModalBg .edit-modal.vs-sheet{max-width:420px!important;border-radius:26px!important;padding:26px 22px 22px!important;border:1px solid var(--br)!important;animation:vsPop .22s cubic-bezier(.2,.9,.3,1.1)}
#editModalBg .em-title{margin:0 0 6px!important}
#editModalBg .em-input{margin:0!important}
#editModalBg .em-cancel{margin-top:0!important}

/* выбор страны */
#country-picker-modal{padding:18px;background:rgba(8,5,16,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#country-picker-modal .cp-modal{max-width:420px;border-radius:26px;border:1px solid var(--br);overflow:hidden;animation:vsPop .22s cubic-bezier(.2,.9,.3,1.1)}
#country-picker-modal .cp-head{padding:18px 18px 12px 22px;border-bottom:none;font-size:19px;font-weight:800}
#country-picker-modal .cp-search{height:50px;box-sizing:border-box;margin:0 18px 10px;width:calc(100% - 36px);padding:0 16px 0 44px;border-radius:16px;border:1.5px solid var(--br);font-size:16px;
  background:var(--bg2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b9c' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.6-3.6'/></svg>") 14px center/20px no-repeat}
#country-picker-modal .cp-search:focus{border-color:#ec4899;box-shadow:0 0 0 4px rgba(236,72,153,.14)}
#country-picker-modal .cp-list{padding:0 10px 12px}
#country-picker-modal .cp-item{min-height:50px;padding:8px 12px;border-radius:14px;gap:14px;font-size:15.5px;font-weight:500;text-align:left}
#country-picker-modal .cp-item .cp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#country-picker-modal .cp-item.cur{background:rgba(236,72,153,.12);font-weight:700}
#country-picker-modal .cp-item.cur::after{content:"";flex:0 0 18px;height:18px;background:#ec4899;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>") center/contain no-repeat}

/* светлая тема — окна */
html[data-theme="light"] .vs-bg,
html[data-theme="light"] #editModalBg,
html[data-theme="light"] #country-picker-modal{background:rgba(30,20,50,.42)!important;border:none!important}
html[data-theme="light"] .vs-sheet{background:#fff!important;border-color:rgba(40,20,80,.08)!important;box-shadow:0 24px 60px rgba(40,20,80,.22)}
html[data-theme="light"] .vs-t-pink{background:#fde7f1!important;color:#db2777}
html[data-theme="light"] .vs-t-cyan{background:#dff6fb!important;color:#0891b2}
html[data-theme="light"] .vs-t-violet{background:#f0e6fe!important;color:#9333ea}
html[data-theme="light"] .vs-t-blue{background:#e2edff!important;color:#2563eb}
html[data-theme="light"] .vs-t-amber{background:#fdf0d5!important;color:#d97706}
html[data-theme="light"] .vs-t-indigo{background:#e6e8ff!important;color:#4f46e5}
html[data-theme="light"] .vs-t-green{background:#dcf7e6!important;color:#16a34a}
html[data-theme="light"] .vs-t-slate{background:#eceef3!important;color:#475569}
html[data-theme="light"] .vs-t-red{background:#fde5e5!important;color:#dc2626}
html[data-theme="light"] .vs-sheet .vs-input{background:#f6f4fa!important;border-color:rgba(40,20,80,.12)}
html[data-theme="light"] .vs-sheet .vs-input:focus{border-color:#ec4899;background:#fff!important}
html[data-theme="light"] .vs-sheet .vs-btn:not(.vs-b-ghost):not(:disabled){color:#fff!important}
html[data-theme="light"] .vs-sheet .vs-btn:disabled{background:#eceaf2!important;color:#a09bb0!important}
html[data-theme="light"] .vs-sheet .vs-btn.vs-b-ghost{background:transparent!important;border-color:rgba(40,20,80,.14)!important;color:#5b5670!important}
html[data-theme="light"] .vs-sheet .vs-x{background:#f3f1f8!important;border-color:rgba(40,20,80,.08)!important;color:#5b5670!important}
html[data-theme="light"] .vs-err{color:#dc2626;background:#fdecec;border-color:#f6c9c9}
html[data-theme="light"] .vs-codebox{background:#eef4ff!important;border-color:rgba(37,99,235,.4)}
html[data-theme="light"] .vs-codebox-val{color:#2563eb}
html[data-theme="light"] .vs-steps li > span{background:#e2edff;color:#2563eb}
html[data-theme="light"] .vs-drop{background:#f6f4fa!important;border-color:rgba(40,20,80,.16)!important}
html[data-theme="light"] .vs-drop-ico{background:#e2edff;color:#2563eb}
html[data-theme="light"] .vs-warn{background:#fdf0f0!important;border-color:#f6c9c9}
html[data-theme="light"] .vs-warn-h,html[data-theme="light"] .vs-warn-f{color:#dc2626}
html[data-theme="light"] .vs-key{background:#f6f4fa!important;border-color:rgba(40,20,80,.10)}
html[data-theme="light"] .vs-key code{color:#7e22ce;background:none!important}
html[data-theme="light"] .vs-key-copy{background:#f0e6fe;color:#9333ea}
html[data-theme="light"] .vs-status-on{background:#dcf7e6;color:#15803d}
html[data-theme="light"] .vs-qr{box-shadow:0 8px 22px rgba(40,20,80,.14);border:1px solid rgba(40,20,80,.08)}
html[data-theme="light"] #country-picker-modal .cp-modal{background:#fff!important}
html[data-theme="light"] #country-picker-modal .cp-search{background-color:#f6f4fa!important}
html[data-theme="light"] #country-picker-modal .cp-item.cur{background:#fde7f1!important}

@media(max-width:380px){
  .vs-sheet,#editModalBg .edit-modal.vs-sheet{padding:24px 16px 18px!important;border-radius:22px!important}
  .vs-hero{padding:0 18px}
  .vs-sheet .vs-code{font-size:24px;letter-spacing:7px;text-indent:7px}
  .vs-codebox-val{font-size:26px;letter-spacing:4px}
  .vs-qr{width:170px;height:170px}
}
/* v171: доводка */
@media(max-width:480px){ #page-settings .set-me-link > span:first-child{display:none} }
#country-picker-modal .cp-search{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b9c' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.6-3.6'/></svg>")!important;background-position:14px center!important;background-size:20px!important;background-repeat:no-repeat!important}
.vs-sheet .vs-list .fl-btn{height:36px;min-height:0!important;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;background:transparent!important;border:1.5px solid var(--br)!important;color:var(--t1)!important;box-shadow:none!important;transform:none!important}
.vs-sheet .vs-list .fl-btn:hover{border-color:#ec4899!important;color:#ec4899!important}
.vs-sheet .vs-list .fl-avatar{width:46px;height:46px}
html[data-theme="light"] .vs-sheet .vs-list .fl-btn{border-color:rgba(40,20,80,.16)!important;color:#2a2440!important}
#page-settings .si-info .si-pill{display:inline-block;margin-top:7px}
.vs-sheet .vs-title,.vs-desc{overflow-wrap:break-word;word-break:normal}
@media(max-width:420px){
  .vs-sheet .vs-list .fl-item{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-areas:"ava info" "ava btn";column-gap:12px;row-gap:6px;align-items:center}
  .vs-sheet .vs-list .fl-avatar{grid-area:ava;align-self:start}
  .vs-sheet .vs-list .fl-info{grid-area:info}
  .vs-sheet .vs-list .fl-btn{grid-area:btn;justify-self:start;height:32px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .vs-head .vs-title{font-size:17px}
}
#country-picker-modal .cp-search{flex:0 0 50px;min-height:50px}
.vs-head > div:last-child{min-width:0}
.vs-head .vs-title{overflow-wrap:anywhere}

/* ═══════════════════════════════════════════════════════════════════════
   v173: РЕЙТИНГ — рядом с победами показаны поражения (понятно, откуда
   взялся ELO) и строка-подсказка, по какому правилу расставлены места.
   ═══════════════════════════════════════════════════════════════════════ */
.rt-hint{max-width:520px;margin:10px auto 0;padding:0 16px;text-align:center;font-size:12.5px;line-height:1.45;color:var(--t3)}
.rt-hint:empty{display:none}
.rt-w,.rt-l{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.rt-l{color:#f87171}
.rt-l i{font-style:normal;font-weight:900;font-size:.9em}
.rt-step-w{display:flex;align-items:center;justify-content:center;gap:8px}
.rt-me-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html[data-theme="light"] .rt-l{color:#dc2626}
.rt-hint{margin-bottom:12px}

/* ═══════════════════════════════════════════════════════════════════════
   v174: РЕЙТИНГ — пустой период: пьедестал скрыт (был виден как жёлтая
   полоса), аккуратная заглушка; смена периода без мигания.
   ═══════════════════════════════════════════════════════════════════════ */
#page-rating .rt-pod:empty,#page-rating .rt-pod.rt-pod-empty{display:none!important}
#page-rating .rt-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:44px 20px 36px;margin-top:6px;border-radius:22px;border:1px dashed var(--br);color:var(--t3)}
#page-rating .rt-empty-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:rgba(168,85,247,.12)}
#page-rating .rt-empty-t{font-size:15px;line-height:1.45;color:var(--t2);max-width:320px}
#page-rating .rating-inner.rt-loading .podium,
#page-rating .rating-inner.rt-loading .rating-list{opacity:.45;pointer-events:none;transition:opacity .15s}
html[data-theme="light"] #page-rating .rt-empty{border-color:rgba(40,20,80,.14);background:rgba(255,255,255,.6)}
html[data-theme="light"] #page-rating .rt-empty-ico{background:#f0e6fe}
/* v174: светлая тема — название открытого раздела в верхнем меню было белым на светло-розовом */
html[data-theme="light"] .nav-tab.active{color:#b0186f!important}

/* ═══ v180: фото профиля — сетка, публикация, лайки и комментарии ═══ */
.ig-bg{position:fixed;inset:0;z-index:10460;display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s ease}
.ig-bg.open{opacity:1}
.ig-pv-bg{z-index:10480;background:rgba(5,5,10,.84)}
.ig-new-bg{z-index:10500}
.ig-bg svg{width:24px;height:24px;display:block;flex-shrink:0}
.ig-bg button{font-family:inherit;-webkit-appearance:none;appearance:none}
.ig-sheet,.ig-post{position:relative;display:flex;flex-direction:column;background:var(--bg1);color:var(--t1);
  border:1px solid var(--br);border-radius:22px;overflow:hidden;box-sizing:border-box;
  box-shadow:0 30px 80px rgba(0,0,0,.55);transform:translateY(14px) scale(.985);transition:transform .2s cubic-bezier(.2,.9,.3,1)}
.ig-bg.open .ig-sheet,.ig-bg.open .ig-post{transform:none}
.ig-gal{width:min(760px,94vw);height:min(86vh,820px)}
.ig-new{width:min(520px,94vw);max-height:92vh}
/* шапка */
.ig-bar{display:flex;align-items:center;gap:6px;min-height:54px;padding:0 8px;box-sizing:border-box;
  border-bottom:1px solid var(--br);flex-shrink:0;background:var(--bg1)}
.ig-bar-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;text-align:center}
.ig-bar-t b{font-size:16px;font-weight:800;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-bar-t span{font-size:12px;color:var(--t2);font-weight:600;font-variant-numeric:tabular-nums}
.ig-bar-t span:empty{display:none}
.ig-ib{width:42px;height:42px;min-width:42px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--t1);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .12s,opacity .15s}
.ig-ib:hover{background:var(--bg2)}
.ig-ib:active{transform:scale(.9)}
.ig-ib-sp{width:42px;flex-shrink:0}
.ig-ib-acc{color:var(--acc)}
.ig-ib-acc.ig-off{opacity:.38}
.ig-ib-s{width:30px;height:30px;min-width:30px}
.ig-ib-s svg{width:16px;height:16px}
.ig-ib .ig-only-m{display:none}
.ig-only-m{display:none!important}
.ig-txtbtn{border:0;background:transparent;color:var(--acc);font-size:15px;font-weight:800;padding:10px 10px;cursor:pointer;
  white-space:nowrap;flex-shrink:0;border-radius:10px;transition:opacity .15s,background .15s}
.ig-txtbtn:disabled{opacity:.38;cursor:default;background:transparent}
.ig-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:0;border-radius:14px;
  background:linear-gradient(135deg,#e63d6f,#a855f7);color:#fff;font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:0 10px 26px rgba(230,61,111,.28);transition:transform .12s,opacity .15s}
.ig-primary:active{transform:scale(.97)}
.ig-primary:disabled{opacity:.6;cursor:default}
/* сетка */
.ig-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px}
.ig-tile{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;margin:0;border:0;border-radius:0;overflow:hidden;
  background:var(--bg2);cursor:pointer;color:#fff}
.ig-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.ig-tile-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;
  background:rgba(0,0,0,.42);color:#fff;font-size:15px;font-weight:800;opacity:0;transition:opacity .15s;pointer-events:none}
.ig-tile-ov span{display:inline-flex;align-items:center;gap:6px}
.ig-tile-ov svg{width:19px;height:19px}
.ig-bg svg.ig-f{fill:currentColor;stroke:currentColor}
.ig-tile:active img{transform:scale(1.03)}
.ig-tile-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--t2);
  background:var(--bg2);box-shadow:inset 0 0 0 1.5px var(--br);transition:color .15s,background .15s}
.ig-tile-add:hover{color:var(--acc)}
.ig-tile-plus{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accG);color:var(--acc)}
.ig-tile-lbl{font-size:12px;font-weight:700;line-height:1.2;text-align:center;padding:0 6px;max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}
.ig-sk{cursor:default;background:linear-gradient(100deg,var(--bg2) 30%,var(--bg3) 50%,var(--bg2) 70%);background-size:220% 100%;animation:igSk 1.2s linear infinite}
@keyframes igSk{from{background-position:120% 0}to{background-position:-100% 0}}
.ig-empty{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:40px 26px;box-sizing:border-box;text-align:center}
.ig-empty-ico{width:84px;height:84px;border-radius:50%;border:2px solid var(--t1);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.ig-empty-ico svg{width:40px;height:40px;stroke-width:1.5}
.ig-empty-t{font-size:20px;font-weight:800;letter-spacing:-.01em}
.ig-empty-d{font-size:14px;color:var(--t2);line-height:1.45;max-width:300px;margin-bottom:8px}
/* публикация */
.ig-post{width:min(calc(min(86vh,720px) + 400px),96vw);height:min(86vh,720px);display:grid;
  grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto minmax(0,1fr) auto auto auto}
.ig-post-scroll{display:contents}
.ig-post-head{grid-column:2;grid-row:1;padding:0 6px 0 14px}
.ig-media{grid-column:1;grid-row:1/-1;position:relative;background:#000;display:flex;align-items:center;justify-content:center;
  overflow:hidden;min-height:0;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.ig-img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.ig-thread{grid-column:2;grid-row:2;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 14px;touch-action:pan-y}
.ig-actions{grid-column:2;grid-row:3;display:flex;align-items:center;gap:6px;padding:6px 8px;border-top:1px solid var(--br)}
.ig-reply-bar{grid-column:2;grid-row:4;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 6px 14px;
  background:var(--bg2);font-size:13px;color:var(--t2);min-width:0}
.ig-reply-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-reply-bar b{color:var(--t1)}
.ig-input-row{grid-column:2;grid-row:5;display:flex;align-items:center;gap:10px;padding:8px 6px 8px 12px;border-top:1px solid var(--br);background:var(--bg1)}
.ig-input-row input{flex:1;min-width:0;height:40px;padding:0 4px!important;border:0!important;outline:0!important;box-shadow:none!important;
  background:transparent!important;color:var(--t1)!important;font-size:16px!important;font-family:inherit;border-radius:0!important;text-overflow:ellipsis}
.ig-input-row input::placeholder{text-overflow:ellipsis}
.ig-input-row .ig-txtbtn{padding:10px 8px}
.ig-me-ava,.ig-author-ava,.ig-c-ava{border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg3)}
.ig-me-ava,.ig-author-ava{width:34px;height:34px}
.ig-author{flex:1;min-width:0;display:flex;align-items:center;gap:10px;cursor:pointer}
.ig-author-n{min-width:0;display:flex;align-items:center;gap:5px;font-size:15px}
.ig-author-n b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-ver{width:15px;height:15px;flex-shrink:0;vertical-align:-2px}
.ig-menu-wrap{position:relative;flex-shrink:0}
.ig-menu{display:none;position:absolute;right:0;top:46px;z-index:5;min-width:220px;padding:6px;border-radius:16px;
  background:var(--bg1);border:1px solid var(--br);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.ig-menu.open{display:block;animation:igMenu .14s ease}
@keyframes igMenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ig-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px;border:0;border-radius:11px;background:transparent;
  color:var(--t1);font-size:15px;font-weight:600;text-align:left;cursor:pointer}
.ig-menu button:hover{background:var(--bg2)}
.ig-menu button svg{width:20px;height:20px}
.ig-menu button.ig-danger{color:#ff4d5e}
.ig-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.88);color:#15121f;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .12s,background .15s;z-index:2}
.ig-nav svg{width:18px;height:18px;stroke-width:2.4}
.ig-nav:hover{background:#fff}
.ig-nav:active{transform:translateY(-50%) scale(.9)}
.ig-nav-prev{left:12px}.ig-nav-next{right:12px}
.ig-pos{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}
.ig-burst{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;color:#fff;opacity:0;pointer-events:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.ig-burst svg{width:96px;height:96px;fill:#fff;stroke:#fff}
.ig-burst.go{animation:igBurst .8s ease}
@keyframes igBurst{0%{opacity:0;transform:scale(.3)}18%{opacity:.96;transform:scale(1.15)}34%{transform:scale(.95)}48%,70%{opacity:.96;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
.ig-act{display:inline-flex;align-items:center;gap:7px;min-width:44px;height:44px;padding:0 8px;border:0;border-radius:12px;background:transparent;
  color:var(--t1);cursor:pointer;transition:transform .12s}
.ig-act svg{width:26px;height:26px}
.ig-act b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.ig-act:active{transform:scale(.92)}
.ig-like.on{color:#ff3040}
.ig-like.on svg{fill:#ff3040;stroke:#ff3040}
.ig-like.on b{color:var(--t1)}
.ig-like.pop svg{animation:igPop .34s cubic-bezier(.2,.9,.3,1.4)}
@keyframes igPop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
.ig-time{margin-left:auto;padding-right:8px;font-size:12px;color:var(--t3);white-space:nowrap}
/* комментарии */
.ig-c{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;margin:0 -6px;border-radius:12px}
.ig-c-ava{width:34px;height:34px}
.ig-c-main{flex:1;min-width:0}
.ig-c-text{font-size:14px;line-height:1.42;color:var(--t1);overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.ig-c-name{font-weight:800;cursor:pointer}
.ig-c-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:4px;font-size:12px;color:var(--t3);font-weight:600}
.ig-c-meta button{border:0;background:transparent;padding:4px 0;margin:-4px 0;color:var(--t2);font-size:12px;font-weight:800;cursor:pointer}
.ig-c-meta button.ig-c-del{color:#ff4d5e}
.ig-c-lk{display:inline-flex;align-items:center;gap:4px}
.ig-c-lk[hidden]{display:none}
.ig-c-lk svg{width:11px;height:11px;color:#ff3040}
.ig-c-lk i{font-style:normal;font-variant-numeric:tabular-nums}
.ig-c-like{width:36px;height:36px;min-width:36px;margin:-2px -6px 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--t3);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,color .15s}
.ig-c-like svg{width:15px;height:15px}
.ig-c-like:active{transform:scale(.85)}
.ig-c-like.on{color:#ff3040}
.ig-c-like.on svg{fill:#ff3040}
.ig-c-reply{margin-left:44px}
.ig-c-reply .ig-c-ava{width:26px;height:26px}
.ig-c.replying{background:var(--accG)}
.ig-cap{padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--br);border-radius:0}
#pv-caption:empty{display:none}
.ig-nocmt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:34px 16px;text-align:center}
.ig-nocmt b{font-size:17px;font-weight:800}
.ig-nocmt span{font-size:13px;color:var(--t2)}
.ig-loading{display:flex;justify-content:center;padding:30px 0}
.ig-loading i{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--br);border-top-color:var(--acc);animation:igSpin .7s linear infinite}
@keyframes igSpin{to{transform:rotate(360deg)}}
/* новая публикация */
.ig-new-s1,.ig-new-s2{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ig-new-s1[hidden],.ig-new-s2[hidden]{display:none!important}
.ig-stage{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto;background:#000;overflow:hidden;touch-action:none}
.ig-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.ig-stage-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.55) calc(66.666% - .5px),rgba(255,255,255,.55) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
    linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.55) calc(66.666% - .5px),rgba(255,255,255,.55) calc(66.666% + .5px),transparent calc(66.666% + .5px))}
.ig-zoom{display:flex;align-items:center;gap:12px;padding:16px 20px 6px;color:var(--t2);font-size:20px;font-weight:700;line-height:1}
.ig-zoom input[type=range]{flex:1;min-width:0;accent-color:var(--acc);height:28px;margin:0;touch-action:pan-x}
.ig-hint{padding:4px 20px 18px;font-size:13px;color:var(--t2);text-align:center;line-height:1.4}
.ig-new-s2{padding:16px}
.ig-new-row{display:flex;gap:12px;align-items:flex-start}
.ig-new-row img{width:76px;height:76px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--bg2)}
.ig-new-row textarea,.ig-cap-ta{flex:1;min-width:0;min-height:120px;resize:none;font-family:inherit;font-size:16px!important;line-height:1.4;color:var(--t1)}
.ig-new-row textarea{padding:4px 0!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important}
.ig-cap-ta{display:block;width:100%;box-sizing:border-box;padding:12px 14px;margin-bottom:12px}
.ig-new-cnt{margin:8px 0 16px;text-align:right;font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.ig-new-s2 .ig-primary{width:100%}
.ig-new-bg.busy .ig-sheet{pointer-events:none}
.ig-new-bg.busy .ig-new-row{opacity:.6}
@media (hover:hover){
  .ig-tile:hover .ig-tile-ov.has{opacity:1}
  .ig-txtbtn:not(:disabled):hover{background:var(--accG)}
}
@media (hover:none){
  .ig-nav{display:none}
}
/* планшет и телефон: всё на весь экран, как в приложении */
@media (max-width:900px){
  .ig-bg{align-items:stretch;justify-content:stretch;background:var(--bg1);-webkit-backdrop-filter:none;backdrop-filter:none}
  .ig-sheet,.ig-post{width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;transform:translateY(18px)}
  .ig-only-m{display:inline-flex!important}
  svg.ig-only-m{display:block!important}
  .ig-only-d{display:none!important}
  .ig-bar{padding-top:env(safe-area-inset-top,0px);min-height:calc(52px + env(safe-area-inset-top,0px))}
  .ig-grid{gap:2px;padding:0}
  .ig-post{display:flex;flex-direction:column}
  .ig-post-head{padding:0 4px;padding-top:env(safe-area-inset-top,0px)}
  .ig-post-scroll{display:block;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  .ig-media{width:100%;aspect-ratio:1/1;max-height:62vh}
  .ig-thread{overflow:visible;padding:4px 14px 18px}
  .ig-actions{border-top:0;padding:4px 6px 0}
  .ig-input-row{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .ig-new-s2 .ig-primary{position:sticky;bottom:0}
  .ig-gal .ig-body{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media (min-width:901px){
  .ig-ib svg.ig-only-m{display:none!important}
}
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .ig-media{max-height:none;aspect-ratio:auto;height:70vh}
  .ig-stage{max-width:min(520px,60vh)}
}
@media (max-width:360px){
  .ig-c-reply{margin-left:30px}
  .ig-tile-lbl{font-size:11px}
  .ig-tile-plus{width:38px;height:38px}
  .ig-act{padding:0 6px}
}
html[data-theme="light"] .ig-bg{background:rgba(30,25,50,.5)}
html[data-theme="light"] .ig-pv-bg{background:rgba(30,25,50,.62)}
html[data-theme="light"] .ig-sheet,html[data-theme="light"] .ig-post{box-shadow:0 30px 80px rgba(30,20,60,.25)}
html[data-theme="light"] .ig-menu{box-shadow:0 18px 44px rgba(30,20,60,.18)}
@media (max-width:900px){
  html[data-theme="light"] .ig-bg{background:var(--bg1)}
}
@media (prefers-reduced-motion:reduce){
  .ig-bg,.ig-sheet,.ig-post,.ig-tile img{transition:none}
  .ig-sk,.ig-burst.go,.ig-like.pop svg{animation:none}
}

/* ═══ v181: фото листаются пальцем, комментарии — шторка снизу (как в Instagram) ═══ */
.ig-post2 .ig-media{touch-action:manipulation}
.ig-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.ig-track::-webkit-scrollbar{display:none;width:0;height:0}
.ig-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.ig-slide .ig-img{pointer-events:none}
.ig-nav[hidden],.ig-pos[hidden]{display:none!important}
.ig-post2 .ig-burst,.ig-post2 .ig-pos{z-index:2}
/* комментарий: имя и время, текст, «Ответить»; справа сердце и число под ним */
.ig-c2{gap:12px;padding:10px 6px}
.ig-c-top{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:1.3}
.ig-c-top .ig-c-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.ig-c-top .ig-ver{width:13px;height:13px}
.ig-c-time{flex-shrink:0;color:var(--t3);font-size:12px;font-weight:600;white-space:nowrap}
.ig-c2 .ig-c-text{margin-top:2px}
.ig-c2 .ig-c-meta{margin-top:6px;gap:4px 16px}
.ig-c2 .ig-c-meta:empty{display:none}
.ig-c-side{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:36px;margin:-2px -6px 0 0}
.ig-c-side .ig-c-like{margin:0}
.ig-c-side .ig-c-like svg{width:17px;height:17px}
.ig-c-side .ig-c-lk{margin-top:-6px;font-size:11px;font-weight:700;color:var(--t2);line-height:1.2}
.ig-c-more{display:flex;align-items:center;gap:12px;margin:0 0 4px 46px;padding:8px 0;border:0;background:transparent;color:var(--t2);
  font-size:12px;font-weight:800;cursor:pointer;text-align:left;max-width:calc(100% - 46px)}
.ig-c-more i{width:26px;height:1px;background:var(--t3);flex-shrink:0}
.ig-c-more span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-c-reps{animation:igReps .18s ease}
@keyframes igReps{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ig-c2.fp-c-flash{background:var(--accG)}
.ig-viewall{display:none;width:100%;padding:8px 0;border:0;background:transparent;color:var(--t2);font-size:14px;font-weight:600;
  text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pv-cs-cap:empty{display:none}
/* компьютер: комментарии — колонка справа от фото */
@media (min-width:901px){
  .ig-post2 .ig-thread{display:none}
  .ig-post2 .ig-cs{display:contents}
  .ig-post2 .ig-cs-head,.ig-post2 .ig-cs-dim{display:none}
  .ig-post2 .ig-cs-list{grid-column:2;grid-row:2;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px}
}
/* телефон и планшет: шторка снизу */
@media (max-width:900px){
  .ig-post2 .ig-thread{padding:2px 14px 22px}
  .ig-post2 .ig-thread .ig-cap{border-bottom:0;margin-bottom:0;padding-bottom:2px}
  .ig-post2 .ig-viewall{display:block}
  .ig-post2 .ig-cs-dim{position:absolute;inset:0;z-index:7;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s ease}
  .ig-post2 .ig-cs-dim.open{opacity:1;pointer-events:auto}
  .ig-post2 .ig-cs{position:absolute;left:0;right:0;bottom:0;z-index:8;height:72%;max-height:calc(100% - 56px - env(safe-area-inset-top,0px));
    display:flex;flex-direction:column;background:var(--bg1);border-radius:20px 20px 0 0;box-shadow:0 -14px 44px rgba(0,0,0,.5);
    transform:translateY(103%);visibility:hidden;will-change:transform;
    transition:transform .3s cubic-bezier(.2,.9,.3,1),height .22s ease,visibility 0s linear .3s}
  .ig-post2 .ig-cs.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.9,.3,1),height .22s ease,visibility 0s}
  .ig-post2 .ig-cs.full{height:100%;max-height:calc(100% - 10px - env(safe-area-inset-top,0px))}
  .ig-kb .ig-post2 .ig-cs{height:100%;max-height:calc(100% - 8px)}
  .ig-cs-head{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 16px 12px;
    border-bottom:1px solid var(--br);touch-action:none;-webkit-user-select:none;user-select:none}
  .ig-cs-grab{display:block;width:40px;height:4px;border-radius:4px;background:var(--t3);opacity:.7}
  .ig-cs-head b{font-size:15px;font-weight:800;letter-spacing:-.01em}
  .ig-post2 .ig-cs-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 14px 10px;touch-action:pan-y}
  .ig-post2 #pv-cs-cap{display:none}
  .ig-post2 .ig-cs .ig-reply-bar{flex-shrink:0}
  .ig-post2 .ig-cs .ig-input-row{flex-shrink:0}
}
@media (max-width:360px){
  .ig-c-more{margin-left:40px;max-width:calc(100% - 40px)}
}
html[data-theme="light"] .ig-post2 .ig-cs{box-shadow:0 -14px 44px rgba(30,20,60,.22)}
html[data-theme="light"] .ig-post2 .ig-cs-dim{background:rgba(20,15,40,.42)}
@media (prefers-reduced-motion:reduce){
  .ig-post2 .ig-cs,.ig-post2 .ig-cs-dim{transition:none}
  .ig-c-reps{animation:none}
}
/* v181: строки комментария компактные (общая высота кнопок 44px здесь не нужна — область нажатия держим отступами) */
.ig-bg .ig-c-top .ig-c-name{min-height:0}
.ig-bg .ig-c2 .ig-c-meta button{min-height:0;padding:9px 0;margin:-9px 0}
.ig-bg .ig-c-more{min-height:0;padding:10px 0}
.ig-bg .ig-c-side .ig-c-like{min-height:0}
.ig-bg .ig-cap .ig-c-name{min-height:0}

/* ═══ v184: «О себе» в профиле ═══ */
#page-profile .prof-bio{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word;cursor:pointer;min-height:0;color:var(--t1)}
#page-profile .prof-bio.prof-bio-empty{color:var(--acc);font-weight:700;font-size:13px}
.pp-bio{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word;margin-top:6px}
#page-settings .si-bio-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bio-ta{display:block;width:100%;box-sizing:border-box;min-height:118px;resize:none;padding:12px 14px;font-family:inherit;font-size:16px!important;line-height:1.45;margin-bottom:6px;text-align:left}
.bio-cnt{text-align:right;font-size:12px;color:var(--t3);margin:0 2px 12px;font-variant-numeric:tabular-nums}
#bio-err:empty{display:none}
/* v184: «О себе» стоит сразу под ником */
#page-profile .prof-bio{margin:10px 6px 2px;font-size:14px;line-height:1.5}

/* ═══ v186: окно чужого профиля — обложка, аватар, описание, аккуратные блоки ═══ */
.pp-modal.pp2{padding:0;max-width:460px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg1)!important;border:1px solid var(--br)!important;border-radius:24px;color:var(--t1);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.pp2-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pp-modal.pp2 .pp2-close{position:absolute;top:12px;right:12px;z-index:6;width:36px;height:36px;min-width:36px;min-height:0;padding:0;border:0!important;border-radius:50%;
  background:rgba(10,8,18,.55)!important;color:#fff!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;transform:none}
.pp-modal.pp2 .pp2-close:hover{background:rgba(10,8,18,.75)!important;transform:none}
.pp-modal.pp2 .pp2-close svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round}
.pp2-cover{position:relative;height:138px;overflow:hidden;
  background:radial-gradient(120% 140% at 15% 20%,rgba(230,61,111,.75),transparent 60%),radial-gradient(120% 140% at 90% 90%,rgba(59,130,246,.6),transparent 60%),linear-gradient(135deg,#2a1036,#12172e)}
.pp2-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;cursor:zoom-in}
.pp2-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(0,0,0,.28),transparent);pointer-events:none}
.pp2-body{padding:0 20px 22px}
.pp2-top{display:flex;align-items:flex-end;gap:14px;margin-top:-46px;position:relative;z-index:1}
.pp2-ava{width:96px;height:96px;min-width:96px;border-radius:50%;object-fit:cover;display:block;box-sizing:border-box;border:4px solid var(--bg1);background:var(--bg3);
  box-shadow:0 0 0 2px rgba(230,61,111,.55),0 10px 26px rgba(0,0,0,.35)}
img.pp2-ava{cursor:zoom-in}
.pp2-ava-fb{display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;color:#fff;background:linear-gradient(135deg,#e63d6f,#a855f7)}
.pp2-counts{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding-bottom:2px}
.pp2-counts button{min-width:0;min-height:0;padding:6px 2px;border:0;border-radius:12px;background:transparent;color:var(--t1);font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;transition:background .15s}
.pp2-counts button:hover{background:var(--bg2)}
.pp2-counts b{font-size:18px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.pp2-counts span{max-width:100%;font-size:12px;font-weight:600;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp2-name{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.2;min-width:0}
.pp2-name span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp2-ver{width:19px;height:19px;flex-shrink:0}
.pp2-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:3px;font-size:14px;color:var(--t2);font-weight:600}
.pp2-un{color:var(--t2)}
.pp2-ct{display:inline-flex;align-items:center;gap:4px;color:var(--t2)}
.pp2-un + .pp2-ct::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--t3);margin-right:6px}
.pp-modal.pp2 .pp2-bio{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--t1)!important;white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}
.pp2-link{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin-top:10px;padding:6px 12px 6px 7px;border-radius:999px;background:var(--bg2);border:1px solid var(--br);
  color:var(--t1);font-size:13.5px;font-weight:700;text-decoration:none;transition:border-color .15s,transform .12s}
.pp2-link:hover{border-color:var(--acc)}
.pp2-link:active{transform:scale(.97)}
.pp2-link img{width:20px;height:20px;border-radius:6px;flex-shrink:0}
.pp2-link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-modal.pp2 .pp2-actions{display:flex;gap:10px;margin:16px 0 0}
.pp-modal.pp2 .pp2-actions .pp-follow-btn{flex:1;min-width:0}
.pp2-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.pp2-stats.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp2-stat{min-width:0;padding:12px 4px 10px;border-radius:16px;background:var(--bg2);border:1px solid var(--br);text-align:center}
.pp2-stat b{display:block;font-size:19px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#f0528a,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#e63d6f}
.pp2-stat span{display:block;margin-top:3px;font-size:11.5px;font-weight:700;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp2-lvl{margin-top:10px;padding:14px 14px 12px;border-radius:18px;background:var(--bg2);border:1px solid var(--br)}
.pp2-lvl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pp2-lvl-name{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:15.5px;font-weight:800}
.pp2-lvl-name img{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.pp2-lvl-score{flex-shrink:0;padding:3px 10px;border-radius:999px;background:var(--accG);color:var(--acc);font-size:12px;font-weight:800;white-space:nowrap}
.pp2-lvl-bar{height:7px;margin-top:11px;border-radius:99px;background:var(--bg3);overflow:hidden}
.pp2-lvl-bar i{display:block;height:100%;min-width:7px;border-radius:99px;background:linear-gradient(90deg,#e63d6f,#a855f7)}
.pp2-lvl-sub{margin-top:7px;font-size:12px;font-weight:600;color:var(--t2);text-align:right}
.pp2-trs{display:flex;justify-content:space-between;align-items:center;gap:2px;margin-top:12px;padding-top:12px;border-top:1px solid var(--br)}
.pp2-tr{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;filter:grayscale(1);opacity:.32}
.pp2-tr.on{filter:none;opacity:1}
.pp2-tr img{width:100%;height:100%;object-fit:contain}
.pp-modal.pp2 .gift-showcase.pp2-gifts{margin:10px 0 0;border-radius:18px;background:var(--bg2);border:1px solid var(--br)}
@media (max-width:560px){
  .pp-modal-bg{padding:12px}
  .pp-modal.pp2{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:22px}
  .pp2-cover{height:118px}
  .pp2-body{padding:0 16px 18px}
  .pp2-top{gap:10px;margin-top:-42px}
  .pp2-ava{width:88px;height:88px;min-width:88px}
  .pp2-counts b{font-size:17px}
  .pp2-counts span{font-size:11.5px}
  .pp2-stats.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:350px){
  .pp2-ava{width:76px;height:76px;min-width:76px}
  .pp2-top{margin-top:-38px;gap:6px}
  .pp2-counts span{font-size:10.5px}
  .pp2-name{font-size:19px}
  .pp2-tr{width:22px;height:22px;font-size:15px}
}
html[data-theme="light"] .pp-modal.pp2{box-shadow:0 30px 80px rgba(30,20,60,.25)}
html[data-theme="light"] .pp2-stat b{background:linear-gradient(135deg,#e63d6f,#9333ea);-webkit-background-clip:text;background-clip:text}
/* v186: мелочи окна профиля */
.pp2-lvl-ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;font-size:19px;line-height:1}
.pp2-lvl-name > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp2-counts{margin-bottom:-6px}
@media (max-width:350px){ .pp2-counts span{font-size:10px;letter-spacing:-.2px} .pp2-counts button{padding:6px 0} }

/* ═══ v189: сообщения — поле ввода как в Telegram, красивые меню и удаление ═══ */
.dm-compose{gap:8px;padding:8px 12px;align-items:center}
.dm-input-wrap{min-height:46px;border-radius:23px;background:var(--bg2);border:1px solid var(--br);transition:border-color .15s,box-shadow .15s}
.dm-input-wrap:focus-within{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.dm-input-wrap .dm-input{height:44px;padding:0 50px 0 18px;border:0!important;border-radius:23px;background:transparent!important;box-shadow:none!important;
  font-size:16px;color:var(--t1)}
.dm-input-wrap .dm-input::placeholder{color:var(--t3)}
.dm-emoji-btn{right:5px;width:36px;height:36px;min-height:0;border-radius:50%;color:var(--t3)}
.dm-emoji-btn svg{width:24px;height:24px}
.dm-send.dm-send-tg{width:46px;height:46px;min-width:46px;min-height:0;padding:0;border-radius:50%;background:linear-gradient(135deg,#9b7bf3,#7c5cf0);color:#fff;
  box-shadow:0 6px 16px rgba(124,92,240,.35);transition:transform .12s,box-shadow .2s,filter .15s}
.dm-send.dm-send-tg svg{width:22px;height:22px;margin-left:2px}
.dm-send.dm-send-tg:hover{transform:none;filter:brightness(1.08);box-shadow:0 8px 20px rgba(124,92,240,.45)}
.dm-send.dm-send-tg:active{transform:scale(.92)}
@media (max-width:760px){
  .dm-compose{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
}
/* значки пунктов */
.dsb-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border-radius:11px;background:var(--bg3);color:var(--t2)}
.dsb-ico svg{width:19px;height:19px;display:block}
.dsb-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dsb-t-blue{background:rgba(59,130,246,.16);color:#60a5fa}
.dsb-t-pink{background:rgba(236,72,153,.16);color:#f472b6}
.dsb-t-violet{background:rgba(168,85,247,.16);color:#c084fc}
.dsb-t-amber{background:rgba(245,158,11,.16);color:#fbbf24}
.dsb-t-green{background:rgba(34,197,94,.16);color:#4ade80}
.dsb-t-red,.dm-sheet-btn.danger .dsb-ico.dsb-t-red{background:rgba(239,68,68,.15);color:#f87171}
html[data-theme="light"] .dsb-t-blue{background:#e3eefe;color:#2563eb}
html[data-theme="light"] .dsb-t-pink{background:#fde6f1;color:#db2777}
html[data-theme="light"] .dsb-t-violet{background:#f0e6fe;color:#9333ea}
html[data-theme="light"] .dsb-t-amber{background:#fdf0d5;color:#d97706}
html[data-theme="light"] .dsb-t-green{background:#dcfce7;color:#16a34a}
html[data-theme="light"] .dsb-t-red,html[data-theme="light"] .dm-sheet-btn.danger .dsb-ico.dsb-t-red{background:#fde8e8;color:#dc2626}
html[data-theme="light"] .dm-sheet-btn.danger{color:#dc2626}
/* шторка снизу */
.dm-sheet-box.dm-sheet-v2{padding:6px 10px 10px;border-radius:26px;margin-bottom:calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -14px 50px rgba(0,0,0,.45)}
.dm-sheet-grab{display:block;width:38px;height:4px;border-radius:4px;background:var(--t3);opacity:.55;margin:4px auto 10px}
.dm-sheet-v2 .dm-sheet-group{background:var(--bg2);border:1px solid var(--br);border-radius:18px;overflow:hidden}
.dm-sheet-v2 .dm-sheet-group .dm-sheet-btn{border-radius:0;padding:11px 14px;min-height:58px;gap:13px;font-size:15.5px}
.dm-sheet-v2 .dm-sheet-group .dm-sheet-btn + .dm-sheet-btn{border-top:1px solid var(--br)}
.dm-sheet-v2 .dm-sheet-group .dm-sheet-btn:active{background:var(--bg3)}
.dm-sheet-v2 .dm-sheet-btn.cancel{margin-top:8px;min-height:52px;border-radius:16px;font-size:15.5px;color:var(--t1);background:var(--bg2);border:1px solid var(--br)}
.dm-sheet-v2 .dm-sheet-preview{margin:0 2px 10px;padding:10px 14px;border:0;border-left:3px solid var(--acc);border-radius:4px 12px 12px 4px;background:var(--bg2);
  font-size:14px;line-height:1.4;color:var(--t1);overflow-wrap:anywhere}
html[data-theme="light"] .dm-sheet-box.dm-sheet-v2{box-shadow:0 -14px 50px rgba(30,20,60,.2)}
/* выпадающее меню на компьютере */
.dm-popup-menu{min-width:240px;border-radius:16px;padding:6px}
.dm-popup-menu .dm-sheet-btn{gap:11px;padding:8px 10px;border-radius:11px;font-weight:600}
.dm-popup-menu .dm-sheet-btn:hover{background:var(--bg2)}
.dm-popup-menu .dsb-ico{width:30px;height:30px;border-radius:9px}
.dm-popup-menu .dsb-ico svg{width:17px;height:17px}
/* панель выбора сообщений */
.dm-select-bar{gap:8px;padding:10px 12px;background:var(--bg1)}
.dm-select-bar .dsb-count{font-size:14px;font-weight:700;color:var(--t1)}
.dm-select-bar .dsb-del{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;border-radius:21px;font-size:14px;
  background:linear-gradient(135deg,#f0524f,#dc2626);box-shadow:0 6px 16px rgba(239,68,68,.3);transition:opacity .15s,transform .12s}
.dm-select-bar .dsb-del svg{width:17px;height:17px}
.dm-select-bar .dsb-del:disabled{opacity:.4;box-shadow:none}
.dm-select-bar .dsb-del:not(:disabled):active{transform:scale(.96)}
.dm-select-bar .dsb-cancel{min-height:42px;padding:0 16px;border-radius:21px;font-size:14px;background:var(--bg2);border:1px solid var(--br);color:var(--t1)}
@media (max-width:760px){ .dm-select-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))} }
/* окно подтверждения со значком */
.vzc-icon svg{width:28px;height:28px;display:block;color:var(--t2)}
.vzc-icon.danger svg{color:#f87171}
html[data-theme="light"] .vzc-icon.danger svg{color:#dc2626}
.vzc-icon:has(svg){border-radius:50%;width:60px;height:60px}
/* v189: затемнение под меню чата — на весь экран (раньше справа оставалась светлая полоса 16px) */
#dm-chat-menu.dm-sheet{max-width:none;width:auto}
/* v189: в режиме выбора сообщений поле ввода прячем — внизу остаётся одна панель */
#dm-chat:has(#dm-select-bar) .dm-compose,#dm-chat:has(#dm-select-bar) .dm-reply-bar{display:none!important}

/* ═══ v190: сообщения на телефоне — без смайликов и кружков, ответ свайпом влево ═══ */
.dm-messages{overflow-x:hidden}
.dm-messages .dm-msg{touch-action:pan-y}
.dm-msg.dm-swiping{will-change:transform;-webkit-user-select:none;user-select:none}
.dm-swipe-ico{position:absolute;left:100%;top:50%;margin-left:12px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bg3);color:var(--t2);opacity:0;transform:translateY(-50%) scale(.5);pointer-events:none;transition:background .12s,color .12s}
.dm-swipe-ico svg{width:18px;height:18px;display:block}
.dm-swipe-ico.ready{background:linear-gradient(135deg,#9b7bf3,#7c5cf0);color:#fff}
@media (hover:none){
  .dm-compose .dm-emoji-btn,.dm-compose .dm-emoji-picker{display:none!important}
  .dm-input-wrap .dm-input{padding-right:18px}
  .dm-msg .dm-actions,.dm-msg.selected .dm-actions{display:none!important}
  .dm-messages:not(.select-mode) .dm-msg.selected .dm-bubble{box-shadow:none}
}
/* v190: крестик в плашке ответа — ровный круг */
.dm-reply-bar .drb-cancel{width:32px;height:32px;min-width:32px;min-height:0;padding:0;border-radius:50%;flex-shrink:0;align-self:center}

/* ═══ v192: список чатов, свайп для удаления, запросы на переписку ═══ */
.dm-side-head{padding:16px 16px 12px;font-size:20px;letter-spacing:-.015em;border-bottom:0}
.dm-tabs{gap:6px;padding:0 14px 12px;border-bottom:1px solid var(--br)}
.dm-tab{min-height:38px;padding:0 12px;border-radius:19px;border:1px solid var(--br);border-bottom-width:1px;background:var(--bg2);font-size:13.5px;transition:background .15s,color .15s,border-color .15s}
.dm-tab.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#e63d6f,#8b5cf6);box-shadow:0 6px 16px rgba(168,85,247,.25)}
.dm-tab.active:hover{color:#fff}
.dm-tab-badge{background:#fff;color:#c2255c;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.dm-tab:not(.active) .dm-tab-badge{background:var(--acc);color:#fff}
.dm-req-info{margin:10px 14px 0;padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--br);font-size:12.5px;line-height:1.45;color:var(--t2)}
.dm-req-info[hidden]{display:none}
.dm-dialogs{overflow-x:hidden;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
/* строка чата */
.dmd-item.dmd2{gap:12px;padding:9px 10px;border-radius:16px;touch-action:pan-y;transition:transform .24s cubic-bezier(.2,.9,.3,1),background .15s;-webkit-user-select:none;user-select:none}
.dmd2 .dmd-ava{width:54px;height:54px;font-size:21px}
.dmd2 .dmd-top{align-items:center;justify-content:flex-start;gap:5px}
.dmd2 .dmd-name{font-size:15px;font-weight:700;min-width:0}
.dmd2 .dmd-ver{width:15px;height:15px;flex-shrink:0}
.dmd2 .dmd-time{margin-left:auto;padding-left:8px;font-size:12px}
.dmd2 .dmd-last{font-size:13.5px;margin-top:3px}
.dmd2.has-unread .dmd-name{font-weight:800}
.dmd2.has-unread .dmd-time{color:var(--acc);font-weight:700}
.dmd2 .dmd-unread{min-width:21px;height:21px;line-height:21px;border-radius:11px;font-size:11.5px;background:linear-gradient(135deg,#e63d6f,#a855f7)}
.dmd-item.dmd2.is-request .dmd-name::after{content:none}
.dmd2.is-request .dmd-ava{box-shadow:0 0 0 2px var(--bg1),0 0 0 4px rgba(168,85,247,.55)}
/* кнопка, которая открывается свайпом влево */
.dmd-swipe-del{position:absolute;left:100%;top:4px;bottom:4px;width:76px;margin-left:10px;padding:0;border:0;border-radius:16px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:0;
  background:linear-gradient(135deg,#f0524f,#dc2626);color:#fff;font-family:inherit;font-size:11.5px;font-weight:800;box-shadow:0 6px 16px rgba(239,68,68,.3)}
.dmd-swipe-del svg{width:20px;height:20px;display:block}
.dmd-swipe-del span{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmd-item.swiped{transform:translateX(-88px)}
.dmd-item.dragging{transition:none}
@media (hover:hover){ .dmd-swipe-del{display:none} }
@media (hover:none){
  .dmd-item .dmd-del{display:none!important}
  .dmd-item.dmd2:hover{background:transparent}
  .dmd-item.dmd2:active{background:var(--bg2)}
  .dmd-item.dmd2.active{background:transparent}
}
/* пустые экраны */
.dm-empty-list.dm-empty2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:48px 28px;text-align:center}
.dm-empty2 .dme-ico,.dm-empty-icon.dm-empty-svg{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;
  background:var(--accG);color:var(--acc);font-size:0}
.dm-empty2 .dme-ico svg,.dm-empty-icon.dm-empty-svg svg{width:32px;height:32px;display:block}
.dm-empty2 b{font-size:16px;font-weight:800;color:var(--t1)}
.dm-empty2 span{font-size:13px;line-height:1.45;color:var(--t2);max-width:260px}
/* запрос на переписку — панель внизу чата */
.dm-req-panel{flex-shrink:0;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--br);background:var(--bg1);text-align:center}
.drp-title{font-size:15px;font-weight:800;color:var(--t1);line-height:1.3;overflow-wrap:anywhere}
.drp-desc{margin:5px auto 12px;max-width:420px;font-size:12.5px;line-height:1.45;color:var(--t2)}
.drp-actions{display:flex;gap:8px}
.drp-btn{flex:1 1 0;min-width:0;min-height:46px;padding:0 8px;border:1px solid var(--br);border-radius:14px;background:var(--bg2);color:var(--t1);cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .12s,filter .15s}
.drp-btn:active{transform:scale(.97)}
.drp-block{color:#f87171}
.drp-accept{border-color:transparent;color:#fff;background:linear-gradient(135deg,#e63d6f,#8b5cf6);box-shadow:0 6px 16px rgba(168,85,247,.28)}
html[data-theme="light"] .drp-block{color:#dc2626}
@media (max-width:360px){ .drp-btn{font-size:12px;padding:0 4px} }
/* мой запрос ещё не принят */
.dm-out-req{align-self:center;display:flex;align-items:center;gap:8px;max-width:92%;margin:10px auto 4px;padding:8px 12px;border-radius:14px;background:var(--bg2);border:1px solid var(--br);
  font-size:12.5px;line-height:1.4;color:var(--t2)}
.dm-out-req svg{width:16px;height:16px;flex-shrink:0;color:var(--t3)}
.dm-empty-icon.dm-empty-svg{opacity:1}
/* v192: «Принять» — главной кнопкой на всю ширину, под ней «Заблокировать» и «Удалить» */
.drp-actions{flex-wrap:wrap}
.drp-accept{flex:1 1 100%;order:-1}

/* ═══ v193: нижнее меню — без тени под капсулой ═══ */
.mob-nav::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme="light"] .mob-nav::before{box-shadow:inset 0 1px 0 #fff}

/* ═══ v195: вкладки «Чаты / Запросы» переключаются плавно, без мигания ═══
   Раньше фон кнопки менялся с обычного цвета на градиент: браузер не умеет плавно
   переходить между ними и кнопка мигала. Теперь градиент лежит отдельным слоем
   и просто проявляется. */
.dm-tab{position:relative;isolation:isolate;overflow:hidden;background:var(--bg2);border-color:var(--br);box-shadow:none;
  transition:color .18s ease;-webkit-tap-highlight-color:transparent}
.dm-tab::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#e63d6f,#8b5cf6);
  opacity:0;transition:opacity .18s ease;pointer-events:none}
.dm-tab.active{background:var(--bg2);border-color:var(--br);box-shadow:none;color:#fff}
.dm-tab.active::before{opacity:1}
.dm-tab:active{transform:none}
@media (hover:none){
  .dm-tab:hover{color:var(--t2)}
  .dm-tab.active:hover{color:#fff}
}
@media (prefers-reduced-motion:reduce){ .dm-tab,.dm-tab::before{transition:none} }

/* ═══ v196: без мелькающих надписей ═══ */
/* «Загрузка…» появляется, только если ответ идёт дольше 0,45 с — при быстром ответе её не видно */
.vz-late{opacity:0;animation:vzLate .18s ease .45s forwards}
@keyframes vzLate{to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .vz-late{animation-duration:.01s} }
.si-pill:empty{display:none}

/* ═══ v199: узкие экраны и длинные слова (грузинский, армянский) ═══ */
/* Нижняя шторка чата: длинный пункт больше не раздвигает шторку до краёв экрана и не обрезается «…» — переносится на вторую строку */
.dm-sheet-box.dm-sheet-v2{min-width:0;max-width:min(460px,calc(100% - 20px))}
#dm-chat-menu.dm-sheet .dm-sheet-v2 .dm-sheet-btn{white-space:normal;min-width:0;line-height:1.25}
#dm-chat-menu.dm-sheet .dm-sheet-v2 .dm-sheet-btn > span:not(.dsb-ico){min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* Панель выбора сообщений: кнопки не уезжают за край */
.dm-select-bar .dsb-count{min-width:0;overflow-wrap:anywhere;line-height:1.2}
.dm-select-bar .dsb-del,.dm-select-bar .dsb-cancel{flex:none;white-space:nowrap}
@media (max-width:380px){
  .dm-select-bar{gap:8px}
  .dm-select-bar .dsb-count{font-size:13px}
  .dm-select-bar .dsb-del,.dm-select-bar .dsb-cancel{padding:0 12px;font-size:13px}
  .dm-select-bar .dsb-del{gap:5px}
}


/* ═══ v200: Telegram-канал — пункт меню и тонкая полоска в ленте ═══ */
a.sm-item{text-decoration:none;box-sizing:border-box}
.sm-ic-tg{background:linear-gradient(135deg,#37bbfe,#007dbb)!important}
#sideMenu .sm-ic-tg svg{stroke:none;fill:currentColor;margin-left:-2px}
.tgc-banner{position:relative;max-width:760px;margin:12px auto 0;display:flex;align-items:center;gap:2px;
  border-radius:16px;background:rgba(42,171,238,.08);border:1px solid rgba(42,171,238,.26)}
.tgc-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 4px 10px 12px;border-radius:16px;
  text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.tgc-ico{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#37bbfe,#007dbb);box-shadow:0 4px 12px rgba(42,171,238,.32)}
.tgc-ico svg{width:19px;height:19px;margin-left:-2px}
.tgc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tgc-t{font-size:14px;font-weight:800;color:var(--t1);line-height:1.25;overflow-wrap:anywhere}
.tgc-s{font-size:12px;color:var(--t2);line-height:1.35;overflow-wrap:anywhere}
.tgc-go{flex:none;padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#37bbfe,#0088cc)}
.tgc-x{flex:none;width:36px;height:36px;margin-right:4px;padding:0;border:none;border-radius:50%;background:transparent;
  color:var(--t3);font-size:20px;line-height:1;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tgc-x:hover{background:rgba(127,127,127,.14);color:var(--t1)}
.tgc-link:focus-visible,.tgc-x:focus-visible{outline:2px solid #2aabee;outline-offset:2px}
@media(hover:hover){.tgc-link:hover .tgc-go{filter:brightness(1.08)}}
@media(max-width:1100px){.tgc-banner{margin:12px 16px 0}}
@media(max-width:420px){
  .tgc-s{display:none}
  .tgc-link{gap:10px;padding-left:10px}
  .tgc-go{padding:7px 11px;font-size:12px}
}
html[data-theme="light"] .tgc-banner{background:rgba(42,171,238,.09);border-color:rgba(0,136,204,.28)}
/* длинные слова (армянский) в видео-баннере на узком экране не уходят под кнопку */
.pv-t,.pv-s{overflow-wrap:anywhere}


/* ═══ v201: окно вывода — листается целиком, не прячется под шапкой и нижним меню ═══ */
.withdraw-modal{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@supports (height:100dvh){
  .withdraw-modal{max-height:min(90vh,calc(100dvh - 36px))!important}
}
.withdraw-modal-backdrop{touch-action:none}
.wm-fx-note{font-size:11.5px;color:var(--t3);margin-top:4px;line-height:1.4;overflow-wrap:anywhere}

/* ═══ v202: прокрутка окна не «протекает» на страницу под ним ═══ */
.withdraw-modal-bg,.share-modal-bg,.gift-modal-bg,.edit-modal-bg,.pmodal-bg,.hist-bg{overscroll-behavior:contain}


/* ═══ v206: окно «Поделиться батлом» — компактное, в стиле сайта ═══════════════════ */
#shareModalBg .share-modal{
  max-width:372px!important;padding:16px 16px 18px!important;border-radius:26px!important;
  border:1px solid rgba(255,79,166,.22)!important;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(255,79,166,.16),transparent 62%),
    radial-gradient(90% 60% at 100% 110%,rgba(124,58,237,.14),transparent 60%),
    var(--bg1)!important;
  box-shadow:0 30px 80px rgba(20,8,40,.5),0 0 0 1px rgba(255,255,255,.04) inset;
  animation:vzShareIn .26s cubic-bezier(.2,.9,.25,1)!important;
}
@keyframes vzShareIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
#shareModalBg .sm-handle{display:none}
#shareModalBg .sm-header{margin:0 0 12px;padding:0 0 0 2px;border:none;gap:10px}
#shareModalBg .sm-title{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--t1);min-width:0;overflow-wrap:anywhere;line-height:1.25}

/* батл: два фото рядом, знак VS между ними, ниже — кто с кем и код */
#shareModalBg .sm-preview{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:0;
  margin:0 0 14px;padding:14px 12px 12px;border-radius:20px;
  border:1px solid rgba(255,79,166,.26);
  background:linear-gradient(180deg,rgba(255,79,166,.10),rgba(124,58,237,.07));
}
#shareModalBg .sm-preview-photos{display:flex;align-items:center;justify-content:center;gap:14px}
#shareModalBg .sm-preview-photo{
  width:92px;height:118px;margin:0;border-radius:18px;object-fit:cover;object-position:center 22%;
  border:2px solid #ff4fa6;box-shadow:0 10px 24px rgba(236,72,153,.28);background:var(--bg2);
}
#shareModalBg .sm-preview-photo + .sm-preview-photo{border-color:#4f9bff;box-shadow:0 10px 24px rgba(59,130,246,.28)}
#shareModalBg .sm-preview-wait{
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:rgba(79,155,255,.9);
  border-style:dashed;background:rgba(79,155,255,.08);box-shadow:none;
}
#shareModalBg .sm-preview-vs{
  position:absolute;left:50%;top:73px;transform:translate(-50%,-50%);margin:0;
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;font-style:italic;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(135deg,#ff4d8d,#a855f7 55%,#3b82f6);
  box-shadow:0 0 0 3px var(--bg1),0 6px 16px rgba(124,58,237,.45);
}
#shareModalBg .sm-preview-info{flex:none;width:100%;min-width:0;margin-top:12px;text-align:center}
#shareModalBg .sm-preview-names{font-size:14.5px;font-weight:800;color:var(--t1);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#shareModalBg .sm-preview-code{
  display:inline-block;max-width:100%;margin-top:7px;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:700;color:var(--t2);background:rgba(127,127,160,.14);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;
}
/* вариант без батла (ссылка на сайт): только подпись */
#shareModalBg .sm-preview > .sm-preview-info:first-child{margin-top:0}
#shareModalBg .sm-preview > .sm-preview-info:first-child .sm-preview-code{white-space:normal}
/* батл ждёт соперника: подсказка может быть длинной — переносим */
#shareModalBg .sm-preview:has(.sm-preview-wait) .sm-preview-code{white-space:normal;border-radius:12px;line-height:1.35}

/* соцсети — один ряд круглых кнопок */
#shareModalBg .sm-socials{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 14px;justify-items:center}
#shareModalBg .sm-social{gap:0;outline:none}
#shareModalBg .sm-social-icon{width:46px;height:46px;border-radius:50%;box-shadow:0 6px 14px rgba(20,8,40,.22)}
#shareModalBg .sm-social-icon svg{width:22px;height:22px}
#shareModalBg .sm-social-name{display:none}
#shareModalBg .sm-social-more .sm-social-icon{
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,linear-gradient(135deg,#ff4fa6,#7c3aed) border-box!important;
  border:1.5px solid transparent;box-shadow:none;color:var(--t1);
}
#shareModalBg .sm-social:focus-visible .sm-social-icon{outline:2px solid #ff4fa6;outline-offset:3px}
@media(hover:hover){#shareModalBg .sm-social:hover .sm-social-icon{transform:translateY(-3px);box-shadow:0 10px 20px rgba(20,8,40,.3)}}

/* ссылка и кнопка «Копировать» — одной строкой-капсулой */
#shareModalBg .sm-link-label{display:flex;align-items:center;gap:10px;margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);text-align:center}
#shareModalBg .sm-link-label::before,#shareModalBg .sm-link-label::after{content:"";flex:1;height:1px;background:var(--br)}
#shareModalBg .sm-link-row{
  display:flex;align-items:center;gap:6px;padding:4px 4px 4px 14px;border-radius:16px;
  background:var(--bg2);border:1px solid var(--br);transition:border-color .18s;
}
#shareModalBg .sm-link-row:focus-within{border-color:rgba(255,79,166,.6)}
#shareModalBg .sm-link-input{flex:1;min-width:0;width:auto;padding:0;border:none;border-radius:0;background:transparent;font-size:12.5px;color:var(--t2);text-overflow:ellipsis}
#shareModalBg .sm-copy-btn{
  padding:10px 14px;border-radius:12px;font-size:13px;font-weight:800;
  background:linear-gradient(135deg,#ff4fa6,#7c3aed);box-shadow:0 6px 16px rgba(236,72,153,.32);
  transition:transform .15s,filter .15s,background .2s;
}
#shareModalBg .sm-copy-btn:hover{opacity:1;filter:brightness(1.08)}
#shareModalBg .sm-copy-btn:active{transform:scale(.96)}
#shareModalBg .sm-copy-btn.copied{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 6px 16px rgba(34,197,94,.3)}
@media(max-width:360px){
  #shareModalBg .share-modal{padding:14px 12px 14px!important}
  #shareModalBg .sm-preview-photo{width:80px;height:102px}
  #shareModalBg .sm-preview-vs{top:65px;width:34px;height:34px;font-size:12px}
  #shareModalBg .sm-socials{gap:4px}
  #shareModalBg .sm-social-icon{width:40px;height:40px}
  #shareModalBg .sm-social-icon svg{width:19px;height:19px}
  #shareModalBg .sm-copy-btn{padding:9px 11px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){#shareModalBg .share-modal{animation:none!important}}
html[data-theme="light"] #shareModalBg .share-modal{box-shadow:0 30px 80px rgba(60,30,110,.28)}


/* ═══ v207: окно «Пожаловаться» — компактное, в стиле сайта ═══════════════════ */
html #report-modal .report-modal-box,
html #report-success-modal .report-success-box{
  max-width:376px;padding:18px 16px 16px;border-radius:26px!important;
  border:1px solid rgba(255,79,166,.22)!important;
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(255,79,166,.16),transparent 62%),
    radial-gradient(90% 50% at 100% 110%,rgba(124,58,237,.12),transparent 60%),
    var(--bg1)!important;
  box-shadow:0 30px 80px rgba(20,8,40,.5);
  max-height:min(88vh,calc(100dvh - 32px));scrollbar-width:none;overscroll-behavior:contain;
}
html #report-modal .report-modal-box::-webkit-scrollbar{display:none}
html #report-modal .modal-close{top:12px;right:12px}
html #report-modal .report-modal-icon{
  width:46px;height:46px;margin:2px auto 10px;border-radius:15px;font-size:0;filter:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#ff4d8d,#e11d48);box-shadow:0 8px 20px rgba(236,72,153,.38),inset 0 1px 0 rgba(255,255,255,.3);
}
html #report-modal .report-modal-icon svg{width:23px;height:23px}
html #report-modal .report-modal-title{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 34px 4px;color:var(--t1)!important;overflow-wrap:anywhere;line-height:1.25}
html #report-modal .report-modal-sub{font-size:12.5px;margin:0 6px 14px;color:var(--t3)!important;line-height:1.4}
/* причины — один список с тонкими разделителями */
html #report-modal .report-reasons{gap:0;border-radius:18px;overflow:hidden;background:var(--bg2);border:1px solid var(--br)}
html #report-modal .report-reason-btn{
  position:relative;gap:11px;min-height:46px;padding:7px 10px 7px 9px;border:none!important;border-radius:0;
  background:transparent!important;color:var(--t1)!important;font-size:13.5px;font-weight:600;transform:none;transition:background .15s;
}
html #report-modal .report-reason-btn + .report-reason-btn::before{content:"";position:absolute;top:0;left:52px;right:0;height:1px;background:var(--br)}
html #report-modal .report-reason-icon{
  width:32px;height:32px;flex:0 0 32px;border-radius:10px;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;background:rgba(255,79,166,.12);
}
html #report-modal .report-reason-label{min-width:0;line-height:1.25;overflow-wrap:anywhere}
html #report-modal .report-reason-arrow{font-size:0;display:flex;color:var(--t3)!important;transition:transform .15s,color .15s}
html #report-modal .report-reason-arrow svg{width:16px;height:16px}
html #report-modal .report-reason-btn:active{background:rgba(255,79,166,.14)!important}
html #report-modal .report-reason-btn:focus-visible{outline:2px solid #ff4fa6;outline-offset:-2px}
@media(hover:hover){
  html #report-modal .report-reason-btn:hover{background:rgba(255,79,166,.09)!important;transform:none}
  html #report-modal .report-reason-btn:hover .report-reason-arrow{color:#ff4fa6!important;transform:translateX(2px)}
}
/* «Жалоба отправлена» — в том же виде */
html #report-success-modal .report-success-box{max-width:320px;padding:24px 20px 20px;border-color:rgba(34,197,94,.3)!important}
html #report-success-modal .report-success-icon{width:56px;height:56px;margin-bottom:14px;box-shadow:0 8px 22px rgba(34,197,94,.4)}
html #report-success-modal .report-success-icon svg{width:28px;height:28px}
html #report-success-modal .report-success-title{font-size:18px;color:var(--t1)!important;margin-bottom:6px}
html #report-success-modal .report-success-sub{font-size:13px;color:var(--t2)!important;margin-bottom:18px}
html #report-success-modal .report-success-btn{width:100%;padding:12px;border-radius:14px}

/* ═══ v207: окно «Политика / Правила» ═══════════════════════════════════════════ */
.legal-bg{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,6,20,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overscroll-behavior:contain}
.legal-box{
  width:100%;max-width:460px;max-height:min(84vh,calc(100dvh - 32px));display:flex;flex-direction:column;overflow:hidden;
  border-radius:26px;border:1px solid rgba(255,79,166,.22);
  background:radial-gradient(120% 40% at 50% -6%,rgba(255,79,166,.16),transparent 62%),var(--bg1);
  box-shadow:0 30px 80px rgba(20,8,40,.5);animation:legalPop .25s cubic-bezier(.34,1.3,.64,1);
}
.legal-head{flex:none;display:flex;align-items:center;gap:12px;padding:16px 14px 14px 16px;border-bottom:1px solid var(--br)}
.legal-ico{flex:none;width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#ff4fa6,#7c3aed);box-shadow:0 8px 18px rgba(124,58,237,.32),inset 0 1px 0 rgba(255,255,255,.3)}
.legal-ico svg{width:21px;height:21px}
.legal-title{flex:1;min-width:0;font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--t1);overflow-wrap:anywhere}
.legal-x{flex:none}
.legal-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:14px 14px 4px;font-size:13.5px;line-height:1.6;color:var(--t2);scrollbar-width:thin;scrollbar-color:rgba(255,79,166,.45) transparent}
.legal-body::-webkit-scrollbar{width:5px}
.legal-body::-webkit-scrollbar-thumb{background:rgba(255,79,166,.4);border-radius:3px}
/* каждый пункт — отдельная плашка: заголовок пункта строкой, под ним текст */
.legal-body > p{margin:0 0 10px!important;padding:12px 14px;border-radius:16px;background:var(--bg2);border:1px solid var(--br);overflow-wrap:anywhere}
.legal-body > p > b:first-child{display:block;margin-bottom:4px;font-size:14px;font-weight:800;line-height:1.3;color:var(--t1)}
.legal-foot{flex:none;padding:10px 16px 14px;text-align:center}
.legal-foot span{display:inline-block;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;color:var(--t3);background:rgba(127,127,160,.12)}
@media(max-width:380px){
  .legal-bg{padding:10px}
  .legal-head{padding:14px 12px 12px 14px;gap:10px}
  .legal-title{font-size:15.5px}
  .legal-body{padding:12px 10px 2px;font-size:13px}
  .legal-body > p{padding:11px 12px}
}
@media(prefers-reduced-motion:reduce){.legal-box{animation:none}}
html[data-theme="light"] .legal-box,html[data-theme="light"] #report-modal .report-modal-box{box-shadow:0 30px 80px rgba(60,30,110,.28)}
/* v207: мелкие правки — ровные переносы заголовков, зелёные значок и кнопка в светлой теме */
html #report-modal .report-modal-title,html #report-modal .report-modal-sub,.legal-title{text-wrap:balance}
.legal-title{overflow-wrap:break-word}
@media(max-width:380px){.legal-title{font-size:14.5px}}
html #report-success-modal .report-success-icon,
html #report-success-modal .report-success-btn{background:linear-gradient(135deg,#22c55e,#16a34a)!important;border-color:transparent!important;color:#fff!important}


/* ═══ v208: окно «Сообщить об ошибке» — в стиле сайта, работает в обеих темах ═══════ */
.bug-bg{position:fixed;inset:0;z-index:900;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,6,20,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overscroll-behavior:contain}
.bug-box{
  width:100%;max-width:400px;max-height:min(90vh,calc(100dvh - 32px));display:flex;flex-direction:column;overflow:hidden;
  border-radius:26px;border:1px solid rgba(255,79,166,.22);
  background:radial-gradient(120% 34% at 50% -6%,rgba(255,79,166,.16),transparent 62%),
             radial-gradient(90% 40% at 100% 108%,rgba(124,58,237,.12),transparent 60%),var(--bg1);
  box-shadow:0 30px 80px rgba(20,8,40,.5);animation:legalPop .25s cubic-bezier(.34,1.3,.64,1);
}
.bug-head{flex:none;display:flex;align-items:center;gap:12px;padding:16px 14px 14px 16px;border-bottom:1px solid var(--br)}
.bug-ico{flex:none;width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#ff4fa6,#7c3aed);box-shadow:0 8px 18px rgba(124,58,237,.32),inset 0 1px 0 rgba(255,255,255,.3)}
.bug-ico svg{width:21px;height:21px}
.bug-head-txt{flex:1;min-width:0}
.bug-title{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--t1);overflow-wrap:break-word}
.bug-sub{font-size:12px;color:var(--t3);margin-top:2px;line-height:1.35}
.bug-x{flex:none}
.bug-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:13px}
.bug-body::-webkit-scrollbar{display:none}
.bug-field{min-width:0}
.bug-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:7px;line-height:1.35;overflow-wrap:anywhere}
.bug-chips{display:flex;flex-wrap:wrap;gap:6px}
#bugReportModal .bug-chip{
  padding:7px 12px;border-radius:999px;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;
  color:var(--t2);background:var(--bg2);border:1px solid var(--br);transition:background .15s,border-color .15s,color .15s,transform .12s;
}
#bugReportModal .bug-chip:active{transform:scale(.96)}
#bugReportModal .bug-chip.active{color:#fff;font-weight:700;border-color:transparent;
  background:linear-gradient(135deg,#ff4fa6,#7c3aed);box-shadow:0 5px 14px rgba(236,72,153,.3)}
@media(hover:hover){#bugReportModal .bug-chip:not(.active):hover{border-color:rgba(255,79,166,.5);color:var(--t1);background:var(--bg2)}}
.bug-inp{
  display:block;width:100%;box-sizing:border-box;padding:11px 13px;border-radius:14px;outline:none;resize:none;
  font-family:inherit;font-size:14px;line-height:1.5;color:var(--t1);background:var(--bg2);border:1px solid var(--br);
  transition:border-color .15s,box-shadow .15s;
}
.bug-inp::placeholder{color:var(--t3)!important;opacity:1}
.bug-inp:focus{border-color:rgba(255,79,166,.65);box-shadow:0 0 0 3px rgba(255,79,166,.14)}
.bug-area{position:relative}
.bug-area .bug-inp{padding-bottom:24px}
.bug-count{position:absolute;right:11px;bottom:7px;font-size:10.5px;font-weight:600;color:var(--t3);pointer-events:none}
.bug-drop{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;cursor:pointer;
  background:rgba(255,79,166,.05);border:1.5px dashed rgba(255,79,166,.36);transition:border-color .15s,background .15s}
.bug-drop-ico{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#ff4fa6;background:rgba(255,79,166,.14)}
.bug-drop-ico svg{width:18px;height:18px}
.bug-drop-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.bug-drop-t{font-size:13px;font-weight:700;color:var(--t1);overflow-wrap:anywhere}
.bug-drop-s{font-size:11px;color:var(--t3);overflow-wrap:anywhere}
@media(hover:hover){.bug-drop:hover{border-color:#ff4fa6;background:rgba(255,79,166,.09)}}
.bug-previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bug-previews:empty{display:none}
.bug-previews > div{border-color:var(--br)!important;border-radius:12px!important}
.bug-send{
  width:100%;padding:13px;border:none;border-radius:15px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(135deg,#ff4fa6,#7c3aed);box-shadow:0 8px 22px rgba(236,72,153,.34);transition:transform .12s,filter .15s;
}
.bug-send:active{transform:scale(.98)}
.bug-send:disabled{opacity:.7;cursor:default}
@media(hover:hover){.bug-send:not(:disabled):hover{filter:brightness(1.07);transform:translateY(-1px)}}
.bug-foot{margin:0;text-align:center;font-size:11.5px;line-height:1.45;color:var(--t3);text-wrap:balance}
/* «Отчёт отправлен» */
.bug-ok-bg{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,6,20,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bug-ok{width:100%;max-width:320px;padding:24px 20px 20px;text-align:center;border-radius:26px;border:1px solid rgba(34,197,94,.3);
  background:radial-gradient(120% 60% at 50% -10%,rgba(34,197,94,.14),transparent 62%),var(--bg1);
  box-shadow:0 30px 80px rgba(20,8,40,.5);animation:legalPop .25s cubic-bezier(.34,1.3,.64,1)}
.bug-ok-ico{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 8px 22px rgba(34,197,94,.4)}
.bug-ok-ico svg{width:28px;height:28px}
.bug-ok-t{font-size:18px;font-weight:800;color:var(--t1);margin-bottom:6px;letter-spacing:-.01em}
.bug-ok-s{font-size:13px;color:var(--t2);line-height:1.5;margin-bottom:18px}
.bug-ok-btn{width:100%;padding:12px;border:none;border-radius:14px;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#ff4fa6,#7c3aed);box-shadow:0 6px 18px rgba(236,72,153,.3)}
@media(max-width:380px){
  .bug-bg{padding:10px}
  .bug-head{padding:14px 12px 12px 14px;gap:10px}
  .bug-body{padding:12px 12px 14px;gap:12px}
  .bug-title{font-size:15px}
  #bugReportModal .bug-chip{padding:6px 10px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.bug-box,.bug-ok{animation:none}}
html[data-theme="light"] .bug-box,html[data-theme="light"] .bug-ok{box-shadow:0 30px 80px rgba(60,30,110,.28)}

/* ═══════════════ v210 — аудит: адаптация и читаемость ═══════════════ */

/* Всплывающее сообщение: ширина считалась от середины экрана, и на телефоне текст
   сжимался в столбик шириной в пол-экрана. Теперь ширина — по тексту (до краёв экрана). */
.toast{width:max-content}

/* «Батл набирает обороты»: не показывается поверх открытого окна (поделиться, подарок, жалоба…) */
body.scroll-locked .vote-popup{display:none!important}

/* Чат: длинное имя собеседника выталкивало кнопку «⋯» за край экрана */
.dm-chat-head .dmc-info{flex:1 1 auto;min-width:0}
.dm-chat-head .dmc-name{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-chat-head .dmc-user{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-chat-head .dm-back,.dm-chat-head .dmc-menu-btn{flex:none}
/* Буква вместо фото в шапке чата: в светлой теме была белой на светло-сером */
.dmc-ava.dmd-ava-fb{background:linear-gradient(135deg,#e63d6f,#8b5cf6)}

/* Кошелёк: на узком экране длинная подпись кнопки «Вывести» (hy, ka, pl) уходила за край карточки */
#page-wallet .wbc-btn{min-width:0}
@media(max-width:380px){
  #page-wallet .wbc-btn{white-space:normal;line-height:1.15;font-size:13px;padding:0 8px;text-align:center}
}

/* Списки подписчиков и подписок: длинная кнопка («Подписан» на hy, ka) перекрывала имя */
.follow-list-card .fl-item{flex-wrap:wrap}
.follow-list-card .fl-info{flex:1 1 110px}
.follow-list-card .fl-name,.follow-list-card .fl-username{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.follow-list-card .fl-btn{margin-left:auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* «Какой батл поднять»: на узком экране имена сжимались до одной буквы в строке */
@media(max-width:400px){
  .tpk-row{flex-wrap:wrap;row-gap:8px}
  .tpk-info{flex:1 1 120px}
  .tpk-go{margin-left:auto}
}

/* Предупреждение в окне создания батла: в светлой теме жёлтый текст на жёлтом фоне не читался */
html[data-theme="light"] .pm-warning,
html[data-theme="light"] .pm-warning span{color:#8a4b06!important}

/* Подпись над таймером батла на телефоне была 7px — мельче читаемого. Теперь 8px; буквы стоят
   плотнее, поэтому ширина строки та же и перенос текста не меняется ни в одном языке. */
@media(max-width:768px){
  .bmt-label{font-size:8px!important;letter-spacing:.06em!important}
}

/* ═══════════════ v212 — окно «Найти соперника» / «Создай свой VS» открывается сразу в нужном размере ═══════════════ */
/* На время подгонки размеров шаг не анимирует отступы и шрифты — иначе замер получался неверным,
   и окно сначала открывалось меньше, а потом увеличивалось. */
.pm-step.pm-measure,.pm-step.pm-measure *{transition:none!important}

/* ═══════════════ v214 — чек операции в «Истории транзакций» ═══════════════ */
/* Каждая строка истории нажимается и открывает чек */
.history-item.tx-click{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,transform .12s}
@media(hover:hover){.history-item.tx-click:hover{border-color:rgba(255,255,255,.22)}
  html[data-theme="light"] .history-item.tx-click:hover{border-color:#c9cfdd}}
.history-item.tx-click:active{transform:scale(.985)}
.history-item.tx-click:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.tx-chev{width:14px;height:14px;flex:none;margin:0 -3px 0 -4px;fill:none;stroke:var(--t3);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.txr-bg{
  position:fixed;inset:0;z-index:100000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:14px 12px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:rgba(0,2,8,.72);
  opacity:0;transition:opacity .18s;
}
.txr-bg.open{opacity:1}
.txr-card{
  position:relative;margin:auto;flex-shrink:0;
  width:100%;max-width:380px;box-sizing:border-box;
  padding:22px 20px 18px;border-radius:22px;
  background:linear-gradient(180deg,#1d2036,#12141f);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 70px rgba(0,0,0,.6);
  color:var(--t1);
  transform:translateY(12px) scale(.97);
  transition:transform .22s cubic-bezier(.34,1.3,.5,1);
}
.txr-bg.open .txr-card{transform:none}
.txr-head{text-align:center;padding:0 34px}
.txr-ico{width:52px;height:52px;margin:0 auto 8px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;background:rgba(255,255,255,.06)}
.txr-ttl{font-size:17px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.txr-st{display:inline-block;margin-top:7px;font-size:12px;font-weight:800;line-height:1.3;padding:3px 11px;border-radius:999px}
.txr-in .txr-st{color:#22c55e;background:rgba(34,197,94,.13)}
.txr-out .txr-st{color:#f4628c;background:rgba(230,61,111,.14)}
.txr-wait .txr-st{color:#fbbf24;background:rgba(251,191,36,.13)}
.txr-sum{text-align:center;margin:14px 0 4px;padding:14px 6px;border-top:1px dashed rgba(255,255,255,.18);border-bottom:1px dashed rgba(255,255,255,.18)}
.txr-amt{display:flex;align-items:center;justify-content:center;gap:6px;font-size:30px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.txr-amt .vcoin{height:.74em;margin:0;vertical-align:0}
.txr-in .txr-amt{color:var(--green)}
.txr-out .txr-amt{color:var(--acc)}
.txr-wait .txr-amt{color:var(--t1)}
.txr-name{margin-top:6px;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--t2);overflow-wrap:anywhere}
.txr-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;line-height:1.35}
.txr-row:last-child{border-bottom:none}
.txr-k{flex:none;max-width:46%;color:var(--t3);overflow-wrap:anywhere}
.txr-v{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:3px 6px;min-width:0;color:var(--t1);font-weight:700;text-align:right;overflow-wrap:anywhere}
.txr-v .vcoin{height:14px;margin:0;vertical-align:0}
.txr-sub{flex-basis:100%;max-width:100%;font-size:11.5px;font-weight:500;line-height:1.3;color:var(--t3);overflow-wrap:anywhere}
.txr-row-part .txr-k{max-width:58%;color:var(--t1);font-weight:700}
.txr-gift{width:22px;height:22px;object-fit:contain;flex:none}
.txr-mono{font-variant-numeric:tabular-nums;letter-spacing:.02em;-webkit-user-select:all;user-select:all}
.txr-bt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0;max-width:100%}
.txr-row-part .txr-bt{align-items:flex-start}
.txr-link{color:#a78bfa;font-weight:800;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:6px 0;margin:-6px 0;-webkit-tap-highlight-color:transparent}
.txr-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.txr-note{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);color:var(--t2);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.txr-btn{display:block;width:100%;margin-top:14px;padding:12px;border:none;border-radius:14px;background:linear-gradient(90deg,#ec4899,#a855f7);color:#fff;font:inherit;font-weight:800;font-size:14.5px;cursor:pointer;transition:transform .12s,filter .15s}
.txr-btn:active{transform:scale(.98)}
@media(hover:hover){.txr-btn:hover{filter:brightness(1.08)}}
@media(max-width:360px){.txr-card{padding:20px 15px 16px}.txr-amt{font-size:27px}.txr-head{padding:0 30px}}
html[data-theme="light"] .txr-bg{background:rgba(225,229,240,.82)}
html[data-theme="light"] .txr-card{background:linear-gradient(180deg,#fff,#fafbff);border-color:#e5e8f0;box-shadow:0 26px 60px rgba(20,30,60,.22)}
html[data-theme="light"] .txr-ico,html[data-theme="light"] .txr-note{background:#f1f3f9}
html[data-theme="light"] .txr-sum{border-color:#cfd5e2}
html[data-theme="light"] .txr-row{border-bottom-color:#eceff5}
html[data-theme="light"] .txr-k,html[data-theme="light"] .txr-sub{color:var(--t2)}
html[data-theme="light"] .txr-in .txr-st{color:#15803d}
html[data-theme="light"] .txr-in .txr-amt{color:#16a34a}
html[data-theme="light"] .txr-out .txr-st{color:#c4204f}
html[data-theme="light"] .txr-wait .txr-st{color:#8a4b06;background:rgba(251,191,36,.2)}
html[data-theme="light"] .txr-link{color:#7c3aed}
@media(prefers-reduced-motion:reduce){.txr-bg,.txr-card,.history-item.tx-click{transition:none}}
/* на самых узких экранах стрелка не отнимает место у текста строки */
@media(max-width:359px){.tx-chev{display:none}}
/* чек вывода тёмный в обеих темах — крестик на нём должен быть виден и в светлой */
html[data-theme="light"] #wd-receipt-bg .vz-x{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
html[data-theme="light"] #wd-receipt-bg .vz-x:hover{background:rgba(255,255,255,.18);color:#fff}
/* строки истории не сжимаются, когда список длинный: на узких экранах вторая строка (счёт) наезжала на рамку */
.history-list>.history-item{flex-shrink:0}
html[data-theme="light"] .txr-row-part .txr-k{color:var(--t1)}

/* ═══════════════ v215 — окно подарков в стиле прямых трансляций ═══════════════
   Подарки крупные, без рамок-карточек; под каждым мягкое свечение его цвета.
   На телефоне окно выезжает снизу на всю ширину, на компьютере — по центру. */
#gift-modal.gm-bg{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,5,12,.66);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:gmBgIn .2s ease both;
}
@keyframes gmBgIn{from{opacity:0}to{opacity:1}}
@keyframes gmSheetIn{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
@keyframes gmSheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes gmPop{0%{transform:scale(1)}55%{transform:scale(1.22)}100%{transform:scale(1.13)}}
#gift-modal .gm-sheet{
  position:relative;display:flex;flex-direction:column;box-sizing:border-box;
  width:100%;max-width:540px;max-height:min(90vh,780px);
  padding:16px 16px 16px;border-radius:26px;
  background:linear-gradient(180deg,#1c1e2e 0%,#12131d 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 80px rgba(0,0,0,.62);
  color:var(--t1);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;
  animation:gmSheetIn .24s cubic-bezier(.2,.9,.3,1) both;
}
#gift-modal .gm-sheet::-webkit-scrollbar{display:none}
#gift-modal .gm-grab{display:none}
#gift-modal .gm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 8px}
#gift-modal #gm-title{min-width:0;font-size:16.5px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Вкладки — строка текста с цветной чертой под активной */
#gift-modal .gm-tabs{
  display:flex;gap:2px;margin:0;padding:0;flex:none;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#gift-modal .gm-tabs::-webkit-scrollbar{display:none}
/* вкладки не поместились в ширину — правый край плавно гаснет: видно, что ленту можно листать */
#gift-modal .gm-tabs.gm-tabs-scroll{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),rgba(0,0,0,.25) 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),rgba(0,0,0,.25) 100%)}
#gift-modal .gm-combo-ic{margin-right:5px}
#gift-modal .gm-tab{
  flex:1 0 auto;flex-direction:row;gap:0;min-width:0;
  padding:10px 10px 11px;border:none;border-radius:0;background:none;box-shadow:none;
  color:var(--t3);transition:color .15s;
}
#gift-modal .gm-tab:hover{color:var(--t1)}
#gift-modal .gm-tab:active{transform:none}
#gift-modal .gm-tab.active{color:var(--t1);background:none;box-shadow:none}
#gift-modal .gm-tab::after{
  content:'';position:absolute;left:50%;bottom:0;width:26px;height:3px;margin-left:-13px;border-radius:3px 3px 0 0;
  background:var(--gm-c);opacity:0;transform:scaleX(.3);transition:opacity .18s,transform .22s cubic-bezier(.3,1.4,.5,1);
}
#gift-modal .gm-tab.active::after{opacity:1;transform:none;box-shadow:0 0 12px var(--gm-c)}
#gift-modal .gm-tab-dot,#gift-modal .gm-tab-n{display:none}
#gift-modal .gm-tab-name{font-size:13.5px;font-weight:800;line-height:1.2;white-space:nowrap}

/* Сетка подарков */
#gift-modal #gm-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 2px;
  margin:0;padding:8px 0 4px;flex:0 1 auto;
  max-height:min(54vh,470px);overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
#gift-modal #gm-grid::-webkit-scrollbar{display:none}
#gift-modal .gift-item{
  display:flex;flex-direction:column;align-items:center;min-width:0;
  padding:8px 3px 9px;border:1.5px solid transparent;border-radius:18px;background:none;
  text-align:center;cursor:pointer;transform:none;
  transition:background .16s,border-color .16s;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none;
}
#gift-modal .gift-item:hover{transform:none;border-color:transparent}
#gift-modal .gift-item:focus-visible{border-color:rgba(255,255,255,.55)}
#gift-modal .gift-item.selected{
  transform:none;
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.34);
  background:color-mix(in srgb,var(--gc) 15%,rgba(255,255,255,.05));
  border-color:color-mix(in srgb,var(--gc) 62%,#fff);
  box-shadow:0 8px 22px -10px var(--gc);
}
#gift-modal .gift-item.selected::after{content:none}
#gift-modal .gm-pic{position:relative;display:flex;align-items:center;justify-content:center;width:84px;height:84px;margin:0 0 6px;flex:none}
#gift-modal .gm-pic::before{
  content:'';position:absolute;left:10%;right:10%;top:14%;bottom:6%;border-radius:50%;
  background:radial-gradient(closest-side,var(--gc),transparent);
  opacity:.2;transition:opacity .2s;pointer-events:none;
}
#gift-modal .gm-img{
  position:relative;display:block;width:100%;height:100%;object-fit:contain;margin:0;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.45));
  transition:transform .2s cubic-bezier(.3,1.4,.5,1);
  -webkit-user-drag:none;pointer-events:none;
}
@media(hover:hover){
  #gift-modal .gift-item:hover{background:rgba(255,255,255,.045)}
  #gift-modal .gift-item:hover .gm-img{transform:scale(1.07)}
  #gift-modal .gift-item:hover .gm-pic::before{opacity:.32}
}
#gift-modal .gift-item:active .gm-img{transform:scale(.93)}
#gift-modal .gift-item.selected .gm-img,
#gift-modal .gift-item.selected:hover .gm-img{transform:scale(1.13);animation:gmPop .3s cubic-bezier(.3,1.3,.5,1)}
#gift-modal .gift-item.selected .gm-pic::before{opacity:.5}
#gift-modal .gift-name{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  width:100%;max-width:100%;margin:0 0 3px;font-size:12.5px;font-weight:600;line-height:1.22;color:var(--t1);opacity:.88;
  overflow-wrap:normal;word-break:normal;hyphens:manual;
}
#gift-modal .gift-price{display:flex;align-items:center;justify-content:center;gap:3px;font-size:13px;font-weight:800;line-height:1.2;color:var(--gold);font-variant-numeric:tabular-nums}
#gift-modal .gift-price .vcoin{height:13px;margin:0;vertical-align:0}

/* Подсказка про комбо — одной спокойной строкой */
#gift-modal .gm-combo-hint{
  display:block;flex:none;
  margin:8px 4px 12px;padding:0;border:none;border-radius:0;background:none;
  font-size:11.5px;font-weight:500;line-height:1.35;color:var(--t3);text-align:center;
}

/* Низ: баланс (ведёт в кошелёк) и кнопка «Подарить» */
#gift-modal .gm-foot{display:flex;align-items:stretch;gap:8px;flex:none}
#gift-modal .gm-bal{
  display:inline-flex;align-items:center;gap:7px;flex:none;max-width:48%;min-height:50px;box-sizing:border-box;
  padding:0 10px 0 14px;border-radius:16px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
  color:var(--gold);font-family:inherit;font-size:14.5px;font-weight:800;line-height:1;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .12s;-webkit-tap-highlight-color:transparent;
}
#gift-modal .gm-bal:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
#gift-modal .gm-bal:active{transform:scale(.97)}
#gift-modal .gm-bal #gm-balance2{display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;text-overflow:ellipsis}
#gift-modal .gm-bal .vcoin{height:15px;margin:0;vertical-align:0;flex:none}
#gift-modal .gm-bal-plus{width:22px;height:22px;flex:none;padding:4px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.12);fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
#gift-modal .gm-foot.gm-need .gm-bal{display:none}
#gift-modal .gift-send-btn{flex:1 1 0;min-width:0;min-height:50px;width:auto;padding:8px 12px;border-radius:16px;gap:8px;font-size:15px;line-height:1.2;text-align:center}
#gift-modal .gift-send-btn>span{min-width:0}
#gift-modal .gift-send-btn .vcoin{height:15px;margin:0 0 0 1px;vertical-align:-2px}
#gift-modal .gm-send-img{width:26px;height:26px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
#gift-modal .gift-send-btn:disabled{background:rgba(255,255,255,.07);color:var(--t3);box-shadow:none}

/* Телефон: окно выезжает снизу на всю ширину */
@media(max-width:640px){
  #gift-modal.gm-bg{align-items:flex-end;padding:0;background:rgba(4,5,12,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
  #gift-modal .gm-sheet{
    max-width:none;max-height:90vh;border-radius:24px 24px 0 0;border-left:none;border-right:none;border-bottom:none;
    padding:8px 10px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -18px 50px rgba(0,0,0,.5);
    animation:gmSheetUp .28s cubic-bezier(.2,.9,.25,1) both;
  }
  #gift-modal .gm-grab{display:block;width:38px;height:4px;margin:0 auto 8px;border-radius:2px;background:rgba(255,255,255,.22);flex:none}
  #gift-modal .gm-head{margin:0 4px 4px}
  #gift-modal .gm-pic{width:74px;height:74px}
  #gift-modal #gm-grid{max-height:min(52vh,440px)}
  #gift-modal .gm-foot{margin:0 2px}
}
@supports (height:100dvh){
  @media(max-width:640px){
    #gift-modal .gm-sheet{max-height:90dvh}
    #gift-modal #gm-grid{max-height:min(52dvh,440px)}
  }
}
@media(max-width:389px){
  #gift-modal .gm-pic{width:66px;height:66px}
  #gift-modal .gm-tab{padding-left:8px;padding-right:8px}
  #gift-modal .gm-tab-name{font-size:13px}
}
@media(max-width:345px){
  #gift-modal .gm-pic{width:58px;height:58px}
  #gift-modal .gift-name{font-size:11.5px}
  #gift-modal .gift-price{font-size:12.5px}
  #gift-modal .gm-tab{padding-left:6px;padding-right:6px}
  #gift-modal .gm-tab-name{font-size:12.5px}
  #gift-modal .gift-send-btn{font-size:14px;padding:8px}
  #gift-modal .gm-bal{padding:0 8px 0 10px;font-size:14px}
}
/* Низкие экраны: всё окно остаётся на экране, список подарков листается внутри */
@media(max-height:640px){
  #gift-modal .gm-tab{padding-top:8px;padding-bottom:9px;gap:0}
  #gift-modal .gm-tabs{margin-bottom:0}
  #gift-modal #gm-grid .gift-item{padding-top:6px;padding-bottom:7px}
  #gift-modal #gm-grid{max-height:44vh}
  #gift-modal .gm-combo-hint{margin:6px 4px 8px}
}
@media(max-height:640px) and (max-width:640px){#gift-modal .gm-pic{width:60px;height:60px}}
@media(max-height:640px) and (max-width:345px){#gift-modal .gm-pic{width:54px;height:54px}}

/* Светлая тема */
html[data-theme="light"] #gift-modal.gm-bg{background:rgba(214,219,232,.7)}
html[data-theme="light"] #gift-modal .gm-sheet{background:linear-gradient(180deg,#fff,#f6f7fb);border-color:#e4e7ef;box-shadow:0 26px 60px rgba(20,30,60,.22)}
html[data-theme="light"] #gift-modal .gm-grab{background:#cfd4e0}
html[data-theme="light"] #gift-modal .gm-tabs{border-bottom-color:#e6e9f0}
html[data-theme="light"] #gift-modal .gm-tab{background:none;border:none;color:var(--t2)}
html[data-theme="light"] #gift-modal .gm-tab.active{color:var(--t1)}
html[data-theme="light"] #gift-modal .gm-img{filter:drop-shadow(0 6px 8px rgba(30,40,70,.22))}
html[data-theme="light"] #gift-modal .gm-pic::before{opacity:.16}
html[data-theme="light"] #gift-modal .gift-item.selected .gm-pic::before{opacity:.36}
html[data-theme="light"] #gift-modal .gift-item.selected{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.3);background:color-mix(in srgb,var(--gc) 10%,#fff);border-color:color-mix(in srgb,var(--gc) 70%,#555)}
html[data-theme="light"] #gift-modal .gift-item:focus-visible{border-color:rgba(0,0,0,.5)}
html[data-theme="light"] #gift-modal .gift-price{color:#a45a00}
html[data-theme="light"] #gift-modal .gm-combo-hint{color:var(--t2)}
html[data-theme="light"] #gift-modal .gm-bal{background:#f1f3f8;border-color:#dfe3ec;color:#a45a00}
html[data-theme="light"] #gift-modal .gm-bal:hover{background:#e9ecf3;border-color:#d2d7e3}
html[data-theme="light"] #gift-modal .gm-bal-plus{background:#d9dde8;stroke:#1f2433}
html[data-theme="light"] #gift-modal .gift-send-btn:disabled{background:#eceef4;color:#8b8b9c}
@media(hover:hover){html[data-theme="light"] #gift-modal .gift-item:hover{background:rgba(0,0,0,.035)}}
@media(max-width:640px){html[data-theme="light"] #gift-modal .gm-sheet{box-shadow:0 -14px 40px rgba(20,30,60,.2)}}
@media(prefers-reduced-motion:reduce){
  #gift-modal.gm-bg,#gift-modal .gm-sheet,#gift-modal .gift-item.selected .gm-img{animation:none}
  #gift-modal .gm-img,#gift-modal .gm-tab::after{transition:none}
}
/* Телефон на боку (низкое и широкое окно): подарков в ряду больше, подсказка скрыта — всё помещается */
@media(max-height:480px) and (min-width:641px){
  #gift-modal.gm-bg{padding:8px}
  #gift-modal .gm-sheet{max-width:720px;max-height:96vh;padding:10px 14px 12px}
  #gift-modal #gm-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:46vh}
  #gift-modal .gm-pic{width:60px;height:60px}
  #gift-modal .gm-combo-hint{display:none}
  #gift-modal .gm-foot{margin-top:8px}
  #gift-modal .gm-head{margin-bottom:2px}
}

/* ═══════════════ v216 — окно подарков: крупнее значки на кнопке, свайп между вкладками ═══════════════ */
/* Кнопка «Подарить»: подарок и монета хорошо видны */
#gift-modal .gift-send-btn{min-height:56px;font-size:16.5px;gap:10px;padding:6px 14px}
#gift-modal .gm-send-img{width:40px;height:40px;margin:-4px 0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
#gift-modal .gift-send-btn>span{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 6px;min-width:0}
#gift-modal .gift-send-btn .vcoin{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
#gift-modal .gm-bal{min-height:56px;font-size:15.5px;gap:8px}
#gift-modal .gm-bal-plus{width:24px;height:24px}
@media(max-width:345px){
  #gift-modal .gift-send-btn{font-size:15px;gap:7px;padding:6px 8px}
  #gift-modal .gm-send-img{width:34px;height:34px}
  #gift-modal .gm-bal{font-size:14.5px;gap:6px}
}
/* Заголовок: значок не наезжает на текст */
#gift-modal .gm-title-ic{display:inline-block;margin-right:7px}

/* Сетка занимает всё свободное место окна — три ряда помещаются целиком, цены не обрезаются.
   Свайп влево-вправо по подаркам переключает вкладки (вверх-вниз — обычная прокрутка). */
#gift-modal #gm-grid{flex:1 1 auto;min-height:118px;max-height:none;touch-action:pan-y}
@media(max-width:640px){#gift-modal #gm-grid{max-height:none}}
@supports (height:100dvh){@media(max-width:640px){#gift-modal #gm-grid{max-height:none}}}
@media(max-height:640px){#gift-modal #gm-grid{max-height:none}}
@media(max-height:480px) and (min-width:641px){#gift-modal #gm-grid{max-height:none}}
/* список длиннее окна — нижний край гаснет, пока не долистали */
#gift-modal #gm-grid.gm-more{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 34px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
/* новая вкладка въезжает со стороны переключения */
@keyframes gmInR{from{opacity:.25;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes gmInL{from{opacity:.25;transform:translateX(-26px)}to{opacity:1;transform:none}}
#gift-modal #gm-grid.gm-in-r{animation:gmInR .2s cubic-bezier(.2,.8,.3,1)}
#gift-modal #gm-grid.gm-in-l{animation:gmInL .2s cubic-bezier(.2,.8,.3,1)}
@media(prefers-reduced-motion:reduce){#gift-modal #gm-grid.gm-in-r,#gift-modal #gm-grid.gm-in-l{animation:none}}
/* «Подарить · цена» — одной строкой; не помещается — значки и шрифт чуть меньше */
#gift-modal .gift-send-btn:not(.gm-send-topup)>span{flex-wrap:nowrap;white-space:nowrap}
#gift-modal .gift-send-btn.gm-tight{font-size:14px;gap:6px;padding:6px 8px}
#gift-modal .gift-send-btn.gm-tight .gm-send-img{width:30px;height:30px}
#gift-modal .gift-send-btn.gm-tight>span{gap:0 4px}
#gift-modal .gift-send-btn.gm-wrap>span{flex-wrap:wrap;white-space:normal}
/* Картинка монеты — с широкими прозрачными полями: сама монета занимает ~3/4 высоты и половину ширины.
   Задаём размер через --c (высота картинки), ширину считаем сразу (место занято до загрузки картинки —
   иначе кнопка мерила себя неверно), а пустые поля по бокам убираем отрицательными отступами. */
#gift-modal .gift-send-btn .vcoin,#gift-modal .gm-bal .vcoin,#gift-modal .gift-price .vcoin{
  height:var(--c);width:calc(var(--c)*1.48);margin:0 calc(var(--c)*-.31);vertical-align:0;flex:none;object-fit:contain;
}
#gift-modal .gift-send-btn .vcoin{--c:35px}
#gift-modal .gift-send-btn.gm-tight .vcoin{--c:27px}
#gift-modal .gm-bal .vcoin{--c:28px}
#gift-modal .gift-price .vcoin{--c:20px}
#gift-modal .gift-price{gap:4px}
#gift-modal .gift-send-btn>span{gap:0 7px}
#gift-modal .gm-bal #gm-balance2{gap:6px;overflow:visible}
@media(max-width:345px){
  #gift-modal .gift-send-btn .vcoin{--c:31px}
  #gift-modal .gift-send-btn.gm-tight .vcoin{--c:27px}
  #gift-modal .gm-bal .vcoin{--c:25px}
  #gift-modal .gift-price .vcoin{--c:18px}
}
#gift-modal .gm-foot.gm-slim .gm-bal-plus{display:none}
#gift-modal .gm-foot.gm-slim .gm-bal{padding:0 10px;gap:0}
#gift-modal .gift-send-btn.gm-tight2{font-size:12.5px;gap:5px;padding:6px}
#gift-modal .gift-send-btn.gm-tight2 .gm-send-img{width:28px;height:28px}
#gift-modal .gift-send-btn.gm-tight2 .vcoin{--c:25px}
#gift-modal .gift-send-btn.gm-tight2>span{gap:0 3px}

/* ═══════════════ v217 — подарки: вкладки листаются вбок плавно, за пальцем ═══════════════
   #gm-grid теперь — лента из четырёх страниц (.gm-page), стоящих рядом. Листает её сам браузер
   (как обычную прокрутку), поэтому движение идёт один в один за пальцем и плавно «доезжает». */
#gift-modal #gm-grid.gm-pager{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;align-content:normal;
  gap:0;padding:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  -webkit-mask-image:none;mask-image:none;animation:none;
}
#gift-modal .gm-page{
  flex:0 0 100%;width:100%;min-width:0;min-height:0;box-sizing:border-box;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;
  align-content:start;align-items:start;
  padding:8px 0 4px;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  scroll-snap-align:start;scroll-snap-stop:always;
  scrollbar-width:none;-ms-overflow-style:none;
}
#gift-modal .gm-page::-webkit-scrollbar{display:none}
#gift-modal .gm-page.gm-more{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 34px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
@media(max-height:480px) and (min-width:641px){#gift-modal .gm-page{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* Черта под названиями вкладок — одна, едет вместе с лентой */
#gift-modal .gm-tabs{position:relative}
#gift-modal .gm-tabs.gm-has-ink .gm-tab::after{display:none}
#gift-modal .gm-ink{
  position:absolute;left:0;bottom:0;width:26px;height:3px;border-radius:3px 3px 0 0;
  background:var(--ink,#fff);box-shadow:0 0 12px var(--ink,#fff);
  pointer-events:none;will-change:transform;transition:background-color .2s,box-shadow .2s;
}

/* ═══════════════ v218 — кнопка комбо: новое оформление и эффекты (подарки и голоса ×2) ═══════════════ */
.gcombo.gcb{gap:9px;--o1:#ff9ad6;--o2:#f0379f;--o3:#6d28d9;--h1:#ffd166;--h2:var(--gc-glow,#ff4fa6);--h3:#7c3aed;--h4:#ff4fa6;--rc:#ffd166}
.gcombo.gcb.gcombo-vote{--o1:#a8f4ff;--o2:#2f8bff;--o3:#4c1d95;--h1:#7df9ff;--h2:#3b82f6;--h3:#8b5cf6;--h4:#ffe066;--rc:#8ef6ff}
.gcb-orb{position:relative;width:92px;height:92px;display:flex;align-items:center;justify-content:center;pointer-events:none;flex:none}
/* вращающееся свечение позади шара */
.gcb-halo{position:absolute;left:-18px;top:-18px;right:-18px;bottom:-18px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--h1),var(--h2),var(--h3),var(--h4),var(--h1));
  -webkit-filter:blur(15px);filter:blur(15px);opacity:.78;animation:gcbSpin 3.4s linear infinite;will-change:transform}
.gcb-glow{position:absolute;left:-6px;top:-6px;right:-6px;bottom:-6px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,0));animation:gcbBreath 1.6s ease-in-out infinite}
@keyframes gcbSpin{to{transform:rotate(360deg)}}
@keyframes gcbBreath{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.12);opacity:1}}
/* сам шар: объёмный, с бликом */
.gcombo.gcb .gcombo-btn{
  width:88px;height:88px;overflow:visible;
  background:
    radial-gradient(circle at 50% 118%,rgba(0,0,0,.38) 0,rgba(0,0,0,0) 58%),
    radial-gradient(circle at 34% 26%,var(--o1) 0,var(--o2) 46%,var(--o3) 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -8px 16px rgba(0,0,0,.3),
             0 0 0 2px rgba(255,255,255,.22),0 12px 28px rgba(0,0,0,.5);
}
.gcb-shine{position:absolute;left:16%;top:8%;width:52%;height:34%;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));transform:rotate(-18deg);opacity:.7}
.gcombo.gcb .gcombo-btn img{width:58px;height:58px;position:relative;z-index:1;filter:drop-shadow(0 5px 8px rgba(0,0,0,.5));animation:gcbFloat 2.2s ease-in-out infinite}
.gcb-bolt{width:50px;height:50px;position:relative;z-index:1;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,236,130,.9)) drop-shadow(0 4px 6px rgba(0,0,0,.45));animation:gcbFloat 2.2s ease-in-out infinite}
@keyframes gcbFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
.gcombo.gcb .gcombo-btn.hit{animation:gcbHit .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes gcbHit{0%{transform:scale(.82)}45%{transform:scale(1.13)}72%{transform:scale(.97)}100%{transform:scale(1)}}
.gcombo.gcb .gcombo-btn.hit img,.gcombo.gcb .gcombo-btn.hit .gcb-bolt{animation:gcbIcon .3s ease-out}
@keyframes gcbIcon{0%{transform:scale(1.28) rotate(-10deg)}100%{transform:scale(1) rotate(0)}}
/* кольцо обратного отсчёта светится */
.gcombo.gcb .gcombo-ring{left:-9px;top:-9px;width:calc(100% + 18px);height:calc(100% + 18px);z-index:2}
.gcombo.gcb .gcombo-ring circle{stroke-width:4}
.gcombo.gcb .gcombo-ring .bg{stroke:rgba(255,255,255,.2)}
.gcombo.gcb .gcombo-ring .fg{stroke:var(--rc);filter:drop-shadow(0 0 5px var(--rc))}
/* слой искр вокруг шара */
.gcb-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3}
.gcb-fx i{position:absolute;display:block;pointer-events:none}
.gcb-wave{left:0;top:0;width:100%;height:100%;border-radius:50%;box-sizing:border-box;border:3px solid #fff;
  box-shadow:0 0 14px var(--rc),inset 0 0 10px var(--rc);animation:gcbWave .54s cubic-bezier(.2,.7,.3,1) forwards}
.gcb-wave.big{border-width:4px;animation:gcbWaveBig .74s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes gcbWave{from{transform:scale(.9);opacity:.95}to{transform:scale(2.05);opacity:0}}
@keyframes gcbWaveBig{from{transform:scale(.9);opacity:1}to{transform:scale(3.1);opacity:0}}
.gcb-p{left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--pc,#fff);
  box-shadow:0 0 8px var(--pc,#fff),0 0 2px #fff;opacity:0;animation:gcbP .58s cubic-bezier(.12,.72,.3,1) forwards}
.gcb-p.s{width:16px;height:3px;margin:-1.5px 0 0 -8px;border-radius:2px;animation-name:gcbPs}
@keyframes gcbP{0%{transform:translate(0,0) scale(.4);opacity:1}70%{opacity:1}100%{transform:translate(var(--px),var(--py)) scale(.15);opacity:0}}
@keyframes gcbPs{0%{transform:translate(0,0) rotate(var(--pr)) scaleX(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--px),var(--py)) rotate(var(--pr)) scaleX(.2);opacity:0}}
/* счётчик: крупный, с переливом; чем длиннее комбо — тем ярче и больше */
.gcombo.gcb .gcombo-count{
  position:absolute;left:calc(50% + 24px);top:-20px;z-index:4;
  font-size:38px;letter-spacing:-.03em;padding:0 8px 2px 2px;
  color:#fff;background:linear-gradient(180deg,#ffffff 8%,#ffe9a8 52%,#ffb300 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 0 rgba(120,60,0,.75)) drop-shadow(0 0 12px rgba(255,200,80,.75));
  transform-origin:10% 90%;
}
.gcombo.gcb.gcombo-vote .gcombo-count{background-image:linear-gradient(180deg,#ffffff 8%,#bdf6ff 50%,#39b8ff 100%);filter:drop-shadow(0 2px 0 rgba(10,40,120,.8)) drop-shadow(0 0 12px rgba(90,200,255,.8))}
.gcombo.gcb .gcombo-x{font-size:.66em;margin-right:1px}
.gcombo.gcb .gcombo-count.show.pop{animation:gcbCount .34s cubic-bezier(.2,1.5,.4,1)}
@keyframes gcbCount{0%{transform:scale(1.75) rotate(-9deg)}55%{transform:scale(.93) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
.gcombo.gcb.gct-1 .gcombo-count{font-size:42px;background-image:linear-gradient(180deg,#fff7c2 0,#ffd43b 45%,#ff7a00 100%)}
.gcombo.gcb.gct-2 .gcombo-count{font-size:46px;background-image:linear-gradient(180deg,#ffe98a 0,#ff8a3d 45%,#ff2d8f 100%);filter:drop-shadow(0 2px 0 rgba(120,20,60,.8)) drop-shadow(0 0 14px rgba(255,90,150,.85))}
.gcombo.gcb.gct-3 .gcombo-count{font-size:50px;background-image:linear-gradient(180deg,#ffd0f0 0,#ff3fa4 42%,#8b2cff 100%);filter:drop-shadow(0 2px 0 rgba(70,10,120,.85)) drop-shadow(0 0 16px rgba(200,80,255,.9))}
.gcombo.gcb.gct-4 .gcombo-count,.gcombo.gcb.gct-5 .gcombo-count{font-size:54px;background-image:linear-gradient(90deg,#7df9ff,#ffe066,#ff5fa2,#b388ff,#7df9ff);background-size:300% 100%;animation:gcbRainbow 1.4s linear infinite;filter:drop-shadow(0 2px 0 rgba(30,10,80,.9))}
.gcombo.gcb.gct-4 .gcombo-count.show.pop,.gcombo.gcb.gct-5 .gcombo-count.show.pop{animation:gcbCount .34s cubic-bezier(.2,1.5,.4,1),gcbRainbow 1.4s linear infinite}
@keyframes gcbRainbow{to{background-position:300% 0}}
/* на высоких ступенях шар светится сильнее и вращается быстрее */
.gcombo.gcb.gct-2 .gcb-halo{opacity:.9;animation-duration:2.4s}
.gcombo.gcb.gct-3 .gcb-halo,.gcombo.gcb.gct-4 .gcb-halo,.gcombo.gcb.gct-5 .gcb-halo{opacity:1;animation-duration:1.5s;left:-24px;top:-24px;right:-24px;bottom:-24px}
/* переход на новую ступень — счётчик «ударяет» */
.gcombo.gcb.gct-up.gct-up .gcombo-count.show,.gcombo.gcb.gct-up.gct-up .gcombo-count.show.pop{animation:gcbTierUp .62s cubic-bezier(.2,1.4,.4,1)}
.gcombo.gcb.gct-up.gct-up.gct-4 .gcombo-count.show,.gcombo.gcb.gct-up.gct-up.gct-4 .gcombo-count.show.pop,
.gcombo.gcb.gct-up.gct-up.gct-5 .gcombo-count.show,.gcombo.gcb.gct-up.gct-up.gct-5 .gcombo-count.show.pop{animation:gcbTierUp .62s cubic-bezier(.2,1.4,.4,1),gcbRainbow 1.4s linear infinite}
@keyframes gcbTierUp{0%{transform:scale(2.5) rotate(-14deg)}35%{transform:scale(.88) rotate(4deg)}60%{transform:scale(1.16) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
/* подпись с ценой */
.gcombo.gcb .gcombo-hint{font-size:12.5px;padding:5px 12px;gap:5px;background:rgba(14,12,26,.82);border-color:rgba(255,255,255,.18);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.gcombo.gcb .gcombo-hint .vcoin{height:22px;width:32.5px;margin:-3px -7px;vertical-align:0;flex:none;object-fit:contain}
/* появление и уход */
.gcombo.gcb{animation:gcbIn .42s cubic-bezier(.2,1.5,.35,1) both}
.gcombo.gcb.out{animation:gcbOut .26s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes gcbIn{0%{opacity:0;transform:translateX(-50%) translateY(46px) scale(.3)}60%{opacity:1}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes gcbOut{0%{opacity:1;transform:translateX(-50%) scale(1)}35%{opacity:1;transform:translateX(-50%) scale(1.1)}100%{opacity:0;transform:translateX(-50%) scale(.3)}}

/* ── Эффект голоса ×2: молния летит в фото ── */
.vfx-bolt{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;pointer-events:none;will-change:transform,opacity;opacity:0}
.vfx-bolt svg{display:block;width:100%;height:100%;overflow:visible}
.vfx-bolt path{fill:#fff7c9;stroke:var(--fx,#7df9ff);stroke-width:1.2;stroke-linejoin:round}
.vfx-bolt.head{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--fx,#7df9ff))}
.vfx-bolt.t1,.vfx-bolt.t2,.vfx-bolt.t3{filter:drop-shadow(0 0 8px var(--fx,#7df9ff))}
.vfx-bolt.t1 path,.vfx-bolt.t2 path,.vfx-bolt.t3 path{fill:var(--fx,#7df9ff);stroke:none}
/* удар: всё это лежит в слое страницы и едет вместе с фото */
.vfx-ring,.vfx-arcs,.vfx-spark,.vfx-plus,.vfx-flash{position:absolute;pointer-events:none;z-index:622}
.vfx-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:3px solid #fff;box-sizing:border-box;
  box-shadow:0 0 16px var(--fx),inset 0 0 12px var(--fx);animation:vfxRing .58s cubic-bezier(.15,.7,.3,1) forwards}
.vfx-ring.r2{animation-duration:.72s;animation-delay:.07s;border-width:2px;opacity:0}
@keyframes vfxRing{0%{transform:scale(.3);opacity:1}100%{transform:scale(3.6);opacity:0}}
.vfx-arcs{width:160px;height:160px;margin:-80px 0 0 -80px;animation:vfxArcs .42s steps(1,end) forwards}
.vfx-arcs svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px var(--fx)) drop-shadow(0 0 12px var(--fx))}
.vfx-arcs path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes vfxArcs{0%{opacity:1;transform:scale(.6)}25%{opacity:.25;transform:scale(.9) rotate(8deg)}45%{opacity:1;transform:scale(1.05) rotate(-6deg)}70%{opacity:.4;transform:scale(1.15) rotate(4deg)}100%{opacity:0;transform:scale(1.25)}}
.vfx-spark{width:14px;height:3px;margin:-1.5px 0 0 -7px;border-radius:2px;background:#fff;box-shadow:0 0 8px var(--fx),0 0 3px #fff;opacity:0;animation:vfxSpark .6s cubic-bezier(.1,.75,.3,1) forwards}
@keyframes vfxSpark{0%{transform:translate(0,0) rotate(var(--sr)) scaleX(.4);opacity:1}65%{opacity:1}100%{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scaleX(.15);opacity:0}}
.vfx-plus{margin:-22px 0 0 -30px;width:60px;text-align:center;font-family:'Inter',sans-serif;font-weight:900;font-style:italic;font-size:34px;line-height:44px;letter-spacing:-.02em;white-space:nowrap;
  color:#fff;text-shadow:0 0 10px var(--fx),0 0 22px var(--fx),0 3px 6px rgba(0,0,0,.6);-webkit-text-stroke:1px rgba(255,255,255,.35);
  animation:vfxPlus 1s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes vfxPlus{0%{transform:translate(0,6px) scale(.3);opacity:0}16%{transform:translate(0,-10px) scale(1.25);opacity:1}32%{transform:translate(calc(var(--dx,0px)*.3),-20px) scale(1);opacity:1}100%{transform:translate(var(--dx,0px),-82px) scale(.86);opacity:0}}
.vfx-flash{z-index:620;overflow:hidden;
  background:radial-gradient(circle at var(--fxx,50%) var(--fxy,45%),rgba(255,255,255,.9) 0,var(--fx,#7df9ff) 9%,rgba(255,255,255,0) 46%);
  box-shadow:inset 0 0 0 2px var(--fx,#7df9ff),inset 0 0 22px var(--fx,#7df9ff);
  mix-blend-mode:screen;opacity:0;animation:vfxFlash .5s ease-out forwards}
@keyframes vfxFlash{0%{opacity:.7}100%{opacity:0}}

@media(max-width:380px){
  .gcb-orb{width:84px;height:84px}
  .gcombo.gcb .gcombo-btn{width:80px;height:80px}
  .gcombo.gcb .gcombo-btn img{width:52px;height:52px}
  .gcb-bolt{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){
  .gcb-halo,.gcb-glow,.gcb-bolt,.gcombo.gcb .gcombo-btn img,.gcombo.gcb .gcombo-count{animation:none!important}
  .gcombo.gcb,.gcombo.gcb.out{animation-duration:.01s}
  .vfx-plus{animation-duration:.8s}
}
/* вспышка от подарка — мягче (подарки и так ложатся на фото), счётчик на узких экранах не выходит за край */
.vfx-flash.soft{animation-name:vfxFlashSoft}
@keyframes vfxFlashSoft{0%{opacity:.42}100%{opacity:0}}
.gcombo.gcb .gcombo-count{white-space:nowrap}
@media(max-width:400px){
  .gcombo.gcb .gcombo-count{left:calc(50% + 20px)}
  .gcombo.gcb.gct-2 .gcombo-count{font-size:42px}
  .gcombo.gcb.gct-3 .gcombo-count{font-size:44px}
  .gcombo.gcb.gct-4 .gcombo-count,.gcombo.gcb.gct-5 .gcombo-count{font-size:44px}
}
.gcombo.gcb.gcn-3 .gcombo-count{font-size:44px}
.gcombo.gcb.gcn-4 .gcombo-count{font-size:34px}
@media(max-width:400px){
  .gcombo.gcb.gcn-3 .gcombo-count{font-size:34px}
  .gcombo.gcb.gcn-4 .gcombo-count{font-size:26px}
}

/* ═══════════════ v219 — страница батла: тонкая длинная шкала, один таймер, все кнопки одним рядом под шкалой ═══════════════ */
/* Убрано повторяющееся: кнопки под фото и «В топ» между фото (теперь в ряду под шкалой),
   счётчик лайков на фото (он есть на шкале), верхний блок с таймером (таймер остался над шкалой),
   ник и фото в кружке у шкалы. */
#duel .duel-action-row{display:none!important}
#duel .duel-vs-col .duel-promote-btn{display:none!important}
#duel .duel-votes-badge{display:none!important}
#page-battle .battle-top-bar{display:none!important}
.vote-scale.pk2 .pk-user{display:none!important}

/* Панель — по ширине двух фото (точную ширину ставит скрипт: от левого края фото A до правого края фото B) */
.vote-scale.pk2{max-width:100%;box-sizing:border-box;padding:10px 12px 12px!important}
.vote-scale.pk2 .pk-top{display:flex;justify-content:center;align-items:center;margin-bottom:8px;min-height:24px}
.vote-scale.pk2 .pk-clock{font-size:19px;line-height:1.1}
.vote-scale.pk2 .pk-clock.fin{font-size:12.5px}
/* Шкала тоньше */
.vote-scale.pk2 .pk-row{display:block}
.vote-scale.pk2 .pk-bar{height:16px}
.vote-scale.pk2 .pk-num{font-size:12px}
.vote-scale.pk2 .pk-num.l{left:10px}
.vote-scale.pk2 .pk-num.r{right:10px}
.vote-scale.pk2 .pk-bolt{width:24px;height:36px;margin:-18px 0 0 -12px}
.vote-scale.pk2 .pk-fill::before{background-size:16px 16px;animation-name:pkStripeSm}
/* итог завершённого батла — под таймером */
.pk-result{text-align:center;font-size:14px;font-weight:800;line-height:1.3;color:var(--t1);margin:-2px 0 8px;overflow-wrap:anywhere}
.pk-result:empty{display:none}
.pk-result .finished-winner{margin:0;padding:0;background:none;border:none;font-size:inherit;color:inherit}
.pk-result b{color:#ffd76a}
html[data-theme="light"] .pk-result b{color:#b26a00}

/* Ряд кнопок: слева — сторона A, по центру — «В топ», справа — сторона B */
.pk-acts{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-top:12px}
.pk-acts.pk-acts-empty{display:none}
.pk-side{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.pk-side.pk-hide,.pk-mid.pk-hide{visibility:hidden;pointer-events:none}
/* вход ещё определяется — кнопки сторон появятся мягко, когда станет ясно, чьи они */
.pk-side{transition:opacity .24s ease}
.pk-side.pk-wait{opacity:0;pointer-events:none}
.pk-mid{display:flex;align-items:center;justify-content:center;min-width:0}
.vote-scale.pk2 .pk-gift{width:52px;height:52px;min-height:0!important;flex:none;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.vote-scale.pk2 .pk-gift img{width:52px;height:52px}
.vote-scale.pk2 .pk-gift:active{transform:scale(.9)}

/* Кнопка лайка: сначала сердечко, после лайка переворачивается в ×2 */
.pkl{position:relative;flex:none;width:52px;height:52px;min-height:0!important;padding:0;border:none;border-radius:50%;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;-webkit-perspective:320px;perspective:320px;touch-action:manipulation;transition:opacity .2s}
.pkl-face{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.3,1.35,.5,1),opacity .22s ease;will-change:transform,opacity}
.pkl-heart{
  background:radial-gradient(circle at 50% 30%,#4a1450 0,#22103a 55%,#120a24 100%);
  box-shadow:inset 0 0 0 2px #ff62b8,inset 0 0 12px rgba(255,90,180,.6),0 0 12px rgba(255,70,160,.55),0 4px 10px rgba(0,0,0,.4);
}
.pkl-heart svg{width:58%;height:58%;overflow:visible;filter:drop-shadow(0 0 5px rgba(255,90,170,.95)) drop-shadow(0 2px 2px rgba(0,0,0,.35));animation:pklBeat 1.7s ease-in-out infinite}
@keyframes pklBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.16)}24%{transform:scale(.98)}36%{transform:scale(1.12)}50%{transform:scale(1)}}
.pkl-x2 img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.pkl.is-like .pkl-heart,.pkl.is-liked .pkl-heart,.pkl.is-off .pkl-heart{transform:rotateY(0) scale(1);opacity:1}
.pkl.is-like .pkl-x2,.pkl.is-liked .pkl-x2,.pkl.is-off .pkl-x2{transform:rotateY(-180deg) scale(.55);opacity:0;pointer-events:none}
.pkl.is-x2 .pkl-heart{transform:rotateY(180deg) scale(.55);opacity:0;pointer-events:none}
.pkl.is-x2 .pkl-x2{transform:rotateY(0) scale(1);opacity:1}
.pkl.is-x2 .pkl-heart svg,.pkl.is-liked .pkl-heart svg,.pkl.is-off .pkl-heart svg{animation:none}
.pkl.pkl-noanim .pkl-face{transition:none!important}
.pkl:active .pkl-face{filter:brightness(1.15)}
.pkl.is-liked{cursor:default}
.pkl.is-liked .pkl-heart{box-shadow:inset 0 0 0 2px #ff8ccd,inset 0 0 16px rgba(255,110,190,.9),0 0 18px rgba(255,80,170,.85),0 4px 10px rgba(0,0,0,.4)}
.pkl.is-off{cursor:default;opacity:.38}
.pkl.vote-pending{opacity:.55;pointer-events:none}
.pkl:focus-visible{outline:3px solid #ffd166;outline-offset:3px}
.pkl.pkl-press{animation:pklPress .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes pklPress{0%{transform:scale(.84)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.pkl.pkl-morph{animation:pklMorph .75s cubic-bezier(.3,1.3,.5,1)}
@keyframes pklMorph{0%{transform:scale(1)}22%{transform:scale(1.34)}50%{transform:scale(.9)}74%{transform:scale(1.08)}100%{transform:scale(1)}}
/* искры и сердечки вокруг кнопки в момент лайка */
.pkl-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.pkl-fx i{position:absolute;display:block;pointer-events:none}
.pkl-ring{left:0;top:0;width:100%;height:100%;border-radius:50%;box-sizing:border-box;border:3px solid #fff;box-shadow:0 0 14px #ff5fb8,inset 0 0 10px #ff5fb8;animation:pklRing .6s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes pklRing{from{transform:scale(.8);opacity:1}to{transform:scale(2.5);opacity:0}}
.pkl-p{left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px #ff5fb8,0 0 2px #fff;opacity:0;animation:pklP .7s cubic-bezier(.12,.72,.3,1) forwards}
.pkl-p.h{width:14px;height:14px;margin:-7px 0 0 -7px;background:none;box-shadow:none;border-radius:0}
.pkl-p.h::before{content:"";position:absolute;inset:0;background:#ff5fa8;-webkit-clip-path:path("M7 13C2.5 9.3 0 7.1 0 4.2 0 2 1.7.4 3.8.4 5 .4 6.2 1 7 2 7.8 1 9 .4 10.2.4 12.3.4 14 2 14 4.2c0 2.9-2.5 5.1-7 8.8z");clip-path:path("M7 13C2.5 9.3 0 7.1 0 4.2 0 2 1.7.4 3.8.4 5 .4 6.2 1 7 2 7.8 1 9 .4 10.2.4 12.3.4 14 2 14 4.2c0 2.9-2.5 5.1-7 8.8z");filter:drop-shadow(0 0 4px #ff5fa8)}
@keyframes pklP{0%{transform:translate(0,0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--px),var(--py)) scale(.9);opacity:0}}

/* Кнопка «В топ» */
.pk-topbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;max-width:100%;height:46px;min-height:0!important;
  padding:0 16px 0 11px;border:none;border-radius:999px;cursor:pointer;overflow:hidden;white-space:nowrap;
  font-family:'Inter',sans-serif;font-weight:900;font-size:14.5px;line-height:1;letter-spacing:.01em;color:#fff;text-shadow:0 1px 2px rgba(120,30,0,.55);
  background:linear-gradient(135deg,#ffbe3b 0%,#ff7a1a 44%,#ff3d7f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 9px rgba(140,30,0,.32),0 6px 18px rgba(255,110,40,.45),0 0 0 1px rgba(255,255,255,.16);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s,filter .15s,box-shadow .2s}
.pk-topbtn:active{transform:scale(.94)}
@media(hover:hover){.pk-topbtn:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 9px rgba(140,30,0,.32),0 8px 24px rgba(255,110,40,.6),0 0 0 1px rgba(255,255,255,.2)}}
.pk-topbtn:focus-visible{outline:3px solid #ffd166;outline-offset:3px}
.pkt-txt{position:relative;z-index:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pkt-rocket{position:relative;z-index:1;width:26px;height:26px;flex:none;overflow:visible;transform:rotate(38deg);filter:drop-shadow(0 1px 2px rgba(110,20,0,.5));animation:pktHover 1.9s ease-in-out infinite}
@keyframes pktHover{0%,100%{transform:rotate(38deg) translateY(0)}50%{transform:rotate(38deg) translateY(-2.5px)}}
.pkt-rocket .rk-body,.tfx-rocket .rk-body{fill:#fff}
.pkt-rocket .rk-win,.tfx-rocket .rk-win{fill:#2bb7ff;stroke:#0a5c9c;stroke-width:.8}
.pkt-rocket .rk-fin,.tfx-rocket .rk-fin{fill:#ffd9e8}
.tfx-rocket .rk-fin{fill:#ff4f8b}
.pkt-rocket .rk-flame,.tfx-rocket .rk-flame{fill:#fff1a8;transform-box:fill-box;transform-origin:50% 0;animation:rkFlame .14s linear infinite alternate}
.tfx-rocket .rk-flame{fill:#ffd23d}
@keyframes rkFlame{from{transform:scaleY(.7)}to{transform:scaleY(1.25)}}
/* блик пробегает по кнопке */
.pkt-shine{position:absolute;top:-20%;bottom:-20%;left:-60%;width:42%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);animation:pktShine 3.4s ease-in-out infinite}
@keyframes pktShine{0%,62%{left:-60%}100%{left:130%}}
/* батл уже в топе — кнопка зелёная (поднимать можно и дальше) */
.pk-topbtn.in-top{background:linear-gradient(135deg,#5df2a6 0%,#12c483 46%,#0a9a94 100%);text-shadow:0 1px 2px rgba(0,70,50,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 9px rgba(0,80,60,.3),0 6px 18px rgba(20,200,140,.45),0 0 0 1px rgba(255,255,255,.16)}
/* момент запуска: кнопка «проседает», ракета с неё улетает и возвращается */
.pk-topbtn.launch{animation:pktLaunch .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes pktLaunch{0%{transform:scale(1)}30%{transform:scale(.86)}65%{transform:scale(1.1)}100%{transform:scale(1)}}
.pk-topbtn.launch .pkt-rocket{animation:pktGone 1.45s linear}
@keyframes pktGone{0%,82%{opacity:0;transform:rotate(38deg) scale(.4)}100%{opacity:1;transform:rotate(38deg) scale(1)}}

/* Компьютер и планшет: всё крупнее */
@media(min-width:769px){
  .vote-scale.pk2{padding:14px 20px 16px!important}
  .vote-scale.pk2 .pk-top{margin-bottom:10px}
  .vote-scale.pk2 .pk-clock{font-size:26px}
  .vote-scale.pk2 .pk-bar{height:20px}
  .vote-scale.pk2 .pk-num{font-size:14px}
  .vote-scale.pk2 .pk-num.l{left:14px}.vote-scale.pk2 .pk-num.r{right:14px}
  .vote-scale.pk2 .pk-bolt{width:30px;height:44px;margin:-22px 0 0 -15px}
  .vote-scale.pk2 .pk-fill::before{background-size:20px 20px;animation-name:pkStripe}
  .pk-result{font-size:16px;margin-bottom:10px}
  .pk-acts{margin-top:16px;gap:14px}
  .pk-side{gap:18px}
  .vote-scale.pk2 .pk-gift,.vote-scale.pk2 .pk-gift img,.pkl{width:62px;height:62px}
  .pk-topbtn{height:54px;padding:0 24px 0 16px;font-size:17px;gap:8px}
  .pkt-rocket{width:30px;height:30px}
}
/* Узкие телефоны */
@media(max-width:380px){
  .pk-acts{gap:6px}
  .pk-side{gap:8px}
  .vote-scale.pk2 .pk-gift,.vote-scale.pk2 .pk-gift img,.pkl{width:46px;height:46px}
  .pk-topbtn{height:42px;padding:0 12px 0 8px;font-size:13.5px;gap:4px}
  .pkt-rocket{width:23px;height:23px}
}
@media(max-width:340px){
  .pk-side{gap:5px}
  .vote-scale.pk2 .pk-gift,.vote-scale.pk2 .pk-gift img,.pkl{width:42px;height:42px}
  .pk-topbtn{height:40px;padding:0 10px 0 7px;font-size:12.5px}
  .vote-scale.pk2{padding:9px 9px 11px!important}
}
html[data-theme="light"] .vote-scale.pk2 .pk-clock{color:#1d1530}

/* ── Счётчик потраченных монет у кнопки комбо («−6») ── */
.gcombo-spent{position:absolute;right:calc(50% + 40px);top:-12px;z-index:4;display:flex;align-items:center;gap:1px;white-space:nowrap;pointer-events:none;
  font-family:'Inter',sans-serif;font-weight:900;font-style:italic;font-size:22px;line-height:1;letter-spacing:-.02em;
  color:#ffe1e8;text-shadow:0 1px 0 #8f1239,0 0 10px rgba(255,90,130,.85),0 3px 8px rgba(0,0,0,.5);
  opacity:0;transform:scale(.6);transform-origin:90% 90%;transition:opacity .15s,transform .15s}
.gcombo-spent.show{opacity:1;transform:scale(1)}
.gcombo-spent.show.pop{animation:gcsPop .32s cubic-bezier(.2,1.5,.4,1)}
@keyframes gcsPop{0%{transform:scale(1.5) rotate(7deg)}55%{transform:scale(.94) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
.gcombo-spent .vcoin{height:26px;width:38.5px;margin:0 -9px 0 -7px;vertical-align:0;flex:none;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
@media(max-width:400px){.gcombo-spent{right:calc(50% + 36px);font-size:20px}}

/* ── Фото батла на весь экран (телефон) ── */
.pz-bg{position:fixed;left:0;top:0;right:0;bottom:0;z-index:10600;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pz-dim{position:absolute;left:0;top:0;right:0;bottom:0;background:#05040a;opacity:0;transition:opacity .3s ease}
.pz-bg.open .pz-dim{opacity:1}
.pz-pager{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;overscroll-behavior:contain}
.pz-pager::-webkit-scrollbar{display:none}
.pz-pager.zoomed{overflow-x:hidden;touch-action:none}
.pz-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always}
.pz-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;will-change:transform;-webkit-user-drag:none;transform-origin:50% 50%}
.pz-bg.pz-pre .pz-img{opacity:0}
.pz-bg .pz-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:3;width:40px;height:40px;
  background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.28);opacity:0;transition:opacity .25s,background .15s}
html[data-theme="light"] .pz-bg .pz-x{background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.28)}
.pz-cap{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;opacity:0;transition:opacity .25s}
.pz-bg.open .pz-x,.pz-bg.open .pz-cap{opacity:1}
.pz-name{max-width:80%;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-name:empty{display:none}
.pz-dots{display:flex;gap:7px}
.pz-dots i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.38);transition:background .2s,transform .2s}
.pz-dots i.on{background:#fff;transform:scale(1.3)}

/* ── Эффект «поднятие в топ» ── */
.tfx{position:fixed;left:0;top:0;right:0;bottom:0;z-index:9500;pointer-events:none;overflow:hidden}
.tfx i,.tfx b{position:absolute;display:block;pointer-events:none}
.tfx-rocket{width:66px;height:66px;margin:-33px 0 0 -33px;will-change:transform,opacity;filter:drop-shadow(0 0 10px rgba(255,170,60,.95)) drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.tfx-rocket svg{display:block;width:100%;height:100%;overflow:visible}
.tfx-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;box-sizing:border-box;border:3px solid #ffe9a8;box-shadow:0 0 18px #ff9a2e,inset 0 0 12px #ff9a2e;animation:tfxRing .65s cubic-bezier(.15,.7,.3,1) forwards}
.tfx-ring.r2{border-width:2px;animation-duration:.8s;animation-delay:.08s;opacity:0}
@keyframes tfxRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(4.2);opacity:0}}
.tfx-spark{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff3c4;box-shadow:0 0 8px #ff9a2e;opacity:0;animation:tfxSpark .75s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes tfxSpark{0%{transform:translate(0,0) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(.2);opacity:0}}
.tfx-puff{width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  background:radial-gradient(circle,#fff8d2 0,#ffcb45 34%,#ff6a2a 60%,rgba(255,80,40,0) 72%);opacity:0;animation:tfxPuff .6s ease-out forwards}
@keyframes tfxPuff{0%{transform:translate(0,0) scale(calc(var(--ps,1)*.55));opacity:.95}100%{transform:translate(var(--pd,0px),48px) scale(calc(var(--ps,1)*1.9));opacity:0}}
.tfx-glow{left:0;right:0;top:0;height:48%;background:linear-gradient(180deg,rgba(255,204,96,.6),rgba(255,120,60,.2) 46%,rgba(255,120,60,0));opacity:0;animation:tfxGlow 1.15s ease-out forwards}
@keyframes tfxGlow{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.tfx-star{width:16px;height:16px;margin:-8px 0 0 -8px;background:#ffe27a;opacity:0;
  -webkit-clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:tfxStar 1.15s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes tfxStar{0%{transform:translateY(0) rotate(0) scale(.4);opacity:0}14%{opacity:1}100%{transform:translateY(var(--fy,160px)) rotate(var(--fr,90deg)) scale(1.05);opacity:0}}
#duel.top-boom .duel-card-frame{animation:topBoom 1.2s ease-out}
@keyframes topBoom{0%{filter:brightness(1)}18%{filter:brightness(1.35) drop-shadow(0 0 22px rgba(255,190,70,.95))}100%{filter:brightness(1)}}

@media(prefers-reduced-motion:reduce){
  .pkl-heart svg,.pkt-rocket,.pkt-shine,.pkt-rocket .rk-flame,.pkl.pkl-morph,.pkl.pkl-press,.pk-topbtn.launch{animation:none!important}
  .pkl-face,.pk-side{transition:none!important}
  .gcombo-spent.show.pop{animation:none}
  .pz-dim,.pz-bg .pz-x,.pz-cap{transition:none}
}

/* ═══════════════ v220: без мерцаний — открытие батла, «Live голоса», фото, комментарии ═══════════════ */
/* Батл по ссылке: страница видна сразу — с заготовкой фото нужного размера, а не пустой экран */
html.vz-booting[data-boot="battle"][data-boot-link] #page-battle{display:block;visibility:inherit}
/* Пока батл не нарисован, внутренности панели не показываем (раньше на миг мелькали «--:--», 0 : 0 и сердечки) */
#page-battle.bt-loading #vote-scale .pk-top,
#page-battle.bt-loading #vote-scale .pk-row,
#page-battle.bt-loading #vote-scale .pk-acts,
#page-battle.bt-loading #vote-scale .pk-result{visibility:hidden}
/* Заготовка фото: те же карточки, мягкий перелив */
.duel-sk{pointer-events:none}
.duel-sk .duel-card-frame{background:linear-gradient(100deg,rgba(255,255,255,.035) 20%,rgba(255,255,255,.085) 50%,rgba(255,255,255,.035) 80%);background-size:250% 100%;animation:vzSk 1.5s ease-in-out infinite}
html[data-theme="light"] .duel-sk .duel-card-frame{background:linear-gradient(100deg,rgba(0,0,0,.035) 20%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.035) 80%);background-size:250% 100%}
/* Строки-заготовки (комментарии, «Live голоса») появляются, только если загрузка дольше 0,3 с */
.vz-sk-list{display:flex;flex-direction:column;gap:12px;padding:10px 4px;opacity:0;animation:vzSkIn .25s ease .3s forwards}
.vz-sk-list i{display:block;height:12px;border-radius:6px;background:linear-gradient(100deg,rgba(255,255,255,.05) 20%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 80%);background-size:250% 100%;animation:vzSk 1.5s ease-in-out infinite}
.vz-sk-list i:nth-child(2){width:64%}
html[data-theme="light"] .vz-sk-list i{background:linear-gradient(100deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 80%);background-size:250% 100%}
@keyframes vzSk{0%{background-position:100% 0}100%{background-position:0% 0}}
@keyframes vzSkIn{to{opacity:1}}
.bc-count:empty{visibility:hidden}
/* Фото батла проявляются плавно, когда загрузятся; если фото не загрузилось — пустая карточка без значка ошибки */
#duel .duel-img{opacity:0;transition:opacity .3s ease,transform 1.2s cubic-bezier(.34,1.2,.64,1),outline .15s,box-shadow .15s}
#duel .duel-img.ld{opacity:1}
#duel .duel-img.ld-err{opacity:0!important}
/* Пока фото грузится — тот же мягкий перелив, что у заготовки (в светлой теме — не чёрный прямоугольник) */
#duel .duel-img-wrap:has(> .duel-img:not(.ld)){background-image:linear-gradient(100deg,rgba(255,255,255,.035) 20%,rgba(255,255,255,.085) 50%,rgba(255,255,255,.035) 80%);background-size:250% 100%;animation:vzSk 1.5s ease-in-out infinite}
html[data-theme="light"] #duel .duel-img-wrap{background-color:transparent}
html[data-theme="light"] #duel .duel-img-wrap:has(> .duel-img:not(.ld)){background-image:linear-gradient(100deg,rgba(0,0,0,.035) 20%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.035) 80%)}
/* «Live голоса»: строки, которые уже были на экране, не анимируются заново (раньше лента мигала) */
.vf-item.vf-old,.vf-calm .vf-item{animation:none}
/* Поднятие в топ — своей строкой в ленте */
.vf-dot.tp{background:#ffb02e;box-shadow:0 0 8px rgba(255,160,40,.6)}
.vf-text .vf-top{color:#ffb84d;font-weight:700}
html[data-theme="light"] .vf-text .vf-top{color:#b86a00}
@media(prefers-reduced-motion:reduce){
  .duel-sk .duel-card-frame,.vz-sk-list i,#duel .duel-img-wrap{animation:none!important}
  .vz-sk-list{animation:none;opacity:1}
  #duel .duel-img{transition:none}
}


/* ── v224: итог завершённого батла в панели со шкалой — плашка ниже молнии ──
   Раньше «Ничья» / «Победитель» стояли вплотную к шкале и молния наезжала на текст,
   а плашка «ЗАВЕРШЁН» касалась острия молнии сверху. */
.vote-scale.pk2 .pk-clock.fin{margin-bottom:4px}
.vote-scale.pk2 .pk-result{display:flex;justify-content:center;margin:14px 0 4px;text-align:center}
.pk-res{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;box-sizing:border-box;
  padding:6px 14px;border-radius:999px;font-size:13.5px;font-weight:800;line-height:1.25;letter-spacing:.01em;
  overflow-wrap:anywhere;color:#fff;border:1px solid transparent}
.pk-res-i{font-size:1.1em;line-height:1}
.pk-res-win{background:linear-gradient(135deg,rgba(255,215,106,.16),rgba(255,79,166,.12));border-color:rgba(255,215,106,.38);box-shadow:0 4px 14px rgba(255,190,60,.12)}
.pk-res-win b{color:#ffd76a;font-weight:900}
.pk-res-tie{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.92)}
html[data-theme="light"] .pk-res-win{background:linear-gradient(135deg,#fff6db,#ffeef6);border-color:#f0cf7e;color:#1d1530;box-shadow:0 4px 14px rgba(200,140,20,.12)}
html[data-theme="light"] .pk-res-win b{color:#b26a00}
html[data-theme="light"] .pk-res-tie{background:#f3f0fa;border-color:#ddd5ef;color:#1d1530}
@media(min-width:769px){
  .vote-scale.pk2 .pk-result{margin:16px 0 6px}
  .pk-res{font-size:15px;padding:7px 18px}
}

/* ── v225: рамки фото всегда в цветах шкалы — розовая (A) и голубая (B), в том числе у батла в топе
   (раньше в топе обе рамки становились зелёными); шкала голосов чуть тоньше ── */
.duel.duel-in-top .duel-card:nth-child(1) .duel-card-frame{
  border-color:#ec4899;
  box-shadow:0 0 0 1px rgba(236,72,153,.4),0 0 30px rgba(236,72,153,.7),0 0 60px rgba(236,72,153,.4),0 0 100px rgba(236,72,153,.2),-10px 12px 36px rgba(0,0,0,.6)}
.duel.duel-in-top .duel-card:nth-child(3) .duel-card-frame{
  border-color:#3b82f6;
  box-shadow:0 0 0 1px rgba(59,130,246,.4),0 0 30px rgba(59,130,246,.7),0 0 60px rgba(59,130,246,.4),0 0 100px rgba(59,130,246,.2),10px 12px 36px rgba(0,0,0,.6)}
.duel.duel-in-top .duel-card:nth-child(1):hover:not(.voted) .duel-card-frame{
  box-shadow:0 0 0 1px rgba(236,72,153,.7),0 0 50px rgba(236,72,153,1),0 0 100px rgba(236,72,153,.6),0 0 160px rgba(236,72,153,.3),-14px 18px 48px rgba(0,0,0,.7)}
.duel.duel-in-top .duel-card:nth-child(3):hover:not(.voted) .duel-card-frame{
  box-shadow:0 0 0 1px rgba(59,130,246,.7),0 0 50px rgba(59,130,246,1),0 0 100px rgba(59,130,246,.6),0 0 160px rgba(59,130,246,.3),14px 18px 48px rgba(0,0,0,.7)}
html[data-theme="light"] .duel.duel-in-top .duel-card:nth-child(1) .duel-card-frame{
  box-shadow:0 0 0 1px rgba(236,72,153,.4),0 0 30px rgba(236,72,153,.7),0 0 60px rgba(236,72,153,.4),0 0 100px rgba(236,72,153,.2),-10px 12px 36px rgba(0,0,0,.6)}
html[data-theme="light"] .duel.duel-in-top .duel-card:nth-child(3) .duel-card-frame{
  box-shadow:0 0 0 1px rgba(59,130,246,.4),0 0 30px rgba(59,130,246,.7),0 0 60px rgba(59,130,246,.4),0 0 100px rgba(59,130,246,.2),10px 12px 36px rgba(0,0,0,.6)}
@media(max-width:768px){
  .duel.duel-in-top .duel-card:nth-child(1) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(236,72,153,.35),0 4px 10px rgba(0,0,0,.30)!important}
  .duel.duel-in-top .duel-card:nth-child(3) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(59,130,246,.35),0 4px 10px rgba(0,0,0,.30)!important}
  html[data-theme="light"] .duel.duel-in-top .duel-card:nth-child(1) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(236,72,153,.30),0 4px 10px rgba(20,30,60,.12)!important}
  html[data-theme="light"] .duel.duel-in-top .duel-card:nth-child(3) .duel-card-frame:not(.own-flash){box-shadow:0 0 0 1px rgba(59,130,246,.30),0 4px 10px rgba(20,30,60,.12)!important}
}
.vote-scale.pk2 .pk-bar{height:13px}
.vote-scale.pk2 .pk-num{font-size:10.5px}
.vote-scale.pk2 .pk-num.l{left:9px}
.vote-scale.pk2 .pk-num.r{right:9px}
@media(min-width:769px){
  .vote-scale.pk2 .pk-bar{height:16px}
  .vote-scale.pk2 .pk-num{font-size:12.5px}
  .vote-scale.pk2 .pk-num.l{left:12px}.vote-scale.pk2 .pk-num.r{right:12px}
}

/* ── v228: список подписчиков/подписок — заготовки строк вместо пустого белого окна ── */
.fl-sk{cursor:default;pointer-events:none}
.fl-sk:hover{background:none}
.fl-sk .fl-avatar,.fl-sk .fl-sk-l,.fl-sk .fl-sk-s,.fl-sk .fl-sk-b{display:block;
  background:linear-gradient(100deg,rgba(255,255,255,.04) 20%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 80%);
  background-size:250% 100%;animation:vzSk 1.4s ease-in-out infinite}
html[data-theme="light"] .fl-sk .fl-avatar,html[data-theme="light"] .fl-sk .fl-sk-l,
html[data-theme="light"] .fl-sk .fl-sk-s,html[data-theme="light"] .fl-sk .fl-sk-b{
  background:linear-gradient(100deg,rgba(20,10,50,.05) 20%,rgba(20,10,50,.10) 50%,rgba(20,10,50,.05) 80%);background-size:250% 100%}
.fl-sk-l{height:13px;width:62%;border-radius:7px;margin:3px 0 7px}
.fl-sk-s{height:10px;width:42%;border-radius:6px}
.fl-sk-b{width:104px;height:38px;border-radius:12px;flex-shrink:0;margin-left:auto}
@media(max-width:480px){ .fl-sk-b{width:88px;height:32px} }
/* готовый список проявляется мягко, аватарки — по мере загрузки */
.fl-list.fl-in .fl-item{animation:flIn .22s ease both}
.fl-list.fl-in .fl-item:nth-child(2){animation-delay:.03s}
.fl-list.fl-in .fl-item:nth-child(3){animation-delay:.06s}
.fl-list.fl-in .fl-item:nth-child(4){animation-delay:.09s}
.fl-list.fl-in .fl-item:nth-child(n+5){animation-delay:.12s}
@keyframes flIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
img.fl-avatar{opacity:0;transition:opacity .2s ease}
img.fl-avatar.fl-ok{opacity:1}
@media (prefers-reduced-motion:reduce){ .fl-list.fl-in .fl-item{animation:none} .fl-sk *{animation:none!important} img.fl-avatar{transition:none} }

/* ── v229: окно вывода — сколько можно вывести сейчас и что ещё держится 30 дней ── */
.wm-avail{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--br);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.wm-avail-n{font-weight:700;color:var(--t1)}
.wm-avail-lock{margin-top:5px;color:#f59e0b}
html[data-theme="light"] .wm-avail-lock{color:#b45309}

/* ── v230: сердечко-голос отвечает сразу — пока сервер принимает голос, вокруг крутится кольцо ── */
.vote-scale .pkl.vote-pending{opacity:1;pointer-events:auto}
.vote-scale .pkl.vote-pending .pkl-face{filter:brightness(1.12)}
.vote-scale .pkl.vote-pending::after{content:'';position:absolute;inset:-5px;border-radius:50%;pointer-events:none;z-index:3;
  border:2.5px solid rgba(255,98,184,.22);border-top-color:#ff62b8;border-right-color:#ff9bd2;
  animation:pklSpin .7s linear infinite;box-shadow:0 0 12px rgba(255,80,170,.35)}
.vote-scale .pkl.r.vote-pending::after{border-color:rgba(56,189,248,.22);border-top-color:#38bdf8;border-right-color:#93dcfb;box-shadow:0 0 12px rgba(56,189,248,.35)}
@keyframes pklSpin{to{transform:rotate(360deg)}}
.vote-scale .pkl.pkl-nudge{animation:pklNudge .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes pklNudge{0%{transform:scale(1)}35%{transform:scale(.88)}70%{transform:scale(1.06)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.vote-scale .pkl.vote-pending::after{animation-duration:1.6s}.vote-scale .pkl.pkl-nudge{animation:none}}

/* ── v230: после голоса оба фото остаются чёткими и яркими. Раньше фото, за которое не голосовали,
   становилось полупрозрачным (70%) — на телефоне оно выглядело блёклым и «размытым».
   Пока голос отправляется, карточка тоже не тускнеет — ожидание показывает кольцо вокруг сердечка. ── */
.duel-card.loser,#duel .duel-card.loser{opacity:1}
.duel-card.vote-pending{opacity:1}

/* ── v230: плашка «@кто поднял батл в топ» — её видят все зрители батла вместе с ракетой ── */
.tfx-who{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);z-index:9600;pointer-events:none;
  display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);box-sizing:border-box;
  padding:9px 16px 9px 10px;border-radius:999px;color:#fff;font-weight:800;font-size:14px;line-height:1.25;
  background:linear-gradient(135deg,#ff8a00 0%,#ff4d6d 55%,#c026d3 100%);
  box-shadow:0 10px 28px rgba(255,77,109,.45),0 0 0 1px rgba(255,255,255,.18) inset;
  transform:translate(-50%,-16px) scale(.92);opacity:0;transition:transform .42s cubic-bezier(.3,1.4,.5,1),opacity .3s ease}
.tfx-who.show{transform:translate(-50%,0) scale(1);opacity:1}
.tfx-who.hide{transform:translate(-50%,-10px) scale(.96);opacity:0;transition:transform .35s ease,opacity .35s ease}
.tfx-who-ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);font-size:16px;
  animation:tfxWhoIc 1.1s ease-in-out infinite}
.tfx-who-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes tfxWhoIc{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-3px) rotate(6deg)}}
@media (min-width:900px){.tfx-who{top:88px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.tfx-who,.tfx-who.show,.tfx-who.hide{transition:opacity .2s}.tfx-who-ic{animation:none}}