/* FONTS */

@font-face {
  font-family: 'Hellios Gothic';
  src: url('../../assets/fonts/hellios-gothic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Thunderstrike Halftone';
  src: url('../../assets/fonts/thunderstrikehalf.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html { scroll-behavior: smooth; }


/* ===== BANNER ===== */
.banner {
  width: calc(var(--site-logo-display-width) / var(--site-global-zoom));
  max-width: calc(var(--site-logo-display-width) / var(--site-global-zoom));
  margin-top: 4px;
  position: relative;
  cursor: default;
  z-index: 20 !important;
}

/* Make banner-wrap the positioning context and keep the main logo centered.
   Important: side banners are positioned absolutely so they do not affect
   the vertical centering of the main logo. This preserves the side images'
   visual positions while keeping the logo centered both horizontally and vertically. */
.banner-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  /* Side banners: fixed above 1350px, then move toward center linearly down to 800px */
  --side-banner-offset: clamp(280px, calc(0.181818 * 100vw + 134.545px), 380px);
  

  /* Left banner nudge: keep 800=14px and 1350=54px,
   but make 850px slightly closer to center (smaller nudge) */
  --left-banner-nudge-850: 14.05px;

  --left-banner-nudge-a: clamp(
  14px,
  calc((100vw - 800px) * 0.05 + 14px),
  var(--left-banner-nudge-850)
);

  --left-banner-nudge-b: clamp(
  var(--left-banner-nudge-850),
  calc((100vw - 850px) * 0.075 + var(--left-banner-nudge-850)),
  54px
);

  --left-banner-nudge: max(var(--left-banner-nudge-a), var(--left-banner-nudge-b));
  margin: 0 auto;
  /* Pull the logo up so it overlaps the top glass strip (strip stays in the header) */
  margin-top: calc(var(--header-glass-height) * -0.70 - 6px);
}

/* Side banners are removed from normal flow so they don't push the logo down.
   Their visual offsets are preserved using left/right and any transforms. */
.banner-side {
  width: 140px;
  height: auto;
  display: block;
  margin: 0;
  cursor: default;
  z-index: 6;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

/* Keep left/right sizing and horizontal offsets similar to previous design.
   Adjust these values if you want the side banners closer/further from the main logo. */

.banner-side.left {
  width: 246px;
  max-width: none;
  left: calc(50% - var(--side-banner-offset) - var(--left-banner-nudge));
  top: 50%;
  transform: translateY(calc(-50% + 30.5px));
  z-index: 0;
  position: absolute;
}

.banner-side.right {
  width: 116px;
  max-width: none;
  right: calc(50% - var(--side-banner-offset));
  top: 50%;
  transform: translateY(calc(-50% + 73.5px));
  margin-left: 80px;
  position: absolute;
  z-index: 41;
}

.dashboard-header-root {
  position: absolute;
  top: 56.6%;
  left: 138%;
  transform: translateY(-50%) translateX(calc(clamp(-48px, calc((100vw - 927px) / 2), 24px) - (var(--site-global-zoom-delta) * 172px))) scale(calc(0.262 + (var(--site-global-zoom-delta) * 0.178)));
  transform-origin: left center;
  /* Must render above the right side banner image */
  z-index: 46;
  pointer-events: auto;
}

/* Keep per-image overrides for the main logo inside the banner-wrap */
.banner-wrap .banner {
  width: calc(var(--site-logo-display-width) / var(--site-global-zoom)) !important;
  max-width: calc(var(--site-logo-display-width) / var(--site-global-zoom)) !important;
  margin-top: 16px !important;
  margin-bottom: 6px !important;
}

/* ===== LOGO OVERRIDE (specific, only to ensure logo size/position applied) =====
   Purpose: enlarge and nudge the logo up while avoiding interference with other rules.
   This is intentionally highly-specific and only touches the .banner element. */
body .site-header > .banner-wrap > .banner {
  width: calc(var(--site-logo-display-width) / var(--site-global-zoom)) !important;
  max-width: calc(var(--site-logo-display-width) / var(--site-global-zoom)) !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  transition: none !important;
}
body .site-header > .banner-wrap > .logo-cycle-stage {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}
body .site-header > .banner-wrap > .logo-cycle-stage > .banner {
  width: calc(var(--site-logo-display-width) / var(--site-global-zoom)) !important;
  max-width: calc(var(--site-logo-display-width) / var(--site-global-zoom)) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transition: none !important;
}

body .site-header > .banner-wrap > .banner,
body .site-header > .banner-wrap > .logo-cycle-stage {
  position: relative;
  z-index: 46;
}



@keyframes va-secret-room-banner-pulse {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  18% {
    filter: brightness(1.2) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 24px rgba(172, 108, 255, 0.34));
  }
  36% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  54% {
    filter: brightness(1.24) drop-shadow(0 0 18px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 30px rgba(172, 108, 255, 0.42));
  }
  72% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
}

body.va-secret-room-clickable .banner-side {
  pointer-events: auto;
  cursor: pointer;
  transition: filter .18s ease;
}

body.va-secret-room-burst .banner-side.left,
body.va-secret-room-burst .banner-side.right {
  animation: va-secret-room-banner-pulse 1.55s ease-in-out 1;
}

body.va-secret-room-clickable .banner-side.left:hover,
body.va-secret-room-clickable .banner-side.right:hover {
  filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 255, 255, 0.32)) drop-shadow(0 0 24px rgba(170, 112, 255, 0.36));
}



/* ===== HEADER (Banner + Menu + Dashboard) ===== */
.site-header {
  position: relative;
  /* Keep header dropdowns (notif/wish/cart/gear) above page-specific frames (e.g. yellow frames). */
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  --header-glass-height: 43px;
  /* Reserve space for the absolute glass strip so the logo keeps its original vertical position */
  padding-top: var(--header-glass-height);
}

/* --- Header: docks inside glass band --- */
.header-strip{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-glass-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  /* Must stay above the right side banner image (see .banner-side.right z-index)
     so dropdowns and header UI don't get covered. */
  z-index: 45;
}
.header-docks{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.header-strip::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.22);
  pointer-events: none;
}

.header-strip .dock.outside{
  transform: translateY(0);
}

/* --- Header: thin glass band (top overlay, no layout shift) --- */
.site-header::before{
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top: 0;
  height: var(--header-glass-height, 38px);
  background: rgba(40,40,40,0.45);
  border-top: 1px solid rgba(255,255,255,0.22);
  border-bottom: none;
  pointer-events: none;
  z-index: 0;
}

/* Keep header contents above the overlay */
.site-header > nav.menu-box{ position: relative; z-index: 1; }

/* ===== GLOBAL ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: #000;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

html {
  --site-global-zoom: 1;
  --site-global-zoom-delta: calc(var(--site-global-zoom) - 1);
  --site-logo-display-width: 286px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

#va-shell-zoom-root {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  zoom: var(--site-global-zoom);
}

body > footer,
body > .footer{
  margin-bottom: 0;
}

/* ===== MAIN STRUCTURE ===== */
main {
  flex: 1 0 auto;
  min-height: auto !important;
  margin-bottom: 90px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  background: transparent;
}

/* ===== CONTENT WRAPPER ===== */
.content {
  position: relative;
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px !important;
  padding: 10px 0;
  z-index: auto !important;
}

/* ===== GLOBAL OUTER FRAME (violet/rose) =====
   From 1645px down to 769px:
   - shrink the wide frame symmetrically instead of being cropped
   - keep safe gutters on small widths (calc(100vw - 44px))
   Applied to the overlay frames + .frame-container so inner frames follow as well. */
