/* ========================= */
/* 🔥 FORCE GLITCH GUN (SAFE) */
/* ========================= */

.glitch-section .glitch-gun {
  position: absolute !important;

  left: 35% !important;
  bottom: 0% !important;

  width: 45vw !important;
  max-width: 600px !important;

  pointer-events: none;
  z-index: 999 !important; /* 🔥 FORCE ABOVE EVERYTHING */

  animation: magicFlicker 0.45s infinite;
}

/* MOBILE */
@media (max-width: 768px) {

  .glitch-section .glitch-gun {
    left: 55% !important;
    bottom: 5% !important;

    transform: translateX(-50%) !important;

    width: 80vw !important;
    max-width: 400px !important;
  }

}



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

/* FONT */
@font-face {
  font-family: 'Wizardry';
  src: url('https://res.cloudinary.com/daz8so5gl/raw/upload/v1777311860/Wizardry_Night_wogjoq.otf') format('opentype');
}

html {
  scroll-behavior: smooth;
}

section {
  scroll-padding-top: 140px;
}
/* BASE */
html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow-x: hidden;
}

/* HERO */
.hero {
  width: 100%;
   height: calc(var(--vh, 1vh) * 100);
  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777408501/page1_gjfa3g.jpg");
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
}

/* MOBILE */
@media (max-width: 768px) {
  .hero {
    background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777469579/bg_mobile_t0ndwj.jpg");
    background-position: center;
  }
}

/* CONTENT */
.hero-content {
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 👈 top / middle / bottom */
  align-items: center;

  padding: 20px;
}
/* BUTTON */
.enter-btn {
  position: absolute;
  top: 28%;
  right: 11vw;

  padding: 18px 38px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.2);

  font-family: 'Wizardry', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;

  background: linear-gradient(145deg, #2b2f5b, #1b1e3a);
  color: #9feaff;

  box-shadow:
    0 0 10px rgba(0, 200, 255, 0.4),
    0 0 25px rgba(0, 200, 255, 0.2),
    inset 0 0 10px rgba(0, 200, 255, 0.15);

  cursor: pointer;
  transition: all 0.2s ease;
}

.enter-btn:hover {
  transform: scale(1.05);
}

.enter-btn:active {
  transform: scale(0.98);
}

/* 🔥 FIX MOBILE JUMP */
@media (max-width: 768px) {
  .enter-btn:hover {
    transform: translateX(-50%) scale(1.05);
  }

  .enter-btn:active {
    transform: translateX(-50%) scale(0.98);
  }
}

/* DESKTOP */
@media (min-width: 769px) {
  .enter-btn {
    padding: 24px 48px;
    font-size: 28px;
    right: 9vw;
  }
}


@media (max-width: 768px) {
  .enter-btn {
    position: absolute !important;

    top: 24%;              /* 👈 slightly LOWER than before */
    left: 50%;
    transform: translateX(-50%);

    right: auto !important;

    font-size: 14px;
    padding: 10px 18px;

    border-radius: 10px;   /* 👈 less rounded */

    white-space: nowrap;
    max-width: 90vw;
  }
}

/* ========================= */
/* ✅ WHITE FADE OUT (PAGE 1) */
/* ========================= */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.fade-out::after {
  opacity: 1;
}

/* ========================= */
/* ✅ PAGE 2 BACKGROUND */
/* ========================= */

.page2 {
  width: 100%;
  height: auto; /* 👈 allow scrolling */
}

.chamber-section {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);

  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777318362/ChatGPT_Image_Apr_27_2026_08_26_18_PM_umzdoe.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
}


/* ========================= */
/* ✅ WHITE FADE IN (PAGE 2) */
/* ========================= */

.page2::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  pointer-events: none;
  animation: fadeOverlayOut 0.5s ease forwards;
}

@keyframes fadeOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* WIZARD IMAGE */
.wizard {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  width: 40vw;

  bottom: 30%;
  max-width: 470px;
  opacity: 0;

  pointer-events: none;
  z-index: 10;

 animation:
  wizardRise 0.9s ease forwards,
  magicFlicker 0.45s infinite;

animation-delay: 0.3s, 1.2s;
}

@keyframes wizardRise {
  to {
    opacity: 1;
    bottom: 10%;
    max-width: 500px;
  }
}

/* ========================= */
/* CHAMBER OVERLAY IMAGE */
/* ========================= */

.chamber-section::before {
  content: "";
  position: absolute;

  width: 250px;
  height: 250px;

  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777467034/ChatGPT_Image_Apr_29_2026_01_49_35_PM_jfcudm.png");
  background-size: contain;
  background-repeat: no-repeat;

  right: 43.3vw;
  top: 69%;

  transform: translateY(-95%);
  opacity: 0;

  pointer-events: none;
  z-index: 100;

  animation:
    logoDrop 0.9s ease forwards,
    chamberFloat 2.2s ease-in-out infinite,
    magicFlicker 0.45s infinite;

  animation-delay: 0.3s, 1.2s, 1.2s;
}

