/* === UI POLISH V1 === */
:root{--ez-border:rgba(255,255,255,.14);--ez-text:rgba(255,255,255,.92);--ez-sub:rgba(255,255,255,.68);}
#zodiacGrid{gap:12px !important;}
.zCard{border:1px solid var(--ez-border);border-radius:16px;padding:12px 12px 10px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;cursor:pointer;}
.zCard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.26);box-shadow:0 10px 24px rgba(0,0,0,.35);}
.zCard.isActive{border-color:rgba(95,190,255,.55);box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 30px rgba(95,190,255,.18);}
.zTop{display:flex;align-items:center;gap:10px;}
.zGlyph{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:radial-gradient(circle at 30% 30%,rgba(95,190,255,.22),rgba(255,255,255,.06));font-size:24px;line-height:1;color:var(--ez-text);}
.zMeta .zName{font-weight:800;font-size:15px;color:var(--ez-text);letter-spacing:.2px;}
.zMeta .zDates{margin-top:2px;font-size:12px;color:var(--ez-sub);}
#readingBody{white-space:pre-wrap !important;line-height:1.5 !important;}

/* === Crystal Ball POP V1 === */
#orb, .orb, #crystal, .crystal, #crystalBall, .crystalBall {
  filter: saturate(1.12) contrast(1.10) drop-shadow(0 18px 40px rgba(0,0,0,.45));
  transform: translateZ(0);
}

#orb::before, .orb::before, #crystal::before, .crystal::before, #crystalBall::before, .crystalBall::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(120,210,255,.28), rgba(120,210,255,0) 55%);
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes ez_pulse_glow {
  0%   { opacity: .45; transform: scale(.98); }
  50%  { opacity: .85; transform: scale(1.02); }
  100% { opacity: .45; transform: scale(.98); }
}

#orb::after, .orb::after, #crystal::after, .crystal::after, #crystalBall::after, .crystalBall::after {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 55%, rgba(95,190,255,.22), rgba(95,190,255,0) 60%);
  pointer-events: none;
  filter: blur(2px);
  animation: ez_pulse_glow 2.8s ease-in-out infinite;
  opacity: .55;
}

/* === Crystal Ball POP V2 (state boost) === */
#orbAnswer:not(:empty) ~ #orb,
#orbAnswer:not(:empty) ~ .orb,
.orb:has(#orbAnswer:not(:empty)),
.crystal:has(#orbAnswer:not(:empty)) {
  filter: saturate(1.18) contrast(1.14) drop-shadow(0 22px 55px rgba(0,0,0,.55));
}

#orbHint,
.orbHint {
  text-shadow: 0 0 18px rgba(95,190,255,.38);
}

/* === Crystal Ball POP V3 (targeted) === */
#orbWrap{
  position: relative;
  isolation: isolate;
}

#orbWrap::before{
  content:"";
  position:absolute;
  inset:-28px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 55%, rgba(95,190,255,.25), rgba(95,190,255,0) 62%);
  filter: blur(1px);
  opacity: .70;
  z-index: 0;
  pointer-events:none;
}

@keyframes ez_orb_breathe {
  0%   { transform: scale(.985); opacity:.55; }
  50%  { transform: scale(1.02); opacity:.92; }
  100% { transform: scale(.985); opacity:.55; }
}

#orbWrap::after{
  content:"";
  position:absolute;
  inset:-38px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(120,210,255,.30), rgba(120,210,255,0) 58%);
  filter: blur(6px);
  opacity: .55;
  z-index: 0;
  pointer-events:none;
  animation: ez_orb_breathe 2.7s ease-in-out infinite;
}

/* Canvas itself */
#orb{
  position: relative;
  z-index: 1;
  filter: saturate(1.18) contrast(1.12) drop-shadow(0 22px 55px rgba(0,0,0,.55));
}

/* Glass highlight + sheen */
.orbGlass{
  position:absolute;
  inset: 10px;
  border-radius: 999px;
  z-index: 2;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.22), rgba(255,255,255,0) 35%),
    radial-gradient(circle at 65% 78%, rgba(95,190,255,.18), rgba(95,190,255,0) 45%);
  mix-blend-mode: screen;
}

/* Rim glow */
.orbRim{
  position:absolute;
  inset: 4px;
  border-radius: 999px;
  z-index: 3;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.10),
    inset 0 0 22px rgba(95,190,255,.16),
    0 0 22px rgba(95,190,255,.20),
    0 18px 55px rgba(0,0,0,.42);
}

/* Text glow */
#orbHint, .orbHint{
  text-shadow: 0 0 22px rgba(95,190,255,.40);
}

/* When answer is present, boost the whole aura */
#orbAnswer:not(:empty) ~ .orbGlass,
#orbAnswer:not(:empty) ~ .orbRim{
  filter: brightness(1.08);
}

#orbAnswer:not(:empty) ~ .orbRim{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.14),
    inset 0 0 30px rgba(95,190,255,.20),
    0 0 28px rgba(95,190,255,.28),
    0 22px 65px rgba(0,0,0,.50);
}


/* === Orb Answer POP === */
#orbAnswer{
  text-shadow:
    0 0 12px rgba(95,190,255,.35),
    0 0 28px rgba(95,190,255,.18);
}

/* === Crystal Ball COLOR POP V4 === */

/* Animated aurora inside the crystal */
@keyframes ez_aurora_shift {
  0%   { filter: hue-rotate(0deg); }
  50%  { filter: hue-rotate(35deg); }
  100% { filter: hue-rotate(0deg); }
}

/* Color field behind the orb */
#orbWrap::before{
  background:
    radial-gradient(circle at 30% 25%, rgba(120,210,255,.35), rgba(120,210,255,0) 40%),
    radial-gradient(circle at 70% 65%, rgba(170,110,255,.28), rgba(170,110,255,0) 45%),
    radial-gradient(circle at 50% 80%, rgba(95,255,200,.18), rgba(95,255,200,0) 55%);
  animation: ez_aurora_shift 6s ease-in-out infinite;
}

/* Canvas color boost */
#orb{
  filter:
    saturate(1.28)
    contrast(1.14)
    drop-shadow(0 24px 60px rgba(0,0,0,.55));
}

/* Glass = prismatic sheen */
.orbGlass{
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.26), rgba(255,255,255,0) 35%),
    radial-gradient(circle at 62% 38%, rgba(140,210,255,.22), rgba(140,210,255,0) 42%),
    radial-gradient(circle at 55% 78%, rgba(190,120,255,.20), rgba(190,120,255,0) 48%);
  mix-blend-mode: screen;
}

/* Rim glow with color */
.orbRim{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.14),
    inset 0 0 30px rgba(120,200,255,.18),
    inset 0 0 55px rgba(180,120,255,.14),
    0 0 28px rgba(120,200,255,.28),
    0 22px 65px rgba(0,0,0,.50);
}

/* When answer appears = COLOR SURGE */
#orbAnswer:not(:empty) ~ #orb,
#orbAnswer:not(:empty) ~ .orbGlass,
#orbAnswer:not(:empty) ~ .orbRim{
  filter:
    saturate(1.45)
    contrast(1.18)
    brightness(1.05);
}

/* Answer text hologram feel */
#orbAnswer{
  color: rgba(210,240,255,.95);
  text-shadow:
    0 0 14px rgba(120,200,255,.45),
    0 0 32px rgba(180,120,255,.30);
}


/* === FORCE COLOR (guaranteed visible) === */
#orbWrap::before{
  background:
    radial-gradient(circle at 30% 25%, rgba(120,210,255,.55), rgba(120,210,255,0) 42%),
    radial-gradient(circle at 70% 65%, rgba(190,120,255,.45), rgba(190,120,255,0) 48%),
    radial-gradient(circle at 50% 80%, rgba(95,255,200,.30), rgba(95,255,200,0) 60%) !important;
  opacity: .95 !important;
  animation: ez_aurora_shift 5.5s ease-in-out infinite !important;
}

#orb{
  filter: saturate(1.55) contrast(1.22) drop-shadow(0 26px 70px rgba(0,0,0,.6)) !important;
}

.orbGlass{
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.30), rgba(255,255,255,0) 35%),
    radial-gradient(circle at 62% 38%, rgba(140,210,255,.35), rgba(140,210,255,0) 45%),
    radial-gradient(circle at 55% 78%, rgba(210,130,255,.30), rgba(210,130,255,0) 50%) !important;
}

.orbRim{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 0 38px rgba(120,200,255,.25),
    inset 0 0 70px rgba(180,120,255,.20),
    0 0 34px rgba(120,200,255,.34),
    0 0 40px rgba(180,120,255,.22),
    0 24px 75px rgba(0,0,0,.55) !important;
}

#orbAnswer{
  color: rgba(220,245,255,.98) !important;
  text-shadow: 0 0 18px rgba(120,200,255,.55), 0 0 40px rgba(180,120,255,.35) !important;
}

/* === Crystal Color Pack (CLEAN) === */
@keyframes ez_aurora_shift { 0%{filter:hue-rotate(0deg);} 50%{filter:hue-rotate(45deg);} 100%{filter:hue-rotate(0deg);} }
@keyframes ez_orb_breathe { 0%{transform:scale(.985);opacity:.55;} 50%{transform:scale(1.02);opacity:.92;} 100%{transform:scale(.985);opacity:.55;} }

#orbWrap{ position:relative; isolation:isolate; }
#orbWrap::before{
  content:"";
  position:absolute;
  inset:-28px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 25%, rgba(120,210,255,.55), rgba(120,210,255,0) 42%),
    radial-gradient(circle at 70% 65%, rgba(190,120,255,.45), rgba(190,120,255,0) 48%),
    radial-gradient(circle at 50% 80%, rgba(95,255,200,.30), rgba(95,255,200,0) 60%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
  animation: ez_aurora_shift 5.5s ease-in-out infinite;
}
#orbWrap::after{
  content:"";
  position:absolute;
  inset:-38px;
  border-radius:999px;
  background: radial-gradient(circle at 35% 30%, rgba(120,210,255,.30), rgba(120,210,255,0) 58%);
  filter: blur(6px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
  animation: ez_orb_breathe 2.7s ease-in-out infinite;
}

#orb{
  position:relative;
  z-index:1;
  filter: saturate(1.55) contrast(1.22) drop-shadow(0 26px 70px rgba(0,0,0,.60));
}

.orbGlass{
  position:absolute;
  inset:10px;
  border-radius:999px;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.30), rgba(255,255,255,0) 35%),
    radial-gradient(circle at 62% 38%, rgba(140,210,255,.35), rgba(140,210,255,0) 45%),
    radial-gradient(circle at 55% 78%, rgba(210,130,255,.30), rgba(210,130,255,0) 50%);
  mix-blend-mode:screen;
}

.orbRim{
  position:absolute;
  inset:4px;
  border-radius:999px;
  z-index:3;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 0 38px rgba(120,200,255,.25),
    inset 0 0 70px rgba(180,120,255,.20),
    0 0 34px rgba(120,200,255,.34),
    0 0 40px rgba(180,120,255,.22),
    0 24px 75px rgba(0,0,0,.55);
}

#orbHint{ text-shadow: 0 0 22px rgba(95,190,255,.40); }
#orbAnswer{
  color: rgba(220,245,255,.98);
  text-shadow: 0 0 18px rgba(120,200,255,.55), 0 0 40px rgba(180,120,255,.35);
}

/* Answer present => surge */
#orbAnswer:not(:empty) ~ #orb,
#orbAnswer:not(:empty) ~ .orbGlass,
#orbAnswer:not(:empty) ~ .orbRim{
  filter: saturate(1.75) contrast(1.28) brightness(1.06);
}

/* =========================================================
   MOBILE CENTERING FIX (SHIP-BLOCKER)
   Ensures crystal ball is TRUE centered on phones
   ========================================================= */

@media (max-width: 768px){

  /* Center the entire orb system using viewport */
  #orbWrap{
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Force the canvas itself dead-center */
  #orb{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Align all orb layers */
  .orbGlass,
  .orbRim,
  #orbWrap::before{
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Center hint + answer text */
  #orbHint,
  #orbAnswer{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 90vw;
  }
}

/* =========================================================
   END MOBILE CENTER FIX
   ========================================================= */

/* =========================================================
   MOBILE CENTER FIX V2 (override V1)
   - prevents "bigger" orb
   - centers within layout
   - caps width so it fits phones
   ========================================================= */
@media (max-width: 768px){

  /* Undo the V1 viewport-stretch behavior */
  #orbWrap{
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
  }

  /* Center + cap size */
  #orbWrap{
    max-width: 92vw !important;
    margin: 0 auto !important;
  }

  /* Keep the canvas from growing too big */
  #orb{
    display:block !important;
    margin: 0 auto !important;
    left: auto !important;
    transform: none !important;
    width: 92vw !important;
    max-width: 420px !important;
    height: auto !important;
  }

  /* Ensure overlays follow the orb size */
  .orbGlass, .orbRim{
    left: auto !important;
    transform: none !important;
  }

  /* Keep glow layers from expanding too far */
  #orbWrap::before, #orbWrap::after{
    inset: -18px !important;
  }

  /* Center hint/answer */
  #orbHint, #orbAnswer{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 92vw !important;
  }
}

/* =========================================================
   MOBILE ORB SIZE LOCK V3 (HARD CAPS)
   Goal: phone-ready portrait + landscape, never huge
   ========================================================= */

/* Base: always center orb wrap */
#orbWrap{
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Portrait phones */
@media (max-width: 768px) and (orientation: portrait){
  #orbWrap{
    width: clamp(240px, 82vw, 340px) !important;
    max-width: 340px !important;
  }
  #orb{
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    display:block !important;
    margin: 0 auto !important;
  }
  .orbGlass, .orbRim{
    inset: 10px !important; /* keeps overlays proportional */
  }
  #orbWrap::before, #orbWrap::after{
    inset: -16px !important; /* keep glow tight on mobile */
  }
}

/* Landscape phones */
@media (max-width: 932px) and (orientation: landscape){
  #orbWrap{
    width: clamp(200px, 52vw, 260px) !important;
    max-width: 260px !important;
  }
  #orb{
    width: 100% !important;
    max-width: 260px !important;
    height: auto !important;
    display:block !important;
    margin: 0 auto !important;
  }
  .orbGlass, .orbRim{
    inset: 8px !important;
  }
  #orbWrap::before, #orbWrap::after{
    inset: -12px !important;
    opacity: .75 !important; /* less bloom in landscape */
  }
}

/* Prevent any older rules from forcing huge sizes */
@media (max-width: 932px){
  #orb{
    left: auto !important;
    transform: none !important;
  }
  #orbWrap{
    width: unset !important;
    max-width: unset !important;
  }
}

/* Re-assert our caps LAST */
@media (max-width: 768px) and (orientation: portrait){
  #orbWrap{ width: clamp(240px, 82vw, 340px) !important; max-width: 340px !important; }
  #orb{ max-width: 340px !important; }
}
@media (max-width: 932px) and (orientation: landscape){
  #orbWrap{ width: clamp(200px, 52vw, 260px) !important; max-width: 260px !important; }
  #orb{ max-width: 260px !important; }
}


/* === PORTRAIT HARD SIZE (wins last) === */
@media (max-width: 768px) and (orientation: portrait){
  #orbWrap{ width:280px !important; max-width:280px !important; margin:0 auto !important; }
  #orb{ width:280px !important; height:280px !important; max-width:280px !important; }
}

/* === CENTER STATUS OVERLAY (CLEAN) === */
#ezStatus{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
}
#ezStatus.on{ display: flex; }

#ezStatus .box{
  width: min(92vw, 520px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(10,14,30,.82), rgba(255,255,255,.06));
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 40px rgba(95,190,255,.22);
  padding: 18px 16px 14px;
  text-align: center;
}

#ezStatusSign{
  font-weight: 1000;
  letter-spacing: .9px;
  font-size: clamp(28px, 8vw, 46px);
  color: rgba(235,250,255,.98);
  text-shadow: 0 0 22px rgba(120,200,255,.40), 0 0 40px rgba(180,120,255,.22);
}

