/*  ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
    ┃  GlanceSoul UI — dark glass by kenoji      ┃
    ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */

/* ========== Reset / Base ========== */
:root{
  color-scheme: dark;
  --gs-font: 15px/1.55 "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

  /* Brand */
  --gs-brand:   #9ae6ff;
  --gs-brand-2: #8bb8ff;
  
    h1,h2,h3,.gs-title { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.gs-title { letter-spacing: .2px; font-weight: 800; }

  /* Text */
  --gs-ink:       #e8eefc;
  --gs-ink-muted: #b7c2dd;

  /* Surfaces / Glass */
  --gs-bg:      radial-gradient(1400px 900px at 10% -10%, #0b1221 0, #070b16 45%, #03060b 100%);
  --gs-glass-1: rgba(255,255,255,.08);
  --gs-glass-2: rgba(255,255,255,.06);
  --gs-glass-3: rgba(255,255,255,.04);
  --gs-stroke:  rgba(255,255,255,.18);
  --gs-ring:    rgba(255,255,255,.28);
  --gs-shadow:  0 20px 60px rgba(0,0,0,.55);

  /* States */
  --gs-ok:   #22c55e;
  --gs-warn: #f59e0b;
  --gs-bad:  #ef4444;

  /* Radii / Spacing */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
  --sp-1: 6px;  --sp-2: 10px; --sp-3: 14px; --sp-4: 18px; --sp-5: 24px; --sp-6: 32px;

  /* Type */
  --gs-font: 15px/1.55 system-ui, -apple-system, Segoe UI, Inter, Arial, sans-serif;
  --h1: clamp(28px, 6vw, 54px);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; color:var(--gs-ink); font:var(--gs-font);
  background:var(--gs-bg); background-attachment:fixed;
}

/* ===== Global stage (animated grid + noise) ===== */
.gs-stage{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.gs-stage::before,.gs-stage::after{ content:""; position:absolute; inset:-25%; }
.gs-stage::before{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.085) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.075) 0 1px, transparent 1px 120px);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
  animation: gs-grid 18s linear infinite;
}
.gs-stage::after{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/>\
  <feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.05'/>\
  </feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.3; mix-blend-mode:overlay;
}
@keyframes gs-grid{ 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-60px,-40px,0)} 100%{transform:translate3d(0,0,0)} }

/* ===== Layout ===== */
.gs-page{ position:relative; z-index:1; min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; }
.gs-wrap{ max-width:1120px; margin:0 auto; padding:0 var(--sp-5); width:100%; }
.gs-section{ padding:var(--sp-6) 0; }

/* ===== Navbar ===== */
.gs-nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(18px) saturate(130%);
  background: linear-gradient(180deg, rgba(10,15,25,.68), rgba(10,15,25,.18));
  border-bottom:1px solid var(--gs-stroke);
}
.gs-nav__inner{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; }
.gs-brand{ display:inline-flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px; }
.gs-brand__dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 40% 30%, #fff, var(--gs-brand-2));
  box-shadow: 0 0 18px rgba(255,255,255,.5), 0 0 36px rgba(154,230,255,.35);
}
.gs-nav__spacer{ flex:1; }
.gs-nav__links{ display:flex; align-items:center; gap:12px; }
.gs-nav__links a{ color:var(--gs-ink); text-decoration:none; opacity:.92; }
.gs-nav__links a:hover{ opacity:1; text-decoration:underline; }
.gs-nav__toggle{ display:none; background:transparent; border:0; color:#fff; cursor:pointer; }
@media (max-width:760px){
  .gs-nav__toggle{ display:inline-flex; }
  .gs-nav__links{
    display:none; position:absolute; left:0; right:0; top:56px;
    padding:10px var(--sp-5); background:rgba(10,15,25,.92); border-bottom:1px solid var(--gs-stroke);
    flex-wrap:wrap;
  }
  .gs-nav__links.is-open{ display:flex; }
}

/* ===== Footer ===== */
.gs-footer{
  backdrop-filter: blur(18px) saturate(130%);
  background: linear-gradient(0deg, rgba(10,15,25,.68), rgba(10,15,25,.18));
  border-top:1px solid var(--gs-stroke);
}
.gs-footer__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:var(--sp-4) 0 var(--sp-3); }
.gs-footer__links{ display:flex; gap:12px; flex-wrap:wrap; }
.gs-footer__links a{ color:var(--gs-ink-muted); text-decoration:none; }
.gs-footer__links a:hover{ color:#fff; }
.gs-copy{ color:var(--gs-ink-muted); font-size:.92rem; padding-bottom:var(--sp-5); }

/* ========== Components ========== */
.gs-card{
  position:relative; background:var(--gs-glass-2); border:1px solid var(--gs-stroke);
  border-radius:var(--r-lg); backdrop-filter: blur(16px) saturate(130%);
  box-shadow:var(--gs-shadow);
}
.gs-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%, rgba(154,230,255,.25) 60%, rgba(255,255,255,0));
  filter:blur(8px); opacity:.25;
}
.gs-card__body{ padding:var(--sp-5); }

/* Buttons */
.gs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:var(--r-md); border:0; cursor:pointer; font-weight:900;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
  text-decoration:none;
}
.gs-btn:active{ transform:translateY(1px); }
.gs-btn--primary{ color:#0b1221; background:#fff; box-shadow:0 10px 30px rgba(255,255,255,.14); }
.gs-btn--primary:hover{ box-shadow:0 16px 42px rgba(255,255,255,.22); }
.gs-btn--ghost{ color:var(--gs-ink); background:var(--gs-glass-3); border:1px solid var(--gs-stroke); }
.gs-btn--ghost:hover{ background:rgba(255,255,255,.08); }

/* Form */
.gs-form{ display:grid; gap:var(--sp-4); }
.gs-field{ display:grid; gap:6px; }
.gs-label{ font-weight:650; }
.gs-inputwrap{ position:relative; }
.gs-input{
  width:100%; padding:12px 14px 12px 44px; border-radius:var(--r-md);
  border:1px solid var(--gs-stroke); background:var(--gs-glass-2); color:#fff; outline:0;
  transition:border .2s, box-shadow .2s, background .2s;
}
.gs-input:hover{ background:rgba(255,255,255,.085); }
.gs-input:focus{ border-color:#fff; box-shadow:0 0 0 4px var(--gs-ring); }
.gs-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.9; pointer-events:none; }
.gs-help{ color:var(--gs-ink-muted); font-size:.92rem; }
.gs-error{ color:#ffb4b4; }

/* Password meter */
.gs-meter{ height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.gs-meter>i{ display:block; height:100%; width:0; border-radius:inherit; transition:width .25s ease, background .25s ease; }

/* Hero / Tiles / Grids */
.gs-hero{ text-align:center; padding:56px 0 20px; }
.gs-title{
  font-size:var(--h1); line-height:1.05; margin:0 0 10px; font-weight:900; letter-spacing:.2px;
  background:linear-gradient(90deg, #fff, var(--gs-brand), #fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 40px rgba(154,230,255,.18);
}
.gs-sub{ color:var(--gs-ink-muted); max-width:780px; margin:0 auto 16px; }

.gs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:960px){ .gs-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .gs-grid{ grid-template-columns:1fr; } }

.gs-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:760px){ .gs-grid2{ grid-template-columns:1fr; } }

.gs-tile{
  background:var(--gs-glass-1); border:1px solid var(--gs-stroke); border-radius:var(--r-md);
  padding:var(--sp-4); backdrop-filter:blur(12px); box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.gs-tile h3{ margin:.25rem 0 .4rem; }
.gs-tile p{ margin:0; color:var(--gs-ink-muted); }

/* Links (no underline; glow on hover/focus) */
a{
  color: var(--gs-ink);
  text-decoration: none;
  transition: color .2s ease, text-shadow .25s ease, box-shadow .25s ease, opacity .25s ease;
}
a:hover{
  color:#fff;
  text-shadow: 0 0 6px rgba(154,230,255,.35), 0 0 14px rgba(154,230,255,.22);
}
a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--gs-ring);
  border-radius: 10px;
}

/* Floating Edit button polish */
.profile-edit, .profile-edit--floating{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:12px; text-decoration:none;
  background:var(--gs-glass-2); border:1px solid var(--gs-stroke); color:#fff;
  backdrop-filter:blur(10px); opacity:.96;
}
.profile-edit:hover, .profile-edit--floating:hover{
  background:rgba(255,255,255,.09);
  box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(154,230,255,.25);
}
.profile-edit--floating{ position:absolute; top:10px; right:10px; z-index:2; }

/* Motion */
@media (prefers-reduced-motion:reduce){
  .gs-stage::before{ animation:none; }
}

/* ===== Selects / Toolbar (voice/beta controls reuse) ===== */
.gs-select{
  width:100%; padding:12px 14px; border-radius:var(--r-md);
  border:1px solid var(--gs-stroke); background:var(--gs-glass-2);
  color:#fff; outline:0; transition:border .2s, box-shadow .2s, background .2s;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image: linear-gradient(180deg,transparent,transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='white'/></svg>");
  background-repeat:no-repeat; background-position: right 10px center, 0 0;
}
.gs-select:hover{ background:rgba(255,255,255,.085); }
.gs-select:focus{ border-color:#fff; box-shadow:0 0 0 4px var(--gs-ring); }

.gs-toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--gs-glass-1); border:1px solid var(--gs-stroke);
  border-radius:var(--r-md); padding:10px; backdrop-filter:blur(12px);
}
.gs-pill{
  border:1px solid var(--gs-stroke); background:var(--gs-glass-3);
  border-radius:999px; padding:6px 10px; font-size:.92rem; color:var(--gs-ink-muted);
}

