/* ============================================================
   VASTALAMC SITE UNIFORMITY PASS
   Loaded after styles.css on every page.
   Keeps the original content and theme while enforcing one shared shell.
   ============================================================ */

:root{
  --uniform-header-bg:rgba(5,10,14,.96);
  --uniform-surface:#081117;
  --uniform-surface-soft:rgba(10,21,28,.72);
  --uniform-hero-bg:
    radial-gradient(circle at 78% 18%,rgba(82,180,225,.11),transparent 30%),
    linear-gradient(180deg,rgba(9,18,24,.82),rgba(5,9,13,.38));
}

html{
  background:var(--site-bg-base);
  scroll-padding-top:108px;
}

body,
body.home-page,
body.mechanics-wiki-page,
body.war-guide-page{
  color-scheme:dark;
  background-color:var(--site-bg-base)!important;
  background-image:var(--site-page-background)!important;
  background-repeat:no-repeat!important;
  background-size:100% max(100vh,1200px)!important;
  background-attachment:fixed!important;
}

/* One header on every page. */
.site-header,
.home-page .site-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  background:var(--uniform-header-bg)!important;
  border-bottom:1px solid var(--line2)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(12px)!important;
}

.site-header .header-inner{
  min-height:82px;
}

.site-header .brand{
  display:flex!important;
  align-items:center!important;
  min-width:0;
}

.site-header .brand img,
.home-page .brand img{
  display:block;
  width:220px!important;
  max-width:100%;
  height:auto;
}

.site-header .primary-nav,
.home-page .primary-nav{
  gap:0!important;
  min-width:0;
}

.site-header .primary-nav a,
.home-page .primary-nav a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px clamp(7px,.72vw,13px)!important;
  border:0!important;
  border-left:1px solid rgba(82,180,225,.09)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#c9c3b8!important;
  font-size:clamp(.68rem,.71vw,.81rem)!important;
  font-weight:850!important;
  letter-spacing:.025em!important;
  line-height:1.15;
  white-space:nowrap;
}

.site-header .primary-nav a:last-child,
.home-page .primary-nav a:last-child{
  border-right:1px solid rgba(82,180,225,.09)!important;
}

.site-header .primary-nav a:hover,
.site-header .primary-nav a.is-active,
.home-page .primary-nav a:hover,
.home-page .primary-nav a.is-active{
  color:var(--gold2)!important;
  background:rgba(82,180,225,.065)!important;
  transform:none!important;
}

.site-header .primary-nav a:after{
  left:10px!important;
  right:10px!important;
  bottom:5px!important;
  height:1px!important;
}

.site-header .nav-toggle{
  border:1px solid rgba(82,180,225,.18)!important;
  border-radius:0!important;
  background:rgba(82,180,225,.035)!important;
}

/* Shared masthead treatment. The homepage artwork remains intentionally unique. */
.page-hero,
.guide-hero,
.wiki-masthead,
.war-hero{
  background:var(--uniform-hero-bg)!important;
  border-bottom:1px solid var(--line2)!important;
}

.guide-hero,
.page-hero,
.mechanics-masthead,
.wiki-masthead-inner,
.war-hero{
  padding-top:72px!important;
  padding-bottom:54px!important;
}

.page-hero h1,
.guide-grid h1,
.mechanics-masthead h1,
.wiki-masthead h1,
.war-hero-copy h1{
  color:#E3EBEE!important;
  font-size:clamp(3.35rem,6vw,6.45rem)!important;
  line-height:.94!important;
  letter-spacing:-.045em!important;
}

.page-hero p,
.guide-hero .lede,
.wiki-masthead p:not(.eyebrow),
.war-hero .lede{
  color:#bfc5c3!important;
}

.eyebrow,
.category-kicker,
.section-index,
.war-section-index,
.mechanics-nav-group>p{
  color:var(--gold)!important;
}

/* Remove page-specific colour drift while retaining semantic red/green states. */
.war-hero{
  background:var(--uniform-hero-bg)!important;
}
.war-principle{
  border-left-color:var(--gold)!important;
}
.application-intro{
  border-color:var(--line2)!important;
  background:rgba(82,180,225,.045)!important;
}

/* Consistent surfaces and dividers across directories, manuals and articles. */
.category-hero,
.rule-section,
.wiki-section,
.clean-wiki-section,
.lore-cover,
.lore-chapter,
.player-character,
.application-card,
.guide-card,
.step-card,
.war-summary-card,
.war-phase-card,
.war-side-grid article,
.war-permission-grid article,
.war-faq-item,
.generator-flow-card,
.generator-requirement-card,
.craft-recipe-card{
  border-color:var(--line)!important;
}

.rules-toolbar,
.mechanics-toolbar{
  background:rgba(5,10,14,.96)!important;
  border-color:var(--line)!important;
}

.search-box,
.search-box input,
.wiki-search input,
.lore-global-search input,
.mobile-category-select select{
  background:var(--uniform-surface)!important;
  border-color:var(--line)!important;
  color:var(--bone)!important;
}

.site-footer{
  background:#04080b!important;
  border-top:1px solid var(--line2)!important;
}

/* Content must never vanish because a reveal animation did not complete. */
.scroll-reveal,
.scroll-reveal.reveal-pending,
.scroll-reveal.is-visible,
html.js-enabled body main,
html.js-enabled body .site-footer{
  visibility:visible!important;
}

@media(min-width:1081px){
  .site-header .header-inner{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(185px,230px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:18px!important;
    height:82px!important;
  }

  .site-header .header-inner .brand,
  .site-header .header-inner .primary-nav,
  .site-header .header-inner .nav-toggle{
    position:static!important;
    transform:none!important;
  }

  .site-header .primary-nav{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    width:100%!important;
    margin:0!important;
  }

  .site-header .nav-toggle{
    display:none!important;
  }
}

@media(max-width:1080px){
  html{scroll-padding-top:96px}

  .site-header .header-inner{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:16px!important;
    height:72px!important;
    min-height:72px!important;
  }

  .site-header .header-inner .brand,
  .site-header .header-inner .nav-toggle{
    position:static!important;
    transform:none!important;
  }

  .site-header .brand img,
  .home-page .brand img{
    width:190px!important;
  }

  .site-header .nav-toggle{
    display:block!important;
    width:44px!important;
    height:44px!important;
    padding:9px!important;
  }

  .site-header .primary-nav,
  .home-page .primary-nav{
    position:fixed!important;
    top:72px!important;
    left:14px!important;
    right:14px!important;
    z-index:1100!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    max-height:calc(100vh - 88px)!important;
    overflow:auto!important;
    padding:10px!important;
    border:1px solid var(--line2)!important;
    border-radius:0!important;
    background:#081118!important;
    box-shadow:0 24px 70px rgba(0,0,0,.55)!important;
  }

  .site-header .primary-nav.is-open,
  .home-page .primary-nav.is-open{
    display:flex!important;
  }

  .site-header .primary-nav a,
  .home-page .primary-nav a,
  .site-header .primary-nav a:last-child,
  .home-page .primary-nav a:last-child{
    justify-content:flex-start!important;
    min-height:46px!important;
    padding:13px!important;
    border:0!important;
    border-top:1px solid rgba(82,180,225,.09)!important;
    font-size:.88rem!important;
  }

  .site-header .primary-nav a:first-child,
  .home-page .primary-nav a:first-child{
    border-top:0!important;
  }

  .site-header .primary-nav a:after{
    left:13px!important;
    right:auto!important;
    width:72px!important;
    bottom:7px!important;
  }

  .rules-toolbar,
  .mechanics-toolbar{
    top:82px!important;
  }
}

@media(max-width:680px){
  .wide-shell,
  .shell{
    width:min(100% - 28px,1480px)!important;
  }

  .guide-hero,
  .page-hero,
  .mechanics-masthead,
  .wiki-masthead-inner,
  .war-hero{
    padding-top:50px!important;
    padding-bottom:40px!important;
  }

  .page-hero h1,
  .guide-grid h1,
  .mechanics-masthead h1,
  .wiki-masthead h1,
  .war-hero-copy h1{
    font-size:clamp(2.75rem,15vw,4rem)!important;
  }
}

@media print{
  .site-header,
  .site-footer{
    display:none!important;
  }
}


/* Shared Vastala+ supporters ribbon */
.supporters-bar{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(82,180,225,.12);
  background:
    linear-gradient(180deg, rgba(82,180,225,.04), rgba(82,180,225,0)),
    rgba(5,10,14,.92);
}

.supporters-bar-inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:18px;
  min-height:44px;
  padding:8px 0;
}

