.site-footer/* Reset and base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Guest Lock Overlay --- */
.lock-overlay[hidden]{display:none;}
.lock-overlay{
  position:fixed; inset:0; z-index:4000;
  display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(10,15,36,.85),rgba(10,15,36,.92));
  backdrop-filter: blur(2px);
}
.lock-dialog{
  width:min(560px,92vw); text-align:center; padding:22px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1.5px solid rgba(217,255,255,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.lock-orb{
  width:60px; height:60px; margin:0 auto 8px; border-radius:50%;
  background: radial-gradient(closest-side, #66ccff, #A741F5 60%, transparent 70%);
  filter: blur(1px);
  animation: orbPulse 2.4s ease-in-out infinite;
}
.lock-list{ list-style:none; padding:0; margin:0 0 12px 0; display:grid; gap:6px; opacity:.95 }
.lock-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
@keyframes orbPulse{ 0%{transform:scale(0.92)} 50%{transform:scale(1)} 100%{transform:scale(0.92)} }


/* Headings */
h1, h2, h3 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0, 153, 255, 0.6);
}

.about-main {
  position: relative;
  padding: clamp(40px, 6vw, 80px) 24px;
}

/* Body text */
body, p {
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  color: #EAEAEA;
  line-height: 1.6;
}

/* Small text / captions */
.small-text {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.logo, .SnapWorld {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

body {
  font-family: 'Quicksand', sans-serif;
  color: white;
  background: 
    url('./Media/BackGround Texture.png') repeat,
    radial-gradient(circle at 50% 50%, #1E61FF 0%, #0b0e1a 100%);
  background-size: auto, cover;
  background-blend-mode: overlay; /* try 'soft-light' */
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #0a0f24, #0c1a46);
  padding: 6px 0px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  position: relative; /* Needed for absolute positioning inside */
  margin-top: 0;
  border-radius: 0 0 12px 12px;
}

.Decorative-middle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  height: 40px;
  z-index: 0;
  animation: fadeInDecor 1s ease-out;
}

.Decorative-right {
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
  height: 40px;
  z-index: 0;
  animation: fadeInDecor 1s ease-out;
}

.Decorative-left {
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  height: 40px;
  z-index: 0;
  animation: fadeInDecor 1s ease-out;
}

.logo-container img {
  height: 40px;
}

/* Remove underline and bullets */
.nav-links,
.nav-links li,
.nav-links a {
  list-style: none;      /* removes bullet points */
  text-decoration: none; /* removes underline */
  color: white;          /* text color */
  padding: 0;
  margin: 0;
}

/* Align with logo vertically */
.navbar {
  display: flex;
  align-items: center; /* aligns nav items with logo */
  justify-content: space-between;
}

.nav-links a {
  display: flex;
  align-items: center;
  list-style: none;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: white;
  padding: 0.5rem 1rem;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-links li {
  margin-right: 20px;
}

.nav-links a:hover {
  color: #66ccff;
  text-shadow:
    0 0 6px rgba(0, 153, 255, 0.8),
    0 0 12px rgba(0, 153, 255, 0.6);
  animation: textPulse 1.5s infinite ease-in-out;
}

@keyframes textPulse {
  0% { text-shadow: 0 0 6px rgba(0, 153, 255, 0.8), 0 0 12px rgba(0, 153, 255, 0.6); }
  50% { text-shadow: 0 0 12px rgba(0, 153, 255, 1), 0 0 24px rgba(0, 153, 255, 0.8); }
  100% { text-shadow: 0 0 6px rgba(0, 153, 255, 0.8), 0 0 12px rgba(0, 153, 255, 0.6); }
}

.snapLogo {
  font-size: 1.8rem;
  font-weight: bold;
}

#snapLogo.sparkle {
  filter: drop-shadow(0 0 10px white);
  animation: sparkleTrail 1s ease-out;
}

@keyframes sparkleTrail {
  0% { filter: brightness(2); }
  100% { filter: brightness(1); }
}

.login-button,#loginBtn {
  --edge: #49c6ff;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border:1.5px solid var(--edge);
  margin-left: 0.5rem;
  border-radius: 6px;
  font-family: 'Raleway', sans-serif;
  transition: transform .12s ease, box-shadow .2s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color:#eaffff; font-weight:700; text-decoration:none; cursor:pointer;
}

.login-button:hover{ transform: translateY(-1px); box-shadow: 0 0 18px 2px rgba(73,198,255,.35); }

.tier {
  width: 32px;
  height: 32px;
  margin-right: 0.5rem;
  filter:drop-shadow(0 0 2px black)
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative
}

.nav-links {
  display: flex;
  align-items: center;
  margin-left: 0px;
}

.nav-links li {
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  justify-content: flex-end;
  margin-left: auto;
}

.info-block {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.info-block .label {
  font-size: 0.7rem;
  opacity: 0.6;
  font-family: 'Quicksand', sans-serif;
}

/* Main Layout */
.main-content {
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
  gap: 2rem;
  justify-content: center;
}

.upload-circle-wrapper {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.upload-circle-wrapper:hover {
  box-shadow: 0 0 20px rgba(173, 108, 255, 0.6), 0 0 40px rgba(124, 197, 255, 0.5);
}

/* Input stays accessible but cannot overlay/capture clicks */
.file-input{
  position: absolute  ;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* The stage just wraps to the art size */
.upload-circle-stage{
  position: relative;
  display: inline-block;   /* shrink-wrap to image size */
}

/* Label is the button; do NOT force width/height—let the image decide */
.rune-upload-circle{
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

/* The art defines the size */
.rune-upload-circle img{
  display: block;
  height: auto;
  width: auto;        /* keep natural pixel size */
  max-width: 100%;    /* safe if parent ever constrains */
  object-fit: contain;
  pointer-events: none;
}

/* Keep your btn-magic glow behavior without padding changing size */
.btn-magic.is-circle{
  --btn-pad-y: 0; --btn-pad-x: 0;
  border-radius: 50%;
  padding: 0;
  transition: transform .12s ease, box-shadow .2s ease;
}

/* Drag-over highlight */
.rune-upload-circle.is-dragover{
  filter: drop-shadow(0 0 20px rgba(0, 153, 255, 1));
}

.upload-image {
  transition: filter 0.3s ease;
}

.upload-image:hover {
  filter: drop-shadow(0 0 20px rgba(0, 153, 255, 1));
}


.side-by-side {
  display: flex;
  align-items: stretch; /* force both sections to same height */
  gap: 2rem;
  padding: 2rem;
  flex-wrap: wrap;
}

.BackStory {
  margin-bottom: 3rem; /* This adds the space you're asking for */
}

.main-grid {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center; /* ← this vertically centers the sections */
}

.BackStory {
  margin-bottom: 3rem; /* This adds the space you're asking for */
}

.info-section {
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.scene-card {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid #d9ffff;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.scene-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px #A741F5;
  border-color: #A741F5;
}

.scene-card.selected {
  border-color: #00FFFF;
  background-color: rgba(0, 255, 255, 0.1);
}

#snapReward {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #6f00ff, #b87fff);
  color: white;
  font-family: 'Orbitron', sans-serif;
  padding: 10px 20px;
  border-radius: 30px;
  box-shadow: 0 0 20px #6f00ff;
  cursor: pointer;
  animation: pulse 2s infinite;
  z-index: 1000;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 15px #6f00ff; }
  50% { transform: scale(1.2); box-shadow: 0 0 25px #aa00ff; }
  100% { transform: scale(1); box-shadow: 0 0 15px #6f00ff; }
}

.user-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#userEmblem {
  width: 32px;
  height: 32px;
  animation: float 3s ease-in-out infinite, pulse 3s ease-in-out infinite;
}

.SnapMagic {
  font-family: 'Raleway', sans-serif;
  color: #66ccff;
  font-weight: bold;
  border: 2px solid #96E9FF;
  border-radius: 6px;
  padding: 0.4rem 1rem;
  margin-left: 0.5rem;
  background: transparent;
  cursor: pointer;
  text-shadow: 5px;
  gap: 6px;
  text-decoration: none; /* removes underline */
}

.snap-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: none; /* Hidden by default, will show after checking for the date */
}

.snap-button button {
  padding: 10px 20px;
  background-color: #ff6f61;
  color: white;
  border-radius: 50px;
  border: none;
  font-size: 16px;
  box-shadow: 0 0 10px rgba(255, 105, 135, 0.7);
  animation: glow 1.5s infinite alternate;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 10px rgba(255, 105, 135, 0.7);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 105, 135, 1);
  }
}

.magic-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 15, 41, 0.95);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  text-align: center;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #00FFFF;
  border-top: 6px solid #A741F5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.snap {
  color: #A741F5;
  text-shadow: 0 0 8px #A741F5;
  font-weight: bold;
  font-size: 2rem;
}

@keyframes fadeText {
  to { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; display: none; }
}

@keyframes snapFlash {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

#snapEffect {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: #A741F5;
  text-shadow: 0 0 20px #A741F5;
  pointer-events: none;
  opacity: 0;
  z-index: 2000;
}

/* 3. Secondary Text Font (fine print, tooltips, footer, etc) */
footer,
.small-text,
.tooltip,
.helper-text {
  font-family: 'Raleway', sans-serif;
}

.popup-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #111;
  color: #00FFFF;
  padding: 10px 20px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(-10px);
  z-index: 9999;
  font-family: 'Raleway', sans-serif;
  box-shadow: 0 0 10px #00FFFF;
}

.popup-message.visible {
  opacity: 1;
  transform: translateY(0);
}

.section-title {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 1rem;
}

.tiers-and-claim {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.tier-section {
  margin: 3rem auto;
  text-align: center;
}

.tier-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.tier-card--initiate {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid #d9ffff;
  border-radius: 12px;
  padding: 1.5rem;
  width: 260px;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  transition: transform 0.3s;
}

.tier-card--adept {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid #22C55E;
  border-radius: 12px;
  padding: 1.5rem;
  width: 260px;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  transition: transform 0.3s;
}

.tier-card--archmage {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid #d9ffff;
  border-radius: 12px;
  padding: 1.5rem;
  width: 260px;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  transition: transform 0.3s;
}

.tier-card--initiate:hover {
	transform: scale(1.05);
	box-shadow: 0 0 12px #0F1C4A;
}

.tier-card--adept:hover {
	transform: scale(1.05);
	box-shadow: 0 0 12px #22C55E;
}

.tier-card--archmage:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px #A741F5;
}

.tier-buy-btn {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #d9ffff;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.tier-price {
  font-size: 1.2rem;
  color: #00FFFF;
  margin-top: 0.5rem;
}

.referral-box {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
}

.referral-box input {
  padding: 0.5rem;
  font-size: 1rem;
  width: 320px;
  text-align: center;
  border: 2px dashed #00FFFF;
  background: transparent;
  color: white;
  font-family: 'Quicksand', sans-serif;
}

.referral-box button {
  padding: 0.5rem 1rem;
  font-weight: bold;
  background: #00FFFF;
  color: #0b0f29;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.referral-box button:hover {
  background-color: white;
}

.snapmagic-claim-btn {
  background: transparent;
  border: 2px dashed #00FFFF;
  color: #00FFFF;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  margin-left: 1rem;
}

.SnapMagic-container {
  padding: 2rem;
  max-width: 1100px;
  margin: auto;
  color: white;
}

.daily-claim-card {
  flex-basis: 250px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed #00FFFF;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  align-self: flex-start;
}

#snapMagic {
  font-size: 16px;
  margin-right: 10px;
}

.SnapMagic {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.SnapMagic-balance {
  font-size: 18px;
  font-weight: bold;
  margin-right: 20px;
  color: white;
}

    .btn-pill{
      display:inline-flex; align-items:center; gap:8px; 
      padding:10px 14px; border-radius:999px; border:1.5px solid var(--sw-sky);
      background: var(--glass); color:#eaffff; font:700 14px/1 Raleway,system-ui; cursor:pointer;
      transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn-pill:hover{ transform: translateY(-1px); box-shadow: 0 0 18px 2px rgba(73,198,255,.35); }


    .btn-pill-needbg{
      display:inline-flex; align-items:center; gap:8px; 
      padding:10px 14px; border-radius:999px; border:1.5px solid var(--sw-sky);
      background: rgba(73,198,255,.3); color:#eaffff; font:700 14px/1 Raleway,system-ui; cursor:pointer;
      transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn-pill-needbg:hover{ transform: translateY(-1px); box-shadow: 0 0 18px 2px rgba(73,198,255,.35); }

a {
  text-decoration: none;
}

.gem-container {
  position: relative;
  width: 150px;
  margin: 20px;
}

.ruby-gem {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.ruby-gem:hover {
  transform: scale(1.05);
}

.tooltip {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  background: #222;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
}

.gem-container:hover .tooltip {
  display: block;
}


/* Wrapper so we can draw shimmer layers */
.challenges-icon{
  position:relative;display:inline-block;width:70px;height:70px;cursor:pointer;
}

/* Icon image */
.challenges-icon img{
  width:100%;height:100%;display:block;
  transition:filter .3s ease;
  /* base brand glow (#A741F5 purple + cyan accent) */
  filter:drop-shadow(0 0 2px black)
         
}

/* Hover: keep flip + gentle tilt + stronger glow */
.challenges-icon:hover img{
  filter:drop-shadow(0 0 12px rgba(167,65,245,.35))
         drop-shadow(0 0 24px rgba(64,200,255,.20));
}

/* Diagonal shimmer sweep (broad streak) */
.challenges-icon::after{
  content:"";position:absolute;inset:-10px;pointer-events:none;opacity:0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%);
  transform:translateX(-160%) rotate(0.001deg);
}

/* Sparkle flecks riding the sweep */
.challenges-icon::before{
  content:"";position:absolute;inset:-10px;pointer-events:none;opacity:0;
  background:
    radial-gradient(circle 6px, rgba(255,255,255,.95), transparent 60%) 20% 40%/14px 14px,
    radial-gradient(circle 5px, rgba(167,65,245,.9), transparent 60%) 60% 55%/12px 12px,
    radial-gradient(circle 4px, rgba(64,200,255,.9), transparent 60%) 80% 25%/10px 10px;
  background-repeat:no-repeat;
  transform:translateX(-160%);
}

/* Play when you add .refreshing to wrapper */
.challenges-icon.refreshing::after,
.challenges-icon.refreshing::before{
  animation:shimmerSweep 1.2s ease-out forwards;
  opacity:1;
}

/* Extra pop on the image during refresh */
.challenges-icon.refreshing img{
  transform:scaleX(-1) scale(1.06);
  filter:drop-shadow(0 0 14px rgba(255,255,255,1))
         drop-shadow(0 0 30px rgba(64,200,255,.85))
         drop-shadow(0 0 20px rgba(167,65,245,.9));
}

@keyframes shimmerSweep{
  0%   { transform:translateX(-160%); }
  60%  { transform:translateX(140%); }
  100% { transform:translateX(180%); }
}

/* POPOVER SHELL */
.quest-popover{
  position: fixed; /* we’ll place it via JS near the icon */
  top: -9999px; left: -9999px;
  width: min(360px, 92vw);
  background: rgba(12, 14, 34, .82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(167, 65, 245, .35);
  box-shadow: 0 12px 40px rgba(167, 65, 245, .22), 0 6px 24px rgba(0,0,0,.5);
  border-radius: 14px;
  padding: 12px;
  color: #EAE7FF;
  opacity: 0; transform: scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1000;
}
.quest-popover[aria-hidden="false"]{
  opacity: 1; transform: scale(1);
  pointer-events: auto;
}

/* Arrow */
.qp-arrow{
  position: absolute; width: 16px; height: 16px;
  background: inherit;
  border-left: 1px solid rgba(167,65,245,.35);
  border-top: 1px solid rgba(167,65,245,.35);
  transform: rotate(45deg);
  /* positioned via JS to sit at the anchor edge */
}

/* Header row */
.qp-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.qp-head h3{ font-size: 16px; margin: 0; letter-spacing: .4px; }
.qp-timer{ display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .9; }
.qp-timer .dot{ width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(#A741F5, #40C8FF); box-shadow: 0 0 8px #A741F5; }

/* List */
.qp-list{ list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 10px; }
.qp-item{
  background: linear-gradient(180deg, rgba(25,20,50,.55), rgba(16,14,36,.55));
  border: 1px solid rgba(167,65,245,.35);
  border-radius: 12px; padding: 10px;
  box-shadow: inset 0 0 12px rgba(167,65,245,.12);
}
.q-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.q-name{ font-weight: 600; font-size: 14px; }
.q-reward{ color: #A741F5; font-size: 13px; }

/* Progress */
.q-progress{ height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.q-bar{
  height: 100%; width: var(--p,0%);
  background: linear-gradient(90deg, #A741F5, #40C8FF);
  box-shadow: 0 0 8px rgba(167,65,245,.55);
}

/* Actions */
.q-actions{ display: flex; gap: 8px; margin-top: 8px; }
.q-actions button{
  background: rgba(255,255,255,.06); color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 6px 9px; font-size: 13px;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease;
}
.q-actions button:hover{ transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(167,65,245,.35); }
.q-actions .q-claim[disabled]{ opacity: .5; cursor: not-allowed; }

/* Footer */
.qp-foot{ border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; font-size: 12px; opacity: .85; }

.login-container {
  margin-left: 20px;
}

.login-button {
  padding: 8px 16px;
  margin-bottom: 12px;
  border: #FFFFFF;
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-button:hover {
  box-shadow: 0 0 10px black;
}

.popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Black with opacity */
    padding-top: 60px;
}

.popup-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

button {
    padding: 10px 15px;
    font-size: 16px;
    background-color: #70B5FF;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s;
}

#snapMagicBalance {
  font-family: 'Montserrat', sans-serif; /* Or any other font you prefer */
  font-size: 1rem;                     /* Bigger or smaller than the label */
  font-weight: 700;                      /* Bold for impact */
  color: #66ccff;                        /* Light blue for magic */
}

@keyframes fadeInDecor {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .upload-circle-wrapper {
    width: 240px;
    height: 240px;
  }
}

/* Tooltip for AI prompt warnings */
.ai-tooltip {
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  max-width: 220px;
  z-index: 9999;
}
.ai-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}

/* Fade-in animation for modals */
.fade-in {
  animation: fadeInModal 0.3s ease forwards;
}
@keyframes fadeInModal {
  from {opacity: 0; transform: scale(0.98);}
  to {opacity: 1; transform: scale(1);}
}

/* Optional: compact variant for header */
.btn-magic--compact{ padding:.35rem .7rem; border-radius:10px; }

/* === Header Ornament Placement === */
.header .ornament{ position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); width:min(60vw,560px); opacity:.9; pointer-events:none; }

/* === Tooltip & Fade-in (from earlier) === */
.ai-tooltip { background: rgba(0,0,0,0.85); color:#fff; padding:6px 10px; border-radius:6px; font-size:.85rem; max-width:220px; z-index: 9999; }
.ai-tooltip::after { content:""; position:absolute; bottom:-6px; left:10px; border-width:6px; border-style:solid; border-color:rgba(0,0,0,0.85) transparent transparent transparent; }
.fade-in { animation: fadeInModal .3s ease forwards; }
@keyframes fadeInModal { from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)} }


/* ====== Magic Background & Texture ====== */
:root{
  --magic-teal: #14B8A6;
  --magic-sky:  #38BDF8;
  --glow-soft:  rgba(56,189,248,.28); /* sky glow */
}

/* keep your content above the atmosphere layers */
.header, .main-content, .footer { position: relative; z-index: 1; }

.spell-word{
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-family: var(--font-secondary, 'Raleway', system-ui, sans-serif);
  font-weight: 600; letter-spacing: .04em;
  color: rgba(220, 245, 255, .75);
  text-shadow: 0 0 8px rgba(56,189,248,.25);
  white-space: nowrap; user-select: none;
  filter: blur(3px);             /* default blurred */
  opacity: .85;
  transition: filter .35s ease, opacity .35s ease;
}
.spell-word.is-sharp{
  filter: none;                  /* the one highlighted word */
  opacity: 1;
}

/* ====== Enchanted Glow Utility (use on logo / key CTAs) ====== */
.glow-soft{
  box-shadow:
    0 0 0 0 rgba(56,189,248, .00),
    0 0 22px 6px var(--glow-soft);
  transition: box-shadow .25s ease;
}
.glow-soft:hover{
  box-shadow:
    0 0 0 0 rgba(56,189,248, .00),
    0 0 26px 9px rgba(56,189,248,.36);
}

/* ====== Header Ornament with straight bottom ====== */
.ornament-bottom{
  position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%);transform: translateY();
  width: min(10vw, 200px);
  pointer-events: none; opacity: .95;
  /* straight bottom: mask any uneven lower edges */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
}

/* ====== Magical Buttons (unstyled fallback-friendly) ====== */
.btn-magic{
  --edge: #49c6ff;
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .35rem .8rem; border:1.5px solid var(--edge);
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color:#eaffff; font-weight:700; text-decoration:none; cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease;
  font-size: 13.5px;
  line-height: 1;
}

.btn-magic--compact{ padding:.4rem .75rem; border-radius:10px; }

/* ====== Upload Area Teleportation Circle (aligns with your art) ====== */
/* wrap your upload card in a container: <div class="upload-stage"> ... existing upload UI ... </div> */
.upload-stage{ position: relative; }
.upload-stage::before{
  content:"";
  position:absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("Media/TeleportCircle.png") center/contain no-repeat;  /* your circle art */
  filter: drop-shadow(0 6px 18px rgba(56,189,248,.35));
  opacity: .95;
}
.upload-stage > *{ position: relative; z-index: 1; } /* keep content above the circle */

/* ===== SnapWorld Intro (Lite) ===== */
#intro-overlay{
  position: fixed; inset: 0; z-index: 99999;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(56,189,248,.12), transparent),
    linear-gradient(#0a0f2c, #111a3a);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .35s ease;
}
#intro-overlay.is-on{ opacity: 1; }

#intro-overlay .intro-inner{
  position: relative;
  width: min(70vw, 720px);
  aspect-ratio: 16/9;
  display: grid; place-items: center;
}

#intro-overlay .intro-spiral{
  width: min(160px, 40%);
  opacity: 0; transform: scale(.92);
  animation: introSpin 3.2s linear infinite;
  transition: opacity .4s ease, transform .4s ease;
}
#intro-overlay.is-on .intro-spiral{ opacity: 1; transform: scale(1); }

#intro-overlay .intro-logo{
  position: absolute;
  width: min(340px, 62%);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
#intro-overlay.logo-on .intro-logo{ opacity: 1; transform: translateY(0); }

#intro-overlay .intro-wipe{
  position: absolute; top: 50%; height: 2px; width: 50%;
  background: linear-gradient(to right, white, rgba(255,255,255,.0));
  mix-blend-mode: screen;
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0;
}
#intro-overlay .intro-wipe--left{
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,.0), white);
}
#intro-overlay .intro-wipe--right{
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,.0), white);
}

/* when wipe-on triggers, lines move inward toward the logo */
#intro-overlay.wipe-on .intro-wipe{
  opacity: 1; animation: wipeIn .6s ease forwards;
}
#intro-overlay.wipe-on .intro-wipe--right{
  animation-delay: .06s;
}

/* final fade */
#intro-overlay.fade-out{ opacity: 0; }

/* keyframes */
@keyframes introSpin{
  from{ transform: rotate(0turn); }
  to{ transform: rotate(1turn); }
}
@keyframes wipeIn{
  from{ transform: translateY(-50%) scaleX(0); }
  to{ transform: translateY(-50%) scaleX(1); }
}

/* ===== Portal Section (namespaced) ===== */
.portal-section{
  position: relative;
  padding: clamp(32px, 6vw, 80px) 0;
  /* keep it above global background layers but below modals */
  z-index: 1;
}

/* Subtle magical texture overlay (section-only) */
.portal-section::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:-1;
  /* light rays + your texture */
  background:
    radial-gradient(600px 400px at 20% -10%, rgba(56,189,248,.10), transparent),
    radial-gradient(800px 500px at 80% 110%, rgba(20,184,166,.06), transparent),
    url("Media/Textures/texture-placeholder.png");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: cover, cover, auto;
  opacity:.18;
  mix-blend-mode: soft-light;
}

