/* ═════════ AURORA · ШАПКА — без адаптации, как на ПК ═════════ */
:root{
  --ah-accent:#B7FF3C;
  --ah-accent2:#7BE84A;
  --ah-violet:#8B7CFF;
  --ah-gold:#FFC94D;
  --ah-text:#EDF1F7;
  --ah-muted:#8B94A7;
  --ah-line:rgba(255,255,255,.07);
}

.topbar{
  position:relative; z-index:1000;
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:rgba(13,19,34,.95);
  border-bottom:1px solid rgba(148,163,184,.12);
  contain:layout style;
}
.topbar::after{
  content:''; display:block; height:1px;
  background:linear-gradient(90deg,transparent,rgba(183,255,60,.65),rgba(57,214,255,.45),transparent);
  opacity:.45;
}
.topbar,.topbar *,.topbar *::before,.topbar *::after{box-sizing:border-box}

.topbar-inner{
  max-width:1440px; margin:auto;
  display:flex; align-items:center; gap:14px;
  padding:11px 20px;
  font-family:'Onest','Segoe UI',Tahoma,Arial,sans-serif;
}

/* ═══ ЛОГОТИП: фиолетовый знак + золотая Z ═══ */
.topbar .logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none !important; flex:none;
}
.topbar .logo-mark{
  position:relative;
  width:40px; height:40px; border-radius:13px; flex:none;
  display:grid; place-items:center;
  color:#fff;
  background:linear-gradient(140deg,#A78BFA 0%,#8B5CF6 50%,#7C3AED 100%);
  box-shadow:0 6px 20px -4px rgba(139,92,246,.6);
  transition:transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s;
}
.topbar .logo-mark svg{
  width:19px; height:19px;
  filter:drop-shadow(0 1px 3px rgba(20,8,50,.45));
}
.topbar .logo:hover .logo-mark{
  transform:rotate(-6deg) scale(1.07);
  box-shadow:0 8px 26px -4px rgba(139,92,246,.75);
}
.topbar .logo-word{
  font-family:'Unbounded','Onest',sans-serif;
  font-weight:800; font-size:19px; letter-spacing:.6px;
  color:#fff; line-height:1;
}
.topbar .logo-word em{
  font-style:normal; color:var(--ah-gold);
}

/* ═══ НАВИГАЦИЯ ═══ */
.topbar .mainnav{display:flex; gap:3px; flex:1; justify-content:center}
.topbar .mainnav a{
  display:flex; align-items:center; gap:7px;
  padding:9px 13px; border-radius:12px;
  text-decoration:none !important;
  color:var(--ah-muted); font-size:13px; font-weight:500;
  transition:color .15s, background-color .15s;
  white-space:nowrap;
  background:transparent !important; border:none;
}
.topbar .mainnav a i{font-size:14px}
.topbar .mainnav a:hover{color:var(--ah-text); background:rgba(255,255,255,.05) !important}
.topbar .mainnav a.active{color:var(--ah-accent); background:rgba(183,255,60,.1) !important}

.blinking{color:var(--ah-gold); animation:ahBlink 1.2s ease-in-out infinite}
@keyframes ahBlink{50%{opacity:.35}}

/* ═══ ПРАВАЯ ЧАСТЬ ═══ */
.topbar .topbar-right{display:flex; align-items:center; gap:10px; flex:none}

.topbar .ctrl-icons{display:flex; align-items:center; gap:10px}
.topbar .cico{
  display:inline-flex; align-items:center; font-size:14px;
  text-decoration:none !important;
  transition:transform .15s;
}
.topbar .cico:hover{transform:translateY(-1px)}
.topbar .cico--support{color:#39D6FF}
.topbar .cico--hbd{color:#FF6FB5}
.topbar .cico--tip{color:var(--ah-gold)}
.topbar .cico--bonus{color:var(--ah-gold); animation:ahBonus 2s ease-in-out infinite}
@keyframes ahBonus{50%{opacity:.4}}

.topbar .error-msg{color:#FF5C7A; font-size:10px}

/* ═══ РЕЙТИНГ ═══ */
.topbar .stars-pill{
  display:flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:13px;
  background:linear-gradient(135deg,#FFD86B,#FFA53D);
  color:#241A04 !important; font-weight:800; font-size:13px;
  box-shadow:0 4px 20px rgba(255,178,61,.25);
  text-decoration:none !important; white-space:nowrap;
  transition:transform .15s;
}
.topbar .stars-pill i{font-size:13px}
.topbar .stars-pill:hover{transform:translateY(-1px)}

/* ═══ ЮЗЕР-ЧИП + ДРОПДАУН: БЕЗ ЗАДЕРЖЕК ═══ */
.topbar .user-chip-wrap{position:relative}
.topbar .user-chip{
  display:flex; align-items:center; gap:10px;
  padding:5px 14px 5px 5px;
  border:1px solid rgba(148,163,184,.14); border-radius:14px;
  background:rgba(255,255,255,.045); cursor:pointer;
  transition:border-color .15s;
}
.topbar .user-chip-wrap:hover .user-chip{border-color:rgba(183,255,60,.4)}
.topbar .user-chip .avatar{
  width:38px; height:38px; border-radius:11px; overflow:hidden; flex:none;
  background:linear-gradient(135deg,var(--ah-violet),#5B4BD4);
}
.topbar .user-chip .avatar img{width:100%; height:100%; object-fit:cover; display:block}
.topbar .p-meta{line-height:1.25}
.topbar .p-meta b{display:block; font-size:12.5px; color:#fff; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .p-meta small{font-size:10.5px; color:var(--ah-muted); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.topbar .user-chip .chv{font-size:9px; color:var(--ah-muted); transition:transform .2s}
.topbar .user-chip-wrap:hover .chv{color:var(--ah-accent); transform:rotate(180deg)}

.topbar .user-chip-wrap::after{
  content:''; position:absolute; top:100%; left:0; right:0; height:10px; display:none;
}
.topbar .user-chip-wrap:hover::after{display:block}

.topbar .user-dropdown{
  position:absolute; top:calc(100% + 6px); right:0;
  background:#101728;
  border:1px solid rgba(148,163,184,.14); border-radius:14px;
  box-shadow:0 12px 32px rgba(4,6,12,.55);
  list-style:none; padding:6px; margin:0; min-width:190px; z-index:1001;
  visibility:hidden; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear 0s;
}
.topbar .user-chip-wrap:hover .user-dropdown{
  visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto;
}
.topbar .user-dropdown li a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:9px;
  color:#D7DCE6; text-decoration:none !important;
  font-size:13px; font-weight:500;
  transition:color .12s, background-color .12s;
}
.topbar .user-dropdown li a i{font-size:13px; color:var(--ah-muted); width:16px; text-align:center}
.topbar .user-dropdown li a:hover{background:rgba(183,255,60,.09); color:var(--ah-accent)}
.topbar .user-dropdown li a:hover i{color:var(--ah-accent)}
.topbar .user-dropdown .divider{height:1px; background:var(--ah-line); margin:5px 4px}
.topbar .user-dropdown .logout, .topbar .user-dropdown .logout i{color:#FF5C7A}
.topbar .user-dropdown .logout:hover{background:rgba(255,92,122,.1); color:#FF8CA3}

/* ═══ ЯЗЫК ═══ */
.topbar .lang{
  position:relative;
  display:flex; align-items:center; gap:6px;
  padding:9px 12px; border-radius:12px;
  border:1px solid rgba(148,163,184,.14); background:rgba(255,255,255,.045);
  font-size:12px; font-weight:700; color:var(--ah-muted);
  cursor:pointer; flex:none;
  transition:background-color .15s, border-color .15s, color .15s;
}
.topbar .lang::after{content:''; position:absolute; top:100%; left:0; right:0; height:10px; display:none}
.topbar .lang:hover::after{display:block}
.topbar .lang:hover{background:rgba(183,255,60,.1); border-color:rgba(183,255,60,.4); color:var(--ah-text)}
.topbar .lang > img{width:17px; height:12px; border-radius:2px}
.topbar .lang > i{font-size:8px}
.topbar .lang-menu{
  position:absolute; top:calc(100% + 6px); right:0;
  background:#101728;
  border:1px solid rgba(148,163,184,.14); border-radius:12px;
  box-shadow:0 12px 32px rgba(4,6,12,.55);
  list-style:none; padding:5px 0; margin:0;
  max-height:320px; overflow-y:auto; min-width:150px; z-index:1001;
  visibility:hidden; opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear 0s;
}
.topbar .lang:hover .lang-menu{
  visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto;
}
.topbar .lang-menu li a{
  display:block; padding:8px 14px;
  color:var(--ah-text); text-decoration:none !important;
  font-size:13px; font-weight:500;
  transition:color .12s, background-color .12s;
}
.topbar .lang-menu li a:hover{background:rgba(183,255,60,.09); color:var(--ah-accent)}

/* ═══ ОНЛАЙН (гости) ═══ */
.topbar .online-pill{
  display:flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:12px;
  border:1px solid rgba(148,163,184,.14); background:rgba(255,255,255,.045);
  font-size:12.5px; color:#fff; white-space:nowrap;
}
.topbar .online-pill .fa-circle{color:var(--ah-accent2); font-size:7px}
.topbar .online-pill strong{color:var(--ah-muted); font-weight:500}

html,body{overflow-x:hidden}
@supports (overflow-x:clip){ html,body{overflow-x:clip} }

@media (prefers-reduced-motion:reduce){
  .topbar *, .blinking{animation:none !important; transition:none !important}
}