/* ============================================================
   THE NEXUS — "Neon Arcade"
   CSS only. All element IDs + .hidden semantics preserved.
   ============================================================ */
:root{
  --bg:#08060f;
  --bg2:#0d0820;
  --cyan:#26e6ff;
  --magenta:#ff36d7;
  --lime:#b6ff3a;
  --text:#ece8fb;
  --muted:#9b93b8;
  --panel:rgba(17,12,32,.92);
  --line:rgba(120,90,200,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---- animated background layers ---- */
.bg-glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 50% -8%, rgba(38,230,255,.16), transparent 70%),
    radial-gradient(ellipse 48% 42% at 88% 8%, rgba(255,54,215,.15), transparent 70%),
    radial-gradient(ellipse 55% 50% at 8% 100%, rgba(182,255,58,.08), transparent 70%);
  animation:glowDrift 14s ease-in-out infinite alternate;
}
@keyframes glowDrift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.08)}}
.bg-grid{
  position:fixed; left:0; right:0; bottom:0; height:46vh; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(120,90,220,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,90,220,.22) 1px, transparent 1px);
  background-size:46px 46px;
  transform:perspective(420px) rotateX(64deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(transparent, #000 80%);
  mask-image:linear-gradient(transparent, #000 80%);
  animation:gridScroll 5s linear infinite;
  opacity:.7;
}
@keyframes gridScroll{from{background-position:0 0}to{background-position:0 46px}}
.bg-scan{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(transparent 0 3px, rgba(0,0,0,.18) 3px 4px);
}

/* ---- header ---- */
header{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px clamp(18px,5vw,54px);
  position:relative; z-index:2;
}
.logo{display:flex; align-items:center; gap:11px}
.logo-mark{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:9px;
  font-size:19px; color:#07060f;
  background:linear-gradient(150deg,var(--cyan),var(--magenta));
  box-shadow:0 0 18px rgba(38,230,255,.55), 0 0 28px rgba(255,54,215,.35);
}
.logo-word{
  font-family:'Anton',sans-serif; font-size:23px; letter-spacing:3px;
  color:#eef0ff; text-shadow:0 0 16px rgba(38,230,255,.5);
}
.logo-word i{font-style:normal; color:var(--cyan)}
#account-chip{display:flex; gap:12px; align-items:center; font-size:14px}
.chip-avatar{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:rgba(38,230,255,.14); color:var(--cyan); font-size:14px;
  border:1px solid rgba(38,230,255,.4);
}
#hdr-name{font-weight:700; color:var(--cyan)}
#hdr-chips{font-weight:700; color:var(--lime); text-shadow:0 0 12px rgba(182,255,58,.4)}
.ghost-btn{
  padding:8px 16px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:9px; color:#c5bee0; font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:.18s;
}
.ghost-btn:hover{background:rgba(255,54,215,.14); border-color:var(--magenta); color:#fff}

/* ---- layout ---- */
main{max-width:1080px; margin:0 auto; padding:0 clamp(18px,5vw,40px) 70px; position:relative; z-index:1}

/* ---- hero ---- */
.hero{text-align:center; padding:42px 0 40px; animation:fadeUp .7s both}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted);
  padding:7px 16px; border-radius:99px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}
.hero h1{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(46px,8.5vw,104px); line-height:.92; letter-spacing:1px;
  margin:20px 0 0; text-transform:uppercase;
  text-shadow:0 0 60px rgba(38,230,255,.25);
}
.hero h1 .hl{
  background:linear-gradient(92deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,54,215,.45));
}
.hero p{margin:20px auto 0; max-width:560px; font-size:17px; line-height:1.65; color:var(--muted)}
.hero-feats{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px}
.feat{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:#cbc4e6;
  padding:8px 15px; border-radius:99px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}
.feat-i{color:var(--cyan); font-weight:700}

