/* Butamax · jeux en ligne classés. Même univers que l'appli : carbone, Archivo élargi italique, vert ; VIP doré.
   Langage de mouvement : balayages obliques (habillage TV) et chiffres « tableau d'affichage ». */
.j-shell{max-width:1180px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-left,0px)) 80px;display:flex;flex-direction:column;gap:28px}
.j-loading{color:var(--muted)}
.j-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.j-head h1{font-size:clamp(1.9rem,5vw,3rem)}
.j-head p{color:#C9C9D1;max-width:60ch;margin-top:8px}
.j-quota{font-size:.88rem;color:var(--muted)}
.j-quota b{color:var(--fg);font-variant-numeric:tabular-nums}
.j-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:980px){.j-grid{grid-template-columns:minmax(0,1fr)}}
.j-sec-t{font-size:1.15rem;margin-bottom:12px}

/* tuiles de jeu */
.j-games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.j-game{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px;isolation:isolate}
.j-game::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 100% 0%,rgba(166,255,58,.12),transparent 60%)}
.j-game.soon{opacity:.62}
.j-game.soon::before{background:none}
.j-game-top{display:flex;gap:14px;align-items:flex-start}
.j-pict{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
.j-pict svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.j-game h3{font-size:1.25rem}
.j-game p{color:#B4B4BD;font-size:.92rem;margin-top:4px}
.j-elo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
.j-elo b{font-family:var(--f-head);font-stretch:125%;font-style:italic;font-weight:900;font-size:1.5rem;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1}
.j-acts{display:flex;gap:8px;flex-wrap:wrap}
.j-acts .btn{flex:1 1 140px}
.j-soon{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;align-self:flex-start}

/* rangs */
.j-rank{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.j-rank i{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:currentColor}
.j-rank.bronze{color:#E2A06B;background:rgba(205,127,50,.12);border-color:rgba(205,127,50,.35)}
.j-rank.argent{color:#D9DDE3;background:rgba(200,205,212,.1);border-color:rgba(200,205,212,.3)}
.j-rank.or{color:#F2C866;background:rgba(224,176,74,.12);border-color:rgba(224,176,74,.4)}
.j-rank.platine{color:#7FE3D8;background:rgba(80,210,195,.1);border-color:rgba(80,210,195,.35)}
.j-rank.diamant{color:#8EC5FF;background:rgba(90,180,255,.12);border-color:rgba(90,180,255,.4)}
.j-rank.elite{color:#D3A6FF;background:rgba(170,110,255,.12);border-color:rgba(170,110,255,.4)}
.j-rank.legende{color:#1E1503;background:linear-gradient(100deg,#FFE7A3,#E0B04A 55%,#B9832A)}

/* panneaux latéraux */
.j-panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
.j-panel+.j-panel{margin-top:16px}
.j-friends{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto}
.j-friends li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px}
.j-friends li:hover{background:var(--surface-2)}
.j-av{position:relative;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);font-size:.74rem;font-weight:800}
.j-av.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--surface)}
.j-fname{flex:1;min-width:0;display:flex;flex-direction:column}
.j-fname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.94rem}
.j-fname small{color:var(--muted);font-size:.78rem}
.j-board{width:100%;border-collapse:collapse;font-size:.9rem}
.j-board td{padding:7px 4px;border-bottom:1px solid var(--line)}
.j-board td:first-child{width:2.2em;color:var(--muted);font-variant-numeric:tabular-nums}
.j-board td.num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.j-board tr.me td{color:var(--accent)}
.j-tabs{display:flex;gap:4px;flex-wrap:wrap}
.j-tabs button{border:1px solid var(--line);background:none;color:var(--muted);border-radius:999px;padding:5px 12px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.j-tabs button[aria-pressed="true"]{background:var(--surface-2);color:var(--fg);border-color:#3A3A42}

/* recherche / attente */
.j-wait{min-height:58vh;display:grid;place-items:center;text-align:center}
.j-wait-in{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:440px}
.j-radar{position:relative;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(166,255,58,.12),transparent 70%);border:1px solid rgba(166,255,58,.25)}
.j-radar::before,.j-radar::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(166,255,58,.35);animation:j-ping 2.4s cubic-bezier(.16,1,.3,1) infinite}
.j-radar::after{animation-delay:1.2s}
.j-radar span{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(166,255,58,.45),transparent 25%);animation:j-spin 2.2s linear infinite}
@keyframes j-ping{from{transform:scale(.35);opacity:1}to{transform:scale(1.25);opacity:0}}
@keyframes j-spin{to{transform:rotate(360deg)}}
.j-wait h2{font-size:1.6rem}
.j-wait p{color:#C9C9D1}
.j-code{font-family:var(--f-head);font-stretch:125%;font-style:italic;font-weight:900;font-size:2.4rem;letter-spacing:.14em}

/* partie */
.j-match{display:flex;flex-direction:column;gap:18px;max-width:860px;width:100%;margin:0 auto}
.j-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 18px}
.j-pl{display:flex;flex-direction:column;gap:4px;min-width:0}
.j-pl.r{align-items:flex-end;text-align:right}
.j-pl b{font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.j-pl small{color:var(--muted);font-size:.8rem}
.j-pl .j-dot{font-size:.74rem;font-weight:700;color:var(--muted)}
.j-pl .j-dot.ok{color:var(--ok)}
.j-mid{text-align:center}
.j-big{font-family:var(--f-head);font-stretch:125%;font-style:italic;font-weight:900;font-size:clamp(1.8rem,6vw,2.8rem);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.j-round{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.j-timer{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.j-timer i{display:block;height:100%;background:var(--grad);transform-origin:left;transition:background .3s}
.j-timer.low i{background:var(--danger)}
.j-stage{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.j-stage.enter{animation:j-wipe .55s cubic-bezier(.16,1,.3,1) both}
@keyframes j-wipe{from{clip-path:polygon(-20% 0,-20% 0,-38% 100%,-38% 100%)}to{clip-path:polygon(-20% 0,120% 0,102% 100%,-38% 100%)}}
.j-ctx{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.84rem;color:#C9C9D1}
.j-pill{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--accent);padding:3px 9px;border-radius:999px;color:var(--fg)}
.j-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;text-align:center}
.j-teams b{font-family:var(--f-head);font-stretch:125%;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(1.05rem,3.4vw,1.6rem);line-height:1.05}
.j-vs{color:var(--muted);font-weight:800}
.j-context{color:#D4D4DA;font-size:.98rem;max-width:62ch}
.j-steppers{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.j-step{display:flex;align-items:center;justify-content:center;gap:10px}
.j-step button{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);font:inherit;font-size:1.4rem;font-weight:800;cursor:pointer}
.j-step button:active{transform:scale(.94)}
.j-step output{font-family:var(--f-head);font-stretch:125%;font-style:italic;font-weight:900;font-size:2.6rem;min-width:1.6em;text-align:center;font-variant-numeric:tabular-nums}
.j-q{font-size:clamp(1.15rem,3.4vw,1.55rem);font-weight:800;line-height:1.3}
.j-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:800}
.j-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:620px){.j-choices{grid-template-columns:minmax(0,1fr)}}
.j-choice{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);font:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.j-choice:hover:not(:disabled){border-color:#4A4A52}
.j-choice:active:not(:disabled){transform:scale(.98)}
.j-choice kbd{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);font:inherit;font-size:.8rem;color:var(--muted)}
.j-choice.picked{border-color:var(--accent);background:rgba(166,255,58,.08)}
.j-choice.good{border-color:var(--ok);background:rgba(43,214,123,.14)}
.j-choice.bad{border-color:var(--danger);background:rgba(255,84,104,.1)}
.j-choice .who{margin-left:auto;display:flex;gap:4px}
.j-choice .who span{font-size:.68rem;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:#C9C9D1}
.j-choice:disabled{cursor:default}
.j-status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.j-status p{color:var(--muted);font-size:.9rem}
.j-reveal{display:flex;flex-direction:column;gap:12px}
.j-real{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
.j-real .j-big{color:var(--accent);animation:j-flap .5s cubic-bezier(.16,1,.3,1) both}
@keyframes j-flap{from{clip-path:inset(0 0 100% 0);transform:translateY(-14px)}to{clip-path:inset(0);transform:none}}
.j-anec{color:#D4D4DA;background:var(--surface-2);border-radius:14px;padding:12px 14px;font-size:.94rem}
.j-guesses{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.j-guess{background:var(--surface-2);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.9rem}
.j-guess b{font-variant-numeric:tabular-nums}
.j-pts{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.j-pts.zero{color:var(--muted)}

/* fin de partie */
.j-end{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:28px 18px;background:var(--surface);border:1px solid var(--line);border-radius:22px;position:relative;overflow:hidden}
.j-end.win{border-color:rgba(166,255,58,.45);background:radial-gradient(70% 60% at 50% 0%,rgba(166,255,58,.16),transparent 70%),var(--surface)}
.j-end.loss{border-color:rgba(255,84,104,.35)}
.j-end h2{font-size:clamp(2rem,7vw,3.4rem);animation:j-wipe .6s cubic-bezier(.16,1,.3,1) both}
.j-delta{font-family:var(--f-head);font-stretch:125%;font-style:italic;font-weight:900;font-size:1.8rem;font-variant-numeric:tabular-nums}
.j-delta.up{color:var(--accent)}.j-delta.down{color:var(--danger)}
.j-end p{color:#C9C9D1;max-width:52ch}
.j-hist{width:100%;max-width:560px;display:flex;flex-direction:column;gap:6px;text-align:left}
.j-hist div{display:flex;justify-content:space-between;gap:10px;background:var(--surface-2);border-radius:10px;padding:8px 12px;font-size:.86rem}
.j-hist span{color:#C9C9D1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.j-hist b{font-variant-numeric:tabular-nums;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .j-radar::before,.j-radar::after,.j-radar span{animation:none}
  .j-stage.enter,.j-end h2,.j-real .j-big{animation:none}
}

/* Devinettes transferts */
.j-chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.j-chain li{position:relative;padding:9px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-weight:800}
.j-chain li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}
.j-chain li:not(:last-child){margin-right:12px}
.j-chain li.new{animation:j-wipe .5s cubic-bezier(.16,1,.3,1) both;border-color:rgba(166,255,58,.5)}
.j-chain li.more{background:none;border-style:dashed;color:var(--muted);font-weight:600}
.j-hint{align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(242,194,48,.12);border:1px solid rgba(242,194,48,.4);color:#F2C230;font-weight:800;font-size:.9rem}
.j-answer{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.j-picker{position:relative;flex:1 1 260px}
.j-picker .input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:1rem}
.j-picker .input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.j-sugg{position:relative;margin-top:6px;z-index:20;max-height:min(46vh,340px);overflow:auto;list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.j-sugg li{padding:9px 12px;border-radius:8px;cursor:pointer;font-weight:600;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.j-sugg li small{font-weight:500;margin:0!important}
.j-sugg li[aria-selected="true"],.j-sugg li:hover{background:var(--surface-2)}

/* Morpion */
.j-grid3{display:grid;grid-template-columns:minmax(76px,.8fr) repeat(3,minmax(0,1fr));gap:8px}
.j-corner{min-height:10px}
.j-crit{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 6px;border-radius:12px;background:rgba(166,255,58,.06);border:1px solid rgba(166,255,58,.25);font-weight:800;font-size:.82rem;line-height:1.2}
.j-crit.row{justify-content:flex-start;text-align:left}
.j-cell{min-height:84px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font:inherit;font-size:1.6rem;font-weight:800;display:grid;place-items:center;padding:6px;text-align:center}
button.j-cell:not(:disabled){cursor:pointer;color:var(--accent)}
button.j-cell:not(:disabled):hover{border-color:var(--accent)}
button.j-cell.sel{border-color:var(--accent);background:rgba(166,255,58,.1);box-shadow:var(--focus)}
.j-cell.taken span{font-size:.82rem;font-weight:800;line-height:1.2;color:var(--fg)}
.j-cell.mine{background:rgba(166,255,58,.14);border-color:rgba(166,255,58,.55)}
.j-cell.theirs{background:rgba(255,84,104,.12);border-color:rgba(255,84,104,.45)}
.j-cell.line{animation:j-glow 1.2s ease-in-out infinite alternate}
@keyframes j-glow{to{box-shadow:0 0 0 3px rgba(166,255,58,.55)}}
.j-last{font-size:.92rem;font-weight:700}
.j-last.ok{color:var(--ok)}.j-last.ko{color:#FF8A98}
@media (max-width:560px){.j-grid3{grid-template-columns:minmax(64px,.75fr) repeat(3,minmax(0,1fr));gap:6px}.j-crit{font-size:.7rem;padding:6px 4px}.j-cell{min-height:56px}.j-cell.taken span{font-size:.7rem}}
@media (prefers-reduced-motion:reduce){.j-chain li.new,.j-cell.line{animation:none}}

/* Duel de pronos */
.j-duels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.j-duel{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--surface-2);border-radius:14px;padding:10px 12px}
.j-duel-m{display:flex;flex-direction:column;min-width:0}
.j-duel-m small{color:var(--muted);font-size:.8rem}
.j-duel-s{display:flex;align-items:center;gap:8px}
.j-step.sm button{width:36px;height:36px;font-size:1.1rem;border-radius:10px}
.j-step.sm output{font-size:1.6rem;min-width:1.2em}
.j-duel-t th{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}
.j-duel-t .num{text-align:right;white-space:nowrap}
.j-live{color:var(--danger);font-weight:800}

/* entraînement : bot et solo */
.j-train{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;border-top:1px solid var(--line);padding-top:12px;margin-top:-2px}
.j-train-l{font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.j-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 2px;font:inherit;font-size:.88rem;font-weight:800;color:var(--fg);cursor:pointer;min-height:32px}
.j-link:hover{color:var(--accent)}
.j-ico svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.j-best{margin-left:auto;font-size:.8rem;color:var(--muted)}
.j-best b{color:var(--fg);font-variant-numeric:tabular-nums}
.j-levels{display:flex;flex-direction:column;gap:8px}
.j-level{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit;color:var(--fg);cursor:pointer}
.j-level:hover,.j-level.cur{border-color:var(--accent)}
.j-level span{display:flex;flex-direction:column;gap:2px}
.j-level small{color:var(--muted);font-size:.82rem}
.j-stars{flex:none;color:var(--warn);letter-spacing:1px;font-size:.95rem}
.j-botchip{display:inline-block;vertical-align:2px;margin-left:6px;font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--info);border:1px solid rgba(90,180,255,.4);border-radius:999px;padding:1px 7px}
.j-score.solo .j-big{font-variant-numeric:tabular-nums}
@media (max-width:480px){
  .j-steppers{gap:6px}
  .j-step{gap:4px}
  .j-step button{width:38px;height:38px;font-size:1.2rem}
  .j-step output{font-size:2rem;min-width:1.1em}
  .j-score.solo{grid-template-columns:auto 1fr auto}
}

/* ---------- cartes à collectionner (album des légendes) ----------
   Mise en page « carte de jeu » (cards-ui.js) ; cadre et effets selon la rareté :
   commune mate, rare métal + reflet, épique holographique, légendaire or + holo + étincelles + cadre animé.
   --rx/--ry/--mx/--my : inclinaison et reflet posés par cards-ui.js au survol. */
@property --bm-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.bm-card{--c1:#3A3A42;--c2:#16161A;--ink:#F4F4F6;--acc:#C9CDD3;--glow:transparent;--rx:0deg;--ry:0deg;--mx:50%;--my:30%;
  position:relative;aspect-ratio:5/7;border-radius:14px;padding:2.4%;color:var(--ink);container-type:inline-size;min-width:0;
  background:linear-gradient(150deg,var(--acc),var(--c1) 45%,var(--c2));box-shadow:0 12px 30px -14px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04),0 0 22px -6px var(--glow);
  transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s;transform-style:preserve-3d}
.bm-card.tilt{transition:transform .08s linear,box-shadow .3s;box-shadow:0 22px 40px -16px rgba(0,0,0,.9),0 0 34px -4px var(--glow)}
.bm-card-in{position:relative;height:100%;border-radius:11px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--c1),var(--c2))}
/* stade de nuit : faisceaux de projecteurs et lignes du terrain */
.bm-card-flag{width:12cqw;height:8cqw;border-radius:1.5cqw;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 2px 4px rgba(0,0,0,.5)}
.bm-card-no{font-size:6.5cqw;font-weight:800;letter-spacing:.06em;opacity:.8;font-variant-numeric:tabular-nums;padding:1cqw 2.5cqw;border-radius:99px;background:rgba(0,0,0,.4)}
.bm-card-rar{font-size:5.4cqw;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.bm-card-glare{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(60% 45% at var(--mx) var(--my),rgba(255,255,255,.35),transparent 70%);mix-blend-mode:overlay}
.bm-card.tilt .bm-card-glare{opacity:1}
.bm-card-new,.bm-card-x{position:absolute;z-index:6;font-size:5.6cqw;font-weight:900;padding:1cqw 3cqw;border-radius:99px}
.bm-card-new{top:40cqw;left:4cqw;background:var(--accent,#A6FF3A);color:#061200;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.bm-card-x{top:30cqw;left:4cqw;background:rgba(0,0,0,.65);border:1px solid var(--acc)}

/* commune : mate, grain discret */
.bm-card.r-commune{--acc:#C9CDD3;--c1:#3A3B43;--c2:#17171B}
.bm-card.r-commune .bm-card-in::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.08;background:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 4px)}
/* rare : métal bleu, reflet qui balaie */
.bm-card.r-rare{--acc:#7DB8FF;--c1:#15365C;--c2:#0A1626;--glow:rgba(90,170,255,.35)}
.bm-card.r-rare .bm-card-in::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(200,230,255,.28) 48%,transparent 60%);background-size:260% 100%;animation:bmShine 5.5s ease-in-out infinite}
/* épique : holographique violet */
.bm-card.r-epique{--acc:#D2A6FF;--c1:#3A1C66;--c2:#140A27;--glow:rgba(190,120,255,.55)}
.bm-card-foil{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:color-dodge;opacity:.16;
  background:repeating-linear-gradient(115deg,#ff6fd8 0%,#7afcff 7%,#feff9c 14%,#ff6fd8 21%),radial-gradient(70% 50% at var(--mx) var(--my),rgba(255,255,255,.5),transparent);
  background-size:300% 300%,100% 100%;background-position:var(--mx) var(--my),0 0;animation:bmHolo 7s linear infinite}
.bm-card.tilt .bm-card-foil{opacity:.3;animation:none}
/* légendaire : or, holo, étincelles, cadre lumineux qui tourne */
.bm-card.r-legende{--acc:#FFD86E;--c1:#5A3C0E;--c2:#1C1204;--ink:#FFF6DC;--glow:rgba(255,200,80,.7);
  background:conic-gradient(from var(--bm-a),#FFE9A8,#C8902B,#FFF4C9,#8A5A12,#FFE9A8);animation:bmSpin 5s linear infinite}
.bm-card.r-legende .bm-card-foil{opacity:.4;mix-blend-mode:overlay}
.bm-card.r-legende .bm-card-in::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,240,190,.45) 45%,transparent 60%);background-size:250% 100%;animation:bmShine 3.6s linear infinite;mix-blend-mode:screen}
.bm-card-spark{position:absolute;inset:0;z-index:5;pointer-events:none}
.bm-card-spark i{position:absolute;left:var(--x);top:var(--y);width:4cqw;height:4cqw;background:radial-gradient(circle,#fff 0 20%,transparent 60%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:bmTwinkle 2.6s ease-in-out infinite;animation-delay:var(--d);opacity:0}
@keyframes bmShine{from{background-position:150% 0}to{background-position:-100% 0}}
@keyframes bmHolo{from{background-position:0% 50%,0 0}to{background-position:300% 50%,0 0}}
@keyframes bmSpin{to{--bm-a:360deg}}
@keyframes bmTwinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}}
.bm-card.fresh{animation:bmPop .7s cubic-bezier(.2,1.4,.4,1) both}
.bm-card.r-legende.fresh{animation:bmPop .7s cubic-bezier(.2,1.4,.4,1) both,bmSpin 5s linear infinite}
@keyframes bmPop{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
/* carte de collection : cadre texturé, badge Butamax, rareté, portrait, nom vertical, numéro et poste, écusson, drapeau */
.bm-card.pc{padding:0;border-radius:4.5%/3.2%}
.bm-card.pc{--foil:linear-gradient(135deg,#7a7d86,#e9ebef 22%,#9a9da6 40%,#f4f5f7 58%,#8b8e97 78%,#d6d8dd)}
.bm-card.pc.r-rare{--foil:linear-gradient(135deg,#1b4b8f,#8cc4ff 22%,#2a64b0 40%,#cfe6ff 58%,#1d4f95 78%,#7fb6f5)}
.bm-card.pc.r-epique{--foil:linear-gradient(135deg,#4b1d82,#d6a8ff 22%,#6a2bb3 40%,#f0dcff 58%,#4d1f88 78%,#c08af5)}
.bm-card.pc.r-legende{--foil:linear-gradient(135deg,#9c6a12,#ffe39a 20%,#c48a1e 38%,#fff3c4 55%,#b07818 72%,#f1c65a 88%,#8a5a0e);animation:none}
.bm-card.pc .bm-card-in{border-radius:inherit;background:var(--foil)}
/* texture froissée de la feuille métallisée */
.bm-card.pc .bm-card-in::before{content:"";position:absolute;inset:0;z-index:0;opacity:.55;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/60cqw}
.pc-photo{position:absolute;z-index:1;left:15cqw;right:4.5cqw;top:5.5cqw;bottom:5.5cqw;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 94%,94% 100%,46% 100%,0 72%);box-shadow:inset 0 0 0 .5cqw rgba(0,0,0,.35);
  background:radial-gradient(60% 40% at 50% 30%,color-mix(in srgb,var(--f1) 45%,#2b2f45),#121522 75%)}
.pc-crowd{position:absolute;inset:0;opacity:.8;filter:blur(.5cqw);
  background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--f2) 70%,#fff) 0 1.2cqw,transparent 2.4cqw),radial-gradient(circle at 30% 10%,var(--f1) 0 1.4cqw,transparent 2.8cqw),
  radial-gradient(circle at 52% 22%,#fff 0 .8cqw,transparent 2cqw),radial-gradient(circle at 70% 12%,var(--f2) 0 1.3cqw,transparent 2.6cqw),radial-gradient(circle at 88% 26%,var(--f1) 0 1.2cqw,transparent 2.4cqw),
  radial-gradient(circle at 20% 38%,var(--f1) 0 1.1cqw,transparent 2.2cqw),radial-gradient(circle at 82% 44%,#fff 0 .9cqw,transparent 2cqw),radial-gradient(circle at 8% 52%,var(--f2) 0 1.2cqw,transparent 2.4cqw),
  repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2cqw,transparent 2cqw 4.4cqw)}
.pc-hero{position:absolute;left:-10cqw;right:-16cqw;bottom:-4cqw}
.pc-hero svg{display:block;width:100%;height:auto;filter:drop-shadow(0 1cqw 1.5cqw rgba(0,0,0,.55))}
.pc-brand{position:absolute;z-index:3;top:3.2cqw;left:3.5cqw;font-family:var(--f-head);font-style:italic;font-weight:900;font-size:5.6cqw;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;background:#111;padding:.8cqw 5cqw .8cqw 3cqw;clip-path:polygon(0 0,100% 0,88% 100%,0 100%);box-shadow:0 .5cqw 1cqw rgba(0,0,0,.4)}
.pc-rar{position:absolute;z-index:3;top:2.8cqw;right:3.5cqw;max-width:46cqw;text-align:right;line-height:.95;font-family:var(--f-head);font-style:italic;font-weight:900;font-size:min(6.2cqw,calc(52cqw / var(--w,8)));text-transform:uppercase;letter-spacing:.01em;
  color:var(--acc);background:linear-gradient(90deg,rgba(17,17,17,.92),#111);padding:.6cqw 3cqw .6cqw 6cqw;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);
  text-shadow:0 0 1.5cqw color-mix(in srgb,var(--acc) 60%,transparent)}
.bm-card.pc.r-legende .pc-rar{background:linear-gradient(90deg,rgba(17,17,17,.92),#111);color:#F7D774}
.pc-crest{position:absolute;z-index:3;top:19cqw;right:7cqw;width:13cqw;height:auto;filter:drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.5))}
.pc-name{position:absolute;z-index:3;left:2.2cqw;top:12cqw;height:92cqw;margin:0;width:11cqw;display:block;text-align:center;
  writing-mode:vertical-rl;transform:rotate(180deg);text-wrap:nowrap;overflow:visible;font-family:var(--f-head);font-stretch:85%;font-weight:900;text-transform:uppercase;line-height:1;
  font-size:min(9.4cqw,calc(128cqw / var(--len,14)));color:#111;white-space:nowrap;letter-spacing:.01em}
.pc-pos{position:absolute;z-index:3;left:3.5cqw;bottom:5cqw;width:40cqw;color:#111;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:1cqw}
.pc-pos b{grid-column:1/-1;font-family:var(--f-head);font-stretch:85%;font-weight:900;font-size:13cqw;line-height:.9}
.pc-pos span{font-family:var(--f-head);font-weight:800;font-size:3.5cqw;line-height:1.05;text-transform:uppercase;min-width:0}
.pc-name span{white-space:nowrap!important}
.pc-kick{width:11cqw;height:auto;color:#111;margin-left:-1cqw}
.pc-flag{position:absolute;z-index:3;right:7cqw;bottom:9cqw}
.pc-flag .bm-card-flag{display:block;width:20cqw;height:13.3cqw;border-radius:.6cqw;box-shadow:0 0 0 .5cqw rgba(255,255,255,.7),0 1cqw 1.6cqw rgba(0,0,0,.45)}
.pc-no{position:absolute;z-index:3;left:50cqw;bottom:1.1cqw;font-size:3.4cqw;font-weight:800;color:rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.bm-card.pc .bm-card-foil{z-index:2;opacity:.12}
.bm-card.pc .bm-card-in::after{z-index:2}
.bm-card.pc .bm-card-new{top:auto;bottom:26cqw;left:auto;right:7cqw}
.bm-card.pc .bm-card-x{top:auto;bottom:26cqw;left:auto;right:30cqw}
.bm-card.pc{cursor:zoom-in}
.bm-zoom{border:0;padding:0;background:none;max-width:none;overflow:visible}
.bm-zoom::backdrop{background:rgba(5,5,8,.82);backdrop-filter:blur(4px)}
.bm-zoom .bm-card{width:min(92vw,440px,calc(88vh * 5 / 7));cursor:default}
.bm-zoom .bm-card.pc{cursor:default}
.bm-card.pc.r-secrete{--acc:#F2F2F7;--glow:rgba(200,160,255,.75);--foil:linear-gradient(135deg,#0c0c10,#3a3a44 20%,#101014 38%,#4a4a56 56%,#0e0e12 74%,#2c2c34)}
.bm-card.pc.r-secrete .bm-card-in::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;
  background:linear-gradient(115deg,#ff5f6d,#ffc371,#fffa8a,#7af7a2,#5ec8ff,#b38cff,#ff5f6d);background-size:300% 300%;animation:bmHolo 6s linear infinite;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:4.5cqw 4.5cqw 5.5cqw 15cqw}
.bm-card.pc.r-secrete .pc-rar{background:#000;color:#F1E6FF;text-shadow:-.4cqw 0 1cqw #ff7a85,.4cqw 0 1cqw #7ad2ff,0 0 2cqw #c9a4ff}
.bm-card.pc.r-secrete .pc-name,.bm-card.pc.r-secrete .pc-pos,.bm-card.pc.r-secrete .pc-kick{color:#F4F4F8}
.bm-card.pc.r-secrete .pc-no{color:rgba(255,255,255,.65)}
.bm-card.missing.secret{background:radial-gradient(circle at 50% 40%,#2a2238,#0c0c10 70%);border:1.5px solid #5a4a7a}
.bm-card.missing.secret .bm-card-q{opacity:.6;background:linear-gradient(90deg,#ff7a85,#ffd27a,#9cf7b4,#7ad2ff,#c9a4ff);-webkit-background-clip:text;color:transparent;font-size:20cqw}
.bm-card.missing.secret .bm-card-rar,.bm-card.missing.secret .bm-card-no{color:#b9a8dc}
.bm-card.missing{background:repeating-linear-gradient(135deg,#1A1A1F 0 8px,#141418 8px 16px);box-shadow:none;border:1.5px dashed #3A3A42;padding:0;transform:none}
.bm-card.missing .bm-card-in{background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;color:#6B6B75}
.bm-card.missing .bm-card-no{font-size:11cqw;opacity:1;background:none}
.bm-card-q{font-family:var(--f-head);font-weight:900;font-size:30cqw;line-height:1;opacity:.35}
.bm-card.missing .bm-card-rar{color:#6B6B75}
@media (prefers-reduced-motion:reduce){.bm-card,.bm-card *,.bm-card-in::after{animation:none!important;transition:none!important}.bm-card{transform:none!important}}

.j-reward{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:10px}
.j-reward-cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.j-reward-cards .bm-card{width:clamp(120px,30vw,160px)}
.j-coll-link{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--accent);text-decoration:none}

/* page Collection */
.c-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.c-head h1{font-size:clamp(1.9rem,5vw,3rem)}
.c-head p{color:#C9C9D1;max-width:62ch;margin-top:8px}
.c-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.c-stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.c-stat b{font-family:var(--f-head);font-stretch:125%;font-style:italic;font-weight:900;font-size:1.5rem;font-variant-numeric:tabular-nums}
.c-stat small{color:var(--muted);font-size:.8rem}
.c-bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.c-bar i{display:block;height:100%;background:var(--accent)}
.c-stat.r-legende b{color:#F4CF6E}.c-stat.r-legende .c-bar i{background:#F4CF6E}
.c-stat.r-epique .c-bar i{background:#C99BFF}.c-stat.r-secrete .c-bar i{background:linear-gradient(90deg,#ff7a85,#ffd27a,#9cf7b4,#7ad2ff,#c9a4ff)}.c-stat.r-rare .c-bar i{background:#7DB8FF}.c-stat.r-commune .c-bar i{background:#C9CDD3}
.c-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(42vw,150px),1fr));gap:12px}
.c-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.c-how li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:.9rem;color:#C9C9D1}
.c-how b{color:var(--fg)}