/* =====================================================
   Bonus : mascotte, réglages, visite guidée, pastille, badges, transitions, brillance
   Règle des contours : 3 px (boutons, petits éléments) ou 4 px (cartes, encadrés, fenêtres) ;
   ombres : 3 px (petits) ou 6 px (grands). Les pointillés sont réservés au focus et au dealer.
   ===================================================== */
:root{--bw:3px;--bw-l:4px;--sh:3px 3px 0 var(--line);--sh-l:6px 6px 0 var(--line)}

/* ---------- Réglages ---------- */
#bfRegBtn{position:fixed;left:12px;bottom:12px;z-index:60;width:42px;height:42px;padding:0;display:flex;align-items:center;justify-content:center;font-size:0;line-height:0;border-width:4px;box-shadow:4px 4px 0 var(--line);image-rendering:pixelated}
#bfRegBtn svg{width:28px;height:28px;display:block}
#bfRegBtn:hover svg{animation:bf-engr 1.2s steps(8) infinite}
@keyframes bf-engr{to{transform:rotate(360deg)}}
html.calme #bfRegBtn:hover svg{animation:none}
#bfReglages{position:fixed;left:12px;bottom:62px;z-index:60;width:min(260px,calc(100vw - 24px));padding:14px;background:var(--panel);color:var(--ink);border:var(--bw-l) solid var(--line);box-shadow:var(--sh-l)}
#bfReglages[hidden]{display:none}
#bfReglages h2{margin:0 0 10px;font-size:11px}
#bfReglages label{display:flex;gap:8px;align-items:center;font-size:9px;margin:8px 0;cursor:pointer}
#bfReglages .row{margin-top:12px}
#bfAide{max-width:min(420px,94vw)}
#bfAide table{border-collapse:collapse;width:100%;font-size:9px}
#bfAide th,#bfAide td{padding:5px 6px;text-align:left;vertical-align:top}
kbd{font:inherit;font-size:8px;padding:3px 5px;border:var(--bw) solid var(--line);background:var(--panel);box-shadow:2px 2px 0 var(--line);white-space:nowrap}

/* ---------- Visite guidée ---------- */
#bfVisite{position:fixed;z-index:80;padding:14px;background:var(--panel);color:var(--ink);border:var(--bw-l) solid var(--line);box-shadow:var(--sh-l);font-size:9px;line-height:1.6;animation:bf-pop .3s steps(5)}
#bfVisite[hidden]{display:none}
#bfVisite strong{display:block;font-size:11px;margin-bottom:6px;color:var(--accent)}
#bfVisite p{margin:0 0 12px}
#bfVisite .bf-n{position:absolute;right:10px;top:8px;font-size:8px;opacity:.6}
#bfVisite .row{justify-content:flex-end}
#bfVisite::before{content:"";position:absolute;left:var(--fx,20px);width:12px;height:12px;background:var(--panel);transform:rotate(45deg)}
#bfVisite[data-pos="bas"]::before{top:-9px;border-left:var(--bw-l) solid var(--line);border-top:var(--bw-l) solid var(--line)}
#bfVisite[data-pos="haut"]::before{bottom:-9px;border-right:var(--bw-l) solid var(--line);border-bottom:var(--bw-l) solid var(--line)}
.bf-cible{outline:4px solid var(--accent);outline-offset:6px;animation:bf-cible 1s steps(2) infinite;position:relative;z-index:70}
@keyframes bf-cible{50%{outline-offset:10px}}

