:root{
  --die-scale: 0.175;
  --nav-h: 65px;
  --focus: 65%;
  --rest: calc((100% - var(--focus)) / 2);
  --ease: cubic-bezier(.25,.8,.25,1);

  --scrim-opacity: 0.80;
  --titlebox-bg: var(--primary);

  /* NEW: notification color for avatar dot (overridable in themes) */
  --notif: #ff4d4f;
  --inset-gap: 36px;        /* even spacing above (under header) & below */
  --header-offset: 14px;    /* matches your .panel-titlebox top */

  --corner-size: 72px;        /* ornament size */
  --corner-size-bottom: 42px;
  --corner-inset: 0px;        /* distance from top/bottom */
  --corner-overhang: 0px;    /* how far OUTSIDE the border to sit */
  --corner-inner-offset: 2px; /* tiny inboard offset for the inset corners */
  --corner-inner-img: url("../images/bottomDragonCorner.png");
  --corner-inner-img-reversed: url("../images/bottomDragonCornerReversed.png");
  --corner-outer-img: url("../images/topBorderDragon.png");
  --mi-pad: 12px; 

  --tl-nudge-x: 48px;  /* move right by 125 */
  --tl-nudge-y: -47px;  /* move up by 270  */

  --tr-nudge-x: 48px;   /* + = farther to the RIGHT (more outside) */
  --tr-nudge-y: -47px;  /* + = farther UP, − = down (same semantics as TL) */

  --die-slot: 50px;
}




.loginWelcomeUser {
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--primary);
}

.loginMemberStatus {
  margin-left: 10px;
  font-size: 0.8rem;
  line-height: 32px;
  min-height: 32px;
  max-height: 32px;
}

.pLink:hover {
  background-color: rgb(from var(--primary) r g b / 0.55);
  color: var(--text-50) !important;
  border: 1px solid rgb(from var(--primary) r g b / 0.75);
  line-height: 20px;
  text-decoration: none;
}


.opentip-container, .opentip {
    z-index: 1050 !important; /* A value higher than the Bootstrap fixed-top navbar */
}

.parallax-container{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../images/maps/map1.webp");
  background-repeat: repeat;
  background-size: 110%;
  z-index: -1;                     /* key: behind main content */
  pointer-events: none;            /* key: never intercept clicks */
  will-change: background-position;
  /* object-fit has no effect on a DIV, remove it */
}

/* Remove the stacking bump from the pseudo-element */
.parallax-container::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0); /* keep tint if you want */
  pointer-events: none;
  /* no z-index here */
}

/* Your <main> uses class="right-main", not .main — give it a paint layer */
.right-main{
  position: relative;
  z-index: 0;   /* any non-negative works; just above -1 background */
}

.mainContentPanel {
  background-color: rgb(from var(--background-200) r g b / 0.875);
  height: calc(100vh - 80px);
  overflow: hidden;
}

.scrollableDiv {
  height: 100vh;
  overflow: auto;
  scrollbar-gutter: stable;           /* avoid layout shift when bar appears */
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
  overscroll-behavior: contain;       /* stop scroll chaining */
}

/* ---------- Firefox ---------- */
.scrollableDiv {
  /* thin | auto | none */
  scrollbar-width: thin;
  /* thumb color, track color */
  scrollbar-color: var(--primary-600) var(--background-200);
}

/* ---------- WebKit (Chrome, Edge, Safari, Opera) ---------- */
.scrollableDiv::-webkit-scrollbar {
  width: 10px;        /* vertical bar width */
  height: 10px;       /* horizontal bar height */
}

.scrollableDiv::-webkit-scrollbar-track {
  background: var(--background-200);
  border-radius: 8px;
}

.scrollableDiv::-webkit-scrollbar-thumb {
  background-color: var(--primary-600);
  border-radius: 8px;
  border: 2px solid var(--background-200); /* creates a gap around thumb */
}

.scrollableDiv::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-500);
}

.scrollableDiv::-webkit-scrollbar-thumb:active {
  background-color: var(--primary-700);
}

.scrollableDiv::-webkit-scrollbar-corner {
  background: transparent; /* clean corner when both bars show */
}






#leftMenuBtn .hamburger,
#leftMenuBtn .close-x,
#leftMenuBtn .hamburger::before,
#leftMenuBtn .close-x::before,
#leftMenuBtn .hamburger::after,
#leftMenuBtn .close-x::after{
  display: none !important;
  content: none !important;
}
#leftMenuBtn.btn-open .hamburger,
#leftMenuBtn.btn-closed .hamburger,
#leftMenuBtn.btn-open .close-x,
#leftMenuBtn.btn-closed .close-x{
  display: none !important;
}

