/* Styles des cartes — repris de la page de la série 2 */
.badge {
  --rc: var(--r-F);
  display: grid; place-items: center;
  border-radius: 30%;
  font-family: var(--f-display); font-weight: 800; line-height: 1;
  color: #071020;
  background: var(--rc);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 14px color-mix(in srgb, var(--rc) 55%, transparent);
}
.badge.F { --rc: var(--r-F); } .badge.E { --rc: var(--r-E); } .badge.D { --rc: var(--r-D); } .badge.C { --rc: var(--r-C); }
.badge.B { --rc: var(--r-B); } .badge.A { --rc: var(--r-A); } .badge.S { --rc: var(--r-S); }
.badge.SSS { background: conic-gradient(from 0deg, #ffd36b, #ff8fbd, #c39bff, #3fd2f2, #5ff0c4, #ffd36b); letter-spacing: -0.04em; }


/* =========================================================
   LA CARTE — toutes les tailles en cqw (largeur de la carte)
   ========================================================= */
.pc {
  --tc: var(--t-N);
  --rc: var(--r-F);
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  container-type: inline-size;
  border-radius: 5.2% / 3.7%;
  padding: 1.6%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 85%, white), color-mix(in srgb, var(--tc) 45%, #0b1631) 45%, color-mix(in srgb, var(--tc) 80%, white));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-family: var(--f-body);
  color: var(--ink);
  user-select: none;
}
.pc.t-AERO { --tc: var(--t-AERO); } .pc.t-MECA { --tc: var(--t-MECA); } .pc.t-NEURO { --tc: var(--t-NEURO); }
.pc.t-ORBITE { --tc: var(--t-ORBITE); } .pc.t-FORGE { --tc: var(--t-FORGE); } .pc.t-ONDE { --tc: var(--t-ONDE); }
.pc.k-op { --tc: #d8e2ee; } .pc.k-mod { --tc: var(--cyan); }
.pc-in {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 4cqw;
  padding: 3.2cqw 3.6cqw 2.6cqw;
  display: flex; flex-direction: column; gap: 1.8cqw;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #0f1f3e, #081227);
}
.pc-top { display: flex; align-items: baseline; gap: 1.6cqw; min-width: 0; }
.pc-stage { flex: none; font-family: var(--f-display); font-weight: 700; font-size: 3.4cqw; letter-spacing: 0.08em; padding: 0.4cqw 1.6cqw; border-radius: 1.4cqw; background: color-mix(in srgb, var(--tc) 22%, transparent); color: var(--tc); align-self: center; }
.pc-name { flex: 1; min-width: 0; font-family: var(--f-display); font-weight: 800; font-size: 7.6cqw; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-hp { flex: none; font-family: var(--f-display); font-weight: 800; font-size: 7.4cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-hp small { font-size: 3.2cqw; letter-spacing: 0.08em; color: var(--mute); margin-right: 0.6cqw; }
.pc-top .tdot { width: 6.4cqw; height: 6.4cqw; flex: none; align-self: center; }
.pc-from { margin-top: -1cqw; font-size: 3.1cqw; color: var(--mute); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-art {
  position: relative; flex: 1 1 auto; min-height: 30cqw;
  border-radius: 3cqw;
  border: 0.6cqw solid color-mix(in srgb, var(--tc) 55%, transparent);
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, rgba(147, 171, 187, 0.08) 0 1px, transparent 1px 6cqw),
    repeating-linear-gradient(90deg, rgba(147, 171, 187, 0.08) 0 1px, transparent 1px 6cqw),
    #0a1630;
  display: grid; place-items: center; overflow: hidden;
}
.pc-art svg.gl { width: 86%; height: 92%; color: var(--tc); filter: drop-shadow(0 0 1.6cqw color-mix(in srgb, var(--tc) 60%, transparent)); }
.pc-art svg.gl * { vector-effect: non-scaling-stroke; }
.pc-art img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.pc-in > img.full { position: absolute; left: 0; top: 8%; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; z-index: 0; }
.pc-in.has-full::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 28, 0.9) 0%, rgba(6, 10, 28, 0.9) 8%, rgba(6, 10, 28, 0) 15%, rgba(6, 10, 28, 0) 44%, rgba(6, 10, 28, 0.88) 56%, rgba(6, 10, 28, 0.95) 66%, rgba(6, 10, 28, 0.97) 100%); }
.pc-in.has-full > .pc-top, .pc-in.has-full > .pc-from, .pc-in.has-full > .pc-talent, .pc-in.has-full > .pc-atks, .pc-in.has-full > .pc-foot { position: relative; z-index: 2; }
.pc-in.has-full > .pc-art { z-index: 2; }
.pc.r-SSS .pc-in.has-full .pc-art::before { display: none; }
.pc-in.has-full .pc-name { text-shadow: 0 0 12px rgba(6, 10, 28, 0.9); }
.pc-rank { position: absolute; left: 2cqw; top: 2cqw; width: 9cqw; height: 9cqw; font-size: 5.6cqw; }
.pc-rank.SSS { width: 15cqw; font-size: 5.4cqw; border-radius: 2.6cqw; }
.pc-talent { padding: 1.4cqw 2cqw; border-radius: 2cqw; background: color-mix(in srgb, var(--sakura) 14%, transparent); border: 0.4cqw solid color-mix(in srgb, var(--sakura) 40%, transparent); font-size: 3.15cqw; line-height: 1.25; }
.pc-talent b { color: var(--sakura); font-family: var(--f-display); font-size: 3.8cqw; letter-spacing: 0.04em; margin-right: 1cqw; }
.pc-atks { display: flex; flex-direction: column; gap: 1.4cqw; }
.atk { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1.8cqw; }
.atk .cost { display: flex; gap: 0.6cqw; }
.atk .cost .tdot { width: 5.4cqw; height: 5.4cqw; }
.atk b { font-family: var(--f-display); font-weight: 700; font-size: 5cqw; line-height: 1.05; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atk .dmg { font-family: var(--f-display); font-weight: 800; font-size: 6.6cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.atk p { grid-column: 1 / -1; margin: 0.6cqw 0 0; font-size: 3.15cqw; line-height: 1.25; color: #c7d8de; }
.pc-foot { margin-top: auto; display: flex; align-items: center; gap: 2.2cqw; padding-top: 1.6cqw; border-top: 0.3cqw solid var(--line-soft); font-size: 2.9cqw; color: var(--mute); white-space: nowrap; }
.pc-foot span { display: inline-flex; align-items: center; gap: 0.8cqw; }
.pc-foot .tdot { width: 4cqw; height: 4cqw; }
.pc-foot .no { margin-left: auto; font-family: var(--f-display); font-size: 3.4cqw; letter-spacing: 0.06em; color: var(--ink); }
.pc-foot .rp i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--t-N); display: inline-block; }
.pc-foot .set { width: 3.6cqw; height: 3.6cqw; color: var(--mint); }

/* Opérateur / Module */
.pc-ribbon { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-display); font-weight: 700; font-size: 3.6cqw; letter-spacing: 0.16em; color: var(--tc); }
.pc-ribbon em { font-style: normal; color: var(--mute); letter-spacing: 0.06em; }
.k-op .pc-name, .k-mod .pc-name { white-space: normal; font-size: 7cqw; }
.pc-effect { padding: 2.4cqw 2.6cqw; border-radius: 2.4cqw; background: rgba(6, 12, 24, 0.6); border: 0.4cqw solid var(--line-soft); font-size: 3.9cqw; line-height: 1.3; }
.pc-rule { font-size: 2.9cqw; color: var(--mute); line-height: 1.25; }
.k-op .pc-in { background: radial-gradient(120% 60% at 50% 0%, rgba(216, 226, 238, 0.18), transparent 70%), linear-gradient(180deg, #16243f, #0a1328); }
.k-mod .pc-in { background: radial-gradient(120% 60% at 50% 0%, rgba(63, 210, 242, 0.18), transparent 70%), linear-gradient(180deg, #0c2236, #071425); }

/* Brillances par rang */
.pc.r-A::after, .pc.r-S::after, .pc.r-SSS::after {
  content: ""; position: absolute; inset: 1.6%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 45%, rgba(95, 240, 196, 0.12) 52%, transparent 66%);
  background-size: 260% 100%; background-position: 100% 0;
  mix-blend-mode: screen; opacity: 0.0; transition: opacity 0.3s;
}
.pc.r-A:hover::after { opacity: 0.8; animation: shine 1.6s linear; }
.pc.r-S::after { opacity: 0.9; animation: shine 4.5s linear infinite; }
.pc.r-S { background: linear-gradient(150deg, #fff3c4, #ffd36b 30%, #9a6a10 50%, #ffd36b 70%, #fff3c4); }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -60% 0; } }

/* SSS : pleine illustration, cadre arc-en-ciel */
.pc.r-SSS { background: conic-gradient(from var(--ang, 0deg), #ffd36b, #ff8fbd, #c39bff, #3fd2f2, #5ff0c4, #ffd36b); animation: spin 6s linear infinite; box-shadow: 0 0 34px rgba(255, 211, 107, 0.35), 0 10px 28px rgba(0, 0, 0, 0.5); }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }
.pc.r-SSS::after { opacity: 1; animation: shine 3.2s linear infinite; background: linear-gradient(115deg, transparent 25%, rgba(255, 143, 189, 0.25) 38%, rgba(255, 255, 255, 0.35) 46%, rgba(63, 210, 242, 0.25) 54%, transparent 70%); background-size: 260% 100%; }
.pc.r-SSS .pc-in { background: radial-gradient(90% 55% at 50% 40%, color-mix(in srgb, var(--tc) 40%, transparent), transparent 70%), radial-gradient(60% 40% at 80% 90%, rgba(255, 143, 189, 0.25), transparent 70%), linear-gradient(180deg, #11163a, #070b1e); }
.pc.r-SSS .pc-art { border: 0; background: transparent; min-height: 52cqw; }
.pc.r-SSS .pc-art::before { content: ""; position: absolute; inset: -20%; background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, 0.07) 0 6deg, transparent 6deg 18deg); animation: spin2 40s linear infinite; }
@keyframes spin2 { to { transform: rotate(360deg); } }
.pc.r-SSS .pc-name { background: linear-gradient(90deg, #fff3c4, #ffd36b, #ff8fbd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc.r-SSS .pc-art svg.gl { width: 96%; height: 100%; filter: drop-shadow(0 0 2.4cqw color-mix(in srgb, var(--tc) 80%, transparent)) drop-shadow(0 0 5cqw rgba(255, 211, 107, 0.35)); }
.pc.r-SSS .pc-stage { background: rgba(255, 211, 107, 0.2); color: var(--gold); }


/* Pastilles de type */
.tdot { display: inline-grid; place-items: center; border-radius: 50%; background: var(--dc, var(--t-N)); color: #071020; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset; }
.tdot svg { width: 70%; height: 70%; }
.tdot.AERO { --dc: var(--t-AERO); } .tdot.MECA { --dc: var(--t-MECA); } .tdot.NEURO { --dc: var(--t-NEURO); }
.tdot.ORBITE { --dc: var(--t-ORBITE); } .tdot.FORGE { --dc: var(--t-FORGE); } .tdot.ONDE { --dc: var(--t-ONDE); } .tdot.N { --dc: var(--t-N); }


/* ---------- Rangs SS et NW-EX-7S ---------- */
:root { --r-SS: #dfe9f7; }
.badge.SS { --rc: var(--r-SS); background: linear-gradient(135deg, #ffffff, #b8c7dc 40%, #ffffff 55%, #93a6c2); letter-spacing: -0.04em; }
.badge.EX { color: #ffd36b; background: radial-gradient(circle at 30% 30%, #4a360c, #0b0b10 72%); box-shadow: 0 0 0 2px #ffd36b inset, 0 0 0 3px rgba(255, 143, 189, 0.7), 0 0 18px rgba(255, 211, 107, 0.7); letter-spacing: -0.02em; }
.pc-rank.SS, .pc-rank.EX { width: 12.5cqw; font-size: 5.4cqw; border-radius: 2.6cqw; }
.pc.r-SS { background: linear-gradient(150deg, #ffffff, #c9d6ea 28%, #6f84a6 50%, #c9d6ea 72%, #ffffff); box-shadow: 0 0 26px rgba(223, 233, 247, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45); }
.pc.r-SS::after { content: ""; position: absolute; inset: 1.6%; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.3) 45%, rgba(195, 155, 255, 0.16) 52%, transparent 66%); background-size: 260% 100%; mix-blend-mode: screen; opacity: 0.9; animation: shine 3.6s linear infinite; }
.pc.r-SS .pc-name { background: linear-gradient(90deg, #ffffff, #cfe0f5, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc.r-EX { background: conic-gradient(from var(--ang, 0deg), #120c02, #ffd36b, #fff3c4, #ff8fbd, #c39bff, #3fd2f2, #ffd36b, #120c02); box-shadow: 0 0 44px rgba(255, 211, 107, 0.55), 0 10px 28px rgba(0, 0, 0, 0.5); }
.pc.r-EX .pc-name { background: linear-gradient(90deg, #ffffff, #ffd36b, #fff3c4); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .pc.r-SS::after { animation: none; } }

/* ---------- Fluidité (2.2) : brillances et cadres animés uniquement en transform/opacity ---------- */
.pc { overflow: hidden; isolation: isolate; }
.pc.r-A::after, .pc.r-S::after, .pc.r-SS::after, .pc.r-SSS::after, .pc.r-EX::after {
  inset: 0; border-radius: 0; background-size: 100% 100%; background-position: 0 0; transform: translateX(-120%); will-change: transform; }
.pc.r-A:hover::after { animation: shineT 1.6s linear; }
.pc.r-S::after { animation: shineT 4.5s linear infinite; }
.pc.r-SS::after { animation: shineT 3.6s linear infinite; }
.pc.r-SSS::after, .pc.r-EX::after { animation: shineT 3.2s linear infinite; }
@keyframes shineT { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
/* cadre arc-en-ciel : un disque conique qui tourne derrière la carte (au lieu de recalculer le dégradé à chaque image) */
.pc.r-SSS, .pc.r-EX { animation: none; }
.pc.r-SSS::before, .pc.r-EX::before { content: ""; position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; z-index: -1; background: inherit; animation: spinC 6s linear infinite; will-change: transform; pointer-events: none; }
@keyframes spinC { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pc::after, .pc::before { animation: none !important; } }

/* ---------- Cartes Œuvre · édition Hanami 花見 : pleine illustration, texte sur verre dépoli ---------- */
.pc.oeuvre { padding: 1.4%; background: linear-gradient(150deg, #fff7dc 0%, #e2bd6a 18%, #8a6420 40%, #f4d98e 58%, #fff4d2 74%, #c99c46 100%); box-shadow: 0 0 0 0.3cqw rgba(255, 246, 216, 0.5) inset, 0 0 24px rgba(255, 211, 107, 0.3), 0 10px 28px rgba(0, 0, 0, 0.5); }
.pc.oeuvre.os2 { background: linear-gradient(150deg, #fff7dc 0%, #ffc9de 18%, #9b5a7a 40%, #f4d98e 58%, #fff4d2 74%, #e7a0bf 100%); }
.pc.oeuvre.os3 { background: conic-gradient(from 210deg, #fff3c4, #ffd36b, #ff9fc8, #fff3c4, #c39bff, #ffd36b, #fff3c4); box-shadow: 0 0 34px rgba(255, 211, 107, 0.5), 0 0 60px rgba(255, 143, 189, 0.25), 0 10px 28px rgba(0, 0, 0, 0.5); }
.pc-in.oe-in { padding: 0; gap: 0; border-radius: 4.2cqw; background: #050a16; }
.oe-in > .oe-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.oe-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 10, 22, 0), rgba(5, 10, 22, 0.5)); }
.oe-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 250, 230, 0.22) 46%, rgba(255, 190, 220, 0.14) 52%, transparent 64%); transform: translateX(-120%); mix-blend-mode: screen; will-change: transform; }
.pc.oeuvre:hover .oe-sheen { animation: shineT 1.6s linear; }
.pc.oeuvre.os2 .oe-sheen { animation: shineT 5s linear infinite; }
.pc.oeuvre.os3 .oe-sheen { animation: shineT 3.4s linear infinite; }
.oe-head { position: absolute; left: 3.2cqw; right: 3.2cqw; top: 3.2cqw; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.oe-head .pc-rank { position: static; }
.oe-stars { display: flex; gap: 0.4cqw; padding: 0.9cqw 2.4cqw; border-radius: 999px; background: rgba(8, 12, 26, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 0.35cqw solid rgba(255, 232, 170, 0.6); }
.oe-stars i { font-style: normal; color: #ffd36b; font-size: 4.4cqw; line-height: 1; text-shadow: 0 0 1.4cqw rgba(255, 211, 107, 0.95); }
.os3 .oe-stars i { color: #fff3c4; text-shadow: 0 0 1.4cqw #ffd36b, 0 0 2.6cqw rgba(255, 143, 189, 0.9); }
.oe-glass { position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: 2.6cqw; z-index: 2; display: flex; flex-direction: column; gap: 1.3cqw; padding: 2.6cqw 3cqw 2cqw; border-radius: 3.4cqw;
  background: linear-gradient(180deg, rgba(12, 18, 38, 0.34), rgba(6, 10, 24, 0.6)); -webkit-backdrop-filter: blur(9px) saturate(1.35); backdrop-filter: blur(9px) saturate(1.35);
  border: 0.3cqw solid rgba(255, 255, 255, 0.24); box-shadow: inset 0 0.3cqw 0 rgba(255, 255, 255, 0.16), 0 2cqw 6cqw rgba(0, 0, 0, 0.35); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.oe-glass .pc-foot { margin-top: 0.4cqw; border-top-color: rgba(255, 255, 255, 0.18); }
.oe-glass .pc-talent { background: rgba(255, 143, 189, 0.16); }
.oe-glass .pc-effect { background: rgba(6, 12, 24, 0.35); border-color: rgba(255, 255, 255, 0.16); }
.oe-glass .pc-name { white-space: nowrap; }
.oeno { font-weight: 800; background: linear-gradient(90deg, #fff3c4, #ffd36b, #ffb3d1); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 0.6cqw rgba(255, 211, 107, 0.7)); }
.mini.oe { border-color: #ffd36b; box-shadow: 0 0 0 1px rgba(255, 243, 196, 0.6), 0 0 12px rgba(255, 211, 107, 0.45); }
.mini.oe img { object-position: 50% 8%; }
@media (prefers-reduced-motion: reduce) { .oe-sheen { animation: none !important; } }

/* 2.5 — verre dépoli des Œuvres : une copie floutée de l'illustration, peinte une fois (au lieu d'un backdrop-filter recalculé à chaque image
   pendant le défilement et en combat). Même rendu, bien plus léger. */
.oe-glass { -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; background: #0b1226; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.35); }
.oe-frost { position: absolute; inset: -24px; z-index: -1; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; object-position: 50% 92%; filter: blur(9px) saturate(1.35); pointer-events: none; }
/* même image que l'illustration (même planche ou même fichier) : rien de plus à télécharger */
.oe-glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(12, 18, 38, 0.34), rgba(6, 10, 24, 0.6)); box-shadow: inset 0 0.3cqw 0 rgba(255, 255, 255, 0.16); }

/* ---------- 3.3 : cartes spéciales (S, SS, SSS, 7S) stables sur téléphone ----------
   Sur des téléphones Android, trois techniques faisaient clignoter le texte et le voile sombre des cartes spéciales
   (on voyait l'illustration entière par éclairs) : le nom en dégradé découpé dans les lettres (background-clip: text),
   la brillance en mode de fusion « screen », et le grand disque arc-en-ciel (160 % de la carte) qui tournait derrière,
   rogné aux coins arrondis. Remplacés par : nom en couleur pleine avec halo, brillance en simple transparence, cadre dont
   seul l'angle du dégradé tourne (--ang), le contenu de la carte gardé sur son propre calque pour ne jamais être redessiné. */
.pc.r-SS .pc-name, .pc.r-SSS .pc-name, .pc.r-EX .pc-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; }
.pc.r-SS .pc-name { color: #f4f8ff; text-shadow: 0 0 1.6cqw rgba(195, 155, 255, 0.6), 0 0.3cqw 0.9cqw rgba(6, 10, 28, 0.9); }
.pc.r-SSS .pc-name { color: #ffe39a; text-shadow: 0 0 1.8cqw rgba(255, 143, 189, 0.65), 0 0.3cqw 0.9cqw rgba(6, 10, 28, 0.9); }
.pc.r-EX .pc-name { color: #fff3c4; text-shadow: 0 0 2cqw rgba(255, 211, 107, 0.8), 0 0.3cqw 0.9cqw rgba(6, 10, 28, 0.9); }
.pc.r-A::after, .pc.r-S::after, .pc.r-SS::after, .pc.r-SSS::after, .pc.r-EX::after { mix-blend-mode: normal; backface-visibility: hidden; }
.pc.r-S::after { opacity: 0.7; }
.pc.r-SS::after, .pc.r-SSS::after, .pc.r-EX::after { opacity: 0.75; }
.pc.r-SSS::before, .pc.r-EX::before { content: none; animation: none; }
.pc.r-SSS, .pc.r-EX { animation: spin 6s linear infinite; }
.pc.r-S > .pc-in, .pc.r-SS > .pc-in, .pc.r-SSS > .pc-in, .pc.r-EX > .pc-in { will-change: transform; backface-visibility: hidden; }
/* dans les grilles (collection, boutique, decks…), le cadre arc-en-ciel reste immobile : seules les fiches et les ouvertures l'animent */
.cell .pc.r-SSS, .cell .pc.r-EX, .pick .pc.r-SSS, .pick .pc.r-EX, .sum-card .pc.r-SSS, .sum-card .pc.r-EX { animation: none; }
.cell .pc > .pc-in, .pick .pc > .pc-in, .sum-card .pc > .pc-in { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .pc.r-SSS, .pc.r-EX { animation: none; } }

/* ---------- 3.4 : miniatures (collection, boutique, profil, récap d'ouverture, Cueillette) ----------
   Demande de Gabriel : dans les listes, le texte cachait l'image. La miniature garde le haut (nom, stade, Intégrité) et le bas
   (faiblesse, repli, numéro) ; talent, attaques et effets ne sont plus que dans la fiche, quand on ouvre la carte. */
.pc.th .pc-talent, .pc.th .pc-atks, .pc.th .pc-effect, .pc.th .pc-from { display: none; }
.pc.th .pc-in { gap: 2.2cqw; }
.pc.th .pc-art img.art { object-position: 50% 30%; }
/* pleine illustration (SSS, 7S) : le voile sombre ne reste qu'en haut et en bas */
.pc.th .pc-in.has-full::before { background: linear-gradient(180deg, rgba(6, 10, 28, 0.88) 0%, rgba(6, 10, 28, 0.5) 10%, rgba(6, 10, 28, 0) 18%, rgba(6, 10, 28, 0) 78%, rgba(6, 10, 28, 0.6) 88%, rgba(6, 10, 28, 0.92) 100%); }
/* Œuvres : un bandeau de verre en bas, avec seulement le nom et le pied */
.pc.th.oeuvre .oe-glass { gap: 0.8cqw; padding: 2.2cqw 3cqw 1.8cqw; }
.pc.th.oeuvre .oe-glass .pc-foot { margin-top: 0; }
.k-op .pc-name, .k-mod .pc-name { line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }