/* =========================================================
   WOW PACK v2 — 20+ micro-effects, zero HTML changes
   Scoped to MkDocs content so it won't leak.
   =======================================================*/
:root{
  --wow-gold:#ffd86a;
  --wow-gold-2:#ffcc66;
  --wow-cyan:#7dd3fc;
  --wow-violet:#a78bfa;
  --wow-ink:rgba(0,0,0,.55);
  --wow-ink-2:rgba(0,0,0,.35);
  --wow-line:rgba(160,190,255,.28);
  --wow-mid:rgba(255,255,255,.06);
}

/* (1) Page vignette */
.md-content{
  position:relative;
}
.md-content::before{
  content:""; position:fixed; inset:-20vmin;
  pointer-events:none; z-index:0;
  background:radial-gradient(120vmin 100vmin at 50% -10%,
    rgba(255,255,255,.05), transparent 60%),
    radial-gradient(120vmin 100vmin at 50% 110%, rgba(0,0,0,.35), transparent 60%);
}

/* (2) Neon gradient titles + (3) animated underline */
.md-typeset h1, .md-typeset h2{
  position:relative; z-index:1;
  background:linear-gradient(90deg,var(--wow-violet),var(--wow-cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.35px; font-weight:900;
}
.md-typeset h1::after, .md-typeset h2::after{
  content:""; display:block; height:2px; margin:.35rem 0 0;
  background:linear-gradient(90deg,transparent,var(--wow-violet),var(--wow-gold),transparent);
  filter:drop-shadow(0 0 8px rgba(255,216,106,.45));
  animation:underlineFlow 7s linear infinite;
}
@keyframes underlineFlow{ from{background-position:-200% 0} to{background-position:200% 0} }

/* (4) Row aura glow */
:where(.md-typeset) .carousel-craft{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; padding:16px 10px 20px; z-index:1;
  animation:popIn .6s cubic-bezier(.2,.7,.2,1.1) both;
}
@keyframes popIn{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{ opacity:1; transform:none;} }
:where(.md-typeset) .carousel-craft::before{
  content:""; position:absolute; inset:-10px;
  background:radial-gradient(90% 70% at 50% 30%, rgba(255,255,255,.05), transparent 65%);
  pointer-events:none;
}

/* (5) Glass cards + (6) hover lift + (7) gradient border sweep */
:where(.md-typeset) .cc-card,
:where(.md-typeset) .cc-result{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:132px; gap:8px; padding:16px 18px;
  border-radius:16px; border:1px solid var(--wow-line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter:saturate(140%) blur(2px);
  box-shadow:inset 0 1px 0 var(--wow-mid), 0 14px 26px var(--wow-ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
:where(.md-typeset) .cc-card:hover{
  transform:translateY(-2px) scale(1.02);
  border-color:rgba(160,190,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 20px 44px var(--wow-ink);
}
:where(.md-typeset) .cc-card::before,
:where(.md-typeset) .cc-result::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background:conic-gradient(from 0deg, rgba(255,255,255,.0), rgba(160,190,255,.35), rgba(255,255,255,.0));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; animation:borderSpin 8s linear infinite;
  pointer-events:none;
}
@keyframes borderSpin{ to { transform:rotate(360deg); } }

/* (8) Result card premium mode + shimmer + (9) sparkle dust */
:where(.md-typeset) .cc-result{
  min-width:220px; padding:20px 26px;
  border:1px solid rgba(255,216,106,.66);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.06), rgba(160,190,255,.10) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:inset 0 0 18px rgba(255,255,255,.07), 0 24px 52px var(--wow-ink);
}
:where(.md-typeset) .cc-result::after{
  content:""; position:absolute; inset:-140% -30%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.12) 45%, transparent 55%);
  transform:rotate(8deg); animation:resultSweep 5s linear infinite;
  pointer-events:none;
}
@keyframes resultSweep { to { transform:translateX(40%) rotate(8deg); } }
:where(.md-typeset) .cc-result .cc-label::after{
  content:""; position:absolute; left:10%; top:-30%;
  width:140%; height:160%;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.8px 1.8px at 40% 70%, rgba(255,255,255,.5), transparent);
  filter:blur(.2px); opacity:.35; animation:twinkle 6s linear infinite;
  pointer-events:none;
}
@keyframes twinkle{ 50%{ transform:translateY(2px); opacity:.5 } }

/* (10) Labels: ultra weight + neon sheen */
:where(.md-typeset) .cc-label{
  position:relative; font-weight:900; font-size:13px; letter-spacing:.28px;
  color:#eaf1ff; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
:where(.md-typeset) .cc-label::before{
  content:""; position:absolute; inset:auto 0 -2px 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:.5;
}

/* (11) Separators: gradient + pulse */
:where(.md-typeset) .cc-sep{
  font-weight:900; font-size:24px; line-height:1; padding:0 6px;
  background:linear-gradient(90deg,#9bc1ff,var(--wow-gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 10px rgba(155,193,255,.25);
  animation:sepPulse 2.8s ease-in-out infinite;
}
@keyframes sepPulse{ 50%{ filter:drop-shadow(0 0 10px rgba(255,216,106,.35)); } }

/* (12) Jewels row – no boxes + hover pop */
:where(.md-typeset) .carousel-craft.jewels .cc-card{
  background:none !important; border:none !important; box-shadow:none !important;
  padding:4px 6px !important; min-width:auto !important;
}
:where(.md-typeset) .carousel-craft.jewels img{
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
  transition:transform .15s ease, filter .15s ease;
}
:where(.md-typeset) .carousel-craft.jewels img:hover{
  transform:translateY(-2px) scale(1.06);
  filter:drop-shadow(0 10px 20px rgba(255,216,106,.35));
}

/* (13) Force icon size & cleanliness */
:where(.md-typeset) .carousel-craft img{
  width:42px !important; height:42px !important;
  image-rendering:auto; mix-blend-mode:normal !important; opacity:1 !important;
}

/* (14) Active press micro-interaction */
:where(.md-typeset) .cc-card:active{ transform:translateY(0) scale(.98); }
:where(.md-typeset) .cc-result:active{ transform:translateY(0) scale(.99); }

/* (15) Soft grid sheen behind content */
.md-main__inner::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60vmin 60vmin at 10% 10%, rgba(255,255,255,.02), transparent 70%),
             radial-gradient(60vmin 60vmin at 90% 20%, rgba(255,255,255,.02), transparent 70%);
}

/* (16) Result image golden halo */
:where(.md-typeset) .cc-result img{
  filter:drop-shadow(0 0 12px rgba(255,216,106,.35));
}

/* (17) Card tilt */
:where(.md-typeset) .cc-card:hover{ transform:perspective(700px) rotateX(2deg) rotateY(-2deg) translateY(-2px) scale(1.02); }
:where(.md-typeset) .cc-result:hover{ transform:perspective(700px) rotateX(1.5deg) rotateY(1.5deg) translateY(-2px) }

/* (18) Responsive layout */
@media (max-width: 880px){
  :where(.md-typeset) .cc-card{ min-width:120px; padding:14px 16px; }
  :where(.md-typeset) .cc-result{ min-width:200px; padding:18px 22px; }
  :where(.md-typeset) .carousel-craft{ gap:14px; }
}

/* (19) Accessibility focus ring */
:where(.md-typeset) .cc-card:focus-within,
:where(.md-typeset) .cc-result:focus-within{
  outline:2px solid rgba(125,211,252,.55); outline-offset:3px;
  border-color:rgba(125,211,252,.55);
}

/* (20) Subtle section divider polish */
.md-typeset hr{
  height:2px; border:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin:1.25rem 0 1rem;
}\n\n
/* ==== Page-level anti-clipping for tooltips ==== */
html, body,
.md-main, .md-main__inner,
.md-content, .md-content__inner,
.md-grid, .md-typeset, .md-container,
.page, .page-wrap, .wrapper {
  overflow: visible !important;
}


/* ==== ENFORCE hover-only tooltip + absolute positioning ==== */
.cc-card.cc-tip{ position: relative !important; overflow: visible !important; }
.cc-card.cc-tip .cc-tipbox{
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 14px) !important;
  transform: translate(-50%, 8px) !important;
  display: none !important;            /* NEVER take layout space */
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 10000 !important;
}
.cc-card.cc-tip:hover .cc-tipbox,
.cc-card.cc-tip:focus .cc-tipbox,
.cc-card.cc-tip:focus-visible .cc-tipbox{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

/* Parent wrappers must not clip */
.carousel-craft, .carousel-craft *, .md-content, .md-content *{
  overflow: visible !important;
}


/* ===== Scoped: Golden Arch jewels rich tooltip (hover, below) ===== */
.carousel-craft.jewels .cc-card.cc-tip{ position:relative; overflow:visible; }

.carousel-craft.jewels .cc-card.cc-tip .cc-tipbox{
  position:absolute;
  left: 50%; transform: translate(-50%, 8px);
  display:none;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  z-index:1100;
  width:320px;
  max-width:min(90vw, 360px);
  padding:14px 16px 16px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(10,10,12,.96), rgba(12,12,14,.92));
  border:1px solid var(--wow-line, rgba(255,255,255,.08));
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
  text-align:center;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
  line-height:1.35;
  box-sizing:border-box;
}