#leftMenuBtn{
  position: relative;
  flex: 0 0 var(--die-slot);   /* reserve space in the row */
  height: 48px;                /* approximate navbar height; adjust as needed */
  display:flex;
  align-items:center;
}

/* Keep the dice visually centered within its slot */
#leftMenuBtn .cube-container{
  position:absolute;
  inset: 0;                    /* fill the slot */
  display:flex;
  align-items:center;
  justify-content:center;
  /* if your cube uses transforms, leave them as-is */
}

/* Ensure the dice doesn't cover the brand text if they overlap at all */
#leftMenuBtn{ z-index: 1; }
.brand-wrap{ z-index: 2; }

/* Small gap between dice and brand */
.brand-wrap{ margin-left: 8px; }


/* two-line brand */
.navbar-brand{
  padding: 0;
  margin: 0;
  text-decoration: none;
  color: var(--background);
}

/* title + subline sizes (responsive but steady) */
.brand-title{
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.05;
  color: var(--background);
}
.brand-sub{
  font-family: "Faculty Glyphic", system-ui, sans-serif; /* or your body font */
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin-top: 2px;
  color: var(--background-300);
}
.brand-tagline{
  margin-top:4px;
  font-size: clamp(10px, 1vw, 14px);
  line-height:1.1;
  max-width: min(40vw, 420px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* trims gracefully if too long */
  font-style: italic;
  margin-left: 10px;
    color: var(--primary-300);

}

/* keep the brand text crisp over translucent navbar */
.navbar{ color: var(--text); }

/* optional: on very narrow screens, gently reduce brand size */
@media (max-width: 420px){
  .brand-title{ font-size: 18px; }
  .brand-sub{ font-size: 10px; letter-spacing: .1em; }
  .brand-tagline{ display:none; }
}

/* #branding {
  .brandingTitle {
    position: absolute;
    top: 0;
    left: 100px;
    z-index: 9999;
    color: var(--text);
  }

  .brandingSubheader {
    position: absolute;
    top: 20;
    left: 120px;
    z-index: 9999;
    color: var(--text);
  }
} */

.menuBubble
{
   position: absolute;
   width: 325px;
   height: 50px;
   left: 10px;
   top: 75px;
   padding: 0px;
   background: #000000;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   z-index: 9999;
}

.menuBubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: #000000 transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -10px;
    left: 14px;
}

.menuBubbleText {
  position: relative;
  font-size: 1.1rem;
  color: var(--text-50);
  left: 20px;
  top: 12px;
}

/* Global */
*{ box-sizing: border-box; }
body{
  background: var(--background);
  color: var(--text);
  font-family: "Faculty Glyphic", sans-serif;
  font-weight: 300;
}

/* Navbar adopts theme */
.navbar.navbar-dark{
  /* fallback if color-mix unsupported */
  background: var(--primary);
  /* 15% opacity look */
  background: rgb(from var(--primary) r g b / 0.875);
  color: var(--text);
  height: 65px;
}

.navbar .icon-btn{ color: var(--text); }

.navbar-brand{ color: var(--text); }

.navbar .container-fluid{
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* important: not center/space-between */
}

#rightHomeBtn{
  margin-left: auto;             /* pushes it to the right side */
  margin-right: 0.75rem;         /* space before rightMenuBtn */
  color: var(--background);
  cursor: pointer;
}

#rightMapBtn{
  margin-left: auto;             /* pushes it to the right side */
  margin-right: 0.75rem;         /* space before rightMenuBtn */
  color: var(--background);
  cursor: pointer;
}

/* right button stays at the far right */
#rightMenuBtn{ flex: 0 0 auto; }



/* Quick Menu (top-right) — force theme colors */
#quickMenu{
  position: fixed; top: 55px; right: 28px; z-index: 9999;
  width: 300px;
  /* fallback */
  background: var(--primary);
  /* 15% opacity look */
  background: var(--background);
  color: var(--text);
  border: 1px solid #000;
  border-radius: 0px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  display: none;
}
#quickMenu.open{ display:block; }

#quickMenu .qm-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: .75rem;
  padding:.6rem .8rem; border-bottom:1px solid #000;
}

/* NEW: profile cluster */
.qm-profile{
  display:flex; align-items:center; gap:.55rem;
}
.qm-avatar{
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden; border: 1px solid #000; flex: 0 0 36px;
}
.qm-avatar img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.qm-avatar .qm-dot{
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--notif);
  border: 2px solid #000;
}

#quickMenu .qm-title{ font-weight:600; color: var(--text); margin-left:auto; }
#quickMenu .qm-close{
  appearance:none;border:0;background:transparent;color:var(--text);
  font-size:1.25rem; line-height:1; padding:.25rem;
}

#quickMenu .qm-body{ padding:.75rem .8rem; color: var(--text); }
#quickMenu a{
  display:block; padding:.5rem .6rem; text-decoration:none; color: var(--primary);
  border-radius:3px;
}
#quickMenu a:hover{ 
  /* background: rgb(from var(--primary) r g b / 0.15);
  color: var(--text);
  border: 1px dotted rgb(from var(--primary) r g b / 0.45); */
}

#themeSelect{
  background: var(--background);
  color: var(--text);
  border-color: #000;
}


/* Overlay region */
.site-inner{
  position: fixed; left:0; right:0; bottom:0; top: var(--nav-h);
  display:none; z-index: 1080; background: transparent;
}
.site-inner.open{ display:block; }

/* Accordion container */
.accordion-group{
  position: relative; list-style:none; margin:0; padding:0; height:100%;
}

/* Panels: contiguous, no gap/radius */
.accordion-group > li{
  position:relative; height:100%;
  color: var(--text);
  padding:0; border-radius:0; overflow:hidden;
}

/* Background images keep perspective */
.panel-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: 50% 50%;
  pointer-events:none; user-select:none;
}
/* Hard-fix panel 3 */
.accordion-group > li:nth-child(3) .panel-bg{
  object-fit: cover !important; object-position: 50% 50% !important;
}

.panel-inset{ 
  overflow: visible; 
padding-top: 25px;
}

/* Scrim overlay:
   - uses theme background color
   - opacity fades to 0 on expanded panel (see rules below) */
/* Scrim overlay uses theme background; expanded panel fades to 0 via existing rules */
.panel-scrim{
  position:absolute; inset:0; z-index:1;
  background: var(--background);
  opacity: var(--scrim-opacity);
  transition: opacity 160ms ease;
}

/* Title box: 50% of --primary, 1px black border, larger text */
.panel-titlebox{
  position:absolute; top:24px; left:0; z-index:2;
  /* fallback */
  background: var(--primary);
  /* 50% opacity look */
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  color: var(--text);
  padding: 12px 14px;
  margin-top: 25px;
  border: 1px solid rgb(from var(--background) r g b / 0.25);
  height: 80px;
  min-width: 30%;
  max-width: 85%;
  border-left: 0;
  display: flex;
  align-items: center;
}
.panel-titlebox h3{
  margin:0;
  font-size:1.3rem;
  font-weight:400; 
  letter-spacing:.34px; 
  color: var(--text-50);
  text-align: center;
  margin: 0;
  line-height: 1.4;  
}


