/* HYPHSWORLD mobile-first futuristic 3D access panel. */
.home-page .site-header{
  position:sticky;
  top:0;
  z-index:50;
  isolation:isolate;
  background:
    radial-gradient(circle at 8% 0%,rgba(57,255,122,.28),transparent 28%),
    radial-gradient(circle at 92% 8%,rgba(31,252,255,.22),transparent 32%),
    linear-gradient(145deg,rgba(4,4,8,.96),rgba(13,7,27,.94) 54%,rgba(2,16,24,.92));
  border-bottom:1px solid rgba(255,79,216,.42);
  box-shadow:0 18px 44px rgba(0,0,0,.52),inset 0 -1px 0 rgba(255,255,255,.08);
}
.home-page .site-header::before{
  content:"ACCESS PANEL";
  position:absolute;
  right:14px;
  top:8px;
  color:rgba(159,255,208,.72);
  font-size:.58rem;
  font-weight:1000;
  letter-spacing:.20em;
  text-transform:uppercase;
  pointer-events:none;
  text-shadow:0 0 14px rgba(31,252,255,.34);
}
.home-page .site-header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.10) 48%,transparent 55% 100%);
  background-size:24px 24px,24px 24px,auto;
  opacity:.42;
}
.home-page .brand-lockup{position:relative;z-index:2;}
.home-page .brand-lockup span{color:#ffe45c;text-shadow:0 0 15px rgba(255,228,92,.38);}
.home-page .brand-lockup strong{text-shadow:0 0 26px rgba(31,252,255,.20),0 12px 22px rgba(0,0,0,.42);}
.home-page .main-nav{position:relative;z-index:2;perspective:900px;}
.home-page .main-nav a,
.home-page .btn,
.home-page .hero-sound-toggle{position:relative;overflow:hidden;transform-style:preserve-3d;backface-visibility:hidden;}
.home-page .main-nav a::before,
.home-page .btn::before,
.home-page .hero-sound-toggle::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 34%,rgba(31,252,255,.12));opacity:.75;}
.home-page .main-nav a::after,
.home-page .btn::after,
.home-page .hero-sound-toggle::after{content:"";position:absolute;inset:-45% -80%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.40) 49%,transparent 56%);transform:translateX(-92%);opacity:.24;}
.home-page .main-nav a:hover::after,.home-page .btn:hover::after,.home-page .hero-sound-toggle:hover::after{transform:translateX(92%);transition:transform .55s ease;}

