/* Direction artistique B « Holo », validée par François le 08/11/2026 (maquettes/planche-da.html). */
/* ---------- Jetons ---------- */
:root{
  --bg:#0b0a1c; --panel:rgba(255,255,255,.055); --panel2:#17142f; --line:#2a2552; --line2:#4b4488;
  --fg:#f4f1ff; --mut:#9d96c8; --acc:#ffd23f; --acc-fg:#140f00; --flame:#ff7a3d; --inkc:#59c3ff; --track:#262150; --chip:rgba(255,255,255,.08);
  --bad:#ff5c7a; --cyan:#7cf5ff; --ok:#34e38b; --gold:#ffc83a;
  /* Matière du cadre selon la rareté (planche 2) : mat, argent, or, holo, holo et éclat. La couleur, elle, dit la famille. */
  --m0:#3a3462; --m1:linear-gradient(150deg,#c9cfe4,#6f7695 45%,#b7bdd6); --m2:linear-gradient(150deg,#fff1b8,#c8962a 40%,#ffe28a 70%,#a87516);
  --m3:conic-gradient(from 210deg,#ff6bd5,#ffd23f,#5cffb0,#4cc3ff,#a77bff,#ff6bd5); --m4:var(--m3);
  --sceau:radial-gradient(circle at 35% 30%,#fff6cf,#ffd23f 45%,#b8860b);
  /* Six familles (refonte du 09/11/2026) */
  --f-matiere:#ff9a3c; --f-nature:#3ed68a; --f-inventions:#3cc8f0; --f-culture:#a77bff; --f-cites:#f45bb5; --f-histoire:#ff5d6c;
  --font:"Bricolage Grotesque",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  --lift:0 18px 40px rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(circle at 10% 0%,rgba(98,62,214,.38) 0,transparent 42%),radial-gradient(circle at 95% 65%,rgba(19,148,170,.24) 0,transparent 40%),
  radial-gradient(circle at 40% 105%,rgba(214,62,160,.2) 0,transparent 45%),var(--bg);background-attachment:fixed;color:var(--fg);font-family:var(--font);
  display:grid;height:100dvh;overflow:hidden;grid-template-columns:auto 1fr auto;grid-template-rows:66px minmax(0,1fr);grid-template-areas:"brand tabs player" "main main main";
  -webkit-tap-highlight-color:transparent}
body::before{content:"";grid-area:1/1/2/-1;background:rgba(11,10,28,.7);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
[hidden]{display:none!important}
.mono{font-family:var(--mono)}
.muted{color:var(--mut)}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sub{margin:0;font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* ---------- Boutons, champs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 14px/1 var(--font);color:var(--acc-fg);background:var(--acc);border:0;border-radius:999px;
  padding:12px 20px;cursor:pointer;text-decoration:none;box-shadow:0 0 22px -6px rgba(255,210,63,.6);transition:transform .12s,opacity .12s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fg)}
.btn.small{padding:8px 13px;font-size:13px}
.btn.danger{color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad)}
.btn.gold{background:linear-gradient(135deg,#ffe58a,#ffb020);color:#2b1d05}
input[type=search],select{width:100%;font:500 15px var(--font);padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg)}
input[type=search]::placeholder{color:var(--mut)}
select option{background:var(--panel2)}

/* ---------- En-tête ---------- */
.brand{grid-area:brand;display:flex;align-items:center;gap:10px;padding-left:22px;z-index:1;min-width:0}
.crest{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:#171338;color:var(--acc);font:800 16px/1 var(--font);
  box-shadow:0 0 0 2px var(--acc),0 0 16px rgba(255,210,63,.45)}
h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
h1 em{font-style:normal;color:var(--acc)}
.tabs{grid-area:tabs;z-index:1;justify-self:start;align-self:center;margin-left:22px;display:flex;gap:4px}
.tabs button{position:relative;font:600 14px/1 var(--font);color:var(--mut);background:transparent;border:0;border-radius:999px;padding:9px 15px;cursor:pointer;display:flex;align-items:center;gap:7px}
.tabs button .ic{width:17px;height:17px}
.tabs button[aria-selected=true]{background:var(--chip);color:var(--fg)}
.tab-n{font:700 11px/1 var(--mono);padding:3px 6px;border-radius:999px;background:var(--track);color:var(--mut)}
.pip{position:absolute;top:4px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--flame);box-shadow:0 0 8px var(--flame)}
.player{grid-area:player;z-index:1;display:flex;align-items:center;gap:10px;padding-right:18px}
.prog{width:250px;min-width:0}
.prog .pl{display:flex;justify-content:space-between;gap:8px;font:600 13px/1.1 var(--font)}
.prog .pl b{white-space:nowrap}
.prog .pl span{color:var(--mut);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar{height:7px;border-radius:4px;background:var(--track);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--acc);border-radius:4px;box-shadow:0 0 10px rgba(255,210,63,.6);transition:width .5s}
.pill{display:flex;align-items:center;gap:6px;height:36px;font:700 15px var(--font);padding:0 14px;border-radius:999px;background:var(--chip);color:var(--fg);flex:none;white-space:nowrap}
.pill .ic{width:17px;height:17px}
.pill .u,.pill small{font:400 12px var(--font);color:var(--mut)}
.pill.ink .ic{color:var(--inkc)}
.help{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--mut);font:700 15px/1 var(--font);cursor:pointer}
.help:hover{color:var(--fg);border-color:var(--fg)}

main{grid-area:main;min-height:0;position:relative}
.view{height:100%;min-height:0}

/* ---------- Établi ---------- */
/* Planche 2, V1 « creuset en haut » : bande du creuset (avec les dernières découvertes), puis la main en pleine largeur. */
#v-bench{display:flex;flex-direction:column}
.b-top{flex:none;display:flex;align-items:center;gap:36px;padding:14px 28px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(98,62,214,.16),transparent)}
.b-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.b-recent{display:flex;flex-direction:column;gap:10px}
#recent{display:flex;flex-wrap:wrap;gap:6px}
.b-hand{flex:1;display:flex;flex-direction:column;min-height:0}
.hand-head{display:grid;grid-template-columns:minmax(0,1fr) 260px auto;gap:14px;align-items:center;padding:14px 28px 10px}
.hand-head span{font-size:12px;color:var(--mut);white-space:nowrap}
.hand{flex:1;overflow-y:auto;padding:6px 28px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));grid-auto-rows:max-content;gap:14px;align-content:start}
.hand .empty{grid-column:1/-1}
.credit{padding:8px 28px 10px;font:400 10px var(--mono);color:var(--mut);border-top:1px solid var(--line)}
.credit a{color:inherit}

/* Creuset */
.cru{position:relative;width:330px;height:216px;display:flex;align-items:center;justify-content:center;gap:22px;flex:none}
.cru .orb{position:absolute;left:50%;top:50%;width:230px;height:230px;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(124,245,255,.2) 0,rgba(98,62,214,.2) 45%,transparent 70%)}
.cru .ring{position:absolute;left:50%;top:50%;width:226px;height:226px;translate:-50% -50%;fill:none;stroke:rgba(124,245,255,.42);stroke-width:1.2;pointer-events:none;
  animation:spin 80s linear infinite;transition:stroke .3s,opacity .3s;opacity:0}