/* 3-column on desktop, stacked on mobile */
.portal-grid{
  display: grid;
  grid-template-columns: 1fr minmax(320px, 680px) 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
}

/* Centerpiece */
.portal-core{
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
}
.portal-circle{
  width: min(72vw, 620px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(56,189,248,.35));
}
.portal-upload{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none; /* keeps image interactive-free */
}
.portal-upload > *{
  pointer-events: auto; /* but allow the actual controls to be clickable */
}
.portal-hint{ opacity:.8; font-size: .9rem; margin-top: .5rem; }

/* Stone boxes */
.stone-box{
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: clamp(12px, 2vw, 18px);
}
.stone-art{
  width: min(28vw, 360px);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}
.stone-content{
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(14px, 2.4vw, 28px);
}
.stone-steps{
  margin: .5rem 0 0;
  text-align: left;
  max-width: 24ch;
  line-height: 1.4;
}
.stone-text{ max-width: 26ch; line-height: 1.5; }

/* Floating animation (desktop only) */
@keyframes floatY {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Enable float on desktop */
@media (min-width: 900px){
  .stone-left { animation: floatY 6.5s ease-in-out infinite; }
  .stone-right{ animation: floatY 7.5s ease-in-out infinite; animation-delay: .6s; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .stone-left, .stone-right{ animation: none  ; }
}

/* Mobile stacking */
@media (max-width: 899px){
  .portal-grid{
    grid-template-columns: 1fr;
  }
  .stone-art{ width: min(86vw, 460px); }
  .portal-circle{ width: min(90vw, 560px); }
  .stone-content{ position: absolute; inset: 0; }
}

.stone-wrap {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Title & subtitle on the stone */
.stone-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: .5px;
}

.stone-sub {
  font-size: clamp(14px, 1.6vw, 16px);
  opacity: .95;
  max-width: 70ch;
  margin: 0 auto;
}

/* 3 engravings under the title */
.engrave-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 18px);
  margin-top: 10px;
}

.engrave {
  padding: 14px 16px;
  background: rgba(0,0,0,.18);
  border: 1.5px solid rgba(217,255,255,.35);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

.engrave h3 { margin-bottom: 6px; }

/* mobile stacking */
@media (max-width: 900px) {
  .engrave-grid { grid-template-columns: 1fr; }
}

/* subtle base shadow under the table (uses your .stone-shadow div) */
.stone-shadow {
  width: min(820px, 80vw);
  height: 28px;
  margin: 14px auto 0;
  filter: blur(12px);
  background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent 70%);
}

.stone-table {   /* this is what is controlling my stone table - deelete for beeter ui*/
	height: 650px;
	weight: 650px;
}

/* Button (uses your theme; tweak if needed) */
.btn-magic{
  --edge:#49c6ff;
  --btn-radius: 12px;
  --btn-pad-y: .6rem;
  --btn-pad-x: 1rem;
	
  display:inline-flex; align-items:center; gap:.5rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border:1.5px solid var(--edge);
  border-radius: var(--btn-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color:#eaffff; font-weight:700; text-decoration:none; cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn-magic:hover{ transform: translateY(-1px); box-shadow: 0 0 18px 2px rgba(73,198,255,.35); }

.btn-magic.is-circle{
  --btn-radius: 50%;
  --btn-pad-y: 0;
  --btn-pad-x: 0;
  justify-content: center;
}

/* Optional “portal size” helper if you ever want to explicitly size it */
.btn-magic.is-portal{
  width: 320px;
  height: 320px;
}

/* Sparkles field covering more height so particles reach above mid-table */
.sparkle-field {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 140vh;         /* raise particle ceiling without touching scripts */
  top: -20vh;
  pointer-events: none;
  z-index: 0;            /* behind content */
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(1);   opacity:.95; }
  100% { transform: translateY(-520px) scale(.85); opacity:.10; }
}

/* keep table/z-index above sparkles */
.stone-wrap > * { position: relative; z-index: 1; }

/* Page wrapper (does NOT affect body gradient) */
.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page > main { 
  flex: 1 0 auto;   /* main expands to push footer down */
}

/* Tiny toasts */
.sw-toast {
  position: fixed;
  right: 16px;
  top: 16px;
  background: rgba(7,12,28,.92);
  border: 1px solid rgba(104,207,255,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 16px rgba(56,189,248,.25);
  color: #EAFBFF;
  padding: 10px 14px;
  border-radius: 10px;
  font: 600 13px/1.35 Quicksand, system-ui, sans-serif;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 99999;
}
.sw-toast.show { opacity: 1; transform: translateY(0); }

/* Teleport Pulse Buy Button */
.pulse-btn {
  position: relative;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font: 800 14px/1 system-ui,-apple-system,Segoe UI,Inter,sans-serif;
  color: #0a0f1f;
  background: linear-gradient(180deg, #e6fbff, #bfefff);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease;
}
.pulse-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.pulse-btn:active { transform: translateY(0); filter: brightness(.98); }

/* pulse rings */
.pulse-btn::before, .pulse-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.pulse-btn::before {
  background: radial-gradient(80% 60% at 50% 50%, rgba(56,189,248,.35), transparent 60%);
  opacity: .8; mix-blend-mode: screen;
  animation: sw-teleport 2.4s ease-in-out infinite;
}
.pulse-btn::after {
  background: radial-gradient(70% 50% at 50% 50%, rgba(167,65,245,.28), transparent 62%);
  animation: sw-teleport 2.4s ease-in-out .6s infinite;
}
@keyframes sw-teleport {
  0% { transform: scale(.9); opacity: .8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(.9); opacity: .8; }
}

/* "Current tier" pill (no button) */
.tier-current {
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  font: 800 12px/1 system-ui,-apple-system,Segoe UI,Inter,sans-serif;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.22);
  color: #EAFBFF;
}

.hidden{ display:none; }

/* ===== Modal Base (replaces the plain look; keeps your .hidden toggle) ===== */
.modal:not(.hidden){
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10000;
}

/* Soft backdrop */
.modal:not(.hidden)::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 28, 0.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* Card */
.modal .modal-content{
  position: relative;
  width: min(840px, 92vw);
  max-height: 86vh;
  overflow: auto;
  padding: 20px 22px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 0 0 1.5px rgba(128, 232, 255, .22);
  outline: 1px solid rgba(73,198,255,.15);
  animation: modalPop .22s ease-out;
}

/* Title */
.modal .modal-content h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.35rem;
  letter-spacing: .3px;
  margin: 0 0 10px 0;
}

/* Close button (X) */
.modal .close{
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #dffbff;
  opacity: .85;
  transition: transform .12s ease, opacity .2s ease, text-shadow .2s ease;
  user-select: none;
}
.modal .close:hover{
  transform: scale(1.08);
  opacity: 1;
  text-shadow: 0 0 8px rgba(73,198,255,.6);
}

/* Tabs in auth modal */
.modal-tabs{
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  margin: 4px 0 14px;
}
.modal-tabs .tab{
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  color: #cfefff;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.modal-tabs .tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(73,198,255,.25);
}
.modal-tabs .tab.active{
  background: linear-gradient(180deg, rgba(73,198,255,.28), rgba(73,198,255,.16));
  box-shadow: inset 0 0 0 1.5px rgba(73,198,255,.45);
}

/* Auth form container (where JS injects the form) */
#formContainer{
  display: grid;
  gap: 12px;
}
#formContainer input,
#formContainer button{
  font-family: 'Raleway', sans-serif;
}
#formContainer input{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(128,232,255,.25);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}
#formContainer input:focus{
  border-color: #49c6ff;
  box-shadow: 0 0 0 3px rgba(73,198,255,.18);
}
#formContainer button{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1.5px solid #49c6ff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  color: #eaffff;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease;
}
#formContainer button:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 18px 2px rgba(73,198,255,.35);
}

/* Primary action button under the scene grid */
#generateBtn{
  margin-top: 14px;
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  border: 1.5px solid #49c6ff;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  color: #eaffff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
#generateBtn:disabled{
  opacity: .55;
  cursor: not-allowed;
}
#generateBtn:not(:disabled):hover{
  transform: translateY(-1px);
  box-shadow: 0 0 18px 2px rgba(73,198,255,.35);
}

/* Tiny pop animation */
@keyframes modalPop{
  from{ transform: translateY(4px) scale(.985); opacity:.0; }
  to{   transform: translateY(0)   scale(1);     opacity:1; }
}

/* === Modal Shell (glass + glow) === */
.sw-modal[aria-hidden="true"] { display: none; }
.sw-modal[aria-hidden="false"] { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }

.sw-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,6,23,.62);
  backdrop-filter: blur(6px);
}

.sw-panel {
  position: relative;
  width: min(680px, 92vw);
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1.5px solid rgba(73,198,255,.55);
  box-shadow: 0 0 24px rgba(73,198,255,.25), inset 0 0 24px rgba(167,65,245,.12);
  animation: swPop .24s ease-out;
}
@keyframes swPop { from { transform: scale(.98); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.sw-close {
  position: absolute; top: 8px; right: 8px;
  border: 0; background: transparent; color: #dffbff; font-size: 18px; cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(73,198,255,.65));
}
.sw-close:hover { transform: scale(1.06); }

/* Tabs */
.sw-tabs { display: flex; gap: 8px; margin: 10px 0 14px; }
.sw-tab {
  border: 1px solid rgba(73,198,255,.5);
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer; color: #eaffff; font-weight: 700;
}
.sw-tab.is-active { border-color: #49c6ff; box-shadow: 0 0 12px rgba(73,198,255,.35) inset; }

.sw-tabpanes { margin-top: 6px; }
.sw-pane { display: none; }
.sw-pane.is-active { display: grid; gap: 10px; }

.sw-pane label { display: grid; gap: 6px; font-weight: 600; }
.sw-pane input {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(73,198,255,.45);
  background: rgba(0,0,0,.25); color: #eaffff;
}

/* Prevent layout shift anywhere */
#fileInput { display: none; }


/* Make clicking outside close-friendly on small screens too */
@media (max-width: 520px){
  .modal .modal-content{
    width: min(94vw, 520px);
    padding: 16px;
    border-radius: 16px;
  }
}

/* Compact the login/signup tabs */
.modal-tabs{
  display:flex;
  gap:.5rem;                /* tighten spacing */
  justify-content:center;
  margin:12px 0 6px;
}
.modal-tabs .tab{
  padding:.5rem .9rem;
  line-height:1;
}

/* lock the circle label size */
.portal-core .rune-upload-circle.btn-magic {
  padding: 0  ;
  border: none  ;
  background: transparent  ;
}

/* always-on cyan ring behind your circle art */
.upload-circle-stage{ position:relative; }

/* === Portal ring that hugs the art (no size changes to your image) === */
.rune-upload-circle {
  position: relative; /* anchor for the ring */
	border:2px solid #49c6ff; box-shadow:0 0 18px rgba(73,198,255,.45), inset 0 0 8px rgba(73,198,255,.25);
}

/* tuning knobs: tweak only these if you want it tighter/looser/elliptical */
.rune-upload-circle {
  --ring-pad: -6px;        /* grow/shrink uniformly (+ expands, - contracts) */
  --ring-scale-x: 0.98;    /* squish/stretch horizontally (1 = circle) */
  --ring-scale-y: 0.97;    /* squish/stretch vertically   (1 = circle) */
  --ring-color: #49c6ff;
  --ring-outer-glow: 0 0 18px rgba(73,198,255,.45);
  --ring-inner-glow: inset 0 0 8px rgba(73,198,255,.25);
}

/* the ring */
.rune-upload-circle::after{
  content:"";
  position:absolute;
  top: var(--ring-pad); right: var(--ring-pad);
  bottom: var(--ring-pad); left: var(--ring-pad);
  border-radius:50%;
  border:2px solid var(--ring-color);
  box-shadow: var(--ring-outer-glow), var(--ring-inner-glow);
  pointer-events:none;
  transform: translateZ(0) scaleX(var(--ring-scale-x)) scaleY(var(--ring-scale-y));
  /* prevents blurring on some GPUs */
  will-change: transform;
}

/* === Stone tablets: centered content + glowing text === */
.stone-box { display:flex; align-items:center; }
.stone-content{
  margin: 0 auto;
  text-align: center;
  max-width: 84%;
  transform: translateY(2px); /* nudge if needed */
}

.stone-content h3,
.stone-steps li,
.stone-text{
  color:#eafcff;
  text-shadow:
    0 0 2px rgba(255,255,255,.5),
    0 0 10px rgba(73,198,255,.35),
    0 0 22px rgba(73,198,255,.25);
  letter-spacing: .2px;
}

/* headings a bit bolder like the portal text */
.stone-content h3{
  font-weight: 900;
  letter-spacing: .4px;
  margin-bottom: 8px;
}
.stone-steps{
  display: inline-block; text-align:left; /* keeps numbers aligned but visually centered */
}

#chosenPreview {
  image-rendering: auto;  /* or 'crisp-edges' if you like a pixel-art vibe */
}

/* Keep your .ref-box as flex; just refine sizing & centering */
.ref-box { align-items:center; justify-content:center; }                 /* centers the button vertically */
#referralCode { flex: 1 1 560px; min-width:560px; } /* longer input, grows on wide screens */
#copyRef { align-self: center; }                  /* stays centered vs input height */
@media (max-width: 720px){
  #referralCode { min-width: 0; }                 /* don’t overflow on mobile */
}

.ref-stats{ display:flex; gap:18px; flex-wrap:wrap; }
.ref-stats .kpi{ display:block; font-weight:900; font-size:18px; line-height:1; }
/* Your purple wrapper is <div class="tier-card purple"> ... */

.tier-card--archmage{
  position:relative; isolation:isolate;
  overflow:hidden;                      /* keep everything inside */
  border-color: rgba(167,65,245,.8)  ;
}

/* Animated inner gradient rim INSIDE the card */
.tier-card--archmage::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  height: 1800px;
  padding:2px;                           /* thickness of the rim */
  background: conic-gradient(
      from 0deg,
      rgba(255,216,107,.85),
      rgba(167,65,245,.65),
      rgba(255,216,107,.85),
      rgba(167,65,245,.65),
      rgba(255,216,107,.85)
  );
  background-size: 200% 200%;
  animation: swPurpleSpin 5.5s linear infinite;
  /* make it a ring: keep only the border area visible */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none; opacity:.95;
}
@keyframes swPurpleSpin { to { transform: rotate(360deg); } }

/* Layering: all real content above FX layers */
.tier-card--archmage{ position:relative; overflow:hidden; }
.tier-card--archmage > *{ position:relative; z-index:1; }

/* Purple border FX stays under emblem/text */
.tier-card.purple::before{ z-index:0; }

/* Fairies container sits in the background */
.tier-card.green .fx-behind{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}

/* Single fairy dot */
.fairy{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle, rgba(120,255,210,.95) 0 2px, rgba(120,255,210,.45) 3px, transparent 4px);
  filter: drop-shadow(0 0 7px rgba(120,255,210,.9));
  opacity:0; /* will fade in/out */
}

