body {
  margin: 0;
  background-color: #2b0047;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: rgba(43, 0, 71, 0.75);
  background-image: url("https://i.pinimg.com/originals/1d/15/d8/1d15d8da8b3b6f3a895828ba2663f409.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.2;
  z-index: -1;
}

/* Fonts */
.kalnia-glaze-<uniquifier> {
  font-family: "Kalnia Glaze", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 112.5;
}
.almendra-sc-regular {
  font-family: "Almendra SC", serif;
  font-weight: 400;
  font-style: normal;
}
.new-rocker-regular {
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
}
.balthazar-regular {
  font-family: "Balthazar", serif;
  font-weight: 400;
  font-style: normal;
}


.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  max-width: 700px;
  margin: 20px auto 0 auto;
  padding: 8px;
  margin-top: 50px;
  background-color: rgba(48, 0, 48, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid #d4af37;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
  transition: all 0.3s ease;
  z-index: 1;
}
.calendar:hover {
  border-color: #ffdd55;
  box-shadow: 0 0 25px rgba(255, 221, 85, 0.8);
}


/* Date input field */
#crystalDate {
  position: fixed;
  top: calc(50% - 275px); /* slightly below the label */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  
  padding: 10px 18px;
  font-size: 1.3rem;
  font-family: 'New Rocker', cursive;
  color: #ffdd55;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #d4af37;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  box-shadow: 0 0 15px rgba(212,175,55,0.5);
  transition: all 0.3s ease;
}

/* Hover & focus states */
#crystalDate:hover {
  border-color: #ffdd55;
  box-shadow: 0 0 25px rgba(255,221,85,0.7);
}

#crystalDate:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 30px rgba(255,215,0,0.9);
}

/* Placeholder color */
#crystalDate::placeholder {
  color: #eee;
}

/* Hide the native calendar icon (optional for style control) */
#crystalDate::-webkit-calendar-picker-indicator {
  filter: invert(80%) sepia(60%) saturate(200%) hue-rotate(10deg);
  cursor: pointer;
  transition: transform 0.2s ease;
}

#crystalDate::-webkit-calendar-picker-indicator:hover {
  transform: scale(1.2);
}


/* Individual calendar boxes */
.calendar > div {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: #222;
  background-color: #fff;
  border-radius: 8px; /* optional: soften box corners */
  transition: all 0.2s ease;
  z-index: 1;
}
.calendar > div:hover {
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
  transform: translateY(-2px);
}

.calendar > .box7,
.calendar > .box8,
.calendar > .box9,
.calendar > .box10,
.calendar > .box11,
.calendar > .box12,
.calendar > .box13,
.calendar > .box14,
.calendar > .box15,
.calendar > .box16,
.calendar > .box17,
.calendar > .box18,
.calendar > .box19,
.calendar > .box20,
.calendar > .box21,
.calendar > .box22,
.calendar > .box23,
.calendar > .box24,
.calendar > .box25,
.calendar > .box26,
.calendar > .box27,
.calendar > .box28,
.calendar > .box29,
.calendar > .box30,
.calendar > .box31,
.calendar > .box32,
.calendar > .box33,
.calendar > .box34,
.calendar > .box35,
.calendar > .box36,
.calendar > .box37,
.calendar > .box44 {
  box-shadow: 0 0 5px 2px rgba(0, 163, 108, 0.7); /* white glow */
  transition: box-shadow 0.3s ease;
}

.calendar > .box7:hover,
.calendar > .box8:hover,
.calendar > .box9:hover,
.calendar > .box10:hover,
.calendar > .box11:hover,
.calendar > .box12:hover,
.calendar > .box13:hover,
.calendar > .box14:hover,
.calendar > .box15:hover,
.calendar > .box16:hover,
.calendar > .box17:hover,
.calendar > .box18:hover,
.calendar > .box19:hover,
.calendar > .box20:hover,
.calendar > .box21:hover,
.calendar > .box22:hover,
.calendar > .box23:hover,
.calendar > .box24:hover,
.calendar > .box25:hover,
.calendar > .box26:hover,
.calendar > .box27:hover,
.calendar > .box28:hover,
.calendar > .box29:hover,
.calendar > .box30:hover,
.calendar > .box31:hover,
.calendar > .box32:hover,
.calendar > .box33:hover,
.calendar > .box34:hover,
.calendar > .box35:hover,
.calendar > .box36:hover,
.calendar > .box37:hover,
.calendar > .box44:hover {
  box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.9);
  transform: translateY(-2px); /* optional subtle lift */
}



