/* =========================================================
   CARDS-TRADING — EASTER EGGS
   Popup OG + animations partagées
   ========================================================= */

/* ── Overlay ─────────────────────────────────────────────── */
.og-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 17, 31, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 20px;
}

.og-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Modal ───────────────────────────────────────────────── */
.og-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(160deg, #0c1829 0%, #07111f 100%);
  border: 1px solid rgba(41, 151, 255, 0.4);
  border-radius: 24px;
  padding: 40px 32px 32px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(41, 151, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: scale(0.85) translateY(20px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
}

.og-overlay.is-open .og-modal {
  transform: scale(1) translateY(0);
}

/* Effet holographique de fond — conic-gradient animé */
.og-modal::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    transparent 0deg,
    rgba(41, 151, 255, 0.6) 60deg,
    rgba(168, 85, 247, 0.5) 120deg,
    rgba(236, 72, 153, 0.4) 180deg,
    rgba(251, 191, 36, 0.5) 240deg,
    rgba(41, 151, 255, 0.6) 300deg,
    transparent 360deg
  );
  filter: blur(20px);
  opacity: 0.3;
  z-index: -1;
  animation: og-holo-rotate 4s linear infinite;
}

@property --holo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

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

/* Bouton close */
.og-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.og-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: rotate(90deg);
}

/* Badge OG en haut */
.og-badge {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2997ff 0%, #a855f7 100%);
  border-radius: 50%;
  font-weight: 900;
  font-size: 28px;
  color: #fff;
  letter-spacing: 0.05em;
  box-shadow:
    0 0 0 4px rgba(41, 151, 255, 0.15),
    0 12px 30px rgba(41, 151, 255, 0.4);
  animation: og-badge-pulse 2s ease-in-out infinite;
}

@keyframes og-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.15), 0 12px 30px rgba(41, 151, 255, 0.4); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(41, 151, 255, 0.1), 0 16px 40px rgba(41, 151, 255, 0.6); }
}

/* Effet sparkle autour du badge */
.og-badge::after {
  content: '';
  position: absolute;
  inset: -16px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: og-badge-sparkle 3s ease-in-out infinite;
}

@keyframes og-badge-sparkle {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* Titres */
.og-eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2997ff;
  margin-bottom: 8px;
}

.og-title {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2;
  background: linear-gradient(135deg, #fff 0%, #c7d2fe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.og-egg-name {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
  font-style: italic;
}

/* Bénéfices listés */
.og-benefits {
  background: rgba(41, 151, 255, 0.08);
  border: 1px solid rgba(41, 151, 255, 0.2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.og-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  list-style: none;
}

.og-benefits li:last-child { margin-bottom: 0; }

.og-benefits li::before {
  content: '✓';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #2997ff, #a855f7);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Form */
.og-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.og-form-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.og-form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: all 0.2s;
}

.og-form-input:focus {
  outline: none;
  border-color: rgba(41, 151, 255, 0.6);
  background: rgba(41, 151, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.15);
}

.og-form-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.og-form-error {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: -4px;
  min-height: 16px;
}

.og-submit {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #2997ff 0%, #0a6fd8 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.og-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(41, 151, 255, 0.4);
}

.og-submit:active {
  transform: translateY(0);
}

.og-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* État succès */
.og-success {
  text-align: center;
  padding: 12px 0 8px;
}

.og-success-emoji {
  font-size: 48px;
  margin-bottom: 12px;
  animation: og-success-bounce 0.6s ease;
}

@keyframes og-success-bounce {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.og-success-text {
  color: #fff;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.og-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.4);
}

.og-discord-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(88, 101, 242, 0.5);
}

.og-discord-btn::before {
  content: '';
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Note discrète */
.og-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

/* ── Confettis ───────────────────────────────────────────── */
.og-confetti {
  position: fixed;
  top: -10px;
  width: 8px;
  height: 14px;
  z-index: 99998;
  pointer-events: none;
  animation: og-confetti-fall linear forwards;
}

@keyframes og-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── Indicateur subtil "egg available" ──────────────────── */
.og-hint-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(7, 17, 31, 0.95);
  border: 1px solid rgba(41, 151, 255, 0.3);
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-family: 'Google Sans', sans-serif;
  z-index: 99997;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.og-hint-toast.is-shown {
  transform: translateY(0);
  opacity: 1;
}

/* =========================================================
   EASTER EGG #2 : KAMEHAMEHA — Pixel-art VFX sprite style
   Boule à gauche → faisceau horizontal → impact à droite
   Inspiré sprite sheets RTFXgenerator / VFX itch.io
   ========================================================= */

/* Palette pixel art (5 couleurs comme un vrai sprite 8-bit) */
:root {
  --kp-white:  #ffffff;
  --kp-lite:   #d4f1ff;
  --kp-cyan:   #40c4ff;
  --kp-blue:   #1976ff;
  --kp-dark:   #06257a;
}

/* Conteneur principal — pas de pointer events
   z-index 99998 pour passer DEVANT le beam-stage (99997) */
.kameha-stage {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  overflow: hidden;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* Vignette qui s'assombrit pendant la charge */
.kameha-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 30%,
    rgba(0, 0, 0, 0.55) 70%,
    rgba(0, 0, 0, 0.85) 100%
  );
  opacity: calc(var(--kameha-progress, 0) * 0.9);
  transition: opacity 0.05s linear;
}

/* Hint pixel art en haut */
.kameha-hint {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--kp-white);
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 1.4vw, 14px);
  letter-spacing: 0.15em;
  text-shadow:
    2px 2px 0 var(--kp-dark),
    0 0 12px var(--kp-cyan);
  opacity: 0;
  animation: kameha-hint-blink 0.6s steps(2) infinite;
}

@keyframes kameha-hint-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.4; }
}

.kameha-hint.is-shown { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   BOULE D'ÉNERGIE — pixel art, position centrée-gauche
   Construite en 5 couches concentriques (sprites pixel art)
   z-index élevé pour passer DEVANT le beam
   ───────────────────────────────────────────────────────── */
.kameha-orb-wrap {
  position: absolute;
  top: 50%;
  left: 18%;
  transform: translate(-50%, -50%) scale(calc(0.3 + 1.2 * var(--kameha-progress, 0)));
  transition: transform 0.08s linear;
  z-index: 3; /* devant le beam-stage (qui est à 99997, mais via le stage parent à 99998) */
}

/* ─────────────────────────────────────────────────────────
   GOKU — image PNG pixel art fournie par l'utilisateur
   Chemin : /assets/img/goku-kamehameha.png (transparent PNG)
   Hands du sprite à ~75-78% de la largeur de l'image
   On positionne pour que les hands tombent à orb-left-edge
   ───────────────────────────────────────────────────────── */
.kameha-goku {
  position: absolute;
  /* Position calibrée : +24px à droite, +32px vers le bas pour aligner
     les mains du sprite avec le centre de la boule d'énergie */
  top: 50%;
  left: calc(18% - 274px);
  transform: translate(0, -38%) scale(calc(0.75 + 0.35 * var(--kameha-progress, 0)));
  transform-origin: right center;
  transition: transform 0.1s linear;
  z-index: 1; /* en fond : passe DERRIÈRE l'orb (z-index 3) */
  width: 320px;
  height: auto;
  filter:
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 24px rgba(64, 196, 255, 0.6));
  /* Effet pixel art à tout zoom */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* Animation stance 2 frames pour effet sprite vivant */
  animation: kameha-goku-stance 0.32s steps(2) infinite;
  pointer-events: none;
}

@keyframes kameha-goku-stance {
  0%, 100% { transform: translate(0, -38%) scale(calc(0.75 + 0.35 * var(--kameha-progress, 0))) translate(0, 0); }
  50%      { transform: translate(0, -38%) scale(calc(0.75 + 0.35 * var(--kameha-progress, 0))) translate(1px, -1px); }
}

.kameha-goku img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-drag: none;
}

/* Responsive : sur petit écran, réduire la taille */
@media (max-width: 768px) {
  .kameha-goku {
    width: 220px;
    left: calc(18% - 200px);
  }
}

/* Chaque couche est un carré coloré centré (pas de border-radius pour pur pixel art) */
.kameha-orb-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Step-flicker pour pulse 8-bit */
  animation: kameha-orb-flicker 0.16s steps(2) infinite;
}