/* Animation states (JS handles left/width during intro/closing) */
.accordion-group.intro,
.accordion-group.closing{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.accordion-group.intro .panel-inset,
.accordion-group.closing .panel-inset {
  left: 0;
  width: 100%;
  top: 0;
  bottom: 0;
}

/* Settled (flex); animated hover via width transition */
.accordion-group.settled{
  display:flex; height:100%;
}
.accordion-group.settled > li{
  flex:0 0 auto;
  transition: width 150ms var(--ease);
}
.accordion-group.settled.base > li{ width:33%; }

/* Active widths */
.accordion-group.active-1 > li:nth-child(1){ width:var(--focus); }
.accordion-group.active-1 > li:not(:nth-child(1)){ width:var(--rest); }

.accordion-group.active-2 > li:nth-child(2){ width:var(--focus); }
.accordion-group.active-2 > li:not(:nth-child(2)){ width:var(--rest); }

.accordion-group.active-3 > li:nth-child(3){ width:var(--focus); }
.accordion-group.active-3 > li:not(:nth-child(3)){ width:var(--rest); }


/* Scrim fade to 0 on the active/expanded panel (settled) */
.accordion-group.active-1 > li:nth-child(1) .panel-scrim{ opacity: 0; }
.accordion-group.active-2 > li:nth-child(2) .panel-scrim{ opacity: 0; }
.accordion-group.active-3 > li:nth-child(3) .panel-scrim{ opacity: 0; }

/* Also fade scrim during INTRO when we pre-mark active-1 */
.accordion-group.intro.active-1 > li:nth-child(1) .panel-scrim{ opacity: 0; }

.accordion-group.locked{ pointer-events:none; }

/* Mobile: rotate titlebox, keep theme colors */
@media (max-width:768px){
  .panel-titlebox{
    top: 2%;
    left: 8px;
    
    /* Center the BOX vertically in the panel (order matters!) */
    transform: translateY(-50%) rotate(90deg);
    transform-origin: left center;

    width: 200px;
    height: 50px;
    padding: 10px 12px;
    max-width: none;

    /* Center the TEXT inside the box */
    display: flex;
    align-items: center;      /* vertical (in the box’s own axis) */
    justify-content: center;  /* horizontal */
    text-align: center;       /* multi-line centering */
  }

  .panel-titlebox h3{
    margin: 0;
    line-height: 1.2;
    width: 100%;
    text-align: center;
    padding-bottom: 12px;
  }

  .accordion-group.active-1 > li:nth-child(1) .panel-titlebox,
  .accordion-group.active-2 > li:nth-child(2) .panel-titlebox,
  .accordion-group.active-3 > li:nth-child(3) .panel-titlebox {
    background: var(--primary);
  }
}

/* Icon swap inherits theme text */
.hamburger, .close-x{ display:inline-block; vertical-align:middle; color: var(--text) !important; }
.btn-open .hamburger{ display:none; }
.btn-open .close-x{ display:inline-block; }
.btn-closed .hamburger{ display:inline-block; }
.btn-closed .close-x{ display:none; }

/* Inset container: between header bottom and panel bottom with even spacing */
.panel-inset{
  position: absolute;
  left: 5%;
  width: 90%;

  /* sits exactly under the header + an even gap */
  top: calc(var(--header-offset, 14px) + var(--titlebox-h, 0px) + var(--inset-gap));
  /* same gap to the bottom so spacing is even */
  bottom: var(--inset-gap);

  background: transparent;
  /* border: 1px solid #000; */
  overflow: auto;

  opacity: 0;               /* hidden when panel not expanded */
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* Fade in the inset when the panel is expanded (3-panel build) */
.accordion-group.active-1 > li:nth-child(1) .panel-inset{ opacity: 1; pointer-events: auto; }
.accordion-group.active-2 > li:nth-child(2) .panel-inset{ opacity: 1; pointer-events: auto; }
.accordion-group.active-3 > li:nth-child(3) .panel-inset{ opacity: 1; pointer-events: auto; }

/* Also visible during the intro flyout when panel 1 is pre-marked active */
.accordion-group.intro.active-1 > li:nth-child(1) .panel-inset{ opacity: 0; pointer-events: auto; }

/* Responsive grid for menu boxes */
.menu-grid{
  display: grid;
  grid-template-columns: 1fr;         /* one item per row */
  gap: 35px;
  align-content: start;
  justify-items: center;              /* base centering */
  padding: 12px;
  /* horizontal stagger amount (container-relative) */
  --stagger-x: 30%;
  --fade-start: 60%;     /* keep the first 60% fully visible */
  --fade-softness: 30%;  /* fade out over the next ~30% (clamped by 100%) */
}



/* Make sure inset sits above the scrim so hover works */
.panel-inset{ z-index: 2; }

/* Base card – no real bg/border; draw them with pseudos */
.menu-item{
  isolation: isolate;             /* new stacking context */
  position: relative;
  background: none; border: none;
  color: var(--primary-800);
  width: clamp(300px, 50%, 840px);
  min-height: 45px;
  margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  text-align: center; user-select: none;
  transition: margin 160ms ease;
  /* Guard: never let the element itself be masked (in case of old rules) */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  font-size: 1.2rem;
}

@media (max-width: 1140px){
  .menu-item{
    font-size: 1rem;
  }
}

@media (max-width: 960px){
  .menu-item{
    font-size: 0.95rem;
  }
}

@media (max-width: 820px){
  .menu-item{
    font-size: 0.9rem;
  }
}

@media (max-width: 560px){
  .menu-item{
    font-size: 0.75rem;
  }
}


/* Text/content ALWAYS above bg+border */
.menu-item .mi-content{
  position: relative; z-index: 3;
  opacity: 1 !important;
  display: inline-block;
  max-width: var(--solid-band);         /* keep text inside solid region */
  word-break: break-word;
  padding-block: 12px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none !important;
  top: -5px;
}

.mi-corner{
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;                    /* above bg/border; text is still readable */
  filter: invert(100%);
}

/* top left - standard */
.mi-corner.tl { 
  background-image: var(--corner-outer-img); 
}

/* top right - standard - reversed */
.mi-corner.tr { 
  background-image: var(--corner-outer-img); 
}  

/* bottom left - standard */
.mi-corner.bl { 
  background-image: var(--corner-inner-img); 
  width: var(--corner-size-bottom);
  height: var(--corner-size-bottom);
} 

/* bottom left - standard */
.mi-corner.br { 
  background-image: var(--corner-inner-img-reversed); 
  width: var(--corner-size-bottom);
  height: var(--corner-size-bottom);
} 

/* Top-left (outside, left side) */
.mi-corner.tl{
  /* base: step outside by corner-size + overhang (+ border) */
  left: calc(-1 * (var(--mi-pad) + var(--border-w,2px) + var(--corner-overhang) + var(--corner-size))
             + var(--tl-nudge-x));
  top:  calc(-1 * (var(--mi-pad) + var(--corner-size))
             - var(--tl-nudge-y));
  transform: none;  /* make sure no previous transform overrides this */
}

/* Top-Right (outside) */
.mi-corner.tr{
  /* step outside by corner-size (image width) + overhang + border, then apply your nudges */
  right: calc(
    -1 * (var(--mi-pad) + var(--border-w,2px) + var(--corner-overhang) + var(--corner-size))
    + var(--tr-nudge-x)
  );
  top: calc(
    -1 * (var(--mi-pad) + var(--corner-size))
    - var(--tr-nudge-y)
  );
  transform: scaleX(-1); /* mirror the art only */
}

/* Bottom-right (inset, right side) */
.mi-corner.br{
  bottom: var(--corner-inset);
  right: 0;
  transform-origin: bottom right;
}

/* BOTTOM-LEFT (inside) */
.mi-corner.bl{
  bottom: var(--corner-inset);
  left: 0;
  transform-origin: bottom left;
}

/* Background layer (70% of theme background) */
.menu-item::before{
  content:""; position:absolute; inset:0;
  z-index: 1; pointer-events:none;
  background: var(--background);
  opacity: .70;                         /* readable tint */
}

/* Border layer (1px) to be faded on far side */
.menu-item::after{
  content:""; position:absolute; inset:0;
  z-index: 2; pointer-events:none;
  border: 1px solid #000;
}

/* Stagger positions */
.menu-grid .menu-item:nth-child(odd){  margin-right: var(--stagger-x); justify-content: flex-start; text-align: left;  padding-inline-start: 14px; }
.menu-grid .menu-item:nth-child(even){ margin-left:  var(--stagger-x); justify-content: flex-end;   text-align: right; padding-inline-end: 14px; }

.menu-grid{
  padding-inline: calc(12px + var(--corner-overhang) + var(--border-w));
}

/* Hover: solid background (no fade), keep trimmed border unless you want full border */
.menu-item:hover::before{
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 0.85;                           /* solid var(--background) */
}

  .menuIcon-size{
    width: 36px !important;
    height: 36px !important;
    line-height: 36px;              /* helps with icon-font baselines */
  }

  /* if it’s an icon font (e.g. RPG Awesome ra-*) */
  .menuIcon-size::before{
    font-size: 36px !important;
    line-height: 36px !important;
  }

  /* if there’s an inline <svg> inside */
  .menuIcon-size svg{
    width: 100% !important;
    height: 100% !important;
  }

.menuLink {
  text-decoration: none;
  color: var(--primary);
}

.menuLink:hover {
  color:  var(--primary-800) !important;
}

.homepageIntro{
  margin: 50px;
  padding: 50px;
  border: 1px dotted var(--primary);
  color: var(--primary);
  background-color: #ffffff77;
}

.introNote {
  color: var(--danger) !important;
  font-weight: 600;
}

.introNoteTxt {
  color: var(--text) !important;
  font-weight: 300;
}

.introDie {
  width: 96px;
}

.introHeading {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px dotted var(--primary);
  width: 100%;
}

.introOnlinePad {
  margin-left: 5px;
}

.introLeftPad {
  margin-left: 5px;
}

.brand-date {
  margin-left: 15px;
  font-size: 0.8rem;
  color: var(--text);
}

.introColor {
  color: var(--primary) !important;
}

.pageTitle {
  width: 100%;
  font-size: 1.3rem;
  color: var(--text);
  background-color: rgb(from var(--primary) r g b / 0.25);
  margin: 0px;
  padding: 0px;
  border-bottom: 1px dotted var(--primary);
  height: 42px;
}

.pageTitle span {
  position: relative;
  top: 5px;
  left: 20px;
}


.qmAuthHeader .qmLink { padding: .25rem .5rem; }
.qmAuthHeader img { box-shadow: 0 0 0 2px rgba(255,255,255,.15); }