#ezStatusMsg{
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: .25px;
  color: rgba(255,255,255,.76);
  text-shadow: 0 0 16px rgba(95,190,255,.20);
}

/* === ANSWER POP (front + bright) === */
#orbAnswer{
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  color: rgba(240,252,255,.98) !important;
  text-shadow:
    0 0 18px rgba(120,220,255,.70),
    0 0 42px rgba(180,120,255,.35),
    0 10px 30px rgba(0,0,0,.55) !important;
}

/* add a soft “plate” behind the answer so it never looks gray */
#orbAnswer:not(:empty){
  padding: 10px 14px !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.20) !important;
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.10);
}

#orbHint{
  position: absolute !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content;
  max-width: 88%;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,.26) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(235,250,255,.92) !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  text-shadow: 0 0 18px rgba(120,220,255,.55) !important;
  z-index: 10 !important;
}

/* hide hint after first interaction */
body.ez_hint_off #orbHint{ display:none !important; }


/* hide when hint is dismissed */
body.ez_hint_off #orbHint{ display:none; }


/* place hint INSIDE orbWrap, top-center, with full width so it never clips */
#orbHint{
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: min(92%, 520px) !important;   /* prevents clipping */
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  padding: 10px 14px !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.32) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14) !important;

  color: rgba(240,252,255,.96) !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-shadow: 0 0 12px rgba(120,220,255,.55), 0 0 28px rgba(180,120,255,.22);
  z-index: 20 !important;
}

/* hide after first interaction */
body.ez_hint_off #orbHint{ display:none !important; }


/* place hint INSIDE orbWrap, top-center, with full width so it never clips */
#orbHint{
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: min(92%, 520px) !important;   /* prevents clipping */
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  padding: 10px 14px !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.32) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14) !important;

  color: rgba(240,252,255,.96) !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-shadow: 0 0 12px rgba(120,220,255,.55), 0 0 28px rgba(180,120,255,.22);
  z-index: 20 !important;
}

/* hide after first interaction */
body.ez_hint_off #orbHint{ display:none !important; }

/* === FINAL OVERRIDES: Hint lower + Answer brighter === */

/* Hint: bring it DOWN (closer to the center), like the answer band placement */
#orbHint{
  top: 44px !important;
  letter-spacing: .16em !important;
  background: rgba(0,0,0,.38) !important;
}

/* Answer: brighter + more front */
#orbAnswer{
  color: rgba(255,255,255,.99) !important;
  text-shadow:
    0 0 18px rgba(120,220,255,.85),
    0 0 44px rgba(180,120,255,.45),
    0 12px 34px rgba(0,0,0,.62) !important;
}

#orbAnswer:not(:empty){
  background: rgba(0,0,0,.30) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}



/* HINT: lower + no box */
#orbHint{
  top: 68px !important;               /* move DOWN more */
  width: auto !important;
  max-width: 92% !important;
  padding: 0 !important;              /* no pill */
  background: transparent !important; /* remove box */
  border: 0 !important;
  backdrop-filter: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;

  color: rgba(240,252,255,.96) !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  text-shadow:
    0 0 10px rgba(120,220,255,.70),
    0 0 26px rgba(180,120,255,.35),
    0 0 44px rgba(95,190,255,.18) !important;
}

/* ANSWER: bring it to life */
@keyframes ez_answer_pop {
  0%   { transform: translateY(6px) scale(.98); opacity: 0; filter: blur(2px); }
  55%  { transform: translateY(0)   scale(1.03); opacity: 1; filter: blur(0); }
  100% { transform: translateY(0)   scale(1.00); opacity: 1; filter: blur(0); }
}

#orbAnswer{
  font-weight: 1000 !important;
  letter-spacing: .20em !important;
  color: rgba(255,255,255,.995) !important;
  text-shadow:
    0 0 18px rgba(120,220,255,.95),
    0 0 48px rgba(180,120,255,.55),
    0 16px 40px rgba(0,0,0,.65) !important;
}

#orbAnswer:not(:empty){
  background: transparent !important;  /* no gray band */
  border: 0 !important;
  padding: 0 !important;

  animation: ez_answer_pop .55s ease-out 1;
}