.supporters-bar-label{
  margin:0;
  color:#d8ccb5;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}

.supporters-rotator{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
  min-height:34px;
  overflow:hidden;
}

.supporters-orbit{
  display:inline-flex;
  align-items:center;
  transform:translateX(0) rotateX(0deg);
  transform-origin:center;
  opacity:1;
  transition:transform .36s ease, opacity .26s ease;
  will-change:transform, opacity;
}

.supporters-orbit.is-rotating-out{
  transform:translateX(32px) rotateX(82deg);
  opacity:0;
}

.supporters-orbit.is-rotating-in{
  transform:translateX(-32px) rotateX(-82deg);
  opacity:0;
}

.supporter-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:max-content;
  padding:5px 12px 5px 9px;
  border:1px solid rgba(82,180,225,.16);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(82,180,225,.06), rgba(255,255,255,.015));
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}

.supporter-chip-icon{
  display:block;
  width:22px;
  height:22px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border:1px solid rgba(82,180,225,.24);
  border-radius:5px;
  background:#101820;
  flex:0 0 auto;
}

.supporter-chip-name{
  color:#efe2bf;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.03em;
  white-space:nowrap;
}

@media(max-width:840px){
  .supporters-bar-inner{
    grid-template-columns:1fr;
    gap:8px;
    min-height:auto;
    padding:10px 0;
  }

  .supporters-bar-label{
    text-align:center;
    font-size:.72rem;
    letter-spacing:.14em;
  }

  .supporters-rotator{
    justify-content:center;
  }
}

@media(prefers-reduced-motion:reduce){
  .supporters-orbit{
    transition:none;
  }
}


/* ============================================================
   MECHANICS NAVIGATION + INSTANT PAGE SWITCHING
   ============================================================ */