/* L'anneau n'apparaît que pendant la fusion (planche 2 : creuset épuré au repos). */
.cru.fusing .ring{animation-duration:2.5s;stroke:var(--acc);opacity:1}
.cru.fusing .orb{animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{to{scale:1.12;opacity:.7}}
@keyframes spin{to{rotate:360deg}}
.cru .plus{position:relative;z-index:1;font:300 36px/1 var(--font);color:var(--acc);text-shadow:0 0 14px rgba(255,210,63,.6)}
.slot{position:relative;z-index:1;width:132px;flex:none}
.slot.empty{aspect-ratio:63/88;border-radius:16px;border:2px dashed var(--line2);display:grid;place-items:center;text-align:center;padding:12px;color:var(--mut);
  font:500 14px/1.3 var(--font);background:rgba(255,255,255,.03)}
.cru.fusing .slot.full{animation:shake .3s ease-in-out infinite}
@keyframes shake{0%,100%{rotate:0deg}25%{rotate:-2.5deg}75%{rotate:2.5deg}}
/* Fusion faite : les deux cartes du creuset redescendent vers la main. */
.slot .card.rentre{animation:rentre .26s cubic-bezier(.5,0,.9,.5) forwards}
@keyframes rentre{to{translate:0 70px;scale:.55;opacity:0}}
@media (prefers-reduced-motion:reduce){.slot .card.rentre{animation-duration:.01s}}
.pop{position:absolute;left:50%;top:50%;z-index:4;width:150px;translate:-50% -50%;pointer-events:none;opacity:0}
.pop.show{animation:popres 1.7s ease forwards}
.cru.popping .slot.empty>span{opacity:0}
.slot.empty>span{transition:opacity .2s}
@keyframes popres{0%{opacity:0;transform:scale(.4)}16%{opacity:1;transform:scale(1.1)}28%{transform:scale(1)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-34px) scale(.9)}}
.hint{margin:0;font-size:14px;color:var(--mut);min-height:20px}
.hint b{color:var(--fg)}
.hint .sep{margin:0 6px;opacity:.5}
.hint .seal-pt{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--sceau);color:#3a2600;font:800 9px/1 var(--font);vertical-align:-2px}
.hint .piste-pt{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px 2px rgba(124,245,255,.7);vertical-align:1px}

/* Carte de la main (planche 2, petite carte) : cadre à la matière de la rareté, photo pleine, icône et liseré de la famille. */
.card{--fc:var(--f-culture);--m:var(--m0);position:relative;display:block;width:100%;border:0;padding:2px;border-radius:12px;background:var(--m);cursor:pointer;
  color:var(--fg);font:inherit;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:transform .15s,opacity .2s,box-shadow .2s}