.frame-container,
.digital-screen-overlay,
.home-neon-frame.lavender,
.home-neon-frame.pink {
  width: min(1645px, calc((100vw / var(--site-global-zoom)) - 44px)) !important;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Decorative overlay frames must never block clicks/taps (notably in Firefox responsive mode). */
.digital-screen-overlay,
.home-neon-frame.lavender,
.home-neon-frame.pink{
  pointer-events: none;
}
body.route-index .digital-screen-overlay,
body.route-index .home-neon-frame.lavender,
body.route-index .home-neon-frame.pink {
  top: -42.5px;
  height: 785px;
  bottom: auto;
}
body.route-index .digital-screen-content {
  position: relative;
  min-height: 900px;
}
body.route-index .wof-mini {
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%);
  top: 676px;
  margin-top: 0 !important;
  z-index: 5;
}

/* ===== INITIAL SHELL PRELOAD (non-home direct refresh) =====
   Reserve the outer frame space before the page content is injected,
   so the frame does not start collapsed and then expand. */
body.route-preload .digital-screen-overlay {
  top: -42.5px;
  bottom: 64px;
  height: auto;
}

body.route-preload .home-neon-frame.lavender,
body.route-preload .home-neon-frame.pink {
  top: -42.5px;
  bottom: 75px;
  height: auto;
}

body.route-preload .digital-screen-content {
  min-height: clamp(760px, calc(100vh + 120px), var(--route-preload-screen-min, 1120px));
}

body.route-shop,
body.route-checkout {
  --route-preload-screen-min: 1180px;
}

body.route-about,
body.route-blog,
body.route-achievements-and-rewards {
  --route-preload-screen-min: 1280px;
}

body.route-account {
  --route-preload-screen-min: 1500px;
}

body.route-the-character-series,
body.route-the-world-of-eisth,
body.route-museum-the-character-series,
body.route-museum-the-world-of-eisth,
body.route-secret-room,
body.route-secret-vault {
  --route-preload-screen-min: 960px;
}

/* ===== MENU ===== */
nav.menu-box {
  position: relative;
  z-index: 4;
  width: 76%;
  max-width: 1087px;
  margin: 0.7rem auto;
  background: #000;
  border: 4px solid rgba(100,100,100,0.4);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0;
}
.menu-box {
  margin-top: -2px !important;
  margin-bottom: 14px !important;
  padding: 0.6rem 0 !important;
}
nav.menu-box img.arrow-left,
nav.menu-box img.arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
}
nav.menu-box img.arrow-left  { left: -38px; }
nav.menu-box img.arrow-right { right: -38px; }
nav.menu-box ul {
  list-style: none;
  display: flex;
  gap: 28px;
}
nav.menu-box ul li { display: inline-block; margin: 0 2px; }
nav.menu-box ul a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 4px 8px;
  white-space: nowrap;
  border: 2px solid #fff;
  border-radius: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  text-decoration: none;
  color: #fff;
  transition: background 0.3s, color 0.3s;
}
nav.menu-box ul a:not([href$="the-character-series.html"]):not([href$="the-world-of-eisth.html"]):hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
nav.menu-box li.blue-link a {
  color: #fff;
  font-family: 'IM Fell English SC', serif;
  font-style: italic;
  font-weight: 700;
}
nav.menu-box li.pink-link a {
  color: #fff;
  font-family: 'Thunderstrike Halftone', sans-serif;
  justify-content: flex-start;
  padding: 4px 12px 4px 4px;
}
.menu-box a.active {
  color: #9f9fd0 !important;
  border-color: #9f9fd0 !important;
  font-weight: bold !important;
  background: transparent !important;
  text-shadow: 0 0 6px #9f9fd033;
}
nav.menu-box li:not(.blue-link):not(.pink-link) a {
  text-shadow: 0 0 4px #fff, 0 0 8px #fff !important;
}
.menu-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow-left,
.arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: auto;
}
.home-link { cursor: pointer; }

/* ===== SUBTITLE BOX ===== */
.subtitle-box {
  background: rgba(0,0,0,0.1);
  border: 1px solid #fdfdf4;
  padding: 9px 20px;
  border-radius: 4px;
  width: fit-content;
  box-shadow: 0 0 1px #fdfdf4, 0 0 2px #fdfdf4, inset 0 0 16px rgba(253,253,244,0.35);
}
.subtitle {
  font-family: 'Allura', cursive;
  font-size: 1.45rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.7), 0 0 10px rgba(255,255,255,0.55), 0 0 14px rgba(255,255,255,0.4);
}
.subtitle:empty::before {
  content: var(--va-shell-subtitle-desktop, "");
  display: block;
}
.frame-container .subtitle-box { margin-left: auto; margin-right: auto; position: relative; top: 10px; }
.frame-container .subtitle-box .subtitle { text-align: center; }

@media (max-width: 999.98px) and (min-width: 766px) {
  .subtitle:empty::before {
    content: var(--va-shell-subtitle-tablet, var(--va-shell-subtitle-desktop, ""));
  }
}

@media (max-width: 765px) {
  .subtitle:empty::before {
    content: var(--va-shell-subtitle-mobile, var(--va-shell-subtitle-tablet, var(--va-shell-subtitle-desktop, "")));
  }
}

/* ===== SUBTITLE PRELOAD STATE (refresh only) ===== */
body.route-the-character-series .frame-container .subtitle-box {
  border-color: #a9a2e8 !important;
  box-shadow:
    inset 0 0 20px rgba(169,162,232,.35),
    0 0 12px rgba(169,162,232,.45) !important;
}

body.route-the-character-series .frame-container .subtitle-box .subtitle {
  color: #c5bdff !important;
  text-shadow:
    0 0 7px #c5bdff,
    0 0 16px #c5bdff,
    0 0 30px #9085f2,
    0 0 48px #6c63cc !important;
}

body.route-the-world-of-eisth .frame-container .subtitle-box {
  position: relative;
  overflow: hidden;
  border-color: var(--card-border, #ff66cc) !important;
  box-shadow: 0 0 8px rgba(255,119,192,.45), 0 0 16px rgba(255,119,192,.45) !important;
}

body.route-the-world-of-eisth .frame-container .subtitle-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255, 51, 204, 0.17) 4px, rgba(255, 51, 204, 0.17) 6px);
  z-index: 0;
}

body.route-the-world-of-eisth .frame-container .subtitle-box .subtitle {
  position: relative;
  z-index: 1;
  color: var(--accent-1, #ff69b4) !important;
  text-shadow: 0 0 4px var(--card-border, #ff66cc), 0 0 10px #ff3399, 0 0 18px #ff3399 !important;
}

body.route-museum-the-character-series .frame-container .subtitle-box {
  border-color: #a9a2e8 !important;
  box-shadow:
    inset 0 0 20px rgba(169, 162, 232, 0.35),
    0 0 12px rgba(169, 162, 232, 0.45) !important;
}

body.route-museum-the-character-series .frame-container .subtitle-box .subtitle {
  color: #c5bdff !important;
  text-shadow:
    0 0 7px #c5bdff,
    0 0 16px #c5bdff,
    0 0 30px #9085f2,
    0 0 48px #6c63cc !important;
}

body.route-museum-the-world-of-eisth .frame-container .subtitle-box {
  border-color: #ff66cc !important;
  box-shadow:
    0 0 8px rgba(255, 119, 192, 0.45),
    0 0 16px rgba(255, 119, 192, 0.45) !important;
}

body.route-museum-the-world-of-eisth .frame-container .subtitle-box .subtitle {
  color: #ff69b4 !important;
  text-shadow:
    0 0 4px #ff66cc,
    0 0 10px #ff3399,
    0 0 18px #ff3399 !important;
}

html[data-va-route-variant="character-detail"] body.route-the-character-series .frame-container .subtitle-box {
  border-color: #9fa5f0 !important;
  box-shadow:
    inset 0 0 20px rgba(159,165,240,.36),
    0 0 12px rgba(159,165,240,.46) !important;
}

html[data-va-route-variant="character-detail"] body.route-the-character-series .frame-container .subtitle-box .subtitle {
  color: #bcc2ff !important;
  text-shadow:
    0 0 7px #bcc2ff,
    0 0 16px #bcc2ff,
    0 0 30px #7d85e8,
    0 0 48px #5f68cf !important;
}

html[data-va-route-variant="eisth-detail"] body.route-the-world-of-eisth .frame-container .subtitle-box {
  border-color: #ffb3e0 !important;
  box-shadow:
    inset 0 0 20px rgba(255,179,224,.26),
    0 0 12px rgba(255,179,224,.46) !important;
}

html[data-va-route-variant="eisth-detail"] body.route-the-world-of-eisth .frame-container .subtitle-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255,179,224,0.17) 4px, rgba(255,179,224,0.17) 6px);
  z-index: 0;
}

