/* POXY Sky Open ritual — Stage 7 from poxy-dashboard.html */
body.poxy-sky-app-active #pxSkyOpen .page-head{margin-bottom:22px}
body.poxy-sky-app-active #pxSkyOpen .open-intro{margin-bottom:22px}
body.poxy-sky-app-active #pxSkyOpen .boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
body.poxy-sky-app-active #pxSkyOpen .box-card{text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 18px;cursor:pointer;transition:transform .18s,border-color .2s;box-shadow:var(--shadow);font-family:var(--font);position:relative;overflow:hidden;-webkit-appearance:none;appearance:none;color:inherit}
body.poxy-sky-app-active #pxSkyOpen .box-3d{width:90px;height:78px;margin:6px auto 16px;position:relative;perspective:300px}
body.poxy-sky-app-active #pxSkyOpen .box-body{position:absolute;left:14px;right:14px;bottom:0;height:52px;border-radius:6px 6px 9px 9px;background:linear-gradient(165deg,var(--b1),var(--b2));box-shadow:0 10px 22px color-mix(in srgb,var(--b1) 50%,transparent)}
body.poxy-sky-app-active #pxSkyOpen .box-lid{position:absolute;left:8px;right:8px;top:8px;height:22px;border-radius:7px;background:linear-gradient(165deg,var(--b1),var(--b2));filter:brightness(1.12);transition:transform .3s var(--ease);transform-origin:top}
body.poxy-sky-app-active #pxSkyOpen .box-mk{position:absolute;left:50%;top:34px;transform:translateX(-50%);width:26px;height:26px;background:rgba(255,255,255,.9);-webkit-mask:var(--cardmask) center/contain no-repeat;mask:var(--cardmask) center/contain no-repeat;z-index:2}
body.poxy-sky-app-active #pxSkyOpen .box-name{font-size:17px;font-weight:700;color:var(--text-strong);letter-spacing:-.01em}
body.poxy-sky-app-active #pxSkyOpen .box-odds{font-size:12.5px;color:var(--text-dim);margin:4px 0 14px}
body.poxy-sky-app-active #pxSkyOpen .box-price{display:inline-flex;align-items:center;font-size:15px;font-weight:700;color:var(--text-strong);background:var(--glass);border:1px solid var(--border);padding:7px 14px;border-radius:999px}
#pxSkyRitual .ritual-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:18px}
#pxSkyRitual .stage-box{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
#pxSkyRitual .stage-hint{font-size:15px;color:var(--text-dim)}
#pxSkyRitual .stage-title{font-size:22px;font-weight:700;color:var(--text-strong);letter-spacing:-.02em}
#pxSkyRitual .big-box{width:160px;height:140px;position:relative;cursor:pointer;perspective:500px}
#pxSkyRitual .bb-body{position:absolute;left:22px;right:22px;bottom:0;height:96px;border-radius:10px 10px 16px 16px;background:linear-gradient(165deg,var(--rb1),var(--rb2));box-shadow:0 24px 50px color-mix(in srgb,var(--rb1) 55%,transparent)}
#pxSkyRitual .bb-lid{position:absolute;left:12px;right:12px;top:6px;height:40px;border-radius:12px;background:linear-gradient(165deg,var(--rb1),var(--rb2));filter:brightness(1.12);transform-origin:top;transition:transform .5s var(--ease)}
#pxSkyRitual .bb-mk{position:absolute;left:50%;top:54px;transform:translateX(-50%);width:48px;height:48px;background:rgba(255,255,255,.92);-webkit-mask:var(--cardmask) center/contain no-repeat;mask:var(--cardmask) center/contain no-repeat;z-index:2}
#pxSkyRitual .gen-frame{width:240px;height:300px;border-radius:var(--r-lg);position:relative;overflow:hidden;
    background:radial-gradient(120% 80% at 50% 14%,color-mix(in srgb,var(--sky-500) 30%,var(--bg-2)),var(--bg-2));
    border:1px solid var(--border);display:grid;place-items:center;box-shadow:var(--shadow)}
#pxSkyRitual #pxSkyResultFrame{
    background:radial-gradient(120% 80% at 50% 14%,color-mix(in srgb,var(--mr,var(--sky-500)) 30%,var(--bg-2)),var(--bg-2))}
#pxSkyRitual .frog{width:78px;height:92px;position:relative}
#pxSkyRitual .frog .fb{position:absolute;inset:0;border-radius:46% 46% 42% 42%;background:linear-gradient(165deg,var(--c1),var(--c2));box-shadow:inset -5px -8px 0 rgba(0,0,0,.10),0 8px 18px rgba(0,0,0,.28)}
#pxSkyRitual .frog .fe{position:absolute;top:15px;width:22px;height:22px;border-radius:50%;background:#fff}
#pxSkyRitual .frog .fe.l{left:10px}
#pxSkyRitual .frog .fe.r{right:10px}
#pxSkyRitual .frog .fe::after{content:"";position:absolute;top:6px;left:6px;width:9px;height:9px;border-radius:50%;background:#1c1c1e}
#pxSkyRitual .frog .fm{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:32px;height:16px;background:var(--belly);border-radius:0 0 16px 16px}
#pxSkyRitual #pxSkyResultFig {
  display: grid;
  place-items: center;
  min-height: 120px;
}