.calendar > .box1 {
  background-color: #000000;
}

.calendar > .box7 {
  background-color: #D4AF37;
}

.calendar > .box44 {
  background-color: #D4AF37;
}

.calendar > .box37 {
  background-color: #000000;
}

.calendar > .box8,
.calendar > .box9,
.calendar > .box10,
.calendar > .box11,
.calendar > .box12,
.calendar > .box13,
.calendar > .box15,
.calendar > .box16,
.calendar > .box17,
.calendar > .box19,
.calendar > .box20,
.calendar > .box21,
.calendar > .box23,
.calendar > .box24,
.calendar > .box25,
.calendar > .box26,
.calendar > .box27,
.calendar > .box28,
.calendar > .box30,
.calendar > .box31,
.calendar > .box32,
.calendar > .box33,
.calendar > .box34,
.calendar > .box35 {
  background-color: #00A36C;
}

.calendar > .box36,
.calendar > .box29, 
.calendar > .box22,
.calendar > .box14 {
  background-color: #0F52BA;
}

.moon-emoji {
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: inline-block;
}

.moon-emoji:hover { transform: scale(1.2); }
.moon-emoji:active { transform: scale(1.3); }

.modal {
  display: none;
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 9999; /* higher than everything */
  text-align: center; /* center inline content */
  padding: 20px; /* optional spacing around modal content */
}

.modal-content {
  background-color: rgba(40, 0, 70, 0.95);
  color: #fff8dc;
  padding: 40px;
  border-radius: 20px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  font-family: "Poppins", sans-serif;
  animation: popIn 0.3s ease forwards;

  /* Center using absolute positioning */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; /* center text inside modal */
}



#moonInfo {
  display: flex;
  flex-direction: column;
  align-items: center; /* center all inner content */
  justify-content: center;
  gap: 10px;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.2rem;
  cursor: pointer;
}
.close:hover { color: #fff; }


#moonDate {
  position: fixed;        /* stay at top of viewport */
  top: 20px;              /* 20px from top */
  left: 50%;              /* center horizontally */
  transform: translateX(-50%); /* truly centered */
  z-index: 1000;          /* make sure it's above the calendar */
  
  padding: 12px 20px;
  font-size: 2rem;
  font-family: "Kalnia Glaze", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 112.5;
  color: #000000;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid #d4af37;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(212,175,55,0.6);
  text-align: center;
  cursor: default;
  transition: all 0.3s ease;
  max-width: 400px;
}
#moonDate:hover {
  border-color: #ffdd55;
  box-shadow: 0 0 25px rgba(255,221,85,0.8);
}
#moonDate:focus {
  border-color: #ffd700;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
}
#moonDate::-webkit-input-placeholder {
  color: #eee;
}
#moonDate::-moz-placeholder {
  color: #eee;
}
#moonDate:-ms-input-placeholder {
  color: #eee;
}

label[for="moonDate"] {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  color: #ffd700;  /* mystical gold */
  margin-right: 10px;
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.7);
}

.calendar > div {
  position: relative;
}
.calendar > div .box-date {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.75rem;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}
.box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* lets emoji clicks work */
}

.astro-info {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: #ffd700;
  text-align: center;
  line-height: 1.1;
  pointer-events: auto; /* can click for modal */
}
.calendar .box {
  position: relative;
  width: 100px;   /* adjust to your box size */
  height: 100px;  /* fixed height */
  overflow: visible; /* allows absolute elements to show outside if needed */
}

.chakrabox {
      position: fixed;
      top: 0;
      right: 0;
      width: 390px;
      height: 100vh;
      padding-top: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr; /* Two equal columns */
      -webkit-backdrop-filter: blur(10px);
      
    }
    
.root-chakra {
      position: relative;
      width: 100%;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* The Sanskrit character “लं” */
.lam {
  position: absolute;
  padding-right: 5px;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 3;
  opacity: 0.9;
  pointer-events: auto; /* allows hover/click on parent root-chakra */
  cursor: pointer;
}
   /* Circle outline */
.chakra-circle {
  position: absolute;
  width: 52px;   /* 140 * 0.8 */
  height: 52px;  /* 140 * 0.8 */
  border: 2px solid #ff0000;
  border-radius: 50%;
  z-index: 0;
}

/* Square outline */
.chakra-square {
  position: absolute;
  width: 30px;    /* 100 * 0.8 */
  height: 30px;   /* 100 * 0.8 */
  border: 2px solid #ff0000;
  z-index: 1;
}

/* Triangle outline */
.chakra-triangle {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 30px;    /* 100 * 0.8 */
  height: 30px; /* 96 * 0.8 */
  transform: translate(-50%, -50%) rotate(180deg);
  background: none;
  z-index: 2;
}
.chakra-triangle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  background-color: red; /* the stroke color shows via mask */
  opacity: 1;
}

