/* ==========================================================================
   MOTORAUTO — Cartes v5 : face de carte reprise de zéro (étiquette de rareté, arrondis, niveaux, carte Légende).
   Chargé en dernier : remplace les couches de réglages précédentes.
   ========================================================================== */
.tcg { --r: 16px; border-radius: var(--r); }
.tcg-mini, .tcg.compact { --r: 11px; }
.tcg-big { --r: 22px; }
.tcg-art, .tcg-foil, .tcg-holo { border-radius: inherit; }

/* étiquette de rareté : pastille bien centrée, jamais plus large que la carte */
.tcg .tcg-rar {
  display: inline-flex; align-items: center; gap: .3em; box-sizing: border-box; height: auto; max-width: 58cqw;
  padding: .32em .8em; border-radius: 99px; line-height: 1; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  font-size: clamp(7px, 4.9cqw, 11px); color: #fff; background: linear-gradient(135deg, var(--rc), var(--rc2));
  border: 1px solid rgba(255,255,255,.28); text-shadow: 0 1px 1px rgba(0,0,0,.5); box-shadow: 0 2px 8px rgba(0,0,0,.45);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcg-common .tcg-rar { --rc: #64748b; --rc2: #334155; }
.tcg-rare .tcg-rar { --rc: #3b82f6; --rc2: #1e40af; }
.tcg-epic .tcg-rar { --rc: #a855f7; --rc2: #6b21a8; }
.tcg-legendary .tcg-rar { --rc: #f59e0b; --rc2: #c2410c; }
.tcg-shiny .tcg-rar { background: linear-gradient(100deg, #ff5f6d, #ffc371, #7bffb2, #5ac8fa, #a78bfa); color: #111; text-shadow: none; }
.tcg-special .tcg-rar { --rc: #94a3b8; --rc2: #475569; }
.tcg-mine .tcg-rar { --rc: #14b8a6; --rc2: #0f766e; }
.tcg.locked .tcg-rar { background: #334155; border-color: rgba(255,255,255,.12); }
.tcg .tcg-no { display: inline-flex; align-items: center; line-height: 1; padding: .3em .55em; border-radius: 99px; background: rgba(0,0,0,.5); font-weight: 800; }
.tcg .tcg-dup { display: inline-flex; align-items: center; line-height: 1; padding: .3em .6em; }

/* niveaux : anneau intérieur, distinct du cadre de rareté (bronze, argent, or, platine) */
.tcg .tcg-frame { position: absolute; z-index: 6; pointer-events: none; inset: 2.4cqw; border: 0; box-shadow: none; border-radius: max(3px, calc(var(--r) - 2.4cqw)); border-image: none; }
.tcg .tcg-frame.lv2 { box-shadow: inset 0 0 0 .7cqw #cd7f32, inset 0 0 6cqw -2cqw rgba(205,127,50,.7); }
.tcg .tcg-frame.lv3 { box-shadow: inset 0 0 0 .8cqw #e2e8f0, inset 0 0 8cqw -2cqw rgba(226,232,240,.6); }
.tcg .tcg-frame.lv4 { box-shadow: inset 0 0 0 1cqw #fbbf24, inset 0 0 10cqw -2cqw rgba(251,191,36,.8), 0 0 8cqw -3cqw #fbbf24; }
.tcg .tcg-frame.lv5 { box-shadow: inset 0 0 0 1.2cqw #a5f3fc, inset 0 0 0 2.2cqw rgba(167,139,250,.55), inset 0 0 12cqw -2cqw rgba(167,139,250,.9); overflow: hidden; }
.tcg .tcg-frame.lv5::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); transform: translateX(-120%); }
.tcg-grid .tcg:hover .tcg-frame.lv5::after, .tcg-big .tcg-frame.lv5::after, .tcg-3d .tcg-frame.lv5::after { animation: shine 2.6s ease-in-out infinite; }
.tcg.lvl5 { box-shadow: 0 14px 30px -12px rgba(167,139,250,.7), 0 0 0 1px rgba(255,255,255,.1) inset; }

/* LÉGENDE : noir, rouge profond et or massif. Rien à voir avec le Légendaire (orange) ni le Shiny (arc-en-ciel). */
.tcg-mythic {
  --rc: #f5d061; --rc2: #8a5a00; --r: 18px;
  background: radial-gradient(120% 75% at 50% 0%, #6b1414 0%, #2a0707 48%, #070303 100%);
  box-shadow: 0 16px 36px -14px rgba(245,208,97,.55), 0 0 0 1px rgba(245,208,97,.35) inset;
}
.tcg-mythic::before { padding: 3.5px; background: linear-gradient(135deg, #fff3b0 0%, #e0a800 22%, #7a4b00 45%, #ffe27a 60%, #b8860b 80%, #fff3b0 100%); }
.tcg-mythic .tcg-holo { display: none; }
.tcg-mythic .tcg-art::before { content: ""; position: absolute; inset: 3cqw; z-index: 3; border-radius: max(3px, calc(var(--r) - 5cqw)); box-shadow: inset 0 0 0 .5cqw rgba(245,208,97,.75), inset 0 0 14cqw -4cqw rgba(0,0,0,.65); pointer-events: none; }
.tcg-mythic .tcg-art img { filter: contrast(1.1) saturate(1.05) sepia(.12); }
.tcg-mythic .tcg-q { color: #f5d061; opacity: .75; }
.tcg-mythic .tcg-foil { opacity: .8; z-index: 4; background: linear-gradient(115deg, transparent 36%, rgba(255,232,150,.75) 50%, transparent 64%); }
.tcg-grid .tcg-mythic:hover .tcg-foil, .tcg-mythic.tcg-big .tcg-foil, .tcg-3d .tcg-mythic .tcg-foil, .flip.on .tcg-mythic .tcg-foil { animation: shine 3.2s cubic-bezier(.4,0,.2,1) infinite; }
.tcg-mythic .tcg-body { background: linear-gradient(180deg, transparent 0%, rgba(30,6,6,.8) 38%, rgba(8,3,3,.96) 100%); }
.tcg-mythic .tcg-body::before { content: ""; display: block; height: 1px; margin: 0 8% 1.6cqw; background: linear-gradient(90deg, transparent, #f5d061, transparent); }
.tcg-mythic .tcg-brand { color: #e8c764; letter-spacing: .24em; }
.tcg-mythic .tcg-name { color: #ffeeb5; text-shadow: 0 1px 0 #5a3500, 0 0 10px rgba(245,208,97,.35); letter-spacing: .02em; }
.tcg-mythic .tcg-stats i { background: linear-gradient(90deg, #8a5a00, #f5d061); }
.tcg-mythic .tcg-rar { background: linear-gradient(135deg, #0b0505, #2a0707); color: #f5d061; border: 1px solid #f5d061; text-shadow: none; box-shadow: 0 0 10px rgba(245,208,97,.5); }
.tcg-mythic .tcg-rar::before { content: "♛"; font-size: 1.15em; line-height: 1; }
.tcg-mythic .tcg-no { background: rgba(245,208,97,.16); color: #f5d061; border: 1px solid rgba(245,208,97,.5); }
.tcg-mythic.locked { filter: none; }
.tcg-mythic.locked .tcg-rar { background: #1a0a0a; color: #a8893a; border-color: #5a4a1a; }
.tcg-mythic .tcg-frame.lv2, .tcg-mythic .tcg-frame.lv3 { inset: 5.2cqw; }
.tcg-rar-chip.mythic { color: #f5d061; border-color: #f5d061; background: linear-gradient(135deg, #1a0505, #3a0a0a); font-weight: 800; }
.flip[data-r="mythic"] .flip-back { box-shadow: 0 0 0 2px #f5d061 inset, 0 0 30px -2px #f5d061; }

@media (prefers-reduced-motion: reduce) { .tcg .tcg-frame.lv5::after, .tcg-mythic .tcg-foil { animation: none !important; } }


/* Titres de succès */
.ttl { display: inline-block; margin-left: .45rem; padding: .08rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; vertical-align: middle; line-height: 1.5; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.ttl-silver { color: #cbd5e1; background: color-mix(in srgb, #94a3b8 14%, transparent); }
.ttl-gold { color: #fbbf24; background: color-mix(in srgb, #fbbf24 14%, transparent); }
.ttl-master { color: #34d399; background: color-mix(in srgb, #34d399 14%, transparent); }
.ttl-legend { color: #1a1204; background: linear-gradient(120deg, #fde68a, #f59e0b 55%, #fcd34d); border-color: #b45309; }
.cg-titles { margin: .2rem 0 .8rem; }
.ttl-pick { display: flex; flex-direction: column; gap: .4rem; }
.ttl-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.ttl-opt { font: inherit; font-size: .8rem; font-weight: 700; padding: .35rem .8rem; min-height: 34px; border-radius: 999px; border: 1px solid var(--stroke-line); background: var(--bg-surface); color: inherit; cursor: pointer; }
.ttl-opt[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }


/* Légende non découverte : silhouette très floutée, nom et chiffres cachés */
.tcg-mythic.locked .tcg-art { overflow: hidden; }
.tcg-mythic.locked .tcg-art img, .tcg-mythic.locked .tcg-art img.tcg-ghost { filter: blur(14px) brightness(.55) saturate(.7) !important; opacity: 1 !important; transform: scale(1.18); }
.tcg-mythic.locked .tcg-q-over { color: #f5d061; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.tcg-mythic.locked .tcg-name { letter-spacing: .12em; }

/* Pagination des cartes (25 par page) */
.cg-pager { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; width: 100%; margin: .8rem 0 .2rem; }
.cg-pg-n { font-size: .85rem; font-weight: 700; color: var(--color-muted); min-width: 6.5rem; text-align: center; }
.tcg-strip .cg-pager { flex: 0 0 100%; }
#pub-cards-strip { flex-wrap: wrap; overflow: visible; }

/* Jouer › Cartes : blocs bien espacés */
#cg-shop, #cg-mine, #cg-mine-top { display: grid; gap: 1.1rem; min-width: 0; }
#cg-shop[hidden], #cg-mine[hidden] { display: none; }
#cg-shop > *, #cg-mine > *, #cg-mine-top > * { margin: 0; }
.cg-free { gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-block { padding: 1.15rem; gap: 1rem; }
.cg-packs, .cg-albumgrid, .cg-mlist, .cg-mc-row { gap: .8rem; }
.cg-tabs { margin-bottom: .2rem; }

/* Dos des cartes à l'ouverture d'un pack */
.tcg-flips .flip-back { --fbr: var(--ring, #ef4444); position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; overflow: hidden; border: 0; border-radius: 16px; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(239,68,68,.22), transparent 55%), repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 3px, transparent 3px 6px), repeating-linear-gradient(-45deg, rgba(0,0,0,.35) 0 3px, transparent 3px 6px), linear-gradient(160deg, #1b1b21, #09090b 70%);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.16) inset, 0 12px 30px -12px rgba(0,0,0,.8); }
.tcg-flips .flip-back::after { content: none; }
.tcg-flips .flip-back .fb-frame { position: absolute; inset: 7%; border-radius: 11px; border: 1px solid rgba(239,68,68,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 0 22px -8px rgba(239,68,68,.5); pointer-events: none; }
.tcg-flips .flip-back .fb-frame::before, .tcg-flips .flip-back .fb-frame::after { content: ""; position: absolute; width: 14%; height: 2px; background: #ef4444; left: 50%; transform: translateX(-50%); }
.tcg-flips .flip-back .fb-frame::before { top: -1.5px; } .tcg-flips .flip-back .fb-frame::after { bottom: -1.5px; }
.tcg-flips .flip-back .fb-mark { width: 46%; height: auto; fill: #ef4444; filter: drop-shadow(0 4px 14px rgba(239,68,68,.55)); }
.tcg-flips .flip-back b { font-size: clamp(.62rem, 2.2vw, .95rem); letter-spacing: .14em; font-weight: 900; color: #fff; line-height: 1; }
.tcg-flips .flip-back b span { color: #ef4444; }
.tcg-flips .flip-back small { font-size: clamp(.44rem, 1.5vw, .62rem); letter-spacing: .16em; text-transform: uppercase; color: #8d8d99; font-weight: 700; }
.tcg-flips .flip-back .fb-shine { position: absolute; inset: -20% 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg); animation: fbShine 3.2s ease-in-out infinite; pointer-events: none; }
.tcg-flips .flip:nth-child(2n) .fb-shine { animation-delay: .6s; } .tcg-flips .flip:nth-child(3n) .fb-shine { animation-delay: 1.2s; }
@keyframes fbShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.tcg-flips .flip:not(.on):hover .flip-in { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .tcg-flips .flip-back .fb-shine { animation: none; } }