@keyframes magicFlicker {
  0%   { opacity: 0.6; }
  20%  { opacity: 0.3; }
  40%  { opacity: 0.8; }
  60%  { opacity: 0.2; }
  80%  { opacity: 0.9; }
  100% { opacity: 0.6; }
}

@keyframes logoDrop {
  to {
    transform: translateY(-50%); /* 👈 final resting position */
    opacity: 1;
  }
}

@keyframes logoDrop {
  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes chamberFloat {
  0%   { transform: translateY(-50%); }
  50%  { transform: translateY(-53%); }
  100% { transform: translateY(-50%); }
}
/* ========================= */
/* STORY TEXT (PAGE 2) */
/* ========================= */

.story {
  position: absolute;
  top: 35%; /* 👈 moved down */
  left: 6vw;
  max-width: 520px;
  z-index: 20;
  color: white;
}

/* MAIN HEADER */
.story h1 {
  font-family: 'Wizardry', sans-serif;
  font-size: 56px;
  line-height: 1.1;
  margin-bottom: 20px;

  color: #ffd6d6;

  text-shadow:
    0 0 12px rgba(255, 120, 120, 0.7),
    0 0 25px rgba(255, 80, 80, 0.5);
}

/* BODY TEXT */
.story p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.85);

  padding-left: 40px; /* 👈 pushes text toward center */
}

/* COIN NAME */
.story h2 {
  font-family: 'Wizardry', sans-serif;
  font-size: 64px; /* 🔥 MUCH BIGGER */
  line-height: 1.1;

  margin-top: 30px;
  margin-bottom: 15px;

 color: #ffd6d6;

  text-shadow:
    0 0 12px rgba(255, 120, 120, 0.7),
    0 0 25px rgba(255, 80, 80, 0.5);

  letter-spacing: 1px;
}

/* FINAL LINE */
.story .final {
  font-size: 18px;
  opacity: 0.8;
}

/* CTA BUTTON CONTAINER */
.cta-buttons {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  justify-content: flex-end; /* aligns with right text */
}

/* BUY BUTTON */
.buy-btn {
  padding: 14px 26px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.2);

  font-family: 'Wizardry', sans-serif;
  font-size: 18px;

  background: linear-gradient(145deg, #ff7a7a, #cc4b4b);
  color: white;

  box-shadow:
    0 0 12px rgba(255, 80, 80, 0.6),
    0 0 25px rgba(255, 50, 50, 0.4),
    inset 0 0 10px rgba(255, 100, 100, 0.2);

  cursor: pointer;
  transition: all 0.2s ease;
}

.buy-btn:hover {
  transform: scale(1.05);
}

.buy-btn:active {
  transform: scale(0.97);
}

/* COPY BUTTON */
.copy-btn {
  padding: 14px 26px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.2);

  font-family: 'Wizardry', sans-serif;
  font-size: 18px;

  background: linear-gradient(145deg, #2b2f5b, #1b1e3a);
  color: #9feaff;

  box-shadow:
    0 0 10px rgba(0, 200, 255, 0.4),
    0 0 25px rgba(0, 200, 255, 0.2),
    inset 0 0 10px rgba(0, 200, 255, 0.15);

  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  transform: scale(1.05);
}

.copy-btn:active {
  transform: scale(0.97);
}

/* ========================= */
/* RIGHT SIDE REVEAL FIX */
/* ========================= */

.reveal {
  position: absolute;
  right: 6vw;
  top: 35%; /* 👈 moved down */
  max-width: 420px;
  text-align: right;
  z-index: 20;
  color: white;


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

/* BIG COIN NAME (same as story h2) */
.reveal h2 {
  font-family: 'Wizardry', sans-serif;
  font-size: 58px;
  line-height: 1.1;

  margin-bottom: 8px;

   color: #ffd6d6;

  text-shadow:
    0 0 12px rgba(255, 120, 120, 0.7),
    0 0 25px rgba(255, 80, 80, 0.5);
}

/* SUBTEXT */
.reveal p {
  font-size: 20px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;

  padding-right: 100px; /* 👈 pushes text left */
}

/* STACK BUTTONS CLEANLY */
.cta-buttons {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  gap: 12px;

  justify-content: flex-end;
  padding-right: 30px; /* 👈 THIS pulls them left */
}

.cta-buttons button {
   width: auto;
  text-align: center;
}

.hero-title {
  position: absolute;
  top: 10%;
  right: 8vw;
  

  font-family: 'Wizardry', sans-serif;
  font-size: 65px; /* 👈 same as page 2 */
  line-height: 1.1;
  text-align: right;

 color: #ffd6d6;

  text-shadow:
    0 0 12px rgba(255, 120, 120, 0.7),
    0 0 25px rgba(255, 80, 80, 0.5);
}

.wizard-back {
  position: absolute;
  bottom: 0px; /* 👈 pushes it down */
  right: 40vw;

  width: 45vw;
  max-width: 600px;

  pointer-events: none;
  z-index: 1;
}

.wizard-back.lift {
  animation: wizardLift 0.8s ease forwards;
}

@keyframes wizardLift {
  to {
    transform: translate(20px, -60px); /* 👉 right + up */
  }
}

/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 20px 6vw;
  z-index: 999;

  /* 🔥 NEW */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  align-items: center;
  justify-content: space-between;

  padding: 20px 6vw;
  z-index: 10000; /* 🔥 HIGHEST */
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000; /* 🔥 HIGHEST */
}

