/* ================================
   ODIN LEGEND UNIVERSE — CLEAN MASTER
   SAME LOOK, NO DUPLICATES
================================== */

/* =========================
   ROOT / TOKENS
   ========================= */
:root{
  --bg:#050505;
  --text:#f2f2f2;
  --muted:rgba(242,242,242,.72);

  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.06);

  --shadow: 0 20px 60px rgba(0,0,0,.55);

  --container: 980px;
  --pad: 16px;

  /* SHOP SETTINGS */
  --shop-logo-mobile: 520px;
  --shop-logo-tablet: 560px;
  --shop-logo-desktop: 800px;
}

/* =========================
   BASE
   ========================= */
html,body{ height:100%; }
html{ scroll-behavior:smooth; }

body.page-universe{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Cormorant Garamond", serif;
  overflow-x:hidden;
}

/* Sticky anchor offset */
#origins,#chronicles,#portal,#lore,#videos,#contact,#shop{
  scroll-margin-top: 120px;
}

/* =========================
   BACKGROUND LAYER + EMBERS
   ========================= */
.page-universe .bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}

/* You are not using bg video anymore */
.page-universe .bg-video{ display:none !important; }

/* overlays */
.page-universe .bg-vignette,
.page-universe .bg-overlay,
.page-universe .bg-grain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 1;
}

/* original overlay looks */
.page-universe .bg-vignette{
  background:
    radial-gradient(60% 55% at 50% 25%, rgba(0,0,0,.85), rgba(0,0,0,0) 60%),
    radial-gradient(100% 80% at 50% 70%, rgba(0,0,0,.15), rgba(0,0,0,.92));
}

.page-universe .bg-overlay{
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.40) 25%, rgba(0,0,0,.75));
}

.page-universe .bg-grain{
  inset:-40%;
  background-image:url("assets/grain.png");
  opacity:.08;
  mix-blend-mode: overlay;
  animation: grainMove 10s steps(10) infinite;
  transform: rotate(7deg);
}

@keyframes grainMove{
  0%{transform:translate(0,0) rotate(7deg)}
  25%{transform:translate(-3%,2%) rotate(7deg)}
  50%{transform:translate(-2%,-2%) rotate(7deg)}
  75%{transform:translate(3%,1%) rotate(7deg)}
  100%{transform:translate(0,0) rotate(7deg)}
}

/* embers canvas ALWAYS visible */
.page-universe #embers{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events:none;
  z-index: 2;
}

/* content above */
.page-universe .page-wrap{
  position: relative;
  z-index: 5;
  width:100%;
  margin:0;
  padding:0;
}

/* =========================
   NAVBAR
   ========================= */
.navbar--universe{
  position: sticky;
  top:0;
  z-index:60;
  width:100%;
  padding: 12px var(--pad);

  background: rgba(0,0,0,.50);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke2);

  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 8px;
}

.logo--universe{
  font-family:"Cinzel", serif;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.95;
  text-align:center;
}

.nav--universe{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content:center;
}

.nav--universe a{
  color:var(--text);
  text-decoration:none;
  font-family:"Cinzel", serif;
  letter-spacing:1.4px;
  text-transform:uppercase;
  font-size: 12px;
  opacity:.9;
  position:relative;
}

.nav--universe a:hover{ opacity:1; }

.nav--universe a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:scaleX(0);
  transition:transform .25s ease;
}
.nav--universe a:hover::after{ transform:scaleX(1); }

/* =========================
   SECTIONS / CARDS
   ========================= */
.section{
  padding: 28px var(--pad);
  display:flex;
  justify-content:center;
}

.section-box{
  width: min(var(--container), 92vw);
  margin: 0 auto;
  padding: 22px 18px;
  box-sizing:border-box;
}

.cinematic-card{
  background: rgba(10,10,10,.45);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

/* =========================
   HERO
   ========================= */
.hero--universe{
  padding: 22px var(--pad) 10px;
  display:flex;
  justify-content:center;
}

.hero-inner{
  width: min(var(--container), 92vw);
  margin: 0 auto;
  text-align:center;
  background: transparent;
}

/* Title */
.dark-title{
  margin: 6px 0 8px;
  text-transform:uppercase;
}
.dark-title .line-main{
  display:block;
  font-family:"Cinzel", serif;
  font-size: clamp(10px, 5.5vw, 76px);
  letter-spacing:.34em;
  color: rgba(245,245,245,.92);
  text-shadow: 0 14px 55px rgba(0,0,0,.9);
}
.dark-title .line-sub{
  display:block;
  margin-top: 40px;
  font-family:"Cormorant Garamond", serif;
  font-size: clamp(18px, 2.4vw, 30px);
  letter-spacing:.65em;
  color: rgba(220,220,220,.70);
}

/* Mobile hero tweak */
@media (max-width: 520px){
  .dark-title .line-main{
    font-size: clamp(44px, 12vw, 76px);
    letter-spacing: .28em;
  }
  .dark-title .line-sub{
    margin-top: 22px;
    letter-spacing: .50em;
  }
}

/* Badges */
.hero-badges{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}

.badge{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.30);
  font-family:"Cinzel", serif;
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 11px;
  opacity:.95;
}

/* Sigil */
.sigil-holder{
  width: min(360px, 82vw);
  aspect-ratio: 1 / 1;
  margin: 26px auto 18px;
  position: relative;
  overflow: hidden;
  background: #000;
  border: 0;
  box-shadow: none;
  border-radius: 16px;
}

.sigil-media, .sigil-img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
}

/* Fade edges */
.sigil-holder::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.35) 72%,
    rgba(0,0,0,.78) 88%,
    rgba(0,0,0,1) 100%);
}

/* Hero text */
.hero-line{
  margin: 10px 0 12px;
  font-family:"Playfair Display", serif;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: clamp(26px, 3.8vw, 54px);
  line-height: 1.05;
  text-shadow: 0 12px 35px rgba(0,0,0,.7);
}

.hero-line span{
  display:inline-block;
  margin-top: 10px;
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing:.18em;
  opacity:.95;
}

.hero-sub{
  margin: 12px auto 14px;
  width:min(760px, 92%);
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
}

/* =========================
   SECTION TYPO
   ========================= */
.section-title{
  margin: 0 0 10px;
  font-family:"Cinzel", serif;
  letter-spacing:.20em;
  text-transform: uppercase;
  font-size: 30px;
  text-align:center;
}

.section-text{
  margin: 0 auto 14px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
  max-width: 720px;
  text-align:center;
}

.section-text--tight{ margin-top: 18px; }

/* =========================
   VIDEO GRID
   ========================= */
.video-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.video-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  padding: 12px;
  aspect-ratio: 1 / 1;
  display:flex;
  flex-direction:column;
  min-width:0;
  cursor:pointer;
}

.grid-video{
  width:100%;
  height:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display:block;
  background:#000;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

@media (min-width: 900px){
  .video-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap:14px; }
}

.video-caption{
  margin: 10px 4px 0;
  opacity: .85;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Cinzel", serif;
  text-align:center;
}

/* =========================
   TIKTOK BREATH BUTTON
   ========================= */
.tiktok-breath-wrapper{
  display:flex;
  justify-content:center;
  margin: 40px 0 60px;
}

@keyframes olBreatheGlow{
  0%,100%{
    transform: scale(0.96);
    box-shadow: 0 0 16px rgba(255,255,255,0.10),
                inset 0 0 18px rgba(255,255,255,0.05);
  }
  50%{
    transform: scale(1.04);
    box-shadow: 0 0 34px rgba(255,255,255,0.22),
                inset 0 0 34px rgba(255,255,255,0.10);
  }
}