/* Couche 1 : halo bleu sombre extérieur (8x8 cellules de 6px = 48x48 effectif) */
.kameha-orb-l1 {
  width: 96px;
  height: 96px;
  background: var(--kp-dark);
  clip-path: polygon(
    25% 0%, 75% 0%, 75% 8%, 92% 8%, 92% 25%, 100% 25%,
    100% 75%, 92% 75%, 92% 92%, 75% 92%, 75% 100%,
    25% 100%, 25% 92%, 8% 92%, 8% 75%, 0% 75%,
    0% 25%, 8% 25%, 8% 8%, 25% 8%
  );
}

/* Couche 2 : bleu */
.kameha-orb-l2 {
  width: 72px;
  height: 72px;
  background: var(--kp-blue);
  clip-path: polygon(
    25% 0%, 75% 0%, 75% 8%, 92% 8%, 92% 25%, 100% 25%,
    100% 75%, 92% 75%, 92% 92%, 75% 92%, 75% 100%,
    25% 100%, 25% 92%, 8% 92%, 8% 75%, 0% 75%,
    0% 25%, 8% 25%, 8% 8%, 25% 8%
  );
}

/* Couche 3 : cyan */
.kameha-orb-l3 {
  width: 52px;
  height: 52px;
  background: var(--kp-cyan);
  clip-path: polygon(
    25% 0%, 75% 0%, 75% 12%, 87% 12%, 87% 25%, 100% 25%,
    100% 75%, 87% 75%, 87% 87%, 75% 87%, 75% 100%,
    25% 100%, 25% 87%, 13% 87%, 13% 75%, 0% 75%,
    0% 25%, 13% 25%, 13% 12%, 25% 12%
  );
}

/* Couche 4 : bleu clair */
.kameha-orb-l4 {
  width: 32px;
  height: 32px;
  background: var(--kp-lite);
  clip-path: polygon(
    25% 0%, 75% 0%, 75% 12%, 87% 12%, 87% 25%, 100% 25%,
    100% 75%, 87% 75%, 87% 87%, 75% 87%, 75% 100%,
    25% 100%, 25% 87%, 13% 87%, 13% 75%, 0% 75%,
    0% 25%, 13% 25%, 13% 12%, 25% 12%
  );
}

/* Couche 5 : cœur blanc */
.kameha-orb-l5 {
  width: 16px;
  height: 16px;
  background: var(--kp-white);
}

/* Aura glow externe via box-shadow stack (chunks bien définis) */
.kameha-orb-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  box-shadow:
    0 0 0 60px rgba(64, 196, 255, 0.18),
    0 0 0 90px rgba(64, 196, 255, 0.10),
    0 0 0 130px rgba(64, 196, 255, 0.04);
  transform: translate(-50%, -50%);
  animation: kameha-aura-pulse 0.5s steps(3) infinite;
}

@keyframes kameha-aura-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@keyframes kameha-orb-flicker {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5); }
}

/* ─────────────────────────────────────────────────────────
   PARTICULES pixel art — aspirées vers la boule pendant charge
   ───────────────────────────────────────────────────────── */
.kameha-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--p-color, #40c4ff);
  box-shadow: 2px 2px 0 var(--kp-dark);
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 99996;
}

/* ─────────────────────────────────────────────────────────
   BEAM — sprite pixel art horizontal (release)
   Multi-layers indépendantes, chacune anime sa propre width
   pour éviter le décalage parent/child et garantir la visibilité
   ───────────────────────────────────────────────────────── */
.kameha-beam-stage {
  position: fixed;
  inset: 0;
  z-index: 99997;
  pointer-events: none;
  overflow: hidden;
}

/* Chaque couche du beam est positionnée absolument à 50% top, animée width 0→82vw */
.kameha-beam-layer {
  position: absolute;
  top: 50%;
  left: 18vw;
  width: 0;
  transform: translateY(-50%);
  pointer-events: none;
  animation: kameha-beam-grow 0.4s steps(16) forwards;
}

@keyframes kameha-beam-grow {
  0%   { width: 0;    opacity: 0.8; }
  10%  { opacity: 1; }
  100% { width: 82vw; opacity: 1; }
}

/* Outer halo bleu marine (fond très chunky) */
.kameha-beam-outer {
  height: 140px;
  background: var(--kp-dark);
  opacity: 0.5;
  filter: drop-shadow(0 0 24px rgba(25, 118, 255, 0.6));
}

/* Halo bleu */
.kameha-beam-blue {
  height: 90px;
  background: var(--kp-blue);
  filter: drop-shadow(0 0 16px var(--kp-blue));
}

/* Halo cyan */
.kameha-beam-cyan {
  height: 52px;
  background: var(--kp-cyan);
}

/* Halo bleu clair */
.kameha-beam-lite {
  height: 24px;
  background: var(--kp-lite);
}

/* Core blanc ultra-lumineux — visible avant tout */
.kameha-beam-core {
  height: 8px;
  background: var(--kp-white);
  box-shadow:
    0 0 20px var(--kp-white),
    0 0 40px var(--kp-cyan),
    0 0 80px var(--kp-blue);
  animation: kameha-beam-grow 0.4s steps(16) forwards,
             kameha-beam-pulse 0.16s steps(2) infinite 0.4s;
}

@keyframes kameha-beam-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.6); }
}

/* Anneaux blancs qui voyagent le long du beam (3-4) */
.kameha-ring {
  position: fixed;
  top: 50%;
  width: 32px;
  height: 110px;
  border: 5px solid var(--kp-white);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%) scaleY(0.3);
  box-shadow:
    0 0 0 3px var(--kp-cyan),
    0 0 24px var(--kp-white),
    0 0 48px var(--kp-blue),
    inset 0 0 16px rgba(255, 255, 255, 0.6);
  z-index: 99998;
  pointer-events: none;
  animation: kameha-ring-travel var(--ring-duration, 0.7s) steps(24) forwards;
}

@keyframes kameha-ring-travel {
  0%   { left: 18vw; opacity: 0; transform: translate(-50%, -50%) scaleY(0.3); }
  15%  { opacity: 1; }
  100% { left: 100vw; opacity: 0.4; transform: translate(-50%, -50%) scaleY(1); }
}

/* Indicateur "READY!" quand la boule atteint pleine charge */
.kameha-ready {
  position: fixed;
  top: 35%;
  left: 18%;
  transform: translate(-50%, -50%);
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 3.5vw, 38px);
  font-weight: 900;
  color: var(--kp-white);
  text-shadow:
    4px 4px 0 #ff0040,
    -2px -2px 0 #ff0040,
    2px -2px 0 #ff0040,
    -2px 2px 0 #ff0040,
    0 0 24px rgba(255, 100, 100, 0.9),
    0 0 48px var(--kp-cyan);
  z-index: 99999;
  pointer-events: none;
  animation: kameha-ready-anim 0.5s steps(6) forwards;
}

@keyframes kameha-ready-anim {
  0%   { transform: translate(-50%, -50%) scale(0)   rotate(-10deg); opacity: 0; }
  40%  { transform: translate(-50%, -50%) scale(1.4) rotate( 4deg);  opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(1)   rotate(-2deg);  opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6) rotate( 0deg);  opacity: 0; }
}

/* ─────────────────────────────────────────────────────────
   IMPACT — pixel art star burst à droite de l'écran
   ───────────────────────────────────────────────────────── */
.kameha-impact {
  position: fixed;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  transform: translate(50%, -50%);
  z-index: 99998;
  pointer-events: none;
}

.kameha-impact-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: var(--kp-white);
  transform: translate(-50%, -50%) scale(0);
  box-shadow:
    0 0 80px var(--kp-white),
    0 0 160px var(--kp-cyan),
    0 0 320px var(--kp-blue);
  animation: kameha-impact-anim 0.6s steps(10) forwards;
  clip-path: polygon(
    25% 0%, 75% 0%, 75% 12%, 87% 12%, 87% 25%, 100% 25%,
    100% 75%, 87% 75%, 87% 87%, 75% 87%, 75% 100%,
    25% 100%, 25% 87%, 13% 87%, 13% 75%, 0% 75%,
    0% 25%, 13% 25%, 13% 12%, 25% 12%
  );
}

@keyframes kameha-impact-anim {
  0%   { transform: translate(-50%, -50%) scale(0)   rotate(0deg);   opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(2.5) rotate(45deg);  opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(4)   rotate(90deg);  opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(5)   rotate(135deg); opacity: 0; }
}

