/* ============================================================
   CSS partagé entre tous les modules TCG — voir docs/architecture/ARCHITECTURE_TCG.md (§7)
   ============================================================
   Contenu migré depuis assets/css/island/pages/tcg.css (déplacement pur,
   aucune règle modifiée) : layout général, sidebar, cartes/rareté génériques,
   tabs, modales, formulaires, boutons, toast, visionneuse de carte — tout ce
   qui est utilisé par au moins deux modules. */

:root {
  --tcg-radius-pill: 999px;
  --tcg-radius-soft: 20px;
  --tcg-radius-tight: 10px;
  --tcg-duration-fast: 180ms;
  --tcg-duration-base: 240ms;
  --tcg-duration-seuil: 320ms;
  --tcg-ease-out: cubic-bezier(.16,1,.3,1);
  --tcg-ease-inout: cubic-bezier(.4,0,.2,1);
}
.tcg-glass { background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:20px; }
.tcg-glass-bright { background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.05)); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.18); border-radius:20px; }
.tcg-page-shell { position:relative; isolation:isolate; }
.tcg-page-shell::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:28px; background: radial-gradient(120% 90% at 0% 0%, rgba(96,165,250,.14), transparent 56%), radial-gradient(110% 80% at 100% 0%, rgba(251,146,60,.14), transparent 58%), radial-gradient(90% 70% at 50% 100%, rgba(212,165,212,.22), transparent 62%), linear-gradient(160deg, rgba(10,20,40,.6) 0%, rgba(20,10,35,.55) 45%, rgba(6,16,30,.65) 100%); pointer-events:none; }
.tcg-app-layout { display:flex; align-items:flex-start; gap:20px; }
.tcg-sidebar { width:240px; position:sticky; top:112px; align-self:flex-start; padding:14px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.tcg-sidebar-user { margin-bottom:12px; padding:10px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); }
.tcg-sidebar-user-head { display:flex; align-items:center; gap:10px; }
.tcg-sidebar-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.25); flex-shrink:0; }
.tcg-sidebar-avatar-fallback { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:rgba(212,165,212,.95); background:rgba(212,165,212,.15); border:1px solid rgba(212,165,212,.35); }
.tcg-sidebar-user-name { color:white; font-size:.86rem; font-weight:600; line-height:1.2; }
.tcg-sidebar-user-role { color:rgba(255,255,255,.45); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.tcg-sidebar-logout { margin-top:10px; width:100%; display:inline-flex; justify-content:center; align-items:center; gap:6px; border-radius:10px; padding:7px 10px; text-decoration:none; color:#fca5a5; font-size:.78rem; border:1px solid rgba(239,68,68,.3); background:rgba(239,68,68,.12); }
.tcg-sidebar-logout:hover { background:rgba(239,68,68,.2); }
.tcg-sidebar-title { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:2px 4px 12px; }
.tcg-side-btn { width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; color:rgba(255,255,255,.65); border:1px solid transparent; transition:all .2s; text-align:left; font-size:.92rem; }
.tcg-side-btn:hover { color:white; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }
.tcg-side-btn.active { color:white; background:rgba(212,165,212,.2); border-color:rgba(212,165,212,.45); box-shadow:0 0 18px rgba(212,165,212,.2); }
.tcg-content { flex:1; min-width:0; }
.tcg-subnav { display:none; margin-bottom:8px; }
.tcg-subnav.active { display:flex; }
.tcg-dashboard-panel { display:none; }
.tcg-dashboard-panel.active { display:block; }
.tcg-mobile-sidebar-toggle { display:none; }
.tcg-sidebar-overlay { display:none; }
@media (max-width: 1279px) {
  .tcg-sidebar { width:78px; padding:10px; }
  .tcg-sidebar-title { display:none; }
  .tcg-sidebar-user { padding:8px 6px; }
  .tcg-sidebar-user-head { justify-content:center; }
  .tcg-sidebar-user-name,
  .tcg-sidebar-user-role,
  .tcg-sidebar-logout span { display:none; }
  .tcg-sidebar-logout { padding:7px; font-size:.92rem; }
  .tcg-side-btn { justify-content:center; padding:11px 8px; font-size:0; }
  .tcg-side-btn span { font-size:0; }
  .tcg-side-btn strong { font-size:1.08rem; line-height:1; }
}
@media (max-width: 1023px) {
  .tcg-app-layout { position:relative; }
  .tcg-mobile-sidebar-toggle { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:white; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }
  .tcg-sidebar { position:fixed; top:0; left:0; height:100dvh; width:min(82vw, 320px); z-index:220; border-radius:0 18px 18px 0; transform:translateX(-104%); transition:transform .24s ease; overflow-y:auto; padding-top:86px; }
  .tcg-sidebar.open { transform:translateX(0); }
  .tcg-sidebar-title { display:block; margin:0 6px 14px; }
  .tcg-sidebar-user { padding:10px; }
  .tcg-sidebar-user-head { justify-content:flex-start; }
  .tcg-sidebar-user-name,
  .tcg-sidebar-user-role,
  .tcg-sidebar-logout span { display:block; }
  .tcg-sidebar-logout { font-size:.78rem; }
  .tcg-side-btn { justify-content:flex-start; font-size:.92rem; }
  .tcg-side-btn span { font-size:inherit; }
  .tcg-side-btn strong { font-size:1rem; }
  .tcg-sidebar-overlay { display:block; position:fixed; inset:0; z-index:210; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s; }
  .tcg-sidebar-overlay.open { opacity:1; pointer-events:auto; }
}
.stat-number { font-family:'Playfair Display',serif; background:linear-gradient(135deg,#ffd9e0,#d4a5d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gold-text { background:linear-gradient(135deg,#f0d060,#f0a830); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pfill { background:linear-gradient(90deg,#d4a5d4,#FFB6C1); box-shadow:0 0 8px rgba(212,165,212,.5); transition:width .8s cubic-bezier(.4,0,.2,1); }
.pfill-gold { background:linear-gradient(90deg,#f0d060,#f0a830); box-shadow:0 0 8px rgba(240,200,60,.5); }
.pfill-blue { background:linear-gradient(90deg,#60a5fa,#3b82f6); box-shadow:0 0 8px rgba(96,165,250,.4); }
.card-thumb { width:56px; height:78px; object-fit:cover; border-radius:6px; flex-shrink:0; border:1px solid rgba(255,255,255,.15); }
.card-thumb-lg { width:80px; height:112px; object-fit:cover; border-radius:8px; border:1px solid rgba(255,255,255,.2); }
.card-item { border-radius:12px; padding:10px; transition:transform .2s,box-shadow .2s; position:relative; overflow:hidden; cursor:default; }
.card-item.owned { cursor:pointer; }
.card-item.owned:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
/* Matière par rareté dans la grille de navigation (pas seulement l'onglet Légendaires) :
   un signal propre par palier, motivé par le survol, jamais en boucle infinie non sollicitée. */
.card-item.owned.rarity-2:hover { box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 16px rgba(74,222,128,.28); }
.card-item.owned.rarity-3::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:linear-gradient(115deg,transparent 40%,rgba(147,197,253,.4) 50%,transparent 60%); background-size:250% 250%; background-position:-40% -40%; }
.card-item.owned.rarity-3:hover::before { opacity:1; animation:wishSweep .8s ease-out; }
.card-item.owned.rarity-4::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:linear-gradient(135deg,transparent 30%,rgba(255,220,80,.18) 50%,transparent 70%); background-size:200% 200%; }
.card-item.owned.rarity-4:hover::after { opacity:1; animation:shimmer 1.6s ease-in-out; }
.card-item.owned.rarity-4:hover { box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 20px rgba(240,200,60,.32); }
@media (prefers-reduced-motion: reduce) {
  .card-item.owned.rarity-3:hover::before,
  .card-item.owned.rarity-4:hover::after { animation:none; opacity:.5; }
}
/* Cartes non possédées : la rareté reste visible (ça motive la chasse), l'artwork non — c'est
   la carte elle-même qui doit rester une découverte, pas une case grisée. */
.card-item.unowned { opacity:.85; }
.card-item.unowned .card-thumb-wrap { position:relative; }
.card-item.unowned .card-thumb-wrap img { filter:grayscale(1) brightness(.28) contrast(1.15); }
.card-item.unowned .card-thumb-wrap::after { content:'?'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:700; color:var(--rarity-color,#fff); opacity:.45; pointer-events:none; text-shadow:0 0 14px var(--rarity-color,rgba(255,255,255,.4)); }
.rarity-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.rarity-dot-1 { background:#9ca3af; }
.rarity-dot-2 { background:#4ade80; box-shadow:0 0 6px rgba(74,222,128,.5); }
.rarity-dot-3 { background:#60a5fa; box-shadow:0 0 6px rgba(96,165,250,.5); }
.rarity-dot-4 { background:#f59e0b; box-shadow:0 0 10px rgba(245,158,11,.7); }
.legendary-glow { background:linear-gradient(135deg,rgba(240,208,60,.15),rgba(240,160,40,.08)); border:1px solid rgba(240,208,60,.4); box-shadow:0 0 20px rgba(240,200,60,.12); }
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
.leg-shine::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,transparent 30%,rgba(255,220,80,.18) 50%,transparent 70%); background-size:200% 200%; animation:shimmer 2.5s infinite; pointer-events:none; }
.tab-btn { position:relative; padding:8px 20px; border-radius:999px; font-size:.875rem; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.1); transition:all .2s; white-space:nowrap; }
.tab-btn:hover { color:white; background:rgba(255,255,255,.07); }
.tab-btn.active { background:rgba(212,165,212,.22); border-color:rgba(212,165,212,.5); color:white; box-shadow:0 0 16px rgba(212,165,212,.2); }
.tab-notif-dot { position:absolute; top:6px; right:8px; width:8px; height:8px; border-radius:50%; animation:tabNotifPop .18s ease-out; }
.tab-notif-dot.red { background:#ef4444; }
.tab-notif-dot.yellow { background:#F6D365; }
@keyframes tabNotifPop { from{transform:scale(.8)} to{transform:scale(1)} }
.tab-content { animation:fadeUp .25s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.tabs-scroll { overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.tabs-scroll::-webkit-scrollbar { display:none; }
.tabs-scroll > .tab-btn,
.tabs-scroll > .filter-pill { scroll-snap-align:start; }
.tabs-hint-mobile { display:none; }
.market-item { border-radius:14px; padding:14px 16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:background .2s,transform .2s,box-shadow .2s; }
.market-item:hover { background:rgba(255,255,255,.09); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.price-badge { background:linear-gradient(135deg,rgba(240,208,60,.2),rgba(240,160,40,.15)); border:1px solid rgba(240,208,60,.4); border-radius:8px; padding:2px 10px; font-weight:700; font-size:.82rem; color:#f0d060; white-space:nowrap; }
.filter-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-size:.9rem; border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.55); transition:all .18s; white-space:nowrap; max-width:100%; }
.filter-pill:hover,
.filter-pill.active { background:rgba(255,255,255,.1); color:white; border-color:rgba(255,255,255,.25); }
.lb-row { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; transition:background .2s; }
.lb-row:hover { background:rgba(255,255,255,.04); }
.lb-row.is-me { background:rgba(212,165,212,.1); border:1px solid rgba(212,165,212,.3); }
.stat-card { border-radius:16px; padding:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); transition:transform .2s; }
.stat-card:hover { transform:translateY(-2px); }
.col-card { border-radius:20px; padding:22px; position:relative; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:transform .25s,box-shadow .25s; box-shadow:0 4px 24px rgba(0,0,0,.3); }
.col-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.4); }
.trade-done { border-left:3px solid #3fb950; }
.trade-pending { border-left:3px solid #e3b341; }
.trade-refused,
.trade-cancelled { border-left:3px solid #f85149; }

/* Tuile de carte générique : utilisée par modules/echanges (sélection dans un
   trade) ET modules/dons (sélection multi-don) — partagée ici plutôt que
   dupliquée dans les deux, chaque module garde son propre état "sélectionné"
   (.trade-card-item.selected / .give-card-item.give-selected). */
.trade-card-item { cursor:pointer; border-radius:10px; padding:6px; border:2px solid transparent; transition:border-color .15s,box-shadow .15s; }
.trade-card-item:hover { border-color:rgba(255,255,255,.3); }
.trade-col-cards { flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent; min-height:0; }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); z-index:200; display:none; align-items:center; justify-content:center; padding:16px; opacity:0; transition:opacity var(--tcg-duration-base) var(--tcg-ease-out); }
.modal-bg.modal-open { opacity:1; }
.modal-box { background:linear-gradient(135deg,#2d1b3d,#1a0a1f); border:1px solid rgba(255,255,255,.2); border-radius:24px; padding:28px; max-width:480px; width:100%; max-height:85vh; overflow-y:auto; box-shadow:0 24px 64px rgba(0,0,0,.6); transform:scale(.96) translateY(8px); opacity:0; transition:transform var(--tcg-duration-base) var(--tcg-ease-out), opacity var(--tcg-duration-base) var(--tcg-ease-out); }
.modal-bg.modal-open .modal-box { transform:scale(1) translateY(0); opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .modal-bg, .modal-box { transition:none; }
}
.modal-box h3 { font-family:'Playfair Display',serif; font-size:1.3rem; color:white; margin-bottom:20px; }
.form-input { width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:10px 14px; color:white; font-size:.9rem; outline:none; transition:border-color .2s; }
.form-input:focus { border-color:rgba(212,165,212,.5); }
.form-input option { background:#2d1b3d; }
.form-label { display:block; color:rgba(255,255,255,.6); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.btn-primary { background:linear-gradient(135deg,#d4a5d4,#FFB6C1); color:#1a0a1f; font-weight:700; border-radius:10px; padding:10px 20px; font-size:.9rem; transition:opacity .2s,transform .2s; }
.btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.btn-danger { background:rgba(248,81,73,.2); color:#f85149; border:1px solid rgba(248,81,73,.3); border-radius:10px; padding:8px 16px; font-size:.85rem; transition:background .2s; }
.btn-danger:hover { background:rgba(248,81,73,.35); }
.btn-success { background:rgba(63,185,80,.2); color:#3fb950; border:1px solid rgba(63,185,80,.3); border-radius:10px; padding:8px 16px; font-size:.85rem; transition:background .2s; }
.btn-success:hover { background:rgba(63,185,80,.35); }
@keyframes cardFlip { 0%{transform:rotateY(90deg) scale(.85);opacity:0} 100%{transform:rotateY(0) scale(1);opacity:1} }
@keyframes resultBounce { 0%{transform:scale(0) rotate(-10deg)} 60%{transform:scale(1.15) rotate(3deg)} 100%{transform:scale(1) rotate(0)} }
/* wishSweep : balayage holographique rareté 3, partagé par la grille de cartes
   (.card-item.owned.rarity-3) et la visionneuse (.cardviewer-box.rarity-3). */
@keyframes wishSweep { 0%{opacity:0;background-position:-40% -40%} 15%{opacity:1} 70%{opacity:.7} 100%{opacity:0;background-position:140% 140%} }

@media (max-width: 1024px) {
  .trade-panel { height:auto; min-height:420px; }
  .hilo-chip { width:56px; height:56px; font-size:1rem; }
  .hilo-card { width:170px; max-width:42vw; }
  .hilo-result-stats { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .filter-pill { font-size:.82rem; padding:5px 10px; }
  .hilo-btn-h, .hilo-btn-l { min-height:86px; padding:10px 8px; }
  .hilo-result-icon { font-size:3.5rem; }
  .hilo-result-title { font-size:1.45rem; }
  .tabs-hint-mobile { display:block; color:rgba(255,255,255,.48); font-size:.75rem; margin:-2px 0 10px; }
}
#toast { position:fixed; bottom:24px; right:24px; z-index:999; max-width:320px; border-radius:14px; padding:14px 18px; font-size:.9rem; backdrop-filter:blur(12px); opacity:0; transform:translateY(12px) scale(.96); pointer-events:none; transition:opacity var(--tcg-duration-base) ease, transform var(--tcg-duration-base) var(--tcg-ease-out); }
#toast.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#toast.ok { background:rgba(63,185,80,.25); border:1px solid rgba(63,185,80,.4); color:#3fb950; }
#toast.err { background:rgba(248,81,73,.25); border:1px solid rgba(248,81,73,.4); color:#f85149; }
#toast.info { background:rgba(212,165,212,.25); border:1px solid rgba(212,165,212,.4); color:#d4a5d4; }
@media (prefers-reduced-motion: reduce) {
  #toast { transition:opacity 120ms ease; transform:none; }
}
.section-title { font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:600; color:white; display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.player-drop { position:absolute; top:100%; left:0; right:0; z-index:50; margin-top:4px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#2d1b3d,#1a0a1f); border:1px solid rgba(255,255,255,.15); box-shadow:0 12px 32px rgba(0,0,0,.5); max-height:220px; overflow-y:auto; }
.player-drop-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; transition:background .15s; }
.player-drop-item:hover { background:rgba(255,255,255,.08); }
.player-drop-item img,.player-drop-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.player-drop-avatar { display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.75rem; background:rgba(212,165,212,.25); color:rgba(212,165,212,.9); }

/* ══ Visionneuse de carte ═══════════════════════════════════════════════════
   Composant autonome construit sur le contrat modale du Core (.modal-bg/.modal-box,
   Sprint 1 : ouverture/fermeture, Échap, focus) mais avec sa propre identité et ses
   propres animations. Nommage volontairement générique (cardviewer-*, pas tcg-*) et
   structure en couches (stage > glow / frame > surface) pour rester réutilisable
   ailleurs (Île aux Shas) et extensible sans refonte : zoom/rotation → stage ou
   surface, variantes/signatures → frame, cartes animées → cardviewer-surface
   (img → video/canvas) sans toucher au reste du composant. */
.cardviewer-bg .cardviewer-box { position:relative; background:radial-gradient(140% 100% at 50% 0%, rgba(45,27,61,.96), rgba(10,6,15,.98)); border:1px solid rgba(255,255,255,.14); max-width:340px; padding:34px 26px 26px; text-align:center; }
.cardviewer-close { position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.6); font-size:.85rem; line-height:1; transition:background .2s,color .2s; }
.cardviewer-close:hover { background:rgba(255,255,255,.14); color:white; }
.cardviewer-stage { position:relative; width:180px; height:252px; margin:4px auto 18px; perspective:1000px; display:flex; align-items:center; justify-content:center; }
.cardviewer-glow { position:absolute; inset:-30px; border-radius:50%; background:radial-gradient(circle,var(--viewer-glow,rgba(212,165,212,.35)) 0%,transparent 72%); opacity:.7; pointer-events:none; }
.cardviewer-frame { position:relative; width:170px; height:238px; border-radius:14px; border:2px solid rgba(255,255,255,.22); overflow:hidden; box-shadow:0 0 22px 2px var(--viewer-glow,rgba(212,165,212,.35)), 0 20px 48px rgba(0,0,0,.5); opacity:0; transform:translateY(14px) scale(.94); }
.cardviewer-bg.modal-open .cardviewer-frame { animation:cardviewerRise .5s cubic-bezier(.16,1,.3,1) .1s both; }
@keyframes cardviewerRise { 0%{opacity:0;transform:translateY(14px) scale(.94)} 100%{opacity:1;transform:translateY(0) scale(1)} }
.cardviewer-surface { width:100%; height:100%; object-fit:cover; display:block; }
.cardviewer-plate { padding-top:2px; }
.cardviewer-name { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; color:white; }
.cardviewer-col { color:rgba(255,255,255,.4); font-size:.8rem; margin-top:2px; }
.cardviewer-rarity { font-size:.82rem; margin-top:6px; font-weight:600; }
.cardviewer-qty { color:rgba(255,255,255,.35); font-size:.75rem; margin-top:6px; }

/* Signature par rareté : le même vocabulaire que la grille et le rituel de vœu. */
.cardviewer-box.rarity-3 .cardviewer-frame::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(115deg,transparent 40%,rgba(147,197,253,.5) 50%,transparent 60%); background-size:250% 250%; background-position:-40% -40%; }
.cardviewer-bg.modal-open .cardviewer-box.rarity-3 .cardviewer-frame::after { animation:wishSweep 1s ease-out .55s both; }
.cardviewer-box.rarity-3 .cardviewer-frame:hover::after { opacity:1; animation:wishSweep .8s ease-out; }
.cardviewer-box.rarity-4 .cardviewer-frame::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(135deg,transparent 30%,rgba(255,220,80,.22) 50%,transparent 70%); background-size:200% 200%; }
.cardviewer-bg.modal-open .cardviewer-box.rarity-4 .cardviewer-frame::after { animation:shimmer 2.2s ease-in-out .45s 2 both; opacity:1; }
.cardviewer-box.rarity-4 .cardviewer-frame:hover::after { opacity:1; animation:shimmer 1.6s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .cardviewer-frame { opacity:1; transform:none; }
  .cardviewer-bg.modal-open .cardviewer-frame,
  .cardviewer-bg.modal-open .cardviewer-box.rarity-3 .cardviewer-frame::after,
  .cardviewer-bg.modal-open .cardviewer-box.rarity-4 .cardviewer-frame::after,
  .cardviewer-box.rarity-3 .cardviewer-frame:hover::after,
  .cardviewer-box.rarity-4 .cardviewer-frame:hover::after { animation:none; }
  .cardviewer-box.rarity-3 .cardviewer-frame::after,
  .cardviewer-box.rarity-4 .cardviewer-frame::after { opacity:.3; }
}
@media (max-width:480px) {
  .cardviewer-stage { width:150px; height:210px; }
  .cardviewer-frame { width:142px; height:198px; }
}


.tcg-embed .fixed.inset-0.overflow-hidden.pointer-events-none { display: none !important; }
.tcg-embed .pfill,
.tcg-embed .pfill-blue,
.tcg-embed .pfill-gold { transition: none !important; }
.tcg-embed .leg-shine::after,
.tcg-embed .particle,
.tcg-embed .animated-bg { animation-play-state: paused !important; }
.tcg-embed .tcg-glass,
.tcg-embed .tcg-glass-bright { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }