/* ===================== IranDou (ایران دو) — shared styles ===================== */
:root{
  --void:#0a0614;
  --panel: rgba(24, 14, 44, 0.55);
  --panel-solid:#150b28;
  --panel-2: rgba(139, 92, 246, 0.07);
  --panel-line:#2a1a48;
  --purple:#8b5cf6;
  --purple-deep:#6d28d9;
  --magenta:#d946ef;
  --lavender:#e9defc;
  --muted:#9c8fc7;
  --muted-dim:#655a8a;
  --online:#22c55e;
  --font-fa:'Vazirmatn', sans-serif;
  --font-tech:'Chakra Petch', 'Vazirmatn', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--void);
  color:var(--lavender);
  font-family:var(--font-fa);
  overflow-x:hidden;
  line-height:1.7;
  min-height:100vh;
}

/* ---------- ambient background, kept flat / matte ---------- */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(139,92,246,0.16), transparent 62%),
    radial-gradient(ellipse 700px 600px at 100% 20%, rgba(217,70,239,0.09), transparent 58%),
    radial-gradient(ellipse 800px 500px at 50% 100%, rgba(109,40,217,0.13), transparent 62%);
}
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

section, header, footer, main{ position:relative; z-index:1; }

/* ---------- HUD corner-bracket motif ---------- */
.hud-frame{ position:relative; }
.hud-frame::before, .hud-frame::after,
.hud-frame > .br1, .hud-frame > .br2{
  content:''; position:absolute; width:16px; height:16px;
  border:2px solid var(--purple); opacity:.55;
}
.hud-frame::before{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.hud-frame::after{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.hud-frame > .br1{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.hud-frame > .br2{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ---------- nav ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 6vw; position:sticky; top:0; z-index:50;
  backdrop-filter:blur(16px);
  background:rgba(10,6,20,0.68);
  border-bottom:1px solid rgba(139,92,246,0.13);
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-tech); font-weight:700; font-size:1.3rem;
  letter-spacing:.5px; color:var(--lavender); text-decoration:none;
}
.logo .core{
  width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--purple) 40%, var(--purple-deep) 75%);
  box-shadow:0 0 14px rgba(139,92,246,0.7);
  position:relative; flex-shrink:0;
}
.logo .core::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(217,70,239,0.45);
  animation:spin 6s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.nav-links{ display:flex; gap:30px; list-style:none; font-size:.95rem; }
