/* Prime XI — boosters, cartes rares, effets d'ouverture et finitions de l'interface.
   Chargé après style.css : mêmes couleurs, même ambiance stade de nuit. */

/* ---------- transitions de page ---------- */
html, body { overflow-x: clip; }
#main > * { animation: pageIn .35s ease backwards; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
#main.shaking { animation: shakeIt .55s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shakeIt {
  10%, 90% { transform: translate(calc(var(--shake) * -.3), 0); }
  20%, 80% { transform: translate(calc(var(--shake) * .6), calc(var(--shake) * .2)); }
  30%, 50%, 70% { transform: translate(calc(var(--shake) * -1), calc(var(--shake) * -.3)); }
  40%, 60% { transform: translate(var(--shake), calc(var(--shake) * .3)); }
}
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }
.flash { z-index: 65; }

/* ---------- en-tête ---------- */
.top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 255, 62, .45), transparent);
}
.icon-btn { width: 34px; padding: 0; justify-content: center; color: var(--muted); }
.icon-btn:hover, .pill:hover { border-color: var(--line-2); color: var(--text); }
.pill.coins:hover { color: var(--accent); }
.nav a { position: relative; transition: color .15s, background .15s; }

/* ---------- boutons ---------- */
.btn.primary { box-shadow: 0 0 0 0 rgba(215, 255, 62, 0); transition: transform .12s, background .12s, box-shadow .25s; }
.btn.primary:hover { box-shadow: 0 6px 24px -6px rgba(215, 255, 62, .55); }
.btn.big-btn { min-height: 50px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.btn.off { opacity: .45; pointer-events: none; }
h2.h-display { position: relative; padding-bottom: 6px; }
h2.h-display::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--accent); }

/* ---------- cartes : couches décoratives ---------- */
.card .shine, .card .holo, .card .laurel, .card .sparkles { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.card .shine {
  z-index: 4; mix-blend-mode: screen; opacity: .7;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 47%, rgba(255, 255, 255, .05) 53%, transparent 62%);
  background-size: 300% 100%; animation: sweep 4.5s ease-in-out infinite;
}
.card.r4 .shine { animation-duration: 3.6s; background-image: linear-gradient(115deg, transparent 35%, rgba(255, 224, 138, .45) 47%, rgba(255, 255, 255, .1) 53%, transparent 62%); }
.card.r5 .shine { animation-duration: 3s; background-image: linear-gradient(115deg, transparent 33%, rgba(255, 200, 120, .5) 46%, rgba(255, 77, 94, .2) 54%, transparent 64%); }
.card.r6 .shine { animation-duration: 2.4s; opacity: .9; background-image: linear-gradient(115deg, transparent 30%, rgba(255, 246, 201, .7) 45%, rgba(255, 255, 255, .25) 52%, transparent 65%); }
@keyframes sweep { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }

/* Reflet holographique qui suit la souris (Légendaire et plus) */
.card .holo {
  z-index: 3; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .3s;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .55), transparent 45%),
    linear-gradient(125deg, #ff4d5e33, #ffbf1f33, #d7ff3e33, #3d8bfd33, #b061ff33, #ff4d5e33);
  background-size: 100% 100%, 300% 300%;
}
.card.tilting .holo { opacity: .55; }
.card.r6 .holo { opacity: .35; animation: holoShift 6s linear infinite; }
.card.r6.tilting .holo { opacity: .7; }
@keyframes holoShift { to { background-position: 0 0, 300% 300%; } }

