/* === HexaGameHub: gamer-facing enhancements (modal, ticker, xp, search) === */
:root{
  --hx-glow: 0 0 12px rgba(155,92,243,.55);
  --hx-glow-strong: 0 0 24px rgba(62,130,246,.55);
  --hx-glass: rgba(14,18,40,.85);
  --hx-overlay: rgba(4,6,14,.75);
}

/* subtle neon lines over the hero mesh */
.hero .mesh::after{
  content:"";
  pointer-events:none;
  position:absolute; inset:-2px;
  background:
    repeating-linear-gradient( to bottom, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 2px, transparent 8px ),
    radial-gradient(1200px 600px at 10% -10%, rgba(155,92,243,.12), transparent 60%),
    radial-gradient(900px 500px at 110% 30%, rgba(14,165,233,.10), transparent 60%);
}

/* Trending ticker */
.hx-ticker{
  position:relative; overflow:hidden; white-space:nowrap;
  background:linear-gradient(90deg,var(--bg2),rgba(14,18,40,.7));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  font-size:.95rem; color:var(--muted);
}
.hx-ticker .inner{ display:flex; gap:32px; align-items:center; padding:8px 12px; animation: ticker 22s linear infinite; }
.hx-ticker .item{ display:flex; align-items:center; gap:8px; }
.hx-ticker .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow: var(--hx-glow); }
@keyframes ticker { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* XP bar */
#hx-xp-bar{
  position:relative; top:auto; z-index: inherit;
  backdrop-filter:saturate(120%) blur(6px);
  background:linear-gradient(90deg,rgba(14,18,40,.7), rgba(17,22,46,.7));
  border-bottom:1px solid var(--border);
}
#hx-xp-bar .inner{ max-width:1100px; margin:0 auto; padding:4px 12px; display:flex; align-items:center; gap:12px; }
#hx-xp-bar .label{ font-weight:600; letter-spacing:.02em; font-size:.8rem; color:var(--muted) }
#hx-xp-bar .track{ flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
#hx-xp-bar .fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent2)); box-shadow: var(--hx-glow-strong); transition: width .6s ease, box-shadow .6s ease; }
#hx-xp-bar .lvl{ font-variant-numeric:tabular-nums; font-size:.85rem; color:var(--text) }

/* Details modal */
#hx-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:100; }
#hx-modal.active{ display:flex; }
#hx-modal .backdrop{ position:absolute; inset:0; background:var(--hx-overlay); backdrop-filter: blur(6px); }
#hx-modal .sheet{
  position:relative; width:min(100%, 980px); max-height:90vh; overflow:auto;
  background:var(--hx-glass); border:1px solid var(--border); border-radius:16px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
#hx-modal header{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:linear-gradient(180deg, rgba(10,11,22,.92), rgba(10,11,22,.75));
}
#hx-modal .title{ display:flex; align-items:center; gap:12px; }
#hx-modal .title .badge{ background:rgba(155,92,243,.12); border:1px solid rgba(155,92,243,.35); }
#hx-modal button.icon{ background:transparent; border:1px solid var(--border); color:var(--text); padding:8px; border-radius:10px; cursor:pointer }
#hx-modal button.icon:hover{ border-color:rgba(255,255,255,.2) }

#hx-modal .hero{
  display:grid; grid-template-columns: 1.6fr 1fr; gap:12px; padding:16px;
}
#hx-modal .preview{
  border-radius:12px; overflow:hidden; position:relative; aspect-ratio:16/9;
  background:#080a14 center/cover no-repeat;
  border:1px solid var(--border);
}
#hx-modal .preview::after{
  content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 10% 10%, transparent 40%, rgba(0,0,0,.35));
}
#hx-modal .kinetic{ transform: scale(1.02); transition: transform 10s linear; }
#hx-modal .stats{ display:flex; gap:8px; flex-wrap:wrap; }
#hx-modal .stat{ background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-size:.9rem; color:var(--muted) }

#hx-modal .cta{ display:flex; gap:10px; flex-wrap:wrap; }
#hx-modal .cta .btn{ padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); text-decoration:none; font-weight:600; }
#hx-modal .cta .btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent2)); border-color:transparent; box-shadow: var(--hx-glow-strong); }
#hx-modal .cta .btn.heart.active{ color:#ff6b81; border-color:rgba(255,107,129,.65) }

#hx-modal .content{ padding:0 16px 16px; display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
#hx-modal .panel{ background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:14px; }
#hx-modal .panel h4{ margin:.2rem 0 .6rem 0 }
#hx-modal ul{ margin:.2rem 0; padding-left:16px }
#hx-modal li{ margin:.25rem 0; color:var(--text) }

/* Search box */
.hx-search{
  display:flex; gap:8px; padding:10px; background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border:1px solid var(--border); border-radius:12px; align-items:center;
}
.hx-search input{
  flex:1; background:transparent; border:none; outline:none; color:var(--text); font-size:1rem;
}
.hx-search .kbd{ padding:4px 6px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:6px; color:var(--muted); font-size:.8rem; }

/* Card hover tilt (subtle) */
.card .thumb{ transform-style:preserve-3d; transform: perspective(800px); }
.card:hover .thumb img{ transform: translateZ(30px) scale(1.04); transition: transform .4s ease; }

/* Responsive modal */
@media (max-width: 860px){
  #hx-modal .hero{ grid-template-columns: 1fr; }
  #hx-modal .content{ grid-template-columns: 1fr; }
}


/* mobile overlap fix */
@media (max-width: 640px){
  .container.nav{ flex-wrap: wrap; row-gap: 8px; }
  header .brand{ flex: 1 1 100%; }
  .hero{ padding-top: calc(clamp(56px, 8vw, 100px) + 36px); }
}


/* mobile compact header v8 */
@media (max-width: 640px){
  header{ border-bottom-width: 1px; }
  .container.nav{ display:flex; justify-content:center; align-items:center; gap:8px; padding:6px 0; }
  header .brand{ display:inline-flex; align-items:center; gap:8px; }
  .brand-mark{ width:22px; height:22px; }
  header .brand a{ font-size:.95rem; line-height:1; white-space:nowrap; }
  header .brand .sub{ font-size:.75rem; opacity:.85; white-space:nowrap; }
  .auth .btn{ height:26px; padding:0 8px; font-size:.85rem; }
}

#hx-xp-bar .val{ font-size:.8rem }

.menu-toggle{ height:26px; padding:0 8px; }