/* Verus North shared UI layer: mobile menu, toasts, hover frames, page headers, motion */
:root{--vn-gold:#c9a45c;--vn-gold2:#ecd59e;--vn-volt:#4da6ff;--vn-ok:#5fe08a;--vn-bad:#ff7a66}

/* ---- mobile menu ---- */
.nav .navtog{display:none!important;background:rgba(77,166,255,.08)!important;border-radius:0!important;box-shadow:none!important;min-width:0!important}
.navtog{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;background:rgba(77,166,255,.08);border:1px solid #2c3b52;color:#dbe3ee;cursor:pointer;padding:0}
.navtog:focus-visible{outline:2px solid var(--vn-volt);outline-offset:2px}
.navtog i,.navtog i::before,.navtog i::after{display:block;width:20px;height:2px;background:currentColor;position:relative;transition:transform .2s,background .2s}
.navtog i::before,.navtog i::after{content:"";position:absolute;left:0}
.navtog i::before{top:-6px}.navtog i::after{top:6px}
.navtog[aria-expanded="true"] i{background:transparent}
.navtog[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.navtog[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
.navshade{position:fixed;inset:0;background:rgba(3,6,10,.6);z-index:48;opacity:0;transition:opacity .2s}
.navshade.on{opacity:1}
@media (max-width:900px){
  .nav{flex-wrap:nowrap!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;transform:none!important;background:rgba(11,16,24,.97)!important}
  .nav .navtog{display:inline-flex!important}
  .nav .menu{position:fixed!important;top:0;right:0;bottom:0;width:min(300px,84vw);z-index:49;flex-direction:column;flex-wrap:nowrap!important;align-items:stretch!important;gap:0!important;
    padding:calc(76px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(180deg,#101826,#0b1018);border-left:1px solid #2c3b52;
    box-shadow:-20px 0 40px rgba(0,0,0,.5);transform:translateX(105%);transition:transform .25s ease;overflow-y:auto;visibility:hidden}
  .nav.open .menu{transform:none;visibility:visible}
  .nav .menu li{border-bottom:1px solid rgba(44,59,82,.6)}
  .nav .menu li:last-child,.nav .menu li:has(.join){border-bottom:0}
  .nav .menu a{display:block;padding:14px 4px!important;font-size:15px!important;border-bottom:0!important}
  .nav .menu a[aria-current="page"]{color:var(--vn-gold2)!important;box-shadow:inset 3px 0 0 var(--vn-gold);padding-left:12px!important}
  .nav .menu a.join{margin:16px 0 8px;text-align:center;padding:12px!important}
  .nav .menu #vnLogin{padding-top:8px}
  .nav .navtog{position:relative;z-index:50}
  .nav.open{z-index:50!important}
  body.navlock{overflow:hidden}
}

/* ---- toasts ---- */
body #toast{display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 32px));background:#121a26!important;color:#dbe3ee!important;border:1px solid #2c3b52;border-left:3px solid var(--vn-volt);
  padding:11px 16px!important;font-size:14px!important;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:70!important;animation:vnToast .28s cubic-bezier(.2,.9,.3,1.2)}
body #toast::before{content:"i";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 12px/1 ui-monospace,monospace;background:rgba(77,166,255,.18);color:var(--vn-volt)}
body #toast[data-kind="ok"]{border-left-color:var(--vn-ok)}body #toast[data-kind="ok"]::before{content:"✓";background:rgba(95,224,138,.16);color:var(--vn-ok)}
body #toast[data-kind="warn"]{border-left-color:var(--vn-bad)}body #toast[data-kind="warn"]::before{content:"!";background:rgba(255,122,102,.16);color:var(--vn-bad)}
@keyframes vnToast{from{opacity:0;transform:translate(24px,8px)}to{opacity:1;transform:none}}

/* ---- hover frames: gold corners light up ---- */
.vnf{position:relative}
.vfr{position:absolute;inset:-1px;pointer-events:none;z-index:1;opacity:0;transition:opacity .18s;
  background:
    linear-gradient(var(--vn-gold2),var(--vn-gold2)) top left/12px 1px no-repeat,linear-gradient(var(--vn-gold2),var(--vn-gold2)) top left/1px 12px no-repeat,
    linear-gradient(var(--vn-gold2),var(--vn-gold2)) top right/12px 1px no-repeat,linear-gradient(var(--vn-gold2),var(--vn-gold2)) top right/1px 12px no-repeat,
    linear-gradient(var(--vn-gold2),var(--vn-gold2)) bottom left/12px 1px no-repeat,linear-gradient(var(--vn-gold2),var(--vn-gold2)) bottom left/1px 12px no-repeat,
    linear-gradient(var(--vn-gold2),var(--vn-gold2)) bottom right/12px 1px no-repeat,linear-gradient(var(--vn-gold2),var(--vn-gold2)) bottom right/1px 12px no-repeat}
.vnf:hover>.vfr,.vnf:focus-visible>.vfr,.vnf:focus-within>.vfr{opacity:1}
.vnf:hover{box-shadow:0 0 22px rgba(201,164,92,.10)}

/* ---- page headers: one style everywhere ---- */
header.phead,header.top{position:relative;isolation:isolate}
header.phead::before,header.top::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-40px;bottom:-10px;pointer-events:none;
  background:radial-gradient(60% 90% at 12% 30%,rgba(77,166,255,.10),transparent 70%),radial-gradient(40% 70% at 85% 0%,rgba(201,164,92,.07),transparent 70%)}
header.phead::after{content:"";display:block;height:1px;margin-top:6px;background:linear-gradient(90deg,var(--vn-gold),rgba(201,164,92,.25) 45%,transparent)}
header.top{border-bottom-color:transparent!important}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--vn-gold),rgba(201,164,92,.25) 45%,transparent)}

/* ---- home: starfield + crest glow ---- */
header.hero{position:relative;isolation:isolate}
.vnstars{position:absolute;z-index:-1;left:calc(-1*max(16px,env(safe-area-inset-left,0px)));right:calc(-1*max(16px,env(safe-area-inset-right,0px)));top:-120px;bottom:-40px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 75%,transparent)}
.vnstars canvas{width:100%;height:100%;display:block}
#crest img,#crest video{animation:vnGlow 6s ease-in-out infinite}
@keyframes vnGlow{0%,100%{filter:drop-shadow(0 0 18px rgba(77,166,255,.35))}50%{filter:drop-shadow(0 0 34px rgba(77,166,255,.6)) drop-shadow(0 0 60px rgba(201,164,92,.15))}}

