:root {
  --minecraft-font: 'Courier New', Courier, monospace;
  --bg-color: #2c2c2c;
  --text-color: #ffffff;
  --gold-vibrant: #ffeb3b;
  --gold-deep: #fbc02d;
  --emerald-color: #2ecc71;
  --rarity-star-color: #9b59b6;
}
html {
  overflow-y: scroll; /* Force la présence de la barre de défilement pour éviter le saut de contenu */
}

body {
  margin: 0; padding: 0;
  font-family: var(--minecraft-font);
  background-color: var(--bg-color);
  background-image: linear-gradient(45deg, #252525 25%, transparent 25%), linear-gradient(-45deg, #252525 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #252525 75%), linear-gradient(-45deg, transparent 75%, #252525 75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 30px, 30px 30px, 30px 0;
  color: var(--text-color);
  scrollbar-gutter: stable;
}

#app { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px 20px; position: relative; }

header {
  display: flex; justify-content: space-between; align-items: center;
  background: #111; padding: 20px 40px; border-bottom: 4px solid #000;
  margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  position: sticky; top: 0; z-index: 1000;
}

header h1 { margin: 0; color: var(--emerald-color); text-shadow: 3px 3px #000; font-size: 1.5rem; }
.currency { display: flex; gap: 25px; font-weight: bold; font-size: 1.1rem; }

nav { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; z-index: 1100; position: relative; }

button {
  padding: 14px 28px; background: #5d5d5d; border: 4px solid #000;
  color: white; cursor: pointer; font-family: var(--minecraft-font);
  font-weight: bold; text-transform: uppercase;
  box-shadow: inset -4px -4px 0px rgba(0,0,0,0.4), 4px 4px 0px rgba(0,0,0,0.2);
  transition: all 0.1s;
}

button:hover { background: #777; transform: translateY(-2px); }
button.active { background: var(--emerald-color); box-shadow: inset -4px -4px 0px rgba(0,0,0,0.4), 0 0 15px rgba(46, 204, 113, 0.4); }
button:disabled { opacity: 0.5; cursor: not-allowed; background: #444 !important; }

select { padding: 12px; background: #111; color: white; border: 4px solid #000; font-family: var(--minecraft-font); }

.section-title {
  width: 100%; text-align: left; padding: 15px 25px;
  background: rgba(0,0,0,0.5); border-left: 8px solid var(--emerald-color);
  margin: 50px 0 25px 0; text-transform: uppercase; letter-spacing: 3px; font-size: 1.2rem;
}

.collection-stats {
  text-align: center; font-size: 1.5rem; margin: 20px 0; font-weight: bold;
  background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; border: 2px solid var(--emerald-color);
}
.collection-stats span { color: var(--emerald-color); font-size: 2rem; }

.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 25px; justify-items: center;
}

.card {
  position: relative; width: 180px; height: 250px;
  border-radius: 12px; border: 3px solid rgba(0,0,0,0.2);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden; box-sizing: border-box; padding: 15px 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  background-color: #444;
}

.card:hover { 
  transform: scale(1.08) translateY(-10px); 
  z-index: 10; 
  box-shadow: 0 20px 40px rgba(0,0,0,0.8); 
}

/* --- EFFET DE TRANSFORMATION GLOBALE (quand la Master Card est survolée) --- */
.ultimate-active .card {
  /* Texture Secrète Complète appliquée à TOUTES les cartes */
  background: linear-gradient(135deg, #ff00c1, #00d2ff, #ff00c1) !important;
  background-size: 200% 200% !important;
  animation: chromatic-bg 2s infinite linear !important;
  
  /* Bordure Magique */
  border: 5px solid transparent !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-image:
    linear-gradient(135deg, #ff00c1, #00d2ff, #ff00c1),
    linear-gradient(45deg, #ff00c1, #00d2ff, #ffffff, #00d2ff, #ff00c1) !important;
    
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.5) !important;
}

/* La Master Card garde son propre style blanc pur pour rester unique */
.ultimate-active .card.rarity-8 {
  background: radial-gradient(circle at center, #222 0%, #000 100%) !important;
  border-color: #ffffff !important;
  animation: none !important;
}


.card-name {
  width: 100%; text-align: center; font-size: 0.85rem; font-weight: 900;
  color: #fff; text-shadow: 2px 2px 0px #000; margin-bottom: 15px;
  height: 2.4rem; display: flex; align-items: center; justify-content: center; z-index: 2;
  text-transform: uppercase;
}

.card-admin-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #e74c3c;
  color: white;
  border: 2px solid white;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  padding: 0;
  line-height: 1;
}
.card-admin-delete:hover {
  background: #c0392b;
  transform: scale(1.1);
}

/* BACKGROUNDS PAR RARETÉ */
.rarity-1 { background: linear-gradient(135deg, #a0a0a0, #606060); border-color: #404040 !important; }
.rarity-2 { background: linear-gradient(135deg, #4cd137, #44bd32); border-color: #2d8a22 !important; }
.rarity-3 { background: linear-gradient(135deg, #00a8ff, #0097e6); border-color: #006eb3 !important; }
.rarity-4 { background: linear-gradient(135deg, #9c88ff, #8c7ae6); border-color: #5f4eb3 !important; }
.rarity-4-5 { background: linear-gradient(135deg, #6c5ce7, #8e44ad); border-color: #4b2c8a !important; }
.rarity-4-7 { background: linear-gradient(135deg, #e67e22, #d35400); border-color: #fff !important; box-shadow: 0 0 25px #d35400; }
.rarity-5 { background: radial-gradient(circle, #fff176, #ffd600, #ff8f00); border-color: #c4a000 !important; box-shadow: 0 0 25px #ffea00, inset 0 0 15px rgba(255,255,255,0.5); }
.rarity-5-5 { background: linear-gradient(135deg, #009432, #00ff88, #009432) !important; border: 4px solid #004d1a !important; box-shadow: 0 0 35px #00ff88, inset 0 0 20px rgba(255, 255, 255, 0.6) !important; }
.rarity-6 { background: radial-gradient(circle, #ff5252, #d32f2f, #1a1a1a); border: 4px solid #ff1744 !important; box-shadow: 0 0 35px #ff1744; }
.rarity-6-5 { 
  background: radial-gradient(circle, #ff00c1, #8e44ad, #1a1a2e) !important; 
  border: 5px solid #ff00c1 !important; 
  box-shadow: 0 0 35px rgba(142, 68, 173, 0.8), inset 0 0 20px rgba(255,255,255,0.4) !important; 
}
.rarity-6-8 { background: linear-gradient(135deg, #2c3e50, #000); border-color: #000 !important; box-shadow: 0 0 25px rgba(0,0,0,0.8); }
.rarity-5-8 { background: linear-gradient(135deg, #fff, #bdc3c7); border-color: #fff !important; box-shadow: 0 0 25px rgba(255, 255, 255, 0.6); }
.rarity-4-9 { background: linear-gradient(135deg, #7f8c8d, #34495e); border-color: #7f8c8d !important; box-shadow: 0 0 25px rgba(127,140,141,0.5); }

/* 7. SECRET */
.rarity-7 {
  background: linear-gradient(135deg, #ff00c1, #00d2ff, #ff00c1);
  background-size: 200% 200%;
  animation: chromatic-bg 4s infinite linear;
  border: 5px solid transparent !important;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: 
    linear-gradient(135deg, #ff00c1, #00d2ff, #ff00c1), 
    linear-gradient(45deg, #ff00c1, #00d2ff, #ffffff, #00d2ff, #ff00c1);
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.4);
}

/* EFFET SPECIFIQUE LINGOT D'OR SECRET - REVELE AU SURVOL */
.card-secret-gold:hover {
  background: radial-gradient(circle, #fff9c4, #fbc02d, #f57f17) !important;
  border: 5px solid #fff176 !important;
  box-shadow: 0 0 50px #ffd600, inset 0 0 30px rgba(255,255,255,0.8) !important;
  animation: none; /* On stoppe l'animation chromatique au survol */
}

.card-secret-gold:hover .mc-item {
  width: 130px !important; /* Devient plus gros au survol */
  height: 130px !important;
  filter: drop-shadow(0 0 15px #fff176) brightness(1.2);
  z-index: 3;
}

/* Rayons de soleil tournants révélés au survol */
.card-secret-gold:hover .card-image-container::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.3) 15deg, transparent 30deg);
  background-repeat: repeat;
  mask-image: radial-gradient(circle, black 30%, transparent 70%);
  animation: rotate-sunbeams 10s linear infinite;
  z-index: 1;
}

@keyframes rotate-sunbeams {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.card-secret-gold:hover::after {
  content: "✧ GOLDEN GOD ✧";
  position: absolute;
  bottom: 15px;
  font-size: 0.7rem;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-weight: bold;
  letter-spacing: 2px;
}

/* --- EFFET SPECIAL: THE ARMORER_S SOUL (ID 244) --- */
.card-armor-soul .mc-item {
  animation: subtle-vibration 0.2s infinite;
}

@keyframes subtle-vibration {
  0% { transform: translate(0,0); }
  25% { transform: translate(1.5px, 1.5px); }
  50% { transform: translate(-1.5px, -1.5px); }
  75% { transform: translate(1.5px, -1.5px); }
  100% { transform: translate(0,0); }
}

.card-armor-soul:hover {
  background: radial-gradient(circle, #2c3e50, #000) !important;
  border: 5px solid #fff !important;
  box-shadow: 0 0 50px rgba(255,255,255,0.8), inset 0 0 30px rgba(255,255,255,0.5) !important;
  animation: none;
}

.card-armor-soul:hover .mc-item {
  animation: armor-cycle 0.8s infinite steps(4);
  filter: drop-shadow(0 0 15px #fff) brightness(1.5);
  transform: scale(1.4) !important;
}

@keyframes armor-cycle {
  0% { content: url('cards_images/endium_chestplate.png'); }
  25% { content: url('cards_images/paladium_chestplate.png'); }
  50% { content: url('cards_images/netherite_chestplate.png'); }
  75% { content: url('cards_images/diamond_chestplate.png'); }
  100% { content: url('cards_images/endium_chestplate.png'); }
}

.card-armor-soul:hover::after {
  content: "∞ ALL ARMORS ∞";
  position: absolute;
  bottom: 15px;
  font-size: 0.7rem;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-weight: bold;
  letter-spacing: 2px;
}

/* SPECIAL EFFECTS */
.card:not(.locked).rarity-3::after, .card:not(.locked).rarity-4::after, .card:not(.locked).rarity-4-5::after, .card:not(.locked).rarity-6::after {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: rotate(45deg); animation: shine 4s infinite; pointer-events: none;
}
@keyframes shine { 0% { transform: translateX(-100%) rotate(45deg); } 20%, 100% { transform: translateX(100%) rotate(45deg); } }

.effect-gold::before, .effect-red-gold::before, .effect-immersive::before, .effect-black-gold::before, .effect-white-gold::before, .effect-gray-immersive::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(125deg, transparent 0%, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%, transparent 100%);
  background-size: 200% 200%; animation: gold-sweep 3s infinite linear; opacity: 0.6; pointer-events: none;
  z-index: 1;
}

.effect-immersive {
    animation: immersive-glow 3s infinite alternate !important;
}

@keyframes immersive-glow { from { filter: brightness(1); } to { filter: brightness(1.2) contrast(1.1); } }

.effect-gray-immersive {
    animation: gray-immersive-glow 3s infinite alternate !important;
}

@keyframes gray-immersive-glow { from { filter: brightness(1); } to { filter: brightness(1.2) contrast(1.1); } }

.effect-white-gold {
    border: 5px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-image:
        radial-gradient(circle, #ffffff, #bdc3c7, #2c3e50),
        linear-gradient(45deg, #ffffff, #7f8c8d, #ffffff, #bdc3c7) !important;
    background-size: 100% 100%, 200% 200% !important;
    animation: white-gold-glow 3s infinite alternate, chromatic-bg 3s infinite linear !important;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.5), 0 0 25px rgba(189, 195, 199, 0.4), inset 0 0 35px rgba(255,255,255,0.2) !important;
    position: relative;
}

.effect-white-gold::after {
    content: "✧";
    position: absolute;
    font-size: 110px;
    color: rgba(255,255,255,0.15);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
}

@keyframes white-gold-glow { from { filter: brightness(1); } to { filter: brightness(1.2) contrast(1.1); } }

.effect-black-gold {
    border: 5px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-image:
        radial-gradient(circle, #2c3e50, #000000, #1a1a1a),
        linear-gradient(45deg, #000000, #34495e, #000000, #2c3e50) !important;
    background-size: 100% 100%, 200% 200% !important;
    animation: black-gold-glow 3s infinite alternate, chromatic-bg 3s infinite linear !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(44, 62, 80, 0.9), inset 0 0 40px rgba(255,255,255,0.1) !important;
    position: relative;
}

.effect-black-gold::after {
    content: "✹";
    position: absolute;
    font-size: 120px;
    color: rgba(255,255,255,0.05);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

@keyframes black-gold-glow { from { filter: brightness(1); } to { filter: brightness(1.4) contrast(1.2); } }


.effect-immersive-orange { 
    background: radial-gradient(circle, #e67e22, #d35400, #1a1a1a) !important; 
    border: 4px solid #f39c12 !important; 
    box-shadow: 0 0 35px #e67e22, inset 0 0 15px rgba(255,255,255,0.3) !important; 
    animation: orange-immersive-glow 3s infinite alternate !important; 
}

@keyframes orange-immersive-glow { from { filter: brightness(1); } to { filter: brightness(1.1) contrast(1.1); } }

.effect-green-gold {
    background: radial-gradient(circle, #2ecc71, #27ae60, #0a192f) !important;
    border: 5px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-image:
        radial-gradient(circle, #2ecc71, #27ae60, #0a192f),
        linear-gradient(45deg, #2ecc71, #ffffff, #00ff88, #2ecc71) !important;
    background-size: 100% 100%, 200% 200% !important;
    animation: green-gold-glow 3s infinite alternate, chromatic-bg 3s infinite linear !important;
    box-shadow: 0 0 50px rgba(46, 204, 113, 0.5), 0 0 25px rgba(241, 196, 15, 0.4), inset 0 0 35px rgba(255,255,255,0.2) !important;
    position: relative;
}

.effect-green-gold::after {
    content: "◈";
    position: absolute;
    font-size: 110px;
    color: rgba(255,255,255,0.08);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-shadow: 0 0 15px rgba(255,255,255,0.1);
}




@keyframes green-gold-glow { from { filter: brightness(1); } to { filter: brightness(1.2) contrast(1.1); } }
@keyframes gold-sweep { 0% { background-position: 200% 0%; } 100% { background-position: -200% 0%; } }

.effect-gold {
    animation: gold-glow 2s infinite alternate;
}

@keyframes gold-glow { from { filter: brightness(1); } to { filter: brightness(1.2); } }

.effect-red-gold { animation: red-gold-glow 2s infinite alternate; }
.effect-red-gold::after { content: "★"; position: absolute; font-size: 100px; color: rgba(255,255,255,0.05); top: 50%; left: 50%; transform: translate(-50%, -50%); }

.effect-blue-dark-gold { 
    background: radial-gradient(circle, #ff00c1, #8e44ad, #1a1a2e) !important; 
    border: 5px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-image: 
        radial-gradient(circle, #ff00c1, #8e44ad, #1a1a2e), 
        linear-gradient(45deg, #ff00c1, #ffffff, #8e44ad, #ff00c1) !important;
    background-size: 100% 100%, 200% 200% !important;
    animation: blue-dark-gold-glow 3s infinite alternate, chromatic-bg 3s infinite linear !important;
    box-shadow: 0 0 60px rgba(255, 0, 193, 0.6), 0 0 30px rgba(142, 68, 173, 0.8), inset 0 0 40px rgba(255,255,255,0.3) !important; 
    position: relative;
}

.effect-blue-dark-gold::after { 
    content: "✦"; 
    position: absolute; 
    font-size: 120px; 
    color: rgba(255,255,255,0.1); 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    pointer-events: none;
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}
@keyframes blue-dark-gold-glow { from { filter: brightness(1); } to { filter: brightness(1.2) contrast(1.1); } }

.effect-green-gold {
    animation: green-gold-glow 3s infinite alternate !important;
    position: relative;
}

.effect-green-gold::after {
    content: "✷";
    position: absolute;
    font-size: 110px;
    color: rgba(255,255,255,0.08);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-shadow: 0 0 15px rgba(255,255,255,0.1);
}
@keyframes green-gold-glow { from { filter: brightness(1); } to { filter: brightness(1.2) contrast(1.1); } }
@keyframes red-gold-glow { from { filter: brightness(1); } to { filter: brightness(1.3); } }

/* RENDU 3D */
.card-image-container { width: 120px; height: 120px; perspective: 600px; display: flex; align-items: center; justify-content: center; margin-top: 10px; position: relative; }
.mc-block { position: relative; width: 80px; height: 80px; transform-style: preserve-3d; transform: rotateX(-30deg); transition: transform 0.5s; }
.card:hover .mc-block { transform: rotateX(-30deg) rotateY(20deg); }
.mc-face { position: absolute; width: 80px; height: 80px; background-size: cover; image-rendering: pixelated; border: 1px solid rgba(255,255,255,0.1); }
.mc-face.top { transform: rotateX(90deg) rotateZ(45deg) translateZ(40px); filter: brightness(1.1); }
.mc-face.right { transform: rotateY(45deg) translateZ(40px); }
.mc-face.left { transform: rotateY(-45deg) translateZ(40px); filter: brightness(0.8); }

.card-image-container.item-view { perspective: none; }
.mc-item { width: 95px; height: 95px; image-rendering: pixelated; object-fit: contain; transition: transform 0.3s; }
.card:hover .mc-item { transform: scale(1.1) rotate(5deg); }

/* --- ANIMATIONS PRESTIGE ULTRA-STYLISEES --- */

/* 1. VORTEX OBSCUR (Black Gold) */
.vortex-reveal {
    animation: vortex-black-hole 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    z-index: 9999;
}

@keyframes vortex-black-hole {
    0% { transform: translateX(-500px) scale(0) rotate(-1080deg); filter: brightness(0) blur(20px); opacity: 0; }
    40% { transform: translateX(0) scale(3) rotate(-540deg); filter: brightness(0) blur(10px); opacity: 1; }
    60% { transform: scale(3.5) rotate(-360deg); filter: brightness(0.2) blur(5px); }
    85% { transform: scale(0.8) rotate(20deg); filter: brightness(1.5) blur(0); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1) blur(0); opacity: 1; }
}

/* 2. EXPLOSION DE LUMIÈRE (White Gold) */
.light-reveal {
    animation: light-explosion 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    z-index: 9999;
}

@keyframes light-explosion {
    0% { transform: scale(0) translateY(200px); filter: brightness(20) white-balance(100%); opacity: 0; }
    30% { transform: scale(2.5) translateY(-50px); filter: brightness(10); opacity: 1; }
    100% { transform: scale(1) translateY(0); filter: brightness(1); opacity: 1; }
}

/* 3. GLITCH SPECTRAL (Gray Immersive) */
.spectral-reveal {
    animation: slide-from-left-rare 0.7s steps(4) both, spectral-in 0.8s steps(4) both, shake-rare 0.1s 5 0.8s;
}

@keyframes spectral-in {
    0% { transform: translateX(-250px) scale(0.5); filter: grayscale(1) opacity(0); }
    25% { transform: translateX(50px) scale(1.2); filter: grayscale(0.5) invert(1); }
    50% { transform: translateX(-30px) scale(0.8); filter: grayscale(1) contrast(2); }
    100% { transform: translateX(0) scale(1); filter: grayscale(0); opacity: 1; }
}

/* --- REVEAL STANDARDS (Nettoyés) --- */
.opened-cards { 
  display: flex; 
  gap: 20px; 
  justify-content: center; 
  align-items: center;
  flex-wrap: nowrap; 
  overflow: visible; 
  padding: 40px; 
  width: 100%; 
  min-height: 350px; 
}

.card.reveal-anim { 
  animation: slide-from-left 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards; 
  opacity: 0; 
  transform: translateX(-250px) rotate(-15deg) scale(0.4); 
}

@keyframes slide-from-left { 
  to { 
    opacity: 1; 
    transform: translateX(0) rotate(0deg) scale(1); 
  } 
}

.epic-shake { 
  animation: slide-from-left-rare 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, shake-rare 0.1s 8 0.7s; 
  opacity: 0;
  transform: translateX(-250px) rotate(-20deg) scale(0.4);
}

@keyframes slide-from-left-rare { 
  0% { opacity: 0; transform: translateX(-250px) rotate(-20deg) scale(0.4); }
  70% { opacity: 1; transform: translateX(20px) rotate(5deg) scale(1.1); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

@keyframes shake-rare {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(4px, 4px) rotate(1deg); }
  50% { transform: translate(-4px, -4px) rotate(-1deg); }
  75% { transform: translate(4px, -4px) rotate(1deg); }
}

/* Flash de rareté spécialisés */
.rare-flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 2000; }
.flash-white { background: white; animation: flash-anim 0.8s ease-out; }
.flash-gold { background: #ffea00; animation: flash-anim 1s ease-out; }
.flash-green { background: #2ecc71; animation: flash-anim 1s ease-out; }
.flash-blue { background: #3498db; animation: flash-anim 1s ease-out; }
.flash-purple { background: #9b59b6; animation: flash-anim 1s ease-out; }
.flash-orange { background: #e67e22; animation: flash-anim 1s ease-out; }
.flash-red { background: #ff0000; animation: flash-anim 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.flash-black { background: #000000; animation: flash-anim 1.5s cubic-bezier(0.19, 1, 0.22, 1); }
.flash-silver { background: #bdc3c7; animation: flash-anim 1s ease-out; }

@keyframes flash-anim {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Impact d'écran pour Red Gold */
.shake-screen {
  animation: screen-impact 0.4s;
}

@keyframes screen-impact {
  0%, 100% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-10px, -10px); }
  20%, 40%, 60%, 80% { transform: translate(10px, 10px); }
}

/* Reveal Ultra-Premium */
.gold-reveal {
  animation: gold-pop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, shake-rare 0.1s 10 0.8s;
}

@keyframes gold-pop {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; filter: brightness(5); }
  50% { transform: scale(1.5) rotate(10deg); filter: brightness(2); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
}

.red-gold-reveal {
  animation: red-gold-pop 1s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards, shake-rare 0.05s 15 1s;
}

@keyframes red-gold-pop {
  0% { transform: scale(0) translateY(100px); opacity: 0; }
  40% { transform: scale(2) translateY(-50px); filter: contrast(2) brightness(2); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

#booster-view { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; }
.booster-pack { width: 240px; height: 340px; background: #e67e22; border: 8px solid #000; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; background-image: repeating-linear-gradient(45deg, #d35400, #d35400 20px, #e67e22 20px, #e67e22 40px); box-shadow: 0 30px 60px rgba(0,0,0,0.8); animation: float 4s infinite ease-in-out; position: relative; transition: all 0.3s; }
.booster-pack:hover { transform: scale(1.05) rotate(3deg); filter: brightness(1.15); }
.booster-pack .pack-label { background: #111; color: #fff; padding: 12px 24px; border: 4px solid #fff; font-size: 1.3rem; font-weight: bold; text-transform: uppercase; }
.booster-pack::after { content: "CLIQUEZ POUR OUVRIR"; position: absolute; bottom: 30px; color: white; font-size: 0.9rem; text-shadow: 2px 2px #000; animation: pulse 1s infinite alternate; }
.booster-pack.shaking { animation: shake-pack 0.1s infinite !important; transform: none !important; }
@keyframes shake-pack { 0% { transform: translate(2px, 2px); } 50% { transform: translate(-2px, -2px); } 100% { transform: translate(2px, -2px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25px); } }
@keyframes pulse { from { opacity: 0.4; transform: scale(0.9); } to { opacity: 1; transform: scale(1.1); } }

/* --- GUI TABLE DE CRAFT --- */
#craft-view { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px 20px; }
.crafting-gui { background: #c6c6c6; border: 4px solid #000; border-top-color: #ffffff; border-left-color: #ffffff; border-right-color: #555555; border-bottom-color: #555555; padding: 30px; display: flex; align-items: center; gap: 50px; box-shadow: 0 20px 0 rgba(0,0,0,0.3); position: relative; }
.craft-grid-3x3 { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: 4px; }
.mc-slot { width: 64px; height: 64px; background: #8b8b8b; border: 4px solid #373737; border-top-color: #373737; border-left-color: #373737; border-right-color: #ffffff; border-bottom-color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.craft-arrow { font-size: 80px; color: #555; text-shadow: 3px 3px 0px #fff; animation: arrowPulse 1.5s infinite; font-weight: bold; }
@keyframes arrowPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2) translateX(10px); } }
.crafting-gui.is-crafting .mc-slot:not(.large) .mc-slot-item { animation: fuse-to-center 0.8s ease-in forwards; }
@keyframes fuse-to-center { 0% { transform: scale(1); } 100% { transform: scale(0); opacity: 0; } }
.mc-slot.large.result-reveal { animation: result-pop 0.5s forwards; }
@keyframes result-pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1.3); opacity: 1; } }
.crafting-gui.is-crafting .craft-arrow { animation: arrow-work 0.4s infinite; }
@keyframes arrow-work { 0% { transform: translateX(0) scale(1.2); } 50% { transform: translateX(20px) scale(1.3); } }
.result-slot-container { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.mc-slot.large { width: 84px; height: 84px; }
.mc-slot .card-image-container { width: 48px !important; height: 48px !important; margin: 0 !important; perspective: 200px; pointer-events: none; }
.mc-slot .mc-block { width: 32px !important; height: 32px !important; transform: rotateX(-30deg) rotateY(45deg) !important; }
.mc-slot .mc-face { width: 32px !important; height: 32px !important; }
.mc-slot .mc-face.top { transform: rotateX(90deg) rotateZ(45deg) translateZ(16px) !important; }
.mc-slot .mc-face.right { transform: rotateY(45deg) translateZ(16px) !important; }
.mc-slot .mc-face.left { transform: rotateY(-45deg) translateZ(16px) !important; }
.mc-slot .mc-item { width: 40px !important; height: 40px !important; }
.inventory-section { width: 100%; max-width: 900px; background: rgba(0,0,0,0.6); border: 4px solid #000; padding: 20px; border-radius: 8px; }
.inventory-grid-scroll { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; gap: 8px !important; max-height: 350px; overflow-y: auto; padding: 10px; }
.mini-item-pick { width: 64px; height: 64px; background: #8b8b8b; border: 3px solid #000; position: relative; cursor: pointer; transition: transform 0.1s; display: flex; align-items: center; justify-content: center; }
.mini-item-pick:hover { transform: scale(1.1); z-index: 5; background: #999; }
.mini-item-pick .card-image-container { width: 40px !important; height: 40px !important; }
.mini-item-pick .mc-block { width: 28px !important; height: 28px !important; }
.mini-item-pick .mc-face { width: 28px !important; height: 28px !important; }
.mini-item-pick .mc-face.top { transform: rotateX(90deg) rotateZ(45deg) translateZ(14px) !important; }
.mini-item-pick .mc-face.right { transform: rotateY(45deg) translateZ(14px) !important; }
.mini-item-pick .mc-face.left { transform: rotateY(-45deg) translateZ(14px) !important; }
.mini-item-pick .mc-item { width: 36px !important; height: 36px !important; }
.mini-item-pick .card-quantity { position: absolute; bottom: 2px; right: 4px; top: auto !important; left: auto !important; background: none !important; border: none !important; box-shadow: none !important; font-size: 1rem; padding: 0; color: #fff; z-index: 10; text-shadow: 2px 2px 0px #3f3f3f; font-weight: bold; }
.mini-item-pick.rarity-1 { border-color: #404040; }
.mini-item-pick.rarity-2 { border-color: #2d8a22; }
.mini-item-pick.rarity-3 { border-color: #006eb3; }
.mini-item-pick.rarity-4 { border-color: #6c5ce7; }
.mini-item-pick.rarity-4-5 { border-color: #e84393; box-shadow: inset 0 0 5px #fd79a8; }
.mini-item-pick.rarity-4-7 { border-color: #e67e22; box-shadow: inset 0 0 5px #d35400; }
.mini-item-pick.rarity-4-9 { border-color: #7f8c8d; box-shadow: inset 0 0 5px #34495e; }
.mini-item-pick.rarity-5 { border-color: #f1c40f; box-shadow: inset 0 0 5px #fff9c4; }
.mini-item-pick.rarity-5-5 { border-color: #009432; box-shadow: inset 0 0 5px #00ff88; }
.mini-item-pick.rarity-5-8 { border-color: #ffffff; box-shadow: inset 0 0 5px #bdc3c7; }
.mini-item-pick.rarity-6 { border-color: #ff1744; box-shadow: inset 0 0 5px #ff5252; }
.mini-item-pick.rarity-6-5 { border-color: #ff00c1; box-shadow: inset 0 0 5px #8e44ad; }
.mini-item-pick.rarity-6-8 { border-color: #34495e; box-shadow: inset 0 0 5px #000; }
.mini-item-pick.rarity-7 { border-color: #ff00c1; box-shadow: 0 0 10px #00d2ff; }
#craft-btn { padding: 15px 40px; font-size: 1.2rem; background: #2ecc71; color: white; border: 4px solid #000; cursor: pointer; margin-top: 20px; }
#craft-btn:disabled { background: #444 !important; cursor: not-allowed; }

/* --- TRADE SYSTEM --- */
#trade-view { padding: 20px; color: white; }
.trade-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.trade-card-list { background: #222; border: 4px solid #444; padding: 20px; border-radius: 8px; }
.trade-card-list h3 { margin-top: 0; color: var(--gold-vibrant); border-bottom: 2px solid #444; padding-bottom: 10px; }
.trade-request-item { background: #333; padding: 15px; border-radius: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; border-left: 6px solid var(--gold-vibrant); }
.trade-request-item .actions { display: flex; gap: 10px; }
.trade-request-item button { padding: 8px 15px; font-size: 0.8rem; }
.btn-accept { background: #27ae60; }
.btn-decline { background: #c0392b; }

/* Real-time trade screen */
.trade-screen { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: start; }
.trade-box { background: #1a1a1a; border: 6px solid #000; padding: 20px; border-radius: 12px; min-height: 400px; }
.trade-box.ready { border-color: #27ae60; box-shadow: 0 0 20px rgba(39, 174, 96, 0.4); }
.trade-box h3 { text-align: center; margin-bottom: 20px; }
.trade-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-height: 200px; background: #111; padding: 10px; border-radius: 8px; }
.trade-vs { align-self: center; font-size: 3rem; font-weight: bold; color: #444; text-shadow: 2px 2px #000; }
.trade-footer { grid-column: span 3; display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.ready-status { font-weight: bold; padding: 5px 10px; border-radius: 4px; display: inline-block; margin-top: 10px; }
.status-not-ready { color: #e74c3c; background: rgba(231, 76, 60, 0.1); }
.status-ready { color: #2ecc71; background: rgba(46, 204, 113, 0.1); }

/* Picker in trade */
.trade-picker { grid-column: span 3; margin-top: 40px; border-top: 4px solid #444; padding-top: 20px; }

/* --- CHAT SYSTEM --- */
#nav-chat, #nav-trade { position: relative; }
.chat-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ff1744;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border: 3px solid #000;
  border-radius: 4px;
  font-weight: bold;
  animation: bounce 0.5s infinite alternate;
}
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-3px); } }

.chat-message.admin-msg { border-left-color: #ff1744; background: rgba(255, 23, 68, 0.05); }
.chat-message.admin-msg .sender { color: #ff1744; }

.chat-message.beta-msg { border-left-color: #3498db; }
.chat-message.beta-msg .sender { color: #3498db; }

#chat-view { 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
  max-width: 800px; 
  margin: 0 auto; 
  height: 60vh; 
}
.chat-container { 
  background: #1a1a1a; 
  border: 4px solid #000; 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
  border-radius: 8px; 
}
.chat-messages { 
  flex: 1; 
  overflow-y: auto; 
  padding: 20px; 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}
.chat-message { 
  background: #333; 
  padding: 10px 15px; 
  border-radius: 6px; 
  border-left: 4px solid var(--emerald-color); 
}
.chat-message .sender { 
  font-weight: bold; 
  color: var(--emerald-color); 
  font-size: 0.8rem; 
  margin-bottom: 5px; 
  display: block; 
}
.chat-time {
  font-size: 0.7rem;
  color: #888;
  margin-left: 8px;
  font-weight: normal;
}
.chat-trade-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 5px;
  transition: transform 0.2s;
  vertical-align: middle;
}
.chat-trade-btn:hover {
  transform: scale(1.3);
}
.chat-message .text { 
  color: #fff; 
  font-size: 0.9rem; 
  word-break: break-word; 
}

/* Carte dans le chat */
.chat-card-flex {
  margin-top: 10px;
  transform: scale(0.4);
  transform-origin: top left;
  margin-bottom: -130px; /* Compense la réduction de taille pour le flux */
}

/* Sélecteur de carte pour le chat */
.chat-card-picker {
  background: #111;
  border: 4px solid #000;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  display: none; /* Caché par défaut */
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 5px;
}

.chat-input-area { 
  padding: 15px; 
  background: #111; 
  border-top: 4px solid #000; 
  display: flex; 
  gap: 10px; 
}
.chat-input { 
  flex: 1; 
  padding: 12px; 
  background: #222; 
  color: white; 
  border: 2px solid #555; 
  font-family: var(--minecraft-font); 
}
.chat-send-btn { 
  background: var(--emerald-color); 
  padding: 10px 20px !important; 
  font-size: 0.9rem !important; 
}

/* --- SHOP & MISC --- */
.card.locked { filter: grayscale(1) brightness(0.2) !important; opacity: 0.6; transform: scale(0.95); }
.card-quantity { position: absolute; top: 10px; left: 10px; background: #ff1744; color: white; padding: 4px 10px; border: 3px solid #000; font-weight: bold; z-index: 5; font-size: 0.8rem; border-radius: 4px; }
#market-view { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; padding: 20px; }
.shop-item { background: #333; border: 6px solid #000; padding: 40px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 280px; box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
.shop-item h3 { margin: 0; color: var(--gold-vibrant); text-transform: uppercase; }
.shop-item p { font-size: 1.3rem; font-weight: bold; margin: 0; }

/* --- EFFET SPECIAL: LE PIGEON (ID 245) --- */
.card-pigeon {
  cursor: pointer;
}

.card-pigeon:hover .mc-item {
  transform: scale(1.5) rotate(10deg) !important;
  filter: drop-shadow(0 0 20px #ff00c1) brightness(1.2);
}

.site-shake {
  animation: ergonomic-shake 0.5s infinite;
}

@keyframes ergonomic-shake {
  0% { transform: translate(0, 0); }
  5% { transform: translate(10px, 10px); }
  10% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

/* SECRET HACK */
.secret-hack-active .card-image-container::after { content: ""; position: absolute; inset: -10px; background-image: url('cards_images/minecraft-fun-2606410071.gif') !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; z-index: 100; filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 10px #fff); }
.secret-hack-active .card .mc-block, .secret-hack-active .card .mc-item { opacity: 0; }
#fullscreen-fireworks { position: fixed; inset: 0; pointer-events: none; z-index: 10000; display: none; background: rgba(0,0,0,0.2); }
.secret-hack-active #fullscreen-fireworks { display: block; }
.firework-particle { position: absolute; width: 10px; height: 10px; background: #fff; border-radius: 50%; animation: fireworks-global 1.5s infinite; }
@keyframes fireworks-global { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(10); opacity: 0; } }
@keyframes chromatic-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes electric-vibration { 0% { transform: translate(2px, 2px); } 50% { transform: translate(-2px, -1px); } 100% { transform: translate(1px, -2px); } }

/* --- ULTIMATE CARD: THE MASTER COLLECTION --- */
.rarity-8 { 
    border-color: #ffffff !important; 
    box-shadow: 0 0 25px rgba(255,255,255,0.6), inset 0 0 15px rgba(255,255,255,0.4) !important; 
    position: relative; 
    overflow: hidden; 
}
.card.effect-ultimate {
    background: radial-gradient(circle at center, #222 0%, #000 100%) !important;
}

.card-ultimate-vortex {
    position: absolute;
    inset: -100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.1) 60deg,
        transparent 120deg,
        rgba(255, 255, 255, 0.1) 180deg,
        transparent 240deg,
        rgba(255, 255, 255, 0.1) 300deg,
        transparent 360deg
    );
    animation: vortex-spin 15s infinite linear;
    pointer-events: none;
    z-index: 1;
}

@keyframes vortex-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ultimate-visual-container {
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    position: relative;
    z-index: 5;
}

.ultimate-cube {
    width: 60px;
    height: 60px;
    position: relative;
    transform-style: preserve-3d;
    animation: ultimate-cube-spin 8s infinite linear;
}

@keyframes ultimate-cube-spin {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
}

.cube-face {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.3);
}

.cube-face.front  { transform: translateZ(30px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(30px); }
.cube-face.right  { transform: rotateY(90deg) translateZ(30px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(30px); }
.cube-face.top    { transform: rotateX(90deg) translateZ(30px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(30px); }

.card.rarity-8 .card-name {
    color: #fff !important;
    text-shadow: 0 0 8px #fff, 0 0 15px #fff;
    font-size: 1rem;
    z-index: 10;
    position: relative;
    background: rgba(0,0,0,0.5);
    padding: 5px;
    width: 100%;
    text-align: center;
}

/* --- EFFET FISSURES ULTIMATE (PRESTIGE 2) --- */
.cube-cracks {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(45deg, transparent 45%, #fff 48%, #fff 52%, transparent 55%),
        linear-gradient(-45deg, transparent 40%, #fff 43%, #fff 47%, transparent 50%);
    background-size: 100% 100%;
    opacity: 0.8;
    filter: drop-shadow(0 0 5px #ffd700);
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: cracks-flicker 0.2s infinite;
}

@keyframes cracks-flicker {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

/* --- EFFET GLITCH ULTIMATE EXTRÊME (PRESTIGE 2) --- */
.effect-ultimate-glitch {
    animation: ultimate-glitch 0.1s infinite;
    filter: drop-shadow(0 0 25px #fff);
    position: relative;
}

@keyframes ultimate-glitch {
    0% { transform: translate(0) skew(0deg); clip-path: inset(0 0 0 0); filter: hue-rotate(0deg) brightness(1) contrast(2); }
    10% { transform: translate(-12px, 8px) skew(5deg); clip-path: inset(15% 0 45% 0); filter: hue-rotate(90deg) brightness(3); }
    20% { transform: translate(12px, -8px) skew(-10deg); clip-path: inset(50% 0 10% 0); filter: hue-rotate(180deg) contrast(4); }
    30% { transform: translate(-18px, -4px) skew(20deg); clip-path: inset(0 25% 0 50%); filter: brightness(0.5); }
    40% { transform: translate(18px, 4px) skew(-20deg); clip-path: inset(70% 0 5% 0); filter: brightness(4) hue-rotate(270deg); }
    50% { transform: translate(-5px, 15px); clip-path: inset(10% 0 80% 0); }
    60% { transform: translate(5px, -15px) scaleY(1.5); clip-path: inset(40% 50% 40% 0); }
    70% { transform: translate(0) scaleX(1.2); filter: invert(1); }
    80% { transform: translate(-10px, -10px) skew(15deg); clip-path: inset(0 0 90% 0); }
    90% { transform: translate(10px, 10px) skew(-15deg); clip-path: inset(85% 0 0 0); }
    100% { transform: translate(0) skew(0deg); }
}


.prestige-2-aura {
    animation: prestige-2-pulse 0.5s infinite alternate;
}

@keyframes prestige-2-pulse {
    from { filter: drop-shadow(0 0 20px #fff) contrast(1); }
    to { filter: drop-shadow(0 0 40px #000) contrast(2) brightness(1.5); }
}

    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: rgba(0, 0, 0, 0.9); /* Un peu de transparence pour voir le site derrière */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
    font-family: var(--minecraft-font);
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

#ultimate-ascension-overlay.active {
    opacity: 1;
}

.ascension-rays {
    position: absolute;
    width: 150vmax;
    height: 150vmax;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(0, 210, 255, 0.2) 10deg,
        transparent 20deg,
        rgba(255, 255, 255, 0.2) 30deg,
        transparent 40deg
    );
    animation: rays-rotate 15s infinite linear;
    z-index: 1;
}

.ascension-title {
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 20px #fff, 0 0 40px #00d2ff, 0 0 60px #00d2ff;
    z-index: 10;
    text-align: center;
    animation: title-pulse 2s infinite ease-in-out;
    letter-spacing: 5px;
}

@keyframes title-pulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.5); }
}

.ascension-subtitle {
    font-size: 1.5rem;
    color: #00d2ff;
    margin-top: 20px;
    z-index: 10;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-shadow: 0 0 10px #00d2ff;
}

.cosmic-particle {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    filter: blur(2px);
    animation: particle-fly linear infinite;
}

@keyframes particle-fly {
    from { transform: translate(0, 0) scale(1); opacity: 1; }
    to { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

.ultimate-glitch-body {
    animation: body-distort 0.2s infinite;
}

@keyframes body-distort {
    0% { filter: hue-rotate(0deg) contrast(1); }
    50% { filter: hue-rotate(90deg) contrast(1.5) brightness(1.2); transform: translate(2px, -1px); }
    100% { filter: hue-rotate(0deg) contrast(1); }
}

/* --- MODE PRESTIGE (MENUS STYLE MASTER) --- */
.prestige-mode nav {
    background: linear-gradient(to right, #1a1a2e, #8e44ad, #2980b9, #1a1a2e) !important;
    border-bottom: 4px solid #fff !important;
    box-shadow: 0 5px 20px rgba(142, 68, 173, 0.4);
}
.prestige-mode nav button {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}
.prestige-mode nav button:hover, .prestige-mode nav button.active {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
}
.prestige-mode .section-title {
    border-left-color: #8e44ad !important;
    color: #fff !important;
    text-shadow: 0 0 10px #8e44ad;
}
.prestige-mode .collection-stats span {
    color: #2980b9 !important;
    text-shadow: 0 0 10px #2980b9;
}
.prestige-mode h1, .prestige-mode h2 {
    text-shadow: 0 0 15px rgba(142, 68, 173, 0.8);
}

/* --- EFFET PRESTIGE AURA (STYLE MASTER) --- */
.prestige-aura-active .card {
    background: radial-gradient(circle, #2980b9, #8e44ad, #1a1a2e) !important;
    border: 5px solid #fff !important;
    box-shadow: 0 0 50px rgba(142, 68, 173, 0.8), inset 0 0 30px rgba(255,255,255,0.4) !important;
    animation: none !important;
}
.prestige-aura-active .card.rarity-8 {
    border-color: #ffffff !important;
    box-shadow: 0 0 35px rgba(255,255,255,0.8), inset 0 0 20px rgba(255,255,255,0.5) !important;
    background: radial-gradient(circle at center, #222 0%, #000 100%) !important;
}