/* aj.css -- Adventurer's Journey's own theme, derived from gc.css's structure (§ layout/components
   unchanged) with a warm dungeon/treasure palette instead of GC's cyan sci-fi one: gold accent
   (matches the in-game gold/HUD colour), violet secondary (matches the chest-icon gem + the
   in-game "hidden room" motif), warm near-black backgrounds instead of cool ones. Generated by
   remapping gc.css's palette + background-only hex fills; semantic status colours (done/error/
   now badges) were left untouched on purpose. */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent-rgb:244,197,66;
  --bg:#120b06;--surface:#1c130b;--card:#211508;--border:#2e1d0f;
  --accent:#f4c542;--accent2:#9b6bff;--hot:#ff5a3a;
  --text:#f0e6d2;--muted:#a4906f;--faint:#2a1a0c;
}


/* ── 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:#150d06;
  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(var(--accent-rgb),.06);
  border-color:rgba(var(--accent-rgb),.15);
}
.games-bar-item.active{
  background:rgba(var(--accent-rgb),.08);
  border-color:rgba(var(--accent-rgb),.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:#0c0704;color:var(--text);font-family:'Inter',sans-serif;overflow-x:hidden;overflow-y:auto;min-height:100vh;scroll-behavior:smooth;}


/* ── ГЛОБАЛЬНЫЙ МАТРИЧНЫЙ ФОН ── */
#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(var(--accent-rgb),0.013) 2px,rgba(var(--accent-rgb),0.013) 4px),
    radial-gradient(ellipse 80% 60% at 12% 100%, rgba(155,107,255,0.11), transparent 62%),
    radial-gradient(ellipse 70% 55% at 88% 0%, rgba(244,197,66,0.08), transparent 60%),
    radial-gradient(ellipse 110% 85% at 50% 105%, rgba(122,54,18,0.22), transparent 72%);
  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:#120b06;
}
/* декоративные полоски по бокам */
.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(var(--accent-rgb),0.18) 0px,
    rgba(var(--accent-rgb),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(var(--accent-rgb),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(var(--accent-rgb),0.5);
}
.side-line.scrolling::before{
  animation-duration:1.2s;
  background:repeating-linear-gradient(
    180deg,
    rgba(var(--accent-rgb),0.55) 0px,
    rgba(var(--accent-rgb),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,#0c0704 0%,#120b06 100%);
  border-bottom:1px solid rgba(var(--accent-rgb),.12);
}
.top-header-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb),.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;min-width:0;}
.top-header-title{
  font-family:'Orbitron',sans-serif;font-size:18px;font-weight:800;
  color:#fff;letter-spacing:2px;line-height:1;
  /* "ADVENTURER'S JOURNEY" is longer than GC's/FoC's names -- clip instead of pushing
     neighbouring header elements out of place on narrower desktop widths. */
  max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.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:800;
  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(var(--accent-rgb),.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(var(--accent-rgb),.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:#120b06;
  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:800;
  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(var(--accent-rgb),.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(var(--accent-rgb),.12)}50%{text-shadow:0 0 14px rgba(var(--accent-rgb),.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(var(--accent-rgb),.03) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.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:var(--accent);animation:blink 2s infinite;flex-shrink:0;}
.status-text{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);}
.status-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.3),transparent);}

.hero-title{font-family:'Orbitron',sans-serif;font-size:52px;font-weight:800;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(var(--accent-rgb),.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(var(--accent-rgb),.6);box-shadow:0 0 12px rgba(var(--accent-rgb),.2),inset 0 0 12px rgba(var(--accent-rgb),.05);}
}
.stat-num{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:800;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(var(--accent-rgb),.35);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.12), inset 0 0 8px rgba(var(--accent-rgb),.04);
}
.tech::after{
  content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.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(var(--accent-rgb),.9);
  filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),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(var(--accent-rgb),.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:800;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='%2300d4ff' 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(var(--accent-rgb),.3);transform:translateY(-2px);}