html[data-va-route-variant="eisth-detail"] body.route-the-world-of-eisth .frame-container .subtitle-box .subtitle {
  color: #ffb3e0 !important;
  text-shadow:
    0 0 4px #ffb3e0,
    0 0 10px #ff80cc,
    0 0 18px #ff80cc !important;
}

/* ===== CATEGORIES ===== */
.menu-thecharacterseries,
.section-thecharacterseries {
  color: #d6a5ff;
  font-weight: bold;
  text-shadow: 0 0 6px #d6a5ff, 0 0 12px #d6a5ff;
}
.categories {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: clamp(520px, calc(58vw + 120px),640px) !important;
  margin: 17px auto !important;
  gap: 12px !important;
}
.categories .category { margin-top: 20px !important; }

/* Category logo — keep proportions (perfect state) */
.category-logo {
  display:block !important;
  width: 118% !important;
  height:auto !important;
  object-fit:contain !important;
  margin: 13px 0 19px !important;
}



/* --- home showcase: allow image to scale inside fixed neon frame (no layout shift) --- */
.category-media {
  display: block;
  width: calc(118% + 16px) !important;
  margin: 13px 0 19px !important;
  padding-inline: 8px;
  box-sizing: border-box;
  line-height: 0;
  overflow: hidden;
  position: relative;
}

/* keep original image rendering (including screen blend) */
.category-media .category-logo {
  display:block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  transition: transform .45s ease !important;
  transform-origin: center center !important;
  mix-blend-mode: screen;
}

/* scale only the image inside the frame */


.categories > .category { position: relative; }
.category {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.category.blue-neon,
.category.pink-neon {
  padding: 20px 20px 15px !important;
  min-height:340px !important;
  transform-origin: top center;
}
.categories > .category.blue-neon,
.categories > .category.pink-neon {
  margin-top: 0 !important;
  transform: scale(0.95);
  transform-origin: top center;
}




/* ===== CATEGORY LOGO: per-user adjustments (violet left, pink right, stronger glow, screen blend) ===== */
.category-logo {
  display: inline-block;
  background: transparent !important;
  border-radius: 0;
  position: relative;
  z-index: 50 !important;
  mix-blend-mode: screen;
  outline-offset: 0;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}

/* LEFT PANEL (violet theme) — stronger violet glow */
.categories > .category.blue-neon .category-logo,
.category.blue-neon .category-logo {
  outline: 3px solid #bbaeff;
  box-shadow:
    0 0 8px #bbaeff,
    0 0 22px #bbaeff,
    0 0 48px rgba(187,174,255,0.28),
    inset 0 0 22px rgba(187,174,255,0.18);
}



/* === LEFT PANEL: horizontal digital-screen overlay (varied spacing, no animation) ===
   Subtle irregular spacing using layered gradients
*/
.category.blue-neon .category-media::after {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  z-index: 55;
  border-radius: 0;
  mix-blend-mode: screen;
  opacity: 0.14;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.30) 0 1px,
      rgba(255,255,255,0) 1px 8px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.18) 0 1px,
      rgba(255,255,255,0) 1px 13px
    );
  background-position: 0 0, 0 3px;
  background-size: 100% auto, 100% auto;
  transform: translateZ(0);
}
/* RIGHT PANEL (pink theme) — stronger pink glow */
.categories > .category.pink-neon .category-logo,
.category.pink-neon .category-logo {
  outline: 3px solid #ff66e0;
  box-shadow:
    0 0 8px #ff66e0,
    0 0 22px #ff66e0,
    0 0 48px rgba(255,102,224,0.28),
    inset 0 0 22px rgba(255,102,224,0.16);
}

/* Keep transform origin consistent with category styles */
.category.blue-neon .category-logo,
.category.pink-neon .category-logo {
  transform-origin: top center;
}


/* Also ensure themed categories keep their transform origin previously set */
.category.blue-neon .category-logo,
.category.pink-neon .category-logo {
  transform-origin: top center;
}




.category.blue-neon .category-logo,
.category.pink-neon .category-logo {
  transform-origin: top center;
}

.blue-neon h2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 80px !important;
  width: 96.6% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
  margin: 1px calc(1.9% - 0.5px) 0.75rem calc(1.5% + 0.5px) !important;
  font-family: 'Great Vibes', cursive !important;
  color: #cfc4ff !important;
  font-size: 1.6rem !important;
  line-height: 0.95 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: -0.012em !important;
  text-shadow: 0 0 6px #8ab6ff, 0 0 14px #8ab6ff, 0 0 28px #5f5fa0, 0 0 48px #5f5fa0;
  border: 1px solid #bbaeff !important;
  border-radius: 4px !important;
  background: rgba(0,0,0,0.5) !important;
}
.category.pink-neon > h2.pink-link .ghost-dot { color: transparent; text-shadow: none !important; pointer-events: none; }
.category.pink-neon h2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 98%;
  max-width: 100%;
  margin: 2px auto 0.75rem;
  box-sizing: border-box;
  padding: 0 12px;
  transform: scaleX(0.98);
  height: 79px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-family: 'Thunderstrike Halftone', sans-serif;
  font-size: 1.22rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 51, 102, 0.5), 0 0 16px rgba(255, 51, 102, 0.5), 0 0 24px rgba(255, 51, 102, 0.5), 0 0 32px rgba(255, 51, 102, 0.5);
  border: 1.55px solid #ff66e0;
  border-radius: 4px;
  background: rgba(0,0,0,0.5);
}

.category.blue-neon,
.category.pink-neon {
  cursor: pointer;
}
.category.blue-neon:hover,
.category.pink-neon:hover {
  cursor: pointer;
}
body.va-ach-vector .category.blue-neon:hover {
  cursor: url("../../assets/cursors/main-arrow/arrow-left-cursor.png") 16 16, pointer;
}
body.va-ach-nova .category.pink-neon:hover {
  cursor: url("../../assets/cursors/main-arrow/arrow-right-cursor.png") 16 16, pointer;
}

.category.blue-neon {
  filter: hue-rotate(0deg) saturate(150%) contrast(93%) brightness(90%) !important;
}
.category.pink-neon {
  filter: hue-rotate(0deg) saturate(100%) contrast(90%) brightness(110%) !important;
}
.category.blue-neon > h2 {
  filter: hue-rotate(0deg) saturate(90%) contrast(107.5269%) brightness(110%) !important;
  position: relative;
  z-index: 3;
  isolation: isolate;
}
.category.pink-neon > h2 {
  filter: hue-rotate(0deg) saturate(100%) contrast(111.1111%) brightness(90.9091%) !important;
  position: relative;
  z-index: 3;
  isolation: isolate;
}
.categories > .category:not([data-reflection-clone="1"]) { z-index: 3; }
.categories > .category[data-reflection-clone="1"] {
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(calc(50% + 149px) -200vw 0 -200vw);
  -webkit-clip-path: inset(calc(50% + 149px) -200vw 0 -200vw);
}



