/* ============================================================
   VantaPlay MOBILE + button/menu enhancement layer.
   Loaded after vanta.css, aurum.css, vanta-motion.css.
   ============================================================ */

/* ---------- BUTTON ENHANCEMENTS ---------- */
.primary-btn,.btn-blue{
  border-radius:4px;
  box-shadow:0 4px 14px rgba(201,255,61,.18);
  letter-spacing:.06em;
}
.primary-btn:hover,.btn-blue:hover{box-shadow:0 8px 22px rgba(201,255,61,.32)}
.primary-btn:active,.btn-blue:active{box-shadow:0 2px 8px rgba(201,255,61,.2)}
.outline-btn,.ghost-btn,.btn-line{border-radius:4px}
.outline-btn:hover,.ghost-btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.35)}

/* Login/join buttons in header get a touch more presence */
.login-btn{border-radius:4px;transition:.2s}
.login-btn:hover{border-color:rgba(201,255,61,.5);color:var(--acid,#c9ff3d)}

/* ---------- DESKTOP NAV MENU ENHANCEMENT ---------- */
.desktop-nav a{padding:0 2px;transition:color .2s ease}
.desktop-nav a:hover{color:#fff}
.nav-dot{transition:transform .2s ease}
.desktop-nav a:hover .nav-dot{transform:scale(1.15)}

/* Side rail: clearer active state + hover slide */
.side-rail a.railbtn,.side-rail button{position:relative;transition:.2s}
.side-rail a.railbtn:before,.side-rail button:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:26px;background:var(--acid,#c9ff3d);border-radius:2px;transition:transform .2s ease}
.side-rail a.railbtn.active:before,.side-rail button.active:before{transform:translateY(-50%) scaleY(1)}

/* ---------- MOBILE NAV ENHANCEMENT ---------- */
@media(max-width:980px){
  .mobile-nav{
    height:64px;
    background:rgba(7,9,8,.97);
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(201,255,61,.12);
    box-shadow:0 -8px 30px rgba(0,0,0,.5);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .mobile-nav a,.mobile-nav button{
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;font-size:8px;font-weight:700;letter-spacing:.03em;
    color:#7b837e;text-decoration:none;position:relative;transition:.18s;
  }
  .mobile-nav a span,.mobile-nav button span{font-size:19px;line-height:1;transition:transform .2s ease}
  .mobile-nav a.active,.mobile-nav button.active{color:var(--acid,#c9ff3d)}
  .mobile-nav a.active span,.mobile-nav button.active span{transform:translateY(-2px)}
  .mobile-nav a.active:before,.mobile-nav button.active:before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:2px;
    background:var(--acid,#c9ff3d);border-radius:0 0 3px 3px;box-shadow:0 0 8px rgba(201,255,61,.6);
  }
  .mobile-nav a:active span,.mobile-nav button:active span{transform:scale(.88)}
}

/* Mobile header tightening */
@media(max-width:700px){
  .topbar{padding:0 14px;height:64px}
  .brand{font-size:12px}
  .header-actions{gap:6px}
  .header-actions .primary-btn{height:36px;padding:0 12px;font-size:9px}
  .login-btn{padding:0 12px;font-size:9px}
  /* keep balance chip visible on small screens, compacted */
  .balance-chip{display:flex!important;padding:0 10px;height:36px}
  .balance-chip small{font-size:6px}
  .balance-chip b{font-size:9px}
}

/* Mobile: make card grids swipe nicely (already in vanta.css, reinforce) */
@media(max-width:700px){
  .game-grid{gap:10px}
  .game-card{min-width:150px}
}

/* Bigger tap targets everywhere on mobile */
@media(max-width:980px){
  button,a.btn-blue,a.primary-btn,a.outline-btn{min-height:40px}
  input,select{min-height:44px}
}