/* ========================= */
/* LEFT LOGO */
/* ========================= */

.nav-left {
  font-family: 'Wizardry', sans-serif;
  font-size: 45px;

 color: #ffd6d6;

  text-shadow:
    0 0 12px rgba(255, 120, 120, 0.7),
    0 0 25px rgba(255, 80, 80, 0.5);
}

/* ========================= */
/* CENTER LINKS */
/* ========================= */

.nav-center {
  display: flex;
  gap: 36px;
}

.nav-center a {
  font-family: 'Wizardry', sans-serif;
  font-size: 25px;
  letter-spacing: 1.5px;

  color: #ffffff;
  text-decoration: none;

  opacity: 0.9;
  transition: all 0.2s ease;
}

.nav-center a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ========================= */
/* RIGHT BUTTON */
/* ========================= */

.nav-right {
  display: flex;
}

/* Keep your existing button style but slightly tuned for nav */
.nav-right .buy-btn {
  padding: 16px 30px;
  font-size: 20px;
}

/* ========================= */
/* GLITCH SECTION */
/* ========================= */

.glitch-section {
  width: 100%;
 height: calc(var(--vh, 1vh) * 100);

  position: relative;
  overflow: hidden;
}

.token-section {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);

  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777582761/Untitled-dd_qaefkk.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative; /* 🔥 THIS FIXES YOUR LAYOUT */
}

.token-character {
  position: absolute;

  left: 17%;                  /* 👈 center reference */
  top: 70%;                   /* 👈 LOWER */

  transform: translate(-50%, -50%);

  width: 55vw;                /* 👈 BIGGER */
  max-width: 700px;

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

  animation: magicFlicker 0.45s infinite;
}

.token-section {
  overflow: hidden;   /* 👈 stops scroll break */
}

.token-content {
  position: absolute;
  right: 15vw;
  top: 50%;
  transform: translateY(-50%);

  max-width: 420px;
  text-align: left;   /* ✅ fix */
  z-index: 2;
  color: white;
}

/* TITLE */
.token-content h2 {
  font-family: 'Wizardry', sans-serif;
  font-size: 64px;
  line-height: 1.1;
  margin-bottom: 20px;

 color: #ffd6d6;

  text-shadow:
    0 0 12px rgba(255, 120, 120, 0.7),
    0 0 25px rgba(255, 80, 80, 0.5);
}

/* BODY */
.token-content p {
  font-size: 25px;
  line-height: 1.6;
  margin-bottom: 14px;
text-align: left !important;
  color: rgba(255,255,255,0.85);
}

/* STRUCTURE LINES */
.token-lines {
  margin-top: 20px;
  margin-bottom: 20px;
}

.token-lines p {
  font-size: 18px;
  opacity: 0.9;
}

/* BUTTON */
.token-content .buy-btn {
  margin-top: 10px;
}

.token-paragraph {
  font-size: 20px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);

  margin-top: 10px;
}

/* ========================= */
/* 🔥 BRRR IMAGE (TOKEN) */
/* ========================= */

.token-section::after {
  content: "" !important;
  position: absolute !important;

  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777830179/bigspells_ovb8wr.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;

  width: 400px !important;
  height: 400px !important;

  right: 50% !important;
  bottom: 30% !important;

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

  display: block !important;

  animation: magicFlicker 0.45s infinite;
}

.token-section::before {
  content: "";
  position: absolute;

  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777830576/jusmagic_le51it.png");
  background-size: contain;
  background-repeat: no-repeat;

  width: 220px;
  height: 220px;

  right: 83%;
  bottom: 25%;

  transform: translateX(50%);

  pointer-events: none;
  z-index: 6; /* 👈 ABOVE BRRR */

  animation: magicFlicker 0.45s infinite;
}

/* BASE BACKGROUND */
.glitch-section::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777464601/ChatGPT_Image_Apr_29_2026_12_55_38_PM_c6p4ep.png");
  background-size: cover;
  background-position: center;

  filter: brightness(1.15) saturate(1.25) contrast(0.95);

  z-index: 0;
}

