/* Booster ceremony: every motion is driven by Web Animations in pack-ceremony.mjs. */
.pack-ceremony{--packet-width:266px;--packet-height:418px;--packet-seam:88px;--pack-tone:28;--card-w:min(236px,64vw);--card-h:calc(var(--card-w)*1.4);--glow:#ffe7a1;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#f4efe1;overflow:hidden;box-shadow:none;outline:none;user-select:none;-webkit-user-select:none}
.pack-ceremony::backdrop{background:transparent}
.ceremony-shade{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 44%,hsl(calc(var(--pack-tone)*1deg) 30% 20% / .9),#060a09f2 68%);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.ceremony-glow{position:absolute;left:50%;top:45%;width:min(640px,150vw);aspect-ratio:1;opacity:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 45%,transparent),transparent 62%)}
.ceremony-glow:after{content:'';position:absolute;inset:6%;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--glow) 30%,transparent) 0 5deg,transparent 5deg 18deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:ceremony-rays 26s linear infinite}
@keyframes ceremony-rays{to{transform:rotate(360deg)}}
.ceremony-flash{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,#fffdf2,color-mix(in srgb,var(--glow) 60%,transparent) 30%,transparent 70%);mix-blend-mode:screen}
.ceremony-particle{position:fixed;z-index:80;border-radius:50%;pointer-events:none;box-shadow:0 0 10px currentColor;mix-blend-mode:screen}

/* Pack in the foreground */
.ceremony-pack{position:absolute;left:calc(50% - var(--packet-width)/2);top:calc(45% - var(--packet-height)/2);width:var(--packet-width);height:var(--packet-height);z-index:20;touch-action:none;filter:drop-shadow(0 24px 28px #000a)}
.ceremony-pack[hidden]{display:none}
.ceremony-part{position:absolute;inset:0;pointer-events:none}
.ceremony-part>.packet-choice{cursor:default;text-align:center}
.cut-guide{position:absolute;left:12px;right:12px;top:calc(var(--packet-seam) - 1px);height:2px;z-index:3;border-top:2px dashed #ffffffe0;filter:drop-shadow(0 0 4px #fff6) drop-shadow(0 1px 1px #172d33);cursor:ew-resize}
.cut-guide:before{content:'';position:absolute;left:-12px;right:-12px;top:-36px;height:72px}
.cut-done{position:absolute;top:-5px;height:6px;width:0;border-radius:4px;background:linear-gradient(90deg,#fff8dc,#ffd36e);box-shadow:0 0 10px #ffd36e,0 0 26px #ffb84d}
.cut-spark{position:absolute;top:-12px;width:20px;height:20px;margin-left:-10px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 25%,#ffe08a 45%,transparent 70%);filter:blur(.3px)}
.tracing .cut-spark{opacity:1}
.cut-finger{position:absolute;top:-15px;left:0;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:radial-gradient(circle,#fffbe8 0 32%,#ffe39a80 50%,transparent 70%);box-shadow:0 0 18px #ffe39a;animation:cut-hint 1.8s cubic-bezier(.45,0,.3,1) infinite;pointer-events:none}
@keyframes cut-hint{0%{left:0;opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1)}75%{left:100%;opacity:1;transform:scale(1)}100%{left:100%;opacity:0;transform:scale(.6)}}
.tracing .cut-finger,.pack-ceremony:not([data-phase=trace]) .cut-finger{display:none}
.seam-light{position:absolute;left:-14%;right:-14%;top:calc(var(--packet-seam) - 46px);height:92px;z-index:2;opacity:0;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#fffef5,#ffe7a1d0 28%,#ffd36e55 50%,transparent 72%);mix-blend-mode:screen}

/* Stack of pieces */
.ceremony-stack{position:absolute;left:calc(50% - var(--card-w)/2);top:calc(45% - var(--card-h)/2);width:var(--card-w);height:var(--card-h);z-index:10;margin:0;max-width:none;display:block;touch-action:none}
.ceremony-stack[hidden]{display:none}
.stack-card{position:absolute;inset:0;cursor:grab;transform-origin:50% 80%}
.stack-card[hidden]{display:none}
.stack-card:active{cursor:grabbing}
.pack-ceremony .booster-piece{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 12px 14px;border:2px solid var(--card-edge,#a9b98a);border-radius:16px;overflow:hidden;color:#1d2620;text-align:center;background:linear-gradient(165deg,#fffaf0,#ece3c9 60%,#dcd2b4);box-shadow:0 22px 38px #000b,inset 0 0 0 4px #fff6;transition:none}
.pack-ceremony .booster-piece[data-rarity=common]{--card-edge:#a9b98a}
.pack-ceremony .booster-piece[data-rarity=uncommon]{--card-edge:#5fb7e3;background:linear-gradient(165deg,#f6fbff,#d9ebf3 60%,#c4dbe6)}
.pack-ceremony .booster-piece[data-rarity=rare]{--card-edge:#9a74ea;background:linear-gradient(165deg,#fbf7ff,#e6dcf8 60%,#d3c4f0);box-shadow:0 22px 38px #000b,0 0 26px #b48cff66,inset 0 0 0 4px #fff6}
.pack-ceremony .booster-piece[data-rarity=legendary]{--card-edge:#e2ad45;background:linear-gradient(165deg,#fffbe8,#f7e3a8 55%,#e9c56e);box-shadow:0 22px 38px #000b,0 0 34px #ffcf6b88,inset 0 0 0 4px #fff8}
.pack-ceremony .booster-piece>*{position:relative;z-index:1}
.pack-ceremony .booster-piece>.card-back{position:absolute;inset:0;z-index:3}
.pack-ceremony .booster-piece .collectible-art{flex:1;min-height:0;width:100%;aspect-ratio:auto;border-radius:10px;background:radial-gradient(ellipse at 50% 45%,#30402f,#141b16);box-shadow:inset 0 0 0 1px #0004,inset 0 6px 18px #0008}
.pack-ceremony .booster-piece .collectible-art>svg{width:86%;height:86%}
.pack-ceremony .booster-piece .rarity-label{order:-1;padding:2px 10px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#fff;background:var(--card-edge)}
.pack-ceremony .booster-piece strong{font-size:13px;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pack-ceremony .booster-piece>span:not(.rarity-label),.pack-ceremony .booster-piece>small{font-size:10px;color:#4b5548}
.pack-ceremony .booster-piece[data-rarity=rare]:after,.pack-ceremony .booster-piece[data-rarity=legendary]:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff8c 44%,#ffc8f466 49%,#a8f0ff66 54%,#fff3a866 59%,transparent 72%);background-size:260% 100%;background-position:var(--sheen,30%) 0;mix-blend-mode:overlay;animation:card-sheen 3.4s ease-in-out infinite alternate}
@keyframes card-sheen{from{background-position:0% 0}to{background-position:100% 0}}
.card-back{position:absolute;inset:0;z-index:3;display:none;place-items:center;align-content:center;gap:8px;border-radius:14px;background:radial-gradient(circle at 50% 42%,#2f5b4c,#10221c 70%),#10221c;box-shadow:inset 0 0 0 3px #e7d39a,inset 0 0 0 7px #10221c,inset 0 0 0 8px #e7d39a88}
.card-back:before{content:'';position:absolute;inset:14px;border-radius:10px;background:repeating-linear-gradient(45deg,#ffffff08 0 8px,transparent 8px 16px)}
.card-back-mark{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;font:900 40px/1 Georgia,serif;color:#f6dd96;background:#1b3a30;box-shadow:0 0 0 3px #e7d39a,0 0 28px var(--charge,#c9a6ff)}
.card-back-brand{font-weight:900;letter-spacing:3px;font-size:14px;color:#e7d39a}
.card-back[data-rarity=rare]{--charge:#c9a6ff}
.card-back[data-rarity=legendary]{--charge:#ffd36e}
.booster-piece.face-down{border-color:transparent;background:#10221c}
.booster-piece.face-down>.card-back{display:grid;animation:card-charge 1.15s ease-in-out infinite}
.booster-piece.face-down:after{opacity:0}
.booster-piece.face-down>:not(.card-back){visibility:hidden}
@keyframes card-charge{0%,100%{box-shadow:inset 0 0 0 3px #e7d39a,inset 0 0 0 7px #10221c,inset 0 0 0 8px #e7d39a88,0 0 18px var(--charge)}50%{box-shadow:inset 0 0 0 3px #fff3c4,inset 0 0 0 7px #10221c,inset 0 0 0 8px #fff3c4,0 0 48px var(--charge),0 0 90px var(--charge)}}
.stack-card:has(.face-down){animation:card-quiver .9s ease-in-out infinite}
@keyframes card-quiver{0%,100%{translate:0 0}25%{translate:-1px 1px}50%{translate:1px -1px}75%{translate:1px 1px}}

/* Captions and controls */
.ceremony-caption{position:absolute;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom));z-index:30;padding:0 20px;text-align:center;pointer-events:none}
.ceremony-step{margin:0 0 6px;min-height:18px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#f6c86e}
.ceremony-hint{margin:0;min-height:20px;font-size:14px;color:#e4e0d0;text-shadow:0 1px 4px #000}
.ceremony-open{pointer-events:auto;margin-top:12px;padding:8px 18px;border:1px solid #ffffff40;border-radius:99px;background:#ffffff14;color:#f4efe1;font:inherit;font-size:13px;cursor:pointer}
.ceremony-open:hover{border-color:#f6c86e;color:#f6c86e}
.pack-ceremony:not([data-phase=trace]) .ceremony-open{display:none}
.ceremony-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:40;width:40px;height:40px;border:1px solid #ffffff30;border-radius:50%;background:#0006;color:#f4efe1;font-size:22px;line-height:1;cursor:pointer}
.pack-ceremony:not([data-phase=trace]) .ceremony-close{display:none}
.ceremony-arrow{position:absolute;top:calc(45% - 21px);z-index:30;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid #ffffff30;border-radius:50%;background:#0007;color:#f4efe1;font-size:20px;cursor:pointer}
.ceremony-arrow:hover{border-color:#f6c86e;color:#f6c86e}
.ceremony-arrow[hidden]{display:none}
.ceremony-previous{left:calc(50% - var(--card-w)/2 - 70px)}
.ceremony-next{left:calc(50% + var(--card-w)/2 + 28px)}

/* Recap */
.ceremony-recap{position:absolute;inset:0;z-index:35;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 20px max(30px,env(safe-area-inset-bottom))}
.ceremony-recap[hidden]{display:none}
.recap-title{margin:0;font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#f6c86e}
.recap-grid{display:grid;grid-template-columns:repeat(3,170px);justify-content:center;gap:16px}
.recap-grid .booster-piece{position:relative;inset:auto;width:170px;height:238px}
.recap-grid .booster-piece:nth-child(4){grid-column:1/2;translate:calc(50% + 8px) 0}
.recap-grid .booster-piece:nth-child(5){grid-column:3/4;translate:calc(-50% - 8px) 0}
.ceremony-footer{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:440px;text-align:center}
.ceremony-footer .recap-note{margin:0;font-size:13px;color:#cfcab8}
.ceremony-footer [hidden]{display:none}

@media(max-width:650px){
  .pack-ceremony{--card-w:min(204px,60vw)}
  .ceremony-previous{left:max(6px,calc(50% - var(--card-w)/2 - 54px))}
  .ceremony-next{left:auto;right:max(6px,calc(50% - var(--card-w)/2 - 54px))}
  .ceremony-arrow{width:36px;height:36px}
  .recap-grid{grid-template-columns:repeat(2,minmax(0,150px));gap:12px}
  .recap-grid .booster-piece{width:100%;height:auto;aspect-ratio:5/7}
  .recap-grid .booster-piece:nth-child(4),.recap-grid .booster-piece:nth-child(5){grid-column:auto;translate:none}
  .recap-grid .booster-piece:nth-child(5){grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}
  .pack-ceremony .booster-piece strong{font-size:12px}
}
/* Only the PUZRUSH setting calms the ceremony; loops stop, the steps stay. */
html[data-motion=reduced] .ceremony-glow:after,html[data-motion=reduced] .cut-finger,html[data-motion=reduced] .booster-piece:after,html[data-motion=reduced] .booster-piece.face-down>.card-back,html[data-motion=reduced] .stack-card:has(.face-down){animation:none}
.pack-opening .booster-packet.selected{visibility:hidden}