/* Shared header and footer for every page on mflgame.com.
   Edit the look here once; the nav links themselves live in each page. */
:root{--night:#10233A;--night-3:#0C1B2E;--green:#1E7A46;--green-hi:#25915A;--mint:#7FD3A2;
  --display:"Bricolage Grotesque",system-ui,sans-serif}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.bar{background:var(--night);color:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.06)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.mark{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap;color:#fff}
.mark img{width:32px;height:32px;border-radius:7px;display:block}
.bar nav{display:flex;gap:24px;align-items:center;font-family:var(--display);font-size:.96rem}
.bar nav a{text-decoration:none;opacity:.8;color:#fff}
.bar nav a:hover{opacity:1}
.bar nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--mint)}
.bar nav a.nav-play{opacity:1;background:var(--green);color:#fff;font-weight:600;font-size:.95rem;padding:9px 16px;border-radius:12px;text-decoration:none;transition:background .15s,transform .15s}
.bar nav a.nav-play:hover{background:var(--green-hi);transform:translateY(-2px)}
footer{background:var(--night-3);color:#9FB2C9;padding:36px 0;font-size:.95rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline}
@media (max-width:880px){.bar nav a.hide-sm{display:none}}
@media (max-width:640px){.wrap{padding:0 16px}.bar .mark span{display:none}}