*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#070a10;--surface:#0d1017;--card:#111520;--border:#161c28;
  --accent:#ff9ec4;--accent2:#d98ac0;--hot:#ff4060;
  --text:#dce3f0;--muted:#5a6480;--faint:#1a2030;
}


/* ── GAMES WIDGET ── */
.games-widget{position:relative;display:inline-flex;align-items:center;}
.games-logo-btn{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:none;padding:0;
  transition:opacity .2s;
}
.games-logo-btn:hover{opacity:.8;}
/* ── NAV ROW 3: games bar (opens via logo click) ── */
.games-bar{
  position:fixed;top:124px;left:50%;transform:translateX(-50%);
  width:1000px;max-width:100%;
  z-index:1000;
  background:#05080e;
  display:none;align-items:center;justify-content:center;
  gap:4px;
  padding:6px 24px;height:auto;min-height:58px;
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.games-bar.open{display:flex;}
.games-bar-item{
  display:flex;align-items:center;justify-content:center;
  padding:6px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;
  transition:background .2s,border-color .2s;
  text-decoration:none;
}
.games-bar-item:hover{
  background:rgba(255,158,196,.06);
  border-color:rgba(255,158,196,.15);
}
.games-bar-item.active{
  background:rgba(255,158,196,.08);
  border-color:rgba(255,158,196,.25);
}
/* Logos are shown in FULL — cropping them was a mistake, their own frames stay as they were.
   Only 2px smaller (42->40); item padding grows 1px per side so the selected-game highlight
   box keeps exactly its original size. */
.games-bar-item{padding:7px!important;}
.games-bar-item .game-logo-icon{
  width:40px;height:40px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:20px;
}
.games-bar-item.slot-empty{
  opacity:.35;cursor:default;
}
.games-bar-item.slot-empty:hover{
  background:none;border-color:transparent;
}
.games-chevron{
  width:10px;height:10px;color:var(--muted);
  transition:transform .2s;margin-left:2px;flex-shrink:0;
}
.games-widget.open .games-chevron{transform:rotate(180deg);}
/* скрываем старый дропдаун */
.games-dropdown{display:none !important;}

*{scrollbar-width:none;-ms-overflow-style:none;} *::-webkit-scrollbar{display:none;width:0;height:0;}
html,body{background:transparent;color:var(--text);font-family:'Inter',sans-serif;overflow-x:hidden;overflow-y:auto;min-height:100vh;scroll-behavior:smooth;}


/* ── ГЛОБАЛЬНЫЙ ВИДЕО-ФОН ── */
#bgVideo{
  position:fixed; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
  pointer-events:none;
}
#bgVideoOverlay{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(5,8,14,.55);
}

/* ── ГЛОБАЛЬНЫЙ МАТРИЧНЫЙ ФОН ── */
#globalMatrix{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.25;
}

#globalMatrixVignette{display:none;}

body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,158,196,0.013) 2px,rgba(255,158,196,0.013) 4px);pointer-events:none;z-index:998}

/* ── CENTER COLUMN ── */
.gc{
  max-width:1000px;
  width:100%;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  background:#070a10;
}
/* декоративные полоски по бокам */
.side-line{
  position:fixed;
  top:0;bottom:0;
  width:2px;
  pointer-events:none;
  z-index:500;
  overflow:hidden;
  transition:width .3s ease, box-shadow .3s ease;
}
.side-line::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:200%;
  background:repeating-linear-gradient(
    180deg,
    rgba(255,158,196,0.18) 0px,
    rgba(255,158,196,0.18) 8px,
    transparent 8px,
    transparent 18px
  );
  animation:sideScroll 8s linear infinite;
  will-change:transform;
}
/* «искра» — яркая полоска, бегущая по линии при скролле */
.side-line::after{
  content:'';
  position:absolute;
  left:0;right:0;
  height:60px;
  background:linear-gradient(180deg,transparent,rgba(255,158,196,0.7) 50%,transparent);
  top:-80px;
  opacity:0;
  transition:opacity .15s;
  pointer-events:none;
  border-radius:2px;
}
.side-line.scrolling::after{
  opacity:1;
}
@keyframes sideScroll{
  from{transform:translateY(0);}
  to{transform:translateY(-50%);}
}
/* при скролле — ускорение и яркость */
.side-line.scrolling{
  width:3px;
  box-shadow:0 0 8px rgba(255,158,196,0.5);
}
.side-line.scrolling::before{
  animation-duration:1.2s;
  background:repeating-linear-gradient(
    180deg,
    rgba(255,158,196,0.55) 0px,
    rgba(255,158,196,0.55) 8px,
    transparent 8px,
    transparent 18px
  );
}
.side-line-left{left:calc(50% - 500px - 10px);}
.side-line-right{left:calc(50% + 500px + 10px);}
.side-line::after{display:none!important;}

/* ── TOP HEADER ── */
.top-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:1000px;max-width:100%;
  height:80px;
  z-index:1001;
  overflow:visible;
  /* Непрозрачный фон: текст страницы не должен просвечивать при прокрутке */
  background:linear-gradient(180deg,#000 0%,#070a10 100%);
  border-bottom:1px solid rgba(255,158,196,.12);
}
.top-header-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,158,196,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,158,196,.04) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,black 30%,transparent 100%);
}
.top-header-particles{position:absolute;inset:0;pointer-events:none;}
.top-header-content{
  position:relative;z-index:2;
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 60px;
}
.top-header-left{display:flex;flex-direction:column;gap:3px;}
.top-header-title{
  font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;
  color:#fff;letter-spacing:2px;line-height:1;text-align:left;
}
.top-header-title span{color:var(--accent);}
.top-header-sub{
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:400;
  letter-spacing:4px;color:var(--muted);text-transform:uppercase;
}
.top-header-right{display:flex;align-items:center;gap:4px;}
.top-header-center{display:flex;align-items:center;gap:0;margin-left:auto;}
.top-header-stat{text-align:center;}
.top-header-stat-num{
  font-family:'Orbitron',sans-serif;font-size:16px;font-weight:900;
  color:var(--accent);line-height:1;
}
.top-header-stat-label{
  font-size:8px;color:var(--muted);letter-spacing:1.5px;
  text-transform:uppercase;margin-top:2px;
}
.top-header-divider{width:1px;height:28px;background:var(--border);flex-shrink:0;align-self:center;}
/* both rules around the desktop globe are this same element with the same margins,
   so the left and right one look identical */
.top-header-divider.desktop-only{margin:0 5px;}
.top-header-btn{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);background:transparent;border:none;cursor:pointer;
  padding:6px 10px;border-radius:4px;white-space:nowrap;
  transition:color .2s,background .2s;
}
.top-header-btn:hover,.top-header-btn.active{color:var(--accent);background:rgba(255,158,196,.06);}
.top-header-btn.active,.nav2-btn.active,.nav-link.active{pointer-events:none;cursor:default;}
.join-disabled{pointer-events:none!important;opacity:.55;animation:none!important;box-shadow:none!important;}
.top-header-scan{
  position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,158,196,.6),transparent);
  animation:headerScan 4s ease-in-out infinite;
}
@keyframes joinPulse{
  0%,100%{box-shadow:0 0 8px rgba(0,255,136,.25);border-color:rgba(0,255,136,.35);}
  50%{box-shadow:0 0 18px rgba(0,255,136,.55),0 0 30px rgba(0,255,136,.2);border-color:rgba(0,255,136,.7);}
}
@keyframes headerScan{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}

/* ── TOP NAV ── */
.nav{
  position:fixed;top:80px;left:50%;transform:translateX(-50%);
  width:1000px;max-width:100%;
  z-index:1000;
  background:#070a10;
  display:flex;align-items:center;
  padding:0 110px;height:52px;
  border-bottom:1px solid var(--border);
}
.nav-logo{
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:900;
  color:#fff;letter-spacing:1px;margin-right:auto;text-decoration:none;
  display:flex;align-items:center;gap:8px;cursor:pointer;
}
.nav-logo span{color:var(--accent);}
.nav-logo-dot{width:6px;height:6px;border-radius:50%;background:#00ff88;animation:blink 2s infinite;flex-shrink:0;}
.nav-links{display:flex;gap:2px;}
.nav-link{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  padding:6px 8px;border-radius:4px;white-space:nowrap;
  transition:color .2s,background .2s;
  cursor:pointer;border:none;background:transparent;
}
.nav-link:hover,.nav-link.active{color:var(--accent);background:rgba(255,158,196,.06);}

/* ── PAGES ── */
.page{display:none;padding-top:90px;min-height:100vh;padding-bottom:120px;position:relative;z-index:2;}
.page.active{display:block;}

/* ── ANIMATIONS ── */
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 6px #00ff88}50%{opacity:.3;box-shadow:none}}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{text-shadow:0 0 8px rgba(255,158,196,.12)}50%{text-shadow:0 0 14px rgba(255,158,196,.22)}}
.page.active .wrap > *{}
.page.active .wrap > *:nth-child(1){animation-delay:.05s}
.page.active .wrap > *:nth-child(2){animation-delay:.1s}
.page.active .wrap > *:nth-child(3){animation-delay:.15s}
.page.active .wrap > *:nth-child(4){animation-delay:.2s}
.page.active .wrap > *:nth-child(5){animation-delay:.25s}
.page.active .wrap > *:nth-child(6){animation-delay:.3s}
.page.active .wrap > *:nth-child(n+7){animation-delay:.3s}

/* wrap children hidden by default, animated in when page becomes visible */
.page .wrap > *{
  opacity:0;
  transform:translateY(14px);
  animation:none;
}
.page.page-visible .wrap > *{
  animation:fadeIn .85s ease forwards;
}
.page.page-visible .wrap > *:nth-child(1){animation-delay:.08s}
.page.page-visible .wrap > *:nth-child(2){animation-delay:.18s}
.page.page-visible .wrap > *:nth-child(3){animation-delay:.28s}
.page.page-visible .wrap > *:nth-child(4){animation-delay:.38s}
.page.page-visible .wrap > *:nth-child(5){animation-delay:.48s}
.page.page-visible .wrap > *:nth-child(6){animation-delay:.56s}
.page.page-visible .wrap > *:nth-child(7){animation-delay:.62s}
.page.page-visible .wrap > *:nth-child(8){animation-delay:.67s}
.page.page-visible .wrap > *:nth-child(9){animation-delay:.71s}
.page.page-visible .wrap > *:nth-child(10){animation-delay:.74s}
.page.page-visible .wrap > *:nth-child(11){animation-delay:.77s}
.page.page-visible .wrap > *:nth-child(12){animation-delay:.80s}
.page.page-visible .wrap > *:nth-child(n+13){animation-delay:.60s}

/* lore page — всё статично, без анимаций */
#page-lore .wrap > *,
#page-lore.page-visible .wrap > *{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  transition:none !important;
}

/* profile page — без wrap, отображаем сразу */
#page-profile > *,
#page-profile.page-visible > *{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
#page-profile{padding-top:124px;}

/* ── WRAP ── */
.wrap{padding:0 110px;}

/* ── HATCH DIVIDER ── */
.hatch{
  width:100%;height:6px;overflow:hidden;position:relative;opacity:.7;
  margin:16px 0;
}
.hatch::before{
  content:'';
  position:absolute;top:0;left:0;
  width:200%;height:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cline x1='10' y1='0' x2='2' y2='6' stroke='%231e2a3a' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  animation:hatchScroll 16s linear infinite;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s cubic-bezier(.4,0,.2,1);
}
.hatch.revealed::before{clip-path:inset(0 0% 0 0);}
@keyframes hatchScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ── HERO ── */
.hero-block{position:relative;padding:48px 0 36px;overflow:hidden;}
.hero-bg{display:none;}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,158,196,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,158,196,.03) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 80% 100% at 10% 50%,black 10%,transparent 70%);pointer-events:none;}

.status-row{display:flex;align-items:center;gap:12px;margin-bottom:22px;position:relative;z-index:1;}
.status-dot{width:8px;height:8px;border-radius:50%;background:#ff9ec4;animation:blink 2s infinite;flex-shrink:0;}
.status-text{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#ff9ec4;}
.status-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,158,196,.3),transparent);}

.hero-title{font-family:'Orbitron',sans-serif;font-size:52px;font-weight:900;line-height:.92;letter-spacing:-1.5px;color:#fff;margin-bottom:8px;position:relative;z-index:1;}
.hero-title span{color:var(--accent);}
.hero-title.sm{font-size:38px;}
.hero-sub{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:400;letter-spacing:5px;color:var(--muted);margin-bottom:22px;text-transform:uppercase;position:relative;z-index:1;}
.genre-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;position:relative;z-index:1;}
.genre-main{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:#000;background:var(--accent);padding:7px 18px;border-radius:4px;text-transform:uppercase;}
.genre-tag{font-size:11px;color:var(--muted);border:1px solid var(--border);padding:5px 12px;border-radius:4px;letter-spacing:1px;}
.hero-desc{font-size:13px;color:#8090b0;line-height:1.85;max-width:500px;position:relative;z-index:1;}

/* ── SECTION HEADER ── */
.sec-head{display:flex;align-items:center;gap:10px;padding:16px 0;}
.sec-label{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);opacity:.7;}
.sec-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,158,196,.35),transparent);}
.sec-num{font-family:'Orbitron',sans-serif;font-size:10px;color:var(--muted);letter-spacing:1px;}

/* ── LORE ── */
.lore-block{
  border-left:2px solid var(--accent2);padding:16px 20px;background:rgba(123,94,167,.06);border-radius:0 8px 8px 0;margin-bottom:16px;
}
.lore-text{font-size:13px;color:#9aa8c8;line-height:1.9;font-style:italic;}
.lore-sig{font-family:'Orbitron',sans-serif;font-size:9px;color:var(--muted);letter-spacing:2px;margin-top:10px;text-transform:uppercase;}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
.stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.stat.visible{opacity:1;transform:translateY(0);animation:neonPulse 3s ease-in-out infinite;}
.stat:nth-child(2){animation-delay:1s;}
.stat:nth-child(3){animation-delay:2s;}
@keyframes neonPulse{
  0%,100%{border-color:var(--border);box-shadow:none;}
  50%{border-color:rgba(255,158,196,.6);box-shadow:0 0 12px rgba(255,158,196,.2),inset 0 0 12px rgba(255,158,196,.05);}
}
.stat-num{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:900;color:var(--accent);line-height:1;display:flex;align-items:center;justify-content:center;min-height:24px;}
.stat-label{font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:1px;}

/* ── TECH ── */
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.tech{
  background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 12px;text-align:center;
  opacity:0;transform:translateY(-10px);
  transition:opacity .7s ease, transform .7s ease, border-color .7s ease, box-shadow .7s ease;
  position:relative;overflow:hidden;
}
.tech.scanned{
  opacity:1;transform:translateY(0);
  border-color:rgba(255,158,196,.35);
  box-shadow:0 0 10px rgba(255,158,196,.12), inset 0 0 8px rgba(255,158,196,.04);
}
.tech::after{
  content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,158,196,.8),transparent);
  top:-2px;transition:top .7s ease;pointer-events:none;
}
.tech.scanned::after{top:110%;}
.tech-name{font-family:'Orbitron',sans-serif;font-size:10px;color:var(--accent);margin-bottom:4px;font-weight:700;}
.tech-desc{font-size:10px;color:var(--muted);}

/* ── TEAM ── */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.member{
  background:var(--card);border-radius:10px;padding:20px;
  position:relative;
  opacity:0;transform:translateY(12px);
  transition:opacity .7s ease,transform .7s ease;
}
.member.visible{opacity:1;transform:translateY(0);}
.member::before{
  content:'';
  position:absolute;inset:-1px;
  border-radius:10px;
  background:transparent;
  pointer-events:none;
}
/* SVG-like border trace via box-shadow + clip trick using outline animation */
.member-border{
  position:absolute;inset:-1px;border-radius:10px;pointer-events:none;
  overflow:hidden;
}
.member-border::before,
.member-border::after{
  content:'';
  position:absolute;
  background:rgba(255,158,196,.9);
  filter:drop-shadow(0 0 4px rgba(255,158,196,1));
  border-radius:2px;
  animation-duration:3.5s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-play-state:paused;
}
.member.visible .member-border::before,
.member.visible .member-border::after{
  animation-play-state:running;
}
/* top-left half: starts center-top, goes left then down left side */
.member-border::before{
  top:0;left:50%;width:2px;height:2px;
  transform-origin:top left;
  animation-name:traceLeft;
}
/* top-right half: starts center-top, goes right then down right side */
.member-border::after{
  top:0;right:50%;width:2px;height:2px;
  transform-origin:top right;
  animation-name:traceRight;
}
@keyframes traceLeft{
  0%   {top:0;left:50%;width:2px;height:2px;opacity:0;}
  5%   {opacity:1;}
  /* go left along top */
  25%  {top:0;left:0;width:2px;height:2px;}
  /* go down left side */
  55%  {top:calc(100% - 2px);left:0;width:2px;height:2px;}
  /* go right along bottom to center */
  75%  {top:calc(100% - 2px);left:50%;width:2px;height:2px;}
  85%  {opacity:1;}
  100% {top:calc(100% - 2px);left:50%;width:2px;height:2px;opacity:0;}
}
@keyframes traceRight{
  0%   {top:0;right:50%;width:2px;height:2px;opacity:0;}
  5%   {opacity:1;}
  25%  {top:0;right:0;width:2px;height:2px;}
  55%  {top:calc(100% - 2px);right:0;width:2px;height:2px;}
  75%  {top:calc(100% - 2px);right:50%;width:2px;height:2px;}
  85%  {opacity:1;}
  100% {top:calc(100% - 2px);right:50%;width:2px;height:2px;opacity:0;}
}
.member:nth-child(2) .member-border::before,
.member:nth-child(2) .member-border::after{animation-delay:0s;}
.member-exp-badge{
  position:absolute;top:14px;right:14px;
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  color:var(--accent);border:1px solid rgba(255,158,196,.3);
  padding:3px 8px;border-radius:3px;letter-spacing:1px;
}
.member-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:14px;font-weight:900;color:#fff;margin-bottom:12px;}
.member-name{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;color:#fff;margin-bottom:4px;}
.member-role{font-size:11px;color:var(--accent);margin-bottom:8px;letter-spacing:.5px;}
.member-exp{font-size:11px;color:var(--muted);line-height:1.5;}

/* ── ANIMATED HATCH ── */
.hatch-animated{
  width:100%;height:6px;margin-top:16px;overflow:hidden;position:relative;
}
.hatch-animated::before{
  content:'';
  position:absolute;top:0;left:0;
  width:200%;height:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cline x1='10' y1='0' x2='2' y2='6' stroke='%23ff9ec4' stroke-width='1' stroke-opacity='0.3'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  animation:hatchScroll 16s linear infinite;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s cubic-bezier(.4,0,.2,1);
}
.hatch-animated.revealed::before{
  clip-path:inset(0 0% 0 0);
}


/* ── ROLES ── */
.roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.role{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s,clip-path 1.2s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;clip-path:inset(0 100% 0 0);}
.role:nth-child(1){transition-delay:.15s;}
.role:nth-child(2){transition-delay:.3s;}
.role:nth-child(3){transition-delay:.9s;}
.role:nth-child(4){transition-delay:1.2s;}
.roles-grid.revealed .role{clip-path:inset(0 0% 0 0);}
.role:hover{border-color:rgba(255,158,196,.3);transform:translateY(-2px);}
.role.hot{border-color:rgba(255,158,196,.4);}
.role.hot::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));}
.role-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.role-name{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;color:#fff;letter-spacing:.5px;}
.role-badge{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);border:1px solid rgba(255,158,196,.3);padding:2px 8px;border-radius:3px;}
.role-desc{font-size:12px;color:var(--muted);line-height:1.65;flex:1;}
.role-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.role-tag{font-size:10px;color:var(--muted);border:1px solid var(--border);padding:2px 7px;border-radius:3px;}
.role-corner{position:absolute;bottom:12px;right:14px;font-family:'Orbitron',sans-serif;font-size:9px;color:var(--border);letter-spacing:1px;}

