/* ============================================================
   SHINY — la carte la plus convoitée du jeu
   Cadre or liquide prismatique, holo qui suit le doigt, paillettes,
   étoiles flottantes, numéro de série gravé et signature dorée.
   ============================================================ */
@property --sh-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.tcg.shiny {
  --rc: #f6c343;
  padding: 3.8%;
  background:
    conic-gradient(from var(--sh-a), #fff3c4, #f6c343 10%, #ff6ec7 22%, #7cf3ff 36%, #b46bff 50%, #f6c343 62%, #fff3c4 72%, #ffb347 84%, #fff3c4);
  animation: sh-spin 4s linear infinite, sh-pulse 2.6s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(255, 243, 196, .9), 0 0 28px rgba(246, 195, 67, .65), 0 0 60px rgba(255, 110, 199, .35), 0 14px 34px rgba(0, 0, 0, .6);
}
@keyframes sh-spin { to { --sh-a: 360deg; } }
@keyframes sh-pulse {
  50% { box-shadow: 0 0 0 1px #fff, 0 0 40px rgba(246, 195, 67, .9), 0 0 90px rgba(124, 243, 255, .45), 0 14px 34px rgba(0, 0, 0, .6); }
}
.tcg.shiny::after { content: none; }   /* remplace l'ancienne petite étoile */

/* fond intérieur : nuit étoilée dorée */
.tcg.shiny .tcg-inner {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(246, 195, 67, .22), transparent 60%),
    linear-gradient(180deg, #1e1840, #0f0b26);
  box-shadow: inset 0 0 0 .6cqw rgba(255, 243, 196, .55);
}
.tcg.shiny .tcg-name {
  background: linear-gradient(90deg, #fff3c4, #f6c343, #ffe08a, #fff3c4); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sh-text 3s linear infinite; filter: drop-shadow(0 0 1.5cqw rgba(246, 195, 67, .6));
}
@keyframes sh-text { to { background-position: 200% 0; } }
.tcg.shiny .tcg-gem { background: conic-gradient(#fff3c4, #ff6ec7, #7cf3ff, #b46bff, #f6c343, #fff3c4); box-shadow: 0 0 3cqw rgba(255, 243, 196, .9); }
.tcg.shiny .tcg-foot { background: linear-gradient(90deg, #b8860b, #f6c343, #fff3c4, #f6c343, #b8860b); color: #2a1c00; background-size: 200% 100%; animation: sh-text 4s linear infinite; }
.tcg.shiny .tcg-stat b i { background: linear-gradient(90deg, #f6c343, #ff6ec7, #7cf3ff); }
.tcg.shiny .tcg-art { box-shadow: inset 0 0 0 .6cqw rgba(255, 243, 196, .7); }

/* couche holographique (suit le doigt/la souris via --hx --hy) */
.tcg.shiny .holo {
  opacity: 1; mix-blend-mode: color-dodge; z-index: 4;
  background:
    radial-gradient(farthest-corner circle at var(--hx, 50%) var(--hy, 30%), rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%),
    repeating-linear-gradient(115deg, #ff6ec7 0%, #ffe08a 6%, #7cf3ff 12%, #b46bff 18%, #ff6ec7 24%);
  background-size: 100% 100%, 300% 300%;
  background-position: center, var(--hx, 0%) var(--hy, 0%);
  opacity: .55;
  animation: sh-holo 6s ease-in-out infinite;
}
.tcg.shiny.tilt .holo { animation: none; opacity: .7; }
@keyframes sh-holo { 0%, 100% { background-position: center, 0% 0%; } 50% { background-position: center, 100% 100%; } }

/* paillettes scintillantes */
.tcg.shiny .sh-glitter {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, #fff 0 .5cqw, transparent .7cqw), radial-gradient(circle, #ffe08a 0 .4cqw, transparent .6cqw),
    radial-gradient(circle, #7cf3ff 0 .35cqw, transparent .55cqw);
  background-size: 23cqw 29cqw, 31cqw 19cqw, 17cqw 25cqw;
  background-position: 3cqw 5cqw, 11cqw 13cqw, 7cqw 21cqw;
  animation: sh-twinkle 2.2s steps(2) infinite; opacity: .55;
}
@keyframes sh-twinkle { 50% { opacity: .15; background-position: 6cqw 2cqw, 14cqw 9cqw, 4cqw 18cqw; } }
/* reflet balayant */
.tcg.shiny .sh-sweep { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; overflow: hidden; }
.tcg.shiny .sh-sweep::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 35%; left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-18deg);
  animation: sh-sweep 3.4s ease-in-out infinite;
}
@keyframes sh-sweep { 0%, 55% { left: -60%; } 100% { left: 140%; } }
/* étoiles flottantes autour de la carte */
.tcg.shiny .sh-stars { position: absolute; inset: -6%; z-index: 7; pointer-events: none; }
.tcg.shiny .sh-stars i {
  position: absolute; width: 9cqw; height: 9cqw; background: radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 20%, #fff3c4 25%, transparent 30% 45%, #fff3c4 50%, transparent 55% 70%, #fff3c4 75%, transparent 80%);
  border-radius: 50%; filter: drop-shadow(0 0 1.5cqw #f6c343); animation: sh-star 2.4s ease-in-out infinite; opacity: 0;
}
.tcg.shiny .sh-stars i:nth-child(1) { left: 2%; top: 10%; animation-delay: 0s; }
.tcg.shiny .sh-stars i:nth-child(2) { right: 0; top: 30%; animation-delay: .5s; width: 7cqw; height: 7cqw; }
.tcg.shiny .sh-stars i:nth-child(3) { left: 8%; bottom: 14%; animation-delay: 1s; }
.tcg.shiny .sh-stars i:nth-child(4) { right: 6%; bottom: 4%; animation-delay: 1.5s; width: 11cqw; height: 11cqw; }
.tcg.shiny .sh-stars i:nth-child(5) { left: 45%; top: -2%; animation-delay: .8s; width: 6cqw; height: 6cqw; }
@keyframes sh-star { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* numéro de série gravé + ruban SHINY + signature */
.sh-serial {
  position: absolute; left: 2.5cqw; top: 2.5cqw; z-index: 3; font-family: var(--font-title); font-size: 5.6cqw; letter-spacing: .05em;
  padding: .8cqw 2.4cqw; border-radius: 99px; color: #2a1c00;
  background: linear-gradient(135deg, #fff3c4, #f6c343 50%, #b8860b); box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .5), inset 0 0 0 .4cqw rgba(255, 255, 255, .6);
}
.sh-ribbon {
  position: absolute; right: -1cqw; top: 5cqw; z-index: 3; font-family: var(--font-title); font-size: 5cqw; letter-spacing: .12em; color: #fff;
  padding: .8cqw 3cqw; background: linear-gradient(90deg, #d4147e, #6a2bd9, #0a8fb8); box-shadow: 0 0 3cqw rgba(255, 110, 199, .7), inset 0 0 0 .3cqw rgba(255, 255, 255, .5);
  border-radius: 1cqw 0 0 1cqw; text-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .6);
}
.sh-sign {
  position: absolute; right: 4cqw; bottom: 1.2cqw; z-index: 3; font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 6cqw;
  color: #ffe08a; text-shadow: 0 0 2cqw rgba(246, 195, 67, .8); transform: rotate(-6deg); pointer-events: none;
}

/* miniature (grilles) : on garde l'éclat mais en plus léger */
.card-grid .tcg.shiny .sh-stars, .mk-grid .tcg.shiny .sh-stars, .op-mini .tcg.shiny .sh-stars { display: none; }

/* badge "✦ SHINY" utilisé dans les listes */
.shiny-word { font-family: var(--font-title); background: linear-gradient(90deg, #ff6ec7, #ffe08a, #7cf3ff, #b46bff, #ff6ec7); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sh-text 2.5s linear infinite; letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) {
  .tcg.shiny, .tcg.shiny .holo, .tcg.shiny .sh-glitter, .tcg.shiny .sh-sweep::before, .tcg.shiny .sh-stars i, .tcg.shiny .tcg-name, .tcg.shiny .tcg-foot, .shiny-word { animation: none !important; }
  .tcg.shiny .sh-stars i { opacity: .8; transform: none; }
}

/* ============================================================
   RÉVÉLATION SHINY (ouverture de pack) — séquence spéciale
   ============================================================ */
.op-overlay.shiny-mode::after { background: rgba(0, 0, 0, .92) !important; transition: background .5s; }
.op-aurora { position: absolute; inset: -20%; z-index: 9; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: conic-gradient(from 0deg at 50% 50%, rgba(255, 110, 199, .55), rgba(124, 243, 255, .5), rgba(180, 107, 255, .55), rgba(246, 195, 67, .55), rgba(255, 110, 199, .55));
  filter: blur(60px); animation: op-spin 6s linear infinite; }
.op-overlay.shiny-mode .op-aurora { opacity: 1; }
.op-card.shiny-spin { animation: sh-card-spin 1.6s cubic-bezier(.5, 0, .2, 1) forwards !important; z-index: 40; }
@keyframes sh-card-spin {
  0% { transform: scale(1) rotateY(0deg); }
  40% { transform: scale(.7) rotateY(720deg) translateY(-6%); }
  75% { transform: scale(1.18) rotateY(1080deg); }
  100% { transform: scale(1.06) rotateY(1080deg); }
}
.op-shock { position: fixed; left: 50%; top: 50%; z-index: 30; width: 40px; height: 40px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  border: 6px solid transparent; background: conic-gradient(#ff6ec7, #ffe08a, #7cf3ff, #b46bff, #ff6ec7) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sh-shock 1.1s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes sh-shock { to { width: 260vmax; height: 260vmax; opacity: 0; } }
.op-shiny-title { position: absolute; left: 0; right: 0; top: 7%; z-index: 45; text-align: center; font-family: var(--font-title); font-size: clamp(2.4rem, 11vw, 5.4rem);
  letter-spacing: .12em; pointer-events: none;
  background: linear-gradient(90deg, #ff6ec7, #ffe08a, #7cf3ff, #b46bff, #ff6ec7); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, .55)); animation: sh-title-in .9s cubic-bezier(.2, 1.6, .4, 1) both, sh-text 2s linear infinite; }
.op-shiny-title small { display: block; font-size: .32em; letter-spacing: .3em; margin-top: .2em; }
@keyframes sh-title-in { from { transform: scale(2.4); opacity: 0; filter: blur(12px); } }
.op-beams { position: absolute; left: 50%; top: 50%; width: 320%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -2; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 110, 199, .5) 0 4deg, transparent 4deg 12deg, rgba(124, 243, 255, .45) 12deg 16deg, transparent 16deg 24deg, rgba(246, 195, 67, .5) 24deg 28deg, transparent 28deg 36deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%); border-radius: 50%;
  animation: op-spin-c 7s linear infinite; }
/* placement du titre : au-dessus de la carte, sans la chevaucher */
.op-shiny-title { position: fixed; top: max(10px, env(safe-area-inset-top)); font-size: clamp(2rem, 9vw, 4.2rem); }
.op-overlay.shiny-mode .op-count { visibility: hidden; }
.op-overlay.shiny-mode .op-pile { transform: translateY(clamp(40px, 9vh, 80px)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.op-pile { transition: transform .4s; }