.tiktok-breath{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 12px;

  padding: 16px 28px;
  border-radius: 999px;

  background: linear-gradient(145deg, #1a1a1a, #000);
  color:#fff;
  text-decoration:none;

  border: 1px solid rgba(255,255,255,0.14);

  animation: olBreatheGlow 3.4s ease-in-out infinite;
  will-change: transform;
  transition: transform .25s ease;
}

.tiktok-icon i{
  font-size: 28px;
  color:#fff;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.25));
}

.tiktok-name{
  font-family:"Cinzel", serif;
  letter-spacing: .18em;
  font-size: 18px;
  text-transform: uppercase;
}

.tiktok-breath:hover{
  transform: scale(1.05);
  animation:none;
}

/* =========================
   SHOP (logo + powder fx)
   ========================= */
.shop-card{
  padding: 34px 18px 30px;
  overflow: visible; /* allow powder to breathe */
}

.shop-logo-fx{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin: 6px auto 10px;
  isolation: isolate;
}

.shop-powder-canvas{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  z-index: 1;
  pointer-events:none;
  opacity: 1;
}

.shop-title-logo{
  position: relative;
  z-index: 2;
  display:block;
  margin: 0 auto 6px;
  height:auto;
  width: min(var(--shop-logo-desktop), 92%);
  max-width: 92%;
  filter: drop-shadow(0 0 22px rgba(255,140,0,.25));
}

/* responsive logo */
@media (max-width: 599px){
  .shop-title-logo{ width: min(var(--shop-logo-mobile), 92vw); }
  .shop-powder-canvas{ width: 115%; height: 115%; }
}
@media (min-width: 600px) and (max-width: 899px){
  .shop-title-logo{ width: min(var(--shop-logo-tablet), 92vw); }
}

.shop-preview-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 6px auto 0;
  max-width: 900px;
}

.shop-item{
  overflow:hidden;
  border-radius: 14px;
}

.shop-item img{
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display:block;
}

.shop-invite{
  font-family:"Cinzel", serif;
  letter-spacing: .06em;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(242,242,242,.88);
  margin: 10px auto 18px;
  max-width: 780px;
  text-align:center;
}

.shop-nickname{
  display:inline-block;
  margin-top: 4px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
}

.shop-actions{
  display:flex;
  justify-content:center;
  gap: 14px;
  flex-wrap:wrap;
  margin-top: 16px;
}

/* =========================
   CONTACT
   ========================= */
.contact-email{
  display:inline-block;
  margin: 10px 0 6px;
  color: var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:4px;
  font-family:"Cinzel", serif;
}
.contact-email:hover{ border-bottom-color: rgba(255,255,255,.85); }

.contact-list{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  text-align:center;
  font-family:"Cinzel", serif;
}
.contact-list li{ margin: 8px 0; opacity:.92; }
.contact-list li::before{ content:"•"; margin-right:10px; opacity:.75; }

.divider{
  height:1px;
  width:100%;
  margin: 22px auto;
  background: rgba(255,255,255,0.12);
}

.page-universe #contact .contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 12px;
  align-items: stretch;
}

.page-universe #contact .contact-card{
  border-radius: 18px;
  padding: 22px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.03);
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
}

.page-universe #contact .contact-icon{
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.22));
  margin-bottom: 12px;
}

.page-universe #contact .contact-card-title{
  margin: 10px 0 6px;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family:"Cinzel", serif;
  text-align:center;
}

.page-universe #contact .contact-card-text{
  margin: 0 0 10px;
  opacity: 0.92;
  line-height: 1.55;
  font-family:"Cinzel", serif;
  text-align:center;
  max-width: 42ch;
}

@keyframes olMiniBreath{
  0%,100%{ transform: scale(0.94); }
  50%    { transform: scale(1.06); }
}

.page-universe #contact .contact-links{
  width:100%;
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  justify-items:center;
  align-items:center;
}