/* === CRYSTAL HINT (FINAL) === */
#orbWrap{ position: relative; }

#orbHint{
  position: absolute !important;
  top: 78px !important;        /* THIS is the magic number */
  left: 50% !important;
  transform: translateX(-50%);
  background: none !important;
  border: none !important;
  padding: 0 !important;

  font-weight: 900;
  letter-spacing: .26em;
  color: rgba(210,245,255,.85);
  text-shadow:
    0 0 12px rgba(120,220,255,.55),
    0 0 28px rgba(120,220,255,.25);

  pointer-events: none;
}

/* === ANSWER COMES ALIVE === */
#orbAnswer{
  color: rgba(245,255,255,.98) !important;
  font-weight: 900;
  letter-spacing: .22em;
  text-shadow:
    0 0 22px rgba(160,240,255,.85),
    0 0 48px rgba(120,200,255,.55),
    0 0 90px rgba(90,160,255,.35);
  animation: crystalBloom .9s ease-out;
}

@keyframes crystalBloom{
  0%{
    opacity: 0;
    transform: scale(.92);
    text-shadow: none;
  }
  60%{
    opacity: 1;
    transform: scale(1.02);
  }
  100%{
    transform: scale(1);
  }
}

/* === ANSWER DOMINANT (beats hint, phone-safe) === */
#orbAnswer{
  color: #f8fdff !important;
  font-weight: 900 !important;
  letter-spacing: .28em !important;
  opacity: 1 !important;

  text-shadow:
    0 0 10px rgba(140,220,255,.95),
    0 0 28px rgba(120,200,255,.85),
    0 0 60px rgba(180,120,255,.55),
    0 18px 45px rgba(0,0,0,.55) !important;

  animation: crystalBloomStrong .95s ease-out 1 !important;
}

@keyframes crystalBloomStrong{
  0%{
    opacity: 0;
    transform: translateY(6px) scale(.96);
    filter: blur(1px);
  }
  55%{
    opacity: 1;
    transform: translateY(0) scale(1.04);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hint stays clean, but slightly less dominant than the answer */
#orbHint{
  color: rgba(220,245,255,.72) !important;
  text-shadow: 0 0 8px rgba(120,200,255,.45) !important;
}


/* === CRYSTAL_EYE_OVERLAY === */
/* Overlay eye core centered over the canvas without affecting layout */
#orbWrap{ position: relative; }
#eyeCore{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: auto;
  pointer-events:none;
  z-index: 5;
  opacity: 0.62;
  /* If the PNG has a dark background, this helps it blend */
  mix-blend-mode: soft-light;
  /* Keep it crisp */
  image-rendering: auto;
  filter: brightness(0.62) contrast(1.18) saturate(0.95);
}

/* Mobile tuning */
@media (max-width: 520px){
  #eyeCore{ width: 52%; opacity: 0.78; }
}
@media (max-width: 932px) and (orientation: landscape){
  #eyeCore{ width: 46%; opacity: 0.75; }
}

/* === ORB_OVERLAY_TEXT_READABLE === */
/* If the in-orb “answer” text is an HTML overlay, force it readable */
#orbWrap .orbText,
#orbWrap .orbMsg,
#orbWrap .orbPrompt,
#orbWrap .orbAnswer,
#orbWrap .msg,
#orbWrap .hint,
#orbWrap .overlay,
#orbWrap [data-orb-text]{
  opacity: 1 !important;
  color: rgba(245,250,255,0.96) !important;
  text-shadow:
    0 2px 14px rgba(0,0,0,0.92),
    0 0 3px rgba(0,0,0,0.92) !important;
  letter-spacing: 0.18em;
  font-weight: 700;
}

/* If it’s being washed out by blend/filters, keep it “normal” */
#orbWrap .orbText,
#orbWrap .orbMsg,
#orbWrap .overlay,
#orbWrap [data-orb-text]{
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* === MOBILE_PAGE_FIT_LOCK ===
   Fixes “whole page oversized” on phones:
   - forces 1-column stack
   - prevents horizontal overflow
   - stops iOS text autosize + input zoom
   Desktop remains unchanged.