.glitch-section::before {
  content: "";
  position: absolute;

  width: 700px;
  height: 700px;

  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777464606/transparent_ulqqdk.png");
  background-size: contain;
  background-repeat: no-repeat;

  right: 40vw;
  top: 60%;
  transform: translateY(-50%);

  z-index: 1;

  animation: glitchFlicker 0.4s infinite;
}

@keyframes glitchFlicker {
  0%   { opacity: 0.6; transform: translateY(-50%) translateX(0); }
  20%  { opacity: 0.3; transform: translateY(-50%) translateX(-5px); }
  40%  { opacity: 0.7; transform: translateY(-50%) translateX(3px); }
  60%  { opacity: 0.2; transform: translateY(-50%) translateX(-2px); }
  80%  { opacity: 0.8; transform: translateY(-50%) translateX(2px); }
  100% { opacity: 0.6; transform: translateY(-50%) translateX(0); }
}

/* TEXT ON TOP */
.glitch-content {
  position: relative;
  z-index: 2;
}



/* TEXT */
.glitch-content {
  position: absolute;
  left: 65vw;
  top: 50%;
  transform: translateY(-50%);

  max-width: 420px;
  z-index: 2;
}

/* HEADER */
.glitch-content h2 {
  font-family: 'Wizardry', sans-serif;
  font-size: 90px; /* 👈 BIG upgrade */
  line-height: 1.05;
  margin-bottom: 30px;

 color: #ffd6d6;

  text-shadow:
    0 0 12px rgba(255, 120, 120, 0.7),
    0 0 25px rgba(255, 80, 80, 0.5);
}

.glitch-content p {
  font-size: 26px;
  line-height: 1.7;

  color: #ffffff; /* 👈 full white */

  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.8),   /* 👈 contrast */
    0 0 12px rgba(0, 0, 0, 0.6);
}

/* ========================= */
/* DIVIDER */
/* ========================= */

.divider {
  width: 100%;
  height: 2px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 120, 120, 0.8),
    transparent
  );

  box-shadow:
    0 0 10px rgba(255, 120, 120, 0.6),
    0 0 25px rgba(255, 80, 80, 0.4);

  position: relative;
  z-index: 10;
}

.glitch-line {
  font-size: 26px;
  line-height: 1.6;
  margin-bottom: 20px;

  color: #ffffff;

  text-shadow:
    0 0 6px rgba(0,0,0,0.8),
    0 0 12px rgba(0,0,0,0.6);
}

/* 👇 make this the punch line */
.glitch-line.highlight {
  font-size: 32px;
  font-weight: bold;

  color: #ffd6d6;

  text-shadow:
    0 0 12px rgba(255, 120, 120, 0.7),
    0 0 25px rgba(255, 80, 80, 0.5);
}

/* 👇 supporting lines */
.glitch-line.small {
  font-size: 22px;
  opacity: 0.9;
}

