/* packlab-fxb.css — reveal FX boost + achievements + share modal + vault pack.
   Shared across OP and Riftbound pack labs. Ports the fxb-* / share / achv
   patterns from Lorcana's public/packs.html into a single stylesheet. */

/* ---- FX BOOST (fxb-*) ---- */
.fxb-shake{animation:fxb-shake .34s cubic-bezier(.36,.07,.19,.97) both}
@keyframes fxb-shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}

.rip-core-wrap.fxb-slowmo .revcard.in,
.revealstack.fxb-slowmo .revcard.in{animation-duration:.9s !important}

.fxb-particles{position:absolute;inset:0;pointer-events:none;z-index:7;overflow:visible}
.fxb-particle{position:absolute;left:50%;top:55%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;
  animation:fxb-particle 1.15s cubic-bezier(.15,.65,.35,1) forwards;
  box-shadow:0 0 8px currentColor}
@keyframes fxb-particle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--px,0)), calc(-50% + var(--py,0))) scale(.6)}
}

.fxb-confetti-host{position:fixed;inset:0;pointer-events:none;z-index:126;overflow:hidden}
.fxb-confetti{position:fixed;left:0;top:-24px;width:8px;height:14px;pointer-events:none;
  border-radius:1px;opacity:0;animation:fxb-conf var(--dur,2200ms) linear forwards}
@keyframes fxb-conf{
  0%{opacity:0;transform:translate(var(--x,0),-24px) rotate(0)}
  8%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--x,0) + var(--drift,0)), calc(100vh + 40px)) rotate(var(--rot,720deg))}
}

.fxb-holoshim{position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:5;
  mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  background-size:260% 100%;background-position:220% 0;opacity:0;
  animation:fxb-holoshim 1.2s ease-out forwards}
@keyframes fxb-holoshim{0%{opacity:0;background-position:220% 0}25%{opacity:1}100%{opacity:0;background-position:-140% 0}}

@media (prefers-reduced-motion:reduce){
  .fxb-shake,.fxb-particles,.fxb-particle,.fxb-confetti,.fxb-confetti-host,.fxb-holoshim{
    display:none !important; animation:none !important;
  }
  .rip-core-wrap.fxb-slowmo .revcard.in,.revealstack.fxb-slowmo .revcard.in{animation-duration:.55s !important}
}

/* ---- ACHIEVEMENT TOAST ---- */
.fxb-ach-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .28s,transform .28s;
  background:linear-gradient(180deg,#141826 0%,#0B0E18 100%);
  border:1px solid rgba(242,196,90,.55);border-radius:14px;
  padding:12px 16px;min-width:260px;max-width:min(92vw,420px);
  box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 22px rgba(242,196,90,.18);
  font-family:'Sora',system-ui,sans-serif;color:#EAEDF6}
.fxb-ach-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.fxb-ach-toast .ach-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#F2C45A}
.fxb-ach-toast .ach-name{font-size:16px;font-weight:800;margin-top:2px}
.fxb-ach-toast .ach-desc{font-size:12.5px;color:#AAB2C6;margin-top:2px}

/* ---- SHARE MODAL ---- */
.fxb-modal{position:fixed;inset:0;z-index:210;background:rgba(3,4,10,.72);
  display:none;align-items:center;justify-content:center;padding:14px}
.fxb-modal.show{display:flex}
.fxb-modal-inner{background:linear-gradient(180deg,#0F131F,#0A0D18);
  border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:16px;
  max-width:min(96vw,540px);width:100%;max-height:92vh;overflow:auto;
  color:#EAEDF6;font-family:'Sora',system-ui,sans-serif}
.fxb-modal-inner h3{margin:0 0 6px;font-size:18px;font-weight:800;letter-spacing:.02em}
.fxb-modal-inner p{margin:0 0 10px;font-size:13px;color:#AAB2C6}
.fxb-share-canvas-wrap{background:#06070C;border-radius:12px;padding:10px;display:flex;justify-content:center}
.fxb-share-canvas-wrap canvas{max-width:100%;height:auto;border-radius:10px;display:block}
.fxb-modal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fxb-btn{flex:1 1 auto;min-height:44px;padding:11px 14px;border-radius:10px;
  font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:14px;cursor:pointer;
  border:1.5px solid transparent;text-align:center;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.fxb-btn.primary{background:#F2C45A;color:#0A0B12;border-color:#F2C45A}
.fxb-btn.secondary{background:rgba(255,255,255,.06);color:#EAEDF6;border-color:rgba(255,255,255,.16)}
.fxb-btn.ghost{background:transparent;color:#AAB2C6;border-color:rgba(255,255,255,.10)}
.fxb-btn:hover{filter:brightness(1.1)}
.fxb-btn:active{transform:scale(.98)}

/* ---- ACHIEVEMENTS PANEL (compact) ---- */
.fxb-achv-panel{margin:18px auto 0;max-width:1120px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);color:#EAEDF6;font-family:'Sora',system-ui,sans-serif}
.fxb-achv-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fxb-achv-head h3{margin:0;font-size:16px;font-weight:800;letter-spacing:.02em}
.fxb-achv-head .sub{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:#AAB2C6;letter-spacing:.08em}
.fxb-achv-grid{margin-top:12px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.fxb-achv-item{padding:10px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:2px}
.fxb-achv-item.done{border-color:rgba(242,196,90,.55);background:rgba(242,196,90,.06)}
.fxb-achv-item .n{font-size:13.5px;font-weight:700}
.fxb-achv-item .d{font-size:11.5px;color:#AAB2C6;line-height:1.35}
.fxb-achv-item .p{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:#8890A8;margin-top:4px}
.fxb-achv-item.done .n::after{content:" ✓";color:#F2C45A}

/* ---- VAULT / SHARE PACK ---- */
.fxb-vault{max-width:1120px;margin:22px auto 0;padding:16px 18px;border-radius:16px;
  background:linear-gradient(160deg,rgba(94,160,255,.10),rgba(169,116,232,.08));
  border:1px solid rgba(94,160,255,.35);color:#EAEDF6;font-family:'Sora',system-ui,sans-serif}
.fxb-vault-eye{display:inline-flex;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#8FBFFF}
.fxb-vault h3{margin:8px 0 4px;font-size:18px;font-weight:800;color:#8FBFFF}
.fxb-vault p{margin:0 0 10px;font-size:13.5px;color:#C5CAD9}
.fxb-vault-form{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.fxb-vault-form input{flex:1 1 220px;min-width:0;padding:11px 12px;border-radius:10px;
  background:rgba(255,255,255,.05);color:#EAEDF6;border:1px solid rgba(255,255,255,.14);font-size:14px}
.fxb-vault-msg{font-size:12.5px;color:#79C0E8;min-height:16px}
.fxb-vault-msg.err{color:#FF6B7A}
.fxb-vault-note{margin-top:6px;font-size:11.5px;color:#8890A8}

/* ---- Sealed CTA packshot ---- */
.fxb-packshot{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);flex-shrink:0}
.fxb-packshot img{width:100%;height:100%;object-fit:contain;display:block}