/* A handful of curvy paths from different edges */
@keyframes path-a{ 0%{transform:translate(-10%,20%) scale(.9);opacity:0} 10%{opacity:1}
  45%{transform:translate(40%, -5%) scale(1)} 80%{transform:translate(95%, 30%) scale(.9)} 100%{opacity:0}}
@keyframes path-b{ 0%{transform:translate(110%,60%) scale(1);opacity:0} 12%{opacity:1}
  40%{transform:translate(55%, 10%) scale(1.05)} 72%{transform:translate(5%, 35%) scale(.95)} 100%{opacity:0}}
@keyframes path-c{ 0%{transform:translate(30%,-10%) scale(.9);opacity:0} 10%{opacity:1}
  50%{transform:translate(65%, 35%) scale(1.05)} 85%{transform:translate(40%, 110%) scale(.9)} 100%{opacity:0}}
@keyframes path-d{ 0%{transform:translate(70%,110%) scale(1);opacity:0} 10%{opacity:1}
  50%{transform:translate(30%, 50%) scale(1.05)} 85%{transform:translate(-10%, -5%) scale(.9)} 100%{opacity:0}}





.sw-modal{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
.sw-modal[hidden]{ display:none; }
.sw-modal__backdrop{ position:absolute; inset:0; background:rgba(0,10,30,.6); backdrop-filter: blur(4px); }
.sw-modal__panel{
  position:relative; width:min(520px, 92vw); border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(17,45,96,.85), rgba(13,35,74,.75));
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  padding:22px;
}
.sw-modal__close{ position:absolute; top:6px; right:10px; border:0; background:transparent; color:#fff; font-size:26px; line-height:1; cursor:pointer; opacity:.9 }
.sw-modal__title{ margin:4px 0 14px; font-weight:900; font-size:22px }
.sw-auth-form{ display:grid; gap:12px; margin-bottom:12px }
.sw-field span{ display:block; font-weight:700; margin-bottom:6px; opacity:.85 }
.sw-field input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#e8f1ff }
.sw-divider{ display:flex; align-items:center; gap:10px; opacity:.8; margin:12px 0 }
.sw-divider::before,.sw-divider::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.16) }
.sw-divider span{ font-weight:800 }
.sw-google-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 12px;
  background:#fff; color:#111; font-weight:800; cursor:pointer;
}
.sw-google-btn img{ width:18px; height:18px }
.sw-sub{ margin-top:10px; text-align:center; opacity:.9 }
.sw-link{ color:#8fd3ff; font-weight:800; text-decoration:none }

.sw-modal{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
.sw-modal[hidden]{ display:none; }
.sw-modal__backdrop{ position:absolute; inset:0; background:rgba(0,10,30,.6); backdrop-filter: blur(4px); }
.sw-modal__panel{
  position:relative; width:min(520px, 92vw); border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(17,45,96,.85), rgba(13,35,74,.75));
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  padding:22px;
}
.sw-modal__close{ position:absolute; top:6px; right:10px; border:0; background:transparent; color:#fff; font-size:26px; line-height:1; cursor:pointer; opacity:.9 }
.sw-modal__title{ margin:4px 0 14px; font-weight:900; font-size:22px }
.sw-auth-form{ display:grid; gap:12px; margin-bottom:12px }
.sw-field span{ display:block; font-weight:700; margin-bottom:6px; opacity:.85 }
.sw-field input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#e8f1ff }
.sw-divider{ display:flex; align-items:center; gap:10px; opacity:.8; margin:12px 0 }
.sw-divider::before,.sw-divider::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.16) }
.sw-divider span{ font-weight:800 }
.sw-google-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 12px;
  background:#fff; color:#111; font-weight:800; cursor:pointer;
}
.sw-google-btn img{ width:18px; height:18px }
.sw-sub{ margin-top:10px; text-align:center; opacity:.9 }
.sw-link{ color:#8fd3ff; font-weight:800; text-decoration:none }


/* Emblems inside tier cards */
.tier-card .emblem{ width:56px; height:56px; object-fit:contain; display:block; margin:10px auto 6px; }


/* stack contents and pin the CTA to the bottom */
.tiers-grid .tier-card{ display:flex; flex-direction:column; }
.tier-card .pulse-btn, .tier-card .tier-current{ margin-top:auto; }  /* blue has a label not a button */

.price-wrap{ position:relative; display:inline-grid; place-items:center; min-width:3.2ch }
.price-wrap > span{ grid-area:1/1 } /* stack current & ghost on top of each other */

.price-ghost{
  position:absolute; inset:0; display:grid; place-items:center;
  color:inherit; opacity:1; transform:translate(0,0) scale(1);
  transition: transform .32s ease, opacity .32s ease;
}
.price-ghost::after{ /* the diagonal "\" slash */
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(70deg, transparent 46%, currentColor 48%, currentColor 52%, transparent 54%);
  opacity:.85; pointer-events:none;
}
.price-ghost.strike-out{ opacity:0; transform: translate(12px,-8px) scale(.78); }

.price-amount{ display:inline-block; }
.price-amount.pop-in{ animation: pricePop .28s ease; }
@keyframes pricePop{ from{ transform:scale(.86); opacity:.6 } to{ transform:scale(1); opacity:1 } }


/* Put at END of your CSS */
.site-header, .topbar, header .nav, .nav-row {
  display:flex; align-items:center;
}

/* Right cluster that holds balance, scroll, and login — adjust the selector to your wrapper */
.header-actions, .nav-right, .topbar-actions {
  display:flex; align-items:center; gap:12px;
}

/* Target the actual button (add id or class if you can) */
#loginHeaderBtn, .login-btn, .auth-btn {
  position:static  ;
  margin:0  ;
  align-self:center  ;
  line-height:1  ;
  vertical-align:middle;
}

.promo-badge{
  display:inline-block; margin-left:.5rem; padding:.15rem .45rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); font-weight:800; font-size:.8rem; opacity:.9
}
.is-disabled{ opacity:.55; pointer-events:none; filter:grayscale(.2); }

.scenes-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px }
.scene-card{ border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:12px; background:rgba(10,20,40,.25) }
.scene-card.locked{ opacity:.6; position:relative }
.scene-card .scene-thumb{ height:120px; border-radius:10px; background:rgba(255,255,255,.06) }
.lock-note{ margin-top:.4rem; font-weight:800; opacity:.85 }

.btn-pill[disabled]{ 
  pointer-events:none; opacity:.6; cursor:default; filter:grayscale(.2);
}
.btn-compact{ padding:8px 12px; font-size:.95rem; white-space:nowrap; width:auto; }
.packs-grid .btn-compact{ justify-self:start; max-width:100%; }

.tier-card.purple{ position:relative; } /* if not already */
.tier-card.purple .promo-tag{
  position:absolute; top:8px; right:8px; z-index:2;
  padding:4px 8px; border-radius:999px; font-weight:800; font-size:.8rem;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.25); backdrop-filter:blur(2px);
  pointer-events:none; /* no clicks; no layout shift */
}
.world-modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45); z-index:1000; }
.world-modal[hidden]{ display:none; }
.world-sheet{ width:min(780px,92vw); border:1px solid rgba(255,255,255,.15); border-radius:16px;
  background:rgba(10,20,40,.92); padding:14px; position:relative; }
.world-close{ position:absolute; top:6px; right:8px; font-size:20px; background:transparent; border:0; color:#fff; opacity:.8; }
.world-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.world-thumb{ width:120px; height:80px; object-fit:cover; border-radius:10px; }
.world-title{ margin:0; font-weight:900; }
.world-sub{ opacity:.85; font-size:.9rem; }
.world-controls{ display:grid; gap:10px; margin:8px 0; }
.wc-group .wc-label{ font-weight:800; margin-bottom:4px; opacity:.9; }
.wc-row{ display:flex; flex-wrap:wrap; gap:8px; }
.wc-chip{ border:1px solid rgba(255,255,255,.18); border-radius:999px; background:transparent; color:inherit; padding:6px 10px; cursor:pointer; }
.wc-chip[aria-pressed="true"]{ background:rgba(255,255,255,.12); }
.wc-prompt{ width:100%; min-height:72px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(0,0,0,.25); color:#fff; padding:8px; }
.world-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.cost-note{ font-weight:800; opacity:.9; }

/* Single-row horizontal strip; tiles equal size; long names don’t change height */
#sceneChoices.thumb-row{
  display:flex; flex-wrap:nowrap; gap:12px;
  overflow-x:auto; padding-bottom:8px;
  scroll-snap-type:x mandatory;
}
#sceneChoices .thumb-card{
  flex:0 0 190px;                      /* tile width */
  display:flex; flex-direction:column; align-items:center;
  scroll-snap-align:start;
}
#sceneChoices .thumb-img{ width:100%; aspect-ratio: 4 / 3; border-radius:10px; overflow:hidden }
#sceneChoices .thumb-caption{
  margin-top:6px; min-height:2.4em; line-height:1.2em; text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#sceneChoices::-webkit-scrollbar{ height:8px } /* optional: keep if you like */

.btn-compact{ display:inline-flex; width:max-content; padding:8px 12px; font-size:.95rem; white-space:nowrap }
.packs-grid .btn-compact{ justify-self:start; }

/* One horizontal row + drag scroll feedback */
#sceneChoices.thumb-row{
  display:flex; flex-wrap:nowrap; gap:12px;
  overflow-x:auto; overflow-y:hidden; padding-bottom:8px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch;
}
#sceneChoices .thumb-card{ flex:0 0 200px; scroll-snap-align:start; }
#sceneChoices.grabbing{ cursor:grabbing; }

/* Center only that compact button in its grid/section */
.btn-compact { display:inline-flex; width:max-content; padding:8px 12px; font-size:.95rem; white-space:nowrap; }
.packs-grid .btn-compact { justify-self:center; }

/* --- Force map to show --- */
.map-wrap, .map-track, .map-tile { display:block  ; visibility:visible  ; }

header, .site-header, .header { position:relative; z-index:1005; }

.legal-wrap{width:min(900px,92vw);margin:48px auto;line-height:1.7}

/* Only affects pages where <body> has class "sticky-layout" */
body.sticky-layout { min-height: 100dvh; display: flex; flex-direction: column; }
body.sticky-layout .main-content { flex: 1 0 auto; }
body.sticky-layout .site-footer fx-sparkle { margin-top: auto; }

.site-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  padding: 14px 0px;
}
.site-footer .footer-nav {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.site-footer .footer-nav a {
  text-decoration: none; opacity: .9;
}
.site-footer .footer-nav a:hover {
  opacity: 1; text-decoration: underline;
}
.site-footer .socials {
  display: flex; gap: 10px; justify-content: center; margin-top: 6px;
}
.site-footer .socials svg {
  width: 18px; height: 18px; vertical-align: middle; opacity: .9;
  transition: transform .15s ease, opacity .15s ease;
}
.site-footer .socials a:hover svg { opacity: 1; transform: translateY(-1px); }

/* Don’t change size on hover; keep glow only */
.upload-circle-stage:hover .rune-upload-circle,
.rune-upload-circle.is-circle:hover { transform: none  ; }
.rune-upload-circle { transition: filter .3s ease, box-shadow .3s ease; }

/* Matches your anchor markup */
.SnapMagic{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem; border-radius:999px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(4px);
  font-weight:600; text-decoration:none;
}
.SnapMagic .snapmagic-label{ opacity:.85; letter-spacing:.02em }
#snapMagicBalance{ font-variant-numeric: tabular-nums; font-weight:700 }

.no-scene-mode #sceneModal,
.no-scene-mode [data-open-scene] { display: none  ; }

.portal-intro{position:fixed;inset:0;background:radial-gradient(120% 120% at 50% 50%, #0b0f1b 0%, #000 60%), #000;
  display:grid;place-items:center;z-index:9999;animation:intro-fade 4s ease forwards;}
.pi-stage{position:relative;width:min(560px,90vw);aspect-ratio:1;}

.pi-bg{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 55%, rgba(120,180,255,.15), transparent 60%);filter:blur(12px);opacity:0;animation:bg-glow 2.2s .1s ease-out forwards;}
.pi-ring{position:absolute;inset:12%;border-radius:50%;box-shadow:0 0 0 2px rgba(168, 80, 255, .8) inset,0 0 28px rgba(168,80,255,.6);
  animation:ring-pulse 2.1s .2s ease-out forwards;}
.pi-glyphs{position:absolute;inset:0;border-radius:50%;
  --g: conic-gradient(from 0deg, transparent 0 40deg, rgba(168,80,255,.9) 40deg 44deg, transparent 44deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 60% 62%, transparent 64%); 
  background: var(--g); filter: drop-shadow(0 0 12px rgba(168,80,255,.7));
  animation:glyph-spin 2.4s .2s linear forwards;}
.pi-logo{position:absolute;inset:0;margin:auto;width:70%;opacity:0;transform:scale(.92);
  filter:drop-shadow(0 0 28px rgba(167,65,245,.5));animation:logo-bloom 1s 2.6s ease-out forwards;}

@keyframes ring-pulse{
  0%{transform:scale(.9);opacity:0}
  30%{opacity:1}
  70%{box-shadow:0 0 0 2px rgba(168,80,255,.9) inset,0 0 60px rgba(168,80,255,.8)}
  100%{transform:scale(1.06);opacity:1}
}
@keyframes glyph-spin{
  0%{transform:rotate(0)}
  70%{transform:rotate(720deg)}
  100%{transform:rotate(900deg); opacity:0}
}
@keyframes bg-glow{to{opacity:1}}
@keyframes logo-bloom{to{opacity:1; transform:scale(1)}}
@keyframes intro-fade{0%,90%{opacity:1}100%{opacity:0; visibility:hidden}}

#sparkles { position:absolute; inset:0; pointer-events:none; }

#snap-popups{ position:fixed; inset:0; pointer-events:none; z-index:50; }
.snap-float{
  position:absolute; pointer-events:auto; user-select:none;
  font-family: Quicksand, sans-serif; font-weight:700;
  padding:.5rem .7rem; border-radius:.6rem; transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1);
  background: radial-gradient(circle at 30% 30%, #fff, #ffd36e);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 24px rgba(255, 215, 0, .5);
  animation: shrinkOut 15s forwards;
}
@keyframes shrinkOut { 0%{opacity:1; transform:translate(-50%,-50%) rotate(var(--rot)) scale(1)}
  100%{opacity:0; transform:translate(-50%,-50%) rotate(var(--rot)) scale(.6)}}

.quests-box{ position:fixed; right:1rem; bottom:1rem; width:240px; padding:.75rem; border-radius:12px;
  background:rgba(15,18,35,.85); border:1px solid rgba(255,255,255,.12); z-index:40; }
.quests-box h4{ margin:.2rem 0 .4rem; }
.quests-box li+li{ margin-top:.25rem; }

body {
  background: url("Media/Guild-Rooms/Teleportion circle.png") no-repeat center center fixed;
  background-size: cover;
}
body.treasury-page {
  background-image: url("Media/Guild-Rooms/Teleportion circle.png");
}
body.spells-page {
  background-image: url("Media/backgrounds/guildhall-spells.webp");
}
body.collection-page {
  background-image: url("Media/backgrounds/guildhall-collection.webp");
}


/* ============================================================
   SnapWorld — Page Backgrounds (non-intrusive, layout safe)
   Paste at END of styles.css
   ============================================================ */

/* Shared cosmic canvas + soft vignette + star shimmer */
:root{
  --sw-deep:#0b0f1f;         /* deep cosmic blue */
  --sw-ink:#0a0d18;
  --sw-sky:#76e4ff;          /* neon teal accents */
  --sw-violet:#A741F5;       /* glowing purple */
  --sw-gold:#F2B705;         /* shimmering gold */
}

/* universal living gradient behind everything */
body.page-home,
body.page-treasury,
body.page-spells,
body.page-legal,
body.page-snapmagic,
body.page-world{
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(118,228,255,.10), transparent 60%),
    radial-gradient(900px 600px  at 85% 110%, rgba(167,65,245,.08), transparent 60%),
    linear-gradient(180deg, var(--sw-ink) 0%, var(--sw-deep) 100%);
  position: relative;
  overflow-x: hidden;
}

/* star dust (subtle, non-blocking) */
body.page-home::before,
body.page-treasury::before,
body.page-spells::before,
body.page-legal::before,
body.page-snapmagic::before,
body.page-world::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.35;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(167,65,245,.55), rgba(167,65,245,0) 60%),
    radial-gradient(1.5px 1.5px at 70% 22%, rgba(242,183,5,.6), rgba(242,183,5,0) 60%),
    radial-gradient(1.5px 1.5px at 36% 76%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%);
  animation: sw-twinkle 7s linear infinite;
}
@keyframes sw-twinkle{ 0%,100%{opacity:.32} 50%{opacity:.55} }

/* vignette */
body.page-home::after,
body.page-treasury::after,
body.page-spells::after,
body.page-legal::after,
body.page-snapmagic::after,
body.page-world::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 8%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 70%);
}

/* ------------------------------------------------------------
   HOME (Teleportation Hall) — floor plane that matches your
   circle’s angle, without drawing a second circle.
   ------------------------------------------------------------ */
.page-home .main-content{
  position: relative;
  isolation: isolate;
}

/* floor plane under your portal layout */
.page-home .main-content::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:min(1400px, 92vw); height:56vh; transform:translateX(-50%);
  background:
    /* faint stone tiles perspective illusion */
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.012) 0 15deg, rgba(255,255,255,0) 15deg 30deg),
    radial-gradient(120% 160% at 50% 20%, rgba(167,65,245,.12), rgba(0,0,0,0) 50%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  filter: blur(.3px);
  border-radius: 40% / 14%;
  box-shadow:
    0 0 0 1px rgba(150,233,255,.10) inset,
    0 50px 180px rgba(0,0,0,.55) inset,
    0 30px 80px rgba(0,0,0,.45);
  opacity:.9;
}

/* grounded aura around the portal (works with your tablet stones) */
.page-home .upload-circle-stage{
  position: relative;
}
.page-home .upload-circle-stage::after{
  content:"";
  position:absolute; left:50%; bottom:-28px; transform:translateX(-50%);
  width: 86%; height: 26px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.65), transparent 70%);
  filter: blur(6px);
}

/* ------------------------------------------------------------
   TREASURY / COLLECTION — vault alcoves + layered halos
   ------------------------------------------------------------ */
body.page-treasury{
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(118,228,255,.10), transparent 60%),
    radial-gradient(900px 600px  at 15% 110%, rgba(242,183,5,.06), transparent 60%),
    linear-gradient(180deg, #0a0e17 0%, #0e1322 100%);
}
.page-treasury main{
  position:relative;
}
.page-treasury main::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.25; mix-blend-mode:soft-light;
  background:
    linear-gradient( to right,
      rgba(0,0,0,.55) 0 140px,
      rgba(0,0,0,0) 140px calc(100% - 140px),
      rgba(0,0,0,.55) calc(100% - 140px) );
}
/* gentle “vault ribs” */
.page-treasury main::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.10;
  background:
    repeating-linear-gradient( 90deg,
      rgba(167,65,245,.55) 0 1px,
      rgba(167,65,245,0) 1px 90px);
  filter: blur(0.4px);
}

/* ------------------------------------------------------------
   SPELLS (features) — Library gallery with branching paths
   (no DOM changes needed; just add body.page-spells)
   ------------------------------------------------------------ */
body.page-spells{
  background:
    radial-gradient(1200px 720px at 50% -10%, rgba(118,228,255,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 110%, rgba(167,65,245,.08), transparent 60%),
    linear-gradient(180deg, #0a0e17 0%, #0c1324 100%);
}
.page-spells .main-content{ position:relative; }

/* aisle shadows hinting at many rooms */
.page-spells .main-content::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.55) 0 120px,
      rgba(0,0,0,0) 120px calc(50% - 280px),
      rgba(0,0,0,.35) calc(50% - 280px) calc(50% - 220px),
      rgba(0,0,0,0) calc(50% - 220px) calc(50% + 220px),
      rgba(0,0,0,.35) calc(50% + 220px) calc(50% + 280px),
      rgba(0,0,0,0) calc(50% + 280px) calc(100% - 120px),
      rgba(0,0,0,.55) calc(100% - 120px)
    );
}

/* subtle tile floor in perspective, aligned like the portal page */
.page-spells .main-content::after{
  content:"";
  position:absolute; left:50%; top:58%;
  width:min(1400px,92vw); height:54vh; transform:translateX(-50%);
  background:
    repeating-linear-gradient( to right, rgba(255,255,255,.04) 0 40px, rgba(255,255,255,0) 40px 80px ),
    repeating-linear-gradient( to bottom, rgba(255,255,255,.02) 0 40px, rgba(255,255,255,0) 40px 80px ),
    radial-gradient(120% 160% at 50% 15%, rgba(167,65,245,.10), rgba(0,0,0,0) 55% );
  border-radius: 40% / 14%;
  box-shadow:
    0 0 0 1px rgba(150,233,255,.08) inset,
    0 50px 180px rgba(0,0,0,.50) inset,
    0 30px 80px rgba(0,0,0,.40);
  opacity:.9;
}

/* “path markers” utility you can apply to feature cards/links*

/* World-Maps strip */
.worldstrip{
  /* match your sidebar vibe */
  background: linear-gradient(135deg, rgba(15,24,48,.55), rgba(28,20,58,.55));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 10px 14px;
  margin: 12px auto 10px;
  width: min(1200px, 94vw);
}
.worldstrip-inner{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Thumbnails (rounded corners) */
.worldthumb{
  position: relative;
  display: grid;
  grid-template-rows: auto 24px;
  gap: 6px;
  align-items: center;
  justify-items: center;
  width: 140px;
  padding: 8px;
  border-radius: 16px;               /* rounded thumbnail card */
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.worldthumb img{
  display: block;
  width: 124px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;               /* rounded image itself */
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.worldthumb:hover{ transform: translateY(-1px); }
.worldname{
  font: 600 12px/1.2 "Montserrat", system-ui, sans-serif;
  color: #dfe7ff; opacity: .95; text-shadow: 0 0 8px rgba(120,180,255,.25);
}

/* Locked state (gray teaser) */
.worldthumb.locked{
  filter: grayscale(0.75) contrast(.9) brightness(.85);
  opacity: .65;
}
.worldthumb.locked .lock{
  position: absolute; top: 8px; right: 10px; font-size: 14px; opacity:.9;
}

/* Unlock shimmer + pop */
@keyframes teleportShimmer {
  0%   { box-shadow: 0 0 0 rgba(167,65,245,0); }
  35%  { box-shadow: 0 0 0 rgba(167,65,245,0), 0 0 24px rgba(167,65,245,.55); }
  70%  { box-shadow: 0 0 0 rgba(167,65,245,0), 0 0 12px rgba(167,65,245,.35); }
  100% { box-shadow: 0 0 0 rgba(167,65,245,0); }
}
@keyframes popIn {
  0%   { transform: scale(.92); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.worldthumb.unlocked{
  filter: none; opacity: 1;
  border-color: rgba(167,65,245,.45);
  animation: teleportShimmer 900ms ease-out, popIn 320ms ease-out;
}
.worldthumb.unlocked::after{
  /* faint radial pulse */
  content:""; position:absolute; inset:-2px; border-radius:16px; pointer-events:none;
  background: radial-gradient(120px 60px at 50% 38%, rgba(167,65,245,.35), transparent 60%);
}

/* ==== Header is already unified; ensure it sits above bg */
.header{ position:relative; z-index:10; }

/* ==== Footer (matches header look) ==== */
.site-footer{
  position: relative; z-index: 1;
  margin: 0px auto 18px;
  width: min(1200px, 94vw);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(10,20,45,.75), rgba(16,10,45,.75));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 3px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: 14px 18px;
}
.footer-left{ display:flex; align-items:center; gap:10px; }
.footer-logo{ height:22px; opacity:.9; }
.footer-note{ font-size: 13px; opacity:.85; }

.footer-nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-nav a{ color:#dfe7ff; opacity:.9; text-decoration:none; font-weight:500; }
.footer-nav a:hover{ opacity:1; text-decoration:underline; }
.footer-nav span{ opacity:.4; }

.footer-right .footer-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.3rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  text-decoration:none; font-weight:600; white-space:nowrap;
}

/* keep footer at bottom on short pages */
html, body { height:100%; }
body.sticky-layout { min-height:100vh; display:flex; flex-direction:column; }
main { flex: 1 0 auto; }
.site-footer { flex-shrink:0; }

/* sits above hall background */
.site-footer, .footer-inner { position:relative; z-index:1; }

/* === GLASS HEADER (applies to .header) === */
.header{
  position: sticky; 
  z-index: 10;
  padding-block: 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; 
  align-items: center;
  gap: 10px;

  /* glass look */
  background: rgba(10,16,28,.35); /* transparent */
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(6px) saturate(115%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}

/* wipe any solid/gradient older header backgrounds */
.header::before, .header::after{ display:none  ; }
.sticky-layout .header{ background-image: none  ; }

/* keep the thin neon line from your old style, but subtle */
.header { box-shadow:
    0 8px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.06); }

/* left, middle, right columns */
.header-left{ display:flex; align-items:center; gap:16px; }
.logo-container img#snapLogo{ height:28px; display:block; }
.nav-links{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.nav-links a{ color:#e7f1ff; text-decoration:none; font-weight:600; opacity:.95; }
.nav-links a:hover{ opacity:1; text-decoration:underline; }

.header-middle{ display:flex; justify-content:center; }
.header-middle .ornament-bottom{ height:18px; opacity:.7; pointer-events:none; }

.header-right{ display:flex; align-items:center; gap:14px; justify-content:flex-end; }
.tier{ height:26px; opacity:.95; }
.SnapMagic{ display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .7rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08); text-decoration:none; font-weight:700; }
.login-container .btn-magic{ padding:.45rem .85rem; }

/* small screens */
@media (max-width: 780px){
  .header{ grid-template-columns: 1fr auto; row-gap:8px; }
  .header-middle{ display:none; }
  .nav-links{ gap:14px; font-size:14px; }
  .logo-container img#snapLogo{ height:24px; }
}

/* === iconic centered footer === */
.site-footer{
  position: relative; z-index: 1;
  margin: 0px auto 0px;
  width: min(1200px, 94vw);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(10,20,45,.75), rgba(16,10,45,.75));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 3px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: 14px 18px;
}
.footer-left{ display:flex; align-items:center; gap:10px; }
.footer-logo{ height:22px; opacity:.9; }
.footer-note{ font-size: 13px; opacity:.85; }
.footer-nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-nav a{ color:#dfe7ff; opacity:.9; text-decoration:none; font-weight:500; }
.footer-nav a:hover{ opacity:1; text-decoration:underline; }
.footer-nav span{ opacity:.4; }
.footer-right .footer-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.3rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  text-decoration:none; font-weight:600; white-space:nowrap;
}

/* === FTUE Banner (single slide) === */
.ftue.is-hidden{ display:none; }
.ftue{ position:fixed; inset:0; z-index:10050; display:grid; place-items:center; }
.ftue__backdrop{ position:absolute; inset:0;
  background: radial-gradient(70% 90% at 50% 10%, rgba(5,10,35,.78), rgba(5,10,25,.92));
}

.ftue__panel{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  width:min(1200px, 96vw);
  height:min(680px, 90vh);
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(164,241,255,.14);
  background: linear-gradient(180deg, rgba(10,16,48,.96), rgba(9,14,42,.96));
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.ftue__close{ position:absolute; top:5px; right:30px; z-index:5;
  background:transparent; border:0; color:#e9eeff; font-size:26px; opacity:.85; cursor:pointer;
}

/* left stays fixed image */
.ftue__hero{
  position:relative;
  margin:0;
  height:100%;
  overflow:hidden;
}
.ftue__hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.95;
}

/* right column scrolls */
.ftue__right{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow-y:auto;    /* <-- makes it scrollable */
  padding-right:6px;  /* tiny space for scrollbar */
}
.ftue__right::-webkit-scrollbar{ width:6px; }
.ftue__right::-webkit-scrollbar-thumb{
  background:rgba(167,65,245,.4);
  border-radius:4px;
}
.ftue__sect{
  padding:16px 18px; color:#e8ecff; border-bottom:1px solid rgba(255,255,255,.06);
}
.ftue__sect:last-of-type{ border-bottom:0; }
.ftue__sect-img{
  width:100%; height:110px; object-fit:cover; border-radius:12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  margin-bottom:10px;
}

.ftue__title{ font:800 28px/1.1 Montserrat, system-ui; margin:.1rem 0 .4rem; color:#eaf7ff; }
.ftue__title span{ color:#0084FF; text-shadow:0 0 22px rgba(24,224,213,.35); }
.ftue__h3{ font:800 18px/1.2 Montserrat, system-ui; margin:.1rem 0 .4rem; color:#eaf7ff; }
.ftue__sub{ color:#dbe6ff; opacity:.95; }
.ftue__list{ margin:.35rem 0 .6rem; padding-left:1rem; display:grid; gap:.35rem; }
.ftue__steps{ margin:.35rem 0 .6rem; padding-left:1.2rem; display:grid; gap:.25rem; }
.ftue__tiers{ margin:.35rem 0 .2rem; display:grid; gap:.2rem; }

.ftue__actions{
  position:sticky; bottom:0; display:flex; gap:10px; justify-content:flex-end;
  padding:12px 18px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Balance pulse + teal/purple waves */
@keyframes pulseBalance{ 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.06)} }
.balance-pulse{ animation:pulseBalance .8s ease-in-out 1; }
.ftue-wave{
  position:absolute; pointer-events:none; border-radius:50%;
  border:2px solid rgba(167,65,245,.55);
  box-shadow:0 0 20px rgba(24,224,213,.35), inset 0 0 10px rgba(167,65,245,.25);
  animation: ftueWave 800ms ease-out forwards;
}
@keyframes ftueWave{ from{opacity:.75; transform:scale(.4)} to{opacity:0; transform:scale(2.2)} }

/* Responsive */
@media (max-width: 940px){
  .ftue__panel{ grid-template-columns:1fr; height:min(90vh, 720px); }
  .ftue__hero{ display:none; }
  .ftue__actions{ justify-content:center; }
}

/*snapmagicicon stuff */

@keyframes snapPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 4px #18e0d5); }
  50%     { transform: scale(1.1); filter: drop-shadow(0 0 12px #a741f5); }
}
.snap-pulse { animation: snapPulse 0.8s ease-in-out; }

.snap-wave {
  position:absolute;
  border:2px solid rgba(167,65,245,.55);
  border-radius:50%;
  animation: snapWave 1s ease-out forwards;
}
@keyframes snapWave {
  from { opacity:.7; transform: scale(.5); }
  to   { opacity:0;  transform: scale(2.5); }
}

.snap-shimmer {
  position:relative; overflow:hidden;
}
.snap-shimmer:after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform:translateX(-100%);
}
.snap-shimmer:hover:after {
  transform:translateX(100%);
  transition: transform 0.9s ease;
}

/* inline SnapMagic icon */
.sm-icon{ width:18px; height:18px; vertical-align:middle; margin-right:6px; filter: drop-shadow(0 0 6px rgba(36,255,211,.35)); }
.mm-icon{ width:48px; height:48px; vertical-align:middle; margin-right:6px; filter: drop-shadow(0 0 6px rgba(36,255,211,.35)); }
.lm-icon{ width:18px; height:18px; vertical-align:middle; margin-right:6px; filter: drop-shadow(0 0 6px rgba(36,255,211,.35)); }
.balance-wrap{ position:relative; display:inline-flex; align-items:center; gap:6px; }

/* pulse + waves */
@keyframes snapPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.balance-pulse{ animation:snapPulse .8s ease-in-out 1; }

.snap-wave{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%;
  border:2px solid rgba(167,65,245,.55);
  box-shadow:0 0 20px rgba(24,224,213,.35), inset 0 0 10px rgba(167,65,245,.25);
  animation: snapWave 900ms ease-out forwards;
  pointer-events:none;
}
@keyframes snapWave { from{opacity:.8; transform:translate(-50%,-50%) scale(.6)} to{opacity:0; transform:translate(-50%,-50%) scale(2.4)} }

/* === Parallax layers === */
.stage{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  isolation:isolate;
}

.layer{
  position:absolute;
  inset:-6vh -6vw;
  background-position:center;
  background-size:cover;
  will-change: transform;
  pointer-events:none;
}

/* z-order back → front */
.l-sky{   z-index:1; background-image:url("/Media/Index/Layers/sky_2x.webp"); }
.l-stars{ z-index:2; background-image:url("/Media/Index/Layers/stars_2x.webp"); mix-blend-mode:screen; opacity:.8; }
.l-city{  z-index:3; background-image:url("/Media/Index/Layers/city_2x.webp"); }
.l-fore{  z-index:5; background-image:url("/Media/Index/Layers/foreground_2x.webp"); }
.l-motes{ z-index:6; background-image:url("/Media/Index/Layers/glow-motes_2x.webp"); mix-blend-mode:screen; opacity:.55; }

@media (prefers-reduced-motion: reduce){
  .layer{ transform:none  ; }
}

:root{
  /* defaults; JS will override at runtime */
  --img-sky: url("/Media/Index/Layers/night/sky_2x.webp");
  --img-stars: url("/Media/Index/Layers/night/stars_2x.webp");
  --img-city: url("/Media/Index/Layers/night/city_2x.webp");
  --img-fore: url("/Media/Index/Layers/night/foreground_2x.webp");
  --img-motes: url("/Media/Index/Layers/night/motes_2x.webp");
}

/* point your layer classes at the variables */
.l-sky{   background-image: var(--img-sky);   }
.l-stars{ background-image: var(--img-stars); }
.l-city{  background-image: var(--img-city);  }
.l-fore{  background-image: var(--img-fore);  }
.l-motes{ background-image: var(--img-motes); }

/* container */
.usermenu{ position:relative; display:inline-block; }

/* toggle button */
.user-toggle{
  display:flex; align-items:center; gap:.5rem;
  padding: 0; border-radius: 8px;
  background: transparent;
  border: none;
  color:#e7e9f1; cursor:pointer;
  backdrop-filter: blur(6px) saturate(120%);
  width: 28px;
  height: 28px;
  line-height: 0;
  box-shadow: none;
}
.user-toggle:hover{ background: rgba(255,255,255,.10); }
.user-avatar{ width: 28px; height: 28px; border-radius:999px; object-fit:cover; }
.user-name{ font-weight:600; letter-spacing:.2px; }
.user-toggle .chev{ opacity:.7; }

/* dropdown */
.usermenu .menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width: 220px; padding:.4rem;
  border-radius:16px; z-index:100;
  background: rgba(10,18,32,.85);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  display:none;
}
.usermenu.open .menu{ display:block; }

.menu-item{
  width:100%; text-align:left; padding:.55rem .7rem; border-radius:10px;
  background:transparent; border:none; color:#e7e9f1; cursor:pointer;
}
.menu-item:hover{ background: rgba(255,255,255,.08); }
.menu-sep{ height:1px; margin:.35rem .25rem; background: rgba(255,255,255,.08); border-radius:1px; }

.menu-group{ padding:.25rem .25rem .35rem; }
.menu-label{ font-size:.75rem; opacity:.7; padding:.35rem .45rem .15rem; }

/* keep your existing .btn-magic styles; no conflict */

.theme-chip{
  width: 28px; height: 28px; border-radius:999px;
  display:inline-grid; place-items:center; margin-left:.5rem;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
  color:#e7e9f1; cursor:pointer; backdrop-filter: blur(6px) saturate(120%);
  padding: 0;
}
.theme-chip:hover{ background: rgba(255,255,255,.14); }
.theme-chip svg{ display:none; }
.theme-chip[data-mode="day"]  .i-sun{ display:block; }
.theme-chip[data-mode="night"].i-moon, 
.theme-chip[data-mode="night"] .i-moon{ display:block; } /* (safety for some minifiers) */
.theme-chip[data-mode="auto"] .i-auto{ display:block; }

.layer{
  backface-visibility: hidden;
  transform: translateZ(0);
  image-rendering: auto;
}

header{ position: relative; z-index: 10; } /* keep header above layers */
.safe{ position:absolute; inset:0; z-index: 7; } /* hero zone above layers */

/* keep header above parallax layers */
.header { position: relative; z-index: 10; }

/* hero/safe zone above parallax layers */
.safe { position: absolute; inset: 0; z-index: 7; }

/* avoid flicker/jitter on transforms */
.layer { backface-visibility: hidden; transform: translateZ(0); }

.usermenu .menu { display: none; }
.usermenu.open .menu { display: block; }

.safe > .safe-inner{ backdrop-filter: none  ; }

.safe > .safe-inner{
  box-shadow: 0 12px 32px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06)  ;
}
header.header{ position: relative; z-index: 10; }
.safe{ position: absolute; inset: 0; z-index: 7; }
.layer{ backface-visibility: hidden; transform: translateZ(0); will-change: transform; }

.l-sky, .l-stars, .l-city, .l-fore, .l-motes{
  transition: background-image 0s, opacity .25s ease, transform .02s linear;
}

/* Parallax stability */
.stage{ position:relative; height:100vh; overflow:hidden; isolation:isolate; }
.layer{ position:absolute; inset:-6vh -6vw; background-position:center; background-size:cover;
        will-change:transform; backface-visibility:hidden; transform:translateZ(0); pointer-events:none; }
/* Keep header/hero above layers */
.header{ position:relative; z-index:10; }
.safe{ position:absolute; inset:0; z-index:7; }

.icon-btn {
  width: 28px; 
  height: 28px; 
  border-radius: 50%;
  display: inline-grid; 
  place-items: center;
  background: transparent; 
  border: none; 
  cursor: pointer;
  color: #e7e9f1;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: background .15s ease;
  padding: 0;
}
.icon-btn:hover {
  background: rgba(255,255,255,.1);
}

/* tighten nav links */
.header .nav-links {
  display: flex;
  gap: 16px;             /* was probably ~28–32px */
}

/* more space between logo and nav */
.header .logo-container {
  margin-right: 40px;    /* increase until Guild sits nicely away */
}

/* === Header final overrides === */
header.header {
  margin-top: 0  ;
  border-radius: 0 0 12px 12px  ; /* rounded only on bottom */
}

/* push tier/balance/quest/login/avatar/chip to the far right and align on one row */
.header-right,
.header .login-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

/* tighter spacing between nav links (keeps your nice logo→Guild gap untouched) */
.header .nav-links {
  gap: 18px  ;
}

/* keep About Us on one line */
.header .nav-links a[href*="about"] { white-space: nowrap  ; }

/* unify right-side control heights */
.user-avatar,
.theme-chip,
.icon-btn { width: 28px  ; height: 28px  ; }

/* login pill slightly smaller to match line height */
.btn-magic {
  padding: .45rem .9rem  ;
  font-size: 14px  ;
  line-height: 1  ;
}

/* 1) Header: same shrink you tested inline */
header.header{
  padding: 6px 0px;   /* this is what shrank in the console */
  margin-top: 0  ;
  border-radius: 0 0 12px 12px  ; /* bottom corners only */
}

/* 2) Push tier→right cluster fully right and keep one line */
.header-right,
.header .login-container{
  margin-left: auto  ;
  display: flex  ;
  align-items: center  ;
  justify-content: flex-end  ;
  gap: 10px  ;
}

/* 3) Tighten nav link spacing (keeps your nice logo→Guild gap untouched) */
.header .nav-links{ gap: 18px  ; }
.header .nav-links a[href*="about"]{ white-space: nowrap  ; }

/* --- micro-tweaks: spacing + alignment --- */

/* 1) even tighter nav link spacing (logo→Guild gap stays as-is) */
.header .nav-links { gap: 16px  ; }
.header .nav-links a[href*="about"] { white-space: nowrap  ; } /* keep About Us one line */

/* 2) right cluster: sit flush right and tighter gaps */
.header-right,
.header .login-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* 3) keep all controls the same height */
.user-avatar,
.theme-chip,
.icon-btn { width: 28px; height: 28px;}

/* 4) login pill: match the 28px row height better */
.btn-magic {
  padding: .35rem .8rem;
  font-size: 13.5px;
  line-height: 1;
}

/* 5) icon-only user button: no pill bg, subtle shadow only */
.user-toggle { background: transparent; box-shadow: none; padding: 0px;}
.user-avatar { box-shadow: 0px 0px 0px 1px rgba(255,255,255,.14), 0px 6px 14px rgba(0,0,0,.35);}

/* 6) header bar hugging the top & shorter (confirm) */
header.header {
  margin-top: 0px;
  border-radius: 0px 0px 12px 12px; /* bottom corners only */
}

/* Header nav: no underline on hover/focus */
.header .nav-links a,
.header .nav-links a:hover,
.header .nav-links a:focus { text-decoration: none; }

.header .logo img{
  max-height: 24px;
  height: auto;
  display: block;
}

/* === FINAL HEADER+FOOTER OVERRIDES (EOF, safe) === */
html, body { margin: 0px;}

/* Header: hug top, full width, short, bottom-rounded */
header.header{
  position: sticky;
  top: 0px;
  margin: 0px;
  width: 100%;
  padding: 6px 0px;
  border-radius: 0px 0px 12px 12px;
}

/* Nav: tighter links + no underline */
.header .nav-links{ gap: 16px;}
.header .nav-links a,
.header .nav-links a:hover,
.header .nav-links a:focus{ text-decoration: none;}
.header .nav-links a[href*="about"]{ white-space: nowrap;}

/* Right cluster: push fully right, keep one line, uniform sizes */
.header-right,
.header .login-container{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
#themeChip, #userToggle, #userCardToggle,
.theme-chip, .user-toggle, .icon-btn, .user-avatar{
  width: 28px; height: 28px;
  padding: 0px; line-height: 0px;
  background: transparent; border: none; box-shadow: none;
}
.user-toggle .chev{ display: none;}/* hide dropdown arrow */
.user-avatar{
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px rgba(255,255,255,.14), 0px 6px 14px rgba(0,0,0,.35);
}
/* order on the right: theme → profile → burger */
#themeChip{ order: 1; } #userToggle{ order: 2; } #userCardToggle{ order: 3; }

/* SnapMagic icon glow */
.sm-icon{
  filter: drop-shadow(0px 0px 6px rgba(102,204,255,.45));
  transition: transform .15s ease, filter .15s ease;
}
.sm-icon:hover{
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 0 12px rgba(102,204,255,.75));
}

/* Footer: full-width glass, two rows (links+socials, then copyright) */
.site-footer{
  width:100%;
  background: rgba(12,14,36,.55);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 14px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 0px;
}
.site-footer .footer-nav{ display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.site-footer small{ grid-column: 1 / -1; opacity:.85; font-size:13px;}

/* === Footer center layout (EOF) === */
.site-footer{
  /* keep glass */
  width:100%  ;
  background: rgba(12,14,36,.55);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border-top: 1px solid rgba(255,255,255,.12);

  /* center everything */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 20px;
  border-radius: 0px; /* square footer edges */
}

/* Links row: keep item spacing, cut bottom gap */
.site-footer .footer-nav{
  gap: 14px;/* spacing between links */
  margin: 0px 0px 0px 0px;/* was 8px */
}

/* Socials row: remove extra vertical space (or hide entirely if you want) */
.site-footer .socials{
  margin: 0px;/* was 2px 0 4px 0 */
}
.site-footer .socials a{
  width: 28px; height: 28px;
  line-height: 1;/* avoid extra vertical height */
  display: inline-grid; place-items: center;
}

/* Copyright block: make the divider tight and full width */
.site-footer small{
  display: block;/* make width + border act correctly */
  width: 100%;
  margin-top: 2px;/* was 8px */
  padding-top: 4px;/* was 10px */
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  opacity: .85;
}


/* === Header right cluster alignment (EOF) === */
.header-left{ flex: 0 1 auto; }
.header-right,
.header .login-container{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap; /* prevent stacking */
  min-width: 0px;
}

/* make the user menu wrapper not force a new row */
.usermenu{
  display: flex;
  align-items: center;
  position: relative; /* keeps its dropdown positioning */
  min-width: 0px;
}

/* ensure all three controls are identical size and sit on baseline */
#themeChip, #userToggle, #userCardToggle,
.theme-chip, .user-toggle, .icon-btn, .user-avatar{
  width: 28px;
  height: 28px;
  padding: 0px;
  line-height: 0px;
  align-self: center;
  background: transparent;
  border: none;
  box-shadow: none;
}
.user-toggle .chev{ display:none  ; } /* hide arrow if any */

/* enforce the order: theme → profile → three-lines (far right) */
#themeChip{ order: 1;}
#userToggle{ order: 2;}
#userCardToggle{ order: 3;}

/* social pill + expandable icons */
.socials.open .social-list{
  opacity: 1;
  transform: translateX(0);
}
.site-footer .socials a img{
  width: 28px; height: 28px; display: block;
  filter: drop-shadow(0 0 4px rgba(102,204,255,.25));
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.site-footer .socials a:hover img{
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 0 10px rgba(102,204,255,.6));
  opacity: 1;
}

/* socials pill + slide/fade list */
.site-footer .socials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  position:relative;
}

.social-pill{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#e7e9f1; font-weight:700;
  padding:6px 12px; border-radius:999px;
  cursor:pointer;
  transition:background .15s, transform .12s;
}
.social-pill:hover{ background:rgba(255,255,255,.14); }

.social-list{
  display:inline-flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
  /* collapsed state */
  max-width: 0;
  opacity: 0;
  transform: translateX(8px);
  transition: max-width .2s ease, opacity .18s ease, transform .18s ease;
}

/* expanded state */
.socials.open .social-list{
  max-width: 420px;        /* enough to show all icons; adjust if needed */
  opacity: 1;
  transform: translateX(0);
}

/* icon polish */
.social-list img{
  width:28px; height:28px; display:block;
  filter: drop-shadow(0 0 4px rgba(102,204,255,.25));
  transition: transform .12s, filter .12s, opacity .12s;
  opacity:.95;
}
.social-list a:hover img{
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 0 10px rgba(102,204,255,.6));
  opacity: 1;
}

/* === Footer tightening + smoother socials (EOF) === */
:root{
  /* tune this to change icon size everywhere */
  --social-size: 22px;  /* was 28px */
}

.site-footer{
  /* shorter footer */
  padding: 0px 0px  ;   /* was ~14–16px */
}

/* Keep everything centered & on the same line */
.site-footer .socials{
  display:flex  ;
  align-items:center  ;    /* pill and icons aligned */
  justify-content:center  ;
  gap:10px  ;
  margin:6px 0 4px 0  ;    /* less height */
}

/* Pill smaller and aligned */
.social-pill{
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#e7e9f1; font-weight:700;
  cursor:pointer;
  transition: background .18s ease, box-shadow .18s ease; /* no lift */
}
.social-pill:hover{
  background:rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.28);
}

/* socials row: start collapsed, smoother & slower */
.social-list{
  display:inline-flex;
  align-items:center;
  gap:10px;
  overflow:hidden;

  max-width:0;              /* collapsed */
  opacity:0;
  transform: translateX(6px);

  /* smoother, slower */
  transition:
    max-width .35s ease,
    opacity  .30s ease,
    transform .30s ease;
}
.socials.open .social-list{
  max-width: 360px;         /* enough for ~5 icons at 22px; adjust if needed */
  opacity:1;
  transform: translateX(0);
}

/* icon look: smaller, no hover "jump", just light up */
.social-list img{
  width: var(--social-size);
  height: var(--social-size);
  display:block;
  filter: drop-shadow(0 0 3px rgba(102,204,255,.20));
  opacity:.9;
  transition: filter .18s ease, opacity .18s ease;  /* no translate/scale */
  background: transparent; 
}
.social-list a:hover img{
  filter: drop-shadow(0 0 10px rgba(102,204,255,.4));
  opacity:1;
}

/* copyright: center under a subtle divider */
.site-footer small.copyright{
  width:100%;
  text-align:center;
  margin-top: 0px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  opacity:.85;
}

/* Footer socials: add vertical slack so glow isn't clipped, make glow subtler */
.social-list{
  padding-block: 2px;              /* small air so drop-shadow has room */
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  display: flex; justify-content: center; gap: 10px;
  transition: max-height .35s ease, opacity .35s ease, transform .35s ease;
}
.site-footer.socials-open .social-list{
  max-height: 44px;                /* 22px icons + padding + glow room */
  opacity: 1;
  transform: translateY(0);
}
.social-list img{
  width: 22px; height: 22px; display: block; background: transparent;
  filter: drop-shadow(0 0 2px rgba(102,204,255,.25));  /* subtler base */
  opacity: .92;
  transition: filter .25s ease, opacity .25s ease;
}
.social-list a:hover img{
  filter: drop-shadow(0 0 5px rgba(102,204,255,.40));  /* subtler hover */
  opacity: 1;
}

/* Header right cluster: push fully right, same line */
.header-right{
  margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}
#guestHeader, #userHeader{
  display: flex; align-items: center; gap: 10px;
}
.usermenu[hidden], #userHeader[hidden], #guestHeader[hidden]{ display: none  ; }

/* (If any stray login container elsewhere sneaks in, hide it) */
.header .login-container{ display: none  ; }

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

#guestHeader,
#userHeader {
  display: flex;
  align-items: center;
  gap: 12px;
}

