/* v2.2.1 — correctifs : guide du didacticiel, images, cartes 3D. */

/* ---------- images des cartes : ni enregistrer, ni glisser, ni appui long ---------- */
img,canvas{-webkit-touch-callout:none;-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}
.card img,.ca img,.cb img,.rcw img,.rv img{pointer-events:none}
.card,.rv{-webkit-touch-callout:none}

/* ---------- guide du didacticiel : compact, défilable, déplaçable ---------- */
#tuto{max-height:36vh;overflow:auto;font-size:.86rem;line-height:1.35;z-index:60}
#tuto .v2-coh{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
#tuto .v2-coh:active{cursor:grabbing}
#tuto.min{max-height:none;overflow:visible}
#tuto p{margin:.35em 0}

/* ---------- cartes 3D : glisser au doigt ---------- */
.rv{touch-action:none}
#sheet .sl .x-tl{touch-action:pan-y}

/* ---------- bulle d'indice (n'intercepte aucun toucher, disparaît toute seule) ---------- */
.v22toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:400;max-width:90vw;padding:7px 14px;border-radius:99px;background:#000b;color:#fff;font-size:.8rem;font-weight:700;text-align:center;pointer-events:none;box-shadow:0 4px 16px #000a;animation:v22in .3s ease-out both;transition:opacity .5s}
.v22toast.off{opacity:0}
@keyframes v22in{from{opacity:0;transform:translate(-50%,-8px)}}

/* ---------- carte : l'image reste DANS son cadre, et n'est plus touchée par les effets de couleur ---------- */
/* 1. l'image est rognée de façon fiable à la fenêtre (même arrondie) pendant l'inclinaison 3D */
.card .ca{overflow:hidden;contain:paint;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
/* 2. l'image passe AU-DESSUS des calques de brillance / hologramme / reflets (z-index 3) ; le cadre, les bordures, ornements,
      plaques de nom et pastilles (z-index ≥ 4) gardent tous leurs effets */
.card .ca{z-index:4}
/* 3. plus de filtre ni de rotation de teinte sur l'image elle-même */
.card .ca,.card .ca img{filter:none!important}
.card.x-ch .ca,.card.x-om .ca{animation:none!important}

/* 4. la carte entière rogne tout ce qu'elle contient à ses coins arrondis, même en 3D avec des calques à mélange de couleurs (mix-blend-mode)
      qui font parfois « fuir » l'image hors du cadre ; son ombre extérieure, elle, reste visible */
.card{contain:paint;isolation:isolate}
.card>i{border-radius:inherit}
.card img{max-width:100%}

/* ---------- combat sur mobile (portrait) : la barre d'attaques ne dépasse plus de l'écran ----------
   Le « ? » passe dans le coin du bouton (il ne prend plus de largeur), et chaque attaque reçoit une part égale de la ligne. */
@media (max-width:520px) and (orientation:portrait){
  .ab,.abs{width:100%;max-width:100%;min-width:0}
  .abs{flex-wrap:nowrap;gap:6px}
  .abs>.vw{flex:1 1 0;min-width:0;max-width:100%}
  .abs .vw .vat{flex:1 1 0;width:100%;min-width:0;max-width:100%;padding:6px 8px}
  .abs .vw .vat .vn{min-width:0;max-width:100%;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;text-align:center}
  .abs .vw .qm{position:absolute;order:0;margin:0;left:-5px;top:-7px;width:22px;height:22px}
  .abs>.abt.vfi{flex:0 0 auto;max-width:25%;padding:5px 8px}
}
/* v4.2.1 — lecteur de cri (fiche de la carte) */
.btn.cry{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;isolation:isolate}
.btn.cry .cy-i{font-size:.9em}
.btn.cry .cy-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#c6ff3d,#7dff6a);transform-origin:left;transform:scaleX(0);z-index:-1}
.btn.cry.on{box-shadow:0 0 0 2px #c6ff3d66,0 0 18px #c6ff3d33}
.btn.cry.ld{opacity:.6;pointer-events:none}