.nav-links li{ position:relative; }
.mobile-extra{ display:none; }
.nav-links a{ color:var(--muted); text-decoration:none; position:relative; display:inline-block; }
.nav-links > li > a{
  position:relative; padding-bottom:4px;
  transition:color .25s ease, transform .25s ease, text-shadow .25s ease;
}
.nav-links > li > a::before{
  content:''; position:absolute; right:0; left:0; bottom:-8px; height:2px;
  background:linear-gradient(90deg, var(--purple), var(--magenta)); border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.nav-links > li > a:hover,
.nav-links > li > a:focus-visible,
.nav-links > li > a.active{
  color:var(--lavender);
}
.nav-links > li > a:hover,
.nav-links > li > a:focus-visible{
  transform:translateY(-2px);
  text-shadow:0 0 16px rgba(139,92,246,0.65);
}
.nav-links > li > a:hover::before,
.nav-links > li > a:focus-visible::before,
.nav-links > li > a.active::before{
  transform:scaleX(1);
}

/* ---------- nav dropdown (hover-style mega list) ---------- */
.nav-item{ display:flex; align-items:center; }
.nav-item > a{ display:flex; align-items:center; gap:5px; }
.nav-item > a::after{
  content:'⌄'; font-size:.6em; opacity:.5; display:inline-block;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-item:hover > a::after, .nav-item:focus-within > a::after{ transform:rotate(180deg); opacity:1; }
.acc-toggle{ display:none; background:none; border:none; color:var(--muted); cursor:pointer; font-size:.8rem; padding:4px; line-height:1; }
.drawer-head-li{ display:none; }

.dropdown{
  position:absolute; top:calc(100% + 12px); right:0; min-width:200px;
  background:rgba(15,9,28,0.94); backdrop-filter:blur(18px);
  border:1px solid var(--panel-line); border-radius:14px; padding:10px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 24px 44px -16px rgba(0,0,0,0.65);
  z-index:70;
}
.dropdown::before{
  content:''; position:absolute; top:-12px; right:0; left:0; height:12px;
  background:transparent;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ opacity:1; pointer-events:auto; transform:translateY(0); }
.nav-item.force-open .dropdown{ opacity:1; pointer-events:auto; transform:translateY(0); }
.nav-item.force-open .dropdown a{ opacity:1; transform:translateY(0); }
.dropdown a{
  padding:9px 12px; border-radius:8px; font-size:.85rem; color:var(--muted); text-decoration:none;
  opacity:0; transform:translateY(-4px);
  transition:background .18s ease, color .18s ease, padding-right .18s ease, opacity .22s ease, transform .22s ease;
}
.nav-item:hover .dropdown a, .nav-item:focus-within .dropdown a{ opacity:1; transform:translateY(0); }
.dropdown a:nth-child(1){ transition-delay:.02s; }
.dropdown a:nth-child(2){ transition-delay:.05s; }
.dropdown a:nth-child(3){ transition-delay:.08s; }
.dropdown a:nth-child(4){ transition-delay:.11s; }
.dropdown a:nth-child(5){ transition-delay:.14s; }
.dropdown a:nth-child(6){ transition-delay:.17s; }
.dropdown a:hover, .dropdown a:focus-visible{ background:rgba(139,92,246,0.14); color:var(--lavender); padding-right:16px; }

.nav-overlay{
  position:fixed; inset:0; background:rgba(5,2,12,0.58); backdrop-filter:none; -webkit-backdrop-filter:none;
  z-index:55; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.nav-overlay.open{ opacity:1; pointer-events:auto; }

.nav-actions{ display:flex; gap:12px; align-items:center; }
.nav-online{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-tech); font-size:.76rem; color:var(--muted);
  border:1px solid var(--panel-line); padding:7px 13px; border-radius:100px;
}
.status-dot{
  width:7px; height:7px; border-radius:50%; background:var(--online);
  box-shadow:0 0 6px var(--online); animation:pulse 1.8s ease-in-out infinite;
  flex-shrink:0;
}

.btn{
  font-family:var(--font-fa); font-weight:600; font-size:.9rem;
  border-radius:10px; cursor:pointer; border:none;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn:focus-visible{ outline:2px solid var(--magenta); outline-offset:3px; }
.btn-ghost{
  background:rgba(255,255,255,0.02); color:var(--lavender);
  border:1px solid var(--panel-line); padding:10px 20px;
}
.btn-ghost:hover{ border-color:rgba(139,92,246,0.55); background:rgba(139,92,246,0.05); }
.btn-glow{
  background:linear-gradient(135deg, var(--purple), var(--purple-deep));
  color:#fff; padding:10px 22px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset, 0 4px 18px -6px rgba(139,92,246,0.55);
}
.btn-glow:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset, 0 6px 22px -6px rgba(139,92,246,0.6); }
.btn-lg{ padding:15px 30px; font-size:1rem; }
.btn-premium{
  background:#f0b429; color:#2a1a00; font-weight:700; padding:10px 20px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.25) inset, 0 4px 18px -6px rgba(240,180,41,0.65);
}
.btn-premium:hover{ background:#f7c650; transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,255,255,0.3) inset, 0 6px 24px -6px rgba(240,180,41,0.8); }

.menu-toggle{ display:none; background:none; border:none; color:var(--lavender); font-size:1.5rem; cursor:pointer; }

/* ---------- page header (used on inner pages) ---------- */
.page-head{ padding:64px 6vw 44px; }
.breadcrumb{
  padding:18px 6vw 0; font-size:.82rem; color:var(--muted-dim);
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.breadcrumb a{ color:var(--muted); text-decoration:none; transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--purple); }
.breadcrumb .sep{ color:var(--panel-line); }
.breadcrumb .current{ color:var(--lavender); }
.page-head .tag{
  font-family:var(--font-tech); font-size:.78rem; letter-spacing:3px;
  color:var(--purple); margin-bottom:12px; display:block;
}
.page-head h1{ font-size:clamp(2rem, 4vw, 2.9rem); font-weight:800; margin-bottom:14px; }
.page-head p{ color:var(--muted); max-width:560px; font-size:1rem; }

/* ---------- generic section shell ---------- */
.section{ padding:0 6vw 100px; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:40px;
}
.section-head .tag{
  font-family:var(--font-tech); font-size:.78rem; letter-spacing:3px;
  color:var(--purple); margin-bottom:12px; display:block;
}
.section-head h2{ font-size:clamp(1.5rem, 3vw, 2.1rem); font-weight:800; }
.section-head p{ color:var(--muted); max-width:420px; font-size:.92rem; }
.see-all{ color:var(--lavender); text-decoration:none; font-size:.9rem; font-weight:600; white-space:nowrap; border-bottom:1px solid var(--purple); padding-bottom:2px; transition:color .2s, border-color .2s; }
.see-all:hover{ color:var(--muted); border-color:var(--muted); }

/* ---------- filter chips ---------- */
.chip-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.chip{
  font-family:var(--font-fa); font-size:.85rem; color:var(--muted);
  background:var(--panel); border:1px solid var(--panel-line);
  padding:9px 18px; border-radius:100px; cursor:pointer;
  backdrop-filter:blur(10px);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.chip:hover{ color:var(--lavender); border-color:rgba(139,92,246,0.4); }
.chip.active{ color:var(--lavender); border-color:var(--purple); background:rgba(139,92,246,0.1); }

/* ---------- category grid ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat-card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:16px;
  padding:26px 20px; text-decoration:none; color:inherit; display:block;
  backdrop-filter:blur(10px);
  transition:transform .22s ease, border-color .25s ease, background .3s ease;
}
.cat-card:hover{ transform:translateY(-3px); border-color:rgba(139,92,246,0.5); background:rgba(139,92,246,0.05); }
.cat-card .icon{ font-size:1.9rem; margin-bottom:14px; display:block; }
.cat-card .name{ font-weight:700; font-size:1.02rem; margin-bottom:6px; }
.cat-card .desc{ font-size:.82rem; color:var(--muted); margin-bottom:10px; }
.cat-card .count{ font-size:.76rem; color:var(--muted-dim); font-family:var(--font-tech); }

/* ---------- game cards ---------- */
.game-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.game-card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:18px;
  overflow:hidden; padding:10px; text-decoration:none; color:inherit; display:block;
  backdrop-filter:blur(10px); cursor:pointer;
  transition:transform .22s ease, border-color .25s ease;
}
.game-card:focus-visible{ outline:2px solid var(--purple); outline-offset:3px; }
.game-card:hover{ transform:translateY(-4px); border-color:rgba(139,92,246,0.5); }
.cover{
  aspect-ratio:4/5; border-radius:12px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:14px;
}
.cover .glyph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:3.4rem; opacity:.85; }
.cover .live-tag{
  position:absolute; top:12px; left:12px;
  background:rgba(10,6,20,0.6); backdrop-filter:blur(6px);
  border:1px solid rgba(217,70,239,0.45); color:var(--magenta);
  font-family:var(--font-tech); font-size:.68rem; letter-spacing:1px;
  padding:4px 10px; border-radius:100px; display:flex; align-items:center; gap:5px;
}
.cover .live-tag .dot{ width:5px; height:5px; border-radius:50%; background:var(--magenta); animation:pulse 1.4s infinite; }
.cover .rating{
  position:absolute; top:12px; right:12px;
  background:rgba(10,6,20,0.6); backdrop-filter:blur(6px);
  font-family:var(--font-tech); font-size:.72rem; color:var(--lavender);
  padding:4px 9px; border-radius:100px; border:1px solid var(--panel-line);
}
.g1{ background:linear-gradient(155deg,#4c1d95,#8b5cf6); }
.g2{ background:linear-gradient(155deg,#701a75,#d946ef); }
.g3{ background:linear-gradient(155deg,#312e81,#6366f1); }
.g4{ background:linear-gradient(155deg,#581c87,#a855f7); }
.g5{ background:linear-gradient(155deg,#3b0764,#c026d3); }
.g6{ background:linear-gradient(155deg,#4c1d95,#7c3aed); }
.g7{ background:linear-gradient(155deg,#701a75,#e879f9); }
.g8{ background:linear-gradient(155deg,#312e81,#818cf8); }

.game-info{ padding:16px 8px 10px; }
.game-info h3{ font-size:1rem; font-weight:700; margin-bottom:6px; }
.game-title-link{ color:inherit; text-decoration:none; transition:color .18s ease; }
.game-title-link:hover{ color:var(--purple); text-decoration:underline; }
.game-meta{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--muted-dim); font-family:var(--font-tech); }

/* ---------- footer ---------- */
footer{ padding:64px 6vw 28px; border-top:1px solid rgba(139,92,246,0.12); margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.footer-brand p{ color:var(--muted); font-size:.9rem; margin:16px 0 20px; max-width:280px; }
.foot-col h4{ font-size:.9rem; margin-bottom:16px; color:var(--lavender); }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.foot-col a{ color:var(--muted); text-decoration:none; font-size:.88rem; transition:color .2s; }
.foot-col a:hover{ color:var(--purple); }
.social{ display:flex; gap:10px; }
.social a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--panel-line);
  display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; font-size:.82rem;
  transition:border-color .2s, color .2s;
}
.social a:hover{ border-color:var(--purple); color:var(--purple); }
.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:24px; border-top:1px solid rgba(139,92,246,0.08);
  font-size:.8rem; color:var(--muted-dim); font-family:var(--font-tech);
}

/* ---------- category highlight (deep-link from dropdown) ---------- */
@keyframes highlightPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(217,70,239,0.22), 0 0 28px rgba(217,70,239,0.32); }
  50%{ box-shadow:0 0 0 3px rgba(217,70,239,0.4), 0 0 44px rgba(217,70,239,0.5); }
}
.cat-card.highlight{ border-color:var(--magenta); animation:highlightPulse 1.6s ease-in-out 2; }

/* ---------- news cards ---------- */
.news-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.news-card{
  display:flex; gap:16px; background:var(--panel); border:1px solid var(--panel-line);
  border-radius:16px; padding:16px; text-decoration:none; color:inherit;
  backdrop-filter:blur(10px); transition:transform .22s ease, border-color .25s ease;
}
.news-card:hover{ transform:translateY(-3px); border-color:rgba(139,92,246,0.45); }
.news-thumb{
  width:112px; height:112px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.9rem;
}
.news-body{ flex:1; min-width:0; }
.news-tag{
  display:inline-block; font-family:var(--font-tech); font-size:.68rem; color:var(--magenta);
  border:1px solid rgba(217,70,239,0.35); background:rgba(217,70,239,0.08);
  padding:3px 10px; border-radius:100px; margin-bottom:9px;
}
.news-body h3{ font-size:.98rem; font-weight:700; margin-bottom:6px; line-height:1.55; }
.news-body p{ font-size:.82rem; color:var(--muted); margin-bottom:9px; }
.news-date{ font-size:.72rem; color:var(--muted-dim); font-family:var(--font-tech); }

/* ---------- responsive ---------- */
@media (max-width:1150px){
  .nav-online{ display:none; }
}
@media (max-width:980px){
  /* Mobile: keep the complete navigation visible at the top instead of using a broken drawer. */
  .nav{
    position:relative;
    z-index:210;
    flex-wrap:wrap;
    row-gap:10px;
    padding-top:12px;
    padding-bottom:10px;
  }
  .menu-toggle{ display:none !important; }
  .nav-links{
    order:3;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    width:100%;
    position:static;
    transform:none !important;
    background:transparent;
    backdrop-filter:none;
    padding:4px 2px 8px;
    overflow-x:auto;
    overflow-y:visible;
    scrollbar-width:none;
    border:0;
    box-shadow:none;
    z-index:auto;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links > li{
    width:auto;
    flex:0 0 auto;
    border:1px solid var(--panel-line);
    border-radius:12px;
    background:rgba(255,255,255,.025);
  }
  .nav-links > li > a{
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    width:auto;
    padding:9px 13px;
    font-size:.84rem;
    color:var(--lavender);
  }
  .nav-links > li > a::before{ display:none; }
  .nav-links > li > a:hover,
  .nav-links > li > a:focus-visible{ transform:none; text-shadow:none; }
  .nav-links .drawer-head-li{ display:none; }
  .nav-links .mobile-extra{ display:block; }
  .nav-item{ position:relative; display:flex; flex-direction:row; align-items:center; }
  .nav-item > a::after{ display:inline-block; }
  .nav-item > a{ border:0; }
  .acc-toggle{ display:none; }
  .dropdown{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:190px;
    max-height:none !important;
    padding:8px;
    background:rgba(15,9,28,.98);
    border:1px solid var(--panel-line);
    border-radius:14px;
    opacity:0;
    pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease;
    z-index:250;
  }
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown,
  .nav-item.force-open .dropdown{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  .dropdown a,
  .nav-item.open .dropdown a{
    display:block;
    opacity:1;
    transform:none;
    padding:10px 9px;
    color:var(--muted);
  }
  .nav-overlay{ display:none !important; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .game-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .cat-grid{ grid-template-columns:1fr; }
  .game-grid{ grid-template-columns:1fr 1fr; }
  .news-grid{ grid-template-columns:1fr; }
  .news-card{ flex-direction:column; }
  .news-thumb{ width:100%; height:130px; }
  .footer-grid{ grid-template-columns:1fr; }
  .nav-actions .btn-ghost{ display:none; }
  .btn-premium{ padding:9px 14px; font-size:.8rem; }
  .page-head{ padding:44px 6vw 32px; }
  .section{ padding:0 6vw 70px; }
}
@media (max-width:420px){
  .game-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:22px; }
}

/* ---------- game modal: find match + invite ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(5,2,12,0.72); backdrop-filter:none; -webkit-backdrop-filter:none;
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:120; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
  position:relative; width:100%; max-width:420px; background:var(--panel-solid);
  border:1px solid var(--panel-line); border-radius:22px; padding:30px 26px 28px;
  transform:translateY(16px) scale(.96); transition:transform .32s cubic-bezier(.2,.8,.2,1);
  max-height:88vh; overflow-y:auto;
}
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:16px; left:16px; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--panel-line); background:rgba(255,255,255,0.03); color:var(--lavender);
  font-size:1rem; cursor:pointer; transition:border-color .2s ease, transform .2s ease;
}
.modal-close:hover{ border-color:var(--magenta); transform:rotate(90deg); }
.modal-cover{
  width:100%; aspect-ratio:16/9; border-radius:16px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center; font-size:3rem;
}
#modalTitle{ font-size:1.25rem; font-weight:800; margin-bottom:12px; }
.modal-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.modal-meta span{
  font-family:var(--font-tech); font-size:.74rem; color:var(--muted);
  border:1px solid var(--panel-line); padding:4px 12px; border-radius:100px;
}
.modal-find{
  width:100%; justify-content:center; display:flex; align-items:center; gap:9px;
  margin-bottom:8px; position:relative; overflow:hidden;
}
.modal-find .fm-icon{ font-size:1rem; transition:transform .25s ease; }
.modal-find:hover .fm-icon{ transform:translateX(-3px) rotate(-8deg); }
.modal-find.searching{ background:linear-gradient(135deg,#4c1d95,#3b0764); pointer-events:none; }
.modal-find.found{ background:linear-gradient(135deg, var(--online), #0f7a3a); box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset, 0 6px 22px -6px rgba(34,197,94,0.55); }
.modal-searching{ display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--muted); margin:6px 0 4px; }
.spinner{
  width:14px; height:14px; border-radius:50%; border:2px solid var(--panel-line);
  border-top-color:var(--purple); animation:spin .7s linear infinite; flex-shrink:0;
}
.invite-section{ margin-top:22px; padding-top:20px; border-top:1px solid var(--panel-line); }
.invite-label{ display:block; font-size:.82rem; color:var(--muted); margin-bottom:12px; }
.invite-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.invite-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(255,255,255,0.03); border:1px solid var(--panel-line); border-radius:12px;
  padding:11px 10px; color:var(--lavender); font-family:var(--font-fa); font-size:.82rem;
  cursor:pointer; transition:border-color .2s ease, background .2s ease, transform .18s ease, color .2s ease;
}
.invite-btn .ic{ font-size:1rem; }
.invite-btn:hover{ border-color:rgba(139,92,246,0.55); background:rgba(139,92,246,0.08); transform:translateY(-2px); }
.invite-btn.copied{ border-color:var(--online); color:var(--online); }

@media (max-width:480px){ .invite-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .modal-close:hover{ transform:none; } }

/* ==================== auth pages (login / register) ==================== */
.auth-wrap{
  min-height:calc(100vh - 84px); display:flex; align-items:center; justify-content:center;
  padding:50px 6vw 70px;
}
.auth-card{
  width:100%; max-width:440px; background:var(--panel-solid); border:1px solid var(--panel-line);
  border-radius:26px; padding:36px 32px 32px; position:relative; backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.6);
}
.auth-character{ display:flex; justify-content:center; margin-bottom:2px; }
.auth-character svg{ width:148px; height:148px; overflow:visible; }
.auth-head{ text-align:center; margin-bottom:26px; }
.auth-head h1{ font-size:1.45rem; font-weight:800; margin-bottom:8px; }
.auth-head p{ color:var(--muted); font-size:.86rem; }

.field{ margin-bottom:17px; }
.field label{ display:block; font-size:.8rem; color:var(--muted); margin-bottom:8px; }
.field .input-wrap{ position:relative; }
.field input{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--panel-line);
  border-radius:12px; padding:13px 16px; color:var(--lavender); font-family:var(--font-fa);
  font-size:.9rem; transition:border-color .2s ease, background .2s ease;
}
.field input::placeholder{ color:var(--muted-dim); }
.field input:focus{ outline:none; border-color:var(--purple); background:rgba(139,92,246,0.05); }
.field.has-toggle input{ padding-left:44px; }
.field .toggle-eye{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted-dim); cursor:pointer; font-size:.95rem;
  transition:color .2s ease; padding:4px;
}
.field .toggle-eye:hover{ color:var(--lavender); }
.field .toggle-eye.revealed{ color:var(--purple); }

.field-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; font-size:.8rem; }
.remember{ display:flex; align-items:center; gap:8px; color:var(--muted); cursor:pointer; }
.remember input{ accent-color:var(--purple); width:15px; height:15px; }
.forgot-link{ color:var(--purple); text-decoration:none; }
.forgot-link:hover{ color:var(--magenta); }

.auth-submit{ width:100%; justify-content:center; display:flex; margin-bottom:20px; }

.divider{ display:flex; align-items:center; gap:14px; margin:20px 0; color:var(--muted-dim); font-size:.76rem; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--panel-line); }

.social-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.social-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(255,255,255,0.03); border:1px solid var(--panel-line); border-radius:12px;
  padding:12px; color:var(--lavender); font-family:var(--font-fa); font-size:.83rem; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .18s ease; text-decoration:none;
}
.social-btn:hover{ border-color:rgba(139,92,246,0.55); background:rgba(139,92,246,0.08); transform:translateY(-2px); }

.auth-switch{ text-align:center; font-size:.85rem; color:var(--muted); }
.auth-switch a{ color:var(--purple); text-decoration:none; font-weight:600; }
.auth-switch a:hover{ color:var(--magenta); }

.terms-row{ display:flex; align-items:flex-start; gap:9px; font-size:.78rem; color:var(--muted); margin-bottom:22px; line-height:1.6; }
.terms-row input{ accent-color:var(--purple); width:15px; height:15px; margin-top:2px; flex-shrink:0; }
.terms-row a{ color:var(--purple); text-decoration:none; }
.terms-row a:hover{ color:var(--magenta); }

.auth-back{
  display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none;
  font-size:.85rem; transition:color .2s ease;
}
.auth-back:hover{ color:var(--lavender); }

/* ---------- gaming character (SVG) ---------- */
.character{ display:block; }
.character .character-body{
  transform-box:fill-box; transform-origin:center;
  animation:char-bob 3.4s ease-in-out infinite;
}
@keyframes char-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.character .antenna-dot{ animation:pulse 1.8s ease-in-out infinite; }
.character .eye{
  transform-box:fill-box; transform-origin:center;
  animation:char-blink 4.6s ease-in-out infinite;
}
.character .eye-right{ animation-delay:.08s; }
@keyframes char-blink{ 0%,90%,100%{ transform:scaleY(1); } 94%{ transform:scaleY(.08); } }
.character .pupil{
  transition:transform .15s ease;
  transform:translate(var(--pupil-x,0px), var(--pupil-y,0px));
}
.character .hand{
  transform-box:fill-box; transform-origin:center;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1);
}
.character .mouth-normal{ opacity:1; transition:opacity .25s ease; }
.character .mouth-surprised{ opacity:0; transition:opacity .25s ease; }
.character.password-focus .hand-left{ transform:translate(34px,-46px) rotate(18deg) scale(1.1); }
.character.password-focus .hand-right{ transform:translate(-34px,-46px) rotate(-18deg) scale(1.1); }
.character.password-focus .eye{ animation:none; transform:scaleY(.05); }
.character.password-focus .mouth-normal{ opacity:0; }
.character.password-focus .mouth-surprised{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .character .character-body, .character .antenna-dot, .character .eye{ animation:none !important; }
}

/* ==================== preference chips (age / gender selectors) ==================== */
.pref-block{ margin-bottom:20px; }
.pref-block:last-of-type{ margin-bottom:0; }
.pref-block .pref-title{ display:block; font-size:.8rem; color:var(--muted); margin-bottom:10px; }
.pref-row{ display:flex; flex-wrap:wrap; gap:8px; }
.pref-row .chip{ margin:0; }
.pref-row .chip.active{ color:var(--lavender); border-color:var(--purple); background:rgba(139,92,246,0.14); }

/* ==================== profile page ==================== */
.profile-wrap{ padding:60px 6vw 100px; max-width:980px; margin:0 auto; }
.profile-header{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--panel-line); border-radius:22px;
  padding:28px; backdrop-filter:blur(10px); margin-bottom:28px; position:relative;
}
.profile-avatar{
  width:88px; height:88px; border-radius:50%; flex-shrink:0; position:relative;
  background:radial-gradient(circle at 32% 28%, #c9adff, var(--purple) 45%, var(--purple-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-tech); font-size:1.9rem; font-weight:700; color:#fff;
  box-shadow:0 0 0 3px rgba(139,92,246,0.2);
}
.avatar-edit{
  position:absolute; bottom:-2px; left:-2px; width:30px; height:30px; border-radius:50%;
  background:var(--panel-solid); border:1px solid var(--panel-line); color:var(--lavender);
  font-size:.8rem; cursor:pointer; transition:border-color .2s ease;
}
.avatar-edit:hover{ border-color:var(--purple); }
.profile-info h1{ font-size:1.2rem; font-weight:800; margin-bottom:5px; }
.profile-info p{ font-size:.82rem; color:var(--muted); }
.profile-stats{ display:flex; gap:22px; margin-top:12px; flex-wrap:wrap; }
.profile-stats div{ font-family:var(--font-tech); font-size:.78rem; color:var(--muted-dim); }
.profile-stats b{ display:block; color:var(--lavender); font-size:1rem; }

.profile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.profile-card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
  padding:26px; backdrop-filter:blur(10px);
}
.profile-card h3{ font-size:1rem; font-weight:700; margin-bottom:20px; }
.field textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--panel-line);
  border-radius:12px; padding:13px 16px; color:var(--lavender); font-family:var(--font-fa);
  font-size:.88rem; resize:vertical; min-height:88px;
  transition:border-color .2s ease, background .2s ease;
}
.field textarea:focus{ outline:none; border-color:var(--purple); background:rgba(139,92,246,0.05); }
.field-note{ font-size:.74rem; color:var(--muted-dim); margin-top:6px; display:block; }
.profile-save{ margin-top:22px; display:flex; justify-content:flex-end; }

@media (max-width:820px){
  .profile-grid{ grid-template-columns:1fr; }
  .profile-header{ text-align:center; justify-content:center; }
}

/* ==================== admin dashboard ==================== */
.admin-shell{ display:flex; min-height:100vh; align-items:stretch; }
.admin-sidebar{
  width:250px; flex-shrink:0; background:var(--panel-solid); border-left:1px solid var(--panel-line);
  padding:24px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:2;
}
.admin-logo{
  display:flex; align-items:center; gap:10px; font-family:var(--font-tech); font-weight:700;
  font-size:1.1rem; color:var(--lavender); text-decoration:none; padding:0 6px 24px;
  border-bottom:1px solid var(--panel-line); margin-bottom:18px;
}
.admin-nav{ list-style:none; display:flex; flex-direction:column; gap:3px; flex:1; }
.admin-nav a{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px;
  color:var(--muted); text-decoration:none; font-size:.88rem;
  transition:background .2s ease, color .2s ease;
}
.admin-nav a .ic{ font-size:1rem; width:20px; text-align:center; }
.admin-nav a:hover{ background:rgba(139,92,246,0.08); color:var(--lavender); }
.admin-nav a.active{ background:rgba(139,92,246,0.14); color:var(--lavender); border:1px solid rgba(139,92,246,0.3); }
.admin-nav .section-label{ font-size:.7rem; color:var(--muted-dim); letter-spacing:1.5px; padding:16px 12px 6px; font-family:var(--font-tech); }
.admin-logout{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px;
  color:var(--muted); text-decoration:none; font-size:.88rem; border-top:1px solid var(--panel-line); margin-top:10px; padding-top:16px;
  transition:color .2s ease;
}
.admin-logout:hover{ color:var(--magenta); }

.admin-main{ flex:1; min-width:0; padding:28px 32px 60px; }
.admin-topbar{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.admin-search{
  flex:1; max-width:360px; background:var(--panel); border:1px solid var(--panel-line);
  border-radius:12px; padding:11px 16px; color:var(--lavender); font-family:var(--font-fa);
  font-size:.85rem; backdrop-filter:blur(10px);
}
.admin-search::placeholder{ color:var(--muted-dim); }
.admin-top-right{ display:flex; align-items:center; gap:16px; }
.admin-bell{ position:relative; background:none; border:1px solid var(--panel-line); border-radius:10px; width:38px; height:38px; color:var(--muted); cursor:pointer; font-size:1rem; }
.admin-bell .dot{ position:absolute; top:6px; left:8px; width:7px; height:7px; border-radius:50%; background:var(--magenta); }
.admin-user{ display:flex; align-items:center; gap:10px; }
.admin-user .av{ width:36px; height:36px; border-radius:50%; background:linear-gradient(155deg,#4c1d95,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; }
.admin-user span{ font-size:.85rem; color:var(--muted); }

.admin-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; }
.astat{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:16px; padding:20px;
  backdrop-filter:blur(10px);
}
.astat .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.astat .ic{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(139,92,246,0.12); font-size:1.05rem;
}
.astat .delta{ font-family:var(--font-tech); font-size:.72rem; color:var(--online); }
.astat .delta.down{ color:#f87171; }
.astat .value{ font-family:var(--font-tech); font-size:1.55rem; font-weight:700; color:var(--lavender); margin-bottom:4px; }
.astat .label{ font-size:.8rem; color:var(--muted); }

.admin-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; margin-bottom:24px; align-items:start; }
.admin-panel{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:18px;
  padding:22px; backdrop-filter:blur(10px);
}
.admin-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.admin-panel-head h3{ font-size:.98rem; font-weight:700; }
.admin-panel-head .see-all{ font-size:.78rem; }

.bar-chart{ display:flex; align-items:flex-end; gap:14px; height:170px; padding-top:10px; }
.bar-chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bar-chart .bar{
  width:100%; max-width:30px; border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg, var(--purple), var(--purple-deep));
}
.bar-chart .col.peak .bar{ background:linear-gradient(180deg, var(--magenta), var(--purple)); }
.bar-chart .col span{ font-size:.7rem; color:var(--muted-dim); font-family:var(--font-tech); }

.donut-wrap{ display:flex; align-items:center; gap:20px; justify-content:center; flex-wrap:wrap; }
.donut{
  width:120px; height:120px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--purple) 0% 55%, var(--magenta) 55% 78%, var(--panel-line) 78% 100%);
  position:relative;
}
.donut::before{
  content:''; position:absolute; inset:16px; border-radius:50%; background:var(--panel-solid);
}
.donut-legend{ display:flex; flex-direction:column; gap:10px; font-size:.8rem; color:var(--muted); }
.donut-legend .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-left:7px; }

.admin-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.admin-table-wrap{ overflow-x:auto; }
.admin-table th{ text-align:right; color:var(--muted-dim); font-weight:600; font-size:.76rem; padding:10px 12px; border-bottom:1px solid var(--panel-line); font-family:var(--font-tech); white-space:nowrap; }
.admin-table td{ padding:13px 12px; border-bottom:1px solid var(--panel-line); color:var(--muted); white-space:nowrap; }
.admin-table tr:last-child td{ border-bottom:none; }
.u-cell{ display:flex; align-items:center; gap:10px; }
.u-cell .av{ width:32px; height:32px; border-radius:50%; background:linear-gradient(155deg,#4c1d95,#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#fff; flex-shrink:0; }
.u-cell .name{ color:var(--lavender); font-weight:600; }
.status-pill{ font-family:var(--font-tech); font-size:.7rem; padding:4px 11px; border-radius:100px; display:inline-block; }
.status-pill.active{ background:rgba(34,197,94,0.12); color:var(--online); border:1px solid rgba(34,197,94,0.3); }
.status-pill.pending{ background:rgba(245,196,81,0.12); color:#f5c451; border:1px solid rgba(245,196,81,0.3); }
.status-pill.banned{ background:rgba(248,113,113,0.12); color:#f87171; border:1px solid rgba(248,113,113,0.3); }
.row-actions{ display:flex; gap:6px; }
.row-actions button{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--panel-line); background:rgba(255,255,255,0.03);
  color:var(--muted); cursor:pointer; font-size:.75rem; transition:border-color .2s ease, color .2s ease;
}
.row-actions button:hover{ border-color:var(--purple); color:var(--lavender); }

@media (max-width:1150px){
  .admin-stats{ grid-template-columns:repeat(2,1fr); }
  .admin-grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{
    width:100%; height:auto; position:relative; flex-direction:row; align-items:center;
    overflow-x:auto; padding:14px 16px; gap:6px; border-left:none; border-bottom:1px solid var(--panel-line);
  }
  .admin-logo{ border-bottom:none; padding:0 12px 0 0; margin-bottom:0; flex-shrink:0; }
  .admin-nav{ flex-direction:row; flex:none; }
  .admin-nav .section-label{ display:none; }
  .admin-nav a{ white-space:nowrap; }
  .admin-logout{ border-top:none; margin-top:0; padding-top:0; flex-shrink:0; }
  .admin-main{ padding:22px 5vw 50px; }
}
@media (max-width:600px){
  .admin-stats{ grid-template-columns:1fr 1fr; }
  .admin-topbar{ flex-direction:column; align-items:stretch; }
  .admin-search{ max-width:none; }
}


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

.match-page{min-height:calc(100vh - 90px);display:flex;align-items:center;justify-content:center;padding:40px 6vw 80px}
.match-card{width:min(100%,760px);background:var(--panel);border:1px solid var(--panel-line);border-radius:24px;padding:42px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.28);backdrop-filter:blur(16px)}
.match-card h1{font-size:clamp(1.5rem,4vw,2.25rem);margin:18px 0 10px}.match-card p{color:var(--muted);line-height:1.9}
.match-game{display:inline-flex;align-items:center;gap:8px;color:var(--purple);font-family:var(--font-tech);font-size:.82rem;border:1px solid var(--panel-line);padding:7px 14px;border-radius:999px}
.match-spinner{width:74px;height:74px;border-radius:50%;border:4px solid rgba(139,92,246,.16);border-top-color:var(--purple);border-right-color:var(--magenta);margin:0 auto;animation:matchSpin 1s linear infinite}
@keyframes matchSpin{to{transform:rotate(360deg)}}.match-dots{display:flex;justify-content:center;gap:6px;margin-top:20px}.match-dots span{width:7px;height:7px;border-radius:50%;background:var(--purple);animation:matchDot 1.2s infinite ease-in-out}.match-dots span:nth-child(2){animation-delay:.15s}.match-dots span:nth-child(3){animation-delay:.3s}@keyframes matchDot{0%,80%,100%{transform:scale(.6);opacity:.35}40%{transform:scale(1);opacity:1}}
.match-profile{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;text-align:right;margin:26px 0;padding:22px;border:1px solid var(--panel-line);border-radius:18px;background:rgba(255,255,255,.025)}
.match-avatar{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(145deg,#4c1d95,#d946ef);box-shadow:0 0 30px rgba(139,92,246,.28)}
.match-profile h2{font-size:1.35rem;margin-bottom:8px}.match-profile .sub{color:var(--muted);font-size:.85rem;margin-bottom:14px}.match-links{display:flex;flex-wrap:wrap;gap:10px}.match-link{padding:9px 12px;border:1px solid var(--panel-line);border-radius:10px;color:var(--lavender);text-decoration:none;font-size:.8rem;background:rgba(255,255,255,.025)}.match-link:hover{border-color:var(--purple);background:rgba(139,92,246,.08)}.match-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.match-tag{font-size:.72rem;color:var(--muted);border:1px solid var(--panel-line);padding:5px 10px;border-radius:999px}
@media(max-width:600px){.match-card{padding:28px 18px}.match-profile{grid-template-columns:1fr;text-align:center}.match-avatar{margin:auto}.match-links{justify-content:center}}

/* ---------- header social icons ---------- */
.header-socials{display:flex;align-items:center;gap:7px;margin-inline:4px}
.header-socials a{width:36px;height:36px;border:1px solid var(--panel-line);border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:rgba(255,255,255,.025);transition:.2s ease;text-decoration:none}
.header-socials svg{width:19px;height:19px;display:block}
.header-socials a:hover{color:#fff;border-color:rgba(139,92,246,.65);background:rgba(139,92,246,.1);transform:translateY(-1px)}
.header-socials .hs-instagram:hover{color:#f472b6}.header-socials .hs-discord:hover{color:#818cf8}.header-socials .hs-youtube:hover{color:#f87171}.header-socials .hs-telegram:hover{color:#38bdf8}

/* ---------- hero floating controller ---------- */
.hero-controller{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:controllerFloat 3.4s ease-in-out infinite;z-index:3;pointer-events:none}
.hero-controller svg{width:54%;height:auto;filter:drop-shadow(0 12px 15px rgba(0,0,0,.35))}
.controller-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.95),rgba(221,214,254,.72) 35%,rgba(167,139,250,.38) 70%,rgba(139,92,246,.05));box-shadow:0 0 14px rgba(221,214,254,.3);opacity:.9;animation:bubbleBump 2.7s ease-in-out infinite}
.controller-bubble.b1{width:17px;height:17px;left:22%;top:18%;animation-delay:-.4s}.controller-bubble.b2{width:12px;height:12px;right:18%;top:27%;animation-delay:-1.4s}.controller-bubble.b3{width:9px;height:9px;right:25%;bottom:18%;animation-delay:-2s}
@keyframes controllerFloat{0%,100%{transform:translateY(-3px) rotate(-2deg)}50%{transform:translateY(7px) rotate(2deg)}}
@keyframes bubbleBump{0%,100%{transform:translate(0,0) scale(.92);opacity:.65}45%{transform:translate(9px,-8px) scale(1.12);opacity:1}75%{transform:translate(-5px,6px) scale(.98);opacity:.78}}


/* ---------- premium 3D matte game controller ---------- */
.hero-controller{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:controllerFloat 3.4s ease-in-out infinite;z-index:3;pointer-events:none;perspective:900px}
.controller-3d{position:relative;width:72%;max-width:330px;aspect-ratio:1.62/1;transform-style:preserve-3d;filter:drop-shadow(0 24px 22px rgba(0,0,0,.48));animation:cgControllerTilt 5s ease-in-out infinite}
.cg-controller-face{position:absolute;inset:7% 5% 9%;border-radius:34% 34% 28% 28%/32% 32% 35% 35%;background:linear-gradient(145deg,#6a5686,#211a2d 48%,#0d0a12);border:1px solid rgba(210,190,245,.16);box-shadow:inset 0 3px 2px rgba(255,255,255,.1),inset 0 -14px 22px rgba(0,0,0,.45),0 8px 0 #17111f,0 17px 24px rgba(0,0,0,.35);transform:translateZ(18px);overflow:hidden}
.cg-controller-face:before{content:"";position:absolute;inset:4px;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.09),transparent 28%,transparent 70%,rgba(139,92,246,.12))}
.cg-controller-top{position:absolute;left:25%;right:25%;top:8%;height:21%;border-radius:18px 18px 38% 38%;background:linear-gradient(180deg,#403253,#1b1526);box-shadow:inset 0 2px 4px rgba(255,255,255,.08),0 3px 6px rgba(0,0,0,.25)}
.cg-touchpad{position:absolute;left:36%;top:19%;width:28%;height:20%;border-radius:12px;background:linear-gradient(145deg,#4b3c60,#17121f);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 2px 5px rgba(255,255,255,.06),0 4px 8px rgba(0,0,0,.25)}
.cg-lightbar{position:absolute;left:38%;right:38%;top:15%;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,#b78cff,#e4d4ff,#b78cff,transparent);box-shadow:0 0 12px rgba(167,139,250,.75)}
.cg-grip{position:absolute;width:31%;height:53%;bottom:0;background:linear-gradient(155deg,#4a3b5d,#1b1525 54%,#0e0b13);border:1px solid rgba(205,183,240,.12);box-shadow:inset 0 8px 15px rgba(255,255,255,.04),inset 0 -15px 20px rgba(0,0,0,.38),0 9px 0 #15101c;transform:translateZ(7px)}
.cg-grip-left{left:4%;border-radius:42% 18% 55% 42%;transform:rotate(8deg) translateZ(7px)}.cg-grip-right{right:4%;border-radius:18% 42% 42% 55%;transform:rotate(-8deg) translateZ(7px)}
.cg-dpad{position:absolute;left:20%;top:47%;width:17%;height:25%}.cg-dpad:before,.cg-dpad:after{content:"";position:absolute;background:linear-gradient(145deg,#2f263c,#100d16);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 2px rgba(255,255,255,.06),0 3px 5px rgba(0,0,0,.35);border-radius:5px}.cg-dpad:before{left:34%;top:0;width:32%;height:100%}.cg-dpad:after{left:0;top:34%;width:100%;height:32%}
.cg-stick{position:absolute;width:13%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#665579,#211a2c 55%,#0d0a11);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 4px 5px rgba(255,255,255,.06),0 4px 7px rgba(0,0,0,.4)}.cg-stick:before{content:"";position:absolute;inset:15%;border-radius:50%;border:1px solid rgba(0,0,0,.45)}.cg-stick-left{left:34%;top:57%}.cg-stick-right{right:34%;top:57%}.cg-stick i{position:absolute;inset:28%;border-radius:50%;background:#15101d}
.cg-buttons{position:absolute;right:18%;top:43%;width:19%;height:25%;display:grid;grid-template-columns:1fr 1fr;gap:7px;place-items:center}.cg-buttons span{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;color:#bda3e9;font-size:10px;font-weight:800;background:linear-gradient(145deg,#4c3b61,#15101d);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 2px 3px rgba(255,255,255,.08),0 3px 5px rgba(0,0,0,.38)}
.cg-option,.cg-create{position:absolute;top:47%;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;color:#8d79a8;font-size:8px;background:#191321;box-shadow:inset 0 2px 3px rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.35)}.cg-option{left:32%}.cg-create{right:32%}
@keyframes cgControllerTilt{0%,100%{transform:rotateX(8deg) rotateY(-9deg) rotateZ(-2deg) translateY(0)}50%{transform:rotateX(12deg) rotateY(7deg) rotateZ(1deg) translateY(-7px)}}
@media (max-width:700px){.theme-toggle{left:16px;bottom:16px;width:52px;height:52px}}

/* ---------- floating FAQ chat ---------- */
.faq-float{position:fixed;right:22px;bottom:22px;z-index:300;direction:rtl}
.faq-toggle{width:58px;height:58px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:#fff;font-size:24px;cursor:pointer;box-shadow:0 0 28px rgba(139,92,246,.5)}
.faq-panel{position:absolute;right:0;bottom:70px;width:min(360px,calc(100vw - 30px));background:rgba(13,8,24,.97);border:1px solid rgba(139,92,246,.28);border-radius:20px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);opacity:0;transform:translateY(12px) scale(.97);pointer-events:none;transition:.2s ease;backdrop-filter:blur(16px)}
.faq-float.open .faq-panel{opacity:1;transform:none;pointer-events:auto}
.faq-panel h3{margin:0 0 12px;font-size:1rem}.faq-list{display:flex;flex-direction:column;gap:8px}.faq-question{width:100%;text-align:right;border:1px solid var(--panel-line);background:rgba(255,255,255,.025);color:var(--lavender);border-radius:12px;padding:11px 12px;font-family:inherit;cursor:pointer}.faq-question:hover{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.08)}
.faq-answer{margin-top:10px;padding:12px;border-radius:12px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);color:var(--muted);font-size:.84rem;line-height:1.9;display:none}.faq-answer.show{display:block}

/* ---------- support ---------- */
.support-btn{white-space:nowrap;text-decoration:none!important;padding:9px 15px!important}
.support-page{padding:65px 6vw 100px}.support-shell{max-width:850px;margin:auto}.support-head{text-align:center;margin-bottom:35px}.support-head .tag{font-family:var(--font-tech);letter-spacing:3px;color:var(--purple);font-size:.75rem}.support-head h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:10px 0}.support-head p{color:var(--muted)}
.ticket-card{background:var(--panel);border:1px solid var(--panel-line);border-radius:22px;padding:26px;backdrop-filter:blur(10px)}
.ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ticket-field{display:flex;flex-direction:column;gap:8px}.ticket-field.full{grid-column:1/-1}.ticket-field label{font-size:.82rem;color:var(--lavender)}.ticket-field select,.ticket-field input,.ticket-field textarea{width:100%;border:1px solid var(--panel-line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--lavender);padding:12px;font-family:inherit;outline:none}.ticket-field textarea{min-height:150px;resize:vertical}.ticket-field select:focus,.ticket-field input:focus,.ticket-field textarea:focus{border-color:rgba(139,92,246,.6)}
.ticket-success{display:none;text-align:center;padding:28px}.ticket-success.show{display:block}.ticket-success h2{margin-bottom:10px}.ticket-success p{color:var(--muted);line-height:1.8}
.ticket-done{display:none;margin-top:14px}.ticket-done.show{display:inline-flex}
@media(max-width:700px){.header-socials{gap:4px}.header-socials a{width:32px;height:32px;border-radius:9px}.header-socials svg{width:17px;height:17px}.faq-float{right:14px;bottom:14px}.ticket-grid{grid-template-columns:1fr}.ticket-field.full{grid-column:auto}.support-btn{font-size:.78rem!important;padding:8px 11px!important}}

/* final navigation/support polish */
.nav-actions a,.nav-actions button{ text-decoration:none !important; border-bottom:none !important; }
.ticket-field select{ color:#c4b5fd; background:rgba(91,33,182,.18); border-color:rgba(139,92,246,.45); color-scheme:dark; }
.ticket-field select option{ background:#241044; color:#e9d5ff; }
.ticket-field select option:checked{ background:#7c3aed; color:#fff; }
.ticket-field select:focus{ border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.12); }
@media(max-width:700px){ .nav-online{display:flex;} .nav-actions{gap:7px;} }

/* final mobile header spacing + matte floating controller */
@media (max-width:980px){
  .nav{align-items:center;}
  .nav-actions{
    order:2;
    width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    justify-content:flex-start;
    padding:2px 0 6px;
    scrollbar-width:none;
    position:relative;
    z-index:220;
  }
  .nav-actions::-webkit-scrollbar{display:none;}
  .nav-actions > *{flex:0 0 auto;}
  .nav-links{order:3; position:relative; z-index:210;}
}
@media (max-width:600px){
  .nav-actions{gap:7px; padding-bottom:8px;}
  .nav-links{padding-top:3px;}
}

.hero-controller{animation:controllerFloat 3.8s ease-in-out infinite; transform-origin:center center;}
.hero-controller svg{filter:drop-shadow(0 9px 12px rgba(0,0,0,.28)); opacity:.9;}
.controller-bubble{background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.75),rgba(221,214,254,.45) 35%,rgba(167,139,250,.25) 70%,rgba(139,92,246,.04)); box-shadow:0 0 10px rgba(221,214,254,.2);}
.controller-bubble.b4{width:8px;height:8px;left:34%;top:12%;animation-delay:-.9s}.controller-bubble.b5{width:14px;height:14px;left:12%;top:38%;animation-delay:-1.8s}.controller-bubble.b6{width:7px;height:7px;left:30%;bottom:12%;animation-delay:-2.5s}.controller-bubble.b7{width:10px;height:10px;right:34%;top:10%;animation-delay:-1.1s}.controller-bubble.b8{width:6px;height:6px;right:11%;top:50%;animation-delay:-2.2s}.controller-bubble.b9{width:11px;height:11px;right:36%;bottom:10%;animation-delay:-.6s}
@keyframes controllerFloat{0%,100%{transform:translate3d(-2px,-5px,0) rotate(-3deg)}25%{transform:translate3d(3px,2px,0) rotate(1deg)}50%{transform:translate3d(-1px,9px,0) rotate(3deg)}75%{transform:translate3d(-4px,1px,0) rotate(-1deg)}}
@keyframes bubbleBump{0%,100%{transform:translate(0,0) scale(.88);opacity:.55}35%{transform:translate(7px,-6px) scale(1.08);opacity:.95}65%{transform:translate(-7px,7px) scale(.96);opacity:.72}85%{transform:translate(3px,-2px) scale(1);opacity:.62}}

/* profile presence dot */
.profile-name-row{display:flex;align-items:center;gap:10px}
.profile-presence-dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 11px;box-shadow:0 0 12px currentColor}
.profile-presence-dot.online{background:#22c55e;color:#22c55e}.profile-presence-dot.sleep{background:#f59e0b;color:#f59e0b}.profile-presence-dot.offline{background:#ef4444;color:#ef4444}
.status-auto-note{margin-top:12px;color:var(--muted);font-size:.76rem}


/* ---------- theme switcher: bottom-left, opposite FAQ ---------- */
.theme-toggle{position:fixed;left:22px;bottom:22px;z-index:301;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:linear-gradient(145deg,rgba(139,92,246,.95),rgba(55,30,95,.98));color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 28px rgba(0,0,0,.34),0 0 24px rgba(139,92,246,.3);transition:transform .2s ease,filter .25s ease}
.theme-toggle:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.12)}
.theme-toggle svg{width:24px;height:24px}

/* Light theme: keep the white surfaces alive with soft purple ambient halos. */
html[data-theme="light"] body{
  background:
    radial-gradient(ellipse 720px 520px at 8% 12%, rgba(124,58,237,.14), transparent 64%),
    radial-gradient(ellipse 760px 560px at 92% 28%, rgba(192,38,211,.11), transparent 66%),
    radial-gradient(ellipse 820px 520px at 48% 92%, rgba(109,40,217,.10), transparent 68%),
    #f8f6ff;
}
html[data-theme="light"] .ambient{
  background:
    radial-gradient(ellipse 900px 540px at 12% 8%, rgba(124,58,237,.16), transparent 62%),
    radial-gradient(ellipse 760px 620px at 96% 24%, rgba(217,70,239,.12), transparent 60%),
    radial-gradient(ellipse 900px 560px at 52% 98%, rgba(109,40,217,.13), transparent 64%),
    radial-gradient(ellipse 520px 420px at 48% 42%, rgba(139,92,246,.055), transparent 68%);
}
html[data-theme="light"] main,
html[data-theme="light"] section{
  background:transparent;
}
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .glass,
html[data-theme="light"] .chat-shell,
html[data-theme="light"] .support-card{
  box-shadow:0 18px 55px rgba(91,33,182,.08), 0 0 0 1px rgba(124,58,237,.045);
}



/* ---------- desktop flying purple headset intro ---------- */
.cg-flying-headset-intro{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  overflow:hidden;
  background:transparent;
  opacity:1;
  visibility:visible;
  animation:cgIntroOverlay 8s ease-in-out forwards;
  will-change:opacity,visibility;
}
.cg-headset-flight{
  position:absolute;
  width:min(820px,78vw);
  left:-72vw;
  top:24vh;
  aspect-ratio:1664 / 1024;
  transform-origin:70% 52%;
  animation:cgFlyingHeadset 7.65s cubic-bezier(.18,.72,.24,1) 0.05s both;
  will-change:transform,opacity;
}
.cg-headset-main,
.cg-headset-wing{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(168,85,247,.48));
}
.cg-headset-wing{
  clip-path:polygon(36% 14%,66% 15%,73% 25%,70% 39%,63% 48%,51% 47%,43% 41%,38% 32%);
  transform-origin:68% 27%;
  animation:cgWingFlap .32s ease-in-out infinite;
  filter:drop-shadow(0 0 15px rgba(192,80,255,.5));
}
@keyframes cgWingFlap{
  0%,100%{transform:rotate(10deg) scaleY(.86) skewX(-2deg)}
  22%{transform:rotate(2deg) scaleY(.98) skewX(0)}
  48%{transform:rotate(-12deg) scaleY(1.13) skewX(3deg)}
  72%{transform:rotate(-3deg) scaleY(.98) skewX(1deg)}
}
@keyframes cgFlyingHeadset{
  0%{
    transform:translate3d(-12vw,22vh,0) rotate(-13deg) scale(.52);
    opacity:0;
  }
  7%{opacity:1}
  20%{
    transform:translate3d(12vw,13vh,0) rotate(5deg) scale(.63);
  }
  38%{
    transform:translate3d(37vw,7vh,0) rotate(-4deg) scale(.76);
  }
  56%{
    transform:translate3d(62vw,1vh,0) rotate(5deg) scale(.88);
  }
  74%{
    transform:translate3d(86vw,-2vh,0) rotate(10deg) scale(.98);
    opacity:1;
  }
  92%{
    transform:translate3d(118vw,-14vh,0) rotate(15deg) scale(1.05);
    opacity:1;
  }
  100%{
    transform:translate3d(154vw,-34vh,0) rotate(20deg) scale(1.12);
    opacity:0;
  }
}
@keyframes cgIntroOverlay{
  0%,94%{opacity:1}
  100%{opacity:0;visibility:hidden}
}

/* Mobile: completely disable the intro; desktop keeps it. */
@media (max-width:980px){
  .cg-flying-headset-intro{display:none !important}
}

/* ---------- proper mobile hamburger drawer ---------- */
@media (max-width:980px){
  .nav{
    position:relative;
    z-index:400;
    isolation:isolate;
    flex-wrap:nowrap;
    row-gap:0;
    padding-top:12px;
    padding-bottom:12px;
  }

  .nav-actions{
    order:2;
    width:auto;
    min-width:0;
    overflow:visible;
    padding:0;
    margin-right:auto;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .nav-actions > .btn{display:none !important}
  .menu-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:1px solid var(--panel-line);
    border-radius:13px;
    background:rgba(139,92,246,.10);
    color:var(--lavender);
    font-size:1.25rem;
    cursor:pointer;
    box-shadow:0 8px 25px rgba(0,0,0,.18);
  }

  .nav-links{
    position:fixed;
    top:0;
    right:0;
    width:min(88vw,360px);
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:410;
    order:initial;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:76px 16px 24px;
    background:rgba(13,8,24,.995);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    pointer-events:auto;
    border-left:1px solid rgba(139,92,246,.22);
    box-shadow:-24px 0 70px rgba(0,0,0,.45);
    transform:translateX(105%) !important;
    transition:transform .32s cubic-bezier(.2,.8,.2,1);
  }

  .nav-links.open{
    transform:translateX(0) !important;
  }

  .nav-links > li{
    width:100%;
    flex:0 0 auto;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.055);
    border-radius:0;
    background:transparent;
  }

  .nav-links > li > a{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    padding:14px 12px;
    font-size:.92rem;
    color:var(--lavender);
    border-radius:11px;
  }

  .nav-links > li > a:hover,
  .nav-links > li > a:focus-visible{
    background:rgba(139,92,246,.09);
    transform:none;
  }

  .nav-links .drawer-head-li{
    display:flex;
    position:absolute;
    top:16px;
    left:16px;
    width:auto;
    border:0;
  }

  .drawer-close{
    width:40px;
    height:40px;
    border:1px solid var(--panel-line);
    border-radius:11px;
    background:rgba(255,255,255,.035);
    color:var(--lavender);
    cursor:pointer;
    font-size:1.05rem;
  }

  .nav-item{
    position:relative;
    display:block;
  }

  .nav-item > a{
    width:calc(100% - 44px) !important;
  }

  .acc-toggle{
    display:flex !important;
    position:absolute;
    left:6px;
    top:6px;
    width:38px;
    height:38px;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font-size:1.05rem;
    transition:transform .2s ease, background .2s ease;
  }

  .nav-item.open .acc-toggle{
    transform:rotate(180deg);
    background:rgba(139,92,246,.08);
    color:var(--lavender);
  }

  .dropdown{
    position:static;
    min-width:0;
    max-height:0 !important;
    overflow:hidden;
    padding:0 8px;
    margin:0 6px 0 0;
    background:rgba(139,92,246,.045);
    border:0;
    border-radius:12px;
    opacity:0;
    pointer-events:none;
    transform:none;
    transition:max-height .25s ease, opacity .2s ease, padding .25s ease;
  }

  .nav-item.open .dropdown{
    max-height:420px !important;
    padding:6px 8px;
    opacity:1;
    pointer-events:auto;
  }

  .dropdown a,
  .nav-item.open .dropdown a{
    display:block;
    padding:10px 9px;
    color:var(--muted);
    font-size:.82rem;
    transform:none;
    opacity:1;
  }

  .nav-links .mobile-extra{display:block !important}
  .nav-overlay{
    display:block !important;
    position:fixed;
    inset:0;
    z-index:390;
    background:rgba(0,0,0,.55);
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s ease;
  }
  .nav-overlay.open{
    opacity:1;
    pointer-events:auto;
  }

  body.nav-open{overflow:hidden}
}

@media (max-width:480px){
  .nav-links{width:min(92vw,340px)}
}


/* ===== PREMIUM 3D GAMING TYPOGRAPHY ===== */
:root{
  --cg-purple-1:#f1eaff;
  --cg-purple-2:#c4a2ff;
  --cg-purple-3:#8b5cf6;
  --cg-purple-4:#5b21b6;
  --cg-purple-glow:rgba(139,92,246,.42);
}
body,button,input,select,textarea{
  font-family:"Segoe UI","Arial",sans-serif;
  letter-spacing:.01em;
}
h1,h2,h3,.hero-title,.section-title,.page-title,.card-title{
  font-weight:900;
  letter-spacing:-.025em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 2px 0 rgba(91,33,182,.75),
    0 4px 10px rgba(0,0,0,.42),
    0 0 24px var(--cg-purple-glow);
}
.hero-title,h1{
  background:linear-gradient(180deg,
    var(--cg-purple-1) 0%,
    #d7c2ff 25%,
    #a78bfa 54%,
    #7c3aed 78%,
    var(--cg-purple-4) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));
}
.section-title,h2{
  color:#eee7ff;
  position:relative;
}
.section-title::after,h2::after{
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin-top:9px;
  border-radius:99px;
  background:linear-gradient(90deg,#a78bfa,#6d28d9,transparent);
  box-shadow:0 0 12px rgba(139,92,246,.55);
}
.nav a,.nav-links a{
  font-weight:700;
  letter-spacing:.015em;
  text-shadow:0 1px 5px rgba(0,0,0,.25);
}
button,.btn,.cta,.nav button{
  font-weight:800;
  letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.12),0 2px 5px rgba(0,0,0,.28);
}
.card-title,.game-title,.product-title{
  font-weight:850;
  color:#eee8ff;
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.42);
}
.badge,.tag,.category,.price{
  font-weight:800;
  letter-spacing:.035em;
}
p,small,.muted,.description,.card-description{
  letter-spacing:.008em;
}
.price,.stat-number,.counter,.score{
  font-variant-numeric:tabular-nums;
  font-weight:900;
  text-shadow:0 1px 0 rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.45),0 0 14px rgba(139,92,246,.22);
}
@media (max-width:980px){
  .hero-title,h1{
    letter-spacing:-.02em;
    text-shadow:0 1px 0 rgba(255,255,255,.12),0 2px 0 rgba(91,33,182,.55),0 4px 10px rgba(0,0,0,.38);
  }
  h2,.section-title{letter-spacing:-.015em;}
}

/* auth backend status */
.auth-message{min-height:0;margin:0 0 14px;border-radius:12px;padding:0;font-size:.82rem;text-align:center;line-height:1.8;}
.auth-message.error,.auth-message.success{padding:10px 12px;border:1px solid var(--panel-line);}
.auth-message.error{color:#ffb4b4;background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.28);}
.auth-message.success{color:#b7ffd5;background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.28);}