/* ========== PROFILE (VK/Twitter/Discord/Steam blend) ========== */

/* --- Hero banner --- */
.profile-hero-card{ position:relative; overflow:hidden; }
.profile-hero-img{
  height:200px; background:#0b1221 center/cover no-repeat;
  border-bottom:1px solid var(--gs-stroke); position:relative;
}
.profile-hero-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55) 70%, rgba(0,0,0,.85));
}

/* Top-right meta (UID + Edit) */
.profile-hero-meta{
  position:absolute; top:10px; right:12px; z-index:2;
  display:flex; gap:8px; align-items:center;
}
.profile-uid{
  padding:.25rem .5rem; border-radius:8px;
  background:rgba(15,23,42,.65); color:#e5f3ff; font:600 12px/1 system-ui;
  border:1px solid var(--gs-stroke); backdrop-filter:blur(8px);
}
.profile-edit, .profile-edit--floating{
  display:inline-flex; gap:6px; align-items:center;
  padding:8px 10px; border-radius:12px; text-decoration:none;
  background:var(--gs-glass-2); border:1px solid var(--gs-stroke); color:#fff;
  backdrop-filter:blur(10px); opacity:.95;
}
.profile-edit:hover, .profile-edit--floating:hover{ background:rgba(255,255,255,.08); }
.profile-edit--floating{ position:absolute; top:10px; right:10px; z-index:2; }

/* Head: avatar + name block */
.profile-head{ display:flex; align-items:center; gap:14px; padding-top:12px; }
.profile-avatar--sq{
  width:64px; height:64px; flex:0 0 64px;
  border-radius:14px; overflow:hidden;
  border:2px solid rgba(255,255,255,.15); background:#0b1221;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.profile-avatar--sq img{ display:block; width:100%; height:100%; object-fit:cover; }

.profile-nameblock{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.profile-nameblock .name{
  font-size:18px; font-weight:800; color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
}
.profile-nameblock .name[style*="--glow"]{
  text-shadow:0 0 6px var(--glow), 0 0 16px color-mix(in oklab, var(--glow), #fff 30%);
}
.profile-handle{ display:flex; align-items:center; gap:8px; color:var(--gs-ink-muted); }
.profile-handle .dot{ opacity:.6; }
.uid-badge{
  font-size:12px; padding:2px 6px; border-radius:8px;
  border:1px solid var(--gs-stroke); background:rgba(0,0,0,.28); color:#e5f3ff;
}

/* Awards row */
.awards-row{ display:flex; gap:8px; flex-wrap:wrap; }
.award-pill{
  display:inline-flex; gap:8px; align-items:center;
  background:var(--gs-glass-1); border:1px solid var(--gs-stroke);
  border-radius:999px; padding:6px 10px; font-size:.92rem;
}
.award-pill img{ width:18px; height:18px; }

/* Tabs */
.gs-tabs{ display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.gs-tab{
  padding:8px 12px; border:1px solid var(--gs-stroke); border-radius:999px;
  background:var(--gs-glass-3); opacity:.95; text-decoration:none; color:var(--gs-ink);
}
.gs-tab:hover{ background:rgba(255,255,255,.08); }
.gs-tabpanel{ padding:6px 0; }

/* Friends (steam-like) */
.gs-friends{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
@media (max-width:1100px){ .gs-friends{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:900px){  .gs-friends{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:680px){  .gs-friends{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){  .gs-friends{ grid-template-columns:repeat(2,1fr); } }
.gs-friend{ display:flex; flex-direction:column; gap:6px; align-items:center; text-decoration:none; }
.gs-friend__avatar{
  width:64px; height:64px; border-radius:12px;
  background:linear-gradient(135deg,#fff,var(--gs-brand)); border:1px solid var(--gs-stroke);
}
.gs-friend__name{ text-align:center; }

/* Screenshots */
.gs-shots{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:1000px){ .gs-shots{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){  .gs-shots{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){  .gs-shots{ grid-template-columns:1fr; } }
.gs-shot{ margin:0; border:1px solid var(--gs-stroke); border-radius:12px; overflow:hidden; background:var(--gs-glass-1); }
.gs-shot img{ display:block; width:100%; height:200px; object-fit:cover; }
.gs-shot figcaption{ padding:8px 10px; color:var(--gs-ink-muted); font-size:.92rem; }

/* Wall (full width, compact avatars) */
.wall-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.wall-item{
  position:relative; padding:10px; border-radius:12px;
  background:var(--gs-glass-1); border:1px solid var(--gs-stroke);
}
.wall-header{ display:flex; align-items:center; gap:8px; }
.wall-header .ava{
  width:clamp(16px,2.2vw,20px); height:clamp(16px,2.2vw,20px);
  border-radius:6px; overflow:hidden; border:1px solid var(--gs-stroke);
}
.wall-header .ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.wall-author{ color:#fff; font-weight:600; text-decoration:none; }
.wall-time{ font-size:12px; opacity:.65; margin-left:auto; }
.wall-body{ margin-top:6px; color:var(--gs-ink); }
.wall-del{
  position:absolute; right:8px; top:8px; width:22px; height:22px; cursor:pointer;
  border-radius:6px; border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.3); color:#fff; opacity:.85;
}

/* Social mini buttons (Steam/TG) — square like Steam */
.social-mini{ display:flex; gap:8px; align-items:center; }
.sbtn{
  width:28px; height:28px; border-radius:8px; display:inline-block;
  background:var(--gs-glass-2); border:1px solid var(--gs-stroke); backdrop-filter:blur(6px);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.sbtn:hover{ transform:translateY(-1px); }
.sbtn--steam{
  background-image:url('/public/assets/icons/steam.svg'); background-repeat:no-repeat; background-position:center;
}
.sbtn--tg{
  background-image:url('/public/assets/icons/tg.svg'); background-repeat:no-repeat; background-position:center;
}
a { color: var(--gs-ink); text-decoration: none; transition: filter .18s, opacity .18s; }
a:hover { text-decoration: none; filter: drop-shadow(0 0 6px rgba(154,230,255,.45)); opacity: 1; }
.inline { display:inline }

/* Responsive tweaks for profile hero */
@media (max-width:960px){
  .profile-hero-img{ height:180px; }
}
@media (max-width:560px){
  .profile-hero-img{ height:170px; }
  .profile-head{ gap:12px; }
  .profile-avatar--sq{ width:64px; height:64px; }
}
/* Friends grid */
.gs-friends {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.gs-friend {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--gs-stroke);
  border-radius: var(--r-md);
  background: var(--gs-glass-1);
  text-decoration: none;
}

.gs-friend__avatar {
  grid-row: 1 / span 2;
  width: 44px; height: 44px;
  border-radius: 10px;
  background-size: cover; background-position: center;
  border: 1px solid var(--gs-stroke);
}

.gs-friend__name {
  font-weight: 700;
  color: #fff;
  min-width: 0; /* для ellipsis */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gs-friend__handle {
  color: var(--gs-ink-muted);
  font-size: .9rem;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Кнопка удаления (красная точка, не налезает) */
.friend-remove {
  position: absolute; left: 8px; top: 8px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: #ff5f57;
  color: #0b0b0b; font-weight: 900; font-size: 12px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.friend-remove:hover { filter: brightness(1.05); }
.gs-badge-change{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;font-weight:800;
  border:1px solid var(--gs-stroke); background:var(--gs-glass-2); color:#fff;
  text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.gs-badge-change:hover{ background:rgba(255,255,255,.08) }
/* === Glass buttons & chips === */
.gs-btn--glass{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px) saturate(110%);
  box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.gs-btn--glass:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18); }
.gs-btn--glass:active{ transform: translateY(0); }

/* message appear */
@keyframes gs-pop-in {
  from { transform: translateY(6px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.msg { animation: gs-pop-in .18s ease-out; }

/* ticks (read receipts) */
.tick{ display:inline-block; width:12px; height:12px; margin-left:6px; vertical-align:middle; opacity:.65 }
.tick:before{ content:"✓"; font-size:12px; }
.tick.tick--double:before{ content:"✓✓"; letter-spacing:-1px; }
.tick.tick--seen{ opacity:1 }