.carousel-craft.jewels .cc-card.cc-tip:hover .cc-tipbox,
.carousel-craft.jewels .cc-card.cc-tip:focus .cc-tipbox,
.carousel-craft.jewels .cc-card.cc-tip:focus-visible .cc-tipbox{
  display:block;
  visibility:visible;
  opacity:1;
  transform: translate(-50%, 0);
}

.carousel-craft.jewels .cc-card.cc-tip .cc-tipbox::before{
  content:"";
  position:absolute;
  left:50%;
  top:-6px;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-bottom-color:rgba(10,10,12,.96);
}

.carousel-craft.jewels .cc-tipbox .cc-tipbox-inner{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.carousel-craft.jewels .cc-tipbox .cc-tip-icon{ width:28px; height:28px; object-fit:contain; opacity:.95; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.carousel-craft.jewels .cc-tipbox .cc-tip-title{ font-weight:800; letter-spacing:.2px; margin-top:2px; }
.carousel-craft.jewels .cc-tipbox .cc-tip-desc{ font-weight:700; color: var(--wow-gold, #ffd54a); }
.carousel-craft.jewels .cc-tipbox .cc-tip-note{ font-weight:700; color: var(--wow-sky, #7dc9ff); }


/* ==== Ensure Golden Arch tooltips show even near page edges ==== */
.carousel-craft.jewels .cc-card.cc-tip .cc-tipbox{
  max-width: 95vw;                /* responsive width */
  white-space: normal;
}
/* prevent clipping by ancestors */
.md-main, .md-main__inner,
.md-content, .md-content__inner,
.md-grid, .md-typeset, .md-container{
  overflow: visible !important;
}
/* if tooltip would go off left/right edge, adjust */
.carousel-craft.jewels .cc-card.cc-tip .cc-tipbox{
  transform:translate(-50%, 8px);
}
@media (max-width: 500px){
  .carousel-craft.jewels .cc-card.cc-tip .cc-tipbox{
    left: 50%; transform: translate(-50%, 8px);
  }
}


/* Keep tooltips inside page edges for edge cards */
.carousel-craft.jewels .cc-card:first-of-type .cc-tipbox{
  left: 12px;
  right: auto;
  transform: translate(0, 8px);
}
.carousel-craft.jewels .cc-card:first-of-type:hover .cc-tipbox,
.carousel-craft.jewels .cc-card:first-of-type:focus .cc-tipbox,
.carousel-craft.jewels .cc-card:first-of-type:focus-visible .cc-tipbox{
  transform: translate(0, 0);
}
.carousel-craft.jewels .cc-card:first-of-type .cc-tipbox::before{
  left: 36px;
  transform: none;
}

.carousel-craft.jewels .cc-card:last-of-type .cc-tipbox{
  left: auto;
  right: 12px;
  transform: translate(0, 8px);
}
.carousel-craft.jewels .cc-card:last-of-type:hover .cc-tipbox,
.carousel-craft.jewels .cc-card:last-of-type:focus .cc-tipbox,
.carousel-craft.jewels .cc-card:last-of-type:focus-visible .cc-tipbox{
  transform: translate(0, 0);
}
.carousel-craft.jewels .cc-card:last-of-type .cc-tipbox::before{
  left: auto;
  right: 36px;
  transform: none;
}


/* ==== Golden Arch jewels: stable below-left tooltip (no clipping) ==== */
.carousel-craft.jewels .cc-card.cc-tip { position: relative; overflow: visible; }
.carousel-craft.jewels .cc-card.cc-tip .cc-tipbox{
  left: 12px !important;
  right: auto !important;
  transform: translate(0, 8px) !important;
  width: 260px !important;
  max-width: min(90vw, 280px) !important;
}
.carousel-craft.jewels .cc-card.cc-tip:hover .cc-tipbox,
.carousel-craft.jewels .cc-card.cc-tip:focus .cc-tipbox,
.carousel-craft.jewels .cc-card.cc-tip:focus-visible .cc-tipbox{
  transform: translate(0, 0) !important;
}
.carousel-craft.jewels .cc-card.cc-tip .cc-tipbox::before{
  left: 36px !important;
  right: auto !important;
  transform: none !important;
}


/* Match 'Sphere Upgrades' violet for the Jewel of Excellent title */
.md-typeset .sphere-title{
  background: none !important;
  -webkit-background-clip: initial !important;
  color: var(--wow-violet, #a78bfa) !important;
  font-weight: 900;
}
.md-typeset .sphere-title::after{
  content:"";
  display:block; height:2px; margin:.35rem 0 0;
  background:linear-gradient(90deg,transparent,var(--wow-violet, #a78bfa),transparent);
  filter:drop-shadow(0 0 8px rgba(167,139,250,.35));
}