#guestHeader[hidden],
#userHeader[hidden],
.usermenu[hidden],
#themeChip[hidden] {
  display: none  ;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end; /* <-- this wasn’t applying before */
  margin-left: auto;
  position: relative; /* now with semicolon */
}

.social-list img {
  width: 22px;
  height: 22px;
  display: inline-block;
}

/* Header size + baseline alignment (override) */
header.header{
  padding: 10px 0px;          /* was smaller; gives more breathing room */
}
.logo-container img{
  display:block;
  transform: translateY(2px);  /* nudge logo down to match nav text */
}
.header-right{
  margin-left:auto;
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
  justify-content:flex-end;    /* ensure fully right */
}
#guestHeader, #userHeader{
  display:flex; align-items:center; gap:12px;
}
#guestHeader[hidden], #userHeader[hidden]{ display:none  ; }

/* Footer socials: fix clipping + subtle glow (override) */
.site-footer .social-list{
  display:flex; justify-content:center; gap:10px;
  overflow:hidden; padding-block:2px;
  max-height:0; opacity:0; transform:translateY(-6px);
  transition:max-height .35s ease, opacity .35s ease, transform .35s ease;
}
.site-footer.socials-open .social-list{
  max-height:44px; opacity:1; transform:translateY(0);
}
.site-footer .social-list img{
  width:22px; height:22px; display:block; background:transparent;
  filter: drop-shadow(0 0 2px rgba(102,204,255,.25));
  opacity:.92; transition: filter .25s ease, opacity .25s ease;
}
.site-footer .social-list a:hover img{
  filter: drop-shadow(0 0 5px rgba(102,204,255,.40));
  opacity:1;
}

