/* Constellation — interface du jeu. Téléphone d'abord, ordinateur ensuite. */
:root{
  --nuit:#0b1030; --fond:#0c0d22; --panneau:#161939; --panneau-2:#1f2350; --ligne:#2c3068;
  --texte:#eef0ff; --doux:#a6abd6; --or:#e6c36a; --or-clair:#f6edd2;
  --commune:#b7c0cc; --rare:#4f9cf9; --epique:#b26cf6; --legendaire:#f4b93a;
  --irise:linear-gradient(120deg,#ff6fae,#ffcf6e,#7dffb0,#6ecbff,#b98cff,#ff6fae);
  --ok:#5fd39a; --alerte:#ff8a7a;
  --titre:"Cinzel",Georgia,serif; --corps:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --gras:"Outfit","Nunito Sans",system-ui,sans-serif;
  --barre-h:58px; --menu-h:66px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--fond);color:var(--texte);font-family:var(--corps);font-size:15px;line-height:1.45;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* ciel étoilé en fond, qui dérive lentement */
#ciel{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(1200px 600px at 80% -10%,rgba(80,90,200,.28),transparent 60%),
  radial-gradient(900px 500px at -10% 110%,rgba(150,80,200,.2),transparent 60%),var(--fond)}
#ciel::before,#ciel::after{content:"";position:absolute;inset:-50%;background-image:
  radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 40% 70%,#fff,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),
  radial-gradient(1px 1px at 10% 85%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 45%,#ffe9b0,transparent),
  radial-gradient(1px 1px at 30% 10%,#fff,transparent),radial-gradient(1px 1px at 92% 88%,#fff,transparent);
  background-size:420px 420px;opacity:.5;animation:derive 240s linear infinite}
#ciel::after{background-size:610px 610px;opacity:.3;animation-duration:400s;animation-direction:reverse}
@keyframes derive{to{transform:translate(420px,210px)}}

/* barre du haut et menu */
#barre{position:sticky;top:0;z-index:20;height:calc(var(--barre-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(11,14,40,.84);backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.marque{font-family:var(--titre);font-weight:800;letter-spacing:.06em;color:var(--or);text-decoration:none;font-size:18px;white-space:nowrap}
.compteurs{display:flex;gap:6px;align-items:center}
.compteur{display:flex;align-items:center;gap:5px;background:var(--panneau);border:1px solid var(--ligne);border-radius:999px;padding:4px 10px;font-weight:800;font-family:var(--gras);font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap;text-decoration:none}
.compteur svg{width:15px;height:15px;fill:var(--or)}
.compteur.eclats svg{fill:#8fd8ff}
.icone-barre{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--panneau);border:1px solid var(--ligne);text-decoration:none}
.icone-barre svg{width:19px;height:19px;fill:var(--doux)}
.icone-barre b,.pastille-nb{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--alerte);color:#1a0d0b;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;font-family:var(--gras)}
@media (max-width:430px){.marque{font-size:0;letter-spacing:0}.marque::before{content:"✦";font-size:24px}.compteurs{gap:5px}.compteur{padding:3px 9px}}
@media (max-width:340px){.compteur{padding:3px 7px;font-size:13px}.icone-barre{width:34px;height:34px}}
#menu{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--menu-h) + env(safe-area-inset-bottom));padding:0 max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));
  display:grid;grid-template-columns:repeat(6,1fr);background:rgba(11,14,40,.94);backdrop-filter:blur(12px);border-top:1px solid var(--ligne)}
#menu a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--doux);font-size:10.5px;font-weight:800;font-family:var(--gras)}
#menu a svg{width:23px;height:23px;fill:currentColor}
#menu a.actif{color:var(--or)}
#menu a.actif::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--or)}
#menu a.boutique-lien{color:#8fd8ff}
#menu a.boutique-lien.actif{color:var(--or)}
#menu a .pastille-nb{top:6px;right:auto;left:calc(50% + 4px)}
#menu .ordi{display:none}
@media (min-width:900px){
  #menu{top:calc(var(--barre-h) + env(safe-area-inset-top));bottom:auto;right:auto;width:210px;height:auto;display:flex;flex-direction:column;gap:3px;padding:16px 10px;background:transparent;border:0;backdrop-filter:none}
  #menu a{flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 14px;border-radius:12px;font-size:15px}
  #menu a.actif{background:var(--panneau)}
  #menu a.actif::before{display:none}
  #menu a .pastille-nb{position:static;margin-left:auto}
  #menu .ordi{display:flex}
  main{margin-left:210px}
}
main{padding:18px max(16px,env(safe-area-inset-right)) calc(var(--menu-h) + 28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));max-width:1200px;outline:none}
@media (min-width:900px){main{padding-bottom:40px}}