/* --- mapped neon frame rules to wrapper --- */
.category-media, .category.blue-neon .category-media {
  outline: 3px solid #bbaeff;
  box-shadow:
    0 0 8px #bbaeff,
    0 0 22px #bbaeff,
    0 0 48px rgba(187,174,255,0.28),
    inset 0 0 22px rgba(187,174,255,0.18);
}

.category-media, .category.pink-neon .category-media {
  outline: 3px solid #ff66e0;
  box-shadow:
    0 0 8px #ff66e0,
    0 0 22px #ff66e0,
    0 0 48px rgba(255,102,224,0.28),
    inset 0 0 22px rgba(255,102,224,0.16);
}

.category-media, .category.pink-neon .category-media {
  transform-origin: top center;
}

.category-media, .category.pink-neon .category-media {
  transform-origin: top center;
}

.category-media, .category.pink-neon .category-media {
  transform-origin: top center;
}

.category-media {
  display: inline-block;
  background: transparent !important;
  border-radius: 0;
  position: relative;
  z-index: 50 !important;
  mix-blend-mode: screen;
  outline-offset: 0;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}

.category-media {
  outline: 3px solid #bbaeff;
  box-shadow:
    0 0 8px #bbaeff,
    0 0 22px #bbaeff,
    0 0 48px rgba(187,174,255,0.28),
    inset 0 0 22px rgba(187,174,255,0.18);
}

.category-media {
  outline: 3px solid #ff66e0;
  box-shadow:
    0 0 8px #ff66e0,
    0 0 22px #ff66e0,
    0 0 48px rgba(255,102,224,0.28),
    inset 0 0 22px rgba(255,102,224,0.16);
}



/* === NEWSLETTER === */
.wof-mini {
  --mini-border: 2.4px;
  --mini-radius: 6px;
  --newsletter-y: -505px;
  position: relative !important;
  z-index: 4;
  display: inline-block;
  top: var(--newsletter-y);
  border: var(--mini-border) solid transparent;
  border-radius: var(--mini-radius);
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(90deg, #9c8cff 45%, #ff66e0 55%) border-box;
}
.wof-mini > .newsletter {
  position: relative;
  z-index: 6;
  display: block;
  cursor: pointer;
  padding: 12px 21px;
  background: #000;
  border: none !important;
  border-radius: calc(var(--mini-radius) - 1px);
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem;
  color: #fdfdf4 !important;
  text-shadow: 0 0 1px rgba(255,255,240,0.6), 0 0 2px rgba(255,255,240,0.8);
}
.wof-mini-glow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: var(--mini-radius);
}
.wof-mini-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #9c8cff 47%, #c27cff 49%, #ff66e0 51%, #ff66e0 53%);
  filter: blur(12px);
  opacity: 0.9;
}


/* ===============================
   Checkout return modal (Stripe success/cancel)
   =============================== */

.va-checkout-popup{
  position: fixed;
  top: 112px;
  left: 50%;
  transform: translateX(-50%) scale(var(--site-global-zoom, 1));
  transform-origin: top center;
  width: min(560px, calc(100vw - 32px));
  padding: 16px 16px 14px;
  background: rgba(20,20,20,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  z-index: 99;
}

.va-checkout-popup--processing{
  border-color: #fdfdf4;
  box-shadow: 0 0 14px rgba(253,253,244,.28), 0 0 28px rgba(253,253,244,.16), 0 18px 50px rgba(0,0,0,.45);
}

.va-checkout-popup--paid{
  border-color: rgba(68,255,140,.9);
  box-shadow: 0 0 14px rgba(68,255,140,.26), 0 0 28px rgba(68,255,140,.16), 0 18px 50px rgba(0,0,0,.45);
}

.va-checkout-popup--cancel{
  border-color: rgba(255,155,64,.92);
  box-shadow: 0 0 14px rgba(255,155,64,.24), 0 0 28px rgba(255,155,64,.14), 0 18px 50px rgba(0,0,0,.45);
}

.va-checkout-popup--info{
  border-color: rgba(110,196,255,.92);
  box-shadow: 0 0 14px rgba(110,196,255,.24), 0 0 28px rgba(110,196,255,.14), 0 18px 50px rgba(0,0,0,.45);
}

.va-checkout-popup__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.va-checkout-popup__title{
  font-family: 'Orbitron','Montserrat',system-ui,sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.va-checkout-popup--hint-of-day{
  border-color: rgba(94, 239, 255, .82);
  box-shadow: 0 0 16px rgba(94,239,255,.24), 0 0 32px rgba(94,239,255,.16), 0 18px 50px rgba(0,0,0,.45);
}

.va-checkout-popup--hint-of-day .va-checkout-popup__top > div{
  width:100%;
}

.va-checkout-popup--hint-of-day .va-checkout-popup__title,
.va-checkout-popup--hint-of-day .va-checkout-popup__msg{
  text-align:center;
  font-family: 'Orbitron','Montserrat',system-ui,sans-serif;
}

.va-checkout-popup--hint-of-day .va-checkout-popup__title{
  color:#59e9ff;
  text-transform:none;
  text-shadow: 0 0 8px rgba(89,233,255,.38), 0 0 18px rgba(89,233,255,.22), 0 0 28px rgba(89,233,255,.14);
}

.va-checkout-popup--hint-of-day .va-checkout-popup__msg-line{
  font-family: 'Orbitron','Montserrat',system-ui,sans-serif;
  line-height: 1.65;
}

.va-checkout-popup--processing .va-checkout-popup__title{
  color: #fdfdf4;
  text-shadow: 0 0 3px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.7), 0 0 10px rgba(255,255,255,.55), 0 0 14px rgba(255,255,255,.4);
}

.va-checkout-popup--paid .va-checkout-popup__title{
  color: #44ff8c;
  text-shadow: 0 0 8px rgba(68,255,140,.42), 0 0 16px rgba(68,255,140,.22);
}

.va-checkout-popup--cancel .va-checkout-popup__title{
  color: #ffb15a;
  text-shadow: 0 0 8px rgba(255,177,90,.4), 0 0 16px rgba(255,177,90,.22);
}

.va-checkout-popup--info .va-checkout-popup__title{
  color: #8fd3ff;
  text-shadow: 0 0 8px rgba(143,211,255,.4), 0 0 16px rgba(143,211,255,.22);
}

.va-checkout-popup__msg{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  opacity: .92;
}

.va-checkout-popup__msg:empty{
  display:none;
}

.va-checkout-popup__msg-line + .va-checkout-popup__msg-line{
  margin-top: 8px;
}

.va-checkout-popup__msg-line--thank-you{
  font-family: 'Orbitron','Montserrat',system-ui,sans-serif;
  color: #f1c86b;
  text-shadow: 0 0 10px rgba(241,200,107,.34), 0 0 20px rgba(241,200,107,.18);
}

.va-checkout-popup__msg-accent--payment{
  color: #59e9ff;
}

.va-checkout-popup__msg-accent--confirmed{
  color: #9cff57;
  text-shadow: 0 0 8px rgba(156,255,87,.5), 0 0 16px rgba(156,255,87,.3), 0 0 26px rgba(156,255,87,.18);
}

.va-checkout-popup__msg-accent--voxens{
  color:#fff6b8;
  font-family:'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  text-shadow:0 0 1px rgba(255,244,182,0.88), 0 0 4px rgba(255,244,182,0.54), 0 0 12px rgba(255,244,182,0.18);
}

.va-checkout-popup--ship-stabilization-success .va-checkout-popup__msg-line{
  color:#9cff57;
  text-shadow: 0 0 8px rgba(156,255,87,.32), 0 0 16px rgba(156,255,87,.16);
}

.va-checkout-popup__msg-accent--success-teal{
  color:#59e9ff;
  text-shadow: 0 0 8px rgba(89,233,255,.4), 0 0 18px rgba(89,233,255,.24), 0 0 28px rgba(89,233,255,.14);
}

.va-checkout-popup__msg-line--order-update,
.va-checkout-popup__msg-line--order-update .va-checkout-popup__msg-link{
  color: #c987ff;
  font-style: italic;
  text-shadow: 0 0 8px rgba(201,135,255,.34), 0 0 16px rgba(201,135,255,.18);
}

.va-checkout-popup__msg-link{
  color: #8fd3ff;
}

.va-checkout-popup__close{
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
  opacity:.85;
}

.va-checkout-popup__close:hover{
  opacity: 1;
}

.va-checkout-popup__actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.va-checkout-popup__btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Orbitron','Montserrat',system-ui,sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
}

