/* Booster de bienvenue : pop-up, ouverture du paquet, révélation de la carte */
.bst{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));opacity:0;transition:opacity .35s}
.bst.vu{opacity:1}
.bst-x{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.5);color:#fff;font:800 22px/1 var(--f);cursor:pointer;z-index:3}
.bst-x:hover{border-color:#fff}
.bst-in{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:980px;margin:auto}
.bst-tete{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.bst-tete .eb{color:var(--lime);font-weight:800;font-size:13px;letter-spacing:1.04px}
.bst-tete h2{margin:0;font-weight:800;font-size:clamp(34px,5vw,56px);line-height:.95;letter-spacing:-.02em}
.bst-tete p{color:var(--gris);font-size:15px;max-width:440px}
.bst-scene{--h:min(58vh,540px);position:relative;height:var(--h);width:calc(var(--h)*.66);perspective:1400px;flex:0 0 auto}
.bst-pack{position:absolute;inset:0;z-index:2;cursor:pointer;border:0;background:none;padding:0;animation:bst-flotte 3.2s ease-in-out infinite}
.bst-pack:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
.bst-pack .p{position:absolute;inset:0;background:url("img/booster_pack.webp") center/contain no-repeat;filter:drop-shadow(0 18px 40px rgba(0,0,0,.7))}
.bst-pack .haut{clip-path:inset(0 0 87% 0);z-index:3}
.bst-pack .corps{clip-path:inset(13% 0 0 0);z-index:2}
.bst-pack .lueur{position:absolute;left:8%;right:8%;top:11%;height:4%;background:radial-gradient(ellipse at center,rgba(199,240,0,.95),rgba(199,240,0,0) 70%);opacity:0;z-index:4}
.bst-indice{color:#fff;font-weight:800;font-size:12px;letter-spacing:1.2px;text-align:center;animation:bst-pulse 1.6s ease-in-out infinite}
.bst-carte{position:absolute;left:50%;top:50%;width:84%;aspect-ratio:700/1047;transform:translate(-50%,-38%);transform-style:preserve-3d;z-index:1;opacity:0;pointer-events:none}
.bst-carte .f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:center/100% 100% no-repeat}
.bst-carte .verso{background-image:url("img/carte_verso.webp")}
.bst-carte .recto{transform:rotateY(180deg)}
.bst-carte .halo{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(199,240,0,.55),rgba(199,240,0,0) 62%);opacity:0;transform:translateZ(-1px);pointer-events:none}
.bst-carte.rare .halo{background:radial-gradient(circle,rgba(255,206,74,.75),rgba(255,206,74,0) 62%)}
.bst-carte .reflet{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);background-size:250% 100%;background-position:150% 0;mix-blend-mode:overlay;pointer-events:none;border-radius:2%}
.bst-eclats{position:absolute;inset:0;pointer-events:none;z-index:6}
.bst-eclats i{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--lime);opacity:0}
.bst-eclats.or i{background:#ffd34d}

/* séquence */
.bst.ouvre .bst-pack{animation:bst-secoue .45s ease-in-out}
.bst.dechire .bst-pack .haut{transition:transform .65s cubic-bezier(.3,.6,.3,1),opacity .65s;transform:translate(-22%,-55%) rotate(-24deg);opacity:0}
.bst.dechire .bst-pack .lueur{animation:bst-flash .7s ease-out}
.bst.sort .bst-carte{opacity:1;transition:transform 1s cubic-bezier(.2,.7,.2,1);transform:translate(-50%,-112%)}
.bst.sort .bst-pack .corps{transition:transform .9s .55s cubic-bezier(.5,0,.75,0),opacity .6s .75s;transform:translateY(70%);opacity:0}
.bst.centre .bst-carte{transition:transform .8s cubic-bezier(.2,.7,.2,1);transform:translate(-50%,-50%) scale(1.08)}
.bst.retourne .bst-carte{transition:transform .9s cubic-bezier(.3,.7,.2,1);transform:translate(-50%,-50%) scale(1.08) rotateY(180deg)}
.bst.retourne .bst-carte .halo{transition:opacity .6s .5s;opacity:1}
.bst.retourne .bst-carte .reflet{transition:background-position 1.4s .7s ease-out;background-position:-60% 0}
.bst.fini .bst-pack{display:none}

.bst-res{display:flex;flex-direction:column;gap:16px;width:100%;max-width:420px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.bst-res.vu{opacity:1;transform:none}
.bst-res .rar{color:var(--lime);font-weight:800;font-size:12px;letter-spacing:1.2px}
.bst-res .rar.or{color:#ffd34d}
.bst-res h3{margin:0;font-weight:800;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:-.02em}
.bst-res .det{color:var(--gris);font-size:15px;line-height:1.4}
.bst-code{display:flex;align-items:stretch;border:1px dashed var(--lime)}
.bst-code span{flex:1;padding:16px 18px;font-weight:800;font-size:22px;letter-spacing:2px;font-variant-numeric:tabular-nums;user-select:all;-webkit-user-select:all;min-width:0}
.bst-code button{border:0;background:var(--lime);color:#000;font:800 13px var(--f);letter-spacing:1px;padding:0 18px;cursor:pointer}
.bst-note{color:var(--gris);font-size:12px}
.bst-mail{display:flex;flex-direction:column;gap:8px}
.bst-mail label{font-weight:800;font-size:12px;letter-spacing:.96px}
.bst-mail .l{display:flex}
.bst-mail input{flex:1;min-width:0;background:transparent;border:1px solid #fff;border-right:0;padding:14px 16px;font:500 15px var(--f);color:#fff;border-radius:0;outline:none}
.bst-mail input::placeholder{color:var(--gris);opacity:1}
.bst-mail input:focus{border-color:var(--lime)}
.bst-mail button{border:0;background:#fff;color:#000;font:800 13px var(--f);letter-spacing:1px;padding:0 18px;cursor:pointer;white-space:nowrap}
.bst-mail .msg{font-size:13px;color:var(--gris)}
.bst-mail .msg.ok{color:var(--lime)}
.bst-actions{display:flex;gap:12px;flex-wrap:wrap}
.bst-btn{border:0;background:var(--lime);color:#000;font:800 14px var(--f);letter-spacing:.8px;padding:16px 26px;cursor:pointer}
.bst-btn.sec{background:none;color:#fff;border:1px solid rgba(255,255,255,.5)}
.bst-btn:hover{filter:brightness(1.08)}

@keyframes bst-flotte{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes bst-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes bst-secoue{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg) translateX(-4px)}40%{transform:rotate(4deg) translateX(4px)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
@keyframes bst-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes bst-eclat{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.3)}}

@media (min-width:900px){
  .bst.fini .bst-in{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:56px}
  .bst.fini .bst-tete{display:none}
}
@media (max-width:899px){
  .bst-scene{--h:min(52vh,470px)}
  .bst.fini .bst-scene{--h:min(42vh,380px)}
  .bst.fini .bst-tete{display:none}
  .bst-code span{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .bst-pack,.bst-indice{animation:none}
  .bst *{transition-duration:.01s!important;animation-duration:.01s!important}
}