@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

/* Full-height, transparent overlay navigation inspired by the reference layout. */
.portal-header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  height:82px;
  background:rgba(17,17,18,.27);
  border:0;
  box-shadow:none;
  backdrop-filter:blur(2px) saturate(104%);
  -webkit-backdrop-filter:blur(2px) saturate(104%);
}
.portal-nav{position:relative;height:82px;gap:18px}
/* Keep the overall page shell, but move the left/right branding slightly farther in from the viewport edge. */
.portal-nav.shell{padding-inline:12px}
.portal-nav::after{display:none!important}
.portal-brand{min-width:0;margin-right:auto;gap:8px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.38)}
.portal-brand img{width:35px;height:35px;border:0;box-shadow:0 2px 9px rgba(0,0,0,.16)}
.portal-brand span{font-family:"Montserrat",sans-serif;font-size:19px;font-weight:800;letter-spacing:-.04em}
.portal-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;margin:0;white-space:nowrap}
.portal-links>a,.nav-drop-trigger{
  position:relative;display:flex;align-items:center;gap:6px;min-height:30px;padding:6px 9px;
  border:0;border-radius:0;background:transparent;color:#fff8ea;
  font-family:"Montserrat",sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.28);
  transition:color .18s ease,opacity .18s ease;
}
.portal-links>a::before,.portal-links>a::after,.nav-drop-trigger::before,.nav-drop-trigger::after{content:none!important;display:none!important}
.portal-links>a:hover,.nav-drop-trigger:hover{background:transparent!important;color:#d2a251}
.portal-links>a.active,.nav-drop-trigger.active,.nav-drop[data-open="true"] .nav-drop-trigger,.nav-drop[data-current="true"] .nav-drop-trigger{
  background:transparent!important;
  border:0!important;
  color:#fff8ea;
}
.nav-caret{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease,color .18s ease}
.nav-drop[data-open="true"] .nav-caret{transform:rotate(225deg) translate(-1px,-1px)}
.nav-drop{position:relative;height:82px;display:flex;align-items:center}
.nav-dropdown{
  position:absolute;top:68px;left:50%;min-width:266px;padding:7px 11px;
  border:3px solid #7f8997;border-radius:7px;background:rgba(247,247,248,.985);color:#38251d;
  box-shadow:0 8px 20px rgba(0,0,0,.20);transform:translate(-50%,-5px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
/* Only one game is listed right now, so keep this menu compact instead of leaving a large empty row. */
.nav-games-dropdown{
  width:286px;
  min-width:286px;
  max-width:286px;
  padding:7px 10px 8px;
}
.nav-menu-heading{display:block;padding:3px 2px 7px;color:#8a8a8d;font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;line-height:1.15;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid rgba(56,37,29,.10);margin-bottom:3px;text-align:left}
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-dropdown::after{content:none!important;display:none!important}
.nav-drop[data-open="true"] .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .18s ease,transform .18s ease,visibility 0s;
}
/* Strong reset so the old portal.css underline/highlight rules cannot leak into dropdown links. */
.portal-links .nav-dropdown a,
.portal-links .nav-dropdown a:link,
.portal-links .nav-dropdown a:visited,
.portal-links .nav-dropdown a.active,
.portal-links .nav-dropdown a:focus,
.portal-links .nav-dropdown a:focus-visible{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px;padding:6px 3px;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  color:#3a281f!important;font-family:"Montserrat",sans-serif;font-size:12.5px;font-weight:800;text-transform:uppercase;
  text-decoration:none!important;outline:none!important;
  transition:color .18s ease,opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
}
/* Game row mirrors the Axie-style list: icon first, label immediately beside it, both left aligned. */
.portal-links .nav-games-dropdown .nav-game-link,
.portal-links .nav-games-dropdown .nav-game-link:link,
.portal-links .nav-games-dropdown .nav-game-link:visited{
  display:grid!important;
  grid-template-columns:28px max-content!important;
  align-items:center!important;
  justify-content:start!important;
  justify-items:start!important;
  column-gap:10px!important;
  width:100%!important;
  min-height:36px!important;
  padding:4px 2px!important;
  font-size:12.5px!important;
}
.nav-game-thumb{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;flex:none!important;border-radius:7px;object-fit:cover;object-position:center;box-shadow:0 1px 3px rgba(0,0,0,.18);margin:0!important}
.portal-links .nav-games-dropdown .nav-game-link>span{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  justify-self:start!important;
  white-space:nowrap!important;
}
.portal-links .nav-dropdown a::before,
.portal-links .nav-dropdown a::after{
  content:none!important;
  display:none!important;
  position:static!important;
  width:0!important;height:0!important;
  background:none!important;border:0!important;box-shadow:none!important;
}
.portal-links .nav-dropdown a:hover,
.portal-links .nav-dropdown a.active:hover,
.portal-links .nav-dropdown a:focus-visible{
  background:transparent!important;
  color:#a66f16!important;
  box-shadow:none!important;
  outline:none!important;
  text-decoration:none!important;
}
.nav-dropdown small{color:#768295;font:800 9px/1 "Montserrat",sans-serif;transition:color .18s ease}
.nav-dropdown a:hover small{color:#a66f16}

.portal-play{display:none!important}

/* Artwork/video continues underneath the navigation. */
.portal-hero{padding-top:0!important;min-height:100svh}
.portal-hero-bg{inset:0!important}
.portal-hero-video{inset:0!important;width:100%!important;height:100%!important}
.portal-hero::after{inset:0!important}
.hero-noise{inset:0!important}
.hero-content{padding-top:145px!important}
.page-hero{padding-top:130px}

.ecosystem-grid{grid-template-columns:repeat(3,1fr)}
.eco-card[href="./world.html"]{display:none}

.mobile-menu{top:82px;background:rgba(7,13,28,.96);border-top:1px solid rgba(255,255,255,.07);backdrop-filter:blur(16px)}
.mobile-menu .mobile-group{padding:10px 20px 2px;color:#7f97b5;font:700 10px/1 "Space Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.mobile-menu a{padding:13px 20px}
.mobile-menu .mobile-sub{padding-left:32px;color:#b9c9dc}
.mobile-menu .mobile-play{display:none!important}
@media(max-width:1000px){.mobile-menu{max-height:calc(100dvh - 82px);overflow-y:auto;overscroll-behavior:contain}}
@media(max-width:680px){.mobile-menu{max-height:calc(100dvh - 54px)}}

@media(max-width:1000px){
  .portal-links{display:none}.portal-brand{min-width:0}.nav-toggle{display:block;margin-left:auto}
  .ecosystem-grid{grid-template-columns:1fr 1fr}.hero-content{padding-top:130px!important}
}
@media(max-width:680px){
  .portal-header,.portal-nav{height:54px}
  .portal-nav.shell{padding-inline:0}
  .portal-brand img{width:33px;height:33px}.portal-brand span{font-size:18px}
  .mobile-menu{top:54px}.hero-content{padding-top:116px!important}.ecosystem-grid{grid-template-columns:1fr}
}