/* ==========================================================================
   MOTORAUTO — Cartes v2 : cadres par rareté, effet holographique, ouverture de pack en plusieurs temps.
   Règle de performance : seules les propriétés transform / opacity sont animées, les animations infinies
   n'existent que sur les grandes cartes (jamais dans la grille), la grille est rendue par paquets.
   ========================================================================== */

/* ---- la carte ---- */
.tcg {
  --rc: #94a3b8; --rc2: #475569; --glow: transparent;
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; border: 0; border-radius: 16px; overflow: hidden;
  container-type: inline-size; isolation: isolate; color: #fff; text-align: left;
  background: linear-gradient(165deg, color-mix(in srgb, var(--rc) 28%, #0b0f19) 0%, #0a0d16 62%);
  box-shadow: 0 10px 22px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s; -webkit-tap-highlight-color: transparent;
}
.tcg::before {                       /* cadre dégradé */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; z-index: 4; pointer-events: none;
  background: linear-gradient(150deg, var(--rc), var(--rc2) 45%, var(--rc) 70%, var(--rc2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tcg-rare { --rc: #3b82f6; --rc2: #1e3a8a; --glow: rgba(59,130,246,.45); }
.tcg-epic { --rc: #a855f7; --rc2: #581c87; --glow: rgba(168,85,247,.5); }
.tcg-legendary { --rc: #f59e0b; --rc2: #b45309; --glow: rgba(245,158,11,.55); }
.tcg-special { --rc: #f472b6; --rc2: #6d28d9; --glow: rgba(244,114,182,.55); }
.tcg-c-gold { --rc: #f59e0b; --rc2: #92400e; --glow: rgba(245,158,11,.55); } .tcg-c-ice { --rc: #38bdf8; --rc2: #0c4a6e; --glow: rgba(56,189,248,.5); }
.tcg-c-rose { --rc: #f472b6; --rc2: #9d174d; --glow: rgba(244,114,182,.5); } .tcg-c-emerald { --rc: #10b981; --rc2: #064e3b; --glow: rgba(16,185,129,.5); } .tcg-c-violet { --rc: #8b5cf6; --rc2: #4c1d95; --glow: rgba(139,92,246,.5); }
.tcg-rare, .tcg-epic, .tcg-legendary, .tcg-special, .tcg[class*="tcg-c-"] { box-shadow: 0 12px 26px -14px var(--glow), 0 0 0 1px rgba(255,255,255,.06) inset; }
@media (hover: hover) { .tcg:hover { transform: translateY(-5px); box-shadow: 0 20px 32px -14px var(--glow, rgba(0,0,0,.8)), 0 0 0 1px rgba(255,255,255,.08) inset; } }
.tcg:active { transform: scale(.98); }

.tcg-art { position: absolute; inset: 0 0 40% 0; aspect-ratio: auto; background: #0e1320; overflow: hidden; }
.tcg-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcg-art::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, #0a0d16); pointer-events: none; }
.tcg-q { font-size: 18cqw; opacity: .85; color: rgba(255,255,255,.55); }
.tcg-foil { position: absolute; inset: 0; opacity: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); transform: translateX(-110%); will-change: auto; }
.tcg-epic .tcg-foil, .tcg-legendary .tcg-foil, .tcg-special .tcg-foil, .tcg[class*="tcg-c-"] .tcg-foil { opacity: .55; }
.tcg .tcg-foil { animation: none; }
.tcg-big .tcg-foil, .tcg-grid .tcg:hover .tcg-foil, .flip.on .tcg .tcg-foil { animation: shine 3.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes shine { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(110%); } }
.tcg-holo { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; transition: opacity .25s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.7), transparent 38%), conic-gradient(from 210deg at var(--mx, 50%) var(--my, 30%), #ff7ad9, #ffd36b, #7bffb2, #6bd3ff, #b58bff, #ff7ad9); }
.tcg-epic .tcg-holo, .tcg-legendary .tcg-holo, .tcg-special .tcg-holo { opacity: .16; }
.tcg-tilting .tcg-holo { opacity: .38; }

.tcg-body { position: absolute; inset: auto 0 0 0; height: 44%; z-index: 2; padding: 0 7cqw 6cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.2cqw; background: none; }
.tcg-brand { font-size: max(9px, 6.4cqw); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-name { font-size: max(11px, 9.4cqw); font-weight: 800; line-height: 1.12; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.tcg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5cqw; margin-top: 1.5cqw; font-size: max(8px, 5.8cqw); color: rgba(255,255,255,.6); }
.tcg-stats span { position: relative; display: grid; padding-bottom: 2.6cqw; white-space: nowrap; }
.tcg-stats b { display: block; font-size: max(11px, 8.6cqw); color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tcg-stats i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.tcg-stats i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--rc), color-mix(in srgb, var(--rc) 50%, #fff)); transform-origin: left; transform: scaleX(var(--v, .4)); }
.tcg-note { font-size: max(9px, 5.8cqw); color: rgba(255,255,255,.7); line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tcg-rar { top: 5cqw; left: 5cqw; z-index: 5; padding: .15em .65em; font-size: max(8px, 5.2cqw); letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(135deg, var(--rc), var(--rc2)); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.tcg-no { top: 5.5cqw; right: 6cqw; z-index: 5; font-size: max(8px, 5.4cqw); letter-spacing: .04em; }
.tcg-dup { bottom: auto; top: 14cqw; right: 5cqw; z-index: 5; font-size: max(9px, 6cqw); background: rgba(0,0,0,.65); }
.tcg-wish { z-index: 5; }
.tcg-new-pill { position: absolute; z-index: 6; left: 50%; top: 5cqw; transform: translateX(-50%); padding: .12em .7em; border-radius: 99px; background: #22c55e; color: #052e16; font-size: max(8px, 5.2cqw); font-weight: 900; letter-spacing: .08em; }
.tcg.locked { filter: none; }
.tcg.locked::before { background: linear-gradient(150deg, #64748b, #1e293b); }
.tcg.locked .tcg-rar { background: #334155; }
.tcg.locked .tcg-body { opacity: .85; }
.tcg-ghost { filter: blur(8px) grayscale(.7) brightness(.7); transform: scale(1.18); }

/* tailles */
.tcg-mini { width: 96px; flex: none; }
.tcg-mini .tcg-stats, .tcg-mini .tcg-note, .tcg-mini .tcg-brand { display: none; }
.tcg-big { width: min(260px, 66vw); }

/* grille : rendu différé hors écran, aucune animation permanente */
.tcg-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 1rem .8rem; }
.tcg-grid .tcg, .tcg-sentinel { content-visibility: auto; contain-intrinsic-size: auto 200px; }
.tcg-grid.compact { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.tcg-grid.compact .tcg-stats, .tcg-grid.compact .tcg-note, .tcg-grid.compact .tcg-brand { display: none; }
.tcg-grid.big { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tcg-sentinel { grid-column: 1 / -1; height: 1px; }
.tcg-more { grid-column: 1 / -1; justify-self: center; }

/* ---- barre d'outils et vues ---- */
.tcg-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .2rem 0 1rem; }
.tcg-toolbar .seg { display: inline-flex; border: 1px solid var(--stroke-line); border-radius: 12px; overflow: hidden; background: var(--bg-surface); }
.tcg-toolbar .seg button { min-height: 40px; padding: 0 .85rem; border: 0; background: none; color: var(--color-secondary); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.tcg-toolbar .seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.tcg-toolbar select { min-height: 40px; max-width: 100%; border-radius: 12px; border: 1px solid var(--stroke-line); background: var(--bg-surface); color: inherit; font: inherit; font-size: .85rem; padding: 0 .7rem; }
.tcg-toolbar .grow { flex: 1; }
.tcg-tools-row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---- albums par marque ---- */
.tcg-albums { display: grid; gap: .7rem; }
.tcg-album { border: 1px solid var(--stroke-line); border-radius: var(--corner-md); background: var(--bg-surface); overflow: hidden; }
.tcg-album > summary { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; cursor: pointer; list-style: none; min-height: 56px; }
.tcg-album > summary::-webkit-details-marker { display: none; }
.tcg-album .ab-name { flex: 1; min-width: 0; font-weight: 800; }
.tcg-album .ab-name small { display: block; color: var(--color-muted); font-weight: 500; font-size: .75rem; }
.tcg-album .ab-bar { width: 90px; height: 6px; border-radius: 6px; background: var(--bg-elevated); overflow: hidden; flex: none; }
.tcg-album .ab-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #fbbf24); transform-origin: left; }
.tcg-album.done { border-color: #f59e0b; } .tcg-album.done .ab-name::after { content: " ★ Complet"; color: #f59e0b; font-size: .75rem; }
.tcg-album .tcg-grid { padding: 0 1rem 1rem; }

/* ---- ouverture de pack ---- */
.tcg-overlay { background: radial-gradient(ellipse at 50% 30%, rgba(28,30,52,.985), rgba(2,3,8,.99)); }
.tcg-overlay::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, var(--burst, #f59e0b), transparent 62%); }
.tcg-overlay.flash::before { animation: burst .95s ease-out; }
@keyframes burst { 0% { opacity: .95; } 100% { opacity: 0; } }
.tcg-overlay.flash { animation: none; }
.pk3 { display: grid; justify-items: center; gap: 1.2rem; padding: 1rem 0 2rem; }
.pk3-pack { position: relative; width: min(220px, 58vw); aspect-ratio: 5 / 7; border: 0; border-radius: 18px; cursor: pointer; color: #fff; font: inherit; overflow: hidden;
  background: linear-gradient(150deg, var(--accent), #1a0a0a 70%); box-shadow: 0 30px 60px -20px var(--accent), 0 0 0 2px rgba(255,255,255,.18) inset; animation: pkfloat 3s ease-in-out infinite; }
.pk3-pack.bonus { background: linear-gradient(150deg, #f59e0b, #451a03 72%); box-shadow: 0 30px 60px -20px #f59e0b, 0 0 0 2px rgba(255,255,255,.2) inset; }
.pk3-pack.test { background: linear-gradient(150deg, #8b5cf6, #1e1b4b 72%); box-shadow: 0 30px 60px -20px #8b5cf6, 0 0 0 2px rgba(255,255,255,.2) inset; }
.pk3-pack::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); animation: shine 2.8s ease-in-out infinite; }
.pk3-pack b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 1.4rem; font-weight: 900; letter-spacing: .12em; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.pk3-pack b span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .3em; opacity: .85; margin-top: .4rem; }
.pk3-pack::after { content: ""; position: absolute; left: 0; right: 0; top: 14%; height: 3px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 6px, transparent 6px 12px); }
.pk3-pack.shake { animation: pkshake .55s linear; }
.pk3-pack.gone { animation: pkgone .45s cubic-bezier(.5,0,.8,.4) forwards; pointer-events: none; }
@keyframes pkfloat { 50% { transform: translateY(-8px) rotate(.6deg); } }
@keyframes pkshake { 10%, 90% { transform: translateX(-2px) rotate(-1deg); } 30%, 70% { transform: translateX(5px) rotate(2deg); } 50% { transform: translateX(-6px) rotate(-2deg); } }
@keyframes pkgone { to { transform: translateY(-40px) scale(1.5); opacity: 0; } }

.tcg-flips { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 160px)); justify-content: center; gap: 1.2rem .9rem; padding-bottom: 1.4rem; width: 100%; }
.tcg-flips .flip { position: relative; width: 100%; min-width: 0; aspect-ratio: 5 / 7; perspective: 900px; }
.tcg-flips .flip.deal { animation: deal .6s cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes deal { from { opacity: 0; transform: translateY(60px) scale(.6) rotate(-8deg); } }
.tcg-flips .flip-in { position: absolute; inset: 0; aspect-ratio: auto; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.tcg-flips .flip-face { overflow: visible; }
.tcg-flips .flip-front { display: block; }
.tcg-flips .flip-front .tcg { height: 100%; width: 100%; border-radius: 16px; }
.flip-back { background: linear-gradient(150deg, #1f2937, #090c14 70%); border: 0; box-shadow: 0 0 0 2px var(--accent) inset; overflow: hidden; }
.flip-back::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 8px, transparent 8px 16px); }
.flip[data-r="rare"] { --ring: #3b82f6; } .flip[data-r="epic"] { --ring: #a855f7; } .flip[data-r="legendary"] { --ring: #f59e0b; } .flip[data-r="special"] { --ring: #f472b6; }
.flip[data-r="rare"] .flip-back, .flip[data-r="epic"] .flip-back, .flip[data-r="legendary"] .flip-back, .flip[data-r="special"] .flip-back { box-shadow: 0 0 0 2px var(--ring) inset, 0 0 22px -4px var(--ring); }
.flip-ring { position: absolute; inset: -6%; border-radius: 22px; pointer-events: none; opacity: 0; border: 3px solid var(--ring, transparent); }
.flip.on .flip-ring { animation: ring .9s ease-out; }
@keyframes ring { 0% { opacity: .95; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
.spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--ring, #fff); pointer-events: none; animation: spark .9s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.tcg-tag { position: absolute; bottom: -1.6rem; left: 0; right: 0; font-size: .72rem; font-weight: 800; letter-spacing: .06em; opacity: 0; transition: opacity .3s .5s; }
.flip.on .tcg-tag { opacity: 1; }
.pk3-sum { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .2rem; }
.pk3-sum span { padding: .3rem .8rem; border-radius: 99px; background: rgba(255,255,255,.1); font-size: .82rem; font-weight: 700; }
.pk3-best { font-size: .85rem; color: #fbbf24; font-weight: 700; }

/* ---- détail : carte 3D, retournable ---- */
.tcg-solo { display: grid; justify-items: center; perspective: 1000px; }
.tcg-3d { width: min(260px, 66vw); aspect-ratio: 5 / 7; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s linear; will-change: transform; }
.tcg-3d.rest { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tcg-3d-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.tcg-3d.back .tcg-3d-in { transform: rotateY(180deg); }
.tcg-3d-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; }
.tcg-3d-face .tcg { height: 100%; width: 100%; }
.tcg-3d-face.rev { transform: rotateY(180deg); padding: 7%; display: grid; align-content: start; gap: .5rem; text-align: left; overflow: auto; color: #e5e7eb; font-size: .78rem; line-height: 1.4;
  background: linear-gradient(165deg, #151b2c, #090c14); box-shadow: 0 0 0 2px var(--accent) inset; }
.tcg-3d-face.rev h3 { font-size: 1rem; line-height: 1.15; margin: 0; color: #fff; }
.tcg-3d-face.rev dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; margin: 0; } .tcg-3d-face.rev dt { color: #94a3b8; } .tcg-3d-face.rev dd { margin: 0; text-align: right; font-weight: 700; }
.tcg-3d-face.rev .ab-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.14); overflow: hidden; } .tcg-3d-face.rev .ab-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #fbbf24); }
.tcg-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.tcg-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 1.4rem; cursor: pointer; }
.tcg-nav button:disabled { opacity: .3; cursor: default; }

/* ---- bataille de cartes ---- */
.bt { display: grid; gap: 1rem; justify-items: center; width: min(100%, 720px); color: #fff; text-align: center; }
.bt-score { display: flex; gap: 1.4rem; align-items: baseline; font-size: .9rem; color: #cbd5e1; } .bt-score b { font-size: 1.8rem; color: #fff; }
.bt-field { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; justify-items: center; width: 100%; }
.bt-field .tcg { width: min(160px, 36vw); } .bt-vs { font-weight: 900; font-size: 1.2rem; color: #fbbf24; }
.bt-stats { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.bt-hand { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.bt-hand .pick { border-radius: 14px; }
.bt-hand .tcg { width: 88px; } .bt-hand .pick.used { opacity: .3; pointer-events: none; } .bt-hand .pick.on { border-color: #fbbf24; }
.bt-res { min-height: 1.6rem; font-weight: 800; font-size: 1.1rem; } .bt-res.win { color: #4ade80; } .bt-res.lose { color: #f87171; } .bt-res.tie { color: #fbbf24; }
.bt-hidden { position: relative; width: min(160px, 36vw); aspect-ratio: 5 / 7; border-radius: 16px; background: linear-gradient(150deg, #1f2937, #090c14 70%); box-shadow: 0 0 0 2px var(--accent) inset; display: grid; place-content: center; font-weight: 900; letter-spacing: .1em; }
.bt-note { font-size: .75rem; color: #94a3b8; }

/* ---- accueil de la collection ---- */
.tcg-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-surface)), var(--bg-surface)); }
.tcg-pack { border: 0; overflow: hidden; }
.tcg-pack::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
@media (hover: hover) { .tcg-pack.ready:hover::after { animation: shine 1.4s ease-in-out; } }
.tcg-pack.ready { animation: none; }
.tcg-pack.ready { box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .pk3-pack, .pk3-pack::before, .tcg-big .tcg-foil, .flip-ring, .spark, .tcg-flips .flip.deal { animation: none !important; }
  .tcg-3d, .tcg-3d-in, .tcg-flips .flip-in, .tcg { transition: none; }
}

/* ---- poussière : cristal vectoriel ---- */
.dust-ic { display: inline-block; vertical-align: -.2em; flex: none; filter: drop-shadow(0 1px 2px rgba(180, 83, 9, .4)); }
button.tcg-dust { font: inherit; color: inherit; background: var(--bg-elevated); border: 1px solid var(--stroke-line); border-radius: 14px; cursor: pointer; text-align: left; }
button.tcg-dust:hover { border-color: #f59e0b; }
button.tcg-dust b { display: inline-flex; align-items: center; gap: .3rem; }
.tcg-pack.shop.ready { background: linear-gradient(135deg, #f59e0b, #78350f); color: #fff; }
.tcg-pack.shop .pk-logo { display: grid; place-items: center; }
.pk3-pack.shop { background: linear-gradient(150deg, #fbbf24, #78350f 72%); box-shadow: 0 30px 60px -20px #f59e0b, 0 0 0 2px rgba(255,255,255,.2) inset; }
.pk3-wait { animation: pkwait 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes pkwait { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.025); } }
.pk3-loading .tcg-hint { opacity: .8; }
.dustlog { width: min(440px, 92vw); max-height: 82vh; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--stroke-line); border-radius: 18px; padding: 1.3rem; color: var(--color-ink); }
.dustlog h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .2rem; font-size: 1.3rem; }
.dustlog-bal { margin: 0 0 1rem; color: var(--color-muted); } .dustlog-bal b { color: var(--color-ink); font-size: 1.6rem; }
.dustlog ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.dustlog li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--stroke-line); }
.dustlog li small { display: block; color: var(--color-muted); font-size: .72rem; }
.dustlog li.gain b { color: #16a34a; } .dustlog li.spend b { color: #dc2626; }
.dustlog li b { display: inline-flex; align-items: center; gap: .25rem; }
@media (prefers-reduced-motion: reduce) { .pk3-wait { animation: none; } }

/* ---- voiture de la semaine (défis) ---- */
.chal-feat { margin: 0 0 1.6rem; padding: 1rem; border: 1px solid var(--stroke-line); border-radius: 20px; background: var(--bg-surface); }
.feat-head { display: flex; gap: 1rem; align-items: center; margin-bottom: .9rem; }
.feat-img { width: 96px; height: 64px; object-fit: cover; border-radius: 12px; flex: none; }
.feat-head h3 { margin: .25rem 0 .15rem; }
@media (max-width: 520px) { .feat-img { width: 76px; height: 52px; } }
.feat-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--stroke-line); }
.feat-wk small { display: block; color: var(--color-muted); }
.feat-row input { padding: .55rem .8rem; border-radius: 12px; border: 1px solid var(--stroke-line); background: var(--bg-core); color: var(--color-ink); font: inherit; min-width: 0; }
@media (max-width: 640px) { .feat-row { grid-template-columns: 1fr; } }
.tcg-drv { position: absolute; left: 4cqw; top: 4cqw; z-index: 3; display: grid; place-items: center; padding: 1.4cqw 2cqw; border-radius: 2cqw; background: rgba(0,0,0,.55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tcg-drv .drive-ic { display: block; width: 5.4cqw; height: auto; } .tcg-drv .drive-ic rect.on { fill: #fff; stroke: #fff; }
.tcg-mini .tcg-drv { display: none; }

/* Tour 21 — mosaïque de photos (cartes récompense de concours) & participations multi-photos */
.tcg-art.tcg-mosaic{display:grid;gap:2px;background:#000}
.tcg-art.tcg-mosaic img{width:100%;height:100%;object-fit:cover;min-height:0}
.tcg-art.tcg-mosaic.m2{grid-template-columns:1fr 1fr}
.tcg-art.tcg-mosaic.m3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.tcg-art.tcg-mosaic.m3 img:first-child{grid-row:1 / 3}
.tcg-art.tcg-mosaic.m4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.photo-open{position:relative}
.photo-count{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:.72rem;font-weight:700}
.contest-box .contest-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;margin-right:4px}
.lightbox.multi{overflow-y:auto;flex-direction:column;justify-content:flex-start;gap:10px;padding:56px 12px 24px}
.lightbox.multi img{max-height:none;max-width:min(100%,900px)}

/* Tour 22 — sets de cartes */
.tcg-sets { margin: 1rem 0; padding: .9rem 1rem; border-radius: 18px; background: color-mix(in srgb, var(--bg-surface) 70%, transparent); border: 1px solid var(--glass-line, var(--line)); display: grid; gap: .6rem; }
.sets-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sets-head .cta-btn { margin-left: auto; }
.set-row { display: grid; gap: .3rem; }
.set-row span { display: flex; justify-content: space-between; gap: .6rem; }
.set-row small { color: var(--color-secondary); }
.set-row.full .xp-bar i { background: linear-gradient(90deg, #f5b301, #ffd95a); }

/* hologramme des raretés hautes : le reflet arc-en-ciel suit le pointeur / l'inclinaison du téléphone */
.tcg .tcg-holo { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: .42; mix-blend-mode: color-dodge;
  --px: var(--hx, 50%); --py: var(--hy, 30%);
  background:
    radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.75), transparent 34%),
    linear-gradient(115deg, #ff5f6d 0%, #ffc371 18%, #7bffb2 36%, #5ac8fa 54%, #a78bfa 72%, #ff5f6d 90%);
  background-size: 100% 100%, 240% 240%; background-position: 0 0, var(--px) var(--py); transition: opacity .25s; }
.has-tilt .tcg .tcg-holo { --px: var(--tilt-x, 50%); --py: var(--tilt-y, 30%); }
.tcg-legendary .tcg-holo { opacity: .28; } .tcg-special .tcg-holo { opacity: .3; filter: saturate(.7); } .tcg-mythic .tcg-holo { opacity: .46; } .tcg-shiny .tcg-holo { opacity: .5; }
.tcg:hover .tcg-holo, .tcg-big .tcg-holo { opacity: .62; }
.tcg.locked .tcg-holo { display: none; }
@media (prefers-reduced-motion: reduce) { .tcg .tcg-holo { transition: none; opacity: .25; } }