/* Polices hébergées sur le serveur (licence OFL, sous-ensemble latin) : pas de requête vers Google (aucune adresse IP transmise) */
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/img/fonts/barlow-semi-condensed-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/img/fonts/barlow-semi-condensed-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jersey 10';font-style:normal;font-weight:400;font-display:swap;src:url(/img/fonts/jersey-10-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/img/fonts/pixelify-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/img/fonts/pixelify-sans-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/img/fonts/pixelify-sans-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Layout : arene nocturne. Rangee du bot en haut, ta rangee en dessous, chaque rangee = panneau (PV + compteurs) + 4 emplacements de chaine. Main en bas. */
:root{
  --bg:#0b0c18;
  --panel:rgba(12,13,30,.86);
  --line:#2e3366;
  --text:#eef0fa;
  --muted:#9aa0c7;
  --dmg:#2f86d6; --dmg-d:#174f86;
  --mult:#e2413b; --mult-d:#8c1f1c;
  --shield:#5f86ad; --shield-d:#33506e;
  --poison:#72c94e;
  --gold:#f0b84a; --gold-d:#9a6a1c;
  --f-display:"Jersey 10","Courier New",monospace;
  --f-ui:"Pixelify Sans",ui-monospace,"Courier New",monospace;
  --f-txt:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --cw:96px; --ch:154px;
  --bk1:#1b2058; --bk2:#f0b84a;
  color-scheme:dark;
}
html{height:100%;box-sizing:border-box;background:var(--bg)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--f-ui);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#bg{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:0;background:var(--bg)}
#crt{position:fixed;inset:0;pointer-events:none;z-index:100;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%)}
#stage{position:relative;z-index:1;height:100%;max-width:1040px;margin:0 auto;display:grid;
  grid-template-rows:auto auto auto minmax(calc(var(--ch)*1.22),1fr) auto;gap:10px}
.row{display:grid;grid-template-columns:minmax(190px,236px) minmax(0,1fr);gap:16px;align-items:center}
.fade{transition:opacity .4s}
.drafting .fade{opacity:.18}