/* ---- account panel ---- */
.panel{
  position:relative; isolation:isolate;
  background:var(--panel);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:22px;
  padding:36px clamp(22px,4vw,42px);
  margin:8px auto 60px; max-width:600px; text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  animation:fadeUp .7s .08s both;
  overflow:hidden;
}
.panel-glow{
  position:absolute; left:0; right:0; top:0; height:120px; z-index:-1;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(38,230,255,.18), transparent 70%),
            radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255,54,215,.12), transparent 60%);
  pointer-events:none;
}
.panel h2{font-family:'Anton',sans-serif; font-weight:400; font-size:25px; letter-spacing:2px; text-transform:uppercase; color:#fff}
.muted{font-size:13.5px; color:var(--muted); margin:8px auto 20px; max-width:420px; line-height:1.5}
#auth-forms{display:flex; flex-direction:column; gap:11px; align-items:center}
#auth-forms input,#reset-box input{
  width:min(320px,100%); padding:13px 16px;
  font-family:inherit; font-size:15px; text-align:center; color:var(--text);
  background:rgba(10,8,22,.6);
  border:1.5px solid var(--line); border-radius:11px; outline:none;
  transition:.18s;
}
#auth-forms input::placeholder,#reset-box input::placeholder{color:#6f688a}
#auth-forms input:focus,#reset-box input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(38,230,255,.16), 0 0 22px rgba(38,230,255,.18);
}
.btn-row{display:flex; gap:11px; margin-top:6px; flex-wrap:wrap; justify-content:center}
.gold-btn,.blue-btn{
  font-family:'Space Grotesk',sans-serif;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; font-size:13.5px; font-weight:700; letter-spacing:1.2px;
  border:none; border-radius:12px; cursor:pointer; text-decoration:none;
  color:#06040d; text-transform:uppercase; transition:.18s; position:relative;
  white-space:nowrap;
}
.gold-btn{
  background:linear-gradient(135deg,var(--magenta),#ff7be8);
  box-shadow:0 8px 30px rgba(255,54,215,.4);
}
.blue-btn{
  background:linear-gradient(135deg,var(--cyan),#7af0ff);
  box-shadow:0 8px 30px rgba(38,230,255,.4);
}
.gold-btn:hover,.blue-btn:hover{transform:translateY(-2px) scale(1.02); filter:brightness(1.08)}
.gold-btn:active,.blue-btn:active{transform:translateY(0)}
.big-cta{
  font-size:17px; padding:17px 42px; margin-top:16px; letter-spacing:1.5px;
  animation:ctaPulse 2.2s ease-in-out infinite;
}
.cta-suit{font-size:18px}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 8px 30px rgba(255,54,215,.4)}
  50%{box-shadow:0 8px 30px rgba(255,54,215,.4), 0 0 40px rgba(255,54,215,.55)}
}
#lnk-forgot{font-size:12px; color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--muted); margin-top:2px}
#lnk-forgot:hover{color:var(--cyan); border-color:var(--cyan)}
#auth-status,#reset-status{margin-top:15px; font-size:13px; color:#b7afd4; min-height:18px; line-height:1.5}
#welcome{font-size:19px; line-height:1.5}
#welcome b{color:var(--cyan)}
#welcome .chips{color:var(--lime); font-weight:700; text-shadow:0 0 14px rgba(182,255,58,.4)}
#reset-box{margin-top:24px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:11px; align-items:center}

/* ---- friends ---- */
#friends-box{margin-top:26px; padding-top:20px; border-top:1px solid var(--line); text-align:left}
.fr-title{font-family:'Anton',sans-serif; font-size:15px; letter-spacing:4px; color:var(--muted);
  text-transform:uppercase; text-align:center; margin-bottom:12px}
.fr-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); margin-bottom:7px}
.fr-name{flex:1; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fr-dot{width:9px; height:9px; border-radius:50%; background:#555066; flex:none}
.fr-dot.online{background:#54ff8a; box-shadow:0 0 8px #54ff8a}
.fr-dot.hosting{background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:blink 1.4s ease-in-out infinite}
.fr-btn{flex:none; padding:6px 11px; font-size:12px; font-weight:700; color:#cbc4e6;
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:9px;
  cursor:pointer; text-decoration:none; font-family:inherit; transition:.15s}
.fr-btn:hover{border-color:var(--cyan); color:var(--cyan)}
.fr-btn.ok{color:var(--cyan); border-color:rgba(38,230,255,.45)}
.fr-btn.unread{color:#07060f; background:var(--magenta); border-color:var(--magenta);
  animation:blink 1.4s ease-in-out infinite}
.fr-empty{font-size:13px; color:var(--muted); text-align:center; padding:6px 0 10px}
#fr-add-row{display:flex; gap:8px; margin-top:10px}
#fr-add-row input{flex:1; padding:10px 14px; font-family:inherit; font-size:13.5px; color:var(--text);
  background:rgba(10,8,22,.6); border:1.5px solid var(--line); border-radius:10px; outline:none; text-align:left}
#fr-add-row input:focus{border-color:var(--cyan)}
#fr-add-row button{padding:10px 18px; font-size:12px; font-weight:800; letter-spacing:1px; color:#06040d;
  background:linear-gradient(135deg,var(--cyan),#7af0ff); border:none; border-radius:10px; cursor:pointer}
#fr-status{font-size:12.5px; color:var(--muted); min-height:16px; margin-top:8px; text-align:center}

/* ---- direct messages ---- */
#dm-panel{position:fixed; right:18px; bottom:18px; z-index:50;
  width:min(320px, calc(100vw - 36px));
  display:flex; flex-direction:column;
  background:var(--panel); backdrop-filter:blur(10px);
  border:1px solid rgba(38,230,255,.4); border-radius:16px;
  box-shadow:0 18px 70px rgba(0,0,0,.7); overflow:hidden}
#dm-head{display:flex; justify-content:space-between; align-items:center;
  padding:11px 14px; border-bottom:1px solid var(--line)}
#dm-title{font-weight:700; font-size:14px; color:var(--cyan)}
#dm-close{background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer}
#dm-close:hover{color:#fff}
#dm-msgs{height:240px; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:7px}
.dm-msg{max-width:82%; padding:7px 11px; border-radius:12px 12px 12px 4px;
  font-size:13.5px; line-height:1.45; color:var(--text);
  background:rgba(255,255,255,.07); align-self:flex-start;
  overflow-wrap:break-word; word-break:break-word}
.dm-msg.mine{align-self:flex-end; border-radius:12px 12px 4px 12px;
  background:rgba(38,230,255,.16); border:1px solid rgba(38,230,255,.25)}
#dm-row{display:flex; gap:8px; padding:10px; border-top:1px solid var(--line)}
#dm-row input{flex:1; padding:9px 13px; font-family:inherit; font-size:13.5px; color:var(--text);
  background:rgba(10,8,22,.6); border:1.5px solid var(--line); border-radius:10px; outline:none}