.role.hot{border-color:rgba(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.35);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.12), inset 0 0 8px rgba(var(--accent-rgb),.04);
}
.perks-grid.revealed .perk::after{top:110%;}
.perk.scanned{
  opacity:1;transform:translateY(0);
  border-color:rgba(var(--accent-rgb),.35);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.12), inset 0 0 8px rgba(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.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:#0c0704;
  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(var(--accent-rgb),.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(var(--accent-rgb),.08);
    border:1px solid rgba(var(--accent-rgb),.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:#0c0704;
    border-top:1px solid rgba(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.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:#120b06;
  border-bottom:1px solid rgba(var(--accent-rgb),.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:#150d06;
  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:#150d06;
  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(var(--accent-rgb),.06);}
.lang-bar-btn.active{
  color:var(--accent);
  background:rgba(var(--accent-rgb),.08);
  border-color:rgba(var(--accent-rgb),.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(var(--accent-rgb),.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:800;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(var(--accent-rgb),.15);
  background:rgba(var(--accent-rgb),.03);
  transition:border-color .25s,background .25s,box-shadow .25s;
  position:relative;
}
.acc-widget:hover{
  border-color:rgba(var(--accent-rgb),.45);
  background:rgba(var(--accent-rgb),.07);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.12),inset 0 0 8px rgba(var(--accent-rgb),.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:800;color:#fff;
  flex-shrink:0;
  box-shadow:0 0 0 1.5px rgba(var(--accent-rgb),.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(var(--accent-rgb),.3);border-radius:4px;cursor:pointer;
  padding:5px 10px;transition:background .2s,border-color .2s;
}
.acc-login-btn:hover{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.6);}

/* account dropdown */
.acc-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(7,10,16,.98);border:1px solid rgba(var(--accent-rgb),.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:800;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:800;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(var(--accent-rgb),.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:800;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 var(--accent)!important;box-shadow:0 0 10px rgba(var(--accent-rgb),.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 var(--accent)!important;outline:1px solid #a78bfa!important;outline-offset:1px!important;box-shadow:0 0 12px rgba(var(--accent-rgb),.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 var(--accent)!important;box-shadow:0 0 4px rgba(var(--accent-rgb),.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 var(--accent)!important;outline:1px solid #a78bfa!important;outline-offset:1px!important;box-shadow:0 0 4px rgba(var(--accent-rgb),.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 var(--accent)!important;box-shadow:0 0 8px rgba(var(--accent-rgb),.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 var(--accent)!important;outline:1px solid #a78bfa!important;outline-offset:1px!important;box-shadow:0 0 10px rgba(var(--accent-rgb),.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:800;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:800;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:800;color:#fff;
  margin-bottom:8px;
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.4),0 0 12px rgba(var(--accent-rgb),.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(var(--accent-rgb),.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:800;
  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(var(--accent-rgb),.1),rgba(var(--accent-rgb),.1)),var(--card)!important;border-color:rgba(var(--accent-rgb),.28)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#friendsList .friend-card:hover{border-color:rgba(var(--accent-rgb),.5)!important;background:linear-gradient(rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.18)),var(--card)!important;box-shadow:0 0 12px rgba(var(--accent-rgb),.16),inset 0 0 8px rgba(var(--accent-rgb),.06)!important;}
.friend-card:hover{border-color:rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.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:800;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(var(--accent-rgb),.5) transparent;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.4);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),.7);}
.friend-req-card{
  background:var(--card);border:1px solid rgba(var(--accent-rgb),.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(var(--accent-rgb),.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:5px;padding:5px 10px;cursor:pointer;transition:background .2s;
}
.friend-btn-accept:hover{background:rgba(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.4);}
.bg-option.selected{border-color:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.03);}
.frame-option.selected{border-color:var(--accent);background:rgba(var(--accent-rgb),.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:800;color:#fff;
  background:linear-gradient(135deg,#7b5ea7,var(--accent));
  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(var(--accent-rgb),.4);}
.profile-save-btn{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.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(var(--accent-rgb),.2);border-color:rgba(var(--accent-rgb),.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:800;color:#fff;
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.3),0 0 20px rgba(var(--accent-rgb),.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(var(--accent-rgb),.5);border-color:rgba(var(--accent-rgb),.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(var(--accent-rgb),.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:#1c130b;border:1px solid rgba(var(--accent-rgb),.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(var(--accent-rgb),.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:800;
  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(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.65);
  transition:color .2s, filter .2s;
  -webkit-tap-highlight-color:transparent;
}
.pass-eye:hover{ color:rgba(var(--accent-rgb),1); filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.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(var(--accent-rgb),.4);
  background:rgba(var(--accent-rgb),.06);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.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(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.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:800;color:var(--accent);
}
.shop-buy-btn{
  font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);
  color:var(--accent);border-radius:4px;padding:5px 9px;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.shop-buy-btn:hover{background:rgba(var(--accent-rgb),.22);border-color:rgba(var(--accent-rgb),.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:#1c130b;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(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.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(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.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:var(--accent);border:1px solid rgba(var(--accent-rgb),.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:#120b06;
  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(var(--accent-rgb),.015) 3px,
    rgba(var(--accent-rgb),.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(var(--accent-rgb),.15) 8%,
    rgba(var(--accent-rgb),.6) 30%,
    rgba(var(--accent-rgb),1) 48%,
    #fff 50%,
    rgba(var(--accent-rgb),1) 52%,
    rgba(var(--accent-rgb),.6) 70%,
    rgba(var(--accent-rgb),.15) 92%,
    transparent 100%
  );
  box-shadow:
    0 0 4px 1px #fff,
    0 0 10px 2px rgba(var(--accent-rgb),.9),
    0 0 24px 5px rgba(var(--accent-rgb),.4),
    0 0 70px 14px rgba(var(--accent-rgb),.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(var(--accent-rgb),.1) 0%,
    rgba(var(--accent-rgb),.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(var(--accent-rgb),1) 0px, rgba(var(--accent-rgb),1) 4px,
    rgba(var(--accent-rgb),.3) 4px, rgba(var(--accent-rgb),.3) 8px,
    transparent 8px, transparent calc(100% - 8px),
    rgba(var(--accent-rgb),.3) calc(100% - 8px), rgba(var(--accent-rgb),.3) calc(100% - 4px),
    rgba(var(--accent-rgb),1) calc(100% - 4px), rgba(var(--accent-rgb),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(var(--accent-rgb),.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(var(--accent-rgb),.18));
  transition:background .1s;
}
.loader-tick:nth-child(3n){ height:2px; background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.4)); }
.loader-tick:nth-child(6n){ height:1px; background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.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(var(--accent-rgb),.18)); }
.loader-ticks-r .loader-tick:nth-child(3n){ background:linear-gradient(270deg, transparent, rgba(var(--accent-rgb),.4)); }
.loader-ticks-r .loader-tick:nth-child(6n){ background:linear-gradient(270deg, transparent, rgba(var(--accent-rgb),.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(var(--accent-rgb),.4);
  animation:diamondSpin1 3s linear infinite;
  box-shadow:0 0 6px rgba(var(--accent-rgb),.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(var(--accent-rgb),.6);
  animation:diamondSpin2 2s linear infinite;
  animation-delay:-.5s;
  box-shadow:0 0 8px rgba(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.45); }
  50%    { transform:scale(1.45); box-shadow:0 0 14px #fff,0 0 30px var(--accent),0 0 60px rgba(var(--accent-rgb),.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(var(--accent-rgb),.3);  animation:auraPulse 1.8s ease-in-out infinite 0s; }
.loader-core .aura:nth-child(5){ inset:-10px; border-color:rgba(var(--accent-rgb),.18); animation:auraPulse 1.8s ease-in-out infinite .4s; }
.loader-core .aura:nth-child(6){ inset:-18px; border-color:rgba(var(--accent-rgb),.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(var(--accent-rgb),.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(var(--accent-rgb),.9), 0 0 20px rgba(var(--accent-rgb),.5);
  animation:textGlitch 3.5s ease-in-out infinite;
}
@keyframes textGlitch{
  0%,84%,100%{ text-shadow:0 0 6px rgba(var(--accent-rgb),.9),0 0 20px rgba(var(--accent-rgb),.5); transform:none; }
  85%{ transform:translateX(3px) skewX(4deg); text-shadow:3px 0 rgba(255,255,255,.9),-2px 0 rgba(var(--accent-rgb),.9); }
  86%{ transform:translateX(-2px) skewX(-2deg); text-shadow:-3px 0 rgba(255,255,255,.7),2px 0 rgba(var(--accent-rgb),.8); }
  87%{ transform:none; text-shadow:0 0 6px rgba(var(--accent-rgb),.9),0 0 20px rgba(var(--accent-rgb),.5); }
  93%{ transform:translateX(-1px); text-shadow:-2px 0 rgba(255,255,255,.5),1px 0 rgba(var(--accent-rgb),.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(var(--accent-rgb),.7);
}
.loader-bar-wrap::after{
  border-width:4px 7px 4px 0;
  border-color:transparent rgba(var(--accent-rgb),.7) transparent transparent;
}
.loader-bar{
  position:relative; z-index:2;
  width:min(260px, 58vw); height:4px;
  background:rgba(var(--accent-rgb),.08);
  border-radius:0;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.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(var(--accent-rgb),.55) 0%,
    rgba(var(--accent-rgb),1) 80%,
    #fff 100%
  );
  box-shadow:0 0 14px rgba(var(--accent-rgb),.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(var(--accent-rgb),.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, var(--accent));
  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 var(--accent);font-family:'Orbitron',monospace;overflow:hidden;box-shadow:0 0 40px rgba(var(--accent-rgb),.15);}
.ow .corner{position:absolute;width:16px;height:16px;border-color:var(--accent);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(var(--accent-rgb),.08);border-bottom:1px solid rgba(var(--accent-rgb),.3);padding:12px 20px;display:flex;align-items:center;gap:10px;}
.ow-logo{font-size:10px;font-weight:700;color:var(--accent);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:50px;height:50px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.45));transform:translateY(4px);}
.ow-ring1{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(var(--accent-rgb),.4);animation:spin 8s linear infinite;}
.ow-ring2{position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.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:var(--accent);fill:none;filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.4));position:relative;z-index:2;}
.ow-code{font-size:9px;color:rgba(var(--accent-rgb),.6);letter-spacing:2px;margin-bottom:8px;}
.ow-title{font-size:16px;font-weight:800;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(var(--accent-rgb),.12);background:rgba(var(--accent-rgb),.03);padding:14px 16px;}
.ow-msg .hi{color:rgba(var(--accent-rgb),.8);}
.ow-btn{display:block;width:100%;padding:14px;background:none;border:1px solid var(--accent);color:var(--accent);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(var(--accent-rgb),.08);}
.ow-footer{border-top:1px solid rgba(var(--accent-rgb),.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(var(--accent-rgb),.3); }
  .stat.visible{ animation:none !important; }
  .death-word{ animation: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:var(--accent)!important; }
#page-community .sec-line{ background:linear-gradient(90deg,rgba(var(--accent-rgb),.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:#241708!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:#241708!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:var(--accent);border-color:var(--accent);}
.umbra-check input:checked + .umbra-check-box svg{opacity:1;transform:scale(1);}
.umbra-check:hover .umbra-check-box{border-color:var(--accent);}
.umbra-check input:focus-visible + .umbra-check-box{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.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;
}

/* ── 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;}
}

/* ══════════ 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:800;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:800;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:#241708!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;}
}

/* ── Player-chosen background effect ──────────────────────────────────────────
   The player's pick is written on <html> as data-fx. Anything other than "game" hides the
   canvases this game ships with, and platform/fx.js draws the chosen one instead. !important
   because each theme sets its own visibility for these, and the player's choice must win. */
html[data-fx="petals"] #dustCanvas,
html[data-fx="petals"] #globalMatrix,
html[data-fx="petals"] #globalMatrixVignette,
html[data-fx="petals"] #petalCanvas,
html[data-fx="matrix"] #dustCanvas,
html[data-fx="matrix"] #globalMatrix,
html[data-fx="matrix"] #globalMatrixVignette,
html[data-fx="matrix"] #petalCanvas,
html[data-fx="dust"]   #dustCanvas,
html[data-fx="dust"]   #globalMatrix,
html[data-fx="dust"]   #globalMatrixVignette,
html[data-fx="dust"]   #petalCanvas,
html[data-fx="none"]   #dustCanvas,
html[data-fx="none"]   #globalMatrix,
html[data-fx="none"]   #globalMatrixVignette,
html[data-fx="none"]   #petalCanvas{ display:none !important; }

/* ── Player-chosen chat look ──────────────────────────────────────────────────
   Both fall back to the game's own values when the player has not chosen, so the chat is
   unchanged until they touch it. */
.chat-pane{ background:var(--chat-bg, rgba(255,255,255,.02)); }
.chat-msg.mine .chat-bub{ border-color:var(--chat-accent, rgba(255,255,255,.16)); }
.chat-who{ color:var(--chat-accent, var(--accent)); }
.chat-send{ border-color:var(--chat-accent, var(--accent)); color:var(--chat-accent, var(--accent)); }
.chat-row.active{ border-color:var(--chat-accent, var(--accent)); }
.chat-input:focus{ border-color:var(--chat-accent, var(--accent)); }

/* ── Appearance settings controls ── */
.look-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.look-sw{width:34px;height:34px;border-radius:9px;border:2px solid transparent;cursor:pointer;
  padding:0;transition:transform .12s,border-color .15s}
.look-sw:hover{transform:translateY(-2px)}
.look-sw.on{border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.5)}
.look-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.look-lbl{font-size:12px;color:var(--muted);min-width:96px}
.look-color{width:44px;height:32px;padding:0;border:1px solid var(--border);border-radius:7px;
  background:none;cursor:pointer}
.look-fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.look-fx-opt{text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:9px;padding:11px 13px;cursor:pointer;color:var(--text);font-family:inherit;
  transition:border-color .15s,background .15s}
.look-fx-opt:hover{background:rgba(255,255,255,.06)}
.look-fx-opt.on{border-color:var(--accent);background:rgba(255,255,255,.07)}
.look-fx-opt b{display:block;font-size:12.5px;font-weight:700;color:var(--text)}
.look-fx-opt i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:3px}

/* ── Backdrop dimming ─────────────────────────────────────────────────────────
   A veil over the background only. It sits below every content layer, so pushing it to the
   maximum darkens the picture behind the site and never the text on top of it. */
html[style*="--bg-dim"] body::before{
  content:'';position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:rgba(0,0,0,var(--bg-dim,0));
}
.look-range{flex:1;min-width:120px;max-width:220px;accent-color:var(--accent);cursor:pointer}
.look-val{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--muted);min-width:42px}
.look-hint{font-size:11.5px;color:var(--muted);opacity:.8;margin-top:9px;line-height:1.5}


/* ── «Не показывать эффект по центру» ───────────────────────────────────────── */
/* The middle of the page is where the text is. A mask fades every moving effect out over it —
   ours and the games' own alike — and leaves it at full strength around the edges. One rule
   instead of per-effect code, because a mask on the canvas element works for all of them. */
html[data-fxmid="1"] #umbraFx,
html[data-fxmid="1"] #dustCanvas,
html[data-fxmid="1"] #petalCanvas,
html[data-fxmid="1"] #globalMatrix,
html[data-fxmid="1"] #globalMatrixVignette{
  -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 47%, transparent 0%, transparent 40%, #000 96%);
          mask-image: radial-gradient(ellipse 72% 76% at 50% 47%, transparent 0%, transparent 40%, #000 96%);
}

/* ── chat appearance panel (lives inside the chat, not in settings) ─────────── */
.chat-bar{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.chat-look{
  border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px;
  background:rgba(0,0,0,.30);
}
.chat-look-title{
  font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px;
}
.chat-look .look-fx{ margin-bottom:10px; }
.chat-look .look-row{ margin-bottom:6px; }
.look-check{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:12px; color:var(--text); margin:9px 0 2px;
}
.look-check input{ width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
#chatLookBtn.on{ border-color:var(--accent); color:var(--accent); }


/* ── «Добавить друга» на телефоне ──────────────────────────────────────────── */
/* Поле + две кнопки в одну строку не помещаются на 390px и растягивали страницу вбок. */
@media (max-width: 620px){
  .friend-add-row{ flex-wrap:wrap; }
  .friend-add-row .friend-add-input{ flex:1 1 100%; min-width:0; }
  .friend-add-row .friend-add-btn{ flex:1 1 calc(50% - 4px); min-width:0; white-space:normal; text-align:center; }
}


/* ── «Фон сайта»: выбор игрока должен перебивать родной фон игры ───────────── */
/* body рисует свой фон ПОЗЖЕ, чем слой #umbraBg (у него отрицательный z-index),
   поэтому на FoC и GC выбранный фон был не виден вообще. Когда выбрано что-то
   кроме «как в игре» — гасим родной фон игры и показываем слой игрока. */
html[data-bg]:not([data-bg="game"]),
html[data-bg]:not([data-bg="game"]) body{
  background-image:none!important;
  background-color:transparent!important;
}
/* Galactic Cleaner's own backdrop is the matrix canvas, painted OVER the player's chosen
   background — so a custom background showed dimmed behind falling code, and the centre never
   read as clear the way it does on Fall of Cities. Hide the matrix when a background is chosen,
   just like Umbra Mind's video, so GC's centre becomes transparent too. Matrix as a PARTICLE
   effect (fx=matrix) still works — it draws on the shared canvas. */
html[data-bg]:not([data-bg="game"]) #globalMatrix,
html[data-bg]:not([data-bg="game"]) #globalMatrixVignette{
  display:none!important;
}


/* ── кнопка «Свой фон» ─────────────────────────────────────────────────────── */
.look-fx-upload{ border-style:dashed!important; }
.look-fx-upload b::before{ content:'\2191  '; }   /* ↑ */


/* ── Appearance tab — polished ─────────────────────────────────────────────── */
/* Swatches: a touch bigger, animate in, and show a checkmark when chosen. */
.look-swatches{ gap:9px; max-width:356px; }  /* ~8 в ряд → три аккуратных ряда */
.look-sw{
  width:32px;height:32px;border-radius:9px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.35);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, border-color .15s;
}
.look-sw:hover{ transform:translateY(-3px) scale(1.06); }
.look-sw:active{ transform:translateY(-1px) scale(1.0); }
.look-sw.on{
  border-color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20), 0 0 0 2px rgba(0,0,0,.55), 0 0 12px -2px currentColor;
}
.look-sw.on::after{
  content:'';position:absolute;inset:0;margin:auto;width:10px;height:10px;
  border-radius:2px;background:#fff;mix-blend-mode:difference;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Effect / background tiles: lift and glow, and the active one gets an accent bar. */
.look-fx-opt{ position:relative; overflow:hidden; transition:transform .14s, border-color .18s, background .18s, box-shadow .18s; }
.look-fx-opt:hover{ transform:translateY(-2px); box-shadow:0 6px 16px -8px rgba(0,0,0,.6); }
.look-fx-opt.on{ box-shadow:0 0 0 1px var(--accent) inset, 0 6px 18px -10px var(--accent); }
.look-fx-opt.on::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
}

/* A real slider, styled the same in both engines. The fill is drawn with a gradient sized to the
   value via --look-fill (set in JS); everything to the left of the thumb is accent-tinted. */
.look-range{
  -webkit-appearance:none;appearance:none;height:6px;border-radius:6px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--look-fill,0%), rgba(255,255,255,.12) var(--look-fill,0%), rgba(255,255,255,.12) 100%);
  outline:none;cursor:pointer;transition:background .05s;
}
.look-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.5);transition:transform .12s;
}
.look-range::-webkit-slider-thumb:hover{ transform:scale(1.18); }
.look-range::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);
  cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.look-range::-moz-range-track{ height:6px;border-radius:6px;background:transparent; }
.look-val{ transition:color .15s; }

/* The whole section fades in when you open the tab, so it feels alive rather than static. */
#psec-look .profile-card{ animation:lookIn .35s ease both; }
#psec-look .profile-card:nth-child(2){ animation-delay:.04s; }
#psec-look .profile-card:nth-child(3){ animation-delay:.08s; }
#psec-look .profile-card:nth-child(4){ animation-delay:.12s; }
@keyframes lookIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .look-sw,.look-fx-opt,.look-range::-webkit-slider-thumb,#psec-look .profile-card{ animation:none!important; transition:none!important; }
}

/* ── Umbra Shop promo CTA ──────────────────────────────────────────────────── */
.shop-cta{
  display:inline-block;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:12px 22px;border-radius:9px;color:#04141c;background:var(--accent);
  border:1px solid var(--accent);transition:transform .14s, box-shadow .18s;
  box-shadow:0 6px 20px -8px var(--accent);
}
.shop-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -8px var(--accent); }


/* ── PROJECTS SWITCHER (games / sites tabs) ────────────────────────────────── */
.games-bar.open{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:12px;padding:14px 18px 16px;width:640px;max-width:calc(100vw - 24px);border-radius:0 0 14px 14px;}
.gb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-wrap:wrap;}
.gb-tabs{display:inline-flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:11px;padding:4px;}
.gb-tab{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);background:transparent;border:none;border-radius:8px;
  padding:8px 18px;cursor:pointer;transition:color .15s,background .15s;}
.gb-tab:hover{color:var(--text);}
.gb-tab.on{color:var(--accent);background:rgba(255,255,255,.06);}
.gb-all{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.4px;
  color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:9px;border:1px solid transparent;
  transition:color .15s,border-color .15s,background .15s;}
.gb-all:hover{color:var(--text);border-color:var(--border);background:rgba(255,255,255,.03);}
.gb-all img{width:22px;height:22px;border-radius:6px;object-fit:cover;}
.gb-group{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;}
.gb-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:118px;padding:14px 8px 12px;border-radius:13px;border:1px solid var(--border);
  background:rgba(255,255,255,.02);text-decoration:none;
  transition:transform .16s,border-color .16s,background .16s;}
.gb-item:hover{transform:translateY(-3px);border-color:var(--border-strong,rgba(255,255,255,.2));
  background:rgba(255,255,255,.05);}
.gb-item.active{border-color:var(--accent);background:rgba(255,255,255,.05);}
.gb-item .gb-logo{width:48px;height:48px;border-radius:11px;object-fit:cover;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.7);}
.gb-item .gb-name{font-size:11.5px;line-height:1.25;color:var(--text);text-align:center;
  font-weight:500;letter-spacing:.2px;}
.gb-item.soon{opacity:.5;cursor:default;}
.gb-item.soon:hover{transform:none;border-color:var(--border);background:rgba(255,255,255,.02);}
.gb-soon{position:absolute;top:7px;right:7px;font-family:'Orbitron',sans-serif;font-size:7px;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:20px;padding:2px 6px;}
@media(max-width:560px){
  .games-bar.open{width:auto;left:12px;right:12px;transform:none;}
  .gb-item{width:calc(33.333% - 8px);}
}


/* ── чат: кнопка «к последним» ──────────────────────────────────────────────── */
.chat-pane{ position:relative; }
.chat-scrolldown{
  position:absolute; right:18px; bottom:74px; z-index:6;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--card,#2a1a0c); color:var(--accent);
  border:1px solid var(--accent); opacity:0; transform:translateY(8px) scale(.9);
  pointer-events:none; transition:opacity .18s, transform .18s;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.7);
}
.chat-scrolldown.show{ opacity:1; transform:none; pointer-events:auto; }
.chat-scrolldown:hover{ background:var(--accent); color:#0a0d12; }
.chat-scrolldown svg{ width:20px; height:20px; }
.chat-scrolldown-badge{
  position:absolute; top:-5px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:20px; background:var(--accent); color:#0a0d12;
  font-family:'Share Tech Mono',monospace; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--card,#141824);
}


/* ── PROJECTS SWITCHER v2: pick (два слова) → ряд логотипов старого вида ──────── */
.games-bar.open{ display:flex; flex-direction:row; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px; width:auto; min-width:300px; max-width:calc(100vw - 24px); padding:12px 20px; }
.gb-pick{ display:flex; gap:14px; }
.gb-pick-btn{ font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--text); background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:12px; padding:16px 44px; cursor:pointer;
  transition:color .16s, border-color .16s, background .16s, transform .16s; }
.gb-pick-btn:hover{ color:var(--accent); border-color:var(--accent); background:rgba(255,255,255,.05);
  transform:translateY(-2px); }
.gb-row{ display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; }
.gb-back{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer; font-size:22px; line-height:1;
  margin-right:6px; transition:color .15s, border-color .15s; }
.gb-back:hover{ color:var(--accent); border-color:var(--accent); }


/* ── музыка в настройках ────────────────────────────────────────────────────── */
.mus-controls{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 10px; align-items:center; }
.mus-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; max-height:220px; overflow-y:auto; }
.mus-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px;
  border:1px solid var(--border); background:rgba(255,255,255,.02); }
.mus-item.on{ border-color:var(--accent); background:rgba(255,255,255,.05); }
.mus-play{ width:30px; height:30px; border-radius:8px; flex-shrink:0; cursor:pointer;
  border:1px solid var(--border); background:transparent; color:var(--accent); font-size:12px; }
.mus-play:hover{ background:var(--accent); color:#0a0d12; }
.mus-name{ flex:1; min-width:0; font-size:12.5px; color:var(--text); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mus-del{ width:26px; height:26px; border-radius:7px; flex-shrink:0; cursor:pointer;
  border:none; background:transparent; color:var(--muted); font-size:12px; }
.mus-del:hover{ color:#ff6b6b; background:rgba(255,107,107,.1); }
.mus-empty{ font-size:12px; color:var(--muted); padding:10px 2px; }


/* Возврат бара к ОРИГИНАЛЬНОМУ простому ряду логотипов (перебивает мои прошлые переопределения). */
.games-bar.open{ display:flex!important; flex-direction:row!important; flex-wrap:wrap!important;
  align-items:center!important; justify-content:center!important; gap:4px!important;
  padding:6px 24px!important; width:1000px!important; max-width:calc(100vw - 16px)!important; }


/* ── MESSENGER: верхняя панель разделов (пункт 10) ── */
.msg-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:0 0 16px;padding:0 0 2px;border-bottom:1px solid rgba(255,255,255,.09);}
.msg-nav-btn{position:relative;background:none;border:0;color:var(--muted);padding:9px 13px;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.2px;cursor:pointer;border-radius:8px 8px 0 0;transition:color .18s,background .18s;}
.msg-nav-btn:hover{color:var(--text);background:rgba(255,255,255,.05);}
.msg-nav-btn.active{color:var(--accent);}
.msg-nav-btn.active::after{content:'';position:absolute;left:11px;right:11px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--accent);}
.msg-nav-btn.soon{opacity:.55;}
.msg-nav-sep{flex:1;min-width:8px;}
@media(max-width:640px){
  .msg-nav{gap:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .msg-nav::-webkit-scrollbar{display:none;}
  .msg-nav-btn{padding:9px 11px;font-size:12px;white-space:nowrap;}
  .msg-nav-sep{display:none;}
}

/* ── MESSENGER: папки (пункт 9) ── */
.chat-folders{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.chat-folder{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--muted);border-radius:999px;padding:5px 11px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .18s,color .18s,border-color .18s;}
.chat-folder:hover{background:rgba(255,255,255,.09);color:var(--text);}
.chat-folder.on{color:var(--accent);border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.1);}
.chat-folder-ed{opacity:.5;font-size:11px;padding:0 1px;}
.chat-folder-ed:hover{opacity:1;color:var(--accent);}
.chat-side-tools{display:flex;gap:6px;margin-bottom:10px;}
.chat-side-tools .fr-toolbtn{flex:1;}
.chat-row-folder{opacity:0;font-size:13px;padding:0 4px;transition:opacity .15s,color .15s;flex:0 0 auto;}
.chat-row:hover .chat-row-folder{opacity:.55;}
.chat-row-folder:hover{opacity:1;color:var(--accent);}
@media(hover:none){.chat-row-folder{opacity:.45;}}


/* ── СВОИ ОКНА вместо alert / confirm / prompt (пункт 12) ── */
.udlg-ov{position:fixed;inset:0;z-index:12000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,7,11,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .16s ease;}
.udlg-ov.show{display:flex;opacity:1;}
.udlg{width:100%;max-width:420px;background:linear-gradient(180deg,#151a24 0%,#10141c 100%);border:1px solid rgba(var(--accent-rgb),.28);border-radius:14px;padding:22px 22px 18px;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;transform:translateY(8px) scale(.98);transition:transform .16s ease;}
.udlg-ov.show .udlg{transform:none;}
.udlg-title{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:.6px;color:var(--text);margin-bottom:8px;line-height:1.4;}
.udlg-text{font-size:13px;line-height:1.6;color:var(--muted);white-space:pre-line;margin-bottom:4px;}
.udlg-text:empty{display:none;}
.udlg-input{width:100%;margin-top:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:10px 12px;color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:border-color .18s,background .18s;}
.udlg-input:focus{border-color:rgba(var(--accent-rgb),.6);background:rgba(255,255,255,.07);}
.udlg-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;}
.udlg-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:var(--muted);border-radius:8px;padding:9px 18px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .18s,color .18s,border-color .18s;}
.udlg-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
.udlg-btn.primary{background:rgba(var(--accent-rgb),.16);border-color:rgba(var(--accent-rgb),.5);color:var(--accent);}
.udlg-btn.primary:hover{background:rgba(var(--accent-rgb),.26);}
.udlg-btn.danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.45);color:#ff8b8b;}
.udlg-btn.danger:hover{background:rgba(239,68,68,.24);}
@media(max-width:480px){
  .udlg{padding:18px 16px 14px;}
  .udlg-btns{flex-direction:column-reverse;}
  .udlg-btn{width:100%;padding:12px;}
}
.udlg-list{display:flex;flex-direction:column;gap:6px;margin-top:14px;max-height:46vh;overflow-y:auto;}
.udlg-opt{display:flex;align-items:center;gap:9px;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--text);border-radius:9px;padding:11px 13px;font-family:inherit;font-size:13.5px;cursor:pointer;transition:background .16s,border-color .16s;}
.udlg-opt:hover{background:rgba(255,255,255,.1);border-color:rgba(var(--accent-rgb),.4);}
.udlg-opt.on{border-color:rgba(var(--accent-rgb),.5);color:var(--accent);}
.udlg-opt-tick{width:14px;flex:0 0 14px;color:var(--accent);font-size:12px;}