.va-checkout-popup__btn:hover{
  background: rgba(255,255,255,.12);
}

.va-checkout-popup__btn:disabled,
.va-checkout-popup__btn[aria-disabled="true"]{
  cursor:default;
  pointer-events:none;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  transform:none;
}

.va-checkout-popup__btn:disabled:hover,
.va-checkout-popup__btn[aria-disabled="true"]:hover{
  background:rgba(255,255,255,.08);
}

.va-checkout-popup__btn--primary{
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.14);
}


.va-checkout-popup--ship-repair-picker{
  width: min(560px, calc(100vw - 32px));
}

.va-checkout-popup--ship-repair-confirm{
  width: min(480px, calc(100vw - 32px));
}

.va-checkout-popup--ship-repair-picker,
.va-checkout-popup--ship-repair-confirm,
.va-checkout-popup--ship-repair-processing,
.va-checkout-popup--ship-stabilization-success{
  padding: 18px 18px 16px;
  border-width: 1.5px;
}

.va-checkout-popup--ship-repair-processing,
.va-checkout-popup--ship-stabilization-success{
  width: min(640px, calc(100vw - 32px));
}

.va-checkout-popup--ship-repair-picker,
.va-checkout-popup--ship-repair-confirm{
  border-color: rgba(94, 239, 255, .84);
  box-shadow: 0 0 16px rgba(94,239,255,.24), 0 0 30px rgba(94,239,255,.16), 0 18px 50px rgba(0,0,0,.45);
}

.va-checkout-popup--ship-repair-picker .va-checkout-popup__title,
.va-checkout-popup--ship-repair-confirm .va-checkout-popup__title,
.va-checkout-popup--ship-repair-processing .va-checkout-popup__title{
  color:#59e9ff;
  text-shadow: 0 0 8px rgba(89,233,255,.42), 0 0 18px rgba(89,233,255,.24), 0 0 28px rgba(89,233,255,.14);
}

.va-checkout-popup--ship-repair-picker .va-checkout-popup__msg,
.va-checkout-popup--ship-repair-confirm .va-checkout-popup__msg,
.va-checkout-popup--ship-repair-processing .va-checkout-popup__msg,
.va-checkout-popup--ship-stabilization-success .va-checkout-popup__msg{
  font-size: 15px;
}

.va-checkout-popup__msg-accent--success-label{
  color:#9cff57;
  text-shadow: 0 0 8px rgba(156,255,87,.44), 0 0 18px rgba(156,255,87,.26), 0 0 28px rgba(156,255,87,.16);
}

.va-checkout-popup__msg-accent--chance-red{
  color:#ff5f66;
  text-shadow: 0 0 8px rgba(255,95,102,.34), 0 0 16px rgba(255,95,102,.18);
}

.va-checkout-popup__msg-accent--chance-orange{
  color:#ffb15a;
  text-shadow: 0 0 8px rgba(255,177,90,.34), 0 0 16px rgba(255,177,90,.18);
}

.va-checkout-popup__msg-accent--chance-yellow{
  color:#ffe37a;
  text-shadow: 0 0 8px rgba(255,227,122,.34), 0 0 16px rgba(255,227,122,.18);
}

.va-checkout-popup__msg-accent--chance-green{
  color:#9cff57;
  text-shadow: 0 0 8px rgba(156,255,87,.44), 0 0 18px rgba(156,255,87,.26), 0 0 28px rgba(156,255,87,.16);
}

.va-checkout-popup__msg-accent--processing{
  color:#59e9ff;
  text-shadow: 0 0 8px rgba(89,233,255,.42), 0 0 18px rgba(89,233,255,.24), 0 0 28px rgba(89,233,255,.14);
}

.va-checkout-popup__msg-accent--warning{
  color:#ffe37a;
  text-shadow: 0 0 8px rgba(255,227,122,.34), 0 0 16px rgba(255,227,122,.18);
}

.va-checkout-popup--ship-repair-picker .va-checkout-popup__actions{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items:stretch;
}

.va-checkout-popup--ship-repair-confirm .va-checkout-popup__actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items:stretch;
}

.va-checkout-popup__btn--repair-tier,
.va-checkout-popup__btn--repair-cancel,
.va-checkout-popup__btn--repair-confirm{
  min-height: 48px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.va-checkout-popup__btn--repair-tier:hover,
.va-checkout-popup__btn--repair-cancel:hover,
.va-checkout-popup__btn--repair-confirm:hover{
  transform: translateY(-1px);
}

.va-checkout-popup__btn--repair-tier:disabled,
.va-checkout-popup__btn--repair-tier[aria-disabled="true"]{
  opacity:.44;
}

.va-checkout-popup__btn--repair-tier-1{ border-color: hsla(0, 0%, 85%, .38); background: hsla(0, 0%, 85%, .12); color: hsla(0, 0%, 96%, .98); box-shadow: 0 0 12px hsla(0, 0%, 85%, .16); }
.va-checkout-popup__btn--repair-tier-2{ border-color: hsla(25, 40%, 60%, .38); background: hsla(25, 40%, 60%, .14); color: hsla(25, 100%, 92%, .98); box-shadow: 0 0 12px hsla(25, 40%, 60%, .18); }
.va-checkout-popup__btn--repair-tier-3{ border-color: hsla(110, 85%, 70%, .4); background: hsla(110, 85%, 70%, .14); color: hsla(110, 100%, 94%, .98); box-shadow: 0 0 12px hsla(110, 85%, 70%, .18); }
.va-checkout-popup__btn--repair-tier-4{ border-color: hsla(190, 95%, 70%, .4); background: hsla(190, 95%, 70%, .14); color: hsla(190, 100%, 95%, .98); box-shadow: 0 0 12px hsla(190, 95%, 70%, .18); }
.va-checkout-popup__btn--repair-tier-5{ border-color: hsla(350, 70%, 60%, .4); background: hsla(350, 70%, 60%, .14); color: hsla(350, 100%, 94%, .98); box-shadow: 0 0 12px hsla(350, 70%, 60%, .18); }
.va-checkout-popup__btn--repair-tier-6{ border-color: hsla(249, 100%, 77%, .4); background: hsla(249, 100%, 77%, .14); color: hsla(249, 100%, 95%, .98); box-shadow: 0 0 12px hsla(249, 100%, 77%, .2); }
.va-checkout-popup__btn--repair-tier-7{ border-color: hsla(310, 100%, 70%, .4); background: hsla(310, 100%, 70%, .14); color: hsla(310, 100%, 95%, .98); box-shadow: 0 0 12px hsla(310, 100%, 70%, .2); }
.va-checkout-popup__btn--repair-tier-8{ border-color: hsla(42, 95%, 68%, .42); background: hsla(42, 95%, 68%, .16); color: hsla(42, 100%, 94%, .99); box-shadow: 0 0 12px hsla(42, 95%, 68%, .2); }
.va-checkout-popup__btn--repair-tier-9{ border-color: hsla(30, 100%, 60%, .4); background: hsla(30, 100%, 60%, .15); color: hsla(30, 100%, 94%, .98); box-shadow: 0 0 12px hsla(30, 100%, 60%, .2); }
.va-checkout-popup__btn--repair-tier-10{ border-color: hsla(325, 75%, 65%, .42); background: linear-gradient(90deg, hsla(248, 100%, 77.45%, .18), hsla(325, 75%, 65%, .18)); color: hsla(325, 100%, 96%, .98); box-shadow: 0 0 14px hsla(325, 75%, 65%, .18), 0 0 18px hsla(248, 100%, 77.45%, .12); }

.va-checkout-popup__btn--repair-cancel{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.9);
}