html.js-enabled body main,
html.js-enabled body .site-footer,
html.js-enabled body.is-page-ready main,
html.js-enabled body.is-page-ready .site-footer,
body.is-page-leaving main,
body.is-page-leaving .site-footer{
  animation:none!important;
  transition:none!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
body:after,
body:before,
.page-transition-mark,
.site-scroll-progress{display:none!important}
.scroll-reveal,
.scroll-reveal.reveal-pending,
.reveal,
.reveal-pending{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:none!important;
}

.primary-nav-dropdown{position:relative;display:flex;align-items:center}
.primary-nav-dropdown-trigger{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:44px;
  padding:10px clamp(7px,.72vw,13px);
  border:0;
  border-left:1px solid rgba(82,180,225,.09);
  border-radius:0;
  background:transparent;
  color:#c9c3b8;
  font:inherit;
  font-size:clamp(.68rem,.71vw,.81rem);
  font-weight:850;
  letter-spacing:.025em;
  line-height:1.15;
  white-space:nowrap;
  cursor:pointer;
}
.primary-nav-dropdown-trigger span{color:var(--gold);font-size:.9rem;transition:transform .16s ease}
.primary-nav-dropdown.is-open .primary-nav-dropdown-trigger span{transform:rotate(180deg)}
.primary-nav-dropdown-trigger:hover,
.primary-nav-dropdown-trigger.is-active,
.primary-nav-dropdown.is-open .primary-nav-dropdown-trigger{
  color:var(--gold2);
  background:rgba(82,180,225,.065);
}
.primary-nav-dropdown-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:1300;
  display:none;
  width:min(340px,calc(100vw - 28px));
  padding:10px;
  border:1px solid var(--line2);
  background:#071016;
  box-shadow:0 22px 70px rgba(0,0,0,.58);
}
.primary-nav-dropdown.is-open .primary-nav-dropdown-panel{display:block}
.site-header .primary-nav .primary-nav-dropdown-panel a,
.home-page .primary-nav .primary-nav-dropdown-panel a{
  justify-content:flex-start!important;
  min-height:38px!important;
  padding:9px 11px!important;
  border:0!important;
  border-top:1px solid rgba(82,180,225,.07)!important;
  color:#c6cdca!important;
  font-size:.78rem!important;
  text-transform:none!important;
}
.site-header .primary-nav .primary-nav-dropdown-panel a:hover,
.home-page .primary-nav .primary-nav-dropdown-panel a:hover{
  color:var(--gold2)!important;
  background:rgba(82,180,225,.055)!important;
}
.primary-nav-dropdown-panel .mechanics-overview-link{
  margin-bottom:7px;
  border:1px solid rgba(82,180,225,.16)!important;
  color:var(--gold2)!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.07em!important;
}
.primary-nav-dropdown-panel details{border-top:1px solid var(--line)}
.primary-nav-dropdown-panel summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:10px 11px;
  color:#eee6d8;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
}
.primary-nav-dropdown-panel summary::-webkit-details-marker{display:none}
.primary-nav-dropdown-panel summary:after{content:'+';color:var(--gold);font-size:1rem}
.primary-nav-dropdown-panel details[open] summary:after{content:'−'}

.mechanics-nav-group{
  margin-top:7px;
  border:1px solid rgba(82,180,225,.1);
  background:rgba(255,255,255,.01);
}
.mechanics-nav-group>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:47px;
  padding:11px 12px;
  color:var(--gold2);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
}
.mechanics-nav-group>summary::-webkit-details-marker{display:none}
.mechanics-nav-group>summary:after{content:'+';margin-left:auto;color:var(--gold);font-size:1rem}
.mechanics-nav-group[open]>summary:after{content:'−'}
.mechanics-nav-group>summary small{
  order:2;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.65rem;
}
.mechanics-nav-items{border-top:1px solid var(--line)}
.mechanics-nav-items button{border-radius:0!important}

@media(max-width:1080px){
  .primary-nav-dropdown{display:block;width:100%}
  .primary-nav-dropdown-trigger{
    justify-content:space-between;
    width:100%;
    min-height:46px;
    padding:13px;
    border:0;
    border-top:1px solid rgba(82,180,225,.09);
    font-size:.88rem;
  }
  .primary-nav-dropdown-panel{
    position:static;
    width:100%;
    margin:0;
    border-color:rgba(82,180,225,.14);
    box-shadow:none;
    background:#060d12;
  }
}


/* Continuous supporters marquee. */
.supporters-bar-inner{
  grid-template-columns:auto minmax(0,1fr);
  gap:22px;
}
.supporters-rotator{
  position:relative;
  min-height:34px;
  overflow:hidden;
  isolation:isolate;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.supporters-orbit{
  position:absolute;
  top:50%;
  left:0;
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  opacity:1;
  transform:translate(-100%,-50%);
  animation:supporters-travel var(--supporter-duration,12s) linear infinite;
  transition:none;
  will-change:left,transform;
}
.supporters-orbit.is-rotating-out,
.supporters-orbit.is-rotating-in{
  opacity:1;
  transform:translate(-100%,-50%);
}
@keyframes supporters-travel{
  from{left:0;transform:translate(-100%,-50%)}
  to{left:100%;transform:translate(0,-50%)}
}
@media(max-width:840px){
  .supporters-bar-inner{grid-template-columns:1fr;gap:5px}
  .supporters-rotator{min-height:36px}
}
@media(prefers-reduced-motion:reduce){
  .supporters-orbit{
    position:static;
    margin:auto;
    transform:none;
    animation:none;
  }
}