/* Page Booster — scène 390 × 760, mise à l'échelle par JS */
#view-booster { align-items: center; justify-content: center; }
.stage-host { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.stage-fit { position: relative; flex: none; }
.stage {
  position: absolute; left: 0; top: 0; width: 390px; height: 760px;
  /* les cartes peuvent déborder sur les côtés (elles s'estompent), mais pas en haut ni en bas */
  transform-origin: top left; overflow-x: visible; overflow-y: clip;
  user-select: none; -webkit-user-select: none;
}
.mono { font-family: var(--font-mono); }

.counter { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); z-index: 10; transition: opacity .3s; }

.beam {
  position: absolute; left: 0; right: 0; height: 560px; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 246, 224, .6), rgba(255, 246, 224, 0));
  clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
  transition: opacity .6s, top .7s cubic-bezier(.3, .8, .3, 1);
}

/* ---------- Cartes ---------- */
.cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.card { position: absolute; left: 45px; top: 100px; width: 300px; height: 440px; touch-action: none; pointer-events: auto; }
.card-inner { position: absolute; inset: 0; }
/* carte sous la pile : percée là où la carte du dessus a son trou */
.card.under {
  -webkit-mask-image: radial-gradient(circle 40px at calc(var(--hx) + 60px) calc(var(--hy) + 60px), #000 39px, transparent 40px), linear-gradient(#000, #000);
  mask-image: radial-gradient(circle 40px at calc(var(--hx) + 60px) calc(var(--hy) + 60px), #000 39px, transparent 40px), linear-gradient(#000, #000);
  -webkit-mask-size: calc(100% + 120px) calc(100% + 120px); mask-size: calc(100% + 120px) calc(100% + 120px);
  -webkit-mask-position: -60px -60px; mask-position: -60px -60px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.face { position: absolute; inset: 0; }
.face.back { pointer-events: none; }
.frame { position: absolute; inset: 0; border-radius: 16px; padding: 12px; box-sizing: border-box; }
.paper {
  width: 100%; height: 100%; border-radius: 8px; background: var(--paper); padding: 12px 14px;
  box-sizing: border-box; display: flex; flex-direction: column; color: var(--ink); overflow: hidden; position: relative;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--ink-3); }
.card-head .cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.card-head .cat b { font-weight: 500; color: var(--ink); }
.card-head .badge { flex: none; }
.badge {
  min-width: 22px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 4px;
  color: var(--ink); font-weight: 500; display: flex; align-items: center; justify-content: center;
}
.card-title { margin-top: 5px; font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.05; }
.card-img {
  margin-top: 8px; margin-right: 16px; height: 160px; border-radius: 4px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(45deg, #DCD3BE 0 7px, #D2C8B0 7px 14px); box-shadow: 0 0 0 2px #E2D9C4;
}
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.card-img .jig { position: absolute; inset: 0; background-image: url(../assets/puzzle-jig-white.svg); background-size: 44px 44px; }
.card-img .holo { position: absolute; inset: 0; }
.card-img .cap { position: absolute; left: 8px; top: 8px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); }
.card-desc { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.card-src { margin-top: auto; border-top: 1px solid var(--paper-line); padding-top: 5px; font-size: 9.5px; color: var(--ink-3); display: flex; gap: 4px; align-items: baseline; white-space: nowrap; }
.card-src a { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; color: #3B5BA9; text-decoration: underline; text-underline-offset: 2px; pointer-events: none; }
.card.live .card-src a { pointer-events: auto; cursor: pointer; }
.card-src a:hover, .card-src a:focus-visible { color: var(--wine); }
.stamp {
  position: absolute; top: 22px; padding: 4px 10px; border-radius: 6px; border: 2.5px solid;
  font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: .1em;
  background: rgba(246, 241, 228, .92); opacity: 0;
}
.stamp.keep { left: 14px; color: var(--green); transform: rotate(-12deg); }
.stamp.disc { right: 28px; color: var(--wine); transform: rotate(12deg); }
.notch-r { position: absolute; right: 0; top: 146px; width: 38px; height: 72px; overflow: hidden; }
.notch-l { position: absolute; left: 0; top: 146px; width: 38px; height: 72px; overflow: hidden; }
/* Vrai trou : le cadre de la carte est percé (masque), on voit le fond à travers.
   .a = anneau de renfort métallique autour du trou, .b = paroi intérieure du trou. */
/* trou découpé géométriquement (rectangle large moins un disque de 30 px, règle evenodd) :
   le rectangle déborde de la carte pour ne pas couper ombres et halos */
.back-frame { clip-path: path(evenodd, "M -80 -80 H 380 V 520 H -80 Z M 0 152 A 30 30 0 1 0 0 212 A 30 30 0 1 0 0 152 Z"); }
.frame { clip-path: path(evenodd, "M -80 -80 H 380 V 520 H -80 Z M 300 152 A 30 30 0 1 0 300 212 A 30 30 0 1 0 300 152 Z"); }
.notch-r .a, .notch-l .a {
  position: absolute; top: 0; width: 72px; height: 72px; border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, transparent 29.5px, #000 30.5px); mask-image: radial-gradient(circle, transparent 29.5px, #000 30.5px);
}
.notch-r .a { right: -36px; } .notch-l .a { left: -36px; }
.notch-r .b, .notch-l .b { position: absolute; top: 6px; width: 60px; height: 60px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 9px rgba(0, 0, 0, .35); }
.notch-r .b { right: -30px; } .notch-l .b { left: -30px; }
.links {
  position: absolute; right: -24px; top: 158px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--night-800); box-shadow: 0 0 0 2px var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--paper);
  border: 0; padding: 0; font: inherit; pointer-events: none; cursor: pointer; transition: transform .15s;
}
.links b { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1; }
.links i { font-family: var(--font-mono); font-size: 6.5px; letter-spacing: .12em; font-style: normal; }

.back-frame {
  position: absolute; inset: 0; border-radius: 16px; background: var(--metal-C); padding: 12px; box-sizing: border-box;
  box-shadow: var(--shadow-card);
}
.back-paper {
  width: 100%; height: 100%; border-radius: 8px; position: relative; overflow: hidden; box-sizing: border-box;
  background: radial-gradient(circle at 50% 42%, #FFFFFF, #F8F6F1 60%, #EFECE4);
  display: flex; flex-direction: column; align-items: center; padding-top: 142px;
}
.back-paper .jig { position: absolute; inset: 0; background-image: url(../assets/puzzle-jig-black.svg); background-size: 46px 46px; background-position: center; }
.back-paper .outline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; fill: none; stroke-width: 1; }
.back-paper::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, transparent 18%, rgba(255, 255, 255, .55) 26%, transparent 35%); }
.back-paper .name { position: relative; z-index: 3; font-family: var(--font-display); font-size: 38px; font-weight: 700; color: #2A2C34; text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 -1px 0 rgba(0, 0, 0, .35); }
.back-paper .sub { position: relative; z-index: 3; margin-top: 4px; font-family: var(--font-display); font-style: italic; font-size: 15px; color: #2A2C34; }

/* ---------- Booster ---------- */
.booster { transform-origin: 50% 75%; position: absolute; left: 55px; top: 197px; width: 280px; height: 450px; z-index: 3; touch-action: none; transition: transform .75s cubic-bezier(.3, .8, .3, 1), opacity .45s; }
/* liseré clair le long du bord déchiré = épaisseur du papier */
.edge-fx { position: absolute; inset: 0; transform-origin: 50% 100%; filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -2px 2px rgba(0, 0, 0, .25)); }
.booster-body {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  clip-path: polygon(0px 26px,10px 21.5px,20px 25px,30px 20.5px,40px 26px,50px 22px,60px 24.5px,70px 21px,80px 26px,90px 20.8px,100px 25.5px,110px 22px,120px 26px,130px 21.2px,140px 24.8px,150px 20.6px,160px 26px,170px 21.8px,180px 25.2px,190px 21px,200px 26px,210px 22px,220px 24.6px,230px 20.8px,240px 26px,250px 21.4px,260px 25.6px,270px 21px,280px 26px,280px 450px,0px 450px);
  background: radial-gradient(circle at 50% 36%, #FFFFFF, #F8F6F1 60%, #EFECE4);
  box-shadow: inset 0 0 0 1.5px var(--gold-500);
}
.booster .jig { position: absolute; inset: 0; background-image: url(../assets/puzzle-jig-violet.svg); background-size: 56px 56px; background-position: 0 1px; }
.booster .dash { position: absolute; top: 28px; left: 14px; right: 14px; border-top: 1.5px dashed var(--wine); }
.booster .label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 66px; box-sizing: border-box; color: var(--ink); }
.booster .label .name { font-family: var(--font-display); font-size: 54px; font-weight: 700; line-height: 1; }
.booster .label .tag { margin-top: 10px; font-family: var(--font-display); font-style: italic; font-size: 19px; }
.booster .label .count { margin-top: 40px; display: flex; align-items: baseline; gap: 8px; }
.booster .label .count b { font-family: var(--font-display); font-size: 76px; font-weight: 700; line-height: .8; }
.booster .label .count i { font-family: var(--font-display); font-size: 24px; }
.booster .price {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  background: var(--night-800); box-shadow: inset 0 0 0 1px var(--gold-500); padding: 8px 16px; border-radius: var(--radius-pill); white-space: nowrap;
  font-family: var(--font-mono); font-size: 15px; color: var(--paper-2);
}
.booster .price .coin { width: 20px; height: 20px; background: url(../assets/wc-piece-gold.svg) center/contain no-repeat; }
.booster .sheen { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40,30,70,.34) 0%, rgba(40,30,70,.16) 3%, rgba(255,255,255,.55) 6.5%, rgba(255,255,255,0) 13%, transparent 74%, rgba(40,30,70,.06) 86%, rgba(255,255,255,.4) 93.5%, rgba(40,30,70,.2) 97%, rgba(40,30,70,.38) 100%); }
.booster .glow { position: absolute; top: 22px; height: 2px; background: #FFF1C9; box-shadow: 0 0 8px 3px rgba(255, 214, 120, .8); }
.booster .mouth { position: absolute; top: 0; height: 56px; pointer-events: none; background: linear-gradient(180deg, rgba(18, 10, 38, .5) 14px, rgba(18, 10, 38, 0) 56px); }
.frag { position: absolute; z-index: 6; pointer-events: none; }
.booster .crimp {
  position: absolute; bottom: -9px; left: 0; right: 0; height: 22px; border-radius: 2px 2px 7px 7px; box-shadow: 0 4px 8px rgba(0, 0, 0, .35);
  background:
    linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.14) 3%, rgba(255,255,255,.4) 6.5%, rgba(255,255,255,0) 13%, transparent 78%, rgba(255,255,255,.28) 93.5%, rgba(0,0,0,.16) 97%, rgba(0,0,0,.42) 100%),
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(255,255,255,.25)),
    repeating-linear-gradient(90deg, #E2BE6A 0 4px, #6E521A 4px 8px);
  /* même découpage que les lamelles du haut : motif répété tous les 10,6 px */
  background-size: 100% 100%, 100% 100%, 10.6px 100%;
}
.strip { position: absolute; top: -9px; left: 0; width: 280px; height: 35px; }
.seg { position: absolute; top: 0; width: 10.6px; height: 35px; }
.seg .paperpart {
  position: absolute; top: 9px; left: 0; right: 0; bottom: 0; background-color: #FBFAF7; background-size: 280px 100%;
  background-image: linear-gradient(90deg, rgba(40,30,70,.34) 0%, rgba(40,30,70,.16) 3%, rgba(255,255,255,.55) 6.5%, rgba(255,255,255,0) 13%, transparent 74%, rgba(40,30,70,.06) 86%, rgba(255,255,255,.4) 93.5%, rgba(40,30,70,.2) 97%, rgba(40,30,70,.38) 100%);
}
.seg .gold {
  position: absolute; top: 0; left: 0; right: 0; height: 22px; box-shadow: 0 2px 0 #6E521A;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.14) 3%, rgba(255,255,255,.4) 6.5%, rgba(255,255,255,0) 13%, transparent 78%, rgba(255,255,255,.28) 93.5%, rgba(0,0,0,.16) 97%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, #E2BE6A 0 4px, #6E521A 4px 8px);
  background-size: 280px 100%, 100% 100%, auto;
}
.seg .red { position: absolute; top: 31px; left: 0; right: 0; height: 3px; background: var(--wine); }
.seg .shade { position: absolute; inset: 0; background: #140F28; }

/* ---------- Indications, actions ---------- */
.idle-hint { position: absolute; left: 0; right: 0; bottom: 56px; text-align: center; z-index: 4; transition: opacity .3s; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.idle-hint .l1 { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold-400); }
.idle-hint .l2 { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.actions { position: absolute; left: 24px; right: 24px; top: 566px; z-index: 5; display: flex; flex-direction: column; gap: 10px; align-items: center; transition: opacity .4s, transform .4s; }
.actions .hint { font-size: 12.5px; letter-spacing: .02em; color: var(--muted); text-align: center; }
.actions .row { display: flex; gap: 12px; width: 100%; }
.btn {
  flex: 1; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 17px; letter-spacing: .01em; cursor: pointer; border: 0; background: none;
  transition: transform .12s, filter .2s, box-shadow .2s;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: scale(.97); filter: none; }
.btn:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.btn .arrow { font-size: 21px; line-height: 1; transition: transform .18s; }
.btn:hover .arrow.l { transform: translateX(-4px); }
.btn:hover .arrow.r { transform: translateX(4px); }
.btn.ghost-wine {
  color: var(--wine-soft);
  background: linear-gradient(180deg, rgba(158, 52, 66, .24), rgba(158, 52, 66, .07));
  box-shadow: inset 0 0 0 1.5px var(--wine), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn.gold {
  background: linear-gradient(180deg, #F2D283 0%, #E2BE6A 42%, #C9A24A 100%); color: var(--night-800);
  box-shadow: 0 10px 22px -10px rgba(226, 190, 106, .75), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(110, 82, 26, .35);
}
.btn.outline-gold { box-shadow: inset 0 0 0 1.5px var(--gold-500); color: var(--paper-2); font-weight: 500; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .coin { width: 18px; height: 18px; background: url(../assets/wc-piece-wax.svg) center/contain no-repeat; }
/* pastille de gain : +1 avec la pièce dorée */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 10px; border-radius: 99px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--gold-300);
  background: rgba(226, 190, 106, .12); box-shadow: inset 0 0 0 1px rgba(226, 190, 106, .4);
}
.chip .coin { width: 14px; height: 14px; background: url(../assets/wc-piece-gold.svg) center / contain no-repeat; }

/* ---------- Bilan ---------- */
.done {
  position: absolute; inset: 0; z-index: 20; background: rgba(20, 24, 43, .96); border-radius: 28px; box-shadow: inset 0 0 0 1px var(--night-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px; box-sizing: border-box;
  transition: opacity .5s;
}
.done h2 { margin: 0; font-family: var(--font-display); font-size: 40px; font-weight: 600; text-align: center; line-height: 1.1; }
.done .tally { display: flex; gap: 28px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.done .tally span { font-family: var(--font-display); font-size: 34px; }
.done .tally .k { color: var(--gold-400); } .done .tally .d { color: var(--wine-soft); }
.done .results { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.res { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--night-line); }
.res .l { display: flex; align-items: center; gap: 10px; }
.res .badge { min-width: 24px; font-family: var(--font-mono); font-size: 9px; }
.res .t { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.res .s { font-family: var(--font-mono); font-size: 11px; }
.done .btns { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.done .btn { flex: none; height: 54px; font-size: 17px; }
.done .btn.outline-gold { height: 50px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .booster, .beam, .actions, .done { transition-duration: .01s !important; }
}

/* ---------- Défausse : pièces de puzzle ---------- */
.shatter { position: absolute; left: 45px; top: 100px; width: 300px; height: 440px; z-index: 31; pointer-events: none; }
.shard { position: absolute; left: 0; top: 0; width: 300px; height: 440px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); will-change: transform, opacity; }

/* ---------- Garde : copie de la carte qui vole vers la collection ---------- */
.fly-card { position: fixed; width: 300px; height: 440px; z-index: 195; pointer-events: none; will-change: transform, opacity; }

/* ---------- Indication du gain à la défausse ---------- */
.stamp small { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 3px; font-size: 10px; letter-spacing: .06em; font-weight: 500; }
.stamp small .coin { width: 13px; height: 13px; flex: none; background: url(../assets/wc-piece-wax.svg) center / contain no-repeat; display: inline-block; }
.shard .probe { position: absolute; width: 1px; height: 1px; pointer-events: none; }

/* ---------- Boutons d'action : texte seul, profondeur sur le fond, survol coloré ----------
   (réservé à la barre d'actions du tri : les boutons de l'écran de bilan gardent leur cadre) */
.actions { left: 18px; right: 18px; }
.actions .row { justify-content: space-between; gap: 0; }
.actions .btn {
  position: relative; isolation: isolate; flex: none; height: auto; padding: 10px 8px; border-radius: 0;
  background: none; box-shadow: none; filter: none;
  font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: .01em; gap: 10px;
  transition: color .22s, text-shadow .22s, transform .15s;
}
/* halo flou derrière le texte : donne de la profondeur sur le fond du site */
.actions .btn::before {
  content: ''; position: absolute; z-index: -1; inset: -8px -20px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--halo) 0%, transparent 68%); filter: blur(6px);
  opacity: .55; transition: opacity .25s, transform .25s;
}
.actions .btn:hover, .actions .btn:focus-visible { filter: none; transform: translateY(-1px); }
.actions .btn:hover::before, .actions .btn:focus-visible::before { opacity: 1; transform: scale(1.14); }
.actions .btn:active { transform: scale(.97); }
.actions .btn:focus-visible { outline: none; }
.actions .btn .arrow { font-size: 28px; }
.actions .btn .chip { padding: 0; background: none; box-shadow: none; font-size: 13px; }
.actions .btn.ghost-wine {
  --halo: rgba(158, 52, 66, .6); color: #E9A0AA;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .75), 0 0 22px rgba(158, 52, 66, .5);
}
.actions .btn.ghost-wine:hover, .actions .btn.ghost-wine:focus-visible {
  color: #FF9AA8; text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .75), 0 0 26px rgba(255, 105, 130, .75);
}
.actions .btn.gold {
  --halo: rgba(226, 190, 106, .5); color: #E2BE6A;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .75), 0 0 22px rgba(226, 190, 106, .45);
}
.actions .btn.gold:hover, .actions .btn.gold:focus-visible {
  color: #FFF1C9; text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .75), 0 0 28px rgba(255, 224, 140, .85);
}

/* ---------- Boosters gratuits ---------- */
.free {
  position: absolute; left: 50%; top: 136px; transform: translateX(-50%); z-index: 4; white-space: nowrap; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 12px; border-radius: 99px;
  background: rgba(20, 24, 43, .72); box-shadow: inset 0 0 0 1px var(--night-line-2); transition: opacity .3s;
}
.free-pips { display: flex; gap: 4px; align-items: flex-end; }
.pip { position: relative; width: 11px; height: 16px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--night-line-2); transition: background .3s, box-shadow .3s; }
.pip.on { background: linear-gradient(180deg, #F2D283, #C9A24A); box-shadow: inset 0 0 0 1px var(--gold-500), 0 0 8px rgba(226, 190, 106, .4); }
.pip .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(226, 190, 106, .5); transition: height .9s linear; }
.pip.on .fill { height: 0 !important; }
.free-txt { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.free-txt b { font-size: 13px; font-weight: 700; color: var(--paper-2); }
.free-txt i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.booster .price.gratis { background: linear-gradient(180deg, #F2D283, #C9A24A); box-shadow: inset 0 0 0 1px #6E521A, 0 4px 12px rgba(226, 190, 106, .45); color: var(--night-800); font-weight: 500; }
.booster .price.gratis .coin { display: none; }

/* ---------- Choix du type de booster ---------- */
.packs { position: absolute; top: 40px; left: 0; right: 0; z-index: 6; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 16px; transition: opacity .3s; }
.pack-chip {
  height: 32px; padding: 0 15px; border: 0; border-radius: 99px; cursor: pointer; font: 700 13px var(--font-body); color: var(--muted);
  background: rgba(20, 24, 43, .75); box-shadow: inset 0 0 0 1px var(--night-line-2); transition: color .15s, box-shadow .15s, transform .12s;
}
.pack-chip:hover { color: var(--paper-2); box-shadow: inset 0 0 0 1px var(--gold-500); }
.pack-chip:active { transform: scale(.96); }
.pack-chip.on { color: var(--night-800); background: var(--btn-gold); box-shadow: 0 6px 14px -6px rgba(226, 190, 106, .7); }
.pack-chip:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }

/* ---------- Attente du tirage ---------- */
.loading { position: absolute; left: 0; right: 0; top: 330px; z-index: 7; text-align: center; pointer-events: none; opacity: 0; transition: opacity .3s; font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--gold-400); text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }

/* le prix du bouton « Ouvrir un autre » est dans son propre conteneur : sans ceci, la pièce n'a plus de taille */
#bAgainCost { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Habillage des boosters (design) : variables posées par JS selon le booster choisi ---------- */
.booster .jig { background-image: var(--jig, url(../assets/puzzle-jig-violet.svg)); }
.booster-body { background: var(--bodybg, radial-gradient(circle at 50% 36%, #FFFFFF, #F8F6F1 60%, #EFECE4)); box-shadow: inset 0 0 0 var(--ringw, 1.5px) var(--ring, #C9A24A); }
.edge-fx { filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -2px 2px rgba(0, 0, 0, .25)) drop-shadow(0 0 22px var(--glowc, transparent)); }
.booster .label { color: var(--txt, var(--ink)); text-shadow: 0 0 8px var(--halo, #FBFAF7), 0 0 3px var(--halo, #FBFAF7), 0 0 1px var(--halo, #FBFAF7); }
.booster.has-label .label { padding-top: 48px; }
.pk-label { margin-bottom: 8px; min-height: 0; font-family: var(--font-mono); font-size: 20px; font-weight: 500; letter-spacing: .14em; color: var(--lab, var(--txt)); }
.pk-label:empty { display: none; }

/* ---------- Bouton vers la boutique (bas de l'écran d'ouverture) ---------- */
.shop-link {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 99px;
  color: var(--gold-400); text-decoration: none; font: 700 15px var(--font-body);
  background: rgba(20, 24, 43, .72); box-shadow: inset 0 0 0 1.5px var(--gold-500);
  transition: opacity .3s, color .2s, box-shadow .2s, background .2s;
}
.shop-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shop-link:hover, .shop-link:focus-visible { color: var(--gold-300); background: rgba(38, 45, 82, .85); box-shadow: inset 0 0 0 1.5px var(--gold-400), 0 0 20px -4px rgba(226, 190, 106, .6); text-decoration: none; }
.shop-link:focus-visible { outline: none; }

/* bilan d'un Mégabooster / Prestige : 10 lignes, la liste défile au lieu de déborder de l'écran */
.done .results { min-height: 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--night-line-2) transparent; padding-right: 2px; }
.done { gap: 18px; }

/* écran de fin : chrono des boosters gratuits + accès à la boutique */
.free-inline { display: flex; align-items: center; justify-content: center; gap: 12px; align-self: center; padding: 6px 16px 6px 12px; border-radius: 99px; background: rgba(20, 24, 43, .72); box-shadow: inset 0 0 0 1px var(--night-line-2); white-space: nowrap; }
.done a.btn { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }

/* bouton LIENS cliquable : sur la carte du dessus (booster) et dans la fiche de collection */
.card.live .links, .modal-art .links { pointer-events: auto; }
.links:hover, .links:focus-visible { transform: scale(1.1); background: var(--night-600); outline: none; box-shadow: 0 0 0 2px var(--gold-400); }

/* liste des pages liées */
.links-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(5, 6, 12, .8); backdrop-filter: blur(6px); }
.links-card { position: relative; width: min(460px, 100%); max-height: min(640px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 24px 20px 18px; border-radius: 22px; background: radial-gradient(circle at 30% 10%, var(--night-600), var(--night-800) 70%); box-shadow: inset 0 0 0 1px var(--night-line-2), 0 30px 80px rgba(0, 0, 0, .6); }
.links-card h3 { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; }
.links-sub { margin: 0; font-size: 14px; color: var(--muted); }
.links-sub b { color: var(--paper-2); font-weight: 700; }
.links-x { position: absolute; right: 10px; top: 6px; width: 40px; height: 40px; border: 0; background: none; color: var(--muted); font-size: 30px; cursor: pointer; border-radius: 50%; }
.links-x:hover { color: var(--paper-2); }
.links-list { list-style: none; margin: 4px 0 0; padding: 0 2px 0 0; overflow-y: auto; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: var(--night-line-2) transparent; }
.links-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: var(--paper-2); text-decoration: none; font-size: 15px; background: rgba(20, 24, 43, .7); box-shadow: inset 0 0 0 1px var(--night-line); }
.links-list a:hover, .links-list a:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-500); color: var(--gold-300); outline: none; }
.links-list a span { color: var(--muted); }
.links-state { padding: 14px 4px; text-align: center; font-size: 14px; color: var(--muted); }
.links-state[hidden], .links-more[hidden] { display: none; }
.links-more { flex: none; height: 44px; font-size: 15px; }