#dm-row input:focus{border-color:var(--cyan)}
#dm-row button{padding:9px 15px; font-size:14px; color:#06040d; font-weight:800;
  background:linear-gradient(135deg,var(--cyan),#7af0ff); border:none; border-radius:10px; cursor:pointer}

/* ---- games ---- */
.section-title{
  text-align:center; font-family:'Anton',sans-serif; font-weight:400;
  font-size:18px; letter-spacing:5px; color:var(--muted); text-transform:uppercase;
  margin:0 0 26px;
}
.games-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.game-card{
  display:flex; flex-direction:column;
  background:linear-gradient(170deg, rgba(26,18,48,.92), rgba(12,8,22,.94));
  border:1.5px solid var(--line); border-radius:18px; overflow:hidden;
  text-decoration:none; color:inherit; position:relative;
  transition:transform .2s, border-color .2s, box-shadow .2s;
  animation:fadeUp .6s both;
}
.games-grid .game-card:nth-child(1){animation-delay:.05s}
.games-grid .game-card:nth-child(2){animation-delay:.12s}
.games-grid .game-card:nth-child(3){animation-delay:.19s}
.games-grid .game-card:nth-child(4){animation-delay:.26s}
.game-card.live:hover{
  transform:translateY(-7px);
  border-color:var(--g);
  box-shadow:0 22px 55px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb, var(--g) 35%, transparent);
}
.game-art{
  position:relative; height:128px;
  display:grid; place-items:center;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--g) 22%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.2));
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.game-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 48%, transparent 60%);
  transform:translateX(-120%);
}
.game-card.live:hover .game-art::after{animation:shimmer .9s ease}
@keyframes shimmer{to{transform:translateX(120%)}}
.emblem{
  font-size:62px; line-height:1; color:var(--g);
  filter:drop-shadow(0 0 18px color-mix(in srgb, var(--g) 60%, transparent));
  transition:transform .25s;
}
.suit-spade,.suit-club{font-family:Georgia,'Times New Roman',serif; font-size:66px}
.game-card.live:hover .emblem{transform:scale(1.12)}
.emblem-21{font-family:'Anton',sans-serif; font-size:54px; letter-spacing:-2px}
.wheel{
  width:74px; height:74px; border-radius:50%;
  background:conic-gradient(#11101e 0 30deg, var(--g) 30deg 60deg, #11101e 60deg 90deg, var(--g) 90deg 120deg, #11101e 120deg 150deg, var(--g) 150deg 180deg, #11101e 180deg 210deg, var(--g) 210deg 240deg, #11101e 240deg 270deg, var(--g) 270deg 300deg, #11101e 300deg 330deg, var(--g) 330deg 360deg);
  border:3px solid color-mix(in srgb, var(--g) 70%, #fff);
  box-shadow:0 0 22px color-mix(in srgb, var(--g) 55%, transparent), inset 0 0 0 12px rgba(8,6,15,.55);
  position:relative;
}
.wheel::after{content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px; border-radius:50%; background:color-mix(in srgb, var(--g) 80%, #fff)}
.game-card.live:hover .wheel{animation:wheelSpin 1.4s linear infinite}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
.live-pill{
  position:absolute; top:12px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:1.5px; color:#dffce0;
  padding:4px 9px; border-radius:99px;
  background:rgba(8,20,12,.7); border:1px solid rgba(120,255,150,.4);
}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:#54ff8a;
  box-shadow:0 0 8px #54ff8a; animation:blink 1.4s ease-in-out infinite;
}
.hero-eyebrow .live-dot{background:var(--cyan); box-shadow:0 0 8px var(--cyan)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.game-body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1}
.game-name{font-family:'Anton',sans-serif; font-weight:400; font-size:21px; letter-spacing:.5px}
.game-desc{font-size:13px; color:var(--muted); line-height:1.5; margin:6px 0 0; flex:1}
.game-cta{
  margin-top:14px; font-size:12px; font-weight:700; letter-spacing:2px;
  color:var(--g); display:flex; align-items:center; gap:6px; text-transform:uppercase;
}
.game-card.live:hover .game-cta{gap:10px}
.game-cta span{transition:transform .2s}

/* ---- footer ---- */
footer{
  text-align:center; padding:30px; font-size:12px; color:#6f688a;
  border-top:1px solid var(--line); position:relative; z-index:1;
}
footer a{color:var(--muted)}
footer a:hover{color:var(--cyan)}

.hidden{display:none !important}

@keyframes fadeUp{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
}
@media (max-width:560px){
  .hero h1{font-size:54px}
  .panel{padding:28px 20px}
}