/* ── Jump-to-latest button in chat (стрелочка вниз) ──────────────────────────────
   Floats bottom-right over the message list, above the compose bar. Hidden until you
   scroll up (JS toggles .show); the badge shows how many new messages arrived meanwhile.
   Previously had NO styles at all, so it sat inline and was always visible. */
.chat-scrolldown{position:absolute;right:16px;bottom:78px;width:40px;height:40px;border-radius:50%;
  display:none;align-items:center;justify-content:center;padding:0;cursor:pointer;z-index:7;
  color:var(--accent);background:rgba(var(--accent-rgb),.16);border:1px solid rgba(var(--accent-rgb),.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:background .18s,transform .18s,box-shadow .18s;}
.chat-scrolldown.show{display:flex;}
.chat-scrolldown:hover{background:rgba(var(--accent-rgb),.30);transform:translateY(-1px);}
.chat-scrolldown:active{transform:translateY(0);}
.chat-scrolldown svg{width:20px;height:20px;display:block;}
.chat-scrolldown-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  line-height:1;color:#04070d;background:var(--accent);border-radius:9px;box-shadow:0 2px 6px rgba(0,0,0,.4);}
@media(max-width:640px){.chat-scrolldown{bottom:70px;right:12px;width:38px;height:38px;}}

/* ── ÆC currency coin (аватарка валюты) — themed to the site colour ─────────────── */
.aec-coin{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 28%, rgba(var(--accent-rgb),.9), rgba(var(--accent-rgb),.28) 70%, rgba(var(--accent-rgb),.14));
  border:2px solid rgba(var(--accent-rgb),.7);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.4), inset 0 0 10px rgba(0,0,0,.35);}