h1,h2,h3{font-family:var(--titre);font-weight:800;letter-spacing:.03em;text-wrap:balance;margin:0}
h1{font-size:clamp(23px,5.4vw,31px);color:var(--or)}
h2{font-size:19px}
h3{font-size:16px}
.sous{color:var(--doux);margin:6px 0 0;max-width:62ch}
.pile{display:flex;flex-direction:column;gap:16px}
.ligne{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.entre{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panneau{background:linear-gradient(180deg,rgba(31,35,80,.9),rgba(22,25,57,.92));border:1px solid var(--ligne);border-radius:18px;padding:16px}
.titre-section{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.titre-section a{color:var(--or);font-weight:800;font-size:13.5px;text-decoration:none;font-family:var(--gras)}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;font-family:var(--gras);font-weight:800;font-size:15.5px;letter-spacing:.02em;text-decoration:none;
  background:linear-gradient(180deg,#f8dd92,#d9a83c);color:#1c1405;box-shadow:0 6px 20px rgba(230,195,106,.28),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s,filter .15s}
.bouton:active{transform:scale(.97)}
.bouton svg{width:18px;height:18px;fill:currentColor}
.bouton.second{background:var(--panneau-2);color:var(--texte);border:1px solid var(--ligne);box-shadow:none}
.bouton.bleu{background:linear-gradient(180deg,#9fe0ff,#4f9cf9);color:#06122b;box-shadow:0 6px 20px rgba(79,156,249,.3)}
.bouton.petit{min-height:38px;padding:0 15px;font-size:14px}
.bouton.large{width:100%}
.bouton:disabled{opacity:.42;cursor:default;transform:none}
.bouton.brille{position:relative;overflow:hidden}
.bouton.brille::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 45%,transparent 60%);background-size:250% 100%;animation:balayage 2.8s ease-in-out infinite}
.puce{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--ligne);background:var(--panneau);cursor:pointer;font-size:13.5px;font-weight:800;color:var(--texte);white-space:nowrap;font-family:var(--gras)}
.puce i{width:9px;height:9px;border-radius:50%;display:inline-block}
.puce[aria-pressed="true"]{background:var(--or);color:#1c1405;border-color:var(--or)}
.defile{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin:0 calc(-1 * max(16px,env(safe-area-inset-left)));padding-left:max(16px,env(safe-area-inset-left));padding-right:16px}
.defile::-webkit-scrollbar{display:none}
input[type=search],input[type=text],select{width:100%;min-height:48px;border-radius:14px;border:1px solid var(--ligne);background:var(--panneau);color:var(--texte);padding:0 14px;font:inherit;font-size:16px}
select{width:auto;min-height:38px;border-radius:999px;font-size:14px;font-weight:700}
.vide{color:var(--doux);text-align:center;padding:40px 10px}
#toast{position:fixed;left:50%;bottom:calc(var(--menu-h) + 18px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;z-index:80;
  background:var(--panneau-2);border:1px solid var(--ligne);border-radius:14px;padding:11px 18px;max-width:min(92vw,460px);text-align:center;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.45);font-weight:700}
#toast.visible{opacity:1;transform:translateX(-50%)}
#toast.erreur{border-color:var(--alerte)}
#toast.gain{border-color:var(--or);background:linear-gradient(180deg,#2a2550,#1d1a44)}
.jauge{height:9px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.jauge > span{display:block;height:100%;background:var(--irise);background-size:200% 100%;border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.jauge.or > span{background:linear-gradient(90deg,#d9a83c,#f8dd92)}
.jauge.bleu > span{background:linear-gradient(90deg,#4f9cf9,#9fe0ff)}
.eclat-ico{display:inline-block;width:.95em;height:.95em;vertical-align:-.1em;fill:#8fd8ff}
.booster-ico{display:inline-block;width:.95em;height:.95em;vertical-align:-.1em;fill:var(--or)}

/* ---------- carte : illustration pleine carte, cadre et effets selon la rareté ---------- */
.carte{--w:150px;--rc:var(--commune);width:var(--w);aspect-ratio:2/3;position:relative;perspective:1000px;border:0;padding:0;background:none;cursor:pointer;border-radius:calc(var(--w) * .055);flex:0 0 auto;outline-offset:4px;container-type:inline-size}
/* le texte de la carte suit sa largeur réelle, quelle que soit la façon dont elle est donnée (px, %, min…) */
.carte > .int{font-size:8.8cqw}
.carte .int{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform:rotateY(calc(var(--flip,0) * 180deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.carte.dos-visible{--flip:1}
.carte .face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--nuit);box-shadow:0 .6em 1.6em rgba(0,0,0,.45)}
.carte .verso{transform:rotateY(180deg);background:var(--nuit) url(/img/dos.webp) center/cover}
.carte .art{position:absolute;inset:0;background:#05061a center/cover no-repeat;transform:scale(1.001)}
/* bandeau du nom, en fondu sur le bas de l'illustration */
.carte .plaque{position:absolute;left:0;right:0;bottom:0;padding:2.4em .5em .7em;display:flex;flex-direction:column;align-items:center;gap:.32em;z-index:3;
  background:linear-gradient(180deg,rgba(6,8,26,0),rgba(6,8,26,.78) 38%,rgba(6,8,26,.94))}
.carte .nom{font-family:var(--titre);font-weight:800;font-size:1.4em;letter-spacing:.01em;text-align:center;line-height:1.05;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carte .oeuvre{font-size:.9em;color:#c9cdf0;text-align:center;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:-.1em;font-weight:700}
.carte .pastille{font-family:var(--gras);font-weight:800;font-size:.72em;letter-spacing:.05em;text-transform:uppercase;border-radius:2em;padding:.22em .8em;background:var(--rc);color:#0b0c22;display:flex;align-items:center;gap:.3em;white-space:nowrap;box-shadow:0 0 .8em color-mix(in srgb,var(--rc) 60%,transparent)}
.carte .pastille svg{width:.85em;height:.85em;fill:currentColor}
.carte .pastille span{margin-left:.25em}
.carte .cat{position:absolute;top:5.5%;left:6%;font-size:.55em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(8,10,34,.72);backdrop-filter:blur(4px);color:var(--or-clair);border-radius:2em;padding:.3em .75em;z-index:4;font-family:var(--gras)}
.carte .quantite{position:absolute;top:5.5%;right:6%;z-index:4;font-family:var(--gras);font-weight:800;font-size:.72em;background:var(--or);color:#1c1405;border-radius:2em;padding:.12em .6em}
.carte .coeur{position:absolute;right:4%;top:3.5%;z-index:5;width:2.6em;height:2.6em;border-radius:50%;border:0;padding:.62em;background:rgba(8,10,34,.62);backdrop-filter:blur(4px);cursor:pointer;display:grid;place-items:center}
.carte .quantite ~ .coeur{top:calc(5.5% + 1.7em)}
.carte .coeur svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2.2}
.carte .coeur.actif svg{fill:#ff5d8f;stroke:#ff5d8f;filter:drop-shadow(0 0 4px rgba(255,93,143,.8))}
.carte .coeur.bat{animation:bat .45s}
@keyframes bat{30%{transform:scale(1.35)}60%{transform:scale(.9)}}
.carte .cadre{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;border:calc(var(--w) * .022) solid var(--rc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 0 1.4em rgba(0,0,0,.5)}
.carte .holo,.carte .reflet{position:absolute;inset:0;pointer-events:none;z-index:1}
/* reflet qui suit le doigt, sur toutes les cartes */
.carte .reflet{background:radial-gradient(circle at var(--px,50%) var(--py,30%),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .3s;mix-blend-mode:overlay}
.carte.touche .reflet{opacity:1}
/* Commune : cadre argent */
.carte[data-r="commune"] .cadre{border-color:transparent;background:linear-gradient(135deg,#e9eef4,#8d96a3 40%,#dfe5ec 60%,#7c8592) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* Rare : cadre bleu et reflet qui passe régulièrement */
.carte[data-r="rare"]{--rc:var(--rare)}
.carte[data-r="rare"] .cadre{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 1.2em rgba(79,156,249,.55)}
.carte[data-r="rare"] .holo{background:linear-gradient(110deg,transparent 38%,rgba(190,225,255,.55) 48%,transparent 58%) no-repeat;background-size:300% 100%;animation:balayage 4.5s ease-in-out infinite;mix-blend-mode:screen}
/* Épique : cadre violet qui pulse, hologramme irisé */
.carte[data-r="epique"]{--rc:var(--epique);box-shadow:0 0 1.2em rgba(178,108,246,.4)}
.carte[data-r="epique"] .cadre{animation:pulse 2.6s ease-in-out infinite}
.carte[data-r="epique"] .holo{mix-blend-mode:color-dodge;opacity:.42;background:repeating-linear-gradient(115deg,rgba(190,120,255,0) 0 6%,rgba(214,150,255,.55) 9%,rgba(120,200,255,.45) 12%,rgba(255,140,220,.4) 15%,rgba(190,120,255,0) 19%);background-size:220% 220%;animation:holo 6s linear infinite}
@keyframes pulse{50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 0 1.8em rgba(198,128,255,.9)}}
@keyframes holo{to{background-position:220% 220%}}
/* Légendaire : cadre doré épais, éclat qui balaie, étincelles */
.carte[data-r="legendaire"]{--rc:var(--legendaire);box-shadow:0 0 1.6em rgba(244,185,58,.5);animation:aura-or 3s ease-in-out infinite}
.carte[data-r="legendaire"] .cadre{border-width:calc(var(--w) * .03);border-color:transparent;background:linear-gradient(120deg,#fff3c4,#f4b93a 25%,#a8701c 45%,#ffe7a0 60%,#d99a2b 80%,#fff3c4) border-box;background-size:200% 200%;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:or 4s linear infinite}
.carte[data-r="legendaire"] .holo{mix-blend-mode:overlay;background:linear-gradient(105deg,transparent 38%,rgba(255,236,170,1) 50%,transparent 62%) no-repeat;background-size:300% 100%;animation:balayage 3.2s ease-in-out infinite}
@keyframes aura-or{50%{box-shadow:0 0 2.4em rgba(255,200,80,.75)}}
@keyframes or{to{background-position:200% 200%}}
@keyframes balayage{0%{background-position:160% 0}60%,100%{background-position:-60% 0}}
.carte .etincelles{position:absolute;inset:0;pointer-events:none;z-index:2}
.carte .etincelles span{position:absolute;width:calc(3px * var(--t,1));height:calc(3px * var(--t,1));border-radius:50%;background:#fff;box-shadow:0 0 6px 3px var(--sc,#ffe29a);opacity:0;animation:scintille 3s ease-in-out infinite}
.carte .etincelles span::before,.carte .etincelles span::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%);border-radius:2px}
.carte .etincelles span::before{width:1px;height:calc(14px * var(--t,1))}
.carte .etincelles span::after{height:1px;width:calc(14px * var(--t,1))}
@keyframes scintille{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1.1) rotate(45deg)}}
/* Mythique : cadre irisé, hologramme arc-en-ciel, aura */
.carte[data-r="mythique"]{--rc:#fff;box-shadow:0 0 1.6em rgba(185,140,255,.6),0 0 3px rgba(255,255,255,.8);animation:aura-irise 4s ease-in-out infinite}
.carte[data-r="mythique"] .cadre{border-width:calc(var(--w) * .03);border-color:transparent;background:var(--irise) border-box;background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:irise 5s linear infinite}
.carte[data-r="mythique"] .holo{mix-blend-mode:color-dodge;opacity:.5;background:linear-gradient(calc(var(--px,50%) * 1.2deg + 60deg),rgba(255,111,174,.55),rgba(255,207,110,.5),rgba(125,255,176,.5),rgba(110,203,255,.55),rgba(185,140,255,.55),rgba(255,111,174,.55));background-size:300% 300%;animation:irise 7s linear infinite}
.carte[data-r="mythique"] .pastille{background:var(--irise);background-size:200% 100%;animation:irise 5s linear infinite}
.carte[data-r="mythique"] .nom{background:linear-gradient(90deg,#ffe3f0,#fff6d6,#e2fff0,#e0f4ff,#f0e6ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.9))}
@keyframes irise{to{background-position:300% 0}}
@keyframes aura-irise{0%,100%{box-shadow:0 0 1.6em rgba(185,140,255,.6),0 0 3px #fff}33%{box-shadow:0 0 2.4em rgba(255,111,174,.6),0 0 3px #fff}66%{box-shadow:0 0 2.4em rgba(110,203,255,.65),0 0 3px #fff}}
/* verso : lueur de la rareté pendant l'ouverture */
.carte .verso .aura{position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .4s}
.carte.indice .verso .aura{opacity:1;box-shadow:inset 0 0 2.2em var(--rc),inset 0 0 0 .18em var(--rc);animation:respire-aura 1.6s ease-in-out infinite}
.carte.indice[data-r="mythique"] .verso .aura{box-shadow:inset 0 0 2.4em #ff6fae,inset 0 0 3.4em #6ecbff,inset 0 0 0 .2em #fff}
@keyframes respire-aura{50%{opacity:.55}}
.carte.inconnue .face.recto{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#121540 0 10px,#0f1236 10px 20px);border:1px dashed var(--ligne)}
.carte.inconnue .face.recto span{font-family:var(--titre);font-size:2.4em;color:var(--ligne)}
.carte.mini .cat,.carte.mini .oeuvre,.carte.mini .quantite,.carte.mini .etincelles,.carte.mini .coeur{display:none}
.carte.mini .pastille span{display:none}
.carte.mini .plaque{padding:1em .3em .4em}
.carte.mini .nom{font-size:1.05em;-webkit-line-clamp:1}

/* grille de l'album */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min,150px),1fr));gap:18px 12px;justify-items:center}
.grille .carte{--w:min(100%,230px)}
@media (max-width:400px){.grille{--min:140px;gap:14px 10px}}
.compteur-liste{color:var(--doux);font-weight:700;font-size:13.5px}

/* ---------- paquets de boosters ---------- */
/* l'emballage métallisé illustré, teinté à la couleur de l'univers (le reflet holographique reste visible) */
.paquet{--pc:#3b4bd6;--pc2:#101444;position:relative;width:100%;aspect-ratio:5/8;overflow:hidden;isolation:isolate;
  background:url(/img/emballage.webp) 0 0/100% 100% no-repeat;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.paquet .serti{display:none}
.paquet .motif{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,var(--pc),var(--pc2));mix-blend-mode:color;opacity:.95;
  -webkit-mask:url(/img/emballage.webp) 0 0/100% 100%;mask:url(/img/emballage.webp) 0 0/100% 100%}
.paquet .teinte{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,var(--pc),var(--pc2));mix-blend-mode:multiply;opacity:.55;
  -webkit-mask:url(/img/emballage.webp) 0 0/100% 100%;mask:url(/img/emballage.webp) 0 0/100% 100%}
.paquet .visuels{position:absolute;left:0;right:0;top:15%;height:52%;z-index:1}
.paquet .visuels span{position:absolute;top:8%;width:42%;aspect-ratio:2/3;border-radius:5px;background:#000 center/cover;box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 0 1.5px rgba(255,255,255,.7)}
.paquet .visuels span:nth-child(1){left:6%;transform:rotate(-12deg);top:14%}
.paquet .visuels span:nth-child(2){left:52%;transform:rotate(12deg);top:14%}
.paquet .visuels span:nth-child(3){left:29%;z-index:2;top:2%;width:44%}
.paquet .logo{position:absolute;top:8.5%;left:0;right:0;text-align:center;z-index:3;font-family:var(--titre);font-weight:800;font-size:max(8px,.66em);letter-spacing:.24em;color:rgba(255,248,225,.92);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.paquet .bandeau{position:absolute;left:4%;right:4%;bottom:9%;border-radius:6px;z-index:3;padding:.55em .4em .6em;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.45) 30%,rgba(0,0,0,.55))}
.paquet .titre-p{font-family:var(--titre);font-weight:800;font-size:1.05em;line-height:1.05;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 18px color-mix(in srgb,var(--pc) 70%,transparent)}
.paquet .info-p{margin-top:.35em;font-size:.6em;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:800;font-family:var(--gras)}
.paquet .reflet-p{position:absolute;inset:0;-webkit-mask:url(/img/emballage.webp) 0 0/100% 100%;mask:url(/img/emballage.webp) 0 0/100% 100%;z-index:5;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 42%,rgba(255,255,255,.05) 50%,transparent 60%);background-size:300% 100%;animation:balayage 5s ease-in-out infinite;mix-blend-mode:screen}
.paquet .foil{position:absolute;inset:0;-webkit-mask:url(/img/emballage.webp) 0 0/100% 100%;mask:url(/img/emballage.webp) 0 0/100% 100%;z-index:2;pointer-events:none;mix-blend-mode:color-dodge;opacity:.25;background:linear-gradient(125deg,#ff6fae,#ffcf6e,#7dffb0,#6ecbff,#b98cff);background-size:300% 300%;animation:irise 9s linear infinite}
.paquet.special{filter:drop-shadow(0 0 3px var(--or)) drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.paquet.special .logo::after{content:"Collection spéciale";display:block;width:max-content;margin:.45em auto 0;padding:.15em .7em;border-radius:1em;font-size:.82em;letter-spacing:.1em;text-transform:uppercase;color:#1c1405;background:var(--or)}
.boosters{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:22px 16px}
.paquet-choix{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:15px}
.paquet-choix .paquet{max-width:170px;transition:transform .25s}
.paquet-choix:hover .paquet,.paquet-choix:focus-visible .paquet{transform:translateY(-6px) rotate(-2deg) scale(1.03)}
.paquet-choix small{color:var(--doux);font-size:12px;text-align:center;font-weight:700}
.paquet-choix .prix{font-family:var(--gras);font-weight:800;color:#8fd8ff;font-size:13px}

/* ---------- accueil ---------- */
.salut{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.salut small{color:var(--doux);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-family:var(--gras)}
.titre-joueur{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,rgba(230,195,106,.2),rgba(230,195,106,.05));border:1px solid rgba(230,195,106,.4);color:var(--or-clair);border-radius:999px;padding:3px 12px;font-weight:800;font-size:13px;font-family:var(--gras)}
.hero-booster{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px;border-radius:22px;
  background:radial-gradient(120% 140% at 100% 0%,rgba(150,110,255,.35),transparent 60%),linear-gradient(160deg,#272b6a,#151838);border:1px solid #3a3f88}
.hero-booster .paquet{width:clamp(96px,26vw,140px);transform:rotate(6deg);animation:flotte 4s ease-in-out infinite;font-size:12px}
@keyframes flotte{50%{transform:rotate(3deg) translateY(-8px)}}
.hero-booster h2{font-size:22px;color:#fff}
.hero-booster .bouton{white-space:nowrap;padding:0 18px}
.reserve-points{display:flex;gap:6px;margin:10px 0 4px}
.reserve-points i{width:16px;height:22px;border-radius:4px;background:rgba(255,255,255,.08);border:1px solid var(--ligne)}
.reserve-points i.plein{background:linear-gradient(180deg,#f8dd92,#d9a83c);border-color:#f8dd92;box-shadow:0 0 8px rgba(248,221,146,.5)}
.reserve-points i.bonus{background:linear-gradient(180deg,#9fe0ff,#4f9cf9);border-color:#9fe0ff}
.cadeau{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;cursor:pointer;border:1px solid rgba(230,195,106,.55);
  background:linear-gradient(100deg,rgba(230,195,106,.25),rgba(150,110,255,.18));animation:appel 2.4s ease-in-out infinite;width:100%;text-align:left;color:inherit;font:inherit}
.cadeau .boite{width:56px;height:56px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,220,140,.8));animation:secoue 2.4s ease-in-out infinite}
@keyframes appel{50%{box-shadow:0 0 0 4px rgba(230,195,106,.15),0 0 26px rgba(230,195,106,.35)}}
@keyframes secoue{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-12deg)}80%{transform:rotate(10deg)}85%{transform:rotate(-6deg)}90%{transform:rotate(4deg)}}
.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,170px),1fr));gap:12px}
.tuile{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:16px;text-decoration:none;background:linear-gradient(160deg,var(--panneau-2),var(--panneau));border:1px solid var(--ligne);min-height:92px}
.tuile svg{width:26px;height:26px;fill:var(--or);margin-bottom:4px}
.tuile b{font-family:var(--gras);font-size:15px}
.tuile small{color:var(--doux);font-size:12.5px;line-height:1.3}
.tuile .pastille-nb{top:10px;right:10px}
.carrousel{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 10px}
.carrousel::-webkit-scrollbar{display:none}
.carrousel .carte{--w:104px}

/* ---------- missions et succès ---------- */
.mission{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ligne)}
.mission:last-child{border-bottom:0}
.mission b{font-family:var(--gras);font-size:15px}
.mission .gain{color:#8fd8ff;font-weight:800;font-size:13px;font-family:var(--gras);white-space:nowrap}
.mission .jauge{grid-column:1/2}
.mission .etat{font-size:12px;color:var(--doux);font-weight:700}
.mission.faite b{color:var(--doux);text-decoration:line-through}
.calendrier{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calendrier > div{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.calendrier .cal-jour{font-size:10.5px;white-space:nowrap}
.calendrier .cal-gain{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.calendrier .cal-gain svg,.calendrier .cal-gain img{width:22px;height:22px;object-fit:contain}
.calendrier .cal-gain b{font-size:15px;margin:0!important;color:inherit!important}
.calendrier .cal-gain small{font-size:9.5px;font-weight:700;opacity:.8}
.calendrier .cal-ok{font-size:10px}
.calendrier div.gros-lot{outline:2px dashed var(--or);outline-offset:1px}
@media (max-width:480px){.calendrier{grid-template-columns:repeat(4,minmax(0,1fr))}}
.calendrier div{border-radius:12px;padding:8px 2px;text-align:center;background:rgba(255,255,255,.05);border:1px solid var(--ligne);font-size:11px;font-weight:800;font-family:var(--gras);color:var(--doux)}
.calendrier div b{display:block;font-size:13px;color:var(--texte);margin-top:3px}
.calendrier div.pris{background:rgba(95,211,154,.14);border-color:rgba(95,211,154,.5)}
.calendrier div.aujourdhui{border-color:var(--or);box-shadow:0 0 14px rgba(230,195,106,.4)}
.succes{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--ligne)}
.succes .frise-paliers,.succes .prendre-succes{grid-column:1/-1}
.succes .prendre-succes{justify-self:stretch}
.succes.a-prendre .medaille{animation:respire 1.6s ease-in-out infinite}
.frise-paliers{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative}
.frise-paliers::before{content:"";position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:11px;height:4px;border-radius:2px;background:var(--ligne)}
.frise-paliers li{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:0}
.frise-paliers i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;background:var(--panneau-2);border:2px solid var(--ligne);color:var(--doux);position:relative}
.frise-paliers li.pris i{background:var(--ok);border-color:var(--ok);color:#06210f}
.frise-paliers li.atteint i{background:var(--or);border-color:#fff;color:#1c1405;box-shadow:0 0 12px var(--or);animation:respire 1.4s ease-in-out infinite}
.frise-paliers b{font-size:12.5px;font-family:var(--gras)}
.frise-paliers small{font-size:11px;color:var(--doux);display:flex;align-items:center;gap:2px;white-space:nowrap}
.frise-paliers small svg{width:11px;height:11px}
.tout-recuperer{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-color:var(--or)}
.chances-mystere{text-align:left;font-size:13.5px}
.chances-mystere table{width:100%;border-collapse:collapse;margin:8px 0}
.chances-mystere td{padding:4px 2px;border-bottom:1px solid var(--ligne)}
.chances-mystere td:last-child{text-align:right;font-weight:800;white-space:nowrap}
.succes:last-child{border-bottom:0}
.succes .medaille{width:auto;min-width:42px;padding:0 10px;letter-spacing:-.05em;height:42px;border-radius:999px;display:grid;place-items:center;font-family:var(--titre);font-weight:800;font-size:15px;
  background:radial-gradient(circle at 35% 30%,#fff3c4,#d9a83c 60%,#8a5a12);color:#2b1a02;box-shadow:0 0 12px rgba(230,195,106,.35)}
.succes .medaille.vide{background:var(--panneau-2);color:var(--doux);box-shadow:none;border:1px solid var(--ligne)}
.succes b{font-family:var(--gras)}
.succes small{color:var(--doux);font-size:12.5px}

/* ---------- boutique ---------- */
.solde{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px;border-radius:22px;
  background:radial-gradient(100% 140% at 0% 0%,rgba(143,216,255,.25),transparent 60%),linear-gradient(160deg,#1f2d63,#151838);border:1px solid #33508e}
.solde .montant{font-family:var(--gras);font-weight:800;font-size:34px;color:#cfefff;display:flex;align-items:center;gap:8px}
.solde .montant svg{width:28px;height:28px;fill:#8fd8ff;filter:drop-shadow(0 0 8px rgba(143,216,255,.8))}
.offres{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.offre{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:20px;border:1px solid var(--ligne);background:linear-gradient(170deg,var(--panneau-2),var(--panneau));overflow:hidden}
.offre .visuel{height:170px;padding-top:14px;display:flex;align-items:center;justify-content:center;gap:0}
.offre .visuel{position:relative}
.offre .visuel > div{position:relative;display:flex;justify-content:center;align-items:center}
.offre .visuel .paquet{width:92px;font-size:9.5px;flex:0 0 auto}
.offre .visuel .paquet:nth-child(1):not(:only-child){transform:rotate(-14deg) translateX(22px);z-index:1}
.offre .visuel .paquet:nth-child(2){z-index:2;transform:translateY(-6px)}
.offre .visuel .paquet:nth-child(3){transform:rotate(14deg) translateX(-22px);z-index:1}
.offre .visuel .carte{--w:80px}
.offre h3{font-family:var(--gras);font-size:17px}
.offre p{margin:0;color:var(--doux);font-size:13.5px}
.offre .etiquette{position:absolute;top:12px;right:12px;background:var(--alerte);color:#1a0d0b;font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;font-family:var(--gras)}
.offre .manque{font-size:12.5px;color:var(--alerte);font-weight:700}

/* ---------- ouverture d'un booster ---------- */
#calque{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 50% 42%,#20266e,#070820 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#calque::before{content:"";position:absolute;inset:-50%;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(2px 2px at 40% 70%,#fff,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 45%,#ffe9b0,transparent);background-size:300px 300px;opacity:.5;animation:derive 90s linear infinite;pointer-events:none}
#calque .consigne{position:absolute;bottom:max(30px,calc(env(safe-area-inset-bottom) + 14px));left:16px;right:16px;text-align:center;color:#dfe2fb;font-weight:800;letter-spacing:.03em;font-family:var(--gras);animation:respire 2s ease-in-out infinite;z-index:3}
@keyframes respire{50%{opacity:.5}}
#calque .fermer,#calque .tout{position:absolute;top:max(14px,env(safe-area-inset-top));z-index:6;height:42px;border-radius:999px;border:1px solid var(--ligne);background:rgba(11,16,48,.75);cursor:pointer;font-weight:800;font-family:var(--gras)}
#calque .fermer{right:16px;width:42px;font-size:20px}
#calque .tout{left:16px;padding:0 16px;font-size:13.5px}
#calque .commandes-ouverture{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;z-index:6;display:flex;gap:8px}
#calque .commandes-ouverture .tout{position:static}
#calque .tout.auto[aria-pressed="true"]{background:var(--or);color:#1c1405;border-color:var(--or)}
#calque .numero-paquet{position:absolute;top:max(64px,calc(env(safe-area-inset-top) + 54px));left:0;right:0;text-align:center;margin:0;font-family:var(--gras);font-weight:800;color:var(--or-clair);letter-spacing:.06em;z-index:3}
.bilan .eventail.nombreuses{gap:14px 8px}
.choix-nombre{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.scene-paquet{position:relative;width:min(58vw,270px);aspect-ratio:5/8;z-index:2;font-size:16px;animation:entree-paquet .7s cubic-bezier(.2,1.3,.4,1)}
@keyframes entree-paquet{from{transform:translateY(60vh) rotate(-20deg) scale(.6);opacity:0}}
.scene-paquet .flotteur{position:absolute;inset:0;animation:flotte-ouv 3s ease-in-out infinite}
@keyframes flotte-ouv{50%{transform:translateY(-10px) rotate(1.5deg)}}
.scene-paquet.tremble .flotteur{animation:tremble .12s linear infinite}
.scene-paquet.tremble.fort .flotteur{animation:tremble-fort .09s linear infinite}
@keyframes tremble{25%{transform:translate(-2px,1px) rotate(-.8deg)}75%{transform:translate(2px,-1px) rotate(.8deg)}}
@keyframes tremble-fort{25%{transform:translate(-5px,2px) rotate(-2deg)}75%{transform:translate(5px,-2px) rotate(2deg)}}
.scene-paquet .paquet{position:absolute;inset:0;font-size:16px}
.scene-paquet .halo-paquet{position:absolute;inset:-18%;border-radius:40%;z-index:-1;background:radial-gradient(closest-side,var(--hc,rgba(160,170,255,.35)),transparent);filter:blur(8px);animation:respire 1.8s ease-in-out infinite}
.scene-paquet .languette{position:absolute;left:0;right:0;top:0;height:14%;overflow:hidden;border-radius:8px 8px 0 0;z-index:3;transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .7s}
.scene-paquet .languette .paquet{inset:0 0 auto 0;height:calc(100% / .14)}
.scene-paquet .corps{position:absolute;inset:14% 0 0 0;overflow:hidden;border-radius:0 0 8px 8px;z-index:2}
.scene-paquet .corps .paquet{inset:auto 0 0 0;height:calc(100% / .86)}
.scene-paquet .ligne-coupe{position:absolute;left:0;right:0;top:14%;height:0;z-index:4;border-top:2px dashed rgba(255,255,255,.55);animation:respire 1.4s ease-in-out infinite}
.scene-paquet .dechirure{position:absolute;left:0;top:calc(14% - 2px);height:4px;width:var(--coupe,0%);z-index:5;border-radius:2px;background:linear-gradient(90deg,#fff,#fff3c4);box-shadow:0 0 14px 4px var(--hc2,#ffe9a8),0 0 30px 8px var(--hc2,#ffe9a8)}
.scene-paquet .lumiere{position:absolute;left:5%;right:5%;top:12%;height:6%;z-index:1;opacity:0;background:radial-gradient(ellipse at center,#fff,var(--hc2,#ffe9a8) 40%,transparent 70%);filter:blur(4px)}
.scene-paquet.ouvert .languette{transform:translate(55%,-200%) rotate(38deg);opacity:0}
.scene-paquet.ouvert .ligne-coupe{display:none}
.scene-paquet.ouvert .lumiere{animation:jaillit .9s ease-out forwards}
@keyframes jaillit{30%{opacity:1;transform:scaleY(6) translateY(-30%)}100%{opacity:0;transform:scaleY(12) translateY(-60%)}}
.scene-paquet.ouvert .corps{animation:descend .8s .45s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes descend{to{transform:translateY(130%) rotate(6deg);opacity:0}}
.rayons{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;transform:translate(-50%,-50%);z-index:0;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,var(--hc2,rgba(255,240,200,.5)) 0 4deg,transparent 4deg 14deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 55%);mask:radial-gradient(circle,#000 10%,transparent 55%);transition:opacity .5s}
.rayons.visibles{opacity:.28}
.flash{position:fixed;inset:0;z-index:58;pointer-events:none;background:#fff;opacity:0}
.flash.go{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.onde{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;transform:translate(-50%,-50%);border:3px solid var(--oc,#fff);z-index:3;pointer-events:none;animation:onde .9s ease-out forwards}
@keyframes onde{to{width:180vmin;height:180vmin;opacity:0;border-width:1px}}
.secousse{animation:secousse .45s}
@keyframes secousse{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(4px,-2px)}}
.noir{position:fixed;inset:0;z-index:51;background:#000;opacity:0;pointer-events:none;transition:opacity .6s}
.noir.visible{opacity:.88}
.revelation{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.pile-cartes{position:relative;width:min(70vw,330px,calc((100vh - 260px) * .667));aspect-ratio:2/3}
.pile-cartes .carte{--w:min(70vw,330px,calc((100vh - 260px) * .667));position:absolute;inset:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s}
.pile-cartes .carte.attente{transform:translateY(calc(var(--k) * -7px)) scale(calc(1 - var(--k) * .035))}
.pile-cartes .carte.partie{transform:translate(var(--dx,0),var(--dy,60vh)) scale(.25);opacity:0;pointer-events:none}
.pile-cartes .carte.entree{animation:sort-carte .7s cubic-bezier(.2,1.2,.4,1) backwards;animation-delay:calc(var(--k) * 70ms)}
@keyframes sort-carte{from{transform:translateY(55vh) scale(.5)}}
.pile-cartes .carte.charge{animation:charge .1s linear infinite}
.pile-cartes .carte.charge.fort{animation:charge-fort .07s linear infinite}
@keyframes charge{25%{transform:translate(-2px,1px) rotate(-.6deg)}75%{transform:translate(2px,-1px) rotate(.6deg)}}
@keyframes charge-fort{25%{transform:translate(-5px,2px) rotate(-1.6deg) scale(1.02)}75%{transform:translate(5px,-2px) rotate(1.6deg) scale(1.02)}}
.pile-cartes .carte.vedette{z-index:20!important;animation:vedette .8s cubic-bezier(.2,1.3,.4,1)}
@keyframes vedette{0%{transform:scale(.92)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.annonce{min-height:62px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.annonce .rang{font-family:var(--titre);font-weight:800;font-size:clamp(20px,6vw,30px);letter-spacing:.12em;text-transform:uppercase;animation:annonce .6s cubic-bezier(.2,1.4,.4,1)}
.annonce .rang[data-r="commune"]{color:var(--commune)}
.annonce .rang[data-r="rare"]{color:#8cc2ff;text-shadow:0 0 18px rgba(79,156,249,.8)}
.annonce .rang[data-r="epique"]{color:#d9b3ff;text-shadow:0 0 20px rgba(178,108,246,.9)}
.annonce .rang[data-r="legendaire"]{color:#ffe29a;text-shadow:0 0 24px rgba(244,185,58,1)}
.annonce .rang[data-r="mythique"]{background:var(--irise);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:annonce .6s cubic-bezier(.2,1.4,.4,1),irise 3s linear infinite;filter:drop-shadow(0 0 14px rgba(255,255,255,.6))}
@keyframes annonce{from{transform:scale(2.2);opacity:0;letter-spacing:.5em}}
.annonce .badge{font-family:var(--gras);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:var(--ok);color:#06210f;animation:annonce .5s .15s backwards}
.annonce .badge.doublon{background:var(--panneau-2);color:var(--doux);border:1px solid var(--ligne)}
.plateau{display:flex;gap:8px;justify-content:center;min-height:66px}
.plateau .carte{--w:44px;animation:pose .45s cubic-bezier(.2,1.3,.4,1)}
.plateau .place{width:44px;aspect-ratio:2/3;border-radius:5px;border:1px dashed rgba(255,255,255,.2)}
@keyframes pose{from{transform:translateY(-120px) scale(2);opacity:0}}
.particule{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:60;will-change:transform,opacity}
.confetti{position:fixed;top:-20px;width:9px;height:14px;pointer-events:none;z-index:60;will-change:transform}
.bilan{position:relative;z-index:2;width:min(100%,900px);max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:46px 0 24px;touch-action:pan-y}
.bilan .eventail{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.bilan .eventail .carte{--w:min(30vw,150px);animation:pose .5s cubic-bezier(.2,1.3,.4,1) backwards;animation-delay:calc(var(--k) * 90ms)}
.bilan .etiquette-carte{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);z-index:6;font-family:var(--gras);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:2px 9px;border-radius:999px;background:var(--ok);color:#06210f}
.bilan .etiquette-carte.doublon{background:var(--panneau-2);color:var(--doux);border:1px solid var(--ligne)}
.bilan .progres{width:min(100%,520px);display:flex;flex-direction:column;gap:8px}
.bilan .progres .mission{padding:8px 12px;border:1px solid var(--ligne);border-radius:12px;background:rgba(22,25,57,.85)}
.bilan .chiffres{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bilan .chiffres span{background:rgba(22,25,57,.85);border:1px solid var(--ligne);border-radius:999px;padding:5px 13px;font-weight:800;font-size:13.5px;font-family:var(--gras)}

/* ---------- fiche d'une carte ---------- */
.fiche{position:fixed;inset:0;z-index:55;background:rgba(5,6,26,.95);backdrop-filter:blur(8px);overflow:auto;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));animation:apparait .25s}
@keyframes apparait{from{opacity:0}}
.fiche-int{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;justify-items:center;padding-top:34px}
@media (min-width:820px){.fiche-int{grid-template-columns:auto minmax(0,1fr);align-items:start;justify-items:start}}
.fiche .carte{--w:min(80vw,380px,calc((100vh - 120px) * .667))}
.fiche .infos{width:100%;max-width:580px;display:flex;flex-direction:column;gap:14px;min-width:0}
.fiche .infos p{margin:0;color:#dcdff7;line-height:1.65}
.fiche .meta{display:flex;flex-wrap:wrap;gap:8px}
.fiche .meta span{font-size:13px;font-weight:800;color:#cfd3f3;background:var(--panneau);border:1px solid var(--ligne);border-radius:999px;padding:4px 12px;font-family:var(--gras)}
.fiche .meta span.r{background:var(--rc);color:#0b0c22;border:0}
.fiche .titre-vo{margin:2px 0 6px;color:var(--doux);font-style:italic;font-size:15px}
.fiche .titre-resume{margin:14px 0 4px;font-size:17px}
.fiche .lien-oeuvre{color:var(--or);font-weight:800;cursor:pointer;background:none;border:0;padding:0;text-align:left;font-size:15px;font-family:var(--gras)}
.fiche .details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;margin:0;font-size:14px}
.fiche .details dt{color:var(--doux);font-weight:700}
.fiche .details dd{margin:0;font-weight:700}
.fiche .actions{display:flex;flex-wrap:wrap;gap:10px}
.bouton-favori{display:inline-flex;align-items:center;gap:8px}
.bouton-favori svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.bouton-favori[aria-pressed="true"]{background:linear-gradient(180deg,#ff8db0,#e2456f);color:#fff;border:0;box-shadow:0 6px 20px rgba(226,69,111,.35)}
.bouton-favori[aria-pressed="true"] svg{fill:#fff;stroke:#fff}
.fiche .liees{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.fiche .liees .carte{--w:86px}
.fiche .fermer{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;border-radius:50%;border:1px solid var(--ligne);background:rgba(11,16,48,.88);cursor:pointer;font-size:22px;z-index:3}
.image-plein{position:fixed;inset:0;z-index:70;display:grid;place-items:center;cursor:zoom-out;
  background:radial-gradient(circle at 50% 45%,rgba(60,50,140,.85),rgba(5,6,26,.96) 70%);backdrop-filter:blur(8px);animation:apparait .25s ease-out}
.image-plein .carte-plein{display:grid;place-items:center;animation:grandit .35s cubic-bezier(.2,1.3,.4,1)}
.image-plein .carte{--w:min(86vw,calc((100vh - 170px) * .6667),460px);cursor:pointer}
@keyframes grandit{from{transform:scale(.6);opacity:0}}
@keyframes apparait{from{opacity:0}}

/* ---------- collections ---------- */
.progression{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.progression .panneau{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.progression .tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.progression .tete b{font-family:var(--titre);font-size:16px}
.progression .tete span{font-variant-numeric:tabular-nums;color:var(--doux);font-weight:800;font-family:var(--gras)}
.raretes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;font-size:11.5px;color:var(--doux);text-align:center;font-weight:700}
.raretes i{display:block;height:4px;border-radius:2px;margin-bottom:4px}
.etoile-speciale{color:var(--or);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.stats div{background:rgba(255,255,255,.04);border:1px solid var(--ligne);border-radius:14px;padding:12px}
.stats b{display:block;font-family:var(--gras);font-size:24px;color:var(--or-clair)}
.stats small{color:var(--doux);font-weight:700}

/* ---------- échanges, profil ---------- */
.echange{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.echange [data-b]{grid-column:1/-1}
.echange-cartes{display:flex;align-items:center;gap:8px}
.echange-cartes .fleche{color:var(--doux);font-size:18px}
.liste{display:flex;flex-direction:column;gap:12px}
.ami{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qr{background:#fff;border-radius:14px;padding:12px;display:inline-block;max-width:min(100%,280px);align-self:flex-start}
.qr svg{display:block;max-width:100%;height:auto}
.lien{word-break:break-all;font-size:13px;color:var(--doux);background:var(--nuit);border:1px solid var(--ligne);border-radius:10px;padding:10px}
.reglage{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--ligne)}
.reglage:last-child{border-bottom:0}
.reglage.empile{flex-direction:column;align-items:stretch}
.reglage small{display:block;color:var(--doux)}
.interrupteur{appearance:none;width:52px;height:30px;border-radius:15px;background:var(--panneau-2);border:1px solid var(--ligne);position:relative;cursor:pointer;flex:0 0 auto;transition:.2s}
.interrupteur::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--doux);transition:.2s}
.interrupteur:checked{background:var(--or);border-color:var(--or)}
.interrupteur:checked::after{left:25px;background:#1c1405}
table.chances{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.chances td,table.chances th{padding:8px 4px;border-bottom:1px solid var(--ligne);text-align:left}
table.chances td:last-child,table.chances th:last-child{text-align:right}
.accueil-entree{min-height:100vh;display:grid;place-items:center;padding:24px}
.accueil-entree .panneau{max-width:440px;width:100%;display:flex;flex-direction:column;gap:14px;text-align:center}
.accueil-entree h1{font-size:30px}
.fenetre-modale{position:fixed;inset:0;z-index:75;background:rgba(5,6,26,.85);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.fenetre-modale .panneau{max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px;text-align:center;animation:annonce-boite .4s cubic-bezier(.2,1.3,.4,1)}
@keyframes annonce-boite{from{transform:scale(.8);opacity:0}}
.gain-grand{font-family:var(--gras);font-weight:800;font-size:28px;color:var(--or-clair)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body.calme .carte,body.calme .carte *,body.calme #ciel::before,body.calme #ciel::after{animation:none!important}

/* ---------- variantes : Brillante et cadres de saison ---------- */
.carte .ruban-variante{position:absolute;left:50%;top:13%;transform:translateX(-50%);z-index:4;font-family:var(--gras);font-weight:800;font-size:.55em;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  border-radius:2em;padding:.25em .8em;background:rgba(8,10,34,.78);color:#fff;border:1px solid rgba(255,255,255,.35)}
.carte[data-v="h"] .ruban-variante,.carte[data-v="n"] .ruban-variante,.carte[data-v="s"] .ruban-variante,.carte[data-v="e"] .ruban-variante{top:.4%}
.carte:is([data-v="h"],[data-v="n"],[data-v="s"],[data-v="e"]) .cat{top:10%}
.carte:is([data-v="h"],[data-v="n"],[data-v="s"],[data-v="e"]) .coeur{top:9%}
.carte .ruban-variante.discret{top:auto;bottom:30%;left:auto;right:6%;transform:none;text-transform:none;letter-spacing:0;padding:.15em .55em;font-size:.6em}
.carte.mini .ruban-variante{display:none}
.carte .deco-variante{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.carte .deco-variante i{position:absolute;font-style:normal;font-size:1.15em;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.carte[data-v] .cadre{border-color:transparent;background-size:300% 300%;animation:irise 8s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;border-width:calc(var(--w) * .034)}
.carte[data-v="b"] .cadre{background:linear-gradient(120deg,#fff,#ffd6f0,#d7f7ff,#fff6c8,#e5dcff,#fff) border-box;background-size:300% 300%}
.carte[data-v="b"] .holo{opacity:.75;mix-blend-mode:color-dodge;background:linear-gradient(calc(var(--px,50%) * 1.4deg + 30deg),rgba(255,120,190,.5),rgba(255,230,120,.5),rgba(120,255,190,.5),rgba(120,200,255,.55),rgba(200,140,255,.5),rgba(255,120,190,.5));background-size:300% 300%;animation:irise 5s linear infinite}
.carte[data-v="b"] .deco-variante i{left:auto;right:7%;top:auto;bottom:31%;color:#fff;font-size:1.4em;animation:scintille 2.4s ease-in-out infinite;text-shadow:0 0 8px #fff,0 0 16px #ffc8f0}
.carte[data-v="b"] .ruban-variante{background:var(--irise);background-size:200% 100%;color:#1a0b24;border:0;animation:irise 5s linear infinite}
/* cadres de saison : bord plein et lueur, le décor est dessiné par-dessus (carte.js) */
.carte:is([data-v="h"],[data-v="n"],[data-v="s"],[data-v="e"]) .cadre{-webkit-mask:none;mask:none;background:none;animation:none}
.carte[data-v="h"] .cadre{border-color:#1d0b33;border-width:calc(var(--w) * .03);box-shadow:inset 0 0 0 1px #ff8a1f,inset 0 0 1.6em rgba(255,120,20,.55),0 0 1.4em rgba(255,120,20,.45)}
.carte[data-v="h"] .face.recto{background:linear-gradient(160deg,#3b1260,#140a22)}
.carte[data-v="h"] .plaque{border-color:#ff8a1f}
.carte[data-v="h"] .ruban-variante{background:#2a0c45;border-color:#ff8a1f;color:#ffb36b}
.carte[data-v="h"] .art{filter:saturate(1.15) contrast(1.05) hue-rotate(-10deg)}
.carte[data-v="n"] .cadre{border-color:#b3121f;border-width:calc(var(--w) * .03);box-shadow:inset 0 0 0 1px #fff,inset 0 0 1.4em rgba(190,230,255,.5),0 0 1.2em rgba(190,230,255,.45)}
.carte[data-v="n"] .plaque{border-color:#fff}
.carte[data-v="n"] .ruban-variante{background:#7c1016;border-color:#fff;color:#fff}
.carte[data-v="s"] .cadre{border-color:#e0457b;border-width:calc(var(--w) * .03);box-shadow:inset 0 0 0 1px #ffd1e0,inset 0 0 1.4em rgba(255,93,143,.5),0 0 1.2em rgba(255,93,143,.45)}
.carte[data-v="s"] .plaque{border-color:#ffb3cd}
.carte[data-v="s"] .ruban-variante{background:#8a1043;border-color:#ffb3cd;color:#ffe0ea}
.carte[data-v="e"] .cadre{border-color:#14a3a3;border-width:calc(var(--w) * .03);box-shadow:inset 0 0 0 1px #ffd54a,inset 0 0 1.4em rgba(255,213,74,.45),0 0 1.2em rgba(33,199,199,.45)}
.carte[data-v="e"] .plaque{border-color:#ffd54a}
.carte[data-v="e"] .ruban-variante{background:#0b5560;border-color:#ffd54a;color:#fff3c2}
.carte[data-v][data-r="mythique"] .cadre,.carte[data-v][data-r="legendaire"] .cadre{border-width:calc(var(--w) * .038)}
.annonce .badge.variante{background:var(--irise);background-size:200% 100%;color:#1a0b24;animation:annonce .5s .3s backwards,irise 5s linear infinite}
.annonce .badge.variante[data-v="h"]{background:#ff8a1f;color:#1d0b33}
.annonce .badge.variante[data-v="n"]{background:#e23a3a;color:#fff}
.annonce .badge.variante[data-v="s"]{background:#ff5d8f;color:#fff}
.annonce .badge.variante[data-v="e"]{background:#21c7c7;color:#062a33}

/* ---------- amis, échanges, souhaits, vitrine ---------- */
.grille .carte .etiquette-carte,.carte .etiquette-carte{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);z-index:6;font-family:var(--gras);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:2px 9px;border-radius:999px;background:var(--ok);color:#06210f}
.carte .etiquette-carte.doublon{background:var(--panneau-2);color:var(--doux);border:1px solid var(--ligne)}
.carte .etiquette-carte.manque{background:var(--or);color:#1c1405}
.carte.choisie{outline:3px solid var(--or);outline-offset:3px;border-radius:calc(var(--w) * .055)}
.carte .coche{position:absolute;top:-10px;left:-10px;z-index:7;min-width:30px;height:30px;padding:0 8px;border-radius:15px;background:var(--or);color:#1c1405;font-weight:800;display:grid;place-items:center;font-family:var(--gras);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.carte .etoile-souhait{position:absolute;top:-12px;right:-10px;z-index:7;width:36px;height:36px;border-radius:50%;border:1px solid var(--ligne);background:var(--panneau);color:var(--or);font-size:19px;cursor:pointer;display:grid;place-items:center}
.carte .etoile-souhait.actif{background:var(--or);color:#1c1405}
.ami-carte{display:flex;flex-direction:column;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--ligne)}
.ami-carte:last-child{border-bottom:0;padding-bottom:0}
.vitrine-mini{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.vitrine{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.classement{display:flex;flex-direction:column;gap:6px}
.rang-ligne{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03)}
.rang-ligne.moi{background:color-mix(in srgb,var(--or) 14%,transparent);border:1px solid color-mix(in srgb,var(--or) 40%,transparent)}
.rang-ligne .place{font-family:var(--gras);font-weight:800;font-size:18px;text-align:center}
.rang-ligne small{display:block;color:var(--doux);font-size:12px}
.chiffres-rang{text-align:right;font-size:13.5px}
.fil{display:flex;flex-direction:column;gap:10px}
.fil-ligne{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;font-size:14px}
.fil-ligne small{display:block;color:var(--doux);font-size:12px}
.mission-groupe{border-color:color-mix(in srgb,var(--or) 45%,var(--ligne))}
.echange-v2{display:flex;flex-direction:column;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--ligne)}
.echange-v2:last-child{border-bottom:0}
.cotes,.panier{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.cote{display:flex;flex-direction:column;gap:6px;min-width:0}
.cote > small{color:var(--doux);font-weight:800;font-family:var(--gras);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.cote-cartes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:40px}
.fleche{color:var(--doux);font-size:20px}
.eclats-bloc{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-family:var(--gras);background:var(--panneau-2);border:1px solid var(--ligne);border-radius:999px;padding:4px 10px}
.eclat-ico{width:14px;height:14px;fill:#8fd8ff;vertical-align:-2px}
.alerte{color:var(--alerte);font-weight:700}
.panier{position:sticky;top:calc(var(--barre-h) + env(safe-area-inset-top) + 6px);z-index:8}
.eclats-saisie{display:flex;align-items:center;gap:6px;background:var(--panneau-2);border:1px solid var(--ligne);border-radius:999px;padding:2px 10px;width:max-content}
.eclats-saisie input{width:70px;background:transparent;border:0;color:var(--texte);font:inherit;font-weight:800;padding:6px 0}
.barre-envoi{position:sticky;bottom:calc(var(--menu-h) + env(safe-area-inset-bottom) + 8px);z-index:8}
@media (min-width:900px){.barre-envoi{bottom:16px}}
.souhait{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding-bottom:12px;border-bottom:1px solid var(--ligne)}
details.panneau summary,details summary{cursor:pointer;font-family:var(--gras);font-weight:800;color:var(--or-clair)}

/* ---------- saisons, attente, versions, présentation ---------- */
.banniere-saison{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;text-decoration:none;border:1px solid var(--ligne);
  background:linear-gradient(120deg,var(--s1,#3b1260),var(--s2,#ff8a1f));box-shadow:0 8px 26px color-mix(in srgb,var(--s2,#ff8a1f) 30%,transparent)}
.banniere-saison[data-s="h"]{--s1:#2a0c45;--s2:#c2560f}.banniere-saison[data-s="n"]{--s1:#0c3a22;--s2:#b8222a}
.banniere-saison[data-s="s"]{--s1:#5a0d33;--s2:#e0457c}.banniere-saison[data-s="e"]{--s1:#0b5560;--s2:#e0a21b}
.banniere-saison .embleme{font-size:34px;animation:flotte 3s ease-in-out infinite}
.banniere-saison small{color:rgba(255,255,255,.85)}
@keyframes flotte{50%{transform:translateY(-4px) rotate(-6deg)}}
.attente-validation{border-color:var(--or)}
.paquet-choix{position:relative}
.paquet-choix .etiquette{position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:5;background:var(--alerte);color:#1a0d0b;font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;font-family:var(--gras);white-space:nowrap}
.choix-saison .paquet{box-shadow:0 0 26px color-mix(in srgb,var(--pc) 60%,transparent)}
.versions{display:flex;flex-wrap:wrap;gap:8px}
.version{display:flex;flex-direction:column;align-items:center;gap:3px}
.lien-recycler{background:none;border:0;color:#8fd8ff;font-size:12.5px;font-weight:800;cursor:pointer;padding:2px 4px;font-family:var(--gras)}
.tutoriel .ico-tuto{font-size:54px;line-height:1;color:var(--or)}
.points-tuto{display:flex;gap:6px;justify-content:center}
.points-tuto i{width:8px;height:8px;border-radius:50%;background:var(--ligne)}
.points-tuto i.actif{background:var(--or);width:20px;border-radius:4px}

/* ---------- salle de jeux ---------- */
.tuiles.jeux .tuile{cursor:pointer;text-align:left;color:var(--texte);font:inherit}
.ico-jeu{font-size:28px;line-height:1;color:var(--or)}
.gacha-entree{display:flex;align-items:center;gap:16px;padding:16px;border-radius:20px;border:1px solid color-mix(in srgb,var(--or) 50%,var(--ligne));cursor:pointer;text-align:left;color:var(--texte);
  background:radial-gradient(400px 160px at 15% 50%,rgba(185,140,255,.25),transparent),linear-gradient(160deg,var(--panneau-2),var(--panneau))}
.gacha-entree b{font-family:var(--titre);font-size:19px;color:var(--or)}
.gacha-entree small{display:block;color:var(--doux)}
.gacha-entree .garantie{color:var(--ok);font-weight:800}
.mini-sphere{position:relative;width:84px;height:84px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(255,255,255,.06) 40%,rgba(120,140,255,.12) 70%,rgba(255,255,255,.18));border:2px solid rgba(255,255,255,.35)}
.mini-sphere.grande{width:110px;height:110px}
.mini-sphere .boule{width:22%;height:22%}
.boule{position:absolute;width:13%;height:13%;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 32% 28%,#fff 0 8%,var(--b1) 22%,var(--b2) 78%);box-shadow:inset -2px -3px 5px rgba(0,0,0,.3),0 2px 3px rgba(0,0,0,.35);animation:roule 4s ease-in-out var(--d,0s) infinite}
@keyframes roule{50%{transform:translate(-50%,-56%) rotate(14deg)}}
.gacha-page h1{text-align:center}
.machine{position:relative;width:min(78vw,320px);margin:0 auto;display:flex;flex-direction:column;align-items:center}
.sphere{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;z-index:2;
  background:radial-gradient(circle at 50% 120%,rgba(185,140,255,.35),transparent 60%),radial-gradient(circle at 50% 50%,rgba(120,140,255,.08),rgba(255,255,255,.04) 70%,rgba(255,255,255,.22));
  border:3px solid rgba(255,255,255,.4);box-shadow:inset 0 0 40px rgba(160,180,255,.25),0 0 40px rgba(150,120,255,.25)}
.sphere .boules{position:absolute;inset:0}
.sphere .reflet-verre{position:absolute;left:14%;top:10%;width:34%;height:22%;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,0));transform:rotate(-24deg);pointer-events:none}
.sphere .verre{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 70% 75%,rgba(255,255,255,.12),transparent 30%);pointer-events:none}
.machine.brasse .boule{animation:brasse .18s linear infinite}
.machine.brasse .boule:nth-child(2n){animation-duration:.23s;animation-direction:reverse}
.machine.brasse .sphere{animation:tremble .12s linear infinite}
@keyframes brasse{25%{transform:translate(-30%,-90%)}50%{transform:translate(-80%,-40%)}75%{transform:translate(-20%,-20%)}}
@keyframes tremble{50%{transform:rotate(1.2deg)}}
.col-machine{width:26%;height:26px;margin-top:-10px;background:linear-gradient(90deg,#8b6a2b,#f2d27a,#8b6a2b);border-radius:0 0 8px 8px;z-index:1;display:grid;place-items:end center}
.col-machine .sortie{width:44%;height:12px;background:#0b0c22;border-radius:6px 6px 0 0}
.socle{width:84%;padding:14px 10px 16px;border-radius:18px 18px 26px 26px;background:linear-gradient(180deg,#d9a83c,#8b5f1c);display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.plaque-socle{font-family:var(--titre);font-weight:800;color:#2a1a05;font-size:14px;letter-spacing:.04em}
.manette{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#c48a2a);border:3px solid #6e4a12;position:relative;transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.manette::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:8px;transform:translateX(-50%);background:#6e4a12;border-radius:4px}
.manette.tourne{transform:rotate(360deg)}
.compteurs-gacha{font-weight:800;font-family:var(--gras);font-size:14px}
.compteurs-gacha span:last-child{color:var(--ok)}
.boule-legende{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px;background:radial-gradient(circle at 32% 28%,#fff 0 8%,var(--b1) 22%,var(--b2) 78%)}
.gacha-calque{position:fixed;inset:0;z-index:80;background:rgba(5,6,26,.9);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}
.grosse-boule{position:relative;width:150px;height:150px;animation:tombe .9s cubic-bezier(.3,1.5,.5,1)}
.grosse-boule i{position:absolute;left:0;right:0;height:50%;background:radial-gradient(circle at 32% 40%,#fff 0 6%,var(--b1) 25%,var(--b2) 90%);transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .45s}
.grosse-boule .haut{top:0;border-radius:75px 75px 0 0}
.grosse-boule .bas{bottom:0;border-radius:0 0 75px 75px;background:radial-gradient(circle at 32% -60%,var(--b1) 25%,var(--b2) 90%)}
.grosse-boule.ouverte .haut{transform:translateY(-90px) rotate(-28deg);opacity:0}
.grosse-boule.ouverte .bas{transform:translateY(90px) rotate(18deg);opacity:0}
.grosse-boule.ouverte{position:absolute;pointer-events:none}
@keyframes tombe{from{transform:translateY(-60vh) scale(.3)}}
.gacha-carte .carte{--w:min(64vw,290px,calc((100vh - 280px) * .667));animation:vedette .8s cubic-bezier(.2,1.3,.4,1)}
.gacha-texte{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.gacha-texte .rang{font-family:var(--titre);font-weight:800;font-size:24px;color:var(--or)}
.gacha-texte .rang[data-r="mythique"]{background:var(--irise);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:irise 5s linear infinite}
.gacha-texte .badge{font-family:var(--gras);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:var(--ok);color:#06210f}
.gacha-texte .badge.doublon{background:var(--panneau-2);color:var(--doux);border:1px solid var(--ligne)}
.tapis{display:flex;flex-direction:column;gap:14px;padding:18px 12px;border-radius:24px;background:radial-gradient(circle at 50% 40%,#1d6b47,#0d3b27 70%);border:6px solid #5a3a16;box-shadow:inset 0 0 40px rgba(0,0,0,.5)}
.main-jeu{display:flex;flex-direction:column;align-items:center;gap:8px}
.main-jeu > small{color:#d6f5e3;font-weight:800;font-family:var(--gras)}
.main-jeu b{color:#fff}
.cartes-jeu{display:flex;gap:5px;justify-content:center;flex-wrap:nowrap;min-height:calc(var(--cj) * 1.45)}
.table-jeu{--cj:min(16vw,76px);align-items:stretch;max-width:560px;margin:0 auto;width:100%;gap:10px}
.table-jeu.poker{--cj:min(13.6vw,74px)}
@media (min-width:820px){.table-jeu{--cj:118px;max-width:820px}.table-jeu.poker{--cj:112px}.table-jeu .resultat-jeu{font-size:22px}}
.table-jeu .tapis{gap:6px}
.table-jeu .main-jeu{gap:4px}
.table-jeu .main-jeu + .resultat-jeu + .main-jeu > small{margin-top:4px}
.table-jeu.poker #joueur{padding-top:14px}
/* carte à jouer : coins lisibles, illustration de l'album au centre */
.carte-jeu{position:relative;width:var(--cj);aspect-ratio:2/2.9;border-radius:calc(var(--cj) * .11);background:#fdfbf4;color:#14162e;box-shadow:0 4px 10px rgba(0,0,0,.45);font-family:var(--gras);font-weight:800;animation:distribue .35s cubic-bezier(.2,1.2,.4,1) backwards;overflow:hidden;flex:0 0 auto}
.carte-jeu.rouge{color:#c8243b}
.carte-jeu.cachee{background:var(--nuit) url(/img/dos.webp) center/cover;border:2px solid #fff}
.carte-jeu .illu{position:absolute;left:18%;right:18%;top:12%;bottom:12%;border-radius:calc(var(--cj) * .06);background:#05061a center/cover;box-shadow:0 0 0 1.5px currentColor}
.carte-jeu .coin{position:absolute;top:3%;left:5%;font-size:calc(var(--cj) * .2);line-height:.95;display:flex;flex-direction:column;align-items:center;z-index:1}
.carte-jeu .coin i{font-style:normal;font-size:.8em}
.carte-jeu .coin.bas{top:auto;left:auto;bottom:3%;right:5%;transform:rotate(180deg)}
.carte-jeu .couleur-centre{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:calc(var(--cj) * .3);height:calc(var(--cj) * .3);border-radius:50%;background:#fdfbf4;display:grid;place-items:center;font-size:calc(var(--cj) * .22);box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:1}
.carte-jeu:not(:has(.illu)) .couleur-centre{bottom:auto;top:50%;transform:translate(-50%,-50%);width:auto;height:auto;background:none;box-shadow:none;font-size:calc(var(--cj) * .45)}
.carte-jeu[role="button"]{cursor:pointer;transition:transform .2s,opacity .2s}
.carte-jeu.a-changer{transform:translateY(-12px) rotate(-3deg);opacity:.6;outline:3px dashed var(--or);outline-offset:2px}
.carte-jeu.a-changer::after{content:"↻";position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cj) * .5);color:var(--or);text-shadow:0 0 6px #000;z-index:2}
@keyframes distribue{from{transform:translateY(-40px) rotate(-8deg);opacity:0}}
.resultat-jeu{text-align:center;font-family:var(--gras);font-weight:800;font-size:17px;min-height:26px;color:#fff}
.resultat-jeu[data-r="gagne"]{color:#ffe27a;text-shadow:0 0 12px rgba(255,220,120,.6);font-size:20px}
.resultat-jeu[data-r="perdu"]{color:#ffb4a8}
/* mises en jetons et table des gains */
.zone-mises{display:flex;flex-direction:column;gap:10px;align-items:center}
.jetons{display:flex;gap:10px;justify-content:center}
.jeton{width:62px;height:62px;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-family:var(--gras);
  background:radial-gradient(circle,#2b2f7a 52%,transparent 53%),repeating-conic-gradient(#fff 0 12deg,#3b46d6 12deg 30deg);border:3px solid #1a1d55;color:#fff;box-shadow:0 4px 0 #0c0e30;transition:transform .15s}
.jeton b{font-size:18px;line-height:1}
.jeton small{font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.jeton .eclat-ico{width:14px;height:14px}
.jeton[aria-pressed="true"]{transform:translateY(-6px);background:radial-gradient(circle,#c98a00 52%,transparent 53%),repeating-conic-gradient(#fff 0 12deg,#ffb800 12deg 30deg);border-color:#5a3a00;box-shadow:0 6px 0 #5a3a00,0 0 16px rgba(255,200,60,.6)}
.table-gains{width:100%;max-width:440px;border-collapse:collapse;font-size:13px;background:rgba(8,10,34,.72);border-radius:12px;overflow:hidden;color:#fff}
.table-gains td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.12)}
.table-gains td:nth-child(2){white-space:nowrap;text-align:right;color:var(--or)}
.table-gains td:nth-child(3){color:#c9cdf0;font-size:12px}
.table-gains .eclat-ico{width:12px;height:12px;vertical-align:-1px}
.plafond-jeu{text-align:center;margin:0 auto}
/* en-tête compact */
.entete-jeu{display:flex;flex-direction:column;gap:4px}
.entete-jeu .entre{justify-content:flex-start;gap:12px}
.entete-jeu h1{margin:0;font-size:26px}
.entete-jeu .sous{margin:0}
.regles-jeu{font-size:14px;background:rgba(8,10,34,.72);border-radius:12px;padding:8px 12px;color:#fff}
.regles-jeu p{margin:6px 0}
.compteurs-jeu{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-family:var(--gras);font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.compteurs-jeu .eclat-ico{width:14px;height:14px;vertical-align:-2px}
.jeu-compact{gap:10px}
/* Memory : la grille tient dans l'écran */
.memo{display:grid;grid-template-columns:repeat(4,var(--case,21vw));gap:8px;justify-content:center;margin:0 auto}
.memo-case{position:relative;width:var(--case,21vw);aspect-ratio:2/3;border:0;padding:0;background:none;cursor:pointer;perspective:600px;animation:distribue .35s backwards;animation-delay:calc(var(--k) * 25ms)}
.memo-case span{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .45s;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.memo-case .dos{background:var(--nuit) url(/img/dos.webp) center/cover;border:2px solid var(--ligne)}
.memo-case .face{background:#05061a center/cover;transform:rotateY(180deg);border:2px solid var(--or)}
.memo-case.retournee .dos{transform:rotateY(180deg)}
.memo-case.retournee .face{transform:rotateY(360deg)}
.memo-case.trouvee .face{border-color:var(--ok);box-shadow:0 0 14px rgba(95,211,154,.7)}
.memo-case.trouvee{animation:trouvee .5s}
@keyframes trouvee{50%{transform:scale(1.08)}}
/* Devine l'œuvre : image et réponses visibles ensemble */
.devine-zone{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;max-width:560px;margin:0 auto}
.jeu-compact{max-width:760px;margin:0 auto;width:100%}
.devine-cote{display:flex;flex-direction:column;gap:10px;width:100%}
.devine-image{position:relative;flex:0 0 auto;height:min(44svh,420px);aspect-ratio:2/3;overflow:hidden;border-radius:16px;border:3px solid var(--or);background:#05061a no-repeat;background-size:320%;background-position:var(--x) var(--y);
  filter:blur(5px);transition:background-size .6s,filter .6s,background-position .6s;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.categorie-devine{align-self:center;background:rgba(8,10,34,.8);color:var(--or-clair);font-family:var(--gras);font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px;white-space:nowrap}
.devine-image.indice1{background-size:200%;filter:blur(3px)}
.devine-image.indice2{background-size:140%;filter:blur(1.5px)}
.devine-image.revele{background-size:cover;background-position:center;filter:none}
.devine-image.non-possedee{filter:grayscale(1) brightness(.8)}
.devine-image[data-info]::after{content:attr(data-info);position:absolute;left:8px;right:8px;bottom:8px;text-align:center;background:rgba(8,10,34,.85);color:#fff;font-family:var(--gras);font-weight:800;font-size:13px;padding:6px;border-radius:10px}
.choix-devine{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choix-devine .choix{min-height:50px;line-height:1.15;padding:6px 10px;font-size:14px}
.choix-devine .bouton.juste{background:var(--ok)!important;color:#06210f!important;border-color:var(--ok);opacity:1!important;filter:none!important;box-shadow:0 0 14px rgba(95,211,154,.7)}
.choix-devine .bouton.faux{background:var(--alerte)!important;color:#1a0d0b!important;border-color:var(--alerte);opacity:1!important;filter:none!important}
.choix-devine .bouton:disabled:not(.juste,.faux){opacity:.55}
#table-quotas table{font-size:12.5px}#table-quotas td,#table-quotas th{white-space:nowrap;padding:6px 8px}
.carte.non-obtenue .face.recto{filter:grayscale(.85) brightness(.75)}

/* ---------- choix de récompense et cadeau mystère ---------- */
.deux-choix{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.deux-choix button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:18px;cursor:pointer;color:var(--texte);font:inherit;border:2px solid var(--ligne);background:var(--panneau-2)}
.deux-choix b{font-family:var(--gras);font-size:17px}
.deux-choix small{color:var(--doux);font-size:12.5px;line-height:1.25}
.deux-choix .ico{font-size:40px;line-height:1;height:58px;display:grid;place-items:center}
.deux-choix .ico img{width:58px;height:58px;object-fit:contain}
.cadeau-img{display:block;margin:0 auto;width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.deux-choix .ico svg{width:40px;height:40px;fill:#8fd8ff}
.choix-mystere{background:linear-gradient(160deg,#ff5ab4,#8a2be2)!important;border-color:#ffd6f0!important}
.choix-mystere small{color:#fff!important}
.boite-mystere{display:inline-block;animation:frissonne 1.6s ease-in-out infinite}
@keyframes frissonne{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-12deg)}80%{transform:rotate(10deg)}85%{transform:rotate(-8deg)}90%{transform:rotate(5deg)}}
.fenetre-modale.mystere{flex-direction:column}
.boite-geante{width:min(60vw,240px);height:auto;filter:drop-shadow(0 10px 30px rgba(255,120,200,.6));animation:arrive-boite .5s cubic-bezier(.3,1.6,.5,1)}
.boite-geante.tremble{animation:tremble-boite .09s linear infinite}
.boite-geante.eclate{animation:eclate-boite .35s ease-in forwards}
@keyframes arrive-boite{from{transform:scale(.2) rotate(-20deg)}}
@keyframes tremble-boite{0%{transform:rotate(-6deg) scale(1.02)}50%{transform:rotate(6deg) scale(1.06)}100%{transform:rotate(-6deg) scale(1.02)}}
@keyframes eclate-boite{to{transform:scale(2.4);opacity:0}}
.contenu-mystere .panneau{max-width:380px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;animation:annonce-boite .45s cubic-bezier(.2,1.3,.4,1)}
.badge-nouvelle{font-family:var(--gras);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:var(--ok);color:#06210f}
:root[data-theme="colore"] .deux-choix button{border:3px solid #120a45;box-shadow:0 5px 0 #120a45}
:root[data-theme="colore"] .choix-connu{background:linear-gradient(180deg,#7ff0ff,#21b8ff)!important;color:#062044!important}
:root[data-theme="colore"] .choix-connu small{color:#062044!important}
:root[data-theme="colore"] .choix-connu .ico svg{fill:#fff;filter:drop-shadow(0 2px 0 #120a45)}
:root[data-theme="colore"] .deux-choix b{font-family:var(--titre);font-weight:400;font-size:20px;text-shadow:0 2px 0 rgba(18,10,69,.5)}
:root[data-theme="colore"] .choix-mystere{border-color:#120a45!important}

/* fiche ouverte pendant un booster : panneau du bas sur téléphone, colonne de droite sur ordinateur */
.annonce .voir-fiche{margin-top:6px;border:1px solid var(--ligne);background:var(--panneau-2);color:var(--texte);font-family:var(--gras);font-weight:800;font-size:14px;padding:7px 14px;border-radius:999px;cursor:pointer;animation:annonce .5s .3s backwards;pointer-events:auto}
:root[data-theme="colore"] .annonce .voir-fiche{background:#fff;color:#1b1475;border:3px solid #120a45;box-shadow:0 3px 0 #120a45;font-family:var(--titre);font-weight:400;font-size:16px}
.fiche.laterale{background:rgba(5,6,26,.45);backdrop-filter:none;padding:0;overflow:hidden}
.fiche.laterale .fiche-int{position:absolute;left:0;right:0;bottom:0;top:24%;overflow:auto;background:var(--fond);border-radius:24px 24px 0 0;padding:20px 16px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.5);animation:monte .3s cubic-bezier(.2,1,.4,1)}
.fiche.laterale #c{display:none}
.fiche.laterale .fermer{position:absolute;top:calc(24% + 10px);right:12px;z-index:3}
@keyframes monte{from{transform:translateY(100%)}}
@keyframes glisse{from{transform:translateX(100%)}}
@media (min-width:760px){
  .fiche.laterale .fiche-int{top:0;left:auto;width:min(460px,42vw);border-radius:24px 0 0 24px;animation:glisse .3s cubic-bezier(.2,1,.4,1);display:block}
  .fiche.laterale .fermer{top:14px}
}
:root[data-theme="colore"] .fiche.laterale .fiche-int{background:linear-gradient(180deg,#3d4bff,#2a1aa8);border:3px solid #120a45}

/* ---------- cadre « Céleste » (Commune, Rare, Épique) : l'image dans une fenêtre, une plaque à étoiles en bas ---------- */
.carte .fenetre{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.carte.cadree .face.recto{background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 55%,#141a46),#0b1030 70%)}
/* la fenêtre a le format des images (2:3) : l'illustration remplit tout, sans être déformée ni rognée */
/* l'image occupe le haut de la carte (recadrée sans déformation), la plaque tout le bas */
.carte.cadree .fenetre{inset:3.5% 3.5% 27% 3.5%;border-radius:4.5% 4.5% 2% 2%;border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.carte.cadree .art{background-size:cover;background-position:center 30%}
.carte.cadree .holo,.carte.cadree .reflet{inset:3.5% 3.5% 27% 3.5%;border-radius:4.5% 4.5% 2% 2%}
/* plaque en verre fumé posée sur le bas de l'image */
.carte.cadree .plaque{left:3.5%;right:3.5%;bottom:3.5%;height:22.5%;padding:.15em .4em;justify-content:center;align-items:center;text-align:center;gap:.22em;border-radius:2% 2% 4.5% 4.5%;
  background:linear-gradient(180deg,#1d2466,#0d1238);border:1px solid color-mix(in srgb,var(--rc) 60%,rgba(255,255,255,.2));box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.carte.cadree .nom{font-size:1.42em;-webkit-line-clamp:2;text-shadow:none;line-height:1.05;width:100%}
.carte.cadree .oeuvre{font-size:.92em;margin-top:-.05em;width:100%}
/* les titres longs rapetissent pour laisser la place à l'œuvre */
.carte.cadree .nom.long{font-size:1.12em}
.carte.cadree .nom.tres-long{font-size:.95em}
:root .carte.cadree .nom.long{font-size:1.12em}
:root .carte.cadree .nom.tres-long{font-size:.95em}
/* la pastille de rareté est posée à cheval sur le bord de l'image et de la plaque */
.carte.cadree .pastille{font-size:.78em;position:absolute;top:0;left:50%;transform:translate(-50%,-58%);box-shadow:0 .15em .5em rgba(0,0,0,.45)}
.carte.cadree .plaque{padding-top:.7em}
.carte.cadree .cat{top:7%;left:8%}
.carte.cadree .quantite{top:7%;right:8%}
.carte.cadree .coeur{right:7%;top:6%}
.carte.cadree .quantite ~ .coeur{top:calc(7% + 1.7em)}
.carte.cadree.mini .plaque{padding:0 .2em}
.carte.cadree.mini .nom{font-size:1.2em}

/* album : tous les filtres visibles, rangés par groupe */
.filtres-album{display:grid;gap:10px}
.groupe-filtres{display:grid;gap:6px}
.groupe-filtres > b{font-family:var(--gras);font-size:13px;color:var(--doux);text-transform:uppercase;letter-spacing:.06em}
.puces{display:flex;flex-wrap:wrap;gap:8px}

/* ouverture : des ciseaux à faire glisser le long des pointillés */
.scene-paquet .ciseaux{position:absolute;top:14%;left:var(--coupe,0%);z-index:6;font-size:34px;line-height:1;color:#fff;transform:translate(-30%,-55%) rotate(0deg);
  text-shadow:0 0 10px var(--hc2,#ffe9a8),0 2px 4px rgba(0,0,0,.6);pointer-events:none;animation:invite-ciseaux 2.2s ease-in-out infinite}
.scene-paquet.coupe .ciseaux{animation:clac .25s ease-in-out infinite}
.scene-paquet .ciseaux.rappel{animation:invite-ciseaux .9s ease-in-out 2}
.scene-paquet.ouvert .ciseaux{display:none}
@keyframes invite-ciseaux{0%,30%{transform:translate(-30%,-55%)}60%{transform:translate(60%,-55%)}100%{transform:translate(-30%,-55%)}}
@keyframes clac{50%{transform:translate(-30%,-55%) rotate(-14deg)}}
/* plein écran : l'illustration seule */
.image-plein .fermer-plein{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:26px;cursor:pointer}
.image-plein .fiche-plein{position:absolute;bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));left:50%;transform:translateX(-50%)}
.bilan .carte{cursor:zoom-in}

/* comment jouer */
.aide-lien .point-aide{position:static;display:grid;place-items:center;width:100%;height:100%;min-width:0;background:none;border:0;color:inherit;font-family:var(--titre);font-size:20px;padding:0}
.aide{display:grid;gap:12px}
.aide summary{cursor:pointer;font-family:var(--titre);font-size:18px;display:flex;align-items:center;gap:10px;list-style:none}
.aide summary::-webkit-details-marker{display:none}
.aide summary::after{content:"›";margin-left:auto;transition:transform .2s;font-size:22px}
.aide details[open] summary::after{transform:rotate(90deg)}
.aide .ico-aide{font-size:22px}
.texte-aide{margin-top:8px;line-height:1.5}
.texte-aide ul{padding-left:20px;margin:6px 0}
.texte-aide li{margin:4px 0}
details.filtres-album{background:var(--panneau);border:1px solid var(--ligne);border-radius:16px;padding:10px 14px}
details.filtres-album[open]{padding-bottom:14px}
details.filtres-album summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;font-family:var(--titre);font-size:17px}
details.filtres-album summary::-webkit-details-marker{display:none}
details.filtres-album summary::after{content:"▾";margin-left:auto;transition:transform .2s}
details.filtres-album[open] summary::after{transform:rotate(180deg)}
details.filtres-album summary small{font-family:var(--corps,inherit);font-size:13px;color:var(--doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.filtres-album[open] > .groupe-filtres{margin-top:10px}
.carte.cadree .nom{padding-bottom:.04em}
/* le cœur : une zone de toucher plus grande que le dessin */
.carte .coeur::before{content:"";position:absolute;inset:-.7em}


/* ---------- salle de jeux : décor d'arcade, tapis de cartes, vraie machine à capsules ---------- */
:root body[data-ecran="jeux"] #ciel{background:linear-gradient(180deg,rgba(20,10,50,.35),rgba(20,10,50,.72)),url(/img/salle.webp) center top/cover no-repeat}
:root body[data-ecran="jeux"] #ciel::before,:root body[data-ecran="jeux"] #ciel::after{display:none}
/* sur le décor, les titres et textes hors panneaux restent clairs, quel que soit le style */
:root body[data-ecran="jeux"] #vue > .pile > div:not(.panneau) > h1,:root body[data-ecran="jeux"] #vue > .pile > div:not(.panneau) > .sous,
:root body[data-ecran="jeux"] #vue > .pile > .entre,:root body[data-ecran="jeux"] .compteurs-gacha,:root body[data-ecran="jeux"] #plafond{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7)}
:root body .pile .tapis{background:none;border-style:solid;border-width:26px;border-image:url(/img/tapis.webp) 96 fill / 26px stretch;border-radius:0;box-shadow:0 14px 30px rgba(0,0,0,.45);padding:10px 4px}
.mini-machine{width:96px;height:96px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.machine{position:relative;width:min(84vw,340px);margin:0 auto;display:block}
.machine-img{display:block;width:100%;height:auto;position:relative;z-index:2;filter:drop-shadow(0 16px 24px rgba(0,0,0,.5));transform-origin:50% 90%}
.machine .lueur-machine{position:absolute;inset:8% 22% 30% 2%;border-radius:50%;z-index:1;background:radial-gradient(circle,rgba(255,215,120,.45),transparent 65%);animation:respire 3s ease-in-out infinite}
.machine .plaque-socle{position:relative;z-index:3;display:block;width:max-content;margin:-4px auto 0;padding:5px 14px;border-radius:999px;background:linear-gradient(180deg,#ffe08a,#d9a83c);box-shadow:0 3px 0 #7a5212}
.machine.brasse .machine-img{animation:secoue-machine .14s linear infinite}
@keyframes secoue-machine{25%{transform:rotate(-1.6deg) translateX(-2px)}75%{transform:rotate(1.6deg) translateX(2px)}}
/* capsule : la moitié dorée prend la couleur de la rareté */
.capsule,.grosse-capsule i{background:url(/img/capsule.webp) center/contain no-repeat}
.capsule[data-r="commune"],.grosse-capsule[data-r="commune"] i{filter:saturate(.05) brightness(1.15)}
.capsule[data-r="rare"],.grosse-capsule[data-r="rare"] i{filter:hue-rotate(170deg) saturate(1.3)}
.capsule[data-r="epique"],.grosse-capsule[data-r="epique"] i{filter:hue-rotate(235deg) saturate(1.3)}
.capsule[data-r="legendaire"],.grosse-capsule[data-r="legendaire"] i{filter:saturate(1.2) drop-shadow(0 0 14px rgba(255,210,90,.9))}
.capsule[data-r="mythique"],.grosse-capsule[data-r="mythique"] i{animation:capsule-irise 2s linear infinite}
@keyframes capsule-irise{to{filter:hue-rotate(360deg) saturate(1.4) drop-shadow(0 0 16px rgba(255,140,220,.9))}}
.capsule{position:absolute;z-index:3;left:42.3%;top:81%;width:15%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.6)}
.capsule.tombe{animation:capsule-sort .7s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes capsule-sort{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}30%{opacity:1}100%{transform:translate(-50%,30%) scale(1.1)}}
.grosse-capsule{position:relative;width:220px;height:220px;animation:capsule-arrive 1s cubic-bezier(.3,1.5,.5,1)}
.grosse-capsule i{position:absolute;inset:0;transition:transform .5s cubic-bezier(.3,1.2,.5,1),opacity .5s}
.grosse-capsule .haut{clip-path:inset(0 0 50% 0)}
.grosse-capsule .bas{clip-path:inset(50% 0 0 0)}
.grosse-capsule.ouverte{position:absolute;pointer-events:none}
.grosse-capsule.ouverte .haut{transform:translateY(-110px) rotate(-24deg);opacity:0}
.grosse-capsule.ouverte .bas{transform:translateY(110px) rotate(16deg);opacity:0}
@keyframes capsule-arrive{0%{transform:translateY(60vh) scale(.3) rotate(-200deg)}70%{transform:translateY(-12px) scale(1.05) rotate(10deg)}100%{transform:none}}
/* dôme animé et manivelle à tourner (positions en fraction de la largeur de la machine) */
.machine{container-type:inline-size}
.machine .dome{position:absolute;z-index:3;left:12.2%;top:19.5%;width:59.5%;height:35.8%;pointer-events:none}
.manivelle{position:absolute;z-index:4;left:51%;top:68.3%;width:0;height:0;transform:rotate(var(--a,-14deg));touch-action:none}
.manivelle.revient{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.manivelle .bras{position:absolute;left:0;top:-1.9cqw;width:31cqw;height:3.8cqw;border-radius:2cqw;
  background:linear-gradient(180deg,#fff6c4,#f0c044 45%,#a7700e);box-shadow:0 .6cqw 1cqw rgba(0,0,0,.35)}
.manivelle .moyeu{position:absolute;left:-6cqw;top:-6cqw;width:12cqw;height:12cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6c8,#e7b13a 55%,#8a5a10);box-shadow:0 0 0 1.2cqw #c99a2e inset,0 .8cqw 1.4cqw rgba(0,0,0,.35)}
.manivelle .pommeau{position:absolute;left:26cqw;top:-5.5cqw;width:11cqw;height:11cqw;border-radius:50%;cursor:grab;
  background:radial-gradient(circle at 35% 30%,#e8ccff,#8a3fe0 55%,#3d0f78);box-shadow:0 .8cqw 1.4cqw rgba(0,0,0,.4);animation:appel-pommeau 1.8s ease-in-out infinite}
/* une grande zone de prise autour du pommeau, pour le doigt */
.manivelle .pommeau::before{content:"";position:absolute;inset:-60%;border-radius:50%}
.manivelle.tenue .pommeau,.manivelle.auto .pommeau{cursor:grabbing;animation:none}
@keyframes appel-pommeau{50%{box-shadow:0 .8cqw 1.4cqw rgba(0,0,0,.4),0 0 0 2cqw rgba(201,150,255,.35)}}
.consigne-gacha{text-align:center;margin:0;font-family:var(--gras);font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7)}

/* gacha : la manivelle ne se manipule plus, elle tourne avec le bouton */
.manivelle{pointer-events:none}
.manivelle .pommeau{animation:none}
/* machine à pince */
.cabine-cadre{position:relative;width:min(92vw,400px);aspect-ratio:1/1;margin:0 auto}
.cabine-img{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;user-select:none;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}
/* la vitrine de l'illustration : rail en haut, capsules sur le plancher */
.cabine{position:absolute;left:19.5%;top:14%;width:61.5%;height:56.5%;z-index:3}
.chariot{position:absolute;top:0;left:50%;width:0;z-index:3}
.chariot::before{content:"";position:absolute;left:-16px;top:-4px;width:32px;height:14px;border-radius:5px;background:linear-gradient(180deg,#fff3c4,#d9a83c 55%,#7a5212);box-shadow:0 2px 4px rgba(0,0,0,.35)}
.chariot .cable{position:absolute;left:-2px;top:8px;width:4px;height:10px;background:linear-gradient(90deg,#8a8aa0,#f4f4fa,#8a8aa0);transition:height .75s ease-in-out}
.chariot .griffe{position:absolute;left:2px;top:100%;width:62px;height:62px;margin-top:-6px;transform:translateX(-50%)}
.griffe img{position:relative;z-index:1;display:block;width:100%;height:100%;transition:transform .3s;transform-origin:50% 35%;pointer-events:none}
.chariot.ferme .griffe img{transform:scaleX(.68)}
.cabine .bac{position:absolute;left:0;right:0;bottom:0;height:30%}
.capsule-bac{position:absolute;width:14%;aspect-ratio:1;background:url(/img/capsule.webp) center/contain no-repeat;transform:rotate(var(--rot,0deg));filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
/* tenue entre les branches de la pince : sa taille et sa place dans le bac (en %) ne comptent plus */
.capsule-bac.prise{position:absolute;left:50%!important;top:46%;bottom:auto!important;width:56%!important;transform:translateX(-50%) rotate(var(--rot,0deg));z-index:0}
.capsule-bac.tombe{transition:transform .5s ease-in,opacity .5s;transform:translate(-50%,160px);opacity:0}
/* levier de machine à sous : la tige et la boule de l'illustration, qu'on tire vers soi (elle bascule autour de son axe) */
.levier{position:absolute;z-index:4;left:72.2%;top:21.1%;width:17.2%;height:41.9%;cursor:grab;touch-action:none;--tire:0;
  transform-origin:30% 100%;transform:perspective(420px) rotateX(calc(var(--tire) * -58deg));filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.levier img{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.levier.tenu{cursor:grabbing}
.levier.anime{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.levier:not(.tenu):not(.anime){animation:appel-levier 1.8s ease-in-out infinite}
@keyframes appel-levier{50%{filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(255,120,160,.8))}}
/* capsules du bac : la moitié basse prend la couleur de la rareté */
.capsule-bac[data-r="commune"]{filter:saturate(.05) brightness(1.15) drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.capsule-bac[data-r="rare"]{filter:hue-rotate(170deg) saturate(1.3) drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.capsule-bac[data-r="epique"]{filter:hue-rotate(235deg) saturate(1.3) drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.capsule-bac[data-r="legendaire"]{filter:saturate(1.3) drop-shadow(0 0 8px rgba(255,210,90,.95))}
.capsule-bac[data-r="mythique"]{animation:capsule-irise 2s linear infinite}
.capsule-bac.retombe{animation:retombe .5s cubic-bezier(.5,0,.8,1)}
@keyframes retombe{from{transform:translateY(-120px) rotate(40deg)}}

/* installation sur l'écran d'accueil */
.bandeau-installation{display:flex;gap:14px;align-items:center;border-color:var(--or)}
.bandeau-installation > img{width:48px;height:48px;border-radius:12px;flex:0 0 auto}
.guide-installation{text-align:left!important}
.guide-installation h2{text-align:center}
.etapes-installation{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.ico-partager{width:18px;height:18px;fill:currentColor;vertical-align:-3px}
.code-transfert{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--nuit);border:1px dashed var(--or);border-radius:12px;padding:10px}
.code-transfert b{font-family:var(--gras);font-size:26px;letter-spacing:.12em;color:var(--or-clair)}
#code{text-transform:uppercase;letter-spacing:.12em;text-align:center}

/* collections : pourcentages et ensembles thématiques */
.progression .pct,.ensemble .pct{color:var(--or);font-family:var(--gras)}
.ensembles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.ensemble{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid var(--ligne)}
.ensemble .ico-ens{font-size:26px}
.ensemble b{display:block;font-family:var(--gras)}
.ensemble small{color:var(--doux);font-size:12px}
.ensemble .jauge{margin-top:4px}
.ensemble .pct{font-size:18px}
.defi-semaine{border-color:var(--or)}
.versions-speciales{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.versions-speciales > div:last-child{flex:1 1 220px;display:flex;flex-direction:column;gap:6px}
.versions-speciales .exemples{display:flex;gap:8px}
.probleme-internet{display:flex;flex-direction:column;gap:8px;border-color:var(--alerte)}
.probleme-internet pre{white-space:pre-wrap;font-size:12px;margin:0;color:var(--doux);max-height:160px;overflow:auto}
@media (min-width:820px){.machine{width:420px}.cabine-cadre{width:min(520px,100%)!important;margin-left:auto;margin-right:auto}}
.cabine{container-type:inline-size}
.chariot .griffe{width:24cqw;height:24cqw}
/* boutique : étiquette au-dessus des visuels */
.offre .etiquette{z-index:5}
.raretes-inedites{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px}
.rarete-inedite{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;border-radius:18px;cursor:pointer;font-family:var(--gras);
  background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 45%,#1b1f5a),#0d1038);border:2px solid var(--rc);color:#fff;box-shadow:0 0 18px color-mix(in srgb,var(--rc) 35%,transparent)}
.rarete-inedite b{font-size:20px}
.rarete-inedite span{font-size:17px;font-weight:800;display:flex;gap:4px;align-items:center}
.rarete-inedite small{color:#d5d9ff}
.rarete-inedite .manque{color:#ffb4a8}
.rarete-inedite:disabled{opacity:.5;cursor:default}
.rarete-inedite[data-r="mythique"]{background:linear-gradient(160deg,#5b2a8a,#1a0d3a);border-image:var(--irise) 1}
/* booster Prestige : or et éclat */
.paquet.prestige{filter:drop-shadow(0 0 8px rgba(255,210,90,.9)) drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.paquet.prestige .foil{opacity:1;background:linear-gradient(115deg,transparent 30%,rgba(255,240,180,.55) 45%,transparent 60%);background-size:250% 100%;animation:irise 3s linear infinite}

/* ---------- collections spéciales et secrètes ---------- */
.retour{color:var(--doux);text-decoration:none;font-size:13px;font-weight:700}
.lien-speciales{display:flex;flex-direction:column;gap:2px;text-decoration:none;border-color:var(--or)}
.lien-speciales svg{width:16px;height:16px;fill:var(--or);vertical-align:-2px}
.tuiles-speciales{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tuile-speciale{position:relative;display:flex;align-items:flex-end;min-height:150px;border-radius:20px;overflow:hidden;text-decoration:none;border:1px solid var(--ligne);isolation:isolate}
.tuile-speciale .decor{position:absolute;inset:0;z-index:-1}
.tuile-speciale .texte{display:flex;flex-direction:column;gap:5px;padding:14px;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.65) 40%)}
.tuile-speciale b{font-family:var(--titre);font-size:20px}
.tuile-speciale small{color:#e6e8ff;font-size:12.5px}
.tuile-speciale .pastille-nb{top:12px;right:12px}
.tuile-speciale.pokedex .decor{background:linear-gradient(135deg,#e3350d,#9b1d0a)}
.tuile-speciale.pokedex .decor::after{content:"";position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;opacity:.9;
  background:radial-gradient(circle,#fff 0 13%,#222 13% 19%,transparent 19%),linear-gradient(#ff5a3c 0 46%,#222 46% 54%,#f4f4f4 54%);box-shadow:0 0 0 6px #222 inset;transform:rotate(-20deg)}
.tuile-speciale.marvel .decor{background:linear-gradient(115deg,#b3141b,#e62429 45%,#1b1b3a 46%,#0c0c22)}
.tuile-speciale.marvel .decor::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.05) 22px 24px)}
.tuile-speciale.disney .decor{background:radial-gradient(circle at 70% 20%,#ffe9a8 0 2px,transparent 3px),radial-gradient(circle at 30% 35%,#fff 0 1px,transparent 2px),linear-gradient(#142a6b,#3c3f9e 60%,#b07ad6)}

.frise-paliers{list-style:none;margin:0;padding:4px 0 0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);gap:8px;overflow-x:auto;scrollbar-width:thin}
.frise-paliers li{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:10px 6px;border-radius:14px;background:rgba(0,0,0,.2);border:1px solid var(--ligne)}
.frise-paliers .rond{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--panneau-2);border:2px solid var(--ligne);font-weight:800;font-family:var(--gras)}
.frise-paliers small{color:var(--doux);font-size:11.5px}
.frise-paliers b{font-size:12.5px;color:var(--or-clair)}
.frise-paliers .pris{opacity:.6}
.frise-paliers .pris .rond{background:var(--ok);border-color:var(--ok);color:#06210f}
.frise-paliers .pret{border-color:var(--or);box-shadow:0 0 18px rgba(230,195,106,.25)}
.frise-paliers .pret .rond{border-color:var(--or);color:var(--or)}
.frise-paliers .prochain .rond{border-color:var(--rare)}
.fait{color:var(--ok);font-weight:700}

/* Pokédex : une case par numéro */
.grille-pokedex{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.case-pokedex{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:150px;padding:6px 4px;border-radius:14px;border:1px solid var(--ligne);background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.07),rgba(0,0,0,.25));cursor:pointer;overflow:hidden}
.case-pokedex small{position:absolute;top:5px;left:7px;font-size:10.5px;color:var(--doux);font-weight:700}
.case-pokedex span{font-size:26px;font-weight:800;color:rgba(255,255,255,.18);font-family:var(--gras)}
.case-pokedex img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;border-radius:10px}
.case-pokedex b{font-size:11px;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.case-pokedex.trouve{border-color:#f2c94c;background:linear-gradient(#e3350d22,#0000)}
.case-pokedex:disabled{cursor:default}

/* Marvel : album de stickers façon BD (papier, trame de points, bandeaux penchés) */
.couverture-bd{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:22px 18px 16px;border-radius:18px;color:#fff;border:4px solid #111;box-shadow:6px 6px 0 #111;
  background:radial-gradient(circle,rgba(0,0,0,.18) 1.4px,transparent 1.6px) 0 0/9px 9px,linear-gradient(135deg,#e62429,#9e0f14)}
.couverture-bd small{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.couverture-bd h1{margin:0;font-family:"Lilita One",var(--gras);font-size:58px;line-height:.9;letter-spacing:.02em;color:#fff;-webkit-text-stroke:2px #111;text-shadow:4px 4px 0 #111;transform:rotate(-3deg);transform-origin:left}
.couverture-bd > span{font-weight:800;font-size:13px}
.couverture-bd .jauge{background:rgba(0,0,0,.35)}
.page-bd{display:flex;flex-direction:column;gap:12px;padding:0 12px 14px;border-radius:14px;border:4px solid #111;box-shadow:6px 6px 0 #111;color:#111;
  background:radial-gradient(circle,rgba(0,0,0,.07) 1.2px,transparent 1.4px) 0 0/8px 8px,#fbf6e9}
.bandeau-bd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 -12px;padding:10px 14px;background:var(--eq);border-bottom:4px solid #111;color:#fff;border-radius:9px 9px 0 0}
.bandeau-bd h2{margin:0;font-family:"Lilita One",var(--gras);font-size:22px;letter-spacing:.02em;text-shadow:2px 2px 0 #111;transform:skew(-6deg)}
.bandeau-bd span{background:#fff;color:#111;border:3px solid #111;border-radius:999px;padding:1px 10px;font-weight:900;font-size:13px}
.cases-bd{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.emplacement-bd,.sticker-bd{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;border-radius:10px;text-align:center;padding:5px 5px 6px}
.emplacement-bd{border:2px dashed rgba(0,0,0,.35);background:rgba(0,0,0,.04)}
.emplacement-bd .photo-vide{display:grid;place-items:center;width:100%;aspect-ratio:2/3;border-radius:6px;background:rgba(0,0,0,.05);font-family:"Lilita One",var(--gras);font-size:28px;color:rgba(0,0,0,.18)}
.emplacement-bd b{font-size:10.5px;line-height:1.15;color:rgba(0,0,0,.55);text-transform:uppercase;letter-spacing:.02em}
.sticker-bd{gap:4px;border:0;cursor:pointer;background:#fff;box-shadow:0 0 0 2px #111,3px 4px 0 #111;transform:rotate(var(--rot));transition:transform .2s;overflow:hidden;padding:5px 5px 6px}
.sticker-bd .photo{position:relative;width:100%;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:#ddd}
.sticker-bd .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sticker-bd .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);background-size:250% 100%;animation:brille-sticker 5s ease-in-out infinite}
.sticker-bd b{font-size:10.5px;line-height:1.1;color:#111;text-transform:uppercase;font-weight:900}
.sticker-bd:hover,.sticker-bd:focus-visible{transform:rotate(0) scale(1.05)}
@keyframes brille-sticker{0%,60%{background-position:150% 0}100%{background-position:-60% 0}}
.tampon-bd{align-self:center;padding:4px 16px;border:4px solid #1d9a4f;color:#1d9a4f;border-radius:8px;font-family:"Lilita One",var(--gras);font-size:20px;transform:rotate(-6deg);text-transform:uppercase}
.page-bd > .sous{color:#5a4a2a!important;text-align:center;font-weight:700}
.couverture-sport{background:radial-gradient(circle,rgba(255,255,255,.12) 1.4px,transparent 1.6px) 0 0/9px 9px,repeating-linear-gradient(90deg,#1f9d55 0 34px,#23ad5e 34px 68px)}
.couverture-sport h1{font-size:44px}
.page-sport{background:radial-gradient(circle,rgba(0,0,0,.05) 1.2px,transparent 1.4px) 0 0/8px 8px,#f6f8f1}
.famille-sport h2{margin:0}
.bouton.pow{align-self:center;font-family:"Lilita One",var(--gras);font-size:18px}

.tours-liste{display:flex;flex-direction:column;gap:8px}
.tour-ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid var(--ligne)}
.tour-ligne .ico-ens{font-size:24px}
.tour-ligne small{display:block;color:var(--doux);font-size:12px}
.paliers-tour{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.duos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.duo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid var(--ligne);text-align:center}
.duo b{font-size:12.5px;line-height:1.2}
.duo small{color:var(--doux)}
.duo .paire{display:flex;align-items:center;gap:6px}
.duo .paire img,.duo .paire .vide{width:52px;height:78px;border-radius:9px;object-fit:cover}
.duo .paire .vide{display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px dashed var(--ligne);color:var(--doux);font-weight:800}
.duo .paire i{font-style:normal;font-weight:900;font-size:12px;color:var(--or)}
.duo.contre .paire i{color:#ff6b6b}
.duo.reunis{border-color:var(--or)}

/* collections secrètes */
.disciplines{display:flex;flex-wrap:wrap;gap:6px}
.discipline{padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.2);border:1px solid var(--ligne);font-size:12.5px}
.discipline small{color:var(--doux)}
.discipline.complete{border-color:var(--ok)}
.grille-secrete{display:flex;flex-wrap:wrap;gap:10px}
.scene-ferme{border-radius:20px;overflow:hidden;border:1px solid var(--ligne);background:#9fdcff;position:relative}
.dessin-ferme{display:block;width:100%;max-height:440px}
.dessin-ferme .nuages{animation:nuages 30s ease-in-out infinite alternate}
@keyframes nuages{to{transform:translateX(40px)}}
.dessin-ferme .ailes{transform-origin:355px 86px;animation:ailes 7s linear infinite}
.dessin-ferme .fumee circle{animation:fumee 3s ease-out infinite;transform-box:fill-box;transform-origin:center}
.dessin-ferme .fumee circle:nth-child(2){animation-delay:1s}.dessin-ferme .fumee circle:nth-child(3){animation-delay:2s}
@keyframes fumee{0%{opacity:0;transform:translateY(6px) scale(.6)}40%{opacity:.9}100%{opacity:0;transform:translateY(-8px) scale(1.3)}}
@keyframes ailes{to{transform:rotate(360deg)}}
.dessin-ferme .champ.mur{cursor:pointer}
.dessin-ferme .champ.mur .plant{animation:mur 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
.dessin-ferme .champ.recolte .plant{animation:cueille .6s ease-in forwards;transform-box:fill-box;transform-origin:bottom}
@keyframes mur{50%{transform:translateY(-2px) scale(1.1)}}
@keyframes cueille{to{transform:translateY(-40px) scale(1.4);opacity:0}}
.prochain-batiment{display:block;text-align:center;background:#4f9b45;color:#fff;padding:6px 10px;font-size:13px}
/* château dessiné */
.chateau-dessin{display:block;width:100%;max-width:560px;margin:0 auto;border-radius:20px;border:1px solid var(--ligne)}
.chateau-dessin .fen{fill:#1a1f45}
.chateau-dessin .fen.on{fill:#ffd96a;filter:drop-shadow(0 0 3px #ffcc4d)}
.chateau-dessin .groupe.complete{filter:drop-shadow(0 0 6px rgba(255,220,140,.75))}
.chateau-dessin .etoiles{opacity:.75}
.chateau-dessin .etoile-filante{animation:scintille-ch 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes scintille-ch{50%{opacity:.5;transform:scale(.7)}}
.chateau-dessin .gerbe{animation:gerbe 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes gerbe{0%{opacity:1;transform:scale(.1)}70%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
/* vote du booster du mois */
.choix-vote{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.option-vote{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border-radius:16px;border:2px solid var(--ligne);background:rgba(0,0,0,.18);cursor:pointer;text-align:center}
.option-vote .ico{font-size:30px}
.option-vote small{color:var(--doux)}
.option-vote.choisi{border-color:var(--or);box-shadow:0 0 18px rgba(230,195,106,.3)}
.option-vote.choisi b::after{content:" ✓";color:var(--or)}
.barre-vote{display:block;width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.barre-vote span{display:block;height:100%;background:var(--or)}
/* albums : cases vides souhaitées, sticker qui se colle, liens du bilan */
.emplacement-bd{cursor:pointer;font:inherit}
.emplacement-bd.souhaite,.case-pokedex.souhaite,.duo .paire .vide.souhaite{border-color:#ff5d8f;border-style:solid}
.emplacement-bd.souhaite::after,.case-pokedex.souhaite::after,.duo .paire .vide.souhaite::after{content:"♥";position:absolute;top:4px;right:6px;color:#ff5d8f;font-size:15px}
.duo .paire .vide{position:relative;cursor:pointer;font:inherit}
.sticker-bd.colle,.case-pokedex.colle{animation:coller 1.1s cubic-bezier(.2,.9,.3,1.2) both;z-index:2}
@keyframes coller{0%{transform:scale(1.9) rotate(-14deg);opacity:0;box-shadow:0 0 0 2px #111,20px 30px 30px rgba(0,0,0,.5)}
  55%{opacity:1}100%{transform:rotate(var(--rot,0deg));box-shadow:0 0 0 2px #111,3px 4px 0 #111}}
.case-pokedex.colle{box-shadow:0 0 22px #f2c94c}
.albums-bilan{display:flex;flex-direction:column;gap:6px;width:min(100%,460px);margin:0 auto}
.lien-album{border:1px solid var(--or);background:rgba(230,195,106,.12);color:var(--texte);border-radius:12px;padding:9px 12px;font-weight:800;text-align:left;cursor:pointer}
.places-carte{display:flex;flex-wrap:wrap;gap:6px}
.places-carte a{padding:5px 11px;border-radius:999px;border:1px solid var(--or);background:rgba(230,195,106,.12);text-decoration:none;font-size:13px;font-weight:700}
/* grand écran : ferme à sa taille, stickers plus grands */
.scene-ferme{max-width:780px;width:100%;margin:0 auto}
.dessin-ferme{max-height:none}
@media (min-width:900px){.cases-bd{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.grille-pokedex{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
/* premier lancement */
.bienvenue .panneau{max-width:460px;text-align:center}
.points-bienvenue{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:7px;text-align:left}
.points-bienvenue li{padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.18)}
.styles-bienvenue{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:10px 0}
.style-choix{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px;border-radius:14px;border:2px solid var(--ligne);background:rgba(0,0,0,.15);cursor:pointer}
.style-choix .apercu{display:flex;gap:4px;align-items:flex-end;justify-content:center;width:100%;height:58px;border-radius:10px;background:var(--f);padding:8px}
.style-choix .apercu i{width:18px;height:26px;border-radius:4px;background:var(--a);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.style-choix .apercu i:nth-child(2){height:34px}
.style-choix small{font-size:11px;color:var(--doux)}
.style-choix.choisi{border-color:var(--or);box-shadow:0 0 14px rgba(230,195,106,.35)}
.bienvenue .ico-tuto{font-size:44px;line-height:1.1}
/* niveau de collectionneur */
.niveau-collection{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px}
.badge-niveau{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;font-family:var(--gras);font-weight:900;font-size:21px;line-height:1;color:#2a1a00;
  background:radial-gradient(circle at 35% 30%,#fff6c8,#f4c430 55%,#c48a12);box-shadow:0 0 0 3px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.3)}
.badge-niveau small{display:block;font-size:10px;font-weight:800;margin-bottom:-6px}
.niveau-collection #prendre-niveau{flex-basis:100%}
.niveau-collection.pret{border-color:var(--or);box-shadow:0 0 22px rgba(230,195,106,.35)}
.niveau-collection.pret .badge-niveau{animation:pulse-niveau 1.6s ease-in-out infinite}
@keyframes pulse-niveau{50%{transform:scale(1.08)}}
.banniere-weekend{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;text-decoration:none;color:#fff;
  background:linear-gradient(120deg,#ff6fae,#ffcf6e,#7dffb0,#6ecbff,#b98cff);background-size:300% 100%;animation:irise 8s linear infinite;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.banniere-weekend .embleme{font-size:30px}
@keyframes irise{to{background-position:300% 0}}
/* course de la semaine */
.podium-course{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.podium-course li{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid var(--ligne)}
.podium-course .rang{font-size:20px;text-align:center}
.podium-course small{color:var(--doux)}
.podium-course .pts{font-family:var(--gras);font-weight:900;color:var(--or-clair)}
.podium-course li.podium{border-color:var(--or)}
.podium-course li.moi{box-shadow:inset 0 0 0 2px var(--rare)}
/* Mythiques animées : l'image respire (lent zoom et glissement, comme une photo vivante), un rai de lumière
   passe de temps en temps, et de petites lueurs montent. Désactivé avec « Animations réduites » (règle body.calme). */
.carte[data-r="mythique"]:not(.mini) .art{animation:portrait-vivant 14s ease-in-out infinite alternate;will-change:transform}
@keyframes portrait-vivant{0%{transform:scale(1.04) translate(0,0)}35%{transform:scale(1.1) translate(-1.5%,-1%)}70%{transform:scale(1.07) translate(1.5%,-2%)}100%{transform:scale(1.12) translate(0,-1%)}}
.carte[data-r="mythique"]:not(.mini) .fenetre::after{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 48%,rgba(255,240,200,.12) 52%,transparent 60%);
  transform:translateX(-120%);animation:rai-lumiere 7s ease-in-out infinite}
@keyframes rai-lumiere{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
.carte[data-r="mythique"]:not(.mini) .fenetre::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8;
  background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1.2px,transparent 1.6px),radial-gradient(circle,rgba(255,220,250,.8) 0 1px,transparent 1.4px);
  background-size:37% 41%,29% 33%;background-position:10% 100%,70% 100%;animation:lueurs-montent 9s linear infinite}
@keyframes lueurs-montent{from{background-position:10% 120%,70% 140%}to{background-position:22% -40%,58% -60%}}
@media (prefers-reduced-motion:reduce){.carte[data-r="mythique"] .art,.carte[data-r="mythique"] .fenetre::before,.carte[data-r="mythique"] .fenetre::after{animation:none!important}}
body.calme .carte .fenetre::before,body.calme .carte .fenetre::after{animation:none!important;display:none}
.fiche.au-dessus{z-index:90}
/* Devine l'œuvre en direct */
.direct-entree{text-decoration:none}
.ico-direct{display:grid;place-items:center;width:96px;height:96px;flex:none;font-size:52px}
.ligne-salon{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid var(--ligne)}
.code-salon{font-size:13px;color:var(--doux)}
.code-salon b{font-size:18px;letter-spacing:.15em;color:var(--or)}
.image-direct{display:block;border-radius:18px;overflow:hidden;background:#05061a;margin:0 auto;height:min(44vh,520px);aspect-ratio:2/3;max-width:100%}
.salon-direct .ico-tuto{font-size:40px}
.salon-direct{gap:10px}
.image-direct img{width:100%;height:100%;object-fit:cover;transition:filter 1s linear}
.choix-direct{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:520px;margin:0 auto;width:100%}
.choix-direct .bouton{min-height:54px;white-space:normal;line-height:1.15}
.choix-direct .choisi{outline:3px solid var(--or)}
.choix-direct .juste{background:var(--ok)!important;color:#06210f!important;opacity:1!important}
.choix-direct .faux{background:var(--alerte)!important;color:#2a0606!important;opacity:1!important}
.chrono{font-family:var(--gras);font-weight:900;font-size:18px}
.verdict{text-align:center;padding:10px;border-radius:12px;font-weight:800}
.verdict.juste{background:rgba(95,211,154,.2);border:1px solid var(--ok)}
.verdict.faux{background:rgba(255,138,122,.18);border:1px solid var(--alerte)}
.joueurs-salon{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.joueurs-salon li{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid var(--ligne)}
.joueurs-salon li.moi{box-shadow:inset 0 0 0 2px var(--rare)}
.joueurs-salon li.absent{opacity:.5}
.joueurs-salon small{color:var(--doux)}
.joueurs-salon .pts{font-family:var(--gras);font-weight:900;color:var(--or-clair)}
@media (min-width:900px){.salon-direct{max-width:760px;margin:0 auto;width:100%}}