/* Étoiles pixel art éjectées du point d'impact */
.kameha-spark {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--kp-white);
  box-shadow:
    -8px 0 0 var(--kp-white),
    8px 0 0 var(--kp-white),
    0 -8px 0 var(--kp-white),
    0 8px 0 var(--kp-white),
    0 0 16px var(--kp-cyan);
  z-index: 99998;
  pointer-events: none;
  animation: kameha-spark-anim 0.8s steps(12) forwards;
}

@keyframes kameha-spark-anim {
  0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
  100% { transform: translate(var(--sx, 0), var(--sy, 0)) scale(0); opacity: 0; }
}

/* Flash blanc plein écran au pic */
.kameha-fullflash {
  position: fixed;
  inset: 0;
  background: var(--kp-white);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  animation: kameha-fullflash-anim 0.4s steps(6) forwards;
}

@keyframes kameha-fullflash-anim {
  0%   { opacity: 0; }
  30%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* Screen shake via overlay fullscreen
   IMPORTANT : on N'applique PAS transform sur body car ça crée
   un nouveau containing block et casse position:fixed des autres
   éléments kameha (le beam ne s'affichait plus à cause de ça).
   À la place, on shake juste un overlay fixed qui dessine un voile
   très léger animé, suffisant pour donner l'impression de tremblement. */
.kameha-shake-overlay {
  position: fixed;
  inset: -20px;
  z-index: 99995;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 60%,
      rgba(64, 196, 255, 0.08) 90%,
      rgba(64, 196, 255, 0.18) 100%
    );
  animation: kameha-overlay-shake 0.4s steps(3) infinite;
  mix-blend-mode: screen;
}

@keyframes kameha-overlay-shake {
  0%, 100% { transform: translate(0, 0); }
  10%      { transform: translate(-6px, -3px); }
  20%      { transform: translate( 7px,  4px); }
  30%      { transform: translate(-4px,  5px); }
  40%      { transform: translate( 5px, -4px); }
  50%      { transform: translate(-7px, -2px); }
  60%      { transform: translate( 4px,  5px); }
  70%      { transform: translate(-5px,  3px); }
  80%      { transform: translate( 5px, -5px); }
  90%      { transform: translate(-3px,  4px); }
}

/* =========================================================
   EASTER EGG #3 : MYTHIC RARE — carte cachée dans le wall
   Inspiré simeydotme/pokemon-cards-css (conic-gradient holo)
   ========================================================= */
.card.is-mythic {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  transform-style: preserve-3d;
}

/* Tilt 3D au hover (driven par JS via --rx/--ry) */
.card.is-mythic:hover {
  z-index: 10;
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.06);
}

/* Pulse subtil pour signaler que la carte est "spéciale" sans la révéler trop fort */
.card.is-mythic::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s;
  animation: mythic-idle-pulse 3s ease-in-out infinite;
}

@keyframes mythic-idle-pulse {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.35; }
}

/* Effet holographique au hover */
.card.is-mythic::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* Sparkles haute fréquence */
    repeating-linear-gradient(
      115deg,
      transparent 0%, transparent 6%,
      rgba(255, 255, 255, 0.4) 6.5%, transparent 7%,
      transparent 13%
    ),
    /* Halo conique multi-couleurs centré sur la souris */
    radial-gradient(
      circle at var(--mx) var(--my),
      hsla(0,  100%, 70%, 0.6) 0%,
      hsla(60, 100%, 70%, 0.55) 12%,
      hsla(120,100%, 70%, 0.5) 24%,
      hsla(180,100%, 70%, 0.55) 36%,
      hsla(240,100%, 70%, 0.6) 48%,
      hsla(300,100%, 70%, 0.55) 60%,
      hsla(360,100%, 70%, 0.5) 72%,
      transparent 85%
    );
  mix-blend-mode: color-dodge;
  filter: brightness(0.9) contrast(1.4) saturate(1.5);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.25s;
}

.card.is-mythic:hover::before {
  opacity: 0.5;
}

.card.is-mythic:hover::after {
  opacity: 1;
}