*/
html, body{
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
input, textarea, select, button{ font-size:16px; }

/* Make sure nothing can exceed viewport width on mobile */
@media (max-width: 932px){
  *, *::before, *::after{ box-sizing: border-box; }
  img, canvas, svg{ max-width: 100%; height: auto; }
}

/* Force the main layout to stack on phones (portrait + landscape) */
@media (max-width: 932px){
  /* Common “2-panel” wrappers */
  .wrap, .container, .page, .layout, .grid, .columns, .row, .main{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* If your main shell uses flex/grid for two columns, stack it */
  .layout, .columns, .row, .main{
    display: block !important;
  }

  /* Catch flex-based two-column layouts */
  .layout[style*="display:flex"],
  .columns[style*="display:flex"],
  .row[style*="display:flex"],
  .main[style*="display:flex"]{
    flex-direction: column !important;
  }

  /* Generic: any direct children that were half-width become full width */
  .layout > *, .columns > *, .row > *, .main > *{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* If you have named panels (left/right), make them full width on mobile */
@media (max-width: 932px){
  .left, .right, .panel, .card, .pane{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* === MOBILE_FIT_SPECIFIC_BLOCKS ===
   Fix “whole page oversized” by clamping EACH real section to viewport width.
   Desktop unchanged.
*/
@media (max-width: 932px){
  html, body{
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  *, *::before, *::after{ box-sizing: border-box; }

  /* Clamp every main block to viewport */
  .title, .sub,
  #orbWrap, .orbWrap,
  .askBox,
  .smallNote,
  .zTitle,
  #zGrid, .zGrid,
  .reading,
  .powered{
    width: min(92vw, 520px) !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ensure children don’t force overflow */
  .askBox *, .reading *, .powered *, .zGrid *{
    max-width: 100% !important;
  }

  /* Buttons/inputs: don’t cause iOS zoom or overflow */
  input, textarea, select, button{
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* Reading section often has padding that pushes width */
  .reading{ padding-left: 14px !important; padding-right: 14px !important; }
}

/* Landscape phones: tighter so it doesn’t feel “giant” */
@media (max-width: 932px) and (orientation: landscape){
  .title, .sub,
  #orbWrap, .orbWrap,
  .askBox,
  .smallNote,
  .zTitle,
  #zGrid, .zGrid,
  .reading,
  .powered{
    width: min(86vw, 480px) !important;
    max-width: 86vw !important;
  }
}

/* === MOBILE_GRID_AND_LANDSCAPE_ORB_LOCK ===
   Fixes:
   - zGrid columns on phones (2-up)
   - iOS landscape orb distortion (force true square)
   Keeps portrait look intact.
*/

/* PHONE PORTRAIT: keep your orb sizing, but force 2-column zodiac grid */
@media (max-width: 520px) and (orientation: portrait){
  #zGrid, .zGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(92vw, 520px) !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* PHONE LANDSCAPE: orb must be a true square or it will look stretched */
@media (max-width: 932px) and (orientation: landscape){

  /* Keep page from feeling “giant” */
  .title, .sub, .askBox, .smallNote, .zTitle, #zGrid, .zGrid, .reading, .powered{
    width: min(92vw, 520px) !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Force orb wrap to a square with a safe cap */
  #orbWrap, .orbWrap{
    width: min(260px, 62vw) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;   /* modern browsers */
  }

  /* Some iOS builds ignore aspect-ratio in edge cases; enforce height = width */
  #orbWrap, .orbWrap{
    max-height: none !important;
  }

  /* Canvas must match square box (prevents distortion) */
  #orbCanvas, canvas#orbCanvas{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Eye overlay stays proportional */
  #eyeCore{
    width: 80% !important;
  }

  /* Zodiac grid in landscape should still be 2-up (readable) */
  #zGrid, .zGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* === MOBILE_ZGRID_ONE_COLUMN ===
   Phones: 1 column so sign cards are larger/readable.
   Desktop unchanged.
*/
@media (max-width: 932px){
  #zGrid, .zGrid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Make the cards feel tappable + “normal” size */
  #zGrid .zCard, .zGrid .zCard{
    min-height: 62px !important;
    padding: 12px 14px !important;
  }
}