.chakra-flower {
  position: absolute;
  width: 140px;   /* adjust size if needed */
  height: 140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -4;
}
.chakra-flower .flower-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: url('rcbg.png') no-repeat center/contain;
  opacity: 0.5; /* faded background */
  z-index: 1;
}
.chakra-flower .flower-border {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: url('rcbdr.png') no-repeat center/contain;
  opacity: 1;  /* full color */
  z-index: 2;
}

/* Flower glows */
.glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.9) 0%, rgba(255, 0, 0, 0.05) 80%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0; /* behind flower */
  animation: glowPulse 2s infinite ease-in-out;
}

@keyframes glowPulse {
  0% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
  50% {
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
}

@keyframes rotateFlowerHover {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.glow2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 0, 0.9), rgba(255, 165, 0, 0.05) 80%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0; /* behind flower */
  animation: glowPulse 2s infinite ease-in-out;
}
@keyframes glow2Pulse {
  0% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
  50% {
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
}

.glow3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 0, 0.9), rgba(255, 255, 0, 0.05) 80%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0; /* behind flower */
  animation: glowPulse 2s infinite ease-in-out;
}
@keyframes glow3Pulse {
  0% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
  50% {
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
}

.glow4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 0, 0.9) 0%, rgba(0, 200, 0, 0.05) 80%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0; /* behind flower */
  animation: glowPulse 2s infinite ease-in-out;
}
@keyframes glow4Pulse {
  0% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
  50% {
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
}

.glow5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32, 195, 232, 0.9) 0%, rgba(32, 195, 232, 0.05) 80%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0; /* behind flower */
  animation: glowPulse 2s infinite ease-in-out;
}
@keyframes glow5Pulse {
  0% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
  50% {
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
}

.glow6 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 100, 235, 0.9) 0%, rgba(52, 100, 235, 0.05) 80%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0; /* behind flower */
  animation: glowPulse 2s infinite ease-in-out;
}
@keyframes glow6Pulse {
  0% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
  50% {
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
}

.glow7 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 16, 203, 0.9) 0%, rgba(160, 16, 203, 0.05) 80%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0; /* behind flower */
  animation: glowPulse 2s infinite ease-in-out;
}
@keyframes glow7Pulse {
  0% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
  50% {
    width: 170px;
    height: 170px;
    opacity: 1;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
}

/* rotate continuously while hovered */
.root-chakra:hover .flower-bg,
.root-chakra:hover .flower-border {
  animation: rotateFlowerHover 2s linear infinite;
}

.sacral-chakra {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sanskrit character वं */
.vam {
  position: absolute;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 3;
  opacity: 0.9;
  pointer-events: auto;
  cursor: pointer;
  padding-bottom: 5px;
  padding-right: 3px;
}

.sacral-chakra .chakra-circle-small {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid orange;
  border-radius: 50%;
  top: calc(50% - 4px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.sacral-chakra .chakra-circle-medium {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid orange;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.sacral-chakra .chakra-circle-large {
  position: absolute;
  width: 52px;
  height: 52px;
  border: 2px solid orange;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Flower container */
.sacral-chakra .chakra-flower .flower-bg {
  background: url('sbg.png') no-repeat center/contain;
}
.sacral-chakra .chakra-flower .flower-border {
  background: url('sbdr.png') no-repeat center/contain;
}
.sacral-chakra:hover .flower-bg,
.sacral-chakra:hover .flower-border {
  animation: rotateFlowerHover 2s linear infinite;
}

.solar-chakra {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sanskrit character रं */
.Ram {
  position: absolute;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 3;
  opacity: 0.9;
  pointer-events: auto;
  cursor: pointer;
  padding-right: 2px;
  padding-top: 3px;
}

.solar-chakra .solar-triangle {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 42px;    /* 100 * 0.8 */
  height: 42px; /* 96 * 0.8 */
  transform: translate(-50%, -50%) rotate(180deg);
  background: none;
  z-index: 2;
}
.solar-chakra .solar-triangle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  background-color: #FFF048; /* the stroke color shows via mask */
  opacity: 1;
}
.solar-chakra .solar-circle {
  position: absolute;
  width: 52px;   /* 140 * 0.8 */
  height: 52px;  /* 140 * 0.8 */
  border: 2px solid #FFF048;
  border-radius: 50%;
  z-index: 0;
}

/* Flower container */
.solar-chakra .chakra-flower .flower-bg {
  background: url('slbg.png') no-repeat center/contain;
}
.solar-chakra .chakra-flower .flower-border {
  background: url('slbdr.png') no-repeat center/contain;
}
.solar-chakra:hover .flower-bg,
.solar-chakra:hover .flower-border {
  animation: rotateFlowerHover 2s linear infinite;
}

    
.heart-chakra {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sanskrit character रं */
.Yam {
  position: absolute;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 3;
  opacity: 0.9;
  pointer-events: auto;
  cursor: pointer;
  padding-right: 2px;
  padding-top: 3px;
}

.heart-chakra .heart-triangle {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 42px;    /* 100 * 0.8 */
  height: 42px; /* 96 * 0.8 */
  transform: translate(-50%, -50%) rotate(180deg);
  background: none;
  z-index: 2;
}
.heart-chakra .heart-triangle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  background-color: #00d722; /* the stroke color shows via mask */
  opacity: 1;
}
.heart-chakra .heart-triangle2 {
  position: absolute;
  top: 45%;        /* adjust slightly for vertical alignment */
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%); /* remove rotate */
  background: none;
  z-index: 2;
}
.heart-chakra .heart-triangle2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  background-color: #00d722; /* stroke color */
  opacity: 1;
}

.heart-chakra .heart-circle {
  position: absolute;
  width: 52px;   /* 140 * 0.8 */
  height: 52px;  /* 140 * 0.8 */
  border: 2px solid #00d722;
  border-radius: 50%;
  z-index: 0;
}

/* Flower container */
.heart-chakra .chakra-flower .flower-bg {
  background: url('hbg.png') no-repeat center/contain;
}
.heart-chakra .chakra-flower .flower-border {
  background: url('hbdr.png') no-repeat center/contain;
}
.heart-chakra:hover .flower-bg,
.heart-chakra:hover .flower-border {
  animation: rotateFlowerHover 2s linear infinite;
}

.throat-chakra {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sanskrit character रं */
.Ham {
  position: absolute;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 3;
  opacity: 0.9;
  pointer-events: auto;
  cursor: pointer;
  padding-right: 2px;
  padding-top: 3px;
}

.throat-chakra .throat-triangle {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 42px;    /* 100 * 0.8 */
  height: 42px; /* 96 * 0.8 */
  transform: translate(-50%, -50%) rotate(180deg);
  background: none;
  z-index: 2;
}
.throat-chakra .throat-triangle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  background-color: #20C3E8; /* the stroke color shows via mask */
  opacity: 1;
}

.throat-chakra .throat-circle {
  position: absolute;
  width: 52px;   /* 140 * 0.8 */
  height: 52px;  /* 140 * 0.8 */
  border: 2px solid #20C3E8;
  border-radius: 50%;
  z-index: 0;
}
.throat-chakra .throat-circle2 {
  position: absolute;
  width: 12px;   /* 140 * 0.8 */
  height: 12px;  /* 140 * 0.8 */
  border: 2px solid #20C3E8;
  border-radius: 50%;
  z-index: 0;
}

/* Flower container */
.throat-chakra .chakra-flower .flower-bg {
  background: url('tbg.png') no-repeat center/contain;
}
.throat-chakra .chakra-flower .flower-border {
  background: url('tbdr.png') no-repeat center/contain;
}
.throat-chakra:hover .flower-bg,
.throat-chakra:hover .flower-border {
  animation: rotateFlowerHover 2s linear infinite;
}

.te-chakra {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sanskrit character रं */
.Om {
  position: absolute;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 3;
  opacity: 0.9;
  pointer-events: auto;
  cursor: pointer;
  padding-right: 2px;
  padding-top: 3px;
}

.te-chakra .te-triangle {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 42px;    /* 100 * 0.8 */
  height: 42px; /* 96 * 0.8 */
  transform: translate(-50%, -50%) rotate(180deg);
  background: none;
  z-index: 2;
}
.te-chakra .te-triangle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="104" viewBox="0 0 120 104"><polygon points="60,0 120,104 0,104" fill="none" stroke="red" stroke-width="4"/></svg>') no-repeat center / contain;
  background-color: #3464EB; /* the stroke color shows via mask */
  opacity: 1;
}

.te-chakra .te-circle {
  position: absolute;
  width: 52px;   /* 140 * 0.8 */
  height: 52px;  /* 140 * 0.8 */
  border: 2px solid #3464EB;
  border-radius: 50%;
  z-index: 0;
}

/* Flower container */
.te-chakra .chakra-flower .flower-bg {
  background: url('tebg.png') no-repeat center/contain;
}
.te-chakra .chakra-flower .flower-border {
  background: url('tebdr.png') no-repeat center/contain;
}
.te-chakra:hover .flower-bg,
.te-chakra:hover .flower-border {
  animation: rotateFlowerHover 2s linear infinite;
}

.crown-chakra {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sanskrit character रं */
.OM {
  position: absolute;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 3;
  opacity: 0.9;
  pointer-events: auto;
  cursor: pointer;
  padding-right: 2px;
  padding-top: 3px;
}

.crown-chakra .crown-circle {
  position: absolute;
  width: 52px;   /* 140 * 0.8 */
  height: 52px;  /* 140 * 0.8 */
  border: 2px solid #A010CB;
  border-radius: 50%;
  z-index: 0;
}

/* Flower container */
.crown-chakra .chakra-flower .flower-bg {
  background: url('cbg.png') no-repeat center/contain;
}
.crown-chakra .chakra-flower .flower-border {
  background: url('cbdr.png') no-repeat center/contain;
}
.crown-chakra:hover .flower-bg,
.crown-chakra:hover .flower-border {
  animation: rotateFlowerHover 2s linear infinite;
}

/* space between chakras */
.root-chakra,
.sacral-chakra, .solar-chakra, .heart-chakra, .throat-chakra, .te-chakra, .crown-chakra {
  height: 100px;
}
      
      
.crystal-ball {
  position: fixed;
  bottom: 20px; /* lift the ball so the stand can sit at bottom */
  left: calc(50% + 500px);
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #3b0078 0%, #190034 90%);
  box-shadow: 0 0 25px rgba(160, 16, 203, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.iris {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #999 60%, #444 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease-out;
  z-index: 2;
}
.pupil {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1) inset;
}
.stand {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 20px;
  background: linear-gradient(to bottom, #4b2a0a, #2e1806);
  border-radius: 10px 10px 4px 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  z-index: 1;
}


.button-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}

.suit-btn {
  width: 110px;
  height: 110px;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.18s ease;
}

.suit-btn .emoji {
  font-size: 78px;
  position: relative;
  pointer-events: none;
  display: inline-block;
  transform: translateY(-3%);
  transition: transform 0.18s ease, text-shadow 0.18s ease;
  text-shadow: 0 0 6px rgba(255,255,255,0.1);
}

/* Hover + Active just on the emoji, no background box */
.suit-btn:hover .emoji {
  transform: translateY(-3%) scale(1.1);
  text-shadow: 
    0 0 10px rgba(255,255,255,0.2),
    0 0 20px rgba(255,255,255,0.1);
}

.suit-btn:active .emoji {
  transform: translateY(2%) scale(0.95);
  text-shadow: 0 0 6px rgba(255,255,255,0.1);
}

/* Colors */
.heart-btn .emoji { color: #ff4fb8; }       /* pink */
.diamond-btn .emoji { color: #ff1a1a; }     /* red */
.spade-btn .emoji { color: #000000; } /* pure black */
.club-btn .emoji { color: #5e2b6e; }        /* deep purple */

.leftside-container {
  position: fixed;
  top: 25%;
  left: 50px;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.chart {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(109, 45, 141, 0.85); /* semi-transparent like old canvas */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* optional: if you want it transparent like your previous .chart-container canvas */
.chart-container canvas {
  background-color: transparent;
}

.bottom-panel {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 475px;
  height: 150px;
  border: 2px solid #d4af37;
  border-radius: 12px;
  background-color: rgba(48, 0, 48, 0.8); /* frosted overlay */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
  transition: all 0.3s ease;
  z-index: 1000;

  /* initial background image */
  background-image: url('prop1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bottom-panel:hover {
  border-color: #ffdd55;
  box-shadow: 0 0 25px rgba(255, 221, 85, 0.8);
}