/* ---------- Historique : cadre rouge & or animé, photo vintage, ornements ---------- */
.card.r5 {
  border-color: transparent;
  background:
    repeating-linear-gradient(45deg, rgba(255, 191, 31, .035) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #4a1f1a, #1a0b09 75%);
  box-shadow: 0 0 0 1px rgba(255, 191, 31, .35), 0 0 28px rgba(255, 77, 94, .45), 0 8px 22px rgba(0, 0, 0, .45);
  animation: histGlow 2.6s ease-in-out infinite;
}
.card.r5::before {
  content: ''; position: absolute; inset: -2px; border-radius: 12px; padding: 2.5px; z-index: 5; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), #ff4d5e, #ffbf1f, #fff0c9, #ff4d5e, #8e1b28, #ffbf1f, #ff4d5e);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; animation: goat 6s linear infinite;
}
.card.r5::after { /* filet doré intérieur */
  content: ''; position: absolute; inset: 4cqw; border: 1px solid rgba(255, 191, 31, .45); border-radius: 8px; pointer-events: none; z-index: 2;
}
@keyframes histGlow {
  50% { box-shadow: 0 0 0 1px rgba(255, 191, 31, .55), 0 0 42px rgba(255, 77, 94, .65), 0 8px 22px rgba(0, 0, 0, .45); }
}
.card.r5 .photo img { filter: sepia(.4) saturate(1.1) contrast(1.08); }
.card.r5 .laurel::before, .card.r5 .laurel::after { /* coins ornementaux */
  content: ''; position: absolute; width: 14cqw; height: 14cqw; border: 2px solid #ffbf1f; z-index: 6; opacity: .9;
}
.card.r5 .laurel::before { left: 3cqw; bottom: 3cqw; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.card.r5 .laurel::after { right: 3cqw; bottom: 3cqw; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.card.r5 .rar { color: #ffbf1f; text-shadow: 0 0 8px rgba(255, 77, 94, .8); letter-spacing: 1.5px; }
.card.r5 .name { background: linear-gradient(180deg, #fff6e0, #ffcf6b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- GOAT : noir et or, bordure tournante, étincelles, encore plus fort ---------- */
.card.r6 {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(246, 226, 122, .18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(246, 226, 122, .05) 0 1px, transparent 1px 7px),
    #050505;
  animation: goatGlow 2s ease-in-out infinite;
}
.card.r6::before { padding: 3px; z-index: 6; animation-duration: 2.6s; }
.card.r6::after {
  content: ''; position: absolute; inset: 4cqw; border: 1px solid rgba(246, 226, 122, .55); border-radius: 8px; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 24px rgba(246, 226, 122, .15);
}
@keyframes goatGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(246, 226, 122, .5), 0 0 70px rgba(246, 226, 122, .15), 0 8px 24px rgba(0, 0, 0, .5); }
  50% { box-shadow: 0 0 46px rgba(246, 226, 122, .8), 0 0 110px rgba(246, 226, 122, .3), 0 8px 24px rgba(0, 0, 0, .5); }
}
.card.r6 .rar { color: #f6e27a; letter-spacing: 3px; font-size: 8cqw; text-shadow: 0 0 10px rgba(246, 226, 122, .9); }
.card.r6 .name {
  background: linear-gradient(100deg, #c99a2e, #fff6c9 30%, #f6e27a 50%, #fff 60%, #c99a2e 90%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldText 3s linear infinite;
}
@keyframes goldText { to { background-position: -200% 0; } }
.card.r6 .pos { color: #050505; background: linear-gradient(135deg, #fff6c9, #c99a2e); }
.card .sparkles { z-index: 7; }
.card .sparkles i {
  position: absolute; width: 5cqw; height: 5cqw; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 10%, #fff6c9 12% 13%, transparent 15% 35%, #fff6c9 37% 38%, transparent 40% 60%, #fff6c9 62% 63%, transparent 65% 85%, #fff6c9 87% 88%, transparent 90%);
  border-radius: 50%; animation: twinkle 2.4s ease-in-out infinite;
}
.card .sparkles i:nth-child(1) { left: 12%; top: 10%; animation-delay: 0s; }
.card .sparkles i:nth-child(2) { left: 80%; top: 16%; animation-delay: .5s; }
.card .sparkles i:nth-child(3) { left: 62%; top: 42%; animation-delay: 1.1s; }
.card .sparkles i:nth-child(4) { left: 20%; top: 52%; animation-delay: 1.6s; }
.card .sparkles i:nth-child(5) { left: 86%; top: 66%; animation-delay: .8s; }
.card .sparkles i:nth-child(6) { left: 8%; top: 78%; animation-delay: 2s; }
.card .sparkles i:nth-child(7) { left: 46%; top: 6%; animation-delay: 1.4s; }
.card .sparkles i:nth-child(8) { left: 40%; top: 70%; animation-delay: .2s; }
.card .sparkles i:nth-child(9) { left: 70%; top: 88%; animation-delay: 1.8s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(90deg); } }

/* GOAT non révélé : personne ne sait qui c'est */
.card.mystery .photo { background: radial-gradient(circle at 50% 45%, rgba(246, 226, 122, .25), transparent 60%); }
.card.mystery .qmark {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 48cqw;
  background: linear-gradient(180deg, #fff6c9, #c99a2e); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(246, 226, 122, .6)); animation: qPulse 2.2s ease-in-out infinite;
}
@keyframes qPulse { 50% { transform: scale(1.08); filter: drop-shadow(0 0 26px rgba(246, 226, 122, .9)); } }
.card.missing.r5, .card.missing.r6 { animation: none; }
.card.missing .shine, .card.missing .sparkles, .card.missing .holo { display: none; }

/* Carte Carrière : petit bandeau */
.card.career .rar::before { content: '★ '; }

/* ---------- boosters (sachets) ---------- */
.booster {
  --p1: #1f6b45; --p2: #0c2a1b; --ink: #fff; --z: 6px;
  position: relative; width: 100%; aspect-ratio: 5 / 7.6; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.booster.b-daily { --p1: #d7ff3e; --p2: #4f7210; --ink: #13200a; }
.booster.b-free { --p1: #2c8a5a; --p2: #0b2619; }
.booster.b-premium { --p1: #8150ea; --p2: #1d0f46; }
.booster.b-legend { --p1: #e2ad35; --p2: #3a2706; }
.b-body {
  position: absolute; inset: 0; overflow: hidden; color: var(--ink); border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%;
  background:
    radial-gradient(90% 60% at 50% 38%, rgba(255, 255, 255, .22), transparent 70%),
    linear-gradient(165deg, var(--p1), var(--p2));
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--z) * 2) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--z) * 2) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) 51% repeat-x;
}
.b-body::before, .b-body::after { /* soudures crantées du sachet */
  content: ''; position: absolute; left: 0; right: 0; height: 7%; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, rgba(255, 255, 255, .12) 2px 4px);
}
.b-body::before { top: 0; }
.b-body::after { bottom: 0; }
.b-sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, .1) 52%, transparent 62%);
  background-size: 320% 100%; animation: sweep 3.8s ease-in-out infinite;
}
.b-lines { position: absolute; inset: 10% 8%; border: 1.5px solid currentColor; opacity: .18; border-radius: 4px; }
.b-lines::before { content: ''; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; border: 1.5px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); }
.b-lines::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; }
.b-head { position: absolute; top: 10%; display: flex; align-items: center; gap: 5px; z-index: 1; }
.b-mark { font-family: var(--font-display); font-size: 11px; border: 1.5px solid currentColor; border-radius: 4px; padding: 0 3px; line-height: 15px; }
.b-brand { font-family: var(--font-display); font-size: 11px; letter-spacing: 3px; }
.b-emblem {
  position: relative; z-index: 1; width: 36%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px currentColor, 0 0 30px rgba(255, 255, 255, .25);
}
.b-emblem svg { width: 62%; height: 62%; }
.b-day { position: absolute; bottom: 22%; font-family: var(--font-display); font-size: 11px; }
.b-title { z-index: 1; font-family: var(--font-display); font-size: clamp(18px, 2.4vw, 26px); text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.b-daily .b-title { text-shadow: none; }
.b-sub { z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.b-stripes { position: absolute; bottom: 11%; left: 12%; right: 12%; display: flex; gap: 4px; z-index: 1; }
.b-stripes i { flex: 1; height: 4px; border-radius: 2px; background: var(--r3); }
.b-free .b-stripes i:nth-child(1) { background: var(--r1); } .b-free .b-stripes i:nth-child(2) { background: var(--r2); }
.b-daily .b-stripes i { background: var(--accent-ink); opacity: .6; }
.b-legend .b-stripes i:nth-child(2) { background: var(--r4); } .b-legend .b-stripes i:nth-child(3) { background: var(--r5); }
.b-premium .b-stripes i:nth-child(3) { background: var(--r4); }
.b-tear { position: absolute; top: 0; left: 0; right: 0; height: 15%; border-bottom: 2px dashed rgba(255, 255, 255, .5); z-index: 4; }
.b-daily .b-tear { border-color: rgba(19, 32, 10, .4); }
.booster.big { width: min(240px, 62vw); }
.booster.big .b-title { font-size: 34px; }
.booster.big .b-mark, .booster.big .b-brand { font-size: 14px; }
.booster.big .b-sub { font-size: 12px; }
.booster.big .b-day { font-size: 14px; }

/* tuiles de la page d'accueil */
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1100px) { .packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .packs { grid-template-columns: 1fr; } }
.pack-tile {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px;
  border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--panel-2), var(--panel)); overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.pack-tile::before { /* projecteur derrière le sachet */
  content: ''; position: absolute; left: 50%; top: -30px; width: 240px; height: 240px; transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow, rgba(215, 255, 62, .14)), transparent 65%); pointer-events: none;
}
.t-free { --glow: rgba(63, 191, 106, .2); } .t-premium { --glow: rgba(176, 97, 255, .25); } .t-legend { --glow: rgba(255, 191, 31, .25); }
.pack-tile:hover { border-color: rgba(215, 255, 62, .35); transform: translateY(-2px); }
.pack-link { display: block; width: 58%; margin: 6px auto 0; position: relative; }
.pack-tile:hover .booster { transform: translateY(-6px) rotate(-2deg) scale(1.03); }
.pack-info h3 { font-size: 18px; }
.pack-info p { margin: 4px 0 10px; color: var(--muted); font-size: 13px; }
.pack-tile .odds { display: flex; gap: 6px; flex-wrap: wrap; }
.pack-tile .odds span { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--bg-2); color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent); }
.pack-tile .odds b { color: var(--text); }
.pack-actions { display: flex; gap: 8px; margin-top: auto; }
.pack-actions .btn:first-child { flex: 1; min-width: 0; padding: 0 12px; }
.pack-actions .btn:first-child .sub { overflow: hidden; text-overflow: ellipsis; }
.pack-actions .btn.ghost { padding: 0 12px; flex: none; }