/* Panneaux */
.pan{background:var(--panel);border:2px solid var(--line);border-radius:12px;box-shadow:0 4px 0 rgba(0,0,0,.45);min-width:0}
.side{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.who{display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.who b{color:var(--text);font-weight:600}
.pz{font-size:12px;letter-spacing:.04em;text-transform:none;color:#0b1a07;background:var(--poison);border-radius:6px;padding:1px 6px;font-weight:600}
.hpbar{position:relative;height:12px;border-radius:6px;background:rgba(0,0,0,.55);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hpbar i{position:absolute;left:0;top:0;bottom:0;width:100%}
.hpbar .chunk{background:#fff4d6;transition:width .8s .35s ease-out}
.hpbar .fill{background:#5fd16b;transition:width .25s ease-out,background .3s}
.hpn{font-family:var(--f-display);font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.hpn span{font-family:var(--f-ui);font-size:12px;color:var(--muted);margin-left:4px}
.tot{display:flex;align-items:center;gap:5px}
.box{display:inline-flex;align-items:center;justify-content:center;gap:3px;font-family:var(--f-display);font-size:26px;line-height:1;padding:3px 7px 4px;border-radius:7px;color:#fff;min-width:2.4ch;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 3px 0 rgba(0,0,0,.45)}
.box.d{background:var(--dmg)}.box.m{background:var(--mult)}.box.b{background:var(--shield);margin-left:auto}
.box.b svg{width:.62em;height:.62em}
.x{font-family:var(--f-display);font-size:22px;color:var(--mult)}
.atk{font-family:var(--f-display);font-size:20px;color:var(--muted);line-height:1}
.atk b{font-weight:400;color:var(--gold);font-size:1.3em}

.slots{display:flex;justify-content:center;gap:calc(var(--cw)*.16)}
.slot{width:var(--cw);height:var(--ch);border:2px dashed rgba(238,240,250,.15);border-radius:calc(var(--cw)*.08);display:grid;place-items:center;
  font-family:var(--f-display);font-size:calc(var(--cw)*.32);color:rgba(238,240,250,.13);flex:0 0 auto}
#meSlots .slot{border-color:rgba(120,170,255,.22)}

#divider{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#divider::before,#divider::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
#divider b{color:var(--text);font-weight:600}
.fev{font-family:var(--f-display);font-size:20px;letter-spacing:.02em;text-transform:none;color:#1a0c00;background:var(--gold);border-radius:7px;padding:1px 8px 2px;box-shadow:0 3px 0 var(--gold-d)}

#hand{position:relative}
#controls{display:flex;align-items:center;gap:14px}
#bin{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto}
.binlab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bslots{display:flex;gap:6px}
.bslot{width:calc(var(--cw)*.56);height:calc(var(--ch)*.56);border:2px dashed rgba(240,184,74,.32);border-radius:calc(var(--cw)*.05);display:grid;place-items:center;color:rgba(240,184,74,.35);transition:background .15s,border-color .15s,transform .15s}
.bslot svg{width:40%;height:auto}
.bslot.over{border-style:solid;border-color:var(--gold);background:rgba(240,184,74,.12);transform:scale(1.06)}
#info{flex:1;min-width:0;font-family:var(--f-txt);font-size:16px;line-height:1.3;color:var(--muted)}
#info b{color:var(--text);font-weight:700}
#info .fam{font-family:var(--f-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-right:6px}
.btn{--sh:var(--dmg-d);font-family:var(--f-ui);font-weight:700;font-size:20px;letter-spacing:.05em;color:#fff;border:0;border-radius:10px;padding:13px 30px;cursor:pointer;
  background:var(--dmg);box-shadow:0 5px 0 var(--sh);transition:transform .08s,box-shadow .08s,filter .2s;flex:0 0 auto}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 var(--sh)}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--sh)}
.btn:disabled{filter:grayscale(.75) brightness(.55);cursor:not-allowed}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
#deck{position:relative;width:calc(var(--cw)*.46);height:calc(var(--cw)*.74);flex:0 0 auto;margin-right:10px}
#deck .dk{position:absolute;inset:0;border-radius:calc(var(--cw)*.05);box-shadow:3px 3px 0 #161a3a,6px 6px 0 #0b0d20}
#deckn{position:absolute;bottom:-6px;right:-14px;font-family:var(--f-display);font-size:21px;line-height:1;background:#090a16;border:2px solid var(--gold);border-radius:8px;padding:1px 6px 2px;color:var(--gold)}

/* Cartes */
#layer{position:absolute;inset:0;pointer-events:none;z-index:20}
.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);pointer-events:auto;cursor:pointer;touch-action:none;will-change:transform;perspective:700px}
.card.inert{pointer-events:none}
.inner{position:absolute;inset:0;transform-style:preserve-3d}
.face,.back{position:absolute;inset:0;border-radius:calc(var(--cw)*.05);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* Design Néon pixel : fond sombre, double bordure blanche et couleur de famille, damier pixel derrière l'illustration */
.face{color:var(--text);background:#1b1e33;
  box-shadow:inset 0 0 0 calc(var(--cw)*.03) #f4efe2,inset 0 0 0 calc(var(--cw)*.052) var(--fc),0 calc(var(--cw)*.05) 0 rgba(0,0,0,.5);transition:filter .25s}
.back{transform:rotateY(180deg)}
/* Dos de cartes (boutique, js/catalog.js) : chaque motif se déclare sur [data-back=ID] en variables, héritées par les .backpat du dessous.
   Le dos équipé est posé sur <html>, un aperçu de boutique ou une carte adverse peut en déclarer un autre. Tailles en % pour suivre la taille de la carte. */
.backpat{background:var(--bkpat);box-shadow:inset 0 0 0 calc(var(--cw)*.04) var(--bk1),inset 0 0 0 calc(var(--cw)*.06) var(--bk2),0 calc(var(--cw)*.05) 0 rgba(0,0,0,.45)}
:root,[data-back=classique]{--bk1:#1b2058;--bk2:#f0b84a;--bkpat:
  url(/img/backs/classique.webp) center/cover,
  radial-gradient(circle,#f0b84a 0 6%,#1b2058 6.5% 9%,#f0b84a 9.5% 10.5%,transparent 11%),
  repeating-linear-gradient(45deg,transparent 0 5.5%,rgba(240,184,74,.28) 5.5% 7%),repeating-linear-gradient(-45deg,transparent 0 5.5%,rgba(240,184,74,.28) 5.5% 7%),#1b2058}
[data-back=damier]{--bk1:#170b2e;--bk2:#ff4fd8;--bkpat:
  url(/img/backs/damier.webp) center/cover,
  radial-gradient(circle,#170b2e 0 11%,#2de2e6 11.5% 14%,#170b2e 14.5% 17%,transparent 17.5%),
  repeating-conic-gradient(#5a1f6e 0 25%,#170b2e 0 50%) 0 0/16.66% 11.9%,#170b2e}
[data-back=maree]{--bk1:#0a1f3a;--bk2:#4aaee8;--bkpat:
  url(/img/backs/maree.webp) center/cover,
  radial-gradient(circle at 50% 100%,transparent 0 38%,#4aaee8 39% 47%,#123a63 48% 55%,transparent 56%) 0 0/25% 9%,
  radial-gradient(circle at 50% 100%,transparent 0 38%,#2a78b8 39% 47%,transparent 48%) 12.5% 4.5%/25% 9%,#0a1f3a}
[data-back=ecailles]{--bk1:#0c2a22;--bk2:#5fe0a0;--bkpat:
  url(/img/backs/ecailles.webp) center/cover,
  radial-gradient(circle at 50% 0,#0c2a22 0 46%,#5fe0a0 47% 53%,#1d5a45 54%) 0 0/20% 10%,
  radial-gradient(circle at 50% 0,#0c2a22 0 46%,#3fb37e 47% 53%,#164a39 54%) 10% 5%/20% 10%,#0c2a22}
[data-back=soleil]{--bk1:#2a0d0d;--bk2:#ff8a3c;--bkpat:
  url(/img/backs/soleil.webp) center/cover,
  radial-gradient(circle,#140505 0 9%,#ff8a3c 9.5% 11.5%,transparent 12%),
  radial-gradient(circle,transparent 0 20%,#2a0d0d 75%),
  repeating-conic-gradient(#8a3417 0 4deg,#2a0d0d 4deg 15deg),#2a0d0d}
[data-back=cosmos]{--bk1:#0a0a1f;--bk2:#b07cff;--bkpat:
  url(/img/backs/cosmos.webp) center/cover,
  radial-gradient(circle,#e6d6ff 0 3%,#b07cff 3.5% 9%,transparent 9.5%),
  radial-gradient(ellipse 34% 9% at 50% 50%,transparent 0 80%,#e6d6ff 84% 92%,transparent 96%),
  radial-gradient(circle,#fff 0 4%,transparent 6%) 0 0/31% 21%,
  radial-gradient(circle,rgba(255,255,255,.7) 0 3%,transparent 5%) 15% 10%/23% 17%,
  radial-gradient(ellipse at 25% 20%,rgba(176,124,255,.4),transparent 55%),
  radial-gradient(ellipse at 80% 85%,rgba(74,174,232,.3),transparent 50%),#0a0a1f}
[data-back=sceau]{--bk1:#151033;--bk2:#f0b84a;--bkpat:
  url(/img/backs/sceau.webp) center/cover,
  radial-gradient(circle,#f0b84a 0 4%,transparent 4.5%),
  linear-gradient(90deg,transparent 49.2%,rgba(240,184,74,.75) 49.2% 50.8%,transparent 50.8%) 50% 50%/100% 64% no-repeat,
  linear-gradient(0deg,transparent 49.4%,rgba(240,184,74,.75) 49.4% 50.6%,transparent 50.6%) 50% 50%/64% 100% no-repeat,
  repeating-radial-gradient(circle,transparent 0 6%,rgba(240,184,74,.55) 6% 7.2%,transparent 7.2% 12%),
  radial-gradient(circle,#2b2066,#151033 70%)}
/* Exclusifs : "dev" (donné avec server/grant.mjs), "bot" (cartes du bot). Le symbole est un SVG en data: URI, autorisé par la CSP. */
[data-back=dev]{--bk1:#2a0c3a;--bk2:#f0b84a;--bkpat:
  url(/img/backs/dev.webp) center/cover,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Ccircle cx='50' cy='70' r='22' fill='%2307120c' stroke='%234dff9a' stroke-width='3'/%3E%3Cpath d='M41 61l-10 9 10 9M59 61l10 9-10 9M54 57l-8 26' fill='none' stroke='%234dff9a' stroke-width='5' stroke-linecap='square'/%3E%3C/svg%3E") center/100% 100% no-repeat,
  repeating-linear-gradient(0deg,rgba(77,255,154,.14) 0 1px,transparent 1px 7.14%),repeating-linear-gradient(90deg,rgba(77,255,154,.14) 0 1px,transparent 1px 10%),
  radial-gradient(ellipse at 50% 50%,#103a22,#07120c 70%)}
[data-back=bot]{--bk1:#1d1f26;--bk2:#ff5a4a;--bkpat:
  url(/img/backs/bot.webp) center/cover,
  radial-gradient(circle,#fff 0 2.5%,#ff5a4a 3% 8%,#5a1410 8.5% 11%,#ff5a4a 11.5% 12.5%,transparent 13%),
  repeating-linear-gradient(45deg,#ff5a4a 0 3.5%,#1d1f26 3.5% 7%) 0 0/100% 10% no-repeat,
  repeating-linear-gradient(45deg,#ff5a4a 0 3.5%,#1d1f26 3.5% 7%) 0 100%/100% 10% no-repeat,
  radial-gradient(circle,#4a4d5a 0 18%,transparent 22%) 0 0/16.66% 11.9%,#1d1f26}
/* Finitions (boutique) : même principe sur [data-finish=ID]. Un filtre sur la face, et un calque animé (.fin) par-dessus. */
.face{filter:var(--fin-filter,none);animation:var(--fin-anim,none)}
.fin{position:absolute;inset:0;pointer-events:none;background:var(--fin-bg,none);background-size:var(--fin-size,auto);mix-blend-mode:var(--fin-blend,normal);opacity:var(--fin-op,0);animation:var(--fin-move,none)}
:root,[data-finish=standard]{--fin-filter:none;--fin-anim:none;--fin-bg:none;--fin-op:0;--fin-move:none}
[data-finish=nb]{--fin-filter:grayscale(1) contrast(1.2);--fin-anim:none;--fin-bg:none;--fin-op:0;--fin-move:none}
[data-finish=foil]{--fin-filter:saturate(.7) brightness(1.1);--fin-anim:none;--fin-op:.6;--fin-blend:screen;--fin-size:300% 300%;--fin-move:finmove 4s ease-in-out infinite alternate;
  --fin-bg:repeating-linear-gradient(115deg,transparent 0 10%,rgba(255,255,255,.7) 13%,transparent 16% 22%,rgba(200,225,255,.55) 24%,transparent 27% 34%)}
[data-finish=dore]{--fin-filter:sepia(.9) saturate(2.4) hue-rotate(-10deg) brightness(1.08);--fin-anim:none;--fin-op:.55;--fin-blend:screen;--fin-size:300% 300%;--fin-move:finmove 3.5s ease-in-out infinite alternate;
  --fin-bg:linear-gradient(115deg,transparent 35%,rgba(255,236,170,.9) 48%,transparent 60%)}
[data-finish=negatif]{--fin-filter:invert(1) hue-rotate(180deg);--fin-anim:none;--fin-bg:none;--fin-op:0;--fin-move:none}
[data-finish=holo]{--fin-filter:none;--fin-anim:none;--fin-op:.42;--fin-blend:color-dodge;--fin-size:400% 400%;--fin-move:finmove 6s ease-in-out infinite alternate;
  --fin-bg:linear-gradient(125deg,#ff5ea8,#ffd75e,#5effc4,#5ec8ff,#b35eff,#ff5ea8,#ffd75e)}
[data-finish=polychrome]{--fin-filter:none;--fin-anim:poly 5s linear infinite;--fin-op:.25;--fin-blend:soft-light;--fin-size:300% 300%;--fin-move:finmove 5s ease-in-out infinite alternate;
  --fin-bg:linear-gradient(115deg,transparent 30%,#fff 50%,transparent 70%)}
@keyframes finmove{from{background-position:0 0}to{background-position:100% 100%}}
@keyframes poly{to{filter:hue-rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.face,.fin{animation:none!important}}
/* Cadre de carte : nom, illustration, ligne de type, boite d'effet. Le texte d'ambiance n'est affiché qu'en vue agrandie. */
.fname{position:absolute;top:4%;left:6%;right:6%;height:11%;display:flex;align-items:center;justify-content:center;padding:0 5%;
  font-family:var(--f-display);font-size:calc(var(--cw)*.16*var(--fs,1));line-height:1;white-space:nowrap;overflow:hidden;color:var(--fc);text-shadow:0 calc(var(--cw)*.02) 0 #000}
.fart{position:absolute;top:16.5%;left:8%;right:8%;height:39%;overflow:hidden;display:grid;place-items:center;color:var(--fc);
  background:repeating-conic-gradient(color-mix(in srgb,var(--fc) 32%,#1b1e33) 0 25%,color-mix(in srgb,var(--fc) 16%,#1b1e33) 0 50%) 0 0/calc(var(--cw)*.08) calc(var(--cw)*.08);
  box-shadow:inset 0 0 0 calc(var(--cw)*.018) var(--fc)}
.fart svg{width:40%;height:auto;display:block;filter:drop-shadow(0 calc(var(--cw)*.025) 0 rgba(0,0,0,.55))}
.fart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
/* Liseré néon redessiné par-dessus l'illustration */
.fart::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 calc(var(--cw)*.018) var(--fc);pointer-events:none}
.ftype{position:absolute;top:52%;left:11%;right:11%;height:8%;z-index:1;display:flex;align-items:center;justify-content:center;gap:4%;padding:0 4%;
  background:var(--fc);color:#120f1c;box-shadow:inset 0 0 0 calc(var(--cw)*.01) #120f1c,0 calc(var(--cw)*.015) 0 rgba(0,0,0,.55);
  font-family:var(--f-txt);font-weight:700;font-size:calc(var(--cw)*.074);line-height:1;white-space:nowrap;overflow:hidden}
.ftype span{overflow:hidden;text-overflow:ellipsis}
.ftype svg{flex:0 0 auto;width:calc(var(--cw)*.08);height:calc(var(--cw)*.08);color:#120f1c}
.ftxt{position:absolute;left:6%;right:6%;top:56.5%;bottom:5%;background:#0f1020;color:#f4efe2;box-shadow:inset 0 0 0 calc(var(--cw)*.01) color-mix(in srgb,var(--fc) 60%,transparent);
  display:flex;flex-direction:column;justify-content:safe center;padding:calc(var(--cw)*.07) 6% 3%;text-align:center;font-family:var(--f-txt);overflow:hidden}
.ftxt p{margin:0}
.ftxt .rules{font-weight:700;font-size:calc(var(--cw)*.083);line-height:1.12}
.growb{position:absolute;top:18.5%;right:10%;font-family:var(--f-display);font-size:calc(var(--cw)*.15);line-height:1;color:#1a0c00;background:var(--gold);border-radius:calc(var(--cw)*.04);padding:0 .2em .05em}
.sm .card:not(.big) .ftxt{display:none}
.sm .card:not(.big) .fart{top:17%;height:54%}
.sm .card:not(.big) .ftype{top:auto;bottom:6%;height:14%;justify-content:center}
.sm .card:not(.big) .ftype span{display:none}
.sm .card:not(.big) .ftype svg{width:calc(var(--cw)*.14);height:calc(var(--cw)*.14)}
.shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.5),transparent 52%);mix-blend-mode:soft-light;opacity:0;transition:opacity .2s}
.card.hov .shine{opacity:1}

/* Effets */
#fxl{position:absolute;inset:0;pointer-events:none;z-index:50}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
/* Vue agrandie d'une carte : survol prolongé (1 s) ou clic droit en partie, survol direct dans les pages */
#tip,.ztip{position:absolute;z-index:90;display:flex;gap:14px;align-items:flex-start;width:max-content;max-width:calc(100vw - 32px);padding:12px;background:#0d0e22;border:2px solid var(--line);border-radius:10px;box-shadow:0 6px 0 rgba(0,0,0,.5);pointer-events:none;
  --cw:clamp(150px,24vh,230px);--ch:calc(var(--cw)*1.4)}
#tip .card,.ztip .card{position:relative;flex:0 0 auto}
.zinfo{width:250px;font-family:var(--f-txt);font-size:15px;line-height:1.35;color:var(--text)}
.zflav{margin:0;font-style:italic;font-size:16px;color:#c4c9ea}
.zinfo .gl{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.zinfo .gl em{display:block;font-style:normal;font-weight:700;color:var(--gold)}
@media (max-width:560px){#tip,.ztip{flex-direction:column;align-items:center;--cw:min(170px,40vw)}.zinfo{width:auto;max-width:300px}}
.ft{position:absolute;left:0;top:0;font-family:var(--f-display);font-size:calc(var(--cw)*.3);line-height:1;padding:.08em .3em .14em;border-radius:.2em;color:#fff;white-space:nowrap;box-shadow:0 .1em 0 rgba(0,0,0,.45)}
.ft.c{background:var(--dmg)}.ft.m{background:var(--mult)}.ft.s{background:var(--shield)}.ft.p{background:var(--poison);color:#0b1a07}
.ft.h{background:#5fd16b;color:#06200c}
.ft.f{background:#3a3d5a;color:var(--muted)}
.ft.g{background:none;box-shadow:none;color:var(--gold);font-size:calc(var(--cw)*.5);text-shadow:0 .06em 0 var(--mult-d),0 .13em 0 rgba(0,0,0,.65)}
.ft.huge{font-size:clamp(44px,calc(var(--cw)*.9),110px)}
.ft.w{background:none;box-shadow:none;color:var(--text);font-size:calc(var(--cw)*.42);text-shadow:0 .08em 0 rgba(0,0,0,.85)}
.ft.w small{display:block;text-align:center;font-size:.42em;color:var(--gold);margin-top:.15em}
.orb{position:absolute;left:0;top:0;width:var(--os);height:var(--os);border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0 18%,var(--oc) 46%,transparent 70%)}

#draftUI{position:absolute;left:0;right:0;z-index:45;text-align:center;pointer-events:none}
#draftUI h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:40px;line-height:1;color:var(--gold);text-shadow:0 3px 0 var(--mult-d),0 6px 0 rgba(0,0,0,.5)}
#draftUI p{margin:6px 0 0;font-size:13px;color:var(--muted);letter-spacing:.06em}

#banner{position:absolute;inset:0;z-index:80;display:grid;place-items:center;background:rgba(5,6,14,.55)}
.bn{background:var(--panel);border:3px solid var(--gold);border-radius:16px;padding:24px 26px;text-align:center;box-shadow:0 8px 0 rgba(0,0,0,.5);max-width:min(92%,380px);display:flex;flex-direction:column;gap:12px;align-items:center}
.bn h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:58px;line-height:.9;color:var(--gold);text-shadow:0 4px 0 var(--mult-d)}
.bn p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.bnBtns{display:flex;gap:10px}
.btn.alt{--sh:#1c2048;background:#343a7a}

/* Site : barre de navigation et pages (accueil, comment jouer, cartes, boutique, classement, profil, connexion) par-dessus le fond animé.
   Le plateau est masqué hors partie. */
body.at-home #stage{visibility:hidden;overflow:hidden}
/* Filtre rétro plus léger sur les pages du site : il assombrissait la navbar et les textes */
body.at-home #crt{background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 70%,rgba(0,0,0,.3) 100%)}
#home{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.nav{position:sticky;top:0;z-index:10;flex:0 0 auto;display:flex;align-items:center;gap:20px;padding:10px max(16px,3vw);background:linear-gradient(180deg,#3d4596,#2d3378);border-bottom:3px solid #5f6ad4;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.nlogo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:28px;line-height:1;color:var(--gold);text-shadow:0 2px 0 var(--mult-d);white-space:nowrap;text-decoration:none}
.nmark{width:34px;height:34px;image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.nlinks{display:flex;gap:4px}
.nlinks a{font:600 15px var(--f-ui);color:#fff;text-decoration:none;padding:8px 12px;border-radius:8px;white-space:nowrap}
.nlinks a:hover{color:#fff;background:rgba(255,255,255,.14)}
.nlinks a[aria-current]{color:#1a0c00;background:var(--gold);box-shadow:0 3px 0 var(--gold-d)}
.nright{display:flex;align-items:center;gap:12px;margin-left:auto}
.ntk{display:flex;align-items:baseline;gap:6px;color:#dfe3ff;font-size:13px;text-decoration:none;background:rgba(10,12,40,.35);border:2px solid #5f6ad4;border-radius:8px;padding:2px 10px 3px}
.ntk b{font:400 24px var(--f-display);color:var(--gold)}
.ntk:hover,.nlang:hover{border-color:var(--gold)}
.nlang{font:400 20px var(--f-display);line-height:1;color:var(--text);background:rgba(10,12,40,.35);border:2px solid #5f6ad4;border-radius:8px;padding:5px 9px 6px;cursor:pointer}
.nprof{display:flex;align-items:center;gap:8px;color:var(--text);font:600 15px var(--f-ui);text-decoration:none;padding:4px 8px;border-radius:8px}
.nprof:hover,.nprof[aria-current]{background:rgba(255,255,255,.14)}
.avatar{width:32px;height:32px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;background:var(--dmg);color:#fff;font:400 22px var(--f-display);box-shadow:0 3px 0 var(--dmg-d)}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,32px);padding:16px}
.hfan{position:relative;width:min(92vw,560px);--cw:min(190px,19vh,26vw);--ch:calc(var(--cw)*1.4);height:calc(var(--ch)*1.12)}
.hcard{pointer-events:none}
.hfan .hcard{left:50%;top:50%;margin:calc(var(--ch)/-2) 0 0 calc(var(--cw)/-2);animation:bob 4.5s ease-in-out infinite}
.hfan .hcard:nth-child(1){transform:translate(-72%,7%) rotate(-13deg);animation-delay:-1.5s}
.hfan .hcard:nth-child(2){transform:translateY(-5%);z-index:1}
.hfan .hcard:nth-child(3){transform:translate(72%,7%) rotate(13deg);animation-delay:-3s}
@keyframes bob{50%{translate:0 -12px}}
.brand{display:flex;align-items:center;gap:clamp(10px,2vw,24px)}
.hemb{width:clamp(70px,min(13vw,15vh),160px);height:auto;image-rendering:pixelated;filter:drop-shadow(0 8px 0 rgba(0,0,0,.45));animation:bob 4.5s ease-in-out infinite}
.logo{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(72px,min(13vw,16vh),170px);line-height:.85;color:var(--gold);text-shadow:0 5px 0 var(--mult-d),0 11px 0 rgba(0,0,0,.5)}
.modes{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.mode{min-width:210px;padding:16px 24px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text);background:#1b1e40;border:2px solid var(--line);border-radius:14px;box-shadow:0 6px 0 rgba(0,0,0,.45);cursor:pointer;transition:transform .12s,box-shadow .12s}
.mode b{font:400 32px var(--f-display);line-height:1}
.mode span{font:600 12px var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Une couleur par mode : bot en bleu, classée en rouge, entre amis en violet */
.mode{--mc:var(--dmg);--md:var(--dmg-d);--mb:#7cc0ff;--ms:#e3f0ff;background:var(--mc);border-color:var(--mb);box-shadow:0 6px 0 var(--md)}
.mode[data-mode=ranked]{--mc:var(--mult);--md:var(--mult-d);--mb:#ff8a7a;--ms:#ffe1dc}
.mode[data-mode=friends]{--mc:#6d3fd1;--md:#3b1f7a;--mb:#b07cff;--ms:#eadcff}
.mode span{color:var(--ms)}
.mode:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--md)}
.mode:active{transform:translateY(4px);box-shadow:0 2px 0 var(--md)}
.btn small{font-size:.6em;opacity:.7;font-weight:600}
.aform{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.afield{display:flex;flex-direction:column;gap:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.afield input{font:600 17px var(--f-ui);letter-spacing:0;text-transform:none;color:var(--text);background:rgba(0,0,0,.35);border:2px solid var(--line);border-radius:8px;padding:8px 10px;-webkit-user-select:text;user-select:text}
.afield input:focus{outline:none;border-color:var(--gold)}
.aerr{margin:0;min-height:1.3em;font-family:var(--f-txt);font-size:15px;color:#ff8a7a}
.rcode{margin:4px 0!important;font:400 54px var(--f-display)!important;letter-spacing:.12em;text-align:center;color:var(--gold)!important}
.rinput{text-transform:uppercase;letter-spacing:.2em!important;font-family:var(--f-display)!important;font-size:24px!important}
.tmr{font-family:var(--f-display);font-size:20px;color:#1a0605;background:#ff8a7a;border-radius:7px;padding:1px 8px 2px;box-shadow:0 3px 0 #8c1f1c}
@media (max-width:860px){
  .ntk span,.pn{display:none}
  .nav{flex-wrap:wrap;row-gap:6px;padding-bottom:6px}
  .nlinks{order:3;width:calc(100% + 32px);margin:0 -16px;padding:0 16px 2px;overflow-x:auto;scrollbar-width:none}
  .nlinks a{font-size:14px;padding:6px 10px}
  .nlogo{font-size:22px}
  .modes{width:100%;max-width:420px;flex-direction:column;gap:10px}
  .mode{min-width:0;padding:12px 18px 14px}
  .mode b{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.hfan .hcard{animation:none}}
#modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(5,6,14,.7)}
.md{width:min(100%,460px);padding:20px 22px;display:flex;flex-direction:column;gap:14px;border-color:var(--gold)}
.md h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1;color:var(--gold)}
#mdBody p{margin:0;font-family:var(--f-txt);font-size:18px;line-height:1.45;color:var(--text)}
#mdBody .box{font-size:18px;padding:1px 6px 2px}
#mdNav{display:flex;gap:10px;justify-content:flex-end}
.shopt{font-size:15px!important;color:var(--muted)!important}

/* Pages */
.page{flex:1 0 auto;width:100%;max-width:1200px;margin:0 auto;padding:28px max(16px,3vw) 64px}
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;margin-bottom:24px}
.phead h1{margin:0;font:400 clamp(46px,7vw,76px)/.9 var(--f-display);color:var(--gold);text-shadow:0 4px 0 var(--mult-d),0 8px 0 rgba(0,0,0,.45);overflow-wrap:anywhere}
.phead p{margin:8px 0 0;max-width:62ch;font:600 18px/1.4 var(--f-txt);color:#cfd3f2}
.page h2{margin:0 0 12px;font:400 34px/1 var(--f-display);color:var(--text)}
.panel{background:var(--panel);border:2px solid var(--line);border-radius:14px;box-shadow:0 5px 0 rgba(0,0,0,.45);padding:18px 20px}
.pempty{margin:0;font:600 17px/1.4 var(--f-txt);color:var(--muted)}
.snote{margin:-4px 0 12px;font:600 15px/1.35 var(--f-txt);color:var(--muted)}
a.btn{display:inline-block;text-decoration:none;font-size:17px;padding:11px 22px;text-align:center}
.row2{display:flex;flex-wrap:wrap;gap:10px}
/* Bouton son : dans la navbar et dans la barre du tour sur le plateau */
.sndbtn{display:grid;place-items:center;width:34px;height:34px;padding:6px;color:var(--text);background:rgba(10,12,40,.35);border:2px solid #5f6ad4;border-radius:8px;cursor:pointer}
.sndbtn:hover{border-color:var(--gold)}
.sndbtn.off{color:#ff8a7a}
.sndbtn svg{width:100%;height:100%}
#divider .sndbtn{width:28px;height:28px;padding:4px;border-color:var(--line)}
/* Pied de page du site */
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;padding:14px 16px 18px;font-size:13px;color:var(--muted)}
.foot a{color:#c4c9ea;text-decoration:none}.foot a:hover{color:var(--gold)}
/* Pages légales */
.prose{max-width:760px;font:600 16px/1.55 var(--f-txt);color:#d7dbf5}
.prose h2{margin:22px 0 6px;font-size:28px;color:var(--gold)}.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 10px}
/* Connexion : lien discret (mot de passe oublié, retour) */
.alink{align-self:flex-start;font:600 14px var(--f-ui);color:#c4c9ea}.alink:hover{color:var(--gold)}
.ahint a{color:var(--gold)}
.apanel h2{margin:0;font-size:34px;color:var(--gold)}
/* Profil : suppression du compte */
.danger{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-color:#5a2230}
.danger h2{margin:0;color:#ff8a7a}
.btn.danger-btn{--sh:var(--mult-d);background:var(--mult)}
/* Salle entre amis : lien à copier */
.rlink{display:flex;gap:8px}
.rlink input{flex:1;min-width:0;font:600 14px var(--f-ui);color:var(--text);background:rgba(0,0,0,.4);border:2px solid var(--line);border-radius:8px;padding:8px 10px;-webkit-user-select:all;user-select:all}
.rlink .btn{padding:8px 14px;font-size:15px}
/* Vue agrandie hors partie (pages) : mêmes règles que #tip, en position fixe */
.ztip{position:fixed}
/* Cartes */
.cbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.csearch{flex:1 1 220px;max-width:340px;font:600 16px var(--f-ui);color:var(--text);background:rgba(0,0,0,.4);border:2px solid var(--line);border-radius:10px;padding:9px 12px;-webkit-user-select:text;user-select:text}
.csearch:focus{outline:none;border-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--f-ui);color:var(--text);background:rgba(0,0,0,.4);border:2px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
.chips svg{width:14px;height:14px;color:var(--fc)}
.chips button.on{border-color:var(--fc,var(--gold));background:color-mix(in srgb,var(--fc,var(--gold)) 25%,rgba(0,0,0,.4))}
.cfam{margin-top:32px}
.cfam h2{display:flex;align-items:center;gap:10px;margin-bottom:4px;color:var(--fc)}
.cfam h2 svg{width:28px;height:28px}
.cfam h2 small{font:600 14px var(--f-ui);color:var(--muted);background:rgba(0,0,0,.4);border-radius:999px;padding:2px 9px}
.cfam>p{margin:0 0 14px;font:600 17px var(--f-txt);color:#c4c9ea}
.cgrid{--cw:clamp(124px,26vw,168px);--ch:calc(var(--cw)*1.4);display:grid;grid-template-columns:repeat(auto-fill,var(--cw));gap:20px 18px}
.cgrid .card{position:relative;pointer-events:auto;cursor:zoom-in;transition:transform .15s}
.cgrid .card:hover{transform:translateY(-6px) rotate(-1.5deg)}
/* Boutique */
.pcoins{display:flex;align-items:baseline;gap:8px;padding:6px 16px 8px;background:var(--panel);border:2px solid var(--gold);border-radius:12px;box-shadow:0 4px 0 rgba(0,0,0,.45);color:var(--muted)}
.pcoins b{font:400 44px/1 var(--f-display);color:var(--gold)}
.shop{display:grid;grid-template-columns:minmax(290px,370px) minmax(0,1fr);gap:24px;align-items:start}
.spv{position:sticky;top:84px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.spstage{--cw:clamp(150px,18vw,200px);--ch:calc(var(--cw)*1.4);width:100%;display:flex;flex-direction:column;align-items:center;padding:8px 0 4px}
.spstage>.card{position:relative;pointer-events:auto;cursor:grab;animation:bob 4.5s ease-in-out infinite}
.spmini{--cw:58px;--ch:calc(var(--cw)*1.4);display:flex;gap:10px;margin-top:16px}
.spmini .card{position:relative}
.sphint{margin-top:14px;font-size:12px;color:var(--muted)}
.spkind{margin-top:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.spv h3{margin:0;font:400 42px/1 var(--f-display);color:var(--gold)}
.spv>p{margin:0;max-width:32ch;font:600 17px/1.35 var(--f-txt);color:#cfd3f2}
.spv .btn{margin-top:8px;min-width:min(100%,250px);font-size:18px}
.sitems section+section{margin-top:30px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.stile{--cw:68px;--ch:calc(var(--cw)*1.4);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;background:var(--panel);border:2px solid var(--line);border-radius:12px;color:var(--text);font:600 14px var(--f-ui);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.4);transition:transform .12s,border-color .12s}
.stile:hover,.stile.sel{transform:translateY(-3px);border-color:#8a94ee}
.stile.on{border-color:var(--gold)}
.sthumb{position:relative;width:var(--cw);height:var(--ch)}
.sthumb .backpat{position:absolute;inset:0;border-radius:calc(var(--cw)*.05)}
.sthumb .card{position:relative}
.stile b{text-align:center}
.stile small{font-size:12px;color:var(--gold)}
.stile.own small{color:var(--muted)}.stile.on small{color:var(--gold)}
/* Aperçu d'un plateau : dégradé de ses quatre couleurs (--p0 à --p3, posées par js/pages.js) */
.bswatch{display:block;width:100%;height:100%;border-radius:8px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
  background:radial-gradient(circle at 74% 26%,var(--p3) 0 4%,transparent 16%),radial-gradient(ellipse at 28% 72%,var(--p2),transparent 62%),radial-gradient(ellipse at 58% 38%,var(--p1),transparent 72%),var(--p0)}
.sthumb.wide{width:100%}
.bswatch.big{aspect-ratio:16/10;height:auto;max-width:320px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.14),0 5px 0 rgba(0,0,0,.45)}
/* Classement */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;max-width:760px;margin-bottom:20px}
.pod{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:16px 10px 14px;background:var(--panel);border:2px solid var(--line);border-radius:14px;box-shadow:0 5px 0 rgba(0,0,0,.45);text-align:center}
.pod.p1{order:2;padding-top:30px;border-color:var(--gold)}.pod.p2{order:1}.pod.p3{order:3}
.pod.me{background:color-mix(in srgb,var(--gold) 14%,var(--panel))}
.prk{font:400 30px/1 var(--f-display);color:#1a0c00;background:var(--gold);border-radius:8px;padding:0 10px 2px;box-shadow:0 3px 0 var(--gold-d)}
.pod.p2 .prk{background:#c9d2e3;box-shadow:0 3px 0 #7c879c}.pod.p3 .prk{background:#d98b4e;box-shadow:0 3px 0 #8a4f22}
.pod b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}
.prt{font:400 36px/1 var(--f-display);color:var(--gold)}
.pod small{font-size:12px;color:var(--muted)}
.ltab{padding:6px 8px;overflow-x:auto}
.ltab table,.mtab{width:100%;border-collapse:collapse;font:600 16px var(--f-ui)}
.ltab th,.mtab th{padding:8px 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left}
.ltab td,.mtab td{padding:9px 10px;border-top:1px solid var(--line)}
.lrk{width:3em;color:var(--muted)}.lnm{overflow-wrap:anywhere}
.lrt{font:400 24px var(--f-display);color:var(--gold)}
tr.me td{background:rgba(240,184,74,.13)}
.lme td{border-top:3px dashed var(--line)}
.lcta{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.lcta p{margin:0;max-width:60ch;font:600 17px/1.4 var(--f-txt);color:#cfd3f2}
/* Profil */
.prof{align-items:center;justify-content:flex-start}
.prof>div{flex:1;min-width:0}
.avatar.big{width:84px;height:84px;border-radius:16px;font-size:60px;box-shadow:0 5px 0 var(--dmg-d)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.tile{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.tile b{font:400 44px/1 var(--f-display);color:var(--gold)}
.tile span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pcols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;margin-bottom:18px}
/* Écran large : tuiles et panneaux sur la même grille (--n colonnes, posé par js/pages.js), panneaux à la même hauteur */
@media (min-width:861px){
  .tiles,.pcols{grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:12px}
  .pcols>:first-child{grid-column:1/-3}.pcols>.gear{grid-column:span 2}
}
.pcols .lcta{margin:0;flex-direction:column;align-items:flex-start}
.gear{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.gear h2{margin:0}
.gear>.btn{margin-top:auto}
.gearrow{display:flex;flex-direction:column;gap:6px;width:100%}
.gearlab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gearlab b{color:var(--gold);font-weight:600;letter-spacing:0;text-transform:none;font-size:14px}
.gearpick{--cw:44px;--ch:calc(var(--cw)*1.4);display:flex;flex-wrap:wrap;gap:8px}
.gearit{padding:3px;background:rgba(0,0,0,.35);border:2px solid var(--line);border-radius:8px;cursor:pointer;transition:transform .12s,border-color .12s}
.gearit:hover{transform:translateY(-2px);border-color:#8a94ee}
.gearit.on{border-color:var(--gold);cursor:default}
.gearit .card{position:relative;display:block}
.gearit .backpat,.gearit .bswatch{display:block;width:var(--cw);height:var(--ch);border-radius:4px}
.pname{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pname input{flex:1;min-width:0;max-width:320px;font:400 40px/1 var(--f-display);color:var(--gold);background:rgba(0,0,0,.4);border:2px solid var(--line);border-radius:10px;padding:2px 12px 4px;-webkit-user-select:text;user-select:text}
.pname input:focus{outline:none;border-color:var(--gold)}
.hist{list-style:none;margin:0;padding:0}
.hist li{display:grid;grid-template-columns:118px minmax(0,1fr) 56px 56px;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--line)}
.out{font:400 22px var(--f-display);text-align:center;color:#fff;border-radius:7px;padding:2px 8px}
.out.win{background:#3f9d4b}.out.loss{background:var(--mult)}.out.draw{background:#5a5f8c}
.hopp{display:flex;flex-direction:column;min-width:0;font:600 16px var(--f-ui);overflow-wrap:anywhere}
.hopp small{font-size:12px;font-weight:400;color:var(--muted)}
.hdel{font:400 24px var(--f-display);text-align:right;color:#5fd16b}.hdel.neg{color:#ff8a7a}
.hcoin{font:400 22px var(--f-display);text-align:right;color:var(--gold)}
/* Connexion */
.auth{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:48px;align-items:center;max-width:1000px;margin:clamp(0px,5vh,48px) auto 0}
.apanel{display:flex;flex-direction:column;gap:14px;padding:22px 24px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:rgba(0,0,0,.4);border-radius:10px}
.tabs a{padding:9px 8px;border-radius:7px;text-align:center;text-decoration:none;font:600 15px var(--f-ui);color:#c4c9ea}
.tabs a[aria-selected=true]{color:#fff;background:var(--dmg);box-shadow:0 3px 0 var(--dmg-d)}
.anote{margin:0;font:600 16px var(--f-txt);color:var(--gold)}
.apanel .btn{margin-top:4px}
.ahint{margin:0;font:600 14px/1.35 var(--f-txt);color:var(--muted)}
.aside{display:flex;flex-direction:column;align-items:center;gap:28px}
.aside .hfan{--cw:min(150px,24vw);width:min(100%,440px)}
.perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:380px}
.perks li{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:3px solid var(--gold);font:600 16px/1.35 var(--f-txt);color:#cfd3f2}
.perks b{font:600 15px var(--f-ui);color:var(--text)}
/* Comment jouer : étapes (texte + démo animée), combos, captures annotées */
.ttoc{display:flex;flex-wrap:wrap;gap:8px}
.ttoc button{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--f-ui);color:var(--text);background:rgba(0,0,0,.4);border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer}
.ttoc button:hover{border-color:var(--gold)}
.ttoc b,.tnum{display:inline-grid;place-items:center;border-radius:50%;background:var(--gold);color:#1a0c00;font-family:var(--f-display);font-weight:400;box-shadow:0 3px 0 var(--gold-d)}
.ttoc b{width:24px;height:24px;font-size:18px;box-shadow:none}
.tstep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center;padding:44px 0;border-bottom:2px dashed var(--line);scroll-margin-top:72px}
.tstep:nth-of-type(even) .ttxt{order:2}
.tstep.wide{grid-template-columns:minmax(0,1fr)}
.tstep.wide .ttxt{order:0}
.tnum{width:46px;height:46px;font-size:32px;margin-bottom:12px}
.ttxt h2{font-size:48px;color:var(--gold);text-shadow:0 3px 0 var(--mult-d)}
.ttxt p{margin:0;max-width:58ch;font:600 19px/1.5 var(--f-txt);color:#d7dbf5}
.ttxt p b{color:var(--text)}
.ttxt .box,.tend .box{font-size:18px;padding:1px 6px 2px}
.demo{position:relative;overflow:hidden;--cw:76px;--ch:calc(var(--cw)*1.4);height:270px;padding:0}
.demo .card{transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
.dduel{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:16%;align-items:center;padding:0 18px}
.dlab{position:absolute;top:12px;left:0;right:0;margin:0;text-align:center;font:400 28px var(--f-display);color:var(--gold)}
.dpile{position:absolute;right:18px;bottom:16px;width:calc(var(--cw)*.5);height:calc(var(--cw)*.7);border-radius:5px;box-shadow:3px 3px 0 #161a3a,6px 6px 0 #0b0d20}
.dcount{position:absolute;right:8px;bottom:8px;font:400 20px/1 var(--f-display);color:var(--gold);background:#090a16;border:2px solid var(--gold);border-radius:8px;padding:1px 6px 2px}
.dtot{position:absolute;top:22px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:8px}
.dtot .atk{font-size:26px}
.dshield{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.dfev{position:absolute;inset:20px 22px 16px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end}
.fcol{display:flex;flex-direction:column;align-items:center;gap:6px}
.fcol i{width:100%;max-width:46px;border-radius:6px 6px 0 0;background:#363b78;transition:background .3s}
.fcol.on i{background:linear-gradient(var(--gold),var(--mult))}
.fv{font:400 24px var(--f-display);color:var(--muted)}.fcol.on .fv{color:var(--gold)}
.ft2{font-size:11px;color:var(--muted);white-space:nowrap}
.dbin{position:absolute;right:calc(var(--cw)*.5 + 44px);top:22px;display:flex;gap:8px}
.dbin .bslot{width:calc(var(--cw)*.56);height:calc(var(--ch)*.56);aspect-ratio:auto;max-width:none}
.combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:22px}
.combo{--cw:82px;--ch:calc(var(--cw)*1.4)}
.cchain{display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:14px}
.cchain .card{position:relative;flex:0 0 auto;pointer-events:auto;cursor:zoom-in}
.arrow{font:400 34px var(--f-display);color:var(--gold)}
.combo h3{margin:0 0 4px;font:400 30px var(--f-display);color:var(--gold)}
.combo p{margin:0;font:600 16px/1.4 var(--f-txt);color:#cfd3f2}
.shot{margin:26px 0 0}
.shotimg{position:relative;border:3px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.45);background:#0b0c18}
.shotimg img{display:block;width:100%;height:auto}
.mark{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#1a0c00;font:400 24px var(--f-display);box-shadow:0 3px 0 var(--gold-d),0 0 0 4px rgba(0,0,0,.4)}
.shot figcaption{margin-top:12px;font:400 28px var(--f-display);color:var(--text)}
.marks{list-style:none;margin:8px 0 0;padding:0;counter-reset:m;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:8px 22px}
.marks li{counter-increment:m;display:flex;gap:10px;align-items:baseline;font:600 16px/1.35 var(--f-txt);color:#cfd3f2}
.marks li::before{content:counter(m);flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1a0c00;font:400 16px var(--f-display)}
.tend{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.tend h2{margin:0;color:var(--gold)}
.tend p{margin:0;max-width:60ch;font:600 17px/1.45 var(--f-txt);color:#cfd3f2}
@media (max-width:860px){
  .shop,.pcols,.auth{grid-template-columns:minmax(0,1fr)}
  .tstep{grid-template-columns:minmax(0,1fr);gap:18px;padding:32px 0}
  .tstep:nth-of-type(even) .ttxt{order:0}
  .demo{--cw:56px;height:240px}
  .ttxt h2{font-size:40px}
  .spv{position:static}
  .aside .hfan{display:none}
  .auth{gap:24px}
}
@media (max-width:560px){
  .podium{gap:8px}.pod{padding:12px 6px}.prt{font-size:28px}
  .hist li{grid-template-columns:82px minmax(0,1fr) auto;gap:8px}.hcoin{display:none}
  .out{font-size:18px}
  .avatar.big{width:64px;height:64px;font-size:44px}
  .page{padding-top:20px}
}


@media (max-width:760px){
  body{padding-block:8px}
  #stage{gap:7px}
  .row{grid-template-columns:minmax(0,1fr);gap:6px}
  .side{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who tot" "bar tot" "hpn atk";column-gap:10px;row-gap:3px;padding:6px 9px}
  .who{grid-area:who;font-size:11px}
  .hpbar{grid-area:bar;height:9px}
  .hpn{grid-area:hpn;font-size:22px}
  .tot{grid-area:tot}
  .atk{grid-area:atk;text-align:right;font-size:16px}
  .box{font-size:19px;padding:2px 5px 3px}
  .box.b{margin-left:4px}
  .x{font-size:16px}
  #divider{font-size:11px}
  .fev{font-size:16px}
  #controls{flex-wrap:wrap;gap:8px 12px}
  .binlab{display:none}
  #info{flex-basis:100%;order:-1;font-size:13px;min-height:2.6em}
  .btn{flex:1;padding:11px 16px;font-size:17px}
  #deckn{font-size:16px;right:-10px}
  #draftUI h2{font-size:30px}
}
/* Ecran large (16/9), facon Balatro : colonne cadree a gauche (panneaux serres autour du tour, defausse qui prend la place restante, Lancer),
   plateau au centre, colonne droite (aide a cote des chaines, gros deck a cote de la main).
   Les rangees et la barre de controles se dissolvent (display:contents) pour placer chaque element dans la grille du stage. */
@media (min-width:1100px) and (min-aspect-ratio:3/2){
  #stage{max-width:none;grid-template-columns:380px minmax(0,1fr) 260px;column-gap:32px;row-gap:8px;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"botPan botSlots help" "div . help" "mePan meSlots help" "bin hand deck" "go hand deck"}
  #stage::before{content:"";grid-column:1;grid-row:1/-1;margin:-12px -16px;background:#1b1e40;border-right:4px solid var(--line);box-shadow:6px 0 0 rgba(0,0,0,.35)}
  .row,#controls{display:contents}
  #botPan{grid-area:botPan;align-self:end}#mePan{grid-area:mePan;align-self:start}
  #botSlots{grid-area:botSlots}#meSlots{grid-area:meSlots}
  #divider{grid-area:div}
  #hand{grid-area:hand}
  #info{grid-area:help;align-self:center;font-size:16px;line-height:1.35}
  #bin{grid-area:bin;min-height:0;align-items:stretch}
  #divider{margin:8px 0}
  /* Panneau "Defausse" avec une fleche vers les emplacements */
  .binlab{align-self:center;position:relative;margin-bottom:16px;padding:3px 22px 5px;font-family:var(--f-display);font-size:26px;letter-spacing:.06em;line-height:1;color:var(--gold);
    background:var(--panel);border:2px solid var(--line);border-radius:8px;box-shadow:0 4px 0 rgba(0,0,0,.45)}
  .binlab::after{content:"";position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);border:9px solid transparent;border-top-color:var(--gold);border-bottom:0}
  .bslots{flex:1;min-height:0;justify-content:center;gap:8px}
  .bslot{height:100%;width:auto;aspect-ratio:5/7;max-width:calc(50% - 4px)}
  #go{grid-area:go;width:100%}
  #deck{grid-area:deck;align-self:center;justify-self:center;width:var(--cw);height:var(--ch)}
  #deck .dk{border-radius:calc(var(--cw)*.08)}
  #crt{background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 65%,rgba(0,0,0,.3) 100%)}
}
@media (prefers-reduced-motion:reduce){.hpbar .chunk{transition:none}}