@media (max-width: 768px) {

  /* ========================= */
  /* GLOBAL RESET FOR MOBILE */
  /* ========================= */

  .story,
  .reveal,
  .glitch-content,
  .hero-title {
    position: static;
    transform: none;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
  }

  /* ========================= */
  /* HERO */
  /* ========================= */

.hero-title {
  font-size: 32px;
  margin-top: 60px;  /* 👇 moves it DOWN slightly */
}

.enter-btn {
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}


  /* ========================= */
  /* WIZARD */
  /* ========================= */

  .wizard {
  width: 65vw;
  bottom: 8%;   /* 🔥 lifts him slightly */
}

  .wizard-back {
    width: 80vw;
    right: 50%;
    transform: translateX(50%);
        bottom: 20px; /* 🔥 THIS lifts him up */
  }

  /* ========================= */
  /* STORY SECTION */
  /* ========================= */

  .story {
    margin-top: 60px;
  }

  .story h1 {
    font-size: 34px;
  }

  .story p {
    font-size: 16px;
    padding-left: 0;
  }

  .story h2 {
    font-size: 42px;
  }

  /* ========================= */
  /* REVEAL */
  /* ========================= */

  .reveal {
    margin-top: 40px;
    align-items: center;
  }

  .reveal h2 {
    font-size: 40px;
  }

  .reveal p {
    font-size: 16px;
    padding-right: 0;
  }

  /* ========================= */
  /* BUTTONS */
  /* ========================= */

  .cta-buttons {
    justify-content: center;
    padding-right: 0;
    flex-wrap: wrap;
  }

.cta-buttons button,
.cta-buttons a {
  width: auto;          /* 🔥 key fix */
  max-width: none;      /* 🔥 remove stretch cap */
}

.chamber-section .cta-buttons button,
.chamber-section .cta-buttons a {
  padding: 8px 12px !important;   /* tighter fit */
}

  /* ========================= */
  /* CHAMBER ICON */
  /* ========================= */



  /* ========================= */
  /* GLITCH SECTION */
  /* ========================= */

  .glitch-content {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .glitch-content h2 {
    font-size: 48px;
  }

  .glitch-content p {
    font-size: 18px;
  }

  .glitch-line {
    font-size: 18px;
  }

  .glitch-line.highlight {
    font-size: 22px;
  }

  .glitch-line.small {
    font-size: 16px;
  }

  /* ========================= */
  /* NAVBAR */
  /* ========================= */

  .nav-center {
    display: none; /* hide links on mobile */
  }

@media (max-width: 768px) {

  /* 🔥 NAVBAR POSITION */
  .navbar {
   top: 0 !important;
    padding: 10px 4vw;     /* 👈 tighter spacing */
  }

  /* 🔥 LEFT LOGO */
  .nav-left {
    font-size: 22px;       /* smaller */
  }

  /* 🔥 RIGHT BUTTON */
  .nav-right .buy-btn {
    padding: 8px 14px;     /* smaller button */
    font-size: 12px;
    border-radius: 10px;
  }

}

@media (max-width: 768px) {
.chamber-section {
  overflow: hidden;
}
/* ========================= */
/* 🔥 FORCE CLEAN LAYOUT */
/* ========================= */
/* ========================= */
/* 🔥 MOBILE PAGE 2 BACKGROUND */
/* ========================= */

.chamber-section {
  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777501083/tttt_kownyw.jpg") !important;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {

  .chamber-section {
  height: calc(var(--vh, 1vh) * 100) !important;
min-height: calc(var(--vh, 1vh) * 100) !important;

    display: block !important;   /* ❌ kill flex */
    padding: 0 !important;       /* ❌ remove extra height */
  }

}

.story,
.reveal {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;

text-align: center;
margin: 0 auto;
max-width: 90%;
}

/* 👇 FORCE ORDER */
.story  { order: 1; }

.reveal { order: 3; }

/* ========================= */
/* 🔥 TEXT FIX */
/* ========================= */

.story h1 {
font-size: 26px !important;
line-height: 1.2;
margin-bottom: 10px;


}

.story h2 {
font-size: 32px !important;
margin: 15px 0 10px;
}

.reveal h2 {
font-size: 28px !important;
margin-bottom: 6px;
}

/* 👉 MERGE PARAGRAPHS INTO ONE FLOW */
.story p,
.reveal p {
display: inline;
font-size: 18px !important;
line-height: 1.6;
padding: 0 !important;
}

.story p::after,
.reveal p::after {
content: " ";
}

/* ========================= */
/* 🔥 SPACING */
/* ========================= */



.cta-buttons {
justify-content: center !important;
padding: 0 !important;
gap: 10px;
margin-top: 12px;
}
/* ========================= */
/* 🔥 SMALLER CTA BUTTONS */
/* ========================= */

.cta-buttons button {
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-radius: 10px;
  max-width: 200px;
}

.cta-buttons {
  gap: 8px; /* tighter spacing */
}

/* ========================= */
/* 🔥 WIZARD FIX */
/* ========================= */

@media (max-width: 768px) {

  .wizard {
    position: absolute !important;
    left: 50%;
    bottom: 120px !important;

    transform: translateX(-50%);
    width: 55vw !important;

    opacity: 0;

    animation:
      wizardRiseMobile 0.9s ease forwards,
      magicFlicker 0.45s infinite;

    animation-delay: 0.1s, 0.6s;
  }

}

@keyframes wizardRiseMobile {
  from {
   transform: translate(-50%, -90px) scale(1.4);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0) scale(1.4);
    opacity: 1;
  }
}
/* ========================= */
/* 🔥 CHAMBER ICON FIX */
/* ========================= */







}
@media (max-width: 768px) {
/* ========================= */
/* 🔥 MOBILE GLITCH BACKGROUND */
/* ========================= */

.glitch-section::after {
  background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777478313/glitch_mob_egg5xz.jpg") !important;

  background-size: cover;
  background-position: center;
}

/* ========================= */
/* 🔥 SMALLER GLITCH OVERLAY IMG */
/* ========================= */

@media (max-width: 768px) {

  .glitch-section::before {
    width: 320px !important;   /* 👈 smaller */
    height: 320px !important;

    right: 50% !important;
    transform: translate(50%, -50%) !important;
  }

}

/* ========================= */
/* 🔥 FIX GLITCH TEXT MOBILE */
/* ========================= */

.glitch-content {
  position: absolute !important;

  left: 50% !important;
  top: 5% !important; /* 👈 move UP so it's visible */

  transform: translateX(-50%) !important;

  width: 90%;
  max-width: 320px;

  text-align: center;
}

/* BIG HEADER */
.glitch-content h2 {
  font-size: 38px !important; /* 👈 was 90px lol */
  line-height: 1.1;
  margin-bottom: 16px;
}

/* TEXT */
.glitch-content p {
  font-size: 16px !important;
  line-height: 1.5;
}

/* glitch lines */
.glitch-line {
  font-size: 18px !important;
}

.glitch-line.highlight {
  font-size: 20px !important;
}

.glitch-line.small {
  font-size: 18px !important;
}

@media (max-width: 768px) {

  .wizard-back.lift {
    animation: wizardLiftMobile 0.9s ease forwards;
  }

}

@keyframes wizardLiftMobile {
  from {
    transform: translateX(50%) translateY(0);
  }
  to {
    transform: translateX(50%) translateY(-40px); /* 🔥 mostly UP */
  }
}

@media (max-width: 768px) {
  .token-section {
    background-image: url("https://res.cloudinary.com/daz8so5gl/image/upload/v1777585409/gg_diwom1.jpg") !important;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media (max-width: 768px) {

  .token-content {
    position: absolute !important;

    top: 40px !important;     /* 🔥 push to top (adjust 60–120px) */
    left: 20px !important;
    right: 20px !important;

    transform: none !important;   /* 🔥 remove vertical centering */

    max-width: none;
    text-align: left;
  }

}
@media (max-width: 768px) {

  .token-content {
    text-align: center !important;
  }

  .token-content h2 {
    text-align: center !important;
  }

  .token-content p,
  .token-paragraph {
    font-size: 18px !important;   /* smaller */
    line-height: 1.5;
    text-align: center !important; /* 🔥 center text */
  }

  .cta-buttons {
    justify-content: center !important; /* center button */
  }

}

@media (max-width: 768px) {

  .story {
    margin-top: 15px !important;        /* ⬆️ moved up a bit more */
    transform: translateY(10px) !important;
  }

  

}
@media (max-width: 768px) {

  .enter-btn,
  .wizard-back {
    position: absolute !important;
  }

  .hero {
    position: relative !important;
  }

}
@media (max-width: 768px) {

  /* ✅ TRUE FULLSCREEN (NO RESIZE BUG) */
.chamber-section {
 height: calc(var(--vh, 1vh) * 100) !important;
min-height: calc(var(--vh, 1vh) * 100) !important;
}


    overflow: hidden;
    position: relative;
  }

  /* ✅ CENTER CONTENT WITHOUT STACKING JUNK */
@media (max-width: 768px) {

  .story,
  .reveal {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 320px;
    text-align: center;
  }

  .story {
    top: 25%;   /* ⬆️ move slightly higher */
  }

  .reveal {
    top: 50%;   /* ⬆️ pull up so it fits */
  }

  /* 🔥 KEY FIXES */
  .story {
    margin-top: 0 !important;
    transform: translateX(-50%) !important;
  }

  .wizard {
    bottom: 120px !important; /* ⬇️ was 300px (too big) */
  }

}

  /* ✅ BUTTONS */
  .cta-buttons {
    justify-content: center !important;
    padding: 0 !important;
  }

}
@media (max-width: 768px) {

  /* CHAMBER ONLY */
  .chamber-section .story {
    top: 18% !important;
  }

 .chamber-section .reveal {
  top: 68% !important;   /* 👈 NOW it will actually move */
}

  .chamber-section .wizard {
    bottom: 140px !important;
  }

  .chamber-section::before {
    top: 55% !important;
  }

}

@media (max-width: 768px) {

  /* 🔥 FIX: CENTER TOP TEXT PROPERLY */
  .chamber-section .story {
    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    text-align: center !important;
    width: 90%;
    max-width: 320px;
  }

}
@media (max-width: 768px) {

  /* 🔥 MOVE STORY UP */
  .chamber-section .story {
    top: 14% !important;   /* was ~18–25%, this lifts it */
  }

  /* 🔥 TIGHTEN TEXT */
  .chamber-section .story p {
    line-height: 1.35 !important;   /* tighter */
    margin-bottom: 8px !important;  /* less gap between lines */
  }

  /* 🔥 OPTIONAL: tighten header spacing */
  .chamber-section .story h1 {
    margin-bottom: 8px !important;
  }
  /* 🔥 SMALLER WIZARD (CHAMBER ONLY) */
  .chamber-section .wizard {
    width: 45vw !important;     /* was ~55vw */
    max-width: 260px !important;

    bottom: 180px !important;   /* keep position stable */
  }

}
}

@media (max-width: 768px) {

  /* 🔥 CENTER + MOVE REVEAL UNDER WIZARD */
  .chamber-section .reveal {
    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    top: 68% !important;   /* 👈 pushes it BELOW wizard */
    text-align: center !important;

    width: 90%;
    max-width: 320px;

    align-items: center !important;
  }

  /* 🔥 CENTER TEXT */
  .chamber-section .reveal p {
    text-align: center !important;
    padding: 0 !important;
  }

  /* 🔥 CENTER BUTTONS */
  .chamber-section .cta-buttons {
    justify-content: center !important;
    padding: 0 !important;
  }

}
@media (max-width: 768px) {

  .chamber-section .reveal {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    top: 72% !important; /* 👈 slightly lower so it's clearly under wizard */

    width: 90%;
    max-width: 320px;

    text-align: center !important;
    align-items: center !important;
  }

  .chamber-section .reveal p {
    text-align: center !important;
    padding: 0 !important;
  }

  .chamber-section .cta-buttons {
    justify-content: center !important;
    padding: 0 !important;
  }

}
@media (max-width: 768px) {

  /* move reveal (text + buttons) UP */
  .chamber-section .reveal {
    top: 66% !important;
  }

  /* tighten buttons upward */
  .chamber-section .cta-buttons {
    margin-top: 4px !important;
  }

  /* smaller wizard */
  .chamber-section .wizard {
    width: 38vw !important;
    max-width: 220px !important;
  }

  /* smaller chamber logo */
  .chamber-section::before {
    width: 130px !important;
    height: 130px !important;
  }

}
@media (max-width: 768px) {

  /* 🔥 ALL HEADERS SMALLER */
  h1 {
    font-size: 28px !important;
  }

  h2 {
    font-size: 26px !important;
  }

  /* specific big titles */
  .hero-title {
    font-size: 32px !important;
  }

  .story h1 {
    font-size: 24px !important;
  }

  .story h2 {
    font-size: 28px !important;
  }

  .reveal h2 {
    font-size: 26px !important;
  }

  .glitch-content h2 {
    font-size: 34px !important;
  }

  .token-content h2 {
    font-size: 30px !important;
  }

  /* 🔥 BODY TEXT SMALLER */
  p {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .story p,
  .reveal p {
    font-size: 15px !important;
  }

  .token-content p,
  .token-paragraph {
    font-size: 15px !important;
  }

  .glitch-content p {
    font-size: 15px !important;
  }

  /* glitch lines */
  .glitch-line {
    font-size: 16px !important;
  }

  .glitch-line.highlight {
    font-size: 18px !important;
  }

}
@media (max-width: 768px) {

  /* ========================= */
  /* 🔥 CHAMBER CLEAN LAYOUT */
  /* ========================= */

@media (max-width: 768px) {
  .chamber-section {
    height: calc(var(--vh, 1vh) * 100) !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    overflow: hidden;
    position: relative;
  }
}

  /* ========================= */
  /* 🔥 TOP TEXT (HIGH + CLEAR) */
  /* ========================= */

  .chamber-section .story {
    position: absolute !important;
    top: 9% !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 90%;
    max-width: 320px;

    text-align: center !important;
  }

  .chamber-section .story h1 {
    font-size: 24px !important;
    margin-bottom: 6px !important;
  }

  .chamber-section .story p {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
  }



  


  /* ========================= */
  /* 🔥 BOTTOM BLOCK (GROUPED) */
  /* ========================= */

  .chamber-section .reveal {
    position: absolute !important;

    top: 74% !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 90%;
    max-width: 320px;

    text-align: center !important;
    align-items: center !important;
  }

  .chamber-section .reveal h2 {
    font-size: 26px !important;
    margin-bottom: 4px !important;
  }

  .chamber-section .reveal p {
    font-size: 14px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* ========================= */
  /* 🔥 BUTTONS (TIGHT + SMALL) */
  /* ========================= */

  .chamber-section .cta-buttons {
    margin-top: 4px !important;
    gap: 8px !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .chamber-section .cta-buttons button {
    padding: 8px 14px !important;
    font-size: 13px !important;
    max-width: 160px !important;
    border-radius: 10px !important;
  }

}
@media (max-width: 768px) {

  /* 🔥 MOVE WHOLE BOTTOM BLOCK DOWN A BIT */
  .chamber-section .reveal {
    top: 82% !important;  /* 👈 adjust 76–82% to taste */
  }

  /* 🔥 HEADER ONE LINE + CLOSER TO BUTTONS */
  .chamber-section .reveal h2 {
    white-space: nowrap !important;
    font-size: 20px !important;
    letter-spacing: 0.5px;
    margin-bottom: 4px !important;  /* 👈 tighter to buttons */
  }

  /* 🔥 BUTTON ROW LOCKED */
  .chamber-section .cta-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;   /* 🚫 NEVER stack */
    justify-content: center !important;
    align-items: center;
    gap: 8px !important;
    margin-top: 4px !important;
  }

  /* 🔥 BUTTON TEXT NEVER WRAPS */
  .chamber-section .cta-buttons button {
    white-space: nowrap !important;  /* 👈 KEY FIX */
    flex: 0 0 auto;                 /* 👈 prevents squish/wrap */
    max-width: 130px !important;

    padding: 8px 10px !important;
    font-size: 12px !important;
  }

}


@media (max-width: 768px) {
  .chamber-section::before {
    top: 65.5% !important;
    left: 49%;
    right: auto;

    width: 120px;
    height: 120px;

    transform: translate(-50%, -120px);
    opacity: 0;

    animation:
      chamberDropMobile 0.8s ease forwards,
      chamberFloatMobileClean 2.5s ease-in-out infinite,
      magicFlicker 0.45s infinite;

    animation-delay: 0.1s, 1s, 0.6s; /* 👈 IMPORTANT */
  }
}
@keyframes chamberDropMobile {
  to {
    transform: translate(-50%, -50%); /* 👈 final correct position */
    opacity: 1;
  }
}

@keyframes chamberFloatMobileClean {
  0%   { transform: translate(-50%, -50%); }
  50%  { transform: translate(-50%, -55%); } /* 👈 smooth float */
  100% { transform: translate(-50%, -50%); }
}

/* ========================= */
/* 🔥 FORCE NAVBAR MOBILE FIX */
/* ========================= */
@media (max-width: 768px) {

  .nav-center {
    display: none !important;
  }

  .navbar {
     top: 0 !important;
    padding: 8px 4vw !important;
    position: fixed !important;
  }

  .nav-left {
    font-size: 20px !important;
  }

  .nav-right .buy-btn {
    padding: 7px 12px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }
}
@media (max-width: 768px) {

  .token-character {
    position: absolute;

    left: 50% !important;

    top: auto !important;     /* 🔥 CRITICAL */
    bottom: 10px !important; /* move UP */

    transform: translateX(-50%) !important; /* remove Y shift */

    width: 85vw;
    max-width: 460px;

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

    animation: magicFlicker 0.45s infinite;
  }

}

@media (max-width: 768px) {
  .token-section::after {
    width: 200px !important;
    height: 200px !important;

    left: 80% !important;
    right: auto !important;

    bottom: 170px !important;

    transform: translateX(-50%) !important;
  }
}

.token-section {
  position: relative; /* you already have this 👍 */
}

.token-section .footer-bar {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 16px;

  z-index: 5;
}

.token-section .footer-bar img {
  width: 14px !important;
  height: 14px !important;

  filter: invert(1);
  opacity: 0.8;
}


  .token-section .footer-bar img {
    width: 36px !important;
    height: 36px !important;
  }
@media (max-width: 768px) {
  .token-section .footer-bar img {
  width: 20px !important;
  height: 20px !important;

  filter: invert(1);
  opacity: 0.8;
}
 }

 .token-section .footer-bar img.no-invert {
  filter: none !important;
}

.token-section .footer-bar img.no-invert {
  filter: none !important;

  transform: scale(2);   /* 👈 makes it bigger WITHOUT pushing others */
}

/* DESKTOP ONLY */
@media (min-width: 769px) {
  .token-section::before {
    left: 50%;
    right: auto;              /* 🔥 kill the old right: 83% */

    bottom: 0%;              /* match BRRR */

    transform: translateX(-50%);
    
    width: 400px;
    height: 400px;
  }
}

@media (min-width: 769px) {
  .chamber-section .story p {
    text-align: left;   /* force clean left align */
    padding-left: 0;    /* 🔥 remove that offset */
  }
}

@media (min-width: 769px) {
  .chamber-section .story {
    top: 28%;   /* 👈 was 35%, lower number = moves UP */
  }
}

.footer-bar a:hover img {
  opacity: 1;
  transform: scale(1.1);
}

.footer-bar a:hover img.no-invert {
  transform: scale(2.2);
}

.buy-btn {
  display: inline-block;   /* 🔥 important for <a> */
  text-decoration: none;   /* ❌ remove underline */
}

.buy-btn {
  display: inline-flex;          /* 🔥 key fix */
  align-items: center;
  justify-content: center;

  text-decoration: none;         /* remove underline */
  line-height: 1;                /* 🔥 prevents vertical bloat */
}

.buy-btn {
  white-space: nowrap;
}
@media (max-width: 768px) {

  .chamber-section .cta-buttons a,
  .chamber-section .cta-buttons button {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

}

@media (max-width: 768px) {

  .token-section .copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;              /* 🔥 stop stretching */
    max-width: none;

    padding: 8px 12px;        /* 👈 match chamber */
    font-size: 12px;

    white-space: nowrap;      /* 👈 keep one line */
  }

}
@media (max-width: 768px) {

  .token-content h2 {
    margin-bottom: 8px !important;   /* was ~20px */
  }

  .token-content p,
  .token-paragraph {
    margin-bottom: 6px !important;   /* 🔥 tighter */
    line-height: 1.35 !important;    /* 🔥 tighter lines */
  }

  .token-paragraph {
    margin-top: 4px !important;      /* 🔥 was 10px */
  }

  .token-content .copy-btn {
    margin-top: 6px !important;      /* 🔥 pulls button UP */
  }

}