/* ---- skeleton loaders ---- */
.skel{position:relative;overflow:hidden;background:#111a27;border:1px solid #1e2a3c;min-height:14px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(120,160,220,.10),transparent);animation:vnShim 1.3s infinite}
@keyframes vnShim{to{transform:translateX(100%)}}
.skgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.skgrid .skel{height:118px}
.skrow{display:flex;gap:10px;flex-wrap:wrap}.skrow .skel{height:54px;flex:1 1 160px}
.sknote{font:12px ui-monospace,monospace;color:#8696ab;margin:6px 0 0}

/* ---- 404 ---- */
.lost{display:grid;place-items:center;text-align:center;gap:14px;padding:72px 0 40px}
.lost .code{font:700 clamp(72px,16vw,160px)/1 "Cinzel",Georgia,serif;letter-spacing:.06em;background:linear-gradient(180deg,#f2f6fb,#8ea2bd);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(77,166,255,.35))}
.lost .hole{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#000 28%,rgba(77,166,255,.5) 31%,rgba(77,166,255,.08) 52%,transparent 70%);box-shadow:0 0 80px rgba(77,166,255,.25);animation:vnSpin 18s linear infinite}
@keyframes vnSpin{to{transform:rotate(360deg)}}
.lost .links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---- portraits in tags ---- */
.tag .pp,.you .pp{width:18px;height:18px;border-radius:50%;vertical-align:-4px;margin-right:6px;border:1px solid rgba(255,255,255,.2)}

/* ---- reduced motion: everything still works, nothing moves ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}