.page-universe #contact .contact-links .mini-btn{
  width: 130px;
  height: 25px;
  padding: 4px 0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);

  color: #fff;
  text-decoration:none;

  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1;

  animation: olMiniBreath 3.2s ease-in-out infinite;
  will-change: transform;

  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.page-universe #contact .contact-links .mini-btn:hover{
  animation:none;
  transform: translateY(-2px) scale(1.03);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 18px rgba(255,255,255,0.14);
}

.return-portal-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top: 28px;
}

/* Mobile contact */
@media (max-width: 820px){
  .page-universe #contact .contact-grid{ grid-template-columns: 1fr; }
  .page-universe #contact .contact-links{ grid-template-columns: 1fr; }
  .page-universe #contact .contact-links .mini-btn{
    width: min(260px, 82%);
    max-width: 260px;
    height: 30px;
    padding: 8px 0;
    font-size: 12px;
  }
}

/* =========================
   VIDEO MODAL
   ========================= */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.video-modal.is-open{ display:block; }

.video-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(6px);
}

.video-modal__panel{
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 20px;
}

.video-modal__close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.video-modal__frame{
  width: min(90vw, 600px);
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.8);
  border: 1px solid rgba(255,255,255,.10);
}

.video-modal__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* === FIX: embers visible ALL THE WAY UP (hero included) === */
.page-universe #embers{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 4 !important;        /* au-dessus des overlays */
  pointer-events: none !important;
  opacity: 1 !important;
}

/* overlays restent derrière */
.page-universe .bg-vignette,
.page-universe .bg-overlay,
.page-universe .bg-grain{
  z-index: 1 !important;
}

/* contenu reste devant */
.page-universe .page-wrap{
  position: relative !important;
  z-index: 5 !important;
}

/* === FORCE: particles visible behind HERO (top section) === */
.page-universe .hero--universe,
.page-universe .hero--universe .hero-inner{
  background: transparent !important;
}

/* si jamais un overlay/pseudo-element cache le haut */
.page-universe .hero--universe::before,
.page-universe .hero--universe::after{
  content: none !important;
  display: none !important;
}

/* canvas plein écran visible */
.page-universe #embers{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* contenu au-dessus */
.page-universe .page-wrap{
  position: relative !important;
  z-index: 3 !important;
}

/* =========================================================
   UNIVERSE — NAVBAR (FIXED) + NO GAP UNDER NAVBAR (MOBILE)
   Safe override: does NOT change the design, only spacing.
   ========================================================= */