/* État "discovered" (déjà claimed) : on garde le glow doré subtil mais
   plus le full holo pour ne pas spoiler aux visiteurs suivants */
.card.is-mythic.is-discovered::after {
  opacity: 0;
}

/* =========================================================
   EASTER EGG #4 : IDLE WATCHER — peek depuis le coin
   ========================================================= */
.idle-peek {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 110px;
  background: linear-gradient(135deg, #2997ff 0%, #a855f7 100%);
  border-radius: 8px;
  border: 3px solid #ffd700;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(255, 215, 0, 0.4),
    inset 0 0 12px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  z-index: 99990;
  transform: translateX(120%) rotate(15deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.idle-peek.is-shown {
  transform: translateX(0) rotate(-6deg);
  animation: idle-peek-bob 1.5s ease-in-out infinite alternate;
}

.idle-peek.is-leaving {
  transform: translateX(120%) rotate(15deg);
  animation: none;
}

@keyframes idle-peek-bob {
  0%   { transform: translateX(0) rotate(-6deg) translateY(0); }
  100% { transform: translateX(0) rotate(-3deg) translateY(-6px); }
}

.idle-peek-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.idle-peek-text {
  font-size: 8px;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.idle-peek::before {
  content: '?';
  position: absolute;
  top: -12px;
  right: -8px;
  width: 28px;
  height: 28px;
  background: #ffd700;
  color: #07111f;
  border-radius: 50%;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  animation: idle-peek-question 0.8s steps(2) infinite;
}

@keyframes idle-peek-question {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* =========================================================
   EASTER EGG #5 : LONG-PRESS CARD 3s (mobile-first)
   Ring progress visible pendant le hold
   ========================================================= */
.longpress-ring {
  position: fixed;
  width: 80px;
  height: 80px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #ffd700;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99996;
  transform: translate(-50%, -50%);
  animation: longpress-spin 3s linear forwards;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
}

@keyframes longpress-spin {
  from { transform: translate(-50%, -50%) rotate(0deg);    border-top-color: #ffd700; }
  to   { transform: translate(-50%, -50%) rotate(1080deg); border-top-color: #ff9d00; }
}

/* =========================================================
   EASTER EGG #6 : TRIPLE-TAP LOGO (mobile + desktop)
   Visual feedback subtil sur chaque tap
   ========================================================= */
.logo-tap-pulse {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(64, 196, 255, 0.7);
  pointer-events: none;
  animation: logo-tap-anim 0.5s ease-out forwards;
}

@keyframes logo-tap-anim {
  0%   { width: 0;    height: 0;    opacity: 1; transform: translate(-50%, -50%); }
  100% { width: 100px; height: 100px; opacity: 0; transform: translate(-50%, -50%); }
}

/* =========================================================
   ACHIEVEMENTS PANEL — déclenché par Tab × 3
   Privacy-preserving : juste un compteur anonyme global
   ========================================================= */
.ach-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 17, 31, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.ach-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ach-modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, #0c1829 0%, #07111f 100%);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 20px;
  padding: 32px 28px 24px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(255, 215, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: scale(0.85) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Google Sans', -apple-system, sans-serif;
  text-align: center;
}

.ach-overlay.is-open .ach-modal {
  transform: scale(1) translateY(0);
}

.ach-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.ach-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: rotate(90deg);
}

.ach-trophy {
  font-size: 44px;
  margin-bottom: 8px;
  animation: ach-trophy-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
@keyframes ach-trophy-bounce {
  0%   { transform: scale(0) rotate(-30deg); }
  60%  { transform: scale(1.2) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

.ach-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.85);
  margin: 0 0 24px;
}

.ach-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 12px;
}

.ach-stat-value {
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd700 0%, #ff9d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 6px;
}

.ach-stat-value.is-loading {
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.3);
  font-size: 24px;
  animation: ach-loading-pulse 1.2s ease-in-out infinite;
}

@keyframes ach-loading-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}

.ach-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.ach-stat-user .ach-stat-value {
  background: linear-gradient(135deg, #2997ff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ach-hint {
  margin-top: 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .og-modal {
    padding: 32px 24px 24px;
    border-radius: 20px;
  }

  .og-title { font-size: 22px; }
  .og-badge { width: 72px; height: 72px; font-size: 22px; }
}