/* ---------- ouverture ---------- */
.pack-stage { position: relative; cursor: pointer; display: grid; place-items: center; padding: 20px 30px; }
.pack-stage .booster { grid-area: 1 / 1; }
.pack-stage .front { z-index: 3; animation: floaty 3s ease-in-out infinite; }
.pack-stage .behind { opacity: .85; filter: brightness(.7) drop-shadow(0 14px 22px rgba(0, 0, 0, .5)); }
.pack-stage .behind-1 { transform: translate(22px, -10px) rotate(7deg); z-index: 2; }
.pack-stage .behind-2 { transform: translate(-22px, -6px) rotate(-8deg); z-index: 1; }
.pack-stage .behind-3 { transform: translate(40px, -18px) rotate(13deg); z-index: 0; }
.pack-stage:hover .front { animation-play-state: paused; transform: scale(1.03); }
.pack-count {
  position: absolute; z-index: 5; top: 6px; right: 0; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-size: 22px; padding: 2px 12px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
@keyframes floaty { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.pack-stage.rumble .front { animation: rumble .09s linear infinite; }
.pack-stage.rumble .behind { animation: rumble .11s linear infinite; }
@keyframes rumble {
  0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-1.5deg); }
  50% { transform: translate(2px, -2px) rotate(1deg); } 75% { transform: translate(-1px, 2px) rotate(-.5deg); }
}
.pack-stage.torn .b-tear {
  background: linear-gradient(165deg, var(--p1), var(--p2)); border-bottom-style: solid;
  animation: stripOff .55s cubic-bezier(.3, .6, .4, 1) forwards;
}
.pack-stage.drop .front .b-body, .pack-stage.drop .behind { animation: packDrop .5s ease-in forwards; }
.pack-stage.torn .front { animation: none; }

/* cartes qui sortent du sachet */
.emerge { position: absolute; inset: 20px 30px; display: grid; place-items: center; z-index: 2; pointer-events: none; }
.emerge i {
  grid-area: 1 / 1; width: min(200px, 52vw); aspect-ratio: 5 / 7; border-radius: 10px; display: grid; place-items: center;
  border: 2px solid var(--line-2); box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 18px, transparent 18px 36px), linear-gradient(160deg, #183d2c, #0a1a12);
  transform: translateY(8%) scale(.92); transition: transform .55s cubic-bezier(.2, .9, .3, 1.15); transition-delay: calc(var(--i) * 60ms);
}
.emerge i span { font-family: var(--font-display); font-size: 24px; color: var(--accent); letter-spacing: 2px; }
.drop .emerge { z-index: 4; }
.rising .emerge i { transform: translate(calc((var(--i) - 2) * 30px), -46%) rotate(calc((var(--i) - 2) * 8deg)); }
.gather .emerge i { transform: translate(0, -20%) scale(1.05); transition-duration: .35s; transition-delay: 0s; }
.emerge.glow-r4 i { border-color: var(--r4); box-shadow: 0 0 26px rgba(255, 191, 31, .55); }
.emerge.glow-r5 i { border-color: var(--r5); box-shadow: 0 0 30px rgba(255, 77, 94, .65); }
.emerge.glow-r6 i { border-color: var(--r6); box-shadow: 0 0 40px rgba(246, 226, 122, .9); }
.pack-stage.torn::after {
  content: ''; position: absolute; left: 50%; top: 18%; width: 340px; height: 340px; transform: translate(-50%, -50%) scale(.2);
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(215, 255, 62, .4) 35%, transparent 65%);
  animation: tearLight .7s ease-out forwards; pointer-events: none; z-index: 6;
}
@keyframes stripOff { to { transform: translate(60px, -160px) rotate(28deg); opacity: 0; } }
@keyframes packDrop { to { transform: translateY(120px) scale(.85); opacity: 0; } }
@keyframes tearLight { 50% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.count-picker { display: flex; gap: 8px; }
.count-picker .chip { min-width: 52px; font-size: 14px; padding: 8px 12px; }
.count-picker .chip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.count-picker .chip[disabled] { opacity: .35; cursor: not-allowed; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* révélation carte par carte */
.reveal-wrap { position: relative; display: grid; place-items: center; }
.rays {
  position: absolute; width: 640px; height: 640px; max-width: 160vw; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: repeating-conic-gradient(from 0deg, var(--ray, rgba(255, 255, 255, .12)) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 65%); mask: radial-gradient(circle, #000 15%, transparent 65%);
  animation: spin 14s linear infinite;
}
.lit-r3 .rays { --ray: rgba(176, 97, 255, .22); opacity: .7; }
.lit-r4 .rays { --ray: rgba(255, 191, 31, .3); opacity: 1; }
.lit-r5 .rays { --ray: rgba(255, 77, 94, .35); opacity: 1; animation-duration: 9s; }
.lit-r6 .rays { --ray: rgba(246, 226, 122, .55); opacity: 1; animation-duration: 6s; width: 900px; height: 900px; }
.card-back.hint { --hc: rgba(176, 97, 255, .7); animation: hintPulse 1.1s ease-in-out infinite; }
.card-back.hint-r4 { --hc: rgba(255, 191, 31, .8); }
.card-back.hint-r5 { --hc: rgba(255, 77, 94, .85); }
.card-back.hint-r6 { --hc: rgba(246, 226, 122, 1); animation-duration: .7s; }
@keyframes hintPulse { 50% { box-shadow: 0 0 36px 4px var(--hc), inset 0 0 30px var(--hc); border-color: var(--hc); } }
.charge .flip, .charge-goat .flip { animation: rumble .08s linear infinite; }
.charge-goat::before {
  content: ''; position: fixed; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, .2), rgba(0, 0, 0, .9) 60%);
  z-index: -1; animation: fadeIn .4s both;
}
.charge-goat .reveal-stage { filter: drop-shadow(0 0 40px rgba(246, 226, 122, .9)); }
@keyframes fadeIn { from { opacity: 0; } }
.reveal-stage .slot .card { animation: none; }
.reveal-name h2.big-name { font-size: clamp(32px, 6vw, 46px); background: linear-gradient(180deg, #fff, #ffcf6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lit-r6 ~ .reveal-name h2, .reveal-name h2.big-name { animation: popIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }
.card-back span { text-shadow: 0 0 18px rgba(215, 255, 62, .6); }

/* plusieurs boosters */
.multi-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.mflip { position: relative; aspect-ratio: 5 / 7; perspective: 900px; transform-style: preserve-3d; cursor: pointer; animation: dealIn .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--k, 0) * 22ms); }
.mflip > * { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.mflip .slot { transform: rotateY(180deg); }
.mflip .slot .card { width: 100%; height: 100%; }
.mflip.flipped .card-back { transform: rotateY(-180deg); }
.mflip.flipped .slot { transform: rotateY(0); }
.mflip.flipped { cursor: default; }
.mflip:not(.flipped):hover .card-back { border-color: var(--accent); transform: translateY(-4px); }
@keyframes dealIn { from { opacity: 0; transform: translateY(40px) scale(.8) rotate(-6deg); } }
.summary-bar { margin-top: 26px; padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: pageIn .4s both; }
.summary-bar p { margin: 0; }
.rar-counts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rar-counts span { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); background: color-mix(in srgb, var(--rc) 10%, transparent); }
.rar-counts b { color: var(--text); }
.opener.summary .summary-bar { width: 100%; max-width: 900px; }

/* ---------- accueil ---------- */
.hero-text h1 { margin-top: 10px; }
.hero-cards .card:nth-child(2) { width: 186px; }
.hero-spot { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(246, 226, 122, .16), transparent 60%); z-index: 0; pointer-events: none; }
.hero-cards .card { z-index: 1; }
.hero-cards .card:nth-child(2) { z-index: 2; }
.today a.panel { text-decoration: none; transition: border-color .2s, transform .2s; }
.today a.panel:hover { border-color: var(--line-2); transform: translateY(-2px); }
.today .ico { font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-2); flex: none; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--danger); text-transform: uppercase; letter-spacing: 1px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: livePulse 1.4s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, .7); } 100% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); } }
.feed-item { transition: border-color .2s, transform .2s; }
.feed-item:hover { border-color: var(--line-2); transform: translateX(3px); }
.feed-item.fr5 { border-color: rgba(255, 77, 94, .35); background: linear-gradient(90deg, rgba(255, 77, 94, .08), var(--panel)); }
.feed-item.fr6 { border-color: rgba(246, 226, 122, .5); background: linear-gradient(90deg, rgba(246, 226, 122, .12), var(--panel)); }
.steps .panel { transition: border-color .2s; }
.steps .panel:hover { border-color: var(--line-2); }
.album, .listing, .row-item, .rank-row { transition: border-color .2s, background .2s; }
.album:hover, .listing:hover, .rank-row:hover { border-color: var(--line-2); }