/* Keep navbar fixed (you already wanted that) */
.page-universe .navbar--universe{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* Push content down by EXACT navbar height (desktop) */
.page-universe .page-wrap{
  padding-top: 92px !important; /* desktop = ok */
}

/* Mobile: reduce the push so hero sits tighter */
@media (max-width: 768px){
  .page-universe .page-wrap{
    padding-top: 0px !important; /* <-- réduit le GAP (ajuste 70-80 si besoin) */
  }
}

/* Also remove any extra top spacing on the hero itself */
@media (max-width: 768px){
  .page-universe .hero--universe{
    padding-top: 6px !important;  /* au lieu de 22px -> colle au navbar */
    margin-top: 0 !important;
  }

  .page-universe .dark-title{
    margin-top: 0 !important;     /* évite une marge fantôme */
  }

  /* si jamais ton HTML met un <br> ou un wrapper avec marge */
  .page-universe .hero-inner{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Navbar alignment on mobile (uses the RIGHT classes) */
@media (max-width: 768px){
  .page-universe .navbar--universe{
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  .page-universe .nav--universe{
    justify-content: center !important;
    gap: 14px !important;
  }

  .page-universe .logo--universe{
    margin: 0 auto !important;
  }
}

/* =========================================================
   HERO TITLE — RESTORE "UNIVERSE" bigger + less fade
   (Desktop + Mobile) — safe override
   ========================================================= */

/* ODIN LEGEND (main line) */
.page-universe .dark-title .line-main{
  font-size: clamp(48px, 6vw, 88px) !important;
  letter-spacing: 0.30em !important;
  line-height: 1.05 !important;
}

/* UNIVERSE (sub line) */
.page-universe .dark-title .line-sub{
  font-size: 42px !important;              /* desktop size */
  letter-spacing: 12px !important;
  margin-top: 14px !important;             /* tighter under ODIN LEGEND */
  color: rgba(245,245,245,.88) !important;  /* less fade */
  opacity: 1 !important;
  text-shadow: 0 10px 40px rgba(0,0,0,.85) !important;
}

/* Mobile */
@media (max-width: 520px){

  .page-universe .dark-title .line-main{
    font-size: clamp(44px, 12vw, 76px) !important;
    letter-spacing: 0.24em !important;
  }

  .page-universe .dark-title .line-sub{
    font-size: 26px !important;            /* mobile size */
    letter-spacing: 8px !important;
    margin-top: 8px !important;
    color: rgba(245,245,245,.90) !important;
  }
}

/* =================================
   PC – RAPPROCHER LES 2 BADGES HERO
   (force center, remove space-between stretch)
   ================================= */
@media (min-width: 900px){

  .page-universe .hero-badges{
    justify-content: center !important;
    gap: 10px !important;

    /* IMPORTANT: stop them from spreading */
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-universe .badge{
    flex: 0 0 auto !important;   /* no stretching */
    white-space: nowrap !important;
    padding: 8px 12px !important; /* optionnel: plus compact */
  }
}

/* NFT Logo */
.nft-logo-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px 0 25px;
}

.nft-logo {
  width: 90px;
  opacity: 0.85;
  transition: 0.4s ease;
  filter: drop-shadow(0 0 10px rgba(0, 162, 255, 0.3));
}

.nft-logo:hover {
  opacity: 1;
  transform: scale(1.05);
  filter: drop-shadow(0 0 18px rgba(0, 162, 255, 0.6));
}

.nft-logo {
  width: 300px;
  height: auto;
  display: block;
  margin: 10px auto 20px;
}

/* =========================
   LORE VIDEO MODAL (1:1)
   ========================= */
#loreModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}
#loreModal.is-open{ display:block; }

#loreModal .lm-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

#loreModal .lm-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,10,10,.82);
  box-shadow: 0 30px 80px rgba(0,0,0,.60);
  border-radius: 16px;
}

#loreModal .lm-close{
  position:absolute;
  top: 10px;
  right: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor:pointer;
}

#loreModal .lm-square{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.08);
}

#loreModal .lm-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.lore-modal-open, html.lore-modal-open body{
  overflow: hidden;
}

.grid-video{ pointer-events: auto !important; }
.video-card{ pointer-events: auto !important; }
.video-grid{ pointer-events: auto !important; }

#embersCanvas, .grain-overlay, .bg-overlay, .particles-layer{
  pointer-events: none !important;
}

/* Space between shop text and preview images */
.shop-invite {
  margin-bottom: 50px;
}

/* ===== SHOP BUTTON — EXACT COLORING STYLE ===== */

.mini-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 16px 38px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 1px;

  color: #e8e8e8;
  text-decoration: none;

  background: radial-gradient(
    circle at 50% 40%,
    #1a1a1a 0%,
    #0f0f0f 55%,
    #070707 100%
  );

  border: 1px solid rgba(255,255,255,0.15);

  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.9),
    0 0 30px rgba(255,255,255,0.15),
    0 0 70px rgba(255,255,255,0.12);

  transition: all 0.4s ease;
  z-index: 1;
}

/* Outer glow halo */
.mini-btn::before {
  content: "";
  position: absolute;
  inset: -25px;
  border-radius: 999px;

  background: radial-gradient(
    circle,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.08) 35%,
    transparent 70%
  );

  filter: blur(18px);
  opacity: 0.8;

  z-index: -1;
  transition: all 0.4s ease;
}