/* add-only: affects ONLY this page because of the .as-bg helper */
.hall-bg.as-bg{
  position: fixed;       /* makes it a true page background */
  inset: 0;              /* full viewport */
  z-index: -1;           /* stays behind your content */
  pointer-events: none;  /* never blocks clicks */
}

.hall-bg.as-bg picture,
.hall-bg.as-bg img{
  width: 100%;
  height: 100%;
  display: block;
}

.hall-bg.as-bg img{
  object-fit: cover;         /* cover the screen */
  object-position: 65% 50%;  /* nudge focus right; adjust as you like */
}

/* Make .Packs-card match .balance-card palette/feel */
.Packs-card{
  /* same glass base + solid edge like .balance-card */
  background: var(--glass);
  border: 1.5px solid rgba(217,255,255,.35);
  color: #eaffff;

  /* match depth + rounding */
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);

  /* allow the glow layer to sit behind content like .balance-card */
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* optional: align spacing with balance-card */
  padding: 24px;
}

/* add the same soft glow as .balance-card::before */
.Packs-card::before{
  content:"";
  position:absolute;
  inset: -20% -10% auto -10%;
  height:160px;
  z-index:-1;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(56,189,248,.16), transparent),
    radial-gradient(400px 200px at 80% 10%, rgba(167,65,245,.22), transparent);
  filter: blur(10px);
}

/* ensure headings inside stay readable on the new palette */
.Packs-card h3 { color:#eaffff; }
.Packs-card .timer { color: var(--sw-sky); }

/* Make Top-up Packs border + glow match Balance */
.Packs-card{
  border: 1.5px solid rgba(217,255,255,.35)  ; /* was dashed var(--sw-cyan) */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* same soft dual-radial glow as .balance-card */
.Packs-card::before{
  content:"";
  position:absolute;
  inset:-20% -10% auto -10%;
  height:160px;
  z-index:-1;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(56,189,248,.16), transparent),
    radial-gradient(400px 200px at 80% 10%, rgba(167,65,245,.22), transparent);
  filter: blur(10px);
}

/* Center the Buy button inside the Top-up Packs card */
.Packs-card .btn-magic.btn-compact {
  display: block;         /* make it a block-level element */
  margin: 16px auto 0;    /* auto left/right centers it */
  text-align: center;     /* keeps the label + icon centered */
}

.Packs-card .btn-magic.btn-compact {
  display: block;
  margin: 16px auto 20px;   /* top 16px, auto sides, bottom 20px */
  text-align: center;
}

/* Kill default page margins so header/footer hug the edges */
html, body {
  margin: 0;
  padding: 0;
}

/* Just to be safe, ensure they span full width */
.header, .site-footer {
  width: 100%;
  box-sizing: border-box;
}

/* Force the header background layer to hug the left edge */
header.header { position: relative; }  /* anchor for pseudo-layers */

header.header::before,
header.header::after {
  left: 0  ;
  right: 0  ;
  margin-left: 0  ;
  padding-left: 0  ;
  inset-inline-start: 0  ;   /* RTL-safe */
}

.header .header-bg,
.header .header-glow,
.header .header-veil {
  position: absolute;
  left: 0  ;
  right: 0  ;
  margin-left: 0  ;
  padding-left: 0  ;
  width: 100%  ;
}

/* === Flush header & footer to the very left edge (full-bleed) =============== */

/* 1) Nuke default page gaps */
html, body { margin:0; padding:0; }

/* 3) If there’s an inner container causing the gap, zero it */
header.header > .container,
.site-header > .container,
header.header > .inner,
.site-header > .inner,
footer.site-footer > .container,
footer.footer > .container {
  max-width: none  ;
  margin-left: 0  ;
  padding-left: 0  ;
}

/* 4) Most common culprits: background/glow layers or pseudo-elements */
header.header::before,
header.header::after,
.site-header::before,
.site-header::after,
header.header .header-bg,
.site-header .header-bg,
header.header .header-glow,
.site-header .header-glow {
  left: 0  ;
  right: 0  ;
  margin-left: 0  ;
  padding-left: 0  ;
  inset-inline-start: 0  ;   /* RTL-safe */
  transform: none  ;
  width: 100%  ;
}

/* 5) Some themes draw the background with an inset shorthand — flatten it */
header.header::before,
.site-header::before {
  inset: 0  ;
}

/* 6) Safety for horizontal overflow after forcing full-bleed */
body { overflow-x: hidden; }

/* === Flush header & footer to the very left edge (full-bleed) =============== */

/* 1) Nuke default page gaps */
html, body { margin:0; padding:0; }

/* 2) Force header/footer boxes to have zero inset */
header.header,
.site-header,
footer.site-footer,
footer.footer {
  margin-left: 0  ;
  padding-left: 0  ;
  width: 100%  ;
  box-sizing: border-box;
  position: relative;        /* anchor for pseudo-layers */
}

/* 3) If there’s an inner container causing the gap, zero it */
header.header > .container,
.site-header > .container,
header.header > .inner,
.site-header > .inner,
footer.site-footer > .container,
footer.footer > .container {
  max-width: none  ;
  margin-left: 0  ;
  padding-left: 0  ;
}

/* 4) Most common culprits: background/glow layers or pseudo-elements */
header.header::before,
header.header::after,
.site-header::before,
.site-header::after,
header.header .header-bg,
.site-header .header-bg,
header.header .header-glow,
.site-header .header-glow {
  left: 0  ;
  right: 0  ;
  margin-left: 0  ;
  padding-left: 0  ;
  inset-inline-start: 0  ;   /* RTL-safe */
  transform: none  ;
  width: 100%  ;
}

/* 5) Some themes draw the background with an inset shorthand — flatten it */
header.header::before,
.site-header::before {
  inset: 0  ;
}

/* 6) Safety for horizontal overflow after forcing full-bleed */
body { overflow-x: hidden; }

/* — Fix the left gutter on header/footer (full-bleed backgrounds) — */
.header { 
  padding-left: 0  ;  /* remove the left gutter on the header bg */
}

/* restore the 30px left spacing to the header contents only */
.header .navbar,
.header-left,
.header-right {
  padding-left: 30px;
}
.footer > * {
  padding-left: 30px;
}

/* SnapMagic: kill the left gutter on the header background */
header.header { padding: 10px 30px 10px 0  ; } /* top | right | bottom | left */

.site-footer { padding-left: 0  ; }



----------------
/* TEST */
.header{ display:flex; align-items:center; justify-content:space-between; }
.header .left{ display:flex; align-items:center; gap:14px; }
.header .right{
  display:flex; align-items:center; gap:10px;
  flex:0 0 auto; min-width: fit-content; /* prevents squeeze to 0 */
}
.header .nav{ flex: 1 1 auto; }          /* lets the middle flex */
.header{ overflow:visible; }              /* avoid clipping dropdowns */
.logo-container{
padding-bottom: 7px;
}
.footer-nav{
padding-top: 3px;
padding-bottom: 3px;
}
.copyright{
padding-bottom: 2px;
}
.stone-table{
padding-bottom: 70px;
}
.stone-wrap{
  margin-bottom: 32px;
}