.card.r1{--m:var(--m1)} .card.r2{--m:var(--m2)} .card.r3{--m:var(--m3)} .card.r4{--m:var(--m4)}
.card.r4{box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 18px -1px rgba(255,210,63,.7),0 0 36px -8px rgba(167,123,255,.9)}
.card.gold{box-shadow:0 0 0 2px #ffd86b,0 0 20px -3px var(--gold)}
.card:hover{transform:translateY(-2px)}
/* Hauteur par padding-top et pas aspect-ratio : avec aspect-ratio, la grille de la main mobile calculait des rangées trop basses (08/11). */
.card .in{position:relative;display:block;height:0;padding-top:139.7%;border-radius:10px;overflow:hidden;background:#000;container-type:inline-size}
.card .ph{position:absolute;inset:0;display:block}
.card .ph img,.tcg-art img,.mc img{width:100%;height:100%;object-fit:cover;display:block}
/* Nom posé sur la photo : dégradé sombre franc sous le texte, lisible même sur une image claire. */
.card .in::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent 40%,rgba(6,5,16,.72) 64%,rgba(6,5,16,.96) 86%)}
.card .in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:var(--fc)}
.card .ico{position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--fc) 35%,rgba(8,7,20,.75));border:1px solid var(--fc)}
.card .ico .ic{width:12px;height:12px;stroke:#fff}
.card .t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 8px 9px;font:700 13px/1.12 var(--font);letter-spacing:-.01em;color:#fff;
  text-shadow:0 1px 3px #000;overflow-wrap:anywhere}
.card .t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .seal{position:absolute;z-index:4;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--sceau);color:#3a2600;
  font:800 11px/1 var(--font);box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 0 2px #0b0a1c}
/* Point lumineux : fusion jamais tentée avec la carte choisie. L'étoile est réservée au sceau de l'Originale. */
.card .piste{position:absolute;z-index:3;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 1.5px rgba(8,7,20,.7),0 0 10px 2px rgba(124,245,255,.75);animation:piste 1.4s ease-in-out infinite alternate}
@keyframes piste{to{box-shadow:0 0 0 1.5px rgba(8,7,20,.7),0 0 16px 5px rgba(124,245,255,.95)}}
.card.tried .ph{opacity:.35}
.card.tried .t{color:var(--mut)}
.card .res{position:absolute;z-index:3;left:6px;right:6px;top:38%;padding:3px 5px;border-radius:6px;background:rgba(11,10,28,.88);font:600 10.5px/1.2 var(--font);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.card.sel{box-shadow:0 0 0 2.5px var(--acc),0 0 26px 2px rgba(255,210,63,.5);transform:translateY(-2px)}
.card.fresh::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--acc),0 0 0 2px var(--acc);animation:fresh 1.2s ease-out 3}
@keyframes fresh{from{opacity:1}to{opacity:0}}
.card.born{animation:born .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes born{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.card.ghost{position:fixed;z-index:1000;width:96px;pointer-events:none;transform:rotate(-4deg) scale(1.05);box-shadow:0 0 0 2px var(--acc),var(--lift)}
.slot .card,.pop .card{padding:3px;border-radius:16px;box-shadow:0 0 30px -4px var(--fc)}
.slot .card .in,.pop .card .in{border-radius:13px}
.slot .card .t,.pop .card .t{font-size:15px;padding:0 10px 12px}
.slot .card .in::before,.pop .card .in::before{background:linear-gradient(to bottom,transparent 28%,rgba(6,5,16,.78) 52%,rgba(6,5,16,.96) 78%)}
.slot .card .rl{display:block;font:700 9.5px/1.25 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fc);margin-bottom:3px;text-shadow:0 1px 3px #000}
.slot .info{position:absolute;z-index:4;top:7px;right:7px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(11,10,28,.78);color:var(--fg);font:700 13px/1 var(--font);cursor:pointer;display:grid;place-items:center}
.pop .card{box-shadow:0 0 50px 4px var(--fc)}

/* Image de secours (graphique, carte, image noire ou absente) : fond et grande icône de la famille ; les éléments gardent leur symbole. */
.fb{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--fc) 62%,#0b0a1c) 0,color-mix(in srgb,var(--fc) 18%,#0b0a1c) 60%,#0b0a1c 100%)}
.fb svg{width:48%;height:48%;margin-bottom:22%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px var(--fc)) drop-shadow(0 0 2px #fff)}
.mc .fb svg{width:60%;height:60%;margin:0;filter:none}

/* Pastille (récentes, recette) */
.mc{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 3px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--fg);
  font:600 13px var(--font);cursor:pointer;max-width:100%}
.mc .mi{position:relative;width:24px;height:24px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px var(--fc)}
.mc span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Carte à collectionner ---------- */
/* Planche 2, variante A « Photo pleine », validée le 09/11/2026 : la photo occupe la carte, le texte se pose dessus.
   Couleur = famille (pastille, liseré), matière du cadre = rareté, sceau doré = Originale. Tailles en cqw : même lecture à toutes les tailles. */
.tcg{--fc:var(--f-culture);--m:var(--m0);position:relative;container-type:inline-size;aspect-ratio:63/88;border-radius:6.4cqw;cursor:pointer;
  box-shadow:0 18px 30px -16px #000;transition:transform .25s ease,box-shadow .25s ease;user-select:none;-webkit-user-select:none;will-change:transform}
.tcg.r1{--m:var(--m1)} .tcg.r2{--m:var(--m2)} .tcg.r3{--m:var(--m3)} .tcg.r4{--m:var(--m4)}
.tcg.r4{box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 26px -2px rgba(255,210,63,.55),0 0 50px -10px rgba(167,123,255,.7),0 18px 30px -16px #000}
.tcg.gold{box-shadow:0 0 0 2px #ffd86b,0 0 30px -4px var(--gold),0 18px 30px -16px #000}
.tcg-frame{position:absolute;inset:0;padding:max(2px,1.2cqw);border-radius:inherit;background:var(--m)}
.tcg-in{position:relative;height:100%;border-radius:5.2cqw;overflow:hidden;background:#000}
.tcg-art{position:absolute;inset:0;background:#120f2b}
.tcg-in::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,5,16,.5) 0,transparent 20%,transparent 40%,rgba(6,5,16,.88) 66%,#070614 100%)}
.tcg-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:max(3px,1.6cqw);z-index:3;background:var(--fc)}
.tcg-head{position:absolute;top:3.2cqw;left:3.2cqw;right:3.6cqw;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:2cqw}
.tcg-fam{display:inline-flex;align-items:center;gap:2cqw;padding:1.3cqw 3.2cqw 1.3cqw 2.4cqw;border-radius:999px;font:700 4.4cqw/1 var(--font);color:#fff;
  background:color-mix(in srgb,var(--fc) 30%,rgba(8,7,20,.72));border:max(1px,.4cqw) solid color-mix(in srgb,var(--fc) 75%,transparent);backdrop-filter:blur(4px)}
.tcg-fam .ic{width:4.8cqw;height:4.8cqw;stroke:var(--fc);stroke-width:2.4}
.tcg-gems{display:flex;gap:1.2cqw;filter:drop-shadow(0 1px 2px #000)}
.tcg-gems i{display:block;width:2.6cqw;height:2.6cqw;transform:rotate(45deg);border:max(1px,.45cqw) solid #fff}
.tcg-gems i.on{background:#fff}
.tcg-bot{position:absolute;left:4.4cqw;right:4.4cqw;bottom:5.2cqw;z-index:3}
.tcg-title{margin:0;font:800 8.4cqw/1.02 var(--font);letter-spacing:-.03em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcg-desc{margin:1.6cqw 0 0;font:500 4.8cqw/1.3 var(--font);color:#d6d0f3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcg-stats{margin-top:3.6cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.tcg-stats .st{display:flex;align-items:center;justify-content:center;gap:1.6cqw;padding:2cqw 0;border-radius:3.2cqw;background:rgba(255,255,255,.1);color:#fff;
  font:700 5.2cqw/1 var(--font);transition:background .2s,color .2s}
.tcg-stats .ic{width:4.4cqw;height:4.4cqw;opacity:.7}
.tcg[data-hl=n] .st[data-k=n],.tcg[data-hl=s] .st[data-k=s],.tcg[data-hl=r] .st[data-k=r]{background:var(--fc);color:#0b0a1c}
.tcg[data-hl] .st .ic{opacity:1}
.tcg .fb svg{margin-bottom:46%}
/* Légendaire et dorée : un éclat traverse la carte, toutes les 6 s (coupé sous prefers-reduced-motion, voir plus bas). */
.tcg.r4 .tcg-frame::before,.tcg.gold .tcg-frame::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 47%,transparent 60%) no-repeat;background-size:250% 100%;mix-blend-mode:overlay;
  animation:eclat 6s ease-in-out infinite}
@keyframes eclat{0%,70%{background-position:160% 0}100%{background-position:-60% 0}}
.tcg-seal{position:absolute;z-index:8;top:-3.6cqw;left:-3.6cqw;width:max(18px,12.8cqw);height:max(18px,12.8cqw);border-radius:50%;display:grid;place-items:center;
  background:var(--sceau);color:#3a2600;font:800 max(10px,6.4cqw)/1 var(--font);box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 0 2px #0b0a1c}
/* Le sceau occupe le coin haut gauche : la pastille de famille se décale pour rester lisible (planche 2, A). */
.tcg.orig .tcg-head{left:11cqw}
.tcg.mini.orig .tcg-head{left:13cqw}
/* Duel : « ×2 » (sa famille bat celle d'en face) et « +8 » (bonus de famille), posés sur le coin haut droit. */
.tcg-badges{position:absolute;z-index:9;top:-9px;right:-9px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none}
.tcg-badge{padding:5px 8px;border-radius:999px;font:800 13px/1 var(--font);box-shadow:0 2px 8px rgba(0,0,0,.55),0 0 0 2px #0b0a1c}
.tcg-badge.x2{background:var(--acc);color:#2a1d00;font-size:15px;padding:6px 9px;animation:x2 .5s cubic-bezier(.2,1.6,.4,1)}
.tcg-badge.bonus{background:var(--fc);color:#0b0a1c}
@keyframes x2{from{transform:scale(0)}to{transform:scale(1)}}
.tcg-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;z-index:6;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.45),transparent 50%);mix-blend-mode:soft-light}
.tcg.tilt:hover .tcg-glare{opacity:1}
.tcg.in-deck::after{content:"Paquet";position:absolute;top:-9px;left:50%;translate:-50% 0;z-index:7;padding:3px 8px;border-radius:999px;background:var(--acc);color:var(--acc-fg);
  font:700 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
/* Petite carte (main du duel, grilles) : icône de famille seule, sans description. */
.tcg.mini .tcg-fam b,.tcg.mini .tcg-desc{display:none}
.tcg.mini .tcg-fam{padding:1.8cqw}
.tcg.mini .tcg-fam .ic{width:8cqw;height:8cqw}
.tcg.mini .tcg-gems{gap:1.6cqw}
.tcg.mini .tcg-gems i{width:3.6cqw;height:3.6cqw}
.tcg.mini .tcg-bot{bottom:6cqw;left:5cqw;right:5cqw}
.tcg.mini .tcg-title{font-size:10.5cqw}
.tcg.mini .tcg-stats{margin-top:3cqw;gap:2cqw}
.tcg.mini .tcg-stats .st{flex-direction:column;gap:1cqw;padding:2.4cqw 0;font-size:8.4cqw}
.tcg.mini .tcg-stats .ic{width:7cqw;height:7cqw}
.tcg.mini .tcg-seal{top:-5cqw;left:-5cqw;width:max(18px,17cqw);height:max(18px,17cqw);font-size:max(10px,9cqw)}

/* Dos de carte */
/* Dos de carte. La marge est sur l'intérieur : posée sur .tcg-back, cqw se mesurerait sur l'écran, pas sur la carte. */
.tcg-back{position:relative;display:grid;container-type:inline-size;aspect-ratio:63/88;border-radius:14px;
  background:linear-gradient(150deg,#7b5cff,#2a1a7a 50%,#c76bff);box-shadow:0 0 0 1.5px rgba(199,107,255,.6),0 0 30px -8px #7c5cff}
.tcg-back-in{min-height:0;margin:9cqw;border-radius:2.8cqw;display:grid;place-items:center;align-content:center;gap:5cqw;
  background:radial-gradient(circle at 50% 45%,#2a1f6e 0 25cqw,transparent 25.5cqw),repeating-linear-gradient(45deg,rgba(124,245,255,.09) 0 .6cqw,transparent .6cqw 6cqw),
    repeating-linear-gradient(-45deg,rgba(255,210,63,.08) 0 .6cqw,transparent .6cqw 6cqw),#120e33}
.tcg-back-in b{width:44cqw;height:44cqw;display:grid;place-items:center;border-radius:50%;font:800 21cqw/1 var(--font);color:var(--acc);
  border:.8cqw solid rgba(255,210,63,.8);box-shadow:0 0 6cqw rgba(255,210,63,.35),inset 0 0 4cqw rgba(255,210,63,.2)}
.tcg-back-in span{font:700 3.4cqw/1 var(--mono);letter-spacing:.2em;color:rgba(124,245,255,.85);text-transform:uppercase}

/* Retournement */
.flip{perspective:1400px}
.flip-in{position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.flip .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .face.front{position:absolute;inset:0;transform:rotateY(180deg)}
.flip .face.front>.tcg{width:100%;height:100%}
.flip.open .flip-in{transform:rotateY(180deg)}

/* ---------- Révélation à suspense ---------- */
/* Halo à la couleur de la famille (--fc, posé par game.js), plus fort à chaque palier de rareté (classes r0 à r4). */
#reveal{--fc:var(--f-culture);--p:14%;--g:.4;position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--fc) var(--p),#14113a) 0,#07061a 70%);color:var(--fg);overflow:hidden;transition:background .25s}
#reveal.r1{--p:20%;--g:.55} #reveal.r2{--p:26%;--g:.7} #reveal.r3{--p:33%;--g:.85} #reveal.r4{--p:42%;--g:1}
#reveal .burst{position:absolute;left:50%;top:40%;width:160vmax;height:160vmax;translate:-50% -50%;pointer-events:none;opacity:0;transition:opacity .5s .3s;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--fc) 34%,transparent) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 42%);mask:radial-gradient(circle,#000 0,transparent 42%);animation:spin 40s linear infinite}
#reveal.shown .burst{opacity:var(--g)}
.reveal-card{position:relative;width:min(280px,62vw);animation:rise .5s cubic-bezier(.2,1.2,.4,1)}
.reveal-card .flip{filter:drop-shadow(0 0 calc(10px + 26px * var(--g)) color-mix(in srgb,var(--fc) calc(40% + 60% * var(--g)),transparent));transition:filter .25s}
#reveal.charging .reveal-card .flip{animation:charge .14s ease-in-out infinite alternate}
@keyframes charge{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg) scale(1.02)}}
@keyframes rise{from{transform:translateY(40px) scale(.85);opacity:0}}
.reveal-kicker{position:relative;margin:0;font:700 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fc);text-shadow:0 0 12px var(--fc)}
.reveal-rar{position:relative;margin:0;text-align:center;font:800 32px/1 var(--font);letter-spacing:-.03em;color:#fff;text-shadow:0 0 18px var(--fc);opacity:0;transform:translateY(8px);transition:.4s .5s}
.reveal-sub{position:relative;margin:0;font:400 13px var(--mono);color:var(--mut);opacity:0;transition:.4s .7s;text-align:center}
.reveal-gains{position:relative;list-style:none;padding:0;margin:2px 0 0;display:grid;gap:6px;width:min(320px,90vw);opacity:0;transition:.4s .9s}
.reveal-gains:empty{display:none}
.reveal-gains li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:13px}
.reveal-gains li b{font:700 13px var(--mono);color:var(--acc);white-space:nowrap}
.reveal-gains li.hot{border-color:var(--acc)}
#reveal.shown .reveal-rar,#reveal.shown .reveal-sub,#reveal.shown .reveal-gains{opacity:1;transform:none}
#reveal .btn{position:relative;margin-top:6px}

/* ---------- Album ---------- */
#v-album,#v-duel{overflow-y:auto}
.album-wrap,.duel-wrap{max-width:1240px;margin:0 auto;padding:24px 20px 40px}
.album-bar{display:flex;flex-wrap:wrap;align-items:end;gap:12px 16px;margin-bottom:14px}
.album-bar h2,.sec-head h2{margin:0;font-size:32px;font-weight:800;letter-spacing:-.04em}
.album-bar .sum{font:400 12px var(--mono);color:var(--mut);padding-bottom:7px}
.album-bar .grow{flex:1}
.album-bar input{width:220px}
.album-bar select{width:auto;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.chip{--m:var(--mut);display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);
  font:700 13px/1 var(--font);cursor:pointer;white-space:nowrap;flex:none}
.chip small{font-weight:500}
.chip.fam i{width:9px;height:9px;border-radius:50%;transform:none;background:var(--fc);box-shadow:0 0 8px var(--fc)}
.chip.fam[aria-pressed=true]{background:color-mix(in srgb,var(--fc) 22%,var(--panel));color:var(--fg);border-color:var(--fc)}
.chips.fams{margin:0}
#album-filters{margin-bottom:24px}
.chip i{width:9px;height:9px;transform:rotate(45deg);background:var(--m)}
.chip small{color:var(--mut)}
.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip[aria-pressed=true] small{color:inherit;opacity:.7}
.chip.r0{--m:var(--m0)} .chip.r1{--m:var(--m1)} .chip.r2{--m:var(--m2)} .chip.r3{--m:var(--m3)} .chip.r4{--m:var(--m4)}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:28px 22px}
.album-grid .tcg:hover{z-index:2}
.empty{padding:40px 0;text-align:center;color:var(--mut)}
.album-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:40px;padding-top:16px;border-top:1px solid var(--line);
  font:400 11px var(--mono);color:var(--mut)}
.album-foot a{color:inherit}

.dtitle{margin:0;font:800 34px/1.05 var(--font);letter-spacing:-.04em}
/* ---------- Fenêtre ---------- */
.modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(5,4,16,.7);backdrop-filter:blur(4px)}
.modal-box{position:relative;width:min(860px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:#141130;border:1px solid var(--line2);border-radius:18px;box-shadow:var(--lift);
  padding:26px;animation:pop .25s ease-out}
.modal.narrow .modal-box{width:min(440px,100%);text-align:center}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.modal-close{position:absolute;top:12px;right:12px;z-index:2}
.detail{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}
.detail-card .tcg{width:100%}
.d-rar{margin:0 0 6px;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fc)}
.detail h2{margin:0;font-size:34px;font-weight:800;line-height:1.02;letter-spacing:-.04em;padding-right:70px}
.d-desc{margin:6px 0 0;font:400 13px var(--mono);color:var(--mut)}
.d-from{margin:14px 0 0;font-size:15px;color:var(--mut)}
.d-cote{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:15px;color:var(--mut)}
.d-cote .ic{width:16px;height:16px;stroke:var(--inkc)}
.d-cote b{color:var(--inkc)}
.d-ex{margin:12px 0 0;font-size:16px;line-height:1.55;color:#ddd8f5}
.d-stats{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.d-stats li{display:grid;grid-template-columns:20px 34px 1fr;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.d-stats b{font:700 18px var(--mono)}
.d-stats span{font-weight:700}
.d-stats small{grid-column:3;font:400 12px var(--mono);color:var(--mut);margin-top:-4px}
.d-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.modal.narrow .d-actions{justify-content:center}
.result h2{margin:4px 0 0;font-size:46px;font-weight:800;letter-spacing:-.04em}
.result.win h2{color:var(--gold);text-shadow:0 0 24px rgba(255,200,58,.5)}
.result.lose h2{color:var(--bad)}
.res-kicker{margin:0;font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.res-score{margin:6px 0 0;font:700 22px var(--mono)}
.res-rewards{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.res-rewards li{padding:6px 11px;border-radius:999px;background:var(--chip);color:var(--acc);font:700 12px var(--mono)}
.res-note{margin:14px 0 0;color:var(--mut)}

/* ---------- Trophées ---------- */
.trophies h2,.intro h2{margin:0;font-size:32px;font-weight:800;letter-spacing:-.04em}
.tr-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.tr-list li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.tr-medal{font-size:22px;color:var(--line2);text-align:center}
.tr-list li.done{border-color:color-mix(in srgb,var(--gold) 60%,var(--line))}
.tr-list li.done .tr-medal{color:var(--gold);text-shadow:0 0 10px var(--gold)}
.tr-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tr-txt b{font-size:15px}
.tr-txt span{font-size:13px;color:var(--mut)}
.tr-bar{display:block;height:4px;border-radius:2px;background:var(--track);overflow:hidden;margin-top:4px}
.tr-bar i{display:block;height:100%;background:var(--acc)}
.tr-list small{font:700 11px var(--mono);color:var(--mut);white-space:nowrap}
.tr-list li.done small{color:var(--gold)}

/* ---------- Accueil ---------- */
.intro-fan{position:relative;height:150px;display:flex;justify-content:center;margin:4px 0 14px}
.intro-fan .tcg-back{position:absolute;width:96px;transform-origin:50% 120%}
.intro-fan .tcg-back:nth-child(1){rotate:-14deg;translate:-38px 8px}
.intro-fan .tcg-back:nth-child(3){rotate:14deg;translate:38px 8px}
.intro-steps{text-align:left;margin:16px 0 4px;padding-left:22px;display:grid;gap:10px;font-size:16px;line-height:1.45;color:#ddd8f5}
.intro-steps b{font-weight:800;color:var(--fg)}

/* ---------- Cercle des familles (planche 3) ---------- */
.cercle-wrap{display:grid;gap:14px;margin:14px 0 4px;justify-items:center}
svg.cercle{width:100%;max-width:380px;height:auto;overflow:visible}
.cercle .fl{stroke:var(--acc);stroke-width:2.5}
.cercle .flh{fill:var(--acc)}
.cercle .vb{fill:var(--acc);font:700 15px var(--mono)}
.cercle .nd circle{fill:color-mix(in srgb,var(--fc) 22%,#120f2b);stroke:var(--fc);stroke-width:2.5}
.cercle .nd use{fill:none;stroke:var(--fc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cercle .nd text{fill:#fff;font:800 18px var(--font)}
.cercle.petit .fl{stroke-width:5}
.cercle.petit .nd circle{stroke-width:5}
.cercle.petit .nd use{stroke-width:2.6}
.cercle-regles{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%}
.cercle-regles li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:9px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:14px}
.cercle-regles b{display:inline-flex;align-items:center;gap:5px;color:var(--fc);font-weight:800}
.cercle-regles b .ic{width:15px;height:15px;stroke:var(--fc)}
.cercle-regles span{flex-basis:100%;color:var(--mut);font-size:13px}
.cercle-modal h2{margin:0 0 6px}
/* Compte : pseudo à la création, code de récupération. */
.acct{margin-top:18px;text-align:left;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.acct label{display:block;font:700 13px var(--font);margin-bottom:7px;color:var(--fg)}
.acct-row{display:flex;gap:8px}
.acct input{flex:1;min-width:0;font:500 16px var(--font);padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:var(--fg)}
.acct input::placeholder{color:var(--mut)}
.acct input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.acct details summary{cursor:pointer;font:600 13px var(--font);color:var(--mut)}
.acct details[open] summary{margin-bottom:8px}
.acct-err{margin:0;min-height:1em;font:600 13px var(--font);color:var(--bad)}
.acct-err:empty{display:none}
.acct-who{margin:0;font-size:15px}
.code{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.code code{font:600 13px var(--mono);padding:9px 11px;border-radius:9px;background:var(--panel);border:1px solid var(--line);word-break:break-all;user-select:all}
.code .small-note{grid-column:1/-1;margin:0}

/* ---------- Duel : salle d'attente ---------- */
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:12px}
.sec-head .grow{flex:1}
.duel-regle{display:flex;align-items:center;gap:18px;width:100%;margin:0 0 22px;padding:12px 18px 12px 12px;border-radius:18px;text-align:left;cursor:pointer;
  background:linear-gradient(90deg,rgba(98,62,214,.18),transparent 70%),var(--panel);border:1px solid var(--line);color:var(--fg);font:inherit}
.duel-regle:hover{border-color:var(--line2)}
.duel-regle svg.cercle{width:96px;flex:none}
.dr-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.dr-txt b{font-size:17px;font-weight:800}
.dr-txt span{font-size:14px;color:#cfc9ee}
.dr-txt small{font:700 11px var(--mono);letter-spacing:.06em;color:var(--acc)}
.fam-bonus{display:flex;align-items:center;gap:8px;margin:12px 2px 0;padding:10px 14px;border-radius:12px;font-size:14px;color:var(--mut);
  background:rgba(255,255,255,.03);border:1px dashed var(--line2)}
.fam-bonus.on{color:var(--fg);font-weight:700;border:1px solid var(--fc);background:color-mix(in srgb,var(--fc) 14%,var(--panel))}
.fam-bonus .ic{width:18px;height:18px;stroke:var(--fc);flex:none}
.rv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px}
.fpill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;border-radius:999px;font:700 12px/1 var(--font);color:var(--fg);
  background:color-mix(in srgb,var(--fc) 18%,transparent);border:1px solid color-mix(in srgb,var(--fc) 60%,transparent)}
.fpill .ic{width:13px;height:13px;stroke:var(--fc)}
.lobby{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:30px;align-items:start}
.deck-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:16px;border-radius:16px;background:var(--panel);border:1px dashed var(--line2)}
.deck-slot{aspect-ratio:63/88;border-radius:14px;border:1.5px dashed var(--line2);display:grid;place-items:center;color:var(--mut);font:700 11px var(--mono);text-align:center;padding:6px}
.deck-row .tcg{width:100%}
.small-note{margin:10px 2px 0;font:400 12px var(--mono);color:var(--mut)}
.strip-title{margin:24px 0 10px;font-size:17px;font-weight:800}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px}
.strip .tcg{width:100%}
.rivals{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rival{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.rival .rv-crest{width:48px;height:48px}
.rv-crest{display:grid;place-items:center;border-radius:50%;background:#171338;color:var(--acc);font:800 21px/1 var(--font);box-shadow:0 0 0 2px var(--acc),0 0 14px rgba(255,210,63,.35);flex:none}
.rv-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.rv-txt b{font-size:17px}
.rv-txt span{font-size:14px;color:var(--mut)}
.rv-txt small{font:700 11px var(--mono);color:var(--mut);letter-spacing:.06em}
.rv-txt .rv-tier{color:var(--acc);letter-spacing:.12em}
.rival.beaten{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.rival.beaten .rv-txt small{color:var(--gold)}
.rival.locked{opacity:.5}
.rival.locked .rv-crest{background:var(--track);color:var(--mut);box-shadow:none}
.locked-box{max-width:520px;margin:12vh auto;text-align:center;padding:0 16px}
.locked-box h2{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:16px 0 8px}
.locked-box p{color:var(--mut);margin:0 0 20px}
.locked-box .tcg-back{width:150px;margin:0 auto;rotate:-4deg}

/* ---------- Duel : arène ---------- */
.arena{max-width:1100px;margin:0 auto;padding:16px 20px 28px;display:grid;gap:14px}
.ar-top{display:flex;align-items:center;gap:12px}
.ar-top .rv-crest{width:42px;height:42px}
.ar-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ar-who b{font-size:18px}
.ar-who span{font:400 12px var(--mono);color:var(--mut)}
.ar-score{display:flex;align-items:flex-start;gap:10px;font:700 26px/1 var(--mono)}
.ar-dash{color:var(--mut);font-weight:400}
.ar-score small{display:block;font:400 10px var(--mono);color:var(--mut);text-align:center;margin-top:3px;letter-spacing:.06em;text-transform:uppercase}
.ar-prog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ar-prog li{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 4px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
  font:700 12px var(--mono);color:var(--mut);text-align:center}
.ar-prog li.now{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}
.ar-prog li.won{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border-color:var(--ok)}
.ar-prog li.lost{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);border-color:var(--bad)}
.ar-backs{display:flex;justify-content:center;gap:6px;min-height:44px}
.ar-backs .tcg-back{width:32px;border-radius:5px}
.ar-backs .tcg-back-in{border-radius:4px;margin:1.5px}
.ar-backs .tcg-back-in b,.ar-backs .tcg-back-in span{display:none}
.ar-field{display:grid;grid-template-columns:1fr minmax(120px,200px) 1fr;align-items:center;gap:16px}
.ar-field .slot{justify-self:center;width:min(210px,100%);aspect-ratio:63/88;border-radius:14px;border:1.5px dashed var(--line2);display:grid;place-items:center}
.ar-field .slot>.tcg,.ar-field .slot>.flip{width:100%;position:absolute;inset:0}
.slot-label{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font:700 11px var(--mono);color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.ar-field .slot>.tcg{animation:play .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes play{from{transform:translateY(60px) scale(.8);opacity:0}}
.ar-mid{text-align:center;display:grid;gap:10px;justify-items:center}
.ar-stat{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--acc);color:var(--acc-fg);font:700 14px var(--mono)}
.ar-stat .ic{width:18px;height:18px}
.ar-msg{margin:0;font-size:16px;line-height:1.35;color:var(--mut);min-height:44px}
.win-glow{box-shadow:0 0 0 3px var(--ok),0 0 34px -2px var(--ok)!important}
.lose-dim{filter:grayscale(.7) brightness(.7);transform:scale(.96)}
.ar-hand{display:flex;justify-content:center;gap:14px;margin-top:24px}
.ar-hand .tcg{flex:0 1 150px;min-width:0}
.ar-hand .tcg:hover{transform:translateY(-10px)}
.ar-hand.busy .tcg{pointer-events:none;opacity:.6}

/* ---------- Notifications ---------- */
#toasts{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:4000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:calc(100% - 32px)}
#reveal:not([hidden]) ~ #toasts{visibility:hidden}   /* les messages attendent la fin de la révélation (game.js, toast) */
.toast{max-width:560px;padding:11px 16px;border-radius:12px;background:#221d4a;border:1px solid var(--line2);color:var(--fg);font-size:15px;box-shadow:var(--lift);
  opacity:0;transform:translateY(14px);transition:.22s;text-align:center}
.toast.show{opacity:1;transform:none}
.toast.level{background:linear-gradient(135deg,#ffe58a,#ffb020);color:#2b1d05;font-weight:700;border:0}
.toast.ink{color:var(--inkc)}

/* ---------- Réserve de fusions, coffre du jour, boutique, son ---------- */
button.pill{border:0;cursor:pointer;color:inherit}
.pill.energy .ic{color:var(--cyan)}
.pill.energy small{font-variant-numeric:tabular-nums}
.pill.energy small:empty{display:none}
.pill.energy.low,.pill.energy.low .ic{color:var(--bad)}
.pill.energy.low{animation:lowpulse 1.4s ease-in-out infinite}
@keyframes lowpulse{50%{box-shadow:0 0 0 2px rgba(255,92,122,.45)}}
.help.snd .ic{width:16px;height:16px}
.energy-box .en-orb{width:96px;height:96px;margin:4px auto 14px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--cyan);
  background:radial-gradient(circle,rgba(124,245,255,.22),rgba(98,62,214,.18) 60%,transparent 72%);box-shadow:0 0 0 2px rgba(124,245,255,.5),0 0 40px rgba(124,245,255,.25)}
.energy-box .en-orb .ic{width:20px;height:20px;fill:currentColor;stroke:none;opacity:.7}
.energy-box .en-orb b{font:800 34px/1 var(--font)}
.energy-box .en-orb.low{color:var(--bad);box-shadow:0 0 0 2px rgba(255,92,122,.55),0 0 40px rgba(255,92,122,.25)}
.en-next{margin:10px 0 0;font:700 13px var(--mono);color:var(--cyan)}
.gift-chest{width:84px;height:84px;margin:0 auto 10px;display:grid;place-items:center;border-radius:22px;color:var(--acc);
  background:radial-gradient(circle,rgba(255,210,63,.25),transparent 70%);animation:chest 1.6s ease-in-out infinite alternate}
.gift-chest .ic{width:52px;height:52px;filter:drop-shadow(0 0 10px rgba(255,210,63,.7))}
@keyframes chest{to{transform:translateY(-4px) rotate(-3deg)}}
.gift h2{margin:4px 0 14px}
.gift-days{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.gift-days li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0;border-radius:10px;background:var(--chip);color:var(--mut)}
.gift-days small{font:700 10px var(--mono)}
.gift-days b{font:700 12px var(--mono)}
.gift-days li.on{color:var(--fg);background:rgba(255,210,63,.12)}
.gift-days li.now{color:var(--acc-fg);background:var(--acc);box-shadow:0 0 18px rgba(255,210,63,.5)}
.gains{list-style:none;padding:0;margin:0;display:grid;gap:6px;text-align:left}
.gains li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:14px}
.gains li b{font:700 13px var(--mono);color:var(--acc)}
.gains li.hot{border-color:var(--acc)}
.shop-wrap{max-width:980px;margin:0 auto;padding:24px 18px 48px;display:flex;flex-direction:column;gap:12px}
.shop-lead{margin:0;color:var(--mut)}
.inkv{color:var(--inkc);white-space:nowrap}
.inkv .ic{width:15px;height:15px;vertical-align:-2px}
/* Paquets de famille : une tuile par famille, à sa couleur ; la raison d'un bouton fermé est écrite dessous. */
.packs-fam{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:6px 0 4px}
@media (max-width:1000px){.packs-fam{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pack-fam{--fc:var(--f-culture);position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px 14px;border-radius:18px;text-align:center;
  background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--fc) 24%,transparent),transparent 70%),var(--panel);border:1px solid color-mix(in srgb,var(--fc) 45%,var(--line));
  box-shadow:inset 0 3px 0 var(--fc)}
.pf-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--fc) 22%,#120f2b);box-shadow:0 0 0 2px var(--fc),0 0 22px -4px var(--fc)}
.pf-ico .ic{width:26px;height:26px;stroke:var(--fc)}
.pack-fam h3{margin:4px 0 0;font-size:18px;font-weight:800;letter-spacing:-.02em}
.pf-reste{margin:0;font:400 12px var(--mono);color:var(--mut)}
.pack-fam .btn{margin-top:6px;width:100%;justify-content:center;padding-inline:8px;white-space:nowrap}
.pack-fam .btn .ic{width:16px;height:16px}
.pf-why{margin:0;font-size:12.5px;line-height:1.3;color:var(--mut)}
.pack-fam.off{background:var(--panel);border-color:var(--line);box-shadow:none}
.pack-fam.off .pf-ico{background:var(--track);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--fc) 40%,transparent)}
.pack-fam.off .pf-ico .ic{opacity:.6}
.odds{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.odds li{--m:var(--m0);display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:14px}
.odds li.r1{--m:var(--m1)} .odds li.r2{--m:var(--m2)} .odds li.r3{--m:var(--m3)} .odds li.r4{--m:var(--m4)}
.odds li i{width:11px;height:11px;rotate:45deg;background:var(--m);flex:none}
.odds li b{margin-left:auto;font:700 13px var(--mono);color:var(--fg)}
.odds li small{flex-basis:100%;font:400 11px var(--mono);color:var(--mut);padding-left:18px}

/* ---------- Échanges ---------- */
.seg{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line);margin-bottom:6px}
.seg button{font:700 14px/1 var(--font);color:var(--mut);background:transparent;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.seg button[aria-selected=true]{background:var(--fg);color:var(--bg)}
.seg-n{font:700 11px/1 var(--mono);padding:3px 6px;border-radius:999px;background:var(--flame);color:#1a0800}
.mk-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.mk-actions .btn .ic,.offer .btn .ic,.mk-form .btn .ic,.detail .btn .ic{width:16px;height:16px}
.offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.offer{display:flex;flex-direction:column;gap:12px;padding:14px 14px 16px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.offer.me{border-color:rgba(255,122,61,.7);box-shadow:inset 0 0 0 1px rgba(255,122,61,.35),0 0 28px -12px var(--flame)}
.offer>.btn{align-self:stretch}
.of-head{display:flex;align-items:center;gap:8px;min-height:22px;font:400 12px var(--mono);color:var(--mut)}
.of-head b{color:var(--fg);font:700 15px var(--font)}
.of-head span:last-child{margin-left:auto}
.of-tag{padding:4px 7px;border-radius:999px;background:var(--flame);color:#1a0800;font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.of-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.of-row figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.of-row figcaption{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.of-row .tcg,.of-row .want{width:100%;max-width:132px}
.of-x{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);color:var(--acc);margin-bottom:22px}
.of-x .ic{width:18px;height:18px}
.of-why{margin:0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);font:400 12px var(--mono);color:var(--mut);text-align:center}
/* Carte demandée sans titre : un cadre à la matière de la rareté demandée */
.want{--m:var(--m0);aspect-ratio:63/88;border-radius:14px;padding:3px;container-type:inline-size;background:var(--m);box-shadow:0 18px 30px -16px #000}
.want.r1{--m:var(--m1)} .want.r2{--m:var(--m2)} .want.r3{--m:var(--m3)} .want.r4{--m:var(--m4)}
.want-in{height:100%;border-radius:11px;background:#141130;display:grid;place-content:center;justify-items:center;gap:6cqw;text-align:center;padding:8cqw;
  box-shadow:inset 0 0 0 1.5px var(--line2)}
.want-in b{font:800 13cqw/1.05 var(--font);letter-spacing:-.02em;color:var(--fg)}
.want-in small{font:700 7.5cqw/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.want .tcg-gems{display:flex;gap:2.4cqw}
.want.prix{--m:linear-gradient(150deg,#7cf5ff,#3a7bd5 50%,#7cf5ff)}
.want.prix .want-in .ic{width:22cqw;height:22cqw;stroke:var(--inkc)}
.want.prix .want-in b{color:var(--inkc);font-size:15cqw}
.mk-mode{margin:0 0 10px}
.mk-prix{display:flex;flex-direction:column;gap:6px}
.mp-in{display:flex;align-items:center;gap:8px;max-width:260px;padding:0 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line2)}
.mp-in .ic{width:18px;height:18px;stroke:var(--inkc);flex:none}
.mk-form .mp-in input{flex:1;width:auto;min-width:0;border:0;border-radius:0;background:none;padding:12px 0;font:800 20px var(--font);color:var(--fg)}
.mp-in input:focus{outline:none}
.mp-in span{color:var(--mut);font-size:14px}
.mk-prix small{font:400 12px var(--mono);color:var(--mut)}
.achat-carte{width:150px;margin:6px auto 0}
.offer.vente .btn .ic{width:16px;height:16px}
.want .tcg-gems i{width:6cqw;height:6cqw;border-width:max(1px,.8cqw)}
.empty-box{margin:0;padding:22px;border-radius:16px;border:1px dashed var(--line2);color:var(--mut);text-align:center}
.mk-hist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.mk-hist li{display:flex;align-items:baseline;gap:10px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.03);font-size:14px;color:var(--mut)}
.mk-hist li.ok{color:var(--fg)}
.mk-hist li.ok::before{content:"✓";color:var(--ok);font-weight:800}
.mk-hist small{margin-left:auto;font:400 11px var(--mono);white-space:nowrap}
/* Formulaire d'offre et choix d'une carte */
.mk-form h2,.pick h2,.troc h2{margin:2px 0 4px;font-size:28px;font-weight:800;letter-spacing:-.03em;padding-right:60px}
.mk-step{margin:18px 0 8px;font-size:15px;font-weight:800}
.mk-form input{width:100%;font:500 16px var(--font);padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:var(--fg)}
.mk-form input::placeholder{color:var(--mut)}
.mk-form input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.mk-form input[hidden]{display:none}
.mk-want{margin:0 0 10px}
.mk-form .acct-err{margin-top:10px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin-top:10px;max-height:min(46vh,420px);overflow-y:auto;padding:8px 4px 4px}
.pick-grid .tcg{width:100%}
.pick .pick-grid{max-height:min(60vh,560px)}
.tcg.chosen{box-shadow:0 0 0 3px var(--acc),0 0 26px 2px rgba(255,210,63,.55);transform:translateY(-3px)}
.troc .of-row{margin:14px auto 0;max-width:340px}
.troc h2{padding:0 8px;overflow-wrap:anywhere}   /* fenêtre centrée : pas de marge à droite pour le bouton Fermer */
.troc .sub{padding:4px 0 0}
.apercu{display:grid;justify-items:center;gap:12px}
.apercu .tcg{width:min(280px,100%)}
/* Carte mise de côté par une offre */
.tcg.held::after{content:"En échange";position:absolute;top:-9px;left:50%;translate:-50% 0;z-index:7;padding:3px 8px;border-radius:999px;background:var(--flame);color:#1a0800;
  font:700 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tcg.held .tcg-frame{filter:saturate(.45) brightness(.8)}
.card.held{opacity:.5;filter:saturate(.3)}
.card .lock{position:absolute;z-index:3;top:6px;right:6px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:rgba(11,10,28,.82);color:var(--flame)}
.card .lock .ic{width:12px;height:12px}

/* ---------- Ordinateur moyen ---------- */
@media (max-width:1180px){
  .b-top{gap:24px;padding:12px 20px}
  .hand-head{grid-template-columns:minmax(0,1fr) 200px auto;padding:12px 20px 8px}
  .hand{padding:6px 20px 18px;grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .prog{width:180px}
  .tabs{margin-left:12px}
}
@media (max-width:1560px){.tabs button{padding:9px 12px} .prog{width:210px}}
@media (max-width:1280px){.brand h1{display:none} .tabs{margin-left:14px}}
/* Ordinateur étroit : onglets en icônes seules (nom au survol) */
@media (max-width:1180px) and (min-width:861px){.tabs button>span:not(.tab-n){display:none} .tabs button{padding:10px 12px}}
@media (max-width:1000px) and (min-width:861px){
  .prog{width:130px} .prog .pl span,.pill.energy small,.pill .u{display:none}
  .brand h1{display:none}
}
/* ---------- Mobile ---------- */
@media (max-width:860px){
  body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"player" "main" "tabs"}
  body::before,.brand{display:none}
  .player{padding:calc(env(safe-area-inset-top) + 10px) 14px 8px;gap:8px;background:rgba(11,10,28,.6)}
  .prog{flex:1;width:auto}
  .pill{height:32px;padding:0 11px;font-size:14px;gap:5px}
  .pill .ic{width:15px;height:15px}
  .pill.ink .u{display:none}
  .prog .pl span{display:none}
  .help{width:28px;height:28px;font-size:13px}
  .tabs{justify-self:stretch;margin:0;justify-content:space-around;padding:6px 6px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(11,10,28,.94)}
  .tabs button{flex-direction:column;gap:3px;font-size:11px;padding:6px 10px;border-radius:12px}
  .tabs button[aria-selected=true]{background:transparent;color:var(--acc)}
  .tabs button .ic{width:22px;height:22px}
  .tab-n{display:none}
  .pip{top:2px;right:12px}
  .tabs button{padding:6px 4px;min-width:0;flex:1}
  .pill.energy small{display:none}
  .help.snd{width:28px;height:28px}
  .odds{grid-template-columns:1fr}
  .b-top{flex-direction:column;gap:2px;padding:4px 14px 8px;border:0;background:none}
  .b-recent{display:none}
  .b-info{align-self:stretch}
  .hint{text-align:center;font-size:13px}
  .cru{width:100%;height:176px;gap:16px}
  .cru .orb{width:180px;height:180px}
  .cru .ring{width:200px;height:200px}
  .slot{width:96px}
  .slot.empty{font-size:12.5px;padding:8px;border-radius:13px}
  .slot .card{border-radius:13px}
  .slot .card .in{border-radius:10px}
  .slot .card .t{font-size:12.5px;padding:0 7px 9px}
  .slot .info{width:22px;height:22px;font-size:11px;top:5px;right:5px}
  .pop{width:104px}
  #toasts{top:calc(env(safe-area-inset-top) + 58px);bottom:auto}
  .toast{transform:translateY(-14px)}
  .hand-head{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:4px 14px 6px}
  .hand-head .fams{grid-column:1/-1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  .hand-head .fams::-webkit-scrollbar{display:none}
  #album-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px 18px;padding:0 12px}
  #album-filters::-webkit-scrollbar{display:none}
  .chip{padding:7px 11px;font-size:12.5px}
  .hand{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:4px 14px 14px}
  .hand .card .t{font-size:11.5px;padding:0 6px 7px}
  .hand .card .ico{width:19px;height:19px;top:5px;left:5px}
  .hand .card .ico .ic{width:10px;height:10px}
  .credit{display:none}
  .lobby{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .detail-card{width:min(260px,72%);margin:0 auto}
  /* Carte centrée en haut : « Fermer » aurait recouvert sa rareté, il prend sa propre bande. */
  .modal-box:has(.detail,.intro-fan){padding-top:56px}
  .detail h2{padding-right:0}
}
@media (max-width:720px){
  .album-wrap,.duel-wrap{padding:16px 12px 32px}
  .album-bar h2,.sec-head h2{font-size:26px}
  .album-bar input{width:100%;order:5}
  .album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .deck-row{gap:6px;padding:10px}
  .strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .modal-box{padding:20px 16px}
  .detail h2{font-size:28px}
  /* Arène au téléphone : tout tient dans un écran, la main en bas sous le pouce, en une rangée qui défile (la 4e carte coupée montre la suite). */
  #duel:has(.arena){height:100%}
  .arena{display:flex;flex-direction:column;min-height:100%;padding:8px 12px 12px;gap:8px}
  .ar-top .rv-crest{width:34px;height:34px}
  .ar-who b{font-size:16px}
  .ar-score{font-size:22px}
  .ar-prog li{padding:6px 4px}
  .ar-prog li span{display:none}
  .ar-backs{min-height:30px}
  .ar-backs .tcg-back{width:22px}
  .ar-field{grid-template-columns:1fr 1fr;gap:10px}
  .ar-mid{grid-column:1/-1;grid-row:2;margin-top:16px;gap:6px}
  .ar-field .slot{width:min(112px,100%)}
  .ar-stat{padding:6px 12px;font-size:13px}
  .ar-msg{min-height:0;font-size:14px}
  .ar-hand{display:flex;justify-content:flex-start;gap:10px;margin:auto -12px 0;padding:10px 12px 4px;overflow-x:auto;scrollbar-width:none}
  .ar-hand::-webkit-scrollbar{display:none}
  .ar-hand .tcg{flex:none;width:27vw;max-width:120px}
  .ar-hand .tcg:first-child{margin-left:auto}
  .ar-hand .tcg:last-child{margin-right:auto}
  .dtitle{font-size:30px}
}
@media (max-width:720px){
  .offers{grid-template-columns:1fr}
  .packs-fam{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .duel-regle{gap:12px;padding:10px 12px 10px 8px}
  .duel-regle svg.cercle{width:78px}
  .dr-txt span{font-size:13px}
  .of-row .tcg,.of-row .want{max-width:120px}
  .pick-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
  .mk-form h2,.pick h2,.troc h2{font-size:24px}
  .seg{align-self:stretch} .seg button{flex:1;justify-content:center}
  .mk-mode button{padding:10px 6px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Originale : première découverte au monde ---------- */
/* Un sceau doré (.tcg-seal, .card .seal), quelle que soit la rareté ; la révélation d'une première découverte passe à l'or. */
.chip.orig i{background:var(--sceau);border-radius:50%;transform:none}
.d-orig,.d-dec{margin:6px 0 0;font-size:14px}
.d-orig{font-weight:700;color:var(--acc)}
.d-dec{color:var(--mut)}
#reveal.premiere{--g:1}
#reveal.premiere .burst{animation-duration:16s;background:repeating-conic-gradient(from 0deg,rgba(255,210,63,.32) 0 4deg,transparent 4deg 12deg)}
#reveal.premiere .reveal-card .flip{filter:drop-shadow(0 0 28px rgba(255,210,63,.8)) drop-shadow(0 0 56px color-mix(in srgb,var(--fc) 60%,transparent))}
#reveal.premiere .reveal-kicker{font-size:14px;color:var(--acc);text-shadow:0 0 14px rgba(255,210,63,.8)}
#reveal.premiere .reveal-rar{font-size:clamp(22px,7vw,32px);color:var(--acc);text-shadow:0 0 18px rgba(255,210,63,.6)}