.va-checkout-popup--ship-repair-picker .va-checkout-popup__btn--repair-cancel{
  grid-column: 1 / -1;
}

.va-checkout-popup--ship-repair-picker .va-checkout-popup__btn--repair-confirm-free{
  grid-column: 2 / 3;
}

.va-checkout-popup__btn--repair-confirm{
  border-color: rgba(94,239,255,.62);
  background: rgba(94,239,255,.12);
  color: #9cff57;
  text-shadow: 0 0 8px rgba(156,255,87,.44), 0 0 18px rgba(156,255,87,.26), 0 0 28px rgba(156,255,87,.16);
  box-shadow: 0 0 12px rgba(94,239,255,.14);
}

@media (max-width: 640px){
  .va-checkout-popup--ship-repair-picker .va-checkout-popup__actions,
  .va-checkout-popup--ship-repair-confirm .va-checkout-popup__actions{
    grid-template-columns: 1fr;
  }

  .va-checkout-popup--ship-repair-picker .va-checkout-popup__btn--repair-confirm-free,
  .va-checkout-popup--ship-repair-picker .va-checkout-popup__btn--repair-cancel{
    grid-column: auto;
  }
}

.va-dots{
  display:inline-block;
  min-width: 18px;
}

/* === FOOTER === */
footer, .footer {
  margin-top: auto;
  position: relative;
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;

  /* Background is painted by ::before to avoid 100vw layout/scroll glitches on small widths */
  background: none;
  padding: 22px 20px 10px;
  margin-bottom: 0;
  color: #fff;
  font-family: inherit;
}

footer::before, .footer::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 100vw;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.22) 1px,
      transparent 1px,
      transparent calc(100% - 1px),
      rgba(255, 255, 255, 0.22) calc(100% - 1px),
      rgba(255, 255, 255, 0.22) 100%
    ),
    rgba(40, 40, 40, 0.25);
  pointer-events: none;
  z-index: 2;
}

/* Keep footer contents above the full-width background */
footer > *, .footer > * {
  position: relative;
  z-index: 3;
}

.footer-flex-container {
  display: grid;
  grid-template-columns: 220px 220px;
  justify-content: center;
  align-items: start;
  column-gap: 80px;
  row-gap: 18px;
}
.footer-information-block {
  display: flex;
  flex-direction: column;
  width: 220px;
  max-width: 220px;
  font-size: 0.85em;
  text-align: left;
  color: #fff;
  position: relative;
  z-index: 10;
  font-family: inherit;
}
.footer-information-block h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid #fff;
  padding-bottom: 4px;
  margin-bottom: 17px;
  margin-left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  font-family: inherit;
}
.footer-information-block ul {
  list-style: none;
  padding-left: 0;
  margin: 0 auto auto 0;
  font-family: inherit;
}
.footer-information-block ul li {
  margin-bottom: 8px;
  padding-left: 10px;
  position: relative;
  font-family: inherit;
}
.footer-information-block ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: bold;
  line-height: 0;
  color: #fff;
}
.footer-follow-me-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  max-width: 220px;
  font-family: inherit;
  position: relative;
  z-index: 4;
}
.footer-follow-me-block h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid #fff;
  padding-bottom: 4px;
  margin-bottom: 17px;
  display: inline-block;
  font-family: inherit;
}
.footer-social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding-top: 4px;
  font-family: inherit;
}
.footer-social-links a img { width: 32px; height: 32px; display: block; }

.footer-follow-me-links {
  list-style: none;
  width: max-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding-left: 0;
  font-family: inherit;
}
.footer-follow-me-links li {
  margin: 0;
  padding-left: 10px;
  position: relative;
  text-align: left;
  font-family: inherit;
}
.footer-follow-me-links li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  font-size: 1.2em;
  font-weight: bold;
  line-height: 0;
  color: #fff;
}

.footer-link--ufo-calendar,
.footer-link--guided-tour {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-family:'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.85rem;
}
.footer-copy {
  margin: 14px 0 0;
  font-size: 0.75em;
  color: #fff;
  text-align: center;
  letter-spacing: 0.05em;
  font-family: inherit;
}

footer h3 a { color: inherit; text-decoration: none; }
footer h3 a:hover { color: inherit; }

.footer-information-block .footer-link[data-open="infos"]{
  background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.footer-information-block .footer-link[data-open="infos"]:hover{ text-decoration: underline; }
.footer-information-block .info-heading[data-open="infos"]{ cursor: pointer; }

.footer-link[data-open="ufo-calendar"],
.footer-link[data-action="start-guided-tour"]{
  background:none;
  border:0;
  padding:0;
  color:inherit;
  cursor:pointer;
}

.footer-link--ufo-calendar{
  color:#fff6b8;
  text-shadow:
    0 0 2px rgba(255,249,194,0.98),
    0 0 10px rgba(194,255,126,0.96),
    0 0 22px rgba(125,255,112,0.92),
    0 0 38px rgba(72,255,124,0.82);
  transition:opacity .18s ease, transform .18s ease;
}

.footer-link--ufo-calendar:hover,
.footer-link--ufo-calendar:focus-visible{
  color:#fff6b8;
  text-decoration:none;
  opacity:0.9;
}

.footer-link--guided-tour{
  color:#ffd76a;
  text-shadow:
    0 0 4px rgba(255,228,138,0.98),
    0 0 10px rgba(255,215,106,0.95),
    0 0 22px rgba(255,189,46,0.78),
    0 0 38px rgba(255,154,0,0.52);
  transform:translateY(2px);
}


/* =================== RESPONSIVE DESIGN =================== */


/* --- assistant: conservative desktop fix ---
   Applied for viewports >= 766px to prevent resizing/jumps
   Only targets .categories and direct children; minimal and non-destructive.
   --- */
@media (min-width: 766px) {
  .categories {
    /* keep the original max from clamp: 640px */
    width: 640px !important;
    max-width: 640px !important;
    margin: 17px auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .categories > .category {
    max-width: none !important;
  }

  .categories img,
  .category .category-logo,
  .category .category-image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
}


@media (min-width: 1200px) {
  .category.pink-neon h2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 98%;
  max-width: 100%;
  margin: 2px auto 0.75rem;
  box-sizing: border-box;
  padding: 0 12px;
  transform: scaleX(0.98);
  height: 79px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-family: 'Thunderstrike Halftone', sans-serif;
  font-size: 1.22rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 51, 102, 0.5), 0 0 16px rgba(255, 51, 102, 0.5), 0 0 24px rgba(255, 51, 102, 0.5), 0 0 32px rgba(255, 51, 102, 0.5);
  border: 1.55px solid #ff66e0;
  border-radius: 4px;
  background: rgba(0,0,0,0.5);
}
}

