/* shared top navigation */
body.has-topnav { padding-top: 84px !important; }
.topnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    height: 60px; padding: 0 24px;
    background: rgba(8,8,12,0.7); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-family: 'Outfit', sans-serif;
}
.topnav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #e4e4e7; font-weight: 800; letter-spacing: 3px; font-size: 12px; text-transform: uppercase; }
.topnav-brand img { width: 26px; height: 26px; object-fit: contain; }
.topnav-links { display: flex; align-items: center; gap: 4px; }
.topnav-links a { color: #a1a1aa; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 1px; padding: 8px 12px; border-radius: 4px; transition: color .2s, background .2s; }
.topnav-links a:hover { color: #e4e4e7; background: rgba(255,255,255,0.04); }
.topnav-links a.active { color: #00ffa3; }
.topnav-actions { display: flex; align-items: center; gap: 8px; }
.topnav-btn { text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 16px; border-radius: 4px; transition: all .2s; }
.topnav-btn.ghost { color: #e4e4e7; border: 1px solid #27272a; }
.topnav-btn.ghost:hover { border-color: #00ffa3; color: #00ffa3; }
.topnav-btn.solid { background: #f4f4f5; color: #09090b; border: 1px solid #f4f4f5; }
.topnav-btn.solid:hover { background: #fff; box-shadow: 0 0 22px rgba(255,255,255,0.25); }
.topnav-burger { display: none; background: none; border: 1px solid #27272a; border-radius: 4px; width: 38px; height: 34px; padding: 0 9px; cursor: pointer; flex-direction: column; justify-content: center; gap: 4px; }
.topnav-burger span { display: block; height: 2px; background: #e4e4e7; border-radius: 1px; }
@media (max-width: 900px) {
    .topnav { padding: 0 16px; }
    .topnav-btn.ghost { display: none; }
    .topnav-burger { display: flex; }
    .topnav-burger span { transition: transform .3s ease, opacity .2s ease; }
    .topnav.open .topnav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .topnav.open .topnav-burger span:nth-child(2) { opacity: 0; }
    .topnav.open .topnav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .topnav-links {
        display: flex; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(8,8,12,0.93); border-bottom: 1px solid rgba(255,255,255,0.07);
        padding: 0 16px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden;
        transition: max-height .38s cubic-bezier(.3,.7,.2,1), opacity .25s ease, transform .35s cubic-bezier(.3,.7,.2,1), padding .3s ease, visibility 0s linear .38s;
    }
    .topnav.open .topnav-links { max-height: 460px; opacity: 1; transform: none; pointer-events: auto; visibility: visible; padding: 8px 16px 14px; transition-delay: 0s; }
    .topnav-links a { padding: 12px; font-size: 13px; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s ease, color .2s, background .2s; }
    .topnav.open .topnav-links a { opacity: 1; transform: none; }
    .topnav.open .topnav-links a:nth-child(1) { transition-delay: .04s; }
    .topnav.open .topnav-links a:nth-child(2) { transition-delay: .08s; }
    .topnav.open .topnav-links a:nth-child(3) { transition-delay: .12s; }
    .topnav.open .topnav-links a:nth-child(4) { transition-delay: .16s; }
    .topnav.open .topnav-links a:nth-child(5) { transition-delay: .2s; }
    .topnav.open .topnav-links a:nth-child(6) { transition-delay: .24s; }
    .topnav.open .topnav-links a:nth-child(7) { transition-delay: .28s; }
}
}

/* primary buttons: white instead of neon green (loaded after each page's inline styles) */
.btn.primary, .btn-primary { background: #f4f4f5 !important; border-color: #f4f4f5 !important; color: #09090b !important; }
.btn.primary:hover, .btn-primary:hover { background: #fff !important; border-color: #fff !important; color: #09090b !important; box-shadow: 0 0 26px rgba(255,255,255,.22) !important; }

/* no layout jump when a page grows taller than the window */
html { scrollbar-gutter: stable; }

/* page transitions */
body { transition: opacity .25s ease; }
body.leaving { opacity: 0; }
.pagebar { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: #00ffa3; z-index: 300; box-shadow: 0 0 10px rgba(0,255,163,.7); pointer-events: none; }
.pagebar.run { width: 100%; transition: width .9s cubic-bezier(.1,.7,.2,1); }

/* shared footer */
.site-footer.v2 { text-align: left; padding: 48px 24px 22px; margin-top: 64px; }
.site-footer.v2 .ft-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.ft-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #e4e4e7; font: 800 13px 'Outfit', sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.ft-logo img { width: 28px; height: 28px; object-fit: contain; }
.ft-brand p { color: #a1a1aa; font: 400 13px/1.7 'Outfit', sans-serif; margin: 14px 0 16px; max-width: 320px; }
.ft-discord { display: inline-block; font: 700 11px 'Outfit', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #e4e4e7; text-decoration: none; border: 1px solid #27272a; border-radius: 4px; padding: 9px 14px; transition: all .2s; }
.ft-discord:hover { border-color: #00ffa3; color: #00ffa3; }
.ft-col { display: flex; flex-direction: column; gap: 10px; }
.ft-col h4 { font: 700 10px 'Outfit', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #00ffa3; margin-bottom: 4px; }
.ft-col a { color: #a1a1aa; text-decoration: none; font: 500 13px 'Outfit', sans-serif; transition: color .2s, transform .2s; width: fit-content; }
.ft-col a:hover { color: #fff; transform: translateX(3px); }
.site-footer.v2 .ft-bottom { max-width: 1080px; margin: 36px auto 0; padding-top: 18px; border-top: 1px solid #1a1a20; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #52525b; font: 400 11px 'Outfit', sans-serif; letter-spacing: .5px; }
@media (max-width: 760px) { .site-footer.v2 .ft-inner { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }

/* Page containers fade in without a transform: a translateY briefly made the page taller than the window,
   which flashed a scrollbar (dashboard) until the animation ended. */
@keyframes siteAppear { from { opacity: 0; } to { opacity: 1; } }
.container, .container.loaded { animation: siteAppear .4s ease-out both !important; transform: none; }

/* Roblox link under each game card, drawn as a real button */
.card span.open, .game span.open {
    display: block; margin-top: 14px; padding: 10px 12px; text-align: center;
    background: transparent; color: #e4e4e7; border: 1px solid #27272a; border-radius: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: all .2s;
}
.card:hover span.open, .game:hover span.open { border-color: #f4f4f5; background: #f4f4f5; color: #09090b; }

/* The nav stays fixed while pages change: only the content fades (the bar used to fade and pop in with the body). */
body.has-topnav { animation: none !important; transition: none !important; }
body.has-topnav > :not(.topnav):not(.pagebar):not(#splash) { transition: opacity .25s ease; }
body.leaving { opacity: 1 !important; }
body.leaving > :not(.topnav):not(.pagebar):not(#splash) { opacity: 0; }
.topnav { animation: none; }