/* Hover — stronger glow */
.mini-btn:hover {
  box-shadow:
    inset 0 0 25px rgba(0,0,0,1),
    0 0 45px rgba(255,255,255,0.25),
    0 0 110px rgba(255,255,255,0.20);

  transform: translateY(-2px);
}

.mini-btn:hover::before {
  opacity: 1;
  filter: blur(24px);
  transform: scale(1.05);
}

/* ====================================
   ENTER SHOP BUTTON FIX
==================================== */

.enter-shop-btn{
  display:inline-block;
  padding:14px 28px;

  background:rgba(15,15,15,.75);
  color:#f2f2f2;

  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;

  font-family:"Cinzel", serif;
  letter-spacing:.15em;
  text-transform:uppercase;

  text-decoration:none;
  cursor:pointer;

  box-shadow:0 0 25px rgba(255,0,0,.15);

  transition:all .25s ease;
}

.enter-shop-btn:hover{
  transform:translateY(-3px) scale(1.05);
  background:rgba(20,20,20,.9);
  box-shadow:0 0 40px rgba(255,0,0,.35);
}

/* ==========================================
   OPEN THE VAULT — WHITE BREATHING GLOW
   ========================================== */

.vault-btn{
  display:inline-block;
  padding:14px 34px;

  background:rgba(255,255,255,.04);
  color:#f2f2f2;

  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;

  font-family:"Cinzel", serif;
  letter-spacing:.18em;
  text-transform:uppercase;

  text-decoration:none;
  cursor:pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

/* Respiration */
@keyframes vaultBreath{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 15px rgba(255,255,255,.2);
  }
  50%{
    transform:scale(1.05);
    box-shadow:0 0 50px rgba(255,255,255,.6);
  }
}

.vault-btn:hover{
  transform:translateY(-3px) scale(1.08);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 70px rgba(255,255,255,.9);
}

/* ==========================================
   VAULT — BREATHING HALO (NO TRANSFORM CONFLICT)
   Works with: class="mini-btn vault-btn"
   ========================================== */

.vault-btn::before{
  animation: vaultHaloBreath 2.8s ease-in-out infinite;
}

@keyframes vaultHaloBreath{
  0%,100%{
    opacity: .75;
    filter: blur(18px);
    transform: scale(1);
  }
  50%{
    opacity: 1;
    filter: blur(26px);
    transform: scale(1.08);
  }
}

/* ==========================================
   VAULT BUTTON — FORCE WHITE BREATHING HALO
   (Put this at the VERY END of universe.css)
   ========================================== */

a.mini-btn.vault-btn{
  position: relative !important;
  z-index: 5 !important;
}

/* Halo */
a.mini-btn.vault-btn::before{
  content: "" !important;
  position: absolute !important;
  inset: -28px !important;
  border-radius: 999px !important;

  background: radial-gradient(
    circle,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.00) 70%
  ) !important;

  filter: blur(22px) !important;
  opacity: .9 !important;

  z-index: -1 !important;
  pointer-events: none !important;

  animation: vaultHaloBreath 2.6s ease-in-out infinite !important;
}

@keyframes vaultHaloBreath{
  0%,100%{
    transform: scale(1) !important;
    opacity: .65 !important;
    filter: blur(18px) !important;
  }
  50%{
    transform: scale(1.12) !important;
    opacity: 1 !important;
    filter: blur(28px) !important;
  }
}

/* Optional: boost the button glow itself slightly */
a.mini-btn.vault-btn{
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.9),
    0 0 40px rgba(255,255,255,0.18),
    0 0 90px rgba(255,255,255,0.14) !important;
}

body { outline: 8px solid lime !important; }

/* =====================================
   COOKIE FONT STYLE — ODIN LEGEND
   ===================================== */

.ol-cookie{
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
}

.ol-cookie__text{
  font-size: 0.85rem;
  line-height: 1.6;
  text-transform: none;
}