/* ---------- Pastille « booster prêt » ---------- */
.bf-pastille{display:inline-block;min-width:16px;margin-left:6px;padding:2px 4px;font-size:8px;line-height:1.2;background:var(--accent);color:var(--on-accent,#fff);border:2px solid var(--line);animation:bf-pastille 1.4s steps(2) infinite}
@keyframes bf-pastille{50%{transform:translateY(-2px)}}

/* ---------- Transition entre onglets : un « cartouche » qui s'enclenche ---------- */
.entre{animation:bf-entre .45s steps(6) both}
/* l'onglet Boosters contient des éléments « fixed » (panneau Dealer) : une animation de transform/filtre/découpe les ferait suivre la section puis sauter à leur place ; on n'anime donc que l'opacité */
#vueBoosters.entre{animation:bf-entre-opa .45s steps(6) both}
@keyframes bf-entre-opa{0%{opacity:0}60%{opacity:1}100%{opacity:1}}
@keyframes bf-entre{0%{opacity:0;transform:translateY(-14px);clip-path:inset(0 0 100% 0);filter:brightness(1.6)}60%{opacity:1;clip-path:inset(0 0 0 0)}80%{transform:translateY(3px);filter:none}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

/* ---------- Galerie : carte du jour et classement ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;margin-bottom:18px;align-items:start}
.duo .panel[hidden]{display:none}
.duo>.panel{margin:0}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.classement{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.classement li{display:grid;grid-template-columns:26px 1fr;column-gap:8px;align-items:baseline;padding:8px 10px;border:var(--bw) solid var(--line);background:var(--panel)}
.classement .rang-d{grid-column:2;font-size:8px;opacity:.75}
.classement .rang-n{font-size:10px;color:var(--accent)}
.classement .rang1{background:color-mix(in srgb,#ffd23f 35%,var(--panel))}
.classement .rang2{background:color-mix(in srgb,#cfd8e8 40%,var(--panel))}
.classement .rang3{background:color-mix(in srgb,#c8814a 30%,var(--panel))}

/* ---------- Complétion de la collection ---------- */
.stats{margin:6px 0 16px}
.stats .compl{font-size:10px;margin-bottom:8px}
.stats .barre{height:18px;border:var(--bw) solid var(--line);background:var(--panel);box-shadow:var(--sh);overflow:hidden}
.stats .barre i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,color-mix(in srgb,var(--accent) 70%,#fff) 8px 10px);transition:width .8s steps(12)}
.stats .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.stats .chip{font-size:8px;padding:4px 6px;border:2px solid var(--line);background:var(--panel)}

/* ---------- Badges ---------- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;text-align:center;font-size:7px;line-height:1.4;border:var(--bw) solid var(--line);background:var(--panel)}
.badge svg{width:52px;height:52px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25))}
.badge{position:relative}
.badge.verrou svg,.badge.verrou>span{opacity:.55;filter:grayscale(.6)}
.badge.secret>span{letter-spacing:2px}
/* infobulle : comment obtenir le badge */
.badge .tip{display:none;position:absolute;z-index:30;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:200px;padding:8px 10px;text-align:left;font-size:7px;line-height:1.6;background:var(--panel);color:var(--ink);border:3px solid var(--line);box-shadow:3px 3px 0 var(--line);pointer-events:none}
.badge .tip strong{display:block;font-size:8px;margin-bottom:4px}
.badge .tip p{margin:0 0 3px}
.badge .tip .ok{color:#1c8a4a}
.badge .tip .ko{color:#b3402b}
.badge .tip .gain{color:var(--accent)}
.badge:hover,.badge:focus-visible{z-index:31}
.badge:hover .tip,.badge:focus-visible .tip,.badge:focus-within .tip{display:block}
.badge:focus-visible{outline:3px dashed var(--accent);outline-offset:2px}

/* ---------- Cartes des listes : reflet au survol, plus fort pour les raretés élevées ---------- */
.mini{position:relative}
.mini::after{content:"";position:absolute;left:5.556%;width:88.888%;top:0;margin-top:5.556%;aspect-ratio:32/40;pointer-events:none;opacity:0;
  /* reflet : un trait fin et net, dans la couleur de la rareté (cœur un peu plus clair) */
  background:linear-gradient(115deg,transparent 43%,var(--sc,#fff) 47.8%,var(--sc2,#fff) 50%,var(--sc,#fff) 52.2%,transparent 57%);background-size:260% 100%;background-position:130% 0}
.mini.r-uncommon{--sc:rgba(255,255,255,.55);--sc2:#fff}
.mini.r-rare{--sc:rgba(60,160,255,.95);--sc2:rgb(205,235,255)}
.mini.r-epic{--sc:rgba(170,90,255,.95);--sc2:rgb(238,215,255)}
.mini.r-mythic{--sc:rgba(255,80,145,.95);--sc2:rgb(255,222,236)}
.mini.r-legendary{--sc:rgba(255,255,255,.75);--sc2:#fff}
.side .mini::after{display:none}
@media (hover:hover){
  /* le reflet est déclenché par bonus.js (classe .bf-sh) : quand la souris sort, une raie déjà commencée finit sa course, les suivantes ne partent pas */
  .mini.bf-sh::after{opacity:1;animation:bf-reflet .58s linear 1 forwards}
  .mini.r-mythic.bf-sh::after{animation-iteration-count:2}
  .mini.r-legendary.bf-sh::after{animation:bf-reflet .5s linear infinite}
  .mini.r-legendary:hover canvas{filter:brightness(1.08) saturate(1.15)}
}
@keyframes bf-reflet{to{background-position:-30% 0}}

/* ---------- Écrans tactiles : cibles plus grandes ---------- */
@media (pointer:coarse){
  button{min-height:44px;padding-top:10px;padding-bottom:10px}
  .side button{min-height:40px}
  .sw{min-width:38px;min-height:38px}
  .fbtn{min-height:60px}
  #bfRegBtn{width:48px;height:48px}
  .pack.actif.pret{touch-action:none}
}

/* ---------- Réduire les animations ---------- */
html.calme *,html.calme *::before,html.calme *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.calme .rays{animation:none!important}
.classement .lien{justify-self:start;text-align:left}

/* ---------- Halo de rareté autour des cartes des listes (pas dans la visionneuse) ---------- */
.mini.r-common{--rc:#9a9a9a;--hs:5px;--ho:.5}
.mini.r-uncommon{--rc:#2fbf71;--hs:8px;--ho:.65}
.mini.r-rare{--rc:#3b8bff;--hs:11px;--ho:.75}
.mini.r-epic{--rc:#a259ff;--hs:14px;--ho:.85}
.mini.r-mythic{--rc:#ff4fa3;--hs:17px;--ho:.9}
.mini.r-legendary{--rc:#ffc83d;--hs:13px;--ho:.6}
.mini[class*=" r-"]>:first-child{box-shadow:0 0 var(--hs) calc(var(--hs) * .25) color-mix(in srgb,var(--rc) calc(var(--ho) * 100%),transparent),0 0 calc(var(--hs) * 2.2) 0 color-mix(in srgb,var(--rc) calc(var(--ho) * 45%),transparent)}

/* ---------- Récompenses des badges ---------- */
.badge .gain{font-style:normal;font-size:7px;color:var(--accent)}
.badge .pris{font-size:7px;opacity:.7}
.badge .recup{font-size:7px;padding:4px 6px;min-height:0;background:var(--accent);color:var(--on-accent,#fff);animation:bf-pastille 1.4s steps(2) infinite}
.badge:has(.recup){border-color:var(--accent)}

/* ---------- Godpack ---------- */
.pack.god{border-color:#ffd23f;animation:bf-god 1.2s linear infinite}
@keyframes bf-god{0%{box-shadow:0 0 22px 6px #ff4fa3}25%{box-shadow:0 0 28px 8px #ffd23f}50%{box-shadow:0 0 22px 6px #3bd6ff}75%{box-shadow:0 0 28px 8px #a259ff}100%{box-shadow:0 0 22px 6px #ff4fa3}}

/* ---------- Godpack : spectacle ---------- */
#bfGod{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden}
#bfGod>*{position:absolute;inset:0}
#bfGod .g-vig{background:radial-gradient(ellipse at var(--cx) var(--cy),transparent 12%,rgba(10,5,30,.78) 75%);animation:g-vig 5.2s ease-in-out both}
@keyframes g-vig{0%{opacity:0}12%,72%{opacity:1}100%{opacity:0}}
#bfGod .g-rays{background:repeating-conic-gradient(from 0deg at var(--cx) var(--cy),#ff4fa3 0 10deg,#ffd23f 10deg 20deg,#3bd6ff 20deg 30deg,#a259ff 30deg 40deg);
  -webkit-mask:radial-gradient(circle at var(--cx) var(--cy),#000 0,transparent 62%);mask:radial-gradient(circle at var(--cx) var(--cy),#000 0,transparent 62%);opacity:0;mix-blend-mode:screen;animation:g-rays 5.2s linear both}
#bfGod .g-rays2{animation-direction:reverse;animation-duration:7s;transform:scale(1.4)}
@keyframes g-rays{0%{opacity:0;transform:rotate(0)}15%{opacity:.5}70%{opacity:.38}100%{opacity:0;transform:rotate(120deg)}}
#bfGod .g-flash{background:radial-gradient(circle at var(--cx) var(--cy),#fff 0,#fff6c0 30%,rgba(255,210,63,.6) 60%,transparent 100%);animation:g-flash 1s ease-out both}
@keyframes g-flash{0%{opacity:0}8%{opacity:1}100%{opacity:0}}
#bfGod .g-ban{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;animation:g-ban 5s steps(1,end) both}
#bfGod .g-ban b{font-size:clamp(34px,10vw,96px);letter-spacing:.04em;background:linear-gradient(90deg,#ff4fa3,#ffd23f,#3bd6ff,#a259ff,#ff4fa3);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(5px 5px 0 #14102e) drop-shadow(-3px -3px 0 #14102e) drop-shadow(3px -3px 0 #14102e) drop-shadow(-3px 3px 0 #14102e);animation:g-slam .7s cubic-bezier(.2,1.6,.3,1) .15s both,g-arc 1.2s linear infinite}
#bfGod .g-ban small{font-size:clamp(9px,2.2vw,16px);color:#fff;text-shadow:3px 3px 0 #14102e,-2px -2px 0 #14102e,2px -2px 0 #14102e,-2px 2px 0 #14102e;animation:g-slam .5s ease-out .5s both}
@keyframes g-slam{0%{transform:scale(4) rotate(-6deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes g-arc{to{background-position:300% 0}}
@keyframes g-ban{0%,75%{opacity:1}100%{opacity:0}}
main.g-secoue{animation:g-secoue .12s steps(2) infinite}
@keyframes g-secoue{0%{transform:translate(6px,-4px)}50%{transform:translate(-6px,5px)}100%{transform:translate(4px,6px)}}
.pack.god-pop{animation:bf-god 1.2s linear infinite,g-pop 1.5s cubic-bezier(.3,1.5,.4,1)}
@keyframes g-pop{0%{transform:scale(1)}15%{transform:scale(1.18) rotate(-2deg)}35%{transform:scale(1.1) rotate(2deg)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
html.calme #bfGod .g-vig,html.calme #bfGod .g-rays{display:none}

/* réglages : défausse automatique, avec les pastilles des boutons de vote */
#bfReglages fieldset.bfDef{margin:10px 0 0;padding:0;border:0}
#bfReglages fieldset.bfDef legend{padding:0;margin-bottom:2px;font-size:9px}
.vote.mini{display:inline-block;width:18px;height:18px;border-width:2px;box-shadow:2px 2px 0 var(--line),inset 2px 2px 0 rgba(255,255,255,.38),inset -2px -2px 0 rgba(0,0,0,.28);flex:none}
.field[hidden]{display:none}

#bfReglages label.bfSpe{margin-top:6px;padding-top:6px;border-top:2px dashed var(--line)}

/* ---------- vitrine de badges ---------- */
.vslots{margin:10px 0 4px}
.vrow{display:flex;gap:12px;margin:6px 0}
.vslot{position:relative;width:68px;height:68px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:3px dashed var(--line);background:color-mix(in srgb,var(--panel) 60%,transparent);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.vslot.plein{border-style:solid;background:var(--panel)}
.vslot.sur{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--panel));transform:scale(1.08)}
.vslot svg{width:48px;height:48px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25))}
.vslot .vx{position:absolute;right:-9px;top:-9px;width:22px;height:22px;min-height:0;padding:0;line-height:1;font-size:13px;border-width:2px;box-shadow:2px 2px 0 var(--line)}
.badge:has(.recup),.badge:not(.verrou):not(.secret){cursor:grab}
.badge:not(.verrou){touch-action:pan-y}
html.vglisse,html.vglisse *{user-select:none;cursor:grabbing!important}
.vfant{position:fixed;z-index:10000;width:64px;height:64px;transform:translate(-50%,-50%) rotate(-6deg);pointer-events:none;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.3))}
.vfant svg{width:100%;height:100%}
.vitrine-flot{position:fixed;inset:0;z-index:3;pointer-events:none}
.vbadge{--s:clamp(80px,9vw,140px);position:relative;width:var(--s);height:var(--s);opacity:0;animation:vb-entre .9s cubic-bezier(.2,.9,.3,1) var(--d,0s) forwards,vb-flotte 3.6s ease-in-out calc(var(--d,0s) + .9s) infinite}
.vbadge svg{width:100%;height:100%;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.25))}
@keyframes vb-entre{from{opacity:0;transform:scale(.5) translateY(30px)}to{opacity:1;transform:none}}
@keyframes vb-flotte{0%,100%{opacity:1;transform:translateY(0) rotate(-3deg)}50%{opacity:1;transform:translateY(-14px) rotate(3deg)}}
html.calme .vbadge{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){.vbadge{animation:none;opacity:1}}

/* badges choisis : petit encadré discret « Badges » sous le pseudo, badges en ligne (ils gardent leur taille) */
.vitrine-vue{margin:10px 0 14px;zoom:.7692}      /* la page de profil est agrandie (zoom 1,3) : les badges gardent leur taille d’origine */
.vitrine-vue[hidden]{display:none}
.vitrine-cadre{display:inline-flex;flex-direction:column;gap:6px;max-width:100%;padding:8px 18px 14px;border:3px solid var(--line);background:color-mix(in srgb,var(--panel) 55%,transparent);box-shadow:3px 3px 0 color-mix(in srgb,var(--line) 45%,transparent);opacity:.95}
.vitrine-cadre .vtitre{font-size:9px;letter-spacing:.08em;opacity:.7}
.vitrine-cadre .vligne{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;align-items:center}

/* badges de la vitrine : un peu plus petits sur le profil des autres */
.vitrine-vue .vbadge{--s:clamp(60px,6.6vw,96px)}

/* noms de badges : jamais plus larges que leur case (retour à la ligne, césure des mots très longs) */
.badge{min-width:0;box-sizing:border-box}
.badge>span{display:block;max-width:100%;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}

/* réglage du volume de la musique */
#bfReglages .bfVol{display:flex;flex-direction:column;align-items:stretch;gap:6px}
#bfReglages .bfVol input[type=range]{width:100%;accent-color:var(--accent)}

/* Bulle d'explication du dealer (même style que la visite guidée) */
#bfDealerInfo,#bfSwipeInfo{position:fixed;z-index:80;padding:14px;background:var(--panel);color:var(--ink);border:var(--bw-l) solid var(--line);box-shadow:var(--sh-l);font-size:9px;line-height:1.6;animation:bf-pop .3s steps(5)}
#bfDealerInfo p,#bfSwipeInfo p{margin:0 0 12px}
#bfDealerInfo .row,#bfSwipeInfo .row{justify-content:flex-end}
#bfDealerInfo::before,#bfSwipeInfo::before{content:"";position:absolute;left:var(--fx,20px);width:12px;height:12px;background:var(--panel);transform:rotate(45deg)}
#bfDealerInfo[data-pos="bas"]::before,#bfSwipeInfo[data-pos="bas"]::before{top:-9px;border-left:var(--bw-l) solid var(--line);border-top:var(--bw-l) solid var(--line)}
#bfDealerInfo[data-pos="haut"]::before,#bfSwipeInfo[data-pos="haut"]::before{bottom:-9px;border-right:var(--bw-l) solid var(--line);border-bottom:var(--bw-l) solid var(--line)}
html[lang="ja"] #bfDealerInfo,html[lang="zh"] #bfDealerInfo,html[lang="ko"] #bfDealerInfo,html[lang="ja"] #bfSwipeInfo,html[lang="zh"] #bfSwipeInfo,html[lang="ko"] #bfSwipeInfo{font-size:12px;letter-spacing:0}