.aec-coin-txt{font-family:'Orbitron',sans-serif;font-weight:800;font-size:13px;letter-spacing:.5px;
  color:#04070d;text-shadow:0 1px 0 rgba(255,255,255,.25);}

/* ── Donate: LIVE animated avatar frames + price badge in the picker ─────────────── */
.frame-option{position:relative;}
.frame-price{position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;color:#04070d;background:var(--accent);border-radius:10px;padding:1px 6px;
  line-height:1.5;box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:2;}
.frame-price-coin{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:.5px;opacity:.9;}
@keyframes pfBreatheCyan{0%,100%{box-shadow:0 0 6px rgba(0,212,255,.4)}50%{box-shadow:0 0 16px rgba(0,212,255,.9)}}
.pf-ring-pulsecyan{border:1.5px solid #00d4ff!important;animation:pfBreatheCyan 2s ease-in-out infinite;}
@keyframes pfBreatheGreen{0%,100%{box-shadow:0 0 6px rgba(34,197,94,.4)}50%{box-shadow:0 0 16px rgba(34,197,94,.9)}}
.pf-ring-emerald{border:1.5px solid #22c55e!important;animation:pfBreatheGreen 2.4s ease-in-out infinite;}
@keyframes pfFlame{0%,100%{border-color:#ff7a1a;box-shadow:0 0 8px rgba(255,120,20,.5)}50%{border-color:#ffcc33;box-shadow:0 0 17px rgba(255,160,40,.95)}}
.pf-ring-flame{border:1.6px solid #ff7a1a!important;animation:pfFlame 1.3s ease-in-out infinite;}
@keyframes pfAurora{0%{border-color:#ff5b8a;box-shadow:0 0 12px rgba(255,91,138,.65)}33%{border-color:#4ad6ff;box-shadow:0 0 12px rgba(74,214,255,.65)}66%{border-color:#a3e635;box-shadow:0 0 12px rgba(163,230,53,.65)}100%{border-color:#ff5b8a;box-shadow:0 0 12px rgba(255,91,138,.65)}}
.pf-ring-aurora{border:1.6px solid #ff5b8a!important;animation:pfAurora 4s linear infinite;}
@keyframes pfPlasma{0%,100%{border-color:#c084fc;box-shadow:0 0 10px rgba(192,132,252,.65)}50%{border-color:#ff5bd0;box-shadow:0 0 18px rgba(255,91,208,.95)}}
.pf-ring-plasma{border:1.6px solid #c084fc!important;animation:pfPlasma 2s ease-in-out infinite;}
@keyframes pfRoyal{0%,100%{box-shadow:0 0 8px rgba(251,191,36,.55),0 0 0 2px rgba(251,191,36,.28)}50%{box-shadow:0 0 18px rgba(251,191,36,.95),0 0 0 3px rgba(251,191,36,.45)}}
.pf-ring-royal{border:1.6px solid #fbbf24!important;animation:pfRoyal 2.2s ease-in-out infinite;}
/* Respect reduced-motion: keep the colour, drop the animation. */
@media(prefers-reduced-motion:reduce){.pf-ring-pulsecyan,.pf-ring-emerald,.pf-ring-flame,.pf-ring-aurora,.pf-ring-plasma,.pf-ring-royal{animation:none!important;}}

/* ── Donate: LIVE animated backgrounds (profile + account bar) + price badge ─────── */
@keyframes pfBgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes pfBgPulse{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.22)}}
.bg-option{position:relative;}
.bg-price{position:absolute;top:5px;right:5px;display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;color:#04070d;background:var(--accent);border-radius:10px;padding:1px 6px;
  line-height:1.5;box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:2;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.bg-option-preview,[data-base]{animation:none!important;}}

/* ── Music category: folders/albums, count, category divider, shuffle state ─────── */
.profile-cat-divider{display:flex;align-items:center;gap:10px;margin:24px 0 12px;font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;}
.profile-cat-divider::before,.profile-cat-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.4),transparent);}
.mus-folders{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.mus-fold{padding:4px 10px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;}
.mus-fold:hover{color:var(--text);border-color:var(--accent);}
.mus-fold.on{background:rgba(var(--accent-rgb),.15);color:var(--accent);border-color:rgba(var(--accent-rgb),.5);}
.mus-fold.add{font-weight:700;}
.mus-count{font-size:11.5px;color:var(--muted);margin-bottom:8px;}
.mus-count a{color:var(--accent);}
.mus-fold-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 4px;line-height:1;}
.mus-fold-btn:hover{color:var(--accent);}
#pMusShuffle.on{background:rgba(var(--accent-rgb),.15);color:var(--accent);border-color:rgba(var(--accent-rgb),.5);}

/* ── Chat polish + themed bell (колокольчик — чистый SVG, не emoji) ─────────────── */
.chat-bell{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;}
.chat-bell .bell-ic{width:17px;height:17px;display:block;}
.chat-bell.on{color:var(--accent);border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.12);}
.chat-msg{max-width:82%;}
.chat-bub{border-radius:14px;padding:9px 12px;box-shadow:0 1px 3px rgba(0,0,0,.16);}
.chat-msg.mine .chat-bub{background:rgba(var(--accent-rgb),.13);}   /* мои сообщения — лёгкий тон цвета сайта (border/цвет автора не трогаем) */
.chat-send{background:var(--accent);color:#04070d;border-color:var(--accent);}
.chat-send:hover{filter:brightness(1.08);background:var(--accent);}
.chat-input{border-radius:9px;}
.chat-emoji-btn{border-radius:9px;}
.chat-mute-menu button{white-space:nowrap;}

/* ── Background library (мои фоны) ──────────────────────────────────────────────── */
.bglib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin:8px 0 4px;}
.bglib-item{position:relative;}
.bglib-thumb{width:100%;aspect-ratio:16/10;border-radius:8px;background-size:cover;background-position:center;border:1px solid var(--line);cursor:pointer;transition:border-color .15s,transform .15s;}
.bglib-thumb:hover{border-color:var(--accent);transform:translateY(-1px);}
.bglib-del{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;border:none;background:rgba(0,0,0,.62);color:#fff;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.bglib-del:hover{background:#ff4060;}

/* ── Expanded language bar: all 20 languages, wraps to rows, Inter font (Orbitron lacks
      CJK / Arabic / Indic glyphs and would render boxes). Flags NOT shown on product pages. */
.lang-bar{height:auto;flex-wrap:wrap;max-height:62vh;overflow-y:auto;padding:9px 20px;gap:5px 6px;}
.lang-bar-btn{font-family:'Inter','Segoe UI',system-ui,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.3px;padding:6px 11px;white-space:nowrap;}

/* Chat: ⋮ options button (replaces the old cartoonish bell); tiny dot = notifications muted */
.chat-opts{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;color:var(--muted);}
.chat-opts:hover{color:var(--text);border-color:var(--accent);}
.chat-opts svg{display:block;}
.chat-mute-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#ff5a6a;box-shadow:0 0 0 2px #12151d;}

/* Paid cosmetic: ✓ badge once owned (replaces the price badge) */
.frame-price.owned,.bg-price.owned{color:#4ade80;font-weight:800;background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.4);}

/* ── Currency: show the coin icon instead of the letters "ÆC"; lighter money numbers ──── */
.aec-ic{display:inline-block;width:13px;height:13px;vertical-align:-2px;background:url("../aec-coin.svg") center/contain no-repeat;flex:none;}
.frame-price-coin{font-size:0!important;letter-spacing:0!important;width:13px;height:13px;display:inline-block;vertical-align:-2px;background:url("../aec-coin.svg") center/contain no-repeat;}
/* the big shop-hero coin: hide the "ÆC" letters, show a real coin face */
.aec-coin{background:url("../aec-coin.svg") center/contain no-repeat!important;border:none!important;box-shadow:0 0 16px rgba(var(--accent-rgb),.35)!important;}
.aec-coin-txt{display:none!important;}
/* Money numbers were Orbitron-800 — too heavy to read. Lighter, still legible. */
.acc-drop-bal-val,.frame-price,.bg-price,.sell-price,.shop-item-price,.mus-count,.acc-balance{font-weight:600!important;}
.frame-price.owned,.bg-price.owned{font-weight:700!important;}

/* Music controls: bigger, centred glyphs (were small and off-centre) */
#pMusicCard .mus-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0;}
#pMusicCard .mus-controls .fr-toolbtn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:40px;font-size:18px;line-height:1;padding:0 12px;}
#pMusShuffle.on{background:rgba(var(--accent-rgb),.16);color:var(--accent);border-color:rgba(var(--accent-rgb),.5);}

/* ── Chat: gear settings button + menu, side message-actions, clean list indicators ──── */
.chat-gear{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;color:var(--muted);}
.chat-gear:hover{color:var(--text);border-color:var(--accent);}
.chat-gear .chat-mute-dot{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:#ff5a6a;box-shadow:0 0 0 2px #12151d;}
.chat-gear-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:10px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:232px;box-shadow:0 12px 30px rgba(0,0,0,.55);}
.chat-gear-menu .cg-sec{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:6px 10px 3px;}
.chat-gear-menu .cg-sep{height:1px;background:rgba(255,255,255,.1);margin:4px 2px;}
.chat-gear-menu .cg-item{display:flex;align-items:center;gap:9px;background:none;border:none;color:var(--text);text-align:left;font-family:inherit;font-size:12.5px;padding:8px 10px;border-radius:7px;cursor:pointer;width:100%;}
.chat-gear-menu .cg-item:hover{background:rgba(255,255,255,.08);}
.chat-gear-menu .cg-item.danger{color:#ff6b7d;}
.chat-gear-menu .cg-ic{width:18px;text-align:center;flex:none;opacity:.9;}
@media(max-width:880px){.chat-gear-menu{left:12px;right:12px;min-width:0;}}
/* message actions moved to the SIDE, vertically centred (were on top, covering the bubble) */
.chat-msg-actions{top:50%!important;bottom:auto!important;transform:translateY(-50%);right:auto!important;left:100%;margin-left:6px;flex-direction:column;gap:3px;}
.chat-msg.mine .chat-msg-actions{left:auto;right:100%!important;margin-left:0;margin-right:6px;}
.chat-msg-actions button svg{display:block;}
.chat-mute-ic,.chat-block-ic{display:inline-flex;align-items:center;flex:none;margin-left:3px;color:var(--muted);}
.chat-block-ic{color:#ff6b7d;}

/* ── Revert the gold coin: original currency logo (orbital) in prices; ÆC badge back in shop hero.
      Keeps the lighter money numbers. ─────────────────────────────────────────────────────── */
.aec-ic{display:none!important;}
.frame-price-coin{font-size:8px!important;letter-spacing:.5px!important;width:auto!important;height:auto!important;vertical-align:baseline!important;background:none!important;}
.aec-coin{background:radial-gradient(circle at 32% 28%, rgba(var(--accent-rgb),.9), rgba(var(--accent-rgb),.28) 70%, rgba(var(--accent-rgb),.14))!important;border:2px solid rgba(var(--accent-rgb),.7)!important;box-shadow:0 0 14px rgba(var(--accent-rgb),.4), inset 0 0 10px rgba(0,0,0,.35)!important;}
.aec-coin-txt{display:inline!important;}
.frame-price svg,.bg-price svg{width:1.15em!important;height:1.15em!important;vertical-align:-2px;}

/* Music controls: slightly-bigger-than-default, centred SVG glyphs (were too big) */
#pMusicCard .mus-controls .fr-toolbtn.mus-ctl{min-width:36px!important;height:34px!important;font-size:15px!important;padding:0 9px!important;display:inline-flex;align-items:center;justify-content:center;}
.mus-ctl svg{display:block;}
#pMusShuffle.on{background:rgba(var(--accent-rgb),.16);color:var(--accent);border-color:rgba(var(--accent-rgb),.5);}
/* Background rotation: pick which backgrounds cycle */
.bgrot-pick{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;}
.bgrot-chip{padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;}
.bgrot-chip:hover{color:var(--text);border-color:var(--accent);}
.bgrot-chip.on{background:rgba(var(--accent-rgb),.15);color:var(--accent);border-color:rgba(var(--accent-rgb),.5);}

/* ── Proper chat header BAR — visually separated from the conversation (repeated request) ──── */
.chat-head{background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(255,255,255,.02))!important;border-bottom:1px solid rgba(var(--accent-rgb),.30)!important;box-shadow:0 4px 14px rgba(0,0,0,.32);position:relative;z-index:5;border-radius:12px 12px 0 0;padding:13px 16px!important;min-height:64px;}
.chat-head-name{font-size:14px!important;color:var(--text)!important;}
.chat-head-sub{color:var(--accent)!important;opacity:.85;}
.chat-head .chat-avatar,.chat-head [class*="ava"]{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.35);}
/* the gear sits nicely at the right of the bar */
.chat-head-actions{align-items:center;}

/* Music albums: how-to hint + clean folder button */
.mus-hint{font-size:11px;color:var(--muted);margin:2px 0 9px;line-height:1.45;}
.mus-fold-btn svg{display:block;}
.mus-fold.add{font-weight:600;}

/* Owner maintenance/restart card in the moderation tab */
.mod-maint-status{color:#ffcf99;background:rgba(255,180,84,.08);border:1px solid rgba(255,180,84,.3);border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:8px;}
.mod-maint-row{display:flex;flex-wrap:wrap;gap:8px;}

/* Music: normal-size buttons (upload was huge), independent list scroll, album-pick menu */
#pMusicCard .mus-controls .fr-toolbtn:not(.mus-ctl){min-width:auto!important;height:auto!important;font-size:12px!important;padding:8px 13px!important;line-height:1.2!important;}
#pMusList{max-height:320px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;}
.mus-folder-menu{position:fixed;z-index:2147483000;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:2px;min-width:190px;max-height:60vh;overflow-y:auto;box-shadow:0 12px 30px rgba(0,0,0,.55);}
.mus-folder-menu .mfm-sec{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:5px 9px 3px;}
.mus-folder-menu .mfm-empty{font-size:11.5px;color:var(--muted);padding:5px 9px;}
.mus-folder-menu .mfm-sep{height:1px;background:rgba(255,255,255,.1);margin:4px 2px;}
.mus-folder-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);font-family:inherit;font-size:12.5px;padding:7px 10px;border-radius:6px;cursor:pointer;}
.mus-folder-menu button:hover{background:rgba(255,255,255,.08);}
.mus-folder-menu .mfm-new{color:var(--accent);}

/* Unsaved-changes bar for cosmetics (live preview → Save/Cancel) */
.pf-unsaved-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:2147483200;display:none;align-items:center;gap:12px;background:#241708;border:1px solid rgba(var(--accent-rgb),.45);border-radius:12px;padding:11px 16px;box-shadow:0 10px 34px rgba(0,0,0,.5);font-size:13px;color:var(--text);max-width:92vw;}
.pf-unsaved-bar button{font:inherit;font-size:12.5px;border-radius:8px;padding:8px 16px;cursor:pointer;border:1px solid transparent;white-space:nowrap;}
.pf-unsaved-save{background:var(--accent);color:#04070d;font-weight:700;}
.pf-unsaved-save:hover{filter:brightness(1.08);}
.pf-unsaved-cancel{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--muted);}
.pf-unsaved-cancel:hover{color:var(--text);}