/* ================================================================
   Ouverture de booster plein écran
   ================================================================ */
body.br-lock{overflow:hidden}
.br-root{--pk:#7c3aed;position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:22px 16px 18px;color:var(--ink);opacity:0;transition:opacity .28s ease}
.br-root.in{opacity:1}.br-root.out{opacity:0}
.br-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 70% 60% at 50% 45%,color-mix(in srgb,var(--pk) 45%,#0b0518) 0%,#07030f 70%);backdrop-filter:blur(8px)}
.br-rays{position:absolute;inset:-50%;z-index:-1;pointer-events:none;opacity:.35;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.06) 0deg 6deg,transparent 6deg 18deg);animation:br-spin 40s linear infinite;
  mask:radial-gradient(circle at 50% 50%,#000 0,transparent 45%)}
@keyframes br-spin{to{transform:rotate(360deg)}}
.br-root.has-myth .br-rays{opacity:.5}
.br-root.flash::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle,#fff7d6 0%,rgba(255,180,90,.6) 40%,transparent 75%);animation:br-flash .7s ease-out forwards}
@keyframes br-flash{from{opacity:1}to{opacity:0}}
.br-x{position:absolute;top:16px;right:18px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:rgba(0,0,0,.35);color:#fff;font-size:18px;cursor:pointer;transition:.2s}
.br-x:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.br-head{text-align:center}.br-head h2{margin:4px 0 0;font-size:clamp(20px,3vw,30px)}
.br-stage{position:relative;flex:1;width:100%;display:flex;align-items:center;justify-content:center;perspective:1400px;min-height:0}
.br-foot{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:96px}
.br-hint{margin:0;color:var(--muted);font-size:15px;text-align:center}.br-hint b{color:var(--ink)}
.br-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- Le paquet ---------- */
.br-pack{position:relative;width:min(290px,64vw);aspect-ratio:290/420;cursor:pointer;outline:none;animation:br-float 3s ease-in-out infinite,br-drop .7s cubic-bezier(.2,1.3,.4,1) both;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px color-mix(in srgb,var(--pk) 60%,transparent))}
.br-pack:hover{animation-play-state:paused}.br-pack:hover .pk-body,.br-pack:focus-visible .pk-body{transform:scale(1.03) rotate(-1deg)}
@keyframes br-float{50%{transform:translateY(-12px) rotate(1.2deg)}}
@keyframes br-drop{from{opacity:0;transform:translateY(-120px) scale(.7) rotate(-12deg)}}
.pk-body,.pk-top{position:absolute;left:0;right:0;border-radius:14px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--pk) 80%,#fff 20%) 0%,var(--pk) 40%,color-mix(in srgb,var(--pk) 55%,#000) 100%)}
.pk-body{top:13%;bottom:0;border-top-left-radius:0;border-top-right-radius:0;overflow:hidden;transition:transform .25s;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),inset 0 -30px 60px rgba(0,0,0,.35)}
/* bords sertis (dents) en bas */
.pk-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(-45deg,rgba(0,0,0,.35) 6px,transparent 0) 0 0/12px 12px repeat-x,linear-gradient(45deg,rgba(0,0,0,.35) 6px,transparent 0) 0 0/12px 12px repeat-x}
.pk-top{top:0;height:13.5%;border-bottom-left-radius:0;border-bottom-right-radius:0;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);transform-origin:12% 100%;transition:transform .65s cubic-bezier(.3,.7,.3,1),opacity .65s}
.pk-top::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(-45deg,rgba(0,0,0,.35) 5px,transparent 0) 0 0/10px 10px repeat-x,linear-gradient(45deg,rgba(0,0,0,.35) 5px,transparent 0) 0 0/10px 10px repeat-x}
.pk-top::after{content:"";position:absolute;left:4%;right:4%;bottom:-1px;border-bottom:2px dashed rgba(255,255,255,.55)}
.pk-top span{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.8)}
.pk-art{position:absolute;left:50%;top:9%;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.pk-label{position:absolute;left:0;right:0;bottom:18px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:0 14px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.pk-label b{font-family:var(--f-head);font-size:20px;line-height:1.1}.pk-label span{font-size:13px;opacity:.9}
.pk-label em{font-style:normal;font-family:var(--f-mono);font-size:11px;margin-top:6px;padding:2px 10px;border-radius:99px;background:rgba(0,0,0,.4)}
.pk-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 58%);background-size:260% 100%;animation:shine 3s infinite}
.pk-glow{position:absolute;left:5%;right:5%;top:11%;height:6%;border-radius:50%;background:radial-gradient(ellipse,#fff 0%,color-mix(in srgb,var(--pk) 50%,#fff) 40%,transparent 70%);opacity:0;transform:scaleY(.3)}
.br-pack.shake{animation:br-shake .5s ease-in-out}
@keyframes br-shake{0%,100%{transform:none}15%{transform:rotate(-4deg) translateX(-6px)}30%{transform:rotate(4deg) translateX(6px)}45%{transform:rotate(-3deg)}60%{transform:rotate(3deg)}75%{transform:rotate(-1deg) scale(1.03)}}
.br-pack.torn{animation:none}
.br-pack.torn .pk-top{transform:translate(70px,-160px) rotate(38deg);opacity:0}
.br-pack.torn .pk-glow{animation:br-glow .9s ease-out forwards}
@keyframes br-glow{40%{opacity:1;transform:scaleY(4) scaleX(1.2)}100%{opacity:0;transform:scaleY(10) scaleX(1.6)}}
.br-pack.gone{transition:transform .35s ease-in,opacity .35s;transform:translateY(80px) scale(.9);opacity:0}

/* ---------- Pile de cartes ---------- */
.br-stack{position:relative;display:grid;place-items:center}
.br-card{grid-area:1/1;position:relative;width:var(--w);aspect-ratio:63/88;transform:translate(calc(var(--d) * 4px),calc(var(--d) * -5px)) rotate(calc(var(--d) * 1.6deg));
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .3s;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.br-card.rise{animation:br-rise .7s cubic-bezier(.2,1.2,.4,1) both}
@keyframes br-rise{from{opacity:0;transform:translateY(160px) scale(.6)}}
.br-card.top{cursor:pointer}
.br-card.top:not(.shown):hover{transform:translateY(-10px) rotate(-1.5deg) scale(1.02)}
.br-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,1.35,.5,1)}
.br-back,.br-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.br-front{transform:rotateY(180deg)}
.br-card.shown .br-in{transform:rotateY(180deg)}
.br-card.charge .br-in{animation:br-charge .45s ease-in-out infinite}
@keyframes br-charge{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-2.5deg) scale(1.03)}75%{transform:rotate(2.5deg) scale(1.03)}}
.br-card.charge.r-mythique .br-in,.br-card.charge{filter:drop-shadow(0 0 30px #ffd36b)}
.br-card.shown.r-rare .br-front .card{box-shadow:0 0 0 2px #ffd36b,0 0 40px #ffd36b,0 0 90px rgba(255,211,107,.5)}
.br-card.shown.r-mythique .br-front .card{box-shadow:0 0 0 3px #ffb35c,0 0 50px #ff7a3c,0 0 120px rgba(255,122,60,.6);animation:br-myth 2.4s ease-in-out infinite}
@keyframes br-myth{50%{box-shadow:0 0 0 3px #ffd36b,0 0 70px #ffb35c,0 0 160px rgba(244,114,182,.6)}}
.br-card.shown.r-peu .br-front .card{box-shadow:0 0 0 2px #93c5fd,0 0 30px rgba(147,197,253,.6)}
.br-card.fly{transform:translate(0,40vh) scale(.2) rotate(18deg);opacity:0;transition:transform .32s ease-in,opacity .32s}
.br-tags{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);display:flex;gap:6px;white-space:nowrap;z-index:3}
.br-tags:empty{display:none}
.br-tags .rtag{animation:br-pop .4s cubic-bezier(.2,1.6,.4,1) both}.br-tags .rtag:nth-child(2){animation-delay:.08s}.br-tags .rtag:nth-child(3){animation-delay:.16s}
@keyframes br-pop{from{opacity:0;transform:translateY(10px) scale(.6)}}
.rtag{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.05em;padding:3px 10px;border-radius:99px;background:#1d1433;border:1px solid var(--line2);color:var(--muted)}
.rtag.peu{color:#93c5fd;border-color:#93c5fd66}.rtag.rare{color:#ffd36b;border-color:#ffd36b88;background:#2a2108}
.rtag.mythique{color:#fff;border-color:#ff7a3c;background:linear-gradient(90deg,#c2410c,#db2777)}
.rtag.foil{color:#0b0518;background:linear-gradient(90deg,#a5f3fc,#f0abfc,#fde68a);border:0}
.rtag.new{color:#04211c;background:#5eead4;border:0}

/* plateau des cartes déjà vues */
.br-tray{display:flex;gap:6px;min-height:84px;align-items:flex-end}
.br-thumb{animation:br-in-tray .35s cubic-bezier(.2,1.4,.4,1) both;border-radius:6px}
.br-thumb.r-rare .card{box-shadow:0 0 12px #ffd36b}.br-thumb.r-mythique .card{box-shadow:0 0 16px #ff7a3c}
@keyframes br-in-tray{from{opacity:0;transform:translateY(-60px) scale(1.6)}}

/* ---------- Récapitulatif ---------- */
.br-sum{width:100%;max-height:100%;overflow:auto;padding:10px}
.br-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:flex-start}
.br-sc{display:flex;flex-direction:column;align-items:center;gap:8px;animation:br-deal .55s cubic-bezier(.2,1.3,.4,1) both;transition:transform .2s}
.br-sc:hover{transform:translateY(-8px) scale(1.04)}
@keyframes br-deal{from{opacity:0;transform:translateY(60px) rotate(-10deg) scale(.7)}}
.br-sc.r-rare .card{box-shadow:0 0 26px rgba(255,211,107,.8)}.br-sc.r-mythique .card{box-shadow:0 0 36px rgba(255,122,60,.9)}
.br-sc-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}

/* ---------- Étincelles ---------- */
.br-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:4}
.br-burst i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);
  animation:br-spark var(--t) cubic-bezier(.1,.8,.3,1) forwards}
@keyframes br-spark{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}}

@media (max-height:640px){.br-head h2{font-size:18px}.br-foot{min-height:70px}.br-tray{min-height:60px}}
@media (prefers-reduced-motion:reduce){.br-rays,.br-pack,.pk-shine{animation:none!important}}