@media (max-width: 1250px) and (min-width: 1000px) {
  /* 1250px -> 1000px: smooth/linear menu-box shrink + progressive spacing (no jumps) */
  nav.menu-box{
    /* 1250: ~950px  |  1000: 830px ( +10px vs before ) */
    width: clamp(830px, calc(830px + (100vw - 1000px) * 0.48), 950px);
    max-width: clamp(830px, calc(830px + (100vw - 1000px) * 0.48), 950px);
  }

  nav.menu-box ul{
    /* 1250: 28px  |  1000: 12px */
    gap: clamp(12px, calc(12px + (100vw - 1000px) * 0.064), 28px);
  }

  nav.menu-box ul a{
    /* Smooth padding shrink (prevents sudden button width change at 1250) */
    padding: 4px clamp(6px, calc(6px + (100vw - 1000px) * 0.008), 8px);
  }

}

@media (max-width: 1060px) and (min-width: 1000px) {
  /* Home categories: soften the shrink curve between 1060px and 1000px */
  body.route-index .categories {
    width: clamp(600px, calc(41.6667vw + 418.33px),760px) !important;
  }
}

@media (max-width: 999.98px) {
  body { font-size: 0.95rem; }
  main { margin-bottom: 0; }
  nav.menu-box ul { flex-wrap: wrap; justify-content: center; }
  nav.menu-box li { margin: 4px; }
  nav.menu-box img.arrow-left  { left: -24px; width: 56px; }
  nav.menu-box img.arrow-right { right: -24px; width: 56px; }
}

/* Menu-box width locks (keep the exact visual width at specific reference resolutions) */
@media (max-width: 999.98px) and (min-width: 860px) {
  /* Same width as when viewport = 940px (76% of 940 = 714.4px) */
  nav.menu-box { width: 714px; max-width: 714px; }
}

@media (max-width: 859.98px) and (min-width: 765px) {
  /* Same width as when viewport = 810px (76% of 810 = 615.6px) */
  nav.menu-box { width: 616px; max-width: 616px; }
}

/* Home categories: keep titles on one line by shrinking, and keep both description blocks aligned */
@media (max-width: 999.98px) and (min-width: 765px) {
  /* ===== GLOBAL OUTER FRAME (violet/rose) =====
     999px -> 769px:
     - Extend 34px upward WITHOUT moving the bottom:
       margin-top pulls the frame up, padding-top adds the same amount back. */
  body:not(.route-index) .digital-screen-overlay,
  body:not(.route-index) .home-neon-frame.lavender,
  body:not(.route-index) .home-neon-frame.pink {
    /* 999px -> 766px: raise ONLY the TOP edge (bottom stays fixed) */
    top: -76.5px !important;
  }

  /* Home only: extend the bottom 75px further down (in addition to the global top extension) */
  body.route-index .digital-screen-overlay,
  body.route-index .home-neon-frame.lavender,
  body.route-index .home-neon-frame.pink {
    /* Home uses a fixed height (not bottom-anchored).
       Here we:
       - raise the TOP a bit vs the previous pass
       - and move ONLY the HOME bottom slightly up by shortening the height */
    top: -76.5px !important;
    height: 818px !important;
  }

  /* Home only: extend the reflections floor by 35px (floor.css reads --floor-height) */
  body.route-index .frame-container { --floor-height: 328px; }

  /* Home only: newsletter button position (999px -> 769px) */
  body.route-index .wof-mini {
    top: 675px;
  }

  /* Titles: smooth/linear-ish shrink from 999 -> 769, always single-line & centered */
  .blue-neon h2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 80px !important;
  width: 96.6% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
  margin: 1px calc(1.9% - 0.5px) 0.75rem calc(1.5% + 0.5px) !important;
  font-family: 'Great Vibes', cursive !important;
  color: #cfc4ff !important;
  font-size: 1.6rem !important;
  line-height: 0.95 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: -0.012em !important;
  text-shadow: 0 0 6px #8ab6ff, 0 0 14px #8ab6ff, 0 0 28px #5f5fa0, 0 0 48px #5f5fa0;
  border: 1px solid #bbaeff !important;
  border-radius: 4px !important;
  background: rgba(0,0,0,0.5) !important;
}

  .category.pink-neon h2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 98%;
  max-width: 100%;
  margin: 2px auto 0.75rem;
  box-sizing: border-box;
  padding: 0 12px;
  transform: scaleX(0.98);
  height: 79px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-family: 'Thunderstrike Halftone', sans-serif;
  font-size: 1.22rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 51, 102, 0.5), 0 0 16px rgba(255, 51, 102, 0.5), 0 0 24px rgba(255, 51, 102, 0.5), 0 0 32px rgba(255, 51, 102, 0.5);
  border: 1.55px solid #ff66e0;
  border-radius: 4px;
  background: rgba(0,0,0,0.5);
}

  /* Descriptions: same sizing + stable wrapping so both blocks keep matching line counts */
  
}

@media (max-width: 765px) {
  /* Remove body padding so header/footer glass bands reach the screen edges */
  body { font-size: 0.9rem; padding: 0; }


  /* Header: hide the side images at 765px and below */
  .banner-side { display: none !important; }

  /* ===== GLOBAL OUTER FRAME (violet/rose) =====
     765px -> 350px:
     Reduce the side gutters so the main frame is wider (more like your 765px look). */
  .frame-container,
  .digital-screen-overlay,
  .home-neon-frame.lavender,
  .home-neon-frame.pink {
    width: min(1645px, calc((100vw / var(--site-global-zoom)) - 44px)) !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Home only (765px and below): slightly tighten the subtitle box width */
  body.route-index .frame-container .subtitle-box {
    padding-left: 10px;
    padding-right: 10px;
  }


  /* Home only (765px and below): move the newsletter button up by 400px */
  body.route-index .wof-mini {
    top: 330px; /* was 679px */
  }



  /* Non-Home only (765px and below): raise ONLY the TOP of the outer violet/rose frame by 200px
     without moving the bottom. We keep the existing bottom anchor and only move the top. */
  body:not(.route-index) .digital-screen-overlay,
  body:not(.route-index) .home-neon-frame.lavender,
  body:not(.route-index) .home-neon-frame.pink {    top: -212.5px !important; /* align with non-home; keep bottom unchanged via height */
  }

  /* Home: keep its bottom/floor sizing below, but align the TOP value with other pages */
  /* The Character Series + The World of EISTH (765px and below):
     extend the OUTER frame downward so the inner title/buttons keep their relative spacing. */
  body.route-the-character-series .frame-container,
  body.route-the-world-of-eisth .frame-container {
    padding-bottom: 433px; /* +13px total */
  }
/* Home only (765px and below): lift the BOTTOM of the violet/pink frame + the floor together by 400px
     - Do NOT move the top of the frame: we reduce the frame height instead (bottom goes up).
     - The floor is moved up by the same amount via --floor-top (read by floor.css). */
  body.route-index .digital-screen-overlay,
  body.route-index .home-neon-frame.lavender,
  body.route-index .home-neon-frame.pink {
    /* Extend the frame upward by 150px without moving the bottom:
       bottom = (top + height) stays identical. */
    top: -212.5px !important; /* align with other pages */            /* was -42.5px */
        height: 610px !important; /* was 390px; +30px vs previous 550 to preserve bottom */
  }

  body.route-index .frame-container {
    /* Extend the FLOOR upward without moving its bottom:
       bottom = (--floor-top + --floor-height) stays the same. */
    --floor-top: 78px;      /* was 128px */
    --floor-height: 319px;  /* was 254px */
  }
  /* Dashboard: place it UNDER the logo and ABOVE the menu from 765px down */
  .banner-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
  }


.banner-wrap .banner{
  /* 765px -> 350px:
     - keep the same logo size as at 766px
     - only the vertical movement continues below 765px */
  margin-top: calc(4px + clamp(0px, calc(560px - 73.333vw), 70px)) !important;
  width: var(--site-logo-display-width) !important;
  max-width: var(--site-logo-display-width) !important;
  margin-bottom: 0 !important;
}




  .dashboard-header-root{
    /* Mobile (<=765px): the dashboard is displayed via the side panel.
       Prevent a duplicate "normal" dashboard from appearing. */
    display: none;
  }
  /* Menu-box: 409px -> 350px: progressive shrink (-13px each side, linear), keep 313px at >=409px */
  /* Override the global .menu-box margin-top:-2px !important (mobile needs clean spacing) */
  nav.menu-box {
    width: clamp(275px, calc(120.74px + 44.068vw), 301px);
    max-width: clamp(275px, calc(120.74px + 44.068vw), 301px);
    margin-top: 16px !important;
  }
  nav.menu-box ul { flex-direction: column; align-items: center; }
  nav.menu-box li { width: 100%; text-align: center; margin: 4px 0; }
  nav.menu-box img.arrow-left,
  nav.menu-box img.arrow-right { display: none; }
  /* Hide the violet/pink category frames (and all their contents) from 765px and below */
  .categories { display: none !important; }
  /* Keep a little breathing room for the remaining content */
  .content { padding: 10px 10px; }
  .carousel-text { font-size: 1rem; padding: 6px; }
  h1, h2, h3 { font-size: 1.2rem; }
}