#pxSkyRitual #pxSkyResultFig .frog {
  transform: scale(1.08);
}

#pxSkyRitual .gen-reveal{position:relative;opacity:0;z-index:2}
#pxSkyRitual .gen-sweep{position:absolute;left:0;right:0;height:40px;top:0;z-index:4;pointer-events:none;
    background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--sky-300) 80%,transparent),transparent);opacity:0}
#pxSkyRitual .gen-frame .ring{position:absolute;inset:14px;border-radius:16px;border:1.5px solid color-mix(in srgb,var(--sky-500) 32%,transparent);z-index:3}
#pxSkyRitual .result{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
#pxSkyRitual .rname{font-size:24px;font-weight:700;color:var(--text-strong);letter-spacing:-.02em}
#pxSkyRitual .rrar{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
#pxSkyRitual .result-actions{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}
body.poxy-sky-app-active #pxSkyOpen .btn{font:600 14px var(--font);cursor:pointer;padding:11px 18px;border-radius:12px;border:1px solid transparent;transition:transform .15s,filter .2s;display:inline-flex;align-items:center;gap:8px}
body.poxy-sky-app-active #pxSkyOpen .btn-primary{background:var(--btn-bg);color:var(--btn-text)}
body.poxy-sky-app-active #pxSkyOpen .btn-glass{background:var(--glass-strong);color:var(--text);border-color:var(--border)}
body.poxy-sky-app-active #pxSkyOpen .coin-sm{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-right:2px}

body.poxy-sky-app-active #pxOpenHooksPreserve,
body.poxy-sky-app-active #pxSkyOpen .px-open-spin-host {
  display: none !important;
}

body.poxy-sky-app-active #pxSkyOpenBoxes {
  margin-bottom: 8px;
}

body.poxy-sky-app-active #pxSkyOpen .px-sky-box-card.active {
  border-color: var(--sky-500) !important;
  transform: translateY(-4px);
}

body.poxy-sky-app-active #pxSkyOpen .px-sky-box-card.sold-out {
  opacity: 0.45;
  pointer-events: none;
}

#pxSkyRitual.px-sky-ritual {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#pxSkyRitual.px-sky-ritual.show {
  display: flex;
  animation: pxSkyFadeIn 0.3s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

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

@keyframes pxSkyReveal {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes pxSkySweep {
  0% { opacity: 1; top: -10%; }
  100% { opacity: 0; top: 100%; }
}

#pxSkyRitual .gen-frame.run .gen-reveal {
  animation: pxSkyReveal 2.4s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

#pxSkyRitual .gen-frame.run .gen-sweep {
  animation: pxSkySweep 2.4s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

#pxSkyRitual .stage-box,
#pxSkyRitual .result {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 420px;
}

#pxSkyRitual .stage-box {
  gap: 26px;
}

#pxSkyRitual .result {
  gap: 18px;
}

#pxSkyRitual .stage-box.is-active,
#pxSkyRitual .result.is-active {
  display: flex;
}

#pxSkyRitual #pxSkyStageGen.is-active {
  display: flex;
}

#pxSkyRitual #pxSkyStageGen {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

#pxSkyRitual .big-box.opening .bb-lid {
  transform: translateY(-30px) rotateX(50deg);
  opacity: 0;
  transition: transform 0.6s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), opacity 0.6s;
}

#pxSkyRitual .big-box.opening .bb-body {
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.6s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)) 0.1s;
}

#pxSkyRitual .ritual-close {
  border: none;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
}

#pxSkyRitual .btn {
  font: 600 14px var(--font);
  cursor: pointer;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: transform 0.15s, filter 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#pxSkyRitual .btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
}

#pxSkyRitual .btn-glass {
  background: var(--glass-strong);
  color: var(--text);
  border-color: var(--border);
}

body.poxy-sky-app-active #pxSkyOpen .box-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 0, color-mix(in srgb, var(--b1) 18%, transparent), transparent 70%);
  pointer-events: none;
}

body.poxy-sky-app-active #pxSkyOpen .box-card:hover {
  transform: translateY(-4px);
  border-color: var(--b1);
}

body.poxy-sky-app-active #pxSkyOpen .box-card:hover .box-lid {
  transform: translateY(-4px) rotateX(18deg);
}

@media (prefers-reduced-motion: reduce) {
  #pxSkyRitual .gen-frame.run .gen-reveal,
  #pxSkyRitual .gen-frame.run .gen-sweep {
    animation: none !important;
  }
  #pxSkyRitual .gen-frame.run .gen-reveal {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
  }
}