/* ── ALERT ── */
.alert{display:flex;gap:12px;align-items:flex-start;background:rgba(255,180,0,.04);border:1px solid rgba(255,180,0,.12);border-radius:8px;padding:13px 16px;margin-top:16px;}
.alert-text{font-size:12px;color:#8090b0;line-height:1.65;}
.alert-text strong{color:#ffb400;}

/* ── PERKS ── */
.perks-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.perk{
  display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:15px;
  opacity:0;transform:translateY(-10px);
  transition:opacity .7s ease, transform .7s ease, border-color .7s ease, box-shadow .7s ease;
  position:relative;overflow:hidden;
}
.perk::after{
  content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,158,196,.8),transparent);
  top:-2px;transition:top .7s ease;pointer-events:none;
}
.perk:nth-child(1){transition-delay:.1s;}
.perk:nth-child(2){transition-delay:.15s;}
.perk:nth-child(3){transition-delay:.3s;}
.perk:nth-child(4){transition-delay:.45s;}
.perks-grid.revealed .perk{
  opacity:1;transform:translateY(0);
  border-color:rgba(255,158,196,.35);
  box-shadow:0 0 10px rgba(255,158,196,.12), inset 0 0 8px rgba(255,158,196,.04);
}
.perks-grid.revealed .perk::after{top:110%;}
.perk.scanned{
  opacity:1;transform:translateY(0);
  border-color:rgba(255,158,196,.35);
  box-shadow:0 0 10px rgba(255,158,196,.12), inset 0 0 8px rgba(255,158,196,.04);
}
.perk.scanned::after{top:110%;}
.perk-ico{width:20px;height:20px;flex-shrink:0;margin-top:1px;}
.perk-body{}
.perk-title{font-family:'Orbitron',sans-serif;font-size:10px;color:#fff;margin-bottom:4px;letter-spacing:.5px;}
.perk-text{font-size:12px;color:#6070a0;line-height:1.55;}

/* ── TIMELINE ── */
.timeline{display:flex;flex-direction:column;gap:0;margin-bottom:10px;}
.tl-item{display:flex;gap:20px;position:relative;}
.tl-item::before{content:'';position:absolute;left:7px;top:28px;bottom:-20px;width:1px;background:linear-gradient(180deg,var(--border),transparent);}
.tl-item:last-child::before{display:none;}
.tl-dot{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--border);background:var(--bg);
  flex-shrink:0;margin-top:10px;position:relative;z-index:1;
  opacity:0;transform:scale(0);
  transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.tl-dot::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--border);
  animation:dotSpin 3s linear infinite;opacity:0;
  transition:opacity .3s ease;
}
.tl-item.done .tl-dot{border-color:var(--accent);background:rgba(255,158,196,.15);}
.tl-item.done .tl-dot::after{border-top-color:var(--accent);}
.tl-item.now .tl-dot{border-color:#00ff88;background:rgba(0,255,136,.15);box-shadow:0 0 8px rgba(0,255,136,.4);}
.tl-item.now .tl-dot::after{border-top-color:#00ff88;animation:dotSpin 1.2s linear infinite;}
/* у будущих — нет спиннера вообще */
.tl-item:not(.done):not(.now) .tl-dot::after{display:none;}
/* revealed state */
.tl-dot.visible{opacity:1;transform:scale(1);}
.tl-dot.visible::after{opacity:1;}
@keyframes dotSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.tl-body{padding:8px 0 28px;}
.tl-date{font-family:'Orbitron',sans-serif;font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;}
.tl-title{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;color:#fff;margin-bottom:6px;}
.tl-desc{font-size:12px;color:var(--muted);line-height:1.65;}
.tl-badge{display:inline-block;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:2px 8px;border-radius:3px;margin-top:6px;}
.tl-badge.done{color:var(--accent);border:1px solid rgba(255,158,196,.3);}
.tl-badge.now{color:#00ff88;border:1px solid rgba(0,255,136,.3);}
.tl-badge.soon{color:var(--muted);border:1px solid var(--border);}

/* ── FIXED CTA ── */
.cta{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:1000px;max-width:100%;
  z-index:10000;
  background:#000;
  border-top:1px solid var(--border);
  padding:11px 24px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.live-ping{width:6px;height:6px;border-radius:50%;background:#00ff88;animation:blink 2s infinite;flex-shrink:0;}
.cta-links-group{display:flex;align-items:center;gap:8px;margin:0 auto;}
.cta-util-group{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5px;}
.btn{
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:9px 16px;border-radius:6px;border:none;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  transition:opacity .15s,transform .15s;white-space:nowrap;flex-shrink:0;
}
.btn:hover{opacity:.85;transform:translateY(-1px);}
.btn-dc{background:var(--accent);color:#000;}
.btn-tg{background:var(--accent2);color:#fff;}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);border-color:rgba(255,158,196,.3);}

/* CTA icon-only для мобилы — скрыты на десктопе */
.cta-mobile{display:none !important;}
.cta-icon{
  width:44px;height:44px;border-radius:12px;
  align-items:center;justify-content:center;
  text-decoration:none;flex-shrink:0;
  transition:opacity .2s;
}
.cta-icon:active{opacity:.7;}

@media(max-width:900px){
  .wrap{padding:0 20px;}
  .nav{padding:0 16px;width:100%;left:0;transform:none;top:60px;}
  .gc,.nav,.cta{max-width:100%;width:100%;}
  .side-line-left,.side-line-right{display:none;}
  .hero-title{font-size:36px;}
  .hero-title.sm{font-size:26px;}
  .top-header{width:100%;left:0;transform:none;height:60px;}
  .top-header-content{padding:0 16px;gap:8px;}
  .top-header-title{font-size:13px;letter-spacing:1px;}
  .top-header-sub{font-size:6px;letter-spacing:2px;}
  .top-header-stat-num{font-size:13px;}
  .page{padding-top:100px;} /* mobile: top-header 60 + nav2 40 */

  /* Скрыть центральную навигацию и кнопку вступить — всё в бургере */
  .top-header-center{display:none !important;}
  .top-header-right{display:none !important;}
  /* Скрыть десктопный глобус */
  #langPickerDesktop{display:none !important;}
  .desktop-only{display:none !important;}
  .mobile-globe-group{display:flex !important;margin-left:auto;}
  /* Бургер — всегда видимый справа */
  .burger-btn{
    display:flex !important;
    width:44px;height:44px;
    background:rgba(255,158,196,.08);
    border:1px solid rgba(255,158,196,.2);
    border-radius:8px;
  }

  /* Гриды — в одну колонку */
  .roles-grid,.perks-grid,.team-grid,.stats-grid,.tech-grid{grid-template-columns:1fr;}

  /* CTA снизу — фиксированная панель с иконками */
  .cta{
    position:fixed;
    bottom:0;left:0;right:0;
    width:100%;
    transform:none;
    padding:10px 16px;
    gap:12px;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    min-height:64px;
    height:auto;
    background:#000;
    border-top:1px solid rgba(255,158,196,.15);
    z-index:9999;
  }
  .cta-desktop{display:none !important;}
  .cta-mobile{display:flex !important;}
  .cta-icon{display:flex !important;}
  .cta-links-group{display:flex;align-items:center;gap:10px;margin:0 auto;}
  .cta-util-group{display:flex;align-items:center;gap:5px;}

  /* Отступ снизу чтоб CTA не перекрывал контент */
  .page{padding-bottom:90px;}
}

@media(max-width:480px){
  .nav-logo span{display:none;}
  .nav-link{font-size:7.5px;padding:5px 5px;}
}

/* Глобус + языки */
.lang-picker{position:relative;display:flex;align-items:center;}
.globe-btn{
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:5px 5px;color:var(--muted);
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;
  background:transparent;border:none;cursor:pointer;
  transition:color .2s;
}
.globe-btn:hover{color:var(--accent);}
.globe-btn svg{flex-shrink:0;}
.lang-dropdown{
  position:fixed;top:100px;left:0;right:0;
  background:rgba(7,10,16,.98);border-bottom:1px solid rgba(255,158,196,.2);
  padding:6px 0;
  display:none;flex-direction:row;justify-content:center;gap:4px;
  z-index:1999;
  box-shadow:0 8px 24px rgba(0,0,0,.6);
}
/* На десктопе — абсолютный под кнопкой */
@media(min-width:901px){
  .lang-dropdown{
    position:absolute;top:calc(100% + 6px);left:50%;right:auto;
    transform:translateX(-50%);
    border-radius:8px;border:1px solid rgba(255,158,196,.2);
    padding:4px 6px;
    width:auto;
  }
}
.lang-dropdown.open{display:flex;}
.lang-opt{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;
  color:var(--muted);background:transparent;border:none;cursor:pointer;
  padding:7px 12px;border-radius:5px;text-align:center;
  transition:color .15s,background .15s;white-space:nowrap;
}
.lang-opt:hover{color:var(--accent);background:rgba(255,158,196,.08);}
.lang-opt.active{color:var(--accent);}
/* Мобильная группа глобус+разделитель — скрыта на десктопе */
.mobile-globe-group{
  display:none;
  align-items:center;
  gap:6px;
}


.burger-btn{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:36px;height:36px;cursor:pointer;
  background:none;border:none;padding:0;
}
.burger-btn span{
  display:block;width:22px;height:2px;
  background:var(--text);border-radius:2px;
  transition:transform .3s, opacity .3s;
}
.burger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger-btn.open span:nth-child(2){opacity:0;}
.burger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Мобильное выпадающее меню */
.mobile-nav{
  display:none;
  position:fixed;top:100px;left:0;right:0;
  background:#070a10;
  border-bottom:1px solid rgba(255,158,196,.15);
  z-index:1000;
  padding:0 8px;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  height:44px;
}
.mobile-nav.open{display:flex;}
.mobile-nav-btn{
  font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1px;
  color:var(--muted);background:none;border:none;
  padding:6px 8px;text-align:center;cursor:pointer;
  text-transform:uppercase;
  border-bottom:2px solid transparent;
  border-left:none;
  white-space:nowrap;flex-shrink:0;
  transition:color .2s, border-color .2s;
}
.mobile-nav-btn:hover,.mobile-nav-btn.active{color:var(--accent);border-bottom-color:var(--accent);}


/* ── iOS Safari Fixes (mobile only) ── */
@media (max-width: 900px) {
  @supports (-webkit-touch-callout: none) {
    .top-header {
      left: 0 !important;
      transform: none !important;
      width: 100% !important;
    }
    .nav {
      left: 0 !important;
      transform: none !important;
      width: 100% !important;
      top: 60px;
    }
    .cta {
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      width: 100% !important;
      padding-bottom: max(11px, env(safe-area-inset-bottom));
    }
    .gc {
      width: 100% !important;
    }
    .page {
      padding-top: calc(60px + 40px) !important; /* top-header 60 + nav2 40 = 100 */
    }
  }
}


/* ── NAV ROW 2 ── */
.nav2{
  position:fixed;top:80px;left:50%;transform:translateX(-50%);
  width:1000px;max-width:100%;
  z-index:999;
  background:#05080e;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:44px;
  border-bottom:1px solid var(--border);
}

/* ── NAV ROW 3: language bar (desktop, overlay on globe click) ── */
.lang-bar{
  position:fixed;top:124px;left:50%;transform:translateX(-50%);
  width:1000px;max-width:100%;
  z-index:1000;
  background:#05080e;
  display:none;align-items:center;justify-content:center;
  gap:4px;
  padding:0 24px;height:36px;
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.lang-bar.open{display:flex;}
.lang-bar-btn{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:1px;
  color:var(--muted);background:transparent;border:1px solid transparent;
  padding:7px 12px;border-radius:5px;cursor:pointer;
  transition:color .2s, background .2s, border-color .2s;
}
.lang-bar-btn:hover{color:var(--accent);background:rgba(255,158,196,.06);}
.lang-bar-btn.active{
  color:var(--accent);
  background:rgba(255,158,196,.08);
  border-color:rgba(255,158,196,.3);
}
.nav2-left{display:flex;align-items:center;gap:2px;}
.nav2-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;}
.nav2-right{display:flex;align-items:center;gap:8px;}
.nav2-btn{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);background:transparent;border:none;cursor:pointer;
  padding:6px 10px;border-radius:4px;white-space:nowrap;
  transition:color .2s,background .2s;
}
.nav2-btn:hover,.nav2-btn.active{color:var(--accent);background:rgba(255,158,196,.06);}
.nav2-btn.shop-btn{color:#8972cd;}
.nav2-btn.shop-btn:hover,.nav2-btn.shop-btn.active{color:#c4b5fd;background:rgba(167,139,250,.08);}
.nav2-btn.news-btn{color:#3db669;}
.nav2-btn.news-btn:hover,.nav2-btn.news-btn.active{color:#86efac;background:rgba(74,222,128,.08);}
.nav2-btn.community-btn{color:#25ae9d;}
.nav2-btn.community-btn:hover,.nav2-btn.community-btn.active{color:#5eead4;background:rgba(45,212,191,.08);}
.nav2-btn.func-btn{color:#ef4444;}
.nav2-btn.func-btn:hover,.nav2-btn.func-btn.active{color:#ff6b6b;background:rgba(239,68,68,.10);}
.nav2-btn.rules-btn{color:#ef4444;}
.nav2-btn.rules-btn:hover,.nav2-btn.rules-btn.active{color:#ff6b6b;background:rgba(239,68,68,.10);}
@keyframes deathPulse{0%,100%{text-shadow:0 0 6px rgba(239,68,68,.6);opacity:1;}50%{text-shadow:0 0 16px rgba(255,32,32,1),0 0 28px rgba(239,68,68,.5);opacity:.82;}}
.death-word{color:#ff2424;font-weight:900;letter-spacing:1.5px;animation:deathPulse 1.4s ease-in-out infinite;white-space:nowrap;}

/* account widget in nav2 */
.acc-widget{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:4px 6px 4px 5px;border-radius:8px;
  border:1px solid rgba(255,158,196,.15);
  background:rgba(255,158,196,.03);
  transition:border-color .25s,background .25s,box-shadow .25s;
  position:relative;
}
.acc-widget:hover{
  border-color:rgba(255,158,196,.45);
  background:rgba(255,158,196,.07);
  box-shadow:0 0 12px rgba(255,158,196,.12),inset 0 0 8px rgba(255,158,196,.04);
}
.acc-avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:900;color:#fff;
  flex-shrink:0;
  box-shadow:0 0 0 1.5px rgba(255,158,196,.35);
}
/* Photo/PNG avatar: no coloured disc behind it — a transparent PNG must show through cleanly,
   not sit on the accent gradient. Applies wherever an avatar element actually holds an <img>. */
.acc-avatar:has(img),.acc-drop-avatar:has(img),#pBigAvatar:has(img),#pSidebarAvatar:has(img),#pAvatarPngPreview:has(img){background:transparent!important;}
.acc-name{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;color:var(--text);letter-spacing:.5px;}
/* ── BALANCE CHIP ── */
.acc-balance{
  display:flex;align-items:center;gap:5px;
  font-family:'Orbitron',sans-serif;font-size:9px;color:#c4b5fd;font-weight:700;
  background:rgba(167,139,250,.1);
  border:1px solid rgba(167,139,250,.28);
  border-radius:5px;
  padding:3px 7px 3px 6px;
  line-height:1;
  letter-spacing:.5px;
  white-space:nowrap;
  transition:border-color .2s,background .2s;
}
.acc-widget:hover .acc-balance{
  border-color:rgba(167,139,250,.5);
  background:rgba(167,139,250,.16);
}
.acc-balance svg{flex-shrink:0;opacity:.8;}
.acc-login-btn{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--accent);background:transparent;
  border:1px solid rgba(255,158,196,.3);border-radius:4px;cursor:pointer;
  padding:5px 10px;transition:background .2s,border-color .2s;
}
.acc-login-btn:hover{background:rgba(255,158,196,.08);border-color:rgba(255,158,196,.6);}

/* account dropdown */
.acc-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(7,10,16,.98);border:1px solid rgba(255,158,196,.2);
  border-radius:10px;padding:12px;min-width:220px;
  z-index:3000;display:none;
  box-shadow:0 16px 48px rgba(0,0,0,.7);
}
.acc-dropdown.open{display:block;}
.acc-drop-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:10px;
}
.acc-drop-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-size:13px;font-weight:900;color:#fff;
}
.acc-drop-info{}
.acc-drop-name{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;color:#fff;margin-bottom:2px;}
.acc-drop-rank{font-size:10px;color:var(--muted);letter-spacing:1px;}
.acc-drop-bal{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.2);
  border-radius:6px;padding:8px 10px;margin-bottom:8px;
}
.acc-drop-bal-label{font-size:10px;color:var(--muted);}
.acc-drop-bal-val{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:900;color:var(--accent);}
.acc-drop-link{
  display:block;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  background:transparent;border:none;cursor:pointer;
  padding:7px 8px;border-radius:5px;width:100%;text-align:left;
  transition:color .2s,background .2s;
}
.acc-drop-link:hover{color:var(--accent);background:rgba(255,158,196,.06);}
.acc-drop-logout{color:var(--hot) !important;}
.acc-drop-logout:hover{background:rgba(255,64,96,.07) !important;}

/* ── PROFILE PAGE (Steam-style) ── */
/* Steam-style banner header */
.profile-banner{
  position:relative;height:200px;overflow:hidden;
  background:linear-gradient(135deg,#0d1525,#1a0d2e);
  border-bottom:1px solid var(--border);
}
.profile-banner-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:all .4s ease;
  opacity:.7;
}
.profile-banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(7,10,16,.95) 100%);
}
.profile-banner-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:0 28px 20px;
  display:flex;align-items:flex-end;gap:18px;
}
.profile-big-avatar{
  width:88px;height:88px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-size:28px;font-weight:900;color:#fff;
  border:none;
  box-shadow:none;
  position:relative;z-index:1;
  transition:border .3s,box-shadow .3s;
}
.pf-ring-none{border:1.5px solid transparent!important;box-shadow:none!important;}
.pf-ring-cyan{border:1.5px solid #00d4ff!important;box-shadow:0 0 10px rgba(0,212,255,.45)!important;}
.pf-ring-purple{border:1.5px solid #a78bfa!important;box-shadow:0 0 10px rgba(167,139,250,.45)!important;}
.pf-ring-gold{border:1.5px solid #fbbf24!important;box-shadow:0 0 10px rgba(251,191,36,.45)!important;}
.pf-ring-red{border:1.5px solid #ef4444!important;box-shadow:0 0 10px rgba(239,68,68,.45)!important;}
.pf-ring-green{border:1.5px solid #22c55e!important;box-shadow:0 0 10px rgba(34,197,94,.45)!important;}
.pf-ring-rainbow{border:1.5px solid transparent!important;box-shadow:0 0 0 1px #ff5b8a,0 0 0 2px #ffd24a,0 0 0 3px #4ad6ff,0 0 12px rgba(120,200,255,.35)!important;}
.pf-ring-double{border:1.5px solid #00d4ff!important;outline:1px solid #a78bfa!important;outline-offset:1px!important;box-shadow:0 0 12px rgba(0,212,255,.3)!important;}
/* Thin versions for small avatars in navbar and dropdown */
.acc-avatar.pf-ring-none{border:1px solid rgba(170,180,200,.45)!important;box-shadow:0 0 4px rgba(170,180,200,.25)!important;}
.acc-avatar.pf-ring-cyan{border:1px solid #00d4ff!important;box-shadow:0 0 4px rgba(0,212,255,.5)!important;}
.acc-avatar.pf-ring-purple{border:1px solid #a78bfa!important;box-shadow:0 0 4px rgba(167,139,250,.5)!important;}
.acc-avatar.pf-ring-gold{border:1px solid #fbbf24!important;box-shadow:0 0 4px rgba(251,191,36,.5)!important;}
.acc-avatar.pf-ring-red{border:1px solid #ef4444!important;box-shadow:0 0 4px rgba(239,68,68,.5)!important;}
.acc-avatar.pf-ring-green{border:1px solid #22c55e!important;box-shadow:0 0 4px rgba(34,197,94,.5)!important;}
.acc-avatar.pf-ring-rainbow{border:1px solid transparent!important;box-shadow:0 0 0 1px #ff5b8a,0 0 0 2px #ffd24a,0 0 0 3px #4ad6ff!important;}
.acc-avatar.pf-ring-double{border:1px solid #00d4ff!important;outline:1px solid #a78bfa!important;outline-offset:1px!important;box-shadow:0 0 4px rgba(0,212,255,.3)!important;}
.acc-drop-avatar.pf-ring-none{border:2px solid rgba(170,180,200,.45)!important;box-shadow:0 0 0 1px rgba(170,180,200,.15)!important;}
.acc-drop-avatar.pf-ring-cyan{border:2px solid #00d4ff!important;box-shadow:0 0 8px rgba(0,212,255,.4)!important;}
.acc-drop-avatar.pf-ring-purple{border:2px solid #a78bfa!important;box-shadow:0 0 8px rgba(167,139,250,.4)!important;}
.acc-drop-avatar.pf-ring-gold{border:2px solid #fbbf24!important;box-shadow:0 0 8px rgba(251,191,36,.4)!important;}
.acc-drop-avatar.pf-ring-red{border:2px solid #ef4444!important;box-shadow:0 0 8px rgba(239,68,68,.4)!important;}
.acc-drop-avatar.pf-ring-green{border:2px solid #22c55e!important;box-shadow:0 0 8px rgba(34,197,94,.4)!important;}
.acc-drop-avatar.pf-ring-rainbow{border:2px solid transparent!important;box-shadow:0 0 0 1px #ff5b8a,0 0 0 2px #ffd24a,0 0 0 3px #4adeff,0 0 8px rgba(120,200,255,.3)!important;}
.acc-drop-avatar.pf-ring-double{border:2px solid #00d4ff!important;outline:1px solid #a78bfa!important;outline-offset:1px!important;box-shadow:0 0 10px rgba(0,212,255,.3)!important;}
/* "No frame" must mean NO ring ANYWHERE — the small header + dropdown avatars still drew a
   grey ring, so the profile looked frame-less while the widgets did not. And the dropdown
   ring was visibly fatter (2px) than the profile one (1.5px). */
.acc-avatar.pf-ring-none,.acc-drop-avatar.pf-ring-none{border:none!important;box-shadow:none!important;outline:none!important;}
.acc-drop-avatar[class*="pf-ring-"]{border-width:1px!important;}
.profile-big-avatar-wrap{position:relative;flex-shrink:0;}
.profile-big-avatar-wrap .pf-frame{
  position:absolute;inset:-4px;border-radius:50%;pointer-events:none;z-index:2;
}
.profile-banner-info{flex:1;min-width:0;padding-bottom:2px;}
.profile-banner-name{
  font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;color:#fff;
  letter-spacing:.5px;line-height:1;margin-bottom:5px;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.profile-banner-rank{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:3px;color:var(--accent);text-transform:uppercase;margin-bottom:8px;
}
.profile-banner-bio{display:none;font-size:11px;color:#8090b0;max-width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-banner-stats{display:flex;gap:16px;align-items:center;}
.profile-banner-stat{text-align:center;}
.profile-banner-stat-n{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:900;color:#fff;line-height:1;}
.profile-banner-stat-l{font-size:9px;color:var(--muted);letter-spacing:1px;margin-top:2px;}
.profile-banner-stat-sep{width:1px;height:24px;background:var(--border);}

/* tabs under banner */
.profile-tabs-bar{
  display:flex;align-items:center;gap:2px;
  padding:0 8px;
  background:rgba(5,8,14,.97);
  border-bottom:1px solid var(--border);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.profile-tab{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);background:transparent;border:none;cursor:pointer;
  padding:11px 14px;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.profile-tab:hover{color:var(--text);}
.profile-tab.active{color:var(--accent);border-bottom-color:var(--accent);}

/* main layout under tabs */
.profile-layout{display:flex;gap:0;min-height:calc(100vh - 320px);}
.profile-tab-content{display:none;}
.profile-tab-content.active{display:block;}

.profile-sidebar{
  width:200px;flex-shrink:0;
  border-right:1px solid var(--border);
  padding:16px 0;
  background:rgba(7,10,16,0.5);
}
.profile-sidebar-user{
  padding:16px 16px 12px;border-bottom:1px solid var(--border);margin-bottom:8px;
}
.profile-sidebar-avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-size:15px;font-weight:900;color:#fff;
  margin-bottom:8px;
  box-shadow:0 0 0 2px rgba(255,158,196,.4),0 0 12px rgba(255,158,196,.12);
}
.profile-sidebar-name{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:#fff;letter-spacing:.5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-sidebar-rank{font-size:9px;color:var(--accent);letter-spacing:1px;}
.profile-nav-item{
  display:flex;align-items:center;gap:9px;
  width:100%;background:transparent;border:none;
  padding:9px 16px;cursor:pointer;
  font-family:'Orbitron',sans-serif;font-size:8.5px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);text-align:left;
  transition:color .2s,background .2s,border-left .2s;
  border-left:2px solid transparent;
}
.profile-nav-item:hover{color:var(--text);background:rgba(255,255,255,.03);}
.profile-nav-item.active{color:var(--accent);background:rgba(255,158,196,.06);border-left-color:var(--accent);}
.profile-nav-item svg{flex-shrink:0;opacity:.7;}
.profile-nav-item.active svg{opacity:1;}
.profile-nav-sep{height:1px;background:var(--border);margin:6px 16px;}
.profile-nav-item.danger{color:var(--hot);}
.profile-nav-item.danger:hover{background:rgba(255,64,96,.06);}
.profile-nav-item.danger svg{opacity:.7;}

.profile-content{flex:1;padding:24px 28px;overflow-y:auto;min-width:0;}
.profile-section{display:none;padding:26px;}
.profile-section.active{display:block;}
.profile-sec-title{
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:900;
  color:#fff;letter-spacing:1px;margin-bottom:3px;
}
.profile-sec-sub{font-size:11px;color:var(--muted);margin-bottom:20px;line-height:1.6;}
.profile-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:22px;margin-bottom:14px;
}
.profile-card-title{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;
}
.profile-field{margin-bottom:12px;}
.profile-label{font-size:9px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;display:block;}

/* friends */
.friends-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
@media(max-width:1000px){.friends-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.friends-grid{grid-template-columns:1fr;}}
.friend-card{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:7px 10px;display:flex;align-items:center;gap:10px;
  transition:border-color .2s,background .2s,box-shadow .2s;cursor:default;
  position:relative;
}
/* mirror the account-widget pill: compact, accent border + faint tint, no glass */
#friendsList .friend-card{background:linear-gradient(rgba(255,158,196,.1),rgba(255,158,196,.1)),var(--card)!important;border-color:rgba(255,158,196,.28)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#friendsList .friend-card:hover{border-color:rgba(255,158,196,.5)!important;background:linear-gradient(rgba(255,158,196,.18),rgba(255,158,196,.18)),var(--card)!important;box-shadow:0 0 12px rgba(255,158,196,.16),inset 0 0 8px rgba(255,158,196,.06)!important;}
.friend-card:hover{border-color:rgba(255,158,196,.3);background:rgba(255,158,196,.03);}
.friend-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-size:13px;font-weight:900;color:#fff;
  position:relative;
}
/* friend-card avatars: a slimmer version of the frame ring (1px border, base glow kept) */
.friend-avatar[class*="pf-ring-"]{border-width:1px!important;}
.friend-online-dot{
  position:absolute;bottom:1px;right:1px;
  width:9px;height:9px;border-radius:50%;
  border:2px solid var(--card);
}
.friend-online-dot.online{background:#00ff88;box-shadow:0 0 6px #00ff88;}
.friend-online-dot.offline{background:#3a4060;}
.friend-info{flex:1;min-width:0;}
.friend-name{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
.friend-status{font-size:9px;color:var(--muted);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.friend-status.online{color:#00ff88;}
.friend-remove-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(6,9,15,.6);border:1px solid rgba(255,255,255,.18);cursor:pointer;
  padding:5px;border-radius:7px;color:#e2e8f2;opacity:1;
  transition:color .2s,background .2s,border-color .2s,transform .12s;
}
.friend-remove-btn:hover{color:#fff;background:rgba(0,0,0,.72);border-color:var(--hot);transform:translateY(-1px);}
.friend-view-btn:hover{border-color:var(--accent);}
.friend-fav-btn.on{color:#fbbf24;border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.12);}
.friend-fav-btn:hover{color:#fbbf24;border-color:#fbbf24;}
.friend-actions{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.friend-status.playing{color:#7dd3fc;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.friends-section{margin-bottom:20px;}
.friends-section-head{display:flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.friends-section-head::before{content:'';width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 7px rgba(74,222,128,.85);}
.friends-section.fav .friends-section-head::before{background:#fbbf24;box-shadow:0 0 7px rgba(251,191,36,.85);}
.friends-section.playing .friends-section-head::before{background:#7dd3fc;box-shadow:0 0 7px rgba(125,211,252,.85);}
.friends-section.offline .friends-section-head::before{background:#6b7280;box-shadow:none;}
.friends-section .fr-count{opacity:.6;}
.friends-section.offline .friend-card{opacity:.6;}
.friends-section.offline .friend-card:hover{opacity:1;}
/* friends by status — 4 columns: Играют | В сети | Не беспокоить+Нет на месте | Не в сети+Невидимки */
.friends-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start;}
@media(max-width:1100px){.friends-cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.friends-cols{grid-template-columns:1fr;}}
.fr-col{display:flex;flex-direction:column;gap:18px;min-width:0;}
.fr-group{display:flex;flex-direction:column;gap:8px;}
/* toolbar: select mode + bulk delete */
.fr-toolbar{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap;}
.fr-toolbtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--muted);border-radius:7px;padding:7px 14px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.fr-toolbtn:hover{background:rgba(255,255,255,.09);color:var(--text);}
.fr-toolbtn.danger{border-color:var(--hot);color:var(--hot);}
.fr-toolbtn.danger:hover{background:rgba(232,56,0,.12);}
.fr-sel-wrap{display:flex;align-items:center;flex-shrink:0;}
.fr-sel{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}
/* limit / info toast */
.fr-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:99999;background:rgba(10,12,18,.96);border:1px solid rgba(255,255,255,.16);color:var(--text);padding:11px 18px;border-radius:9px;font-size:12px;line-height:1.4;max-width:80vw;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.fr-toast.bad{border-color:var(--hot);}
/* click a card → its content fades out and the actions float CENTRED on top of it
   (same on desktop and mobile — no hover) */
.friend-card{cursor:pointer;}
.friend-card .friend-avatar,.friend-card .friend-info{transition:opacity .18s;}
.friend-card .friend-actions{
  position:absolute;inset:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s;
}
.friend-card.open .friend-actions{opacity:1;visibility:visible;pointer-events:auto;}
.friend-card.open .friend-avatar,.friend-card.open .friend-info{opacity:.10;}
.friend-card.open .friend-remove-btn{width:28px;height:28px;padding:0;}
.friend-id{color:var(--muted);opacity:.7;font-weight:400;}
/* quick search + friends counter */
.fr-search{flex:1;min-width:150px;max-width:280px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--text);border-radius:7px;padding:7px 12px;font-size:12px;outline:none;transition:border-color .2s;}
.fr-search:focus{border-color:var(--accent);}
.fr-search::placeholder{color:var(--muted);}
.fr-counter{margin-left:auto;align-self:center;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.fr-counter b{color:var(--accent);}
.fr-group.playing .friends-section-head::before{background:#5b8def;box-shadow:0 0 7px rgba(91,141,239,.85);}
.fr-group.online .friends-section-head::before{background:#4ade80;box-shadow:0 0 7px rgba(74,222,128,.85);}
.fr-group.dnd .friends-section-head::before{background:#ef4444;box-shadow:0 0 7px rgba(239,68,68,.85);}
.fr-group.away .friends-section-head::before{background:#f59e0b;box-shadow:0 0 7px rgba(245,158,11,.85);}
.fr-group.invisible .friends-section-head::before{background:#8a92a6;box-shadow:none;}
.fr-group.offline .friends-section-head::before{background:#6b7280;box-shadow:none;}
.fr-group.offline .friend-card,.fr-group.invisible .friend-card{opacity:.62;}
.fr-group.offline .friend-card:hover,.fr-group.invisible .friend-card:hover{opacity:1;}
/* full-width bands: favourites (top) + offline (bottom) */
.fr-band{margin:0 0 24px;}
.fr-band.offline{margin:24px 0 0;}
.fr-band.fav .friends-section-head::before{background:#fbbf24;box-shadow:0 0 7px rgba(251,191,36,.85);}
.fr-band.offline .friends-section-head::before{background:#6b7280;box-shadow:none;}
.fr-band.offline .friend-card{opacity:.62;}
.fr-band.offline .friend-card:hover{opacity:1;}
.fr-band-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
@media(max-width:1100px){.fr-band-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.fr-band-row{grid-template-columns:1fr;}}
.fr-band.offline:not(.expanded) .fr-band-row .friend-card:nth-child(n+9){display:none;}
/* status column: cap at 6 until expanded, then a show-all/collapse toggle */
.fr-stack{display:flex;flex-direction:column;gap:8px;}
.fr-group:not(.expanded) .fr-stack .friend-card:nth-child(n+7){display:none;}
.fr-showall{margin-top:8px;width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--muted);border-radius:7px;padding:6px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s;}
.fr-showall:hover{background:rgba(255,255,255,.09);color:var(--text);}
/* thin site-styled scrollbar everywhere */
*{scrollbar-width:thin;scrollbar-color:rgba(255,158,196,.5) transparent;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,158,196,.4);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,158,196,.7);}
.friend-req-card{
  background:var(--card);border:1px solid rgba(255,158,196,.2);border-radius:10px;
  padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;
}
.friend-req-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0;}
.friend-btn-accept{
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;letter-spacing:.5px;
  background:rgba(255,158,196,.12);color:var(--accent);border:1px solid rgba(255,158,196,.35);
  border-radius:5px;padding:5px 10px;cursor:pointer;transition:background .2s;
}
.friend-btn-accept:hover{background:rgba(255,158,196,.22);}
.friend-btn-decline{
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;letter-spacing:.5px;
  background:rgba(255,64,96,.08);color:var(--hot);border:1px solid rgba(255,64,96,.25);
  border-radius:5px;padding:5px 10px;cursor:pointer;transition:background .2s;
}
.friend-btn-decline:hover{background:rgba(255,64,96,.16);}
.friend-add-row{display:flex;gap:8px;align-items:center;margin-bottom:16px;}
.friend-add-input{
  flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:6px;padding:9px 12px;
  font-family:'Inter',sans-serif;font-size:12px;color:var(--text);
  outline:none;transition:border-color .2s;
}
.friend-add-input:focus{border-color:rgba(255,158,196,.4);}
.friend-add-btn{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:var(--accent);color:#000;border:none;border-radius:6px;
  padding:9px 16px;cursor:pointer;white-space:nowrap;
  transition:opacity .2s;
}
.friend-add-btn:hover{opacity:.85;}

/* bg customizer */
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.bg-option{
  border-radius:8px;overflow:hidden;border:2px solid var(--border);
  cursor:pointer;transition:border-color .2s,box-shadow .2s;
  position:relative;aspect-ratio:16/7;
}
.bg-option:hover{border-color:rgba(255,158,196,.4);}
.bg-option.selected{border-color:var(--accent);box-shadow:0 0 12px rgba(255,158,196,.3);}
.bg-option-preview{width:100%;height:100%;background-size:cover;background-position:center;}
.bg-option-label{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(0,0,0,.6);
  font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:1px;
  color:#fff;padding:4px 6px;text-align:center;
}
.bg-option.selected .bg-option-label{background:rgba(255,158,196,.25);}

/* frame picker */
.frame-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.frame-option{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;border-radius:8px;border:1px solid var(--border);
  cursor:pointer;transition:border-color .2s,background .2s;
}
.frame-option:hover{border-color:rgba(255,158,196,.35);background:rgba(255,158,196,.03);}
.frame-option.selected{border-color:var(--accent);background:rgba(255,158,196,.06);}
.frame-avatar-demo{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#7b5ea7,#ff9ec4);
  position:relative;
}
.frame-label{font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:1px;color:var(--muted);text-align:center;}
.frame-option.selected .frame-label{color:var(--accent);}

/* rename cost badge */
.rename-cost-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.3);
  border-radius:5px;padding:4px 10px;
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:#c4b5fd;
  margin-bottom:14px;
}
.profile-input{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:6px;padding:10px 12px;
  font-family:'Inter',sans-serif;font-size:13px;color:var(--text);
  outline:none;transition:border-color .2s;
  -webkit-appearance:none;
}
.profile-input:focus{border-color:rgba(255,158,196,.4);}
.profile-save-btn{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  background:rgba(255,158,196,.1);border:1px solid rgba(255,158,196,.35);
  color:var(--accent);border-radius:6px;padding:10px 20px;
  cursor:pointer;transition:background .2s,border-color .2s;
  margin-top:4px;
}
.profile-save-btn:hover{background:rgba(255,158,196,.2);border-color:rgba(255,158,196,.6);}
.profile-ok{font-size:11px;color:#00ff88;margin-top:8px;display:none;}
.profile-err{font-size:11px;color:var(--hot);margin-top:8px;display:none;}

/* avatar color picker */
.avatar-preview{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;color:#fff;
  box-shadow:0 0 0 2px rgba(255,158,196,.3),0 0 20px rgba(255,158,196,.1);
  margin-bottom:16px;transition:background .3s;
  flex-shrink:0;
}
.avatar-color-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.avatar-color-swatch{
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:transform .15s,border-color .15s;
}
.avatar-color-swatch:hover{transform:scale(1.15);}
.avatar-color-swatch.selected{border-color:#fff;transform:scale(1.1);}
.avatar-row{display:flex;align-items:flex-start;gap:20px;}
.avatar-controls{flex:1;}

/* privacy toggles */
.privacy-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.privacy-row:last-child{border-bottom:none;}
.privacy-label{font-size:12px;color:var(--text);}
.privacy-hint{font-size:10px;color:var(--muted);margin-top:3px;}
.toggle-switch{
  position:relative;width:40px;height:22px;flex-shrink:0;
}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{
  position:absolute;inset:0;border-radius:11px;
  background:var(--border);cursor:pointer;
  transition:background .25s;
  border:1px solid rgba(255,255,255,.1);
}
.toggle-switch input:checked + .toggle-track{background:rgba(255,158,196,.5);border-color:rgba(255,158,196,.5);}
.toggle-thumb{
  position:absolute;top:3px;left:3px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;transition:transform .25s;
  pointer-events:none;
}
.toggle-switch input:checked ~ .toggle-thumb{transform:translateX(18px);}

/* bio textarea */
.profile-textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:6px;padding:10px 12px;
  font-family:'Inter',sans-serif;font-size:13px;color:var(--text);
  outline:none;transition:border-color .2s;resize:vertical;min-height:80px;
  -webkit-appearance:none;
}
.profile-textarea:focus{border-color:rgba(255,158,196,.4);}

/* danger zone */
.danger-card{
  background:rgba(255,64,96,.04);border:1px solid rgba(255,64,96,.2);
  border-radius:10px;padding:20px;
}
.danger-card-title{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--hot);margin-bottom:8px;}
.danger-card-text{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:16px;}
.danger-btn{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  background:rgba(255,64,96,.1);border:1px solid rgba(255,64,96,.35);
  color:var(--hot);border-radius:6px;padding:10px 20px;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.danger-btn:hover{background:rgba(255,64,96,.2);border-color:rgba(255,64,96,.6);}
.delete-confirm-row{display:none;margin-top:14px;gap:10px;}
.delete-confirm-row.show{display:flex;align-items:center;}

@media(max-width:900px){
  .profile-layout{flex-direction:column;}
  .profile-sidebar{
    width:100%;height:auto;position:static;
    border-right:none;border-bottom:1px solid var(--border);
    padding:12px 0 8px;overflow-x:auto;overflow-y:hidden;
    display:flex;flex-direction:row;gap:0;
  }
  .profile-sidebar-user{display:none;}
  .profile-nav-sep{display:none;}
  .profile-nav-item{
    width:auto;padding:8px 14px;border-left:none;border-bottom:2px solid transparent;
    white-space:nowrap;font-size:8px;flex-shrink:0;
  }
  .profile-nav-item.active{border-left-color:transparent;border-bottom-color:var(--accent);}
  .profile-content{padding:20px 16px;}
}

/* ── AUTH MODAL ── */
.modal-overlay{
  position:fixed;inset:0;z-index:5000;
  background:rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;
  overflow-y:auto;padding:20px 12px;
}
.modal-overlay.open{display:flex;}
/* lock the page behind while a modal widget is open */
:root:has(.modal-overlay.open),:root:has(.modal-overlay.open) body{overflow:hidden!important;}
.modal-box{
  background:#0d1017;border:1px solid rgba(255,158,196,.2);
  border-radius:14px;padding:32px;width:380px;max-width:90vw;
  position:relative;
  max-height:calc(100vh - 40px);overflow-y:auto;
  box-shadow:0 32px 80px rgba(0,0,0,.8),0 0 40px rgba(255,158,196,.05);
}
.modal-close{
  position:absolute;top:14px;right:14px;
  background:transparent;border:none;cursor:pointer;
  color:var(--muted);font-size:18px;line-height:1;
  transition:color .2s;
}
.modal-close:hover{color:var(--text);}
.modal-title{
  font-family:'Orbitron',sans-serif;font-size:16px;font-weight:900;
  color:#fff;margin-bottom:4px;letter-spacing:.5px;
}
.modal-sub{font-size:12px;color:var(--muted);margin-bottom:22px;}
.modal-tabs{display:flex;gap:4px;margin-bottom:20px;background:rgba(255,255,255,.03);border-radius:6px;padding:3px;}
.modal-tab{
  flex:1;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  background:transparent;border:none;cursor:pointer;
  color:var(--muted);padding:7px;border-radius:4px;
  transition:color .2s,background .2s;
}
.modal-tab.active{color:#fff;background:rgba(255,158,196,.12);}
.modal-field{margin-bottom:14px;}
.modal-label{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;display:block;}
.modal-input{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:6px;padding:10px 12px;
  font-family:'Inter',sans-serif;font-size:13px;color:var(--text);
  outline:none;transition:border-color .2s;
  -webkit-appearance:none;
}
.modal-input:focus{border-color:rgba(255,158,196,.4);}
/* password input + eye toggle */
.pass-wrap{position:relative;}
.pass-wrap .modal-input{padding-right:40px;}
.pass-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; padding:4px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,158,196,.65);
  transition:color .2s, filter .2s;
  -webkit-tap-highlight-color:transparent;
}
.pass-eye:hover{ color:rgba(255,158,196,1); filter:drop-shadow(0 0 6px rgba(255,158,196,.6)); }
.pass-eye svg{ width:14px; height:14px; display:block; }

/* OR divider */
.auth-or{
  display:flex; align-items:center; gap:10px;
  margin:14px 0;
  font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:2px;
  color:var(--muted); text-transform:uppercase;
}
.auth-or::before, .auth-or::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
}
/* Google button */
.btn-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 12px;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  color:var(--text);
  cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn-google:hover{
  border-color:rgba(255,158,196,.4);
  background:rgba(255,158,196,.06);
  box-shadow:0 0 12px rgba(255,158,196,.15);
}
.btn-google svg{ width:18px; height:18px; flex-shrink:0; }
.modal-submit{
  width:100%;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  background:var(--accent);color:#000;border:none;border-radius:6px;
  padding:11px;cursor:pointer;margin-top:4px;
  transition:opacity .15s,transform .15s;
}
.modal-submit:hover{opacity:.85;transform:translateY(-1px);}
.modal-error{font-size:11px;color:var(--hot);margin-top:-8px;margin-bottom:8px;display:none;}
.modal-error.show{display:block;}
.reg-codebox ~ .modal-error,.login-codebox ~ .modal-error,.gauth-codebox ~ .modal-error{margin-top:10px;}
/* ── MOBILE: nav2 no longer overlaps (center un-absoluted, left scrolls) + tighter modals ── */
@media(max-width:900px){
  .nav2{padding:0 8px;gap:4px;}
  .nav2-left{flex:1 1 auto;min-width:0;overflow-x:auto;gap:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .nav2-left::-webkit-scrollbar{display:none;}
  .nav2-center{position:static;transform:none;flex:0 0 auto;gap:2px;}
  .nav2-right{flex:0 0 auto;}
  .nav2-btn{font-size:8.5px;padding:6px 5px;white-space:nowrap;}
  .nav2-btn svg{display:none;}
}
@media(max-width:600px){
  .modal-box{padding:22px 18px;}
  .g-recaptcha{transform:scale(.94);transform-origin:top left;}
  /* Phones often don't apply backdrop-filter, so the semi-transparent overlay let the page
     show through and the dialog read as "transparent". Use a solid overlay instead. */
  .modal-overlay{background:rgba(0,0,0,.93);-webkit-backdrop-filter:none;backdrop-filter:none;}
}
.pw-reqs{ list-style:none; margin:8px 0 2px; padding:0; font-size:11px; line-height:1.75; }
.pw-reqs li{ color:#ef4444; display:flex; align-items:center; gap:7px; transition:color .15s ease; }
.pw-reqs li::before{ content:"✗"; font-weight:800; width:13px; text-align:center; flex-shrink:0; }
.pw-reqs li.ok{ color:#4ade80; }
.pw-reqs li.ok::before{ content:"✓"; }

/* ── SHOP PAGE ── */
.shop-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.shop-filter{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);background:var(--card);border:1px solid var(--border);
  border-radius:4px;cursor:pointer;padding:6px 12px;
  transition:color .2s,border-color .2s,background .2s;
}
.shop-filter:hover,.shop-filter.active{color:var(--accent);border-color:rgba(255,158,196,.4);background:rgba(255,158,196,.06);}
/* rarity-coloured active states */
.sf-rarity[data-rarity="common"].active{color:#a0aabe;border-color:rgba(160,170,190,.5);background:rgba(160,170,190,.08);}
.sf-rarity[data-rarity="uncommon"].active{color:#22c55e;border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.08);}
.sf-rarity[data-rarity="rare"].active{color:#3b82f6;border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.08);}
.sf-rarity[data-rarity="epic"].active{color:#a78bfa;border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.08);}
.sf-rarity[data-rarity="legendary"].active{color:#fbbf24;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.08);}
.sf-rarity[data-rarity="perfect"].active{color:#f97316;border-color:rgba(249,115,22,.5);background:rgba(249,115,22,.08);}
.sf-rarity[data-rarity="ace"].active{color:#ef4444;border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.08);}
@media(max-width:600px){
  .shop-filter{font-size:8px;padding:5px 8px;}
}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;-webkit-overflow-scrolling:touch;}
.shop-item{
  background:var(--card);
  border:none;
  box-shadow:inset 0 0 0 1px var(--rc,var(--border));
  border-radius:10px;
  padding:16px;position:relative;
  overflow:hidden;
  transition:box-shadow .2s,transform .2s;cursor:pointer;
  display:flex;flex-direction:column;
}
/* scan stays clipped by overflow:hidden on card */
.shop-item-scan{
  position:absolute;left:0;right:0;top:0;pointer-events:none;z-index:1;
  transform:translateY(-60px);
  animation:siScanDown 4s ease-in-out infinite;
  animation-delay:var(--sd,0s);
}
/* pause card animations until page is revealed */
.page:not(.page-visible) .shop-item-scan,
.page:not(.page-visible) .shop-item-corner{
  animation-play-state:paused;
}
.shop-item:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--rc,var(--border)), 0 8px 28px color-mix(in srgb, var(--rc,#a0aabe) 20%, transparent);
}
.shop-item-desc-grow{flex:1;}

/* COMMON — серый */
.shop-item.common{--rc:rgba(160,170,190,.35);}
.shop-item-rarity.common{background:linear-gradient(90deg,#a0aabe,transparent);}
.shop-item.common .shop-item-icon{background:rgba(160,170,190,.07);}

/* UNCOMMON — зелёный */
.shop-item.uncommon{--rc:rgba(34,197,94,.35);}
.shop-item-rarity.uncommon{background:linear-gradient(90deg,#22c55e,transparent);}
.shop-item.uncommon .shop-item-icon{background:rgba(34,197,94,.08);}

/* RARE — синий */
.shop-item.rare{--rc:rgba(59,130,246,.4);}
.shop-item-rarity.rare{background:linear-gradient(90deg,#3b82f6,transparent);}
.shop-item.rare .shop-item-icon{background:rgba(59,130,246,.08);}

/* EPIC — фиолетовый */
.shop-item.epic{--rc:rgba(167,139,250,.4);}
.shop-item-rarity.epic{background:linear-gradient(90deg,#a78bfa,transparent);}
.shop-item.epic .shop-item-icon{background:rgba(167,139,250,.08);}

/* LEGENDARY — золотой */
.shop-item.legendary{--rc:rgba(251,191,36,.45);}
.shop-item-rarity.legendary{background:linear-gradient(90deg,#fbbf24,#f59e0b,transparent);}
.shop-item.legendary .shop-item-icon{background:rgba(251,191,36,.08);}

/* PERFECT — оранжевый */
.shop-item.perfect{--rc:rgba(249,115,22,.45);}
.shop-item-rarity.perfect{background:linear-gradient(90deg,#f97316,transparent);}
.shop-item.perfect .shop-item-icon{background:rgba(249,115,22,.08);}

/* ACE — красный */
.shop-item.ace{--rc:rgba(239,68,68,.45);}
.shop-item-rarity.ace{background:linear-gradient(90deg,#ef4444,#dc2626,transparent);}
.shop-item.ace .shop-item-icon{background:rgba(239,68,68,.08);}

.shop-item-rarity{
  position:absolute;top:0;left:0;right:0;height:2px;
  border-radius:10px 10px 0 0;
}

/* ── CARD CORNERS ── */
.shop-item-corner{
  position:absolute;width:13px;height:13px;
  border-color:var(--rh);border-style:solid;
  z-index:2;
  animation-duration:3s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  animation-delay:var(--cd,0s);
}
.shop-item-corner.tl{top:0;left:0;border-width:2px 0 0 2px;border-radius:3px 0 0 0;animation-name:siPingTop;}
.shop-item-corner.tr{top:0;right:0;border-width:2px 2px 0 0;border-radius:0 3px 0 0;animation-name:siPingTop;}
.shop-item-corner.bl{bottom:0;left:0;border-width:0 0 2px 2px;border-radius:0 0 0 3px;animation-name:siPingBot;animation-delay:calc(var(--cd,0s) + 1.5s);}
.shop-item-corner.br{bottom:0;right:0;border-width:0 2px 2px 0;border-radius:0 0 3px 0;animation-name:siPingBot;animation-delay:calc(var(--cd,0s) + 1.5s);}
@keyframes siPingTop{0%,100%{opacity:.2}15%,45%{opacity:1}60%{opacity:.2}}
@keyframes siPingBot{0%,100%{opacity:.2}15%,45%{opacity:1}60%{opacity:.2}}

/* ── SCAN LINE ── */
.shop-item-scan-line{height:2px;background:linear-gradient(90deg,transparent 5%,var(--rh) 30%,var(--rh) 70%,transparent 95%);opacity:.9;}
.shop-item-scan-glow{height:60px;background:linear-gradient(180deg,var(--rh),transparent);opacity:.09;}
@keyframes siScanDown{
  0%  {transform:translateY(-60px);opacity:0}
  8%  {opacity:1}
  92% {opacity:1}
  100%{transform:translateY(400px);opacity:0}
}

/* ── INTERLACE ── */
.shop-item::after{
  content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg,transparent 0px,transparent 3px,rgba(255,255,255,.012) 3px,rgba(255,255,255,.012) 4px);
}
.shop-item-icon{
  width:48px;height:48px;border-radius:10px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:rgba(160,170,190,.06);
  flex-shrink:0;
}
.shop-item-name{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;color:#fff;margin-bottom:3px;letter-spacing:.3px;}
.shop-item-desc{font-size:11px;color:var(--muted);margin-bottom:0;letter-spacing:.3px;line-height:1.5;font-family:'Inter',sans-serif;font-weight:400;}
.shop-item-top{flex:0 0 auto;}
.shop-item-spacer{flex:1;}
.shop-item-type{font-size:10px;color:var(--muted);margin-bottom:8px;letter-spacing:.5px;}
.shop-item-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.shop-item-price{
  display:flex;align-items:center;gap:4px;
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:900;color:#ff9ec4;
}
.shop-buy-btn{
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  background:rgba(255,158,196,.12);border:1px solid rgba(255,158,196,.3);
  color:#ff9ec4;border-radius:4px;padding:5px 9px;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.shop-buy-btn:hover{background:rgba(255,158,196,.22);border-color:rgba(255,158,196,.6);}
.shop-buy-btn:disabled{opacity:.4;cursor:not-allowed;}
.shop-item-owned{
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;
  letter-spacing:.5px;color:#00ff88;border:1px solid rgba(0,255,136,.3);
  padding:5px 9px;border-radius:4px;
}
.shop-tabs{display:flex;gap:4px;margin-bottom:16px;background:rgba(255,255,255,.02);border-radius:6px;padding:3px;width:fit-content;}
.shop-tab{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  background:transparent;border:none;cursor:pointer;
  color:var(--muted);padding:6px 14px;border-radius:4px;
  transition:color .2s,background .2s;
}
.shop-tab.active{color:#fff;background:rgba(167,139,250,.12);}

/* sell/trade modal */
.sell-modal-box{background:#0d1017;border:1px solid rgba(167,139,250,.3);border-radius:14px;padding:28px;width:420px;max-width:90vw;position:relative;}
.topup-opt{
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;
  background:rgba(255,158,196,.08);border:1px solid rgba(255,158,196,.25);
  color:var(--accent);border-radius:6px;padding:12px 8px;cursor:pointer;
  transition:background .2s,border-color .2s;text-align:center;
}
.topup-opt:hover{background:rgba(255,158,196,.18);border-color:rgba(255,158,196,.5);}
.pay-opt{padding:14px 10px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;min-height:50px;}
.pay-opt:hover{background:rgba(255,255,255,.08);}
.pay-opt.sel{border-color:var(--accent);background:rgba(255,255,255,.06);box-shadow:0 0 12px rgba(255,255,255,.12);}
.ov-subtab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;padding:4px 2px;cursor:pointer;text-transform:uppercase;} .ov-subtab.active{color:var(--accent);border-bottom-color:var(--accent);}
.status-opt{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--text);} .status-opt:hover{background:rgba(255,255,255,.06);}
.profile-big-avatar-wrap{position:relative;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;} input[type=number]{-moz-appearance:textfield;appearance:textfield;}
.sell-item-row{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.02);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.sell-item-row:hover{border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.05);}
.sell-item-icon{font-size:20px;width:36px;text-align:center;}
.sell-item-info{flex:1;}
.sell-item-name{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:#fff;}
.sell-item-val{font-size:10px;color:var(--muted);}
.sell-price{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;color:#a78bfa;}

/* ── NEWS PAGE ── */
.news-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.news-post{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:20px;position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.news-post:hover{border-color:rgba(251,146,60,.3);box-shadow:0 4px 20px rgba(251,146,60,.08);}
.news-post-tag{
  display:inline-block;font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:3px 8px;border-radius:3px;margin-bottom:10px;
}
.news-post-tag.update{color:#ff9ec4;border:1px solid rgba(255,158,196,.3);}
.news-post-tag.dev{color:#a78bfa;border:1px solid rgba(167,139,250,.3);}
.news-post-tag.recruit{color:#00ff88;border:1px solid rgba(0,255,136,.3);}
.news-post-tag.event{color:#fb923c;border:1px solid rgba(251,146,60,.3);}
.news-post-title{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#fff;margin-bottom:8px;letter-spacing:.3px;}
.news-post-date{font-size:10px;color:var(--muted);letter-spacing:1px;margin-bottom:10px;}
.news-post-text{font-size:13px;color:#8090b0;line-height:1.75;}
.news-post-bar{position:absolute;top:0;left:0;right:0;height:2px;}
.news-post-bar.update{background:linear-gradient(90deg,var(--accent),transparent);}
.news-post-bar.dev{background:linear-gradient(90deg,#a78bfa,transparent);}
.news-post-bar.recruit{background:linear-gradient(90deg,#00ff88,transparent);}
.news-post-bar.event{background:linear-gradient(90deg,#fb923c,transparent);}

/* page padding adjustment for 2 rows */
.page{padding-top:164px !important;padding-bottom:140px !important;}
body .page[id]{padding-top:164px !important;padding-bottom:140px !important;}

/* mobile nav2 */
@media(max-width:900px){
  .nav2{
    top:60px;left:0;transform:none;width:100%;
    padding:0 10px;
    height:40px;
    overflow:visible;
    justify-content:space-between;
  }
  .nav2-left{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex:1;min-width:0;
  }
  .nav2-right{flex-shrink:0;}
  .page{padding-top:100px !important;} /* mobile: top-header 60 + nav2 40 */
  .acc-name{display:none;}
  .shop-grid{grid-template-columns:1fr 1fr;}
  /* lang-bar — desktop only */
  .lang-bar{display:none !important;}
}
@media(max-width:480px){
  .shop-grid{grid-template-columns:1fr;}
}

/* iOS fix for nav2 */
@supports (-webkit-touch-callout: none){
  .nav2{left:0 !important;transform:none !important;width:100% !important;}
}



/* FINAL OVERRIDE — desktop content offset (last in cascade) */
@media (min-width: 901px) {
  .page { padding-top: 144px !important; }
}


/* ── PAGE TRANSITION / LOADING SCREEN ────────────────────────── */
/* ═══════════════════════════════════════════
   LOADER — RED ALERT
   ═══════════════════════════════════════════ */
#pageLoader{
  position:fixed; inset:0; z-index:99999;
  background:#070a10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  opacity:1; pointer-events:auto;
  transition:opacity .5s ease;
  overflow:hidden;
}
#pageLoader.hidden{ opacity:0; pointer-events:none; }
#pageLoader.active{ opacity:1; pointer-events:auto; }

/* canvas для матричного дождя */
#loaderCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; opacity:.25;
}












/* горизонтальные глитч-полосы */
#pageLoader::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,158,196,.015) 3px,
    rgba(255,158,196,.015) 4px
  );
  animation:loaderScanlines 8s linear infinite;
}
@keyframes loaderScanlines{
  from{ background-position:0 0; }
  to  { background-position:0 100px; }
}

/* ── СКАН-ЛИНИЯ — чисто CYAN ── */
.loader-scanline{
  position:absolute; left:0; right:0;
  height:2px; z-index:10; pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,158,196,.15) 8%,
    rgba(255,158,196,.6) 30%,
    rgba(255,158,196,1) 48%,
    #fff 50%,
    rgba(255,158,196,1) 52%,
    rgba(255,158,196,.6) 70%,
    rgba(255,158,196,.15) 92%,
    transparent 100%
  );
  box-shadow:
    0 0 4px 1px #fff,
    0 0 10px 2px rgba(255,158,196,.9),
    0 0 24px 5px rgba(255,158,196,.4),
    0 0 70px 14px rgba(255,158,196,.1);
  top:-2px;
  animation:scanDown 3.5s cubic-bezier(.4,0,.2,1) infinite;
}
.loader-scanline::after{
  content:''; position:absolute; left:0; right:0;
  top:2px; height:180px;
  background:linear-gradient(180deg,
    rgba(255,158,196,.1) 0%,
    rgba(255,158,196,.05) 30%,
    transparent 100%
  );
  pointer-events:none;
}
.loader-scanline::before{
  content:''; position:absolute; top:-4px; left:0; right:0; height:10px;
  background:linear-gradient(90deg,
    rgba(255,158,196,1) 0px, rgba(255,158,196,1) 4px,
    rgba(255,158,196,.3) 4px, rgba(255,158,196,.3) 8px,
    transparent 8px, transparent calc(100% - 8px),
    rgba(255,158,196,.3) calc(100% - 8px), rgba(255,158,196,.3) calc(100% - 4px),
    rgba(255,158,196,1) calc(100% - 4px), rgba(255,158,196,1) 100%
  );
}
@keyframes scanDown{
  0%   { top:-2px; opacity:0; }
  3%   { opacity:1; }
  97%  { opacity:1; }
  100% { top:100%; opacity:0; }  /* 100% of the fixed loader, not 100vh — vh jumps with the phone address bar */
}

/* ── УГЛОВЫЕ РАМКИ — CYAN ── */
.loader-corner{
  position:absolute; width:40px; height:40px;
  border-color:var(--accent); border-style:solid;
  animation:cornerPulse 2s ease-in-out infinite;
}
.loader-corner.tl{ top:18px; left:18px; border-width:2px 0 0 2px; animation-delay:0s; }
.loader-corner.tr{ top:18px; right:18px; border-width:2px 2px 0 0; animation-delay:.5s; }
.loader-corner.bl{ bottom:18px; left:18px; border-width:0 0 2px 2px; animation-delay:1s; }
.loader-corner.br{ bottom:18px; right:18px; border-width:0 2px 2px 0; animation-delay:1.5s; }
.loader-corner::before,.loader-corner::after{
  content:''; position:absolute; background:var(--accent);
  opacity:.25;
}
.loader-corner.tl::before{ top:-1px; left:40px; height:1px; width:60px; }
.loader-corner.tl::after { left:-1px; top:40px; width:1px; height:60px; }
.loader-corner.tr::before{ top:-1px; right:40px; height:1px; width:60px; }
.loader-corner.tr::after { right:-1px; top:40px; width:1px; height:60px; }
.loader-corner.bl::before{ bottom:-1px; left:40px; height:1px; width:60px; }
.loader-corner.bl::after { left:-1px; bottom:40px; width:1px; height:60px; }
.loader-corner.br::before{ bottom:-1px; right:40px; height:1px; width:60px; }
.loader-corner.br::after { right:-1px; bottom:40px; width:1px; height:60px; }
@keyframes cornerPulse{
  0%,100%{ opacity:.45; box-shadow:none; }
  50%{ opacity:1; box-shadow:0 0 12px rgba(255,158,196,.65); }
}

/* ── БОКОВЫЕ ЗАСЕЧКИ — CYAN ── */
.loader-ticks{
  position:absolute; left:18px; top:0; bottom:0;
  width:14px; z-index:5; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:28px 0;
}
.loader-tick{
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,158,196,.18));
  transition:background .1s;
}
.loader-tick:nth-child(3n){ height:2px; background:linear-gradient(90deg, transparent, rgba(255,158,196,.4)); }
.loader-tick:nth-child(6n){ height:1px; background:linear-gradient(90deg, transparent, rgba(255,158,196,.6) 60%, rgba(255,255,255,.25)); }
.loader-ticks-r{
  position:absolute; right:18px; top:0; bottom:0;
  width:14px; z-index:5; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:28px 0;
}
.loader-ticks-r .loader-tick{ background:linear-gradient(270deg, transparent, rgba(255,158,196,.18)); }
.loader-ticks-r .loader-tick:nth-child(3n){ background:linear-gradient(270deg, transparent, rgba(255,158,196,.4)); }
.loader-ticks-r .loader-tick:nth-child(6n){ background:linear-gradient(270deg, transparent, rgba(255,158,196,.6) 60%, rgba(255,255,255,.25)); }

/* ── ЯДРО — DIAMOND CORE (CYAN) ── */
.loader-core{
  position:relative;
  width:100px; height:100px;
  display:flex; align-items:center; justify-content:center;
  z-index:20;
  flex-shrink:0;
}
/* алмазные кольца — все cyan, с разной интенсивностью */
.loader-core .diamond-ring{
  position:absolute;
  border:1px solid rgba(255,158,196,.4);
  animation:diamondSpin1 3s linear infinite;
  box-shadow:0 0 6px rgba(255,158,196,.3);
}
.loader-core .diamond-ring:nth-child(1){ width:100%; height:100%; }
.loader-core .diamond-ring:nth-child(2){
  width:70%; height:70%;
  border-color:rgba(255,158,196,.6);
  animation:diamondSpin2 2s linear infinite;
  animation-delay:-.5s;
  box-shadow:0 0 8px rgba(255,158,196,.45);
}
.loader-core .diamond-ring:nth-child(3){
  width:44%; height:44%;
  border-color:rgba(255,255,255,.7);
  border-width:1.5px;
  animation:diamondSpin1 .8s linear infinite;
  box-shadow:0 0 6px rgba(255,158,196,.6);
}
@keyframes diamondSpin1{
  from{ transform:rotate(45deg); }
  to  { transform:rotate(405deg); }
}
@keyframes diamondSpin2{
  from{ transform:rotate(-45deg); }
  to  { transform:rotate(-405deg); }
}

/* центральный бриллиант */
.loader-core .core-dot{
  width:14px; height:14px;
  background:radial-gradient(circle, #fff 20%, var(--accent) 65%);
  box-shadow:0 0 8px #fff, 0 0 18px var(--accent), 0 0 40px rgba(255,158,196,.5);
  animation:corePulse 1.1s ease-in-out infinite;
  position:relative; z-index:2;
  flex-shrink:0;
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
@keyframes corePulse{
  0%,100%{ transform:scale(1);    box-shadow:0 0 8px #fff,0 0 18px var(--accent),0 0 35px rgba(255,158,196,.45); }
  50%    { transform:scale(1.45); box-shadow:0 0 14px #fff,0 0 30px var(--accent),0 0 60px rgba(255,158,196,.7); }
}

/* пульсирующие ауры вокруг ядра — cyan */
.loader-core .aura{
  position:absolute;
  border-radius:50%;
  border:1px solid transparent;
  pointer-events:none;
}
.loader-core .aura:nth-child(4){ inset:-4px;  border-color:rgba(255,158,196,.3);  animation:auraPulse 1.8s ease-in-out infinite 0s; }
.loader-core .aura:nth-child(5){ inset:-10px; border-color:rgba(255,158,196,.18); animation:auraPulse 1.8s ease-in-out infinite .4s; }
.loader-core .aura:nth-child(6){ inset:-18px; border-color:rgba(255,158,196,.1);  animation:auraPulse 1.8s ease-in-out infinite .8s; }
@keyframes auraPulse{
  0%,100%{ opacity:.4; }
  50%{ opacity:1; box-shadow:0 0 12px rgba(255,158,196,.4); }
}

/* ── ТЕКСТ С ГЛИТЧЕМ (CYAN) ── */
.loader-text{
  position:relative; z-index:20;
  margin-top:28px;
  font-family:'Orbitron',sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:6px; text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 6px rgba(255,158,196,.9), 0 0 20px rgba(255,158,196,.5);
  animation:textGlitch 3.5s ease-in-out infinite;
}
@keyframes textGlitch{
  0%,84%,100%{ text-shadow:0 0 6px rgba(255,158,196,.9),0 0 20px rgba(255,158,196,.5); transform:none; }
  85%{ transform:translateX(3px) skewX(4deg); text-shadow:3px 0 rgba(255,255,255,.9),-2px 0 rgba(255,158,196,.9); }
  86%{ transform:translateX(-2px) skewX(-2deg); text-shadow:-3px 0 rgba(255,255,255,.7),2px 0 rgba(255,158,196,.8); }
  87%{ transform:none; text-shadow:0 0 6px rgba(255,158,196,.9),0 0 20px rgba(255,158,196,.5); }
  93%{ transform:translateX(-1px); text-shadow:-2px 0 rgba(255,255,255,.5),1px 0 rgba(255,158,196,.7); }
  94%{ transform:none; }
}
.loader-text .dot-anim::after{
  content:""; display:inline-block; width:1ch; text-align:left;
  animation:loaderDots 1s steps(4,end) infinite;
}
@keyframes loaderDots{
  0%  { content:""; }
  25% { content:"."; }
  50% { content:".."; }
  75% { content:"..."; }
  100%{ content:""; }
}
.loader-text .dot-anim{ display:inline-block; min-width:24px; text-align:left; margin-left:8px; }

/* ── БАР — сегментированный (CYAN) ── */
.loader-bar-wrap{
  position:relative; z-index:20;
  padding:6px 0;
  display:flex; align-items:center; gap:6px;
}
.loader-bar-wrap::before,.loader-bar-wrap::after{
  content:''; flex-shrink:0;
  width:0; height:0;
  border-style:solid;
}
.loader-bar-wrap::before{
  border-width:4px 0 4px 7px;
  border-color:transparent transparent transparent rgba(255,158,196,.7);
}
.loader-bar-wrap::after{
  border-width:4px 7px 4px 0;
  border-color:transparent rgba(255,158,196,.7) transparent transparent;
}
.loader-bar{
  position:relative; z-index:2;
  width:min(260px, 58vw); height:4px;
  background:rgba(255,158,196,.08);
  border-radius:0;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,158,196,.25);
}
.loader-bar::after{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    90deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,.55) 10px,
    rgba(0,0,0,.55) 12px
  );
  z-index:2;
  pointer-events:none;
}
.loader-bar::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:0;
  background:linear-gradient(90deg,
    rgba(255,158,196,.55) 0%,
    rgba(255,158,196,1) 80%,
    #fff 100%
  );
  box-shadow:0 0 14px rgba(255,158,196,.7), 0 0 4px #fff;
  z-index:1;
}
/* Полоса-заполнение: включается классом .go, доходит ровно до 100% за --load-dur.
   Именно её завершение синхронизировано со скрытием загрузчика — одинаково на любом хостинге. */
.loader-bar.go::before{
  animation:loaderFill var(--load-dur,2.8s) cubic-bezier(.25,.6,.3,1) forwards;
}
@keyframes loaderFill{
  from{ width:0; }
  to  { width:100%; }
}

/* ── Плавный fade-in страницы ── */
.page.active{ animation:pageEnter .45s ease both; }
@keyframes pageEnter{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  #pageLoader, .loader-scanline, .loader-core .diamond-ring, .loader-core .core-dot,
  .loader-bar::before, .page.active{ animation-duration:.01ms !important; }
}


/* glass effect (frosted panels) */
.stat,.role,.perk,.modal-box,.sell-modal-box,.games-dropdown,.card,[class*="-card"]:not([class*="title"]):not(.sa-card),.profile-card,.profile-section,.shop-item,[class*="-box"]:not(.umbra-check-box),.lore-block,.uc-form,.uc-mode,.uc-chat-box,.friend-card,.acc-balance,.acc-drop,.pay-box,.topup-box{
  background:rgba(16,20,32,.42)!important;
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 6px 26px rgba(0,0,0,.28)!important;
}

html{overflow-x:hidden;overflow-y:scroll;}body{overflow:visible!important;}
.btn,.ucbtn,.shop-buy-btn,.profile-save-btn,.game-dl-btn,.modal-tab,.cta-icon,.shop-btn,.news-btn,.community-btn,.func-btn,.rules-btn,.lang-bar-btn,.shop-sort-btn,.merge-btn{filter:brightness(1.12);}

#ovActivity{margin-top:22px;}
.sa-head{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.055);padding:12px 18px;border-radius:4px;font-size:15px;font-weight:600;color:#fff;margin-bottom:14px;}
.sa-head .sa-sub{font-size:14px;color:#8a98a8;font-weight:400;}
.sa-card{background:linear-gradient(180deg,rgba(34,45,62,.5),rgba(20,27,38,.5));border-radius:5px;margin-bottom:14px;padding:16px;}
.sa-top{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px;}
.sa-cover{width:190px;height:90px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sa-cover img{max-width:80%;max-height:80%;object-fit:contain;}
.sa-body{flex:1;min-width:0;display:flex;justify-content:space-between;gap:14px;}
.sa-name{font-size:19px;color:#fff;font-weight:500;}
.sa-meta{font-size:13px;color:#7a8a9a;line-height:1.7;text-align:right;white-space:nowrap;flex-shrink:0;}
.sa-ach-row{display:flex;align-items:center;gap:14px;}
.sa-ach-label{font-size:13px;color:#8a98a8;white-space:nowrap;}
.sa-ach-label b{color:#cfe0ff;font-weight:600;}
.sa-ach-bar{width:230px;height:7px;border-radius:4px;background:rgba(0,0,0,.35);overflow:hidden;}
.sa-ach-fill{height:100%;background:linear-gradient(90deg,#67c1f5,#3a6e8f);border-radius:4px;}
.sa-ach-icons{display:flex;gap:6px;margin-left:auto;}
.sa-ico{width:32px;height:32px;border-radius:6px;border:1px solid rgba(255,255,255,.08);flex-shrink:0;}
.sa-ico.sa-more{display:flex;align-items:center;justify-content:center;font-size:12px;color:#b0c0d0;background:rgba(0,0,0,.4);font-weight:600;}
.sa-empty{color:var(--muted);font-size:13px;padding:16px 0;}


#avatarEditorOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(3,5,12,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#avatarEditorOverlay.open { display: flex; }

#avatarEditorModal {
  background: #0d1117;
  border: 1px solid #1a2438;
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  padding: 24px;
  position: relative;
  box-shadow: 0 0 60px rgba(255,158,196,.08);
}

.ae-title {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  margin-bottom: 18px;
}

.ae-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none; border: none;
  color: #3a4a6a; font-size: 20px;
  cursor: pointer; line-height: 1; padding: 4px;
  transition: color .2s;
}
.ae-close:hover { color: #8899bb; }

/* Stage */
.ae-stage {
  width: 100%;
  height: 260px;
  background: #06090f;
  border: 1px solid #141e30;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.ae-stage:active { cursor: grabbing; }

#aeCropCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.ae-img-layer {
  position: absolute;
  z-index: 1;
  transform-origin: 0 0;
  will-change: transform;
}
.ae-img-layer img {
  display: block;
  max-width: none;
  pointer-events: none;
}

.ae-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #2a3a52;
  z-index: 2;
  pointer-events: none;
}
.ae-placeholder svg { opacity: .5; }
.ae-placeholder span { font-size: 12px; font-family: 'Orbitron', monospace; letter-spacing: 1px; }

/* Upload btn inside stage */
.ae-upload-btn {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 10;
  background: rgba(8,14,28,.85);
  border: 1px solid #1e2e48;
  border-radius: 6px;
  color: #7aa0cc;
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: 'Orbitron', monospace;
  letter-spacing: .5px;
  font-weight: 700;
  transition: border-color .2s, color .2s;
}
.ae-upload-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Hint */
.ae-hint {
  text-align: center;
  font-size: 10px;
  color: #2a3a50;
  margin-top: 7px;
  letter-spacing: .5px;
  min-height: 14px;
}

/* Sliders */
.ae-slider-section { margin-top: 14px; }
.ae-slider-label {
  font-size: 10px;
  color: #3a5070;
  letter-spacing: .5px;
  margin-bottom: 6px;
  font-family: 'Orbitron', monospace;
}
.ae-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ae-slider-row input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  height: 3px;
  background: #141e30;
  border-radius: 2px;
  outline: none;
}
.ae-slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #c8d8f0;
  border: 2px solid #2a3a58;
  cursor: pointer;
}
.ae-icon-sm { font-size: 11px; color: #2a3a58; }
.ae-icon-lg { font-size: 17px; color: #2a3a58; }

/* Footer */
.ae-footer {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ae-btn-reset {
  background: none; border: none;
  color: #3a4a6a; font-family: 'Orbitron', monospace;
  font-size: 9px; letter-spacing: .5px;
  cursor: pointer; padding: 4px 0;
  transition: color .2s;
}
.ae-btn-reset:hover { color: #8899bb; }
.ae-btn-cancel {
  background: none;
  border: 1px solid #1e2e48;
  color: #5a7090;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: 'Orbitron', monospace;
  font-size: 9px; letter-spacing: .5px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.ae-btn-cancel:hover { border-color: #3a4e6a; color: #8899bb; }
.ae-btn-apply {
  background: linear-gradient(135deg, #0080cc, #ff9ec4);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 22px;
  font-family: 'Orbitron', monospace;
  font-size: 9px; letter-spacing: .5px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}
.ae-btn-apply:hover { opacity: .85; }
.ae-btn-apply:disabled { opacity: .3; cursor: default; }


#offlineWidget{display:none;position:fixed;inset:0;z-index:999999;background:rgba(0,4,14,0.92);align-items:center;justify-content:center;backdrop-filter:blur(4px);}
#offlineWidget.show{display:flex;}
.ow{position:relative;width:420px;max-width:95vw;background:linear-gradient(160deg,#03080f,#050d1a);border:1px solid #ff9ec4;font-family:'Orbitron',monospace;overflow:hidden;box-shadow:0 0 40px rgba(255,158,196,.15);}
.ow .corner{position:absolute;width:16px;height:16px;border-color:#ff9ec4;border-style:solid;}
.ow .corner.tl{top:8px;left:8px;border-width:1px 0 0 1px}
.ow .corner.tr{top:8px;right:8px;border-width:1px 1px 0 0}
.ow .corner.bl{bottom:8px;left:8px;border-width:0 0 1px 1px}
.ow .corner.br{bottom:8px;right:8px;border-width:0 1px 1px 0}
.ow-header{background:rgba(255,158,196,.08);border-bottom:1px solid rgba(255,158,196,.3);padding:12px 20px;display:flex;align-items:center;gap:10px;}
.ow-logo{font-size:10px;font-weight:700;color:#ff9ec4;letter-spacing:3px;}
.ow-dot{width:6px;height:6px;border-radius:50%;background:#00ffcc;margin-left:auto;box-shadow:0 0 6px #00ffcc;animation:owblink 1.2s ease-in-out infinite;}
@keyframes owblink{0%,100%{opacity:1}50%{opacity:.2}}
.ow-body{padding:32px 24px;text-align:center;}
.ow-icon{width:90px;height:90px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;position:relative;}
.ow-emblem{width:34px;height:34px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 0 7px rgba(255,158,196,.5));transform:translateY(0px);}
.ow-ring1{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,158,196,.4);animation:spin 8s linear infinite;}
.ow-ring2{position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(255,158,196,.15);animation:spin 5s linear infinite reverse;}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ow-icon svg{width:52px;height:52px;stroke:#ff9ec4;fill:none;filter:drop-shadow(0 0 8px rgba(255,158,196,.4));position:relative;z-index:2;}
.ow-code{font-size:9px;color:rgba(255,158,196,.6);letter-spacing:2px;margin-bottom:8px;}
.ow-title{font-size:16px;font-weight:900;color:#dde4f0;letter-spacing:2px;margin-bottom:6px;line-height:1.2;}
.ow-title span{color:#00ffcc;}
.ow-sub{font-size:8px;color:rgba(221,228,240,.4);letter-spacing:3px;margin-bottom:24px;}
.ow-msg{font-family:'Share Tech Mono',monospace;font-size:11px;color:rgba(221,228,240,.5);line-height:1.8;margin-bottom:28px;border:1px solid rgba(255,158,196,.12);background:rgba(255,158,196,.03);padding:14px 16px;}
.ow-msg .hi{color:rgba(255,158,196,.8);}
.ow-btn{display:block;width:100%;padding:14px;background:none;border:1px solid #ff9ec4;color:#ff9ec4;font-family:'Orbitron',monospace;font-size:11px;letter-spacing:3px;font-weight:700;cursor:pointer;text-transform:uppercase;transition:.2s;}
.ow-btn:hover{background:rgba(255,158,196,.08);}
.ow-footer{border-top:1px solid rgba(255,158,196,.12);padding:10px 20px;display:flex;justify-content:space-between;}
.ow-footer-txt{font-size:8px;color:rgba(90,100,128,.8);letter-spacing:1px;font-family:'Share Tech Mono',monospace;}


/* ── MOBILE PERFORMANCE: на телефонах отключаем самые дорогие эффекты ── */
@media (max-width: 768px){
  /* backdrop-filter — главный убийца FPS при прокрутке на мобильных.
     Фоны панелей и так почти непрозрачные (0.92-0.97), разница не видна. */
  *{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  /* Пульсация text-shadow/box-shadow заставляет перерисовывать элемент каждый кадр */
  .hero-title{ animation:none !important; text-shadow:0 0 20px rgba(255,158,196,.3); }
  .stat.visible{ animation:none !important; }
  .death-word{ animation:none !important; }
}


/* ── UC: карточки персонажей ── */
.uc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.uc-card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:18px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s, transform .2s;position:relative;overflow:hidden;
}
.uc-card:hover{border-color:rgba(255,158,196,.4);transform:translateY(-2px);}
.uc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cc-a,#ff9ec4),var(--cc-b,#7b5ea7));opacity:.7;
}
.uc-card-top{display:flex;align-items:center;gap:12px;}
.uc-ava{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:linear-gradient(135deg,var(--cc-a,#ff9ec4),var(--cc-b,#7b5ea7));
}
.uc-name{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:#fff;letter-spacing:.5px;}
.uc-role{font-size:11px;color:var(--muted);margin-top:2px;}
.uc-desc{font-size:12px;color:#8090b0;line-height:1.6;flex:1;}
.uc-meta{font-size:10px;color:var(--muted);letter-spacing:1px;}
.uc-actions{display:flex;gap:8px;}
.ucbtn{
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:9px 14px;border-radius:6px;border:1px solid rgba(255,158,196,.35);
  background:rgba(255,158,196,.08);color:var(--accent);cursor:pointer;
  transition:background .2s;
}
.ucbtn:hover{background:rgba(255,158,196,.16);}
.ucbtn.primary{background:var(--accent);color:#000;border-color:var(--accent);}
.ucbtn.primary:hover{background:#37e0ff;}
.ucbtn.ghost{background:transparent;border-color:var(--border);color:var(--muted);}
.ucbtn.ghost:hover{color:#dde4f0;border-color:var(--muted);}
.ucbtn.danger{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08);color:#ef4444;}
.ucbtn.danger:hover{background:rgba(239,68,68,.16);}
.uc-add{
  border:1px dashed var(--border);background:var(--card);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px;
  cursor:pointer;color:var(--muted);gap:8px;transition:color .2s,border-color .2s;
}
.uc-add:hover{color:var(--accent);border-color:rgba(255,158,196,.4);}
.uc-add b{font-size:34px;line-height:1;font-weight:400;}
.uc-add i{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-style:normal;}

/* ── UC: список чатов ── */
.uc-chat-list{display:flex;flex-direction:column;gap:10px;}
.uc-chat-item{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;
  transition:border-color .2s;
}
.uc-chat-item:hover{border-color:rgba(255,158,196,.4);}
.uc-chat-item .uc-ava{width:44px;height:44px;font-size:22px;}
.uc-ci-body{flex:1;min-width:0;}
.uc-ci-last{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;}
.uc-ci-time{font-size:10px;color:var(--muted);flex-shrink:0;}
.uc-empty{color:var(--muted);font-size:12px;padding:30px;text-align:center;border:1px dashed var(--border);border-radius:10px;line-height:1.8;}

/* ── UC: чат ── */
.uc-chat-box{
  background:rgba(5,8,14,.6);border:1px solid var(--border);border-radius:12px;
  display:flex;flex-direction:column;overflow:hidden;
  height:calc(100vh - 310px);min-height:400px;
}
.uc-chat-top{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:#070a10;border-bottom:1px solid var(--border);
}
.uc-ct-name{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:#fff;}
.uc-ct-status{font-size:10px;color:#00ff88;letter-spacing:1px;display:flex;align-items:center;gap:6px;}
.uc-ct-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#00ff88;box-shadow:0 0 5px #00ff88;}
.uc-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;}
.uc-msg{display:flex;gap:10px;max-width:80%;}
.uc-msg .uc-ava{width:34px;height:34px;font-size:17px;flex-shrink:0;}
.uc-bubble{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:10px 14px;font-size:13px;line-height:1.65;color:#dde4f0;
  word-break:break-word;white-space:pre-wrap;
}
.uc-msg.user{align-self:flex-end;flex-direction:row-reverse;}
.uc-msg.user .uc-bubble{background:rgba(255,158,196,.1);border-color:rgba(255,158,196,.3);}
.uc-msg.error .uc-bubble{border-color:rgba(239,68,68,.45);color:#f3a6a6;}
.uc-mtime{font-size:9px;color:var(--muted);margin-top:5px;}
.uc-typing{display:flex;gap:5px;align-items:center;padding:4px 2px;}
.uc-typing i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.4;animation:ucTyping 1.1s infinite;}
.uc-typing i:nth-child(2){animation-delay:.18s}
.uc-typing i:nth-child(3){animation-delay:.36s}
@keyframes ucTyping{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.uc-inputbar{display:flex;gap:10px;padding:13px 16px;background:#070a10;border-top:1px solid var(--border);}
.uc-input{
  flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;
  color:#dde4f0;font-family:'Share Tech Mono',monospace;font-size:13px;
  padding:11px 14px;outline:none;resize:none;max-height:120px;
}
.uc-input:focus{border-color:rgba(255,158,196,.5);}

/* ── UC: формы ── */
.uc-form{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px;max-width:620px;}
.uc-fl{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);opacity:.8;display:block;margin:16px 0 7px;}
.uc-fl:first-child{margin-top:0;}
.uc-fi,.uc-fa,.uc-fs{
  width:100%;background:#070a10;border:1px solid var(--border);border-radius:8px;
  color:#dde4f0;font-family:'Share Tech Mono',monospace;font-size:13px;
  padding:10px 13px;outline:none;
}
.uc-fi:focus,.uc-fa:focus{border-color:rgba(255,158,196,.5);}
.uc-fa{resize:vertical;min-height:80px;line-height:1.6;}
.uc-fh{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.6;}
.uc-emoji-row{display:flex;flex-wrap:wrap;gap:7px;}
.uc-emoji{
  width:42px;height:42px;border-radius:9px;border:1px solid var(--border);
  background:#070a10;font-size:21px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:border-color .15s;
}
.uc-emoji:hover{border-color:var(--muted);}
.uc-emoji.sel{border-color:var(--accent);background:rgba(255,158,196,.1);}
.uc-colors{display:flex;gap:8px;flex-wrap:wrap;}
.uc-color{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.uc-color.sel{border-color:#fff;}

/* ── UC: настройки ── */
.uc-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.uc-mode{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:border-color .2s;}
.uc-mode:hover{border-color:var(--muted);}
.uc-mode.sel{border-color:var(--accent);background:rgba(255,158,196,.06);}
.uc-mode h4{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:1px;color:#fff;margin:0 0 6px;}
.uc-mode p{font-size:11px;color:var(--muted);line-height:1.6;margin:0;}
.uc-warn{
  border:1px solid rgba(255,170,34,.35);background:rgba(255,170,34,.06);
  border-radius:8px;padding:12px 14px;font-size:11px;color:#e8c98a;line-height:1.7;margin-top:14px;
}
.uc-status{font-size:12px;margin-top:12px;min-height:18px;font-family:'Share Tech Mono',monospace;}
.uc-status.ok{color:#00ff88;}
.uc-status.err{color:#ef4444;}

@media (max-width:768px){
  .uc-msg{max-width:92%;}
  .uc-chat-box{height:calc(100vh - 260px);min-height:340px;}
}


/* Фоновый город */
.city-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    background: linear-gradient(180deg, #050510 0%, #0a0a2a 30%, #0d0d1a 100%);
}
/* Огни города (окна) */
.city-lights {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: -3;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 220, 100, 0.3) 0px,
            rgba(255, 220, 100, 0.3) 3px,
            transparent 3px,
            transparent 25px),
        repeating-linear-gradient(0deg,
            rgba(255, 200, 50, 0.2) 0px,
            rgba(255, 200, 50, 0.2) 15px,
            transparent 15px,
            transparent 35px);
    background-size: 35px 45px;
}
/* Отражение на мокром асфальте */
.city-lights::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%);
}
#petalCanvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}


/* небо: фиолетовая гроза вместо почти чёрного */
.city-background{
  background:linear-gradient(180deg,
    #120825 0%, #241048 28%, #3a1763 55%, #4a1d7a 75%, #2a0f4e 100%) !important;
}
/* жёлтую сетку окон убираем — город теперь со своими окнами */
.city-lights{display:none !important;}

/* грозовые тучи сверху, медленно ползут */
.uc2-clouds{position:fixed;top:-6vh;left:-20%;width:140%;height:40vh;z-index:-3;
  pointer-events:none;will-change:transform;
  background:
    radial-gradient(ellipse 24% 55% at 8% 18%,  rgba(8,4,20,.95), transparent 70%),
    radial-gradient(ellipse 30% 60% at 26% 8%,  rgba(12,6,26,.95), transparent 70%),
    radial-gradient(ellipse 26% 50% at 45% 16%, rgba(8,4,18,.92),  transparent 70%),
    radial-gradient(ellipse 32% 62% at 64% 6%,  rgba(12,6,26,.95), transparent 70%),
    radial-gradient(ellipse 26% 52% at 82% 14%, rgba(8,4,20,.93),  transparent 70%),
    radial-gradient(ellipse 30% 58% at 97% 9%,  rgba(12,6,26,.95), transparent 70%),
    linear-gradient(180deg, rgba(6,3,14,.97) 0%, rgba(8,4,20,.5) 50%, transparent 100%);
  animation:uc2CloudA 90s ease-in-out infinite alternate;}
.uc2-clouds.b{top:-10vh;height:34vh;opacity:.7;
  background:
    radial-gradient(ellipse 28% 60% at 16% 22%, rgba(48,20,80,.6),  transparent 72%),
    radial-gradient(ellipse 24% 54% at 38% 10%, rgba(60,24,98,.5),  transparent 72%),
    radial-gradient(ellipse 30% 60% at 58% 20%, rgba(44,18,72,.55), transparent 72%),
    radial-gradient(ellipse 26% 56% at 78% 8%,  rgba(58,24,94,.5),  transparent 72%),
    radial-gradient(ellipse 24% 52% at 94% 18%, rgba(48,20,80,.55), transparent 72%);
  animation:uc2CloudB 70s ease-in-out infinite alternate;}
@keyframes uc2CloudA{from{transform:translateX(0)}to{transform:translateX(5%)}}
@keyframes uc2CloudB{from{transform:translateX(0)}to{transform:translateX(-6%)}}

/* город */
.uc2-city{position:fixed;left:0;right:0;bottom:0;height:32vh;z-index:-3;pointer-events:none;}
.uc2-city svg{position:absolute;left:0;bottom:0;width:100%;height:100%;}

/* мокрая земля с отблесками огней */
.uc2-ground{position:fixed;left:0;right:0;bottom:0;height:10vh;z-index:-3;pointer-events:none;
  background:linear-gradient(180deg, rgba(16,7,32,0) 0%, rgba(12,5,26,.9) 60%, #08030f 100%);}
.uc2-ground i{position:absolute;bottom:0;border-radius:50%;
  background:radial-gradient(ellipse, var(--rc,rgba(255,110,200,.30)), transparent 70%);
  animation:uc2Refl 6s ease-in-out infinite;animation-delay:var(--rd,0s);will-change:opacity;}
@keyframes uc2Refl{0%,100%{opacity:.45}50%{opacity:1}}

/* виньетка как на референсе */
.uc2-vig{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(ellipse 80% 75% at 50% 42%, transparent 55%, rgba(0,0,0,.62) 100%);}

@media (prefers-reduced-motion: reduce){
  .uc2-clouds,.uc2-ground i{animation:none !important;}
}


/* фон: body перекрывал слои с отрицательным z-index своим чёрным фоном */
body{background:transparent !important;}
html{background:#000;}
.gc{background:rgba(6,9,15,.88) !important;}

/* Saga Mind uses the city+petals backdrop, not the matrix (hide the shared globalMatrix canvas) */
#globalMatrix{display:none!important;}


/* ===== unified market/news/community theming (from FoC) ===== */
/* ============ PER-SECTION ACCENT THEMING ============
   Shop = purple · News = green · Community = turquoise.
   Scoped to each .page container; !important beats inline + JS colors. */

/* ── SHOP → purple hero like Galactic Cleaner; tabs + banner keep functional colors ── */
#page-shop{ --accent:#a78bfa; }
#page-shop .status-dot{ background:#a78bfa!important; box-shadow:0 0 6px #a78bfa!important; }
#page-shop .status-text{ color:#a78bfa!important; }
#page-shop .status-line{ background:linear-gradient(90deg,rgba(167,139,250,.4),transparent)!important; }
#page-shop .hero-title span{ color:#a78bfa!important; }
#page-shop .sec-label{ color:#a78bfa!important; }
#page-shop .shop-filter.active{ color:#c4b5fd!important; border-color:#a78bfa!important; background:rgba(167,139,250,.12)!important; }
#page-shop .shop-sort-btn.active{ color:#c4b5fd!important; border-color:#a78bfa!important; background:rgba(167,139,250,.12)!important; }

/* ── NEWS → bright green (matches the NEWS nav button) ── */
#page-news{ --accent:#86efac; }
#page-news .status-dot{ background:#86efac!important; box-shadow:0 0 8px #86efac!important; }
#page-news .status-text{ color:#86efac!important; }
#page-news .status-line{ background:linear-gradient(90deg,rgba(134,239,172,.5),transparent)!important; }
#page-news .hero-title span{ color:#86efac!important; }
#page-news .sec-label{ color:#86efac!important; }
#page-news .news-btn, #page-news button.active{ color:#86efac!important; border-color:#86efac!important; }

/* ── COMMUNITY → bright turquoise (matches the COMMUNITY nav button) ── */
#page-community{ --accent:#5eead4; }
#page-community .status-dot{ background:#5eead4!important; box-shadow:0 0 8px #5eead4!important; }
#page-community .status-text{ color:#5eead4!important; }
#page-community .status-line{ background:linear-gradient(90deg,rgba(94,234,212,.5),transparent)!important; }
#page-community .hero-title span{ color:#5eead4!important; }
#page-community .sec-label{ color:#ff9ec4!important; }
#page-community .sec-line{ background:linear-gradient(90deg,rgba(255,158,196,.4),transparent)!important; }
/* ── Auth: registration step 2 + login-name availability ── */
.modal-hint{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.45;}
.profile-hint{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.45;}
.profile-input[readonly],.profile-input:disabled{opacity:.6;cursor:not-allowed;}
.login-status{font-size:11px;margin-top:5px;min-height:14px;color:var(--muted);}
.login-status.ok{color:#4ade80;}
.login-status.bad{color:#ef4444;}
.auth-alt{text-align:center;font-size:11.5px;color:var(--muted);margin-top:12px;}
.auth-alt a{color:var(--accent);text-decoration:none;font-weight:600;}
.auth-alt a:hover{text-decoration:underline;}
.auth-step2-head{display:flex;flex-direction:column;gap:3px;align-items:center;margin:-2px 0 14px;}
.auth-step2-badge{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#4ade80;
  border:1px solid rgba(74,222,128,.35);background:rgba(74,222,128,.08);border-radius:999px;padding:3px 10px;}
.auth-step2-email{font-size:12px;color:var(--text);word-break:break-all;text-align:center;}
/* ── Glass panels: a real fallback ──
   The "glass" rule above paints panels at 42% opacity and leans on backdrop-filter to make
   them read as solid. Browsers that ignore backdrop-filter (many phones do) were left with a
   see-through dialog — that is why registration looked transparent. Two safety nets:
   1) any browser without backdrop-filter gets an opaque panel;
   2) on phones the DIALOGS are opaque no matter what, because unreadable text in a modal you
      are typing a password into is not a style choice. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .stat,.role,.perk,.modal-box,.sell-modal-box,.games-dropdown,.card,[class*="-card"]:not([class*="title"]):not(.sa-card),.profile-card,.profile-section,.shop-item,[class*="-box"]:not(.umbra-check-box),.lore-block,.uc-form,.uc-mode,.uc-chat-box,.friend-card,.acc-balance,.acc-drop,.pay-box,.topup-box{
    background:#10141f!important;
  }
}
@media(max-width:900px){
  /* The class is doubled on purpose. The glass rule reaches these panels through
     [class*="-box"]:not(.umbra-check-box) — specificity (0,2,0) — while a plain .modal-box
     is only (0,1,0). Two !important declarations are decided by specificity FIRST, so this
     override lost every time and the sign-in dialog stayed see-through on phones. Doubling
     the class raises it to (0,2,0), and being later in the file it now wins. */
  .modal-box.modal-box,.sell-modal-box.sell-modal-box,.pay-box.pay-box,.topup-box.topup-box,
  .games-dropdown.games-dropdown,.acc-drop.acc-drop{
    background:#10141f!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
}
/* ── Auth modal: anchor to top so it never twitches ──
   The dialog was vertically centered (align-items:center). Every time its height changed —
   an error line appearing, the code step replacing the fields — the browser re-centered it and
   the whole box jumped up a few px. During sign-in several of those happen in a row, which read
   as "the modal is twitching". Anchoring the top edge with a fixed offset means the box only
   grows downward (and scrolls if tall); the top never moves. Scoped to #authModal so the other
   dialogs keep their centering. */
#authModal{align-items:center!important;}

/* ── Custom checkbox (site style) + static message area ──────────────────────
   CHECKBOX: the "remember me" box used a native input with accent-color. Replaced with a
   themed box + animated check, consistent across the whole site.
   MESSAGES: the error/success line used display:none↔block, so when it appeared it PUSHED the
   button, Google and link down (worse in longer languages). Now #authModal .modal-error always
   reserves a fixed centered slot — the text only fades in, nothing below it ever moves. */
.umbra-check{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:12px;color:#8592ad;line-height:1.35;margin:2px 0 10px;}
.umbra-check input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.umbra-check .umbra-check-box{width:18px;height:18px;flex-shrink:0;border-radius:5px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);display:inline-flex;align-items:center;justify-content:center;color:#06111f;transition:background .15s,border-color .15s;}
.umbra-check .umbra-check-box svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s;}
.umbra-check input:checked + .umbra-check-box{background:#ff9ec4;border-color:#ff9ec4;}
.umbra-check input:checked + .umbra-check-box svg{opacity:1;transform:scale(1);}
.umbra-check:hover .umbra-check-box{border-color:#ff9ec4;}
.umbra-check input:focus-visible + .umbra-check-box{box-shadow:0 0 0 3px rgba(255,158,196,.3);}
#authModal .modal-error,#authModal #s2Err,#authModal #loginErr,#authModal #regErr{
  display:flex!important;align-items:center;justify-content:center;text-align:center;
  min-height:32px;margin:2px 0 6px!important;
}
#authModal .modal-error:not(.show){visibility:hidden;}
/* ── Mobile header/nav fixes (batch) ─────────────────────────────────────────
   2) FoC & GC use identical header markup; the title just renders wider on narrow phones and
      pushed into the download/burger. Compact the logo + title so both fit down to ~340px.
   4) Guide + Rules (nav2-center) didn't fit on the mobile nav2 row → moved into the burger
      menu (see modals.php); hidden from the row here.
   6) Sound + connection stacked VERTICALLY in the corner so they never crowd the CTA icons. */
@media(max-width:900px){
  .top-header-left{gap:8px!important;min-width:0;}
  .top-header-left > img{width:28px!important;height:28px!important;}
  .games-logo-btn{min-width:0;overflow:hidden;}
  .top-header-title{font-size:12px!important;white-space:nowrap;}
  .top-header-sub{white-space:nowrap;font-size:6px!important;}
  .nav2-center{display:flex!important;flex:0 0 auto;}
  .nav2-center .nav2-lbl{display:none;}      /* phones: emoji only, so the row fits */
  .nav2-center .nav2-btn{padding:6px 7px;}
  .cta-util-group{flex-direction:column!important;gap:4px!important;right:10px!important;}
  .cta-util-group button{width:24px!important;height:24px!important;}
}
@media(max-width:380px){
  .top-header-title{font-size:10.5px!important;letter-spacing:.5px!important;}
  .top-header-left > img{width:26px!important;height:26px!important;}
  .game-dl-btn{padding:6px!important;}
}
/* Faint-white placeholder in the auth inputs (the password hint should read as a subtle ghost) */
#authModal .modal-input::placeholder{color:rgba(255,255,255,.28);opacity:1;}
#authModal .modal-input::-webkit-input-placeholder{color:rgba(255,255,255,.28);}
/* Chrome autofill sometimes paints a saved value with a coloured background — neutralise it */
#authModal .modal-input:-webkit-autofill,#authModal .modal-input:-webkit-autofill:hover,#authModal .modal-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text,#dce3f0);
  transition:background-color 9999s ease-in-out 0s;
}

/* ── Create-character: age category + NSFW lock ── */
.uc-age-row{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 2px;}
.uc-age{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;
  color:var(--muted,#8a98b8);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:9px 13px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;}
.uc-age:hover{color:#ff9ec4;border-color:rgba(255,158,196,.4);}
.uc-age.sel{color:#0b0d12;background:#ff9ec4;border-color:#ff9ec4;}
.uc-nsfw-check{margin-top:8px;}
/* Locked NSFW: dim it, but keep it clickable so the click can flash the age row (see
   ucNsfwLockedHint). The input itself is `disabled`, so the label click never toggles it. */
.uc-nsfw-check.disabled{opacity:.5;cursor:not-allowed;}
.uc-nsfw-check.disabled .umbra-check-box{cursor:not-allowed;}
.uc-age-row.flash .uc-age{animation:ucAgeFlash 1s ease;}
.uc-fh.flash{animation:ucHintFlash 1.2s ease;}
@keyframes ucAgeFlash{0%,100%{box-shadow:0 0 0 0 rgba(255,158,196,0)}30%{box-shadow:0 0 0 3px rgba(255,158,196,.55)}}
@keyframes ucHintFlash{0%,100%{color:var(--muted,#8892a8)}25%,60%{color:var(--accent);font-weight:700}}
.uc-nsfw-check.disabled .umbra-check-box{border-color:rgba(255,255,255,.15);}

/* ── Create-character: section headers, tags, visibility ── */
.uc-form-sec{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:#ff9ec4;margin:26px 0 4px;padding-bottom:8px;border-bottom:1px solid rgba(255,158,196,.18);}
.uc-form-sec:first-child{margin-top:0;}
.uc-sec-opt{color:var(--muted);letter-spacing:.5px;text-transform:none;font-size:10px;}
.uc-tag-row{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0;}
.uc-tag{font-size:11px;color:var(--muted);background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 11px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;}
.uc-tag:hover{color:#ff9ec4;border-color:rgba(255,158,196,.4);}
.uc-tag.sel{color:#0b0d12;background:#ff9ec4;border-color:#ff9ec4;font-weight:600;}
.uc-vis-row{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0;}
.uc-vis{flex:1 1 150px;text-align:left;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:11px 13px;cursor:pointer;
  transition:border-color .15s,background .15s;}
.uc-vis b{display:block;font-size:12px;color:var(--text);margin-bottom:3px;}
.uc-vis i{display:block;font-size:10.5px;color:var(--muted);font-style:normal;line-height:1.4;}
.uc-vis:hover{border-color:rgba(255,158,196,.4);}
.uc-vis.sel{border-color:#ff9ec4;background:rgba(255,158,196,.08);}
.uc-vis.sel b{color:#ff9ec4;}

/* ── Hero logo ──
   Was inline: fixed 110px + a duplicated object-fit. On phones the text column couldn't shrink,
   so this got pushed off-screen and the text was clipped. Text now has min-width:0 (in the
   markup) and the logo shrinks here. object-fit:contain — never crop the emblem. */
.hero-logo-wrap{flex:0 0 120px;display:flex;align-items:center;justify-content:center;padding-top:8px;}
.hero-logo{width:110px;height:110px;object-fit:contain;border-radius:20px;flex-shrink:0;}
@media(max-width:900px){
  .hero-logo-wrap{flex:0 0 64px;margin-right:0!important;padding-top:2px;}
  .hero-logo{width:58px;height:58px;border-radius:10px;}
}

/* Guide / Rules icons — line SVGs (not emoji), inherit the red via currentColor.
   The mobile block hides every nav2 svg, so these must opt back in: on phones the icon IS
   the button (the label is hidden), so it has to stay visible. */
.nav2-ico{width:12px;height:12px;vertical-align:-2px;margin-right:5px;flex-shrink:0;}
@media(max-width:900px){
  .nav2-center .nav2-btn svg{display:inline-block!important;}
  .nav2-ico{margin-right:0;width:15px;height:15px;vertical-align:-3px;}
}

/* ── Create character: sectioned cards, two columns ──
   Was one long 620px column. Now each section is its own card in a 2-col grid (1 col on
   phones), with a full-width action bar — closer to the reference layout and far less of a wall. */
.uc-create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;}
.uc-card2{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 22px;}
.uc-card2 .uc-form-sec{margin-top:0;}
.uc-card2 .uc-fl:first-of-type{margin-top:12px;}
.uc-create-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-bottom:8px;}
.uc-create-go{min-width:200px;}
@media(max-width:900px){
  .uc-create-grid{grid-template-columns:1fr;gap:12px;}
  .uc-card2{padding:16px 15px;}
  .uc-create-actions{flex-direction:column-reverse;}
  .uc-create-actions .ucbtn{width:100%;}
}

/* ══ REPORT: кнопка-флажок на карточке + модалка жалобы ══ */
.uc-report{
  position:absolute;top:10px;right:10px;width:26px;height:26px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,12,18,.55);border:1px solid var(--border);border-radius:7px;
  color:#5a6480;cursor:pointer;opacity:0;transition:opacity .18s,color .18s,border-color .18s;z-index:3;
}
.uc-card:hover .uc-report{opacity:1;}
.uc-report:hover{color:var(--hot);border-color:var(--hot);}
.uc-report svg{width:15px;height:15px;}

.uc-report-overlay{
  position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(3,5,9,.72);backdrop-filter:blur(4px);
}
.uc-report-overlay.show{display:flex;}
.uc-report-modal{
  width:100%;max-width:460px;max-height:90vh;overflow-y:auto;position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 24px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.uc-report-x{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;
  background:transparent;border:1px solid var(--border);color:#8892a8;cursor:pointer;font-size:14px;
}
.uc-report-x:hover{color:#fff;border-color:var(--hot);}
.uc-report-title{font-family:'Orbitron',sans-serif;font-weight:800;font-size:17px;color:#eef2fb;letter-spacing:.5px;}
.uc-report-sub{font-size:12px;color:var(--muted,#8892a8);margin:6px 0 4px;line-height:1.45;}
.uc-report-char{
  font-size:13px;color:var(--accent);font-weight:700;margin:10px 0 16px;padding:8px 12px;
  background:rgba(255,158,196,.08);border:1px solid rgba(255,158,196,.25);border-radius:8px;word-break:break-word;
}
.uc-report-char:empty{display:none;}
.uc-rep-reasons{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.uc-rep-r{
  text-align:left;padding:10px 13px;border-radius:9px;font-size:13px;cursor:pointer;
  background:var(--card);border:1px solid var(--border);color:#c3cbdb;transition:border-color .15s,background .15s,color .15s;
}
.uc-rep-r:hover{border-color:rgba(255,158,196,.45);}
.uc-rep-r.sel{border-color:var(--accent);background:rgba(255,158,196,.12);color:#fff;}
.uc-report-err{font-size:12.5px;color:var(--hot);margin-top:12px;min-height:16px;display:none;}
.uc-report-err.show{display:block;}
.uc-report-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}
@media(max-width:520px){
  .uc-report-modal{padding:22px 16px 18px;}
  .uc-report-actions{flex-direction:column-reverse;}
  .uc-report-actions .ucbtn{width:100%;}
  .uc-report{opacity:1;}/* на телефоне hover нет — показываем всегда */
}

/* ══ OC-подсказка + галочка-согласие + тело правил ══ */
.uc-oc-hint{
  display:flex;gap:10px;align-items:flex-start;margin:20px 0 10px;padding:12px 14px;
  background:rgba(255,158,196,.06);border:1px solid rgba(255,158,196,.22);border-radius:10px;
  font-size:12.5px;line-height:1.5;color:#c3cbdb;
}
.uc-oc-hint b{color:var(--accent);}
.uc-oc-star{color:var(--accent);font-size:15px;line-height:1.3;flex-shrink:0;}
.uc-agree{align-items:flex-start !important;margin:6px 0 4px !important;}
.uc-agree .umbra-check-txt a{color:var(--accent);text-decoration:underline;margin-left:4px;}
.uc-agree.shake{animation:ucShake .4s;}
@keyframes ucShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.ucbtn.primary:disabled,.uc-create-go:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3);}
.uc-terms-modal{max-width:540px;}
.uc-terms-body{font-size:13px;line-height:1.55;color:#c3cbdb;margin:14px 0 4px;max-height:56vh;overflow-y:auto;}
.uc-terms-body p{margin:0 0 12px;}
.uc-terms-body b{color:#eef2fb;}
.uc-terms-contact{color:var(--accent);font-size:12px;margin-top:14px !important;word-break:break-word;}

/* ══════════ CHAT (DMs + groups) ══════════
   Two columns: the chat list on the left, the open conversation on the right.
   Everything reuses the site's own tokens (--panel/--line/--accent/--muted) so the
   tab looks native in all three games. */
.chat-wrap{display:grid;grid-template-columns:250px 1fr;gap:14px;min-height:520px;}
.chat-side{display:flex;flex-direction:column;min-width:0;}
.chat-tabs{display:flex;gap:6px;margin-bottom:10px;}
.chat-tab{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--muted);border-radius:7px;padding:7px 6px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.chat-tab:hover{background:rgba(255,255,255,.09);color:var(--text);}
.chat-tab.active{color:var(--accent);border-color:var(--accent);background:rgba(255,255,255,.08);}
.chat-list{flex:1;overflow-y:auto;max-height:520px;display:flex;flex-direction:column;gap:6px;padding-right:4px;}
.chat-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);cursor:pointer;transition:background .18s,border-color .18s;}
.chat-row:hover{background:rgba(255,255,255,.07);}
.chat-row.active{border-color:var(--accent);background:rgba(255,255,255,.08);}
.chat-row-txt{min-width:0;flex:1;}
.chat-row-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-row-prev{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.chat-badge{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;color:var(--muted);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:2px 7px;flex-shrink:0;}
.chat-empty{font-size:11px;color:var(--muted);text-align:center;padding:28px 14px;line-height:1.5;}
/* right pane */
.chat-pane{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);overflow:hidden;}
.chat-head{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line);min-height:62px;}
.chat-head-txt{flex:1;min-width:0;}
.chat-head-name{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-head-sub{font-size:10px;color:var(--muted);margin-top:3px;}
.chat-head-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
.chat-pinned{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.04);}
.chat-pin-ic{font-size:12px;flex-shrink:0;}
.chat-pin-tx{flex:1;min-width:0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-pin-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0 2px;}
.chat-pin-x:hover{color:var(--text);}
/* messages */
.chat-msgs{flex:1;overflow-y:auto;max-height:430px;min-height:260px;padding:14px;display:flex;flex-direction:column;gap:10px;}
.chat-msg{display:flex;align-items:flex-start;gap:8px;max-width:78%;}
.chat-msg.mine{align-self:flex-end;flex-direction:row-reverse;}
.chat-bub{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:11px;padding:8px 11px;min-width:0;}
.chat-msg.mine .chat-bub{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);}
.chat-msg.pinned .chat-bub{border-color:var(--accent);}
.chat-bub-top{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;}
.chat-who{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);}
.chat-time{font-size:9px;color:var(--muted);}
.chat-text{font-size:12.5px;line-height:1.45;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.chat-msg-actions{position:absolute;top:-9px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .16s;}
.chat-msg:hover .chat-msg-actions{opacity:1;}
.chat-msg-actions button{background:rgba(10,12,18,.94);border:1px solid rgba(255,255,255,.16);color:var(--muted);border-radius:6px;width:20px;height:20px;font-size:9px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.chat-msg-actions button:hover{color:var(--text);border-color:var(--accent);}
/* emoji + compose */
.chat-emoji{flex-wrap:wrap;gap:4px;padding:9px 12px;border-top:1px solid var(--line);max-height:120px;overflow-y:auto;}
.chat-emoji button{background:none;border:1px solid transparent;border-radius:6px;font-size:17px;line-height:1;padding:3px 4px;cursor:pointer;}
.chat-emoji button:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07);}
.chat-compose{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);}
.chat-emoji-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:7px;width:34px;height:34px;font-size:15px;line-height:1;cursor:pointer;flex-shrink:0;}
.chat-emoji-btn:hover{background:rgba(255,255,255,.09);}
.chat-input{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:7px;color:var(--text);font-family:inherit;font-size:12.5px;padding:9px 12px;outline:none;}
.chat-input:focus{border-color:var(--accent);}
.chat-send{background:rgba(255,255,255,.05);border:1px solid var(--accent);color:var(--accent);border-radius:7px;padding:9px 16px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;flex-shrink:0;transition:background .2s;}
.chat-send:hover{background:rgba(255,255,255,.11);}
/* thin scrollbars, same as the friends columns */
.chat-list::-webkit-scrollbar,.chat-msgs::-webkit-scrollbar,.chat-emoji::-webkit-scrollbar{width:1px;}
.chat-list::-webkit-scrollbar-thumb,.chat-msgs::-webkit-scrollbar-thumb,.chat-emoji::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);}
.friend-msg-btn:hover{color:var(--accent);border-color:var(--accent);}
@media(max-width:880px){
  .chat-wrap{grid-template-columns:1fr;min-height:0;}
  .chat-list{max-height:220px;}
  .chat-msgs{max-height:52vh;}
  .chat-msg{max-width:90%;}
  .chat-msg-actions{opacity:1;}
}

/* ── incoming-message pop-ups (right edge) + unread badges ── */
#chatNotifs{position:fixed;bottom:18px;right:18px;z-index:99998;display:flex;flex-direction:column;gap:9px;width:248px;max-width:calc(100vw - 28px);pointer-events:none;}
.chat-notif{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:11px;border:1px solid rgba(255,255,255,.16);background:rgba(10,12,18,.96);box-shadow:0 12px 30px rgba(0,0,0,.55);cursor:pointer;pointer-events:auto;opacity:0;transform:translateX(24px);transition:opacity .24s,transform .24s;}
.chat-notif.in{opacity:1;transform:translateX(0);}
.chat-notif:hover{border-color:var(--accent);}
.chat-notif-txt{flex:1;min-width:0;}
.chat-notif-name{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-notif-msg{font-size:11.5px;color:var(--text);margin-top:3px;line-height:1.4;word-break:break-word;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
.chat-notif-x{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:6px;color:var(--muted);font-size:11px;line-height:1;cursor:pointer;width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0;align-self:flex-start;flex-shrink:0;}
.chat-notif-x:hover{color:#fff;background:rgba(239,68,68,.28);border-color:#ef4444;}
/* unread markers */
.profile-tab .chat-unread{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:9px;background:#ef4444;color:#fff;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:800;line-height:1;vertical-align:middle;}
.chat-row.unread .chat-row-name{color:#fff;font-weight:700;}
.chat-row.unread .chat-row-prev{color:var(--text);}
.chat-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;box-shadow:0 0 6px rgba(239,68,68,.7);}
@media(max-width:600px){
  #chatNotifs{bottom:14px;right:10px;left:10px;width:auto;}
}

/* ══════════ REPORTS / MODERATION ══════════
   The complaint form is a modal; the "my reports", "blocked" and moderation lists all reuse
   .rp-item so the three views stay visually identical. Colours come from the site tokens,
   with the устав's own red (высшие) / amber (средние) split kept intact. */
.rp-overlay{position:fixed;inset:0;z-index:100000;background:rgba(4,6,10,.78);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .22s;}
.rp-overlay.show{opacity:1;visibility:visible;}
.rp-modal{width:100%;max-width:620px;background:#0b0e15;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.6);transform:translateY(12px);transition:transform .22s;}
.rp-overlay.show .rp-modal{transform:translateY(0);}
.rp-body{padding:20px 22px 22px;}
.rp-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.rp-title{flex:1;font-family:'Orbitron',sans-serif;font-size:15px;font-weight:900;letter-spacing:.6px;color:var(--text);}
.rp-x{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;padding:2px 4px;}
.rp-x:hover{color:var(--text);}
.rp-who{font-size:12.5px;color:var(--text);padding:9px 12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:8px;margin-bottom:14px;}
.rp-id{color:var(--muted);font-size:11px;}
.rp-lbl{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.rp-codes{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.rp-code{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .16s,background .16s;}
.rp-code:hover{background:rgba(255,255,255,.05);}
.rp-code input{margin-top:2px;flex-shrink:0;accent-color:var(--accent);cursor:pointer;}
.rp-code.high.on{border-color:#ef4444;background:rgba(239,68,68,.08);}
.rp-code.mid.on{border-color:#f59e0b;background:rgba(245,158,11,.08);}
.rp-code-tag{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;flex-shrink:0;line-height:1.5;}
.rp-code.high .rp-code-tag,.rp-code-tag.high{color:#ef4444;}
.rp-code.mid .rp-code-tag,.rp-code-tag.mid{color:#f59e0b;}
.rp-code-tx{font-size:12px;line-height:1.5;color:rgba(221,228,240,.85);}
.rp-punish{font-size:11.5px;line-height:1.55;padding:9px 12px;border-radius:8px;margin-bottom:14px;}
.rp-punish.high{color:#fca5a5;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);}
.rp-punish.mid{color:#fbbf24;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);}
.rp-warn{font-size:11.5px;line-height:1.55;color:#fca5a5;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);padding:9px 12px;border-radius:8px;margin-bottom:14px;}
.rp-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.rp-inp{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:var(--text);border-radius:7px;padding:8px 11px;font-family:inherit;font-size:12.5px;outline:none;color-scheme:dark;}
.rp-inp:focus{border-color:var(--accent);}
.rp-file{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--muted);border-radius:7px;padding:8px 11px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;}
.rp-file:hover{background:rgba(255,255,255,.09);color:var(--text);}
.rp-shot-info{font-size:11px;margin-top:6px;min-height:14px;}
.rp-shot-ok{color:#4ade80;}
.rp-shot-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:10px;}
.rp-ta{width:100%;min-height:92px;resize:vertical;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:var(--text);border-radius:7px;padding:9px 11px;font-family:inherit;font-size:12.5px;line-height:1.5;outline:none;margin-bottom:14px;}
.rp-ta:focus{border-color:var(--accent);}
.rp-agree{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border-radius:8px;border:1px solid rgba(239,68,68,.28);background:rgba(239,68,68,.06);margin-bottom:16px;cursor:pointer;}
.rp-agree input{margin-top:2px;flex-shrink:0;width:16px;height:16px;accent-color:#ef4444;cursor:pointer;}
.rp-agree span{font-size:11.5px;line-height:1.55;color:rgba(221,228,240,.9);}
.rp-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.rp-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--muted);border-radius:7px;padding:9px 15px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.rp-btn:hover{background:rgba(255,255,255,.09);color:var(--text);}
.rp-btn.ghost{border-color:rgba(245,158,11,.4);color:#f59e0b;}
.rp-btn.send{border-color:#ef4444;color:#fff;background:rgba(239,68,68,.22);}
.rp-btn.send:hover:not(:disabled){background:rgba(239,68,68,.34);}
.rp-btn:disabled{opacity:.4;cursor:not-allowed;}
/* lists (my reports / blocked / moderation) */
.rp-list{display:flex;flex-direction:column;gap:8px;}
.rp-empty{font-size:12px;color:var(--muted);text-align:center;padding:26px;}
.rp-item{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);border-radius:9px;padding:11px 13px;}
.rp-item-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--text);}
.rp-item-ts{margin-left:auto;font-size:10px;color:var(--muted);}
.rp-item-meta{font-size:11px;color:var(--muted);margin-top:6px;}
.rp-item-tx{font-size:12px;line-height:1.5;color:rgba(221,228,240,.8);margin-top:7px;white-space:pre-wrap;word-break:break-word;}
.rp-item-note{font-size:11.5px;line-height:1.5;color:var(--accent);margin-top:7px;}
.rp-st{font-family:'Orbitron',sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:20px;border:1px solid currentColor;}
.rp-st-new{color:#5b8def;} .rp-st-ok{color:#4ade80;} .rp-st-no{color:var(--muted);} .rp-st-bad{color:#ef4444;}
.rp-mod-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.rp-modbar{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.rp-modbar .fr-toolbtn.on{color:var(--accent);border-color:var(--accent);}
.rp-shot-link{color:var(--accent);text-decoration:underline;}
.friend-rp-btn:hover{color:#ef4444;border-color:#ef4444;}
@media(max-width:600px){
  .rp-overlay{padding:16px 10px;}
  .rp-row2{grid-template-columns:1fr;}
  .rp-actions .rp-btn{flex:1;}
}

/* ── friend card: three full-width lines (name / ID / status) ──
   The ID used to ride on the status line, so "🎮 <long game title>" pushed it off the card.
   Each now owns its own row and truncates independently. */
.friend-idline{font-family:'Share Tech Mono',monospace;font-size:8.5px;color:var(--muted);opacity:.75;letter-spacing:.4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.friend-card{align-items:center;}
.friend-name{margin-bottom:1px;}
/* blocked friend: greyed out, and the block button lights up red when active */
.friend-card.blocked .friend-avatar,.friend-card.blocked .friend-info{opacity:.42;filter:grayscale(1);}
.friend-block-btn:hover{color:#ef4444;border-color:#ef4444;}
.friend-block-btn.on{color:#ef4444;border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.14);}
/* mute menu + markers */
.chat-mute-menu{position:absolute;top:56px;right:12px;z-index:60;background:rgba(10,12,18,.98);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:5px;display:flex;flex-direction:column;gap:3px;min-width:210px;box-shadow:0 12px 30px rgba(0,0,0,.55);}
.chat-mute-menu button{background:none;border:none;color:var(--text);text-align:left;font-family:inherit;font-size:12px;padding:8px 10px;border-radius:6px;cursor:pointer;}
.chat-mute-menu button:hover{background:rgba(255,255,255,.08);}
.chat-head{position:relative;}
.chat-mute-ic{font-size:11px;flex-shrink:0;opacity:.75;}
.chat-head-actions .fr-toolbtn.on{color:#f59e0b;border-color:rgba(245,158,11,.5);}

/* favourite chat: pinned to the top of the list, with a star to say why */
.chat-fav-ic{color:#fbbf24;font-size:11px;flex-shrink:0;line-height:1;}
.chat-row.fav{border-color:rgba(251,191,36,.32);}

/* ══════════ PHONE FIXES for chat / reports / cards ══════════
   Everything here is a real breakage seen at 390px, not a precaution. */
@media(max-width:600px){
  /* The tab bodies carry inline padding from the markup, so overriding needs !important.
     28px a side eats 15% of a 390px screen. */
  #ptab-chat,#ptab-rp,#ptab-mod{padding:16px 12px !important;}

  /* The header used to be one row: the 4 action buttons squeezed the name to two
     characters and still ran off the right edge. Now they drop to their own line. */
  .chat-head{flex-wrap:wrap;row-gap:9px;}
  .chat-head-txt{flex:1 1 60%;}
  .chat-head-actions{flex:1 1 100%;justify-content:flex-start;}
  .chat-head-actions .fr-toolbtn{padding:7px 10px;}

  /* Message tools sat on top of the bubble and covered the first line. Below it instead. */
  .chat-msg-actions{position:static;opacity:1;justify-content:flex-end;margin-top:5px;}
  .chat-msg{max-width:94%;}
  .chat-msgs{padding:12px 10px;min-height:180px;}
  .chat-compose{padding:9px 10px;gap:6px;}
  .chat-send{padding:9px 11px;}
  .chat-mute-menu{left:12px;right:12px;top:auto;min-width:0;}

  /* Report modal: the устав rows are the tall part, so give the text room. */
  .rp-body{padding:16px 14px 18px;}
  .rp-code{padding:8px 9px;gap:7px;}
  .rp-code-tx{font-size:11.5px;}
  .rp-actions{gap:6px;}
  .rp-btn{padding:9px 10px;font-size:8.5px;}
  .rp-item-hd{gap:6px;}
  .rp-item-ts{margin-left:0;width:100%;}

  /* Six actions on a friend card need two rows of three, not one squeezed line. */
  .friend-card.open .friend-actions{gap:8px;padding:0 6px;}
  .friend-card.open .friend-remove-btn{width:32px;height:32px;}
}

/* ── Phones: glass panels must be OPAQUE, because there is no glass ──
   The mobile-performance block above disables backdrop-filter on everything (`*{...!important}`)
   to keep scrolling smooth. Its comment assumed panel backgrounds were "0.92-0.97" opaque — but
   the glass rule paints them at 0.42 and relies on the blur to read as solid. With the blur
   gone, every panel on a phone is genuinely see-through; that is why the sign-in and
   registration dialogs looked transparent.
   Same selector list as the glass rule so the specificity matches element for element, placed
   after it so it wins. Desktop is untouched — the blur is still there and still doing its job. */
@media (max-width: 768px){
  .stat,.role,.perk,.modal-box,.sell-modal-box,.games-dropdown,.card,[class*="-card"]:not([class*="title"]):not(.sa-card),.profile-card,.profile-section,.shop-item,[class*="-box"]:not(.umbra-check-box),.lore-block,.uc-form,.uc-mode,.uc-chat-box,.friend-card,.acc-balance,.acc-drop,.pay-box,.topup-box{
    background:#10141f!important;
  }
}

/* Account name inside the dropdown — phones only.
   The pill hides .acc-name below 900px, and the dropdown header was removed, so on a phone
   nothing said which account was signed in. Same breakpoint as the rule that hides it, so the
   name is shown in exactly one place at any width, never both and never neither. */
.acc-drop-name-mob{display:none;}
@media(max-width:900px){
  .acc-drop-name-mob{
    display:block;
    font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;color:#fff;
    padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--border);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}

/* "Пополнить счёт" — was inline-styled in FoC's amber, so it stayed orange on the blue and
   pink games. Now it follows each game's accent, like every other primary action. */
.acc-drop-link.acc-drop-topup{
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:5px;
  margin-bottom:4px;
  background:rgba(255,255,255,.05);
}
.acc-drop-link.acc-drop-topup:hover{background:rgba(255,255,255,.10);}

/* ── Profile Overview on phones ──
   The tab was a desktop two-column layout: a hard 200px sidebar next to a main column whose
   default min-width:auto stopped it shrinking. Together they measured 606px, so a 390px phone
   zoomed the WHOLE page out to fit — which is why the profile did not fill the screen and the
   banner looked squashed. The inline styles are stronger than a plain rule, hence !important. */
@media(max-width:760px){
  .ov-split{flex-direction:column !important;}
  .ov-side{width:auto !important;border-right:none !important;border-bottom:1px solid var(--border) !important;padding:14px 14px !important;}
  .ov-main{padding:16px 14px !important;min-width:0 !important;}
}

/* ── Profile banner on phones ──
   The banner is one flex row: avatar + name/rank/bio + three stats. The stats block does not
   shrink, so on a 390px screen the name column was squeezed to 19px and the nickname rendered
   as a single letter with the ID running under the numbers. Stacking the two text blocks gives
   the name the full width and puts the stats on their own line. */
@media(max-width:760px){
  .profile-banner-content{flex-wrap:wrap;align-items:flex-start;gap:12px;padding:0 14px 14px;}
  .profile-banner-info{flex:1 1 auto;min-width:0;}
  .profile-banner-stats{flex:1 1 100%;justify-content:flex-start;gap:22px;}
  .profile-big-avatar{width:64px;height:64px;}
  .profile-banner-name{font-size:17px;}
  .profile-banner{min-height:0;}
}