@media (max-width: 640px){
  .va-checkout-popup{
    top: 96px;
  }
}


@media (max-width: 560px) {
  footer, .footer {
    padding-left: clamp(14px, calc(-28px + 8.571vw), 20px);
    padding-right: clamp(14px, calc(-28px + 8.571vw), 20px);
  }

  .footer-flex-container {
    column-gap: clamp(22px, calc(-384px + 82.857vw), 80px);
  }

  .footer-social-links {
    gap: clamp(16px, calc(-40px + 11.429vw), 24px);
  }

}

@media (max-width: 490px) {
  footer, .footer {
    padding-left: clamp(10px, calc(2.471px + 2.353vw), 14px);
    padding-right: clamp(10px, calc(2.471px + 2.353vw), 14px);
  }

  .footer-flex-container {
    grid-template-columns: clamp(140px, calc(-10.588px + 47.059vw), 220px) clamp(140px, calc(-10.588px + 47.059vw), 220px);
    column-gap: clamp(12px, calc(-6.824px + 5.882vw), 22px);
  }

  .footer-information-block,
  .footer-follow-me-block {
    width: clamp(140px, calc(-10.588px + 47.059vw), 220px);
    max-width: clamp(140px, calc(-10.588px + 47.059vw), 220px);
  }

  .footer-social-links {
    gap: clamp(10px, calc(-1.294px + 3.529vw), 16px);
  }

}

@media (max-width: 480px) {
  .carousel-text { font-size: 0.9rem; }
  h1 { font-size: 1rem; }
}

/* Mobile: keep proportional sizing on small viewports */
@media (max-width: 765px) {
  body .site-header > .banner-wrap > .banner {
    width: var(--site-logo-display-width) !important;
    max-width: var(--site-logo-display-width) !important;
    margin-top: calc(4px + clamp(0px, calc(560px - 73.333vw), 70px)) !important;
  }

  body .site-header > .banner-wrap > .logo-cycle-stage {
    margin-top: calc(4px + clamp(0px, calc(560px - 73.333vw), 70px)) !important;
    margin-bottom: 0 !important;
  }

  body .site-header > .banner-wrap > .logo-cycle-stage > .banner {
    width: var(--site-logo-display-width) !important;
    max-width: var(--site-logo-display-width) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}



.va-home-cryptic-quote{
  width:min(980px, calc(100% - 48px));
  margin:260px auto 96px;
  position:relative;
  z-index:4;
}

.va-home-cryptic-quote__button{
  width:100%;
  position:relative;
  display:block;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  text-align:center;
  cursor:pointer;
  font:inherit;
}

.va-home-cryptic-quote__button:focus{
  outline:none;
}

.va-home-cryptic-quote__button:focus-visible .va-home-cryptic-quote__frame,
.va-home-cryptic-quote__button:focus-visible .va-home-cryptic-quote__tag{
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 32px rgba(255,105,180,0.14), 0 0 54px rgba(173,143,255,0.14);
}

.va-home-cryptic-quote__frame{
  position:relative;
  padding:20px 30px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(20,14,34,0.58), rgba(12,10,24,0.76));
  box-shadow:0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 32px rgba(255,105,180,0.08), 0 0 54px rgba(173,143,255,0.08);
  text-align:center;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.va-home-cryptic-quote__tag{
  position:absolute;
  left:50%;
  bottom:-23px;
  transform:translateX(-50%);
  padding:8px 16px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(20,14,34,0.9), rgba(12,10,24,0.96));
  box-shadow:0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 22px rgba(255,105,180,0.08), 0 0 36px rgba(173,143,255,0.08);
  color:#fdfdf4;
  font-family:'Orbitron', sans-serif;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.12em;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 0 1px rgba(255,255,240,0.6), 0 0 2px rgba(255,255,240,0.8);
  transition:border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  pointer-events:none;
}

.va-home-cryptic-quote__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(7,6,16,0.82), rgba(7,6,16,0.94));
  color:#fffafc;
  font-family:'Orbitron', sans-serif;
  font-size:1.04rem;
  font-weight:800;
  letter-spacing:0.22em;
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(255,255,255,0.75), 0 0 26px rgba(255,157,225,0.32);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity 180ms ease;
  pointer-events:none;
}

.va-home-cryptic-quote__button:hover .va-home-cryptic-quote__frame,
.va-home-cryptic-quote__button:hover .va-home-cryptic-quote__tag{
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 32px rgba(255,105,180,0.14), 0 0 54px rgba(173,143,255,0.14);
}

.va-home-cryptic-quote__button:hover .va-home-cryptic-quote__overlay{
  opacity:1;
}

.va-home-cryptic-quote__text{
  margin:0;
  color:#fff;
  font-family:'Allura', cursive;
  font-size:1.95rem;
  font-weight:700;
  line-height:1.34;
  letter-spacing:0;
  text-shadow:0 0 3px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.7), 0 0 10px rgba(255,255,255,0.55), 0 0 14px rgba(255,255,255,0.4);
}

.va-home-cryptic-quote__mark{
  color:#ff9de1;
  font-size:1.08em;
  text-shadow:0 0 14px rgba(255,157,225,0.35);
}

.va-home-cryptic-quote__text > .va-home-cryptic-quote__mark:first-child{
  color:#c5bdff;
  text-shadow:0 0 7px #c5bdff, 0 0 16px #c5bdff, 0 0 30px #9085f2, 0 0 48px #6c63cc;
}

.va-home-cryptic-quote__text > .va-home-cryptic-quote__mark:last-child{
  color:#ff9de1;
  text-shadow:0 0 14px rgba(255,157,225,0.35), 0 0 28px rgba(255,105,180,0.22);
}

.va-home-cryptic-quote__body{
  display:inline;
}

.va-home-cryptic-quote__keyword{
  color:inherit;
  text-shadow:inherit;
}


@media (max-width: 999px) {

  .va-home-cryptic-quote {
    width: min(92vw, 92vw);
    margin: 190px auto 76px;
  }

  .va-home-cryptic-quote__frame {
    padding: 18px 20px;
  }

  .va-home-cryptic-quote__text {
    font-size: 1.72rem;
  }

  .va-home-cryptic-quote__tag {
    bottom: -25px;
    padding: 8px 14px;
    font-size: 0.7rem;
  }
}

@media (max-width: 765px) {
  .va-home-cryptic-quote {
    width: min(540px, calc(100% - 88px));
    margin: 540px auto 76px;
  }

  .va-home-cryptic-quote__frame {
    padding: 16px 18px;
  }

  .va-home-cryptic-quote__text {
    font-size: 1.56rem;
    line-height: 1.3;
  }

  .va-home-cryptic-quote__tag {
    bottom: -24px;
  }
}


/* ================= fin responsive ================= */