@media (max-width: 960px) {
  .hero-cards .card:nth-child(2) { width: 148px; }
  .pack-link { width: 46%; }
}
@media (max-width: 600px) {
  .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .booster.big .b-title { font-size: 28px; }
  .count-picker .chip { min-width: 44px; }
  .pack-link { width: 52%; }
}

/* ---------- interrupteur (profil) ---------- */
.toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.toggle input { appearance: none; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: background .2s; margin-top: 2px; }
.toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.toggle input:checked { background: var(--accent); border-color: transparent; }
.toggle input:checked::after { transform: translateX(18px); background: var(--accent-ink); }

/* ---------- compte à rebours des boosters gratuits ---------- */
.pill-timer { font-variant-numeric: tabular-nums; color: var(--accent); margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--line-2); }
.countdown { font-variant-numeric: tabular-nums; color: var(--accent); }

/* ---------- avatars & Discord ---------- */
.av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panel-2); }
.av-letter { display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.av-xs { width: 16px; height: 16px; font-size: 9px; vertical-align: -3px; margin-right: 5px; }
.av-lg { width: 52px; height: 52px; font-size: 20px; }
.av-pill { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pill.avatar { overflow: hidden; }
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-cell b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-line { display: block; }
.discord-panel { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.discord-panel p { margin: 0; }
.discord-id { display: flex; gap: 14px; align-items: center; }
.discord-btn { background: #5865f2; border-color: transparent; color: #fff; }
.discord-btn:hover { background: #4752c4; }