.home-page .main-nav{
  width:min(860px,100%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  padding:10px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(9,11,24,.48),rgba(6,26,36,.42));
  border:1px solid rgba(31,252,255,.42);
  backdrop-filter:blur(6px) saturate(130%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.42),0 0 28px rgba(31,252,255,.14);
}
.home-page .main-nav a{
  min-height:34px;
  padding:5px 7px;
  border-radius:10px;
  font-size:.55rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f8fbff;
  border:1px solid rgba(94,255,245,.62);
  background:linear-gradient(145deg,rgba(37,18,66,.72),rgba(10,30,52,.55));
  box-shadow:0 4px 0 rgba(6,9,20,.9),0 8px 16px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.22);
}
.home-page .main-nav a:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 0 rgba(6,9,20,.9),0 10px 18px rgba(0,0,0,.36),0 0 16px rgba(31,252,255,.2),inset 0 1px 0 rgba(255,255,255,.24);
}
.home-page .main-nav .nav-cta{
  color:#040406;
  border-color:rgba(255,255,255,.78);
  background:linear-gradient(100deg,#45ff36,#ffe45c,#ff4fd8,#42ccff);
  box-shadow:0 4px 0 rgba(30,96,32,.74),0 10px 20px rgba(0,0,0,.32),0 0 24px rgba(69,255,54,.26);
}
@media(max-width:860px){
  .home-page #login-section{padding:7px 10px!important;line-height:1.18!important;background:linear-gradient(135deg,rgba(57,255,122,.34),rgba(12,8,24,.90) 48%,rgba(31,252,255,.22))!important;border-bottom:1px solid rgba(255,79,216,.46)!important;box-shadow:0 12px 32px rgba(0,0,0,.35)!important;}
  .home-page #login-status{display:block!important;margin-left:0!important;font-size:.82rem!important;letter-spacing:.03em!important;}
  .home-page #auth-link{display:inline-flex!important;margin:4px 4px 0 0!important;color:#ffe45c!important;font-size:.92rem!important;line-height:1!important;text-shadow:0 0 14px rgba(255,228,92,.28)!important;}
  .home-page #home-logout{min-height:30px!important;margin-left:6px!important;padding:5px 10px!important;font-size:.82rem!important;line-height:1!important;box-shadow:0 8px 20px rgba(255,39,93,.25)!important;}
  .home-page .site-header{display:block!important;padding:10px 10px 11px!important;}
  .home-page .brand-lockup{width:100%!important;margin-bottom:8px!important;}
  .home-page .brand-lockup span{font-size:.58rem!important;letter-spacing:.18em!important;}
  .home-page .brand-lockup strong{font-size:clamp(1.65rem,8.8vw,2.75rem)!important;line-height:.88!important;}
  .home-page .main-nav{width:100%!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;justify-content:stretch!important;align-items:stretch!important;padding:5px!important;border-radius:16px!important;background:radial-gradient(circle at 12% 0%,rgba(57,255,122,.18),transparent 34%),radial-gradient(circle at 88% 6%,rgba(255,79,216,.18),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;border:1px solid rgba(31,252,255,.22)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 12px 22px rgba(0,0,0,.30)!important;}
  .home-page .main-nav a{width:100%!important;min-width:0!important;min-height:24px!important;height:24px!important;padding:3px 4px!important;border-radius:7px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;background:linear-gradient(145deg,rgba(23,14,48,.94),rgba(9,20,37,.76)),radial-gradient(circle at 28% 0%,rgba(31,252,255,.24),transparent 36%)!important;border:1px solid rgba(31,252,255,.62)!important;font-size:.36rem!important;line-height:1!important;letter-spacing:.018em!important;white-space:nowrap!important;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)!important;box-shadow:0 4px 0 rgba(3,4,12,.86),0 7px 12px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -5px 10px rgba(0,0,0,.24)!important;}
  .home-page .main-nav a:active{transform:translateY(2px) rotateX(5deg)!important;box-shadow:0 2px 0 rgba(3,4,12,.86),0 4px 8px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.20)!important;}
  .home-page .main-nav a[href="leaderboard.html"]{font-size:.34rem!important;letter-spacing:0!important;}
  .home-page .main-nav a[href="app-player.html"]{font-size:.34rem!important;letter-spacing:0!important;}
  .home-page .main-nav .nav-cta{color:#030304!important;border:1px solid rgba(255,255,255,.72)!important;background:linear-gradient(105deg,#39ff7a,#ffe45c,#ff4fd8,#1ffcff)!important;box-shadow:0 4px 0 rgba(21,80,44,.68),0 0 16px rgba(57,255,122,.22)!important;}
  .home-page .hero-shell,.home-page .section-pad{padding-left:10px!important;padding-right:10px!important;}
  .home-page .button-row{gap:7px!important;}
  .home-page .button-row .btn,.home-page .compact-actions .btn,.home-page .player-controls .btn{flex:0 1 auto!important;min-width:76px!important;min-height:34px!important;padding:7px 8px!important;border:1px solid rgba(255,255,255,.14)!important;font-size:.58rem!important;line-height:1!important;letter-spacing:.04em!important;box-shadow:0 7px 0 rgba(0,0,0,.55),0 14px 22px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.24)!important;}
  .home-page .hero-sound-toggle{min-height:32px!important;padding:6px 9px!important;border:1px solid rgba(255,255,255,.55)!important;font-size:.68rem!important;box-shadow:0 7px 0 rgba(107,84,0,.65),0 0 22px rgba(255,228,92,.20)!important;}
}
@media(max-width:620px){
  .home-page .site-header{padding:9px 9px 10px!important;}
  .home-page .brand-lockup{margin-bottom:7px!important;}
  .home-page .brand-lockup span{font-size:.56rem!important;}
  .home-page .brand-lockup strong{font-size:clamp(1.55rem,8.2vw,2.55rem)!important;}
  .home-page .main-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;padding:6px!important;border-radius:15px!important;}
  .home-page .main-nav a{min-height:25px!important;height:25px!important;padding:2px 3px!important;border-radius:6px!important;font-size:.36rem!important;letter-spacing:0!important;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)!important;box-shadow:0 3px 0 rgba(3,4,12,.86),0 6px 10px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -5px 10px rgba(0,0,0,.24)!important;}
  .home-page .main-nav a[href="leaderboard.html"],.home-page .main-nav a[href="app-player.html"]{font-size:.30rem!important;}
  .home-page .hero-video-card{min-height:560px!important;border-radius:24px!important;}
  .home-page .hero-content{padding:18px!important;}
  .home-page .hero-content h1{font-size:clamp(2.65rem,15vw,4.8rem)!important;}
  .home-page .lead{margin-bottom:14px!important;font-size:.94rem!important;}
  .home-page .button-row .btn,.home-page .compact-actions .btn,.home-page .player-controls .btn{min-width:72px!important;min-height:33px!important;padding:6px 7px!important;font-size:.55rem!important;}
  .home-page .hero-sound-toggle{top:10px!important;right:10px!important;min-height:30px!important;padding:6px 8px!important;font-size:.64rem!important;}
}
@media(max-width:390px){
  .home-page .main-nav a{font-size:.34rem!important;}
  .home-page .main-nav a[href="leaderboard.html"],.home-page .main-nav a[href="app-player.html"]{font-size:.28rem!important;}
  .home-page .button-row .btn,.home-page .compact-actions .btn,.home-page .player-controls .btn{min-width:68px!important;font-size:.52rem!important;}
}

/* FINAL FORCE COMPACT COCKPIT GEOMETRY: 5 columns / 2 rows on mobile. */
.home-page header.site-header nav.main-nav{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:4px!important;
  width:100%!important;
  max-width:none!important;
  padding:6px!important;
  border-radius:15px!important;
}
.home-page header.site-header nav.main-nav > a{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:25px!important;
  height:25px!important;
  padding:2px 3px!important;
  border-radius:6px!important;
  flex:0 0 auto!important;
  font-size:.36rem!important;
  line-height:1!important;
  letter-spacing:0!important;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)!important;
}
.home-page header.site-header nav.main-nav > a[href="leaderboard.html"],
.home-page header.site-header nav.main-nav > a[href="app-player.html"]{
  font-size:.30rem!important;
}
.home-page header.site-header nav.main-nav > a.nav-cta{grid-column:auto!important;}